@ng-forge/dynamic-forms-material 0.1.3 → 0.2.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.
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject, input, ElementRef, computed, ChangeDetectionStrategy, Component, viewChild,
|
|
2
|
+
import { InjectionToken, inject, input, ElementRef, computed, ChangeDetectionStrategy, Component, viewChild, afterRenderEffect, linkedSignal, isSignal } from '@angular/core';
|
|
3
3
|
import { Field } from '@angular/forms/signals';
|
|
4
4
|
import { MatCheckbox } from '@angular/material/checkbox';
|
|
5
|
-
import { DynamicTextPipe, EventBus, ARRAY_CONTEXT, resolveTokens, buildBaseInputs, FIELD_SIGNAL_CONTEXT, resolveSubmitButtonDisabled, resolveNextButtonDisabled, NextPageEvent, PreviousPageEvent,
|
|
6
|
-
import { createResolvedErrorsSignal, shouldShowErrors, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, datepickerFieldMapper } from '@ng-forge/dynamic-forms/integration';
|
|
5
|
+
import { DynamicTextPipe, EventBus, ARRAY_CONTEXT, resolveTokens, buildBaseInputs, FIELD_SIGNAL_CONTEXT, resolveSubmitButtonDisabled, resolveNextButtonDisabled, NextPageEvent, PreviousPageEvent, DynamicFormLogger, AddArrayItemEvent, RemoveArrayItemEvent } from '@ng-forge/dynamic-forms';
|
|
6
|
+
import { createResolvedErrorsSignal, shouldShowErrors, isEqual, ValueInArrayPipe, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, datepickerFieldMapper } from '@ng-forge/dynamic-forms/integration';
|
|
7
7
|
import { MatError, MatInput, MatHint } from '@angular/material/input';
|
|
8
8
|
import { AsyncPipe } from '@angular/common';
|
|
9
9
|
import { explicitEffect } from 'ngxtension/explicit-effect';
|
|
@@ -107,8 +107,8 @@ class MatCheckboxFieldComponent {
|
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
109
|
});
|
|
110
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
111
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
110
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
111
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }, 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: `
|
|
112
112
|
@let f = field();
|
|
113
113
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
114
114
|
|
|
@@ -134,7 +134,7 @@ class MatCheckboxFieldComponent {
|
|
|
134
134
|
}
|
|
135
135
|
`, isInline: true, styles: [":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
136
136
|
}
|
|
137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
137
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatCheckboxFieldComponent, decorators: [{
|
|
138
138
|
type: Component,
|
|
139
139
|
args: [{ selector: 'df-mat-checkbox', imports: [MatCheckbox, Field, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
140
140
|
@let f = field();
|
|
@@ -220,8 +220,8 @@ class MatDatepickerFieldComponent {
|
|
|
220
220
|
});
|
|
221
221
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
222
222
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
223
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
224
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
223
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
224
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, providers: [provideNativeDateAdapter()], ngImport: i0, template: `
|
|
225
225
|
@let f = field();
|
|
226
226
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
227
227
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -256,7 +256,7 @@ class MatDatepickerFieldComponent {
|
|
|
256
256
|
</mat-form-field>
|
|
257
257
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
258
258
|
}
|
|
259
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
259
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatDatepickerFieldComponent, decorators: [{
|
|
260
260
|
type: Component,
|
|
261
261
|
args: [{ selector: 'df-mat-datepicker', imports: [
|
|
262
262
|
MatFormField,
|
|
@@ -340,17 +340,23 @@ class MatInputFieldComponent {
|
|
|
340
340
|
* Note: We cannot use [readonly] or [attr.readonly] bindings because Angular throws
|
|
341
341
|
* NG8022: "Binding to '[readonly]' is not allowed on nodes using the '[field]' directive"
|
|
342
342
|
*
|
|
343
|
+
* Uses afterRenderEffect to ensure DOM is ready before manipulating attributes.
|
|
344
|
+
*
|
|
343
345
|
* @see https://github.com/angular/angular/issues/65897
|
|
344
346
|
*/
|
|
345
|
-
syncReadonlyToDom =
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
347
|
+
syncReadonlyToDom = afterRenderEffect({
|
|
348
|
+
write: () => {
|
|
349
|
+
const inputRef = this.inputRef();
|
|
350
|
+
const isReadonly = this.isReadonly();
|
|
351
|
+
if (inputRef?.nativeElement) {
|
|
352
|
+
if (isReadonly) {
|
|
353
|
+
inputRef.nativeElement.setAttribute('readonly', '');
|
|
354
|
+
}
|
|
355
|
+
else {
|
|
356
|
+
inputRef.nativeElement.removeAttribute('readonly');
|
|
357
|
+
}
|
|
352
358
|
}
|
|
353
|
-
}
|
|
359
|
+
},
|
|
354
360
|
});
|
|
355
361
|
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
356
362
|
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
@@ -361,6 +367,8 @@ class MatInputFieldComponent {
|
|
|
361
367
|
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
362
368
|
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : []));
|
|
363
369
|
effectiveSubscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizing" }] : []));
|
|
370
|
+
/** Computed input type - defaults to 'text' if not specified in props */
|
|
371
|
+
inputType = computed(() => this.props()?.type ?? 'text', ...(ngDevMode ? [{ debugName: "inputType" }] : []));
|
|
364
372
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
365
373
|
showErrors = shouldShowErrors(this.field);
|
|
366
374
|
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
@@ -392,8 +400,8 @@ class MatInputFieldComponent {
|
|
|
392
400
|
});
|
|
393
401
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
394
402
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
395
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
396
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
403
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
404
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }, 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: `
|
|
397
405
|
@let f = field();
|
|
398
406
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
399
407
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -402,86 +410,17 @@ class MatInputFieldComponent {
|
|
|
402
410
|
@if (label()) {
|
|
403
411
|
<mat-label>{{ label() | dynamicText | async }}</mat-label>
|
|
404
412
|
}
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
417
|
-
/>
|
|
418
|
-
}
|
|
419
|
-
@case ('password') {
|
|
420
|
-
<input
|
|
421
|
-
#inputRef
|
|
422
|
-
matInput
|
|
423
|
-
type="password"
|
|
424
|
-
[field]="f"
|
|
425
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
426
|
-
[attr.tabindex]="tabIndex()"
|
|
427
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
428
|
-
[attr.aria-required]="ariaRequired"
|
|
429
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
430
|
-
/>
|
|
431
|
-
}
|
|
432
|
-
@case ('number') {
|
|
433
|
-
<input
|
|
434
|
-
#inputRef
|
|
435
|
-
matInput
|
|
436
|
-
type="number"
|
|
437
|
-
[field]="f"
|
|
438
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
439
|
-
[attr.tabindex]="tabIndex()"
|
|
440
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
441
|
-
[attr.aria-required]="ariaRequired"
|
|
442
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
443
|
-
/>
|
|
444
|
-
}
|
|
445
|
-
@case ('tel') {
|
|
446
|
-
<input
|
|
447
|
-
#inputRef
|
|
448
|
-
matInput
|
|
449
|
-
type="tel"
|
|
450
|
-
[field]="f"
|
|
451
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
452
|
-
[attr.tabindex]="tabIndex()"
|
|
453
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
454
|
-
[attr.aria-required]="ariaRequired"
|
|
455
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
456
|
-
/>
|
|
457
|
-
}
|
|
458
|
-
@case ('url') {
|
|
459
|
-
<input
|
|
460
|
-
#inputRef
|
|
461
|
-
matInput
|
|
462
|
-
type="url"
|
|
463
|
-
[field]="f"
|
|
464
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
465
|
-
[attr.tabindex]="tabIndex()"
|
|
466
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
467
|
-
[attr.aria-required]="ariaRequired"
|
|
468
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
469
|
-
/>
|
|
470
|
-
}
|
|
471
|
-
@default {
|
|
472
|
-
<input
|
|
473
|
-
#inputRef
|
|
474
|
-
matInput
|
|
475
|
-
type="text"
|
|
476
|
-
[field]="f"
|
|
477
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
478
|
-
[attr.tabindex]="tabIndex()"
|
|
479
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
480
|
-
[attr.aria-required]="ariaRequired"
|
|
481
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
482
|
-
/>
|
|
483
|
-
}
|
|
484
|
-
}
|
|
413
|
+
<input
|
|
414
|
+
#inputRef
|
|
415
|
+
matInput
|
|
416
|
+
[type]="inputType()"
|
|
417
|
+
[field]="f"
|
|
418
|
+
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
419
|
+
[attr.tabindex]="tabIndex()"
|
|
420
|
+
[attr.aria-invalid]="ariaInvalid"
|
|
421
|
+
[attr.aria-required]="ariaRequired"
|
|
422
|
+
[attr.aria-describedby]="ariaDescribedBy"
|
|
423
|
+
/>
|
|
485
424
|
@if (props()?.hint; as hint) {
|
|
486
425
|
<mat-hint [id]="hintId()">{{ hint | dynamicText | async }}</mat-hint>
|
|
487
426
|
}
|
|
@@ -491,7 +430,7 @@ class MatInputFieldComponent {
|
|
|
491
430
|
</mat-form-field>
|
|
492
431
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
493
432
|
}
|
|
494
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
433
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatInputFieldComponent, decorators: [{
|
|
495
434
|
type: Component,
|
|
496
435
|
args: [{ selector: 'df-mat-input', imports: [MatFormField, MatLabel, MatInput, MatHint, Field, MatError$1, DynamicTextPipe, AsyncPipe], template: `
|
|
497
436
|
@let f = field();
|
|
@@ -502,86 +441,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
|
|
|
502
441
|
@if (label()) {
|
|
503
442
|
<mat-label>{{ label() | dynamicText | async }}</mat-label>
|
|
504
443
|
}
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
517
|
-
/>
|
|
518
|
-
}
|
|
519
|
-
@case ('password') {
|
|
520
|
-
<input
|
|
521
|
-
#inputRef
|
|
522
|
-
matInput
|
|
523
|
-
type="password"
|
|
524
|
-
[field]="f"
|
|
525
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
526
|
-
[attr.tabindex]="tabIndex()"
|
|
527
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
528
|
-
[attr.aria-required]="ariaRequired"
|
|
529
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
530
|
-
/>
|
|
531
|
-
}
|
|
532
|
-
@case ('number') {
|
|
533
|
-
<input
|
|
534
|
-
#inputRef
|
|
535
|
-
matInput
|
|
536
|
-
type="number"
|
|
537
|
-
[field]="f"
|
|
538
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
539
|
-
[attr.tabindex]="tabIndex()"
|
|
540
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
541
|
-
[attr.aria-required]="ariaRequired"
|
|
542
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
543
|
-
/>
|
|
544
|
-
}
|
|
545
|
-
@case ('tel') {
|
|
546
|
-
<input
|
|
547
|
-
#inputRef
|
|
548
|
-
matInput
|
|
549
|
-
type="tel"
|
|
550
|
-
[field]="f"
|
|
551
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
552
|
-
[attr.tabindex]="tabIndex()"
|
|
553
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
554
|
-
[attr.aria-required]="ariaRequired"
|
|
555
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
556
|
-
/>
|
|
557
|
-
}
|
|
558
|
-
@case ('url') {
|
|
559
|
-
<input
|
|
560
|
-
#inputRef
|
|
561
|
-
matInput
|
|
562
|
-
type="url"
|
|
563
|
-
[field]="f"
|
|
564
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
565
|
-
[attr.tabindex]="tabIndex()"
|
|
566
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
567
|
-
[attr.aria-required]="ariaRequired"
|
|
568
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
569
|
-
/>
|
|
570
|
-
}
|
|
571
|
-
@default {
|
|
572
|
-
<input
|
|
573
|
-
#inputRef
|
|
574
|
-
matInput
|
|
575
|
-
type="text"
|
|
576
|
-
[field]="f"
|
|
577
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
578
|
-
[attr.tabindex]="tabIndex()"
|
|
579
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
580
|
-
[attr.aria-required]="ariaRequired"
|
|
581
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
582
|
-
/>
|
|
583
|
-
}
|
|
584
|
-
}
|
|
444
|
+
<input
|
|
445
|
+
#inputRef
|
|
446
|
+
matInput
|
|
447
|
+
[type]="inputType()"
|
|
448
|
+
[field]="f"
|
|
449
|
+
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
450
|
+
[attr.tabindex]="tabIndex()"
|
|
451
|
+
[attr.aria-invalid]="ariaInvalid"
|
|
452
|
+
[attr.aria-required]="ariaRequired"
|
|
453
|
+
[attr.aria-describedby]="ariaDescribedBy"
|
|
454
|
+
/>
|
|
585
455
|
@if (props()?.hint; as hint) {
|
|
586
456
|
<mat-hint [id]="hintId()">{{ hint | dynamicText | async }}</mat-hint>
|
|
587
457
|
}
|
|
@@ -602,49 +472,6 @@ var matInput_component = /*#__PURE__*/Object.freeze({
|
|
|
602
472
|
default: MatInputFieldComponent
|
|
603
473
|
});
|
|
604
474
|
|
|
605
|
-
class ValueInArrayPipe {
|
|
606
|
-
transform(element, array) {
|
|
607
|
-
return array?.includes(element) ?? false;
|
|
608
|
-
}
|
|
609
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ValueInArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
610
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: ValueInArrayPipe, isStandalone: true, name: "inArray" });
|
|
611
|
-
}
|
|
612
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ValueInArrayPipe, decorators: [{
|
|
613
|
-
type: Pipe,
|
|
614
|
-
args: [{
|
|
615
|
-
pure: true,
|
|
616
|
-
name: 'inArray',
|
|
617
|
-
}]
|
|
618
|
-
}] });
|
|
619
|
-
|
|
620
|
-
/**
|
|
621
|
-
* Performs a deep equality comparison between two values
|
|
622
|
-
*/
|
|
623
|
-
function isEqual(a, b) {
|
|
624
|
-
if (a === b)
|
|
625
|
-
return true;
|
|
626
|
-
if (a == null || b == null)
|
|
627
|
-
return false;
|
|
628
|
-
if (typeof a !== typeof b)
|
|
629
|
-
return false;
|
|
630
|
-
if (a instanceof Date && b instanceof Date) {
|
|
631
|
-
return a.getTime() === b.getTime();
|
|
632
|
-
}
|
|
633
|
-
if (Array.isArray(a) && Array.isArray(b)) {
|
|
634
|
-
if (a.length !== b.length)
|
|
635
|
-
return false;
|
|
636
|
-
return a.every((item, index) => isEqual(item, b[index]));
|
|
637
|
-
}
|
|
638
|
-
if (typeof a === 'object' && typeof b === 'object') {
|
|
639
|
-
const keysA = Object.keys(a);
|
|
640
|
-
const keysB = Object.keys(b);
|
|
641
|
-
if (keysA.length !== keysB.length)
|
|
642
|
-
return false;
|
|
643
|
-
return keysA.every((key) => keysB.includes(key) && isEqual(a[key], b[key]));
|
|
644
|
-
}
|
|
645
|
-
return Object.is(a, b);
|
|
646
|
-
}
|
|
647
|
-
|
|
648
475
|
class MatMultiCheckboxFieldComponent {
|
|
649
476
|
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
650
477
|
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
@@ -717,8 +544,8 @@ class MatMultiCheckboxFieldComponent {
|
|
|
717
544
|
});
|
|
718
545
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
719
546
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
720
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
721
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
547
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
548
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className() || \"\"", "id": "`${key()}`", "attr.data-testid": "key()", "attr.hidden": "field()().hidden() || null" } }, providers: [ValueInArrayPipe], ngImport: i0, template: `
|
|
722
549
|
@let f = field();
|
|
723
550
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
724
551
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -755,7 +582,7 @@ class MatMultiCheckboxFieldComponent {
|
|
|
755
582
|
}
|
|
756
583
|
`, isInline: true, styles: [":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: ValueInArrayPipe, name: "inArray" }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
757
584
|
}
|
|
758
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
585
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatMultiCheckboxFieldComponent, decorators: [{
|
|
759
586
|
type: Component,
|
|
760
587
|
args: [{ selector: 'df-mat-multi-checkbox', imports: [MatCheckbox, ValueInArrayPipe, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
761
588
|
@let f = field();
|
|
@@ -847,8 +674,8 @@ class MatRadioFieldComponent {
|
|
|
847
674
|
});
|
|
848
675
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
849
676
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
850
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
851
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
677
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
678
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }, 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: `
|
|
852
679
|
@let f = field();
|
|
853
680
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
854
681
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -883,7 +710,7 @@ class MatRadioFieldComponent {
|
|
|
883
710
|
}
|
|
884
711
|
`, isInline: true, styles: [":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
885
712
|
}
|
|
886
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
713
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatRadioFieldComponent, decorators: [{
|
|
887
714
|
type: Component,
|
|
888
715
|
args: [{ selector: 'df-mat-radio', imports: [MatRadioGroup, MatRadioButton, Field, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
889
716
|
@let f = field();
|
|
@@ -977,8 +804,8 @@ class MatSelectFieldComponent {
|
|
|
977
804
|
});
|
|
978
805
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
979
806
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
980
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
981
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
807
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
808
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }, 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: `
|
|
982
809
|
@let f = field();
|
|
983
810
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
984
811
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1013,7 +840,7 @@ class MatSelectFieldComponent {
|
|
|
1013
840
|
</mat-form-field>
|
|
1014
841
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1015
842
|
}
|
|
1016
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
843
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatSelectFieldComponent, decorators: [{
|
|
1017
844
|
type: Component,
|
|
1018
845
|
args: [{ selector: 'df-mat-select', imports: [MatFormField, MatLabel, MatSelect, MatOption, MatHint, Field, MatError$1, DynamicTextPipe, AsyncPipe], template: `
|
|
1019
846
|
@let f = field();
|
|
@@ -1098,8 +925,8 @@ class MatSliderFieldComponent {
|
|
|
1098
925
|
});
|
|
1099
926
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
1100
927
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1101
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1102
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
928
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
929
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }, 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: `
|
|
1103
930
|
@let f = field();
|
|
1104
931
|
@let ariaInvalid = this.ariaInvalid();
|
|
1105
932
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1134,7 +961,7 @@ class MatSliderFieldComponent {
|
|
|
1134
961
|
}
|
|
1135
962
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.slider-container{width:100%}\n"], dependencies: [{ kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1136
963
|
}
|
|
1137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
964
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatSliderFieldComponent, decorators: [{
|
|
1138
965
|
type: Component,
|
|
1139
966
|
args: [{ selector: 'df-mat-slider', imports: [MatSlider, MatSliderThumb, MatError, DynamicTextPipe, AsyncPipe, Field], template: `
|
|
1140
967
|
@let f = field();
|
|
@@ -1238,8 +1065,8 @@ class MatButtonFieldComponent {
|
|
|
1238
1065
|
this.eventBus.dispatch(event);
|
|
1239
1066
|
}
|
|
1240
1067
|
}
|
|
1241
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1242
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.
|
|
1068
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1069
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.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()" } }, ngImport: i0, template: `
|
|
1243
1070
|
<button
|
|
1244
1071
|
mat-raised-button
|
|
1245
1072
|
[type]="buttonType()"
|
|
@@ -1252,7 +1079,7 @@ class MatButtonFieldComponent {
|
|
|
1252
1079
|
</button>
|
|
1253
1080
|
`, isInline: true, styles: [":host{display:block}button{min-width:fit-content}\n"], dependencies: [{ kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1254
1081
|
}
|
|
1255
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1082
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatButtonFieldComponent, decorators: [{
|
|
1256
1083
|
type: Component,
|
|
1257
1084
|
args: [{ selector: 'df-mat-button', imports: [MatButton, DynamicTextPipe, AsyncPipe], host: {
|
|
1258
1085
|
'[id]': '`${key()}`',
|
|
@@ -1355,8 +1182,8 @@ class MatTextareaFieldComponent {
|
|
|
1355
1182
|
});
|
|
1356
1183
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
1357
1184
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1358
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1359
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1185
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1186
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }, 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: `
|
|
1360
1187
|
@let f = field();
|
|
1361
1188
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1362
1189
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1389,7 +1216,7 @@ class MatTextareaFieldComponent {
|
|
|
1389
1216
|
</mat-form-field>
|
|
1390
1217
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1391
1218
|
}
|
|
1392
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1219
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatTextareaFieldComponent, decorators: [{
|
|
1393
1220
|
type: Component,
|
|
1394
1221
|
args: [{ selector: 'df-mat-textarea', imports: [MatFormField, MatLabel, MatInput, MatHint, Field, MatError$1, DynamicTextPipe, AsyncPipe], template: `
|
|
1395
1222
|
@let f = field();
|
|
@@ -1478,8 +1305,8 @@ class MatToggleFieldComponent {
|
|
|
1478
1305
|
});
|
|
1479
1306
|
return ids.join(' ');
|
|
1480
1307
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1481
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1482
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
1308
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1309
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }, 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: `
|
|
1483
1310
|
@let f = field();
|
|
1484
1311
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
1485
1312
|
|
|
@@ -1505,7 +1332,7 @@ class MatToggleFieldComponent {
|
|
|
1505
1332
|
}
|
|
1506
1333
|
`, isInline: true, styles: [":host{display:block}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1507
1334
|
}
|
|
1508
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1335
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatToggleFieldComponent, decorators: [{
|
|
1509
1336
|
type: Component,
|
|
1510
1337
|
args: [{ selector: 'df-mat-toggle', imports: [MatSlideToggle, Field, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
1511
1338
|
@let f = field();
|
|
@@ -1723,7 +1550,7 @@ function addArrayItemButtonFieldMapper(fieldDef) {
|
|
|
1723
1550
|
// Try to get array context (available when inside an array)
|
|
1724
1551
|
// Use optional injection so it doesn't fail when outside an array
|
|
1725
1552
|
const arrayContext = inject(ARRAY_CONTEXT, { optional: true });
|
|
1726
|
-
const logger = inject(
|
|
1553
|
+
const logger = inject(DynamicFormLogger);
|
|
1727
1554
|
// Determine the target array key
|
|
1728
1555
|
// Priority: explicit arrayKey from fieldDef > arrayKey from context
|
|
1729
1556
|
const targetArrayKey = fieldDef.arrayKey ?? arrayContext?.arrayKey;
|
|
@@ -1779,7 +1606,7 @@ function removeArrayItemButtonFieldMapper(fieldDef) {
|
|
|
1779
1606
|
// Try to get array context (available when inside an array)
|
|
1780
1607
|
// Use optional injection so it doesn't fail when outside an array
|
|
1781
1608
|
const arrayContext = inject(ARRAY_CONTEXT, { optional: true });
|
|
1782
|
-
const logger = inject(
|
|
1609
|
+
const logger = inject(DynamicFormLogger);
|
|
1783
1610
|
// Determine the target array key
|
|
1784
1611
|
// Priority: explicit arrayKey from fieldDef > arrayKey from context
|
|
1785
1612
|
const targetArrayKey = fieldDef.arrayKey ?? arrayContext?.arrayKey;
|