@mediusinc/mng-commons 0.17.2 → 0.17.4
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/models/query-result.model.mjs +1 -1
- package/esm2020/lib/components/action/editor/action-editor.component.mjs +1 -1
- package/esm2020/lib/components/form/formly/fields/formly-field-table-dialog-multiselect/formly-field-table-dialog-multiselect.component.mjs +1 -1
- package/esm2020/lib/components/layout/menu-item.component.mjs +34 -6
- package/esm2020/lib/components/layout/menu.component.mjs +1 -1
- package/esm2020/lib/components/tableview/table/table.component.mjs +9 -3
- package/esm2020/lib/data-providers/table.data-provider.mjs +15 -1
- package/esm2020/lib/data-providers/tableview.data-provider.mjs +15 -1
- package/esm2020/lib/descriptors/column.descriptor.mjs +2 -1
- package/esm2020/lib/descriptors/table.descriptor.mjs +1 -1
- package/esm2020/lib/descriptors/tableview.descriptor.mjs +21 -4
- package/esm2020/lib/descriptors/types/table.type.mjs +2 -1
- package/esm2020/lib/pipes/enumerate-async.pipe.mjs +1 -1
- package/fesm2015/mediusinc-mng-commons.mjs +94 -15
- package/fesm2015/mediusinc-mng-commons.mjs.map +1 -1
- package/fesm2020/mediusinc-mng-commons.mjs +89 -10
- package/fesm2020/mediusinc-mng-commons.mjs.map +1 -1
- package/lib/api/models/query-result.model.d.ts +1 -1
- package/lib/components/layout/menu-item.component.d.ts +12 -4
- package/lib/components/tableview/table/table.component.d.ts +3 -1
- package/lib/data-providers/table.data-provider.d.ts +8 -0
- package/lib/data-providers/tableview.data-provider.d.ts +8 -0
- package/lib/descriptors/tableview.descriptor.d.ts +6 -0
- package/lib/descriptors/types/table.type.d.ts +2 -1
- package/package.json +1 -1
- package/scss/mng-overrides/_layout_dialog.scss +15 -3
- package/scss/mng-overrides/_theme_datatable.scss +17 -11
- package/version-info.json +5 -5
|
@@ -909,9 +909,13 @@ class LookupDataProvider extends DataProvider {
|
|
|
909
909
|
class TableDataProvider extends DataProvider {
|
|
910
910
|
constructor(modelType, serviceType) {
|
|
911
911
|
super(modelType, serviceType);
|
|
912
|
+
this._isLazy = true;
|
|
912
913
|
this._getAll = () => of(new MediusQueryResult());
|
|
913
914
|
this._getAllReloadSubject = new Subject();
|
|
914
915
|
}
|
|
916
|
+
get isLazy() {
|
|
917
|
+
return this._isLazy;
|
|
918
|
+
}
|
|
915
919
|
get getAll() {
|
|
916
920
|
return this._getAll;
|
|
917
921
|
}
|
|
@@ -922,6 +926,15 @@ class TableDataProvider extends DataProvider {
|
|
|
922
926
|
this._getAll = getAll;
|
|
923
927
|
return this;
|
|
924
928
|
}
|
|
929
|
+
/**
|
|
930
|
+
* Use this method to use inline load without lazy loading features on table and use inline pagination, filtering and sorting.
|
|
931
|
+
* @param getAll
|
|
932
|
+
*/
|
|
933
|
+
withGetAllEagerly(getAll) {
|
|
934
|
+
this._getAll = (qp, service) => getAll(service).pipe(map(i => MediusQueryResult.fromArray(i)));
|
|
935
|
+
this._isLazy = false;
|
|
936
|
+
return this;
|
|
937
|
+
}
|
|
925
938
|
getAllReload(queryParam) {
|
|
926
939
|
this._getAllReloadSubject.next(queryParam);
|
|
927
940
|
}
|
|
@@ -930,9 +943,13 @@ class TableDataProvider extends DataProvider {
|
|
|
930
943
|
class TableviewDataProvider extends EditorDataProvider {
|
|
931
944
|
constructor(modelType, serviceType) {
|
|
932
945
|
super(modelType, serviceType);
|
|
946
|
+
this._isLazy = true;
|
|
933
947
|
this._getAll = () => of(new MediusQueryResult());
|
|
934
948
|
this._getAllReloadSubject = new Subject();
|
|
935
949
|
}
|
|
950
|
+
get isLazy() {
|
|
951
|
+
return this._isLazy;
|
|
952
|
+
}
|
|
936
953
|
get getAll() {
|
|
937
954
|
return this._getAll;
|
|
938
955
|
}
|
|
@@ -943,6 +960,15 @@ class TableviewDataProvider extends EditorDataProvider {
|
|
|
943
960
|
this._getAll = getAll;
|
|
944
961
|
return this;
|
|
945
962
|
}
|
|
963
|
+
/**
|
|
964
|
+
* Use this method to use inline load without lazy loading features on table and use inline pagination, filtering and sorting.
|
|
965
|
+
* @param getAll
|
|
966
|
+
*/
|
|
967
|
+
withGetAllEagerly(getAll) {
|
|
968
|
+
this._getAll = (qp, service) => getAll(service).pipe(map(i => MediusQueryResult.fromArray(i)));
|
|
969
|
+
this._isLazy = false;
|
|
970
|
+
return this;
|
|
971
|
+
}
|
|
946
972
|
getAllReload(queryParam) {
|
|
947
973
|
this._getAllReloadSubject.next(queryParam);
|
|
948
974
|
}
|
|
@@ -1123,6 +1149,7 @@ var TablePaginationModeEnum;
|
|
|
1123
1149
|
(function (TablePaginationModeEnum) {
|
|
1124
1150
|
TablePaginationModeEnum[TablePaginationModeEnum["Pagination"] = 0] = "Pagination";
|
|
1125
1151
|
TablePaginationModeEnum[TablePaginationModeEnum["InfiniteScroll"] = 1] = "InfiniteScroll";
|
|
1152
|
+
TablePaginationModeEnum[TablePaginationModeEnum["None"] = 2] = "None";
|
|
1126
1153
|
})(TablePaginationModeEnum || (TablePaginationModeEnum = {}));
|
|
1127
1154
|
var TableFilterDisplayEnum;
|
|
1128
1155
|
(function (TableFilterDisplayEnum) {
|
|
@@ -2817,6 +2844,7 @@ class ColumnDescriptor {
|
|
|
2817
2844
|
obj._width = this._width;
|
|
2818
2845
|
obj._minWidth = this._minWidth;
|
|
2819
2846
|
obj._maxWidth = this._maxWidth;
|
|
2847
|
+
obj._customComponentType = this._customComponentType;
|
|
2820
2848
|
obj._hasCopyToClipboard = this._hasCopyToClipboard;
|
|
2821
2849
|
obj._template = this._template;
|
|
2822
2850
|
obj._getter = this._getter;
|
|
@@ -4561,9 +4589,9 @@ class TableviewDescriptor {
|
|
|
4561
4589
|
static from(modelType, idProperty, titleProperty) {
|
|
4562
4590
|
const descriptor = new TableviewDescriptor(modelType, idProperty, titleProperty);
|
|
4563
4591
|
descriptor._table = TableDescriptor.from(modelType, idProperty, titleProperty);
|
|
4564
|
-
descriptor._editEditor = EditorDescriptor.from(modelType, idProperty, titleProperty);
|
|
4565
|
-
descriptor._detailsEditor = EditorDescriptor.from(modelType, idProperty, titleProperty);
|
|
4566
|
-
descriptor._addEditor = EditorDescriptor.from(modelType, idProperty, titleProperty);
|
|
4592
|
+
descriptor._editEditor = EditorDescriptor.from(modelType, idProperty, titleProperty, TableviewEditorTypeEnum.Edit);
|
|
4593
|
+
descriptor._detailsEditor = EditorDescriptor.from(modelType, idProperty, titleProperty, TableviewEditorTypeEnum.Details).withDisabled();
|
|
4594
|
+
descriptor._addEditor = EditorDescriptor.from(modelType, idProperty, titleProperty, TableviewEditorTypeEnum.Add);
|
|
4567
4595
|
return descriptor;
|
|
4568
4596
|
}
|
|
4569
4597
|
/**
|
|
@@ -4624,6 +4652,23 @@ class TableviewDescriptor {
|
|
|
4624
4652
|
this._editEditor = descriptor;
|
|
4625
4653
|
return this;
|
|
4626
4654
|
}
|
|
4655
|
+
/**
|
|
4656
|
+
* creates new copy of editor descriptor and makes it disabled
|
|
4657
|
+
* usable in combination with this::withEditorDescriptors, where detailsDescriptor is made non disabled
|
|
4658
|
+
* @param type which editor type to set to disabled
|
|
4659
|
+
*/
|
|
4660
|
+
withDisabledEditorDescriptor(type = TableviewEditorTypeEnum.Details) {
|
|
4661
|
+
if (type === TableviewEditorTypeEnum.Edit) {
|
|
4662
|
+
this._editEditor = this._editEditor.copy().withDisabled();
|
|
4663
|
+
}
|
|
4664
|
+
else if (type === TableviewEditorTypeEnum.Details) {
|
|
4665
|
+
this._detailsEditor = this._detailsEditor.copy().withDisabled();
|
|
4666
|
+
}
|
|
4667
|
+
else if (type === TableviewEditorTypeEnum.Add) {
|
|
4668
|
+
this._addEditor = this._addEditor.copy().withDisabled();
|
|
4669
|
+
}
|
|
4670
|
+
return this;
|
|
4671
|
+
}
|
|
4627
4672
|
withTableTitle(title) {
|
|
4628
4673
|
this._tableTitle = title;
|
|
4629
4674
|
return this;
|
|
@@ -9597,6 +9642,8 @@ class MngTableComponent {
|
|
|
9597
9642
|
this.captionCmpInstEventEmitter = new EventEmitter();
|
|
9598
9643
|
this.columnActionCmpInstEventEmitter = new EventEmitter();
|
|
9599
9644
|
// data provider and items
|
|
9645
|
+
this.isLazy = false;
|
|
9646
|
+
this.isPagination = false;
|
|
9600
9647
|
this.useDataProvider = false;
|
|
9601
9648
|
this.useQueryParamsInitializedSubejct = new BehaviorSubject(false);
|
|
9602
9649
|
this.useQueryParamsInitialized$ = this.useQueryParamsInitializedSubejct.asObservable();
|
|
@@ -9629,7 +9676,7 @@ class MngTableComponent {
|
|
|
9629
9676
|
this.subscriptions = [];
|
|
9630
9677
|
}
|
|
9631
9678
|
ngOnInit() {
|
|
9632
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
|
9679
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
9633
9680
|
this.viewContainer = (_b = (_a = this.viewContainerInit) !== null && _a !== void 0 ? _a : this.viewContainerService) !== null && _b !== void 0 ? _b : undefined;
|
|
9634
9681
|
if (!(this.initialDescriptor instanceof TableDynamicDescriptor)) {
|
|
9635
9682
|
this.descriptor = this.initialDescriptor;
|
|
@@ -9680,10 +9727,14 @@ class MngTableComponent {
|
|
|
9680
9727
|
this.rowHeight = (_u = this.descriptor.rowHeight) !== null && _u !== void 0 ? _u : 45;
|
|
9681
9728
|
this.useQueryParams = false;
|
|
9682
9729
|
}
|
|
9730
|
+
else if (((_v = this.descriptor) === null || _v === void 0 ? void 0 : _v.paginationMode) === TablePaginationModeEnum.Pagination) {
|
|
9731
|
+
this.isPagination = true;
|
|
9732
|
+
}
|
|
9683
9733
|
// check if data provider is supplied, if is, use it primarily
|
|
9684
9734
|
if (this.dataProvider) {
|
|
9685
9735
|
// map subjects to observables and initiate data
|
|
9686
9736
|
this.useDataProvider = true;
|
|
9737
|
+
this.isLazy = this.dataProvider.isLazy;
|
|
9687
9738
|
this.queryResult$ = this.dataProviderQueryResultSubject.asObservable();
|
|
9688
9739
|
this.loading$ = this.dataProviderLoadingSubject.asObservable();
|
|
9689
9740
|
const emptyQueryResult = new MediusQueryResult();
|
|
@@ -9718,7 +9769,7 @@ class MngTableComponent {
|
|
|
9718
9769
|
return queryResult;
|
|
9719
9770
|
}));
|
|
9720
9771
|
if (!isObservable(this.items)) {
|
|
9721
|
-
this.itemsSubject.next((
|
|
9772
|
+
this.itemsSubject.next((_w = this.items) !== null && _w !== void 0 ? _w : []);
|
|
9722
9773
|
}
|
|
9723
9774
|
}
|
|
9724
9775
|
if (typeof this.loading !== 'undefined') {
|
|
@@ -9727,7 +9778,7 @@ class MngTableComponent {
|
|
|
9727
9778
|
}
|
|
9728
9779
|
const initialQueryParamMap = this.route.snapshot.queryParamMap;
|
|
9729
9780
|
if (this.useQueryParams &&
|
|
9730
|
-
((!initialQueryParamMap.has('sort') && ((
|
|
9781
|
+
((!initialQueryParamMap.has('sort') && ((_x = this.descriptor) === null || _x === void 0 ? void 0 : _x.hasDefaultSort)) ||
|
|
9731
9782
|
(!initialQueryParamMap.has('filter') && this.filterDescriptors.some(fd => fd.hasDefaultValue)))) {
|
|
9732
9783
|
// default sort/filters are applied, no additional filtering/sorting is specified in query param
|
|
9733
9784
|
// redirect must be done at first step
|
|
@@ -10048,10 +10099,10 @@ class MngTableComponent {
|
|
|
10048
10099
|
}
|
|
10049
10100
|
}
|
|
10050
10101
|
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 });
|
|
10051
|
-
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]=\"useDataProvider\"\n [loading]=\"(loading$ | async) ?? false\"\n [paginator]=\"useDataProvider && !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\">\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\" 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\" 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 });
|
|
10102
|
+
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 });
|
|
10052
10103
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngTableComponent, decorators: [{
|
|
10053
10104
|
type: Component,
|
|
10054
|
-
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]=\"useDataProvider\"\n [loading]=\"(loading$ | async) ?? false\"\n [paginator]=\"useDataProvider && !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\">\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\" 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\" 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" }]
|
|
10105
|
+
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" }]
|
|
10055
10106
|
}], ctorParameters: function () {
|
|
10056
10107
|
return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.TranslateService }, { type: MngActionExecutorService }, { type: MngViewContainerComponentService, decorators: [{
|
|
10057
10108
|
type: Optional
|
|
@@ -11037,14 +11088,19 @@ class MngMenuItemComponent {
|
|
|
11037
11088
|
this.index = 0;
|
|
11038
11089
|
this.root = false;
|
|
11039
11090
|
this.parentKey = null;
|
|
11091
|
+
this.visibleChangeEventEmitter = new EventEmitter();
|
|
11040
11092
|
this.hostClassNoPadding = false;
|
|
11093
|
+
this.hostClassChildrenHidden = false;
|
|
11041
11094
|
this.key = '';
|
|
11042
11095
|
this.active = false;
|
|
11043
11096
|
this.hover = false;
|
|
11044
11097
|
this.guardsIsAllowedSubject = new BehaviorSubject(true);
|
|
11045
11098
|
this.isPermittedSubject = new BehaviorSubject(true);
|
|
11099
|
+
this.isVisibleSubject = new BehaviorSubject(true);
|
|
11100
|
+
this.childrenVisibilitySubject = [];
|
|
11046
11101
|
this.guardsIsAllowed$ = this.guardsIsAllowedSubject.asObservable().pipe(distinctUntilChanged());
|
|
11047
11102
|
this.isPermitted$ = this.isPermittedSubject.asObservable().pipe(distinctUntilChanged());
|
|
11103
|
+
this.isVisible$ = this.isVisibleSubject.asObservable().pipe(distinctUntilChanged());
|
|
11048
11104
|
}
|
|
11049
11105
|
ngOnInit() {
|
|
11050
11106
|
if (!this.mngCommons.menuModeIsSlim && this.item.routerLink) {
|
|
@@ -11089,11 +11145,23 @@ class MngMenuItemComponent {
|
|
|
11089
11145
|
});
|
|
11090
11146
|
}
|
|
11091
11147
|
this.checkIfMenuItemIsAllowedFromGuard(this.router.routerState.snapshot);
|
|
11092
|
-
this.isVisibleCombinedSubscription = combineLatest([this.isPermitted$, this.guardsIsAllowed$]).subscribe({
|
|
11148
|
+
this.isVisibleCombinedSubscription = combineLatest([of(this.item.visible !== false), this.isPermitted$, this.guardsIsAllowed$]).subscribe({
|
|
11093
11149
|
next: res => {
|
|
11094
|
-
|
|
11150
|
+
const isVisible = res.every(r => r === true);
|
|
11151
|
+
this.hostClassNoPadding = !isVisible;
|
|
11152
|
+
this.isVisibleSubject.next(isVisible);
|
|
11095
11153
|
}
|
|
11096
11154
|
});
|
|
11155
|
+
this.isVisibleSubscription = this.isVisible$.subscribe(v => {
|
|
11156
|
+
this.visibleChangeEventEmitter.emit(v);
|
|
11157
|
+
});
|
|
11158
|
+
if (this.item.items) {
|
|
11159
|
+
this.childrenVisibilitySubject = this.item.items.map(i => new BehaviorSubject(true));
|
|
11160
|
+
this.areChildrenVisibleSubscription = combineLatest(this.childrenVisibilitySubject.map(s => s.asObservable().pipe(distinctUntilChanged()))).subscribe(visible => {
|
|
11161
|
+
const anyChildVisible = visible.some(v => v === true);
|
|
11162
|
+
this.hostClassChildrenHidden = !anyChildVisible;
|
|
11163
|
+
});
|
|
11164
|
+
}
|
|
11097
11165
|
}
|
|
11098
11166
|
updateActiveStateFromRoute() {
|
|
11099
11167
|
if (this.itemUrl) {
|
|
@@ -11143,13 +11211,18 @@ class MngMenuItemComponent {
|
|
|
11143
11211
|
}
|
|
11144
11212
|
}
|
|
11145
11213
|
ngOnDestroy() {
|
|
11146
|
-
var _a, _b, _c, _d, _e, _f;
|
|
11214
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
11147
11215
|
(_a = this.menuSourceSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
11148
11216
|
(_b = this.menuResetSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
|
|
11149
11217
|
(_c = this.routerEventsSubscription) === null || _c === void 0 ? void 0 : _c.unsubscribe();
|
|
11150
11218
|
(_d = this.guardsIsAllowedSubscription) === null || _d === void 0 ? void 0 : _d.unsubscribe();
|
|
11151
11219
|
(_e = this.isPermittedSubscription) === null || _e === void 0 ? void 0 : _e.unsubscribe();
|
|
11152
|
-
(_f = this.
|
|
11220
|
+
(_f = this.isVisibleSubscription) === null || _f === void 0 ? void 0 : _f.unsubscribe();
|
|
11221
|
+
(_g = this.isVisibleCombinedSubscription) === null || _g === void 0 ? void 0 : _g.unsubscribe();
|
|
11222
|
+
(_h = this.areChildrenVisibleSubscription) === null || _h === void 0 ? void 0 : _h.unsubscribe();
|
|
11223
|
+
}
|
|
11224
|
+
onChildVisibleChange(visible, item, idx) {
|
|
11225
|
+
this.childrenVisibilitySubject[idx].next(visible);
|
|
11153
11226
|
}
|
|
11154
11227
|
checkIfMenuItemIsAllowedFromGuard(routerState) {
|
|
11155
11228
|
var _a, _b;
|
|
@@ -11188,7 +11261,7 @@ class MngMenuItemComponent {
|
|
|
11188
11261
|
}
|
|
11189
11262
|
}
|
|
11190
11263
|
MngMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngMenuItemComponent, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: MngAuthorizationService }, { token: MngCommonsService }, { token: MngMainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
|
|
11191
|
-
MngMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, host: { properties: { "class.layout-root-menuitem": "root", "class.active-menuitem": "active", "class.py-0": "this.hostClassNoPadding" } }, ngImport: i0, template: "<ng-container>\n <div *ngIf=\"root
|
|
11264
|
+
MngMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, outputs: { visibleChangeEventEmitter: "visibleChange" }, host: { properties: { "class.layout-root-menuitem": "root", "class.active-menuitem": "active", "class.py-0": "this.hostClassNoPadding", "class.hidden": "this.hostClassChildrenHidden" } }, ngImport: i0, template: "<ng-container *ngIf=\"isVisible$ | async\">\n <div *ngIf=\"root\" class=\"layout-menuitem-root-text\">\n {{ item.label! | translate }}\n </div>\n <a\n *ngIf=\"!item.routerLink || item.items\"\n [attr.href]=\"item.href\"\n (click)=\"itemClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (keydown.enter)=\"itemClick($event)\"\n [routerLink]=\"item.routerLink\"\n [attr.target]=\"item.target\"\n [attr.tabindex]=\"0\"\n [ngClass]=\"item.className ?? ''\"\n pRipple>\n <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n </a>\n <a\n *ngIf=\"item.routerLink && !item.items\"\n (click)=\"itemClick($event)\"\n (mouseenter)=\"hover = true\"\n (mouseleave)=\"hover = false\"\n [routerLink]=\"item.routerLink\"\n routerLinkActive=\"active-menuitem-routerlink\"\n [attr.target]=\"item.target\"\n [attr.tabindex]=\"0\"\n [ngClass]=\"item.className ?? ''\"\n pRipple>\n <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n </a>\n <ul\n *ngIf=\"item.items || (item.items && (mngCommons.menuModeIsStatic$ | async) && root)\"\n [@children]=\"\n (mngCommons.menuModeIsSlim$ | async) && (mainLayoutService.isMobile$ | async) === false && root\n ? active\n ? 'visible'\n : 'hidden'\n : (mngCommons.menuModeIsStatic$ | async) && root && (mainLayoutService.isMobile$ | async) === false\n ? 'visible'\n : active\n ? 'visibleAnimated'\n : 'hiddenAnimated'\n \">\n <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n <li mng-menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeClassName\" (visibleChange)=\"onChildVisibleChange($event, item, i)\"></li>\n </ng-template>\n </ul>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i5.Ripple, selector: "[pRipple]" }, { kind: "component", type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "index", "root", "parentKey"], outputs: ["visibleChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], animations: [
|
|
11192
11265
|
trigger('children', [
|
|
11193
11266
|
state('void', style({
|
|
11194
11267
|
height: '0px'
|
|
@@ -11240,7 +11313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
11240
11313
|
transition('hiddenAnimated => visibleAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
|
|
11241
11314
|
transition('void => visibleAnimated, visibleAnimated => void', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
|
|
11242
11315
|
])
|
|
11243
|
-
], template: "<ng-container>\n <div *ngIf=\"root
|
|
11316
|
+
], template: "<ng-container *ngIf=\"isVisible$ | async\">\n <div *ngIf=\"root\" class=\"layout-menuitem-root-text\">\n {{ item.label! | translate }}\n </div>\n <a\n *ngIf=\"!item.routerLink || item.items\"\n [attr.href]=\"item.href\"\n (click)=\"itemClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (keydown.enter)=\"itemClick($event)\"\n [routerLink]=\"item.routerLink\"\n [attr.target]=\"item.target\"\n [attr.tabindex]=\"0\"\n [ngClass]=\"item.className ?? ''\"\n pRipple>\n <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n </a>\n <a\n *ngIf=\"item.routerLink && !item.items\"\n (click)=\"itemClick($event)\"\n (mouseenter)=\"hover = true\"\n (mouseleave)=\"hover = false\"\n [routerLink]=\"item.routerLink\"\n routerLinkActive=\"active-menuitem-routerlink\"\n [attr.target]=\"item.target\"\n [attr.tabindex]=\"0\"\n [ngClass]=\"item.className ?? ''\"\n pRipple>\n <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\" *ngIf=\"item.items\"></i>\n <span class=\"menuitem-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n </a>\n <ul\n *ngIf=\"item.items || (item.items && (mngCommons.menuModeIsStatic$ | async) && root)\"\n [@children]=\"\n (mngCommons.menuModeIsSlim$ | async) && (mainLayoutService.isMobile$ | async) === false && root\n ? active\n ? 'visible'\n : 'hidden'\n : (mngCommons.menuModeIsStatic$ | async) && root && (mainLayoutService.isMobile$ | async) === false\n ? 'visible'\n : active\n ? 'visibleAnimated'\n : 'hiddenAnimated'\n \">\n <ng-template ngFor let-child let-i=\"index\" [ngForOf]=\"item.items\">\n <li mng-menuitem [item]=\"child\" [index]=\"i\" [parentKey]=\"key\" [class]=\"child.badgeClassName\" (visibleChange)=\"onChildVisibleChange($event, item, i)\"></li>\n </ng-template>\n </ul>\n</ng-container>\n" }]
|
|
11244
11317
|
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: MngAuthorizationService }, { type: MngCommonsService }, { type: MngMainLayoutComponentService }]; }, propDecorators: { item: [{
|
|
11245
11318
|
type: Input
|
|
11246
11319
|
}], index: [{
|
|
@@ -11249,9 +11322,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
11249
11322
|
type: Input
|
|
11250
11323
|
}], parentKey: [{
|
|
11251
11324
|
type: Input
|
|
11325
|
+
}], visibleChangeEventEmitter: [{
|
|
11326
|
+
type: Output,
|
|
11327
|
+
args: ['visibleChange']
|
|
11252
11328
|
}], hostClassNoPadding: [{
|
|
11253
11329
|
type: HostBinding,
|
|
11254
11330
|
args: ['class.py-0']
|
|
11331
|
+
}], hostClassChildrenHidden: [{
|
|
11332
|
+
type: HostBinding,
|
|
11333
|
+
args: ['class.hidden']
|
|
11255
11334
|
}] } });
|
|
11256
11335
|
|
|
11257
11336
|
class MngVersionService {
|
|
@@ -11349,7 +11428,7 @@ class MngMenuComponent {
|
|
|
11349
11428
|
}
|
|
11350
11429
|
}
|
|
11351
11430
|
MngMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngMenuComponent, deps: [{ token: MngCommonsService }, { token: MngMainLayoutComponentService }], target: i0.ɵɵFactoryTarget.Component });
|
|
11352
|
-
MngMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngMenuComponent, selector: "mng-menu", ngImport: i0, template: "<div\n class=\"layout-menu-wrapper\"\n [ngClass]=\"{'layout-sidebar-active': (mainLayoutService.sidebarActive$ | async)}\"\n (click)=\"mainLayoutService.onSidebarClick($event)\"\n (mouseover)=\"mainLayoutService.onSidebarMouseOver($event)\"\n (mouseleave)=\"mainLayoutService.onSidebarMouseLeave($event)\">\n <div class=\"menu-logo\">\n <a routerLink=\"/\" class=\"logo\">\n <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" />\n </a>\n\n <a routerLink=\"/\" class=\"app-name\" *ngIf=\"(mngCommons.menuModeIsSlim$ | async) === false || (mainLayoutService.isMobile$ | async)\">\n <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" />\n </a>\n <a *ngIf=\"mngCommons.menuPinEnabled\" class=\"menu-pin\" (click)=\"mainLayoutService.onToggleMenu($event)\">\n <span *ngIf=\"mngCommons.menuModeIsOverlay$ | async\" class=\"pi pi-times\"></span>\n <span\n *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) === false && (mainLayoutService.pinActive$ | async)\"\n class=\"pi pi-unlock\"></span>\n <span *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) && (mainLayoutService.pinActive$ | async)\" class=\"pi pi-lock\"></span>\n </a>\n </div>\n\n <div class=\"layout-menu-container\">\n <ul class=\"layout-menu\">\n <ng-container *ngFor=\"let item of mngCommons.menuItems; let i = index\">\n <li mng-menuitem *ngIf=\"!item.separator\" [item]=\"item\" [index]=\"i\" [root]=\"true\"></li>\n <li *ngIf=\"item.separator\" class=\"menu-separator\"></li>\n </ng-container>\n </ul>\n </div>\n\n <div class=\"menu-version\">\n <mng-version [version]=\"mngCommons.appVersion\"></mng-version>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "index", "root", "parentKey"] }, { kind: "component", type: MngVersionComponent, selector: "mng-version", inputs: ["version"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11431
|
+
MngMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: MngMenuComponent, selector: "mng-menu", ngImport: i0, template: "<div\n class=\"layout-menu-wrapper\"\n [ngClass]=\"{'layout-sidebar-active': (mainLayoutService.sidebarActive$ | async)}\"\n (click)=\"mainLayoutService.onSidebarClick($event)\"\n (mouseover)=\"mainLayoutService.onSidebarMouseOver($event)\"\n (mouseleave)=\"mainLayoutService.onSidebarMouseLeave($event)\">\n <div class=\"menu-logo\">\n <a routerLink=\"/\" class=\"logo\">\n <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" />\n </a>\n\n <a routerLink=\"/\" class=\"app-name\" *ngIf=\"(mngCommons.menuModeIsSlim$ | async) === false || (mainLayoutService.isMobile$ | async)\">\n <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" />\n </a>\n <a *ngIf=\"mngCommons.menuPinEnabled\" class=\"menu-pin\" (click)=\"mainLayoutService.onToggleMenu($event)\">\n <span *ngIf=\"mngCommons.menuModeIsOverlay$ | async\" class=\"pi pi-times\"></span>\n <span\n *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) === false && (mainLayoutService.pinActive$ | async)\"\n class=\"pi pi-unlock\"></span>\n <span *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) && (mainLayoutService.pinActive$ | async)\" class=\"pi pi-lock\"></span>\n </a>\n </div>\n\n <div class=\"layout-menu-container\">\n <ul class=\"layout-menu\">\n <ng-container *ngFor=\"let item of mngCommons.menuItems; let i = index\">\n <li mng-menuitem *ngIf=\"!item.separator\" [item]=\"item\" [index]=\"i\" [root]=\"true\"></li>\n <li *ngIf=\"item.separator\" class=\"menu-separator\"></li>\n </ng-container>\n </ul>\n </div>\n\n <div class=\"menu-version\">\n <mng-version [version]=\"mngCommons.appVersion\"></mng-version>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: MngMenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "index", "root", "parentKey"], outputs: ["visibleChange"] }, { kind: "component", type: MngVersionComponent, selector: "mng-version", inputs: ["version"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11353
11432
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MngMenuComponent, decorators: [{
|
|
11354
11433
|
type: Component,
|
|
11355
11434
|
args: [{ selector: 'mng-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"layout-menu-wrapper\"\n [ngClass]=\"{'layout-sidebar-active': (mainLayoutService.sidebarActive$ | async)}\"\n (click)=\"mainLayoutService.onSidebarClick($event)\"\n (mouseover)=\"mainLayoutService.onSidebarMouseOver($event)\"\n (mouseleave)=\"mainLayoutService.onSidebarMouseLeave($event)\">\n <div class=\"menu-logo\">\n <a routerLink=\"/\" class=\"logo\">\n <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" />\n </a>\n\n <a routerLink=\"/\" class=\"app-name\" *ngIf=\"(mngCommons.menuModeIsSlim$ | async) === false || (mainLayoutService.isMobile$ | async)\">\n <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" />\n </a>\n <a *ngIf=\"mngCommons.menuPinEnabled\" class=\"menu-pin\" (click)=\"mainLayoutService.onToggleMenu($event)\">\n <span *ngIf=\"mngCommons.menuModeIsOverlay$ | async\" class=\"pi pi-times\"></span>\n <span\n *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) === false && (mainLayoutService.pinActive$ | async)\"\n class=\"pi pi-unlock\"></span>\n <span *ngIf=\"(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) && (mainLayoutService.pinActive$ | async)\" class=\"pi pi-lock\"></span>\n </a>\n </div>\n\n <div class=\"layout-menu-container\">\n <ul class=\"layout-menu\">\n <ng-container *ngFor=\"let item of mngCommons.menuItems; let i = index\">\n <li mng-menuitem *ngIf=\"!item.separator\" [item]=\"item\" [index]=\"i\" [root]=\"true\"></li>\n <li *ngIf=\"item.separator\" class=\"menu-separator\"></li>\n </ng-container>\n </ul>\n </div>\n\n <div class=\"menu-version\">\n <mng-version [version]=\"mngCommons.appVersion\"></mng-version>\n </div>\n</div>\n" }]
|