@ng-forge/dynamic-forms-material 1.3.0-next.4 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ng-forge-dynamic-forms-material-lazy-multi-checkbox.mjs +6 -1
- package/fesm2022/ng-forge-dynamic-forms-material-lazy-multi-checkbox.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-material-lazy-radio.mjs +6 -1
- package/fesm2022/ng-forge-dynamic-forms-material-lazy-radio.mjs.map +1 -1
- package/package.json +2 -2
- package/types/ng-forge-dynamic-forms-material-lazy-multi-checkbox.d.ts +2 -0
- package/types/ng-forge-dynamic-forms-material-lazy-radio.d.ts +2 -0
- package/types/ng-forge-dynamic-forms-material-lazy-slider.d.ts +1 -0
- package/types/ng-forge-dynamic-forms-material-lazy-toggle.d.ts +1 -0
- package/types/ng-forge-dynamic-forms-material.d.ts +2 -0
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
|
-
import { ChangeDetectionStrategy, Component, computed, input, linkedSignal } from "@angular/core";
|
|
2
|
+
import { ChangeDetectionStrategy, Component, computed, inject, input, linkedSignal } from "@angular/core";
|
|
3
3
|
import { MatCheckbox } from "@angular/material/checkbox";
|
|
4
4
|
import * as i1 from "@ng-forge/dynamic-forms/integration";
|
|
5
5
|
import { DynamicTextPipe, NgForgeControl, NgForgeFieldHost, injectNgForgeField, isEqual } from "@ng-forge/dynamic-forms/integration";
|
|
6
6
|
import { explicitEffect } from "ngxtension/explicit-effect";
|
|
7
7
|
import { MatError } from "@angular/material/input";
|
|
8
8
|
import { AsyncPipe } from "@angular/common";
|
|
9
|
+
import { MATERIAL_CONFIG } from "@ng-forge/dynamic-forms-material/shared";
|
|
9
10
|
var MatMultiCheckboxFieldComponent = class MatMultiCheckboxFieldComponent {
|
|
10
11
|
ngf = injectNgForgeField();
|
|
12
|
+
materialConfig = inject(MATERIAL_CONFIG, { optional: true });
|
|
11
13
|
options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
|
|
12
14
|
props = input(...ngDevMode ? [void 0, { debugName: "props" }] : /* istanbul ignore next */ []);
|
|
15
|
+
disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, ...ngDevMode ? [{ debugName: "disableRipple" }] : /* istanbul ignore next */ []);
|
|
13
16
|
valueViewModel = linkedSignal(() => {
|
|
14
17
|
const currentValues = this.ngf.field()().value();
|
|
15
18
|
return this.options().filter((option) => currentValues.includes(option.value));
|
|
@@ -98,6 +101,7 @@ var MatMultiCheckboxFieldComponent = class MatMultiCheckboxFieldComponent {
|
|
|
98
101
|
[disabled]="f().disabled() || option.disabled"
|
|
99
102
|
[color]="props()?.color || 'primary'"
|
|
100
103
|
[labelPosition]="props()?.labelPosition || 'after'"
|
|
104
|
+
[disableRipple]="disableRipple()"
|
|
101
105
|
(change)="onCheckboxChange(option, $event.checked)"
|
|
102
106
|
>
|
|
103
107
|
{{ option.label | dynamicText | async }}
|
|
@@ -208,6 +212,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
208
212
|
[disabled]="f().disabled() || option.disabled"
|
|
209
213
|
[color]="props()?.color || 'primary'"
|
|
210
214
|
[labelPosition]="props()?.labelPosition || 'after'"
|
|
215
|
+
[disableRipple]="disableRipple()"
|
|
211
216
|
(change)="onCheckboxChange(option, $event.checked)"
|
|
212
217
|
>
|
|
213
218
|
{{ option.label | dynamicText | async }}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-forge-dynamic-forms-material-lazy-multi-checkbox.mjs","names":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/multi-checkbox/mat-multi-checkbox.component.ts"],"sourcesContent":["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"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ng-forge-dynamic-forms-material-lazy-multi-checkbox.mjs","names":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/multi-checkbox/mat-multi-checkbox.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, 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';\nimport { MATERIAL_CONFIG } from '@ng-forge/dynamic-forms-material/shared';\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 [disableRipple]=\"disableRipple()\"\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 private readonly materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n readonly options = input<FieldOption<ValueType>[]>([]);\n readonly props = input<MatMultiCheckboxProps>();\n\n readonly disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false);\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"],"mappings":";;;;;;;;;AAwDA,IAAqB,iCAArB,MAAqB,+BAA8B;CAC9B,MAAM,mBAAkB;CAC1B,iBAAiB,OAAO,iBAAiB,EAAE,UAAU,KAAI,CAAE;CAEnE,UAAU,MAAgC,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC7C,QAAQ,MAA8B,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEtC,gBAAgB,eAAe,KAAK,MAAK,CAAE,EAAE,iBAAiB,KAAK,gBAAgB,iBAAiB,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAEnH,iBAAiB,mBACV;EACH,MAAM,gBAAgB,KAAK,IAAI,MAAK,CAAE,CAAA,CAAE,CAAC,MAAK;EAC9C,OAAO,KAAK,QAAO,CAAE,CAAC,QAAQ,WAAW,cAAc,SAAS,OAAO,KAAK,CAAC;CAC/E,GAAC;EAAA,GAAA,YAAA,EAAA,WAAA,iBAAA,+BAAA,CAAA;EACC,OAAO;CAAO,CAAA;CAIT,mBAAmB,eAAc;EACxC,MAAM,MAA+B,CAAA;EACrC,KAAK,MAAM,OAAO,KAAK,eAAc,GACnC,IAAI,OAAO,IAAI,KAAK,KAAK;EAE3B,OAAO;CACT,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAEF,cAAA;EACE,eAAe,CAAC,KAAK,cAAc,IAAI,CAAC,qBAAoB;GAC1D,MAAM,iBAAiB,gBAAgB,KAAK,WAAW,OAAO,KAAK;GAEnE,IAAI,CAAC,QAAQ,gBAAgB,KAAK,IAAI,MAAK,CAAE,CAAA,CAAE,CAAC,MAAK,CAAE,GACrD,KAAK,IAAI,MAAK,CAAE,CAAA,CAAE,CAAC,MAAM,IAAI,cAAc;EAE/C,CAAC;EAED,eAAe,CAAC,KAAK,OAAO,IAAI,CAAC,aAAY;GAC3C,MAAM,SAAS,QAAQ,KAAK,WAAW,OAAO,KAAK;GACnD,MAAM,eAAe,IAAI,IAAI,MAAM;GAEnC,IAAI,OAAO,WAAW,aAAa,MAAM;IACvC,MAAM,aAAa,OAAO,QAAQ,OAAO,UAAU,OAAO,QAAQ,KAAK,MAAM,KAAK;IAClF,MAAM,IAAI,MAAM,2DAA2D,WAAW,KAAK,IAAI,GAAG;GACpG;EACF,CAAC;CACH;CAEA,iBAAiB,QAAgC,SAAgB;EAC/D,KAAK,eAAe,QAAQ,mBAAkB;GAC5C,IAAI,SACF,OAAO,eAAe,MAAM,QAAQ,IAAI,UAAU,OAAO,KAAK,IAAI,iBAAiB,CAAC,GAAG,gBAAgB,MAAM;QAE7G,OAAO,eAAe,QAAQ,QAAQ,IAAI,UAAU,OAAO,KAAK;EAEpE,CAAC;CACH;CAtDmB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAA8B,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAA9B,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAA8B,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,gBAAA,CAAA,EAAA,WAAA,GAAA,iBAAA,CAAA;EAAA,UAAA;EAAA,UAzCvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCT,UAAA;EAAA,QAAA,CAAA,o4CAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MAvCS;IAAW,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,UAAA,qBAAA;IAAA,UAAA,CAAA,aAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAQ,UAAA;IAAA,QAAA,CAAA,IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAA8B;IAAc,UAAA;IAAA,QAAA,CAAA,gBAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAA1C;IAAe,MAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAS,MAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AA2CxC,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAA8B,YAAA,CAAA;EA7ClD,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAuB,SACxB;IAAC;IAAa;IAAU;IAAiB;IAAW;GAAc;GAAC,gBAC5D,CAAC,gBAAgB;GAAC,UACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCT,iBAEgB,wBAAwB;GAAM,QAAA,CAAA,o4CAAA;EAAA,CAAA"}
|
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
|
-
import { ChangeDetectionStrategy, Component, input } from "@angular/core";
|
|
2
|
+
import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
|
|
3
3
|
import { FormField } from "@angular/forms/signals";
|
|
4
4
|
import { MatRadioButton, MatRadioGroup } from "@angular/material/radio";
|
|
5
5
|
import * as i1 from "@ng-forge/dynamic-forms/integration";
|
|
6
6
|
import { DynamicTextPipe, NgForgeControl, NgForgeFieldHost, injectNgForgeField } from "@ng-forge/dynamic-forms/integration";
|
|
7
7
|
import { MatError } from "@angular/material/input";
|
|
8
8
|
import { AsyncPipe } from "@angular/common";
|
|
9
|
+
import { MATERIAL_CONFIG } from "@ng-forge/dynamic-forms-material/shared";
|
|
9
10
|
var MatRadioFieldComponent = class MatRadioFieldComponent {
|
|
10
11
|
ngf = injectNgForgeField();
|
|
12
|
+
materialConfig = inject(MATERIAL_CONFIG, { optional: true });
|
|
11
13
|
options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
|
|
12
14
|
props = input(...ngDevMode ? [void 0, { debugName: "props" }] : /* istanbul ignore next */ []);
|
|
15
|
+
disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false, ...ngDevMode ? [{ debugName: "disableRipple" }] : /* istanbul ignore next */ []);
|
|
13
16
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
14
17
|
minVersion: "12.0.0",
|
|
15
18
|
version: "22.2.5",
|
|
@@ -64,6 +67,7 @@ var MatRadioFieldComponent = class MatRadioFieldComponent {
|
|
|
64
67
|
[disabled]="option.disabled || false"
|
|
65
68
|
[color]="props()?.color || 'primary'"
|
|
66
69
|
[labelPosition]="props()?.labelPosition || 'after'"
|
|
70
|
+
[disableRipple]="disableRipple()"
|
|
67
71
|
>
|
|
68
72
|
{{ option.label | dynamicText | async }}
|
|
69
73
|
</mat-radio-button>
|
|
@@ -193,6 +197,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
193
197
|
[disabled]="option.disabled || false"
|
|
194
198
|
[color]="props()?.color || 'primary'"
|
|
195
199
|
[labelPosition]="props()?.labelPosition || 'after'"
|
|
200
|
+
[disableRipple]="disableRipple()"
|
|
196
201
|
>
|
|
197
202
|
{{ option.label | dynamicText | async }}
|
|
198
203
|
</mat-radio-button>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-forge-dynamic-forms-material-lazy-radio.mjs","names":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/radio/mat-radio.component.ts"],"sourcesContent":["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"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ng-forge-dynamic-forms-material-lazy-radio.mjs","names":[],"sources":["../../../../packages/dynamic-forms-material/src/lib/fields/radio/mat-radio.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, 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';\nimport { MATERIAL_CONFIG } from '@ng-forge/dynamic-forms-material/shared';\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 [disableRipple]=\"disableRipple()\"\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 private readonly materialConfig = inject(MATERIAL_CONFIG, { optional: true });\n\n readonly options = input<FieldOption<ValueType>[]>([]);\n readonly props = input<MatRadioProps>();\n\n readonly disableRipple = computed(() => this.props()?.disableRipple ?? this.materialConfig?.disableRipple ?? false);\n}\n"],"mappings":";;;;;;;;;AAqDA,IAAqB,yBAArB,MAAqB,uBAAsB;CACtB,MAAM,mBAAkB;CAC1B,iBAAiB,OAAO,iBAAiB,EAAE,UAAU,KAAI,CAAE;CAEnE,UAAU,MAAgC,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC7C,QAAQ,MAAsB,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAE9B,gBAAgB,eAAe,KAAK,MAAK,CAAE,EAAE,iBAAiB,KAAK,gBAAgB,iBAAiB,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAPhG,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAsB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAtB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAsB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,gBAAA,CAAA,EAAA,WAAA,GAAA,iBAAA,CAAA;EAAA,UAAA;EAAA,UAtC/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCT,UAAA;EAAA,QAAA,CAAA,o4CAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MApCS;IAAa,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,QAAA;IAAA,UAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAc,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,QAAA;IAAA,UAAA,CAAA,gBAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAS,UAAA;IAAA,QAAA,CAAA,WAAA;IAAA,UAAA,CAAA,WAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAQ,UAAA;IAAA,QAAA,CAAA,IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAA8B;IAAc,UAAA;IAAA,QAAA,CAAA,gBAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAA1C;IAAe,MAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAS,MAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAwCrE,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAsB,YAAA,CAAA;EA1C1C,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAc,SACf;IAAC;IAAe;IAAgB;IAAW;IAAU;IAAiB;IAAW;GAAc;GAAC,gBACzF,CAAC,gBAAgB;GAAC,UACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCT,iBAEgB,wBAAwB;GAAM,QAAA,CAAA,o4CAAA;EAAA,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ng-forge/dynamic-forms-material",
|
|
3
|
-
"version": "1.3.0
|
|
3
|
+
"version": "1.3.0",
|
|
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",
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
"@angular/core": "^22.0.0",
|
|
95
95
|
"@angular/forms": "^22.0.0",
|
|
96
96
|
"@angular/material": "^22.0.0",
|
|
97
|
-
"@ng-forge/dynamic-forms": "~1.3.0
|
|
97
|
+
"@ng-forge/dynamic-forms": "~1.3.0",
|
|
98
98
|
"rxjs": ">=7.0.0"
|
|
99
99
|
},
|
|
100
100
|
"dependencies": {
|
|
@@ -12,8 +12,10 @@ interface MatMultiCheckboxProps {
|
|
|
12
12
|
type MatMultiCheckboxField<T> = MultiCheckboxField<T, MatMultiCheckboxProps>;
|
|
13
13
|
declare class MatMultiCheckboxFieldComponent {
|
|
14
14
|
protected readonly ngf: import("@ng-forge/dynamic-forms/integration").TypedNgForgeField<ValueType[]>;
|
|
15
|
+
private readonly materialConfig;
|
|
15
16
|
readonly options: import("@angular/core").InputSignal<FieldOption<ValueType>[]>;
|
|
16
17
|
readonly props: import("@angular/core").InputSignal<MatMultiCheckboxProps | undefined>;
|
|
18
|
+
readonly disableRipple: import("@angular/core").Signal<boolean>;
|
|
17
19
|
valueViewModel: import("@angular/core").WritableSignal<FieldOption<ValueType>[]>;
|
|
18
20
|
/** Computed map of checked option values for O(1) lookup in template */
|
|
19
21
|
readonly checkedValuesMap: import("@angular/core").Signal<Record<string, boolean>>;
|
|
@@ -12,8 +12,10 @@ interface MatRadioProps {
|
|
|
12
12
|
type MatRadioField<T> = RadioField<T, MatRadioProps>;
|
|
13
13
|
declare class MatRadioFieldComponent {
|
|
14
14
|
protected readonly ngf: import("@ng-forge/dynamic-forms/integration").TypedNgForgeField<ValueType>;
|
|
15
|
+
private readonly materialConfig;
|
|
15
16
|
readonly options: import("@angular/core").InputSignal<FieldOption<ValueType>[]>;
|
|
16
17
|
readonly props: import("@angular/core").InputSignal<MatRadioProps | undefined>;
|
|
18
|
+
readonly disableRipple: import("@angular/core").Signal<boolean>;
|
|
17
19
|
static ɵfac: i0.ɵɵFactoryDeclaration<MatRadioFieldComponent, never>;
|
|
18
20
|
static ɵcmp: i0.ɵɵComponentDeclaration<MatRadioFieldComponent, "df-mat-radio", never, {
|
|
19
21
|
"options": {
|
|
@@ -6,6 +6,7 @@ import * as i0 from "@angular/core";
|
|
|
6
6
|
interface MatSliderProps {
|
|
7
7
|
hint?: DynamicText;
|
|
8
8
|
color?: 'primary' | 'accent' | 'warn';
|
|
9
|
+
/** @deprecated Has no effect: this Material control has no form-field appearance. It will be removed in 2.0. */
|
|
9
10
|
appearance?: MatFormFieldAppearance;
|
|
10
11
|
thumbLabel?: boolean;
|
|
11
12
|
showThumbLabel?: boolean;
|
|
@@ -6,6 +6,7 @@ import { ThemePalette } from "@angular/material/core";
|
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
interface MatToggleProps {
|
|
8
8
|
hint?: DynamicText;
|
|
9
|
+
/** @deprecated Has no effect: this Material control has no form-field appearance. It will be removed in 2.0. */
|
|
9
10
|
appearance?: MatFormFieldAppearance;
|
|
10
11
|
color?: ThemePalette;
|
|
11
12
|
labelPosition?: 'before' | 'after';
|
|
@@ -83,6 +83,7 @@ type MatSelectField<T> = SelectField<T, MatSelectProps>;
|
|
|
83
83
|
interface MatSliderProps {
|
|
84
84
|
hint?: DynamicText;
|
|
85
85
|
color?: 'primary' | 'accent' | 'warn';
|
|
86
|
+
/** @deprecated Has no effect: this Material control has no form-field appearance. It will be removed in 2.0. */
|
|
86
87
|
appearance?: MatFormFieldAppearance;
|
|
87
88
|
thumbLabel?: boolean;
|
|
88
89
|
showThumbLabel?: boolean;
|
|
@@ -197,6 +198,7 @@ interface MatTextareaProps extends TextareaProps {
|
|
|
197
198
|
type MatTextareaField = TextareaField<MatTextareaProps>;
|
|
198
199
|
interface MatToggleProps {
|
|
199
200
|
hint?: DynamicText;
|
|
201
|
+
/** @deprecated Has no effect: this Material control has no form-field appearance. It will be removed in 2.0. */
|
|
200
202
|
appearance?: MatFormFieldAppearance;
|
|
201
203
|
color?: ThemePalette;
|
|
202
204
|
labelPosition?: 'before' | 'after';
|