@mediusinc/mng-commons 0.17.4 → 0.17.6
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.
- package/esm2020/lib/api/utils/medius-rest.util.mjs +4 -1
- package/esm2020/lib/components/action/editor/action-editor.component.mjs +4 -1
- package/esm2020/lib/components/tableview/table/column-value/column-value.component.mjs +4 -3
- package/esm2020/lib/components/tableview/table/table.component.mjs +3 -3
- package/esm2020/lib/descriptors/action.descriptor.mjs +2 -2
- package/esm2020/lib/descriptors/column.descriptor.mjs +8 -1
- package/esm2020/lib/descriptors/types/column.type.mjs +2 -1
- package/esm2020/lib/pipes/getter.pipe.mjs +4 -4
- package/fesm2015/mediusinc-mng-commons.mjs +23 -8
- package/fesm2015/mediusinc-mng-commons.mjs.map +1 -1
- package/fesm2020/mediusinc-mng-commons.mjs +23 -8
- package/fesm2020/mediusinc-mng-commons.mjs.map +1 -1
- package/lib/components/tableview/table/column-value/column-value.component.d.ts +1 -0
- package/lib/descriptors/column.descriptor.d.ts +3 -2
- package/lib/descriptors/types/column.type.d.ts +2 -1
- package/lib/pipes/getter.pipe.d.ts +1 -1
- package/package.json +1 -1
- package/scss/mng-overrides/_theme_datatable.scss +45 -22
- package/version-info.json +5 -5
|
@@ -1038,6 +1038,7 @@ var ColumnTypeEnum;
|
|
|
1038
1038
|
ColumnTypeEnum[ColumnTypeEnum["Date"] = 4] = "Date";
|
|
1039
1039
|
ColumnTypeEnum[ColumnTypeEnum["Enum"] = 5] = "Enum";
|
|
1040
1040
|
ColumnTypeEnum[ColumnTypeEnum["Custom"] = 6] = "Custom";
|
|
1041
|
+
ColumnTypeEnum[ColumnTypeEnum["Html"] = 7] = "Html";
|
|
1041
1042
|
})(ColumnTypeEnum || (ColumnTypeEnum = {}));
|
|
1042
1043
|
|
|
1043
1044
|
var TableviewEditorTypeEnum;
|
|
@@ -1875,7 +1876,7 @@ class ActionEditorDescriptor extends ActionDescriptor {
|
|
|
1875
1876
|
}
|
|
1876
1877
|
class ActionEditorSubmitDescriptor extends ActionDescriptor {
|
|
1877
1878
|
constructor(editorAction, submitType = ActionEditorSubmitTypeEnum.Submit) {
|
|
1878
|
-
super(editorAction.model, submitType === ActionEditorSubmitTypeEnum.Submit ?
|
|
1879
|
+
super(editorAction.model, submitType === ActionEditorSubmitTypeEnum.Submit ? `${editorAction.actionName}.submit` : `${editorAction.actionName}.cancel`);
|
|
1879
1880
|
this._editorAction = editorAction;
|
|
1880
1881
|
this._submitType = submitType;
|
|
1881
1882
|
this._position = ActionPositionEnum.FooterRight;
|
|
@@ -2639,6 +2640,8 @@ class ColumnDescriptor {
|
|
|
2639
2640
|
return this.asEnum(args[0], args[1], args[2]);
|
|
2640
2641
|
case ColumnTypeEnum.Custom:
|
|
2641
2642
|
return this.asCustomComponent(args[0]);
|
|
2643
|
+
case ColumnTypeEnum.Html:
|
|
2644
|
+
return this.asHtml();
|
|
2642
2645
|
case ColumnTypeEnum.String:
|
|
2643
2646
|
default:
|
|
2644
2647
|
return this;
|
|
@@ -2686,6 +2689,10 @@ class ColumnDescriptor {
|
|
|
2686
2689
|
this._customComponentType = customComponentType;
|
|
2687
2690
|
return this;
|
|
2688
2691
|
}
|
|
2692
|
+
asHtml() {
|
|
2693
|
+
this._columnType = ColumnTypeEnum.Html;
|
|
2694
|
+
return this;
|
|
2695
|
+
}
|
|
2689
2696
|
withClassName(className, headerClassName) {
|
|
2690
2697
|
this._className = className ?? '';
|
|
2691
2698
|
this._headerClassName = headerClassName ?? '';
|
|
@@ -2742,6 +2749,7 @@ class ColumnDescriptor {
|
|
|
2742
2749
|
}
|
|
2743
2750
|
case ColumnTypeEnum.String:
|
|
2744
2751
|
case ColumnTypeEnum.Custom:
|
|
2752
|
+
case ColumnTypeEnum.Html:
|
|
2745
2753
|
default:
|
|
2746
2754
|
filterType = FilterTypeEnum.String;
|
|
2747
2755
|
break;
|
|
@@ -5969,6 +5977,9 @@ class MediusRestUtil {
|
|
|
5969
5977
|
else if (typeof value === 'number') {
|
|
5970
5978
|
doAddFilter = true;
|
|
5971
5979
|
}
|
|
5980
|
+
else if (typeof value === 'boolean') {
|
|
5981
|
+
doAddFilter = true;
|
|
5982
|
+
}
|
|
5972
5983
|
else if (Array.isArray(value)) {
|
|
5973
5984
|
const joinedValue = value
|
|
5974
5985
|
.map(v => {
|
|
@@ -6698,9 +6709,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
6698
6709
|
}] });
|
|
6699
6710
|
|
|
6700
6711
|
class MngGetterPipe {
|
|
6701
|
-
transform(
|
|
6702
|
-
if (typeof
|
|
6703
|
-
return
|
|
6712
|
+
transform(item, getterFn, value) {
|
|
6713
|
+
if (typeof getterFn === 'function') {
|
|
6714
|
+
return getterFn(item, value);
|
|
6704
6715
|
}
|
|
6705
6716
|
return value;
|
|
6706
6717
|
}
|
|
@@ -8969,6 +8980,9 @@ class MngActionEditorComponent {
|
|
|
8969
8980
|
this.triggerSubmit();
|
|
8970
8981
|
return of(undefined);
|
|
8971
8982
|
});
|
|
8983
|
+
if (this.action.hasRunConfirmation) {
|
|
8984
|
+
action.withRunConfirmationDescriptor(this.action.runConfirmationDialogDescriptor);
|
|
8985
|
+
}
|
|
8972
8986
|
}
|
|
8973
8987
|
else {
|
|
8974
8988
|
action.withRunFunction(() => {
|
|
@@ -9357,6 +9371,7 @@ class MngTableColumnValueComponent {
|
|
|
9357
9371
|
this.columnTypeDate = ColumnTypeEnum.Date;
|
|
9358
9372
|
this.columnTypeEnum = ColumnTypeEnum.Enum;
|
|
9359
9373
|
this.columnTypeCustom = ColumnTypeEnum.Custom;
|
|
9374
|
+
this.columnTypeHtml = ColumnTypeEnum.Html;
|
|
9360
9375
|
this.styleMaxWidth = null;
|
|
9361
9376
|
this.className = 'nowrap';
|
|
9362
9377
|
this.jsonPath = '$';
|
|
@@ -9388,10 +9403,10 @@ class MngTableColumnValueComponent {
|
|
|
9388
9403
|
}
|
|
9389
9404
|
}
|
|
9390
9405
|
MngTableColumnValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableColumnValueComponent, deps: [{ token: i0.ElementRef }, { token: i2$1.MessageService }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
9391
|
-
MngTableColumnValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: { descriptor: "descriptor", item: "item" }, host: { properties: { "style.max-width.px": "this.styleMaxWidth", "class": "this.className" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeString\">\n {{ item | jsonPath: jsonPath | getter: descriptor.getter | template: descriptor.template
|
|
9406
|
+
MngTableColumnValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: { descriptor: "descriptor", item: "item" }, host: { properties: { "style.max-width.px": "this.styleMaxWidth", "class": "this.className" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeString\">\n {{ (descriptor.getter ? (item | getter: descriptor.getter:(item | jsonPath: jsonPath)) : (item | jsonPath: jsonPath)) | template: descriptor.template }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeHtml\">\n <span\n [innerHTML]=\"(descriptor.getter ? (item | getter: descriptor.getter:(item | jsonPath: jsonPath)) : (item | jsonPath: jsonPath)) | template: descriptor.template\"></span>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeNumber\">\n {{ item | jsonPath: jsonPath | number: descriptor.displayFormat:descriptor.locale }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeCurrency\">\n {{ item | jsonPath: jsonPath | currency: currency:descriptor.currencyDisplay:descriptor.displayFormat:descriptor.locale }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeDate\">\n {{ item | jsonPath: jsonPath | date: descriptor.displayFormat }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeBoolean\">\n <ng-container *ngIf=\"descriptor.booleanAsIcon; else booleanText\"></ng-container>\n <i [class]=\"item | jsonPath: jsonPath | boolean: descriptor.booleanYes:descriptor.booleanNo:true\"></i>\n <ng-template #booleanText>\n {{ item | jsonPath: jsonPath | boolean: descriptor.booleanYes:descriptor.booleanNo | translate }}\n </ng-template>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeEnum\">\n {{ item | jsonPath: jsonPath | enum: descriptor.enumType:descriptor.enumTitlePath:descriptor.enumNameAsValue | translate }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeCustom\">\n <ng-container\n [mngComponent]=\"descriptor.customComponentType!\"\n [inputs]=\"{\n value: item | jsonPath: jsonPath,\n item: item,\n descriptor: descriptor\n }\"></ng-container>\n </ng-container>\n</ng-container>\n<div class=\"help-buttons\" *ngIf=\"descriptor.hasCopyToClipboard\">\n <button pButton pRipple type=\"button\" icon=\"pi pi-copy\" class=\"p-button-rounded p-button-info p-button-sm\" (click)=\"copyToClipboard($event)\"></button>\n</div>\n", styles: [":host{display:inline-block;overflow:hidden}:host.nowrap{white-space:nowrap;text-overflow:ellipsis}.help-buttons{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.help-buttons .p-button{height:1.9rem;width:1.9rem;padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i5.Ripple, selector: "[pRipple]" }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs"], outputs: ["instanceCreated"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: JsonPathPipe, name: "jsonPath" }, { kind: "pipe", type: MngEnumPipe, name: "enum" }, { kind: "pipe", type: MngBooleanPipe, name: "boolean" }, { kind: "pipe", type: MngGetterPipe, name: "getter" }, { kind: "pipe", type: MngTemplatePipe, name: "template" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9392
9407
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableColumnValueComponent, decorators: [{
|
|
9393
9408
|
type: Component,
|
|
9394
|
-
args: [{ selector: 'mng-table-column-value', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeString\">\n {{ item | jsonPath: jsonPath | getter: descriptor.getter | template: descriptor.template
|
|
9409
|
+
args: [{ selector: 'mng-table-column-value', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"descriptor.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeString\">\n {{ (descriptor.getter ? (item | getter: descriptor.getter:(item | jsonPath: jsonPath)) : (item | jsonPath: jsonPath)) | template: descriptor.template }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeHtml\">\n <span\n [innerHTML]=\"(descriptor.getter ? (item | getter: descriptor.getter:(item | jsonPath: jsonPath)) : (item | jsonPath: jsonPath)) | template: descriptor.template\"></span>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeNumber\">\n {{ item | jsonPath: jsonPath | number: descriptor.displayFormat:descriptor.locale }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeCurrency\">\n {{ item | jsonPath: jsonPath | currency: currency:descriptor.currencyDisplay:descriptor.displayFormat:descriptor.locale }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeDate\">\n {{ item | jsonPath: jsonPath | date: descriptor.displayFormat }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeBoolean\">\n <ng-container *ngIf=\"descriptor.booleanAsIcon; else booleanText\"></ng-container>\n <i [class]=\"item | jsonPath: jsonPath | boolean: descriptor.booleanYes:descriptor.booleanNo:true\"></i>\n <ng-template #booleanText>\n {{ item | jsonPath: jsonPath | boolean: descriptor.booleanYes:descriptor.booleanNo | translate }}\n </ng-template>\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeEnum\">\n {{ item | jsonPath: jsonPath | enum: descriptor.enumType:descriptor.enumTitlePath:descriptor.enumNameAsValue | translate }}\n </ng-container>\n <ng-container *ngSwitchCase=\"columnTypeCustom\">\n <ng-container\n [mngComponent]=\"descriptor.customComponentType!\"\n [inputs]=\"{\n value: item | jsonPath: jsonPath,\n item: item,\n descriptor: descriptor\n }\"></ng-container>\n </ng-container>\n</ng-container>\n<div class=\"help-buttons\" *ngIf=\"descriptor.hasCopyToClipboard\">\n <button pButton pRipple type=\"button\" icon=\"pi pi-copy\" class=\"p-button-rounded p-button-info p-button-sm\" (click)=\"copyToClipboard($event)\"></button>\n</div>\n", styles: [":host{display:inline-block;overflow:hidden}:host.nowrap{white-space:nowrap;text-overflow:ellipsis}.help-buttons{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.help-buttons .p-button{height:1.9rem;width:1.9rem;padding:0}\n"] }]
|
|
9395
9410
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2$1.MessageService }, { type: i2.TranslateService }]; }, propDecorators: { descriptor: [{
|
|
9396
9411
|
type: Input
|
|
9397
9412
|
}], item: [{
|
|
@@ -9981,10 +9996,10 @@ class MngTableComponent {
|
|
|
9981
9996
|
}
|
|
9982
9997
|
}
|
|
9983
9998
|
MngTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.TranslateService }, { token: MngActionExecutorService }, { token: MngViewContainerComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
9984
|
-
MngTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableComponent, 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" }, 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]=\"$any(descriptor?.dataKeyProperty ?? null)\"\n [lazy]=\"isLazy\"\n [loading]=\"(loading$ | async) ?? false\"\n [paginator]=\"isPagination && !infiniteScroll\"\n [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n [first]=\"$any(infiniteScroll ? 0 : offset)\"\n [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n [showCurrentPageReport]=\"!infiniteScroll\"\n [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n [multiSortMeta]=\"$any(multiSortMeta)\"\n [filters]=\"filterMetadata\"\n sortMode=\"multiple\"\n [(selection)]=\"selection\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selectionMode]=\"$any(selectionEnabled ? selectionMode : null)\"\n [scrollable]=\"true\"\n [virtualScroll]=\"infiniteScroll\"\n [virtualScrollItemSize]=\"$any(rowHeight)\"\n scrollHeight=\"flex\"\n [rowHover]=\"descriptor?.hasHover ?? true\"\n [styleClass]=\"className\"\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'\" pFrozenColumn>\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\"></th>\n <ng-container *ngFor=\"let col of descriptor?.columns\">\n <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\" [style.width.%]=\"col.width\" [style.min-width.px]=\"col.minWidth\" [class]=\"col.headerClassName\">\n <div class=\"flex justify-content-between align-items-center\">\n {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n <mng-table-column-filter\n *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n class=\"ml-auto\"\n [display]=\"descriptor!.filterDisplay\"\n [descriptor]=\"col.filterDescriptor\">\n </mng-table-column-filter>\n </div>\n </th>\n <th *ngIf=\"!col.isSortEnabled\" [style.width.%]=\"col.width\" [style.min-width.px]=\"col.minWidth\" [class]=\"col.headerClassName\">\n {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n <ng-container>\n <mng-table-column-filter\n *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n class=\"ml-auto\"\n [display]=\"descriptor!.filterDisplay\"\n [descriptor]=\"col.filterDescriptor\">\n </mng-table-column-filter>\n </ng-container>\n </th>\n </ng-container>\n <th *ngIf=\"showInlineActionsColumn\" [style.min-width.px]=\"columnActionMinWidth\" pFrozenColumn></th>\n </tr>\n <tr *ngIf=\"descriptor?.filterDisplay === filterDisplayRow && 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 && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn></th>\n <th\n *ngFor=\"let col of descriptor?.columns\"\n [class]=\"(col.filterDescriptor ? 'mng-column-filter-' + col.filterDescriptor.filterType + ' ' : ' ') + col.filterDescriptor?.columnClassName\"\n [style.width.%]=\"col.filterDescriptor?.columnWidth ?? col.width\"\n [style.min-width.px]=\"col.filterDescriptor?.columnMinWidth ?? col.minWidth\">\n <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n <mng-table-column-filter [display]=\"descriptor!.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n </div>\n </th>\n <th *ngIf=\"showInlineActionsColumn\" [style.min-width.px]=\"columnActionMinWidth\" pFrozenColumn></th>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n <tr [style.height.px]=\"rowHeight\" [class]=\"descriptor?.rowClassName | mngClassMapPipe: descriptor?.rowClassNameMapFn:item\">\n <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"width: 3rem\" pFrozenColumn>\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 3rem\" pFrozenColumn>\n <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n </td>\n <td\n *ngFor=\"let col of descriptor?.columns\"\n (click)=\"onCellClick($event, col, item, idx)\"\n [class]=\"col.className\"\n [class.clickable]=\"isColumnClickable\"\n [style.width.%]=\"col.width\"\n [style.min-width.px]=\"col.minWidth\">\n <span class=\"p-column-title\">{{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}</span>\n <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n </td>\n <td\n *ngIf=\"showInlineActionsColumn\"\n class=\"column-action justify-content-end text-right\"\n [style.min-width.px]=\"columnActionMinWidth\"\n pFrozenColumn\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 [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=\"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: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "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", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i6$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i6$3.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i6$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6$3.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i6$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i6$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i7$3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs"], outputs: ["instanceCreated"] }, { kind: "component", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "component", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["descriptor", "display"] }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: MngI18nPropertyPipe, name: "i18nProperty" }, { kind: "pipe", type: MngClassMapPipe, name: "mngClassMapPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9999
|
+
MngTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngTableComponent, 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" }, 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]=\"$any(descriptor?.dataKeyProperty ?? null)\"\n [lazy]=\"isLazy\"\n [loading]=\"(loading$ | async) ?? false\"\n [paginator]=\"isPagination && !infiniteScroll\"\n [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n [first]=\"$any(infiniteScroll ? 0 : offset)\"\n [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n [showCurrentPageReport]=\"!infiniteScroll\"\n [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n [multiSortMeta]=\"$any(multiSortMeta)\"\n [filters]=\"filterMetadata\"\n sortMode=\"multiple\"\n [(selection)]=\"selection\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selectionMode]=\"$any(selectionEnabled ? selectionMode : null)\"\n [scrollable]=\"true\"\n [virtualScroll]=\"infiniteScroll\"\n [virtualScrollItemSize]=\"$any(rowHeight)\"\n scrollHeight=\"flex\"\n [rowHover]=\"descriptor?.hasHover ?? true\"\n [styleClass]=\"className\"\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>\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></th>\n <ng-container *ngFor=\"let col of descriptor?.columns\">\n <th\n *ngIf=\"col.isSortEnabled\"\n [pSortableColumn]=\"col.property\"\n [style.width.%]=\"col.width\"\n [style.min-width.px]=\"col.minWidth\"\n [style.max-width.px]=\"col.maxWidth\"\n [class]=\"\n col.headerClassName +\n (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.filterDescriptor\n ? ' mng-column-filter-' + col.filterDescriptor.filterType\n : '')\n \">\n <div class=\"flex justify-content-between align-items-center\">\n {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n <mng-table-column-filter\n *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n class=\"ml-auto\"\n [display]=\"descriptor!.filterDisplay\"\n [descriptor]=\"col.filterDescriptor\">\n </mng-table-column-filter>\n </div>\n </th>\n <th\n *ngIf=\"!col.isSortEnabled\"\n [style.width.%]=\"col.width\"\n [style.min-width.px]=\"col.minWidth\"\n [style.max-width.px]=\"col.maxWidth\"\n [class]=\"\n col.headerClassName +\n (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.filterDescriptor\n ? ' mng-column-filter-' + col.filterDescriptor.filterType\n : '')\n \">\n {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n <ng-container>\n <mng-table-column-filter\n *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n class=\"ml-auto\"\n [display]=\"descriptor!.filterDisplay\"\n [descriptor]=\"col.filterDescriptor\">\n </mng-table-column-filter>\n </ng-container>\n </th>\n </ng-container>\n <th *ngIf=\"showInlineActionsColumn\" [style.min-width.px]=\"columnActionMinWidth\" pFrozenColumn></th>\n </tr>\n <tr *ngIf=\"descriptor?.filterDisplay === filterDisplayRow && 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 && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn></th>\n <th\n *ngFor=\"let col of descriptor?.columns\"\n [class]=\"(col.filterDescriptor ? 'mng-column-filter-' + col.filterDescriptor.filterType + ' ' : ' ') + col.filterDescriptor?.columnClassName\"\n [style.width.%]=\"col.filterDescriptor?.columnWidth ?? col.width\"\n [style.min-width.px]=\"col.filterDescriptor?.columnMinWidth ?? col.minWidth\"\n [style.max-width.px]=\"col.maxWidth\">\n <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n <mng-table-column-filter [display]=\"descriptor!.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n </div>\n </th>\n <th *ngIf=\"showInlineActionsColumn\" [style.min-width.px]=\"columnActionMinWidth\" pFrozenColumn></th>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n <tr [style.height.px]=\"rowHeight\" [class]=\"descriptor?.rowClassName | mngClassMapPipe: descriptor?.rowClassNameMapFn:item\">\n <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn>\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn>\n <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n </td>\n <td\n *ngFor=\"let col of descriptor?.columns\"\n (click)=\"onCellClick($event, col, item, idx)\"\n [class]=\"\n col.className +\n (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.filterDescriptor ? ' mng-column-filter-' + col.filterDescriptor.filterType : '')\n \"\n [class.clickable]=\"isColumnClickable\"\n [style.width.%]=\"col.width\"\n [style.min-width.px]=\"col.minWidth\"\n [style.max-width.px]=\"col.maxWidth\">\n <span class=\"p-column-title\">{{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}</span>\n <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n </td>\n <td\n *ngIf=\"showInlineActionsColumn\"\n class=\"column-action justify-content-end text-right\"\n [style.min-width.px]=\"columnActionMinWidth\"\n pFrozenColumn\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 [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=\"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: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "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", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i6$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i6$3.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i6$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6$3.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i6$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i6$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i7$3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs"], outputs: ["instanceCreated"] }, { kind: "component", type: MngTableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "component", type: MngTableColumnFilterComponent, selector: "mng-table-column-filter", inputs: ["descriptor", "display"] }, { kind: "component", type: MngActionComponent, selector: "mng-action", inputs: ["action", "item", "itemId", "actionData", "queryParam", "dataProvider", "disabled", "loading", "viewContainer", "selectedItems"], outputs: ["finish"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: MngI18nPropertyPipe, name: "i18nProperty" }, { kind: "pipe", type: MngClassMapPipe, name: "mngClassMapPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9985
10000
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableComponent, decorators: [{
|
|
9986
10001
|
type: Component,
|
|
9987
|
-
args: [{ selector: 'mng-table', 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]=\"$any(descriptor?.dataKeyProperty ?? null)\"\n [lazy]=\"isLazy\"\n [loading]=\"(loading$ | async) ?? false\"\n [paginator]=\"isPagination && !infiniteScroll\"\n [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n [first]=\"$any(infiniteScroll ? 0 : offset)\"\n [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n [showCurrentPageReport]=\"!infiniteScroll\"\n [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n [multiSortMeta]=\"$any(multiSortMeta)\"\n [filters]=\"filterMetadata\"\n sortMode=\"multiple\"\n [(selection)]=\"selection\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selectionMode]=\"$any(selectionEnabled ? selectionMode : null)\"\n [scrollable]=\"true\"\n [virtualScroll]=\"infiniteScroll\"\n [virtualScrollItemSize]=\"$any(rowHeight)\"\n scrollHeight=\"flex\"\n [rowHover]=\"descriptor?.hasHover ?? true\"\n [styleClass]=\"className\"\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'\" pFrozenColumn>\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\"></th>\n <ng-container *ngFor=\"let col of descriptor?.columns\">\n <th *ngIf=\"col.isSortEnabled\" [pSortableColumn]=\"col.property\" [style.width.%]=\"col.width\" [style.min-width.px]=\"col.minWidth\" [class]=\"col.headerClassName\">\n <div class=\"flex justify-content-between align-items-center\">\n {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n <mng-table-column-filter\n *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n class=\"ml-auto\"\n [display]=\"descriptor!.filterDisplay\"\n [descriptor]=\"col.filterDescriptor\">\n </mng-table-column-filter>\n </div>\n </th>\n <th *ngIf=\"!col.isSortEnabled\" [style.width.%]=\"col.width\" [style.min-width.px]=\"col.minWidth\" [class]=\"col.headerClassName\">\n {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n <ng-container>\n <mng-table-column-filter\n *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n class=\"ml-auto\"\n [display]=\"descriptor!.filterDisplay\"\n [descriptor]=\"col.filterDescriptor\">\n </mng-table-column-filter>\n </ng-container>\n </th>\n </ng-container>\n <th *ngIf=\"showInlineActionsColumn\" [style.min-width.px]=\"columnActionMinWidth\" pFrozenColumn></th>\n </tr>\n <tr *ngIf=\"descriptor?.filterDisplay === filterDisplayRow && 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 && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn></th>\n <th\n *ngFor=\"let col of descriptor?.columns\"\n [class]=\"(col.filterDescriptor ? 'mng-column-filter-' + col.filterDescriptor.filterType + ' ' : ' ') + col.filterDescriptor?.columnClassName\"\n [style.width.%]=\"col.filterDescriptor?.columnWidth ?? col.width\"\n [style.min-width.px]=\"col.filterDescriptor?.columnMinWidth ?? col.minWidth\">\n <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n <mng-table-column-filter [display]=\"descriptor!.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n </div>\n </th>\n <th *ngIf=\"showInlineActionsColumn\" [style.min-width.px]=\"columnActionMinWidth\" pFrozenColumn></th>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n <tr [style.height.px]=\"rowHeight\" [class]=\"descriptor?.rowClassName | mngClassMapPipe: descriptor?.rowClassNameMapFn:item\">\n <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"width: 3rem\" pFrozenColumn>\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"width: 3rem\" pFrozenColumn>\n <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n </td>\n <td\n *ngFor=\"let col of descriptor?.columns\"\n (click)=\"onCellClick($event, col, item, idx)\"\n [class]=\"col.className\"\n [class.clickable]=\"isColumnClickable\"\n [style.width.%]=\"col.width\"\n [style.min-width.px]=\"col.minWidth\">\n <span class=\"p-column-title\">{{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}</span>\n <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n </td>\n <td\n *ngIf=\"showInlineActionsColumn\"\n class=\"column-action justify-content-end text-right\"\n [style.min-width.px]=\"columnActionMinWidth\"\n pFrozenColumn\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 [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=\"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" }]
|
|
10002
|
+
args: [{ selector: 'mng-table', 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]=\"$any(descriptor?.dataKeyProperty ?? null)\"\n [lazy]=\"isLazy\"\n [loading]=\"(loading$ | async) ?? false\"\n [paginator]=\"isPagination && !infiniteScroll\"\n [rows]=\"$any(infiniteScroll ? 20 : rows)\"\n [first]=\"$any(infiniteScroll ? 0 : offset)\"\n [totalRecords]=\"$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)\"\n [rowsPerPageOptions]=\"$any(infiniteScroll ? null : rowsPerPageOptions)\"\n [showCurrentPageReport]=\"!infiniteScroll\"\n [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n [multiSortMeta]=\"$any(multiSortMeta)\"\n [filters]=\"filterMetadata\"\n sortMode=\"multiple\"\n [(selection)]=\"selection\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selectionMode]=\"$any(selectionEnabled ? selectionMode : null)\"\n [scrollable]=\"true\"\n [virtualScroll]=\"infiniteScroll\"\n [virtualScrollItemSize]=\"$any(rowHeight)\"\n scrollHeight=\"flex\"\n [rowHover]=\"descriptor?.hasHover ?? true\"\n [styleClass]=\"className\"\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>\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></th>\n <ng-container *ngFor=\"let col of descriptor?.columns\">\n <th\n *ngIf=\"col.isSortEnabled\"\n [pSortableColumn]=\"col.property\"\n [style.width.%]=\"col.width\"\n [style.min-width.px]=\"col.minWidth\"\n [style.max-width.px]=\"col.maxWidth\"\n [class]=\"\n col.headerClassName +\n (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.filterDescriptor\n ? ' mng-column-filter-' + col.filterDescriptor.filterType\n : '')\n \">\n <div class=\"flex justify-content-between align-items-center\">\n {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n <p-sortIcon [field]=\"col.property\"></p-sortIcon>\n <mng-table-column-filter\n *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n class=\"ml-auto\"\n [display]=\"descriptor!.filterDisplay\"\n [descriptor]=\"col.filterDescriptor\">\n </mng-table-column-filter>\n </div>\n </th>\n <th\n *ngIf=\"!col.isSortEnabled\"\n [style.width.%]=\"col.width\"\n [style.min-width.px]=\"col.minWidth\"\n [style.max-width.px]=\"col.maxWidth\"\n [class]=\"\n col.headerClassName +\n (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.filterDescriptor\n ? ' mng-column-filter-' + col.filterDescriptor.filterType\n : '')\n \">\n {{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}\n <ng-container>\n <mng-table-column-filter\n *ngIf=\"col.filterDescriptor && descriptor!.filterDisplay === filterDisplayMenu\"\n class=\"ml-auto\"\n [display]=\"descriptor!.filterDisplay\"\n [descriptor]=\"col.filterDescriptor\">\n </mng-table-column-filter>\n </ng-container>\n </th>\n </ng-container>\n <th *ngIf=\"showInlineActionsColumn\" [style.min-width.px]=\"columnActionMinWidth\" pFrozenColumn></th>\n </tr>\n <tr *ngIf=\"descriptor?.filterDisplay === filterDisplayRow && 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 && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn></th>\n <th\n *ngFor=\"let col of descriptor?.columns\"\n [class]=\"(col.filterDescriptor ? 'mng-column-filter-' + col.filterDescriptor.filterType + ' ' : ' ') + col.filterDescriptor?.columnClassName\"\n [style.width.%]=\"col.filterDescriptor?.columnWidth ?? col.width\"\n [style.min-width.px]=\"col.filterDescriptor?.columnMinWidth ?? col.minWidth\"\n [style.max-width.px]=\"col.maxWidth\">\n <div class=\"flex\" *ngIf=\"col.filterDescriptor\">\n <mng-table-column-filter [display]=\"descriptor!.filterDisplay\" [descriptor]=\"col.filterDescriptor\"></mng-table-column-filter>\n </div>\n </th>\n <th *ngIf=\"showInlineActionsColumn\" [style.min-width.px]=\"columnActionMinWidth\" pFrozenColumn></th>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\">\n <tr [style.height.px]=\"rowHeight\" [class]=\"descriptor?.rowClassName | mngClassMapPipe: descriptor?.rowClassNameMapFn:item\">\n <td *ngIf=\"selectionEnabled && selectionMode === 'multiple'\" style=\"min-width: 36px\" pFrozenColumn>\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <td *ngIf=\"selectionEnabled && selectionMode === 'single'\" style=\"min-width: 36px\" pFrozenColumn>\n <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n </td>\n <td\n *ngFor=\"let col of descriptor?.columns\"\n (click)=\"onCellClick($event, col, item, idx)\"\n [class]=\"\n col.className +\n (descriptor?.filterDisplay === filterDisplayRow && hasColumnFilters && col.filterDescriptor ? ' mng-column-filter-' + col.filterDescriptor.filterType : '')\n \"\n [class.clickable]=\"isColumnClickable\"\n [style.width.%]=\"col.width\"\n [style.min-width.px]=\"col.minWidth\"\n [style.max-width.px]=\"col.maxWidth\">\n <span class=\"p-column-title\">{{ col.title ?? (col.property | i18nProperty: descriptor!.model) | translate }}</span>\n <mng-table-column-value [descriptor]=\"col\" [item]=\"item\"></mng-table-column-value>\n </td>\n <td\n *ngIf=\"showInlineActionsColumn\"\n class=\"column-action justify-content-end text-right\"\n [style.min-width.px]=\"columnActionMinWidth\"\n pFrozenColumn\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 [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=\"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" }]
|
|
9988
10003
|
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.TranslateService }, { type: MngActionExecutorService }, { type: MngViewContainerComponentService, decorators: [{
|
|
9989
10004
|
type: Optional
|
|
9990
10005
|
}] }]; }, propDecorators: { initialDescriptor: [{
|