@oscarpalmer/oui 0.19.0 → 0.20.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/a11y.css +0 -1
- package/dist/css/form.css +0 -1
- package/dist/css/popover.css +22 -0
- package/dist/css/reset.css +8 -8
- package/dist/css/table.css +1 -1
- package/dist/css/tooltip.css +43 -0
- package/dist/js/attributable.d.mts +4 -0
- package/dist/js/{attributable.full.js → attributable.mjs} +8 -1
- package/dist/js/floatable.d.mts +26 -0
- package/dist/js/{floatable.js → floatable.mjs} +73 -50
- package/dist/js/focus-trap/embedded.d.mts +26 -0
- package/dist/js/focus-trap/{embedded.js → embedded.mjs} +10 -8
- package/dist/js/focus-trap/standalone.d.mts +1 -0
- package/dist/js/focus-trap/{standalone.js → standalone.mjs} +5 -2
- package/dist/js/index.d.mts +4 -0
- package/dist/js/index.mjs +5 -0
- package/dist/js/popover.d.mts +20 -0
- package/dist/js/{popover.js → popover.mjs} +10 -8
- package/dist/js/splitter.d.mts +25 -0
- package/dist/js/{splitter.js → splitter.mjs} +58 -56
- package/dist/js/tooltip.d.mts +4 -0
- package/dist/js/{tooltip.js → tooltip.mjs} +20 -18
- package/package.json +64 -69
- package/src/css/mixins.scss +30 -1
- package/src/css/popover.scss +6 -1
- package/src/css/reset.scss +4 -4
- package/src/css/table.scss +1 -1
- package/src/css/tooltip.scss +55 -1
- package/src/js/attributable.ts +11 -1
- package/src/js/floatable.ts +136 -58
- package/src/js/focus-trap/embedded.ts +4 -10
- package/src/js/splitter.ts +2 -5
- package/src/js/tooltip.ts +5 -5
- package/dist/js/attributable.js +0 -36
- package/dist/js/floatable.full.js +0 -398
- package/dist/js/focus-trap/embedded.full.js +0 -408
- package/dist/js/focus-trap/standalone.full.js +0 -447
- package/dist/js/index.js +0 -5
- package/dist/js/oui.full.js +0 -1573
- package/dist/js/popover.full.js +0 -760
- package/dist/js/splitter.full.js +0 -769
- package/dist/js/tooltip.full.js +0 -613
- package/types/attributable.d.ts +0 -1
- package/types/floatable.d.ts +0 -24
- package/types/focus-trap/embedded.d.ts +0 -24
- package/types/focus-trap/standalone.d.ts +0 -1
- package/types/index.d.ts +0 -4
- package/types/popover.d.ts +0 -17
- package/types/splitter.d.ts +0 -23
- package/types/tooltip.d.ts +0 -2
package/dist/js/tooltip.full.js
DELETED
|
@@ -1,613 +0,0 @@
|
|
|
1
|
-
function getString(value) {
|
|
2
|
-
if (typeof value === "string") return value;
|
|
3
|
-
if (value == null) return "";
|
|
4
|
-
if (typeof value === "function") return getString(value());
|
|
5
|
-
if (typeof value !== "object") return String(value);
|
|
6
|
-
const asString = String(value.valueOf?.() ?? value);
|
|
7
|
-
return asString.startsWith("[object ") ? JSON.stringify(value) : asString;
|
|
8
|
-
}
|
|
9
|
-
function isNullableOrWhitespace(value) {
|
|
10
|
-
return value == null || EXPRESSION_WHITESPACE$1.test(getString(value));
|
|
11
|
-
}
|
|
12
|
-
var EXPRESSION_WHITESPACE$1 = /^\s*$/;
|
|
13
|
-
function noop() {}
|
|
14
|
-
function calculate() {
|
|
15
|
-
return new Promise((resolve) => {
|
|
16
|
-
const values = [];
|
|
17
|
-
let last;
|
|
18
|
-
function step(now) {
|
|
19
|
-
if (last != null) values.push(now - last);
|
|
20
|
-
last = now;
|
|
21
|
-
if (values.length >= TOTAL) resolve(values.sort().slice(TRIM_PART, -TRIM_PART).reduce((first, second) => first + second, 0) / (values.length - TRIM_TOTAL));
|
|
22
|
-
else requestAnimationFrame(step);
|
|
23
|
-
}
|
|
24
|
-
requestAnimationFrame(step);
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
var TOTAL = 10;
|
|
28
|
-
var TRIM_PART = 2;
|
|
29
|
-
var TRIM_TOTAL = 4;
|
|
30
|
-
await calculate();
|
|
31
|
-
function getBoolean(value, defaultValue) {
|
|
32
|
-
return typeof value === "boolean" ? value : defaultValue ?? false;
|
|
33
|
-
}
|
|
34
|
-
function isEventTarget(value) {
|
|
35
|
-
return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
|
|
36
|
-
}
|
|
37
|
-
function addDelegatedHandler(doc, type, name, passive) {
|
|
38
|
-
if (DELEGATED.has(name)) return;
|
|
39
|
-
DELEGATED.add(name);
|
|
40
|
-
doc.addEventListener(type, passive ? HANDLER_PASSIVE : HANDLER_ACTIVE, { passive });
|
|
41
|
-
}
|
|
42
|
-
function addDelegatedListener(target, type, name, listener, passive) {
|
|
43
|
-
target[name] ??= /* @__PURE__ */ new Set();
|
|
44
|
-
target[name].add(listener);
|
|
45
|
-
addDelegatedHandler(document, type, name, passive);
|
|
46
|
-
return () => {
|
|
47
|
-
removeDelegatedListener(target, name, listener);
|
|
48
|
-
};
|
|
49
|
-
}
|
|
50
|
-
function delegatedEventHandler(event) {
|
|
51
|
-
const key = `${EVENT_PREFIX}${event.type}${this ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
|
|
52
|
-
const items = event.composedPath();
|
|
53
|
-
const { length } = items;
|
|
54
|
-
let target = items[0];
|
|
55
|
-
Object.defineProperties(event, {
|
|
56
|
-
currentTarget: {
|
|
57
|
-
configurable: true,
|
|
58
|
-
get() {
|
|
59
|
-
return target;
|
|
60
|
-
}
|
|
61
|
-
},
|
|
62
|
-
target: {
|
|
63
|
-
configurable: true,
|
|
64
|
-
value: target
|
|
65
|
-
}
|
|
66
|
-
});
|
|
67
|
-
for (let index$1 = 0; index$1 < length; index$1 += 1) {
|
|
68
|
-
const item = items[index$1];
|
|
69
|
-
const listeners = item[key];
|
|
70
|
-
if (item.disabled || listeners == null) continue;
|
|
71
|
-
target = item;
|
|
72
|
-
for (const listener of listeners) {
|
|
73
|
-
listener.call(item, event);
|
|
74
|
-
if (event.cancelBubble) return;
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
function getDelegatedName(target, type, options) {
|
|
79
|
-
if (isEventTarget(target) && EVENT_TYPES.has(type) && !options.capture && !options.once && options.signal == null) return `${EVENT_PREFIX}${type}${options.passive ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
|
|
80
|
-
}
|
|
81
|
-
function removeDelegatedListener(target, name, listener) {
|
|
82
|
-
const handlers = target[name];
|
|
83
|
-
if (handlers == null || !handlers.has(listener)) return false;
|
|
84
|
-
handlers.delete(listener);
|
|
85
|
-
if (handlers.size === 0) target[name] = void 0;
|
|
86
|
-
return true;
|
|
87
|
-
}
|
|
88
|
-
var DELEGATED = /* @__PURE__ */ new Set();
|
|
89
|
-
var EVENT_PREFIX = "@";
|
|
90
|
-
var EVENT_SUFFIX_ACTIVE = ":active";
|
|
91
|
-
var EVENT_SUFFIX_PASSIVE = ":passive";
|
|
92
|
-
var EVENT_TYPES = new Set([
|
|
93
|
-
"beforeinput",
|
|
94
|
-
"click",
|
|
95
|
-
"dblclick",
|
|
96
|
-
"contextmenu",
|
|
97
|
-
"focusin",
|
|
98
|
-
"focusout",
|
|
99
|
-
"input",
|
|
100
|
-
"keydown",
|
|
101
|
-
"keyup",
|
|
102
|
-
"mousedown",
|
|
103
|
-
"mousemove",
|
|
104
|
-
"mouseout",
|
|
105
|
-
"mouseover",
|
|
106
|
-
"mouseup",
|
|
107
|
-
"pointerdown",
|
|
108
|
-
"pointermove",
|
|
109
|
-
"pointerout",
|
|
110
|
-
"pointerover",
|
|
111
|
-
"pointerup",
|
|
112
|
-
"touchend",
|
|
113
|
-
"touchmove",
|
|
114
|
-
"touchstart"
|
|
115
|
-
]);
|
|
116
|
-
var HANDLER_ACTIVE = delegatedEventHandler.bind(false);
|
|
117
|
-
var HANDLER_PASSIVE = delegatedEventHandler.bind(true);
|
|
118
|
-
function createEventOptions(options) {
|
|
119
|
-
return {
|
|
120
|
-
capture: getBoolean(options?.capture),
|
|
121
|
-
once: getBoolean(options?.once),
|
|
122
|
-
passive: getBoolean(options?.passive, true),
|
|
123
|
-
signal: options?.signal instanceof AbortSignal ? options.signal : void 0
|
|
124
|
-
};
|
|
125
|
-
}
|
|
126
|
-
function on(target, type, listener, options) {
|
|
127
|
-
if (!isEventTarget(target) || typeof type !== "string" || typeof listener !== "function") return noop;
|
|
128
|
-
const extended = createEventOptions(options);
|
|
129
|
-
const delegated = getDelegatedName(target, type, extended);
|
|
130
|
-
if (delegated != null) return addDelegatedListener(target, type, delegated, listener, extended.passive);
|
|
131
|
-
target.addEventListener(type, listener, extended);
|
|
132
|
-
if (extended.once) return noop;
|
|
133
|
-
return () => {
|
|
134
|
-
target.removeEventListener(type, listener, extended);
|
|
135
|
-
};
|
|
136
|
-
}
|
|
137
|
-
function findAncestor(origin, selector) {
|
|
138
|
-
if (!(origin instanceof Element) || selector == null) return null;
|
|
139
|
-
if (typeof selector === "string") {
|
|
140
|
-
if (origin.matches?.(selector)) return origin;
|
|
141
|
-
return origin.closest(selector);
|
|
142
|
-
}
|
|
143
|
-
if (typeof selector !== "function") return null;
|
|
144
|
-
if (selector(origin)) return origin;
|
|
145
|
-
let parent = origin.parentElement;
|
|
146
|
-
while (parent != null && !selector(parent)) {
|
|
147
|
-
if (parent === document.body) return null;
|
|
148
|
-
parent = parent.parentElement;
|
|
149
|
-
}
|
|
150
|
-
return parent;
|
|
151
|
-
}
|
|
152
|
-
function attributable(attribute, add, remove) {
|
|
153
|
-
new MutationObserver((entries) => {
|
|
154
|
-
const { length } = entries;
|
|
155
|
-
for (let index$1 = 0; index$1 < length; index$1 += 1) {
|
|
156
|
-
const entry = entries[index$1];
|
|
157
|
-
if (entry.type === "attributes" && entry.target instanceof HTMLElement) if (entry.target.hasAttribute(attribute)) handleAdded(attribute, [entry.target], add);
|
|
158
|
-
else handleRemoved([entry.target], remove);
|
|
159
|
-
else if (entry.type === "childList") {
|
|
160
|
-
handleAdded(attribute, entry.addedNodes, add);
|
|
161
|
-
handleRemoved(entry.removedNodes, remove);
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
}).observe(document, {
|
|
165
|
-
attributeFilter: [attribute],
|
|
166
|
-
attributes: true,
|
|
167
|
-
childList: true,
|
|
168
|
-
subtree: true
|
|
169
|
-
});
|
|
170
|
-
requestAnimationFrame(() => {
|
|
171
|
-
handleAdded(attribute, document.querySelectorAll(`[${attribute}]`), add);
|
|
172
|
-
});
|
|
173
|
-
}
|
|
174
|
-
function handleAdded(attribute, nodes, add) {
|
|
175
|
-
const elements = [...nodes].filter((node) => node instanceof HTMLElement);
|
|
176
|
-
const { length } = elements;
|
|
177
|
-
for (let index$1 = 0; index$1 < length; index$1 += 1) {
|
|
178
|
-
const element = elements[index$1];
|
|
179
|
-
if (element.hasAttribute(attribute)) add(element);
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
function handleRemoved(nodes, remove) {
|
|
183
|
-
const elements = [...nodes].filter((node) => node instanceof HTMLElement);
|
|
184
|
-
const { length } = elements;
|
|
185
|
-
for (let index$1 = 0; index$1 < length; index$1 += 1) remove(elements[index$1]);
|
|
186
|
-
}
|
|
187
|
-
var Floatable = class {
|
|
188
|
-
active = false;
|
|
189
|
-
disabled = false;
|
|
190
|
-
frame;
|
|
191
|
-
ignoreFocus = false;
|
|
192
|
-
constructor(options) {
|
|
193
|
-
this.options = options;
|
|
194
|
-
initialize(this);
|
|
195
|
-
}
|
|
196
|
-
destroy() {
|
|
197
|
-
stop(this);
|
|
198
|
-
const state = getState();
|
|
199
|
-
state?.active.delete(this);
|
|
200
|
-
state?.mapped.delete(this.options.anchor);
|
|
201
|
-
state?.mapped.delete(this.options.content);
|
|
202
|
-
this.options.anchor = void 0;
|
|
203
|
-
this.options.content = void 0;
|
|
204
|
-
}
|
|
205
|
-
disable() {
|
|
206
|
-
if (this.disabled) return;
|
|
207
|
-
this.disabled = true;
|
|
208
|
-
stop(this);
|
|
209
|
-
getState()?.active.delete(this);
|
|
210
|
-
}
|
|
211
|
-
enable() {
|
|
212
|
-
if (!this.disabled) return;
|
|
213
|
-
this.disabled = false;
|
|
214
|
-
initialize(this);
|
|
215
|
-
}
|
|
216
|
-
toggle(active, ignoreFocus) {
|
|
217
|
-
if (this.disabled || this.active === active) return;
|
|
218
|
-
const state = getState();
|
|
219
|
-
if (state == null) return;
|
|
220
|
-
this.ignoreFocus = !active && (ignoreFocus ?? false);
|
|
221
|
-
stop(this);
|
|
222
|
-
if (active) state.active.add(this);
|
|
223
|
-
else state.active.delete(this);
|
|
224
|
-
if (this.options.interactive) if (active) state.order.push(this);
|
|
225
|
-
else {
|
|
226
|
-
const index$1 = state.order.indexOf(this);
|
|
227
|
-
if (index$1 > -1) state.order.splice(index$1, 1);
|
|
228
|
-
}
|
|
229
|
-
if (active) activate(this);
|
|
230
|
-
else deactivate(this);
|
|
231
|
-
}
|
|
232
|
-
};
|
|
233
|
-
function activate(floatable) {
|
|
234
|
-
floatable.active = true;
|
|
235
|
-
document.body.append(floatable.options.content);
|
|
236
|
-
floatable.options.content.hidden = false;
|
|
237
|
-
updatePosition(floatable);
|
|
238
|
-
}
|
|
239
|
-
function closeAbove(element) {
|
|
240
|
-
const state = getState();
|
|
241
|
-
if (state == null) return;
|
|
242
|
-
const index$1 = state.order.findIndex((floatable) => floatable.options.anchor === element || floatable.options.content === element);
|
|
243
|
-
if (index$1 === -1 || index$1 === state.order.length - 1) return;
|
|
244
|
-
while (index$1 < state.order.length - 1) state.order.pop()?.toggle(false, true);
|
|
245
|
-
}
|
|
246
|
-
function closeAll() {
|
|
247
|
-
const state = getState();
|
|
248
|
-
const floatables = [...state?.active ?? []];
|
|
249
|
-
state?.active.clear();
|
|
250
|
-
for (const floatable of floatables) floatable.toggle(false, true);
|
|
251
|
-
}
|
|
252
|
-
function closeNonInteractive(state) {
|
|
253
|
-
for (const floatable of state.active) if (!floatable.options.interactive) floatable.toggle(false);
|
|
254
|
-
}
|
|
255
|
-
function deactivate(floatable) {
|
|
256
|
-
floatable.active = false;
|
|
257
|
-
floatable.options.content.hidden = true;
|
|
258
|
-
floatable.options.anchor.insertAdjacentElement(INSERT_AFTEREND, floatable.options.content);
|
|
259
|
-
floatable.options.onAfter?.(false);
|
|
260
|
-
}
|
|
261
|
-
function getState() {
|
|
262
|
-
return window._oscarpalmer_oui_floatable;
|
|
263
|
-
}
|
|
264
|
-
function getX(anchor, content, position) {
|
|
265
|
-
if (position.endsWith(POSITION_SUFFIX_END)) {
|
|
266
|
-
const end = anchor.right - content.width;
|
|
267
|
-
return end < 0 ? 0 : end;
|
|
268
|
-
}
|
|
269
|
-
if (position.endsWith(POSITION_SUFFIX_START)) {
|
|
270
|
-
const start = anchor.left;
|
|
271
|
-
return start + content.width > window.innerWidth ? window.innerWidth - content.width : start;
|
|
272
|
-
}
|
|
273
|
-
if (position.startsWith(POSITION_END)) return anchor.right;
|
|
274
|
-
if (position.startsWith(POSITION_START)) return anchor.left - content.width;
|
|
275
|
-
if (position.startsWith(POSITION_HORIZONTAL)) {
|
|
276
|
-
if (anchor.right + content.width <= window.innerWidth) return anchor.right;
|
|
277
|
-
return anchor.left - content.width;
|
|
278
|
-
}
|
|
279
|
-
const left = anchor.left + (anchor.width - content.width) / 2;
|
|
280
|
-
return left < 0 ? 0 : left;
|
|
281
|
-
}
|
|
282
|
-
function getY(anchor, content, position, preferAbove) {
|
|
283
|
-
if (position.startsWith(POSITION_ABOVE)) return anchor.top - content.height;
|
|
284
|
-
if (position.startsWith(POSITION_BELOW)) return anchor.bottom;
|
|
285
|
-
if (position.endsWith(POSITION_BOTTOM)) {
|
|
286
|
-
const bottom = anchor.bottom - content.height;
|
|
287
|
-
return bottom < 0 ? 0 : bottom;
|
|
288
|
-
}
|
|
289
|
-
if (position.endsWith(POSITION_TOP)) {
|
|
290
|
-
const top = anchor.top;
|
|
291
|
-
return top + content.height > window.innerHeight ? window.innerHeight - content.height : top;
|
|
292
|
-
}
|
|
293
|
-
if (position.startsWith(POSITION_VERTICAL)) {
|
|
294
|
-
if (preferAbove && anchor.top - content.height >= 0) return anchor.top - content.height;
|
|
295
|
-
if (anchor.bottom + content.height <= document.body.clientHeight) return anchor.bottom;
|
|
296
|
-
return anchor.top - content.height;
|
|
297
|
-
}
|
|
298
|
-
return anchor.top + (anchor.height - content.height) / 2;
|
|
299
|
-
}
|
|
300
|
-
function initialize(floatable) {
|
|
301
|
-
const { anchor, content, interactive } = floatable.options;
|
|
302
|
-
if (interactive) {
|
|
303
|
-
anchor.setAttribute(ATTRIBUTE_ANCHOR, "");
|
|
304
|
-
content.setAttribute(ATTRIBUTE_CONTENT$1, "");
|
|
305
|
-
}
|
|
306
|
-
content.style.position = "fixed";
|
|
307
|
-
content.style.inset = "0 auto auto 0";
|
|
308
|
-
content.style.zIndex = "10";
|
|
309
|
-
const state = getState();
|
|
310
|
-
state?.mapped.set(anchor, floatable);
|
|
311
|
-
state?.mapped.set(content, floatable);
|
|
312
|
-
}
|
|
313
|
-
function isDisabled(element) {
|
|
314
|
-
return element.disabled || element.readOnly || element.getAttribute("aria-disabled") === "true";
|
|
315
|
-
}
|
|
316
|
-
function onClick$1(event) {
|
|
317
|
-
const related = findAncestor(event.target, SELECTOR_ALL);
|
|
318
|
-
if (!(related instanceof HTMLElement)) closeAll();
|
|
319
|
-
else if (related.hasAttribute(ATTRIBUTE_CONTENT$1)) closeAbove(related);
|
|
320
|
-
else if (!isDisabled(related)) toggle$1(related);
|
|
321
|
-
}
|
|
322
|
-
function onKeyDown(event) {
|
|
323
|
-
if (event.key !== "Escape") return;
|
|
324
|
-
const state = getState();
|
|
325
|
-
if (state == null || state.active.size === 0) return;
|
|
326
|
-
closeNonInteractive(state);
|
|
327
|
-
const related = findAncestor(event.target, SELECTOR_CONTENT$1);
|
|
328
|
-
if (!(related instanceof HTMLElement)) return;
|
|
329
|
-
closeAbove(related);
|
|
330
|
-
const floatable = state.mapped.get(related);
|
|
331
|
-
if (floatable != null) floatable.toggle(false);
|
|
332
|
-
}
|
|
333
|
-
function stop(floatable) {
|
|
334
|
-
if (floatable.frame != null) cancelAnimationFrame(floatable.frame);
|
|
335
|
-
floatable.frame = void 0;
|
|
336
|
-
}
|
|
337
|
-
function toggle$1(anchor) {
|
|
338
|
-
const floatable = getState()?.mapped.get(anchor);
|
|
339
|
-
if (floatable == null) {
|
|
340
|
-
closeAll();
|
|
341
|
-
return;
|
|
342
|
-
}
|
|
343
|
-
const active = Boolean(floatable.active);
|
|
344
|
-
const content = findAncestor(floatable.options.anchor, SELECTOR_CONTENT$1);
|
|
345
|
-
if (content == null) closeAll();
|
|
346
|
-
else closeAbove(content);
|
|
347
|
-
floatable.toggle(!active);
|
|
348
|
-
}
|
|
349
|
-
function updatePosition(floatable) {
|
|
350
|
-
let position = floatable.options.anchor.getAttribute(floatable.options.positionAttribute)?.trim() ?? floatable.options.defaultPosition;
|
|
351
|
-
if (!POSITIONS.has(position)) position = floatable.options.defaultPosition;
|
|
352
|
-
let previousAnchor;
|
|
353
|
-
let previousContent;
|
|
354
|
-
let calculated = false;
|
|
355
|
-
let runOnAfter = false;
|
|
356
|
-
function run() {
|
|
357
|
-
const anchor = floatable.options.anchor.getBoundingClientRect();
|
|
358
|
-
const content = floatable.options.content.getBoundingClientRect();
|
|
359
|
-
if (calculated) {
|
|
360
|
-
if (previousAnchor != null && previousContent != null) {
|
|
361
|
-
if (PROPERTIES.every((property) => anchor[property] === previousAnchor[property]) && PROPERTIES.every((property) => content[property] === previousContent[property])) {
|
|
362
|
-
floatable.frame = requestAnimationFrame(run);
|
|
363
|
-
return;
|
|
364
|
-
}
|
|
365
|
-
}
|
|
366
|
-
} else calculated = true;
|
|
367
|
-
update(anchor, content);
|
|
368
|
-
}
|
|
369
|
-
function update(anchor, content) {
|
|
370
|
-
previousAnchor = anchor;
|
|
371
|
-
previousContent = content;
|
|
372
|
-
const left = getX(anchor, content, position);
|
|
373
|
-
const top = getY(anchor, content, position, floatable.options.preferAbove);
|
|
374
|
-
if (top + content.height > window.innerHeight) floatable.options.content.style.height = `${window.innerHeight - top}px`;
|
|
375
|
-
else floatable.options.content.style.height = "";
|
|
376
|
-
if (left + content.width > window.innerWidth) floatable.options.content.style.width = `${window.innerWidth - left}px`;
|
|
377
|
-
else floatable.options.content.style.width = "";
|
|
378
|
-
floatable.options.content.style.transform = `translate3d(${left}px, ${top}px, 0)`;
|
|
379
|
-
floatable.frame = requestAnimationFrame(run);
|
|
380
|
-
if (!runOnAfter) {
|
|
381
|
-
runOnAfter = true;
|
|
382
|
-
floatable.options.onAfter?.(true);
|
|
383
|
-
}
|
|
384
|
-
}
|
|
385
|
-
floatable.frame = requestAnimationFrame(run);
|
|
386
|
-
}
|
|
387
|
-
const ATTRIBUTE_ANCHOR = "oui-floatable-anchor";
|
|
388
|
-
const ATTRIBUTE_CONTENT$1 = "oui-floatable-content";
|
|
389
|
-
const INSERT_AFTEREND = "afterend";
|
|
390
|
-
const POSITION_ABOVE = "above";
|
|
391
|
-
const POSITION_BELOW = "below";
|
|
392
|
-
const POSITION_BOTTOM = "bottom";
|
|
393
|
-
const POSITION_END = "end";
|
|
394
|
-
const POSITION_HORIZONTAL = "horizontal";
|
|
395
|
-
const POSITION_START = "start";
|
|
396
|
-
const POSITION_SUFFIX_END = "-end";
|
|
397
|
-
const POSITION_SUFFIX_START = "-start";
|
|
398
|
-
const POSITION_TOP = "top";
|
|
399
|
-
const POSITION_VERTICAL = "vertical";
|
|
400
|
-
const POSITIONS = new Set([
|
|
401
|
-
"above",
|
|
402
|
-
"above-end",
|
|
403
|
-
"above-start",
|
|
404
|
-
"below",
|
|
405
|
-
"below-end",
|
|
406
|
-
"below-start",
|
|
407
|
-
"end",
|
|
408
|
-
"end-bottom",
|
|
409
|
-
"end-top",
|
|
410
|
-
"horizontal",
|
|
411
|
-
"horizontal-bottom",
|
|
412
|
-
"horizontal-top",
|
|
413
|
-
"start",
|
|
414
|
-
"start-bottom",
|
|
415
|
-
"start-top",
|
|
416
|
-
"vertical",
|
|
417
|
-
"vertical-end",
|
|
418
|
-
"vertical-start"
|
|
419
|
-
]);
|
|
420
|
-
const PROPERTIES = [
|
|
421
|
-
"bottom",
|
|
422
|
-
"left",
|
|
423
|
-
"right",
|
|
424
|
-
"top"
|
|
425
|
-
];
|
|
426
|
-
const SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT$1}]`;
|
|
427
|
-
const SELECTOR_CONTENT$1 = `[${ATTRIBUTE_CONTENT$1}]`;
|
|
428
|
-
if (window._oscarpalmer_oui_floatable == null) {
|
|
429
|
-
Object.defineProperty(window, "_oscarpalmer_oui_floatable", {
|
|
430
|
-
enumerable: false,
|
|
431
|
-
value: {
|
|
432
|
-
active: /* @__PURE__ */ new Set(),
|
|
433
|
-
mapped: /* @__PURE__ */ new Map(),
|
|
434
|
-
order: []
|
|
435
|
-
},
|
|
436
|
-
writable: false
|
|
437
|
-
});
|
|
438
|
-
on(document, "keydown", (event) => {
|
|
439
|
-
onKeyDown(event);
|
|
440
|
-
});
|
|
441
|
-
on(document, "click", (event) => {
|
|
442
|
-
onClick$1(event);
|
|
443
|
-
});
|
|
444
|
-
}
|
|
445
|
-
var Tooltip = class {
|
|
446
|
-
attributes;
|
|
447
|
-
floatable;
|
|
448
|
-
timer;
|
|
449
|
-
constructor(anchor, content) {
|
|
450
|
-
this.attributes = content.attributes;
|
|
451
|
-
this.floatable = new Floatable({
|
|
452
|
-
anchor,
|
|
453
|
-
content: content.element,
|
|
454
|
-
defaultPosition: "vertical",
|
|
455
|
-
interactive: false,
|
|
456
|
-
preferAbove: true,
|
|
457
|
-
positionAttribute: ATTRIBUTE_POSITION
|
|
458
|
-
});
|
|
459
|
-
anchor.insertAdjacentElement("afterend", content.element);
|
|
460
|
-
TOOLTIPS_ALL.set(content.element, this);
|
|
461
|
-
}
|
|
462
|
-
destroy() {
|
|
463
|
-
const { attributes, floatable } = this;
|
|
464
|
-
TOOLTIPS_ACTIVE.delete(this);
|
|
465
|
-
TOOLTIPS_ALL.delete(floatable.options.anchor);
|
|
466
|
-
TOOLTIPS_ALL.delete(floatable.options.content);
|
|
467
|
-
reset(floatable.options.anchor, attributes);
|
|
468
|
-
floatable.options.content.remove();
|
|
469
|
-
floatable.destroy();
|
|
470
|
-
this.attributes = void 0;
|
|
471
|
-
this.floatable = void 0;
|
|
472
|
-
}
|
|
473
|
-
};
|
|
474
|
-
function addTooltip(anchor) {
|
|
475
|
-
if (TOOLTIPS_ALL.has(anchor)) return;
|
|
476
|
-
const content = getContent(anchor);
|
|
477
|
-
if (content != null) TOOLTIPS_ALL.set(anchor, new Tooltip(anchor, content));
|
|
478
|
-
}
|
|
479
|
-
function closeTooltips(next) {
|
|
480
|
-
const tooltips = [...TOOLTIPS_ACTIVE];
|
|
481
|
-
for (const active of tooltips) {
|
|
482
|
-
if (active === next) continue;
|
|
483
|
-
if (active.timer != null) clearTimeout(active.timer);
|
|
484
|
-
active.floatable.options.content.removeAttribute("oui-tooltip-content-active");
|
|
485
|
-
requestAnimationFrame(() => {
|
|
486
|
-
active.timer = setTimeout(() => {
|
|
487
|
-
TOOLTIPS_ACTIVE.delete(active);
|
|
488
|
-
active.floatable.toggle(false);
|
|
489
|
-
}, delay);
|
|
490
|
-
});
|
|
491
|
-
}
|
|
492
|
-
}
|
|
493
|
-
function getContent(anchor) {
|
|
494
|
-
const attributes = {
|
|
495
|
-
ariaDescribedby: anchor.getAttribute("aria-describedby"),
|
|
496
|
-
ariaLabelledBy: anchor.getAttribute("aria-labelledby")
|
|
497
|
-
};
|
|
498
|
-
const wrapper = getWrapper(anchor);
|
|
499
|
-
const labelledElements = getElements(attributes.ariaLabelledBy);
|
|
500
|
-
if (labelledElements.length > 0) {
|
|
501
|
-
anchor.setAttribute("aria-labelledby", wrapper.id);
|
|
502
|
-
for (const element of labelledElements) wrapper.append(element);
|
|
503
|
-
return {
|
|
504
|
-
attributes,
|
|
505
|
-
element: wrapper
|
|
506
|
-
};
|
|
507
|
-
}
|
|
508
|
-
const describedElements = getElements(attributes.ariaDescribedby);
|
|
509
|
-
if (describedElements.length > 0) {
|
|
510
|
-
anchor.setAttribute("aria-describedby", wrapper.id);
|
|
511
|
-
for (const element of describedElements) wrapper.append(element);
|
|
512
|
-
return {
|
|
513
|
-
attributes,
|
|
514
|
-
element: wrapper
|
|
515
|
-
};
|
|
516
|
-
}
|
|
517
|
-
let content = anchor.getAttribute("aria-label");
|
|
518
|
-
if (isNullableOrWhitespace(content)) content = anchor.getAttribute("aria-description");
|
|
519
|
-
if (isNullableOrWhitespace(content)) return;
|
|
520
|
-
const paragraph = document.createElement("p");
|
|
521
|
-
paragraph.textContent = content;
|
|
522
|
-
wrapper.append(paragraph);
|
|
523
|
-
return {
|
|
524
|
-
attributes,
|
|
525
|
-
element: wrapper
|
|
526
|
-
};
|
|
527
|
-
}
|
|
528
|
-
function getElements(attribute) {
|
|
529
|
-
const ids = attribute?.split(EXPRESSION_WHITESPACE) ?? [];
|
|
530
|
-
const elements = [];
|
|
531
|
-
for (const id of ids) {
|
|
532
|
-
if (isNullableOrWhitespace(id)) continue;
|
|
533
|
-
const element = document.querySelector(`#${id}`);
|
|
534
|
-
if (element instanceof HTMLElement) {
|
|
535
|
-
const cloned = element.cloneNode(true);
|
|
536
|
-
cloned.hidden = false;
|
|
537
|
-
elements.push(cloned);
|
|
538
|
-
}
|
|
539
|
-
}
|
|
540
|
-
return elements;
|
|
541
|
-
}
|
|
542
|
-
function getWrapper(anchor) {
|
|
543
|
-
const wrapper = document.createElement("div");
|
|
544
|
-
wrapper.setAttribute(ATTRIBUTE_CONTENT, "");
|
|
545
|
-
wrapper.className = anchor.getAttribute(ATTRIBUTE_CLASS) ?? "";
|
|
546
|
-
wrapper.hidden = true;
|
|
547
|
-
wrapper.id = `${SELECTOR}-${++index}`;
|
|
548
|
-
wrapper.role = "tooltip";
|
|
549
|
-
wrapper.tabIndex = -1;
|
|
550
|
-
return wrapper;
|
|
551
|
-
}
|
|
552
|
-
function onActivate(event) {
|
|
553
|
-
onToggle(event, true);
|
|
554
|
-
}
|
|
555
|
-
function onClick(event) {
|
|
556
|
-
if (findAncestor(event.target, SELECTOR_CONTENT) != null) event.stopPropagation();
|
|
557
|
-
}
|
|
558
|
-
function onDeactivate(event) {
|
|
559
|
-
onToggle(event, false);
|
|
560
|
-
}
|
|
561
|
-
function onToggle(event, activate$1) {
|
|
562
|
-
if (toggle != null) cancelAnimationFrame(toggle);
|
|
563
|
-
toggle = requestAnimationFrame(() => {
|
|
564
|
-
toggle = void 0;
|
|
565
|
-
const element = findAncestor(event.target, SELECTOR_FULL);
|
|
566
|
-
const tooltip = TOOLTIPS_ALL.get(element);
|
|
567
|
-
if (TOOLTIPS_ACTIVE.size > 0) closeTooltips(tooltip);
|
|
568
|
-
if (tooltip == null || tooltip.floatable.options.content.hasAttribute("oui-tooltip-content-active") === activate$1) return;
|
|
569
|
-
if (activate$1) {
|
|
570
|
-
if (tooltip.timer != null) clearTimeout(tooltip.timer);
|
|
571
|
-
TOOLTIPS_ACTIVE.add(tooltip);
|
|
572
|
-
tooltip.floatable.toggle(true);
|
|
573
|
-
requestAnimationFrame(() => {
|
|
574
|
-
tooltip.floatable.options.content.setAttribute("oui-tooltip-content-active", "");
|
|
575
|
-
});
|
|
576
|
-
return;
|
|
577
|
-
}
|
|
578
|
-
tooltip.floatable.options.content.removeAttribute("oui-tooltip-content-active");
|
|
579
|
-
tooltip.timer ??= setTimeout(() => {
|
|
580
|
-
TOOLTIPS_ACTIVE.delete(tooltip);
|
|
581
|
-
tooltip.floatable.toggle(false);
|
|
582
|
-
}, delay);
|
|
583
|
-
});
|
|
584
|
-
}
|
|
585
|
-
function removeTooltip(element) {
|
|
586
|
-
if (!element.hasAttribute(ATTRIBUTE_CONTENT)) TOOLTIPS_ALL.get(element)?.destroy();
|
|
587
|
-
}
|
|
588
|
-
function reset(anchor, attributes) {
|
|
589
|
-
if (attributes.ariaDescribedby == null) anchor.removeAttribute("aria-describedby");
|
|
590
|
-
else anchor.setAttribute("aria-describedby", attributes.ariaDescribedby);
|
|
591
|
-
}
|
|
592
|
-
function setDelay(value) {
|
|
593
|
-
delay = typeof value === "number" && value >= 0 ? value : delay;
|
|
594
|
-
}
|
|
595
|
-
const SELECTOR = "oui-tooltip";
|
|
596
|
-
const ATTRIBUTE_CLASS = `${SELECTOR}-class`;
|
|
597
|
-
const ATTRIBUTE_CONTENT = `${SELECTOR}-content`;
|
|
598
|
-
const ATTRIBUTE_POSITION = `${SELECTOR}-position`;
|
|
599
|
-
const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
|
|
600
|
-
const SELECTOR_FULL = `[${SELECTOR}], [${ATTRIBUTE_CONTENT}]`;
|
|
601
|
-
const EXPRESSION_WHITESPACE = /\s+/;
|
|
602
|
-
const TOOLTIPS_ACTIVE = /* @__PURE__ */ new Set();
|
|
603
|
-
const TOOLTIPS_ALL = /* @__PURE__ */ new WeakMap();
|
|
604
|
-
let delay = 250;
|
|
605
|
-
let index = 0;
|
|
606
|
-
let toggle;
|
|
607
|
-
attributable(SELECTOR, addTooltip, removeTooltip);
|
|
608
|
-
on(document, "click", onClick, { capture: true });
|
|
609
|
-
on(document, "focusin", onActivate);
|
|
610
|
-
on(document, "focusout", onDeactivate);
|
|
611
|
-
on(document, "mousemove", onActivate);
|
|
612
|
-
on(document, "touchstart", onActivate);
|
|
613
|
-
export { setDelay };
|
package/types/attributable.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function attributable(attribute: string, add: (element: HTMLElement) => void, remove: (element: HTMLElement) => void): void;
|
package/types/floatable.d.ts
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
export declare class Floatable {
|
|
2
|
-
readonly options: Options;
|
|
3
|
-
active: boolean;
|
|
4
|
-
disabled: boolean;
|
|
5
|
-
frame: DOMHighResTimeStamp | undefined;
|
|
6
|
-
ignoreFocus: boolean;
|
|
7
|
-
constructor(options: Options);
|
|
8
|
-
destroy(): void;
|
|
9
|
-
disable(): void;
|
|
10
|
-
enable(): void;
|
|
11
|
-
toggle(active: boolean, ignoreFocus?: boolean): void;
|
|
12
|
-
}
|
|
13
|
-
type Options = {
|
|
14
|
-
anchor: HTMLElement;
|
|
15
|
-
content: HTMLElement;
|
|
16
|
-
defaultPosition: Position;
|
|
17
|
-
interactive: boolean;
|
|
18
|
-
positionAttribute: string;
|
|
19
|
-
preferAbove: boolean;
|
|
20
|
-
onAfter?: (active: boolean) => void;
|
|
21
|
-
};
|
|
22
|
-
type Position = 'above' | 'above-end' | 'above-start' | 'below' | 'below-end' | 'below-start' | 'end' | 'end-bottom' | 'end-top' | 'horizontal' | 'horizontal-bottom' | 'horizontal-top' | 'start' | 'start-bottom' | 'start-top' | 'vertical' | 'vertical-end' | 'vertical-start';
|
|
23
|
-
export declare function deactivate(floatable: Floatable): void;
|
|
24
|
-
export {};
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
export declare class FocusTrap {
|
|
2
|
-
disabled: boolean;
|
|
3
|
-
connected: boolean;
|
|
4
|
-
element: HTMLElement;
|
|
5
|
-
embedded: boolean;
|
|
6
|
-
get contain(): boolean;
|
|
7
|
-
get noescape(): boolean;
|
|
8
|
-
constructor(element: HTMLElement, options?: Options);
|
|
9
|
-
connect(): void;
|
|
10
|
-
destroy(): void;
|
|
11
|
-
disable(): void;
|
|
12
|
-
disconnect(): void;
|
|
13
|
-
enable(): void;
|
|
14
|
-
focus(last: boolean): void;
|
|
15
|
-
}
|
|
16
|
-
type Options = {
|
|
17
|
-
noescape: boolean;
|
|
18
|
-
};
|
|
19
|
-
export declare function createFocusTrap(element: HTMLElement, options?: Options): FocusTrap;
|
|
20
|
-
export declare const FOCUS_TRAP_SELECTOR = "oui-focus-trap";
|
|
21
|
-
export declare const FOCUS_TRAP_CONTAIN = "oui-focus-trap-contain";
|
|
22
|
-
export declare const FOCUS_TRAP_NOESCAPE = "oui-focus-trap-noescape";
|
|
23
|
-
export declare const FOCUSTRAPS_ALL: WeakMap<HTMLElement, FocusTrap>;
|
|
24
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/types/index.d.ts
DELETED
package/types/popover.d.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
declare global {
|
|
2
|
-
interface HTMLElementTagNameMap {
|
|
3
|
-
'oui-popover': OuiPopoverElement;
|
|
4
|
-
}
|
|
5
|
-
}
|
|
6
|
-
export declare class OuiPopoverElement extends HTMLElement {
|
|
7
|
-
#private;
|
|
8
|
-
constructor();
|
|
9
|
-
close(): void;
|
|
10
|
-
connectedCallback(): void;
|
|
11
|
-
disconnectedCallback(): void;
|
|
12
|
-
hidePopover(): void;
|
|
13
|
-
open(): void;
|
|
14
|
-
showPopover(): void;
|
|
15
|
-
toggle(): void;
|
|
16
|
-
togglePopover(options?: boolean): boolean;
|
|
17
|
-
}
|