@ng-forge/dynamic-forms-material 1.0.0-rc.4 → 1.1.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 ng-forge
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -18,19 +18,12 @@ Material Design field components for [@ng-forge/dynamic-forms](https://www.npmjs
|
|
|
18
18
|
|
|
19
19
|
## Compatibility
|
|
20
20
|
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
24
|
-
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
| 0.6.x | 0.6.x | >=21.1.0 |
|
|
28
|
-
| 0.5.x | 0.5.x | >=21.1.0 |
|
|
29
|
-
| 0.4.x | 0.4.x | >=21.1.0 |
|
|
30
|
-
| 0.3.x | 0.3.x | 21.0.7-21.0.x |
|
|
31
|
-
| 0.2.x | 0.2.x | 21.0.6 |
|
|
32
|
-
| 0.1.1+ | 0.1.1+ | 21.0.2-21.0.5 |
|
|
33
|
-
| 0.1.0 | 0.1.0 | 21.0.0-21.0.1 |
|
|
21
|
+
| Angular | @ng-forge/dynamic-forms-material |
|
|
22
|
+
| ------- | -------------------------------- |
|
|
23
|
+
| 22.x | 1.x |
|
|
24
|
+
| 21.x | 0.x (experimental) |
|
|
25
|
+
|
|
26
|
+
Versioned in lockstep with `@ng-forge/dynamic-forms`. The `0.x` line targets Angular 21 (experimental Signal Forms). Each release pins its Angular requirement via `peerDependencies`; npm warns on a mismatch.
|
|
34
27
|
|
|
35
28
|
## Installation
|
|
36
29
|
|
|
@@ -99,10 +92,11 @@ Input, Textarea, Select, Checkbox, Radio, Datepicker, Slider, Toggle, Multi-Chec
|
|
|
99
92
|
|
|
100
93
|
## Documentation
|
|
101
94
|
|
|
102
|
-
- [
|
|
103
|
-
- [
|
|
104
|
-
- [
|
|
105
|
-
- [
|
|
95
|
+
- [Feature overview](https://ng-forge.com/material/feature-overview)
|
|
96
|
+
- [Material Integration](https://ng-forge.com/material)
|
|
97
|
+
- [Field Types](https://ng-forge.com/material/field-types/text-inputs)
|
|
98
|
+
- [Validation](https://ng-forge.com/material/validation/basics)
|
|
99
|
+
- [Conditional Logic](https://ng-forge.com/material/dynamic-behavior/conditional-logic)
|
|
106
100
|
|
|
107
101
|
## Changelog
|
|
108
102
|
|
|
@@ -3,7 +3,7 @@ import { InjectionToken, inject, input, computed, ChangeDetectionStrategy, Compo
|
|
|
3
3
|
import { FormField } from '@angular/forms/signals';
|
|
4
4
|
import { MatCheckbox } from '@angular/material/checkbox';
|
|
5
5
|
import * as i1 from '@ng-forge/dynamic-forms/integration';
|
|
6
|
-
import { injectNgForgeField, NgForgeControl, DynamicTextPipe, NgForgeFieldHost, runPresetAction, injectNgForgeAddons, DfAddonSlot, ADDON_PRESET_HANDLER, FIELD_SIGNAL_CONTEXT, NgForgeAddons, isEqual, injectNgForgeAction, NgForgeActionHost, DEFAULT_PROPS, ARRAY_CONTEXT, buildBaseInputs, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, submitButtonFieldMapper, nextButtonFieldMapper, previousButtonFieldMapper, addArrayItemButtonMapper, prependArrayItemButtonMapper, insertArrayItemButtonMapper, removeArrayItemButtonMapper, popArrayItemButtonMapper, shiftArrayItemButtonMapper, datepickerFieldMapper, ADDON_TYPE_DEFINITIONS, injectNgForgeAddonAction, NgForgeAddonAction } from '@ng-forge/dynamic-forms/integration';
|
|
6
|
+
import { injectNgForgeField, NgForgeControl, DynamicTextPipe, NgForgeFieldHost, runPresetAction, injectNgForgeAddons, DfAddonSlot, ADDON_PRESET_HANDLER, FIELD_SIGNAL_CONTEXT, NgForgeAddons, isEqual, injectNgForgeAction, NgForgeActionHost, DEFAULT_PROPS, ARRAY_CONTEXT, injectNonFieldLogicResolver, buildBaseInputs, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, submitButtonFieldMapper, nextButtonFieldMapper, previousButtonFieldMapper, addArrayItemButtonMapper, prependArrayItemButtonMapper, insertArrayItemButtonMapper, removeArrayItemButtonMapper, popArrayItemButtonMapper, shiftArrayItemButtonMapper, datepickerFieldMapper, ADDON_TYPE_DEFINITIONS, injectNgForgeAddonAction, NgForgeAddonAction } 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 { MatFormField, MatLabel, MatSuffix, MatError as MatError$1, MatPrefix } from '@angular/material/form-field';
|
|
@@ -28,8 +28,8 @@ class MatCheckboxFieldComponent {
|
|
|
28
28
|
...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
29
29
|
disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, /* @ts-ignore */
|
|
30
30
|
...(ngDevMode ? [{ debugName: "disableRipple" }] : /* istanbul ignore next */ []));
|
|
31
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
32
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
31
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
32
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatCheckboxFieldComponent, isStandalone: true, selector: "df-mat-checkbox", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
|
|
33
33
|
@let f = ngf.field();
|
|
34
34
|
@let checkboxId = ngf.key() + '-checkbox';
|
|
35
35
|
|
|
@@ -55,7 +55,7 @@ class MatCheckboxFieldComponent {
|
|
|
55
55
|
}
|
|
56
56
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n"], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
57
57
|
}
|
|
58
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
58
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatCheckboxFieldComponent, decorators: [{
|
|
59
59
|
type: Component,
|
|
60
60
|
args: [{ selector: 'df-mat-checkbox', imports: [MatCheckbox, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
|
|
61
61
|
@let f = ngf.field();
|
|
@@ -108,8 +108,8 @@ class MatDatepickerFieldComponent {
|
|
|
108
108
|
...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
|
|
109
109
|
hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, /* @ts-ignore */
|
|
110
110
|
...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
|
|
111
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
112
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
111
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatDatepickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
112
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatDatepickerFieldComponent, isStandalone: true, selector: "df-mat-datepicker", inputs: { 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 } }, providers: [provideNativeDateAdapter()], hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
|
|
113
113
|
@let inputId = ngf.key() + '-input';
|
|
114
114
|
|
|
115
115
|
<mat-form-field
|
|
@@ -145,7 +145,7 @@ class MatDatepickerFieldComponent {
|
|
|
145
145
|
</mat-form-field>
|
|
146
146
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
147
147
|
}
|
|
148
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
148
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatDatepickerFieldComponent, decorators: [{
|
|
149
149
|
type: Component,
|
|
150
150
|
args: [{ selector: 'df-mat-datepicker', imports: [
|
|
151
151
|
MatFormField,
|
|
@@ -228,8 +228,8 @@ class MatInputFieldComponent {
|
|
|
228
228
|
...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
|
|
229
229
|
type = computed(() => this.typeOverride() ?? this.props()?.type ?? 'text', /* @ts-ignore */
|
|
230
230
|
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
231
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
232
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
231
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
232
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatInputFieldComponent, isStandalone: true, selector: "df-mat-input", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
233
233
|
{
|
|
234
234
|
provide: MAT_INPUT_TYPE_OVERRIDE,
|
|
235
235
|
useFactory: () => signal(undefined),
|
|
@@ -302,7 +302,7 @@ class MatInputFieldComponent {
|
|
|
302
302
|
</mat-form-field>
|
|
303
303
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n", "mat-form-field{width:100%}:host([hidden]){display:none!important}:host{--df-mat-addon-prefix-outer-padding: .75em;--df-mat-addon-prefix-inner-padding: .5em;--df-mat-addon-suffix-inner-padding: .5em;--df-mat-addon-suffix-outer-padding: .75em;--df-mat-addon-prefix-text-outer-padding: 1em;--df-mat-addon-prefix-text-inner-padding: 1em;--df-mat-addon-suffix-text-inner-padding: 1em;--df-mat-addon-suffix-text-outer-padding: 1em}df-addon-slot[matprefix]{padding-left:var(--df-mat-addon-prefix-outer-padding);padding-right:var(--df-mat-addon-prefix-inner-padding)}df-addon-slot[matsuffix]{padding-left:var(--df-mat-addon-suffix-inner-padding);padding-right:var(--df-mat-addon-suffix-outer-padding)}df-addon-slot[matprefix].df-mat-addon-text{padding-left:var(--df-mat-addon-prefix-text-outer-padding);padding-right:var(--df-mat-addon-prefix-text-inner-padding)}df-addon-slot[matsuffix].df-mat-addon-text{padding-left:var(--df-mat-addon-suffix-text-inner-padding);padding-right:var(--df-mat-addon-suffix-text-outer-padding)}\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: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "component", type: DfAddonSlot, selector: "df-addon-slot", inputs: ["addon", "fieldInputs", "hidden"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
304
304
|
}
|
|
305
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
305
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatInputFieldComponent, decorators: [{
|
|
306
306
|
type: Component,
|
|
307
307
|
args: [{ selector: 'df-mat-input', imports: [
|
|
308
308
|
MatFormField,
|
|
@@ -440,8 +440,8 @@ class MatMultiCheckboxFieldComponent {
|
|
|
440
440
|
}
|
|
441
441
|
});
|
|
442
442
|
}
|
|
443
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
444
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
443
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
444
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatMultiCheckboxFieldComponent, isStandalone: true, selector: "df-mat-multi-checkbox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
|
|
445
445
|
@let f = ngf.field();
|
|
446
446
|
@let checkboxGroupId = ngf.key() + '-checkbox-group';
|
|
447
447
|
@let checked = checkedValuesMap();
|
|
@@ -479,7 +479,7 @@ class MatMultiCheckboxFieldComponent {
|
|
|
479
479
|
}
|
|
480
480
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\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: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
481
481
|
}
|
|
482
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
482
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatMultiCheckboxFieldComponent, decorators: [{
|
|
483
483
|
type: Component,
|
|
484
484
|
args: [{ selector: 'df-mat-multi-checkbox', imports: [MatCheckbox, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
|
|
485
485
|
@let f = ngf.field();
|
|
@@ -531,8 +531,8 @@ class MatRadioFieldComponent {
|
|
|
531
531
|
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
532
532
|
props = input(/* @ts-ignore */
|
|
533
533
|
...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
534
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
535
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
534
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
535
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatRadioFieldComponent, isStandalone: true, selector: "df-mat-radio", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
|
|
536
536
|
@let f = ngf.field();
|
|
537
537
|
@let radioGroupId = ngf.key() + '-radio-group';
|
|
538
538
|
|
|
@@ -567,7 +567,7 @@ class MatRadioFieldComponent {
|
|
|
567
567
|
}
|
|
568
568
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n"], dependencies: [{ kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
569
569
|
}
|
|
570
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
570
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatRadioFieldComponent, decorators: [{
|
|
571
571
|
type: Component,
|
|
572
572
|
args: [{ selector: 'df-mat-radio', imports: [MatRadioGroup, MatRadioButton, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
|
|
573
573
|
@let f = ngf.field();
|
|
@@ -626,8 +626,8 @@ class MatSelectFieldComponent {
|
|
|
626
626
|
hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, /* @ts-ignore */
|
|
627
627
|
...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
|
|
628
628
|
defaultCompare = Object.is;
|
|
629
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
630
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
629
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
630
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatSelectFieldComponent, isStandalone: true, selector: "df-mat-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
|
|
631
631
|
@let selectId = ngf.key() + '-select';
|
|
632
632
|
|
|
633
633
|
<mat-form-field
|
|
@@ -663,7 +663,7 @@ class MatSelectFieldComponent {
|
|
|
663
663
|
</mat-form-field>
|
|
664
664
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
665
665
|
}
|
|
666
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
666
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatSelectFieldComponent, decorators: [{
|
|
667
667
|
type: Component,
|
|
668
668
|
args: [{ selector: 'df-mat-select', imports: [MatFormField, MatLabel, MatSelect, MatOption, MatHint, FormField, MatError$1, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
|
|
669
669
|
@let selectId = ngf.key() + '-select';
|
|
@@ -713,8 +713,8 @@ class MatSliderFieldComponent {
|
|
|
713
713
|
...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
|
|
714
714
|
props = input(/* @ts-ignore */
|
|
715
715
|
...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
716
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
717
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
716
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatSliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
717
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatSliderFieldComponent, isStandalone: true, selector: "df-mat-slider", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
|
|
718
718
|
@let f = ngf.field();
|
|
719
719
|
@let inputId = ngf.key() + '-input';
|
|
720
720
|
|
|
@@ -741,7 +741,7 @@ class MatSliderFieldComponent {
|
|
|
741
741
|
}
|
|
742
742
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n", ".slider-container{width:100%}\n"], dependencies: [{ kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
743
743
|
}
|
|
744
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
744
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatSliderFieldComponent, decorators: [{
|
|
745
745
|
type: Component,
|
|
746
746
|
args: [{ selector: 'df-mat-slider', imports: [MatSlider, MatSliderThumb, MatError, DynamicTextPipe, AsyncPipe, FormField, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
|
|
747
747
|
@let f = ngf.field();
|
|
@@ -789,8 +789,8 @@ class MatButtonFieldComponent {
|
|
|
789
789
|
return;
|
|
790
790
|
this.action.dispatch();
|
|
791
791
|
}
|
|
792
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
793
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
792
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
793
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: MatButtonFieldComponent, isStandalone: true, selector: "df-mat-button", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeActionHost }], ngImport: i0, template: `
|
|
794
794
|
@let buttonId = action.key() + '-button';
|
|
795
795
|
<button
|
|
796
796
|
mat-raised-button
|
|
@@ -806,7 +806,7 @@ class MatButtonFieldComponent {
|
|
|
806
806
|
</button>
|
|
807
807
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n", "button{min-width:fit-content}\n"], dependencies: [{ kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
808
808
|
}
|
|
809
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
809
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatButtonFieldComponent, decorators: [{
|
|
810
810
|
type: Component,
|
|
811
811
|
args: [{ selector: 'df-mat-button', imports: [MatButton, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeActionHost], template: `
|
|
812
812
|
@let buttonId = action.key() + '-button';
|
|
@@ -844,8 +844,8 @@ class MatTextareaFieldComponent {
|
|
|
844
844
|
...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
|
|
845
845
|
hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, /* @ts-ignore */
|
|
846
846
|
...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
|
|
847
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
848
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
847
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
848
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatTextareaFieldComponent, isStandalone: true, selector: "df-mat-textarea", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
|
|
849
849
|
@let textareaId = ngf.key() + '-textarea';
|
|
850
850
|
|
|
851
851
|
<mat-form-field
|
|
@@ -876,7 +876,7 @@ class MatTextareaFieldComponent {
|
|
|
876
876
|
</mat-form-field>
|
|
877
877
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
878
878
|
}
|
|
879
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
879
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatTextareaFieldComponent, decorators: [{
|
|
880
880
|
type: Component,
|
|
881
881
|
args: [{ selector: 'df-mat-textarea', imports: [MatFormField, MatLabel, MatInput, MatHint, FormField, MatError$1, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
|
|
882
882
|
@let textareaId = ngf.key() + '-textarea';
|
|
@@ -922,8 +922,8 @@ class MatToggleFieldComponent {
|
|
|
922
922
|
...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
923
923
|
disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, /* @ts-ignore */
|
|
924
924
|
...(ngDevMode ? [{ debugName: "disableRipple" }] : /* istanbul ignore next */ []));
|
|
925
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
926
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
925
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatToggleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
926
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatToggleFieldComponent, isStandalone: true, selector: "df-mat-toggle", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }], ngImport: i0, template: `
|
|
927
927
|
@let f = ngf.field();
|
|
928
928
|
@let toggleId = ngf.key() + '-toggle';
|
|
929
929
|
|
|
@@ -949,7 +949,7 @@ class MatToggleFieldComponent {
|
|
|
949
949
|
}
|
|
950
950
|
`, isInline: true, styles: [":host{display:block;width:100%}:host([hidden]){display:none!important}.df-mat-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-mat-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-mat-hint{color:var(--df-hint-color, rgba(0, 0, 0, .6));font-size:var(--df-hint-font-size, .875rem)}.df-mat-error{color:var(--df-error-color, #f44336);font-size:var(--df-error-font-size, .875rem)}\n"], dependencies: [{ kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
951
951
|
}
|
|
952
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
952
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatToggleFieldComponent, decorators: [{
|
|
953
953
|
type: Component,
|
|
954
954
|
args: [{ selector: 'df-mat-toggle', imports: [MatSlideToggle, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
|
|
955
955
|
@let f = ngf.field();
|
|
@@ -992,12 +992,12 @@ const MatField = {
|
|
|
992
992
|
Submit: 'submit',
|
|
993
993
|
Next: 'next',
|
|
994
994
|
Previous: 'previous',
|
|
995
|
-
AddArrayItem: '
|
|
996
|
-
PrependArrayItem: '
|
|
997
|
-
InsertArrayItem: '
|
|
998
|
-
RemoveArrayItem: '
|
|
999
|
-
PopArrayItem: '
|
|
1000
|
-
ShiftArrayItem: '
|
|
995
|
+
AddArrayItem: 'add-array-item',
|
|
996
|
+
PrependArrayItem: 'prepend-array-item',
|
|
997
|
+
InsertArrayItem: 'insert-array-item',
|
|
998
|
+
RemoveArrayItem: 'remove-array-item',
|
|
999
|
+
PopArrayItem: 'pop-array-item',
|
|
1000
|
+
ShiftArrayItem: 'shift-array-item',
|
|
1001
1001
|
Textarea: 'textarea',
|
|
1002
1002
|
Radio: 'radio',
|
|
1003
1003
|
MultiCheckbox: 'multi-checkbox',
|
|
@@ -1009,17 +1009,13 @@ const MatField = {
|
|
|
1009
1009
|
function buttonFieldMapper(fieldDef) {
|
|
1010
1010
|
const defaultProps = inject(DEFAULT_PROPS);
|
|
1011
1011
|
const arrayContext = inject(ARRAY_CONTEXT, { optional: true });
|
|
1012
|
+
const resolveLogic = injectNonFieldLogicResolver(fieldDef);
|
|
1012
1013
|
return computed(() => {
|
|
1013
1014
|
const baseInputs = buildBaseInputs(fieldDef, defaultProps());
|
|
1014
1015
|
const inputs = {
|
|
1015
1016
|
...baseInputs,
|
|
1017
|
+
...resolveLogic(),
|
|
1016
1018
|
};
|
|
1017
|
-
if (fieldDef.disabled !== undefined) {
|
|
1018
|
-
inputs['disabled'] = fieldDef.disabled;
|
|
1019
|
-
}
|
|
1020
|
-
if (fieldDef.hidden !== undefined) {
|
|
1021
|
-
inputs['hidden'] = fieldDef.hidden;
|
|
1022
|
-
}
|
|
1023
1019
|
if ('event' in fieldDef && fieldDef.event !== undefined) {
|
|
1024
1020
|
inputs['event'] = fieldDef.event;
|
|
1025
1021
|
}
|
|
@@ -1238,10 +1234,10 @@ class MatIconAddonComponent {
|
|
|
1238
1234
|
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1239
1235
|
hasAriaLabel = computed(() => this.addon().ariaLabel !== undefined, /* @ts-ignore */
|
|
1240
1236
|
...(ngDevMode ? [{ debugName: "hasAriaLabel" }] : /* istanbul ignore next */ []));
|
|
1241
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1242
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
1237
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatIconAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1238
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: MatIconAddonComponent, isStandalone: true, selector: "df-mat-icon-addon", inputs: { addon: { classPropertyName: "addon", publicName: "addon", isSignal: true, isRequired: true, transformFunction: null }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "hasAriaLabel() ? null : \"true\"" } }, ngImport: i0, template: `<mat-icon [attr.aria-label]="(ariaLabel() | dynamicText | async) ?? null">{{ addon().icon }}</mat-icon>`, isInline: true, dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1243
1239
|
}
|
|
1244
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1240
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatIconAddonComponent, decorators: [{
|
|
1245
1241
|
type: Component,
|
|
1246
1242
|
args: [{
|
|
1247
1243
|
selector: 'df-mat-icon-addon',
|
|
@@ -1271,8 +1267,8 @@ class MatButtonAddonComponent {
|
|
|
1271
1267
|
return !!a.icon && !a.label;
|
|
1272
1268
|
}, /* @ts-ignore */
|
|
1273
1269
|
...(ngDevMode ? [{ debugName: "isIconOnly" }] : /* istanbul ignore next */ []));
|
|
1274
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1275
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
1270
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatButtonAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1271
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: MatButtonAddonComponent, isStandalone: true, selector: "df-mat-button-addon", hostDirectives: [{ directive: i1.NgForgeAddonAction }], ngImport: i0, template: `
|
|
1276
1272
|
@if (isIconOnly()) {
|
|
1277
1273
|
<button
|
|
1278
1274
|
mat-icon-button
|
|
@@ -1311,7 +1307,7 @@ class MatButtonAddonComponent {
|
|
|
1311
1307
|
}
|
|
1312
1308
|
`, isInline: true, styles: [".df-mat-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\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: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1313
1309
|
}
|
|
1314
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1310
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatButtonAddonComponent, decorators: [{
|
|
1315
1311
|
type: Component,
|
|
1316
1312
|
args: [{ selector: 'df-mat-button-addon', imports: [MatButton, MatIconButton, MatIcon, MatProgressSpinner, DynamicTextPipe, AsyncPipe], hostDirectives: [NgForgeAddonAction], template: `
|
|
1317
1313
|
@if (isIconOnly()) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-forge-dynamic-forms-material.mjs","mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0Cc;;;AAKH;;AAEA;;;AAPU;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/BT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACiEE;;;;;;;;;AAQH;;AAEA;;AAEA;;AAEA;;AAEA;;;AAhBU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/DT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDT;;;;;;;;;ACxDD;AACF;;;;ACiKc;;;;AAMH;;AAET,IAKS;;IAGQ;AAER;;AAEA;;AAEA;;AAEA;;IAGU;;;AA3BA;AAlCjB;AACE;AACA;AACD;AACD;gFAME;;AAEE;AACA;AACA;oBAEA;;AAEE;AACE;AACA;;;;;;AAOC;;;;AAIR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/IO;;;;;;;;;;;;;AAcT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGC;AACE;AACA;AACD;AACD;4IAME;;AAEE;AACA;AACA;;;AAIE;AACE;AACA;;;;;;AAOC;;;;AAIR;AACF;;;;;;;;AClHW;;;;AAIH;;AAET;AAEI;;AAEF;IAKO;;;;;AAKP;;;AAGF;AACE;AACE;AAEA;AACE;;AAEJ;AAEA;AACE;AACA;;;AAIE;;AAEJ;;;;;AAMI;;;AAEA;;AAEJ;;;AAlDiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA3CT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACwCE;;;;AAIH;;;AAJU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAJlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACcW;;;;;AAMH;;AAEA;;AAEA;;AAEA;;AAEA;;AAET;;AAhBmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAXlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACDW;;AAGH;;AAEA;;;AALU;;;;;;;;;;;;;;;;;;;;;;;;;AAXlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACDW;;AAGH;;AAEA;;AAEA;;;AAGP;;AACA;;;AAXiB;;;;;;;;;;;;;;AAXlB;;;;AAjBS;;;;;;;;;;;;;;;;;;;;;;;AC6CE;;;AAKH;;AAEA;;AACA;;AAEA;;AACA;;;AAXU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAXlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAW;;;AAKH;;AAEA;;;AAPU;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/BT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACRL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;ACXI;AACJ;AACA;;;AAKE;AACE;;AAGF;AACE;;AAGF;AACE;;;AAKA;;;AAKA;;QAIF;AACA;;AAGI;;AACA;AACF;;;;AAKE;AACA;;;;AAKJ;AACF;AACF;;;ACvCA;;;AAQA;AACE;AACA;;AAOK;AACL;;AAEE;AACA;;AAEA;AACA;AACE;AACD;AACD;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;;;;ACnIG;;;;AAOA;;AAE+B;AACjC;;AAGF;AACF;AAEA;AAEA;AACE;AACA;AACA;AACE;AACE;;;;AAKN;AACE;AACA;AACA;;AAIE;AACE;;QAKF;AACE;;;;;;AAkBF;AACA;;;AAGC;;AAEL;;;;;IClFW;;;;AAGU;;;AANR;;;;AATF;AACT;AACA;AACA;AACA;AACE;AACD;;AAEF;;;;;;;;;;ICyDoB;;;;;AAIA;AACjB;;;;;AATS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1DD","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/checkbox/mat-checkbox.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/datepicker/mat-datepicker.component.ts","../../../../packages/dynamic-forms-material/src/lib/addons/preset-actions.ts","../../../../packages/dynamic-forms-material/src/lib/fields/input/mat-input.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/multi-checkbox/mat-multi-checkbox.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/radio/mat-radio.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/select/mat-select.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/slider/mat-slider.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/button/mat-button.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/textarea/mat-textarea.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/toggle/mat-toggle.component.ts","../../../../packages/dynamic-forms-material/src/lib/types/types.ts","../../../../packages/dynamic-forms-material/src/lib/fields/button/mat-button.mapper.ts","../../../../packages/dynamic-forms-material/src/lib/config/material-field-config.ts","../../../../packages/dynamic-forms-material/src/lib/providers/material-providers.ts","../../../../packages/dynamic-forms-material/src/lib/addons/mat-icon-addon.component.ts","../../../../packages/dynamic-forms-material/src/lib/addons/mat-button-addon.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatCheckbox } from '@angular/material/checkbox';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatCheckboxProps } from './mat-checkbox.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-checkbox',\n imports: [MatCheckbox, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let checkboxId = ngf.key() + '-checkbox';\n\n <mat-checkbox\n ngForgeControl=\"input[type='checkbox']\"\n [id]=\"checkboxId\"\n [formField]=\"f\"\n [labelPosition]=\"props()?.labelPosition || 'after'\"\n [indeterminate]=\"props()?.indeterminate || false\"\n [color]=\"props()?.color || 'primary'\"\n [disableRipple]=\"disableRipple()\"\n [required]=\"!!f().required()\"\n [tabIndex]=\"ngf.tabIndex() ?? 0\"\n [attr.hidden]=\"f().hidden() || null\"\n >\n {{ ngf.label() | dynamicText | async }}\n </mat-checkbox>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\" [attr.hidden]=\"f().hidden() || null\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\" [attr.hidden]=\"f().hidden() || null\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatCheckboxFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<boolean>();\n\n readonly props = input<MatCheckboxProps>();\n\n readonly disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false);\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';\nimport { MatHint, MatInput } from '@angular/material/input';\nimport { MatDatepicker, MatDatepickerInput, MatDatepickerToggle } from '@angular/material/datepicker';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatDatepickerProps } from './mat-datepicker.type';\nimport { provideNativeDateAdapter } from '@angular/material/core';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-datepicker',\n imports: [\n MatFormField,\n MatLabel,\n MatInput,\n MatHint,\n MatDatepicker,\n MatDatepickerInput,\n MatDatepickerToggle,\n MatSuffix,\n FormField,\n MatError,\n DynamicTextPipe,\n AsyncPipe,\n NgForgeControl,\n ],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let inputId = ngf.key() + '-input';\n\n <mat-form-field\n [appearance]=\"appearance()\"\n [subscriptSizing]=\"subscriptSizing()\"\n [floatLabel]=\"floatLabel()\"\n [hideRequiredMarker]=\"hideRequiredMarker()\"\n >\n @if (ngf.label(); as label) {\n <mat-label>{{ label | dynamicText | async }}</mat-label>\n }\n\n <input\n matInput\n ngForgeControl\n [id]=\"inputId\"\n [matDatepicker]=\"picker\"\n [formField]=\"ngf.field()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n />\n\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\" />\n <mat-datepicker #picker [startAt]=\"startAt()\" [startView]=\"props()?.startView || 'month'\" [touchUi]=\"props()?.touchUi ?? false\" />\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <mat-hint [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n }\n </mat-form-field>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n mat-form-field {\n width: 100%;\n }\n `,\n ],\n providers: [provideNativeDateAdapter()],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatDatepickerFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<string>();\n\n readonly minDate = input<Date | null>(null);\n readonly maxDate = input<Date | null>(null);\n readonly startAt = input<Date | null>(null);\n readonly props = input<MatDatepickerProps>();\n\n readonly appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline');\n\n readonly subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic');\n\n readonly floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto');\n\n readonly hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false);\n}\n","import type { AddonActionContext, AddonActionPreset } from '@ng-forge/dynamic-forms';\nimport type { PresetCollaborators } from '@ng-forge/dynamic-forms/integration';\nimport { runPresetAction } from '@ng-forge/dynamic-forms/integration';\n\nexport type { PresetCollaborators };\n\n/** Material adapter binding for the shared preset runner. */\nexport function runMatPresetAction(preset: AddonActionPreset, ctx: AddonActionContext, collaborators: PresetCollaborators): Promise<void> {\n return runPresetAction(preset, ctx, collaborators, 'Material', 'mat-input');\n}\n","import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, signal } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel, MatPrefix, MatSuffix } from '@angular/material/form-field';\nimport { MatHint, MatInput } from '@angular/material/input';\nimport { AddonActionContext, AddonActionPreset, DynamicFormLogger } from '@ng-forge/dynamic-forms';\nimport { DfAddonSlot } from '@ng-forge/dynamic-forms/integration';\nimport { WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';\nimport { DynamicTextPipe, FIELD_SIGNAL_CONTEXT } from '@ng-forge/dynamic-forms/integration';\nimport {\n ADDON_PRESET_HANDLER,\n AddonPresetHandler,\n injectNgForgeAddons,\n injectNgForgeField,\n NgForgeAddons,\n NgForgeControl,\n NgForgeFieldHost,\n} from '@ng-forge/dynamic-forms/integration';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\nimport { runMatPresetAction } from '../../addons/preset-actions';\nimport { MAT_INPUT_TYPE_OVERRIDE } from '../../tokens/input-type-override.token';\nimport { MatInputAddon, MatInputProps } from './mat-input.type';\n\n@Component({\n selector: 'df-mat-input',\n imports: [\n MatFormField,\n MatLabel,\n MatInput,\n MatHint,\n MatError,\n MatPrefix,\n MatSuffix,\n FormField,\n DynamicTextPipe,\n AsyncPipe,\n NgForgeControl,\n DfAddonSlot,\n ],\n hostDirectives: [NgForgeFieldHost, NgForgeAddons],\n template: `\n @let inputId = ngf.key() + '-input';\n\n <mat-form-field\n [appearance]=\"appearance()\"\n [subscriptSizing]=\"subscriptSizing()\"\n [floatLabel]=\"floatLabel()\"\n [hideRequiredMarker]=\"hideRequiredMarker()\"\n >\n @if (ngf.label()) {\n <mat-label>{{ ngf.label() | dynamicText | async }}</mat-label>\n }\n @for (a of ngfa.prefixAddons(); track $index) {\n <df-addon-slot\n matPrefix\n [class.df-mat-addon-text]=\"a.type === 'text'\"\n [addon]=\"a\"\n [fieldInputs]=\"fieldInputs()\"\n [hidden]=\"ngfa.hiddenSignalCache().get(a)\"\n />\n }\n <input\n matInput\n ngForgeControl\n [id]=\"inputId\"\n [formField]=\"ngf.field()\"\n [type]=\"type()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n />\n @for (a of ngfa.suffixAddons(); track $index) {\n <df-addon-slot\n matSuffix\n [class.df-mat-addon-text]=\"a.type === 'text'\"\n [addon]=\"a\"\n [fieldInputs]=\"fieldInputs()\"\n [hidden]=\"ngfa.hiddenSignalCache().get(a)\"\n />\n }\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <mat-hint [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n }\n </mat-form-field>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n mat-form-field {\n width: 100%;\n }\n :host([hidden]) {\n display: none !important;\n }\n /* matPrefix/matSuffix elements have no default Material spacing.\n All four sides + the text-type variants are independent CSS custom\n properties so consumers can tune each individually:\n prefix-outer = prefix slot's left (border-facing) padding\n prefix-inner = prefix slot's right (text-facing) padding\n suffix-inner = suffix slot's left (text-facing) padding\n suffix-outer = suffix slot's right (border-facing) padding\n Text variants override only the INNER side because <mat-icon> has\n ~4-6px optical padding inside its glyph box (so it looks \"padded\"\n even with a small CSS value) while text glyphs sit flush against\n their bounding box and need the extra room to match. */\n :host {\n --df-mat-addon-prefix-outer-padding: 0.75em;\n --df-mat-addon-prefix-inner-padding: 0.5em;\n --df-mat-addon-suffix-inner-padding: 0.5em;\n --df-mat-addon-suffix-outer-padding: 0.75em;\n --df-mat-addon-prefix-text-outer-padding: 1em;\n --df-mat-addon-prefix-text-inner-padding: 1em;\n --df-mat-addon-suffix-text-inner-padding: 1em;\n --df-mat-addon-suffix-text-outer-padding: 1em;\n }\n df-addon-slot[matprefix] {\n padding-left: var(--df-mat-addon-prefix-outer-padding);\n padding-right: var(--df-mat-addon-prefix-inner-padding);\n }\n df-addon-slot[matsuffix] {\n padding-left: var(--df-mat-addon-suffix-inner-padding);\n padding-right: var(--df-mat-addon-suffix-outer-padding);\n }\n df-addon-slot[matprefix].df-mat-addon-text {\n padding-left: var(--df-mat-addon-prefix-text-outer-padding);\n padding-right: var(--df-mat-addon-prefix-text-inner-padding);\n }\n df-addon-slot[matsuffix].df-mat-addon-text {\n padding-left: var(--df-mat-addon-suffix-text-inner-padding);\n padding-right: var(--df-mat-addon-suffix-text-outer-padding);\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: MAT_INPUT_TYPE_OVERRIDE,\n useFactory: () => signal<string | undefined>(undefined),\n },\n {\n // Adapter-specific preset semantics for `mat-button` addons (clear /\n // reset / paste / copy / toggle-password-visibility). The directive\n // (`NgForgeAddonAction`) delegates here when an addon configures a\n // `preset`. Per-mat-input-instance so the `typeOverride` signal is\n // scoped to one field.\n provide: ADDON_PRESET_HANDLER,\n useFactory: (): AddonPresetHandler => {\n const typeOverride = inject(MAT_INPUT_TYPE_OVERRIDE);\n const fsc = inject(FIELD_SIGNAL_CONTEXT, { optional: true });\n const logger = inject(DynamicFormLogger);\n // forwardRef for baselineType only — host.props()?.type gates toggle-password-visibility.\n const host = inject(forwardRef(() => MatInputFieldComponent));\n return {\n run: (preset: string, ctx: AddonActionContext) => {\n const fieldKey = ctx.field.key;\n return runMatPresetAction(preset as AddonActionPreset, ctx, {\n typeOverride,\n fieldValueSetter: ctx.setValue,\n fieldDefaultValueGetter:\n fsc && fieldKey ? () => (fsc.defaultValues() as Record<string, unknown> | undefined)?.[fieldKey] : undefined,\n baselineType: () => host.props()?.type,\n logger,\n });\n },\n };\n },\n },\n ],\n})\nexport default class MatInputFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<string>();\n protected readonly ngfa = injectNgForgeAddons<MatInputAddon>();\n\n readonly props = input<MatInputProps>();\n\n /**\n * Wrapper-style host bag pushed by `DfFieldOutlet`. Declared at the\n * component level so `setInputIfDeclared` (which uses\n * `reflectComponentType`) can write it.\n */\n readonly fieldInputs = input<WrapperFieldInputs | undefined>();\n\n /** Per-instance type override populated by `toggle-password-visibility` preset. */\n private readonly typeOverride = inject(MAT_INPUT_TYPE_OVERRIDE);\n\n readonly appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline');\n\n readonly subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic');\n\n readonly floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto');\n\n readonly hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false);\n\n /** Override (set by `toggle-password-visibility` preset) wins over `props().type`. */\n protected readonly type = computed(() => this.typeOverride() ?? this.props()?.type ?? 'text');\n}\n","import { ChangeDetectionStrategy, Component, computed, input, linkedSignal } from '@angular/core';\nimport { MatCheckbox } from '@angular/material/checkbox';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeField, NgForgeFieldHost, isEqual, NgForgeControl } from '@ng-forge/dynamic-forms/integration';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport { MatMultiCheckboxProps } from './mat-multi-checkbox.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n selector: 'df-mat-multi-checkbox',\n imports: [MatCheckbox, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let checkboxGroupId = ngf.key() + '-checkbox-group';\n @let checked = checkedValuesMap();\n\n @if (ngf.label(); as label) {\n <div class=\"checkbox-group-label\">{{ label | dynamicText | async }}</div>\n }\n\n <div\n [id]=\"checkboxGroupId\"\n class=\"checkbox-group\"\n role=\"group\"\n [attr.aria-invalid]=\"ngf.ariaInvalid()\"\n [attr.aria-required]=\"ngf.ariaRequired()\"\n [attr.aria-describedby]=\"ngf.ariaDescribedBy()\"\n >\n @for (option of options(); track option.value) {\n <mat-checkbox\n ngForgeControl=\"input[type='checkbox']\"\n [checked]=\"checked['' + option.value]\"\n [disabled]=\"f().disabled() || option.disabled\"\n [color]=\"props()?.color || 'primary'\"\n [labelPosition]=\"props()?.labelPosition || 'after'\"\n (change)=\"onCheckboxChange(option, $event.checked)\"\n >\n {{ option.label | dynamicText | async }}\n </mat-checkbox>\n }\n </div>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatMultiCheckboxFieldComponent {\n protected readonly ngf = injectNgForgeField<ValueType[]>();\n\n readonly options = input<FieldOption<ValueType>[]>([]);\n readonly props = input<MatMultiCheckboxProps>();\n\n valueViewModel = linkedSignal<FieldOption<ValueType>[]>(\n () => {\n const currentValues = this.ngf.field()().value();\n return this.options().filter((option) => currentValues.includes(option.value));\n },\n { equal: isEqual },\n );\n\n /** Computed map of checked option values for O(1) lookup in template */\n readonly checkedValuesMap = computed(() => {\n const map: Record<string, boolean> = {};\n for (const opt of this.valueViewModel()) {\n map[String(opt.value)] = true;\n }\n return map;\n });\n\n constructor() {\n explicitEffect([this.valueViewModel], ([selectedOptions]) => {\n const selectedValues = selectedOptions.map((option) => option.value);\n\n if (!isEqual(selectedValues, this.ngf.field()().value())) {\n this.ngf.field()().value.set(selectedValues);\n }\n });\n\n explicitEffect([this.options], ([options]) => {\n const values = options.map((option) => option.value);\n const uniqueValues = new Set(values);\n\n if (values.length !== uniqueValues.size) {\n const duplicates = values.filter((value, index) => values.indexOf(value) !== index);\n throw new Error(`Duplicate option values detected in mat-multi-checkbox: ${duplicates.join(', ')}`);\n }\n });\n }\n\n onCheckboxChange(option: FieldOption<ValueType>, checked: boolean): void {\n this.valueViewModel.update((currentOptions) => {\n if (checked) {\n return currentOptions.some((opt) => opt.value === option.value) ? currentOptions : [...currentOptions, option];\n } else {\n return currentOptions.filter((opt) => opt.value !== option.value);\n }\n });\n }\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatRadioButton, MatRadioGroup } from '@angular/material/radio';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatRadioProps } from './mat-radio.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n selector: 'df-mat-radio',\n imports: [MatRadioGroup, MatRadioButton, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let radioGroupId = ngf.key() + '-radio-group';\n\n @if (ngf.label()) {\n <div class=\"radio-label\">{{ ngf.label() | dynamicText | async }}</div>\n }\n\n <mat-radio-group\n [id]=\"radioGroupId\"\n [formField]=\"f\"\n [attr.aria-invalid]=\"ngf.ariaInvalid()\"\n [attr.aria-required]=\"ngf.ariaRequired()\"\n [attr.aria-describedby]=\"ngf.ariaDescribedBy()\"\n >\n @for (option of options(); track option.value) {\n <mat-radio-button\n ngForgeControl=\"input[type='radio']\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled || false\"\n [color]=\"props()?.color || 'primary'\"\n [labelPosition]=\"props()?.labelPosition || 'after'\"\n >\n {{ option.label | dynamicText | async }}\n </mat-radio-button>\n }\n </mat-radio-group>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatRadioFieldComponent {\n protected readonly ngf = injectNgForgeField<ValueType>();\n\n readonly options = input<FieldOption<ValueType>[]>([]);\n readonly props = input<MatRadioProps>();\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatOption, MatSelect } from '@angular/material/select';\nimport { MatHint } from '@angular/material/input';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatSelectProps } from './mat-select.type';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-select',\n imports: [MatFormField, MatLabel, MatSelect, MatOption, MatHint, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let selectId = ngf.key() + '-select';\n\n <mat-form-field\n [appearance]=\"appearance()\"\n [subscriptSizing]=\"subscriptSizing()\"\n [floatLabel]=\"floatLabel()\"\n [hideRequiredMarker]=\"hideRequiredMarker()\"\n >\n @if (ngf.label(); as label) {\n <mat-label>{{ label | dynamicText | async }}</mat-label>\n }\n\n <mat-select\n ngForgeControl\n [id]=\"selectId\"\n [formField]=\"ngf.field()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [multiple]=\"props()?.multiple || false\"\n [compareWith]=\"props()?.compareWith || defaultCompare\"\n >\n @for (option of options(); track option.value) {\n <mat-option [value]=\"option.value\" [disabled]=\"option.disabled || false\">\n {{ option.label | dynamicText | async }}\n </mat-option>\n }\n </mat-select>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <mat-hint [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n }\n </mat-form-field>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n mat-form-field {\n width: 100%;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatSelectFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<ValueType>();\n\n readonly options = input<FieldOption<ValueType>[]>([]);\n readonly props = input<MatSelectProps>();\n\n readonly appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline');\n\n readonly subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic');\n\n readonly floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto');\n\n readonly hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false);\n\n defaultCompare = Object.is;\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatSlider, MatSliderThumb } from '@angular/material/slider';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatSliderProps } from './mat-slider.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n selector: 'df-mat-slider',\n imports: [MatSlider, MatSliderThumb, MatError, DynamicTextPipe, AsyncPipe, FormField, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let inputId = ngf.key() + '-input';\n\n @if (ngf.label(); as label) {\n <label class=\"slider-label\" [for]=\"inputId\">{{ label | dynamicText | async }}</label>\n }\n\n <mat-slider\n [min]=\"f().min?.() ?? 0\"\n [max]=\"f().max?.() ?? 100\"\n [step]=\"step() ?? props()?.step ?? 1\"\n [discrete]=\"props()?.thumbLabel || props()?.showThumbLabel\"\n [showTickMarks]=\"props()?.tickInterval !== undefined\"\n [color]=\"props()?.color || 'primary'\"\n class=\"slider-container\"\n >\n <input matSliderThumb ngForgeControl [id]=\"inputId\" [formField]=\"f\" [attr.tabindex]=\"ngf.tabIndex()\" />\n </mat-slider>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n .slider-container {\n width: 100%;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatSliderFieldComponent {\n protected readonly ngf = injectNgForgeField<number>();\n\n readonly step = input<number>();\n\n readonly props = input<MatSliderProps>();\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { MatButton } from '@angular/material/button';\nimport { AsyncPipe } from '@angular/common';\nimport { FormEvent } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeAction, NgForgeActionHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatButtonProps } from './mat-button.type';\n\n@Component({\n selector: 'df-mat-button',\n imports: [MatButton, DynamicTextPipe, AsyncPipe],\n hostDirectives: [NgForgeActionHost],\n template: `\n @let buttonId = action.key() + '-button';\n <button\n mat-raised-button\n [id]=\"buttonId\"\n [type]=\"buttonType()\"\n [color]=\"props()?.color || 'primary'\"\n [disabled]=\"action.disabled()\"\n [attr.tabindex]=\"action.tabIndex()\"\n [attr.data-testid]=\"buttonTestId()\"\n (click)=\"onClick()\"\n >\n {{ action.label() | dynamicText | async }}\n </button>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n button {\n min-width: fit-content;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatButtonFieldComponent<TEvent extends FormEvent> {\n protected readonly action = injectNgForgeAction<TEvent>();\n\n readonly props = input<MatButtonProps>();\n\n readonly buttonType = computed(() => this.props()?.type ?? 'button');\n\n readonly buttonTestId = computed(() => `${this.buttonType()}-${this.action.key()}`);\n\n onClick(): void {\n if (this.buttonType() === 'submit') return;\n this.action.dispatch();\n }\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatHint, MatInput } from '@angular/material/input';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatTextareaProps } from './mat-textarea.type';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-textarea',\n imports: [MatFormField, MatLabel, MatInput, MatHint, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let textareaId = ngf.key() + '-textarea';\n\n <mat-form-field\n [appearance]=\"appearance()\"\n [subscriptSizing]=\"subscriptSizing()\"\n [floatLabel]=\"floatLabel()\"\n [hideRequiredMarker]=\"hideRequiredMarker()\"\n >\n @if (ngf.label()) {\n <mat-label>{{ ngf.label() | dynamicText | async }}</mat-label>\n }\n\n <textarea\n ngForgeControl\n matInput\n [id]=\"textareaId\"\n [formField]=\"ngf.field()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n [style.resize]=\"props()?.resize || 'vertical'\"\n ></textarea>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <mat-hint [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n }\n </mat-form-field>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n mat-form-field {\n width: 100%;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatTextareaFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<string>();\n\n readonly props = input<MatTextareaProps>();\n\n readonly appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline');\n readonly subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic');\n\n readonly floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto');\n readonly hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false);\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatSlideToggle } from '@angular/material/slide-toggle';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\n\nimport { MatToggleProps } from './mat-toggle.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-toggle',\n imports: [MatSlideToggle, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let toggleId = ngf.key() + '-toggle';\n\n <mat-slide-toggle\n ngForgeControl=\"button[role='switch']\"\n [id]=\"toggleId\"\n [formField]=\"f\"\n [color]=\"props()?.color || 'primary'\"\n [labelPosition]=\"props()?.labelPosition || 'after'\"\n [hideIcon]=\"props()?.hideIcon || false\"\n [disableRipple]=\"disableRipple()\"\n [required]=\"!!f().required()\"\n [tabIndex]=\"ngf.tabIndex() ?? 0\"\n class=\"toggle-container\"\n >\n {{ ngf.label() | dynamicText | async }}\n </mat-slide-toggle>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatToggleFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<boolean>();\n\n readonly props = input<MatToggleProps>();\n\n readonly disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false);\n}\n","/**\n * Material Design field type constants\n * Based on available field components in the /fields folder\n */\nexport const MatField = {\n Input: 'input',\n Select: 'select',\n Checkbox: 'checkbox',\n Button: 'button',\n Submit: 'submit',\n Next: 'next',\n Previous: 'previous',\n AddArrayItem: 'addArrayItem',\n PrependArrayItem: 'prependArrayItem',\n InsertArrayItem: 'insertArrayItem',\n RemoveArrayItem: 'removeArrayItem',\n PopArrayItem: 'popArrayItem',\n ShiftArrayItem: 'shiftArrayItem',\n Textarea: 'textarea',\n Radio: 'radio',\n MultiCheckbox: 'multi-checkbox',\n Datepicker: 'datepicker',\n Slider: 'slider',\n Toggle: 'toggle',\n} as const;\n\nexport type MatFieldType = (typeof MatField)[keyof typeof MatField];\n","import { computed, inject, isSignal, Signal } from '@angular/core';\nimport { FieldDef } from '@ng-forge/dynamic-forms';\nimport { ARRAY_CONTEXT, buildBaseInputs, DEFAULT_PROPS } from '@ng-forge/dynamic-forms/integration';\n\n/**\n * Generic button mapper for custom events or basic buttons.\n * For specific button types (submit, next, prev, add/remove array items),\n * use the dedicated field types and their specific mappers.\n *\n * @param fieldDef The button field definition\n * @returns Signal containing Record of input names to values for ngComponentOutlet\n */\nexport function buttonFieldMapper(fieldDef: FieldDef<Record<string, unknown>>): Signal<Record<string, unknown>> {\n const defaultProps = inject(DEFAULT_PROPS);\n const arrayContext = inject(ARRAY_CONTEXT, { optional: true });\n\n return computed(() => {\n const baseInputs = buildBaseInputs(fieldDef, defaultProps());\n\n const inputs: Record<string, unknown> = {\n ...baseInputs,\n };\n\n if (fieldDef.disabled !== undefined) {\n inputs['disabled'] = fieldDef.disabled;\n }\n\n if (fieldDef.hidden !== undefined) {\n inputs['hidden'] = fieldDef.hidden;\n }\n\n // Add event binding for button events\n if ('event' in fieldDef && fieldDef.event !== undefined) {\n inputs['event'] = fieldDef.event;\n }\n\n // Add eventArgs binding if provided\n if ('eventArgs' in fieldDef && fieldDef.eventArgs !== undefined) {\n inputs['eventArgs'] = fieldDef.eventArgs;\n }\n\n // Add eventContext for token resolution (supports $template, $arrayKey, $index, etc.)\n const template = 'template' in fieldDef ? fieldDef.template : undefined;\n if (template || arrayContext) {\n // Read signal value if index is a signal (supports differential updates)\n const getIndex = () => {\n if (!arrayContext) return -1;\n return isSignal(arrayContext.index) ? arrayContext.index() : arrayContext.index;\n };\n\n inputs['eventContext'] = {\n key: fieldDef.key,\n index: getIndex(),\n arrayKey: arrayContext?.arrayKey ?? '',\n formValue: arrayContext?.formValue ?? {},\n template,\n };\n }\n\n return inputs;\n });\n}\n","import { FieldTypeDefinition } from '@ng-forge/dynamic-forms/integration';\nimport {\n addArrayItemButtonMapper,\n checkboxFieldMapper,\n datepickerFieldMapper,\n insertArrayItemButtonMapper,\n optionsFieldMapper,\n popArrayItemButtonMapper,\n prependArrayItemButtonMapper,\n removeArrayItemButtonMapper,\n shiftArrayItemButtonMapper,\n valueFieldMapper,\n} from '@ng-forge/dynamic-forms/integration';\nimport { MatField } from '../types/types';\nimport { buttonFieldMapper } from '../fields/button/mat-button.mapper';\nimport { nextButtonFieldMapper, previousButtonFieldMapper, submitButtonFieldMapper } from '../fields/button/mat-specific-button.mapper';\n\n/**\n * Base for value-bearing field types — waits for the mapper to emit the `field`\n * input before instantiating the component (matches NgForgeField's\n * `input.required<FieldTree<T>>()` contract).\n */\nconst VALUE_FIELD_TYPES_BASE = {\n renderReadyWhen: ['field'],\n} as const;\n\n/**\n * Base for action/button field types that don't bind to a form value.\n * Renders immediately, opted out of form-value collection.\n */\nconst BUTTON_FIELD_TYPES_BASE = {\n renderReadyWhen: [],\n valueHandling: 'exclude',\n} as const;\n\n/**\n * Material Design field type definitions\n * Follows the FieldTypeDefinition interface for proper registry integration\n */\nexport const MATERIAL_FIELD_TYPES: FieldTypeDefinition[] = [\n {\n name: MatField.Input,\n loadComponent: () => import('../fields/input/mat-input.component'),\n mapper: valueFieldMapper,\n propsToMeta: ['type'],\n scope: ['text-input', 'numeric'],\n addons: {\n slots: ['prefix', 'suffix'],\n },\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Select,\n loadComponent: () => import('../fields/select/mat-select.component'),\n mapper: optionsFieldMapper,\n scope: 'single-select',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Checkbox,\n loadComponent: () => import('../fields/checkbox/mat-checkbox.component'),\n mapper: checkboxFieldMapper,\n scope: 'boolean',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Button,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: buttonFieldMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Submit,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: submitButtonFieldMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Next,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: nextButtonFieldMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Previous,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: previousButtonFieldMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.AddArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: addArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.PrependArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: prependArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.InsertArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: insertArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.RemoveArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: removeArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.PopArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: popArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.ShiftArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: shiftArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Textarea,\n loadComponent: () => import('../fields/textarea/mat-textarea.component'),\n mapper: valueFieldMapper,\n propsToMeta: ['rows', 'cols'],\n scope: 'text-input',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Radio,\n loadComponent: () => import('../fields/radio/mat-radio.component'),\n mapper: optionsFieldMapper,\n scope: 'single-select',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.MultiCheckbox,\n loadComponent: () => import('../fields/multi-checkbox/mat-multi-checkbox.component'),\n mapper: optionsFieldMapper,\n scope: 'multi-select',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Datepicker,\n loadComponent: () => import('../fields/datepicker/mat-datepicker.component'),\n mapper: datepickerFieldMapper,\n scope: 'date',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Slider,\n loadComponent: () => import('../fields/slider/mat-slider.component'),\n mapper: valueFieldMapper,\n scope: 'numeric',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Toggle,\n loadComponent: () => import('../fields/toggle/mat-toggle.component'),\n mapper: checkboxFieldMapper,\n scope: 'boolean',\n ...VALUE_FIELD_TYPES_BASE,\n },\n];\n","import type { Provider } from '@angular/core';\nimport { DynamicFormError, type AddonTypeDefinition } from '@ng-forge/dynamic-forms';\nimport { ADDON_TYPE_DEFINITIONS, type FieldTypeDefinition } from '@ng-forge/dynamic-forms/integration';\nimport { MATERIAL_FIELD_TYPES } from '../config/material-field-config';\nimport { MaterialConfig } from '../models/material-config';\nimport { MATERIAL_CONFIG } from '../models/material-config.token';\nimport type { MatButtonAddon, MatIconAddon } from '../types/addons';\n\n/** Field type definitions for Material Design components. */\nexport type MaterialFieldTypes = FieldTypeDefinition[];\n\ntype MaterialConfigFeature = {\n ɵkind: 'material-config';\n ɵproviders: Provider[];\n};\n\n/**\n * Default `withMaterialFields()` shape — field defs + the auto-included\n * addons feature so `mat-icon` / `mat-button` work out of the box.\n */\ntype MaterialFieldsWithAddons = [...MaterialFieldTypes, MaterialAddonsFeature];\n\ntype MaterialFieldsWithConfig = [...MaterialFieldTypes, MaterialAddonsFeature, MaterialConfigFeature];\n\n/**\n * Configure dynamic forms with Material Design field types, with\n * Material-shipped addon types (`mat-icon`, `mat-button`) auto-included so\n * addons work out of the box.\n *\n * @param config - Optional global configuration for Material form fields\n * @returns Tuple of field type definitions, the addons feature, and\n * optionally a config feature.\n */\nexport function withMaterialFields(): MaterialFieldsWithAddons;\nexport function withMaterialFields(config: MaterialConfig): MaterialFieldsWithConfig;\nexport function withMaterialFields(config: MaterialConfig | undefined): MaterialFieldsWithAddons | MaterialFieldsWithConfig;\nexport function withMaterialFields(config?: MaterialConfig): MaterialFieldsWithAddons | MaterialFieldsWithConfig {\n // Always include the addons feature — mat-icon / mat-button are part of\n // the canonical Material surface.\n const base: unknown[] = [...MATERIAL_FIELD_TYPES, withMaterialAddons()];\n\n if (config) {\n base.push({\n ɵkind: 'material-config',\n ɵproviders: [{ provide: MATERIAL_CONFIG, useValue: config }],\n } satisfies MaterialConfigFeature);\n return base as MaterialFieldsWithConfig;\n }\n\n return base as MaterialFieldsWithAddons;\n}\n\n/* -- Material addon types ----------------------------------------------- */\n\nconst MAT_ICON_KIND: AddonTypeDefinition<MatIconAddon> = {\n type: 'mat-icon',\n loadComponent: () => import('../addons/mat-icon-addon.component').then((m) => m.MatIconAddonComponent),\n validate: (addon, fieldKey) => {\n if (typeof addon.icon !== 'string' || addon.icon.length === 0) {\n throw new DynamicFormError(`Addon type 'mat-icon' requires a non-empty 'icon' string (field: '${fieldKey}').`);\n }\n },\n};\n\nconst MAT_BUTTON_KIND: AddonTypeDefinition<MatButtonAddon> = {\n type: 'mat-button',\n loadComponent: () => import('../addons/mat-button-addon.component').then((m) => m.MatButtonAddonComponent),\n validate: (addon, fieldKey) => {\n // Exactly one of preset / actionRef / action — validator drops the addon\n // (with warning) if the rule is violated.\n const set = [addon.preset, addon.actionRef, addon.action].filter((v) => v !== undefined);\n if (set.length > 1) {\n throw new DynamicFormError(\n `Addon type 'mat-button' on field '${fieldKey}' has more than one of preset/actionRef/action — exactly one allowed.`,\n );\n }\n // Icon-only buttons require ariaLabel for screen readers.\n if (addon.icon && !addon.label && !addon.ariaLabel) {\n throw new DynamicFormError(`Addon type 'mat-button' on field '${fieldKey}' is icon-only — provide 'ariaLabel' for accessibility.`);\n }\n },\n};\n\n/**\n * Feature type discriminant for the Material addons feature. Matches core's\n * `'addons'` type so providers flow through the standard addon-type pipeline\n * in `provideDynamicForm`.\n */\ntype MaterialAddonsFeature = {\n ɵkind: 'addons';\n ɵproviders: Provider[];\n};\n\n/** Register Material-shipped addon types (`mat-icon`, `mat-button`) standalone. */\nexport function withMaterialAddons(): MaterialAddonsFeature {\n return {\n ɵkind: 'addons',\n ɵproviders: [\n { provide: ADDON_TYPE_DEFINITIONS, useValue: MAT_ICON_KIND, multi: true },\n { provide: ADDON_TYPE_DEFINITIONS, useValue: MAT_BUTTON_KIND, multi: true },\n ],\n };\n}\n","import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { MatIcon } from '@angular/material/icon';\nimport { WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport type { MatIconAddon } from '../types/addons';\n\n/** Renderer for the `mat-icon` addon type. */\n@Component({\n selector: 'df-mat-icon-addon',\n imports: [MatIcon, AsyncPipe, DynamicTextPipe],\n template: `<mat-icon [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\">{{ addon().icon }}</mat-icon>`,\n host: {\n '[attr.aria-hidden]': 'hasAriaLabel() ? null : \"true\"',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MatIconAddonComponent {\n readonly addon = input.required<MatIconAddon>();\n /** Accepted for contract uniformity — `NgComponentOutlet` setInput is strict; every type must declare it. */\n readonly fieldInputs = input<WrapperFieldInputs | undefined>();\n\n protected readonly ariaLabel = computed(() => this.addon().ariaLabel);\n protected readonly hasAriaLabel = computed(() => this.addon().ariaLabel !== undefined);\n}\n","import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed } from '@angular/core';\nimport { MatButton, MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatProgressSpinner } from '@angular/material/progress-spinner';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeAddonAction, NgForgeAddonAction } from '@ng-forge/dynamic-forms/integration';\nimport type { MatButtonAddon } from '../types/addons';\n\n/** Renderer for the `mat-button` addon type. */\n@Component({\n selector: 'df-mat-button-addon',\n imports: [MatButton, MatIconButton, MatIcon, MatProgressSpinner, DynamicTextPipe, AsyncPipe],\n hostDirectives: [NgForgeAddonAction],\n template: `\n @if (isIconOnly()) {\n <button\n mat-icon-button\n type=\"button\"\n [color]=\"addon().color ?? null\"\n [disabled]=\"action.disabled() || action.loading()\"\n [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\"\n [attr.aria-busy]=\"action.loading() || null\"\n (click)=\"action.dispatch()\"\n >\n @if (action.loading()) {\n <mat-progress-spinner mode=\"indeterminate\" diameter=\"18\" aria-hidden=\"true\" />\n <span class=\"df-mat-sr-only\" role=\"status\">Loading…</span>\n } @else {\n <mat-icon aria-hidden=\"true\">{{ addon().icon }}</mat-icon>\n }\n </button>\n } @else {\n <button\n mat-button\n type=\"button\"\n [color]=\"addon().color ?? null\"\n [disabled]=\"action.disabled() || action.loading()\"\n [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\"\n [attr.aria-busy]=\"action.loading() || null\"\n (click)=\"action.dispatch()\"\n >\n @if (action.loading()) {\n <mat-progress-spinner mode=\"indeterminate\" diameter=\"18\" aria-hidden=\"true\" />\n <span class=\"df-mat-sr-only\" role=\"status\">Loading…</span>\n } @else if (addon().icon; as icon) {\n <mat-icon aria-hidden=\"true\">{{ icon }}</mat-icon>\n }\n {{ label() | dynamicText | async }}\n </button>\n }\n `,\n styles: [\n `\n .df-mat-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MatButtonAddonComponent {\n protected readonly action = injectNgForgeAddonAction<MatButtonAddon>();\n\n /** Re-exposed for template binding — same signal stored on the directive. */\n protected readonly addon = this.action.addon;\n\n protected readonly label = computed(() => this.addon().label);\n protected readonly ariaLabel = computed(() => this.addon().ariaLabel);\n protected readonly isIconOnly = computed(() => {\n const a = this.addon();\n return !!a.icon && !a.label;\n });\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ng-forge-dynamic-forms-material.mjs","mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0Cc;;;AAKH;;AAEA;;;AAPU;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/BT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACiEE;;;;;;;;;AAQH;;AAEA;;AAEA;;AAEA;;AAEA;;;AAhBU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/DT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDT;;;;;;;;;ACxDD;AACF;;;;ACiKc;;;;AAMH;;AAET,IAKS;;IAGQ;AAER;;AAEA;;AAEA;;AAEA;;IAGU;;;AA3BA;AAlCjB;AACE;AACA;AACD;AACD;gFAME;;AAEE;AACA;AACA;oBAEA;;AAEE;AACE;AACA;;;;;;AAOC;;;;AAIR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/IO;;;;;;;;;;;;;AAcT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGC;AACE;AACA;AACD;AACD;4IAME;;AAEE;AACA;AACA;;;AAIE;AACE;AACA;;;;;;AAOC;;;;AAIR;AACF;;;;;;;;AClHW;;;;AAIH;;AAET;AAEI;;AAEF;IAKO;;;;;AAKP;;;AAGF;AACE;AACE;AAEA;AACE;;AAEJ;AAEA;AACE;AACA;;;AAIE;;AAEJ;;;;;AAMI;;;AAEA;;AAEJ;;;AAlDiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA3CT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACwCE;;;;AAIH;;;AAJU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAJlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACcW;;;;;AAMH;;AAEA;;AAEA;;AAEA;;AAEA;;AAET;;AAhBmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAXlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACDW;;AAGH;;AAEA;;;AALU;;;;;;;;;;;;;;;;;;;;;;;;;AAXlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACDW;;AAGH;;AAEA;;AAEA;;;AAGP;;AACA;;;AAXiB;;;;;;;;;;;;;;AAXlB;;;;AAjBS;;;;;;;;;;;;;;;;;;;;;;;AC6CE;;;AAKH;;AAEA;;AACA;;AAEA;;AACA;;;AAXU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAXlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAW;;;AAKH;;AAEA;;;AAPU;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/BT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACRL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;ACXI;AACJ;AACA;AACA;;;AAKE;AACE;AACA;;;AAKA;;;AAKA;;QAIF;AACA;;AAGI;;AACA;AACF;;;;AAKE;AACA;;;;AAKJ;AACF;AACF;;;ACjCA;;;AAQA;AACE;AACA;;AAOK;AACL;;AAEE;AACA;;AAEA;AACA;AACE;AACD;AACD;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;AACD;;AAEE;AACA;AACA;AACA;AACD;;;;ACnIG;;;;AAOA;;AAE+B;AACjC;;AAGF;AACF;AAEA;AAEA;AACE;AACA;AACA;AACE;AACE;;;;AAKN;AACE;AACA;AACA;;AAIE;AACE;;QAKF;AACE;;;;;;AAkBF;AACA;;;AAGC;;AAEL;;;;;IClFW;;;;AAGU;;;AANR;;;;AATF;AACT;AACA;AACA;AACA;AACE;AACD;;AAEF;;;;;;;;;;ICyDoB;;;;;AAIA;AACjB;;;;;AATS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1DD","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/checkbox/mat-checkbox.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/datepicker/mat-datepicker.component.ts","../../../../packages/dynamic-forms-material/src/lib/addons/preset-actions.ts","../../../../packages/dynamic-forms-material/src/lib/fields/input/mat-input.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/multi-checkbox/mat-multi-checkbox.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/radio/mat-radio.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/select/mat-select.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/slider/mat-slider.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/button/mat-button.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/textarea/mat-textarea.component.ts","../../../../packages/dynamic-forms-material/src/lib/fields/toggle/mat-toggle.component.ts","../../../../packages/dynamic-forms-material/src/lib/types/types.ts","../../../../packages/dynamic-forms-material/src/lib/fields/button/mat-button.mapper.ts","../../../../packages/dynamic-forms-material/src/lib/config/material-field-config.ts","../../../../packages/dynamic-forms-material/src/lib/providers/material-providers.ts","../../../../packages/dynamic-forms-material/src/lib/addons/mat-icon-addon.component.ts","../../../../packages/dynamic-forms-material/src/lib/addons/mat-button-addon.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatCheckbox } from '@angular/material/checkbox';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatCheckboxProps } from './mat-checkbox.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-checkbox',\n imports: [MatCheckbox, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let checkboxId = ngf.key() + '-checkbox';\n\n <mat-checkbox\n ngForgeControl=\"input[type='checkbox']\"\n [id]=\"checkboxId\"\n [formField]=\"f\"\n [labelPosition]=\"props()?.labelPosition || 'after'\"\n [indeterminate]=\"props()?.indeterminate || false\"\n [color]=\"props()?.color || 'primary'\"\n [disableRipple]=\"disableRipple()\"\n [required]=\"!!f().required()\"\n [tabIndex]=\"ngf.tabIndex() ?? 0\"\n [attr.hidden]=\"f().hidden() || null\"\n >\n {{ ngf.label() | dynamicText | async }}\n </mat-checkbox>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\" [attr.hidden]=\"f().hidden() || null\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\" [attr.hidden]=\"f().hidden() || null\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatCheckboxFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<boolean>();\n\n readonly props = input<MatCheckboxProps>();\n\n readonly disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false);\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';\nimport { MatHint, MatInput } from '@angular/material/input';\nimport { MatDatepicker, MatDatepickerInput, MatDatepickerToggle } from '@angular/material/datepicker';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatDatepickerProps } from './mat-datepicker.type';\nimport { provideNativeDateAdapter } from '@angular/material/core';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-datepicker',\n imports: [\n MatFormField,\n MatLabel,\n MatInput,\n MatHint,\n MatDatepicker,\n MatDatepickerInput,\n MatDatepickerToggle,\n MatSuffix,\n FormField,\n MatError,\n DynamicTextPipe,\n AsyncPipe,\n NgForgeControl,\n ],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let inputId = ngf.key() + '-input';\n\n <mat-form-field\n [appearance]=\"appearance()\"\n [subscriptSizing]=\"subscriptSizing()\"\n [floatLabel]=\"floatLabel()\"\n [hideRequiredMarker]=\"hideRequiredMarker()\"\n >\n @if (ngf.label(); as label) {\n <mat-label>{{ label | dynamicText | async }}</mat-label>\n }\n\n <input\n matInput\n ngForgeControl\n [id]=\"inputId\"\n [matDatepicker]=\"picker\"\n [formField]=\"ngf.field()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n />\n\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\" />\n <mat-datepicker #picker [startAt]=\"startAt()\" [startView]=\"props()?.startView || 'month'\" [touchUi]=\"props()?.touchUi ?? false\" />\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <mat-hint [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n }\n </mat-form-field>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n mat-form-field {\n width: 100%;\n }\n `,\n ],\n providers: [provideNativeDateAdapter()],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatDatepickerFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<string>();\n\n readonly minDate = input<Date | null>(null);\n readonly maxDate = input<Date | null>(null);\n readonly startAt = input<Date | null>(null);\n readonly props = input<MatDatepickerProps>();\n\n readonly appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline');\n\n readonly subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic');\n\n readonly floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto');\n\n readonly hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false);\n}\n","import type { AddonActionContext, AddonActionPreset } from '@ng-forge/dynamic-forms';\nimport type { PresetCollaborators } from '@ng-forge/dynamic-forms/integration';\nimport { runPresetAction } from '@ng-forge/dynamic-forms/integration';\n\nexport type { PresetCollaborators };\n\n/** Material adapter binding for the shared preset runner. */\nexport function runMatPresetAction(preset: AddonActionPreset, ctx: AddonActionContext, collaborators: PresetCollaborators): Promise<void> {\n return runPresetAction(preset, ctx, collaborators, 'Material', 'mat-input');\n}\n","import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, signal } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel, MatPrefix, MatSuffix } from '@angular/material/form-field';\nimport { MatHint, MatInput } from '@angular/material/input';\nimport { AddonActionContext, AddonActionPreset, DynamicFormLogger } from '@ng-forge/dynamic-forms';\nimport { DfAddonSlot } from '@ng-forge/dynamic-forms/integration';\nimport { WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';\nimport { DynamicTextPipe, FIELD_SIGNAL_CONTEXT } from '@ng-forge/dynamic-forms/integration';\nimport {\n ADDON_PRESET_HANDLER,\n AddonPresetHandler,\n injectNgForgeAddons,\n injectNgForgeField,\n NgForgeAddons,\n NgForgeControl,\n NgForgeFieldHost,\n} from '@ng-forge/dynamic-forms/integration';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\nimport { runMatPresetAction } from '../../addons/preset-actions';\nimport { MAT_INPUT_TYPE_OVERRIDE } from '../../tokens/input-type-override.token';\nimport { MatInputAddon, MatInputProps } from './mat-input.type';\n\n@Component({\n selector: 'df-mat-input',\n imports: [\n MatFormField,\n MatLabel,\n MatInput,\n MatHint,\n MatError,\n MatPrefix,\n MatSuffix,\n FormField,\n DynamicTextPipe,\n AsyncPipe,\n NgForgeControl,\n DfAddonSlot,\n ],\n hostDirectives: [NgForgeFieldHost, NgForgeAddons],\n template: `\n @let inputId = ngf.key() + '-input';\n\n <mat-form-field\n [appearance]=\"appearance()\"\n [subscriptSizing]=\"subscriptSizing()\"\n [floatLabel]=\"floatLabel()\"\n [hideRequiredMarker]=\"hideRequiredMarker()\"\n >\n @if (ngf.label()) {\n <mat-label>{{ ngf.label() | dynamicText | async }}</mat-label>\n }\n @for (a of ngfa.prefixAddons(); track $index) {\n <df-addon-slot\n matPrefix\n [class.df-mat-addon-text]=\"a.type === 'text'\"\n [addon]=\"a\"\n [fieldInputs]=\"fieldInputs()\"\n [hidden]=\"ngfa.hiddenSignalCache().get(a)\"\n />\n }\n <input\n matInput\n ngForgeControl\n [id]=\"inputId\"\n [formField]=\"ngf.field()\"\n [type]=\"type()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n />\n @for (a of ngfa.suffixAddons(); track $index) {\n <df-addon-slot\n matSuffix\n [class.df-mat-addon-text]=\"a.type === 'text'\"\n [addon]=\"a\"\n [fieldInputs]=\"fieldInputs()\"\n [hidden]=\"ngfa.hiddenSignalCache().get(a)\"\n />\n }\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <mat-hint [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n }\n </mat-form-field>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n mat-form-field {\n width: 100%;\n }\n :host([hidden]) {\n display: none !important;\n }\n /* matPrefix/matSuffix elements have no default Material spacing.\n All four sides + the text-type variants are independent CSS custom\n properties so consumers can tune each individually:\n prefix-outer = prefix slot's left (border-facing) padding\n prefix-inner = prefix slot's right (text-facing) padding\n suffix-inner = suffix slot's left (text-facing) padding\n suffix-outer = suffix slot's right (border-facing) padding\n Text variants override only the INNER side because <mat-icon> has\n ~4-6px optical padding inside its glyph box (so it looks \"padded\"\n even with a small CSS value) while text glyphs sit flush against\n their bounding box and need the extra room to match. */\n :host {\n --df-mat-addon-prefix-outer-padding: 0.75em;\n --df-mat-addon-prefix-inner-padding: 0.5em;\n --df-mat-addon-suffix-inner-padding: 0.5em;\n --df-mat-addon-suffix-outer-padding: 0.75em;\n --df-mat-addon-prefix-text-outer-padding: 1em;\n --df-mat-addon-prefix-text-inner-padding: 1em;\n --df-mat-addon-suffix-text-inner-padding: 1em;\n --df-mat-addon-suffix-text-outer-padding: 1em;\n }\n df-addon-slot[matprefix] {\n padding-left: var(--df-mat-addon-prefix-outer-padding);\n padding-right: var(--df-mat-addon-prefix-inner-padding);\n }\n df-addon-slot[matsuffix] {\n padding-left: var(--df-mat-addon-suffix-inner-padding);\n padding-right: var(--df-mat-addon-suffix-outer-padding);\n }\n df-addon-slot[matprefix].df-mat-addon-text {\n padding-left: var(--df-mat-addon-prefix-text-outer-padding);\n padding-right: var(--df-mat-addon-prefix-text-inner-padding);\n }\n df-addon-slot[matsuffix].df-mat-addon-text {\n padding-left: var(--df-mat-addon-suffix-text-inner-padding);\n padding-right: var(--df-mat-addon-suffix-text-outer-padding);\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: MAT_INPUT_TYPE_OVERRIDE,\n useFactory: () => signal<string | undefined>(undefined),\n },\n {\n // Adapter-specific preset semantics for `mat-button` addons (clear /\n // reset / paste / copy / toggle-password-visibility). The directive\n // (`NgForgeAddonAction`) delegates here when an addon configures a\n // `preset`. Per-mat-input-instance so the `typeOverride` signal is\n // scoped to one field.\n provide: ADDON_PRESET_HANDLER,\n useFactory: (): AddonPresetHandler => {\n const typeOverride = inject(MAT_INPUT_TYPE_OVERRIDE);\n const fsc = inject(FIELD_SIGNAL_CONTEXT, { optional: true });\n const logger = inject(DynamicFormLogger);\n // forwardRef for baselineType only — host.props()?.type gates toggle-password-visibility.\n const host = inject(forwardRef(() => MatInputFieldComponent));\n return {\n run: (preset: string, ctx: AddonActionContext) => {\n const fieldKey = ctx.field.key;\n return runMatPresetAction(preset as AddonActionPreset, ctx, {\n typeOverride,\n fieldValueSetter: ctx.setValue,\n fieldDefaultValueGetter:\n fsc && fieldKey ? () => (fsc.defaultValues() as Record<string, unknown> | undefined)?.[fieldKey] : undefined,\n baselineType: () => host.props()?.type,\n logger,\n });\n },\n };\n },\n },\n ],\n})\nexport default class MatInputFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<string>();\n protected readonly ngfa = injectNgForgeAddons<MatInputAddon>();\n\n readonly props = input<MatInputProps>();\n\n /**\n * Wrapper-style host bag pushed by `DfFieldOutlet`. Declared at the\n * component level so `setInputIfDeclared` (which uses\n * `reflectComponentType`) can write it.\n */\n readonly fieldInputs = input<WrapperFieldInputs | undefined>();\n\n /** Per-instance type override populated by `toggle-password-visibility` preset. */\n private readonly typeOverride = inject(MAT_INPUT_TYPE_OVERRIDE);\n\n readonly appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline');\n\n readonly subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic');\n\n readonly floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto');\n\n readonly hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false);\n\n /** Override (set by `toggle-password-visibility` preset) wins over `props().type`. */\n protected readonly type = computed(() => this.typeOverride() ?? this.props()?.type ?? 'text');\n}\n","import { ChangeDetectionStrategy, Component, computed, input, linkedSignal } from '@angular/core';\nimport { MatCheckbox } from '@angular/material/checkbox';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeField, NgForgeFieldHost, isEqual, NgForgeControl } from '@ng-forge/dynamic-forms/integration';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport { MatMultiCheckboxProps } from './mat-multi-checkbox.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n selector: 'df-mat-multi-checkbox',\n imports: [MatCheckbox, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let checkboxGroupId = ngf.key() + '-checkbox-group';\n @let checked = checkedValuesMap();\n\n @if (ngf.label(); as label) {\n <div class=\"checkbox-group-label\">{{ label | dynamicText | async }}</div>\n }\n\n <div\n [id]=\"checkboxGroupId\"\n class=\"checkbox-group\"\n role=\"group\"\n [attr.aria-invalid]=\"ngf.ariaInvalid()\"\n [attr.aria-required]=\"ngf.ariaRequired()\"\n [attr.aria-describedby]=\"ngf.ariaDescribedBy()\"\n >\n @for (option of options(); track option.value) {\n <mat-checkbox\n ngForgeControl=\"input[type='checkbox']\"\n [checked]=\"checked['' + option.value]\"\n [disabled]=\"f().disabled() || option.disabled\"\n [color]=\"props()?.color || 'primary'\"\n [labelPosition]=\"props()?.labelPosition || 'after'\"\n (change)=\"onCheckboxChange(option, $event.checked)\"\n >\n {{ option.label | dynamicText | async }}\n </mat-checkbox>\n }\n </div>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatMultiCheckboxFieldComponent {\n protected readonly ngf = injectNgForgeField<ValueType[]>();\n\n readonly options = input<FieldOption<ValueType>[]>([]);\n readonly props = input<MatMultiCheckboxProps>();\n\n valueViewModel = linkedSignal<FieldOption<ValueType>[]>(\n () => {\n const currentValues = this.ngf.field()().value();\n return this.options().filter((option) => currentValues.includes(option.value));\n },\n { equal: isEqual },\n );\n\n /** Computed map of checked option values for O(1) lookup in template */\n readonly checkedValuesMap = computed(() => {\n const map: Record<string, boolean> = {};\n for (const opt of this.valueViewModel()) {\n map[String(opt.value)] = true;\n }\n return map;\n });\n\n constructor() {\n explicitEffect([this.valueViewModel], ([selectedOptions]) => {\n const selectedValues = selectedOptions.map((option) => option.value);\n\n if (!isEqual(selectedValues, this.ngf.field()().value())) {\n this.ngf.field()().value.set(selectedValues);\n }\n });\n\n explicitEffect([this.options], ([options]) => {\n const values = options.map((option) => option.value);\n const uniqueValues = new Set(values);\n\n if (values.length !== uniqueValues.size) {\n const duplicates = values.filter((value, index) => values.indexOf(value) !== index);\n throw new Error(`Duplicate option values detected in mat-multi-checkbox: ${duplicates.join(', ')}`);\n }\n });\n }\n\n onCheckboxChange(option: FieldOption<ValueType>, checked: boolean): void {\n this.valueViewModel.update((currentOptions) => {\n if (checked) {\n return currentOptions.some((opt) => opt.value === option.value) ? currentOptions : [...currentOptions, option];\n } else {\n return currentOptions.filter((opt) => opt.value !== option.value);\n }\n });\n }\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatRadioButton, MatRadioGroup } from '@angular/material/radio';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatRadioProps } from './mat-radio.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n selector: 'df-mat-radio',\n imports: [MatRadioGroup, MatRadioButton, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let radioGroupId = ngf.key() + '-radio-group';\n\n @if (ngf.label()) {\n <div class=\"radio-label\">{{ ngf.label() | dynamicText | async }}</div>\n }\n\n <mat-radio-group\n [id]=\"radioGroupId\"\n [formField]=\"f\"\n [attr.aria-invalid]=\"ngf.ariaInvalid()\"\n [attr.aria-required]=\"ngf.ariaRequired()\"\n [attr.aria-describedby]=\"ngf.ariaDescribedBy()\"\n >\n @for (option of options(); track option.value) {\n <mat-radio-button\n ngForgeControl=\"input[type='radio']\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled || false\"\n [color]=\"props()?.color || 'primary'\"\n [labelPosition]=\"props()?.labelPosition || 'after'\"\n >\n {{ option.label | dynamicText | async }}\n </mat-radio-button>\n }\n </mat-radio-group>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatRadioFieldComponent {\n protected readonly ngf = injectNgForgeField<ValueType>();\n\n readonly options = input<FieldOption<ValueType>[]>([]);\n readonly props = input<MatRadioProps>();\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatOption, MatSelect } from '@angular/material/select';\nimport { MatHint } from '@angular/material/input';\nimport { FieldOption, ValueType } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatSelectProps } from './mat-select.type';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-select',\n imports: [MatFormField, MatLabel, MatSelect, MatOption, MatHint, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let selectId = ngf.key() + '-select';\n\n <mat-form-field\n [appearance]=\"appearance()\"\n [subscriptSizing]=\"subscriptSizing()\"\n [floatLabel]=\"floatLabel()\"\n [hideRequiredMarker]=\"hideRequiredMarker()\"\n >\n @if (ngf.label(); as label) {\n <mat-label>{{ label | dynamicText | async }}</mat-label>\n }\n\n <mat-select\n ngForgeControl\n [id]=\"selectId\"\n [formField]=\"ngf.field()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [multiple]=\"props()?.multiple || false\"\n [compareWith]=\"props()?.compareWith || defaultCompare\"\n >\n @for (option of options(); track option.value) {\n <mat-option [value]=\"option.value\" [disabled]=\"option.disabled || false\">\n {{ option.label | dynamicText | async }}\n </mat-option>\n }\n </mat-select>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <mat-hint [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n }\n </mat-form-field>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n mat-form-field {\n width: 100%;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatSelectFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<ValueType>();\n\n readonly options = input<FieldOption<ValueType>[]>([]);\n readonly props = input<MatSelectProps>();\n\n readonly appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline');\n\n readonly subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic');\n\n readonly floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto');\n\n readonly hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false);\n\n defaultCompare = Object.is;\n}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatSlider, MatSliderThumb } from '@angular/material/slider';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatSliderProps } from './mat-slider.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n selector: 'df-mat-slider',\n imports: [MatSlider, MatSliderThumb, MatError, DynamicTextPipe, AsyncPipe, FormField, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let inputId = ngf.key() + '-input';\n\n @if (ngf.label(); as label) {\n <label class=\"slider-label\" [for]=\"inputId\">{{ label | dynamicText | async }}</label>\n }\n\n <mat-slider\n [min]=\"f().min?.() ?? 0\"\n [max]=\"f().max?.() ?? 100\"\n [step]=\"step() ?? props()?.step ?? 1\"\n [discrete]=\"props()?.thumbLabel || props()?.showThumbLabel\"\n [showTickMarks]=\"props()?.tickInterval !== undefined\"\n [color]=\"props()?.color || 'primary'\"\n class=\"slider-container\"\n >\n <input matSliderThumb ngForgeControl [id]=\"inputId\" [formField]=\"f\" [attr.tabindex]=\"ngf.tabIndex()\" />\n </mat-slider>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n .slider-container {\n width: 100%;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatSliderFieldComponent {\n protected readonly ngf = injectNgForgeField<number>();\n\n readonly step = input<number>();\n\n readonly props = input<MatSliderProps>();\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { MatButton } from '@angular/material/button';\nimport { AsyncPipe } from '@angular/common';\nimport { FormEvent } from '@ng-forge/dynamic-forms';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeAction, NgForgeActionHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatButtonProps } from './mat-button.type';\n\n@Component({\n selector: 'df-mat-button',\n imports: [MatButton, DynamicTextPipe, AsyncPipe],\n hostDirectives: [NgForgeActionHost],\n template: `\n @let buttonId = action.key() + '-button';\n <button\n mat-raised-button\n [id]=\"buttonId\"\n [type]=\"buttonType()\"\n [color]=\"props()?.color || 'primary'\"\n [disabled]=\"action.disabled()\"\n [attr.tabindex]=\"action.tabIndex()\"\n [attr.data-testid]=\"buttonTestId()\"\n (click)=\"onClick()\"\n >\n {{ action.label() | dynamicText | async }}\n </button>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n button {\n min-width: fit-content;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatButtonFieldComponent<TEvent extends FormEvent> {\n protected readonly action = injectNgForgeAction<TEvent>();\n\n readonly props = input<MatButtonProps>();\n\n readonly buttonType = computed(() => this.props()?.type ?? 'button');\n\n readonly buttonTestId = computed(() => `${this.buttonType()}-${this.action.key()}`);\n\n onClick(): void {\n if (this.buttonType() === 'submit') return;\n this.action.dispatch();\n }\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatError, MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatHint, MatInput } from '@angular/material/input';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { MatTextareaProps } from './mat-textarea.type';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-textarea',\n imports: [MatFormField, MatLabel, MatInput, MatHint, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let textareaId = ngf.key() + '-textarea';\n\n <mat-form-field\n [appearance]=\"appearance()\"\n [subscriptSizing]=\"subscriptSizing()\"\n [floatLabel]=\"floatLabel()\"\n [hideRequiredMarker]=\"hideRequiredMarker()\"\n >\n @if (ngf.label()) {\n <mat-label>{{ ngf.label() | dynamicText | async }}</mat-label>\n }\n\n <textarea\n ngForgeControl\n matInput\n [id]=\"textareaId\"\n [formField]=\"ngf.field()\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n [style.resize]=\"props()?.resize || 'vertical'\"\n ></textarea>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <mat-hint [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n }\n </mat-form-field>\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n mat-form-field {\n width: 100%;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatTextareaFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<string>();\n\n readonly props = input<MatTextareaProps>();\n\n readonly appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline');\n readonly subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic');\n\n readonly floatLabel = computed(() => this.props()?.floatLabel ?? this.materialConfig?.floatLabel ?? 'auto');\n readonly hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false);\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { MatSlideToggle } from '@angular/material/slide-toggle';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\n\nimport { MatToggleProps } from './mat-toggle.type';\nimport { MatError } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '../../models/material-config.token';\n\n@Component({\n selector: 'df-mat-toggle',\n imports: [MatSlideToggle, FormField, MatError, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let toggleId = ngf.key() + '-toggle';\n\n <mat-slide-toggle\n ngForgeControl=\"button[role='switch']\"\n [id]=\"toggleId\"\n [formField]=\"f\"\n [color]=\"props()?.color || 'primary'\"\n [labelPosition]=\"props()?.labelPosition || 'after'\"\n [hideIcon]=\"props()?.hideIcon || false\"\n [disableRipple]=\"disableRipple()\"\n [required]=\"!!f().required()\"\n [tabIndex]=\"ngf.tabIndex() ?? 0\"\n class=\"toggle-container\"\n >\n {{ ngf.label() | dynamicText | async }}\n </mat-slide-toggle>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <mat-error [id]=\"ngf.errorId()\">{{ error.message }}</mat-error>\n } @else if (props()?.hint; as hint) {\n <div class=\"mat-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</div>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class MatToggleFieldComponent {\n private materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n protected readonly ngf = injectNgForgeField<boolean>();\n\n readonly props = input<MatToggleProps>();\n\n readonly disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false);\n}\n","/**\n * Material Design field type constants\n * Based on available field components in the /fields folder\n */\nexport const MatField = {\n Input: 'input',\n Select: 'select',\n Checkbox: 'checkbox',\n Button: 'button',\n Submit: 'submit',\n Next: 'next',\n Previous: 'previous',\n AddArrayItem: 'add-array-item',\n PrependArrayItem: 'prepend-array-item',\n InsertArrayItem: 'insert-array-item',\n RemoveArrayItem: 'remove-array-item',\n PopArrayItem: 'pop-array-item',\n ShiftArrayItem: 'shift-array-item',\n Textarea: 'textarea',\n Radio: 'radio',\n MultiCheckbox: 'multi-checkbox',\n Datepicker: 'datepicker',\n Slider: 'slider',\n Toggle: 'toggle',\n} as const;\n\nexport type MatFieldType = (typeof MatField)[keyof typeof MatField];\n","import { computed, inject, isSignal, Signal } from '@angular/core';\nimport { FieldDef } from '@ng-forge/dynamic-forms';\nimport { ARRAY_CONTEXT, buildBaseInputs, DEFAULT_PROPS, injectNonFieldLogicResolver } from '@ng-forge/dynamic-forms/integration';\n\n/**\n * Generic button mapper for custom events or basic buttons.\n * For specific button types (submit, next, prev, add/remove array items),\n * use the dedicated field types and their specific mappers.\n *\n * @param fieldDef The button field definition\n * @returns Signal containing Record of input names to values for ngComponentOutlet\n */\nexport function buttonFieldMapper(fieldDef: FieldDef<Record<string, unknown>>): Signal<Record<string, unknown>> {\n const defaultProps = inject(DEFAULT_PROPS);\n const arrayContext = inject(ARRAY_CONTEXT, { optional: true });\n const resolveLogic = injectNonFieldLogicResolver(fieldDef);\n\n return computed(() => {\n const baseInputs = buildBaseInputs(fieldDef, defaultProps());\n\n const inputs: Record<string, unknown> = {\n ...baseInputs,\n ...resolveLogic(),\n };\n\n // Add event binding for button events\n if ('event' in fieldDef && fieldDef.event !== undefined) {\n inputs['event'] = fieldDef.event;\n }\n\n // Add eventArgs binding if provided\n if ('eventArgs' in fieldDef && fieldDef.eventArgs !== undefined) {\n inputs['eventArgs'] = fieldDef.eventArgs;\n }\n\n // Add eventContext for token resolution (supports $template, $arrayKey, $index, etc.)\n const template = 'template' in fieldDef ? fieldDef.template : undefined;\n if (template || arrayContext) {\n // Read signal value if index is a signal (supports differential updates)\n const getIndex = () => {\n if (!arrayContext) return -1;\n return isSignal(arrayContext.index) ? arrayContext.index() : arrayContext.index;\n };\n\n inputs['eventContext'] = {\n key: fieldDef.key,\n index: getIndex(),\n arrayKey: arrayContext?.arrayKey ?? '',\n formValue: arrayContext?.formValue ?? {},\n template,\n };\n }\n\n return inputs;\n });\n}\n","import { FieldTypeDefinition } from '@ng-forge/dynamic-forms/integration';\nimport {\n addArrayItemButtonMapper,\n checkboxFieldMapper,\n datepickerFieldMapper,\n insertArrayItemButtonMapper,\n optionsFieldMapper,\n popArrayItemButtonMapper,\n prependArrayItemButtonMapper,\n removeArrayItemButtonMapper,\n shiftArrayItemButtonMapper,\n valueFieldMapper,\n} from '@ng-forge/dynamic-forms/integration';\nimport { MatField } from '../types/types';\nimport { buttonFieldMapper } from '../fields/button/mat-button.mapper';\nimport { nextButtonFieldMapper, previousButtonFieldMapper, submitButtonFieldMapper } from '../fields/button/mat-specific-button.mapper';\n\n/**\n * Base for value-bearing field types — waits for the mapper to emit the `field`\n * input before instantiating the component (matches NgForgeField's\n * `input.required<FieldTree<T>>()` contract).\n */\nconst VALUE_FIELD_TYPES_BASE = {\n renderReadyWhen: ['field'],\n} as const;\n\n/**\n * Base for action/button field types that don't bind to a form value.\n * Renders immediately, opted out of form-value collection.\n */\nconst BUTTON_FIELD_TYPES_BASE = {\n renderReadyWhen: [],\n valueHandling: 'exclude',\n} as const;\n\n/**\n * Material Design field type definitions\n * Follows the FieldTypeDefinition interface for proper registry integration\n */\nexport const MATERIAL_FIELD_TYPES: FieldTypeDefinition[] = [\n {\n name: MatField.Input,\n loadComponent: () => import('../fields/input/mat-input.component'),\n mapper: valueFieldMapper,\n propsToMeta: ['type'],\n scope: ['text-input', 'numeric'],\n addons: {\n slots: ['prefix', 'suffix'],\n },\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Select,\n loadComponent: () => import('../fields/select/mat-select.component'),\n mapper: optionsFieldMapper,\n scope: 'single-select',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Checkbox,\n loadComponent: () => import('../fields/checkbox/mat-checkbox.component'),\n mapper: checkboxFieldMapper,\n scope: 'boolean',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Button,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: buttonFieldMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Submit,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: submitButtonFieldMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Next,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: nextButtonFieldMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Previous,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: previousButtonFieldMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.AddArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: addArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.PrependArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: prependArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.InsertArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: insertArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.RemoveArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: removeArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.PopArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: popArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.ShiftArrayItem,\n loadComponent: () => import('../fields/button/mat-button.component'),\n mapper: shiftArrayItemButtonMapper,\n ...BUTTON_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Textarea,\n loadComponent: () => import('../fields/textarea/mat-textarea.component'),\n mapper: valueFieldMapper,\n propsToMeta: ['rows', 'cols'],\n scope: 'text-input',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Radio,\n loadComponent: () => import('../fields/radio/mat-radio.component'),\n mapper: optionsFieldMapper,\n scope: 'single-select',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.MultiCheckbox,\n loadComponent: () => import('../fields/multi-checkbox/mat-multi-checkbox.component'),\n mapper: optionsFieldMapper,\n scope: 'multi-select',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Datepicker,\n loadComponent: () => import('../fields/datepicker/mat-datepicker.component'),\n mapper: datepickerFieldMapper,\n scope: 'date',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Slider,\n loadComponent: () => import('../fields/slider/mat-slider.component'),\n mapper: valueFieldMapper,\n scope: 'numeric',\n ...VALUE_FIELD_TYPES_BASE,\n },\n {\n name: MatField.Toggle,\n loadComponent: () => import('../fields/toggle/mat-toggle.component'),\n mapper: checkboxFieldMapper,\n scope: 'boolean',\n ...VALUE_FIELD_TYPES_BASE,\n },\n];\n","import type { Provider } from '@angular/core';\nimport { DynamicFormError, type AddonTypeDefinition } from '@ng-forge/dynamic-forms';\nimport { ADDON_TYPE_DEFINITIONS, type FieldTypeDefinition } from '@ng-forge/dynamic-forms/integration';\nimport { MATERIAL_FIELD_TYPES } from '../config/material-field-config';\nimport { MaterialConfig } from '../models/material-config';\nimport { MATERIAL_CONFIG } from '../models/material-config.token';\nimport type { MatButtonAddon, MatIconAddon } from '../types/addons';\n\n/** Field type definitions for Material Design components. */\nexport type MaterialFieldTypes = FieldTypeDefinition[];\n\ntype MaterialConfigFeature = {\n ɵkind: 'material-config';\n ɵproviders: Provider[];\n};\n\n/**\n * Default `withMaterialFields()` shape — field defs + the auto-included\n * addons feature so `mat-icon` / `mat-button` work out of the box.\n */\ntype MaterialFieldsWithAddons = [...MaterialFieldTypes, MaterialAddonsFeature];\n\ntype MaterialFieldsWithConfig = [...MaterialFieldTypes, MaterialAddonsFeature, MaterialConfigFeature];\n\n/**\n * Configure dynamic forms with Material Design field types, with\n * Material-shipped addon types (`mat-icon`, `mat-button`) auto-included so\n * addons work out of the box.\n *\n * @param config - Optional global configuration for Material form fields\n * @returns Tuple of field type definitions, the addons feature, and\n * optionally a config feature.\n */\nexport function withMaterialFields(): MaterialFieldsWithAddons;\nexport function withMaterialFields(config: MaterialConfig): MaterialFieldsWithConfig;\nexport function withMaterialFields(config: MaterialConfig | undefined): MaterialFieldsWithAddons | MaterialFieldsWithConfig;\nexport function withMaterialFields(config?: MaterialConfig): MaterialFieldsWithAddons | MaterialFieldsWithConfig {\n // Always include the addons feature — mat-icon / mat-button are part of\n // the canonical Material surface.\n const base: unknown[] = [...MATERIAL_FIELD_TYPES, withMaterialAddons()];\n\n if (config) {\n base.push({\n ɵkind: 'material-config',\n ɵproviders: [{ provide: MATERIAL_CONFIG, useValue: config }],\n } satisfies MaterialConfigFeature);\n return base as MaterialFieldsWithConfig;\n }\n\n return base as MaterialFieldsWithAddons;\n}\n\n/* -- Material addon types ----------------------------------------------- */\n\nconst MAT_ICON_KIND: AddonTypeDefinition<MatIconAddon> = {\n type: 'mat-icon',\n loadComponent: () => import('../addons/mat-icon-addon.component').then((m) => m.MatIconAddonComponent),\n validate: (addon, fieldKey) => {\n if (typeof addon.icon !== 'string' || addon.icon.length === 0) {\n throw new DynamicFormError(`Addon type 'mat-icon' requires a non-empty 'icon' string (field: '${fieldKey}').`);\n }\n },\n};\n\nconst MAT_BUTTON_KIND: AddonTypeDefinition<MatButtonAddon> = {\n type: 'mat-button',\n loadComponent: () => import('../addons/mat-button-addon.component').then((m) => m.MatButtonAddonComponent),\n validate: (addon, fieldKey) => {\n // Exactly one of preset / actionRef / action — validator drops the addon\n // (with warning) if the rule is violated.\n const set = [addon.preset, addon.actionRef, addon.action].filter((v) => v !== undefined);\n if (set.length > 1) {\n throw new DynamicFormError(\n `Addon type 'mat-button' on field '${fieldKey}' has more than one of preset/actionRef/action — exactly one allowed.`,\n );\n }\n // Icon-only buttons require ariaLabel for screen readers.\n if (addon.icon && !addon.label && !addon.ariaLabel) {\n throw new DynamicFormError(`Addon type 'mat-button' on field '${fieldKey}' is icon-only — provide 'ariaLabel' for accessibility.`);\n }\n },\n};\n\n/**\n * Feature type discriminant for the Material addons feature. Matches core's\n * `'addons'` type so providers flow through the standard addon-type pipeline\n * in `provideDynamicForm`.\n */\ntype MaterialAddonsFeature = {\n ɵkind: 'addons';\n ɵproviders: Provider[];\n};\n\n/** Register Material-shipped addon types (`mat-icon`, `mat-button`) standalone. */\nexport function withMaterialAddons(): MaterialAddonsFeature {\n return {\n ɵkind: 'addons',\n ɵproviders: [\n { provide: ADDON_TYPE_DEFINITIONS, useValue: MAT_ICON_KIND, multi: true },\n { provide: ADDON_TYPE_DEFINITIONS, useValue: MAT_BUTTON_KIND, multi: true },\n ],\n };\n}\n","import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { MatIcon } from '@angular/material/icon';\nimport { WrapperFieldInputs } from '@ng-forge/dynamic-forms/integration';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport type { MatIconAddon } from '../types/addons';\n\n/** Renderer for the `mat-icon` addon type. */\n@Component({\n selector: 'df-mat-icon-addon',\n imports: [MatIcon, AsyncPipe, DynamicTextPipe],\n template: `<mat-icon [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\">{{ addon().icon }}</mat-icon>`,\n host: {\n '[attr.aria-hidden]': 'hasAriaLabel() ? null : \"true\"',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MatIconAddonComponent {\n readonly addon = input.required<MatIconAddon>();\n /** Accepted for contract uniformity — `NgComponentOutlet` setInput is strict; every type must declare it. */\n readonly fieldInputs = input<WrapperFieldInputs | undefined>();\n\n protected readonly ariaLabel = computed(() => this.addon().ariaLabel);\n protected readonly hasAriaLabel = computed(() => this.addon().ariaLabel !== undefined);\n}\n","import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed } from '@angular/core';\nimport { MatButton, MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatProgressSpinner } from '@angular/material/progress-spinner';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { injectNgForgeAddonAction, NgForgeAddonAction } from '@ng-forge/dynamic-forms/integration';\nimport type { MatButtonAddon } from '../types/addons';\n\n/** Renderer for the `mat-button` addon type. */\n@Component({\n selector: 'df-mat-button-addon',\n imports: [MatButton, MatIconButton, MatIcon, MatProgressSpinner, DynamicTextPipe, AsyncPipe],\n hostDirectives: [NgForgeAddonAction],\n template: `\n @if (isIconOnly()) {\n <button\n mat-icon-button\n type=\"button\"\n [color]=\"addon().color ?? null\"\n [disabled]=\"action.disabled() || action.loading()\"\n [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\"\n [attr.aria-busy]=\"action.loading() || null\"\n (click)=\"action.dispatch()\"\n >\n @if (action.loading()) {\n <mat-progress-spinner mode=\"indeterminate\" diameter=\"18\" aria-hidden=\"true\" />\n <span class=\"df-mat-sr-only\" role=\"status\">Loading…</span>\n } @else {\n <mat-icon aria-hidden=\"true\">{{ addon().icon }}</mat-icon>\n }\n </button>\n } @else {\n <button\n mat-button\n type=\"button\"\n [color]=\"addon().color ?? null\"\n [disabled]=\"action.disabled() || action.loading()\"\n [attr.aria-label]=\"(ariaLabel() | dynamicText | async) ?? null\"\n [attr.aria-busy]=\"action.loading() || null\"\n (click)=\"action.dispatch()\"\n >\n @if (action.loading()) {\n <mat-progress-spinner mode=\"indeterminate\" diameter=\"18\" aria-hidden=\"true\" />\n <span class=\"df-mat-sr-only\" role=\"status\">Loading…</span>\n } @else if (addon().icon; as icon) {\n <mat-icon aria-hidden=\"true\">{{ icon }}</mat-icon>\n }\n {{ label() | dynamicText | async }}\n </button>\n }\n `,\n styles: [\n `\n .df-mat-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MatButtonAddonComponent {\n protected readonly action = injectNgForgeAddonAction<MatButtonAddon>();\n\n /** Re-exposed for template binding — same signal stored on the directive. */\n protected readonly addon = this.action.addon;\n\n protected readonly label = computed(() => this.addon().label);\n protected readonly ariaLabel = computed(() => this.addon().ariaLabel);\n protected readonly isIconOnly = computed(() => {\n const a = this.addon();\n return !!a.icon && !a.label;\n });\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ng-forge/dynamic-forms-material",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0-next.1",
|
|
4
4
|
"description": "Angular Material integration for @ng-forge/dynamic-forms. Pre-built Material Design form components.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -38,16 +38,17 @@
|
|
|
38
38
|
"node": "^22.22.3 || ^24.15.0 || >=26.0.0"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
|
-
"@angular/common": "
|
|
42
|
-
"@angular/core": "
|
|
43
|
-
"@angular/forms": "
|
|
44
|
-
"@angular/material": "
|
|
45
|
-
"@ng-forge/dynamic-forms": "~1.
|
|
41
|
+
"@angular/common": "^22.0.0",
|
|
42
|
+
"@angular/core": "^22.0.0",
|
|
43
|
+
"@angular/forms": "^22.0.0",
|
|
44
|
+
"@angular/material": "^22.0.0",
|
|
45
|
+
"@ng-forge/dynamic-forms": "~1.1.0-next.1",
|
|
46
46
|
"rxjs": ">=7.0.0"
|
|
47
47
|
},
|
|
48
|
-
"module": "fesm2022/ng-forge-dynamic-forms-material.mjs",
|
|
49
|
-
"typings": "types/ng-forge-dynamic-forms-material.d.ts",
|
|
50
48
|
"dependencies": {
|
|
49
|
+
"ngxtension": ">=4.0.0",
|
|
51
50
|
"tslib": "^2.3.0"
|
|
52
|
-
}
|
|
51
|
+
},
|
|
52
|
+
"module": "fesm2022/ng-forge-dynamic-forms-material.mjs",
|
|
53
|
+
"typings": "types/ng-forge-dynamic-forms-material.d.ts"
|
|
53
54
|
}
|
|
@@ -290,8 +290,8 @@ type MatPreviousButtonField = Omit<MatButtonField<PreviousPageEvent>, 'event' |
|
|
|
290
290
|
type: 'previous';
|
|
291
291
|
};
|
|
292
292
|
/** Add array item button field - dispatches AppendArrayItemEvent */
|
|
293
|
-
type
|
|
294
|
-
type: 'addArrayItem';
|
|
293
|
+
type MatAddArrayItemButtonField = Omit<MatButtonField<AppendArrayItemEvent>, 'event' | 'type' | 'eventArgs'> & {
|
|
294
|
+
type: 'add-array-item' | 'addArrayItem';
|
|
295
295
|
/**
|
|
296
296
|
* The key of the array field to add items to.
|
|
297
297
|
* Required when the button is placed outside the array.
|
|
@@ -306,8 +306,8 @@ type AddArrayItemButtonField = Omit<MatButtonField<AppendArrayItemEvent>, 'event
|
|
|
306
306
|
template: ArrayAllowedChildren | readonly ArrayAllowedChildren[];
|
|
307
307
|
};
|
|
308
308
|
/** Prepend array item button field - dispatches PrependArrayItemEvent (adds at beginning) */
|
|
309
|
-
type
|
|
310
|
-
type: 'prependArrayItem';
|
|
309
|
+
type MatPrependArrayItemButtonField = Omit<MatButtonField<PrependArrayItemEvent>, 'event' | 'type' | 'eventArgs'> & {
|
|
310
|
+
type: 'prepend-array-item' | 'prependArrayItem';
|
|
311
311
|
/**
|
|
312
312
|
* The key of the array field to prepend items to.
|
|
313
313
|
* Required when the button is placed outside the array.
|
|
@@ -322,8 +322,8 @@ type PrependArrayItemButtonField = Omit<MatButtonField<PrependArrayItemEvent>, '
|
|
|
322
322
|
template: ArrayAllowedChildren | readonly ArrayAllowedChildren[];
|
|
323
323
|
};
|
|
324
324
|
/** Insert array item button field - dispatches InsertArrayItemEvent (adds at specific index) */
|
|
325
|
-
type
|
|
326
|
-
type: 'insertArrayItem';
|
|
325
|
+
type MatInsertArrayItemButtonField = Omit<MatButtonField<InsertArrayItemEvent>, 'event' | 'type' | 'eventArgs'> & {
|
|
326
|
+
type: 'insert-array-item' | 'insertArrayItem';
|
|
327
327
|
/**
|
|
328
328
|
* The key of the array field to insert items into.
|
|
329
329
|
* Required when the button is placed outside the array.
|
|
@@ -340,8 +340,8 @@ type InsertArrayItemButtonField = Omit<MatButtonField<InsertArrayItemEvent>, 'ev
|
|
|
340
340
|
template: ArrayAllowedChildren | readonly ArrayAllowedChildren[];
|
|
341
341
|
};
|
|
342
342
|
/** Remove array item button field - dispatches RemoveAtIndexEvent or PopArrayItemEvent */
|
|
343
|
-
type
|
|
344
|
-
type: 'removeArrayItem';
|
|
343
|
+
type MatRemoveArrayItemButtonField = Omit<MatButtonField<RemoveAtIndexEvent>, 'event' | 'type' | 'eventArgs'> & {
|
|
344
|
+
type: 'remove-array-item' | 'removeArrayItem';
|
|
345
345
|
/**
|
|
346
346
|
* The key of the array field to remove items from.
|
|
347
347
|
* Required when the button is placed outside the array.
|
|
@@ -350,8 +350,8 @@ type RemoveArrayItemButtonField = Omit<MatButtonField<RemoveAtIndexEvent>, 'even
|
|
|
350
350
|
arrayKey?: string;
|
|
351
351
|
};
|
|
352
352
|
/** Pop array item button field - dispatches PopArrayItemEvent (removes last item) */
|
|
353
|
-
type
|
|
354
|
-
type: 'popArrayItem';
|
|
353
|
+
type MatPopArrayItemButtonField = Omit<MatButtonField<PopArrayItemEvent>, 'event' | 'type' | 'eventArgs'> & {
|
|
354
|
+
type: 'pop-array-item' | 'popArrayItem';
|
|
355
355
|
/**
|
|
356
356
|
* The key of the array field to remove the last item from.
|
|
357
357
|
* REQUIRED - must specify which array to pop from.
|
|
@@ -359,8 +359,8 @@ type PopArrayItemButtonField = Omit<MatButtonField<PopArrayItemEvent>, 'event' |
|
|
|
359
359
|
arrayKey: string;
|
|
360
360
|
};
|
|
361
361
|
/** Shift array item button field - dispatches ShiftArrayItemEvent (removes first item) */
|
|
362
|
-
type
|
|
363
|
-
type: 'shiftArrayItem';
|
|
362
|
+
type MatShiftArrayItemButtonField = Omit<MatButtonField<ShiftArrayItemEvent>, 'event' | 'type' | 'eventArgs'> & {
|
|
363
|
+
type: 'shift-array-item' | 'shiftArrayItem';
|
|
364
364
|
/**
|
|
365
365
|
* The key of the array field to remove the first item from.
|
|
366
366
|
* REQUIRED - must specify which array to shift from.
|
|
@@ -489,12 +489,12 @@ declare const MatField: {
|
|
|
489
489
|
readonly Submit: "submit";
|
|
490
490
|
readonly Next: "next";
|
|
491
491
|
readonly Previous: "previous";
|
|
492
|
-
readonly AddArrayItem: "
|
|
493
|
-
readonly PrependArrayItem: "
|
|
494
|
-
readonly InsertArrayItem: "
|
|
495
|
-
readonly RemoveArrayItem: "
|
|
496
|
-
readonly PopArrayItem: "
|
|
497
|
-
readonly ShiftArrayItem: "
|
|
492
|
+
readonly AddArrayItem: "add-array-item";
|
|
493
|
+
readonly PrependArrayItem: "prepend-array-item";
|
|
494
|
+
readonly InsertArrayItem: "insert-array-item";
|
|
495
|
+
readonly RemoveArrayItem: "remove-array-item";
|
|
496
|
+
readonly PopArrayItem: "pop-array-item";
|
|
497
|
+
readonly ShiftArrayItem: "shift-array-item";
|
|
498
498
|
readonly Textarea: "textarea";
|
|
499
499
|
readonly Radio: "radio";
|
|
500
500
|
readonly MultiCheckbox: "multi-checkbox";
|
|
@@ -524,12 +524,18 @@ declare module '@ng-forge/dynamic-forms' {
|
|
|
524
524
|
submit: MatSubmitButtonField;
|
|
525
525
|
next: MatNextButtonField;
|
|
526
526
|
previous: MatPreviousButtonField;
|
|
527
|
-
addArrayItem:
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
527
|
+
addArrayItem: MatAddArrayItemButtonField;
|
|
528
|
+
'add-array-item': MatAddArrayItemButtonField;
|
|
529
|
+
prependArrayItem: MatPrependArrayItemButtonField;
|
|
530
|
+
'prepend-array-item': MatPrependArrayItemButtonField;
|
|
531
|
+
insertArrayItem: MatInsertArrayItemButtonField;
|
|
532
|
+
'insert-array-item': MatInsertArrayItemButtonField;
|
|
533
|
+
removeArrayItem: MatRemoveArrayItemButtonField;
|
|
534
|
+
'remove-array-item': MatRemoveArrayItemButtonField;
|
|
535
|
+
popArrayItem: MatPopArrayItemButtonField;
|
|
536
|
+
'pop-array-item': MatPopArrayItemButtonField;
|
|
537
|
+
shiftArrayItem: MatShiftArrayItemButtonField;
|
|
538
|
+
'shift-array-item': MatShiftArrayItemButtonField;
|
|
533
539
|
textarea: MatTextareaField;
|
|
534
540
|
radio: MatRadioField<unknown>;
|
|
535
541
|
'multi-checkbox': MatMultiCheckboxField<unknown>;
|
|
@@ -610,4 +616,4 @@ declare class MatButtonAddonComponent {
|
|
|
610
616
|
declare const MAT_INPUT_TYPE_OVERRIDE: InjectionToken<WritableSignal<string | undefined>>;
|
|
611
617
|
|
|
612
618
|
export { MATERIAL_CONFIG, MATERIAL_FIELD_TYPES, MAT_INPUT_TYPE_OVERRIDE, MatButtonAddonComponent, MatButtonFieldComponent, MatCheckboxFieldComponent, MatDatepickerFieldComponent, MatField, MatIconAddonComponent, MatInputFieldComponent, MatMultiCheckboxFieldComponent, MatRadioFieldComponent, MatSelectFieldComponent, MatSliderFieldComponent, MatTextareaFieldComponent, MatToggleFieldComponent, withMaterialAddons, withMaterialFields };
|
|
613
|
-
export type {
|
|
619
|
+
export type { MatAddArrayItemButtonField, MatAddon, MatAddonExtensions, MatButtonAddon, MatButtonField, MatButtonProps, MatCheckboxField, MatCheckboxProps, MatDatepickerField, MatDatepickerProps, MatFieldType, MatFormConfig, MatFormProps, MatIconAddon, MatInputAddon, MatInputField, MatInputProps, MatInsertArrayItemButtonField, MatMultiCheckboxField, MatMultiCheckboxProps, MatNextButtonField, MatPopArrayItemButtonField, MatPrependArrayItemButtonField, MatPreviousButtonField, MatRadioField, MatRadioProps, MatRemoveArrayItemButtonField, MatSelectField, MatSelectProps, MatShiftArrayItemButtonField, MatSliderField, MatSliderProps, MatSubmitButtonField, MatTextareaField, MatTextareaProps, MatToggleField, MatToggleProps, MaterialConfig };
|