@m3e/checkbox 1.0.0-rc.1

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 (21) hide show
  1. package/LICENSE +22 -0
  2. package/README.md +135 -0
  3. package/cem.config.mjs +16 -0
  4. package/demo/index.html +74 -0
  5. package/dist/css-custom-data.json +142 -0
  6. package/dist/custom-elements.json +364 -0
  7. package/dist/html-custom-data.json +43 -0
  8. package/dist/index.js +405 -0
  9. package/dist/index.js.map +1 -0
  10. package/dist/index.min.js +186 -0
  11. package/dist/index.min.js.map +1 -0
  12. package/dist/src/CheckboxElement.d.ts +99 -0
  13. package/dist/src/CheckboxElement.d.ts.map +1 -0
  14. package/dist/src/index.d.ts +2 -0
  15. package/dist/src/index.d.ts.map +1 -0
  16. package/eslint.config.mjs +13 -0
  17. package/package.json +48 -0
  18. package/rollup.config.js +32 -0
  19. package/src/CheckboxElement.ts +362 -0
  20. package/src/index.ts +1 -0
  21. package/tsconfig.json +9 -0
package/dist/custom-elements.json ADDED
@@ -0,0 +1,364 @@
1
+ {
2
+ "schemaVersion": "1.0.0",
3
+ "readme": "",
4
+ "modules": [
5
+ {
6
+ "kind": "javascript-module",
7
+ "path": "src/CheckboxElement.ts",
8
+ "declarations": [
9
+ {
10
+ "kind": "class",
11
+ "description": "",
12
+ "name": "M3eCheckboxElement",
13
+ "cssProperties": [
14
+ {
15
+ "description": "Size of the checkbox icon inside the container.",
16
+ "name": "--m3e-checkbox-icon-size"
17
+ },
18
+ {
19
+ "description": "Base size of the checkbox container.",
20
+ "name": "--m3e-checkbox-container-size"
21
+ },
22
+ {
23
+ "description": "Border radius of the icon container.",
24
+ "name": "--m3e-checkbox-container-shape"
25
+ },
26
+ {
27
+ "description": "Border thickness for unselected state.",
28
+ "name": "--m3e-checkbox-unselected-outline-thickness"
29
+ },
30
+ {
31
+ "description": "Border color for unselected state.",
32
+ "name": "--m3e-checkbox-unselected-outline-color"
33
+ },
34
+ {
35
+ "description": "Border color on hover when unselected.",
36
+ "name": "--m3e-checkbox-unselected-hover-outline-color"
37
+ },
38
+ {
39
+ "description": "Base color for disabled unselected outline.",
40
+ "name": "--m3e-checkbox-unselected-disabled-outline-color"
41
+ },
42
+ {
43
+ "description": "Opacity for disabled unselected outline.",
44
+ "name": "--m3e-checkbox-unselected-disabled-outline-opacity"
45
+ },
46
+ {
47
+ "description": "Border color for invalid unselected state.",
48
+ "name": "--m3e-checkbox-unselected-error-outline-color"
49
+ },
50
+ {
51
+ "description": "Background color for selected container.",
52
+ "name": "--m3e-checkbox-selected-container-color"
53
+ },
54
+ {
55
+ "description": "Icon color for selected state.",
56
+ "name": "--m3e-checkbox-selected-icon-color"
57
+ },
58
+ {
59
+ "description": "Base color for disabled selected container.",
60
+ "name": "--m3e-checkbox-selected-disabled-container-color"
61
+ },
62
+ {
63
+ "description": "Opacity for disabled selected container.",
64
+ "name": "--m3e-checkbox-selected-disabled-container-opacity"
65
+ },
66
+ {
67
+ "description": "Base color for disabled selected icon.",
68
+ "name": "--m3e-checkbox-selected-disabled-icon-color"
69
+ },
70
+ {
71
+ "description": "Opacity for disabled selected icon.",
72
+ "name": "--m3e-checkbox-selected-disabled-icon-opacity"
73
+ },
74
+ {
75
+ "description": "Ripple hover color for unselected state.",
76
+ "name": "--m3e-checkbox-unselected-hover-color"
77
+ },
78
+ {
79
+ "description": "Ripple focus color for unselected state.",
80
+ "name": "--m3e-checkbox-unselected-focus-color"
81
+ },
82
+ {
83
+ "description": "Ripple base color for unselected state.",
84
+ "name": "--m3e-checkbox-unselected-ripple-color"
85
+ },
86
+ {
87
+ "description": "Ripple hover color for selected state.",
88
+ "name": "--m3e-checkbox-selected-hover-color"
89
+ },
90
+ {
91
+ "description": "Ripple focus color for selected state.",
92
+ "name": "--m3e-checkbox-selected-focus-color"
93
+ },
94
+ {
95
+ "description": "Ripple base color for selected state.",
96
+ "name": "--m3e-checkbox-selected-ripple-color"
97
+ },
98
+ {
99
+ "description": "Ripple hover color for invalid unselected state.",
100
+ "name": "--m3e-checkbox-unselected-error-hover-color"
101
+ },
102
+ {
103
+ "description": "Ripple focus color for invalid unselected state.",
104
+ "name": "--m3e-checkbox-unselected-error-focus-color"
105
+ },
106
+ {
107
+ "description": "Ripple base color for invalid unselected state.",
108
+ "name": "--m3e-checkbox-unselected-error-ripple-color"
109
+ },
110
+ {
111
+ "description": "Ripple hover color for invalid selected state.",
112
+ "name": "--m3e-checkbox-selected-error-hover-color"
113
+ },
114
+ {
115
+ "description": "Ripple focus color for invalid selected state.",
116
+ "name": "--m3e-checkbox-selected-error-focus-color"
117
+ },
118
+ {
119
+ "description": "Ripple base color for invalid selected state.",
120
+ "name": "--m3e-checkbox-selected-error-ripple-color"
121
+ }
122
+ ],
123
+ "members": [
124
+ {
125
+ "kind": "field",
126
+ "name": "_focusRing",
127
+ "type": {
128
+ "text": "M3eFocusRingElement | undefined"
129
+ },
130
+ "privacy": "private",
131
+ "readonly": true
132
+ },
133
+ {
134
+ "kind": "field",
135
+ "name": "_stateLayer",
136
+ "type": {
137
+ "text": "M3eStateLayerElement | undefined"
138
+ },
139
+ "privacy": "private",
140
+ "readonly": true
141
+ },
142
+ {
143
+ "kind": "field",
144
+ "name": "_ripple",
145
+ "type": {
146
+ "text": "M3eRippleElement | undefined"
147
+ },
148
+ "privacy": "private",
149
+ "readonly": true
150
+ },
151
+ {
152
+ "kind": "field",
153
+ "name": "#clickHandler",
154
+ "privacy": "private",
155
+ "readonly": true
156
+ },
157
+ {
158
+ "kind": "field",
159
+ "name": "#hoverController",
160
+ "privacy": "private",
161
+ "readonly": true,
162
+ "default": "new HoverController(this, { target: null, callback: (hovering) => { if (this.disabled) return; if (hovering) { this._stateLayer?.show(\"hover\"); } else { this._stateLayer?.hide(\"hover\"); } }, })"
163
+ },
164
+ {
165
+ "kind": "field",
166
+ "name": "#pressedController",
167
+ "privacy": "private",
168
+ "readonly": true,
169
+ "default": "new PressedController(this, { target: null, callback: (pressed) => { if (this.disabled) return; if (pressed) { this._ripple?.show(0, 0, true); } else { this._ripple?.hide(); } }, })"
170
+ },
171
+ {
172
+ "kind": "field",
173
+ "name": "value",
174
+ "type": {
175
+ "text": "string"
176
+ },
177
+ "default": "\"on\"",
178
+ "description": "A string representing the value of the checkbox.",
179
+ "attribute": "value"
180
+ },
181
+ {
182
+ "kind": "field",
183
+ "name": "[formValue]",
184
+ "type": {
185
+ "text": "string | File | FormData | null"
186
+ },
187
+ "privacy": "private",
188
+ "readonly": true
189
+ },
190
+ {
191
+ "kind": "method",
192
+ "name": "#renderIcon",
193
+ "privacy": "private",
194
+ "return": {
195
+ "type": {
196
+ "text": "unknown"
197
+ }
198
+ }
199
+ },
200
+ {
201
+ "kind": "method",
202
+ "name": "#handleClick",
203
+ "privacy": "private",
204
+ "return": {
205
+ "type": {
206
+ "text": "void"
207
+ }
208
+ },
209
+ "parameters": [
210
+ {
211
+ "name": "e",
212
+ "type": {
213
+ "text": "Event"
214
+ }
215
+ }
216
+ ]
217
+ }
218
+ ],
219
+ "events": [
220
+ {
221
+ "name": "input",
222
+ "type": {
223
+ "text": "Event"
224
+ },
225
+ "description": "Emitted when the checked state changes."
226
+ },
227
+ {
228
+ "name": "change",
229
+ "type": {
230
+ "text": "Event"
231
+ },
232
+ "description": "Emitted when the checked state changes."
233
+ }
234
+ ],
235
+ "attributes": [
236
+ {
237
+ "description": "Whether the element is checked.",
238
+ "name": "checked"
239
+ },
240
+ {
241
+ "description": "Whether the element is disabled.",
242
+ "name": "disabled"
243
+ },
244
+ {
245
+ "description": "Whether the element's checked state is indeterminate.",
246
+ "name": "indeterminate"
247
+ },
248
+ {
249
+ "description": "The name that identifies the element when submitting the associated form.",
250
+ "name": "name"
251
+ },
252
+ {
253
+ "description": "Whether the element is required.",
254
+ "name": "required"
255
+ },
256
+ {
257
+ "description": "A string representing the value of the checkbox.",
258
+ "name": "value",
259
+ "type": {
260
+ "text": "string"
261
+ },
262
+ "default": "\"on\"",
263
+ "fieldName": "value"
264
+ }
265
+ ],
266
+ "mixins": [
267
+ {
268
+ "name": "Labelled",
269
+ "package": "@m3e/core"
270
+ },
271
+ {
272
+ "name": "RequiredConstraintValidation",
273
+ "package": "@m3e/core"
274
+ },
275
+ {
276
+ "name": "Dirty",
277
+ "package": "@m3e/core"
278
+ },
279
+ {
280
+ "name": "Touched",
281
+ "package": "@m3e/core"
282
+ },
283
+ {
284
+ "name": "Required",
285
+ "package": "@m3e/core"
286
+ },
287
+ {
288
+ "name": "ConstraintValidation",
289
+ "package": "@m3e/core"
290
+ },
291
+ {
292
+ "name": "CheckedIndeterminate",
293
+ "package": "@m3e/core"
294
+ },
295
+ {
296
+ "name": "FormAssociated",
297
+ "package": "@m3e/core"
298
+ },
299
+ {
300
+ "name": "KeyboardClick",
301
+ "package": "@m3e/core"
302
+ },
303
+ {
304
+ "name": "Focusable",
305
+ "package": "@m3e/core"
306
+ },
307
+ {
308
+ "name": "Disabled",
309
+ "package": "@m3e/core"
310
+ },
311
+ {
312
+ "name": "AttachInternals",
313
+ "package": "@m3e/core"
314
+ },
315
+ {
316
+ "name": "Role",
317
+ "package": "@m3e/core"
318
+ }
319
+ ],
320
+ "superclass": {
321
+ "name": "LitElement",
322
+ "package": "lit"
323
+ },
324
+ "tagName": "m3e-checkbox",
325
+ "customElement": true,
326
+ "summary": "A checkbox that allows a user to select one or more options from a limited number of choices."
327
+ }
328
+ ],
329
+ "exports": [
330
+ {
331
+ "kind": "js",
332
+ "name": "M3eCheckboxElement",
333
+ "declaration": {
334
+ "name": "M3eCheckboxElement",
335
+ "module": "src/CheckboxElement.ts"
336
+ }
337
+ },
338
+ {
339
+ "kind": "custom-element-definition",
340
+ "name": "m3e-checkbox",
341
+ "declaration": {
342
+ "name": "M3eCheckboxElement",
343
+ "module": "src/CheckboxElement.ts"
344
+ }
345
+ }
346
+ ]
347
+ },
348
+ {
349
+ "kind": "javascript-module",
350
+ "path": "src/index.ts",
351
+ "declarations": [],
352
+ "exports": [
353
+ {
354
+ "kind": "js",
355
+ "name": "*",
356
+ "declaration": {
357
+ "name": "*",
358
+ "package": "\"./CheckboxElement\""
359
+ }
360
+ }
361
+ ]
362
+ }
363
+ ]
364
+ }
package/dist/html-custom-data.json ADDED
@@ -0,0 +1,43 @@
1
+ {
2
+ "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
3
+ "version": 1.1,
4
+ "tags": [
5
+ {
6
+ "name": "m3e-checkbox",
7
+ "description": "A checkbox that allows a user to select one or more options from a limited number of choices.\n---\n\n\n### **Events:**\n - **input** - Emitted when the checked state changes.\n- **change** - Emitted when the checked state changes.\n\n### **CSS Properties:**\n - **--m3e-checkbox-icon-size** - Size of the checkbox icon inside the container. _(default: undefined)_\n- **--m3e-checkbox-container-size** - Base size of the checkbox container. _(default: undefined)_\n- **--m3e-checkbox-container-shape** - Border radius of the icon container. _(default: undefined)_\n- **--m3e-checkbox-unselected-outline-thickness** - Border thickness for unselected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-outline-color** - Border color for unselected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-hover-outline-color** - Border color on hover when unselected. _(default: undefined)_\n- **--m3e-checkbox-unselected-disabled-outline-color** - Base color for disabled unselected outline. _(default: undefined)_\n- **--m3e-checkbox-unselected-disabled-outline-opacity** - Opacity for disabled unselected outline. _(default: undefined)_\n- **--m3e-checkbox-unselected-error-outline-color** - Border color for invalid unselected state. _(default: undefined)_\n- **--m3e-checkbox-selected-container-color** - Background color for selected container. _(default: undefined)_\n- **--m3e-checkbox-selected-icon-color** - Icon color for selected state. _(default: undefined)_\n- **--m3e-checkbox-selected-disabled-container-color** - Base color for disabled selected container. _(default: undefined)_\n- **--m3e-checkbox-selected-disabled-container-opacity** - Opacity for disabled selected container. _(default: undefined)_\n- **--m3e-checkbox-selected-disabled-icon-color** - Base color for disabled selected icon. _(default: undefined)_\n- **--m3e-checkbox-selected-disabled-icon-opacity** - Opacity for disabled selected icon. _(default: undefined)_\n- **--m3e-checkbox-unselected-hover-color** - Ripple hover color for unselected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-focus-color** - Ripple focus color for unselected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-ripple-color** - Ripple base color for unselected state. _(default: undefined)_\n- **--m3e-checkbox-selected-hover-color** - Ripple hover color for selected state. _(default: undefined)_\n- **--m3e-checkbox-selected-focus-color** - Ripple focus color for selected state. _(default: undefined)_\n- **--m3e-checkbox-selected-ripple-color** - Ripple base color for selected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-error-hover-color** - Ripple hover color for invalid unselected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-error-focus-color** - Ripple focus color for invalid unselected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-error-ripple-color** - Ripple base color for invalid unselected state. _(default: undefined)_\n- **--m3e-checkbox-selected-error-hover-color** - Ripple hover color for invalid selected state. _(default: undefined)_\n- **--m3e-checkbox-selected-error-focus-color** - Ripple focus color for invalid selected state. _(default: undefined)_\n- **--m3e-checkbox-selected-error-ripple-color** - Ripple base color for invalid selected state. _(default: undefined)_",
8
+ "attributes": [
9
+ {
10
+ "name": "checked",
11
+ "description": "Whether the element is checked.",
12
+ "values": []
13
+ },
14
+ {
15
+ "name": "disabled",
16
+ "description": "Whether the element is disabled.",
17
+ "values": []
18
+ },
19
+ {
20
+ "name": "indeterminate",
21
+ "description": "Whether the element's checked state is indeterminate.",
22
+ "values": []
23
+ },
24
+ {
25
+ "name": "name",
26
+ "description": "The name that identifies the element when submitting the associated form.",
27
+ "values": []
28
+ },
29
+ {
30
+ "name": "required",
31
+ "description": "Whether the element is required.",
32
+ "values": []
33
+ },
34
+ {
35
+ "name": "value",
36
+ "description": "A string representing the value of the checkbox.",
37
+ "values": []
38
+ }
39
+ ],
40
+ "references": []
41
+ }
42
+ ]
43
+ }