@oscarpalmer/oui 0.31.0 → 0.33.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/badge.css +1 -5
- package/dist/css/combobox.css +164 -28
- package/dist/js/index.d.mts +643 -14
- package/dist/js/index.mjs +4875 -18
- package/package.json +5 -5
- package/src/css/combobox.scss +171 -25
- package/src/css/mixins.scss +8 -16
- package/src/js/combobox.ts +1682 -751
- package/src/js/internal/navigable.ts +10 -3
- package/src/js/menu.ts +1 -1
package/dist/js/index.d.mts
CHANGED
|
@@ -1,14 +1,643 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
//#region src/js/combobox.d.ts
|
|
2
|
+
declare global {
|
|
3
|
+
interface HTMLElementTagNameMap {
|
|
4
|
+
[TAGNAME$1]: OuiComboboxElement;
|
|
5
|
+
}
|
|
6
|
+
}
|
|
7
|
+
declare class OuiComboboxElement extends HTMLElement {
|
|
8
|
+
#private;
|
|
9
|
+
static formAssociated: boolean;
|
|
10
|
+
static observedAttributes: string[];
|
|
11
|
+
/**
|
|
12
|
+
* Is the combobox disabled?
|
|
13
|
+
*/
|
|
14
|
+
get disabled(): boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Should the combobox be disabled?
|
|
17
|
+
*/
|
|
18
|
+
set disabled(value: boolean);
|
|
19
|
+
/**
|
|
20
|
+
* Current filter value
|
|
21
|
+
*/
|
|
22
|
+
get filter(): string;
|
|
23
|
+
/**
|
|
24
|
+
* Set the filter value
|
|
25
|
+
*/
|
|
26
|
+
set filter(value: string);
|
|
27
|
+
/**
|
|
28
|
+
* Maximum number of selected options
|
|
29
|
+
*/
|
|
30
|
+
get max(): number | undefined;
|
|
31
|
+
/**
|
|
32
|
+
* Set the maximum number of selected options
|
|
33
|
+
*/
|
|
34
|
+
set max(value: number);
|
|
35
|
+
/**
|
|
36
|
+
* Minimum number of selected options
|
|
37
|
+
*/
|
|
38
|
+
get min(): number | undefined;
|
|
39
|
+
/**
|
|
40
|
+
* Set the minimum number of selected options
|
|
41
|
+
*/
|
|
42
|
+
set min(value: number);
|
|
43
|
+
/**
|
|
44
|
+
* Does the combobox allow multiple values?
|
|
45
|
+
*/
|
|
46
|
+
get multiple(): boolean;
|
|
47
|
+
/**
|
|
48
|
+
* Name of the combobox
|
|
49
|
+
*/
|
|
50
|
+
get name(): string;
|
|
51
|
+
/**
|
|
52
|
+
* Is the combobox readonly?
|
|
53
|
+
*/
|
|
54
|
+
get readonly(): boolean;
|
|
55
|
+
/**
|
|
56
|
+
* Should the combobox be readonly?
|
|
57
|
+
*/
|
|
58
|
+
set readonly(value: boolean);
|
|
59
|
+
/**
|
|
60
|
+
* Is the combobox required?
|
|
61
|
+
*/
|
|
62
|
+
get required(): boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Should the combobox be required?
|
|
65
|
+
*/
|
|
66
|
+
set required(value: boolean);
|
|
67
|
+
/**
|
|
68
|
+
* Selected options
|
|
69
|
+
*/
|
|
70
|
+
get selected(): HTMLElement[];
|
|
71
|
+
/**
|
|
72
|
+
* Type of combobox
|
|
73
|
+
*/
|
|
74
|
+
get type(): OuiComboboxType;
|
|
75
|
+
/**
|
|
76
|
+
* Current value
|
|
77
|
+
*/
|
|
78
|
+
get value(): string;
|
|
79
|
+
/**
|
|
80
|
+
* Set the value
|
|
81
|
+
*/
|
|
82
|
+
set value(value: unknown);
|
|
83
|
+
/**
|
|
84
|
+
* Current values
|
|
85
|
+
*/
|
|
86
|
+
get values(): string[];
|
|
87
|
+
/**
|
|
88
|
+
* Set the values
|
|
89
|
+
*/
|
|
90
|
+
set values(value: unknown[]);
|
|
91
|
+
constructor();
|
|
92
|
+
attributeChangedCallback(name: string, _: string | null, value: string | null): void;
|
|
93
|
+
/**
|
|
94
|
+
* Clear all selected options
|
|
95
|
+
*/
|
|
96
|
+
clear(): void;
|
|
97
|
+
connectedCallback(): void;
|
|
98
|
+
disconnectedCallback(): void;
|
|
99
|
+
formDisabledCallback(disabled: boolean): void;
|
|
100
|
+
formResetCallback(): void;
|
|
101
|
+
formStateRestoreCallback(state: string | File | FormData, reason: unknown): void;
|
|
102
|
+
/**
|
|
103
|
+
* Set combobox localizations for a specific language
|
|
104
|
+
*
|
|
105
|
+
* @param language Language code
|
|
106
|
+
* @param localizations Localizations for language
|
|
107
|
+
*/
|
|
108
|
+
setLocalizations(language: string, localizations: Partial<OuiComboboxLocalizations>): void;
|
|
109
|
+
/**
|
|
110
|
+
* Set combobox localizations for one or more languages
|
|
111
|
+
*
|
|
112
|
+
* @param localizations Localizations for one or more languages
|
|
113
|
+
*/
|
|
114
|
+
setLocalizations(localizations: Record<string, Partial<OuiComboboxLocalizations>>): void;
|
|
115
|
+
}
|
|
116
|
+
type OuiComboboxLocalizations = {
|
|
117
|
+
empty: string | (() => string);
|
|
118
|
+
input: string | (() => string);
|
|
119
|
+
invalid: string | (() => string);
|
|
120
|
+
max: string | ((max: number) => string);
|
|
121
|
+
min: string | ((min: number) => string);
|
|
122
|
+
remove: string | ((label: string, value: string) => string);
|
|
123
|
+
results: string | ((amount: number) => string);
|
|
124
|
+
selected: string | ((amount: number) => string);
|
|
125
|
+
};
|
|
126
|
+
type OuiComboboxType = 'autocomplete' | 'select';
|
|
127
|
+
/**
|
|
128
|
+
* Set combobox localizations for a specific language
|
|
129
|
+
*
|
|
130
|
+
* @param language Language code
|
|
131
|
+
* @param localizations Localizations for language
|
|
132
|
+
*/
|
|
133
|
+
declare function setLocalizations(language: string, localizations: Partial<OuiComboboxLocalizations>): void;
|
|
134
|
+
/**
|
|
135
|
+
* Set combobox localizations for one or more languages
|
|
136
|
+
*
|
|
137
|
+
* @param localizations Localizations for one or more languages
|
|
138
|
+
*/
|
|
139
|
+
declare function setLocalizations(localizations: Record<string, Partial<OuiComboboxLocalizations>>): void;
|
|
140
|
+
declare const TAGNAME$1 = "oui-combobox";
|
|
141
|
+
//#endregion
|
|
142
|
+
//#region node_modules/@oscarpalmer/toretto/dist/models.d.mts
|
|
143
|
+
/**
|
|
144
|
+
* Event listener that can be removed
|
|
145
|
+
*/
|
|
146
|
+
type RemovableEventListener = () => void;
|
|
147
|
+
//#endregion
|
|
148
|
+
//#region node_modules/@oscarpalmer/atoms/dist/models.d.mts
|
|
149
|
+
/**
|
|
150
|
+
* Position of an event
|
|
151
|
+
*/
|
|
152
|
+
type EventPosition = {
|
|
153
|
+
x: number;
|
|
154
|
+
y: number;
|
|
155
|
+
};
|
|
156
|
+
/**
|
|
157
|
+
* A generic object
|
|
158
|
+
*/
|
|
159
|
+
type PlainObject = Record<PropertyKey, unknown>;
|
|
160
|
+
//#endregion
|
|
161
|
+
//#region node_modules/@oscarpalmer/toretto/dist/style.d.mts
|
|
162
|
+
//#region src/style.d.ts
|
|
163
|
+
type StyleToggler = {
|
|
164
|
+
/**
|
|
165
|
+
* Set the provided styles on the element
|
|
166
|
+
*/
|
|
167
|
+
set(): void;
|
|
168
|
+
/**
|
|
169
|
+
* Remove the provided styles from the element _(and sets any previous styles)_
|
|
170
|
+
*/
|
|
171
|
+
remove(): void;
|
|
172
|
+
};
|
|
173
|
+
//#endregion
|
|
174
|
+
//#region src/js/movable/movable.embedded.d.ts
|
|
175
|
+
declare class OuiMovable extends OuiDraggable<OuiMovableState> {
|
|
176
|
+
#private;
|
|
177
|
+
constructor(element: HTMLElement, options?: CreateOuiDraggableOptions);
|
|
178
|
+
/**
|
|
179
|
+
* Destroys the _Movable_
|
|
180
|
+
*/
|
|
181
|
+
destroy(): void;
|
|
182
|
+
}
|
|
183
|
+
type OuiMovableState = {
|
|
184
|
+
hasHandles?: boolean;
|
|
185
|
+
moved: boolean;
|
|
186
|
+
offset?: Partial<EventPosition>;
|
|
187
|
+
style: OuiMovableStyle;
|
|
188
|
+
};
|
|
189
|
+
type OuiMovableStyle = {
|
|
190
|
+
inset: string | undefined;
|
|
191
|
+
position: string | undefined;
|
|
192
|
+
};
|
|
193
|
+
/**
|
|
194
|
+
* Creates _(or retrieves)_ a _OuiMovable_ instance for an element
|
|
195
|
+
*
|
|
196
|
+
* @param element Element to make movable
|
|
197
|
+
* @returns _OuiMovable_ instance
|
|
198
|
+
*/
|
|
199
|
+
declare function createMovable(element: HTMLElement, options?: CreateOuiDraggableOptions): OuiMovable;
|
|
200
|
+
//#endregion
|
|
201
|
+
//#region src/js/sortable/sortable.embedded.d.ts
|
|
202
|
+
declare class OuiSortable extends OuiDraggable<OuiSortableState> {
|
|
203
|
+
constructor(element: HTMLElement, options?: CreateOuiDraggableOptions);
|
|
204
|
+
}
|
|
205
|
+
type OuiSortableState = {
|
|
206
|
+
connections: string | null | undefined;
|
|
207
|
+
origin?: HTMLElement;
|
|
208
|
+
};
|
|
209
|
+
/**
|
|
210
|
+
* Creates _(or retrieves)_ a _OuiSortable_ instance for an element
|
|
211
|
+
*
|
|
212
|
+
* @param element Element to make sortable
|
|
213
|
+
* @returns _OuiSortable_ instance
|
|
214
|
+
*/
|
|
215
|
+
declare function createSortable(element: HTMLElement, options?: CreateOuiDraggableOptions): OuiSortable;
|
|
216
|
+
//#endregion
|
|
217
|
+
//#region src/js/internal/draggable.d.ts
|
|
218
|
+
type CreateOuiDraggableOptions = {
|
|
219
|
+
/**
|
|
220
|
+
* Container to hold the draggable element and restrict its movement within. Can be `body`, `document`, `window`, a _CSS_ selector, or an element. _(If not provided, the draggable element will not have any constraints)_
|
|
221
|
+
*/
|
|
222
|
+
container?: string | HTMLElement;
|
|
223
|
+
/**
|
|
224
|
+
* Direction in which the element can be dragged. _(If not provided, the element can be dragged in any direction)_
|
|
225
|
+
*/
|
|
226
|
+
direction?: OuiDraggableDirection;
|
|
227
|
+
};
|
|
228
|
+
type OuiDraggableDirection = 'horizontal' | 'vertical' | 'x' | 'y';
|
|
229
|
+
declare abstract class OuiDraggable<ExtraState extends PlainObject = PlainObject> {
|
|
230
|
+
#private;
|
|
231
|
+
get element(): HTMLElement;
|
|
232
|
+
constructor(name: keyof OuiDraggableStates, event: string, attribute: string, element: HTMLElement, options: OuiDraggableOptions<ExtraState>, extras: ExtraState);
|
|
233
|
+
destroy(): void;
|
|
234
|
+
}
|
|
235
|
+
type OuiDragBegin<State extends PlainObject = PlainObject> = (event: MouseEvent | TouchEvent, globals: OuiDraggableGlobals, item: OuiDraggableItem<State>, element: HTMLElement, handle: HTMLElement, position: EventPosition) => void;
|
|
236
|
+
type OuiDragCancel<State extends PlainObject = PlainObject> = (globals: OuiDraggableGlobals, item: OuiDraggableItem<State>) => void;
|
|
237
|
+
type OuiDragEnd<State extends PlainObject = PlainObject> = (event: MouseEvent | TouchEvent, globals: OuiDraggableGlobals, item: OuiDraggableItem<State>, reset: () => void) => void;
|
|
238
|
+
type OuiDragMove<State extends PlainObject = PlainObject> = (event: MouseEvent | TouchEvent, globals: OuiDraggableGlobals, item: OuiDraggableItem<State>, position: OuiDragMovePosition) => PlainObject | undefined;
|
|
239
|
+
type OuiDragMovePosition = {
|
|
240
|
+
calculated: EventPosition;
|
|
241
|
+
original: EventPosition;
|
|
242
|
+
};
|
|
243
|
+
type OuiDraggableGlobals = {
|
|
244
|
+
container?: DOMRect;
|
|
245
|
+
element?: OuiDraggableGlobalsElement;
|
|
246
|
+
instances: WeakMap<HTMLElement, OuiDraggableInstances>;
|
|
247
|
+
offset?: EventPosition;
|
|
248
|
+
original?: EventPosition;
|
|
249
|
+
states: WeakMap<HTMLElement, OuiDraggableStates>;
|
|
250
|
+
};
|
|
251
|
+
type OuiDraggableGlobalsElement = {
|
|
252
|
+
node: HTMLElement;
|
|
253
|
+
rectangle: DOMRect;
|
|
254
|
+
};
|
|
255
|
+
type OuiDraggableInstances = {
|
|
256
|
+
movable?: OuiMovable;
|
|
257
|
+
sortable?: OuiSortable;
|
|
258
|
+
};
|
|
259
|
+
type OuiDraggableItem<ExtraState extends PlainObject = PlainObject> = {
|
|
260
|
+
instance: OuiDraggable<ExtraState>;
|
|
261
|
+
state: OuiDraggableState & ExtraState;
|
|
262
|
+
};
|
|
263
|
+
type OuiDraggableOptions<ExtraState extends PlainObject = PlainObject> = {
|
|
264
|
+
container: OuiDraggableOptionsContainer<ExtraState>;
|
|
265
|
+
direction: OuiDraggableOptionsDirection<ExtraState>;
|
|
266
|
+
drag: OuiDraggableOptionsDrag<ExtraState>;
|
|
267
|
+
input?: CreateOuiDraggableOptions;
|
|
268
|
+
position: OuiDraggableOptionsPosition<ExtraState>;
|
|
269
|
+
getDragged(): HTMLElement;
|
|
270
|
+
getOrigin(): HTMLElement | undefined;
|
|
271
|
+
};
|
|
272
|
+
type OuiDraggableOptionsContainer<ExtraState extends PlainObject = PlainObject> = {
|
|
273
|
+
attribute: string;
|
|
274
|
+
map: Map<HTMLElement, Set<OuiDraggable>>;
|
|
275
|
+
onDestroy?: OuiDraggableOptionsContainerOnDestroy<ExtraState>;
|
|
276
|
+
onInitialize?: OuiDraggableOptionsContainerOnInitialize;
|
|
277
|
+
};
|
|
278
|
+
type OuiDraggableOptionsContainerOnDestroy<ExtraState extends PlainObject = PlainObject> = (item: OuiDraggableItem<ExtraState>, container: HTMLElement, empty: boolean) => void;
|
|
279
|
+
type OuiDraggableOptionsContainerOnInitialize<ExtraState extends PlainObject = PlainObject> = (item: OuiDraggableItem<ExtraState>) => void;
|
|
280
|
+
type OuiDraggableOptionsDirection<ExtraState extends PlainObject = PlainObject> = {
|
|
281
|
+
attribute: string;
|
|
282
|
+
onAfter?: OuiDraggableOptionsDirectionOnAfter<ExtraState>;
|
|
283
|
+
};
|
|
284
|
+
type OuiDraggableOptionsDirectionOnAfter<ExtraState extends PlainObject = PlainObject> = (item: OuiDraggableItem<ExtraState>) => void;
|
|
285
|
+
type OuiDraggableOptionsDrag<ExtraState extends PlainObject = PlainObject> = {
|
|
286
|
+
onBegin: OuiDragBegin<ExtraState>;
|
|
287
|
+
onCancel: OuiDragCancel<ExtraState>;
|
|
288
|
+
onEnd: OuiDragEnd<ExtraState>;
|
|
289
|
+
onMove: OuiDragMove<ExtraState>;
|
|
290
|
+
};
|
|
291
|
+
type OuiDraggableOptionsPosition<ExtraState extends PlainObject = PlainObject> = {
|
|
292
|
+
getOffset: OuiDraggableOptionsPositionGetOffset<ExtraState>;
|
|
293
|
+
getOriginal: OuiDraggableOptionsPositionGetOriginal<ExtraState>;
|
|
294
|
+
};
|
|
295
|
+
type OuiDraggableOptionsPositionGetOffset<ExtraState extends PlainObject = PlainObject> = (globals: OuiDraggableGlobals, item: OuiDraggableItem<ExtraState>, element: HTMLElement, position: EventPosition) => EventPosition;
|
|
296
|
+
type OuiDraggableOptionsPositionGetOriginal<ExtraState extends PlainObject = PlainObject> = (globals: OuiDraggableGlobals, item: OuiDraggableItem<ExtraState>, position: EventPosition) => EventPosition;
|
|
297
|
+
type OuiDraggableState = {
|
|
298
|
+
attribute: string;
|
|
299
|
+
container?: HTMLElement;
|
|
300
|
+
element: HTMLElement;
|
|
301
|
+
hasHandles?: boolean;
|
|
302
|
+
horizontal: boolean;
|
|
303
|
+
name: keyof OuiDraggableStates;
|
|
304
|
+
options: OuiDraggableOptions;
|
|
305
|
+
styling: StyleToggler;
|
|
306
|
+
vertical: boolean;
|
|
307
|
+
};
|
|
308
|
+
type OuiDraggableStates = {
|
|
309
|
+
movable?: OuiDraggableState;
|
|
310
|
+
sortable?: OuiDraggableState;
|
|
311
|
+
};
|
|
312
|
+
//#endregion
|
|
313
|
+
//#region src/js/resizable/resizable.embedded.d.ts
|
|
314
|
+
type CreateOuiResizableOptions = {
|
|
315
|
+
maximumHeight?: number;
|
|
316
|
+
maximumWidth?: number;
|
|
317
|
+
minimumHeight?: number;
|
|
318
|
+
minimumWidth?: number;
|
|
319
|
+
};
|
|
320
|
+
declare class OuiResizable {
|
|
321
|
+
#private;
|
|
322
|
+
constructor(state: OuiResizableState);
|
|
323
|
+
destroy(): void;
|
|
324
|
+
set(): void;
|
|
325
|
+
reset(): void;
|
|
326
|
+
}
|
|
327
|
+
type OuiResizableState = {
|
|
328
|
+
element: HTMLElement;
|
|
329
|
+
handle: HTMLElement;
|
|
330
|
+
height: number;
|
|
331
|
+
options: Required<CreateOuiResizableOptions>;
|
|
332
|
+
styles: StyleToggler;
|
|
333
|
+
width: number;
|
|
334
|
+
};
|
|
335
|
+
/**
|
|
336
|
+
* Creates _(or retrieves)_ a _OuiResizable_ instance for an element
|
|
337
|
+
*
|
|
338
|
+
* @param element Element to make resizable
|
|
339
|
+
* @returns _OuiResizable_ instance
|
|
340
|
+
*/
|
|
341
|
+
declare function createResizable(element: HTMLElement, options?: CreateOuiResizableOptions): OuiResizable;
|
|
342
|
+
//#endregion
|
|
343
|
+
//#region src/js/dialog.d.ts
|
|
344
|
+
declare class OuiDialog {
|
|
345
|
+
#private;
|
|
346
|
+
/**
|
|
347
|
+
* Is the dialog open?
|
|
348
|
+
*/
|
|
349
|
+
get open(): boolean;
|
|
350
|
+
/**
|
|
351
|
+
* Open or close the dialog
|
|
352
|
+
*/
|
|
353
|
+
set open(value: boolean);
|
|
354
|
+
constructor(state: OuiDialogState);
|
|
355
|
+
/**
|
|
356
|
+
* Closes the dialog by request
|
|
357
|
+
*/
|
|
358
|
+
hide(request: true, value?: string): void;
|
|
359
|
+
/**
|
|
360
|
+
* Closes the dialog
|
|
361
|
+
*/
|
|
362
|
+
hide(value?: string): void;
|
|
363
|
+
/**
|
|
364
|
+
* Opens the dialog
|
|
365
|
+
*/
|
|
366
|
+
show(modal?: boolean): void;
|
|
367
|
+
}
|
|
368
|
+
type OuiDialogState = {
|
|
369
|
+
dialog: OuiDialog;
|
|
370
|
+
element: HTMLDialogElement;
|
|
371
|
+
listeners: RemovableEventListener[];
|
|
372
|
+
modal: boolean;
|
|
373
|
+
movable?: OuiMovable;
|
|
374
|
+
resizable?: OuiResizable;
|
|
375
|
+
};
|
|
376
|
+
/**
|
|
377
|
+
* Get the _OuiDialog_ for an element
|
|
378
|
+
*
|
|
379
|
+
* @param element Element to get _OuiDialog_ for
|
|
380
|
+
* @returns _OuiDialog_ instance
|
|
381
|
+
*/
|
|
382
|
+
declare function getDialog(element: HTMLDialogElement): OuiDialog | undefined;
|
|
383
|
+
//#endregion
|
|
384
|
+
//#region src/js/floatable/floatable.embedded.d.ts
|
|
385
|
+
type CreateOuiFloatableOptions = {
|
|
386
|
+
/**
|
|
387
|
+
* Open the floatable when created? _(defaults to `true`)_
|
|
388
|
+
*/
|
|
389
|
+
open?: boolean;
|
|
390
|
+
/**
|
|
391
|
+
* Position of the floatable _(defaults to `below`)_
|
|
392
|
+
*/
|
|
393
|
+
position?: OuiFloatablePosition;
|
|
394
|
+
};
|
|
395
|
+
declare class OuiFloatable {
|
|
396
|
+
#private;
|
|
397
|
+
/**
|
|
398
|
+
* Is the floatable open?
|
|
399
|
+
*/
|
|
400
|
+
get open(): boolean;
|
|
401
|
+
/**
|
|
402
|
+
* Open or close the floatable
|
|
403
|
+
*/
|
|
404
|
+
set open(value: boolean);
|
|
405
|
+
constructor(state: OuiFloatableState, standalone: boolean);
|
|
406
|
+
/**
|
|
407
|
+
* Destroy the floatable, removing it from the DOM and cleaning up references
|
|
408
|
+
*/
|
|
409
|
+
destroy(): void;
|
|
410
|
+
/**
|
|
411
|
+
* Closes the floatable
|
|
412
|
+
*/
|
|
413
|
+
hide(): void;
|
|
414
|
+
/**
|
|
415
|
+
* Opens the floatable
|
|
416
|
+
*/
|
|
417
|
+
show(): void;
|
|
418
|
+
/**
|
|
419
|
+
* Update the position of the floatable, with an optional new position
|
|
420
|
+
*
|
|
421
|
+
* @param position Optional new position
|
|
422
|
+
*/
|
|
423
|
+
update(position?: OuiFloatablePosition): void;
|
|
424
|
+
}
|
|
425
|
+
type OuiFloatableOptions = {
|
|
426
|
+
attribute?: string;
|
|
427
|
+
position: OuiFloatablePosition;
|
|
428
|
+
reusable: boolean;
|
|
429
|
+
};
|
|
430
|
+
type OuiFloatablePosition = 'above' | 'above-end' | 'above-start' | 'below' | 'below-end' | 'below-start' | 'end' | 'end-bottom' | 'end-top' | 'start' | 'start-bottom' | 'start-top';
|
|
431
|
+
type OuiFloatableState = {
|
|
432
|
+
anchor: HTMLElement;
|
|
433
|
+
content: HTMLElement;
|
|
434
|
+
name: string;
|
|
435
|
+
options: OuiFloatableOptions;
|
|
436
|
+
};
|
|
437
|
+
/**
|
|
438
|
+
* Create a _OuiFloatable_ for an anchor and content element
|
|
439
|
+
*
|
|
440
|
+
* @param anchor Anchor element
|
|
441
|
+
* @param content Content element
|
|
442
|
+
* @param options _OuiFloatable_ options
|
|
443
|
+
* @returns _OuiFloatable_ instance
|
|
444
|
+
*/
|
|
445
|
+
declare function createFloatable(anchor: HTMLElement, content: HTMLElement, options?: CreateOuiFloatableOptions): OuiFloatable;
|
|
446
|
+
//#endregion
|
|
447
|
+
//#region src/js/focus-trap/focus-trap.embedded.d.ts
|
|
448
|
+
declare class OuiFocusTrap {
|
|
449
|
+
#private;
|
|
450
|
+
/**
|
|
451
|
+
* Is focused maintained within the _focus trap_ when clicking outside of it?
|
|
452
|
+
*/
|
|
453
|
+
get contain(): boolean;
|
|
454
|
+
/**
|
|
455
|
+
* Should focus be maintained within the _focus trap_ when clicking outside of it?
|
|
456
|
+
*/
|
|
457
|
+
set contain(value: boolean);
|
|
458
|
+
/**
|
|
459
|
+
* Is the _focus trap_ disabled?
|
|
460
|
+
*/
|
|
461
|
+
get disabled(): boolean;
|
|
462
|
+
/**
|
|
463
|
+
* Should the _focus trap_ be disabled?
|
|
464
|
+
*/
|
|
465
|
+
set disabled(value: boolean);
|
|
466
|
+
/**
|
|
467
|
+
* Is focus allowed to escape when pressing _Escape_ within the _focus trap_?
|
|
468
|
+
*/
|
|
469
|
+
get noescape(): boolean;
|
|
470
|
+
/**
|
|
471
|
+
* Should the _focus trap_ allow focus to escape when pressing _Escape_?
|
|
472
|
+
*/
|
|
473
|
+
set noescape(value: boolean);
|
|
474
|
+
constructor(state: OuiFocusTrapState);
|
|
475
|
+
/**
|
|
476
|
+
* Destroys the _focus trap_
|
|
477
|
+
*/
|
|
478
|
+
destroy(): void;
|
|
479
|
+
/**
|
|
480
|
+
* Disables the _focus trap_
|
|
481
|
+
*/
|
|
482
|
+
disable(): void;
|
|
483
|
+
/**
|
|
484
|
+
* Enables the _focus trap_
|
|
485
|
+
*/
|
|
486
|
+
enable(): void;
|
|
487
|
+
/**
|
|
488
|
+
* Focuses the _focus trap_
|
|
489
|
+
*
|
|
490
|
+
* @param last When `true`, focuses the last focusable element within the _focus trap_ instead of the first
|
|
491
|
+
*/
|
|
492
|
+
focus(last: boolean): void;
|
|
493
|
+
}
|
|
494
|
+
type OuiFocusTrapOptions = {
|
|
495
|
+
/**
|
|
496
|
+
* Should focus be maintained within the _focus trap_ when clicking outside of it?
|
|
497
|
+
*/
|
|
498
|
+
contain?: boolean;
|
|
499
|
+
/**
|
|
500
|
+
* Should the _focus trap_ allow focus to escape when pressing _Escape_?
|
|
501
|
+
*/
|
|
502
|
+
noescape?: boolean;
|
|
503
|
+
};
|
|
504
|
+
type OuiFocusTrapState = {
|
|
505
|
+
disabled: boolean;
|
|
506
|
+
element: HTMLElement;
|
|
507
|
+
options: Required<OuiFocusTrapOptions>;
|
|
508
|
+
};
|
|
509
|
+
/**
|
|
510
|
+
* Creates _(or retrieves)_ a _focus trap_ for an element
|
|
511
|
+
*
|
|
512
|
+
* @param element Element to trap focus within
|
|
513
|
+
* @param options _Focus trap_ options
|
|
514
|
+
* @returns _Focus trap_ instance
|
|
515
|
+
*/
|
|
516
|
+
declare function createFocusTrap(element: HTMLElement, options?: OuiFocusTrapOptions): OuiFocusTrap;
|
|
517
|
+
//#endregion
|
|
518
|
+
//#region src/js/popover.d.ts
|
|
519
|
+
declare class OuiPopover {
|
|
520
|
+
#private;
|
|
521
|
+
/**
|
|
522
|
+
* Is the popover open?
|
|
523
|
+
*/
|
|
524
|
+
get open(): boolean;
|
|
525
|
+
set open(value: boolean);
|
|
526
|
+
constructor(state: OuiPopoverState);
|
|
527
|
+
/**
|
|
528
|
+
* Closes the popover
|
|
529
|
+
*/
|
|
530
|
+
hide(): void;
|
|
531
|
+
/**
|
|
532
|
+
* Opens the popover
|
|
533
|
+
*/
|
|
534
|
+
show(): void;
|
|
535
|
+
}
|
|
536
|
+
type OuiPopoverState = {
|
|
537
|
+
anchor: HTMLElement;
|
|
538
|
+
content: HTMLElement;
|
|
539
|
+
floatable: OuiFloatable;
|
|
540
|
+
focusTrap?: OuiFocusTrap;
|
|
541
|
+
listeners: RemovableEventListener[];
|
|
542
|
+
popover: OuiPopover;
|
|
543
|
+
};
|
|
544
|
+
/**
|
|
545
|
+
* Get the _OuiPopover_ for an element
|
|
546
|
+
*
|
|
547
|
+
* @param element Element to get _OuiPopover_ for
|
|
548
|
+
* @returns _OuiPopover_ instance
|
|
549
|
+
*/
|
|
550
|
+
declare function getPopover(element: HTMLElement): OuiPopover | undefined;
|
|
551
|
+
//#endregion
|
|
552
|
+
//#region src/js/splitter.d.ts
|
|
553
|
+
declare global {
|
|
554
|
+
interface HTMLElementTagNameMap {
|
|
555
|
+
[TAGNAME]: OuiSplitterElement;
|
|
556
|
+
}
|
|
557
|
+
}
|
|
558
|
+
declare class OuiSplitterElement extends HTMLElement {
|
|
559
|
+
#private;
|
|
560
|
+
static readonly observedAttributes: string[];
|
|
561
|
+
/**
|
|
562
|
+
* Maximum size for the first panel
|
|
563
|
+
*/
|
|
564
|
+
get max(): number;
|
|
565
|
+
/**
|
|
566
|
+
* Maximum size for the first panel
|
|
567
|
+
*/
|
|
568
|
+
set max(value: number);
|
|
569
|
+
/**
|
|
570
|
+
* Minimum size for the first panel
|
|
571
|
+
*/
|
|
572
|
+
get min(): number;
|
|
573
|
+
/**
|
|
574
|
+
* Minimum size for the first panel
|
|
575
|
+
*/
|
|
576
|
+
set min(value: number);
|
|
577
|
+
/**
|
|
578
|
+
* Current size for the first panel
|
|
579
|
+
*/
|
|
580
|
+
get size(): number;
|
|
581
|
+
/**
|
|
582
|
+
* Current size for the first panel
|
|
583
|
+
*/
|
|
584
|
+
set size(value: number);
|
|
585
|
+
/**
|
|
586
|
+
* Orientation of the splitter
|
|
587
|
+
*/
|
|
588
|
+
get type(): string;
|
|
589
|
+
/**
|
|
590
|
+
* Orientation of the splitter
|
|
591
|
+
*/
|
|
592
|
+
set type(value: string);
|
|
593
|
+
constructor();
|
|
594
|
+
connectedCallback(): void;
|
|
595
|
+
disconnectedCallback(): void;
|
|
596
|
+
attributeChangedCallback(name: string): void;
|
|
597
|
+
}
|
|
598
|
+
declare const TAGNAME = "oui-splitter";
|
|
599
|
+
//#endregion
|
|
600
|
+
//#region src/js/tooltip.d.ts
|
|
601
|
+
declare class OuiTooltip {
|
|
602
|
+
#private;
|
|
603
|
+
/**
|
|
604
|
+
* Is the tooltip open?
|
|
605
|
+
*/
|
|
606
|
+
get open(): boolean;
|
|
607
|
+
/**
|
|
608
|
+
* Open or close the tooltip
|
|
609
|
+
*/
|
|
610
|
+
set open(value: boolean);
|
|
611
|
+
constructor(state: OuiTooltipState);
|
|
612
|
+
/**
|
|
613
|
+
* Closes the tooltip
|
|
614
|
+
*/
|
|
615
|
+
hide(): void;
|
|
616
|
+
/**
|
|
617
|
+
* Opens the tooltip
|
|
618
|
+
*/
|
|
619
|
+
show(): void;
|
|
620
|
+
}
|
|
621
|
+
type OuiTooltipState = {
|
|
622
|
+
anchor: HTMLElement;
|
|
623
|
+
elements: HTMLElement[];
|
|
624
|
+
floatable: OuiFloatable;
|
|
625
|
+
timer?: number;
|
|
626
|
+
tooltip: OuiTooltip;
|
|
627
|
+
};
|
|
628
|
+
/**
|
|
629
|
+
* Get the _OuiTooltip_ for an element
|
|
630
|
+
*
|
|
631
|
+
* @param element Element to get _OuiTooltip_ for
|
|
632
|
+
* @returns _OuiTooltip_ instance
|
|
633
|
+
*/
|
|
634
|
+
declare function getTooltip(element: HTMLElement): OuiTooltip | undefined;
|
|
635
|
+
/**
|
|
636
|
+
* Set the delay before showing the tooltip, in milliseconds
|
|
637
|
+
*
|
|
638
|
+
* _(Default delay is half a second, or 500 milliseconds)_
|
|
639
|
+
* @param value Delay in milliseconds
|
|
640
|
+
*/
|
|
641
|
+
declare function setTooltipDelay(value: number): void;
|
|
642
|
+
//#endregion
|
|
643
|
+
export { type CreateOuiFloatableOptions, type CreateOuiDraggableOptions as CreateOuiMovableOptions, type CreateOuiDraggableOptions as CreateOuiSortableOptions, type CreateOuiResizableOptions, OuiComboboxElement, type OuiDialog, type OuiFloatable, type OuiFloatablePosition, type OuiFocusTrap, type OuiFocusTrapOptions, type OuiMovable, type OuiPopover, type OuiResizable, type OuiSortable, OuiSplitterElement, type OuiTooltip, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setLocalizations, setTooltipDelay };
|