@porscheinformatik/material-addons 10.2.2 → 10.2.5
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 +17 -10
- package/bundles/porscheinformatik-material-addons.umd.js.map +1 -1
- package/bundles/porscheinformatik-material-addons.umd.min.js +1 -1
- package/bundles/porscheinformatik-material-addons.umd.min.js.map +1 -1
- package/esm2015/lib/flowbar/flowbar.component.js +7 -3
- package/esm2015/lib/stepper/step-header/step-header.component.js +3 -3
- package/esm2015/lib/stepper/stepper.component.js +8 -6
- package/esm2015/lib/toolbar/toolbar.component.js +2 -2
- package/fesm2015/porscheinformatik-material-addons.js +16 -10
- package/fesm2015/porscheinformatik-material-addons.js.map +1 -1
- package/lib/flowbar/flowbar.component.d.ts +1 -0
- package/lib/stepper/stepper.component.d.ts +1 -1
- package/package.json +1 -1
- package/porscheinformatik-material-addons.metadata.json +1 -1
- package/themes/common/styles.scss +2 -2
- package/themes/pbv.scss +2 -1
|
@@ -1154,7 +1154,7 @@
|
|
|
1154
1154
|
ToolbarComponent.decorators = [
|
|
1155
1155
|
{ type: i0.Component, args: [{
|
|
1156
1156
|
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\"\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\">\n <ng-container *ngIf=\"getToolbarActions().length > 2\">\n <
|
|
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\"\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\">\n <ng-container *ngIf=\"getToolbarActions().length > 2\">\n <mad-icon-button type=\"button\" [matMenuTriggerFor]=\"burgerMenu\" matTooltip=\"More\">\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n <mat-menu #burgerMenu=\"matMenu\">\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
1158
|
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
1159
|
},] }
|
|
1160
1160
|
];
|
|
@@ -2089,7 +2089,7 @@
|
|
|
2089
2089
|
StepHeaderComponent.decorators = [
|
|
2090
2090
|
{ type: i0.Component, args: [{
|
|
2091
2091
|
selector: 'mad-step-header',
|
|
2092
|
-
template: "<div
|
|
2092
|
+
template: "<div\n class=\"header\"\n fxLayout=\"row\"\n fxLayoutGap=\"1em\"\n [style.background]=\"this.selected && !this.closed ? '#d8e2e9' : '#ffffff'\"\n [ngClass]=\"this.hasError ? 'error-border' : 'check-border'\"\n>\n <div [ngClass]=\"this.getCssForState()\"></div>\n <div class=\"header-label\">\n <mat-icon class=\"material-icons-outlined\">\n {{ this.selected && !this.closed ? 'keyboard_arrow_down' : 'keyboard_arrow_right' }}\n </mat-icon>\n </div>\n <div *ngIf=\"this.completed || this.hasError\" class=\"header-label\">\n <mat-icon [ngClass]=\"this.completed ? 'green-check' : 'red-error'\">\n {{ getIcon() }}\n </mat-icon>\n </div>\n <span *ngIf=\"!this.hasError && !this.completed\" class=\"header-label\">{{ this.index + 1 + '.' }}</span>\n <div class=\"header-label\">{{ this.label }}</div>\n</div>\n",
|
|
2093
2093
|
inputs: ['color'],
|
|
2094
2094
|
host: {
|
|
2095
2095
|
'class': 'mad-step-header',
|
|
@@ -2097,7 +2097,7 @@
|
|
|
2097
2097
|
},
|
|
2098
2098
|
encapsulation: i0.ViewEncapsulation.None,
|
|
2099
2099
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
2100
|
-
styles: [".header{-webkit-tap-highlight-color:transparent;border:1px solid #d3d3d3;box-sizing:content-box;cursor:pointer;height:62px;outline
|
|
2100
|
+
styles: [".header{-webkit-tap-highlight-color:transparent;border:1px solid #d3d3d3;box-sizing:content-box;cursor:pointer;height:62px;outline:var(--warn-color);overflow:hidden;width:100%}.header-label{align-items:center;display:flex}.step-state-complete{background:green;width:5px}.step-state-error{background:var(--warn-color);width:5px}.step-state-neutral{background:#d3d3d3;width:5px}.green-check{color:green}.red-error{color:var(--warn-color)}.check-border{border-color:#d3d3d3}.error-border{border-color:var(--warn-color)}"]
|
|
2101
2101
|
},] }
|
|
2102
2102
|
];
|
|
2103
2103
|
StepHeaderComponent.ctorParameters = function () { return [
|
|
@@ -2154,8 +2154,9 @@
|
|
|
2154
2154
|
StepComponent.prototype.ngOnDestroy = function () {
|
|
2155
2155
|
this._isSelected.unsubscribe();
|
|
2156
2156
|
};
|
|
2157
|
-
StepComponent.prototype.next = function () {
|
|
2158
|
-
|
|
2157
|
+
StepComponent.prototype.next = function (markFormAsTouched) {
|
|
2158
|
+
if (markFormAsTouched === void 0) { markFormAsTouched = true; }
|
|
2159
|
+
this.stepValidation(markFormAsTouched);
|
|
2159
2160
|
if (this.onNext.observers.length <= 0) {
|
|
2160
2161
|
this.stepper.next();
|
|
2161
2162
|
}
|
|
@@ -2172,7 +2173,7 @@
|
|
|
2172
2173
|
this.onHeaderClick.emit(index);
|
|
2173
2174
|
};
|
|
2174
2175
|
StepComponent.prototype.completeLast = function () {
|
|
2175
|
-
this.stepValidation();
|
|
2176
|
+
this.stepValidation(true);
|
|
2176
2177
|
this.stepClosed = true;
|
|
2177
2178
|
if (this.onDone.observers.length <= 0) {
|
|
2178
2179
|
this.stepper.next();
|
|
@@ -2184,9 +2185,11 @@
|
|
|
2184
2185
|
this.completed = true;
|
|
2185
2186
|
this.state = stepper.STEP_STATE.DONE;
|
|
2186
2187
|
};
|
|
2187
|
-
StepComponent.prototype.stepValidation = function () {
|
|
2188
|
+
StepComponent.prototype.stepValidation = function (markFormAsTouched) {
|
|
2188
2189
|
var _a, _b;
|
|
2189
|
-
(
|
|
2190
|
+
if (markFormAsTouched) {
|
|
2191
|
+
(_a = this.stepControl) === null || _a === void 0 ? void 0 : _a.markAllAsTouched();
|
|
2192
|
+
}
|
|
2190
2193
|
if ((_b = this.stepControl) === null || _b === void 0 ? void 0 : _b.valid) {
|
|
2191
2194
|
this.hasError = false;
|
|
2192
2195
|
this.completed = true;
|
|
@@ -2445,6 +2448,10 @@
|
|
|
2445
2448
|
FlowbarComponent.prototype.ngAfterViewInit = function () {
|
|
2446
2449
|
this.stepper._getIndicatorType = function () { return 'number'; };
|
|
2447
2450
|
};
|
|
2451
|
+
FlowbarComponent.prototype.getIndexForActiveStep = function () {
|
|
2452
|
+
var selectedIndex = this._steps.indexOf(this._activeStep);
|
|
2453
|
+
return selectedIndex === -1 ? 0 : selectedIndex;
|
|
2454
|
+
};
|
|
2448
2455
|
FlowbarComponent.prototype.changeActiveStep = function (step) {
|
|
2449
2456
|
var previousIndex = this._steps.indexOf(this._activeStep);
|
|
2450
2457
|
this._activeStep = step;
|
|
@@ -2597,8 +2604,8 @@
|
|
|
2597
2604
|
FlowbarComponent.decorators = [
|
|
2598
2605
|
{ type: i0.Component, args: [{
|
|
2599
2606
|
selector: 'mad-flowbar',
|
|
2600
|
-
template: "<div class=\"stepper-container\">\n <mat-horizontal-stepper #stepper (click)=\"triggerClick()\">\n <mat-step *ngFor=\"let step of _steps\" [aria-labelledby]=\"!step.enabled ? 'disabled' : null\">\n <ng-template matStepLabel>\n <div class=\"step-header-overlay\" *ngIf=\"this._headerClick.observers.length > 0\" (click)=\"headerClick($event, step)\"></div>\n <span>{{step.label}}</span>\n </ng-template>\n </mat-step>\n </mat-horizontal-stepper>\n</div>\n",
|
|
2601
|
-
styles: [".stepper-container{display:flex;padding:0 1rem}::ng-deep .mat-stepper-horizontal .mat-horizontal-stepper-header{height:auto;padding:0}::ng-deep .mat-step-header[aria-labelledby=disabled]{cursor:not-allowed;pointer-events:none!important}::ng-deep .mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 10px}::ng-deep .mat-stepper-horizontal .mat-stepper-horizontal-line{border-top-width:4px;margin:0 5px}.step-header-overlay{height:100%;position:absolute;width:100%}"]
|
|
2607
|
+
template: "<div class=\"stepper-container\">\n <mat-horizontal-stepper #stepper [selectedIndex]=\"this.getIndexForActiveStep()\" (click)=\"triggerClick()\">\n <mat-step *ngFor=\"let step of _steps\" [aria-labelledby]=\"!step.enabled ? 'disabled' : null\">\n <ng-template matStepLabel>\n <div class=\"step-header-overlay\" *ngIf=\"this._headerClick.observers.length > 0\" (click)=\"headerClick($event, step)\"></div>\n <span>{{step.label}}</span>\n </ng-template>\n </mat-step>\n </mat-horizontal-stepper>\n</div>\n",
|
|
2608
|
+
styles: [".stepper-container{display:flex;padding:0 1rem}::ng-deep .mat-stepper-horizontal .mat-horizontal-stepper-header{height:auto;padding:0}::ng-deep .mat-step-header[aria-labelledby=disabled]{cursor:not-allowed;pointer-events:none!important}::ng-deep .mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 10px}::ng-deep .mat-stepper-horizontal .mat-stepper-horizontal-line{border-top-width:4px;margin:0 5px}.step-header-overlay{height:100%;position:absolute;right:0;top:0;width:100%}"]
|
|
2602
2609
|
},] }
|
|
2603
2610
|
];
|
|
2604
2611
|
FlowbarComponent.propDecorators = {
|