@po-ui/ng-components 5.11.0 → 5.14.0

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

@@ -3842,7 +3842,7 @@
         PoCalendarBaseComponent.prototype.setActivateDate = function (date) {
             var activateDate = date ? date : this.verifyActivateDate();
             if (this.isRange) {
-                var checkedStart = new Date(activateDate);
+                var checkedStart = typeof activateDate === 'string' ? this.poDate.convertIsoToDate(activateDate) : new Date(activateDate);
                 var checkedEnd = new Date(new Date(checkedStart).setMonth(checkedStart.getMonth() + 1));
                 this.activateDate = { start: checkedStart, end: checkedEnd };
             }
@@ -13751,7 +13751,7 @@
             row.$showAction = !toggleShowAction;
         };
         PoTableBaseComponent.prototype.sortColumn = function (column) {
-            if (!this.sort || column.type === 'detail') {
+            if (!this.sort || column.type === 'detail' || column.sortable === false) {
                 return;
             }
             this.sortedColumn.ascending = this.sortedColumn.property === column ? !this.sortedColumn.ascending : true;
@@ -14850,7 +14850,7 @@
     PoTableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-table',
-                    template: "<po-container *ngIf=\"container; else tableContainerTemplate\" p-no-padding [p-no-shadow]=\"container === 'border'\">\n  <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\n</po-container>\n\n<ng-template #tableContainerTemplate>\n  <div [class.po-table-container-relative]=\"loading\">\n    <div *ngIf=\"loading\" class=\"po-table-overlay\">\n      <po-loading class=\"po-table-overlay-content\" [p-text]=\"literals.loadingData\"></po-loading>\n    </div>\n\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        <div *ngIf=\"height\" class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n          <div class=\"po-table-header-fixed po-table-header\"></div>\n          <div #poTableTbody class=\"po-table-container-fixed-inner\">\n            <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n          </div>\n        </div>\n\n        <div *ngIf=\"!height\">\n          <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"po-table-footer\" *ngIf=\"hasFooter\">\n    <ng-container *ngFor=\"let column of subtitleColumns; trackBy: trackBy\">\n      <po-table-subtitle-footer [p-literals]=\"literals\" [p-subtitles]=\"column.subtitles\"> </po-table-subtitle-footer>\n    </ng-container>\n  </div>\n</ng-template>\n\n<div\n  *ngIf=\"!infiniteScroll\"\n  class=\"po-row po-table-footer-show-more\"\n  [class.po-invisible]=\"showMore.observers.length === 0 && !hasService\"\n  #tableFooter\n>\n  <po-button\n    class=\"po-offset-xl-4 po-offset-lg-4 po-offset-md-3 po-lg-4 po-md-6\"\n    [p-disabled]=\"showMoreDisabled\"\n    [p-label]=\"literals.loadMoreData\"\n    [p-loading]=\"loadingShowMore\"\n    (p-click)=\"onShowMore()\"\n  >\n  </po-button>\n</div>\n\n<ng-template #tableTemplate>\n  <table class=\"po-table\" [class.po-table-striped]=\"striped\" [class.po-table-layout-fixed]=\"hideTextOverflow\">\n    <thead>\n      <tr [class.po-table-header]=\"!height\">\n        <th *ngIf=\"hasSelectableColumn\" class=\"po-table-column-selectable\">\n          <div [class.po-table-header-fixed-inner]=\"height\">\n            <input\n              *ngIf=\"!hideSelectAll\"\n              type=\"checkbox\"\n              class=\"po-table-checkbox\"\n              [class.po-table-checkbox-checked]=\"selectAll\"\n              [class.po-table-checkbox-indeterminate]=\"selectAll === null\"\n            />\n            <label *ngIf=\"!hideSelectAll\" class=\"po-table-checkbox-label po-clickable\" (click)=\"selectAllRows()\">\n            </label>\n          </div>\n        </th>\n\n        <th\n          *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && !hasRowTemplateWithArrowDirectionRight\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\n          <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n        </th>\n\n        <th\n          *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n          #headersTable\n          class=\"po-table-header-ellipsis\"\n          [style.width]=\"column.width\"\n          [style.max-width]=\"column.width\"\n          [style.min-width]=\"column.width\"\n          [class.po-clickable]=\"sort || hasService\"\n          [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n          (click)=\"sortColumn(column)\"\n        >\n          <div\n            class=\"po-table-header-flex\"\n            [class.po-table-header-fixed-inner]=\"height\"\n            [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n            [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n          >\n            <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n          </div>\n        </th>\n\n        <th\n          *ngIf=\"hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager)\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <th\n          *ngIf=\"hasVisibleActions && hideColumnsManager\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n          [class.po-table-header-actions]=\"!isSingleAction\"\n        ></th>\n\n        <th\n          #columnManager\n          *ngIf=\"hasValidColumns && !hideColumnsManager\"\n          [class.po-table-header-column-manager]=\"!isSingleAction\"\n          [class.po-table-header-column-manager-border]=\"!height && container\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n        >\n          <div\n            [class.po-table-header-column-manager-border]=\"height && container\"\n            [class.po-table-header-column-manager-fixed-inner]=\"height\"\n            [style.width.px]=\"height && visibleActions.length ? columnManager.offsetWidth : undefined\"\n          >\n            <button\n              #columnManagerTarget\n              class=\"po-table-header-column-manager-button po-icon po-icon-settings po-clickable\"\n              p-tooltip-position=\"left\"\n              [p-tooltip]=\"literals.columnsManager\"\n              (click)=\"onOpenColumnManager()\"\n            ></button>\n          </div>\n        </th>\n      </tr>\n    </thead>\n\n    <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n      <tr class=\"po-table-row\">\n        <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n          <span> {{ literals.noData }} </span>\n        </td>\n      </tr>\n    </tbody>\n\n    <ng-container *ngIf=\"hasMainColumns\">\n      <tbody class=\"po-table-group-row\" *ngFor=\"let row of items; let rowIndex = index; trackBy: trackBy\">\n        <tr class=\"po-table-row\" [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\">\n          <td *ngIf=\"selectable\" class=\"po-table-column po-table-column-selectable\">\n            <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\n            </ng-container>\n          </td>\n\n          <!-- Valida se a origem do detail \u00E9 pelo input do po-table -->\n          <td\n            *ngIf=\"columnMasterDetail && !hideDetail && !hasRowTemplate\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <!-- Valida se a origem do detail \u00E9 pela diretiva -->\n          <td\n            *ngIf=\"hasRowTemplate && !hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <td\n            *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n            [style.width]=\"column.width\"\n            [style.max-width]=\"column.width\"\n            [style.min-width]=\"column.width\"\n            [class.po-table-column]=\"column.type !== 'icon'\"\n            [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n            [class.po-table-column-center]=\"column.type === 'subtitle'\"\n            [class.po-table-column-icons]=\"column.type === 'icon'\"\n            [ngClass]=\"getClassColor(row, column)\"\n            (click)=\"selectable ? selectRow(row) : 'javascript:;'\"\n          >\n            <div\n              class=\"po-table-column-cell notranslate\"\n              [class.po-table-body-ellipsis]=\"hideTextOverflow\"\n              [ngSwitch]=\"column.type\"\n              [p-tooltip]=\"tooltipText\"\n              (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n              (mouseleave)=\"tooltipMouseLeave()\"\n            >\n              <span *ngSwitchCase=\"'columnTemplate'\">\n                <ng-container *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: row[column.property] }\">\n                </ng-container>\n              </span>\n\n              <span *ngSwitchCase=\"'cellTemplate'\">\n                <ng-container *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\">\n                </ng-container>\n              </span>\n\n              <span *ngSwitchCase=\"'boolean'\">\n                {{ getBooleanLabel(row[column.property], column) }}\n              </span>\n\n              <span *ngSwitchCase=\"'currency'\">\n                {{ row[column.property] | currency: column.format:'symbol':'1.2-2' }}\n              </span>\n\n              <span *ngSwitchCase=\"'date'\">\n                {{ row[column.property] | date: column.format || 'dd/MM/yyyy' }}\n              </span>\n\n              <span *ngSwitchCase=\"'time'\">\n                {{ row[column.property] | po_time: column.format || 'HH:mm:ss.ffffff' }}\n              </span>\n\n              <span *ngSwitchCase=\"'dateTime'\">\n                {{ row[column.property] | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n              </span>\n\n              <span *ngSwitchCase=\"'number'\">\n                {{ formatNumber(row[column.property], column.format) }}\n              </span>\n\n              <po-table-column-link\n                *ngSwitchCase=\"'link'\"\n                [p-action]=\"column.action\"\n                [p-disabled]=\"checkDisabled(row, column)\"\n                [p-link]=\"row[column.link]\"\n                [p-row]=\"row\"\n                [p-value]=\"row[column.property]\"\n                (click)=\"onClickLink($event, row, column)\"\n              >\n              </po-table-column-link>\n\n              <po-table-column-icon\n                *ngSwitchCase=\"'icon'\"\n                [p-column]=\"column\"\n                [p-icons]=\"getColumnIcons(row, column)\"\n                [p-row]=\"row\"\n              >\n              </po-table-column-icon>\n\n              <span *ngSwitchCase=\"'subtitle'\">\n                <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\n              </span>\n              <span *ngSwitchCase=\"'label'\">\n                <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"></po-table-column-label>\n              </span>\n              <span *ngSwitchDefault>{{ row[column.property] }}</span>\n            </div>\n          </td>\n\n          <td\n            *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <td *ngIf=\"isSingleAction\" class=\"po-table-column po-table-column-single-action\">\n            <div\n              *ngIf=\"firstAction.visible !== false\"\n              class=\"po-table-single-action po-clickable\"\n              [class.po-table-action-disabled]=\"firstAction.disabled ? validateTableAction(row, firstAction) : false\"\n              (click)=\"executeTableAction(row, firstAction)\"\n            >\n              <po-icon\n                *ngIf=\"firstAction.icon\"\n                class=\"po-table-single-action-content\"\n                [p-icon]=\"firstAction.icon\"\n              ></po-icon>\n              {{ firstAction.label }}\n            </div>\n          </td>\n\n          <td *ngIf=\"visibleActions.length > 1\" class=\"po-table-column-actions\">\n            <span #popupTarget class=\"po-icon po-icon-more po-clickable\" (click)=\"togglePopup(row, popupTarget)\"></span>\n          </td>\n          <!-- Column Manager -->\n          <td\n            *ngIf=\"!hasVisibleActions && !hideColumnsManager && !hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column\"\n          ></td>\n        </tr>\n\n        <tr *ngIf=\"hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)\">\n          <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n            <ng-template\n              [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n        </tr>\n\n        <tr *ngIf=\"hasMainColumns && isShowMasterDetail(row)\">\n          <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n            <po-table-detail\n              [p-selectable]=\"selectable && !detailHideSelect\"\n              [p-detail]=\"columnMasterDetail.detail\"\n              [p-items]=\"row[nameColumnDetail]\"\n              (p-select-row)=\"selectDetailRow($event)\"\n            >\n            </po-table-detail>\n          </td>\n        </tr>\n      </tbody>\n    </ng-container>\n  </table>\n</ng-template>\n\n<po-popup #popup [p-actions]=\"actions\" [p-target]=\"popupTarget\"> </po-popup>\n\n<ng-template #poTableColumnDetail let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <span\n    *ngIf=\"(containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)\"\n    class=\"po-icon po-clickable\"\n    [class.po-icon-arrow-up]=\"row.$showDetail\"\n    [class.po-icon-arrow-down]=\"!row.$showDetail\"\n  >\n  </span>\n</ng-template>\n\n<ng-template #inputRadio let-row>\n  <input type=\"radio\" class=\"po-table-radio\" [class.po-table-radio-checked]=\"row.$selected\" />\n  <label class=\"po-table-radio-label po-clickable\" (click)=\"selectable ? selectRow(row) : 'javascript:;'\"></label>\n</ng-template>\n\n<ng-template #inputCheckbox let-row>\n  <input type=\"checkbox\" class=\"po-table-checkbox\" [class.po-table-checkbox-checked]=\"row.$selected\" />\n  <label class=\"po-table-checkbox-label po-clickable\" (click)=\"selectable ? selectRow(row) : 'javascript:;'\"></label>\n</ng-template>\n\n<ng-template #contentHeaderTemplate let-column>\n  <span\n    #columnHeader\n    class=\"po-table-header-ellipsis\"\n    [p-tooltip]=\"tooltipText\"\n    (mouseenter)=\"tooltipMouseEnter($event)\"\n    (mouseleave)=\"tooltipMouseLeave()\"\n  >\n    {{ column.label || (column.property | titlecase) }}\n  </span>\n  <span\n    *ngIf=\"sort\"\n    [class.po-table-header-icon-unselected]=\"sortedColumn?.property !== column\"\n    [class.po-table-header-icon-descending]=\"sortedColumn?.property === column && sortedColumn.ascending\"\n    [class.po-table-header-icon-ascending]=\"sortedColumn?.property === column && !sortedColumn.ascending\"\n  >\n  </span>\n</ng-template>\n\n<ng-template #noColumnsWithHeight>\n  <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"noColumnsHeader?.nativeElement.offsetWidth\">\n    {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n  </div>\n</ng-template>\n\n<ng-template #noColumnsWithoutHeight>\n  {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n</ng-template>\n\n<po-table-column-manager\n  *ngIf=\"!hideColumnsManager\"\n  [p-columns]=\"columns\"\n  [p-max-columns]=\"maxColumns\"\n  [p-target]=\"columnManagerTarget\"\n  [p-last-visible-columns-selected]=\"lastVisibleColumnsSelected\"\n  (p-visible-columns-change)=\"onVisibleColumnsChange($event)\"\n  (p-change-visible-columns)=\"onChangeVisibleColumns($event)\"\n>\n</po-table-column-manager>\n",
+                    template: "<po-container *ngIf=\"container; else tableContainerTemplate\" p-no-padding [p-no-shadow]=\"container === 'border'\">\n  <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\n</po-container>\n\n<ng-template #tableContainerTemplate>\n  <div [class.po-table-container-relative]=\"loading\">\n    <div *ngIf=\"loading\" class=\"po-table-overlay\">\n      <po-loading class=\"po-table-overlay-content\" [p-text]=\"literals.loadingData\"></po-loading>\n    </div>\n\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        <div *ngIf=\"height\" class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n          <div class=\"po-table-header-fixed po-table-header\"></div>\n          <div #poTableTbody class=\"po-table-container-fixed-inner\">\n            <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n          </div>\n        </div>\n\n        <div *ngIf=\"!height\">\n          <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"po-table-footer\" *ngIf=\"hasFooter\">\n    <ng-container *ngFor=\"let column of subtitleColumns; trackBy: trackBy\">\n      <po-table-subtitle-footer [p-literals]=\"literals\" [p-subtitles]=\"column.subtitles\"> </po-table-subtitle-footer>\n    </ng-container>\n  </div>\n</ng-template>\n\n<div\n  *ngIf=\"!infiniteScroll\"\n  class=\"po-row po-table-footer-show-more\"\n  [class.po-invisible]=\"showMore.observers.length === 0 && !hasService\"\n  #tableFooter\n>\n  <po-button\n    class=\"po-offset-xl-4 po-offset-lg-4 po-offset-md-3 po-lg-4 po-md-6\"\n    [p-disabled]=\"showMoreDisabled\"\n    [p-label]=\"literals.loadMoreData\"\n    [p-loading]=\"loadingShowMore\"\n    (p-click)=\"onShowMore()\"\n  >\n  </po-button>\n</div>\n\n<ng-template #tableTemplate>\n  <table class=\"po-table\" [class.po-table-striped]=\"striped\" [class.po-table-layout-fixed]=\"hideTextOverflow\">\n    <thead>\n      <tr [class.po-table-header]=\"!height\">\n        <th *ngIf=\"hasSelectableColumn\" class=\"po-table-column-selectable\">\n          <div [class.po-table-header-fixed-inner]=\"height\">\n            <input\n              *ngIf=\"!hideSelectAll\"\n              type=\"checkbox\"\n              class=\"po-table-checkbox\"\n              [class.po-table-checkbox-checked]=\"selectAll\"\n              [class.po-table-checkbox-indeterminate]=\"selectAll === null\"\n            />\n            <label *ngIf=\"!hideSelectAll\" class=\"po-table-checkbox-label po-clickable\" (click)=\"selectAllRows()\">\n            </label>\n          </div>\n        </th>\n\n        <th\n          *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && !hasRowTemplateWithArrowDirectionRight\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\n          <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n        </th>\n\n        <th\n          *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n          #headersTable\n          class=\"po-table-header-ellipsis\"\n          [style.width]=\"column.width\"\n          [style.max-width]=\"column.width\"\n          [style.min-width]=\"column.width\"\n          [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n          [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n          (click)=\"sortColumn(column)\"\n        >\n          <div\n            class=\"po-table-header-flex\"\n            [class.po-table-header-fixed-inner]=\"height\"\n            [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n            [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n          >\n            <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n          </div>\n        </th>\n\n        <th\n          *ngIf=\"hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager)\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <th\n          *ngIf=\"hasVisibleActions && hideColumnsManager\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n          [class.po-table-header-actions]=\"!isSingleAction\"\n        ></th>\n\n        <th\n          #columnManager\n          *ngIf=\"hasValidColumns && !hideColumnsManager\"\n          [class.po-table-header-column-manager]=\"!isSingleAction\"\n          [class.po-table-header-column-manager-border]=\"!height && container\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n        >\n          <div\n            [class.po-table-header-column-manager-border]=\"height && container\"\n            [class.po-table-header-column-manager-fixed-inner]=\"height\"\n            [style.width.px]=\"height && visibleActions.length ? columnManager.offsetWidth : undefined\"\n          >\n            <button\n              #columnManagerTarget\n              class=\"po-table-header-column-manager-button po-icon po-icon-settings po-clickable\"\n              p-tooltip-position=\"left\"\n              [p-tooltip]=\"literals.columnsManager\"\n              (click)=\"onOpenColumnManager()\"\n            ></button>\n          </div>\n        </th>\n      </tr>\n    </thead>\n\n    <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n      <tr class=\"po-table-row\">\n        <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n          <span> {{ literals.noData }} </span>\n        </td>\n      </tr>\n    </tbody>\n\n    <ng-container *ngIf=\"hasMainColumns\">\n      <tbody class=\"po-table-group-row\" *ngFor=\"let row of items; let rowIndex = index; trackBy: trackBy\">\n        <tr class=\"po-table-row\" [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\">\n          <td *ngIf=\"selectable\" class=\"po-table-column po-table-column-selectable\">\n            <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\n            </ng-container>\n          </td>\n\n          <!-- Valida se a origem do detail \u00E9 pelo input do po-table -->\n          <td\n            *ngIf=\"columnMasterDetail && !hideDetail && !hasRowTemplate\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <!-- Valida se a origem do detail \u00E9 pela diretiva -->\n          <td\n            *ngIf=\"hasRowTemplate && !hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <td\n            *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n            [style.width]=\"column.width\"\n            [style.max-width]=\"column.width\"\n            [style.min-width]=\"column.width\"\n            [class.po-table-column]=\"column.type !== 'icon'\"\n            [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n            [class.po-table-column-center]=\"column.type === 'subtitle'\"\n            [class.po-table-column-icons]=\"column.type === 'icon'\"\n            [ngClass]=\"getClassColor(row, column)\"\n            (click)=\"selectable ? selectRow(row) : 'javascript:;'\"\n          >\n            <div\n              class=\"po-table-column-cell notranslate\"\n              [class.po-table-body-ellipsis]=\"hideTextOverflow\"\n              [ngSwitch]=\"column.type\"\n              [p-tooltip]=\"tooltipText\"\n              (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n              (mouseleave)=\"tooltipMouseLeave()\"\n            >\n              <span *ngSwitchCase=\"'columnTemplate'\">\n                <ng-container *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: row[column.property] }\">\n                </ng-container>\n              </span>\n\n              <span *ngSwitchCase=\"'cellTemplate'\">\n                <ng-container *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\">\n                </ng-container>\n              </span>\n\n              <span *ngSwitchCase=\"'boolean'\">\n                {{ getBooleanLabel(row[column.property], column) }}\n              </span>\n\n              <span *ngSwitchCase=\"'currency'\">\n                {{ row[column.property] | currency: column.format:'symbol':'1.2-2' }}\n              </span>\n\n              <span *ngSwitchCase=\"'date'\">\n                {{ row[column.property] | date: column.format || 'dd/MM/yyyy' }}\n              </span>\n\n              <span *ngSwitchCase=\"'time'\">\n                {{ row[column.property] | po_time: column.format || 'HH:mm:ss.ffffff' }}\n              </span>\n\n              <span *ngSwitchCase=\"'dateTime'\">\n                {{ row[column.property] | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n              </span>\n\n              <span *ngSwitchCase=\"'number'\">\n                {{ formatNumber(row[column.property], column.format) }}\n              </span>\n\n              <po-table-column-link\n                *ngSwitchCase=\"'link'\"\n                [p-action]=\"column.action\"\n                [p-disabled]=\"checkDisabled(row, column)\"\n                [p-link]=\"row[column.link]\"\n                [p-row]=\"row\"\n                [p-value]=\"row[column.property]\"\n                (click)=\"onClickLink($event, row, column)\"\n              >\n              </po-table-column-link>\n\n              <po-table-column-icon\n                *ngSwitchCase=\"'icon'\"\n                [p-column]=\"column\"\n                [p-icons]=\"getColumnIcons(row, column)\"\n                [p-row]=\"row\"\n              >\n              </po-table-column-icon>\n\n              <span *ngSwitchCase=\"'subtitle'\">\n                <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\n              </span>\n              <span *ngSwitchCase=\"'label'\">\n                <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"></po-table-column-label>\n              </span>\n              <span *ngSwitchDefault>{{ row[column.property] }}</span>\n            </div>\n          </td>\n\n          <td\n            *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <td *ngIf=\"isSingleAction\" class=\"po-table-column po-table-column-single-action\">\n            <div\n              *ngIf=\"firstAction.visible !== false\"\n              class=\"po-table-single-action po-clickable\"\n              [class.po-table-action-disabled]=\"firstAction.disabled ? validateTableAction(row, firstAction) : false\"\n              (click)=\"executeTableAction(row, firstAction)\"\n            >\n              <po-icon\n                *ngIf=\"firstAction.icon\"\n                class=\"po-table-single-action-content\"\n                [p-icon]=\"firstAction.icon\"\n              ></po-icon>\n              {{ firstAction.label }}\n            </div>\n          </td>\n\n          <td *ngIf=\"visibleActions.length > 1\" class=\"po-table-column-actions\">\n            <span #popupTarget class=\"po-icon po-icon-more po-clickable\" (click)=\"togglePopup(row, popupTarget)\"></span>\n          </td>\n          <!-- Column Manager -->\n          <td\n            *ngIf=\"!hasVisibleActions && !hideColumnsManager && !hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column\"\n          ></td>\n        </tr>\n\n        <tr *ngIf=\"hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)\">\n          <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n            <ng-template\n              [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n        </tr>\n\n        <tr *ngIf=\"hasMainColumns && isShowMasterDetail(row)\">\n          <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n            <po-table-detail\n              [p-selectable]=\"selectable && !detailHideSelect\"\n              [p-detail]=\"columnMasterDetail.detail\"\n              [p-items]=\"row[nameColumnDetail]\"\n              (p-select-row)=\"selectDetailRow($event)\"\n            >\n            </po-table-detail>\n          </td>\n        </tr>\n      </tbody>\n    </ng-container>\n  </table>\n</ng-template>\n\n<po-popup #popup [p-actions]=\"actions\" [p-target]=\"popupTarget\"> </po-popup>\n\n<ng-template #poTableColumnDetail let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <span\n    *ngIf=\"(containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)\"\n    class=\"po-icon po-clickable\"\n    [class.po-icon-arrow-up]=\"row.$showDetail\"\n    [class.po-icon-arrow-down]=\"!row.$showDetail\"\n  >\n  </span>\n</ng-template>\n\n<ng-template #inputRadio let-row>\n  <input type=\"radio\" class=\"po-table-radio\" [class.po-table-radio-checked]=\"row.$selected\" />\n  <label class=\"po-table-radio-label po-clickable\" (click)=\"selectable ? selectRow(row) : 'javascript:;'\"></label>\n</ng-template>\n\n<ng-template #inputCheckbox let-row>\n  <input type=\"checkbox\" class=\"po-table-checkbox\" [class.po-table-checkbox-checked]=\"row.$selected\" />\n  <label class=\"po-table-checkbox-label po-clickable\" (click)=\"selectable ? selectRow(row) : 'javascript:;'\"></label>\n</ng-template>\n\n<ng-template #contentHeaderTemplate let-column>\n  <span\n    #columnHeader\n    class=\"po-table-header-ellipsis\"\n    [p-tooltip]=\"tooltipText\"\n    (mouseenter)=\"tooltipMouseEnter($event)\"\n    (mouseleave)=\"tooltipMouseLeave()\"\n  >\n    {{ column.label || (column.property | titlecase) }}\n  </span>\n  <span\n    *ngIf=\"sort && column.sortable !== false\"\n    [class.po-table-header-icon-unselected]=\"sortedColumn?.property !== column\"\n    [class.po-table-header-icon-descending]=\"sortedColumn?.property === column && sortedColumn.ascending\"\n    [class.po-table-header-icon-ascending]=\"sortedColumn?.property === column && !sortedColumn.ascending\"\n  >\n  </span>\n</ng-template>\n\n<ng-template #noColumnsWithHeight>\n  <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"noColumnsHeader?.nativeElement.offsetWidth\">\n    {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n  </div>\n</ng-template>\n\n<ng-template #noColumnsWithoutHeight>\n  {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n</ng-template>\n\n<po-table-column-manager\n  *ngIf=\"!hideColumnsManager\"\n  [p-columns]=\"columns\"\n  [p-max-columns]=\"maxColumns\"\n  [p-target]=\"columnManagerTarget\"\n  [p-last-visible-columns-selected]=\"lastVisibleColumnsSelected\"\n  (p-visible-columns-change)=\"onVisibleColumnsChange($event)\"\n  (p-change-visible-columns)=\"onChangeVisibleColumns($event)\"\n>\n</po-table-column-manager>\n",
                     providers: [PoDateService]
                 },] }
     ];
@@ -17878,7 +17878,8 @@
      *
      */
     var PoInputBaseComponent = /** @class */ (function () {
-        function PoInputBaseComponent() {
+        function PoInputBaseComponent(cd) {
+            this.cd = cd;
             /**
              * @optional
              *
@@ -18146,7 +18147,9 @@
         // Função implementada do ControlValueAccessor
         // Usada para interceptar os estados de habilitado via forms api
         PoInputBaseComponent.prototype.setDisabledState = function (isDisabled) {
+            var _a;
             this.disabled = isDisabled;
+            (_a = this.cd) === null || _a === void 0 ? void 0 : _a.markForCheck();
         };
         // Função implementada do ControlValueAccessor
         // Usada para interceptar as mudanças e não atualizar automaticamente o Model
@@ -18201,7 +18204,9 @@
         };
         // Função implementada do ControlValueAccessor
         PoInputBaseComponent.prototype.writeValue = function (value) {
+            var _a;
             this.writeValueModel(value);
+            (_a = this.cd) === null || _a === void 0 ? void 0 : _a.markForCheck();
         };
         PoInputBaseComponent.prototype.validateModel = function () {
             if (this.validatorChange) {
@@ -18223,6 +18228,9 @@
     PoInputBaseComponent.decorators = [
         { type: i0.Directive }
     ];
+    PoInputBaseComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
     PoInputBaseComponent.propDecorators = {
         autoFocus: [{ type: i0.Input, args: ['p-auto-focus',] }],
         icon: [{ type: i0.Input, args: ['p-icon',] }],
@@ -18879,8 +18887,8 @@
     /* eslint-disable @angular-eslint/directive-class-suffix */
     var PoInputGeneric = /** @class */ (function (_super) {
         __extends(PoInputGeneric, _super);
-        function PoInputGeneric(el) {
-            var _this = _super.call(this) || this;
+        function PoInputGeneric(el, cd) {
+            var _this = _super.call(this, cd) || this;
             _this.type = 'text';
             _this.el = el;
             return _this;
@@ -19061,7 +19069,8 @@
         { type: i0.Directive }
     ];
     PoInputGeneric.ctorParameters = function () { return [
-        { type: i0.ElementRef }
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef }
     ]; };
     PoInputGeneric.propDecorators = {
         inputEl: [{ type: i0.ViewChild, args: ['inp', { read: i0.ElementRef, static: true },] }],
@@ -20778,6 +20787,8 @@
             this.options = [];
             /** Propriedade que recebe a lista de opções que deverão ser criadas no dropdown. */
             this.visibleOptions = [];
+            /** Propriedade que indica se o campo "Selecionar todos" deverá ser escondido. */
+            this.hideSelectAll = false;
             /** Evento disparado a cada tecla digitada na pesquisa. */
             this.changeSearch = new i0.EventEmitter();
             /** Evento disparado a cada alteração na lista das opções selecionadas. */
@@ -20816,6 +20827,19 @@
                 this.searchElement.setFocus();
             }
         };
+        PoMultiselectDropdownComponent.prototype.onClickSelectAll = function () {
+            var selectedValues = this.selectedOptions.map(function (_b) {
+                var value = _b.value;
+                return value;
+            });
+            if (this.everyVisibleOptionsSelected(selectedValues)) {
+                this.selectedOptions = [];
+            }
+            else {
+                this.selectedOptions = this.uniqueSelectedOptions(selectedValues);
+            }
+            this.change.emit(this.selectedOptions);
+        };
         PoMultiselectDropdownComponent.prototype.updateSelectedValues = function (checked, option) {
             if (checked) {
                 this.selectedOptions.push(option);
@@ -20825,6 +20849,27 @@
             }
             this.change.emit(this.selectedOptions);
         };
+        PoMultiselectDropdownComponent.prototype.everyVisibleOptionsSelected = function (selectedValues) {
+            return this.visibleOptions.every(function (visibleOption) { return selectedValues.includes(visibleOption.value); });
+        };
+        PoMultiselectDropdownComponent.prototype.someVisibleOptionsSelected = function (selectedValues) {
+            return this.visibleOptions.some(function (visibleOption) { return selectedValues.includes(visibleOption.value); });
+        };
+        PoMultiselectDropdownComponent.prototype.getStateSelectAll = function () {
+            var selectedValues = this.selectedOptions.map(function (_b) {
+                var value = _b.value;
+                return value;
+            });
+            if (this.everyVisibleOptionsSelected(selectedValues)) {
+                return true;
+            }
+            else if (this.someVisibleOptionsSelected(selectedValues)) {
+                return null;
+            }
+            else {
+                return false;
+            }
+        };
         PoMultiselectDropdownComponent.prototype.callChangeSearch = function (event) {
             this.changeSearch.emit(event);
         };
@@ -20838,12 +20883,32 @@
                 }
             });
         };
+        PoMultiselectDropdownComponent.prototype.uniqueSelectedOptions = function (selectedValues) {
+            var e_1, _b;
+            var newSelectedOptions = __spreadArray([], __read(this.selectedOptions));
+            try {
+                for (var _c = __values(this.visibleOptions), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var visibleOption = _d.value;
+                    if (!selectedValues.includes(visibleOption.value)) {
+                        newSelectedOptions.push(visibleOption);
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return newSelectedOptions;
+        };
         return PoMultiselectDropdownComponent;
     }());
     PoMultiselectDropdownComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-multiselect-dropdown',
-                    template: "<div #container class=\"po-multiselect-container\" [hidden]=\"!show\">\n  <po-multiselect-search\n    #searchElement\n    *ngIf=\"!hideSearch\"\n    [p-literals]=\"literals\"\n    [p-placeholder]=\"placeholderSearch\"\n    (p-change)=\"callChangeSearch($event)\"\n  >\n  </po-multiselect-search>\n\n  <ul class=\"po-multiselect-items-container\" [scrollTop]=\"scrollTop\" #ulElement>\n    <div *ngIf=\"!visibleOptions.length && !isServerSearching\" class=\"po-multiselect-container-no-data po-text-center\">\n      <span> {{ literals.noData }}</span>\n    </div>\n\n    <div *ngIf=\"isServerSearching\" class=\"po-multiselect-container-loading po-text-center\">\n      <po-loading></po-loading>\n    </div>\n\n    <ng-container *ngIf=\"!isServerSearching\">\n      <po-multiselect-item\n        *ngFor=\"let option of visibleOptions\"\n        [p-label]=\"option.label\"\n        [p-selected]=\"isSelectedItem(option)\"\n        (p-change)=\"clickItem($event, option)\"\n      >\n      </po-multiselect-item>\n    </ng-container>\n  </ul>\n</div>\n"
+                    template: "<div #container class=\"po-multiselect-container\" [hidden]=\"!show\">\n  <po-multiselect-search\n    #searchElement\n    *ngIf=\"!hideSearch\"\n    [p-literals]=\"literals\"\n    [p-placeholder]=\"placeholderSearch\"\n    (p-change)=\"callChangeSearch($event)\"\n  >\n  </po-multiselect-search>\n\n  <ul class=\"po-multiselect-items-container\" [scrollTop]=\"scrollTop\" #ulElement>\n    <div *ngIf=\"!visibleOptions.length && !isServerSearching\" class=\"po-multiselect-container-no-data po-text-center\">\n      <span> {{ literals.noData }}</span>\n    </div>\n\n    <div *ngIf=\"isServerSearching\" class=\"po-multiselect-container-loading po-text-center\">\n      <po-loading></po-loading>\n    </div>\n\n    <ng-container *ngIf=\"!isServerSearching\">\n      <po-multiselect-item\n        *ngIf=\"!searchElement?.inputValue && visibleOptions.length && !hideSelectAll\"\n        [p-label]=\"literals?.selectAll\"\n        [p-selected]=\"getStateSelectAll()\"\n        (p-change)=\"onClickSelectAll()\"\n      >\n      </po-multiselect-item>\n\n      <po-multiselect-item\n        *ngFor=\"let option of visibleOptions\"\n        [p-label]=\"option.label\"\n        [p-selected]=\"isSelectedItem(option)\"\n        (p-change)=\"clickItem($event, option)\"\n      >\n      </po-multiselect-item>\n    </ng-container>\n  </ul>\n</div>\n"
                 },] }
     ];
     PoMultiselectDropdownComponent.propDecorators = {
@@ -20854,6 +20919,7 @@
         selectedOptions: [{ type: i0.Input, args: ['p-selected-options',] }],
         options: [{ type: i0.Input, args: ['p-options',] }],
         visibleOptions: [{ type: i0.Input, args: ['p-visible-options',] }],
+        hideSelectAll: [{ type: i0.Input, args: ['p-hide-select-all',] }],
         changeSearch: [{ type: i0.Output, args: ['p-change-search',] }],
         change: [{ type: i0.Output, args: ['p-change',] }],
         closeDropdown: [{ type: i0.Output, args: ['p-close-dropdown',] }],
@@ -20881,22 +20947,28 @@
     })(exports.PoMultiselectFilterMode || (exports.PoMultiselectFilterMode = {}));
 
     var PO_MULTISELECT_DEBOUNCE_TIME_DEFAULT = 400;
+    var PO_MULTISELECT_FIELD_LABEL_DEFAULT = 'label';
+    var PO_MULTISELECT_FIELD_VALUE_DEFAULT = 'value';
     var poMultiselectLiteralsDefault = {
         en: {
             noData: 'No data found',
-            placeholderSearch: 'Search'
+            placeholderSearch: 'Search',
+            selectAll: 'Select all'
         },
         es: {
             noData: 'Datos no encontrados',
-            placeholderSearch: 'Busca'
+            placeholderSearch: 'Busca',
+            selectAll: 'Seleccionar todo'
         },
         pt: {
             noData: 'Nenhum dado encontrado',
-            placeholderSearch: 'Buscar'
+            placeholderSearch: 'Buscar',
+            selectAll: 'Selecionar todos'
         },
         ru: {
             noData: 'Данные не найдены',
-            placeholderSearch: 'искать'
+            placeholderSearch: 'искать',
+            selectAll: 'Выбрать все'
         }
     };
     /**
@@ -20962,6 +21034,8 @@
             this._required = false;
             this._sort = false;
             this._autoHeight = false;
+            this._fieldLabel = PO_MULTISELECT_FIELD_LABEL_DEFAULT;
+            this._fieldValue = PO_MULTISELECT_FIELD_VALUE_DEFAULT;
             this.language = languageService.getShortLanguage();
         }
         Object.defineProperty(PoMultiselectBaseComponent.prototype, "filterService", {
@@ -20972,9 +21046,28 @@
              * @optional
              *
              * @description
-             * Nesta propriedade deve ser informado um serviço implementando a interface PoMultiselectFilter.
+             * Nesta propriedade pode ser informada a URL do serviço em que será realizado o filtro para carregamento da lista de itens no componente.
+             *
+             *Também existe a possibilidade de informar um serviço implementando a interface `PoMultiselectFilter`.
+             *
+             *Caso utilizado uma URL, o serviço deve ser retornado no padrão [API PO UI](https://po-ui.io/guides/api) e utilizar as propriedades `p-field-label` e `p-field-value` para a construção da lista de itens.
+             *
+             *Quando utilizada uma URL de serviço, então será concatenada nesta URL o valor que deseja-se filtrar da seguinte forma:
+             *
+             *```
+             * // caso filtrar por "Peter"
+             *  https://localhost:8080/api/heroes?filter=Peter
+             *```
+             *
+             *E caso iniciar o campo com valor, os itens serão buscados da seguinte forma:
+             *
+             *```
+             * // caso o valor do campo for [1234, 5678];
+             *  https://localhost:8080/api/heroes?value=1234,5678
+             *
+             * //O *value* é referente ao `fieldValue`.
+             *```
              *
-             * > Definirá por padrão a propriedade `p-auto-height` como `true`, mas a mesma pode ser redefinida caso necessário.
              */
             set: function (value) {
                 this._filterService = value;
@@ -21218,15 +21311,76 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(PoMultiselectBaseComponent.prototype, "fieldLabel", {
+            get: function () {
+                return this._fieldLabel;
+            },
+            /**
+             * @optional
+             *
+             * @description
+             * Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente
+             * (`p-options`), esta propriedade será responsável pelo texto de apresentação de cada item da lista.
+             *
+             * Necessário quando informar o serviço como URL e o mesmo não estiver retornando uma lista de objetos no padrão da interface
+             * `PoMultiSelectOption`.
+             *
+             * @default `label`
+             */
+            set: function (value) {
+                this._fieldLabel = value || PO_MULTISELECT_FIELD_LABEL_DEFAULT;
+                if (isTypeof(this.filterService, 'string') && this.service) {
+                    this.service.fieldLabel = this._fieldLabel;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PoMultiselectBaseComponent.prototype, "fieldValue", {
+            get: function () {
+                return this._fieldValue;
+            },
+            /**
+             * @optional
+             *
+             * @description
+             * Deve ser informado o nome da propriedade do objeto que será utilizado para a conversão dos itens apresentados na lista do componente
+             * (`p-options`), esta propriedade será responsável pelo valor de cada item da lista.
+             *
+             * Necessário quando informar o serviço como URL e o mesmo não estiver retornando uma lista de objetos no padrão da interface
+             * `PoMultiSelectOption`.
+             *
+             * @default `value`
+             */
+            set: function (value) {
+                this._fieldValue = value || PO_MULTISELECT_FIELD_VALUE_DEFAULT;
+                if (isTypeof(this.filterService, 'string') && this.service) {
+                    this.service.fieldValue = this._fieldValue;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         PoMultiselectBaseComponent.prototype.ngOnInit = function () {
             var _this = this;
             if (this.filterService) {
-                this.filterSubject
-                    .pipe(operators.debounceTime(this.debounceTime), operators.distinctUntilChanged(), operators.tap(function () { return (_this.isServerSearching = true); }), operators.switchMap(function (search) { return _this.applyFilter(search); }), operators.tap(function () { return (_this.isServerSearching = false); }))
-                    .subscribe();
+                this.setService(this.filterService);
             }
+            this.filterSubject
+                .pipe(operators.debounceTime(this.debounceTime), operators.distinctUntilChanged(), operators.tap(function () { return (_this.isServerSearching = true); }), operators.switchMap(function (search) { return _this.applyFilter(search); }), operators.tap(function () { return (_this.isServerSearching = false); }))
+                .subscribe();
             this.updateList(this.options);
         };
+        PoMultiselectBaseComponent.prototype.setService = function (service) {
+            if (isTypeof(service, 'object')) {
+                this.service = service;
+            }
+            else {
+                this.service = this.defaultService;
+                this.service.configProperties(service, this.fieldLabel, this.fieldValue);
+            }
+            this.isFirstFilter = true;
+        };
         PoMultiselectBaseComponent.prototype.validAndSortOptions = function () {
             if (this.options && this.options.length) {
                 removeUndefinedAndNullOptions(this.options);
@@ -21279,6 +21433,9 @@
                 });
                 this.visibleOptionsDropdown = newOptions_1;
             }
+            else {
+                this.visibleOptionsDropdown = __spreadArray([], __read(options));
+            }
         };
         PoMultiselectBaseComponent.prototype.compareMethod = function (search, option, filterMode) {
             switch (filterMode) {
@@ -21330,8 +21487,8 @@
         PoMultiselectBaseComponent.prototype.writeValue = function (values) {
             var _this = this;
             values = values || [];
-            if (this.filterService && values.length) {
-                this.getObjectsByValuesSubscription = this.filterService.getObjectsByValues(values).subscribe(function (options) {
+            if (this.service && values.length) {
+                this.getObjectsByValuesSubscription = this.service.getObjectsByValues(values).subscribe(function (options) {
                     _this.updateSelectedOptions(options);
                     _this.callOnChange(_this.selectedOptions);
                 });
@@ -21379,6 +21536,7 @@
         placeholder: [{ type: i0.Input, args: ['p-placeholder',] }],
         placeholderSearch: [{ type: i0.Input, args: ['p-placeholder-search',] }],
         name: [{ type: i0.Input, args: ['name',] }],
+        hideSelectAll: [{ type: i0.Input, args: ['p-hide-select-all',] }],
         change: [{ type: i0.Output, args: ['p-change',] }],
         filterService: [{ type: i0.Input, args: ['p-filter-service',] }],
         autoHeight: [{ type: i0.Input, args: ['p-auto-height',] }],
@@ -21389,19 +21547,81 @@
         hideSearch: [{ type: i0.Input, args: ['p-hide-search',] }],
         options: [{ type: i0.Input, args: ['p-options',] }],
         sort: [{ type: i0.Input, args: ['p-sort',] }],
-        filterMode: [{ type: i0.Input, args: ['p-filter-mode',] }]
+        filterMode: [{ type: i0.Input, args: ['p-filter-mode',] }],
+        fieldLabel: [{ type: i0.Input, args: ['p-field-label',] }],
+        fieldValue: [{ type: i0.Input, args: ['p-field-value',] }]
     };
     __decorate([
         InputBoolean()
     ], PoMultiselectBaseComponent.prototype, "autoFocus", void 0);
+    __decorate([
+        InputBoolean()
+    ], PoMultiselectBaseComponent.prototype, "hideSelectAll", void 0);
     __decorate([
         InputBoolean()
     ], PoMultiselectBaseComponent.prototype, "autoHeight", null);
 
+    var PoMultiselectFilterService = /** @class */ (function () {
+        function PoMultiselectFilterService(http) {
+            this.http = http;
+            this.fieldLabel = 'label';
+            this.fieldValue = 'value';
+            this.messages = [];
+        }
+        Object.defineProperty(PoMultiselectFilterService.prototype, "url", {
+            get: function () {
+                return this._url;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PoMultiselectFilterService.prototype.getFilteredData = function (_a) {
+            var _this = this;
+            var value = _a.value;
+            var params = value ? { filter: value } : {};
+            return this.http
+                .get(this.url, {
+                params: params
+            })
+                .pipe(operators.map(function (response) { return _this.parseToArrayMultiselectOptions(response['items']); }));
+        };
+        PoMultiselectFilterService.prototype.getObjectsByValues = function (value) {
+            var _this = this;
+            return this.http
+                .get(this.url + "?" + this.fieldValue + "=" + value.toString())
+                .pipe(operators.map(function (response) { return _this.parseToArrayMultiselectOptions(response['items']); }));
+        };
+        PoMultiselectFilterService.prototype.configProperties = function (url, fieldLabel, fieldValue) {
+            this._url = url;
+            this.fieldLabel = fieldLabel;
+            this.fieldValue = fieldValue;
+        };
+        PoMultiselectFilterService.prototype.parseToArrayMultiselectOptions = function (items) {
+            var _this = this;
+            if (items && items.length > 0) {
+                return items.map(function (item) { return _this.parseToMultiselectOption(item); });
+            }
+            return [];
+        };
+        PoMultiselectFilterService.prototype.parseToMultiselectOption = function (item) {
+            var label = item[this.fieldLabel];
+            var value = item[this.fieldValue];
+            return { label: label, value: value };
+        };
+        return PoMultiselectFilterService;
+    }());
+    PoMultiselectFilterService.decorators = [
+        { type: i0.Injectable }
+    ];
+    PoMultiselectFilterService.ctorParameters = function () { return [
+        { type: i1.HttpClient }
+    ]; };
+
     var poMultiselectContainerOffset = 8;
     var poMultiselectContainerPositionDefault = 'bottom';
     /* istanbul ignore next */
     var providers$1 = [
+        PoMultiselectFilterService,
         PoControlPositionService,
         {
             provide: forms.NG_VALUE_ACCESSOR,
@@ -21449,12 +21669,13 @@
      */
     var PoMultiselectComponent = /** @class */ (function (_super) {
         __extends(PoMultiselectComponent, _super);
-        function PoMultiselectComponent(renderer, changeDetector, el, controlPosition, languageService) {
+        function PoMultiselectComponent(renderer, changeDetector, el, controlPosition, defaultService, languageService) {
             var _this = _super.call(this, languageService) || this;
             _this.renderer = renderer;
             _this.changeDetector = changeDetector;
             _this.el = el;
             _this.controlPosition = controlPosition;
+            _this.defaultService = defaultService;
             _this.disclaimerOffset = 0;
             _this.dropdownIcon = 'po-icon-arrow-down';
             _this.dropdownOpen = false;
@@ -21472,6 +21693,11 @@
             }
             this.initialized = true;
         };
+        PoMultiselectComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.filterService || changes.fieldValue || changes.fieldLabel) {
+                this.setService(this.filterService);
+            }
+        };
         PoMultiselectComponent.prototype.ngDoCheck = function () {
             var inputWidth = this.inputElement.nativeElement.offsetWidth;
             // Permite que os disclaimers sejam calculados na primeira vez que o componente torna-se visível,
@@ -21654,7 +21880,7 @@
             var _this = this;
             if (value === void 0) { value = ''; }
             var param = { property: 'label', value: value };
-            return this.filterService.getFilteredData(param).pipe(operators.catchError(function (err) {
+            return this.service.getFilteredData(param).pipe(operators.catchError(function (err) {
                 _this.isServerSearching = false;
                 return rxjs.of([]);
             }), operators.tap(function (options) {
@@ -21664,7 +21890,10 @@
         PoMultiselectComponent.prototype.applyFilterInFirstClick = function () {
             if (this.isFirstFilter) {
                 this.isServerSearching = true;
-                this.filterSubject.next();
+                // necessario enviar um objeto string vazia para refazer a busca, quando alterar filterService, fieldValue e fieldLabel
+                // pois temos o distinctUntilChange no pipe do filterSubject
+                /* eslint-disable no-new-wrappers */
+                this.filterSubject.next(new String());
             }
             else {
                 this.options = __spreadArray([], __read(this.cacheOptions));
@@ -21727,7 +21956,7 @@
     PoMultiselectComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-multiselect',
-                    template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\" [class.po-multiselect-show]=\"dropdownOpen\">\n    <div\n      #inputElement\n      [tabindex]=\"disabled ? -1 : 0\"\n      class=\"po-input po-input-icon-right po-multiselect-input po-clickable\"\n      [class.po-multiselect-input-auto]=\"autoHeight\"\n      [class.po-multiselect-input-static]=\"!autoHeight\"\n      [class.po-multiselect-input-disabled]=\"disabled\"\n      (keyup.enter)=\"toggleDropdownVisibility()\"\n      (keydown)=\"onKeyDown($event)\"\n      (click)=\"toggleDropdownVisibility()\"\n      (blur)=\"onBlur()\"\n    >\n      <span *ngIf=\"placeholder && !visibleDisclaimers?.length\" class=\"po-multiselect-input-placeholder\">\n        {{ placeholder }}\n      </span>\n\n      <po-disclaimer\n        *ngFor=\"let disclaimer of visibleDisclaimers\"\n        class=\"po-multiselect-input-disclaimer\"\n        [p-label]=\"disclaimer.label\"\n        [p-value]=\"disclaimer.value\"\n        [p-hide-close]=\"disclaimer.value === '' || disabled\"\n        [class.po-clickable]=\"disclaimer.value === '' && !disabled\"\n        (click)=\"openDropdown(disclaimer.value === '')\"\n        (p-close-action)=\"closeDisclaimer(disclaimer.value)\"\n      >\n      </po-disclaimer>\n\n      <div class=\"po-field-icon-container-right\">\n        <span\n          #iconElement\n          class=\"po-icon po-field-icon {{ dropdownIcon }}\"\n          [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n        >\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <po-multiselect-dropdown\n    #dropdownElement\n    [p-searching]=\"isServerSearching\"\n    [p-hide-search]=\"hideSearch\"\n    [p-literals]=\"literals\"\n    [p-options]=\"options\"\n    [p-visible-options]=\"visibleOptionsDropdown\"\n    [p-selected-options]=\"selectedOptions\"\n    [p-placeholder-search]=\"placeholderSearch\"\n    (p-change)=\"changeItems($event)\"\n    (p-change-search)=\"changeSearch($event)\"\n    (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n  >\n  </po-multiselect-dropdown>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n",
+                    template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\" [class.po-multiselect-show]=\"dropdownOpen\">\n    <div\n      #inputElement\n      [tabindex]=\"disabled ? -1 : 0\"\n      class=\"po-input po-input-icon-right po-multiselect-input po-clickable\"\n      [class.po-multiselect-input-auto]=\"autoHeight\"\n      [class.po-multiselect-input-static]=\"!autoHeight\"\n      [class.po-multiselect-input-disabled]=\"disabled\"\n      (keyup.enter)=\"toggleDropdownVisibility()\"\n      (keydown)=\"onKeyDown($event)\"\n      (click)=\"toggleDropdownVisibility()\"\n      (blur)=\"onBlur()\"\n    >\n      <span *ngIf=\"placeholder && !visibleDisclaimers?.length\" class=\"po-multiselect-input-placeholder\">\n        {{ placeholder }}\n      </span>\n\n      <po-disclaimer\n        *ngFor=\"let disclaimer of visibleDisclaimers\"\n        class=\"po-multiselect-input-disclaimer\"\n        [p-label]=\"disclaimer.label\"\n        [p-value]=\"disclaimer.value\"\n        [p-hide-close]=\"disclaimer.value === '' || disabled\"\n        [class.po-clickable]=\"disclaimer.value === '' && !disabled\"\n        (click)=\"openDropdown(disclaimer.value === '')\"\n        (p-close-action)=\"closeDisclaimer(disclaimer.value)\"\n      >\n      </po-disclaimer>\n\n      <div class=\"po-field-icon-container-right\">\n        <span\n          #iconElement\n          class=\"po-icon po-field-icon {{ dropdownIcon }}\"\n          [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n        >\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <po-multiselect-dropdown\n    #dropdownElement\n    [p-searching]=\"isServerSearching\"\n    [p-hide-search]=\"hideSearch\"\n    [p-hide-select-all]=\"hideSelectAll\"\n    [p-literals]=\"literals\"\n    [p-options]=\"options\"\n    [p-visible-options]=\"visibleOptionsDropdown\"\n    [p-selected-options]=\"selectedOptions\"\n    [p-placeholder-search]=\"placeholderSearch\"\n    (p-change)=\"changeItems($event)\"\n    (p-change-search)=\"changeSearch($event)\"\n    (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n  >\n  </po-multiselect-dropdown>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n",
                     providers: providers$1
                 },] }
     ];
@@ -21736,6 +21965,7 @@
         { type: i0.ChangeDetectorRef },
         { type: i0.ElementRef },
         { type: PoControlPositionService },
+        { type: PoMultiselectFilterService },
         { type: PoLanguageService }
     ]; };
     PoMultiselectComponent.propDecorators = {
@@ -21754,7 +21984,7 @@
      */
     var PoMultiselectItemComponent = /** @class */ (function () {
         function PoMultiselectItemComponent() {
-            /** Esta propriedade indica se o campo está selecionado ou não. */
+            /** Esta propriedade indica se o campo está selecionado, indenterminate ou não. */
             this.selected = false;
             /** Evento que será disparado toda vez que o usuário marcar ou desmarcar um item. */
             this.change = new i0.EventEmitter();
@@ -21768,7 +21998,7 @@
     PoMultiselectItemComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-multiselect-item',
-                    template: "<li [class.po-multiselect-item-selected]=\"selected\" (click)=\"itemClicked()\">\n  <a class=\"po-multiselect-item\">\n    <input\n      [checked]=\"selected\"\n      class=\"po-multiselect-checkbox-input\"\n      [class.po-multiselect-checkbox-input-checked]=\"selected\"\n      type=\"checkbox\"\n    />\n\n    <label class=\"po-multiselect-checkbox-label po-clickable\">\n      {{ label }}\n    </label>\n  </a>\n</li>\n",
+                    template: "<li [class.po-multiselect-item-selected]=\"selected\" (click)=\"itemClicked()\">\n  <a class=\"po-multiselect-item\">\n    <input\n      [checked]=\"selected\"\n      class=\"po-multiselect-checkbox-input\"\n      [class.po-multiselect-checkbox-input-indeterminate]=\"selected === null\"\n      [class.po-multiselect-checkbox-input-checked]=\"selected\"\n      type=\"checkbox\"\n    />\n\n    <label class=\"po-multiselect-checkbox-label po-clickable\">\n      {{ label }}\n    </label>\n  </a>\n</li>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
@@ -21811,6 +22041,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(PoMultiselectSearchComponent.prototype, "inputValue", {
+            get: function () {
+                return this.inputElement.nativeElement.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         PoMultiselectSearchComponent.prototype.onChange = function (event) {
             this.change.emit({ event: event, value: this.inputElement.nativeElement.value });
         };
@@ -23039,8 +23276,8 @@
     var PoInputComponent = /** @class */ (function (_super) {
         __extends(PoInputComponent, _super);
         /* istanbul ignore next */
-        function PoInputComponent(el) {
-            return _super.call(this, el) || this;
+        function PoInputComponent(el, cd) {
+            return _super.call(this, el, cd) || this;
         }
         PoInputComponent.prototype.extraValidation = function (c) {
             return null;
@@ -23062,11 +23299,13 @@
                             useExisting: i0.forwardRef(function () { return PoInputComponent; }),
                             multi: true
                         }
-                    ]
+                    ],
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     PoInputComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef }
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef }
     ]; };
 
     var PoNumberBaseComponent = /** @class */ (function (_super) {
@@ -27722,16 +27961,17 @@
         };
         PoDynamicFormFieldsComponent.prototype.onChangeField = function (visibleField, objectValue) {
             return __awaiter(this, void 0, void 0, function () {
-                var property, isChangedValueField, _b, changedField, changedFieldIndex;
+                var property, isBooleanType, isChangedValueField, _b, changedField, changedFieldIndex;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
                             property = visibleField.property;
+                            isBooleanType = visibleField.type === 'boolean';
                             isChangedValueField = this.previousValue[property] !== this.value[property];
                             if (visibleField.optionsService) {
                                 this.objectValue.emit(objectValue);
                             }
-                            if (!(this.form.touched && isChangedValueField)) return [3 /*break*/, 3];
+                            if (!((this.form.touched || isBooleanType) && isChangedValueField)) return [3 /*break*/, 3];
                             _b = this.getField(property), changedField = _b.changedField, changedFieldIndex = _b.changedFieldIndex;
                             if (!changedField.validate) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.validateField(changedField, changedFieldIndex, visibleField)];
@@ -36961,7 +37201,11 @@
             this.closed.emit();
         };
         PoHttpInterceptorDetailComponent.prototype.formatDetailItemTitle = function (detail) {
-            return detail.code ? detail.code + " - " + detail.message : detail.message;
+            return detail.detailTitle
+                ? detail.detailTitle
+                : detail.code
+                    ? detail.code + " - " + detail.message
+                    : detail.message;
         };
         PoHttpInterceptorDetailComponent.prototype.open = function () {
             this.modal.open();
@@ -36976,22 +37220,28 @@
             return detail.message ? newDetails.concat(this.getValidDetailProperties(detail)) : newDetails;
         };
         PoHttpInterceptorDetailComponent.prototype.getValidDetailProperties = function (_a) {
-            var code = _a.code, message = _a.message, detailedMessage = _a.detailedMessage, type = _a.type;
-            return { code: code, message: message, detailedMessage: detailedMessage, type: type };
+            var code = _a.code, message = _a.message, detailedMessage = _a.detailedMessage, type = _a.type, detailTitle = _a.detailTitle;
+            return detailTitle
+                ? { code: code, message: message, detailedMessage: detailedMessage, type: type, detailTitle: detailTitle }
+                : { code: code, message: message, detailedMessage: detailedMessage, type: type };
         };
         PoHttpInterceptorDetailComponent.prototype.filterByValidDetails = function (details) {
             var _this = this;
             return details.reduce(function (newDetails, detail) { return _this.addValidDetail(newDetails, detail); }, []);
         };
         PoHttpInterceptorDetailComponent.prototype.formatTitle = function (details) {
-            return details.length > 1 ? this.literals.details + " (" + details.length + ")" : this.literals.detail;
+            return details.length > 1
+                ? this.literals.details + " (" + details.length + ")"
+                : details.length === 1
+                    ? this.formatDetailItemTitle(details[0])
+                    : this.literals.detail;
         };
         return PoHttpInterceptorDetailComponent;
     }());
     PoHttpInterceptorDetailComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-http-interceptor-detail',
-                    template: "<po-modal p-hide-close p-size=\"lg\" [p-primary-action]=\"primaryAction\" [p-title]=\"title\">\n  <div class=\"po-row\">\n    <po-accordion class=\"po-md-12 po-mt-1 po-mb-1\">\n      <po-accordion-item *ngFor=\"let detail of details\" [p-label]=\"formatDetailItemTitle(detail)\">\n        <div *ngIf=\"detail.type\" class=\"po-row po-mb-1\">\n          <po-tag [p-color]=\"typeColor(detail.type)\" [p-value]=\"typeValue(detail.type)\"></po-tag>\n        </div>\n\n        <div class=\"po-row\">\n          <p>{{ detail.detailedMessage }}</p>\n        </div>\n      </po-accordion-item>\n    </po-accordion>\n  </div>\n</po-modal>\n"
+                    template: "<po-modal p-hide-close p-size=\"lg\" [p-primary-action]=\"primaryAction\" [p-title]=\"title\">\n  <div class=\"po-row\">\n    <po-accordion class=\"po-md-12 po-mt-1 po-mb-1\" *ngIf=\"details.length > 1; else elseBlock\">\n      <po-accordion-item *ngFor=\"let detail of details\" [p-label]=\"formatDetailItemTitle(detail)\">\n        <ng-template [ngTemplateOutlet]=\"body\" [ngTemplateOutletContext]=\"{detail}\"></ng-template>\n      </po-accordion-item>\n    </po-accordion>\n  </div>\n</po-modal>\n\n<ng-template #elseBlock>\n  <ng-container [ngTemplateOutlet]=\"body\" [ngTemplateOutletContext]=\"{ detail: details[0] || {} }\"></ng-container>\n</ng-template>\n\n<ng-template #body let-detail=\"detail\">\n  <div *ngIf=\"detail.type\" class=\"po-row po-mb-1\">\n    <po-tag [p-color]=\"typeColor(detail.type)\" [p-value]=\"typeValue(detail.type)\"></po-tag>\n  </div>\n\n  <p *ngIf=\"detail.detailTitle\">\n    <strong>{{ detail.code }}</strong>\n  </p>\n\n  <div class=\"po-row\">\n    <p>{{ detail.detailedMessage }}</p>\n  </div>\n</ng-template>\n"
                 },] }
     ];
     PoHttpInterceptorDetailComponent.ctorParameters = function () { return [
@@ -37128,6 +37378,7 @@
      *    - Caso for informado, será exibido uma ação de "Ajuda" na notificação, para isso não deverá ter a propriedade `detailedMessage`.
      * - `type`: É possível informar `error`, `warning` e `information`, sendo `error` o valor padrão.
      * - `details`: Uma lista de objetos de mensagem (recursiva) com mais detalhes sobre a mensagem principal.
+     * - `detailTitle`: caso for informado, será apresentado como título dos detalhes substituindo o padrão `code - message`
      *
      * > Veja o [Guia de implementação de APIs](guides/api) para mais detalhes sobre a estrutura das mensagens.
      *
@@ -37441,15 +37692,9 @@
             request = this.requestCloneWithoutHeaderParam([noCountPendingRequests, screenLock], request);
             this.setCountPendingRequests(true, requestClone);
             this.setCountOverlayRequests(true, requestClone);
-            return next.handle(request).pipe(operators.tap(function (response) {
-                if (response instanceof i1.HttpResponse) {
-                    _this.setCountPendingRequests(false, requestClone);
-                    _this.setCountOverlayRequests(false, requestClone);
-                }
-            }), operators.catchError(function (error) {
+            return next.handle(request).pipe(operators.finalize(function () {
                 _this.setCountPendingRequests(false, requestClone);
                 _this.setCountOverlayRequests(false, requestClone);
-                return rxjs.throwError(error);
             }));
         };
         PoHttpRequestInterceptorService.prototype.getCountPendingRequests = function () {
@@ -38515,112 +38760,113 @@
     exports.ɵdr = PoLookupModalService;
     exports.ɵds = PoLookupModalBaseComponent;
     exports.ɵdt = PoMultiselectBaseComponent;
-    exports.ɵdu = PoNumberBaseComponent;
-    exports.ɵdv = PoRadioGroupBaseComponent;
-    exports.ɵdw = PoRichTextBaseComponent;
-    exports.ɵdx = PoRichTextService;
-    exports.ɵdy = PoRichTextBodyComponent;
-    exports.ɵdz = PoSelectBaseComponent;
+    exports.ɵdu = PoMultiselectFilterService;
+    exports.ɵdv = PoNumberBaseComponent;
+    exports.ɵdw = PoRadioGroupBaseComponent;
+    exports.ɵdx = PoRichTextBaseComponent;
+    exports.ɵdy = PoRichTextService;
+    exports.ɵdz = PoRichTextBodyComponent;
     exports.ɵe = PoAvatarBaseComponent;
-    exports.ɵea = PoSwitchBaseComponent;
-    exports.ɵeb = PoTextareaBaseComponent;
-    exports.ɵec = PoUploadBaseComponent;
-    exports.ɵed = PoUploadService;
-    exports.ɵee = PoUploadBaseService;
-    exports.ɵef = PoUploadDragDropComponent;
-    exports.ɵeg = PoUploadDragDropAreaComponent;
-    exports.ɵeh = PoNotificationBaseService;
-    exports.ɵei = PoMultiselectDropdownComponent;
-    exports.ɵej = PoMultiselectItemComponent;
-    exports.ɵek = PoMultiselectSearchComponent;
-    exports.ɵel = PoRichTextImageModalComponent;
-    exports.ɵem = PoRichTextLinkModalComponent;
-    exports.ɵen = PoRichTextToolbarComponent;
-    exports.ɵeo = PoUploadDragDropDirective;
-    exports.ɵep = PoUploadDragDropAreaOverlayComponent;
-    exports.ɵeq = PoUploadFileRestrictionsComponent;
-    exports.ɵer = PoTagBaseComponent;
-    exports.ɵes = PoDynamicFormBaseComponent;
-    exports.ɵet = PoDynamicFormLoadService;
-    exports.ɵeu = PoDynamicFormOperation;
-    exports.ɵev = PoDynamicFormValidationService;
-    exports.ɵew = PoDynamicFormFieldsComponent;
-    exports.ɵex = PoDynamicFormFieldsBaseComponent;
-    exports.ɵey = PoDynamicViewBaseComponent;
-    exports.ɵez = PoDynamicViewService;
+    exports.ɵea = PoSelectBaseComponent;
+    exports.ɵeb = PoSwitchBaseComponent;
+    exports.ɵec = PoTextareaBaseComponent;
+    exports.ɵed = PoUploadBaseComponent;
+    exports.ɵee = PoUploadService;
+    exports.ɵef = PoUploadBaseService;
+    exports.ɵeg = PoUploadDragDropComponent;
+    exports.ɵeh = PoUploadDragDropAreaComponent;
+    exports.ɵei = PoNotificationBaseService;
+    exports.ɵej = PoMultiselectDropdownComponent;
+    exports.ɵek = PoMultiselectItemComponent;
+    exports.ɵel = PoMultiselectSearchComponent;
+    exports.ɵem = PoRichTextImageModalComponent;
+    exports.ɵen = PoRichTextLinkModalComponent;
+    exports.ɵeo = PoRichTextToolbarComponent;
+    exports.ɵep = PoUploadDragDropDirective;
+    exports.ɵeq = PoUploadDragDropAreaOverlayComponent;
+    exports.ɵer = PoUploadFileRestrictionsComponent;
+    exports.ɵes = PoTagBaseComponent;
+    exports.ɵet = PoDynamicFormBaseComponent;
+    exports.ɵeu = PoDynamicFormLoadService;
+    exports.ɵev = PoDynamicFormOperation;
+    exports.ɵew = PoDynamicFormValidationService;
+    exports.ɵex = PoDynamicFormFieldsComponent;
+    exports.ɵey = PoDynamicFormFieldsBaseComponent;
+    exports.ɵez = PoDynamicViewBaseComponent;
     exports.ɵf = PoBreadcrumbBaseComponent;
-    exports.ɵfa = PoGaugeBaseComponent;
-    exports.ɵfb = PoGaugeTitleComponent;
-    exports.ɵfc = PoGaugeLegendComponent;
-    exports.ɵfd = PoGaugeSvgComponent;
-    exports.ɵfe = PoGaugePathComponent;
-    exports.ɵff = PoGaugeDescriptionComponent;
-    exports.ɵfg = PoGaugePointerComponent;
-    exports.ɵfh = PoGridCellActionComponent;
-    exports.ɵfi = PoGridCellComponent;
-    exports.ɵfj = PoGridHeadComponent;
-    exports.ɵfk = PoListViewBaseComponent;
-    exports.ɵfl = PoBadgeModule;
-    exports.ɵfm = PoBadgeComponent;
-    exports.ɵfn = PoBadgeBaseComponent;
-    exports.ɵfo = PoMenuBaseComponent;
-    exports.ɵfp = PoMenuService;
-    exports.ɵfq = PoMenuItemsService;
-    exports.ɵfr = PoMenuFilterComponent;
-    exports.ɵfs = PoMenuItemComponent;
-    exports.ɵft = PoMenuPanelBaseComponent;
-    exports.ɵfu = PoMenuPanelItemsService;
-    exports.ɵfv = PoMenuPanelItemComponent;
-    exports.ɵfw = PoNavbarActionsModule;
-    exports.ɵfx = PoNavbarActionComponent;
-    exports.ɵfy = PoNavbarActionPopupComponent;
-    exports.ɵfz = PoNavbarActionsComponent;
+    exports.ɵfa = PoDynamicViewService;
+    exports.ɵfb = PoGaugeBaseComponent;
+    exports.ɵfc = PoGaugeTitleComponent;
+    exports.ɵfd = PoGaugeLegendComponent;
+    exports.ɵfe = PoGaugeSvgComponent;
+    exports.ɵff = PoGaugePathComponent;
+    exports.ɵfg = PoGaugeDescriptionComponent;
+    exports.ɵfh = PoGaugePointerComponent;
+    exports.ɵfi = PoGridCellActionComponent;
+    exports.ɵfj = PoGridCellComponent;
+    exports.ɵfk = PoGridHeadComponent;
+    exports.ɵfl = PoListViewBaseComponent;
+    exports.ɵfm = PoBadgeModule;
+    exports.ɵfn = PoBadgeComponent;
+    exports.ɵfo = PoBadgeBaseComponent;
+    exports.ɵfp = PoMenuBaseComponent;
+    exports.ɵfq = PoMenuService;
+    exports.ɵfr = PoMenuItemsService;
+    exports.ɵfs = PoMenuFilterComponent;
+    exports.ɵft = PoMenuItemComponent;
+    exports.ɵfu = PoMenuPanelBaseComponent;
+    exports.ɵfv = PoMenuPanelItemsService;
+    exports.ɵfw = PoMenuPanelItemComponent;
+    exports.ɵfx = PoNavbarActionsModule;
+    exports.ɵfy = PoNavbarActionComponent;
+    exports.ɵfz = PoNavbarActionPopupComponent;
     exports.ɵg = PoBreadcrumbDropdownComponent;
-    exports.ɵga = PoNavbarItemsModule;
-    exports.ɵgb = PoNavbarItemComponent;
-    exports.ɵgc = PoNavbarItemsComponent;
-    exports.ɵgd = PoNavbarItemNavigationModule;
-    exports.ɵge = PoNavbarItemNavigationComponent;
-    exports.ɵgf = PoNavbarItemNavigationIconComponent;
-    exports.ɵgg = PoNavbarBaseComponent;
-    exports.ɵgh = PoNavbarLogoComponent;
-    exports.ɵgi = PoPageComponent;
-    exports.ɵgj = PoPageBaseComponent;
-    exports.ɵgk = PoPageContentComponent;
-    exports.ɵgl = PoPageContentBaseComponent;
-    exports.ɵgm = PoPageDefaultBaseComponent;
-    exports.ɵgn = PoPageDetailBaseComponent;
-    exports.ɵgo = PoPageEditBaseComponent;
-    exports.ɵgp = PoPageHeaderComponent;
-    exports.ɵgq = PoPageHeaderBaseComponent;
-    exports.ɵgr = PoPageListBaseComponent;
-    exports.ɵgs = PoPageSlideBaseComponent;
-    exports.ɵgt = PoSlideCirclesComponent;
-    exports.ɵgu = PoSlideBaseComponent;
-    exports.ɵgv = PoSlideItemComponent;
-    exports.ɵgw = PoSlideControlComponent;
-    exports.ɵgx = PoStepperCircleComponent;
-    exports.ɵgy = PoStepperBaseComponent;
-    exports.ɵgz = PoStepperLabelComponent;
+    exports.ɵga = PoNavbarActionsComponent;
+    exports.ɵgb = PoNavbarItemsModule;
+    exports.ɵgc = PoNavbarItemComponent;
+    exports.ɵgd = PoNavbarItemsComponent;
+    exports.ɵge = PoNavbarItemNavigationModule;
+    exports.ɵgf = PoNavbarItemNavigationComponent;
+    exports.ɵgg = PoNavbarItemNavigationIconComponent;
+    exports.ɵgh = PoNavbarBaseComponent;
+    exports.ɵgi = PoNavbarLogoComponent;
+    exports.ɵgj = PoPageComponent;
+    exports.ɵgk = PoPageBaseComponent;
+    exports.ɵgl = PoPageContentComponent;
+    exports.ɵgm = PoPageContentBaseComponent;
+    exports.ɵgn = PoPageDefaultBaseComponent;
+    exports.ɵgo = PoPageDetailBaseComponent;
+    exports.ɵgp = PoPageEditBaseComponent;
+    exports.ɵgq = PoPageHeaderComponent;
+    exports.ɵgr = PoPageHeaderBaseComponent;
+    exports.ɵgs = PoPageListBaseComponent;
+    exports.ɵgt = PoPageSlideBaseComponent;
+    exports.ɵgu = PoSlideCirclesComponent;
+    exports.ɵgv = PoSlideBaseComponent;
+    exports.ɵgw = PoSlideItemComponent;
+    exports.ɵgx = PoSlideControlComponent;
+    exports.ɵgy = PoStepperCircleComponent;
+    exports.ɵgz = PoStepperBaseComponent;
     exports.ɵh = PoBreadcrumbFavoriteComponent;
-    exports.ɵha = PoStepperStepComponent;
-    exports.ɵhb = PoTabButtonComponent;
-    exports.ɵhc = PoTabBaseComponent;
-    exports.ɵhd = PoTabDropdownComponent;
-    exports.ɵhe = PoTabsBaseComponent;
-    exports.ɵhf = PoToolbarActionsComponent;
-    exports.ɵhg = PoToolbarBaseComponent;
-    exports.ɵhh = PoToolbarNotificationComponent;
-    exports.ɵhi = PoToolbarProfileComponent;
-    exports.ɵhj = PoTreeViewBaseComponent;
-    exports.ɵhk = PoTreeViewService;
-    exports.ɵhl = PoTreeViewItemComponent;
-    exports.ɵhm = PoTreeViewItemHeaderComponent;
-    exports.ɵhn = PoWidgetBaseComponent;
-    exports.ɵho = PoHttpInterceptorDetailComponent;
-    exports.ɵhp = PoHttpInterceptorBaseService;
-    exports.ɵhq = PoHttpRequesControltService;
-    exports.ɵhr = PoI18nBaseService;
+    exports.ɵha = PoStepperLabelComponent;
+    exports.ɵhb = PoStepperStepComponent;
+    exports.ɵhc = PoTabButtonComponent;
+    exports.ɵhd = PoTabBaseComponent;
+    exports.ɵhe = PoTabDropdownComponent;
+    exports.ɵhf = PoTabsBaseComponent;
+    exports.ɵhg = PoToolbarActionsComponent;
+    exports.ɵhh = PoToolbarBaseComponent;
+    exports.ɵhi = PoToolbarNotificationComponent;
+    exports.ɵhj = PoToolbarProfileComponent;
+    exports.ɵhk = PoTreeViewBaseComponent;
+    exports.ɵhl = PoTreeViewService;
+    exports.ɵhm = PoTreeViewItemComponent;
+    exports.ɵhn = PoTreeViewItemHeaderComponent;
+    exports.ɵho = PoWidgetBaseComponent;
+    exports.ɵhp = PoHttpInterceptorDetailComponent;
+    exports.ɵhq = PoHttpInterceptorBaseService;
+    exports.ɵhr = PoHttpRequesControltService;
+    exports.ɵhs = PoI18nBaseService;
     exports.ɵi = PoBreadcrumbFavoriteService;
     exports.ɵj = PoBreadcrumbItemComponent;
     exports.ɵk = PoLoadingBaseComponent;