@ng-forge/dynamic-forms-material 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -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,8 +106,8 @@ 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
112
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
113
113
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -134,7 +134,7 @@ class MatCheckboxFieldComponent {
|
|
|
134
134
|
}
|
|
135
135
|
`, 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
136
|
}
|
|
137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
137
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatCheckboxFieldComponent, decorators: [{
|
|
138
138
|
type: Component,
|
|
139
139
|
args: [{ selector: 'df-mat-checkbox', imports: [MatCheckbox, Field, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
140
140
|
@let f = field();
|
|
@@ -176,39 +176,39 @@ var matCheckbox_component = /*#__PURE__*/Object.freeze({
|
|
|
176
176
|
|
|
177
177
|
class MatDatepickerFieldComponent {
|
|
178
178
|
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',
|
|
179
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
180
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
181
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
182
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
183
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
184
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
185
|
+
minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
|
|
186
|
+
maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
|
|
187
|
+
startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : []));
|
|
188
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
189
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
190
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
191
|
+
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : []));
|
|
192
|
+
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : []));
|
|
193
193
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
194
194
|
showErrors = shouldShowErrors(this.field);
|
|
195
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
195
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
196
196
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
197
197
|
// Accessibility
|
|
198
198
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
199
199
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
200
|
-
hintId = computed(() => `${this.key()}-hint`,
|
|
200
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
201
201
|
/** Base ID for error elements, used for aria-describedby */
|
|
202
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
202
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
203
203
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
204
204
|
ariaInvalid = computed(() => {
|
|
205
205
|
const fieldState = this.field()();
|
|
206
206
|
return fieldState.invalid() && fieldState.touched();
|
|
207
|
-
},
|
|
207
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
208
208
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
209
209
|
ariaRequired = computed(() => {
|
|
210
210
|
return this.field()().required?.() === true ? true : null;
|
|
211
|
-
},
|
|
211
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
212
212
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
213
213
|
ariaDescribedBy = computed(() => {
|
|
214
214
|
const ids = [];
|
|
@@ -220,9 +220,9 @@ class MatDatepickerFieldComponent {
|
|
|
220
220
|
ids.push(`${this.errorId()}-${i}`);
|
|
221
221
|
});
|
|
222
222
|
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.
|
|
223
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
224
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
225
|
+
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
226
|
@let f = field();
|
|
227
227
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
228
228
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -257,7 +257,7 @@ class MatDatepickerFieldComponent {
|
|
|
257
257
|
</mat-form-field>
|
|
258
258
|
`, 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
259
|
}
|
|
260
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
260
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatDatepickerFieldComponent, decorators: [{
|
|
261
261
|
type: Component,
|
|
262
262
|
args: [{ selector: 'df-mat-datepicker', imports: [
|
|
263
263
|
MatFormField,
|
|
@@ -319,19 +319,19 @@ var matDatepicker_component = /*#__PURE__*/Object.freeze({
|
|
|
319
319
|
|
|
320
320
|
class MatInputFieldComponent {
|
|
321
321
|
materialConfig = inject(MATERIAL_CONFIG, { optional: true });
|
|
322
|
-
field = input.required(
|
|
323
|
-
key = input.required(
|
|
322
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
323
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
324
324
|
/**
|
|
325
325
|
* Reference to the native input element.
|
|
326
326
|
* Used to imperatively sync the readonly attribute since Angular Signal Forms'
|
|
327
327
|
* [field] directive doesn't sync FieldState.readonly() to the DOM.
|
|
328
328
|
*/
|
|
329
|
-
inputRef = viewChild('inputRef',
|
|
329
|
+
inputRef = viewChild('inputRef', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
|
|
330
330
|
/**
|
|
331
331
|
* Computed signal that extracts the readonly state from the field.
|
|
332
332
|
* Used by the effect to reactively sync the readonly attribute to the DOM.
|
|
333
333
|
*/
|
|
334
|
-
isReadonly = computed(() => this.field()().readonly(),
|
|
334
|
+
isReadonly = computed(() => this.field()().readonly(), ...(ngDevMode ? [{ debugName: "isReadonly" }] : []));
|
|
335
335
|
/**
|
|
336
336
|
* Workaround: Angular Signal Forms' [field] directive does NOT sync the readonly
|
|
337
337
|
* attribute to the DOM, even though FieldState.readonly() returns the correct value.
|
|
@@ -353,34 +353,34 @@ class MatInputFieldComponent {
|
|
|
353
353
|
}
|
|
354
354
|
}
|
|
355
355
|
});
|
|
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',
|
|
356
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
357
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
358
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
359
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
360
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
361
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
362
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
363
|
+
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : []));
|
|
364
|
+
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : []));
|
|
365
365
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
366
366
|
showErrors = shouldShowErrors(this.field);
|
|
367
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
367
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
368
368
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
369
369
|
// Accessibility
|
|
370
370
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
371
371
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
372
|
-
hintId = computed(() => `${this.key()}-hint`,
|
|
372
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
373
373
|
/** Base ID for error elements, used for aria-describedby */
|
|
374
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
374
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
375
375
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
376
376
|
ariaInvalid = computed(() => {
|
|
377
377
|
const fieldState = this.field()();
|
|
378
378
|
return fieldState.invalid() && fieldState.touched();
|
|
379
|
-
},
|
|
379
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
380
380
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
381
381
|
ariaRequired = computed(() => {
|
|
382
382
|
return this.field()().required?.() === true ? true : null;
|
|
383
|
-
},
|
|
383
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
384
384
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
385
385
|
ariaDescribedBy = computed(() => {
|
|
386
386
|
const ids = [];
|
|
@@ -392,9 +392,9 @@ class MatInputFieldComponent {
|
|
|
392
392
|
ids.push(`${this.errorId()}-${i}`);
|
|
393
393
|
});
|
|
394
394
|
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.
|
|
395
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
396
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
397
|
+
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
398
|
@let f = field();
|
|
399
399
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
400
400
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -492,7 +492,7 @@ class MatInputFieldComponent {
|
|
|
492
492
|
</mat-form-field>
|
|
493
493
|
`, 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
494
|
}
|
|
495
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
495
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatInputFieldComponent, decorators: [{
|
|
496
496
|
type: Component,
|
|
497
497
|
args: [{ selector: 'df-mat-input', imports: [MatFormField, MatLabel, MatInput, MatHint, Field, MatError$1, DynamicTextPipe, AsyncPipe], template: `
|
|
498
498
|
@let f = field();
|
|
@@ -607,10 +607,10 @@ class ValueInArrayPipe {
|
|
|
607
607
|
transform(element, array) {
|
|
608
608
|
return array?.includes(element) ?? false;
|
|
609
609
|
}
|
|
610
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
611
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
610
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ValueInArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
611
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: ValueInArrayPipe, isStandalone: true, name: "inArray" });
|
|
612
612
|
}
|
|
613
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
613
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ValueInArrayPipe, decorators: [{
|
|
614
614
|
type: Pipe,
|
|
615
615
|
args: [{
|
|
616
616
|
pure: true,
|
|
@@ -647,14 +647,14 @@ function isEqual(a, b) {
|
|
|
647
647
|
}
|
|
648
648
|
|
|
649
649
|
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(
|
|
650
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
651
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
652
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
653
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
654
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
655
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
656
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
657
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
658
658
|
valueViewModel = linkedSignal(() => {
|
|
659
659
|
const currentValues = this.field()().value();
|
|
660
660
|
return this.options().filter((option) => currentValues.includes(option.value));
|
|
@@ -685,27 +685,27 @@ class MatMultiCheckboxFieldComponent {
|
|
|
685
685
|
}
|
|
686
686
|
});
|
|
687
687
|
}
|
|
688
|
-
validationMessages = input(
|
|
689
|
-
defaultValidationMessages = input(
|
|
688
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
689
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
690
690
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
691
691
|
showErrors = shouldShowErrors(this.field);
|
|
692
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
692
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
693
693
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
694
694
|
// Accessibility
|
|
695
695
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
696
696
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
697
|
-
hintId = computed(() => `${this.key()}-hint`,
|
|
697
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
698
698
|
/** Base ID for error elements, used for aria-describedby */
|
|
699
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
699
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
700
700
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
701
701
|
ariaInvalid = computed(() => {
|
|
702
702
|
const fieldState = this.field()();
|
|
703
703
|
return fieldState.invalid() && fieldState.touched();
|
|
704
|
-
},
|
|
704
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
705
705
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
706
706
|
ariaRequired = computed(() => {
|
|
707
707
|
return this.field()().required?.() === true ? true : null;
|
|
708
|
-
},
|
|
708
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
709
709
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
710
710
|
ariaDescribedBy = computed(() => {
|
|
711
711
|
const ids = [];
|
|
@@ -717,9 +717,9 @@ class MatMultiCheckboxFieldComponent {
|
|
|
717
717
|
ids.push(`${this.errorId()}-${i}`);
|
|
718
718
|
});
|
|
719
719
|
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.
|
|
720
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
721
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
722
|
+
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
723
|
@let f = field();
|
|
724
724
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
725
725
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -756,7 +756,7 @@ class MatMultiCheckboxFieldComponent {
|
|
|
756
756
|
}
|
|
757
757
|
`, 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
758
|
}
|
|
759
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
759
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatMultiCheckboxFieldComponent, decorators: [{
|
|
760
760
|
type: Component,
|
|
761
761
|
args: [{ selector: 'df-mat-multi-checkbox', imports: [MatCheckbox, ValueInArrayPipe, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
762
762
|
@let f = field();
|
|
@@ -807,35 +807,35 @@ var matMultiCheckbox_component = /*#__PURE__*/Object.freeze({
|
|
|
807
807
|
});
|
|
808
808
|
|
|
809
809
|
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(
|
|
810
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
811
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
812
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
813
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
814
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
815
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
816
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
817
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
818
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
819
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
820
820
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
821
821
|
showErrors = shouldShowErrors(this.field);
|
|
822
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
822
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
823
823
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
824
824
|
// Accessibility
|
|
825
825
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
826
826
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
827
|
-
hintId = computed(() => `${this.key()}-hint`,
|
|
827
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
828
828
|
/** Base ID for error elements, used for aria-describedby */
|
|
829
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
829
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
830
830
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
831
831
|
ariaInvalid = computed(() => {
|
|
832
832
|
const fieldState = this.field()();
|
|
833
833
|
return fieldState.invalid() && fieldState.touched();
|
|
834
|
-
},
|
|
834
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
835
835
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
836
836
|
ariaRequired = computed(() => {
|
|
837
837
|
return this.field()().required?.() === true ? true : null;
|
|
838
|
-
},
|
|
838
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
839
839
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
840
840
|
ariaDescribedBy = computed(() => {
|
|
841
841
|
const ids = [];
|
|
@@ -847,9 +847,9 @@ class MatRadioFieldComponent {
|
|
|
847
847
|
ids.push(`${this.errorId()}-${i}`);
|
|
848
848
|
});
|
|
849
849
|
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.
|
|
850
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
851
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
852
|
+
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
853
|
@let f = field();
|
|
854
854
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
855
855
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -884,7 +884,7 @@ class MatRadioFieldComponent {
|
|
|
884
884
|
}
|
|
885
885
|
`, 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
886
|
}
|
|
887
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatRadioFieldComponent, decorators: [{
|
|
888
888
|
type: Component,
|
|
889
889
|
args: [{ selector: 'df-mat-radio', imports: [MatRadioGroup, MatRadioButton, Field, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
890
890
|
@let f = field();
|
|
@@ -934,38 +934,38 @@ var matRadio_component = /*#__PURE__*/Object.freeze({
|
|
|
934
934
|
|
|
935
935
|
class MatSelectFieldComponent {
|
|
936
936
|
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',
|
|
937
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
938
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
939
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
940
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
941
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
942
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
943
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
944
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
945
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
946
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
947
|
+
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : []));
|
|
948
|
+
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : []));
|
|
949
949
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
950
950
|
showErrors = shouldShowErrors(this.field);
|
|
951
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
951
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
952
952
|
defaultCompare = Object.is;
|
|
953
953
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
954
954
|
// Accessibility
|
|
955
955
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
956
956
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
957
|
-
hintId = computed(() => `${this.key()}-hint`,
|
|
957
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
958
958
|
/** Base ID for error elements, used for aria-describedby */
|
|
959
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
959
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
960
960
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
961
961
|
ariaInvalid = computed(() => {
|
|
962
962
|
const fieldState = this.field()();
|
|
963
963
|
return fieldState.invalid() && fieldState.touched();
|
|
964
|
-
},
|
|
964
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
965
965
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
966
966
|
ariaRequired = computed(() => {
|
|
967
967
|
return this.field()().required?.() === true ? true : null;
|
|
968
|
-
},
|
|
968
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
969
969
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
970
970
|
ariaDescribedBy = computed(() => {
|
|
971
971
|
const ids = [];
|
|
@@ -977,9 +977,9 @@ class MatSelectFieldComponent {
|
|
|
977
977
|
ids.push(`${this.errorId()}-${i}`);
|
|
978
978
|
});
|
|
979
979
|
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.
|
|
980
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
981
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
982
|
+
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
983
|
@let f = field();
|
|
984
984
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
985
985
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1014,7 +1014,7 @@ class MatSelectFieldComponent {
|
|
|
1014
1014
|
</mat-form-field>
|
|
1015
1015
|
`, 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
1016
|
}
|
|
1017
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1017
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatSelectFieldComponent, decorators: [{
|
|
1018
1018
|
type: Component,
|
|
1019
1019
|
args: [{ selector: 'df-mat-select', imports: [MatFormField, MatLabel, MatSelect, MatOption, MatHint, Field, MatError$1, DynamicTextPipe, AsyncPipe], template: `
|
|
1020
1020
|
@let f = field();
|
|
@@ -1063,30 +1063,30 @@ var matSelect_component = /*#__PURE__*/Object.freeze({
|
|
|
1063
1063
|
});
|
|
1064
1064
|
|
|
1065
1065
|
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(
|
|
1066
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1067
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1068
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1069
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1070
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1071
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1072
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1073
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1074
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1075
1075
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1076
1076
|
showErrors = shouldShowErrors(this.field);
|
|
1077
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
1077
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1078
1078
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1079
1079
|
// Accessibility
|
|
1080
1080
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1081
1081
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
1082
|
-
hintId = computed(() => `${this.key()}-hint`,
|
|
1082
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1083
1083
|
/** Base ID for error elements, used for aria-describedby */
|
|
1084
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
1084
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1085
1085
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
1086
1086
|
ariaInvalid = computed(() => {
|
|
1087
1087
|
const fieldState = this.field()();
|
|
1088
1088
|
return fieldState.invalid() && fieldState.touched();
|
|
1089
|
-
},
|
|
1089
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1090
1090
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
1091
1091
|
ariaDescribedBy = computed(() => {
|
|
1092
1092
|
const ids = [];
|
|
@@ -1098,9 +1098,9 @@ class MatSliderFieldComponent {
|
|
|
1098
1098
|
ids.push(`${this.errorId()}-${i}`);
|
|
1099
1099
|
});
|
|
1100
1100
|
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.
|
|
1101
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1102
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1103
|
+
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
1104
|
@let f = field();
|
|
1105
1105
|
@let ariaInvalid = this.ariaInvalid();
|
|
1106
1106
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1135,7 +1135,7 @@ class MatSliderFieldComponent {
|
|
|
1135
1135
|
}
|
|
1136
1136
|
`, 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
1137
|
}
|
|
1138
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatSliderFieldComponent, decorators: [{
|
|
1139
1139
|
type: Component,
|
|
1140
1140
|
args: [{ selector: 'df-mat-slider', imports: [MatSlider, MatSliderThumb, MatError, DynamicTextPipe, AsyncPipe, Field], template: `
|
|
1141
1141
|
@let f = field();
|
|
@@ -1186,20 +1186,20 @@ var matSlider_component = /*#__PURE__*/Object.freeze({
|
|
|
1186
1186
|
class MatButtonFieldComponent {
|
|
1187
1187
|
eventBus = inject(EventBus);
|
|
1188
1188
|
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('',
|
|
1189
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1190
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
1191
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1192
|
+
hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
|
|
1193
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1194
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1195
1195
|
/** 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(
|
|
1196
|
+
event = input(...(ngDevMode ? [undefined, { debugName: "event" }] : []));
|
|
1197
|
+
eventArgs = input(...(ngDevMode ? [undefined, { debugName: "eventArgs" }] : []));
|
|
1198
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1199
|
+
eventContext = input(...(ngDevMode ? [undefined, { debugName: "eventContext" }] : []));
|
|
1200
1200
|
/** 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()}`,
|
|
1201
|
+
buttonType = computed(() => this.props()?.type ?? 'button', ...(ngDevMode ? [{ debugName: "buttonType" }] : []));
|
|
1202
|
+
buttonTestId = computed(() => `${this.buttonType()}-${this.key()}`, ...(ngDevMode ? [{ debugName: "buttonTestId" }] : []));
|
|
1203
1203
|
/**
|
|
1204
1204
|
* Handle button click.
|
|
1205
1205
|
* - For submit buttons (type="submit"): do nothing, native form submit handles it
|
|
@@ -1239,8 +1239,8 @@ class MatButtonFieldComponent {
|
|
|
1239
1239
|
this.eventBus.dispatch(event);
|
|
1240
1240
|
}
|
|
1241
1241
|
}
|
|
1242
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1243
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.
|
|
1242
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1243
|
+
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
1244
|
<button
|
|
1245
1245
|
mat-raised-button
|
|
1246
1246
|
[type]="buttonType()"
|
|
@@ -1253,7 +1253,7 @@ class MatButtonFieldComponent {
|
|
|
1253
1253
|
</button>
|
|
1254
1254
|
`, 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
1255
|
}
|
|
1256
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1256
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatButtonFieldComponent, decorators: [{
|
|
1257
1257
|
type: Component,
|
|
1258
1258
|
args: [{ selector: 'df-mat-button', imports: [MatButton, DynamicTextPipe, AsyncPipe], host: {
|
|
1259
1259
|
'[id]': '`${key()}`',
|
|
@@ -1282,19 +1282,19 @@ var matButton_component = /*#__PURE__*/Object.freeze({
|
|
|
1282
1282
|
|
|
1283
1283
|
class MatTextareaFieldComponent {
|
|
1284
1284
|
materialConfig = inject(MATERIAL_CONFIG, { optional: true });
|
|
1285
|
-
field = input.required(
|
|
1286
|
-
key = input.required(
|
|
1285
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1286
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1287
1287
|
/**
|
|
1288
1288
|
* Reference to the native textarea element.
|
|
1289
1289
|
* Used to imperatively sync the readonly attribute since Angular Signal Forms'
|
|
1290
1290
|
* [field] directive doesn't sync FieldState.readonly() to the DOM.
|
|
1291
1291
|
*/
|
|
1292
|
-
textareaRef = viewChild('textareaRef',
|
|
1292
|
+
textareaRef = viewChild('textareaRef', ...(ngDevMode ? [{ debugName: "textareaRef" }] : []));
|
|
1293
1293
|
/**
|
|
1294
1294
|
* Computed signal that extracts the readonly state from the field.
|
|
1295
1295
|
* Used by the effect to reactively sync the readonly attribute to the DOM.
|
|
1296
1296
|
*/
|
|
1297
|
-
isReadonly = computed(() => this.field()().readonly(),
|
|
1297
|
+
isReadonly = computed(() => this.field()().readonly(), ...(ngDevMode ? [{ debugName: "isReadonly" }] : []));
|
|
1298
1298
|
/**
|
|
1299
1299
|
* Workaround: Angular Signal Forms' [field] directive does NOT sync the readonly
|
|
1300
1300
|
* attribute to the DOM, even though FieldState.readonly() returns the correct value.
|
|
@@ -1316,34 +1316,34 @@ class MatTextareaFieldComponent {
|
|
|
1316
1316
|
}
|
|
1317
1317
|
}
|
|
1318
1318
|
});
|
|
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',
|
|
1319
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1320
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1321
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1322
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1323
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1324
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1325
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1326
|
+
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : []));
|
|
1327
|
+
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : []));
|
|
1328
1328
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1329
1329
|
showErrors = shouldShowErrors(this.field);
|
|
1330
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
1330
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1331
1331
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1332
1332
|
// Accessibility
|
|
1333
1333
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1334
1334
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
1335
|
-
hintId = computed(() => `${this.key()}-hint`,
|
|
1335
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1336
1336
|
/** Base ID for error elements, used for aria-describedby */
|
|
1337
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
1337
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1338
1338
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
1339
1339
|
ariaInvalid = computed(() => {
|
|
1340
1340
|
const fieldState = this.field()();
|
|
1341
1341
|
return fieldState.invalid() && fieldState.touched();
|
|
1342
|
-
},
|
|
1342
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1343
1343
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
1344
1344
|
ariaRequired = computed(() => {
|
|
1345
1345
|
return this.field()().required?.() === true ? true : null;
|
|
1346
|
-
},
|
|
1346
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1347
1347
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
1348
1348
|
ariaDescribedBy = computed(() => {
|
|
1349
1349
|
const ids = [];
|
|
@@ -1355,9 +1355,9 @@ class MatTextareaFieldComponent {
|
|
|
1355
1355
|
ids.push(`${this.errorId()}-${i}`);
|
|
1356
1356
|
});
|
|
1357
1357
|
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.
|
|
1358
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1359
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1360
|
+
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
1361
|
@let f = field();
|
|
1362
1362
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1363
1363
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1390,7 +1390,7 @@ class MatTextareaFieldComponent {
|
|
|
1390
1390
|
</mat-form-field>
|
|
1391
1391
|
`, 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
1392
|
}
|
|
1393
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1393
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatTextareaFieldComponent, decorators: [{
|
|
1394
1394
|
type: Component,
|
|
1395
1395
|
args: [{ selector: 'df-mat-textarea', imports: [MatFormField, MatLabel, MatInput, MatHint, Field, MatError$1, DynamicTextPipe, AsyncPipe], template: `
|
|
1396
1396
|
@let f = field();
|
|
@@ -1438,35 +1438,35 @@ var matTextarea_component = /*#__PURE__*/Object.freeze({
|
|
|
1438
1438
|
|
|
1439
1439
|
class MatToggleFieldComponent {
|
|
1440
1440
|
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,
|
|
1441
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1442
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1443
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1444
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1445
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1446
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1447
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1448
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1449
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1450
|
+
effectiveDisableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, ...(ngDevMode ? [{ debugName: "effectiveDisableRipple" }] : []));
|
|
1451
1451
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1452
1452
|
showErrors = shouldShowErrors(this.field);
|
|
1453
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []),
|
|
1453
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1454
1454
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1455
1455
|
// Accessibility
|
|
1456
1456
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1457
1457
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
1458
|
-
hintId = computed(() => `${this.key()}-hint`,
|
|
1458
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1459
1459
|
/** Base ID for error elements, used for aria-describedby */
|
|
1460
|
-
errorId = computed(() => `${this.key()}-error`,
|
|
1460
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1461
1461
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
1462
1462
|
ariaInvalid = computed(() => {
|
|
1463
1463
|
const fieldState = this.field()();
|
|
1464
1464
|
return fieldState.invalid() && fieldState.touched();
|
|
1465
|
-
},
|
|
1465
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1466
1466
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
1467
1467
|
ariaRequired = computed(() => {
|
|
1468
1468
|
return this.field()().required?.() === true ? true : null;
|
|
1469
|
-
},
|
|
1469
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1470
1470
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
1471
1471
|
ariaDescribedBy = computed(() => {
|
|
1472
1472
|
const ids = [];
|
|
@@ -1478,9 +1478,9 @@ class MatToggleFieldComponent {
|
|
|
1478
1478
|
ids.push(`${this.errorId()}-${i}`);
|
|
1479
1479
|
});
|
|
1480
1480
|
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.
|
|
1481
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1482
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1483
|
+
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
1484
|
@let f = field();
|
|
1485
1485
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1486
1486
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1507,7 +1507,7 @@ class MatToggleFieldComponent {
|
|
|
1507
1507
|
}
|
|
1508
1508
|
`, 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
1509
|
}
|
|
1510
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1510
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MatToggleFieldComponent, decorators: [{
|
|
1511
1511
|
type: Component,
|
|
1512
1512
|
args: [{ selector: 'df-mat-toggle', imports: [MatSlideToggle, Field, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
1513
1513
|
@let f = field();
|