@porscheinformatik/material-addons 16.0.4 → 16.0.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/esm2022/lib/quick-list/base-quick-list.component.mjs +32 -7
- package/esm2022/lib/quick-list/quick-list-compact/quick-list-compact.component.mjs +12 -10
- package/esm2022/lib/quick-list/quick-list.component.mjs +12 -10
- package/esm2022/lib/quick-list/quick-list.mjs +3 -1
- package/esm2022/lib/quick-list/quick-list.module.mjs +9 -6
- package/esm2022/lib/quick-list/reactive-form-quick-list/reactive-form-quick-list.component.mjs +22 -0
- package/esm2022/lib/quick-list/reactive-form-quick-list-compact/reactive-form-quick-list-compact.component.mjs +22 -0
- package/fesm2022/porscheinformatik-material-addons.mjs +107 -53
- package/fesm2022/porscheinformatik-material-addons.mjs.map +1 -1
- package/lib/quick-list/base-quick-list.component.d.ts +9 -2
- package/lib/quick-list/base-quick-list.component.d.ts.map +1 -1
- package/lib/quick-list/quick-list-compact/quick-list-compact.component.d.ts +3 -1
- package/lib/quick-list/quick-list-compact/quick-list-compact.component.d.ts.map +1 -1
- package/lib/quick-list/quick-list.component.d.ts +3 -1
- package/lib/quick-list/quick-list.component.d.ts.map +1 -1
- package/lib/quick-list/quick-list.d.ts +2 -0
- package/lib/quick-list/quick-list.d.ts.map +1 -1
- package/lib/quick-list/quick-list.module.d.ts +8 -5
- package/lib/quick-list/quick-list.module.d.ts.map +1 -1
- package/lib/quick-list/reactive-form-quick-list/reactive-form-quick-list.component.d.ts +12 -0
- package/lib/quick-list/reactive-form-quick-list/reactive-form-quick-list.component.d.ts.map +1 -0
- package/lib/quick-list/reactive-form-quick-list-compact/reactive-form-quick-list-compact.component.d.ts +12 -0
- package/lib/quick-list/reactive-form-quick-list-compact/reactive-form-quick-list-compact.component.d.ts.map +1 -0
- package/package.json +1 -1
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Component, Input, NgModule, HostBinding, ElementRef, ViewChild, LOCALE_ID, Injectable, Inject, EventEmitter, Output, forwardRef, Directive, HostListener, TemplateRef, ContentChild, ViewChildren, ViewEncapsulation, ChangeDetectionStrategy, QueryList, Optional, ContentChildren } from '@angular/core';
|
|
3
|
-
import * as
|
|
3
|
+
import * as i2 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as i1
|
|
5
|
+
import * as i1 from '@angular/router';
|
|
6
6
|
import { RouterModule, NavigationEnd } from '@angular/router';
|
|
7
|
-
import * as i1$
|
|
7
|
+
import * as i1$1 from '@angular/material/button';
|
|
8
8
|
import { MatButtonModule } from '@angular/material/button';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i3 from '@angular/material/icon';
|
|
10
10
|
import { MatIconModule } from '@angular/material/icon';
|
|
11
11
|
import * as i5 from '@angular/material/tooltip';
|
|
12
12
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
13
|
-
import * as i3 from '@angular/material/form-field';
|
|
13
|
+
import * as i3$1 from '@angular/material/form-field';
|
|
14
14
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
15
15
|
import * as i4 from '@angular/material/input';
|
|
16
16
|
import { MatInputModule } from '@angular/material/input';
|
|
17
17
|
import * as i5$1 from '@angular/cdk/text-field';
|
|
18
|
-
import * as
|
|
19
|
-
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
18
|
+
import * as i1$2 from '@angular/forms';
|
|
19
|
+
import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
|
|
20
20
|
import { of, Subject, Subscription } from 'rxjs';
|
|
21
21
|
import * as i1$3 from '@angular/cdk/layout';
|
|
22
22
|
import { Breakpoints } from '@angular/cdk/layout';
|
|
@@ -24,7 +24,7 @@ import { map, throttleTime, switchMap, tap, startWith, takeUntil, distinctUntilC
|
|
|
24
24
|
import * as i2$2 from '@angular/platform-browser';
|
|
25
25
|
import * as i2$1 from '@ngx-translate/core';
|
|
26
26
|
import { TranslateModule } from '@ngx-translate/core';
|
|
27
|
-
import * as i6
|
|
27
|
+
import * as i6 from '@angular/material/menu';
|
|
28
28
|
import { MatMenuModule } from '@angular/material/menu';
|
|
29
29
|
import * as i8 from '@angular/material/toolbar';
|
|
30
30
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
@@ -35,7 +35,7 @@ import * as i2$3 from '@angular/material/card';
|
|
|
35
35
|
import { MatCardModule } from '@angular/material/card';
|
|
36
36
|
import * as i8$1 from '@angular/material/table';
|
|
37
37
|
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
|
|
38
|
-
import * as i6$
|
|
38
|
+
import * as i6$1 from '@angular/material/paginator';
|
|
39
39
|
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
|
40
40
|
import * as i7 from '@angular/material/sort';
|
|
41
41
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
@@ -51,7 +51,7 @@ import * as i13 from '@angular/material/checkbox';
|
|
|
51
51
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
52
52
|
import { CdkStepHeader, STEP_STATE, CdkStep, CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
|
|
53
53
|
import * as i1$5 from '@angular/cdk/a11y';
|
|
54
|
-
import * as i3$
|
|
54
|
+
import * as i3$2 from '@angular/cdk/bidi';
|
|
55
55
|
import * as i2$4 from '@angular/material/stepper';
|
|
56
56
|
import { MatStepperModule } from '@angular/material/stepper';
|
|
57
57
|
|
|
@@ -63,7 +63,7 @@ class MaterialActionButtonComponent {
|
|
|
63
63
|
this.liftHigher2 = false;
|
|
64
64
|
}
|
|
65
65
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: MaterialActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
66
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: MaterialActionButtonComponent, selector: "mad-material-action-button", inputs: { actionName: "actionName", id: "id", icon: "icon", routerLink: "routerLink", liftHigher: "liftHigher", liftHigher2: "liftHigher2" }, ngImport: i0, template: "<div class=\"material-action-button {{ liftHigher ? 'lift-higher' : '' }} {{ liftHigher2 ? 'lift-higher-2' : '' }}\">\n <a [routerLink]=\"routerLink\">\n <button [id]=\"id\" mat-fab [matTooltipPosition]=\"'left'\" [matTooltip]=\"actionName\" color=\"primary\" *ngIf=\"!liftHigher2\">\n <mat-icon>{{ icon }}</mat-icon>\n </button>\n <button [id]=\"id\" mat-mini-fab [matTooltipPosition]=\"'left'\" [matTooltip]=\"actionName\" color=\"accent\" *ngIf=\"liftHigher2\">\n <mat-icon>{{ icon }}</mat-icon>\n </button>\n </a>\n</div>\n", styles: [".material-action-button{position:fixed;bottom:20px;right:20px;z-index:100;display:flex;flex-direction:column-reverse;align-items:center}.lift-higher{bottom:61px}.lift-higher-2{right:28px;bottom:121px}\n"], dependencies: [{ kind: "directive", type:
|
|
66
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: MaterialActionButtonComponent, selector: "mad-material-action-button", inputs: { actionName: "actionName", id: "id", icon: "icon", routerLink: "routerLink", liftHigher: "liftHigher", liftHigher2: "liftHigher2" }, ngImport: i0, template: "<div class=\"material-action-button {{ liftHigher ? 'lift-higher' : '' }} {{ liftHigher2 ? 'lift-higher-2' : '' }}\">\n <a [routerLink]=\"routerLink\">\n <button [id]=\"id\" mat-fab [matTooltipPosition]=\"'left'\" [matTooltip]=\"actionName\" color=\"primary\" *ngIf=\"!liftHigher2\">\n <mat-icon>{{ icon }}</mat-icon>\n </button>\n <button [id]=\"id\" mat-mini-fab [matTooltipPosition]=\"'left'\" [matTooltip]=\"actionName\" color=\"accent\" *ngIf=\"liftHigher2\">\n <mat-icon>{{ icon }}</mat-icon>\n </button>\n </a>\n</div>\n", styles: [".material-action-button{position:fixed;bottom:20px;right:20px;z-index:100;display:flex;flex-direction:column-reverse;align-items:center}.lift-higher{bottom:61px}.lift-higher-2{right:28px;bottom:121px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1$1.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i1$1.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
|
|
67
67
|
}
|
|
68
68
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: MaterialActionButtonComponent, decorators: [{
|
|
69
69
|
type: Component,
|
|
@@ -141,7 +141,7 @@ class DangerButtonComponent extends MadBasicButton {
|
|
|
141
141
|
super.disabled = this.disabled;
|
|
142
142
|
}
|
|
143
143
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DangerButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
144
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DangerButtonComponent, selector: "mad-danger-button", inputs: { type: "type", disabled: "disabled", title: "title" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["btn"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button mat-raised-button color=\"warn\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i1$
|
|
144
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DangerButtonComponent, selector: "mad-danger-button", inputs: { type: "type", disabled: "disabled", title: "title" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["btn"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button mat-raised-button color=\"warn\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
|
|
145
145
|
}
|
|
146
146
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DangerButtonComponent, decorators: [{
|
|
147
147
|
type: Component,
|
|
@@ -165,7 +165,7 @@ class LinkButtonComponent extends MadBasicButton {
|
|
|
165
165
|
super.disabled = this.disabled;
|
|
166
166
|
}
|
|
167
167
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: LinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
168
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: LinkButtonComponent, selector: "mad-link-button", inputs: { type: "type", disabled: "disabled", title: "title" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["btn"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button [title]=\"title\" [type]=\"type\" color=\"primary\" #btn mat-button>\n <ng-content></ng-content>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i1$
|
|
168
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: LinkButtonComponent, selector: "mad-link-button", inputs: { type: "type", disabled: "disabled", title: "title" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["btn"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button [title]=\"title\" [type]=\"type\" color=\"primary\" #btn mat-button>\n <ng-content></ng-content>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
|
|
169
169
|
}
|
|
170
170
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: LinkButtonComponent, decorators: [{
|
|
171
171
|
type: Component,
|
|
@@ -189,7 +189,7 @@ class IconButtonComponent extends MadBasicButton {
|
|
|
189
189
|
super.disabled = this.disabled;
|
|
190
190
|
}
|
|
191
191
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
192
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: IconButtonComponent, selector: "mad-icon-button", inputs: { type: "type", disabled: "disabled", title: "title" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["btn"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button mat-icon-button color=\"primary\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i1$
|
|
192
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: IconButtonComponent, selector: "mad-icon-button", inputs: { type: "type", disabled: "disabled", title: "title" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["btn"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button mat-icon-button color=\"primary\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
|
|
193
193
|
}
|
|
194
194
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
195
195
|
type: Component,
|
|
@@ -213,7 +213,7 @@ class OutlineButtonComponent extends MadBasicButton {
|
|
|
213
213
|
super.disabled = this.disabled;
|
|
214
214
|
}
|
|
215
215
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: OutlineButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
216
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: { type: "type", disabled: "disabled", title: "title" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["btn"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button mat-stroked-button color=\"primary\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i1$
|
|
216
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: { type: "type", disabled: "disabled", title: "title" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["btn"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button mat-stroked-button color=\"primary\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
|
|
217
217
|
}
|
|
218
218
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: OutlineButtonComponent, decorators: [{
|
|
219
219
|
type: Component,
|
|
@@ -237,7 +237,7 @@ class PrimaryButtonComponent extends MadBasicButton {
|
|
|
237
237
|
super.disabled = this.disabled;
|
|
238
238
|
}
|
|
239
239
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: PrimaryButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
240
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: { type: "type", disabled: "disabled", title: "title" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["btn"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button mat-raised-button color=\"primary\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n", styles: ["::ng-deep .mat-icon{vertical-align:middle}\n"], dependencies: [{ kind: "component", type: i1$
|
|
240
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: { type: "type", disabled: "disabled", title: "title" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["btn"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button mat-raised-button color=\"primary\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n", styles: ["::ng-deep .mat-icon{vertical-align:middle}\n"], dependencies: [{ kind: "component", type: i1$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
|
|
241
241
|
}
|
|
242
242
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: PrimaryButtonComponent, decorators: [{
|
|
243
243
|
type: Component,
|
|
@@ -514,7 +514,7 @@ class ReadOnlyFormFieldComponent {
|
|
|
514
514
|
}
|
|
515
515
|
}
|
|
516
516
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ReadOnlyFormFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: NumberFormatService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
517
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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", suffix: "suffix", prefix: "prefix", multilineAutoSize: "multilineAutoSize" }, outputs: { suffixClickedEmitter: "suffixClickedEmitter", prefixClickedEmitter: "prefixClickedEmitter" }, viewQueries: [{ propertyName: "originalContent", first: true, predicate: ["contentWrapper"], descendants: true }, { 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 [cdkTextareaAutosize]=\"multilineAutoSize\"\n ></textarea>\n <mat-error>{{ errorMessage }}</mat-error>\n <mat-icon *ngIf=\"suffix\" (click)=\"suffixClicked()\" class=\"pointer\" color=\"primary\" matSuffix>{{suffix}}</mat-icon>\n <mat-icon *ngIf=\"prefix\" (click)=\"prefixClicked()\" class=\"pointer\" color=\"primary\" matPrefix>{{prefix}}</mat-icon>\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:
|
|
517
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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", suffix: "suffix", prefix: "prefix", multilineAutoSize: "multilineAutoSize" }, outputs: { suffixClickedEmitter: "suffixClickedEmitter", prefixClickedEmitter: "prefixClickedEmitter" }, viewQueries: [{ propertyName: "originalContent", first: true, predicate: ["contentWrapper"], descendants: true }, { 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 [cdkTextareaAutosize]=\"multilineAutoSize\"\n ></textarea>\n <mat-error>{{ errorMessage }}</mat-error>\n <mat-icon *ngIf=\"suffix\" (click)=\"suffixClicked()\" class=\"pointer\" color=\"primary\" matSuffix>{{suffix}}</mat-icon>\n <mat-icon *ngIf=\"prefix\" (click)=\"prefixClicked()\" class=\"pointer\" color=\"primary\" matPrefix>{{prefix}}</mat-icon>\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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
518
518
|
}
|
|
519
519
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ReadOnlyFormFieldComponent, decorators: [{
|
|
520
520
|
type: Component,
|
|
@@ -714,7 +714,7 @@ class ReadOnlyFormFieldWrapperComponent {
|
|
|
714
714
|
return this.unitPosition === 'left' ? this.unit + ' ' + this.value : this.value + ' ' + this.unit;
|
|
715
715
|
}
|
|
716
716
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ReadOnlyFormFieldWrapperComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
717
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ReadOnlyFormFieldWrapperComponent, selector: "mad-readonly-form-field-wrapper", inputs: { readonly: "readonly", value: "value", textAlign: "textAlign", formatNumber: "formatNumber", decimalPlaces: "decimalPlaces", roundValue: ["roundDisplayValue", "roundValue"], autofillDecimals: "autofillDecimals", unit: "unit", unitPosition: "unitPosition", errorMessage: "errorMessage", id: "id", multiline: "multiline", rows: "rows", shrinkIfEmpty: "shrinkIfEmpty", hideIconInReadOnlyMode: "hideIconInReadOnlyMode", suffix: "suffix", prefix: "prefix", multilineAutoSize: "multilineAutoSize" }, outputs: { suffixClickedEmitter: "suffixClickedEmitter", prefixClickedEmitter: "prefixClickedEmitter" }, viewQueries: [{ propertyName: "originalContent", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "readOnlyContentWrapper", first: true, predicate: ["readOnlyContentWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #contentWrapper [hidden]=\"readonly\">\n <ng-content></ng-content>\n</div>\n\n<div #readOnlyContentWrapper>\n <ng-container *ngIf=\"!!readonly\">\n <mad-readonly-form-field\n [label]=\"getLabel()\"\n [value]=\"value\"\n [textAlign]=\"textAlign\"\n [formatNumber]=\"formatNumber\"\n [decimalPlaces]=\"decimalPlaces\"\n [roundDisplayValue]=\"roundValue\"\n [autofillDecimals]=\"autofillDecimals\"\n [unit]=\"unit\"\n [unitPosition]=\"unitPosition\"\n [errorMessage]=\"errorMessage\"\n [multiline]=\"multiline\"\n [rows]=\"rows\"\n [shrinkIfEmpty]=\"shrinkIfEmpty\"\n [id]=\"id\"\n [suffix]=\"suffix\"\n [prefix]=\"prefix\"\n [multilineAutoSize]=\"multilineAutoSize\"\n (suffixClickedEmitter)=\"suffixClicked()\"\n (prefixClickedEmitter)=\"prefixClicked()\"\n matTooltip=\"{{toolTipText}}\"\n matTooltipPosition=\"right\"\n matTooltipClass=\"custom-tooltip\"\n matTooltipDisabled=\"{{!toolTipForInputEnabled}}\">\n </mad-readonly-form-field>\n </ng-container>\n</div>\n", styles: ["mat-form-field{width:inherit}div{width:inherit}::ng-deep .custom-tooltip{font-size:14px!important;word-break:break-all!important;white-space:normal!important}\n"], dependencies: [{ kind: "directive", type:
|
|
717
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ReadOnlyFormFieldWrapperComponent, selector: "mad-readonly-form-field-wrapper", inputs: { readonly: "readonly", value: "value", textAlign: "textAlign", formatNumber: "formatNumber", decimalPlaces: "decimalPlaces", roundValue: ["roundDisplayValue", "roundValue"], autofillDecimals: "autofillDecimals", unit: "unit", unitPosition: "unitPosition", errorMessage: "errorMessage", id: "id", multiline: "multiline", rows: "rows", shrinkIfEmpty: "shrinkIfEmpty", hideIconInReadOnlyMode: "hideIconInReadOnlyMode", suffix: "suffix", prefix: "prefix", multilineAutoSize: "multilineAutoSize" }, outputs: { suffixClickedEmitter: "suffixClickedEmitter", prefixClickedEmitter: "prefixClickedEmitter" }, viewQueries: [{ propertyName: "originalContent", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "readOnlyContentWrapper", first: true, predicate: ["readOnlyContentWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #contentWrapper [hidden]=\"readonly\">\n <ng-content></ng-content>\n</div>\n\n<div #readOnlyContentWrapper>\n <ng-container *ngIf=\"!!readonly\">\n <mad-readonly-form-field\n [label]=\"getLabel()\"\n [value]=\"value\"\n [textAlign]=\"textAlign\"\n [formatNumber]=\"formatNumber\"\n [decimalPlaces]=\"decimalPlaces\"\n [roundDisplayValue]=\"roundValue\"\n [autofillDecimals]=\"autofillDecimals\"\n [unit]=\"unit\"\n [unitPosition]=\"unitPosition\"\n [errorMessage]=\"errorMessage\"\n [multiline]=\"multiline\"\n [rows]=\"rows\"\n [shrinkIfEmpty]=\"shrinkIfEmpty\"\n [id]=\"id\"\n [suffix]=\"suffix\"\n [prefix]=\"prefix\"\n [multilineAutoSize]=\"multilineAutoSize\"\n (suffixClickedEmitter)=\"suffixClicked()\"\n (prefixClickedEmitter)=\"prefixClicked()\"\n matTooltip=\"{{toolTipText}}\"\n matTooltipPosition=\"right\"\n matTooltipClass=\"custom-tooltip\"\n matTooltipDisabled=\"{{!toolTipForInputEnabled}}\">\n </mad-readonly-form-field>\n </ng-container>\n</div>\n", styles: ["mat-form-field{width:inherit}div{width:inherit}::ng-deep .custom-tooltip{font-size:14px!important;word-break:break-all!important;white-space:normal!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: ReadOnlyFormFieldComponent, selector: "mad-readonly-form-field", inputs: ["value", "label", "textAlign", "formatNumber", "decimalPlaces", "roundDisplayValue", "autofillDecimals", "unit", "unitPosition", "errorMessage", "multiline", "rows", "id", "shrinkIfEmpty", "suffix", "prefix", "multilineAutoSize"], outputs: ["suffixClickedEmitter", "prefixClickedEmitter"] }] }); }
|
|
718
718
|
}
|
|
719
719
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ReadOnlyFormFieldWrapperComponent, decorators: [{
|
|
720
720
|
type: Component,
|
|
@@ -899,7 +899,7 @@ class ToolbarService {
|
|
|
899
899
|
clearMainActions() {
|
|
900
900
|
this.mainActions = [];
|
|
901
901
|
}
|
|
902
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ToolbarService, deps: [{ token: i1
|
|
902
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ToolbarService, deps: [{ token: i1.Router }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
903
903
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ToolbarService, providedIn: 'root' }); }
|
|
904
904
|
}
|
|
905
905
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ToolbarService, decorators: [{
|
|
@@ -907,7 +907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
907
907
|
args: [{
|
|
908
908
|
providedIn: 'root',
|
|
909
909
|
}]
|
|
910
|
-
}], ctorParameters: function () { return [{ type: i1
|
|
910
|
+
}], ctorParameters: function () { return [{ type: i1.Router }, { type: i2$1.TranslateService }]; } });
|
|
911
911
|
|
|
912
912
|
class ToolbarComponent {
|
|
913
913
|
constructor(breakpointObserver, titleService, toolbarService) {
|
|
@@ -961,7 +961,7 @@ class ToolbarComponent {
|
|
|
961
961
|
return this.getToolbarActions().filter(value => !!value.importantAction).length > 0;
|
|
962
962
|
}
|
|
963
963
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$3.BreakpointObserver }, { token: i2$2.Title }, { token: ToolbarService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
964
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ToolbarComponent, selector: "mad-toolbar", ngImport: i0, 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 ? (hasImportantToolbarActions() ? 0:1) : 2) || !!action.importantAction\"\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 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 *ngIf=\"i >= (hasImportantToolbarActions() ? 0:1)\" mat-menu-item (click)=\"action.action()\"\n [title]=\"action.actionName\">\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:white}.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}\n"], dependencies: [{ kind: "directive", type:
|
|
964
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ToolbarComponent, selector: "mad-toolbar", ngImport: i0, 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 ? (hasImportantToolbarActions() ? 0:1) : 2) || !!action.importantAction\"\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 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 *ngIf=\"i >= (hasImportantToolbarActions() ? 0:1)\" mat-menu-item (click)=\"action.action()\"\n [title]=\"action.actionName\">\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:white}.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}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MaterialActionButtonComponent, selector: "mad-material-action-button", inputs: ["actionName", "id", "icon", "routerLink", "liftHigher", "liftHigher2"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "directive", type: i14.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
|
|
965
965
|
}
|
|
966
966
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
967
967
|
type: Component,
|
|
@@ -1389,7 +1389,7 @@ class CardComponent {
|
|
|
1389
1389
|
this.additionalAction.emit(undefined);
|
|
1390
1390
|
}
|
|
1391
1391
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1392
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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 class=\"header\">\n <mat-card-title-group class=\"center\">\n <mat-card-title class=\"small-title-container\">{{ title }}</mat-card-title>\n <div 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}.center{display:flex;align-items:center}.header{height:48px}\n"], dependencies: [{ kind: "directive", type:
|
|
1392
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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 class=\"header\">\n <mat-card-title-group class=\"center\">\n <mat-card-title class=\"small-title-container\">{{ title }}</mat-card-title>\n <div 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}.center{display:flex;align-items:center}.header{height:48px}\n"], dependencies: [{ kind: "directive", type: i2.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.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i2$3.MatCardTitleGroup, selector: "mat-card-title-group" }, { kind: "component", type: i3.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: [
|
|
1393
1393
|
trigger('collapseExpandAnimation', [
|
|
1394
1394
|
transition(':enter', [
|
|
1395
1395
|
style({ opacity: 0, height: 0, overflow: 'hidden' }),
|
|
@@ -1503,8 +1503,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
1503
1503
|
}] });
|
|
1504
1504
|
|
|
1505
1505
|
class BaseQuickListComponent {
|
|
1506
|
-
constructor(changeDetectorRef) {
|
|
1506
|
+
constructor(changeDetectorRef, formBuilder) {
|
|
1507
1507
|
this.changeDetectorRef = changeDetectorRef;
|
|
1508
|
+
this.formBuilder = formBuilder;
|
|
1508
1509
|
this.allItems = [];
|
|
1509
1510
|
this.addLabel = 'NOT SET';
|
|
1510
1511
|
this.addPossible = true;
|
|
@@ -1530,12 +1531,27 @@ class BaseQuickListComponent {
|
|
|
1530
1531
|
this.added.emit(newItem);
|
|
1531
1532
|
}
|
|
1532
1533
|
}
|
|
1534
|
+
addReactiveItem() {
|
|
1535
|
+
if (this.isAddReactiveAllowed()) {
|
|
1536
|
+
this.added.emit(null);
|
|
1537
|
+
}
|
|
1538
|
+
}
|
|
1533
1539
|
removeItem(item) {
|
|
1534
1540
|
if (this.isDeleteAllowed()) {
|
|
1535
1541
|
this.allItems.splice(this.allItems.indexOf(item), 1);
|
|
1536
1542
|
this.removed.emit(item);
|
|
1537
1543
|
}
|
|
1538
1544
|
}
|
|
1545
|
+
removeReactiveItem(item) {
|
|
1546
|
+
if (this.isDeleteReactiveAllowed()) {
|
|
1547
|
+
const index = this.formArray.controls.indexOf(item);
|
|
1548
|
+
if (index >= 0) {
|
|
1549
|
+
this.formArray.controls.splice(index, 1);
|
|
1550
|
+
this.formArray.updateValueAndValidity();
|
|
1551
|
+
this.removed.emit(null);
|
|
1552
|
+
}
|
|
1553
|
+
}
|
|
1554
|
+
}
|
|
1539
1555
|
setFocusOnAdd() {
|
|
1540
1556
|
this.rowCountFocus = this.itemRows.length;
|
|
1541
1557
|
this.itemRows.changes.subscribe((els) => {
|
|
@@ -1549,10 +1565,16 @@ class BaseQuickListComponent {
|
|
|
1549
1565
|
});
|
|
1550
1566
|
}
|
|
1551
1567
|
isAddAllowed() {
|
|
1552
|
-
return this.addPossible && (!this.maxItems || this.allItems
|
|
1568
|
+
return this.addPossible && (!this.maxItems || this.allItems?.length < this.maxItems);
|
|
1569
|
+
}
|
|
1570
|
+
isAddReactiveAllowed() {
|
|
1571
|
+
return this.addPossible && (!this.maxItems || this.formArray?.controls.length < this.maxItems);
|
|
1553
1572
|
}
|
|
1554
1573
|
isDeleteAllowed() {
|
|
1555
|
-
return this.removePossible && (!this.minItems || this.allItems
|
|
1574
|
+
return this.removePossible && (!this.minItems || this.allItems?.length > this.minItems);
|
|
1575
|
+
}
|
|
1576
|
+
isDeleteReactiveAllowed() {
|
|
1577
|
+
return this.removePossible && (!this.minItems || this.formArray?.controls.length > this.minItems);
|
|
1556
1578
|
}
|
|
1557
1579
|
interalAddItem() {
|
|
1558
1580
|
if (this.isAddAllowed()) {
|
|
@@ -1567,13 +1589,13 @@ class BaseQuickListComponent {
|
|
|
1567
1589
|
}
|
|
1568
1590
|
return null;
|
|
1569
1591
|
}
|
|
1570
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseQuickListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1571
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: BaseQuickListComponent, selector: "mad-base-quick-list", inputs: { allItems: "allItems", addLabel: "addLabel", addPossible: "addPossible", removePossible: "removePossible", blankItem: "blankItem", readonly: "readonly", maxItems: "maxItems", minItems: "minItems" }, outputs: { added: "added", removed: "removed" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "itemRows", predicate: ["row"], descendants: true }], ngImport: i0, template: '', isInline: true }); }
|
|
1592
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseQuickListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1593
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: BaseQuickListComponent, selector: "mad-base-quick-list", inputs: { allItems: "allItems", addLabel: "addLabel", addPossible: "addPossible", removePossible: "removePossible", blankItem: "blankItem", readonly: "readonly", maxItems: "maxItems", minItems: "minItems", formArray: "formArray" }, outputs: { added: "added", removed: "removed" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "itemRows", predicate: ["row"], descendants: true }], ngImport: i0, template: '', isInline: true }); }
|
|
1572
1594
|
}
|
|
1573
1595
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseQuickListComponent, decorators: [{
|
|
1574
1596
|
type: Component,
|
|
1575
1597
|
args: [{ selector: 'mad-base-quick-list', template: '' }]
|
|
1576
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { allItems: [{
|
|
1598
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }]; }, propDecorators: { allItems: [{
|
|
1577
1599
|
type: Input
|
|
1578
1600
|
}], addLabel: [{
|
|
1579
1601
|
type: Input
|
|
@@ -1589,6 +1611,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
1589
1611
|
type: Input
|
|
1590
1612
|
}], minItems: [{
|
|
1591
1613
|
type: Input
|
|
1614
|
+
}], formArray: [{
|
|
1615
|
+
type: Input
|
|
1592
1616
|
}], added: [{
|
|
1593
1617
|
type: Output
|
|
1594
1618
|
}], removed: [{
|
|
@@ -1602,43 +1626,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
1602
1626
|
}] } });
|
|
1603
1627
|
|
|
1604
1628
|
class QuickListCompactComponent extends BaseQuickListComponent {
|
|
1605
|
-
constructor(changeDetectorRef) {
|
|
1606
|
-
super(changeDetectorRef);
|
|
1629
|
+
constructor(changeDetectorRef, formBuilder) {
|
|
1630
|
+
super(changeDetectorRef, formBuilder);
|
|
1607
1631
|
this.changeDetectorRef = changeDetectorRef;
|
|
1632
|
+
this.formBuilder = formBuilder;
|
|
1608
1633
|
}
|
|
1609
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: QuickListCompactComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1610
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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:
|
|
1634
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: QuickListCompactComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1635
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.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"] }] }); }
|
|
1611
1636
|
}
|
|
1612
1637
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: QuickListCompactComponent, decorators: [{
|
|
1613
1638
|
type: Component,
|
|
1614
1639
|
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" }]
|
|
1615
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
|
|
1640
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }]; } });
|
|
1616
1641
|
|
|
1617
1642
|
// Based on https://github.com/porscheinformatik/clarity-addons/blob/master/src/clr-addons/generic-quick-list/generic-quick-list.ts
|
|
1618
1643
|
class QuickListComponent extends BaseQuickListComponent {
|
|
1619
|
-
constructor(changeDetectorRef) {
|
|
1620
|
-
super(changeDetectorRef);
|
|
1644
|
+
constructor(changeDetectorRef, formBuilder) {
|
|
1645
|
+
super(changeDetectorRef, formBuilder);
|
|
1621
1646
|
this.changeDetectorRef = changeDetectorRef;
|
|
1647
|
+
this.formBuilder = formBuilder;
|
|
1622
1648
|
}
|
|
1623
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: QuickListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1624
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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:
|
|
1649
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: QuickListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1650
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.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"] }] }); }
|
|
1625
1651
|
}
|
|
1626
1652
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: QuickListComponent, decorators: [{
|
|
1627
1653
|
type: Component,
|
|
1628
1654
|
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" }]
|
|
1629
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
|
|
1655
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }]; } });
|
|
1656
|
+
|
|
1657
|
+
class ReactiveFormQuickListComponent extends BaseQuickListComponent {
|
|
1658
|
+
constructor(changeDetectorRef, formBuilder) {
|
|
1659
|
+
super(changeDetectorRef, formBuilder);
|
|
1660
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
1661
|
+
this.formBuilder = formBuilder;
|
|
1662
|
+
}
|
|
1663
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ReactiveFormQuickListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1664
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ReactiveFormQuickListComponent, selector: "mad-reactive-form-quick-list", usesInheritance: true, ngImport: i0, template: "<h3>\n <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of formArray.controls\">\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 && isDeleteReactiveAllowed()\" (click)=\"removeReactiveItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n </div>\n</ng-container>\n\n<mad-outline-button *ngIf=\"!readonly\" (click)=\"addReactiveItem()\"\n [disabled]=\"!isAddReactiveAllowed()\">\n {{ addLabel }}\n</mad-outline-button>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.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"] }] }); }
|
|
1665
|
+
}
|
|
1666
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ReactiveFormQuickListComponent, decorators: [{
|
|
1667
|
+
type: Component,
|
|
1668
|
+
args: [{ selector: 'mad-reactive-form-quick-list', template: "<h3>\n <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of formArray.controls\">\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 && isDeleteReactiveAllowed()\" (click)=\"removeReactiveItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n </div>\n</ng-container>\n\n<mad-outline-button *ngIf=\"!readonly\" (click)=\"addReactiveItem()\"\n [disabled]=\"!isAddReactiveAllowed()\">\n {{ addLabel }}\n</mad-outline-button>\n" }]
|
|
1669
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }]; } });
|
|
1670
|
+
|
|
1671
|
+
class ReactiveFormQuickListCompactComponent extends BaseQuickListComponent {
|
|
1672
|
+
constructor(changeDetectorRef, formBuilder) {
|
|
1673
|
+
super(changeDetectorRef, formBuilder);
|
|
1674
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
1675
|
+
this.formBuilder = formBuilder;
|
|
1676
|
+
}
|
|
1677
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ReactiveFormQuickListCompactComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1678
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ReactiveFormQuickListCompactComponent, selector: "mad-reactive-form-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 formArray.controls; let isLast = last;\">\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 && isDeleteReactiveAllowed()\" (click)=\"removeReactiveItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n <mad-icon-button *ngIf=\"!readonly && isLast\" [disabled]=\"!isAddReactiveAllowed()\" (click)=\"addReactiveItem()\">\n <mat-icon>add_circle_outline</mat-icon>\n </mad-icon-button>\n </div>\n</ng-container>\n<mad-link-button *ngIf=\"!readonly && !this.formArray?.controls.length\"\n (click)=\"addReactiveItem()\"\n [disabled]=\"!isAddReactiveAllowed()\">\n {{ addLabel }}\n</mad-link-button>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.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"] }] }); }
|
|
1679
|
+
}
|
|
1680
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ReactiveFormQuickListCompactComponent, decorators: [{
|
|
1681
|
+
type: Component,
|
|
1682
|
+
args: [{ selector: 'mad-reactive-form-quick-list-compact', template: "<h3>\n <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of formArray.controls; let isLast = last;\">\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 && isDeleteReactiveAllowed()\" (click)=\"removeReactiveItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n <mad-icon-button *ngIf=\"!readonly && isLast\" [disabled]=\"!isAddReactiveAllowed()\" (click)=\"addReactiveItem()\">\n <mat-icon>add_circle_outline</mat-icon>\n </mad-icon-button>\n </div>\n</ng-container>\n<mad-link-button *ngIf=\"!readonly && !this.formArray?.controls.length\"\n (click)=\"addReactiveItem()\"\n [disabled]=\"!isAddReactiveAllowed()\">\n {{ addLabel }}\n</mad-link-button>\n" }]
|
|
1683
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }]; } });
|
|
1630
1684
|
|
|
1631
1685
|
class QuickListModule {
|
|
1632
1686
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: QuickListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1633
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: QuickListModule, declarations: [QuickListComponent, BaseQuickListComponent, QuickListCompactComponent], imports: [CommonModule, MatButtonModule, MatIconModule, ButtonModule], exports: [QuickListComponent, QuickListCompactComponent, BaseQuickListComponent] }); }
|
|
1634
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: QuickListModule, imports: [CommonModule, MatButtonModule, MatIconModule, ButtonModule] }); }
|
|
1687
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: QuickListModule, declarations: [QuickListComponent, BaseQuickListComponent, QuickListCompactComponent, ReactiveFormQuickListComponent, ReactiveFormQuickListCompactComponent], imports: [CommonModule, MatButtonModule, MatIconModule, ButtonModule, ReactiveFormsModule], exports: [QuickListComponent, QuickListCompactComponent, BaseQuickListComponent, ReactiveFormQuickListComponent, ReactiveFormQuickListCompactComponent] }); }
|
|
1688
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: QuickListModule, imports: [CommonModule, MatButtonModule, MatIconModule, ButtonModule, ReactiveFormsModule] }); }
|
|
1635
1689
|
}
|
|
1636
1690
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: QuickListModule, decorators: [{
|
|
1637
1691
|
type: NgModule,
|
|
1638
1692
|
args: [{
|
|
1639
|
-
declarations: [QuickListComponent, BaseQuickListComponent, QuickListCompactComponent],
|
|
1640
|
-
imports: [CommonModule, MatButtonModule, MatIconModule, ButtonModule],
|
|
1641
|
-
exports: [QuickListComponent, QuickListCompactComponent, BaseQuickListComponent],
|
|
1693
|
+
declarations: [QuickListComponent, BaseQuickListComponent, QuickListCompactComponent, ReactiveFormQuickListComponent, ReactiveFormQuickListCompactComponent],
|
|
1694
|
+
imports: [CommonModule, MatButtonModule, MatIconModule, ButtonModule, ReactiveFormsModule],
|
|
1695
|
+
exports: [QuickListComponent, QuickListCompactComponent, BaseQuickListComponent, ReactiveFormQuickListComponent, ReactiveFormQuickListCompactComponent],
|
|
1642
1696
|
}]
|
|
1643
1697
|
}] });
|
|
1644
1698
|
|
|
@@ -1716,7 +1770,7 @@ class TableComponent {
|
|
|
1716
1770
|
return event?.target?.classList.contains('mat-icon');
|
|
1717
1771
|
}
|
|
1718
1772
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1719
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: TableComponent, selector: "mad-table", inputs: { columns: "columns", filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", noDataText: "noDataText", pageSizeOptions: "pageSizeOptions", defaultPageSize: "defaultPageSize", rowActions: "rowActions", tableActions: "tableActions", displayedData: "displayedData", paginationEnabled: "paginationEnabled", filterEnabled: "filterEnabled" }, outputs: { tableAction: "tableAction", rowAction: "rowAction", sortEvent: "sortEvent" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, 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", styles: [".text-right{text-align:right!important}.table-action{margin-right:.5em;margin-bottom:.5em}.row-action-button{width:10px}.noDataText{width:100%;text-align:center}.mad-table{width:100%;overflow-x:auto}\n"], dependencies: [{ kind: "directive", type:
|
|
1773
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: TableComponent, selector: "mad-table", inputs: { columns: "columns", filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", noDataText: "noDataText", pageSizeOptions: "pageSizeOptions", defaultPageSize: "defaultPageSize", rowActions: "rowActions", tableActions: "tableActions", displayedData: "displayedData", paginationEnabled: "paginationEnabled", filterEnabled: "filterEnabled" }, outputs: { tableAction: "tableAction", rowAction: "rowAction", sortEvent: "sortEvent" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, 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", styles: [".text-right{text-align:right!important}.table-action{margin-right:.5em;margin-bottom:.5em}.row-action-button{width:10px}.noDataText{width:100%;text-align:center}.mad-table{width:100%;overflow-x:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { 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: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }] }); }
|
|
1720
1774
|
}
|
|
1721
1775
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: TableComponent, decorators: [{
|
|
1722
1776
|
type: Component,
|
|
@@ -1877,7 +1931,7 @@ class DataTableColumnsModalComponent {
|
|
|
1877
1931
|
this.filteredAvailableColumns = [...this.availableColumns];
|
|
1878
1932
|
}
|
|
1879
1933
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DataTableColumnsModalComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1880
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DataTableColumnsModalComponent, selector: "mad-data-table-columns-modal.component", ngImport: i0, template: "<h1 mat-dialog-title>{{ data?.titleLabel | translate }}</h1>\n<div mat-dialog-content>\n <div class=\"column-drag-main-content\">\n <div class=\"column-drag-container\">\n <div class=\"column-drag-info-area\">{{ data?.infoTextLabel | translate }}</div>\n <div class=\"column-drag-container-header\">{{ data?.selectedLabel | translate }}</div>\n <div\n cdkDropList\n #selectedList=\"cdkDropList\"\n [cdkDropListData]=\"selectedColumns\"\n [cdkDropListConnectedTo]=\"[availableList]\"\n class=\"column-drag-list selected-drag-list\"\n (cdkDropListDropped)=\"onDrop($event)\">\n <div class=\"column-drag-box\"\n *ngFor=\"let selectedColumn of selectedColumns; let i = index\"\n cdkDrag\n [id]=\"selectedColumn.id\"\n >\n {{i + 1}}. {{selectedColumn.label | translate }}\n </div>\n </div>\n </div>\n\n <div class=\"column-drag-container\">\n <div class=\"column-drag-info-area\">\n <!-- Table filter -->\n <mat-form-field>\n <mat-label>{{ data?.filterColumnsLabel | translate }}</mat-label>\n <input matInput autocomplete=\"off\" (keyup)=\"updateFilterValue()\"\n placeholder=\"{{ data?.filterColumnsPlaceHolder | translate }}\" [(ngModel)]=\"searchFilter\"/>\n <button *ngIf=\"searchFilter\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearFilterValue()\">\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n </div>\n <div class=\"column-drag-container-header\">{{ data?.availableLabel | translate }}</div>\n <div\n cdkDropList\n cdkDropListSortingDisabled\n #availableList=\"cdkDropList\"\n [cdkDropListData]=\"availableColumns\"\n [cdkDropListConnectedTo]=\"[selectedList]\"\n class=\"column-drag-list\"\n (cdkDropListDropped)=\"onDrop($event)\">\n <div *ngFor=\"let availableColumn of filteredAvailableColumns\" class=\"column-drag-box\" cdkDrag [id]=\"availableColumn.id\">\n {{availableColumn.label}}\n </div>\n </div>\n </div>\n </div>\n\n</div>\n<div mat-dialog-actions [align]=\"'end'\">\n <mad-outline-button (click)=\"onCancel()\">\n {{ data?.cancelLabel | translate }}\n </mad-outline-button>\n <mad-danger-button *ngIf=\"data?.deleteDefinitionAllowed\" (click)=\"onDelete()\">\n {{ data?.deleteLabel | translate }}\n </mad-danger-button>\n <mad-primary-button (click)=\"onSave()\" [disabled]=\"!(this.selectedColumns?.length > 0)\">\n {{ data?.saveLabel | translate }}\n </mad-primary-button>\n</div>\n", styles: [".column-drag-main-content{display:flex;flex-direction:row;width:544px;justify-content:space-between;padding:8px 8px 16px;margin-bottom:16px;border-bottom:1px solid whitesmoke}.column-drag-container{width:256px;max-width:100%;display:inline-block;vertical-align:top;font-size:small}.info-box{width:100%;font-size:small;margin-bottom:16px;color:#000000a8}.column-drag-info-area{width:100%;height:36px;margin-bottom:32px;color:#000000a8;font-size:small;display:flex;justify-content:right;align-items:stretch;flex-direction:column}.column-drag-list{border:solid 1px #ccc;height:200px;box-sizing:border-box;background:white;border-radius:4px;overflow:auto;display:block}.column-drag-container-header{font-weight:700;margin-bottom:4px}.column-drag-box{padding:12px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;height:40px;cursor:move;background:white;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-drag-box:last-child{border:none}.column-drag-list.cdk-drop-list-dragging .column-drag-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type:
|
|
1934
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DataTableColumnsModalComponent, selector: "mad-data-table-columns-modal.component", ngImport: i0, template: "<h1 mat-dialog-title>{{ data?.titleLabel | translate }}</h1>\n<div mat-dialog-content>\n <div class=\"column-drag-main-content\">\n <div class=\"column-drag-container\">\n <div class=\"column-drag-info-area\">{{ data?.infoTextLabel | translate }}</div>\n <div class=\"column-drag-container-header\">{{ data?.selectedLabel | translate }}</div>\n <div\n cdkDropList\n #selectedList=\"cdkDropList\"\n [cdkDropListData]=\"selectedColumns\"\n [cdkDropListConnectedTo]=\"[availableList]\"\n class=\"column-drag-list selected-drag-list\"\n (cdkDropListDropped)=\"onDrop($event)\">\n <div class=\"column-drag-box\"\n *ngFor=\"let selectedColumn of selectedColumns; let i = index\"\n cdkDrag\n [id]=\"selectedColumn.id\"\n >\n {{i + 1}}. {{selectedColumn.label | translate }}\n </div>\n </div>\n </div>\n\n <div class=\"column-drag-container\">\n <div class=\"column-drag-info-area\">\n <!-- Table filter -->\n <mat-form-field>\n <mat-label>{{ data?.filterColumnsLabel | translate }}</mat-label>\n <input matInput autocomplete=\"off\" (keyup)=\"updateFilterValue()\"\n placeholder=\"{{ data?.filterColumnsPlaceHolder | translate }}\" [(ngModel)]=\"searchFilter\"/>\n <button *ngIf=\"searchFilter\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearFilterValue()\">\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n </div>\n <div class=\"column-drag-container-header\">{{ data?.availableLabel | translate }}</div>\n <div\n cdkDropList\n cdkDropListSortingDisabled\n #availableList=\"cdkDropList\"\n [cdkDropListData]=\"availableColumns\"\n [cdkDropListConnectedTo]=\"[selectedList]\"\n class=\"column-drag-list\"\n (cdkDropListDropped)=\"onDrop($event)\">\n <div *ngFor=\"let availableColumn of filteredAvailableColumns\" class=\"column-drag-box\" cdkDrag [id]=\"availableColumn.id\">\n {{availableColumn.label}}\n </div>\n </div>\n </div>\n </div>\n\n</div>\n<div mat-dialog-actions [align]=\"'end'\">\n <mad-outline-button (click)=\"onCancel()\">\n {{ data?.cancelLabel | translate }}\n </mad-outline-button>\n <mad-danger-button *ngIf=\"data?.deleteDefinitionAllowed\" (click)=\"onDelete()\">\n {{ data?.deleteLabel | translate }}\n </mad-danger-button>\n <mad-primary-button (click)=\"onSave()\" [disabled]=\"!(this.selectedColumns?.length > 0)\">\n {{ data?.saveLabel | translate }}\n </mad-primary-button>\n</div>\n", styles: [".column-drag-main-content{display:flex;flex-direction:row;width:544px;justify-content:space-between;padding:8px 8px 16px;margin-bottom:16px;border-bottom:1px solid whitesmoke}.column-drag-container{width:256px;max-width:100%;display:inline-block;vertical-align:top;font-size:small}.info-box{width:100%;font-size:small;margin-bottom:16px;color:#000000a8}.column-drag-info-area{width:100%;height:36px;margin-bottom:32px;color:#000000a8;font-size:small;display:flex;justify-content:right;align-items:stretch;flex-direction:column}.column-drag-list{border:solid 1px #ccc;height:200px;box-sizing:border-box;background:white;border-radius:4px;overflow:auto;display:block}.column-drag-container-header{font-weight:700;margin-bottom:4px}.column-drag-box{padding:12px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;height:40px;cursor:move;background:white;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-drag-box:last-child{border:none}.column-drag-list.cdk-drop-list-dragging .column-drag-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: "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: DangerButtonComponent, selector: "mad-danger-button", inputs: ["type", "disabled", "title"] }, { kind: "directive", type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
|
|
1881
1935
|
}
|
|
1882
1936
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DataTableColumnsModalComponent, decorators: [{
|
|
1883
1937
|
type: Component,
|
|
@@ -2304,7 +2358,7 @@ class DataTableComponent {
|
|
|
2304
2358
|
}
|
|
2305
2359
|
}
|
|
2306
2360
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DataTableComponent, deps: [{ token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2307
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DataTableComponent, selector: "mad-data-table", inputs: { filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", filterColumnsLabel: "filterColumnsLabel", filterColumnsPlaceHolder: "filterColumnsPlaceHolder", noDataText: "noDataText", columnSettingsModalTitleLabel: "columnSettingsModalTitleLabel", selectedLabel: "selectedLabel", availableLabel: "availableLabel", saveLabel: "saveLabel", deleteLabel: "deleteLabel", cancelLabel: "cancelLabel", infoTextLabel: "infoTextLabel", tableClass: "tableClass", pageSizeOptions: "pageSizeOptions", externalFilter: "externalFilter", actions: "actions", idGenerator: "idGenerator", parentIdGenerator: "parentIdGenerator", deleteDefinitionAllowed: "deleteDefinitionAllowed", useAsync: "useAsync", translateLabels: "translateLabels", filterValue: "filterValue", displayedColumns: "displayedColumns", displayedColumnDefinition: "displayedColumnDefinition", tableData: "tableData", page: "page", columnDefinitions: "columnDefinitions", loading: "loading", defaultPageSize: "defaultPageSize", externalPaginator: "externalPaginator", paginationEnabled: "paginationEnabled", allColumns: "allColumns", filterEnabled: "filterEnabled", forceMode: "forceMode" }, outputs: { sortEvent: "sortEvent", actionEvent: "actionEvent", pageEvent: "pageEvent", allColumnsEvent: "allColumnsEvent", columnDefinitionChangeEvent: "columnDefinitionChangeEvent", viewDefinitionChangeEvent: "viewDefinitionChangeEvent" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<div class=\"mad-datatable-action-bar\">\n <!-- Table actions: displayed before the table -->\n <div *ngIf=\"tableActions?.length\">\n <mad-outline-button\n [disabled]=\"isDisabled(tableAction.type)\"\n class=\"table-action\"\n *ngFor=\"let tableAction of tableActions\"\n (click)=\"onTableAction(tableAction)\">\n {{ translateLabels ? (tableAction.label | translate) : tableAction.label }} {{ getSelectedCount(tableAction.type) }}\n </mad-outline-button>\n </div>\n <!-- Table filter -->\n <mat-form-field *ngIf=\"isFilterEnabled\">\n <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n <input matInput autocomplete=\"off\" (keyup)=\"setFilterValue($event?.target?.value)\"\n placeholder=\"{{ filterPlaceholder }}\" />\n </mat-form-field>\n</div>\n\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\"\n (click)=\"onRowEvent($event, element, rowAction)\">\n {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n <button *ngFor=\"let definition of editableColumnDefinitions\"\n mat-menu-item\n class=\"row-action\"\n (click)=\"onColumnSettings(definition)\"\n [ngClass]=\"{'active-column-definition': isCurrentDefinition(definition)}\"\n >\n {{ translateLabels ? (definition.label | translate) : definition.label }}\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n <button *ngFor=\"let definition of viewableColumnDefinitions\"\n mat-menu-item\n class=\"row-action\"\n (click)=\"onViewDefinition(definition)\"\n [ngClass]=\"{'active-column-definition': isCurrentDefinition(definition)}\"\n >\n {{ translateLabels ? (definition.label | translate) : definition.label }}\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- Table -->\n<div *ngIf=\"rowCount > 0; else noData\" class=\"datatable\" [class]=\"tableClass\">\n <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n\n <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n <!-- Row actions column-->\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"mode === NONE ? 'no-action-cell' : 'row-action-cell'\">\n <!-- BATCH: master checkbox -->\n <div *ngIf=\"mode === BATCH\" class=\"mad-datatable-checkbox-container\">\n <mat-checkbox\n (change)=\"onToggleSelectAll()\"\n [checked]=\"allSelected\"\n >\n </mat-checkbox>\n </div>\n <!-- SINGLE / NONE: nothing in header row -->\n </th>\n <td mat-cell *matCellDef=\"let element\" [ngClass]=\"mode === NONE ? 'no-action-cell' : 'row-action-cell'\">\n <!-- BATCH: row checkbox -->\n <div *ngIf=\"!element.parentId && (mode === BATCH)\" class=\"mad-datatable-checkbox-container\">\n <mat-checkbox\n class=\"no-pointer-events\"\n [checked]=\"isSelected(element.rowId)\"\n >\n </mat-checkbox>\n </div>\n <!-- SINGLE: row action menu icon -->\n <mad-icon-button\n *ngIf=\"!element.parentId && (mode === SINGLE)\"\n [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"rowActionMenu\"\n >\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n <!-- NONE: nothing -->\n </td>\n </ng-container>\n <!-- Cell definitions and rows with injected cells -->\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <!-- header cell to be injected -->\n <ng-container *ngIf=\"column.isSortable; else noSort\">\n <th\n scope=\"col\"\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"{{ column.orderByName? column.orderByName : column.dataPropertyName }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n [class.text-right]=\"column.isRightAligned\"\n >\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n <ng-template #noSort>\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-template>\n <!-- data cell to be injected -->\n <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\" [class.mad-dt-child-cell]=\"element.parentId\" [ngSwitch]=\"column.transformer\">\n <span>\n {{ element[column.dataPropertyName] }}\n </span>\n </td>\n </ng-container>\n <!-- header row where cells will be injected -->\n <tr mat-header-row *matHeaderRowDef=\"columnIds\"></tr>\n <!-- data row where cells will be injected -->\n <tr\n mat-row\n [class.clickable-table-row]=\"!row.parentId && isRowClickable\"\n (click)=\"onRowEvent($event, row)\"\n *matRowDef=\"let row; columns: columnIds\"\n ></tr>\n </table>\n</div>\n<div class=\"mad-data-table-bottom-area\">\n <div class=\"mad-data-table-bottom-info-area\">\n <!-- column settings: 1 definition -->\n <mad-icon-button\n *ngIf=\"this.editableColumnDefinitions?.length == 1\"\n (click)=\"onColumnSettings()\"\n >\n <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n </mad-icon-button>\n <!-- column settings: multiple definitions -->\n <mad-icon-button\n *ngIf=\"this.editableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\"\n >\n <mat-icon>view_column</mat-icon>\n </mad-icon-button>\n <!-- column view: multiple definitions -->\n <mad-icon-button\n *ngIf=\"this.viewableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\"\n >\n <mat-icon>preview</mat-icon>\n </mad-icon-button>\n </div>\n\n <!-- Pagination -->\n <mat-paginator\n [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n [length]=\"paginatorLength\"\n [pageIndex]=\"paginatorPageIndex\"\n [pageSize]=\"paginatorPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"onPageEvent($event)\"\n showFirstLastButtons\n >\n </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n <div class=\"noDataText\">\n <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n {{ noDataText }}\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:#fff}.datatable-vertical-stretch-to-parent{flex:1;max-height:100%;width:100%;display:flex;flex-direction:column}.datatable-max-height-500{max-height:500px}.datatable-max-height-300{max-height:300px}.datatable-max-height,.datatable-max-height-500,.datatable-max-height-300{flex:1;width:100%;display:flex;flex-direction:column}.datatable{overflow:auto;flex:1 1 auto;height:100%;position:relative;width:100%}.datatable table{max-height:100%;width:100%}.datatable th,.datatable td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.text-right{text-align:right!important;padding-right:24px!important}.table-action{margin-right:.5em;margin-bottom:.5em}.row-action-cell{width:48px!important;padding-left:8px!important}.no-action-cell{width:8px!important;padding:0}.noDataText{width:100%;text-align:center;position:relative}.mad-datatable-action-bar{display:flex;justify-content:space-between;align-items:baseline}.mad-datatable-checkbox-container{margin-right:8px;margin-left:8px}.mad-datatable-spinner-wrapper{background-color:#fff;opacity:.8;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:99999;pointer-events:unset}.mad-data-table-bottom-area{display:flex;flex-direction:row}.mad-data-table-bottom-area .mad-data-table-bottom-info-area{display:flex;flex:1}.mat-mdc-header-row th{position:sticky;top:0;background-color:#fff;z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:#000;background-color:#f5f5f5}.mad-dt-child-cell{color:#0009}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: 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: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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: "component", type: i13.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
|
|
2361
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DataTableComponent, selector: "mad-data-table", inputs: { filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", filterColumnsLabel: "filterColumnsLabel", filterColumnsPlaceHolder: "filterColumnsPlaceHolder", noDataText: "noDataText", columnSettingsModalTitleLabel: "columnSettingsModalTitleLabel", selectedLabel: "selectedLabel", availableLabel: "availableLabel", saveLabel: "saveLabel", deleteLabel: "deleteLabel", cancelLabel: "cancelLabel", infoTextLabel: "infoTextLabel", tableClass: "tableClass", pageSizeOptions: "pageSizeOptions", externalFilter: "externalFilter", actions: "actions", idGenerator: "idGenerator", parentIdGenerator: "parentIdGenerator", deleteDefinitionAllowed: "deleteDefinitionAllowed", useAsync: "useAsync", translateLabels: "translateLabels", filterValue: "filterValue", displayedColumns: "displayedColumns", displayedColumnDefinition: "displayedColumnDefinition", tableData: "tableData", page: "page", columnDefinitions: "columnDefinitions", loading: "loading", defaultPageSize: "defaultPageSize", externalPaginator: "externalPaginator", paginationEnabled: "paginationEnabled", allColumns: "allColumns", filterEnabled: "filterEnabled", forceMode: "forceMode" }, outputs: { sortEvent: "sortEvent", actionEvent: "actionEvent", pageEvent: "pageEvent", allColumnsEvent: "allColumnsEvent", columnDefinitionChangeEvent: "columnDefinitionChangeEvent", viewDefinitionChangeEvent: "viewDefinitionChangeEvent" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<div class=\"mad-datatable-action-bar\">\n <!-- Table actions: displayed before the table -->\n <div *ngIf=\"tableActions?.length\">\n <mad-outline-button\n [disabled]=\"isDisabled(tableAction.type)\"\n class=\"table-action\"\n *ngFor=\"let tableAction of tableActions\"\n (click)=\"onTableAction(tableAction)\">\n {{ translateLabels ? (tableAction.label | translate) : tableAction.label }} {{ getSelectedCount(tableAction.type) }}\n </mad-outline-button>\n </div>\n <!-- Table filter -->\n <mat-form-field *ngIf=\"isFilterEnabled\">\n <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n <input matInput autocomplete=\"off\" (keyup)=\"setFilterValue($event?.target?.value)\"\n placeholder=\"{{ filterPlaceholder }}\" />\n </mat-form-field>\n</div>\n\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\"\n (click)=\"onRowEvent($event, element, rowAction)\">\n {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n <button *ngFor=\"let definition of editableColumnDefinitions\"\n mat-menu-item\n class=\"row-action\"\n (click)=\"onColumnSettings(definition)\"\n [ngClass]=\"{'active-column-definition': isCurrentDefinition(definition)}\"\n >\n {{ translateLabels ? (definition.label | translate) : definition.label }}\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n <button *ngFor=\"let definition of viewableColumnDefinitions\"\n mat-menu-item\n class=\"row-action\"\n (click)=\"onViewDefinition(definition)\"\n [ngClass]=\"{'active-column-definition': isCurrentDefinition(definition)}\"\n >\n {{ translateLabels ? (definition.label | translate) : definition.label }}\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- Table -->\n<div *ngIf=\"rowCount > 0; else noData\" class=\"datatable\" [class]=\"tableClass\">\n <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n\n <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n <!-- Row actions column-->\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"mode === NONE ? 'no-action-cell' : 'row-action-cell'\">\n <!-- BATCH: master checkbox -->\n <div *ngIf=\"mode === BATCH\" class=\"mad-datatable-checkbox-container\">\n <mat-checkbox\n (change)=\"onToggleSelectAll()\"\n [checked]=\"allSelected\"\n >\n </mat-checkbox>\n </div>\n <!-- SINGLE / NONE: nothing in header row -->\n </th>\n <td mat-cell *matCellDef=\"let element\" [ngClass]=\"mode === NONE ? 'no-action-cell' : 'row-action-cell'\">\n <!-- BATCH: row checkbox -->\n <div *ngIf=\"!element.parentId && (mode === BATCH)\" class=\"mad-datatable-checkbox-container\">\n <mat-checkbox\n class=\"no-pointer-events\"\n [checked]=\"isSelected(element.rowId)\"\n >\n </mat-checkbox>\n </div>\n <!-- SINGLE: row action menu icon -->\n <mad-icon-button\n *ngIf=\"!element.parentId && (mode === SINGLE)\"\n [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"rowActionMenu\"\n >\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n <!-- NONE: nothing -->\n </td>\n </ng-container>\n <!-- Cell definitions and rows with injected cells -->\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <!-- header cell to be injected -->\n <ng-container *ngIf=\"column.isSortable; else noSort\">\n <th\n scope=\"col\"\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"{{ column.orderByName? column.orderByName : column.dataPropertyName }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n [class.text-right]=\"column.isRightAligned\"\n >\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n <ng-template #noSort>\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-template>\n <!-- data cell to be injected -->\n <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\" [class.mad-dt-child-cell]=\"element.parentId\" [ngSwitch]=\"column.transformer\">\n <span>\n {{ element[column.dataPropertyName] }}\n </span>\n </td>\n </ng-container>\n <!-- header row where cells will be injected -->\n <tr mat-header-row *matHeaderRowDef=\"columnIds\"></tr>\n <!-- data row where cells will be injected -->\n <tr\n mat-row\n [class.clickable-table-row]=\"!row.parentId && isRowClickable\"\n (click)=\"onRowEvent($event, row)\"\n *matRowDef=\"let row; columns: columnIds\"\n ></tr>\n </table>\n</div>\n<div class=\"mad-data-table-bottom-area\">\n <div class=\"mad-data-table-bottom-info-area\">\n <!-- column settings: 1 definition -->\n <mad-icon-button\n *ngIf=\"this.editableColumnDefinitions?.length == 1\"\n (click)=\"onColumnSettings()\"\n >\n <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n </mad-icon-button>\n <!-- column settings: multiple definitions -->\n <mad-icon-button\n *ngIf=\"this.editableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\"\n >\n <mat-icon>view_column</mat-icon>\n </mad-icon-button>\n <!-- column view: multiple definitions -->\n <mad-icon-button\n *ngIf=\"this.viewableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\"\n >\n <mat-icon>preview</mat-icon>\n </mad-icon-button>\n </div>\n\n <!-- Pagination -->\n <mat-paginator\n [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n [length]=\"paginatorLength\"\n [pageIndex]=\"paginatorPageIndex\"\n [pageSize]=\"paginatorPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"onPageEvent($event)\"\n showFirstLastButtons\n >\n </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n <div class=\"noDataText\">\n <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n {{ noDataText }}\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:#fff}.datatable-vertical-stretch-to-parent{flex:1;max-height:100%;width:100%;display:flex;flex-direction:column}.datatable-max-height-500{max-height:500px}.datatable-max-height-300{max-height:300px}.datatable-max-height,.datatable-max-height-500,.datatable-max-height-300{flex:1;width:100%;display:flex;flex-direction:column}.datatable{overflow:auto;flex:1 1 auto;height:100%;position:relative;width:100%}.datatable table{max-height:100%;width:100%}.datatable th,.datatable td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.text-right{text-align:right!important;padding-right:24px!important}.table-action{margin-right:.5em;margin-bottom:.5em}.row-action-cell{width:48px!important;padding-left:8px!important}.no-action-cell{width:8px!important;padding:0}.noDataText{width:100%;text-align:center;position:relative}.mad-datatable-action-bar{display:flex;justify-content:space-between;align-items:baseline}.mad-datatable-checkbox-container{margin-right:8px;margin-left:8px}.mad-datatable-spinner-wrapper{background-color:#fff;opacity:.8;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:99999;pointer-events:unset}.mad-data-table-bottom-area{display:flex;flex-direction:row}.mad-data-table-bottom-area .mad-data-table-bottom-info-area{display:flex;flex:1}.mat-mdc-header-row th{position:sticky;top:0;background-color:#fff;z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:#000;background-color:#f5f5f5}.mad-dt-child-cell{color:#0009}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { 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: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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: "component", type: i13.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
|
|
2308
2362
|
}
|
|
2309
2363
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
2310
2364
|
type: Component,
|
|
@@ -2499,7 +2553,7 @@ class StepHeaderComponent extends CdkStepHeader {
|
|
|
2499
2553
|
return '';
|
|
2500
2554
|
}
|
|
2501
2555
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: StepHeaderComponent, deps: [{ token: i1$5.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2502
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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 [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;display:flex;flex-direction:row;gap:1em}.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:
|
|
2556
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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 [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;display:flex;flex-direction:row;gap:1em}.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2503
2557
|
}
|
|
2504
2558
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: StepHeaderComponent, decorators: [{
|
|
2505
2559
|
type: Component,
|
|
@@ -2608,7 +2662,7 @@ class StepComponent extends CdkStep {
|
|
|
2608
2662
|
}
|
|
2609
2663
|
}
|
|
2610
2664
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: StepComponent, deps: [{ token: forwardRef(() => StepperComponent) }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2611
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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\">\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;display:flex;flex-direction:column}.step-content,.step-buttons{padding:2em}\n"], dependencies: [{ kind: "directive", type:
|
|
2665
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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\">\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;display:flex;flex-direction:column}.step-content,.step-buttons{padding:2em}\n"], dependencies: [{ kind: "directive", type: i2.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 }); }
|
|
2612
2666
|
}
|
|
2613
2667
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: StepComponent, decorators: [{
|
|
2614
2668
|
type: Component,
|
|
@@ -2663,8 +2717,8 @@ class StepperComponent extends CdkStepper {
|
|
|
2663
2717
|
_stepIsNavigable(index, step) {
|
|
2664
2718
|
return step.completed || this.selectedIndex === index || !this.linear;
|
|
2665
2719
|
}
|
|
2666
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: StepperComponent, deps: [{ token: i3$
|
|
2667
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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;display:flex;flex-direction:column}.step-content,.step-buttons{padding:2em}\n"], dependencies: [{ kind: "directive", type:
|
|
2720
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: StepperComponent, deps: [{ token: i3$2.Directionality, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2721
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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;display:flex;flex-direction:column}.step-content,.step-buttons{padding:2em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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 }); }
|
|
2668
2722
|
}
|
|
2669
2723
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: StepperComponent, decorators: [{
|
|
2670
2724
|
type: Component,
|
|
@@ -2673,7 +2727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
2673
2727
|
'[attr.aria-orientation]': '"vertical"',
|
|
2674
2728
|
role: 'tablist',
|
|
2675
2729
|
}, 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;display:flex;flex-direction:column}.step-content,.step-buttons{padding:2em}\n"] }]
|
|
2676
|
-
}], ctorParameters: function () { return [{ type: i3$
|
|
2730
|
+
}], ctorParameters: function () { return [{ type: i3$2.Directionality, decorators: [{
|
|
2677
2731
|
type: Optional
|
|
2678
2732
|
}] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { animationDone: [{
|
|
2679
2733
|
type: Output
|
|
@@ -2946,7 +3000,7 @@ class FlowbarComponent {
|
|
|
2946
3000
|
return this._steps.slice(index + 1, this._steps.length).find(step => step.enabled);
|
|
2947
3001
|
}
|
|
2948
3002
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: FlowbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2949
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: FlowbarComponent, selector: "mad-flowbar", inputs: { _steps: ["steps", "_steps"], _activeStep: ["activeStep", "_activeStep"] }, outputs: { _activeStepChange: "activeStepChange", _headerClick: "headerClick" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, 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", styles: [".stepper-container{display:flex;padding:0 1rem}::ng-deep .mat-stepper-horizontal .mat-horizontal-stepper-header{padding:0;height:auto}::ng-deep .mat-step-header[aria-labelledby=disabled]{pointer-events:none!important;cursor:not-allowed}::ng-deep .mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 10px}::ng-deep .mat-stepper-horizontal .mat-stepper-horizontal-line{margin:0 5px;border-top-width:4px}.step-header-overlay{position:absolute;width:100%;height:100%;right:0;top:0}\n"], dependencies: [{ kind: "directive", type:
|
|
3003
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: FlowbarComponent, selector: "mad-flowbar", inputs: { _steps: ["steps", "_steps"], _activeStep: ["activeStep", "_activeStep"] }, outputs: { _activeStepChange: "activeStepChange", _headerClick: "headerClick" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, 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", styles: [".stepper-container{display:flex;padding:0 1rem}::ng-deep .mat-stepper-horizontal .mat-horizontal-stepper-header{padding:0;height:auto}::ng-deep .mat-step-header[aria-labelledby=disabled]{pointer-events:none!important;cursor:not-allowed}::ng-deep .mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 10px}::ng-deep .mat-stepper-horizontal .mat-stepper-horizontal-line{margin:0 5px;border-top-width:4px}.step-header-overlay{position:absolute;width:100%;height:100%;right:0;top:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$4.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$4.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$4.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }] }); }
|
|
2950
3004
|
}
|
|
2951
3005
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: FlowbarComponent, decorators: [{
|
|
2952
3006
|
type: Component,
|
|
@@ -3025,5 +3079,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
3025
3079
|
* Generated bundle index. Do not edit.
|
|
3026
3080
|
*/
|
|
3027
3081
|
|
|
3028
|
-
export { BaseQuickListComponent, ButtonModule, CardComponent, CardModule, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelModule, DangerButtonComponent, DataTableColumnsModalComponent, DataTableComponent, DataTableModule, FlowbarComponent, FlowbarModule, IconButtonComponent, LinkButtonComponent, MadBasicButton, MainContainerComponent, MaterialActionButtonComponent, MaterialActionButtonModule, MaterialAddonsModule, NumberFormatService, NumericFieldDirective, NumericFieldModule, OutlineButtonComponent, PrimaryButtonComponent, QuickListCompactComponent, QuickListComponent, QuickListModule, ReadOnlyFormFieldComponent, ReadOnlyFormFieldModule, ReadOnlyFormFieldWrapperComponent, StepComponent, StepHeaderComponent, StepperComponent, StepperModule, TableComponent, TableModule, ThrottleClickDirective, ThrottleClickModule, ToolbarComponent, ToolbarModule, ToolbarService, madStepperAnimations };
|
|
3082
|
+
export { BaseQuickListComponent, ButtonModule, CardComponent, CardModule, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelModule, DangerButtonComponent, DataTableColumnsModalComponent, DataTableComponent, DataTableModule, FlowbarComponent, FlowbarModule, IconButtonComponent, LinkButtonComponent, MadBasicButton, MainContainerComponent, MaterialActionButtonComponent, MaterialActionButtonModule, MaterialAddonsModule, NumberFormatService, NumericFieldDirective, NumericFieldModule, OutlineButtonComponent, PrimaryButtonComponent, QuickListCompactComponent, QuickListComponent, QuickListModule, ReactiveFormQuickListCompactComponent, ReactiveFormQuickListComponent, ReadOnlyFormFieldComponent, ReadOnlyFormFieldModule, ReadOnlyFormFieldWrapperComponent, StepComponent, StepHeaderComponent, StepperComponent, StepperModule, TableComponent, TableModule, ThrottleClickDirective, ThrottleClickModule, ToolbarComponent, ToolbarModule, ToolbarService, madStepperAnimations };
|
|
3029
3083
|
//# sourceMappingURL=porscheinformatik-material-addons.mjs.map
|