@porscheinformatik/material-addons 17.2.3 → 17.3.1
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/data-table/configuration/data-table-persistence-configuration.mjs +2 -0
- package/esm2022/lib/data-table/data-table-filter/data-table-filter-header.directive.mjs +4 -2
- package/esm2022/lib/data-table/data-table.component.mjs +29 -8
- package/esm2022/lib/data-table/data-table.mjs +1 -1
- package/esm2022/lib/layout/content-panel/content-panel-container/content-panel-container.component.mjs +2 -2
- package/esm2022/lib/layout/sidebar/sidebar-item/sidebar-item.component.mjs +2 -2
- package/esm2022/lib/layout/sidebar/sidebar.component.mjs +2 -2
- package/esm2022/lib/layout/sidebar-layout/sidebar-layout.component.mjs +67 -0
- package/esm2022/lib/readonly/readonly-form-field/readonly-form-field.component.mjs +1 -1
- package/esm2022/lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component.mjs +33 -9
- package/esm2022/lib/readonly/readonly-form-field.module.mjs +4 -3
- package/esm2022/public_api.mjs +3 -1
- package/esm2022/version.mjs +2 -0
- package/fesm2022/porscheinformatik-material-addons.mjs +123 -23
- package/fesm2022/porscheinformatik-material-addons.mjs.map +1 -1
- package/lib/data-table/configuration/data-table-persistence-configuration.d.ts +6 -0
- package/lib/data-table/configuration/data-table-persistence-configuration.d.ts.map +1 -0
- package/lib/data-table/data-table-filter/data-table-filter-header.directive.d.ts.map +1 -1
- package/lib/data-table/data-table.component.d.ts +8 -2
- package/lib/data-table/data-table.component.d.ts.map +1 -1
- package/lib/data-table/data-table.d.ts +1 -0
- package/lib/data-table/data-table.d.ts.map +1 -1
- package/lib/layout/sidebar-layout/sidebar-layout.component.d.ts +27 -0
- package/lib/layout/sidebar-layout/sidebar-layout.component.d.ts.map +1 -0
- package/lib/readonly/readonly-form-field/readonly-form-field.component.d.ts +1 -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 +5 -2
- package/lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component.d.ts.map +1 -1
- package/lib/readonly/readonly-form-field.module.d.ts.map +1 -1
- package/package.json +1 -1
- package/public_api.d.ts +2 -0
- package/public_api.d.ts.map +1 -1
- package/themes/common/styles.scss +8 -2
|
@@ -10,13 +10,13 @@ import * as i3 from '@angular/material/icon';
|
|
|
10
10
|
import { MatIconModule } from '@angular/material/icon';
|
|
11
11
|
import * as i5 from '@angular/material/tooltip';
|
|
12
12
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
13
|
+
import * as i1$2 from '@angular/forms';
|
|
14
|
+
import { ControlContainer, FormGroupDirective, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl } from '@angular/forms';
|
|
13
15
|
import * as i3$1 from '@angular/material/form-field';
|
|
14
16
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
15
17
|
import * as i4 from '@angular/material/input';
|
|
16
18
|
import { MatInputModule } from '@angular/material/input';
|
|
17
19
|
import * as i5$1 from '@angular/cdk/text-field';
|
|
18
|
-
import * as i1$2 from '@angular/forms';
|
|
19
|
-
import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl } from '@angular/forms';
|
|
20
20
|
import { style, animate, transition, trigger, state } from '@angular/animations';
|
|
21
21
|
import * as i2$1 from '@angular/material/card';
|
|
22
22
|
import { MatCardModule } from '@angular/material/card';
|
|
@@ -55,6 +55,8 @@ import * as i1$4 from '@angular/cdk/a11y';
|
|
|
55
55
|
import * as i3$3 from '@angular/cdk/bidi';
|
|
56
56
|
import * as i2$3 from '@angular/material/stepper';
|
|
57
57
|
import { MatStepperModule } from '@angular/material/stepper';
|
|
58
|
+
import * as i9$1 from '@angular/cdk/portal';
|
|
59
|
+
import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
|
|
58
60
|
import * as i1$5 from '@angular/cdk/layout';
|
|
59
61
|
import { Breakpoints } from '@angular/cdk/layout';
|
|
60
62
|
import * as i2$4 from '@angular/platform-browser';
|
|
@@ -699,9 +701,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
699
701
|
* @author Stefan Laesser
|
|
700
702
|
*/
|
|
701
703
|
class ReadOnlyFormFieldWrapperComponent {
|
|
702
|
-
constructor(changeDetector, elementRef) {
|
|
704
|
+
constructor(changeDetector, elementRef, rootFormGroup) {
|
|
703
705
|
this.changeDetector = changeDetector;
|
|
704
706
|
this.elementRef = elementRef;
|
|
707
|
+
this.rootFormGroup = rootFormGroup;
|
|
705
708
|
/**
|
|
706
709
|
* If set to "false", the contained mat-form-field is rendered in all it's glory.
|
|
707
710
|
* If set to "true", a readonly representation of the value is shown using the mat-form-fields label.
|
|
@@ -742,6 +745,7 @@ class ReadOnlyFormFieldWrapperComponent {
|
|
|
742
745
|
ngAfterViewInit() {
|
|
743
746
|
this.setReadonlyFieldStyle();
|
|
744
747
|
this.doRendering();
|
|
748
|
+
this.extractValue();
|
|
745
749
|
}
|
|
746
750
|
ngAfterViewChecked() {
|
|
747
751
|
this.setReadonlyFieldStyle();
|
|
@@ -779,6 +783,26 @@ class ReadOnlyFormFieldWrapperComponent {
|
|
|
779
783
|
const labelElement = this.originalContent.nativeElement.querySelector('mat-label');
|
|
780
784
|
this.label = labelElement ? labelElement.innerHTML : 'mat-label is missing!';
|
|
781
785
|
}
|
|
786
|
+
extractValue() {
|
|
787
|
+
if (this.value) {
|
|
788
|
+
return;
|
|
789
|
+
}
|
|
790
|
+
const form = this.rootFormGroup.form;
|
|
791
|
+
if (!this.originalContent || !this.originalContent.nativeElement) {
|
|
792
|
+
return;
|
|
793
|
+
}
|
|
794
|
+
const input = this.originalContent?.nativeElement?.querySelector('input');
|
|
795
|
+
if (!input) {
|
|
796
|
+
return;
|
|
797
|
+
}
|
|
798
|
+
const formControlName = input.getAttribute('formControlName');
|
|
799
|
+
if (!formControlName) {
|
|
800
|
+
return;
|
|
801
|
+
}
|
|
802
|
+
if (form && form.get(formControlName)) {
|
|
803
|
+
this.value = form.get(formControlName).getRawValue();
|
|
804
|
+
}
|
|
805
|
+
}
|
|
782
806
|
correctWidth() {
|
|
783
807
|
const formField = this.originalContent.nativeElement.querySelector('mat-form-field');
|
|
784
808
|
if (formField) {
|
|
@@ -831,13 +855,13 @@ class ReadOnlyFormFieldWrapperComponent {
|
|
|
831
855
|
}
|
|
832
856
|
return this.unitPosition === 'left' ? this.unit + ' ' + this.value : this.value + ' ' + this.unit;
|
|
833
857
|
}
|
|
834
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldWrapperComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
835
|
-
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"] }] }); }
|
|
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 }] }); }
|
|
836
860
|
}
|
|
837
861
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldWrapperComponent, decorators: [{
|
|
838
862
|
type: Component,
|
|
839
|
-
args: [{ selector: 'mad-readonly-form-field-wrapper', 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"] }]
|
|
840
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { originalContent: [{
|
|
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 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"] }]
|
|
864
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$2.FormGroupDirective }], propDecorators: { originalContent: [{
|
|
841
865
|
type: ViewChild,
|
|
842
866
|
args: ['contentWrapper', { static: false }]
|
|
843
867
|
}], readOnlyContentWrapper: [{
|
|
@@ -897,7 +921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
897
921
|
class ReadOnlyFormFieldModule {
|
|
898
922
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
899
923
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldModule, declarations: [ReadOnlyFormFieldComponent, ReadOnlyFormFieldWrapperComponent], imports: [CommonModule, RouterModule, MatFormFieldModule, MatInputModule, FormsModule, MatTooltipModule, MatIconModule], exports: [ReadOnlyFormFieldComponent, ReadOnlyFormFieldWrapperComponent] }); }
|
|
900
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldModule, imports: [CommonModule, RouterModule, MatFormFieldModule, MatInputModule, FormsModule, MatTooltipModule, MatIconModule] }); }
|
|
924
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldModule, providers: [FormGroupDirective], imports: [CommonModule, RouterModule, MatFormFieldModule, MatInputModule, FormsModule, MatTooltipModule, MatIconModule] }); }
|
|
901
925
|
}
|
|
902
926
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldModule, decorators: [{
|
|
903
927
|
type: NgModule,
|
|
@@ -905,6 +929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
905
929
|
declarations: [ReadOnlyFormFieldComponent, ReadOnlyFormFieldWrapperComponent],
|
|
906
930
|
imports: [CommonModule, RouterModule, MatFormFieldModule, MatInputModule, FormsModule, MatTooltipModule, MatIconModule],
|
|
907
931
|
exports: [ReadOnlyFormFieldComponent, ReadOnlyFormFieldWrapperComponent],
|
|
932
|
+
providers: [FormGroupDirective]
|
|
908
933
|
}]
|
|
909
934
|
}] });
|
|
910
935
|
|
|
@@ -2304,7 +2329,9 @@ class DataTableFilterHeader {
|
|
|
2304
2329
|
this.renderer.setStyle(div, 'align-items', 'center');
|
|
2305
2330
|
if (this.madFilterColumnRightAligned) {
|
|
2306
2331
|
this.renderer.setStyle(div, 'justify-content', 'flex-end');
|
|
2307
|
-
|
|
2332
|
+
if (!!headerContent.firstChild) {
|
|
2333
|
+
this.renderer.setStyle(headerContent.firstChild, 'justify-content', 'flex-end');
|
|
2334
|
+
}
|
|
2308
2335
|
}
|
|
2309
2336
|
this.renderer.appendChild(div, headerContent);
|
|
2310
2337
|
this.renderer.appendChild(this.element.nativeElement, div);
|
|
@@ -2448,6 +2475,17 @@ class DataTableComponent {
|
|
|
2448
2475
|
this._useAsync = useAsync;
|
|
2449
2476
|
this.applySortData();
|
|
2450
2477
|
}
|
|
2478
|
+
/**
|
|
2479
|
+
* @deprecated
|
|
2480
|
+
* Please use the more specific persistenceConfig instead
|
|
2481
|
+
*/
|
|
2482
|
+
set stateful(stateful) {
|
|
2483
|
+
this.persistenceConfig = {
|
|
2484
|
+
persistSort: stateful,
|
|
2485
|
+
persistFilter: stateful,
|
|
2486
|
+
persistPageSize: stateful,
|
|
2487
|
+
};
|
|
2488
|
+
}
|
|
2451
2489
|
set selection(selection) {
|
|
2452
2490
|
this._selection = selection;
|
|
2453
2491
|
this.updateSelectionModel(selection);
|
|
@@ -2552,7 +2590,11 @@ class DataTableComponent {
|
|
|
2552
2590
|
this.cancelLabel = 'Cancel';
|
|
2553
2591
|
this.infoTextLabel = 'Drag and drop a column to select or reorder it.';
|
|
2554
2592
|
this.translateLabels = true;
|
|
2555
|
-
this.
|
|
2593
|
+
this.persistenceConfig = {
|
|
2594
|
+
persistSort: false,
|
|
2595
|
+
persistFilter: false,
|
|
2596
|
+
persistPageSize: false,
|
|
2597
|
+
};
|
|
2556
2598
|
this.loading = false;
|
|
2557
2599
|
this.paginationEnabled = false;
|
|
2558
2600
|
this.page = { pageIndex: 0, pageSize: 50, length: 0 };
|
|
@@ -2790,7 +2832,7 @@ class DataTableComponent {
|
|
|
2790
2832
|
if (this._useAsync) {
|
|
2791
2833
|
this.sortEvent.emit(sort);
|
|
2792
2834
|
}
|
|
2793
|
-
if (this.
|
|
2835
|
+
if (this.persistenceConfig.persistSort) {
|
|
2794
2836
|
this.persistenceService.saveSort(this.id, sort);
|
|
2795
2837
|
}
|
|
2796
2838
|
}
|
|
@@ -2822,7 +2864,7 @@ class DataTableComponent {
|
|
|
2822
2864
|
this._selectionModel.clear();
|
|
2823
2865
|
this.applyFilterValue(filter);
|
|
2824
2866
|
}
|
|
2825
|
-
if (this.
|
|
2867
|
+
if (this.persistenceConfig.persistFilter) {
|
|
2826
2868
|
this.persistenceService.saveFilter(this.id, filter);
|
|
2827
2869
|
}
|
|
2828
2870
|
}
|
|
@@ -2842,7 +2884,7 @@ class DataTableComponent {
|
|
|
2842
2884
|
if (this._useAsync) {
|
|
2843
2885
|
this.pageEvent.emit(event);
|
|
2844
2886
|
}
|
|
2845
|
-
if (this.
|
|
2887
|
+
if (this.persistenceConfig.persistPageSize) {
|
|
2846
2888
|
this.persistenceService.savePageSize(this.id, event.pageSize);
|
|
2847
2889
|
}
|
|
2848
2890
|
}
|
|
@@ -2873,11 +2915,15 @@ class DataTableComponent {
|
|
|
2873
2915
|
if (!!this.defaultSort && !this.persistenceService.loadSort(this.id)?.direction) {
|
|
2874
2916
|
this.setSort(this.defaultSort);
|
|
2875
2917
|
}
|
|
2876
|
-
if (this.
|
|
2877
|
-
this.initPaginatorState();
|
|
2918
|
+
if (this.persistenceConfig.persistSort) {
|
|
2878
2919
|
this.initSortState();
|
|
2920
|
+
}
|
|
2921
|
+
if (this.persistenceConfig.persistFilter) {
|
|
2879
2922
|
this.initFilterState();
|
|
2880
2923
|
}
|
|
2924
|
+
if (this.persistenceConfig.persistPageSize) {
|
|
2925
|
+
this.initPaginatorState();
|
|
2926
|
+
}
|
|
2881
2927
|
this.changeDetectorRef.detectChanges();
|
|
2882
2928
|
}
|
|
2883
2929
|
initSortState() {
|
|
@@ -2947,7 +2993,7 @@ class DataTableComponent {
|
|
|
2947
2993
|
});
|
|
2948
2994
|
}
|
|
2949
2995
|
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 }); }
|
|
2950
|
-
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", 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: [
|
|
2996
|
+
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: [
|
|
2951
2997
|
trigger('detailExpand', [
|
|
2952
2998
|
state('collapsed,void', style({ height: '0px', minHeight: '0' })),
|
|
2953
2999
|
state('expanded', style({ height: '*' })),
|
|
@@ -3030,6 +3076,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
3030
3076
|
type: Input
|
|
3031
3077
|
}], stateful: [{
|
|
3032
3078
|
type: Input
|
|
3079
|
+
}], persistenceConfig: [{
|
|
3080
|
+
type: Input
|
|
3033
3081
|
}], loading: [{
|
|
3034
3082
|
type: Input
|
|
3035
3083
|
}], tableData: [{
|
|
@@ -3373,11 +3421,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
3373
3421
|
|
|
3374
3422
|
class ContentPanelContainerComponent {
|
|
3375
3423
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ContentPanelContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3376
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ContentPanelContainerComponent, selector: "mad-content-panel-container", ngImport: i0, template: "<div class=\"content-panel-sidebar-wrapper\">\n <ng-content select=\"mad-content-panel-container-sidebar\"></ng-content>\n <div class=\"content-panel-outer-wrapper\">\n <ng-content select=\"mad-content-panel-container-content\"></ng-content>\n <ng-content select=\"mad-content-panel-container-footer\"></ng-content>\n </div>\n</div>\n", styles: [":host{position:relative;overflow:hidden;display:flex;flex:1 1 auto;min-height:.05rem;background-color:var(--background-color)}.content-panel-outer-wrapper{display:flex;flex:1 1 auto;flex-direction:column}.content-panel-sidebar-wrapper{width:100%;display:flex;flex:1 1 auto;flex-direction:row}\n"] }); }
|
|
3424
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ContentPanelContainerComponent, selector: "mad-content-panel-container", ngImport: i0, template: "<div class=\"content-panel-sidebar-wrapper\">\n <ng-content select=\"mad-content-panel-container-sidebar\"></ng-content>\n <div class=\"content-panel-outer-wrapper\">\n <ng-content select=\"mad-content-panel-container-content\"></ng-content>\n <ng-content select=\"mad-content-panel-container-footer\"></ng-content>\n </div>\n</div>\n", styles: [":host{position:relative;overflow:hidden;display:flex;flex:1 1 auto;min-height:.05rem;background-color:var(--background-color)}.content-panel-outer-wrapper{display:flex;flex:1 1 auto;flex-direction:column;text-overflow:ellipsis;overflow-x:hidden}.content-panel-sidebar-wrapper{width:100%;display:flex;flex:1 1 auto;flex-direction:row}\n"] }); }
|
|
3377
3425
|
}
|
|
3378
3426
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ContentPanelContainerComponent, decorators: [{
|
|
3379
3427
|
type: Component,
|
|
3380
|
-
args: [{ selector: 'mad-content-panel-container', template: "<div class=\"content-panel-sidebar-wrapper\">\n <ng-content select=\"mad-content-panel-container-sidebar\"></ng-content>\n <div class=\"content-panel-outer-wrapper\">\n <ng-content select=\"mad-content-panel-container-content\"></ng-content>\n <ng-content select=\"mad-content-panel-container-footer\"></ng-content>\n </div>\n</div>\n", styles: [":host{position:relative;overflow:hidden;display:flex;flex:1 1 auto;min-height:.05rem;background-color:var(--background-color)}.content-panel-outer-wrapper{display:flex;flex:1 1 auto;flex-direction:column}.content-panel-sidebar-wrapper{width:100%;display:flex;flex:1 1 auto;flex-direction:row}\n"] }]
|
|
3428
|
+
args: [{ selector: 'mad-content-panel-container', template: "<div class=\"content-panel-sidebar-wrapper\">\n <ng-content select=\"mad-content-panel-container-sidebar\"></ng-content>\n <div class=\"content-panel-outer-wrapper\">\n <ng-content select=\"mad-content-panel-container-content\"></ng-content>\n <ng-content select=\"mad-content-panel-container-footer\"></ng-content>\n </div>\n</div>\n", styles: [":host{position:relative;overflow:hidden;display:flex;flex:1 1 auto;min-height:.05rem;background-color:var(--background-color)}.content-panel-outer-wrapper{display:flex;flex:1 1 auto;flex-direction:column;text-overflow:ellipsis;overflow-x:hidden}.content-panel-sidebar-wrapper{width:100%;display:flex;flex:1 1 auto;flex-direction:row}\n"] }]
|
|
3381
3429
|
}] });
|
|
3382
3430
|
|
|
3383
3431
|
class ContentPanelContainerContentComponent {
|
|
@@ -3662,20 +3710,20 @@ class SidebarComponent {
|
|
|
3662
3710
|
this.collapsed = !this.collapsed;
|
|
3663
3711
|
}
|
|
3664
3712
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3665
|
-
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);
|
|
3713
|
+
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"] }] }); }
|
|
3666
3714
|
}
|
|
3667
3715
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
3668
3716
|
type: Component,
|
|
3669
|
-
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);
|
|
3717
|
+
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"] }]
|
|
3670
3718
|
}] });
|
|
3671
3719
|
|
|
3672
3720
|
class SidebarItemComponent {
|
|
3673
3721
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SidebarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3674
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: SidebarItemComponent, selector: "[mad-sidebar-item]", ngImport: i0, template: "<span class=\"content-wrapper\">\n <ng-content></ng-content>\n</span>\n<span class=\"focus-overlay\"></span>\n", styles: ["[mad-sidebar-item]{padding:9px 24px 8px;color:var(--panel-color);position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:300;letter-spacing:.5px}[mad-sidebar-item] .focus-overlay{inset:0;position:absolute;pointer-events:none;border-radius:inherit}[mad-sidebar-item].active-sidebar-item{background-color:var(--panel-select-background)}[mad-sidebar-item]:hover .focus-overlay{background-color:#000;opacity:.04}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3722
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: SidebarItemComponent, selector: "[mad-sidebar-item]", ngImport: i0, template: "<span class=\"content-wrapper\">\n <ng-content></ng-content>\n</span>\n<span class=\"focus-overlay\"></span>\n", styles: ["[mad-sidebar-item]{padding:9px 24px 8px;color:var(--panel-color);position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:300;letter-spacing:.5px}[mad-sidebar-item] .focus-overlay{inset:0;position:absolute;pointer-events:none;border-radius:inherit}[mad-sidebar-item] .content-wrapper{width:100%}[mad-sidebar-item].active-sidebar-item{background-color:var(--panel-select-background)}[mad-sidebar-item]:hover .focus-overlay{background-color:#000;opacity:.04}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3675
3723
|
}
|
|
3676
3724
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SidebarItemComponent, decorators: [{
|
|
3677
3725
|
type: Component,
|
|
3678
|
-
args: [{ selector: '[mad-sidebar-item]', encapsulation: ViewEncapsulation.None, template: "<span class=\"content-wrapper\">\n <ng-content></ng-content>\n</span>\n<span class=\"focus-overlay\"></span>\n", styles: ["[mad-sidebar-item]{padding:9px 24px 8px;color:var(--panel-color);position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:300;letter-spacing:.5px}[mad-sidebar-item] .focus-overlay{inset:0;position:absolute;pointer-events:none;border-radius:inherit}[mad-sidebar-item].active-sidebar-item{background-color:var(--panel-select-background)}[mad-sidebar-item]:hover .focus-overlay{background-color:#000;opacity:.04}\n"] }]
|
|
3726
|
+
args: [{ selector: '[mad-sidebar-item]', encapsulation: ViewEncapsulation.None, template: "<span class=\"content-wrapper\">\n <ng-content></ng-content>\n</span>\n<span class=\"focus-overlay\"></span>\n", styles: ["[mad-sidebar-item]{padding:9px 24px 8px;color:var(--panel-color);position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:300;letter-spacing:.5px}[mad-sidebar-item] .focus-overlay{inset:0;position:absolute;pointer-events:none;border-radius:inherit}[mad-sidebar-item] .content-wrapper{width:100%}[mad-sidebar-item].active-sidebar-item{background-color:var(--panel-select-background)}[mad-sidebar-item]:hover .focus-overlay{background-color:#000;opacity:.04}\n"] }]
|
|
3679
3727
|
}] });
|
|
3680
3728
|
|
|
3681
3729
|
class SidebarModule {
|
|
@@ -3692,6 +3740,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
3692
3740
|
}]
|
|
3693
3741
|
}] });
|
|
3694
3742
|
|
|
3743
|
+
class SidebarLayoutComponent {
|
|
3744
|
+
set sideBarItems(ref) {
|
|
3745
|
+
this.sideBarItemsPortal = new TemplatePortal(ref, this._viewContainerRef);
|
|
3746
|
+
}
|
|
3747
|
+
set headerContent(ref) {
|
|
3748
|
+
this.headerContentPortal = new TemplatePortal(ref, this._viewContainerRef);
|
|
3749
|
+
}
|
|
3750
|
+
set actionGroup(ref) {
|
|
3751
|
+
this.actionGroupPortal = new TemplatePortal(ref, this._viewContainerRef);
|
|
3752
|
+
}
|
|
3753
|
+
set content(ref) {
|
|
3754
|
+
this.contentPortal = new TemplatePortal(ref, this._viewContainerRef);
|
|
3755
|
+
}
|
|
3756
|
+
set footer(ref) {
|
|
3757
|
+
this.footerPortal = new TemplatePortal(ref, this._viewContainerRef);
|
|
3758
|
+
}
|
|
3759
|
+
constructor(_viewContainerRef, router, location) {
|
|
3760
|
+
this._viewContainerRef = _viewContainerRef;
|
|
3761
|
+
this.router = router;
|
|
3762
|
+
this.location = location;
|
|
3763
|
+
this.title = '';
|
|
3764
|
+
this.hasBackButton = true;
|
|
3765
|
+
}
|
|
3766
|
+
goToPreviousPage() {
|
|
3767
|
+
this.location.back();
|
|
3768
|
+
}
|
|
3769
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SidebarLayoutComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.Router }, { token: i2.Location }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3770
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: SidebarLayoutComponent, isStandalone: true, selector: "mad-sidebar-layout", inputs: { title: "title", hasBackButton: "hasBackButton", sideBarItems: "sideBarItems", headerContent: "headerContent", actionGroup: "actionGroup", content: "content", footer: "footer" }, ngImport: i0, template: "<mad-main-container class=\"w-full\">\n <mad-content-header>\n <ng-container *ngIf=\"headerContentPortal; else defaultActionHeader\">\n <ng-template [cdkPortalOutlet]=\"headerContentPortal\"></ng-template>\n </ng-container>\n <ng-template #defaultActionHeader>\n <div class=\"sidebar-wrapper default-header-wrapper\">\n <div class=\"back-and-title\">\n <button class=\"back-button\" *ngIf=\"hasBackButton\">\n <mat-icon (click)=\"goToPreviousPage()\" color=\"primary\"> arrow_back</mat-icon>\n </button>\n <h2 class=\"title\">\n {{ title }}\n </h2>\n </div>\n <ng-template [cdkPortalOutlet]=\"actionGroupPortal\"></ng-template>\n </div>\n </ng-template>\n </mad-content-header>\n <mad-content-panel-container>\n <mad-content-panel-container-sidebar *ngIf=\"sideBarItemsPortal\">\n <ng-template [cdkPortalOutlet]=\"sideBarItemsPortal\"></ng-template>\n </mad-content-panel-container-sidebar>\n <mad-content-panel-container-content *ngIf=\"contentPortal\">\n <ng-template [cdkPortalOutlet]=\"contentPortal\"></ng-template>\n </mad-content-panel-container-content>\n <mad-content-panel-container-footer *ngIf=\"footerPortal\">\n <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n </mad-content-panel-container-footer>\n </mad-content-panel-container>\n</mad-main-container>\n", styles: [".w-full{width:100%}.back-button{background-color:transparent;border:0;cursor:pointer}.back-button:hover{background-color:var(--background-color)}.sidebar-wrapper{height:64px;background-color:var(--background-color)}.default-header-wrapper{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;white-space:nowrap}.back-and-title{display:flex;align-items:center;gap:1em;overflow:hidden}.back-and-title .title{margin:0;text-overflow:ellipsis;white-space:nowrap;overflow:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ContentPanelModule }, { kind: "component", type: ContentHeaderComponent, selector: "mad-content-header" }, { kind: "component", type: ContentPanelContainerComponent, selector: "mad-content-panel-container" }, { kind: "component", type: ContentPanelContainerContentComponent, selector: "mad-content-panel-container-content" }, { kind: "component", type: ContentPanelContainerFooterComponent, selector: "mad-content-panel-container-footer" }, { kind: "component", type: ContentPanelContainerSidebarComponent, selector: "mad-content-panel-container-sidebar" }, { kind: "component", type: MainContainerComponent, selector: "mad-main-container" }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i9$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }] }); }
|
|
3771
|
+
}
|
|
3772
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SidebarLayoutComponent, decorators: [{
|
|
3773
|
+
type: Component,
|
|
3774
|
+
args: [{ selector: 'mad-sidebar-layout', standalone: true, imports: [CommonModule, ContentPanelModule, PortalModule, MatIconModule, RouterModule], template: "<mad-main-container class=\"w-full\">\n <mad-content-header>\n <ng-container *ngIf=\"headerContentPortal; else defaultActionHeader\">\n <ng-template [cdkPortalOutlet]=\"headerContentPortal\"></ng-template>\n </ng-container>\n <ng-template #defaultActionHeader>\n <div class=\"sidebar-wrapper default-header-wrapper\">\n <div class=\"back-and-title\">\n <button class=\"back-button\" *ngIf=\"hasBackButton\">\n <mat-icon (click)=\"goToPreviousPage()\" color=\"primary\"> arrow_back</mat-icon>\n </button>\n <h2 class=\"title\">\n {{ title }}\n </h2>\n </div>\n <ng-template [cdkPortalOutlet]=\"actionGroupPortal\"></ng-template>\n </div>\n </ng-template>\n </mad-content-header>\n <mad-content-panel-container>\n <mad-content-panel-container-sidebar *ngIf=\"sideBarItemsPortal\">\n <ng-template [cdkPortalOutlet]=\"sideBarItemsPortal\"></ng-template>\n </mad-content-panel-container-sidebar>\n <mad-content-panel-container-content *ngIf=\"contentPortal\">\n <ng-template [cdkPortalOutlet]=\"contentPortal\"></ng-template>\n </mad-content-panel-container-content>\n <mad-content-panel-container-footer *ngIf=\"footerPortal\">\n <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n </mad-content-panel-container-footer>\n </mad-content-panel-container>\n</mad-main-container>\n", styles: [".w-full{width:100%}.back-button{background-color:transparent;border:0;cursor:pointer}.back-button:hover{background-color:var(--background-color)}.sidebar-wrapper{height:64px;background-color:var(--background-color)}.default-header-wrapper{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;white-space:nowrap}.back-and-title{display:flex;align-items:center;gap:1em;overflow:hidden}.back-and-title .title{margin:0;text-overflow:ellipsis;white-space:nowrap;overflow:inherit}\n"] }]
|
|
3775
|
+
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1.Router }, { type: i2.Location }], propDecorators: { title: [{
|
|
3776
|
+
type: Input
|
|
3777
|
+
}], hasBackButton: [{
|
|
3778
|
+
type: Input
|
|
3779
|
+
}], sideBarItems: [{
|
|
3780
|
+
type: Input,
|
|
3781
|
+
args: [{ required: true }]
|
|
3782
|
+
}], headerContent: [{
|
|
3783
|
+
type: Input
|
|
3784
|
+
}], actionGroup: [{
|
|
3785
|
+
type: Input
|
|
3786
|
+
}], content: [{
|
|
3787
|
+
type: Input,
|
|
3788
|
+
args: [{ required: true }]
|
|
3789
|
+
}], footer: [{
|
|
3790
|
+
type: Input
|
|
3791
|
+
}] } });
|
|
3792
|
+
|
|
3695
3793
|
class ToolbarService {
|
|
3696
3794
|
constructor(router, translate) {
|
|
3697
3795
|
this.router = router;
|
|
@@ -4075,6 +4173,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
4075
4173
|
type: Output
|
|
4076
4174
|
}] } });
|
|
4077
4175
|
|
|
4176
|
+
const VERSION = "17.3.1";
|
|
4177
|
+
|
|
4078
4178
|
/*
|
|
4079
4179
|
* Public API Surface of material-addons
|
|
4080
4180
|
*/
|
|
@@ -4083,5 +4183,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
|
|
|
4083
4183
|
* Generated bundle index. Do not edit.
|
|
4084
4184
|
*/
|
|
4085
4185
|
|
|
4086
|
-
export { BaseQuickListComponent, ButtonModule, CardComponent, CardModule, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelContainerSidebarComponent, ContentPanelModule, DangerButtonComponent, DataTableActionType, DataTableColumnsModalComponent, DataTableComponent, DataTablePersistenceService, DataTableTemplateCellDefinition, DataTableTemplateColumnDefinition, DataTableTemplateExpandableCellDefinition, DataTableTemplateExpandableColumnDefinition, FileUploadComponent, FlowbarComponent, FlowbarModule, IconButtonComponent, LinkButtonComponent, MAD_DATA_TABLE_GLOBAL_CONFIGURATION, MAD_DATA_TABLE_PERSISTENCE_SERVICE, MadBasicButton, MadButtonDirective, MadButtonGroupComponent, MainContainerComponent, MaterialActionButtonComponent, MaterialActionButtonModule, MaterialAddonsModule, NumberFormatService, NumericFieldDirective, NumericFieldModule, OutlineButtonComponent, PrimaryButtonComponent, QuickListCompactComponent, QuickListComponent, QuickListModule, ReactiveFormQuickListCompactComponent, ReactiveFormQuickListComponent, ReadOnlyFormFieldComponent, ReadOnlyFormFieldModule, ReadOnlyFormFieldWrapperComponent, SidebarComponent, SidebarItemComponent, SidebarModule, StepComponent, StepHeaderComponent, StepperComponent, StepperModule, TableComponent, TableModule, ThrottleClickDirective, ThrottleClickModule, ToolbarComponent, ToolbarModule, ToolbarService, madStepperAnimations };
|
|
4186
|
+
export { BaseQuickListComponent, ButtonModule, CardComponent, CardModule, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelContainerSidebarComponent, ContentPanelModule, DangerButtonComponent, DataTableActionType, DataTableColumnsModalComponent, DataTableComponent, DataTablePersistenceService, DataTableTemplateCellDefinition, DataTableTemplateColumnDefinition, DataTableTemplateExpandableCellDefinition, DataTableTemplateExpandableColumnDefinition, FileUploadComponent, FlowbarComponent, FlowbarModule, IconButtonComponent, LinkButtonComponent, MAD_DATA_TABLE_GLOBAL_CONFIGURATION, MAD_DATA_TABLE_PERSISTENCE_SERVICE, MadBasicButton, MadButtonDirective, MadButtonGroupComponent, MainContainerComponent, MaterialActionButtonComponent, MaterialActionButtonModule, MaterialAddonsModule, NumberFormatService, NumericFieldDirective, NumericFieldModule, OutlineButtonComponent, PrimaryButtonComponent, QuickListCompactComponent, QuickListComponent, QuickListModule, ReactiveFormQuickListCompactComponent, ReactiveFormQuickListComponent, ReadOnlyFormFieldComponent, ReadOnlyFormFieldModule, ReadOnlyFormFieldWrapperComponent, SidebarComponent, SidebarItemComponent, SidebarLayoutComponent, SidebarModule, StepComponent, StepHeaderComponent, StepperComponent, StepperModule, TableComponent, TableModule, ThrottleClickDirective, ThrottleClickModule, ToolbarComponent, ToolbarModule, ToolbarService, VERSION, madStepperAnimations };
|
|
4087
4187
|
//# sourceMappingURL=porscheinformatik-material-addons.mjs.map
|