@porscheinformatik/material-addons 10.3.0 → 10.3.3
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/bundles/porscheinformatik-material-addons.umd.js +27 -3
- package/bundles/porscheinformatik-material-addons.umd.js.map +1 -1
- package/bundles/porscheinformatik-material-addons.umd.min.js +2 -2
- package/bundles/porscheinformatik-material-addons.umd.min.js.map +1 -1
- package/esm2015/lib/table/column-header.js +1 -1
- package/esm2015/lib/table/table.component.js +2 -2
- package/esm2015/lib/toolbar/toolbar.component.js +13 -2
- package/esm2015/lib/toolbar/toolbar.service.js +15 -2
- package/fesm2015/porscheinformatik-material-addons.js +27 -3
- package/fesm2015/porscheinformatik-material-addons.js.map +1 -1
- package/lib/table/column-header.d.ts +1 -0
- package/lib/toolbar/toolbar.component.d.ts +3 -0
- package/lib/toolbar/toolbar.service.d.ts +6 -2
- package/package.json +1 -1
- package/porscheinformatik-material-addons.metadata.json +1 -1
|
@@ -1001,7 +1001,8 @@
|
|
|
1001
1001
|
this.translate = translate;
|
|
1002
1002
|
this.mainActions = []; // shown on the left, next to title, as big buttons
|
|
1003
1003
|
this.toolbarActions = []; // shown on the right as icons
|
|
1004
|
-
this.
|
|
1004
|
+
this.toolbarActionsAlwaysAsMenu = false; // show the mobile view (burger menu) for toolbar actions
|
|
1005
|
+
this.toolbarActionsMenuTitle = 'More'; // title of the burger menu
|
|
1005
1006
|
this.routerSubscription = this.router.events.subscribe(function (routingEvent) {
|
|
1006
1007
|
if (routingEvent instanceof i1.NavigationEnd) {
|
|
1007
1008
|
if (_this.currentUrl !== routingEvent.urlAfterRedirects) {
|
|
@@ -1045,6 +1046,12 @@
|
|
|
1045
1046
|
ToolbarService.prototype.setDataTitle = function (dataTitle) {
|
|
1046
1047
|
this.dataTitle = dataTitle;
|
|
1047
1048
|
};
|
|
1049
|
+
ToolbarService.prototype.setToolbarActionsAlwaysAsMenu = function (toolbarActionsAlwaysAsMenu) {
|
|
1050
|
+
this.toolbarActionsAlwaysAsMenu = toolbarActionsAlwaysAsMenu;
|
|
1051
|
+
};
|
|
1052
|
+
ToolbarService.prototype.getToolbarActionsAlwaysAsMenu = function () {
|
|
1053
|
+
return this.toolbarActionsAlwaysAsMenu;
|
|
1054
|
+
};
|
|
1048
1055
|
ToolbarService.prototype.getDataTitle = function () {
|
|
1049
1056
|
return this.dataTitle;
|
|
1050
1057
|
};
|
|
@@ -1057,6 +1064,12 @@
|
|
|
1057
1064
|
ToolbarService.prototype.getBackAction = function () {
|
|
1058
1065
|
return this.backAction;
|
|
1059
1066
|
};
|
|
1067
|
+
ToolbarService.prototype.setToolbarActionsMenuTitle = function (toolbarActionsMenuTitle) {
|
|
1068
|
+
this.toolbarActionsMenuTitle = toolbarActionsMenuTitle;
|
|
1069
|
+
};
|
|
1070
|
+
ToolbarService.prototype.getToolbarActionsMenuTitle = function () {
|
|
1071
|
+
return this.toolbarActionsMenuTitle;
|
|
1072
|
+
};
|
|
1060
1073
|
ToolbarService.prototype.addMainAction = function (mainAction) {
|
|
1061
1074
|
var _this = this;
|
|
1062
1075
|
this.translate
|
|
@@ -1149,12 +1162,23 @@
|
|
|
1149
1162
|
ToolbarComponent.prototype.getBackAction = function () {
|
|
1150
1163
|
return this.toolbarService.getBackAction();
|
|
1151
1164
|
};
|
|
1165
|
+
ToolbarComponent.prototype.getToolbarActionsAlwaysAsMenu = function () {
|
|
1166
|
+
return this.toolbarService.getToolbarActionsAlwaysAsMenu();
|
|
1167
|
+
};
|
|
1168
|
+
ToolbarComponent.prototype.getToolbarActionsMenuTitle = function () {
|
|
1169
|
+
return this.toolbarService.getToolbarActionsMenuTitle();
|
|
1170
|
+
};
|
|
1171
|
+
ToolbarComponent.prototype.showBadgeForMenu = function () {
|
|
1172
|
+
return this.getToolbarActions()
|
|
1173
|
+
.slice(1) // the first icon is not shown in menu
|
|
1174
|
+
.filter(function (value) { return value.badge && value.badge.value; }).length > 0;
|
|
1175
|
+
};
|
|
1152
1176
|
return ToolbarComponent;
|
|
1153
1177
|
}());
|
|
1154
1178
|
ToolbarComponent.decorators = [
|
|
1155
1179
|
{ type: i0.Component, args: [{
|
|
1156
1180
|
selector: 'mad-toolbar',
|
|
1157
|
-
template: "<mat-toolbar class=\"content-toolbar\">\n <a [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink()\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink()\">\n <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a (click)=\"getBackAction().action()\" *ngIf=\"isAction()\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n\n <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n <div *ngIf=\"!(isHandset$ | async)\">\n <a [routerLink]=\"mainAction.routerLink\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </mad-primary-button>\n </a>\n </div>\n <div *ngIf=\"isHandset$ | async\">\n <mad-material-action-button\n [actionName]=\"mainAction.actionName\"\n [icon]=\"mainAction.matIcon\"\n [liftHigher]=\"mainAction.liftHigherOnMobile\"\n [liftHigher2]=\"i > 0\"\n [routerLink]=\"mainAction.routerLink\"\n [id]=\"mainAction.matIcon\"\n >\n </mad-material-action-button>\n </div>\n </ng-container>\n </ng-container>\n\n <div class=\"right-aligned no-print\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <mad-icon-button\n (click)=\"action.action()\"\n *ngIf=\"!(isHandset$ | async) || i < (getToolbarActions().length > 2 ? 1 : 2)\"\n [id]=\"action.matIcon\"\n [matTooltip]=\"action.actionName\"\n type=\"button\"
|
|
1181
|
+
template: "<mat-toolbar class=\"content-toolbar\">\n <a [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink()\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink()\">\n <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a (click)=\"getBackAction().action()\" *ngIf=\"isAction()\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n\n <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n <div *ngIf=\"!(isHandset$ | async)\">\n <a [routerLink]=\"mainAction.routerLink\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </mad-primary-button>\n </a>\n </div>\n <div *ngIf=\"isHandset$ | async\">\n <mad-material-action-button\n [actionName]=\"mainAction.actionName\"\n [icon]=\"mainAction.matIcon\"\n [liftHigher]=\"mainAction.liftHigherOnMobile\"\n [liftHigher2]=\"i > 0\"\n [routerLink]=\"mainAction.routerLink\"\n [id]=\"mainAction.matIcon\"\n >\n </mad-material-action-button>\n </div>\n </ng-container>\n </ng-container>\n\n <div class=\"right-aligned no-print\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <mad-icon-button\n (click)=\"action.action()\"\n *ngIf=\"(!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) || i < (getToolbarActions().length > 2 ? 1 : 2)\"\n [id]=\"action.matIcon\"\n [matTooltip]=\"action.actionName\"\n type=\"button\">\n <mat-icon\n [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n matBadgePosition=\"below after\"\n [matBadge]=\"action.badge ? action.badge.value : null\"\n >{{ action.matIcon }}</mat-icon>\n </mad-icon-button>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n <ng-container *ngIf=\"getToolbarActions().length > 2\">\n <mad-icon-button type=\"button\" [matMenuTriggerFor]=\"burgerMenu\" [matTooltip]=\"getToolbarActionsMenuTitle()\">\n <mat-icon\n matBadgeColor=\"warn\"\n [matBadge]=\"showBadgeForMenu() ? '⁠' : null\"\n matBadgeSize=\"small\"\n matBadgePosition=\"above after\"\n >more_vert\n </mat-icon>\n </mad-icon-button>\n <mat-menu #burgerMenu=\"matMenu\" class=\"no-print\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <button *ngIf=\"i >= 1\" mat-menu-item (click)=\"action.action()\">\n <mat-icon\n color=\"primary\"\n [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n [matBadge]=\"action.badge ? action.badge.value : null\"\n matBadgePosition=\"below after\"\n >{{ action.matIcon }}</mat-icon\n >\n {{ action.actionName }}\n </button>\n </ng-container>\n </ng-container>\n </mat-menu>\n </ng-container>\n </ng-container>\n </div>\n</mat-toolbar>\n",
|
|
1158
1182
|
styles: ["mat-toolbar{background:#fff}.content-toolbar{border-bottom:1px solid #dcdcdc;height:57px}.right-aligned{margin-left:auto;margin-right:0;overflow:hidden}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}::ng-deep.mat-badge-content{bottom:-7px!important;right:-7px!important}"]
|
|
1159
1183
|
},] }
|
|
1160
1184
|
];
|
|
@@ -1858,7 +1882,7 @@
|
|
|
1858
1882
|
TableComponent.decorators = [
|
|
1859
1883
|
{ type: i0.Component, args: [{
|
|
1860
1884
|
selector: 'mad-table',
|
|
1861
|
-
template: "<!-- Table actions -->\n<div *ngIf=\"tableActions?.length\">\n <mad-primary-button class=\"table-action\" *ngFor=\"let tableAction of tableActions\" (click)=\"onTableAction(tableAction)\">\n {{ tableAction.label }}\n </mad-primary-button>\n</div>\n\n<!-- Row action buttons -->\n<mat-menu #menu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n {{ rowAction.label }}\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- Table filter -->\n<mat-form-field *ngIf=\"isFilterEnabled\">\n <mat-label>{{ filterLabel }}</mat-label>\n <input matInput (keyup)=\"onFilter($event?.target?.value)\" placeholder=\"{{ filterPlaceholder }}\" />\n</mat-form-field>\n\n<!-- Table -->\n<div *ngIf=\"dataSource?.data?.length > 0; else noData\" class=\"mad-table\">\n <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n <!-- Row actions column -->\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\" *ngIf=\"rowActions?.length\">\n <th mat-header-cell *matHeaderCellDef class=\"row-action-button\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n <mad-icon-button [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"menu\">\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n </td>\n </ng-container>\n <!-- Columns with data -->\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.label\">\n <ng-container *ngIf=\"column.isSortable; else noSort\">\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"{{ column.label }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n [class.text-right]=\"column.isRightAligned\"\n >\n {{ column.label }}\n </th>\n </ng-container>\n <ng-template #noSort>\n <th mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ column.label }}\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\">\n {{ element[column.dataPropertyName] }}\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"columnNames\"></tr>\n <tr\n mat-row\n [class.clickable-table-row]=\"isRowClickable\"\n (click)=\"onRowEvent($event, row)\"\n *matRowDef=\"let row; columns: columnNames\"\n ></tr>\n </table>\n
|
|
1885
|
+
template: "<!-- Table actions -->\n<div *ngIf=\"tableActions?.length\">\n <mad-primary-button class=\"table-action\" *ngFor=\"let tableAction of tableActions\" (click)=\"onTableAction(tableAction)\">\n {{ tableAction.label }}\n </mad-primary-button>\n</div>\n\n<!-- Row action buttons -->\n<mat-menu #menu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n {{ rowAction.label }}\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- Table filter -->\n<mat-form-field *ngIf=\"isFilterEnabled\">\n <mat-label>{{ filterLabel }}</mat-label>\n <input matInput (keyup)=\"onFilter($event?.target?.value)\" placeholder=\"{{ filterPlaceholder }}\" />\n</mat-form-field>\n\n<!-- Table -->\n<div *ngIf=\"dataSource?.data?.length > 0; else noData\" class=\"mad-table\">\n <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n <!-- Row actions column -->\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\" *ngIf=\"rowActions?.length\" sticky>\n <th mat-header-cell *matHeaderCellDef class=\"row-action-button\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n <mad-icon-button [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"menu\">\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n </td>\n </ng-container>\n <!-- Columns with data -->\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.label\" [sticky]=\"column.isSticky\">\n <ng-container *ngIf=\"column.isSortable; else noSort\">\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"{{ column.label }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n [class.text-right]=\"column.isRightAligned\"\n >\n {{ column.label }}\n </th>\n </ng-container>\n <ng-template #noSort>\n <th mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ column.label }}\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\">\n {{ element[column.dataPropertyName] }}\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"columnNames\"></tr>\n <tr\n mat-row\n [class.clickable-table-row]=\"isRowClickable\"\n (click)=\"onRowEvent($event, row)\"\n *matRowDef=\"let row; columns: columnNames\"\n ></tr>\n </table>\n</div>\n<!-- Pagination -->\n<mat-paginator\n [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n [pageSize]=\"defaultPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n showFirstLastButtons\n>\n</mat-paginator>\n\n<!-- No data alert -->\n<ng-template #noData>\n <div class=\"noDataText\">\n {{ noDataText }}\n </div>\n</ng-template>\n",
|
|
1862
1886
|
styles: [".text-right{text-align:right!important}.table-action{margin-bottom:.5em;margin-right:.5em}.row-action-button{width:10px}.noDataText{text-align:center;width:100%}.mad-table{overflow-x:auto;width:100%}"]
|
|
1863
1887
|
},] }
|
|
1864
1888
|
];
|