@porscheinformatik/material-addons 17.4.1 → 17.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/button/danger-button/danger-button.component.mjs +3 -3
- package/esm2022/lib/button/flat-button/link-button.component.mjs +3 -3
- package/esm2022/lib/button/icon-button/icon-button.component.mjs +3 -3
- package/esm2022/lib/button/outline-button/outline-button.component.mjs +3 -3
- package/esm2022/lib/button/primary-button/primary-button.component.mjs +3 -3
- package/esm2022/lib/card/card.component.mjs +3 -3
- package/esm2022/lib/data-table/configuration/data-table-global-configuration.mjs +2 -2
- package/esm2022/lib/data-table/data-table.component.mjs +33 -14
- package/esm2022/lib/data-table/util/data-table-sort-util.mjs +9 -6
- package/esm2022/lib/layout/sidebar/sidebar.component.mjs +6 -4
- package/esm2022/lib/layout/toolbar/toolbar.component.mjs +3 -3
- package/esm2022/lib/quick-list/quick-list-compact/quick-list-compact.component.mjs +3 -3
- package/esm2022/lib/quick-list/quick-list.component.mjs +3 -3
- package/esm2022/lib/quick-list/reactive-form-quick-list/reactive-form-quick-list.component.mjs +3 -3
- package/esm2022/lib/quick-list/reactive-form-quick-list-compact/reactive-form-quick-list-compact.component.mjs +3 -3
- package/esm2022/lib/readonly/readonly-form-field/readonly-form-field.component.mjs +59 -7
- package/esm2022/lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component.mjs +7 -59
- package/esm2022/lib/stepper/step-header/step-header.component.mjs +3 -3
- package/esm2022/lib/stepper/stepper.component.mjs +5 -5
- package/fesm2022/porscheinformatik-material-addons.mjs +134 -110
- package/fesm2022/porscheinformatik-material-addons.mjs.map +1 -1
- package/lib/data-table/configuration/data-table-global-configuration.d.ts +1 -1
- package/lib/data-table/configuration/data-table-global-configuration.d.ts.map +1 -1
- package/lib/data-table/data-table.component.d.ts +8 -3
- package/lib/data-table/data-table.component.d.ts.map +1 -1
- package/lib/data-table/util/data-table-sort-util.d.ts +2 -2
- package/lib/data-table/util/data-table-sort-util.d.ts.map +1 -1
- package/lib/layout/sidebar/sidebar.component.d.ts +1 -1
- package/lib/layout/sidebar/sidebar.component.d.ts.map +1 -1
- package/lib/quick-list/quick-list-compact/quick-list-compact.component.d.ts.map +1 -1
- package/lib/readonly/readonly-form-field/readonly-form-field.component.d.ts +10 -1
- package/lib/readonly/readonly-form-field/readonly-form-field.component.d.ts.map +1 -1
- package/lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component.d.ts +1 -10
- package/lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component.d.ts.map +1 -1
- package/package.json +1 -1
- package/themes/common/styles.scss +8 -4
|
@@ -151,11 +151,11 @@ class DangerButtonComponent extends MadBasicButton {
|
|
|
151
151
|
super.disabled = this.disabled;
|
|
152
152
|
}
|
|
153
153
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DangerButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
154
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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] ", exportAs: ["matButton"] }] }); }
|
|
154
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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 data-cy=\"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] ", exportAs: ["matButton"] }] }); }
|
|
155
155
|
}
|
|
156
156
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DangerButtonComponent, decorators: [{
|
|
157
157
|
type: Component,
|
|
158
|
-
args: [{ selector: 'mad-danger-button', template: "<button mat-raised-button color=\"warn\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n" }]
|
|
158
|
+
args: [{ selector: 'mad-danger-button', template: "<button data-cy=\"button\" mat-raised-button color=\"warn\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n" }]
|
|
159
159
|
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
160
160
|
type: Input
|
|
161
161
|
}], disabled: [{
|
|
@@ -175,11 +175,11 @@ class LinkButtonComponent extends MadBasicButton {
|
|
|
175
175
|
super.disabled = this.disabled;
|
|
176
176
|
}
|
|
177
177
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: LinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
178
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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", dependencies: [{ kind: "component", type: i1$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
178
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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 data-cy=\"button\" [title]=\"title\" [type]=\"type\" color=\"primary\" #btn mat-button>\n <ng-content></ng-content>\n</button>\n", dependencies: [{ kind: "component", type: i1$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
179
179
|
}
|
|
180
180
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: LinkButtonComponent, decorators: [{
|
|
181
181
|
type: Component,
|
|
182
|
-
args: [{ selector: 'mad-link-button', template: "<button [title]=\"title\" [type]=\"type\" color=\"primary\" #btn mat-button>\n <ng-content></ng-content>\n</button>\n" }]
|
|
182
|
+
args: [{ selector: 'mad-link-button', template: "<button data-cy=\"button\" [title]=\"title\" [type]=\"type\" color=\"primary\" #btn mat-button>\n <ng-content></ng-content>\n</button>\n" }]
|
|
183
183
|
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
184
184
|
type: Input
|
|
185
185
|
}], disabled: [{
|
|
@@ -199,11 +199,11 @@ class IconButtonComponent extends MadBasicButton {
|
|
|
199
199
|
super.disabled = this.disabled;
|
|
200
200
|
}
|
|
201
201
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
202
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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", dependencies: [{ kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
|
|
202
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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 data-cy=\"button\" mat-icon-button color=\"primary\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n", dependencies: [{ kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
|
|
203
203
|
}
|
|
204
204
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
205
205
|
type: Component,
|
|
206
|
-
args: [{ selector: 'mad-icon-button', template: "<button mat-icon-button color=\"primary\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n" }]
|
|
206
|
+
args: [{ selector: 'mad-icon-button', template: "<button data-cy=\"button\" mat-icon-button color=\"primary\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n" }]
|
|
207
207
|
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
208
208
|
type: Input
|
|
209
209
|
}], disabled: [{
|
|
@@ -224,11 +224,11 @@ class OutlineButtonComponent extends MadBasicButton {
|
|
|
224
224
|
super.disabled = this.disabled;
|
|
225
225
|
}
|
|
226
226
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: OutlineButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
227
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: { type: "type", disabled: "disabled", title: "title", color: "color" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["btn"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button mat-stroked-button [color]=\"color\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n", styles: [".mat-mdc-outlined-button:not(:disabled){--mdc-outlined-button-outline-color: var(--mdc-outlined-button-label-text-color)}\n"], dependencies: [{ kind: "component", type: i1$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
227
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: { type: "type", disabled: "disabled", title: "title", color: "color" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["btn"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button data-cy=\"button\" mat-stroked-button [color]=\"color\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n", styles: [".mat-mdc-outlined-button:not(:disabled){--mdc-outlined-button-outline-color: var(--mdc-outlined-button-label-text-color)}\n"], dependencies: [{ kind: "component", type: i1$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
228
228
|
}
|
|
229
229
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: OutlineButtonComponent, decorators: [{
|
|
230
230
|
type: Component,
|
|
231
|
-
args: [{ selector: 'mad-outline-button', template: "<button mat-stroked-button [color]=\"color\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n", styles: [".mat-mdc-outlined-button:not(:disabled){--mdc-outlined-button-outline-color: var(--mdc-outlined-button-label-text-color)}\n"] }]
|
|
231
|
+
args: [{ selector: 'mad-outline-button', template: "<button data-cy=\"button\" mat-stroked-button [color]=\"color\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n", styles: [".mat-mdc-outlined-button:not(:disabled){--mdc-outlined-button-outline-color: var(--mdc-outlined-button-label-text-color)}\n"] }]
|
|
232
232
|
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
233
233
|
type: Input
|
|
234
234
|
}], disabled: [{
|
|
@@ -250,11 +250,11 @@ class PrimaryButtonComponent extends MadBasicButton {
|
|
|
250
250
|
super.disabled = this.disabled;
|
|
251
251
|
}
|
|
252
252
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: PrimaryButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
253
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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", dependencies: [{ kind: "component", type: i1$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
253
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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 data-cy=\"button\" mat-raised-button color=\"primary\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n", dependencies: [{ kind: "component", type: i1$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
254
254
|
}
|
|
255
255
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: PrimaryButtonComponent, decorators: [{
|
|
256
256
|
type: Component,
|
|
257
|
-
args: [{ selector: 'mad-primary-button', template: "<button mat-raised-button color=\"primary\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n" }]
|
|
257
|
+
args: [{ selector: 'mad-primary-button', template: "<button data-cy=\"button\" mat-raised-button color=\"primary\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n" }]
|
|
258
258
|
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
259
259
|
type: Input
|
|
260
260
|
}], disabled: [{
|
|
@@ -526,10 +526,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
526
526
|
* @author Stefan Laesser
|
|
527
527
|
*/
|
|
528
528
|
class ReadOnlyFormFieldComponent {
|
|
529
|
-
constructor(changeDetector, renderer, numberFormatService) {
|
|
529
|
+
constructor(changeDetector, renderer, numberFormatService, elementRef) {
|
|
530
530
|
this.changeDetector = changeDetector;
|
|
531
531
|
this.renderer = renderer;
|
|
532
532
|
this.numberFormatService = numberFormatService;
|
|
533
|
+
this.elementRef = elementRef;
|
|
533
534
|
this.useProjectedContent = false;
|
|
534
535
|
this.textAlign = 'left';
|
|
535
536
|
this.formatNumber = false;
|
|
@@ -556,6 +557,7 @@ class ReadOnlyFormFieldComponent {
|
|
|
556
557
|
this.errorMatcher = {
|
|
557
558
|
isErrorState: () => !!this.errorMessage,
|
|
558
559
|
};
|
|
560
|
+
this.toolTipForInputEnabled = false;
|
|
559
561
|
}
|
|
560
562
|
ngOnChanges(_) {
|
|
561
563
|
if (!NumberFormatService.valueIsSet(this.value)) {
|
|
@@ -576,6 +578,11 @@ class ReadOnlyFormFieldComponent {
|
|
|
576
578
|
// TODO direct copy from NumericFieldDirective
|
|
577
579
|
ngAfterViewChecked() {
|
|
578
580
|
this.injectUnitSymbol();
|
|
581
|
+
// If useProjectedContent is set to true, the input wont be show
|
|
582
|
+
if (!this.useProjectedContent) {
|
|
583
|
+
this.setReadonlyFieldStyle();
|
|
584
|
+
this.setTooltipForOverflownField();
|
|
585
|
+
}
|
|
579
586
|
}
|
|
580
587
|
suffixClicked() {
|
|
581
588
|
this.suffixClickedEmitter.emit(null);
|
|
@@ -630,13 +637,57 @@ class ReadOnlyFormFieldComponent {
|
|
|
630
637
|
this.unitSpan.textContent = this.unit;
|
|
631
638
|
}
|
|
632
639
|
}
|
|
633
|
-
|
|
634
|
-
|
|
640
|
+
setReadonlyFieldStyle() {
|
|
641
|
+
if (this.inputEl?.nativeElement) {
|
|
642
|
+
const textOverFlowStyleValue = this.getTextOverFlowStyleValue();
|
|
643
|
+
if (textOverFlowStyleValue) {
|
|
644
|
+
this.inputEl.nativeElement.setAttribute('style', 'text-overflow: ' + textOverFlowStyleValue);
|
|
645
|
+
}
|
|
646
|
+
}
|
|
647
|
+
}
|
|
648
|
+
// Ellipsis is enabled by default as text-overflow behaviour
|
|
649
|
+
getTextOverFlowStyleValue() {
|
|
650
|
+
// it works only if the style is added to the component directly. Should find a way for get it from the calculated
|
|
651
|
+
// style. Than it would be possible to define the text-overflow in css for the whole application
|
|
652
|
+
const textOverflow = this.elementRef?.nativeElement?.style.textOverflow;
|
|
653
|
+
if (!textOverflow) {
|
|
654
|
+
return 'ellipsis';
|
|
655
|
+
}
|
|
656
|
+
return textOverflow;
|
|
657
|
+
}
|
|
658
|
+
setTooltipForOverflownField() {
|
|
659
|
+
if (this.isEllipsisForTextOverflowEnabled()) {
|
|
660
|
+
if (this.inputEl) {
|
|
661
|
+
this.toolTipForInputEnabled = this.isTextOverflown(this.inputEl.nativeElement);
|
|
662
|
+
if (this.toolTipForInputEnabled) {
|
|
663
|
+
this.toolTipText = this.calculateToolTipText();
|
|
664
|
+
}
|
|
665
|
+
this.changeDetector.detectChanges();
|
|
666
|
+
}
|
|
667
|
+
}
|
|
668
|
+
}
|
|
669
|
+
isEllipsisForTextOverflowEnabled() {
|
|
670
|
+
return this.getTextOverFlowStyleValue() === 'ellipsis';
|
|
671
|
+
}
|
|
672
|
+
isTextOverflown(input) {
|
|
673
|
+
if (input) {
|
|
674
|
+
return input.offsetWidth < input.scrollWidth;
|
|
675
|
+
}
|
|
676
|
+
return false;
|
|
677
|
+
}
|
|
678
|
+
calculateToolTipText() {
|
|
679
|
+
if (!this.unit) {
|
|
680
|
+
return this.value;
|
|
681
|
+
}
|
|
682
|
+
return this.unitPosition === 'left' ? this.unit + ' ' + this.value : this.value + ' ' + this.unit;
|
|
683
|
+
}
|
|
684
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: NumberFormatService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
685
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ReadOnlyFormFieldComponent, selector: "mad-readonly-form-field", inputs: { useProjectedContent: "useProjectedContent", 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 [ngStyle]=\"{ display: useProjectedContent ? 'none' : 'block' }\"\n [ngModel]=\"value\"\n [ngClass]=\"'text-' + textAlign + ' content'\"\n [errorStateMatcher]=\"errorMatcher\"\n [id]=\"id\"\n readonly\n [disabled]=\"!useProjectedContent\"\n matInput\n #inputEl\n matTooltip=\"{{ toolTipText }}\"\n matTooltipPosition=\"right\"\n matTooltipClass=\"custom-tooltip\"\n matTooltipDisabled=\"{{ !toolTipForInputEnabled }}\"\n />\n\n <textarea\n *ngIf=\"multiline\"\n [ngStyle]=\"{ display: useProjectedContent ? 'none' : 'block' }\"\n [rows]=\"rows\"\n [ngModel]=\"value\"\n class=\"multiline content\"\n [errorStateMatcher]=\"errorMatcher\"\n [id]=\"id\"\n readonly\n [disabled]=\"!useProjectedContent\"\n matInput\n [cdkTextareaAutosize]=\"multilineAutoSize\"\n ></textarea>\n <ng-content *ngIf=\"useProjectedContent\" />\n <mat-error>{{ errorMessage }}</mat-error>\n <mat-icon data-cy=\"suffix-icon\" *ngIf=\"suffix\" (click)=\"suffixClicked()\" class=\"pointer\" color=\"primary\" matSuffix>{{ suffix }}</mat-icon>\n <mat-icon data-cy=\"prefix-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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
635
686
|
}
|
|
636
687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldComponent, decorators: [{
|
|
637
688
|
type: Component,
|
|
638
|
-
args: [{ selector: 'mad-readonly-form-field', template: "<mat-form-field class=\"form-group mad-read-only\">\n <mat-label>{{ label }}</mat-label>\n <input\n *ngIf=\"!multiline\"\n [ngStyle]=\"{ display: useProjectedContent ? 'none' : 'block' }\"\n [ngModel]=\"value\"\n [ngClass]=\"'text-' + textAlign + ' content'\"\n [errorStateMatcher]=\"errorMatcher\"\n [id]=\"id\"\n readonly\n [disabled]=\"!useProjectedContent\"\n matInput\n #inputEl\n />\n\n <textarea\n *ngIf=\"multiline\"\n [ngStyle]=\"{ display: useProjectedContent ? 'none' : 'block' }\"\n [rows]=\"rows\"\n [ngModel]=\"value\"\n class=\"multiline content\"\n [errorStateMatcher]=\"errorMatcher\"\n [id]=\"id\"\n readonly\n [disabled]=\"!useProjectedContent\"\n matInput\n [cdkTextareaAutosize]=\"multilineAutoSize\"\n ></textarea>\n <ng-content *ngIf=\"useProjectedContent\" />\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"] }]
|
|
639
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: NumberFormatService }], propDecorators: { originalContent: [{
|
|
689
|
+
args: [{ selector: 'mad-readonly-form-field', template: "<mat-form-field class=\"form-group mad-read-only\">\n <mat-label>{{ label }}</mat-label>\n <input\n *ngIf=\"!multiline\"\n [ngStyle]=\"{ display: useProjectedContent ? 'none' : 'block' }\"\n [ngModel]=\"value\"\n [ngClass]=\"'text-' + textAlign + ' content'\"\n [errorStateMatcher]=\"errorMatcher\"\n [id]=\"id\"\n readonly\n [disabled]=\"!useProjectedContent\"\n matInput\n #inputEl\n matTooltip=\"{{ toolTipText }}\"\n matTooltipPosition=\"right\"\n matTooltipClass=\"custom-tooltip\"\n matTooltipDisabled=\"{{ !toolTipForInputEnabled }}\"\n />\n\n <textarea\n *ngIf=\"multiline\"\n [ngStyle]=\"{ display: useProjectedContent ? 'none' : 'block' }\"\n [rows]=\"rows\"\n [ngModel]=\"value\"\n class=\"multiline content\"\n [errorStateMatcher]=\"errorMatcher\"\n [id]=\"id\"\n readonly\n [disabled]=\"!useProjectedContent\"\n matInput\n [cdkTextareaAutosize]=\"multilineAutoSize\"\n ></textarea>\n <ng-content *ngIf=\"useProjectedContent\" />\n <mat-error>{{ errorMessage }}</mat-error>\n <mat-icon data-cy=\"suffix-icon\" *ngIf=\"suffix\" (click)=\"suffixClicked()\" class=\"pointer\" color=\"primary\" matSuffix>{{ suffix }}</mat-icon>\n <mat-icon data-cy=\"prefix-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"] }]
|
|
690
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: NumberFormatService }, { type: i0.ElementRef }], propDecorators: { originalContent: [{
|
|
640
691
|
type: ViewChild,
|
|
641
692
|
args: ['contentWrapper', { static: false }]
|
|
642
693
|
}], useProjectedContent: [{
|
|
@@ -701,9 +752,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
701
752
|
* @author Stefan Laesser
|
|
702
753
|
*/
|
|
703
754
|
class ReadOnlyFormFieldWrapperComponent {
|
|
704
|
-
constructor(changeDetector,
|
|
755
|
+
constructor(changeDetector, rootFormGroup) {
|
|
705
756
|
this.changeDetector = changeDetector;
|
|
706
|
-
this.elementRef = elementRef;
|
|
707
757
|
this.rootFormGroup = rootFormGroup;
|
|
708
758
|
/**
|
|
709
759
|
* If set to "false", the contained mat-form-field is rendered in all it's glory.
|
|
@@ -737,19 +787,15 @@ class ReadOnlyFormFieldWrapperComponent {
|
|
|
737
787
|
this.multilineAutoSize = false;
|
|
738
788
|
this.suffixClickedEmitter = new EventEmitter();
|
|
739
789
|
this.prefixClickedEmitter = new EventEmitter();
|
|
740
|
-
this.toolTipForInputEnabled = false;
|
|
741
790
|
}
|
|
742
791
|
ngOnInit() {
|
|
743
792
|
this.doRendering();
|
|
744
793
|
}
|
|
745
794
|
ngAfterViewInit() {
|
|
746
|
-
this.setReadonlyFieldStyle();
|
|
747
795
|
this.doRendering();
|
|
748
796
|
this.extractValue();
|
|
749
797
|
}
|
|
750
798
|
ngAfterViewChecked() {
|
|
751
|
-
this.setReadonlyFieldStyle();
|
|
752
|
-
this.setTooltipForOverflownField();
|
|
753
799
|
}
|
|
754
800
|
ngOnChanges(_) {
|
|
755
801
|
this.doRendering();
|
|
@@ -809,59 +855,13 @@ class ReadOnlyFormFieldWrapperComponent {
|
|
|
809
855
|
formField.setAttribute('style', 'width:100%');
|
|
810
856
|
}
|
|
811
857
|
}
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
if (input) {
|
|
815
|
-
const textOverFlowStyleValue = this.getTextOverFlowStyleValue();
|
|
816
|
-
if (textOverFlowStyleValue) {
|
|
817
|
-
input.setAttribute('style', 'text-overflow: ' + textOverFlowStyleValue);
|
|
818
|
-
}
|
|
819
|
-
}
|
|
820
|
-
}
|
|
821
|
-
// Ellipsis is enabled by default as text-overflow behaviour
|
|
822
|
-
getTextOverFlowStyleValue() {
|
|
823
|
-
// it works only if the style is added to the component directly. Should find a way for get it from the calculated
|
|
824
|
-
// style. Than it would be possible to define the text-overflow in css for the whole application
|
|
825
|
-
const textOverflow = this.elementRef?.nativeElement?.style.textOverflow;
|
|
826
|
-
if (!textOverflow) {
|
|
827
|
-
return 'ellipsis';
|
|
828
|
-
}
|
|
829
|
-
return textOverflow;
|
|
830
|
-
}
|
|
831
|
-
setTooltipForOverflownField() {
|
|
832
|
-
if (this.isEllipsisForTextOverflowEnabled()) {
|
|
833
|
-
const input = this.readOnlyContentWrapper?.nativeElement?.querySelector('input');
|
|
834
|
-
if (input) {
|
|
835
|
-
this.toolTipForInputEnabled = this.isTextOverflown(input);
|
|
836
|
-
if (this.toolTipForInputEnabled) {
|
|
837
|
-
this.toolTipText = this.calculateToolTipText();
|
|
838
|
-
}
|
|
839
|
-
this.changeDetector.detectChanges();
|
|
840
|
-
}
|
|
841
|
-
}
|
|
842
|
-
}
|
|
843
|
-
isEllipsisForTextOverflowEnabled() {
|
|
844
|
-
return this.getTextOverFlowStyleValue() === 'ellipsis';
|
|
845
|
-
}
|
|
846
|
-
isTextOverflown(input) {
|
|
847
|
-
if (input) {
|
|
848
|
-
return input.offsetWidth < input.scrollWidth;
|
|
849
|
-
}
|
|
850
|
-
return false;
|
|
851
|
-
}
|
|
852
|
-
calculateToolTipText() {
|
|
853
|
-
if (!this.unit) {
|
|
854
|
-
return this.value;
|
|
855
|
-
}
|
|
856
|
-
return this.unitPosition === 'left' ? this.unit + ' ' + this.value : this.value + ' ' + this.unit;
|
|
857
|
-
}
|
|
858
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldWrapperComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$2.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
859
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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 >\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]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ReadOnlyFormFieldComponent, selector: "mad-readonly-form-field", inputs: ["useProjectedContent", "value", "label", "textAlign", "formatNumber", "decimalPlaces", "roundDisplayValue", "autofillDecimals", "unit", "unitPosition", "errorMessage", "multiline", "rows", "id", "shrinkIfEmpty", "suffix", "prefix", "multilineAutoSize"], outputs: ["suffixClickedEmitter", "prefixClickedEmitter"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] }); }
|
|
858
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldWrapperComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
859
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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 >\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: "component", type: ReadOnlyFormFieldComponent, selector: "mad-readonly-form-field", inputs: ["useProjectedContent", "value", "label", "textAlign", "formatNumber", "decimalPlaces", "roundDisplayValue", "autofillDecimals", "unit", "unitPosition", "errorMessage", "multiline", "rows", "id", "shrinkIfEmpty", "suffix", "prefix", "multilineAutoSize"], outputs: ["suffixClickedEmitter", "prefixClickedEmitter"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] }); }
|
|
860
860
|
}
|
|
861
861
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldWrapperComponent, decorators: [{
|
|
862
862
|
type: Component,
|
|
863
|
-
args: [{ selector: 'mad-readonly-form-field-wrapper', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], 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
|
|
864
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type:
|
|
863
|
+
args: [{ selector: 'mad-readonly-form-field-wrapper', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], 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 >\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"] }]
|
|
864
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormGroupDirective }], propDecorators: { originalContent: [{
|
|
865
865
|
type: ViewChild,
|
|
866
866
|
args: ['contentWrapper', { static: false }]
|
|
867
867
|
}], readOnlyContentWrapper: [{
|
|
@@ -1311,7 +1311,7 @@ class CardComponent {
|
|
|
1311
1311
|
this.additionalAction.emit(undefined);
|
|
1312
1312
|
}
|
|
1313
1313
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1314
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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\" *ngIf=\"title || expandable\">\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 data-testid=\"collapse-btn\" (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n </mad-icon-button>\n <mad-icon-button\n data-testid=\"additional-btn\"\n (click)=\"additionalActionClicked()\"\n *ngIf=\"additionalActionIcon\"\n [title]=\"additionalActionText\"\n type=\"button\"\n >\n <mat-icon>{{ additionalActionIcon }}</mat-icon>\n </mad-icon-button>\n <mad-icon-button data-testid=\"edit-btn\" [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 data-testid=\"save-btn\" [title]=\"saveText\" [disabled]=\"saveDisabled\" (throttleClick)=\"onSave()\" madThrottleClick>\n {{ saveText }}\n </mad-primary-button>\n <mad-outline-button data-testid=\"cancel-btn\" [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$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i2$1.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", "color"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "directive", type: ThrottleClickDirective, selector: "[madThrottleClick]", inputs: ["throttleTime"], outputs: ["throttleClick"] }], animations: [
|
|
1314
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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\" *ngIf=\"title || expandable\">\n <mat-card-title-group class=\"center\">\n <mat-card-title data-cy=\"card-title\" class=\"small-title-container\">{{ title }}</mat-card-title>\n <div data-cy=\"title-buttons-block\" class=\"top-right-icons\">\n <mad-icon-button data-testid=\"collapse-btn\" (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n </mad-icon-button>\n <mad-icon-button\n data-testid=\"additional-btn\"\n (click)=\"additionalActionClicked()\"\n *ngIf=\"additionalActionIcon\"\n [title]=\"additionalActionText\"\n type=\"button\"\n >\n <mat-icon>{{ additionalActionIcon }}</mat-icon>\n </mad-icon-button>\n <mad-icon-button data-testid=\"edit-btn\" [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 data-testid=\"save-btn\" [title]=\"saveText\" [disabled]=\"saveDisabled\" (throttleClick)=\"onSave()\" madThrottleClick>\n {{ saveText }}\n </mad-primary-button>\n <mad-outline-button data-testid=\"cancel-btn\" [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$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i2$1.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", "color"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "directive", type: ThrottleClickDirective, selector: "[madThrottleClick]", inputs: ["throttleTime"], outputs: ["throttleClick"] }], animations: [
|
|
1315
1315
|
trigger('collapseExpandAnimation', [
|
|
1316
1316
|
transition(':enter', [
|
|
1317
1317
|
style({ opacity: 0, height: 0, overflow: 'hidden' }),
|
|
@@ -1361,7 +1361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
1361
1361
|
transition('true => false', animate('100ms ease-out')),
|
|
1362
1362
|
transition('false => true', animate('100ms ease-in')),
|
|
1363
1363
|
]),
|
|
1364
|
-
], template: "<mat-card>\n <mat-card-header class=\"header\" *ngIf=\"title || expandable\">\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 data-testid=\"collapse-btn\" (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n </mad-icon-button>\n <mad-icon-button\n data-testid=\"additional-btn\"\n (click)=\"additionalActionClicked()\"\n *ngIf=\"additionalActionIcon\"\n [title]=\"additionalActionText\"\n type=\"button\"\n >\n <mat-icon>{{ additionalActionIcon }}</mat-icon>\n </mad-icon-button>\n <mad-icon-button data-testid=\"edit-btn\" [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 data-testid=\"save-btn\" [title]=\"saveText\" [disabled]=\"saveDisabled\" (throttleClick)=\"onSave()\" madThrottleClick>\n {{ saveText }}\n </mad-primary-button>\n <mad-outline-button data-testid=\"cancel-btn\" [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"] }]
|
|
1364
|
+
], template: "<mat-card>\n <mat-card-header class=\"header\" *ngIf=\"title || expandable\">\n <mat-card-title-group class=\"center\">\n <mat-card-title data-cy=\"card-title\" class=\"small-title-container\">{{ title }}</mat-card-title>\n <div data-cy=\"title-buttons-block\" class=\"top-right-icons\">\n <mad-icon-button data-testid=\"collapse-btn\" (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n </mad-icon-button>\n <mad-icon-button\n data-testid=\"additional-btn\"\n (click)=\"additionalActionClicked()\"\n *ngIf=\"additionalActionIcon\"\n [title]=\"additionalActionText\"\n type=\"button\"\n >\n <mat-icon>{{ additionalActionIcon }}</mat-icon>\n </mad-icon-button>\n <mad-icon-button data-testid=\"edit-btn\" [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 data-testid=\"save-btn\" [title]=\"saveText\" [disabled]=\"saveDisabled\" (throttleClick)=\"onSave()\" madThrottleClick>\n {{ saveText }}\n </mad-primary-button>\n <mad-outline-button data-testid=\"cancel-btn\" [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"] }]
|
|
1365
1365
|
}], propDecorators: { cancelDisabled: [{
|
|
1366
1366
|
type: Input
|
|
1367
1367
|
}], cancelText: [{
|
|
@@ -1552,11 +1552,11 @@ class QuickListCompactComponent extends BaseQuickListComponent {
|
|
|
1552
1552
|
this.formBuilder = formBuilder;
|
|
1553
1553
|
}
|
|
1554
1554
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: QuickListCompactComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1555
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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
|
|
1555
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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 class=\"quick-list-row\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n <mad-icon-button data-cy=\"add-item-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 data-cy=\"add-first-item-button\" *ngIf=\"!readonly && !this.allItems.length\" (click)=\"addItem()\" [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"] }] }); }
|
|
1556
1556
|
}
|
|
1557
1557
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: QuickListCompactComponent, decorators: [{
|
|
1558
1558
|
type: Component,
|
|
1559
|
-
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
|
|
1559
|
+
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 class=\"quick-list-row\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n <mad-icon-button data-cy=\"add-item-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 data-cy=\"add-first-item-button\" *ngIf=\"!readonly && !this.allItems.length\" (click)=\"addItem()\" [disabled]=\"!isAddAllowed()\">\n {{ addLabel }}\n</mad-link-button>\n" }]
|
|
1560
1560
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }] });
|
|
1561
1561
|
|
|
1562
1562
|
// Based on https://github.com/porscheinformatik/clarity-addons/blob/master/src/clr-addons/generic-quick-list/generic-quick-list.ts
|
|
@@ -1567,11 +1567,11 @@ class QuickListComponent extends BaseQuickListComponent {
|
|
|
1567
1567
|
this.formBuilder = formBuilder;
|
|
1568
1568
|
}
|
|
1569
1569
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: QuickListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1570
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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
|
|
1570
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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 class=\"quick-list-row\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n <mad-icon-button data-cy=\"delete-item-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 data-cy=\"add-item-button\" *ngIf=\"!readonly\" (click)=\"addItem()\" [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", "color"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }] }); }
|
|
1571
1571
|
}
|
|
1572
1572
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: QuickListComponent, decorators: [{
|
|
1573
1573
|
type: Component,
|
|
1574
|
-
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
|
|
1574
|
+
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 class=\"quick-list-row\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n <mad-icon-button data-cy=\"delete-item-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 data-cy=\"add-item-button\" *ngIf=\"!readonly\" (click)=\"addItem()\" [disabled]=\"!addPossible || !isAddAllowed()\">\n {{ addLabel }}\n</mad-outline-button>\n" }]
|
|
1575
1575
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }] });
|
|
1576
1576
|
|
|
1577
1577
|
class ReactiveFormQuickListComponent extends BaseQuickListComponent {
|
|
@@ -1581,11 +1581,11 @@ class ReactiveFormQuickListComponent extends BaseQuickListComponent {
|
|
|
1581
1581
|
this.formBuilder = formBuilder;
|
|
1582
1582
|
}
|
|
1583
1583
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReactiveFormQuickListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1584
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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
|
|
1584
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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 class=\"quick-list-row\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n <mad-icon-button data-cy=\"delete-item-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 data-cy=\"add-item-button\" *ngIf=\"!readonly\" (click)=\"addReactiveItem()\" [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", "color"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }] }); }
|
|
1585
1585
|
}
|
|
1586
1586
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReactiveFormQuickListComponent, decorators: [{
|
|
1587
1587
|
type: Component,
|
|
1588
|
-
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
|
|
1588
|
+
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 class=\"quick-list-row\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n <mad-icon-button data-cy=\"delete-item-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 data-cy=\"add-item-button\" *ngIf=\"!readonly\" (click)=\"addReactiveItem()\" [disabled]=\"!isAddReactiveAllowed()\">\n {{ addLabel }}\n</mad-outline-button>\n" }]
|
|
1589
1589
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }] });
|
|
1590
1590
|
|
|
1591
1591
|
class ReactiveFormQuickListCompactComponent extends BaseQuickListComponent {
|
|
@@ -1595,11 +1595,11 @@ class ReactiveFormQuickListCompactComponent extends BaseQuickListComponent {
|
|
|
1595
1595
|
this.formBuilder = formBuilder;
|
|
1596
1596
|
}
|
|
1597
1597
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReactiveFormQuickListCompactComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1598
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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
|
|
1598
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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 class=\"quick-list-row\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteReactiveAllowed()\" (click)=\"removeReactiveItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n <mad-icon-button data-cy=\"add-item-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 data-cy=\"add-first-item-button\" *ngIf=\"!readonly && !this.formArray?.controls.length\" (click)=\"addReactiveItem()\" [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"] }] }); }
|
|
1599
1599
|
}
|
|
1600
1600
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReactiveFormQuickListCompactComponent, decorators: [{
|
|
1601
1601
|
type: Component,
|
|
1602
|
-
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
|
|
1602
|
+
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 class=\"quick-list-row\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteReactiveAllowed()\" (click)=\"removeReactiveItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n <mad-icon-button data-cy=\"add-item-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 data-cy=\"add-first-item-button\" *ngIf=\"!readonly && !this.formArray?.controls.length\" (click)=\"addReactiveItem()\" [disabled]=\"!isAddReactiveAllowed()\">\n {{ addLabel }}\n</mad-link-button>\n" }]
|
|
1603
1603
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }] });
|
|
1604
1604
|
|
|
1605
1605
|
class QuickListModule {
|
|
@@ -1952,11 +1952,14 @@ class DataTableSortUtil {
|
|
|
1952
1952
|
const stringX = String(x ?? '');
|
|
1953
1953
|
const stringY = String(y ?? '');
|
|
1954
1954
|
// a string could be a date
|
|
1955
|
-
if (!!dateTimeFormat) {
|
|
1956
|
-
const
|
|
1957
|
-
|
|
1958
|
-
|
|
1959
|
-
|
|
1955
|
+
if (!!dateTimeFormat.length) {
|
|
1956
|
+
const dates = dateTimeFormat.map(it => ({
|
|
1957
|
+
x: DateTime.fromFormat(stringX, it),
|
|
1958
|
+
y: DateTime.fromFormat(stringY, it)
|
|
1959
|
+
}))
|
|
1960
|
+
.find(({ x, y }) => x.isValid && y.isValid);
|
|
1961
|
+
if (!!dates) {
|
|
1962
|
+
return DataTableSortUtil.compareDate(dates.x, dates.y, ascending);
|
|
1960
1963
|
}
|
|
1961
1964
|
}
|
|
1962
1965
|
// .. but also a formatted number
|
|
@@ -2183,7 +2186,7 @@ const MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER = {
|
|
|
2183
2186
|
provide: MAD_DATA_TABLE_GLOBAL_CONFIGURATION,
|
|
2184
2187
|
deps: [[new Optional(), new SkipSelf(), new Inject(MAD_DATA_TABLE_GLOBAL_CONFIGURATION)]],
|
|
2185
2188
|
useFactory: (dataTableConfig) => dataTableConfig ?? {
|
|
2186
|
-
dateTimeFormat: dataTableConfig?.dateTimeFormat ?? 'dd.MM.yyyy',
|
|
2189
|
+
dateTimeFormat: dataTableConfig?.dateTimeFormat ?? ['dd.MM.yyyy', 'dd.MM.yyyy hh:mm:ss'],
|
|
2187
2190
|
numberFormat: dataTableConfig?.numberFormat ?? {
|
|
2188
2191
|
decimalSeparator: ',',
|
|
2189
2192
|
groupingSeparator: '.',
|
|
@@ -2566,6 +2569,25 @@ class DataTableComponent {
|
|
|
2566
2569
|
this.openColumnModal();
|
|
2567
2570
|
}
|
|
2568
2571
|
}
|
|
2572
|
+
// we need to have this as a setter due to the *ngIf it is in
|
|
2573
|
+
set matSort(matSort) {
|
|
2574
|
+
this._sort = matSort;
|
|
2575
|
+
this.dataSource.sort = this._sort;
|
|
2576
|
+
}
|
|
2577
|
+
set columnDefs(columnDefs) {
|
|
2578
|
+
this._columnDefs = columnDefs;
|
|
2579
|
+
this.changeDetectorRef.detectChanges();
|
|
2580
|
+
}
|
|
2581
|
+
get columnDefs() {
|
|
2582
|
+
return this._columnDefs;
|
|
2583
|
+
}
|
|
2584
|
+
set expandableDef(expandableDef) {
|
|
2585
|
+
this._expandableDef = expandableDef;
|
|
2586
|
+
this.changeDetectorRef.detectChanges();
|
|
2587
|
+
}
|
|
2588
|
+
get expandableDef() {
|
|
2589
|
+
return this._expandableDef;
|
|
2590
|
+
}
|
|
2569
2591
|
constructor(changeDetectorRef, matDialog, persistenceService, dataTableGlobalConfig) {
|
|
2570
2592
|
this.changeDetectorRef = changeDetectorRef;
|
|
2571
2593
|
this.matDialog = matDialog;
|
|
@@ -2625,7 +2647,7 @@ class DataTableComponent {
|
|
|
2625
2647
|
ngAfterViewInit() {
|
|
2626
2648
|
if (!this._useAsync) {
|
|
2627
2649
|
this.dataSource.paginator = this.paginator;
|
|
2628
|
-
this.dataSource.sort = this.
|
|
2650
|
+
this.dataSource.sort = this._sort;
|
|
2629
2651
|
}
|
|
2630
2652
|
this.applySortData();
|
|
2631
2653
|
this.initState();
|
|
@@ -2662,14 +2684,14 @@ class DataTableComponent {
|
|
|
2662
2684
|
return 'PLAIN';
|
|
2663
2685
|
}
|
|
2664
2686
|
getCustomCellTemplate(columnId) {
|
|
2665
|
-
const columnDef = this.
|
|
2687
|
+
const columnDef = this._columnDefs?.find((it) => it.madColumnDef === columnId);
|
|
2666
2688
|
return columnDef && columnDef.cellDef ? columnDef.cellDef.getCellTemplate() : null;
|
|
2667
2689
|
}
|
|
2668
2690
|
getCustomExpandableTemplate() {
|
|
2669
|
-
return this.
|
|
2691
|
+
return this._expandableDef?.getCellTemplate() || null;
|
|
2670
2692
|
}
|
|
2671
2693
|
get expandableColumnDef() {
|
|
2672
|
-
return this.
|
|
2694
|
+
return this._expandableDef?.columnDef.madExpandableColumnDef || '';
|
|
2673
2695
|
}
|
|
2674
2696
|
onExpand(event, element) {
|
|
2675
2697
|
this.expandedElement = this.expandedElement === element ? null : element;
|
|
@@ -2736,7 +2758,7 @@ class DataTableComponent {
|
|
|
2736
2758
|
return this.dataSource?._pageData(this.dataSource.filteredData);
|
|
2737
2759
|
}
|
|
2738
2760
|
get showActionColumn() {
|
|
2739
|
-
return !(this.selectionEmitMode === 'NONE' || this.hideActionColumn) || !!this.
|
|
2761
|
+
return !(this.selectionEmitMode === 'NONE' || this.hideActionColumn) || !!this._expandableDef;
|
|
2740
2762
|
}
|
|
2741
2763
|
showCheckbox(displayedData) {
|
|
2742
2764
|
return !displayedData.parentId && this.selectionMode === 'BATCH' && !this.hideActionColumn;
|
|
@@ -2748,7 +2770,7 @@ class DataTableComponent {
|
|
|
2748
2770
|
return !displayedData.parentId && this.selectionEmitMode === 'ON_SELECTION' && this.selectionMode === 'SINGLE';
|
|
2749
2771
|
}
|
|
2750
2772
|
showExpandableButton(displayedData) {
|
|
2751
|
-
return !displayedData.parentId && !!this.
|
|
2773
|
+
return !displayedData.parentId && !!this._expandableDef;
|
|
2752
2774
|
}
|
|
2753
2775
|
isSelected(rowId) {
|
|
2754
2776
|
return this._selectionModel.isSelected(rowId);
|
|
@@ -2835,7 +2857,7 @@ class DataTableComponent {
|
|
|
2835
2857
|
applySortData() {
|
|
2836
2858
|
this.dataSource.sortData = this._useAsync
|
|
2837
2859
|
? DataTableSortUtil.sortNothing()
|
|
2838
|
-
: DataTableSortUtil.sortData(this.dataTableGlobalConfig.dateTimeFormat, this.dataTableGlobalConfig.numberFormat);
|
|
2860
|
+
: DataTableSortUtil.sortData([...this.dataTableGlobalConfig.dateTimeFormat], this.dataTableGlobalConfig.numberFormat);
|
|
2839
2861
|
}
|
|
2840
2862
|
/** FILTER HANDLING */
|
|
2841
2863
|
get filterMode() {
|
|
@@ -2929,9 +2951,9 @@ class DataTableComponent {
|
|
|
2929
2951
|
}
|
|
2930
2952
|
}
|
|
2931
2953
|
setSort(sort) {
|
|
2932
|
-
this.
|
|
2933
|
-
this.
|
|
2934
|
-
this.
|
|
2954
|
+
this._sort.active = sort.active;
|
|
2955
|
+
this._sort.direction = sort.direction;
|
|
2956
|
+
this._sort.sortChange.emit(sort);
|
|
2935
2957
|
}
|
|
2936
2958
|
initFilterState() {
|
|
2937
2959
|
const filter = this.persistenceService.loadFilter(this.id);
|
|
@@ -2989,7 +3011,7 @@ class DataTableComponent {
|
|
|
2989
3011
|
});
|
|
2990
3012
|
}
|
|
2991
3013
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.MatDialog }, { token: MAD_DATA_TABLE_PERSISTENCE_SERVICE }, { token: MAD_DATA_TABLE_GLOBAL_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2992
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: DataTableComponent, isStandalone: true, selector: "mad-data-table", inputs: { id: "id", filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", filterColumnsLabel: "filterColumnsLabel", filterColumnsPlaceHolder: "filterColumnsPlaceHolder", showEmptyTable: "showEmptyTable", noDataText: "noDataText", columnSettingsModalTitleLabel: "columnSettingsModalTitleLabel", selectedLabel: "selectedLabel", availableLabel: "availableLabel", saveLabel: "saveLabel", deleteLabel: "deleteLabel", cancelLabel: "cancelLabel", infoTextLabel: "infoTextLabel", tableClass: "tableClass", translateLabels: "translateLabels", useAsync: "useAsync", stateful: "stateful", persistenceConfig: "persistenceConfig", loading: "loading", tableData: "tableData", idGenerator: "idGenerator", parentIdGenerator: "parentIdGenerator", defaultSort: "defaultSort", externalFilter: "externalFilter", paginationEnabled: "paginationEnabled", page: "page", pageSizeOptions: "pageSizeOptions", actions: "actions", selectionEmitType: "selectionEmitType", showDeleteFilterAction: "showDeleteFilterAction", disableRowClick: "disableRowClick", deleteDefinitionAllowed: "deleteDefinitionAllowed", selection: "selection", filterEnabled: "filterEnabled", filterMode: "filterMode", filterValue: "filterValue", externalPaginator: "externalPaginator", defaultPageSize: "defaultPageSize", selectionEmitMode: "selectionEmitMode", forceMode: "forceMode", forceSelectionMode: "forceSelectionMode", displayedColumns: "displayedColumns", displayedColumnDefinition: "displayedColumnDefinition", columnDefinitions: "columnDefinitions", allColumns: "allColumns" }, outputs: { actionEvent: "actionEvent", selectionEvent: "selectionEvent", sortEvent: "sortEvent", filterEvent: "filterEvent", pageEvent: "pageEvent", allColumnsEvent: "allColumnsEvent", columnDefinitionChangeEvent: "columnDefinitionChangeEvent", viewDefinitionChangeEvent: "viewDefinitionChangeEvent" }, providers: [DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER, MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER], queries: [{ propertyName: "expandableDef", first: true, predicate: DataTableTemplateExpandableCellDefinition, descendants: true }, { propertyName: "columnDefs", predicate: DataTableTemplateColumnDefinition }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filter", first: true, predicate: DataTableFilter, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"mad-datatable-action-bar\">\n <!-- Table actions: displayed before the table -->\n <div *ngIf=\"tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)\">\n <mad-button-group *ngFor=\"let actionGroup of tableActions\" class=\"table-action-group\">\n <mad-outline-button\n [hidden]=\"isHidden(tableAction)\"\n [disabled]=\"isDisabled(tableAction)\"\n *ngFor=\"let tableAction of actionGroup\"\n (click)=\"onActionEvent(tableAction)\"\n >\n {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n {{ getSelectedCount(tableAction.type) }}\n </mad-outline-button>\n </mad-button-group>\n </div>\n <ng-container *ngIf=\"filterMode === 'COLUMN_BASED' && showDeleteFilterAction\">\n <mat-icon fontSet=\"material-icons-outlined\" class=\"delete-filter-action\" color=\"primary\" (click)=\"onDeleteFilter()\"\n >filter_alt_off</mat-icon\n >\n </ng-container>\n <mat-form-field *ngIf=\"filterMode === 'TABLE_BASED'\">\n <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n </mat-form-field>\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n <ng-container *ngFor=\"let rowAction of rowActions\">\n <button\n *ngIf=\"!isHidden(rowAction)\"\n mat-menu-item\n class=\"row-action\"\n (click)=\"onRowEvent($event, element, rowAction)\"\n [disabled]=\"isDisabled(rowAction)\"\n >\n {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n </button>\n </ng-container>\n </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n <button\n *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\n *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\n *ngIf=\"filterMode === 'COLUMN_BASED' || showEmptyTable || !!filteredPageData?.length; else noData\"\n class=\"datatable\"\n [class]=\"tableClass\"\n>\n <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n <table\n [id]=\"id\"\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n (matSortChange)=\"onSortingEvent($event)\"\n madFilter\n (madFilterChange)=\"onColumnBasedFilterEvent($event)\"\n [multiTemplateDataRows]=\"!!expandableDef\"\n >\n <!-- Row actions column-->\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n <!-- BATCH: master checkbox -->\n <div *ngIf=\"selectionEmitMode !== 'NONE' && selectionMode === 'BATCH'\" class=\"mad-datatable-checkbox-container\">\n <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"> </mat-checkbox>\n </div>\n <!-- SINGLE / NONE: nothing in header row -->\n </th>\n <td mat-cell *matCellDef=\"let element\" [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n <!-- BATCH: row checkbox -->\n <div *ngIf=\"showCheckbox(element)\" class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n <mat-checkbox class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"> </mat-checkbox>\n </div>\n <!-- SINGLE: row action menu icon -->\n <mad-icon-button\n *ngIf=\"showRowActionIcon(element) && hasVisibleRowActions(element)\"\n [matMenuTriggerData]=\"{ element: element }\"\n [matMenuTriggerFor]=\"rowActionMenu\"\n (click)=\"onSelectionEvent(element.rowId)\"\n >\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n <!-- SINGLE: row radio button -->\n <div *ngIf=\"showRadioButton(element)\" class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n <mat-radio-button class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"> </mat-radio-button>\n </div>\n <!-- EXPANDABLE: row is expandable/collapsable -->\n <mad-icon-button *ngIf=\"showExpandableButton(element)\" (click)=\"onExpand($event, element)\">\n <mat-icon *ngIf=\"expandedElement !== element\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"expandedElement === element\">keyboard_arrow_up</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 [ngSwitch]=\"getDataTableHeaderType(column)\">\n <ng-container *ngSwitchCase=\"'SORT'\">\n <th\n scope=\"col\"\n mat-header-cell\n *matHeaderCellDef\n [class.text-right]=\"column.isRightAligned\"\n mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n >\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n <ng-container *ngSwitchCase=\"'FILTER'\">\n <th\n scope=\"col\"\n mat-header-cell\n *matHeaderCellDef\n [class.text-right]=\"column.isRightAligned\"\n mad-filter-header=\"{{ column.dataPropertyName }}\"\n [madFilterColumnRightAligned]=\"column.isRightAligned\"\n [madFilterOptions]=\"column.filterParams?.filterOptions\"\n >\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n <ng-container *ngSwitchCase=\"'SORT_AND_FILTER'\">\n <th\n scope=\"col\"\n mat-header-cell\n *matHeaderCellDef\n [class.text-right]=\"column.isRightAligned\"\n mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n mad-filter-header=\"{{ column.dataPropertyName }}\"\n [madFilterColumnRightAligned]=\"column.isRightAligned\"\n [madFilterOptions]=\"column.filterParams?.filterOptions\"\n >\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n </ng-container>\n\n <!-- data cell to be injected -->\n <td\n mat-cell\n *matCellDef=\"let element\"\n [class.text-right]=\"column.isRightAligned\"\n [class.mad-dt-child-cell]=\"element.parentId\"\n [ngSwitch]=\"column.transformer\"\n (click)=\"!disableRowClick && onRowEvent($event, element)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n getCustomCellTemplate(column.id) || defaultCellTemplate;\n context: { column: column, element: element, $implicit: element }\n \"\n ></ng-container>\n </td>\n </ng-container>\n\n <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n <ng-container *ngIf=\"!!expandableDef\" [matColumnDef]=\"expandableColumnDef\">\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columns.length + 1\">\n <div class=\"mad-data-table-expandable-area\" [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\">\n <ng-container\n *ngTemplateOutlet=\"\n getCustomExpandableTemplate() || defaultCellTemplate;\n context: { column: element, element: element, $implicit: element }\n \"\n ></ng-container>\n </div>\n </td>\n </ng-container>\n\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 && selectionEmitMode !== 'NONE'\"\n *matRowDef=\"let row; columns: columnIds\"\n (click)=\"onExpand($event, row)\"\n ></tr>\n <ng-container *ngIf=\"!!expandableDef\">\n <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n </ng-container>\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell noDataText columnBasedFilter\" [attr.colspan]=\"columnIds.length\">\n {{ translateLabels ? (noDataText | translate) : noDataText }}\n </td>\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 *ngIf=\"editableColumnDefinitions?.length === 1\" (click)=\"onColumnSettings()\">\n <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n </mad-icon-button>\n <!-- column settings: multiple definitions -->\n <mad-icon-button *ngIf=\"(editableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\">\n <mat-icon>view_column</mat-icon>\n </mad-icon-button>\n <!-- column view: multiple definitions -->\n <mad-icon-button *ngIf=\"(viewableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n <mat-icon>preview</mat-icon>\n </mad-icon-button>\n </div>\n\n <!-- Pagination -->\n <mat-paginator\n [style.display]=\"paginationEnabled ? 'block' : 'none'\"\n [length]=\"pageLength\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\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=\"loading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n {{ translateLabels ? (noDataText | translate) : noDataText }}\n </div>\n</ng-template>\n\n<!-- default cell template -->\n<ng-template #defaultCellTemplate let-element=\"element\" let-column=\"column\">\n <span>\n {{ element[column.dataPropertyName] }}\n </span>\n</ng-template>\n\n<!-- custom cell templates injected from parent -->\n<ng-content></ng-content>\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{width:100%;min-height:140px;max-height:100%}.datatable table th,.datatable table td{width:auto;text-overflow:ellipsis;white-space:nowrap}.datatable table th{overflow:visible}.datatable table td{overflow:hidden}.layout-fixed table{table-layout:fixed}.layout-fixed table th{font-weight:700}.layout-fixed table td{white-space:normal;word-wrap:break-word}.text-right{text-align:right!important;padding-right:24px!important}.table-action-group{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}.noDataText.columnBasedFilter{padding-top:10px}.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-expandable-row{height:0;display:contents;padding:0}.mad-data-table-expandable-row td{border-top-color:transparent;border-bottom-color:transparent}.mad-data-table-expandable-area{overflow:hidden;display:flex;width:100%}.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: "ngmodule", type: CommonModule }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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: "ngmodule", type: MatInputModule }, { 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: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i6$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { 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: "ngmodule", type: MatTableModule }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i9.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title", "color"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: MadButtonGroupComponent, selector: "mad-button-group" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: i16.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex", "id", "name", "aria-label", "aria-labelledby", "aria-describedby", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: DataTableFilterHeader, selector: "th[mad-filter-header]", inputs: ["mad-filter-header", "madFilterColumnRightAligned", "madFilterOptions"] }, { kind: "directive", type: DataTableFilter, selector: "[madFilter]", outputs: ["madFilterChange"] }], animations: [
|
|
3014
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: DataTableComponent, isStandalone: true, selector: "mad-data-table", inputs: { id: "id", filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", filterColumnsLabel: "filterColumnsLabel", filterColumnsPlaceHolder: "filterColumnsPlaceHolder", showEmptyTable: "showEmptyTable", noDataText: "noDataText", columnSettingsModalTitleLabel: "columnSettingsModalTitleLabel", selectedLabel: "selectedLabel", availableLabel: "availableLabel", saveLabel: "saveLabel", deleteLabel: "deleteLabel", cancelLabel: "cancelLabel", infoTextLabel: "infoTextLabel", tableClass: "tableClass", translateLabels: "translateLabels", useAsync: "useAsync", stateful: "stateful", persistenceConfig: "persistenceConfig", loading: "loading", tableData: "tableData", idGenerator: "idGenerator", parentIdGenerator: "parentIdGenerator", defaultSort: "defaultSort", externalFilter: "externalFilter", paginationEnabled: "paginationEnabled", page: "page", pageSizeOptions: "pageSizeOptions", actions: "actions", selectionEmitType: "selectionEmitType", showDeleteFilterAction: "showDeleteFilterAction", disableRowClick: "disableRowClick", deleteDefinitionAllowed: "deleteDefinitionAllowed", selection: "selection", filterEnabled: "filterEnabled", filterMode: "filterMode", filterValue: "filterValue", externalPaginator: "externalPaginator", defaultPageSize: "defaultPageSize", selectionEmitMode: "selectionEmitMode", forceMode: "forceMode", forceSelectionMode: "forceSelectionMode", displayedColumns: "displayedColumns", displayedColumnDefinition: "displayedColumnDefinition", columnDefinitions: "columnDefinitions", allColumns: "allColumns" }, outputs: { actionEvent: "actionEvent", selectionEvent: "selectionEvent", sortEvent: "sortEvent", filterEvent: "filterEvent", pageEvent: "pageEvent", allColumnsEvent: "allColumnsEvent", columnDefinitionChangeEvent: "columnDefinitionChangeEvent", viewDefinitionChangeEvent: "viewDefinitionChangeEvent" }, providers: [DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER, MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER], queries: [{ propertyName: "expandableDef", first: true, predicate: DataTableTemplateExpandableCellDefinition, descendants: true }, { propertyName: "columnDefs", predicate: DataTableTemplateColumnDefinition }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filter", first: true, predicate: DataTableFilter, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div data-cy=\"table-action-bar\" class=\"mad-datatable-action-bar\">\n <!-- Table actions: displayed before the table -->\n <div *ngIf=\"tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)\">\n <mad-button-group *ngFor=\"let actionGroup of tableActions\" class=\"table-action-group\">\n <mad-outline-button\n [hidden]=\"isHidden(tableAction)\"\n [disabled]=\"isDisabled(tableAction)\"\n *ngFor=\"let tableAction of actionGroup\"\n (click)=\"onActionEvent(tableAction)\"\n >\n {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n {{ getSelectedCount(tableAction.type) }}\n </mad-outline-button>\n </mad-button-group>\n </div>\n <ng-container *ngIf=\"filterMode === 'COLUMN_BASED' && showDeleteFilterAction\">\n <mat-icon fontSet=\"material-icons-outlined\" class=\"delete-filter-action\" color=\"primary\" (click)=\"onDeleteFilter()\"\n >filter_alt_off</mat-icon\n >\n </ng-container>\n <mat-form-field data-cy=\"filter-input\" *ngIf=\"filterMode === 'TABLE_BASED'\">\n <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n </mat-form-field>\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n <ng-container *ngFor=\"let rowAction of rowActions\">\n <button\n data-cy=\"row-action-menu-button\"\n *ngIf=\"!isHidden(rowAction)\"\n mat-menu-item\n class=\"row-action\"\n (click)=\"onRowEvent($event, element, rowAction)\"\n [disabled]=\"isDisabled(rowAction)\"\n >\n {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n </button>\n </ng-container>\n </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n <button\n *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\n *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\n *ngIf=\"filterMode === 'COLUMN_BASED' || showEmptyTable || !!filteredPageData?.length; else noData\"\n class=\"datatable\"\n [class]=\"tableClass\"\n>\n <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n <table\n [id]=\"id\"\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n (matSortChange)=\"onSortingEvent($event)\"\n madFilter\n (madFilterChange)=\"onColumnBasedFilterEvent($event)\"\n [multiTemplateDataRows]=\"!!expandableDef\"\n >\n <!-- Row actions column-->\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n <!-- BATCH: master checkbox -->\n <div *ngIf=\"selectionEmitMode !== 'NONE' && selectionMode === 'BATCH'\" class=\"mad-datatable-checkbox-container\">\n <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"> </mat-checkbox>\n </div>\n <!-- SINGLE / NONE: nothing in header row -->\n </th>\n <td mat-cell *matCellDef=\"let element\" [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n <!-- BATCH: row checkbox -->\n <div *ngIf=\"showCheckbox(element)\" class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n <mat-checkbox class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"> </mat-checkbox>\n </div>\n <!-- SINGLE: row action menu icon -->\n <mad-icon-button data-cy=\"row-action-button\"\n *ngIf=\"showRowActionIcon(element) && hasVisibleRowActions(element)\"\n [matMenuTriggerData]=\"{ element: element }\"\n [matMenuTriggerFor]=\"rowActionMenu\"\n (click)=\"onSelectionEvent(element.rowId)\"\n >\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n <!-- SINGLE: row radio button -->\n <div *ngIf=\"showRadioButton(element)\" class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n <mat-radio-button class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"> </mat-radio-button>\n </div>\n <!-- EXPANDABLE: row is expandable/collapsable -->\n <mad-icon-button *ngIf=\"showExpandableButton(element)\" (click)=\"onExpand($event, element)\">\n <mat-icon *ngIf=\"expandedElement !== element\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"expandedElement === element\">keyboard_arrow_up</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 [ngSwitch]=\"getDataTableHeaderType(column)\">\n <ng-container *ngSwitchCase=\"'SORT'\">\n <th\n scope=\"col\"\n mat-header-cell\n *matHeaderCellDef\n [class.text-right]=\"column.isRightAligned\"\n mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n >\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n <ng-container *ngSwitchCase=\"'FILTER'\">\n <th\n scope=\"col\"\n mat-header-cell\n *matHeaderCellDef\n [class.text-right]=\"column.isRightAligned\"\n mad-filter-header=\"{{ column.dataPropertyName }}\"\n [madFilterColumnRightAligned]=\"column.isRightAligned\"\n [madFilterOptions]=\"column.filterParams?.filterOptions\"\n >\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n <ng-container *ngSwitchCase=\"'SORT_AND_FILTER'\">\n <th\n scope=\"col\"\n mat-header-cell\n *matHeaderCellDef\n [class.text-right]=\"column.isRightAligned\"\n mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n mad-filter-header=\"{{ column.dataPropertyName }}\"\n [madFilterColumnRightAligned]=\"column.isRightAligned\"\n [madFilterOptions]=\"column.filterParams?.filterOptions\"\n >\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n </ng-container>\n\n <!-- data cell to be injected -->\n <td\n mat-cell\n *matCellDef=\"let element\"\n [class.text-right]=\"column.isRightAligned\"\n [class.mad-dt-child-cell]=\"element.parentId\"\n [ngSwitch]=\"column.transformer\"\n (click)=\"!disableRowClick && onRowEvent($event, element)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n getCustomCellTemplate(column.id) || defaultCellTemplate;\n context: { column: column, element: element, $implicit: element }\n \"\n ></ng-container>\n </td>\n </ng-container>\n\n <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n <ng-container *ngIf=\"!!expandableDef\" [matColumnDef]=\"expandableColumnDef\">\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columns.length + 1\">\n <div class=\"mad-data-table-expandable-area\" [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\">\n <ng-container\n *ngTemplateOutlet=\"\n getCustomExpandableTemplate() || defaultCellTemplate;\n context: { column: element, element: element, $implicit: element }\n \"\n ></ng-container>\n </div>\n </td>\n </ng-container>\n\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 && selectionEmitMode !== 'NONE'\"\n *matRowDef=\"let row; columns: columnIds\"\n (click)=\"onExpand($event, row)\"\n ></tr>\n <ng-container *ngIf=\"!!expandableDef\">\n <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n </ng-container>\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell noDataText columnBasedFilter\" [attr.colspan]=\"columnIds.length\">\n {{ translateLabels ? (noDataText | translate) : noDataText }}\n </td>\n </tr>\n </table>\n</div>\n<div data-cy=\"table-bottom-area\" class=\"mad-data-table-bottom-area\">\n <div data-cy=\"definition-button-block\" class=\"mad-data-table-bottom-info-area\">\n <!-- column settings: 1 definition -->\n <mad-icon-button *ngIf=\"editableColumnDefinitions?.length === 1\" (click)=\"onColumnSettings()\">\n <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n </mad-icon-button>\n <!-- column settings: multiple definitions -->\n <mad-icon-button *ngIf=\"(editableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\">\n <mat-icon>view_column</mat-icon>\n </mad-icon-button>\n <!-- column view: multiple definitions -->\n <mad-icon-button *ngIf=\"(viewableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n <mat-icon>preview</mat-icon>\n </mad-icon-button>\n </div>\n\n <!-- Pagination -->\n <mat-paginator\n [style.display]=\"paginationEnabled ? 'block' : 'none'\"\n [length]=\"pageLength\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\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 data-cy=\"no-data-block\" class=\"noDataText\">\n <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n {{ translateLabels ? (noDataText | translate) : noDataText }}\n </div>\n</ng-template>\n\n<!-- default cell template -->\n<ng-template #defaultCellTemplate let-element=\"element\" let-column=\"column\">\n <span>\n {{ element[column.dataPropertyName] }}\n </span>\n</ng-template>\n\n<!-- custom cell templates injected from parent -->\n<ng-content></ng-content>\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{width:100%;min-height:140px;max-height:100%}.datatable table th,.datatable table td{width:auto;text-overflow:ellipsis;white-space:nowrap}.datatable table th{overflow:visible}.datatable table td{overflow:hidden}.layout-fixed table{table-layout:fixed}.layout-fixed table th{font-weight:700}.layout-fixed table td{white-space:normal;word-wrap:break-word}.text-right{text-align:right!important;padding-right:24px!important}.table-action-group{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}.noDataText.columnBasedFilter{padding-top:10px}.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-expandable-row{height:0;display:contents;padding:0}.mad-data-table-expandable-row td{border-top-color:transparent;border-bottom-color:transparent}.mad-data-table-expandable-area{overflow:hidden;display:flex;width:100%}.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: "ngmodule", type: CommonModule }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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: "ngmodule", type: MatInputModule }, { 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: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i6$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { 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: "ngmodule", type: MatTableModule }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i9.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title", "color"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: MadButtonGroupComponent, selector: "mad-button-group" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: i16.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex", "id", "name", "aria-label", "aria-labelledby", "aria-describedby", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: DataTableFilterHeader, selector: "th[mad-filter-header]", inputs: ["mad-filter-header", "madFilterColumnRightAligned", "madFilterOptions"] }, { kind: "directive", type: DataTableFilter, selector: "[madFilter]", outputs: ["madFilterChange"] }], animations: [
|
|
2993
3015
|
trigger('detailExpand', [
|
|
2994
3016
|
state('collapsed,void', style({ height: '0px', minHeight: '0' })),
|
|
2995
3017
|
state('expanded', style({ height: '*' })),
|
|
@@ -3029,7 +3051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
3029
3051
|
DataTableTemplateCellDefinition,
|
|
3030
3052
|
DataTableTemplateExpandableColumnDefinition,
|
|
3031
3053
|
DataTableTemplateExpandableCellDefinition,
|
|
3032
|
-
], providers: [DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER, MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER], template: "<div class=\"mad-datatable-action-bar\">\n <!-- Table actions: displayed before the table -->\n <div *ngIf=\"tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)\">\n <mad-button-group *ngFor=\"let actionGroup of tableActions\" class=\"table-action-group\">\n <mad-outline-button\n [hidden]=\"isHidden(tableAction)\"\n [disabled]=\"isDisabled(tableAction)\"\n *ngFor=\"let tableAction of actionGroup\"\n (click)=\"onActionEvent(tableAction)\"\n >\n {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n {{ getSelectedCount(tableAction.type) }}\n </mad-outline-button>\n </mad-button-group>\n </div>\n <ng-container *ngIf=\"filterMode === 'COLUMN_BASED' && showDeleteFilterAction\">\n <mat-icon fontSet=\"material-icons-outlined\" class=\"delete-filter-action\" color=\"primary\" (click)=\"onDeleteFilter()\"\n >filter_alt_off</mat-icon\n >\n </ng-container>\n <mat-form-field *ngIf=\"filterMode === 'TABLE_BASED'\">\n <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n </mat-form-field>\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n <ng-container *ngFor=\"let rowAction of rowActions\">\n <button\n *ngIf=\"!isHidden(rowAction)\"\n mat-menu-item\n class=\"row-action\"\n (click)=\"onRowEvent($event, element, rowAction)\"\n [disabled]=\"isDisabled(rowAction)\"\n >\n {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n </button>\n </ng-container>\n </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n <button\n *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\n *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\n *ngIf=\"filterMode === 'COLUMN_BASED' || showEmptyTable || !!filteredPageData?.length; else noData\"\n class=\"datatable\"\n [class]=\"tableClass\"\n>\n <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n <table\n [id]=\"id\"\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n (matSortChange)=\"onSortingEvent($event)\"\n madFilter\n (madFilterChange)=\"onColumnBasedFilterEvent($event)\"\n [multiTemplateDataRows]=\"!!expandableDef\"\n >\n <!-- Row actions column-->\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n <!-- BATCH: master checkbox -->\n <div *ngIf=\"selectionEmitMode !== 'NONE' && selectionMode === 'BATCH'\" class=\"mad-datatable-checkbox-container\">\n <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"> </mat-checkbox>\n </div>\n <!-- SINGLE / NONE: nothing in header row -->\n </th>\n <td mat-cell *matCellDef=\"let element\" [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n <!-- BATCH: row checkbox -->\n <div *ngIf=\"showCheckbox(element)\" class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n <mat-checkbox class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"> </mat-checkbox>\n </div>\n <!-- SINGLE: row action menu icon -->\n <mad-icon-button\n *ngIf=\"showRowActionIcon(element) && hasVisibleRowActions(element)\"\n [matMenuTriggerData]=\"{ element: element }\"\n [matMenuTriggerFor]=\"rowActionMenu\"\n (click)=\"onSelectionEvent(element.rowId)\"\n >\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n <!-- SINGLE: row radio button -->\n <div *ngIf=\"showRadioButton(element)\" class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n <mat-radio-button class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"> </mat-radio-button>\n </div>\n <!-- EXPANDABLE: row is expandable/collapsable -->\n <mad-icon-button *ngIf=\"showExpandableButton(element)\" (click)=\"onExpand($event, element)\">\n <mat-icon *ngIf=\"expandedElement !== element\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"expandedElement === element\">keyboard_arrow_up</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 [ngSwitch]=\"getDataTableHeaderType(column)\">\n <ng-container *ngSwitchCase=\"'SORT'\">\n <th\n scope=\"col\"\n mat-header-cell\n *matHeaderCellDef\n [class.text-right]=\"column.isRightAligned\"\n mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n >\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n <ng-container *ngSwitchCase=\"'FILTER'\">\n <th\n scope=\"col\"\n mat-header-cell\n *matHeaderCellDef\n [class.text-right]=\"column.isRightAligned\"\n mad-filter-header=\"{{ column.dataPropertyName }}\"\n [madFilterColumnRightAligned]=\"column.isRightAligned\"\n [madFilterOptions]=\"column.filterParams?.filterOptions\"\n >\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n <ng-container *ngSwitchCase=\"'SORT_AND_FILTER'\">\n <th\n scope=\"col\"\n mat-header-cell\n *matHeaderCellDef\n [class.text-right]=\"column.isRightAligned\"\n mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n mad-filter-header=\"{{ column.dataPropertyName }}\"\n [madFilterColumnRightAligned]=\"column.isRightAligned\"\n [madFilterOptions]=\"column.filterParams?.filterOptions\"\n >\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n </ng-container>\n\n <!-- data cell to be injected -->\n <td\n mat-cell\n *matCellDef=\"let element\"\n [class.text-right]=\"column.isRightAligned\"\n [class.mad-dt-child-cell]=\"element.parentId\"\n [ngSwitch]=\"column.transformer\"\n (click)=\"!disableRowClick && onRowEvent($event, element)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n getCustomCellTemplate(column.id) || defaultCellTemplate;\n context: { column: column, element: element, $implicit: element }\n \"\n ></ng-container>\n </td>\n </ng-container>\n\n <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n <ng-container *ngIf=\"!!expandableDef\" [matColumnDef]=\"expandableColumnDef\">\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columns.length + 1\">\n <div class=\"mad-data-table-expandable-area\" [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\">\n <ng-container\n *ngTemplateOutlet=\"\n getCustomExpandableTemplate() || defaultCellTemplate;\n context: { column: element, element: element, $implicit: element }\n \"\n ></ng-container>\n </div>\n </td>\n </ng-container>\n\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 && selectionEmitMode !== 'NONE'\"\n *matRowDef=\"let row; columns: columnIds\"\n (click)=\"onExpand($event, row)\"\n ></tr>\n <ng-container *ngIf=\"!!expandableDef\">\n <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n </ng-container>\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell noDataText columnBasedFilter\" [attr.colspan]=\"columnIds.length\">\n {{ translateLabels ? (noDataText | translate) : noDataText }}\n </td>\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 *ngIf=\"editableColumnDefinitions?.length === 1\" (click)=\"onColumnSettings()\">\n <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n </mad-icon-button>\n <!-- column settings: multiple definitions -->\n <mad-icon-button *ngIf=\"(editableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\">\n <mat-icon>view_column</mat-icon>\n </mad-icon-button>\n <!-- column view: multiple definitions -->\n <mad-icon-button *ngIf=\"(viewableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n <mat-icon>preview</mat-icon>\n </mad-icon-button>\n </div>\n\n <!-- Pagination -->\n <mat-paginator\n [style.display]=\"paginationEnabled ? 'block' : 'none'\"\n [length]=\"pageLength\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\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=\"loading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n {{ translateLabels ? (noDataText | translate) : noDataText }}\n </div>\n</ng-template>\n\n<!-- default cell template -->\n<ng-template #defaultCellTemplate let-element=\"element\" let-column=\"column\">\n <span>\n {{ element[column.dataPropertyName] }}\n </span>\n</ng-template>\n\n<!-- custom cell templates injected from parent -->\n<ng-content></ng-content>\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{width:100%;min-height:140px;max-height:100%}.datatable table th,.datatable table td{width:auto;text-overflow:ellipsis;white-space:nowrap}.datatable table th{overflow:visible}.datatable table td{overflow:hidden}.layout-fixed table{table-layout:fixed}.layout-fixed table th{font-weight:700}.layout-fixed table td{white-space:normal;word-wrap:break-word}.text-right{text-align:right!important;padding-right:24px!important}.table-action-group{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}.noDataText.columnBasedFilter{padding-top:10px}.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-expandable-row{height:0;display:contents;padding:0}.mad-data-table-expandable-row td{border-top-color:transparent;border-bottom-color:transparent}.mad-data-table-expandable-area{overflow:hidden;display:flex;width:100%}.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"] }]
|
|
3054
|
+
], providers: [DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER, MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER], template: "<div data-cy=\"table-action-bar\" class=\"mad-datatable-action-bar\">\n <!-- Table actions: displayed before the table -->\n <div *ngIf=\"tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)\">\n <mad-button-group *ngFor=\"let actionGroup of tableActions\" class=\"table-action-group\">\n <mad-outline-button\n [hidden]=\"isHidden(tableAction)\"\n [disabled]=\"isDisabled(tableAction)\"\n *ngFor=\"let tableAction of actionGroup\"\n (click)=\"onActionEvent(tableAction)\"\n >\n {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n {{ getSelectedCount(tableAction.type) }}\n </mad-outline-button>\n </mad-button-group>\n </div>\n <ng-container *ngIf=\"filterMode === 'COLUMN_BASED' && showDeleteFilterAction\">\n <mat-icon fontSet=\"material-icons-outlined\" class=\"delete-filter-action\" color=\"primary\" (click)=\"onDeleteFilter()\"\n >filter_alt_off</mat-icon\n >\n </ng-container>\n <mat-form-field data-cy=\"filter-input\" *ngIf=\"filterMode === 'TABLE_BASED'\">\n <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n </mat-form-field>\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n <ng-container *ngFor=\"let rowAction of rowActions\">\n <button\n data-cy=\"row-action-menu-button\"\n *ngIf=\"!isHidden(rowAction)\"\n mat-menu-item\n class=\"row-action\"\n (click)=\"onRowEvent($event, element, rowAction)\"\n [disabled]=\"isDisabled(rowAction)\"\n >\n {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n </button>\n </ng-container>\n </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n <button\n *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\n *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\n *ngIf=\"filterMode === 'COLUMN_BASED' || showEmptyTable || !!filteredPageData?.length; else noData\"\n class=\"datatable\"\n [class]=\"tableClass\"\n>\n <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n <table\n [id]=\"id\"\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n (matSortChange)=\"onSortingEvent($event)\"\n madFilter\n (madFilterChange)=\"onColumnBasedFilterEvent($event)\"\n [multiTemplateDataRows]=\"!!expandableDef\"\n >\n <!-- Row actions column-->\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n <!-- BATCH: master checkbox -->\n <div *ngIf=\"selectionEmitMode !== 'NONE' && selectionMode === 'BATCH'\" class=\"mad-datatable-checkbox-container\">\n <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"> </mat-checkbox>\n </div>\n <!-- SINGLE / NONE: nothing in header row -->\n </th>\n <td mat-cell *matCellDef=\"let element\" [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n <!-- BATCH: row checkbox -->\n <div *ngIf=\"showCheckbox(element)\" class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n <mat-checkbox class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"> </mat-checkbox>\n </div>\n <!-- SINGLE: row action menu icon -->\n <mad-icon-button data-cy=\"row-action-button\"\n *ngIf=\"showRowActionIcon(element) && hasVisibleRowActions(element)\"\n [matMenuTriggerData]=\"{ element: element }\"\n [matMenuTriggerFor]=\"rowActionMenu\"\n (click)=\"onSelectionEvent(element.rowId)\"\n >\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n <!-- SINGLE: row radio button -->\n <div *ngIf=\"showRadioButton(element)\" class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n <mat-radio-button class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"> </mat-radio-button>\n </div>\n <!-- EXPANDABLE: row is expandable/collapsable -->\n <mad-icon-button *ngIf=\"showExpandableButton(element)\" (click)=\"onExpand($event, element)\">\n <mat-icon *ngIf=\"expandedElement !== element\">keyboard_arrow_down</mat-icon>\n <mat-icon *ngIf=\"expandedElement === element\">keyboard_arrow_up</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 [ngSwitch]=\"getDataTableHeaderType(column)\">\n <ng-container *ngSwitchCase=\"'SORT'\">\n <th\n scope=\"col\"\n mat-header-cell\n *matHeaderCellDef\n [class.text-right]=\"column.isRightAligned\"\n mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n >\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n <ng-container *ngSwitchCase=\"'FILTER'\">\n <th\n scope=\"col\"\n mat-header-cell\n *matHeaderCellDef\n [class.text-right]=\"column.isRightAligned\"\n mad-filter-header=\"{{ column.dataPropertyName }}\"\n [madFilterColumnRightAligned]=\"column.isRightAligned\"\n [madFilterOptions]=\"column.filterParams?.filterOptions\"\n >\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n <ng-container *ngSwitchCase=\"'SORT_AND_FILTER'\">\n <th\n scope=\"col\"\n mat-header-cell\n *matHeaderCellDef\n [class.text-right]=\"column.isRightAligned\"\n mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n mad-filter-header=\"{{ column.dataPropertyName }}\"\n [madFilterColumnRightAligned]=\"column.isRightAligned\"\n [madFilterOptions]=\"column.filterParams?.filterOptions\"\n >\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n </ng-container>\n\n <!-- data cell to be injected -->\n <td\n mat-cell\n *matCellDef=\"let element\"\n [class.text-right]=\"column.isRightAligned\"\n [class.mad-dt-child-cell]=\"element.parentId\"\n [ngSwitch]=\"column.transformer\"\n (click)=\"!disableRowClick && onRowEvent($event, element)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n getCustomCellTemplate(column.id) || defaultCellTemplate;\n context: { column: column, element: element, $implicit: element }\n \"\n ></ng-container>\n </td>\n </ng-container>\n\n <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n <ng-container *ngIf=\"!!expandableDef\" [matColumnDef]=\"expandableColumnDef\">\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columns.length + 1\">\n <div class=\"mad-data-table-expandable-area\" [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\">\n <ng-container\n *ngTemplateOutlet=\"\n getCustomExpandableTemplate() || defaultCellTemplate;\n context: { column: element, element: element, $implicit: element }\n \"\n ></ng-container>\n </div>\n </td>\n </ng-container>\n\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 && selectionEmitMode !== 'NONE'\"\n *matRowDef=\"let row; columns: columnIds\"\n (click)=\"onExpand($event, row)\"\n ></tr>\n <ng-container *ngIf=\"!!expandableDef\">\n <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n </ng-container>\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell noDataText columnBasedFilter\" [attr.colspan]=\"columnIds.length\">\n {{ translateLabels ? (noDataText | translate) : noDataText }}\n </td>\n </tr>\n </table>\n</div>\n<div data-cy=\"table-bottom-area\" class=\"mad-data-table-bottom-area\">\n <div data-cy=\"definition-button-block\" class=\"mad-data-table-bottom-info-area\">\n <!-- column settings: 1 definition -->\n <mad-icon-button *ngIf=\"editableColumnDefinitions?.length === 1\" (click)=\"onColumnSettings()\">\n <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n </mad-icon-button>\n <!-- column settings: multiple definitions -->\n <mad-icon-button *ngIf=\"(editableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\">\n <mat-icon>view_column</mat-icon>\n </mad-icon-button>\n <!-- column view: multiple definitions -->\n <mad-icon-button *ngIf=\"(viewableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n <mat-icon>preview</mat-icon>\n </mad-icon-button>\n </div>\n\n <!-- Pagination -->\n <mat-paginator\n [style.display]=\"paginationEnabled ? 'block' : 'none'\"\n [length]=\"pageLength\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\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 data-cy=\"no-data-block\" class=\"noDataText\">\n <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n {{ translateLabels ? (noDataText | translate) : noDataText }}\n </div>\n</ng-template>\n\n<!-- default cell template -->\n<ng-template #defaultCellTemplate let-element=\"element\" let-column=\"column\">\n <span>\n {{ element[column.dataPropertyName] }}\n </span>\n</ng-template>\n\n<!-- custom cell templates injected from parent -->\n<ng-content></ng-content>\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{width:100%;min-height:140px;max-height:100%}.datatable table th,.datatable table td{width:auto;text-overflow:ellipsis;white-space:nowrap}.datatable table th{overflow:visible}.datatable table td{overflow:hidden}.layout-fixed table{table-layout:fixed}.layout-fixed table th{font-weight:700}.layout-fixed table td{white-space:normal;word-wrap:break-word}.text-right{text-align:right!important;padding-right:24px!important}.table-action-group{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}.noDataText.columnBasedFilter{padding-top:10px}.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-expandable-row{height:0;display:contents;padding:0}.mad-data-table-expandable-row td{border-top-color:transparent;border-bottom-color:transparent}.mad-data-table-expandable-area{overflow:hidden;display:flex;width:100%}.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"] }]
|
|
3033
3055
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.MatDialog }, { type: DataTablePersistenceService, decorators: [{
|
|
3034
3056
|
type: Inject,
|
|
3035
3057
|
args: [MAD_DATA_TABLE_PERSISTENCE_SERVICE]
|
|
@@ -3147,7 +3169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
3147
3169
|
}], paginator: [{
|
|
3148
3170
|
type: ViewChild,
|
|
3149
3171
|
args: [MatPaginator]
|
|
3150
|
-
}],
|
|
3172
|
+
}], matSort: [{
|
|
3151
3173
|
type: ViewChild,
|
|
3152
3174
|
args: [MatSort]
|
|
3153
3175
|
}], filter: [{
|
|
@@ -3202,14 +3224,14 @@ class StepHeaderComponent extends CdkStepHeader {
|
|
|
3202
3224
|
return '';
|
|
3203
3225
|
}
|
|
3204
3226
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StepHeaderComponent, deps: [{ token: i1$4.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3205
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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;flex-direction:row;box-sizing:border-box;display:flex;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 }); }
|
|
3227
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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 data-testid=\"step-number\" *ngIf=\"!this.hasError && !this.completed\" class=\"header-label\">{{ this.index + 1 + '.' }}</span>\n <div data-testid=\"step-label\" 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;flex-direction:row;box-sizing:border-box;display:flex;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 }); }
|
|
3206
3228
|
}
|
|
3207
3229
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StepHeaderComponent, decorators: [{
|
|
3208
3230
|
type: Component,
|
|
3209
3231
|
args: [{ selector: 'mad-step-header', inputs: ['color'], host: {
|
|
3210
3232
|
class: 'mad-step-header',
|
|
3211
3233
|
role: 'tab',
|
|
3212
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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;flex-direction:row;box-sizing:border-box;display:flex;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"] }]
|
|
3234
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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 data-testid=\"step-number\" *ngIf=\"!this.hasError && !this.completed\" class=\"header-label\">{{ this.index + 1 + '.' }}</span>\n <div data-testid=\"step-label\" 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;flex-direction:row;box-sizing:border-box;display:flex;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"] }]
|
|
3213
3235
|
}], ctorParameters: () => [{ type: i1$4.FocusMonitor }, { type: i0.ElementRef }], propDecorators: { index: [{
|
|
3214
3236
|
type: Input
|
|
3215
3237
|
}], label: [{
|
|
@@ -3311,11 +3333,11 @@ class StepComponent extends CdkStep {
|
|
|
3311
3333
|
}
|
|
3312
3334
|
}
|
|
3313
3335
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StepComponent, deps: [{ token: forwardRef(() => StepperComponent) }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3314
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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}.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;flex-direction:column;box-sizing:border-box;display:flex}.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 }); }
|
|
3336
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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 data-cy=\"next-step-button\" (click)=\"next()\">{{ nextBtnLbl }}</mad-primary-button>\n </div>\n <div *ngIf=\"last\">\n <mad-primary-button data-cy=\"complete-step-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}.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;flex-direction:column;box-sizing:border-box;display:flex}.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 }); }
|
|
3315
3337
|
}
|
|
3316
3338
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StepComponent, decorators: [{
|
|
3317
3339
|
type: Component,
|
|
3318
|
-
args: [{ selector: 'mad-step', providers: [{ provide: CdkStep, useExisting: StepComponent }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template let-last=\"last\" let-nextBtnLbl=\"nextBtnLbl\" let-doneBtnLbl=\"doneBtnLbl\">\n <div class=\"step-container\">\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}.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;flex-direction:column;box-sizing:border-box;display:flex}.step-content,.step-buttons{padding:2em}\n"] }]
|
|
3340
|
+
args: [{ selector: 'mad-step', providers: [{ provide: CdkStep, useExisting: StepComponent }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template let-last=\"last\" let-nextBtnLbl=\"nextBtnLbl\" let-doneBtnLbl=\"doneBtnLbl\">\n <div class=\"step-container\">\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 data-cy=\"next-step-button\" (click)=\"next()\">{{ nextBtnLbl }}</mad-primary-button>\n </div>\n <div *ngIf=\"last\">\n <mad-primary-button data-cy=\"complete-step-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}.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;flex-direction:column;box-sizing:border-box;display:flex}.step-content,.step-buttons{padding:2em}\n"] }]
|
|
3319
3341
|
}], ctorParameters: () => [{ type: StepperComponent, decorators: [{
|
|
3320
3342
|
type: Inject,
|
|
3321
3343
|
args: [forwardRef(() => StepperComponent)]
|
|
@@ -3367,7 +3389,7 @@ class StepperComponent extends CdkStepper {
|
|
|
3367
3389
|
return step.completed || this.selectedIndex === index || !this.linear;
|
|
3368
3390
|
}
|
|
3369
3391
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StepperComponent, deps: [{ token: i3$3.Directionality, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3370
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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 [ngTemplateOutlet]=\"stepTemplate\" [ngTemplateOutletContext]=\"{ step: step, i: i }\"></ng-container>\n <div class=\"vertical-content-container\" [class.mat-stepper-vertical-line]=\"!isLast\">\n <div\n class=\"vertical-stepper-content\"\n 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 >\n <div class=\"vertical-content\">\n <ng-container\n [ngTemplateOutlet]=\"step.content\"\n [ngTemplateOutletContext]=\"{\n step: step,\n i: i,\n last: isLast,\n first: isFirst,\n nextBtnLbl: this.nextButtonLabel,\n doneBtnLbl: this.doneButtonLabel\n }\"\n ></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\"\n ></mad-step-header>\n</ng-template>\n", styles: [".stepper-vertical{display:block}.mat-vertical-stepper-header{display:flex;align-items:center;border:none!important}.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;flex-direction:column;box-sizing:border-box;display:flex}.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 }); }
|
|
3392
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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 data-cy=\"step-container\" *ngFor=\"let step of steps; let i = index; let isLast = last; let isFirst = first\">\n <ng-container [ngTemplateOutlet]=\"stepTemplate\" [ngTemplateOutletContext]=\"{ step: step, i: i }\"></ng-container>\n <div class=\"vertical-content-container\" [class.mat-stepper-vertical-line]=\"!isLast\">\n <div\n class=\"vertical-stepper-content\"\n 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 >\n <div data-cy=\"stepper-content\" class=\"vertical-content\">\n <ng-container\n [ngTemplateOutlet]=\"step.content\"\n [ngTemplateOutletContext]=\"{\n step: step,\n i: i,\n last: isLast,\n first: isFirst,\n nextBtnLbl: this.nextButtonLabel,\n doneBtnLbl: this.doneButtonLabel\n }\"\n ></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\"\n ></mad-step-header>\n</ng-template>\n", styles: [".stepper-vertical{display:block}.mat-vertical-stepper-header{display:flex;align-items:center;border:none!important}.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;flex-direction:column;box-sizing:border-box;display:flex}.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 }); }
|
|
3371
3393
|
}
|
|
3372
3394
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StepperComponent, decorators: [{
|
|
3373
3395
|
type: Component,
|
|
@@ -3375,7 +3397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
3375
3397
|
'[class.stepper-vertical]': 'true',
|
|
3376
3398
|
'[attr.aria-orientation]': '"vertical"',
|
|
3377
3399
|
role: 'tablist',
|
|
3378
|
-
}, 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 [ngTemplateOutlet]=\"stepTemplate\" [ngTemplateOutletContext]=\"{ step: step, i: i }\"></ng-container>\n <div class=\"vertical-content-container\" [class.mat-stepper-vertical-line]=\"!isLast\">\n <div\n class=\"vertical-stepper-content\"\n 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 >\n <div class=\"vertical-content\">\n <ng-container\n [ngTemplateOutlet]=\"step.content\"\n [ngTemplateOutletContext]=\"{\n step: step,\n i: i,\n last: isLast,\n first: isFirst,\n nextBtnLbl: this.nextButtonLabel,\n doneBtnLbl: this.doneButtonLabel\n }\"\n ></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\"\n ></mad-step-header>\n</ng-template>\n", styles: [".stepper-vertical{display:block}.mat-vertical-stepper-header{display:flex;align-items:center;border:none!important}.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;flex-direction:column;box-sizing:border-box;display:flex}.step-content,.step-buttons{padding:2em}\n"] }]
|
|
3400
|
+
}, animations: [madStepperAnimations.verticalStepTransition], providers: [{ provide: CdkStepper, useExisting: StepperComponent }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Vertical stepper -->\n<ng-container>\n <div data-cy=\"step-container\" *ngFor=\"let step of steps; let i = index; let isLast = last; let isFirst = first\">\n <ng-container [ngTemplateOutlet]=\"stepTemplate\" [ngTemplateOutletContext]=\"{ step: step, i: i }\"></ng-container>\n <div class=\"vertical-content-container\" [class.mat-stepper-vertical-line]=\"!isLast\">\n <div\n class=\"vertical-stepper-content\"\n 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 >\n <div data-cy=\"stepper-content\" class=\"vertical-content\">\n <ng-container\n [ngTemplateOutlet]=\"step.content\"\n [ngTemplateOutletContext]=\"{\n step: step,\n i: i,\n last: isLast,\n first: isFirst,\n nextBtnLbl: this.nextButtonLabel,\n doneBtnLbl: this.doneButtonLabel\n }\"\n ></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\"\n ></mad-step-header>\n</ng-template>\n", styles: [".stepper-vertical{display:block}.mat-vertical-stepper-header{display:flex;align-items:center;border:none!important}.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;flex-direction:column;box-sizing:border-box;display:flex}.step-content,.step-buttons{padding:2em}\n"] }]
|
|
3379
3401
|
}], ctorParameters: () => [{ type: i3$3.Directionality, decorators: [{
|
|
3380
3402
|
type: Optional
|
|
3381
3403
|
}] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { animationDone: [{
|
|
@@ -3706,12 +3728,14 @@ class SidebarComponent {
|
|
|
3706
3728
|
this.collapsed = !this.collapsed;
|
|
3707
3729
|
}
|
|
3708
3730
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3709
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: SidebarComponent, selector: "mad-sidebar", ngImport: i0, template: "<div [class.collapsed]=\"collapsed\" class=\"sidebar-wrapper\">\n <div class=\"sidebar-header\">\n <button (click)=\"toggleCollapse()\" color=\"basic\" mat-button>\n <mat-icon>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\n </button>\n </div>\n <div class=\"item-list\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".sidebar-wrapper{background:var(--panel-background-color);min-height:100%;display:flex;flex-direction:column;border-right:1px solid var(--panel-border-color);transition:width .1s ease-in}.sidebar-wrapper:not(.collapsed){min-width:239px}.sidebar-wrapper.collapsed{width:64px}.sidebar-wrapper .sidebar-header{display:flex;flex-direction:row-reverse;border-bottom:1px solid var(--panel-border-color)}.sidebar-wrapper .sidebar-header button{color:#707070}.sidebar-wrapper.collapsed .item-list{display:none}.sidebar-wrapper .item-list{display:flex;flex-direction:column;margin-top:16px}\n"], dependencies: [{ kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
3731
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: SidebarComponent, selector: "mad-sidebar", inputs: { collapsed: "collapsed" }, ngImport: i0, template: "<div [class.collapsed]=\"collapsed\" class=\"sidebar-wrapper\">\n <div class=\"sidebar-header\">\n <button (click)=\"toggleCollapse()\" color=\"basic\" mat-button>\n <mat-icon>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\n </button>\n </div>\n <div class=\"item-list\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".sidebar-wrapper{background:var(--panel-background-color);min-height:100%;display:flex;flex-direction:column;border-right:1px solid var(--panel-border-color);transition:width .1s ease-in}.sidebar-wrapper:not(.collapsed){min-width:239px}.sidebar-wrapper.collapsed{width:64px}.sidebar-wrapper .sidebar-header{display:flex;flex-direction:row-reverse;border-bottom:1px solid var(--panel-border-color)}.sidebar-wrapper .sidebar-header button{color:#707070}.sidebar-wrapper.collapsed .item-list{display:none}.sidebar-wrapper .item-list{display:flex;flex-direction:column;margin-top:16px}\n"], dependencies: [{ kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
3710
3732
|
}
|
|
3711
3733
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
3712
3734
|
type: Component,
|
|
3713
3735
|
args: [{ selector: 'mad-sidebar', template: "<div [class.collapsed]=\"collapsed\" class=\"sidebar-wrapper\">\n <div class=\"sidebar-header\">\n <button (click)=\"toggleCollapse()\" color=\"basic\" mat-button>\n <mat-icon>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\n </button>\n </div>\n <div class=\"item-list\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".sidebar-wrapper{background:var(--panel-background-color);min-height:100%;display:flex;flex-direction:column;border-right:1px solid var(--panel-border-color);transition:width .1s ease-in}.sidebar-wrapper:not(.collapsed){min-width:239px}.sidebar-wrapper.collapsed{width:64px}.sidebar-wrapper .sidebar-header{display:flex;flex-direction:row-reverse;border-bottom:1px solid var(--panel-border-color)}.sidebar-wrapper .sidebar-header button{color:#707070}.sidebar-wrapper.collapsed .item-list{display:none}.sidebar-wrapper .item-list{display:flex;flex-direction:column;margin-top:16px}\n"] }]
|
|
3714
|
-
}]
|
|
3736
|
+
}], propDecorators: { collapsed: [{
|
|
3737
|
+
type: Input
|
|
3738
|
+
}] } });
|
|
3715
3739
|
|
|
3716
3740
|
class SidebarItemComponent {
|
|
3717
3741
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SidebarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -3957,11 +3981,11 @@ class ToolbarComponent {
|
|
|
3957
3981
|
return this.getToolbarActions().filter((value) => !!value.importantAction).length > 0;
|
|
3958
3982
|
}
|
|
3959
3983
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$5.BreakpointObserver }, { token: i2$4.Title }, { token: ToolbarService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3960
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ToolbarComponent, selector: "mad-toolbar", ngImport: i0, template: "<mat-toolbar class=\"content-toolbar\">\n <a [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink(getBackAction())\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink(getBackAction())\">\n <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a (click)=\"getBackAction().action()\" *ngIf=\"isAction(getBackAction())\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n\n <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n <div *ngIf=\"!(isHandset$ | async)\">\n <a [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </mad-primary-button>\n </a>\n <a (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\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 *ngIf=\"isRouterLink(getBackAction())\"\n [actionName]=\"mainAction.actionName\"\n [icon]=\"mainAction.matIcon\"\n [liftHigher]=\"mainAction.liftHigherOnMobile\"\n [liftHigher2]=\"i > 0\"\n [routerLink]=\"mainAction.routerLink\"\n [id]=\"mainAction.matIcon\"\n />\n <mad-material-action-button\n *ngIf=\"isAction(getBackAction())\"\n [actionName]=\"mainAction.actionName\"\n [icon]=\"mainAction.matIcon\"\n [liftHigher]=\"mainAction.liftHigherOnMobile\"\n [liftHigher2]=\"i > 0\"\n (click)=\"mainAction.action()\"\n [id]=\"mainAction.matIcon\"\n />\n </div>\n </ng-container>\n </ng-container>\n\n <div class=\"right-aligned no-print\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <mad-icon-button\n (click)=\"action.action()\"\n *ngIf=\"\n (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n !!action.importantAction\n \"\n [id]=\"action.matIcon\"\n [matTooltip]=\"action.actionName\"\n type=\"button\"\n >\n <mat-icon\n [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n matBadgePosition=\"below after\"\n [matBadge]=\"action.badge ? action.badge.value : null\"\n >{{ action.matIcon }}</mat-icon\n >\n </mad-icon-button>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n <ng-container *ngIf=\"getToolbarActions().length > 2\">\n <mad-icon-button 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)\"\n mat-menu-item\n (click)=\"action.action()\"\n [title]=\"action.actionName\"\n >\n <mat-icon\n color=\"primary\"\n [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n [matBadge]=\"action.badge ? action.badge.value : null\"\n matBadgePosition=\"below after\"\n >{{ action.matIcon }}</mat-icon\n >\n {{ action.actionName }}\n </button>\n </ng-container>\n </ng-container>\n </ng-container>\n </mat-menu>\n </ng-container>\n </ng-container>\n </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background: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", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", 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]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], 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: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
|
|
3984
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ToolbarComponent, selector: "mad-toolbar", ngImport: i0, template: "<mat-toolbar class=\"content-toolbar\">\n <a data-cy=\"back-link-button\" [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink(getBackAction())\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a data-cy=\"back-href-button\" [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink(getBackAction())\">\n <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a data-cy=\"back-action-button\" (click)=\"getBackAction().action()\" *ngIf=\"isAction(getBackAction())\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n\n <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n <div *ngIf=\"!(isHandset$ | async)\">\n <a data-cy=\"main-action-link-button\" [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </mad-primary-button>\n </a>\n <a data-cy=\"main-action-button\" (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n <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 data-cy=\"material-main-link-button\"\n *ngIf=\"isRouterLink(getBackAction())\"\n [actionName]=\"mainAction.actionName\"\n [icon]=\"mainAction.matIcon\"\n [liftHigher]=\"mainAction.liftHigherOnMobile\"\n [liftHigher2]=\"i > 0\"\n [routerLink]=\"mainAction.routerLink\"\n [id]=\"mainAction.matIcon\"\n />\n <mad-material-action-button\n data-cy=\"material-main-action-button\"\n *ngIf=\"isAction(getBackAction())\"\n [actionName]=\"mainAction.actionName\"\n [icon]=\"mainAction.matIcon\"\n [liftHigher]=\"mainAction.liftHigherOnMobile\"\n [liftHigher2]=\"i > 0\"\n (click)=\"mainAction.action()\"\n [id]=\"mainAction.matIcon\"\n />\n </div>\n </ng-container>\n </ng-container>\n\n <div class=\"right-aligned no-print\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <mad-icon-button data-cy=\"action-icon-button\"\n (click)=\"action.action()\"\n *ngIf=\"\n (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n !!action.importantAction\n \"\n [id]=\"action.matIcon\"\n [matTooltip]=\"action.actionName\"\n type=\"button\"\n >\n <mat-icon\n [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n matBadgePosition=\"below after\"\n [matBadge]=\"action.badge ? action.badge.value : null\"\n >{{ action.matIcon }}</mat-icon\n >\n </mad-icon-button>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n <ng-container *ngIf=\"getToolbarActions().length > 2\">\n <mad-icon-button data-cy=\"burger-button\" type=\"button\" [matMenuTriggerFor]=\"burgerMenu\" [matTooltip]=\"getToolbarActionsMenuTitle()\">\n <mat-icon\n matBadgeColor=\"warn\"\n [matBadge]=\"showBadgeForMenu() ? '⁠' : null\"\n matBadgeSize=\"small\"\n matBadgePosition=\"above after\"\n >more_vert\n </mat-icon>\n </mad-icon-button>\n <mat-menu #burgerMenu=\"matMenu\" class=\"no-print toolbar-menu\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"!action.importantAction\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <button data-cy=\"burger-menu-button\"\n *ngIf=\"i >= (hasImportantToolbarActions() ? 0 : 1)\"\n mat-menu-item\n (click)=\"action.action()\"\n [title]=\"action.actionName\"\n >\n <mat-icon\n color=\"primary\"\n [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n [matBadge]=\"action.badge ? action.badge.value : null\"\n matBadgePosition=\"below after\"\n >{{ action.matIcon }}</mat-icon\n >\n {{ action.actionName }}\n </button>\n </ng-container>\n </ng-container>\n </ng-container>\n </mat-menu>\n </ng-container>\n </ng-container>\n </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background: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", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", 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]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], 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: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
|
|
3961
3985
|
}
|
|
3962
3986
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
3963
3987
|
type: Component,
|
|
3964
|
-
args: [{ selector: 'mad-toolbar', template: "<mat-toolbar class=\"content-toolbar\">\n <a [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink(getBackAction())\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink(getBackAction())\">\n <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a (click)=\"getBackAction().action()\" *ngIf=\"isAction(getBackAction())\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n\n <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n <div *ngIf=\"!(isHandset$ | async)\">\n <a [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </mad-primary-button>\n </a>\n <a (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\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 *ngIf=\"isRouterLink(getBackAction())\"\n [actionName]=\"mainAction.actionName\"\n [icon]=\"mainAction.matIcon\"\n [liftHigher]=\"mainAction.liftHigherOnMobile\"\n [liftHigher2]=\"i > 0\"\n [routerLink]=\"mainAction.routerLink\"\n [id]=\"mainAction.matIcon\"\n />\n <mad-material-action-button\n *ngIf=\"isAction(getBackAction())\"\n [actionName]=\"mainAction.actionName\"\n [icon]=\"mainAction.matIcon\"\n [liftHigher]=\"mainAction.liftHigherOnMobile\"\n [liftHigher2]=\"i > 0\"\n (click)=\"mainAction.action()\"\n [id]=\"mainAction.matIcon\"\n />\n </div>\n </ng-container>\n </ng-container>\n\n <div class=\"right-aligned no-print\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <mad-icon-button\n (click)=\"action.action()\"\n *ngIf=\"\n (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n !!action.importantAction\n \"\n [id]=\"action.matIcon\"\n [matTooltip]=\"action.actionName\"\n type=\"button\"\n >\n <mat-icon\n [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n matBadgePosition=\"below after\"\n [matBadge]=\"action.badge ? action.badge.value : null\"\n >{{ action.matIcon }}</mat-icon\n >\n </mad-icon-button>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n <ng-container *ngIf=\"getToolbarActions().length > 2\">\n <mad-icon-button 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)\"\n mat-menu-item\n (click)=\"action.action()\"\n [title]=\"action.actionName\"\n >\n <mat-icon\n color=\"primary\"\n [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n [matBadge]=\"action.badge ? action.badge.value : null\"\n matBadgePosition=\"below after\"\n >{{ action.matIcon }}</mat-icon\n >\n {{ action.actionName }}\n </button>\n </ng-container>\n </ng-container>\n </ng-container>\n </mat-menu>\n </ng-container>\n </ng-container>\n </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background: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"] }]
|
|
3988
|
+
args: [{ selector: 'mad-toolbar', template: "<mat-toolbar class=\"content-toolbar\">\n <a data-cy=\"back-link-button\" [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink(getBackAction())\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a data-cy=\"back-href-button\" [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink(getBackAction())\">\n <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a data-cy=\"back-action-button\" (click)=\"getBackAction().action()\" *ngIf=\"isAction(getBackAction())\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n\n <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n <div *ngIf=\"!(isHandset$ | async)\">\n <a data-cy=\"main-action-link-button\" [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </mad-primary-button>\n </a>\n <a data-cy=\"main-action-button\" (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n <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 data-cy=\"material-main-link-button\"\n *ngIf=\"isRouterLink(getBackAction())\"\n [actionName]=\"mainAction.actionName\"\n [icon]=\"mainAction.matIcon\"\n [liftHigher]=\"mainAction.liftHigherOnMobile\"\n [liftHigher2]=\"i > 0\"\n [routerLink]=\"mainAction.routerLink\"\n [id]=\"mainAction.matIcon\"\n />\n <mad-material-action-button\n data-cy=\"material-main-action-button\"\n *ngIf=\"isAction(getBackAction())\"\n [actionName]=\"mainAction.actionName\"\n [icon]=\"mainAction.matIcon\"\n [liftHigher]=\"mainAction.liftHigherOnMobile\"\n [liftHigher2]=\"i > 0\"\n (click)=\"mainAction.action()\"\n [id]=\"mainAction.matIcon\"\n />\n </div>\n </ng-container>\n </ng-container>\n\n <div class=\"right-aligned no-print\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <mad-icon-button data-cy=\"action-icon-button\"\n (click)=\"action.action()\"\n *ngIf=\"\n (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n !!action.importantAction\n \"\n [id]=\"action.matIcon\"\n [matTooltip]=\"action.actionName\"\n type=\"button\"\n >\n <mat-icon\n [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n matBadgePosition=\"below after\"\n [matBadge]=\"action.badge ? action.badge.value : null\"\n >{{ action.matIcon }}</mat-icon\n >\n </mad-icon-button>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n <ng-container *ngIf=\"getToolbarActions().length > 2\">\n <mad-icon-button data-cy=\"burger-button\" type=\"button\" [matMenuTriggerFor]=\"burgerMenu\" [matTooltip]=\"getToolbarActionsMenuTitle()\">\n <mat-icon\n matBadgeColor=\"warn\"\n [matBadge]=\"showBadgeForMenu() ? '⁠' : null\"\n matBadgeSize=\"small\"\n matBadgePosition=\"above after\"\n >more_vert\n </mat-icon>\n </mad-icon-button>\n <mat-menu #burgerMenu=\"matMenu\" class=\"no-print toolbar-menu\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"!action.importantAction\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <button data-cy=\"burger-menu-button\"\n *ngIf=\"i >= (hasImportantToolbarActions() ? 0 : 1)\"\n mat-menu-item\n (click)=\"action.action()\"\n [title]=\"action.actionName\"\n >\n <mat-icon\n color=\"primary\"\n [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n [matBadge]=\"action.badge ? action.badge.value : null\"\n matBadgePosition=\"below after\"\n >{{ action.matIcon }}</mat-icon\n >\n {{ action.actionName }}\n </button>\n </ng-container>\n </ng-container>\n </ng-container>\n </mat-menu>\n </ng-container>\n </ng-container>\n </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background: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"] }]
|
|
3965
3989
|
}], ctorParameters: () => [{ type: i1$5.BreakpointObserver }, { type: i2$4.Title }, { type: ToolbarService }] });
|
|
3966
3990
|
|
|
3967
3991
|
class ToolbarModule {
|