@aurodesignsystem-dev/auro-popover 0.0.0-pr127.5 → 0.0.0-pr127.7
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/demo/api.md +9 -8
- package/demo/auro-popover.min.js +135 -114
- package/dist/{auro-popover-BizzXnnN.js → auro-popover-DAgmqt_R.js} +3 -3
- package/dist/index.d.ts +22 -0
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +1 -1
package/demo/api.md
CHANGED
|
@@ -7,14 +7,15 @@ The `auro-popover` element attaches to another element and displays on hover.
|
|
|
7
7
|
|
|
8
8
|
### Properties & Attributes
|
|
9
9
|
|
|
10
|
-
| Properties | Attributes | Modifiers | Type | Default | Description
|
|
11
|
-
| ----------- | ----------- | --------- | ---------------- | ------- |
|
|
12
|
-
| addSpace | addSpace | | boolean | | Adds additional top and bottom space around the appearance of the popover in relation to the trigger.
|
|
13
|
-
| boundary | boundary | | string \| object | | The element to use as the boundary for the popover. Can be a query selector or an HTML element.
|
|
14
|
-
| disabled | disabled | | boolean | | Disables the popover from showing on hover and focus.
|
|
15
|
-
| for | for | | string | | Directly associates the popover with a trigger element with the given ID. In most cases, this should not be necessary and set `slot="trigger"` on the element instead.
|
|
16
|
-
| placement | placement | | string | `top` | Position for popover in relation to the element {'top' \| 'bottom'}.
|
|
17
|
-
| removeSpace | removeSpace | | boolean | | Removes top and bottom space around the appearance of the popover in relation to the trigger.
|
|
10
|
+
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
11
|
+
| ----------- | ----------- | --------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
12
|
+
| addSpace | addSpace | | boolean | | Adds additional top and bottom space around the appearance of the popover in relation to the trigger. |
|
|
13
|
+
| boundary | boundary | | string \| object | | The element to use as the boundary for the popover. Can be a query selector or an HTML element. |
|
|
14
|
+
| disabled | disabled | | boolean | | Disables the popover from showing on hover and focus. |
|
|
15
|
+
| for | for | | string | | Directly associates the popover with a trigger element with the given ID. In most cases, this should not be necessary and set `slot="trigger"` on the element instead. |
|
|
16
|
+
| placement | placement | | string | `top` | Position for popover in relation to the element {'top' \| 'bottom'}. |
|
|
17
|
+
| removeSpace | removeSpace | | boolean | | Removes top and bottom space around the appearance of the popover in relation to the trigger. |
|
|
18
|
+
| | data-show | | boolean | `false` | Whether the popover is currently visible. Reflected as the `data-show`<br>attribute so host-level CSS selectors (e.g. `:host([data-show])`) work.<br>Also drives `aria-hidden` on the popover div in the template. |
|
|
18
19
|
|
|
19
20
|
### Methods
|
|
20
21
|
|
package/demo/auro-popover.min.js
CHANGED
|
@@ -1986,6 +1986,7 @@ class AuroPopover extends i {
|
|
|
1986
1986
|
super();
|
|
1987
1987
|
|
|
1988
1988
|
this.placement = "top";
|
|
1989
|
+
this.isPopoverVisible = false;
|
|
1989
1990
|
|
|
1990
1991
|
// Stable event-listener references used across the component lifecycle.
|
|
1991
1992
|
this._onTouchStart = null;
|
|
@@ -2006,7 +2007,6 @@ class AuroPopover extends i {
|
|
|
2006
2007
|
* @returns {void}
|
|
2007
2008
|
*/
|
|
2008
2009
|
_initializeDefaults() {
|
|
2009
|
-
this.isPopoverVisible = false;
|
|
2010
2010
|
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
2011
2011
|
}
|
|
2012
2012
|
|
|
@@ -2057,6 +2057,18 @@ class AuroPopover extends i {
|
|
|
2057
2057
|
type: Boolean,
|
|
2058
2058
|
reflect: true
|
|
2059
2059
|
},
|
|
2060
|
+
|
|
2061
|
+
/**
|
|
2062
|
+
* Whether the popover is currently visible. Reflected as the `data-show`
|
|
2063
|
+
* attribute so host-level CSS selectors (e.g. `:host([data-show])`) work.
|
|
2064
|
+
* Also drives `aria-hidden` on the popover div in the template.
|
|
2065
|
+
* @private
|
|
2066
|
+
*/
|
|
2067
|
+
isPopoverVisible: {
|
|
2068
|
+
type: Boolean,
|
|
2069
|
+
reflect: true,
|
|
2070
|
+
attribute: 'data-show'
|
|
2071
|
+
},
|
|
2060
2072
|
};
|
|
2061
2073
|
}
|
|
2062
2074
|
|
|
@@ -2125,6 +2137,8 @@ class AuroPopover extends i {
|
|
|
2125
2137
|
if (this._onSlotChange) {
|
|
2126
2138
|
this.shadowRoot?.querySelector("slot:not([name])")?.removeEventListener("slotchange", this._onSlotChange);
|
|
2127
2139
|
}
|
|
2140
|
+
// Remove aria-description from every element that received it in
|
|
2141
|
+
// firstUpdated (focusable descendants or the trigger itself).
|
|
2128
2142
|
for (const target of (this._ariaDescriptionTargets || [this.trigger])) {
|
|
2129
2143
|
target.removeAttribute("aria-description");
|
|
2130
2144
|
}
|
|
@@ -2183,20 +2197,124 @@ class AuroPopover extends i {
|
|
|
2183
2197
|
}
|
|
2184
2198
|
|
|
2185
2199
|
// If the trigger is not keyboard accessible, make it focusable automatically.
|
|
2186
|
-
//
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
//
|
|
2190
|
-
|
|
2191
|
-
|
|
2192
|
-
|
|
2193
|
-
|
|
2194
|
-
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
+
// Set up aria-description so screen readers announce popover content on focus.
|
|
2201
|
+
this._setupAccessibility();
|
|
2202
|
+
|
|
2203
|
+
// Set up Popper instance, event listeners, and keyboard/mouse handlers.
|
|
2204
|
+
this._setupEventListeners();
|
|
2205
|
+
}
|
|
2206
|
+
|
|
2207
|
+
/**
|
|
2208
|
+
* Initializes the Popper instance and attaches all event listeners
|
|
2209
|
+
* for mouse, keyboard, and focus interactions on the trigger.
|
|
2210
|
+
* @private
|
|
2211
|
+
* @returns {void}
|
|
2212
|
+
*/
|
|
2213
|
+
_setupEventListeners() {
|
|
2214
|
+
this.auroPopover = this.shadowRoot.querySelector("#popover");
|
|
2215
|
+
this.popper = new Popover(
|
|
2216
|
+
this.trigger,
|
|
2217
|
+
this.auroPopover,
|
|
2218
|
+
this.placement,
|
|
2219
|
+
this.boundary,
|
|
2220
|
+
);
|
|
2221
|
+
|
|
2222
|
+
this._onBodyMouseover = (evt) => this.handleMouseoverEvent(evt);
|
|
2223
|
+
this._onTriggerMouseEnter = () => { this.toggleShow(); };
|
|
2224
|
+
this._onTriggerMouseLeave = () => { this.toggleHide(); };
|
|
2225
|
+
this._onTriggerFocus = () => { this.toggleShow(); };
|
|
2226
|
+
this._onTriggerBlur = (event) => {
|
|
2227
|
+
// Only hide if focus leaves the trigger entirely, not when moving
|
|
2228
|
+
// between focusable children within the trigger.
|
|
2229
|
+
// Node.contains() does not cross shadow boundaries, so we walk
|
|
2230
|
+
// up through shadow hosts to detect targets inside a descendant
|
|
2231
|
+
// custom element's shadow root.
|
|
2232
|
+
let target = event.relatedTarget;
|
|
2233
|
+
let inside = false;
|
|
2234
|
+
|
|
2235
|
+
while (target) {
|
|
2236
|
+
if (this.trigger.contains(target)) {
|
|
2237
|
+
inside = true;
|
|
2238
|
+
break;
|
|
2239
|
+
}
|
|
2240
|
+
const root = target.getRootNode();
|
|
2241
|
+
target = root instanceof ShadowRoot ? root.host : null;
|
|
2242
|
+
}
|
|
2243
|
+
|
|
2244
|
+
if (!inside) {
|
|
2245
|
+
this.toggleHide();
|
|
2246
|
+
}
|
|
2247
|
+
};
|
|
2248
|
+
this._onTriggerKeydown = (event) => {
|
|
2249
|
+
const key = event.key.toLowerCase();
|
|
2250
|
+
|
|
2251
|
+
if (this.isPopoverVisible) {
|
|
2252
|
+
if (key === "tab" || key === "escape") {
|
|
2253
|
+
this.toggleHide();
|
|
2254
|
+
}
|
|
2255
|
+
}
|
|
2256
|
+
|
|
2257
|
+
if (key === " " || key === "enter") {
|
|
2258
|
+
// Prevent page scroll for Space only on non-native triggers.
|
|
2259
|
+
// Native elements (button, a) handle their own Space/Enter semantics.
|
|
2260
|
+
if (key === " " && this._addedTabIndex) {
|
|
2261
|
+
event.preventDefault();
|
|
2262
|
+
}
|
|
2263
|
+
this.toggle();
|
|
2264
|
+
}
|
|
2265
|
+
};
|
|
2266
|
+
this._onHidePopover = () => { this.toggleHide(); };
|
|
2267
|
+
|
|
2268
|
+
// mouseenter/mouseleave attach to the host when the trigger is a direct
|
|
2269
|
+
// child of auro-popover (slotted), otherwise they attach to the trigger itself.
|
|
2270
|
+
this._eventTarget =
|
|
2271
|
+
this.trigger.parentElement.localName === this.localName
|
|
2272
|
+
? this
|
|
2273
|
+
: this.trigger;
|
|
2274
|
+
|
|
2275
|
+
this._eventTarget.addEventListener("mouseenter", this._onTriggerMouseEnter);
|
|
2276
|
+
this._eventTarget.addEventListener("mouseleave", this._onTriggerMouseLeave);
|
|
2277
|
+
|
|
2278
|
+
// if user tabs off of trigger, then hide the popover.
|
|
2279
|
+
this.trigger.addEventListener("keydown", this._onTriggerKeydown);
|
|
2280
|
+
|
|
2281
|
+
// handle gain/loss of focus — use focusin/focusout so events bubble
|
|
2282
|
+
// from focusable descendants inside wrapper triggers (e.g. <div><a>).
|
|
2283
|
+
this.trigger.addEventListener("focusin", this._onTriggerFocus);
|
|
2284
|
+
this.trigger.addEventListener("focusout", this._onTriggerBlur);
|
|
2285
|
+
|
|
2286
|
+
// e.g. for a closePopover button in the popover
|
|
2287
|
+
this.addEventListener("hidePopover", this._onHidePopover);
|
|
2288
|
+
}
|
|
2289
|
+
|
|
2290
|
+
/**
|
|
2291
|
+
* Sets up auto-tabindex and aria-description on the trigger element.
|
|
2292
|
+
*
|
|
2293
|
+
* Auto-tabindex: ensures non-focusable triggers are keyboard accessible.
|
|
2294
|
+
* Covers native elements (e.g. <abbr>, <span>) and custom elements whose
|
|
2295
|
+
* shadow DOM contains no focusable descendant (e.g. auro-icon).
|
|
2296
|
+
*
|
|
2297
|
+
* We skip elements that are already accessible via the tab order:
|
|
2298
|
+
* - Natively focusable elements (tabIndex >= 0): <button>, <a href>, <input>, etc.
|
|
2299
|
+
* - Custom elements whose shadow DOM contains a focusable descendant (e.g. auro-button
|
|
2300
|
+
* has an inner <button>) — adding tabindex to the host would create a double tab stop.
|
|
2301
|
+
* - Elements where the author has explicitly set tabindex — their intent is respected.
|
|
2302
|
+
*
|
|
2303
|
+
* Known limitation: custom elements with a closed shadow root (mode: 'closed') cannot
|
|
2304
|
+
* be inspected — shadowRoot returns null. If such an element has an internal focusable
|
|
2305
|
+
* descendant and a host tabIndex of -1, tabindex="0" will be added, potentially
|
|
2306
|
+
* creating a double tab stop. Elements using delegatesFocus avoid this because the
|
|
2307
|
+
* browser reflects a non-negative tabIndex on the host.
|
|
2308
|
+
*
|
|
2309
|
+
* aria-description (ARIA 1.3): embeds the popover content string directly on
|
|
2310
|
+
* the trigger so screen readers announce it on focus. Preferred over
|
|
2311
|
+
* aria-describedby (cross-shadow ID lookup fails) and aria-live (display:none
|
|
2312
|
+
* removes the region from the accessibility tree).
|
|
2313
|
+
*
|
|
2314
|
+
* @private
|
|
2315
|
+
* @returns {void}
|
|
2316
|
+
*/
|
|
2317
|
+
_setupAccessibility() {
|
|
2200
2318
|
const isNativelyFocusable = this.trigger.tabIndex >= 0;
|
|
2201
2319
|
const focusableSelector =
|
|
2202
2320
|
'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex^="-"]), [contenteditable]:not([contenteditable="false"]), summary, iframe, audio[controls], video[controls]';
|
|
@@ -2250,23 +2368,7 @@ class AuroPopover extends i {
|
|
|
2250
2368
|
this._addedTabIndex = true;
|
|
2251
2369
|
}
|
|
2252
2370
|
|
|
2253
|
-
//
|
|
2254
|
-
//
|
|
2255
|
-
// Why not aria-describedby?
|
|
2256
|
-
// The trigger (e.g. auro-button) is in light DOM; the popover content lives
|
|
2257
|
-
// inside auro-popover's shadow DOM. aria-describedby ID lookup is scoped to
|
|
2258
|
-
// the same shadow root, so cross-shadow references silently fail.
|
|
2259
|
-
//
|
|
2260
|
-
// Why not aria-live?
|
|
2261
|
-
// The popover is hidden with display:none, which removes it from the
|
|
2262
|
-
// accessibility tree entirely — aria-live never fires. Persistent live regions
|
|
2263
|
-
// in document.body hit VoiceOver's content deduplication: identical text
|
|
2264
|
-
// announced to the same region is suppressed on repeat visits.
|
|
2265
|
-
//
|
|
2266
|
-
// aria-description embeds the string directly on the trigger element with no
|
|
2267
|
-
// ID lookup. VoiceOver recomputes it fresh on every focus event, so content
|
|
2268
|
-
// is announced consistently regardless of prior visits.
|
|
2269
|
-
//
|
|
2371
|
+
// Set up aria-description on the appropriate focusable element(s).
|
|
2270
2372
|
// NOTE: aria-description is defined in the ARIA 1.3 spec. It is well-supported
|
|
2271
2373
|
// in modern browsers and screen readers (Chrome 92+, Firefox 92+, Safari 15.4+)
|
|
2272
2374
|
// but may be unfamiliar — do not replace with aria-describedby.
|
|
@@ -2333,81 +2435,6 @@ class AuroPopover extends i {
|
|
|
2333
2435
|
}
|
|
2334
2436
|
};
|
|
2335
2437
|
slot.addEventListener("slotchange", this._onSlotChange);
|
|
2336
|
-
|
|
2337
|
-
this.auroPopover = this.shadowRoot.querySelector("#popover");
|
|
2338
|
-
this.popper = new Popover(
|
|
2339
|
-
this.trigger,
|
|
2340
|
-
this.auroPopover,
|
|
2341
|
-
this.placement,
|
|
2342
|
-
this.boundary,
|
|
2343
|
-
);
|
|
2344
|
-
|
|
2345
|
-
this._onBodyMouseover = (evt) => this.handleMouseoverEvent(evt);
|
|
2346
|
-
this._onTriggerMouseEnter = () => { this.toggleShow(); };
|
|
2347
|
-
this._onTriggerMouseLeave = () => { this.toggleHide(); };
|
|
2348
|
-
this._onTriggerFocus = () => { this.toggleShow(); };
|
|
2349
|
-
this._onTriggerBlur = (event) => {
|
|
2350
|
-
// Only hide if focus leaves the trigger entirely, not when moving
|
|
2351
|
-
// between focusable children within the trigger.
|
|
2352
|
-
// Node.contains() does not cross shadow boundaries, so we walk
|
|
2353
|
-
// up through shadow hosts to detect targets inside a descendant
|
|
2354
|
-
// custom element's shadow root.
|
|
2355
|
-
let target = event.relatedTarget;
|
|
2356
|
-
let inside = false;
|
|
2357
|
-
|
|
2358
|
-
while (target) {
|
|
2359
|
-
if (this.trigger.contains(target)) {
|
|
2360
|
-
inside = true;
|
|
2361
|
-
break;
|
|
2362
|
-
}
|
|
2363
|
-
const root = target.getRootNode();
|
|
2364
|
-
target = root instanceof ShadowRoot ? root.host : null;
|
|
2365
|
-
}
|
|
2366
|
-
|
|
2367
|
-
if (!inside) {
|
|
2368
|
-
this.toggleHide();
|
|
2369
|
-
}
|
|
2370
|
-
};
|
|
2371
|
-
this._onTriggerKeydown = (event) => {
|
|
2372
|
-
const key = event.key.toLowerCase();
|
|
2373
|
-
|
|
2374
|
-
if (this.isPopoverVisible) {
|
|
2375
|
-
if (key === "tab" || key === "escape") {
|
|
2376
|
-
this.toggleHide();
|
|
2377
|
-
}
|
|
2378
|
-
}
|
|
2379
|
-
|
|
2380
|
-
if (key === " " || key === "enter") {
|
|
2381
|
-
// Prevent page scroll for Space only on non-native triggers.
|
|
2382
|
-
// Native elements (button, a) handle their own Space/Enter semantics.
|
|
2383
|
-
if (key === " " && this._addedTabIndex) {
|
|
2384
|
-
event.preventDefault();
|
|
2385
|
-
}
|
|
2386
|
-
this.toggle();
|
|
2387
|
-
}
|
|
2388
|
-
};
|
|
2389
|
-
this._onHidePopover = () => { this.toggleHide(); };
|
|
2390
|
-
|
|
2391
|
-
// mouseenter/mouseleave attach to the host when the trigger is a direct
|
|
2392
|
-
// child of auro-popover (slotted), otherwise they attach to the trigger itself.
|
|
2393
|
-
this._eventTarget =
|
|
2394
|
-
this.trigger.parentElement.localName === this.localName
|
|
2395
|
-
? this
|
|
2396
|
-
: this.trigger;
|
|
2397
|
-
|
|
2398
|
-
this._eventTarget.addEventListener("mouseenter", this._onTriggerMouseEnter);
|
|
2399
|
-
this._eventTarget.addEventListener("mouseleave", this._onTriggerMouseLeave);
|
|
2400
|
-
|
|
2401
|
-
// if user tabs off of trigger, then hide the popover.
|
|
2402
|
-
this.trigger.addEventListener("keydown", this._onTriggerKeydown);
|
|
2403
|
-
|
|
2404
|
-
// handle gain/loss of focus — use focusin/focusout so events bubble
|
|
2405
|
-
// from focusable descendants inside wrapper triggers (e.g. <div><a>).
|
|
2406
|
-
this.trigger.addEventListener("focusin", this._onTriggerFocus);
|
|
2407
|
-
this.trigger.addEventListener("focusout", this._onTriggerBlur);
|
|
2408
|
-
|
|
2409
|
-
// e.g. for a closePopover button in the popover
|
|
2410
|
-
this.addEventListener("hidePopover", this._onHidePopover);
|
|
2411
2438
|
}
|
|
2412
2439
|
|
|
2413
2440
|
/**
|
|
@@ -2433,9 +2460,6 @@ class AuroPopover extends i {
|
|
|
2433
2460
|
*/
|
|
2434
2461
|
toggleHide() {
|
|
2435
2462
|
this.isPopoverVisible = false;
|
|
2436
|
-
this.removeAttribute("data-show");
|
|
2437
|
-
this._popoverHidden = true;
|
|
2438
|
-
this.requestUpdate();
|
|
2439
2463
|
if (this._onBodyMouseover) {
|
|
2440
2464
|
document.body.removeEventListener("mouseover", this._onBodyMouseover);
|
|
2441
2465
|
}
|
|
@@ -2456,9 +2480,6 @@ class AuroPopover extends i {
|
|
|
2456
2480
|
}
|
|
2457
2481
|
this.popper.show();
|
|
2458
2482
|
this.isPopoverVisible = true;
|
|
2459
|
-
this.setAttribute("data-show", "true");
|
|
2460
|
-
this._popoverHidden = false;
|
|
2461
|
-
this.requestUpdate();
|
|
2462
2483
|
|
|
2463
2484
|
document.body.addEventListener("mouseover", this._onBodyMouseover);
|
|
2464
2485
|
}
|
|
@@ -2491,7 +2512,7 @@ class AuroPopover extends i {
|
|
|
2491
2512
|
id="popover"
|
|
2492
2513
|
class="popover util_insetLg body-default"
|
|
2493
2514
|
part="popover"
|
|
2494
|
-
aria-hidden="${this.
|
|
2515
|
+
aria-hidden="${this.isPopoverVisible ? 'false' : 'true'}">
|
|
2495
2516
|
<div id="arrow" class="arrow" data-popper-arrow></div>
|
|
2496
2517
|
<slot></slot>
|
|
2497
2518
|
</div>
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import{css as e,LitElement as t,html as i}from"lit";class s{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,i=(t,s=t&&t.closest(e))=>t&&t!==document&&t!==window?s||i(t.getRootNode().host):null){return i(t)}handleComponentTagRename(e,t){const i=t.toLowerCase();e.tagName.toLowerCase()!==i&&e.setAttribute(i,!0)}elementMatch(e,t){const i=t.toLowerCase();return e.tagName.toLowerCase()===i||e.hasAttribute(i)}getSlotText(e,t){const i=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return(i?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}var r="top",o="bottom",n="right",a="left",l="auto",c=[r,o,n,a],d="start",p="end",f="viewport",h="popper",u=c.reduce(function(e,t){return e.concat([t+"-"+d,t+"-"+p])},[]),m=[].concat(c,[l]).reduce(function(e,t){return e.concat([t,t+"-"+d,t+"-"+p])},[]),g=["beforeRead","read","afterRead","beforeMain","main","afterMain","beforeWrite","write","afterWrite"];function v(e){return e?(e.nodeName||"").toLowerCase():null}function y(e){if(null==e)return window;if("[object Window]"!==e.toString()){var t=e.ownerDocument;return t&&t.defaultView||window}return e}function w(e){return e instanceof y(e).Element||e instanceof Element}function b(e){return e instanceof y(e).HTMLElement||e instanceof HTMLElement}function x(e){return"undefined"!=typeof ShadowRoot&&(e instanceof y(e).ShadowRoot||e instanceof ShadowRoot)}var S={name:"applyStyles",enabled:!0,phase:"write",fn:function(e){var t=e.state;Object.keys(t.elements).forEach(function(e){var i=t.styles[e]||{},s=t.attributes[e]||{},r=t.elements[e];b(r)&&v(r)&&(Object.assign(r.style,i),Object.keys(s).forEach(function(e){var t=s[e];!1===t?r.removeAttribute(e):r.setAttribute(e,!0===t?"":t)}))})},effect:function(e){var t=e.state,i={popper:{position:t.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(t.elements.popper.style,i.popper),t.styles=i,t.elements.arrow&&Object.assign(t.elements.arrow.style,i.arrow),function(){Object.keys(t.elements).forEach(function(e){var s=t.elements[e],r=t.attributes[e]||{},o=Object.keys(t.styles.hasOwnProperty(e)?t.styles[e]:i[e]).reduce(function(e,t){return e[t]="",e},{});b(s)&&v(s)&&(Object.assign(s.style,o),Object.keys(r).forEach(function(e){s.removeAttribute(e)}))})}},requires:["computeStyles"]};function _(e){return e.split("-")[0]}var A=Math.max,O=Math.min,k=Math.round;function z(){var e=navigator.userAgentData;return null!=e&&e.brands&&Array.isArray(e.brands)?e.brands.map(function(e){return e.brand+"/"+e.version}).join(" "):navigator.userAgent}function T(){return!/^((?!chrome|android).)*safari/i.test(z())}function E(e,t,i){void 0===t&&(t=!1),void 0===i&&(i=!1);var s=e.getBoundingClientRect(),r=1,o=1;t&&b(e)&&(r=e.offsetWidth>0&&k(s.width)/e.offsetWidth||1,o=e.offsetHeight>0&&k(s.height)/e.offsetHeight||1);var n=(w(e)?y(e):window).visualViewport,a=!T()&&i,l=(s.left+(a&&n?n.offsetLeft:0))/r,c=(s.top+(a&&n?n.offsetTop:0))/o,d=s.width/r,p=s.height/o;return{width:d,height:p,top:c,right:l+d,bottom:c+p,left:l,x:l,y:c}}function M(e){var t=E(e),i=e.offsetWidth,s=e.offsetHeight;return Math.abs(t.width-i)<=1&&(i=t.width),Math.abs(t.height-s)<=1&&(s=t.height),{x:e.offsetLeft,y:e.offsetTop,width:i,height:s}}function B(e,t){var i=t.getRootNode&&t.getRootNode();if(e.contains(t))return!0;if(i&&x(i)){var s=t;do{if(s&&e.isSameNode(s))return!0;s=s.parentNode||s.host}while(s)}return!1}function H(e){return y(e).getComputedStyle(e)}function L(e){return["table","td","th"].indexOf(v(e))>=0}function R(e){return((w(e)?e.ownerDocument:e.document)||window.document).documentElement}function C(e){return"html"===v(e)?e:e.assignedSlot||e.parentNode||(x(e)?e.host:null)||R(e)}function D(e){return b(e)&&"fixed"!==H(e).position?e.offsetParent:null}function N(e){for(var t=y(e),i=D(e);i&&L(i)&&"static"===H(i).position;)i=D(i);return i&&("html"===v(i)||"body"===v(i)&&"static"===H(i).position)?t:i||function(e){var t=/firefox/i.test(z());if(/Trident/i.test(z())&&b(e)&&"fixed"===H(e).position)return null;var i=C(e);for(x(i)&&(i=i.host);b(i)&&["html","body"].indexOf(v(i))<0;){var s=H(i);if("none"!==s.transform||"none"!==s.perspective||"paint"===s.contain||-1!==["transform","perspective"].indexOf(s.willChange)||t&&"filter"===s.willChange||t&&s.filter&&"none"!==s.filter)return i;i=i.parentNode}return null}(e)||t}function j(e){return["top","bottom"].indexOf(e)>=0?"x":"y"}function I(e,t,i){return A(e,O(t,i))}function q(e){return Object.assign({},{top:0,right:0,bottom:0,left:0},e)}function P(e,t){return t.reduce(function(t,i){return t[i]=e,t},{})}var F={name:"arrow",enabled:!0,phase:"main",fn:function(e){var t,i=e.state,s=e.name,l=e.options,d=i.elements.arrow,p=i.modifiersData.popperOffsets,f=_(i.placement),h=j(f),u=[a,n].indexOf(f)>=0?"height":"width";if(d&&p){var m=function(e,t){return q("number"!=typeof(e="function"==typeof e?e(Object.assign({},t.rects,{placement:t.placement})):e)?e:P(e,c))}(l.padding,i),g=M(d),v="y"===h?r:a,y="y"===h?o:n,w=i.rects.reference[u]+i.rects.reference[h]-p[h]-i.rects.popper[u],b=p[h]-i.rects.reference[h],x=N(d),S=x?"y"===h?x.clientHeight||0:x.clientWidth||0:0,A=w/2-b/2,O=m[v],k=S-g[u]-m[y],z=S/2-g[u]/2+A,T=I(O,z,k),E=h;i.modifiersData[s]=((t={})[E]=T,t.centerOffset=T-z,t)}},effect:function(e){var t=e.state,i=e.options.element,s=void 0===i?"[data-popper-arrow]":i;null!=s&&("string"!=typeof s||(s=t.elements.popper.querySelector(s)))&&B(t.elements.popper,s)&&(t.elements.arrow=s)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function U(e){return e.split("-")[1]}var W={top:"auto",right:"auto",bottom:"auto",left:"auto"};function X(e){var t,i=e.popper,s=e.popperRect,l=e.placement,c=e.variation,d=e.offsets,f=e.position,h=e.gpuAcceleration,u=e.adaptive,m=e.roundOffsets,g=e.isFixed,v=d.x,w=void 0===v?0:v,b=d.y,x=void 0===b?0:b,S="function"==typeof m?m({x:w,y:x}):{x:w,y:x};w=S.x,x=S.y;var _=d.hasOwnProperty("x"),A=d.hasOwnProperty("y"),O=a,z=r,T=window;if(u){var E=N(i),M="clientHeight",B="clientWidth";if(E===y(i)&&"static"!==H(E=R(i)).position&&"absolute"===f&&(M="scrollHeight",B="scrollWidth"),l===r||(l===a||l===n)&&c===p)z=o,x-=(g&&E===T&&T.visualViewport?T.visualViewport.height:E[M])-s.height,x*=h?1:-1;if(l===a||(l===r||l===o)&&c===p)O=n,w-=(g&&E===T&&T.visualViewport?T.visualViewport.width:E[B])-s.width,w*=h?1:-1}var L,C=Object.assign({position:f},u&&W),D=!0===m?function(e,t){var i=e.x,s=e.y,r=t.devicePixelRatio||1;return{x:k(i*r)/r||0,y:k(s*r)/r||0}}({x:w,y:x},y(i)):{x:w,y:x};return w=D.x,x=D.y,h?Object.assign({},C,((L={})[z]=A?"0":"",L[O]=_?"0":"",L.transform=(T.devicePixelRatio||1)<=1?"translate("+w+"px, "+x+"px)":"translate3d("+w+"px, "+x+"px, 0)",L)):Object.assign({},C,((t={})[z]=A?x+"px":"",t[O]=_?w+"px":"",t.transform="",t))}var V={passive:!0};var $={left:"right",right:"left",bottom:"top",top:"bottom"};function G(e){return e.replace(/left|right|bottom|top/g,function(e){return $[e]})}var K={start:"end",end:"start"};function Y(e){return e.replace(/start|end/g,function(e){return K[e]})}function J(e){var t=y(e);return{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function Q(e){return E(R(e)).left+J(e).scrollLeft}function Z(e){var t=H(e),i=t.overflow,s=t.overflowX,r=t.overflowY;return/auto|scroll|overlay|hidden/.test(i+r+s)}function ee(e){return["html","body","#document"].indexOf(v(e))>=0?e.ownerDocument.body:b(e)&&Z(e)?e:ee(C(e))}function te(e,t){var i;void 0===t&&(t=[]);var s=ee(e),r=s===(null==(i=e.ownerDocument)?void 0:i.body),o=y(s),n=r?[o].concat(o.visualViewport||[],Z(s)?s:[]):s,a=t.concat(n);return r?a:a.concat(te(C(n)))}function ie(e){return Object.assign({},e,{left:e.x,top:e.y,right:e.x+e.width,bottom:e.y+e.height})}function se(e,t,i){return t===f?ie(function(e,t){var i=y(e),s=R(e),r=i.visualViewport,o=s.clientWidth,n=s.clientHeight,a=0,l=0;if(r){o=r.width,n=r.height;var c=T();(c||!c&&"fixed"===t)&&(a=r.offsetLeft,l=r.offsetTop)}return{width:o,height:n,x:a+Q(e),y:l}}(e,i)):w(t)?function(e,t){var i=E(e,!1,"fixed"===t);return i.top=i.top+e.clientTop,i.left=i.left+e.clientLeft,i.bottom=i.top+e.clientHeight,i.right=i.left+e.clientWidth,i.width=e.clientWidth,i.height=e.clientHeight,i.x=i.left,i.y=i.top,i}(t,i):ie(function(e){var t,i=R(e),s=J(e),r=null==(t=e.ownerDocument)?void 0:t.body,o=A(i.scrollWidth,i.clientWidth,r?r.scrollWidth:0,r?r.clientWidth:0),n=A(i.scrollHeight,i.clientHeight,r?r.scrollHeight:0,r?r.clientHeight:0),a=-s.scrollLeft+Q(e),l=-s.scrollTop;return"rtl"===H(r||i).direction&&(a+=A(i.clientWidth,r?r.clientWidth:0)-o),{width:o,height:n,x:a,y:l}}(R(e)))}function re(e,t,i,s){var r="clippingParents"===t?function(e){var t=te(C(e)),i=["absolute","fixed"].indexOf(H(e).position)>=0&&b(e)?N(e):e;return w(i)?t.filter(function(e){return w(e)&&B(e,i)&&"body"!==v(e)}):[]}(e):[].concat(t),o=[].concat(r,[i]),n=o[0],a=o.reduce(function(t,i){var r=se(e,i,s);return t.top=A(r.top,t.top),t.right=O(r.right,t.right),t.bottom=O(r.bottom,t.bottom),t.left=A(r.left,t.left),t},se(e,n,s));return a.width=a.right-a.left,a.height=a.bottom-a.top,a.x=a.left,a.y=a.top,a}function oe(e){var t,i=e.reference,s=e.element,l=e.placement,c=l?_(l):null,f=l?U(l):null,h=i.x+i.width/2-s.width/2,u=i.y+i.height/2-s.height/2;switch(c){case r:t={x:h,y:i.y-s.height};break;case o:t={x:h,y:i.y+i.height};break;case n:t={x:i.x+i.width,y:u};break;case a:t={x:i.x-s.width,y:u};break;default:t={x:i.x,y:i.y}}var m=c?j(c):null;if(null!=m){var g="y"===m?"height":"width";switch(f){case d:t[m]=t[m]-(i[g]/2-s[g]/2);break;case p:t[m]=t[m]+(i[g]/2-s[g]/2)}}return t}function ne(e,t){void 0===t&&(t={});var i=t,s=i.placement,a=void 0===s?e.placement:s,l=i.strategy,d=void 0===l?e.strategy:l,p=i.boundary,u=void 0===p?"clippingParents":p,m=i.rootBoundary,g=void 0===m?f:m,v=i.elementContext,y=void 0===v?h:v,b=i.altBoundary,x=void 0!==b&&b,S=i.padding,_=void 0===S?0:S,A=q("number"!=typeof _?_:P(_,c)),O=y===h?"reference":h,k=e.rects.popper,z=e.elements[x?O:y],T=re(w(z)?z:z.contextElement||R(e.elements.popper),u,g,d),M=E(e.elements.reference),B=oe({reference:M,element:k,placement:a}),H=ie(Object.assign({},k,B)),L=y===h?H:M,C={top:T.top-L.top+A.top,bottom:L.bottom-T.bottom+A.bottom,left:T.left-L.left+A.left,right:L.right-T.right+A.right},D=e.modifiersData.offset;if(y===h&&D){var N=D[a];Object.keys(C).forEach(function(e){var t=[n,o].indexOf(e)>=0?1:-1,i=[r,o].indexOf(e)>=0?"y":"x";C[e]+=N[i]*t})}return C}function ae(e,t){void 0===t&&(t={});var i=t,s=i.placement,r=i.boundary,o=i.rootBoundary,n=i.padding,a=i.flipVariations,l=i.allowedAutoPlacements,d=void 0===l?m:l,p=U(s),f=p?a?u:u.filter(function(e){return U(e)===p}):c,h=f.filter(function(e){return d.indexOf(e)>=0});0===h.length&&(h=f);var g=h.reduce(function(t,i){return t[i]=ne(e,{placement:i,boundary:r,rootBoundary:o,padding:n})[_(i)],t},{});return Object.keys(g).sort(function(e,t){return g[e]-g[t]})}var le={name:"flip",enabled:!0,phase:"main",fn:function(e){var t=e.state,i=e.options,s=e.name;if(!t.modifiersData[s]._skip){for(var c=i.mainAxis,p=void 0===c||c,f=i.altAxis,h=void 0===f||f,u=i.fallbackPlacements,m=i.padding,g=i.boundary,v=i.rootBoundary,y=i.altBoundary,w=i.flipVariations,b=void 0===w||w,x=i.allowedAutoPlacements,S=t.options.placement,A=_(S),O=u||(A===S||!b?[G(S)]:function(e){if(_(e)===l)return[];var t=G(e);return[Y(e),t,Y(t)]}(S)),k=[S].concat(O).reduce(function(e,i){return e.concat(_(i)===l?ae(t,{placement:i,boundary:g,rootBoundary:v,padding:m,flipVariations:b,allowedAutoPlacements:x}):i)},[]),z=t.rects.reference,T=t.rects.popper,E=new Map,M=!0,B=k[0],H=0;H<k.length;H++){var L=k[H],R=_(L),C=U(L)===d,D=[r,o].indexOf(R)>=0,N=D?"width":"height",j=ne(t,{placement:L,boundary:g,rootBoundary:v,altBoundary:y,padding:m}),I=D?C?n:a:C?o:r;z[N]>T[N]&&(I=G(I));var q=G(I),P=[];if(p&&P.push(j[R]<=0),h&&P.push(j[I]<=0,j[q]<=0),P.every(function(e){return e})){B=L,M=!1;break}E.set(L,P)}if(M)for(var F=function(e){var t=k.find(function(t){var i=E.get(t);if(i)return i.slice(0,e).every(function(e){return e})});if(t)return B=t,"break"},W=b?3:1;W>0;W--){if("break"===F(W))break}t.placement!==B&&(t.modifiersData[s]._skip=!0,t.placement=B,t.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}};function ce(e,t,i){return void 0===i&&(i={x:0,y:0}),{top:e.top-t.height-i.y,right:e.right-t.width+i.x,bottom:e.bottom-t.height+i.y,left:e.left-t.width-i.x}}function de(e){return[r,n,o,a].some(function(t){return e[t]>=0})}var pe={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(e){var t=e.state,i=e.options,s=e.name,o=i.offset,l=void 0===o?[0,0]:o,c=m.reduce(function(e,i){return e[i]=function(e,t,i){var s=_(e),o=[a,r].indexOf(s)>=0?-1:1,l="function"==typeof i?i(Object.assign({},t,{placement:e})):i,c=l[0],d=l[1];return c=c||0,d=(d||0)*o,[a,n].indexOf(s)>=0?{x:d,y:c}:{x:c,y:d}}(i,t.rects,l),e},{}),d=c[t.placement],p=d.x,f=d.y;null!=t.modifiersData.popperOffsets&&(t.modifiersData.popperOffsets.x+=p,t.modifiersData.popperOffsets.y+=f),t.modifiersData[s]=c}};var fe={name:"preventOverflow",enabled:!0,phase:"main",fn:function(e){var t=e.state,i=e.options,s=e.name,l=i.mainAxis,c=void 0===l||l,p=i.altAxis,f=void 0!==p&&p,h=i.boundary,u=i.rootBoundary,m=i.altBoundary,g=i.padding,v=i.tether,y=void 0===v||v,w=i.tetherOffset,b=void 0===w?0:w,x=ne(t,{boundary:h,rootBoundary:u,padding:g,altBoundary:m}),S=_(t.placement),k=U(t.placement),z=!k,T=j(S),E="x"===T?"y":"x",B=t.modifiersData.popperOffsets,H=t.rects.reference,L=t.rects.popper,R="function"==typeof b?b(Object.assign({},t.rects,{placement:t.placement})):b,C="number"==typeof R?{mainAxis:R,altAxis:R}:Object.assign({mainAxis:0,altAxis:0},R),D=t.modifiersData.offset?t.modifiersData.offset[t.placement]:null,q={x:0,y:0};if(B){if(c){var P,F="y"===T?r:a,W="y"===T?o:n,X="y"===T?"height":"width",V=B[T],$=V+x[F],G=V-x[W],K=y?-L[X]/2:0,Y=k===d?H[X]:L[X],J=k===d?-L[X]:-H[X],Q=t.elements.arrow,Z=y&&Q?M(Q):{width:0,height:0},ee=t.modifiersData["arrow#persistent"]?t.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0},te=ee[F],ie=ee[W],se=I(0,H[X],Z[X]),re=z?H[X]/2-K-se-te-C.mainAxis:Y-se-te-C.mainAxis,oe=z?-H[X]/2+K+se+ie+C.mainAxis:J+se+ie+C.mainAxis,ae=t.elements.arrow&&N(t.elements.arrow),le=ae?"y"===T?ae.clientTop||0:ae.clientLeft||0:0,ce=null!=(P=null==D?void 0:D[T])?P:0,de=V+oe-ce,pe=I(y?O($,V+re-ce-le):$,V,y?A(G,de):G);B[T]=pe,q[T]=pe-V}if(f){var fe,he="x"===T?r:a,ue="x"===T?o:n,me=B[E],ge="y"===E?"height":"width",ve=me+x[he],ye=me-x[ue],we=-1!==[r,a].indexOf(S),be=null!=(fe=null==D?void 0:D[E])?fe:0,xe=we?ve:me-H[ge]-L[ge]-be+C.altAxis,Se=we?me+H[ge]+L[ge]-be-C.altAxis:ye,_e=y&&we?function(e,t,i){var s=I(e,t,i);return s>i?i:s}(xe,me,Se):I(y?xe:ve,me,y?Se:ye);B[E]=_e,q[E]=_e-me}t.modifiersData[s]=q}},requiresIfExists:["offset"]};function he(e,t,i){void 0===i&&(i=!1);var s,r,o=b(t),n=b(t)&&function(e){var t=e.getBoundingClientRect(),i=k(t.width)/e.offsetWidth||1,s=k(t.height)/e.offsetHeight||1;return 1!==i||1!==s}(t),a=R(t),l=E(e,n,i),c={scrollLeft:0,scrollTop:0},d={x:0,y:0};return(o||!o&&!i)&&(("body"!==v(t)||Z(a))&&(c=(s=t)!==y(s)&&b(s)?{scrollLeft:(r=s).scrollLeft,scrollTop:r.scrollTop}:J(s)),b(t)?((d=E(t,!0)).x+=t.clientLeft,d.y+=t.clientTop):a&&(d.x=Q(a))),{x:l.left+c.scrollLeft-d.x,y:l.top+c.scrollTop-d.y,width:l.width,height:l.height}}function ue(e){var t=new Map,i=new Set,s=[];function r(e){i.add(e.name),[].concat(e.requires||[],e.requiresIfExists||[]).forEach(function(e){if(!i.has(e)){var s=t.get(e);s&&r(s)}}),s.push(e)}return e.forEach(function(e){t.set(e.name,e)}),e.forEach(function(e){i.has(e.name)||r(e)}),s}var me={placement:"bottom",modifiers:[],strategy:"absolute"};function ge(){for(var e=arguments.length,t=new Array(e),i=0;i<e;i++)t[i]=arguments[i];return!t.some(function(e){return!(e&&"function"==typeof e.getBoundingClientRect)})}function ve(e){void 0===e&&(e={});var t=e,i=t.defaultModifiers,s=void 0===i?[]:i,r=t.defaultOptions,o=void 0===r?me:r;return function(e,t,i){void 0===i&&(i=o);var r,n,a={placement:"bottom",orderedModifiers:[],options:Object.assign({},me,o),modifiersData:{},elements:{reference:e,popper:t},attributes:{},styles:{}},l=[],c=!1,d={state:a,setOptions:function(i){var r="function"==typeof i?i(a.options):i;p(),a.options=Object.assign({},o,a.options,r),a.scrollParents={reference:w(e)?te(e):e.contextElement?te(e.contextElement):[],popper:te(t)};var n,c,f=function(e){var t=ue(e);return g.reduce(function(e,i){return e.concat(t.filter(function(e){return e.phase===i}))},[])}((n=[].concat(s,a.options.modifiers),c=n.reduce(function(e,t){var i=e[t.name];return e[t.name]=i?Object.assign({},i,t,{options:Object.assign({},i.options,t.options),data:Object.assign({},i.data,t.data)}):t,e},{}),Object.keys(c).map(function(e){return c[e]})));return a.orderedModifiers=f.filter(function(e){return e.enabled}),a.orderedModifiers.forEach(function(e){var t=e.name,i=e.options,s=void 0===i?{}:i,r=e.effect;if("function"==typeof r){var o=r({state:a,name:t,instance:d,options:s}),n=function(){};l.push(o||n)}}),d.update()},forceUpdate:function(){if(!c){var e=a.elements,t=e.reference,i=e.popper;if(ge(t,i)){a.rects={reference:he(t,N(i),"fixed"===a.options.strategy),popper:M(i)},a.reset=!1,a.placement=a.options.placement,a.orderedModifiers.forEach(function(e){return a.modifiersData[e.name]=Object.assign({},e.data)});for(var s=0;s<a.orderedModifiers.length;s++)if(!0!==a.reset){var r=a.orderedModifiers[s],o=r.fn,n=r.options,l=void 0===n?{}:n,p=r.name;"function"==typeof o&&(a=o({state:a,options:l,name:p,instance:d})||a)}else a.reset=!1,s=-1}}},update:(r=function(){return new Promise(function(e){d.forceUpdate(),e(a)})},function(){return n||(n=new Promise(function(e){Promise.resolve().then(function(){n=void 0,e(r())})})),n}),destroy:function(){p(),c=!0}};if(!ge(e,t))return d;function p(){l.forEach(function(e){return e()}),l=[]}return d.setOptions(i).then(function(e){!c&&i.onFirstUpdate&&i.onFirstUpdate(e)}),d}}var ye=ve({defaultModifiers:[{name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:function(e){var t=e.state,i=e.instance,s=e.options,r=s.scroll,o=void 0===r||r,n=s.resize,a=void 0===n||n,l=y(t.elements.popper),c=[].concat(t.scrollParents.reference,t.scrollParents.popper);return o&&c.forEach(function(e){e.addEventListener("scroll",i.update,V)}),a&&l.addEventListener("resize",i.update,V),function(){o&&c.forEach(function(e){e.removeEventListener("scroll",i.update,V)}),a&&l.removeEventListener("resize",i.update,V)}},data:{}},{name:"popperOffsets",enabled:!0,phase:"read",fn:function(e){var t=e.state,i=e.name;t.modifiersData[i]=oe({reference:t.rects.reference,element:t.rects.popper,placement:t.placement})},data:{}},{name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(e){var t=e.state,i=e.options,s=i.gpuAcceleration,r=void 0===s||s,o=i.adaptive,n=void 0===o||o,a=i.roundOffsets,l=void 0===a||a,c={placement:_(t.placement),variation:U(t.placement),popper:t.elements.popper,popperRect:t.rects.popper,gpuAcceleration:r,isFixed:"fixed"===t.options.strategy};null!=t.modifiersData.popperOffsets&&(t.styles.popper=Object.assign({},t.styles.popper,X(Object.assign({},c,{offsets:t.modifiersData.popperOffsets,position:t.options.strategy,adaptive:n,roundOffsets:l})))),null!=t.modifiersData.arrow&&(t.styles.arrow=Object.assign({},t.styles.arrow,X(Object.assign({},c,{offsets:t.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:l})))),t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-placement":t.placement})},data:{}},S,pe,le,fe,F,{name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:function(e){var t=e.state,i=e.name,s=t.rects.reference,r=t.rects.popper,o=t.modifiersData.preventOverflow,n=ne(t,{elementContext:"reference"}),a=ne(t,{altBoundary:!0}),l=ce(n,s),c=ce(a,r,o),d=de(l),p=de(c);t.modifiersData[i]={referenceClippingOffsets:l,popperEscapeOffsets:c,isReferenceHidden:d,hasPopperEscaped:p},t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-reference-hidden":d,"data-popper-escaped":p})}}]});class we{constructor(e,t,i,s){this.anchor=e,this.popover=t,this.boundaryElement=this.setBoundary(s),this.options={placement:i,visibleClass:"data-show"},this.popover.classList.remove(this.options.visibleClass)}setBoundary(e){return"string"==typeof e?document.querySelector(e)||document.body:e||document.body}show(){this.popper&&this.popper.destroy(),this.popper=ye(this.anchor,this.popover,{tooltip:this.anchor,placement:this.options.placement,modifiers:[{name:"offset",options:{offset:[0,18]}},{name:"preventOverflow",options:{mainAxis:!0,boundary:this.boundaryElement,rootBoundary:"document",padding:16}}]})}triggerUpdate(){this.popper.update()}hide(){this.popover.classList.remove(this.options.visibleClass)}}var be=e`::slotted(*):not([onDark]),::slotted(*):not([appearance=inverse]){color:var(--ds-auro-popover-text-color)}.popover{background-color:var(--ds-auro-popover-container-color);box-shadow:var(--ds-auro-popover-boxshadow-color)}.arrow:before{background-color:var(--ds-auro-popover-container-color);box-shadow:2px 2px 1px 0 var(--ds-auro-popover-boxshadow-color)}
|
|
1
|
+
import{css as e,LitElement as t,html as i}from"lit";class s{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,i=(t,s=t&&t.closest(e))=>t&&t!==document&&t!==window?s||i(t.getRootNode().host):null){return i(t)}handleComponentTagRename(e,t){const i=t.toLowerCase();e.tagName.toLowerCase()!==i&&e.setAttribute(i,!0)}elementMatch(e,t){const i=t.toLowerCase();return e.tagName.toLowerCase()===i||e.hasAttribute(i)}getSlotText(e,t){const i=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return(i?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}var r="top",o="bottom",n="right",a="left",l="auto",c=[r,o,n,a],p="start",d="end",f="viewport",h="popper",u=c.reduce(function(e,t){return e.concat([t+"-"+p,t+"-"+d])},[]),m=[].concat(c,[l]).reduce(function(e,t){return e.concat([t,t+"-"+p,t+"-"+d])},[]),g=["beforeRead","read","afterRead","beforeMain","main","afterMain","beforeWrite","write","afterWrite"];function v(e){return e?(e.nodeName||"").toLowerCase():null}function y(e){if(null==e)return window;if("[object Window]"!==e.toString()){var t=e.ownerDocument;return t&&t.defaultView||window}return e}function w(e){return e instanceof y(e).Element||e instanceof Element}function b(e){return e instanceof y(e).HTMLElement||e instanceof HTMLElement}function x(e){return"undefined"!=typeof ShadowRoot&&(e instanceof y(e).ShadowRoot||e instanceof ShadowRoot)}var S={name:"applyStyles",enabled:!0,phase:"write",fn:function(e){var t=e.state;Object.keys(t.elements).forEach(function(e){var i=t.styles[e]||{},s=t.attributes[e]||{},r=t.elements[e];b(r)&&v(r)&&(Object.assign(r.style,i),Object.keys(s).forEach(function(e){var t=s[e];!1===t?r.removeAttribute(e):r.setAttribute(e,!0===t?"":t)}))})},effect:function(e){var t=e.state,i={popper:{position:t.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(t.elements.popper.style,i.popper),t.styles=i,t.elements.arrow&&Object.assign(t.elements.arrow.style,i.arrow),function(){Object.keys(t.elements).forEach(function(e){var s=t.elements[e],r=t.attributes[e]||{},o=Object.keys(t.styles.hasOwnProperty(e)?t.styles[e]:i[e]).reduce(function(e,t){return e[t]="",e},{});b(s)&&v(s)&&(Object.assign(s.style,o),Object.keys(r).forEach(function(e){s.removeAttribute(e)}))})}},requires:["computeStyles"]};function _(e){return e.split("-")[0]}var A=Math.max,O=Math.min,k=Math.round;function z(){var e=navigator.userAgentData;return null!=e&&e.brands&&Array.isArray(e.brands)?e.brands.map(function(e){return e.brand+"/"+e.version}).join(" "):navigator.userAgent}function T(){return!/^((?!chrome|android).)*safari/i.test(z())}function E(e,t,i){void 0===t&&(t=!1),void 0===i&&(i=!1);var s=e.getBoundingClientRect(),r=1,o=1;t&&b(e)&&(r=e.offsetWidth>0&&k(s.width)/e.offsetWidth||1,o=e.offsetHeight>0&&k(s.height)/e.offsetHeight||1);var n=(w(e)?y(e):window).visualViewport,a=!T()&&i,l=(s.left+(a&&n?n.offsetLeft:0))/r,c=(s.top+(a&&n?n.offsetTop:0))/o,p=s.width/r,d=s.height/o;return{width:p,height:d,top:c,right:l+p,bottom:c+d,left:l,x:l,y:c}}function M(e){var t=E(e),i=e.offsetWidth,s=e.offsetHeight;return Math.abs(t.width-i)<=1&&(i=t.width),Math.abs(t.height-s)<=1&&(s=t.height),{x:e.offsetLeft,y:e.offsetTop,width:i,height:s}}function B(e,t){var i=t.getRootNode&&t.getRootNode();if(e.contains(t))return!0;if(i&&x(i)){var s=t;do{if(s&&e.isSameNode(s))return!0;s=s.parentNode||s.host}while(s)}return!1}function L(e){return y(e).getComputedStyle(e)}function R(e){return["table","td","th"].indexOf(v(e))>=0}function H(e){return((w(e)?e.ownerDocument:e.document)||window.document).documentElement}function C(e){return"html"===v(e)?e:e.assignedSlot||e.parentNode||(x(e)?e.host:null)||H(e)}function D(e){return b(e)&&"fixed"!==L(e).position?e.offsetParent:null}function N(e){for(var t=y(e),i=D(e);i&&R(i)&&"static"===L(i).position;)i=D(i);return i&&("html"===v(i)||"body"===v(i)&&"static"===L(i).position)?t:i||function(e){var t=/firefox/i.test(z());if(/Trident/i.test(z())&&b(e)&&"fixed"===L(e).position)return null;var i=C(e);for(x(i)&&(i=i.host);b(i)&&["html","body"].indexOf(v(i))<0;){var s=L(i);if("none"!==s.transform||"none"!==s.perspective||"paint"===s.contain||-1!==["transform","perspective"].indexOf(s.willChange)||t&&"filter"===s.willChange||t&&s.filter&&"none"!==s.filter)return i;i=i.parentNode}return null}(e)||t}function j(e){return["top","bottom"].indexOf(e)>=0?"x":"y"}function I(e,t,i){return A(e,O(t,i))}function P(e){return Object.assign({},{top:0,right:0,bottom:0,left:0},e)}function q(e,t){return t.reduce(function(t,i){return t[i]=e,t},{})}var F={name:"arrow",enabled:!0,phase:"main",fn:function(e){var t,i=e.state,s=e.name,l=e.options,p=i.elements.arrow,d=i.modifiersData.popperOffsets,f=_(i.placement),h=j(f),u=[a,n].indexOf(f)>=0?"height":"width";if(p&&d){var m=function(e,t){return P("number"!=typeof(e="function"==typeof e?e(Object.assign({},t.rects,{placement:t.placement})):e)?e:q(e,c))}(l.padding,i),g=M(p),v="y"===h?r:a,y="y"===h?o:n,w=i.rects.reference[u]+i.rects.reference[h]-d[h]-i.rects.popper[u],b=d[h]-i.rects.reference[h],x=N(p),S=x?"y"===h?x.clientHeight||0:x.clientWidth||0:0,A=w/2-b/2,O=m[v],k=S-g[u]-m[y],z=S/2-g[u]/2+A,T=I(O,z,k),E=h;i.modifiersData[s]=((t={})[E]=T,t.centerOffset=T-z,t)}},effect:function(e){var t=e.state,i=e.options.element,s=void 0===i?"[data-popper-arrow]":i;null!=s&&("string"!=typeof s||(s=t.elements.popper.querySelector(s)))&&B(t.elements.popper,s)&&(t.elements.arrow=s)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function U(e){return e.split("-")[1]}var V={top:"auto",right:"auto",bottom:"auto",left:"auto"};function W(e){var t,i=e.popper,s=e.popperRect,l=e.placement,c=e.variation,p=e.offsets,f=e.position,h=e.gpuAcceleration,u=e.adaptive,m=e.roundOffsets,g=e.isFixed,v=p.x,w=void 0===v?0:v,b=p.y,x=void 0===b?0:b,S="function"==typeof m?m({x:w,y:x}):{x:w,y:x};w=S.x,x=S.y;var _=p.hasOwnProperty("x"),A=p.hasOwnProperty("y"),O=a,z=r,T=window;if(u){var E=N(i),M="clientHeight",B="clientWidth";if(E===y(i)&&"static"!==L(E=H(i)).position&&"absolute"===f&&(M="scrollHeight",B="scrollWidth"),l===r||(l===a||l===n)&&c===d)z=o,x-=(g&&E===T&&T.visualViewport?T.visualViewport.height:E[M])-s.height,x*=h?1:-1;if(l===a||(l===r||l===o)&&c===d)O=n,w-=(g&&E===T&&T.visualViewport?T.visualViewport.width:E[B])-s.width,w*=h?1:-1}var R,C=Object.assign({position:f},u&&V),D=!0===m?function(e,t){var i=e.x,s=e.y,r=t.devicePixelRatio||1;return{x:k(i*r)/r||0,y:k(s*r)/r||0}}({x:w,y:x},y(i)):{x:w,y:x};return w=D.x,x=D.y,h?Object.assign({},C,((R={})[z]=A?"0":"",R[O]=_?"0":"",R.transform=(T.devicePixelRatio||1)<=1?"translate("+w+"px, "+x+"px)":"translate3d("+w+"px, "+x+"px, 0)",R)):Object.assign({},C,((t={})[z]=A?x+"px":"",t[O]=_?w+"px":"",t.transform="",t))}var X={passive:!0};var $={left:"right",right:"left",bottom:"top",top:"bottom"};function G(e){return e.replace(/left|right|bottom|top/g,function(e){return $[e]})}var K={start:"end",end:"start"};function Y(e){return e.replace(/start|end/g,function(e){return K[e]})}function J(e){var t=y(e);return{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function Q(e){return E(H(e)).left+J(e).scrollLeft}function Z(e){var t=L(e),i=t.overflow,s=t.overflowX,r=t.overflowY;return/auto|scroll|overlay|hidden/.test(i+r+s)}function ee(e){return["html","body","#document"].indexOf(v(e))>=0?e.ownerDocument.body:b(e)&&Z(e)?e:ee(C(e))}function te(e,t){var i;void 0===t&&(t=[]);var s=ee(e),r=s===(null==(i=e.ownerDocument)?void 0:i.body),o=y(s),n=r?[o].concat(o.visualViewport||[],Z(s)?s:[]):s,a=t.concat(n);return r?a:a.concat(te(C(n)))}function ie(e){return Object.assign({},e,{left:e.x,top:e.y,right:e.x+e.width,bottom:e.y+e.height})}function se(e,t,i){return t===f?ie(function(e,t){var i=y(e),s=H(e),r=i.visualViewport,o=s.clientWidth,n=s.clientHeight,a=0,l=0;if(r){o=r.width,n=r.height;var c=T();(c||!c&&"fixed"===t)&&(a=r.offsetLeft,l=r.offsetTop)}return{width:o,height:n,x:a+Q(e),y:l}}(e,i)):w(t)?function(e,t){var i=E(e,!1,"fixed"===t);return i.top=i.top+e.clientTop,i.left=i.left+e.clientLeft,i.bottom=i.top+e.clientHeight,i.right=i.left+e.clientWidth,i.width=e.clientWidth,i.height=e.clientHeight,i.x=i.left,i.y=i.top,i}(t,i):ie(function(e){var t,i=H(e),s=J(e),r=null==(t=e.ownerDocument)?void 0:t.body,o=A(i.scrollWidth,i.clientWidth,r?r.scrollWidth:0,r?r.clientWidth:0),n=A(i.scrollHeight,i.clientHeight,r?r.scrollHeight:0,r?r.clientHeight:0),a=-s.scrollLeft+Q(e),l=-s.scrollTop;return"rtl"===L(r||i).direction&&(a+=A(i.clientWidth,r?r.clientWidth:0)-o),{width:o,height:n,x:a,y:l}}(H(e)))}function re(e,t,i,s){var r="clippingParents"===t?function(e){var t=te(C(e)),i=["absolute","fixed"].indexOf(L(e).position)>=0&&b(e)?N(e):e;return w(i)?t.filter(function(e){return w(e)&&B(e,i)&&"body"!==v(e)}):[]}(e):[].concat(t),o=[].concat(r,[i]),n=o[0],a=o.reduce(function(t,i){var r=se(e,i,s);return t.top=A(r.top,t.top),t.right=O(r.right,t.right),t.bottom=O(r.bottom,t.bottom),t.left=A(r.left,t.left),t},se(e,n,s));return a.width=a.right-a.left,a.height=a.bottom-a.top,a.x=a.left,a.y=a.top,a}function oe(e){var t,i=e.reference,s=e.element,l=e.placement,c=l?_(l):null,f=l?U(l):null,h=i.x+i.width/2-s.width/2,u=i.y+i.height/2-s.height/2;switch(c){case r:t={x:h,y:i.y-s.height};break;case o:t={x:h,y:i.y+i.height};break;case n:t={x:i.x+i.width,y:u};break;case a:t={x:i.x-s.width,y:u};break;default:t={x:i.x,y:i.y}}var m=c?j(c):null;if(null!=m){var g="y"===m?"height":"width";switch(f){case p:t[m]=t[m]-(i[g]/2-s[g]/2);break;case d:t[m]=t[m]+(i[g]/2-s[g]/2)}}return t}function ne(e,t){void 0===t&&(t={});var i=t,s=i.placement,a=void 0===s?e.placement:s,l=i.strategy,p=void 0===l?e.strategy:l,d=i.boundary,u=void 0===d?"clippingParents":d,m=i.rootBoundary,g=void 0===m?f:m,v=i.elementContext,y=void 0===v?h:v,b=i.altBoundary,x=void 0!==b&&b,S=i.padding,_=void 0===S?0:S,A=P("number"!=typeof _?_:q(_,c)),O=y===h?"reference":h,k=e.rects.popper,z=e.elements[x?O:y],T=re(w(z)?z:z.contextElement||H(e.elements.popper),u,g,p),M=E(e.elements.reference),B=oe({reference:M,element:k,placement:a}),L=ie(Object.assign({},k,B)),R=y===h?L:M,C={top:T.top-R.top+A.top,bottom:R.bottom-T.bottom+A.bottom,left:T.left-R.left+A.left,right:R.right-T.right+A.right},D=e.modifiersData.offset;if(y===h&&D){var N=D[a];Object.keys(C).forEach(function(e){var t=[n,o].indexOf(e)>=0?1:-1,i=[r,o].indexOf(e)>=0?"y":"x";C[e]+=N[i]*t})}return C}function ae(e,t){void 0===t&&(t={});var i=t,s=i.placement,r=i.boundary,o=i.rootBoundary,n=i.padding,a=i.flipVariations,l=i.allowedAutoPlacements,p=void 0===l?m:l,d=U(s),f=d?a?u:u.filter(function(e){return U(e)===d}):c,h=f.filter(function(e){return p.indexOf(e)>=0});0===h.length&&(h=f);var g=h.reduce(function(t,i){return t[i]=ne(e,{placement:i,boundary:r,rootBoundary:o,padding:n})[_(i)],t},{});return Object.keys(g).sort(function(e,t){return g[e]-g[t]})}var le={name:"flip",enabled:!0,phase:"main",fn:function(e){var t=e.state,i=e.options,s=e.name;if(!t.modifiersData[s]._skip){for(var c=i.mainAxis,d=void 0===c||c,f=i.altAxis,h=void 0===f||f,u=i.fallbackPlacements,m=i.padding,g=i.boundary,v=i.rootBoundary,y=i.altBoundary,w=i.flipVariations,b=void 0===w||w,x=i.allowedAutoPlacements,S=t.options.placement,A=_(S),O=u||(A===S||!b?[G(S)]:function(e){if(_(e)===l)return[];var t=G(e);return[Y(e),t,Y(t)]}(S)),k=[S].concat(O).reduce(function(e,i){return e.concat(_(i)===l?ae(t,{placement:i,boundary:g,rootBoundary:v,padding:m,flipVariations:b,allowedAutoPlacements:x}):i)},[]),z=t.rects.reference,T=t.rects.popper,E=new Map,M=!0,B=k[0],L=0;L<k.length;L++){var R=k[L],H=_(R),C=U(R)===p,D=[r,o].indexOf(H)>=0,N=D?"width":"height",j=ne(t,{placement:R,boundary:g,rootBoundary:v,altBoundary:y,padding:m}),I=D?C?n:a:C?o:r;z[N]>T[N]&&(I=G(I));var P=G(I),q=[];if(d&&q.push(j[H]<=0),h&&q.push(j[I]<=0,j[P]<=0),q.every(function(e){return e})){B=R,M=!1;break}E.set(R,q)}if(M)for(var F=function(e){var t=k.find(function(t){var i=E.get(t);if(i)return i.slice(0,e).every(function(e){return e})});if(t)return B=t,"break"},V=b?3:1;V>0;V--){if("break"===F(V))break}t.placement!==B&&(t.modifiersData[s]._skip=!0,t.placement=B,t.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}};function ce(e,t,i){return void 0===i&&(i={x:0,y:0}),{top:e.top-t.height-i.y,right:e.right-t.width+i.x,bottom:e.bottom-t.height+i.y,left:e.left-t.width-i.x}}function pe(e){return[r,n,o,a].some(function(t){return e[t]>=0})}var de={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(e){var t=e.state,i=e.options,s=e.name,o=i.offset,l=void 0===o?[0,0]:o,c=m.reduce(function(e,i){return e[i]=function(e,t,i){var s=_(e),o=[a,r].indexOf(s)>=0?-1:1,l="function"==typeof i?i(Object.assign({},t,{placement:e})):i,c=l[0],p=l[1];return c=c||0,p=(p||0)*o,[a,n].indexOf(s)>=0?{x:p,y:c}:{x:c,y:p}}(i,t.rects,l),e},{}),p=c[t.placement],d=p.x,f=p.y;null!=t.modifiersData.popperOffsets&&(t.modifiersData.popperOffsets.x+=d,t.modifiersData.popperOffsets.y+=f),t.modifiersData[s]=c}};var fe={name:"preventOverflow",enabled:!0,phase:"main",fn:function(e){var t=e.state,i=e.options,s=e.name,l=i.mainAxis,c=void 0===l||l,d=i.altAxis,f=void 0!==d&&d,h=i.boundary,u=i.rootBoundary,m=i.altBoundary,g=i.padding,v=i.tether,y=void 0===v||v,w=i.tetherOffset,b=void 0===w?0:w,x=ne(t,{boundary:h,rootBoundary:u,padding:g,altBoundary:m}),S=_(t.placement),k=U(t.placement),z=!k,T=j(S),E="x"===T?"y":"x",B=t.modifiersData.popperOffsets,L=t.rects.reference,R=t.rects.popper,H="function"==typeof b?b(Object.assign({},t.rects,{placement:t.placement})):b,C="number"==typeof H?{mainAxis:H,altAxis:H}:Object.assign({mainAxis:0,altAxis:0},H),D=t.modifiersData.offset?t.modifiersData.offset[t.placement]:null,P={x:0,y:0};if(B){if(c){var q,F="y"===T?r:a,V="y"===T?o:n,W="y"===T?"height":"width",X=B[T],$=X+x[F],G=X-x[V],K=y?-R[W]/2:0,Y=k===p?L[W]:R[W],J=k===p?-R[W]:-L[W],Q=t.elements.arrow,Z=y&&Q?M(Q):{width:0,height:0},ee=t.modifiersData["arrow#persistent"]?t.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0},te=ee[F],ie=ee[V],se=I(0,L[W],Z[W]),re=z?L[W]/2-K-se-te-C.mainAxis:Y-se-te-C.mainAxis,oe=z?-L[W]/2+K+se+ie+C.mainAxis:J+se+ie+C.mainAxis,ae=t.elements.arrow&&N(t.elements.arrow),le=ae?"y"===T?ae.clientTop||0:ae.clientLeft||0:0,ce=null!=(q=null==D?void 0:D[T])?q:0,pe=X+oe-ce,de=I(y?O($,X+re-ce-le):$,X,y?A(G,pe):G);B[T]=de,P[T]=de-X}if(f){var fe,he="x"===T?r:a,ue="x"===T?o:n,me=B[E],ge="y"===E?"height":"width",ve=me+x[he],ye=me-x[ue],we=-1!==[r,a].indexOf(S),be=null!=(fe=null==D?void 0:D[E])?fe:0,xe=we?ve:me-L[ge]-R[ge]-be+C.altAxis,Se=we?me+L[ge]+R[ge]-be-C.altAxis:ye,_e=y&&we?function(e,t,i){var s=I(e,t,i);return s>i?i:s}(xe,me,Se):I(y?xe:ve,me,y?Se:ye);B[E]=_e,P[E]=_e-me}t.modifiersData[s]=P}},requiresIfExists:["offset"]};function he(e,t,i){void 0===i&&(i=!1);var s,r,o=b(t),n=b(t)&&function(e){var t=e.getBoundingClientRect(),i=k(t.width)/e.offsetWidth||1,s=k(t.height)/e.offsetHeight||1;return 1!==i||1!==s}(t),a=H(t),l=E(e,n,i),c={scrollLeft:0,scrollTop:0},p={x:0,y:0};return(o||!o&&!i)&&(("body"!==v(t)||Z(a))&&(c=(s=t)!==y(s)&&b(s)?{scrollLeft:(r=s).scrollLeft,scrollTop:r.scrollTop}:J(s)),b(t)?((p=E(t,!0)).x+=t.clientLeft,p.y+=t.clientTop):a&&(p.x=Q(a))),{x:l.left+c.scrollLeft-p.x,y:l.top+c.scrollTop-p.y,width:l.width,height:l.height}}function ue(e){var t=new Map,i=new Set,s=[];function r(e){i.add(e.name),[].concat(e.requires||[],e.requiresIfExists||[]).forEach(function(e){if(!i.has(e)){var s=t.get(e);s&&r(s)}}),s.push(e)}return e.forEach(function(e){t.set(e.name,e)}),e.forEach(function(e){i.has(e.name)||r(e)}),s}var me={placement:"bottom",modifiers:[],strategy:"absolute"};function ge(){for(var e=arguments.length,t=new Array(e),i=0;i<e;i++)t[i]=arguments[i];return!t.some(function(e){return!(e&&"function"==typeof e.getBoundingClientRect)})}function ve(e){void 0===e&&(e={});var t=e,i=t.defaultModifiers,s=void 0===i?[]:i,r=t.defaultOptions,o=void 0===r?me:r;return function(e,t,i){void 0===i&&(i=o);var r,n,a={placement:"bottom",orderedModifiers:[],options:Object.assign({},me,o),modifiersData:{},elements:{reference:e,popper:t},attributes:{},styles:{}},l=[],c=!1,p={state:a,setOptions:function(i){var r="function"==typeof i?i(a.options):i;d(),a.options=Object.assign({},o,a.options,r),a.scrollParents={reference:w(e)?te(e):e.contextElement?te(e.contextElement):[],popper:te(t)};var n,c,f=function(e){var t=ue(e);return g.reduce(function(e,i){return e.concat(t.filter(function(e){return e.phase===i}))},[])}((n=[].concat(s,a.options.modifiers),c=n.reduce(function(e,t){var i=e[t.name];return e[t.name]=i?Object.assign({},i,t,{options:Object.assign({},i.options,t.options),data:Object.assign({},i.data,t.data)}):t,e},{}),Object.keys(c).map(function(e){return c[e]})));return a.orderedModifiers=f.filter(function(e){return e.enabled}),a.orderedModifiers.forEach(function(e){var t=e.name,i=e.options,s=void 0===i?{}:i,r=e.effect;if("function"==typeof r){var o=r({state:a,name:t,instance:p,options:s}),n=function(){};l.push(o||n)}}),p.update()},forceUpdate:function(){if(!c){var e=a.elements,t=e.reference,i=e.popper;if(ge(t,i)){a.rects={reference:he(t,N(i),"fixed"===a.options.strategy),popper:M(i)},a.reset=!1,a.placement=a.options.placement,a.orderedModifiers.forEach(function(e){return a.modifiersData[e.name]=Object.assign({},e.data)});for(var s=0;s<a.orderedModifiers.length;s++)if(!0!==a.reset){var r=a.orderedModifiers[s],o=r.fn,n=r.options,l=void 0===n?{}:n,d=r.name;"function"==typeof o&&(a=o({state:a,options:l,name:d,instance:p})||a)}else a.reset=!1,s=-1}}},update:(r=function(){return new Promise(function(e){p.forceUpdate(),e(a)})},function(){return n||(n=new Promise(function(e){Promise.resolve().then(function(){n=void 0,e(r())})})),n}),destroy:function(){d(),c=!0}};if(!ge(e,t))return p;function d(){l.forEach(function(e){return e()}),l=[]}return p.setOptions(i).then(function(e){!c&&i.onFirstUpdate&&i.onFirstUpdate(e)}),p}}var ye=ve({defaultModifiers:[{name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:function(e){var t=e.state,i=e.instance,s=e.options,r=s.scroll,o=void 0===r||r,n=s.resize,a=void 0===n||n,l=y(t.elements.popper),c=[].concat(t.scrollParents.reference,t.scrollParents.popper);return o&&c.forEach(function(e){e.addEventListener("scroll",i.update,X)}),a&&l.addEventListener("resize",i.update,X),function(){o&&c.forEach(function(e){e.removeEventListener("scroll",i.update,X)}),a&&l.removeEventListener("resize",i.update,X)}},data:{}},{name:"popperOffsets",enabled:!0,phase:"read",fn:function(e){var t=e.state,i=e.name;t.modifiersData[i]=oe({reference:t.rects.reference,element:t.rects.popper,placement:t.placement})},data:{}},{name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(e){var t=e.state,i=e.options,s=i.gpuAcceleration,r=void 0===s||s,o=i.adaptive,n=void 0===o||o,a=i.roundOffsets,l=void 0===a||a,c={placement:_(t.placement),variation:U(t.placement),popper:t.elements.popper,popperRect:t.rects.popper,gpuAcceleration:r,isFixed:"fixed"===t.options.strategy};null!=t.modifiersData.popperOffsets&&(t.styles.popper=Object.assign({},t.styles.popper,W(Object.assign({},c,{offsets:t.modifiersData.popperOffsets,position:t.options.strategy,adaptive:n,roundOffsets:l})))),null!=t.modifiersData.arrow&&(t.styles.arrow=Object.assign({},t.styles.arrow,W(Object.assign({},c,{offsets:t.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:l})))),t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-placement":t.placement})},data:{}},S,de,le,fe,F,{name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:function(e){var t=e.state,i=e.name,s=t.rects.reference,r=t.rects.popper,o=t.modifiersData.preventOverflow,n=ne(t,{elementContext:"reference"}),a=ne(t,{altBoundary:!0}),l=ce(n,s),c=ce(a,r,o),p=pe(l),d=pe(c);t.modifiersData[i]={referenceClippingOffsets:l,popperEscapeOffsets:c,isReferenceHidden:p,hasPopperEscaped:d},t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-reference-hidden":p,"data-popper-escaped":d})}}]});class we{constructor(e,t,i,s){this.anchor=e,this.popover=t,this.boundaryElement=this.setBoundary(s),this.options={placement:i,visibleClass:"data-show"},this.popover.classList.remove(this.options.visibleClass)}setBoundary(e){return"string"==typeof e?document.querySelector(e)||document.body:e||document.body}show(){this.popper&&this.popper.destroy(),this.popper=ye(this.anchor,this.popover,{tooltip:this.anchor,placement:this.options.placement,modifiers:[{name:"offset",options:{offset:[0,18]}},{name:"preventOverflow",options:{mainAxis:!0,boundary:this.boundaryElement,rootBoundary:"document",padding:16}}]})}triggerUpdate(){this.popper.update()}hide(){this.popover.classList.remove(this.options.visibleClass)}}var be=e`::slotted(*):not([onDark]),::slotted(*):not([appearance=inverse]){color:var(--ds-auro-popover-text-color)}.popover{background-color:var(--ds-auro-popover-container-color);box-shadow:var(--ds-auro-popover-boxshadow-color)}.arrow:before{background-color:var(--ds-auro-popover-container-color);box-shadow:2px 2px 1px 0 var(--ds-auro-popover-boxshadow-color)}
|
|
2
2
|
`,xe=e`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host(:not([data-show])) .popover,:host([disabled]) .popover,:host([addSpace]) :host(:not([data-show])) .popover{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}::slotted(*){white-space:normal}::slotted(*:hover){cursor:pointer}[data-trigger-placement]::slotted(*:hover){position:relative}[data-trigger-placement]::slotted(*:hover):before{position:absolute;left:0;display:block;width:100%;height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, .25rem));content:""}[data-trigger-placement^=top]::slotted(*:hover):before{top:calc(-1 * (var(--ds-size-200, 1rem) + var(--ds-size-50, .25rem)))}[data-trigger-placement^=bottom]::slotted(*:hover):before{bottom:calc(-1 * (var(--ds-size-200, 1rem) + var(--ds-size-50, .25rem)))}:host([data-show]) .popover{z-index:var(--ds-depth-tooltip, 400)}:host([removeSpace]) .popover{margin:calc(-1 * (var(--ds-size-50, .25rem) + 1px)) 0!important}:host([addSpace]) .popover{margin:var(--ds-size-200, 1rem) 0!important}:host([addSpace]) [data-trigger-placement]::slotted(*:hover):before{height:var(--ds-size-500, 2.5rem)}:host([addSpace]) [data-trigger-placement^=top]::slotted(*:hover):before{top:calc(-1 * var(--ds-size-500, 2.5rem))}:host([addSpace]) [data-trigger-placement^=bottom]::slotted(*:hover):before{bottom:calc(-1 * var(--ds-size-500, 2.5rem))}.popover{display:inline-block;max-width:calc(100% - var(--ds-size-400, 2rem));border-radius:var(--ds-border-radius, .375rem)}@media screen and (min-width:576px){.popover{max-width:50%}}@media screen and (min-width:768px){.popover{max-width:40%}}@media screen and (min-width:1024px){.popover{max-width:27rem}}[data-popper-placement^=top]>.arrow{bottom:calc(-1 * (var(--ds-size-100, .5rem) + var(--ds-size-25, .125rem)))}[data-popper-placement^=top]>.arrow:before{top:calc(-1 * var(--ds-size-200, 1rem));left:calc(-1 * var(--ds-size-75, .375rem));transform:rotate(45deg)}[data-popper-placement^=bottom]>.arrow{top:calc(-1 * (var(--ds-size-100, .5rem) + var(--ds-size-25, .125rem)))}[data-popper-placement^=bottom]>.arrow:before{top:var(--ds-size-50, .25rem);right:calc(-1 * var(--ds-size-200, 1rem));transform:rotate(-135deg)}.arrow{position:relative;margin-top:-var(--ds-size-100,.5rem)}.arrow:before{position:absolute;width:var(--ds-size-150, .75rem);height:var(--ds-size-150, .75rem);content:""}
|
|
3
3
|
`,Se=e`:host{--ds-auro-popover-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, .15));--ds-auro-popover-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-popover-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
|
|
4
|
-
`;class _e extends t{constructor(){super(),this.placement="top",this._onTouchStart=null,this._onTriggerMouseEnter=null,this._onTriggerMouseLeave=null,this._onTriggerFocus=null,this._onTriggerBlur=null,this._onTriggerKeydown=null,this._onHidePopover=null,this._onBodyMouseover=null,this._onSlotChange=null,this._addedTabIndex=!1}_initializeDefaults(){this.
|
|
4
|
+
`;class _e extends t{constructor(){super(),this.placement="top",this.isPopoverVisible=!1,this._onTouchStart=null,this._onTriggerMouseEnter=null,this._onTriggerMouseLeave=null,this._onTriggerFocus=null,this._onTriggerBlur=null,this._onTriggerKeydown=null,this._onHidePopover=null,this._onBodyMouseover=null,this._onSlotChange=null,this._addedTabIndex=!1}_initializeDefaults(){this.runtimeUtils=new s}static get properties(){return{addSpace:{type:Boolean,reflect:!0},boundary:{type:String},disabled:{type:Boolean,reflect:!0},for:{type:String,reflect:!0},placement:{type:String},removeSpace:{type:Boolean,reflect:!0},isPopoverVisible:{type:Boolean,reflect:!0,attribute:"data-show"}}}static get styles(){return[e`${xe}`,e`${be}`,e`${Se}`]}static register(e="auro-popover"){s.prototype.registerComponent(e,_e)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","none"),this._initializeDefaults(),this._onTouchStart||(this._onTouchStart=()=>{this.toggle()}),this.addEventListener("touchstart",this._onTouchStart)}disconnectedCallback(){if(super.disconnectedCallback(),this.removeEventListener("touchstart",this._onTouchStart),this.trigger){this._onTriggerMouseEnter&&this._eventTarget.removeEventListener("mouseenter",this._onTriggerMouseEnter),this._onTriggerMouseLeave&&this._eventTarget.removeEventListener("mouseleave",this._onTriggerMouseLeave),this._onTriggerFocus&&this.trigger.removeEventListener("focusin",this._onTriggerFocus),this._onTriggerBlur&&this.trigger.removeEventListener("focusout",this._onTriggerBlur),this._onTriggerKeydown&&this.trigger.removeEventListener("keydown",this._onTriggerKeydown),this._onSlotChange&&this.shadowRoot?.querySelector("slot:not([name])")?.removeEventListener("slotchange",this._onSlotChange);for(const e of this._ariaDescriptionTargets||[this.trigger])e.removeAttribute("aria-description");this._addedTabIndex&&"0"===this.trigger.getAttribute("tabindex")&&this.trigger.removeAttribute("tabindex")}this._onHidePopover&&this.removeEventListener("hidePopover",this._onHidePopover),this._onBodyMouseover&&document.body.removeEventListener("mouseover",this._onBodyMouseover),this.popper?.popper&&"function"==typeof this.popper.popper.destroy&&(this.popper.popper.destroy(),this.popper.popper=null)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-popover"),this.for&&(this.trigger=document.querySelector(`#${this.for}`)||this.getRootNode().querySelector(`#${this.for}`)),this.trigger||([this.trigger]=this.shadowRoot.querySelector('slot[name="trigger"]').assignedElements()),this.trigger&&(this._setupAccessibility(),this._setupEventListeners())}_setupEventListeners(){this.auroPopover=this.shadowRoot.querySelector("#popover"),this.popper=new we(this.trigger,this.auroPopover,this.placement,this.boundary),this._onBodyMouseover=e=>this.handleMouseoverEvent(e),this._onTriggerMouseEnter=()=>{this.toggleShow()},this._onTriggerMouseLeave=()=>{this.toggleHide()},this._onTriggerFocus=()=>{this.toggleShow()},this._onTriggerBlur=e=>{let t=e.relatedTarget,i=!1;for(;t;){if(this.trigger.contains(t)){i=!0;break}const e=t.getRootNode();t=e instanceof ShadowRoot?e.host:null}i||this.toggleHide()},this._onTriggerKeydown=e=>{const t=e.key.toLowerCase();this.isPopoverVisible&&("tab"!==t&&"escape"!==t||this.toggleHide())," "!==t&&"enter"!==t||(" "===t&&this._addedTabIndex&&e.preventDefault(),this.toggle())},this._onHidePopover=()=>{this.toggleHide()},this._eventTarget=this.trigger.parentElement.localName===this.localName?this:this.trigger,this._eventTarget.addEventListener("mouseenter",this._onTriggerMouseEnter),this._eventTarget.addEventListener("mouseleave",this._onTriggerMouseLeave),this.trigger.addEventListener("keydown",this._onTriggerKeydown),this.trigger.addEventListener("focusin",this._onTriggerFocus),this.trigger.addEventListener("focusout",this._onTriggerBlur),this.addEventListener("hidePopover",this._onHidePopover)}_setupAccessibility(){const e=this.trigger.tabIndex>=0,t='button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex^="-"]), [contenteditable]:not([contenteditable="false"]), summary, iframe, audio[controls], video[controls]',i=e=>{if(e.tabIndex<0)return!1;let t=e;for(;t;){if(t.closest("[hidden], [inert]"))return!1;const e=t.getRootNode();t=e instanceof ShadowRoot?e.host:null}return!0};let s=[...this.trigger.querySelectorAll(t)].some(i);if(!s){const e=this.trigger.querySelectorAll("*");for(const r of e)if(r.localName.includes("-")&&(r.tabIndex>=0||r.shadowRoot&&[...r.shadowRoot.querySelectorAll(t)].some(i))){s=!0;break}}!s&&this.trigger.localName.includes("-")&&this.trigger.shadowRoot&&(s=[...this.trigger.shadowRoot.querySelectorAll(t)].some(i)),e||s||this.trigger.hasAttribute("tabindex")||(this.trigger.setAttribute("tabindex","0"),this._addedTabIndex=!0);const r=this.shadowRoot.querySelector("slot:not([name])"),o=()=>r.assignedNodes({flatten:!0}).map(e=>e.textContent??"").join(" ").replace(/\s+/g," ").trim();if(this._ariaDescriptionTargets=[],!e&&s){const e=[...this.trigger.querySelectorAll(t)].filter(i);this._ariaDescriptionTargets.push(...e);const s=this.trigger.querySelectorAll("*");for(const r of s)if(r.localName.includes("-")&&!e.includes(r))if(r.tabIndex>=0)this._ariaDescriptionTargets.push(r);else if(r.shadowRoot){const e=[...r.shadowRoot.querySelectorAll(t)].filter(i);for(const t of e)this._ariaDescriptionTargets.push(t)}0===this._ariaDescriptionTargets.length&&this._ariaDescriptionTargets.push(this.trigger)}else this._ariaDescriptionTargets.push(this.trigger);const n=o();for(const e of this._ariaDescriptionTargets)e.setAttribute("aria-description",n);this._onSlotChange=()=>{const e=o();for(const t of this._ariaDescriptionTargets)t?.setAttribute("aria-description",e)},r.addEventListener("slotchange",this._onSlotChange)}toggle(){this.popper&&(this.isPopoverVisible?this.toggleHide():this.toggleShow())}toggleHide(){this.isPopoverVisible=!1,this._onBodyMouseover&&document.body.removeEventListener("mouseover",this._onBodyMouseover),this.popper&&this.popper.hide()}toggleShow(){this.popper&&!this.disabled&&(this.popper.show(),this.isPopoverVisible=!0,document.body.addEventListener("mouseover",this._onBodyMouseover))}handleMouseoverEvent(e){this.isPopoverVisible&&!e.composedPath().includes(this)&&this.toggleHide()}updated(e){e.has("boundary")&&this.popper&&(this.popper.boundaryElement=this.popper.setBoundary(this.boundary))}render(){return i`
|
|
5
5
|
<div
|
|
6
6
|
id="popover"
|
|
7
7
|
class="popover util_insetLg body-default"
|
|
8
8
|
part="popover"
|
|
9
|
-
aria-hidden="${
|
|
9
|
+
aria-hidden="${this.isPopoverVisible?"false":"true"}">
|
|
10
10
|
<div id="arrow" class="arrow" data-popper-arrow></div>
|
|
11
11
|
<slot></slot>
|
|
12
12
|
</div>
|
package/dist/index.d.ts
CHANGED
|
@@ -77,6 +77,14 @@ export type AuroPopoverProps = {
|
|
|
77
77
|
addSpace?: AuroPopover["addSpace"];
|
|
78
78
|
/** The element to use as the boundary for the popover. Can be a query selector or an HTML element. */
|
|
79
79
|
boundary?: AuroPopover["boundary"];
|
|
80
|
+
/** Whether the popover is currently visible. Reflected as the `data-show`
|
|
81
|
+
attribute so host-level CSS selectors (e.g. `:host([data-show])`) work.
|
|
82
|
+
Also drives `aria-hidden` on the popover div in the template. */
|
|
83
|
+
"data-show"?: AuroPopover["isPopoverVisible"];
|
|
84
|
+
/** Whether the popover is currently visible. Reflected as the `data-show`
|
|
85
|
+
attribute so host-level CSS selectors (e.g. `:host([data-show])`) work.
|
|
86
|
+
Also drives `aria-hidden` on the popover div in the template. */
|
|
87
|
+
isPopoverVisible?: AuroPopover["isPopoverVisible"];
|
|
80
88
|
/** Disables the popover from showing on hover and focus. */
|
|
81
89
|
disabled?: AuroPopover["disabled"];
|
|
82
90
|
/** Directly associates the popover with a trigger element with the given ID. In most cases, this should not be necessary and set `slot="trigger"` on the element instead. */
|
|
@@ -112,6 +120,14 @@ export type AuroPopoverSolidJsProps = {
|
|
|
112
120
|
"prop:addSpace"?: AuroPopover["addSpace"];
|
|
113
121
|
/** The element to use as the boundary for the popover. Can be a query selector or an HTML element. */
|
|
114
122
|
"prop:boundary"?: AuroPopover["boundary"];
|
|
123
|
+
/** Whether the popover is currently visible. Reflected as the `data-show`
|
|
124
|
+
attribute so host-level CSS selectors (e.g. `:host([data-show])`) work.
|
|
125
|
+
Also drives `aria-hidden` on the popover div in the template. */
|
|
126
|
+
"bool:data-show"?: AuroPopover["isPopoverVisible"];
|
|
127
|
+
/** Whether the popover is currently visible. Reflected as the `data-show`
|
|
128
|
+
attribute so host-level CSS selectors (e.g. `:host([data-show])`) work.
|
|
129
|
+
Also drives `aria-hidden` on the popover div in the template. */
|
|
130
|
+
"prop:isPopoverVisible"?: AuroPopover["isPopoverVisible"];
|
|
115
131
|
/** Disables the popover from showing on hover and focus. */
|
|
116
132
|
"prop:disabled"?: AuroPopover["disabled"];
|
|
117
133
|
/** Directly associates the popover with a trigger element with the given ID. In most cases, this should not be necessary and set `slot="trigger"` on the element instead. */
|
|
@@ -157,6 +173,9 @@ export type CustomElements = {
|
|
|
157
173
|
*
|
|
158
174
|
* - `addSpace`: Adds additional top and bottom space around the appearance of the popover in relation to the trigger.
|
|
159
175
|
* - `boundary`: The element to use as the boundary for the popover. Can be a query selector or an HTML element.
|
|
176
|
+
* - `data-show`/`isPopoverVisible`: Whether the popover is currently visible. Reflected as the `data-show`
|
|
177
|
+
* attribute so host-level CSS selectors (e.g. `:host([data-show])`) work.
|
|
178
|
+
* Also drives `aria-hidden` on the popover div in the template.
|
|
160
179
|
* - `disabled`: Disables the popover from showing on hover and focus.
|
|
161
180
|
* - `for`: Directly associates the popover with a trigger element with the given ID. In most cases, this should not be necessary and set `slot="trigger"` on the element instead.
|
|
162
181
|
* - `placement`: Position for popover in relation to the element {'top' | 'bottom'}.
|
|
@@ -200,6 +219,9 @@ export type CustomElementsSolidJs = {
|
|
|
200
219
|
*
|
|
201
220
|
* - `addSpace`: Adds additional top and bottom space around the appearance of the popover in relation to the trigger.
|
|
202
221
|
* - `boundary`: The element to use as the boundary for the popover. Can be a query selector or an HTML element.
|
|
222
|
+
* - `data-show`/`isPopoverVisible`: Whether the popover is currently visible. Reflected as the `data-show`
|
|
223
|
+
* attribute so host-level CSS selectors (e.g. `:host([data-show])`) work.
|
|
224
|
+
* Also drives `aria-hidden` on the popover div in the template.
|
|
203
225
|
* - `disabled`: Disables the popover from showing on hover and focus.
|
|
204
226
|
* - `for`: Directly associates the popover with a trigger element with the given ID. In most cases, this should not be necessary and set `slot="trigger"` on the element instead.
|
|
205
227
|
* - `placement`: Position for popover in relation to the element {'top' | 'bottom'}.
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AuroPopover}from"./auro-popover-
|
|
1
|
+
export{A as AuroPopover}from"./auro-popover-DAgmqt_R.js";import"lit";
|
package/dist/registered.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{A as r}from"./auro-popover-
|
|
1
|
+
import{A as r}from"./auro-popover-DAgmqt_R.js";import"lit";r.register();
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem-dev/auro-popover",
|
|
10
|
-
"version": "0.0.0-pr127.
|
|
10
|
+
"version": "0.0.0-pr127.7",
|
|
11
11
|
"description": "auro-popover HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|