@porscheinformatik/material-addons 22.0.8 → 22.0.10
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/fesm2022/porscheinformatik-material-addons.mjs +204 -156
- package/fesm2022/porscheinformatik-material-addons.mjs.map +1 -1
- package/package.json +5 -2
- package/themes/common/components/_button.scss +75 -8
- package/themes/common/components/_color-overrides.scss +0 -4
- package/themes/common/tokens/_tokens.scss +12 -0
- package/types/porscheinformatik-material-addons.d.ts +65 -49
- package/types/porscheinformatik-material-addons.d.ts.map +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, Component, NgModule,
|
|
2
|
+
import { input, Component, NgModule, booleanAttribute, Directive, ChangeDetectionStrategy, effect, Optional, HostBinding, LOCALE_ID, Inject, Injectable, output, InjectionToken, inject, viewChild, computed, signal, EventEmitter, Output, Input, ViewChild, forwardRef, HostListener, model, TemplateRef, ViewChildren, ContentChild, SkipSelf, ContentChildren, ViewEncapsulation, QueryList, contentChildren } from '@angular/core';
|
|
3
3
|
import * as i2$1 from '@angular/material/icon';
|
|
4
4
|
import { MatIconModule, MatIcon } from '@angular/material/icon';
|
|
5
5
|
import * as i2 from '@angular/material/tooltip';
|
|
@@ -56,6 +56,7 @@ import * as i1$6 from '@angular/cdk/a11y';
|
|
|
56
56
|
import * as i1$7 from '@angular/cdk/bidi';
|
|
57
57
|
import * as i1$8 from '@angular/material/stepper';
|
|
58
58
|
import { MatStepperModule } from '@angular/material/stepper';
|
|
59
|
+
import EmblaCarousel from 'embla-carousel';
|
|
59
60
|
import * as i9 from '@angular/cdk/portal';
|
|
60
61
|
import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
|
|
61
62
|
import * as i1$a from '@angular/cdk/layout';
|
|
@@ -98,154 +99,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
98
99
|
|
|
99
100
|
class MadBasicButton {
|
|
100
101
|
constructor() {
|
|
101
|
-
this.
|
|
102
|
+
this.type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : []));
|
|
103
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
104
|
+
this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
102
105
|
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}
|
|
106
|
-
get opacity() {
|
|
107
|
-
return this.disabled ? '0.35' : '1';
|
|
108
|
-
}
|
|
109
|
-
ngOnChanges() {
|
|
110
|
-
this.disableButton();
|
|
111
|
-
}
|
|
112
|
-
disableButton() {
|
|
113
|
-
if (this.disabled) {
|
|
114
|
-
this.button.nativeElement.addEventListener('click', this.disableClick);
|
|
115
|
-
}
|
|
116
|
-
else {
|
|
117
|
-
this.button.nativeElement.removeEventListener('click', this.disableClick);
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MadBasicButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
121
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: MadBasicButton, isStandalone: false, selector: "ng-component", host: { properties: { "style.pointer-events": "this.pointerEvent", "style.opacity": "this.opacity" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
|
|
106
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MadBasicButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
107
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: MadBasicButton, isStandalone: true, inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
122
108
|
}
|
|
123
109
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MadBasicButton, decorators: [{
|
|
124
|
-
type:
|
|
125
|
-
|
|
126
|
-
template: '',
|
|
127
|
-
standalone: false,
|
|
128
|
-
}]
|
|
129
|
-
}], propDecorators: { pointerEvent: [{
|
|
130
|
-
type: HostBinding,
|
|
131
|
-
args: ['style.pointer-events']
|
|
132
|
-
}], opacity: [{
|
|
133
|
-
type: HostBinding,
|
|
134
|
-
args: ['style.opacity']
|
|
135
|
-
}] } });
|
|
110
|
+
type: Directive
|
|
111
|
+
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] } });
|
|
136
112
|
|
|
137
113
|
class DangerButtonComponent extends MadBasicButton {
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
this.title = '';
|
|
141
|
-
}
|
|
142
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DangerButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
143
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DangerButtonComponent, isStandalone: true, 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-flat-button class=\"mad-danger\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
|
|
114
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DangerButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
115
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DangerButtonComponent, isStandalone: true, selector: "mad-danger-button", usesInheritance: true, ngImport: i0, template: "<button data-cy=\"button\" matButton=\"filled\" class=\"mad-danger\" [type]=\"type()\" [title]=\"title()\" [disabled]=\"disabled()\">\n <ng-content></ng-content>\n</button>\n", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
144
116
|
}
|
|
145
117
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DangerButtonComponent, decorators: [{
|
|
146
118
|
type: Component,
|
|
147
|
-
args: [{ selector: 'mad-danger-button', imports: [MatButtonModule], template: "<button data-cy=\"button\"
|
|
148
|
-
}]
|
|
149
|
-
type: Input
|
|
150
|
-
}], disabled: [{
|
|
151
|
-
type: Input
|
|
152
|
-
}], title: [{
|
|
153
|
-
type: Input
|
|
154
|
-
}], button: [{
|
|
155
|
-
type: ViewChild,
|
|
156
|
-
args: ['btn', { read: ElementRef, static: true }]
|
|
157
|
-
}] } });
|
|
119
|
+
args: [{ selector: 'mad-danger-button', imports: [MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button data-cy=\"button\" matButton=\"filled\" class=\"mad-danger\" [type]=\"type()\" [title]=\"title()\" [disabled]=\"disabled()\">\n <ng-content></ng-content>\n</button>\n" }]
|
|
120
|
+
}] });
|
|
158
121
|
|
|
159
122
|
class LinkButtonComponent extends MadBasicButton {
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
this.title = '';
|
|
163
|
-
}
|
|
164
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
165
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: LinkButtonComponent, isStandalone: true, 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\" class=\"mad-primary\" #btn mat-button>\n <ng-content></ng-content>\n</button>\n", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
|
|
123
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LinkButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
124
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: LinkButtonComponent, isStandalone: true, selector: "mad-link-button", usesInheritance: true, ngImport: i0, template: "<button data-cy=\"button\" matButton=\"text\" class=\"mad-primary\" [title]=\"title()\" [type]=\"type()\" [disabled]=\"disabled()\">\n <ng-content></ng-content>\n</button>\n", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
166
125
|
}
|
|
167
126
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LinkButtonComponent, decorators: [{
|
|
168
127
|
type: Component,
|
|
169
|
-
args: [{ selector: 'mad-link-button', imports: [MatButtonModule], template: "<button data-cy=\"button\" [title]=\"title\" [type]=\"type\"
|
|
170
|
-
}]
|
|
171
|
-
type: Input
|
|
172
|
-
}], disabled: [{
|
|
173
|
-
type: Input
|
|
174
|
-
}], title: [{
|
|
175
|
-
type: Input
|
|
176
|
-
}], button: [{
|
|
177
|
-
type: ViewChild,
|
|
178
|
-
args: ['btn', { read: ElementRef, static: true }]
|
|
179
|
-
}] } });
|
|
128
|
+
args: [{ selector: 'mad-link-button', imports: [MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button data-cy=\"button\" matButton=\"text\" class=\"mad-primary\" [title]=\"title()\" [type]=\"type()\" [disabled]=\"disabled()\">\n <ng-content></ng-content>\n</button>\n" }]
|
|
129
|
+
}] });
|
|
180
130
|
|
|
181
131
|
class IconButtonComponent extends MadBasicButton {
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
this.title = '';
|
|
185
|
-
}
|
|
186
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
187
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: IconButtonComponent, isStandalone: true, 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 class=\"mat-primary\" [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
|
|
132
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: IconButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
133
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: IconButtonComponent, isStandalone: true, selector: "mad-icon-button", usesInheritance: true, ngImport: i0, template: "<button data-cy=\"button\" matIconButton class=\"mat-primary\" [type]=\"type()\" [title]=\"title()\" [disabled]=\"disabled()\">\n <ng-content></ng-content>\n</button>\n", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
188
134
|
}
|
|
189
135
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
190
136
|
type: Component,
|
|
191
|
-
args: [{ selector: 'mad-icon-button', imports: [MatButtonModule], template: "<button data-cy=\"button\"
|
|
192
|
-
}]
|
|
193
|
-
type: Input
|
|
194
|
-
}], disabled: [{
|
|
195
|
-
type: Input
|
|
196
|
-
}], title: [{
|
|
197
|
-
type: Input
|
|
198
|
-
}], button: [{
|
|
199
|
-
type: ViewChild,
|
|
200
|
-
args: ['btn', { read: ElementRef, static: true }]
|
|
201
|
-
}] } });
|
|
137
|
+
args: [{ selector: 'mad-icon-button', imports: [MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button data-cy=\"button\" matIconButton class=\"mat-primary\" [type]=\"type()\" [title]=\"title()\" [disabled]=\"disabled()\">\n <ng-content></ng-content>\n</button>\n" }]
|
|
138
|
+
}] });
|
|
202
139
|
|
|
203
140
|
class OutlineButtonComponent extends MadBasicButton {
|
|
204
141
|
constructor() {
|
|
205
|
-
super();
|
|
206
|
-
this.
|
|
207
|
-
this.color = 'primary';
|
|
142
|
+
super(...arguments);
|
|
143
|
+
this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
208
144
|
}
|
|
209
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OutlineButtonComponent, deps:
|
|
210
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
145
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OutlineButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
146
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: OutlineButtonComponent, isStandalone: true, selector: "mad-outline-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<button\n data-cy=\"button\"\n matButton=\"outlined\"\n class=\"mad-outline\"\n [class.mad-primary]=\"color() === 'primary'\"\n [class.mad-accent]=\"color() === 'accent'\"\n [class.mad-warn]=\"color() === 'warn'\"\n [type]=\"type()\"\n [title]=\"title()\"\n [disabled]=\"disabled()\"\n>\n <ng-content></ng-content>\n</button>\n", styles: [".mat-mdc-outlined-button:not(:disabled){--mat-button-outlined-outline-color: var(--mat-button-outlined-label-text-color)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
211
147
|
}
|
|
212
148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OutlineButtonComponent, decorators: [{
|
|
213
149
|
type: Component,
|
|
214
|
-
args: [{ selector: 'mad-outline-button', imports: [MatButtonModule], template: "<button
|
|
215
|
-
}],
|
|
216
|
-
type: Input
|
|
217
|
-
}], disabled: [{
|
|
218
|
-
type: Input
|
|
219
|
-
}], title: [{
|
|
220
|
-
type: Input
|
|
221
|
-
}], color: [{
|
|
222
|
-
type: Input
|
|
223
|
-
}], button: [{
|
|
224
|
-
type: ViewChild,
|
|
225
|
-
args: ['btn', { read: ElementRef, static: true }]
|
|
226
|
-
}] } });
|
|
150
|
+
args: [{ selector: 'mad-outline-button', imports: [MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n data-cy=\"button\"\n matButton=\"outlined\"\n class=\"mad-outline\"\n [class.mad-primary]=\"color() === 'primary'\"\n [class.mad-accent]=\"color() === 'accent'\"\n [class.mad-warn]=\"color() === 'warn'\"\n [type]=\"type()\"\n [title]=\"title()\"\n [disabled]=\"disabled()\"\n>\n <ng-content></ng-content>\n</button>\n", styles: [".mat-mdc-outlined-button:not(:disabled){--mat-button-outlined-outline-color: var(--mat-button-outlined-label-text-color)}\n"] }]
|
|
151
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
227
152
|
|
|
228
153
|
class PrimaryButtonComponent extends MadBasicButton {
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
this.title = '';
|
|
232
|
-
}
|
|
233
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PrimaryButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
234
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PrimaryButtonComponent, isStandalone: true, 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-flat-button [type]=\"type\" [title]=\"title\" #btn>\n <ng-content></ng-content>\n</button>\n", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
|
|
154
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PrimaryButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
155
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: PrimaryButtonComponent, isStandalone: true, selector: "mad-primary-button", usesInheritance: true, ngImport: i0, template: "<button data-cy=\"button\" matButton=\"filled\" [type]=\"type()\" [title]=\"title()\" [disabled]=\"disabled()\">\n <ng-content></ng-content>\n</button>\n", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
235
156
|
}
|
|
236
157
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PrimaryButtonComponent, decorators: [{
|
|
237
158
|
type: Component,
|
|
238
|
-
args: [{ selector: 'mad-primary-button', imports: [MatButtonModule], template: "<button data-cy=\"button\"
|
|
239
|
-
}]
|
|
240
|
-
type: Input
|
|
241
|
-
}], disabled: [{
|
|
242
|
-
type: Input
|
|
243
|
-
}], title: [{
|
|
244
|
-
type: Input
|
|
245
|
-
}], button: [{
|
|
246
|
-
type: ViewChild,
|
|
247
|
-
args: ['btn', { read: ElementRef, static: true }]
|
|
248
|
-
}] } });
|
|
159
|
+
args: [{ selector: 'mad-primary-button', imports: [MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button data-cy=\"button\" matButton=\"filled\" [type]=\"type()\" [title]=\"title()\" [disabled]=\"disabled()\">\n <ng-content></ng-content>\n</button>\n" }]
|
|
160
|
+
}] });
|
|
249
161
|
|
|
250
162
|
class MadButtonDirective {
|
|
251
163
|
static { this.UPPERCASE_CLASS = 'mad-uppercase'; }
|
|
@@ -254,21 +166,18 @@ class MadButtonDirective {
|
|
|
254
166
|
constructor(renderer, elementRef, anchor, button) {
|
|
255
167
|
this.renderer = renderer;
|
|
256
168
|
this.elementRef = elementRef;
|
|
169
|
+
this.color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
|
|
170
|
+
this.outline = input(true, { ...(ngDevMode ? { debugName: "outline" } : {}), transform: booleanAttribute });
|
|
171
|
+
this.uppercase = input(true, { ...(ngDevMode ? { debugName: "uppercase" } : {}), transform: booleanAttribute });
|
|
257
172
|
this.matComponent = anchor || button;
|
|
258
173
|
if (!this.matComponent) {
|
|
259
|
-
console.error('
|
|
174
|
+
console.error('MadButtonDirective needs to be applied on a MatButton');
|
|
260
175
|
}
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
this.setUppercase(value);
|
|
267
|
-
}
|
|
268
|
-
ngOnInit() {
|
|
269
|
-
this.setUppercase(true);
|
|
270
|
-
this.setOutline(true);
|
|
271
|
-
this.matComponent.color = this.color || MadButtonDirective.DEFAULT_COLOR;
|
|
176
|
+
effect(() => {
|
|
177
|
+
this.setUppercase(this.uppercase());
|
|
178
|
+
this.setOutline(this.outline());
|
|
179
|
+
this.setColor(this.color());
|
|
180
|
+
});
|
|
272
181
|
}
|
|
273
182
|
setUppercase(value) {
|
|
274
183
|
this.addOrRemoveClass(value, MadButtonDirective.UPPERCASE_CLASS);
|
|
@@ -284,8 +193,23 @@ class MadButtonDirective {
|
|
|
284
193
|
this.renderer.removeClass(this.elementRef.nativeElement, className);
|
|
285
194
|
}
|
|
286
195
|
}
|
|
196
|
+
setColor(color) {
|
|
197
|
+
const resolvedColor = color || MadButtonDirective.DEFAULT_COLOR;
|
|
198
|
+
if (this.matComponent) {
|
|
199
|
+
this.matComponent.color = resolvedColor;
|
|
200
|
+
}
|
|
201
|
+
this.setColorClass(resolvedColor);
|
|
202
|
+
}
|
|
203
|
+
setColorClass(color) {
|
|
204
|
+
this.renderer.removeClass(this.elementRef.nativeElement, 'mad-primary');
|
|
205
|
+
this.renderer.removeClass(this.elementRef.nativeElement, 'mad-accent');
|
|
206
|
+
this.renderer.removeClass(this.elementRef.nativeElement, 'mad-warn');
|
|
207
|
+
if (color) {
|
|
208
|
+
this.renderer.addClass(this.elementRef.nativeElement, `mad-${color}`);
|
|
209
|
+
}
|
|
210
|
+
}
|
|
287
211
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MadButtonDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.MatAnchor, optional: true }, { token: i1.MatButton, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
288
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
212
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: MadButtonDirective, isStandalone: true, selector: "[madButton]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, uppercase: { classPropertyName: "uppercase", publicName: "uppercase", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
289
213
|
}
|
|
290
214
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MadButtonDirective, decorators: [{
|
|
291
215
|
type: Directive,
|
|
@@ -297,20 +221,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
297
221
|
type: Optional
|
|
298
222
|
}] }, { type: i1.MatButton, decorators: [{
|
|
299
223
|
type: Optional
|
|
300
|
-
}] }], propDecorators: { color: [{
|
|
301
|
-
type: Input
|
|
302
|
-
}], outline: [{
|
|
303
|
-
type: Input
|
|
304
|
-
}], uppercase: [{
|
|
305
|
-
type: Input
|
|
306
|
-
}] } });
|
|
224
|
+
}] }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], outline: [{ type: i0.Input, args: [{ isSignal: true, alias: "outline", required: false }] }], uppercase: [{ type: i0.Input, args: [{ isSignal: true, alias: "uppercase", required: false }] }] } });
|
|
307
225
|
|
|
308
226
|
class MadButtonGroupComponent {
|
|
309
227
|
constructor() {
|
|
310
228
|
this.setClass = true;
|
|
311
229
|
}
|
|
312
230
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MadButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
313
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: MadButtonGroupComponent, isStandalone: true, selector: "mad-button-group", host: { properties: { "class.mad-button-group": "this.setClass" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
|
|
231
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: MadButtonGroupComponent, isStandalone: true, selector: "mad-button-group", host: { properties: { "class.mad-button-group": "this.setClass" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
314
232
|
}
|
|
315
233
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MadButtonGroupComponent, decorators: [{
|
|
316
234
|
type: Component,
|
|
@@ -318,6 +236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
318
236
|
selector: 'mad-button-group',
|
|
319
237
|
template: '<ng-content></ng-content>',
|
|
320
238
|
standalone: true,
|
|
239
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
321
240
|
}]
|
|
322
241
|
}], propDecorators: { setClass: [{
|
|
323
242
|
type: HostBinding,
|
|
@@ -1278,11 +1197,11 @@ class CardComponent {
|
|
|
1278
1197
|
this.expanded.update((expanded) => !expanded);
|
|
1279
1198
|
}
|
|
1280
1199
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1281
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: CardComponent, isStandalone: true, selector: "mad-card", inputs: { cancelDisabled: { classPropertyName: "cancelDisabled", publicName: "cancelDisabled", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, editText: { classPropertyName: "editText", publicName: "editText", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, saveDisabled: { classPropertyName: "saveDisabled", publicName: "saveDisabled", isSignal: true, isRequired: false, transformFunction: null }, saveText: { classPropertyName: "saveText", publicName: "saveText", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, additionalActionIcon: { classPropertyName: "additionalActionIcon", publicName: "additionalActionIcon", isSignal: true, isRequired: false, transformFunction: null }, additionalActionText: { classPropertyName: "additionalActionText", publicName: "additionalActionText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", edit: "edit", cancel: "cancel", save: "save", additionalAction: "additionalAction" }, ngImport: i0, template: "<mat-card>\n @if (showHeader()) {\n <mat-card-header class=\"card-header\">\n <mat-card-title-group class=\"card-title-group\">\n @if (title(); as cardTitle) {\n <mat-card-title data-cy=\"card-title\" class=\"card-title\">\n {{ cardTitle }}\n </mat-card-title>\n }\n <div data-cy=\"title-buttons-block\" class=\"header-actions\">\n @if (showCollapseButton()) {\n <mad-icon-button data-testid=\"collapse-btn\" (click)=\"toggleCollapse()\">\n <mat-icon [class]=\"collapseIconClasses()\"> keyboard_arrow_up </mat-icon>\n </mad-icon-button>\n }\n @if (showAdditionalActionButton()) {\n <mad-icon-button data-testid=\"additional-btn\" (click)=\"additionalAction.emit()\" [title]=\"additionalActionText()\" type=\"button\">\n <mat-icon>{{ additionalActionIcon() }}</mat-icon>\n </mad-icon-button>\n }\n @if (showEditButton()) {\n <mad-icon-button data-testid=\"edit-btn\" [title]=\"editText()\" (click)=\"onEdit()\" type=\"button\">\n <mat-icon>create</mat-icon>\n </mad-icon-button>\n }\n </div>\n </mat-card-title-group>\n </mat-card-header>\n }\n\n @if (expanded()) {\n <mat-card-content animate.enter=\"card-content-enter\" animate.leave=\"card-content-leave\">\n <ng-content />\n </mat-card-content>\n }\n\n @if (showActions()) {\n <mat-card-actions class=\"card-actions\">\n <mad-primary-button\n data-testid=\"save-btn\"\n [title]=\"saveText()\"\n [disabled]=\"saveDisabled()\"\n (throttleClick)=\"save.emit()\"\n madThrottleClick\n >\n {{ saveText() }}\n </mad-primary-button>\n <mad-outline-button data-testid=\"cancel-btn\" [title]=\"cancelText()\" [disabled]=\"cancelDisabled()\" (click)=\"cancel.emit()\">\n {{ cancelText() }}\n </mad-outline-button>\n </mat-card-actions>\n }\n</mat-card>\n", styles: [":host{display:block}.card-header{height:48px}.card-title-group{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%}.card-title{display:flex;align-items:center}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:.25rem;flex-shrink:0}.collapse-icon{transition:transform .1s ease}.collapse-icon--collapsed{transform:rotate(180deg)}.card-actions{display:flex;gap:.75rem}.card-content-enter{animation:card-content-enter .18s cubic-bezier(.2,0,0,1)}.card-content-leave{animation:card-content-leave .22s cubic-bezier(.4,0,.2,1)}@keyframes card-content-enter{0%{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}@keyframes card-content-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2px)}}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i1$3.MatCardTitleGroup, selector: "mat-card-title-group" }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button"
|
|
1200
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: CardComponent, isStandalone: true, selector: "mad-card", inputs: { cancelDisabled: { classPropertyName: "cancelDisabled", publicName: "cancelDisabled", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, editText: { classPropertyName: "editText", publicName: "editText", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, saveDisabled: { classPropertyName: "saveDisabled", publicName: "saveDisabled", isSignal: true, isRequired: false, transformFunction: null }, saveText: { classPropertyName: "saveText", publicName: "saveText", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, additionalActionIcon: { classPropertyName: "additionalActionIcon", publicName: "additionalActionIcon", isSignal: true, isRequired: false, transformFunction: null }, additionalActionText: { classPropertyName: "additionalActionText", publicName: "additionalActionText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", edit: "edit", cancel: "cancel", save: "save", additionalAction: "additionalAction" }, ngImport: i0, template: "<mat-card>\n @if (showHeader()) {\n <mat-card-header class=\"card-header\">\n <mat-card-title-group class=\"card-title-group\">\n @if (title(); as cardTitle) {\n <mat-card-title data-cy=\"card-title\" class=\"card-title\">\n {{ cardTitle }}\n </mat-card-title>\n }\n <div data-cy=\"title-buttons-block\" class=\"header-actions\">\n @if (showCollapseButton()) {\n <mad-icon-button data-testid=\"collapse-btn\" (click)=\"toggleCollapse()\">\n <mat-icon [class]=\"collapseIconClasses()\"> keyboard_arrow_up </mat-icon>\n </mad-icon-button>\n }\n @if (showAdditionalActionButton()) {\n <mad-icon-button data-testid=\"additional-btn\" (click)=\"additionalAction.emit()\" [title]=\"additionalActionText()\" type=\"button\">\n <mat-icon>{{ additionalActionIcon() }}</mat-icon>\n </mad-icon-button>\n }\n @if (showEditButton()) {\n <mad-icon-button data-testid=\"edit-btn\" [title]=\"editText()\" (click)=\"onEdit()\" type=\"button\">\n <mat-icon>create</mat-icon>\n </mad-icon-button>\n }\n </div>\n </mat-card-title-group>\n </mat-card-header>\n }\n\n @if (expanded()) {\n <mat-card-content animate.enter=\"card-content-enter\" animate.leave=\"card-content-leave\">\n <ng-content />\n </mat-card-content>\n }\n\n @if (showActions()) {\n <mat-card-actions class=\"card-actions\">\n <mad-primary-button\n data-testid=\"save-btn\"\n [title]=\"saveText()\"\n [disabled]=\"saveDisabled()\"\n (throttleClick)=\"save.emit()\"\n madThrottleClick\n >\n {{ saveText() }}\n </mad-primary-button>\n <mad-outline-button data-testid=\"cancel-btn\" [title]=\"cancelText()\" [disabled]=\"cancelDisabled()\" (click)=\"cancel.emit()\">\n {{ cancelText() }}\n </mad-outline-button>\n </mat-card-actions>\n }\n</mat-card>\n", styles: [":host{display:block}.card-header{height:48px}.card-title-group{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%}.card-title{display:flex;align-items:center}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:.25rem;flex-shrink:0}.collapse-icon{transition:transform .1s ease}.collapse-icon--collapsed{transform:rotate(180deg)}.card-actions{display:flex;gap:.75rem;padding:1.5rem 1rem}.card-content-enter{animation:card-content-enter .18s cubic-bezier(.2,0,0,1)}.card-content-leave{animation:card-content-leave .22s cubic-bezier(.4,0,.2,1)}@keyframes card-content-enter{0%{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}@keyframes card-content-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2px)}}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i1$3.MatCardTitleGroup, selector: "mat-card-title-group" }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button" }, { kind: "directive", type: ThrottleClickDirective, selector: "[madThrottleClick]", inputs: ["throttleTime"], outputs: ["throttleClick"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["color"] }] }); }
|
|
1282
1201
|
}
|
|
1283
1202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CardComponent, decorators: [{
|
|
1284
1203
|
type: Component,
|
|
1285
|
-
args: [{ selector: 'mad-card', imports: [MatCardModule, IconButtonComponent, MatIconModule, PrimaryButtonComponent, ThrottleClickDirective, OutlineButtonComponent], template: "<mat-card>\n @if (showHeader()) {\n <mat-card-header class=\"card-header\">\n <mat-card-title-group class=\"card-title-group\">\n @if (title(); as cardTitle) {\n <mat-card-title data-cy=\"card-title\" class=\"card-title\">\n {{ cardTitle }}\n </mat-card-title>\n }\n <div data-cy=\"title-buttons-block\" class=\"header-actions\">\n @if (showCollapseButton()) {\n <mad-icon-button data-testid=\"collapse-btn\" (click)=\"toggleCollapse()\">\n <mat-icon [class]=\"collapseIconClasses()\"> keyboard_arrow_up </mat-icon>\n </mad-icon-button>\n }\n @if (showAdditionalActionButton()) {\n <mad-icon-button data-testid=\"additional-btn\" (click)=\"additionalAction.emit()\" [title]=\"additionalActionText()\" type=\"button\">\n <mat-icon>{{ additionalActionIcon() }}</mat-icon>\n </mad-icon-button>\n }\n @if (showEditButton()) {\n <mad-icon-button data-testid=\"edit-btn\" [title]=\"editText()\" (click)=\"onEdit()\" type=\"button\">\n <mat-icon>create</mat-icon>\n </mad-icon-button>\n }\n </div>\n </mat-card-title-group>\n </mat-card-header>\n }\n\n @if (expanded()) {\n <mat-card-content animate.enter=\"card-content-enter\" animate.leave=\"card-content-leave\">\n <ng-content />\n </mat-card-content>\n }\n\n @if (showActions()) {\n <mat-card-actions class=\"card-actions\">\n <mad-primary-button\n data-testid=\"save-btn\"\n [title]=\"saveText()\"\n [disabled]=\"saveDisabled()\"\n (throttleClick)=\"save.emit()\"\n madThrottleClick\n >\n {{ saveText() }}\n </mad-primary-button>\n <mad-outline-button data-testid=\"cancel-btn\" [title]=\"cancelText()\" [disabled]=\"cancelDisabled()\" (click)=\"cancel.emit()\">\n {{ cancelText() }}\n </mad-outline-button>\n </mat-card-actions>\n }\n</mat-card>\n", styles: [":host{display:block}.card-header{height:48px}.card-title-group{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%}.card-title{display:flex;align-items:center}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:.25rem;flex-shrink:0}.collapse-icon{transition:transform .1s ease}.collapse-icon--collapsed{transform:rotate(180deg)}.card-actions{display:flex;gap:.75rem}.card-content-enter{animation:card-content-enter .18s cubic-bezier(.2,0,0,1)}.card-content-leave{animation:card-content-leave .22s cubic-bezier(.4,0,.2,1)}@keyframes card-content-enter{0%{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}@keyframes card-content-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2px)}}\n"] }]
|
|
1204
|
+
args: [{ selector: 'mad-card', imports: [MatCardModule, IconButtonComponent, MatIconModule, PrimaryButtonComponent, ThrottleClickDirective, OutlineButtonComponent], template: "<mat-card>\n @if (showHeader()) {\n <mat-card-header class=\"card-header\">\n <mat-card-title-group class=\"card-title-group\">\n @if (title(); as cardTitle) {\n <mat-card-title data-cy=\"card-title\" class=\"card-title\">\n {{ cardTitle }}\n </mat-card-title>\n }\n <div data-cy=\"title-buttons-block\" class=\"header-actions\">\n @if (showCollapseButton()) {\n <mad-icon-button data-testid=\"collapse-btn\" (click)=\"toggleCollapse()\">\n <mat-icon [class]=\"collapseIconClasses()\"> keyboard_arrow_up </mat-icon>\n </mad-icon-button>\n }\n @if (showAdditionalActionButton()) {\n <mad-icon-button data-testid=\"additional-btn\" (click)=\"additionalAction.emit()\" [title]=\"additionalActionText()\" type=\"button\">\n <mat-icon>{{ additionalActionIcon() }}</mat-icon>\n </mad-icon-button>\n }\n @if (showEditButton()) {\n <mad-icon-button data-testid=\"edit-btn\" [title]=\"editText()\" (click)=\"onEdit()\" type=\"button\">\n <mat-icon>create</mat-icon>\n </mad-icon-button>\n }\n </div>\n </mat-card-title-group>\n </mat-card-header>\n }\n\n @if (expanded()) {\n <mat-card-content animate.enter=\"card-content-enter\" animate.leave=\"card-content-leave\">\n <ng-content />\n </mat-card-content>\n }\n\n @if (showActions()) {\n <mat-card-actions class=\"card-actions\">\n <mad-primary-button\n data-testid=\"save-btn\"\n [title]=\"saveText()\"\n [disabled]=\"saveDisabled()\"\n (throttleClick)=\"save.emit()\"\n madThrottleClick\n >\n {{ saveText() }}\n </mad-primary-button>\n <mad-outline-button data-testid=\"cancel-btn\" [title]=\"cancelText()\" [disabled]=\"cancelDisabled()\" (click)=\"cancel.emit()\">\n {{ cancelText() }}\n </mad-outline-button>\n </mat-card-actions>\n }\n</mat-card>\n", styles: [":host{display:block}.card-header{height:48px}.card-title-group{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%}.card-title{display:flex;align-items:center}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:.25rem;flex-shrink:0}.collapse-icon{transition:transform .1s ease}.collapse-icon--collapsed{transform:rotate(180deg)}.card-actions{display:flex;gap:.75rem;padding:1.5rem 1rem}.card-content-enter{animation:card-content-enter .18s cubic-bezier(.2,0,0,1)}.card-content-leave{animation:card-content-leave .22s cubic-bezier(.4,0,.2,1)}@keyframes card-content-enter{0%{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}@keyframes card-content-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2px)}}\n"] }]
|
|
1286
1205
|
}], propDecorators: { cancelDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelDisabled", required: false }] }], cancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelText", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], editText: [{ type: i0.Input, args: [{ isSignal: true, alias: "editText", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], saveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveDisabled", required: false }] }], saveText: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveText", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], additionalActionIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalActionIcon", required: false }] }], additionalActionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalActionText", required: false }] }], edit: [{ type: i0.Output, args: ["edit"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], save: [{ type: i0.Output, args: ["save"] }], additionalAction: [{ type: i0.Output, args: ["additionalAction"] }] } });
|
|
1287
1206
|
|
|
1288
1207
|
class ThrottleClickModule {
|
|
@@ -1439,7 +1358,7 @@ class QuickListCompactComponent extends BaseQuickListComponent {
|
|
|
1439
1358
|
this.formBuilder = formBuilder;
|
|
1440
1359
|
}
|
|
1441
1360
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: QuickListCompactComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1442
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: QuickListCompactComponent, isStandalone: true, selector: "mad-quick-list-compact", usesInheritance: true, ngImport: i0, template: "<h3>\n <ng-content select=\"label\"></ng-content>\n</h3>\n@for (item of allItems; track item; let isLast = $last) {\n @if (itemTemplate) {\n <div class=\"flex-container\" #row class=\"quick-list-row\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n @if (!readonly && isDeleteAllowed()) {\n <mad-icon-button data-cy=\"delete-item-button\" (click)=\"removeItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n }\n @if (!readonly && isLast) {\n <mad-icon-button data-cy=\"add-item-button\" [disabled]=\"!isAddAllowed()\" (click)=\"addItem()\">\n <mat-icon>add_circle_outline</mat-icon>\n </mad-icon-button>\n }\n </div>\n }\n}\n@if (!readonly && !this.allItems.length) {\n <mad-link-button data-cy=\"add-first-item-button\" (click)=\"addItem()\" [disabled]=\"!isAddAllowed()\">\n {{ addLabel }}\n </mad-link-button>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button"
|
|
1361
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: QuickListCompactComponent, isStandalone: true, selector: "mad-quick-list-compact", usesInheritance: true, ngImport: i0, template: "<h3>\n <ng-content select=\"label\"></ng-content>\n</h3>\n@for (item of allItems; track item; let isLast = $last) {\n @if (itemTemplate) {\n <div class=\"flex-container\" #row class=\"quick-list-row\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n @if (!readonly && isDeleteAllowed()) {\n <mad-icon-button data-cy=\"delete-item-button\" (click)=\"removeItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n }\n @if (!readonly && isLast) {\n <mad-icon-button data-cy=\"add-item-button\" [disabled]=\"!isAddAllowed()\" (click)=\"addItem()\">\n <mat-icon>add_circle_outline</mat-icon>\n </mad-icon-button>\n }\n </div>\n }\n}\n@if (!readonly && !this.allItems.length) {\n <mad-link-button data-cy=\"add-first-item-button\" (click)=\"addItem()\" [disabled]=\"!isAddAllowed()\">\n {{ addLabel }}\n </mad-link-button>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LinkButtonComponent, selector: "mad-link-button" }] }); }
|
|
1443
1362
|
}
|
|
1444
1363
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: QuickListCompactComponent, decorators: [{
|
|
1445
1364
|
type: Component,
|
|
@@ -1454,7 +1373,7 @@ class QuickListComponent extends BaseQuickListComponent {
|
|
|
1454
1373
|
this.formBuilder = formBuilder;
|
|
1455
1374
|
}
|
|
1456
1375
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: QuickListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1457
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: QuickListComponent, isStandalone: true, selector: "mad-quick-list", usesInheritance: true, ngImport: i0, template: "<h3>\n <ng-content select=\"label\"></ng-content>\n</h3>\n@for (item of allItems; track item) {\n @if (itemTemplate) {\n <div #row class=\"quick-list-row\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n @if (!readonly && isDeleteAllowed()) {\n <mad-icon-button data-cy=\"delete-item-button\" (click)=\"removeItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n }\n </div>\n }\n}\n@if (!readonly) {\n <mad-outline-button data-cy=\"add-item-button\" (click)=\"addItem()\" [disabled]=\"!addPossible || !isAddAllowed()\">\n {{ addLabel }}\n </mad-outline-button>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button"
|
|
1376
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: QuickListComponent, isStandalone: true, selector: "mad-quick-list", usesInheritance: true, ngImport: i0, template: "<h3>\n <ng-content select=\"label\"></ng-content>\n</h3>\n@for (item of allItems; track item) {\n @if (itemTemplate) {\n <div #row class=\"quick-list-row\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n @if (!readonly && isDeleteAllowed()) {\n <mad-icon-button data-cy=\"delete-item-button\" (click)=\"removeItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n }\n </div>\n }\n}\n@if (!readonly) {\n <mad-outline-button data-cy=\"add-item-button\" (click)=\"addItem()\" [disabled]=\"!addPossible || !isAddAllowed()\">\n {{ addLabel }}\n </mad-outline-button>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["color"] }] }); }
|
|
1458
1377
|
}
|
|
1459
1378
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: QuickListComponent, decorators: [{
|
|
1460
1379
|
type: Component,
|
|
@@ -1468,7 +1387,7 @@ class ReactiveFormQuickListComponent extends BaseQuickListComponent {
|
|
|
1468
1387
|
this.formBuilder = formBuilder;
|
|
1469
1388
|
}
|
|
1470
1389
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ReactiveFormQuickListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1471
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ReactiveFormQuickListComponent, isStandalone: true, selector: "mad-reactive-form-quick-list", usesInheritance: true, ngImport: i0, template: "<h3>\n <ng-content select=\"label\"></ng-content>\n</h3>\n@for (item of formArray.controls; track item) {\n @if (itemTemplate) {\n <div #row class=\"quick-list-row\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n @if (!readonly && isDeleteReactiveAllowed()) {\n <mad-icon-button data-cy=\"delete-item-button\" (click)=\"removeReactiveItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n }\n </div>\n }\n}\n\n@if (!readonly) {\n <mad-outline-button data-cy=\"add-item-button\" (click)=\"addReactiveItem()\" [disabled]=\"!isAddReactiveAllowed()\">\n {{ addLabel }}\n </mad-outline-button>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button"
|
|
1390
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ReactiveFormQuickListComponent, isStandalone: true, selector: "mad-reactive-form-quick-list", usesInheritance: true, ngImport: i0, template: "<h3>\n <ng-content select=\"label\"></ng-content>\n</h3>\n@for (item of formArray.controls; track item) {\n @if (itemTemplate) {\n <div #row class=\"quick-list-row\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n @if (!readonly && isDeleteReactiveAllowed()) {\n <mad-icon-button data-cy=\"delete-item-button\" (click)=\"removeReactiveItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n }\n </div>\n }\n}\n\n@if (!readonly) {\n <mad-outline-button data-cy=\"add-item-button\" (click)=\"addReactiveItem()\" [disabled]=\"!isAddReactiveAllowed()\">\n {{ addLabel }}\n </mad-outline-button>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["color"] }] }); }
|
|
1472
1391
|
}
|
|
1473
1392
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ReactiveFormQuickListComponent, decorators: [{
|
|
1474
1393
|
type: Component,
|
|
@@ -1482,7 +1401,7 @@ class ReactiveFormQuickListCompactComponent extends BaseQuickListComponent {
|
|
|
1482
1401
|
this.formBuilder = formBuilder;
|
|
1483
1402
|
}
|
|
1484
1403
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ReactiveFormQuickListCompactComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1485
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ReactiveFormQuickListCompactComponent, isStandalone: true, selector: "mad-reactive-form-quick-list-compact", usesInheritance: true, ngImport: i0, template: "<h3>\n <ng-content select=\"label\"></ng-content>\n</h3>\n@for (item of formArray.controls; track item; let isLast = $last) {\n @if (itemTemplate) {\n <div #row class=\"quick-list-row\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n @if (!readonly && isDeleteReactiveAllowed()) {\n <mad-icon-button data-cy=\"delete-item-button\" (click)=\"removeReactiveItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n }\n @if (!readonly && isLast) {\n <mad-icon-button data-cy=\"add-item-button\" [disabled]=\"!isAddReactiveAllowed()\" (click)=\"addReactiveItem()\">\n <mat-icon>add_circle_outline</mat-icon>\n </mad-icon-button>\n }\n </div>\n }\n}\n@if (!readonly && !this.formArray?.controls.length) {\n <mad-link-button data-cy=\"add-first-item-button\" (click)=\"addReactiveItem()\" [disabled]=\"!isAddReactiveAllowed()\">\n {{ addLabel }}\n </mad-link-button>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button"
|
|
1404
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ReactiveFormQuickListCompactComponent, isStandalone: true, selector: "mad-reactive-form-quick-list-compact", usesInheritance: true, ngImport: i0, template: "<h3>\n <ng-content select=\"label\"></ng-content>\n</h3>\n@for (item of formArray.controls; track item; let isLast = $last) {\n @if (itemTemplate) {\n <div #row class=\"quick-list-row\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n @if (!readonly && isDeleteReactiveAllowed()) {\n <mad-icon-button data-cy=\"delete-item-button\" (click)=\"removeReactiveItem(item)\">\n <mat-icon>delete</mat-icon>\n </mad-icon-button>\n }\n @if (!readonly && isLast) {\n <mad-icon-button data-cy=\"add-item-button\" [disabled]=\"!isAddReactiveAllowed()\" (click)=\"addReactiveItem()\">\n <mat-icon>add_circle_outline</mat-icon>\n </mad-icon-button>\n }\n </div>\n }\n}\n@if (!readonly && !this.formArray?.controls.length) {\n <mad-link-button data-cy=\"add-first-item-button\" (click)=\"addReactiveItem()\" [disabled]=\"!isAddReactiveAllowed()\">\n {{ addLabel }}\n </mad-link-button>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LinkButtonComponent, selector: "mad-link-button" }] }); }
|
|
1486
1405
|
}
|
|
1487
1406
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ReactiveFormQuickListCompactComponent, decorators: [{
|
|
1488
1407
|
type: Component,
|
|
@@ -1617,7 +1536,7 @@ class TableComponent {
|
|
|
1617
1536
|
return event?.target?.classList.contains('mat-icon');
|
|
1618
1537
|
}
|
|
1619
1538
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1620
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TableComponent, isStandalone: true, selector: "mad-table", inputs: { columns: "columns", filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", noDataText: "noDataText", pageSizeOptions: "pageSizeOptions", defaultPageSize: "defaultPageSize", rowActions: "rowActions", tableActions: "tableActions", displayedData: "displayedData", paginationEnabled: "paginationEnabled", filterEnabled: "filterEnabled" }, outputs: { tableAction: "tableAction", rowAction: "rowAction", sortEvent: "sortEvent" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<!-- Table actions -->\n@if (tableActions?.length) {\n <div>\n @for (tableAction of tableActions; track tableAction) {\n <mad-primary-button class=\"table-action\" (click)=\"onTableAction(tableAction)\">\n {{ tableAction.label }}\n </mad-primary-button>\n }\n </div>\n}\n\n<!-- Row action buttons -->\n<mat-menu #menu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n @for (rowAction of rowActions; track rowAction) {\n <button mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n {{ rowAction.label }}\n </button>\n }\n </ng-template>\n</mat-menu>\n\n<!-- Table filter -->\n@if (isFilterEnabled) {\n <mat-form-field>\n <mat-label>{{ filterLabel }}</mat-label>\n <input matInput (keyup)=\"onFilter($event?.target?.value)\" placeholder=\"{{ filterPlaceholder }}\" />\n </mat-form-field>\n}\n\n<!-- Table -->\n@if (dataSource?.data?.length > 0) {\n <div class=\"mad-table\">\n <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n <!-- Row actions column -->\n @if (rowActions?.length) {\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\" sticky>\n <th mat-header-cell *matHeaderCellDef class=\"row-action-button\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n <mad-icon-button [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"menu\">\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n </td>\n </ng-container>\n }\n <!-- Columns with data -->\n @for (column of columns; track column) {\n <ng-container [matColumnDef]=\"column.label\" [sticky]=\"column.isSticky\">\n @if (column.isSortable) {\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"{{ column.label }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n [class.text-right]=\"column.isRightAligned\"\n >\n {{ column.label }}\n </th>\n } @else {\n <th mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ column.label }}\n </th>\n }\n <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\">\n {{ element[column.dataPropertyName] }}\n </td>\n </ng-container>\n }\n <tr mat-header-row *matHeaderRowDef=\"columnNames\"></tr>\n <tr\n mat-row\n [class.clickable-table-row]=\"isRowClickable\"\n (click)=\"onRowEvent($event, row)\"\n *matRowDef=\"let row; columns: columnNames\"\n ></tr>\n </table>\n </div>\n} @else {\n <div class=\"noDataText\">\n {{ noDataText }}\n </div>\n}\n<!-- Pagination -->\n<mat-paginator\n [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n [pageSize]=\"defaultPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n showFirstLastButtons\n>\n</mat-paginator>\n\n<!-- No data alert -->\n", styles: [".text-right{text-align:right!important}.table-action{margin-right:.5em;margin-bottom:.5em}.row-action-button{width:10px}.noDataText{width:100%;text-align:center}.mad-table{width:100%;overflow-x:auto}\n"], dependencies: [{ kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button"
|
|
1539
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TableComponent, isStandalone: true, selector: "mad-table", inputs: { columns: "columns", filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", noDataText: "noDataText", pageSizeOptions: "pageSizeOptions", defaultPageSize: "defaultPageSize", rowActions: "rowActions", tableActions: "tableActions", displayedData: "displayedData", paginationEnabled: "paginationEnabled", filterEnabled: "filterEnabled" }, outputs: { tableAction: "tableAction", rowAction: "rowAction", sortEvent: "sortEvent" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<!-- Table actions -->\n@if (tableActions?.length) {\n <div>\n @for (tableAction of tableActions; track tableAction) {\n <mad-primary-button class=\"table-action\" (click)=\"onTableAction(tableAction)\">\n {{ tableAction.label }}\n </mad-primary-button>\n }\n </div>\n}\n\n<!-- Row action buttons -->\n<mat-menu #menu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n @for (rowAction of rowActions; track rowAction) {\n <button mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n {{ rowAction.label }}\n </button>\n }\n </ng-template>\n</mat-menu>\n\n<!-- Table filter -->\n@if (isFilterEnabled) {\n <mat-form-field>\n <mat-label>{{ filterLabel }}</mat-label>\n <input matInput (keyup)=\"onFilter($event?.target?.value)\" placeholder=\"{{ filterPlaceholder }}\" />\n </mat-form-field>\n}\n\n<!-- Table -->\n@if (dataSource?.data?.length > 0) {\n <div class=\"mad-table\">\n <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n <!-- Row actions column -->\n @if (rowActions?.length) {\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\" sticky>\n <th mat-header-cell *matHeaderCellDef class=\"row-action-button\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n <mad-icon-button [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"menu\">\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n </td>\n </ng-container>\n }\n <!-- Columns with data -->\n @for (column of columns; track column) {\n <ng-container [matColumnDef]=\"column.label\" [sticky]=\"column.isSticky\">\n @if (column.isSortable) {\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"{{ column.label }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n [class.text-right]=\"column.isRightAligned\"\n >\n {{ column.label }}\n </th>\n } @else {\n <th mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ column.label }}\n </th>\n }\n <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\">\n {{ element[column.dataPropertyName] }}\n </td>\n </ng-container>\n }\n <tr mat-header-row *matHeaderRowDef=\"columnNames\"></tr>\n <tr\n mat-row\n [class.clickable-table-row]=\"isRowClickable\"\n (click)=\"onRowEvent($event, row)\"\n *matRowDef=\"let row; columns: columnNames\"\n ></tr>\n </table>\n </div>\n} @else {\n <div class=\"noDataText\">\n {{ noDataText }}\n </div>\n}\n<!-- Pagination -->\n<mat-paginator\n [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n [pageSize]=\"defaultPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n showFirstLastButtons\n>\n</mat-paginator>\n\n<!-- No data alert -->\n", styles: [".text-right{text-align:right!important}.table-action{margin-right:.5em;margin-bottom:.5em}.row-action-button{width:10px}.noDataText{width:100%;text-align:center}.mad-table{width:100%;overflow-x:auto}\n"], dependencies: [{ kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.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: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1$4.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: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
|
|
1621
1540
|
}
|
|
1622
1541
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableComponent, decorators: [{
|
|
1623
1542
|
type: Component,
|
|
@@ -1790,7 +1709,7 @@ class DataTableColumnsModalComponent {
|
|
|
1790
1709
|
this.filteredAvailableColumns = [...this.availableColumns];
|
|
1791
1710
|
}
|
|
1792
1711
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableColumnsModalComponent, deps: [{ token: i1$5.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1793
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataTableColumnsModalComponent, isStandalone: true, selector: "mad-data-table-columns-modal.component", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.titleLabel | translate }}</h1>\n<div mat-dialog-content>\n <div class=\"column-drag-main-content\">\n <div class=\"column-drag-container\">\n <div class=\"column-drag-info-area\">{{ data.infoTextLabel | translate }}</div>\n <div class=\"column-drag-container-header\">{{ data.selectedLabel | translate }}</div>\n <div\n cdkDropList\n #selectedList=\"cdkDropList\"\n [cdkDropListData]=\"selectedColumns\"\n [cdkDropListConnectedTo]=\"[availableList]\"\n class=\"column-drag-list selected-drag-list\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n @for (selectedColumn of selectedColumns; track selectedColumn; let i = $index) {\n <div class=\"column-drag-box\" cdkDrag [id]=\"selectedColumn.id\">{{ i + 1 }}. {{ selectedColumn.label | translate }}</div>\n }\n </div>\n </div>\n\n <div class=\"column-drag-container\">\n <div class=\"column-drag-info-area\">\n <!-- Table filter -->\n <mat-form-field>\n <mat-label>{{ data.filterColumnsLabel | translate }}</mat-label>\n <input\n matInput\n autocomplete=\"off\"\n (keyup)=\"updateFilterValue()\"\n placeholder=\"{{ data.filterColumnsPlaceHolder | translate }}\"\n [(ngModel)]=\"searchFilter\"\n />\n @if (searchFilter) {\n <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearFilterValue()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-form-field>\n </div>\n <div class=\"column-drag-container-header\">{{ data.availableLabel | translate }}</div>\n <div\n cdkDropList\n cdkDropListSortingDisabled\n #availableList=\"cdkDropList\"\n [cdkDropListData]=\"availableColumns\"\n [cdkDropListConnectedTo]=\"[selectedList]\"\n class=\"column-drag-list\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n @for (availableColumn of filteredAvailableColumns; track availableColumn) {\n <div class=\"column-drag-box\" cdkDrag [id]=\"availableColumn.id\">\n {{ availableColumn.label }}\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n<div mat-dialog-actions [align]=\"'end'\">\n <mad-outline-button (click)=\"onCancel()\">\n {{ data.cancelLabel | translate }}\n </mad-outline-button>\n @if (data.deleteDefinitionAllowed) {\n <mad-danger-button (click)=\"onDelete()\">\n {{ data.deleteLabel | translate }}\n </mad-danger-button>\n }\n <mad-primary-button (click)=\"onSave()\" [disabled]=\"!((this.selectedColumns.length || 0) > 0)\">\n {{ data.saveLabel | translate }}\n </mad-primary-button>\n</div>\n", styles: [".column-drag-main-content{display:flex;flex-direction:row;width:544px;justify-content:space-between;padding:8px 8px 16px;margin-bottom:16px;border-bottom:1px solid var(--mat-sys-outline-variant)}.column-drag-container{width:256px;max-width:100%;display:inline-block;vertical-align:top;font-size:small}.info-box{width:100%;font-size:small;margin-bottom:16px;color:var(--mat-sys-on-surface-variant)}.column-drag-info-area{width:100%;height:36px;margin-bottom:32px;color:var(--mat-sys-on-surface-variant);font-size:small;display:flex;justify-content:right;align-items:stretch;flex-direction:column}.column-drag-list{border:solid 1px var(--mat-sys-outline-variant);height:200px;box-sizing:border-box;background:var(--mat-sys-surface);border-radius:4px;overflow:auto;display:block}.column-drag-container-header{font-weight:700;margin-bottom:4px}.column-drag-box{padding:12px 10px;border-bottom:solid 1px var(--mat-sys-outline-variant);color:var(--mat-sys-on-surface);display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;height:40px;cursor:move;background:var(--mat-sys-surface);font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-drag-box:last-child{border:none}.column-drag-list.cdk-drop-list-dragging .column-drag-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ButtonModule }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button"
|
|
1712
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataTableColumnsModalComponent, isStandalone: true, selector: "mad-data-table-columns-modal.component", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.titleLabel | translate }}</h1>\n<div mat-dialog-content>\n <div class=\"column-drag-main-content\">\n <div class=\"column-drag-container\">\n <div class=\"column-drag-info-area\">{{ data.infoTextLabel | translate }}</div>\n <div class=\"column-drag-container-header\">{{ data.selectedLabel | translate }}</div>\n <div\n cdkDropList\n #selectedList=\"cdkDropList\"\n [cdkDropListData]=\"selectedColumns\"\n [cdkDropListConnectedTo]=\"[availableList]\"\n class=\"column-drag-list selected-drag-list\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n @for (selectedColumn of selectedColumns; track selectedColumn; let i = $index) {\n <div class=\"column-drag-box\" cdkDrag [id]=\"selectedColumn.id\">{{ i + 1 }}. {{ selectedColumn.label | translate }}</div>\n }\n </div>\n </div>\n\n <div class=\"column-drag-container\">\n <div class=\"column-drag-info-area\">\n <!-- Table filter -->\n <mat-form-field>\n <mat-label>{{ data.filterColumnsLabel | translate }}</mat-label>\n <input\n matInput\n autocomplete=\"off\"\n (keyup)=\"updateFilterValue()\"\n placeholder=\"{{ data.filterColumnsPlaceHolder | translate }}\"\n [(ngModel)]=\"searchFilter\"\n />\n @if (searchFilter) {\n <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearFilterValue()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-form-field>\n </div>\n <div class=\"column-drag-container-header\">{{ data.availableLabel | translate }}</div>\n <div\n cdkDropList\n cdkDropListSortingDisabled\n #availableList=\"cdkDropList\"\n [cdkDropListData]=\"availableColumns\"\n [cdkDropListConnectedTo]=\"[selectedList]\"\n class=\"column-drag-list\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n @for (availableColumn of filteredAvailableColumns; track availableColumn) {\n <div class=\"column-drag-box\" cdkDrag [id]=\"availableColumn.id\">\n {{ availableColumn.label }}\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n<div mat-dialog-actions [align]=\"'end'\">\n <mad-outline-button (click)=\"onCancel()\">\n {{ data.cancelLabel | translate }}\n </mad-outline-button>\n @if (data.deleteDefinitionAllowed) {\n <mad-danger-button (click)=\"onDelete()\">\n {{ data.deleteLabel | translate }}\n </mad-danger-button>\n }\n <mad-primary-button (click)=\"onSave()\" [disabled]=\"!((this.selectedColumns.length || 0) > 0)\">\n {{ data.saveLabel | translate }}\n </mad-primary-button>\n</div>\n", styles: [".column-drag-main-content{display:flex;flex-direction:row;width:544px;justify-content:space-between;padding:8px 8px 16px;margin-bottom:16px;border-bottom:1px solid var(--mat-sys-outline-variant)}.column-drag-container{width:256px;max-width:100%;display:inline-block;vertical-align:top;font-size:small}.info-box{width:100%;font-size:small;margin-bottom:16px;color:var(--mat-sys-on-surface-variant)}.column-drag-info-area{width:100%;height:36px;margin-bottom:32px;color:var(--mat-sys-on-surface-variant);font-size:small;display:flex;justify-content:right;align-items:stretch;flex-direction:column}.column-drag-list{border:solid 1px var(--mat-sys-outline-variant);height:200px;box-sizing:border-box;background:var(--mat-sys-surface);border-radius:4px;overflow:auto;display:block}.column-drag-container-header{font-weight:700;margin-bottom:4px}.column-drag-box{padding:12px 10px;border-bottom:solid 1px var(--mat-sys-outline-variant);color:var(--mat-sys-on-surface);display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;height:40px;cursor:move;background:var(--mat-sys-surface);font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-drag-box:last-child{border:none}.column-drag-list.cdk-drop-list-dragging .column-drag-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ButtonModule }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button" }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["color"] }, { kind: "component", type: DangerButtonComponent, selector: "mad-danger-button" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$4.TranslatePipe, name: "translate" }] }); }
|
|
1794
1713
|
}
|
|
1795
1714
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableColumnsModalComponent, decorators: [{
|
|
1796
1715
|
type: Component,
|
|
@@ -2925,7 +2844,7 @@ class DataTableComponent {
|
|
|
2925
2844
|
return this.filter?.getActiveFilterCount() === 0;
|
|
2926
2845
|
}
|
|
2927
2846
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$5.MatDialog }, { token: MAD_DATA_TABLE_PERSISTENCE_SERVICE }, { token: MAD_DATA_TABLE_GLOBAL_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2928
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", 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", rowExpandable: "rowExpandable", 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 @if (tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)) {\n <div>\n @for (actionGroup of tableActions; track actionGroup) {\n <mad-button-group class=\"table-action-group\">\n @for (tableAction of actionGroup; track $index) {\n <mad-outline-button [hidden]=\"isHidden(tableAction)\" [disabled]=\"isDisabled(tableAction)\" (click)=\"onActionEvent(tableAction)\">\n {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n {{ getSelectedCount(tableAction.type) }}\n </mad-outline-button>\n }\n </mad-button-group>\n }\n @if (filterMode === 'COLUMN_BASED' && showDeleteFilterAction) {\n <mad-button-group class=\"table-action-group\">\n <button\n mat-icon-button\n [matTooltip]=\"'common.filter.delete.tooltip' | translate\"\n [disabled]=\"disableDeleteFilterButton()\"\n class=\"delete-filter-action mat-primary\"\n (click)=\"onDeleteFilter()\"\n >\n <mat-icon fontSet=\"material-icons-outlined\" matBadgeColor=\"warn\" [matBadge]=\"getFilterBadgeContent()\">\n filter_alt_off\n </mat-icon>\n </button>\n </mad-button-group>\n }\n </div>\n }\n @if (filterMode === 'TABLE_BASED') {\n <mat-form-field data-cy=\"filter-input\">\n <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n </mat-form-field>\n }\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n @for (rowAction of rowActions; track rowAction) {\n @if (!isHidden(rowAction)) {\n <button\n data-cy=\"row-action-menu-button\"\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 }\n }\n </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n @for (definition of editableColumnDefinitions; track definition) {\n <button\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 }\n </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n @for (definition of viewableColumnDefinitions; track definition) {\n <button\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 }\n </ng-template>\n</mat-menu>\n\n<!-- Table -->\n@if (filterMode === 'COLUMN_BASED' || showEmptyTable || !!dataSource.filteredData?.length) {\n <div class=\"datatable\" [class]=\"tableClass\">\n @if (loading) {\n <div class=\"mad-datatable-spinner-wrapper\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n }\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 @if (selectionEmitMode !== 'NONE' && selectionMode === 'BATCH') {\n <div class=\"mad-datatable-checkbox-container\">\n <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"></mat-checkbox>\n </div>\n }\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 @if (showCheckbox(element)) {\n <div 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 }\n <!-- SINGLE: row action menu icon -->\n @if (showRowActionIcon(element) && hasVisibleRowActions(element)) {\n <mad-icon-button\n data-cy=\"row-action-button\"\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 }\n <!-- SINGLE: row radio button -->\n @if (showRadioButton(element)) {\n <div 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 }\n <!-- EXPANDABLE: row is expandable/collapsable -->\n @if (showExpandableButton(element)) {\n <mad-icon-button (click)=\"onExpand($event, element)\">\n @if (expandedElement !== element) {\n <mat-icon>keyboard_arrow_down</mat-icon>\n } @else {\n <mat-icon>keyboard_arrow_up</mat-icon>\n }\n </mad-icon-button>\n }\n <!-- NONE: nothing -->\n </td>\n </ng-container>\n <!-- Cell definitions and rows with injected cells -->\n @for (column of columns; track column.id) {\n <ng-container [matColumnDef]=\"column.id\">\n <!-- header cell to be injected -->\n @switch (getDataTableHeaderType(column)) {\n @case ('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 }\n @case ('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 }\n @case ('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 }\n @default {\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n }\n }\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 (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\n <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n @if (!!expandableDef) {\n <ng-container [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\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)=\"!!expandableColumnDef && onExpand($event, row)\"\n ></tr>\n @if (!!expandableDef) {\n <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n }\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} @else {\n <!-- No data alert -->\n <div data-cy=\"no-data-block\" class=\"noDataText\">\n @if (loading) {\n <div class=\"mad-datatable-spinner-wrapper\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n }\n {{ translateLabels ? (noDataText | translate) : noDataText }}\n </div>\n}\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 @if (editableColumnDefinitions?.length === 1) {\n <mad-icon-button (click)=\"onColumnSettings()\">\n <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n </mad-icon-button>\n }\n <!-- column settings: multiple definitions -->\n @if ((editableColumnDefinitions?.length || 0) > 0) {\n <mad-icon-button [matMenuTriggerFor]=\"editableDefinitionMenu\">\n <mat-icon>view_column</mat-icon>\n </mad-icon-button>\n }\n <!-- column view: multiple definitions -->\n @if ((viewableColumnDefinitions?.length || 0) > 0) {\n <mad-icon-button [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n <mat-icon>preview</mat-icon>\n </mad-icon-button>\n }\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<!-- 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:var(--datatable-background)}.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%;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{display:inline-flex;vertical-align:middle;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:var(--datatable-background);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:var(--datatable-background);z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:var(--mat-sys-on-surface);background-color:var(--datatable-hover)}.mad-dt-child-cell{color:var(--mat-sys-on-surface-variant)}.delete-filter-action{vertical-align:middle}::ng-deep .mat-sort-header .mat-sort-header-arrow:hover{color:var(--main-primary);cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.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: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1$4.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: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i11.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: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: i16.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { 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"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$4.TranslatePipe, name: "translate" }], animations: [
|
|
2847
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", 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", rowExpandable: "rowExpandable", 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 @if (tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)) {\n <div>\n @for (actionGroup of tableActions; track actionGroup) {\n <mad-button-group class=\"table-action-group\">\n @for (tableAction of actionGroup; track $index) {\n <mad-outline-button [hidden]=\"isHidden(tableAction)\" [disabled]=\"isDisabled(tableAction)\" (click)=\"onActionEvent(tableAction)\">\n {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n {{ getSelectedCount(tableAction.type) }}\n </mad-outline-button>\n }\n </mad-button-group>\n }\n @if (filterMode === 'COLUMN_BASED' && showDeleteFilterAction) {\n <mad-button-group class=\"table-action-group\">\n <button\n mat-icon-button\n [matTooltip]=\"'common.filter.delete.tooltip' | translate\"\n [disabled]=\"disableDeleteFilterButton()\"\n class=\"delete-filter-action mat-primary\"\n (click)=\"onDeleteFilter()\"\n >\n <mat-icon fontSet=\"material-icons-outlined\" matBadgeColor=\"warn\" [matBadge]=\"getFilterBadgeContent()\">\n filter_alt_off\n </mat-icon>\n </button>\n </mad-button-group>\n }\n </div>\n }\n @if (filterMode === 'TABLE_BASED') {\n <mat-form-field data-cy=\"filter-input\">\n <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n </mat-form-field>\n }\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n @for (rowAction of rowActions; track rowAction) {\n @if (!isHidden(rowAction)) {\n <button\n data-cy=\"row-action-menu-button\"\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 }\n }\n </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n @for (definition of editableColumnDefinitions; track definition) {\n <button\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 }\n </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n @for (definition of viewableColumnDefinitions; track definition) {\n <button\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 }\n </ng-template>\n</mat-menu>\n\n<!-- Table -->\n@if (filterMode === 'COLUMN_BASED' || showEmptyTable || !!dataSource.filteredData?.length) {\n <div class=\"datatable\" [class]=\"tableClass\">\n @if (loading) {\n <div class=\"mad-datatable-spinner-wrapper\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n }\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 @if (selectionEmitMode !== 'NONE' && selectionMode === 'BATCH') {\n <div class=\"mad-datatable-checkbox-container\">\n <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"></mat-checkbox>\n </div>\n }\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 @if (showCheckbox(element)) {\n <div 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 }\n <!-- SINGLE: row action menu icon -->\n @if (showRowActionIcon(element) && hasVisibleRowActions(element)) {\n <mad-icon-button\n data-cy=\"row-action-button\"\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 }\n <!-- SINGLE: row radio button -->\n @if (showRadioButton(element)) {\n <div 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 }\n <!-- EXPANDABLE: row is expandable/collapsable -->\n @if (showExpandableButton(element)) {\n <mad-icon-button (click)=\"onExpand($event, element)\">\n @if (expandedElement !== element) {\n <mat-icon>keyboard_arrow_down</mat-icon>\n } @else {\n <mat-icon>keyboard_arrow_up</mat-icon>\n }\n </mad-icon-button>\n }\n <!-- NONE: nothing -->\n </td>\n </ng-container>\n <!-- Cell definitions and rows with injected cells -->\n @for (column of columns; track column.id) {\n <ng-container [matColumnDef]=\"column.id\">\n <!-- header cell to be injected -->\n @switch (getDataTableHeaderType(column)) {\n @case ('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 }\n @case ('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 }\n @case ('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 }\n @default {\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n }\n }\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 (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\n <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n @if (!!expandableDef) {\n <ng-container [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\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)=\"!!expandableColumnDef && onExpand($event, row)\"\n ></tr>\n @if (!!expandableDef) {\n <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n }\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} @else {\n <!-- No data alert -->\n <div data-cy=\"no-data-block\" class=\"noDataText\">\n @if (loading) {\n <div class=\"mad-datatable-spinner-wrapper\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n }\n {{ translateLabels ? (noDataText | translate) : noDataText }}\n </div>\n}\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 @if (editableColumnDefinitions?.length === 1) {\n <mad-icon-button (click)=\"onColumnSettings()\">\n <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n </mad-icon-button>\n }\n <!-- column settings: multiple definitions -->\n @if ((editableColumnDefinitions?.length || 0) > 0) {\n <mad-icon-button [matMenuTriggerFor]=\"editableDefinitionMenu\">\n <mat-icon>view_column</mat-icon>\n </mad-icon-button>\n }\n <!-- column view: multiple definitions -->\n @if ((viewableColumnDefinitions?.length || 0) > 0) {\n <mad-icon-button [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n <mat-icon>preview</mat-icon>\n </mad-icon-button>\n }\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<!-- 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:var(--datatable-background)}.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%;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{display:inline-flex;vertical-align:middle;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:var(--datatable-background);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:var(--datatable-background);z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:var(--mat-sys-on-surface);background-color:var(--datatable-hover)}.mad-dt-child-cell{color:var(--mat-sys-on-surface-variant)}.delete-filter-action{vertical-align:middle}::ng-deep .mat-sort-header .mat-sort-header-arrow:hover{color:var(--main-primary);cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.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: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1$4.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: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i11.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: ["color"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button" }, { kind: "component", type: MadButtonGroupComponent, selector: "mad-button-group" }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: i16.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { 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"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$4.TranslatePipe, name: "translate" }], animations: [
|
|
2929
2848
|
trigger('detailExpand', [
|
|
2930
2849
|
state('collapsed,void', style({ height: '0px', minHeight: '0' })),
|
|
2931
2850
|
state('expanded', style({ height: '*' })),
|
|
@@ -3269,7 +3188,7 @@ class StepComponent extends CdkStep {
|
|
|
3269
3188
|
}
|
|
3270
3189
|
}
|
|
3271
3190
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: StepComponent, deps: [{ token: forwardRef(() => StepperComponent) }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3272
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: StepComponent, isStandalone: true, 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 @if (last) {\n <div>\n <mad-primary-button data-cy=\"complete-step-button\" (click)=\"completeLast()\">{{ doneBtnLbl }}</mad-primary-button>\n </div>\n } @else {\n <div>\n <mad-primary-button data-cy=\"next-step-button\" (click)=\"next()\">{{ nextBtnLbl }}</mad-primary-button>\n </div>\n }\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}.step-container{border-left:1px solid var(--step-border-color);border-right:1px solid var(--step-border-color);border-bottom:1px solid var(--step-border-color);flex-direction:column;box-sizing:border-box;display:flex}.step-content,.step-buttons{padding:2em}\n"], dependencies: [{ kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button"
|
|
3191
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: StepComponent, isStandalone: true, 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 @if (last) {\n <div>\n <mad-primary-button data-cy=\"complete-step-button\" (click)=\"completeLast()\">{{ doneBtnLbl }}</mad-primary-button>\n </div>\n } @else {\n <div>\n <mad-primary-button data-cy=\"next-step-button\" (click)=\"next()\">{{ nextBtnLbl }}</mad-primary-button>\n </div>\n }\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}.step-container{border-left:1px solid var(--step-border-color);border-right:1px solid var(--step-border-color);border-bottom:1px solid var(--step-border-color);flex-direction:column;box-sizing:border-box;display:flex}.step-content,.step-buttons{padding:2em}\n"], dependencies: [{ kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3273
3192
|
}
|
|
3274
3193
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: StepComponent, decorators: [{
|
|
3275
3194
|
type: Component,
|
|
@@ -3675,6 +3594,128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
3675
3594
|
}]
|
|
3676
3595
|
}] });
|
|
3677
3596
|
|
|
3597
|
+
class CarouselShortTextDirective {
|
|
3598
|
+
constructor() {
|
|
3599
|
+
this.text = input('', { ...(ngDevMode ? { debugName: "text" } : {}), alias: 'madCarouselShortText' });
|
|
3600
|
+
}
|
|
3601
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CarouselShortTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3602
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: CarouselShortTextDirective, isStandalone: true, selector: "[madCarouselShortText]", inputs: { text: { classPropertyName: "text", publicName: "madCarouselShortText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
3603
|
+
}
|
|
3604
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CarouselShortTextDirective, decorators: [{
|
|
3605
|
+
type: Directive,
|
|
3606
|
+
args: [{
|
|
3607
|
+
selector: '[madCarouselShortText]',
|
|
3608
|
+
}]
|
|
3609
|
+
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "madCarouselShortText", required: false }] }] } });
|
|
3610
|
+
|
|
3611
|
+
class CarouselSlideDirective {
|
|
3612
|
+
constructor() {
|
|
3613
|
+
this.carousel = inject(CarouselComponent);
|
|
3614
|
+
}
|
|
3615
|
+
get hostClasses() {
|
|
3616
|
+
const loop = !!this.carousel.options()?.loop;
|
|
3617
|
+
const base = 'flex min-w-0 min-h-fit flex-[0_0_100%] items-center justify-center';
|
|
3618
|
+
const border = this.carousel.useSlideBorder() ? ' border border-gray-400' : '';
|
|
3619
|
+
const loopMargin = loop ? ' ml-4' : '';
|
|
3620
|
+
return base + border + loopMargin;
|
|
3621
|
+
}
|
|
3622
|
+
get hostHeight() {
|
|
3623
|
+
return this.carousel.slideHeight();
|
|
3624
|
+
}
|
|
3625
|
+
get hostBorderRadius() {
|
|
3626
|
+
return this.carousel.slideBorderRadius();
|
|
3627
|
+
}
|
|
3628
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CarouselSlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3629
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: CarouselSlideDirective, isStandalone: true, selector: "[madCarouselSlide]", host: { properties: { "class": "this.hostClasses", "style.height": "this.hostHeight", "style.border-radius": "this.hostBorderRadius" } }, ngImport: i0 }); }
|
|
3630
|
+
}
|
|
3631
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CarouselSlideDirective, decorators: [{
|
|
3632
|
+
type: Directive,
|
|
3633
|
+
args: [{
|
|
3634
|
+
selector: '[madCarouselSlide]',
|
|
3635
|
+
}]
|
|
3636
|
+
}], propDecorators: { hostClasses: [{
|
|
3637
|
+
type: HostBinding,
|
|
3638
|
+
args: ['class']
|
|
3639
|
+
}], hostHeight: [{
|
|
3640
|
+
type: HostBinding,
|
|
3641
|
+
args: ['style.height']
|
|
3642
|
+
}], hostBorderRadius: [{
|
|
3643
|
+
type: HostBinding,
|
|
3644
|
+
args: ['style.border-radius']
|
|
3645
|
+
}] } });
|
|
3646
|
+
|
|
3647
|
+
class CarouselComponent {
|
|
3648
|
+
constructor() {
|
|
3649
|
+
this.shortTexts = contentChildren(CarouselShortTextDirective, ...(ngDevMode ? [{ debugName: "shortTexts" }] : []));
|
|
3650
|
+
this.slides = contentChildren(CarouselSlideDirective, ...(ngDevMode ? [{ debugName: "slides" }] : []));
|
|
3651
|
+
this.options = input(undefined, ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
3652
|
+
this.width = input('50%', ...(ngDevMode ? [{ debugName: "width" }] : []));
|
|
3653
|
+
this.slideHeight = input('12rem', ...(ngDevMode ? [{ debugName: "slideHeight" }] : []));
|
|
3654
|
+
this.slideBorderRadius = input('5px', ...(ngDevMode ? [{ debugName: "slideBorderRadius" }] : []));
|
|
3655
|
+
this.useSlideBorder = input(true, ...(ngDevMode ? [{ debugName: "useSlideBorder" }] : []));
|
|
3656
|
+
this.viewportRef = viewChild('viewport', ...(ngDevMode ? [{ debugName: "viewportRef" }] : []));
|
|
3657
|
+
this.containerRef = viewChild('container', ...(ngDevMode ? [{ debugName: "containerRef" }] : []));
|
|
3658
|
+
this.selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
|
|
3659
|
+
this.scrollSnaps = signal([], ...(ngDevMode ? [{ debugName: "scrollSnaps" }] : []));
|
|
3660
|
+
this.prevBtnDisabled = signal(true, ...(ngDevMode ? [{ debugName: "prevBtnDisabled" }] : []));
|
|
3661
|
+
this.nextBtnDisabled = signal(true, ...(ngDevMode ? [{ debugName: "nextBtnDisabled" }] : []));
|
|
3662
|
+
this.containerLoopClass = computed(() => (this.options()?.loop ? '-mr-4' : ''), ...(ngDevMode ? [{ debugName: "containerLoopClass" }] : []));
|
|
3663
|
+
effect(() => this.initEmbla());
|
|
3664
|
+
effect(() => {
|
|
3665
|
+
const slideCount = this.slides().length;
|
|
3666
|
+
if (slideCount > 0) {
|
|
3667
|
+
this.validateShortTexts(slideCount);
|
|
3668
|
+
}
|
|
3669
|
+
});
|
|
3670
|
+
}
|
|
3671
|
+
initEmbla() {
|
|
3672
|
+
this.emblaApi = EmblaCarousel(this.viewportRef().nativeElement, this.options());
|
|
3673
|
+
this.onInit();
|
|
3674
|
+
this.onSelect();
|
|
3675
|
+
this.emblaApi.on('select', () => this.onSelect());
|
|
3676
|
+
this.emblaApi.on('reInit', () => {
|
|
3677
|
+
this.onInit();
|
|
3678
|
+
this.onSelect();
|
|
3679
|
+
});
|
|
3680
|
+
}
|
|
3681
|
+
validateShortTexts(slideCount) {
|
|
3682
|
+
const shortTextCount = this.shortTexts().length;
|
|
3683
|
+
if (shortTextCount > 0 && shortTextCount !== slideCount) {
|
|
3684
|
+
console.error(`Found ${slideCount} slides but only ${shortTextCount} slides provide the \`carouselShortText\` directive! Make sure that either none, or all slides provide this value!`);
|
|
3685
|
+
}
|
|
3686
|
+
}
|
|
3687
|
+
onInit() {
|
|
3688
|
+
if (!this.emblaApi)
|
|
3689
|
+
return;
|
|
3690
|
+
this.selectedIndex.set(this.emblaApi.selectedScrollSnap());
|
|
3691
|
+
this.scrollSnaps.set(this.emblaApi.scrollSnapList());
|
|
3692
|
+
this.prevBtnDisabled.set(!this.emblaApi.canScrollPrev());
|
|
3693
|
+
this.nextBtnDisabled.set(!this.emblaApi.canScrollNext());
|
|
3694
|
+
}
|
|
3695
|
+
onSelect() {
|
|
3696
|
+
if (!this.emblaApi)
|
|
3697
|
+
return;
|
|
3698
|
+
this.selectedIndex.set(this.emblaApi.selectedScrollSnap());
|
|
3699
|
+
this.prevBtnDisabled.set(!this.emblaApi.canScrollPrev());
|
|
3700
|
+
this.nextBtnDisabled.set(!this.emblaApi.canScrollNext());
|
|
3701
|
+
}
|
|
3702
|
+
scrollNext() {
|
|
3703
|
+
this.emblaApi?.scrollNext();
|
|
3704
|
+
}
|
|
3705
|
+
scrollPrev() {
|
|
3706
|
+
this.emblaApi?.scrollPrev();
|
|
3707
|
+
}
|
|
3708
|
+
scrollTo(index) {
|
|
3709
|
+
this.emblaApi?.scrollTo(index);
|
|
3710
|
+
}
|
|
3711
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3712
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: CarouselComponent, isStandalone: true, selector: "mad-carousel", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, slideHeight: { classPropertyName: "slideHeight", publicName: "slideHeight", isSignal: true, isRequired: false, transformFunction: null }, slideBorderRadius: { classPropertyName: "slideBorderRadius", publicName: "slideBorderRadius", isSignal: true, isRequired: false, transformFunction: null }, useSlideBorder: { classPropertyName: "useSlideBorder", publicName: "useSlideBorder", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "shortTexts", predicate: CarouselShortTextDirective, isSignal: true }, { propertyName: "slides", predicate: CarouselSlideDirective, isSignal: true }], viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"h-fit min-w-fit\" [style.width]=\"width()\">\n <div class=\"flex flex-row items-center justify-center gap-4\">\n <button\n class=\"bg-(--carousel-button-background-color) cursor-pointer hover:border-[0.1rem] hover:border-(--carousel-button-border-color) w-7 h-7 rounded-full flex items-center justify-center disabled:opacity-50 disabled:hover:border-0 disabled:cursor-not-allowed\"\n [disabled]=\"prevBtnDisabled()\"\n (click)=\"scrollPrev()\"\n >\n <span class=\"material-symbols-outlined\">chevron_left</span>\n </button>\n\n <div class=\"flex-1 w-0 min-w-0 overflow-hidden\" #viewport>\n <div class=\"flex flex-row gap-4 w-full touch-pan-y touch-pinch-zoom\" [class]=\"containerLoopClass()\" #container>\n <ng-content></ng-content>\n </div>\n </div>\n\n <button\n class=\"bg-(--carousel-button-background-color) cursor-pointer hover:border-[0.1rem] hover:border-(--carousel-button-border-color) w-7 h-7 rounded-full flex items-center justify-center disabled:opacity-50 disabled:hover:border-0 disabled:cursor-not-allowed\"\n [disabled]=\"nextBtnDisabled()\"\n (click)=\"scrollNext()\"\n >\n <span class=\"material-symbols-outlined\">chevron_right</span>\n </button>\n </div>\n\n @let slideTexts = shortTexts();\n @let shouldDisplaySlideText = slideTexts.length > 0;\n <div class=\"flex gap-4 height-8 padding-x-4 mt-5 justify-center\">\n @for (snap of scrollSnaps(); let i = $index; track snap) {\n <button\n (click)=\"scrollTo(i)\"\n class=\"inline-flex items-center justify-center rounded-full border border-[0.1rem] border-(--carousel-dots-border-color) cursor-pointer hover:border-(carousel-dots-hover-border-color) transition-transform mx-w-6 max-h-6\"\n [class.scale-120]=\"i === selectedIndex()\"\n [class.border-gray-950]=\"i === selectedIndex()\"\n [class.py-1]=\"shouldDisplaySlideText\"\n [class.px-2]=\"shouldDisplaySlideText\"\n [class.size-4]=\"!shouldDisplaySlideText\"\n >\n @if (shouldDisplaySlideText) {\n {{ slideTexts[i]?.text() }}\n }\n </button>\n }\n </div>\n</div>\n", styles: [":host{width:100%;display:flex;align-items:center;justify-content:center;--slide-spacing: 1rem}button>.material-symbols-outlined{display:flex;align-items:center;justify-content:center;font-variation-settings:\"wght\" 300,\"FILL\" 0,\"GRAD\" 0,\"opsz\" 24;font-size:1.2rem}\n"] }); }
|
|
3713
|
+
}
|
|
3714
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CarouselComponent, decorators: [{
|
|
3715
|
+
type: Component,
|
|
3716
|
+
args: [{ selector: 'mad-carousel', imports: [], template: "<div class=\"h-fit min-w-fit\" [style.width]=\"width()\">\n <div class=\"flex flex-row items-center justify-center gap-4\">\n <button\n class=\"bg-(--carousel-button-background-color) cursor-pointer hover:border-[0.1rem] hover:border-(--carousel-button-border-color) w-7 h-7 rounded-full flex items-center justify-center disabled:opacity-50 disabled:hover:border-0 disabled:cursor-not-allowed\"\n [disabled]=\"prevBtnDisabled()\"\n (click)=\"scrollPrev()\"\n >\n <span class=\"material-symbols-outlined\">chevron_left</span>\n </button>\n\n <div class=\"flex-1 w-0 min-w-0 overflow-hidden\" #viewport>\n <div class=\"flex flex-row gap-4 w-full touch-pan-y touch-pinch-zoom\" [class]=\"containerLoopClass()\" #container>\n <ng-content></ng-content>\n </div>\n </div>\n\n <button\n class=\"bg-(--carousel-button-background-color) cursor-pointer hover:border-[0.1rem] hover:border-(--carousel-button-border-color) w-7 h-7 rounded-full flex items-center justify-center disabled:opacity-50 disabled:hover:border-0 disabled:cursor-not-allowed\"\n [disabled]=\"nextBtnDisabled()\"\n (click)=\"scrollNext()\"\n >\n <span class=\"material-symbols-outlined\">chevron_right</span>\n </button>\n </div>\n\n @let slideTexts = shortTexts();\n @let shouldDisplaySlideText = slideTexts.length > 0;\n <div class=\"flex gap-4 height-8 padding-x-4 mt-5 justify-center\">\n @for (snap of scrollSnaps(); let i = $index; track snap) {\n <button\n (click)=\"scrollTo(i)\"\n class=\"inline-flex items-center justify-center rounded-full border border-[0.1rem] border-(--carousel-dots-border-color) cursor-pointer hover:border-(carousel-dots-hover-border-color) transition-transform mx-w-6 max-h-6\"\n [class.scale-120]=\"i === selectedIndex()\"\n [class.border-gray-950]=\"i === selectedIndex()\"\n [class.py-1]=\"shouldDisplaySlideText\"\n [class.px-2]=\"shouldDisplaySlideText\"\n [class.size-4]=\"!shouldDisplaySlideText\"\n >\n @if (shouldDisplaySlideText) {\n {{ slideTexts[i]?.text() }}\n }\n </button>\n }\n </div>\n</div>\n", styles: [":host{width:100%;display:flex;align-items:center;justify-content:center;--slide-spacing: 1rem}button>.material-symbols-outlined{display:flex;align-items:center;justify-content:center;font-variation-settings:\"wght\" 300,\"FILL\" 0,\"GRAD\" 0,\"opsz\" 24;font-size:1.2rem}\n"] }]
|
|
3717
|
+
}], ctorParameters: () => [], propDecorators: { shortTexts: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselShortTextDirective), { isSignal: true }] }], slides: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselSlideDirective), { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], slideHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideHeight", required: false }] }], slideBorderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideBorderRadius", required: false }] }], useSlideBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "useSlideBorder", required: false }] }], viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], containerRef: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }] } });
|
|
3718
|
+
|
|
3678
3719
|
class SidebarComponent {
|
|
3679
3720
|
constructor() {
|
|
3680
3721
|
this.collapsed = false;
|
|
@@ -3948,7 +3989,7 @@ class ToolbarComponent {
|
|
|
3948
3989
|
return this.getToolbarActions().filter((value) => !!value.importantAction).length > 0;
|
|
3949
3990
|
}
|
|
3950
3991
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$a.BreakpointObserver }, { token: i2$6.Title }, { token: ToolbarService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3951
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ToolbarComponent, isStandalone: true, selector: "mad-toolbar", host: { classAttribute: "mad-toolbar" }, ngImport: i0, template: "<mat-toolbar class=\"content-toolbar\">\n @if (isRouterLink(getBackAction())) {\n <a data-cy=\"back-link-button\" [routerLink]=\"getBackAction().routerLink\" [queryParams]=\"getBackAction().queryParams\">\n <button [id]=\"'go-back'\" class=\"mat-primary go-back-button\" mat-icon-button>\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n }\n @if (isAbsoluteLink(getBackAction())) {\n <a data-cy=\"back-href-button\" [href]=\"getBackAction().href\">\n <button [id]=\"'go-back'\" class=\"go-back-button mat-primary\" mat-icon-button>\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n }\n @if (isAction(getBackAction())) {\n <a data-cy=\"back-action-button\" (click)=\"getBackAction().action()\">\n <button [id]=\"'go-back'\" class=\"mat-primary go-back-button\" mat-icon-button>\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n }\n\n <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n @for (mainAction of getMainActions(); track mainAction; let i = $index) {\n @if (hasPermission(mainAction) | async) {\n @if (!(isHandset$ | async)) {\n <div>\n @if (isRouterLink(mainAction)) {\n <a data-cy=\"main-action-link-button\" [routerLink]=\"mainAction.routerLink\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n <div class=\"action-button-content-container\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </div>\n </mad-primary-button>\n </a>\n }\n @if (isAction(mainAction)) {\n <a data-cy=\"main-action-button\" (click)=\"mainAction.action()\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n <div class=\"action-button-content-container\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </div>\n </mad-primary-button>\n </a>\n }\n </div>\n }\n @if (isHandset$ | async) {\n <div>\n @if (isRouterLink(getBackAction())) {\n <mad-material-action-button\n data-cy=\"material-main-link-button\"\n [actionName]=\"mainAction.actionName\"\n [icon]=\"mainAction.matIcon\"\n [liftHigher]=\"mainAction.liftHigherOnMobile\"\n [liftHigher2]=\"i > 0\"\n [routerLink]=\"mainAction.routerLink\"\n [id]=\"mainAction.matIcon\"\n />\n }\n @if (isAction(getBackAction())) {\n <mad-material-action-button\n data-cy=\"material-main-action-button\"\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 }\n </div>\n }\n }\n }\n\n <div class=\"right-aligned no-print\">\n @for (action of getToolbarActions(); track action; let i = $index) {\n @if (hasPermission(action) | async) {\n @if (\n (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n !!action.importantAction\n ) {\n <mad-icon-button\n data-cy=\"action-icon-button\"\n (click)=\"action.action()\"\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 }\n }\n }\n\n @if ((isHandset$ | async) || getToolbarActionsAlwaysAsMenu()) {\n @if (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 @for (action of getToolbarActions(); track action; let i = $index) {\n @if (!action.importantAction) {\n @if (hasPermission(action) | async) {\n @if (i >= (hasImportantToolbarActions() ? 0 : 1)) {\n <button data-cy=\"burger-menu-button\" mat-menu-item (click)=\"action.action()\" [title]=\"action.actionName\">\n <mat-icon\n class=\"mat-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 }\n }\n }\n }\n </mat-menu>\n }\n }\n </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:var(--toolbar-background)}.content-toolbar{height:57px;border-bottom:1px solid var(--mat-sys-outline-variant)}.right-aligned{overflow:visible;margin-left:auto;margin-right:0}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}.action-button-content-container{display:flex;align-items:center;gap:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button"
|
|
3992
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ToolbarComponent, isStandalone: true, selector: "mad-toolbar", host: { classAttribute: "mad-toolbar" }, ngImport: i0, template: "<mat-toolbar class=\"content-toolbar\">\n @if (isRouterLink(getBackAction())) {\n <a data-cy=\"back-link-button\" [routerLink]=\"getBackAction().routerLink\" [queryParams]=\"getBackAction().queryParams\">\n <button [id]=\"'go-back'\" class=\"mat-primary go-back-button\" mat-icon-button>\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n }\n @if (isAbsoluteLink(getBackAction())) {\n <a data-cy=\"back-href-button\" [href]=\"getBackAction().href\">\n <button [id]=\"'go-back'\" class=\"go-back-button mat-primary\" mat-icon-button>\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n }\n @if (isAction(getBackAction())) {\n <a data-cy=\"back-action-button\" (click)=\"getBackAction().action()\">\n <button [id]=\"'go-back'\" class=\"mat-primary go-back-button\" mat-icon-button>\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n }\n\n <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n @for (mainAction of getMainActions(); track mainAction; let i = $index) {\n @if (hasPermission(mainAction) | async) {\n @if (!(isHandset$ | async)) {\n <div>\n @if (isRouterLink(mainAction)) {\n <a data-cy=\"main-action-link-button\" [routerLink]=\"mainAction.routerLink\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n <div class=\"action-button-content-container\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </div>\n </mad-primary-button>\n </a>\n }\n @if (isAction(mainAction)) {\n <a data-cy=\"main-action-button\" (click)=\"mainAction.action()\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n <div class=\"action-button-content-container\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </div>\n </mad-primary-button>\n </a>\n }\n </div>\n }\n @if (isHandset$ | async) {\n <div>\n @if (isRouterLink(getBackAction())) {\n <mad-material-action-button\n data-cy=\"material-main-link-button\"\n [actionName]=\"mainAction.actionName\"\n [icon]=\"mainAction.matIcon\"\n [liftHigher]=\"mainAction.liftHigherOnMobile\"\n [liftHigher2]=\"i > 0\"\n [routerLink]=\"mainAction.routerLink\"\n [id]=\"mainAction.matIcon\"\n />\n }\n @if (isAction(getBackAction())) {\n <mad-material-action-button\n data-cy=\"material-main-action-button\"\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 }\n </div>\n }\n }\n }\n\n <div class=\"right-aligned no-print\">\n @for (action of getToolbarActions(); track action; let i = $index) {\n @if (hasPermission(action) | async) {\n @if (\n (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n !!action.importantAction\n ) {\n <mad-icon-button\n data-cy=\"action-icon-button\"\n (click)=\"action.action()\"\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 }\n }\n }\n\n @if ((isHandset$ | async) || getToolbarActionsAlwaysAsMenu()) {\n @if (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 @for (action of getToolbarActions(); track action; let i = $index) {\n @if (!action.importantAction) {\n @if (hasPermission(action) | async) {\n @if (i >= (hasImportantToolbarActions() ? 0 : 1)) {\n <button data-cy=\"burger-menu-button\" mat-menu-item (click)=\"action.action()\" [title]=\"action.actionName\">\n <mat-icon\n class=\"mat-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 }\n }\n }\n }\n </mat-menu>\n }\n }\n </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:var(--toolbar-background)}.content-toolbar{height:57px;border-bottom:1px solid var(--mat-sys-outline-variant)}.right-aligned{overflow:visible;margin-left:auto;margin-right:0}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}.action-button-content-container{display:flex;align-items:center;gap:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MaterialActionButtonComponent, selector: "mad-material-action-button", inputs: ["actionName", "id", "icon", "routerLink", "liftHigher", "liftHigher2"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button" }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.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: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
3952
3993
|
}
|
|
3953
3994
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
3954
3995
|
type: Component,
|
|
@@ -4016,7 +4057,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
4016
4057
|
|
|
4017
4058
|
class MaterialAddonsModule {
|
|
4018
4059
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MaterialAddonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4019
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: MaterialAddonsModule, exports: [ReadOnlyFormFieldModule,
|
|
4060
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: MaterialAddonsModule, imports: [CarouselComponent, CarouselShortTextDirective, CarouselSlideDirective], exports: [ReadOnlyFormFieldModule,
|
|
4020
4061
|
ButtonModule,
|
|
4021
4062
|
ToolbarModule,
|
|
4022
4063
|
MaterialActionButtonModule,
|
|
@@ -4024,7 +4065,10 @@ class MaterialAddonsModule {
|
|
|
4024
4065
|
CardModule,
|
|
4025
4066
|
QuickListModule,
|
|
4026
4067
|
ThrottleClickModule,
|
|
4027
|
-
SidebarModule
|
|
4068
|
+
SidebarModule,
|
|
4069
|
+
CarouselComponent,
|
|
4070
|
+
CarouselShortTextDirective,
|
|
4071
|
+
CarouselSlideDirective] }); }
|
|
4028
4072
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MaterialAddonsModule, imports: [ReadOnlyFormFieldModule,
|
|
4029
4073
|
ButtonModule,
|
|
4030
4074
|
ToolbarModule,
|
|
@@ -4038,6 +4082,7 @@ class MaterialAddonsModule {
|
|
|
4038
4082
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MaterialAddonsModule, decorators: [{
|
|
4039
4083
|
type: NgModule,
|
|
4040
4084
|
args: [{
|
|
4085
|
+
imports: [CarouselComponent, CarouselShortTextDirective, CarouselSlideDirective],
|
|
4041
4086
|
exports: [
|
|
4042
4087
|
ReadOnlyFormFieldModule,
|
|
4043
4088
|
ButtonModule,
|
|
@@ -4048,6 +4093,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
4048
4093
|
QuickListModule,
|
|
4049
4094
|
ThrottleClickModule,
|
|
4050
4095
|
SidebarModule,
|
|
4096
|
+
CarouselComponent,
|
|
4097
|
+
CarouselShortTextDirective,
|
|
4098
|
+
CarouselSlideDirective,
|
|
4051
4099
|
],
|
|
4052
4100
|
}]
|
|
4053
4101
|
}] });
|
|
@@ -4214,14 +4262,14 @@ class BreadcrumbComponent {
|
|
|
4214
4262
|
this.copy = output();
|
|
4215
4263
|
}
|
|
4216
4264
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4217
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: BreadcrumbComponent, isStandalone: true, selector: "mad-breadcrumb", inputs: { breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: true, transformFunction: null }, showCopy: { classPropertyName: "showCopy", publicName: "showCopy", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copy: "copy" }, ngImport: i0, template: "@if (breadcrumbs().length) {\n <div class=\"breadcrumb\">\n <nav data-cy=\"breadcrumb-nav\" class=\"breadcrumb__nav\">\n @for (crumb of breadcrumbs(); track crumb.label; let last = $last) {\n @if (crumb.route?.length) {\n <a data-cy=\"breadcrumb-link\" [routerLink]=\"crumb.route\" class=\"breadcrumb__link\">{{ crumb.label }}</a>\n } @else if (crumb.href?.length) {\n <a data-cy=\"breadcrumb-link\" [href]=\"crumb.href\" target=\"_blank\" class=\"breadcrumb__link\">{{ crumb.label }}</a>\n } @else {\n <span data-cy=\"breadcrumb-current\" class=\"breadcrumb__current\">{{ crumb.label }}</span>\n }\n @if (!last) {\n <span data-cy=\"breadcrumb-separator\" class=\"breadcrumb__separator\">/</span>\n }\n }\n </nav>\n @if (showCopy()) {\n <mad-icon-button\n data-cy=\"breadcrumb-copy\"\n class=\"breadcrumb__copy\"\n (click)=\"copy.emit()\"\n [matTooltip]=\"title()\"\n matTooltipPosition=\"above\"\n >\n <mat-icon>content_copy</mat-icon>\n </mad-icon-button>\n }\n </div>\n}\n", styles: [".breadcrumb{display:flex;align-items:center;gap:.5rem}.breadcrumb__nav{display:flex;align-items:center;gap:.625rem;min-height:3.5rem;padding-block:.25rem;font-size:.875rem;line-height:1.25rem}.breadcrumb__link{color:var(--main-primary);text-decoration:none}.breadcrumb__link:hover{text-decoration:underline}.breadcrumb__current,.breadcrumb__separator{color:var(--breadcrumb-separator-color)}.breadcrumb__copy{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button"
|
|
4265
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: BreadcrumbComponent, isStandalone: true, selector: "mad-breadcrumb", inputs: { breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: true, transformFunction: null }, showCopy: { classPropertyName: "showCopy", publicName: "showCopy", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copy: "copy" }, ngImport: i0, template: "@if (breadcrumbs().length) {\n <div class=\"breadcrumb\">\n <nav data-cy=\"breadcrumb-nav\" class=\"breadcrumb__nav\">\n @for (crumb of breadcrumbs(); track crumb.label; let last = $last) {\n @if (crumb.route?.length) {\n <a data-cy=\"breadcrumb-link\" [routerLink]=\"crumb.route\" class=\"breadcrumb__link\">{{ crumb.label }}</a>\n } @else if (crumb.href?.length) {\n <a data-cy=\"breadcrumb-link\" [href]=\"crumb.href\" target=\"_blank\" class=\"breadcrumb__link\">{{ crumb.label }}</a>\n } @else {\n <span data-cy=\"breadcrumb-current\" class=\"breadcrumb__current\">{{ crumb.label }}</span>\n }\n @if (!last) {\n <span data-cy=\"breadcrumb-separator\" class=\"breadcrumb__separator\">/</span>\n }\n }\n </nav>\n @if (showCopy()) {\n <mad-icon-button\n data-cy=\"breadcrumb-copy\"\n class=\"breadcrumb__copy\"\n (click)=\"copy.emit()\"\n [matTooltip]=\"title()\"\n matTooltipPosition=\"above\"\n >\n <mat-icon>content_copy</mat-icon>\n </mad-icon-button>\n }\n </div>\n}\n", styles: [".breadcrumb{display:flex;align-items:center;gap:.5rem}.breadcrumb__nav{display:flex;align-items:center;gap:.625rem;min-height:3.5rem;padding-block:.25rem;font-size:.875rem;line-height:1.25rem}.breadcrumb__link{color:var(--main-primary);text-decoration:none}.breadcrumb__link:hover{text-decoration:underline}.breadcrumb__current,.breadcrumb__separator{color:var(--breadcrumb-separator-color)}.breadcrumb__copy{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
4218
4266
|
}
|
|
4219
4267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
4220
4268
|
type: Component,
|
|
4221
4269
|
args: [{ selector: 'mad-breadcrumb', imports: [RouterLink, IconButtonComponent, MatIcon, MatTooltip], template: "@if (breadcrumbs().length) {\n <div class=\"breadcrumb\">\n <nav data-cy=\"breadcrumb-nav\" class=\"breadcrumb__nav\">\n @for (crumb of breadcrumbs(); track crumb.label; let last = $last) {\n @if (crumb.route?.length) {\n <a data-cy=\"breadcrumb-link\" [routerLink]=\"crumb.route\" class=\"breadcrumb__link\">{{ crumb.label }}</a>\n } @else if (crumb.href?.length) {\n <a data-cy=\"breadcrumb-link\" [href]=\"crumb.href\" target=\"_blank\" class=\"breadcrumb__link\">{{ crumb.label }}</a>\n } @else {\n <span data-cy=\"breadcrumb-current\" class=\"breadcrumb__current\">{{ crumb.label }}</span>\n }\n @if (!last) {\n <span data-cy=\"breadcrumb-separator\" class=\"breadcrumb__separator\">/</span>\n }\n }\n </nav>\n @if (showCopy()) {\n <mad-icon-button\n data-cy=\"breadcrumb-copy\"\n class=\"breadcrumb__copy\"\n (click)=\"copy.emit()\"\n [matTooltip]=\"title()\"\n matTooltipPosition=\"above\"\n >\n <mat-icon>content_copy</mat-icon>\n </mad-icon-button>\n }\n </div>\n}\n", styles: [".breadcrumb{display:flex;align-items:center;gap:.5rem}.breadcrumb__nav{display:flex;align-items:center;gap:.625rem;min-height:3.5rem;padding-block:.25rem;font-size:.875rem;line-height:1.25rem}.breadcrumb__link{color:var(--main-primary);text-decoration:none}.breadcrumb__link:hover{text-decoration:underline}.breadcrumb__current,.breadcrumb__separator{color:var(--breadcrumb-separator-color)}.breadcrumb__copy{flex-shrink:0}\n"] }]
|
|
4222
4270
|
}], propDecorators: { breadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbs", required: true }] }], showCopy: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCopy", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], copy: [{ type: i0.Output, args: ["copy"] }] } });
|
|
4223
4271
|
|
|
4224
|
-
const VERSION = '22.0.
|
|
4272
|
+
const VERSION = '22.0.10';
|
|
4225
4273
|
|
|
4226
4274
|
const MAD_ALERT_DEFAULT_CONFIGURATION = new InjectionToken('mad-alert-configuration', {
|
|
4227
4275
|
providedIn: 'root',
|
|
@@ -4277,5 +4325,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
4277
4325
|
* Generated bundle index. Do not edit.
|
|
4278
4326
|
*/
|
|
4279
4327
|
|
|
4280
|
-
export { AlertComponent, BaseQuickListComponent, BreadcrumbComponent, ButtonModule, CardComponent, CardModule, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelContainerSidebarComponent, ContentPanelModule, DangerButtonComponent, DataTableActionType, DataTableColumnsModalComponent, DataTableComponent, DataTablePersistenceService, DataTableTemplateCellDefinition, DataTableTemplateColumnDefinition, DataTableTemplateExpandableCellDefinition, DataTableTemplateExpandableColumnDefinition, FileUploadComponent, FlowbarComponent, FlowbarModule, IconButtonComponent, LinkButtonComponent, MAD_ALERT_DEFAULT_CONFIGURATION, MAD_ALERT_DEFAULT_CONFIGURATION_FACTORY, MAD_DATA_TABLE_GLOBAL_CONFIGURATION, MAD_DATA_TABLE_PERSISTENCE_SERVICE, MAD_READONLY_FORM_FIELD_DEFAULT_CONFIGURATION, 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, TileComponent, ToolbarComponent, ToolbarModule, ToolbarService, VERSION, madStepperAnimations };
|
|
4328
|
+
export { AlertComponent, BaseQuickListComponent, BreadcrumbComponent, ButtonModule, CardComponent, CardModule, CarouselComponent, CarouselShortTextDirective, CarouselSlideDirective, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelContainerSidebarComponent, ContentPanelModule, DangerButtonComponent, DataTableActionType, DataTableColumnsModalComponent, DataTableComponent, DataTablePersistenceService, DataTableTemplateCellDefinition, DataTableTemplateColumnDefinition, DataTableTemplateExpandableCellDefinition, DataTableTemplateExpandableColumnDefinition, FileUploadComponent, FlowbarComponent, FlowbarModule, IconButtonComponent, LinkButtonComponent, MAD_ALERT_DEFAULT_CONFIGURATION, MAD_ALERT_DEFAULT_CONFIGURATION_FACTORY, MAD_DATA_TABLE_GLOBAL_CONFIGURATION, MAD_DATA_TABLE_PERSISTENCE_SERVICE, MAD_READONLY_FORM_FIELD_DEFAULT_CONFIGURATION, 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, TileComponent, ToolbarComponent, ToolbarModule, ToolbarService, VERSION, madStepperAnimations };
|
|
4281
4329
|
//# sourceMappingURL=porscheinformatik-material-addons.mjs.map
|