@zywave/zui-formfield 4.0.31-pre.0 → 4.1.0-pre.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/CHANGELOG.md +10 -149
- package/dist/custom-elements.json +12 -2
- package/dist/zui-formfield.d.ts +5 -2
- package/dist/zui-formfield.js +6 -3
- package/dist/zui-formfield.js.map +1 -1
- package/docs/demo.html +14 -0
- package/lab.html +0 -1
- package/package.json +3 -3
- package/src/zui-formfield.ts +6 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,305 +3,166 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [4.0.
|
|
6
|
+
## [4.0.31](https://gitlab.com/zywave/app-platform/devkit/web-sdk/zui/compare/@zywave/zui-formfield@4.0.31-pre.0...@zywave/zui-formfield@4.0.31) (2023-07-07)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
9
9
|
|
|
10
|
+
## [4.0.30](https://gitlab.com/zywave/app-platform/devkit/web-sdk/zui/compare/@zywave/zui-formfield@4.0.30-pre.0...@zywave/zui-formfield@4.0.30) (2022-09-30)
|
|
10
11
|
|
|
11
|
-
|
|
12
|
-
|
|
12
|
+
**Note:** Version bump only for package @zywave/zui-formfield
|
|
13
13
|
|
|
14
14
|
## [4.0.29](https://gitlab.com/zywave/devkit/web-sdk/zui/compare/@zywave/zui-formfield@4.0.29-pre.0...@zywave/zui-formfield@4.0.29) (2022-08-12)
|
|
15
15
|
|
|
16
16
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
17
17
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
18
|
## [4.0.28](https://gitlab.com/zywave/devkit/web-sdk/zui/compare/@zywave/zui-formfield@4.0.28-pre.0...@zywave/zui-formfield@4.0.28) (2022-05-04)
|
|
23
19
|
|
|
24
20
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
25
21
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
22
|
## [4.0.27](https://gitlab.com/zywave/devkit/web-sdk/zui/compare/@zywave/zui-formfield@4.0.27-pre.1...@zywave/zui-formfield@4.0.27) (2022-05-04)
|
|
31
23
|
|
|
32
24
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
33
25
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
26
|
## [4.0.26](https://gitlab.com/zywave/devkit/web-sdk/zui/compare/@zywave/zui-formfield@4.0.26-pre.0...@zywave/zui-formfield@4.0.26) (2022-03-25)
|
|
39
27
|
|
|
40
28
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
41
29
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
30
|
## [4.0.25](https://gitlab.com/zywave/devkit/zui/zui/compare/@zywave/zui-formfield@4.0.25-pre.2...@zywave/zui-formfield@4.0.25) (2022-02-25)
|
|
47
31
|
|
|
48
32
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
49
33
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
34
|
## [4.0.24](https://gitlab.com/zywave/devkit/zui/zui/compare/@zywave/zui-formfield@4.0.24-pre.3...@zywave/zui-formfield@4.0.24) (2022-01-26)
|
|
55
35
|
|
|
56
36
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
57
37
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
38
|
## [4.0.23](https://gitlab.zywave.com/devkit/zui/zui/compare/@zywave/zui-formfield@4.0.23-pre.0...@zywave/zui-formfield@4.0.23) (2021-10-29)
|
|
63
39
|
|
|
64
40
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
65
41
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
42
|
## [4.0.22](https://gitlab.zywave.com/devkit/zui/zui/compare/@zywave/zui-formfield@4.0.22-pre.0...@zywave/zui-formfield@4.0.22) (2021-09-30)
|
|
71
43
|
|
|
72
44
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
73
45
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
46
|
## [4.0.21](https://gitlab.zywave.com/devkit/zui/zui/compare/@zywave/zui-formfield@4.0.21-pre.2...@zywave/zui-formfield@4.0.21) (2021-08-27)
|
|
79
47
|
|
|
80
48
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
81
49
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
50
|
## [4.0.20](https://gitlab.zywave.com/devkit/zui/zui/compare/@zywave/zui-formfield@4.0.20-pre.0...@zywave/zui-formfield@4.0.20) (2021-06-12)
|
|
87
51
|
|
|
88
|
-
|
|
89
52
|
### Features
|
|
90
53
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
54
|
+
- remove all legacy IE11/EdgeHTML browser support ([dedf08d](https://gitlab.zywave.com/devkit/zui/zui/commit/dedf08d))
|
|
94
55
|
|
|
95
56
|
## [4.0.19](https://gitlab.zywave.com/devkit/zui/zui/compare/@zywave/zui-formfield@4.0.19-pre.3...@zywave/zui-formfield@4.0.19) (2021-05-19)
|
|
96
57
|
|
|
97
58
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
98
59
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
60
|
## [4.0.18](https://gitlab.zywave.com/devkit/zui/zui/compare/@zywave/zui-formfield@4.0.18-pre.2...@zywave/zui-formfield@4.0.18) (2021-04-23)
|
|
104
61
|
|
|
105
62
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
106
63
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
64
|
## [4.0.17](https://gitlab.zywave.com/devkit/zui/zui/compare/@zywave/zui-formfield@4.0.17-pre.1...@zywave/zui-formfield@4.0.17) (2021-03-27)
|
|
112
65
|
|
|
113
66
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
114
67
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
68
|
## [4.0.16](https://gitlab.zywave.com/devkit/zui/zui/compare/@zywave/zui-formfield@4.0.16-pre.3...@zywave/zui-formfield@4.0.16) (2021-02-26)
|
|
120
69
|
|
|
121
70
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
122
71
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
72
|
## [4.0.15](https://gitlab.zywave.com/devkit/zui/zui/compare/@zywave/zui-formfield@4.0.15-pre.0...@zywave/zui-formfield@4.0.15) (2021-01-22)
|
|
128
73
|
|
|
129
74
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
130
75
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
76
|
## [4.0.14](https://gitlab.zywave.com/devkit/zui/zui/compare/@zywave/zui-formfield@4.0.14-pre.2...@zywave/zui-formfield@4.0.14) (2020-12-18)
|
|
136
77
|
|
|
137
78
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
138
79
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
80
|
## [4.0.13](https://gitlab.zywave.com/devkit/zui/zui/compare/@zywave/zui-formfield@4.0.13-pre.0...@zywave/zui-formfield@4.0.13) (2020-11-19)
|
|
144
81
|
|
|
145
82
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
146
83
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
84
|
## [4.0.12](https://gitlab.zywave.com/zui/zui/compare/@zywave/zui-formfield@4.0.12-pre.3...@zywave/zui-formfield@4.0.12) (2020-11-03)
|
|
152
85
|
|
|
153
86
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
154
87
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
88
|
## [4.0.11](https://gitlab.zywave.com/zui/zui/compare/@zywave/zui-formfield@4.0.10...@zywave/zui-formfield@4.0.11) (2020-08-27)
|
|
160
89
|
|
|
161
|
-
|
|
162
90
|
### Bug Fixes
|
|
163
91
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
92
|
+
- move width to a diff selector ([b76e6ca](https://gitlab.zywave.com/zui/zui/commit/b76e6ca))
|
|
167
93
|
|
|
168
94
|
## [4.0.10](https://gitlab.zywave.com/zui/zui/compare/@zywave/zui-formfield@4.0.10-pre.5...@zywave/zui-formfield@4.0.10) (2020-08-07)
|
|
169
95
|
|
|
170
96
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
171
97
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
98
|
## [4.0.9](https://gitlab.zywave.com/zui/zui/compare/@zywave/zui-formfield@4.0.9-pre.0...@zywave/zui-formfield@4.0.9) (2020-05-29)
|
|
177
99
|
|
|
178
100
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
179
101
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
102
|
## 4.0.8 (2020-05-28)
|
|
185
103
|
|
|
186
104
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
187
105
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
106
|
## [4.0.7](https://gitlab.zywave.com/zui/zui/compare/@zywave/zui-formfield@4.0.7-pre.12...@zywave/zui-formfield@4.0.7) (2020-04-17)
|
|
193
107
|
|
|
194
108
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
195
109
|
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
110
|
## [4.0.6](https://gitlab.zywave.com/zui/zui/compare/@zywave/zui-formfield@4.0.5...@zywave/zui-formfield@4.0.6) (2020-01-29)
|
|
201
111
|
|
|
202
112
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
203
113
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
114
|
## [4.0.4](https://gitlab.zywave.com/zui/zui/compare/@zywave/zui-formfield@4.0.4-pre.2...@zywave/zui-formfield@4.0.4) (2019-09-09)
|
|
209
115
|
|
|
210
116
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
211
117
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
118
|
## [4.0.3](https://gitlab.zywave.com/zui/zui/compare/@zywave/zui-formfield@4.0.3-pre.2...@zywave/zui-formfield@4.0.3) (2019-07-29)
|
|
217
119
|
|
|
218
120
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
219
121
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
122
|
## [4.0.2](https://gitlab.zywave.com/zui/zui/compare/@zywave/zui-formfield@4.0.2-pre.5...@zywave/zui-formfield@4.0.2) (2019-07-12)
|
|
225
123
|
|
|
226
124
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
227
125
|
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
126
|
## [4.0.1](https://gitlab.zywave.com/zui/zui/compare/@zywave/zui-formfield@4.0.1-pre.7...@zywave/zui-formfield@4.0.1) (2019-06-10)
|
|
233
127
|
|
|
234
128
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
235
129
|
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
130
|
## [4.0.1-pre.5](https://gitlab.zywave.com/zui/zui/compare/@zywave/zui-formfield@4.0.1-pre.4...@zywave/zui-formfield@4.0.1-pre.5) (2019-05-15)
|
|
241
131
|
|
|
242
|
-
|
|
243
132
|
### Bug Fixes
|
|
244
133
|
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
134
|
+
- replace ALL broken FOUC links in the labs ([01778ae](https://gitlab.zywave.com/zui/zui/commit/01778ae))
|
|
250
135
|
|
|
251
136
|
## [4.0.1-pre.4](https://gitlab.zywave.com/zui/zui/compare/@zywave/zui-formfield@4.0.1-pre.3...@zywave/zui-formfield@4.0.1-pre.4) (2019-05-09)
|
|
252
137
|
|
|
253
|
-
|
|
254
138
|
### Bug Fixes
|
|
255
139
|
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
140
|
+
- remove implied dependency on zui-styles (1) ([c1bd4e1](https://gitlab.zywave.com/zui/zui/commit/c1bd4e1))
|
|
261
141
|
|
|
262
142
|
## [4.0.1-pre.3](https://gitlab.zywave.com/zui/zui/compare/@zywave/zui-formfield@4.0.1-pre.2...@zywave/zui-formfield@4.0.1-pre.3) (2019-04-17)
|
|
263
143
|
|
|
264
144
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
265
145
|
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
146
|
## [4.0.1-pre.2](https://gitlab.zywave.com/zui/zui/compare/@zywave/zui-formfield@4.0.1-pre.1...@zywave/zui-formfield@4.0.1-pre.2) (2019-04-11)
|
|
271
147
|
|
|
272
148
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
273
149
|
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
150
|
## [4.0.1-pre.1](https://gitlab.zywave.com/zui/zui/compare/@zywave/zui-formfield@4.0.1-pre.0...@zywave/zui-formfield@4.0.1-pre.1) (2019-04-09)
|
|
279
151
|
|
|
280
|
-
|
|
281
152
|
### Bug Fixes
|
|
282
153
|
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
154
|
+
- package.json module configuration ([ad2f9ff](https://gitlab.zywave.com/zui/zui/commit/ad2f9ff))
|
|
288
155
|
|
|
289
156
|
## [4.0.1-pre.0](https://gitlab.zywave.com/zui/zui/compare/@zywave/zui-formfield@4.0.0...@zywave/zui-formfield@4.0.1-pre.0) (2019-04-09)
|
|
290
157
|
|
|
291
158
|
**Note:** Version bump only for package @zywave/zui-formfield
|
|
292
159
|
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
160
|
# 4.0.0 (2019-03-29)
|
|
298
161
|
|
|
299
|
-
|
|
300
162
|
### Bug Fixes
|
|
301
163
|
|
|
302
|
-
|
|
303
|
-
|
|
164
|
+
- use relative paths instead of hardcoding ([f683dd0](https://gitlab.zywave.com/zui/zui/commit/f683dd0))
|
|
304
165
|
|
|
305
166
|
### Features
|
|
306
167
|
|
|
307
|
-
|
|
168
|
+
- zui-formfield; fix: consistent custom events ([139a84c](https://gitlab.zywave.com/zui/zui/commit/139a84c))
|
|
@@ -8,11 +8,21 @@
|
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "`<zui-formfield>`
|
|
11
|
+
"description": "`<zui-formfield>` provides a standardized way of labeling and styling form controls.",
|
|
12
12
|
"name": "ZuiFormField",
|
|
13
|
+
"cssParts": [
|
|
14
|
+
{
|
|
15
|
+
"description": "The container for form fields inserted into `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(container)`.",
|
|
16
|
+
"name": "container"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"description": "The label for `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(label)`.",
|
|
20
|
+
"name": "label"
|
|
21
|
+
}
|
|
22
|
+
],
|
|
13
23
|
"slots": [
|
|
14
24
|
{
|
|
15
|
-
"description": "
|
|
25
|
+
"description": "Default, unnamed slot; for inserting form controls, such as `<select>`, `<input>`, `<zui-input>`, `<zui-select>`, etc., into `<zui-formfield>`",
|
|
16
26
|
"name": ""
|
|
17
27
|
}
|
|
18
28
|
],
|
package/dist/zui-formfield.d.ts
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { ZuiBaseElement } from '@zywave/zui-base';
|
|
2
2
|
/**
|
|
3
|
-
* `<zui-formfield>`
|
|
3
|
+
* `<zui-formfield>` provides a standardized way of labeling and styling form controls.
|
|
4
4
|
*
|
|
5
|
-
* @slot -
|
|
5
|
+
* @slot - Default, unnamed slot; for inserting form controls, such as `<select>`, `<input>`, `<zui-input>`, `<zui-select>`, etc., into `<zui-formfield>`
|
|
6
|
+
*
|
|
7
|
+
* @csspart container - The container for form fields inserted into `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(container)`.
|
|
8
|
+
* @csspart label - The label for `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(label)`.
|
|
6
9
|
*/
|
|
7
10
|
export declare class ZuiFormField extends ZuiBaseElement {
|
|
8
11
|
#private;
|
package/dist/zui-formfield.js
CHANGED
|
@@ -16,9 +16,12 @@ import { html, nothing } from 'lit';
|
|
|
16
16
|
import { property, query } from 'lit/decorators.js';
|
|
17
17
|
import { style } from './zui-formfield-css.js';
|
|
18
18
|
/**
|
|
19
|
-
* `<zui-formfield>`
|
|
19
|
+
* `<zui-formfield>` provides a standardized way of labeling and styling form controls.
|
|
20
20
|
*
|
|
21
|
-
* @slot -
|
|
21
|
+
* @slot - Default, unnamed slot; for inserting form controls, such as `<select>`, `<input>`, `<zui-input>`, `<zui-select>`, etc., into `<zui-formfield>`
|
|
22
|
+
*
|
|
23
|
+
* @csspart container - The container for form fields inserted into `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(container)`.
|
|
24
|
+
* @csspart label - The label for `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(label)`.
|
|
22
25
|
*/
|
|
23
26
|
export class ZuiFormField extends ZuiBaseElement {
|
|
24
27
|
constructor() {
|
|
@@ -38,7 +41,7 @@ export class ZuiFormField extends ZuiBaseElement {
|
|
|
38
41
|
}
|
|
39
42
|
render() {
|
|
40
43
|
return html `
|
|
41
|
-
<div class="container">
|
|
44
|
+
<div class="container" part="container">
|
|
42
45
|
${this.label ? html ` <label @click="${__classPrivateFieldGet(this, _ZuiFormField_instances, "m", _ZuiFormField_onLabelClick)}" part="label">${this.label}</label> ` : nothing}
|
|
43
46
|
<slot></slot>
|
|
44
47
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zui-formfield.js","sourceRoot":"","sources":["../src/zui-formfield.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mDAAmD,CAAC;AACxF,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C
|
|
1
|
+
{"version":3,"file":"zui-formfield.js","sourceRoot":"","sources":["../src/zui-formfield.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mDAAmD,CAAC;AACxF,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C;;;;;;;GAOG;AACH,MAAM,OAAO,YAAa,SAAQ,cAAc;IAAhD;;;QACE;;WAEG;QAEH,UAAK,GAAkB,IAAI,CAAC;QAE5B;;WAEG;QAEH,oBAAe,GAAG,GAAG,CAAC;IA6BxB,CAAC;IApBC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,mBAAmB,uBAAA,IAAI,2DAAc,kBAAkB,IAAI,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,OAAO;;;KAG5G,CAAC;IACJ,CAAC;CASF;;IAvBG,OAAO,mBAAmB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;AACjE,CAAC;IAgBC,MAAM,OAAO,GAAG,uBAAA,IAAI,0DAAS,CAAC;IAC9B,IAAI,OAAO,EAAE;QACX,OAAO,CAAC,KAAK,EAAE,CAAC;QAChB,OAAO,CAAC,KAAK,EAAE,CAAC;KACjB;AACH,CAAC;AAlCD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACC;AAM5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;qDACpC;AAGtB;IADC,KAAK,CAAC,MAAM,CAAC;6CACW;AA4B3B,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { findAssignedElement } from '@zywave/zui-base/dist/utils/find-assigned-element';\nimport { html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { style } from './zui-formfield-css.js';\n\n/**\n * `<zui-formfield>` provides a standardized way of labeling and styling form controls.\n *\n * @slot - Default, unnamed slot; for inserting form controls, such as `<select>`, `<input>`, `<zui-input>`, `<zui-select>`, etc., into `<zui-formfield>`\n *\n * @csspart container - The container for form fields inserted into `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(container)`.\n * @csspart label - The label for `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(label)`.\n */\nexport class ZuiFormField extends ZuiBaseElement {\n /**\n * (optional): Label text, for the form control. Alternatively can slot in label text instead. If necessary, can be styled with `::part(label)`.\n */\n @property({ type: String })\n label: string | null = null;\n\n /**\n * (optional): Provide a valid CSS selector to help `zui-formfield` find the correct form control. Defaults to the first child element.\n */\n @property({ type: String, attribute: 'control-selector' })\n controlSelector = '*';\n\n @query('slot')\n _slotEl: HTMLSlotElement;\n\n get #control() {\n return findAssignedElement(this._slotEl, this.controlSelector);\n }\n\n static get styles() {\n return [super.styles, style];\n }\n\n render() {\n return html`\n <div class=\"container\" part=\"container\">\n ${this.label ? html` <label @click=\"${this.#onLabelClick}\" part=\"label\">${this.label}</label> ` : nothing}\n <slot></slot>\n </div>\n `;\n }\n\n #onLabelClick() {\n const control = this.#control;\n if (control) {\n control.focus();\n control.click();\n }\n }\n}\n\nwindow.customElements.define('zui-formfield', ZuiFormField);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-formfield': ZuiFormField;\n }\n}\n"]}
|
package/docs/demo.html
CHANGED
|
@@ -38,4 +38,18 @@
|
|
|
38
38
|
</zui-formfield>
|
|
39
39
|
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part"><code>::part() pseudo-element</code></a>
|
|
40
40
|
</div>
|
|
41
|
+
</section>
|
|
42
|
+
|
|
43
|
+
<section component="zui-formfield" heading="Overriding the container margin with CSS Shadow Parts">
|
|
44
|
+
<style>
|
|
45
|
+
.container-demo::part(container) {
|
|
46
|
+
margin-bottom: 0;
|
|
47
|
+
}
|
|
48
|
+
</style>
|
|
49
|
+
<div style="display: flex; flex-direction: column">
|
|
50
|
+
<zui-formfield class="container-demo" label="My default bottom margin has been overridden">
|
|
51
|
+
<zui-input name="vanilla-input" value="No bottom margin"></zui-input>
|
|
52
|
+
</zui-formfield>
|
|
53
|
+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part"><code>::part() pseudo-element</code></a>
|
|
54
|
+
</div>
|
|
41
55
|
</section>
|
package/lab.html
CHANGED
|
@@ -17,7 +17,6 @@
|
|
|
17
17
|
<link rel="stylesheet" href="../../../node_modules/@zywave/zui-input/dist/css/zui-input.fouc.css" />
|
|
18
18
|
<link rel="stylesheet" href="../../../node_modules/@zywave/zui-radio/dist/css/zui-radio.fouc.css" />
|
|
19
19
|
<link rel="stylesheet" href="../../../node_modules/@zywave/zui-select/dist/css/zui-select.fouc.css" />
|
|
20
|
-
<link rel="stylesheet" href="../../../node_modules/@zywave/zui-select/dist/css/zui-select-dropdown.fouc.css" />
|
|
21
20
|
<link rel="stylesheet" href="../../../node_modules/@zywave/zui-toggle/dist/css/zui-toggle.fouc.css" />
|
|
22
21
|
<link rel="stylesheet" href="../../../node_modules/@zywave/zui-well/dist/css/zui-well.fouc.css" />
|
|
23
22
|
<link rel="stylesheet" href="./dist/css/zui-formfield.fouc.css" />
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zywave/zui-formfield",
|
|
3
|
-
"version": "4.0
|
|
3
|
+
"version": "4.1.0-pre.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"dependencies": {
|
|
8
|
-
"@zywave/zui-base": "^4.1.26
|
|
8
|
+
"@zywave/zui-base": "^4.1.26"
|
|
9
9
|
},
|
|
10
10
|
"scripts": {
|
|
11
11
|
"build": "yarn run build:scss && yarn run build:ts",
|
|
@@ -24,5 +24,5 @@
|
|
|
24
24
|
"access": "public"
|
|
25
25
|
},
|
|
26
26
|
"customElements": "dist/custom-elements.json",
|
|
27
|
-
"gitHead": "
|
|
27
|
+
"gitHead": "9d50c40cc4eab86fc94b863161f2ee862f72eb12"
|
|
28
28
|
}
|
package/src/zui-formfield.ts
CHANGED
|
@@ -5,9 +5,12 @@ import { property, query } from 'lit/decorators.js';
|
|
|
5
5
|
import { style } from './zui-formfield-css.js';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
|
-
* `<zui-formfield>`
|
|
8
|
+
* `<zui-formfield>` provides a standardized way of labeling and styling form controls.
|
|
9
9
|
*
|
|
10
|
-
* @slot -
|
|
10
|
+
* @slot - Default, unnamed slot; for inserting form controls, such as `<select>`, `<input>`, `<zui-input>`, `<zui-select>`, etc., into `<zui-formfield>`
|
|
11
|
+
*
|
|
12
|
+
* @csspart container - The container for form fields inserted into `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(container)`.
|
|
13
|
+
* @csspart label - The label for `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(label)`.
|
|
11
14
|
*/
|
|
12
15
|
export class ZuiFormField extends ZuiBaseElement {
|
|
13
16
|
/**
|
|
@@ -35,7 +38,7 @@ export class ZuiFormField extends ZuiBaseElement {
|
|
|
35
38
|
|
|
36
39
|
render() {
|
|
37
40
|
return html`
|
|
38
|
-
<div class="container">
|
|
41
|
+
<div class="container" part="container">
|
|
39
42
|
${this.label ? html` <label @click="${this.#onLabelClick}" part="label">${this.label}</label> ` : nothing}
|
|
40
43
|
<slot></slot>
|
|
41
44
|
</div>
|