@ixfx/components 0.14.7 → 0.15.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/bundle/index.d.ts +100 -2
- package/bundle/index.js +574 -247
- package/bundle/style.css +2 -82
- package/dist/ac-text.d.ts +1 -1
- package/dist/{ac-token-qEs3FsQv.d.ts → ac-token-Cq7lsYf-.d.ts} +1 -1
- package/dist/ac-token.d.ts +1 -1
- package/dist/{button-BYuf72aR.d.ts → button-D1sPDUCM.d.ts} +8 -1
- package/dist/{button-B7mgqtxR.js → button-ikByJJPN.js} +29 -8
- package/dist/button.d.ts +1 -1
- package/dist/button.js +1 -1
- package/dist/{colour-picker-BCMU7W7R.js → colour-picker-DwAa6RDh.js} +73 -9
- package/dist/colour-picker.d.ts +1 -1
- package/dist/colour-picker.js +1 -1
- package/dist/crumbs.d.ts +1 -1
- package/dist/{data-grid-DmkId8bu.d.ts → data-grid-_BmlhuUu.d.ts} +3 -3
- package/dist/data-grid.d.ts +1 -1
- package/dist/{detail-list-CmQqeXvp.d.ts → detail-list-DXMnTrYm.d.ts} +3 -3
- package/dist/detail-list.d.ts +2 -2
- package/dist/{flat-list-BmQBB3ZC.d.ts → flat-list-JfozgW7d.d.ts} +2 -2
- package/dist/flat-list.d.ts +1 -1
- package/dist/form-BGZK3jZd.d.ts +54 -0
- package/dist/form-CY0nibZ5.js +418 -0
- package/dist/form.d.ts +1 -13
- package/dist/form.js +1 -1
- package/dist/{grid-list-BVsUEvgd.d.ts → grid-list-tQwXs895.d.ts} +1 -1
- package/dist/grid-list.d.ts +1 -1
- package/dist/{grouped-item-lister-DETte0Dh.d.ts → grouped-item-lister-Bhyo-dkH.d.ts} +1 -1
- package/dist/grouped-item-lister.d.ts +1 -1
- package/dist/{icon-CDGprSdE.d.ts → icon-DR_3rSyZ.d.ts} +1 -1
- package/dist/icons.d.ts +2 -2
- package/dist/incr-search.d.ts +1 -1
- package/dist/{index-CoqtMSd9.d.ts → index-BUB5SICW.d.ts} +1 -1
- package/dist/{index-tq6f8007.d.ts → index-Bz3loIAf.d.ts} +4 -1
- package/dist/{index-UvnoZUAo.d.ts → index-CJ5fshD3.d.ts} +1 -1
- package/dist/{index-BvoXLnBf.d.ts → index-ChdhB7RK.d.ts} +1 -1
- package/dist/{index-DxyyVqzA.d.ts → index-cnaRPQPp.d.ts} +2 -2
- package/dist/{index-CYndvTWH.d.ts → index-garxxqgV.d.ts} +1 -1
- package/dist/{index-DuhzWWTr.d.ts → index-wUYiXH8c.d.ts} +1 -1
- package/dist/index.d.ts +69 -22
- package/dist/index.js +138 -8
- package/dist/{labelled-input-base-DiTme1JO.d.ts → labelled-input-base-Dp_9KP0G.d.ts} +1 -1
- package/dist/labelled-radial-input.d.ts +2 -2
- package/dist/labelled-range-input.d.ts +1 -1
- package/dist/labelled-slider-input.d.ts +1 -1
- package/dist/list-group-header.d.ts +1 -1
- package/dist/{menu-item-bF6narIz.d.ts → menu-item-B0zqw2xp.d.ts} +1 -1
- package/dist/menu.d.ts +2 -2
- package/dist/miller.d.ts +1 -1
- package/dist/panel.d.ts +1 -1
- package/dist/{split-layout-JK3xWVX2.d.ts → split-layout-C5SYbDrq.d.ts} +1 -1
- package/dist/split-layout.d.ts +1 -1
- package/dist/style.css +2 -82
- package/dist/tab-list-R_bGbDvO.js +766 -0
- package/dist/{tab-list-CexFFg6O.d.ts → tab-list-wC0xNz1b.d.ts} +2 -1
- package/dist/tabs.d.ts +1 -1
- package/dist/tabs.js +1 -673
- package/dist/{titlebar-Tqu-VvMU.d.ts → titlebar-B5zSTZnF.d.ts} +1 -1
- package/dist/titlebar.d.ts +1 -1
- package/dist/tree.d.ts +1 -1
- package/dist/{vertical-list-ztrdFvyT.d.ts → vertical-list-BYyb2n4x.d.ts} +1 -1
- package/dist/vertical-list.d.ts +1 -1
- package/docs-user/button.md +1 -0
- package/docs-user/colour-picker.md +19 -0
- package/docs-user/form.md +97 -4
- package/docs-user/index.json +2 -2
- package/docs-user/tabs.md +30 -0
- package/package.json +2 -1
- package/dist/form-CsXJX15p.js +0 -62
|
@@ -0,0 +1,418 @@
|
|
|
1
|
+
import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
|
|
2
|
+
import { LitElement, css } from "lit";
|
|
3
|
+
import { property } from "lit/decorators.js";
|
|
4
|
+
//#region src/util/light-dom-styles.ts
|
|
5
|
+
const adoptedRoots = /* @__PURE__ */ new WeakMap();
|
|
6
|
+
/**
|
|
7
|
+
* Makes styles available to a light-DOM component, wherever it is rendered.
|
|
8
|
+
*
|
|
9
|
+
* Light-DOM components can't use Lit's `static styles`, and a global
|
|
10
|
+
* stylesheet can't reach into a shadow root. Call this from
|
|
11
|
+
* `connectedCallback()`: the styles are added once per root (the document, or
|
|
12
|
+
* the shadow root the host is in) and placed first so consumer styles win ties.
|
|
13
|
+
*/
|
|
14
|
+
function adoptLightDomStyles(host, styles) {
|
|
15
|
+
const root = host.getRootNode();
|
|
16
|
+
if (!(root instanceof ShadowRoot) && !(root instanceof Document)) return;
|
|
17
|
+
const done = adoptedRoots.get(root) ?? /* @__PURE__ */ new Set();
|
|
18
|
+
if (done.has(styles)) return;
|
|
19
|
+
done.add(styles);
|
|
20
|
+
adoptedRoots.set(root, done);
|
|
21
|
+
if (root instanceof Document) {
|
|
22
|
+
const style = document.createElement(`style`);
|
|
23
|
+
style.textContent = styles.cssText;
|
|
24
|
+
document.head.prepend(style);
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
const sheet = styles.styleSheet;
|
|
28
|
+
if (sheet && `adoptedStyleSheets` in root) root.adoptedStyleSheets = [sheet, ...root.adoptedStyleSheets];
|
|
29
|
+
else {
|
|
30
|
+
const style = document.createElement(`style`);
|
|
31
|
+
style.textContent = styles.cssText;
|
|
32
|
+
root.prepend(style);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
//#endregion
|
|
36
|
+
//#region src/form/form-styles.ts
|
|
37
|
+
/**
|
|
38
|
+
* Layout rules for the light-DOM form components. Light DOM means Lit's
|
|
39
|
+
* `static styles` can't apply them, so each component calls
|
|
40
|
+
* `adoptLightDomStyles(this, formStyles)` when it connects: the rules land in
|
|
41
|
+
* the document, or in the enclosing shadow root if there is one.
|
|
42
|
+
*/
|
|
43
|
+
const formStyles = css`
|
|
44
|
+
ixfx-form > form {
|
|
45
|
+
display: block;
|
|
46
|
+
margin: 0;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
ixfx-form {
|
|
50
|
+
display: block;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
ixfx-form[label-align="left"],
|
|
54
|
+
ixfx-form-group[label-align="left"] {
|
|
55
|
+
--ixfx-form-label-align: left;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
ixfx-form[label-align="right"],
|
|
59
|
+
ixfx-form-group[label-align="right"] {
|
|
60
|
+
--ixfx-form-label-align: right;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
ixfx-form-group {
|
|
64
|
+
display: block;
|
|
65
|
+
container-type: inline-size;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
ixfx-form-group fieldset {
|
|
69
|
+
display: grid;
|
|
70
|
+
grid-template-columns: 1fr;
|
|
71
|
+
gap: var(--space-m) var(--space-l);
|
|
72
|
+
border: 0;
|
|
73
|
+
margin: 0;
|
|
74
|
+
padding: 0;
|
|
75
|
+
margin-block-start: var(--space-m);
|
|
76
|
+
margin-block-end: var(--space-m);
|
|
77
|
+
|
|
78
|
+
min-inline-size: 0;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
ixfx-form-group fieldset > legend:empty {
|
|
82
|
+
display: none;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
ixfx-form-group fieldset > legend {
|
|
86
|
+
grid-column: 1 / -1;
|
|
87
|
+
font-weight: var(--font-weight-bold);
|
|
88
|
+
padding: 0;
|
|
89
|
+
margin-block-start: var(--space-m);
|
|
90
|
+
margin-block-end: var(--space-s);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
ixfx-form-group fieldset > :not(ixfx-form-part) {
|
|
94
|
+
grid-column: 1 / -1;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
ixfx-form-part {
|
|
98
|
+
display: grid;
|
|
99
|
+
grid-column: 1 / -1;
|
|
100
|
+
grid-template-columns: 1fr;
|
|
101
|
+
align-items: start;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
ixfx-form-row {
|
|
105
|
+
display: grid;
|
|
106
|
+
grid-column: 1 / -1;
|
|
107
|
+
grid-template-columns: repeat(var(--ixfx-form-pairs, 1), minmax(0, 1fr));
|
|
108
|
+
gap: 0 var(--space-l);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
ixfx-form-row > ixfx-form-part {
|
|
112
|
+
display: contents;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
ixfx-form-part > label {
|
|
116
|
+
grid-column: 1;
|
|
117
|
+
grid-row: 1;
|
|
118
|
+
font-size: var(--ixfx-form-label-font-size, var(--text-s));
|
|
119
|
+
font-weight: var(--ixfx-form-label-font-weight, inherit);
|
|
120
|
+
font-family: var(--ixfx-form-label-font-family, inherit);
|
|
121
|
+
color: var(--ixfx-form-label-color, inherit);
|
|
122
|
+
text-transform: var(--ixfx-form-label-text-transform, uppercase);
|
|
123
|
+
padding-bottom: var(--space-xs);
|
|
124
|
+
user-select: none;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
ixfx-form-part > input[type="checkbox"],
|
|
128
|
+
ixfx-form-part > input[type="radio"] {
|
|
129
|
+
justify-self: start;
|
|
130
|
+
margin-inline-start: 0;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
ixfx-form-part > input,
|
|
134
|
+
ixfx-form-part > select,
|
|
135
|
+
ixfx-form-part > textarea {
|
|
136
|
+
grid-column: 1;
|
|
137
|
+
grid-row: 2;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
ixfx-form-row > ixfx-form-part > label {
|
|
141
|
+
grid-column: var(--ixfx-form-part-index, 1);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
ixfx-form-row > ixfx-form-part > input,
|
|
145
|
+
ixfx-form-row > ixfx-form-part > select,
|
|
146
|
+
ixfx-form-row > ixfx-form-part > textarea {
|
|
147
|
+
grid-column: var(--ixfx-form-part-index, 1);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
ixfx-form-options {
|
|
151
|
+
display: grid;
|
|
152
|
+
grid-column: 1 / -1;
|
|
153
|
+
grid-template-columns: 1fr;
|
|
154
|
+
align-items: start;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
ixfx-form-options > .ixfx-form-options-label {
|
|
158
|
+
font-size: var(--ixfx-form-label-font-size, var(--text-s));
|
|
159
|
+
font-weight: var(--ixfx-form-label-font-weight, inherit);
|
|
160
|
+
font-family: var(--ixfx-form-label-font-family, inherit);
|
|
161
|
+
color: var(--ixfx-form-label-color, inherit);
|
|
162
|
+
text-transform: var(--ixfx-form-label-text-transform, uppercase);
|
|
163
|
+
padding-bottom: var(--space-xs);
|
|
164
|
+
user-select: none;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
ixfx-form-options > .ixfx-form-options-items {
|
|
168
|
+
display: flex;
|
|
169
|
+
flex-wrap: wrap;
|
|
170
|
+
gap: var(--space-s) var(--ixfx-form-option-gap, var(--space-l));
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
ixfx-form-options[orientation="vertical"] > .ixfx-form-options-items {
|
|
174
|
+
flex-direction: column;
|
|
175
|
+
align-items: flex-start;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
ixfx-form-options ixfx-form-part {
|
|
179
|
+
display: flex;
|
|
180
|
+
flex-direction: column;
|
|
181
|
+
align-items: center;
|
|
182
|
+
gap: var(--space-xs);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
ixfx-form-options ixfx-form-part > label {
|
|
186
|
+
order: 2;
|
|
187
|
+
padding: 0;
|
|
188
|
+
text-align: center;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
ixfx-form-options ixfx-form-part > input {
|
|
192
|
+
order: 1;
|
|
193
|
+
margin: 0;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
ixfx-form-options[orientation="vertical"] ixfx-form-part {
|
|
197
|
+
flex-direction: row;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
ixfx-form-options[orientation="vertical"] ixfx-form-part > label {
|
|
201
|
+
text-align: start;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
@container (min-width: 30rem) {
|
|
205
|
+
ixfx-form-group fieldset {
|
|
206
|
+
grid-template-columns: repeat(var(--ixfx-form-pairs, 1), max-content 1fr);
|
|
207
|
+
column-gap: var(--ixfx-form-label-gap, var(--space-s));
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
ixfx-form-row {
|
|
211
|
+
grid-template-columns: subgrid;
|
|
212
|
+
column-gap: normal;
|
|
213
|
+
align-items: baseline;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
ixfx-form-group fieldset > ixfx-form-part > input,
|
|
217
|
+
ixfx-form-group fieldset > ixfx-form-part > select,
|
|
218
|
+
ixfx-form-group fieldset > ixfx-form-part > textarea {
|
|
219
|
+
grid-column: 2 / -1;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
ixfx-form-row > ixfx-form-part > label {
|
|
223
|
+
grid-column: calc(var(--ixfx-form-part-index, 1) * 2 - 1);
|
|
224
|
+
grid-row: 1;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
ixfx-form-row > ixfx-form-part:not(:first-child) > label {
|
|
228
|
+
padding-inline-start: var(--ixfx-form-pair-gap, var(--space-l));
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
ixfx-form-row > ixfx-form-part > input,
|
|
232
|
+
ixfx-form-row > ixfx-form-part > select,
|
|
233
|
+
ixfx-form-row > ixfx-form-part > textarea {
|
|
234
|
+
grid-column: calc(var(--ixfx-form-part-index, 1) * 2);
|
|
235
|
+
grid-row: 1;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
ixfx-form-part {
|
|
239
|
+
display: grid;
|
|
240
|
+
grid-column: 1 / -1;
|
|
241
|
+
grid-template-columns: subgrid;
|
|
242
|
+
align-items: baseline;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
ixfx-form-part > label {
|
|
246
|
+
grid-column: 1;
|
|
247
|
+
grid-row: 1;
|
|
248
|
+
padding-bottom: 0;
|
|
249
|
+
text-align: var(--ixfx-form-label-align, right);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
ixfx-form-part > input,
|
|
253
|
+
ixfx-form-part > select,
|
|
254
|
+
ixfx-form-part > textarea {
|
|
255
|
+
grid-column: 2;
|
|
256
|
+
grid-row: 1;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
ixfx-form-options {
|
|
260
|
+
grid-template-columns: subgrid;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
ixfx-form-options > .ixfx-form-options-label {
|
|
264
|
+
grid-column: 1;
|
|
265
|
+
padding-bottom: 0;
|
|
266
|
+
text-align: var(--ixfx-form-label-align, right);
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
ixfx-form-options > .ixfx-form-options-items {
|
|
270
|
+
grid-column: 2 / -1;
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
`;
|
|
274
|
+
//#endregion
|
|
275
|
+
//#region src/form/form-values.ts
|
|
276
|
+
function collectFormValues(root, options = {}) {
|
|
277
|
+
const values = {};
|
|
278
|
+
root.querySelectorAll(`[name]`).forEach((el) => {
|
|
279
|
+
const name = el.getAttribute(`name`);
|
|
280
|
+
if (!name) return;
|
|
281
|
+
if (el instanceof HTMLInputElement) {
|
|
282
|
+
if (el.type === `radio`) {
|
|
283
|
+
if (el.checked) values[name] = el.value;
|
|
284
|
+
} else if (el.type === `checkbox`) values[name] = el.checked;
|
|
285
|
+
else if (options.typed && (el.type === `number` || el.type === `range`)) values[name] = Number.isNaN(el.valueAsNumber) ? null : el.valueAsNumber;
|
|
286
|
+
else values[name] = el.value;
|
|
287
|
+
} else if (el instanceof HTMLSelectElement) {
|
|
288
|
+
if (el.multiple) values[name] = Array.from(el.selectedOptions).map((opt) => opt.value);
|
|
289
|
+
else values[name] = el.value;
|
|
290
|
+
} else if (el instanceof HTMLTextAreaElement) values[name] = el.value;
|
|
291
|
+
else if (`value` in el) values[name] = el.value;
|
|
292
|
+
});
|
|
293
|
+
return values;
|
|
294
|
+
}
|
|
295
|
+
function applyFormValues(root, data) {
|
|
296
|
+
root.querySelectorAll(`[name]`).forEach((el) => {
|
|
297
|
+
const name = el.getAttribute(`name`);
|
|
298
|
+
if (!name || !(name in data)) return;
|
|
299
|
+
const value = data[name];
|
|
300
|
+
if (el instanceof HTMLInputElement) {
|
|
301
|
+
if (el.type === `radio`) el.checked = el.value === value;
|
|
302
|
+
else if (el.type === `checkbox`) el.checked = Boolean(value);
|
|
303
|
+
else el.value = String(value ?? ``);
|
|
304
|
+
el.dispatchEvent(new Event(`input`, { bubbles: true }));
|
|
305
|
+
el.dispatchEvent(new Event(`change`, { bubbles: true }));
|
|
306
|
+
} else if (el instanceof HTMLSelectElement) {
|
|
307
|
+
if (el.multiple && Array.isArray(value)) Array.from(el.options).forEach((opt) => {
|
|
308
|
+
opt.selected = value.includes(opt.value);
|
|
309
|
+
});
|
|
310
|
+
else el.value = String(value ?? ``);
|
|
311
|
+
el.dispatchEvent(new Event(`input`, { bubbles: true }));
|
|
312
|
+
el.dispatchEvent(new Event(`change`, { bubbles: true }));
|
|
313
|
+
} else if (el instanceof HTMLTextAreaElement) {
|
|
314
|
+
el.value = String(value ?? ``);
|
|
315
|
+
el.dispatchEvent(new Event(`input`, { bubbles: true }));
|
|
316
|
+
el.dispatchEvent(new Event(`change`, { bubbles: true }));
|
|
317
|
+
} else if (`value` in el) el.value = value;
|
|
318
|
+
});
|
|
319
|
+
}
|
|
320
|
+
//#endregion
|
|
321
|
+
//#region src/form/form.ts
|
|
322
|
+
/** Input types where Enter does not mean "submit". */
|
|
323
|
+
const NON_SUBMITTING_INPUTS = /* @__PURE__ */ new Set([
|
|
324
|
+
`button`,
|
|
325
|
+
`submit`,
|
|
326
|
+
`reset`,
|
|
327
|
+
`image`,
|
|
328
|
+
`file`,
|
|
329
|
+
`color`
|
|
330
|
+
]);
|
|
331
|
+
let FormElement = class FormElement extends LitElement {
|
|
332
|
+
constructor(..._args) {
|
|
333
|
+
super(..._args);
|
|
334
|
+
this.labelAlign = `right`;
|
|
335
|
+
this.noValidate = false;
|
|
336
|
+
this._onKeydown = (e) => {
|
|
337
|
+
if (e.key !== `Enter` || e.defaultPrevented || e.isComposing || e.shiftKey || e.ctrlKey || e.altKey || e.metaKey) return;
|
|
338
|
+
const target = e.target;
|
|
339
|
+
if (!(target instanceof HTMLInputElement) || NON_SUBMITTING_INPUTS.has(target.type)) return;
|
|
340
|
+
if (this.form.querySelector(`button:not([type]), button[type=submit], input[type=submit], input[type=image]`)) return;
|
|
341
|
+
e.preventDefault();
|
|
342
|
+
this.requestSubmit();
|
|
343
|
+
};
|
|
344
|
+
}
|
|
345
|
+
createRenderRoot() {
|
|
346
|
+
return this;
|
|
347
|
+
}
|
|
348
|
+
/** The native form element that holds the content. */
|
|
349
|
+
get form() {
|
|
350
|
+
if (!this._form) {
|
|
351
|
+
this._form = document.createElement(`form`);
|
|
352
|
+
this._form.addEventListener(`submit`, (e) => e.preventDefault());
|
|
353
|
+
this._form.addEventListener(`keydown`, this._onKeydown);
|
|
354
|
+
}
|
|
355
|
+
return this._form;
|
|
356
|
+
}
|
|
357
|
+
/** Native controls in the form. Components with their own shadow root are not included. */
|
|
358
|
+
get elements() {
|
|
359
|
+
return this.form.elements;
|
|
360
|
+
}
|
|
361
|
+
connectedCallback() {
|
|
362
|
+
super.connectedCallback();
|
|
363
|
+
adoptLightDomStyles(this, formStyles);
|
|
364
|
+
this._adoptChildren();
|
|
365
|
+
this._observer = new MutationObserver(() => this._adoptChildren());
|
|
366
|
+
this._observer.observe(this, { childList: true });
|
|
367
|
+
}
|
|
368
|
+
disconnectedCallback() {
|
|
369
|
+
super.disconnectedCallback();
|
|
370
|
+
this._observer?.disconnect();
|
|
371
|
+
}
|
|
372
|
+
updated() {
|
|
373
|
+
this.form.noValidate = this.noValidate;
|
|
374
|
+
}
|
|
375
|
+
/** Moves everything into the native form. Nodes (not just elements) move so Lit's markers stay with their content. */
|
|
376
|
+
_adoptChildren() {
|
|
377
|
+
const form = this.form;
|
|
378
|
+
if (form.parentNode !== this) this.append(form);
|
|
379
|
+
const nodes = Array.from(this.childNodes).filter((n) => n !== form);
|
|
380
|
+
if (nodes.length > 0) form.append(...nodes);
|
|
381
|
+
}
|
|
382
|
+
/** Validates (unless `novalidate`), then fires `submit`. */
|
|
383
|
+
requestSubmit() {
|
|
384
|
+
this.form.requestSubmit();
|
|
385
|
+
}
|
|
386
|
+
/** Resets native controls. Components with their own shadow root are not reset. */
|
|
387
|
+
reset() {
|
|
388
|
+
this.form.reset();
|
|
389
|
+
}
|
|
390
|
+
/** True if all native controls are valid. Shows nothing. */
|
|
391
|
+
checkValidity() {
|
|
392
|
+
return this.form.checkValidity();
|
|
393
|
+
}
|
|
394
|
+
/** True if all native controls are valid. Otherwise shows the browser's message on the first invalid one. */
|
|
395
|
+
reportValidity() {
|
|
396
|
+
return this.form.reportValidity();
|
|
397
|
+
}
|
|
398
|
+
/** Values of all named controls, including components with their own shadow root. Numbers are strings unless `typed`. */
|
|
399
|
+
getValues(options) {
|
|
400
|
+
return collectFormValues(this, options);
|
|
401
|
+
}
|
|
402
|
+
setValues(data) {
|
|
403
|
+
applyFormValues(this, data);
|
|
404
|
+
}
|
|
405
|
+
};
|
|
406
|
+
__decorate([property({
|
|
407
|
+
type: String,
|
|
408
|
+
attribute: `label-align`,
|
|
409
|
+
reflect: true
|
|
410
|
+
})], FormElement.prototype, "labelAlign", void 0);
|
|
411
|
+
__decorate([property({
|
|
412
|
+
type: Boolean,
|
|
413
|
+
attribute: `novalidate`,
|
|
414
|
+
reflect: true
|
|
415
|
+
})], FormElement.prototype, "noValidate", void 0);
|
|
416
|
+
FormElement = __decorate([safeCustomElement(`ixfx-form`)], FormElement);
|
|
417
|
+
//#endregion
|
|
418
|
+
export { formStyles as n, adoptLightDomStyles as r, FormElement as t };
|
package/dist/form.d.ts
CHANGED
|
@@ -1,14 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
//#region src/form/form.d.ts
|
|
3
|
-
declare class FormElement extends LitElement {
|
|
4
|
-
protected createRenderRoot(): this;
|
|
5
|
-
getValues(): Record<string, unknown>;
|
|
6
|
-
setValues(data: Record<string, unknown>): void;
|
|
7
|
-
}
|
|
8
|
-
declare global {
|
|
9
|
-
interface HTMLElementTagNameMap {
|
|
10
|
-
'ixfx-form': FormElement;
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
//#endregion
|
|
1
|
+
import { t as FormElement } from "./form-BGZK3jZd.js";
|
|
14
2
|
export { FormElement };
|
package/dist/form.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as FormElement } from "./form-
|
|
1
|
+
import { t as FormElement } from "./form-CY0nibZ5.js";
|
|
2
2
|
export { FormElement };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { B as ListNativeDragStartEvent, I as ListDragPreviewRenderer, L as ListDragPreviewSourceResolver } from "./tree-component-CDsYTBDi.js";
|
|
2
|
-
import { S as ListSearchController } from "./index-
|
|
2
|
+
import { S as ListSearchController } from "./index-ChdhB7RK.js";
|
|
3
3
|
import "./pan-text-CoYmt2qd.js";
|
|
4
4
|
import { i as ListGroupChangeEvent, n as ListGroupBy, o as ListGroupInfo, s as ListGroupLabel, u as ListGroupToggleEvent } from "./grouping-CUKgmkMm.js";
|
|
5
5
|
import { i as ListInteractionMode, l as ListSelectionMode } from "./list-selection-types-PjKdhF-a.js";
|
package/dist/grid-list.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { B as ListNativeDragStartEvent, F as ListDragPreviewContext, I as ListDragPreviewRenderer, N as ListDragEntry, P as ListDragPreview, R as ListDragSource, z as ListNativeDragStartDetail } from "./tree-component-CDsYTBDi.js";
|
|
2
2
|
import { i as ListGroupChangeEvent, l as ListGroupToggleDetail, n as ListGroupBy, o as ListGroupInfo, r as ListGroupChangeDetail, s as ListGroupLabel, u as ListGroupToggleEvent } from "./grouping-CUKgmkMm.js";
|
|
3
3
|
import { i as ListInteractionMode, l as ListSelectionMode } from "./list-selection-types-PjKdhF-a.js";
|
|
4
|
-
import { _ as GridListTickleDetail, a as GridListCaptionBackdrop, b as GridListViewportChangeEvent, c as GridListDataAdapter, d as GridListItemClickDetail, f as GridListItemClickEvent, g as GridListSelectEvent, h as GridListSelectDetail, i as GridListCaptionAlign, l as GridListElementEventMap, m as GridListOrientation, n as GridListActivateDetail, o as GridListCaptionPosition, p as GridListItemEventDetail, r as GridListActivateEvent, s as GridListCaptionStyle, t as GridListElement, u as GridListFullElementEventMap, v as GridListTickleEvent, y as GridListViewportChangeDetail } from "./grid-list-
|
|
4
|
+
import { _ as GridListTickleDetail, a as GridListCaptionBackdrop, b as GridListViewportChangeEvent, c as GridListDataAdapter, d as GridListItemClickDetail, f as GridListItemClickEvent, g as GridListSelectEvent, h as GridListSelectDetail, i as GridListCaptionAlign, l as GridListElementEventMap, m as GridListOrientation, n as GridListActivateDetail, o as GridListCaptionPosition, p as GridListItemEventDetail, r as GridListActivateEvent, s as GridListCaptionStyle, t as GridListElement, u as GridListFullElementEventMap, v as GridListTickleEvent, y as GridListViewportChangeDetail } from "./grid-list-tQwXs895.js";
|
|
5
5
|
export { type GridListActivateDetail, type GridListActivateEvent, type GridListCaptionAlign, type GridListCaptionBackdrop, type GridListCaptionPosition, type GridListCaptionStyle, type GridListDataAdapter, GridListElement, type GridListElementEventMap, type GridListFullElementEventMap, type GridListItemClickDetail, type GridListItemClickEvent, type GridListItemEventDetail, type GridListOrientation, type GridListSelectDetail, type GridListSelectEvent, type GridListTickleDetail, type GridListTickleEvent, type GridListViewportChangeDetail, type GridListViewportChangeEvent, type ListDragEntry, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListGroupBy, type ListGroupChangeDetail, type ListGroupChangeEvent, type ListGroupInfo, type ListGroupLabel, type ListGroupToggleDetail, type ListGroupToggleEvent, type ListInteractionMode, type ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListSelectionMode };
|
|
@@ -106,7 +106,7 @@ declare class GroupedItemListerElement<T = unknown> extends LitElement {
|
|
|
106
106
|
connectedCallback(): void;
|
|
107
107
|
disconnectedCallback(): void;
|
|
108
108
|
protected updated(changed: PropertyValues): void;
|
|
109
|
-
protected render():
|
|
109
|
+
protected render(): import("lit").TemplateResult<1> | typeof nothing;
|
|
110
110
|
}
|
|
111
111
|
declare global {
|
|
112
112
|
interface HTMLElementTagNameMap {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as IGroupedSubComponent, c as SubComponentActivateEvent, d as SubComponentItemClickEvent, f as SubComponentSelectDetail, h as SubComponentTickleEvent, i as GroupedSelectEvent, l as SubComponentFactory, m as SubComponentTickleDetail, n as GroupedItemListerElementEventMap, o as IGroupedSubComponentEventMap, p as SubComponentSelectEvent, r as GroupedSelectDetail, s as SubComponentActivateDetail, t as GroupedItemListerElement, u as SubComponentItemClickDetail } from "./grouped-item-lister-
|
|
1
|
+
import { a as IGroupedSubComponent, c as SubComponentActivateEvent, d as SubComponentItemClickEvent, f as SubComponentSelectDetail, h as SubComponentTickleEvent, i as GroupedSelectEvent, l as SubComponentFactory, m as SubComponentTickleDetail, n as GroupedItemListerElementEventMap, o as IGroupedSubComponentEventMap, p as SubComponentSelectEvent, r as GroupedSelectDetail, s as SubComponentActivateDetail, t as GroupedItemListerElement, u as SubComponentItemClickDetail } from "./grouped-item-lister-Bhyo-dkH.js";
|
|
2
2
|
export { GroupedItemListerElement, type GroupedItemListerElementEventMap, type GroupedSelectDetail, type GroupedSelectEvent, type IGroupedSubComponent, type IGroupedSubComponentEventMap, type SubComponentActivateDetail, type SubComponentActivateEvent, type SubComponentFactory, type SubComponentItemClickDetail, type SubComponentItemClickEvent, type SubComponentSelectDetail, type SubComponentSelectEvent, type SubComponentTickleDetail, type SubComponentTickleEvent };
|
|
@@ -9,7 +9,7 @@ declare class IxfxIconElement extends LitElement {
|
|
|
9
9
|
rotate: string;
|
|
10
10
|
connectedCallback(): void;
|
|
11
11
|
disconnectedCallback(): void;
|
|
12
|
-
protected render():
|
|
12
|
+
protected render(): import("lit").TemplateResult<1> | typeof nothing;
|
|
13
13
|
protected updated(changed: Map<string, unknown>): void;
|
|
14
14
|
static styles: import("lit").CSSResult[];
|
|
15
15
|
}
|
package/dist/icons.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { t as IxfxIconElement } from "./icon-
|
|
2
|
-
import { a as getIconEntry, c as iconBus, d as setIconFont, f as svgToDataUri, g as ICON_CLOSE, h as ICON_CHEVRON_DOWN, i as getIcon, l as registerFontIcon, m as ICON_CHECK, n as IconChangedEvent, o as getIconFont, p as ICON_CARET_RIGHT, r as IconEntry, s as hasIcon, t as IconChangedDetail, u as registerIcon } from "./index-
|
|
1
|
+
import { t as IxfxIconElement } from "./icon-DR_3rSyZ.js";
|
|
2
|
+
import { a as getIconEntry, c as iconBus, d as setIconFont, f as svgToDataUri, g as ICON_CLOSE, h as ICON_CHEVRON_DOWN, i as getIcon, l as registerFontIcon, m as ICON_CHECK, n as IconChangedEvent, o as getIconFont, p as ICON_CARET_RIGHT, r as IconEntry, s as hasIcon, t as IconChangedDetail, u as registerIcon } from "./index-garxxqgV.js";
|
|
3
3
|
export { ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, type IconChangedDetail, type IconChangedEvent, type IconEntry, IxfxIconElement, getIcon, getIconEntry, getIconFont, hasIcon, iconBus, registerFontIcon, registerIcon, setIconFont, svgToDataUri };
|
package/dist/incr-search.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { A as FuzzySearch, C as ListSearchControllerOptions, D as IncrSearchTreeOptions, E as IncrSearchTreeController, F as IncrSearchChangeCallback, I as IncrSearchOptions, L as IncrSearchResult, M as HighlightOptions, N as HighlightTarget, O as createAcCompletionProvider, P as IncrSearch, R as IncrSearchState, S as ListSearchController, T as ListSearchMode, _ as DataListSearchAdapterOptions, a as RegisterListSearchCommandsOptions, b as LIST_SEARCH_MODES, c as applyHighlights, d as createFuzzySearch, f as ElementIncrSearch, g as createElementListSearchAdapter, h as ElementListSearchHost, i as LIST_SEARCH_COMMAND_IDS, j as FuzzySearchOptions, k as ElementIncrSearchOptions, l as buildHighlightTargets, m as ElementListSearchAdapterOptions, n as createTreeListSearchAdapter, o as registerListSearchCommands, p as createElementIncrSearch, r as listSearchStyles, s as createIncrSearch, t as TreeListSearchAdapterOptions, u as clearHighlights, v as DataListSearchItem, w as ListSearchHost, x as ListSearchAdapter, y as createDataListSearchAdapter } from "./index-
|
|
1
|
+
import { A as FuzzySearch, C as ListSearchControllerOptions, D as IncrSearchTreeOptions, E as IncrSearchTreeController, F as IncrSearchChangeCallback, I as IncrSearchOptions, L as IncrSearchResult, M as HighlightOptions, N as HighlightTarget, O as createAcCompletionProvider, P as IncrSearch, R as IncrSearchState, S as ListSearchController, T as ListSearchMode, _ as DataListSearchAdapterOptions, a as RegisterListSearchCommandsOptions, b as LIST_SEARCH_MODES, c as applyHighlights, d as createFuzzySearch, f as ElementIncrSearch, g as createElementListSearchAdapter, h as ElementListSearchHost, i as LIST_SEARCH_COMMAND_IDS, j as FuzzySearchOptions, k as ElementIncrSearchOptions, l as buildHighlightTargets, m as ElementListSearchAdapterOptions, n as createTreeListSearchAdapter, o as registerListSearchCommands, p as createElementIncrSearch, r as listSearchStyles, s as createIncrSearch, t as TreeListSearchAdapterOptions, u as clearHighlights, v as DataListSearchItem, w as ListSearchHost, x as ListSearchAdapter, y as createDataListSearchAdapter } from "./index-ChdhB7RK.js";
|
|
2
2
|
export { type DataListSearchAdapterOptions, type DataListSearchItem, type ElementIncrSearch, type ElementIncrSearchOptions, type ElementListSearchAdapterOptions, type ElementListSearchHost, type FuzzySearch, type FuzzySearchOptions, type HighlightOptions, type HighlightTarget, type IncrSearch, type IncrSearchChangeCallback, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, type IncrSearchTreeOptions as IncrSearchMillerOptions, type IncrSearchTreeOptions, type IncrSearchOptions, type IncrSearchResult, type IncrSearchState, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, type ListSearchAdapter, ListSearchController, type ListSearchControllerOptions, type ListSearchHost, type ListSearchMode, type RegisterListSearchCommandsOptions, type TreeListSearchAdapterOptions, applyHighlights, buildHighlightTargets, clearHighlights, createAcCompletionProvider, createDataListSearchAdapter, createElementIncrSearch, createElementListSearchAdapter, createFuzzySearch, createIncrSearch, createTreeListSearchAdapter, listSearchStyles, registerListSearchCommands };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as LabelledInputBase } from "./labelled-input-base-
|
|
1
|
+
import { t as LabelledInputBase } from "./labelled-input-base-Dp_9KP0G.js";
|
|
2
2
|
import { CSSResultGroup } from "lit";
|
|
3
3
|
//#region src/labelled-range-input/labelled-range-input.d.ts
|
|
4
4
|
declare class LabelledRangeInput extends LabelledInputBase {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./index-
|
|
1
|
+
import "./index-BUB5SICW.js";
|
|
2
2
|
import { CSSResultGroup, LitElement, PropertyValues } from "lit";
|
|
3
3
|
import { Colour } from "@ixfx/visual";
|
|
4
4
|
//#region src/colour-picker/types.d.ts
|
|
@@ -143,6 +143,7 @@ declare class ColourPickerPopup extends LitElement {
|
|
|
143
143
|
size: PickerSize;
|
|
144
144
|
private _isOpen;
|
|
145
145
|
private _everOpened;
|
|
146
|
+
private _hasAction;
|
|
146
147
|
_popupEl: HTMLElement;
|
|
147
148
|
_pickerEl: ColourPicker;
|
|
148
149
|
private readonly _uid;
|
|
@@ -171,6 +172,8 @@ declare class ColourPickerPopup extends LitElement {
|
|
|
171
172
|
private _onPickerInput;
|
|
172
173
|
private _onPickerChange;
|
|
173
174
|
private _onConfirm;
|
|
175
|
+
private _onActionSlotChange;
|
|
176
|
+
close(): void;
|
|
174
177
|
private _onSwatchClick;
|
|
175
178
|
private _dispatchInput;
|
|
176
179
|
private _dispatchChange;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as LabelledInputBase } from "./labelled-input-base-
|
|
1
|
+
import { t as LabelledInputBase } from "./labelled-input-base-Dp_9KP0G.js";
|
|
2
2
|
import { n as EditableLabel } from "./editable-label-rzXkjf1H.js";
|
|
3
3
|
import { n as WheelNudgeConsumer, t as WheelDirection } from "./wheel-nudge-By5s_ioH.js";
|
|
4
4
|
import { f as SliderMarkerStyle, m as SliderSingleStyle } from "./slider-input-BxURAAmD.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./icon-
|
|
1
|
+
import "./icon-DR_3rSyZ.js";
|
|
2
2
|
import { E as TreeSearchHost } from "./tree-component-CDsYTBDi.js";
|
|
3
3
|
import { o as TreeNode } from "./types-Jky6oNAp.js";
|
|
4
4
|
import { ReactiveController, ReactiveControllerHost, TemplateResult, nothing } from "lit";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import "./icon-
|
|
1
|
+
import "./icon-DR_3rSyZ.js";
|
|
2
2
|
import { o as TreeNode } from "./types-Jky6oNAp.js";
|
|
3
|
-
import { i as MenuContainer, n as MenuTrigger, r as MenuTriggerCommandDetail, t as MenuItem } from "./menu-item-
|
|
3
|
+
import { i as MenuContainer, n as MenuTrigger, r as MenuTriggerCommandDetail, t as MenuItem } from "./menu-item-B0zqw2xp.js";
|
|
4
4
|
import { LitElement, TemplateResult } from "lit";
|
|
5
5
|
import { CommandRegistry, KeyboardManager } from "@clinth/ui-commands";
|
|
6
6
|
//#region src/menu/menu-bar.d.ts
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./icon-
|
|
1
|
+
import "./icon-DR_3rSyZ.js";
|
|
2
2
|
//#region src/icons/defaults.d.ts
|
|
3
3
|
/** Chevron pointing down (Lucide `chevron-down`). Used for split-button dropdown toggle. */
|
|
4
4
|
declare const ICON_CHEVRON_DOWN = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"/></svg>";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { A as TreeTickleEvent, C as TreeItemDblClickEvent, E as TreeSearchHost, I as ListDragPreviewRenderer, L as ListDragPreviewSourceResolver, O as TreeSelectEvent, _ as TreeDropTarget, a as TreeComponent, c as TreeDragContext, d as TreeDragStartEvent, h as TreeDropEvent, i as TreeCollapseEvent, j as TreeDataModel, l as TreeDragEndEvent, m as TreeDropDetail, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeDropContext, s as TreeDndMode, u as TreeDragOverEvent, w as TreeNavigateOptions, x as TreeItemClickEvent, y as TreeExpandEvent, z as ListNativeDragStartDetail } from "./tree-component-CDsYTBDi.js";
|
|
2
2
|
import { a as TreeItem, i as TreeInteractionMode, n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-Jky6oNAp.js";
|
|
3
|
-
import { S as ListSearchController } from "./index-
|
|
3
|
+
import { S as ListSearchController } from "./index-ChdhB7RK.js";
|
|
4
4
|
import { t as ListNativeDragController } from "./list-native-drag-controller-NMspr0E1.js";
|
|
5
5
|
import { n as TickledController } from "./tickled-controller-DodxD3eQ.js";
|
|
6
6
|
import { LitElement, PropertyValues, ReactiveController, ReactiveControllerHost, TemplateResult, nothing } from "lit";
|