@oscarpalmer/oui 0.18.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.
Files changed (67) hide show
  1. package/dist/css/a11y.css +0 -1
  2. package/dist/css/badge.css +10 -10
  3. package/dist/css/button.css +9 -9
  4. package/dist/css/color.css +99 -99
  5. package/dist/css/content.css +1 -1
  6. package/dist/css/flex.css +39 -39
  7. package/dist/css/form.css +29 -57
  8. package/dist/css/message.css +6 -6
  9. package/dist/css/popover.css +22 -0
  10. package/dist/css/reset.css +11 -10
  11. package/dist/css/table.css +5 -5
  12. package/dist/css/tooltip.css +61 -1
  13. package/dist/js/attributable.d.mts +4 -0
  14. package/dist/js/{attributable.js → attributable.mjs} +8 -1
  15. package/dist/js/floatable.d.mts +26 -0
  16. package/dist/js/{floatable.js → floatable.mjs} +73 -50
  17. package/dist/js/focus-trap/embedded.d.mts +26 -0
  18. package/dist/js/focus-trap/{embedded.js → embedded.mjs} +10 -8
  19. package/dist/js/focus-trap/standalone.d.mts +1 -0
  20. package/dist/js/focus-trap/{standalone.js → standalone.mjs} +5 -2
  21. package/dist/js/index.d.mts +4 -0
  22. package/dist/js/index.mjs +5 -0
  23. package/dist/js/popover.d.mts +20 -0
  24. package/dist/js/{popover.js → popover.mjs} +11 -9
  25. package/dist/js/splitter.d.mts +25 -0
  26. package/dist/js/{splitter.js → splitter.mjs} +60 -58
  27. package/dist/js/tooltip.d.mts +4 -0
  28. package/dist/js/{tooltip.js → tooltip.mjs} +21 -19
  29. package/package.json +65 -70
  30. package/src/css/a11y.scss +1 -1
  31. package/src/css/badge.scss +23 -19
  32. package/src/css/button.scss +9 -9
  33. package/src/css/color.scss +99 -99
  34. package/src/css/content.scss +6 -8
  35. package/src/css/flex.scss +21 -20
  36. package/src/css/form.scss +37 -60
  37. package/src/css/message.scss +8 -12
  38. package/src/css/mixins.scss +41 -13
  39. package/src/css/popover.scss +7 -2
  40. package/src/css/reset.scss +18 -18
  41. package/src/css/splitter.scss +15 -13
  42. package/src/css/table.scss +12 -12
  43. package/src/css/tooltip.scss +79 -4
  44. package/src/js/attributable.ts +14 -11
  45. package/src/js/floatable.ts +134 -74
  46. package/src/js/focus-trap/embedded.ts +7 -31
  47. package/src/js/popover.ts +3 -3
  48. package/src/js/splitter.ts +10 -43
  49. package/src/js/tooltip.ts +8 -20
  50. package/dist/css/value.css +0 -1
  51. package/dist/js/attributable.full.js +0 -48
  52. package/dist/js/floatable.full.js +0 -413
  53. package/dist/js/focus-trap/embedded.full.js +0 -351
  54. package/dist/js/focus-trap/standalone.full.js +0 -402
  55. package/dist/js/index.js +0 -5
  56. package/dist/js/oui.full.js +0 -1596
  57. package/dist/js/popover.full.js +0 -822
  58. package/dist/js/splitter.full.js +0 -605
  59. package/dist/js/tooltip.full.js +0 -679
  60. package/types/attributable.d.ts +0 -1
  61. package/types/floatable.d.ts +0 -24
  62. package/types/focus-trap/embedded.d.ts +0 -24
  63. package/types/focus-trap/standalone.d.ts +0 -1
  64. package/types/index.d.ts +0 -4
  65. package/types/popover.d.ts +0 -17
  66. package/types/splitter.d.ts +0 -23
  67. package/types/tooltip.d.ts +0 -2
@@ -1,5 +1,6 @@
1
1
  import { on } from "@oscarpalmer/toretto/event";
2
2
  import { findAncestor } from "@oscarpalmer/toretto/find";
3
+ //#region src/js/floatable.ts
3
4
  var Floatable = class {
4
5
  active = false;
5
6
  disabled = false;
@@ -74,44 +75,68 @@ function deactivate(floatable) {
74
75
  floatable.options.anchor.insertAdjacentElement(INSERT_AFTEREND, floatable.options.content);
75
76
  floatable.options.onAfter?.(false);
76
77
  }
78
+ function getAttribute(position, anchor, top, left) {
79
+ switch (position) {
80
+ case "horizontal":
81
+ case "horizontal-bottom":
82
+ case "horizontal-top": return position.replace("horizontal", left >= anchor.right ? "right" : "left");
83
+ case "vertical":
84
+ case "vertical-end":
85
+ case "vertical-start": return position.replace("vertical", top >= anchor.bottom ? "bottom" : "top");
86
+ default: break;
87
+ }
88
+ }
89
+ function getMargin() {
90
+ try {
91
+ const fontsize = parseFloat(getComputedStyle(document.documentElement).fontSize);
92
+ if (Number.isNaN(fontsize)) return 5;
93
+ const margin = fontsize / 2;
94
+ return margin < 5 ? 5 : margin;
95
+ } catch {
96
+ return 5;
97
+ }
98
+ }
77
99
  function getState() {
78
100
  return window._oscarpalmer_oui_floatable;
79
101
  }
80
- function getX(anchor, content, position) {
81
- if (position.endsWith(POSITION_SUFFIX_END)) {
82
- const end = anchor.right - content.width;
83
- return end < 0 ? 0 : end;
102
+ function getX(anchor, content, position, margin) {
103
+ if (position === "above" || position === "below" || position === "vertical") {
104
+ const center = anchor.left + anchor.width / 2;
105
+ const width = content.width / 2;
106
+ if (center + width + margin >= document.body.clientWidth) return document.body.clientWidth - content.width - margin / 2;
107
+ if (center - width - margin <= 0) return margin / 2;
108
+ return center - width;
84
109
  }
85
- if (position.endsWith(POSITION_SUFFIX_START)) {
86
- const start = anchor.left;
87
- return start + content.width > window.innerWidth ? window.innerWidth - content.width : start;
110
+ if (position.startsWith("end")) return anchor.right;
111
+ if (position.startsWith("start")) return anchor.left - content.width;
112
+ if (position.endsWith("end")) return anchor.right - content.width - margin <= 0 ? margin / 2 : anchor.right - content.width;
113
+ if (position.endsWith("start")) {
114
+ if (anchor.left + content.width + margin >= document.body.clientWidth) return document.body.clientWidth - content.width - margin / 2;
115
+ return anchor.left - margin <= 0 ? margin / 2 : anchor.left;
88
116
  }
89
- if (position.startsWith(POSITION_END)) return anchor.right;
90
- if (position.startsWith(POSITION_START)) return anchor.left - content.width;
91
- if (position.startsWith(POSITION_HORIZONTAL)) {
92
- if (anchor.right + content.width <= window.innerWidth) return anchor.right;
93
- return anchor.left - content.width;
94
- }
95
- const left = anchor.left + (anchor.width - content.width) / 2;
96
- return left < 0 ? 0 : left;
117
+ if (!position.startsWith("horizontal")) return 0;
118
+ if (anchor.right + content.width + margin >= document.body.clientWidth) return anchor.left - content.width;
119
+ return anchor.right;
97
120
  }
98
- function getY(anchor, content, position, preferAbove) {
99
- if (position.startsWith(POSITION_ABOVE)) return anchor.top - content.height;
100
- if (position.startsWith(POSITION_BELOW)) return anchor.bottom;
101
- if (position.endsWith(POSITION_BOTTOM)) {
102
- const bottom = anchor.bottom - content.height;
103
- return bottom < 0 ? 0 : bottom;
104
- }
105
- if (position.endsWith(POSITION_TOP)) {
106
- const top = anchor.top;
107
- return top + content.height > window.innerHeight ? window.innerHeight - content.height : top;
121
+ function getY(anchor, content, position, margin, preferAbove) {
122
+ if (position === "end" || position === "start" || position === "horizontal") {
123
+ const center = anchor.top + anchor.height / 2;
124
+ const height = content.height / 2;
125
+ if (center + height + margin >= document.body.clientHeight) return document.body.clientHeight - content.height - margin / 2;
126
+ if (center - height - margin <= 0) return margin / 2;
127
+ return center - height;
108
128
  }
109
- if (position.startsWith(POSITION_VERTICAL)) {
110
- if (preferAbove && anchor.top - content.height >= 0) return anchor.top - content.height;
111
- if (anchor.bottom + content.height <= document.body.clientHeight) return anchor.bottom;
129
+ if (position.startsWith("above")) return anchor.top - content.height;
130
+ if (position.startsWith("below")) return anchor.bottom;
131
+ if (position.endsWith("bottom")) return anchor.bottom - content.height - margin <= 0 ? margin / 2 : anchor.bottom - content.height;
132
+ if (position.endsWith("top")) return anchor.top + content.height + margin >= document.body.clientHeight ? document.body.clientHeight - content.height - margin : anchor.top;
133
+ if (!position.startsWith("vertical")) return 0;
134
+ if (preferAbove) {
135
+ if (anchor.top - content.height - margin <= 0 && anchor.bottom + content.height + margin <= document.body.clientHeight) return anchor.bottom;
112
136
  return anchor.top - content.height;
113
137
  }
114
- return anchor.top + (anchor.height - content.height) / 2;
138
+ if (anchor.bottom + content.height + margin >= document.body.clientHeight) return anchor.top - content.height;
139
+ return anchor.bottom;
115
140
  }
116
141
  function initialize(floatable) {
117
142
  const { anchor, content, interactive } = floatable.options;
@@ -130,7 +155,7 @@ function isDisabled(element) {
130
155
  return element.disabled || element.readOnly || element.getAttribute("aria-disabled") === "true";
131
156
  }
132
157
  function onClick(event) {
133
- const related = findAncestor(event.target, SELECTOR_ALL);
158
+ const related = findAncestor(event, SELECTOR_ALL);
134
159
  if (!(related instanceof HTMLElement)) closeAll();
135
160
  else if (related.hasAttribute(ATTRIBUTE_CONTENT)) closeAbove(related);
136
161
  else if (!isDisabled(related)) toggle(related);
@@ -140,12 +165,17 @@ function onKeyDown(event) {
140
165
  const state = getState();
141
166
  if (state == null || state.active.size === 0) return;
142
167
  closeNonInteractive(state);
143
- const related = findAncestor(event.target, SELECTOR_CONTENT);
168
+ const related = findAncestor(event, SELECTOR_CONTENT);
144
169
  if (!(related instanceof HTMLElement)) return;
145
170
  closeAbove(related);
146
171
  const floatable = state.mapped.get(related);
147
172
  if (floatable != null) floatable.toggle(false);
148
173
  }
174
+ function setAttribute(position, anchor, floater, top, left) {
175
+ let actual;
176
+ if (/^(horizontal|vertical)/.test(position)) actual = getAttribute(position, anchor, top, left);
177
+ floater.setAttribute("position", actual ?? position);
178
+ }
149
179
  function stop(floatable) {
150
180
  if (floatable.frame != null) cancelAnimationFrame(floatable.frame);
151
181
  floatable.frame = void 0;
@@ -165,6 +195,7 @@ function toggle(anchor) {
165
195
  function updatePosition(floatable) {
166
196
  let position = floatable.options.anchor.getAttribute(floatable.options.positionAttribute)?.trim() ?? floatable.options.defaultPosition;
167
197
  if (!POSITIONS.has(position)) position = floatable.options.defaultPosition;
198
+ const margin = getMargin();
168
199
  let previousAnchor;
169
200
  let previousContent;
170
201
  let calculated = false;
@@ -185,8 +216,9 @@ function updatePosition(floatable) {
185
216
  function update(anchor, content) {
186
217
  previousAnchor = anchor;
187
218
  previousContent = content;
188
- const left = getX(anchor, content, position);
189
- const top = getY(anchor, content, position, floatable.options.preferAbove);
219
+ const left = getX(anchor, content, position, margin);
220
+ const top = getY(anchor, content, position, margin, floatable.options.preferAbove);
221
+ setAttribute(position, anchor, floatable.options.content, top, left);
190
222
  if (top + content.height > window.innerHeight) floatable.options.content.style.height = `${window.innerHeight - top}px`;
191
223
  else floatable.options.content.style.height = "";
192
224
  if (left + content.width > window.innerWidth) floatable.options.content.style.width = `${window.innerWidth - left}px`;
@@ -200,20 +232,10 @@ function updatePosition(floatable) {
200
232
  }
201
233
  floatable.frame = requestAnimationFrame(run);
202
234
  }
203
- var ATTRIBUTE_ANCHOR = "oui-floatable-anchor";
204
- var ATTRIBUTE_CONTENT = "oui-floatable-content";
205
- var INSERT_AFTEREND = "afterend";
206
- var POSITION_ABOVE = "above";
207
- var POSITION_BELOW = "below";
208
- var POSITION_BOTTOM = "bottom";
209
- var POSITION_END = "end";
210
- var POSITION_HORIZONTAL = "horizontal";
211
- var POSITION_START = "start";
212
- var POSITION_SUFFIX_END = "-end";
213
- var POSITION_SUFFIX_START = "-start";
214
- var POSITION_TOP = "top";
215
- var POSITION_VERTICAL = "vertical";
216
- var POSITIONS = new Set([
235
+ const ATTRIBUTE_ANCHOR = "oui-floatable-anchor";
236
+ const ATTRIBUTE_CONTENT = "oui-floatable-content";
237
+ const INSERT_AFTEREND = "afterend";
238
+ const POSITIONS = new Set([
217
239
  "above",
218
240
  "above-end",
219
241
  "above-start",
@@ -233,14 +255,14 @@ var POSITIONS = new Set([
233
255
  "vertical-end",
234
256
  "vertical-start"
235
257
  ]);
236
- var PROPERTIES = [
258
+ const PROPERTIES = [
237
259
  "bottom",
238
260
  "left",
239
261
  "right",
240
262
  "top"
241
263
  ];
242
- var SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT}]`;
243
- var SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
264
+ const SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT}]`;
265
+ const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
244
266
  if (window._oscarpalmer_oui_floatable == null) {
245
267
  Object.defineProperty(window, "_oscarpalmer_oui_floatable", {
246
268
  enumerable: false,
@@ -258,4 +280,5 @@ if (window._oscarpalmer_oui_floatable == null) {
258
280
  onClick(event);
259
281
  });
260
282
  }
283
+ //#endregion
261
284
  export { Floatable, deactivate };
@@ -0,0 +1,26 @@
1
+ //#region src/js/focus-trap/embedded.d.ts
2
+ declare class FocusTrap {
3
+ disabled: boolean;
4
+ connected: boolean;
5
+ element: HTMLElement;
6
+ embedded: boolean;
7
+ get contain(): boolean;
8
+ get noescape(): boolean;
9
+ constructor(element: HTMLElement, options?: Options);
10
+ connect(): void;
11
+ destroy(): void;
12
+ disable(): void;
13
+ disconnect(): void;
14
+ enable(): void;
15
+ focus(last: boolean): void;
16
+ }
17
+ type Options = {
18
+ noescape: boolean;
19
+ };
20
+ declare function createFocusTrap(element: HTMLElement, options?: Options): FocusTrap;
21
+ declare const FOCUS_TRAP_SELECTOR = "oui-focus-trap";
22
+ declare const FOCUS_TRAP_CONTAIN = "oui-focus-trap-contain";
23
+ declare const FOCUS_TRAP_NOESCAPE = "oui-focus-trap-noescape";
24
+ declare const FOCUSTRAPS_ALL: WeakMap<HTMLElement, FocusTrap>;
25
+ //#endregion
26
+ export { FOCUSTRAPS_ALL, FOCUS_TRAP_CONTAIN, FOCUS_TRAP_NOESCAPE, FOCUS_TRAP_SELECTOR, FocusTrap, createFocusTrap };
@@ -2,6 +2,7 @@ import { on } from "@oscarpalmer/toretto/event";
2
2
  import { findAncestor } from "@oscarpalmer/toretto/find";
3
3
  import { clamp } from "@oscarpalmer/atoms/number";
4
4
  import { getFocusable } from "@oscarpalmer/toretto/focusable";
5
+ //#region src/js/focus-trap/embedded.ts
5
6
  var FocusTrap = class {
6
7
  disabled = false;
7
8
  connected = true;
@@ -48,7 +49,7 @@ function createFocusTrap(element, options) {
48
49
  return focusTrap;
49
50
  }
50
51
  function onEscape(event) {
51
- let element = findAncestor(event.target, ATTRIBUTE_SELECTOR);
52
+ let element = findAncestor(event, ATTRIBUTE_SELECTOR);
52
53
  let focusTrap = FOCUSTRAPS_ALL.get(element);
53
54
  if (element == null || focusTrap == null) return;
54
55
  while (focusTrap.disabled) {
@@ -60,7 +61,7 @@ function onEscape(event) {
60
61
  focusTrap?.disable();
61
62
  }
62
63
  function onFocusIn(event) {
63
- lastTarget = FOCUSTRAPS_ALL.get(findAncestor(event.target, ATTRIBUTE_SELECTOR)) == null ? void 0 : event.target;
64
+ lastTarget = FOCUSTRAPS_ALL.get(findAncestor(event, ATTRIBUTE_SELECTOR)) == null ? void 0 : event.target;
64
65
  }
65
66
  function onKeydown(event) {
66
67
  switch (event.key) {
@@ -75,7 +76,7 @@ function onKeydown(event) {
75
76
  }
76
77
  function onPointerdown(event) {
77
78
  const lastFocusTrap = findAncestor(lastTarget, ATTRIBUTE_SELECTOR);
78
- const nextFocusTrap = findAncestor(event.target, ATTRIBUTE_SELECTOR);
79
+ const nextFocusTrap = findAncestor(event, ATTRIBUTE_SELECTOR);
79
80
  if (lastFocusTrap != null && nextFocusTrap !== lastFocusTrap) {
80
81
  if (FOCUSTRAPS_ALL.get(lastFocusTrap)?.contain ?? false) {
81
82
  event.preventDefault();
@@ -86,7 +87,7 @@ function onPointerdown(event) {
86
87
  for (const focusTrap of FOCUSTRAPS_DISABLED) if (focusTrap.element !== nextFocusTrap) focusTrap.enable();
87
88
  }
88
89
  function onTab(event) {
89
- const element = findAncestor(event.target, ATTRIBUTE_SELECTOR);
90
+ const element = findAncestor(event, ATTRIBUTE_SELECTOR);
90
91
  const focusTrap = FOCUSTRAPS_ALL.get(element);
91
92
  if (focusTrap == null) return;
92
93
  if (!focusTrap.disabled) event.preventDefault();
@@ -133,18 +134,19 @@ function tabToTrap(focusTrap, elements, element, index) {
133
134
  }
134
135
  }
135
136
  const FOCUS_TRAP_SELECTOR = "oui-focus-trap";
136
- var ATTRIBUTE_SELECTOR = `[${FOCUS_TRAP_SELECTOR}]`;
137
- var EVENT_OPTIONS = {
137
+ const ATTRIBUTE_SELECTOR = `[${FOCUS_TRAP_SELECTOR}]`;
138
+ const EVENT_OPTIONS = {
138
139
  capture: true,
139
140
  passive: false
140
141
  };
141
142
  const FOCUS_TRAP_CONTAIN = `${FOCUS_TRAP_SELECTOR}-contain`;
142
143
  const FOCUS_TRAP_NOESCAPE = `${FOCUS_TRAP_SELECTOR}-noescape`;
143
144
  const FOCUSTRAPS_ALL = /* @__PURE__ */ new WeakMap();
144
- var FOCUSTRAPS_DISABLED = /* @__PURE__ */ new Set();
145
- var lastTarget;
145
+ const FOCUSTRAPS_DISABLED = /* @__PURE__ */ new Set();
146
+ let lastTarget;
146
147
  on(document, "focusin", onFocusIn, EVENT_OPTIONS);
147
148
  on(document, "keydown", onKeydown, EVENT_OPTIONS);
148
149
  on(document, "mousedown", onPointerdown, EVENT_OPTIONS);
149
150
  on(document, "touchstart", onPointerdown, EVENT_OPTIONS);
151
+ //#endregion
150
152
  export { FOCUSTRAPS_ALL, FOCUS_TRAP_CONTAIN, FOCUS_TRAP_NOESCAPE, FOCUS_TRAP_SELECTOR, FocusTrap, createFocusTrap };
@@ -0,0 +1 @@
1
+ export { };
@@ -1,7 +1,10 @@
1
- import { attributable } from "../attributable.js";
2
- import { FOCUSTRAPS_ALL, FOCUS_TRAP_SELECTOR, createFocusTrap } from "./embedded.js";
1
+ import { attributable } from "../attributable.mjs";
2
+ import { FOCUSTRAPS_ALL, FOCUS_TRAP_SELECTOR, createFocusTrap } from "./embedded.mjs";
3
+ //#region src/js/focus-trap/standalone.ts
3
4
  function removeFocusTraps(element) {
4
5
  FOCUSTRAPS_ALL.get(element)?.destroy();
5
6
  FOCUSTRAPS_ALL.delete(element);
6
7
  }
7
8
  attributable(FOCUS_TRAP_SELECTOR, createFocusTrap, removeFocusTraps);
9
+ //#endregion
10
+ export {};
@@ -0,0 +1,4 @@
1
+ import { OuiPopoverElement } from "./popover.mjs";
2
+ import { OuiSplitterElement } from "./splitter.mjs";
3
+ import { setDelay } from "./tooltip.mjs";
4
+ export { OuiPopoverElement, OuiSplitterElement, setDelay };
@@ -0,0 +1,5 @@
1
+ import "./focus-trap/standalone.mjs";
2
+ import { OuiPopoverElement } from "./popover.mjs";
3
+ import { OuiSplitterElement } from "./splitter.mjs";
4
+ import { setDelay } from "./tooltip.mjs";
5
+ export { OuiPopoverElement, OuiSplitterElement, setDelay };
@@ -0,0 +1,20 @@
1
+ //#region src/js/popover.d.ts
2
+ declare global {
3
+ interface HTMLElementTagNameMap {
4
+ 'oui-popover': OuiPopoverElement;
5
+ }
6
+ }
7
+ declare class OuiPopoverElement extends HTMLElement {
8
+ #private;
9
+ constructor();
10
+ close(): void;
11
+ connectedCallback(): void;
12
+ disconnectedCallback(): void;
13
+ hidePopover(): void;
14
+ open(): void;
15
+ showPopover(): void;
16
+ toggle(): void;
17
+ togglePopover(options?: boolean): boolean;
18
+ }
19
+ //#endregion
20
+ export { OuiPopoverElement };
@@ -1,8 +1,9 @@
1
- import { Floatable } from "./floatable.js";
2
- import { createFocusTrap } from "./focus-trap/embedded.js";
3
- import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
1
+ import { Floatable } from "./floatable.mjs";
2
+ import { createFocusTrap } from "./focus-trap/embedded.mjs";
4
3
  import { getFocusable } from "@oscarpalmer/toretto/focusable";
5
- var index = 0;
4
+ import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
5
+ //#region src/js/popover.ts
6
+ let index = 0;
6
7
  var OuiPopoverElement = class extends HTMLElement {
7
8
  #floatable;
8
9
  #focusTrap;
@@ -78,10 +79,11 @@ function focus(content) {
78
79
  target.focus();
79
80
  });
80
81
  }
81
- var ATTRIBUTE_ID_PREFIX = "oui_popover_content_";
82
- var POPOVERS = /* @__PURE__ */ new Map();
83
- var SELECTOR = "oui-popover";
84
- var SELECTOR_CONTENT = `:scope > [${SELECTOR}-content]`;
85
- var SELECTOR_TOGGLE = `:scope > [${SELECTOR}-toggle]`;
82
+ const ATTRIBUTE_ID_PREFIX = "oui_popover_content_";
83
+ const POPOVERS = /* @__PURE__ */ new Map();
84
+ const SELECTOR = "oui-popover";
85
+ const SELECTOR_CONTENT = `:scope > [${SELECTOR}-content]`;
86
+ const SELECTOR_TOGGLE = `:scope > [${SELECTOR}-toggle]`;
86
87
  customElements.define(SELECTOR, OuiPopoverElement);
88
+ //#endregion
87
89
  export { OuiPopoverElement };
@@ -0,0 +1,25 @@
1
+ //#region src/js/splitter.d.ts
2
+ declare global {
3
+ interface HTMLElementTagNameMap {
4
+ [SELECTOR]: OuiSplitterElement;
5
+ }
6
+ }
7
+ declare class OuiSplitterElement extends HTMLElement {
8
+ #private;
9
+ static readonly observedAttributes: string[];
10
+ get max(): number;
11
+ set max(value: number);
12
+ get min(): number;
13
+ set min(value: number);
14
+ get size(): number;
15
+ set size(value: number);
16
+ get type(): string;
17
+ set type(value: string);
18
+ constructor();
19
+ connectedCallback(): void;
20
+ disconnectedCallback(): void;
21
+ attributeChangedCallback(name: string): void;
22
+ }
23
+ declare const SELECTOR = "oui-splitter";
24
+ //#endregion
25
+ export { OuiSplitterElement };
@@ -1,10 +1,11 @@
1
- import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
2
1
  import { getPosition, on } from "@oscarpalmer/toretto/event";
3
2
  import { findAncestor } from "@oscarpalmer/toretto/find";
4
- import { round } from "@oscarpalmer/atoms/math";
5
3
  import { clamp } from "@oscarpalmer/atoms/number";
4
+ import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
5
+ import { round } from "@oscarpalmer/atoms/math";
6
6
  import { toggleStyles } from "@oscarpalmer/toretto/style";
7
7
  import supportsTouch from "@oscarpalmer/toretto/touch";
8
+ //#region src/js/splitter.ts
8
9
  var OuiSplitterElement = class extends HTMLElement {
9
10
  static observedAttributes = [
10
11
  "max",
@@ -63,7 +64,7 @@ var OuiSplitterElement = class extends HTMLElement {
63
64
  }
64
65
  }
65
66
  };
66
- var index = 0;
67
+ let index = 0;
67
68
  var Splitter = class {
68
69
  element;
69
70
  handle;
@@ -114,11 +115,11 @@ function createHandle() {
114
115
  handle.setAttribute(ATTRIBUTE_HANDLE, "");
115
116
  return handle;
116
117
  }
117
- function createSeparator(splitter$1) {
118
+ function createSeparator(splitter) {
118
119
  const separator = document.createElement("div");
119
120
  separator.role = "separator";
120
121
  separator.tabIndex = 0;
121
- separator.setAttribute("aria-controls", splitter$1.element.id);
122
+ separator.setAttribute("aria-controls", splitter.element.id);
122
123
  separator.setAttribute("aria-label", "Resize panels");
123
124
  separator.setAttribute(ATTRIBUTE_SEPARATOR, "");
124
125
  return separator;
@@ -126,20 +127,20 @@ function createSeparator(splitter$1) {
126
127
  function getContained(min, value, max) {
127
128
  return round(clamp(value, min, max), VALUE_DECIMALS);
128
129
  }
129
- function getSize(splitter$1, value) {
130
- const { height, left, top, width } = splitter$1.rectangle;
131
- const fraction = (value - (splitter$1.types.horizontal ? top : left)) / (splitter$1.types.horizontal ? height : width);
132
- return getContained(splitter$1.values.min, fraction, splitter$1.values.max);
130
+ function getSize(splitter, value) {
131
+ const { height, left, top, width } = splitter.rectangle;
132
+ const fraction = (value - (splitter.types.horizontal ? top : left)) / (splitter.types.horizontal ? height : width);
133
+ return getContained(splitter.values.min, fraction, splitter.values.max);
133
134
  }
134
- function getTypes(splitter$1, width, height) {
135
- const type = splitter$1.element.getAttribute("type")?.trim() ?? "";
135
+ function getTypes(splitter, width, height) {
136
+ const type = splitter.element.getAttribute("type")?.trim() ?? "";
136
137
  if (type === "horizontal") return {
137
138
  auto: false,
138
139
  horizontal: true
139
140
  };
140
141
  if (type === "auto") return {
141
142
  auto: true,
142
- horizontal: (height ?? splitter$1.rectangle.height) > (width ?? splitter$1.rectangle.width)
143
+ horizontal: (height ?? splitter.rectangle.height) > (width ?? splitter.rectangle.width)
143
144
  };
144
145
  return {
145
146
  auto: false,
@@ -189,34 +190,34 @@ function onKeydown(event) {
189
190
  }
190
191
  }
191
192
  function onNavigate(event) {
192
- const splitter$1 = MAPPED_ELEMENTS.get(findAncestor(event.target, "[oui-splitter-separator]"));
193
- if (splitter$1 == null) return;
194
- const { types, values } = splitter$1;
193
+ const splitter = MAPPED_ELEMENTS.get(findAncestor(event, "[oui-splitter-separator]"));
194
+ if (splitter == null) return;
195
+ const { types, values } = splitter;
195
196
  if (KEYS_ABSOLUTE.has(event.key)) {
196
- setSize(splitter$1, event.key === "End" ? values.max : values.min, true);
197
+ setSize(splitter, event.key === "End" ? values.max : values.min, true);
197
198
  return;
198
199
  }
199
200
  if (types.horizontal && !KEYS_HORIZONTAL.has(event.key) || !(types.horizontal || KEYS_VERTICAL.has(event.key))) return;
200
201
  const offset = KEYS_NEGATIVE.has(event.key) ? -1 : 1;
201
- setSize(splitter$1, getContained(values.min, values.now.current + offset * NAVIGATION_MODIFIER, values.max), true);
202
+ setSize(splitter, getContained(values.min, values.now.current + offset * NAVIGATION_MODIFIER, values.max), true);
202
203
  }
203
204
  function onObservation(entries) {
204
205
  if (frame != null) cancelAnimationFrame(frame);
205
206
  frame = requestAnimationFrame(() => {
206
207
  for (const entry of entries) {
207
- const splitter$1 = MAPPED_ELEMENTS.get(entry.target);
208
- if (splitter$1 == null) return;
209
- splitter$1.types = getTypes(splitter$1, entry.contentRect.width, entry.contentRect.height);
210
- if (splitter$1.types.horizontal) splitter$1.element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
211
- else splitter$1.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
212
- setAriaOrientation(splitter$1);
208
+ const splitter = MAPPED_ELEMENTS.get(entry.target);
209
+ if (splitter == null) return;
210
+ splitter.types = getTypes(splitter, entry.contentRect.width, entry.contentRect.height);
211
+ if (splitter.types.horizontal) splitter.element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
212
+ else splitter.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
213
+ setAriaOrientation(splitter);
213
214
  }
214
215
  frame = void 0;
215
216
  });
216
217
  }
217
218
  function onPointerdown(event) {
218
219
  if (event.type === "mousedown" && supportsTouch.value || event.type === "touchstart" && !supportsTouch.value) return;
219
- splitter = MAPPED_ELEMENTS.get(findAncestor(event.target, SELECTOR_HANDLE));
220
+ splitter = MAPPED_ELEMENTS.get(findAncestor(event, SELECTOR_HANDLE));
220
221
  if (splitter == null) return;
221
222
  if (supportsTouch.value) event.preventDefault();
222
223
  splitter.handle.setAttribute(ATTRIBUTE_ACTIVE, "");
@@ -235,51 +236,51 @@ function onPointermove(event) {
235
236
  function onPointerup() {
236
237
  if (splitter != null) onEnd(false);
237
238
  }
238
- function setAriaOrientation(splitter$1) {
239
- splitter$1.separator.setAttribute("aria-orientation", splitter$1.types.horizontal ? "horizontal" : "vertical");
239
+ function setAriaOrientation(splitter) {
240
+ splitter.separator.setAttribute("aria-orientation", splitter.types.horizontal ? "horizontal" : "vertical");
240
241
  }
241
- function setAriaValue(splitter$1) {
242
- splitter$1.separator.setAttribute("aria-valuemax", String(splitter$1.values.max));
243
- splitter$1.separator.setAttribute("aria-valuemin", String(splitter$1.values.min));
244
- splitter$1.separator.setAttribute("aria-valuenow", String(splitter$1.values.now.current));
242
+ function setAriaValue(splitter) {
243
+ splitter.separator.setAttribute("aria-valuemax", String(splitter.values.max));
244
+ splitter.separator.setAttribute("aria-valuemin", String(splitter.values.min));
245
+ splitter.separator.setAttribute("aria-valuenow", String(splitter.values.now.current));
245
246
  }
246
- function setSize(splitter$1, size, previous) {
247
- splitter$1.values.now.current = size;
248
- if (previous) splitter$1.values.now.previous = size;
249
- splitter$1.element.style.setProperty("--oui-splitter-size", `${size}`);
250
- setAriaValue(splitter$1);
247
+ function setSize(splitter, size, previous) {
248
+ splitter.values.now.current = size;
249
+ if (previous) splitter.values.now.previous = size;
250
+ splitter.element.style.setProperty("--oui-splitter-size", `${size}`);
251
+ setAriaValue(splitter);
251
252
  }
252
- var SELECTOR = "oui-splitter";
253
- var ATTRIBUTE_ACTIVE = `${SELECTOR}-active`;
254
- var ATTRIBUTE_HANDLE = `${SELECTOR}-handle`;
255
- var ATTRIBUTE_HORIZONTAL = `${SELECTOR}-horizontal`;
256
- var ATTRIBUTE_SEPARATOR = `${SELECTOR}-separator`;
257
- var KEYS_ABSOLUTE = new Set(["End", "Home"]);
258
- var KEYS_HORIZONTAL = new Set(["ArrowDown", "ArrowUp"]);
259
- var KEYS_NEGATIVE = new Set(["ArrowLeft", "ArrowUp"]);
260
- var KEYS_VERTICAL = new Set(["ArrowLeft", "ArrowRight"]);
261
- var KEYS_ALL = new Set([
253
+ const SELECTOR = "oui-splitter";
254
+ const ATTRIBUTE_ACTIVE = `${SELECTOR}-active`;
255
+ const ATTRIBUTE_HANDLE = `${SELECTOR}-handle`;
256
+ const ATTRIBUTE_HORIZONTAL = `${SELECTOR}-horizontal`;
257
+ const ATTRIBUTE_SEPARATOR = `${SELECTOR}-separator`;
258
+ const KEYS_ABSOLUTE = new Set(["End", "Home"]);
259
+ const KEYS_HORIZONTAL = new Set(["ArrowDown", "ArrowUp"]);
260
+ const KEYS_NEGATIVE = new Set(["ArrowLeft", "ArrowUp"]);
261
+ const KEYS_VERTICAL = new Set(["ArrowLeft", "ArrowRight"]);
262
+ const KEYS_ALL = new Set([
262
263
  ...KEYS_ABSOLUTE,
263
264
  ...KEYS_HORIZONTAL,
264
265
  ...KEYS_VERTICAL
265
266
  ]);
266
- var MAPPED_ELEMENTS = /* @__PURE__ */ new WeakMap();
267
- var METHODS_CONNECT = ["delete", "set"];
268
- var METHODS_OBSERVE = ["unobserve", "observe"];
269
- var NAVIGATION_MAXIMUM_PERCENTAGE = .9;
270
- var NAVIGATION_MAXIMUM_TOTAL = 100;
271
- var NAVIGATION_MINIMUM_PERCENTAGE = .1;
272
- var NAVIGATION_MODIFIER = .05;
273
- var RESIZE_OBSERVER = new ResizeObserver(onObservation);
274
- var SELECTOR_HANDLE = `[${ATTRIBUTE_HANDLE}]`;
275
- var STYLING_TOGGLER = toggleStyles(document.body, {
267
+ const MAPPED_ELEMENTS = /* @__PURE__ */ new WeakMap();
268
+ const METHODS_CONNECT = ["delete", "set"];
269
+ const METHODS_OBSERVE = ["unobserve", "observe"];
270
+ const NAVIGATION_MAXIMUM_PERCENTAGE = .9;
271
+ const NAVIGATION_MAXIMUM_TOTAL = 100;
272
+ const NAVIGATION_MINIMUM_PERCENTAGE = .1;
273
+ const NAVIGATION_MODIFIER = .05;
274
+ const RESIZE_OBSERVER = new ResizeObserver(onObservation);
275
+ const SELECTOR_HANDLE = `[${ATTRIBUTE_HANDLE}]`;
276
+ const STYLING_TOGGLER = toggleStyles(document.body, {
276
277
  touchAction: "none",
277
278
  userSelect: "none",
278
279
  webkitUserSelect: "none"
279
280
  });
280
- var VALUE_DECIMALS = 6;
281
- var frame;
282
- var splitter;
281
+ const VALUE_DECIMALS = 6;
282
+ let frame;
283
+ let splitter;
283
284
  customElements.define(SELECTOR, OuiSplitterElement);
284
285
  on(document, "keydown", onKeydown);
285
286
  on(document, "mousedown", onPointerdown);
@@ -287,4 +288,5 @@ on(document, "pointermove", onPointermove);
287
288
  on(document, "pointerup", onPointerup);
288
289
  on(document, "touchcancel", onPointerup, { passive: false });
289
290
  on(document, "touchstart", onPointerdown, { passive: false });
291
+ //#endregion
290
292
  export { OuiSplitterElement };
@@ -0,0 +1,4 @@
1
+ //#region src/js/tooltip.d.ts
2
+ declare function setDelay(value: number): void;
3
+ //#endregion
4
+ export { setDelay };