@po-ui/ng-components 5.14.0 → 5.18.0

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

@@ -298,6 +298,20 @@ const PO_AVATAR_SIZE_DEFAULT = 'md';
  */
 class PoAvatarBaseComponent {
     constructor() {
+        /**
+         * @optional
+         *
+         * @description
+         *
+         * Indica como o navegador deve carregar a imagem.
+         *
+         * Valores válidos:
+         *  - `eager` (a imagem é carregada imediatamente, independente de estar visível ou não)
+         *  - `lazy` (a imagem só é carregada quando estiver próxima de ser renderizada)
+         *
+         * @default `eager`
+         */
+        this.loading = 'eager';
         /** Evento disparado ao clicar na imagem do *avatar*. */
         this.click = new EventEmitter();
         this._size = 'md';
@@ -333,6 +347,7 @@ PoAvatarBaseComponent.decorators = [
 ];
 PoAvatarBaseComponent.propDecorators = {
     src: [{ type: Input, args: ['p-src',] }],
+    loading: [{ type: Input, args: ['p-loading',] }],
     click: [{ type: Output, args: ['p-click',] }],
     size: [{ type: Input, args: ['p-size',] }]
 };
@@ -372,7 +387,7 @@ class PoAvatarComponent extends PoAvatarBaseComponent {
 PoAvatarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'po-avatar',
-                template: "<div class=\"po-avatar po-avatar-{{ size }}\" [class.po-clickable]=\"hasClickEvent\" (click)=\"click.emit()\">\n  <ng-container *ngIf=\"src; then sourceImage; else defaultIcon\"></ng-container>\n</div>\n\n<ng-template #sourceImage>\n  <img class=\"po-avatar-image\" [src]=\"src\" alt=\"\" (error)=\"onError()\" />\n</ng-template>\n\n<ng-template #defaultIcon>\n  <span class=\"po-icon po-icon-user po-avatar-default-icon\"></span>\n</ng-template>\n",
+                template: "<div class=\"po-avatar po-avatar-{{ size }}\" [class.po-clickable]=\"hasClickEvent\" (click)=\"click.emit()\">\n  <ng-container *ngIf=\"src; then sourceImage; else defaultIcon\"></ng-container>\n</div>\n\n<ng-template #sourceImage>\n  <img class=\"po-avatar-image\" [src]=\"src\" alt=\"\" [attr.loading]=\"loading\" (error)=\"onError()\" />\n</ng-template>\n\n<ng-template #defaultIcon>\n  <span class=\"po-icon po-icon-user po-avatar-default-icon\"></span>\n</ng-template>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
@@ -9857,6 +9872,7 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
         else if (this.inputEl) {
             this.inputEl.nativeElement.value = '';
             this.date = undefined;
+            this.callOnChange(this.date, false);
         }
         this.valueBeforeChange = this.formatToDate(this.date);
     }
@@ -12354,7 +12370,7 @@ class PoTableBaseComponent {
             this.items.forEach(item => {
                 item.$selected = this.selectAll;
             });
-            this.emitSelectAllEvents(this.selectAll, this.items);
+            this.emitSelectAllEvents(this.selectAll, [...this.items]);
         }
     }
     selectRow(row) {
@@ -13157,6 +13173,30 @@ class PoTableComponent extends PoTableBaseComponent {
             this.toggleRowAction(row);
         }
     }
+    /**
+     * Desmarca uma linha que está selecionada.
+     */
+    unselectRowItem(itemfn) {
+        this.toggleSelect(itemfn, false);
+        if (this.items.every(item => !item.$selected)) {
+            this.selectAll = false;
+        }
+        else {
+            this.selectAll = null;
+        }
+    }
+    /**
+     * Seleciona uma linha do 'po-table'.
+     */
+    selectRowItem(itemfn) {
+        this.toggleSelect(itemfn, true);
+        if (this.items.every(item => item.$selected)) {
+            this.selectAll = true;
+        }
+        else {
+            this.selectAll = null;
+        }
+    }
     formatNumber(value, format) {
         if (!format) {
             return value;
@@ -13392,6 +13432,22 @@ class PoTableComponent extends PoTableBaseComponent {
             this.calculateHeightTableContainer(this.height);
         }
     }
+    toggleSelect(compare, selectValue) {
+        if (typeof compare !== 'function') {
+            this.items.forEach(item => {
+                if (item === compare) {
+                    item.$selected = selectValue;
+                }
+            });
+        }
+        else {
+            this.items.forEach(item => {
+                if (compare(item)) {
+                    item.$selected = selectValue;
+                }
+            });
+        }
+    }
 }
 PoTableComponent.decorators = [
     { type: Component, args: [{
@@ -15366,19 +15422,27 @@ PoComboComponent.propDecorators = {
 const poDatepickerRangeLiteralsDefault = {
     en: {
         invalidFormat: 'Date in invalid format',
-        startDateGreaterThanEndDate: 'Start date greater than end date'
+        startDateGreaterThanEndDate: 'Start date greater than end date',
+        invalidDate: 'Invalid date',
+        dateOutOfPeriod: 'Date out of period'
     },
     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',
+        dateOutOfPeriod: 'Fecha fuera de período'
     },
     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',
+        dateOutOfPeriod: 'Data fora do período'
     },
     ru: {
         invalidFormat: 'Дата в неверном формате',
-        startDateGreaterThanEndDate: 'Дата начала больше даты окончания'
+        startDateGreaterThanEndDate: 'Дата начала больше даты окончания',
+        invalidDate: 'Недействительная дата',
+        dateOutOfPeriod: 'дата вне периода'
     }
 };
 
@@ -15553,6 +15617,48 @@ class PoDatepickerRangeBaseComponent {
     get literals() {
         return this._literals || poDatepickerRangeLiteralsDefault[this.language];
     }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define uma data mínima para o `po-datepicker-range`.
+     */
+    set minDate(value) {
+        if (value instanceof Date) {
+            const year = value.getFullYear();
+            const date = new Date(year, value.getMonth(), value.getDate(), 0, 0, 0);
+            setYearFrom0To100(date, year);
+            this._minDate = date;
+        }
+        else {
+            this._minDate = convertIsoToDate(value, true, false);
+        }
+    }
+    get minDate() {
+        return this._minDate;
+    }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define uma data máxima para o `po-datepicker-range`.
+     */
+    set maxDate(value) {
+        if (value instanceof Date) {
+            const year = value.getFullYear();
+            const date = new Date(year, value.getMonth(), value.getDate(), 23, 59, 59);
+            setYearFrom0To100(date, year);
+            this._maxDate = date;
+        }
+        else {
+            this._maxDate = convertIsoToDate(value, false, true);
+        }
+    }
+    get maxDate() {
+        return this._maxDate;
+    }
     /**
      * @optional
      *
@@ -15646,6 +15752,14 @@ class PoDatepickerRangeBaseComponent {
                 }
             };
         }
+        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 {
@@ -15662,8 +15776,19 @@ class PoDatepickerRangeBaseComponent {
                 }
             };
         }
+        if ((startDate && !this.validateDateInRange(startDate)) || (endDate && !this.validateDateInRange(endDate))) {
+            this.errorMessage = this.literals.dateOutOfPeriod;
+            return {
+                date: {
+                    valid: false
+                }
+            };
+        }
         return null;
     }
+    validateDateInRange(startDate) {
+        return validateDateRange(convertIsoToDate(startDate, false, false), this._minDate, this._maxDate);
+    }
     writeValue(dateRange) {
         this.resetDateRangeInputValidation();
         if (!dateRange || this.dateRangeObjectFailed(dateRange)) {
@@ -15701,6 +15826,17 @@ class PoDatepickerRangeBaseComponent {
             this.validatorChange(model);
         }
     }
+    verifyValidDate(startDate, endDate) {
+        if (startDate !== '' && endDate !== '') {
+            return this.dateIsValid(startDate) && this.dateIsValid(endDate);
+        }
+        else if (startDate !== '') {
+            return this.dateIsValid(startDate);
+        }
+        else {
+            return this.dateIsValid(endDate);
+        }
+    }
     convertPatternDateFormat(value) {
         if (value instanceof Date) {
             return this.poDateService.convertDateToISO(value);
@@ -15724,6 +15860,29 @@ class PoDatepickerRangeBaseComponent {
             requiredFailed(this.required, this.disabled, startDate) &&
             requiredFailed(this.required, this.disabled, endDate));
     }
+    dateIsValid(date) {
+        const [strYear, strMonth, strDay] = date.split('-');
+        const year = Number(strYear);
+        const month = Number(strMonth);
+        const 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;
+            }
+        }
+    }
 }
 PoDatepickerRangeBaseComponent.decorators = [
     { type: Directive }
@@ -15742,6 +15901,8 @@ PoDatepickerRangeBaseComponent.propDecorators = {
     disabled: [{ type: Input, args: ['p-disabled',] }],
     endDate: [{ type: Input, args: ['p-end-date',] }],
     literals: [{ type: Input, args: ['p-literals',] }],
+    minDate: [{ type: Input, args: ['p-min-date',] }],
+    maxDate: [{ type: Input, args: ['p-max-date',] }],
     noAutocomplete: [{ type: Input, args: ['p-no-autocomplete',] }],
     readonly: [{ type: Input, args: ['p-readonly',] }],
     required: [{ type: Input, args: ['p-required',] }],
@@ -15862,6 +16023,11 @@ class PoDatepickerRangeComponent extends PoDatepickerRangeBaseComponent {
         // Classe de máscara
         this.poMaskObject = this.buildMask();
     }
+    ngOnChanges(changes) {
+        if (changes.minDate || changes.maxDate) {
+            this.validateModel(this.dateRange);
+        }
+    }
     ngOnDestroy() {
         this.removeListeners();
     }
@@ -15994,7 +16160,7 @@ class PoDatepickerRangeComponent extends PoDatepickerRangeBaseComponent {
     getDateRangeFormatValidation(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)
         };
     }
@@ -16155,7 +16321,7 @@ class PoDatepickerRangeComponent extends PoDatepickerRangeBaseComponent {
 PoDatepickerRangeComponent.decorators = [
     { type: 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 p-mode=\"range\" [ngModel]=\"dateRange\" (ngModelChange)=\"onCalendarChange($event)\"></po-calendar>\n  </div>\n</ng-container>\n",
+                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
             },] }
 ];
@@ -17344,8 +17510,8 @@ const providers$4 = [
  */
 class PoEmailComponent extends PoInputGeneric {
     /* istanbul ignore next */
-    constructor(el) {
-        super(el);
+    constructor(el, cd) {
+        super(el, cd);
         this.icon = 'po-icon-mail';
         this.type = 'email';
         // Consideramos o uso do nosso pattern com a seguinte expressão.
@@ -17395,11 +17561,13 @@ PoEmailComponent.decorators = [
     { type: Component, args: [{
                 selector: 'po-email',
                 template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-right]=\"clean\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean *ngIf=\"clean && !disabled && !readonly\" [p-element-ref]=\"inputEl\" (p-change-event)=\"clear($event)\">\n      </po-clean>\n    </div>\n  </div>\n\n  <po-field-container-bottom [p-error-pattern]=\"getErrorPattern()\"> </po-field-container-bottom>\n</po-field-container>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: providers$4
             },] }
 ];
 PoEmailComponent.ctorParameters = () => [
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
 ];
 
 /* istanbul ignore next */
@@ -17443,8 +17611,8 @@ const providers$3 = [
  */
 class PoLoginComponent extends PoInputGeneric {
     /* istanbul ignore next */
-    constructor(el) {
-        super(el);
+    constructor(el, cd) {
+        super(el, cd);
         this.type = 'text';
     }
     extraValidation(c) {
@@ -17455,11 +17623,13 @@ PoLoginComponent.decorators = [
     { type: Component, args: [{
                 selector: 'po-login',
                 template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <div class=\"po-field-icon-container-left\">\n      <span class=\"po-icon po-field-icon po-icon-user\" [class.po-field-icon-disabled]=\"disabled\"></span>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-input-icon-left\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-right]=\"clean\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean *ngIf=\"clean && !disabled && !readonly\" [p-element-ref]=\"inputEl\" (p-change-event)=\"clear($event)\">\n      </po-clean>\n    </div>\n  </div>\n\n  <po-field-container-bottom [p-error-pattern]=\"getErrorPattern()\"> </po-field-container-bottom>\n</po-field-container>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: providers$3
             },] }
 ];
 PoLoginComponent.ctorParameters = () => [
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
 ];
 
 /**
@@ -17475,6 +17645,7 @@ class PoLookupFilterService {
         this.headers = new HttpHeaders({
             'X-PO-No-Message': 'true'
         });
+        this.multiple = false;
     }
     getFilteredItems(filteredItemsParams) {
         const { filterParams, advancedFilters } = filteredItemsParams, restFilteredItemsParams = __rest(filteredItemsParams, ["filterParams", "advancedFilters"]);
@@ -17484,12 +17655,25 @@ class PoLookupFilterService {
         return this.httpClient.get(this.url, { headers: this.headers, params });
     }
     getObjectByValue(value, filterParams) {
-        const encodedValue = encodeURIComponent(value);
         const validatedFilterParams = this.validateParams(filterParams);
-        return this.httpClient.get(`${this.url}/${encodedValue}`, { headers: this.headers, params: validatedFilterParams });
+        let newURL;
+        let encodedValue;
+        if (this.multiple) {
+            encodedValue = encodeURIComponent(Array.isArray(value) ? value.join(',') : value);
+            newURL = `${this.url}?${this.fieldValue}=${encodedValue}`;
+        }
+        else {
+            encodedValue = encodeURIComponent(value);
+            newURL = `${this.url}/${encodedValue}`;
+        }
+        return this.httpClient
+            .get(newURL, { headers: this.headers, params: validatedFilterParams })
+            .pipe(map((response) => ('items' in response ? response.items : response)));
     }
-    setUrl(url) {
+    setConfig(url, fieldValue, multiple) {
         this.url = url;
+        this.fieldValue = fieldValue;
+        this.multiple = multiple;
     }
     validateParams(params) {
         return isTypeof(params, 'object') && !Array.isArray(params) ? params : undefined;
@@ -17506,7 +17690,7 @@ PoLookupFilterService.ctorParameters = () => [
  * @description
  *
  * Componente utilizado para abrir uma janela de busca com uma tabela que lista dados de um serviço. Nesta janela é possível buscar e
- * selecionar o registro que será enviado para o campo. O `po-lookup` permite que o usuário digite um valor e pressione a tecla *TAB* para
+ * selecionar um ou mais registros que serão enviados para o campo. O `po-lookup` permite que o usuário digite um valor e pressione a tecla *TAB* para
  * buscar um registro.
  *
  * > Caso o campo seja iniciado ou preenchido com um valor inexistente na busca, o mesmo será limpado.
@@ -17544,6 +17728,31 @@ class PoLookupBaseComponent {
          * @default `false`
          */
         this.infiniteScroll = false;
+        /** Exibe um ícone que permite limpar o campo. */
+        this.clean = false;
+        /**
+         * @optional
+         *
+         * @description
+         *
+         * Permite a seleção de múltiplos itens.
+         *
+         * > Quando habilitado o valor do campo passará a ser uma lista de valores, por exemplo: `[ 12345, 67890 ]`
+         *
+         * @default `false`
+         */
+        this.multiple = false;
+        /**
+         * @optional
+         *
+         * @description
+         *
+         * Define que a altura do componente será auto ajustável, possuindo uma altura minima porém a altura máxima será de acordo
+         * com o número de itens selecionados e a extensão dos mesmos, mantendo-os sempre visíveis.
+         *
+         * @default `false`
+         */
+        this.autoHeight = 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.
@@ -17567,6 +17776,7 @@ class PoLookupBaseComponent {
          *  Por parâmetro será passado o novo valor.
          */
         this.change = new EventEmitter();
+        this.selectedOptions = [];
         this.oldValue = '';
         this.oldValueToModel = null;
         // eslint-disable-next-line
@@ -17574,6 +17784,7 @@ class PoLookupBaseComponent {
         this._disabled = false;
         this._placeholder = '';
         this._required = false;
+        this._autoHeight = false;
         this.onChangePropagate = null;
     }
     /** Mensagem que aparecerá enquanto o campo não estiver preenchido. */
@@ -17619,6 +17830,20 @@ class PoLookupBaseComponent {
      * url + ?page=1&pageSize=20&age=23&filter=Peter
      * ```
      *
+     * Ao iniciar o campo com valor, os registros serão buscados da seguinte forma:
+     * ```
+     * model = 1234;
+     *
+     * GET url/1234
+     * ```
+     *
+     * Caso estiver com múltipla seleção habilitada:
+     * ```
+     * model = [1234, 5678]
+     *
+     * GET url?${fieldValue}=1234,5678
+     * ```
+     *
      * > Esta URL deve retornar e receber os dados no padrão de [API do PO UI](https://po-ui.io/guides/api) e utiliza os valores
      * definidos nas propriedades `p-field-label` e `p-field-value` para a construção do `po-lookup`.
      *
@@ -17695,6 +17920,15 @@ class PoLookupBaseComponent {
     ngAfterViewInit() {
         this.setControl();
     }
+    cleanModel() {
+        this.cleanViewValue();
+        this.callOnChange(undefined);
+    }
+    ngOnChanges(changes) {
+        if (changes.multiple && isTypeof(this.filterService, 'string')) {
+            this.service.setConfig(this.filterService, this.fieldValue, this.multiple);
+        }
+    }
     // Função implementada do ControlValueAccessor
     // Usada para interceptar os estados de habilitado via forms api
     setDisabledState(isDisabled) {
@@ -17715,7 +17949,7 @@ class PoLookupBaseComponent {
     }
     // Seleciona o valor do model.
     selectValue(valueSelected) {
-        this.valueToModel = valueSelected[this.fieldValue];
+        this.valueToModel = valueSelected;
         this.callOnChange(this.valueToModel);
         this.selected.emit(valueSelected);
     }
@@ -17753,10 +17987,12 @@ class PoLookupBaseComponent {
                 }
             }))
                 .subscribe(element => {
-                if (element) {
-                    this.oldValue = element[this.fieldLabel];
-                    this.selectValue(element);
-                    this.setViewValue(this.getFormattedLabel(element), element);
+                if ((element === null || element === void 0 ? void 0 : element.length) || (!Array.isArray(element) && element)) {
+                    if (Array.isArray(element) && element.length > 1) {
+                        this.setDisclaimers(element);
+                        this.updateVisibleItems();
+                    }
+                    this.selectModel(this.multiple ? element : [element]);
                 }
                 else {
                     this.cleanModel();
@@ -17780,13 +18016,7 @@ class PoLookupBaseComponent {
         }
     }
     writeValue(value) {
-        if (value && value instanceof Object) {
-            // Esta condição é executada quando é retornado o objeto selecionado do componente Po Lookup Modal.
-            this.oldValue = value[this.fieldLabel];
-            this.valueToModel = value[this.fieldValue];
-            this.setViewValue(this.getFormattedLabel(value), value);
-        }
-        else if (value) {
+        if ((value === null || value === void 0 ? void 0 : value.length) || (!Array.isArray(value) && value)) {
             // Esta condição é executada somente quando é passado o ID para realizar a busca pelo ID.
             this.searchById(value);
         }
@@ -17794,10 +18024,6 @@ class PoLookupBaseComponent {
             this.cleanViewValue();
         }
     }
-    cleanModel() {
-        this.cleanViewValue();
-        this.callOnChange(undefined);
-    }
     cleanViewValue() {
         this.setViewValue('', {});
         this.oldValue = '';
@@ -17808,10 +18034,19 @@ class PoLookupBaseComponent {
         return value ? this.keysDescription.map(column => value[column]).join(' - ') : '';
     }
     // Chama o método writeValue e preenche o model.
-    selectModel(value) {
-        this.writeValue(value);
-        if (value && value instanceof Object) {
-            this.selectValue(value);
+    selectModel(options) {
+        if (options.length) {
+            this.selectedOptions = [...options];
+            const newModel = this.multiple ? options.map(option => option[this.fieldValue]) : options[0][this.fieldValue];
+            this.selectValue(newModel);
+            if (options.length === 1) {
+                this.oldValue = options[0][this.fieldLabel];
+                this.setViewValue(this.getFormattedLabel(options[0]), options[0]);
+            }
+        }
+        else {
+            this.selectValue(undefined);
+            this.cleanViewValue();
         }
     }
     validateModel(model) {
@@ -17825,7 +18060,7 @@ class PoLookupBaseComponent {
         }
         if (service && isTypeof(service, 'string')) {
             this.service = this.defaultService;
-            this.service.setUrl(service);
+            this.service.setConfig(service, this.fieldValue, this.multiple);
         }
     }
     setControl() {
@@ -17866,6 +18101,9 @@ PoLookupBaseComponent.propDecorators = {
     optional: [{ type: Input, args: ['p-optional',] }],
     advancedFilters: [{ type: Input, args: ['p-advanced-filters',] }],
     infiniteScroll: [{ type: Input, args: ['p-infinite-scroll',] }],
+    clean: [{ type: Input, args: ['p-clean',] }],
+    multiple: [{ type: Input, args: ['p-multiple',] }],
+    autoHeight: [{ type: Input, args: ['p-auto-height',] }],
     onError: [{ type: Output, args: ['p-error',] }],
     selected: [{ type: Output, args: ['p-selected',] }],
     change: [{ type: Output, args: ['p-change',] }],
@@ -17880,6 +18118,350 @@ __decorate([
 __decorate([
     InputBoolean()
 ], PoLookupBaseComponent.prototype, "infiniteScroll", void 0);
+__decorate([
+    InputBoolean()
+], PoLookupBaseComponent.prototype, "clean", void 0);
+__decorate([
+    InputBoolean()
+], PoLookupBaseComponent.prototype, "multiple", void 0);
+__decorate([
+    InputBoolean()
+], PoLookupBaseComponent.prototype, "autoHeight", void 0);
+
+const poLookupLiteralsDefault = {
+    en: {
+        modalPrimaryActionLabel: 'Select',
+        modalSecondaryActionLabel: 'Cancel',
+        modalPlaceholder: 'Search',
+        modalTitle: 'Select a record',
+        modalTableNoColumns: poTableLiteralsDefault.en.noColumns,
+        modalTableNoData: poTableLiteralsDefault.en.noData,
+        modalTableLoadingData: poTableLiteralsDefault.en.loadingData,
+        modalTableLoadMoreData: poTableLiteralsDefault.en.loadMoreData,
+        modalAdvancedSearch: 'Advanced search',
+        modalAdvancedSearchTitle: 'Advanced search',
+        modalAdvancedSearchPrimaryActionLabel: 'Filter',
+        modalAdvancedSearchSecondaryActionLabel: 'Return',
+        modalDisclaimerGroupTitle: 'Presenting results filtered by:'
+    },
+    es: {
+        modalPrimaryActionLabel: 'Seleccionar',
+        modalSecondaryActionLabel: 'Cancelar',
+        modalPlaceholder: 'Buscar',
+        modalTitle: 'Seleccione un registro',
+        modalTableNoColumns: poTableLiteralsDefault.es.noColumns,
+        modalTableNoData: poTableLiteralsDefault.es.noData,
+        modalTableLoadingData: poTableLiteralsDefault.es.loadingData,
+        modalTableLoadMoreData: poTableLiteralsDefault.es.loadMoreData,
+        modalAdvancedSearch: 'Búsqueda Avanzada',
+        modalAdvancedSearchTitle: 'Búsqueda Avanzada',
+        modalAdvancedSearchPrimaryActionLabel: 'Filtrar',
+        modalAdvancedSearchSecondaryActionLabel: 'Vuelve',
+        modalDisclaimerGroupTitle: 'Presentar resultados filtrados por:'
+    },
+    pt: {
+        modalPrimaryActionLabel: 'Selecionar',
+        modalSecondaryActionLabel: 'Cancelar',
+        modalPlaceholder: 'Pesquisar',
+        modalTitle: 'Selecione um registro',
+        modalTableNoColumns: poTableLiteralsDefault.pt.noColumns,
+        modalTableNoData: poTableLiteralsDefault.pt.noData,
+        modalTableLoadingData: poTableLiteralsDefault.pt.loadingData,
+        modalTableLoadMoreData: poTableLiteralsDefault.pt.loadMoreData,
+        modalAdvancedSearch: 'Busca avançada',
+        modalAdvancedSearchTitle: 'Busca Avançada',
+        modalAdvancedSearchPrimaryActionLabel: 'Filtrar',
+        modalAdvancedSearchSecondaryActionLabel: 'Voltar',
+        modalDisclaimerGroupTitle: 'Apresentando resultados filtrados por:'
+    },
+    ru: {
+        modalPrimaryActionLabel: 'выбирать',
+        modalSecondaryActionLabel: 'отменить',
+        modalPlaceholder: 'поиск',
+        modalTitle: 'Выберите запись',
+        modalTableNoColumns: poTableLiteralsDefault.ru.noColumns,
+        modalTableNoData: poTableLiteralsDefault.ru.noData,
+        modalTableLoadingData: poTableLiteralsDefault.ru.loadingData,
+        modalTableLoadMoreData: poTableLiteralsDefault.ru.loadMoreData,
+        modalAdvancedSearch: 'Расширенный поиск',
+        modalAdvancedSearchTitle: 'Расширенный поиск',
+        modalAdvancedSearchPrimaryActionLabel: 'Фильтр',
+        modalAdvancedSearchSecondaryActionLabel: 'Вернись',
+        modalDisclaimerGroupTitle: 'Представление результатов отфильтровано по:'
+    }
+};
+/**
+ * @docsPrivate
+ *
+ * Classe base do componente Po Lookup Modal.
+ */
+class PoLookupModalBaseComponent {
+    constructor(languageService, changeDetector) {
+        this.changeDetector = changeDetector;
+        /** Se verdadeiro, ativa a funcionalidade de scroll infinito para a tabela exibida no retorno da consulta. */
+        this.infiniteScroll = false;
+        /** Se verdadeiro, ativa a funcionalidade de multipla seleção. */
+        this.multiple = false;
+        /** Evento utilizado ao selecionar um registro da tabela. */
+        this.model = new EventEmitter();
+        this.hasNext = true;
+        this.isLoading = false;
+        this.page = 1;
+        this.pageSize = 10;
+        this.searchValue = '';
+        // Propriedade da modal de busca avançada:
+        this.advancedFilterModalTitle = '';
+        this.dynamicFormValue = {};
+        this.isAdvancedFilter = false;
+        this.selecteds = [];
+        this.language = poLocaleDefault;
+        // eslint-disable-next-line @typescript-eslint/member-ordering
+        this.primaryAction = {
+            action: () => {
+                const selectedsItems = this.selecteds;
+                this.model.emit(selectedsItems);
+                this.poModal.close();
+            },
+            label: this.literals.modalPrimaryActionLabel
+        };
+        // eslint-disable-next-line @typescript-eslint/member-ordering
+        this.secondaryAction = {
+            action: () => {
+                this.model.emit(null);
+                this.poModal.close();
+            },
+            label: this.literals.modalSecondaryActionLabel
+        };
+        this.language = languageService.getShortLanguage();
+    }
+    /** Objeto com as literais usadas no `po-lookup-modal`. */
+    set literals(value) {
+        if (value instanceof Object && !(value instanceof Array)) {
+            this._literals = Object.assign(Object.assign(Object.assign({}, poLookupLiteralsDefault[poLocaleDefault]), poLookupLiteralsDefault[this.language]), value);
+            if (value.modalTitle) {
+                this.title = this.literals.modalTitle;
+            }
+        }
+        else {
+            this._literals = poLookupLiteralsDefault[this.language];
+        }
+        this.primaryAction.label = this.literals.modalPrimaryActionLabel;
+        this.secondaryAction.label = this.literals.modalSecondaryActionLabel;
+        this.setTableLiterals();
+    }
+    get literals() {
+        return this._literals || poLookupLiteralsDefault[this.language];
+    }
+    /** Título da modal. */
+    set title(value) {
+        this._title = isTypeof(value, 'string') ? value : this.literals.modalTitle;
+    }
+    get title() {
+        return this._title;
+    }
+    ngOnDestroy() {
+        if (this.filterSubscription) {
+            this.filterSubscription.unsubscribe();
+        }
+        if (this.searchSubscription) {
+            this.searchSubscription.unsubscribe();
+        }
+        if (this.showMoreSubscription) {
+            this.showMoreSubscription.unsubscribe();
+        }
+    }
+    ngOnInit() {
+        this.setAdvancedFilterModalProperties();
+        this.initializeData();
+        this.setTableLiterals();
+    }
+    createDisclaimer() {
+        this.disclaimerGroup.disclaimers = [];
+        this.searchValue = '';
+        for (const [key, value] of Object.entries(this.dynamicFormValue)) {
+            this.addDisclaimer(value, key);
+        }
+        if (!Object.values(this.dynamicFormValue).some(v => v !== null && typeof v !== 'undefined')) {
+            this.initializeData();
+        }
+    }
+    addDisclaimer(value, property) {
+        this.disclaimer = { property: property };
+        this.disclaimer.value = value;
+        this.disclaimerGroup.disclaimers = [...this.disclaimerGroup.disclaimers, this.disclaimer];
+    }
+    onChangeDisclaimerGroup() {
+        if (!this.searchValue) {
+            this.isLoading = true;
+            this.searchValue = '';
+            this.searchFilteredItems();
+        }
+    }
+    search() {
+        this.page = 1;
+        if (this.searchValue) {
+            this.isLoading = true;
+            this.disclaimerGroup.disclaimers = [];
+            this.searchFilteredItems();
+        }
+        else {
+            this.initializeData();
+        }
+    }
+    searchFilteredItems() {
+        this.searchSubscription = this.getFilteredItems(this.searchValue)
+            .pipe(catchError(error => {
+            this.setLookupResponseProperties();
+            return throwError(error);
+        }))
+            .subscribe((data) => this.setLookupResponseProperties(data), () => { });
+    }
+    showMoreEvent() {
+        this.page++;
+        this.isLoading = true;
+        this.showMoreSubscription = this.getFilteredItems(this.searchValue)
+            .pipe(catchError(error => {
+            this.hasNext = false;
+            this.isLoading = false;
+            return throwError(error);
+        }))
+            .subscribe((data) => {
+            this.items = [...this.items, ...data.items];
+            this.hasNext = data.hasNext;
+            this.isLoading = false;
+            this.changeDetector.detectChanges();
+            this.setSelectedItems();
+        }, () => { });
+    }
+    //Método responsável por selecionar as linhas quando abre o modal.
+    setSelectedItems() {
+        this.selecteds.forEach(selectedItem => this.poTable.selectRowItem(item => item[this.fieldValue] === selectedItem.value));
+    }
+    //Método responsável por criar os disclaimers quando abre o modal.
+    setDisclaimersItems() {
+        if (this.selectedItems && !Array.isArray(this.selectedItems)) {
+            this.selecteds = [{ value: this.selectedItems }];
+            return;
+        }
+        if (this.selectedItems && this.selectedItems.length) {
+            this.selecteds = [...this.selectedItems];
+        }
+    }
+    setAdvancedFilterModalProperties() {
+        this.advancedFilterModalTitle = this.literals.modalAdvancedSearchTitle;
+        this.disclaimerGroup = {
+            title: this.literals.modalDisclaimerGroupTitle,
+            disclaimers: []
+        };
+        this.primaryActionAdvancedFilter = {
+            action: () => {
+                this.destroyDynamicForm();
+                this.isAdvancedFilter = false;
+                this.createDisclaimer();
+            },
+            label: this.literals.modalAdvancedSearchPrimaryActionLabel
+        };
+        this.secondaryActionAdvancedFilter = {
+            action: () => {
+                this.destroyDynamicForm();
+                this.isAdvancedFilter = false;
+            },
+            label: this.literals.modalAdvancedSearchSecondaryActionLabel
+        };
+    }
+    getAdvancedFilters(advancedParams) {
+        if (advancedParams && advancedParams.length > 0) {
+            const filters = {};
+            let validatedAdvacendFilters;
+            advancedParams.forEach((filter) => {
+                filters[filter.property] = filter.value instanceof Array ? filter.value.join() : filter.value;
+                validatedAdvacendFilters = Object.assign(Object.assign({}, validatedAdvacendFilters), filters);
+            });
+            return validatedAdvacendFilters;
+        }
+        return undefined;
+    }
+    getFilteredItems(filter) {
+        const filteredParams = this.getFilteredParams(filter);
+        return this.filterService.getFilteredItems(filteredParams);
+    }
+    getFilteredParams(filter) {
+        const { page, pageSize, filterParams, sort } = this;
+        const filteredParams = {};
+        const order = this.getOrderParam(sort);
+        const advancedFilters = this.getAdvancedFilters(this.disclaimerGroup.disclaimers);
+        const params = { filter, page, pageSize, order, filterParams, advancedFilters };
+        for (const key in params) {
+            if (params.hasOwnProperty(key) && params[key] !== undefined) {
+                filteredParams[key] = params[key];
+            }
+        }
+        return filteredParams;
+    }
+    getOrderParam(sort = { type: undefined }) {
+        const { column, type } = sort;
+        if (!column) {
+            return;
+        }
+        if (type === PoTableColumnSortType.Descending) {
+            return `-${column.property}`;
+        }
+        return `${column.property}`;
+    }
+    initializeData() {
+        this.isLoading = true;
+        this.filterSubscription = this.getFilteredItems('').subscribe(data => {
+            this.setLookupResponseProperties(data);
+        });
+    }
+    setLookupResponseProperties(data) {
+        var _a, _b;
+        this.items = (_a = data === null || data === void 0 ? void 0 : data.items) !== null && _a !== void 0 ? _a : [];
+        this.hasNext = (_b = data === null || data === void 0 ? void 0 : data.hasNext) !== null && _b !== void 0 ? _b : false;
+        this.isLoading = false;
+        this.changeDetector.detectChanges();
+        this.setDisclaimersItems();
+        this.setSelectedItems();
+    }
+    setTableLiterals() {
+        this.tableLiterals = {
+            'noColumns': this.literals.modalTableNoColumns,
+            'noData': this.literals.modalTableNoData,
+            'loadingData': this.literals.modalTableLoadingData,
+            'loadMoreData': this.literals.modalTableLoadMoreData
+        };
+    }
+}
+PoLookupModalBaseComponent.decorators = [
+    { type: Directive }
+];
+PoLookupModalBaseComponent.ctorParameters = () => [
+    { type: PoLanguageService },
+    { type: ChangeDetectorRef }
+];
+PoLookupModalBaseComponent.propDecorators = {
+    poModal: [{ type: ViewChild, args: [PoModalComponent, { static: true },] }],
+    poTable: [{ type: ViewChild, args: [PoTableComponent, { static: true },] }],
+    advancedFilters: [{ type: Input, args: ['p-advanced-filters',] }],
+    columns: [{ type: Input, args: ['p-columns',] }],
+    items: [{ type: Input, args: ['p-items',] }],
+    filterService: [{ type: Input, args: ['p-filter-service',] }],
+    filterParams: [{ type: Input, args: ['p-filter-params',] }],
+    infiniteScroll: [{ type: Input, args: ['p-infinite-scroll',] }],
+    multiple: [{ type: Input, args: ['p-multiple',] }],
+    model: [{ type: Output, args: ['p-change-model',] }],
+    selectedItems: [{ type: Input, args: ['p-selected-items',] }],
+    fieldLabel: [{ type: Input, args: ['p-field-label',] }],
+    fieldValue: [{ type: Input, args: ['p-field-value',] }],
+    literals: [{ type: Input, args: ['p-literals',] }],
+    title: [{ type: Input, args: ['p-title',] }]
+};
+__decorate([
+    InputBoolean()
+], PoLookupModalBaseComponent.prototype, "infiniteScroll", void 0);
+__decorate([
+    InputBoolean()
+], PoLookupModalBaseComponent.prototype, "multiple", void 0);
 
 /**
  *
@@ -18227,320 +18809,14 @@ PoDynamicFormComponent.propDecorators = {
     form: [{ type: ViewChild, args: ['dynamicForm',] }]
 };
 
-const poLookupLiteralsDefault = {
-    en: {
-        modalPrimaryActionLabel: 'Select',
-        modalSecondaryActionLabel: 'Cancel',
-        modalPlaceholder: 'Search',
-        modalTitle: 'Select a record',
-        modalTableNoColumns: poTableLiteralsDefault.en.noColumns,
-        modalTableNoData: poTableLiteralsDefault.en.noData,
-        modalTableLoadingData: poTableLiteralsDefault.en.loadingData,
-        modalTableLoadMoreData: poTableLiteralsDefault.en.loadMoreData,
-        modalAdvancedSearch: 'Advanced search',
-        modalAdvancedSearchTitle: 'Advanced search',
-        modalAdvancedSearchPrimaryActionLabel: 'Filter',
-        modalAdvancedSearchSecondaryActionLabel: 'Return',
-        modalDisclaimerGroupTitle: 'Presenting results filtered by:'
-    },
-    es: {
-        modalPrimaryActionLabel: 'Seleccionar',
-        modalSecondaryActionLabel: 'Cancelar',
-        modalPlaceholder: 'Buscar',
-        modalTitle: 'Seleccione un registro',
-        modalTableNoColumns: poTableLiteralsDefault.es.noColumns,
-        modalTableNoData: poTableLiteralsDefault.es.noData,
-        modalTableLoadingData: poTableLiteralsDefault.es.loadingData,
-        modalTableLoadMoreData: poTableLiteralsDefault.es.loadMoreData,
-        modalAdvancedSearch: 'Búsqueda Avanzada',
-        modalAdvancedSearchTitle: 'Búsqueda Avanzada',
-        modalAdvancedSearchPrimaryActionLabel: 'Filtrar',
-        modalAdvancedSearchSecondaryActionLabel: 'Vuelve',
-        modalDisclaimerGroupTitle: 'Presentar resultados filtrados por:'
-    },
-    pt: {
-        modalPrimaryActionLabel: 'Selecionar',
-        modalSecondaryActionLabel: 'Cancelar',
-        modalPlaceholder: 'Pesquisar',
-        modalTitle: 'Selecione um registro',
-        modalTableNoColumns: poTableLiteralsDefault.pt.noColumns,
-        modalTableNoData: poTableLiteralsDefault.pt.noData,
-        modalTableLoadingData: poTableLiteralsDefault.pt.loadingData,
-        modalTableLoadMoreData: poTableLiteralsDefault.pt.loadMoreData,
-        modalAdvancedSearch: 'Busca avançada',
-        modalAdvancedSearchTitle: 'Busca Avançada',
-        modalAdvancedSearchPrimaryActionLabel: 'Filtrar',
-        modalAdvancedSearchSecondaryActionLabel: 'Voltar',
-        modalDisclaimerGroupTitle: 'Apresentando resultados filtrados por:'
-    },
-    ru: {
-        modalPrimaryActionLabel: 'выбирать',
-        modalSecondaryActionLabel: 'отменить',
-        modalPlaceholder: 'поиск',
-        modalTitle: 'Выберите запись',
-        modalTableNoColumns: poTableLiteralsDefault.ru.noColumns,
-        modalTableNoData: poTableLiteralsDefault.ru.noData,
-        modalTableLoadingData: poTableLiteralsDefault.ru.loadingData,
-        modalTableLoadMoreData: poTableLiteralsDefault.ru.loadMoreData,
-        modalAdvancedSearch: 'Расширенный поиск',
-        modalAdvancedSearchTitle: 'Расширенный поиск',
-        modalAdvancedSearchPrimaryActionLabel: 'Фильтр',
-        modalAdvancedSearchSecondaryActionLabel: 'Вернись',
-        modalDisclaimerGroupTitle: 'Представление результатов отфильтровано по:'
-    }
-};
-/**
- * @docsPrivate
- *
- * Classe base do componente Po Lookup Modal.
- */
-class PoLookupModalBaseComponent {
-    constructor(languageService) {
-        /** Se verdadeiro, ativa a funcionalidade de scroll infinito para a tabela exibida no retorno da consulta. */
-        this.infiniteScroll = false;
-        /** Evento utilizado ao selecionar um registro da tabela. */
-        this.model = new EventEmitter();
-        this.hasNext = true;
-        this.isLoading = false;
-        this.page = 1;
-        this.pageSize = 10;
-        this.searchValue = '';
-        // Propriedade da modal de busca avançada:
-        this.advancedFilterModalTitle = '';
-        this.dynamicFormValue = {};
-        this.isAdvancedFilter = false;
-        this.language = poLocaleDefault;
-        // eslint-disable-next-line @typescript-eslint/member-ordering
-        this.primaryAction = {
-            action: () => {
-                this.items.forEach(element => {
-                    if (element['$selected']) {
-                        this.model.emit(element);
-                        this.poModal.close();
-                    }
-                });
-            },
-            label: this.literals.modalPrimaryActionLabel
-        };
-        // eslint-disable-next-line @typescript-eslint/member-ordering
-        this.secondaryAction = {
-            action: () => {
-                this.model.emit(null);
-                this.poModal.close();
-            },
-            label: this.literals.modalSecondaryActionLabel
-        };
-        this.language = languageService.getShortLanguage();
-    }
-    /** Objeto com as literais usadas no `po-lookup-modal`. */
-    set literals(value) {
-        if (value instanceof Object && !(value instanceof Array)) {
-            this._literals = Object.assign(Object.assign(Object.assign({}, poLookupLiteralsDefault[poLocaleDefault]), poLookupLiteralsDefault[this.language]), value);
-            if (value.modalTitle) {
-                this.title = this.literals.modalTitle;
-            }
-        }
-        else {
-            this._literals = poLookupLiteralsDefault[this.language];
-        }
-        this.primaryAction.label = this.literals.modalPrimaryActionLabel;
-        this.secondaryAction.label = this.literals.modalSecondaryActionLabel;
-        this.setTableLiterals();
-    }
-    get literals() {
-        return this._literals || poLookupLiteralsDefault[this.language];
-    }
-    /** Título da modal. */
-    set title(value) {
-        this._title = isTypeof(value, 'string') ? value : this.literals.modalTitle;
-    }
-    get title() {
-        return this._title;
-    }
-    ngOnDestroy() {
-        if (this.filterSubscription) {
-            this.filterSubscription.unsubscribe();
-        }
-        if (this.searchSubscription) {
-            this.searchSubscription.unsubscribe();
-        }
-        if (this.showMoreSubscription) {
-            this.showMoreSubscription.unsubscribe();
-        }
-    }
-    ngOnInit() {
-        this.setAdvancedFilterModalProperties();
-        this.initializeData();
-        this.setTableLiterals();
-    }
-    createDisclaimer() {
-        this.disclaimerGroup.disclaimers = [];
-        this.searchValue = '';
-        for (const [key, value] of Object.entries(this.dynamicFormValue)) {
-            this.addDisclaimer(value, key);
-        }
-        if (!Object.values(this.dynamicFormValue).some(v => v !== null && typeof v !== 'undefined')) {
-            this.initializeData();
-        }
-    }
-    addDisclaimer(value, property) {
-        this.disclaimer = { property: property };
-        this.disclaimer.value = value;
-        this.disclaimerGroup.disclaimers = [...this.disclaimerGroup.disclaimers, this.disclaimer];
-    }
-    onChangeDisclaimerGroup() {
-        if (!this.searchValue) {
-            this.isLoading = true;
-            this.searchValue = '';
-            this.searchFilteredItems();
-        }
-    }
-    search() {
-        this.page = 1;
-        if (this.searchValue) {
-            this.isLoading = true;
-            this.disclaimerGroup.disclaimers = [];
-            this.searchFilteredItems();
-        }
-        else {
-            this.initializeData();
-        }
-    }
-    searchFilteredItems() {
-        this.searchSubscription = this.getFilteredItems(this.searchValue)
-            .pipe(catchError(error => {
-            this.setLookupResponseProperties();
-            return throwError(error);
-        }))
-            .subscribe((data) => this.setLookupResponseProperties(data), () => { });
-    }
-    showMoreEvent() {
-        this.page++;
-        this.isLoading = true;
-        this.showMoreSubscription = this.getFilteredItems(this.searchValue)
-            .pipe(catchError(error => {
-            this.hasNext = false;
-            this.isLoading = false;
-            return throwError(error);
-        }))
-            .subscribe((data) => {
-            this.items = [...this.items, ...data.items];
-            this.hasNext = data.hasNext;
-            this.isLoading = false;
-        }, () => { });
-    }
-    setAdvancedFilterModalProperties() {
-        this.advancedFilterModalTitle = this.literals.modalAdvancedSearchTitle;
-        this.disclaimerGroup = {
-            title: this.literals.modalDisclaimerGroupTitle,
-            disclaimers: []
-        };
-        this.primaryActionAdvancedFilter = {
-            action: () => {
-                this.destroyDynamicForm();
-                this.isAdvancedFilter = false;
-                this.createDisclaimer();
-            },
-            label: this.literals.modalAdvancedSearchPrimaryActionLabel
-        };
-        this.secondaryActionAdvancedFilter = {
-            action: () => {
-                this.destroyDynamicForm();
-                this.isAdvancedFilter = false;
-            },
-            label: this.literals.modalAdvancedSearchSecondaryActionLabel
-        };
-    }
-    getAdvancedFilters(advancedParams) {
-        if (advancedParams && advancedParams.length > 0) {
-            const filters = {};
-            let validatedAdvacendFilters;
-            advancedParams.forEach((filter) => {
-                filters[filter.property] = filter.value instanceof Array ? filter.value.join() : filter.value;
-                validatedAdvacendFilters = Object.assign(Object.assign({}, validatedAdvacendFilters), filters);
-            });
-            return validatedAdvacendFilters;
-        }
-        return undefined;
-    }
-    getFilteredItems(filter) {
-        const filteredParams = this.getFilteredParams(filter);
-        return this.filterService.getFilteredItems(filteredParams);
-    }
-    getFilteredParams(filter) {
-        const { page, pageSize, filterParams, sort } = this;
-        const filteredParams = {};
-        const order = this.getOrderParam(sort);
-        const advancedFilters = this.getAdvancedFilters(this.disclaimerGroup.disclaimers);
-        const params = { filter, page, pageSize, order, filterParams, advancedFilters };
-        for (const key in params) {
-            if (params.hasOwnProperty(key) && params[key] !== undefined) {
-                filteredParams[key] = params[key];
-            }
-        }
-        return filteredParams;
-    }
-    getOrderParam(sort = { type: undefined }) {
-        const { column, type } = sort;
-        if (!column) {
-            return;
-        }
-        if (type === PoTableColumnSortType.Descending) {
-            return `-${column.property}`;
-        }
-        return `${column.property}`;
-    }
-    initializeData() {
-        this.isLoading = true;
-        this.filterSubscription = this.getFilteredItems('').subscribe(data => {
-            this.setLookupResponseProperties(data);
-        });
-    }
-    setLookupResponseProperties(data) {
-        var _a, _b;
-        this.items = (_a = data === null || data === void 0 ? void 0 : data.items) !== null && _a !== void 0 ? _a : [];
-        this.hasNext = (_b = data === null || data === void 0 ? void 0 : data.hasNext) !== null && _b !== void 0 ? _b : false;
-        this.isLoading = false;
-    }
-    setTableLiterals() {
-        this.tableLiterals = {
-            'noColumns': this.literals.modalTableNoColumns,
-            'noData': this.literals.modalTableNoData,
-            'loadingData': this.literals.modalTableLoadingData,
-            'loadMoreData': this.literals.modalTableLoadMoreData
-        };
-    }
-}
-PoLookupModalBaseComponent.decorators = [
-    { type: Directive }
-];
-PoLookupModalBaseComponent.ctorParameters = () => [
-    { type: PoLanguageService }
-];
-PoLookupModalBaseComponent.propDecorators = {
-    poModal: [{ type: ViewChild, args: [PoModalComponent, { static: true },] }],
-    advancedFilters: [{ type: Input, args: ['p-advanced-filters',] }],
-    columns: [{ type: Input, args: ['p-columns',] }],
-    items: [{ type: Input, args: ['p-items',] }],
-    filterService: [{ type: Input, args: ['p-filter-service',] }],
-    filterParams: [{ type: Input, args: ['p-filter-params',] }],
-    infiniteScroll: [{ type: Input, args: ['p-infinite-scroll',] }],
-    model: [{ type: Output, args: ['p-change-model',] }],
-    literals: [{ type: Input, args: ['p-literals',] }],
-    title: [{ type: Input, args: ['p-title',] }]
-};
-__decorate([
-    InputBoolean()
-], PoLookupModalBaseComponent.prototype, "infiniteScroll", void 0);
-
 /**
  * @docsPrivate
  *
  * @docsExtends PoLookupModalBaseComponent
  */
 class PoLookupModalComponent extends PoLookupModalBaseComponent {
-    constructor(componentFactory, poLanguage) {
-        super(poLanguage);
+    constructor(componentFactory, poLanguage, changeDetector) {
+        super(poLanguage, changeDetector);
         this.componentFactory = componentFactory;
         this.keyUpObservable = null;
         this.containerHeight = 375;
@@ -18552,6 +18828,31 @@ class PoLookupModalComponent extends PoLookupModalBaseComponent {
     ngAfterViewInit() {
         this.initializeEventInput();
     }
+    // Seleciona um item na tabela
+    onSelect(item) {
+        if (this.multiple) {
+            this.selecteds = [...this.selecteds, Object.assign({ value: item[this.fieldValue], label: item[this.fieldLabel] }, item)];
+        }
+        else {
+            this.selecteds = [Object.assign({ value: item[this.fieldValue], label: item[this.fieldLabel] }, item)];
+        }
+    }
+    // Remove a seleção de um item na tabela
+    onUnselect(unselectedItem) {
+        this.selecteds = this.selecteds.filter(itemSelected => itemSelected.value !== unselectedItem[this.fieldValue]);
+    }
+    onUnselectFromDisclaimer(removedDisclaimer) {
+        this.poTable.unselectRowItem(item => item[this.fieldValue] === removedDisclaimer.value);
+    }
+    // Seleciona todos os itens visíveis na tabela
+    onAllSelected(items) {
+        this.selecteds = items.map(item => (Object.assign({ value: item[this.fieldValue], label: item[this.fieldLabel] }, item)));
+    }
+    // Remove a seleção de todos os itens visíveis na tabela
+    onAllUnselected(items) {
+        this.poTable.unselectRows();
+        this.selecteds = [];
+    }
     initializeEventInput() {
         this.keyUpObservable = fromEvent(this.inputSearchEl.nativeElement, 'keyup').pipe(filter((e) => this.validateEnterPressed(e)), debounceTime(400));
         this.keyUpObservable.subscribe(() => {
@@ -18574,6 +18875,16 @@ class PoLookupModalComponent extends PoLookupModalBaseComponent {
         this.createDynamicForm();
     }
     setTableHeight() {
+        var _a;
+        if (this.multiple) {
+            if (((_a = this.selecteds) === null || _a === void 0 ? void 0 : _a.length) !== 0) {
+                this.tableHeight = 300;
+            }
+            else {
+                this.tableHeight = 370;
+                this.containerHeight = 375;
+            }
+        }
         // precisa ser 315 por as linhas terem altura de 32px (quando tela menor que 1366px).
         // O retorno padrão é 10 itens fazendo com que gere scroll caso houver paginação, 370 não gerava.
         this.tableHeight = this.infiniteScroll ? 315 : 370;
@@ -18607,14 +18918,16 @@ class PoLookupModalComponent extends PoLookupModalBaseComponent {
 PoLookupModalComponent.decorators = [
     { type: Component, args: [{
                 selector: 'po-lookup-modal',
-                template: "<po-modal\n  p-click-out=\"false\"\n  p-hide-close=\"false\"\n  p-size=\"lg\"\n  [p-primary-action]=\"isAdvancedFilter ? primaryActionAdvancedFilter : primaryAction\"\n  [p-secondary-action]=\"isAdvancedFilter ? secondaryActionAdvancedFilter : secondaryAction\"\n  [p-title]=\"isAdvancedFilter ? advancedFilterModalTitle : title\"\n>\n  <div [hidden]=\"isAdvancedFilter\">\n    <po-field-container class=\"po-lookup-header po-pull-right\" [p-optional]=\"false\">\n      <div class=\"po-lookup-filter-content\">\n        <div class=\"po-field-icon-container-right\">\n          <span #iconLookup class=\"po-icon po-field-icon po-icon-search\" (click)=\"search()\"> </span>\n        </div>\n\n        <input\n          #inpsearch\n          class=\"po-input po-input-icon-right\"\n          name=\"contentSearch\"\n          [(ngModel)]=\"searchValue\"\n          [placeholder]=\"literals.modalPlaceholder\"\n          type=\"text\"\n        />\n      </div>\n\n      <div *ngIf=\"advancedFilters && advancedFilters.length > 0\" class=\"po-lookup-advanced-search\">\n        <span\n          class=\"po-lookup-advanced-search-link\"\n          tabindex=\"0\"\n          (click)=\"onAdvancedFilter()\"\n          (keydown.enter)=\"onAdvancedFilter()\"\n          tabindex=\"0\"\n        >\n          {{ literals.modalAdvancedSearch }}\n        </span>\n      </div>\n    </po-field-container>\n\n    <!-- DISCLAIMER -->\n    <po-disclaimer-group\n      class=\"po-md-12\"\n      *ngIf=\"!!disclaimerGroup\"\n      [p-disclaimers]=\"disclaimerGroup?.disclaimers\"\n      [p-title]=\"disclaimerGroup?.title\"\n      (p-change)=\"onChangeDisclaimerGroup()\"\n    >\n    </po-disclaimer-group>\n\n    <div class=\"po-row po-lookup-container-table\" [style.height.px]=\"containerHeight\">\n      <po-table\n        class=\"po-md-12\"\n        [p-selectable]=\"true\"\n        [p-hide-detail]=\"true\"\n        [p-single-select]=\"true\"\n        [p-sort]=\"true\"\n        [p-columns]=\"columns\"\n        [p-height]=\"tableHeight\"\n        [p-items]=\"items\"\n        [p-literals]=\"tableLiterals\"\n        [p-loading]=\"isLoading\"\n        [p-show-more-disabled]=\"!hasNext\"\n        [p-infinite-scroll]=\"infiniteScroll\"\n        (p-show-more)=\"showMoreEvent()\"\n        (p-sort-by)=\"sortBy($event)\"\n      >\n      </po-table>\n    </div>\n  </div>\n  <div [hidden]=\"!isAdvancedFilter\">\n    <ng-container #container> </ng-container>\n  </div>\n</po-modal>\n"
+                template: "<po-modal\n  p-click-out=\"false\"\n  p-hide-close=\"false\"\n  p-size=\"lg\"\n  [p-primary-action]=\"isAdvancedFilter ? primaryActionAdvancedFilter : primaryAction\"\n  [p-secondary-action]=\"isAdvancedFilter ? secondaryActionAdvancedFilter : secondaryAction\"\n  [p-title]=\"isAdvancedFilter ? advancedFilterModalTitle : title\"\n>\n  <div [hidden]=\"isAdvancedFilter\">\n    <po-field-container class=\"po-lookup-header po-pull-right\" [p-optional]=\"false\">\n      <div class=\"po-lookup-filter-content\">\n        <div class=\"po-field-icon-container-right\">\n          <span #iconLookup class=\"po-icon po-field-icon po-icon-search\" (click)=\"search()\"> </span>\n        </div>\n\n        <input\n          #inpsearch\n          class=\"po-input po-input-icon-right\"\n          name=\"contentSearch\"\n          [(ngModel)]=\"searchValue\"\n          [placeholder]=\"literals.modalPlaceholder\"\n          type=\"text\"\n        />\n      </div>\n\n      <div *ngIf=\"advancedFilters && advancedFilters.length > 0\" class=\"po-lookup-advanced-search\">\n        <span\n          class=\"po-lookup-advanced-search-link\"\n          tabindex=\"0\"\n          (click)=\"onAdvancedFilter()\"\n          (keydown.enter)=\"onAdvancedFilter()\"\n          tabindex=\"0\"\n        >\n          {{ literals.modalAdvancedSearch }}\n        </span>\n      </div>\n    </po-field-container>\n\n    <!-- DISCLAIMER -->\n    <po-disclaimer-group\n      *ngIf=\"!!disclaimerGroup\"\n      class=\"po-md-12\"\n      [p-disclaimers]=\"disclaimerGroup?.disclaimers\"\n      [p-title]=\"disclaimerGroup?.title\"\n      (p-change)=\"onChangeDisclaimerGroup()\"\n    >\n    </po-disclaimer-group>\n\n    <div class=\"po-row po-lookup-container-table\" [style.height.px]=\"containerHeight\">\n      <po-table\n        #poTable\n        class=\"po-md-12\"\n        [p-selectable]=\"true\"\n        [p-hide-detail]=\"true\"\n        [p-single-select]=\"!multiple\"\n        [p-sort]=\"true\"\n        [p-columns]=\"columns\"\n        [p-height]=\"tableHeight\"\n        [p-items]=\"items\"\n        [p-literals]=\"tableLiterals\"\n        [p-loading]=\"isLoading\"\n        [p-show-more-disabled]=\"!hasNext\"\n        [p-infinite-scroll]=\"infiniteScroll\"\n        (p-selected)=\"onSelect($event)\"\n        (p-unselected)=\"onUnselect($event)\"\n        (p-all-selected)=\"onAllSelected($event)\"\n        (p-all-unselected)=\"onAllUnselected($event)\"\n        (p-show-more)=\"showMoreEvent()\"\n        (p-sort-by)=\"sortBy($event)\"\n      >\n      </po-table>\n    </div>\n\n    <!-- DISCLAIMER -->\n    <po-disclaimer-group\n      *ngIf=\"multiple\"\n      class=\"po-md-12\"\n      [p-disclaimers]=\"selecteds\"\n      (p-remove)=\"onUnselectFromDisclaimer($event.removedDisclaimer)\"\n      (p-remove-all)=\"onAllUnselected($event)\"\n    >\n    </po-disclaimer-group>\n  </div>\n  <div [hidden]=\"!isAdvancedFilter\">\n    <ng-container #container> </ng-container>\n  </div>\n</po-modal>\n"
             },] }
 ];
 PoLookupModalComponent.ctorParameters = () => [
     { type: ComponentFactoryResolver },
-    { type: PoLanguageService }
+    { type: PoLanguageService },
+    { type: ChangeDetectorRef }
 ];
 PoLookupModalComponent.propDecorators = {
+    poTable: [{ type: ViewChild, args: [PoTableComponent, { static: true },] }],
     inputSearchEl: [{ type: ViewChild, args: ['inpsearch',] }],
     container: [{ type: ViewChild, args: ['container', { read: ViewContainerRef },] }]
 };
@@ -18639,9 +18952,12 @@ class PoLookupModalService {
      * @param filterParams {any} Valor que será repassado aos métodos do serviço para auxiliar no filtro dos dados.
      * @param title {string} Definição do título da modal.
      * @param literals {PoLookupLiterals} Literais utilizadas no componente.
+     * @param selectedItems {any} Valor que está selecionado que será repassado para o modal para apresentar na tabela.
+     * @param fieldLabel {string} Valor que será utilizado como descrição do campo.
+     * @param fieldValue {string} Valor que será utilizado como valor do campo.
      */
     openModal(params) {
-        const { advancedFilters, service, columns, filterParams, title, literals, infiniteScroll } = params;
+        const { advancedFilters, service, columns, filterParams, title, literals, infiniteScroll, multiple, selectedItems, fieldLabel, fieldValue } = params;
         this.componentRef = this.poComponentInjector.createComponentInApplication(PoLookupModalComponent);
         this.componentRef.instance.advancedFilters = advancedFilters;
         this.componentRef.instance.title = title;
@@ -18653,6 +18969,10 @@ class PoLookupModalService {
             this.selectValue($event);
         });
         this.componentRef.instance.infiniteScroll = infiniteScroll;
+        this.componentRef.instance.multiple = multiple;
+        this.componentRef.instance.selectedItems = selectedItems;
+        this.componentRef.instance.fieldLabel = fieldLabel;
+        this.componentRef.instance.fieldValue = fieldValue;
         this.componentRef.changeDetectorRef.detectChanges();
         this.componentRef.instance.openModal();
     }
@@ -18738,11 +19058,23 @@ const providers$2 = [
  *  <file name="sample-po-lookup-sw-films/sample-po-lookup-sw-films.component.ts"> </file>
  *  <file name="sample-po-lookup-sw-films/sample-po-lookup-sw-films.service.ts"> </file>
  * </example>
+ *
+ * <example name="po-lookup-multiple" title="PO Lookup - Multiple">
+ *  <file name="sample-po-lookup-multiple/sample-po-lookup-multiple.component.html"> </file>
+ *  <file name="sample-po-lookup-multiple/sample-po-lookup-multiple.component.ts"> </file>
+ *  <file name="sample-po-lookup-multiple/sample-po-lookup-multiple.service.ts"> </file>
+ * </example>
  */
 class PoLookupComponent extends PoLookupBaseComponent {
-    constructor(poLookupFilterService, poLookupModalService, injector) {
+    constructor(renderer, poLookupFilterService, poLookupModalService, injector) {
         super(poLookupFilterService, injector);
+        this.renderer = renderer;
         this.poLookupModalService = poLookupModalService;
+        this.initialized = false;
+        this.visibleElement = false;
+        this.disclaimers = [];
+        this.visibleDisclaimers = [];
+        this.isCalculateVisibleItems = true;
     }
     get autocomplete() {
         return this.noAutocomplete ? 'off' : 'on';
@@ -18752,6 +19084,17 @@ class PoLookupComponent extends PoLookupBaseComponent {
         if (this.autoFocus) {
             this.focus();
         }
+        this.initialized = true;
+    }
+    ngDoCheck() {
+        var _a;
+        const inputWidth = (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.nativeElement.offsetWidth;
+        // Permite que os disclaimers sejam calculados na primeira vez que o componente torna-se visível,
+        // evitando com isso, problemas com Tabs ou Divs que iniciem escondidas.
+        if ((inputWidth && !this.visibleElement && this.initialized) || (inputWidth && this.isCalculateVisibleItems)) {
+            this.debounceResize();
+            this.visibleElement = true;
+        }
     }
     ngOnDestroy() {
         if (this.modalSubscription) {
@@ -18760,6 +19103,7 @@ class PoLookupComponent extends PoLookupBaseComponent {
     }
     ngOnInit() {
         super.ngOnInit();
+        this.initializeListeners();
     }
     /**
      * Função que atribui foco ao componente.
@@ -18785,7 +19129,8 @@ class PoLookupComponent extends PoLookupBaseComponent {
     }
     openLookup() {
         if (this.isAllowedOpenModal()) {
-            const { advancedFilters, service, columns, filterParams, literals, infiniteScroll } = this;
+            const { advancedFilters, service, columns, filterParams, literals, infiniteScroll, multiple, fieldLabel, fieldValue } = this;
+            const selectedItems = this.checkSelectedItems();
             this.poLookupModalService.openModal({
                 advancedFilters,
                 service,
@@ -18793,20 +19138,44 @@ class PoLookupComponent extends PoLookupBaseComponent {
                 filterParams,
                 title: this.label,
                 literals,
-                infiniteScroll
+                infiniteScroll,
+                multiple,
+                selectedItems,
+                fieldLabel,
+                fieldValue
             });
             if (!this.modalSubscription) {
-                this.modalSubscription = this.poLookupModalService.selectValueEvent.subscribe(element => {
-                    this.selectModel(element);
+                this.modalSubscription = this.poLookupModalService.selectValueEvent.subscribe(selectedOptions => {
+                    if (selectedOptions.length > 1 || this.disclaimers.length) {
+                        this.setDisclaimers(selectedOptions);
+                        this.updateVisibleItems();
+                    }
+                    this.selectModel(selectedOptions);
                 });
             }
         }
     }
+    checkSelectedItems() {
+        var _a;
+        if (this.multiple) {
+            if (!this.disclaimers.length && ((_a = this.valueToModel) === null || _a === void 0 ? void 0 : _a.length)) {
+                return [Object.assign({ value: this.valueToModel[0], label: this.oldValue }, this.selectedOptions[0])];
+            }
+            return this.disclaimers;
+        }
+        else {
+            return this.valueToModel;
+        }
+    }
+    setDisclaimers(selectedOptions) {
+        this.disclaimers = selectedOptions.map(selectedOption => (Object.assign({ value: selectedOption[this.fieldValue], label: selectedOption[this.fieldLabel] }, selectedOption)));
+        this.visibleDisclaimers = [...this.disclaimers];
+    }
     setViewValue(value, object) {
-        if (this.fieldFormat) {
+        if (this.inputEl && this.fieldFormat) {
             this.setInputValueWipoieldFormat(object);
         }
-        else {
+        else if (this.inputEl) {
             this.inputEl.nativeElement.value = this.valueToModel || this.valueToModel === 0 ? value : '';
         }
     }
@@ -18814,13 +19183,81 @@ class PoLookupComponent extends PoLookupBaseComponent {
         return this.inputEl.nativeElement.value;
     }
     searchEvent() {
-        var _a;
+        var _a, _b;
         (_a = this.onTouched) === null || _a === void 0 ? void 0 : _a.call(this);
         const value = this.getViewValue();
-        if (this.oldValue.toString() !== value) {
+        if (((_b = this.oldValue) === null || _b === void 0 ? void 0 : _b.toString()) !== value) {
             this.searchById(value);
         }
     }
+    closeDisclaimer(value) {
+        this.disclaimers = this.disclaimers.filter(disclaimer => disclaimer.value !== value);
+        this.valueToModel = this.valueToModel.filter(model => model !== value);
+        this.updateVisibleItems();
+        this.callOnChange(this.valueToModel.length ? this.valueToModel : undefined);
+    }
+    updateVisibleItems() {
+        if (this.disclaimers && this.disclaimers.length > 0) {
+            this.visibleDisclaimers = [].concat(this.disclaimers);
+        }
+        this.debounceResize();
+        if (!this.inputEl.nativeElement.offsetWidth) {
+            this.isCalculateVisibleItems = true;
+        }
+    }
+    debounceResize() {
+        if (!this.autoHeight) {
+            clearTimeout(this.timeoutResize);
+            this.timeoutResize = setTimeout(() => {
+                this.calculateVisibleItems();
+            }, 200);
+        }
+    }
+    getInputWidth() {
+        return this.inputEl.nativeElement.offsetWidth - 40;
+    }
+    getDisclaimersWidth() {
+        const disclaimers = this.inputEl.nativeElement.querySelectorAll('po-disclaimer');
+        return Array.from(disclaimers).map(disclaimer => disclaimer['offsetWidth']);
+    }
+    calculateVisibleItems() {
+        const disclaimersWidth = this.getDisclaimersWidth();
+        const inputWidth = this.getInputWidth();
+        const extraDisclaimerSize = 38;
+        const disclaimersVisible = disclaimersWidth[0];
+        const newDisclaimers = [];
+        const disclaimers = this.disclaimers;
+        if (inputWidth > 0) {
+            let sum = 0;
+            let i = 0;
+            for (i = 0; i < disclaimers.length; i++) {
+                sum += disclaimersWidth[i];
+                newDisclaimers.push(disclaimers[i]);
+                if (sum > inputWidth) {
+                    sum -= disclaimersWidth[i];
+                    this.isCalculateVisibleItems = false;
+                    break;
+                }
+            }
+            if (disclaimersVisible || !disclaimers.length) {
+                if (i === disclaimers.length) {
+                    this.isCalculateVisibleItems = false;
+                    return;
+                }
+                if (sum + extraDisclaimerSize > inputWidth) {
+                    newDisclaimers.splice(-2, 2);
+                    const label = '+' + (disclaimers.length + 1 - i).toString();
+                    newDisclaimers.push({ value: '', label: label });
+                }
+                else {
+                    newDisclaimers.splice(-1, 1);
+                    const label = '+' + (disclaimers.length - i).toString();
+                    newDisclaimers.push({ value: '', label: label });
+                }
+            }
+        }
+        this.visibleDisclaimers = [...newDisclaimers];
+    }
     isAllowedOpenModal() {
         if (!this.service) {
             console.warn('No service informed');
@@ -18858,21 +19295,27 @@ class PoLookupComponent extends PoLookupBaseComponent {
         this.oldValue = isEmpty ? '' : fieldFormated;
         this.inputEl.nativeElement.value = isEmpty ? '' : fieldFormated;
     }
+    initializeListeners() {
+        this.resizeListener = this.renderer.listen('window', 'resize', () => {
+            this.updateVisibleItems();
+        });
+    }
 }
 PoLookupComponent.decorators = [
     { type: 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\" *ngIf=\"!disclaimers.length; else disclaimersTemplate\">\n    <input\n      #inp\n      class=\"po-input\"\n      type=\"text\"\n      [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n      [autocomplete]=\"autocomplete\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      (blur)=\"searchEvent()\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean *ngIf=\"clean && !disabled\" [p-element-ref]=\"inputEl\" (p-change-event)=\"cleanModel()\"> </po-clean>\n\n      <span\n        #iconLookup\n        class=\"po-icon po-field-icon po-icon-search\"\n        tabindex=\"-1\"\n        [class.po-field-icon]=\"!disabled\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        (click)=\"openLookup()\"\n        (focus)=\"inp.focus()\"\n      >\n      </span>\n    </div>\n  </div>\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n\n<ng-template #disclaimersTemplate>\n  <div class=\"po-field-container-content\">\n    <div\n      #inp\n      [tabindex]=\"disabled ? -1 : 0\"\n      class=\"po-input po-input-icon-right po-lookup-input\"\n      [class.po-lookup-input-auto]=\"autoHeight\"\n      [class.po-lookup-input-static]=\"!autoHeight\"\n      [class.po-lookup-input-disabled]=\"disabled\"\n    >\n      <span *ngIf=\"placeholder && !disclaimers?.length\" class=\"po-lookup-input-placeholder\">\n        {{ placeholder }}\n      </span>\n\n      <po-disclaimer\n        *ngFor=\"let disclaimer of visibleDisclaimers\"\n        class=\"po-lookup-input-disclaimer\"\n        [p-label]=\"disclaimer.label\"\n        [p-value]=\"disclaimer.value\"\n        [p-hide-close]=\"disclaimer.value === '' || disabled\"\n        [class.po-clickable]=\"disclaimer.value === '' && !disabled\"\n        (p-close-action)=\"closeDisclaimer(disclaimer.value)\"\n      >\n      </po-disclaimer>\n    </div>\n\n    <div class=\"po-field-icon-container-right\">\n      <span\n        #iconLookup\n        class=\"po-icon po-field-icon po-icon-search\"\n        tabindex=\"-1\"\n        [class.po-field-icon]=\"!disabled\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        (click)=\"openLookup()\"\n        (focus)=\"inp.focus()\"\n      >\n      </span>\n    </div>\n  </div>\n</ng-template>\n",
                 providers: providers$2
             },] }
 ];
 PoLookupComponent.ctorParameters = () => [
+    { type: Renderer2 },
     { type: PoLookupFilterService },
     { type: PoLookupModalService },
     { type: Injector }
 ];
 PoLookupComponent.propDecorators = {
-    inputEl: [{ type: ViewChild, args: ['inp', { read: ElementRef, static: true },] }]
+    inputEl: [{ type: ViewChild, args: ['inp', { read: ElementRef, static: false },] }]
 };
 
 /**
@@ -21486,8 +21929,8 @@ PoNumberComponent.propDecorators = {
  */
 class PoPasswordComponent extends PoInputGeneric {
     /* istanbul ignore next */
-    constructor(el) {
-        super(el);
+    constructor(el, cd) {
+        super(el, cd);
         this.type = 'password';
         this.visiblePassword = false;
         this._hidePasswordPeek = false;
@@ -21526,6 +21969,7 @@ PoPasswordComponent.decorators = [
     { type: Component, args: [{
                 selector: 'po-password',
                 template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <div class=\"po-field-icon-container-left\">\n      <span class=\"po-icon po-field-icon po-icon-lock\" [class.po-field-icon-disabled]=\"disabled\"> </span>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-input-icon-left\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-double-icon-right]=\"clean && inp.value && !hidePasswordPeek\"\n      [class.po-input-icon-right]=\"clean || !hidePasswordPeek\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"disabled ? 'password' : type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean *ngIf=\"clean && !disabled && !readonly\" [p-element-ref]=\"inputEl\" (p-change-event)=\"clear($event)\">\n      </po-clean>\n\n      <span\n        *ngIf=\"!hidePasswordPeek && !disabled\"\n        class=\"po-icon po-field-icon\"\n        [ngClass]=\"visiblePassword ? 'po-icon-eye' : 'po-icon-eye-off po-field-icon-disabled'\"\n        (click)=\"showPassword()\"\n      >\n      </span>\n    </div>\n  </div>\n\n  <po-field-container-bottom [p-error-pattern]=\"getErrorPattern()\"> </po-field-container-bottom>\n</po-field-container>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -21541,7 +21985,8 @@ PoPasswordComponent.decorators = [
             },] }
 ];
 PoPasswordComponent.ctorParameters = () => [
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
 ];
 PoPasswordComponent.propDecorators = {
     hidePasswordPeek: [{ type: Input, args: ['p-hide-password-peek',] }]
@@ -22367,37 +22812,8 @@ PoSelectComponent.propDecorators = {
     onKeydown: [{ type: HostListener, args: ['keydown', ['$event'],] }]
 };
 
-/**
- * @usedBy PoSwitchComponent
- *
- * @description
- *
- * Enum para posicionar o label do valor do po-switch.
- */
-var PoSwitchLabelPosition;
-(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";
-})(PoSwitchLabelPosition || (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.
- */
-class PoSwitchBaseComponent {
-    constructor(changeDetector) {
-        this.changeDetector = changeDetector;
+class PoFieldModel {
+    constructor() {
         /**
          * @optional
          *
@@ -22415,85 +22831,19 @@ class PoSwitchBaseComponent {
          *
          * @description
          *
-         * Evento disparado ao alterar valor do campo.
-         */
-        this.change = new 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 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 = PoSwitchLabelPosition.Right;
-    }
-    set setLabelOn(label) {
-        this.labelOn = label || 'true';
-    }
-    set setLabelOff(label) {
-        this.labelOff = label || 'false';
-    }
-    set setLabelPosition(position) {
-        this.labelPosition = position in PoSwitchLabelPosition ? parseInt(position, 10) : PoSwitchLabelPosition.Right;
-    }
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Indica se o campo será desabilitado.
-     *
-     * @default `false`
-     */
-    set disabled(disabled) {
-        this._disabled = convertToBoolean(disabled);
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    changeValue(value) {
-        if (this.switchValue !== value) {
-            this.switchValue = value;
-            if (this.propagateChange) {
-                this.propagateChange(value);
-            }
-            else {
-                this.ngModelChange.emit(value);
-            }
-            this.change.emit(this.switchValue);
-        }
-    }
-    eventClick() {
-        if (!this.disabled) {
-            this.changeValue(!this.switchValue);
-        }
+        this.change = new EventEmitter();
     }
     // Função implementada do ControlValueAccessor
     // Usada para interceptar os estados de habilitado via forms api
@@ -22507,36 +22857,62 @@ class PoSwitchBaseComponent {
         this.onTouched = fn;
     }
     writeValue(value) {
-        if (value !== this.switchValue) {
-            this.switchValue = !!value;
-            this.changeDetector.markForCheck();
+        this.onWriteValue(value);
+    }
+    updateModel(value) {
+        if (this.propagateChange) {
+            this.propagateChange(value);
         }
     }
 }
-PoSwitchBaseComponent.decorators = [
+PoFieldModel.decorators = [
     { type: Directive }
 ];
-PoSwitchBaseComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-PoSwitchBaseComponent.propDecorators = {
-    name: [{ type: Input, args: ['name',] }],
-    autoFocus: [{ type: Input, args: ['p-auto-focus',] }],
+PoFieldModel.ctorParameters = () => [];
+PoFieldModel.propDecorators = {
     label: [{ type: Input, args: ['p-label',] }],
+    name: [{ type: Input, args: ['name',] }],
     help: [{ type: Input, args: ['p-help',] }],
-    change: [{ type: Output, args: ['p-change',] }],
-    ngModelChange: [{ type: Output, args: ['ngModelChange',] }],
-    setLabelOn: [{ type: Input, args: ['p-label-on',] }],
-    setLabelOff: [{ type: Input, args: ['p-label-off',] }],
-    setLabelPosition: [{ type: Input, args: ['p-label-position',] }],
-    disabled: [{ type: Input, args: ['p-disabled',] }]
+    autoFocus: [{ type: Input, args: ['p-auto-focus',] }],
+    disabled: [{ type: Input, args: ['p-disabled',] }],
+    change: [{ type: 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.
+ */
+var PoSwitchLabelPosition;
+(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";
+})(PoSwitchLabelPosition || (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
  *
@@ -22562,9 +22938,51 @@ __decorate([
  *   <file name="sample-po-switch-order-reactive-form/sample-po-switch-order-reactive-form.component.ts"> </file>
  * </example>
  */
-class PoSwitchComponent extends PoSwitchBaseComponent {
+class PoSwitchComponent extends PoFieldModel {
     constructor(changeDetector) {
-        super(changeDetector);
+        super();
+        this.changeDetector = changeDetector;
+        this.value = false;
+        this._labelOff = 'false';
+        this._labelOn = 'true';
+        this._labelPosition = PoSwitchLabelPosition.Right;
+    }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Posição de exibição do rótulo.
+     *
+     * > Por padrão exibe à direita.
+     */
+    set labelPosition(position) {
+        this._labelPosition = position in PoSwitchLabelPosition ? parseInt(position, 10) : PoSwitchLabelPosition.Right;
+    }
+    get labelPosition() {
+        return this._labelPosition;
+    }
+    /**
+     * Texto exibido quando o valor do componente for `false`.
+     *
+     * @default `false`
+     */
+    set labelOff(label) {
+        this._labelOff = label || 'false';
+    }
+    get labelOff() {
+        return this._labelOff;
+    }
+    /**
+     * Texto exibido quando o valor do componente for `true`.
+     *
+     * @default `true`
+     */
+    set labelOn(label) {
+        this._labelOn = label || 'true';
+    }
+    get labelOn() {
+        return this._labelOn;
     }
     ngAfterViewInit() {
         if (this.autoFocus) {
@@ -22618,16 +23036,34 @@ class PoSwitchComponent extends PoSwitchBaseComponent {
         }
     }
     onKeyDown(event) {
-        if (event.which === 32 || event.keyCode === 32) {
+        if (event.which === PoKeyCodeEnum.space || event.keyCode === PoKeyCodeEnum.space) {
             event.preventDefault();
             this.eventClick();
         }
     }
+    changeValue(value) {
+        if (this.value !== value) {
+            this.value = value;
+            this.updateModel(value);
+            this.change.emit(this.value);
+        }
+    }
+    eventClick() {
+        if (!this.disabled) {
+            this.changeValue(!this.value);
+        }
+    }
+    onWriteValue(value) {
+        if (value !== this.value) {
+            this.value = !!value;
+            this.changeDetector.markForCheck();
+        }
+    }
 }
 PoSwitchComponent.decorators = [
     { type: 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: ChangeDetectionStrategy.OnPush,
                 providers: [
                     {
@@ -22642,7 +23078,10 @@ PoSwitchComponent.ctorParameters = () => [
     { type: ChangeDetectorRef }
 ];
 PoSwitchComponent.propDecorators = {
-    switchContainer: [{ type: ViewChild, args: ['switchContainer', { static: true },] }]
+    switchContainer: [{ type: ViewChild, args: ['switchContainer', { static: true },] }],
+    labelPosition: [{ type: Input, args: ['p-label-position',] }],
+    labelOff: [{ type: Input, args: ['p-label-off',] }],
+    labelOn: [{ type: Input, args: ['p-label-on',] }]
 };
 
 /**
@@ -24610,8 +25049,8 @@ PoUploadFileRestrictionsComponent.propDecorators = {
  */
 class PoUrlComponent extends PoInputGeneric {
     /* istanbul ignore next */
-    constructor(el) {
-        super(el);
+    constructor(el, cd) {
+        super(el, cd);
         this.icon = 'po-icon-world';
         this.type = 'url';
         this.pattern = '^((https|http):\\/\\/)?' + // protocol
@@ -24646,6 +25085,7 @@ PoUrlComponent.decorators = [
     { type: Component, args: [{
                 selector: 'po-url',
                 template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-right]=\"clean\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean *ngIf=\"clean && !disabled && !readonly\" [p-element-ref]=\"inputEl\" (p-change-event)=\"clear($event)\">\n      </po-clean>\n    </div>\n  </div>\n\n  <po-field-container-bottom [p-error-pattern]=\"getErrorPattern()\"> </po-field-container-bottom>\n</po-field-container>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -24661,7 +25101,8 @@ PoUrlComponent.decorators = [
             },] }
 ];
 PoUrlComponent.ctorParameters = () => [
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
 ];
 
 /**
@@ -25345,7 +25786,7 @@ class PoDynamicFormFieldsBaseComponent {
             return 'switch';
         }
         else if (this.compareTo(type, PoDynamicFieldType.Date) || this.compareTo(type, PoDynamicFieldType.DateTime)) {
-            return 'datepicker';
+            return field.range ? 'datepickerrange' : 'datepicker';
         }
         else if (this.compareTo(type, PoDynamicFieldType.Time)) {
             field.mask = field.mask || '99:99';
@@ -25544,7 +25985,7 @@ class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseComponent {
 PoDynamicFormFieldsComponent.decorators = [
     { type: 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: ControlContainer, useExisting: NgForm }],
                 providers: [PoDynamicFormValidationService]
             },] }
@@ -30408,7 +30849,7 @@ class PoPageHeaderComponent extends PoPageHeaderBaseComponent {
 PoPageHeaderComponent.decorators = [
     { type: 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"
             },] }
 ];
 
@@ -31724,7 +32165,7 @@ class PoStepperCircleComponent {
 PoStepperCircleComponent.decorators = [
     { type: 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 = {
@@ -31911,6 +32352,12 @@ PoStepperBaseComponent.propDecorators = {
  *  <file name="sample-po-stepper-sales/sample-po-stepper-sales.component.html"> </file>
  *  <file name="sample-po-stepper-sales/sample-po-stepper-sales.component.ts"> </file>
  * </example>
+ *
+ * <example name="po-stepper-active" title="PO Stepper - Active">
+ *  <file name="sample-po-stepper-active/sample-po-stepper-active.component.html"> </file>
+ *  <file name="sample-po-stepper-active/sample-po-stepper-active.component.ts"> </file>
+ *  <file name="sample-po-stepper-active/sample-po-stepper-active.service.ts"> </file>
+ * </example>
  */
 class PoStepperComponent extends PoStepperBaseComponent {
     constructor(changeDetector) {
@@ -31945,11 +32392,7 @@ class PoStepperComponent extends PoStepperBaseComponent {
         }
         const stepsArray = this.getPoSteps();
         const step = stepsArray[index];
-        const isDisabledStep = step.status === PoStepperStatus.Disabled;
-        const isErrorStep = step.status === PoStepperStatus.Error;
-        if (!isDisabledStep || isErrorStep) {
-            this.changeStep(index, step);
-        }
+        this.changeStep(index, step);
     }
     /**
      * Ativa o primeiro *step*.
@@ -32011,8 +32454,12 @@ class PoStepperComponent extends PoStepperBaseComponent {
     }
     onStepActive(step) {
         this.currentActiveStep = step;
-        this.previousActiveStep = this.poSteps.find(stepChild => stepChild.status === PoStepperStatus.Active && stepChild.id !== step.id);
-        this.setPreviousStepAsDone();
+        const { stepIndex } = this.getStepsAndIndex(this.currentActiveStep);
+        this.poSteps.forEach((stepChild, i) => {
+            if (i < stepIndex) {
+                stepChild.status = PoStepperStatus.Done;
+            }
+        });
     }
     trackByFn(step) {
         return step.id;
@@ -32085,16 +32532,11 @@ class PoStepperComponent extends PoStepperBaseComponent {
             steps[nextIndex].status = PoStepperStatus.Default;
         }
     }
-    setPreviousStepAsDone() {
-        if (this.previousActiveStep) {
-            this.previousActiveStep.status = PoStepperStatus.Done;
-        }
-    }
 }
 PoStepperComponent.decorators = [
     { type: 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 = () => [
@@ -32193,11 +32635,11 @@ class PoStepperStepComponent {
     getStatusClass(status) {
         switch (status) {
             case PoStepperStatus.Active:
-                return 'po-stepper-step-active';
+                return 'po-stepper-step-default';
             case PoStepperStatus.Disabled:
                 return 'po-stepper-step-disabled';
             case PoStepperStatus.Done:
-                return 'po-stepper-step-done';
+                return 'po-stepper-step-default';
             case PoStepperStatus.Error:
                 return 'po-stepper-step-error';
             default:
@@ -32218,12 +32660,13 @@ class PoStepperStepComponent {
 PoStepperStepComponent.decorators = [
     { type: 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: Input, args: ['p-circle-content',] }],
     orientation: [{ type: Input, args: ['p-orientation',] }],
+    nextStatus: [{ type: Input, args: ['p-next-status',] }],
     activated: [{ type: Output, args: ['p-activated',] }],
     click: [{ type: Output, args: ['p-click',] }],
     enter: [{ type: Output, args: ['p-enter',] }],
@@ -35016,5 +35459,5 @@ function initializeLanguageDefault(config, languageService) {
  * Generated bundle index. Do not edit.
  */
 
-export { I18N_CONFIG, InputBoolean, InputRequired, PO_CONTROL_POSITIONS, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonModule, PoCalendarComponent, PoCalendarMode, PoCalendarModule, PoChartComponent, PoChartModule, PoChartType, PoCheckboxComponent, PoCheckboxGroupComponent, PoCheckboxGroupModule, PoCleanComponent, PoColorPaletteModule, PoColorPaletteService, PoComboComponent, PoComboFilterMode, PoComboOptionTemplateDirective, PoComponentInjectorModule, PoComponentInjectorService, PoComponentsModule, PoContainerComponent, PoContainerModule, PoControlPositionModule, PoDateService, PoDateTimeModule, PoDatepickerComponent, PoDatepickerIsoFormat, PoDatepickerModule, PoDatepickerRangeComponent, PoDecimalComponent, PoDialogComponent, PoDialogModule, PoDialogService, PoDialogType, PoDirectivesModule, PoDisclaimerComponent, PoDisclaimerGroupComponent, PoDisclaimerGroupModule, PoDisclaimerModule, PoDividerComponent, PoDividerModule, PoDropdownComponent, PoDropdownModule, PoDynamicFieldType, PoDynamicFormComponent, PoDynamicModule, PoDynamicViewComponent, PoEmailComponent, PoFieldModule, PoGaugeComponent, PoGaugeModule, PoGridComponent, PoGridModule, PoGuardsModule, PoHttpInterceptorModule, PoHttpInterceptorService, PoHttpRequestInterceptorService, PoHttpRequestModule, PoI18nModule, PoI18nPipe, PoI18nService, PoIconComponent, PoIconModule, PoInfoComponent, PoInfoModule, PoInfoOrientation, PoInputComponent, PoInterceptorsModule, PoLanguageModule, PoLanguageService, PoListViewComponent, PoListViewContentTemplateDirective, PoListViewDetailTemplateDirective, PoListViewModule, PoLoadingComponent, PoLoadingIconComponent, PoLoadingModule, PoLoadingOverlayComponent, PoLoginComponent, PoLookupComponent, PoLookupModalComponent, PoMenuComponent, PoMenuGlobalService, PoMenuHeaderTemplateDirective, PoMenuModule, PoMenuPanelComponent, PoMenuPanelModule, PoModalComponent, PoModalModule, PoModule, PoMultiselectComponent, PoMultiselectFilterMode, PoNavbarComponent, PoNavbarModule, PoNotificationModule, PoNotificationService, PoNumberComponent, PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent, PoPageModule, PoPageSlideComponent, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressStatus, PoRadioGroupComponent, PoRichTextComponent, PoSelectComponent, PoSelectOptionTemplateDirective, PoServicesModule, PoSlideComponent, PoSlideContentTemplateDirective, PoSlideModule, PoStepComponent, PoStepperComponent, PoStepperModule, PoStepperOrientation, PoStepperStatus, PoSwitchComponent, PoSwitchLabelPosition, PoTabComponent, PoTableCellTemplateDirective, PoTableColumnSortType, PoTableColumnTemplateDirective, PoTableComponent, PoTableModule, PoTableRowTemplateArrowDirection, PoTableRowTemplateDirective, PoTabsComponent, PoTabsModule, PoTagComponent, PoTagModule, PoTagOrientation, PoTagType, PoTextareaComponent, PoTimeModule, PoTimePipe, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, returnPoI18nService, ɵ0, PoAccordionBaseComponent as ɵa, PoAccordionService as ɵb, PoChartMathsService as ɵba, PoChartAxisComponent as ɵbb, PoChartAxisPathComponent as ɵbc, PoChartAxisLabelComponent as ɵbd, PoChartBaseComponent as ɵbe, PoColorService as ɵbf, PoChartSvgContainerService as ɵbg, PoChartContainerComponent as ɵbh, PoChartGaugeComponent as ɵbi, PoChartCircular as ɵbj, PoChartDynamicTypeComponent as ɵbk, PoChartGaugeTextContentComponent as ɵbl, PoChartLegendComponent as ɵbm, PoChartLineComponent as ɵbn, PoChartPathComponent as ɵbo, PoChartPieComponent as ɵbp, PoChartCircularComponent as ɵbq, PoChartDonutComponent as ɵbr, PoChartSeriesPointComponent as ɵbs, PoChartBarComponent as ɵbt, PoChartBarBaseComponent as ɵbu, PoChartColumnComponent as ɵbv, PoChartBarPathComponent as ɵbw, PoChartCircularPathComponent as ɵbx, PoChartCircularLabelComponent as ɵby, PoChartTooltipDirective as ɵbz, PoAccordionItemBodyComponent as ɵc, PoResizeObserverDirective as ɵca, PoContainerBaseComponent as ɵcb, PoDisclaimerBaseComponent as ɵcc, PoDisclaimerGroupBaseComponent as ɵcd, PoDisclaimerRemoveComponent as ɵce, PoDividerBaseComponent as ɵcf, PoPopupBaseComponent as ɵcg, PoDropdownBaseComponent as ɵch, PoInfoBaseComponent as ɵci, PoCleanModule as ɵcj, PoCleanBaseComponent as ɵck, PoFieldContainerModule as ɵcl, PoFieldContainerBottomComponent as ɵcm, PoFieldContainerComponent as ɵcn, PoCheckboxGroupBaseComponent as ɵco, PoDatepickerBaseComponent as ɵcp, PoModalBaseComponent as ɵcq, PoProgressBaseComponent as ɵcr, PoProgressBarComponent as ɵcs, PoI18nBasePipe as ɵct, PoDialogBaseService as ɵcu, PoToasterComponent as ɵcv, PoToasterBaseComponent as ɵcw, PoPopoverBaseComponent as ɵcx, PoTableBaseComponent as ɵcy, PoTableService as ɵcz, PoAccordionItemHeaderComponent as ɵd, PoTableColumnIconComponent as ɵda, PoTableColumnLabelComponent as ɵdb, PoTableColumnLinkComponent as ɵdc, PoTableColumnManagerComponent as ɵdd, PoTableDetailComponent as ɵde, PoTableIconComponent as ɵdf, PoTableShowSubtitleComponent as ɵdg, PoTableSubtitleCircleComponent as ɵdh, PoTableSubtitleFooterComponent as ɵdi, PoCheckboxBaseComponent as ɵdj, PoComboBaseComponent as ɵdk, PoComboFilterService as ɵdl, PoInputBaseComponent as ɵdm, PoDatepickerRangeBaseComponent as ɵdn, PoInputGeneric as ɵdo, PoLookupBaseComponent as ɵdp, PoLookupFilterService as ɵdq, PoLookupModalService as ɵdr, PoLookupModalBaseComponent as ɵds, PoMultiselectBaseComponent as ɵdt, PoMultiselectFilterService as ɵdu, PoNumberBaseComponent as ɵdv, PoRadioGroupBaseComponent as ɵdw, PoRichTextBaseComponent as ɵdx, PoRichTextService as ɵdy, PoRichTextBodyComponent as ɵdz, PoAvatarBaseComponent as ɵe, PoSelectBaseComponent as ɵea, PoSwitchBaseComponent as ɵeb, PoTextareaBaseComponent as ɵec, PoUploadBaseComponent as ɵed, PoUploadService as ɵee, PoUploadBaseService as ɵef, PoUploadDragDropComponent as ɵeg, PoUploadDragDropAreaComponent as ɵeh, PoNotificationBaseService as ɵei, PoMultiselectDropdownComponent as ɵej, PoMultiselectItemComponent as ɵek, PoMultiselectSearchComponent as ɵel, PoRichTextImageModalComponent as ɵem, PoRichTextLinkModalComponent as ɵen, PoRichTextToolbarComponent as ɵeo, PoUploadDragDropDirective as ɵep, PoUploadDragDropAreaOverlayComponent as ɵeq, PoUploadFileRestrictionsComponent as ɵer, PoTagBaseComponent as ɵes, PoDynamicFormBaseComponent as ɵet, PoDynamicFormLoadService as ɵeu, PoDynamicFormOperation as ɵev, PoDynamicFormValidationService as ɵew, PoDynamicFormFieldsComponent as ɵex, PoDynamicFormFieldsBaseComponent as ɵey, PoDynamicViewBaseComponent as ɵez, PoBreadcrumbBaseComponent as ɵf, PoDynamicViewService as ɵfa, PoGaugeBaseComponent as ɵfb, PoGaugeTitleComponent as ɵfc, PoGaugeLegendComponent as ɵfd, PoGaugeSvgComponent as ɵfe, PoGaugePathComponent as ɵff, PoGaugeDescriptionComponent as ɵfg, PoGaugePointerComponent as ɵfh, PoGridCellActionComponent as ɵfi, PoGridCellComponent as ɵfj, PoGridHeadComponent as ɵfk, PoListViewBaseComponent as ɵfl, PoBadgeModule as ɵfm, PoBadgeComponent as ɵfn, PoBadgeBaseComponent as ɵfo, PoMenuBaseComponent as ɵfp, PoMenuService as ɵfq, PoMenuItemsService as ɵfr, PoMenuFilterComponent as ɵfs, PoMenuItemComponent as ɵft, PoMenuPanelBaseComponent as ɵfu, PoMenuPanelItemsService as ɵfv, PoMenuPanelItemComponent as ɵfw, PoNavbarActionsModule as ɵfx, PoNavbarActionComponent as ɵfy, PoNavbarActionPopupComponent as ɵfz, PoBreadcrumbDropdownComponent as ɵg, PoNavbarActionsComponent as ɵga, PoNavbarItemsModule as ɵgb, PoNavbarItemComponent as ɵgc, PoNavbarItemsComponent as ɵgd, PoNavbarItemNavigationModule as ɵge, PoNavbarItemNavigationComponent as ɵgf, PoNavbarItemNavigationIconComponent as ɵgg, PoNavbarBaseComponent as ɵgh, PoNavbarLogoComponent as ɵgi, PoPageComponent as ɵgj, PoPageBaseComponent as ɵgk, PoPageContentComponent as ɵgl, PoPageContentBaseComponent as ɵgm, PoPageDefaultBaseComponent as ɵgn, PoPageDetailBaseComponent as ɵgo, PoPageEditBaseComponent as ɵgp, PoPageHeaderComponent as ɵgq, PoPageHeaderBaseComponent as ɵgr, PoPageListBaseComponent as ɵgs, PoPageSlideBaseComponent as ɵgt, PoSlideCirclesComponent as ɵgu, PoSlideBaseComponent as ɵgv, PoSlideItemComponent as ɵgw, PoSlideControlComponent as ɵgx, PoStepperCircleComponent as ɵgy, PoStepperBaseComponent as ɵgz, PoBreadcrumbFavoriteComponent as ɵh, PoStepperLabelComponent as ɵha, PoStepperStepComponent as ɵhb, PoTabButtonComponent as ɵhc, PoTabBaseComponent as ɵhd, PoTabDropdownComponent as ɵhe, PoTabsBaseComponent as ɵhf, PoToolbarActionsComponent as ɵhg, PoToolbarBaseComponent as ɵhh, PoToolbarNotificationComponent as ɵhi, PoToolbarProfileComponent as ɵhj, PoTreeViewBaseComponent as ɵhk, PoTreeViewService as ɵhl, PoTreeViewItemComponent as ɵhm, PoTreeViewItemHeaderComponent as ɵhn, PoWidgetBaseComponent as ɵho, PoHttpInterceptorDetailComponent as ɵhp, PoHttpInterceptorBaseService as ɵhq, PoHttpRequesControltService as ɵhr, PoI18nBaseService as ɵhs, PoBreadcrumbFavoriteService as ɵi, PoBreadcrumbItemComponent as ɵj, PoLoadingBaseComponent as ɵk, PoLoadingOverlayBaseComponent as ɵl, PoButtonBaseComponent as ɵm, InputBoolean as ɵn, PoTooltipBaseDirective as ɵo, PoTooltipControlPositionService as ɵp, PoControlPositionService as ɵq, PoButtonGroupBaseComponent as ɵr, PoCalendarBaseComponent as ɵs, PoDateService as ɵt, PoCalendarHeaderComponent as ɵu, PoCalendarWrapperComponent as ɵv, PoCalendarService as ɵw, PoCalendarLangService as ɵx, PoChartAreaComponent as ɵy, PoChartLineBaseComponent as ɵz };
+export { I18N_CONFIG, InputBoolean, InputRequired, PO_CONTROL_POSITIONS, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonModule, PoCalendarComponent, PoCalendarMode, PoCalendarModule, PoChartComponent, PoChartModule, PoChartType, PoCheckboxComponent, PoCheckboxGroupComponent, PoCheckboxGroupModule, PoCleanComponent, PoColorPaletteModule, PoColorPaletteService, PoComboComponent, PoComboFilterMode, PoComboOptionTemplateDirective, PoComponentInjectorModule, PoComponentInjectorService, PoComponentsModule, PoContainerComponent, PoContainerModule, PoControlPositionModule, PoDateService, PoDateTimeModule, PoDatepickerComponent, PoDatepickerIsoFormat, PoDatepickerModule, PoDatepickerRangeComponent, PoDecimalComponent, PoDialogComponent, PoDialogModule, PoDialogService, PoDialogType, PoDirectivesModule, PoDisclaimerComponent, PoDisclaimerGroupComponent, PoDisclaimerGroupModule, PoDisclaimerModule, PoDividerComponent, PoDividerModule, PoDropdownComponent, PoDropdownModule, PoDynamicFieldType, PoDynamicFormComponent, PoDynamicModule, PoDynamicViewComponent, PoEmailComponent, PoFieldModule, PoGaugeComponent, PoGaugeModule, PoGridComponent, PoGridModule, PoGuardsModule, PoHttpInterceptorModule, PoHttpInterceptorService, PoHttpRequestInterceptorService, PoHttpRequestModule, PoI18nModule, PoI18nPipe, PoI18nService, PoIconComponent, PoIconModule, PoInfoComponent, PoInfoModule, PoInfoOrientation, PoInputComponent, PoInterceptorsModule, PoLanguageModule, PoLanguageService, PoListViewComponent, PoListViewContentTemplateDirective, PoListViewDetailTemplateDirective, PoListViewModule, PoLoadingComponent, PoLoadingIconComponent, PoLoadingModule, PoLoadingOverlayComponent, PoLoginComponent, PoLookupComponent, PoLookupModalComponent, PoMenuComponent, PoMenuGlobalService, PoMenuHeaderTemplateDirective, PoMenuModule, PoMenuPanelComponent, PoMenuPanelModule, PoModalComponent, PoModalModule, PoModule, PoMultiselectComponent, PoMultiselectFilterMode, PoNavbarComponent, PoNavbarModule, PoNotificationModule, PoNotificationService, PoNumberComponent, PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent, PoPageModule, PoPageSlideComponent, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressStatus, PoRadioGroupComponent, PoRichTextComponent, PoSelectComponent, PoSelectOptionTemplateDirective, PoServicesModule, PoSlideComponent, PoSlideContentTemplateDirective, PoSlideModule, PoStepComponent, PoStepperComponent, PoStepperModule, PoStepperOrientation, PoStepperStatus, PoSwitchComponent, PoSwitchLabelPosition, PoTabComponent, PoTableCellTemplateDirective, PoTableColumnSortType, PoTableColumnTemplateDirective, PoTableComponent, PoTableModule, PoTableRowTemplateArrowDirection, PoTableRowTemplateDirective, PoTabsComponent, PoTabsModule, PoTagComponent, PoTagModule, PoTagOrientation, PoTagType, PoTextareaComponent, PoTimeModule, PoTimePipe, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, returnPoI18nService, ɵ0, PoAccordionBaseComponent as ɵa, PoAccordionService as ɵb, PoChartMathsService as ɵba, PoChartAxisComponent as ɵbb, PoChartAxisPathComponent as ɵbc, PoChartAxisLabelComponent as ɵbd, PoChartBaseComponent as ɵbe, PoColorService as ɵbf, PoChartSvgContainerService as ɵbg, PoChartContainerComponent as ɵbh, PoChartGaugeComponent as ɵbi, PoChartCircular as ɵbj, PoChartDynamicTypeComponent as ɵbk, PoChartGaugeTextContentComponent as ɵbl, PoChartLegendComponent as ɵbm, PoChartLineComponent as ɵbn, PoChartPathComponent as ɵbo, PoChartPieComponent as ɵbp, PoChartCircularComponent as ɵbq, PoChartDonutComponent as ɵbr, PoChartSeriesPointComponent as ɵbs, PoChartBarComponent as ɵbt, PoChartBarBaseComponent as ɵbu, PoChartColumnComponent as ɵbv, PoChartBarPathComponent as ɵbw, PoChartCircularPathComponent as ɵbx, PoChartCircularLabelComponent as ɵby, PoChartTooltipDirective as ɵbz, PoAccordionItemBodyComponent as ɵc, PoResizeObserverDirective as ɵca, PoContainerBaseComponent as ɵcb, PoDisclaimerBaseComponent as ɵcc, PoDisclaimerGroupBaseComponent as ɵcd, PoDisclaimerRemoveComponent as ɵce, PoDividerBaseComponent as ɵcf, PoPopupBaseComponent as ɵcg, PoDropdownBaseComponent as ɵch, PoInfoBaseComponent as ɵci, PoCleanModule as ɵcj, PoCleanBaseComponent as ɵck, PoFieldContainerModule as ɵcl, PoFieldContainerBottomComponent as ɵcm, PoFieldContainerComponent as ɵcn, PoCheckboxGroupBaseComponent as ɵco, PoDatepickerBaseComponent as ɵcp, PoModalBaseComponent as ɵcq, PoProgressBaseComponent as ɵcr, PoProgressBarComponent as ɵcs, PoI18nBasePipe as ɵct, PoDialogBaseService as ɵcu, PoToasterComponent as ɵcv, PoToasterBaseComponent as ɵcw, PoPopoverBaseComponent as ɵcx, PoTableBaseComponent as ɵcy, PoTableService as ɵcz, PoAccordionItemHeaderComponent as ɵd, PoTableColumnIconComponent as ɵda, PoTableColumnLabelComponent as ɵdb, PoTableColumnLinkComponent as ɵdc, PoTableColumnManagerComponent as ɵdd, PoTableDetailComponent as ɵde, PoTableIconComponent as ɵdf, PoTableShowSubtitleComponent as ɵdg, PoTableSubtitleCircleComponent as ɵdh, PoTableSubtitleFooterComponent as ɵdi, PoCheckboxBaseComponent as ɵdj, PoComboBaseComponent as ɵdk, PoComboFilterService as ɵdl, PoInputBaseComponent as ɵdm, PoDatepickerRangeBaseComponent as ɵdn, PoInputGeneric as ɵdo, PoLookupBaseComponent as ɵdp, PoLookupFilterService as ɵdq, PoLookupModalService as ɵdr, PoLookupModalBaseComponent as ɵds, PoMultiselectBaseComponent as ɵdt, PoMultiselectFilterService as ɵdu, PoNumberBaseComponent as ɵdv, PoRadioGroupBaseComponent as ɵdw, PoRichTextBaseComponent as ɵdx, PoRichTextService as ɵdy, PoRichTextBodyComponent as ɵdz, PoAvatarBaseComponent as ɵe, PoSelectBaseComponent as ɵea, PoFieldModel as ɵeb, PoTextareaBaseComponent as ɵec, PoUploadBaseComponent as ɵed, PoUploadService as ɵee, PoUploadBaseService as ɵef, PoUploadDragDropComponent as ɵeg, PoUploadDragDropAreaComponent as ɵeh, PoNotificationBaseService as ɵei, PoMultiselectDropdownComponent as ɵej, PoMultiselectItemComponent as ɵek, PoMultiselectSearchComponent as ɵel, PoRichTextImageModalComponent as ɵem, PoRichTextLinkModalComponent as ɵen, PoRichTextToolbarComponent as ɵeo, PoUploadDragDropDirective as ɵep, PoUploadDragDropAreaOverlayComponent as ɵeq, PoUploadFileRestrictionsComponent as ɵer, PoTagBaseComponent as ɵes, PoDynamicFormBaseComponent as ɵet, PoDynamicFormLoadService as ɵeu, PoDynamicFormOperation as ɵev, PoDynamicFormValidationService as ɵew, PoDynamicFormFieldsComponent as ɵex, PoDynamicFormFieldsBaseComponent as ɵey, PoDynamicViewBaseComponent as ɵez, PoBreadcrumbBaseComponent as ɵf, PoDynamicViewService as ɵfa, PoGaugeBaseComponent as ɵfb, PoGaugeTitleComponent as ɵfc, PoGaugeLegendComponent as ɵfd, PoGaugeSvgComponent as ɵfe, PoGaugePathComponent as ɵff, PoGaugeDescriptionComponent as ɵfg, PoGaugePointerComponent as ɵfh, PoGridCellActionComponent as ɵfi, PoGridCellComponent as ɵfj, PoGridHeadComponent as ɵfk, PoListViewBaseComponent as ɵfl, PoBadgeModule as ɵfm, PoBadgeComponent as ɵfn, PoBadgeBaseComponent as ɵfo, PoMenuBaseComponent as ɵfp, PoMenuService as ɵfq, PoMenuItemsService as ɵfr, PoMenuFilterComponent as ɵfs, PoMenuItemComponent as ɵft, PoMenuPanelBaseComponent as ɵfu, PoMenuPanelItemsService as ɵfv, PoMenuPanelItemComponent as ɵfw, PoNavbarActionsModule as ɵfx, PoNavbarActionComponent as ɵfy, PoNavbarActionPopupComponent as ɵfz, PoBreadcrumbDropdownComponent as ɵg, PoNavbarActionsComponent as ɵga, PoNavbarItemsModule as ɵgb, PoNavbarItemComponent as ɵgc, PoNavbarItemsComponent as ɵgd, PoNavbarItemNavigationModule as ɵge, PoNavbarItemNavigationComponent as ɵgf, PoNavbarItemNavigationIconComponent as ɵgg, PoNavbarBaseComponent as ɵgh, PoNavbarLogoComponent as ɵgi, PoPageComponent as ɵgj, PoPageBaseComponent as ɵgk, PoPageContentComponent as ɵgl, PoPageContentBaseComponent as ɵgm, PoPageDefaultBaseComponent as ɵgn, PoPageDetailBaseComponent as ɵgo, PoPageEditBaseComponent as ɵgp, PoPageHeaderComponent as ɵgq, PoPageHeaderBaseComponent as ɵgr, PoPageListBaseComponent as ɵgs, PoPageSlideBaseComponent as ɵgt, PoSlideCirclesComponent as ɵgu, PoSlideBaseComponent as ɵgv, PoSlideItemComponent as ɵgw, PoSlideControlComponent as ɵgx, PoStepperCircleComponent as ɵgy, PoStepperBaseComponent as ɵgz, PoBreadcrumbFavoriteComponent as ɵh, PoStepperLabelComponent as ɵha, PoStepperStepComponent as ɵhb, PoTabButtonComponent as ɵhc, PoTabBaseComponent as ɵhd, PoTabDropdownComponent as ɵhe, PoTabsBaseComponent as ɵhf, PoToolbarActionsComponent as ɵhg, PoToolbarBaseComponent as ɵhh, PoToolbarNotificationComponent as ɵhi, PoToolbarProfileComponent as ɵhj, PoTreeViewBaseComponent as ɵhk, PoTreeViewService as ɵhl, PoTreeViewItemComponent as ɵhm, PoTreeViewItemHeaderComponent as ɵhn, PoWidgetBaseComponent as ɵho, PoHttpInterceptorDetailComponent as ɵhp, PoHttpInterceptorBaseService as ɵhq, PoHttpRequesControltService as ɵhr, PoI18nBaseService as ɵhs, PoBreadcrumbFavoriteService as ɵi, PoBreadcrumbItemComponent as ɵj, PoLoadingBaseComponent as ɵk, PoLoadingOverlayBaseComponent as ɵl, PoButtonBaseComponent as ɵm, InputBoolean as ɵn, PoTooltipBaseDirective as ɵo, PoTooltipControlPositionService as ɵp, PoControlPositionService as ɵq, PoButtonGroupBaseComponent as ɵr, PoCalendarBaseComponent as ɵs, PoDateService as ɵt, PoCalendarHeaderComponent as ɵu, PoCalendarWrapperComponent as ɵv, PoCalendarService as ɵw, PoCalendarLangService as ɵx, PoChartAreaComponent as ɵy, PoChartLineBaseComponent as ɵz };
 //# sourceMappingURL=po-ui-ng-components.js.map