@ng-forge/dynamic-forms-ionic 1.3.0-next.2 → 1.3.0-next.4
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/README.md +0 -2
- package/fesm2022/ng-forge-dynamic-forms-ionic-ionic-field-errors-wrapper.component-bXoq9uY6.mjs +64 -0
- package/fesm2022/ng-forge-dynamic-forms-ionic-ionic-field-errors-wrapper.component-bXoq9uY6.mjs.map +1 -0
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-addon-button.mjs +129 -34
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-addon-button.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-addon-icon.mjs +118 -35
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-addon-icon.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-button.mjs +113 -33
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-button.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-checkbox.mjs +124 -24
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-checkbox.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-datepicker.mjs +374 -90
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-datepicker.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-input.mjs +262 -126
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-input.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-multi-checkbox.mjs +191 -64
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-multi-checkbox.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-radio.mjs +178 -27
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-radio.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-select.mjs +163 -27
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-select.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-slider.mjs +144 -27
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-slider.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-textarea.mjs +157 -45
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-textarea.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-toggle.mjs +386 -75
- package/fesm2022/ng-forge-dynamic-forms-ionic-lazy-toggle.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic-shared.mjs +139 -62
- package/fesm2022/ng-forge-dynamic-forms-ionic-shared.mjs.map +1 -1
- package/fesm2022/ng-forge-dynamic-forms-ionic.mjs +238 -251
- package/fesm2022/ng-forge-dynamic-forms-ionic.mjs.map +1 -1
- package/package.json +2 -3
- package/types/ng-forge-dynamic-forms-ionic-lazy-addon-button.d.ts +28 -28
- package/types/ng-forge-dynamic-forms-ionic-lazy-addon-icon.d.ts +24 -17
- package/types/ng-forge-dynamic-forms-ionic-lazy-button.d.ts +92 -86
- package/types/ng-forge-dynamic-forms-ionic-lazy-checkbox.d.ts +24 -18
- package/types/ng-forge-dynamic-forms-ionic-lazy-datepicker.d.ts +59 -34
- package/types/ng-forge-dynamic-forms-ionic-lazy-input.d.ts +69 -57
- package/types/ng-forge-dynamic-forms-ionic-lazy-multi-checkbox.d.ts +34 -23
- package/types/ng-forge-dynamic-forms-ionic-lazy-radio.d.ts +31 -20
- package/types/ng-forge-dynamic-forms-ionic-lazy-select.d.ts +37 -26
- package/types/ng-forge-dynamic-forms-ionic-lazy-slider.d.ts +53 -38
- package/types/ng-forge-dynamic-forms-ionic-lazy-textarea.d.ts +29 -23
- package/types/ng-forge-dynamic-forms-ionic-lazy-toggle.d.ts +119 -55
- package/types/ng-forge-dynamic-forms-ionic-shared.d.ts +78 -83
- package/types/ng-forge-dynamic-forms-ionic.d.ts +243 -266
- package/fesm2022/ng-forge-dynamic-forms-ionic-ionic-field-errors-wrapper.component-CN0CagvT.mjs +0 -26
- package/fesm2022/ng-forge-dynamic-forms-ionic-ionic-field-errors-wrapper.component-CN0CagvT.mjs.map +0 -1
|
@@ -1,20 +1,48 @@
|
|
|
1
|
-
import * as i0 from
|
|
2
|
-
import {
|
|
3
|
-
import { FormField } from
|
|
4
|
-
import { IonSelect, IonSelectOption
|
|
5
|
-
import * as i1 from
|
|
6
|
-
import {
|
|
7
|
-
import { AsyncPipe } from
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import { ChangeDetectionStrategy, Component, input } from "@angular/core";
|
|
3
|
+
import { FormField } from "@angular/forms/signals";
|
|
4
|
+
import { IonNote, IonSelect, IonSelectOption } 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 IonicSelectFieldComponent = class IonicSelectFieldComponent {
|
|
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: IonicSelectFieldComponent,
|
|
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: IonicSelectFieldComponent,
|
|
25
|
+
isStandalone: true,
|
|
26
|
+
selector: "df-ion-select",
|
|
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 selectId = ngf.key() + '-select';
|
|
20
48
|
|
|
@@ -47,11 +75,98 @@ class IonicSelectFieldComponent {
|
|
|
47
75
|
} @else if (props()?.hint; as hint) {
|
|
48
76
|
<ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
49
77
|
}
|
|
50
|
-
`,
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
78
|
+
`,
|
|
79
|
+
isInline: true,
|
|
80
|
+
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([hidden]){display:none!important}\n"],
|
|
81
|
+
dependencies: [
|
|
82
|
+
{
|
|
83
|
+
kind: "component",
|
|
84
|
+
type: IonSelect,
|
|
85
|
+
selector: "ion-select",
|
|
86
|
+
inputs: [
|
|
87
|
+
"cancelText",
|
|
88
|
+
"color",
|
|
89
|
+
"compareWith",
|
|
90
|
+
"disabled",
|
|
91
|
+
"errorText",
|
|
92
|
+
"expandedIcon",
|
|
93
|
+
"fill",
|
|
94
|
+
"helperText",
|
|
95
|
+
"interface",
|
|
96
|
+
"interfaceOptions",
|
|
97
|
+
"justify",
|
|
98
|
+
"label",
|
|
99
|
+
"labelPlacement",
|
|
100
|
+
"mode",
|
|
101
|
+
"multiple",
|
|
102
|
+
"name",
|
|
103
|
+
"okText",
|
|
104
|
+
"placeholder",
|
|
105
|
+
"selectedText",
|
|
106
|
+
"shape",
|
|
107
|
+
"toggleIcon",
|
|
108
|
+
"value"
|
|
109
|
+
]
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
kind: "component",
|
|
113
|
+
type: IonSelectOption,
|
|
114
|
+
selector: "ion-select-option",
|
|
115
|
+
inputs: ["disabled", "value"]
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
kind: "component",
|
|
119
|
+
type: IonNote,
|
|
120
|
+
selector: "ion-note",
|
|
121
|
+
inputs: ["color", "mode"]
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
kind: "directive",
|
|
125
|
+
type: FormField,
|
|
126
|
+
selector: "[formField]",
|
|
127
|
+
inputs: ["formField"],
|
|
128
|
+
exportAs: ["formField"]
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
kind: "directive",
|
|
132
|
+
type: NgForgeControl,
|
|
133
|
+
selector: "[ngForgeControl]",
|
|
134
|
+
inputs: ["ngForgeControl"]
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
kind: "pipe",
|
|
138
|
+
type: DynamicTextPipe,
|
|
139
|
+
name: "dynamicText"
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
kind: "pipe",
|
|
143
|
+
type: AsyncPipe,
|
|
144
|
+
name: "async"
|
|
145
|
+
}
|
|
146
|
+
],
|
|
147
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
148
|
+
});
|
|
149
|
+
};
|
|
150
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
151
|
+
minVersion: "12.0.0",
|
|
152
|
+
version: "22.2.5",
|
|
153
|
+
ngImport: i0,
|
|
154
|
+
type: IonicSelectFieldComponent,
|
|
155
|
+
decorators: [{
|
|
156
|
+
type: Component,
|
|
157
|
+
args: [{
|
|
158
|
+
selector: "df-ion-select",
|
|
159
|
+
imports: [
|
|
160
|
+
IonSelect,
|
|
161
|
+
IonSelectOption,
|
|
162
|
+
IonNote,
|
|
163
|
+
FormField,
|
|
164
|
+
DynamicTextPipe,
|
|
165
|
+
AsyncPipe,
|
|
166
|
+
NgForgeControl
|
|
167
|
+
],
|
|
168
|
+
hostDirectives: [NgForgeFieldHost],
|
|
169
|
+
template: `
|
|
55
170
|
@let f = ngf.field();
|
|
56
171
|
@let selectId = ngf.key() + '-select';
|
|
57
172
|
|
|
@@ -84,9 +199,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
84
199
|
} @else if (props()?.hint; as hint) {
|
|
85
200
|
<ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
86
201
|
}
|
|
87
|
-
`,
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
202
|
+
`,
|
|
203
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
204
|
+
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([hidden]){display:none!important}\n"]
|
|
205
|
+
}]
|
|
206
|
+
}],
|
|
207
|
+
propDecorators: {
|
|
208
|
+
options: [{
|
|
209
|
+
type: i0.Input,
|
|
210
|
+
args: [{
|
|
211
|
+
isSignal: true,
|
|
212
|
+
alias: "options",
|
|
213
|
+
required: false
|
|
214
|
+
}]
|
|
215
|
+
}],
|
|
216
|
+
props: [{
|
|
217
|
+
type: i0.Input,
|
|
218
|
+
args: [{
|
|
219
|
+
isSignal: true,
|
|
220
|
+
alias: "props",
|
|
221
|
+
required: false
|
|
222
|
+
}]
|
|
223
|
+
}]
|
|
224
|
+
}
|
|
225
|
+
});
|
|
91
226
|
export { IonicSelectFieldComponent };
|
|
92
|
-
|
|
227
|
+
|
|
228
|
+
//# sourceMappingURL=ng-forge-dynamic-forms-ionic-lazy-select.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-select.mjs","
|
|
1
|
+
{"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-select.mjs","names":[],"sources":["../../../../packages/dynamic-forms-ionic/src/lib/fields/select/ionic-select.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { IonNote, IonSelect, IonSelectOption } 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 { IonicSelectProps } from './ionic-select.type';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n selector: 'df-ion-select',\n imports: [IonSelect, IonSelectOption, IonNote, FormField, DynamicTextPipe, AsyncPipe, NgForgeControl],\n hostDirectives: [NgForgeFieldHost],\n template: `\n @let f = ngf.field();\n @let selectId = ngf.key() + '-select';\n\n <ion-select\n ngForgeControl\n [id]=\"selectId\"\n [formField]=\"f\"\n [label]=\"(ngf.label() | dynamicText | async) ?? undefined\"\n [labelPlacement]=\"props()?.labelPlacement ?? 'stacked'\"\n [placeholder]=\"(ngf.placeholder() | dynamicText | async) ?? ''\"\n [multiple]=\"props()?.multiple ?? false\"\n [compareWith]=\"props()?.compareWith ?? defaultCompare\"\n [interface]=\"props()?.interface ?? 'alert'\"\n [interfaceOptions]=\"props()?.interfaceOptions ?? {}\"\n [cancelText]=\"props()?.cancelText ?? 'Cancel'\"\n [okText]=\"props()?.okText ?? 'OK'\"\n [color]=\"props()?.color\"\n [fill]=\"props()?.fill ?? 'outline'\"\n [shape]=\"props()?.shape\"\n [attr.tabindex]=\"ngf.tabIndex()\"\n >\n @for (option of options(); track option.value) {\n <ion-select-option [value]=\"option.value\" [disabled]=\"option.disabled || false\">\n {{ option.label | dynamicText | async }}\n </ion-select-option>\n }\n </ion-select>\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 changeDetection: ChangeDetectionStrategy.OnPush,\n styleUrl: '../../styles/_form-field.scss',\n styles: [\n `\n :host([hidden]) {\n display: none !important;\n }\n `,\n ],\n})\nexport default class IonicSelectFieldComponent {\n protected readonly ngf = injectNgForgeField<ValueType>();\n\n readonly options = input<FieldOption<ValueType>[]>([]);\n readonly props = input<IonicSelectProps>();\n\n defaultCompare = Object.is;\n}\n"],"mappings":";;;;;;;AAyDA,IAAqB,4BAArB,MAAqB,0BAAyB;CACzB,MAAM,mBAAkB;CAElC,UAAU,MAAgC,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC7C,QAAQ,MAAyB,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAE1C,iBAAiB,OAAO;CANL,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAyB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAzB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAyB,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,UA5ClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCT,UAAA;EAAA,QAAA,CAAA,mfAAA,2CAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MAnCS;IAAS,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA,CAAA,YAAA,OAAA;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;;AA8CjE,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAyB,YAAA,CAAA;EAhD7C,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAe,SAChB;IAAC;IAAW;IAAiB;IAAS;IAAW;IAAiB;IAAW;GAAc;GAAC,gBACrF,CAAC,gBAAgB;GAAC,UACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCT,iBACgB,wBAAwB;GAAM,QAAA,CAAA,mfAAA,2CAAA;EAAA,CAAA"}
|
|
@@ -1,20 +1,48 @@
|
|
|
1
|
-
import * as i0 from
|
|
2
|
-
import {
|
|
3
|
-
import { FormField } from
|
|
4
|
-
import {
|
|
5
|
-
import * as i1 from
|
|
6
|
-
import {
|
|
7
|
-
import { AsyncPipe } from
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import { ChangeDetectionStrategy, Component, input } from "@angular/core";
|
|
3
|
+
import { FormField } from "@angular/forms/signals";
|
|
4
|
+
import { IonNote, IonRange } from "@ionic/angular/standalone";
|
|
5
|
+
import * as i1 from "@ng-forge/dynamic-forms/integration";
|
|
6
|
+
import { DynamicTextPipe, NgForgeFieldHost, NgForgeHostControl, injectNgForgeField } from "@ng-forge/dynamic-forms/integration";
|
|
7
|
+
import { AsyncPipe } from "@angular/common";
|
|
8
|
+
var IonicSliderFieldComponent = class IonicSliderFieldComponent {
|
|
9
|
+
ngf = injectNgForgeField();
|
|
10
|
+
step = input(...ngDevMode ? [void 0, { debugName: "step" }] : /* istanbul ignore next */ []);
|
|
11
|
+
props = input(...ngDevMode ? [void 0, { debugName: "props" }] : /* istanbul ignore next */ []);
|
|
12
|
+
defaultPinFormatter = (value) => String(value);
|
|
13
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
14
|
+
minVersion: "12.0.0",
|
|
15
|
+
version: "22.2.5",
|
|
16
|
+
ngImport: i0,
|
|
17
|
+
type: IonicSliderFieldComponent,
|
|
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: IonicSliderFieldComponent,
|
|
25
|
+
isStandalone: true,
|
|
26
|
+
selector: "df-ion-slider",
|
|
27
|
+
inputs: {
|
|
28
|
+
step: {
|
|
29
|
+
classPropertyName: "step",
|
|
30
|
+
publicName: "step",
|
|
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 }, { directive: i1.NgForgeHostControl }],
|
|
44
|
+
ngImport: i0,
|
|
45
|
+
template: `
|
|
18
46
|
@let f = ngf.field();
|
|
19
47
|
@let inputId = ngf.key() + '-input';
|
|
20
48
|
|
|
@@ -39,11 +67,79 @@ class IonicSliderFieldComponent {
|
|
|
39
67
|
} @else if (props()?.hint; as hint) {
|
|
40
68
|
<ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
41
69
|
}
|
|
42
|
-
`,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
70
|
+
`,
|
|
71
|
+
isInline: true,
|
|
72
|
+
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}\n"],
|
|
73
|
+
dependencies: [
|
|
74
|
+
{
|
|
75
|
+
kind: "component",
|
|
76
|
+
type: IonRange,
|
|
77
|
+
selector: "ion-range",
|
|
78
|
+
inputs: [
|
|
79
|
+
"activeBarStart",
|
|
80
|
+
"color",
|
|
81
|
+
"debounce",
|
|
82
|
+
"disabled",
|
|
83
|
+
"dualKnobs",
|
|
84
|
+
"label",
|
|
85
|
+
"labelPlacement",
|
|
86
|
+
"max",
|
|
87
|
+
"min",
|
|
88
|
+
"mode",
|
|
89
|
+
"name",
|
|
90
|
+
"pin",
|
|
91
|
+
"pinFormatter",
|
|
92
|
+
"snaps",
|
|
93
|
+
"step",
|
|
94
|
+
"ticks",
|
|
95
|
+
"value"
|
|
96
|
+
]
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
kind: "component",
|
|
100
|
+
type: IonNote,
|
|
101
|
+
selector: "ion-note",
|
|
102
|
+
inputs: ["color", "mode"]
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
kind: "directive",
|
|
106
|
+
type: FormField,
|
|
107
|
+
selector: "[formField]",
|
|
108
|
+
inputs: ["formField"],
|
|
109
|
+
exportAs: ["formField"]
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
kind: "pipe",
|
|
113
|
+
type: DynamicTextPipe,
|
|
114
|
+
name: "dynamicText"
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
kind: "pipe",
|
|
118
|
+
type: AsyncPipe,
|
|
119
|
+
name: "async"
|
|
120
|
+
}
|
|
121
|
+
],
|
|
122
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
123
|
+
});
|
|
124
|
+
};
|
|
125
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
126
|
+
minVersion: "12.0.0",
|
|
127
|
+
version: "22.2.5",
|
|
128
|
+
ngImport: i0,
|
|
129
|
+
type: IonicSliderFieldComponent,
|
|
130
|
+
decorators: [{
|
|
131
|
+
type: Component,
|
|
132
|
+
args: [{
|
|
133
|
+
selector: "df-ion-slider",
|
|
134
|
+
imports: [
|
|
135
|
+
IonRange,
|
|
136
|
+
IonNote,
|
|
137
|
+
FormField,
|
|
138
|
+
DynamicTextPipe,
|
|
139
|
+
AsyncPipe
|
|
140
|
+
],
|
|
141
|
+
hostDirectives: [NgForgeFieldHost, NgForgeHostControl],
|
|
142
|
+
template: `
|
|
47
143
|
@let f = ngf.field();
|
|
48
144
|
@let inputId = ngf.key() + '-input';
|
|
49
145
|
|
|
@@ -68,9 +164,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
68
164
|
} @else if (props()?.hint; as hint) {
|
|
69
165
|
<ion-note class="df-ion-hint" [id]="ngf.hintId()">{{ hint | dynamicText | async }}</ion-note>
|
|
70
166
|
}
|
|
71
|
-
`,
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
167
|
+
`,
|
|
168
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
169
|
+
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}\n"]
|
|
170
|
+
}]
|
|
171
|
+
}],
|
|
172
|
+
propDecorators: {
|
|
173
|
+
step: [{
|
|
174
|
+
type: i0.Input,
|
|
175
|
+
args: [{
|
|
176
|
+
isSignal: true,
|
|
177
|
+
alias: "step",
|
|
178
|
+
required: false
|
|
179
|
+
}]
|
|
180
|
+
}],
|
|
181
|
+
props: [{
|
|
182
|
+
type: i0.Input,
|
|
183
|
+
args: [{
|
|
184
|
+
isSignal: true,
|
|
185
|
+
alias: "props",
|
|
186
|
+
required: false
|
|
187
|
+
}]
|
|
188
|
+
}]
|
|
189
|
+
}
|
|
190
|
+
});
|
|
75
191
|
export { IonicSliderFieldComponent };
|
|
76
|
-
|
|
192
|
+
|
|
193
|
+
//# sourceMappingURL=ng-forge-dynamic-forms-ionic-lazy-slider.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-slider.mjs","
|
|
1
|
+
{"version":3,"file":"ng-forge-dynamic-forms-ionic-lazy-slider.mjs","names":[],"sources":["../../../../packages/dynamic-forms-ionic/src/lib/fields/slider/ionic-slider.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { IonNote, IonRange } from '@ionic/angular/standalone';\nimport { DynamicTextPipe } from '@ng-forge/dynamic-forms/integration';\nimport { NgForgeHostControl, injectNgForgeField, NgForgeFieldHost } from '@ng-forge/dynamic-forms/integration';\nimport { IonicSliderProps } from './ionic-slider.type';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n selector: 'df-ion-slider',\n imports: [IonRange, IonNote, FormField, DynamicTextPipe, AsyncPipe],\n hostDirectives: [NgForgeFieldHost, NgForgeHostControl],\n template: `\n @let f = ngf.field();\n @let inputId = ngf.key() + '-input';\n\n <ion-range\n [id]=\"inputId\"\n [formField]=\"f\"\n [label]=\"(ngf.label() | dynamicText | async) ?? undefined\"\n [labelPlacement]=\"props()?.labelPlacement ?? 'stacked'\"\n [min]=\"f().min?.() ?? props()?.min ?? 0\"\n [max]=\"f().max?.() ?? props()?.max ?? 100\"\n [step]=\"step() ?? props()?.step ?? 1\"\n [dualKnobs]=\"props()?.dualKnobs ?? false\"\n [pin]=\"props()?.pin ?? false\"\n [pinFormatter]=\"props()?.pinFormatter ?? defaultPinFormatter\"\n [ticks]=\"props()?.ticks ?? false\"\n [snaps]=\"props()?.snaps ?? false\"\n [color]=\"props()?.color ?? 'primary'\"\n />\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 ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class IonicSliderFieldComponent {\n protected readonly ngf = injectNgForgeField<number>();\n\n readonly step = input<number>();\n readonly props = input<IonicSliderProps>();\n\n protected defaultPinFormatter = (value: number) => String(value);\n}\n"],"mappings":";;;;;;;AAoDA,IAAqB,4BAArB,MAAqB,0BAAyB;CACzB,MAAM,mBAAkB;CAElC,OAAO,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CACtB,QAAQ,MAAyB,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEhC,uBAAuB,UAAkB,OAAO,KAAK;CAN5C,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAyB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAzB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAyB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;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,GAAA,EAAA,WAAA,GAAA,mBAAA,CAAA;EAAA,UAAA;EAAA,UAxClC;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBT,UAAA;EAAA,QAAA,CAAA,mfAAA,+DAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MA3BS;IAAQ,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;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,MAAE;IAAe,MAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAS,MAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AA0C/C,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAyB,YAAA,CAAA;EA5C7C,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAe,SAChB;IAAC;IAAU;IAAS;IAAW;IAAiB;GAAS;GAAC,gBACnD,CAAC,kBAAkB,kBAAkB;GAAC,UAC5C;;;;;;;;;;;;;;;;;;;;;;;;;;GAyBT,iBAagB,wBAAwB;GAAM,QAAA,CAAA,mfAAA,+DAAA;EAAA,CAAA"}
|