@oscarpalmer/oui 0.39.0 → 0.41.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/README.md +1 -1
- package/dist/css/color-picker.css +80 -69
- package/dist/css/listbox.css +169 -0
- package/dist/js/color-picker/color-picker.constants.d.mts +2 -0
- package/dist/js/color-picker/{constants.color-picker.mjs → color-picker.constants.mjs} +7 -4
- package/dist/js/color-picker/{dom.color-picker.d.mts → color-picker.dom.d.mts} +2 -2
- package/dist/js/color-picker/{dom.color-picker.mjs → color-picker.dom.mjs} +33 -16
- package/dist/js/color-picker/{event.color-picker.d.mts → color-picker.event.d.mts} +3 -3
- package/dist/js/color-picker/color-picker.event.mjs +233 -0
- package/dist/js/color-picker/{form.color-picker.d.mts → color-picker.form.d.mts} +2 -2
- package/dist/js/color-picker/{form.color-picker.mjs → color-picker.form.mjs} +9 -8
- package/dist/js/color-picker/color-picker.misc.d.mts +2 -0
- package/dist/js/color-picker/color-picker.misc.mjs +104 -0
- package/dist/js/color-picker/color-picker.model.d.mts +2 -0
- package/dist/js/color-picker/{models.color-picker.mjs → color-picker.model.mjs} +1 -1
- package/dist/js/color-picker/{output.color-picker.d.mts → color-picker.output.d.mts} +2 -2
- package/dist/js/color-picker/{output.color-picker.mjs → color-picker.output.mjs} +19 -18
- package/dist/js/color-picker/color-picker.state.d.mts +8 -0
- package/dist/js/color-picker/color-picker.state.mjs +168 -0
- package/dist/js/color-picker/index.d.mts +172 -2
- package/dist/js/color-picker/index.mjs +66 -59
- package/dist/js/color-picker.constants-BZgXQr5o.d.mts +177 -0
- package/dist/js/color-picker.misc-BIS3R6jk.d.mts +31 -0
- package/dist/js/combobox/combobox.constants.d.mts +2 -0
- package/dist/js/combobox/{constants.combobox.mjs → combobox.constants.mjs} +21 -21
- package/dist/js/combobox/combobox.dom.d.mts +25 -0
- package/dist/js/combobox/{dom.combobox.mjs → combobox.dom.mjs} +51 -49
- package/dist/js/combobox/{event.combobox.d.mts → combobox.event.d.mts} +9 -9
- package/dist/js/combobox/{event.combobox.mjs → combobox.event.mjs} +1 -1
- package/dist/js/combobox/combobox.misc.d.mts +2 -0
- package/dist/js/combobox/combobox.misc.mjs +2 -0
- package/dist/js/combobox/combobox.model.d.mts +2 -0
- package/dist/js/combobox/combobox.state.d.mts +9 -0
- package/dist/js/combobox/combobox.state.mjs +2 -0
- package/dist/js/combobox/index.d.mts +152 -2
- package/dist/js/combobox/index.mjs +54 -55
- package/dist/js/combobox.constants-Hb3bqqQJ.d.mts +19 -0
- package/dist/js/combobox.misc-DRDFk6X8.d.mts +26 -0
- package/dist/js/combobox.model-gjEI2VqZ.d.mts +46 -0
- package/dist/js/{state.combobox-BWDFHwoi.mjs → combobox.state-AstCICiH.mjs} +109 -106
- package/dist/js/dialog/dialog.model.d.mts +2 -0
- package/dist/js/dialog/dialog.model.mjs +11 -0
- package/dist/js/dialog/index.d.mts +12 -0
- package/dist/js/dialog/index.mjs +123 -0
- package/dist/js/dialog.model-HVzYWoDo.d.mts +45 -0
- package/dist/js/floatable/floatable.embedded.d.mts +2 -2
- package/dist/js/floatable/floatable.embedded.mjs +64 -92
- package/dist/js/floatable/floatable.model.d.mts +2 -0
- package/dist/js/floatable/floatable.model.mjs +23 -0
- package/dist/js/floatable/floatable.standalone.d.mts +2 -1
- package/dist/js/floatable.embedded-ncshL3Sa.d.mts +17 -0
- package/dist/js/{floatable.embedded-DQYkXt8X.d.mts → floatable.model-DXsQgoU7.d.mts} +13 -20
- package/dist/js/focus-trap/focus-trap.embedded.d.mts +2 -2
- package/dist/js/focus-trap/focus-trap.embedded.mjs +117 -138
- package/dist/js/focus-trap/focus-trap.model.d.mts +2 -0
- package/dist/js/focus-trap/focus-trap.model.mjs +15 -0
- package/dist/js/focus-trap/focus-trap.standalone.d.mts +2 -1
- package/dist/js/focus-trap.embedded-DpcPkP7c.d.mts +13 -0
- package/dist/js/{focus-trap.embedded-CjyFQYow.d.mts → focus-trap.model-CpltX5B5.d.mts} +16 -18
- package/dist/js/index.d.mts +26 -14
- package/dist/js/index.mjs +18 -17
- package/dist/js/internal/attributable.d.mts +1 -1
- package/dist/js/internal/attributable.mjs +3 -2
- package/dist/js/internal/draggable/draggable.model.d.mts +2 -0
- package/dist/js/internal/draggable/draggable.model.mjs +37 -0
- package/dist/js/internal/draggable/index.d.mts +13 -0
- package/dist/js/internal/draggable/index.mjs +243 -0
- package/dist/js/internal/l10n/index.d.mts +5 -0
- package/dist/js/internal/l10n/index.mjs +147 -0
- package/dist/js/internal/l10n/l10n.model.d.mts +2 -0
- package/dist/js/internal/l10n/l10n.model.mjs +12 -0
- package/dist/js/internal/misc.d.mts +3 -2
- package/dist/js/internal/misc.mjs +4 -6
- package/dist/js/internal/navigable/index.d.mts +6 -0
- package/dist/js/internal/navigable/index.mjs +125 -0
- package/dist/js/internal/navigable/navigable.model.d.mts +2 -0
- package/dist/js/internal/navigable/navigable.model.mjs +18 -0
- package/dist/js/internal/option-list/option-list.constants.d.mts +8 -0
- package/dist/js/internal/option-list/option-list.constants.mjs +22 -0
- package/dist/js/internal/option-list/option-list.data.d.mts +21 -0
- package/dist/js/internal/option-list/option-list.data.mjs +2 -0
- package/dist/js/internal/option-list/option-list.dom.d.mts +18 -0
- package/dist/js/internal/option-list/option-list.dom.mjs +2 -0
- package/dist/js/internal/option-list/option-list.event.d.mts +6 -0
- package/dist/js/internal/option-list/option-list.event.mjs +66 -0
- package/dist/js/internal/option-list/option-list.form.d.mts +7 -0
- package/dist/js/internal/option-list/option-list.form.mjs +53 -0
- package/dist/js/internal/option-list/option-list.misc.d.mts +13 -0
- package/dist/js/internal/option-list/option-list.misc.mjs +2 -0
- package/dist/js/internal/option-list/option-list.model.d.mts +2 -0
- package/dist/js/internal/option-list/option-list.state.d.mts +8 -0
- package/dist/js/internal/option-list/option-list.state.mjs +39 -0
- package/dist/js/l10n/index.d.mts +3 -0
- package/dist/js/l10n/index.mjs +2 -0
- package/dist/js/l10n.model-D1E1u35L.d.mts +54 -0
- package/dist/js/listbox/index.d.mts +9 -18
- package/dist/js/listbox/index.mjs +49 -52
- package/dist/js/listbox/listbox.constants.d.mts +2 -0
- package/dist/js/listbox/{constants.listbox.mjs → listbox.constants.mjs} +11 -15
- package/dist/js/listbox/listbox.dom.d.mts +5 -0
- package/dist/js/listbox/listbox.dom.mjs +2 -0
- package/dist/js/listbox/listbox.event.d.mts +9 -0
- package/dist/js/listbox/listbox.event.mjs +2 -0
- package/dist/js/listbox/listbox.misc.d.mts +2 -0
- package/dist/js/listbox/listbox.misc.mjs +2 -0
- package/dist/js/listbox/listbox.model.d.mts +2 -0
- package/dist/js/listbox/listbox.model.mjs +1 -0
- package/dist/js/listbox/listbox.state.d.mts +9 -0
- package/dist/js/listbox/listbox.state.mjs +2 -0
- package/dist/js/listbox.constants-DOBMwKup.d.mts +9 -0
- package/dist/js/listbox.misc-DwfB4Mu_.d.mts +24 -0
- package/dist/js/listbox.model-C0MYWXZe.d.mts +20 -0
- package/dist/js/listbox.state-BrN296BM.mjs +240 -0
- package/dist/js/menu/index.mjs +171 -0
- package/dist/js/menu/menu.model.d.mts +33 -0
- package/dist/js/menu/menu.model.mjs +15 -0
- package/dist/js/movable/movable.embedded.d.mts +2 -2
- package/dist/js/movable/movable.embedded.mjs +77 -86
- package/dist/js/movable/movable.model.d.mts +2 -0
- package/dist/js/movable/movable.model.mjs +12 -0
- package/dist/js/movable/movable.standalone.d.mts +2 -1
- package/dist/js/movable.embedded-C1bDTLGs.d.mts +11 -0
- package/dist/js/movable.model-D9nnPWKk.d.mts +186 -0
- package/dist/js/navigable.model-BqoR6iBv.d.mts +44 -0
- package/dist/js/option-list.data-CgMyUwPc.mjs +441 -0
- package/dist/js/option-list.model-CCPUlPeX.d.mts +169 -0
- package/dist/js/popover/index.d.mts +12 -0
- package/dist/js/{popover.mjs → popover/index.mjs} +41 -51
- package/dist/js/popover/popover.model.d.mts +2 -0
- package/dist/js/popover/popover.model.mjs +12 -0
- package/dist/js/popover.model-DiLdz0Hc.d.mts +38 -0
- package/dist/js/resizable/resizable.embedded.d.mts +2 -2
- package/dist/js/resizable/resizable.embedded.mjs +43 -58
- package/dist/js/resizable/resizable.model.d.mts +2 -0
- package/dist/js/resizable/resizable.model.mjs +21 -0
- package/dist/js/resizable/resizable.standalone.d.mts +2 -1
- package/dist/js/resizable.embedded-BemH-7Re.d.mts +11 -0
- package/dist/js/resizable.model-YEtcC9li.d.mts +46 -0
- package/dist/js/sortable/sortable.embedded.d.mts +2 -2
- package/dist/js/sortable/sortable.embedded.mjs +111 -116
- package/dist/js/sortable/sortable.model.d.mts +2 -0
- package/dist/js/sortable/sortable.model.mjs +24 -0
- package/dist/js/sortable/sortable.standalone.d.mts +2 -1
- package/dist/js/sortable.embedded-CrEGff9k.d.mts +11 -0
- package/dist/js/{splitter.d.mts → splitter/index.d.mts} +6 -4
- package/dist/js/{splitter.mjs → splitter/index.mjs} +90 -128
- package/dist/js/splitter/splitter.model.d.mts +2 -0
- package/dist/js/splitter/splitter.model.mjs +37 -0
- package/dist/js/splitter.model-C24W6eZ7.d.mts +57 -0
- package/dist/js/{tabs.d.mts → tabs/index.d.mts} +8 -8
- package/dist/js/{tabs.mjs → tabs/index.mjs} +58 -58
- package/dist/js/tabs/tabs.model.d.mts +2 -0
- package/dist/js/tabs/tabs.model.mjs +18 -0
- package/dist/js/tabs.model-BHPy7fPo.d.mts +40 -0
- package/dist/js/toolbar/index.mjs +27 -0
- package/dist/js/toolbar/toolbar.model.d.mts +11 -0
- package/dist/js/toolbar/toolbar.model.mjs +7 -0
- package/dist/js/tooltip/index.d.mts +19 -0
- package/dist/js/{tooltip.mjs → tooltip/index.mjs} +61 -86
- package/dist/js/tooltip/tooltip.model.d.mts +2 -0
- package/dist/js/tooltip/tooltip.model.mjs +15 -0
- package/dist/js/tooltip.model-BpNStw5z.d.mts +37 -0
- package/package.json +30 -24
- package/dist/js/color-picker/constants.color-picker.d.mts +0 -2
- package/dist/js/color-picker/event.color-picker.mjs +0 -2
- package/dist/js/color-picker/misc.color-picker.d.mts +0 -2
- package/dist/js/color-picker/misc.color-picker.mjs +0 -2
- package/dist/js/color-picker/models.color-picker.d.mts +0 -2
- package/dist/js/color-picker/state.color-picker.d.mts +0 -8
- package/dist/js/color-picker/state.color-picker.mjs +0 -2
- package/dist/js/combobox/constants.combobox.d.mts +0 -2
- package/dist/js/combobox/dom.combobox.d.mts +0 -26
- package/dist/js/combobox/misc.combobox.d.mts +0 -2
- package/dist/js/combobox/misc.combobox.mjs +0 -2
- package/dist/js/combobox/models.combobox.d.mts +0 -43
- package/dist/js/combobox/state.combobox.d.mts +0 -11
- package/dist/js/combobox/state.combobox.mjs +0 -2
- package/dist/js/constants.color-picker-B-gFjL8m.d.mts +0 -364
- package/dist/js/constants.combobox-8EMRmv09.d.mts +0 -18
- package/dist/js/constants.listbox-DGnX32kv.d.mts +0 -8
- package/dist/js/dialog.d.mts +0 -47
- package/dist/js/dialog.mjs +0 -131
- package/dist/js/draggable-B5-70SZm.d.mts +0 -155
- package/dist/js/event.color-picker-BEpq0Adu.mjs +0 -485
- package/dist/js/index-C5D3-oiI.d.mts +0 -177
- package/dist/js/internal/draggable.d.mts +0 -2
- package/dist/js/internal/draggable.mjs +0 -265
- package/dist/js/internal/listbox/listbox.constants.d.mts +0 -8
- package/dist/js/internal/listbox/listbox.constants.mjs +0 -22
- package/dist/js/internal/listbox/listbox.data.d.mts +0 -19
- package/dist/js/internal/listbox/listbox.data.mjs +0 -2
- package/dist/js/internal/listbox/listbox.dom.d.mts +0 -65
- package/dist/js/internal/listbox/listbox.dom.mjs +0 -2
- package/dist/js/internal/listbox/listbox.event.d.mts +0 -4
- package/dist/js/internal/listbox/listbox.event.mjs +0 -63
- package/dist/js/internal/listbox/listbox.form.d.mts +0 -5
- package/dist/js/internal/listbox/listbox.form.mjs +0 -53
- package/dist/js/internal/listbox/listbox.misc.d.mts +0 -11
- package/dist/js/internal/listbox/listbox.misc.mjs +0 -2
- package/dist/js/internal/listbox/listbox.model.d.mts +0 -2
- package/dist/js/internal/listbox/listbox.state.d.mts +0 -6
- package/dist/js/internal/listbox/listbox.state.mjs +0 -40
- package/dist/js/internal/navigable.d.mts +0 -36
- package/dist/js/internal/navigable.mjs +0 -135
- package/dist/js/l10n-Bn-7RcwR.d.mts +0 -20
- package/dist/js/l10n.d.mts +0 -2
- package/dist/js/l10n.mjs +0 -80
- package/dist/js/listbox/constants.listbox.d.mts +0 -2
- package/dist/js/listbox/event.listbox.d.mts +0 -7
- package/dist/js/listbox/event.listbox.mjs +0 -2
- package/dist/js/listbox/misc.listbox.d.mts +0 -2
- package/dist/js/listbox/misc.listbox.mjs +0 -2
- package/dist/js/listbox/state.listbox.d.mts +0 -10
- package/dist/js/listbox/state.listbox.mjs +0 -2
- package/dist/js/listbox.data-DQ7-x2uY.mjs +0 -425
- package/dist/js/listbox.model-BHPA7GM4.d.mts +0 -125
- package/dist/js/menu.mjs +0 -172
- package/dist/js/misc.listbox-DKB-j0UK.mjs +0 -196
- package/dist/js/misc.listbox-mZMuYOxg.d.mts +0 -20
- package/dist/js/popover.d.mts +0 -38
- package/dist/js/resizable.embedded-dvhdfQgt.d.mts +0 -34
- package/dist/js/toolbar.mjs +0 -31
- package/dist/js/tooltip.d.mts +0 -45
- /package/dist/js/combobox/{models.combobox.mjs → combobox.model.mjs} +0 -0
- /package/dist/js/internal/{listbox/listbox.model.mjs → option-list/option-list.model.mjs} +0 -0
- /package/dist/js/{menu.d.mts → menu/index.d.mts} +0 -0
- /package/dist/js/{toolbar.d.mts → toolbar/index.d.mts} +0 -0
|
@@ -1,69 +1,65 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { NAVIGABLE_SYMBOL } from "../internal/navigable/navigable.model.mjs";
|
|
2
|
+
import { getNavigable, getNavigableOrientation } from "../internal/navigable/index.mjs";
|
|
3
|
+
import { OuiTabsEvent, TABS_SYMBOL } from "./tabs.model.mjs";
|
|
2
4
|
import { getAria, setAria } from "@oscarpalmer/toretto/aria";
|
|
3
5
|
import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
|
|
4
6
|
import { createElement } from "@oscarpalmer/toretto/create";
|
|
5
|
-
//#region src/js/tabs.ts
|
|
6
|
-
var OuiTabsEvent = class extends Event {
|
|
7
|
-
oldIndex;
|
|
8
|
-
newIndex;
|
|
9
|
-
constructor(name, oldIndex, newIndex, cancelable) {
|
|
10
|
-
super(name, {
|
|
11
|
-
cancelable,
|
|
12
|
-
bubbles: true,
|
|
13
|
-
composed: true
|
|
14
|
-
});
|
|
15
|
-
this.oldIndex = oldIndex;
|
|
16
|
-
this.newIndex = newIndex;
|
|
17
|
-
}
|
|
18
|
-
};
|
|
7
|
+
//#region src/js/tabs/index.ts
|
|
19
8
|
var OuiTabsElement = class extends HTMLElement {
|
|
20
9
|
static observedAttributes = ["active"];
|
|
21
|
-
#state;
|
|
22
10
|
get active() {
|
|
23
|
-
return this
|
|
11
|
+
return this[TABS_SYMBOL].component?.active ?? 0;
|
|
24
12
|
}
|
|
25
13
|
set active(value) {
|
|
26
|
-
setActive(this
|
|
14
|
+
setActive(this[TABS_SYMBOL], value);
|
|
27
15
|
}
|
|
28
16
|
get panel() {
|
|
29
|
-
return this
|
|
17
|
+
return this[TABS_SYMBOL].component?.panels.elements[this.active];
|
|
30
18
|
}
|
|
31
19
|
get tab() {
|
|
32
|
-
return this
|
|
20
|
+
return this[TABS_SYMBOL].component?.tabList.tabs[this.active];
|
|
21
|
+
}
|
|
22
|
+
constructor() {
|
|
23
|
+
super();
|
|
24
|
+
this[TABS_SYMBOL] = { component: void 0 };
|
|
33
25
|
}
|
|
34
26
|
attributeChangedCallback(name, _, value) {
|
|
35
27
|
switch (name) {
|
|
36
|
-
case "active": setActive(this
|
|
28
|
+
case "active": setActive(this[TABS_SYMBOL], value);
|
|
37
29
|
}
|
|
38
30
|
}
|
|
39
31
|
connectedCallback() {
|
|
40
|
-
|
|
41
|
-
|
|
32
|
+
const state = this[TABS_SYMBOL];
|
|
33
|
+
if (state.component == null) initializeTabs(this, state);
|
|
34
|
+
else attachTabs(state);
|
|
42
35
|
}
|
|
43
36
|
disconnectedCallback() {
|
|
44
|
-
|
|
37
|
+
const state = this[TABS_SYMBOL];
|
|
38
|
+
if (state.component != null) detachTabs(state);
|
|
45
39
|
}
|
|
46
40
|
};
|
|
47
41
|
function attachTabs(state) {
|
|
48
|
-
|
|
49
|
-
|
|
42
|
+
const { component } = state;
|
|
43
|
+
const { content, orientation, panels, tabList } = component;
|
|
44
|
+
component.navigable = getNavigable(tabList.element, {
|
|
45
|
+
orientation,
|
|
50
46
|
selector: SELECTOR_TAB,
|
|
51
47
|
vertical: false,
|
|
52
48
|
onActivate: (navigable) => {
|
|
53
|
-
const index =
|
|
54
|
-
if (index > -1 && index !==
|
|
49
|
+
const index = tabList.tabs.indexOf(navigable[NAVIGABLE_SYMBOL].active.element);
|
|
50
|
+
if (index > -1 && index !== component.active) onActivate(state, index);
|
|
55
51
|
}
|
|
56
52
|
});
|
|
57
|
-
const { length } =
|
|
53
|
+
const { length } = panels.elements;
|
|
58
54
|
for (let index = 0; index < length; index += 1) {
|
|
59
|
-
const panel =
|
|
60
|
-
panel.hidden = index !==
|
|
55
|
+
const panel = panels.elements[index];
|
|
56
|
+
panel.hidden = index !== component.active;
|
|
61
57
|
panel.role = "tabpanel";
|
|
62
58
|
if (index === 0) {
|
|
63
|
-
panel.insertAdjacentElement("beforebegin",
|
|
64
|
-
panel.insertAdjacentElement("beforebegin",
|
|
59
|
+
panel.insertAdjacentElement("beforebegin", tabList.element);
|
|
60
|
+
panel.insertAdjacentElement("beforebegin", content);
|
|
65
61
|
}
|
|
66
|
-
|
|
62
|
+
content.append(panel);
|
|
67
63
|
}
|
|
68
64
|
}
|
|
69
65
|
function createContent(prefix, panels, active) {
|
|
@@ -121,16 +117,17 @@ function createTabList(prefix, panels, labels, active) {
|
|
|
121
117
|
};
|
|
122
118
|
}
|
|
123
119
|
function detachTabs(state) {
|
|
124
|
-
state.
|
|
125
|
-
|
|
120
|
+
const { content, navigable, panels, tabList } = state.component;
|
|
121
|
+
navigable?.destroy();
|
|
122
|
+
const { length } = panels.elements;
|
|
126
123
|
for (let index = 0; index < length; index += 1) {
|
|
127
|
-
const panel =
|
|
128
|
-
panel.hidden =
|
|
129
|
-
panel.role =
|
|
130
|
-
|
|
124
|
+
const panel = panels.elements[index];
|
|
125
|
+
panel.hidden = panels.hidden[index];
|
|
126
|
+
panel.role = panels.roles[index];
|
|
127
|
+
content.before(panel);
|
|
131
128
|
}
|
|
132
|
-
|
|
133
|
-
|
|
129
|
+
tabList.element.remove();
|
|
130
|
+
content.remove();
|
|
134
131
|
}
|
|
135
132
|
function getActive(element, max) {
|
|
136
133
|
const attribute = getAttribute(element, "active");
|
|
@@ -171,7 +168,7 @@ function getLabels(panels) {
|
|
|
171
168
|
}
|
|
172
169
|
return labels;
|
|
173
170
|
}
|
|
174
|
-
function initializeTabs(element) {
|
|
171
|
+
function initializeTabs(element, state) {
|
|
175
172
|
const panels = [...element.querySelectorAll(SELECTOR_PANEL)];
|
|
176
173
|
if (panels.length === 0) throw new Error(MESSAGE_EMPTY);
|
|
177
174
|
const labels = getLabels(panels);
|
|
@@ -183,7 +180,7 @@ function initializeTabs(element) {
|
|
|
183
180
|
const orientation = getNavigableOrientation(element, false, false);
|
|
184
181
|
const content = createContent(id, panels, active);
|
|
185
182
|
const tabList = createTabList(id, panels, labels, active);
|
|
186
|
-
|
|
183
|
+
state.component = {
|
|
187
184
|
active,
|
|
188
185
|
id,
|
|
189
186
|
orientation,
|
|
@@ -193,35 +190,38 @@ function initializeTabs(element) {
|
|
|
193
190
|
panels: content.panels
|
|
194
191
|
};
|
|
195
192
|
attachTabs(state);
|
|
196
|
-
return state;
|
|
197
193
|
}
|
|
198
194
|
function onActivate(state, next) {
|
|
199
|
-
const
|
|
195
|
+
const { component } = state;
|
|
196
|
+
const { host, panels, tabList } = component;
|
|
197
|
+
const current = component.active;
|
|
200
198
|
const event = new OuiTabsEvent("oui:beforechange", current, next, true);
|
|
201
|
-
|
|
199
|
+
host.dispatchEvent(event);
|
|
202
200
|
if (event.defaultPrevented) return;
|
|
203
|
-
|
|
204
|
-
const { length } =
|
|
201
|
+
component.active = next;
|
|
202
|
+
const { length } = panels.elements;
|
|
205
203
|
for (let index = 0; index < length; index += 1) {
|
|
206
|
-
const panel =
|
|
204
|
+
const panel = panels.elements[index];
|
|
207
205
|
panel.hidden = index !== next;
|
|
208
|
-
setAria(
|
|
206
|
+
setAria(tabList.tabs[index], "selected", index === next);
|
|
209
207
|
}
|
|
210
|
-
setAttribute(
|
|
211
|
-
|
|
208
|
+
setAttribute(host, "active", next);
|
|
209
|
+
host.dispatchEvent(new OuiTabsEvent("oui:change", current, next, false));
|
|
212
210
|
}
|
|
213
211
|
function setActive(state, value) {
|
|
214
|
-
|
|
215
|
-
|
|
212
|
+
const { component } = state;
|
|
213
|
+
if (component == null) return;
|
|
214
|
+
const { active, host, navigable, panels } = component;
|
|
215
|
+
const max = panels.elements.length - 1;
|
|
216
216
|
let index;
|
|
217
217
|
if (typeof value === "number" && !Number.isNaN(value) && value >= 0) index = value > max ? max : value;
|
|
218
218
|
else if (typeof value === "string") {
|
|
219
219
|
const parsed = Number.parseInt(value, 10);
|
|
220
220
|
if (!Number.isNaN(parsed) && parsed >= 0) index = parsed > max ? max : parsed;
|
|
221
221
|
}
|
|
222
|
-
if (index == null) setAttribute(
|
|
223
|
-
else if (index !==
|
|
224
|
-
|
|
222
|
+
if (index == null) setAttribute(host, "active", active);
|
|
223
|
+
else if (index !== active) {
|
|
224
|
+
navigable?.navigate(index, false);
|
|
225
225
|
onActivate(state, index);
|
|
226
226
|
}
|
|
227
227
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { a as OuiTabsState, c as TABS_SYMBOL, i as OuiTabsPanels, l as TABS_TAGNAME, n as OuiTabsContent, o as OuiTabsStateComponent, r as OuiTabsEvent, s as OuiTabsTabList, t as GenericOuiTabsElement } from "../tabs.model-BHPy7fPo.mjs";
|
|
2
|
+
export { GenericOuiTabsElement, OuiTabsContent, OuiTabsEvent, OuiTabsPanels, OuiTabsState, OuiTabsStateComponent, OuiTabsTabList, TABS_SYMBOL, TABS_TAGNAME };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
//#region src/js/tabs/tabs.model.ts
|
|
2
|
+
var OuiTabsEvent = class extends Event {
|
|
3
|
+
oldIndex;
|
|
4
|
+
newIndex;
|
|
5
|
+
constructor(name, oldIndex, newIndex, cancelable) {
|
|
6
|
+
super(name, {
|
|
7
|
+
cancelable,
|
|
8
|
+
bubbles: true,
|
|
9
|
+
composed: true
|
|
10
|
+
});
|
|
11
|
+
this.oldIndex = oldIndex;
|
|
12
|
+
this.newIndex = newIndex;
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
const TABS_TAGNAME = "oui-tabs";
|
|
16
|
+
const TABS_SYMBOL = Symbol(TABS_TAGNAME);
|
|
17
|
+
//#endregion
|
|
18
|
+
export { OuiTabsEvent, TABS_SYMBOL, TABS_TAGNAME };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { d as OuiNavigable, h as OuiNavigableOrientation } from "./navigable.model-BqoR6iBv.mjs";
|
|
2
|
+
//#region src/js/tabs/tabs.model.d.ts
|
|
3
|
+
type GenericOuiTabsElement = {
|
|
4
|
+
[TABS_SYMBOL]: OuiTabsState;
|
|
5
|
+
} & HTMLElement;
|
|
6
|
+
declare class OuiTabsEvent extends Event {
|
|
7
|
+
oldIndex: number;
|
|
8
|
+
newIndex: number;
|
|
9
|
+
constructor(name: "oui:beforechange" | "oui:change", oldIndex: number, newIndex: number, cancelable: boolean);
|
|
10
|
+
}
|
|
11
|
+
type OuiTabsContent = {
|
|
12
|
+
element: HTMLDivElement;
|
|
13
|
+
panels: OuiTabsPanels;
|
|
14
|
+
};
|
|
15
|
+
type OuiTabsPanels = {
|
|
16
|
+
elements: HTMLElement[];
|
|
17
|
+
hidden: Array<boolean | "until-found">;
|
|
18
|
+
roles: Array<string | null>;
|
|
19
|
+
};
|
|
20
|
+
type OuiTabsState = {
|
|
21
|
+
component: OuiTabsStateComponent;
|
|
22
|
+
};
|
|
23
|
+
type OuiTabsStateComponent = {
|
|
24
|
+
active: number;
|
|
25
|
+
content: HTMLDivElement;
|
|
26
|
+
host: GenericOuiTabsElement;
|
|
27
|
+
id: string;
|
|
28
|
+
navigable?: OuiNavigable;
|
|
29
|
+
orientation: OuiNavigableOrientation;
|
|
30
|
+
panels: OuiTabsPanels;
|
|
31
|
+
tabList: OuiTabsTabList;
|
|
32
|
+
};
|
|
33
|
+
type OuiTabsTabList = {
|
|
34
|
+
element: HTMLDivElement;
|
|
35
|
+
tabs: HTMLButtonElement[];
|
|
36
|
+
};
|
|
37
|
+
declare const TABS_TAGNAME = "oui-tabs";
|
|
38
|
+
declare const TABS_SYMBOL: unique symbol;
|
|
39
|
+
//#endregion
|
|
40
|
+
export { OuiTabsState as a, TABS_SYMBOL as c, OuiTabsPanels as i, TABS_TAGNAME as l, OuiTabsContent as n, OuiTabsStateComponent as o, OuiTabsEvent as r, OuiTabsTabList as s, GenericOuiTabsElement as t };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { attributable } from "../internal/attributable.mjs";
|
|
2
|
+
import { getNavigable, updateNavigableFocus } from "../internal/navigable/index.mjs";
|
|
3
|
+
import { TOOLBAR_ATTRIBUTE, TOOLBAR_SELECTOR, TOOLBAR_SYMBOL, toolbars } from "./toolbar.model.mjs";
|
|
4
|
+
//#region src/js/toolbar/index.ts
|
|
5
|
+
function OuiToolbar(navigable) {
|
|
6
|
+
this[TOOLBAR_SYMBOL] = navigable;
|
|
7
|
+
updateNavigableFocus(navigable, false);
|
|
8
|
+
}
|
|
9
|
+
OuiToolbar.prototype.destroy = destroyToolbar;
|
|
10
|
+
function addToolbar(element) {
|
|
11
|
+
if (!toolbars.has(element)) toolbars.set(element, new OuiToolbar(getNavigable(element, {
|
|
12
|
+
role: "toolbar",
|
|
13
|
+
selector: TOOLBAR_SELECTOR,
|
|
14
|
+
vertical: false
|
|
15
|
+
})));
|
|
16
|
+
}
|
|
17
|
+
function destroyToolbar() {
|
|
18
|
+
this[TOOLBAR_SYMBOL].destroy();
|
|
19
|
+
this[TOOLBAR_SYMBOL] = void 0;
|
|
20
|
+
}
|
|
21
|
+
function removeToolbar(element) {
|
|
22
|
+
toolbars.get(element)?.destroy();
|
|
23
|
+
toolbars.delete(element);
|
|
24
|
+
}
|
|
25
|
+
attributable(TOOLBAR_ATTRIBUTE, addToolbar, removeToolbar);
|
|
26
|
+
//#endregion
|
|
27
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { d as OuiNavigable } from "../navigable.model-BqoR6iBv.mjs";
|
|
2
|
+
//#region src/js/toolbar/toolbar.model.d.ts
|
|
3
|
+
export type OuiToolbar = {
|
|
4
|
+
[TOOLBAR_SYMBOL]: OuiNavigable;
|
|
5
|
+
destroy(): void;
|
|
6
|
+
};
|
|
7
|
+
export declare const TOOLBAR_ATTRIBUTE = "oui-toolbar";
|
|
8
|
+
export declare const TOOLBAR_SYMBOL: unique symbol;
|
|
9
|
+
export declare const TOOLBAR_SELECTOR: string;
|
|
10
|
+
export declare const toolbars: WeakMap<Element, OuiToolbar>;
|
|
11
|
+
//#endregion
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
//#region src/js/toolbar/toolbar.model.ts
|
|
2
|
+
const TOOLBAR_ATTRIBUTE = "oui-toolbar";
|
|
3
|
+
const TOOLBAR_SYMBOL = Symbol(TOOLBAR_ATTRIBUTE);
|
|
4
|
+
const TOOLBAR_SELECTOR = `[${TOOLBAR_ATTRIBUTE}-item]`;
|
|
5
|
+
const toolbars = /* @__PURE__ */ new WeakMap();
|
|
6
|
+
//#endregion
|
|
7
|
+
export { TOOLBAR_ATTRIBUTE, TOOLBAR_SELECTOR, TOOLBAR_SYMBOL, toolbars };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { n as OuiTooltipState, t as OuiTooltip } from "../tooltip.model-BpNStw5z.mjs";
|
|
2
|
+
//#region src/js/tooltip/index.d.ts
|
|
3
|
+
declare function OuiTooltip(this: OuiTooltip, state: OuiTooltipState): void;
|
|
4
|
+
/**
|
|
5
|
+
* Get the _OuiTooltip_ for an element
|
|
6
|
+
*
|
|
7
|
+
* @param element Element to get _OuiTooltip_ for
|
|
8
|
+
* @returns _OuiTooltip_ instance
|
|
9
|
+
*/
|
|
10
|
+
export declare function getTooltip(element: Element): OuiTooltip | undefined;
|
|
11
|
+
/**
|
|
12
|
+
* Set the delay before showing the tooltip, in milliseconds
|
|
13
|
+
*
|
|
14
|
+
* _(Default delay is half a second, or 500 milliseconds)_
|
|
15
|
+
* @param value Delay in milliseconds
|
|
16
|
+
*/
|
|
17
|
+
export declare function setTooltipDelay(value: number): void;
|
|
18
|
+
//#endregion
|
|
19
|
+
export type { OuiTooltip };
|
|
@@ -1,91 +1,71 @@
|
|
|
1
|
-
import { createEmbeddedFloatable } from "
|
|
2
|
-
import { attributable } from "
|
|
1
|
+
import { createEmbeddedFloatable } from "../floatable/floatable.embedded.mjs";
|
|
2
|
+
import { attributable } from "../internal/attributable.mjs";
|
|
3
|
+
import { EXPRESSION_WHITESPACE } from "../internal/misc.mjs";
|
|
4
|
+
import { TOOLTIP_ATTRIBUTE, TOOLTIP_ATTRIBUTE_CONTENT, TOOLTIP_ATTRIBUTE_CONTENT_OPEN, TOOLTIP_SELECTOR, TOOLTIP_SELECTOR_CONTENT, TOOLTIP_SYMBOL, tooltipFloatableOptions, tooltips } from "./tooltip.model.mjs";
|
|
3
5
|
import { getAria } from "@oscarpalmer/toretto/aria";
|
|
4
|
-
import { on } from "@oscarpalmer/toretto/event";
|
|
5
|
-
import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
|
|
6
6
|
import { setAttribute } from "@oscarpalmer/toretto/attribute";
|
|
7
|
+
import { on } from "@oscarpalmer/toretto/event";
|
|
7
8
|
import { findAncestor } from "@oscarpalmer/toretto/find";
|
|
9
|
+
import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
|
|
8
10
|
import { createElement } from "@oscarpalmer/toretto/create";
|
|
9
|
-
//#region src/js/tooltip.ts
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
set open(value) {
|
|
22
|
-
if (value === true) this.show();
|
|
23
|
-
else if (value === false) this.hide();
|
|
24
|
-
}
|
|
25
|
-
constructor(state) {
|
|
26
|
-
this.#state = state;
|
|
27
|
-
state.floatable.update();
|
|
28
|
-
}
|
|
29
|
-
/**
|
|
30
|
-
* Closes the tooltip
|
|
31
|
-
*/
|
|
32
|
-
hide() {
|
|
33
|
-
this.#state.floatable.hide();
|
|
34
|
-
}
|
|
35
|
-
/**
|
|
36
|
-
* Opens the tooltip
|
|
37
|
-
*/
|
|
38
|
-
show() {
|
|
39
|
-
this.#state.floatable.show();
|
|
40
|
-
}
|
|
41
|
-
};
|
|
11
|
+
//#region src/js/tooltip/index.ts
|
|
12
|
+
function OuiTooltip(state) {
|
|
13
|
+
this[TOOLTIP_SYMBOL] = state;
|
|
14
|
+
state.floatable.update();
|
|
15
|
+
}
|
|
16
|
+
OuiTooltip.prototype.hide = hideTooltip;
|
|
17
|
+
OuiTooltip.prototype.show = showTooltip;
|
|
18
|
+
Object.defineProperties(OuiTooltip.prototype, { open: {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: getOpen,
|
|
21
|
+
set: setOpen
|
|
22
|
+
} });
|
|
42
23
|
function activate(event, focus) {
|
|
43
|
-
const targetAnchor = findAncestor(event,
|
|
44
|
-
const targetContent = findAncestor(event,
|
|
24
|
+
const targetAnchor = findAncestor(event, TOOLTIP_SELECTOR);
|
|
25
|
+
const targetContent = findAncestor(event, TOOLTIP_SELECTOR_CONTENT);
|
|
45
26
|
if (targetAnchor == null && targetContent == null) {
|
|
46
27
|
if (!focused) {
|
|
47
|
-
closeTooltip(true,
|
|
48
|
-
activeState = void 0;
|
|
28
|
+
closeTooltip(true, activeTooltip);
|
|
49
29
|
activeTooltip = void 0;
|
|
50
30
|
}
|
|
51
31
|
return;
|
|
52
32
|
}
|
|
53
|
-
const
|
|
54
|
-
if (
|
|
33
|
+
const targetTooltip = tooltips.get(targetAnchor ?? targetContent);
|
|
34
|
+
if (targetTooltip == null || targetTooltip === activeTooltip) return;
|
|
55
35
|
const shouldDelay = activeTooltip == null;
|
|
56
|
-
closeTooltip(false,
|
|
57
|
-
|
|
58
|
-
activeTooltip = state.tooltip;
|
|
36
|
+
closeTooltip(false, activeTooltip);
|
|
37
|
+
activeTooltip = targetTooltip;
|
|
59
38
|
focused = focus;
|
|
60
|
-
|
|
39
|
+
const targetState = targetTooltip[TOOLTIP_SYMBOL];
|
|
40
|
+
targetState.timer = setTimeout(() => {
|
|
61
41
|
content.innerHTML = "";
|
|
62
|
-
content.append(...
|
|
63
|
-
|
|
42
|
+
content.append(...targetState.elements);
|
|
43
|
+
targetState.floatable.show();
|
|
64
44
|
setTimeout(() => {
|
|
65
|
-
|
|
45
|
+
targetState.floatable.update();
|
|
66
46
|
});
|
|
67
47
|
}, shouldDelay ? delay : 0);
|
|
68
48
|
}
|
|
69
49
|
function addTooltip(element) {
|
|
70
|
-
if (!
|
|
50
|
+
if (!tooltips.has(element)) createTooltip(element);
|
|
71
51
|
}
|
|
72
|
-
function closeTooltip(clear,
|
|
73
|
-
if (
|
|
52
|
+
function closeTooltip(clear, tooltip) {
|
|
53
|
+
if (tooltip == null) return;
|
|
54
|
+
const state = tooltip[TOOLTIP_SYMBOL];
|
|
74
55
|
if (state.timer != null) clearTimeout(state.timer);
|
|
75
56
|
if (clear) content?.hidePopover();
|
|
76
57
|
}
|
|
77
58
|
function createTooltip(anchor) {
|
|
78
59
|
const elements = getElements(anchor);
|
|
79
|
-
if (elements
|
|
80
|
-
states.set(anchor, getState(anchor, elements));
|
|
60
|
+
if (elements != null) tooltips.set(anchor, new OuiTooltip(getState(anchor, elements)));
|
|
81
61
|
}
|
|
82
|
-
function destroyTooltip(
|
|
62
|
+
function destroyTooltip(tooltip) {
|
|
63
|
+
const state = tooltip[TOOLTIP_SYMBOL];
|
|
83
64
|
clearTimeout(state.timer);
|
|
84
65
|
state.floatable.destroy();
|
|
85
66
|
state.anchor = void 0;
|
|
86
67
|
state.elements = void 0;
|
|
87
68
|
state.floatable = void 0;
|
|
88
|
-
state.tooltip = void 0;
|
|
89
69
|
}
|
|
90
70
|
function findElements(attribute) {
|
|
91
71
|
if (attribute == null) return;
|
|
@@ -105,7 +85,7 @@ function findElements(attribute) {
|
|
|
105
85
|
function getContent() {
|
|
106
86
|
return createElement("div", {
|
|
107
87
|
attribute: {
|
|
108
|
-
[
|
|
88
|
+
[TOOLTIP_ATTRIBUTE_CONTENT]: "",
|
|
109
89
|
popover: "hint"
|
|
110
90
|
},
|
|
111
91
|
property: {
|
|
@@ -123,15 +103,15 @@ function getElements(anchor) {
|
|
|
123
103
|
if (isNullableOrWhitespace(textContent)) return;
|
|
124
104
|
return [createElement("p", { property: { textContent } })];
|
|
125
105
|
}
|
|
106
|
+
function getOpen() {
|
|
107
|
+
return this === activeTooltip && content.checkVisibility();
|
|
108
|
+
}
|
|
126
109
|
function getState(anchor, elements) {
|
|
127
|
-
|
|
110
|
+
return {
|
|
128
111
|
anchor,
|
|
129
112
|
elements,
|
|
130
|
-
floatable: createEmbeddedFloatable(anchor, content,
|
|
131
|
-
tooltip: null
|
|
113
|
+
floatable: createEmbeddedFloatable(anchor, content, tooltipFloatableOptions)
|
|
132
114
|
};
|
|
133
|
-
state.tooltip = new OuiTooltip(state);
|
|
134
|
-
return state;
|
|
135
115
|
}
|
|
136
116
|
/**
|
|
137
117
|
* Get the _OuiTooltip_ for an element
|
|
@@ -140,7 +120,10 @@ function getState(anchor, elements) {
|
|
|
140
120
|
* @returns _OuiTooltip_ instance
|
|
141
121
|
*/
|
|
142
122
|
function getTooltip(element) {
|
|
143
|
-
return
|
|
123
|
+
return tooltips.get(element);
|
|
124
|
+
}
|
|
125
|
+
function hideTooltip() {
|
|
126
|
+
this[TOOLTIP_SYMBOL].floatable.hide();
|
|
144
127
|
}
|
|
145
128
|
function onFocusin(event) {
|
|
146
129
|
activate(event, true);
|
|
@@ -149,9 +132,8 @@ function onFocusout() {
|
|
|
149
132
|
if (activeTooltip == null) return;
|
|
150
133
|
if (focusTimer != null) clearTimeout(focusTimer);
|
|
151
134
|
focusTimer = setTimeout(() => {
|
|
152
|
-
if (activeTooltip == null || document.activeElement == null || findAncestor(document.activeElement,
|
|
153
|
-
closeTooltip(true,
|
|
154
|
-
activeState = void 0;
|
|
135
|
+
if (activeTooltip == null || document.activeElement == null || findAncestor(document.activeElement, TOOLTIP_SELECTOR) != null) return;
|
|
136
|
+
closeTooltip(true, activeTooltip);
|
|
155
137
|
activeTooltip = void 0;
|
|
156
138
|
});
|
|
157
139
|
}
|
|
@@ -159,13 +141,12 @@ function onPointermove(event) {
|
|
|
159
141
|
activate(event, false);
|
|
160
142
|
}
|
|
161
143
|
function onToggle(event) {
|
|
162
|
-
setAttribute(content,
|
|
144
|
+
setAttribute(content, TOOLTIP_ATTRIBUTE_CONTENT_OPEN, event.newState === "open" ? "" : void 0);
|
|
163
145
|
}
|
|
164
146
|
function removeTooltip(element) {
|
|
165
|
-
const
|
|
166
|
-
if (
|
|
167
|
-
|
|
168
|
-
states.delete(element);
|
|
147
|
+
const tooltip = tooltips.get(element);
|
|
148
|
+
if (tooltip != null) destroyTooltip(tooltip);
|
|
149
|
+
tooltips.delete(element);
|
|
169
150
|
}
|
|
170
151
|
/**
|
|
171
152
|
* Set the delay before showing the tooltip, in milliseconds
|
|
@@ -176,22 +157,16 @@ function removeTooltip(element) {
|
|
|
176
157
|
function setTooltipDelay(value) {
|
|
177
158
|
if (typeof value === "number" && !Number.isNaN(value) && value >= 0) delay = value;
|
|
178
159
|
}
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
160
|
+
function setOpen(value) {
|
|
161
|
+
if (value === true) this.show();
|
|
162
|
+
else if (value === false) this.hide();
|
|
163
|
+
}
|
|
164
|
+
function showTooltip() {
|
|
165
|
+
this[TOOLTIP_SYMBOL].floatable.show();
|
|
166
|
+
}
|
|
185
167
|
const content = getContent();
|
|
186
|
-
const states = /* @__PURE__ */ new WeakMap();
|
|
187
|
-
const options = {
|
|
188
|
-
attribute: `${ATTRIBUTE}-position`,
|
|
189
|
-
position: "above",
|
|
190
|
-
reusable: true
|
|
191
|
-
};
|
|
192
168
|
let delay = 500;
|
|
193
169
|
let focused = false;
|
|
194
|
-
let activeState;
|
|
195
170
|
let activeTooltip;
|
|
196
171
|
let focusTimer;
|
|
197
172
|
document.body.append(content);
|
|
@@ -199,6 +174,6 @@ on(content, "toggle", onToggle);
|
|
|
199
174
|
on(document, "focusin", onFocusin);
|
|
200
175
|
on(document, "focusout", onFocusout);
|
|
201
176
|
on(document, "pointermove", onPointermove);
|
|
202
|
-
attributable(
|
|
177
|
+
attributable(TOOLTIP_ATTRIBUTE, addTooltip, removeTooltip);
|
|
203
178
|
//#endregion
|
|
204
179
|
export { getTooltip, setTooltipDelay };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { a as TOOLTIP_ATTRIBUTE_CONTENT_OPEN, c as TOOLTIP_SYMBOL, i as TOOLTIP_ATTRIBUTE_CONTENT, l as tooltipFloatableOptions, n as OuiTooltipState, o as TOOLTIP_SELECTOR, r as TOOLTIP_ATTRIBUTE, s as TOOLTIP_SELECTOR_CONTENT, t as OuiTooltip, u as tooltips } from "../tooltip.model-BpNStw5z.mjs";
|
|
2
|
+
export { OuiTooltip, OuiTooltipState, TOOLTIP_ATTRIBUTE, TOOLTIP_ATTRIBUTE_CONTENT, TOOLTIP_ATTRIBUTE_CONTENT_OPEN, TOOLTIP_SELECTOR, TOOLTIP_SELECTOR_CONTENT, TOOLTIP_SYMBOL, tooltipFloatableOptions, tooltips };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
//#region src/js/tooltip/tooltip.model.ts
|
|
2
|
+
const TOOLTIP_ATTRIBUTE = "oui-tooltip";
|
|
3
|
+
const TOOLTIP_ATTRIBUTE_CONTENT = `${TOOLTIP_ATTRIBUTE}-content`;
|
|
4
|
+
const TOOLTIP_ATTRIBUTE_CONTENT_OPEN = `${TOOLTIP_ATTRIBUTE_CONTENT}-open`;
|
|
5
|
+
const TOOLTIP_SELECTOR = `[${TOOLTIP_ATTRIBUTE}]`;
|
|
6
|
+
const TOOLTIP_SELECTOR_CONTENT = `[${TOOLTIP_ATTRIBUTE_CONTENT}]`;
|
|
7
|
+
const TOOLTIP_SYMBOL = Symbol(TOOLTIP_ATTRIBUTE);
|
|
8
|
+
const tooltipFloatableOptions = {
|
|
9
|
+
attribute: `${TOOLTIP_ATTRIBUTE}-position`,
|
|
10
|
+
position: "above",
|
|
11
|
+
reusable: true
|
|
12
|
+
};
|
|
13
|
+
const tooltips = /* @__PURE__ */ new WeakMap();
|
|
14
|
+
//#endregion
|
|
15
|
+
export { TOOLTIP_ATTRIBUTE, TOOLTIP_ATTRIBUTE_CONTENT, TOOLTIP_ATTRIBUTE_CONTENT_OPEN, TOOLTIP_SELECTOR, TOOLTIP_SELECTOR_CONTENT, TOOLTIP_SYMBOL, tooltipFloatableOptions, tooltips };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { c as OuiFloatable, l as OuiFloatableOptions } from "./floatable.model-DXsQgoU7.mjs";
|
|
2
|
+
//#region src/js/tooltip/tooltip.model.d.ts
|
|
3
|
+
type OuiTooltip = {
|
|
4
|
+
[TOOLTIP_SYMBOL]: OuiTooltipState;
|
|
5
|
+
/**
|
|
6
|
+
* Is the tooltip open?
|
|
7
|
+
*/
|
|
8
|
+
get open(): boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Open or close the tooltip
|
|
11
|
+
*/
|
|
12
|
+
set open(value: boolean);
|
|
13
|
+
/**
|
|
14
|
+
* Closes the tooltip
|
|
15
|
+
*/
|
|
16
|
+
hide(): void;
|
|
17
|
+
/**
|
|
18
|
+
* Opens the tooltip
|
|
19
|
+
*/
|
|
20
|
+
show(): void;
|
|
21
|
+
};
|
|
22
|
+
type OuiTooltipState = {
|
|
23
|
+
anchor: Element;
|
|
24
|
+
elements: Element[];
|
|
25
|
+
floatable: OuiFloatable;
|
|
26
|
+
timer?: number;
|
|
27
|
+
};
|
|
28
|
+
declare const TOOLTIP_ATTRIBUTE = "oui-tooltip";
|
|
29
|
+
declare const TOOLTIP_ATTRIBUTE_CONTENT: string;
|
|
30
|
+
declare const TOOLTIP_ATTRIBUTE_CONTENT_OPEN: string;
|
|
31
|
+
declare const TOOLTIP_SELECTOR: string;
|
|
32
|
+
declare const TOOLTIP_SELECTOR_CONTENT: string;
|
|
33
|
+
declare const TOOLTIP_SYMBOL: unique symbol;
|
|
34
|
+
declare const tooltipFloatableOptions: OuiFloatableOptions;
|
|
35
|
+
declare const tooltips: WeakMap<Element, OuiTooltip>;
|
|
36
|
+
//#endregion
|
|
37
|
+
export { TOOLTIP_ATTRIBUTE_CONTENT_OPEN as a, TOOLTIP_SYMBOL as c, TOOLTIP_ATTRIBUTE_CONTENT as i, tooltipFloatableOptions as l, OuiTooltipState as n, TOOLTIP_SELECTOR as o, TOOLTIP_ATTRIBUTE as r, TOOLTIP_SELECTOR_CONTENT as s, OuiTooltip as t, tooltips as u };
|