@deepfuture/dui-components 0.0.12 → 0.0.14
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/_deprecated/center/center.js +2 -2
- package/_deprecated/hstack/hstack.js +79 -33
- package/_deprecated/page-inset/page-inset.js +104 -56
- package/_deprecated/vstack/vstack.js +61 -19
- package/accordion/accordion-item.js +217 -147
- package/accordion/accordion.js +214 -149
- package/alert-dialog/alert-dialog-close.js +2 -2
- package/alert-dialog/alert-dialog-popup.js +230 -166
- package/alert-dialog/alert-dialog-trigger.js +2 -2
- package/alert-dialog/alert-dialog.js +128 -73
- package/avatar/avatar.js +175 -115
- package/badge/badge.js +2 -2
- package/breadcrumb/breadcrumb-ellipsis.js +2 -2
- package/breadcrumb/breadcrumb-item.js +2 -2
- package/breadcrumb/breadcrumb-link.js +2 -2
- package/breadcrumb/breadcrumb-page.js +2 -2
- package/breadcrumb/breadcrumb-separator.js +2 -2
- package/breadcrumb/breadcrumb.js +2 -2
- package/button/button.js +109 -65
- package/calendar/calendar.js +368 -290
- package/checkbox/checkbox-group.js +146 -87
- package/checkbox/checkbox.js +232 -167
- package/collapsible/collapsible.js +210 -132
- package/combobox/combobox.js +318 -252
- package/command/command-empty.js +67 -25
- package/command/command-group.js +87 -47
- package/command/command-input.js +84 -44
- package/command/command-item.js +168 -124
- package/command/command-list.js +60 -18
- package/command/command-separator.js +2 -2
- package/command/command-shortcut.js +2 -2
- package/command/command.js +297 -232
- package/data-table/data-table.js +225 -153
- package/dialog/dialog-close.js +2 -2
- package/dialog/dialog-popup.js +247 -181
- package/dialog/dialog-trigger.js +2 -2
- package/dialog/dialog.js +128 -73
- package/dropzone/dropzone.js +310 -249
- package/icon/icon.js +2 -2
- package/input/input.js +204 -143
- package/link/link.js +62 -24
- package/menu/menu-item.js +66 -24
- package/menu/menu.js +189 -136
- package/menubar/menubar.js +142 -91
- package/number-field/number-field.js +277 -204
- package/package.json +2 -3
- package/popover/popover-close.js +2 -2
- package/popover/popover-popup.js +126 -76
- package/popover/popover-trigger.js +2 -2
- package/popover/popover.js +181 -120
- package/portal/portal.js +128 -86
- package/preview-card/preview-card-popup.js +114 -66
- package/preview-card/preview-card-trigger.js +2 -2
- package/preview-card/preview-card.js +211 -142
- package/progress/progress.js +91 -45
- package/radio/radio-group.js +153 -90
- package/radio/radio.js +137 -94
- package/scroll-area/scroll-area.js +382 -283
- package/select/select.js +260 -203
- package/separator/separator.js +60 -18
- package/sidebar/sidebar-content.js +2 -2
- package/sidebar/sidebar-footer.js +2 -2
- package/sidebar/sidebar-group-label.js +2 -2
- package/sidebar/sidebar-group.js +2 -2
- package/sidebar/sidebar-header.js +2 -2
- package/sidebar/sidebar-inset.js +2 -2
- package/sidebar/sidebar-menu-button.js +118 -74
- package/sidebar/sidebar-menu-item.js +2 -2
- package/sidebar/sidebar-menu.js +2 -2
- package/sidebar/sidebar-provider.js +202 -129
- package/sidebar/sidebar-separator.js +2 -2
- package/sidebar/sidebar-trigger.js +2 -2
- package/sidebar/sidebar.js +150 -85
- package/slider/slider.js +217 -159
- package/spinner/spinner.js +70 -28
- package/switch/switch.js +174 -111
- package/tabs/tab.js +89 -47
- package/tabs/tabs-indicator.js +2 -2
- package/tabs/tabs-list.js +92 -54
- package/tabs/tabs-panel.js +90 -44
- package/tabs/tabs.js +130 -71
- package/textarea/textarea.js +153 -95
- package/toggle/toggle-group.js +184 -125
- package/toggle/toggle.js +131 -76
- package/toolbar/toolbar.js +79 -33
- package/tooltip/tooltip-popup.js +108 -60
- package/tooltip/tooltip-trigger.js +93 -55
- package/tooltip/tooltip.js +225 -154
- package/trunc/trunc.js +78 -34
|
@@ -1,9 +1,37 @@
|
|
|
1
1
|
/** Ported from original DUI: deep-future-app/app/client/components/dui/tooltip */
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
|
|
3
|
+
function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
|
|
4
|
+
var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
|
|
5
|
+
var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
|
|
6
|
+
var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
|
|
7
|
+
var _, done = false;
|
|
8
|
+
for (var i = decorators.length - 1; i >= 0; i--) {
|
|
9
|
+
var context = {};
|
|
10
|
+
for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
|
|
11
|
+
for (var p in contextIn.access) context.access[p] = contextIn.access[p];
|
|
12
|
+
context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
|
|
13
|
+
var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
|
|
14
|
+
if (kind === "accessor") {
|
|
15
|
+
if (result === void 0) continue;
|
|
16
|
+
if (result === null || typeof result !== "object") throw new TypeError("Object expected");
|
|
17
|
+
if (_ = accept(result.get)) descriptor.get = _;
|
|
18
|
+
if (_ = accept(result.set)) descriptor.set = _;
|
|
19
|
+
if (_ = accept(result.init)) initializers.unshift(_);
|
|
20
|
+
}
|
|
21
|
+
else if (_ = accept(result)) {
|
|
22
|
+
if (kind === "field") initializers.unshift(_);
|
|
23
|
+
else descriptor[key] = _;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
if (target) Object.defineProperty(target, contextIn.name, descriptor);
|
|
27
|
+
done = true;
|
|
28
|
+
};
|
|
29
|
+
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
|
|
30
|
+
var useValue = arguments.length > 2;
|
|
31
|
+
for (var i = 0; i < initializers.length; i++) {
|
|
32
|
+
value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
|
|
33
|
+
}
|
|
34
|
+
return useValue ? value : void 0;
|
|
7
35
|
};
|
|
8
36
|
import { css, html, LitElement } from "lit";
|
|
9
37
|
import { property } from "lit/decorators.js";
|
|
@@ -38,53 +66,64 @@ const componentStyles = css `
|
|
|
38
66
|
*
|
|
39
67
|
* @slot - Content that triggers the tooltip.
|
|
40
68
|
*/
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
this
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
69
|
+
let DuiTooltipTrigger = (() => {
|
|
70
|
+
let _classSuper = LitElement;
|
|
71
|
+
let _disabled_decorators;
|
|
72
|
+
let _disabled_initializers = [];
|
|
73
|
+
let _disabled_extraInitializers = [];
|
|
74
|
+
return class DuiTooltipTrigger extends _classSuper {
|
|
75
|
+
static {
|
|
76
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
77
|
+
_disabled_decorators = [property({ type: Boolean, reflect: true })];
|
|
78
|
+
__esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
|
|
79
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
80
|
+
}
|
|
81
|
+
static tagName = "dui-tooltip-trigger";
|
|
82
|
+
static styles = [base, hostStyles, componentStyles];
|
|
83
|
+
#disabled_accessor_storage = __runInitializers(this, _disabled_initializers, false);
|
|
84
|
+
/** Disable the trigger. */
|
|
85
|
+
get disabled() { return this.#disabled_accessor_storage; }
|
|
86
|
+
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
87
|
+
#ctx = (__runInitializers(this, _disabled_extraInitializers), new ContextConsumer(this, {
|
|
88
|
+
context: tooltipContext,
|
|
89
|
+
subscribe: true,
|
|
90
|
+
}));
|
|
91
|
+
#handleMouseEnter = () => {
|
|
92
|
+
if (this.#isDisabled)
|
|
93
|
+
return;
|
|
94
|
+
this.#updateTriggerEl();
|
|
95
|
+
this.#ctx.value?.openTooltip();
|
|
96
|
+
};
|
|
97
|
+
#handleMouseLeave = () => {
|
|
98
|
+
this.#ctx.value?.closeTooltip();
|
|
99
|
+
};
|
|
100
|
+
#handleFocus = () => {
|
|
101
|
+
if (this.#isDisabled)
|
|
102
|
+
return;
|
|
103
|
+
this.#updateTriggerEl();
|
|
104
|
+
this.#ctx.value?.openTooltip();
|
|
105
|
+
};
|
|
106
|
+
#handleBlur = () => {
|
|
72
107
|
this.#ctx.value?.closeTooltip();
|
|
108
|
+
};
|
|
109
|
+
#handleKeyDown = (e) => {
|
|
110
|
+
if (e.key === "Escape" && this.#ctx.value?.open) {
|
|
111
|
+
this.#ctx.value?.closeTooltip();
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
#updateTriggerEl() {
|
|
115
|
+
const trigger = this.shadowRoot?.querySelector('[part="trigger"]') ??
|
|
116
|
+
this;
|
|
117
|
+
this.#ctx.value?.setTriggerEl(trigger);
|
|
73
118
|
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}
|
|
83
|
-
render() {
|
|
84
|
-
const isOpen = this.#ctx.value?.open ?? false;
|
|
85
|
-
const popupId = this.#ctx.value?.popupId ?? "";
|
|
86
|
-
const triggerId = this.#ctx.value?.triggerId ?? "";
|
|
87
|
-
return html `
|
|
119
|
+
get #isDisabled() {
|
|
120
|
+
return this.disabled || (this.#ctx.value?.disabled ?? false);
|
|
121
|
+
}
|
|
122
|
+
render() {
|
|
123
|
+
const isOpen = this.#ctx.value?.open ?? false;
|
|
124
|
+
const popupId = this.#ctx.value?.popupId ?? "";
|
|
125
|
+
const triggerId = this.#ctx.value?.triggerId ?? "";
|
|
126
|
+
return html `
|
|
88
127
|
<span
|
|
89
128
|
class="Trigger"
|
|
90
129
|
part="trigger"
|
|
@@ -103,8 +142,7 @@ export class DuiTooltipTrigger extends LitElement {
|
|
|
103
142
|
<slot></slot>
|
|
104
143
|
</span>
|
|
105
144
|
`;
|
|
106
|
-
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
], DuiTooltipTrigger.prototype, "disabled", null);
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
})();
|
|
148
|
+
export { DuiTooltipTrigger };
|
package/tooltip/tooltip.js
CHANGED
|
@@ -1,9 +1,41 @@
|
|
|
1
1
|
/** Ported from original DUI: deep-future-app/app/client/components/dui/tooltip */
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
|
|
3
|
+
function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
|
|
4
|
+
var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
|
|
5
|
+
var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
|
|
6
|
+
var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
|
|
7
|
+
var _, done = false;
|
|
8
|
+
for (var i = decorators.length - 1; i >= 0; i--) {
|
|
9
|
+
var context = {};
|
|
10
|
+
for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
|
|
11
|
+
for (var p in contextIn.access) context.access[p] = contextIn.access[p];
|
|
12
|
+
context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
|
|
13
|
+
var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
|
|
14
|
+
if (kind === "accessor") {
|
|
15
|
+
if (result === void 0) continue;
|
|
16
|
+
if (result === null || typeof result !== "object") throw new TypeError("Object expected");
|
|
17
|
+
if (_ = accept(result.get)) descriptor.get = _;
|
|
18
|
+
if (_ = accept(result.set)) descriptor.set = _;
|
|
19
|
+
if (_ = accept(result.init)) initializers.unshift(_);
|
|
20
|
+
}
|
|
21
|
+
else if (_ = accept(result)) {
|
|
22
|
+
if (kind === "field") initializers.unshift(_);
|
|
23
|
+
else descriptor[key] = _;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
if (target) Object.defineProperty(target, contextIn.name, descriptor);
|
|
27
|
+
done = true;
|
|
28
|
+
};
|
|
29
|
+
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
|
|
30
|
+
var useValue = arguments.length > 2;
|
|
31
|
+
for (var i = 0; i < initializers.length; i++) {
|
|
32
|
+
value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
|
|
33
|
+
}
|
|
34
|
+
return useValue ? value : void 0;
|
|
35
|
+
};
|
|
36
|
+
var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
|
|
37
|
+
if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
|
|
38
|
+
return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
|
|
7
39
|
};
|
|
8
40
|
import { css, html, LitElement } from "lit";
|
|
9
41
|
import { property, state } from "lit/decorators.js";
|
|
@@ -23,160 +55,199 @@ const hostStyles = css `
|
|
|
23
55
|
* @slot - Default slot for dui-tooltip-trigger and dui-tooltip-popup.
|
|
24
56
|
* @fires open-change - Dispatched when the tooltip opens or closes.
|
|
25
57
|
*/
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
this.#internalOpen = true;
|
|
58
|
+
let DuiTooltip = (() => {
|
|
59
|
+
let _classSuper = LitElement;
|
|
60
|
+
let _open_decorators;
|
|
61
|
+
let _open_initializers = [];
|
|
62
|
+
let _open_extraInitializers = [];
|
|
63
|
+
let _defaultOpen_decorators;
|
|
64
|
+
let _defaultOpen_initializers = [];
|
|
65
|
+
let _defaultOpen_extraInitializers = [];
|
|
66
|
+
let _side_decorators;
|
|
67
|
+
let _side_initializers = [];
|
|
68
|
+
let _side_extraInitializers = [];
|
|
69
|
+
let _sideOffset_decorators;
|
|
70
|
+
let _sideOffset_initializers = [];
|
|
71
|
+
let _sideOffset_extraInitializers = [];
|
|
72
|
+
let _delay_decorators;
|
|
73
|
+
let _delay_initializers = [];
|
|
74
|
+
let _delay_extraInitializers = [];
|
|
75
|
+
let _closeDelay_decorators;
|
|
76
|
+
let _closeDelay_initializers = [];
|
|
77
|
+
let _closeDelay_extraInitializers = [];
|
|
78
|
+
let _disabled_decorators;
|
|
79
|
+
let _disabled_initializers = [];
|
|
80
|
+
let _disabled_extraInitializers = [];
|
|
81
|
+
let _private_internalOpen_decorators;
|
|
82
|
+
let _private_internalOpen_initializers = [];
|
|
83
|
+
let _private_internalOpen_extraInitializers = [];
|
|
84
|
+
let _private_internalOpen_descriptor;
|
|
85
|
+
let _private_triggerEl_decorators;
|
|
86
|
+
let _private_triggerEl_initializers = [];
|
|
87
|
+
let _private_triggerEl_extraInitializers = [];
|
|
88
|
+
let _private_triggerEl_descriptor;
|
|
89
|
+
let __ctx_decorators;
|
|
90
|
+
let __ctx_initializers = [];
|
|
91
|
+
let __ctx_extraInitializers = [];
|
|
92
|
+
return class DuiTooltip extends _classSuper {
|
|
93
|
+
static {
|
|
94
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
95
|
+
_open_decorators = [property({ type: Boolean, reflect: true })];
|
|
96
|
+
_defaultOpen_decorators = [property({ type: Boolean, attribute: "default-open" })];
|
|
97
|
+
_side_decorators = [property({ reflect: true })];
|
|
98
|
+
_sideOffset_decorators = [property({ type: Number, attribute: "side-offset" })];
|
|
99
|
+
_delay_decorators = [property({ type: Number })];
|
|
100
|
+
_closeDelay_decorators = [property({ type: Number, attribute: "close-delay" })];
|
|
101
|
+
_disabled_decorators = [property({ type: Boolean, reflect: true })];
|
|
102
|
+
_private_internalOpen_decorators = [state()];
|
|
103
|
+
_private_triggerEl_decorators = [state()];
|
|
104
|
+
__ctx_decorators = [provide({ context: tooltipContext }), state()];
|
|
105
|
+
__esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
|
|
106
|
+
__esDecorate(this, null, _defaultOpen_decorators, { kind: "accessor", name: "defaultOpen", static: false, private: false, access: { has: obj => "defaultOpen" in obj, get: obj => obj.defaultOpen, set: (obj, value) => { obj.defaultOpen = value; } }, metadata: _metadata }, _defaultOpen_initializers, _defaultOpen_extraInitializers);
|
|
107
|
+
__esDecorate(this, null, _side_decorators, { kind: "accessor", name: "side", static: false, private: false, access: { has: obj => "side" in obj, get: obj => obj.side, set: (obj, value) => { obj.side = value; } }, metadata: _metadata }, _side_initializers, _side_extraInitializers);
|
|
108
|
+
__esDecorate(this, null, _sideOffset_decorators, { kind: "accessor", name: "sideOffset", static: false, private: false, access: { has: obj => "sideOffset" in obj, get: obj => obj.sideOffset, set: (obj, value) => { obj.sideOffset = value; } }, metadata: _metadata }, _sideOffset_initializers, _sideOffset_extraInitializers);
|
|
109
|
+
__esDecorate(this, null, _delay_decorators, { kind: "accessor", name: "delay", static: false, private: false, access: { has: obj => "delay" in obj, get: obj => obj.delay, set: (obj, value) => { obj.delay = value; } }, metadata: _metadata }, _delay_initializers, _delay_extraInitializers);
|
|
110
|
+
__esDecorate(this, null, _closeDelay_decorators, { kind: "accessor", name: "closeDelay", static: false, private: false, access: { has: obj => "closeDelay" in obj, get: obj => obj.closeDelay, set: (obj, value) => { obj.closeDelay = value; } }, metadata: _metadata }, _closeDelay_initializers, _closeDelay_extraInitializers);
|
|
111
|
+
__esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
|
|
112
|
+
__esDecorate(this, _private_internalOpen_descriptor = { get: __setFunctionName(function () { return this.#internalOpen_accessor_storage; }, "#internalOpen", "get"), set: __setFunctionName(function (value) { this.#internalOpen_accessor_storage = value; }, "#internalOpen", "set") }, _private_internalOpen_decorators, { kind: "accessor", name: "#internalOpen", static: false, private: true, access: { has: obj => #internalOpen in obj, get: obj => obj.#internalOpen, set: (obj, value) => { obj.#internalOpen = value; } }, metadata: _metadata }, _private_internalOpen_initializers, _private_internalOpen_extraInitializers);
|
|
113
|
+
__esDecorate(this, _private_triggerEl_descriptor = { get: __setFunctionName(function () { return this.#triggerEl_accessor_storage; }, "#triggerEl", "get"), set: __setFunctionName(function (value) { this.#triggerEl_accessor_storage = value; }, "#triggerEl", "set") }, _private_triggerEl_decorators, { kind: "accessor", name: "#triggerEl", static: false, private: true, access: { has: obj => #triggerEl in obj, get: obj => obj.#triggerEl, set: (obj, value) => { obj.#triggerEl = value; } }, metadata: _metadata }, _private_triggerEl_initializers, _private_triggerEl_extraInitializers);
|
|
114
|
+
__esDecorate(this, null, __ctx_decorators, { kind: "accessor", name: "_ctx", static: false, private: false, access: { has: obj => "_ctx" in obj, get: obj => obj._ctx, set: (obj, value) => { obj._ctx = value; } }, metadata: _metadata }, __ctx_initializers, __ctx_extraInitializers);
|
|
115
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
85
116
|
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
117
|
+
static tagName = "dui-tooltip";
|
|
118
|
+
static styles = [base, hostStyles];
|
|
119
|
+
#open_accessor_storage = __runInitializers(this, _open_initializers, false);
|
|
120
|
+
/** Controlled open state. */
|
|
121
|
+
get open() { return this.#open_accessor_storage; }
|
|
122
|
+
set open(value) { this.#open_accessor_storage = value; }
|
|
123
|
+
#defaultOpen_accessor_storage = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _defaultOpen_initializers, false));
|
|
124
|
+
/** Default open state for uncontrolled usage. */
|
|
125
|
+
get defaultOpen() { return this.#defaultOpen_accessor_storage; }
|
|
126
|
+
set defaultOpen(value) { this.#defaultOpen_accessor_storage = value; }
|
|
127
|
+
#side_accessor_storage = (__runInitializers(this, _defaultOpen_extraInitializers), __runInitializers(this, _side_initializers, "top"));
|
|
128
|
+
/** Which side of the trigger the tooltip appears on. */
|
|
129
|
+
get side() { return this.#side_accessor_storage; }
|
|
130
|
+
set side(value) { this.#side_accessor_storage = value; }
|
|
131
|
+
#sideOffset_accessor_storage = (__runInitializers(this, _side_extraInitializers), __runInitializers(this, _sideOffset_initializers, 6));
|
|
132
|
+
/** Offset from the trigger in pixels. */
|
|
133
|
+
get sideOffset() { return this.#sideOffset_accessor_storage; }
|
|
134
|
+
set sideOffset(value) { this.#sideOffset_accessor_storage = value; }
|
|
135
|
+
#delay_accessor_storage = (__runInitializers(this, _sideOffset_extraInitializers), __runInitializers(this, _delay_initializers, 500));
|
|
136
|
+
/** Delay before opening in milliseconds. */
|
|
137
|
+
get delay() { return this.#delay_accessor_storage; }
|
|
138
|
+
set delay(value) { this.#delay_accessor_storage = value; }
|
|
139
|
+
#closeDelay_accessor_storage = (__runInitializers(this, _delay_extraInitializers), __runInitializers(this, _closeDelay_initializers, 0));
|
|
140
|
+
/** Delay before closing in milliseconds. */
|
|
141
|
+
get closeDelay() { return this.#closeDelay_accessor_storage; }
|
|
142
|
+
set closeDelay(value) { this.#closeDelay_accessor_storage = value; }
|
|
143
|
+
#disabled_accessor_storage = (__runInitializers(this, _closeDelay_extraInitializers), __runInitializers(this, _disabled_initializers, false));
|
|
144
|
+
/** Disable the tooltip. */
|
|
145
|
+
get disabled() { return this.#disabled_accessor_storage; }
|
|
146
|
+
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
147
|
+
#internalOpen_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _private_internalOpen_initializers, false));
|
|
148
|
+
get #internalOpen() { return _private_internalOpen_descriptor.get.call(this); }
|
|
149
|
+
set #internalOpen(value) { return _private_internalOpen_descriptor.set.call(this, value); }
|
|
150
|
+
#triggerEl_accessor_storage = (__runInitializers(this, _private_internalOpen_extraInitializers), __runInitializers(this, _private_triggerEl_initializers, void 0));
|
|
151
|
+
get #triggerEl() { return _private_triggerEl_descriptor.get.call(this); }
|
|
152
|
+
set #triggerEl(value) { return _private_triggerEl_descriptor.set.call(this, value); }
|
|
153
|
+
#openTimeout = __runInitializers(this, _private_triggerEl_extraInitializers);
|
|
154
|
+
#closeTimeout;
|
|
155
|
+
#triggerId = `tooltip-trigger-${crypto.randomUUID().slice(0, 8)}`;
|
|
156
|
+
#popupId = `tooltip-popup-${crypto.randomUUID().slice(0, 8)}`;
|
|
157
|
+
#_ctx_accessor_storage = __runInitializers(this, __ctx_initializers, {
|
|
158
|
+
open: false,
|
|
159
|
+
triggerId: this.#triggerId,
|
|
160
|
+
popupId: this.#popupId,
|
|
161
|
+
side: "top",
|
|
162
|
+
sideOffset: 6,
|
|
163
|
+
disabled: false,
|
|
164
|
+
triggerEl: undefined,
|
|
165
|
+
openTooltip: () => this.#scheduleOpen(),
|
|
166
|
+
closeTooltip: () => this.#scheduleClose(),
|
|
167
|
+
setTriggerEl: (el) => this.#setTriggerEl(el),
|
|
168
|
+
});
|
|
169
|
+
get _ctx() { return this.#_ctx_accessor_storage; }
|
|
170
|
+
set _ctx(value) { this.#_ctx_accessor_storage = value; }
|
|
171
|
+
connectedCallback() {
|
|
172
|
+
super.connectedCallback();
|
|
173
|
+
if (this.defaultOpen && !this.disabled) {
|
|
174
|
+
this.#internalOpen = true;
|
|
175
|
+
}
|
|
107
176
|
}
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
clearTimeout(this.#openTimeout);
|
|
112
|
-
this.#openTimeout = undefined;
|
|
177
|
+
disconnectedCallback() {
|
|
178
|
+
super.disconnectedCallback();
|
|
179
|
+
this.#clearTimeouts();
|
|
113
180
|
}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
181
|
+
willUpdate(changed) {
|
|
182
|
+
const isOpen = this.open || this.#internalOpen;
|
|
183
|
+
if (changed.has("open") ||
|
|
184
|
+
changed.has("side") ||
|
|
185
|
+
changed.has("sideOffset") ||
|
|
186
|
+
changed.has("disabled") ||
|
|
187
|
+
this._ctx.open !== isOpen ||
|
|
188
|
+
this._ctx.triggerEl !== this.#triggerEl) {
|
|
189
|
+
this._ctx = {
|
|
190
|
+
...this._ctx,
|
|
191
|
+
open: isOpen,
|
|
192
|
+
side: this.side,
|
|
193
|
+
sideOffset: this.sideOffset,
|
|
194
|
+
disabled: this.disabled,
|
|
195
|
+
triggerEl: this.#triggerEl,
|
|
196
|
+
};
|
|
197
|
+
}
|
|
117
198
|
}
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
199
|
+
#clearTimeouts() {
|
|
200
|
+
if (this.#openTimeout) {
|
|
201
|
+
clearTimeout(this.#openTimeout);
|
|
202
|
+
this.#openTimeout = undefined;
|
|
203
|
+
}
|
|
204
|
+
if (this.#closeTimeout) {
|
|
205
|
+
clearTimeout(this.#closeTimeout);
|
|
206
|
+
this.#closeTimeout = undefined;
|
|
207
|
+
}
|
|
125
208
|
}
|
|
126
|
-
|
|
127
|
-
|
|
209
|
+
#scheduleOpen() {
|
|
210
|
+
if (this.disabled)
|
|
211
|
+
return;
|
|
212
|
+
this.#clearTimeouts();
|
|
213
|
+
if (this.delay <= 0) {
|
|
214
|
+
this.#doOpen();
|
|
215
|
+
}
|
|
216
|
+
else {
|
|
217
|
+
this.#openTimeout = setTimeout(() => this.#doOpen(), this.delay);
|
|
218
|
+
}
|
|
128
219
|
}
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
220
|
+
#scheduleClose() {
|
|
221
|
+
this.#clearTimeouts();
|
|
222
|
+
if (this.closeDelay <= 0) {
|
|
223
|
+
this.#doClose();
|
|
224
|
+
}
|
|
225
|
+
else {
|
|
226
|
+
this.#closeTimeout = setTimeout(() => this.#doClose(), this.closeDelay);
|
|
227
|
+
}
|
|
134
228
|
}
|
|
135
|
-
|
|
136
|
-
|
|
229
|
+
#doOpen() {
|
|
230
|
+
if (this.#internalOpen)
|
|
231
|
+
return;
|
|
232
|
+
this.#internalOpen = true;
|
|
233
|
+
this.dispatchEvent(openChangeEvent({ open: true }));
|
|
137
234
|
}
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
}
|
|
158
|
-
__decorate([
|
|
159
|
-
property({ type: Boolean, reflect: true })
|
|
160
|
-
], DuiTooltip.prototype, "open", null);
|
|
161
|
-
__decorate([
|
|
162
|
-
property({ type: Boolean, attribute: "default-open" })
|
|
163
|
-
], DuiTooltip.prototype, "defaultOpen", null);
|
|
164
|
-
__decorate([
|
|
165
|
-
property({ reflect: true })
|
|
166
|
-
], DuiTooltip.prototype, "side", null);
|
|
167
|
-
__decorate([
|
|
168
|
-
property({ type: Number, attribute: "side-offset" })
|
|
169
|
-
], DuiTooltip.prototype, "sideOffset", null);
|
|
170
|
-
__decorate([
|
|
171
|
-
property({ type: Number })
|
|
172
|
-
], DuiTooltip.prototype, "delay", null);
|
|
173
|
-
__decorate([
|
|
174
|
-
property({ type: Number, attribute: "close-delay" })
|
|
175
|
-
], DuiTooltip.prototype, "closeDelay", null);
|
|
176
|
-
__decorate([
|
|
177
|
-
property({ type: Boolean, reflect: true })
|
|
178
|
-
], DuiTooltip.prototype, "disabled", null);
|
|
179
|
-
__decorate([
|
|
180
|
-
provide({ context: tooltipContext }),
|
|
181
|
-
state()
|
|
182
|
-
], DuiTooltip.prototype, "_ctx", null);
|
|
235
|
+
#doClose() {
|
|
236
|
+
if (!this.#internalOpen)
|
|
237
|
+
return;
|
|
238
|
+
this.#internalOpen = false;
|
|
239
|
+
this.dispatchEvent(openChangeEvent({ open: false }));
|
|
240
|
+
}
|
|
241
|
+
#setTriggerEl(el) {
|
|
242
|
+
this.#triggerEl = el;
|
|
243
|
+
}
|
|
244
|
+
render() {
|
|
245
|
+
return html `<slot></slot>`;
|
|
246
|
+
}
|
|
247
|
+
constructor() {
|
|
248
|
+
super(...arguments);
|
|
249
|
+
__runInitializers(this, __ctx_extraInitializers);
|
|
250
|
+
}
|
|
251
|
+
};
|
|
252
|
+
})();
|
|
253
|
+
export { DuiTooltip };
|