@po-ui/ng-components 5.10.0 → 5.13.1

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

@@ -3840,15 +3840,26 @@
             configurable: true
         });
         PoCalendarBaseComponent.prototype.setActivateDate = function (date) {
+            var activateDate = date ? date : this.verifyActivateDate();
             if (this.isRange) {
-                var checkedStart = new Date(date || this.today);
+                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 };
             }
             else {
-                this.activateDate = date instanceof Date ? new Date(date) : new Date(date || this.today);
+                this.activateDate = new Date(activateDate);
             }
         };
+        PoCalendarBaseComponent.prototype.verifyActivateDate = function () {
+            var today = this.today;
+            if (this.minDate && this.minDate > this.today) {
+                today = this.minDate;
+            }
+            else if (this.maxDate && this.maxDate < this.today) {
+                today = this.maxDate;
+            }
+            return today;
+        };
         return PoCalendarBaseComponent;
     }());
     PoCalendarBaseComponent.decorators = [
@@ -3919,6 +3930,11 @@
         PoCalendarComponent.prototype.ngOnInit = function () {
             this.setActivateDate();
         };
+        PoCalendarComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.minDate || changes.maxDate) {
+                this.setActivateDate();
+            }
+        };
         PoCalendarComponent.prototype.getActivateDate = function (partType) {
             if (this.isRange && this.activateDate) {
                 return this.activateDate[partType];
@@ -3952,6 +3968,9 @@
             this.updateModel(newModel);
             this.change.emit(newModel);
         };
+        PoCalendarComponent.prototype.onHoverDate = function (date) {
+            this.hoverValue = date;
+        };
         PoCalendarComponent.prototype.onHeaderChange = function (_b, partType) {
             var month = _b.month, year = _b.year;
             if (this.isRange) {
@@ -4048,7 +4067,7 @@
     PoCalendarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-calendar',
-                    template: "<ng-container *ngIf=\"isRange; then rangeTemplate; else calendarTemplate\"></ng-container>\n\n<ng-template #rangeTemplate>\n  <div class=\"po-calendar-range\">\n    <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'start' }\"></ng-container>\n    <ng-container *ngIf=\"!isResponsive\">\n      <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'end' }\"></ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n<ng-template #calendarTemplate>\n  <div class=\"po-calendar\">\n    <ng-template [ngTemplateOutlet]=\"calendarWrapper\"></ng-template>\n  </div>\n</ng-template>\n\n<ng-template #calendarWrapper let-partType=\"partType\">\n  <po-calendar-wrapper\n    [p-value]=\"getValue(partType)\"\n    [p-activate-date]=\"getActivateDate(partType)\"\n    [p-locale]=\"locale\"\n    [p-min-date]=\"minDate\"\n    [p-max-date]=\"maxDate\"\n    [p-part-type]=\"partType\"\n    [p-range]=\"isRange\"\n    [p-responsive]=\"isResponsive\"\n    [p-selected-value]=\"value\"\n    (p-header-change)=\"onHeaderChange($event, partType)\"\n    (p-select-date)=\"onSelectDate($event, partType)\"\n  >\n  </po-calendar-wrapper>\n</ng-template>\n",
+                    template: "<ng-container *ngIf=\"isRange; then rangeTemplate; else calendarTemplate\"></ng-container>\n\n<ng-template #rangeTemplate>\n  <div class=\"po-calendar-range\">\n    <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'start' }\"></ng-container>\n    <ng-container *ngIf=\"!isResponsive\">\n      <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'end' }\"></ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n<ng-template #calendarTemplate>\n  <div class=\"po-calendar\">\n    <ng-template [ngTemplateOutlet]=\"calendarWrapper\"></ng-template>\n  </div>\n</ng-template>\n\n<ng-template #calendarWrapper let-partType=\"partType\">\n  <po-calendar-wrapper\n    [p-value]=\"getValue(partType)\"\n    [p-activate-date]=\"getActivateDate(partType)\"\n    [p-locale]=\"locale\"\n    [p-min-date]=\"minDate\"\n    [p-max-date]=\"maxDate\"\n    [p-part-type]=\"partType\"\n    [p-range]=\"isRange\"\n    [p-responsive]=\"isResponsive\"\n    [p-selected-value]=\"value\"\n    [p-hover-value]=\"hoverValue\"\n    (p-header-change)=\"onHeaderChange($event, partType)\"\n    (p-select-date)=\"onSelectDate($event, partType)\"\n    (p-hover-date)=\"onHoverDate($event)\"\n  >\n  </po-calendar-wrapper>\n</ng-template>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: providers$6
                 },] }
@@ -4308,17 +4327,17 @@
     ];
 
     var PoCalendarWrapperComponent = /** @class */ (function () {
-        function PoCalendarWrapperComponent(poCalendarService, poCalendarLangService, poDate, languageService) {
+        function PoCalendarWrapperComponent(poCalendarService, poCalendarLangService, poDate) {
             this.poCalendarService = poCalendarService;
             this.poCalendarLangService = poCalendarLangService;
             this.poDate = poDate;
-            this.languageService = languageService;
             this.mode = 'day';
             this.responsive = false;
             this.range = false;
             this.activateDate = new Date();
             this.headerChange = new i0.EventEmitter();
             this.selectDate = new i0.EventEmitter();
+            this.hoverDate = new rxjs.Subject().pipe(operators.debounceTime(100));
             this.displayMonths = Array();
             this.displayWeekDays = Array();
             this.today = new Date();
@@ -4419,6 +4438,12 @@
             }
             this.headerChange.emit({ month: this.displayMonthNumber, year: this.displayYear });
         };
+        PoCalendarWrapperComponent.prototype.onMouseEnter = function (day) {
+            this.hoverDate.next(day);
+        };
+        PoCalendarWrapperComponent.prototype.onMouseLeave = function () {
+            this.hoverDate.next(null);
+        };
         // Ao selecionar uma data
         PoCalendarWrapperComponent.prototype.onSelectDate = function (date) {
             this.selectDate.emit(date);
@@ -4500,6 +4525,9 @@
             else if (this.range && start && end && date > start && date < end) {
                 return this.getColorForDateRange(date, local);
             }
+            else if (this.range && start && !end && date > start && date < this.hoverValue) {
+                return "po-calendar-box-" + local + "-hover";
+            }
             else if (!this.range && this.equalsDate(date, this.value)) {
                 return this.getColorForDate(date, local);
             }
@@ -4546,7 +4574,7 @@
     PoCalendarWrapperComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'po-calendar-wrapper',
-                    template: "<div class=\"po-calendar-wrapper\">\n  <ng-container *ngIf=\"isDayVisible\">\n    <po-calendar-header\n      [p-hide-previous]=\"isEndPart\"\n      [p-hide-next]=\"isStartPart && !responsive\"\n      (p-previous)=\"onPreviousMonth()\"\n      (p-next)=\"onNextMonth()\"\n    >\n      <span class=\"po-clickable po-mr-1\" (click)=\"selectDisplayMode('month')\">{{ displayMonth }}</span>\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">{{ displayYear }}</span>\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\" *ngFor=\"let weekDay of displayWeekDays\">\n          {{ weekDay }}\n        </div>\n      </div>\n\n      <div class=\"po-calendar-content-list-day\">\n        <div\n          *ngFor=\"let day of displayDays\"\n          class=\"po-calendar-day\"\n          [ngClass]=\"getDayBackgroundColor(day)\"\n          (click)=\"onSelectDate(day)\"\n          attr-calendar\n        >\n          <span *ngIf=\"day !== 0\" [ngClass]=\"getDayForegroundColor(day)\">\n            {{ day.getDate() }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isMonthVisible\">\n    <po-calendar-header (p-previous)=\"updateYear(-1)\" (p-next)=\"updateYear(1)\">\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">\n        {{ displayYear }}\n      </span>\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\">\n          {{ monthLabel }}\n        </div>\n      </div>\n      <div class=\"po-calendar-content-list-month\">\n        <div\n          *ngFor=\"let month of displayMonths; let i = index\"\n          class=\"po-calendar-month\"\n          [ngClass]=\"getBackgroundColor(i, displayMonthNumber)\"\n          (click)=\"onSelectMonth(displayYear, i)\"\n          attr-calendar\n        >\n          <span [ngClass]=\"getForegroundColor(i, displayMonthNumber)\">\n            {{ month }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isYearVisible\">\n    <po-calendar-header (p-previous)=\"updateYear(-10)\" (p-next)=\"updateYear(10)\">\n      {{ displayStartDecade }} - {{ displayFinalDecade }}\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\">\n          {{ yearLabel }}\n        </div>\n      </div>\n\n      <div class=\"po-calendar-content-list-year\">\n        <div\n          *ngFor=\"let year of displayDecade; let i = index\"\n          class=\"po-calendar-year\"\n          [ngClass]=\"getBackgroundColor(year, currentYear)\"\n          (click)=\"onSelectYear(year, displayMonthNumber)\"\n          attr-calendar\n        >\n          <span [ngClass]=\"getForegroundColor(year, currentYear)\">\n            {{ year }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</div>\n",
+                    template: "<div class=\"po-calendar-wrapper\">\n  <ng-container *ngIf=\"isDayVisible\">\n    <po-calendar-header\n      [p-hide-previous]=\"isEndPart\"\n      [p-hide-next]=\"isStartPart && !responsive\"\n      (p-previous)=\"onPreviousMonth()\"\n      (p-next)=\"onNextMonth()\"\n    >\n      <span class=\"po-clickable po-mr-1\" (click)=\"selectDisplayMode('month')\">{{ displayMonth }}</span>\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">{{ displayYear }}</span>\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\" *ngFor=\"let weekDay of displayWeekDays\">\n          {{ weekDay }}\n        </div>\n      </div>\n\n      <div class=\"po-calendar-content-list-day\">\n        <div\n          *ngFor=\"let day of displayDays\"\n          class=\"po-calendar-day\"\n          [ngClass]=\"getDayBackgroundColor(day)\"\n          (click)=\"onSelectDate(day)\"\n          (mouseenter)=\"onMouseEnter(day)\"\n          (mouseleave)=\"onMouseLeave()\"\n          attr-calendar\n        >\n          <span *ngIf=\"day !== 0\" [ngClass]=\"getDayForegroundColor(day)\">\n            {{ day.getDate() }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isMonthVisible\">\n    <po-calendar-header (p-previous)=\"updateYear(-1)\" (p-next)=\"updateYear(1)\">\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">\n        {{ displayYear }}\n      </span>\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\">\n          {{ monthLabel }}\n        </div>\n      </div>\n      <div class=\"po-calendar-content-list-month\">\n        <div\n          *ngFor=\"let month of displayMonths; let i = index\"\n          class=\"po-calendar-month\"\n          [ngClass]=\"getBackgroundColor(i, displayMonthNumber)\"\n          (click)=\"onSelectMonth(displayYear, i)\"\n          attr-calendar\n        >\n          <span [ngClass]=\"getForegroundColor(i, displayMonthNumber)\">\n            {{ month }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isYearVisible\">\n    <po-calendar-header (p-previous)=\"updateYear(-10)\" (p-next)=\"updateYear(10)\">\n      {{ displayStartDecade }} - {{ displayFinalDecade }}\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\">\n          {{ yearLabel }}\n        </div>\n      </div>\n\n      <div class=\"po-calendar-content-list-year\">\n        <div\n          *ngFor=\"let year of displayDecade; let i = index\"\n          class=\"po-calendar-year\"\n          [ngClass]=\"getBackgroundColor(year, currentYear)\"\n          (click)=\"onSelectYear(year, displayMonthNumber)\"\n          attr-calendar\n        >\n          <span [ngClass]=\"getForegroundColor(year, currentYear)\">\n            {{ year }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</div>\n",
                     providers: [PoCalendarService],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
@@ -4554,8 +4582,7 @@
     PoCalendarWrapperComponent.ctorParameters = function () { return [
         { type: PoCalendarService },
         { type: PoCalendarLangService },
-        { type: PoDateService },
-        { type: PoLanguageService }
+        { type: PoDateService }
     ]; };
     PoCalendarWrapperComponent.propDecorators = {
         value: [{ type: i0.Input, args: ['p-value',] }],
@@ -4567,8 +4594,10 @@
         selectedValue: [{ type: i0.Input, args: ['p-selected-value',] }],
         minDate: [{ type: i0.Input, args: ['p-min-date',] }],
         maxDate: [{ type: i0.Input, args: ['p-max-date',] }],
+        hoverValue: [{ type: i0.Input, args: ['p-hover-value',] }],
         headerChange: [{ type: i0.Output, args: ['p-header-change',] }],
         selectDate: [{ type: i0.Output, args: ['p-select-date',] }],
+        hoverDate: [{ type: i0.Output, args: ['p-hover-date',] }],
         locale: [{ type: i0.Input, args: ['p-locale',] }]
     };
 
@@ -13722,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;
@@ -14821,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]
                 },] }
     ];
@@ -20852,6 +20881,8 @@
     })(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',
@@ -20933,6 +20964,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", {
@@ -20943,9 +20976,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;
@@ -21189,15 +21241,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);
@@ -21301,8 +21414,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);
                 });
@@ -21360,7 +21473,9 @@
         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()
@@ -21369,10 +21484,67 @@
         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,
@@ -21420,12 +21592,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;
@@ -21443,6 +21616,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,
@@ -21625,7 +21803,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) {
@@ -21635,7 +21813,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));
@@ -21707,6 +21888,7 @@
         { type: i0.ChangeDetectorRef },
         { type: i0.ElementRef },
         { type: PoControlPositionService },
+        { type: PoMultiselectFilterService },
         { type: PoLanguageService }
     ]; };
     PoMultiselectComponent.propDecorators = {
@@ -27693,16 +27875,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)];
@@ -36932,7 +37115,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();
@@ -36947,22 +37134,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 [
@@ -37099,6 +37292,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.
      *
@@ -37412,15 +37606,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 () {
@@ -38486,112 +38674,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;