@optionfactory/fml 9.0.0-rc15 → 9.0.0-rc16
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 +16 -88
- package/dist/client-errors.iife.js +17 -26
- package/dist/client-errors.iife.js.map +1 -1
- package/dist/client-errors.iife.min.js.map +1 -1
- package/dist/custom-elements.json +44 -30
- package/dist/fml.css +20 -17
- package/dist/fml.css.map +1 -1
- package/dist/fml.iife.js +3386 -2037
- package/dist/fml.iife.js.map +1 -1
- package/dist/fml.iife.min.js +1 -1
- package/dist/fml.iife.min.js.map +1 -1
- package/dist/ftl.d.mts +395 -224
- package/dist/ftl.iife.js +400 -330
- package/dist/ftl.iife.js.map +1 -1
- package/dist/ftl.iife.min.js +1 -1
- package/dist/ftl.iife.min.js.map +1 -1
- package/dist/ftl.min.mjs +1 -1
- package/dist/ftl.min.mjs.map +1 -1
- package/dist/ftl.mjs +400 -330
- package/dist/ftl.mjs.map +1 -1
- package/dist/ful.css +20 -17
- package/dist/ful.css.map +1 -1
- package/dist/ful.d.mts +2583 -690
- package/dist/ful.iife.js +2850 -1542
- package/dist/ful.iife.js.map +1 -1
- package/dist/ful.iife.min.js +1 -1
- package/dist/ful.iife.min.js.map +1 -1
- package/dist/ful.min.mjs +1 -1
- package/dist/ful.min.mjs.map +1 -1
- package/dist/ful.mjs +2850 -1542
- package/dist/ful.mjs.map +1 -1
- package/dist/httpc.d.mts +139 -121
- package/dist/httpc.iife.js +137 -166
- package/dist/httpc.iife.js.map +1 -1
- package/dist/httpc.iife.min.js +1 -1
- package/dist/httpc.iife.min.js.map +1 -1
- package/dist/httpc.min.mjs +1 -1
- package/dist/httpc.min.mjs.map +1 -1
- package/dist/httpc.mjs +137 -166
- package/dist/httpc.mjs.map +1 -1
- package/dist/vscode.html-custom-data.json +26 -18
- package/dist/web-types.json +51 -35
- package/package.json +1 -1
package/dist/ful.d.mts
CHANGED
|
@@ -1,25 +1,55 @@
|
|
|
1
1
|
import { ParsedElement } from './ftl.mjs';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
save: (k:
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
2
|
+
import { HttpClient } from './httpc.mjs';
|
|
3
|
+
export type JsonStorage = {
|
|
4
|
+
/**
|
|
5
|
+
* stores `JSON.stringify(v)`
|
|
6
|
+
* under `k`, throwing what the encoding or the storage throws: an unreachable
|
|
7
|
+
* storage, a full quota, a value json cannot encode
|
|
8
|
+
*/
|
|
9
|
+
save: (k: string, v: any) => void;
|
|
10
|
+
/**
|
|
11
|
+
* the value stored under `k`, decoded;
|
|
12
|
+
* undefined when there is none, when the storage cannot be reached, or when the
|
|
13
|
+
* stored text is not json, in which case the entry is also removed
|
|
14
|
+
*/
|
|
15
|
+
load: (k: string) => any;
|
|
16
|
+
/**
|
|
17
|
+
* removes the entry under `k`
|
|
18
|
+
*/
|
|
19
|
+
remove: (k: string) => void;
|
|
20
|
+
/**
|
|
21
|
+
* what `load` answers for `k`, removing the
|
|
22
|
+
* entry
|
|
23
|
+
*/
|
|
24
|
+
pop: (k: string) => any;
|
|
17
25
|
};
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
26
|
+
export type VersionedJsonStorage = {
|
|
27
|
+
/**
|
|
28
|
+
* stores
|
|
29
|
+
* `data` with `revision` under `key`, throwing what `JsonStorage.save` throws
|
|
30
|
+
*/
|
|
31
|
+
save: (key: string, revision: string, data: any) => void;
|
|
32
|
+
/**
|
|
33
|
+
* the data stored under
|
|
34
|
+
* `key` when it was saved with this exact revision; otherwise undefined, and the
|
|
35
|
+
* entry is removed, whether it holds another revision, holds no revision at
|
|
36
|
+
* all, or is missing
|
|
37
|
+
*/
|
|
38
|
+
load: (key: string, revision: string) => any;
|
|
21
39
|
};
|
|
40
|
+
/** `localStorage`, holding json. */
|
|
41
|
+
declare const LocalStorage: JsonStorage;
|
|
42
|
+
/** `sessionStorage`, holding json. */
|
|
43
|
+
declare const SessionStorage: JsonStorage;
|
|
44
|
+
/** `localStorage`, holding json beside a revision. */
|
|
45
|
+
declare const VersionedLocalStorage: VersionedJsonStorage;
|
|
46
|
+
/** `sessionStorage`, holding json beside a revision. */
|
|
47
|
+
declare const VersionedSessionStorage: VersionedJsonStorage;
|
|
22
48
|
export type AsyncExtension = {
|
|
49
|
+
/**
|
|
50
|
+
* one per `asyncOn` listener the event
|
|
51
|
+
* reached, in the order they ran
|
|
52
|
+
*/
|
|
23
53
|
promises: Promise<any>[];
|
|
24
54
|
};
|
|
25
55
|
export type AsyncEvent = Event & {
|
|
@@ -27,7 +57,8 @@ export type AsyncEvent = Event & {
|
|
|
27
57
|
};
|
|
28
58
|
/**
|
|
29
59
|
* @typedef {Object} AsyncExtension
|
|
30
|
-
* @property {Promise<any>[]} promises
|
|
60
|
+
* @property {Promise<any>[]} promises one per `asyncOn` listener the event
|
|
61
|
+
* reached, in the order they ran
|
|
31
62
|
* @typedef {Event & { async?: AsyncExtension }} AsyncEvent
|
|
32
63
|
*/
|
|
33
64
|
/**
|
|
@@ -38,35 +69,57 @@ export type AsyncEvent = Event & {
|
|
|
38
69
|
*/
|
|
39
70
|
declare class AsyncEvents {
|
|
40
71
|
/**
|
|
41
|
-
* Dispatches
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
*
|
|
72
|
+
* Dispatches `evt` on `el` synchronously, then waits for the answers of the
|
|
73
|
+
* `asyncOn` listeners it reached, on `el` or, for a bubbling event, on its
|
|
74
|
+
* ancestors. Listeners added with a plain `addEventListener` run but are not
|
|
75
|
+
* awaited. In `broadcast` mode, the default, it resolves with every answer
|
|
76
|
+
* in the order the listeners ran, an empty array when none did. In
|
|
77
|
+
* `pipeline` mode it accepts at most one listener and resolves with its
|
|
78
|
+
* answer, or undefined when none ran. In `delegate` mode it requires exactly
|
|
79
|
+
* one listener and resolves with its answer.
|
|
80
|
+
* @param {HTMLElement} el the element to dispatch on
|
|
81
|
+
* @param {AsyncEvent} evt the event to dispatch
|
|
82
|
+
* @param {{mode?: 'broadcast' | 'pipeline' | 'delegate'}} [options]
|
|
83
|
+
* @returns {Promise<any>} the answer or answers as the mode describes
|
|
84
|
+
* @throws what the first answer to fail threw or rejected with; or an
|
|
85
|
+
* Error naming the event and the mode when `pipeline` reached more than one
|
|
86
|
+
* listener or `delegate` did not reach exactly one, in which case the
|
|
87
|
+
* listeners have already run and their outcome is discarded. Both arrive as
|
|
88
|
+
* the rejection of the returned promise.
|
|
46
89
|
*/
|
|
47
90
|
static fireAsync(el: HTMLElement, evt: AsyncEvent, options?: {
|
|
48
91
|
mode?: 'broadcast' | 'pipeline' | 'delegate';
|
|
49
92
|
}): Promise<any>;
|
|
50
93
|
/**
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
*
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
*
|
|
94
|
+
* Adds a listener whose answer `fireAsync` can await. When the event
|
|
95
|
+
* reaches it, the listener attaches a promise to `evt.async.promises`,
|
|
96
|
+
* creating the list when it is the first, then calls `fn` with the event;
|
|
97
|
+
* the promise settles with what `fn` returns or throws, awaited when it is a
|
|
98
|
+
* promise. The event is dispatched the usual way, so an event fired with a
|
|
99
|
+
* plain `dispatchEvent` runs `fn` too, and nobody awaits its answer.
|
|
100
|
+
* @param {HTMLElement} el the element to listen on
|
|
101
|
+
* @param {string} type the event type
|
|
102
|
+
* @param {(evt: any) => any} fn called with the event; its result is the answer
|
|
103
|
+
* @param {AddEventListenerOptions} [options] passed to `addEventListener`
|
|
104
|
+
* @returns {EventListener} the listener actually added, which `asyncOff` takes
|
|
57
105
|
*/
|
|
58
|
-
static asyncOn(el: HTMLElement, type: string, fn:
|
|
106
|
+
static asyncOn(el: HTMLElement, type: string, fn: (evt: any) => any, options?: AddEventListenerOptions): EventListener;
|
|
59
107
|
/**
|
|
60
|
-
*
|
|
61
|
-
* @param {HTMLElement} el
|
|
62
|
-
* @param {string} type
|
|
63
|
-
* @param {EventListener} listener
|
|
64
|
-
* @param {EventListenerOptions} [options]
|
|
108
|
+
* Removes a listener added by `asyncOn`.
|
|
109
|
+
* @param {HTMLElement} el the element it listens on
|
|
110
|
+
* @param {string} type the event type it was added for
|
|
111
|
+
* @param {EventListener} listener what `asyncOn` returned, not the `fn` given to it
|
|
112
|
+
* @param {EventListenerOptions} [options] passed to `removeEventListener`
|
|
113
|
+
* @returns {void}
|
|
65
114
|
*/
|
|
66
115
|
static asyncOff(el: HTMLElement, type: string, listener: EventListener, options?: EventListenerOptions): void;
|
|
67
116
|
/**
|
|
68
|
-
*
|
|
69
|
-
*
|
|
117
|
+
* Assigns `fireAsync(evt, options)`, `asyncOn(type, fn, options)` and
|
|
118
|
+
* `asyncOff(type, listener, options)` onto each class's prototype, each
|
|
119
|
+
* calling the static of the same name with the instance as the element.
|
|
120
|
+
* Members of those names already on the prototype are overwritten.
|
|
121
|
+
* @param {...Function} classes the classes to extend
|
|
122
|
+
* @returns {void}
|
|
70
123
|
*/
|
|
71
124
|
static mixInto(...classes: Function[]): void;
|
|
72
125
|
}
|
|
@@ -74,6 +127,8 @@ export type Claim = {
|
|
|
74
127
|
readonly stale: boolean;
|
|
75
128
|
};
|
|
76
129
|
/**
|
|
130
|
+
* A hold on one generation of a `Claims`: `stale` turns true once a later
|
|
131
|
+
* `take()` or `invalidate()` on it starts a newer generation.
|
|
77
132
|
* @typedef {{ readonly stale: boolean }} Claim
|
|
78
133
|
*/
|
|
79
134
|
/**
|
|
@@ -99,85 +154,95 @@ declare class Claims {
|
|
|
99
154
|
* @returns {Claim}
|
|
100
155
|
*/
|
|
101
156
|
hold(): Claim;
|
|
102
|
-
/**
|
|
157
|
+
/**
|
|
158
|
+
* Supersedes every claim without holding a new one.
|
|
159
|
+
* @returns {void}
|
|
160
|
+
*/
|
|
103
161
|
invalidate(): void;
|
|
104
162
|
}
|
|
105
163
|
export type Describable = {
|
|
106
164
|
describedBy(el: HTMLElement): boolean;
|
|
107
165
|
};
|
|
108
166
|
/**
|
|
109
|
-
*
|
|
110
|
-
*
|
|
111
|
-
*
|
|
112
|
-
* A field owns its control's `aria-describedby`: it is the only thing that
|
|
113
|
-
* knows which element the description belongs on, and it already writes the
|
|
114
|
-
* entry for its own error region. Content the author slotted into the field
|
|
115
|
-
* cannot write that attribute itself without becoming a second owner of it, and
|
|
116
|
-
* it cannot be wired by the field either, because a slotted custom element
|
|
117
|
-
* renders after the field has mounted and has nothing to point at when the
|
|
118
|
-
* field looks.
|
|
119
|
-
*
|
|
120
|
-
* So the content asks, once it has something to offer. `describable(el)`
|
|
121
|
-
* answers the nearest ancestor that accepts a description, and the caller hands
|
|
122
|
-
* its element to that ancestor's `describedBy`, which answers whether it was
|
|
123
|
-
* taken. Nothing here names a field or a tooltip: the relation is expressed as
|
|
124
|
-
* a capability, so the two ends need not import each other, which matters
|
|
125
|
-
* because the library's own arrow runs from the forms to the disclosures.
|
|
126
|
-
*
|
|
127
|
-
* The lookup lives here rather than at its one call site so the protocol has a
|
|
128
|
-
* name, a place to be documented and a single definition to change.
|
|
129
|
-
*/
|
|
130
|
-
/**
|
|
167
|
+
* Something that adds elements to the accessible description of the control it
|
|
168
|
+
* owns, such as a field: `describedBy(el)` adds `el` to the control's
|
|
169
|
+
* `aria-describedby` and answers whether it did.
|
|
131
170
|
* @typedef {{ describedBy(el: HTMLElement): boolean }} Describable
|
|
132
171
|
*/
|
|
133
172
|
/**
|
|
134
|
-
* The nearest ancestor of `el` that
|
|
135
|
-
*
|
|
173
|
+
* The nearest ancestor of `el` that has a `describedBy` method. Content
|
|
174
|
+
* slotted inside a field does not write the control's `aria-describedby`
|
|
175
|
+
* itself: once it has something to offer, it hands the element carrying the
|
|
176
|
+
* words to the `describedBy` of the ancestor this answers.
|
|
136
177
|
* @param {Element} el
|
|
137
|
-
* @returns {(Element & Describable) | null}
|
|
178
|
+
* @returns {(Element & Describable) | null} null when no ancestor has one
|
|
138
179
|
*/
|
|
139
180
|
declare const describable: (el: Element) => (Element & Describable) | null;
|
|
140
181
|
/**
|
|
141
|
-
* Sleeping, debouncing and throttling.
|
|
142
|
-
* wrapped function together with
|
|
182
|
+
* Sleeping, debouncing and throttling. `debounce` and `throttle` both return
|
|
183
|
+
* the wrapped function together with an abort function, which cancels the call
|
|
184
|
+
* pending and leaves the wrapped function working.
|
|
143
185
|
*/
|
|
144
186
|
declare class Timing {
|
|
145
|
-
/** Resolves after the given milliseconds. @param {number} ms */
|
|
146
|
-
static sleep(ms: number): Promise<any>;
|
|
147
187
|
/**
|
|
148
|
-
*
|
|
149
|
-
*
|
|
188
|
+
* @param {number} ms
|
|
189
|
+
* @returns {Promise<void>} resolving after `ms` milliseconds
|
|
190
|
+
*/
|
|
191
|
+
static sleep(ms: number): Promise<void>;
|
|
192
|
+
/**
|
|
193
|
+
* Collapses a burst of calls into one call of `func`, a burst ending once
|
|
194
|
+
* `timeoutMs` pass without a call. By default `func` is called at the end
|
|
195
|
+
* of the burst with the arguments of its last call. With `immediate` it is
|
|
196
|
+
* called at the first call of a burst, with that call's arguments, and not
|
|
197
|
+
* at the end. Without `immediate`, a call the wrapped function receives
|
|
198
|
+
* from inside `func` starts a new burst.
|
|
150
199
|
* @param {number} timeoutMs
|
|
151
|
-
* @param {
|
|
152
|
-
* @param {{ immediate?: boolean }} [options]
|
|
153
|
-
* @returns {[
|
|
200
|
+
* @param {(...args: any[]) => any} func
|
|
201
|
+
* @param {{ immediate?: boolean }} [options]
|
|
202
|
+
* @returns {[(...args: any[]) => void, () => void]} the wrapped function
|
|
203
|
+
* and the abort function
|
|
154
204
|
*/
|
|
155
|
-
static debounce(timeoutMs: number, func:
|
|
205
|
+
static debounce(timeoutMs: number, func: (...args: any[]) => any, options?: {
|
|
156
206
|
immediate?: boolean;
|
|
157
|
-
}): [
|
|
207
|
+
}): [(...args: any[]) => void, () => void];
|
|
158
208
|
/**
|
|
159
|
-
*
|
|
209
|
+
* Calls `func` at most once per `timeoutMs`, always with the arguments of
|
|
210
|
+
* the latest call. With `leading`, on by default, a call arriving once the
|
|
211
|
+
* interval since the previous call of `func` has passed calls it at once;
|
|
212
|
+
* without it, the first call only starts the interval. With `trailing`, on
|
|
213
|
+
* by default, a call arriving inside the interval schedules `func` for the
|
|
214
|
+
* interval's end; without it, such a call is dropped.
|
|
160
215
|
* @param {number} timeoutMs
|
|
161
|
-
* @param {
|
|
162
|
-
* @param {{ leading?: boolean, trailing?: boolean }} [options]
|
|
163
|
-
* @returns {[
|
|
216
|
+
* @param {(...args: any[]) => any} func
|
|
217
|
+
* @param {{ leading?: boolean, trailing?: boolean }} [options]
|
|
218
|
+
* @returns {[(...args: any[]) => void, () => void]} the wrapped function
|
|
219
|
+
* and the abort function
|
|
164
220
|
*/
|
|
165
|
-
static throttle(timeoutMs: number, func:
|
|
221
|
+
static throttle(timeoutMs: number, func: (...args: any[]) => any, options?: {
|
|
166
222
|
leading?: boolean;
|
|
167
223
|
trailing?: boolean;
|
|
168
|
-
}): [
|
|
224
|
+
}): [(...args: any[]) => void, () => void];
|
|
169
225
|
}
|
|
170
|
-
/**
|
|
226
|
+
/**
|
|
227
|
+
* Moves values between a form's named controls and a nested object, and pins
|
|
228
|
+
* problems onto the controls they name. Works on any native form, not only
|
|
229
|
+
* the one inside a `ful-form`. Every method reads the controls through
|
|
230
|
+
* `form.elements`, so a control in the subtree that belongs to another form
|
|
231
|
+
* (a nested form, a `form` attribute pointing elsewhere) is never read,
|
|
232
|
+
* written or marked.
|
|
233
|
+
*/
|
|
171
234
|
declare class Bindings {
|
|
172
235
|
#private;
|
|
173
236
|
/**
|
|
174
|
-
* Flattens a nested object into dotted keys,
|
|
175
|
-
* a
|
|
176
|
-
* `address
|
|
237
|
+
* Flattens a nested object into dotted keys, array indexes becoming numeric
|
|
238
|
+
* segments (`a.0.b`). It does not descend below a key that `stops` names, so
|
|
239
|
+
* with a field named `address` the whole object is kept under `address`,
|
|
240
|
+
* while with one named `address.city` the leaf is kept under `address.city`.
|
|
241
|
+
* A null value is kept as a leaf.
|
|
177
242
|
* @param {{ [x: string]: any; }} obj
|
|
178
|
-
* @param {string} prefix
|
|
179
|
-
* @param {Set<
|
|
180
|
-
* @
|
|
243
|
+
* @param {string} prefix prepended to every key, `''` at the root
|
|
244
|
+
* @param {Set<string>} stops the dotted keys to keep whole
|
|
245
|
+
* @returns {{ [x: string]: any; }} a flat object keyed by dotted path
|
|
181
246
|
*/
|
|
182
247
|
static flatten(obj: {
|
|
183
248
|
[x: string]: any;
|
|
@@ -186,19 +251,37 @@ declare class Bindings {
|
|
|
186
251
|
};
|
|
187
252
|
/**
|
|
188
253
|
* Writes a value into an object at a dotted path, creating the intermediate
|
|
189
|
-
* objects and arrays the path implies
|
|
190
|
-
*
|
|
191
|
-
*
|
|
254
|
+
* objects and arrays the path implies: a numeric segment makes its container
|
|
255
|
+
* an array. Brackets are not parsed, so `a[0]` is a plain key.
|
|
256
|
+
*
|
|
257
|
+
* An undefined value declares the path without filling it: an entry already
|
|
258
|
+
* there is kept, a missing one is set to null. A scalar or a null left on the
|
|
259
|
+
* path by a shorter overlapping name (`a` written before `a.b`) is replaced
|
|
260
|
+
* by a container, so the longer name wins whichever order they arrive in.
|
|
261
|
+
* @param {any} result the object or array to write into
|
|
262
|
+
* @param {string} path a dotted name such as `a.b` or `a.0.b`
|
|
192
263
|
* @param {any} value
|
|
264
|
+
* @returns {any} the root written into, to be used in place of `result`: a
|
|
265
|
+
* new array replaces it when the first segment is numeric and `result` is
|
|
266
|
+
* not an array
|
|
267
|
+
* @throws {Error} when a segment is `__proto__`, `prototype` or `constructor`,
|
|
268
|
+
* before anything is written
|
|
193
269
|
*/
|
|
194
270
|
static providePath(result: any, path: string, value: any): any;
|
|
195
271
|
/**
|
|
196
|
-
* Reads one control's value
|
|
197
|
-
*
|
|
198
|
-
*
|
|
199
|
-
*
|
|
272
|
+
* Reads one control's value by its kind. The kind is read from the `type`
|
|
273
|
+
* attribute and the tag, so a ful element answers its own `value`.
|
|
274
|
+
*
|
|
275
|
+
* - a radio answers its `value` when checked and undefined otherwise
|
|
276
|
+
* - a checkbox answers its `checked` state
|
|
277
|
+
* - `data-ful-bind-type="boolean"` decodes the value: a radio answers
|
|
278
|
+
* whether its value is `'true'`, any other control answers null when
|
|
279
|
+
* blank and whether its value is `'true'` otherwise
|
|
280
|
+
* - a multiple select answers the array of its selected values
|
|
281
|
+
* - a native input, select or textarea answers null when blank
|
|
282
|
+
* - anything else answers its `value` unchanged
|
|
200
283
|
* @param {Element & {dataset?: any} & {checked?: boolean} & {value?: any}} el
|
|
201
|
-
* @returns {any} the value
|
|
284
|
+
* @returns {any} the value; undefined for an unchecked radio
|
|
202
285
|
*/
|
|
203
286
|
static extract(el: Element & {
|
|
204
287
|
dataset?: any;
|
|
@@ -207,13 +290,32 @@ declare class Bindings {
|
|
|
207
290
|
} & {
|
|
208
291
|
value?: any;
|
|
209
292
|
}): any;
|
|
210
|
-
static extractFrom(form: any, submitter: any): {};
|
|
211
293
|
/**
|
|
212
|
-
*
|
|
213
|
-
*
|
|
214
|
-
*
|
|
294
|
+
* Reads the form's named controls into a nested object, the dotted names
|
|
295
|
+
* deciding its shape (see `providePath`) and each value read by `extract`.
|
|
296
|
+
* Controls are read in document order, so of two overlapping names the
|
|
297
|
+
* later one decides. A control is skipped when it has no `name`, when it
|
|
298
|
+
* matches `:disabled` (its own `disabled` or a disabled fieldset's), or when
|
|
299
|
+
* it is a submit, reset or plain button. The submitter is the exception to
|
|
300
|
+
* both of the last two: it contributes its name and value even while
|
|
301
|
+
* disabled.
|
|
302
|
+
* @param {HTMLFormElement} form
|
|
303
|
+
* @param {HTMLElement} [submitter] the button that submitted, when there is one
|
|
304
|
+
* @returns {any} the nested values; an array when the first segment of a name is numeric
|
|
305
|
+
* @throws {Error} when a name has a segment `providePath` refuses
|
|
306
|
+
*/
|
|
307
|
+
static extractFrom(form: HTMLFormElement, submitter?: HTMLElement): any;
|
|
308
|
+
/**
|
|
309
|
+
* Writes a value into one control, the inverse of `extract`.
|
|
310
|
+
*
|
|
311
|
+
* - a radio is checked when `raw` is not null and its `value` attribute
|
|
312
|
+
* equals `String(raw)`, so a number or a boolean matches its text
|
|
313
|
+
* - a checkbox takes `raw` as its `checked` state
|
|
314
|
+
* - a multiple select selects the options whose value is in `raw`, compared
|
|
315
|
+
* as text: an array selects each entry, a scalar selects one, null selects none
|
|
316
|
+
* - anything else takes `raw` as its `value`
|
|
215
317
|
* @param {Element & {dataset?: any} & {checked?: boolean} & {value?: any}} el
|
|
216
|
-
* @param {any} raw
|
|
318
|
+
* @param {any} raw
|
|
217
319
|
*/
|
|
218
320
|
static mutate(el: Element & {
|
|
219
321
|
dataset?: any;
|
|
@@ -222,8 +324,52 @@ declare class Bindings {
|
|
|
222
324
|
} & {
|
|
223
325
|
value?: any;
|
|
224
326
|
}, raw: any): void;
|
|
225
|
-
|
|
226
|
-
|
|
327
|
+
/**
|
|
328
|
+
* Writes a nested object onto the form's named controls: the object is
|
|
329
|
+
* flattened with the control names as stops (see `flatten`), and each key
|
|
330
|
+
* is written by `mutate` into every control carrying exactly that name. A
|
|
331
|
+
* key naming no control is ignored, and a control the object does not name
|
|
332
|
+
* keeps its value.
|
|
333
|
+
* @param {HTMLFormElement} form
|
|
334
|
+
* @param {{ [x: string]: any; }} values
|
|
335
|
+
*/
|
|
336
|
+
static mutateIn(form: HTMLFormElement, values: {
|
|
337
|
+
[x: string]: any;
|
|
338
|
+
}): void;
|
|
339
|
+
/**
|
|
340
|
+
* Shows problems on the form, replacing whatever the previous call showed.
|
|
341
|
+
*
|
|
342
|
+
* Every named control's custom validity is first cleared. A problem whose
|
|
343
|
+
* `type` is `FIELD_ERROR` or `INVALID_FORMAT` and whose `context` is not
|
|
344
|
+
* empty is pinned to a control: brackets in the context are turned into
|
|
345
|
+
* dots (`users[0].name` becomes `users.0.name`), and the longest leading
|
|
346
|
+
* part of it that names a control wins, so an exact field takes the problem
|
|
347
|
+
* alone and a composite field named for a prefix catches the problems of its
|
|
348
|
+
* subtree. Each control of that name gets `setCustomValidity(reason, rest)`,
|
|
349
|
+
* `rest` being the remainder of the path (`''` on an exact match) that a
|
|
350
|
+
* composite can use to route the problem to an inner control.
|
|
351
|
+
*
|
|
352
|
+
* Every other problem, and a field problem naming no control, is shown in
|
|
353
|
+
* each `ful-errors` banner of the form: the banner gets `role="alert"`, is
|
|
354
|
+
* revealed and holds the reasons one per line. With no such problem the
|
|
355
|
+
* banner is emptied and hidden.
|
|
356
|
+
*
|
|
357
|
+
* Each `ful-field-error` of the form gets `aria-live="off"` when
|
|
358
|
+
* `scrollOnError` is set, since focusing the field announces its error, and
|
|
359
|
+
* `aria-live="polite"` otherwise. With `scrollOnError` and at least one
|
|
360
|
+
* problem, the topmost `:invalid` control is focused.
|
|
361
|
+
*
|
|
362
|
+
* A banner or `ful-field-error` belongs to the nearest enclosing form, so
|
|
363
|
+
* those of a nested form are left alone.
|
|
364
|
+
* @param {HTMLFormElement} form
|
|
365
|
+
* @param {{ type: string; context?: string | null; reason: string; }[]} es the problems, as an httpc `Failure` carries them
|
|
366
|
+
* @param {boolean} scrollOnError
|
|
367
|
+
*/
|
|
368
|
+
static errors(form: HTMLFormElement, es: {
|
|
369
|
+
type: string;
|
|
370
|
+
context?: string | null;
|
|
371
|
+
reason: string;
|
|
372
|
+
}[], scrollOnError: boolean): void;
|
|
227
373
|
}
|
|
228
374
|
/**
|
|
229
375
|
* The base of every form-associated ful field: a form-associated custom element
|
|
@@ -232,212 +378,304 @@ declare class Bindings {
|
|
|
232
378
|
*
|
|
233
379
|
* A subclass owns its template, its value semantics and its change events. It
|
|
234
380
|
* implements `_build(conf)`, which builds its dom and returns the pieces the
|
|
235
|
-
* base drives
|
|
236
|
-
*
|
|
237
|
-
*
|
|
238
|
-
* is there to be called from a subclass's build.
|
|
381
|
+
* base drives (see `_build`), and the `value` pair. The base wires the pieces,
|
|
382
|
+
* mounts the fragment and applies the declared state. Nothing in the base is
|
|
383
|
+
* there to be called from a subclass's build.
|
|
239
384
|
*
|
|
240
|
-
* The
|
|
241
|
-
*
|
|
242
|
-
*
|
|
243
|
-
*
|
|
244
|
-
*
|
|
245
|
-
*
|
|
246
|
-
*
|
|
385
|
+
* The claim setters, the validity protocol and the aria wiring all act on the
|
|
386
|
+
* pieces, so a field with no native control returns a focusable piece of its
|
|
387
|
+
* own chrome as the control. The claim getters and `focus()` are the only
|
|
388
|
+
* members that tolerate a not yet rendered element; the other members need the
|
|
389
|
+
* pieces and so work only after the render.
|
|
390
|
+
*
|
|
391
|
+
* The inner controls carry `form=""`, so the host is the only element the form
|
|
392
|
+
* sees. Enter pressed in an inner `<input>` of any type but `file`, `button`,
|
|
393
|
+
* `submit`, `reset` and `image` submits the field's form through
|
|
394
|
+
* `_requestSubmit()`, as Enter in a native input would. It does not when a
|
|
395
|
+
* listener inside the field already called `preventDefault()` on the keydown,
|
|
396
|
+
* while an input method is composing, or when the input is still associated
|
|
397
|
+
* with the form itself and so submits on its own.
|
|
247
398
|
*/
|
|
248
399
|
declare class Field extends ParsedElement {
|
|
249
400
|
#private;
|
|
250
401
|
static formAssociated: boolean;
|
|
251
402
|
/**
|
|
252
|
-
* The claim attributes and the value
|
|
253
|
-
* including
|
|
254
|
-
*
|
|
255
|
-
*
|
|
256
|
-
*
|
|
257
|
-
*
|
|
258
|
-
* `value:csv`, `value:json`).
|
|
403
|
+
* The claim attributes and the value, observed so that every field,
|
|
404
|
+
* including a custom one that never lists them, keeps them live after the
|
|
405
|
+
* upgrade. A subclass's own `static observed` adds to this list. The value
|
|
406
|
+
* is read with the string mapper; a field with another vocabulary redeclares
|
|
407
|
+
* it with its own (`value:bool`, `value:csv`, `value:json`).
|
|
408
|
+
* @type {string[]}
|
|
259
409
|
*/
|
|
260
410
|
static observed: string[];
|
|
261
|
-
/**
|
|
411
|
+
/**
|
|
412
|
+
* The role set on the element internals at construction. A field whose host
|
|
413
|
+
* is the widget itself overrides it, as `RadioGroup` does with `'radiogroup'`.
|
|
414
|
+
* @type {string}
|
|
415
|
+
*/
|
|
262
416
|
static ROLE: string;
|
|
417
|
+
/** Sets the internals' role from the subclass's `static ROLE`. */
|
|
263
418
|
constructor();
|
|
264
419
|
/**
|
|
265
|
-
* Adds an element to the accessible description of the field
|
|
266
|
-
*
|
|
267
|
-
*
|
|
268
|
-
* A field takes one whenever it is offered, before its own render as
|
|
269
|
-
* readily as after: content slotted into a field is a custom element of its
|
|
270
|
-
* own and may upgrade on either side of the field it stands in, which
|
|
271
|
-
* happens in both directions in practice, a tooltip beating an async select
|
|
272
|
-
* to its render while losing to a plain input. A description handed over
|
|
273
|
-
* early waits here and is written the moment the field has somewhere to
|
|
274
|
-
* write it, so the caller never has to know the order.
|
|
420
|
+
* Adds an element to the accessible description of the field and answers
|
|
421
|
+
* whether the field took it.
|
|
275
422
|
*
|
|
276
|
-
* The
|
|
277
|
-
*
|
|
278
|
-
*
|
|
279
|
-
*
|
|
280
|
-
*
|
|
423
|
+
* The field takes a description before its own render as readily as after:
|
|
424
|
+
* one handed over early is written as soon as the field has rendered, so the
|
|
425
|
+
* caller does not need to know which of the two upgraded first. The element
|
|
426
|
+
* is given an id (`ful-described-*`) when it has none, is added once however
|
|
427
|
+
* often it is offered, and is referenced from the `aria-describedby`
|
|
428
|
+
* attribute of the `described` piece (the control by default). The
|
|
429
|
+
* descriptions come in the order they were offered, the error region always
|
|
430
|
+
* last.
|
|
281
431
|
*
|
|
282
|
-
*
|
|
283
|
-
*
|
|
284
|
-
*
|
|
432
|
+
* Pass the element that carries the words rather than a wrapper around it:
|
|
433
|
+
* a hidden element is part of a description only where it is referenced
|
|
434
|
+
* directly, so a popover that is closed until opened must be passed itself.
|
|
285
435
|
*
|
|
286
436
|
* This is the field's half of the description protocol; `describable` in
|
|
287
437
|
* `ful/descriptions.mjs` is the half the content uses to find the field.
|
|
288
|
-
* @param {HTMLElement} el
|
|
289
|
-
* @returns {boolean}
|
|
438
|
+
* @param {HTMLElement | null | undefined} el
|
|
439
|
+
* @returns {boolean} false only when `el` is missing
|
|
290
440
|
*/
|
|
291
|
-
describedBy(el: HTMLElement): boolean;
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
*
|
|
295
|
-
*
|
|
296
|
-
*
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
*
|
|
301
|
-
*
|
|
302
|
-
*
|
|
303
|
-
*
|
|
441
|
+
describedBy(el: HTMLElement | null | undefined): boolean;
|
|
442
|
+
/**
|
|
443
|
+
* Moves the focus to the `control` piece. Asked before the render, the
|
|
444
|
+
* request is kept (the last one wins) and applied once the control is
|
|
445
|
+
* mounted.
|
|
446
|
+
* @param {FocusOptions} [options]
|
|
447
|
+
*/
|
|
448
|
+
focus(options?: FocusOptions): void;
|
|
449
|
+
/**
|
|
450
|
+
* Clears or reports one validation problem. A message sets a custom error on
|
|
451
|
+
* the element internals, which makes the host match `:invalid`, renders the
|
|
452
|
+
* message into the `error` piece and sets `aria-invalid="true"` on the
|
|
453
|
+
* `announces` piece, or on the `control` when the field announces nowhere.
|
|
454
|
+
* An empty or missing message clears all three.
|
|
455
|
+
*
|
|
456
|
+
* Validation is the server's: the submit is sent regardless, and the form's
|
|
457
|
+
* error mapping calls this with the problems that come back. It calls the
|
|
458
|
+
* field with the most specific name a problem's context reaches and passes
|
|
459
|
+
* the rest of the path as `context`. The base ignores `context`; a composite
|
|
460
|
+
* field owning a whole subtree overrides this to route the message to the
|
|
461
|
+
* inner control the path names.
|
|
462
|
+
*
|
|
463
|
+
* Needs the render: before it there is no error region to write to.
|
|
464
|
+
* @param {string} [error] the message, empty or missing to clear
|
|
465
|
+
* @param {string} [context] the path below this field's name, '' on an exact match
|
|
304
466
|
*/
|
|
305
467
|
setCustomValidity(error?: string, context?: string): void;
|
|
306
|
-
/**
|
|
468
|
+
/**
|
|
469
|
+
* The form the platform associated the field with, as a native control's
|
|
470
|
+
* own `form`.
|
|
471
|
+
* @returns {HTMLFormElement | null} null outside a form
|
|
472
|
+
*/
|
|
307
473
|
get form(): HTMLFormElement | null;
|
|
308
|
-
/**
|
|
474
|
+
/**
|
|
475
|
+
* Submits the associated form with `requestSubmit`, so constraint validation
|
|
476
|
+
* and the `submit` event run as for a user's submit. The submitter is the
|
|
477
|
+
* first enabled `button` or `input` of type `submit` in the form whose own
|
|
478
|
+
* `form` is that form; with none the form is submitted without one. Does
|
|
479
|
+
* nothing outside a form.
|
|
480
|
+
*/
|
|
309
481
|
_requestSubmit(): void;
|
|
310
482
|
/**
|
|
311
|
-
* Dispatches the field's change event: bubbling, not
|
|
312
|
-
*
|
|
313
|
-
*
|
|
314
|
-
*
|
|
315
|
-
*
|
|
316
|
-
*
|
|
483
|
+
* Dispatches the field's `change` event on the host: bubbling, not
|
|
484
|
+
* cancelable, with `{ value: this.value, ...extras }` as the detail. Call it
|
|
485
|
+
* for a change the user made. Every field in the library announces through this method and
|
|
486
|
+
* passes no `value` key in `extras`, so a listener can rely on
|
|
487
|
+
* `el.value === evt.detail.value`. The extras are spread after `value`, so a
|
|
488
|
+
* `value` key among them would replace it.
|
|
489
|
+
* @param {Record<string, any>} [extras] further detail keys beside `value`
|
|
317
490
|
*/
|
|
318
491
|
_notifyChange(extras?: Record<string, any>): void;
|
|
319
492
|
/**
|
|
320
|
-
* Whether the field's chrome should
|
|
321
|
-
* menus and labels are not form controls, so
|
|
322
|
-
*
|
|
323
|
-
* disabled
|
|
324
|
-
*
|
|
493
|
+
* Whether the field's own chrome should act on a gesture. Badges, dropzones,
|
|
494
|
+
* menus and labels are not form controls, so the platform does not disable
|
|
495
|
+
* them: every handler on them asks this first. False while the host matches
|
|
496
|
+
* `:disabled`, which covers a disabled `<fieldset>` ancestry as well as the
|
|
497
|
+
* claim, or while the readonly claim holds.
|
|
498
|
+
* @returns {boolean}
|
|
325
499
|
*/
|
|
326
500
|
_interactive(): boolean;
|
|
327
501
|
/**
|
|
328
|
-
* The field's value
|
|
329
|
-
*
|
|
330
|
-
*
|
|
331
|
-
*
|
|
502
|
+
* The field's value, `null` when empty. Every concrete field overrides the
|
|
503
|
+
* pair with its own semantics; the form extraction, `values =` assignment,
|
|
504
|
+
* the `change` detail and `formResetCallback` all go through it. The base
|
|
505
|
+
* pair reads `undefined` and ignores writes.
|
|
332
506
|
* @type {any}
|
|
333
507
|
*/
|
|
334
508
|
get value(): any;
|
|
335
509
|
set value(v: any);
|
|
336
510
|
/**
|
|
337
|
-
*
|
|
338
|
-
*
|
|
339
|
-
* element's own mapper and value setter
|
|
340
|
-
*
|
|
511
|
+
* Restores the declared value on a form reset, as a native control restores
|
|
512
|
+
* its markup default: the current `value` attribute is decoded with the
|
|
513
|
+
* element's own mapper and written through the `value` setter. A field whose
|
|
514
|
+
* value is not attribute backed overrides this.
|
|
341
515
|
*/
|
|
342
516
|
formResetCallback(): void;
|
|
343
517
|
/**
|
|
344
|
-
* The
|
|
518
|
+
* The field's own disabled claim, which follows a native form control:
|
|
345
519
|
*
|
|
346
|
-
* - the `disabled` attribute on the host is the
|
|
347
|
-
*
|
|
348
|
-
*
|
|
349
|
-
*
|
|
350
|
-
*
|
|
351
|
-
*
|
|
352
|
-
*
|
|
353
|
-
*
|
|
354
|
-
*
|
|
355
|
-
*
|
|
356
|
-
* -
|
|
357
|
-
*
|
|
358
|
-
*
|
|
359
|
-
*
|
|
360
|
-
*
|
|
361
|
-
*
|
|
362
|
-
* composes the two on its own when it disables and re-enables a fieldset's
|
|
363
|
-
* descendants. Subclass setters call super for the claim, then reach their
|
|
364
|
-
* own controls, which mirror the claim like a native input's would.
|
|
365
|
-
*
|
|
366
|
-
* Because of this, formDisabledCallback carries nothing the framework needs
|
|
367
|
-
* to apply, and the protocol does not define it.
|
|
520
|
+
* - the `disabled` attribute on the host is the claim. Only the author writes
|
|
521
|
+
* or removes it, in markup or through this property; the library never
|
|
522
|
+
* claims on a form's or fieldset's behalf. A field declared disabled inside
|
|
523
|
+
* a disabled `<fieldset>` stays disabled when the fieldset is re-enabled.
|
|
524
|
+
* - the effective state is the claim or a disabled `<fieldset>` ancestry:
|
|
525
|
+
* `:disabled` matches both, and a disabled field is left out of the
|
|
526
|
+
* submitted values.
|
|
527
|
+
* - the property reads the claim only: a field disabled by its ancestry reads
|
|
528
|
+
* `false` while `matches(':disabled')` is true. Removing the claim inside a
|
|
529
|
+
* disabled fieldset does not enable the field.
|
|
530
|
+
* - writing it sets or removes the `disabled` attribute on the `claims`
|
|
531
|
+
* piece (the control by default) and on every `also` control. The
|
|
532
|
+
* ancestry is never written anywhere: the browser disables those controls
|
|
533
|
+
* as descendants of the fieldset. A subclass setter calls super, then
|
|
534
|
+
* reaches any further controls of its own.
|
|
535
|
+
* @type {boolean}
|
|
368
536
|
*/
|
|
369
537
|
get disabled(): boolean;
|
|
370
538
|
set disabled(d: boolean);
|
|
371
539
|
/**
|
|
372
|
-
*
|
|
373
|
-
*
|
|
374
|
-
*
|
|
375
|
-
*
|
|
376
|
-
*
|
|
540
|
+
* The readonly claim, read from the host attribute. Writing it sets
|
|
541
|
+
* `readOnly` on the `claims` piece (the control by default) and on every
|
|
542
|
+
* `also` control, sets `aria-readonly` on the `announces` piece, and
|
|
543
|
+
* reflects the attribute. A text control stays focusable and selectable
|
|
544
|
+
* with only editing off. A field whose control has no usable native
|
|
545
|
+
* `readOnly` names a `freeze` piece, whose clicks are cancelled while the
|
|
546
|
+
* claim holds.
|
|
547
|
+
* @type {boolean}
|
|
377
548
|
*/
|
|
378
549
|
get readonly(): boolean;
|
|
379
550
|
set readonly(v: boolean);
|
|
380
551
|
/**
|
|
381
|
-
*
|
|
382
|
-
*
|
|
552
|
+
* The required claim, read from the host attribute. Writing it sets
|
|
553
|
+
* `aria-required` on the `announces` piece and reflects the attribute; no
|
|
554
|
+
* native `required` is set, since validation is the server's.
|
|
555
|
+
* @type {boolean}
|
|
383
556
|
*/
|
|
384
557
|
get required(): boolean;
|
|
385
558
|
set required(d: boolean);
|
|
386
559
|
/**
|
|
387
|
-
*
|
|
388
|
-
*
|
|
389
|
-
*
|
|
390
|
-
*
|
|
391
|
-
*
|
|
560
|
+
* Calls `_build(conf)` and wires the pieces it answers. When `_build`
|
|
561
|
+
* returns a promise the pieces are wired once it settles; a field that
|
|
562
|
+
* builds synchronously renders synchronously.
|
|
563
|
+
* @param {{ slots: Record<string, DocumentFragment> | undefined }} conf
|
|
564
|
+
* @returns {void | Promise<void>}
|
|
392
565
|
*/
|
|
393
|
-
render(conf:
|
|
566
|
+
render(conf: {
|
|
567
|
+
slots: Record<string, DocumentFragment> | undefined;
|
|
568
|
+
}): void | Promise<void>;
|
|
394
569
|
/**
|
|
395
|
-
* Builds the field's dom and answers the pieces the base drives
|
|
396
|
-
* method a concrete field implements beside its
|
|
397
|
-
* place its dom is created
|
|
398
|
-
*
|
|
399
|
-
*
|
|
400
|
-
* - `control` is the focusable target: focus, the aria and, by default, all
|
|
401
|
-
* three claims reach it
|
|
402
|
-
* - `error` is the field's live region
|
|
403
|
-
* - `label`, when given, names the control and focuses it on click
|
|
404
|
-
* - `described` moves the description off the control and onto another
|
|
405
|
-
* element, the host where no single control can carry it: the error
|
|
406
|
-
* region and anything `describedBy` is later handed both land there
|
|
407
|
-
* - `claims` moves the three claims onto a wrapper the field disables as a
|
|
408
|
-
* whole, leaving focus and aria on the control
|
|
409
|
-
* - `announces` is the element whose role carries `aria-readonly` and
|
|
410
|
-
* `aria-required`, the host where the widget role lives there; `null` for a
|
|
411
|
-
* field whose control has no role that accepts them
|
|
412
|
-
* - `freeze` is for a field with no usable native readOnly: the readonly
|
|
413
|
-
* claim refuses the gestures inside it, leaving it focusable and readable
|
|
414
|
-
* - `also` are further controls mirroring disabled and readOnly beside the
|
|
415
|
-
* first
|
|
570
|
+
* Builds the field's dom and answers the pieces the base drives, or a
|
|
571
|
+
* promise of them. The one method a concrete field implements beside its
|
|
572
|
+
* value pair, and the only place its dom is created. A subclass extending
|
|
573
|
+
* another field's build spreads the pieces it answered and overrides the
|
|
574
|
+
* keys it owns.
|
|
416
575
|
*
|
|
417
|
-
*
|
|
418
|
-
*
|
|
419
|
-
*
|
|
420
|
-
*
|
|
576
|
+
* - `fragment` (required) replaces the host's children.
|
|
577
|
+
* - `control` (required) is the focus target of `focus()`. By default it also
|
|
578
|
+
* carries the description, `aria-invalid`, `aria-readonly`,
|
|
579
|
+
* `aria-required`, and the mirrored `disabled` and `readOnly`.
|
|
580
|
+
* - `error` (required) is the live region `setCustomValidity` writes into.
|
|
581
|
+
* It is given an id (`ful-field-error-*`) when it has none and is always
|
|
582
|
+
* the last entry of the description.
|
|
583
|
+
* - `label` names the control. For a labelable control (`button`, `input`
|
|
584
|
+
* other than hidden, `meter`, `output`, `progress`, `select`, `textarea`)
|
|
585
|
+
* the control is given an id when it has none and the label's `for`
|
|
586
|
+
* points at it, so a click on the label does what it does in a plain
|
|
587
|
+
* form. For any other control the label is given an id, the control's
|
|
588
|
+
* `aria-labelledby` points at it, and a click on the label calls `focus()`.
|
|
589
|
+
* - `described` carries `aria-describedby` in place of the control: the
|
|
590
|
+
* host, for a field with no single control to describe.
|
|
591
|
+
* - `claims` receives the mirrored `disabled` and `readOnly` in place of the
|
|
592
|
+
* control, for a wrapper such as a `<fieldset>` the field disables as a
|
|
593
|
+
* whole. Focus and the aria stay on the control.
|
|
594
|
+
* - `announces` carries `aria-readonly`, `aria-required` and `aria-invalid`
|
|
595
|
+
* in place of the control: the host, where the widget role lives there.
|
|
596
|
+
* `null` for a field whose control has no role that accepts
|
|
597
|
+
* `aria-readonly` and `aria-required`; `aria-invalid` then goes on the
|
|
598
|
+
* control.
|
|
599
|
+
* - `freeze` is for a field with no usable native `readOnly`: a capturing
|
|
600
|
+
* click listener on it cancels the default action of every click inside
|
|
601
|
+
* it while the readonly claim holds. It stays focusable and in the
|
|
602
|
+
* accessibility tree.
|
|
603
|
+
* - `also` are further controls that mirror `disabled` and `readOnly`
|
|
604
|
+
* beside the claim target.
|
|
605
|
+
* @param {{ slots: Record<string, DocumentFragment> | undefined }} conf
|
|
606
|
+
* @returns {any} the pieces, or a promise of them
|
|
607
|
+
* @throws {Error} when the subclass does not implement it
|
|
421
608
|
*/
|
|
422
609
|
_build(conf: {
|
|
423
|
-
slots:
|
|
610
|
+
slots: Record<string, DocumentFragment> | undefined;
|
|
424
611
|
}): any;
|
|
425
612
|
}
|
|
426
|
-
/**
|
|
613
|
+
/** Sends a form's request as a json body to a url, mapping the request and the response through the configured mappers. */
|
|
427
614
|
declare class RemoteJsonFormLoader {
|
|
428
615
|
#private;
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
616
|
+
/**
|
|
617
|
+
* @param {{ request(method: string, url: string): { json(body: any): { fetch(): Promise<any> } } }} http the `http-client` component
|
|
618
|
+
* @param {string} url
|
|
619
|
+
* @param {string} method
|
|
620
|
+
* @param {(value: any, form: Form) => any} requestMapper
|
|
621
|
+
* @param {(value: any, form: Form) => any} responseMapper
|
|
622
|
+
*/
|
|
623
|
+
constructor(http: {
|
|
624
|
+
request(method: string, url: string): {
|
|
625
|
+
json(body: any): {
|
|
626
|
+
fetch(): Promise<any>;
|
|
627
|
+
};
|
|
628
|
+
};
|
|
629
|
+
}, url: string, method: string, requestMapper: (value: any, form: Form) => any, responseMapper: (value: any, form: Form) => any);
|
|
630
|
+
/**
|
|
631
|
+
* @param {any} values
|
|
632
|
+
* @param {Form} form
|
|
633
|
+
* @returns {any} what the request mapper returns
|
|
634
|
+
*/
|
|
635
|
+
prepare(values: any, form: Form): any;
|
|
636
|
+
/**
|
|
637
|
+
* @param {any} request
|
|
638
|
+
* @param {Form} form
|
|
639
|
+
* @returns {Promise<any>} what the client's `fetch()` resolves to: with the
|
|
640
|
+
* library's client, the `Response` of a 2xx status, rejecting with an
|
|
641
|
+
* `HttpClientError` (a `Failure`) otherwise
|
|
642
|
+
*/
|
|
643
|
+
submit(request: any, form: Form): Promise<any>;
|
|
644
|
+
/**
|
|
645
|
+
* @param {any} response
|
|
646
|
+
* @param {Form} form
|
|
647
|
+
* @returns {any} what the response mapper returns
|
|
648
|
+
*/
|
|
649
|
+
transform(response: any, form: Form): any;
|
|
433
650
|
}
|
|
434
651
|
/** Submits a form without a request: the request mapper produces the result the response mapper then reads, for a form handled entirely on the page. */
|
|
435
652
|
declare class LocalFormLoader {
|
|
436
653
|
#private;
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
654
|
+
/**
|
|
655
|
+
* @param {(value: any, form: Form) => any} requestMapper
|
|
656
|
+
* @param {(value: any, form: Form) => any} responseMapper
|
|
657
|
+
*/
|
|
658
|
+
constructor(requestMapper: (value: any, form: Form) => any, responseMapper: (value: any, form: Form) => any);
|
|
659
|
+
/**
|
|
660
|
+
* @param {any} values
|
|
661
|
+
* @param {Form} form
|
|
662
|
+
* @returns {Promise<any>} what the request mapper returns or resolves to
|
|
663
|
+
*/
|
|
664
|
+
prepare(values: any, form: Form): Promise<any>;
|
|
665
|
+
/**
|
|
666
|
+
* Sends nothing.
|
|
667
|
+
* @param {any} request
|
|
668
|
+
* @param {Form} form
|
|
669
|
+
* @param {any} response what a `submit:requested` listener answered
|
|
670
|
+
* @returns {Promise<any>} `response`, unchanged
|
|
671
|
+
*/
|
|
672
|
+
submit(request: any, form: Form, response: any): Promise<any>;
|
|
673
|
+
/**
|
|
674
|
+
* @param {any} response
|
|
675
|
+
* @param {Form} form
|
|
676
|
+
* @returns {Promise<any>} what the response mapper returns or resolves to
|
|
677
|
+
*/
|
|
678
|
+
transform(response: any, form: Form): Promise<any>;
|
|
441
679
|
}
|
|
442
680
|
/**
|
|
443
681
|
* Builds the form's loader from its attributes: a local one when no action is
|
|
@@ -450,121 +688,389 @@ declare class LocalFormLoader {
|
|
|
450
688
|
* - `submit(request, form, response)` performs it and returns the response. The
|
|
451
689
|
* third argument is whatever a `submit:requested` listener already answered,
|
|
452
690
|
* which is how a loader with nothing to send returns it unchanged
|
|
453
|
-
* - `transform(response, form)` turns that response into the
|
|
454
|
-
* `submit:success`
|
|
691
|
+
* - `transform(response, form)` turns that response into the `response` of the
|
|
692
|
+
* `submit:success` detail
|
|
455
693
|
*
|
|
456
694
|
* A rejection from any of the three is reported as a `submit:failure`.
|
|
457
695
|
*/
|
|
458
696
|
declare class FormLoader {
|
|
459
|
-
|
|
697
|
+
/**
|
|
698
|
+
* The `request-mapper` and `response-mapper` attributes name registry
|
|
699
|
+
* components called as `(value, form)`; each defaults to the identity. A
|
|
700
|
+
* remote loader sends through the `http-client` component, with the
|
|
701
|
+
* `method` attribute or `POST`.
|
|
702
|
+
* @param {Form} el the form submitting
|
|
703
|
+
* @param {unknown} [conf] not read
|
|
704
|
+
* @returns {LocalFormLoader | RemoteJsonFormLoader}
|
|
705
|
+
*/
|
|
706
|
+
static create(el: Form, conf?: unknown): LocalFormLoader | RemoteJsonFormLoader;
|
|
460
707
|
}
|
|
461
708
|
/**
|
|
462
|
-
*
|
|
463
|
-
* them to a loader
|
|
464
|
-
*
|
|
709
|
+
* Moves its children into a native `<form novalidate>`, extracts their values
|
|
710
|
+
* on submit and hands them to a loader, reporting problems through `errors`.
|
|
711
|
+
* Being `novalidate`, the form submits whatever the validity of its fields:
|
|
712
|
+
* the browser does not block a submit on a field still marked invalid.
|
|
713
|
+
*
|
|
714
|
+
* Attributes on the host starting with `form-` are forwarded, without the
|
|
715
|
+
* prefix, to the native form. `autocomplete` is copied onto the native form as
|
|
716
|
+
* well and stays on the host, the fields reading it from either.
|
|
717
|
+
* `clear-invalid-on-change` clears the custom validity of a field of this form
|
|
718
|
+
* when a `change` event bubbles from it; the field's form is read from its
|
|
719
|
+
* `form` property, or from `internals.form` for a form-associated element
|
|
720
|
+
* that has none. `scroll-on-error` is passed to `Bindings.errors` as
|
|
721
|
+
* `scrollOnError`.
|
|
722
|
+
*
|
|
723
|
+
* A native submit, by a button or by Enter in a field, is stopped and runs
|
|
724
|
+
* `submit` instead.
|
|
465
725
|
*/
|
|
466
726
|
declare class Form extends ParsedElement {
|
|
467
727
|
#private;
|
|
728
|
+
/** Read once at the upgrade: changing one afterwards has no effect. */
|
|
468
729
|
static attributes: string[];
|
|
730
|
+
/** The native form holding the fields, created by the render. */
|
|
469
731
|
form: any;
|
|
732
|
+
/** Builds the native form and moves the element's children into it. */
|
|
470
733
|
render(): void;
|
|
471
734
|
/**
|
|
472
|
-
*
|
|
473
|
-
*
|
|
474
|
-
*
|
|
475
|
-
*
|
|
476
|
-
*
|
|
477
|
-
*
|
|
735
|
+
* Runs the submit pipeline, with the spinner up for its whole length:
|
|
736
|
+
*
|
|
737
|
+
* 1. builds the loader: the component the `loader` attribute names
|
|
738
|
+
* (`loaders:form` by default), called as `create(form)`
|
|
739
|
+
* 2. extracts the values with `Bindings.extractFrom` and has the loader
|
|
740
|
+
* `prepare` them into the request
|
|
741
|
+
* 3. fires a cancelable `submit` with `{ submitter, values, request }`.
|
|
742
|
+
* Cancelling it ends the submit there, reporting nothing and leaving the
|
|
743
|
+
* problems shown; a listener may replace `values` or `request` on the detail
|
|
744
|
+
* 4. clears the problems shown
|
|
745
|
+
* 5. fires `submit:requested` through `AsyncEvents.fireAsync` in `pipeline`
|
|
746
|
+
* mode: at most one async listener, whose answer is handed to the
|
|
747
|
+
* loader's `submit` as its third argument. A listener may replace
|
|
748
|
+
* `request` on the detail
|
|
749
|
+
* 6. has the loader `submit` the request and `transform` the response
|
|
750
|
+
* 7. fires `submit:success` with `{ submitter, values, request, response }`,
|
|
751
|
+
* `response` being the transformed one
|
|
752
|
+
*
|
|
753
|
+
* Anything thrown from step 1 on, a missing loader or a throwing mapper
|
|
754
|
+
* included, fires `submit:failure` with `{ submitter, values, request,
|
|
755
|
+
* exception }` instead; the returned promise does not reject. A `Failure`
|
|
756
|
+
* has its problems shown through `errors`, anything else is logged with
|
|
757
|
+
* `console.warn`. The `values` of both outcome events are the extracted
|
|
758
|
+
* ones, not a replacement a `submit` listener put on its detail.
|
|
759
|
+
*
|
|
760
|
+
* A call while a submit is in flight returns at once, doing nothing.
|
|
761
|
+
* @param {HTMLElement} [submitter] the button that submitted, if any; it is
|
|
762
|
+
* the only button whose name and value are submitted
|
|
763
|
+
* @returns {Promise<void>} settling once the submit has finished, whatever its outcome
|
|
478
764
|
*/
|
|
479
765
|
submit(submitter?: HTMLElement): Promise<void>;
|
|
480
|
-
/**
|
|
766
|
+
/** Resets the native form, each field returning to its default value. */
|
|
481
767
|
reset(): void;
|
|
482
|
-
/**
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
768
|
+
/**
|
|
769
|
+
* Marks the form busy or releases it. Calls nest: only the first
|
|
770
|
+
* `spinner(true)` and the matching last `spinner(false)` act, so a caller's
|
|
771
|
+
* own spin may wrap a submit.
|
|
772
|
+
*
|
|
773
|
+
* Busy, the host carries `aria-busy="true"` and each `ful-spinner` of this
|
|
774
|
+
* form is revealed; one without text of its own is given `role="status"`
|
|
775
|
+
* (unless it has a role) and a visually hidden localized `spinner.loading`
|
|
776
|
+
* label. Each submit and reset button of this form is held off with
|
|
777
|
+
* `aria-disabled="true"`, keeping its focus, and a click on it is refused
|
|
778
|
+
* ahead of any listener on the button. Holding the buttons off does not
|
|
779
|
+
* stop a programmatic `submit`.
|
|
780
|
+
*
|
|
781
|
+
* Released, the spinners are hidden and lose the label they were given, and
|
|
782
|
+
* each held button gets back the `aria-disabled` it had. A button that
|
|
783
|
+
* joined the form while it was busy keeps its own state.
|
|
784
|
+
* @param {boolean} spin
|
|
785
|
+
*/
|
|
786
|
+
spinner(spin: boolean): void;
|
|
787
|
+
/**
|
|
788
|
+
* Writes a nested object onto the fields of this form through
|
|
789
|
+
* `Bindings.mutateIn`: fields the object does not name keep their values.
|
|
790
|
+
* @param {{ [x: string]: any; }} vs
|
|
791
|
+
*/
|
|
792
|
+
set values(vs: {
|
|
793
|
+
[x: string]: any;
|
|
794
|
+
});
|
|
795
|
+
/**
|
|
796
|
+
* The fields of this form read into a nested object by
|
|
797
|
+
* `Bindings.extractFrom`, with no submitter, so no button contributes.
|
|
798
|
+
* @returns {any}
|
|
799
|
+
*/
|
|
800
|
+
get values(): any;
|
|
801
|
+
/**
|
|
802
|
+
* Shows problems through `Bindings.errors`, replacing the ones shown
|
|
803
|
+
* before: each is pinned to the field it names, and the rest go to the
|
|
804
|
+
* form's `ful-errors` banners. An empty array clears them.
|
|
805
|
+
* @param {{ type: string; context?: string | null; reason: string; }[]} es
|
|
806
|
+
*/
|
|
807
|
+
set errors(es: {
|
|
808
|
+
type: string;
|
|
809
|
+
context?: string | null;
|
|
810
|
+
reason: string;
|
|
811
|
+
}[]);
|
|
489
812
|
}
|
|
490
|
-
/**
|
|
813
|
+
/**
|
|
814
|
+
* A labelled text input over any native input type, or a `<textarea>` under
|
|
815
|
+
* `type="textarea"`; the temporal inputs are its subclasses. The label is the
|
|
816
|
+
* default slot, `info` follows it, and `before` and `after` are rendered as
|
|
817
|
+
* affixes around the control. Every `input-*` attribute is forwarded onto the
|
|
818
|
+
* control, after everything the field sets there, so it has the last word.
|
|
819
|
+
*
|
|
820
|
+
* `type`, `v-type`, `keep`, `reject`, `uppercase`, `trim`, `unsigned` and
|
|
821
|
+
* `autocomplete` are configuration: read once at the upgrade, so a later write
|
|
822
|
+
* to them changes nothing. `placeholder` stays live.
|
|
823
|
+
*
|
|
824
|
+
* - `type="numeric"` and `type="decimal"` render a text input carrying that
|
|
825
|
+
* `inputmode`, so the native `min`, `max` and `step` do not apply. Typing is
|
|
826
|
+
* filtered to digits and a leading minus; a decimal also keeps its first `.`
|
|
827
|
+
* or `,` and drops any later one; `unsigned` drops the minus.
|
|
828
|
+
* - `keep` and `reject` are regular expressions filtering what is typed:
|
|
829
|
+
* `keep` leaves every match, concatenated, and `reject` removes every match.
|
|
830
|
+
* Either replaces the type's own filter, and `keep` wins over `reject` with a
|
|
831
|
+
* warning. A pattern that does not compile is warned about once and filters
|
|
832
|
+
* nothing. The caret stays next to the same character when text before it
|
|
833
|
+
* is removed.
|
|
834
|
+
* - `autocomplete` is put on the control. Without one the field takes the
|
|
835
|
+
* `autocomplete` attribute of the nearest enclosing `<form>`, which the
|
|
836
|
+
* platform does not pass on because the control carries `form=""`.
|
|
837
|
+
* - `uppercase`, `trim` and `v-type` shape the value as it is read; see `value`.
|
|
838
|
+
*
|
|
839
|
+
* The control's native `change` is stopped and republished as the field's own.
|
|
840
|
+
*
|
|
841
|
+
* A subclass template may render more than one control, as the compare filters
|
|
842
|
+
* render the two bounds of a range: the first is `_input`, the one the field is
|
|
843
|
+
* named by and whose `change` it republishes, and every one of them gets the
|
|
844
|
+
* inputmode, `autocomplete`, the `input-` passthrough, the keystroke filter and
|
|
845
|
+
* the placeholder. The passthrough leaves `input-id` to the first alone, so no
|
|
846
|
+
* two controls share an id.
|
|
847
|
+
*/
|
|
491
848
|
declare class Input extends Field {
|
|
849
|
+
#private;
|
|
850
|
+
/** @type {string[]} */
|
|
492
851
|
static observed: string[];
|
|
852
|
+
/** @type {string[]} */
|
|
493
853
|
static attributes: string[];
|
|
494
854
|
static slots: boolean;
|
|
495
855
|
static template: string;
|
|
856
|
+
/**
|
|
857
|
+
* The inner control, set by `_build`: the `<input>`, or the `<textarea>`
|
|
858
|
+
* under `type="textarea"`. A subclass reads and writes it for the
|
|
859
|
+
* attributes it adds. Typed `any` so that a subclass can treat it as the
|
|
860
|
+
* one of the two it renders.
|
|
861
|
+
* @type {any}
|
|
862
|
+
*/
|
|
496
863
|
_input: any;
|
|
497
|
-
|
|
864
|
+
/**
|
|
865
|
+
* The type the field renders, which a subclass overrides to wrap another
|
|
866
|
+
* native type. The base answers the declared `type`, else `number` under
|
|
867
|
+
* `v-type="number"`, else `text`. It is also what selects the keystroke
|
|
868
|
+
* filter of `numeric` and `decimal` and the separator handling of `value`.
|
|
869
|
+
* @returns {string}
|
|
870
|
+
*/
|
|
871
|
+
_type(): string;
|
|
872
|
+
/**
|
|
873
|
+
* @param {{ slots: Record<string, DocumentFragment> | undefined }} conf
|
|
874
|
+
* @returns {{fragment: DocumentFragment, control: any, error: Element | null, label: HTMLLabelElement | null}}
|
|
875
|
+
*/
|
|
498
876
|
_build({ slots }: {
|
|
499
|
-
slots:
|
|
877
|
+
slots: Record<string, DocumentFragment> | undefined;
|
|
500
878
|
}): {
|
|
501
|
-
fragment:
|
|
879
|
+
fragment: DocumentFragment;
|
|
502
880
|
control: any;
|
|
503
|
-
error:
|
|
504
|
-
label:
|
|
881
|
+
error: Element | null;
|
|
882
|
+
label: HTMLLabelElement | null;
|
|
505
883
|
};
|
|
884
|
+
/**
|
|
885
|
+
* The control's text, shaped in this order: upper cased under `uppercase`,
|
|
886
|
+
* trimmed under `trim`, `null` when that leaves it empty, every `,` read as
|
|
887
|
+
* `.` for `type="decimal"`, and decoded to a number under
|
|
888
|
+
* `v-type="number"`, where text that does not decode is answered as it is.
|
|
889
|
+
* Writing `null`, `undefined` or `''` empties the control; anything else is
|
|
890
|
+
* written as its string. Answers a `string`, a `number` or `null`; typed
|
|
891
|
+
* `any` because subclasses answer other values.
|
|
892
|
+
* @type {any}
|
|
893
|
+
*/
|
|
506
894
|
get value(): any;
|
|
507
895
|
set value(value: any);
|
|
508
|
-
|
|
509
|
-
|
|
896
|
+
/**
|
|
897
|
+
* The control's placeholder, `null` when there is none. The control always
|
|
898
|
+
* carries one, a single space standing in for none, so `:placeholder-shown`
|
|
899
|
+
* matches an empty control and a floating label can rely on it; the blank
|
|
900
|
+
* one is neither answered here nor reflected onto the host.
|
|
901
|
+
* @type {string | null}
|
|
902
|
+
*/
|
|
903
|
+
get placeholder(): string | null;
|
|
904
|
+
set placeholder(d: string | null);
|
|
510
905
|
}
|
|
511
|
-
/**
|
|
906
|
+
/**
|
|
907
|
+
* Formats the yyyy-mm-dd date in its content as a numeric date, in the locale
|
|
908
|
+
* its `locale` attribute names, else the page's, else the platform default.
|
|
909
|
+
* Blank content, or content that does not name a date, renders the `default`
|
|
910
|
+
* attribute, or nothing without one.
|
|
911
|
+
*/
|
|
512
912
|
declare class LocalDate extends ParsedElement {
|
|
513
913
|
static attributes: string[];
|
|
514
914
|
render(): void;
|
|
515
915
|
}
|
|
516
|
-
/**
|
|
916
|
+
/**
|
|
917
|
+
* Formats the ISO instant in its content as a numeric date and 24 hour time
|
|
918
|
+
* with seconds, in the page's timezone and in the locale chosen as ful-local-date
|
|
919
|
+
* chooses it. Blank content, or content that does not name an instant, renders
|
|
920
|
+
* the `default` attribute, or nothing without one. A date-only value is read as
|
|
921
|
+
* local midnight of that day.
|
|
922
|
+
*/
|
|
517
923
|
declare class Instant extends ParsedElement {
|
|
518
924
|
#private;
|
|
519
925
|
static attributes: string[];
|
|
520
926
|
render(): void;
|
|
521
|
-
|
|
522
|
-
|
|
927
|
+
/**
|
|
928
|
+
* Converts an ISO instant to the `yyyy-mm-ddThh:mm:ss.sss` wall clock time
|
|
929
|
+
* a datetime-local input takes, in the page's timezone. A date-only value is
|
|
930
|
+
* read as local midnight of the day it names, not as UTC midnight.
|
|
931
|
+
* @param {string} iso
|
|
932
|
+
* @returns {string} with NaN fields for a value that does not parse
|
|
933
|
+
*/
|
|
934
|
+
static isoToLocal(iso: string): string;
|
|
935
|
+
/**
|
|
936
|
+
* Converts a datetime-local wall clock time in the page's timezone to a UTC
|
|
937
|
+
* ISO instant. A date-only value is read as local midnight of that day.
|
|
938
|
+
* @param {string} local
|
|
939
|
+
* @returns {string|null} null for a value that does not parse
|
|
940
|
+
*/
|
|
941
|
+
static localToIso(local: string): string | null;
|
|
523
942
|
}
|
|
524
|
-
/**
|
|
943
|
+
/**
|
|
944
|
+
* A date input whose `min` and `max` accept a yyyy-mm-dd date, `now` for
|
|
945
|
+
* today, or an offset from today such as `+1d`, `-2m` or `+1y` (days, months,
|
|
946
|
+
* years). A month offset landing past the end of the target month takes its
|
|
947
|
+
* last day. Anything else is passed to the input unchanged. The `step`
|
|
948
|
+
* attribute is applied before `min` and `max`.
|
|
949
|
+
*/
|
|
525
950
|
declare class InputLocalDate extends Input {
|
|
526
951
|
#private;
|
|
527
952
|
static observed: string[];
|
|
528
953
|
_type(): string;
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
get
|
|
534
|
-
|
|
954
|
+
/**
|
|
955
|
+
* The resolved lower bound, a yyyy-mm-dd date or whatever the input was given.
|
|
956
|
+
* @returns {string|null} null when unset
|
|
957
|
+
*/
|
|
958
|
+
get min(): string | null;
|
|
959
|
+
/** @param {string|null} v a date, `now` or an offset; null or blank removes the bound */
|
|
960
|
+
set min(v: string | null);
|
|
961
|
+
/**
|
|
962
|
+
* The resolved upper bound, a yyyy-mm-dd date or whatever the input was given.
|
|
963
|
+
* @returns {string|null} null when unset
|
|
964
|
+
*/
|
|
965
|
+
get max(): string | null;
|
|
966
|
+
/** @param {string|null} v a date, `now` or an offset; null or blank removes the bound */
|
|
967
|
+
set max(v: string | null);
|
|
968
|
+
/**
|
|
969
|
+
* The input's native step, in days on a date input and in seconds on a time input.
|
|
970
|
+
* @returns {string|null} null when unset
|
|
971
|
+
*/
|
|
972
|
+
get step(): string | null;
|
|
973
|
+
/** @param {string|null} v */
|
|
974
|
+
set step(v: string | null);
|
|
535
975
|
}
|
|
536
|
-
/**
|
|
976
|
+
/**
|
|
977
|
+
* A time input whose `min` and `max` accept a hh:mm time, `now`, or an offset
|
|
978
|
+
* from now such as `+2h` or `-30m` (hours, minutes: `m` is minutes here, not
|
|
979
|
+
* months), wrapping around midnight. A bound resolved from `now` or an offset
|
|
980
|
+
* is floored to the `step` grid (60 seconds when unset), so that the values
|
|
981
|
+
* on the grid stay valid, and carries seconds only when the step is not whole
|
|
982
|
+
* minutes. A literal bound, and anything else, is passed to the input unchanged.
|
|
983
|
+
*/
|
|
537
984
|
declare class InputLocalTime extends InputLocalDate {
|
|
538
985
|
#private;
|
|
539
986
|
_type(): string;
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
987
|
+
/**
|
|
988
|
+
* The resolved lower bound, a time or whatever the input was given.
|
|
989
|
+
* @returns {string|null} null when unset
|
|
990
|
+
*/
|
|
991
|
+
get min(): string | null;
|
|
992
|
+
/** @param {string|null} v a time, `now` or an offset; null or blank removes the bound */
|
|
993
|
+
set min(v: string | null);
|
|
994
|
+
/**
|
|
995
|
+
* The resolved upper bound, a time or whatever the input was given.
|
|
996
|
+
* @returns {string|null} null when unset
|
|
997
|
+
*/
|
|
998
|
+
get max(): string | null;
|
|
999
|
+
/** @param {string|null} v a time, `now` or an offset; null or blank removes the bound */
|
|
1000
|
+
set max(v: string | null);
|
|
544
1001
|
}
|
|
545
|
-
/**
|
|
1002
|
+
/**
|
|
1003
|
+
* A datetime-local input whose value and bounds are read and written as UTC
|
|
1004
|
+
* ISO instants, shown as wall clock time in the page's timezone. A date-only
|
|
1005
|
+
* value is read as local midnight of that day.
|
|
1006
|
+
*/
|
|
546
1007
|
declare class InputInstant extends Input {
|
|
547
1008
|
static observed: string[];
|
|
548
1009
|
_type(): string;
|
|
1010
|
+
/**
|
|
1011
|
+
* The entered time as a UTC ISO instant.
|
|
1012
|
+
* @returns {string|null} null when empty or when the input holds text that does not parse
|
|
1013
|
+
*/
|
|
549
1014
|
get value(): string | null;
|
|
550
|
-
|
|
1015
|
+
/** @param {string|null|undefined} v an ISO instant; a falsy value empties the input */
|
|
1016
|
+
set value(v: string | null | undefined);
|
|
1017
|
+
/**
|
|
1018
|
+
* The lower bound as a UTC ISO instant.
|
|
1019
|
+
* @returns {string|null} null when unset
|
|
1020
|
+
*/
|
|
551
1021
|
get min(): string | null;
|
|
1022
|
+
/** @param {string|null} v an ISO instant; a falsy value removes the bound */
|
|
552
1023
|
set min(v: string | null);
|
|
1024
|
+
/**
|
|
1025
|
+
* The upper bound as a UTC ISO instant.
|
|
1026
|
+
* @returns {string|null} null when unset
|
|
1027
|
+
*/
|
|
553
1028
|
get max(): string | null;
|
|
1029
|
+
/** @param {string|null} v an ISO instant; a falsy value removes the bound */
|
|
554
1030
|
set max(v: string | null);
|
|
555
|
-
|
|
556
|
-
|
|
1031
|
+
/**
|
|
1032
|
+
* The input's native step, in seconds.
|
|
1033
|
+
* @returns {string|null} null when unset
|
|
1034
|
+
*/
|
|
1035
|
+
get step(): string | null;
|
|
1036
|
+
/** @param {string|null} v */
|
|
1037
|
+
set step(v: string | null);
|
|
557
1038
|
}
|
|
558
|
-
/**
|
|
1039
|
+
/**
|
|
1040
|
+
* A file input with an optional dropzone and item list, enforcing the type,
|
|
1041
|
+
* size and count limits it declares.
|
|
1042
|
+
*
|
|
1043
|
+
* The `dropzone` and `item-list` attributes show the dropzone and the list of
|
|
1044
|
+
* chosen files. A `dropzone` slot replaces the default dropzone's content, and
|
|
1045
|
+
* an `items` slot holding a template replaces the stock item, rendered with the
|
|
1046
|
+
* same `files` overlay so that it reads the File objects it lists. Clicking the
|
|
1047
|
+
* dropzone opens the picker, and the host carries a `dragover` attribute while
|
|
1048
|
+
* a drag hovers it. A drop selects the files it carries, ignoring entries that
|
|
1049
|
+
* are not files; a drop with no file, or with several on a field that is not
|
|
1050
|
+
* `multiple`, changes nothing.
|
|
1051
|
+
*
|
|
1052
|
+
* Every selection, picked, dropped or assigned, goes through the constraints
|
|
1053
|
+
* in order: `accept` and `max-file-size` drop the files they refuse,
|
|
1054
|
+
* `max-total-size` and `max-files` clear the whole selection. Each violation
|
|
1055
|
+
* shows a warning. The change event fires for a pick, a drop and a removal
|
|
1056
|
+
* through an item's button; the `files`, `file` and `value` setters are silent,
|
|
1057
|
+
* like a native input's.
|
|
1058
|
+
*
|
|
1059
|
+
* While disabled or readonly, the picker, the dropzone and the item removals
|
|
1060
|
+
* do nothing, and a drop still does not reach the browser's default handling.
|
|
1061
|
+
*/
|
|
559
1062
|
declare class InputFile extends Input {
|
|
560
1063
|
#private;
|
|
561
|
-
/**
|
|
1064
|
+
/**
|
|
1065
|
+
* Milliseconds a warning stays before the field removes it, whether or not
|
|
1066
|
+
* its css animation ran; read each time a warning is shown.
|
|
1067
|
+
* @type {number}
|
|
1068
|
+
*/
|
|
562
1069
|
static WARNING_TIMEOUT: number;
|
|
563
1070
|
/**
|
|
564
|
-
*
|
|
565
|
-
* build one but through a DataTransfer, and every place that narrows a
|
|
566
|
-
* selection rebuilt it by hand: five loops and three empty ones.
|
|
1071
|
+
* Builds a FileList holding exactly these files, the form `files` takes.
|
|
567
1072
|
* @param {Iterable<File>} [files]
|
|
1073
|
+
* @returns {FileList}
|
|
568
1074
|
*/
|
|
569
1075
|
static list(files?: Iterable<File>): FileList;
|
|
570
1076
|
static observed: string[];
|
|
@@ -575,75 +1081,185 @@ declare class InputFile extends Input {
|
|
|
575
1081
|
warning: string;
|
|
576
1082
|
};
|
|
577
1083
|
_build(conf: any): {
|
|
578
|
-
fragment:
|
|
1084
|
+
fragment: DocumentFragment;
|
|
579
1085
|
control: any;
|
|
580
|
-
error:
|
|
581
|
-
label:
|
|
1086
|
+
error: Element | null;
|
|
1087
|
+
label: HTMLLabelElement | null;
|
|
582
1088
|
freeze: any;
|
|
583
1089
|
};
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
1090
|
+
/**
|
|
1091
|
+
* Shows a warning in the field's polite live region: the localized message
|
|
1092
|
+
* for an l10n key and its arguments. It is removed when its animation ends,
|
|
1093
|
+
* or after `WARNING_TIMEOUT` milliseconds at the latest. The warnings are
|
|
1094
|
+
* cleared whenever the selection changes.
|
|
1095
|
+
* @param {string} key
|
|
1096
|
+
* @param {Record<string, any>} [args]
|
|
1097
|
+
*/
|
|
1098
|
+
warning(key: string, args?: Record<string, any>): void;
|
|
1099
|
+
/**
|
|
1100
|
+
* The accepted types, also set on the native input for its picker. A token
|
|
1101
|
+
* is a dot-prefixed extension matched against the end of the file name, a
|
|
1102
|
+
* mime type matched against the file's type with any parameters ignored, or
|
|
1103
|
+
* a family such as `image/*`; case is ignored, and any other token matches
|
|
1104
|
+
* nothing. A file matching no token is dropped with a warning; an empty list
|
|
1105
|
+
* accepts every file. Enforced from the next selection on.
|
|
1106
|
+
* @returns {string[]}
|
|
1107
|
+
*/
|
|
1108
|
+
get accept(): string[];
|
|
1109
|
+
/** @param {string[]} vs */
|
|
1110
|
+
set accept(vs: string[]);
|
|
1111
|
+
/**
|
|
1112
|
+
* Whether the field takes several files; a single-file field ignores a drop of several.
|
|
1113
|
+
* @returns {boolean}
|
|
1114
|
+
*/
|
|
1115
|
+
get multiple(): boolean;
|
|
1116
|
+
/** @param {boolean} v */
|
|
1117
|
+
set multiple(v: boolean);
|
|
1118
|
+
/**
|
|
1119
|
+
* The selected files, after the constraints.
|
|
1120
|
+
* @returns {FileList}
|
|
1121
|
+
*/
|
|
1122
|
+
get files(): FileList;
|
|
1123
|
+
/**
|
|
1124
|
+
* Replaces the selection and runs the constraints over it, refreshing the
|
|
1125
|
+
* warnings and the item list, without firing change.
|
|
1126
|
+
* @param {FileList} vs
|
|
1127
|
+
*/
|
|
1128
|
+
set files(vs: FileList);
|
|
1129
|
+
/**
|
|
1130
|
+
* The first selected file.
|
|
1131
|
+
* @returns {File|null}
|
|
1132
|
+
*/
|
|
1133
|
+
get file(): File | null;
|
|
1134
|
+
/**
|
|
1135
|
+
* Replaces the selection with this one file, or empties it, as `files` does.
|
|
1136
|
+
* @param {File|null|undefined} v
|
|
1137
|
+
*/
|
|
1138
|
+
set file(v: File | null | undefined);
|
|
1139
|
+
/**
|
|
1140
|
+
* The names of the selected files: an array when `multiple`, otherwise the
|
|
1141
|
+
* one name or null.
|
|
1142
|
+
* @returns {string[]|string|null}
|
|
1143
|
+
*/
|
|
1144
|
+
get value(): string[] | string | null;
|
|
1145
|
+
/**
|
|
1146
|
+
* Empties the selection for a falsy value and ignores any other, since a
|
|
1147
|
+
* file name cannot select a file.
|
|
1148
|
+
* @param {any} v
|
|
1149
|
+
*/
|
|
594
1150
|
set value(v: any);
|
|
1151
|
+
/** Empties the selection, as a native file input's reset does, whatever the `value` attribute says. */
|
|
595
1152
|
formResetCallback(): void;
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
1153
|
+
/**
|
|
1154
|
+
* The size of the selected files together, in bytes.
|
|
1155
|
+
* @returns {number}
|
|
1156
|
+
*/
|
|
1157
|
+
get totalsize(): number;
|
|
1158
|
+
/**
|
|
1159
|
+
* The most files a selection may hold; a larger selection is cleared
|
|
1160
|
+
* entirely with a warning. Enforced from the next selection on.
|
|
1161
|
+
* @returns {number|null} null for no limit
|
|
1162
|
+
*/
|
|
1163
|
+
get maxFiles(): number | null;
|
|
1164
|
+
/** @param {number|null} v */
|
|
1165
|
+
set maxFiles(v: number | null);
|
|
1166
|
+
/**
|
|
1167
|
+
* The largest size one file may have, in bytes; a larger file is dropped
|
|
1168
|
+
* from the selection with a warning. Enforced from the next selection on.
|
|
1169
|
+
* @returns {number|null} null for no limit
|
|
1170
|
+
*/
|
|
1171
|
+
get maxFileSize(): number | null;
|
|
1172
|
+
/** @param {number|null} v */
|
|
1173
|
+
set maxFileSize(v: number | null);
|
|
1174
|
+
/**
|
|
1175
|
+
* The largest size the selected files may have together, in bytes; a
|
|
1176
|
+
* larger selection is cleared entirely with a warning. Enforced from the
|
|
1177
|
+
* next selection on.
|
|
1178
|
+
* @returns {number|null} null for no limit
|
|
1179
|
+
*/
|
|
1180
|
+
get maxTotalSize(): number | null;
|
|
1181
|
+
/** @param {number|null} v */
|
|
1182
|
+
set maxTotalSize(v: number | null);
|
|
1183
|
+
/**
|
|
1184
|
+
* Whether the chosen files are listed, each with a button removing it; the
|
|
1185
|
+
* stylesheet shows the list from the reflected `item-list` attribute.
|
|
1186
|
+
* @returns {boolean}
|
|
1187
|
+
*/
|
|
1188
|
+
get itemList(): boolean;
|
|
1189
|
+
/** @param {boolean} v */
|
|
1190
|
+
set itemList(v: boolean);
|
|
1191
|
+
/**
|
|
1192
|
+
* Whether the dropzone is shown; the stylesheet shows it from the reflected
|
|
1193
|
+
* `dropzone` attribute.
|
|
1194
|
+
* @returns {boolean}
|
|
1195
|
+
*/
|
|
1196
|
+
get dropzone(): boolean;
|
|
1197
|
+
/** @param {boolean} v */
|
|
1198
|
+
set dropzone(v: boolean);
|
|
607
1199
|
}
|
|
608
1200
|
/**
|
|
609
|
-
*
|
|
610
|
-
*
|
|
1201
|
+
* Places a popover beside the element or the rectangle it belongs to.
|
|
1202
|
+
*
|
|
1203
|
+
* `wire` pairs a popover with one invoker for its lifetime and relies on css
|
|
1204
|
+
* anchor positioning, placing the popover in script only where the platform
|
|
1205
|
+
* lacks it or the caller asks for it. `show` places a popover once, beside
|
|
1206
|
+
* whatever anchor the call hands over.
|
|
611
1207
|
*/
|
|
612
1208
|
declare class Anchors {
|
|
613
1209
|
/**
|
|
614
|
-
* Anchors a popover to its invoker.
|
|
1210
|
+
* Anchors a popover to its invoker for the popover's lifetime.
|
|
615
1211
|
*
|
|
616
|
-
*
|
|
617
|
-
*
|
|
1212
|
+
* On every platform the invoker is given an inline `anchor-name` and the
|
|
1213
|
+
* popover a `position-anchor` naming it, `--` followed by a unique id
|
|
1214
|
+
* built from `prefix`. That is what a stylesheet needs to place the popover
|
|
618
1215
|
* itself: the library's own menus say `top: anchor(bottom); left:
|
|
619
1216
|
* anchor(left)`. **Writing that css is the caller's half of this.** Without
|
|
620
1217
|
* it the popover lands wherever the user agent puts a popover, which is not
|
|
621
1218
|
* beside the invoker.
|
|
622
1219
|
*
|
|
623
|
-
* Where the platform has no anchor positioning
|
|
624
|
-
* instead
|
|
625
|
-
*
|
|
626
|
-
*
|
|
1220
|
+
* Where the platform has no css anchor positioning, or under `handPlace`,
|
|
1221
|
+
* the popover is placed in script instead: beside the invoker whenever it
|
|
1222
|
+
* opens, clamped 8px inside the viewport, placed again on every scroll and
|
|
1223
|
+
* resize while open, and its inline placement removed on close. The gap to
|
|
1224
|
+
* the invoker is read from the popover's css margins. From `beforetoggle`
|
|
1225
|
+
* to the placing, in a microtask before the `toggle` event, the popover
|
|
1226
|
+
* carries an inline `visibility: hidden`, so a stylesheet setting
|
|
1227
|
+
* `visibility` on it competes with that. A popover removed from the
|
|
1228
|
+
* document while open, or whose invoker was removed, stops being placed.
|
|
1229
|
+
*
|
|
1230
|
+
* The script placement puts a plain popover below the invoker,
|
|
1231
|
+
* start-aligned. A popover matching `ful-note`, `.ful-note` or
|
|
1232
|
+
* `[placement]` reads its `placement` attribute instead: `top`, `right`,
|
|
1233
|
+
* `left`, or `bottom` by default, centred on the invoker along the other
|
|
1234
|
+
* axis. Such a popover is also given `--ful-note-callout-inline` and
|
|
1235
|
+
* `--ful-note-callout-block`: the invoker's centre, in pixels, measured
|
|
1236
|
+
* from the popover's padding box, which stays on the invoker when the
|
|
1237
|
+
* viewport pushes the popover off it.
|
|
1238
|
+
*
|
|
1239
|
+
* Wiring the same pair twice adds its listeners twice.
|
|
627
1240
|
*
|
|
628
1241
|
* @param {HTMLElement} invoker the element the popover belongs to
|
|
629
1242
|
* @param {HTMLElement} popover the `[popover]` element to place
|
|
630
1243
|
* @param {object} [options]
|
|
631
|
-
* @param {string} [options.prefix] prefixes the generated anchor name and
|
|
632
|
-
* so the dom says which component a name
|
|
633
|
-
*
|
|
634
|
-
*
|
|
635
|
-
*
|
|
636
|
-
*
|
|
637
|
-
*
|
|
638
|
-
*
|
|
639
|
-
*
|
|
640
|
-
*
|
|
641
|
-
* @param {boolean} [options.
|
|
642
|
-
*
|
|
643
|
-
*
|
|
644
|
-
*
|
|
645
|
-
*
|
|
646
|
-
*
|
|
1244
|
+
* @param {string} [options.prefix] prefixes the generated anchor name and
|
|
1245
|
+
* id, `ful-anchor` by default, so the dom says which component a name
|
|
1246
|
+
* belongs to
|
|
1247
|
+
* @param {boolean} [options.invoke] makes the invoker toggle the popover,
|
|
1248
|
+
* which light dismiss then closes with no script of your own. The popover
|
|
1249
|
+
* is given the generated id when it has none. A `button` or `input`
|
|
1250
|
+
* invoker gets a `popovertarget` naming it; any other element toggles it
|
|
1251
|
+
* on click and on the Enter and Space keys
|
|
1252
|
+
* @param {boolean} [options.expanded] sets the invoker's `aria-expanded` to
|
|
1253
|
+
* `false` at once and keeps it in step with the popover's `toggle` events
|
|
1254
|
+
* @param {boolean} [options.stretch] in the script placement, sizes the
|
|
1255
|
+
* popover to at least its invoker's width, capped by its own `max-width`
|
|
1256
|
+
* and the viewport, and flips it above the invoker where the viewport
|
|
1257
|
+
* leaves no room below, which is what a combobox dropdown wants. The
|
|
1258
|
+
* `placement` attribute is not read
|
|
1259
|
+
* @param {boolean} [options.handPlace] places in script on every platform
|
|
1260
|
+
* rather than only as a fallback, for a popover that needs to know where
|
|
1261
|
+
* its invoker ended up, such as a note pointing a callout at it. Such a
|
|
1262
|
+
* popover declares no anchor placement in css
|
|
647
1263
|
*/
|
|
648
1264
|
static wire(invoker: HTMLElement, popover: HTMLElement, { prefix, invoke, expanded, stretch, handPlace }?: {
|
|
649
1265
|
prefix?: string;
|
|
@@ -653,29 +1269,33 @@ declare class Anchors {
|
|
|
653
1269
|
handPlace?: boolean;
|
|
654
1270
|
}): void;
|
|
655
1271
|
/**
|
|
656
|
-
* Shows and places
|
|
657
|
-
* many invokers, each open handing over its own anchor,
|
|
658
|
-
* is a rectangle rather than an element,
|
|
659
|
-
*
|
|
660
|
-
*
|
|
661
|
-
*
|
|
1272
|
+
* Shows a popover and places it beside an anchor, once. It serves a
|
|
1273
|
+
* popover shared by many invokers, each open handing over its own anchor,
|
|
1274
|
+
* and an anchor that is a rectangle rather than an element, such as one
|
|
1275
|
+
* read out of an iframe. Nothing is paired and nothing follows a later
|
|
1276
|
+
* scroll or resize; closing is the caller's, or the platform's for a
|
|
1277
|
+
* light-dismissing popover.
|
|
1278
|
+
*
|
|
1279
|
+
* The popover goes below the anchor, start-aligned, clamped 8px inside the
|
|
1280
|
+
* viewport. `flip` moves it above the anchor where there is no room below
|
|
1281
|
+
* and there is room above. The placement is written as inline `top`, `left`,
|
|
1282
|
+
* `right`, `bottom` and `margin`, which stay after the popover closes and
|
|
1283
|
+
* are overwritten by the next call.
|
|
662
1284
|
*
|
|
663
|
-
*
|
|
664
|
-
*
|
|
665
|
-
*
|
|
666
|
-
*
|
|
667
|
-
* already open is shown and placed before the call returns, so the first
|
|
668
|
-
* position anybody sees is the right one and the caller can move the focus
|
|
669
|
-
* into it on the next line.
|
|
1285
|
+
* A popover not already open is shown with `showPopover()` and placed
|
|
1286
|
+
* before the call returns, so the first position anybody sees is the right
|
|
1287
|
+
* one and the caller can move the focus into it on the next line. One
|
|
1288
|
+
* already open is placed without being shown again.
|
|
670
1289
|
*
|
|
671
1290
|
* @param {HTMLElement} popover the `[popover]` element to show, or an
|
|
672
1291
|
* already-shown element to place
|
|
673
|
-
* @param {Element|DOMRect} anchor the element, or the rectangle
|
|
674
|
-
* beside
|
|
1292
|
+
* @param {Element|DOMRect} anchor the element, or the rectangle in
|
|
1293
|
+
* viewport coordinates, to place beside
|
|
675
1294
|
* @param {object} [options]
|
|
676
1295
|
* @param {boolean} [options.flip] place above the anchor where no room is
|
|
677
|
-
* left below
|
|
678
|
-
* @param {number} [options.gap] the distance from the anchor, in pixels
|
|
1296
|
+
* left below, `false` by default
|
|
1297
|
+
* @param {number} [options.gap] the distance from the anchor, in pixels,
|
|
1298
|
+
* `0` by default
|
|
679
1299
|
* @returns {HTMLElement} the popover
|
|
680
1300
|
*/
|
|
681
1301
|
static show(popover: HTMLElement, anchor: Element | DOMRect, { flip, gap }?: {
|
|
@@ -683,73 +1303,150 @@ declare class Anchors {
|
|
|
683
1303
|
gap?: number;
|
|
684
1304
|
}): HTMLElement;
|
|
685
1305
|
}
|
|
1306
|
+
export type SelectEntry = {
|
|
1307
|
+
key: any;
|
|
1308
|
+
label: string;
|
|
1309
|
+
metadata: any;
|
|
1310
|
+
};
|
|
1311
|
+
export type SelectHttpClient = {
|
|
1312
|
+
request(method: string, url: string): any;
|
|
1313
|
+
};
|
|
686
1314
|
/**
|
|
687
1315
|
* Fetches a select's whole vocabulary from a url and serves every later read
|
|
688
1316
|
* from it. Concurrent callers share one request, the options may be cached in
|
|
689
|
-
* local storage under a revision, and
|
|
1317
|
+
* local storage under a revision, and invalidating discards both.
|
|
690
1318
|
*/
|
|
691
1319
|
declare class RemoteLoader {
|
|
692
1320
|
#private;
|
|
1321
|
+
/**
|
|
1322
|
+
* @param {{ http: SelectHttpClient, url: string, method: string, responseMapper: (response: any) => SelectEntry[], prefetch: boolean, revision: string|null }} conf
|
|
1323
|
+
* a null revision never reads nor writes local storage
|
|
1324
|
+
*/
|
|
693
1325
|
constructor({ http, url, method, responseMapper, prefetch, revision }: {
|
|
694
|
-
http:
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
responseMapper: any;
|
|
698
|
-
|
|
699
|
-
|
|
1326
|
+
http: SelectHttpClient;
|
|
1327
|
+
url: string;
|
|
1328
|
+
method: string;
|
|
1329
|
+
responseMapper: (response: any) => SelectEntry[];
|
|
1330
|
+
prefetch: boolean;
|
|
1331
|
+
revision: string | null;
|
|
700
1332
|
});
|
|
1333
|
+
/**
|
|
1334
|
+
* Fetches the vocabulary now when the loader was built with prefetch, and
|
|
1335
|
+
* does nothing otherwise.
|
|
1336
|
+
* @returns {Promise<void>}
|
|
1337
|
+
* @throws when the fetch fails, or when an invalidation supersedes it
|
|
1338
|
+
*/
|
|
701
1339
|
prefetch(): Promise<void>;
|
|
702
|
-
exact(...keys: any[]): Promise<any>;
|
|
703
|
-
load(needle: any): Promise<any>;
|
|
704
1340
|
/**
|
|
705
|
-
*
|
|
706
|
-
*
|
|
707
|
-
*
|
|
1341
|
+
* The entries whose key loosely equals one of the keys, in vocabulary order.
|
|
1342
|
+
* @param {...any} keys
|
|
1343
|
+
* @returns {Promise<SelectEntry[]>}
|
|
1344
|
+
* @throws when the fetch fails, or when an invalidation supersedes it
|
|
1345
|
+
*/
|
|
1346
|
+
exact(...keys: any[]): Promise<SelectEntry[]>;
|
|
1347
|
+
/**
|
|
1348
|
+
* The entries whose label contains the needle, ignoring case; every entry
|
|
1349
|
+
* for a nullish or empty needle.
|
|
1350
|
+
* @param {string|null} [needle]
|
|
1351
|
+
* @returns {Promise<SelectEntry[]>}
|
|
1352
|
+
* @throws when the fetch fails, or when an invalidation supersedes it
|
|
1353
|
+
*/
|
|
1354
|
+
load(needle?: string | null): Promise<SelectEntry[]>;
|
|
1355
|
+
/**
|
|
1356
|
+
* Drops the vocabulary held in memory so the next question refetches it,
|
|
1357
|
+
* which may still be answered from local storage under the same revision.
|
|
1358
|
+
* A fetch still in flight is detached: its outcome is neither served nor
|
|
1359
|
+
* stored, and the callers waiting on it reject.
|
|
1360
|
+
* @returns {Promise<void>}
|
|
708
1361
|
*/
|
|
709
1362
|
invalidate(): Promise<void>;
|
|
710
|
-
reconfigureUrl(url: any): Promise<void>;
|
|
711
1363
|
}
|
|
712
1364
|
/** Asks the endpoint per query instead of fetching the vocabulary once, for a list too large to hold in memory. */
|
|
713
1365
|
declare class PartialRemoteLoader {
|
|
714
1366
|
#private;
|
|
1367
|
+
/**
|
|
1368
|
+
* @param {{ http: SelectHttpClient, url: string, method: string, responseMapper: (response: any) => SelectEntry[] }} conf
|
|
1369
|
+
*/
|
|
715
1370
|
constructor({ http, url, method, responseMapper }: {
|
|
716
|
-
http:
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
1371
|
+
http: SelectHttpClient;
|
|
1372
|
+
url: string;
|
|
1373
|
+
method: string;
|
|
1374
|
+
responseMapper: (response: any) => SelectEntry[];
|
|
720
1375
|
});
|
|
721
1376
|
/**
|
|
722
|
-
*
|
|
723
|
-
*
|
|
1377
|
+
* Does nothing, since nothing is held between queries.
|
|
1378
|
+
* @returns {Promise<void>}
|
|
724
1379
|
*/
|
|
725
1380
|
invalidate(): Promise<void>;
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
1381
|
+
/**
|
|
1382
|
+
* Asks the endpoint for the entries of the keys, sent as repeated `k`
|
|
1383
|
+
* parameters.
|
|
1384
|
+
* @param {...any} keys
|
|
1385
|
+
* @returns {Promise<SelectEntry[]>}
|
|
1386
|
+
* @throws when the request fails
|
|
1387
|
+
*/
|
|
1388
|
+
exact(...keys: any[]): Promise<SelectEntry[]>;
|
|
1389
|
+
/**
|
|
1390
|
+
* Asks the endpoint for the entries matching the needle, sent as the `s`
|
|
1391
|
+
* parameter; the filtering is the endpoint's.
|
|
1392
|
+
* @param {string|null} [needle]
|
|
1393
|
+
* @returns {Promise<SelectEntry[]>}
|
|
1394
|
+
* @throws when the request fails
|
|
1395
|
+
*/
|
|
1396
|
+
load(needle?: string | null): Promise<SelectEntry[]>;
|
|
729
1397
|
}
|
|
730
1398
|
/** Serves a select's options from an array held in memory, which is what the slotted `<option>` elements become. */
|
|
731
1399
|
declare class InMemoryLoader {
|
|
732
1400
|
#private;
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
1401
|
+
/**
|
|
1402
|
+
* @param {SelectEntry[]} data
|
|
1403
|
+
*/
|
|
1404
|
+
constructor(data: SelectEntry[]);
|
|
1405
|
+
/**
|
|
1406
|
+
* Replaces the vocabulary every later question is answered from.
|
|
1407
|
+
* @param {SelectEntry[]} data
|
|
1408
|
+
*/
|
|
1409
|
+
update(data: SelectEntry[]): void;
|
|
1410
|
+
/**
|
|
1411
|
+
* Does nothing: the vocabulary is the data itself, which only update replaces.
|
|
1412
|
+
* @returns {Promise<void>}
|
|
1413
|
+
*/
|
|
736
1414
|
invalidate(): Promise<void>;
|
|
737
|
-
|
|
738
|
-
|
|
1415
|
+
/**
|
|
1416
|
+
* The entries whose key loosely equals one of the keys, in vocabulary order.
|
|
1417
|
+
* @param {...any} keys
|
|
1418
|
+
* @returns {SelectEntry[]}
|
|
1419
|
+
*/
|
|
1420
|
+
exact(...keys: any[]): SelectEntry[];
|
|
1421
|
+
/**
|
|
1422
|
+
* The entries whose label contains the needle, ignoring case; every entry
|
|
1423
|
+
* for a nullish or empty needle.
|
|
1424
|
+
* @param {string|null} [needle]
|
|
1425
|
+
* @returns {SelectEntry[]}
|
|
1426
|
+
*/
|
|
1427
|
+
load(needle?: string | null): SelectEntry[];
|
|
739
1428
|
}
|
|
740
1429
|
/**
|
|
741
1430
|
* Builds the select's loader from its attributes: the slotted options in
|
|
742
|
-
* memory, or a remote or chunked loader over src.
|
|
1431
|
+
* memory, or a remote or chunked loader over src. It is registered as the
|
|
1432
|
+
* `loaders:select` component.
|
|
743
1433
|
*
|
|
744
|
-
* A component
|
|
745
|
-
*
|
|
746
|
-
* metadata }` entries:
|
|
1434
|
+
* A component named by the select's `loader` attribute replaces this one: its
|
|
1435
|
+
* `create(el, conf)` answers an object with these methods, each answering
|
|
1436
|
+
* `{ key, label, metadata }` entries, directly or through a promise:
|
|
747
1437
|
*
|
|
748
|
-
* - `prefetch()` warms the vocabulary if it can, and resolves either way
|
|
749
1438
|
* - `load(needle)` answers the entries matching the typed text, all of them
|
|
750
|
-
* when the needle is
|
|
1439
|
+
* when the needle is empty, which is the search the list opens with
|
|
751
1440
|
* - `exact(...keys)` answers the entries for those keys, used to label a value
|
|
752
|
-
* assigned without going through the list
|
|
1441
|
+
* assigned without going through the list; a key it leaves out is dropped
|
|
1442
|
+
* from the selection
|
|
1443
|
+
* - `prefetch()`, optional, warms the vocabulary; the select calls it at the
|
|
1444
|
+
* upgrade without waiting, and awaits it in `reload()`
|
|
1445
|
+
* - `invalidate()`, optional, drops whatever the loader holds, called by
|
|
1446
|
+
* `reload()`
|
|
1447
|
+
*
|
|
1448
|
+
* An entry whose `metadata.disabled` is truthy is shown and cannot be picked,
|
|
1449
|
+
* with `metadata.reason`, when present, as the row's title.
|
|
753
1450
|
*/
|
|
754
1451
|
declare class SelectLoader {
|
|
755
1452
|
#private;
|
|
@@ -759,132 +1456,497 @@ declare class SelectLoader {
|
|
|
759
1456
|
* `mode: 'chunked'`, per query. A test, or a caller holding its own
|
|
760
1457
|
* configuration, builds a loader this way; `create` is the same thing with
|
|
761
1458
|
* an element's attributes parsed first.
|
|
762
|
-
*
|
|
1459
|
+
*
|
|
1460
|
+
* A remote loader fetches once and filters in memory, caching the response
|
|
1461
|
+
* in local storage under `method@url` when a revision is given; a chunked
|
|
1462
|
+
* one sends every search as `s` and every key lookup as `k`. The response
|
|
1463
|
+
* mapper turns the parsed response body into entries.
|
|
1464
|
+
* @param {{ data?: SelectEntry[], url?: undefined, http?: undefined, method?: undefined, mode?: undefined, prefetch?: undefined, revision?: undefined, responseMapper?: undefined }
|
|
1465
|
+
* | { data?: undefined, url: string, http: SelectHttpClient, method?: string, mode?: string, prefetch?: boolean, revision?: string|null, responseMapper: (response: any) => SelectEntry[] }} conf
|
|
1466
|
+
* `method` defaults to POST
|
|
1467
|
+
* @returns {InMemoryLoader|PartialRemoteLoader|RemoteLoader}
|
|
763
1468
|
*/
|
|
764
1469
|
static from({ data, http, url, method, mode, prefetch, revision, responseMapper }: {
|
|
765
|
-
data?:
|
|
766
|
-
|
|
767
|
-
|
|
1470
|
+
data?: SelectEntry[];
|
|
1471
|
+
url?: undefined;
|
|
1472
|
+
http?: undefined;
|
|
1473
|
+
method?: undefined;
|
|
1474
|
+
mode?: undefined;
|
|
1475
|
+
prefetch?: undefined;
|
|
1476
|
+
revision?: undefined;
|
|
1477
|
+
responseMapper?: undefined;
|
|
1478
|
+
} | {
|
|
1479
|
+
data?: undefined;
|
|
1480
|
+
url: string;
|
|
1481
|
+
http: SelectHttpClient;
|
|
768
1482
|
method?: string;
|
|
769
1483
|
mode?: string;
|
|
770
1484
|
prefetch?: boolean;
|
|
771
1485
|
revision?: string | null;
|
|
772
|
-
responseMapper
|
|
1486
|
+
responseMapper: (response: any) => SelectEntry[];
|
|
1487
|
+
}): InMemoryLoader | PartialRemoteLoader | RemoteLoader;
|
|
1488
|
+
/**
|
|
1489
|
+
* Builds the loader an element's attributes describe. Without `src` the
|
|
1490
|
+
* vocabulary is the `<option>` elements of `conf.options`, each keyed by its
|
|
1491
|
+
* `value` attribute or else its trimmed text. With `src` the url is
|
|
1492
|
+
* requested through the `http-client` component with `method` (POST by
|
|
1493
|
+
* default): once on first use, or at the upgrade under `preload`, or per
|
|
1494
|
+
* query under `mode="chunked"`. A `revision` caches the whole response in local storage; a
|
|
1495
|
+
* valueless one takes the `revision` component, calling it when it is a
|
|
1496
|
+
* function, and warns and does not cache when none is registered.
|
|
1497
|
+
*
|
|
1498
|
+
* The response becomes entries through `k-expr` and `l-expr` evaluated on
|
|
1499
|
+
* each row of `d-expr` (the response itself by default), with `m-expr` as
|
|
1500
|
+
* the metadata (the row by default); else through the `response-mapper`
|
|
1501
|
+
* component; else each row is read as a `[key, label, metadata]` array.
|
|
1502
|
+
* @param {ParsedElement} el the element declaring the loader attributes
|
|
1503
|
+
* @param {{ options?: DocumentFragment }} conf
|
|
1504
|
+
* @returns {InMemoryLoader|PartialRemoteLoader|RemoteLoader}
|
|
1505
|
+
*/
|
|
1506
|
+
static create(el: ParsedElement, conf: {
|
|
1507
|
+
options?: DocumentFragment;
|
|
773
1508
|
}): InMemoryLoader | PartialRemoteLoader | RemoteLoader;
|
|
774
|
-
static create(el: any, conf: any): InMemoryLoader | PartialRemoteLoader | RemoteLoader;
|
|
775
1509
|
}
|
|
776
|
-
/**
|
|
1510
|
+
/**
|
|
1511
|
+
* The options popup of a select, a `<ful-dropdown>` the owner shows as a
|
|
1512
|
+
* popover: a spinner while the loader runs, a localized empty state, and a
|
|
1513
|
+
* `role="listbox"` menu of `role="option"` rows.
|
|
1514
|
+
*
|
|
1515
|
+
* The owner drives it and listens to it. A pick dispatches a bubbling
|
|
1516
|
+
* `change` whose detail is `{ index, entry }`, the row's index as a string
|
|
1517
|
+
* and the entry it was rendered from. The active row is announced by a
|
|
1518
|
+
* non-bubbling `activechange` whose detail is `{ id }`, the row's id or null
|
|
1519
|
+
* when none is active, for the owner to set `aria-activedescendant`. A
|
|
1520
|
+
* pressed row does not take the focus from the owner's control.
|
|
1521
|
+
*/
|
|
777
1522
|
declare class Dropdown extends ParsedElement {
|
|
778
1523
|
#private;
|
|
1524
|
+
/**
|
|
1525
|
+
* `listbox` is the id given to the menu, so an owner can set
|
|
1526
|
+
* `aria-controls` before this element upgrades; a generated id otherwise.
|
|
1527
|
+
*/
|
|
779
1528
|
static attributes: string[];
|
|
1529
|
+
/** The default slot, when not blank, is the row template in place of the `options` template. */
|
|
780
1530
|
static slots: boolean;
|
|
781
1531
|
static template: string;
|
|
1532
|
+
/**
|
|
1533
|
+
* `options` renders one row per entry, each entry carrying its `index`
|
|
1534
|
+
* beside its own keys. A replacement must keep one `<li>` per entry, in
|
|
1535
|
+
* order, with the index as its `value`: picking reads the entry back from it.
|
|
1536
|
+
*/
|
|
782
1537
|
static templates: {
|
|
783
1538
|
options: string;
|
|
784
1539
|
};
|
|
1540
|
+
/**
|
|
1541
|
+
* @param {{ slots: Record<string, DocumentFragment> }} conf
|
|
1542
|
+
*/
|
|
785
1543
|
render({ slots }: {
|
|
786
|
-
slots:
|
|
1544
|
+
slots: Record<string, DocumentFragment>;
|
|
787
1545
|
}): void;
|
|
1546
|
+
/**
|
|
1547
|
+
* Picks the highlighted row, or the first enabled one when none is: hides
|
|
1548
|
+
* the dropdown and dispatches `change`. Does nothing when no row is enabled.
|
|
1549
|
+
*/
|
|
788
1550
|
acceptSelection(): void;
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
}
|
|
797
|
-
|
|
1551
|
+
/**
|
|
1552
|
+
* Renders the entries as rows and highlights the first one whose key is
|
|
1553
|
+
* picked, else the row the template marked `selected`, else the first
|
|
1554
|
+
* enabled row. A row is marked `picked` and
|
|
1555
|
+
* `aria-selected="true"` when its key loosely equals one of the keys, and
|
|
1556
|
+
* `aria-disabled="true"` when its `metadata.disabled` is truthy, titled with
|
|
1557
|
+
* `metadata.reason`. No entries shows the empty state instead of the menu.
|
|
1558
|
+
* @param {SelectEntry[]} values
|
|
1559
|
+
* @param {any[]} [keys] the keys currently selected
|
|
1560
|
+
* @throws {Error} when values is undefined
|
|
1561
|
+
*/
|
|
1562
|
+
update(values: SelectEntry[], keys?: any[]): void;
|
|
1563
|
+
/**
|
|
1564
|
+
* Closes the popover, if open, and announces that no row is active. A
|
|
1565
|
+
* `show` still waiting on its loader is superseded: its outcome is neither
|
|
1566
|
+
* rendered nor thrown.
|
|
1567
|
+
*/
|
|
1568
|
+
hide(): void;
|
|
1569
|
+
/**
|
|
1570
|
+
* Whether the popover is open.
|
|
1571
|
+
* @returns {boolean}
|
|
1572
|
+
*/
|
|
1573
|
+
get shown(): boolean;
|
|
1574
|
+
/**
|
|
1575
|
+
* Opens the popover with the spinner showing, then renders what the loader
|
|
1576
|
+
* answers as `update` does. A show overtaken by a later `show` or by `hide`
|
|
1577
|
+
* before its loader settles leaves the dropdown alone and resolves, even
|
|
1578
|
+
* when its loader rejected.
|
|
1579
|
+
* @param {() => SelectEntry[]|Promise<SelectEntry[]>} loader
|
|
1580
|
+
* @param {any[]} [keys] the keys currently selected
|
|
1581
|
+
* @returns {Promise<void>}
|
|
1582
|
+
* @throws what the loader threw, after hiding the dropdown, when this show
|
|
1583
|
+
* is still the current one
|
|
1584
|
+
*/
|
|
1585
|
+
show(loader: () => SelectEntry[] | Promise<SelectEntry[]>, keys?: any[]): Promise<void>;
|
|
1586
|
+
/**
|
|
1587
|
+
* Moves the highlight to the next or previous enabled row when the dropdown
|
|
1588
|
+
* is shown, staying put at the edge, and shows it otherwise.
|
|
1589
|
+
* @param {boolean} forward
|
|
1590
|
+
* @param {() => SelectEntry[]|Promise<SelectEntry[]>} loader used only to show
|
|
1591
|
+
* @param {any[]} [keys] the keys currently selected, used only to show
|
|
1592
|
+
* @returns {Promise<void>}
|
|
1593
|
+
* @throws what `show` throws
|
|
1594
|
+
*/
|
|
1595
|
+
moveOrShow(forward: boolean, loader: () => SelectEntry[] | Promise<SelectEntry[]>, keys?: any[]): Promise<void>;
|
|
1596
|
+
/**
|
|
1597
|
+
* Highlights the first enabled row, or the last one.
|
|
1598
|
+
* @param {boolean} first
|
|
1599
|
+
*/
|
|
1600
|
+
jump(first: boolean): void;
|
|
1601
|
+
/**
|
|
1602
|
+
* Moves the highlight by as many enabled rows as the menu shows at once,
|
|
1603
|
+
* one when that cannot be measured, stopping at the last enabled row.
|
|
1604
|
+
* @param {boolean} forward
|
|
1605
|
+
*/
|
|
1606
|
+
page(forward: boolean): void;
|
|
1607
|
+
}
|
|
1608
|
+
/**
|
|
1609
|
+
* A `<ful-select>`: a combobox over a loader's vocabulary of
|
|
1610
|
+
* `{ key, label, metadata }` entries, holding one key or, under `multiple`,
|
|
1611
|
+
* several. Typing filters the list, opening it from rest offers the whole
|
|
1612
|
+
* vocabulary, and the keyboard follows the combobox pattern: arrows move and
|
|
1613
|
+
* open (Alt+ArrowDown opens, Alt+ArrowUp closes), Home, End, PageUp and
|
|
1614
|
+
* PageDown move in the open list, Enter accepts the highlighted entry or,
|
|
1615
|
+
* with the list closed, submits the form, Escape reverts the edit, and Tab
|
|
1616
|
+
* or leaving the field commits it. Emptying the text of a single select and
|
|
1617
|
+
* leaving the field clears it. Backspace with the caret at the start removes
|
|
1618
|
+
* the last entry, and ArrowLeft there moves the focus to the badges of a
|
|
1619
|
+
* multiple select, where Enter, Space, Backspace or Delete remove one.
|
|
1620
|
+
*
|
|
1621
|
+
* Slots: the default one is the label, `info` sits beside it, `before` and
|
|
1622
|
+
* `after` are affixes around the control, `options` holds the `<option>`
|
|
1623
|
+
* elements of an in-memory vocabulary, `dropdown` replaces the dropdown's
|
|
1624
|
+
* row template and `items` the `items` template.
|
|
1625
|
+
*
|
|
1626
|
+
* Every change of the selection made through the element dispatches a
|
|
1627
|
+
* bubbling `change` whose detail carries `value` and `entry`, as the getters
|
|
1628
|
+
* answer them; assigning `value` dispatches none.
|
|
1629
|
+
*/
|
|
798
1630
|
declare class Select extends Field {
|
|
799
1631
|
#private;
|
|
1632
|
+
/**
|
|
1633
|
+
* Read once at the upgrade, so a later write changes nothing: `name`,
|
|
1634
|
+
* `loader` (the component building the loader, `loaders:select` by
|
|
1635
|
+
* default), `k-type` (`number` or `boolean` coerce the keys, strings
|
|
1636
|
+
* otherwise), and the loader configuration `SelectLoader.create` reads,
|
|
1637
|
+
* but for `src` and `method`, which stay live.
|
|
1638
|
+
*/
|
|
800
1639
|
static attributes: string[];
|
|
1640
|
+
/**
|
|
1641
|
+
* Beside the field's claims: `multiple`, `item-list`, `value` as a comma
|
|
1642
|
+
* separated list of keys, trimmed, whether or not the select is multiple,
|
|
1643
|
+
* and `src` and `method`.
|
|
1644
|
+
*/
|
|
801
1645
|
static observed: string[];
|
|
802
|
-
|
|
1646
|
+
/**
|
|
1647
|
+
* Reads a present but empty `value` attribute of a single select as the
|
|
1648
|
+
* empty key, which an `<option value="">` can carry; a multiple select reads
|
|
1649
|
+
* it as no keys.
|
|
1650
|
+
* @param {string} attr
|
|
1651
|
+
* @param {string|null} str
|
|
1652
|
+
* @returns {any}
|
|
1653
|
+
* @throws when the class declares no such attribute
|
|
1654
|
+
*/
|
|
1655
|
+
unmarshal(attr: string, str: string | null): any;
|
|
803
1656
|
static slots: boolean;
|
|
804
1657
|
static template: string;
|
|
1658
|
+
/**
|
|
1659
|
+
* `items` renders the selection below the control, shown under `item-list`,
|
|
1660
|
+
* over `entries`, the selected entries in order. A replacement must keep one
|
|
1661
|
+
* `<ful-item>` per entry, in order, each with a `<button>` that removes it.
|
|
1662
|
+
*/
|
|
805
1663
|
static templates: {
|
|
806
1664
|
items: string;
|
|
807
1665
|
};
|
|
1666
|
+
/**
|
|
1667
|
+
* @param {{ slots: Record<string, DocumentFragment> }} conf
|
|
1668
|
+
* @returns {{ fragment: DocumentFragment, control: HTMLInputElement, error: Element|null, label: Element|null }}
|
|
1669
|
+
*/
|
|
808
1670
|
_build({ slots }: {
|
|
809
|
-
slots:
|
|
1671
|
+
slots: Record<string, DocumentFragment>;
|
|
810
1672
|
}): {
|
|
811
|
-
fragment:
|
|
812
|
-
control:
|
|
813
|
-
error:
|
|
814
|
-
label:
|
|
1673
|
+
fragment: DocumentFragment;
|
|
1674
|
+
control: HTMLInputElement;
|
|
1675
|
+
error: Element | null;
|
|
1676
|
+
label: Element | null;
|
|
815
1677
|
};
|
|
816
|
-
/**
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
*
|
|
820
|
-
*
|
|
821
|
-
*
|
|
822
|
-
|
|
823
|
-
|
|
1678
|
+
/**
|
|
1679
|
+
* Hands the loader to the callback, for runtime changes such as
|
|
1680
|
+
* `update(entries)` on an in-memory loader.
|
|
1681
|
+
* @template T
|
|
1682
|
+
* @param {(loader: any) => T|Promise<T>} fn
|
|
1683
|
+
* @returns {Promise<T>} what the callback answers
|
|
1684
|
+
*/
|
|
1685
|
+
withLoader<T>(fn: (loader: any) => T | Promise<T>): Promise<T>;
|
|
1686
|
+
/**
|
|
1687
|
+
* Drops whatever the loader is holding, awaits its prefetch (which fetches
|
|
1688
|
+
* again when the select declares `preload`), and asks it about the current
|
|
1689
|
+
* selection again, which is what a select whose vocabulary depends on
|
|
1690
|
+
* another control needs when that control changes. A key the loader no
|
|
1691
|
+
* longer knows is dropped from the selection, so a value invalidated by the
|
|
1692
|
+
* change does not survive it, and one it still knows keeps its place with a
|
|
1693
|
+
* fresh label. The badges and items follow, and no `change` is dispatched.
|
|
824
1694
|
*
|
|
825
|
-
*
|
|
1695
|
+
* Where the vocabulary lives at a different address, write `src` or call
|
|
1696
|
+
* `reconfigure`, which build the loader for the new url and reload.
|
|
1697
|
+
* @returns {Promise<void>}
|
|
1698
|
+
* @throws what the loader's invalidate, prefetch or key lookup throws
|
|
1699
|
+
*/
|
|
1700
|
+
reload(): Promise<void>;
|
|
1701
|
+
/**
|
|
1702
|
+
* The url the loader asks for the vocabulary, reflected as the `src`
|
|
1703
|
+
* attribute.
|
|
1704
|
+
* @returns {string|null}
|
|
1705
|
+
*/
|
|
1706
|
+
get src(): string | null;
|
|
1707
|
+
/**
|
|
1708
|
+
* Points the select at another vocabulary: the dropdown closes, the loader
|
|
1709
|
+
* is built again through its component's `create`, as at the render, and
|
|
1710
|
+
* the select reloads as `reload()` does, so a selected key the new
|
|
1711
|
+
* vocabulary does not know is dropped and one it knows is labelled again,
|
|
1712
|
+
* with no `change` dispatched. A write that does not change the url does
|
|
1713
|
+
* nothing.
|
|
826
1714
|
*
|
|
827
|
-
*
|
|
828
|
-
*
|
|
829
|
-
*
|
|
1715
|
+
* The reload is not awaited: a failed fetch or lookup surfaces as an
|
|
1716
|
+
* unhandled rejection.
|
|
1717
|
+
* @param {string|null|undefined} value null or undefined removes the url,
|
|
1718
|
+
* which the default loader answers with the slotted options
|
|
1719
|
+
*/
|
|
1720
|
+
set src(value: string | null | undefined);
|
|
1721
|
+
/**
|
|
1722
|
+
* The http method the default loader sends, reflected as the `method`
|
|
1723
|
+
* attribute; `POST` when absent.
|
|
1724
|
+
* @returns {string|null}
|
|
1725
|
+
*/
|
|
1726
|
+
get method(): string | null;
|
|
1727
|
+
/**
|
|
1728
|
+
* Changes the http method the way `src` changes the url: the loader is
|
|
1729
|
+
* built again and the select reloads.
|
|
1730
|
+
* @param {string|null|undefined} value
|
|
1731
|
+
*/
|
|
1732
|
+
set method(value: string | null | undefined);
|
|
1733
|
+
/**
|
|
1734
|
+
* Writes `src` and `method` together and reloads once: the loader is built
|
|
1735
|
+
* again for the pair when either changed, as a single write of either does,
|
|
1736
|
+
* and the select then reloads as `reload()` does, whether or not they
|
|
1737
|
+
* changed.
|
|
1738
|
+
*
|
|
1739
|
+
* citta.addEventListener('change', () => {
|
|
1740
|
+
* cap.reconfigure({ src: `/api/cap?citta=${citta.value}` }, { notify: true });
|
|
830
1741
|
* });
|
|
1742
|
+
* @param {{ src?: string|null, method?: string|null }} attributes a name
|
|
1743
|
+
* left out keeps its value, null removes the attribute
|
|
1744
|
+
* @param {{ notify?: boolean }} [options] `notify` dispatches `change` when
|
|
1745
|
+
* the reload dropped a selected key, so a form or a table filtered by the
|
|
1746
|
+
* select sees the value it lost; nothing is dispatched otherwise
|
|
1747
|
+
* @returns {Promise<void>} settling once the reload has
|
|
1748
|
+
* @throws what the loader's invalidate, prefetch or key lookup throws
|
|
1749
|
+
*/
|
|
1750
|
+
reconfigure(attributes: {
|
|
1751
|
+
src?: string | null;
|
|
1752
|
+
method?: string | null;
|
|
1753
|
+
}, { notify }?: {
|
|
1754
|
+
notify?: boolean;
|
|
1755
|
+
}): Promise<void>;
|
|
1756
|
+
/**
|
|
1757
|
+
* Selects the keys, coerced by `k-type`: a key, an array of keys, or null or
|
|
1758
|
+
* undefined for none. The empty string is a key like any other. The keys
|
|
1759
|
+
* are applied at once, each labeled by itself until the loader's `exact`
|
|
1760
|
+
* answers; a key it does not answer is then dropped, a key removed in the
|
|
1761
|
+
* meantime stays removed, and a later assignment wins over the late answer.
|
|
1762
|
+
* A failed lookup keeps the keys and surfaces as an unhandled rejection.
|
|
1763
|
+
* No `change` is dispatched. A key containing a
|
|
1764
|
+
* comma, which the value attribute cannot carry, is kept and warned about
|
|
1765
|
+
* once per element.
|
|
1766
|
+
* @param {any} vs
|
|
831
1767
|
*/
|
|
832
|
-
reload(): Promise<void>;
|
|
833
1768
|
set value(vs: any);
|
|
1769
|
+
/**
|
|
1770
|
+
* The selected keys, in selection order, for a multiple select; the one
|
|
1771
|
+
* key, or null, for a single one.
|
|
1772
|
+
* @returns {any}
|
|
1773
|
+
*/
|
|
834
1774
|
get value(): any;
|
|
835
|
-
/**
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
1775
|
+
/**
|
|
1776
|
+
* The selection as entries, the ones in the `change` detail: an array for
|
|
1777
|
+
* a multiple select, the one entry or null for a single one. An entry whose
|
|
1778
|
+
* label has not been resolved yet carries its key as the label.
|
|
1779
|
+
* @returns {SelectEntry|SelectEntry[]|null}
|
|
1780
|
+
*/
|
|
1781
|
+
get entry(): SelectEntry | SelectEntry[] | null;
|
|
1782
|
+
/**
|
|
1783
|
+
* Whether the select holds several keys: `value` and `entry` answer arrays,
|
|
1784
|
+
* the input stays empty and the selection shows as removable badges in the
|
|
1785
|
+
* control.
|
|
1786
|
+
* @returns {boolean}
|
|
1787
|
+
*/
|
|
1788
|
+
get multiple(): boolean;
|
|
1789
|
+
/** @param {boolean} v */
|
|
1790
|
+
set multiple(v: boolean);
|
|
1791
|
+
/**
|
|
1792
|
+
* Whether the selection shows as the `items` list below the control instead
|
|
1793
|
+
* of as badges in it.
|
|
1794
|
+
* @returns {boolean}
|
|
1795
|
+
*/
|
|
1796
|
+
get itemList(): boolean;
|
|
1797
|
+
/** @param {boolean} v */
|
|
1798
|
+
set itemList(v: boolean);
|
|
841
1799
|
}
|
|
842
|
-
/**
|
|
1800
|
+
/**
|
|
1801
|
+
* A group of radios declared as `ful-radio` children. Each `ful-radio` becomes
|
|
1802
|
+
* a radio input carrying its attributes, labelled by its content; every
|
|
1803
|
+
* `input-*` attribute on the group is forwarded onto each radio as well. The
|
|
1804
|
+
* default slot is the `<legend>`, and `header` and `footer` slots frame the
|
|
1805
|
+
* list. The radios share a name of their own (derived from `name`, or minted
|
|
1806
|
+
* when there is none) and carry `form=""`, so the group is the only element
|
|
1807
|
+
* the form sees. A radio's native `change` is stopped and republished as the
|
|
1808
|
+
* group's own.
|
|
1809
|
+
*
|
|
1810
|
+
* The host carries the `radiogroup` role, `aria-readonly`, `aria-required`,
|
|
1811
|
+
* `aria-invalid` and the description. The disabled and readonly claims act on
|
|
1812
|
+
* the group's `<fieldset>`, and readonly refuses every click inside it.
|
|
1813
|
+
* `focus()` lands on the first radio.
|
|
1814
|
+
*/
|
|
843
1815
|
declare class RadioGroup extends Field {
|
|
844
1816
|
#private;
|
|
1817
|
+
/** @type {string[]} */
|
|
845
1818
|
static attributes: string[];
|
|
846
1819
|
static slots: boolean;
|
|
1820
|
+
/** @type {string} */
|
|
847
1821
|
static ROLE: string;
|
|
848
1822
|
static template: string;
|
|
849
1823
|
/**
|
|
850
1824
|
* @param {{slots: any}} conf
|
|
851
|
-
* @returns {any}
|
|
1825
|
+
* @returns {any} the pieces: the first radio as the control, the fieldset
|
|
1826
|
+
* as the `claims` and `freeze` pieces, and the host as the `described` and
|
|
1827
|
+
* `announces` pieces
|
|
852
1828
|
*/
|
|
853
1829
|
_build({ slots }: {
|
|
854
1830
|
slots: any;
|
|
855
1831
|
}): any;
|
|
1832
|
+
/**
|
|
1833
|
+
* The value of the checked radio, `null` when none is. Under
|
|
1834
|
+
* `type="boolean"` it answers `true` for a radio whose value is `true` and
|
|
1835
|
+
* `false` for any other. Writing a value checks the radio carrying it, and
|
|
1836
|
+
* writing `null` or a value no radio carries clears the selection.
|
|
1837
|
+
* @type {string | boolean | null}
|
|
1838
|
+
*/
|
|
856
1839
|
get value(): string | boolean | null;
|
|
857
1840
|
set value(value: string | boolean | null);
|
|
858
1841
|
}
|
|
859
|
-
/**
|
|
1842
|
+
/**
|
|
1843
|
+
* A checkbox, or a switch with the `switch` role under `type="switch"`. The
|
|
1844
|
+
* label is the default slot, pointed at the input with `for` and `id`, so a
|
|
1845
|
+
* click on it toggles the value. Every `input-*` attribute is forwarded onto
|
|
1846
|
+
* the input. The input's native `change` is stopped and republished as the
|
|
1847
|
+
* field's own. Readonly freezes the whole choice, label included: no click
|
|
1848
|
+
* inside it toggles the value while the claim holds.
|
|
1849
|
+
*/
|
|
860
1850
|
declare class Checkbox extends Field {
|
|
861
1851
|
#private;
|
|
1852
|
+
/** @type {string[]} */
|
|
862
1853
|
static attributes: string[];
|
|
1854
|
+
/** @type {string[]} */
|
|
863
1855
|
static observed: string[];
|
|
864
1856
|
static slots: boolean;
|
|
865
1857
|
static template: string;
|
|
1858
|
+
/**
|
|
1859
|
+
* @param {{ slots: Record<string, DocumentFragment> | undefined }} conf
|
|
1860
|
+
* @returns {any} the pieces, the `ful-choice` container being the `freeze` piece
|
|
1861
|
+
*/
|
|
866
1862
|
_build({ slots }: {
|
|
867
|
-
slots:
|
|
868
|
-
}):
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
set value(value: any);
|
|
1863
|
+
slots: Record<string, DocumentFragment> | undefined;
|
|
1864
|
+
}): any;
|
|
1865
|
+
/**
|
|
1866
|
+
* Whether the box is checked. The `value` attribute is read with the `bool`
|
|
1867
|
+
* mapper, where only the text `true` means checked.
|
|
1868
|
+
* @type {boolean}
|
|
1869
|
+
*/
|
|
1870
|
+
get value(): boolean;
|
|
1871
|
+
set value(value: boolean);
|
|
877
1872
|
}
|
|
878
|
-
|
|
1873
|
+
export type TablePageRequest = {
|
|
1874
|
+
page: number;
|
|
1875
|
+
size: number;
|
|
1876
|
+
};
|
|
1877
|
+
export type TableSortRequest = {
|
|
1878
|
+
sorter: string;
|
|
1879
|
+
order: string;
|
|
1880
|
+
};
|
|
1881
|
+
export type TablePageResponse = {
|
|
1882
|
+
data: any[];
|
|
1883
|
+
size: number;
|
|
1884
|
+
};
|
|
1885
|
+
export type TableRowLoader = {
|
|
1886
|
+
load(pageRequest: TablePageRequest, sortRequest: TableSortRequest | null, filterRequest: Record<string, any>): Promise<TablePageResponse>;
|
|
1887
|
+
};
|
|
1888
|
+
/**
|
|
1889
|
+
* @typedef {{ page: number, size: number }} TablePageRequest the zero based
|
|
1890
|
+
* index of the page and the number of rows in a page
|
|
1891
|
+
*/
|
|
1892
|
+
/**
|
|
1893
|
+
* @typedef {{ sorter: string, order: string }} TableSortRequest the sort key
|
|
1894
|
+
* of a column and its direction, `asc` or `desc`
|
|
1895
|
+
*/
|
|
1896
|
+
/**
|
|
1897
|
+
* @typedef {{ data: any[], size: number }} TablePageResponse the rows of the
|
|
1898
|
+
* requested page and the total number of rows across every page
|
|
1899
|
+
*/
|
|
1900
|
+
/**
|
|
1901
|
+
* @typedef {{ load(pageRequest: TablePageRequest, sortRequest: TableSortRequest|null, filterRequest: Record<string, any>): Promise<TablePageResponse> }} TableRowLoader
|
|
1902
|
+
*/
|
|
1903
|
+
/**
|
|
1904
|
+
* The sort control of a table header, `ful-sorter`: a `role="button"` with
|
|
1905
|
+
* `tabindex="0"`, activated by a click or by Enter, NumpadEnter or Space.
|
|
1906
|
+
*
|
|
1907
|
+
* Each activation dispatches `sort:requested` (bubbling, not cancelable) with
|
|
1908
|
+
* `detail.value` set to `{ sorter, order }`: `sorter` is the `sorter`
|
|
1909
|
+
* attribute, read once at the upgrade, and `order` is the one after the
|
|
1910
|
+
* current `order` in the cycle `asc`, `desc`, `null`. The button does not
|
|
1911
|
+
* change its own `order`: whoever handles the event sets it, which `ful-table`
|
|
1912
|
+
* does once the sorted page has loaded.
|
|
1913
|
+
*/
|
|
879
1914
|
declare class SortButton extends ParsedElement {
|
|
880
1915
|
#private;
|
|
881
1916
|
static attributes: string[];
|
|
882
1917
|
static observed: string[];
|
|
883
1918
|
render(): void;
|
|
884
|
-
|
|
885
|
-
|
|
1919
|
+
/**
|
|
1920
|
+
* The direction the column is sorted in, `null` when unsorted.
|
|
1921
|
+
* @returns {string|null}
|
|
1922
|
+
*/
|
|
1923
|
+
get order(): string | null;
|
|
1924
|
+
/**
|
|
1925
|
+
* Reflects the direction to the `order` attribute and sets `aria-sort` on
|
|
1926
|
+
* the enclosing `<th>`, if any: `ascending` for `asc`, `descending` for any
|
|
1927
|
+
* other non-empty value, removed for an empty one.
|
|
1928
|
+
* @param {string|null} value an empty string or `null` means unsorted
|
|
1929
|
+
*/
|
|
1930
|
+
set order(value: string | null);
|
|
886
1931
|
}
|
|
887
|
-
/**
|
|
1932
|
+
/**
|
|
1933
|
+
* The pager, `ful-pagination`: a previous button, a window of page buttons
|
|
1934
|
+
* around the current page, a next button, a reload button and a line saying
|
|
1935
|
+
* which page of how many is shown.
|
|
1936
|
+
*
|
|
1937
|
+
* The window holds at most `pages` buttons (read once at the upgrade, default 5),
|
|
1938
|
+
* centred on the current page and shifted back on the last pages so it stays
|
|
1939
|
+
* full. The current page's button carries `aria-current="page"` and stays
|
|
1940
|
+
* enabled. Previous and next are disabled where there is no page to go to.
|
|
1941
|
+
*
|
|
1942
|
+
* A click on an enabled button other than the current page dispatches
|
|
1943
|
+
* `page:requested` (bubbling, not cancelable) with `detail.value` the zero based
|
|
1944
|
+
* index of the page asked for; the reload button asks for the current page.
|
|
1945
|
+
* The pager does not move itself: whoever handles the event calls `update`,
|
|
1946
|
+
* which `ful-table` does once the page has loaded.
|
|
1947
|
+
*
|
|
1948
|
+
* The icons are the `ful-icon` names in `Pagination.config`.
|
|
1949
|
+
*/
|
|
888
1950
|
declare class Pagination extends ParsedElement {
|
|
889
1951
|
#private;
|
|
890
1952
|
static observed: string[];
|
|
@@ -897,47 +1959,130 @@ declare class Pagination extends ParsedElement {
|
|
|
897
1959
|
static template: string;
|
|
898
1960
|
render(): void;
|
|
899
1961
|
/**
|
|
900
|
-
* Moves the pager to a page, a page count, or both,
|
|
901
|
-
*
|
|
902
|
-
*
|
|
903
|
-
*
|
|
1962
|
+
* Moves the pager to a page, a page count, or both, reflects both to their
|
|
1963
|
+
* attributes and repaints the bar once. A key left out keeps its value; a
|
|
1964
|
+
* `null` one becomes 0. A count below one is shown as one empty page.
|
|
1965
|
+
*
|
|
1966
|
+
* The bar is replaced on every repaint. When the focus was inside it, it
|
|
1967
|
+
* moves to the equivalent control of the new bar: the button of the same
|
|
1968
|
+
* page, else the same enabled control, else the current page's button.
|
|
1969
|
+
* @param {{ current?: number|null, total?: number|null }} [state] `current`
|
|
1970
|
+
* is the zero based index of the page shown, `total` the number of pages
|
|
904
1971
|
*/
|
|
905
1972
|
update({ current: toCurrent, total: toTotal }?: {
|
|
906
1973
|
current?: number | null;
|
|
907
1974
|
total?: number | null;
|
|
908
1975
|
}): void;
|
|
1976
|
+
/**
|
|
1977
|
+
* The number of pages, as last written.
|
|
1978
|
+
* @returns {number}
|
|
1979
|
+
*/
|
|
909
1980
|
get total(): number;
|
|
910
|
-
|
|
1981
|
+
/**
|
|
1982
|
+
* Same as `update({ total: value })`.
|
|
1983
|
+
* @param {number|null} value
|
|
1984
|
+
*/
|
|
1985
|
+
set total(value: number | null);
|
|
1986
|
+
/**
|
|
1987
|
+
* The zero based index of the page shown.
|
|
1988
|
+
* @returns {number}
|
|
1989
|
+
*/
|
|
911
1990
|
get current(): number;
|
|
912
|
-
|
|
1991
|
+
/**
|
|
1992
|
+
* Same as `update({ current: value })`.
|
|
1993
|
+
* @param {number|null} value
|
|
1994
|
+
*/
|
|
1995
|
+
set current(value: number | null);
|
|
913
1996
|
}
|
|
914
1997
|
/** Reads the schema declaration into the header and row templates a table renders from. */
|
|
915
1998
|
declare class TableSchemaParser {
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
1999
|
+
/**
|
|
2000
|
+
* Builds a header `<tr>` and a row `<tr data-tpl-each="rows">` from the
|
|
2001
|
+
* `<schema>` child of the slot. The `<schema>` attributes are copied onto
|
|
2002
|
+
* both rows. Each `<column>` becomes a `<th>` and a `<td>` carrying the
|
|
2003
|
+
* column's attributes except `title`, `sorter` and `order`, so a
|
|
2004
|
+
* `data-tpl-*` on a column applies to both cells; the two templates carry
|
|
2005
|
+
* `inHeaders` and `inRows` in their scope, so a column can tell them apart,
|
|
2006
|
+
* as in `data-tpl-if="inRows"`. The header cell holds the `<title>` child
|
|
2007
|
+
* element of the column, else the text of its `title` attribute, wrapped
|
|
2008
|
+
* in a `ful-sorter` when the column declares `sorter` or `order`. The body
|
|
2009
|
+
* cell holds the column's remaining children.
|
|
2010
|
+
*
|
|
2011
|
+
* The column elements are consumed: their `<title>`, `title`, `sorter` and
|
|
2012
|
+
* `order` are removed and their children moved into the cells.
|
|
2013
|
+
* @param {DocumentFragment|Element|undefined} nodeOrFragment the `schema`
|
|
2014
|
+
* slot, undefined when the table has none
|
|
2015
|
+
* @param {ReturnType<ParsedElement['template']>} template the template the
|
|
2016
|
+
* header and row templates derive from, keeping its scope
|
|
2017
|
+
* @returns {{ headersTemplate: ReturnType<ParsedElement['template']>, rowsTemplate: ReturnType<ParsedElement['template']>, sort: { sorter: string|null, order: string|null } | null, length: number }}
|
|
2018
|
+
* `sort` is the initial sort, taken from the first column declaring both
|
|
2019
|
+
* `order` and `sorter` (a column with only `order` gets an arrow but no
|
|
2020
|
+
* initial sort), `null` when none does; `length` is the number of columns
|
|
2021
|
+
* @throws {Error} when the slot is missing or holds no `<schema>`
|
|
2022
|
+
*/
|
|
2023
|
+
static parse(nodeOrFragment: DocumentFragment | Element | undefined, template: ReturnType<ParsedElement['template']>): {
|
|
2024
|
+
headersTemplate: ReturnType<ParsedElement['template']>;
|
|
2025
|
+
rowsTemplate: ReturnType<ParsedElement['template']>;
|
|
919
2026
|
sort: {
|
|
920
2027
|
sorter: string | null;
|
|
921
2028
|
order: string | null;
|
|
922
|
-
};
|
|
2029
|
+
} | null;
|
|
923
2030
|
length: number;
|
|
924
2031
|
};
|
|
925
2032
|
}
|
|
926
2033
|
/** Serves a table's rows from an array held in memory, applying the sort and the paging itself. */
|
|
927
2034
|
declare class InMemoryTableLoader {
|
|
928
2035
|
#private;
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
2036
|
+
/**
|
|
2037
|
+
* @param {any[]} data the rows
|
|
2038
|
+
*/
|
|
2039
|
+
constructor(data: any[]);
|
|
2040
|
+
/**
|
|
2041
|
+
* Sorts a copy of the rows by the `sorter` property, rows missing it last
|
|
2042
|
+
* in either direction and rows with equal values in their original order,
|
|
2043
|
+
* then slices the requested page. The filters are ignored.
|
|
2044
|
+
* @param {TablePageRequest} pageRequest
|
|
2045
|
+
* @param {{ sorter?: string|null, order?: string|null } | null} sortRequest
|
|
2046
|
+
* `order` `desc` sorts descending, anything else ascending; no `sorter`
|
|
2047
|
+
* keeps the original order
|
|
2048
|
+
* @param {Record<string, any>} filterRequest not read
|
|
2049
|
+
* @returns {Promise<TablePageResponse>}
|
|
2050
|
+
*/
|
|
2051
|
+
load(pageRequest: TablePageRequest, sortRequest: {
|
|
2052
|
+
sorter?: string | null;
|
|
2053
|
+
order?: string | null;
|
|
2054
|
+
} | null, filterRequest: Record<string, any>): Promise<TablePageResponse>;
|
|
2055
|
+
/**
|
|
2056
|
+
* Replaces the rows. The table shows them at its next load.
|
|
2057
|
+
* @param {any[]} data
|
|
2058
|
+
*/
|
|
2059
|
+
update(data: any[]): void;
|
|
935
2060
|
}
|
|
936
2061
|
/** Requests one page of rows from a url, passing the page, the sort and the filters to the endpoint. */
|
|
937
2062
|
declare class RemoteTableLoader {
|
|
938
2063
|
#private;
|
|
939
|
-
|
|
940
|
-
|
|
2064
|
+
/**
|
|
2065
|
+
* @param {{ request(method: string, url: string): any }} http the `http-client` component
|
|
2066
|
+
* @param {string} url
|
|
2067
|
+
* @param {string} method
|
|
2068
|
+
* @param {(response: any) => TablePageResponse} [responseMapper] turns the
|
|
2069
|
+
* parsed json body into the page response; the identity when omitted
|
|
2070
|
+
*/
|
|
2071
|
+
constructor(http: {
|
|
2072
|
+
request(method: string, url: string): any;
|
|
2073
|
+
}, url: string, method: string, responseMapper?: (response: any) => TablePageResponse);
|
|
2074
|
+
/**
|
|
2075
|
+
* Sends the query parameters `page`, `size`, `sort` as `sorter,order`
|
|
2076
|
+
* (left out when `sortRequest` is null) and `filters` as a json object of
|
|
2077
|
+
* the filters with a truthy value (left out when there is none), and
|
|
2078
|
+
* answers the json body through the response mapper.
|
|
2079
|
+
* @param {TablePageRequest} pageRequest
|
|
2080
|
+
* @param {TableSortRequest|null} sortRequest
|
|
2081
|
+
* @param {Record<string, any>} filterRequest
|
|
2082
|
+
* @returns {Promise<TablePageResponse>} rejecting with what the client's
|
|
2083
|
+
* `fetchJson()` rejects with
|
|
2084
|
+
*/
|
|
2085
|
+
load(pageRequest: TablePageRequest, sortRequest: TableSortRequest | null, filterRequest: Record<string, any>): Promise<TablePageResponse>;
|
|
941
2086
|
}
|
|
942
2087
|
/**
|
|
943
2088
|
* Builds the table's loader from its attributes: an in-memory one, or the
|
|
@@ -945,23 +2090,55 @@ declare class RemoteTableLoader {
|
|
|
945
2090
|
*
|
|
946
2091
|
* A component registered under the `loader` attribute replaces this one and
|
|
947
2092
|
* must implement `load(pageRequest, sortRequest, filterRequest)`, answering
|
|
948
|
-
* `{ data,
|
|
949
|
-
* index and its size, `sortRequest` the column and direction, and
|
|
2093
|
+
* `{ data, size }`: the rows of the requested page and the total count of
|
|
2094
|
+
* rows. `pageRequest` carries the page index and its size, `sortRequest` the column and direction, and
|
|
950
2095
|
* `filterRequest` the values of the filters in the slot.
|
|
951
2096
|
*/
|
|
952
2097
|
declare class TableLoader {
|
|
953
|
-
|
|
2098
|
+
/**
|
|
2099
|
+
* A table with a `src` attribute gets a `RemoteTableLoader` sending through
|
|
2100
|
+
* the `http-client` component with the `method` attribute or `GET`, and
|
|
2101
|
+
* mapping the response through the component named by `response-mapper`,
|
|
2102
|
+
* if any. A table without `src` gets an empty `InMemoryTableLoader`, which
|
|
2103
|
+
* `withLoader` reaches to give it rows.
|
|
2104
|
+
* @param {Element & { component(name: string): any }} el the table
|
|
2105
|
+
* @param {unknown} [conf] not read
|
|
2106
|
+
* @returns {InMemoryTableLoader | RemoteTableLoader}
|
|
2107
|
+
*/
|
|
2108
|
+
static create(el: Element & {
|
|
2109
|
+
component(name: string): any;
|
|
2110
|
+
}, conf?: unknown): InMemoryTableLoader | RemoteTableLoader;
|
|
954
2111
|
}
|
|
955
|
-
/**
|
|
2112
|
+
/**
|
|
2113
|
+
* A table, `ful-table`, loading its rows a page at a time from a loader, with
|
|
2114
|
+
* a header sorter per sortable column, a `ful-pagination` under it and an
|
|
2115
|
+
* optional filter form.
|
|
2116
|
+
*
|
|
2117
|
+
* The loader is the component named by `loader`, default `loaders:table`
|
|
2118
|
+
* (see `TableLoader`). The `schema` slot declares the columns (see
|
|
2119
|
+
* `TableSchemaParser.parse`); the `filters` slot is wrapped in a `ful-form`,
|
|
2120
|
+
* whose values are the filter request; the `caption`, `footer` and `empty`
|
|
2121
|
+
* slots go in the table's caption, its `<tfoot>` and the panel shown for a
|
|
2122
|
+
* load answering no rows. Attributes starting with `table-` are forwarded,
|
|
2123
|
+
* without the prefix, to the inner `<table>`.
|
|
2124
|
+
*
|
|
2125
|
+
* With `autoload` the first load starts at the upgrade, which does not wait
|
|
2126
|
+
* for it. Without it the table shows an initial panel until `load`,
|
|
2127
|
+
* `reload` or `resetWithFilter` is called.
|
|
2128
|
+
*
|
|
2129
|
+
* Inside the table a `page:requested` loads that page with the current size,
|
|
2130
|
+
* sort and filters; a `sort:requested` loads the current page with the new
|
|
2131
|
+
* sort (none for a `null` order) and, once that load is the one showing, sets
|
|
2132
|
+
* the order of the sorter that asked and clears the others; a `submit:success`
|
|
2133
|
+
* of the filter form loads the first page with the submitted request as the
|
|
2134
|
+
* filters. The loads these start, and the autoload, are not awaited by
|
|
2135
|
+
* anything: a failure shows the error panel and its rejection is unhandled.
|
|
2136
|
+
*/
|
|
956
2137
|
declare class Table extends ParsedElement {
|
|
957
2138
|
#private;
|
|
2139
|
+
/** Read once at the upgrade. */
|
|
958
2140
|
static attributes: string[];
|
|
959
|
-
/**
|
|
960
|
-
* The page size stays live: a rows-per-page control is a normal thing to
|
|
961
|
-
* put next to a table, and the size is the one piece of the request an
|
|
962
|
-
* author changes after the table is up. The rest of the request is the
|
|
963
|
-
* table's own state, moved by the pager, the sorters and the filter form.
|
|
964
|
-
*/
|
|
2141
|
+
/** These stay live after the upgrade: see `pageSize`, `src` and `method`. */
|
|
965
2142
|
static observed: string[];
|
|
966
2143
|
static slots: boolean;
|
|
967
2144
|
static config: {
|
|
@@ -972,26 +2149,224 @@ declare class Table extends ParsedElement {
|
|
|
972
2149
|
static templates: {
|
|
973
2150
|
row: string;
|
|
974
2151
|
};
|
|
975
|
-
/**
|
|
2152
|
+
/**
|
|
2153
|
+
* How many rows a page asks the loader for: the size the next load will
|
|
2154
|
+
* carry. Ten before the render.
|
|
2155
|
+
* @returns {number}
|
|
2156
|
+
*/
|
|
976
2157
|
get pageSize(): number;
|
|
977
2158
|
/**
|
|
978
|
-
* Changes the page size and reloads from the first page, the
|
|
979
|
-
*
|
|
980
|
-
*
|
|
981
|
-
*
|
|
2159
|
+
* Changes the page size and reloads from the first page, keeping the sort
|
|
2160
|
+
* and the filters. A table that has not loaded yet only records it:
|
|
2161
|
+
* writing the size is not a request to start loading, which is what
|
|
2162
|
+
* `autoload` and `reload()` are for. A write that does not change the size
|
|
2163
|
+
* does nothing. A write made before the render is replaced by the declared
|
|
2164
|
+
* `page-size` when the table renders.
|
|
982
2165
|
*
|
|
983
|
-
*
|
|
984
|
-
*
|
|
2166
|
+
* The reload is not awaited: a failure shows the error panel and its
|
|
2167
|
+
* rejection is unhandled.
|
|
2168
|
+
* @param {number|null|undefined} value absent or null is the default of
|
|
2169
|
+
* ten, so removing the attribute restores it
|
|
2170
|
+
*/
|
|
2171
|
+
set pageSize(value: number | null | undefined);
|
|
2172
|
+
/**
|
|
2173
|
+
* The url the loader asks for rows, reflected as the `src` attribute.
|
|
2174
|
+
* @returns {string|null}
|
|
2175
|
+
*/
|
|
2176
|
+
get src(): string | null;
|
|
2177
|
+
/**
|
|
2178
|
+
* Points the table at another url: the loader is built again through its
|
|
2179
|
+
* component's `create`, as at the render, and the table reloads from the
|
|
2180
|
+
* first page, keeping the size, the sort and the filters. A table that has
|
|
2181
|
+
* not loaded yet only rebuilds its loader. A write that does not change the
|
|
2182
|
+
* url does nothing.
|
|
2183
|
+
*
|
|
2184
|
+
* The reload is not awaited: a failure shows the error panel and its
|
|
2185
|
+
* rejection is unhandled.
|
|
2186
|
+
* @param {string|null|undefined} value null or undefined removes the url,
|
|
2187
|
+
* which the default loader answers with an empty in-memory loader
|
|
2188
|
+
*/
|
|
2189
|
+
set src(value: string | null | undefined);
|
|
2190
|
+
/**
|
|
2191
|
+
* The http method the default loader sends with, reflected as the `method`
|
|
2192
|
+
* attribute; `GET` when absent.
|
|
2193
|
+
* @returns {string|null}
|
|
2194
|
+
*/
|
|
2195
|
+
get method(): string | null;
|
|
2196
|
+
/**
|
|
2197
|
+
* Changes the http method the way `src` changes the url: the loader is
|
|
2198
|
+
* built again and the table reloads from the first page.
|
|
2199
|
+
* @param {string|null|undefined} value
|
|
2200
|
+
*/
|
|
2201
|
+
set method(value: string | null | undefined);
|
|
2202
|
+
/**
|
|
2203
|
+
* Writes `src` and `method` together and loads once: the loader is built
|
|
2204
|
+
* again for the pair when either changed, the page going back to the first
|
|
2205
|
+
* one as a single write of either does, and the table then reloads as
|
|
2206
|
+
* `reload()` does, whether or not they changed. Unlike a write of either,
|
|
2207
|
+
* it loads a table that has not loaded yet.
|
|
2208
|
+
* @param {{ src?: string|null, method?: string|null }} attributes a name
|
|
2209
|
+
* left out keeps its value, null removes the attribute
|
|
2210
|
+
* @returns {Promise<void>} as `load`
|
|
2211
|
+
*/
|
|
2212
|
+
reconfigure(attributes: {
|
|
2213
|
+
src?: string | null;
|
|
2214
|
+
method?: string | null;
|
|
2215
|
+
}): Promise<void>;
|
|
2216
|
+
/**
|
|
2217
|
+
* @param {{ slots: Record<string, DocumentFragment> }} c
|
|
2218
|
+
* @returns {Promise<void>}
|
|
2219
|
+
* @throws {Error} when the `schema` slot is missing or holds no `<schema>`
|
|
985
2220
|
*/
|
|
986
|
-
set pageSize(value: number);
|
|
987
2221
|
render({ slots }: {
|
|
988
|
-
slots:
|
|
2222
|
+
slots: Record<string, DocumentFragment>;
|
|
989
2223
|
}): Promise<void>;
|
|
2224
|
+
/**
|
|
2225
|
+
* Loads the last request that loaded, or, before any has, the first page
|
|
2226
|
+
* with the declared size and sort and the values of the filters slot. A
|
|
2227
|
+
* size written through `pageSize` since then replaces the page with the
|
|
2228
|
+
* first one at that size.
|
|
2229
|
+
* @returns {Promise<void>} as `load`
|
|
2230
|
+
*/
|
|
990
2231
|
reload(): Promise<void>;
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
2232
|
+
/**
|
|
2233
|
+
* Asks the loader for a page and shows it.
|
|
2234
|
+
*
|
|
2235
|
+
* While the load runs the table carries `aria-busy="true"`, and the rows
|
|
2236
|
+
* already shown stay; the spinner panel shows only when there are none.
|
|
2237
|
+
* When the loader answers, the rows and the pager are replaced, the empty
|
|
2238
|
+
* panel shows for an answer with no rows (the `empty` slot rendered with
|
|
2239
|
+
* `schema`, `pageRequest`, `filterRequest` and `pageResponse` in scope),
|
|
2240
|
+
* the request becomes the one
|
|
2241
|
+
* `reload` repeats, `aria-busy` is removed and `load:success` is
|
|
2242
|
+
* dispatched (bubbling, not cancelable) with `detail` set to
|
|
2243
|
+
* `{ pageRequest, sortRequest, filterRequest, response }`. A page beyond
|
|
2244
|
+
* the last one the answer reports is not shown: the last page is loaded
|
|
2245
|
+
* instead, and the returned promise settles with that load.
|
|
2246
|
+
*
|
|
2247
|
+
* When the loader rejects, the rows are removed, the error panel shows the
|
|
2248
|
+
* `reason` of each of the error's `problems`, one per line, or the error as text,
|
|
2249
|
+
* `aria-busy` is removed, `load:failure` is dispatched (bubbling, not
|
|
2250
|
+
* cancelable) with `detail` set to
|
|
2251
|
+
* `{ pageRequest, sortRequest, filterRequest, exception }`, and the
|
|
2252
|
+
* returned promise rejects with the same error.
|
|
2253
|
+
*
|
|
2254
|
+
* A load started after this one supersedes it: when this one's answer or
|
|
2255
|
+
* failure arrives it changes nothing, dispatches nothing and resolves.
|
|
2256
|
+
* @param {TablePageRequest} pageRequest
|
|
2257
|
+
* @param {TableSortRequest|null} sortRequest
|
|
2258
|
+
* @param {Record<string, any>} filterRequest
|
|
2259
|
+
* @returns {Promise<void>}
|
|
2260
|
+
* @throws what the loader rejects with, unless a newer load superseded this one
|
|
2261
|
+
*/
|
|
2262
|
+
load(pageRequest: TablePageRequest, sortRequest: TableSortRequest | null, filterRequest: Record<string, any>): Promise<void>;
|
|
2263
|
+
/**
|
|
2264
|
+
* Hands the loader to the callback, for runtime reconfigurations, such as
|
|
2265
|
+
* `update(rows)` on the in-memory loader. The loader exists from the
|
|
2266
|
+
* render on. Nothing is reloaded.
|
|
2267
|
+
* @template T
|
|
2268
|
+
* @param {(loader: any) => T | Promise<T>} fn
|
|
2269
|
+
* @returns {Promise<T>} what `fn` returns or resolves to
|
|
2270
|
+
*/
|
|
2271
|
+
withLoader<T>(fn: (loader: any) => T | Promise<T>): Promise<T>;
|
|
2272
|
+
/**
|
|
2273
|
+
* Loads the first page with the given filters, keeping the size and the sort.
|
|
2274
|
+
* @param {Record<string, any>} filterRequest
|
|
2275
|
+
* @returns {Promise<void>} as `load`
|
|
2276
|
+
*/
|
|
2277
|
+
resetWithFilter(filterRequest: Record<string, any>): Promise<void>;
|
|
2278
|
+
}
|
|
2279
|
+
/**
|
|
2280
|
+
* An invoker button paired with the `ul[popover][role=menu]` that follows it:
|
|
2281
|
+
* the chrome behind every filter's operator, sensitivity and boolean value.
|
|
2282
|
+
*
|
|
2283
|
+
* It fills the menu from a vocabulary, wires it the first time more than one
|
|
2284
|
+
* choice survives the whitelist, pins the button to a static glyph when a
|
|
2285
|
+
* single one does, takes the shared menu keyboard protocol, and keeps the
|
|
2286
|
+
* button's value, glyph and aria-label in step. A pick that changes the value
|
|
2287
|
+
* calls back; the host decides what that means.
|
|
2288
|
+
*
|
|
2289
|
+
* The button's `value` attribute is the store, as it is for a native control:
|
|
2290
|
+
* the menu protocol finds the current item by it, and nothing mirrors it.
|
|
2291
|
+
*/
|
|
2292
|
+
declare class ChoiceButton {
|
|
2293
|
+
#private;
|
|
2294
|
+
/**
|
|
2295
|
+
* The declared choices narrowed to a vocabulary, in the declared order.
|
|
2296
|
+
* When none of them is in the vocabulary, or none is declared, the answer
|
|
2297
|
+
* is a copy of the whole vocabulary.
|
|
2298
|
+
* @param {string[] | null | undefined} declared
|
|
2299
|
+
* @param {string[]} vocabulary
|
|
2300
|
+
* @returns {string[]}
|
|
2301
|
+
*/
|
|
2302
|
+
static narrow(declared: string[] | null | undefined, vocabulary: string[]): string[];
|
|
2303
|
+
/**
|
|
2304
|
+
* Takes the button's next sibling as its menu and listens for picks on it.
|
|
2305
|
+
* The menu is neither filled nor wired until `allowed` is first written.
|
|
2306
|
+
*
|
|
2307
|
+
* A click on an item, while `interactive()` answers true, sets the value,
|
|
2308
|
+
* hides the menu and, when the value changed, calls `onPick`.
|
|
2309
|
+
* @param {HTMLElement} button the invoker, whose next sibling is its menu
|
|
2310
|
+
* @param {{vocabulary: string[], glyphs?: Record<string,string>, labelFor?: (v: string) => string,
|
|
2311
|
+
* display?: ((v: string) => string)|null, interactive?: () => boolean, onPick?: (v: string) => void}} conf
|
|
2312
|
+
* `vocabulary` lists every choice; `glyphs` maps a choice to its compact
|
|
2313
|
+
* glyph; `labelFor` answers the localized word, used as the button's
|
|
2314
|
+
* `aria-label` and beside the glyph in the menu (the choice itself by
|
|
2315
|
+
* default); `display` answers the button's text (by default the glyph,
|
|
2316
|
+
* or the choice where it has none); `interactive` is asked before a
|
|
2317
|
+
* pick is taken; `onPick` receives a pick that changed the value
|
|
2318
|
+
*/
|
|
2319
|
+
constructor(button: HTMLElement, { vocabulary, glyphs, labelFor, display, interactive, onPick }: {
|
|
2320
|
+
vocabulary: string[];
|
|
2321
|
+
glyphs?: Record<string, string>;
|
|
2322
|
+
labelFor?: (v: string) => string;
|
|
2323
|
+
display?: ((v: string) => string) | null;
|
|
2324
|
+
interactive?: () => boolean;
|
|
2325
|
+
onPick?: (v: string) => void;
|
|
2326
|
+
});
|
|
2327
|
+
/**
|
|
2328
|
+
* The choices the menu offers. Writing it narrows the declared set with
|
|
2329
|
+
* `narrow`, refills the menu, wires the popover and the menu keyboard the
|
|
2330
|
+
* first time more than one choice is allowed, and updates the button's
|
|
2331
|
+
* disabled state and popup attributes. When one choice is left the button
|
|
2332
|
+
* is pinned and the value is set to it.
|
|
2333
|
+
* @type {string[]}
|
|
2334
|
+
*/
|
|
2335
|
+
get allowed(): string[];
|
|
2336
|
+
set allowed(declared: string[]);
|
|
2337
|
+
/**
|
|
2338
|
+
* The choice when the menu allows it, otherwise the first allowed one.
|
|
2339
|
+
* @param {string|null} choice
|
|
2340
|
+
* @returns {string}
|
|
2341
|
+
*/
|
|
2342
|
+
preferring(choice: string | null): string;
|
|
2343
|
+
/**
|
|
2344
|
+
* Whether fewer than two choices are allowed. A pinned button is disabled,
|
|
2345
|
+
* opens no menu and shows the single choice as its value.
|
|
2346
|
+
* @returns {boolean}
|
|
2347
|
+
*/
|
|
2348
|
+
get pinned(): boolean;
|
|
2349
|
+
/**
|
|
2350
|
+
* The host's fixed claim: hides the button with the `hidden` attribute
|
|
2351
|
+
* while `value` keeps answering.
|
|
2352
|
+
* @param {boolean} fixed
|
|
2353
|
+
*/
|
|
2354
|
+
set fixed(fixed: boolean);
|
|
2355
|
+
/**
|
|
2356
|
+
* The current choice, stored as the button's `value` attribute, where the
|
|
2357
|
+
* menu keyboard also finds it. Writing it sets the button's text from
|
|
2358
|
+
* `display`, its `aria-label` from `labelFor`, and `aria-checked` on the
|
|
2359
|
+
* menu item carrying it. It does not call `onPick`.
|
|
2360
|
+
* @type {string | null}
|
|
2361
|
+
*/
|
|
2362
|
+
get value(): string | null;
|
|
2363
|
+
set value(choice: string | null);
|
|
2364
|
+
/**
|
|
2365
|
+
* The host's disabled claim. The button is disabled while either the claim
|
|
2366
|
+
* or the pin holds, so lifting one does not enable it while the other holds.
|
|
2367
|
+
* @param {boolean} claimed
|
|
2368
|
+
*/
|
|
2369
|
+
set claimed(claimed: boolean);
|
|
995
2370
|
}
|
|
996
2371
|
export type FilterCriterion = {
|
|
997
2372
|
label: string | null;
|
|
@@ -1002,55 +2377,134 @@ export type FilterCriterion = {
|
|
|
1002
2377
|
* The shared shape of every operator-and-operands filter: an operator menu, one
|
|
1003
2378
|
* or two operands of the type the subclass declares, and a tuple that mirrors
|
|
1004
2379
|
* the data-jpa compare annotations.
|
|
2380
|
+
*
|
|
2381
|
+
* The value is `[operator, operand]`, or `[operator, from, to]` for BETWEEN,
|
|
2382
|
+
* the only operator that shows the second operand. The `operators` attribute
|
|
2383
|
+
* whitelists the menu; the `operator` attribute fixes the operator for the
|
|
2384
|
+
* element's life instead, hiding its button, and every tuple then carries it.
|
|
2385
|
+
* Declaring both warns and the singular wins; a fixed name outside the
|
|
2386
|
+
* vocabulary warns and fixes the default operator.
|
|
2387
|
+
*
|
|
2388
|
+
* Both operands mirror the disabled and readonly claims, and readonly also
|
|
2389
|
+
* refuses the clicks that would open the operator menu. The change event fires
|
|
2390
|
+
* when either operand changes or a different operator is picked.
|
|
1005
2391
|
*/
|
|
1006
2392
|
declare class CompareFilter extends Input {
|
|
1007
2393
|
#private;
|
|
1008
2394
|
static observed: string[];
|
|
1009
2395
|
static attributes: string[];
|
|
1010
|
-
static OPERATORS: string[];
|
|
1011
|
-
static DEFAULT_OPERATOR: string;
|
|
1012
2396
|
static template: string;
|
|
1013
2397
|
_operator: any;
|
|
1014
2398
|
_container: any;
|
|
1015
2399
|
_value1: any;
|
|
1016
2400
|
_value2: any;
|
|
1017
2401
|
_build(conf: any): {
|
|
1018
|
-
fragment:
|
|
2402
|
+
fragment: DocumentFragment;
|
|
1019
2403
|
control: any;
|
|
1020
|
-
error:
|
|
1021
|
-
label:
|
|
2404
|
+
error: Element | null;
|
|
2405
|
+
label: HTMLLabelElement | null;
|
|
1022
2406
|
freeze: any;
|
|
1023
2407
|
also: any[];
|
|
1024
2408
|
};
|
|
1025
2409
|
_showDefaultOperator(): void;
|
|
2410
|
+
/**
|
|
2411
|
+
* Restores the declared `value` tuple, operator included, as a field reset
|
|
2412
|
+
* does. Without a `value` attribute it empties the operands and also shows
|
|
2413
|
+
* the default operator again, or the first whitelisted one where the
|
|
2414
|
+
* default is not allowed.
|
|
2415
|
+
*/
|
|
1026
2416
|
formResetCallback(): void;
|
|
2417
|
+
/**
|
|
2418
|
+
* The native input type both operands render with.
|
|
2419
|
+
* @returns {string}
|
|
2420
|
+
*/
|
|
1027
2421
|
_type(): string;
|
|
1028
|
-
|
|
1029
|
-
|
|
2422
|
+
/**
|
|
2423
|
+
* Converts an operand from its input's value to the form the tuple carries.
|
|
2424
|
+
* @param {string} v
|
|
2425
|
+
* @returns {string|null}
|
|
2426
|
+
*/
|
|
2427
|
+
_serialize(v: string): string | null;
|
|
2428
|
+
/**
|
|
2429
|
+
* Converts an operand from the tuple to the value its input shows.
|
|
2430
|
+
* @param {string} v
|
|
2431
|
+
* @returns {string}
|
|
2432
|
+
*/
|
|
2433
|
+
_deserialize(v: string): string;
|
|
2434
|
+
/**
|
|
2435
|
+
* The operator shown on render and after a valueless reset, when the whitelist allows it.
|
|
2436
|
+
* @returns {string}
|
|
2437
|
+
*/
|
|
1030
2438
|
_defaultOperator(): string;
|
|
2439
|
+
/**
|
|
2440
|
+
* Every operator the filter knows, which `operators` narrows.
|
|
2441
|
+
* @returns {string[]}
|
|
2442
|
+
*/
|
|
1031
2443
|
_vocabulary(): string[];
|
|
1032
2444
|
_declaredOperators: any;
|
|
1033
|
-
|
|
1034
|
-
|
|
2445
|
+
/**
|
|
2446
|
+
* The operators the menu offers, narrowed to the vocabulary: an empty list,
|
|
2447
|
+
* or one where no name is known, offers all of it. A single operator pins
|
|
2448
|
+
* the button, and an assigned tuple then carries that operator whatever it
|
|
2449
|
+
* names. An assignment made before the upgrade is held narrowed and
|
|
2450
|
+
* answered back until the render, when the `operators` attribute is applied
|
|
2451
|
+
* over it, an absent attribute meaning the whole vocabulary. Assignments are
|
|
2452
|
+
* ignored while the `operator` attribute fixes the operator.
|
|
2453
|
+
* @returns {string[]|undefined} undefined before the upgrade when nothing was assigned
|
|
2454
|
+
*/
|
|
2455
|
+
get operators(): string[] | undefined;
|
|
2456
|
+
/** @param {string[]|null} declared */
|
|
2457
|
+
set operators(declared: string[] | null);
|
|
2458
|
+
/**
|
|
2459
|
+
* The filter's tuple, `[operator, operand]` or `[operator, from, to]` for
|
|
2460
|
+
* BETWEEN, each operand converted by `_serialize` (an ISO instant for the
|
|
2461
|
+
* instant filter). Null while any operand the operator uses is empty.
|
|
2462
|
+
* @returns {any[]|null}
|
|
2463
|
+
*/
|
|
1035
2464
|
get value(): any[] | null;
|
|
1036
|
-
|
|
2465
|
+
/**
|
|
2466
|
+
* Shows a tuple: the operator it names, unless a pinned or fixed operator
|
|
2467
|
+
* replaces it, and its operands, an operand missing from a shorter tuple
|
|
2468
|
+
* leaving its input empty. Null or undefined empties both operands and
|
|
2469
|
+
* keeps the operator.
|
|
2470
|
+
* @param {any[]|null|undefined} v
|
|
2471
|
+
*/
|
|
2472
|
+
set value(v: any[] | null | undefined);
|
|
1037
2473
|
_tuple(): any[] | null;
|
|
1038
2474
|
_applyTuple(v: any): void;
|
|
1039
2475
|
_showOperator(operator: any): void;
|
|
1040
|
-
/** only
|
|
2476
|
+
/** Shows the second operand only while the operator is BETWEEN. */
|
|
1041
2477
|
_syncBetween(): void;
|
|
1042
2478
|
/**
|
|
1043
|
-
* The
|
|
1044
|
-
*
|
|
2479
|
+
* The operator and the operands the operator uses, as their inputs show
|
|
2480
|
+
* them rather than as serialized: a date filter describes what is in its
|
|
2481
|
+
* control, not the ISO string it sends. Null while every one of those
|
|
2482
|
+
* operands is empty, so a BETWEEN with one bound answers that bound while
|
|
2483
|
+
* its value is still null.
|
|
1045
2484
|
* @returns {FilterCriterion|null}
|
|
1046
2485
|
*/
|
|
1047
2486
|
get criterion(): FilterCriterion | null;
|
|
2487
|
+
/**
|
|
2488
|
+
* The field's own disabled claim. Setting it disables both operands and
|
|
2489
|
+
* every menu button the filter composes; a button pinned to one choice
|
|
2490
|
+
* stays disabled when the claim is lifted.
|
|
2491
|
+
* @returns {boolean}
|
|
2492
|
+
*/
|
|
1048
2493
|
get disabled(): boolean;
|
|
2494
|
+
/** @param {boolean} d */
|
|
1049
2495
|
set disabled(d: boolean);
|
|
1050
|
-
/**
|
|
1051
|
-
|
|
2496
|
+
/**
|
|
2497
|
+
* The menu buttons the filter composes, which the disabled claim reaches. A
|
|
2498
|
+
* subclass adding a menu appends its own to the base's.
|
|
2499
|
+
* @returns {ChoiceButton[]}
|
|
2500
|
+
*/
|
|
2501
|
+
_choices(): ChoiceButton[];
|
|
1052
2502
|
}
|
|
1053
|
-
/**
|
|
2503
|
+
/**
|
|
2504
|
+
* The compare filter over ISO instants, defaulting to LTE. The operands are
|
|
2505
|
+
* shown as local date and time in the page's timezone and carried in the tuple
|
|
2506
|
+
* as UTC ISO instants.
|
|
2507
|
+
*/
|
|
1054
2508
|
declare class InstantFilter extends CompareFilter {
|
|
1055
2509
|
_defaultOperator(): string;
|
|
1056
2510
|
_type(): string;
|
|
@@ -1065,9 +2519,18 @@ declare class LocalDateFilter extends CompareFilter {
|
|
|
1065
2519
|
declare class NumberFilter extends CompareFilter {
|
|
1066
2520
|
_type(): string;
|
|
1067
2521
|
}
|
|
1068
|
-
/**
|
|
2522
|
+
/**
|
|
2523
|
+
* The compare filter over text, defaulting to CONTAINS and adding CONTAINS,
|
|
2524
|
+
* STARTS_WITH and ENDS_WITH to the compare operators.
|
|
2525
|
+
*
|
|
2526
|
+
* Its tuple carries a case sensitivity after the operator, `[operator,
|
|
2527
|
+
* sensitivity, operand]` or `[operator, sensitivity, from, to]`, the
|
|
2528
|
+
* sensitivity being IGNORE_CASE (the default) or CASE_SENSITIVE and switched
|
|
2529
|
+
* through a second menu. The `sensitivities` attribute whitelists that menu and
|
|
2530
|
+
* `sensitivity` fixes one mode, with the same rules and warnings as
|
|
2531
|
+
* `operators` and `operator`.
|
|
2532
|
+
*/
|
|
1069
2533
|
declare class TextFilter extends CompareFilter {
|
|
1070
|
-
#private;
|
|
1071
2534
|
static observed: string[];
|
|
1072
2535
|
static attributes: string[];
|
|
1073
2536
|
static template: string;
|
|
@@ -1075,27 +2538,71 @@ declare class TextFilter extends CompareFilter {
|
|
|
1075
2538
|
_vocabulary(): string[];
|
|
1076
2539
|
_sensitivityButton: any;
|
|
1077
2540
|
_build(conf: any): {
|
|
1078
|
-
fragment:
|
|
2541
|
+
fragment: DocumentFragment;
|
|
1079
2542
|
control: any;
|
|
1080
|
-
error:
|
|
1081
|
-
label:
|
|
2543
|
+
error: Element | null;
|
|
2544
|
+
label: HTMLLabelElement | null;
|
|
1082
2545
|
freeze: any;
|
|
1083
2546
|
also: any[];
|
|
1084
2547
|
};
|
|
1085
2548
|
_choices(): any[];
|
|
1086
2549
|
get _sensitivity(): any;
|
|
1087
2550
|
_declaredSensitivities: any;
|
|
1088
|
-
|
|
1089
|
-
|
|
2551
|
+
/**
|
|
2552
|
+
* The sensitivities the menu offers, narrowed to IGNORE_CASE and
|
|
2553
|
+
* CASE_SENSITIVE: an empty list, or one where no name is known, offers both.
|
|
2554
|
+
* When the mode shown leaves the list, the first listed one is shown. Held
|
|
2555
|
+
* before the upgrade and ignored under a fixed `sensitivity`, as `operators` is.
|
|
2556
|
+
* @returns {string[]|undefined} undefined before the upgrade when nothing was assigned
|
|
2557
|
+
*/
|
|
2558
|
+
get sensitivities(): string[] | undefined;
|
|
2559
|
+
/** @param {string[]|null} declared */
|
|
2560
|
+
set sensitivities(declared: string[] | null);
|
|
2561
|
+
/**
|
|
2562
|
+
* The tuple with the sensitivity after the operator, `[operator,
|
|
2563
|
+
* sensitivity, ...operands]`. Null while any operand the operator uses is empty.
|
|
2564
|
+
* @returns {any[]|null}
|
|
2565
|
+
*/
|
|
1090
2566
|
get value(): any[] | null;
|
|
1091
|
-
|
|
2567
|
+
/**
|
|
2568
|
+
* Shows a tuple as the compare filter does, reading the sensitivity at
|
|
2569
|
+
* index 1. A sensitivity the whitelist does not allow leaves the current
|
|
2570
|
+
* one in place. Null or undefined empties the operands and keeps the
|
|
2571
|
+
* operator and the sensitivity.
|
|
2572
|
+
* @param {any[]|null|undefined} v
|
|
2573
|
+
*/
|
|
2574
|
+
set value(v: any[] | null | undefined);
|
|
2575
|
+
/**
|
|
2576
|
+
* Restores the declared `value` tuple, sensitivity included. Without a
|
|
2577
|
+
* `value` attribute it also shows the default operator and IGNORE_CASE
|
|
2578
|
+
* again, or the first whitelisted mode where IGNORE_CASE is not allowed.
|
|
2579
|
+
*/
|
|
1092
2580
|
formResetCallback(): void;
|
|
1093
2581
|
}
|
|
1094
|
-
/**
|
|
2582
|
+
/**
|
|
2583
|
+
* The boolean filter: an EQ or NEQ operator menu and a value menu of any, yes
|
|
2584
|
+
* and no, the value button showing the localized word.
|
|
2585
|
+
*
|
|
2586
|
+
* The value is `[operator, 'true']` or `[operator, 'false']`, null while the
|
|
2587
|
+
* value menu is on any. The `operators` attribute whitelists the operator menu
|
|
2588
|
+
* as on the compare filters. The disabled claim reaches the value button and
|
|
2589
|
+
* both menus, and readonly refuses the clicks that would open them. The
|
|
2590
|
+
* required and readonly claims reflect on the host only: no `aria-required` or
|
|
2591
|
+
* `aria-readonly` is written, since the value button's role accepts neither.
|
|
2592
|
+
*/
|
|
1095
2593
|
declare class BooleanFilter extends Field {
|
|
1096
2594
|
static observed: string[];
|
|
1097
2595
|
static slots: boolean;
|
|
2596
|
+
/**
|
|
2597
|
+
* The operators the filter knows, which `operators` narrows.
|
|
2598
|
+
* @type {string[]}
|
|
2599
|
+
*/
|
|
1098
2600
|
static OPERATORS: string[];
|
|
2601
|
+
/**
|
|
2602
|
+
* The operator shown on render and after a valueless reset, or the first
|
|
2603
|
+
* whitelisted one where the whitelist excludes it.
|
|
2604
|
+
* @type {string}
|
|
2605
|
+
*/
|
|
1099
2606
|
static DEFAULT_OPERATOR: string;
|
|
1100
2607
|
static template: string;
|
|
1101
2608
|
_operator: any;
|
|
@@ -1104,64 +2611,128 @@ declare class BooleanFilter extends Field {
|
|
|
1104
2611
|
_build({ slots }: {
|
|
1105
2612
|
slots: any;
|
|
1106
2613
|
}): {
|
|
1107
|
-
fragment:
|
|
1108
|
-
control:
|
|
1109
|
-
error:
|
|
1110
|
-
label:
|
|
2614
|
+
fragment: DocumentFragment;
|
|
2615
|
+
control: HTMLElement;
|
|
2616
|
+
error: Element | null;
|
|
2617
|
+
label: HTMLLabelElement | null;
|
|
1111
2618
|
announces: null;
|
|
1112
2619
|
freeze: any;
|
|
1113
2620
|
};
|
|
1114
2621
|
_declaredOperators: any;
|
|
1115
|
-
|
|
1116
|
-
|
|
2622
|
+
/**
|
|
2623
|
+
* The operators the menu offers, narrowed to EQ and NEQ: an empty list, or
|
|
2624
|
+
* one where no name is known, offers both, and a single one pins the
|
|
2625
|
+
* button. Held before the upgrade and replaced by the `operators` attribute
|
|
2626
|
+
* at the render, as on the compare filters.
|
|
2627
|
+
* @returns {string[]|undefined} undefined before the upgrade when nothing was assigned
|
|
2628
|
+
*/
|
|
2629
|
+
get operators(): string[] | undefined;
|
|
2630
|
+
/** @param {string[]|null} declared */
|
|
2631
|
+
set operators(declared: string[] | null);
|
|
2632
|
+
/** @returns {string[]} */
|
|
1117
2633
|
_vocabulary(): string[];
|
|
1118
|
-
|
|
1119
|
-
|
|
2634
|
+
/**
|
|
2635
|
+
* `[operator, token]`, the token being 'true' or 'false'; null while the value menu is on any.
|
|
2636
|
+
* @returns {string[]|null}
|
|
2637
|
+
*/
|
|
2638
|
+
get value(): string[] | null;
|
|
2639
|
+
/**
|
|
2640
|
+
* Shows a tuple: its operator, unless a pinned operator replaces it, and its
|
|
2641
|
+
* token, a missing token meaning any. Null or undefined sets the value menu
|
|
2642
|
+
* back to any and keeps the operator.
|
|
2643
|
+
* @param {any[]|null|undefined} v
|
|
2644
|
+
*/
|
|
2645
|
+
set value(v: any[] | null | undefined);
|
|
2646
|
+
/**
|
|
2647
|
+
* Restores the declared `value` tuple. Without a `value` attribute it sets
|
|
2648
|
+
* the value menu back to any and also shows the default operator again.
|
|
2649
|
+
*/
|
|
1120
2650
|
formResetCallback(): void;
|
|
1121
|
-
/**
|
|
2651
|
+
/**
|
|
2652
|
+
* The operator and the localized word the value menu shows, not the token.
|
|
2653
|
+
* Null while the value menu is on any.
|
|
2654
|
+
* @returns {FilterCriterion|null}
|
|
2655
|
+
*/
|
|
1122
2656
|
get criterion(): FilterCriterion | null;
|
|
2657
|
+
/**
|
|
2658
|
+
* The field's own disabled claim. Setting it disables the value button and
|
|
2659
|
+
* both menu buttons; an operator button pinned to one choice stays disabled
|
|
2660
|
+
* when the claim is lifted.
|
|
2661
|
+
* @returns {boolean}
|
|
2662
|
+
*/
|
|
1123
2663
|
get disabled(): boolean;
|
|
2664
|
+
/** @param {boolean} d */
|
|
1124
2665
|
set disabled(d: boolean);
|
|
1125
2666
|
}
|
|
1126
2667
|
/**
|
|
1127
2668
|
* Set membership over a select's vocabulary, answering for both of data-jpa's
|
|
1128
2669
|
* set annotations: InEnum and InList take the same bare array of values and no
|
|
1129
|
-
* operator, differing only in what the server converts them to.
|
|
2670
|
+
* operator, differing only in what the server converts them to. A declared
|
|
2671
|
+
* `operator` attribute is sent in front of the keys instead, for a server field
|
|
2672
|
+
* that reads the set through a compare.
|
|
1130
2673
|
*/
|
|
1131
2674
|
declare class InFilter extends Select {
|
|
1132
2675
|
#private;
|
|
1133
2676
|
static attributes: string[];
|
|
1134
|
-
|
|
2677
|
+
/**
|
|
2678
|
+
* The chosen keys as an array, a single choice included, led by the
|
|
2679
|
+
* declared `operator` when there is one. Null while nothing is chosen, so
|
|
2680
|
+
* that a table drops the filter instead of sending an empty set that
|
|
2681
|
+
* matches nothing.
|
|
2682
|
+
* @returns {any[]|null}
|
|
2683
|
+
*/
|
|
2684
|
+
get value(): any[] | null;
|
|
2685
|
+
/**
|
|
2686
|
+
* Selects the keys of an array or a single bare key; a leading element equal
|
|
2687
|
+
* to the declared `operator` is dropped first, so the filter takes back what
|
|
2688
|
+
* it answered. A single select takes the first key. Null or undefined clears
|
|
2689
|
+
* the selection.
|
|
2690
|
+
* @param {any} v
|
|
2691
|
+
*/
|
|
1135
2692
|
set value(v: any);
|
|
1136
|
-
/**
|
|
2693
|
+
/**
|
|
2694
|
+
* The declared operator, or null, and the labels of the chosen entries. Null
|
|
2695
|
+
* while nothing is chosen.
|
|
2696
|
+
* @returns {FilterCriterion|null}
|
|
2697
|
+
*/
|
|
1137
2698
|
get criterion(): FilterCriterion | null;
|
|
1138
2699
|
}
|
|
1139
2700
|
/**
|
|
1140
|
-
* An
|
|
2701
|
+
* An icon button that toggles a native popover, a `ful-note`, holding the
|
|
2702
|
+
* default slot as a short explanation. The popover gives light dismiss and
|
|
2703
|
+
* Escape, and the button carries an `aria-expanded` kept in step with it and
|
|
2704
|
+
* a localized `aria-label`.
|
|
2705
|
+
*
|
|
2706
|
+
* The marker is the `ful-icon` that `Tooltip.config.icon` names for the whole
|
|
2707
|
+
* page, or the one the `icon` attribute names for a single tooltip. A name the
|
|
2708
|
+
* library does not paint is declared by the page as
|
|
2709
|
+
* `ful-icon[name='...'] { mask-image: ... }`.
|
|
1141
2710
|
*
|
|
1142
|
-
*
|
|
1143
|
-
* `
|
|
1144
|
-
*
|
|
1145
|
-
*
|
|
2711
|
+
* `placement` picks the side of the marker the note opens on: `top` (the
|
|
2712
|
+
* default), `bottom`, `left` or `right`. The note is placed in script on every
|
|
2713
|
+
* platform, centred on the marker, clamped into the viewport and following the
|
|
2714
|
+
* marker on scroll and resize, with a callout on the edge facing the marker.
|
|
1146
2715
|
*
|
|
1147
|
-
* `describes`
|
|
1148
|
-
*
|
|
1149
|
-
*
|
|
1150
|
-
* leaves the tab order,
|
|
1151
|
-
*
|
|
1152
|
-
* not taken, a tooltip claiming `describes` outside a field among them: the
|
|
1153
|
-
* stop only goes where something else delivers the content.
|
|
2716
|
+
* `describes` offers the note to the nearest ancestor that takes a description
|
|
2717
|
+
* (see `describable`), a field's control in practice: when it is taken, the
|
|
2718
|
+
* note becomes part of that control's accessible description and the marker
|
|
2719
|
+
* leaves the tab order, staying clickable. When nothing takes it, the marker
|
|
2720
|
+
* keeps its tab stop and a warning is logged.
|
|
1154
2721
|
*/
|
|
1155
2722
|
declare class Tooltip extends ParsedElement {
|
|
1156
2723
|
#private;
|
|
1157
2724
|
static slots: boolean;
|
|
1158
2725
|
static attributes: string[];
|
|
2726
|
+
/** The page-wide defaults: `icon` is the `ful-icon` name of the marker. */
|
|
1159
2727
|
static config: {
|
|
1160
2728
|
icon: string;
|
|
1161
2729
|
};
|
|
1162
2730
|
static template: string;
|
|
2731
|
+
/**
|
|
2732
|
+
* @param {{ slots: Record<string, DocumentFragment> }} c
|
|
2733
|
+
*/
|
|
1163
2734
|
render({ slots }: {
|
|
1164
|
-
slots:
|
|
2735
|
+
slots: Record<string, DocumentFragment>;
|
|
1165
2736
|
}): void;
|
|
1166
2737
|
}
|
|
1167
2738
|
export type DialogOutcome = {
|
|
@@ -1170,87 +2741,150 @@ export type DialogOutcome = {
|
|
|
1170
2741
|
response: any;
|
|
1171
2742
|
};
|
|
1172
2743
|
/**
|
|
1173
|
-
*
|
|
1174
|
-
*
|
|
2744
|
+
* How a dialog ended. `dismissed` is true for Escape, the close button, a
|
|
2745
|
+
* backdrop click, a `data-result=""` button, `close()` without a result and a
|
|
2746
|
+
* removal from the document; `result` is the `data-result` of the button, or
|
|
2747
|
+
* the argument of `close(result)`, that answered; `response` is what the form
|
|
2748
|
+
* answered with under `close-on-submit`. Whichever of `result` and `response`
|
|
2749
|
+
* did not answer is null, as both are on a dismissal.
|
|
2750
|
+
* @typedef {{ dismissed: boolean, result: string|null, response: any }} DialogOutcome
|
|
2751
|
+
*/
|
|
2752
|
+
/**
|
|
2753
|
+
* A modal dialog on the native `<dialog>`, rendered with a header, a body and
|
|
2754
|
+
* a footer. `open()` and `ask()` show it and resolve with a `DialogOutcome`.
|
|
1175
2755
|
*
|
|
1176
|
-
* The header
|
|
1177
|
-
*
|
|
1178
|
-
*
|
|
1179
|
-
*
|
|
2756
|
+
* The `header` attribute is the title, rendered as an `h2` that names the
|
|
2757
|
+
* dialog through `aria-labelledby`; without it the dialog is unnamed. The
|
|
2758
|
+
* `header` slot is rendered in the header before the title, the default slot
|
|
2759
|
+
* is the body, and the `buttons` slot is rendered in the footer. Without a
|
|
2760
|
+
* `buttons` slot, and without `close-on-submit`, the footer holds a localized
|
|
2761
|
+
* acknowledge button answering `acknowledged`.
|
|
1180
2762
|
*
|
|
1181
|
-
*
|
|
1182
|
-
*
|
|
1183
|
-
*
|
|
1184
|
-
*
|
|
2763
|
+
* Any button inside the dialog carrying `data-result` closes it with that
|
|
2764
|
+
* result, an empty one being a dismissal. The header carries a close button,
|
|
2765
|
+
* and a press and release both on the backdrop close the dialog, each as a
|
|
2766
|
+
* dismissal, as Escape does.
|
|
1185
2767
|
*
|
|
1186
|
-
*
|
|
1187
|
-
*
|
|
1188
|
-
*
|
|
1189
|
-
*
|
|
1190
|
-
* dialog
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
*
|
|
1194
|
-
*
|
|
1195
|
-
*
|
|
1196
|
-
*
|
|
2768
|
+
* `requires-answer` withholds the close button and refuses Escape and the
|
|
2769
|
+
* backdrop, so the dialog is closed only by a button carrying `data-result`
|
|
2770
|
+
* or from code through `close()`.
|
|
2771
|
+
*
|
|
2772
|
+
* `close-on-submit` closes the dialog when a `ful-form` that is a direct child
|
|
2773
|
+
* of the body dispatches `submit:success`, answering with its
|
|
2774
|
+
* `detail.response`. A form deeper in the body, such as the filter form of a
|
|
2775
|
+
* `ful-table`, does not close it. The listener sits on the body, so a form
|
|
2776
|
+
* delivered by `update()` is covered as well.
|
|
2777
|
+
*
|
|
2778
|
+
* Every close dispatches a non-bubbling `close` event on the element carrying
|
|
2779
|
+
* the `DialogOutcome` as `detail`, before the pending `ask()` calls resolve.
|
|
2780
|
+
* An element anywhere in the page carrying `dialog-target` set to the
|
|
2781
|
+
* element's id opens it on click.
|
|
2782
|
+
*
|
|
2783
|
+
* The chrome is styled by class as well as by tag, so a plain `<dialog
|
|
2784
|
+
* class="ful-dialog">` written by a page gets the same look: the tag form
|
|
2785
|
+
* matches a direct child, and `ful-dialog-header`, `ful-dialog-body` and
|
|
2786
|
+
* `ful-dialog-footer` match at any depth, as a dialog whose content is wrapped
|
|
2787
|
+
* in a form needs.
|
|
1197
2788
|
*/
|
|
1198
2789
|
declare class Dialog extends ParsedElement {
|
|
1199
2790
|
#private;
|
|
1200
2791
|
static attributes: string[];
|
|
1201
2792
|
static slots: boolean;
|
|
1202
2793
|
static template: string;
|
|
2794
|
+
/**
|
|
2795
|
+
* @param {{ slots: Record<string, DocumentFragment> }} c
|
|
2796
|
+
*/
|
|
1203
2797
|
render({ slots }: {
|
|
1204
|
-
slots:
|
|
2798
|
+
slots: Record<string, DocumentFragment>;
|
|
1205
2799
|
}): void;
|
|
2800
|
+
/**
|
|
2801
|
+
* Resolves every pending `ask()` and `open()` with the outcome so far,
|
|
2802
|
+
* a dismissal for a dialog still open, so that no caller waits on a dialog
|
|
2803
|
+
* that left the document. The native dialog is not closed and no `close`
|
|
2804
|
+
* event is dispatched.
|
|
2805
|
+
*/
|
|
1206
2806
|
disconnectedCallback(): void;
|
|
1207
|
-
open(): Promise<any>;
|
|
1208
|
-
ask(): Promise<any>;
|
|
1209
2807
|
/**
|
|
1210
|
-
*
|
|
1211
|
-
*
|
|
1212
|
-
* problems and travels to the caller, and an update superseded by a newer one
|
|
1213
|
-
* paints nothing. The title is the `header` attribute, configuration like the
|
|
1214
|
-
* rest of the dialog's chrome, so what update() owns is the body alone.
|
|
2808
|
+
* The same as `ask()`.
|
|
2809
|
+
* @returns {Promise<DialogOutcome>}
|
|
1215
2810
|
*/
|
|
1216
|
-
|
|
2811
|
+
open(): Promise<DialogOutcome>;
|
|
1217
2812
|
/**
|
|
1218
|
-
*
|
|
1219
|
-
*
|
|
1220
|
-
*
|
|
2813
|
+
* Shows the dialog as a modal and resolves with how it ends.
|
|
2814
|
+
*
|
|
2815
|
+
* The call that opens the dialog resets the outcome of the previous
|
|
2816
|
+
* opening, hides the error and loading sections, and dispatches
|
|
2817
|
+
* `section:requested` on the element (bubbling, with
|
|
2818
|
+
* `detail: { section, first, name: null, index: null }`, `section` being
|
|
2819
|
+
* the body and `first` true only on the first answered request), so a
|
|
2820
|
+
* listener can fill the body. A failed request is painted into the body
|
|
2821
|
+
* and does not reject. On a dialog already open nothing is shown or
|
|
2822
|
+
* requested, and the call waits for the same ending as the calls before it.
|
|
2823
|
+
* @returns {Promise<DialogOutcome>} resolving on close, or on removal from
|
|
2824
|
+
* the document with a dismissal
|
|
2825
|
+
*/
|
|
2826
|
+
ask(): Promise<DialogOutcome>;
|
|
2827
|
+
/**
|
|
2828
|
+
* Empties and hides the body, shows the loading section, opens the dialog
|
|
2829
|
+
* if it is closed, and fills the body with what the callback resolves to.
|
|
2830
|
+
* A rejection is shown, as the problems' reasons, in the error section,
|
|
2831
|
+
* which has `role="alert"`, and the body is hidden. The title stays the
|
|
2832
|
+
* `header` attribute.
|
|
2833
|
+
*
|
|
2834
|
+
* No `section:requested` is dispatched, and no `ask()` waiter is added:
|
|
2835
|
+
* listen for the `close` event to learn how the dialog ended. When a newer
|
|
2836
|
+
* `update()` starts before the callback settles, this call paints nothing:
|
|
2837
|
+
* it resolves with the body regardless, and still rejects with the
|
|
2838
|
+
* callback's error.
|
|
2839
|
+
* @param {() => Node|string|Promise<Node|string>} cb producing the body content
|
|
2840
|
+
* @returns {Promise<Element>} the body section, in the document
|
|
2841
|
+
* @throws {any} what the callback threw or rejected with
|
|
2842
|
+
*/
|
|
2843
|
+
update(cb: () => Node | string | Promise<Node | string>): Promise<Element>;
|
|
2844
|
+
/**
|
|
2845
|
+
* Dispatches `section:requested` for the body again, as `ask()` does,
|
|
2846
|
+
* whether the dialog is open or closed. A failed request is painted into
|
|
2847
|
+
* the body.
|
|
2848
|
+
* @returns {Promise<any[]|undefined>} the listeners' answers, undefined when
|
|
2849
|
+
* nobody answered or the request failed; it never rejects
|
|
1221
2850
|
*/
|
|
1222
2851
|
refresh(): Promise<any[] | undefined>;
|
|
1223
|
-
close(result: any): void;
|
|
1224
2852
|
/**
|
|
1225
|
-
*
|
|
1226
|
-
*
|
|
1227
|
-
*
|
|
1228
|
-
*
|
|
2853
|
+
* Closes an open dialog, doing nothing on a closed one. A non-empty result
|
|
2854
|
+
* answers as the button carrying that `data-result` would; no result, or
|
|
2855
|
+
* an empty one, is a dismissal.
|
|
2856
|
+
* @param {string} [result]
|
|
2857
|
+
*/
|
|
2858
|
+
close(result?: string): void;
|
|
2859
|
+
/**
|
|
2860
|
+
* Appends a new `ful-dialog` to `document.body`, asks it, and removes it
|
|
2861
|
+
* once it is answered or its render fails.
|
|
1229
2862
|
*
|
|
1230
|
-
*
|
|
1231
|
-
*
|
|
1232
|
-
*
|
|
1233
|
-
*
|
|
1234
|
-
*
|
|
1235
|
-
* @param {string} header
|
|
2863
|
+
* A string body is set as text and never parsed as markup; a node is
|
|
2864
|
+
* appended as it is. Each button is either a `[result, label, className?]`
|
|
2865
|
+
* tuple, rendered as a `button` carrying `data-result`, or a node the
|
|
2866
|
+
* caller built, placed in the footer in the order given. With no buttons
|
|
2867
|
+
* the dialog shows its localized acknowledge button.
|
|
2868
|
+
* @param {string} header the title
|
|
1236
2869
|
* @param {string|Node} body
|
|
1237
2870
|
* @param {([string, string, string?]|Node)[]} [buttons]
|
|
1238
|
-
* @param {{ className?: string }} [options] `className`
|
|
1239
|
-
*
|
|
1240
|
-
* @returns {Promise<DialogOutcome>}
|
|
2871
|
+
* @param {{ className?: string }} [options] `className` is set as the class
|
|
2872
|
+
* of the `ful-dialog` element
|
|
2873
|
+
* @returns {Promise<DialogOutcome>} rejecting with what the render threw
|
|
1241
2874
|
*/
|
|
1242
2875
|
static ask(header: string, body: string | Node, buttons?: ([string, string, string?] | Node)[], { className }?: {
|
|
1243
2876
|
className?: string;
|
|
1244
2877
|
}): Promise<DialogOutcome>;
|
|
1245
2878
|
/**
|
|
1246
|
-
* Asks a yes/no question
|
|
1247
|
-
*
|
|
1248
|
-
*
|
|
1249
|
-
* @param {string}
|
|
1250
|
-
* @param {string
|
|
1251
|
-
*
|
|
1252
|
-
* @param {{ className?: string }} [options] as `ask` takes them
|
|
1253
|
-
* @returns {Promise<boolean>}
|
|
2879
|
+
* Asks a yes/no question through `Dialog.ask`, with a cancel button and a
|
|
2880
|
+
* confirm button carrying the `ful-button` class.
|
|
2881
|
+
* @param {string} header the title
|
|
2882
|
+
* @param {string|Node} body as `Dialog.ask` takes it
|
|
2883
|
+
* @param {{ confirm?: string, cancel?: string }} [labels] the button labels,
|
|
2884
|
+
* `dialog.confirm` and `dialog.cancel` localized by default
|
|
2885
|
+
* @param {{ className?: string }} [options] as `Dialog.ask` takes them
|
|
2886
|
+
* @returns {Promise<boolean>} true only for the confirm button; the cancel
|
|
2887
|
+
* button, the close button and Escape answer false
|
|
1254
2888
|
*/
|
|
1255
2889
|
static confirm(header: string, body: string | Node, labels?: {
|
|
1256
2890
|
confirm?: string;
|
|
@@ -1260,187 +2894,446 @@ declare class Dialog extends ParsedElement {
|
|
|
1260
2894
|
}): Promise<boolean>;
|
|
1261
2895
|
}
|
|
1262
2896
|
/**
|
|
1263
|
-
* A side panel
|
|
1264
|
-
*
|
|
2897
|
+
* A side panel on the native `<dialog>`, shown as a modal: a header holding
|
|
2898
|
+
* the title and a localized close button, then loading, error and content
|
|
2899
|
+
* sections, the default slot being the content.
|
|
2900
|
+
*
|
|
2901
|
+
* The `header` attribute is the initial title, rendered as an `h2` that names
|
|
2902
|
+
* the panel through `aria-labelledby`. The `header` slot is rendered in the
|
|
2903
|
+
* header before the title and outside it, so setting the title as text does
|
|
2904
|
+
* not remove it. `placement` is copied onto the native dialog: `end` (the
|
|
2905
|
+
* default, when absent) or `start`, following the writing direction.
|
|
2906
|
+
*
|
|
2907
|
+
* The close button, Escape, and a press and release both on the backdrop all
|
|
2908
|
+
* go through `close()`. Every close dispatches a non-bubbling `close` event on
|
|
2909
|
+
* the element with `detail: { dismissed, response }`: `{ dismissed: false,
|
|
2910
|
+
* response }` when a form closed it under `close-on-submit`, and
|
|
2911
|
+
* `{ dismissed: true, response: null }` for any other close.
|
|
2912
|
+
*
|
|
2913
|
+
* `close-on-submit` closes the drawer when a `ful-form` that is a direct child
|
|
2914
|
+
* of the content section dispatches `submit:success`, carrying its
|
|
2915
|
+
* `detail.response`, which may be null. A form deeper in the content, such as
|
|
2916
|
+
* the filter form of a `ful-table`, does not close it. The listener sits on
|
|
2917
|
+
* the content section, so a form delivered by `update()` is covered as well.
|
|
1265
2918
|
*
|
|
1266
|
-
*
|
|
1267
|
-
*
|
|
1268
|
-
* the title through `textContent`, which would take anything nested there with
|
|
1269
|
-
* it.
|
|
2919
|
+
* An element anywhere in the page carrying `dialog-target` set to the
|
|
2920
|
+
* element's id calls `open()` on click.
|
|
1270
2921
|
*/
|
|
1271
2922
|
declare class Drawer extends ParsedElement {
|
|
1272
2923
|
#private;
|
|
1273
2924
|
static attributes: string[];
|
|
1274
2925
|
static slots: boolean;
|
|
1275
2926
|
static template: string;
|
|
2927
|
+
/**
|
|
2928
|
+
* @param {{ slots: Record<string, DocumentFragment> }} c
|
|
2929
|
+
*/
|
|
1276
2930
|
render({ slots }: {
|
|
1277
|
-
slots:
|
|
2931
|
+
slots: Record<string, DocumentFragment>;
|
|
1278
2932
|
}): void;
|
|
1279
|
-
get header(): any;
|
|
1280
|
-
set header(v: any);
|
|
1281
2933
|
/**
|
|
1282
|
-
*
|
|
1283
|
-
*
|
|
1284
|
-
|
|
1285
|
-
|
|
2934
|
+
* The title, read and written as the heading's text.
|
|
2935
|
+
* @type {string}
|
|
2936
|
+
*/
|
|
2937
|
+
get header(): string;
|
|
2938
|
+
/** @param {string|null|undefined} v written as text, `''` for null or undefined */
|
|
2939
|
+
set header(v: string | null | undefined);
|
|
2940
|
+
/**
|
|
2941
|
+
* Sets the title, empties and hides the content section, shows the loading
|
|
2942
|
+
* section, opens the drawer if it is closed (putting back one that is
|
|
2943
|
+
* sliding out), and fills the content with what the callback resolves to.
|
|
2944
|
+
* A rejection is shown, as the problems' reasons, in the error section,
|
|
2945
|
+
* which has `role="alert"`, and the content is hidden.
|
|
2946
|
+
*
|
|
2947
|
+
* No `section:requested` is dispatched. When a newer `update()` starts
|
|
2948
|
+
* before the callback settles, this call paints nothing: it resolves with
|
|
2949
|
+
* the content section regardless, and still rejects with the callback's
|
|
2950
|
+
* error.
|
|
2951
|
+
* @param {string} header the title, set as text
|
|
2952
|
+
* @param {() => Node|string|Promise<Node|string>} cb producing the content
|
|
2953
|
+
* @returns {Promise<Element>} the content section, in the document
|
|
2954
|
+
* @throws {any} what the callback threw or rejected with
|
|
1286
2955
|
*/
|
|
1287
|
-
update(header:
|
|
2956
|
+
update(header: string, cb: () => Node | string | Promise<Node | string>): Promise<Element>;
|
|
1288
2957
|
/**
|
|
1289
|
-
*
|
|
1290
|
-
*
|
|
1291
|
-
*
|
|
2958
|
+
* Dispatches `section:requested` for the content again, as `open()` does,
|
|
2959
|
+
* whether the drawer is open or closed. A failed request is painted into
|
|
2960
|
+
* the content section.
|
|
2961
|
+
* @returns {Promise<any[]|undefined>} the listeners' answers, undefined when
|
|
2962
|
+
* nobody answered or the request failed; it never rejects
|
|
1292
2963
|
*/
|
|
1293
2964
|
refresh(): Promise<any[] | undefined>;
|
|
2965
|
+
/**
|
|
2966
|
+
* Shows the drawer as a modal. On a drawer already open nothing happens,
|
|
2967
|
+
* except that one sliding out stops and stays open.
|
|
2968
|
+
*
|
|
2969
|
+
* The call that opens the drawer resets the outcome of the previous
|
|
2970
|
+
* opening, hides the error and loading sections, and dispatches
|
|
2971
|
+
* `section:requested` on the element (bubbling, with
|
|
2972
|
+
* `detail: { section, first, name: null, index: null }`, `section` being
|
|
2973
|
+
* the content section and `first` true only on the first answered request),
|
|
2974
|
+
* so a listener can fill the content. A failed request is painted into the
|
|
2975
|
+
* content section.
|
|
2976
|
+
*/
|
|
1294
2977
|
open(): void;
|
|
2978
|
+
/**
|
|
2979
|
+
* Slides the drawer out and closes it when the animation ends, setting the
|
|
2980
|
+
* `closing` attribute on the native dialog meanwhile; the `close` event is
|
|
2981
|
+
* dispatched then, after this call has returned. Where the user prefers
|
|
2982
|
+
* reduced motion, or no animation runs, it closes at once. Does nothing on
|
|
2983
|
+
* a drawer that is closed or already sliding out.
|
|
2984
|
+
*/
|
|
1295
2985
|
close(): void;
|
|
1296
2986
|
}
|
|
1297
2987
|
/**
|
|
1298
|
-
* A menu of commands on the native popover platform
|
|
1299
|
-
* `for`
|
|
1300
|
-
*
|
|
2988
|
+
* A menu of commands on the native popover platform, opened by the element
|
|
2989
|
+
* whose id `for` names. The menu is the popover itself: light dismiss and
|
|
2990
|
+
* Escape come from the browser, and it is anchored to its invoker through
|
|
2991
|
+
* `Anchors.wire`, placed in script where the platform has no css anchor
|
|
2992
|
+
* positioning.
|
|
2993
|
+
*
|
|
2994
|
+
* The items are the buttons and `a[href]` links written as its direct
|
|
2995
|
+
* children, kept as they are. Activation is the item's own click, which the
|
|
2996
|
+
* menu follows by hiding itself, so a page listens for the click where it
|
|
2997
|
+
* already listens. The menu fires no events of its own.
|
|
1301
2998
|
*
|
|
1302
|
-
* The
|
|
1303
|
-
*
|
|
1304
|
-
*
|
|
2999
|
+
* The keyboard is the ARIA menu protocol: the focus moves to the
|
|
3000
|
+
* first item as the menu opens, the arrows, Home and End walk the items,
|
|
3001
|
+
* typing searches their text, Enter and Space activate the focused one, and
|
|
3002
|
+
* Escape and a close from inside the menu hand the focus back to the invoker.
|
|
1305
3003
|
*/
|
|
1306
3004
|
declare class Menu extends ParsedElement {
|
|
1307
3005
|
#private;
|
|
3006
|
+
/** @type {string[]} */
|
|
1308
3007
|
static attributes: string[];
|
|
3008
|
+
/**
|
|
3009
|
+
* Gives the menu the `menu` role and an empty `popover` attribute unless
|
|
3010
|
+
* it already has one, gives the invoker `aria-haspopup="menu"`, an
|
|
3011
|
+
* `aria-expanded` kept in step, and the toggle of the menu, and marks the
|
|
3012
|
+
* items. `for` is read here, once.
|
|
3013
|
+
* @returns {void}
|
|
3014
|
+
* @throws {Error} when `for` names no element in the document at the render
|
|
3015
|
+
*/
|
|
1309
3016
|
render(): void;
|
|
1310
3017
|
/**
|
|
1311
|
-
* The commands, in the order the arrows walk them: the menu's
|
|
1312
|
-
* and
|
|
1313
|
-
* leave the walk.
|
|
3018
|
+
* The commands, in the order the arrows walk them: the menu's direct
|
|
3019
|
+
* `button` and `a[href]` children, minus those carrying a `disabled` or
|
|
3020
|
+
* `hidden` attribute, which keep their role and leave the walk. Reading it
|
|
3021
|
+
* also marks any child added since the render, giving it the `menuitem`
|
|
3022
|
+
* role, unless it has a role already, and a `tabIndex` of -1.
|
|
3023
|
+
* @type {HTMLElement[]}
|
|
1314
3024
|
*/
|
|
1315
3025
|
get items(): HTMLElement[];
|
|
1316
3026
|
}
|
|
1317
|
-
|
|
3027
|
+
export type ToastOptions = {
|
|
3028
|
+
/**
|
|
3029
|
+
* the theme class and
|
|
3030
|
+
* the announcement, `info` when absent or unknown
|
|
3031
|
+
*/
|
|
3032
|
+
severity?: 'info' | 'success' | 'warning' | 'error';
|
|
3033
|
+
/**
|
|
3034
|
+
* the milliseconds before the toast retires, the
|
|
3035
|
+
* region's own timeout when absent
|
|
3036
|
+
*/
|
|
3037
|
+
timeout?: number;
|
|
3038
|
+
/**
|
|
3039
|
+
* a button labelled
|
|
3040
|
+
* with `label` as text, beside the message
|
|
3041
|
+
*/
|
|
3042
|
+
action?: {
|
|
3043
|
+
label: any;
|
|
3044
|
+
onClick?: () => void;
|
|
3045
|
+
};
|
|
3046
|
+
};
|
|
3047
|
+
/**
|
|
3048
|
+
* @typedef {object} ToastOptions
|
|
3049
|
+
* @property {'info'|'success'|'warning'|'error'} [severity] the theme class and
|
|
3050
|
+
* the announcement, `info` when absent or unknown
|
|
3051
|
+
* @property {number} [timeout] the milliseconds before the toast retires, the
|
|
3052
|
+
* region's own timeout when absent
|
|
3053
|
+
* @property {{ label: any, onClick?: () => void }} [action] a button labelled
|
|
3054
|
+
* with `label` as text, beside the message
|
|
3055
|
+
*/
|
|
3056
|
+
/**
|
|
3057
|
+
* A region of transient messages, with `role="region"` and a localized
|
|
3058
|
+
* `aria-label`. Each `show()` appends a `ful-toast` that retires on its own
|
|
3059
|
+
* timer, so concurrent toasts stack.
|
|
3060
|
+
*
|
|
3061
|
+
* The region is a manual popover, whatever `popover` the page declared, and
|
|
3062
|
+
* each `show()` shows it again, so it is on top of the top layer when a toast
|
|
3063
|
+
* arrives: above a modal dialog or drawer opened before it. While a modal is
|
|
3064
|
+
* open the page outside it is inert, the region included: its toasts show and
|
|
3065
|
+
* retire on their timers, and their buttons answer once the modal closes.
|
|
3066
|
+
*
|
|
3067
|
+
* `timeout` is the region's default timer in milliseconds, 5000 when absent
|
|
3068
|
+
* or zero.
|
|
3069
|
+
*
|
|
3070
|
+
* A `show-toast` event dispatched on the document, or bubbling to it, shows its
|
|
3071
|
+
* `detail` in every connected region that has rendered, `detail.message` being
|
|
3072
|
+
* the message and the other fields the `ToastOptions`. The document listener is
|
|
3073
|
+
* added once, so a second region shows each toast once, and an event with no
|
|
3074
|
+
* detail is ignored.
|
|
3075
|
+
*/
|
|
1318
3076
|
declare class Toasts extends ParsedElement {
|
|
1319
3077
|
#private;
|
|
1320
3078
|
static attributes: string[];
|
|
3079
|
+
/** Upgrades the region, and makes a re-attached one answer `show-toast` again. */
|
|
1321
3080
|
connectedCallback(): void;
|
|
3081
|
+
/** Stops the region answering `show-toast` while it is out of the document. */
|
|
1322
3082
|
disconnectedCallback(): void;
|
|
1323
3083
|
render(): void;
|
|
1324
3084
|
/**
|
|
1325
|
-
* Appends a toast
|
|
1326
|
-
* reasons
|
|
1327
|
-
*
|
|
3085
|
+
* Appends a `ful-toast` holding the message as text, a `Failure` showing
|
|
3086
|
+
* its problems' reasons one per line and anything else its string form
|
|
3087
|
+
* (`''` for null or undefined). The toast carries the severity as a class
|
|
3088
|
+
* and has `role="alert"` for `error` and `role="status"` otherwise.
|
|
3089
|
+
*
|
|
3090
|
+
* The toast retires when its timer runs out, when its localized dismiss
|
|
3091
|
+
* button is clicked, or when its action button is clicked, after
|
|
3092
|
+
* `action.onClick` runs. The timer pauses while the pointer is over the
|
|
3093
|
+
* toast or the focus is inside it, and resumes with the time that was left
|
|
3094
|
+
* once both have gone. A retiring toast holding the focus moves it to the
|
|
3095
|
+
* region, which has `tabindex="-1"` for this. The toast is removed once its
|
|
3096
|
+
* `ful-toast-out` animation ends, or at once where the user prefers reduced
|
|
3097
|
+
* motion or no animation runs.
|
|
1328
3098
|
*
|
|
1329
|
-
*
|
|
1330
|
-
*
|
|
1331
|
-
* a button beside the message whose click answers and retires. The same
|
|
1332
|
-
* options travel in the `show-toast` event's detail.
|
|
3099
|
+
* A connected region is shown again as a popover, which puts it above
|
|
3100
|
+
* whatever opened in the top layer since; the focus stays where it was.
|
|
1333
3101
|
* @param {any} message
|
|
1334
|
-
* @param {
|
|
1335
|
-
* @returns {HTMLElement}
|
|
3102
|
+
* @param {ToastOptions} [options]
|
|
3103
|
+
* @returns {HTMLElement} the toast, already in the region
|
|
1336
3104
|
*/
|
|
1337
|
-
show(message: any, options?:
|
|
3105
|
+
show(message: any, options?: ToastOptions): HTMLElement;
|
|
1338
3106
|
}
|
|
1339
3107
|
/**
|
|
1340
3108
|
* A tab panel: one visible panel at a time, announced through the tab pattern
|
|
1341
|
-
* (a tablist of tab buttons, each panel a tabpanel
|
|
1342
|
-
* are declared as
|
|
1343
|
-
* children, paired in order.
|
|
1344
|
-
*
|
|
1345
|
-
*
|
|
3109
|
+
* (a tablist of tab buttons, each panel a tabpanel labelled by its tab). The
|
|
3110
|
+
* tabs are declared as `<tab>` elements in the `tabs` slot, the panels as the
|
|
3111
|
+
* slotless children, paired in order. Each `<tab>` becomes a `button` with the
|
|
3112
|
+
* `tab` role carrying the tab's content, inside a `ful-tablist` with the
|
|
3113
|
+
* `tablist` role. A panel that already has an id keeps it and its tab points at
|
|
3114
|
+
* it; a panel without one gets a generated id. Every panel carries
|
|
3115
|
+
* `tabindex="0"`, so the visible one follows its tab in the tab order and the
|
|
3116
|
+
* hidden ones stay out of it.
|
|
3117
|
+
*
|
|
3118
|
+
* The tabs use a roving tabindex and automatic activation: a click activates
|
|
3119
|
+
* its tab, and on the tablist ArrowRight and ArrowLeft move to the next and
|
|
3120
|
+
* previous tab, wrapping around, while Home and End jump to the first and the
|
|
3121
|
+
* last, moving the focus with the activation.
|
|
3122
|
+
*
|
|
3123
|
+
* Entering a panel fires `section:requested` and `section:requested:#<index>`
|
|
3124
|
+
* on the host, bubbling, with detail `{ name: null, section, index, first }`,
|
|
3125
|
+
* and awaits the answers registered through `AsyncEvents.asyncOn`, so a panel
|
|
3126
|
+
* can deliver itself asynchronously: see `SectionRequests`.
|
|
1346
3127
|
*/
|
|
1347
3128
|
declare class Tabs extends ParsedElement {
|
|
1348
3129
|
#private;
|
|
1349
3130
|
static slots: boolean;
|
|
1350
3131
|
static observed: string[];
|
|
1351
3132
|
static template: string;
|
|
3133
|
+
/**
|
|
3134
|
+
* Pairs the declared tabs with the panels in order. When the counts
|
|
3135
|
+
* differ, the unpaired tabs and panels are left in the dom as they are and
|
|
3136
|
+
* a warning is logged.
|
|
3137
|
+
* @param {{ slots: Record<string, DocumentFragment> }} conf
|
|
3138
|
+
* @returns {void}
|
|
3139
|
+
*/
|
|
1352
3140
|
render({ slots }: {
|
|
1353
|
-
slots:
|
|
3141
|
+
slots: Record<string, DocumentFragment>;
|
|
1354
3142
|
}): void;
|
|
3143
|
+
/**
|
|
3144
|
+
* The index of the visible panel, reflected to the `active` attribute.
|
|
3145
|
+
* Writing it clamps the value to the paired tabs, a value that is not a
|
|
3146
|
+
* number counting as 0, and selects that tab and shows its panel. When the
|
|
3147
|
+
* index changes on a rendered element it dispatches `tabs:change` on the
|
|
3148
|
+
* host (not bubbling) with detail `{ active, previous }`, then fires the
|
|
3149
|
+
* section requests for the entered panel. The first write, which applies
|
|
3150
|
+
* the attribute after the render, fires the requests without the event.
|
|
3151
|
+
* A failed delivery paints the panel's error and rejects nowhere.
|
|
3152
|
+
* @type {number}
|
|
3153
|
+
*/
|
|
1355
3154
|
get active(): number;
|
|
1356
3155
|
/**
|
|
1357
|
-
*
|
|
1358
|
-
*
|
|
1359
|
-
*
|
|
1360
|
-
*
|
|
3156
|
+
* Fires the section requests again for a panel, whether it is visible or
|
|
3157
|
+
* not, with `first` false once an earlier request was answered.
|
|
3158
|
+
* @param {number | Element} ref the panel's index, or the panel itself
|
|
3159
|
+
* @returns {Promise<any[] | undefined> | undefined} a promise resolving to
|
|
3160
|
+
* the answers, or to undefined when nobody listened or the delivery
|
|
3161
|
+
* failed (its error painted in the panel); undefined, with a warning, when
|
|
3162
|
+
* `ref` names no panel
|
|
1361
3163
|
*/
|
|
1362
|
-
refresh(ref:
|
|
3164
|
+
refresh(ref: number | Element): Promise<any[] | undefined> | undefined;
|
|
1363
3165
|
set active(v: number);
|
|
1364
3166
|
}
|
|
1365
3167
|
/**
|
|
1366
|
-
* An accordion over native details
|
|
1367
|
-
* the semantics, the keyboard and the toggling, the
|
|
1368
|
-
*
|
|
1369
|
-
*
|
|
3168
|
+
* An accordion over native `details`/`summary` disclosures: the browser
|
|
3169
|
+
* provides the semantics, the keyboard and the toggling, and the element adds
|
|
3170
|
+
* the group's styling. The `details` written as its children are rendered,
|
|
3171
|
+
* unchanged, inside a `ful-accordion-group`.
|
|
1370
3172
|
*/
|
|
1371
3173
|
declare class Accordion extends ParsedElement {
|
|
1372
3174
|
#private;
|
|
1373
3175
|
static slots: boolean;
|
|
3176
|
+
/** @type {string[]} */
|
|
1374
3177
|
static observed: string[];
|
|
1375
3178
|
static template: string;
|
|
3179
|
+
/**
|
|
3180
|
+
* @param {{ slots: Record<string, DocumentFragment> | undefined }} c
|
|
3181
|
+
* @returns {void}
|
|
3182
|
+
*/
|
|
1376
3183
|
render({ slots }: {
|
|
1377
|
-
slots:
|
|
3184
|
+
slots: Record<string, DocumentFragment> | undefined;
|
|
1378
3185
|
}): void;
|
|
3186
|
+
/**
|
|
3187
|
+
* Whether opening one panel closes the others, reflected to the
|
|
3188
|
+
* `exclusive` attribute; only `true` turns it on. Setting it gives the
|
|
3189
|
+
* group's direct `details` children one shared, newly generated `name`,
|
|
3190
|
+
* the platform's exclusive grouping, or removes their `name` when off.
|
|
3191
|
+
* A `details` added to the group afterwards is not named until the next
|
|
3192
|
+
* write.
|
|
3193
|
+
* @type {boolean}
|
|
3194
|
+
*/
|
|
1379
3195
|
get exclusive(): boolean;
|
|
1380
3196
|
set exclusive(v: boolean);
|
|
1381
3197
|
}
|
|
1382
3198
|
/**
|
|
1383
|
-
* A wizard: a progress of steps over one-of-N sections
|
|
1384
|
-
*
|
|
1385
|
-
*
|
|
1386
|
-
*
|
|
1387
|
-
*
|
|
1388
|
-
*
|
|
1389
|
-
*
|
|
1390
|
-
*
|
|
1391
|
-
*
|
|
1392
|
-
*
|
|
1393
|
-
*
|
|
1394
|
-
*
|
|
1395
|
-
*
|
|
3199
|
+
* A wizard: a progress of steps over one-of-N sections. The steps are declared
|
|
3200
|
+
* as `<step>` elements in the `steps` slot, the sections as the slotless
|
|
3201
|
+
* children, paired in order; each section may carry a `data-step` name, which
|
|
3202
|
+
* is what `move()` and `refresh()` answer to. The steps become the items of an
|
|
3203
|
+
* `ol` inside `ful-steps`, labelled by the localized `wizard.progress`.
|
|
3204
|
+
*
|
|
3205
|
+
* The current step is the `aria-current="step"` claim, carried by the step and
|
|
3206
|
+
* its section together, and the stylesheet hides every `section` child that
|
|
3207
|
+
* does not carry it. A section that carries the claim in the markup when the
|
|
3208
|
+
* wizard renders stays current; otherwise the first section is. Every paired
|
|
3209
|
+
* section gets `tabindex="-1"`, so a move can focus it.
|
|
3210
|
+
*
|
|
3211
|
+
* Entering a section, the first one at the render included, fires
|
|
3212
|
+
* `section:requested`, `section:requested:#<index>` and, when the section has a
|
|
3213
|
+
* `data-step`, `section:requested:<name>` on the host, bubbling, with detail
|
|
3214
|
+
* `{ name, section, index, first }`, and awaits the answers registered through
|
|
3215
|
+
* `AsyncEvents.asyncOn`: see `SectionRequests`. A failure of the initial entry
|
|
3216
|
+
* paints the section's error and rejects nowhere.
|
|
1396
3217
|
*/
|
|
1397
3218
|
declare class Wizard extends ParsedElement {
|
|
1398
3219
|
#private;
|
|
1399
3220
|
static slots: boolean;
|
|
1400
3221
|
static observed: string[];
|
|
1401
3222
|
static template: string;
|
|
3223
|
+
/**
|
|
3224
|
+
* Pairs the declared steps with the sections in order. When the counts
|
|
3225
|
+
* differ, the unpaired steps and sections are left in the dom as they are
|
|
3226
|
+
* and a warning is logged.
|
|
3227
|
+
* @param {{ slots: Record<string, DocumentFragment> }} conf
|
|
3228
|
+
* @returns {void}
|
|
3229
|
+
*/
|
|
1402
3230
|
render({ slots }: {
|
|
1403
|
-
slots:
|
|
3231
|
+
slots: Record<string, DocumentFragment>;
|
|
1404
3232
|
}): void;
|
|
3233
|
+
/**
|
|
3234
|
+
* The zero-based position of the current step.
|
|
3235
|
+
* @type {number}
|
|
3236
|
+
*/
|
|
1405
3237
|
get index(): number;
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
3238
|
+
/**
|
|
3239
|
+
* The `data-step` of the current section, or null when it has none or no
|
|
3240
|
+
* section is paired.
|
|
3241
|
+
* @type {string | null}
|
|
3242
|
+
*/
|
|
3243
|
+
get step(): string | null;
|
|
3244
|
+
/**
|
|
3245
|
+
* The shape of the progress chrome, reflected to the `progress` attribute:
|
|
3246
|
+
* unset shows the current step alone, `timeline` every step as done,
|
|
3247
|
+
* current or future, `dots` one dot per step, `none` no progress at all.
|
|
3248
|
+
* The value only drives the stylesheet; the moves are the same in every
|
|
3249
|
+
* shape.
|
|
3250
|
+
* @type {string | null}
|
|
3251
|
+
*/
|
|
3252
|
+
get progress(): string | null;
|
|
3253
|
+
set progress(v: string | null);
|
|
3254
|
+
/**
|
|
3255
|
+
* Moves to the following step; at the last step nothing happens.
|
|
3256
|
+
* @returns {Promise<any[] | undefined> | undefined} what `move()` answers
|
|
3257
|
+
* @throws what the entered section's delivery rejected with, as the rejection
|
|
3258
|
+
* of the returned promise
|
|
3259
|
+
*/
|
|
1409
3260
|
next(): Promise<any[] | undefined> | undefined;
|
|
3261
|
+
/**
|
|
3262
|
+
* Moves to the preceding step; at the first step nothing happens.
|
|
3263
|
+
* @returns {Promise<any[] | undefined> | undefined} what `move()` answers
|
|
3264
|
+
* @throws what the entered section's delivery rejected with, as the rejection
|
|
3265
|
+
* of the returned promise
|
|
3266
|
+
*/
|
|
1410
3267
|
prev(): Promise<any[] | undefined> | undefined;
|
|
1411
|
-
move(ref: any): Promise<any[] | undefined> | undefined;
|
|
1412
3268
|
/**
|
|
1413
|
-
*
|
|
1414
|
-
* section
|
|
1415
|
-
*
|
|
1416
|
-
*
|
|
3269
|
+
* Moves to the section carrying `data-step="<ref>"`. A move makes that step
|
|
3270
|
+
* and section current, moves the focus to the section, dispatches `change`
|
|
3271
|
+
* on the host (not bubbling) with detail `{ index, step }`, then fires the
|
|
3272
|
+
* section requests for it. A native `change` of a control inside a section
|
|
3273
|
+
* bubbles through the host under the same name, so a listener tells the
|
|
3274
|
+
* two apart by `e.target`.
|
|
3275
|
+
* @param {string} ref the section's `data-step`
|
|
3276
|
+
* @returns {Promise<any[] | undefined> | undefined} a promise resolving to
|
|
3277
|
+
* the answers once they are delivered, or to undefined when nobody
|
|
3278
|
+
* listened; undefined when the section is already current, and undefined
|
|
3279
|
+
* with a warning when no section carries `ref`
|
|
3280
|
+
* @throws what the entered section's delivery rejected with, as the rejection
|
|
3281
|
+
* of the returned promise, after its error is painted in the section
|
|
1417
3282
|
*/
|
|
1418
|
-
|
|
3283
|
+
move(ref: string): Promise<any[] | undefined> | undefined;
|
|
3284
|
+
/**
|
|
3285
|
+
* Fires the section requests again for a section, whether it is current or
|
|
3286
|
+
* not, with `first` false once an earlier request was answered.
|
|
3287
|
+
* @param {string | Element} ref the section's `data-step`, or the section
|
|
3288
|
+
* itself
|
|
3289
|
+
* @returns {Promise<any[] | undefined> | undefined} a promise resolving to
|
|
3290
|
+
* the answers, or to undefined when nobody listened or the delivery failed
|
|
3291
|
+
* (its error painted in the section); undefined, with a warning, when `ref`
|
|
3292
|
+
* names no section
|
|
3293
|
+
*/
|
|
3294
|
+
refresh(ref: string | Element): Promise<any[] | undefined> | undefined;
|
|
1419
3295
|
}
|
|
1420
3296
|
/**
|
|
1421
3297
|
* Registers everything ful provides on a registry: the elements, the loader
|
|
1422
3298
|
* components, an http client, and the translations for the configured
|
|
1423
|
-
* language. A page calls `registry.plugin(new Plugin({…})).configure()` once
|
|
3299
|
+
* language. A page calls `registry.plugin(new Plugin({…})).configure()` once;
|
|
3300
|
+
* `registry.plugin` calls this plugin's `configure`.
|
|
1424
3301
|
*/
|
|
1425
3302
|
declare class Plugin {
|
|
1426
3303
|
#private;
|
|
1427
3304
|
/**
|
|
1428
|
-
* @param {{ language?: string, translations?: Record<string, any>, httpClient?:
|
|
3305
|
+
* @param {{ language?: string, translations?: Record<string, any>, httpClient?: HttpClient }} [options]
|
|
1429
3306
|
* `language` is fixed for the page: a full BCP-47 tag or a primary subtag,
|
|
1430
|
-
* defaulting to
|
|
1431
|
-
*
|
|
3307
|
+
* defaulting to `navigator.language`, then to 'en'. Its primary subtag,
|
|
3308
|
+
* lowercased, picks the built-in translations (en, it, es, fr); the messages
|
|
3309
|
+
* are the english ones, overridden by that language's, overridden by
|
|
3310
|
+
* `translations`, so a language without built-in translations reads in
|
|
3311
|
+
* english. `translations` is a flat map of keys to messages: reword built-in
|
|
1432
3312
|
* keys ('pagination.showing', …) or add your own ('checkout.total', …).
|
|
1433
3313
|
* `httpClient` is the client every ful component fetches through, registered
|
|
1434
|
-
* as the `http-client` component
|
|
1435
|
-
*
|
|
1436
|
-
* to '/' builds its own.
|
|
3314
|
+
* as the `http-client` component; without one, `configure` builds a client
|
|
3315
|
+
* that sends the csrf token and navigates to '/' on a 401 response.
|
|
1437
3316
|
*/
|
|
1438
3317
|
constructor(options?: {
|
|
1439
3318
|
language?: string;
|
|
1440
3319
|
translations?: Record<string, any>;
|
|
1441
|
-
httpClient?:
|
|
3320
|
+
httpClient?: HttpClient;
|
|
1442
3321
|
});
|
|
1443
|
-
|
|
3322
|
+
/**
|
|
3323
|
+
* Defines on `registry` the `l10n` module, the `http-client` component,
|
|
3324
|
+
* every `ful-*` element, the `loaders:select`, `loaders:form` and
|
|
3325
|
+
* `loaders:table` components, and an overlay publishing `l10n` (the merged
|
|
3326
|
+
* messages) and `locale` (the `language` as given) to every template.
|
|
3327
|
+
* @param {{ defineModule(name: string, module: any): any, defineComponent(name: string, component: any): any, defineElement(tag: string, klass: CustomElementConstructor): any, defineOverlay(...data: any[]): any }} registry
|
|
3328
|
+
* the ftl `Registry`, each of those methods answering the registry itself
|
|
3329
|
+
* @returns {void}
|
|
3330
|
+
*/
|
|
3331
|
+
configure(registry: {
|
|
3332
|
+
defineModule(name: string, module: any): any;
|
|
3333
|
+
defineComponent(name: string, component: any): any;
|
|
3334
|
+
defineElement(tag: string, klass: CustomElementConstructor): any;
|
|
3335
|
+
defineOverlay(...data: any[]): any;
|
|
3336
|
+
}): void;
|
|
1444
3337
|
}
|
|
1445
3338
|
export { Accordion, Anchors, AsyncEvents, Bindings, BooleanFilter, Checkbox, Claims, CompareFilter, Dialog, Drawer, Dropdown, Field, Form, FormLoader, InFilter, Input, InputFile, InputInstant, InputLocalDate, InputLocalTime, Instant, InstantFilter, LocalDate, LocalDateFilter, LocalStorage, Menu, NumberFilter, Pagination, Plugin, RadioGroup, Select, SelectLoader, SessionStorage, SortButton, Table, TableLoader, TableSchemaParser, Tabs, TextFilter, Timing, Toasts, Tooltip, VersionedLocalStorage, VersionedSessionStorage, Wizard, describable };
|
|
1446
3339
|
|