@ng-forge/dynamic-forms-material 0.6.1 → 0.7.0
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.
|
@@ -65,21 +65,21 @@ function createAriaDescribedBySignal(errorsToDisplay, errorId, hintId, hasHint)
|
|
|
65
65
|
class MatCheckboxFieldComponent {
|
|
66
66
|
materialConfig = inject(MATERIAL_CONFIG, { optional: true });
|
|
67
67
|
elementRef = inject((ElementRef));
|
|
68
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
69
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
68
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
69
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
70
70
|
// Properties
|
|
71
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
72
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
73
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
74
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
75
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
76
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
77
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
78
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
79
|
-
effectiveDisableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, ...(ngDevMode ? [{ debugName: "effectiveDisableRipple" }] : []));
|
|
71
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
72
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
73
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
74
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
75
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
76
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
77
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
78
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
79
|
+
effectiveDisableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, ...(ngDevMode ? [{ debugName: "effectiveDisableRipple" }] : /* istanbul ignore next */ []));
|
|
80
80
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
81
81
|
showErrors = shouldShowErrors(this.field);
|
|
82
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
82
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
83
83
|
constructor() {
|
|
84
84
|
// Apply meta attributes to the internal checkbox input
|
|
85
85
|
setupMetaTracking(this.elementRef, this.meta, {
|
|
@@ -90,18 +90,18 @@ class MatCheckboxFieldComponent {
|
|
|
90
90
|
// Accessibility
|
|
91
91
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
92
92
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
93
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
93
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
94
94
|
/** Base ID for error elements, used for aria-describedby */
|
|
95
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
95
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
96
96
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
97
97
|
ariaInvalid = computed(() => {
|
|
98
98
|
const fieldState = this.field()();
|
|
99
99
|
return fieldState.invalid() && fieldState.touched();
|
|
100
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
100
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
101
101
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
102
102
|
ariaRequired = computed(() => {
|
|
103
103
|
return this.field()().required?.() === true ? true : null;
|
|
104
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
104
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
105
105
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
106
106
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
107
107
|
/**
|
|
@@ -144,8 +144,8 @@ class MatCheckboxFieldComponent {
|
|
|
144
144
|
}
|
|
145
145
|
}
|
|
146
146
|
});
|
|
147
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
148
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
147
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
148
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 }, meta: { classPropertyName: "meta", publicName: "meta", 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: `
|
|
149
149
|
@let f = field();
|
|
150
150
|
@let checkboxId = key() + '-checkbox';
|
|
151
151
|
|
|
@@ -171,7 +171,7 @@ class MatCheckboxFieldComponent {
|
|
|
171
171
|
}
|
|
172
172
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\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: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { 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 });
|
|
173
173
|
}
|
|
174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatCheckboxFieldComponent, decorators: [{
|
|
175
175
|
type: Component,
|
|
176
176
|
args: [{ selector: 'df-mat-checkbox', imports: [MatCheckbox, FormField, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
177
177
|
@let f = field();
|
|
@@ -213,47 +213,47 @@ var matCheckbox_component = /*#__PURE__*/Object.freeze({
|
|
|
213
213
|
class MatDatepickerFieldComponent {
|
|
214
214
|
materialConfig = inject(MATERIAL_CONFIG, { optional: true });
|
|
215
215
|
elementRef = inject((ElementRef));
|
|
216
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
217
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
216
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
217
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
218
218
|
constructor() {
|
|
219
219
|
setupMetaTracking(this.elementRef, this.meta, { selector: 'input' });
|
|
220
220
|
}
|
|
221
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
222
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
223
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
224
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
225
|
-
minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
|
|
226
|
-
maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
|
|
227
|
-
startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : []));
|
|
228
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
229
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
230
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
231
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
232
|
-
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : []));
|
|
233
|
-
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : []));
|
|
221
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
222
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
223
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
224
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
225
|
+
minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
|
|
226
|
+
maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
|
|
227
|
+
startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
|
|
228
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
229
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
230
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
231
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
232
|
+
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : /* istanbul ignore next */ []));
|
|
233
|
+
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : /* istanbul ignore next */ []));
|
|
234
234
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
235
235
|
showErrors = shouldShowErrors(this.field);
|
|
236
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
236
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
237
237
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
238
238
|
// Accessibility
|
|
239
239
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
240
240
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
241
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
241
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
242
242
|
/** Base ID for error elements, used for aria-describedby */
|
|
243
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
243
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
244
244
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
245
245
|
ariaInvalid = computed(() => {
|
|
246
246
|
const fieldState = this.field()();
|
|
247
247
|
return fieldState.invalid() && fieldState.touched();
|
|
248
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
248
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
249
249
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
250
250
|
ariaRequired = computed(() => {
|
|
251
251
|
return this.field()().required?.() === true ? true : null;
|
|
252
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
252
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
253
253
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
254
254
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
255
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
256
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
255
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
256
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 }, meta: { classPropertyName: "meta", publicName: "meta", 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()}`", "class": "className()", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, providers: [provideNativeDateAdapter()], ngImport: i0, template: `
|
|
257
257
|
@let f = field();
|
|
258
258
|
@let inputId = key() + '-input';
|
|
259
259
|
|
|
@@ -287,7 +287,7 @@ class MatDatepickerFieldComponent {
|
|
|
287
287
|
</mat-form-field>
|
|
288
288
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "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: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { 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 });
|
|
289
289
|
}
|
|
290
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
290
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatDatepickerFieldComponent, decorators: [{
|
|
291
291
|
type: Component,
|
|
292
292
|
args: [{ selector: 'df-mat-datepicker', imports: [
|
|
293
293
|
MatFormField,
|
|
@@ -350,16 +350,16 @@ var matDatepicker_component = /*#__PURE__*/Object.freeze({
|
|
|
350
350
|
class MatInputFieldComponent {
|
|
351
351
|
materialConfig = inject(MATERIAL_CONFIG, { optional: true });
|
|
352
352
|
elementRef = inject((ElementRef));
|
|
353
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
354
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
355
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
356
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
357
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
358
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
359
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
360
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
361
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
362
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
353
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
354
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
355
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
356
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
357
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
358
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
359
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
360
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
361
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
362
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
363
363
|
constructor() {
|
|
364
364
|
setupMetaTracking(this.elementRef, this.meta, { selector: 'input' });
|
|
365
365
|
}
|
|
@@ -368,12 +368,12 @@ class MatInputFieldComponent {
|
|
|
368
368
|
* Used to imperatively sync the readonly attribute since Angular Signal Forms'
|
|
369
369
|
* [field] directive doesn't sync FieldState.readonly() to the DOM.
|
|
370
370
|
*/
|
|
371
|
-
inputRef = viewChild('inputRef', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
|
|
371
|
+
inputRef = viewChild('inputRef', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
|
|
372
372
|
/**
|
|
373
373
|
* Computed signal that extracts the readonly state from the field.
|
|
374
374
|
* Used by the effect to reactively sync the readonly attribute to the DOM.
|
|
375
375
|
*/
|
|
376
|
-
isReadonly = computed(() => this.field()().readonly(), ...(ngDevMode ? [{ debugName: "isReadonly" }] : []));
|
|
376
|
+
isReadonly = computed(() => this.field()().readonly(), ...(ngDevMode ? [{ debugName: "isReadonly" }] : /* istanbul ignore next */ []));
|
|
377
377
|
/**
|
|
378
378
|
* Workaround: Angular Signal Forms' [field] directive does NOT sync the readonly
|
|
379
379
|
* attribute to the DOM, even though FieldState.readonly() returns the correct value.
|
|
@@ -401,31 +401,31 @@ class MatInputFieldComponent {
|
|
|
401
401
|
}
|
|
402
402
|
},
|
|
403
403
|
});
|
|
404
|
-
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : []));
|
|
405
|
-
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : []));
|
|
404
|
+
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : /* istanbul ignore next */ []));
|
|
405
|
+
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : /* istanbul ignore next */ []));
|
|
406
406
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
407
407
|
showErrors = shouldShowErrors(this.field);
|
|
408
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
408
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
409
409
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
410
410
|
// Accessibility
|
|
411
411
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
412
412
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
413
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
413
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
414
414
|
/** Base ID for error elements, used for aria-describedby */
|
|
415
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
415
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
416
416
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
417
417
|
ariaInvalid = computed(() => {
|
|
418
418
|
const fieldState = this.field()();
|
|
419
419
|
return fieldState.invalid() && fieldState.touched();
|
|
420
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
420
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
421
421
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
422
422
|
ariaRequired = computed(() => {
|
|
423
423
|
return this.field()().required?.() === true ? true : null;
|
|
424
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
424
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
425
425
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
426
426
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
427
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
428
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
427
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
428
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 }, meta: { classPropertyName: "meta", publicName: "meta", 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: `
|
|
429
429
|
@let f = field();
|
|
430
430
|
@let inputId = key() + '-input';
|
|
431
431
|
|
|
@@ -453,7 +453,7 @@ class MatInputFieldComponent {
|
|
|
453
453
|
</mat-form-field>
|
|
454
454
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "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: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { 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 });
|
|
455
455
|
}
|
|
456
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
456
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatInputFieldComponent, decorators: [{
|
|
457
457
|
type: Component,
|
|
458
458
|
args: [{ selector: 'df-mat-input', imports: [MatFormField, MatLabel, MatInput, MatHint, FormField, MatError$1, DynamicTextPipe, AsyncPipe], template: `
|
|
459
459
|
@let f = field();
|
|
@@ -496,19 +496,19 @@ var matInput_component = /*#__PURE__*/Object.freeze({
|
|
|
496
496
|
|
|
497
497
|
class MatMultiCheckboxFieldComponent {
|
|
498
498
|
elementRef = inject((ElementRef));
|
|
499
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
500
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
501
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
502
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
503
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
504
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
505
|
-
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
506
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
507
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
499
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
500
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
501
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
502
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
503
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
504
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
505
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
506
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
507
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
508
508
|
valueViewModel = linkedSignal(() => {
|
|
509
509
|
const currentValues = this.field()().value();
|
|
510
510
|
return this.options().filter((option) => currentValues.includes(option.value));
|
|
511
|
-
}, { ...(ngDevMode ? { debugName: "valueViewModel" } : {}), equal: isEqual });
|
|
511
|
+
}, { ...(ngDevMode ? { debugName: "valueViewModel" } : /* istanbul ignore next */ {}), equal: isEqual });
|
|
512
512
|
/** Computed map of checked option values for O(1) lookup in template */
|
|
513
513
|
checkedValuesMap = computed(() => {
|
|
514
514
|
const map = {};
|
|
@@ -516,7 +516,7 @@ class MatMultiCheckboxFieldComponent {
|
|
|
516
516
|
map[String(opt.value)] = true;
|
|
517
517
|
}
|
|
518
518
|
return map;
|
|
519
|
-
}, ...(ngDevMode ? [{ debugName: "checkedValuesMap" }] : []));
|
|
519
|
+
}, ...(ngDevMode ? [{ debugName: "checkedValuesMap" }] : /* istanbul ignore next */ []));
|
|
520
520
|
constructor() {
|
|
521
521
|
// Apply meta attributes to all checkbox inputs, re-apply when options change
|
|
522
522
|
setupMetaTracking(this.elementRef, this.meta, {
|
|
@@ -548,31 +548,31 @@ class MatMultiCheckboxFieldComponent {
|
|
|
548
548
|
}
|
|
549
549
|
});
|
|
550
550
|
}
|
|
551
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
552
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
551
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
552
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
553
553
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
554
554
|
showErrors = shouldShowErrors(this.field);
|
|
555
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
555
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
556
556
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
557
557
|
// Accessibility
|
|
558
558
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
559
559
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
560
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
560
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
561
561
|
/** Base ID for error elements, used for aria-describedby */
|
|
562
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
562
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
563
563
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
564
564
|
ariaInvalid = computed(() => {
|
|
565
565
|
const fieldState = this.field()();
|
|
566
566
|
return fieldState.invalid() && fieldState.touched();
|
|
567
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
567
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
568
568
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
569
569
|
ariaRequired = computed(() => {
|
|
570
570
|
return this.field()().required?.() === true ? true : null;
|
|
571
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
571
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
572
572
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
573
573
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
574
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
575
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
574
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
575
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 }, meta: { classPropertyName: "meta", publicName: "meta", 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: `
|
|
576
576
|
@let f = field();
|
|
577
577
|
@let checkboxGroupId = key() + '-checkbox-group';
|
|
578
578
|
@let checked = checkedValuesMap();
|
|
@@ -609,7 +609,7 @@ class MatMultiCheckboxFieldComponent {
|
|
|
609
609
|
}
|
|
610
610
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\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: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
611
611
|
}
|
|
612
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
612
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatMultiCheckboxFieldComponent, decorators: [{
|
|
613
613
|
type: Component,
|
|
614
614
|
args: [{ selector: 'df-mat-multi-checkbox', imports: [MatCheckbox, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
615
615
|
@let f = field();
|
|
@@ -661,20 +661,20 @@ var matMultiCheckbox_component = /*#__PURE__*/Object.freeze({
|
|
|
661
661
|
|
|
662
662
|
class MatRadioFieldComponent {
|
|
663
663
|
elementRef = inject((ElementRef));
|
|
664
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
665
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
666
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
667
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
668
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
669
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
670
|
-
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
671
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
672
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
673
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
674
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
664
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
665
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
666
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
667
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
668
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
669
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
670
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
671
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
672
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
673
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
674
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
675
675
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
676
676
|
showErrors = shouldShowErrors(this.field);
|
|
677
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
677
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
678
678
|
constructor() {
|
|
679
679
|
// Apply meta attributes to all radio inputs, re-apply when options change
|
|
680
680
|
setupMetaTracking(this.elementRef, this.meta, {
|
|
@@ -686,22 +686,22 @@ class MatRadioFieldComponent {
|
|
|
686
686
|
// Accessibility
|
|
687
687
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
688
688
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
689
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
689
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
690
690
|
/** Base ID for error elements, used for aria-describedby */
|
|
691
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
691
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
692
692
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
693
693
|
ariaInvalid = computed(() => {
|
|
694
694
|
const fieldState = this.field()();
|
|
695
695
|
return fieldState.invalid() && fieldState.touched();
|
|
696
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
696
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
697
697
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
698
698
|
ariaRequired = computed(() => {
|
|
699
699
|
return this.field()().required?.() === true ? true : null;
|
|
700
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
700
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
701
701
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
702
702
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
703
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
704
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
703
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
704
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 }, meta: { classPropertyName: "meta", publicName: "meta", 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: `
|
|
705
705
|
@let f = field();
|
|
706
706
|
@let radioGroupId = key() + '-radio-group';
|
|
707
707
|
|
|
@@ -735,7 +735,7 @@ class MatRadioFieldComponent {
|
|
|
735
735
|
}
|
|
736
736
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\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: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { 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 });
|
|
737
737
|
}
|
|
738
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
738
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatRadioFieldComponent, decorators: [{
|
|
739
739
|
type: Component,
|
|
740
740
|
args: [{ selector: 'df-mat-radio', imports: [MatRadioGroup, MatRadioButton, FormField, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
741
741
|
@let f = field();
|
|
@@ -785,22 +785,22 @@ var matRadio_component = /*#__PURE__*/Object.freeze({
|
|
|
785
785
|
class MatSelectFieldComponent {
|
|
786
786
|
materialConfig = inject(MATERIAL_CONFIG, { optional: true });
|
|
787
787
|
elementRef = inject((ElementRef));
|
|
788
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
789
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
790
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
791
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
792
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
793
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
794
|
-
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
795
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
796
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
797
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
798
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
799
|
-
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : []));
|
|
800
|
-
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : []));
|
|
788
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
789
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
790
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
791
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
792
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
793
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
794
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
795
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
796
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
797
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
798
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
799
|
+
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : /* istanbul ignore next */ []));
|
|
800
|
+
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : /* istanbul ignore next */ []));
|
|
801
801
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
802
802
|
showErrors = shouldShowErrors(this.field);
|
|
803
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
803
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
804
804
|
defaultCompare = Object.is;
|
|
805
805
|
constructor() {
|
|
806
806
|
// mat-select has no native input - apply meta to mat-select element
|
|
@@ -812,22 +812,22 @@ class MatSelectFieldComponent {
|
|
|
812
812
|
// Accessibility
|
|
813
813
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
814
814
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
815
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
815
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
816
816
|
/** Base ID for error elements, used for aria-describedby */
|
|
817
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
817
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
818
818
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
819
819
|
ariaInvalid = computed(() => {
|
|
820
820
|
const fieldState = this.field()();
|
|
821
821
|
return fieldState.invalid() && fieldState.touched();
|
|
822
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
822
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
823
823
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
824
824
|
ariaRequired = computed(() => {
|
|
825
825
|
return this.field()().required?.() === true ? true : null;
|
|
826
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
826
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
827
827
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
828
828
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
829
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
830
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
829
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
830
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 }, meta: { classPropertyName: "meta", publicName: "meta", 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: `
|
|
831
831
|
@let f = field();
|
|
832
832
|
@let selectId = key() + '-select';
|
|
833
833
|
|
|
@@ -861,7 +861,7 @@ class MatSelectFieldComponent {
|
|
|
861
861
|
</mat-form-field>
|
|
862
862
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "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: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { 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 });
|
|
863
863
|
}
|
|
864
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
864
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatSelectFieldComponent, decorators: [{
|
|
865
865
|
type: Component,
|
|
866
866
|
args: [{ selector: 'df-mat-select', imports: [MatFormField, MatLabel, MatSelect, MatOption, MatHint, FormField, MatError$1, DynamicTextPipe, AsyncPipe], template: `
|
|
867
867
|
@let f = field();
|
|
@@ -910,42 +910,42 @@ var matSelect_component = /*#__PURE__*/Object.freeze({
|
|
|
910
910
|
|
|
911
911
|
class MatSliderFieldComponent {
|
|
912
912
|
elementRef = inject((ElementRef));
|
|
913
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
914
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
913
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
914
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
915
915
|
constructor() {
|
|
916
916
|
setupMetaTracking(this.elementRef, this.meta, { selector: 'input' });
|
|
917
917
|
}
|
|
918
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
919
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
920
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
921
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
922
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
923
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
924
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
925
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
918
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
919
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
920
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
921
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
922
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
923
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
924
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
925
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
926
926
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
927
927
|
showErrors = shouldShowErrors(this.field);
|
|
928
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
928
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
929
929
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
930
930
|
// Accessibility
|
|
931
931
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
932
932
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
933
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
933
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
934
934
|
/** Base ID for error elements, used for aria-describedby */
|
|
935
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
935
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
936
936
|
/** aria-required: true when field has required validation, null otherwise */
|
|
937
937
|
ariaRequired = computed(() => {
|
|
938
938
|
return this.field()().required?.() === true ? true : null;
|
|
939
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
939
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
940
940
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
941
941
|
ariaInvalid = computed(() => {
|
|
942
942
|
const fieldState = this.field()();
|
|
943
943
|
return fieldState.invalid() && fieldState.touched();
|
|
944
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
944
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
945
945
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
946
946
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
947
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
948
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
947
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
948
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 }, meta: { classPropertyName: "meta", publicName: "meta", 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: `
|
|
949
949
|
@let f = field();
|
|
950
950
|
@let inputId = key() + '-input';
|
|
951
951
|
|
|
@@ -980,7 +980,7 @@ class MatSliderFieldComponent {
|
|
|
980
980
|
}
|
|
981
981
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", ".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: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
982
982
|
}
|
|
983
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
983
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatSliderFieldComponent, decorators: [{
|
|
984
984
|
type: Component,
|
|
985
985
|
args: [{ selector: 'df-mat-slider', imports: [MatSlider, MatSliderThumb, MatError, DynamicTextPipe, AsyncPipe, FormField], template: `
|
|
986
986
|
@let f = field();
|
|
@@ -1031,20 +1031,20 @@ var matSlider_component = /*#__PURE__*/Object.freeze({
|
|
|
1031
1031
|
class MatButtonFieldComponent {
|
|
1032
1032
|
eventBus = inject(EventBus);
|
|
1033
1033
|
arrayContext = inject(ARRAY_CONTEXT, { optional: true });
|
|
1034
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1035
|
-
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
1036
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1037
|
-
hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
|
|
1038
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1039
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1034
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
1035
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1036
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1037
|
+
hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
|
|
1038
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
1039
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1040
1040
|
/** Event to dispatch on click. Optional for submit buttons (native form submit handles it). */
|
|
1041
|
-
event = input(...(ngDevMode ? [undefined, { debugName: "event" }] : []));
|
|
1042
|
-
eventArgs = input(...(ngDevMode ? [undefined, { debugName: "eventArgs" }] : []));
|
|
1043
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1044
|
-
eventContext = input(...(ngDevMode ? [undefined, { debugName: "eventContext" }] : []));
|
|
1041
|
+
event = input(...(ngDevMode ? [undefined, { debugName: "event" }] : /* istanbul ignore next */ []));
|
|
1042
|
+
eventArgs = input(...(ngDevMode ? [undefined, { debugName: "eventArgs" }] : /* istanbul ignore next */ []));
|
|
1043
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
1044
|
+
eventContext = input(...(ngDevMode ? [undefined, { debugName: "eventContext" }] : /* istanbul ignore next */ []));
|
|
1045
1045
|
/** Resolved button type - defaults to 'button' if not specified in props */
|
|
1046
|
-
buttonType = computed(() => this.props()?.type ?? 'button', ...(ngDevMode ? [{ debugName: "buttonType" }] : []));
|
|
1047
|
-
buttonTestId = computed(() => `${this.buttonType()}-${this.key()}`, ...(ngDevMode ? [{ debugName: "buttonTestId" }] : []));
|
|
1046
|
+
buttonType = computed(() => this.props()?.type ?? 'button', ...(ngDevMode ? [{ debugName: "buttonType" }] : /* istanbul ignore next */ []));
|
|
1047
|
+
buttonTestId = computed(() => `${this.buttonType()}-${this.key()}`, ...(ngDevMode ? [{ debugName: "buttonTestId" }] : /* istanbul ignore next */ []));
|
|
1048
1048
|
/**
|
|
1049
1049
|
* Handle button click.
|
|
1050
1050
|
* - For submit buttons (type="submit"): do nothing, native form submit handles it
|
|
@@ -1084,8 +1084,8 @@ class MatButtonFieldComponent {
|
|
|
1084
1084
|
this.eventBus.dispatch(event);
|
|
1085
1085
|
}
|
|
1086
1086
|
}
|
|
1087
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1088
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
1087
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1088
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", 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()", "attr.hidden": "hidden() || null" } }, ngImport: i0, template: `
|
|
1089
1089
|
@let buttonId = key() + '-button';
|
|
1090
1090
|
<button
|
|
1091
1091
|
mat-raised-button
|
|
@@ -1100,7 +1100,7 @@ class MatButtonFieldComponent {
|
|
|
1100
1100
|
</button>
|
|
1101
1101
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "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 });
|
|
1102
1102
|
}
|
|
1103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatButtonFieldComponent, decorators: [{
|
|
1104
1104
|
type: Component,
|
|
1105
1105
|
args: [{ selector: 'df-mat-button', imports: [MatButton, DynamicTextPipe, AsyncPipe], host: {
|
|
1106
1106
|
'[id]': '`${key()}`',
|
|
@@ -1133,16 +1133,16 @@ var matButton_component = /*#__PURE__*/Object.freeze({
|
|
|
1133
1133
|
class MatTextareaFieldComponent {
|
|
1134
1134
|
materialConfig = inject(MATERIAL_CONFIG, { optional: true });
|
|
1135
1135
|
elementRef = inject((ElementRef));
|
|
1136
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1137
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1138
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1139
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1140
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1141
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1142
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1143
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
1144
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1145
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1136
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
1137
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
1138
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1139
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1140
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1141
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
1142
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
1143
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
1144
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
1145
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
1146
1146
|
constructor() {
|
|
1147
1147
|
setupMetaTracking(this.elementRef, this.meta, { selector: 'textarea' });
|
|
1148
1148
|
}
|
|
@@ -1151,12 +1151,12 @@ class MatTextareaFieldComponent {
|
|
|
1151
1151
|
* Used to imperatively sync the readonly attribute since Angular Signal Forms'
|
|
1152
1152
|
* [field] directive doesn't sync FieldState.readonly() to the DOM.
|
|
1153
1153
|
*/
|
|
1154
|
-
textareaRef = viewChild('textareaRef', ...(ngDevMode ? [{ debugName: "textareaRef" }] : []));
|
|
1154
|
+
textareaRef = viewChild('textareaRef', ...(ngDevMode ? [{ debugName: "textareaRef" }] : /* istanbul ignore next */ []));
|
|
1155
1155
|
/**
|
|
1156
1156
|
* Computed signal that extracts the readonly state from the field.
|
|
1157
1157
|
* Used by the effect to reactively sync the readonly attribute to the DOM.
|
|
1158
1158
|
*/
|
|
1159
|
-
isReadonly = computed(() => this.field()().readonly(), ...(ngDevMode ? [{ debugName: "isReadonly" }] : []));
|
|
1159
|
+
isReadonly = computed(() => this.field()().readonly(), ...(ngDevMode ? [{ debugName: "isReadonly" }] : /* istanbul ignore next */ []));
|
|
1160
1160
|
/**
|
|
1161
1161
|
* Workaround: Angular Signal Forms' [field] directive does NOT sync the readonly
|
|
1162
1162
|
* attribute to the DOM, even though FieldState.readonly() returns the correct value.
|
|
@@ -1184,31 +1184,31 @@ class MatTextareaFieldComponent {
|
|
|
1184
1184
|
}
|
|
1185
1185
|
},
|
|
1186
1186
|
});
|
|
1187
|
-
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : []));
|
|
1188
|
-
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : []));
|
|
1187
|
+
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : /* istanbul ignore next */ []));
|
|
1188
|
+
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : /* istanbul ignore next */ []));
|
|
1189
1189
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1190
1190
|
showErrors = shouldShowErrors(this.field);
|
|
1191
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1191
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
1192
1192
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1193
1193
|
// Accessibility
|
|
1194
1194
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1195
1195
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
1196
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1196
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
1197
1197
|
/** Base ID for error elements, used for aria-describedby */
|
|
1198
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1198
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
1199
1199
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
1200
1200
|
ariaInvalid = computed(() => {
|
|
1201
1201
|
const fieldState = this.field()();
|
|
1202
1202
|
return fieldState.invalid() && fieldState.touched();
|
|
1203
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1203
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
1204
1204
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
1205
1205
|
ariaRequired = computed(() => {
|
|
1206
1206
|
return this.field()().required?.() === true ? true : null;
|
|
1207
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1207
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
1208
1208
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
1209
1209
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
1210
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1211
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1210
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1211
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 }, meta: { classPropertyName: "meta", publicName: "meta", 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: `
|
|
1212
1212
|
@let f = field();
|
|
1213
1213
|
@let textareaId = key() + '-textarea';
|
|
1214
1214
|
|
|
@@ -1238,7 +1238,7 @@ class MatTextareaFieldComponent {
|
|
|
1238
1238
|
</mat-form-field>
|
|
1239
1239
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\n", "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: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { 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 });
|
|
1240
1240
|
}
|
|
1241
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1241
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatTextareaFieldComponent, decorators: [{
|
|
1242
1242
|
type: Component,
|
|
1243
1243
|
args: [{ selector: 'df-mat-textarea', imports: [MatFormField, MatLabel, MatInput, MatHint, FormField, MatError$1, DynamicTextPipe, AsyncPipe], template: `
|
|
1244
1244
|
@let f = field();
|
|
@@ -1284,20 +1284,20 @@ var matTextarea_component = /*#__PURE__*/Object.freeze({
|
|
|
1284
1284
|
class MatToggleFieldComponent {
|
|
1285
1285
|
materialConfig = inject(MATERIAL_CONFIG, { optional: true });
|
|
1286
1286
|
elementRef = inject((ElementRef));
|
|
1287
|
-
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
1288
|
-
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
1289
|
-
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1290
|
-
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
1291
|
-
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
|
|
1292
|
-
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
|
|
1293
|
-
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : []));
|
|
1294
|
-
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : []));
|
|
1295
|
-
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
|
|
1296
|
-
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
1297
|
-
effectiveDisableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, ...(ngDevMode ? [{ debugName: "effectiveDisableRipple" }] : []));
|
|
1287
|
+
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
1288
|
+
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
|
|
1289
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1290
|
+
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1291
|
+
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
1292
|
+
tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
1293
|
+
props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
1294
|
+
meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
1295
|
+
validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
|
|
1296
|
+
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
|
|
1297
|
+
effectiveDisableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, ...(ngDevMode ? [{ debugName: "effectiveDisableRipple" }] : /* istanbul ignore next */ []));
|
|
1298
1298
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
1299
1299
|
showErrors = shouldShowErrors(this.field);
|
|
1300
|
-
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
1300
|
+
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : /* istanbul ignore next */ []));
|
|
1301
1301
|
constructor() {
|
|
1302
1302
|
// Apply meta attributes to the internal toggle button
|
|
1303
1303
|
// Note: mat-slide-toggle uses <button role="switch"> instead of <input type="checkbox">
|
|
@@ -1309,18 +1309,18 @@ class MatToggleFieldComponent {
|
|
|
1309
1309
|
// Accessibility
|
|
1310
1310
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
1311
1311
|
/** Unique ID for the hint element, used for aria-describedby */
|
|
1312
|
-
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
|
|
1312
|
+
hintId = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
1313
1313
|
/** Base ID for error elements, used for aria-describedby */
|
|
1314
|
-
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
1314
|
+
errorId = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
1315
1315
|
/** aria-invalid: true when field is invalid AND touched, false otherwise */
|
|
1316
1316
|
ariaInvalid = computed(() => {
|
|
1317
1317
|
const fieldState = this.field()();
|
|
1318
1318
|
return fieldState.invalid() && fieldState.touched();
|
|
1319
|
-
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : []));
|
|
1319
|
+
}, ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
|
|
1320
1320
|
/** aria-required: true if field is required, null otherwise (to remove attribute) */
|
|
1321
1321
|
ariaRequired = computed(() => {
|
|
1322
1322
|
return this.field()().required?.() === true ? true : null;
|
|
1323
|
-
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
|
|
1323
|
+
}, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
|
|
1324
1324
|
/** aria-describedby: links to hint and error messages for screen readers */
|
|
1325
1325
|
ariaDescribedBy = createAriaDescribedBySignal(this.errorsToDisplay, this.errorId, this.hintId, () => !!this.props()?.hint);
|
|
1326
1326
|
/**
|
|
@@ -1359,8 +1359,8 @@ class MatToggleFieldComponent {
|
|
|
1359
1359
|
}
|
|
1360
1360
|
}
|
|
1361
1361
|
});
|
|
1362
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1363
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1362
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1363
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 }, meta: { classPropertyName: "meta", publicName: "meta", 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: `
|
|
1364
1364
|
@let f = field();
|
|
1365
1365
|
@let toggleId = key() + '-toggle';
|
|
1366
1366
|
|
|
@@ -1386,7 +1386,7 @@ class MatToggleFieldComponent {
|
|
|
1386
1386
|
}
|
|
1387
1387
|
`, isInline: true, styles: [":host{--df-field-gap: .5rem;--df-label-font-weight: 500;--df-label-color: inherit;--df-hint-color: rgba(0, 0, 0, .6);--df-hint-font-size: .875rem;--df-error-color: #f44336;--df-error-font-size: .875rem;display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight);color:var(--df-label-color)}.df-mat-hint{color:var(--df-hint-color);font-size:var(--df-hint-font-size)}.df-mat-error{color:var(--df-error-color);font-size:var(--df-error-font-size)}\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: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { 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 });
|
|
1388
1388
|
}
|
|
1389
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1389
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MatToggleFieldComponent, decorators: [{
|
|
1390
1390
|
type: Component,
|
|
1391
1391
|
args: [{ selector: 'df-mat-toggle', imports: [MatSlideToggle, FormField, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
1392
1392
|
@let f = field();
|
|
@@ -1524,16 +1524,19 @@ const MATERIAL_FIELD_TYPES = [
|
|
|
1524
1524
|
loadComponent: () => Promise.resolve().then(function () { return matInput_component; }),
|
|
1525
1525
|
mapper: valueFieldMapper,
|
|
1526
1526
|
propsToMeta: ['type'],
|
|
1527
|
+
scope: ['text-input', 'numeric'],
|
|
1527
1528
|
},
|
|
1528
1529
|
{
|
|
1529
1530
|
name: MatField.Select,
|
|
1530
1531
|
loadComponent: () => Promise.resolve().then(function () { return matSelect_component; }),
|
|
1531
1532
|
mapper: optionsFieldMapper,
|
|
1533
|
+
scope: 'single-select',
|
|
1532
1534
|
},
|
|
1533
1535
|
{
|
|
1534
1536
|
name: MatField.Checkbox,
|
|
1535
1537
|
loadComponent: () => Promise.resolve().then(function () { return matCheckbox_component; }),
|
|
1536
1538
|
mapper: checkboxFieldMapper,
|
|
1539
|
+
scope: 'boolean',
|
|
1537
1540
|
},
|
|
1538
1541
|
{
|
|
1539
1542
|
name: MatField.Button,
|
|
@@ -1600,31 +1603,37 @@ const MATERIAL_FIELD_TYPES = [
|
|
|
1600
1603
|
loadComponent: () => Promise.resolve().then(function () { return matTextarea_component; }),
|
|
1601
1604
|
mapper: valueFieldMapper,
|
|
1602
1605
|
propsToMeta: ['rows', 'cols'],
|
|
1606
|
+
scope: 'text-input',
|
|
1603
1607
|
},
|
|
1604
1608
|
{
|
|
1605
1609
|
name: MatField.Radio,
|
|
1606
1610
|
loadComponent: () => Promise.resolve().then(function () { return matRadio_component; }),
|
|
1607
1611
|
mapper: optionsFieldMapper,
|
|
1612
|
+
scope: 'single-select',
|
|
1608
1613
|
},
|
|
1609
1614
|
{
|
|
1610
1615
|
name: MatField.MultiCheckbox,
|
|
1611
1616
|
loadComponent: () => Promise.resolve().then(function () { return matMultiCheckbox_component; }),
|
|
1612
1617
|
mapper: optionsFieldMapper,
|
|
1618
|
+
scope: 'multi-select',
|
|
1613
1619
|
},
|
|
1614
1620
|
{
|
|
1615
1621
|
name: MatField.Datepicker,
|
|
1616
1622
|
loadComponent: () => Promise.resolve().then(function () { return matDatepicker_component; }),
|
|
1617
1623
|
mapper: datepickerFieldMapper,
|
|
1624
|
+
scope: 'date',
|
|
1618
1625
|
},
|
|
1619
1626
|
{
|
|
1620
1627
|
name: MatField.Slider,
|
|
1621
1628
|
loadComponent: () => Promise.resolve().then(function () { return matSlider_component; }),
|
|
1622
1629
|
mapper: valueFieldMapper,
|
|
1630
|
+
scope: 'numeric',
|
|
1623
1631
|
},
|
|
1624
1632
|
{
|
|
1625
1633
|
name: MatField.Toggle,
|
|
1626
1634
|
loadComponent: () => Promise.resolve().then(function () { return matToggle_component; }),
|
|
1627
1635
|
mapper: checkboxFieldMapper,
|
|
1636
|
+
scope: 'boolean',
|
|
1628
1637
|
},
|
|
1629
1638
|
];
|
|
1630
1639
|
|