wj-elements 0.7.7 → 0.8.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/dist/animations.js +28 -51
- package/dist/animations.js.map +1 -1
- package/dist/base-path.js +19 -31
- package/dist/base-path.js.map +1 -1
- package/dist/custom-elements.json +11504 -11499
- package/dist/dark.css +1 -302
- package/dist/date.js +16 -36
- package/dist/date.js.map +1 -1
- package/dist/element-utils.js +20 -81
- package/dist/element-utils.js.map +1 -1
- package/dist/event.js +49 -165
- package/dist/event.js.map +1 -1
- package/dist/form-associated-element-BjeJn7j8.js +101 -0
- package/dist/{form-associated-element-DEQ4y-jn.js.map → form-associated-element-BjeJn7j8.js.map} +1 -1
- package/dist/icon-DmsqtDpL.js +102 -0
- package/dist/{icon-CReYMzAK.js.map → icon-DmsqtDpL.js.map} +1 -1
- package/dist/light.css +1 -731
- package/dist/localize.js +36 -111
- package/dist/localize.js.map +1 -1
- package/dist/packages/wje-accordion-item/accordion-item.element.d.ts +3 -2
- package/dist/permissions.js +14 -41
- package/dist/permissions.js.map +1 -1
- package/dist/popup.element-CbkhthPP.js +806 -0
- package/dist/{popup.element-CwXvVFK7.js.map → popup.element-CbkhthPP.js.map} +1 -1
- package/dist/router-links-CNsJ-elb.js +105 -0
- package/dist/{router-links-wjqCnncc.js.map → router-links-CNsJ-elb.js.map} +1 -1
- package/dist/skeleton.css +1 -197
- package/dist/styles.css +1 -866
- package/dist/universal-service.js +48 -109
- package/dist/universal-service.js.map +1 -1
- package/dist/utils.js +11 -18
- package/dist/utils.js.map +1 -1
- package/dist/web-types.json +760 -760
- package/dist/wje-accordion-item.js +33 -106
- package/dist/wje-accordion-item.js.map +1 -1
- package/dist/wje-accordion.js +19 -84
- package/dist/wje-accordion.js.map +1 -1
- package/dist/wje-animation.js +37 -4258
- package/dist/wje-animation.js.map +1 -1
- package/dist/wje-aside.js +9 -34
- package/dist/wje-aside.js.map +1 -1
- package/dist/wje-avatar.js +36 -126
- package/dist/wje-avatar.js.map +1 -1
- package/dist/wje-badge.js +10 -52
- package/dist/wje-badge.js.map +1 -1
- package/dist/wje-breadcrumb.js +205 -672
- package/dist/wje-breadcrumb.js.map +1 -1
- package/dist/wje-breadcrumbs.js +177 -633
- package/dist/wje-breadcrumbs.js.map +1 -1
- package/dist/wje-button-group.js +48 -153
- package/dist/wje-button-group.js.map +1 -1
- package/dist/wje-button.js +92 -413
- package/dist/wje-button.js.map +1 -1
- package/dist/wje-card-content.js +7 -30
- package/dist/wje-card-content.js.map +1 -1
- package/dist/wje-card-controls.js +7 -30
- package/dist/wje-card-controls.js.map +1 -1
- package/dist/wje-card-header.js +7 -30
- package/dist/wje-card-header.js.map +1 -1
- package/dist/wje-card-subtitle.js +7 -34
- package/dist/wje-card-subtitle.js.map +1 -1
- package/dist/wje-card-title.js +7 -34
- package/dist/wje-card-title.js.map +1 -1
- package/dist/wje-card.js +15 -71
- package/dist/wje-card.js.map +1 -1
- package/dist/wje-carousel-item.js +12 -56
- package/dist/wje-carousel-item.js.map +1 -1
- package/dist/wje-carousel.js +154 -509
- package/dist/wje-carousel.js.map +1 -1
- package/dist/wje-checkbox.js +50 -227
- package/dist/wje-checkbox.js.map +1 -1
- package/dist/wje-chip.js +43 -160
- package/dist/wje-chip.js.map +1 -1
- package/dist/wje-col.js +7 -20
- package/dist/wje-col.js.map +1 -1
- package/dist/wje-color-picker.js +445 -1464
- package/dist/wje-color-picker.js.map +1 -1
- package/dist/wje-container.js +9 -35
- package/dist/wje-container.js.map +1 -1
- package/dist/wje-copy-button.js +64 -204
- package/dist/wje-copy-button.js.map +1 -1
- package/dist/wje-dialog.js +85 -553
- package/dist/wje-dialog.js.map +1 -1
- package/dist/wje-divider.js +7 -34
- package/dist/wje-divider.js.map +1 -1
- package/dist/wje-dropdown.js +78 -305
- package/dist/wje-dropdown.js.map +1 -1
- package/dist/wje-element.js +191 -700
- package/dist/wje-element.js.map +1 -1
- package/dist/wje-file-upload-item.js +51 -156
- package/dist/wje-file-upload-item.js.map +1 -1
- package/dist/wje-file-upload.js +181 -619
- package/dist/wje-file-upload.js.map +1 -1
- package/dist/wje-footer.js +7 -31
- package/dist/wje-footer.js.map +1 -1
- package/dist/wje-form.js +7 -32
- package/dist/wje-form.js.map +1 -1
- package/dist/wje-format-digital.js +26 -118
- package/dist/wje-format-digital.js.map +1 -1
- package/dist/wje-grid.js +7 -33
- package/dist/wje-grid.js.map +1 -1
- package/dist/wje-header.js +9 -35
- package/dist/wje-header.js.map +1 -1
- package/dist/wje-icon-library.js +12 -18
- package/dist/wje-icon-library.js.map +1 -1
- package/dist/wje-icon-picker.js +65 -320
- package/dist/wje-icon-picker.js.map +1 -1
- package/dist/wje-icon.js +1 -1
- package/dist/wje-img-comparer.js +37 -114
- package/dist/wje-img-comparer.js.map +1 -1
- package/dist/wje-img.js +50 -198
- package/dist/wje-img.js.map +1 -1
- package/dist/wje-infinite-scroll.js +94 -346
- package/dist/wje-infinite-scroll.js.map +1 -1
- package/dist/wje-input-file.js +23 -84
- package/dist/wje-input-file.js.map +1 -1
- package/dist/wje-input.js +78 -392
- package/dist/wje-input.js.map +1 -1
- package/dist/wje-item.js +11 -64
- package/dist/wje-item.js.map +1 -1
- package/dist/wje-kanban.js +124 -401
- package/dist/wje-kanban.js.map +1 -1
- package/dist/wje-label.js +9 -32
- package/dist/wje-label.js.map +1 -1
- package/dist/wje-level-indicator.js +38 -157
- package/dist/wje-level-indicator.js.map +1 -1
- package/dist/wje-list.js +10 -40
- package/dist/wje-list.js.map +1 -1
- package/dist/wje-main.js +7 -31
- package/dist/wje-main.js.map +1 -1
- package/dist/wje-masonry.js +66 -211
- package/dist/wje-masonry.js.map +1 -1
- package/dist/wje-master.js +45 -161
- package/dist/wje-master.js.map +1 -1
- package/dist/wje-menu-button.js +10 -38
- package/dist/wje-menu-button.js.map +1 -1
- package/dist/wje-menu-item.js +127 -577
- package/dist/wje-menu-item.js.map +1 -1
- package/dist/wje-menu-label.js +9 -35
- package/dist/wje-menu-label.js.map +1 -1
- package/dist/wje-menu.js +14 -49
- package/dist/wje-menu.js.map +1 -1
- package/dist/wje-option.js +48 -279
- package/dist/wje-option.js.map +1 -1
- package/dist/wje-options.js +130 -384
- package/dist/wje-options.js.map +1 -1
- package/dist/wje-orgchart-group.js +16 -52
- package/dist/wje-orgchart-group.js.map +1 -1
- package/dist/wje-orgchart-item.js +24 -93
- package/dist/wje-orgchart-item.js.map +1 -1
- package/dist/wje-orgchart.js +18 -68
- package/dist/wje-orgchart.js.map +1 -1
- package/dist/wje-pagination.js +113 -397
- package/dist/wje-pagination.js.map +1 -1
- package/dist/wje-popup.js +3 -3
- package/dist/wje-popup.js.map +1 -1
- package/dist/wje-progress-bar.js +53 -205
- package/dist/wje-progress-bar.js.map +1 -1
- package/dist/wje-qr-code.js +398 -2980
- package/dist/wje-qr-code.js.map +1 -1
- package/dist/wje-radio-group.js +52 -190
- package/dist/wje-radio-group.js.map +1 -1
- package/dist/wje-radio.js +24 -118
- package/dist/wje-radio.js.map +1 -1
- package/dist/wje-rate.js +62 -266
- package/dist/wje-rate.js.map +1 -1
- package/dist/wje-relative-time.js +24 -99
- package/dist/wje-relative-time.js.map +1 -1
- package/dist/wje-reorder-dropzone.js +9 -31
- package/dist/wje-reorder-dropzone.js.map +1 -1
- package/dist/wje-reorder-handle.js +67 -204
- package/dist/wje-reorder-handle.js.map +1 -1
- package/dist/wje-reorder-item.js +14 -44
- package/dist/wje-reorder-item.js.map +1 -1
- package/dist/wje-reorder.js +61 -246
- package/dist/wje-reorder.js.map +1 -1
- package/dist/wje-route.js +6 -24
- package/dist/wje-route.js.map +1 -1
- package/dist/wje-router-link.js +11 -39
- package/dist/wje-router-link.js.map +1 -1
- package/dist/wje-router-outlet.js +76 -172
- package/dist/wje-router-outlet.js.map +1 -1
- package/dist/wje-routerx.js +537 -1331
- package/dist/wje-routerx.js.map +1 -1
- package/dist/wje-row.js +9 -31
- package/dist/wje-row.js.map +1 -1
- package/dist/wje-select.js +326 -1152
- package/dist/wje-select.js.map +1 -1
- package/dist/wje-slider.js +44 -225
- package/dist/wje-slider.js.map +1 -1
- package/dist/wje-sliding-container.js +295 -1319
- package/dist/wje-sliding-container.js.map +1 -1
- package/dist/wje-split-view.js +35 -121
- package/dist/wje-split-view.js.map +1 -1
- package/dist/wje-status.js +14 -45
- package/dist/wje-status.js.map +1 -1
- package/dist/wje-step.js +9 -32
- package/dist/wje-step.js.map +1 -1
- package/dist/wje-stepper.js +109 -357
- package/dist/wje-stepper.js.map +1 -1
- package/dist/wje-store.js +67 -360
- package/dist/wje-store.js.map +1 -1
- package/dist/wje-tab-group.js +85 -314
- package/dist/wje-tab-group.js.map +1 -1
- package/dist/wje-tab-panel.js +7 -28
- package/dist/wje-tab-panel.js.map +1 -1
- package/dist/wje-tab.js +21 -198
- package/dist/wje-tab.js.map +1 -1
- package/dist/wje-textarea.js +64 -264
- package/dist/wje-textarea.js.map +1 -1
- package/dist/wje-thumbnail.js +10 -51
- package/dist/wje-thumbnail.js.map +1 -1
- package/dist/wje-toast.js +127 -632
- package/dist/wje-toast.js.map +1 -1
- package/dist/wje-toggle.js +52 -177
- package/dist/wje-toggle.js.map +1 -1
- package/dist/wje-toolbar-action.js +128 -456
- package/dist/wje-toolbar-action.js.map +1 -1
- package/dist/wje-toolbar.js +75 -270
- package/dist/wje-toolbar.js.map +1 -1
- package/dist/wje-tooltip.js +50 -161
- package/dist/wje-tooltip.js.map +1 -1
- package/dist/wje-tree-item.js +70 -301
- package/dist/wje-tree-item.js.map +1 -1
- package/dist/wje-tree.js +145 -489
- package/dist/wje-tree.js.map +1 -1
- package/dist/wje-visually-hidden.js +7 -34
- package/dist/wje-visually-hidden.js.map +1 -1
- package/package.json +3 -2
- package/dist/form-associated-element-DEQ4y-jn.js +0 -245
- package/dist/icon-CReYMzAK.js +0 -245
- package/dist/popup.element-CwXvVFK7.js +0 -2133
- package/dist/router-links-wjqCnncc.js +0 -156
|
@@ -1,2133 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
-
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
|
-
import WJElement from "./wje-element.js";
|
|
5
|
-
import { event } from "./event.js";
|
|
6
|
-
const min = Math.min;
|
|
7
|
-
const max = Math.max;
|
|
8
|
-
const round = Math.round;
|
|
9
|
-
const floor = Math.floor;
|
|
10
|
-
const createCoords = (v) => ({
|
|
11
|
-
x: v,
|
|
12
|
-
y: v
|
|
13
|
-
});
|
|
14
|
-
const oppositeSideMap = {
|
|
15
|
-
left: "right",
|
|
16
|
-
right: "left",
|
|
17
|
-
bottom: "top",
|
|
18
|
-
top: "bottom"
|
|
19
|
-
};
|
|
20
|
-
const oppositeAlignmentMap = {
|
|
21
|
-
start: "end",
|
|
22
|
-
end: "start"
|
|
23
|
-
};
|
|
24
|
-
function clamp(start, value, end) {
|
|
25
|
-
return max(start, min(value, end));
|
|
26
|
-
}
|
|
27
|
-
function evaluate(value, param) {
|
|
28
|
-
return typeof value === "function" ? value(param) : value;
|
|
29
|
-
}
|
|
30
|
-
function getSide(placement) {
|
|
31
|
-
return placement.split("-")[0];
|
|
32
|
-
}
|
|
33
|
-
function getAlignment(placement) {
|
|
34
|
-
return placement.split("-")[1];
|
|
35
|
-
}
|
|
36
|
-
function getOppositeAxis(axis) {
|
|
37
|
-
return axis === "x" ? "y" : "x";
|
|
38
|
-
}
|
|
39
|
-
function getAxisLength(axis) {
|
|
40
|
-
return axis === "y" ? "height" : "width";
|
|
41
|
-
}
|
|
42
|
-
const yAxisSides = /* @__PURE__ */ new Set(["top", "bottom"]);
|
|
43
|
-
function getSideAxis(placement) {
|
|
44
|
-
return yAxisSides.has(getSide(placement)) ? "y" : "x";
|
|
45
|
-
}
|
|
46
|
-
function getAlignmentAxis(placement) {
|
|
47
|
-
return getOppositeAxis(getSideAxis(placement));
|
|
48
|
-
}
|
|
49
|
-
function getAlignmentSides(placement, rects, rtl) {
|
|
50
|
-
if (rtl === void 0) {
|
|
51
|
-
rtl = false;
|
|
52
|
-
}
|
|
53
|
-
const alignment = getAlignment(placement);
|
|
54
|
-
const alignmentAxis = getAlignmentAxis(placement);
|
|
55
|
-
const length = getAxisLength(alignmentAxis);
|
|
56
|
-
let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
|
|
57
|
-
if (rects.reference[length] > rects.floating[length]) {
|
|
58
|
-
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
|
59
|
-
}
|
|
60
|
-
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
|
|
61
|
-
}
|
|
62
|
-
function getExpandedPlacements(placement) {
|
|
63
|
-
const oppositePlacement = getOppositePlacement(placement);
|
|
64
|
-
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
65
|
-
}
|
|
66
|
-
function getOppositeAlignmentPlacement(placement) {
|
|
67
|
-
return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
|
|
68
|
-
}
|
|
69
|
-
const lrPlacement = ["left", "right"];
|
|
70
|
-
const rlPlacement = ["right", "left"];
|
|
71
|
-
const tbPlacement = ["top", "bottom"];
|
|
72
|
-
const btPlacement = ["bottom", "top"];
|
|
73
|
-
function getSideList(side, isStart, rtl) {
|
|
74
|
-
switch (side) {
|
|
75
|
-
case "top":
|
|
76
|
-
case "bottom":
|
|
77
|
-
if (rtl) return isStart ? rlPlacement : lrPlacement;
|
|
78
|
-
return isStart ? lrPlacement : rlPlacement;
|
|
79
|
-
case "left":
|
|
80
|
-
case "right":
|
|
81
|
-
return isStart ? tbPlacement : btPlacement;
|
|
82
|
-
default:
|
|
83
|
-
return [];
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
87
|
-
const alignment = getAlignment(placement);
|
|
88
|
-
let list = getSideList(getSide(placement), direction === "start", rtl);
|
|
89
|
-
if (alignment) {
|
|
90
|
-
list = list.map((side) => side + "-" + alignment);
|
|
91
|
-
if (flipAlignment) {
|
|
92
|
-
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
return list;
|
|
96
|
-
}
|
|
97
|
-
function getOppositePlacement(placement) {
|
|
98
|
-
return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
|
|
99
|
-
}
|
|
100
|
-
function expandPaddingObject(padding) {
|
|
101
|
-
return {
|
|
102
|
-
top: 0,
|
|
103
|
-
right: 0,
|
|
104
|
-
bottom: 0,
|
|
105
|
-
left: 0,
|
|
106
|
-
...padding
|
|
107
|
-
};
|
|
108
|
-
}
|
|
109
|
-
function getPaddingObject(padding) {
|
|
110
|
-
return typeof padding !== "number" ? expandPaddingObject(padding) : {
|
|
111
|
-
top: padding,
|
|
112
|
-
right: padding,
|
|
113
|
-
bottom: padding,
|
|
114
|
-
left: padding
|
|
115
|
-
};
|
|
116
|
-
}
|
|
117
|
-
function rectToClientRect(rect) {
|
|
118
|
-
const {
|
|
119
|
-
x,
|
|
120
|
-
y,
|
|
121
|
-
width,
|
|
122
|
-
height
|
|
123
|
-
} = rect;
|
|
124
|
-
return {
|
|
125
|
-
width,
|
|
126
|
-
height,
|
|
127
|
-
top: y,
|
|
128
|
-
left: x,
|
|
129
|
-
right: x + width,
|
|
130
|
-
bottom: y + height,
|
|
131
|
-
x,
|
|
132
|
-
y
|
|
133
|
-
};
|
|
134
|
-
}
|
|
135
|
-
function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
136
|
-
let {
|
|
137
|
-
reference,
|
|
138
|
-
floating
|
|
139
|
-
} = _ref;
|
|
140
|
-
const sideAxis = getSideAxis(placement);
|
|
141
|
-
const alignmentAxis = getAlignmentAxis(placement);
|
|
142
|
-
const alignLength = getAxisLength(alignmentAxis);
|
|
143
|
-
const side = getSide(placement);
|
|
144
|
-
const isVertical = sideAxis === "y";
|
|
145
|
-
const commonX = reference.x + reference.width / 2 - floating.width / 2;
|
|
146
|
-
const commonY = reference.y + reference.height / 2 - floating.height / 2;
|
|
147
|
-
const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
|
|
148
|
-
let coords;
|
|
149
|
-
switch (side) {
|
|
150
|
-
case "top":
|
|
151
|
-
coords = {
|
|
152
|
-
x: commonX,
|
|
153
|
-
y: reference.y - floating.height
|
|
154
|
-
};
|
|
155
|
-
break;
|
|
156
|
-
case "bottom":
|
|
157
|
-
coords = {
|
|
158
|
-
x: commonX,
|
|
159
|
-
y: reference.y + reference.height
|
|
160
|
-
};
|
|
161
|
-
break;
|
|
162
|
-
case "right":
|
|
163
|
-
coords = {
|
|
164
|
-
x: reference.x + reference.width,
|
|
165
|
-
y: commonY
|
|
166
|
-
};
|
|
167
|
-
break;
|
|
168
|
-
case "left":
|
|
169
|
-
coords = {
|
|
170
|
-
x: reference.x - floating.width,
|
|
171
|
-
y: commonY
|
|
172
|
-
};
|
|
173
|
-
break;
|
|
174
|
-
default:
|
|
175
|
-
coords = {
|
|
176
|
-
x: reference.x,
|
|
177
|
-
y: reference.y
|
|
178
|
-
};
|
|
179
|
-
}
|
|
180
|
-
switch (getAlignment(placement)) {
|
|
181
|
-
case "start":
|
|
182
|
-
coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
|
|
183
|
-
break;
|
|
184
|
-
case "end":
|
|
185
|
-
coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
|
|
186
|
-
break;
|
|
187
|
-
}
|
|
188
|
-
return coords;
|
|
189
|
-
}
|
|
190
|
-
async function detectOverflow(state, options) {
|
|
191
|
-
var _await$platform$isEle;
|
|
192
|
-
if (options === void 0) {
|
|
193
|
-
options = {};
|
|
194
|
-
}
|
|
195
|
-
const {
|
|
196
|
-
x,
|
|
197
|
-
y,
|
|
198
|
-
platform: platform2,
|
|
199
|
-
rects,
|
|
200
|
-
elements,
|
|
201
|
-
strategy
|
|
202
|
-
} = state;
|
|
203
|
-
const {
|
|
204
|
-
boundary = "clippingAncestors",
|
|
205
|
-
rootBoundary = "viewport",
|
|
206
|
-
elementContext = "floating",
|
|
207
|
-
altBoundary = false,
|
|
208
|
-
padding = 0
|
|
209
|
-
} = evaluate(options, state);
|
|
210
|
-
const paddingObject = getPaddingObject(padding);
|
|
211
|
-
const altContext = elementContext === "floating" ? "reference" : "floating";
|
|
212
|
-
const element = elements[altBoundary ? altContext : elementContext];
|
|
213
|
-
const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
|
|
214
|
-
element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
|
|
215
|
-
boundary,
|
|
216
|
-
rootBoundary,
|
|
217
|
-
strategy
|
|
218
|
-
}));
|
|
219
|
-
const rect = elementContext === "floating" ? {
|
|
220
|
-
x,
|
|
221
|
-
y,
|
|
222
|
-
width: rects.floating.width,
|
|
223
|
-
height: rects.floating.height
|
|
224
|
-
} : rects.reference;
|
|
225
|
-
const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
|
|
226
|
-
const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
|
|
227
|
-
x: 1,
|
|
228
|
-
y: 1
|
|
229
|
-
} : {
|
|
230
|
-
x: 1,
|
|
231
|
-
y: 1
|
|
232
|
-
};
|
|
233
|
-
const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
234
|
-
elements,
|
|
235
|
-
rect,
|
|
236
|
-
offsetParent,
|
|
237
|
-
strategy
|
|
238
|
-
}) : rect);
|
|
239
|
-
return {
|
|
240
|
-
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
241
|
-
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
242
|
-
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
243
|
-
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
244
|
-
};
|
|
245
|
-
}
|
|
246
|
-
const computePosition$1 = async (reference, floating, config) => {
|
|
247
|
-
const {
|
|
248
|
-
placement = "bottom",
|
|
249
|
-
strategy = "absolute",
|
|
250
|
-
middleware = [],
|
|
251
|
-
platform: platform2
|
|
252
|
-
} = config;
|
|
253
|
-
const validMiddleware = middleware.filter(Boolean);
|
|
254
|
-
const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
|
|
255
|
-
let rects = await platform2.getElementRects({
|
|
256
|
-
reference,
|
|
257
|
-
floating,
|
|
258
|
-
strategy
|
|
259
|
-
});
|
|
260
|
-
let {
|
|
261
|
-
x,
|
|
262
|
-
y
|
|
263
|
-
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
264
|
-
let statefulPlacement = placement;
|
|
265
|
-
let middlewareData = {};
|
|
266
|
-
let resetCount = 0;
|
|
267
|
-
for (let i = 0; i < validMiddleware.length; i++) {
|
|
268
|
-
var _platform$detectOverf;
|
|
269
|
-
const {
|
|
270
|
-
name,
|
|
271
|
-
fn
|
|
272
|
-
} = validMiddleware[i];
|
|
273
|
-
const {
|
|
274
|
-
x: nextX,
|
|
275
|
-
y: nextY,
|
|
276
|
-
data,
|
|
277
|
-
reset
|
|
278
|
-
} = await fn({
|
|
279
|
-
x,
|
|
280
|
-
y,
|
|
281
|
-
initialPlacement: placement,
|
|
282
|
-
placement: statefulPlacement,
|
|
283
|
-
strategy,
|
|
284
|
-
middlewareData,
|
|
285
|
-
rects,
|
|
286
|
-
platform: {
|
|
287
|
-
...platform2,
|
|
288
|
-
detectOverflow: (_platform$detectOverf = platform2.detectOverflow) != null ? _platform$detectOverf : detectOverflow
|
|
289
|
-
},
|
|
290
|
-
elements: {
|
|
291
|
-
reference,
|
|
292
|
-
floating
|
|
293
|
-
}
|
|
294
|
-
});
|
|
295
|
-
x = nextX != null ? nextX : x;
|
|
296
|
-
y = nextY != null ? nextY : y;
|
|
297
|
-
middlewareData = {
|
|
298
|
-
...middlewareData,
|
|
299
|
-
[name]: {
|
|
300
|
-
...middlewareData[name],
|
|
301
|
-
...data
|
|
302
|
-
}
|
|
303
|
-
};
|
|
304
|
-
if (reset && resetCount <= 50) {
|
|
305
|
-
resetCount++;
|
|
306
|
-
if (typeof reset === "object") {
|
|
307
|
-
if (reset.placement) {
|
|
308
|
-
statefulPlacement = reset.placement;
|
|
309
|
-
}
|
|
310
|
-
if (reset.rects) {
|
|
311
|
-
rects = reset.rects === true ? await platform2.getElementRects({
|
|
312
|
-
reference,
|
|
313
|
-
floating,
|
|
314
|
-
strategy
|
|
315
|
-
}) : reset.rects;
|
|
316
|
-
}
|
|
317
|
-
({
|
|
318
|
-
x,
|
|
319
|
-
y
|
|
320
|
-
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
|
|
321
|
-
}
|
|
322
|
-
i = -1;
|
|
323
|
-
}
|
|
324
|
-
}
|
|
325
|
-
return {
|
|
326
|
-
x,
|
|
327
|
-
y,
|
|
328
|
-
placement: statefulPlacement,
|
|
329
|
-
strategy,
|
|
330
|
-
middlewareData
|
|
331
|
-
};
|
|
332
|
-
};
|
|
333
|
-
const arrow$1 = (options) => ({
|
|
334
|
-
name: "arrow",
|
|
335
|
-
options,
|
|
336
|
-
async fn(state) {
|
|
337
|
-
const {
|
|
338
|
-
x,
|
|
339
|
-
y,
|
|
340
|
-
placement,
|
|
341
|
-
rects,
|
|
342
|
-
platform: platform2,
|
|
343
|
-
elements,
|
|
344
|
-
middlewareData
|
|
345
|
-
} = state;
|
|
346
|
-
const {
|
|
347
|
-
element,
|
|
348
|
-
padding = 0
|
|
349
|
-
} = evaluate(options, state) || {};
|
|
350
|
-
if (element == null) {
|
|
351
|
-
return {};
|
|
352
|
-
}
|
|
353
|
-
const paddingObject = getPaddingObject(padding);
|
|
354
|
-
const coords = {
|
|
355
|
-
x,
|
|
356
|
-
y
|
|
357
|
-
};
|
|
358
|
-
const axis = getAlignmentAxis(placement);
|
|
359
|
-
const length = getAxisLength(axis);
|
|
360
|
-
const arrowDimensions = await platform2.getDimensions(element);
|
|
361
|
-
const isYAxis = axis === "y";
|
|
362
|
-
const minProp = isYAxis ? "top" : "left";
|
|
363
|
-
const maxProp = isYAxis ? "bottom" : "right";
|
|
364
|
-
const clientProp = isYAxis ? "clientHeight" : "clientWidth";
|
|
365
|
-
const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
|
|
366
|
-
const startDiff = coords[axis] - rects.reference[axis];
|
|
367
|
-
const arrowOffsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(element));
|
|
368
|
-
let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
|
|
369
|
-
if (!clientSize || !await (platform2.isElement == null ? void 0 : platform2.isElement(arrowOffsetParent))) {
|
|
370
|
-
clientSize = elements.floating[clientProp] || rects.floating[length];
|
|
371
|
-
}
|
|
372
|
-
const centerToReference = endDiff / 2 - startDiff / 2;
|
|
373
|
-
const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
|
|
374
|
-
const minPadding = min(paddingObject[minProp], largestPossiblePadding);
|
|
375
|
-
const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
|
|
376
|
-
const min$1 = minPadding;
|
|
377
|
-
const max2 = clientSize - arrowDimensions[length] - maxPadding;
|
|
378
|
-
const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
|
|
379
|
-
const offset2 = clamp(min$1, center, max2);
|
|
380
|
-
const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset2 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
|
|
381
|
-
const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
|
|
382
|
-
return {
|
|
383
|
-
[axis]: coords[axis] + alignmentOffset,
|
|
384
|
-
data: {
|
|
385
|
-
[axis]: offset2,
|
|
386
|
-
centerOffset: center - offset2 - alignmentOffset,
|
|
387
|
-
...shouldAddOffset && {
|
|
388
|
-
alignmentOffset
|
|
389
|
-
}
|
|
390
|
-
},
|
|
391
|
-
reset: shouldAddOffset
|
|
392
|
-
};
|
|
393
|
-
}
|
|
394
|
-
});
|
|
395
|
-
const flip$1 = function(options) {
|
|
396
|
-
if (options === void 0) {
|
|
397
|
-
options = {};
|
|
398
|
-
}
|
|
399
|
-
return {
|
|
400
|
-
name: "flip",
|
|
401
|
-
options,
|
|
402
|
-
async fn(state) {
|
|
403
|
-
var _middlewareData$arrow, _middlewareData$flip;
|
|
404
|
-
const {
|
|
405
|
-
placement,
|
|
406
|
-
middlewareData,
|
|
407
|
-
rects,
|
|
408
|
-
initialPlacement,
|
|
409
|
-
platform: platform2,
|
|
410
|
-
elements
|
|
411
|
-
} = state;
|
|
412
|
-
const {
|
|
413
|
-
mainAxis: checkMainAxis = true,
|
|
414
|
-
crossAxis: checkCrossAxis = true,
|
|
415
|
-
fallbackPlacements: specifiedFallbackPlacements,
|
|
416
|
-
fallbackStrategy = "bestFit",
|
|
417
|
-
fallbackAxisSideDirection = "none",
|
|
418
|
-
flipAlignment = true,
|
|
419
|
-
...detectOverflowOptions
|
|
420
|
-
} = evaluate(options, state);
|
|
421
|
-
if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
422
|
-
return {};
|
|
423
|
-
}
|
|
424
|
-
const side = getSide(placement);
|
|
425
|
-
const initialSideAxis = getSideAxis(initialPlacement);
|
|
426
|
-
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
427
|
-
const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
|
|
428
|
-
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
429
|
-
const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
|
|
430
|
-
if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
|
|
431
|
-
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
432
|
-
}
|
|
433
|
-
const placements = [initialPlacement, ...fallbackPlacements];
|
|
434
|
-
const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
|
|
435
|
-
const overflows = [];
|
|
436
|
-
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
|
437
|
-
if (checkMainAxis) {
|
|
438
|
-
overflows.push(overflow[side]);
|
|
439
|
-
}
|
|
440
|
-
if (checkCrossAxis) {
|
|
441
|
-
const sides = getAlignmentSides(placement, rects, rtl);
|
|
442
|
-
overflows.push(overflow[sides[0]], overflow[sides[1]]);
|
|
443
|
-
}
|
|
444
|
-
overflowsData = [...overflowsData, {
|
|
445
|
-
placement,
|
|
446
|
-
overflows
|
|
447
|
-
}];
|
|
448
|
-
if (!overflows.every((side2) => side2 <= 0)) {
|
|
449
|
-
var _middlewareData$flip2, _overflowsData$filter;
|
|
450
|
-
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
451
|
-
const nextPlacement = placements[nextIndex];
|
|
452
|
-
if (nextPlacement) {
|
|
453
|
-
const ignoreCrossAxisOverflow = checkCrossAxis === "alignment" ? initialSideAxis !== getSideAxis(nextPlacement) : false;
|
|
454
|
-
if (!ignoreCrossAxisOverflow || // We leave the current main axis only if every placement on that axis
|
|
455
|
-
// overflows the main axis.
|
|
456
|
-
overflowsData.every((d) => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
|
|
457
|
-
return {
|
|
458
|
-
data: {
|
|
459
|
-
index: nextIndex,
|
|
460
|
-
overflows: overflowsData
|
|
461
|
-
},
|
|
462
|
-
reset: {
|
|
463
|
-
placement: nextPlacement
|
|
464
|
-
}
|
|
465
|
-
};
|
|
466
|
-
}
|
|
467
|
-
}
|
|
468
|
-
let resetPlacement = (_overflowsData$filter = overflowsData.filter((d) => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
|
|
469
|
-
if (!resetPlacement) {
|
|
470
|
-
switch (fallbackStrategy) {
|
|
471
|
-
case "bestFit": {
|
|
472
|
-
var _overflowsData$filter2;
|
|
473
|
-
const placement2 = (_overflowsData$filter2 = overflowsData.filter((d) => {
|
|
474
|
-
if (hasFallbackAxisSideDirection) {
|
|
475
|
-
const currentSideAxis = getSideAxis(d.placement);
|
|
476
|
-
return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
|
|
477
|
-
// reading directions favoring greater width.
|
|
478
|
-
currentSideAxis === "y";
|
|
479
|
-
}
|
|
480
|
-
return true;
|
|
481
|
-
}).map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
|
|
482
|
-
if (placement2) {
|
|
483
|
-
resetPlacement = placement2;
|
|
484
|
-
}
|
|
485
|
-
break;
|
|
486
|
-
}
|
|
487
|
-
case "initialPlacement":
|
|
488
|
-
resetPlacement = initialPlacement;
|
|
489
|
-
break;
|
|
490
|
-
}
|
|
491
|
-
}
|
|
492
|
-
if (placement !== resetPlacement) {
|
|
493
|
-
return {
|
|
494
|
-
reset: {
|
|
495
|
-
placement: resetPlacement
|
|
496
|
-
}
|
|
497
|
-
};
|
|
498
|
-
}
|
|
499
|
-
}
|
|
500
|
-
return {};
|
|
501
|
-
}
|
|
502
|
-
};
|
|
503
|
-
};
|
|
504
|
-
const originSides = /* @__PURE__ */ new Set(["left", "top"]);
|
|
505
|
-
async function convertValueToCoords(state, options) {
|
|
506
|
-
const {
|
|
507
|
-
placement,
|
|
508
|
-
platform: platform2,
|
|
509
|
-
elements
|
|
510
|
-
} = state;
|
|
511
|
-
const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
|
|
512
|
-
const side = getSide(placement);
|
|
513
|
-
const alignment = getAlignment(placement);
|
|
514
|
-
const isVertical = getSideAxis(placement) === "y";
|
|
515
|
-
const mainAxisMulti = originSides.has(side) ? -1 : 1;
|
|
516
|
-
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
517
|
-
const rawValue = evaluate(options, state);
|
|
518
|
-
let {
|
|
519
|
-
mainAxis,
|
|
520
|
-
crossAxis,
|
|
521
|
-
alignmentAxis
|
|
522
|
-
} = typeof rawValue === "number" ? {
|
|
523
|
-
mainAxis: rawValue,
|
|
524
|
-
crossAxis: 0,
|
|
525
|
-
alignmentAxis: null
|
|
526
|
-
} : {
|
|
527
|
-
mainAxis: rawValue.mainAxis || 0,
|
|
528
|
-
crossAxis: rawValue.crossAxis || 0,
|
|
529
|
-
alignmentAxis: rawValue.alignmentAxis
|
|
530
|
-
};
|
|
531
|
-
if (alignment && typeof alignmentAxis === "number") {
|
|
532
|
-
crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
|
|
533
|
-
}
|
|
534
|
-
return isVertical ? {
|
|
535
|
-
x: crossAxis * crossAxisMulti,
|
|
536
|
-
y: mainAxis * mainAxisMulti
|
|
537
|
-
} : {
|
|
538
|
-
x: mainAxis * mainAxisMulti,
|
|
539
|
-
y: crossAxis * crossAxisMulti
|
|
540
|
-
};
|
|
541
|
-
}
|
|
542
|
-
const offset$1 = function(options) {
|
|
543
|
-
if (options === void 0) {
|
|
544
|
-
options = 0;
|
|
545
|
-
}
|
|
546
|
-
return {
|
|
547
|
-
name: "offset",
|
|
548
|
-
options,
|
|
549
|
-
async fn(state) {
|
|
550
|
-
var _middlewareData$offse, _middlewareData$arrow;
|
|
551
|
-
const {
|
|
552
|
-
x,
|
|
553
|
-
y,
|
|
554
|
-
placement,
|
|
555
|
-
middlewareData
|
|
556
|
-
} = state;
|
|
557
|
-
const diffCoords = await convertValueToCoords(state, options);
|
|
558
|
-
if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
559
|
-
return {};
|
|
560
|
-
}
|
|
561
|
-
return {
|
|
562
|
-
x: x + diffCoords.x,
|
|
563
|
-
y: y + diffCoords.y,
|
|
564
|
-
data: {
|
|
565
|
-
...diffCoords,
|
|
566
|
-
placement
|
|
567
|
-
}
|
|
568
|
-
};
|
|
569
|
-
}
|
|
570
|
-
};
|
|
571
|
-
};
|
|
572
|
-
const size$1 = function(options) {
|
|
573
|
-
if (options === void 0) {
|
|
574
|
-
options = {};
|
|
575
|
-
}
|
|
576
|
-
return {
|
|
577
|
-
name: "size",
|
|
578
|
-
options,
|
|
579
|
-
async fn(state) {
|
|
580
|
-
var _state$middlewareData, _state$middlewareData2;
|
|
581
|
-
const {
|
|
582
|
-
placement,
|
|
583
|
-
rects,
|
|
584
|
-
platform: platform2,
|
|
585
|
-
elements
|
|
586
|
-
} = state;
|
|
587
|
-
const {
|
|
588
|
-
apply = () => {
|
|
589
|
-
},
|
|
590
|
-
...detectOverflowOptions
|
|
591
|
-
} = evaluate(options, state);
|
|
592
|
-
const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
|
|
593
|
-
const side = getSide(placement);
|
|
594
|
-
const alignment = getAlignment(placement);
|
|
595
|
-
const isYAxis = getSideAxis(placement) === "y";
|
|
596
|
-
const {
|
|
597
|
-
width,
|
|
598
|
-
height
|
|
599
|
-
} = rects.floating;
|
|
600
|
-
let heightSide;
|
|
601
|
-
let widthSide;
|
|
602
|
-
if (side === "top" || side === "bottom") {
|
|
603
|
-
heightSide = side;
|
|
604
|
-
widthSide = alignment === (await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating)) ? "start" : "end") ? "left" : "right";
|
|
605
|
-
} else {
|
|
606
|
-
widthSide = side;
|
|
607
|
-
heightSide = alignment === "end" ? "top" : "bottom";
|
|
608
|
-
}
|
|
609
|
-
const maximumClippingHeight = height - overflow.top - overflow.bottom;
|
|
610
|
-
const maximumClippingWidth = width - overflow.left - overflow.right;
|
|
611
|
-
const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
|
|
612
|
-
const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
|
|
613
|
-
const noShift = !state.middlewareData.shift;
|
|
614
|
-
let availableHeight = overflowAvailableHeight;
|
|
615
|
-
let availableWidth = overflowAvailableWidth;
|
|
616
|
-
if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
|
|
617
|
-
availableWidth = maximumClippingWidth;
|
|
618
|
-
}
|
|
619
|
-
if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
|
|
620
|
-
availableHeight = maximumClippingHeight;
|
|
621
|
-
}
|
|
622
|
-
if (noShift && !alignment) {
|
|
623
|
-
const xMin = max(overflow.left, 0);
|
|
624
|
-
const xMax = max(overflow.right, 0);
|
|
625
|
-
const yMin = max(overflow.top, 0);
|
|
626
|
-
const yMax = max(overflow.bottom, 0);
|
|
627
|
-
if (isYAxis) {
|
|
628
|
-
availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
|
|
629
|
-
} else {
|
|
630
|
-
availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
|
|
631
|
-
}
|
|
632
|
-
}
|
|
633
|
-
await apply({
|
|
634
|
-
...state,
|
|
635
|
-
availableWidth,
|
|
636
|
-
availableHeight
|
|
637
|
-
});
|
|
638
|
-
const nextDimensions = await platform2.getDimensions(elements.floating);
|
|
639
|
-
if (width !== nextDimensions.width || height !== nextDimensions.height) {
|
|
640
|
-
return {
|
|
641
|
-
reset: {
|
|
642
|
-
rects: true
|
|
643
|
-
}
|
|
644
|
-
};
|
|
645
|
-
}
|
|
646
|
-
return {};
|
|
647
|
-
}
|
|
648
|
-
};
|
|
649
|
-
};
|
|
650
|
-
function hasWindow() {
|
|
651
|
-
return typeof window !== "undefined";
|
|
652
|
-
}
|
|
653
|
-
function getNodeName(node) {
|
|
654
|
-
if (isNode(node)) {
|
|
655
|
-
return (node.nodeName || "").toLowerCase();
|
|
656
|
-
}
|
|
657
|
-
return "#document";
|
|
658
|
-
}
|
|
659
|
-
function getWindow(node) {
|
|
660
|
-
var _node$ownerDocument;
|
|
661
|
-
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
|
|
662
|
-
}
|
|
663
|
-
function getDocumentElement(node) {
|
|
664
|
-
var _ref;
|
|
665
|
-
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
|
|
666
|
-
}
|
|
667
|
-
function isNode(value) {
|
|
668
|
-
if (!hasWindow()) {
|
|
669
|
-
return false;
|
|
670
|
-
}
|
|
671
|
-
return value instanceof Node || value instanceof getWindow(value).Node;
|
|
672
|
-
}
|
|
673
|
-
function isElement(value) {
|
|
674
|
-
if (!hasWindow()) {
|
|
675
|
-
return false;
|
|
676
|
-
}
|
|
677
|
-
return value instanceof Element || value instanceof getWindow(value).Element;
|
|
678
|
-
}
|
|
679
|
-
function isHTMLElement(value) {
|
|
680
|
-
if (!hasWindow()) {
|
|
681
|
-
return false;
|
|
682
|
-
}
|
|
683
|
-
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
|
|
684
|
-
}
|
|
685
|
-
function isShadowRoot(value) {
|
|
686
|
-
if (!hasWindow() || typeof ShadowRoot === "undefined") {
|
|
687
|
-
return false;
|
|
688
|
-
}
|
|
689
|
-
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
690
|
-
}
|
|
691
|
-
const invalidOverflowDisplayValues = /* @__PURE__ */ new Set(["inline", "contents"]);
|
|
692
|
-
function isOverflowElement(element) {
|
|
693
|
-
const {
|
|
694
|
-
overflow,
|
|
695
|
-
overflowX,
|
|
696
|
-
overflowY,
|
|
697
|
-
display
|
|
698
|
-
} = getComputedStyle$1(element);
|
|
699
|
-
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
|
|
700
|
-
}
|
|
701
|
-
const tableElements = /* @__PURE__ */ new Set(["table", "td", "th"]);
|
|
702
|
-
function isTableElement(element) {
|
|
703
|
-
return tableElements.has(getNodeName(element));
|
|
704
|
-
}
|
|
705
|
-
const topLayerSelectors = [":popover-open", ":modal"];
|
|
706
|
-
function isTopLayer(element) {
|
|
707
|
-
return topLayerSelectors.some((selector) => {
|
|
708
|
-
try {
|
|
709
|
-
return element.matches(selector);
|
|
710
|
-
} catch (_e) {
|
|
711
|
-
return false;
|
|
712
|
-
}
|
|
713
|
-
});
|
|
714
|
-
}
|
|
715
|
-
const transformProperties = ["transform", "translate", "scale", "rotate", "perspective"];
|
|
716
|
-
const willChangeValues = ["transform", "translate", "scale", "rotate", "perspective", "filter"];
|
|
717
|
-
const containValues = ["paint", "layout", "strict", "content"];
|
|
718
|
-
function isContainingBlock(elementOrCss) {
|
|
719
|
-
const webkit = isWebKit();
|
|
720
|
-
const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
|
|
721
|
-
return transformProperties.some((value) => css[value] ? css[value] !== "none" : false) || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || willChangeValues.some((value) => (css.willChange || "").includes(value)) || containValues.some((value) => (css.contain || "").includes(value));
|
|
722
|
-
}
|
|
723
|
-
function getContainingBlock(element) {
|
|
724
|
-
let currentNode = getParentNode(element);
|
|
725
|
-
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
726
|
-
if (isContainingBlock(currentNode)) {
|
|
727
|
-
return currentNode;
|
|
728
|
-
} else if (isTopLayer(currentNode)) {
|
|
729
|
-
return null;
|
|
730
|
-
}
|
|
731
|
-
currentNode = getParentNode(currentNode);
|
|
732
|
-
}
|
|
733
|
-
return null;
|
|
734
|
-
}
|
|
735
|
-
function isWebKit() {
|
|
736
|
-
if (typeof CSS === "undefined" || !CSS.supports) return false;
|
|
737
|
-
return CSS.supports("-webkit-backdrop-filter", "none");
|
|
738
|
-
}
|
|
739
|
-
const lastTraversableNodeNames = /* @__PURE__ */ new Set(["html", "body", "#document"]);
|
|
740
|
-
function isLastTraversableNode(node) {
|
|
741
|
-
return lastTraversableNodeNames.has(getNodeName(node));
|
|
742
|
-
}
|
|
743
|
-
function getComputedStyle$1(element) {
|
|
744
|
-
return getWindow(element).getComputedStyle(element);
|
|
745
|
-
}
|
|
746
|
-
function getNodeScroll(element) {
|
|
747
|
-
if (isElement(element)) {
|
|
748
|
-
return {
|
|
749
|
-
scrollLeft: element.scrollLeft,
|
|
750
|
-
scrollTop: element.scrollTop
|
|
751
|
-
};
|
|
752
|
-
}
|
|
753
|
-
return {
|
|
754
|
-
scrollLeft: element.scrollX,
|
|
755
|
-
scrollTop: element.scrollY
|
|
756
|
-
};
|
|
757
|
-
}
|
|
758
|
-
function getParentNode(node) {
|
|
759
|
-
if (getNodeName(node) === "html") {
|
|
760
|
-
return node;
|
|
761
|
-
}
|
|
762
|
-
const result = (
|
|
763
|
-
// Step into the shadow DOM of the parent of a slotted node.
|
|
764
|
-
node.assignedSlot || // DOM Element detected.
|
|
765
|
-
node.parentNode || // ShadowRoot detected.
|
|
766
|
-
isShadowRoot(node) && node.host || // Fallback.
|
|
767
|
-
getDocumentElement(node)
|
|
768
|
-
);
|
|
769
|
-
return isShadowRoot(result) ? result.host : result;
|
|
770
|
-
}
|
|
771
|
-
function getNearestOverflowAncestor(node) {
|
|
772
|
-
const parentNode = getParentNode(node);
|
|
773
|
-
if (isLastTraversableNode(parentNode)) {
|
|
774
|
-
return node.ownerDocument ? node.ownerDocument.body : node.body;
|
|
775
|
-
}
|
|
776
|
-
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
|
|
777
|
-
return parentNode;
|
|
778
|
-
}
|
|
779
|
-
return getNearestOverflowAncestor(parentNode);
|
|
780
|
-
}
|
|
781
|
-
function getOverflowAncestors(node, list, traverseIframes) {
|
|
782
|
-
var _node$ownerDocument2;
|
|
783
|
-
if (list === void 0) {
|
|
784
|
-
list = [];
|
|
785
|
-
}
|
|
786
|
-
if (traverseIframes === void 0) {
|
|
787
|
-
traverseIframes = true;
|
|
788
|
-
}
|
|
789
|
-
const scrollableAncestor = getNearestOverflowAncestor(node);
|
|
790
|
-
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
|
|
791
|
-
const win = getWindow(scrollableAncestor);
|
|
792
|
-
if (isBody) {
|
|
793
|
-
const frameElement = getFrameElement(win);
|
|
794
|
-
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
|
795
|
-
}
|
|
796
|
-
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
|
797
|
-
}
|
|
798
|
-
function getFrameElement(win) {
|
|
799
|
-
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
|
800
|
-
}
|
|
801
|
-
function getCssDimensions(element) {
|
|
802
|
-
const css = getComputedStyle$1(element);
|
|
803
|
-
let width = parseFloat(css.width) || 0;
|
|
804
|
-
let height = parseFloat(css.height) || 0;
|
|
805
|
-
const hasOffset = isHTMLElement(element);
|
|
806
|
-
const offsetWidth = hasOffset ? element.offsetWidth : width;
|
|
807
|
-
const offsetHeight = hasOffset ? element.offsetHeight : height;
|
|
808
|
-
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
|
|
809
|
-
if (shouldFallback) {
|
|
810
|
-
width = offsetWidth;
|
|
811
|
-
height = offsetHeight;
|
|
812
|
-
}
|
|
813
|
-
return {
|
|
814
|
-
width,
|
|
815
|
-
height,
|
|
816
|
-
$: shouldFallback
|
|
817
|
-
};
|
|
818
|
-
}
|
|
819
|
-
function unwrapElement(element) {
|
|
820
|
-
return !isElement(element) ? element.contextElement : element;
|
|
821
|
-
}
|
|
822
|
-
function getScale(element) {
|
|
823
|
-
const domElement = unwrapElement(element);
|
|
824
|
-
if (!isHTMLElement(domElement)) {
|
|
825
|
-
return createCoords(1);
|
|
826
|
-
}
|
|
827
|
-
const rect = domElement.getBoundingClientRect();
|
|
828
|
-
const {
|
|
829
|
-
width,
|
|
830
|
-
height,
|
|
831
|
-
$
|
|
832
|
-
} = getCssDimensions(domElement);
|
|
833
|
-
let x = ($ ? round(rect.width) : rect.width) / width;
|
|
834
|
-
let y = ($ ? round(rect.height) : rect.height) / height;
|
|
835
|
-
if (!x || !Number.isFinite(x)) {
|
|
836
|
-
x = 1;
|
|
837
|
-
}
|
|
838
|
-
if (!y || !Number.isFinite(y)) {
|
|
839
|
-
y = 1;
|
|
840
|
-
}
|
|
841
|
-
return {
|
|
842
|
-
x,
|
|
843
|
-
y
|
|
844
|
-
};
|
|
845
|
-
}
|
|
846
|
-
const noOffsets = /* @__PURE__ */ createCoords(0);
|
|
847
|
-
function getVisualOffsets(element) {
|
|
848
|
-
const win = getWindow(element);
|
|
849
|
-
if (!isWebKit() || !win.visualViewport) {
|
|
850
|
-
return noOffsets;
|
|
851
|
-
}
|
|
852
|
-
return {
|
|
853
|
-
x: win.visualViewport.offsetLeft,
|
|
854
|
-
y: win.visualViewport.offsetTop
|
|
855
|
-
};
|
|
856
|
-
}
|
|
857
|
-
function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
|
|
858
|
-
if (isFixed === void 0) {
|
|
859
|
-
isFixed = false;
|
|
860
|
-
}
|
|
861
|
-
if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
|
|
862
|
-
return false;
|
|
863
|
-
}
|
|
864
|
-
return isFixed;
|
|
865
|
-
}
|
|
866
|
-
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
|
|
867
|
-
if (includeScale === void 0) {
|
|
868
|
-
includeScale = false;
|
|
869
|
-
}
|
|
870
|
-
if (isFixedStrategy === void 0) {
|
|
871
|
-
isFixedStrategy = false;
|
|
872
|
-
}
|
|
873
|
-
const clientRect = element.getBoundingClientRect();
|
|
874
|
-
const domElement = unwrapElement(element);
|
|
875
|
-
let scale = createCoords(1);
|
|
876
|
-
if (includeScale) {
|
|
877
|
-
if (offsetParent) {
|
|
878
|
-
if (isElement(offsetParent)) {
|
|
879
|
-
scale = getScale(offsetParent);
|
|
880
|
-
}
|
|
881
|
-
} else {
|
|
882
|
-
scale = getScale(element);
|
|
883
|
-
}
|
|
884
|
-
}
|
|
885
|
-
const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
|
|
886
|
-
let x = (clientRect.left + visualOffsets.x) / scale.x;
|
|
887
|
-
let y = (clientRect.top + visualOffsets.y) / scale.y;
|
|
888
|
-
let width = clientRect.width / scale.x;
|
|
889
|
-
let height = clientRect.height / scale.y;
|
|
890
|
-
if (domElement) {
|
|
891
|
-
const win = getWindow(domElement);
|
|
892
|
-
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
893
|
-
let currentWin = win;
|
|
894
|
-
let currentIFrame = getFrameElement(currentWin);
|
|
895
|
-
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
|
|
896
|
-
const iframeScale = getScale(currentIFrame);
|
|
897
|
-
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
898
|
-
const css = getComputedStyle$1(currentIFrame);
|
|
899
|
-
const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
|
|
900
|
-
const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
|
|
901
|
-
x *= iframeScale.x;
|
|
902
|
-
y *= iframeScale.y;
|
|
903
|
-
width *= iframeScale.x;
|
|
904
|
-
height *= iframeScale.y;
|
|
905
|
-
x += left;
|
|
906
|
-
y += top;
|
|
907
|
-
currentWin = getWindow(currentIFrame);
|
|
908
|
-
currentIFrame = getFrameElement(currentWin);
|
|
909
|
-
}
|
|
910
|
-
}
|
|
911
|
-
return rectToClientRect({
|
|
912
|
-
width,
|
|
913
|
-
height,
|
|
914
|
-
x,
|
|
915
|
-
y
|
|
916
|
-
});
|
|
917
|
-
}
|
|
918
|
-
function getWindowScrollBarX(element, rect) {
|
|
919
|
-
const leftScroll = getNodeScroll(element).scrollLeft;
|
|
920
|
-
if (!rect) {
|
|
921
|
-
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
|
|
922
|
-
}
|
|
923
|
-
return rect.left + leftScroll;
|
|
924
|
-
}
|
|
925
|
-
function getHTMLOffset(documentElement, scroll) {
|
|
926
|
-
const htmlRect = documentElement.getBoundingClientRect();
|
|
927
|
-
const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
|
|
928
|
-
const y = htmlRect.top + scroll.scrollTop;
|
|
929
|
-
return {
|
|
930
|
-
x,
|
|
931
|
-
y
|
|
932
|
-
};
|
|
933
|
-
}
|
|
934
|
-
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
935
|
-
let {
|
|
936
|
-
elements,
|
|
937
|
-
rect,
|
|
938
|
-
offsetParent,
|
|
939
|
-
strategy
|
|
940
|
-
} = _ref;
|
|
941
|
-
const isFixed = strategy === "fixed";
|
|
942
|
-
const documentElement = getDocumentElement(offsetParent);
|
|
943
|
-
const topLayer = elements ? isTopLayer(elements.floating) : false;
|
|
944
|
-
if (offsetParent === documentElement || topLayer && isFixed) {
|
|
945
|
-
return rect;
|
|
946
|
-
}
|
|
947
|
-
let scroll = {
|
|
948
|
-
scrollLeft: 0,
|
|
949
|
-
scrollTop: 0
|
|
950
|
-
};
|
|
951
|
-
let scale = createCoords(1);
|
|
952
|
-
const offsets = createCoords(0);
|
|
953
|
-
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
954
|
-
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
955
|
-
if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
|
|
956
|
-
scroll = getNodeScroll(offsetParent);
|
|
957
|
-
}
|
|
958
|
-
if (isHTMLElement(offsetParent)) {
|
|
959
|
-
const offsetRect = getBoundingClientRect(offsetParent);
|
|
960
|
-
scale = getScale(offsetParent);
|
|
961
|
-
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
962
|
-
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
963
|
-
}
|
|
964
|
-
}
|
|
965
|
-
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
966
|
-
return {
|
|
967
|
-
width: rect.width * scale.x,
|
|
968
|
-
height: rect.height * scale.y,
|
|
969
|
-
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
|
|
970
|
-
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
|
|
971
|
-
};
|
|
972
|
-
}
|
|
973
|
-
function getClientRects(element) {
|
|
974
|
-
return Array.from(element.getClientRects());
|
|
975
|
-
}
|
|
976
|
-
function getDocumentRect(element) {
|
|
977
|
-
const html = getDocumentElement(element);
|
|
978
|
-
const scroll = getNodeScroll(element);
|
|
979
|
-
const body = element.ownerDocument.body;
|
|
980
|
-
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
|
|
981
|
-
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
|
|
982
|
-
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
|
|
983
|
-
const y = -scroll.scrollTop;
|
|
984
|
-
if (getComputedStyle$1(body).direction === "rtl") {
|
|
985
|
-
x += max(html.clientWidth, body.clientWidth) - width;
|
|
986
|
-
}
|
|
987
|
-
return {
|
|
988
|
-
width,
|
|
989
|
-
height,
|
|
990
|
-
x,
|
|
991
|
-
y
|
|
992
|
-
};
|
|
993
|
-
}
|
|
994
|
-
const SCROLLBAR_MAX = 25;
|
|
995
|
-
function getViewportRect(element, strategy) {
|
|
996
|
-
const win = getWindow(element);
|
|
997
|
-
const html = getDocumentElement(element);
|
|
998
|
-
const visualViewport = win.visualViewport;
|
|
999
|
-
let width = html.clientWidth;
|
|
1000
|
-
let height = html.clientHeight;
|
|
1001
|
-
let x = 0;
|
|
1002
|
-
let y = 0;
|
|
1003
|
-
if (visualViewport) {
|
|
1004
|
-
width = visualViewport.width;
|
|
1005
|
-
height = visualViewport.height;
|
|
1006
|
-
const visualViewportBased = isWebKit();
|
|
1007
|
-
if (!visualViewportBased || visualViewportBased && strategy === "fixed") {
|
|
1008
|
-
x = visualViewport.offsetLeft;
|
|
1009
|
-
y = visualViewport.offsetTop;
|
|
1010
|
-
}
|
|
1011
|
-
}
|
|
1012
|
-
const windowScrollbarX = getWindowScrollBarX(html);
|
|
1013
|
-
if (windowScrollbarX <= 0) {
|
|
1014
|
-
const doc = html.ownerDocument;
|
|
1015
|
-
const body = doc.body;
|
|
1016
|
-
const bodyStyles = getComputedStyle(body);
|
|
1017
|
-
const bodyMarginInline = doc.compatMode === "CSS1Compat" ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
|
|
1018
|
-
const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
|
|
1019
|
-
if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
|
|
1020
|
-
width -= clippingStableScrollbarWidth;
|
|
1021
|
-
}
|
|
1022
|
-
} else if (windowScrollbarX <= SCROLLBAR_MAX) {
|
|
1023
|
-
width += windowScrollbarX;
|
|
1024
|
-
}
|
|
1025
|
-
return {
|
|
1026
|
-
width,
|
|
1027
|
-
height,
|
|
1028
|
-
x,
|
|
1029
|
-
y
|
|
1030
|
-
};
|
|
1031
|
-
}
|
|
1032
|
-
const absoluteOrFixed = /* @__PURE__ */ new Set(["absolute", "fixed"]);
|
|
1033
|
-
function getInnerBoundingClientRect(element, strategy) {
|
|
1034
|
-
const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
|
|
1035
|
-
const top = clientRect.top + element.clientTop;
|
|
1036
|
-
const left = clientRect.left + element.clientLeft;
|
|
1037
|
-
const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
|
|
1038
|
-
const width = element.clientWidth * scale.x;
|
|
1039
|
-
const height = element.clientHeight * scale.y;
|
|
1040
|
-
const x = left * scale.x;
|
|
1041
|
-
const y = top * scale.y;
|
|
1042
|
-
return {
|
|
1043
|
-
width,
|
|
1044
|
-
height,
|
|
1045
|
-
x,
|
|
1046
|
-
y
|
|
1047
|
-
};
|
|
1048
|
-
}
|
|
1049
|
-
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
|
|
1050
|
-
let rect;
|
|
1051
|
-
if (clippingAncestor === "viewport") {
|
|
1052
|
-
rect = getViewportRect(element, strategy);
|
|
1053
|
-
} else if (clippingAncestor === "document") {
|
|
1054
|
-
rect = getDocumentRect(getDocumentElement(element));
|
|
1055
|
-
} else if (isElement(clippingAncestor)) {
|
|
1056
|
-
rect = getInnerBoundingClientRect(clippingAncestor, strategy);
|
|
1057
|
-
} else {
|
|
1058
|
-
const visualOffsets = getVisualOffsets(element);
|
|
1059
|
-
rect = {
|
|
1060
|
-
x: clippingAncestor.x - visualOffsets.x,
|
|
1061
|
-
y: clippingAncestor.y - visualOffsets.y,
|
|
1062
|
-
width: clippingAncestor.width,
|
|
1063
|
-
height: clippingAncestor.height
|
|
1064
|
-
};
|
|
1065
|
-
}
|
|
1066
|
-
return rectToClientRect(rect);
|
|
1067
|
-
}
|
|
1068
|
-
function hasFixedPositionAncestor(element, stopNode) {
|
|
1069
|
-
const parentNode = getParentNode(element);
|
|
1070
|
-
if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
|
|
1071
|
-
return false;
|
|
1072
|
-
}
|
|
1073
|
-
return getComputedStyle$1(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
|
|
1074
|
-
}
|
|
1075
|
-
function getClippingElementAncestors(element, cache) {
|
|
1076
|
-
const cachedResult = cache.get(element);
|
|
1077
|
-
if (cachedResult) {
|
|
1078
|
-
return cachedResult;
|
|
1079
|
-
}
|
|
1080
|
-
let result = getOverflowAncestors(element, [], false).filter((el) => isElement(el) && getNodeName(el) !== "body");
|
|
1081
|
-
let currentContainingBlockComputedStyle = null;
|
|
1082
|
-
const elementIsFixed = getComputedStyle$1(element).position === "fixed";
|
|
1083
|
-
let currentNode = elementIsFixed ? getParentNode(element) : element;
|
|
1084
|
-
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
1085
|
-
const computedStyle = getComputedStyle$1(currentNode);
|
|
1086
|
-
const currentNodeIsContaining = isContainingBlock(currentNode);
|
|
1087
|
-
if (!currentNodeIsContaining && computedStyle.position === "fixed") {
|
|
1088
|
-
currentContainingBlockComputedStyle = null;
|
|
1089
|
-
}
|
|
1090
|
-
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
|
1091
|
-
if (shouldDropCurrentNode) {
|
|
1092
|
-
result = result.filter((ancestor) => ancestor !== currentNode);
|
|
1093
|
-
} else {
|
|
1094
|
-
currentContainingBlockComputedStyle = computedStyle;
|
|
1095
|
-
}
|
|
1096
|
-
currentNode = getParentNode(currentNode);
|
|
1097
|
-
}
|
|
1098
|
-
cache.set(element, result);
|
|
1099
|
-
return result;
|
|
1100
|
-
}
|
|
1101
|
-
function getClippingRect(_ref) {
|
|
1102
|
-
let {
|
|
1103
|
-
element,
|
|
1104
|
-
boundary,
|
|
1105
|
-
rootBoundary,
|
|
1106
|
-
strategy
|
|
1107
|
-
} = _ref;
|
|
1108
|
-
const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
|
1109
|
-
const clippingAncestors = [...elementClippingAncestors, rootBoundary];
|
|
1110
|
-
const firstClippingAncestor = clippingAncestors[0];
|
|
1111
|
-
const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
|
|
1112
|
-
const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
|
|
1113
|
-
accRect.top = max(rect.top, accRect.top);
|
|
1114
|
-
accRect.right = min(rect.right, accRect.right);
|
|
1115
|
-
accRect.bottom = min(rect.bottom, accRect.bottom);
|
|
1116
|
-
accRect.left = max(rect.left, accRect.left);
|
|
1117
|
-
return accRect;
|
|
1118
|
-
}, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
|
|
1119
|
-
return {
|
|
1120
|
-
width: clippingRect.right - clippingRect.left,
|
|
1121
|
-
height: clippingRect.bottom - clippingRect.top,
|
|
1122
|
-
x: clippingRect.left,
|
|
1123
|
-
y: clippingRect.top
|
|
1124
|
-
};
|
|
1125
|
-
}
|
|
1126
|
-
function getDimensions(element) {
|
|
1127
|
-
const {
|
|
1128
|
-
width,
|
|
1129
|
-
height
|
|
1130
|
-
} = getCssDimensions(element);
|
|
1131
|
-
return {
|
|
1132
|
-
width,
|
|
1133
|
-
height
|
|
1134
|
-
};
|
|
1135
|
-
}
|
|
1136
|
-
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
1137
|
-
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
1138
|
-
const documentElement = getDocumentElement(offsetParent);
|
|
1139
|
-
const isFixed = strategy === "fixed";
|
|
1140
|
-
const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
|
|
1141
|
-
let scroll = {
|
|
1142
|
-
scrollLeft: 0,
|
|
1143
|
-
scrollTop: 0
|
|
1144
|
-
};
|
|
1145
|
-
const offsets = createCoords(0);
|
|
1146
|
-
function setLeftRTLScrollbarOffset() {
|
|
1147
|
-
offsets.x = getWindowScrollBarX(documentElement);
|
|
1148
|
-
}
|
|
1149
|
-
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
1150
|
-
if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
|
|
1151
|
-
scroll = getNodeScroll(offsetParent);
|
|
1152
|
-
}
|
|
1153
|
-
if (isOffsetParentAnElement) {
|
|
1154
|
-
const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
|
|
1155
|
-
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
1156
|
-
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
1157
|
-
} else if (documentElement) {
|
|
1158
|
-
setLeftRTLScrollbarOffset();
|
|
1159
|
-
}
|
|
1160
|
-
}
|
|
1161
|
-
if (isFixed && !isOffsetParentAnElement && documentElement) {
|
|
1162
|
-
setLeftRTLScrollbarOffset();
|
|
1163
|
-
}
|
|
1164
|
-
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
1165
|
-
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
1166
|
-
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
|
|
1167
|
-
return {
|
|
1168
|
-
x,
|
|
1169
|
-
y,
|
|
1170
|
-
width: rect.width,
|
|
1171
|
-
height: rect.height
|
|
1172
|
-
};
|
|
1173
|
-
}
|
|
1174
|
-
function isStaticPositioned(element) {
|
|
1175
|
-
return getComputedStyle$1(element).position === "static";
|
|
1176
|
-
}
|
|
1177
|
-
function getTrueOffsetParent(element, polyfill) {
|
|
1178
|
-
if (!isHTMLElement(element) || getComputedStyle$1(element).position === "fixed") {
|
|
1179
|
-
return null;
|
|
1180
|
-
}
|
|
1181
|
-
if (polyfill) {
|
|
1182
|
-
return polyfill(element);
|
|
1183
|
-
}
|
|
1184
|
-
let rawOffsetParent = element.offsetParent;
|
|
1185
|
-
if (getDocumentElement(element) === rawOffsetParent) {
|
|
1186
|
-
rawOffsetParent = rawOffsetParent.ownerDocument.body;
|
|
1187
|
-
}
|
|
1188
|
-
return rawOffsetParent;
|
|
1189
|
-
}
|
|
1190
|
-
function getOffsetParent(element, polyfill) {
|
|
1191
|
-
const win = getWindow(element);
|
|
1192
|
-
if (isTopLayer(element)) {
|
|
1193
|
-
return win;
|
|
1194
|
-
}
|
|
1195
|
-
if (!isHTMLElement(element)) {
|
|
1196
|
-
let svgOffsetParent = getParentNode(element);
|
|
1197
|
-
while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
|
|
1198
|
-
if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
|
|
1199
|
-
return svgOffsetParent;
|
|
1200
|
-
}
|
|
1201
|
-
svgOffsetParent = getParentNode(svgOffsetParent);
|
|
1202
|
-
}
|
|
1203
|
-
return win;
|
|
1204
|
-
}
|
|
1205
|
-
let offsetParent = getTrueOffsetParent(element, polyfill);
|
|
1206
|
-
while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
|
|
1207
|
-
offsetParent = getTrueOffsetParent(offsetParent, polyfill);
|
|
1208
|
-
}
|
|
1209
|
-
if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
|
|
1210
|
-
return win;
|
|
1211
|
-
}
|
|
1212
|
-
return offsetParent || getContainingBlock(element) || win;
|
|
1213
|
-
}
|
|
1214
|
-
const getElementRects = async function(data) {
|
|
1215
|
-
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
|
|
1216
|
-
const getDimensionsFn = this.getDimensions;
|
|
1217
|
-
const floatingDimensions = await getDimensionsFn(data.floating);
|
|
1218
|
-
return {
|
|
1219
|
-
reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
|
|
1220
|
-
floating: {
|
|
1221
|
-
x: 0,
|
|
1222
|
-
y: 0,
|
|
1223
|
-
width: floatingDimensions.width,
|
|
1224
|
-
height: floatingDimensions.height
|
|
1225
|
-
}
|
|
1226
|
-
};
|
|
1227
|
-
};
|
|
1228
|
-
function isRTL(element) {
|
|
1229
|
-
return getComputedStyle$1(element).direction === "rtl";
|
|
1230
|
-
}
|
|
1231
|
-
const platform = {
|
|
1232
|
-
convertOffsetParentRelativeRectToViewportRelativeRect,
|
|
1233
|
-
getDocumentElement,
|
|
1234
|
-
getClippingRect,
|
|
1235
|
-
getOffsetParent,
|
|
1236
|
-
getElementRects,
|
|
1237
|
-
getClientRects,
|
|
1238
|
-
getDimensions,
|
|
1239
|
-
getScale,
|
|
1240
|
-
isElement,
|
|
1241
|
-
isRTL
|
|
1242
|
-
};
|
|
1243
|
-
function rectsAreEqual(a, b) {
|
|
1244
|
-
return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
|
|
1245
|
-
}
|
|
1246
|
-
function observeMove(element, onMove) {
|
|
1247
|
-
let io = null;
|
|
1248
|
-
let timeoutId;
|
|
1249
|
-
const root = getDocumentElement(element);
|
|
1250
|
-
function cleanup() {
|
|
1251
|
-
var _io;
|
|
1252
|
-
clearTimeout(timeoutId);
|
|
1253
|
-
(_io = io) == null || _io.disconnect();
|
|
1254
|
-
io = null;
|
|
1255
|
-
}
|
|
1256
|
-
function refresh(skip, threshold) {
|
|
1257
|
-
if (skip === void 0) {
|
|
1258
|
-
skip = false;
|
|
1259
|
-
}
|
|
1260
|
-
if (threshold === void 0) {
|
|
1261
|
-
threshold = 1;
|
|
1262
|
-
}
|
|
1263
|
-
cleanup();
|
|
1264
|
-
const elementRectForRootMargin = element.getBoundingClientRect();
|
|
1265
|
-
const {
|
|
1266
|
-
left,
|
|
1267
|
-
top,
|
|
1268
|
-
width,
|
|
1269
|
-
height
|
|
1270
|
-
} = elementRectForRootMargin;
|
|
1271
|
-
if (!skip) {
|
|
1272
|
-
onMove();
|
|
1273
|
-
}
|
|
1274
|
-
if (!width || !height) {
|
|
1275
|
-
return;
|
|
1276
|
-
}
|
|
1277
|
-
const insetTop = floor(top);
|
|
1278
|
-
const insetRight = floor(root.clientWidth - (left + width));
|
|
1279
|
-
const insetBottom = floor(root.clientHeight - (top + height));
|
|
1280
|
-
const insetLeft = floor(left);
|
|
1281
|
-
const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
|
|
1282
|
-
const options = {
|
|
1283
|
-
rootMargin,
|
|
1284
|
-
threshold: max(0, min(1, threshold)) || 1
|
|
1285
|
-
};
|
|
1286
|
-
let isFirstUpdate = true;
|
|
1287
|
-
function handleObserve(entries) {
|
|
1288
|
-
const ratio = entries[0].intersectionRatio;
|
|
1289
|
-
if (ratio !== threshold) {
|
|
1290
|
-
if (!isFirstUpdate) {
|
|
1291
|
-
return refresh();
|
|
1292
|
-
}
|
|
1293
|
-
if (!ratio) {
|
|
1294
|
-
timeoutId = setTimeout(() => {
|
|
1295
|
-
refresh(false, 1e-7);
|
|
1296
|
-
}, 1e3);
|
|
1297
|
-
} else {
|
|
1298
|
-
refresh(false, ratio);
|
|
1299
|
-
}
|
|
1300
|
-
}
|
|
1301
|
-
if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
|
|
1302
|
-
refresh();
|
|
1303
|
-
}
|
|
1304
|
-
isFirstUpdate = false;
|
|
1305
|
-
}
|
|
1306
|
-
try {
|
|
1307
|
-
io = new IntersectionObserver(handleObserve, {
|
|
1308
|
-
...options,
|
|
1309
|
-
// Handle <iframe>s
|
|
1310
|
-
root: root.ownerDocument
|
|
1311
|
-
});
|
|
1312
|
-
} catch (_e) {
|
|
1313
|
-
io = new IntersectionObserver(handleObserve, options);
|
|
1314
|
-
}
|
|
1315
|
-
io.observe(element);
|
|
1316
|
-
}
|
|
1317
|
-
refresh(true);
|
|
1318
|
-
return cleanup;
|
|
1319
|
-
}
|
|
1320
|
-
function autoUpdate(reference, floating, update, options) {
|
|
1321
|
-
if (options === void 0) {
|
|
1322
|
-
options = {};
|
|
1323
|
-
}
|
|
1324
|
-
const {
|
|
1325
|
-
ancestorScroll = true,
|
|
1326
|
-
ancestorResize = true,
|
|
1327
|
-
elementResize = typeof ResizeObserver === "function",
|
|
1328
|
-
layoutShift = typeof IntersectionObserver === "function",
|
|
1329
|
-
animationFrame = false
|
|
1330
|
-
} = options;
|
|
1331
|
-
const referenceEl = unwrapElement(reference);
|
|
1332
|
-
const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
|
|
1333
|
-
ancestors.forEach((ancestor) => {
|
|
1334
|
-
ancestorScroll && ancestor.addEventListener("scroll", update, {
|
|
1335
|
-
passive: true
|
|
1336
|
-
});
|
|
1337
|
-
ancestorResize && ancestor.addEventListener("resize", update);
|
|
1338
|
-
});
|
|
1339
|
-
const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
|
|
1340
|
-
let reobserveFrame = -1;
|
|
1341
|
-
let resizeObserver = null;
|
|
1342
|
-
if (elementResize) {
|
|
1343
|
-
resizeObserver = new ResizeObserver((_ref) => {
|
|
1344
|
-
let [firstEntry] = _ref;
|
|
1345
|
-
if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
|
|
1346
|
-
resizeObserver.unobserve(floating);
|
|
1347
|
-
cancelAnimationFrame(reobserveFrame);
|
|
1348
|
-
reobserveFrame = requestAnimationFrame(() => {
|
|
1349
|
-
var _resizeObserver;
|
|
1350
|
-
(_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
|
|
1351
|
-
});
|
|
1352
|
-
}
|
|
1353
|
-
update();
|
|
1354
|
-
});
|
|
1355
|
-
if (referenceEl && !animationFrame) {
|
|
1356
|
-
resizeObserver.observe(referenceEl);
|
|
1357
|
-
}
|
|
1358
|
-
resizeObserver.observe(floating);
|
|
1359
|
-
}
|
|
1360
|
-
let frameId;
|
|
1361
|
-
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
|
|
1362
|
-
if (animationFrame) {
|
|
1363
|
-
frameLoop();
|
|
1364
|
-
}
|
|
1365
|
-
function frameLoop() {
|
|
1366
|
-
const nextRefRect = getBoundingClientRect(reference);
|
|
1367
|
-
if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
|
|
1368
|
-
update();
|
|
1369
|
-
}
|
|
1370
|
-
prevRefRect = nextRefRect;
|
|
1371
|
-
frameId = requestAnimationFrame(frameLoop);
|
|
1372
|
-
}
|
|
1373
|
-
update();
|
|
1374
|
-
return () => {
|
|
1375
|
-
var _resizeObserver2;
|
|
1376
|
-
ancestors.forEach((ancestor) => {
|
|
1377
|
-
ancestorScroll && ancestor.removeEventListener("scroll", update);
|
|
1378
|
-
ancestorResize && ancestor.removeEventListener("resize", update);
|
|
1379
|
-
});
|
|
1380
|
-
cleanupIo == null || cleanupIo();
|
|
1381
|
-
(_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
|
|
1382
|
-
resizeObserver = null;
|
|
1383
|
-
if (animationFrame) {
|
|
1384
|
-
cancelAnimationFrame(frameId);
|
|
1385
|
-
}
|
|
1386
|
-
};
|
|
1387
|
-
}
|
|
1388
|
-
const offset = offset$1;
|
|
1389
|
-
const flip = flip$1;
|
|
1390
|
-
const size = size$1;
|
|
1391
|
-
const arrow = arrow$1;
|
|
1392
|
-
const computePosition = (reference, floating, options) => {
|
|
1393
|
-
const cache = /* @__PURE__ */ new Map();
|
|
1394
|
-
const mergedOptions = {
|
|
1395
|
-
platform,
|
|
1396
|
-
...options
|
|
1397
|
-
};
|
|
1398
|
-
const platformWithCache = {
|
|
1399
|
-
...mergedOptions.platform,
|
|
1400
|
-
_c: cache
|
|
1401
|
-
};
|
|
1402
|
-
return computePosition$1(reference, floating, {
|
|
1403
|
-
...mergedOptions,
|
|
1404
|
-
platform: platformWithCache
|
|
1405
|
-
});
|
|
1406
|
-
};
|
|
1407
|
-
const styles = "/*\n[ WJ Popup ]\n*/\n\n:host {\n --wje-popup-top: auto;\n --wje-popup-left: auto;\n --wje-popup-mobile-transition-duration: 250ms;\n --wje-popup-mobile-transition-easing: ease;\n\n display: flex; /* zmenene z contents na flex kvoli breadcrumbs v a jeho trom bodkam */\n}\n\n.popup-backdrop {\n display: none;\n}\n\n.native-popup {\n position: absolute;\n isolation: isolate;\n z-index: 999;\n left: var(--wje-popup-left);\n top: var(--wje-popup-top);\n}\n.native-popup:not(.popup-active) {\n display: none;\n}\n\n.popup-backdrop.popup-mobile-sheet {\n display: block;\n position: fixed;\n inset: 0;\n z-index: 998;\n opacity: 0;\n pointer-events: none;\n background: var(\n --wje-popup-backdrop-background,\n var(--wje-sliding-container-backdrop-background, var(--wje-backdrop, rgba(0, 0, 0, 0.35)))\n );\n transition:\n opacity var(--wje-popup-mobile-transition-duration) var(--wje-popup-mobile-transition-easing),\n visibility 0s linear var(--wje-popup-mobile-transition-duration);\n visibility: hidden;\n}\n\n.popup-backdrop.popup-mobile-sheet.popup-active {\n opacity: var(\n --wje-popup-backdrop-opacity,\n var(--wje-sliding-container-backdrop-opacity, var(--wje-backdrop-opacity, 1))\n );\n pointer-events: auto;\n visibility: visible;\n transition-delay: 0s;\n}\n\n.native-popup.popup-mobile-sheet {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n position: fixed;\n inset: auto 0 0 0;\n left: 0;\n right: 0;\n top: auto;\n width: 100vw;\n max-width: 100vw;\n max-height: var(--wje-popup-mobile-max-height, 90vh);\n overflow: auto;\n background: var(\n --wje-popup-mobile-background,\n var(--wje-select-options-background-color, var(--wje-color-contrast-0, #fff))\n );\n box-shadow: var(--wje-popup-mobile-box-shadow, 0 -8px 32px rgba(0, 0, 0, 0.16));\n border-radius: var(\n --wje-popup-mobile-border-radius,\n var(\n --wje-sliding-container-sheet-border-radius,\n var(--wje-border-radius-large, 16px) var(--wje-border-radius-large, 16px) 0 0\n )\n );\n padding-bottom: env(safe-area-inset-bottom, 0);\n transform: translateY(100%);\n transition:\n transform var(--wje-popup-mobile-transition-duration) var(--wje-popup-mobile-transition-easing),\n visibility 0s linear var(--wje-popup-mobile-transition-duration);\n visibility: hidden;\n pointer-events: none;\n}\n\n.native-popup.popup-mobile-sheet.popup-active {\n transform: translateY(0);\n visibility: visible;\n pointer-events: auto;\n transition-delay: 0s;\n}\n\n.popup-loader.overlay {\n position: absolute;\n inset: var(--wje-popup-loader-inset, 0);\n background: var(\n --wje-popup-overlay-background,\n var(--wje-select-options-background-color, var(--wje-color-contrast-0, #fff))\n );\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n}\n.popup-loader.fade-out {\n opacity: 0;\n transition: opacity 0.3s ease;\n pointer-events: none;\n}\n";
|
|
1408
|
-
const POPUP_MOBILE_SHEET_TRANSITION_FALLBACK_MS = 250;
|
|
1409
|
-
class Popup extends WJElement {
|
|
1410
|
-
/**
|
|
1411
|
-
* Creates an instance of Popup.
|
|
1412
|
-
* @class
|
|
1413
|
-
*/
|
|
1414
|
-
constructor() {
|
|
1415
|
-
super();
|
|
1416
|
-
__publicField(this, "className", "Popup");
|
|
1417
|
-
__publicField(this, "manualCallback", (e) => {
|
|
1418
|
-
if (this.hasAttribute("disabled")) return;
|
|
1419
|
-
this.showHide();
|
|
1420
|
-
});
|
|
1421
|
-
__publicField(this, "clickHandler", (e) => {
|
|
1422
|
-
const path = typeof e.composedPath === "function" ? e.composedPath() : [];
|
|
1423
|
-
const isMenuClick = path.some(
|
|
1424
|
-
(n) => n && (n.tagName === "WJE-MENU-ITEM" || n.tagName === "WJE-MENU")
|
|
1425
|
-
// ||
|
|
1426
|
-
// n.tagName === 'WJE-DROPDOWNs'
|
|
1427
|
-
);
|
|
1428
|
-
if (isMenuClick) return;
|
|
1429
|
-
const inside = path.includes(this) || this.floatingEl && path.includes(this.floatingEl);
|
|
1430
|
-
if (!inside && this.hasAttribute("active")) this.hide(true);
|
|
1431
|
-
});
|
|
1432
|
-
__publicField(this, "handleBackdropClick", (e) => {
|
|
1433
|
-
var _a;
|
|
1434
|
-
if (!this.hasAttribute("active") || !((_a = this.floatingEl) == null ? void 0 : _a.classList.contains("popup-mobile-sheet"))) return;
|
|
1435
|
-
e.stopPropagation();
|
|
1436
|
-
this.hide(true);
|
|
1437
|
-
});
|
|
1438
|
-
__publicField(this, "handleViewportResize", () => {
|
|
1439
|
-
if (!this.mobilePresentation || !this.hasAttribute("active")) return;
|
|
1440
|
-
this.syncResponsivePresentation();
|
|
1441
|
-
});
|
|
1442
|
-
/**
|
|
1443
|
-
* Removes the active attribute when the popup is hidden.
|
|
1444
|
-
*/
|
|
1445
|
-
__publicField(this, "handleHide", () => {
|
|
1446
|
-
this.removeAttribute("active");
|
|
1447
|
-
});
|
|
1448
|
-
this._manual = false;
|
|
1449
|
-
this._contentAwareSize = false;
|
|
1450
|
-
this._contentReadyHandler = () => this.markContentReady();
|
|
1451
|
-
this._bottomSheetRestoreTimeout = null;
|
|
1452
|
-
}
|
|
1453
|
-
set loader(value) {
|
|
1454
|
-
if (value) {
|
|
1455
|
-
this.setAttribute("loader", "");
|
|
1456
|
-
this._showLoader();
|
|
1457
|
-
} else {
|
|
1458
|
-
this.removeAttribute("loader");
|
|
1459
|
-
this._hideLoader();
|
|
1460
|
-
}
|
|
1461
|
-
}
|
|
1462
|
-
get loader() {
|
|
1463
|
-
return this.hasAttribute("loader");
|
|
1464
|
-
}
|
|
1465
|
-
set contentAwareSize(value) {
|
|
1466
|
-
this._contentAwareSize = Boolean(value);
|
|
1467
|
-
}
|
|
1468
|
-
get contentAwareSize() {
|
|
1469
|
-
return this._contentAwareSize === true;
|
|
1470
|
-
}
|
|
1471
|
-
/**
|
|
1472
|
-
* Sets the manual property of the popup.
|
|
1473
|
-
* @param {boolean} value The value to set.
|
|
1474
|
-
*/
|
|
1475
|
-
set manual(value) {
|
|
1476
|
-
if (value) {
|
|
1477
|
-
this.setAttribute("manual", "");
|
|
1478
|
-
} else {
|
|
1479
|
-
this.removeAttribute("manual");
|
|
1480
|
-
}
|
|
1481
|
-
}
|
|
1482
|
-
/**
|
|
1483
|
-
* Gets the manual property of the popup.
|
|
1484
|
-
* @returns {boolean} The value of the manual property.
|
|
1485
|
-
*/
|
|
1486
|
-
get manual() {
|
|
1487
|
-
return this.hasAttribute("manual");
|
|
1488
|
-
}
|
|
1489
|
-
/**
|
|
1490
|
-
* Sets or removes the 'portal' attribute on the element based on the provided value.
|
|
1491
|
-
* If the value is truthy, the 'portal' attribute will be added.
|
|
1492
|
-
* If the value is falsy, the 'portal' attribute will be removed.
|
|
1493
|
-
* @param {boolean} value Determines whether the 'portal' attribute should be added or removed.
|
|
1494
|
-
*/
|
|
1495
|
-
set portal(value) {
|
|
1496
|
-
if (value) this.setAttribute("portal", value);
|
|
1497
|
-
else this.removeAttribute("portal");
|
|
1498
|
-
}
|
|
1499
|
-
/**
|
|
1500
|
-
* Returns whether the 'portal' attribute is present on the element.
|
|
1501
|
-
* @returns {boolean} True if the 'portal' attribute exists, otherwise false.
|
|
1502
|
-
*/
|
|
1503
|
-
get portal() {
|
|
1504
|
-
return this.hasAttribute("portal");
|
|
1505
|
-
}
|
|
1506
|
-
set mobilePresentation(value) {
|
|
1507
|
-
if (value) this.setAttribute("mobile-presentation", value);
|
|
1508
|
-
else this.removeAttribute("mobile-presentation");
|
|
1509
|
-
}
|
|
1510
|
-
get mobilePresentation() {
|
|
1511
|
-
return this.getAttribute("mobile-presentation");
|
|
1512
|
-
}
|
|
1513
|
-
set mobileBreakPoint(value) {
|
|
1514
|
-
if (value) this.setAttribute("mobile-break-point", value);
|
|
1515
|
-
else this.removeAttribute("mobile-break-point");
|
|
1516
|
-
}
|
|
1517
|
-
get mobileBreakPoint() {
|
|
1518
|
-
return this.getAttribute("mobile-break-point") || "768";
|
|
1519
|
-
}
|
|
1520
|
-
get floatingEl() {
|
|
1521
|
-
return this._floatingEl || this.native;
|
|
1522
|
-
}
|
|
1523
|
-
get backdropEl() {
|
|
1524
|
-
return this._portaled ? this._portalBackdrop : this.backdrop;
|
|
1525
|
-
}
|
|
1526
|
-
/**
|
|
1527
|
-
* Returns the CSS styles for the component.
|
|
1528
|
-
* @static
|
|
1529
|
-
* @returns {CSSStyleSheet} The CSS styles for the component.
|
|
1530
|
-
*/
|
|
1531
|
-
static get cssStyleSheet() {
|
|
1532
|
-
return styles;
|
|
1533
|
-
}
|
|
1534
|
-
/**
|
|
1535
|
-
* Returns the list of attributes to observe for changes.
|
|
1536
|
-
* @static
|
|
1537
|
-
* @returns {Array<string>}
|
|
1538
|
-
*/
|
|
1539
|
-
static get observedAttributes() {
|
|
1540
|
-
return [];
|
|
1541
|
-
}
|
|
1542
|
-
/**
|
|
1543
|
-
* Sets up the attributes for the component.
|
|
1544
|
-
*/
|
|
1545
|
-
setupAttributes() {
|
|
1546
|
-
this.isShadowRoot = "open";
|
|
1547
|
-
this._hideFloatingLightDomContentBeforeRender();
|
|
1548
|
-
}
|
|
1549
|
-
_hideFloatingLightDomContentBeforeRender() {
|
|
1550
|
-
if (this._hiddenFloatingLightDomContent) return;
|
|
1551
|
-
const floatingChildren = Array.from(this.children).filter((el) => el.getAttribute("slot") !== "anchor");
|
|
1552
|
-
if (floatingChildren.length === 0) return;
|
|
1553
|
-
this._hiddenFloatingLightDomContent = floatingChildren.map((el) => {
|
|
1554
|
-
const display = el.style.getPropertyValue("display");
|
|
1555
|
-
const priority = el.style.getPropertyPriority("display");
|
|
1556
|
-
el.style.setProperty("display", "none");
|
|
1557
|
-
return { el, display, priority };
|
|
1558
|
-
});
|
|
1559
|
-
}
|
|
1560
|
-
_restoreFloatingLightDomContentAfterRender() {
|
|
1561
|
-
var _a;
|
|
1562
|
-
(_a = this._hiddenFloatingLightDomContent) == null ? void 0 : _a.forEach(({ el, display, priority }) => {
|
|
1563
|
-
if (display) {
|
|
1564
|
-
el.style.setProperty("display", display, priority);
|
|
1565
|
-
} else {
|
|
1566
|
-
el.style.removeProperty("display");
|
|
1567
|
-
}
|
|
1568
|
-
});
|
|
1569
|
-
this._hiddenFloatingLightDomContent = null;
|
|
1570
|
-
}
|
|
1571
|
-
afterDisconnect() {
|
|
1572
|
-
var _a, _b, _c;
|
|
1573
|
-
this.clearBottomSheetRestoreTimeout();
|
|
1574
|
-
window.removeEventListener("resize", this.handleViewportResize);
|
|
1575
|
-
event.removeListener(this.anchorEl, "click", this.manualCallback);
|
|
1576
|
-
document.removeEventListener("click", this.clickHandler, { capture: true });
|
|
1577
|
-
this.removeEventListener("wje-popup:content-ready", this._contentReadyHandler);
|
|
1578
|
-
this._contentReadyListenerAttached = false;
|
|
1579
|
-
(_a = this.backdrop) == null ? void 0 : _a.removeEventListener("click", this.handleBackdropClick);
|
|
1580
|
-
(_b = this._portalBackdrop) == null ? void 0 : _b.removeEventListener("click", this.handleBackdropClick);
|
|
1581
|
-
this._restoreContentFromPortal();
|
|
1582
|
-
(_c = this.cleanup) == null ? void 0 : _c.call(this);
|
|
1583
|
-
}
|
|
1584
|
-
beforeDraw(context, store, params) {
|
|
1585
|
-
var _a;
|
|
1586
|
-
(_a = this.cleanup) == null ? void 0 : _a.call(this);
|
|
1587
|
-
}
|
|
1588
|
-
/**
|
|
1589
|
-
* Draws the component for the popup.
|
|
1590
|
-
* @returns {DocumentFragment}
|
|
1591
|
-
*/
|
|
1592
|
-
draw() {
|
|
1593
|
-
let fragment = document.createDocumentFragment();
|
|
1594
|
-
let slotAnchor = document.createElement("slot");
|
|
1595
|
-
slotAnchor.setAttribute("name", "anchor");
|
|
1596
|
-
let slotArrow = document.createElement("slot");
|
|
1597
|
-
slotArrow.setAttribute("name", "arrow");
|
|
1598
|
-
let backdrop = document.createElement("div");
|
|
1599
|
-
backdrop.setAttribute("part", "backdrop");
|
|
1600
|
-
backdrop.classList.add("popup-backdrop");
|
|
1601
|
-
backdrop.addEventListener("click", this.handleBackdropClick);
|
|
1602
|
-
let native = document.createElement("div");
|
|
1603
|
-
native.setAttribute("part", "native");
|
|
1604
|
-
native.classList.add("native-popup");
|
|
1605
|
-
let slot = document.createElement("slot");
|
|
1606
|
-
let loader = document.createElement("div");
|
|
1607
|
-
loader.classList.add("popup-loader", "overlay");
|
|
1608
|
-
loader.setAttribute("part", "loader");
|
|
1609
|
-
loader.textContent = "Loading...";
|
|
1610
|
-
if (this.loader) native.append(loader);
|
|
1611
|
-
native.append(slot);
|
|
1612
|
-
native.append(slotArrow);
|
|
1613
|
-
fragment.append(slotAnchor);
|
|
1614
|
-
fragment.append(backdrop);
|
|
1615
|
-
fragment.append(native);
|
|
1616
|
-
this.slotAnchor = slotAnchor;
|
|
1617
|
-
this.slotArrow = slotArrow;
|
|
1618
|
-
this.defaultSlot = slot;
|
|
1619
|
-
this.backdrop = backdrop;
|
|
1620
|
-
this.native = native;
|
|
1621
|
-
this.loaderEl = loader;
|
|
1622
|
-
return fragment;
|
|
1623
|
-
}
|
|
1624
|
-
/**
|
|
1625
|
-
* After Draws the component.
|
|
1626
|
-
*/
|
|
1627
|
-
afterDraw() {
|
|
1628
|
-
this._restoreFloatingLightDomContentAfterRender();
|
|
1629
|
-
this.setAnchor();
|
|
1630
|
-
window.removeEventListener("resize", this.handleViewportResize);
|
|
1631
|
-
window.addEventListener("resize", this.handleViewportResize);
|
|
1632
|
-
if (!this._contentReadyListenerAttached) {
|
|
1633
|
-
this.addEventListener("wje-popup:content-ready", this._contentReadyHandler);
|
|
1634
|
-
this._contentReadyListenerAttached = true;
|
|
1635
|
-
}
|
|
1636
|
-
if (this.hasAttribute("active")) this.show(false);
|
|
1637
|
-
if (!this.hasAttribute("active")) this.hide(false);
|
|
1638
|
-
}
|
|
1639
|
-
/**
|
|
1640
|
-
* Sets the anchor for the popup.
|
|
1641
|
-
* Adds a click event listener to the anchor element.
|
|
1642
|
-
*/
|
|
1643
|
-
setAnchor() {
|
|
1644
|
-
if (this.slotAnchor && typeof this.anchor === "string") {
|
|
1645
|
-
const root = this.getRootNode();
|
|
1646
|
-
this.anchorEl = root.querySelector("#" + this.anchor);
|
|
1647
|
-
} else if (this.slotAnchor instanceof HTMLSlotElement) {
|
|
1648
|
-
this.anchorEl = this.slotAnchor.assignedElements({ flatten: true })[0];
|
|
1649
|
-
}
|
|
1650
|
-
if (this.manual) {
|
|
1651
|
-
event.addListener(this.anchorEl, "click", null, this.manualCallback, { stopPropagation: true });
|
|
1652
|
-
}
|
|
1653
|
-
}
|
|
1654
|
-
clearBottomSheetRestoreTimeout() {
|
|
1655
|
-
if (this._bottomSheetRestoreTimeout === null) return;
|
|
1656
|
-
window.clearTimeout(this._bottomSheetRestoreTimeout);
|
|
1657
|
-
this._bottomSheetRestoreTimeout = null;
|
|
1658
|
-
}
|
|
1659
|
-
isBottomSheetActive() {
|
|
1660
|
-
return this.mobilePresentation === "bottom-sheet" && window.innerWidth <= +this.mobileBreakPoint;
|
|
1661
|
-
}
|
|
1662
|
-
setBottomSheetState(isActive) {
|
|
1663
|
-
const native = this.floatingEl;
|
|
1664
|
-
const backdrop = this.backdropEl;
|
|
1665
|
-
if (!native || !backdrop) return;
|
|
1666
|
-
native.classList.add("popup-mobile-sheet");
|
|
1667
|
-
backdrop.classList.add("popup-mobile-sheet");
|
|
1668
|
-
native.classList.toggle("popup-active", isActive);
|
|
1669
|
-
backdrop.classList.toggle("popup-active", isActive);
|
|
1670
|
-
}
|
|
1671
|
-
clearBottomSheetState() {
|
|
1672
|
-
[this.native, this.backdrop, this._portalNative, this._portalBackdrop].forEach((el) => {
|
|
1673
|
-
el == null ? void 0 : el.classList.remove("popup-mobile-sheet", "popup-active");
|
|
1674
|
-
});
|
|
1675
|
-
}
|
|
1676
|
-
rebindPortaledRouter() {
|
|
1677
|
-
if (!this._portalShadow) return;
|
|
1678
|
-
const detail = {
|
|
1679
|
-
root: this._portalShadow,
|
|
1680
|
-
container: this._portalContainer,
|
|
1681
|
-
floating: this._portalNative
|
|
1682
|
-
};
|
|
1683
|
-
document.dispatchEvent(new CustomEvent("wje-router:rebind", { bubbles: true, composed: true, detail }));
|
|
1684
|
-
if (typeof window.bindRouterLinks === "function") {
|
|
1685
|
-
window.bindRouterLinks(this._portalShadow);
|
|
1686
|
-
}
|
|
1687
|
-
}
|
|
1688
|
-
syncResponsivePresentation() {
|
|
1689
|
-
var _a, _b, _c, _d, _e, _f;
|
|
1690
|
-
const shouldUseBottomSheet = this.isBottomSheetActive();
|
|
1691
|
-
const isUsingBottomSheet = (_b = (_a = this.floatingEl) == null ? void 0 : _a.classList) == null ? void 0 : _b.contains("popup-mobile-sheet");
|
|
1692
|
-
if (shouldUseBottomSheet) {
|
|
1693
|
-
(_c = this.cleanup) == null ? void 0 : _c.call(this);
|
|
1694
|
-
this.cleanup = void 0;
|
|
1695
|
-
if (!this._portaled) {
|
|
1696
|
-
this._mountContentToPortal();
|
|
1697
|
-
this.rebindPortaledRouter();
|
|
1698
|
-
}
|
|
1699
|
-
this.setBottomSheetState(false);
|
|
1700
|
-
(_d = this.floatingEl) == null ? void 0 : _d.getBoundingClientRect();
|
|
1701
|
-
(_e = this.backdropEl) == null ? void 0 : _e.getBoundingClientRect();
|
|
1702
|
-
requestAnimationFrame(() => {
|
|
1703
|
-
if (!this.hasAttribute("active") || !this.isBottomSheetActive()) return;
|
|
1704
|
-
this.setBottomSheetState(true);
|
|
1705
|
-
});
|
|
1706
|
-
return;
|
|
1707
|
-
}
|
|
1708
|
-
if (isUsingBottomSheet) {
|
|
1709
|
-
this.clearBottomSheetRestoreTimeout();
|
|
1710
|
-
this.clearBottomSheetState();
|
|
1711
|
-
if (!this.portal && this._portaled) {
|
|
1712
|
-
this._restoreContentFromPortal();
|
|
1713
|
-
}
|
|
1714
|
-
}
|
|
1715
|
-
if (this.anchorEl && this.floatingEl) {
|
|
1716
|
-
this.floatingEl.classList.add("popup-active");
|
|
1717
|
-
(_f = this.cleanup) == null ? void 0 : _f.call(this);
|
|
1718
|
-
this.cleanup = autoUpdate(this.anchorEl, this.floatingEl, () => {
|
|
1719
|
-
this.reposition();
|
|
1720
|
-
});
|
|
1721
|
-
this.reposition();
|
|
1722
|
-
}
|
|
1723
|
-
}
|
|
1724
|
-
getBottomSheetTransitionDurationMs() {
|
|
1725
|
-
const parseDuration = (value) => {
|
|
1726
|
-
const trimmedValue = value == null ? void 0 : value.trim();
|
|
1727
|
-
if (!trimmedValue) return 0;
|
|
1728
|
-
if (trimmedValue.endsWith("ms")) return Number.parseFloat(trimmedValue) || 0;
|
|
1729
|
-
if (trimmedValue.endsWith("s")) return (Number.parseFloat(trimmedValue) || 0) * 1e3;
|
|
1730
|
-
return Number.parseFloat(trimmedValue) || 0;
|
|
1731
|
-
};
|
|
1732
|
-
const getMaxDuration = (el) => {
|
|
1733
|
-
if (!el) return 0;
|
|
1734
|
-
const computedStyles = getComputedStyle(el);
|
|
1735
|
-
const durations = computedStyles.transitionDuration.split(",");
|
|
1736
|
-
const delays = computedStyles.transitionDelay.split(",");
|
|
1737
|
-
const count = Math.max(durations.length, delays.length);
|
|
1738
|
-
let maxDuration = 0;
|
|
1739
|
-
for (let i = 0; i < count; i++) {
|
|
1740
|
-
const duration = parseDuration(durations[i] || durations[durations.length - 1]);
|
|
1741
|
-
const delay = parseDuration(delays[i] || delays[delays.length - 1]);
|
|
1742
|
-
maxDuration = Math.max(maxDuration, duration + delay);
|
|
1743
|
-
}
|
|
1744
|
-
return maxDuration;
|
|
1745
|
-
};
|
|
1746
|
-
const transitionDuration = Math.max(getMaxDuration(this.floatingEl), getMaxDuration(this.backdropEl));
|
|
1747
|
-
return transitionDuration || POPUP_MOBILE_SHEET_TRANSITION_FALLBACK_MS;
|
|
1748
|
-
}
|
|
1749
|
-
/**
|
|
1750
|
-
* Toggles the active attribute of the popup.
|
|
1751
|
-
*/
|
|
1752
|
-
showHide() {
|
|
1753
|
-
if (this.hasAttribute("active")) {
|
|
1754
|
-
this.hide();
|
|
1755
|
-
} else {
|
|
1756
|
-
event.dispatchCustomEvent(this, "wje-popup:beforeshow");
|
|
1757
|
-
this.show();
|
|
1758
|
-
event.dispatchCustomEvent(this, "wje-popup:aftershow");
|
|
1759
|
-
}
|
|
1760
|
-
}
|
|
1761
|
-
/**
|
|
1762
|
-
* Repositions the popup.
|
|
1763
|
-
* Uses the floating-ui library to compute the position.
|
|
1764
|
-
*/
|
|
1765
|
-
reposition() {
|
|
1766
|
-
var _a, _b;
|
|
1767
|
-
if ((_b = (_a = this.floatingEl) == null ? void 0 : _a.classList) == null ? void 0 : _b.contains("popup-mobile-sheet")) return;
|
|
1768
|
-
const middleware = [];
|
|
1769
|
-
this.offsetCalc = +this.offset || 0;
|
|
1770
|
-
if (this.portal && this._portaled && this.floatingEl) {
|
|
1771
|
-
this.arrow = this.floatingEl.querySelector('[slot="arrow"]');
|
|
1772
|
-
} else if (this.slotArrow instanceof HTMLSlotElement) {
|
|
1773
|
-
this.arrow = this.slotArrow.assignedElements({ flatten: true })[0];
|
|
1774
|
-
}
|
|
1775
|
-
if (this.arrow) {
|
|
1776
|
-
middleware.push(
|
|
1777
|
-
arrow({
|
|
1778
|
-
element: this.arrow
|
|
1779
|
-
})
|
|
1780
|
-
);
|
|
1781
|
-
this.offsetCalc = Math.sqrt(2 * this.arrow.offsetWidth ** 2) / 2 + +this.offset;
|
|
1782
|
-
}
|
|
1783
|
-
middleware.push(offset(this.offsetCalc));
|
|
1784
|
-
middleware.push(flip());
|
|
1785
|
-
if (this.hasAttribute("size")) {
|
|
1786
|
-
middleware.push(
|
|
1787
|
-
size({
|
|
1788
|
-
apply: ({ elements }) => {
|
|
1789
|
-
if (this.contentAwareSize) {
|
|
1790
|
-
Object.assign(elements.floating.style, {
|
|
1791
|
-
minWidth: `${elements.reference.offsetWidth}px`,
|
|
1792
|
-
width: ""
|
|
1793
|
-
});
|
|
1794
|
-
return;
|
|
1795
|
-
}
|
|
1796
|
-
Object.assign(elements.floating.style, {
|
|
1797
|
-
minWidth: "",
|
|
1798
|
-
width: `${elements.reference.offsetWidth}px`
|
|
1799
|
-
});
|
|
1800
|
-
}
|
|
1801
|
-
})
|
|
1802
|
-
);
|
|
1803
|
-
}
|
|
1804
|
-
computePosition(this.anchorEl, this.floatingEl, {
|
|
1805
|
-
placement: this.placement || "bottom",
|
|
1806
|
-
strategy: "fixed",
|
|
1807
|
-
middleware
|
|
1808
|
-
}).then(({ x, y, middlewareData, placement, strategy }) => {
|
|
1809
|
-
this.floatingEl.style.setProperty("--wje-popup-left", x + "px");
|
|
1810
|
-
this.floatingEl.style.setProperty("--wje-popup-top", y + "px");
|
|
1811
|
-
this.floatingEl.style.position = strategy;
|
|
1812
|
-
if (this.arrow) {
|
|
1813
|
-
const staticSide = {
|
|
1814
|
-
top: "bottom",
|
|
1815
|
-
right: "left",
|
|
1816
|
-
bottom: "top",
|
|
1817
|
-
left: "right"
|
|
1818
|
-
}[placement];
|
|
1819
|
-
if (middlewareData.arrow) {
|
|
1820
|
-
const { width, height } = this.floatingEl.getBoundingClientRect();
|
|
1821
|
-
let osX = middlewareData.arrow.x;
|
|
1822
|
-
let osY = middlewareData.arrow.y;
|
|
1823
|
-
Object.assign(this.arrow.style, {
|
|
1824
|
-
left: osX !== null && osX !== void 0 ? `${width / 2 - this.arrow.offsetWidth / 2}px` : "",
|
|
1825
|
-
top: osY !== null && osY !== void 0 ? `${height / 2 - this.arrow.offsetHeight / 2}px` : "",
|
|
1826
|
-
[staticSide]: `${-this.arrow.offsetHeight / 2}px`
|
|
1827
|
-
});
|
|
1828
|
-
}
|
|
1829
|
-
}
|
|
1830
|
-
});
|
|
1831
|
-
event.dispatchCustomEvent(this, "wje-popup:reposition", {
|
|
1832
|
-
data: { top: "bottom", right: "left", bottom: "top", left: "right" },
|
|
1833
|
-
context: this,
|
|
1834
|
-
event: this
|
|
1835
|
-
});
|
|
1836
|
-
}
|
|
1837
|
-
/**
|
|
1838
|
-
* Mounts content to a portal container by creating or ensuring a portal root and mirroring
|
|
1839
|
-
* the host's classes, attributes, and slot contents onto the portal. This method manages the
|
|
1840
|
-
* movement of default and arrow slot content into the portal shadow DOM, while also setting
|
|
1841
|
-
* up necessary mutation observers to keep attributes in sync.
|
|
1842
|
-
* @returns {void} Does not return a value.
|
|
1843
|
-
*/
|
|
1844
|
-
_mountContentToPortal() {
|
|
1845
|
-
if (this._portaled) return;
|
|
1846
|
-
this._ensurePortalRoot();
|
|
1847
|
-
if (!this._portalNative) {
|
|
1848
|
-
this._portalBackdrop = document.createElement("div");
|
|
1849
|
-
this._portalBackdrop.setAttribute("part", "backdrop");
|
|
1850
|
-
this._portalBackdrop.classList.add("popup-backdrop");
|
|
1851
|
-
this._portalBackdrop.addEventListener("click", this.handleBackdropClick);
|
|
1852
|
-
this._portalNative = document.createElement("div");
|
|
1853
|
-
this._portalNative.setAttribute("part", "native");
|
|
1854
|
-
this._portalNative.classList.add("native-popup");
|
|
1855
|
-
this._portalSlot = document.createElement("slot");
|
|
1856
|
-
this._portalArrowSlot = document.createElement("slot");
|
|
1857
|
-
this._portalArrowSlot.setAttribute("name", "arrow");
|
|
1858
|
-
this._portalNative.append(this._portalSlot, this._portalArrowSlot);
|
|
1859
|
-
}
|
|
1860
|
-
this._portalShadow.append(this._portalBackdrop);
|
|
1861
|
-
this._portalShadow.append(this._portalNative);
|
|
1862
|
-
const mirrorAll = () => {
|
|
1863
|
-
for (const { name } of Array.from(this._portalContainer.attributes)) {
|
|
1864
|
-
if (name === "data-wje-popup-portal") continue;
|
|
1865
|
-
this._portalContainer.removeAttribute(name);
|
|
1866
|
-
}
|
|
1867
|
-
for (const attr of Array.from(this.attributes)) {
|
|
1868
|
-
this._portalContainer.setAttribute(attr.name, attr.value ?? "");
|
|
1869
|
-
}
|
|
1870
|
-
this._portalContainer.setAttribute("class", this.getAttribute("class") || "");
|
|
1871
|
-
};
|
|
1872
|
-
mirrorAll();
|
|
1873
|
-
this._portalAttrObserver = new MutationObserver((records) => {
|
|
1874
|
-
for (const r of records) {
|
|
1875
|
-
if (r.type === "attributes") {
|
|
1876
|
-
const name = r.attributeName;
|
|
1877
|
-
const val = this.getAttribute(name);
|
|
1878
|
-
if (val === null) this._portalContainer.removeAttribute(name);
|
|
1879
|
-
else this._portalContainer.setAttribute(name, val);
|
|
1880
|
-
}
|
|
1881
|
-
}
|
|
1882
|
-
});
|
|
1883
|
-
this._portalAttrObserver.observe(this, { attributes: true });
|
|
1884
|
-
const defaultSlot = this.defaultSlot;
|
|
1885
|
-
const defNodes = (defaultSlot ? defaultSlot.assignedNodes({ flatten: true }) : []).filter(
|
|
1886
|
-
(n) => n && n.nodeType === Node.ELEMENT_NODE || n && n.nodeType === Node.TEXT_NODE
|
|
1887
|
-
);
|
|
1888
|
-
this._defPlaceholders = [];
|
|
1889
|
-
for (const n of defNodes) {
|
|
1890
|
-
const ph = document.createComment("wje-portal-default");
|
|
1891
|
-
this._defPlaceholders.push({ node: n, ph });
|
|
1892
|
-
if (n.parentNode) n.parentNode.insertBefore(ph, n.nextSibling);
|
|
1893
|
-
this._portalContainer.append(n);
|
|
1894
|
-
}
|
|
1895
|
-
const arrowNodes = (this.slotArrow instanceof HTMLSlotElement ? this.slotArrow.assignedNodes({ flatten: true }) : []).filter((n) => n && n.nodeType === Node.ELEMENT_NODE || n && n.nodeType === Node.TEXT_NODE);
|
|
1896
|
-
this._arrowPlaceholders = [];
|
|
1897
|
-
for (const n of arrowNodes) {
|
|
1898
|
-
const ph = document.createComment("wje-portal-arrow");
|
|
1899
|
-
this._arrowPlaceholders.push({ node: n, ph });
|
|
1900
|
-
if (n.parentNode) n.parentNode.insertBefore(ph, n.nextSibling);
|
|
1901
|
-
this._portalContainer.append(n);
|
|
1902
|
-
}
|
|
1903
|
-
this._floatingEl = this._portalNative;
|
|
1904
|
-
this._portaled = true;
|
|
1905
|
-
this._floatingEl = this._portalNative;
|
|
1906
|
-
this._portaled = true;
|
|
1907
|
-
event.dispatchCustomEvent(this, "wje-router:rebind", {
|
|
1908
|
-
root: this._portalShadow,
|
|
1909
|
-
container: this._portalContainer,
|
|
1910
|
-
floating: this._portalNative
|
|
1911
|
-
});
|
|
1912
|
-
}
|
|
1913
|
-
/**
|
|
1914
|
-
* Restores the content previously moved to a portal back to its original location.
|
|
1915
|
-
* This method handles restoring default slot content, arrow placeholders, disconnecting
|
|
1916
|
-
* attribute mirroring observers, and cleaning up elements and containers related to the portal.
|
|
1917
|
-
* Ensures all placeholders and native portal elements are properly removed from the DOM.
|
|
1918
|
-
* @returns {void} Does not return a value.
|
|
1919
|
-
*/
|
|
1920
|
-
_restoreContentFromPortal() {
|
|
1921
|
-
if (!this._portaled) return;
|
|
1922
|
-
if (Array.isArray(this._defPlaceholders)) {
|
|
1923
|
-
for (const { node, ph } of this._defPlaceholders) {
|
|
1924
|
-
if (ph && ph.parentNode) {
|
|
1925
|
-
ph.parentNode.insertBefore(node, ph);
|
|
1926
|
-
ph.remove();
|
|
1927
|
-
}
|
|
1928
|
-
}
|
|
1929
|
-
}
|
|
1930
|
-
this._defPlaceholders = void 0;
|
|
1931
|
-
if (Array.isArray(this._arrowPlaceholders)) {
|
|
1932
|
-
for (const { node, ph } of this._arrowPlaceholders) {
|
|
1933
|
-
if (ph && ph.parentNode) {
|
|
1934
|
-
ph.parentNode.insertBefore(node, ph);
|
|
1935
|
-
ph.remove();
|
|
1936
|
-
}
|
|
1937
|
-
}
|
|
1938
|
-
}
|
|
1939
|
-
this._arrowPlaceholders = void 0;
|
|
1940
|
-
if (this._portalAttrObserver) {
|
|
1941
|
-
this._portalAttrObserver.disconnect();
|
|
1942
|
-
this._portalAttrObserver = null;
|
|
1943
|
-
}
|
|
1944
|
-
if (this._portalNative && this._portalNative.parentNode) {
|
|
1945
|
-
this._portalNative.remove();
|
|
1946
|
-
}
|
|
1947
|
-
if (this._portalBackdrop && this._portalBackdrop.parentNode) {
|
|
1948
|
-
this._portalBackdrop.remove();
|
|
1949
|
-
}
|
|
1950
|
-
this._floatingEl = void 0;
|
|
1951
|
-
this._portaled = false;
|
|
1952
|
-
if (this._portalContainer) {
|
|
1953
|
-
this._portalContainer.remove();
|
|
1954
|
-
this._portalContainer = null;
|
|
1955
|
-
this._portalShadow = null;
|
|
1956
|
-
}
|
|
1957
|
-
const detail = { root: this.shadowRoot, container: this, floating: this.native };
|
|
1958
|
-
this.dispatchEvent(new CustomEvent("wje-portal:restored", { bubbles: true, composed: true, detail }));
|
|
1959
|
-
try {
|
|
1960
|
-
if (typeof window.bindRouterLinks === "function") {
|
|
1961
|
-
window.bindRouterLinks(this.shadowRoot);
|
|
1962
|
-
}
|
|
1963
|
-
document.dispatchEvent(new CustomEvent("wje-router:rebind", { bubbles: true, composed: true, detail }));
|
|
1964
|
-
} catch {
|
|
1965
|
-
}
|
|
1966
|
-
}
|
|
1967
|
-
/**
|
|
1968
|
-
* Ensures that a portal root is created and initialized properly with a shadow DOM and attached styles.
|
|
1969
|
-
* If the portal root already exists, the method exits early.
|
|
1970
|
-
* The method creates a `div` element in the document body and attaches a shadow DOM to it.
|
|
1971
|
-
* It also applies the required styles to the shadow DOM, either using constructable stylesheets
|
|
1972
|
-
* or by appending a `<style>` element. Additionally, it copies CSS custom properties from the
|
|
1973
|
-
* component's computed styles to the portal host to ensure proper style resolution.
|
|
1974
|
-
* @returns {void} This method does not return a value.
|
|
1975
|
-
*/
|
|
1976
|
-
_ensurePortalRoot() {
|
|
1977
|
-
var _a, _b;
|
|
1978
|
-
if (this._portalContainer && this._portalShadow) return;
|
|
1979
|
-
const host = document.createElement("div");
|
|
1980
|
-
host.setAttribute("data-wje-popup-portal", "");
|
|
1981
|
-
const shadow = host.attachShadow({ mode: "open" });
|
|
1982
|
-
const sheetCandidate = this.constructor.cssStyleSheet;
|
|
1983
|
-
try {
|
|
1984
|
-
if (sheetCandidate instanceof CSSStyleSheet) {
|
|
1985
|
-
shadow.adoptedStyleSheets = [sheetCandidate];
|
|
1986
|
-
} else if (typeof sheetCandidate === "string" && "adoptedStyleSheets" in Document.prototype) {
|
|
1987
|
-
const sheet = new CSSStyleSheet();
|
|
1988
|
-
sheet.replaceSync(sheetCandidate);
|
|
1989
|
-
shadow.adoptedStyleSheets = [sheet];
|
|
1990
|
-
} else {
|
|
1991
|
-
const style = document.createElement("style");
|
|
1992
|
-
style.textContent = typeof sheetCandidate === "string" ? sheetCandidate : ((_a = sheetCandidate == null ? void 0 : sheetCandidate.toString) == null ? void 0 : _a.call(sheetCandidate)) || "";
|
|
1993
|
-
shadow.append(style);
|
|
1994
|
-
}
|
|
1995
|
-
} catch (e) {
|
|
1996
|
-
const style = document.createElement("style");
|
|
1997
|
-
style.textContent = typeof sheetCandidate === "string" ? sheetCandidate : ((_b = sheetCandidate == null ? void 0 : sheetCandidate.toString) == null ? void 0 : _b.call(sheetCandidate)) || "";
|
|
1998
|
-
shadow.append(style);
|
|
1999
|
-
}
|
|
2000
|
-
const comp = getComputedStyle(this);
|
|
2001
|
-
for (let i = 0; i < comp.length; i++) {
|
|
2002
|
-
const prop = comp[i];
|
|
2003
|
-
if (prop.startsWith("--")) {
|
|
2004
|
-
host.style.setProperty(prop, comp.getPropertyValue(prop));
|
|
2005
|
-
}
|
|
2006
|
-
}
|
|
2007
|
-
if (this.getAttribute("portal") === "dialog" || this.isBottomSheetActive() && this.findDialog(this)) {
|
|
2008
|
-
const dialog = this.findDialog(this);
|
|
2009
|
-
if (dialog) {
|
|
2010
|
-
dialog.append(host);
|
|
2011
|
-
} else {
|
|
2012
|
-
document.body.append(host);
|
|
2013
|
-
}
|
|
2014
|
-
} else {
|
|
2015
|
-
document.body.append(host);
|
|
2016
|
-
}
|
|
2017
|
-
this._portalContainer = host;
|
|
2018
|
-
this._portalShadow = shadow;
|
|
2019
|
-
}
|
|
2020
|
-
findDialog(el) {
|
|
2021
|
-
var _a;
|
|
2022
|
-
while (el) {
|
|
2023
|
-
const d = (_a = el.closest) == null ? void 0 : _a.call(el, "wje-dialog");
|
|
2024
|
-
if (d) return d;
|
|
2025
|
-
el = el.getRootNode().host || el.parentElement;
|
|
2026
|
-
}
|
|
2027
|
-
return null;
|
|
2028
|
-
}
|
|
2029
|
-
/**
|
|
2030
|
-
* Displays the popup by portaling the content, managing the loader state, and attaching event handlers.
|
|
2031
|
-
* Optionally dispatches a custom event when the popup is shown.
|
|
2032
|
-
* @param {boolean} [dispatchEvent] Indicates whether to dispatch a custom event ('wje-popup:show') when the popup is shown.
|
|
2033
|
-
* @returns {void} Does not return any value.
|
|
2034
|
-
*/
|
|
2035
|
-
show(dispatchEvent = true) {
|
|
2036
|
-
var _a, _b, _c, _d, _e;
|
|
2037
|
-
this.clearBottomSheetRestoreTimeout();
|
|
2038
|
-
event.dispatchCustomEvent(document, "wje-popup:opened", { popup: this });
|
|
2039
|
-
if (this.portal || this.isBottomSheetActive()) {
|
|
2040
|
-
this._mountContentToPortal();
|
|
2041
|
-
this.rebindPortaledRouter();
|
|
2042
|
-
}
|
|
2043
|
-
if (this.loader) {
|
|
2044
|
-
this._showLoader();
|
|
2045
|
-
}
|
|
2046
|
-
if (dispatchEvent) {
|
|
2047
|
-
event.dispatchCustomEvent(this, "wje-popup:show");
|
|
2048
|
-
}
|
|
2049
|
-
if (this.isBottomSheetActive()) {
|
|
2050
|
-
this.setBottomSheetState(false);
|
|
2051
|
-
(_a = this.floatingEl) == null ? void 0 : _a.getBoundingClientRect();
|
|
2052
|
-
(_b = this.backdropEl) == null ? void 0 : _b.getBoundingClientRect();
|
|
2053
|
-
requestAnimationFrame(() => {
|
|
2054
|
-
if (!this.hasAttribute("active")) return;
|
|
2055
|
-
this.setBottomSheetState(true);
|
|
2056
|
-
});
|
|
2057
|
-
document.addEventListener("click", this.clickHandler, { capture: true });
|
|
2058
|
-
} else if (this.anchorEl && this.floatingEl) {
|
|
2059
|
-
this.clearBottomSheetState();
|
|
2060
|
-
(_d = (_c = this.floatingEl) == null ? void 0 : _c.classList) == null ? void 0 : _d.add("popup-active");
|
|
2061
|
-
(_e = this.cleanup) == null ? void 0 : _e.call(this);
|
|
2062
|
-
this.cleanup = autoUpdate(this.anchorEl, this.floatingEl, () => {
|
|
2063
|
-
this.reposition();
|
|
2064
|
-
});
|
|
2065
|
-
document.addEventListener("click", this.clickHandler, { capture: true });
|
|
2066
|
-
}
|
|
2067
|
-
if (!this.hasAttribute("active")) {
|
|
2068
|
-
this.setAttribute("active", "");
|
|
2069
|
-
}
|
|
2070
|
-
}
|
|
2071
|
-
/**
|
|
2072
|
-
* Hides the popup.
|
|
2073
|
-
* Removes the popup-active class from the floating element.
|
|
2074
|
-
* Cleans up the auto update for repositioning.
|
|
2075
|
-
*/
|
|
2076
|
-
hide(dispatchEvent = true) {
|
|
2077
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
2078
|
-
if (dispatchEvent) {
|
|
2079
|
-
event.dispatchCustomEvent(this, "wje-popup:hide");
|
|
2080
|
-
}
|
|
2081
|
-
(_a = this.cleanup) == null ? void 0 : _a.call(this);
|
|
2082
|
-
this.cleanup = void 0;
|
|
2083
|
-
document.removeEventListener("click", this.clickHandler, { capture: true });
|
|
2084
|
-
const shouldAnimateBottomSheetClose = (_c = (_b = this.floatingEl) == null ? void 0 : _b.classList) == null ? void 0 : _c.contains("popup-mobile-sheet");
|
|
2085
|
-
if (shouldAnimateBottomSheetClose) {
|
|
2086
|
-
(_e = (_d = this.backdropEl) == null ? void 0 : _d.classList) == null ? void 0 : _e.remove("popup-active");
|
|
2087
|
-
(_g = (_f = this.floatingEl) == null ? void 0 : _f.classList) == null ? void 0 : _g.remove("popup-active");
|
|
2088
|
-
this.clearBottomSheetRestoreTimeout();
|
|
2089
|
-
this._bottomSheetRestoreTimeout = window.setTimeout(() => {
|
|
2090
|
-
this.clearBottomSheetState();
|
|
2091
|
-
if (this._portaled) {
|
|
2092
|
-
this._restoreContentFromPortal();
|
|
2093
|
-
}
|
|
2094
|
-
this._bottomSheetRestoreTimeout = null;
|
|
2095
|
-
}, this.getBottomSheetTransitionDurationMs());
|
|
2096
|
-
} else {
|
|
2097
|
-
(_i = (_h = this.floatingEl) == null ? void 0 : _h.classList) == null ? void 0 : _i.remove("popup-active");
|
|
2098
|
-
this.clearBottomSheetState();
|
|
2099
|
-
if (this._portaled) {
|
|
2100
|
-
this._restoreContentFromPortal();
|
|
2101
|
-
}
|
|
2102
|
-
}
|
|
2103
|
-
if (this.hasAttribute("active")) {
|
|
2104
|
-
this.removeAttribute("active");
|
|
2105
|
-
}
|
|
2106
|
-
}
|
|
2107
|
-
_showLoader() {
|
|
2108
|
-
const floating = this.floatingEl;
|
|
2109
|
-
if (!(floating instanceof HTMLElement) || !(this.loaderEl instanceof HTMLElement)) return;
|
|
2110
|
-
floating.classList.add("loading");
|
|
2111
|
-
this.loaderEl.classList.remove("fade-out");
|
|
2112
|
-
if (this.loaderEl.parentElement !== floating) {
|
|
2113
|
-
floating.prepend(this.loaderEl);
|
|
2114
|
-
}
|
|
2115
|
-
}
|
|
2116
|
-
_hideLoader() {
|
|
2117
|
-
var _a, _b, _c, _d, _e, _f;
|
|
2118
|
-
(_b = (_a = this.native) == null ? void 0 : _a.classList) == null ? void 0 : _b.remove("loading");
|
|
2119
|
-
(_d = (_c = this._portalNative) == null ? void 0 : _c.classList) == null ? void 0 : _d.remove("loading");
|
|
2120
|
-
(_f = (_e = this.floatingEl) == null ? void 0 : _e.classList) == null ? void 0 : _f.remove("loading");
|
|
2121
|
-
if (this.loaderEl instanceof HTMLElement) {
|
|
2122
|
-
this.loaderEl.classList.remove("fade-out");
|
|
2123
|
-
this.loaderEl.remove();
|
|
2124
|
-
}
|
|
2125
|
-
}
|
|
2126
|
-
markContentReady() {
|
|
2127
|
-
this.loader = false;
|
|
2128
|
-
}
|
|
2129
|
-
}
|
|
2130
|
-
export {
|
|
2131
|
-
Popup as P
|
|
2132
|
-
};
|
|
2133
|
-
//# sourceMappingURL=popup.element-CwXvVFK7.js.map
|