@ng-forge/dynamic-forms-ionic 1.3.0-next.1 → 1.3.0-next.3

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.
Files changed (48) hide show
  1. package/README.md +0 -2
  2. package/fesm2022/ng-forge-dynamic-forms-ionic-ionic-field-errors-wrapper.component-bXoq9uY6.mjs +64 -0
  3. package/fesm2022/ng-forge-dynamic-forms-ionic-ionic-field-errors-wrapper.component-bXoq9uY6.mjs.map +1 -0
  4. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-addon-button.mjs +129 -34
  5. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-addon-button.mjs.map +1 -1
  6. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-addon-icon.mjs +118 -35
  7. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-addon-icon.mjs.map +1 -1
  8. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-button.mjs +113 -33
  9. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-button.mjs.map +1 -1
  10. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-checkbox.mjs +124 -24
  11. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-checkbox.mjs.map +1 -1
  12. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-datepicker.mjs +374 -90
  13. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-datepicker.mjs.map +1 -1
  14. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-input.mjs +262 -126
  15. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-input.mjs.map +1 -1
  16. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-multi-checkbox.mjs +191 -64
  17. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-multi-checkbox.mjs.map +1 -1
  18. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-radio.mjs +178 -27
  19. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-radio.mjs.map +1 -1
  20. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-select.mjs +163 -27
  21. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-select.mjs.map +1 -1
  22. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-slider.mjs +144 -27
  23. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-slider.mjs.map +1 -1
  24. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-textarea.mjs +157 -45
  25. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-textarea.mjs.map +1 -1
  26. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-toggle.mjs +386 -75
  27. package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-toggle.mjs.map +1 -1
  28. package/fesm2022/ng-forge-dynamic-forms-ionic-shared.mjs +139 -62
  29. package/fesm2022/ng-forge-dynamic-forms-ionic-shared.mjs.map +1 -1
  30. package/fesm2022/ng-forge-dynamic-forms-ionic.mjs +238 -251
  31. package/fesm2022/ng-forge-dynamic-forms-ionic.mjs.map +1 -1
  32. package/package.json +2 -3
  33. package/types/ng-forge-dynamic-forms-ionic-lazy-addon-button.d.ts +28 -28
  34. package/types/ng-forge-dynamic-forms-ionic-lazy-addon-icon.d.ts +24 -17
  35. package/types/ng-forge-dynamic-forms-ionic-lazy-button.d.ts +92 -86
  36. package/types/ng-forge-dynamic-forms-ionic-lazy-checkbox.d.ts +24 -18
  37. package/types/ng-forge-dynamic-forms-ionic-lazy-datepicker.d.ts +59 -34
  38. package/types/ng-forge-dynamic-forms-ionic-lazy-input.d.ts +69 -57
  39. package/types/ng-forge-dynamic-forms-ionic-lazy-multi-checkbox.d.ts +34 -23
  40. package/types/ng-forge-dynamic-forms-ionic-lazy-radio.d.ts +31 -20
  41. package/types/ng-forge-dynamic-forms-ionic-lazy-select.d.ts +37 -26
  42. package/types/ng-forge-dynamic-forms-ionic-lazy-slider.d.ts +53 -38
  43. package/types/ng-forge-dynamic-forms-ionic-lazy-textarea.d.ts +29 -23
  44. package/types/ng-forge-dynamic-forms-ionic-lazy-toggle.d.ts +119 -55
  45. package/types/ng-forge-dynamic-forms-ionic-shared.d.ts +78 -83
  46. package/types/ng-forge-dynamic-forms-ionic.d.ts +243 -266
  47. package/fesm2022/ng-forge-dynamic-forms-ionic-ionic-field-errors-wrapper.component-CN0CagvT.mjs +0 -26
  48. package/fesm2022/ng-forge-dynamic-forms-ionic-ionic-field-errors-wrapper.component-CN0CagvT.mjs.map +0 -1
@@ -1,57 +1,79 @@
1
- import * as i0 from '@angular/core';
2
- import { input, linkedSignal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
3
- import { IonCheckbox, IonItem, IonNote } from '@ionic/angular/standalone';
4
- import * as i1 from '@ng-forge/dynamic-forms/integration';
5
- import { injectNgForgeField, isEqual, NgForgeControl, DynamicTextPipe, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';
6
- import { explicitEffect } from 'ngxtension/explicit-effect';
7
- import { AsyncPipe } from '@angular/common';
8
-
9
- class IonicMultiCheckboxFieldComponent {
10
- ngf = injectNgForgeField();
11
- options = input([], /* @ts-ignore */
12
- ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
13
- props = input(/* @ts-ignore */
14
- ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
15
- valueViewModel = linkedSignal(() => {
16
- const currentValues = this.ngf.field()().value();
17
- return this.options().filter((option) => currentValues.includes(option.value));
18
- }, { ...(ngDevMode ? { debugName: "valueViewModel" } : /* istanbul ignore next */ {}), equal: isEqual });
19
- checkedValuesMap = computed(() => {
20
- const map = {};
21
- for (const opt of this.valueViewModel()) {
22
- map[String(opt.value)] = true;
23
- }
24
- return map;
25
- }, /* @ts-ignore */
26
- ...(ngDevMode ? [{ debugName: "checkedValuesMap" }] : /* istanbul ignore next */ []));
27
- constructor() {
28
- explicitEffect([this.valueViewModel], ([selectedOptions]) => {
29
- const selectedValues = selectedOptions.map((option) => option.value);
30
- if (!isEqual(selectedValues, this.ngf.field()().value())) {
31
- this.ngf.field()().value.set(selectedValues);
32
- }
33
- });
34
- explicitEffect([this.options], ([options]) => {
35
- const values = options.map((option) => option.value);
36
- const uniqueValues = new Set(values);
37
- if (values.length !== uniqueValues.size) {
38
- const duplicates = values.filter((value, index) => values.indexOf(value) !== index);
39
- throw new Error(`Duplicate option values detected in ionic-multi-checkbox: ${duplicates.join(', ')}`);
40
- }
41
- });
42
- }
43
- onCheckboxChange(option, checked) {
44
- this.valueViewModel.update((currentOptions) => {
45
- if (checked) {
46
- return currentOptions.some((opt) => opt.value === option.value) ? currentOptions : [...currentOptions, option];
47
- }
48
- else {
49
- return currentOptions.filter((opt) => opt.value !== option.value);
50
- }
51
- });
52
- }
53
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: IonicMultiCheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
54
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: IonicMultiCheckboxFieldComponent, isStandalone: true, selector: "df-ion-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: `
1
+ import * as i0 from "@angular/core";
2
+ import { ChangeDetectionStrategy, Component, computed, input, linkedSignal } from "@angular/core";
3
+ import { IonCheckbox, IonItem, IonNote } from "@ionic/angular/standalone";
4
+ import * as i1 from "@ng-forge/dynamic-forms/integration";
5
+ import { DynamicTextPipe, NgForgeControl, NgForgeFieldHost, injectNgForgeField, isEqual } from "@ng-forge/dynamic-forms/integration";
6
+ import { explicitEffect } from "ngxtension/explicit-effect";
7
+ import { AsyncPipe } from "@angular/common";
8
+ var IonicMultiCheckboxFieldComponent = class IonicMultiCheckboxFieldComponent {
9
+ ngf = injectNgForgeField();
10
+ options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
11
+ props = input(...ngDevMode ? [void 0, { debugName: "props" }] : /* istanbul ignore next */ []);
12
+ valueViewModel = linkedSignal(() => {
13
+ const currentValues = this.ngf.field()().value();
14
+ return this.options().filter((option) => currentValues.includes(option.value));
15
+ }, {
16
+ ...ngDevMode ? { debugName: "valueViewModel" } : /* istanbul ignore next */ {},
17
+ equal: isEqual
18
+ });
19
+ checkedValuesMap = computed(() => {
20
+ const map = {};
21
+ for (const opt of this.valueViewModel()) map[String(opt.value)] = true;
22
+ return map;
23
+ }, ...ngDevMode ? [{ debugName: "checkedValuesMap" }] : /* istanbul ignore next */ []);
24
+ constructor() {
25
+ explicitEffect([this.valueViewModel], ([selectedOptions]) => {
26
+ const selectedValues = selectedOptions.map((option) => option.value);
27
+ if (!isEqual(selectedValues, this.ngf.field()().value())) this.ngf.field()().value.set(selectedValues);
28
+ });
29
+ explicitEffect([this.options], ([options]) => {
30
+ const values = options.map((option) => option.value);
31
+ const uniqueValues = new Set(values);
32
+ if (values.length !== uniqueValues.size) {
33
+ const duplicates = values.filter((value, index) => values.indexOf(value) !== index);
34
+ throw new Error(`Duplicate option values detected in ionic-multi-checkbox: ${duplicates.join(", ")}`);
35
+ }
36
+ });
37
+ }
38
+ onCheckboxChange(option, checked) {
39
+ this.valueViewModel.update((currentOptions) => {
40
+ if (checked) return currentOptions.some((opt) => opt.value === option.value) ? currentOptions : [...currentOptions, option];
41
+ else return currentOptions.filter((opt) => opt.value !== option.value);
42
+ });
43
+ }
44
+ static ɵfac = i0.ɵɵngDeclareFactory({
45
+ minVersion: "12.0.0",
46
+ version: "22.2.5",
47
+ ngImport: i0,
48
+ type: IonicMultiCheckboxFieldComponent,
49
+ deps: [],
50
+ target: i0.ɵɵFactoryTarget.Component
51
+ });
52
+ static ɵcmp = i0.ɵɵngDeclareComponent({
53
+ minVersion: "17.0.0",
54
+ version: "22.2.5",
55
+ type: IonicMultiCheckboxFieldComponent,
56
+ isStandalone: true,
57
+ selector: "df-ion-multi-checkbox",
58
+ inputs: {
59
+ options: {
60
+ classPropertyName: "options",
61
+ publicName: "options",
62
+ isSignal: true,
63
+ isRequired: false,
64
+ transformFunction: null
65
+ },
66
+ props: {
67
+ classPropertyName: "props",
68
+ publicName: "props",
69
+ isSignal: true,
70
+ isRequired: false,
71
+ transformFunction: null
72
+ }
73
+ },
74
+ hostDirectives: [{ directive: i1.NgForgeFieldHost }],
75
+ ngImport: i0,
76
+ template: `
55
77
  @let f = ngf.field();
56
78
  @let checked = checkedValuesMap();
57
79
  @if (ngf.label(); as label) {
@@ -89,11 +111,94 @@ class IonicMultiCheckboxFieldComponent {
89
111
  } @else if (props()?.hint; as hint) {
90
112
  <ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
91
113
  }
92
- `, isInline: true, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}.checkbox-group-label{margin-bottom:8px;font-weight:500}.checkbox-group{display:flex;flex-direction:column;gap:4px}ion-item{--padding-start: 0;--inner-padding-end: 0}\n"], dependencies: [{ kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "directive", type: NgForgeControl, selector: "[ngForgeControl]", inputs: ["ngForgeControl"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
93
- }
94
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: IonicMultiCheckboxFieldComponent, decorators: [{
95
- type: Component,
96
- args: [{ selector: 'df-ion-multi-checkbox', imports: [IonCheckbox, IonItem, IonNote, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
114
+ `,
115
+ isInline: true,
116
+ styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}.checkbox-group-label{margin-bottom:8px;font-weight:500}.checkbox-group{display:flex;flex-direction:column;gap:4px}ion-item{--padding-start: 0;--inner-padding-end: 0}\n"],
117
+ dependencies: [
118
+ {
119
+ kind: "component",
120
+ type: IonCheckbox,
121
+ selector: "ion-checkbox",
122
+ inputs: [
123
+ "checked",
124
+ "color",
125
+ "disabled",
126
+ "errorText",
127
+ "helperText",
128
+ "indeterminate",
129
+ "justify",
130
+ "labelPlacement",
131
+ "mode",
132
+ "name",
133
+ "value"
134
+ ]
135
+ },
136
+ {
137
+ kind: "component",
138
+ type: IonItem,
139
+ selector: "ion-item",
140
+ inputs: [
141
+ "button",
142
+ "color",
143
+ "detail",
144
+ "detailIcon",
145
+ "disabled",
146
+ "download",
147
+ "href",
148
+ "lines",
149
+ "mode",
150
+ "rel",
151
+ "routerAnimation",
152
+ "routerDirection",
153
+ "target",
154
+ "type"
155
+ ]
156
+ },
157
+ {
158
+ kind: "component",
159
+ type: IonNote,
160
+ selector: "ion-note",
161
+ inputs: ["color", "mode"]
162
+ },
163
+ {
164
+ kind: "directive",
165
+ type: NgForgeControl,
166
+ selector: "[ngForgeControl]",
167
+ inputs: ["ngForgeControl"]
168
+ },
169
+ {
170
+ kind: "pipe",
171
+ type: DynamicTextPipe,
172
+ name: "dynamicText"
173
+ },
174
+ {
175
+ kind: "pipe",
176
+ type: AsyncPipe,
177
+ name: "async"
178
+ }
179
+ ],
180
+ changeDetection: i0.ChangeDetectionStrategy.OnPush
181
+ });
182
+ };
183
+ i0.ɵɵngDeclareClassMetadata({
184
+ minVersion: "12.0.0",
185
+ version: "22.2.5",
186
+ ngImport: i0,
187
+ type: IonicMultiCheckboxFieldComponent,
188
+ decorators: [{
189
+ type: Component,
190
+ args: [{
191
+ selector: "df-ion-multi-checkbox",
192
+ imports: [
193
+ IonCheckbox,
194
+ IonItem,
195
+ IonNote,
196
+ DynamicTextPipe,
197
+ AsyncPipe,
198
+ NgForgeControl
199
+ ],
200
+ hostDirectives: [NgForgeFieldHost],
201
+ template: `
97
202
  @let f = ngf.field();
98
203
  @let checked = checkedValuesMap();
99
204
  @if (ngf.label(); as label) {
@@ -131,9 +236,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
131
236
  } @else if (props()?.hint; as hint) {
132
237
  <ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
133
238
  }
134
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}.checkbox-group-label{margin-bottom:8px;font-weight:500}.checkbox-group{display:flex;flex-direction:column;gap:4px}ion-item{--padding-start: 0;--inner-padding-end: 0}\n"] }]
135
- }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
136
-
137
-
239
+ `,
240
+ changeDetection: ChangeDetectionStrategy.OnPush,
241
+ styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}.checkbox-group-label{margin-bottom:8px;font-weight:500}.checkbox-group{display:flex;flex-direction:column;gap:4px}ion-item{--padding-start: 0;--inner-padding-end: 0}\n"]
242
+ }]
243
+ }],
244
+ ctorParameters: () => [],
245
+ propDecorators: {
246
+ options: [{
247
+ type: i0.Input,
248
+ args: [{
249
+ isSignal: true,
250
+ alias: "options",
251
+ required: false
252
+ }]
253
+ }],
254
+ props: [{
255
+ type: i0.Input,
256
+ args: [{
257
+ isSignal: true,
258
+ alias: "props",
259
+ required: false
260
+ }]
261
+ }]
262
+ }
263
+ });
138
264
  export { IonicMultiCheckboxFieldComponent };
139
- //# sourceMappingURL=ng-forge-dynamic-forms-ionic-lazy-multi-checkbox.mjs.map
265
+
266
+ //# sourceMappingURL=ng-forge-dynamic-forms-ionic-lazy-multi-checkbox.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-multi-checkbox.mjs","mappings":";;;;;;;;AAkFc;;;;AAIH;;AAET;AAEI;;AAEF;IAKO;;;;;AAKP;;;AAGF;AACE;AACE;AAEA;AACE;;AAEJ;AAEA;AACE;AACA;;;AAIE;;AAEJ;;;;;AAMI;;;AAEA;;AAEJ;;;AAlDiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAxET","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-ionic/src/lib/fields/multi-checkbox/ionic-multi-checkbox.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, linkedSignal } from '@angular/core';\nimport { IonCheckbox, IonItem, IonNote } from '@ionic/angular/standalone';\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 { IonicMultiCheckboxProps } from './ionic-multi-checkbox.type';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n selector: 'df-ion-multi-checkbox',\n imports: [IonCheckbox, IonItem, IonNote, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let checked = checkedValuesMap();\n @if (ngf.label(); as label) {\n <div class=\"checkbox-group-label\">{{ label | dynamicText | async }}</div>\n }\n\n <div\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 [class.ion-invalid]=\"ngf.showErrors()\"\n [class.ion-touched]=\"f().touched()\"\n >\n @for (option of options(); track option.value) {\n <ion-item lines=\"none\">\n <ion-checkbox\n ngForgeControl\n [checked]=\"checked['' + option.value]\"\n [disabled]=\"f().disabled() || option.disabled\"\n [labelPlacement]=\"props()?.labelPlacement ?? 'end'\"\n [justify]=\"props()?.justify ?? 'start'\"\n [color]=\"props()?.color ?? 'primary'\"\n (ionChange)=\"onCheckboxChange(option, $event.detail.checked)\"\n >\n {{ option.label | dynamicText | async }}\n </ion-checkbox>\n </ion-item>\n }\n </div>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <ion-note color=\"danger\" class=\"df-ion-error\" [id]=\"ngf.errorId()\" role=\"alert\">{{ error.message }}</ion-note>\n } @else if (props()?.hint; as hint) {\n <ion-note class=\"df-ion-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</ion-note>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n :host {\n display: block;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n .checkbox-group-label {\n margin-bottom: 8px;\n font-weight: 500;\n }\n\n .checkbox-group {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n ion-item {\n --padding-start: 0;\n --inner-padding-end: 0;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class IonicMultiCheckboxFieldComponent {\n protected readonly ngf = injectNgForgeField<ValueType[]>();\n\n readonly options = input<FieldOption<ValueType>[]>([]);\n readonly props = input<IonicMultiCheckboxProps>();\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 ionic-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"]}
1
+ {"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-multi-checkbox.mjs","names":[],"sources":["../../../../packages/dynamic-forms-ionic/src/lib/fields/multi-checkbox/ionic-multi-checkbox.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, linkedSignal } from '@angular/core';\nimport { IonCheckbox, IonItem, IonNote } from '@ionic/angular/standalone';\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 { IonicMultiCheckboxProps } from './ionic-multi-checkbox.type';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n selector: 'df-ion-multi-checkbox',\n imports: [IonCheckbox, IonItem, IonNote, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let checked = checkedValuesMap();\n @if (ngf.label(); as label) {\n <div class=\"checkbox-group-label\">{{ label | dynamicText | async }}</div>\n }\n\n <div\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 [class.ion-invalid]=\"ngf.showErrors()\"\n [class.ion-touched]=\"f().touched()\"\n >\n @for (option of options(); track option.value) {\n <ion-item lines=\"none\">\n <ion-checkbox\n ngForgeControl\n [checked]=\"checked['' + option.value]\"\n [disabled]=\"f().disabled() || option.disabled\"\n [labelPlacement]=\"props()?.labelPlacement ?? 'end'\"\n [justify]=\"props()?.justify ?? 'start'\"\n [color]=\"props()?.color ?? 'primary'\"\n (ionChange)=\"onCheckboxChange(option, $event.detail.checked)\"\n >\n {{ option.label | dynamicText | async }}\n </ion-checkbox>\n </ion-item>\n }\n </div>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <ion-note color=\"danger\" class=\"df-ion-error\" [id]=\"ngf.errorId()\" role=\"alert\">{{ error.message }}</ion-note>\n } @else if (props()?.hint; as hint) {\n <ion-note class=\"df-ion-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</ion-note>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n :host {\n display: block;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n .checkbox-group-label {\n margin-bottom: 8px;\n font-weight: 500;\n }\n\n .checkbox-group {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n ion-item {\n --padding-start: 0;\n --inner-padding-end: 0;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class IonicMultiCheckboxFieldComponent {\n protected readonly ngf = injectNgForgeField<ValueType[]>();\n\n readonly options = input<FieldOption<ValueType>[]>([]);\n readonly props = input<IonicMultiCheckboxProps>();\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 ionic-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":";;;;;;;AAkFA,IAAqB,mCAArB,MAAqB,iCAAgC;CAChC,MAAM,mBAAkB;CAElC,UAAU,MAAgC,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC7C,QAAQ,MAAgC,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEjD,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,6DAA6D,WAAW,KAAK,IAAI,GAAG;GACtG;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;CAnDmB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAgC,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAhC,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAgC,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,UArEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsCT,UAAA;EAAA,QAAA,CAAA,mfAAA,qOAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MAxCS;IAAW,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAO,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAO,UAAA;IAAA,QAAA,CAAA,SAAA,MAAA;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;;AAuEhD,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAgC,YAAA,CAAA;EAzEpD,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAuB,SACxB;IAAC;IAAa;IAAS;IAAS;IAAiB;IAAW;GAAc;GAAC,gBACpE,CAAC,gBAAgB;GAAC,UACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCT,iBA6BgB,wBAAwB;GAAM,QAAA,CAAA,mfAAA,qOAAA;EAAA,CAAA"}
@@ -1,20 +1,48 @@
1
- import * as i0 from '@angular/core';
2
- import { input, ChangeDetectionStrategy, Component } from '@angular/core';
3
- import { FormField } from '@angular/forms/signals';
4
- import { IonRadioGroup, IonRadio, IonItem, IonNote } from '@ionic/angular/standalone';
5
- import * as i1 from '@ng-forge/dynamic-forms/integration';
6
- import { injectNgForgeField, NgForgeControl, DynamicTextPipe, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';
7
- import { AsyncPipe } from '@angular/common';
8
-
9
- class IonicRadioFieldComponent {
10
- ngf = injectNgForgeField();
11
- options = input([], /* @ts-ignore */
12
- ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
13
- props = input(/* @ts-ignore */
14
- ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
15
- defaultCompare = Object.is;
16
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: IonicRadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
17
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: IonicRadioFieldComponent, isStandalone: true, selector: "df-ion-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: `
1
+ import * as i0 from "@angular/core";
2
+ import { ChangeDetectionStrategy, Component, input } from "@angular/core";
3
+ import { FormField } from "@angular/forms/signals";
4
+ import { IonItem, IonNote, IonRadio, IonRadioGroup } from "@ionic/angular/standalone";
5
+ import * as i1 from "@ng-forge/dynamic-forms/integration";
6
+ import { DynamicTextPipe, NgForgeControl, NgForgeFieldHost, injectNgForgeField } from "@ng-forge/dynamic-forms/integration";
7
+ import { AsyncPipe } from "@angular/common";
8
+ var IonicRadioFieldComponent = class IonicRadioFieldComponent {
9
+ ngf = injectNgForgeField();
10
+ options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
11
+ props = input(...ngDevMode ? [void 0, { debugName: "props" }] : /* istanbul ignore next */ []);
12
+ defaultCompare = Object.is;
13
+ static ɵfac = i0.ɵɵngDeclareFactory({
14
+ minVersion: "12.0.0",
15
+ version: "22.2.5",
16
+ ngImport: i0,
17
+ type: IonicRadioFieldComponent,
18
+ deps: [],
19
+ target: i0.ɵɵFactoryTarget.Component
20
+ });
21
+ static ɵcmp = i0.ɵɵngDeclareComponent({
22
+ minVersion: "17.0.0",
23
+ version: "22.2.5",
24
+ type: IonicRadioFieldComponent,
25
+ isStandalone: true,
26
+ selector: "df-ion-radio",
27
+ inputs: {
28
+ options: {
29
+ classPropertyName: "options",
30
+ publicName: "options",
31
+ isSignal: true,
32
+ isRequired: false,
33
+ transformFunction: null
34
+ },
35
+ props: {
36
+ classPropertyName: "props",
37
+ publicName: "props",
38
+ isSignal: true,
39
+ isRequired: false,
40
+ transformFunction: null
41
+ }
42
+ },
43
+ hostDirectives: [{ directive: i1.NgForgeFieldHost }],
44
+ ngImport: i0,
45
+ template: `
18
46
  @let f = ngf.field();
19
47
  @let radioGroupId = ngf.key() + '-radio-group';
20
48
  @if (ngf.label(); as label) {
@@ -50,11 +78,113 @@ class IonicRadioFieldComponent {
50
78
  } @else if (props()?.hint; as hint) {
51
79
  <ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
52
80
  }
53
- `, isInline: true, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}.radio-label{font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:var(--ion-text-color)}\n"], dependencies: [{ kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { 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 });
54
- }
55
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: IonicRadioFieldComponent, decorators: [{
56
- type: Component,
57
- args: [{ selector: 'df-ion-radio', imports: [IonRadioGroup, IonRadio, IonItem, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl], hostDirectives: [NgForgeFieldHost], template: `
81
+ `,
82
+ isInline: true,
83
+ styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}.radio-label{font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:var(--ion-text-color)}\n"],
84
+ dependencies: [
85
+ {
86
+ kind: "component",
87
+ type: IonRadioGroup,
88
+ selector: "ion-radio-group",
89
+ inputs: [
90
+ "allowEmptySelection",
91
+ "compareWith",
92
+ "errorText",
93
+ "helperText",
94
+ "name",
95
+ "value"
96
+ ]
97
+ },
98
+ {
99
+ kind: "component",
100
+ type: IonRadio,
101
+ selector: "ion-radio",
102
+ inputs: [
103
+ "alignment",
104
+ "color",
105
+ "disabled",
106
+ "justify",
107
+ "labelPlacement",
108
+ "mode",
109
+ "name",
110
+ "value"
111
+ ]
112
+ },
113
+ {
114
+ kind: "component",
115
+ type: IonItem,
116
+ selector: "ion-item",
117
+ inputs: [
118
+ "button",
119
+ "color",
120
+ "detail",
121
+ "detailIcon",
122
+ "disabled",
123
+ "download",
124
+ "href",
125
+ "lines",
126
+ "mode",
127
+ "rel",
128
+ "routerAnimation",
129
+ "routerDirection",
130
+ "target",
131
+ "type"
132
+ ]
133
+ },
134
+ {
135
+ kind: "component",
136
+ type: IonNote,
137
+ selector: "ion-note",
138
+ inputs: ["color", "mode"]
139
+ },
140
+ {
141
+ kind: "directive",
142
+ type: FormField,
143
+ selector: "[formField]",
144
+ inputs: ["formField"],
145
+ exportAs: ["formField"]
146
+ },
147
+ {
148
+ kind: "directive",
149
+ type: NgForgeControl,
150
+ selector: "[ngForgeControl]",
151
+ inputs: ["ngForgeControl"]
152
+ },
153
+ {
154
+ kind: "pipe",
155
+ type: DynamicTextPipe,
156
+ name: "dynamicText"
157
+ },
158
+ {
159
+ kind: "pipe",
160
+ type: AsyncPipe,
161
+ name: "async"
162
+ }
163
+ ],
164
+ changeDetection: i0.ChangeDetectionStrategy.OnPush
165
+ });
166
+ };
167
+ i0.ɵɵngDeclareClassMetadata({
168
+ minVersion: "12.0.0",
169
+ version: "22.2.5",
170
+ ngImport: i0,
171
+ type: IonicRadioFieldComponent,
172
+ decorators: [{
173
+ type: Component,
174
+ args: [{
175
+ selector: "df-ion-radio",
176
+ imports: [
177
+ IonRadioGroup,
178
+ IonRadio,
179
+ IonItem,
180
+ IonNote,
181
+ FormField,
182
+ DynamicTextPipe,
183
+ AsyncPipe,
184
+ NgForgeControl
185
+ ],
186
+ hostDirectives: [NgForgeFieldHost],
187
+ template: `
58
188
  @let f = ngf.field();
59
189
  @let radioGroupId = ngf.key() + '-radio-group';
60
190
  @if (ngf.label(); as label) {
@@ -90,9 +220,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
90
220
  } @else if (props()?.hint; as hint) {
91
221
  <ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
92
222
  }
93
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}.radio-label{font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:var(--ion-text-color)}\n"] }]
94
- }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
95
-
96
-
223
+ `,
224
+ changeDetection: ChangeDetectionStrategy.OnPush,
225
+ styles: [".df-ion-field{display:flex;flex-direction:column;gap:var(--df-field-gap, .5rem);width:100%}.df-ion-label{font-weight:var(--df-label-font-weight, 500);color:var(--df-label-color, inherit)}.df-ion-hint{display:block;color:var(--df-hint-color, var(--ion-color-medium, #92949c));font-size:var(--df-hint-font-size, .875rem)}.df-ion-error{display:block;color:var(--df-error-color, var(--ion-color-danger, #eb445a));font-size:var(--df-error-font-size, .875rem)}:host([hidden]){display:none!important}\n", ":host{display:block}:host([hidden]){display:none!important}.radio-label{font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:var(--ion-text-color)}\n"]
226
+ }]
227
+ }],
228
+ propDecorators: {
229
+ options: [{
230
+ type: i0.Input,
231
+ args: [{
232
+ isSignal: true,
233
+ alias: "options",
234
+ required: false
235
+ }]
236
+ }],
237
+ props: [{
238
+ type: i0.Input,
239
+ args: [{
240
+ isSignal: true,
241
+ alias: "props",
242
+ required: false
243
+ }]
244
+ }]
245
+ }
246
+ });
97
247
  export { IonicRadioFieldComponent };
98
- //# sourceMappingURL=ng-forge-dynamic-forms-ionic-lazy-radio.mjs.map
248
+
249
+ //# sourceMappingURL=ng-forge-dynamic-forms-ionic-lazy-radio.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-radio.mjs","mappings":";;;;;;;;AAuEc;;;;AAIH;;AAET;;AANmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAtBlB","names":[],"ignoreList":[],"sources":["../../../../packages/dynamic-forms-ionic/src/lib/fields/radio/ionic-radio.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { IonItem, IonNote, IonRadio, IonRadioGroup } from '@ionic/angular/standalone';\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 { IonicRadioProps } from './ionic-radio.type';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n selector: 'df-ion-radio',\n imports: [IonRadioGroup, IonRadio, IonItem, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let radioGroupId = ngf.key() + '-radio-group';\n @if (ngf.label(); as label) {\n <div class=\"radio-label\">{{ label | dynamicText | async }}</div>\n }\n\n <ion-radio-group\n [id]=\"radioGroupId\"\n [formField]=\"f\"\n [compareWith]=\"props()?.compareWith || defaultCompare\"\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 <ion-item [lines]=\"'none'\">\n <ion-radio\n ngForgeControl\n [value]=\"option.value\"\n [disabled]=\"option.disabled || false\"\n [labelPlacement]=\"props()?.labelPlacement ?? 'end'\"\n [justify]=\"props()?.justify\"\n [color]=\"props()?.color ?? 'primary'\"\n >\n {{ option.label | dynamicText | async }}\n </ion-radio>\n </ion-item>\n }\n </ion-radio-group>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <ion-note color=\"danger\" class=\"df-ion-error\" [id]=\"ngf.errorId()\" role=\"alert\">{{ error.message }}</ion-note>\n } @else if (props()?.hint; as hint) {\n <ion-note class=\"df-ion-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</ion-note>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n :host {\n display: block;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n .radio-label {\n font-size: 0.875rem;\n font-weight: 500;\n margin-bottom: 0.5rem;\n color: var(--ion-text-color);\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class IonicRadioFieldComponent {\n protected readonly ngf = injectNgForgeField<ValueType>();\n\n readonly options = input<FieldOption<ValueType>[]>([]);\n readonly props = input<IonicRadioProps>();\n\n defaultCompare = Object.is;\n}\n"]}
1
+ {"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-radio.mjs","names":[],"sources":["../../../../packages/dynamic-forms-ionic/src/lib/fields/radio/ionic-radio.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { IonItem, IonNote, IonRadio, IonRadioGroup } from '@ionic/angular/standalone';\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 { IonicRadioProps } from './ionic-radio.type';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n selector: 'df-ion-radio',\n imports: [IonRadioGroup, IonRadio, IonItem, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let radioGroupId = ngf.key() + '-radio-group';\n @if (ngf.label(); as label) {\n <div class=\"radio-label\">{{ label | dynamicText | async }}</div>\n }\n\n <ion-radio-group\n [id]=\"radioGroupId\"\n [formField]=\"f\"\n [compareWith]=\"props()?.compareWith || defaultCompare\"\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 <ion-item [lines]=\"'none'\">\n <ion-radio\n ngForgeControl\n [value]=\"option.value\"\n [disabled]=\"option.disabled || false\"\n [labelPlacement]=\"props()?.labelPlacement ?? 'end'\"\n [justify]=\"props()?.justify\"\n [color]=\"props()?.color ?? 'primary'\"\n >\n {{ option.label | dynamicText | async }}\n </ion-radio>\n </ion-item>\n }\n </ion-radio-group>\n\n @if (ngf.errorsToDisplay()[0]; as error) {\n <ion-note color=\"danger\" class=\"df-ion-error\" [id]=\"ngf.errorId()\" role=\"alert\">{{ error.message }}</ion-note>\n } @else if (props()?.hint; as hint) {\n <ion-note class=\"df-ion-hint\" [id]=\"ngf.hintId()\">{{ hint | dynamicText | async }}</ion-note>\n }\n `,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n :host {\n display: block;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n .radio-label {\n font-size: 0.875rem;\n font-weight: 500;\n margin-bottom: 0.5rem;\n color: var(--ion-text-color);\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class IonicRadioFieldComponent {\n protected readonly ngf = injectNgForgeField<ValueType>();\n\n readonly options = input<FieldOption<ValueType>[]>([]);\n readonly props = input<IonicRadioProps>();\n\n defaultCompare = Object.is;\n}\n"],"mappings":";;;;;;;AAuEA,IAAqB,2BAArB,MAAqB,yBAAwB;CACxB,MAAM,mBAAkB;CAElC,UAAU,MAAgC,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC7C,QAAQ,MAAwB,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEzC,iBAAiB,OAAO;CANL,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAwB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAxB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAwB,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,UA1DjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCT,UAAA;EAAA,QAAA,CAAA,mfAAA,8JAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MAtCS;IAAa,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAQ,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAO,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAO,UAAA;IAAA,QAAA,CAAA,SAAA,MAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAS,UAAA;IAAA,QAAA,CAAA,WAAA;IAAA,UAAA,CAAA,WAAA;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;;AA4DvE,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAwB,YAAA,CAAA;EA9D5C,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAc,SACf;IAAC;IAAe;IAAU;IAAS;IAAS;IAAW;IAAiB;IAAW;GAAc;GAAC,gBAC3F,CAAC,gBAAgB;GAAC,UACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCT,iBAoBgB,wBAAwB;GAAM,QAAA,CAAA,mfAAA,8JAAA;EAAA,CAAA"}