@porscheinformatik/material-addons 19.0.7 → 19.0.8
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/fesm2022/porscheinformatik-material-addons.mjs +13 -2
- package/fesm2022/porscheinformatik-material-addons.mjs.map +1 -1
- package/lib/layout/toolbar/toolbar-action.interface.d.ts +2 -0
- package/lib/layout/toolbar/toolbar-action.interface.d.ts.map +1 -1
- package/lib/layout/toolbar/toolbar.service.d.ts +5 -1
- package/lib/layout/toolbar/toolbar.service.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -3951,6 +3951,17 @@ class ToolbarService {
|
|
|
3951
3951
|
this.backAction.href = goBackRoute;
|
|
3952
3952
|
}
|
|
3953
3953
|
}
|
|
3954
|
+
/**
|
|
3955
|
+
* Only supports routerLink (no href), but with additional query parameters
|
|
3956
|
+
*/
|
|
3957
|
+
addBackActionRoute(goBackRoute, queryParams) {
|
|
3958
|
+
this.backAction = {
|
|
3959
|
+
matIcon: 'keyboard_backspace',
|
|
3960
|
+
i18nActionKey: '',
|
|
3961
|
+
routerLink: goBackRoute,
|
|
3962
|
+
queryParams: queryParams || {},
|
|
3963
|
+
};
|
|
3964
|
+
}
|
|
3954
3965
|
addSimpleBackButton(overrideIfPresent = false) {
|
|
3955
3966
|
if (this.getBackAction() && !overrideIfPresent) {
|
|
3956
3967
|
return;
|
|
@@ -4028,7 +4039,7 @@ class ToolbarComponent {
|
|
|
4028
4039
|
return this.getToolbarActions().filter((value) => !!value.importantAction).length > 0;
|
|
4029
4040
|
}
|
|
4030
4041
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$a.BreakpointObserver }, { token: i2$4.Title }, { token: ToolbarService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4031
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: ToolbarComponent, isStandalone: true, selector: "mad-toolbar", ngImport: i0, template: "<mat-toolbar class=\"content-toolbar\">\n <a
|
|
4042
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: ToolbarComponent, isStandalone: true, selector: "mad-toolbar", ngImport: i0, template: "<mat-toolbar class=\"content-toolbar\">\n <a\n data-cy=\"back-link-button\"\n [routerLink]=\"getBackAction().routerLink\"\n [queryParams]=\"getBackAction().queryParams\"\n *ngIf=\"isRouterLink(getBackAction())\"\n >\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 data-cy=\"back-href-button\" [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink(getBackAction())\">\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 data-cy=\"back-action-button\" (click)=\"getBackAction().action()\" *ngIf=\"isAction(getBackAction())\">\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 data-cy=\"main-action-link-button\" [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n <div class=\"action-button-content-container\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </div>\n </mad-primary-button>\n </a>\n <a data-cy=\"main-action-button\" (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n <div class=\"action-button-content-container\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </div>\n </mad-primary-button>\n </a>\n </div>\n <div *ngIf=\"isHandset$ | async\">\n <mad-material-action-button\n data-cy=\"material-main-link-button\"\n *ngIf=\"isRouterLink(getBackAction())\"\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 data-cy=\"material-main-action-button\"\n *ngIf=\"isAction(getBackAction())\"\n [actionName]=\"mainAction.actionName\"\n [icon]=\"mainAction.matIcon\"\n [liftHigher]=\"mainAction.liftHigherOnMobile\"\n [liftHigher2]=\"i > 0\"\n (click)=\"mainAction.action()\"\n [id]=\"mainAction.matIcon\"\n />\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 data-cy=\"action-icon-button\"\n (click)=\"action.action()\"\n *ngIf=\"\n (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n !!action.importantAction\n \"\n [id]=\"action.matIcon\"\n [matTooltip]=\"action.actionName\"\n type=\"button\"\n >\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 >\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 data-cy=\"burger-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 toolbar-menu\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"!action.importantAction\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <button\n data-cy=\"burger-menu-button\"\n *ngIf=\"i >= (hasImportantToolbarActions() ? 0 : 1)\"\n mat-menu-item\n (click)=\"action.action()\"\n [title]=\"action.actionName\"\n >\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 </ng-container>\n </mat-menu>\n </ng-container>\n </ng-container>\n </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:#fff}.content-toolbar{height:57px;border-bottom:1px solid #dcdcdc}.right-aligned{overflow:hidden;margin-left:auto;margin-right:0}.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}.action-button-content-container{display:flex;align-items:center;gap:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MaterialActionButtonComponent, selector: "mad-material-action-button", inputs: ["actionName", "id", "icon", "routerLink", "liftHigher", "liftHigher2"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i18.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
4032
4043
|
}
|
|
4033
4044
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
4034
4045
|
type: Component,
|
|
@@ -4046,7 +4057,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
|
|
|
4046
4057
|
MatBadgeModule,
|
|
4047
4058
|
MatMenuModule,
|
|
4048
4059
|
AsyncPipe,
|
|
4049
|
-
], template: "<mat-toolbar class=\"content-toolbar\">\n <a
|
|
4060
|
+
], template: "<mat-toolbar class=\"content-toolbar\">\n <a\n data-cy=\"back-link-button\"\n [routerLink]=\"getBackAction().routerLink\"\n [queryParams]=\"getBackAction().queryParams\"\n *ngIf=\"isRouterLink(getBackAction())\"\n >\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 data-cy=\"back-href-button\" [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink(getBackAction())\">\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 data-cy=\"back-action-button\" (click)=\"getBackAction().action()\" *ngIf=\"isAction(getBackAction())\">\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 data-cy=\"main-action-link-button\" [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n <div class=\"action-button-content-container\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </div>\n </mad-primary-button>\n </a>\n <a data-cy=\"main-action-button\" (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n <div class=\"action-button-content-container\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </div>\n </mad-primary-button>\n </a>\n </div>\n <div *ngIf=\"isHandset$ | async\">\n <mad-material-action-button\n data-cy=\"material-main-link-button\"\n *ngIf=\"isRouterLink(getBackAction())\"\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 data-cy=\"material-main-action-button\"\n *ngIf=\"isAction(getBackAction())\"\n [actionName]=\"mainAction.actionName\"\n [icon]=\"mainAction.matIcon\"\n [liftHigher]=\"mainAction.liftHigherOnMobile\"\n [liftHigher2]=\"i > 0\"\n (click)=\"mainAction.action()\"\n [id]=\"mainAction.matIcon\"\n />\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 data-cy=\"action-icon-button\"\n (click)=\"action.action()\"\n *ngIf=\"\n (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n !!action.importantAction\n \"\n [id]=\"action.matIcon\"\n [matTooltip]=\"action.actionName\"\n type=\"button\"\n >\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 >\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 data-cy=\"burger-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 toolbar-menu\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"!action.importantAction\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <button\n data-cy=\"burger-menu-button\"\n *ngIf=\"i >= (hasImportantToolbarActions() ? 0 : 1)\"\n mat-menu-item\n (click)=\"action.action()\"\n [title]=\"action.actionName\"\n >\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 </ng-container>\n </mat-menu>\n </ng-container>\n </ng-container>\n </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:#fff}.content-toolbar{height:57px;border-bottom:1px solid #dcdcdc}.right-aligned{overflow:hidden;margin-left:auto;margin-right:0}.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}.action-button-content-container{display:flex;align-items:center;gap:5px}\n"] }]
|
|
4050
4061
|
}], ctorParameters: () => [{ type: i1$a.BreakpointObserver }, { type: i2$4.Title }, { type: ToolbarService }] });
|
|
4051
4062
|
|
|
4052
4063
|
class ToolbarModule {
|