@po-ui/ng-components 5.18.0 → 5.22.0

package/bundles/po-ui-ng-components.umd.js

@@ -3977,6 +3977,7 @@
             }
             else {
                 newValue = selectedDate;
+                this.setActivateDate(selectedDate);
             }
             this.value = newValue;
             var newModel = this.convertDateToISO(this.value);
@@ -4250,6 +4251,12 @@
                 es: 'Año',
                 ru: 'Год'
             };
+            this.todayLabel = {
+                pt: 'Hoje',
+                en: 'Today',
+                es: 'Hoy',
+                ru: 'Сегодня'
+            };
         }
         PoCalendarLangService.prototype.getMonth = function (month) {
             return this.months[month][this.language];
@@ -4278,6 +4285,9 @@
         PoCalendarLangService.prototype.getYearLabel = function () {
             return this.yearLabel[this.language];
         };
+        PoCalendarLangService.prototype.getTodayLabel = function () {
+            return this.todayLabel[this.language];
+        };
         PoCalendarLangService.prototype.setLanguage = function (language) {
             if (language && language.length >= 2) {
                 language = language.toLowerCase().slice(0, 2);
@@ -4438,6 +4448,9 @@
         PoCalendarWrapperComponent.prototype.getForegroundColor = function (displayValue, propertyValue) {
             return displayValue === propertyValue ? 'po-calendar-box-foreground-selected' : 'po-calendar-box-foreground';
         };
+        PoCalendarWrapperComponent.prototype.isTodayUnavailable = function () {
+            return this.minDate > this.today || this.maxDate < this.today;
+        };
         PoCalendarWrapperComponent.prototype.onNextMonth = function () {
             this.displayMonthNumber < 11
                 ? this.updateDisplay(this.displayYear, this.displayMonthNumber + 1)
@@ -4563,6 +4576,7 @@
             this.displayWeekDays = this.poCalendarLangService.getWeekDaysArray();
             this.displayMonths = this.poCalendarLangService.getMonthsArray();
             this.displayMonth = this.displayMonths[this.displayMonthNumber];
+            this.displayToday = this.poCalendarLangService.getTodayLabel();
         };
         PoCalendarWrapperComponent.prototype.updateDate = function (value) {
             if (value === void 0) { value = new Date(); }
@@ -4589,7 +4603,7 @@
     PoCalendarWrapperComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-calendar-wrapper',
-                    template: "<div class=\"po-calendar-wrapper\">\n  <ng-container *ngIf=\"isDayVisible\">\n    <po-calendar-header\n      [p-hide-previous]=\"isEndPart\"\n      [p-hide-next]=\"isStartPart && !responsive\"\n      (p-previous)=\"onPreviousMonth()\"\n      (p-next)=\"onNextMonth()\"\n    >\n      <span class=\"po-clickable po-mr-1\" (click)=\"selectDisplayMode('month')\">{{ displayMonth }}</span>\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">{{ displayYear }}</span>\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\" *ngFor=\"let weekDay of displayWeekDays\">\n          {{ weekDay }}\n        </div>\n      </div>\n\n      <div class=\"po-calendar-content-list-day\">\n        <div\n          *ngFor=\"let day of displayDays\"\n          class=\"po-calendar-day\"\n          [ngClass]=\"getDayBackgroundColor(day)\"\n          (click)=\"onSelectDate(day)\"\n          (mouseenter)=\"onMouseEnter(day)\"\n          (mouseleave)=\"onMouseLeave()\"\n          attr-calendar\n        >\n          <span *ngIf=\"day !== 0\" [ngClass]=\"getDayForegroundColor(day)\">\n            {{ day.getDate() }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isMonthVisible\">\n    <po-calendar-header (p-previous)=\"updateYear(-1)\" (p-next)=\"updateYear(1)\">\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">\n        {{ displayYear }}\n      </span>\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\">\n          {{ monthLabel }}\n        </div>\n      </div>\n      <div class=\"po-calendar-content-list-month\">\n        <div\n          *ngFor=\"let month of displayMonths; let i = index\"\n          class=\"po-calendar-month\"\n          [ngClass]=\"getBackgroundColor(i, displayMonthNumber)\"\n          (click)=\"onSelectMonth(displayYear, i)\"\n          attr-calendar\n        >\n          <span [ngClass]=\"getForegroundColor(i, displayMonthNumber)\">\n            {{ month }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isYearVisible\">\n    <po-calendar-header (p-previous)=\"updateYear(-10)\" (p-next)=\"updateYear(10)\">\n      {{ displayStartDecade }} - {{ displayFinalDecade }}\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\">\n          {{ yearLabel }}\n        </div>\n      </div>\n\n      <div class=\"po-calendar-content-list-year\">\n        <div\n          *ngFor=\"let year of displayDecade; let i = index\"\n          class=\"po-calendar-year\"\n          [ngClass]=\"getBackgroundColor(year, currentYear)\"\n          (click)=\"onSelectYear(year, displayMonthNumber)\"\n          attr-calendar\n        >\n          <span [ngClass]=\"getForegroundColor(year, currentYear)\">\n            {{ year }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</div>\n",
+                    template: "<div class=\"po-calendar-wrapper\">\n  <ng-container *ngIf=\"isDayVisible\">\n    <po-calendar-header\n      [p-hide-previous]=\"isEndPart\"\n      [p-hide-next]=\"isStartPart && !responsive\"\n      (p-previous)=\"onPreviousMonth()\"\n      (p-next)=\"onNextMonth()\"\n    >\n      <span class=\"po-clickable po-mr-1\" (click)=\"selectDisplayMode('month')\">{{ displayMonth }}</span>\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">{{ displayYear }}</span>\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\" *ngFor=\"let weekDay of displayWeekDays\">\n          {{ weekDay }}\n        </div>\n      </div>\n\n      <div class=\"po-calendar-content-list-day\">\n        <div\n          *ngFor=\"let day of displayDays\"\n          class=\"po-calendar-day\"\n          [ngClass]=\"getDayBackgroundColor(day)\"\n          (click)=\"onSelectDate(day)\"\n          (mouseenter)=\"onMouseEnter(day)\"\n          (mouseleave)=\"onMouseLeave()\"\n          attr-calendar\n        >\n          <span *ngIf=\"day !== 0\" [ngClass]=\"getDayForegroundColor(day)\">\n            {{ day.getDate() }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isMonthVisible\">\n    <po-calendar-header (p-previous)=\"updateYear(-1)\" (p-next)=\"updateYear(1)\">\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">\n        {{ displayYear }}\n      </span>\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\">\n          {{ monthLabel }}\n        </div>\n      </div>\n      <div class=\"po-calendar-content-list-month\">\n        <div\n          *ngFor=\"let month of displayMonths; let i = index\"\n          class=\"po-calendar-month\"\n          [ngClass]=\"getBackgroundColor(i, displayMonthNumber)\"\n          (click)=\"onSelectMonth(displayYear, i)\"\n          attr-calendar\n        >\n          <span [ngClass]=\"getForegroundColor(i, displayMonthNumber)\">\n            {{ month }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isYearVisible\">\n    <po-calendar-header (p-previous)=\"updateYear(-10)\" (p-next)=\"updateYear(10)\">\n      {{ displayStartDecade }} - {{ displayFinalDecade }}\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\">\n          {{ yearLabel }}\n        </div>\n      </div>\n\n      <div class=\"po-calendar-content-list-year\">\n        <div\n          *ngFor=\"let year of displayDecade; let i = index\"\n          class=\"po-calendar-year\"\n          [ngClass]=\"getBackgroundColor(year, currentYear)\"\n          (click)=\"onSelectYear(year, displayMonthNumber)\"\n          attr-calendar\n        >\n          <span [ngClass]=\"getForegroundColor(year, currentYear)\">\n            {{ year }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!range\">\n    <div class=\"po-calendar-footer\">\n      <div class=\"po-calendar-footer-today\">\n        <button class=\"po-calendar-footer-today-button\" (click)=\"onSelectDate(today)\" [disabled]=\"isTodayUnavailable()\">\n          {{ displayToday }}\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</div>\n",
                     providers: [PoCalendarService],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
@@ -11060,7 +11074,8 @@
                             multi: true
                         },
                         PoControlPositionService
-                    ]
+                    ],
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     PoDatepickerComponent.ctorParameters = function () { return [
@@ -11124,7 +11139,8 @@
      * `po-table` e os demais componentes do PO.
      *
      * No rodapé encontram-se os botões de ação primária e secundária, no qual permitem definir uma ação e um rótulo, bem como
-     * definir um estado de carregando e / ou desabilitado. Também é possível definir o botão com o tipo *danger*.
+     * definir um estado de carregando e / ou desabilitado e / ou definir o botão com o tipo *danger*. Também é possível utilizar
+     * o componente [`PoModalFooter`](/documentation/po-modal-footer).
      *
      * > É possível fechar a modal através da tecla *ESC*, quando a propriedade `p-hide-close` não estiver habilitada.
      */
@@ -11244,6 +11260,49 @@
         hideClose: [{ type: i0.Input, args: ['p-hide-close',] }]
     };
 
+    /**
+     * @description
+     *
+     * O componente `po-modal-footer` pode ser utilizado para incluir os botões de ações no rodapé da [`PoModal`](/documentation/po-modal), bem como para dar liberdade ao desenvolvedor de incluir outros itens necessários.
+     * > Como boa prática, deve-se observar a utilização de apenas um botão primário.
+     *
+     * ```
+     * <po-modal p-title="Title Modal" #modal>
+     *  <po-modal-footer>
+     *    <po-button p-label="Close" (p-click)="modal.close()"> </po-button>
+     *    <po-button p-label="Clean" (p-click)="clean()"> </po-button>
+     *    <po-button p-label="Confirm" p-type="primary" (p-click)="confirm()"> </po-button>
+     *  </po-modal-footer>
+     * </po-modal>
+     * ```
+     */
+    var PoModalFooterComponent = /** @class */ (function () {
+        function PoModalFooterComponent() {
+            /**
+             * @optional
+             *
+             * @description
+             *
+             * Desabilita o alinhamento padrão, à direita, dos botões de ações que ficam no rodapé da [`PoModal`](/documentation/po-modal).
+             *
+             * > Caso a propriedade esteja habilitada, o alinhamento deverá ser a esquerda e pode ser personalizado.
+             *
+             * @default false
+             */
+            this.disabledAlign = false;
+        }
+        return PoModalFooterComponent;
+    }());
+    PoModalFooterComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'po-modal-footer',
+                    template: "<div class=\"po-modal-footer\" [class.po-modal-footer-align-right]=\"!disabledAlign\">\n  <ng-content></ng-content>\n</div>\n"
+                },] }
+    ];
+    PoModalFooterComponent.propDecorators = {
+        disabledAlign: [{ type: i0.Input, args: ['p-disabled-align',] }]
+    };
+
     var PoActiveOverlayService = /** @class */ (function () {
         function PoActiveOverlayService() {
             this.activeOverlay = [];
@@ -11359,7 +11418,7 @@
     PoModalComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-modal',
-                    template: "<div *ngIf=\"!isHidden\" class=\"po-modal\" tabindex=\"0\" (keydown.esc)=\"closeModalOnEscapeKey($event)\">\n  <div class=\"po-modal-overlay\">\n    <div class=\"po-modal-container po-pb-2 po-pt-2\" (mousedown)=\"onClickOut($event)\">\n      <div class=\"po-modal-vertical-align\">\n        <div #modalContent class=\"po-modal-content po-modal-{{ size }}\" tabindex=\"-1\">\n          <div class=\"po-modal-header\">\n            <div class=\"po-modal-title po-text-ellipsis\">\n              {{ title }}\n            </div>\n\n            <a *ngIf=\"!hideClose\" class=\"po-modal-header-close-button\" tabindex=\"0\" (click)=\"close(true)\">\n              <span class=\"po-icon po-icon-close\"></span>\n            </a>\n          </div>\n\n          <div class=\"po-modal-body\">\n            <ng-content></ng-content>\n          </div>\n\n          <div class=\"po-modal-footer\">\n            <po-button\n              *ngIf=\"secondaryAction\"\n              [p-disabled]=\"secondaryAction.disabled\"\n              [p-label]=\"secondaryAction.label\"\n              [p-loading]=\"secondaryAction.loading\"\n              [p-type]=\"getSecondaryActionButtonType()\"\n              (p-click)=\"secondaryAction.action()\"\n            >\n            </po-button>\n\n            <po-button\n              class=\"po-button-modal-first-action\"\n              [p-disabled]=\"primaryAction.disabled\"\n              [p-label]=\"primaryAction.label\"\n              [p-loading]=\"primaryAction.loading\"\n              [p-type]=\"getPrimaryActionButtonType()\"\n              (p-click)=\"primaryAction.action()\"\n            >\n            </po-button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n"
+                    template: "<div *ngIf=\"!isHidden\" class=\"po-modal\" tabindex=\"0\" (keydown.esc)=\"closeModalOnEscapeKey($event)\">\n  <div class=\"po-modal-overlay\">\n    <div class=\"po-modal-container po-pb-2 po-pt-2\" (mousedown)=\"onClickOut($event)\">\n      <div class=\"po-modal-vertical-align\">\n        <div #modalContent class=\"po-modal-content po-modal-{{ size }}\" tabindex=\"-1\">\n          <div class=\"po-modal-header\">\n            <div class=\"po-modal-title po-text-ellipsis\">\n              {{ title }}\n            </div>\n\n            <a *ngIf=\"!hideClose\" class=\"po-modal-header-close-button\" tabindex=\"0\" (click)=\"close(true)\">\n              <span class=\"po-icon po-icon-close\"></span>\n            </a>\n          </div>\n\n          <div class=\"po-modal-body\">\n            <ng-content></ng-content>\n          </div>\n\n          <ng-container *ngIf=\"modalFooter; else defaultModalFooterTemplate\">\n            <ng-content select=\"po-modal-footer\"></ng-content>\n          </ng-container>\n\n          <ng-template #defaultModalFooterTemplate>\n            <po-modal-footer>\n              <po-button\n                *ngIf=\"secondaryAction\"\n                [p-disabled]=\"secondaryAction.disabled\"\n                [p-label]=\"secondaryAction.label\"\n                [p-loading]=\"secondaryAction.loading\"\n                [p-type]=\"getSecondaryActionButtonType()\"\n                (p-click)=\"secondaryAction.action()\"\n              >\n              </po-button>\n\n              <po-button\n                class=\"po-button-modal-first-action\"\n                [p-disabled]=\"primaryAction.disabled\"\n                [p-label]=\"primaryAction.label\"\n                [p-loading]=\"primaryAction.loading\"\n                [p-type]=\"getPrimaryActionButtonType()\"\n                (p-click)=\"primaryAction.action()\"\n              >\n              </po-button>\n            </po-modal-footer>\n          </ng-template>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n"
                 },] }
     ];
     PoModalComponent.ctorParameters = function () { return [
@@ -11367,7 +11426,8 @@
         { type: PoLanguageService }
     ]; };
     PoModalComponent.propDecorators = {
-        modalContent: [{ type: i0.ViewChild, args: ['modalContent', { read: i0.ElementRef },] }]
+        modalContent: [{ type: i0.ViewChild, args: ['modalContent', { read: i0.ElementRef },] }],
+        modalFooter: [{ type: i0.ContentChild, args: [PoModalFooterComponent,] }]
     };
 
     /**
@@ -11382,8 +11442,8 @@
     PoModalModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [common.CommonModule, PoButtonModule],
-                    declarations: [PoModalComponent],
-                    exports: [PoModalComponent]
+                    declarations: [PoModalComponent, PoModalFooterComponent],
+                    exports: [PoModalComponent, PoModalFooterComponent]
                 },] }
     ];
 
@@ -17608,11 +17668,12 @@
      */
     var PoDatepickerRangeComponent = /** @class */ (function (_super) {
         __extends(PoDatepickerRangeComponent, _super);
-        function PoDatepickerRangeComponent(changeDetector, controlPosition, renderer, poDateService, poDatepickerRangeElement, poLanguageService) {
+        function PoDatepickerRangeComponent(changeDetector, controlPosition, renderer, cd, poDateService, poDatepickerRangeElement, poLanguageService) {
             var _this = _super.call(this, poDateService, poLanguageService) || this;
             _this.changeDetector = changeDetector;
             _this.controlPosition = controlPosition;
             _this.renderer = renderer;
+            _this.cd = cd;
             _this.isCalendarVisible = false;
             _this.onScroll = function () {
                 if (_this.isCalendarVisible) {
@@ -17759,7 +17820,10 @@
             this.updateScreenByModel({ start: start || '', end: end || '' });
             this.updateModelByScreen(isStartDateTargetEvent, start || '', end || '');
             if (start && end) {
-                setTimeout(function () { return (_this.isCalendarVisible = false); }, 300);
+                setTimeout(function () {
+                    _this.isCalendarVisible = false;
+                    _this.cd.markForCheck();
+                }, 300);
             }
         };
         PoDatepickerRangeComponent.prototype.onFocus = function (event) {
@@ -18009,6 +18073,7 @@
                 !this.hasAttrCalendar(event.target)) {
                 this.isCalendarVisible = false;
             }
+            this.cd.markForCheck();
         };
         return PoDatepickerRangeComponent;
     }(PoDatepickerRangeBaseComponent));
@@ -18016,13 +18081,15 @@
         { type: i0.Component, args: [{
                     selector: 'po-datepicker-range',
                     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      (ngModelChange)=\"onCalendarChange($event)\"\n    ></po-calendar>\n  </div>\n</ng-container>\n",
-                    providers: providers$5
+                    providers: providers$5,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     PoDatepickerRangeComponent.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef },
         { type: PoControlPositionService },
         { type: i0.Renderer2 },
+        { type: i0.ChangeDetectorRef },
         { type: PoDateService },
         { type: i0.ElementRef },
         { type: PoLanguageService }
@@ -18479,8 +18546,8 @@
      */
     var PoDecimalComponent = /** @class */ (function (_super) {
         __extends(PoDecimalComponent, _super);
-        function PoDecimalComponent(el, poLanguageService) {
-            var _this = _super.call(this) || this;
+        function PoDecimalComponent(el, poLanguageService, cd) {
+            var _this = _super.call(this, cd) || this;
             _this.el = el;
             _this.poLanguageService = poLanguageService;
             _this._decimalsLength = poDecimalDefaultDecimalsLength;
@@ -19031,6 +19098,7 @@
         { type: i0.Component, args: [{
                     selector: 'po-decimal',
                     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",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -19047,7 +19115,8 @@
     ];
     PoDecimalComponent.ctorParameters = function () { return [
         { type: i0.ElementRef },
-        { type: PoLanguageService }
+        { type: PoLanguageService },
+        { type: i0.ChangeDetectorRef }
     ]; };
     PoDecimalComponent.propDecorators = {
         inputEl: [{ type: i0.ViewChild, args: ['inp', { read: i0.ElementRef, static: true },] }],
@@ -19843,6 +19912,7 @@
             }
         };
         PoLookupBaseComponent.prototype.cleanViewValue = function () {
+            this.setDisclaimers([]);
             this.setViewValue('', {});
             this.oldValue = '';
             this.valueToModel = null;
@@ -20893,6 +20963,11 @@
             // eslint-disable-next-line
             useExisting: i0.forwardRef(function () { return PoLookupComponent; }),
             multi: true
+        },
+        {
+            provide: forms.NgControl,
+            useExisting: i0.forwardRef(function () { return PoLookupComponent; }),
+            multi: false
         }
     ];
     /**
@@ -21529,9 +21604,11 @@
              *
              */
             set: function (value) {
-                this._filterService = value;
-                this.autoHeight = this.autoHeightInitialValue !== undefined ? this.autoHeightInitialValue : true;
-                this.options = [];
+                if (value) {
+                    this._filterService = value;
+                    this.autoHeight = this.autoHeightInitialValue !== undefined ? this.autoHeightInitialValue : true;
+                    this.options = [];
+                }
             },
             enumerable: false,
             configurable: true
@@ -23770,8 +23847,8 @@
     var PoNumberBaseComponent = /** @class */ (function (_super) {
         __extends(PoNumberBaseComponent, _super);
         /* istanbul ignore next */
-        function PoNumberBaseComponent(elementRef) {
-            var _this = _super.call(this, elementRef) || this;
+        function PoNumberBaseComponent(elementRef, cd) {
+            var _this = _super.call(this, elementRef, cd) || this;
             _this.type = 'number';
             _this.invalidInputValueOnBlur = false;
             return _this;
@@ -23878,7 +23955,8 @@
         { type: i0.Directive }
     ];
     PoNumberBaseComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef }
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef }
     ]; };
 
     /**
@@ -23910,8 +23988,8 @@
     var PoNumberComponent = /** @class */ (function (_super) {
         __extends(PoNumberComponent, _super);
         /* istanbul ignore next */
-        function PoNumberComponent(el) {
-            var _this = _super.call(this, el) || this;
+        function PoNumberComponent(el, cd) {
+            var _this = _super.call(this, el, cd) || this;
             /**
              * @optional
              *
@@ -23982,6 +24060,7 @@
         { type: i0.Component, args: [{
                     selector: 'po-number',
                     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",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -23997,7 +24076,8 @@
                 },] }
     ];
     PoNumberComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef }
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef }
     ]; };
     PoNumberComponent.propDecorators = {
         step: [{ type: i0.Input, args: ['p-step',] }],
@@ -24420,28 +24500,73 @@
     };
 
     /**
+     * @usedBy PoSelectComponent
+     *
      * @description
      *
-     * O componente po-select exibe uma lista de valores e permite que o usuário selecione um desses valores.
-     * Os valores listados podem ser fixos ou dinâmicos de acordo com a necessidade do desenvolvedor, dando mais flexibilidade ao componente.
-     * O po-select não permite que o usuário informe um valor diferente dos valores listados, isso garante a consistência da informação.
-     * O po-select não permite que sejam passados valores duplicados, undefined e null para as opções, excluindo-os da lista.
+     * Esta diretiva permite personalizar o conteúdo dos itens exibidos na lista suspensa do componente.
      *
-     * > Ao passar um valor para o _model_ que não está na lista de opções, o mesmo será definido como `undefined`.
+     * > Quando utilizada em _mobile_ será exibido o componente nativo.
      *
-     * Também existe a possibilidade de utilizar um _template_ para a exibição dos itens da lista,
-     * veja mais em **[p-select-option-template](/documentation/po-select-option-template)**.
+     * Para personalizar o conteúdo de cada item da lista deve-se utilizar a diretiva `p-select-option-template` com `ng-template`
+     * dentro da tag `po-select`.
+     *
+     * Para obter a referência do item atual, use `let-option`, com isso você terá acesso aos valores e poderá personalizar sua exibição.
+     *
+     * Esta diretiva compõe-se de dois meios para uso, de forma explícita tal como em *syntax sugar*. Veja a seguir ambos, respectivamente:
+     *
+     * ```
+     * ...
+     * <po-select
+     *   name="select"
+     *   [(ngModel)]="select"
+     *   [p-options]="options">
+     *     <ng-template p-select-option-template let-option>
+     *       <option-template [option]="option"></option-template>
+     *     </ng-template>
+     * </po-select>
+     * ...
+     * ```
+     *
+     * ```
+     * ...
+     * <po-select
+     *   name="select"
+     *   [(ngModel)]="select"
+     *   [p-options]="options">
+     *     <div *p-select-option-template="let option">
+     *       <option-template [option]="option"></option-template>
+     *     </div>
+     * </po-select>
+     * ...
+     *
+     * ```
      */
-    var PoSelectBaseComponent = /** @class */ (function () {
-        function PoSelectBaseComponent(element, changeDetector) {
-            this.element = element;
+    var PoSelectOptionTemplateDirective = /** @class */ (function () {
+        // Necessário manter templateRef para o funcionamento do row template.
+        function PoSelectOptionTemplateDirective(templateRef) {
+            this.templateRef = templateRef;
+        }
+        return PoSelectOptionTemplateDirective;
+    }());
+    PoSelectOptionTemplateDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[p-select-option-template]'
+                },] }
+    ];
+    PoSelectOptionTemplateDirective.ctorParameters = function () { return [
+        { type: i0.TemplateRef }
+    ]; };
+
+    var PoFieldModel = /** @class */ (function () {
+        function PoFieldModel() {
             /**
              * @optional
              *
              * @description
              *
-             * Aplica foco no elemento ao ser iniciado.
-             * > Caso mais de um elemento seja configurado com essa propriedade,
+             * Aplica o 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.
              *
              * @default `false`
@@ -24452,96 +24577,84 @@
              *
              * @description
              *
-             * Deve ser informada uma função que será disparada quando houver alterações no ngModel.
+             * Indica se o campo será desabilitado.
+             *
+             * @default `false`
              */
-            this.change = new i0.EventEmitter();
+            this.disabled = false;
             /**
              * @optional
              *
              * @description
              *
-             * Função para atualizar o ngModel do componente, necessário quando não for utilizado dentro da tag form.
+             * Evento disparado ao alterar valor do campo.
              */
-            this.ngModelChange = new i0.EventEmitter();
-            this.readyToValidation = false;
-            this._disabled = false;
-            this._readonly = false;
-            this._required = false;
-            this.element = element;
-            this.changeDetector = changeDetector;
+            this.change = new i0.EventEmitter();
         }
-        Object.defineProperty(PoSelectBaseComponent.prototype, "options", {
-            get: function () {
-                return this._options;
-            },
-            /**
-             * Nesta propriedade deve ser definido uma coleção de objetos que implementam a interface `PoSelectOption`.
-             *
-             * Caso esta lista estiver vazia, o model será `undefined`.
-             *
-             * > Essa propriedade é imutável, ou seja, sempre que quiser atualizar a lista de opções disponíveis
-             * atualize a referência do objeto:
-             *
-             * ```
-             * // atualiza a referência do objeto garantindo a atualização do template
-             * this.options = [...this.options, { value: 'x', label: 'Nova opção' }];
-             *
-             * // 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' });
-             * ```
-             */
-            set: function (options) {
-                this._options = options;
-                removeDuplicatedOptions(this._options);
-                removeUndefinedAndNullOptions(this._options);
-                this.onUpdateOptions();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PoSelectBaseComponent.prototype, "disabled", {
-            get: function () {
-                return this._disabled;
-            },
+        // Função implementada do ControlValueAccessor
+        // Usada para interceptar os estados de habilitado via forms api
+        PoFieldModel.prototype.setDisabledState = function (isDisabled) {
+            this.disabled = isDisabled;
+        };
+        PoFieldModel.prototype.registerOnChange = function (fn) {
+            this.propagateChange = fn;
+        };
+        PoFieldModel.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        PoFieldModel.prototype.writeValue = function (value) {
+            this.onWriteValue(value);
+        };
+        PoFieldModel.prototype.emitChange = function (value) {
+            this.change.emit(value);
+        };
+        PoFieldModel.prototype.updateModel = function (value) {
+            if (this.propagateChange) {
+                this.propagateChange(value);
+            }
+        };
+        return PoFieldModel;
+    }());
+    PoFieldModel.decorators = [
+        { type: i0.Directive }
+    ];
+    PoFieldModel.ctorParameters = function () { return []; };
+    PoFieldModel.propDecorators = {
+        label: [{ type: i0.Input, args: ['p-label',] }],
+        name: [{ type: i0.Input, args: ['name',] }],
+        help: [{ type: i0.Input, args: ['p-help',] }],
+        autoFocus: [{ type: i0.Input, args: ['p-auto-focus',] }],
+        disabled: [{ type: i0.Input, args: ['p-disabled',] }],
+        change: [{ type: i0.Output, args: ['p-change',] }]
+    };
+    __decorate([
+        InputBoolean()
+    ], PoFieldModel.prototype, "autoFocus", void 0);
+    __decorate([
+        InputBoolean()
+    ], PoFieldModel.prototype, "disabled", void 0);
+
+    /**
+     * @docsExtends PoFieldModel
+     */
+    var PoFieldValidateModel = /** @class */ (function (_super) {
+        __extends(PoFieldValidateModel, _super);
+        function PoFieldValidateModel() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             /**
              * @optional
              *
              * @description
              *
-             * Indica que o campo será desabilitado.
-             *
-             * @default `false`
-             */
-            set: function (disabled) {
-                this._disabled = convertToBoolean(disabled);
-                this.validateModel();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PoSelectBaseComponent.prototype, "readonly", {
-            get: function () {
-                return this._readonly;
-            },
-            /**
-             * @optional
-             *
-             * @description
+             * Define se a indicação de campo opcional será exibida.
              *
-             * Indica que o campo será somente para leitura.
+             * > Não será exibida a indicação se:
+             * - O campo conter `p-required`;
+             * - Não possuir `p-help` e/ou `p-label`.
              *
              * @default `false`
              */
-            set: function (value) {
-                this._readonly = convertToBoolean(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PoSelectBaseComponent.prototype, "required", {
-            get: function () {
-                return this._required;
-            },
+            _this.optional = false;
             /**
              * @optional
              *
@@ -24551,140 +24664,47 @@
              *
              * @default `false`
              */
-            set: function (required) {
-                this._required = convertToBoolean(required);
-                this.validateModel();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PoSelectBaseComponent.prototype.callModelChange = function (value) {
-            // Caso o componente estiver dentro de um form, terá acesso ao método onModelChange.
-            return this.onModelChange ? this.onModelChange(value) : this.ngModelChange.emit(value);
-        };
-        PoSelectBaseComponent.prototype.onChange = function (value) {
-            this.change.emit(value);
-        };
-        PoSelectBaseComponent.prototype.validate = function (abstractControl) {
-            if (requiredFailed(this._required, this._disabled, abstractControl.value)) {
+            _this.required = false;
+            return _this;
+        }
+        PoFieldValidateModel.prototype.validate = function (abstractControl) {
+            if (requiredFailed(this.required, this.disabled, abstractControl.value)) {
                 return {
                     required: {
                         valid: false
                     }
                 };
             }
-            return null;
-        };
-        // Função implementada do ControlValueAccessor
-        // Usada para interceptar os estados de habilitado via forms api
-        PoSelectBaseComponent.prototype.setDisabledState = function (isDisabled) {
-            this.disabled = isDisabled;
-            this.changeDetector.detectChanges();
-        };
-        PoSelectBaseComponent.prototype.registerOnChange = function (fn) {
-            this.onModelChange = fn;
-        };
-        PoSelectBaseComponent.prototype.registerOnTouched = function (fn) {
-            this.onModelTouched = fn;
+            return this.extraValidation(abstractControl);
         };
-        PoSelectBaseComponent.prototype.registerOnValidatorChange = function (fn) {
+        PoFieldValidateModel.prototype.registerOnValidatorChange = function (fn) {
             this.onValidatorChange = fn;
         };
-        PoSelectBaseComponent.prototype.validateModel = function () {
+        PoFieldValidateModel.prototype.validateModel = function () {
             if (this.onValidatorChange) {
                 this.onValidatorChange();
             }
         };
-        return PoSelectBaseComponent;
-    }());
-    PoSelectBaseComponent.decorators = [
+        return PoFieldValidateModel;
+    }(PoFieldModel));
+    PoFieldValidateModel.decorators = [
         { type: i0.Directive }
     ];
-    PoSelectBaseComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: i0.ChangeDetectorRef }
-    ]; };
-    PoSelectBaseComponent.propDecorators = {
-        autoFocus: [{ type: i0.Input, args: ['p-auto-focus',] }],
-        label: [{ type: i0.Input, args: ['p-label',] }],
-        name: [{ type: i0.Input, args: ['name',] }],
-        help: [{ type: i0.Input, args: ['p-help',] }],
-        placeholder: [{ type: i0.Input, args: ['p-placeholder',] }],
+    PoFieldValidateModel.propDecorators = {
         optional: [{ type: i0.Input, args: ['p-optional',] }],
-        change: [{ type: i0.Output, args: ['p-change',] }],
-        ngModelChange: [{ type: i0.Output, args: ['ngModelChange',] }],
-        options: [{ type: i0.Input, args: ['p-options',] }],
-        disabled: [{ type: i0.Input, args: ['p-disabled',] }],
-        readonly: [{ type: i0.Input, args: ['p-readonly',] }],
         required: [{ type: i0.Input, args: ['p-required',] }]
     };
     __decorate([
         InputBoolean()
-    ], PoSelectBaseComponent.prototype, "autoFocus", void 0);
-
-    /**
-     * @usedBy PoSelectComponent
-     *
-     * @description
-     *
-     * Esta diretiva permite personalizar o conteúdo dos itens exibidos na lista suspensa do componente.
-     *
-     * > Quando utilizada em _mobile_ será exibido o componente nativo.
-     *
-     * Para personalizar o conteúdo de cada item da lista deve-se utilizar a diretiva `p-select-option-template` com `ng-template`
-     * dentro da tag `po-select`.
-     *
-     * Para obter a referência do item atual, use `let-option`, com isso você terá acesso aos valores e poderá personalizar sua exibição.
-     *
-     * Esta diretiva compõe-se de dois meios para uso, de forma explícita tal como em *syntax sugar*. Veja a seguir ambos, respectivamente:
-     *
-     * ```
-     * ...
-     * <po-select
-     *   name="select"
-     *   [(ngModel)]="select"
-     *   [p-options]="options">
-     *     <ng-template p-select-option-template let-option>
-     *       <option-template [option]="option"></option-template>
-     *     </ng-template>
-     * </po-select>
-     * ...
-     * ```
-     *
-     * ```
-     * ...
-     * <po-select
-     *   name="select"
-     *   [(ngModel)]="select"
-     *   [p-options]="options">
-     *     <div *p-select-option-template="let option">
-     *       <option-template [option]="option"></option-template>
-     *     </div>
-     * </po-select>
-     * ...
-     *
-     * ```
-     */
-    var PoSelectOptionTemplateDirective = /** @class */ (function () {
-        // Necessário manter templateRef para o funcionamento do row template.
-        function PoSelectOptionTemplateDirective(templateRef) {
-            this.templateRef = templateRef;
-        }
-        return PoSelectOptionTemplateDirective;
-    }());
-    PoSelectOptionTemplateDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[p-select-option-template]'
-                },] }
-    ];
-    PoSelectOptionTemplateDirective.ctorParameters = function () { return [
-        { type: i0.TemplateRef }
-    ]; };
+    ], PoFieldValidateModel.prototype, "optional", void 0);
+    __decorate([
+        InputBoolean()
+    ], PoFieldValidateModel.prototype, "required", void 0);
 
     var poSelectContentOffset = 8;
     var poSelectContentPositionDefault = 'bottom';
     /**
-     * @docsExtends PoSelectBaseComponent
+     * @docsExtends PoFieldValidateModel
      *
      * @example
      *
@@ -24705,13 +24725,46 @@
      *   <file name='sample-po-select-customer-registration/sample-po-select-customer-registration.component.e2e-spec.ts'> </file>
      *   <file name='sample-po-select-customer-registration/sample-po-select-customer-registration.component.po.ts'> </file>
      * </example>
+     *
+     * @description
+     *
+     * O componente po-select exibe uma lista de valores e permite que o usuário selecione um desses valores.
+     * Os valores listados podem ser fixos ou dinâmicos de acordo com a necessidade do desenvolvedor, dando mais flexibilidade ao componente.
+     * O po-select não permite que o usuário informe um valor diferente dos valores listados, isso garante a consistência da informação.
+     * O po-select não permite que sejam passados valores duplicados, undefined e null para as opções, excluindo-os da lista.
+     *
+     * > Ao passar um valor para o _model_ que não está na lista de opções, o mesmo será definido como `undefined`.
+     *
+     * Também existe a possibilidade de utilizar um _template_ para a exibição dos itens da lista,
+     * veja mais em **[p-select-option-template](/documentation/po-select-option-template)**.
      */
     var PoSelectComponent = /** @class */ (function (_super) {
         __extends(PoSelectComponent, _super);
+        /* istanbul ignore next */
         function PoSelectComponent(element, changeDetector, differs, renderer, controlPosition) {
-            var _this = _super.call(this, element, changeDetector) || this;
+            var _this = _super.call(this) || this;
+            _this.element = element;
+            _this.changeDetector = changeDetector;
             _this.renderer = renderer;
             _this.controlPosition = controlPosition;
+            /**
+             * @optional
+             *
+             * @description
+             *
+             * Função para atualizar o ngModel do componente, necessário quando não for utilizado dentro da tag form.
+             */
+            _this.ngModelChange = new i0.EventEmitter();
+            /**
+             * @optional
+             *
+             * @description
+             *
+             * Indica que o campo será somente para leitura.
+             *
+             * @default `false`
+             */
+            _this.readonly = false;
             _this.isMobile = isMobile();
             _this.open = false;
             _this.selectIcon = 'po-icon-arrow-down';
@@ -24721,6 +24774,35 @@
             _this.differ = differs.find([]).create(null);
             return _this;
         }
+        Object.defineProperty(PoSelectComponent.prototype, "options", {
+            get: function () {
+                return this._options;
+            },
+            /**
+             * Nesta propriedade deve ser definido uma coleção de objetos que implementam a interface `PoSelectOption`.
+             *
+             * Caso esta lista estiver vazia, o model será `undefined`.
+             *
+             * > Essa propriedade é imutável, ou seja, sempre que quiser atualizar a lista de opções disponíveis
+             * atualize a referência do objeto:
+             *
+             * ```
+             * // atualiza a referência do objeto garantindo a atualização do template
+             * this.options = [...this.options, { value: 'x', label: 'Nova opção' }];
+             *
+             * // 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' });
+             * ```
+             */
+            set: function (options) {
+                this._options = options;
+                removeDuplicatedOptions(this._options);
+                removeUndefinedAndNullOptions(this._options);
+                this.onUpdateOptions();
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(PoSelectComponent.prototype, "isInvisibleSelectNative", {
             get: function () {
                 return this.readonly && this.isMobile;
@@ -24795,21 +24877,12 @@
             this.selectElement.nativeElement.focus();
             this.removeListeners();
         };
-        PoSelectComponent.prototype.isEqual = function (value, inputValue) {
-            if ((value || value === 0) && inputValue) {
-                return value.toString() === inputValue.toString();
-            }
-            if ((value === null && inputValue !== null) || (value === undefined && inputValue !== undefined)) {
-                value = "" + value; // Transformando em string
-            }
-            return value === inputValue;
-        };
         PoSelectComponent.prototype.onBlur = function () {
             var _a;
             (_a = this.onModelTouched) === null || _a === void 0 ? void 0 : _a.call(this);
         };
         PoSelectComponent.prototype.onOptionClick = function (option) {
-            this.updateModel(option);
+            this.updateValues(option);
             this.toggleButton();
         };
         // Altera o valor ao selecionar um item.
@@ -24817,7 +24890,7 @@
             if (value && this.options && this.options.length) {
                 var optionFound = this.findOptionValue(value);
                 if (optionFound) {
-                    this.updateModel(optionFound);
+                    this.updateValues(optionFound);
                     this.setScrollPosition(optionFound.value);
                 }
             }
@@ -24838,13 +24911,13 @@
             this.open ? this.hideDropDown() : this.showDropdown();
         };
         // Atualiza valores
-        PoSelectComponent.prototype.updateModel = function (option) {
+        PoSelectComponent.prototype.updateValues = function (option) {
             if (this.selectedValue !== option.value) {
                 this.selectedValue = option.value;
                 this.selectElement.nativeElement.value = option.value;
-                this.callModelChange(option.value);
+                this.updateModel(option.value);
                 this.displayValue = option.label;
-                this.onChange(option.value);
+                this.emitChange(option.value);
             }
         };
         // Esconde Content do Select quando for clicado fora
@@ -24855,7 +24928,7 @@
             }
         };
         // Recebe as alterações do model
-        PoSelectComponent.prototype.writeValue = function (value) {
+        PoSelectComponent.prototype.onWriteValue = function (value) {
             var optionFound = this.findOptionValue(value);
             if (optionFound) {
                 this.selectElement.nativeElement.value = optionFound.value;
@@ -24865,13 +24938,25 @@
             }
             else if (validValue(this.selectedValue)) {
                 this.selectElement.nativeElement.value = undefined;
-                this.callModelChange(undefined);
+                this.updateModel(undefined);
                 this.selectedValue = undefined;
                 this.displayValue = undefined;
             }
             this.modelValue = value;
             this.changeDetector.detectChanges();
         };
+        PoSelectComponent.prototype.extraValidation = function (c) {
+            return null;
+        };
+        PoSelectComponent.prototype.isEqual = function (value, inputValue) {
+            if ((value || value === 0) && inputValue) {
+                return value.toString() === inputValue.toString();
+            }
+            if ((value === null && inputValue !== null) || (value === undefined && inputValue !== undefined)) {
+                value = "" + value; // Transformando em string
+            }
+            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.
         PoSelectComponent.prototype.disableDefaultEventAndToggleButton = function () {
@@ -24936,7 +25021,7 @@
             }
         };
         return PoSelectComponent;
-    }(PoSelectBaseComponent));
+    }(PoFieldValidateModel));
     PoSelectComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-select',
@@ -24970,81 +25055,15 @@
         iconElement: [{ type: i0.ViewChild, args: ['icon', { read: i0.ElementRef, static: true },] }],
         selectElement: [{ type: i0.ViewChild, args: ['select', { read: i0.ElementRef, static: true },] }],
         selectButtonElement: [{ type: i0.ViewChild, args: ['selectButton', { read: i0.ElementRef, static: true },] }],
+        ngModelChange: [{ type: i0.Output, args: ['ngModelChange',] }],
+        readonly: [{ type: i0.Input, args: ['p-readonly',] }],
+        placeholder: [{ type: i0.Input, args: ['p-placeholder',] }],
+        options: [{ type: i0.Input, args: ['p-options',] }],
         onKeydown: [{ type: i0.HostListener, args: ['keydown', ['$event'],] }]
     };
-
-    var PoFieldModel = /** @class */ (function () {
-        function PoFieldModel() {
-            /**
-             * @optional
-             *
-             * @description
-             *
-             * Aplica o 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.
-             *
-             * @default `false`
-             */
-            this.autoFocus = false;
-            /**
-             * @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 i0.EventEmitter();
-        }
-        // Função implementada do ControlValueAccessor
-        // Usada para interceptar os estados de habilitado via forms api
-        PoFieldModel.prototype.setDisabledState = function (isDisabled) {
-            this.disabled = isDisabled;
-        };
-        PoFieldModel.prototype.registerOnChange = function (fn) {
-            this.propagateChange = fn;
-        };
-        PoFieldModel.prototype.registerOnTouched = function (fn) {
-            this.onTouched = fn;
-        };
-        PoFieldModel.prototype.writeValue = function (value) {
-            this.onWriteValue(value);
-        };
-        PoFieldModel.prototype.updateModel = function (value) {
-            if (this.propagateChange) {
-                this.propagateChange(value);
-            }
-        };
-        return PoFieldModel;
-    }());
-    PoFieldModel.decorators = [
-        { type: i0.Directive }
-    ];
-    PoFieldModel.ctorParameters = function () { return []; };
-    PoFieldModel.propDecorators = {
-        label: [{ type: i0.Input, args: ['p-label',] }],
-        name: [{ type: i0.Input, args: ['name',] }],
-        help: [{ type: i0.Input, args: ['p-help',] }],
-        autoFocus: [{ type: i0.Input, args: ['p-auto-focus',] }],
-        disabled: [{ type: i0.Input, args: ['p-disabled',] }],
-        change: [{ type: i0.Output, args: ['p-change',] }]
-    };
-    __decorate([
-        InputBoolean()
-    ], PoFieldModel.prototype, "autoFocus", void 0);
     __decorate([
         InputBoolean()
-    ], PoFieldModel.prototype, "disabled", void 0);
+    ], PoSelectComponent.prototype, "readonly", void 0);
 
     /**
      * @usedBy PoSwitchComponent
@@ -25221,7 +25240,7 @@
             if (this.value !== value) {
                 this.value = value;
                 this.updateModel(value);
-                this.change.emit(this.value);
+                this.emitChange(this.value);
             }
         };
         PoSwitchComponent.prototype.eventClick = function () {
@@ -25280,7 +25299,8 @@
      * ```
      */
     var PoTextareaBaseComponent = /** @class */ (function () {
-        function PoTextareaBaseComponent() {
+        function PoTextareaBaseComponent(cd) {
+            this.cd = cd;
             /**
              * @optional
              *
@@ -25477,6 +25497,7 @@
         // Usada para interceptar os estados de habilitado via forms api
         PoTextareaBaseComponent.prototype.setDisabledState = function (isDisabled) {
             this.disabled = isDisabled;
+            this.cd.markForCheck();
         };
         // Funções `registerOnChange`, `registerOnTouched` e `registerOnValidatorChange` implementadas referentes ao ControlValueAccessor
         // usadas para interceptar as mudanças e não atualizar automaticamente o Model
@@ -25515,6 +25536,7 @@
         // Função implementada do ControlValueAccessor
         PoTextareaBaseComponent.prototype.writeValue = function (value) {
             this.writeValueModel(value);
+            this.cd.markForCheck();
         };
         PoTextareaBaseComponent.prototype.validateModel = function () {
             if (this.validatorChange) {
@@ -25526,6 +25548,9 @@
     PoTextareaBaseComponent.decorators = [
         { type: i0.Directive }
     ];
+    PoTextareaBaseComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
     PoTextareaBaseComponent.propDecorators = {
         autoFocus: [{ type: i0.Input, args: ['p-auto-focus',] }],
         label: [{ type: i0.Input, args: ['p-label',] }],
@@ -25576,8 +25601,8 @@
      */
     var PoTextareaComponent = /** @class */ (function (_super) {
         __extends(PoTextareaComponent, _super);
-        function PoTextareaComponent() {
-            var _this = _super.call(this) || this;
+        function PoTextareaComponent(cd) {
+            var _this = _super.call(this, cd) || this;
             _this.fireChange = false;
             return _this;
         }
@@ -25656,6 +25681,7 @@
         { type: i0.Component, args: [{
                     selector: 'po-textarea',
                     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",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -25670,7 +25696,9 @@
                     ]
                 },] }
     ];
-    PoTextareaComponent.ctorParameters = function () { return []; };
+    PoTextareaComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
     PoTextareaComponent.propDecorators = {
         inputEl: [{ type: i0.ViewChild, args: ['inp', { read: i0.ElementRef, static: true },] }]
     };
@@ -28337,7 +28365,7 @@
         };
         PoDynamicFormFieldsBaseComponent.prototype.isMultiselect = function (field) {
             var optionsService = field.optionsService, optionsMulti = field.optionsMulti, options = field.options;
-            return !optionsService && optionsMulti && !!options && options.length > 3;
+            return optionsMulti && (!!optionsService || (!!options && options.length > 3));
         };
         PoDynamicFormFieldsBaseComponent.prototype.isNumberType = function (field, type) {
             var mask = field.mask, pattern = field.pattern;
@@ -28515,7 +28543,7 @@
     PoDynamicFormFieldsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-dynamic-form-fields',
-                    template: "<div class=\"po-row\" *ngIf=\"visibleFields && visibleFields.length > 0\">\n  <ng-container *ngFor=\"let field of visibleFields; trackBy: trackBy\">\n    <po-divider *ngIf=\"field?.divider?.trim()\" class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\n\n    <po-datepicker\n      #component\n      *ngIf=\"compareTo(field.control, 'datepicker')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-format]=\"field.format\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-max-date]=\"field.maxValue\"\n      [p-min-date]=\"field.minValue\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-datepicker>\n\n    <po-datepicker-range\n      #component\n      *ngIf=\"compareTo(field.control, 'datepickerrange')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-datepicker-range>\n\n    <po-input\n      #component\n      *ngIf=\"compareTo(field.control, 'input')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-mask-format-model]=\"field.maskFormatModel\"\n      [p-mask]=\"field.mask\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-input>\n\n    <po-number\n      #component\n      *ngIf=\"compareTo(field.control, 'number')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-min]=\"field.minValue\"\n      [p-max]=\"field.maxValue\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-number>\n\n    <po-decimal\n      #component\n      *ngIf=\"compareTo(field.control, 'decimal')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-decimals-length]=\"field.decimalsLength\"\n      [p-thousand-maxlength]=\"field.thousandMaxlength\"\n      [p-icon]=\"field.icon\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-decimal>\n\n    <po-select\n      #component\n      *ngIf=\"compareTo(field.control, 'select')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-select>\n\n    <po-radio-group\n      #component\n      *ngIf=\"compareTo(field.control, 'radioGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-columns=\"3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-radio-group>\n\n    <po-switch\n      #component\n      *ngIf=\"compareTo(field.control, 'switch')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-label-off]=\"field.booleanFalse\"\n      [p-label-on]=\"field.booleanTrue\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-switch>\n\n    <po-combo\n      #component\n      *ngIf=\"compareTo(field.control, 'combo')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-emit-object-value\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.optionsService\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field, $event)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-combo>\n\n    <po-lookup\n      #component\n      *ngIf=\"compareTo(field.control, 'lookup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      p-field-label=\"label\"\n      p-field-value=\"value\"\n      [ngClass]=\"field.componentClass\"\n      [p-columns]=\"field.columns\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel || 'label'\"\n      [p-field-value]=\"field.fieldValue || 'value'\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.searchService\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-field-format]=\"field.format\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-lookup>\n\n    <po-checkbox-group\n      #component\n      *ngIf=\"compareTo(field.control, 'checkboxGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-columns=\"3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-checkbox-group>\n\n    <po-multiselect\n      #component\n      *ngIf=\"compareTo(field.control, 'multiselect')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-multiselect>\n\n    <po-textarea\n      #component\n      *ngIf=\"compareTo(field.control, 'textarea')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      [p-rows]=\"field.rows\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-textarea>\n\n    <po-password\n      #component\n      *ngIf=\"compareTo(field.control, 'password')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-password>\n  </ng-container>\n</div>\n",
+                    template: "<div class=\"po-row\" *ngIf=\"visibleFields && visibleFields.length > 0\">\n  <ng-container *ngFor=\"let field of visibleFields; trackBy: trackBy\">\n    <po-divider *ngIf=\"field?.divider?.trim()\" class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\n\n    <po-datepicker\n      #component\n      *ngIf=\"compareTo(field.control, 'datepicker')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-format]=\"field.format\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-max-date]=\"field.maxValue\"\n      [p-min-date]=\"field.minValue\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-datepicker>\n\n    <po-datepicker-range\n      #component\n      *ngIf=\"compareTo(field.control, 'datepickerrange')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-datepicker-range>\n\n    <po-input\n      #component\n      *ngIf=\"compareTo(field.control, 'input')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-mask-format-model]=\"field.maskFormatModel\"\n      [p-mask]=\"field.mask\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-input>\n\n    <po-number\n      #component\n      *ngIf=\"compareTo(field.control, 'number')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-min]=\"field.minValue\"\n      [p-max]=\"field.maxValue\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-number>\n\n    <po-decimal\n      #component\n      *ngIf=\"compareTo(field.control, 'decimal')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-decimals-length]=\"field.decimalsLength\"\n      [p-thousand-maxlength]=\"field.thousandMaxlength\"\n      [p-icon]=\"field.icon\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-decimal>\n\n    <po-select\n      #component\n      *ngIf=\"compareTo(field.control, 'select')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-select>\n\n    <po-radio-group\n      #component\n      *ngIf=\"compareTo(field.control, 'radioGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-columns=\"3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-radio-group>\n\n    <po-switch\n      #component\n      *ngIf=\"compareTo(field.control, 'switch')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-label-off]=\"field.booleanFalse\"\n      [p-label-on]=\"field.booleanTrue\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-switch>\n\n    <po-combo\n      #component\n      *ngIf=\"compareTo(field.control, 'combo')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-emit-object-value\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.optionsService\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field, $event)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-combo>\n\n    <po-lookup\n      #component\n      *ngIf=\"compareTo(field.control, 'lookup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      p-field-label=\"label\"\n      p-field-value=\"value\"\n      [ngClass]=\"field.componentClass\"\n      [p-columns]=\"field.columns\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel || 'label'\"\n      [p-field-value]=\"field.fieldValue || 'value'\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.searchService\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-field-format]=\"field.format\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-lookup>\n\n    <po-checkbox-group\n      #component\n      *ngIf=\"compareTo(field.control, 'checkboxGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-columns=\"3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-checkbox-group>\n\n    <po-multiselect\n      #component\n      *ngIf=\"compareTo(field.control, 'multiselect')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-service]=\"field.optionsService\"\n    >\n    </po-multiselect>\n\n    <po-textarea\n      #component\n      *ngIf=\"compareTo(field.control, 'textarea')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      [p-rows]=\"field.rows\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-textarea>\n\n    <po-password\n      #component\n      *ngIf=\"compareTo(field.control, 'password')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-clean\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-required]=\"field.required\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-password>\n  </ng-container>\n</div>\n",
                     viewProviders: [{ provide: forms.ControlContainer, useExisting: forms.NgForm }],
                     providers: [PoDynamicFormValidationService]
                 },] }
@@ -39073,6 +39101,7 @@
     exports.PoMenuPanelComponent = PoMenuPanelComponent;
     exports.PoMenuPanelModule = PoMenuPanelModule;
     exports.PoModalComponent = PoModalComponent;
+    exports.PoModalFooterComponent = PoModalFooterComponent;
     exports.PoModalModule = PoModalModule;
     exports.PoModule = PoModule;
     exports.PoMultiselectComponent = PoMultiselectComponent;
@@ -39223,7 +39252,7 @@
     exports.ɵdy = PoRichTextService;
     exports.ɵdz = PoRichTextBodyComponent;
     exports.ɵe = PoAvatarBaseComponent;
-    exports.ɵea = PoSelectBaseComponent;
+    exports.ɵea = PoFieldValidateModel;
     exports.ɵeb = PoFieldModel;
     exports.ɵec = PoTextareaBaseComponent;
     exports.ɵed = PoUploadBaseComponent;