@ng-forge/dynamic-forms-material 1.2.0-next.7 → 1.2.0-next.9
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/fesm2022/ng-forge-dynamic-forms-material-lazy-button.mjs +2 -2
- package/fesm2022/ng-forge-dynamic-forms-material-lazy-checkbox.mjs +2 -2
- package/fesm2022/ng-forge-dynamic-forms-material-lazy-datepicker.mjs +48 -7
- package/fesm2022/ng-forge-dynamic-forms-material-lazy-datepicker.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-material-lazy-input.mjs +2 -2
- package/fesm2022/ng-forge-dynamic-forms-material-lazy-input.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-material-lazy-multi-checkbox.mjs +2 -2
- package/fesm2022/ng-forge-dynamic-forms-material-lazy-radio.mjs +2 -2
- package/fesm2022/ng-forge-dynamic-forms-material-lazy-select.mjs +64 -7
- package/fesm2022/ng-forge-dynamic-forms-material-lazy-select.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-material-lazy-slider.mjs +2 -2
- package/fesm2022/ng-forge-dynamic-forms-material-lazy-textarea.mjs +59 -7
- package/fesm2022/ng-forge-dynamic-forms-material-lazy-textarea.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-material-lazy-toggle.mjs +2 -2
- package/fesm2022/ng-forge-dynamic-forms-material.mjs +190 -31
- package/fesm2022/ng-forge-dynamic-forms-material.mjs.map +1 -1
- package/package.json +2 -2
- package/types/ng-forge-dynamic-forms-material-lazy-datepicker.d.ts +11 -3
- package/types/ng-forge-dynamic-forms-material-lazy-select.d.ts +11 -3
- package/types/ng-forge-dynamic-forms-material-lazy-textarea.d.ts +11 -3
- package/types/ng-forge-dynamic-forms-material.d.ts +25 -4
|
@@ -39,7 +39,7 @@ class MatSliderFieldComponent {
|
|
|
39
39
|
} @else if (props()?.hint; as hint) {
|
|
40
40
|
<div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
|
|
41
41
|
}
|
|
42
|
-
`, 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 });
|
|
42
|
+
`, 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)}: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", ".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 });
|
|
43
43
|
}
|
|
44
44
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatSliderFieldComponent, decorators: [{
|
|
45
45
|
type: Component,
|
|
@@ -68,7 +68,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
68
68
|
} @else if (props()?.hint; as hint) {
|
|
69
69
|
<div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
|
|
70
70
|
}
|
|
71
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
71
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, 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)}: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", ".slider-container{width:100%}\n"] }]
|
|
72
72
|
}], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
|
|
73
73
|
|
|
74
74
|
|
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { inject, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { FormField } from '@angular/forms/signals';
|
|
4
|
-
import { MatFormField, MatLabel, MatError } from '@angular/material/form-field';
|
|
4
|
+
import { MatFormField, MatLabel, MatError, MatPrefix, MatSuffix } from '@angular/material/form-field';
|
|
5
5
|
import { MatInput, MatHint } from '@angular/material/input';
|
|
6
6
|
import * as i1 from '@ng-forge/dynamic-forms/integration';
|
|
7
|
-
import { injectNgForgeField, NgForgeControl, DynamicTextPipe, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';
|
|
7
|
+
import { injectNgForgeField, injectNgForgeAddons, NgForgeControl, DfAddonSlot, DynamicTextPipe, NgForgeFieldHost, NgForgeAddons } from '@ng-forge/dynamic-forms/integration';
|
|
8
8
|
import { AsyncPipe } from '@angular/common';
|
|
9
9
|
import { MATERIAL_CONFIG } from '@ng-forge/dynamic-forms-material/shared';
|
|
10
10
|
|
|
11
11
|
class MatTextareaFieldComponent {
|
|
12
12
|
materialConfig = inject(MATERIAL_CONFIG, { optional: true });
|
|
13
13
|
ngf = injectNgForgeField();
|
|
14
|
+
ngfa = injectNgForgeAddons();
|
|
14
15
|
props = input(/* @ts-ignore */
|
|
15
16
|
...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
|
|
17
|
+
fieldInputs = input(/* @ts-ignore */
|
|
18
|
+
...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
|
|
16
19
|
appearance = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', /* @ts-ignore */
|
|
17
20
|
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
18
21
|
subscriptSizing = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', /* @ts-ignore */
|
|
@@ -22,7 +25,7 @@ class MatTextareaFieldComponent {
|
|
|
22
25
|
hideRequiredMarker = computed(() => this.props()?.hideRequiredMarker ?? this.materialConfig?.hideRequiredMarker ?? false, /* @ts-ignore */
|
|
23
26
|
...(ngDevMode ? [{ debugName: "hideRequiredMarker" }] : /* istanbul ignore next */ []));
|
|
24
27
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatTextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
-
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: `
|
|
28
|
+
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 }, fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.NgForgeFieldHost }, { directive: i1.NgForgeAddons }], ngImport: i0, template: `
|
|
26
29
|
@let textareaId = ngf.key() + '-textarea';
|
|
27
30
|
|
|
28
31
|
<mat-form-field
|
|
@@ -35,6 +38,15 @@ class MatTextareaFieldComponent {
|
|
|
35
38
|
<mat-label>{{ ngf.label() | dynamicText | async }}</mat-label>
|
|
36
39
|
}
|
|
37
40
|
|
|
41
|
+
@for (a of ngfa.prefixAddons(); track $index) {
|
|
42
|
+
<df-addon-slot
|
|
43
|
+
matPrefix
|
|
44
|
+
[class.df-mat-addon-text]="a.type === 'text'"
|
|
45
|
+
[addon]="a"
|
|
46
|
+
[fieldInputs]="fieldInputs()"
|
|
47
|
+
[hidden]="ngfa.hiddenSignalCache().get(a)"
|
|
48
|
+
/>
|
|
49
|
+
}
|
|
38
50
|
<textarea
|
|
39
51
|
ngForgeControl
|
|
40
52
|
matInput
|
|
@@ -44,6 +56,15 @@ class MatTextareaFieldComponent {
|
|
|
44
56
|
[attr.tabindex]="ngf.tabIndex()"
|
|
45
57
|
[style.resize]="props()?.resize || 'vertical'"
|
|
46
58
|
></textarea>
|
|
59
|
+
@for (a of ngfa.suffixAddons(); track $index) {
|
|
60
|
+
<df-addon-slot
|
|
61
|
+
matSuffix
|
|
62
|
+
[class.df-mat-addon-text]="a.type === 'text'"
|
|
63
|
+
[addon]="a"
|
|
64
|
+
[fieldInputs]="fieldInputs()"
|
|
65
|
+
[hidden]="ngfa.hiddenSignalCache().get(a)"
|
|
66
|
+
/>
|
|
67
|
+
}
|
|
47
68
|
|
|
48
69
|
@if (ngf.errorsToDisplay()[0]; as error) {
|
|
49
70
|
<mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
|
|
@@ -51,11 +72,24 @@ class MatTextareaFieldComponent {
|
|
|
51
72
|
<mat-hint [id]="ngf.hintId()">{{ hint | dynamicText | async }}</mat-hint>
|
|
52
73
|
}
|
|
53
74
|
</mat-form-field>
|
|
54
|
-
`, 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, 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 });
|
|
75
|
+
`, 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)}: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", "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, 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: 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 });
|
|
55
76
|
}
|
|
56
77
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatTextareaFieldComponent, decorators: [{
|
|
57
78
|
type: Component,
|
|
58
|
-
args: [{ selector: 'df-mat-textarea', imports: [
|
|
79
|
+
args: [{ selector: 'df-mat-textarea', imports: [
|
|
80
|
+
MatFormField,
|
|
81
|
+
MatLabel,
|
|
82
|
+
MatInput,
|
|
83
|
+
MatHint,
|
|
84
|
+
FormField,
|
|
85
|
+
MatError,
|
|
86
|
+
MatPrefix,
|
|
87
|
+
MatSuffix,
|
|
88
|
+
DynamicTextPipe,
|
|
89
|
+
AsyncPipe,
|
|
90
|
+
NgForgeControl,
|
|
91
|
+
DfAddonSlot,
|
|
92
|
+
], hostDirectives: [NgForgeFieldHost, NgForgeAddons], template: `
|
|
59
93
|
@let textareaId = ngf.key() + '-textarea';
|
|
60
94
|
|
|
61
95
|
<mat-form-field
|
|
@@ -68,6 +102,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
68
102
|
<mat-label>{{ ngf.label() | dynamicText | async }}</mat-label>
|
|
69
103
|
}
|
|
70
104
|
|
|
105
|
+
@for (a of ngfa.prefixAddons(); track $index) {
|
|
106
|
+
<df-addon-slot
|
|
107
|
+
matPrefix
|
|
108
|
+
[class.df-mat-addon-text]="a.type === 'text'"
|
|
109
|
+
[addon]="a"
|
|
110
|
+
[fieldInputs]="fieldInputs()"
|
|
111
|
+
[hidden]="ngfa.hiddenSignalCache().get(a)"
|
|
112
|
+
/>
|
|
113
|
+
}
|
|
71
114
|
<textarea
|
|
72
115
|
ngForgeControl
|
|
73
116
|
matInput
|
|
@@ -77,6 +120,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
77
120
|
[attr.tabindex]="ngf.tabIndex()"
|
|
78
121
|
[style.resize]="props()?.resize || 'vertical'"
|
|
79
122
|
></textarea>
|
|
123
|
+
@for (a of ngfa.suffixAddons(); track $index) {
|
|
124
|
+
<df-addon-slot
|
|
125
|
+
matSuffix
|
|
126
|
+
[class.df-mat-addon-text]="a.type === 'text'"
|
|
127
|
+
[addon]="a"
|
|
128
|
+
[fieldInputs]="fieldInputs()"
|
|
129
|
+
[hidden]="ngfa.hiddenSignalCache().get(a)"
|
|
130
|
+
/>
|
|
131
|
+
}
|
|
80
132
|
|
|
81
133
|
@if (ngf.errorsToDisplay()[0]; as error) {
|
|
82
134
|
<mat-error [id]="ngf.errorId()">{{ error.message }}</mat-error>
|
|
@@ -84,8 +136,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
84
136
|
<mat-hint [id]="ngf.hintId()">{{ hint | dynamicText | async }}</mat-hint>
|
|
85
137
|
}
|
|
86
138
|
</mat-form-field>
|
|
87
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
88
|
-
}], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
|
|
139
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, 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)}: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", "mat-form-field{width:100%}\n"] }]
|
|
140
|
+
}], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }] } });
|
|
89
141
|
|
|
90
142
|
|
|
91
143
|
export { MatTextareaFieldComponent };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-forge-dynamic-forms-material-lazy-textarea.mjs","mappings":";;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"ng-forge-dynamic-forms-material-lazy-textarea.mjs","mappings":";;;;;;;;;;AA6Fc;;;;AAMH;;AACT,IAKS;;AAEA;;AACA;;AAEA;;AACA;;;AAlBU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1ET;;;;;;;;;;;;;AAcT","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/textarea/mat-textarea.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } 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 { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport {\n DfAddonSlot,\n injectNgForgeAddons,\n injectNgForgeField,\n NgForgeAddons,\n NgForgeControl,\n NgForgeFieldHost,\n WrapperFieldInputs,\n} from '@ng-forge/dynamic-forms/integration';\nimport { MatTextareaProps } from './mat-textarea.type';\nimport { AsyncPipe } from '@angular/common';\nimport { MATERIAL_CONFIG } from '@ng-forge/dynamic-forms-material/shared';\n\n@Component({\n selector: 'df-mat-textarea',\n imports: [\n MatFormField,\n MatLabel,\n MatInput,\n MatHint,\n FormField,\n MatError,\n MatPrefix,\n MatSuffix,\n DynamicTextPipe,\n AsyncPipe,\n NgForgeControl,\n DfAddonSlot,\n ],\n hostDirectives: [NgForgeFieldHost, NgForgeAddons],\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 @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 <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 @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\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 protected readonly ngfa = injectNgForgeAddons();\n\n readonly props = input<MatTextareaProps>();\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 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"]}
|
|
@@ -40,7 +40,7 @@ class MatToggleFieldComponent {
|
|
|
40
40
|
} @else if (props()?.hint; as hint) {
|
|
41
41
|
<div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
|
|
42
42
|
}
|
|
43
|
-
`, 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 });
|
|
43
|
+
`, 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)}: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: 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 });
|
|
44
44
|
}
|
|
45
45
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MatToggleFieldComponent, decorators: [{
|
|
46
46
|
type: Component,
|
|
@@ -68,7 +68,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
68
68
|
} @else if (props()?.hint; as hint) {
|
|
69
69
|
<div class="mat-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</div>
|
|
70
70
|
}
|
|
71
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
71
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, 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)}: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"] }]
|
|
72
72
|
}], propDecorators: { props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
|
|
73
73
|
|
|
74
74
|
|