@ng-forge/dynamic-forms-material 0.1.2 → 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,8 +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 {
|
|
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';
|
|
6
7
|
import { MatError, MatInput, MatHint } from '@angular/material/input';
|
|
7
8
|
import { AsyncPipe } from '@angular/common';
|
|
8
9
|
import { explicitEffect } from 'ngxtension/explicit-effect';
|
|
@@ -106,8 +107,8 @@ class MatCheckboxFieldComponent {
|
|
|
106
107
|
}
|
|
107
108
|
}
|
|
108
109
|
});
|
|
109
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
110
|
-
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: `
|
|
111
112
|
@let f = field();
|
|
112
113
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
113
114
|
|
|
@@ -133,7 +134,7 @@ class MatCheckboxFieldComponent {
|
|
|
133
134
|
}
|
|
134
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 });
|
|
135
136
|
}
|
|
136
|
-
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: [{
|
|
137
138
|
type: Component,
|
|
138
139
|
args: [{ selector: 'df-mat-checkbox', imports: [MatCheckbox, Field, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
139
140
|
@let f = field();
|
|
@@ -219,8 +220,8 @@ class MatDatepickerFieldComponent {
|
|
|
219
220
|
});
|
|
220
221
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
221
222
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
222
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
223
|
-
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: `
|
|
224
225
|
@let f = field();
|
|
225
226
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
226
227
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -255,7 +256,7 @@ class MatDatepickerFieldComponent {
|
|
|
255
256
|
</mat-form-field>
|
|
256
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 });
|
|
257
258
|
}
|
|
258
|
-
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: [{
|
|
259
260
|
type: Component,
|
|
260
261
|
args: [{ selector: 'df-mat-datepicker', imports: [
|
|
261
262
|
MatFormField,
|
|
@@ -339,17 +340,23 @@ class MatInputFieldComponent {
|
|
|
339
340
|
* Note: We cannot use [readonly] or [attr.readonly] bindings because Angular throws
|
|
340
341
|
* NG8022: "Binding to '[readonly]' is not allowed on nodes using the '[field]' directive"
|
|
341
342
|
*
|
|
343
|
+
* Uses afterRenderEffect to ensure DOM is ready before manipulating attributes.
|
|
344
|
+
*
|
|
342
345
|
* @see https://github.com/angular/angular/issues/65897
|
|
343
346
|
*/
|
|
344
|
-
syncReadonlyToDom =
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
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
|
+
}
|
|
351
358
|
}
|
|
352
|
-
}
|
|
359
|
+
},
|
|
353
360
|
});
|
|
354
361
|
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
355
362
|
placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
|
|
@@ -360,6 +367,8 @@ class MatInputFieldComponent {
|
|
|
360
367
|
defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
|
|
361
368
|
effectiveAppearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearance" }] : []));
|
|
362
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" }] : []));
|
|
363
372
|
resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
|
|
364
373
|
showErrors = shouldShowErrors(this.field);
|
|
365
374
|
errorsToDisplay = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplay" }] : []));
|
|
@@ -391,8 +400,8 @@ class MatInputFieldComponent {
|
|
|
391
400
|
});
|
|
392
401
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
393
402
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
394
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
395
|
-
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: `
|
|
396
405
|
@let f = field();
|
|
397
406
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
398
407
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -401,86 +410,17 @@ class MatInputFieldComponent {
|
|
|
401
410
|
@if (label()) {
|
|
402
411
|
<mat-label>{{ label() | dynamicText | async }}</mat-label>
|
|
403
412
|
}
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
416
|
-
/>
|
|
417
|
-
}
|
|
418
|
-
@case ('password') {
|
|
419
|
-
<input
|
|
420
|
-
#inputRef
|
|
421
|
-
matInput
|
|
422
|
-
type="password"
|
|
423
|
-
[field]="f"
|
|
424
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
425
|
-
[attr.tabindex]="tabIndex()"
|
|
426
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
427
|
-
[attr.aria-required]="ariaRequired"
|
|
428
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
429
|
-
/>
|
|
430
|
-
}
|
|
431
|
-
@case ('number') {
|
|
432
|
-
<input
|
|
433
|
-
#inputRef
|
|
434
|
-
matInput
|
|
435
|
-
type="number"
|
|
436
|
-
[field]="f"
|
|
437
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
438
|
-
[attr.tabindex]="tabIndex()"
|
|
439
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
440
|
-
[attr.aria-required]="ariaRequired"
|
|
441
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
442
|
-
/>
|
|
443
|
-
}
|
|
444
|
-
@case ('tel') {
|
|
445
|
-
<input
|
|
446
|
-
#inputRef
|
|
447
|
-
matInput
|
|
448
|
-
type="tel"
|
|
449
|
-
[field]="f"
|
|
450
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
451
|
-
[attr.tabindex]="tabIndex()"
|
|
452
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
453
|
-
[attr.aria-required]="ariaRequired"
|
|
454
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
455
|
-
/>
|
|
456
|
-
}
|
|
457
|
-
@case ('url') {
|
|
458
|
-
<input
|
|
459
|
-
#inputRef
|
|
460
|
-
matInput
|
|
461
|
-
type="url"
|
|
462
|
-
[field]="f"
|
|
463
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
464
|
-
[attr.tabindex]="tabIndex()"
|
|
465
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
466
|
-
[attr.aria-required]="ariaRequired"
|
|
467
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
468
|
-
/>
|
|
469
|
-
}
|
|
470
|
-
@default {
|
|
471
|
-
<input
|
|
472
|
-
#inputRef
|
|
473
|
-
matInput
|
|
474
|
-
type="text"
|
|
475
|
-
[field]="f"
|
|
476
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
477
|
-
[attr.tabindex]="tabIndex()"
|
|
478
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
479
|
-
[attr.aria-required]="ariaRequired"
|
|
480
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
481
|
-
/>
|
|
482
|
-
}
|
|
483
|
-
}
|
|
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
|
+
/>
|
|
484
424
|
@if (props()?.hint; as hint) {
|
|
485
425
|
<mat-hint [id]="hintId()">{{ hint | dynamicText | async }}</mat-hint>
|
|
486
426
|
}
|
|
@@ -490,7 +430,7 @@ class MatInputFieldComponent {
|
|
|
490
430
|
</mat-form-field>
|
|
491
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 });
|
|
492
432
|
}
|
|
493
|
-
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: [{
|
|
494
434
|
type: Component,
|
|
495
435
|
args: [{ selector: 'df-mat-input', imports: [MatFormField, MatLabel, MatInput, MatHint, Field, MatError$1, DynamicTextPipe, AsyncPipe], template: `
|
|
496
436
|
@let f = field();
|
|
@@ -501,86 +441,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
|
|
|
501
441
|
@if (label()) {
|
|
502
442
|
<mat-label>{{ label() | dynamicText | async }}</mat-label>
|
|
503
443
|
}
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
516
|
-
/>
|
|
517
|
-
}
|
|
518
|
-
@case ('password') {
|
|
519
|
-
<input
|
|
520
|
-
#inputRef
|
|
521
|
-
matInput
|
|
522
|
-
type="password"
|
|
523
|
-
[field]="f"
|
|
524
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
525
|
-
[attr.tabindex]="tabIndex()"
|
|
526
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
527
|
-
[attr.aria-required]="ariaRequired"
|
|
528
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
529
|
-
/>
|
|
530
|
-
}
|
|
531
|
-
@case ('number') {
|
|
532
|
-
<input
|
|
533
|
-
#inputRef
|
|
534
|
-
matInput
|
|
535
|
-
type="number"
|
|
536
|
-
[field]="f"
|
|
537
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
538
|
-
[attr.tabindex]="tabIndex()"
|
|
539
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
540
|
-
[attr.aria-required]="ariaRequired"
|
|
541
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
542
|
-
/>
|
|
543
|
-
}
|
|
544
|
-
@case ('tel') {
|
|
545
|
-
<input
|
|
546
|
-
#inputRef
|
|
547
|
-
matInput
|
|
548
|
-
type="tel"
|
|
549
|
-
[field]="f"
|
|
550
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
551
|
-
[attr.tabindex]="tabIndex()"
|
|
552
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
553
|
-
[attr.aria-required]="ariaRequired"
|
|
554
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
555
|
-
/>
|
|
556
|
-
}
|
|
557
|
-
@case ('url') {
|
|
558
|
-
<input
|
|
559
|
-
#inputRef
|
|
560
|
-
matInput
|
|
561
|
-
type="url"
|
|
562
|
-
[field]="f"
|
|
563
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
564
|
-
[attr.tabindex]="tabIndex()"
|
|
565
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
566
|
-
[attr.aria-required]="ariaRequired"
|
|
567
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
568
|
-
/>
|
|
569
|
-
}
|
|
570
|
-
@default {
|
|
571
|
-
<input
|
|
572
|
-
#inputRef
|
|
573
|
-
matInput
|
|
574
|
-
type="text"
|
|
575
|
-
[field]="f"
|
|
576
|
-
[placeholder]="(placeholder() | dynamicText | async) ?? ''"
|
|
577
|
-
[attr.tabindex]="tabIndex()"
|
|
578
|
-
[attr.aria-invalid]="ariaInvalid"
|
|
579
|
-
[attr.aria-required]="ariaRequired"
|
|
580
|
-
[attr.aria-describedby]="ariaDescribedBy"
|
|
581
|
-
/>
|
|
582
|
-
}
|
|
583
|
-
}
|
|
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
|
+
/>
|
|
584
455
|
@if (props()?.hint; as hint) {
|
|
585
456
|
<mat-hint [id]="hintId()">{{ hint | dynamicText | async }}</mat-hint>
|
|
586
457
|
}
|
|
@@ -601,49 +472,6 @@ var matInput_component = /*#__PURE__*/Object.freeze({
|
|
|
601
472
|
default: MatInputFieldComponent
|
|
602
473
|
});
|
|
603
474
|
|
|
604
|
-
class ValueInArrayPipe {
|
|
605
|
-
transform(element, array) {
|
|
606
|
-
return array?.includes(element) ?? false;
|
|
607
|
-
}
|
|
608
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ValueInArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
609
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: ValueInArrayPipe, isStandalone: true, name: "inArray" });
|
|
610
|
-
}
|
|
611
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ValueInArrayPipe, decorators: [{
|
|
612
|
-
type: Pipe,
|
|
613
|
-
args: [{
|
|
614
|
-
pure: true,
|
|
615
|
-
name: 'inArray',
|
|
616
|
-
}]
|
|
617
|
-
}] });
|
|
618
|
-
|
|
619
|
-
/**
|
|
620
|
-
* Performs a deep equality comparison between two values
|
|
621
|
-
*/
|
|
622
|
-
function isEqual(a, b) {
|
|
623
|
-
if (a === b)
|
|
624
|
-
return true;
|
|
625
|
-
if (a == null || b == null)
|
|
626
|
-
return false;
|
|
627
|
-
if (typeof a !== typeof b)
|
|
628
|
-
return false;
|
|
629
|
-
if (a instanceof Date && b instanceof Date) {
|
|
630
|
-
return a.getTime() === b.getTime();
|
|
631
|
-
}
|
|
632
|
-
if (Array.isArray(a) && Array.isArray(b)) {
|
|
633
|
-
if (a.length !== b.length)
|
|
634
|
-
return false;
|
|
635
|
-
return a.every((item, index) => isEqual(item, b[index]));
|
|
636
|
-
}
|
|
637
|
-
if (typeof a === 'object' && typeof b === 'object') {
|
|
638
|
-
const keysA = Object.keys(a);
|
|
639
|
-
const keysB = Object.keys(b);
|
|
640
|
-
if (keysA.length !== keysB.length)
|
|
641
|
-
return false;
|
|
642
|
-
return keysA.every((key) => keysB.includes(key) && isEqual(a[key], b[key]));
|
|
643
|
-
}
|
|
644
|
-
return Object.is(a, b);
|
|
645
|
-
}
|
|
646
|
-
|
|
647
475
|
class MatMultiCheckboxFieldComponent {
|
|
648
476
|
field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
|
|
649
477
|
key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
@@ -716,8 +544,8 @@ class MatMultiCheckboxFieldComponent {
|
|
|
716
544
|
});
|
|
717
545
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
718
546
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
719
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
720
|
-
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: `
|
|
721
549
|
@let f = field();
|
|
722
550
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
723
551
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -754,7 +582,7 @@ class MatMultiCheckboxFieldComponent {
|
|
|
754
582
|
}
|
|
755
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 });
|
|
756
584
|
}
|
|
757
|
-
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: [{
|
|
758
586
|
type: Component,
|
|
759
587
|
args: [{ selector: 'df-mat-multi-checkbox', imports: [MatCheckbox, ValueInArrayPipe, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
760
588
|
@let f = field();
|
|
@@ -846,8 +674,8 @@ class MatRadioFieldComponent {
|
|
|
846
674
|
});
|
|
847
675
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
848
676
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
849
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
850
|
-
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: `
|
|
851
679
|
@let f = field();
|
|
852
680
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
853
681
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -882,7 +710,7 @@ class MatRadioFieldComponent {
|
|
|
882
710
|
}
|
|
883
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 });
|
|
884
712
|
}
|
|
885
|
-
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: [{
|
|
886
714
|
type: Component,
|
|
887
715
|
args: [{ selector: 'df-mat-radio', imports: [MatRadioGroup, MatRadioButton, Field, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
888
716
|
@let f = field();
|
|
@@ -976,8 +804,8 @@ class MatSelectFieldComponent {
|
|
|
976
804
|
});
|
|
977
805
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
978
806
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
979
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
980
|
-
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: `
|
|
981
809
|
@let f = field();
|
|
982
810
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
983
811
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1012,7 +840,7 @@ class MatSelectFieldComponent {
|
|
|
1012
840
|
</mat-form-field>
|
|
1013
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 });
|
|
1014
842
|
}
|
|
1015
|
-
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: [{
|
|
1016
844
|
type: Component,
|
|
1017
845
|
args: [{ selector: 'df-mat-select', imports: [MatFormField, MatLabel, MatSelect, MatOption, MatHint, Field, MatError$1, DynamicTextPipe, AsyncPipe], template: `
|
|
1018
846
|
@let f = field();
|
|
@@ -1097,8 +925,8 @@ class MatSliderFieldComponent {
|
|
|
1097
925
|
});
|
|
1098
926
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
1099
927
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1100
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1101
|
-
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: `
|
|
1102
930
|
@let f = field();
|
|
1103
931
|
@let ariaInvalid = this.ariaInvalid();
|
|
1104
932
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1133,7 +961,7 @@ class MatSliderFieldComponent {
|
|
|
1133
961
|
}
|
|
1134
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 });
|
|
1135
963
|
}
|
|
1136
|
-
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: [{
|
|
1137
965
|
type: Component,
|
|
1138
966
|
args: [{ selector: 'df-mat-slider', imports: [MatSlider, MatSliderThumb, MatError, DynamicTextPipe, AsyncPipe, Field], template: `
|
|
1139
967
|
@let f = field();
|
|
@@ -1237,8 +1065,8 @@ class MatButtonFieldComponent {
|
|
|
1237
1065
|
this.eventBus.dispatch(event);
|
|
1238
1066
|
}
|
|
1239
1067
|
}
|
|
1240
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1241
|
-
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: `
|
|
1242
1070
|
<button
|
|
1243
1071
|
mat-raised-button
|
|
1244
1072
|
[type]="buttonType()"
|
|
@@ -1251,7 +1079,7 @@ class MatButtonFieldComponent {
|
|
|
1251
1079
|
</button>
|
|
1252
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 });
|
|
1253
1081
|
}
|
|
1254
|
-
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: [{
|
|
1255
1083
|
type: Component,
|
|
1256
1084
|
args: [{ selector: 'df-mat-button', imports: [MatButton, DynamicTextPipe, AsyncPipe], host: {
|
|
1257
1085
|
'[id]': '`${key()}`',
|
|
@@ -1354,8 +1182,8 @@ class MatTextareaFieldComponent {
|
|
|
1354
1182
|
});
|
|
1355
1183
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
1356
1184
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1357
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1358
|
-
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: `
|
|
1359
1187
|
@let f = field();
|
|
1360
1188
|
@let ariaInvalid = this.ariaInvalid(); @let ariaRequired = this.ariaRequired();
|
|
1361
1189
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
@@ -1388,7 +1216,7 @@ class MatTextareaFieldComponent {
|
|
|
1388
1216
|
</mat-form-field>
|
|
1389
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 });
|
|
1390
1218
|
}
|
|
1391
|
-
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: [{
|
|
1392
1220
|
type: Component,
|
|
1393
1221
|
args: [{ selector: 'df-mat-textarea', imports: [MatFormField, MatLabel, MatInput, MatHint, Field, MatError$1, DynamicTextPipe, AsyncPipe], template: `
|
|
1394
1222
|
@let f = field();
|
|
@@ -1477,8 +1305,8 @@ class MatToggleFieldComponent {
|
|
|
1477
1305
|
});
|
|
1478
1306
|
return ids.join(' ');
|
|
1479
1307
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
1480
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1481
|
-
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: `
|
|
1482
1310
|
@let f = field();
|
|
1483
1311
|
@let ariaDescribedBy = this.ariaDescribedBy();
|
|
1484
1312
|
|
|
@@ -1504,7 +1332,7 @@ class MatToggleFieldComponent {
|
|
|
1504
1332
|
}
|
|
1505
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 });
|
|
1506
1334
|
}
|
|
1507
|
-
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: [{
|
|
1508
1336
|
type: Component,
|
|
1509
1337
|
args: [{ selector: 'df-mat-toggle', imports: [MatSlideToggle, Field, MatError, DynamicTextPipe, AsyncPipe], template: `
|
|
1510
1338
|
@let f = field();
|
|
@@ -1722,11 +1550,12 @@ function addArrayItemButtonFieldMapper(fieldDef) {
|
|
|
1722
1550
|
// Try to get array context (available when inside an array)
|
|
1723
1551
|
// Use optional injection so it doesn't fail when outside an array
|
|
1724
1552
|
const arrayContext = inject(ARRAY_CONTEXT, { optional: true });
|
|
1553
|
+
const logger = inject(DynamicFormLogger);
|
|
1725
1554
|
// Determine the target array key
|
|
1726
1555
|
// Priority: explicit arrayKey from fieldDef > arrayKey from context
|
|
1727
1556
|
const targetArrayKey = fieldDef.arrayKey ?? arrayContext?.arrayKey;
|
|
1728
1557
|
if (!targetArrayKey) {
|
|
1729
|
-
|
|
1558
|
+
logger.warn(`addArrayItem button "${fieldDef.key}" has no array context. ` +
|
|
1730
1559
|
'Either place it inside an array field, or provide an explicit arrayKey property.');
|
|
1731
1560
|
}
|
|
1732
1561
|
// Build base inputs (static, from field definition)
|
|
@@ -1777,11 +1606,12 @@ function removeArrayItemButtonFieldMapper(fieldDef) {
|
|
|
1777
1606
|
// Try to get array context (available when inside an array)
|
|
1778
1607
|
// Use optional injection so it doesn't fail when outside an array
|
|
1779
1608
|
const arrayContext = inject(ARRAY_CONTEXT, { optional: true });
|
|
1609
|
+
const logger = inject(DynamicFormLogger);
|
|
1780
1610
|
// Determine the target array key
|
|
1781
1611
|
// Priority: explicit arrayKey from fieldDef > arrayKey from context
|
|
1782
1612
|
const targetArrayKey = fieldDef.arrayKey ?? arrayContext?.arrayKey;
|
|
1783
1613
|
if (!targetArrayKey) {
|
|
1784
|
-
|
|
1614
|
+
logger.warn(`removeArrayItem button "${fieldDef.key}" has no array context. ` +
|
|
1785
1615
|
'Either place it inside an array field, or provide an explicit arrayKey property.');
|
|
1786
1616
|
}
|
|
1787
1617
|
// Build base inputs (static, from field definition)
|