@oscarpalmer/oui 0.17.0 → 0.19.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 (72) hide show
  1. package/dist/css/badge.css +13 -13
  2. package/dist/css/button.css +9 -9
  3. package/dist/css/color.css +99 -99
  4. package/dist/css/content.css +10 -12
  5. package/dist/css/flex.css +39 -39
  6. package/dist/css/form.css +47 -60
  7. package/dist/css/message.css +10 -6
  8. package/dist/css/reset.css +178 -57
  9. package/dist/css/table.css +4 -4
  10. package/dist/css/tooltip.css +26 -1
  11. package/dist/js/attributable.full.js +36 -0
  12. package/dist/js/attributable.js +30 -45
  13. package/dist/js/floatable.full.js +398 -0
  14. package/dist/js/floatable.js +254 -169
  15. package/dist/js/focus-trap/embedded.full.js +408 -0
  16. package/dist/js/focus-trap/embedded.js +131 -131
  17. package/dist/js/focus-trap/standalone.full.js +447 -0
  18. package/dist/js/focus-trap/standalone.js +4 -4
  19. package/dist/js/index.js +3 -4
  20. package/dist/js/oui.full.js +1573 -0
  21. package/dist/js/popover.full.js +760 -0
  22. package/dist/js/popover.js +84 -163
  23. package/dist/js/splitter.full.js +769 -0
  24. package/dist/js/splitter.js +264 -246
  25. package/dist/js/tooltip.full.js +613 -0
  26. package/dist/js/tooltip.js +160 -151
  27. package/package.json +35 -63
  28. package/src/css/a11y.scss +1 -1
  29. package/src/css/badge.scss +23 -19
  30. package/src/css/button.scss +9 -9
  31. package/src/css/color.scss +99 -99
  32. package/src/css/content.scss +6 -9
  33. package/src/css/flex.scss +21 -20
  34. package/src/css/form.scss +47 -62
  35. package/src/css/message.scss +11 -12
  36. package/src/css/mixins.scss +16 -10
  37. package/src/css/popover.scss +2 -2
  38. package/src/css/reset.scss +181 -55
  39. package/src/css/splitter.scss +15 -13
  40. package/src/css/table.scss +11 -11
  41. package/src/css/tooltip.scss +31 -2
  42. package/src/js/attributable.ts +3 -10
  43. package/src/js/floatable.ts +370 -141
  44. package/src/js/focus-trap/embedded.ts +141 -74
  45. package/src/js/focus-trap/standalone.ts +4 -4
  46. package/src/js/index.ts +1 -0
  47. package/src/js/popover.ts +52 -122
  48. package/src/js/splitter.ts +248 -131
  49. package/src/js/tooltip.ts +143 -68
  50. package/types/floatable.d.ts +17 -10
  51. package/types/focus-trap/embedded.d.ts +18 -5
  52. package/types/index.d.ts +1 -0
  53. package/types/popover.d.ts +2 -0
  54. package/types/splitter.d.ts +13 -1
  55. package/types/tooltip.d.ts +2 -1
  56. package/dist/css/value.css +0 -1
  57. package/dist/js/attributable.cjs +0 -51
  58. package/dist/js/floatable.cjs +0 -176
  59. package/dist/js/focus-trap/embedded.cjs +0 -150
  60. package/dist/js/focus-trap/standalone.cjs +0 -8
  61. package/dist/js/index.cjs +0 -6
  62. package/dist/js/popover.cjs +0 -166
  63. package/dist/js/splitter.cjs +0 -272
  64. package/dist/js/tooltip.cjs +0 -166
  65. package/types/attributable.d.cts +0 -5
  66. package/types/floatable.d.cts +0 -20
  67. package/types/focus-trap/embedded.d.cts +0 -15
  68. package/types/focus-trap/standalone.d.cts +0 -3
  69. package/types/index.d.cts +0 -14
  70. package/types/popover.d.cts +0 -14
  71. package/types/splitter.d.cts +0 -10
  72. package/types/tooltip.d.cts +0 -3
@@ -1,166 +0,0 @@
1
- "use strict";
2
- const is = require("@oscarpalmer/atoms/is");
3
- const event = require("@oscarpalmer/toretto/event");
4
- const attributable = require("./attributable.cjs");
5
- const floatable = require("./floatable.cjs");
6
- class Tooltip {
7
- abortController = new AbortController();
8
- attributes;
9
- floatable;
10
- constructor(anchor, content) {
11
- this.attributes = content.attributes;
12
- this.floatable = new floatable.Floatable(
13
- anchor,
14
- content.element,
15
- `${selector}-position`,
16
- "vertical",
17
- true
18
- );
19
- initialize(this);
20
- }
21
- destroy() {
22
- floatable.deactivate(this.floatable, active);
23
- reset(this.floatable.anchor, this.attributes);
24
- this.abortController.abort();
25
- this.floatable.content.remove();
26
- this.floatable.destroy();
27
- this.abortController = void 0;
28
- this.attributes = void 0;
29
- this.floatable = void 0;
30
- }
31
- }
32
- function addTooltip(anchor) {
33
- if (tooltips.has(anchor)) {
34
- return;
35
- }
36
- const content = getContent(anchor);
37
- if (content != null) {
38
- tooltips.set(anchor, new Tooltip(anchor, content));
39
- }
40
- }
41
- function getContent(anchor) {
42
- const attributes = {
43
- ariaDescribedby: anchor.getAttribute("aria-describedby"),
44
- ariaLabelledBy: anchor.getAttribute("aria-labelledby")
45
- };
46
- const wrapper = getWrapper(anchor);
47
- const labelledElements = getElements(attributes.ariaLabelledBy);
48
- if (labelledElements.length > 0) {
49
- anchor.setAttribute("aria-labelledby", wrapper.id);
50
- for (const element of labelledElements) {
51
- wrapper.append(element);
52
- }
53
- return {
54
- attributes,
55
- element: wrapper
56
- };
57
- }
58
- const describedElements = getElements(attributes.ariaDescribedby);
59
- if (describedElements.length > 0) {
60
- anchor.setAttribute("aria-describedby", wrapper.id);
61
- for (const element of describedElements) {
62
- wrapper.append(element);
63
- }
64
- return {
65
- attributes,
66
- element: wrapper
67
- };
68
- }
69
- let content = anchor.getAttribute("aria-label");
70
- if (is.isNullableOrWhitespace(content)) {
71
- content = anchor.getAttribute("aria-description");
72
- }
73
- if (is.isNullableOrWhitespace(content)) {
74
- return;
75
- }
76
- const paragraph = document.createElement("p");
77
- paragraph.textContent = content;
78
- wrapper.append(paragraph);
79
- return {
80
- attributes,
81
- element: wrapper
82
- };
83
- }
84
- function getElements(attribute) {
85
- const ids = attribute?.split(/\s+/) ?? [];
86
- const elements = [];
87
- for (const id of ids) {
88
- if (is.isNullableOrWhitespace(id)) {
89
- continue;
90
- }
91
- const element = document.querySelector(`#${id}`);
92
- if (element instanceof HTMLElement) {
93
- const cloned = element.cloneNode(true);
94
- cloned.hidden = false;
95
- elements.push(cloned);
96
- }
97
- }
98
- return elements;
99
- }
100
- function getWrapper(anchor) {
101
- const wrapper = document.createElement("div");
102
- wrapper.setAttribute(`${selector}-content`, "");
103
- wrapper.className = anchor.getAttribute(`${selector}-class`) ?? "";
104
- wrapper.hidden = true;
105
- wrapper.id = `${selector}-${++index}`;
106
- wrapper.role = "tooltip";
107
- wrapper.tabIndex = -1;
108
- return wrapper;
109
- }
110
- function initialize(tooltip) {
111
- const { abortController, floatable: floatable$1 } = tooltip;
112
- const { anchor, content } = floatable$1;
113
- anchor.insertAdjacentElement("afterend", content);
114
- const elements = [anchor, content];
115
- for (const element of elements) {
116
- for (const event$1 of activateEvents) {
117
- event.on(
118
- element,
119
- event$1,
120
- () => {
121
- floatable.activate(floatable$1, active, void 0, 250);
122
- },
123
- {
124
- signal: abortController.signal
125
- }
126
- );
127
- }
128
- for (const event$1 of deactivateEvents) {
129
- event.on(
130
- element,
131
- event$1,
132
- () => {
133
- floatable.deactivate(floatable$1, active, void 0, 250);
134
- },
135
- {
136
- signal: abortController.signal
137
- }
138
- );
139
- }
140
- }
141
- }
142
- function removeTooltip(element) {
143
- tooltips.get(element)?.destroy();
144
- tooltips.delete(element);
145
- }
146
- function reset(anchor, attributes) {
147
- if (attributes.ariaDescribedby == null) {
148
- anchor.removeAttribute("aria-describedby");
149
- } else {
150
- anchor.setAttribute("aria-describedby", attributes.ariaDescribedby);
151
- }
152
- }
153
- const active = /* @__PURE__ */ new Set();
154
- const activateEvents = ["focus", "mouseenter", "touchstart"];
155
- const deactivateEvents = ["blur", "mouseleave"];
156
- const selector = "oui-tooltip";
157
- const tooltips = /* @__PURE__ */ new WeakMap();
158
- let index = 0;
159
- attributable.attributable(selector, addTooltip, removeTooltip);
160
- event.on(document, "keydown", (event2) => {
161
- if (event2.key === "Escape") {
162
- for (const floatable$1 of active) {
163
- floatable.deactivate(floatable$1, active);
164
- }
165
- }
166
- });
@@ -1,5 +0,0 @@
1
- // Generated by dts-bundle-generator v9.5.1
2
-
3
- export declare function attributable(attribute: string, add: (element: HTMLElement) => void, remove: (element: HTMLElement) => void): void;
4
-
5
- export {};
@@ -1,20 +0,0 @@
1
- // Generated by dts-bundle-generator v9.5.1
2
-
3
- export declare class Floatable {
4
- anchor: HTMLElement;
5
- content: HTMLElement;
6
- readonly attribute: string;
7
- readonly position: Position;
8
- readonly preferAbove: boolean;
9
- activate: number | undefined;
10
- active: boolean;
11
- deactivate: number | undefined;
12
- frame: DOMHighResTimeStamp | undefined;
13
- constructor(anchor: HTMLElement, content: HTMLElement, attribute: string, position: Position, preferAbove: boolean);
14
- destroy(): void;
15
- }
16
- export 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";
17
- export declare function activate(floatable: Floatable, active: Set<Floatable>, order?: Floatable[], time?: number): void;
18
- export declare function deactivate(floatable: Floatable, active: Set<Floatable>, order?: Floatable[], time?: number): void;
19
-
20
- export {};
@@ -1,15 +0,0 @@
1
- // Generated by dts-bundle-generator v9.5.1
2
-
3
- export declare class FocusTrap {
4
- element: HTMLElement;
5
- active: boolean;
6
- constructor(element: HTMLElement);
7
- destroy(): void;
8
- disable(): void;
9
- enable(): void;
10
- }
11
- export declare function createFocusTrap(element: HTMLElement): FocusTrap;
12
- export declare const focusTraps: WeakMap<HTMLElement, FocusTrap>;
13
- export declare const selector = "oui-focus-trap";
14
-
15
- export {};
@@ -1,3 +0,0 @@
1
- // Generated by dts-bundle-generator v9.5.1
2
-
3
- export {};
package/types/index.d.cts DELETED
@@ -1,14 +0,0 @@
1
- // Generated by dts-bundle-generator v9.5.1
2
-
3
- export declare class OuiPopoverElement extends HTMLElement {
4
- #private;
5
- constructor();
6
- close(): void;
7
- hidePopover(): void;
8
- open(): void;
9
- showPopover(): void;
10
- toggle(): void;
11
- togglePopover(options?: boolean): boolean;
12
- }
13
-
14
- export {};
@@ -1,14 +0,0 @@
1
- // Generated by dts-bundle-generator v9.5.1
2
-
3
- export declare class OuiPopoverElement extends HTMLElement {
4
- #private;
5
- constructor();
6
- close(): void;
7
- hidePopover(): void;
8
- open(): void;
9
- showPopover(): void;
10
- toggle(): void;
11
- togglePopover(options?: boolean): boolean;
12
- }
13
-
14
- export {};
@@ -1,10 +0,0 @@
1
- // Generated by dts-bundle-generator v9.5.1
2
-
3
- export declare class OuiSplitterElement extends HTMLElement {
4
- #private;
5
- constructor();
6
- connectedCallback(): void;
7
- disconnectedCallback(): void;
8
- }
9
-
10
- export {};
@@ -1,3 +0,0 @@
1
- // Generated by dts-bundle-generator v9.5.1
2
-
3
- export {};