@mediusinc/mng-commons 3.6.0-rc.1 → 3.6.0-rc.2
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.
|
@@ -13932,7 +13932,7 @@ class MngTableComponent {
|
|
|
13932
13932
|
this.layoutPreferences = {};
|
|
13933
13933
|
}
|
|
13934
13934
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTableComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.TranslateService }, { token: MngCommonsService }, { token: MngActionExecutorService }, { token: MngViewContainerComponentService, optional: true }, { token: MngLocalStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13935
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngTableComponent, isStandalone: true, selector: "mng-table", inputs: { initialDescriptor: ["descriptor", "initialDescriptor"], items: "items", queryResult: "queryResult", loading: "loading", dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionMode: "selectionMode", selectionEnabled: "selectionEnabled", actions: "actions", isColumnClickable: "isColumnClickable", viewContainerInit: ["viewContainer", "viewContainerInit"], captionComponent: "captionComponent", columnActionComponent: "columnActionComponent", columnActionMinWidth: "columnActionMinWidth", globalFilterFieldsInit: ["globalFilterFields", "globalFilterFieldsInit"] }, outputs: { loadEventEmitter: "tableLoad", cellClickEventEmitter: "cellClick", selectionChangeEventEmitter: "selectionChange", captionCmpInstEventEmitter: "captionComponentInstance", columnActionCmpInstEventEmitter: "columnActionComponentInstance" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: Table, descendants: true }, { propertyName: "components", predicate: MngComponentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [style.height]=\"tableFullHeightOffset ? 'calc(100vh - ' + tableFullHeightOffset + 'px)' : null\">\n <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n <p-table\n *ngIf=\"!useQueryParams || (useQueryParamsInitialized$ | async)\"\n [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n [dataKey]=\"descriptor?.dataKeyProperty\"\n [lazy]=\"isLazy\"\n [loading]=\"(loading$ | async) ?? false\"\n [paginator]=\"isPagination && !infiniteScroll\"\n [rows]=\"infiniteScroll ? 20 : rows\"\n [first]=\"infiniteScroll ? 0 : offset\"\n [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n [rowsPerPageOptions]=\"infiniteScroll ? undefined : rowsPerPageOptions\"\n [showCurrentPageReport]=\"!infiniteScroll\"\n [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n [multiSortMeta]=\"multiSortMeta\"\n [filters]=\"filterMetadata\"\n [globalFilterFields]=\"globalFilterFields\"\n sortMode=\"multiple\"\n [(selection)]=\"selection\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selectionMode]=\"selectionEnabled ? selectionMode : null\"\n [scrollable]=\"true\"\n [virtualScroll]=\"infiniteScroll\"\n [virtualScrollItemSize]=\"rowHeight\"\n scrollHeight=\"flex\"\n [rowHover]=\"descriptor?.hasHover ?? true\"\n [styleClass]=\"className\"\n [resizableColumns]=\"descriptor?.hasResizableColumns ?? false\"\n [columnResizeMode]=\"descriptor?.columnResizeMode ?? 'fit'\"\n [reorderableColumns]=\"areColumnsReorderable\"\n [columns]=\"visibleColumns\"\n (onColResize)=\"onTableColumnResize($event)\"\n (onColReorder)=\"onColumnReorder($event)\"\n (onLazyLoad)=\"onTableLazyLoad($event)\"\n (onSort)=\"onTableSort($event)\"\n (onFilter)=\"onTableFilter($event)\">\n <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor?.title\" pTemplate=\"caption\">\n <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n </ng-container>\n <ng-template #componentOrDefaultCaption>\n <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n <ng-template #defaultCaption>\n <h5 class=\"p-0 m-0\">{{ descriptor?.title }}</h5>\n </ng-template>\n </ng-template>\n </ng-template>\n\n <ng-template pTemplate=\"header\">\n <tr *ngIf=\"!descriptor?.hideHeader\" class=\"mng-table-header\" [class]=\"descriptor?.headerClassName\">\n <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></th>\n <ng-container *ngFor=\"let col of columns\">\n <ng-container *ngIf=\"col.isVisible\">\n <ng-template #sortableColumnTHTemplate>\n <div class=\"flex justify-content-between align-items-center\">\n {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n <p-sortIcon [field]=\"col.descriptor.property\"></p-sortIcon>\n </div>\n </ng-template>\n <ng-template #nonSortableColumnTHTemplate>\n {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n </ng-template>\n <th\n *ngIf=\"col.descriptor.isReorderable\"\n pResizableColumn\n pReorderableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.descriptor.property\"\n [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"\n col.descriptor.headerClassName +\n (hasColumnFilters && col.descriptor.filterDescriptor ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType : '')\n \">\n <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n <th\n *ngIf=\"!col.descriptor.isReorderable\"\n pResizableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.descriptor.property\"\n [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"\n col.descriptor.headerClassName +\n (hasColumnFilters && col.descriptor.filterDescriptor ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType : '')\n \">\n <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n </ng-container>\n </ng-container>\n <th\n *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n [style.min-width.px]=\"columnActionMinWidth\"\n pFrozenColumn\n [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n alignFrozen=\"right\"\n class=\"text-right\">\n <p-multiSelect\n #columnToggleMultiselect\n *ngIf=\"areColumnsToggleable || areColumnsReorderable || descriptor?.hasResizableColumns\"\n styleClass=\"p-button-primary mng-table-columns-multiselect\"\n appendTo=\"body\"\n optionDisabled=\"disabled\"\n [filter]=\"false\"\n [options]=\"columns\"\n [(ngModel)]=\"visibleColumns\"\n [pTooltip]=\"'mngTable.adjustTable' | translate\"\n tooltipPosition=\"left\"\n placeholder=\"\"\n dropdownIcon=\"pi pi-sliders-h\"\n [displaySelectedLabel]=\"false\"\n (onChange)=\"onColumnToggle($event)\">\n <ng-template pTemplate=\"filter\">\n <div class=\"p-checkbox p-component ml-1\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\n <div class=\"p-hidden-accessible\">\n <input\n type=\"checkbox\"\n readonly=\"readonly\"\n [checked]=\"columnToggleMultiselect.allSelected\"\n (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n (keydown.space)=\"columnToggleMultiselect.onToggleAll($event)\"\n [disabled]=\"!areColumnsToggleable\" />\n </div>\n <div\n class=\"p-checkbox-box\"\n role=\"checkbox\"\n [attr.aria-checked]=\"columnToggleMultiselect.allSelected\"\n [ngClass]=\"{\n 'p-highlight': columnToggleMultiselect.allSelected,\n 'p-focus': columnToggleMultiselect.headerCheckboxFocus,\n 'p-disabled': !areColumnsToggleable\n }\"\n (click)=\"columnToggleMultiselect.onToggleAll($event)\">\n <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': columnToggleMultiselect.allSelected}\"></span>\n </div>\n </div>\n <p-button\n icon=\"pi pi-replay\"\n styleClass=\"p-button-secondary\"\n [pTooltip]=\"'mngTable.resetLayout' | translate\"\n tooltipPosition=\"left\"\n (click)=\"resetDefaultLayout()\"></p-button>\n </ng-template>\n <ng-template let-item pTemplate=\"item\">\n {{ item.descriptor.title ?? (item.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n </ng-template>\n </p-multiSelect>\n </th>\n </tr>\n <tr *ngIf=\"hasColumnFilters\" class=\"mng-column-filter-row\">\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th *ngIf=\"selectionEnabled\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></th>\n <ng-container *ngFor=\"let col of columns\">\n <th\n *ngIf=\"col.isVisible\"\n [class]=\"\n (col.descriptor.filterDescriptor ? 'mng-column-filter-' + col.descriptor.filterDescriptor.filterType + ' ' : ' ') +\n col.descriptor.filterDescriptor?.columnClassName\n \"\n [style.width.%]=\"col.descriptor.filterDescriptor?.columnWidth ?? col.descriptor.width\"\n [style.min-width.px]=\"col.descriptor.filterDescriptor?.columnMinWidth ?? col.descriptor.minWidth\"\n [style.max-width.px]=\"col.descriptor.maxWidth\">\n <div class=\"flex\" *ngIf=\"col.descriptor.filterDescriptor\">\n <mng-table-column-filter-full\n *ngIf=\"!descriptor?.deprecatedFilters; else deprecatedFilters\"\n [descriptor]=\"col.descriptor.filterDescriptor\"></mng-table-column-filter-full>\n <ng-template #deprecatedFilters>\n <mng-table-column-filter [descriptor]=\"col.descriptor.filterDescriptor\"></mng-table-column-filter>\n </ng-template>\n </div>\n </th>\n </ng-container>\n <th\n *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n [style.min-width.px]=\"columnActionMinWidth\"\n pFrozenColumn\n [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n alignFrozen=\"right\"></th>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n <tr\n [style.height.px]=\"rowHeight\"\n [ngClass]=\"descriptor?.rowClassName | mngClassMapPipe : descriptor?.rowClassNameMapFn : item | mngLocaleDefaultRowClass : descriptor : item\">\n <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n </td>\n <ng-container *ngFor=\"let col of columns\">\n <td\n *ngIf=\"col.isVisible\"\n (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n [class]=\"\n (col.descriptor.className | mngClassMapPipe : col.descriptor.classNameMapFn : item) +\n (hasColumnFilters && col.descriptor.filterDescriptor ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType : '')\n \"\n [class.clickable]=\"isColumnClickable\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n <span class=\"p-column-title\">{{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}</span>\n <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n </td>\n </ng-container>\n <td\n *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n class=\"column-action justify-content-end text-right\"\n [style.min-width.px]=\"columnActionMinWidth\"\n pFrozenColumn\n [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n alignFrozen=\"right\">\n <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponentOrDefault\">\n <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n </ng-container>\n <ng-template #showColumnActionComponentOrDefault>\n <span\n *ngIf=\"columnActionComponent; else defaultColumnActions\"\n [mngComponent]=\"columnActionComponent!\"\n (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n </ng-template>\n <ng-template #defaultColumnActions>\n <mng-action\n *ngFor=\"let action of rowInlineActions\"\n [action]=\"action\"\n [item]=\"item\"\n [viewContainer]=\"viewContainer\"\n [hostComponent]=\"this\"\n [itemId]=\"descriptor?.model?.idPropertyName ? item[descriptor!.model!.idPropertyName!] : null\"\n [actionData]=\"{itemIndex: idx}\"\n (finish)=\"onActionFinish($event)\">\n </mng-action>\n </ng-template>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"loadingicon\">\n <div class=\"flex flex-column align-items-center\">\n <i [class]=\"'text-white text-4xl pi-spin ' + descriptor?.loadingIcon\" *ngIf=\"descriptor?.loadingIcon\"></i>\n <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor?.loadingIcon}\" *ngIf=\"descriptor?.loadingText\">\n {{ descriptor?.loadingText ?? '' | translate }}\n </div>\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\">\n <tr [style.height.px]=\"rowHeight\">\n <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n <div class=\"loading-text\"></div>\n <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <tr [style.height.px]=\"rowHeight\">\n <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n {{ 'mngTable.noItems' | translate }}\n </td>\n </tr>\n </ng-template>\n\n <ng-template *ngIf=\"footerTemplate\" pTemplate=\"summary\">\n <ng-container [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n </ng-template>\n </p-table>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i4$4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i4$4.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i4$4.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i4$4.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i4$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i4$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i4$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i4$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost"], outputs: ["instanceCreated"] }, { kind: "pipe", type: MngI18nPropertyPipe, name: "i18nProperty" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "pipe", type: MngClassMapPipe, name: "mngClassMapPipe" }, { kind: "pipe", type: MngLocaleDefaultRowClassPipe, name: "mngLocaleDefaultRowClass" }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "hostComponent", "route", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i6$5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$2.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "size", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MngTableColumnFilterFullComponent, selector: "mng-table-column-filter-full", inputs: ["descriptor"] }, { kind: "component", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["descriptor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13935
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: MngTableComponent, isStandalone: true, selector: "mng-table", inputs: { initialDescriptor: ["descriptor", "initialDescriptor"], items: "items", queryResult: "queryResult", loading: "loading", dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionMode: "selectionMode", selectionEnabled: "selectionEnabled", actions: "actions", isColumnClickable: "isColumnClickable", viewContainerInit: ["viewContainer", "viewContainerInit"], captionComponent: "captionComponent", columnActionComponent: "columnActionComponent", columnActionMinWidth: "columnActionMinWidth", globalFilterFieldsInit: ["globalFilterFields", "globalFilterFieldsInit"] }, outputs: { loadEventEmitter: "tableLoad", cellClickEventEmitter: "cellClick", selectionChangeEventEmitter: "selectionChange", captionCmpInstEventEmitter: "captionComponentInstance", columnActionCmpInstEventEmitter: "columnActionComponentInstance" }, queries: [{ propertyName: "templates", predicate: MngTemplateDirective }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: Table, descendants: true }, { propertyName: "components", predicate: MngComponentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [style.height]=\"tableFullHeightOffset ? 'calc(100vh - ' + tableFullHeightOffset + 'px)' : null\">\n <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n <p-table\n *ngIf=\"!useQueryParams || (useQueryParamsInitialized$ | async)\"\n [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n [dataKey]=\"descriptor?.dataKeyProperty\"\n [lazy]=\"isLazy\"\n [loading]=\"(loading$ | async) ?? false\"\n [paginator]=\"isPagination && !infiniteScroll\"\n [rows]=\"infiniteScroll ? 20 : rows\"\n [first]=\"infiniteScroll ? 0 : offset\"\n [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n [rowsPerPageOptions]=\"infiniteScroll ? undefined : rowsPerPageOptions\"\n [showCurrentPageReport]=\"!infiniteScroll\"\n [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n [multiSortMeta]=\"multiSortMeta\"\n [filters]=\"filterMetadata\"\n [globalFilterFields]=\"globalFilterFields\"\n sortMode=\"multiple\"\n [(selection)]=\"selection\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selectionMode]=\"selectionEnabled ? selectionMode : null\"\n [scrollable]=\"true\"\n [virtualScroll]=\"infiniteScroll\"\n [virtualScrollItemSize]=\"rowHeight\"\n scrollHeight=\"flex\"\n [rowHover]=\"descriptor?.hasHover ?? true\"\n [styleClass]=\"className\"\n [resizableColumns]=\"descriptor?.hasResizableColumns ?? false\"\n [columnResizeMode]=\"descriptor?.columnResizeMode ?? 'fit'\"\n [reorderableColumns]=\"areColumnsReorderable\"\n paginatorDropdownAppendTo=\"body\"\n [columns]=\"visibleColumns\"\n (onColResize)=\"onTableColumnResize($event)\"\n (onColReorder)=\"onColumnReorder($event)\"\n (onLazyLoad)=\"onTableLazyLoad($event)\"\n (onSort)=\"onTableSort($event)\"\n (onFilter)=\"onTableFilter($event)\">\n <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor?.title\" pTemplate=\"caption\">\n <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n </ng-container>\n <ng-template #componentOrDefaultCaption>\n <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n <ng-template #defaultCaption>\n <h5 class=\"p-0 m-0\">{{ descriptor?.title }}</h5>\n </ng-template>\n </ng-template>\n </ng-template>\n\n <ng-template pTemplate=\"header\">\n <tr *ngIf=\"!descriptor?.hideHeader\" class=\"mng-table-header\" [class]=\"descriptor?.headerClassName\">\n <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></th>\n <ng-container *ngFor=\"let col of columns\">\n <ng-container *ngIf=\"col.isVisible\">\n <ng-template #sortableColumnTHTemplate>\n <div class=\"flex justify-content-between align-items-center\">\n {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n <p-sortIcon [field]=\"col.descriptor.property\"></p-sortIcon>\n </div>\n </ng-template>\n <ng-template #nonSortableColumnTHTemplate>\n {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n </ng-template>\n <th\n *ngIf=\"col.descriptor.isReorderable\"\n pResizableColumn\n pReorderableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.descriptor.property\"\n [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"\n col.descriptor.headerClassName +\n (hasColumnFilters && col.descriptor.filterDescriptor ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType : '')\n \">\n <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n <th\n *ngIf=\"!col.descriptor.isReorderable\"\n pResizableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.descriptor.property\"\n [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"\n col.descriptor.headerClassName +\n (hasColumnFilters && col.descriptor.filterDescriptor ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType : '')\n \">\n <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n </ng-container>\n </ng-container>\n <th\n *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n [style.min-width.px]=\"columnActionMinWidth\"\n pFrozenColumn\n [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n alignFrozen=\"right\"\n class=\"text-right\">\n <p-multiSelect\n #columnToggleMultiselect\n *ngIf=\"areColumnsToggleable || areColumnsReorderable || descriptor?.hasResizableColumns\"\n styleClass=\"p-button-primary mng-table-columns-multiselect\"\n appendTo=\"body\"\n optionDisabled=\"disabled\"\n [filter]=\"false\"\n [options]=\"columns\"\n [(ngModel)]=\"visibleColumns\"\n [pTooltip]=\"'mngTable.adjustTable' | translate\"\n tooltipPosition=\"left\"\n placeholder=\"\"\n dropdownIcon=\"pi pi-sliders-h\"\n [displaySelectedLabel]=\"false\"\n (onChange)=\"onColumnToggle($event)\">\n <ng-template pTemplate=\"filter\">\n <div class=\"p-checkbox p-component ml-1\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\n <div class=\"p-hidden-accessible\">\n <input\n type=\"checkbox\"\n readonly=\"readonly\"\n [checked]=\"columnToggleMultiselect.allSelected\"\n (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n (keydown.space)=\"columnToggleMultiselect.onToggleAll($event)\"\n [disabled]=\"!areColumnsToggleable\" />\n </div>\n <div\n class=\"p-checkbox-box\"\n role=\"checkbox\"\n [attr.aria-checked]=\"columnToggleMultiselect.allSelected\"\n [ngClass]=\"{\n 'p-highlight': columnToggleMultiselect.allSelected,\n 'p-focus': columnToggleMultiselect.headerCheckboxFocus,\n 'p-disabled': !areColumnsToggleable\n }\"\n (click)=\"columnToggleMultiselect.onToggleAll($event)\">\n <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': columnToggleMultiselect.allSelected}\"></span>\n </div>\n </div>\n <p-button\n icon=\"pi pi-replay\"\n styleClass=\"p-button-secondary\"\n [pTooltip]=\"'mngTable.resetLayout' | translate\"\n tooltipPosition=\"left\"\n (click)=\"resetDefaultLayout()\"></p-button>\n </ng-template>\n <ng-template let-item pTemplate=\"item\">\n {{ item.descriptor.title ?? (item.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n </ng-template>\n </p-multiSelect>\n </th>\n </tr>\n <tr *ngIf=\"hasColumnFilters\" class=\"mng-column-filter-row\">\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th *ngIf=\"selectionEnabled\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></th>\n <ng-container *ngFor=\"let col of columns\">\n <th\n *ngIf=\"col.isVisible\"\n [class]=\"\n (col.descriptor.filterDescriptor ? 'mng-column-filter-' + col.descriptor.filterDescriptor.filterType + ' ' : ' ') +\n col.descriptor.filterDescriptor?.columnClassName\n \"\n [style.width.%]=\"col.descriptor.filterDescriptor?.columnWidth ?? col.descriptor.width\"\n [style.min-width.px]=\"col.descriptor.filterDescriptor?.columnMinWidth ?? col.descriptor.minWidth\"\n [style.max-width.px]=\"col.descriptor.maxWidth\">\n <div class=\"flex\" *ngIf=\"col.descriptor.filterDescriptor\">\n <mng-table-column-filter-full\n *ngIf=\"!descriptor?.deprecatedFilters; else deprecatedFilters\"\n [descriptor]=\"col.descriptor.filterDescriptor\"></mng-table-column-filter-full>\n <ng-template #deprecatedFilters>\n <mng-table-column-filter [descriptor]=\"col.descriptor.filterDescriptor\"></mng-table-column-filter>\n </ng-template>\n </div>\n </th>\n </ng-container>\n <th\n *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n [style.min-width.px]=\"columnActionMinWidth\"\n pFrozenColumn\n [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n alignFrozen=\"right\"></th>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n <tr\n [style.height.px]=\"rowHeight\"\n [ngClass]=\"descriptor?.rowClassName | mngClassMapPipe : descriptor?.rowClassNameMapFn : item | mngLocaleDefaultRowClass : descriptor : item\">\n <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n </td>\n <ng-container *ngFor=\"let col of columns\">\n <td\n *ngIf=\"col.isVisible\"\n (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n [class]=\"\n (col.descriptor.className | mngClassMapPipe : col.descriptor.classNameMapFn : item) +\n (hasColumnFilters && col.descriptor.filterDescriptor ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType : '')\n \"\n [class.clickable]=\"isColumnClickable\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n <span class=\"p-column-title\">{{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}</span>\n <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n </td>\n </ng-container>\n <td\n *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n class=\"column-action justify-content-end text-right\"\n [style.min-width.px]=\"columnActionMinWidth\"\n pFrozenColumn\n [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n alignFrozen=\"right\">\n <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponentOrDefault\">\n <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n </ng-container>\n <ng-template #showColumnActionComponentOrDefault>\n <span\n *ngIf=\"columnActionComponent; else defaultColumnActions\"\n [mngComponent]=\"columnActionComponent!\"\n (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n </ng-template>\n <ng-template #defaultColumnActions>\n <mng-action\n *ngFor=\"let action of rowInlineActions\"\n [action]=\"action\"\n [item]=\"item\"\n [viewContainer]=\"viewContainer\"\n [hostComponent]=\"this\"\n [itemId]=\"descriptor?.model?.idPropertyName ? item[descriptor!.model!.idPropertyName!] : null\"\n [actionData]=\"{itemIndex: idx}\"\n (finish)=\"onActionFinish($event)\">\n </mng-action>\n </ng-template>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"loadingicon\">\n <div class=\"flex flex-column align-items-center\">\n <i [class]=\"'text-white text-4xl pi-spin ' + descriptor?.loadingIcon\" *ngIf=\"descriptor?.loadingIcon\"></i>\n <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor?.loadingIcon}\" *ngIf=\"descriptor?.loadingText\">\n {{ descriptor?.loadingText ?? '' | translate }}\n </div>\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\">\n <tr [style.height.px]=\"rowHeight\">\n <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n <div class=\"loading-text\"></div>\n <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <tr [style.height.px]=\"rowHeight\">\n <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n {{ 'mngTable.noItems' | translate }}\n </td>\n </tr>\n </ng-template>\n\n <ng-template *ngIf=\"footerTemplate\" pTemplate=\"summary\">\n <ng-container [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n </ng-template>\n </p-table>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i4$4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i4$4.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i4$4.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i4$4.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i4$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i4$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i4$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i4$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost"], outputs: ["instanceCreated"] }, { kind: "pipe", type: MngI18nPropertyPipe, name: "i18nProperty" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "pipe", type: MngClassMapPipe, name: "mngClassMapPipe" }, { kind: "pipe", type: MngLocaleDefaultRowClassPipe, name: "mngLocaleDefaultRowClass" }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "hostComponent", "route", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i6$5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$2.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "size", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MngTableColumnFilterFullComponent, selector: "mng-table-column-filter-full", inputs: ["descriptor"] }, { kind: "component", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["descriptor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13936
13936
|
}
|
|
13937
13937
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: MngTableComponent, decorators: [{
|
|
13938
13938
|
type: Component,
|
|
@@ -13958,7 +13958,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
|
|
|
13958
13958
|
FormsModule,
|
|
13959
13959
|
MngTableColumnFilterFullComponent,
|
|
13960
13960
|
MngTableColumnFilterComponent
|
|
13961
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"tableFullHeightOffset ? 'calc(100vh - ' + tableFullHeightOffset + 'px)' : null\">\n <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n <p-table\n *ngIf=\"!useQueryParams || (useQueryParamsInitialized$ | async)\"\n [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n [dataKey]=\"descriptor?.dataKeyProperty\"\n [lazy]=\"isLazy\"\n [loading]=\"(loading$ | async) ?? false\"\n [paginator]=\"isPagination && !infiniteScroll\"\n [rows]=\"infiniteScroll ? 20 : rows\"\n [first]=\"infiniteScroll ? 0 : offset\"\n [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n [rowsPerPageOptions]=\"infiniteScroll ? undefined : rowsPerPageOptions\"\n [showCurrentPageReport]=\"!infiniteScroll\"\n [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n [multiSortMeta]=\"multiSortMeta\"\n [filters]=\"filterMetadata\"\n [globalFilterFields]=\"globalFilterFields\"\n sortMode=\"multiple\"\n [(selection)]=\"selection\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selectionMode]=\"selectionEnabled ? selectionMode : null\"\n [scrollable]=\"true\"\n [virtualScroll]=\"infiniteScroll\"\n [virtualScrollItemSize]=\"rowHeight\"\n scrollHeight=\"flex\"\n [rowHover]=\"descriptor?.hasHover ?? true\"\n [styleClass]=\"className\"\n [resizableColumns]=\"descriptor?.hasResizableColumns ?? false\"\n [columnResizeMode]=\"descriptor?.columnResizeMode ?? 'fit'\"\n [reorderableColumns]=\"areColumnsReorderable\"\n [columns]=\"visibleColumns\"\n (onColResize)=\"onTableColumnResize($event)\"\n (onColReorder)=\"onColumnReorder($event)\"\n (onLazyLoad)=\"onTableLazyLoad($event)\"\n (onSort)=\"onTableSort($event)\"\n (onFilter)=\"onTableFilter($event)\">\n <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor?.title\" pTemplate=\"caption\">\n <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n </ng-container>\n <ng-template #componentOrDefaultCaption>\n <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n <ng-template #defaultCaption>\n <h5 class=\"p-0 m-0\">{{ descriptor?.title }}</h5>\n </ng-template>\n </ng-template>\n </ng-template>\n\n <ng-template pTemplate=\"header\">\n <tr *ngIf=\"!descriptor?.hideHeader\" class=\"mng-table-header\" [class]=\"descriptor?.headerClassName\">\n <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></th>\n <ng-container *ngFor=\"let col of columns\">\n <ng-container *ngIf=\"col.isVisible\">\n <ng-template #sortableColumnTHTemplate>\n <div class=\"flex justify-content-between align-items-center\">\n {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n <p-sortIcon [field]=\"col.descriptor.property\"></p-sortIcon>\n </div>\n </ng-template>\n <ng-template #nonSortableColumnTHTemplate>\n {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n </ng-template>\n <th\n *ngIf=\"col.descriptor.isReorderable\"\n pResizableColumn\n pReorderableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.descriptor.property\"\n [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"\n col.descriptor.headerClassName +\n (hasColumnFilters && col.descriptor.filterDescriptor ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType : '')\n \">\n <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n <th\n *ngIf=\"!col.descriptor.isReorderable\"\n pResizableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.descriptor.property\"\n [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"\n col.descriptor.headerClassName +\n (hasColumnFilters && col.descriptor.filterDescriptor ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType : '')\n \">\n <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n </ng-container>\n </ng-container>\n <th\n *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n [style.min-width.px]=\"columnActionMinWidth\"\n pFrozenColumn\n [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n alignFrozen=\"right\"\n class=\"text-right\">\n <p-multiSelect\n #columnToggleMultiselect\n *ngIf=\"areColumnsToggleable || areColumnsReorderable || descriptor?.hasResizableColumns\"\n styleClass=\"p-button-primary mng-table-columns-multiselect\"\n appendTo=\"body\"\n optionDisabled=\"disabled\"\n [filter]=\"false\"\n [options]=\"columns\"\n [(ngModel)]=\"visibleColumns\"\n [pTooltip]=\"'mngTable.adjustTable' | translate\"\n tooltipPosition=\"left\"\n placeholder=\"\"\n dropdownIcon=\"pi pi-sliders-h\"\n [displaySelectedLabel]=\"false\"\n (onChange)=\"onColumnToggle($event)\">\n <ng-template pTemplate=\"filter\">\n <div class=\"p-checkbox p-component ml-1\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\n <div class=\"p-hidden-accessible\">\n <input\n type=\"checkbox\"\n readonly=\"readonly\"\n [checked]=\"columnToggleMultiselect.allSelected\"\n (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n (keydown.space)=\"columnToggleMultiselect.onToggleAll($event)\"\n [disabled]=\"!areColumnsToggleable\" />\n </div>\n <div\n class=\"p-checkbox-box\"\n role=\"checkbox\"\n [attr.aria-checked]=\"columnToggleMultiselect.allSelected\"\n [ngClass]=\"{\n 'p-highlight': columnToggleMultiselect.allSelected,\n 'p-focus': columnToggleMultiselect.headerCheckboxFocus,\n 'p-disabled': !areColumnsToggleable\n }\"\n (click)=\"columnToggleMultiselect.onToggleAll($event)\">\n <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': columnToggleMultiselect.allSelected}\"></span>\n </div>\n </div>\n <p-button\n icon=\"pi pi-replay\"\n styleClass=\"p-button-secondary\"\n [pTooltip]=\"'mngTable.resetLayout' | translate\"\n tooltipPosition=\"left\"\n (click)=\"resetDefaultLayout()\"></p-button>\n </ng-template>\n <ng-template let-item pTemplate=\"item\">\n {{ item.descriptor.title ?? (item.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n </ng-template>\n </p-multiSelect>\n </th>\n </tr>\n <tr *ngIf=\"hasColumnFilters\" class=\"mng-column-filter-row\">\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th *ngIf=\"selectionEnabled\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></th>\n <ng-container *ngFor=\"let col of columns\">\n <th\n *ngIf=\"col.isVisible\"\n [class]=\"\n (col.descriptor.filterDescriptor ? 'mng-column-filter-' + col.descriptor.filterDescriptor.filterType + ' ' : ' ') +\n col.descriptor.filterDescriptor?.columnClassName\n \"\n [style.width.%]=\"col.descriptor.filterDescriptor?.columnWidth ?? col.descriptor.width\"\n [style.min-width.px]=\"col.descriptor.filterDescriptor?.columnMinWidth ?? col.descriptor.minWidth\"\n [style.max-width.px]=\"col.descriptor.maxWidth\">\n <div class=\"flex\" *ngIf=\"col.descriptor.filterDescriptor\">\n <mng-table-column-filter-full\n *ngIf=\"!descriptor?.deprecatedFilters; else deprecatedFilters\"\n [descriptor]=\"col.descriptor.filterDescriptor\"></mng-table-column-filter-full>\n <ng-template #deprecatedFilters>\n <mng-table-column-filter [descriptor]=\"col.descriptor.filterDescriptor\"></mng-table-column-filter>\n </ng-template>\n </div>\n </th>\n </ng-container>\n <th\n *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n [style.min-width.px]=\"columnActionMinWidth\"\n pFrozenColumn\n [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n alignFrozen=\"right\"></th>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n <tr\n [style.height.px]=\"rowHeight\"\n [ngClass]=\"descriptor?.rowClassName | mngClassMapPipe : descriptor?.rowClassNameMapFn : item | mngLocaleDefaultRowClass : descriptor : item\">\n <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n </td>\n <ng-container *ngFor=\"let col of columns\">\n <td\n *ngIf=\"col.isVisible\"\n (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n [class]=\"\n (col.descriptor.className | mngClassMapPipe : col.descriptor.classNameMapFn : item) +\n (hasColumnFilters && col.descriptor.filterDescriptor ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType : '')\n \"\n [class.clickable]=\"isColumnClickable\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n <span class=\"p-column-title\">{{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}</span>\n <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n </td>\n </ng-container>\n <td\n *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n class=\"column-action justify-content-end text-right\"\n [style.min-width.px]=\"columnActionMinWidth\"\n pFrozenColumn\n [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n alignFrozen=\"right\">\n <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponentOrDefault\">\n <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n </ng-container>\n <ng-template #showColumnActionComponentOrDefault>\n <span\n *ngIf=\"columnActionComponent; else defaultColumnActions\"\n [mngComponent]=\"columnActionComponent!\"\n (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n </ng-template>\n <ng-template #defaultColumnActions>\n <mng-action\n *ngFor=\"let action of rowInlineActions\"\n [action]=\"action\"\n [item]=\"item\"\n [viewContainer]=\"viewContainer\"\n [hostComponent]=\"this\"\n [itemId]=\"descriptor?.model?.idPropertyName ? item[descriptor!.model!.idPropertyName!] : null\"\n [actionData]=\"{itemIndex: idx}\"\n (finish)=\"onActionFinish($event)\">\n </mng-action>\n </ng-template>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"loadingicon\">\n <div class=\"flex flex-column align-items-center\">\n <i [class]=\"'text-white text-4xl pi-spin ' + descriptor?.loadingIcon\" *ngIf=\"descriptor?.loadingIcon\"></i>\n <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor?.loadingIcon}\" *ngIf=\"descriptor?.loadingText\">\n {{ descriptor?.loadingText ?? '' | translate }}\n </div>\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\">\n <tr [style.height.px]=\"rowHeight\">\n <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n <div class=\"loading-text\"></div>\n <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <tr [style.height.px]=\"rowHeight\">\n <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n {{ 'mngTable.noItems' | translate }}\n </td>\n </tr>\n </ng-template>\n\n <ng-template *ngIf=\"footerTemplate\" pTemplate=\"summary\">\n <ng-container [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n </ng-template>\n </p-table>\n</div>\n" }]
|
|
13961
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"tableFullHeightOffset ? 'calc(100vh - ' + tableFullHeightOffset + 'px)' : null\">\n <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n <p-table\n *ngIf=\"!useQueryParams || (useQueryParamsInitialized$ | async)\"\n [value]=\"infiniteScroll ? dataProviderInfiniteScrollItems : (queryResult$ | async)?.pageData ?? []\"\n [dataKey]=\"descriptor?.dataKeyProperty\"\n [lazy]=\"isLazy\"\n [loading]=\"(loading$ | async) ?? false\"\n [paginator]=\"isPagination && !infiniteScroll\"\n [rows]=\"infiniteScroll ? 20 : rows\"\n [first]=\"infiniteScroll ? 0 : offset\"\n [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n [rowsPerPageOptions]=\"infiniteScroll ? undefined : rowsPerPageOptions\"\n [showCurrentPageReport]=\"!infiniteScroll\"\n [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n [multiSortMeta]=\"multiSortMeta\"\n [filters]=\"filterMetadata\"\n [globalFilterFields]=\"globalFilterFields\"\n sortMode=\"multiple\"\n [(selection)]=\"selection\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selectionMode]=\"selectionEnabled ? selectionMode : null\"\n [scrollable]=\"true\"\n [virtualScroll]=\"infiniteScroll\"\n [virtualScrollItemSize]=\"rowHeight\"\n scrollHeight=\"flex\"\n [rowHover]=\"descriptor?.hasHover ?? true\"\n [styleClass]=\"className\"\n [resizableColumns]=\"descriptor?.hasResizableColumns ?? false\"\n [columnResizeMode]=\"descriptor?.columnResizeMode ?? 'fit'\"\n [reorderableColumns]=\"areColumnsReorderable\"\n paginatorDropdownAppendTo=\"body\"\n [columns]=\"visibleColumns\"\n (onColResize)=\"onTableColumnResize($event)\"\n (onColReorder)=\"onColumnReorder($event)\"\n (onLazyLoad)=\"onTableLazyLoad($event)\"\n (onSort)=\"onTableSort($event)\"\n (onFilter)=\"onTableFilter($event)\">\n <ng-template *ngIf=\"captionTemplate || captionComponent || descriptor?.title\" pTemplate=\"caption\">\n <ng-container *ngIf=\"captionTemplate; else componentOrDefaultCaption\">\n <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n </ng-container>\n <ng-template #componentOrDefaultCaption>\n <div *ngIf=\"captionComponent; else defaultCaption\" [mngComponent]=\"captionComponent\" (instanceCreated)=\"onCaptionCmpInst($event)\"></div>\n <ng-template #defaultCaption>\n <h5 class=\"p-0 m-0\">{{ descriptor?.title }}</h5>\n </ng-template>\n </ng-template>\n </ng-template>\n\n <ng-template pTemplate=\"header\">\n <tr *ngIf=\"!descriptor?.hideHeader\" class=\"mng-table-header\" [class]=\"descriptor?.headerClassName\">\n <th *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></th>\n <ng-container *ngFor=\"let col of columns\">\n <ng-container *ngIf=\"col.isVisible\">\n <ng-template #sortableColumnTHTemplate>\n <div class=\"flex justify-content-between align-items-center\">\n {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n <p-sortIcon [field]=\"col.descriptor.property\"></p-sortIcon>\n </div>\n </ng-template>\n <ng-template #nonSortableColumnTHTemplate>\n {{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n </ng-template>\n <th\n *ngIf=\"col.descriptor.isReorderable\"\n pResizableColumn\n pReorderableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.descriptor.property\"\n [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"\n col.descriptor.headerClassName +\n (hasColumnFilters && col.descriptor.filterDescriptor ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType : '')\n \">\n <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n <th\n *ngIf=\"!col.descriptor.isReorderable\"\n pResizableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.descriptor.property\"\n [pSortableColumnDisabled]=\"!col.descriptor.isSortEnabled\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"\n col.descriptor.headerClassName +\n (hasColumnFilters && col.descriptor.filterDescriptor ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType : '')\n \">\n <ng-container *ngTemplateOutlet=\"col.descriptor.isSortEnabled ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n </ng-container>\n </ng-container>\n <th\n *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n [style.min-width.px]=\"columnActionMinWidth\"\n pFrozenColumn\n [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n alignFrozen=\"right\"\n class=\"text-right\">\n <p-multiSelect\n #columnToggleMultiselect\n *ngIf=\"areColumnsToggleable || areColumnsReorderable || descriptor?.hasResizableColumns\"\n styleClass=\"p-button-primary mng-table-columns-multiselect\"\n appendTo=\"body\"\n optionDisabled=\"disabled\"\n [filter]=\"false\"\n [options]=\"columns\"\n [(ngModel)]=\"visibleColumns\"\n [pTooltip]=\"'mngTable.adjustTable' | translate\"\n tooltipPosition=\"left\"\n placeholder=\"\"\n dropdownIcon=\"pi pi-sliders-h\"\n [displaySelectedLabel]=\"false\"\n (onChange)=\"onColumnToggle($event)\">\n <ng-template pTemplate=\"filter\">\n <div class=\"p-checkbox p-component ml-1\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\n <div class=\"p-hidden-accessible\">\n <input\n type=\"checkbox\"\n readonly=\"readonly\"\n [checked]=\"columnToggleMultiselect.allSelected\"\n (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n (keydown.space)=\"columnToggleMultiselect.onToggleAll($event)\"\n [disabled]=\"!areColumnsToggleable\" />\n </div>\n <div\n class=\"p-checkbox-box\"\n role=\"checkbox\"\n [attr.aria-checked]=\"columnToggleMultiselect.allSelected\"\n [ngClass]=\"{\n 'p-highlight': columnToggleMultiselect.allSelected,\n 'p-focus': columnToggleMultiselect.headerCheckboxFocus,\n 'p-disabled': !areColumnsToggleable\n }\"\n (click)=\"columnToggleMultiselect.onToggleAll($event)\">\n <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': columnToggleMultiselect.allSelected}\"></span>\n </div>\n </div>\n <p-button\n icon=\"pi pi-replay\"\n styleClass=\"p-button-secondary\"\n [pTooltip]=\"'mngTable.resetLayout' | translate\"\n tooltipPosition=\"left\"\n (click)=\"resetDefaultLayout()\"></p-button>\n </ng-template>\n <ng-template let-item pTemplate=\"item\">\n {{ item.descriptor.title ?? (item.descriptor.property | i18nProperty : descriptor!.model) | translate }}\n </ng-template>\n </p-multiSelect>\n </th>\n </tr>\n <tr *ngIf=\"hasColumnFilters\" class=\"mng-column-filter-row\">\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th *ngIf=\"selectionEnabled\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\"></th>\n <ng-container *ngFor=\"let col of columns\">\n <th\n *ngIf=\"col.isVisible\"\n [class]=\"\n (col.descriptor.filterDescriptor ? 'mng-column-filter-' + col.descriptor.filterDescriptor.filterType + ' ' : ' ') +\n col.descriptor.filterDescriptor?.columnClassName\n \"\n [style.width.%]=\"col.descriptor.filterDescriptor?.columnWidth ?? col.descriptor.width\"\n [style.min-width.px]=\"col.descriptor.filterDescriptor?.columnMinWidth ?? col.descriptor.minWidth\"\n [style.max-width.px]=\"col.descriptor.maxWidth\">\n <div class=\"flex\" *ngIf=\"col.descriptor.filterDescriptor\">\n <mng-table-column-filter-full\n *ngIf=\"!descriptor?.deprecatedFilters; else deprecatedFilters\"\n [descriptor]=\"col.descriptor.filterDescriptor\"></mng-table-column-filter-full>\n <ng-template #deprecatedFilters>\n <mng-table-column-filter [descriptor]=\"col.descriptor.filterDescriptor\"></mng-table-column-filter>\n </ng-template>\n </div>\n </th>\n </ng-container>\n <th\n *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n [style.min-width.px]=\"columnActionMinWidth\"\n pFrozenColumn\n [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n alignFrozen=\"right\"></th>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n <tr\n [style.height.px]=\"rowHeight\"\n [ngClass]=\"descriptor?.rowClassName | mngClassMapPipe : descriptor?.rowClassNameMapFn : item | mngLocaleDefaultRowClass : descriptor : item\">\n <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor?.selectionColumnFrozen ?? true\">\n <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n </td>\n <ng-container *ngFor=\"let col of columns\">\n <td\n *ngIf=\"col.isVisible\"\n (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n [class]=\"\n (col.descriptor.className | mngClassMapPipe : col.descriptor.classNameMapFn : item) +\n (hasColumnFilters && col.descriptor.filterDescriptor ? ' mng-column-filter-' + col.descriptor.filterDescriptor.filterType : '')\n \"\n [class.clickable]=\"isColumnClickable\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n <span class=\"p-column-title\">{{ col.descriptor.title ?? (col.descriptor.property | i18nProperty : descriptor!.model) | translate }}</span>\n <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n </td>\n </ng-container>\n <td\n *ngIf=\"showInlineActionsColumn || areColumnsToggleable || areColumnsReorderable\"\n class=\"column-action justify-content-end text-right\"\n [style.min-width.px]=\"columnActionMinWidth\"\n pFrozenColumn\n [frozen]=\"descriptor?.actionColumnFrozen ?? true\"\n alignFrozen=\"right\">\n <ng-container *ngIf=\"columnActionTemplate; else showColumnActionComponentOrDefault\">\n <ng-container *ngTemplateOutlet=\"columnActionTemplate; context: {rowItem: item, rowIndex: idx}\"></ng-container>\n </ng-container>\n <ng-template #showColumnActionComponentOrDefault>\n <span\n *ngIf=\"columnActionComponent; else defaultColumnActions\"\n [mngComponent]=\"columnActionComponent!\"\n (instanceCreated)=\"onColumnActionCmpInst($event)\"></span>\n </ng-template>\n <ng-template #defaultColumnActions>\n <mng-action\n *ngFor=\"let action of rowInlineActions\"\n [action]=\"action\"\n [item]=\"item\"\n [viewContainer]=\"viewContainer\"\n [hostComponent]=\"this\"\n [itemId]=\"descriptor?.model?.idPropertyName ? item[descriptor!.model!.idPropertyName!] : null\"\n [actionData]=\"{itemIndex: idx}\"\n (finish)=\"onActionFinish($event)\">\n </mng-action>\n </ng-template>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"loadingicon\">\n <div class=\"flex flex-column align-items-center\">\n <i [class]=\"'text-white text-4xl pi-spin ' + descriptor?.loadingIcon\" *ngIf=\"descriptor?.loadingIcon\"></i>\n <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor?.loadingIcon}\" *ngIf=\"descriptor?.loadingText\">\n {{ descriptor?.loadingText ?? '' | translate }}\n </div>\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\">\n <tr [style.height.px]=\"rowHeight\">\n <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n <div class=\"loading-text\"></div>\n <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <tr [style.height.px]=\"rowHeight\">\n <td [attr.colspan]=\"(descriptor?.columns?.length ?? 0) + (showInlineActionsColumn ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n {{ 'mngTable.noItems' | translate }}\n </td>\n </tr>\n </ng-template>\n\n <ng-template *ngIf=\"footerTemplate\" pTemplate=\"summary\">\n <ng-container [ngTemplateOutlet]=\"footerTemplate\" [ngTemplateOutletContext]=\"{queryResult: queryResult}\"></ng-container>\n </ng-template>\n </p-table>\n</div>\n" }]
|
|
13962
13962
|
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.TranslateService }, { type: MngCommonsService }, { type: MngActionExecutorService }, { type: MngViewContainerComponentService, decorators: [{
|
|
13963
13963
|
type: Optional
|
|
13964
13964
|
}] }, { type: MngLocalStorageService }]; }, propDecorators: { initialDescriptor: [{
|