@po-ui/ng-components 5.13.0 → 5.16.0

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

@@ -3842,7 +3842,7 @@
         PoCalendarBaseComponent.prototype.setActivateDate = function (date) {
             var activateDate = date ? date : this.verifyActivateDate();
             if (this.isRange) {
-                var checkedStart = new Date(activateDate);
+                var checkedStart = typeof activateDate === 'string' ? this.poDate.convertIsoToDate(activateDate) : new Date(activateDate);
                 var checkedEnd = new Date(new Date(checkedStart).setMonth(checkedStart.getMonth() + 1));
                 this.activateDate = { start: checkedStart, end: checkedEnd };
             }
@@ -10962,6 +10962,7 @@
             else if (this.inputEl) {
                 this.inputEl.nativeElement.value = '';
                 this.date = undefined;
+                this.callOnChange(this.date, false);
             }
             this.valueBeforeChange = this.formatToDate(this.date);
         };
@@ -16966,19 +16967,23 @@
     var poDatepickerRangeLiteralsDefault = {
         en: {
             invalidFormat: 'Date in invalid format',
-            startDateGreaterThanEndDate: 'Start date greater than end date'
+            startDateGreaterThanEndDate: 'Start date greater than end date',
+            invalidDate: 'Invalid date'
         },
         es: {
             invalidFormat: 'Fecha en formato no válido',
-            startDateGreaterThanEndDate: 'Fecha de inicio mayor que fecha final'
+            startDateGreaterThanEndDate: 'Fecha de inicio mayor que fecha final',
+            invalidDate: 'Fecha invalida'
         },
         pt: {
             invalidFormat: 'Data no formato inválido',
-            startDateGreaterThanEndDate: 'Data inicial maior que data final'
+            startDateGreaterThanEndDate: 'Data inicial maior que data final',
+            invalidDate: 'Data inválida'
         },
         ru: {
             invalidFormat: 'Дата в неверном формате',
-            startDateGreaterThanEndDate: 'Дата начала больше даты окончания'
+            startDateGreaterThanEndDate: 'Дата начала больше даты окончания',
+            invalidDate: 'Недействительная дата'
         }
     };
 
@@ -17282,6 +17287,14 @@
                     }
                 };
             }
+            if (!this.verifyValidDate(startDate, endDate)) {
+                this.errorMessage = this.literals.invalidDate;
+                return {
+                    date: {
+                        valid: false
+                    }
+                };
+            }
             if (this.dateRangeObjectFailed(control.value) || this.dateRangeFormatFailed(startDate, endDate)) {
                 this.errorMessage = this.literals.invalidFormat;
                 return {
@@ -17337,6 +17350,17 @@
                 this.validatorChange(model);
             }
         };
+        PoDatepickerRangeBaseComponent.prototype.verifyValidDate = function (startDate, endDate) {
+            if (startDate !== '' && endDate !== '') {
+                return this.dateIsValid(startDate) && this.dateIsValid(endDate);
+            }
+            else if (startDate !== '') {
+                return this.dateIsValid(startDate);
+            }
+            else {
+                return this.dateIsValid(endDate);
+            }
+        };
         PoDatepickerRangeBaseComponent.prototype.convertPatternDateFormat = function (value) {
             if (value instanceof Date) {
                 return this.poDateService.convertDateToISO(value);
@@ -17360,6 +17384,29 @@
                 requiredFailed(this.required, this.disabled, startDate) &&
                 requiredFailed(this.required, this.disabled, endDate));
         };
+        PoDatepickerRangeBaseComponent.prototype.dateIsValid = function (date) {
+            var _a = __read(date.split('-'), 3), strYear = _a[0], strMonth = _a[1], strDay = _a[2];
+            var year = Number(strYear);
+            var month = Number(strMonth);
+            var day = Number(strDay);
+            //verificação dos meses com 31 dias
+            if (month === 1 || month === 3 || month === 5 || month === 7 || month === 8 || month === 10 || month === 12) {
+                return day < 1 || day > 31 ? false : true;
+            }
+            else if (month === 4 || month === 6 || month === 9 || month === 11) {
+                //verificação dos meses com 30 dias
+                return day < 1 || day > 30 ? false : true;
+            }
+            else {
+                //verificacao de ano bissexto para verificar até qual dia irá o mês de fevereiro
+                if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
+                    return day < 1 || day > 29 ? false : true;
+                }
+                else {
+                    return day < 1 || day > 28 ? false : true;
+                }
+            }
+        };
         return PoDatepickerRangeBaseComponent;
     }());
     PoDatepickerRangeBaseComponent.decorators = [
@@ -17677,7 +17724,7 @@
         PoDatepickerRangeComponent.prototype.getDateRangeFormatValidation = function (startDate, endDate, isStartDateTargetEvent) {
             this.setDateRangeInputValidation(startDate, endDate);
             return {
-                isValid: this.isDateRangeInputFormatValid && this.isStartDateRangeInputValid,
+                isValid: this.isDateRangeInputFormatValid && this.isStartDateRangeInputValid && this.verifyValidDate(startDate, endDate),
                 dateRangeModel: this.getValidatedModel(startDate, endDate, isStartDateTargetEvent)
             };
         };
@@ -17878,7 +17925,8 @@
      *
      */
     var PoInputBaseComponent = /** @class */ (function () {
-        function PoInputBaseComponent() {
+        function PoInputBaseComponent(cd) {
+            this.cd = cd;
             /**
              * @optional
              *
@@ -18146,7 +18194,9 @@
         // Função implementada do ControlValueAccessor
         // Usada para interceptar os estados de habilitado via forms api
         PoInputBaseComponent.prototype.setDisabledState = function (isDisabled) {
+            var _a;
             this.disabled = isDisabled;
+            (_a = this.cd) === null || _a === void 0 ? void 0 : _a.markForCheck();
         };
         // Função implementada do ControlValueAccessor
         // Usada para interceptar as mudanças e não atualizar automaticamente o Model
@@ -18201,7 +18251,9 @@
         };
         // Função implementada do ControlValueAccessor
         PoInputBaseComponent.prototype.writeValue = function (value) {
+            var _a;
             this.writeValueModel(value);
+            (_a = this.cd) === null || _a === void 0 ? void 0 : _a.markForCheck();
         };
         PoInputBaseComponent.prototype.validateModel = function () {
             if (this.validatorChange) {
@@ -18223,6 +18275,9 @@
     PoInputBaseComponent.decorators = [
         { type: i0.Directive }
     ];
+    PoInputBaseComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
     PoInputBaseComponent.propDecorators = {
         autoFocus: [{ type: i0.Input, args: ['p-auto-focus',] }],
         icon: [{ type: i0.Input, args: ['p-icon',] }],
@@ -18879,8 +18934,8 @@
     /* eslint-disable @angular-eslint/directive-class-suffix */
     var PoInputGeneric = /** @class */ (function (_super) {
         __extends(PoInputGeneric, _super);
-        function PoInputGeneric(el) {
-            var _this = _super.call(this) || this;
+        function PoInputGeneric(el, cd) {
+            var _this = _super.call(this, cd) || this;
             _this.type = 'text';
             _this.el = el;
             return _this;
@@ -19061,7 +19116,8 @@
         { type: i0.Directive }
     ];
     PoInputGeneric.ctorParameters = function () { return [
-        { type: i0.ElementRef }
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef }
     ]; };
     PoInputGeneric.propDecorators = {
         inputEl: [{ type: i0.ViewChild, args: ['inp', { read: i0.ElementRef, static: true },] }],
@@ -19320,6 +19376,8 @@
              * @default `false`
              */
             this.infiniteScroll = false;
+            /** Exibe um ícone que permite limpar o campo. */
+            this.clean = false;
             /**
              * Evento será disparado quando ocorrer algum erro na requisição de busca do item.
              * Será passado por parâmetro o objeto de erro retornado.
@@ -19495,6 +19553,10 @@
         PoLookupBaseComponent.prototype.ngAfterViewInit = function () {
             this.setControl();
         };
+        PoLookupBaseComponent.prototype.cleanModel = function () {
+            this.cleanViewValue();
+            this.callOnChange(undefined);
+        };
         // Função implementada do ControlValueAccessor
         // Usada para interceptar os estados de habilitado via forms api
         PoLookupBaseComponent.prototype.setDisabledState = function (isDisabled) {
@@ -19595,10 +19657,6 @@
                 this.cleanViewValue();
             }
         };
-        PoLookupBaseComponent.prototype.cleanModel = function () {
-            this.cleanViewValue();
-            this.callOnChange(undefined);
-        };
         PoLookupBaseComponent.prototype.cleanViewValue = function () {
             this.setViewValue('', {});
             this.oldValue = '';
@@ -19668,6 +19726,7 @@
         optional: [{ type: i0.Input, args: ['p-optional',] }],
         advancedFilters: [{ type: i0.Input, args: ['p-advanced-filters',] }],
         infiniteScroll: [{ type: i0.Input, args: ['p-infinite-scroll',] }],
+        clean: [{ type: i0.Input, args: ['p-clean',] }],
         onError: [{ type: i0.Output, args: ['p-error',] }],
         selected: [{ type: i0.Output, args: ['p-selected',] }],
         change: [{ type: i0.Output, args: ['p-change',] }],
@@ -19682,6 +19741,9 @@
     __decorate([
         InputBoolean()
     ], PoLookupBaseComponent.prototype, "infiniteScroll", void 0);
+    __decorate([
+        InputBoolean()
+    ], PoLookupBaseComponent.prototype, "clean", void 0);
 
     /**
      *
@@ -20746,7 +20808,7 @@
     PoLookupComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-lookup',
-                    template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <input\n      #inp\n      class=\"po-input po-input-icon-right\"\n      type=\"text\"\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      <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\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n",
+                    template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <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\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n",
                     providers: providers$2
                 },] }
     ];
@@ -20778,6 +20840,8 @@
             this.options = [];
             /** Propriedade que recebe a lista de opções que deverão ser criadas no dropdown. */
             this.visibleOptions = [];
+            /** Propriedade que indica se o campo "Selecionar todos" deverá ser escondido. */
+            this.hideSelectAll = false;
             /** Evento disparado a cada tecla digitada na pesquisa. */
             this.changeSearch = new i0.EventEmitter();
             /** Evento disparado a cada alteração na lista das opções selecionadas. */
@@ -20816,6 +20880,19 @@
                 this.searchElement.setFocus();
             }
         };
+        PoMultiselectDropdownComponent.prototype.onClickSelectAll = function () {
+            var selectedValues = this.selectedOptions.map(function (_b) {
+                var value = _b.value;
+                return value;
+            });
+            if (this.everyVisibleOptionsSelected(selectedValues)) {
+                this.selectedOptions = [];
+            }
+            else {
+                this.selectedOptions = this.uniqueSelectedOptions(selectedValues);
+            }
+            this.change.emit(this.selectedOptions);
+        };
         PoMultiselectDropdownComponent.prototype.updateSelectedValues = function (checked, option) {
             if (checked) {
                 this.selectedOptions.push(option);
@@ -20825,6 +20902,27 @@
             }
             this.change.emit(this.selectedOptions);
         };
+        PoMultiselectDropdownComponent.prototype.everyVisibleOptionsSelected = function (selectedValues) {
+            return this.visibleOptions.every(function (visibleOption) { return selectedValues.includes(visibleOption.value); });
+        };
+        PoMultiselectDropdownComponent.prototype.someVisibleOptionsSelected = function (selectedValues) {
+            return this.visibleOptions.some(function (visibleOption) { return selectedValues.includes(visibleOption.value); });
+        };
+        PoMultiselectDropdownComponent.prototype.getStateSelectAll = function () {
+            var selectedValues = this.selectedOptions.map(function (_b) {
+                var value = _b.value;
+                return value;
+            });
+            if (this.everyVisibleOptionsSelected(selectedValues)) {
+                return true;
+            }
+            else if (this.someVisibleOptionsSelected(selectedValues)) {
+                return null;
+            }
+            else {
+                return false;
+            }
+        };
         PoMultiselectDropdownComponent.prototype.callChangeSearch = function (event) {
             this.changeSearch.emit(event);
         };
@@ -20838,12 +20936,32 @@
                 }
             });
         };
+        PoMultiselectDropdownComponent.prototype.uniqueSelectedOptions = function (selectedValues) {
+            var e_1, _b;
+            var newSelectedOptions = __spreadArray([], __read(this.selectedOptions));
+            try {
+                for (var _c = __values(this.visibleOptions), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var visibleOption = _d.value;
+                    if (!selectedValues.includes(visibleOption.value)) {
+                        newSelectedOptions.push(visibleOption);
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return newSelectedOptions;
+        };
         return PoMultiselectDropdownComponent;
     }());
     PoMultiselectDropdownComponent.decorators = [
         { type: i0.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        *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"
+                    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"
                 },] }
     ];
     PoMultiselectDropdownComponent.propDecorators = {
@@ -20854,6 +20972,7 @@
         selectedOptions: [{ type: i0.Input, args: ['p-selected-options',] }],
         options: [{ type: i0.Input, args: ['p-options',] }],
         visibleOptions: [{ type: i0.Input, args: ['p-visible-options',] }],
+        hideSelectAll: [{ type: i0.Input, args: ['p-hide-select-all',] }],
         changeSearch: [{ type: i0.Output, args: ['p-change-search',] }],
         change: [{ type: i0.Output, args: ['p-change',] }],
         closeDropdown: [{ type: i0.Output, args: ['p-close-dropdown',] }],
@@ -20886,19 +21005,23 @@
     var poMultiselectLiteralsDefault = {
         en: {
             noData: 'No data found',
-            placeholderSearch: 'Search'
+            placeholderSearch: 'Search',
+            selectAll: 'Select all'
         },
         es: {
             noData: 'Datos no encontrados',
-            placeholderSearch: 'Busca'
+            placeholderSearch: 'Busca',
+            selectAll: 'Seleccionar todo'
         },
         pt: {
             noData: 'Nenhum dado encontrado',
-            placeholderSearch: 'Buscar'
+            placeholderSearch: 'Buscar',
+            selectAll: 'Selecionar todos'
         },
         ru: {
             noData: 'Данные не найдены',
-            placeholderSearch: 'искать'
+            placeholderSearch: 'искать',
+            selectAll: 'Выбрать все'
         }
     };
     /**
@@ -21363,6 +21486,9 @@
                 });
                 this.visibleOptionsDropdown = newOptions_1;
             }
+            else {
+                this.visibleOptionsDropdown = __spreadArray([], __read(options));
+            }
         };
         PoMultiselectBaseComponent.prototype.compareMethod = function (search, option, filterMode) {
             switch (filterMode) {
@@ -21463,6 +21589,7 @@
         placeholder: [{ type: i0.Input, args: ['p-placeholder',] }],
         placeholderSearch: [{ type: i0.Input, args: ['p-placeholder-search',] }],
         name: [{ type: i0.Input, args: ['name',] }],
+        hideSelectAll: [{ type: i0.Input, args: ['p-hide-select-all',] }],
         change: [{ type: i0.Output, args: ['p-change',] }],
         filterService: [{ type: i0.Input, args: ['p-filter-service',] }],
         autoHeight: [{ type: i0.Input, args: ['p-auto-height',] }],
@@ -21480,6 +21607,9 @@
     __decorate([
         InputBoolean()
     ], PoMultiselectBaseComponent.prototype, "autoFocus", void 0);
+    __decorate([
+        InputBoolean()
+    ], PoMultiselectBaseComponent.prototype, "hideSelectAll", void 0);
     __decorate([
         InputBoolean()
     ], PoMultiselectBaseComponent.prototype, "autoHeight", null);
@@ -21879,7 +22009,7 @@
     PoMultiselectComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-multiselect',
-                    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-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",
+                    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",
                     providers: providers$1
                 },] }
     ];
@@ -21907,7 +22037,7 @@
      */
     var PoMultiselectItemComponent = /** @class */ (function () {
         function PoMultiselectItemComponent() {
-            /** Esta propriedade indica se o campo está selecionado ou não. */
+            /** Esta propriedade indica se o campo está selecionado, indenterminate ou não. */
             this.selected = false;
             /** Evento que será disparado toda vez que o usuário marcar ou desmarcar um item. */
             this.change = new i0.EventEmitter();
@@ -21921,7 +22051,7 @@
     PoMultiselectItemComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-multiselect-item',
-                    template: "<li [class.po-multiselect-item-selected]=\"selected\" (click)=\"itemClicked()\">\n  <a class=\"po-multiselect-item\">\n    <input\n      [checked]=\"selected\"\n      class=\"po-multiselect-checkbox-input\"\n      [class.po-multiselect-checkbox-input-checked]=\"selected\"\n      type=\"checkbox\"\n    />\n\n    <label class=\"po-multiselect-checkbox-label po-clickable\">\n      {{ label }}\n    </label>\n  </a>\n</li>\n",
+                    template: "<li [class.po-multiselect-item-selected]=\"selected\" (click)=\"itemClicked()\">\n  <a class=\"po-multiselect-item\">\n    <input\n      [checked]=\"selected\"\n      class=\"po-multiselect-checkbox-input\"\n      [class.po-multiselect-checkbox-input-indeterminate]=\"selected === null\"\n      [class.po-multiselect-checkbox-input-checked]=\"selected\"\n      type=\"checkbox\"\n    />\n\n    <label class=\"po-multiselect-checkbox-label po-clickable\">\n      {{ label }}\n    </label>\n  </a>\n</li>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
@@ -21964,6 +22094,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(PoMultiselectSearchComponent.prototype, "inputValue", {
+            get: function () {
+                return this.inputElement.nativeElement.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         PoMultiselectSearchComponent.prototype.onChange = function (event) {
             this.change.emit({ event: event, value: this.inputElement.nativeElement.value });
         };
@@ -23192,8 +23329,8 @@
     var PoInputComponent = /** @class */ (function (_super) {
         __extends(PoInputComponent, _super);
         /* istanbul ignore next */
-        function PoInputComponent(el) {
-            return _super.call(this, el) || this;
+        function PoInputComponent(el, cd) {
+            return _super.call(this, el, cd) || this;
         }
         PoInputComponent.prototype.extraValidation = function (c) {
             return null;
@@ -23215,11 +23352,13 @@
                             useExisting: i0.forwardRef(function () { return PoInputComponent; }),
                             multi: true
                         }
-                    ]
+                    ],
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     PoInputComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef }
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef }
     ]; };
 
     var PoNumberBaseComponent = /** @class */ (function (_super) {
@@ -24426,37 +24565,8 @@
         onKeydown: [{ type: i0.HostListener, args: ['keydown', ['$event'],] }]
     };
 
-    /**
-     * @usedBy PoSwitchComponent
-     *
-     * @description
-     *
-     * Enum para posicionar o label do valor do po-switch.
-     */
-    exports.PoSwitchLabelPosition = void 0;
-    (function (PoSwitchLabelPosition) {
-        /** Posiciona o label do lado esquerdo do switch. */
-        PoSwitchLabelPosition[PoSwitchLabelPosition["Right"] = 0] = "Right";
-        /** Posiciona o label do lado direito do switch. */
-        PoSwitchLabelPosition[PoSwitchLabelPosition["Left"] = 1] = "Left";
-    })(exports.PoSwitchLabelPosition || (exports.PoSwitchLabelPosition = {}));
-
-    /**
-     * @description
-     *
-     * O componente `po-switch` é um [checkbox](/documentation/po-checkbox-group) mais intuitivo, pois faz analogia a um interruptor.
-     * Deve ser usado quando deseja-se transmitir a ideia de ligar / desligar uma funcionalidade específica.
-     *
-     * Pode-se ligar ou deligar o botão utilizando a tecla de espaço ou o clique do mouse.
-     *
-     * O texto exibido pode ser alterado de acordo com o valor setado aumentando as possibilidades de uso do componente,
-     * portanto, recomenda-se informar textos que contextualizem seu uso para que facilite a compreensão do usuário.
-     *
-     * > O componente não altera o valor incial informado no *model*, portanto indica-se inicializa-lo caso ter necessidade.
-     */
-    var PoSwitchBaseComponent = /** @class */ (function () {
-        function PoSwitchBaseComponent(changeDetector) {
-            this.changeDetector = changeDetector;
+    var PoFieldModel = /** @class */ (function () {
+        function PoFieldModel() {
             /**
              * @optional
              *
@@ -24474,145 +24584,89 @@
              *
              * @description
              *
-             * Evento disparado ao alterar valor do campo.
-             */
-            this.change = new i0.EventEmitter();
-            /**
-             * @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();
-            this.switchValue = false;
-            this._disabled = false;
-            /**
-             * Texto exibido quando o valor do componente for `true`.
-             *
-             * @default `true`
-             */
-            // eslint-disable-next-line @typescript-eslint/member-ordering
-            this.labelOn = 'true';
-            /**
-             * Texto exibido quando o valor do componente for `false`.
+             * Indica se o campo será desabilitado.
              *
              * @default `false`
              */
-            // eslint-disable-next-line @typescript-eslint/member-ordering
-            this.labelOff = 'false';
+            this.disabled = false;
             /**
              * @optional
              *
              * @description
              *
-             * Posição de exibição do rótulo.
-             *
-             * > Por padrão exibe à direita.
+             * Evento disparado ao alterar valor do campo.
              */
-            // eslint-disable-next-line @typescript-eslint/member-ordering
-            this.labelPosition = exports.PoSwitchLabelPosition.Right;
+            this.change = new i0.EventEmitter();
         }
-        Object.defineProperty(PoSwitchBaseComponent.prototype, "setLabelOn", {
-            set: function (label) {
-                this.labelOn = label || 'true';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PoSwitchBaseComponent.prototype, "setLabelOff", {
-            set: function (label) {
-                this.labelOff = label || 'false';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PoSwitchBaseComponent.prototype, "setLabelPosition", {
-            set: function (position) {
-                this.labelPosition = position in exports.PoSwitchLabelPosition ? parseInt(position, 10) : exports.PoSwitchLabelPosition.Right;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PoSwitchBaseComponent.prototype, "disabled", {
-            get: function () {
-                return this._disabled;
-            },
-            /**
-             * @optional
-             *
-             * @description
-             *
-             * Indica se o campo será desabilitado.
-             *
-             * @default `false`
-             */
-            set: function (disabled) {
-                this._disabled = convertToBoolean(disabled);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PoSwitchBaseComponent.prototype.changeValue = function (value) {
-            if (this.switchValue !== value) {
-                this.switchValue = value;
-                if (this.propagateChange) {
-                    this.propagateChange(value);
-                }
-                else {
-                    this.ngModelChange.emit(value);
-                }
-                this.change.emit(this.switchValue);
-            }
-        };
-        PoSwitchBaseComponent.prototype.eventClick = function () {
-            if (!this.disabled) {
-                this.changeValue(!this.switchValue);
-            }
-        };
         // Função implementada do ControlValueAccessor
         // Usada para interceptar os estados de habilitado via forms api
-        PoSwitchBaseComponent.prototype.setDisabledState = function (isDisabled) {
+        PoFieldModel.prototype.setDisabledState = function (isDisabled) {
             this.disabled = isDisabled;
         };
-        PoSwitchBaseComponent.prototype.registerOnChange = function (fn) {
+        PoFieldModel.prototype.registerOnChange = function (fn) {
             this.propagateChange = fn;
         };
-        PoSwitchBaseComponent.prototype.registerOnTouched = function (fn) {
+        PoFieldModel.prototype.registerOnTouched = function (fn) {
             this.onTouched = fn;
         };
-        PoSwitchBaseComponent.prototype.writeValue = function (value) {
-            if (value !== this.switchValue) {
-                this.switchValue = !!value;
-                this.changeDetector.markForCheck();
+        PoFieldModel.prototype.writeValue = function (value) {
+            this.onWriteValue(value);
+        };
+        PoFieldModel.prototype.updateModel = function (value) {
+            if (this.propagateChange) {
+                this.propagateChange(value);
             }
         };
-        return PoSwitchBaseComponent;
+        return PoFieldModel;
     }());
-    PoSwitchBaseComponent.decorators = [
+    PoFieldModel.decorators = [
         { type: i0.Directive }
     ];
-    PoSwitchBaseComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef }
-    ]; };
-    PoSwitchBaseComponent.propDecorators = {
-        name: [{ type: i0.Input, args: ['name',] }],
-        autoFocus: [{ type: i0.Input, args: ['p-auto-focus',] }],
+    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',] }],
-        change: [{ type: i0.Output, args: ['p-change',] }],
-        ngModelChange: [{ type: i0.Output, args: ['ngModelChange',] }],
-        setLabelOn: [{ type: i0.Input, args: ['p-label-on',] }],
-        setLabelOff: [{ type: i0.Input, args: ['p-label-off',] }],
-        setLabelPosition: [{ type: i0.Input, args: ['p-label-position',] }],
-        disabled: [{ type: i0.Input, args: ['p-disabled',] }]
+        autoFocus: [{ type: i0.Input, args: ['p-auto-focus',] }],
+        disabled: [{ type: i0.Input, args: ['p-disabled',] }],
+        change: [{ type: i0.Output, args: ['p-change',] }]
     };
     __decorate([
         InputBoolean()
-    ], PoSwitchBaseComponent.prototype, "autoFocus", void 0);
+    ], PoFieldModel.prototype, "autoFocus", void 0);
+    __decorate([
+        InputBoolean()
+    ], PoFieldModel.prototype, "disabled", void 0);
+
+    /**
+     * @usedBy PoSwitchComponent
+     *
+     * @description
+     *
+     * Enum para posicionar o label do valor do po-switch.
+     */
+    exports.PoSwitchLabelPosition = void 0;
+    (function (PoSwitchLabelPosition) {
+        /** Posiciona o label do lado esquerdo do switch. */
+        PoSwitchLabelPosition[PoSwitchLabelPosition["Right"] = 0] = "Right";
+        /** Posiciona o label do lado direito do switch. */
+        PoSwitchLabelPosition[PoSwitchLabelPosition["Left"] = 1] = "Left";
+    })(exports.PoSwitchLabelPosition || (exports.PoSwitchLabelPosition = {}));
 
     /**
-     * @docsExtends PoSwitchBaseComponent
+     * @docsExtends PoFieldModel
+     *
+     * @description
+     *
+     * O componente `po-switch` é um [checkbox](/documentation/po-checkbox-group) mais intuitivo, pois faz analogia a um interruptor.
+     * Deve ser usado quando deseja-se transmitir a ideia de ligar / desligar uma funcionalidade específica.
+     *
+     * Pode-se ligar ou deligar o botão utilizando a tecla de espaço ou o clique do mouse.
+     *
+     * O texto exibido pode ser alterado de acordo com o valor setado aumentando as possibilidades de uso do componente,
+     * portanto, recomenda-se informar textos que contextualizem seu uso para que facilite a compreensão do usuário.
+     *
+     * > O componente não altera o valor incial informado no *model*, portanto indica-se inicializa-lo caso ter necessidade.
      *
      * @example
      *
@@ -24641,8 +24695,63 @@
     var PoSwitchComponent = /** @class */ (function (_super) {
         __extends(PoSwitchComponent, _super);
         function PoSwitchComponent(changeDetector) {
-            return _super.call(this, changeDetector) || this;
+            var _this = _super.call(this) || this;
+            _this.changeDetector = changeDetector;
+            _this.value = false;
+            _this._labelOff = 'false';
+            _this._labelOn = 'true';
+            _this._labelPosition = exports.PoSwitchLabelPosition.Right;
+            return _this;
         }
+        Object.defineProperty(PoSwitchComponent.prototype, "labelPosition", {
+            get: function () {
+                return this._labelPosition;
+            },
+            /**
+             * @optional
+             *
+             * @description
+             *
+             * Posição de exibição do rótulo.
+             *
+             * > Por padrão exibe à direita.
+             */
+            set: function (position) {
+                this._labelPosition = position in exports.PoSwitchLabelPosition ? parseInt(position, 10) : exports.PoSwitchLabelPosition.Right;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PoSwitchComponent.prototype, "labelOff", {
+            get: function () {
+                return this._labelOff;
+            },
+            /**
+             * Texto exibido quando o valor do componente for `false`.
+             *
+             * @default `false`
+             */
+            set: function (label) {
+                this._labelOff = label || 'false';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PoSwitchComponent.prototype, "labelOn", {
+            get: function () {
+                return this._labelOn;
+            },
+            /**
+             * Texto exibido quando o valor do componente for `true`.
+             *
+             * @default `true`
+             */
+            set: function (label) {
+                this._labelOn = label || 'true';
+            },
+            enumerable: false,
+            configurable: true
+        });
         PoSwitchComponent.prototype.ngAfterViewInit = function () {
             if (this.autoFocus) {
                 this.focus();
@@ -24695,17 +24804,35 @@
             }
         };
         PoSwitchComponent.prototype.onKeyDown = function (event) {
-            if (event.which === 32 || event.keyCode === 32) {
+            if (event.which === PoKeyCodeEnum.space || event.keyCode === PoKeyCodeEnum.space) {
                 event.preventDefault();
                 this.eventClick();
             }
         };
+        PoSwitchComponent.prototype.changeValue = function (value) {
+            if (this.value !== value) {
+                this.value = value;
+                this.updateModel(value);
+                this.change.emit(this.value);
+            }
+        };
+        PoSwitchComponent.prototype.eventClick = function () {
+            if (!this.disabled) {
+                this.changeValue(!this.value);
+            }
+        };
+        PoSwitchComponent.prototype.onWriteValue = function (value) {
+            if (value !== this.value) {
+                this.value = !!value;
+                this.changeDetector.markForCheck();
+            }
+        };
         return PoSwitchComponent;
-    }(PoSwitchBaseComponent));
+    }(PoFieldModel));
     PoSwitchComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-switch',
-                    template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\">\n  <div class=\"po-field-container-content po-switch-content\" [attr.name]=\"name\">\n    <div\n      class=\"po-switch-container po-clickable\"\n      #switchContainer\n      [class.po-switch-container-disabled]=\"disabled\"\n      [class.po-switch-container-off]=\"switchValue === false && !disabled\"\n      [class.po-switch-container-on]=\"switchValue === true && !disabled\"\n      [class.po-switch-container-right]=\"getSwitchPosition() === 'right'\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (click)=\"eventClick()\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"onBlur()\"\n    >\n      <div\n        class=\"po-switch-button\"\n        [class.po-switch-button-on]=\"switchValue === true\"\n        [class.po-switch-button-off]=\"switchValue === false\"\n        [class.po-switch-button-disabled]=\"disabled\"\n      >\n        <span class=\"po-icon po-icon-{{ switchValue === true ? 'ok' : 'close' }}\"></span>\n      </div>\n    </div>\n\n    <span class=\"po-switch-label po-clickable po-switch-label-{{ getLabelPosition() }}\" (click)=\"eventClick()\">\n      {{ switchValue === true ? labelOn : labelOff }}\n    </span>\n  </div>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n",
+                    template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\">\n  <div class=\"po-field-container-content po-switch-content\" [attr.name]=\"name\">\n    <div\n      class=\"po-switch-container po-clickable\"\n      #switchContainer\n      [class.po-switch-container-disabled]=\"disabled\"\n      [class.po-switch-container-off]=\"value === false && !disabled\"\n      [class.po-switch-container-on]=\"value === true && !disabled\"\n      [class.po-switch-container-right]=\"getSwitchPosition() === 'right'\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (click)=\"eventClick()\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"onBlur()\"\n    >\n      <div\n        class=\"po-switch-button\"\n        [class.po-switch-button-on]=\"value === true\"\n        [class.po-switch-button-off]=\"value === false\"\n        [class.po-switch-button-disabled]=\"disabled\"\n      >\n        <span class=\"po-icon po-icon-{{ value === true ? 'ok' : 'close' }}\"></span>\n      </div>\n    </div>\n\n    <span class=\"po-switch-label po-clickable po-switch-label-{{ getLabelPosition() }}\" (click)=\"eventClick()\">\n      {{ value === true ? labelOn : labelOff }}\n    </span>\n  </div>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: [
                         {
@@ -24720,7 +24847,10 @@
         { type: i0.ChangeDetectorRef }
     ]; };
     PoSwitchComponent.propDecorators = {
-        switchContainer: [{ type: i0.ViewChild, args: ['switchContainer', { static: true },] }]
+        switchContainer: [{ type: i0.ViewChild, args: ['switchContainer', { static: true },] }],
+        labelPosition: [{ type: i0.Input, args: ['p-label-position',] }],
+        labelOff: [{ type: i0.Input, args: ['p-label-off',] }],
+        labelOn: [{ type: i0.Input, args: ['p-label-on',] }]
     };
 
     /**
@@ -27750,7 +27880,7 @@
                 return 'switch';
             }
             else if (this.compareTo(type, exports.PoDynamicFieldType.Date) || this.compareTo(type, exports.PoDynamicFieldType.DateTime)) {
-                return 'datepicker';
+                return field.range ? 'datepickerrange' : 'datepicker';
             }
             else if (this.compareTo(type, exports.PoDynamicFieldType.Time)) {
                 field.mask = field.mask || '99:99';
@@ -27875,16 +28005,17 @@
         };
         PoDynamicFormFieldsComponent.prototype.onChangeField = function (visibleField, objectValue) {
             return __awaiter(this, void 0, void 0, function () {
-                var property, isChangedValueField, _b, changedField, changedFieldIndex;
+                var property, isBooleanType, isChangedValueField, _b, changedField, changedFieldIndex;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
                             property = visibleField.property;
+                            isBooleanType = visibleField.type === 'boolean';
                             isChangedValueField = this.previousValue[property] !== this.value[property];
                             if (visibleField.optionsService) {
                                 this.objectValue.emit(objectValue);
                             }
-                            if (!(this.form.touched && isChangedValueField)) return [3 /*break*/, 3];
+                            if (!((this.form.touched || isBooleanType) && isChangedValueField)) return [3 /*break*/, 3];
                             _b = this.getField(property), changedField = _b.changedField, changedFieldIndex = _b.changedFieldIndex;
                             if (!changedField.validate) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.validateField(changedField, changedFieldIndex, visibleField)];
@@ -27974,7 +28105,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-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    >\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]
                 },] }
@@ -33368,7 +33499,7 @@
     PoPageHeaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-page-header',
-                    template: "<div class=\"po-page-header\">\n  <!-- Breadcrumb -->\n  <div class=\"po-page-header-breadcrumb\" *ngIf=\"breadcrumb && breadcrumb.items.length\">\n    <po-breadcrumb\n      [p-favorite-service]=\"breadcrumb.favorite\"\n      [p-items]=\"breadcrumb.items\"\n      [p-params-service]=\"breadcrumb.params\"\n    >\n    </po-breadcrumb>\n  </div>\n\n  <!-- Titulo -->\n  <h1 class=\"po-page-header-title\" *ngIf=\"title\">\n    {{ title }}\n  </h1>\n\n  <!-- Opera\u00E7\u00F5es -->\n  <ng-content></ng-content>\n</div>\n"
+                    template: "<div class=\"po-page-header\">\n  <!-- Breadcrumb -->\n  <div class=\"po-page-header-breadcrumb\" *ngIf=\"breadcrumb && breadcrumb.items.length\">\n    <po-breadcrumb\n      [p-favorite-service]=\"breadcrumb.favorite\"\n      [p-items]=\"breadcrumb.items\"\n      [p-params-service]=\"breadcrumb.params\"\n    >\n    </po-breadcrumb>\n  </div>\n\n  <div class=\"po-pt-1\">\n    <!-- Titulo -->\n    <h1 class=\"po-page-header-title\" *ngIf=\"title\">\n      {{ title }}\n    </h1>\n\n    <!-- Opera\u00E7\u00F5es -->\n    <ng-content></ng-content>\n  </div>\n</div>\n"
                 },] }
     ];
 
@@ -34808,7 +34939,7 @@
     PoStepperCircleComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-stepper-circle',
-                    template: "<div\n  class=\"po-stepper-circle\"\n  [class.po-stepper-circle-with-icon]=\"icons\"\n  [style.height.px]=\"size\"\n  [style.width.px]=\"size\"\n  [tabindex]=\"isDisabled ? -1 : 0\"\n>\n  <span\n    class=\"po-stepper-circle-content\"\n    [class.po-icon]=\"icons\"\n    [class.po-icon-exclamation]=\"icons && isError\"\n    [class.po-icon-info]=\"icons && (isActive || isDefault || isDisabled)\"\n    [class.po-icon-ok]=\"icons && isDone\"\n    [class.po-stepper-circle-content-lg]=\"isLargeStep\"\n    [class.po-stepper-circle-content-md]=\"isMediumStep\"\n  >\n    {{ !icons ? content : '' }}\n  </span>\n</div>\n"
+                    template: "<div class=\"po-stepper-circle\" [style.height.px]=\"size\" [style.width.px]=\"size\" [tabindex]=\"isDisabled ? -1 : 0\">\n  <span\n    *ngIf=\"!isActive\"\n    class=\"po-stepper-circle-content\"\n    [class.po-icon]=\"icons || isDone\"\n    [class.po-icon-exclamation]=\"icons && isError\"\n    [class.po-icon-info]=\"icons && (isActive || isDefault || isDisabled)\"\n    [class.po-icon-ok]=\"isDone\"\n    [class.po-stepper-circle-content-lg]=\"isLargeStep\"\n    [class.po-stepper-circle-content-md]=\"isMediumStep\"\n  >\n    {{ !icons && !isDone ? content : '' }}\n  </span>\n\n  <div *ngIf=\"isActive || isError\" class=\"po-stepper-circle-active\"></div>\n</div>\n"
                 },] }
     ];
     PoStepperCircleComponent.propDecorators = {
@@ -35216,7 +35347,7 @@
     PoStepperComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-stepper',
-                    template: "<div class=\"po-stepper po-stepper-{{ orientation }}\">\n  <div class=\"po-stepper-container\">\n    <po-stepper-step\n      *ngFor=\"let step of stepList; let index = index; trackBy: trackByFn\"\n      class=\"po-stepper-step-position\"\n      [p-circle-content]=\"index + 1\"\n      [p-label]=\"step.label\"\n      [p-orientation]=\"orientation\"\n      [p-status]=\"step.status\"\n      [p-step-icons]=\"stepIcons\"\n      [p-step-size]=\"stepSize\"\n      (p-activated)=\"onStepActive(step)\"\n      (p-click)=\"changeStep(index, step)\"\n      (p-enter)=\"changeStep(index, step)\"\n    >\n    </po-stepper-step>\n  </div>\n\n  <div *ngIf=\"usePoSteps\" class=\"po-stepper-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n"
+                    template: "<div class=\"po-stepper po-stepper-{{ orientation }}\">\n  <div class=\"po-stepper-container\">\n    <po-stepper-step\n      *ngFor=\"let step of stepList; let index = index; trackBy: trackByFn\"\n      class=\"po-stepper-step-position\"\n      [p-circle-content]=\"index + 1\"\n      [p-label]=\"step.label\"\n      [p-orientation]=\"orientation\"\n      [p-status]=\"step.status\"\n      [p-step-icons]=\"stepIcons\"\n      [p-step-size]=\"stepSize\"\n      [p-next-status]=\"poSteps.get(index + 1)?.status\"\n      (p-activated)=\"onStepActive(step)\"\n      (p-click)=\"changeStep(index, step)\"\n      (p-enter)=\"changeStep(index, step)\"\n    >\n    </po-stepper-step>\n  </div>\n\n  <div *ngIf=\"usePoSteps\" class=\"po-stepper-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n"
                 },] }
     ];
     PoStepperComponent.ctorParameters = function () { return [
@@ -35346,11 +35477,11 @@
         PoStepperStepComponent.prototype.getStatusClass = function (status) {
             switch (status) {
                 case exports.PoStepperStatus.Active:
-                    return 'po-stepper-step-active';
+                    return 'po-stepper-step-default';
                 case exports.PoStepperStatus.Disabled:
                     return 'po-stepper-step-disabled';
                 case exports.PoStepperStatus.Done:
-                    return 'po-stepper-step-done';
+                    return 'po-stepper-step-default';
                 case exports.PoStepperStatus.Error:
                     return 'po-stepper-step-error';
                 default:
@@ -35372,12 +35503,13 @@
     PoStepperStepComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-stepper-step',
-                    template: "<div class=\"po-stepper-step\" [ngClass]=\"getStatusClass(status)\" (click)=\"onClick()\" (keydown.enter)=\"onEnter()\">\n  <div class=\"po-stepper-step-container\" [style.width.px]=\"isVerticalOrientation ? stepSize : undefined\">\n    <div\n      [class.po-stepper-step-bar-top]=\"isVerticalOrientation\"\n      [class.po-stepper-step-bar-left]=\"!isVerticalOrientation\"\n      [style.margin-right.px]=\"marginHorizontalBar\"\n    ></div>\n\n    <po-stepper-circle [p-content]=\"circleContent\" [p-icons]=\"stepIcons\" [p-size]=\"stepSize\" [p-status]=\"status\">\n    </po-stepper-circle>\n\n    <div\n      [class.po-stepper-step-bar-bottom]=\"isVerticalOrientation\"\n      [class.po-stepper-step-bar-right]=\"!isVerticalOrientation\"\n      [style.margin-left.px]=\"marginHorizontalBar\"\n    ></div>\n  </div>\n\n  <po-stepper-label class=\"po-stepper-step-label-position\" [p-content]=\"label\"> </po-stepper-label>\n</div>\n"
+                    template: "<div class=\"po-stepper-step\" [ngClass]=\"getStatusClass(status)\" (click)=\"onClick()\" (keydown.enter)=\"onEnter()\">\n  <div class=\"po-stepper-step-container\" [style.width.px]=\"isVerticalOrientation ? stepSize : undefined\">\n    <div\n      [class.po-stepper-step-bar-top]=\"isVerticalOrientation\"\n      [class.po-stepper-step-bar-left]=\"!isVerticalOrientation\"\n      [style.margin-right.px]=\"marginHorizontalBar\"\n    ></div>\n\n    <po-stepper-circle [p-content]=\"circleContent\" [p-icons]=\"stepIcons\" [p-size]=\"stepSize\" [p-status]=\"status\">\n    </po-stepper-circle>\n\n    <div\n      [class.po-stepper-step-bar-bottom]=\"isVerticalOrientation\"\n      [class.po-stepper-step-bar-right]=\"!isVerticalOrientation\"\n      [class.po-stepper-step-dashed-border]=\"nextStatus === 'disabled' && !isVerticalOrientation\"\n      [class.po-stepper-step-dashed-border-vertical]=\"nextStatus === 'disabled' && isVerticalOrientation\"\n      [style.margin-left.px]=\"marginHorizontalBar\"\n    ></div>\n  </div>\n\n  <po-stepper-label class=\"po-stepper-step-label-position\" [p-content]=\"label\"> </po-stepper-label>\n</div>\n"
                 },] }
     ];
     PoStepperStepComponent.propDecorators = {
         circleContent: [{ type: i0.Input, args: ['p-circle-content',] }],
         orientation: [{ type: i0.Input, args: ['p-orientation',] }],
+        nextStatus: [{ type: i0.Input, args: ['p-next-status',] }],
         activated: [{ type: i0.Output, args: ['p-activated',] }],
         click: [{ type: i0.Output, args: ['p-click',] }],
         enter: [{ type: i0.Output, args: ['p-enter',] }],
@@ -38681,7 +38813,7 @@
     exports.ɵdz = PoRichTextBodyComponent;
     exports.ɵe = PoAvatarBaseComponent;
     exports.ɵea = PoSelectBaseComponent;
-    exports.ɵeb = PoSwitchBaseComponent;
+    exports.ɵeb = PoFieldModel;
     exports.ɵec = PoTextareaBaseComponent;
     exports.ɵed = PoUploadBaseComponent;
     exports.ɵee = PoUploadService;