@porscheinformatik/material-addons 15.0.0-alpha.3 → 15.0.0
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/card/card.component.mjs +3 -3
- package/esm2020/lib/quick-list/quick-list-compact/quick-list-compact.component.mjs +3 -3
- package/esm2020/lib/quick-list/quick-list.component.mjs +3 -3
- package/esm2020/lib/readonly/readonly-form-field/readonly-form-field.component.mjs +3 -3
- package/esm2020/lib/stepper/step-header/step-header.component.mjs +2 -3
- package/esm2020/lib/stepper/stepper.component.mjs +8 -9
- package/esm2020/lib/stepper/stepper.module.mjs +4 -5
- package/fesm2015/porscheinformatik-material-addons.mjs +16 -18
- package/fesm2015/porscheinformatik-material-addons.mjs.map +1 -1
- package/fesm2020/porscheinformatik-material-addons.mjs +16 -18
- package/fesm2020/porscheinformatik-material-addons.mjs.map +1 -1
- package/lib/stepper/stepper.module.d.ts +2 -3
- package/lib/stepper/stepper.module.d.ts.map +1 -1
- package/package.json +6 -6
- package/themes/common/styles.scss +26 -7
- package/themes/pbv.scss +9 -0
- package/themes/poa.scss +28 -3
|
@@ -50,9 +50,7 @@ import * as i13 from '@angular/material/checkbox';
|
|
|
50
50
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
51
51
|
import { CdkStepHeader, STEP_STATE, CdkStep, CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
|
|
52
52
|
import * as i1$5 from '@angular/cdk/a11y';
|
|
53
|
-
import * as
|
|
54
|
-
import { FlexModule } from '@angular/flex-layout';
|
|
55
|
-
import * as i4$2 from '@angular/cdk/bidi';
|
|
53
|
+
import * as i3$1 from '@angular/cdk/bidi';
|
|
56
54
|
import * as i2$4 from '@angular/material/stepper';
|
|
57
55
|
import { MatStepperModule } from '@angular/material/stepper';
|
|
58
56
|
|
|
@@ -505,10 +503,10 @@ class ReadOnlyFormFieldComponent {
|
|
|
505
503
|
}
|
|
506
504
|
}
|
|
507
505
|
ReadOnlyFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ReadOnlyFormFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: NumberFormatService }], target: i0.ɵɵFactoryTarget.Component });
|
|
508
|
-
ReadOnlyFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ReadOnlyFormFieldComponent, selector: "mad-readonly-form-field", inputs: { value: "value", label: "label", textAlign: "textAlign", formatNumber: "formatNumber", decimalPlaces: "decimalPlaces", roundValue: ["roundDisplayValue", "roundValue"], autofillDecimals: "autofillDecimals", unit: "unit", unitPosition: "unitPosition", errorMessage: "errorMessage", multiline: "multiline", rows: "rows", id: "id", shrinkIfEmpty: "shrinkIfEmpty" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"form-group\">\n <mat-label>{{ label }}</mat-label>\n <input\n *ngIf=\"!multiline\"\n [ngModel]=\"value\"\n [ngClass]=\"'text-' + textAlign\"\n [errorStateMatcher]=\"errorMatcher\"\n [id]=\"id\"\n readonly\n disabled\n matInput\n #inputEl\n />\n\n <textarea\n *ngIf=\"multiline\"\n [rows]=\"rows\"\n [ngModel]=\"value\"\n class=\"multiline\"\n [errorStateMatcher]=\"errorMatcher\"\n [id]=\"id\"\n readonly\n disabled\n matInput\n ></textarea>\n <mat-error>{{ errorMessage }}</mat-error>\n</mat-form-field>\n", styles: ["mat-form-field{width:100%;width:-webkit-fill-available;width:-moz-available;width:stretch}mat-label{line-height:1.4}span[matPrefix]{padding-right:5px}span[matSuffix]{padding-left:5px}.text-left{text-align:left}.text-right{text-align:right}.multiline{resize:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
506
|
+
ReadOnlyFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ReadOnlyFormFieldComponent, selector: "mad-readonly-form-field", inputs: { value: "value", label: "label", textAlign: "textAlign", formatNumber: "formatNumber", decimalPlaces: "decimalPlaces", roundValue: ["roundDisplayValue", "roundValue"], autofillDecimals: "autofillDecimals", unit: "unit", unitPosition: "unitPosition", errorMessage: "errorMessage", multiline: "multiline", rows: "rows", id: "id", shrinkIfEmpty: "shrinkIfEmpty" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"form-group mad-read-only\">\n <mat-label>{{ label }}</mat-label>\n <input\n *ngIf=\"!multiline\"\n [ngModel]=\"value\"\n [ngClass]=\"'text-' + textAlign + ' content'\"\n [errorStateMatcher]=\"errorMatcher\"\n [id]=\"id\"\n readonly\n disabled\n matInput\n #inputEl\n />\n\n <textarea\n *ngIf=\"multiline\"\n [rows]=\"rows\"\n [ngModel]=\"value\"\n class=\"multiline content\"\n [errorStateMatcher]=\"errorMatcher\"\n [id]=\"id\"\n readonly\n disabled\n matInput\n ></textarea>\n <mat-error>{{ errorMessage }}</mat-error>\n</mat-form-field>\n", styles: ["mat-form-field{width:100%;width:-webkit-fill-available;width:-moz-available;width:stretch}mat-label{line-height:1.4}span[matPrefix]{padding-right:5px}span[matSuffix]{padding-left:5px}.text-left{text-align:left}.text-right{text-align:right}.multiline{resize:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
509
507
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ReadOnlyFormFieldComponent, decorators: [{
|
|
510
508
|
type: Component,
|
|
511
|
-
args: [{ selector: 'mad-readonly-form-field', template: "<mat-form-field class=\"form-group\">\n <mat-label>{{ label }}</mat-label>\n <input\n *ngIf=\"!multiline\"\n [ngModel]=\"value\"\n [ngClass]=\"'text-' + textAlign\"\n [errorStateMatcher]=\"errorMatcher\"\n [id]=\"id\"\n readonly\n disabled\n matInput\n #inputEl\n />\n\n <textarea\n *ngIf=\"multiline\"\n [rows]=\"rows\"\n [ngModel]=\"value\"\n class=\"multiline\"\n [errorStateMatcher]=\"errorMatcher\"\n [id]=\"id\"\n readonly\n disabled\n matInput\n ></textarea>\n <mat-error>{{ errorMessage }}</mat-error>\n</mat-form-field>\n", styles: ["mat-form-field{width:100%;width:-webkit-fill-available;width:-moz-available;width:stretch}mat-label{line-height:1.4}span[matPrefix]{padding-right:5px}span[matSuffix]{padding-left:5px}.text-left{text-align:left}.text-right{text-align:right}.multiline{resize:none}\n"] }]
|
|
509
|
+
args: [{ selector: 'mad-readonly-form-field', template: "<mat-form-field class=\"form-group mad-read-only\">\n <mat-label>{{ label }}</mat-label>\n <input\n *ngIf=\"!multiline\"\n [ngModel]=\"value\"\n [ngClass]=\"'text-' + textAlign + ' content'\"\n [errorStateMatcher]=\"errorMatcher\"\n [id]=\"id\"\n readonly\n disabled\n matInput\n #inputEl\n />\n\n <textarea\n *ngIf=\"multiline\"\n [rows]=\"rows\"\n [ngModel]=\"value\"\n class=\"multiline content\"\n [errorStateMatcher]=\"errorMatcher\"\n [id]=\"id\"\n readonly\n disabled\n matInput\n ></textarea>\n <mat-error>{{ errorMessage }}</mat-error>\n</mat-form-field>\n", styles: ["mat-form-field{width:100%;width:-webkit-fill-available;width:-moz-available;width:stretch}mat-label{line-height:1.4}span[matPrefix]{padding-right:5px}span[matSuffix]{padding-left:5px}.text-left{text-align:left}.text-right{text-align:right}.multiline{resize:none}\n"] }]
|
|
512
510
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: NumberFormatService }]; }, propDecorators: { value: [{
|
|
513
511
|
type: Input,
|
|
514
512
|
args: ['value']
|
|
@@ -1346,7 +1344,7 @@ class CardComponent {
|
|
|
1346
1344
|
}
|
|
1347
1345
|
}
|
|
1348
1346
|
CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1349
|
-
CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: CardComponent, selector: "mad-card", inputs: { cancelDisabled: "cancelDisabled", cancelText: "cancelText", readonly: "readonly", editText: "editText", expandable: "expandable", expanded: "expanded", saveDisabled: "saveDisabled", saveText: "saveText", title: "title", editMode: "editMode", additionalActionIcon: "additionalActionIcon", additionalActionText: "additionalActionText" }, outputs: { edit: "edit", cancel: "cancel", save: "save", additionalAction: "additionalAction" }, ngImport: i0, template: "<mat-card
|
|
1347
|
+
CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: CardComponent, selector: "mad-card", inputs: { cancelDisabled: "cancelDisabled", cancelText: "cancelText", readonly: "readonly", editText: "editText", expandable: "expandable", expanded: "expanded", saveDisabled: "saveDisabled", saveText: "saveText", title: "title", editMode: "editMode", additionalActionIcon: "additionalActionIcon", additionalActionText: "additionalActionText" }, outputs: { edit: "edit", cancel: "cancel", save: "save", additionalAction: "additionalAction" }, ngImport: i0, template: "<mat-card>\n <mat-card-header>\n <mat-card-title-group>\n <mat-card-title class=\"small-title-container\">{{ title }}</mat-card-title>\n <div mat-card-sm-image class=\"top-right-icons\">\n <mad-icon-button (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n </mad-icon-button>\n <mad-icon-button (click)=\"additionalActionClicked()\" *ngIf=\"additionalActionIcon\" [title]=\"additionalActionText\" type=\"button\">\n <mat-icon>{{additionalActionIcon}}</mat-icon>\n </mad-icon-button>\n <mad-icon-button [title]=\"editText\" (click)=\"onEdit()\" *ngIf=\"!readonly && !editMode\">\n <mat-icon>create</mat-icon>\n </mad-icon-button>\n </div>\n </mat-card-title-group>\n </mat-card-header>\n <mat-card-content [@collapseExpandAnimation] *ngIf=\"expanded\">\n <ng-content></ng-content>\n </mat-card-content>\n <mat-card-actions *ngIf=\"!readonly && editMode\">\n <mad-primary-button [title]=\"saveText\" [disabled]=\"saveDisabled\" (throttleClick)=\"onSave()\" madThrottleClick>\n {{ saveText }}\n </mad-primary-button>\n <mad-outline-button [title]=\"cancelText\" [disabled]=\"cancelDisabled\" (click)=\"onCancel()\">\n {{ cancelText }}\n </mad-outline-button>\n </mat-card-actions>\n</mat-card>\n", styles: [".top-right-icons{text-align:end;width:-moz-fit-content;width:fit-content}.small-title-container{margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i2$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$3.MatCardSmImage, selector: "[mat-card-sm-image], [matCardImageSmall]" }, { kind: "directive", type: i2$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i2$3.MatCardTitleGroup, selector: "mat-card-title-group" }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "directive", type: ThrottleClickDirective, selector: "[madThrottleClick]", inputs: ["throttleTime"], outputs: ["throttleClick"] }], animations: [
|
|
1350
1348
|
trigger('collapseExpandAnimation', [
|
|
1351
1349
|
transition(':enter', [
|
|
1352
1350
|
style({ opacity: 0, height: 0, overflow: 'hidden' }),
|
|
@@ -1395,7 +1393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
1395
1393
|
transition('true => false', animate('100ms ease-out')),
|
|
1396
1394
|
transition('false => true', animate('100ms ease-in')),
|
|
1397
1395
|
]),
|
|
1398
|
-
], template: "<mat-card
|
|
1396
|
+
], template: "<mat-card>\n <mat-card-header>\n <mat-card-title-group>\n <mat-card-title class=\"small-title-container\">{{ title }}</mat-card-title>\n <div mat-card-sm-image class=\"top-right-icons\">\n <mad-icon-button (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n </mad-icon-button>\n <mad-icon-button (click)=\"additionalActionClicked()\" *ngIf=\"additionalActionIcon\" [title]=\"additionalActionText\" type=\"button\">\n <mat-icon>{{additionalActionIcon}}</mat-icon>\n </mad-icon-button>\n <mad-icon-button [title]=\"editText\" (click)=\"onEdit()\" *ngIf=\"!readonly && !editMode\">\n <mat-icon>create</mat-icon>\n </mad-icon-button>\n </div>\n </mat-card-title-group>\n </mat-card-header>\n <mat-card-content [@collapseExpandAnimation] *ngIf=\"expanded\">\n <ng-content></ng-content>\n </mat-card-content>\n <mat-card-actions *ngIf=\"!readonly && editMode\">\n <mad-primary-button [title]=\"saveText\" [disabled]=\"saveDisabled\" (throttleClick)=\"onSave()\" madThrottleClick>\n {{ saveText }}\n </mad-primary-button>\n <mad-outline-button [title]=\"cancelText\" [disabled]=\"cancelDisabled\" (click)=\"onCancel()\">\n {{ cancelText }}\n </mad-outline-button>\n </mat-card-actions>\n</mat-card>\n", styles: [".top-right-icons{text-align:end;width:-moz-fit-content;width:fit-content}.small-title-container{margin-top:8px}\n"] }]
|
|
1399
1397
|
}], propDecorators: { cancelDisabled: [{
|
|
1400
1398
|
type: Input
|
|
1401
1399
|
}], cancelText: [{
|
|
@@ -1564,10 +1562,10 @@ class QuickListCompactComponent extends BaseQuickListComponent {
|
|
|
1564
1562
|
}
|
|
1565
1563
|
}
|
|
1566
1564
|
QuickListCompactComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: QuickListCompactComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1567
|
-
QuickListCompactComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: QuickListCompactComponent, selector: "mad-quick-list-compact", usesInheritance: true, ngImport: i0, template: "<h3>\n <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems; let isLast = last;\">\n <div class=\"flex-container\" *ngIf=\"itemTemplate\" #row>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n <mad-icon-button *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n <mad-icon-button *ngIf=\"!readonly && isLast\" [disabled]=\"!isAddAllowed()\" (click)=\"addItem()\">\n <mat-icon>add_circle_outline</mat-icon>\n </mad-icon-button>\n </div>\n</ng-container>\n<mad-link-button *ngIf=\"!readonly && !this.allItems.length\"\n (click)=\"addItem()\"\n [disabled]=\"!isAddAllowed()\">\n {{ addLabel }}\n</mad-link-button>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LinkButtonComponent, selector: "mad-link-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }] });
|
|
1565
|
+
QuickListCompactComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: QuickListCompactComponent, selector: "mad-quick-list-compact", usesInheritance: true, ngImport: i0, template: "<h3>\n <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems; let isLast = last;\">\n <div class=\"flex-container\" *ngIf=\"itemTemplate\" #row style=\"display: flex; flex-direction: row;\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n <mad-icon-button *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n <mad-icon-button *ngIf=\"!readonly && isLast\" [disabled]=\"!isAddAllowed()\" (click)=\"addItem()\">\n <mat-icon>add_circle_outline</mat-icon>\n </mad-icon-button>\n </div>\n</ng-container>\n<mad-link-button *ngIf=\"!readonly && !this.allItems.length\"\n (click)=\"addItem()\"\n [disabled]=\"!isAddAllowed()\">\n {{ addLabel }}\n</mad-link-button>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LinkButtonComponent, selector: "mad-link-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }] });
|
|
1568
1566
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: QuickListCompactComponent, decorators: [{
|
|
1569
1567
|
type: Component,
|
|
1570
|
-
args: [{ selector: 'mad-quick-list-compact', template: "<h3>\n <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems; let isLast = last;\">\n <div class=\"flex-container\" *ngIf=\"itemTemplate\" #row>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n <mad-icon-button *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n <mad-icon-button *ngIf=\"!readonly && isLast\" [disabled]=\"!isAddAllowed()\" (click)=\"addItem()\">\n <mat-icon>add_circle_outline</mat-icon>\n </mad-icon-button>\n </div>\n</ng-container>\n<mad-link-button *ngIf=\"!readonly && !this.allItems.length\"\n (click)=\"addItem()\"\n [disabled]=\"!isAddAllowed()\">\n {{ addLabel }}\n</mad-link-button>\n" }]
|
|
1568
|
+
args: [{ selector: 'mad-quick-list-compact', template: "<h3>\n <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems; let isLast = last;\">\n <div class=\"flex-container\" *ngIf=\"itemTemplate\" #row style=\"display: flex; flex-direction: row;\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n <mad-icon-button *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n <mad-icon-button *ngIf=\"!readonly && isLast\" [disabled]=\"!isAddAllowed()\" (click)=\"addItem()\">\n <mat-icon>add_circle_outline</mat-icon>\n </mad-icon-button>\n </div>\n</ng-container>\n<mad-link-button *ngIf=\"!readonly && !this.allItems.length\"\n (click)=\"addItem()\"\n [disabled]=\"!isAddAllowed()\">\n {{ addLabel }}\n</mad-link-button>\n" }]
|
|
1571
1569
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
|
|
1572
1570
|
|
|
1573
1571
|
// Based on https://github.com/porscheinformatik/clarity-addons/blob/master/src/clr-addons/generic-quick-list/generic-quick-list.ts
|
|
@@ -1578,10 +1576,10 @@ class QuickListComponent extends BaseQuickListComponent {
|
|
|
1578
1576
|
}
|
|
1579
1577
|
}
|
|
1580
1578
|
QuickListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: QuickListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1581
|
-
QuickListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: QuickListComponent, selector: "mad-quick-list", usesInheritance: true, ngImport: i0, template: "<h3>\n <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems\">\n <div *ngIf=\"itemTemplate\" #row>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n <mad-icon-button *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n </div>\n</ng-container>\n<mad-outline-button *ngIf=\"!readonly\" (click)=\"addItem()\"\n [disabled]=\"!addPossible || !isAddAllowed()\">\n {{ addLabel }}\n</mad-outline-button>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }] });
|
|
1579
|
+
QuickListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: QuickListComponent, selector: "mad-quick-list", usesInheritance: true, ngImport: i0, template: "<h3>\n <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems\">\n <div *ngIf=\"itemTemplate\" #row style=\"display: flex; flex-direction: row;\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n <mad-icon-button *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n </div>\n</ng-container>\n<mad-outline-button *ngIf=\"!readonly\" (click)=\"addItem()\"\n [disabled]=\"!addPossible || !isAddAllowed()\">\n {{ addLabel }}\n</mad-outline-button>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }] });
|
|
1582
1580
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: QuickListComponent, decorators: [{
|
|
1583
1581
|
type: Component,
|
|
1584
|
-
args: [{ selector: 'mad-quick-list', template: "<h3>\n <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems\">\n <div *ngIf=\"itemTemplate\" #row>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n <mad-icon-button *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n </div>\n</ng-container>\n<mad-outline-button *ngIf=\"!readonly\" (click)=\"addItem()\"\n [disabled]=\"!addPossible || !isAddAllowed()\">\n {{ addLabel }}\n</mad-outline-button>\n" }]
|
|
1582
|
+
args: [{ selector: 'mad-quick-list', template: "<h3>\n <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems\">\n <div *ngIf=\"itemTemplate\" #row style=\"display: flex; flex-direction: row;\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n <mad-icon-button *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n </div>\n</ng-container>\n<mad-outline-button *ngIf=\"!readonly\" (click)=\"addItem()\"\n [disabled]=\"!addPossible || !isAddAllowed()\">\n {{ addLabel }}\n</mad-outline-button>\n" }]
|
|
1585
1583
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
|
|
1586
1584
|
|
|
1587
1585
|
class QuickListModule {
|
|
@@ -2456,7 +2454,7 @@ class StepHeaderComponent extends CdkStepHeader {
|
|
|
2456
2454
|
}
|
|
2457
2455
|
}
|
|
2458
2456
|
StepHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: StepHeaderComponent, deps: [{ token: i1$5.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2459
|
-
StepHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: StepHeaderComponent, selector: "mad-step-header", inputs: { color: "color", index: "index", label: "label", state: "state", errorMessage: "errorMessage", selected: "selected", active: "active", optional: "optional", hasError: "hasError", completed: "completed", closed: "closed" }, host: { attributes: { "role": "tab" }, classAttribute: "mad-step-header" }, usesInheritance: true, ngImport: i0, 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", styles: [".header{overflow:hidden;outline:var(--warn-color);cursor:pointer;box-sizing:content-box;-webkit-tap-highlight-color:transparent;border:1px solid lightgrey;width:100%;height:62px}.header-label{align-items:center;display:flex}.step-state-complete{width:5px;background:green}.step-state-error{width:5px;background:var(--warn-color)}.step-state-neutral{width:5px;background:lightgrey}.green-check{color:green}.red-error{color:var(--warn-color)}.check-border{border-color:#d3d3d3}.error-border{border-color:var(--warn-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }
|
|
2457
|
+
StepHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: StepHeaderComponent, selector: "mad-step-header", inputs: { color: "color", index: "index", label: "label", state: "state", errorMessage: "errorMessage", selected: "selected", active: "active", optional: "optional", hasError: "hasError", completed: "completed", closed: "closed" }, host: { attributes: { "role": "tab" }, classAttribute: "mad-step-header" }, usesInheritance: true, ngImport: i0, 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", styles: [".header{overflow:hidden;outline:var(--warn-color);cursor:pointer;box-sizing:content-box;-webkit-tap-highlight-color:transparent;border:1px solid lightgrey;width:100%;height:62px}.header-label{align-items:center;display:flex}.step-state-complete{width:5px;background:green}.step-state-error{width:5px;background:var(--warn-color)}.step-state-neutral{width:5px;background:lightgrey}.green-check{color:green}.red-error{color:var(--warn-color)}.check-border{border-color:#d3d3d3}.error-border{border-color:var(--warn-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2460
2458
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: StepHeaderComponent, decorators: [{
|
|
2461
2459
|
type: Component,
|
|
2462
2460
|
args: [{ selector: 'mad-step-header', inputs: ['color'], host: {
|
|
@@ -2565,7 +2563,7 @@ class StepComponent extends CdkStep {
|
|
|
2565
2563
|
}
|
|
2566
2564
|
}
|
|
2567
2565
|
StepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: StepComponent, deps: [{ token: forwardRef(() => StepperComponent) }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2568
|
-
StepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: StepComponent, selector: "mad-step", outputs: { onNext: "onNext", onDone: "onDone", onHeaderClick: "onHeaderClick" }, providers: [{ provide: CdkStep, useExisting: StepComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template let-last=\"last\" let-nextBtnLbl=\"nextBtnLbl\" let-doneBtnLbl=\"doneBtnLbl\">\n <div class=\"step-container\" fxLayout=\"column\">\n <div class=\"step-content\">\n <ng-content></ng-content>\n </div>\n <div class=\"step-buttons\">\n <div *ngIf=\"!last\">\n <mad-primary-button (click)=\"next()\">{{nextBtnLbl}}</mad-primary-button>\n </div>\n <div *ngIf=\"last\">\n <mad-primary-button (click)=\"completeLast()\">{{doneBtnLbl}}</mad-primary-button>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".stepper-vertical{display:block}.mat-vertical-stepper-header{display:flex;align-items:center;border:none!important;height:10px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}.vertical-content-container{border:none}[dir=rtl] .vertical-content-container{margin-left:0;margin-right:36px}.vertical-stepper-content{overflow:hidden;outline:0}.vertical-content{padding:0 24px}.step-container{border-left:1px solid lightgrey;border-right:1px solid lightgrey;border-bottom:1px solid lightgrey}.step-content,.step-buttons{padding:2em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "
|
|
2566
|
+
StepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: StepComponent, selector: "mad-step", outputs: { onNext: "onNext", onDone: "onDone", onHeaderClick: "onHeaderClick" }, providers: [{ provide: CdkStep, useExisting: StepComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template let-last=\"last\" let-nextBtnLbl=\"nextBtnLbl\" let-doneBtnLbl=\"doneBtnLbl\">\n <div class=\"step-container\" fxLayout=\"column\">\n <div class=\"step-content\">\n <ng-content></ng-content>\n </div>\n <div class=\"step-buttons\">\n <div *ngIf=\"!last\">\n <mad-primary-button (click)=\"next()\">{{nextBtnLbl}}</mad-primary-button>\n </div>\n <div *ngIf=\"last\">\n <mad-primary-button (click)=\"completeLast()\">{{doneBtnLbl}}</mad-primary-button>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".stepper-vertical{display:block}.mat-vertical-stepper-header{display:flex;align-items:center;border:none!important;height:10px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}.vertical-content-container{border:none}[dir=rtl] .vertical-content-container{margin-left:0;margin-right:36px}.vertical-stepper-content{overflow:hidden;outline:0}.vertical-content{padding:0 24px}.step-container{border-left:1px solid lightgrey;border-right:1px solid lightgrey;border-bottom:1px solid lightgrey}.step-content,.step-buttons{padding:2em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2569
2567
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: StepComponent, decorators: [{
|
|
2570
2568
|
type: Component,
|
|
2571
2569
|
args: [{ selector: 'mad-step', providers: [{ provide: CdkStep, useExisting: StepComponent }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template let-last=\"last\" let-nextBtnLbl=\"nextBtnLbl\" let-doneBtnLbl=\"doneBtnLbl\">\n <div class=\"step-container\" fxLayout=\"column\">\n <div class=\"step-content\">\n <ng-content></ng-content>\n </div>\n <div class=\"step-buttons\">\n <div *ngIf=\"!last\">\n <mad-primary-button (click)=\"next()\">{{nextBtnLbl}}</mad-primary-button>\n </div>\n <div *ngIf=\"last\">\n <mad-primary-button (click)=\"completeLast()\">{{doneBtnLbl}}</mad-primary-button>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".stepper-vertical{display:block}.mat-vertical-stepper-header{display:flex;align-items:center;border:none!important;height:10px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}.vertical-content-container{border:none}[dir=rtl] .vertical-content-container{margin-left:0;margin-right:36px}.vertical-stepper-content{overflow:hidden;outline:0}.vertical-content{padding:0 24px}.step-container{border-left:1px solid lightgrey;border-right:1px solid lightgrey;border-bottom:1px solid lightgrey}.step-content,.step-buttons{padding:2em}\n"] }]
|
|
@@ -2620,7 +2618,7 @@ class StepperComponent extends CdkStepper {
|
|
|
2620
2618
|
return step.completed || this.selectedIndex === index || !this.linear;
|
|
2621
2619
|
}
|
|
2622
2620
|
}
|
|
2623
|
-
StepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: StepperComponent, deps: [{ token:
|
|
2621
|
+
StepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: StepperComponent, deps: [{ token: i3$1.Directionality, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2624
2622
|
StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: StepperComponent, selector: "mad-stepper", inputs: { nextButtonLabel: "nextButtonLabel", doneButtonLabel: "doneButtonLabel" }, outputs: { animationDone: "animationDone" }, host: { attributes: { "role": "tablist" }, properties: { "class.stepper-vertical": "true", "attr.aria-orientation": "\"vertical\"" } }, providers: [{ provide: CdkStepper, useExisting: StepperComponent }], queries: [{ propertyName: "_steps", predicate: StepComponent, descendants: true }], viewQueries: [{ propertyName: "_stepHeader", predicate: StepHeaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Vertical stepper -->\n<ng-container>\n <div *ngFor=\"let step of steps; let i = index; let isLast = last; let isFirst = first\">\n <ng-container\n [ngTemplateOutlet]=\"stepTemplate\"\n [ngTemplateOutletContext]=\"{step: step, i: i}\"></ng-container>\n <div class=\"vertical-content-container\" [class.mat-stepper-vertical-line]=\"!isLast\">\n <div class=\"vertical-stepper-content\" role=\"tabpanel\"\n [@stepTransition]=\"_getAnimationDirection(i)\"\n (@stepTransition.done)=\"_animationDone.next($event)\"\n [id]=\"_getStepContentId(i)\"\n [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n [attr.aria-expanded]=\"selectedIndex === i\">\n <div class=\"vertical-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"\n [ngTemplateOutletContext]=\"{step: step, i: i, last: isLast, first: isFirst, nextBtnLbl: this.nextButtonLabel, doneBtnLbl: this.doneButtonLabel}\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n\n<ng-template let-step=\"step\" let-i=\"i\" #stepTemplate>\n <mad-step-header\n class=\"mat-vertical-stepper-header\"\n (click)=\"step.selectAndMarkAsTouched(i)\"\n (keydown)=\"_onKeydown($event)\"\n [tabIndex]=\"_getFocusIndex() === i ? 0 : -1\"\n [id]=\"_getStepLabelId(i)\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"steps.length\"\n [attr.aria-controls]=\"_getStepContentId(i)\"\n [attr.aria-selected]=\"selectedIndex == i\"\n [attr.aria-label]=\"step.ariaLabel || null\"\n [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\"\n [attr.aria-disabled]=\"_stepIsNavigable(i, step) ? null : true\"\n [index]=\"i\"\n [completed]=\"step.completed\"\n [hasError]=\"step.hasError\"\n [state]=\"_getIndicatorType(i, step.state)\"\n [label]=\"step.stepLabel || step.label\"\n [selected]=\"selectedIndex === i\"\n [active]=\"_stepIsNavigable(i, step)\"\n [optional]=\"step.optional\"\n [closed]=\"step.stepClosed\"\n [errorMessage]=\"step.errorMessage\"></mad-step-header>\n</ng-template>\n", styles: [".stepper-vertical{display:block}.mat-vertical-stepper-header{display:flex;align-items:center;border:none!important;height:10px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}.vertical-content-container{border:none}[dir=rtl] .vertical-content-container{margin-left:0;margin-right:36px}.vertical-stepper-content{overflow:hidden;outline:0}.vertical-content{padding:0 24px}.step-container{border-left:1px solid lightgrey;border-right:1px solid lightgrey;border-bottom:1px solid lightgrey}.step-content,.step-buttons{padding:2em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StepHeaderComponent, selector: "mad-step-header", inputs: ["color", "index", "label", "state", "errorMessage", "selected", "active", "optional", "hasError", "completed", "closed"] }], animations: [madStepperAnimations.verticalStepTransition], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2625
2623
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: StepperComponent, decorators: [{
|
|
2626
2624
|
type: Component,
|
|
@@ -2629,7 +2627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
2629
2627
|
'[attr.aria-orientation]': '"vertical"',
|
|
2630
2628
|
role: 'tablist',
|
|
2631
2629
|
}, animations: [madStepperAnimations.verticalStepTransition], providers: [{ provide: CdkStepper, useExisting: StepperComponent }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Vertical stepper -->\n<ng-container>\n <div *ngFor=\"let step of steps; let i = index; let isLast = last; let isFirst = first\">\n <ng-container\n [ngTemplateOutlet]=\"stepTemplate\"\n [ngTemplateOutletContext]=\"{step: step, i: i}\"></ng-container>\n <div class=\"vertical-content-container\" [class.mat-stepper-vertical-line]=\"!isLast\">\n <div class=\"vertical-stepper-content\" role=\"tabpanel\"\n [@stepTransition]=\"_getAnimationDirection(i)\"\n (@stepTransition.done)=\"_animationDone.next($event)\"\n [id]=\"_getStepContentId(i)\"\n [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n [attr.aria-expanded]=\"selectedIndex === i\">\n <div class=\"vertical-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"\n [ngTemplateOutletContext]=\"{step: step, i: i, last: isLast, first: isFirst, nextBtnLbl: this.nextButtonLabel, doneBtnLbl: this.doneButtonLabel}\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n\n<ng-template let-step=\"step\" let-i=\"i\" #stepTemplate>\n <mad-step-header\n class=\"mat-vertical-stepper-header\"\n (click)=\"step.selectAndMarkAsTouched(i)\"\n (keydown)=\"_onKeydown($event)\"\n [tabIndex]=\"_getFocusIndex() === i ? 0 : -1\"\n [id]=\"_getStepLabelId(i)\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"steps.length\"\n [attr.aria-controls]=\"_getStepContentId(i)\"\n [attr.aria-selected]=\"selectedIndex == i\"\n [attr.aria-label]=\"step.ariaLabel || null\"\n [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\"\n [attr.aria-disabled]=\"_stepIsNavigable(i, step) ? null : true\"\n [index]=\"i\"\n [completed]=\"step.completed\"\n [hasError]=\"step.hasError\"\n [state]=\"_getIndicatorType(i, step.state)\"\n [label]=\"step.stepLabel || step.label\"\n [selected]=\"selectedIndex === i\"\n [active]=\"_stepIsNavigable(i, step)\"\n [optional]=\"step.optional\"\n [closed]=\"step.stepClosed\"\n [errorMessage]=\"step.errorMessage\"></mad-step-header>\n</ng-template>\n", styles: [".stepper-vertical{display:block}.mat-vertical-stepper-header{display:flex;align-items:center;border:none!important;height:10px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}.vertical-content-container{border:none}[dir=rtl] .vertical-content-container{margin-left:0;margin-right:36px}.vertical-stepper-content{overflow:hidden;outline:0}.vertical-content{padding:0 24px}.step-container{border-left:1px solid lightgrey;border-right:1px solid lightgrey;border-bottom:1px solid lightgrey}.step-content,.step-buttons{padding:2em}\n"] }]
|
|
2632
|
-
}], ctorParameters: function () { return [{ type:
|
|
2630
|
+
}], ctorParameters: function () { return [{ type: i3$1.Directionality, decorators: [{
|
|
2633
2631
|
type: Optional
|
|
2634
2632
|
}] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { animationDone: [{
|
|
2635
2633
|
type: Output
|
|
@@ -2648,13 +2646,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
2648
2646
|
class StepperModule {
|
|
2649
2647
|
}
|
|
2650
2648
|
StepperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2651
|
-
StepperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: StepperModule, declarations: [StepperComponent, StepHeaderComponent, StepComponent], imports: [CommonModule, MatButtonModule, MatIconModule, CdkStepperModule,
|
|
2652
|
-
StepperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: StepperModule, imports: [CommonModule, MatButtonModule, MatIconModule, CdkStepperModule,
|
|
2649
|
+
StepperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: StepperModule, declarations: [StepperComponent, StepHeaderComponent, StepComponent], imports: [CommonModule, MatButtonModule, MatIconModule, CdkStepperModule, ButtonModule], exports: [StepperComponent, StepHeaderComponent, StepComponent] });
|
|
2650
|
+
StepperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: StepperModule, imports: [CommonModule, MatButtonModule, MatIconModule, CdkStepperModule, ButtonModule] });
|
|
2653
2651
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: StepperModule, decorators: [{
|
|
2654
2652
|
type: NgModule,
|
|
2655
2653
|
args: [{
|
|
2656
2654
|
declarations: [StepperComponent, StepHeaderComponent, StepComponent],
|
|
2657
|
-
imports: [CommonModule, MatButtonModule, MatIconModule, CdkStepperModule,
|
|
2655
|
+
imports: [CommonModule, MatButtonModule, MatIconModule, CdkStepperModule, ButtonModule],
|
|
2658
2656
|
exports: [StepperComponent, StepHeaderComponent, StepComponent],
|
|
2659
2657
|
}]
|
|
2660
2658
|
}] });
|