@deepfuture/dui-components 0.0.12 → 0.0.13
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 -2
- 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
package/popover/popover-popup.js
CHANGED
|
@@ -1,12 +1,44 @@
|
|
|
1
1
|
/** Ported from original DUI: deep-future-app/app/client/components/dui/popover */
|
|
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
|
-
import { property } from "lit/decorators.js";
|
|
41
|
+
import { property, state } from "lit/decorators.js";
|
|
10
42
|
import { ContextConsumer } from "@lit/context";
|
|
11
43
|
import { base } from "@deepfuture/dui-core/base";
|
|
12
44
|
import { popoverContext } from "./popover-context.js";
|
|
@@ -67,41 +99,63 @@ const portalPopupStyles = [
|
|
|
67
99
|
*
|
|
68
100
|
* @slot - Popover content.
|
|
69
101
|
*/
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
styles
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
102
|
+
let DuiPopoverPopup = (() => {
|
|
103
|
+
let _classSuper = LitElement;
|
|
104
|
+
let _showArrow_decorators;
|
|
105
|
+
let _showArrow_initializers = [];
|
|
106
|
+
let _showArrow_extraInitializers = [];
|
|
107
|
+
let _closeOnClick_decorators;
|
|
108
|
+
let _closeOnClick_initializers = [];
|
|
109
|
+
let _closeOnClick_extraInitializers = [];
|
|
110
|
+
let _private_side_decorators;
|
|
111
|
+
let _private_side_initializers = [];
|
|
112
|
+
let _private_side_extraInitializers = [];
|
|
113
|
+
let _private_side_descriptor;
|
|
114
|
+
return class DuiPopoverPopup extends _classSuper {
|
|
115
|
+
static {
|
|
116
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
117
|
+
_showArrow_decorators = [property({ type: Boolean, attribute: "show-arrow" })];
|
|
118
|
+
_closeOnClick_decorators = [property({ type: Boolean, attribute: "close-on-click" })];
|
|
119
|
+
_private_side_decorators = [state()];
|
|
120
|
+
__esDecorate(this, null, _showArrow_decorators, { kind: "accessor", name: "showArrow", static: false, private: false, access: { has: obj => "showArrow" in obj, get: obj => obj.showArrow, set: (obj, value) => { obj.showArrow = value; } }, metadata: _metadata }, _showArrow_initializers, _showArrow_extraInitializers);
|
|
121
|
+
__esDecorate(this, null, _closeOnClick_decorators, { kind: "accessor", name: "closeOnClick", static: false, private: false, access: { has: obj => "closeOnClick" in obj, get: obj => obj.closeOnClick, set: (obj, value) => { obj.closeOnClick = value; } }, metadata: _metadata }, _closeOnClick_initializers, _closeOnClick_extraInitializers);
|
|
122
|
+
__esDecorate(this, _private_side_descriptor = { get: __setFunctionName(function () { return this.#side_accessor_storage; }, "#side", "get"), set: __setFunctionName(function (value) { this.#side_accessor_storage = value; }, "#side", "set") }, _private_side_decorators, { kind: "accessor", name: "#side", static: false, private: true, access: { has: obj => #side in obj, get: obj => obj.#side, set: (obj, value) => { obj.#side = value; } }, metadata: _metadata }, _private_side_initializers, _private_side_extraInitializers);
|
|
123
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
124
|
+
}
|
|
125
|
+
static tagName = "dui-popover-popup";
|
|
126
|
+
static styles = [base, hostStyles];
|
|
127
|
+
#showArrow_accessor_storage = __runInitializers(this, _showArrow_initializers, true);
|
|
128
|
+
/** Whether to show an arrow pointing to the trigger. */
|
|
129
|
+
get showArrow() { return this.#showArrow_accessor_storage; }
|
|
130
|
+
set showArrow(value) { this.#showArrow_accessor_storage = value; }
|
|
131
|
+
#closeOnClick_accessor_storage = (__runInitializers(this, _showArrow_extraInitializers), __runInitializers(this, _closeOnClick_initializers, false));
|
|
132
|
+
/** Close the popover when content inside the popup is clicked. */
|
|
133
|
+
get closeOnClick() { return this.#closeOnClick_accessor_storage; }
|
|
134
|
+
set closeOnClick(value) { this.#closeOnClick_accessor_storage = value; }
|
|
135
|
+
#side_accessor_storage = (__runInitializers(this, _closeOnClick_extraInitializers), __runInitializers(this, _private_side_initializers, "bottom"));
|
|
136
|
+
get #side() { return _private_side_descriptor.get.call(this); }
|
|
137
|
+
set #side(value) { return _private_side_descriptor.set.call(this, value); }
|
|
138
|
+
#ctx = (__runInitializers(this, _private_side_extraInitializers), new ContextConsumer(this, {
|
|
139
|
+
context: popoverContext,
|
|
140
|
+
subscribe: true,
|
|
141
|
+
}));
|
|
142
|
+
#wasOpen = false;
|
|
143
|
+
#portal = new FloatingPortalController(this, {
|
|
144
|
+
getAnchor: () => this.#ctx.value?.triggerEl,
|
|
145
|
+
matchWidth: false,
|
|
146
|
+
placement: "bottom",
|
|
147
|
+
offset: 8,
|
|
148
|
+
styles: portalPopupStyles,
|
|
149
|
+
contentContainer: ".Content",
|
|
150
|
+
onPosition: ({ placement }) => {
|
|
151
|
+
const actualSide = placement.split("-")[0];
|
|
152
|
+
if (actualSide !== this.#side) {
|
|
153
|
+
this.#side = actualSide;
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
renderPopup: (portal) => {
|
|
157
|
+
const popupId = this.#ctx.value?.popupId ?? "";
|
|
158
|
+
return html `
|
|
105
159
|
<div
|
|
106
160
|
class="Popup"
|
|
107
161
|
id="${popupId}"
|
|
@@ -115,41 +169,37 @@ export class DuiPopoverPopup extends LitElement {
|
|
|
115
169
|
${this.showArrow ? renderArrow(this.#side) : ""}
|
|
116
170
|
</div>
|
|
117
171
|
`;
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
}
|
|
125
|
-
#handleContentClick = () => {
|
|
126
|
-
if (this.closeOnClick) {
|
|
127
|
-
this.#ctx.value?.closePopover();
|
|
172
|
+
},
|
|
173
|
+
});
|
|
174
|
+
/** Check if an event path includes this popup's portal positioner. */
|
|
175
|
+
containsEventTarget(path) {
|
|
176
|
+
const positioner = this.#portal.positionerElement;
|
|
177
|
+
return positioner !== null && path.includes(positioner);
|
|
128
178
|
}
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
179
|
+
#handleContentClick = () => {
|
|
180
|
+
if (this.closeOnClick) {
|
|
181
|
+
this.#ctx.value?.closePopover();
|
|
182
|
+
}
|
|
183
|
+
};
|
|
184
|
+
updated() {
|
|
185
|
+
const isOpen = this.#ctx.value?.open ?? false;
|
|
186
|
+
if (isOpen && !this.#wasOpen) {
|
|
187
|
+
this.#updatePlacement();
|
|
188
|
+
this.#portal.open();
|
|
189
|
+
}
|
|
190
|
+
else if (!isOpen && this.#wasOpen) {
|
|
191
|
+
this.#portal.close();
|
|
192
|
+
}
|
|
193
|
+
this.#wasOpen = isOpen;
|
|
135
194
|
}
|
|
136
|
-
|
|
137
|
-
this.#
|
|
195
|
+
#updatePlacement() {
|
|
196
|
+
const side = this.#ctx.value?.side ?? "bottom";
|
|
197
|
+
this.#portal.placement = side;
|
|
198
|
+
this.#portal.offset = this.#ctx.value?.sideOffset ?? 8;
|
|
138
199
|
}
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
}
|
|
146
|
-
render() {
|
|
147
|
-
return html `<slot></slot>`;
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
__decorate([
|
|
151
|
-
property({ type: Boolean, attribute: "show-arrow" })
|
|
152
|
-
], DuiPopoverPopup.prototype, "showArrow", null);
|
|
153
|
-
__decorate([
|
|
154
|
-
property({ type: Boolean, attribute: "close-on-click" })
|
|
155
|
-
], DuiPopoverPopup.prototype, "closeOnClick", null);
|
|
200
|
+
render() {
|
|
201
|
+
return html `<slot></slot>`;
|
|
202
|
+
}
|
|
203
|
+
};
|
|
204
|
+
})();
|
|
205
|
+
export { DuiPopoverPopup };
|
|
@@ -19,8 +19,8 @@ const componentStyles = css `
|
|
|
19
19
|
* @slot - Content that triggers the popover (usually a button).
|
|
20
20
|
*/
|
|
21
21
|
export class DuiPopoverTrigger extends LitElement {
|
|
22
|
-
static
|
|
23
|
-
static
|
|
22
|
+
static tagName = "dui-popover-trigger";
|
|
23
|
+
static styles = [base, hostStyles, componentStyles];
|
|
24
24
|
#ctx = new ContextConsumer(this, {
|
|
25
25
|
context: popoverContext,
|
|
26
26
|
subscribe: true,
|
package/popover/popover.js
CHANGED
|
@@ -1,9 +1,41 @@
|
|
|
1
1
|
/** Ported from original DUI: deep-future-app/app/client/components/dui/popover */
|
|
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,124 +55,153 @@ const hostStyles = css `
|
|
|
23
55
|
* @slot - Default slot for dui-popover-trigger and dui-popover-popup.
|
|
24
56
|
* @fires open-change - Dispatched when the popover 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
|
-
|
|
58
|
+
let DuiPopover = (() => {
|
|
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 _private_internalOpen_decorators;
|
|
73
|
+
let _private_internalOpen_initializers = [];
|
|
74
|
+
let _private_internalOpen_extraInitializers = [];
|
|
75
|
+
let _private_internalOpen_descriptor;
|
|
76
|
+
let _private_triggerEl_decorators;
|
|
77
|
+
let _private_triggerEl_initializers = [];
|
|
78
|
+
let _private_triggerEl_extraInitializers = [];
|
|
79
|
+
let _private_triggerEl_descriptor;
|
|
80
|
+
let __ctx_decorators;
|
|
81
|
+
let __ctx_initializers = [];
|
|
82
|
+
let __ctx_extraInitializers = [];
|
|
83
|
+
return class DuiPopover extends _classSuper {
|
|
84
|
+
static {
|
|
85
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
86
|
+
_open_decorators = [property({ type: Boolean, reflect: true })];
|
|
87
|
+
_defaultOpen_decorators = [property({ type: Boolean, attribute: "default-open" })];
|
|
88
|
+
_side_decorators = [property({ reflect: true })];
|
|
89
|
+
_sideOffset_decorators = [property({ type: Number, attribute: "side-offset" })];
|
|
90
|
+
_private_internalOpen_decorators = [state()];
|
|
91
|
+
_private_triggerEl_decorators = [state()];
|
|
92
|
+
__ctx_decorators = [provide({ context: popoverContext }), state()];
|
|
93
|
+
__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);
|
|
94
|
+
__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);
|
|
95
|
+
__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);
|
|
96
|
+
__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);
|
|
97
|
+
__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);
|
|
98
|
+
__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);
|
|
99
|
+
__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);
|
|
100
|
+
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
101
|
+
}
|
|
102
|
+
static tagName = "dui-popover";
|
|
103
|
+
static styles = [base, hostStyles];
|
|
104
|
+
#open_accessor_storage = __runInitializers(this, _open_initializers, false);
|
|
105
|
+
/** Controlled open state. */
|
|
106
|
+
get open() { return this.#open_accessor_storage; }
|
|
107
|
+
set open(value) { this.#open_accessor_storage = value; }
|
|
108
|
+
#defaultOpen_accessor_storage = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _defaultOpen_initializers, false));
|
|
109
|
+
/** Default open state for uncontrolled usage. */
|
|
110
|
+
get defaultOpen() { return this.#defaultOpen_accessor_storage; }
|
|
111
|
+
set defaultOpen(value) { this.#defaultOpen_accessor_storage = value; }
|
|
112
|
+
#side_accessor_storage = (__runInitializers(this, _defaultOpen_extraInitializers), __runInitializers(this, _side_initializers, "bottom"));
|
|
113
|
+
/** Which side of the trigger the popover appears on. */
|
|
114
|
+
get side() { return this.#side_accessor_storage; }
|
|
115
|
+
set side(value) { this.#side_accessor_storage = value; }
|
|
116
|
+
#sideOffset_accessor_storage = (__runInitializers(this, _side_extraInitializers), __runInitializers(this, _sideOffset_initializers, 8));
|
|
117
|
+
/** Offset from the trigger in pixels. */
|
|
118
|
+
get sideOffset() { return this.#sideOffset_accessor_storage; }
|
|
119
|
+
set sideOffset(value) { this.#sideOffset_accessor_storage = value; }
|
|
120
|
+
#internalOpen_accessor_storage = (__runInitializers(this, _sideOffset_extraInitializers), __runInitializers(this, _private_internalOpen_initializers, false));
|
|
121
|
+
get #internalOpen() { return _private_internalOpen_descriptor.get.call(this); }
|
|
122
|
+
set #internalOpen(value) { return _private_internalOpen_descriptor.set.call(this, value); }
|
|
123
|
+
#triggerEl_accessor_storage = (__runInitializers(this, _private_internalOpen_extraInitializers), __runInitializers(this, _private_triggerEl_initializers, void 0));
|
|
124
|
+
get #triggerEl() { return _private_triggerEl_descriptor.get.call(this); }
|
|
125
|
+
set #triggerEl(value) { return _private_triggerEl_descriptor.set.call(this, value); }
|
|
126
|
+
get #isOpen() {
|
|
127
|
+
return this.open || this.#internalOpen;
|
|
128
|
+
}
|
|
129
|
+
#triggerId = (__runInitializers(this, _private_triggerEl_extraInitializers), `popover-trigger-${crypto.randomUUID().slice(0, 8)}`);
|
|
130
|
+
#popupId = `popover-popup-${crypto.randomUUID().slice(0, 8)}`;
|
|
131
|
+
#_ctx_accessor_storage = __runInitializers(this, __ctx_initializers, {
|
|
132
|
+
open: false,
|
|
133
|
+
triggerId: this.#triggerId,
|
|
134
|
+
popupId: this.#popupId,
|
|
135
|
+
side: "bottom",
|
|
136
|
+
sideOffset: 8,
|
|
137
|
+
triggerEl: undefined,
|
|
138
|
+
openPopover: () => this.#doOpen(),
|
|
139
|
+
closePopover: () => this.#doClose(),
|
|
140
|
+
togglePopover: () => this.#doToggle(),
|
|
141
|
+
setTriggerEl: (el) => this.#setTriggerEl(el),
|
|
142
|
+
});
|
|
143
|
+
get _ctx() { return this.#_ctx_accessor_storage; }
|
|
144
|
+
set _ctx(value) { this.#_ctx_accessor_storage = value; }
|
|
145
|
+
connectedCallback() {
|
|
146
|
+
super.connectedCallback();
|
|
147
|
+
if (this.defaultOpen) {
|
|
148
|
+
this.#internalOpen = true;
|
|
149
|
+
}
|
|
150
|
+
document.addEventListener("keydown", this.#onDocumentKeyDown);
|
|
151
|
+
}
|
|
152
|
+
disconnectedCallback() {
|
|
153
|
+
super.disconnectedCallback();
|
|
154
|
+
document.removeEventListener("keydown", this.#onDocumentKeyDown);
|
|
155
|
+
}
|
|
156
|
+
willUpdate(changed) {
|
|
157
|
+
if (changed.has("open") ||
|
|
158
|
+
changed.has("side") ||
|
|
159
|
+
changed.has("sideOffset") ||
|
|
160
|
+
this._ctx.open !== this.#isOpen ||
|
|
161
|
+
this._ctx.triggerEl !== this.#triggerEl) {
|
|
162
|
+
this._ctx = {
|
|
163
|
+
...this._ctx,
|
|
164
|
+
open: this.#isOpen,
|
|
165
|
+
side: this.side,
|
|
166
|
+
sideOffset: this.sideOffset,
|
|
167
|
+
triggerEl: this.#triggerEl,
|
|
168
|
+
};
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
#onDocumentKeyDown = (__runInitializers(this, __ctx_extraInitializers), (event) => {
|
|
172
|
+
if (!this.#isOpen)
|
|
173
|
+
return;
|
|
174
|
+
if (event.key === "Escape") {
|
|
175
|
+
event.preventDefault();
|
|
176
|
+
this.#doClose();
|
|
177
|
+
}
|
|
178
|
+
});
|
|
179
|
+
#doOpen() {
|
|
180
|
+
if (this.#internalOpen)
|
|
181
|
+
return;
|
|
73
182
|
this.#internalOpen = true;
|
|
183
|
+
this.dispatchEvent(openChangeEvent({ open: true }));
|
|
74
184
|
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}
|
|
81
|
-
willUpdate(changed) {
|
|
82
|
-
if (changed.has("open") ||
|
|
83
|
-
changed.has("side") ||
|
|
84
|
-
changed.has("sideOffset") ||
|
|
85
|
-
this._ctx.open !== this.#isOpen ||
|
|
86
|
-
this._ctx.triggerEl !== this.#triggerEl) {
|
|
87
|
-
this._ctx = {
|
|
88
|
-
...this._ctx,
|
|
89
|
-
open: this.#isOpen,
|
|
90
|
-
side: this.side,
|
|
91
|
-
sideOffset: this.sideOffset,
|
|
92
|
-
triggerEl: this.#triggerEl,
|
|
93
|
-
};
|
|
185
|
+
#doClose() {
|
|
186
|
+
if (!this.#internalOpen)
|
|
187
|
+
return;
|
|
188
|
+
this.#internalOpen = false;
|
|
189
|
+
this.dispatchEvent(openChangeEvent({ open: false }));
|
|
94
190
|
}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
191
|
+
#doToggle() {
|
|
192
|
+
if (this.#isOpen) {
|
|
193
|
+
this.#doClose();
|
|
194
|
+
}
|
|
195
|
+
else {
|
|
196
|
+
this.#doOpen();
|
|
197
|
+
}
|
|
102
198
|
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
if (this.#internalOpen)
|
|
106
|
-
return;
|
|
107
|
-
this.#internalOpen = true;
|
|
108
|
-
this.dispatchEvent(openChangeEvent({ open: true }));
|
|
109
|
-
}
|
|
110
|
-
#doClose() {
|
|
111
|
-
if (!this.#internalOpen)
|
|
112
|
-
return;
|
|
113
|
-
this.#internalOpen = false;
|
|
114
|
-
this.dispatchEvent(openChangeEvent({ open: false }));
|
|
115
|
-
}
|
|
116
|
-
#doToggle() {
|
|
117
|
-
if (this.#isOpen) {
|
|
118
|
-
this.#doClose();
|
|
199
|
+
#setTriggerEl(el) {
|
|
200
|
+
this.#triggerEl = el;
|
|
119
201
|
}
|
|
120
|
-
|
|
121
|
-
|
|
202
|
+
render() {
|
|
203
|
+
return html `<slot></slot>`;
|
|
122
204
|
}
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
}
|
|
127
|
-
render() {
|
|
128
|
-
return html `<slot></slot>`;
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
__decorate([
|
|
132
|
-
property({ type: Boolean, reflect: true })
|
|
133
|
-
], DuiPopover.prototype, "open", null);
|
|
134
|
-
__decorate([
|
|
135
|
-
property({ type: Boolean, attribute: "default-open" })
|
|
136
|
-
], DuiPopover.prototype, "defaultOpen", null);
|
|
137
|
-
__decorate([
|
|
138
|
-
property({ reflect: true })
|
|
139
|
-
], DuiPopover.prototype, "side", null);
|
|
140
|
-
__decorate([
|
|
141
|
-
property({ type: Number, attribute: "side-offset" })
|
|
142
|
-
], DuiPopover.prototype, "sideOffset", null);
|
|
143
|
-
__decorate([
|
|
144
|
-
provide({ context: popoverContext }),
|
|
145
|
-
state()
|
|
146
|
-
], DuiPopover.prototype, "_ctx", null);
|
|
205
|
+
};
|
|
206
|
+
})();
|
|
207
|
+
export { DuiPopover };
|