@po-ui/ng-components 19.4.0 → 19.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -24208,13 +24208,10 @@ class PoTableService {
24208
24208
  return isTypeof(params, 'object') && !Array.isArray(params) ? params : undefined;
24209
24209
  }
24210
24210
  static ɵfac = function PoTableService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PoTableService)(i0.ɵɵinject(i1$2.HttpClient)); };
24211
- static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PoTableService, factory: PoTableService.ɵfac, providedIn: 'root' });
24211
+ static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PoTableService, factory: PoTableService.ɵfac });
24212
24212
  }
24213
24213
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableService, [{
24214
- type: Injectable,
24215
- args: [{
24216
- providedIn: 'root'
24217
- }]
24214
+ type: Injectable
24218
24215
  }], () => [{ type: i1$2.HttpClient }], null); })();
24219
24216
 
24220
24217
  const poTableContainer = ['border', 'shadow'];
@@ -28128,7 +28125,7 @@ class PoTableComponent extends PoTableBaseComponent {
28128
28125
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.columnManagerTargetFixed = _t.first);
28129
28126
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.actionsIconElement = _t);
28130
28127
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.actionsElement = _t);
28131
- } }, standalone: false, features: [i0.ɵɵProvidersFeature([PoDateService]), i0.ɵɵInheritDefinitionFeature], decls: 33, vars: 14, consts: [["tableContainerTemplate", ""], ["tableTemplate", ""], ["tableVirtualScrollTemplate", ""], ["popup", ""], ["poTableColumnDetail", ""], ["inputRadio", ""], ["inputCheckbox", ""], ["contentHeaderTemplate", ""], ["noColumnsWithHeight", ""], ["noColumnsWithoutHeight", ""], ["ActionsColumnTemplate", ""], ["modalDelete", ""], ["columnBatchActions", ""], ["columnManager", ""], ["columnManagerTarget", ""], ["tableWrapper", ""], ["poTableTbody", ""], ["tableFooter", ""], ["tableScrollable", ""], ["tableDefaultThDragDrop", ""], ["tableDefaultThDefault", ""], ["columnActionLeft", ""], ["noColumnsHeader", ""], ["tableVirtualScroll", ""], ["tableVirtualScrollThDragDrop", ""], ["tableVirtualScrollThDefault", ""], ["columnHeader", ""], ["popupTarget", ""], [1, "po-table-actions"], ["class", "po-table-actions-batch-actions", 4, "ngIf"], ["class", "po-table-actions-column-manager", 4, "ngIf"], ["class", "po-table-search", 4, "ngIf"], ["p-no-padding", "", 4, "ngIf", "ngIfElse"], ["class", "po-row po-table-footer-show-more", 3, "po-invisible", 4, "ngIf"], [3, "p-actions", "p-target"], [3, "p-columns", "p-max-columns", "p-target", "p-last-visible-columns-selected", "p-hide-action-fixed-columns", "p-columns-default", "p-visible-columns-change", "p-change-visible-columns", "p-initial-columns", 4, "ngIf"], [3, "p-title", "p-primary-action", "p-secondary-action", "p-click-out"], [1, "po-font-text-large"], [1, "po-table-actions-batch-actions"], [1, "po-table-actions-batch-actions__label", 3, "ngPlural"], ["ngPluralCase", "=0"], ["ngPluralCase", "=1"], ["ngPluralCase", "other"], [1, "po-table-actions-batch-actions__buttons"], ["p-icon", "ICON_DELETE", 3, "p-click", "p-danger", "p-disabled", "p-label"], [1, "po-table-actions-column-manager"], ["p-icon", "ICON_SETTINGS", "p-kind", "tertiary", "p-tooltip-position", "left", 3, "p-click", "p-aria-label", "p-tooltip"], [1, "po-table-search"], [3, "p-filtered-items-change", "p-items", "p-filter-keys", "p-filter-type"], ["p-no-padding", ""], [4, "ngTemplateOutlet"], [3, "p-text", "p-size", 4, "ngIf"], [1, "po-table-main-container"], [1, "po-table-wrapper"], ["class", "po-table-container", 3, "height", 4, "ngIf"], [4, "ngIf"], ["class", "po-table-footer", 4, "ngIf"], [3, "p-text", "p-size"], [1, "po-table-container"], ["class", "po-table-container-overflow", 3, "height", 4, "ngIf"], [1, "po-table-container-overflow"], [1, "po-table-footer"], [4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "p-literals", "p-subtitles"], [1, "po-row", "po-table-footer-show-more"], [1, "po-offset-xl-4", "po-offset-lg-4", "po-offset-md-3", "po-lg-4", "po-md-6", 3, "p-click", "p-disabled", "p-label", "p-loading"], [1, "po-table", 3, "ngClass"], ["cdkDropList", "", "cdkDropListOrientation", "horizontal", 3, "cdkDropListDropped", "ngClass"], ["class", "po-table-column-selectable", 3, "pointer-events", 4, "ngIf"], ["class", "po-table-header-column po-table-header-master-detail", 4, "ngIf"], [3, "po-table-header-master-detail", "po-table-header-single-action", 4, "ngIf"], ["class", "po-table-header-column po-text-center", 4, "ngIf"], [4, "ngIf", "ngIfThen", "ngIfElse"], [3, "po-table-header-single-action", "po-table-header-actions", 4, "ngIf"], ["class", "po-table-group-row", 4, "ngIf"], [1, "po-table-column-selectable"], ["name", "selectAll", 3, "p-checkboxValue", "p-change", 4, "ngIf"], ["name", "selectAll", 3, "p-change", "p-checkboxValue"], [1, "po-table-header-column", "po-table-header-master-detail"], [1, "po-table-header-column", "po-text-center"], ["class", "po-table-header-ellipsis p-element po-frozen-column", "cdkDrag", "", "cdkDragLockAxis", "x", 3, "width", "max-width", "min-width", "po-clickable", "ngClass", "ngStyle", "po-table-header-subtitle", "po-table-column-drag-box", "cdkDragDisabled", "pFrozenColumn", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["cdkDrag", "", "cdkDragLockAxis", "x", 1, "po-table-header-ellipsis", "p-element", "po-frozen-column", 3, "click", "ngClass", "ngStyle", "cdkDragDisabled", "pFrozenColumn"], [1, "po-table-header-flex"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["cdkDragHandle", "", "p-icon", "ICON_DRAG", 4, "ngIf"], ["cdkDragHandle", "", "width", "16", "height", "16", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 4, "ngIf"], ["cdkDragHandle", "", "p-icon", "ICON_DRAG"], ["cdkDragHandle", "", "width", "16", "height", "16", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["cx", "9", "cy", "6", "r", "2", "fill", "black"], ["cx", "15", "cy", "6", "r", "2", "fill", "black"], ["cx", "9", "cy", "12", "r", "2", "fill", "black"], ["cx", "15", "cy", "12", "r", "2", "fill", "black"], ["cx", "9", "cy", "18", "r", "2", "fill", "black"], ["cx", "15", "cy", "18", "r", "2", "fill", "black"], ["class", "po-table-header-ellipsis p-element po-frozen-column", 3, "width", "max-width", "min-width", "po-clickable", "ngClass", "ngStyle", "po-table-header-subtitle", "pFrozenColumn", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-table-header-ellipsis", "p-element", "po-frozen-column", 3, "click", "ngClass", "ngStyle", "pFrozenColumn"], [1, "po-table-group-row"], [1, "po-table-row", "po-table-row-no-data"], [1, "po-table-no-data", "po-text-center", 3, "colSpan"], ["class", "po-table-group-row", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-table-row"], ["class", "po-table-column-selectable", 4, "ngIf"], ["class", "po-table-column-detail-toggle", 3, "click", 4, "ngIf"], ["class", "p-element po-frozen-column", 3, "width", "max-width", "min-width", "po-table-column", "po-table-column-right", "po-table-column-center", "po-table-column-icons", "pFrozenColumn", "ngClass", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-table-column-detail-toggle", 3, "click"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "p-element", "po-frozen-column", 3, "click", "pFrozenColumn", "ngClass"], [1, "po-table-column-cell", "po-table-body-ellipsis", "notranslate", 3, "mouseenter", "mouseleave", "ngSwitch", "p-tooltip", "p-append-in-body"], [4, "ngSwitchCase"], [3, "p-action", "p-disabled", "p-link", "p-row", "p-value", "click", 4, "ngSwitchCase"], [3, "p-column", "p-icons", "p-row", 4, "ngSwitchCase"], [4, "ngSwitchDefault"], [3, "click", "p-action", "p-disabled", "p-link", "p-row", "p-value"], [3, "p-column", "p-icons", "p-row"], [3, "p-subtitle"], [3, "p-value"], [1, "po-table-row-template-container", 3, "colSpan"], [1, "po-table-column-detail", 3, "colSpan"], [3, "p-select-row", "p-selectable", "p-detail", "p-items", "p-parent-row"], [3, "itemSize", "minBufferPx", "maxBufferPx"], [1, "po-table-header-sticky"], ["cdkDropList", "", "cdkDropListOrientation", "horizontal", 3, "cdkDropListDropped"], ["class", "po-table-header-ellipsis p-element po-frozen-column example-box", 3, "width", "max-width", "min-width", "po-clickable", "ngClass", "ngStyle", "po-table-header-subtitle", "pFrozenColumn", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-table-header-ellipsis", "p-element", "po-frozen-column", "example-box", 3, "click", "ngClass", "ngStyle", "pFrozenColumn"], ["class", "po-table-group-row", 4, "cdkVirtualFor", "cdkVirtualForOf", "cdkVirtualForTrackBy"], ["class", "p-element po-frozen-column", 3, "width", "max-width", "min-width", "po-table-column", "po-table-column-right", "po-table-column-center", "po-table-column-icons", "ngClass", "pFrozenColumn", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "p-element", "po-frozen-column", 3, "click", "ngClass", "pFrozenColumn"], ["class", "po-clickable", 3, "p-icon", 4, "ngIf"], [1, "po-clickable", 3, "p-icon"], [3, "p-change-selected", "name", "p-checked"], ["name", "checkbox", 3, "p-change", "p-checkboxValue"], [1, "po-table-header-ellipsis", 3, "mouseenter", "mouseleave", "p-tooltip", "p-append-in-body"], [3, "po-table-header-icon-unselected", "po-table-header-icon-descending", "po-table-header-icon-ascending", 4, "ngIf"], ["p-icon", "ICON_SORT", 4, "ngIf"], ["width", "16", "height", "16", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 4, "ngIf"], ["p-icon", "ICON_SORT"], ["width", "16", "height", "16", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M18.2929 15.2929L17 16.5858L17 10C17 9.44772 16.5523 9 16 9C15.4477 9 15 9.44772 15 10L15 16.5858L13.7071 15.2929C13.3166 14.9024 12.6834 14.9024 12.2929 15.2929C11.9024 15.6834 11.9024 16.3166 12.2929 16.7071L15.2929 19.7071C15.6834 20.0976 16.3166 20.0976 16.7071 19.7071L19.7071 16.7071C20.0976 16.3166 20.0976 15.6834 19.7071 15.2929C19.3166 14.9024 18.6834 14.9024 18.2929 15.2929ZM5.70716 8.7071L7.00006 7.4142L7.00003 14C7.00002 14.5523 7.44774 15 8.00002 15C8.55231 15 9.00002 14.5523 9.00003 14L9.00006 7.41418L10.2929 8.70707C10.6835 9.09759 11.3166 9.09758 11.7072 8.70706C12.0977 8.31653 12.0977 7.68336 11.7072 7.29284L8.70718 4.29286C8.31665 3.90234 7.68349 3.90235 7.29296 4.29287L4.29295 7.29289C3.90242 7.68342 3.90242 8.31658 4.29294 8.70711C4.68347 9.09763 5.31663 9.09762 5.70716 8.7071Z", "fill", "#1D1D30"], ["p-icon", "ICON_SORT_ASC", 4, "ngIf"], ["p-icon", "ICON_SORT_ASC"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M11 9.41421L9.70711 10.7071C9.31658 11.0976 8.68342 11.0976 8.29289 10.7071C7.90237 10.3166 7.90237 9.68342 8.29289 9.29289L11.2929 6.29289C11.6834 5.90237 12.3166 5.90237 12.7071 6.29289L15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071C15.3166 11.0976 14.6834 11.0976 14.2929 10.7071L13 9.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V9.41421Z", "fill", "black"], ["cdkDragHandle", "", "p-icon", "ICON_SORT_DESC", 4, "ngIf"], ["cdkDragHandle", "", "p-icon", "ICON_SORT_DESC"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M9.70711 13.2929L11 14.5858V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V14.5858L14.2929 13.2929C14.6834 12.9024 15.3166 12.9024 15.7071 13.2929C16.0976 13.6834 16.0976 14.3166 15.7071 14.7071L12.7071 17.7071C12.3166 18.0976 11.6834 18.0976 11.2929 17.7071L8.29289 14.7071C7.90237 14.3166 7.90237 13.6834 8.29289 13.2929C8.68342 12.9024 9.31658 12.9024 9.70711 13.2929Z", "fill", "black"], [1, "po-table-header-fixed-inner"], ["class", "po-table-column po-table-column-single-action", 3, "width", "max-width", 4, "ngIf"], ["class", "po-table-column-actions", 4, "ngIf"], [1, "po-table-column", "po-table-column-single-action"], ["class", "po-table-single-action po-clickable", 3, "po-table-action-disabled", "click", 4, "ngIf"], [1, "po-table-single-action", "po-clickable", 3, "click"], ["class", "po-table-single-action-content", 3, "p-icon", 4, "ngIf"], [1, "po-table-single-action-content", 3, "p-icon"], [1, "po-table-column-actions"], [1, "po-clickable", 3, "click"], ["p-icon", "ICON_MORE"], [3, "p-visible-columns-change", "p-change-visible-columns", "p-initial-columns", "p-columns", "p-max-columns", "p-target", "p-last-visible-columns-selected", "p-hide-action-fixed-columns", "p-columns-default"]], template: function PoTableComponent_Template(rf, ctx) { if (rf & 1) {
28128
+ } }, standalone: false, features: [i0.ɵɵProvidersFeature([PoDateService, PoTableService]), i0.ɵɵInheritDefinitionFeature], decls: 33, vars: 14, consts: [["tableContainerTemplate", ""], ["tableTemplate", ""], ["tableVirtualScrollTemplate", ""], ["popup", ""], ["poTableColumnDetail", ""], ["inputRadio", ""], ["inputCheckbox", ""], ["contentHeaderTemplate", ""], ["noColumnsWithHeight", ""], ["noColumnsWithoutHeight", ""], ["ActionsColumnTemplate", ""], ["modalDelete", ""], ["columnBatchActions", ""], ["columnManager", ""], ["columnManagerTarget", ""], ["tableWrapper", ""], ["poTableTbody", ""], ["tableFooter", ""], ["tableScrollable", ""], ["tableDefaultThDragDrop", ""], ["tableDefaultThDefault", ""], ["columnActionLeft", ""], ["noColumnsHeader", ""], ["tableVirtualScroll", ""], ["tableVirtualScrollThDragDrop", ""], ["tableVirtualScrollThDefault", ""], ["columnHeader", ""], ["popupTarget", ""], [1, "po-table-actions"], ["class", "po-table-actions-batch-actions", 4, "ngIf"], ["class", "po-table-actions-column-manager", 4, "ngIf"], ["class", "po-table-search", 4, "ngIf"], ["p-no-padding", "", 4, "ngIf", "ngIfElse"], ["class", "po-row po-table-footer-show-more", 3, "po-invisible", 4, "ngIf"], [3, "p-actions", "p-target"], [3, "p-columns", "p-max-columns", "p-target", "p-last-visible-columns-selected", "p-hide-action-fixed-columns", "p-columns-default", "p-visible-columns-change", "p-change-visible-columns", "p-initial-columns", 4, "ngIf"], [3, "p-title", "p-primary-action", "p-secondary-action", "p-click-out"], [1, "po-font-text-large"], [1, "po-table-actions-batch-actions"], [1, "po-table-actions-batch-actions__label", 3, "ngPlural"], ["ngPluralCase", "=0"], ["ngPluralCase", "=1"], ["ngPluralCase", "other"], [1, "po-table-actions-batch-actions__buttons"], ["p-icon", "ICON_DELETE", 3, "p-click", "p-danger", "p-disabled", "p-label"], [1, "po-table-actions-column-manager"], ["p-icon", "ICON_SETTINGS", "p-kind", "tertiary", "p-tooltip-position", "left", 3, "p-click", "p-aria-label", "p-tooltip"], [1, "po-table-search"], [3, "p-filtered-items-change", "p-items", "p-filter-keys", "p-filter-type"], ["p-no-padding", ""], [4, "ngTemplateOutlet"], [3, "p-text", "p-size", 4, "ngIf"], [1, "po-table-main-container"], [1, "po-table-wrapper"], ["class", "po-table-container", 3, "height", 4, "ngIf"], [4, "ngIf"], ["class", "po-table-footer", 4, "ngIf"], [3, "p-text", "p-size"], [1, "po-table-container"], ["class", "po-table-container-overflow", 3, "height", 4, "ngIf"], [1, "po-table-container-overflow"], [1, "po-table-footer"], [4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "p-literals", "p-subtitles"], [1, "po-row", "po-table-footer-show-more"], [1, "po-offset-xl-4", "po-offset-lg-4", "po-offset-md-3", "po-lg-4", "po-md-6", 3, "p-click", "p-disabled", "p-label", "p-loading"], [1, "po-table", 3, "ngClass"], ["cdkDropList", "", "cdkDropListOrientation", "horizontal", 3, "cdkDropListDropped", "ngClass"], ["class", "po-table-column-selectable", 3, "pointer-events", 4, "ngIf"], ["class", "po-table-header-column po-table-header-master-detail", 4, "ngIf"], [3, "po-table-header-master-detail", "po-table-header-single-action", 4, "ngIf"], ["class", "po-table-header-column po-text-center", 4, "ngIf"], [4, "ngIf", "ngIfThen", "ngIfElse"], [3, "po-table-header-single-action", "po-table-header-actions", 4, "ngIf"], ["class", "po-table-group-row", 4, "ngIf"], [1, "po-table-column-selectable"], ["name", "selectAll", 3, "p-checkboxValue", "p-change", 4, "ngIf"], ["name", "selectAll", 3, "p-change", "p-checkboxValue"], [1, "po-table-header-column", "po-table-header-master-detail"], [1, "po-table-header-column", "po-text-center"], ["class", "po-table-header-ellipsis p-element po-frozen-column", "cdkDrag", "", "cdkDragLockAxis", "x", 3, "width", "max-width", "min-width", "po-clickable", "ngClass", "ngStyle", "po-table-header-subtitle", "po-table-column-drag-box", "cdkDragDisabled", "pFrozenColumn", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["cdkDrag", "", "cdkDragLockAxis", "x", 1, "po-table-header-ellipsis", "p-element", "po-frozen-column", 3, "click", "ngClass", "ngStyle", "cdkDragDisabled", "pFrozenColumn"], [1, "po-table-header-flex"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["cdkDragHandle", "", "p-icon", "ICON_DRAG", 4, "ngIf"], ["cdkDragHandle", "", "width", "16", "height", "16", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 4, "ngIf"], ["cdkDragHandle", "", "p-icon", "ICON_DRAG"], ["cdkDragHandle", "", "width", "16", "height", "16", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["cx", "9", "cy", "6", "r", "2", "fill", "black"], ["cx", "15", "cy", "6", "r", "2", "fill", "black"], ["cx", "9", "cy", "12", "r", "2", "fill", "black"], ["cx", "15", "cy", "12", "r", "2", "fill", "black"], ["cx", "9", "cy", "18", "r", "2", "fill", "black"], ["cx", "15", "cy", "18", "r", "2", "fill", "black"], ["class", "po-table-header-ellipsis p-element po-frozen-column", 3, "width", "max-width", "min-width", "po-clickable", "ngClass", "ngStyle", "po-table-header-subtitle", "pFrozenColumn", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-table-header-ellipsis", "p-element", "po-frozen-column", 3, "click", "ngClass", "ngStyle", "pFrozenColumn"], [1, "po-table-group-row"], [1, "po-table-row", "po-table-row-no-data"], [1, "po-table-no-data", "po-text-center", 3, "colSpan"], ["class", "po-table-group-row", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-table-row"], ["class", "po-table-column-selectable", 4, "ngIf"], ["class", "po-table-column-detail-toggle", 3, "click", 4, "ngIf"], ["class", "p-element po-frozen-column", 3, "width", "max-width", "min-width", "po-table-column", "po-table-column-right", "po-table-column-center", "po-table-column-icons", "pFrozenColumn", "ngClass", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-table-column-detail-toggle", 3, "click"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "p-element", "po-frozen-column", 3, "click", "pFrozenColumn", "ngClass"], [1, "po-table-column-cell", "po-table-body-ellipsis", "notranslate", 3, "mouseenter", "mouseleave", "ngSwitch", "p-tooltip", "p-append-in-body"], [4, "ngSwitchCase"], [3, "p-action", "p-disabled", "p-link", "p-row", "p-value", "click", 4, "ngSwitchCase"], [3, "p-column", "p-icons", "p-row", 4, "ngSwitchCase"], [4, "ngSwitchDefault"], [3, "click", "p-action", "p-disabled", "p-link", "p-row", "p-value"], [3, "p-column", "p-icons", "p-row"], [3, "p-subtitle"], [3, "p-value"], [1, "po-table-row-template-container", 3, "colSpan"], [1, "po-table-column-detail", 3, "colSpan"], [3, "p-select-row", "p-selectable", "p-detail", "p-items", "p-parent-row"], [3, "itemSize", "minBufferPx", "maxBufferPx"], [1, "po-table-header-sticky"], ["cdkDropList", "", "cdkDropListOrientation", "horizontal", 3, "cdkDropListDropped"], ["class", "po-table-header-ellipsis p-element po-frozen-column example-box", 3, "width", "max-width", "min-width", "po-clickable", "ngClass", "ngStyle", "po-table-header-subtitle", "pFrozenColumn", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-table-header-ellipsis", "p-element", "po-frozen-column", "example-box", 3, "click", "ngClass", "ngStyle", "pFrozenColumn"], ["class", "po-table-group-row", 4, "cdkVirtualFor", "cdkVirtualForOf", "cdkVirtualForTrackBy"], ["class", "p-element po-frozen-column", 3, "width", "max-width", "min-width", "po-table-column", "po-table-column-right", "po-table-column-center", "po-table-column-icons", "ngClass", "pFrozenColumn", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "p-element", "po-frozen-column", 3, "click", "ngClass", "pFrozenColumn"], ["class", "po-clickable", 3, "p-icon", 4, "ngIf"], [1, "po-clickable", 3, "p-icon"], [3, "p-change-selected", "name", "p-checked"], ["name", "checkbox", 3, "p-change", "p-checkboxValue"], [1, "po-table-header-ellipsis", 3, "mouseenter", "mouseleave", "p-tooltip", "p-append-in-body"], [3, "po-table-header-icon-unselected", "po-table-header-icon-descending", "po-table-header-icon-ascending", 4, "ngIf"], ["p-icon", "ICON_SORT", 4, "ngIf"], ["width", "16", "height", "16", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 4, "ngIf"], ["p-icon", "ICON_SORT"], ["width", "16", "height", "16", "viewBox", "0 0 24 24", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M18.2929 15.2929L17 16.5858L17 10C17 9.44772 16.5523 9 16 9C15.4477 9 15 9.44772 15 10L15 16.5858L13.7071 15.2929C13.3166 14.9024 12.6834 14.9024 12.2929 15.2929C11.9024 15.6834 11.9024 16.3166 12.2929 16.7071L15.2929 19.7071C15.6834 20.0976 16.3166 20.0976 16.7071 19.7071L19.7071 16.7071C20.0976 16.3166 20.0976 15.6834 19.7071 15.2929C19.3166 14.9024 18.6834 14.9024 18.2929 15.2929ZM5.70716 8.7071L7.00006 7.4142L7.00003 14C7.00002 14.5523 7.44774 15 8.00002 15C8.55231 15 9.00002 14.5523 9.00003 14L9.00006 7.41418L10.2929 8.70707C10.6835 9.09759 11.3166 9.09758 11.7072 8.70706C12.0977 8.31653 12.0977 7.68336 11.7072 7.29284L8.70718 4.29286C8.31665 3.90234 7.68349 3.90235 7.29296 4.29287L4.29295 7.29289C3.90242 7.68342 3.90242 8.31658 4.29294 8.70711C4.68347 9.09763 5.31663 9.09762 5.70716 8.7071Z", "fill", "#1D1D30"], ["p-icon", "ICON_SORT_ASC", 4, "ngIf"], ["p-icon", "ICON_SORT_ASC"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M11 9.41421L9.70711 10.7071C9.31658 11.0976 8.68342 11.0976 8.29289 10.7071C7.90237 10.3166 7.90237 9.68342 8.29289 9.29289L11.2929 6.29289C11.6834 5.90237 12.3166 5.90237 12.7071 6.29289L15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071C15.3166 11.0976 14.6834 11.0976 14.2929 10.7071L13 9.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V9.41421Z", "fill", "black"], ["cdkDragHandle", "", "p-icon", "ICON_SORT_DESC", 4, "ngIf"], ["cdkDragHandle", "", "p-icon", "ICON_SORT_DESC"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M9.70711 13.2929L11 14.5858V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V14.5858L14.2929 13.2929C14.6834 12.9024 15.3166 12.9024 15.7071 13.2929C16.0976 13.6834 16.0976 14.3166 15.7071 14.7071L12.7071 17.7071C12.3166 18.0976 11.6834 18.0976 11.2929 17.7071L8.29289 14.7071C7.90237 14.3166 7.90237 13.6834 8.29289 13.2929C8.68342 12.9024 9.31658 12.9024 9.70711 13.2929Z", "fill", "black"], [1, "po-table-header-fixed-inner"], ["class", "po-table-column po-table-column-single-action", 3, "width", "max-width", 4, "ngIf"], ["class", "po-table-column-actions", 4, "ngIf"], [1, "po-table-column", "po-table-column-single-action"], ["class", "po-table-single-action po-clickable", 3, "po-table-action-disabled", "click", 4, "ngIf"], [1, "po-table-single-action", "po-clickable", 3, "click"], ["class", "po-table-single-action-content", 3, "p-icon", 4, "ngIf"], [1, "po-table-single-action-content", 3, "p-icon"], [1, "po-table-column-actions"], [1, "po-clickable", 3, "click"], ["p-icon", "ICON_MORE"], [3, "p-visible-columns-change", "p-change-visible-columns", "p-initial-columns", "p-columns", "p-max-columns", "p-target", "p-last-visible-columns-selected", "p-hide-action-fixed-columns", "p-columns-default"]], template: function PoTableComponent_Template(rf, ctx) { if (rf & 1) {
28132
28129
  i0.ɵɵelementStart(0, "div", 28);
28133
28130
  i0.ɵɵtemplate(1, PoTableComponent_div_1_Template, 9, 4, "div", 29)(2, PoTableComponent_div_2_Template, 4, 2, "div", 30)(3, PoTableComponent_div_3_Template, 2, 3, "div", 31);
28134
28131
  i0.ɵɵelementEnd();
@@ -28162,7 +28159,7 @@ class PoTableComponent extends PoTableBaseComponent {
28162
28159
  }
28163
28160
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableComponent, [{
28164
28161
  type: Component,
28165
- args: [{ selector: 'po-table', providers: [PoDateService], standalone: false, template: "<div class=\"po-table-actions\">\n <div\n #columnBatchActions\n *ngIf=\"hasValidColumns && itemsSelected.length > 0 && !hideBatchActions\"\n class=\"po-table-actions-batch-actions\"\n >\n <div [ngPlural]=\"itemsSelected.length\" class=\"po-table-actions-batch-actions__label\">\n <strong>\n <ng-template ngPluralCase=\"=0\">{{ literals.noItem }}</ng-template>\n <ng-template ngPluralCase=\"=1\">{{ literals.oneItem }}</ng-template>\n <ng-template ngPluralCase=\"other\">{{ itemsSelected.length }} {{ literals.multipleItems }}</ng-template>\n </strong>\n </div>\n\n <div class=\"po-table-actions-batch-actions__buttons\">\n <po-button\n p-icon=\"ICON_DELETE\"\n [p-danger]=\"true\"\n [p-disabled]=\"itemsSelected.length > 1 && serviceDeleteApi !== undefined\"\n [p-label]=\"literals.delete\"\n (p-click)=\"modalDelete.open()\"\n ></po-button>\n </div>\n </div>\n\n <div #columnManager *ngIf=\"hasValidColumns && !hideColumnsManager\" class=\"po-table-actions-column-manager\">\n <po-button\n #columnManagerTarget\n p-icon=\"ICON_SETTINGS\"\n p-kind=\"tertiary\"\n p-tooltip-position=\"left\"\n [p-aria-label]=\"literals.columnsManager\"\n [p-tooltip]=\"literals.columnsManager\"\n (p-click)=\"onOpenColumnManager()\"\n ></po-button>\n </div>\n\n <div *ngIf=\"!hideTableSearch && hasValidColumns\" class=\"po-table-search\">\n <po-search\n [p-items]=\"items\"\n [p-filter-keys]=\"filteredColumns\"\n [p-filter-type]=\"filterType\"\n (p-filtered-items-change)=\"onFilteredItemsChange($event)\"\n >\n </po-search>\n </div>\n</div>\n<po-container *ngIf=\"container; else tableContainerTemplate\" p-no-padding>\n <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\n</po-container>\n\n<ng-template #tableContainerTemplate>\n <div [class.po-table-container-sticky]=\"loading\">\n <po-loading-overlay *ngIf=\"loading\" [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\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 #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n <div *ngIf=\"virtualScroll\">\n <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n </div>\n <div *ngIf=\"!virtualScroll\" class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n </div>\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<!-- Show More Button -->\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<!-- Table default-->\n<ng-template #tableTemplate>\n <table\n #tableScrollable\n class=\"po-table\"\n [ngClass]=\"{\n 'po-table-interactive': selectable || sort,\n 'po-table-selectable': selectable,\n 'po-table-striped': striped,\n 'po-table-data-fixed-columns': applyFixedColumns(),\n 'po-table-text-wrap-enabled': textWrap\n }\"\n [attr.p-spacing]=\"spacing\"\n >\n <thead [class.po-table-header-sticky]=\"height > 0 && !virtualScroll\">\n <tr\n [ngClass]=\"!height ? { 'no-hover': hideSelectAll, 'po-table-column-drag': this.isDraggable } : ''\"\n [class.po-table-header]=\"!height\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n <th\n *ngIf=\"hasSelectableColumn\"\n [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\n class=\"po-table-column-selectable\"\n >\n <div [class.po-table-header-fixed-inner]=\"height\">\n <po-checkbox\n name=\"selectAll\"\n *ngIf=\"!hideSelectAll\"\n (p-change)=\"selectAllRows()\"\n [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n ></po-checkbox>\n </div>\n </th>\n\n <th\n *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight\"\n class=\"po-table-header-column po-table-header-master-detail\"\n ></th>\n\n <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n <th\n #columnActionLeft\n *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n [class.po-table-header-master-detail]=\"!isSingleAction\"\n [class.po-table-header-single-action]=\"isSingleAction\"\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 <ng-container\n *ngIf=\"this.isDraggable || hasSomeFixed(); then tableDefaultThDragDrop; else tableDefaultThDefault\"\n >\n </ng-container>\n <ng-template #tableDefaultThDragDrop>\n <th\n *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n class=\"po-table-header-ellipsis p-element po-frozen-column\"\n [style.width]=\"column.width\"\n [style.max-width]=\"column.width\"\n [style.min-width]=\"column.width\"\n [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n [ngClass]=\"{\n 'po-table-header-sorted':\n sort &&\n JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n (sortedColumn.ascending || !sortedColumn.ascending)\n }\"\n [ngStyle]=\"{\n 'width':\n height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n }\"\n [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n [class.po-table-column-drag-box]=\"this.isDraggable\"\n (click)=\"sortColumn(column)\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n [pFrozenColumn]=\"column.fixed\"\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 *ngIf=\"this.isDraggable && !column.fixed\">\n <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_DRAG\"></po-icon>\n <svg\n *ngIf=\"iconNameLib === 'PoIcon'\"\n cdkDragHandle\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n </svg>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n </div>\n </th>\n </ng-template>\n <ng-template #tableDefaultThDefault>\n <th\n *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n class=\"po-table-header-ellipsis p-element po-frozen-column\"\n [style.width]=\"column.width\"\n [style.max-width]=\"column.width\"\n [style.min-width]=\"column.width\"\n [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n [ngClass]=\"{\n 'po-table-header-sorted':\n sort &&\n JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n (sortedColumn.ascending || !sortedColumn.ascending)\n }\"\n [ngStyle]=\"{\n 'width':\n height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n }\"\n [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n (click)=\"sortColumn(column)\"\n [pFrozenColumn]=\"column.fixed\"\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 </ng-template>\n\n <th\n *ngIf=\"hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager) && hasMainColumns\"\n class=\"po-table-header-column po-table-header-master-detail\"\n ></th>\n\n <th\n *ngIf=\"hasVisibleActions && actionRight && (visibleActions.length > 1 || isSingleAction)\"\n [class.po-table-header-single-action]=\"isSingleAction\"\n [class.po-table-header-actions]=\"!isSingleAction\"\n ></th>\n </tr>\n </thead>\n\n <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n <tr class=\"po-table-row po-table-row-no-data\">\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 filteredItems; 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-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 ou pela diretiva -->\n <td\n *ngIf=\"\n (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n \"\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 <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n <ng-template\n *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n >\n </ng-template>\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 [pFrozenColumn]=\"column.fixed\"\n class=\"p-element po-frozen-column\"\n [ngClass]=\"getClassColor(row, column)\"\n (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n >\n <div\n class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n [ngSwitch]=\"column.type\"\n [p-tooltip]=\"tooltipText\"\n [p-append-in-body]=\"true\"\n (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n (mouseleave)=\"tooltipMouseLeave()\"\n >\n <span *ngSwitchCase=\"'columnTemplate'\">\n <ng-container *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\">\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(getCellData(row, column), column) }}\n </span>\n\n <span *ngSwitchCase=\"'currency'\">\n {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n </span>\n\n <span *ngSwitchCase=\"'date'\">\n {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n </span>\n\n <span *ngSwitchCase=\"'time'\">\n {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n </span>\n\n <span *ngSwitchCase=\"'dateTime'\">\n {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n </span>\n\n <span *ngSwitchCase=\"'number'\">\n {{ formatNumber(getCellData(row, column), 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]=\"getCellData(row, column)\"\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>{{ getCellData(row, column) }}</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 <!-- Coluna de a\u00E7oes na direita -->\n <ng-template\n *ngIf=\"actionRight\"\n [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n >\n </ng-template>\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-parent-row]=\"row\"\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<!-- Table with virtual scroll -->\n<ng-template #tableVirtualScrollTemplate>\n <cdk-virtual-scroll-viewport\n #tableVirtualScroll\n [itemSize]=\"itemSize\"\n [style.height.px]=\"heightTableContainer\"\n [minBufferPx]=\"heightTableContainer < 100 ? 100 : heightTableContainer\"\n [maxBufferPx]=\"heightTableContainer < 200 ? 200 : heightTableContainer\"\n >\n <table\n class=\"po-table\"\n [ngClass]=\"{\n 'po-table-interactive': selectable || sort,\n 'po-table-selectable': selectable,\n 'po-table-striped': striped,\n 'po-table-data-fixed-columns': applyFixedColumns(),\n 'po-table-text-wrap-enabled': textWrap\n }\"\n [attr.p-spacing]=\"spacing\"\n >\n <thead class=\"po-table-header-sticky\" [style.top]=\"inverseOfTranslation\">\n <tr\n [class.po-table-header]=\"!height\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n <th\n *ngIf=\"hasSelectableColumn\"\n [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\n class=\"po-table-column-selectable\"\n >\n <div [class.po-table-header-fixed-inner]=\"height\">\n <po-checkbox\n name=\"selectAll\"\n *ngIf=\"!hideSelectAll\"\n (p-change)=\"selectAllRows()\"\n [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n ></po-checkbox>\n </div>\n </th>\n\n <th\n *ngIf=\"\n (hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight\n \"\n class=\"po-table-header-column po-table-header-master-detail\"\n ></th>\n\n <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n <th\n #columnActionLeft\n *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n [class.po-table-header-master-detail]=\"!isSingleAction\"\n [class.po-table-header-single-action]=\"isSingleAction\"\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 <ng-container\n *ngIf=\"\n this.isDraggable || hasSomeFixed();\n then tableVirtualScrollThDragDrop;\n else tableVirtualScrollThDefault\n \"\n >\n </ng-container>\n <ng-template #tableVirtualScrollThDragDrop>\n <th\n *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n class=\"po-table-header-ellipsis p-element po-frozen-column\"\n [style.width]=\"column.width\"\n [style.max-width]=\"column.width\"\n [style.min-width]=\"column.width\"\n [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n [ngClass]=\"{\n 'po-table-header-sorted':\n sort &&\n JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n (sortedColumn.ascending || !sortedColumn.ascending)\n }\"\n [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n [class.po-table-column-drag-box]=\"this.isDraggable\"\n (click)=\"sortColumn(column)\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n [pFrozenColumn]=\"column.fixed\"\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 *ngIf=\"this.isDraggable && !column.fixed\">\n <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_DRAG\"></po-icon>\n <svg\n *ngIf=\"iconNameLib === 'PoIcon'\"\n cdkDragHandle\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n </svg>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n </div>\n </th>\n </ng-template>\n <ng-template #tableVirtualScrollThDefault>\n <th\n *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n class=\"po-table-header-ellipsis p-element po-frozen-column example-box\"\n [style.width]=\"column.width\"\n [style.max-width]=\"column.width\"\n [style.min-width]=\"column.width\"\n [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n [ngClass]=\"{\n 'po-table-header-sorted':\n sort &&\n JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n (sortedColumn.ascending || !sortedColumn.ascending)\n }\"\n [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n (click)=\"sortColumn(column)\"\n [pFrozenColumn]=\"column.fixed\"\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 </ng-template>\n\n <th\n *ngIf=\"hasRowTemplateWithArrowDirectionRight && hasMainColumns && (hasVisibleActions || hideColumnsManager)\"\n class=\"po-table-header-column po-table-header-master-detail\"\n ></th>\n\n <th\n *ngIf=\"hasVisibleActions && actionRight && (visibleActions.length > 1 || isSingleAction)\"\n [class.po-table-header-single-action]=\"isSingleAction\"\n [class.po-table-header-actions]=\"!isSingleAction\"\n ></th>\n </tr>\n </thead>\n\n <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n <tr class=\"po-table-row po-table-row-no-data\">\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\n class=\"po-table-group-row\"\n *cdkVirtualFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\"\n >\n <tr\n class=\"po-table-row\"\n [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\n >\n <td *ngIf=\"selectable\" class=\"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 pela diretiva -->\n <td\n *ngIf=\"\n (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n \"\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 <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n <ng-template\n *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n >\n </ng-template>\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 [pFrozenColumn]=\"column.fixed\"\n class=\"p-element po-frozen-column\"\n (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n >\n <div\n class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n [ngSwitch]=\"column.type\"\n [p-tooltip]=\"tooltipText\"\n [p-append-in-body]=\"true\"\n (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n (mouseleave)=\"tooltipMouseLeave()\"\n >\n <span *ngSwitchCase=\"'columnTemplate'\">\n <ng-container\n *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n >\n </ng-container>\n </span>\n\n <span *ngSwitchCase=\"'cellTemplate'\">\n <ng-container\n *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n >\n </ng-container>\n </span>\n\n <span *ngSwitchCase=\"'boolean'\">\n {{ getBooleanLabel(getCellData(row, column), column) }}\n </span>\n\n <span *ngSwitchCase=\"'currency'\">\n {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n </span>\n\n <span *ngSwitchCase=\"'date'\">\n {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n </span>\n\n <span *ngSwitchCase=\"'time'\">\n {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n </span>\n\n <span *ngSwitchCase=\"'dateTime'\">\n {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n </span>\n\n <span *ngSwitchCase=\"'number'\">\n {{ formatNumber(getCellData(row, column), 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]=\"getCellData(row, column)\"\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>{{ getCellData(row, column) }}</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 <!-- Coluna de a\u00E7oes na direita -->\n <ng-template\n *ngIf=\"actionRight\"\n [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n >\n </ng-template>\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-parent-row]=\"row\"\n (p-select-row)=\"selectDetailRow($event)\"\n >\n </po-table-detail>\n </td>\n </tr>\n </tbody>\n </ng-container>\n </table>\n </cdk-virtual-scroll-viewport>\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 <po-icon\n *ngIf=\"(containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)\"\n [p-icon]=\"row.$showDetail ? 'ICON_ARROW_UP' : 'ICON_ARROW_DOWN'\"\n class=\"po-clickable\"\n >\n </po-icon>\n</ng-template>\n\n<ng-template #inputRadio let-row>\n <po-radio [name]=\"idRadio\" [p-checked]=\"row.$selected\" (p-change-selected)=\"selectRow(row)\"></po-radio>\n</ng-template>\n\n<ng-template #inputCheckbox let-row>\n <po-checkbox\n name=\"checkbox\"\n (p-change)=\"selectable ? selectRow(row) : 'javascript:;'\"\n [p-checkboxValue]=\"row.$selected === null ? 'mixed' : row.$selected\"\n ></po-checkbox>\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 [p-append-in-body]=\"true\"\n (mouseenter)=\"tooltipMouseEnter($event)\"\n (mouseleave)=\"tooltipMouseLeave()\"\n >\n {{ column.label || (column.property | titlecase) }}\n </span>\n\n <span\n *ngIf=\"sort && column.sortable !== false\"\n [class.po-table-header-icon-unselected]=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\"\n [class.po-table-header-icon-descending]=\"\n JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\n \"\n [class.po-table-header-icon-ascending]=\"\n JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\n \"\n >\n <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\">\n <po-icon *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_SORT\"></po-icon>\n <svg\n *ngIf=\"iconNameLib === 'PoIcon'\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M18.2929 15.2929L17 16.5858L17 10C17 9.44772 16.5523 9 16 9C15.4477 9 15 9.44772 15 10L15 16.5858L13.7071 15.2929C13.3166 14.9024 12.6834 14.9024 12.2929 15.2929C11.9024 15.6834 11.9024 16.3166 12.2929 16.7071L15.2929 19.7071C15.6834 20.0976 16.3166 20.0976 16.7071 19.7071L19.7071 16.7071C20.0976 16.3166 20.0976 15.6834 19.7071 15.2929C19.3166 14.9024 18.6834 14.9024 18.2929 15.2929ZM5.70716 8.7071L7.00006 7.4142L7.00003 14C7.00002 14.5523 7.44774 15 8.00002 15C8.55231 15 9.00002 14.5523 9.00003 14L9.00006 7.41418L10.2929 8.70707C10.6835 9.09759 11.3166 9.09758 11.7072 8.70706C12.0977 8.31653 12.0977 7.68336 11.7072 7.29284L8.70718 4.29286C8.31665 3.90234 7.68349 3.90235 7.29296 4.29287L4.29295 7.29289C3.90242 7.68342 3.90242 8.31658 4.29294 8.70711C4.68347 9.09763 5.31663 9.09762 5.70716 8.7071Z\"\n fill=\"#1D1D30\"\n />\n </svg>\n </ng-container>\n\n <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\">\n <po-icon *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_SORT_ASC\"></po-icon>\n <svg\n *ngIf=\"iconNameLib === 'PoIcon'\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M11 9.41421L9.70711 10.7071C9.31658 11.0976 8.68342 11.0976 8.29289 10.7071C7.90237 10.3166 7.90237 9.68342 8.29289 9.29289L11.2929 6.29289C11.6834 5.90237 12.3166 5.90237 12.7071 6.29289L15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071C15.3166 11.0976 14.6834 11.0976 14.2929 10.7071L13 9.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V9.41421Z\"\n fill=\"black\"\n />\n </svg>\n </ng-container>\n\n <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\">\n <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_SORT_DESC\"></po-icon>\n <svg\n *ngIf=\"iconNameLib === 'PoIcon'\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M9.70711 13.2929L11 14.5858V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V14.5858L14.2929 13.2929C14.6834 12.9024 15.3166 12.9024 15.7071 13.2929C16.0976 13.6834 16.0976 14.3166 15.7071 14.7071L12.7071 17.7071C12.3166 18.0976 11.6834 18.0976 11.2929 17.7071L8.29289 14.7071C7.90237 14.3166 7.90237 13.6834 8.29289 13.2929C8.68342 12.9024 9.31658 12.9024 9.70711 13.2929Z\"\n fill=\"black\"\n />\n </svg>\n </ng-container>\n </span>\n</ng-template>\n\n<ng-template #noColumnsWithHeight>\n <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"headerWidth\">\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<!-- Template de a\u00E7\u00F5es -->\n<ng-template #ActionsColumnTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n <td\n *ngIf=\"isSingleAction\"\n class=\"po-table-column po-table-column-single-action\"\n [style.width.px]=\"height && actionRight ? getWidthColumnManager() : ''\"\n [style.max-width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n [style.width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n >\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 *ngIf=\"firstAction.icon\" class=\"po-table-single-action-content\" [p-icon]=\"firstAction.icon\"></po-icon>\n {{ firstAction.label }}\n </div>\n </td>\n\n <td *ngIf=\"visibleActions.length > 1\" class=\"po-table-column-actions\">\n <div #popupTarget class=\"po-clickable\" (click)=\"togglePopup(row, popupTarget)\">\n <po-icon p-icon=\"ICON_MORE\"></po-icon>\n </div>\n </td>\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-hide-action-fixed-columns]=\"hideActionFixedColumns\"\n (p-visible-columns-change)=\"onVisibleColumnsChange($event)\"\n (p-change-visible-columns)=\"onChangeVisibleColumns($event)\"\n [p-columns-default]=\"initialColumns\"\n (p-initial-columns)=\"onColumnRestoreManager($event)\"\n>\n</po-table-column-manager>\n\n<po-modal\n #modalDelete\n [p-title]=\"literals.delete\"\n [p-primary-action]=\"confirm\"\n [p-secondary-action]=\"close\"\n [p-click-out]=\"true\"\n>\n <p class=\"po-font-text-large\">{{ literals.bodyDelete }}</p>\n</po-modal>\n" }]
28162
+ args: [{ selector: 'po-table', providers: [PoDateService, PoTableService], standalone: false, template: "<div class=\"po-table-actions\">\n <div\n #columnBatchActions\n *ngIf=\"hasValidColumns && itemsSelected.length > 0 && !hideBatchActions\"\n class=\"po-table-actions-batch-actions\"\n >\n <div [ngPlural]=\"itemsSelected.length\" class=\"po-table-actions-batch-actions__label\">\n <strong>\n <ng-template ngPluralCase=\"=0\">{{ literals.noItem }}</ng-template>\n <ng-template ngPluralCase=\"=1\">{{ literals.oneItem }}</ng-template>\n <ng-template ngPluralCase=\"other\">{{ itemsSelected.length }} {{ literals.multipleItems }}</ng-template>\n </strong>\n </div>\n\n <div class=\"po-table-actions-batch-actions__buttons\">\n <po-button\n p-icon=\"ICON_DELETE\"\n [p-danger]=\"true\"\n [p-disabled]=\"itemsSelected.length > 1 && serviceDeleteApi !== undefined\"\n [p-label]=\"literals.delete\"\n (p-click)=\"modalDelete.open()\"\n ></po-button>\n </div>\n </div>\n\n <div #columnManager *ngIf=\"hasValidColumns && !hideColumnsManager\" class=\"po-table-actions-column-manager\">\n <po-button\n #columnManagerTarget\n p-icon=\"ICON_SETTINGS\"\n p-kind=\"tertiary\"\n p-tooltip-position=\"left\"\n [p-aria-label]=\"literals.columnsManager\"\n [p-tooltip]=\"literals.columnsManager\"\n (p-click)=\"onOpenColumnManager()\"\n ></po-button>\n </div>\n\n <div *ngIf=\"!hideTableSearch && hasValidColumns\" class=\"po-table-search\">\n <po-search\n [p-items]=\"items\"\n [p-filter-keys]=\"filteredColumns\"\n [p-filter-type]=\"filterType\"\n (p-filtered-items-change)=\"onFilteredItemsChange($event)\"\n >\n </po-search>\n </div>\n</div>\n<po-container *ngIf=\"container; else tableContainerTemplate\" p-no-padding>\n <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\n</po-container>\n\n<ng-template #tableContainerTemplate>\n <div [class.po-table-container-sticky]=\"loading\">\n <po-loading-overlay *ngIf=\"loading\" [p-text]=\"literals.loadingData\" [p-size]=\"sizeLoading\"></po-loading-overlay>\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 #poTableTbody [class.po-table-container-fixed-inner]=\"virtualScroll\">\n <div *ngIf=\"virtualScroll\">\n <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n </div>\n <div *ngIf=\"!virtualScroll\" class=\"po-table-container-overflow\" [style.height.px]=\"heightTableContainer\">\n <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n </div>\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<!-- Show More Button -->\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<!-- Table default-->\n<ng-template #tableTemplate>\n <table\n #tableScrollable\n class=\"po-table\"\n [ngClass]=\"{\n 'po-table-interactive': selectable || sort,\n 'po-table-selectable': selectable,\n 'po-table-striped': striped,\n 'po-table-data-fixed-columns': applyFixedColumns(),\n 'po-table-text-wrap-enabled': textWrap\n }\"\n [attr.p-spacing]=\"spacing\"\n >\n <thead [class.po-table-header-sticky]=\"height > 0 && !virtualScroll\">\n <tr\n [ngClass]=\"!height ? { 'no-hover': hideSelectAll, 'po-table-column-drag': this.isDraggable } : ''\"\n [class.po-table-header]=\"!height\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n <th\n *ngIf=\"hasSelectableColumn\"\n [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\n class=\"po-table-column-selectable\"\n >\n <div [class.po-table-header-fixed-inner]=\"height\">\n <po-checkbox\n name=\"selectAll\"\n *ngIf=\"!hideSelectAll\"\n (p-change)=\"selectAllRows()\"\n [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n ></po-checkbox>\n </div>\n </th>\n\n <th\n *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight\"\n class=\"po-table-header-column po-table-header-master-detail\"\n ></th>\n\n <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n <th\n #columnActionLeft\n *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n [class.po-table-header-master-detail]=\"!isSingleAction\"\n [class.po-table-header-single-action]=\"isSingleAction\"\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 <ng-container\n *ngIf=\"this.isDraggable || hasSomeFixed(); then tableDefaultThDragDrop; else tableDefaultThDefault\"\n >\n </ng-container>\n <ng-template #tableDefaultThDragDrop>\n <th\n *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n class=\"po-table-header-ellipsis p-element po-frozen-column\"\n [style.width]=\"column.width\"\n [style.max-width]=\"column.width\"\n [style.min-width]=\"column.width\"\n [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n [ngClass]=\"{\n 'po-table-header-sorted':\n sort &&\n JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n (sortedColumn.ascending || !sortedColumn.ascending)\n }\"\n [ngStyle]=\"{\n 'width':\n height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n }\"\n [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n [class.po-table-column-drag-box]=\"this.isDraggable\"\n (click)=\"sortColumn(column)\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n [pFrozenColumn]=\"column.fixed\"\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 *ngIf=\"this.isDraggable && !column.fixed\">\n <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_DRAG\"></po-icon>\n <svg\n *ngIf=\"iconNameLib === 'PoIcon'\"\n cdkDragHandle\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n </svg>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n </div>\n </th>\n </ng-template>\n <ng-template #tableDefaultThDefault>\n <th\n *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n class=\"po-table-header-ellipsis p-element po-frozen-column\"\n [style.width]=\"column.width\"\n [style.max-width]=\"column.width\"\n [style.min-width]=\"column.width\"\n [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n [ngClass]=\"{\n 'po-table-header-sorted':\n sort &&\n JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n (sortedColumn.ascending || !sortedColumn.ascending)\n }\"\n [ngStyle]=\"{\n 'width':\n height > 0 && !virtualScroll ? (!hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto') : ''\n }\"\n [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n (click)=\"sortColumn(column)\"\n [pFrozenColumn]=\"column.fixed\"\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 </ng-template>\n\n <th\n *ngIf=\"hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager) && hasMainColumns\"\n class=\"po-table-header-column po-table-header-master-detail\"\n ></th>\n\n <th\n *ngIf=\"hasVisibleActions && actionRight && (visibleActions.length > 1 || isSingleAction)\"\n [class.po-table-header-single-action]=\"isSingleAction\"\n [class.po-table-header-actions]=\"!isSingleAction\"\n ></th>\n </tr>\n </thead>\n\n <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n <tr class=\"po-table-row po-table-row-no-data\">\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 filteredItems; 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-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 ou pela diretiva -->\n <td\n *ngIf=\"\n (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n \"\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 <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n <ng-template\n *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n >\n </ng-template>\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 [pFrozenColumn]=\"column.fixed\"\n class=\"p-element po-frozen-column\"\n [ngClass]=\"getClassColor(row, column)\"\n (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n >\n <div\n class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n [ngSwitch]=\"column.type\"\n [p-tooltip]=\"tooltipText\"\n [p-append-in-body]=\"true\"\n (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n (mouseleave)=\"tooltipMouseLeave()\"\n >\n <span *ngSwitchCase=\"'columnTemplate'\">\n <ng-container *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\">\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(getCellData(row, column), column) }}\n </span>\n\n <span *ngSwitchCase=\"'currency'\">\n {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n </span>\n\n <span *ngSwitchCase=\"'date'\">\n {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n </span>\n\n <span *ngSwitchCase=\"'time'\">\n {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n </span>\n\n <span *ngSwitchCase=\"'dateTime'\">\n {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n </span>\n\n <span *ngSwitchCase=\"'number'\">\n {{ formatNumber(getCellData(row, column), 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]=\"getCellData(row, column)\"\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>{{ getCellData(row, column) }}</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 <!-- Coluna de a\u00E7oes na direita -->\n <ng-template\n *ngIf=\"actionRight\"\n [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n >\n </ng-template>\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-parent-row]=\"row\"\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<!-- Table with virtual scroll -->\n<ng-template #tableVirtualScrollTemplate>\n <cdk-virtual-scroll-viewport\n #tableVirtualScroll\n [itemSize]=\"itemSize\"\n [style.height.px]=\"heightTableContainer\"\n [minBufferPx]=\"heightTableContainer < 100 ? 100 : heightTableContainer\"\n [maxBufferPx]=\"heightTableContainer < 200 ? 200 : heightTableContainer\"\n >\n <table\n class=\"po-table\"\n [ngClass]=\"{\n 'po-table-interactive': selectable || sort,\n 'po-table-selectable': selectable,\n 'po-table-striped': striped,\n 'po-table-data-fixed-columns': applyFixedColumns(),\n 'po-table-text-wrap-enabled': textWrap\n }\"\n [attr.p-spacing]=\"spacing\"\n >\n <thead class=\"po-table-header-sticky\" [style.top]=\"inverseOfTranslation\">\n <tr\n [class.po-table-header]=\"!height\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n <th\n *ngIf=\"hasSelectableColumn\"\n [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\n class=\"po-table-column-selectable\"\n >\n <div [class.po-table-header-fixed-inner]=\"height\">\n <po-checkbox\n name=\"selectAll\"\n *ngIf=\"!hideSelectAll\"\n (p-change)=\"selectAllRows()\"\n [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n ></po-checkbox>\n </div>\n </th>\n\n <th\n *ngIf=\"\n (hasMasterDetailColumn || hasRowTemplate) && hasMainColumns && !hasRowTemplateWithArrowDirectionRight\n \"\n class=\"po-table-header-column po-table-header-master-detail\"\n ></th>\n\n <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n <th\n #columnActionLeft\n *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n [class.po-table-header-master-detail]=\"!isSingleAction\"\n [class.po-table-header-single-action]=\"isSingleAction\"\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 <ng-container\n *ngIf=\"\n this.isDraggable || hasSomeFixed();\n then tableVirtualScrollThDragDrop;\n else tableVirtualScrollThDefault\n \"\n >\n </ng-container>\n <ng-template #tableVirtualScrollThDragDrop>\n <th\n *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n class=\"po-table-header-ellipsis p-element po-frozen-column\"\n [style.width]=\"column.width\"\n [style.max-width]=\"column.width\"\n [style.min-width]=\"column.width\"\n [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n [ngClass]=\"{\n 'po-table-header-sorted':\n sort &&\n JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n (sortedColumn.ascending || !sortedColumn.ascending)\n }\"\n [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n [class.po-table-column-drag-box]=\"this.isDraggable\"\n (click)=\"sortColumn(column)\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n [pFrozenColumn]=\"column.fixed\"\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 *ngIf=\"this.isDraggable && !column.fixed\">\n <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_DRAG\"></po-icon>\n <svg\n *ngIf=\"iconNameLib === 'PoIcon'\"\n cdkDragHandle\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n </svg>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n </div>\n </th>\n </ng-template>\n <ng-template #tableVirtualScrollThDefault>\n <th\n *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n class=\"po-table-header-ellipsis p-element po-frozen-column example-box\"\n [style.width]=\"column.width\"\n [style.max-width]=\"column.width\"\n [style.min-width]=\"column.width\"\n [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n [ngClass]=\"{\n 'po-table-header-sorted':\n sort &&\n JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n (sortedColumn.ascending || !sortedColumn.ascending)\n }\"\n [ngStyle]=\"{ 'width': !hasItems ? '100%' : applyFixedColumns() ? column.width : 'auto' }\"\n [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n (click)=\"sortColumn(column)\"\n [pFrozenColumn]=\"column.fixed\"\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 </ng-template>\n\n <th\n *ngIf=\"hasRowTemplateWithArrowDirectionRight && hasMainColumns && (hasVisibleActions || hideColumnsManager)\"\n class=\"po-table-header-column po-table-header-master-detail\"\n ></th>\n\n <th\n *ngIf=\"hasVisibleActions && actionRight && (visibleActions.length > 1 || isSingleAction)\"\n [class.po-table-header-single-action]=\"isSingleAction\"\n [class.po-table-header-actions]=\"!isSingleAction\"\n ></th>\n </tr>\n </thead>\n\n <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n <tr class=\"po-table-row po-table-row-no-data\">\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\n class=\"po-table-group-row\"\n *cdkVirtualFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\"\n >\n <tr\n class=\"po-table-row\"\n [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\n >\n <td *ngIf=\"selectable\" class=\"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 pela diretiva -->\n <td\n *ngIf=\"\n (columnMasterDetail && !hideDetail && !hasRowTemplate) ||\n (hasRowTemplate && !hasRowTemplateWithArrowDirectionRight)\n \"\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 <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n <ng-template\n *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n >\n </ng-template>\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 [pFrozenColumn]=\"column.fixed\"\n class=\"p-element po-frozen-column\"\n (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n >\n <div\n class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n [ngSwitch]=\"column.type\"\n [p-tooltip]=\"tooltipText\"\n [p-append-in-body]=\"true\"\n (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n (mouseleave)=\"tooltipMouseLeave()\"\n >\n <span *ngSwitchCase=\"'columnTemplate'\">\n <ng-container\n *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n >\n </ng-container>\n </span>\n\n <span *ngSwitchCase=\"'cellTemplate'\">\n <ng-container\n *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n >\n </ng-container>\n </span>\n\n <span *ngSwitchCase=\"'boolean'\">\n {{ getBooleanLabel(getCellData(row, column), column) }}\n </span>\n\n <span *ngSwitchCase=\"'currency'\">\n {{ getCellData(row, column) | currency: column.format : 'symbol' : '1.2-2' }}\n </span>\n\n <span *ngSwitchCase=\"'date'\">\n {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n </span>\n\n <span *ngSwitchCase=\"'time'\">\n {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n </span>\n\n <span *ngSwitchCase=\"'dateTime'\">\n {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n </span>\n\n <span *ngSwitchCase=\"'number'\">\n {{ formatNumber(getCellData(row, column), 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]=\"getCellData(row, column)\"\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>{{ getCellData(row, column) }}</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 <!-- Coluna de a\u00E7oes na direita -->\n <ng-template\n *ngIf=\"actionRight\"\n [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n >\n </ng-template>\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-parent-row]=\"row\"\n (p-select-row)=\"selectDetailRow($event)\"\n >\n </po-table-detail>\n </td>\n </tr>\n </tbody>\n </ng-container>\n </table>\n </cdk-virtual-scroll-viewport>\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 <po-icon\n *ngIf=\"(containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)\"\n [p-icon]=\"row.$showDetail ? 'ICON_ARROW_UP' : 'ICON_ARROW_DOWN'\"\n class=\"po-clickable\"\n >\n </po-icon>\n</ng-template>\n\n<ng-template #inputRadio let-row>\n <po-radio [name]=\"idRadio\" [p-checked]=\"row.$selected\" (p-change-selected)=\"selectRow(row)\"></po-radio>\n</ng-template>\n\n<ng-template #inputCheckbox let-row>\n <po-checkbox\n name=\"checkbox\"\n (p-change)=\"selectable ? selectRow(row) : 'javascript:;'\"\n [p-checkboxValue]=\"row.$selected === null ? 'mixed' : row.$selected\"\n ></po-checkbox>\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 [p-append-in-body]=\"true\"\n (mouseenter)=\"tooltipMouseEnter($event)\"\n (mouseleave)=\"tooltipMouseLeave()\"\n >\n {{ column.label || (column.property | titlecase) }}\n </span>\n\n <span\n *ngIf=\"sort && column.sortable !== false\"\n [class.po-table-header-icon-unselected]=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\"\n [class.po-table-header-icon-descending]=\"\n JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\n \"\n [class.po-table-header-icon-ascending]=\"\n JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\n \"\n >\n <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\">\n <po-icon *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_SORT\"></po-icon>\n <svg\n *ngIf=\"iconNameLib === 'PoIcon'\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M18.2929 15.2929L17 16.5858L17 10C17 9.44772 16.5523 9 16 9C15.4477 9 15 9.44772 15 10L15 16.5858L13.7071 15.2929C13.3166 14.9024 12.6834 14.9024 12.2929 15.2929C11.9024 15.6834 11.9024 16.3166 12.2929 16.7071L15.2929 19.7071C15.6834 20.0976 16.3166 20.0976 16.7071 19.7071L19.7071 16.7071C20.0976 16.3166 20.0976 15.6834 19.7071 15.2929C19.3166 14.9024 18.6834 14.9024 18.2929 15.2929ZM5.70716 8.7071L7.00006 7.4142L7.00003 14C7.00002 14.5523 7.44774 15 8.00002 15C8.55231 15 9.00002 14.5523 9.00003 14L9.00006 7.41418L10.2929 8.70707C10.6835 9.09759 11.3166 9.09758 11.7072 8.70706C12.0977 8.31653 12.0977 7.68336 11.7072 7.29284L8.70718 4.29286C8.31665 3.90234 7.68349 3.90235 7.29296 4.29287L4.29295 7.29289C3.90242 7.68342 3.90242 8.31658 4.29294 8.70711C4.68347 9.09763 5.31663 9.09762 5.70716 8.7071Z\"\n fill=\"#1D1D30\"\n />\n </svg>\n </ng-container>\n\n <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\">\n <po-icon *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_SORT_ASC\"></po-icon>\n <svg\n *ngIf=\"iconNameLib === 'PoIcon'\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M11 9.41421L9.70711 10.7071C9.31658 11.0976 8.68342 11.0976 8.29289 10.7071C7.90237 10.3166 7.90237 9.68342 8.29289 9.29289L11.2929 6.29289C11.6834 5.90237 12.3166 5.90237 12.7071 6.29289L15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071C15.3166 11.0976 14.6834 11.0976 14.2929 10.7071L13 9.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V9.41421Z\"\n fill=\"black\"\n />\n </svg>\n </ng-container>\n\n <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\">\n <po-icon cdkDragHandle *ngIf=\"iconNameLib === 'AnimaliaIcon'\" p-icon=\"ICON_SORT_DESC\"></po-icon>\n <svg\n *ngIf=\"iconNameLib === 'PoIcon'\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M9.70711 13.2929L11 14.5858V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V14.5858L14.2929 13.2929C14.6834 12.9024 15.3166 12.9024 15.7071 13.2929C16.0976 13.6834 16.0976 14.3166 15.7071 14.7071L12.7071 17.7071C12.3166 18.0976 11.6834 18.0976 11.2929 17.7071L8.29289 14.7071C7.90237 14.3166 7.90237 13.6834 8.29289 13.2929C8.68342 12.9024 9.31658 12.9024 9.70711 13.2929Z\"\n fill=\"black\"\n />\n </svg>\n </ng-container>\n </span>\n</ng-template>\n\n<ng-template #noColumnsWithHeight>\n <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"headerWidth\">\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<!-- Template de a\u00E7\u00F5es -->\n<ng-template #ActionsColumnTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n <td\n *ngIf=\"isSingleAction\"\n class=\"po-table-column po-table-column-single-action\"\n [style.width.px]=\"height && actionRight ? getWidthColumnManager() : ''\"\n [style.max-width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n [style.width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n >\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 *ngIf=\"firstAction.icon\" class=\"po-table-single-action-content\" [p-icon]=\"firstAction.icon\"></po-icon>\n {{ firstAction.label }}\n </div>\n </td>\n\n <td *ngIf=\"visibleActions.length > 1\" class=\"po-table-column-actions\">\n <div #popupTarget class=\"po-clickable\" (click)=\"togglePopup(row, popupTarget)\">\n <po-icon p-icon=\"ICON_MORE\"></po-icon>\n </div>\n </td>\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-hide-action-fixed-columns]=\"hideActionFixedColumns\"\n (p-visible-columns-change)=\"onVisibleColumnsChange($event)\"\n (p-change-visible-columns)=\"onChangeVisibleColumns($event)\"\n [p-columns-default]=\"initialColumns\"\n (p-initial-columns)=\"onColumnRestoreManager($event)\"\n>\n</po-table-column-manager>\n\n<po-modal\n #modalDelete\n [p-title]=\"literals.delete\"\n [p-primary-action]=\"confirm\"\n [p-secondary-action]=\"close\"\n [p-click-out]=\"true\"\n>\n <p class=\"po-font-text-large\">{{ literals.bodyDelete }}</p>\n</po-modal>\n" }]
28166
28163
  }], () => [{ type: PoDateService }, { type: i0.IterableDiffers }, { type: i0.Renderer2 }, { type: PoLanguageService }, { type: i0.ChangeDetectorRef }, { type: i1.DecimalPipe }, { type: PoTableService }, { type: undefined, decorators: [{
28167
28164
  type: Optional
28168
28165
  }, {
@@ -29301,6 +29298,12 @@ class PoComboBaseComponent {
29301
29298
  *
29302
29299
  */
29303
29300
  inputChange = new EventEmitter();
29301
+ /**
29302
+ * @docsPrivate
29303
+ *
29304
+ * Determinar se o valor do compo deve retorna objeto do tipo {value: any, label: any}
29305
+ */
29306
+ controlValueWithLabel = false;
29304
29307
  cacheOptions = [];
29305
29308
  defaultService;
29306
29309
  firstInWriteValue = true;
@@ -29817,6 +29820,7 @@ class PoComboBaseComponent {
29817
29820
  }
29818
29821
  // Recebe as alterações do model
29819
29822
  writeValue(value) {
29823
+ value = this.getValueWrite(value);
29820
29824
  this.fromWriteValue = true;
29821
29825
  if (validValue(value) && !this.service && this.comboOptionsList && this.comboOptionsList.length) {
29822
29826
  const option = this.getOptionFromValue(value, this.comboOptionsList);
@@ -29927,6 +29931,22 @@ class PoComboBaseComponent {
29927
29931
  return labelA < labelB ? -1 : labelA > labelB ? 1 : 0;
29928
29932
  };
29929
29933
  }
29934
+ getValueUpdate(data, selectedOption) {
29935
+ const { [this.dynamicValue]: value, [this.dynamicLabel]: label } = selectedOption || {};
29936
+ if (this.controlValueWithLabel && value) {
29937
+ return {
29938
+ value,
29939
+ label
29940
+ };
29941
+ }
29942
+ return data;
29943
+ }
29944
+ getValueWrite(data) {
29945
+ if (this.controlValueWithLabel && data?.value) {
29946
+ return data?.value;
29947
+ }
29948
+ return data;
29949
+ }
29930
29950
  hasDuplicatedOption(options, currentOption, accumulatedGroupOptions) {
29931
29951
  if (accumulatedGroupOptions) {
29932
29952
  return accumulatedGroupOptions.some(option => option[this.dynamicLabel] === currentOption);
@@ -30005,7 +30025,7 @@ class PoComboBaseComponent {
30005
30025
  updateModel(value) {
30006
30026
  if (value !== this.selectedValue) {
30007
30027
  if (!this.fromWriteValue) {
30008
- this.callModelChange(value);
30028
+ this.callModelChange(this.getValueUpdate(value, this.selectedOption));
30009
30029
  }
30010
30030
  this.change.emit(this.emitObjectValue ? this.selectedOption : value);
30011
30031
  }
@@ -30024,7 +30044,7 @@ class PoComboBaseComponent {
30024
30044
  }
30025
30045
  }
30026
30046
  static ɵfac = function PoComboBaseComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PoComboBaseComponent)(i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
30027
- static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoComboBaseComponent, inputs: { additionalHelpEventTrigger: "additionalHelpEventTrigger", additionalHelpTooltip: [0, "p-additional-help-tooltip", "additionalHelpTooltip"], autoFocus: [2, "p-auto-focus", "autoFocus", convertToBoolean], label: [0, "p-label", "label"], help: [0, "p-help", "help"], name: "name", filterService: [0, "p-filter-service", "filterService"], infiniteScroll: [0, "p-infinite-scroll", "infiniteScroll"], infiniteScrollDistance: [0, "p-infinite-scroll-distance", "infiniteScrollDistance"], icon: [0, "p-icon", "icon"], optional: [0, "p-optional", "optional"], clean: [2, "p-clean", "clean", convertToBoolean], emitObjectValue: [2, "p-emit-object-value", "emitObjectValue", convertToBoolean], disabledTabFilter: [2, "p-disabled-tab-filter", "disabledTabFilter", convertToBoolean], removeInitialFilter: [0, "p-remove-initial-filter", "removeInitialFilter"], fieldErrorMessage: [0, "p-field-error-message", "fieldErrorMessage"], errorLimit: [0, "p-error-limit", "errorLimit"], placeholder: [0, "p-placeholder", "placeholder"], debounceTime: [0, "p-debounce-time", "debounceTime"], disabledInitFilter: [0, "p-disabled-init-filter", "disabledInitFilter"], fieldValue: [0, "p-field-value", "fieldValue"], fieldLabel: [0, "p-field-label", "fieldLabel"], filterMinlength: [0, "p-filter-minlength", "filterMinlength"], required: [0, "p-required", "required"], showRequired: [0, "p-show-required", "showRequired"], changeOnEnter: [0, "p-change-on-enter", "changeOnEnter"], disabled: [0, "p-disabled", "disabled"], sort: [0, "p-sort", "sort"], options: [0, "p-options", "options"], filterMode: [0, "p-filter-mode", "filterMode"], filterParams: [0, "p-filter-params", "filterParams"], literals: [0, "p-literals", "literals"], cache: [2, "p-cache", "cache", convertToBoolean], appendBox: [2, "p-append-in-body", "appendBox", convertToBoolean] }, outputs: { additionalHelp: "p-additional-help", change: "p-change", keydown: "p-keydown", ngModelChange: "ngModelChange", inputChange: "p-input-change" }, features: [i0.ɵɵInputTransformsFeature] });
30047
+ static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoComboBaseComponent, inputs: { additionalHelpEventTrigger: "additionalHelpEventTrigger", additionalHelpTooltip: [0, "p-additional-help-tooltip", "additionalHelpTooltip"], autoFocus: [2, "p-auto-focus", "autoFocus", convertToBoolean], label: [0, "p-label", "label"], help: [0, "p-help", "help"], name: "name", filterService: [0, "p-filter-service", "filterService"], infiniteScroll: [0, "p-infinite-scroll", "infiniteScroll"], infiniteScrollDistance: [0, "p-infinite-scroll-distance", "infiniteScrollDistance"], icon: [0, "p-icon", "icon"], optional: [0, "p-optional", "optional"], clean: [2, "p-clean", "clean", convertToBoolean], emitObjectValue: [2, "p-emit-object-value", "emitObjectValue", convertToBoolean], disabledTabFilter: [2, "p-disabled-tab-filter", "disabledTabFilter", convertToBoolean], removeInitialFilter: [0, "p-remove-initial-filter", "removeInitialFilter"], fieldErrorMessage: [0, "p-field-error-message", "fieldErrorMessage"], errorLimit: [0, "p-error-limit", "errorLimit"], controlValueWithLabel: [2, "p-control-value-with-label", "controlValueWithLabel", convertToBoolean], placeholder: [0, "p-placeholder", "placeholder"], debounceTime: [0, "p-debounce-time", "debounceTime"], disabledInitFilter: [0, "p-disabled-init-filter", "disabledInitFilter"], fieldValue: [0, "p-field-value", "fieldValue"], fieldLabel: [0, "p-field-label", "fieldLabel"], filterMinlength: [0, "p-filter-minlength", "filterMinlength"], required: [0, "p-required", "required"], showRequired: [0, "p-show-required", "showRequired"], changeOnEnter: [0, "p-change-on-enter", "changeOnEnter"], disabled: [0, "p-disabled", "disabled"], sort: [0, "p-sort", "sort"], options: [0, "p-options", "options"], filterMode: [0, "p-filter-mode", "filterMode"], filterParams: [0, "p-filter-params", "filterParams"], literals: [0, "p-literals", "literals"], cache: [2, "p-cache", "cache", convertToBoolean], appendBox: [2, "p-append-in-body", "appendBox", convertToBoolean] }, outputs: { additionalHelp: "p-additional-help", change: "p-change", keydown: "p-keydown", ngModelChange: "ngModelChange", inputChange: "p-input-change" }, features: [i0.ɵɵInputTransformsFeature] });
30028
30048
  }
30029
30049
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoComboBaseComponent, [{
30030
30050
  type: Directive
@@ -30093,6 +30113,9 @@ class PoComboBaseComponent {
30093
30113
  }], inputChange: [{
30094
30114
  type: Output,
30095
30115
  args: ['p-input-change']
30116
+ }], controlValueWithLabel: [{
30117
+ type: Input,
30118
+ args: [{ alias: 'p-control-value-with-label', transform: convertToBoolean }]
30096
30119
  }], placeholder: [{
30097
30120
  type: Input,
30098
30121
  args: ['p-placeholder']
@@ -35132,11 +35155,8 @@ class PoDynamicFormBaseComponent {
35132
35155
  * - `function`: Método que será executado.
35133
35156
  *
35134
35157
  * Ao ser executado, irá receber como parâmetro um objeto com o nome da propriedade
35135
- * alterada e o novo valor, conforme a interface `PoDynamicFormFieldChanged`:
35158
+ * alterada e os valores atualizados do formulario, conforme a interface `PoDynamicFormFieldChanged`
35136
35159
  *
35137
- * ```
35138
- * { property: 'property name', value: 'new value' }
35139
- * ```
35140
35160
  *
35141
35161
  * O retorno desta função deve ser do tipo [PoDynamicFormValidation](documentation/po-dynamic-form#po-dynamic-form-validation),
35142
35162
  * onde o usuário poderá determinar as novas atualizações dos campos.
@@ -37607,6 +37627,12 @@ class PoMultiselectBaseComponent {
37607
37627
  * @default `false`
37608
37628
  */
37609
37629
  appendBox = false;
37630
+ /**
37631
+ * @docsPrivate
37632
+ *
37633
+ * Determinar se o valor do compo deve retorna objeto do tipo {value: any, label: any}
37634
+ */
37635
+ controlValueWithLabel = false;
37610
37636
  selectedOptions = [];
37611
37637
  visibleOptionsDropdown = [];
37612
37638
  visibleTags = [];
@@ -37988,7 +38014,7 @@ class PoMultiselectBaseComponent {
37988
38014
  }
37989
38015
  callOnChange(selectedOptions) {
37990
38016
  if (this.onModelChange) {
37991
- this.onModelChange(this.getValuesFromOptions(selectedOptions));
38017
+ this.onModelChange(this.getValueUpdate(selectedOptions));
37992
38018
  this.eventChange(selectedOptions);
37993
38019
  }
37994
38020
  }
@@ -38068,7 +38094,7 @@ class PoMultiselectBaseComponent {
38068
38094
  this.updateVisibleItems();
38069
38095
  }
38070
38096
  writeValue(values) {
38071
- values = values || [];
38097
+ values = this.getValueWrite(values) || [];
38072
38098
  if (this.service && values.length) {
38073
38099
  this.getObjectsByValuesSubscription = this.service.getObjectsByValues(values).subscribe(options => {
38074
38100
  this.updateSelectedOptions(options);
@@ -38097,6 +38123,18 @@ class PoMultiselectBaseComponent {
38097
38123
  registerOnValidatorChange(fn) {
38098
38124
  this.validatorChange = fn;
38099
38125
  }
38126
+ getValueUpdate(selectedOptions) {
38127
+ if (this.controlValueWithLabel && selectedOptions?.length) {
38128
+ return selectedOptions.map(option => ({ value: option[this.fieldValue], label: option[this.fieldLabel] }));
38129
+ }
38130
+ return this.getValuesFromOptions(selectedOptions);
38131
+ }
38132
+ getValueWrite(data) {
38133
+ if (this.controlValueWithLabel && data?.length && data.every(x => x?.value !== undefined)) {
38134
+ return data.map(option => option.value);
38135
+ }
38136
+ return data;
38137
+ }
38100
38138
  setLabelsAndValuesOptions() {
38101
38139
  if (this.fieldLabel && this.fieldValue && this.options) {
38102
38140
  this.options.map(option => {
@@ -38111,7 +38149,7 @@ class PoMultiselectBaseComponent {
38111
38149
  }
38112
38150
  }
38113
38151
  static ɵfac = function PoMultiselectBaseComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PoMultiselectBaseComponent)(i0.ɵɵdirectiveInject(PoLanguageService)); };
38114
- static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoMultiselectBaseComponent, inputs: { additionalHelpEventTrigger: "additionalHelpEventTrigger", additionalHelpTooltip: [0, "p-additional-help-tooltip", "additionalHelpTooltip"], autoFocus: [2, "p-auto-focus", "autoFocus", convertToBoolean], label: [0, "p-label", "label"], help: [0, "p-help", "help"], optional: [0, "p-optional", "optional"], placeholder: [0, "p-placeholder", "placeholder"], placeholderSearch: [0, "p-placeholder-search", "placeholderSearch"], name: "name", hideSelectAll: [2, "p-hide-select-all", "hideSelectAll", convertToBoolean], fieldErrorMessage: [0, "p-field-error-message", "fieldErrorMessage"], errorLimit: [0, "p-error-limit", "errorLimit"], appendBox: [2, "p-append-in-body", "appendBox", convertToBoolean], filterService: [0, "p-filter-service", "filterService"], autoHeight: [2, "p-auto-height", "autoHeight", convertToBoolean], debounceTime: [0, "p-debounce-time", "debounceTime"], literals: [0, "p-literals", "literals"], required: [0, "p-required", "required"], showRequired: [0, "p-show-required", "showRequired"], disabled: [0, "p-disabled", "disabled"], hideSearch: [0, "p-hide-search", "hideSearch"], options: [0, "p-options", "options"], sort: [0, "p-sort", "sort"], filterMode: [0, "p-filter-mode", "filterMode"], fieldLabel: [0, "p-field-label", "fieldLabel"], fieldValue: [0, "p-field-value", "fieldValue"] }, outputs: { additionalHelp: "p-additional-help", change: "p-change", keydown: "p-keydown" }, features: [i0.ɵɵInputTransformsFeature] });
38152
+ static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoMultiselectBaseComponent, inputs: { additionalHelpEventTrigger: "additionalHelpEventTrigger", additionalHelpTooltip: [0, "p-additional-help-tooltip", "additionalHelpTooltip"], autoFocus: [2, "p-auto-focus", "autoFocus", convertToBoolean], label: [0, "p-label", "label"], help: [0, "p-help", "help"], optional: [0, "p-optional", "optional"], placeholder: [0, "p-placeholder", "placeholder"], placeholderSearch: [0, "p-placeholder-search", "placeholderSearch"], name: "name", hideSelectAll: [2, "p-hide-select-all", "hideSelectAll", convertToBoolean], fieldErrorMessage: [0, "p-field-error-message", "fieldErrorMessage"], errorLimit: [0, "p-error-limit", "errorLimit"], appendBox: [2, "p-append-in-body", "appendBox", convertToBoolean], controlValueWithLabel: [2, "p-control-value-with-label", "controlValueWithLabel", convertToBoolean], filterService: [0, "p-filter-service", "filterService"], autoHeight: [2, "p-auto-height", "autoHeight", convertToBoolean], debounceTime: [0, "p-debounce-time", "debounceTime"], literals: [0, "p-literals", "literals"], required: [0, "p-required", "required"], showRequired: [0, "p-show-required", "showRequired"], disabled: [0, "p-disabled", "disabled"], hideSearch: [0, "p-hide-search", "hideSearch"], options: [0, "p-options", "options"], sort: [0, "p-sort", "sort"], filterMode: [0, "p-filter-mode", "filterMode"], fieldLabel: [0, "p-field-label", "fieldLabel"], fieldValue: [0, "p-field-value", "fieldValue"] }, outputs: { additionalHelp: "p-additional-help", change: "p-change", keydown: "p-keydown" }, features: [i0.ɵɵInputTransformsFeature] });
38115
38153
  }
38116
38154
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMultiselectBaseComponent, [{
38117
38155
  type: Directive
@@ -38162,6 +38200,9 @@ class PoMultiselectBaseComponent {
38162
38200
  }], appendBox: [{
38163
38201
  type: Input,
38164
38202
  args: [{ alias: 'p-append-in-body', transform: convertToBoolean }]
38203
+ }], controlValueWithLabel: [{
38204
+ type: Input,
38205
+ args: [{ alias: 'p-control-value-with-label', transform: convertToBoolean }]
38165
38206
  }], filterService: [{
38166
38207
  type: Input,
38167
38208
  args: ['p-filter-service']
@@ -43922,6 +43963,12 @@ class PoSelectComponent extends PoFieldValidateModel {
43922
43963
  this.options = [...this.options];
43923
43964
  }
43924
43965
  }
43966
+ /**
43967
+ * @docsPrivate
43968
+ *
43969
+ * Determinar se o valor do compo deve retorna objeto do tipo {value: any, label: any}
43970
+ */
43971
+ controlValueWithLabel = false;
43925
43972
  get fieldValue() {
43926
43973
  return this._fieldValue;
43927
43974
  }
@@ -43994,13 +44041,14 @@ class PoSelectComponent extends PoFieldValidateModel {
43994
44041
  if (this.selectedValue !== option[this.fieldValue]) {
43995
44042
  this.selectedValue = option[this.fieldValue];
43996
44043
  this.selectElement.nativeElement.value = option[this.fieldValue];
43997
- this.updateModel(option[this.fieldValue]);
44044
+ this.updateModel(this.getValueUpdate(option));
43998
44045
  this.displayValue = option[this.fieldLabel];
43999
44046
  this.emitChange(option[this.fieldValue]);
44000
44047
  }
44001
44048
  }
44002
44049
  // Recebe as alterações do model
44003
44050
  onWriteValue(value) {
44051
+ value = this.getValueWrite(value);
44004
44052
  const optionFound = this.findOptionValue(value);
44005
44053
  if (optionFound) {
44006
44054
  this.selectElement.nativeElement.value = optionFound.value;
@@ -44071,6 +44119,21 @@ class PoSelectComponent extends PoFieldValidateModel {
44071
44119
  return this.options.find(option => this.isEqual(option.value, value));
44072
44120
  }
44073
44121
  }
44122
+ getValueUpdate(option) {
44123
+ if (this.controlValueWithLabel) {
44124
+ return {
44125
+ value: option[this.fieldValue],
44126
+ label: option[this.fieldLabel]
44127
+ };
44128
+ }
44129
+ return option[this.fieldValue];
44130
+ }
44131
+ getValueWrite(data) {
44132
+ if (this.controlValueWithLabel && data?.value) {
44133
+ return data?.value;
44134
+ }
44135
+ return data;
44136
+ }
44074
44137
  transformInArray(objectWithArray) {
44075
44138
  return objectWithArray.reduce((options, items) => {
44076
44139
  if (items.options) {
@@ -44103,7 +44166,7 @@ class PoSelectComponent extends PoFieldValidateModel {
44103
44166
  } if (rf & 2) {
44104
44167
  let _t;
44105
44168
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectElement = _t.first);
44106
- } }, inputs: { readonly: [2, "p-readonly", "readonly", convertToBoolean], placeholder: [0, "p-placeholder", "placeholder"], options: [0, "p-options", "options"], fieldLabel: [0, "p-field-label", "fieldLabel"], fieldValue: [0, "p-field-value", "fieldValue"] }, outputs: { ngModelChange: "ngModelChange" }, standalone: false, features: [i0.ɵɵProvidersFeature([
44169
+ } }, inputs: { readonly: [2, "p-readonly", "readonly", convertToBoolean], placeholder: [0, "p-placeholder", "placeholder"], options: [0, "p-options", "options"], fieldLabel: [0, "p-field-label", "fieldLabel"], fieldValue: [0, "p-field-value", "fieldValue"], controlValueWithLabel: [2, "p-control-value-with-label", "controlValueWithLabel", convertToBoolean] }, outputs: { ngModelChange: "ngModelChange" }, standalone: false, features: [i0.ɵɵProvidersFeature([
44107
44170
  {
44108
44171
  provide: NG_VALUE_ACCESSOR,
44109
44172
  useExisting: forwardRef(() => PoSelectComponent),
@@ -44180,6 +44243,9 @@ class PoSelectComponent extends PoFieldValidateModel {
44180
44243
  }], fieldValue: [{
44181
44244
  type: Input,
44182
44245
  args: ['p-field-value']
44246
+ }], controlValueWithLabel: [{
44247
+ type: Input,
44248
+ args: [{ alias: 'p-control-value-with-label', transform: convertToBoolean }]
44183
44249
  }] }); })();
44184
44250
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PoSelectComponent, { className: "PoSelectComponent", filePath: "lib/components/po-field/po-select/po-select.component.ts", lineNumber: 124 }); })();
44185
44251
 
@@ -47151,6 +47217,9 @@ class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseComponent {
47151
47217
  this.setContainerFields();
47152
47218
  }
47153
47219
  }
47220
+ if (changes.value) {
47221
+ this.updatePreviousValue();
47222
+ }
47154
47223
  }
47155
47224
  focus(property) {
47156
47225
  const foundComponent = this.components.find(component => component.name === property);
@@ -57177,7 +57246,10 @@ class PoStepperBaseComponent {
57177
57246
  */
57178
57247
  set steps(steps) {
57179
57248
  this._steps = Array.isArray(steps) ? steps : [];
57180
- this._steps.forEach(step => (step.status = step.status ?? PoStepperStatus.Default));
57249
+ this._steps.forEach(step => {
57250
+ step.status = step.status ?? PoStepperStatus.Default;
57251
+ step.id = step.id ?? uuid();
57252
+ });
57181
57253
  this.initializeSteps();
57182
57254
  }
57183
57255
  get steps() {
@@ -57901,10 +57973,10 @@ class PoStepperComponent extends PoStepperBaseComponent {
57901
57973
  if (this.hasStepWithCanActiveNextStep() && this.hasDefaultBeforeDone(nextStepIndex)) {
57902
57974
  return of(false);
57903
57975
  }
57904
- const isAllowNextStep$ = this.checkAllowNextStep(nextStepIndex, step);
57976
+ const isAllowNextStep$ = this.checkAllowNextStep(nextStepIndex);
57905
57977
  return typeof isAllowNextStep$ === 'boolean' ? of(isAllowNextStep$) : isAllowNextStep$;
57906
57978
  }
57907
- canActiveNextStep(currentActiveStep = {}, nextStepIndex, step) {
57979
+ canActiveNextStep(currentActiveStep = {}, nextStepIndex) {
57908
57980
  const isCurrentStep = this.isCurrentStep(nextStepIndex);
57909
57981
  if (!currentActiveStep.canActiveNextStep) {
57910
57982
  if (!isCurrentStep) {
@@ -57912,7 +57984,7 @@ class PoStepperComponent extends PoStepperBaseComponent {
57912
57984
  }
57913
57985
  return of(true);
57914
57986
  }
57915
- const canActiveNextStep$ = this.getCanActiveNextStepObservable(currentActiveStep, step);
57987
+ const canActiveNextStep$ = this.getCanActiveNextStepObservable(currentActiveStep);
57916
57988
  return of(this.isBeforeStep(nextStepIndex)).pipe(mergeMap(isBefore => {
57917
57989
  if (isBefore && !isCurrentStep) {
57918
57990
  return canActiveNextStep$.pipe(tap(isCanActiveNextStep => {
@@ -57931,19 +58003,13 @@ class PoStepperComponent extends PoStepperBaseComponent {
57931
58003
  return throwError(err);
57932
58004
  }));
57933
58005
  }
57934
- checkAllowNextStep(nextStepIndex, step) {
58006
+ checkAllowNextStep(nextStepIndex) {
57935
58007
  return this.usePoSteps
57936
- ? this.canActiveNextStep(this.currentActiveStep, nextStepIndex, step)
58008
+ ? this.canActiveNextStep(this.currentActiveStep, nextStepIndex)
57937
58009
  : of(this.steps.slice(this.step, nextStepIndex).every(step => step.status === PoStepperStatus.Done));
57938
58010
  }
57939
- getCanActiveNextStepObservable(currentActiveStep, step) {
57940
- let canActiveNextStep;
57941
- if (step && step.status === PoStepperStatus.Done) {
57942
- canActiveNextStep = false;
57943
- }
57944
- else {
57945
- canActiveNextStep = currentActiveStep.canActiveNextStep(currentActiveStep);
57946
- }
58011
+ getCanActiveNextStepObservable(currentActiveStep) {
58012
+ const canActiveNextStep = currentActiveStep.canActiveNextStep(currentActiveStep);
57947
58013
  return canActiveNextStep instanceof Observable ? canActiveNextStep : of(canActiveNextStep);
57948
58014
  }
57949
58015
  hasDefaultBeforeDone(nextStepIndex) {