@ng-forge/dynamic-forms-material 0.1.0 → 0.1.2
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.
|
@@ -40,41 +40,41 @@ const MATERIAL_CONFIG = new InjectionToken('MATERIAL_CONFIG');
|
|
|
40
40
|
|
|
41
41
|
class MatCheckboxFieldComponent {
|
|
42
42
|
materialConfig = inject(MATERIAL_CONFIG, { optional: true });
|
|
43
|
-
field = input.required(
|
|
44
|
-
key = input.required(
|
|
43
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
44
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
45
45
|
/**
|
|
46
46
|
* Host element reference for DOM queries.
|
|
47
47
|
* Used to find the internal checkbox input for accessibility workarounds.
|
|
48
48
|
*/
|
|
49
49
|
hostEl = inject((ElementRef));
|
|
50
50
|
// Properties
|
|
51
|
-
label = input(
|
|
52
|
-
placeholder = input(
|
|
53
|
-
className = input('',
|
|
54
|
-
tabIndex = input(
|
|
55
|
-
props = input(
|
|
56
|
-
validationMessages = input(
|
|
57
|
-
defaultValidationMessages = input(
|
|
58
|
-
effectiveDisableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false,
|
|
51
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
52
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
53
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
54
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
55
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
56
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
57
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
58
|
+
effectiveDisableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, ...(ngDevMode ? [{ debugName: "effectiveDisableRipple" }] : []));
|
|
59
59
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
60
60
|
showErrors = shouldShowErrors(this.field);
|
|
61
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
61
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
62
62
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
63
63
|
// Accessibility
|
|
64
64
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
65
65
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
66
|
-
hintId = computed(() => `${this.key()}-hint`,
|
|
66
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
67
67
|
/** Base ID for error elements, used for aria-describedby */
|
|
68
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
68
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
69
69
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
70
70
|
ariaInvalid = computed(() => {
|
|
71
71
|
const fieldState = this.field()();
|
|
72
72
|
return fieldState.invalid() && fieldState.touched();
|
|
73
|
-
},
|
|
73
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
74
74
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
75
75
|
ariaRequired = computed(() => {
|
|
76
76
|
return this.field()().required?.() === true ? true : null;
|
|
77
|
-
},
|
|
77
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
78
78
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
79
79
|
ariaDescribedBy = computed(() => {
|
|
80
80
|
const ids = [];
|
|
@@ -86,7 +86,7 @@ class MatCheckboxFieldComponent {
|
|
|
86
86
|
ids.push(`${this.errorId()}-${i}`);
|
|
87
87
|
});
|
|
88
88
|
return ids.join(' ');
|
|
89
|
-
},
|
|
89
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
90
90
|
/**
|
|
91
91
|
* Workaround: Angular Material's MatCheckbox does NOT set aria-required on its internal
|
|
92
92
|
* input element when [required] is passed, even though it sets the native required attribute.
|
|
@@ -106,10 +106,9 @@ class MatCheckboxFieldComponent {
|
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
108
|
});
|
|
109
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
110
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
109
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
110
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MatCheckboxFieldComponent, isStandalone: true, selector: "df-mat-checkbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
111
111
|
@let f = field();
|
|
112
|
-
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
113
112
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
114
113
|
|
|
115
114
|
<mat-checkbox
|
|
@@ -118,7 +117,7 @@ class MatCheckboxFieldComponent {
|
|
|
118
117
|
[indeterminate]="props()?.indeterminate || false"
|
|
119
118
|
[color]="props()?.color || 'primary'"
|
|
120
119
|
[disableRipple]="effectiveDisableRipple()"
|
|
121
|
-
[required]="!!f().required
|
|
120
|
+
[required]="!!f().required()"
|
|
122
121
|
[aria-describedby]="ariaDescribedBy"
|
|
123
122
|
[attr.tabindex]="tabIndex()"
|
|
124
123
|
[attr.hidden]="f().hidden() || null"
|
|
@@ -134,11 +133,10 @@ class MatCheckboxFieldComponent {
|
|
|
134
133
|
}
|
|
135
134
|
`, isInline: true, styles: [":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: 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: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
136
135
|
}
|
|
137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatCheckboxFieldComponent, decorators: [{
|
|
138
137
|
type: Component,
|
|
139
138
|
args: [{ selector: 'df-mat-checkbox', imports: [MatCheckbox, Field, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
140
139
|
@let f = field();
|
|
141
|
-
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
142
140
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
143
141
|
|
|
144
142
|
<mat-checkbox
|
|
@@ -147,7 +145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
147
145
|
[indeterminate]="props()?.indeterminate || false"
|
|
148
146
|
[color]="props()?.color || 'primary'"
|
|
149
147
|
[disableRipple]="effectiveDisableRipple()"
|
|
150
|
-
[required]="!!f().required
|
|
148
|
+
[required]="!!f().required()"
|
|
151
149
|
[aria-describedby]="ariaDescribedBy"
|
|
152
150
|
[attr.tabindex]="tabIndex()"
|
|
153
151
|
[attr.hidden]="f().hidden() || null"
|
|
@@ -176,39 +174,39 @@ var matCheckbox_component = /*#__PURE__*/Object.freeze({
|
|
|
176
174
|
|
|
177
175
|
class MatDatepickerFieldComponent {
|
|
178
176
|
materialConfig = inject(MATERIAL_CONFIG, { optional: true });
|
|
179
|
-
field = input.required(
|
|
180
|
-
key = input.required(
|
|
181
|
-
label = input(
|
|
182
|
-
placeholder = input(
|
|
183
|
-
className = input('',
|
|
184
|
-
tabIndex = input(
|
|
185
|
-
minDate = input(null,
|
|
186
|
-
maxDate = input(null,
|
|
187
|
-
startAt = input(null,
|
|
188
|
-
props = input(
|
|
189
|
-
validationMessages = input(
|
|
190
|
-
defaultValidationMessages = input(
|
|
191
|
-
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline',
|
|
192
|
-
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic',
|
|
177
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
178
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
179
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
180
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
181
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
182
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
183
|
+
minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
|
|
184
|
+
maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
|
|
185
|
+
startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : []));
|
|
186
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
187
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
188
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
189
|
+
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : []));
|
|
190
|
+
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : []));
|
|
193
191
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
194
192
|
showErrors = shouldShowErrors(this.field);
|
|
195
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
193
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
196
194
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
197
195
|
// Accessibility
|
|
198
196
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
199
197
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
200
|
-
hintId = computed(() => `${this.key()}-hint`,
|
|
198
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
201
199
|
/** Base ID for error elements, used for aria-describedby */
|
|
202
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
200
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
203
201
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
204
202
|
ariaInvalid = computed(() => {
|
|
205
203
|
const fieldState = this.field()();
|
|
206
204
|
return fieldState.invalid() && fieldState.touched();
|
|
207
|
-
},
|
|
205
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
208
206
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
209
207
|
ariaRequired = computed(() => {
|
|
210
208
|
return this.field()().required?.() === true ? true : null;
|
|
211
|
-
},
|
|
209
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
212
210
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
213
211
|
ariaDescribedBy = computed(() => {
|
|
214
212
|
const ids = [];
|
|
@@ -220,9 +218,9 @@ class MatDatepickerFieldComponent {
|
|
|
220
218
|
ids.push(`${this.errorId()}-${i}`);
|
|
221
219
|
});
|
|
222
220
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
223
|
-
},
|
|
224
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
225
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
221
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
222
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
223
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MatDatepickerFieldComponent, isStandalone: true, selector: "df-mat-datepicker", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, providers: [provideNativeDateAdapter()], ngImport: i0, template: `
|
|
226
224
|
@let f = field();
|
|
227
225
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
228
226
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -257,7 +255,7 @@ class MatDatepickerFieldComponent {
|
|
|
257
255
|
</mat-form-field>
|
|
258
256
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
259
257
|
}
|
|
260
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
258
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatDatepickerFieldComponent, decorators: [{
|
|
261
259
|
type: Component,
|
|
262
260
|
args: [{ selector: 'df-mat-datepicker', imports: [
|
|
263
261
|
MatFormField,
|
|
@@ -319,19 +317,19 @@ var matDatepicker_component = /*#__PURE__*/Object.freeze({
|
|
|
319
317
|
|
|
320
318
|
class MatInputFieldComponent {
|
|
321
319
|
materialConfig = inject(MATERIAL_CONFIG, { optional: true });
|
|
322
|
-
field = input.required(
|
|
323
|
-
key = input.required(
|
|
320
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
321
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
324
322
|
/**
|
|
325
323
|
* Reference to the native input element.
|
|
326
324
|
* Used to imperatively sync the readonly attribute since Angular Signal Forms'
|
|
327
325
|
* [field] directive doesn't sync FieldState.readonly() to the DOM.
|
|
328
326
|
*/
|
|
329
|
-
inputRef = viewChild('inputRef',
|
|
327
|
+
inputRef = viewChild('inputRef', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
|
|
330
328
|
/**
|
|
331
329
|
* Computed signal that extracts the readonly state from the field.
|
|
332
330
|
* Used by the effect to reactively sync the readonly attribute to the DOM.
|
|
333
331
|
*/
|
|
334
|
-
isReadonly = computed(() => this.field()().readonly(),
|
|
332
|
+
isReadonly = computed(() => this.field()().readonly(), ...(ngDevMode ? [{ debugName: "isReadonly" }] : []));
|
|
335
333
|
/**
|
|
336
334
|
* Workaround: Angular Signal Forms' [field] directive does NOT sync the readonly
|
|
337
335
|
* attribute to the DOM, even though FieldState.readonly() returns the correct value.
|
|
@@ -353,34 +351,34 @@ class MatInputFieldComponent {
|
|
|
353
351
|
}
|
|
354
352
|
}
|
|
355
353
|
});
|
|
356
|
-
label = input(
|
|
357
|
-
placeholder = input(
|
|
358
|
-
className = input('',
|
|
359
|
-
tabIndex = input(
|
|
360
|
-
props = input(
|
|
361
|
-
validationMessages = input(
|
|
362
|
-
defaultValidationMessages = input(
|
|
363
|
-
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline',
|
|
364
|
-
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic',
|
|
354
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
355
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
356
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
357
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
358
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
359
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
360
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
361
|
+
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : []));
|
|
362
|
+
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : []));
|
|
365
363
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
366
364
|
showErrors = shouldShowErrors(this.field);
|
|
367
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
365
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
368
366
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
369
367
|
// Accessibility
|
|
370
368
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
371
369
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
372
|
-
hintId = computed(() => `${this.key()}-hint`,
|
|
370
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
373
371
|
/** Base ID for error elements, used for aria-describedby */
|
|
374
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
372
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
375
373
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
376
374
|
ariaInvalid = computed(() => {
|
|
377
375
|
const fieldState = this.field()();
|
|
378
376
|
return fieldState.invalid() && fieldState.touched();
|
|
379
|
-
},
|
|
377
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
380
378
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
381
379
|
ariaRequired = computed(() => {
|
|
382
380
|
return this.field()().required?.() === true ? true : null;
|
|
383
|
-
},
|
|
381
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
384
382
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
385
383
|
ariaDescribedBy = computed(() => {
|
|
386
384
|
const ids = [];
|
|
@@ -392,9 +390,9 @@ class MatInputFieldComponent {
|
|
|
392
390
|
ids.push(`${this.errorId()}-${i}`);
|
|
393
391
|
});
|
|
394
392
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
395
|
-
},
|
|
396
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
397
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
393
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
394
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
395
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MatInputFieldComponent, isStandalone: true, selector: "df-mat-input", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
398
396
|
@let f = field();
|
|
399
397
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
400
398
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -492,7 +490,7 @@ class MatInputFieldComponent {
|
|
|
492
490
|
</mat-form-field>
|
|
493
491
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
494
492
|
}
|
|
495
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
493
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatInputFieldComponent, decorators: [{
|
|
496
494
|
type: Component,
|
|
497
495
|
args: [{ selector: 'df-mat-input', imports: [MatFormField, MatLabel, MatInput, MatHint, Field, MatError$1, DynamicTextPipe, AsyncPipe], template: `
|
|
498
496
|
@let f = field();
|
|
@@ -607,10 +605,10 @@ class ValueInArrayPipe {
|
|
|
607
605
|
transform(element, array) {
|
|
608
606
|
return array?.includes(element) ?? false;
|
|
609
607
|
}
|
|
610
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
611
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
608
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ValueInArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
609
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: ValueInArrayPipe, isStandalone: true, name: "inArray" });
|
|
612
610
|
}
|
|
613
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
611
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ValueInArrayPipe, decorators: [{
|
|
614
612
|
type: Pipe,
|
|
615
613
|
args: [{
|
|
616
614
|
pure: true,
|
|
@@ -647,14 +645,14 @@ function isEqual(a, b) {
|
|
|
647
645
|
}
|
|
648
646
|
|
|
649
647
|
class MatMultiCheckboxFieldComponent {
|
|
650
|
-
field = input.required(
|
|
651
|
-
key = input.required(
|
|
652
|
-
label = input(
|
|
653
|
-
placeholder = input(
|
|
654
|
-
className = input('',
|
|
655
|
-
tabIndex = input(
|
|
656
|
-
options = input([],
|
|
657
|
-
props = input(
|
|
648
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
649
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
650
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
651
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
652
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
653
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
654
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
655
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
658
656
|
valueViewModel = linkedSignal(() => {
|
|
659
657
|
const currentValues = this.field()().value();
|
|
660
658
|
return this.options().filter((option) => currentValues.includes(option.value));
|
|
@@ -685,27 +683,27 @@ class MatMultiCheckboxFieldComponent {
|
|
|
685
683
|
}
|
|
686
684
|
});
|
|
687
685
|
}
|
|
688
|
-
validationMessages = input(
|
|
689
|
-
defaultValidationMessages = input(
|
|
686
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
687
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
690
688
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
691
689
|
showErrors = shouldShowErrors(this.field);
|
|
692
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
690
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
693
691
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
694
692
|
// Accessibility
|
|
695
693
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
696
694
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
697
|
-
hintId = computed(() => `${this.key()}-hint`,
|
|
695
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
698
696
|
/** Base ID for error elements, used for aria-describedby */
|
|
699
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
697
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
700
698
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
701
699
|
ariaInvalid = computed(() => {
|
|
702
700
|
const fieldState = this.field()();
|
|
703
701
|
return fieldState.invalid() && fieldState.touched();
|
|
704
|
-
},
|
|
702
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
705
703
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
706
704
|
ariaRequired = computed(() => {
|
|
707
705
|
return this.field()().required?.() === true ? true : null;
|
|
708
|
-
},
|
|
706
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
709
707
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
710
708
|
ariaDescribedBy = computed(() => {
|
|
711
709
|
const ids = [];
|
|
@@ -717,9 +715,9 @@ class MatMultiCheckboxFieldComponent {
|
|
|
717
715
|
ids.push(`${this.errorId()}-${i}`);
|
|
718
716
|
});
|
|
719
717
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
720
|
-
},
|
|
721
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
722
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
718
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
719
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
720
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MatMultiCheckboxFieldComponent, isStandalone: true, selector: "df-mat-multi-checkbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className() || \"\"", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, providers: [ValueInArrayPipe], ngImport: i0, template: `
|
|
723
721
|
@let f = field();
|
|
724
722
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
725
723
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -756,7 +754,7 @@ class MatMultiCheckboxFieldComponent {
|
|
|
756
754
|
}
|
|
757
755
|
`, isInline: true, styles: [":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: 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: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: ValueInArrayPipe, name: "inArray" }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
758
756
|
}
|
|
759
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
757
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatMultiCheckboxFieldComponent, decorators: [{
|
|
760
758
|
type: Component,
|
|
761
759
|
args: [{ selector: 'df-mat-multi-checkbox', imports: [MatCheckbox, ValueInArrayPipe, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
762
760
|
@let f = field();
|
|
@@ -807,35 +805,35 @@ var matMultiCheckbox_component = /*#__PURE__*/Object.freeze({
|
|
|
807
805
|
});
|
|
808
806
|
|
|
809
807
|
class MatRadioFieldComponent {
|
|
810
|
-
field = input.required(
|
|
811
|
-
key = input.required(
|
|
812
|
-
label = input(
|
|
813
|
-
placeholder = input(
|
|
814
|
-
className = input('',
|
|
815
|
-
tabIndex = input(
|
|
816
|
-
options = input([],
|
|
817
|
-
props = input(
|
|
818
|
-
validationMessages = input(
|
|
819
|
-
defaultValidationMessages = input(
|
|
808
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
809
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
810
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
811
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
812
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
813
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
814
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
815
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
816
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
817
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
820
818
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
821
819
|
showErrors = shouldShowErrors(this.field);
|
|
822
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
820
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
823
821
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
824
822
|
// Accessibility
|
|
825
823
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
826
824
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
827
|
-
hintId = computed(() => `${this.key()}-hint`,
|
|
825
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
828
826
|
/** Base ID for error elements, used for aria-describedby */
|
|
829
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
827
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
830
828
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
831
829
|
ariaInvalid = computed(() => {
|
|
832
830
|
const fieldState = this.field()();
|
|
833
831
|
return fieldState.invalid() && fieldState.touched();
|
|
834
|
-
},
|
|
832
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
835
833
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
836
834
|
ariaRequired = computed(() => {
|
|
837
835
|
return this.field()().required?.() === true ? true : null;
|
|
838
|
-
},
|
|
836
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
839
837
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
840
838
|
ariaDescribedBy = computed(() => {
|
|
841
839
|
const ids = [];
|
|
@@ -847,9 +845,9 @@ class MatRadioFieldComponent {
|
|
|
847
845
|
ids.push(`${this.errorId()}-${i}`);
|
|
848
846
|
});
|
|
849
847
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
850
|
-
},
|
|
851
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
852
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
848
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
849
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
850
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MatRadioFieldComponent, isStandalone: true, selector: "df-mat-radio", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className() || \"\"", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
853
851
|
@let f = field();
|
|
854
852
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
855
853
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -884,7 +882,7 @@ class MatRadioFieldComponent {
|
|
|
884
882
|
}
|
|
885
883
|
`, isInline: true, styles: [":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: 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: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
886
884
|
}
|
|
887
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
885
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatRadioFieldComponent, decorators: [{
|
|
888
886
|
type: Component,
|
|
889
887
|
args: [{ selector: 'df-mat-radio', imports: [MatRadioGroup, MatRadioButton, Field, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
890
888
|
@let f = field();
|
|
@@ -934,38 +932,38 @@ var matRadio_component = /*#__PURE__*/Object.freeze({
|
|
|
934
932
|
|
|
935
933
|
class MatSelectFieldComponent {
|
|
936
934
|
materialConfig = inject(MATERIAL_CONFIG, { optional: true });
|
|
937
|
-
field = input.required(
|
|
938
|
-
key = input.required(
|
|
939
|
-
label = input(
|
|
940
|
-
placeholder = input(
|
|
941
|
-
className = input('',
|
|
942
|
-
tabIndex = input(
|
|
943
|
-
options = input([],
|
|
944
|
-
props = input(
|
|
945
|
-
validationMessages = input(
|
|
946
|
-
defaultValidationMessages = input(
|
|
947
|
-
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline',
|
|
948
|
-
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic',
|
|
935
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
936
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
937
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
938
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
939
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
940
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
941
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
942
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
943
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
944
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
945
|
+
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : []));
|
|
946
|
+
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : []));
|
|
949
947
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
950
948
|
showErrors = shouldShowErrors(this.field);
|
|
951
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
949
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
952
950
|
defaultCompare = Object.is;
|
|
953
951
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
954
952
|
// Accessibility
|
|
955
953
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
956
954
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
957
|
-
hintId = computed(() => `${this.key()}-hint`,
|
|
955
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
958
956
|
/** Base ID for error elements, used for aria-describedby */
|
|
959
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
957
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
960
958
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
961
959
|
ariaInvalid = computed(() => {
|
|
962
960
|
const fieldState = this.field()();
|
|
963
961
|
return fieldState.invalid() && fieldState.touched();
|
|
964
|
-
},
|
|
962
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
965
963
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
966
964
|
ariaRequired = computed(() => {
|
|
967
965
|
return this.field()().required?.() === true ? true : null;
|
|
968
|
-
},
|
|
966
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
969
967
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
970
968
|
ariaDescribedBy = computed(() => {
|
|
971
969
|
const ids = [];
|
|
@@ -977,9 +975,9 @@ class MatSelectFieldComponent {
|
|
|
977
975
|
ids.push(`${this.errorId()}-${i}`);
|
|
978
976
|
});
|
|
979
977
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
980
|
-
},
|
|
981
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
982
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
978
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
979
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
980
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MatSelectFieldComponent, isStandalone: true, selector: "df-mat-select", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
983
981
|
@let f = field();
|
|
984
982
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
985
983
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1014,7 +1012,7 @@ class MatSelectFieldComponent {
|
|
|
1014
1012
|
</mat-form-field>
|
|
1015
1013
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1016
1014
|
}
|
|
1017
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1015
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatSelectFieldComponent, decorators: [{
|
|
1018
1016
|
type: Component,
|
|
1019
1017
|
args: [{ selector: 'df-mat-select', imports: [MatFormField, MatLabel, MatSelect, MatOption, MatHint, Field, MatError$1, DynamicTextPipe, AsyncPipe], template: `
|
|
1020
1018
|
@let f = field();
|
|
@@ -1063,30 +1061,30 @@ var matSelect_component = /*#__PURE__*/Object.freeze({
|
|
|
1063
1061
|
});
|
|
1064
1062
|
|
|
1065
1063
|
class MatSliderFieldComponent {
|
|
1066
|
-
field = input.required(
|
|
1067
|
-
key = input.required(
|
|
1068
|
-
label = input(
|
|
1069
|
-
placeholder = input(
|
|
1070
|
-
className = input('',
|
|
1071
|
-
tabIndex = input(
|
|
1072
|
-
props = input(
|
|
1073
|
-
validationMessages = input(
|
|
1074
|
-
defaultValidationMessages = input(
|
|
1064
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1065
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1066
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1067
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1068
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1069
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1070
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1071
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1072
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1075
1073
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1076
1074
|
showErrors = shouldShowErrors(this.field);
|
|
1077
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
1075
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1078
1076
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1079
1077
|
// Accessibility
|
|
1080
1078
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1081
1079
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
1082
|
-
hintId = computed(() => `${this.key()}-hint`,
|
|
1080
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1083
1081
|
/** Base ID for error elements, used for aria-describedby */
|
|
1084
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
1082
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1085
1083
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
1086
1084
|
ariaInvalid = computed(() => {
|
|
1087
1085
|
const fieldState = this.field()();
|
|
1088
1086
|
return fieldState.invalid() && fieldState.touched();
|
|
1089
|
-
},
|
|
1087
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1090
1088
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
1091
1089
|
ariaDescribedBy = computed(() => {
|
|
1092
1090
|
const ids = [];
|
|
@@ -1098,9 +1096,9 @@ class MatSliderFieldComponent {
|
|
|
1098
1096
|
ids.push(`${this.errorId()}-${i}`);
|
|
1099
1097
|
});
|
|
1100
1098
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
1101
|
-
},
|
|
1102
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1103
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1099
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1100
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1101
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MatSliderFieldComponent, isStandalone: true, selector: "df-mat-slider", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1104
1102
|
@let f = field();
|
|
1105
1103
|
@let ariaInvalid = this.ariaInvalid();
|
|
1106
1104
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1135,7 +1133,7 @@ class MatSliderFieldComponent {
|
|
|
1135
1133
|
}
|
|
1136
1134
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.slider-container{width:100%}\n"], dependencies: [{ kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1137
1135
|
}
|
|
1138
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatSliderFieldComponent, decorators: [{
|
|
1139
1137
|
type: Component,
|
|
1140
1138
|
args: [{ selector: 'df-mat-slider', imports: [MatSlider, MatSliderThumb, MatError, DynamicTextPipe, AsyncPipe, Field], template: `
|
|
1141
1139
|
@let f = field();
|
|
@@ -1186,20 +1184,20 @@ var matSlider_component = /*#__PURE__*/Object.freeze({
|
|
|
1186
1184
|
class MatButtonFieldComponent {
|
|
1187
1185
|
eventBus = inject(EventBus);
|
|
1188
1186
|
arrayContext = inject(ARRAY_CONTEXT, { optional: true });
|
|
1189
|
-
key = input.required(
|
|
1190
|
-
label = input.required(
|
|
1191
|
-
disabled = input(false,
|
|
1192
|
-
hidden = input(false,
|
|
1193
|
-
tabIndex = input(
|
|
1194
|
-
className = input('',
|
|
1187
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1188
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
1189
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1190
|
+
hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
|
|
1191
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1192
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1195
1193
|
/** Event to dispatch on click. Optional for submit buttons (native form submit handles it). */
|
|
1196
|
-
event = input(
|
|
1197
|
-
eventArgs = input(
|
|
1198
|
-
props = input(
|
|
1199
|
-
eventContext = input(
|
|
1194
|
+
event = input(...(ngDevMode ? [undefined, { debugName: "event" }] : []));
|
|
1195
|
+
eventArgs = input(...(ngDevMode ? [undefined, { debugName: "eventArgs" }] : []));
|
|
1196
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1197
|
+
eventContext = input(...(ngDevMode ? [undefined, { debugName: "eventContext" }] : []));
|
|
1200
1198
|
/** Resolved button type - defaults to 'button' if not specified in props */
|
|
1201
|
-
buttonType = computed(() => this.props()?.type ?? 'button',
|
|
1202
|
-
buttonTestId = computed(() => `${this.buttonType()}-${this.key()}`,
|
|
1199
|
+
buttonType = computed(() => this.props()?.type ?? 'button', ...(ngDevMode ? [{ debugName: "buttonType" }] : []));
|
|
1200
|
+
buttonTestId = computed(() => `${this.buttonType()}-${this.key()}`, ...(ngDevMode ? [{ debugName: "buttonTestId" }] : []));
|
|
1203
1201
|
/**
|
|
1204
1202
|
* Handle button click.
|
|
1205
1203
|
* - For submit buttons (type="submit"): do nothing, native form submit handles it
|
|
@@ -1239,8 +1237,8 @@ class MatButtonFieldComponent {
|
|
|
1239
1237
|
this.eventBus.dispatch(event);
|
|
1240
1238
|
}
|
|
1241
1239
|
}
|
|
1242
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1243
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.
|
|
1240
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1241
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.5", type: MatButtonFieldComponent, isStandalone: true, selector: "df-mat-button", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, event: { classPropertyName: "event", publicName: "event", isSignal: true, isRequired: false, transformFunction: null }, eventArgs: { classPropertyName: "eventArgs", publicName: "eventArgs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, eventContext: { classPropertyName: "eventContext", publicName: "eventContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()" } }, ngImport: i0, template: `
|
|
1244
1242
|
<button
|
|
1245
1243
|
mat-raised-button
|
|
1246
1244
|
[type]="buttonType()"
|
|
@@ -1253,7 +1251,7 @@ class MatButtonFieldComponent {
|
|
|
1253
1251
|
</button>
|
|
1254
1252
|
`, isInline: true, styles: [":host{display:block}button{min-width:fit-content}\n"], dependencies: [{ kind: "component", type: 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"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1255
1253
|
}
|
|
1256
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1254
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatButtonFieldComponent, decorators: [{
|
|
1257
1255
|
type: Component,
|
|
1258
1256
|
args: [{ selector: 'df-mat-button', imports: [MatButton, DynamicTextPipe, AsyncPipe], host: {
|
|
1259
1257
|
'[id]': '`${key()}`',
|
|
@@ -1282,19 +1280,19 @@ var matButton_component = /*#__PURE__*/Object.freeze({
|
|
|
1282
1280
|
|
|
1283
1281
|
class MatTextareaFieldComponent {
|
|
1284
1282
|
materialConfig = inject(MATERIAL_CONFIG, { optional: true });
|
|
1285
|
-
field = input.required(
|
|
1286
|
-
key = input.required(
|
|
1283
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1284
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1287
1285
|
/**
|
|
1288
1286
|
* Reference to the native textarea element.
|
|
1289
1287
|
* Used to imperatively sync the readonly attribute since Angular Signal Forms'
|
|
1290
1288
|
* [field] directive doesn't sync FieldState.readonly() to the DOM.
|
|
1291
1289
|
*/
|
|
1292
|
-
textareaRef = viewChild('textareaRef',
|
|
1290
|
+
textareaRef = viewChild('textareaRef', ...(ngDevMode ? [{ debugName: "textareaRef" }] : []));
|
|
1293
1291
|
/**
|
|
1294
1292
|
* Computed signal that extracts the readonly state from the field.
|
|
1295
1293
|
* Used by the effect to reactively sync the readonly attribute to the DOM.
|
|
1296
1294
|
*/
|
|
1297
|
-
isReadonly = computed(() => this.field()().readonly(),
|
|
1295
|
+
isReadonly = computed(() => this.field()().readonly(), ...(ngDevMode ? [{ debugName: "isReadonly" }] : []));
|
|
1298
1296
|
/**
|
|
1299
1297
|
* Workaround: Angular Signal Forms' [field] directive does NOT sync the readonly
|
|
1300
1298
|
* attribute to the DOM, even though FieldState.readonly() returns the correct value.
|
|
@@ -1316,34 +1314,34 @@ class MatTextareaFieldComponent {
|
|
|
1316
1314
|
}
|
|
1317
1315
|
}
|
|
1318
1316
|
});
|
|
1319
|
-
label = input(
|
|
1320
|
-
placeholder = input(
|
|
1321
|
-
className = input('',
|
|
1322
|
-
tabIndex = input(
|
|
1323
|
-
props = input(
|
|
1324
|
-
validationMessages = input(
|
|
1325
|
-
defaultValidationMessages = input(
|
|
1326
|
-
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline',
|
|
1327
|
-
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic',
|
|
1317
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1318
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1319
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1320
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1321
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1322
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1323
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1324
|
+
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : []));
|
|
1325
|
+
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : []));
|
|
1328
1326
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1329
1327
|
showErrors = shouldShowErrors(this.field);
|
|
1330
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
1328
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1331
1329
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1332
1330
|
// Accessibility
|
|
1333
1331
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1334
1332
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
1335
|
-
hintId = computed(() => `${this.key()}-hint`,
|
|
1333
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1336
1334
|
/** Base ID for error elements, used for aria-describedby */
|
|
1337
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
1335
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1338
1336
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
1339
1337
|
ariaInvalid = computed(() => {
|
|
1340
1338
|
const fieldState = this.field()();
|
|
1341
1339
|
return fieldState.invalid() && fieldState.touched();
|
|
1342
|
-
},
|
|
1340
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1343
1341
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
1344
1342
|
ariaRequired = computed(() => {
|
|
1345
1343
|
return this.field()().required?.() === true ? true : null;
|
|
1346
|
-
},
|
|
1344
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1347
1345
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
1348
1346
|
ariaDescribedBy = computed(() => {
|
|
1349
1347
|
const ids = [];
|
|
@@ -1355,9 +1353,9 @@ class MatTextareaFieldComponent {
|
|
|
1355
1353
|
ids.push(`${this.errorId()}-${i}`);
|
|
1356
1354
|
});
|
|
1357
1355
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
1358
|
-
},
|
|
1359
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1360
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1356
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1357
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1358
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MatTextareaFieldComponent, isStandalone: true, selector: "df-mat-textarea", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textareaRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
1361
1359
|
@let f = field();
|
|
1362
1360
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1363
1361
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1390,7 +1388,7 @@ class MatTextareaFieldComponent {
|
|
|
1390
1388
|
</mat-form-field>
|
|
1391
1389
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1392
1390
|
}
|
|
1393
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1391
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatTextareaFieldComponent, decorators: [{
|
|
1394
1392
|
type: Component,
|
|
1395
1393
|
args: [{ selector: 'df-mat-textarea', imports: [MatFormField, MatLabel, MatInput, MatHint, Field, MatError$1, DynamicTextPipe, AsyncPipe], template: `
|
|
1396
1394
|
@let f = field();
|
|
@@ -1438,35 +1436,35 @@ var matTextarea_component = /*#__PURE__*/Object.freeze({
|
|
|
1438
1436
|
|
|
1439
1437
|
class MatToggleFieldComponent {
|
|
1440
1438
|
materialConfig = inject(MATERIAL_CONFIG, { optional: true });
|
|
1441
|
-
field = input.required(
|
|
1442
|
-
key = input.required(
|
|
1443
|
-
label = input(
|
|
1444
|
-
placeholder = input(
|
|
1445
|
-
className = input('',
|
|
1446
|
-
tabIndex = input(
|
|
1447
|
-
props = input(
|
|
1448
|
-
validationMessages = input(
|
|
1449
|
-
defaultValidationMessages = input(
|
|
1450
|
-
effectiveDisableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false,
|
|
1439
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1440
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1441
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1442
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1443
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1444
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1445
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1446
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1447
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1448
|
+
effectiveDisableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, ...(ngDevMode ? [{ debugName: "effectiveDisableRipple" }] : []));
|
|
1451
1449
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1452
1450
|
showErrors = shouldShowErrors(this.field);
|
|
1453
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
1451
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1454
1452
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1455
1453
|
// Accessibility
|
|
1456
1454
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1457
1455
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
1458
|
-
hintId = computed(() => `${this.key()}-hint`,
|
|
1456
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1459
1457
|
/** Base ID for error elements, used for aria-describedby */
|
|
1460
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
1458
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1461
1459
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
1462
1460
|
ariaInvalid = computed(() => {
|
|
1463
1461
|
const fieldState = this.field()();
|
|
1464
1462
|
return fieldState.invalid() && fieldState.touched();
|
|
1465
|
-
},
|
|
1463
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1466
1464
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
1467
1465
|
ariaRequired = computed(() => {
|
|
1468
1466
|
return this.field()().required?.() === true ? true : null;
|
|
1469
|
-
},
|
|
1467
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1470
1468
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
1471
1469
|
ariaDescribedBy = computed(() => {
|
|
1472
1470
|
const ids = [];
|
|
@@ -1478,11 +1476,10 @@ class MatToggleFieldComponent {
|
|
|
1478
1476
|
ids.push(`${this.errorId()}-${i}`);
|
|
1479
1477
|
});
|
|
1480
1478
|
return ids.join(' ');
|
|
1481
|
-
},
|
|
1482
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1483
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1479
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1480
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1481
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MatToggleFieldComponent, isStandalone: true, selector: "df-mat-toggle", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: `
|
|
1484
1482
|
@let f = field();
|
|
1485
|
-
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1486
1483
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
1487
1484
|
|
|
1488
1485
|
<mat-slide-toggle
|
|
@@ -1491,7 +1488,7 @@ class MatToggleFieldComponent {
|
|
|
1491
1488
|
[labelPosition]="props()?.labelPosition || 'after'"
|
|
1492
1489
|
[hideIcon]="props()?.hideIcon || false"
|
|
1493
1490
|
[disableRipple]="effectiveDisableRipple()"
|
|
1494
|
-
[required]="!!f().required
|
|
1491
|
+
[required]="!!f().required()"
|
|
1495
1492
|
[aria-describedby]="ariaDescribedBy"
|
|
1496
1493
|
[attr.tabindex]="tabIndex()"
|
|
1497
1494
|
class="toggle-container"
|
|
@@ -1507,11 +1504,10 @@ class MatToggleFieldComponent {
|
|
|
1507
1504
|
}
|
|
1508
1505
|
`, isInline: true, styles: [":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1509
1506
|
}
|
|
1510
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1507
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatToggleFieldComponent, decorators: [{
|
|
1511
1508
|
type: Component,
|
|
1512
1509
|
args: [{ selector: 'df-mat-toggle', imports: [MatSlideToggle, Field, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
1513
1510
|
@let f = field();
|
|
1514
|
-
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1515
1511
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
1516
1512
|
|
|
1517
1513
|
<mat-slide-toggle
|
|
@@ -1520,7 +1516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
1520
1516
|
[labelPosition]="props()?.labelPosition || 'after'"
|
|
1521
1517
|
[hideIcon]="props()?.hideIcon || false"
|
|
1522
1518
|
[disableRipple]="effectiveDisableRipple()"
|
|
1523
|
-
[required]="!!f().required
|
|
1519
|
+
[required]="!!f().required()"
|
|
1524
1520
|
[aria-describedby]="ariaDescribedBy"
|
|
1525
1521
|
[attr.tabindex]="tabIndex()"
|
|
1526
1522
|
class="toggle-container"
|