@aurodesignsystem-dev/auro-popover 0.0.0-pr125.8 → 0.0.0-pr126.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/demo/api.html +0 -1
- package/demo/api.md +1 -50
- package/demo/auro-popover.min.js +52 -205
- package/dist/{auro-popover-geTVO938.js → auro-popover-BIsWI8m_.js} +6 -6
- package/dist/index.d.ts +2 -32
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +1 -1
package/demo/api.html
CHANGED
|
@@ -54,7 +54,6 @@
|
|
|
54
54
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@latest/+esm" type="module"></script>
|
|
55
55
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
|
|
56
56
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
|
|
57
|
-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
|
|
58
57
|
|
|
59
58
|
<script type="module" data-demo-script="true">
|
|
60
59
|
import { initExamples } from "./api.min.js"
|
package/demo/api.md
CHANGED
|
@@ -13,7 +13,7 @@ The `auro-popover` element attaches to another element and displays on hover.
|
|
|
13
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
14
|
| disabled | disabled | | boolean | | Disables the popover from showing on hover and focus. |
|
|
15
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
|
|
16
|
+
| placement | placement | | string | `top` | Position for popover in relation to the element. |
|
|
17
17
|
| removeSpace | removeSpace | | boolean | | Removes top and bottom space around the appearance of the popover in relation to the trigger. |
|
|
18
18
|
|
|
19
19
|
### Methods
|
|
@@ -55,55 +55,6 @@ The `auro-popover` element attaches to another element and displays on hover.
|
|
|
55
55
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
56
56
|
</auro-accordion>
|
|
57
57
|
|
|
58
|
-
## Apply popover to any type of content
|
|
59
|
-
|
|
60
|
-
The trigger can be any element, not just buttons or links. The component automatically makes any non-focusable trigger keyboard accessible — including custom elements like `auro-icon` that have no internal focusable element. For icon-based triggers without visible text, `aria-label` is still required to provide an accessible name.
|
|
61
|
-
|
|
62
|
-
> **Accessibility note:** `auro-popover` manages `aria-description` on the trigger element as part of its accessibility contract — the popover content becomes the trigger's accessible description so screen readers can announce it on focus. Any existing `aria-description` on the trigger will be replaced when the component connects and removed when it disconnects.
|
|
63
|
-
|
|
64
|
-
<div class="exampleWrapper">
|
|
65
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/non-interactive-triggers.html) -->
|
|
66
|
-
<!-- The below content is automatically added from ./../apiExamples/non-interactive-triggers.html -->
|
|
67
|
-
<!-- auro-icon has no internal focusable element, so the component automatically
|
|
68
|
-
adds tabindex. aria-label is still required to provide an accessible name. -->
|
|
69
|
-
<auro-popover>
|
|
70
|
-
This flight offers priority boarding.
|
|
71
|
-
<auro-icon slot="trigger" category="interface" name="info-stroke" aria-label="More information"></auro-icon>
|
|
72
|
-
</auro-popover>
|
|
73
|
-
<br><br>
|
|
74
|
-
<!-- Native elements like <abbr> are automatically made keyboard accessible by the component -->
|
|
75
|
-
<p>Congratulations, you just achieved
|
|
76
|
-
<auro-popover>
|
|
77
|
-
Most Valuable Passenger — Alaska Airlines' mid-tier elite status level.
|
|
78
|
-
<abbr slot="trigger" style="color: orangered">MVP</abbr>
|
|
79
|
-
</auro-popover> status!
|
|
80
|
-
</p>
|
|
81
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
82
|
-
</div>
|
|
83
|
-
<auro-accordion alignRight>
|
|
84
|
-
<span slot="trigger">See code</span>
|
|
85
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/non-interactive-triggers.html) -->
|
|
86
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/non-interactive-triggers.html -->
|
|
87
|
-
|
|
88
|
-
```html
|
|
89
|
-
<!-- auro-icon has no internal focusable element, so the component automatically
|
|
90
|
-
adds tabindex. aria-label is still required to provide an accessible name. -->
|
|
91
|
-
<auro-popover>
|
|
92
|
-
This flight offers priority boarding.
|
|
93
|
-
<auro-icon slot="trigger" category="interface" name="info-stroke" aria-label="More information"></auro-icon>
|
|
94
|
-
</auro-popover>
|
|
95
|
-
<br><br>
|
|
96
|
-
<!-- Native elements like <abbr> are automatically made keyboard accessible by the component -->
|
|
97
|
-
<p>Congratulations, you just achieved
|
|
98
|
-
<auro-popover>
|
|
99
|
-
Most Valuable Passenger — Alaska Airlines' mid-tier elite status level.
|
|
100
|
-
<abbr slot="trigger" style="color: orangered">MVP</abbr>
|
|
101
|
-
</auro-popover> status!
|
|
102
|
-
</p>
|
|
103
|
-
```
|
|
104
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
105
|
-
</auro-accordion>
|
|
106
|
-
|
|
107
58
|
## Property & Attribute Examples
|
|
108
59
|
|
|
109
60
|
### Add Space Around Popover
|
package/demo/auro-popover.min.js
CHANGED
|
@@ -1986,18 +1986,6 @@ class AuroPopover extends i {
|
|
|
1986
1986
|
super();
|
|
1987
1987
|
|
|
1988
1988
|
this.placement = "top";
|
|
1989
|
-
|
|
1990
|
-
// Stable event-listener references used across the component lifecycle.
|
|
1991
|
-
this._onTouchStart = null;
|
|
1992
|
-
this._onTriggerMouseEnter = null;
|
|
1993
|
-
this._onTriggerMouseLeave = null;
|
|
1994
|
-
this._onTriggerFocus = null;
|
|
1995
|
-
this._onTriggerBlur = null;
|
|
1996
|
-
this._onTriggerKeydown = null;
|
|
1997
|
-
this._onHidePopover = null;
|
|
1998
|
-
this._onBodyMouseover = null;
|
|
1999
|
-
this._onSlotChange = null;
|
|
2000
|
-
this._addedTabIndex = false;
|
|
2001
1989
|
}
|
|
2002
1990
|
|
|
2003
1991
|
/**
|
|
@@ -2006,56 +1994,58 @@ class AuroPopover extends i {
|
|
|
2006
1994
|
* @returns {void}
|
|
2007
1995
|
*/
|
|
2008
1996
|
_initializeDefaults() {
|
|
1997
|
+
// this.placement = "top";
|
|
2009
1998
|
this.isPopoverVisible = false;
|
|
1999
|
+
this.id = `popover-${(Math.random() + 1).toString(36).substring(7)}`;
|
|
2010
2000
|
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
2011
2001
|
}
|
|
2012
2002
|
|
|
2013
2003
|
// function to define props used within the scope of this component
|
|
2014
2004
|
static get properties() {
|
|
2015
2005
|
return {
|
|
2016
|
-
/**
|
|
2006
|
+
/**
|
|
2017
2007
|
* Adds additional top and bottom space around the appearance of the popover in relation to the trigger.
|
|
2018
2008
|
*/
|
|
2019
|
-
addSpace: {
|
|
2020
|
-
type: Boolean,
|
|
2021
|
-
reflect: true
|
|
2009
|
+
addSpace: {
|
|
2010
|
+
type: Boolean,
|
|
2011
|
+
reflect: true
|
|
2022
2012
|
},
|
|
2023
2013
|
|
|
2024
|
-
/**
|
|
2014
|
+
/**
|
|
2025
2015
|
* The element to use as the boundary for the popover. Can be a query selector or an HTML element.
|
|
2026
2016
|
* @type {string | object}
|
|
2027
2017
|
*/
|
|
2028
2018
|
boundary: { type: String },
|
|
2029
2019
|
|
|
2030
|
-
/**
|
|
2020
|
+
/**
|
|
2031
2021
|
* Disables the popover from showing on hover and focus.
|
|
2032
2022
|
*/
|
|
2033
|
-
disabled: {
|
|
2023
|
+
disabled: {
|
|
2034
2024
|
type: Boolean,
|
|
2035
2025
|
reflect: true
|
|
2036
2026
|
},
|
|
2037
2027
|
|
|
2038
|
-
/**
|
|
2028
|
+
/**
|
|
2039
2029
|
* 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.
|
|
2040
2030
|
*/
|
|
2041
|
-
for: {
|
|
2031
|
+
for: {
|
|
2042
2032
|
type: String,
|
|
2043
2033
|
reflect: true
|
|
2044
2034
|
},
|
|
2045
2035
|
|
|
2046
2036
|
/**
|
|
2047
|
-
* Position for popover in relation to the element
|
|
2037
|
+
* Position for popover in relation to the element.
|
|
2048
2038
|
* @type {'top' | 'bottom'}
|
|
2049
2039
|
* @default 'top'
|
|
2050
2040
|
*/
|
|
2051
2041
|
placement: { type: String},
|
|
2052
2042
|
|
|
2053
|
-
/**
|
|
2043
|
+
/**
|
|
2054
2044
|
* Removes top and bottom space around the appearance of the popover in relation to the trigger.
|
|
2055
2045
|
*/
|
|
2056
|
-
removeSpace: {
|
|
2057
|
-
type: Boolean,
|
|
2058
|
-
reflect: true
|
|
2046
|
+
removeSpace: {
|
|
2047
|
+
type: Boolean,
|
|
2048
|
+
reflect: true
|
|
2059
2049
|
},
|
|
2060
2050
|
};
|
|
2061
2051
|
}
|
|
@@ -2082,78 +2072,18 @@ class AuroPopover extends i {
|
|
|
2082
2072
|
this._initializeDefaults();
|
|
2083
2073
|
|
|
2084
2074
|
// adds toggle function to root element based on touch
|
|
2085
|
-
|
|
2086
|
-
this.
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
}
|
|
2090
|
-
this.addEventListener("touchstart", this._onTouchStart);
|
|
2075
|
+
this.addEventListener("touchstart", function () {
|
|
2076
|
+
this.toggle();
|
|
2077
|
+
this.setAttribute("isTouch", "true");
|
|
2078
|
+
});
|
|
2091
2079
|
}
|
|
2092
2080
|
|
|
2093
2081
|
disconnectedCallback() {
|
|
2094
|
-
// NOTE: Teardown is one-way. This component does not currently support
|
|
2095
|
-
// reinitialization after being removed from the DOM.
|
|
2096
|
-
|
|
2097
2082
|
super.disconnectedCallback();
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
if (this.trigger) {
|
|
2101
|
-
// Remove listeners attached to the trigger element.
|
|
2102
|
-
if (this._onTriggerMouseEnter) {
|
|
2103
|
-
this._eventTarget.removeEventListener("mouseenter", this._onTriggerMouseEnter);
|
|
2104
|
-
}
|
|
2105
|
-
if (this._onTriggerMouseLeave) {
|
|
2106
|
-
this._eventTarget.removeEventListener("mouseleave", this._onTriggerMouseLeave);
|
|
2107
|
-
}
|
|
2108
|
-
if (this._onTriggerFocus) {
|
|
2109
|
-
this.trigger.removeEventListener("focus", this._onTriggerFocus);
|
|
2110
|
-
}
|
|
2111
|
-
if (this._onTriggerBlur) {
|
|
2112
|
-
this.trigger.removeEventListener("blur", this._onTriggerBlur);
|
|
2113
|
-
}
|
|
2114
|
-
if (this._onTriggerKeydown) {
|
|
2115
|
-
this.trigger.removeEventListener("keydown", this._onTriggerKeydown);
|
|
2116
|
-
}
|
|
2117
|
-
|
|
2118
|
-
// Clean up aria-description and its sync listener set in firstUpdated.
|
|
2119
|
-
// Prevents stale descriptions if the trigger is reused after disconnect.
|
|
2120
|
-
if (this._onSlotChange) {
|
|
2121
|
-
this.shadowRoot?.querySelector("slot:not([name])")?.removeEventListener("slotchange", this._onSlotChange);
|
|
2122
|
-
}
|
|
2123
|
-
this.trigger.removeAttribute("aria-description");
|
|
2124
|
-
|
|
2125
|
-
// Remove tabindex only if the component added it and the current value
|
|
2126
|
-
// still matches the value managed by the component. This avoids removing
|
|
2127
|
-
// an author-updated tabindex that was set after connection.
|
|
2128
|
-
if (this._addedTabIndex && this.trigger.getAttribute("tabindex") === "0") {
|
|
2129
|
-
this.trigger.removeAttribute("tabindex");
|
|
2130
|
-
}
|
|
2131
|
-
}
|
|
2132
|
-
|
|
2133
|
-
if (this._onHidePopover) {
|
|
2134
|
-
this.removeEventListener("hidePopover", this._onHidePopover);
|
|
2135
|
-
}
|
|
2136
|
-
|
|
2137
|
-
// Remove the global mouseover handler if the popover was visible when disconnected.
|
|
2138
|
-
if (this._onBodyMouseover) {
|
|
2139
|
-
document.body.removeEventListener("mouseover", this._onBodyMouseover);
|
|
2140
|
-
}
|
|
2141
|
-
|
|
2142
|
-
// Destroy the Popper.js instance to release its internal references.
|
|
2143
|
-
if (this.popper?.popper && typeof this.popper.popper.destroy === "function") {
|
|
2144
|
-
this.popper.popper.destroy();
|
|
2145
|
-
this.popper.popper = null;
|
|
2146
|
-
}
|
|
2083
|
+
document.removeEventListener("click", this.documentClickHandler);
|
|
2147
2084
|
}
|
|
2148
2085
|
|
|
2149
2086
|
firstUpdated() {
|
|
2150
|
-
/**
|
|
2151
|
-
* NOTE: This component is not currently designed for reinitialization.
|
|
2152
|
-
* All setup in firstUpdated() is assumed to run once per instance lifecycle.
|
|
2153
|
-
* If the element is removed and later reattached, event bindings,
|
|
2154
|
-
* Popper setup, and accessibility wiring will NOT be restored automatically.
|
|
2155
|
-
*/
|
|
2156
|
-
|
|
2157
2087
|
// Add the tag name as an attribute if it is different than the component name
|
|
2158
2088
|
this.runtimeUtils.handleComponentTagRename(this, "auro-popover");
|
|
2159
2089
|
|
|
@@ -2169,74 +2099,6 @@ class AuroPopover extends i {
|
|
|
2169
2099
|
.assignedElements();
|
|
2170
2100
|
}
|
|
2171
2101
|
|
|
2172
|
-
// Guard: if neither the for attribute nor the trigger slot resolved an element,
|
|
2173
|
-
// there is nothing to attach to — exit cleanly rather than throwing on property access.
|
|
2174
|
-
if (!this.trigger) {
|
|
2175
|
-
return;
|
|
2176
|
-
}
|
|
2177
|
-
|
|
2178
|
-
// If the trigger is not keyboard accessible, make it focusable automatically.
|
|
2179
|
-
// This covers native elements (e.g. <abbr>, <span>) and custom elements whose
|
|
2180
|
-
// shadow DOM contains no focusable descendant (e.g. auro-icon).
|
|
2181
|
-
//
|
|
2182
|
-
// We skip elements that are already accessible via the tab order:
|
|
2183
|
-
// - Natively focusable elements (tabIndex >= 0): <button>, <a href>, <input>, etc.
|
|
2184
|
-
// - Custom elements whose shadow DOM contains a focusable descendant (e.g. auro-button
|
|
2185
|
-
// has an inner <button>) — adding tabindex to the host would create a double tab stop.
|
|
2186
|
-
// - Elements where the author has explicitly set tabindex — their intent is respected.
|
|
2187
|
-
//
|
|
2188
|
-
// Known limitation: custom elements with a closed shadow root (mode: 'closed') cannot
|
|
2189
|
-
// be inspected — shadowRoot returns null. If such an element has an internal focusable
|
|
2190
|
-
// descendant and a host tabIndex of -1, tabindex="0" will be added, potentially
|
|
2191
|
-
// creating a double tab stop. Elements using delegatesFocus avoid this because the
|
|
2192
|
-
// browser reflects a non-negative tabIndex on the host.
|
|
2193
|
-
const isNativelyFocusable = this.trigger.tabIndex >= 0;
|
|
2194
|
-
const hasInternalFocus = this.trigger.shadowRoot
|
|
2195
|
-
? Boolean(this.trigger.shadowRoot.querySelector(
|
|
2196
|
-
'button, a[href], input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])'
|
|
2197
|
-
))
|
|
2198
|
-
: false;
|
|
2199
|
-
|
|
2200
|
-
if (!isNativelyFocusable && !hasInternalFocus && !this.trigger.hasAttribute("tabindex")) {
|
|
2201
|
-
this.trigger.setAttribute("tabindex", "0");
|
|
2202
|
-
this._addedTabIndex = true;
|
|
2203
|
-
}
|
|
2204
|
-
|
|
2205
|
-
// Announce popover content to screen readers via aria-description (ARIA 1.3).
|
|
2206
|
-
//
|
|
2207
|
-
// Why not aria-describedby?
|
|
2208
|
-
// The trigger (e.g. auro-button) is in light DOM; the popover content lives
|
|
2209
|
-
// inside auro-popover's shadow DOM. aria-describedby ID lookup is scoped to
|
|
2210
|
-
// the same shadow root, so cross-shadow references silently fail.
|
|
2211
|
-
//
|
|
2212
|
-
// Why not aria-live?
|
|
2213
|
-
// The popover is hidden with display:none, which removes it from the
|
|
2214
|
-
// accessibility tree entirely — aria-live never fires. Persistent live regions
|
|
2215
|
-
// in document.body hit VoiceOver's content deduplication: identical text
|
|
2216
|
-
// announced to the same region is suppressed on repeat visits.
|
|
2217
|
-
//
|
|
2218
|
-
// aria-description embeds the string directly on the trigger element with no
|
|
2219
|
-
// ID lookup. VoiceOver recomputes it fresh on every focus event, so content
|
|
2220
|
-
// is announced consistently regardless of prior visits.
|
|
2221
|
-
//
|
|
2222
|
-
// NOTE: aria-description is defined in the ARIA 1.3 spec. It is well-supported
|
|
2223
|
-
// in modern browsers and screen readers (Chrome 92+, Firefox 92+, Safari 15.4+)
|
|
2224
|
-
// but may be unfamiliar — do not replace with aria-describedby.
|
|
2225
|
-
const slot = this.shadowRoot.querySelector("slot:not([name])");
|
|
2226
|
-
const getSlotText = () => slot.assignedNodes({ flatten: true })
|
|
2227
|
-
.map((n) => n.textContent ?? "")
|
|
2228
|
-
.join(" ")
|
|
2229
|
-
.replace(/\s+/g, " ")
|
|
2230
|
-
.trim();
|
|
2231
|
-
|
|
2232
|
-
this.trigger.setAttribute("aria-description", getSlotText());
|
|
2233
|
-
|
|
2234
|
-
// Keep aria-description in sync if slot content changes after first render.
|
|
2235
|
-
this._onSlotChange = () => {
|
|
2236
|
-
this.trigger?.setAttribute("aria-description", getSlotText());
|
|
2237
|
-
};
|
|
2238
|
-
slot.addEventListener("slotchange", this._onSlotChange);
|
|
2239
|
-
|
|
2240
2102
|
this.auroPopover = this.shadowRoot.querySelector("#popover");
|
|
2241
2103
|
this.popper = new Popover(
|
|
2242
2104
|
this.trigger,
|
|
@@ -2245,12 +2107,13 @@ class AuroPopover extends i {
|
|
|
2245
2107
|
this.boundary,
|
|
2246
2108
|
);
|
|
2247
2109
|
|
|
2248
|
-
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2110
|
+
const handleShow = () => {
|
|
2111
|
+
this.toggleShow();
|
|
2112
|
+
};
|
|
2113
|
+
const handleHide = () => {
|
|
2114
|
+
this.toggleHide();
|
|
2115
|
+
};
|
|
2116
|
+
const handleKeyboardWhenFocusOnTrigger = (event) => {
|
|
2254
2117
|
const key = event.key.toLowerCase();
|
|
2255
2118
|
|
|
2256
2119
|
if (this.isPopoverVisible) {
|
|
@@ -2260,35 +2123,26 @@ class AuroPopover extends i {
|
|
|
2260
2123
|
}
|
|
2261
2124
|
|
|
2262
2125
|
if (key === " " || key === "enter") {
|
|
2263
|
-
// Prevent page scroll for Space only on non-native triggers.
|
|
2264
|
-
// Native elements (button, a) handle their own Space/Enter semantics.
|
|
2265
|
-
if (key === " " && this._addedTabIndex) {
|
|
2266
|
-
event.preventDefault();
|
|
2267
|
-
}
|
|
2268
2126
|
this.toggle();
|
|
2269
2127
|
}
|
|
2270
2128
|
};
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
// mouseenter/mouseleave attach to the host when the trigger is a direct
|
|
2274
|
-
// child of auro-popover (slotted), otherwise they attach to the trigger itself.
|
|
2275
|
-
this._eventTarget =
|
|
2276
|
-
this.trigger.parentElement.localName === this.localName
|
|
2129
|
+
const element =
|
|
2130
|
+
this.trigger.parentElement.nodeName === "AURO-POPOVER"
|
|
2277
2131
|
? this
|
|
2278
2132
|
: this.trigger;
|
|
2279
2133
|
|
|
2280
|
-
|
|
2281
|
-
|
|
2134
|
+
element.addEventListener("mouseenter", handleShow);
|
|
2135
|
+
element.addEventListener("mouseleave", handleHide);
|
|
2282
2136
|
|
|
2283
2137
|
// if user tabs off of trigger, then hide the popover.
|
|
2284
|
-
this.trigger.addEventListener("keydown",
|
|
2138
|
+
this.trigger.addEventListener("keydown", handleKeyboardWhenFocusOnTrigger);
|
|
2285
2139
|
|
|
2286
2140
|
// handle gain/loss of focus
|
|
2287
|
-
this.trigger.addEventListener("focus",
|
|
2288
|
-
this.trigger.addEventListener("blur",
|
|
2141
|
+
this.trigger.addEventListener("focus", handleShow);
|
|
2142
|
+
this.trigger.addEventListener("blur", handleHide);
|
|
2289
2143
|
|
|
2290
2144
|
// e.g. for a closePopover button in the popover
|
|
2291
|
-
this.addEventListener("hidePopover",
|
|
2145
|
+
this.addEventListener("hidePopover", handleHide);
|
|
2292
2146
|
}
|
|
2293
2147
|
|
|
2294
2148
|
/**
|
|
@@ -2297,9 +2151,6 @@ class AuroPopover extends i {
|
|
|
2297
2151
|
* @returns {void} Fires an update lifecycle.
|
|
2298
2152
|
*/
|
|
2299
2153
|
toggle() {
|
|
2300
|
-
if (!this.popper) {
|
|
2301
|
-
return;
|
|
2302
|
-
}
|
|
2303
2154
|
if (this.isPopoverVisible) {
|
|
2304
2155
|
this.toggleHide();
|
|
2305
2156
|
} else {
|
|
@@ -2313,15 +2164,13 @@ class AuroPopover extends i {
|
|
|
2313
2164
|
* @returns {void} Fires an update lifecycle.
|
|
2314
2165
|
*/
|
|
2315
2166
|
toggleHide() {
|
|
2167
|
+
this.popper.hide();
|
|
2316
2168
|
this.isPopoverVisible = false;
|
|
2317
2169
|
this.removeAttribute("data-show");
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
|
|
2321
|
-
|
|
2322
|
-
return;
|
|
2323
|
-
}
|
|
2324
|
-
this.popper.hide();
|
|
2170
|
+
|
|
2171
|
+
document
|
|
2172
|
+
.querySelector("body")
|
|
2173
|
+
.removeEventListener("mouseover", this.mouseoverHandler);
|
|
2325
2174
|
}
|
|
2326
2175
|
|
|
2327
2176
|
/**
|
|
@@ -2330,14 +2179,15 @@ class AuroPopover extends i {
|
|
|
2330
2179
|
* @returns {void} Fires an update lifecycle.
|
|
2331
2180
|
*/
|
|
2332
2181
|
toggleShow() {
|
|
2333
|
-
if (!this.popper) {
|
|
2334
|
-
return;
|
|
2335
|
-
}
|
|
2336
2182
|
this.popper.show();
|
|
2337
2183
|
this.isPopoverVisible = true;
|
|
2338
|
-
this.setAttribute("data-show",
|
|
2184
|
+
this.setAttribute("data-show", true);
|
|
2185
|
+
|
|
2186
|
+
this.mouseoverHandler = (evt) => this.handleMouseoverEvent(evt);
|
|
2339
2187
|
|
|
2340
|
-
document
|
|
2188
|
+
document
|
|
2189
|
+
.querySelector("body")
|
|
2190
|
+
.addEventListener("mouseover", this.mouseoverHandler);
|
|
2341
2191
|
}
|
|
2342
2192
|
|
|
2343
2193
|
/**
|
|
@@ -2353,23 +2203,20 @@ class AuroPopover extends i {
|
|
|
2353
2203
|
}
|
|
2354
2204
|
|
|
2355
2205
|
updated(changedProperties) {
|
|
2356
|
-
if (changedProperties.has("boundary")
|
|
2357
|
-
|
|
2358
|
-
// strings to Elements. Assigning a raw string would break Popper's
|
|
2359
|
-
// preventOverflow modifier, which expects an Element.
|
|
2360
|
-
this.popper.boundaryElement = this.popper.setBoundary(this.boundary);
|
|
2206
|
+
if (changedProperties.has("boundary")) {
|
|
2207
|
+
this.popper.boundaryElement = this.boundary;
|
|
2361
2208
|
}
|
|
2362
2209
|
}
|
|
2363
2210
|
|
|
2364
2211
|
// function that renders the HTML and CSS into the scope of the component
|
|
2365
2212
|
render() {
|
|
2366
2213
|
return x`
|
|
2367
|
-
<div id="popover" class="popover util_insetLg body-default" part="popover">
|
|
2214
|
+
<div id="popover" class="popover util_insetLg body-default" aria-live="polite" part="popover">
|
|
2368
2215
|
<div id="arrow" class="arrow" data-popper-arrow></div>
|
|
2369
|
-
<span role="tooltip"><slot></slot></span>
|
|
2216
|
+
<span role="tooltip" aria-labelledby="${this.id}"><slot></slot></span>
|
|
2370
2217
|
</div>
|
|
2371
2218
|
|
|
2372
|
-
<span>
|
|
2219
|
+
<span id="${this.id}">
|
|
2373
2220
|
<slot name="trigger" data-trigger-placement="${this.placement}"></slot>
|
|
2374
2221
|
</span>
|
|
2375
2222
|
`;
|
|
@@ -1,13 +1,13 @@
|
|
|
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",m=c.reduce(function(e,t){return e.concat([t+"-"+p,t+"-"+d])},[]),u=[].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 O=Math.max,k=Math.min,A=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 E(){return!/^((?!chrome|android).)*safari/i.test(z())}function M(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&&A(s.width)/e.offsetWidth||1,o=e.offsetHeight>0&&A(s.height)/e.offsetHeight||1);var n=(w(e)?y(e):window).visualViewport,a=!E()&&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 T(e){var t=M(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 H(e){return["table","td","th"].indexOf(v(e))>=0}function C(e){return((w(e)?e.ownerDocument:e.document)||window.document).documentElement}function R(e){return"html"===v(e)?e:e.assignedSlot||e.parentNode||(x(e)?e.host:null)||C(e)}function j(e){return b(e)&&"fixed"!==L(e).position?e.offsetParent:null}function N(e){for(var t=y(e),i=j(e);i&&H(i)&&"static"===L(i).position;)i=j(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=R(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 P(e){return["top","bottom"].indexOf(e)>=0?"x":"y"}function D(e,t,i){return O(e,k(t,i))}function I(e){return Object.assign({},{top:0,right:0,bottom:0,left:0},e)}function F(e,t){return t.reduce(function(t,i){return t[i]=e,t},{})}var U={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=P(f),m=[a,n].indexOf(f)>=0?"height":"width";if(p&&d){var u=function(e,t){return I("number"!=typeof(e="function"==typeof e?e(Object.assign({},t.rects,{placement:t.placement})):e)?e:F(e,c))}(l.padding,i),g=T(p),v="y"===h?r:a,y="y"===h?o:n,w=i.rects.reference[m]+i.rects.reference[h]-d[h]-i.rects.popper[m],b=d[h]-i.rects.reference[h],x=N(p),S=x?"y"===h?x.clientHeight||0:x.clientWidth||0:0,O=w/2-b/2,k=u[v],A=S-g[m]-u[y],z=S/2-g[m]/2+O,E=D(k,z,A),M=h;i.modifiersData[s]=((t={})[M]=E,t.centerOffset=E-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 q(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,p=e.offsets,f=e.position,h=e.gpuAcceleration,m=e.adaptive,u=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 u?u({x:w,y:x}):{x:w,y:x};w=S.x,x=S.y;var _=p.hasOwnProperty("x"),O=p.hasOwnProperty("y"),k=a,z=r,E=window;if(m){var M=N(i),T="clientHeight",B="clientWidth";if(M===y(i)&&"static"!==L(M=C(i)).position&&"absolute"===f&&(T="scrollHeight",B="scrollWidth"),l===r||(l===a||l===n)&&c===d)z=o,x-=(g&&M===E&&E.visualViewport?E.visualViewport.height:M[T])-s.height,x*=h?1:-1;if(l===a||(l===r||l===o)&&c===d)k=n,w-=(g&&M===E&&E.visualViewport?E.visualViewport.width:M[B])-s.width,w*=h?1:-1}var H,R=Object.assign({position:f},m&&W),j=!0===u?function(e,t){var i=e.x,s=e.y,r=t.devicePixelRatio||1;return{x:A(i*r)/r||0,y:A(s*r)/r||0}}({x:w,y:x},y(i)):{x:w,y:x};return w=j.x,x=j.y,h?Object.assign({},R,((H={})[z]=O?"0":"",H[k]=_?"0":"",H.transform=(E.devicePixelRatio||1)<=1?"translate("+w+"px, "+x+"px)":"translate3d("+w+"px, "+x+"px, 0)",H)):Object.assign({},R,((t={})[z]=O?x+"px":"",t[k]=_?w+"px":"",t.transform="",t))}var V={passive:!0};var G={left:"right",right:"left",bottom:"top",top:"bottom"};function $(e){return e.replace(/left|right|bottom|top/g,function(e){return G[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 M(C(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(R(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(R(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=C(e),r=i.visualViewport,o=s.clientWidth,n=s.clientHeight,a=0,l=0;if(r){o=r.width,n=r.height;var c=E();(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=M(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=C(e),s=J(e),r=null==(t=e.ownerDocument)?void 0:t.body,o=O(i.scrollWidth,i.clientWidth,r?r.scrollWidth:0,r?r.clientWidth:0),n=O(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+=O(i.clientWidth,r?r.clientWidth:0)-o),{width:o,height:n,x:a,y:l}}(C(e)))}function re(e,t,i,s){var r="clippingParents"===t?function(e){var t=te(R(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=O(r.top,t.top),t.right=k(r.right,t.right),t.bottom=k(r.bottom,t.bottom),t.left=O(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?q(l):null,h=i.x+i.width/2-s.width/2,m=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:m};break;case a:t={x:i.x-s.width,y:m};break;default:t={x:i.x,y:i.y}}var u=c?P(c):null;if(null!=u){var g="y"===u?"height":"width";switch(f){case p:t[u]=t[u]-(i[g]/2-s[g]/2);break;case d:t[u]=t[u]+(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,m=void 0===d?"clippingParents":d,u=i.rootBoundary,g=void 0===u?f:u,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,O=I("number"!=typeof _?_:F(_,c)),k=y===h?"reference":h,A=e.rects.popper,z=e.elements[x?k:y],E=re(w(z)?z:z.contextElement||C(e.elements.popper),m,g,p),T=M(e.elements.reference),B=oe({reference:T,element:A,placement:a}),L=ie(Object.assign({},A,B)),H=y===h?L:T,R={top:E.top-H.top+O.top,bottom:H.bottom-E.bottom+O.bottom,left:E.left-H.left+O.left,right:H.right-E.right+O.right},j=e.modifiersData.offset;if(y===h&&j){var N=j[a];Object.keys(R).forEach(function(e){var t=[n,o].indexOf(e)>=0?1:-1,i=[r,o].indexOf(e)>=0?"y":"x";R[e]+=N[i]*t})}return R}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?u:l,d=q(s),f=d?a?m:m.filter(function(e){return q(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,m=i.fallbackPlacements,u=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,O=_(S),k=m||(O===S||!b?[$(S)]:function(e){if(_(e)===l)return[];var t=$(e);return[Y(e),t,Y(t)]}(S)),A=[S].concat(k).reduce(function(e,i){return e.concat(_(i)===l?ae(t,{placement:i,boundary:g,rootBoundary:v,padding:u,flipVariations:b,allowedAutoPlacements:x}):i)},[]),z=t.rects.reference,E=t.rects.popper,M=new Map,T=!0,B=A[0],L=0;L<A.length;L++){var H=A[L],C=_(H),R=q(H)===p,j=[r,o].indexOf(C)>=0,N=j?"width":"height",P=ne(t,{placement:H,boundary:g,rootBoundary:v,altBoundary:y,padding:u}),D=j?R?n:a:R?o:r;z[N]>E[N]&&(D=$(D));var I=$(D),F=[];if(d&&F.push(P[C]<=0),h&&F.push(P[D]<=0,P[I]<=0),F.every(function(e){return e})){B=H,T=!1;break}M.set(H,F)}if(T)for(var U=function(e){var t=A.find(function(t){var i=M.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"===U(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 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=u.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,m=i.rootBoundary,u=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:m,padding:g,altBoundary:u}),S=_(t.placement),A=q(t.placement),z=!A,E=P(S),M="x"===E?"y":"x",B=t.modifiersData.popperOffsets,L=t.rects.reference,H=t.rects.popper,C="function"==typeof b?b(Object.assign({},t.rects,{placement:t.placement})):b,R="number"==typeof C?{mainAxis:C,altAxis:C}:Object.assign({mainAxis:0,altAxis:0},C),j=t.modifiersData.offset?t.modifiersData.offset[t.placement]:null,I={x:0,y:0};if(B){if(c){var F,U="y"===E?r:a,W="y"===E?o:n,X="y"===E?"height":"width",V=B[E],G=V+x[U],$=V-x[W],K=y?-H[X]/2:0,Y=A===p?L[X]:H[X],J=A===p?-H[X]:-L[X],Q=t.elements.arrow,Z=y&&Q?T(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[U],ie=ee[W],se=D(0,L[X],Z[X]),re=z?L[X]/2-K-se-te-R.mainAxis:Y-se-te-R.mainAxis,oe=z?-L[X]/2+K+se+ie+R.mainAxis:J+se+ie+R.mainAxis,ae=t.elements.arrow&&N(t.elements.arrow),le=ae?"y"===E?ae.clientTop||0:ae.clientLeft||0:0,ce=null!=(F=null==j?void 0:j[E])?F:0,pe=V+oe-ce,de=D(y?k(G,V+re-ce-le):G,V,y?O($,pe):$);B[E]=de,I[E]=de-V}if(f){var fe,he="x"===E?r:a,me="x"===E?o:n,ue=B[M],ge="y"===M?"height":"width",ve=ue+x[he],ye=ue-x[me],we=-1!==[r,a].indexOf(S),be=null!=(fe=null==j?void 0:j[M])?fe:0,xe=we?ve:ue-L[ge]-H[ge]-be+R.altAxis,Se=we?ue+L[ge]+H[ge]-be-R.altAxis:ye,_e=y&&we?function(e,t,i){var s=D(e,t,i);return s>i?i:s}(xe,ue,Se):D(y?xe:ve,ue,y?Se:ye);B[M]=_e,I[M]=_e-ue}t.modifiersData[s]=I}},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=A(t.width)/e.offsetWidth||1,s=A(t.height)/e.offsetHeight||1;return 1!==i||1!==s}(t),a=C(t),l=M(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=M(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 me(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 ue={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?ue:r;return function(e,t,i){void 0===i&&(i=o);var r,n,a={placement:"bottom",orderedModifiers:[],options:Object.assign({},ue,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=me(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:T(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,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:q(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,de,le,fe,U,{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)}
|
|
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",a="bottom",n="right",o="left",l="auto",c=[r,a,n,o],p="start",d="end",f="viewport",m="popper",u=c.reduce(function(e,t){return e.concat([t+"-"+p,t+"-"+d])},[]),h=[].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]||{},a=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,a),Object.keys(r).forEach(function(e){s.removeAttribute(e)}))})}},requires:["computeStyles"]};function O(e){return e.split("-")[0]}var k=Math.max,z=Math.min,A=Math.round;function E(){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 H(){return!/^((?!chrome|android).)*safari/i.test(E())}function M(e,t,i){void 0===t&&(t=!1),void 0===i&&(i=!1);var s=e.getBoundingClientRect(),r=1,a=1;t&&b(e)&&(r=e.offsetWidth>0&&A(s.width)/e.offsetWidth||1,a=e.offsetHeight>0&&A(s.height)/e.offsetHeight||1);var n=(w(e)?y(e):window).visualViewport,o=!H()&&i,l=(s.left+(o&&n?n.offsetLeft:0))/r,c=(s.top+(o&&n?n.offsetTop:0))/a,p=s.width/r,d=s.height/a;return{width:p,height:d,top:c,right:l+p,bottom:c+d,left:l,x:l,y:c}}function B(e){var t=M(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 R(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 C(e){return y(e).getComputedStyle(e)}function L(e){return["table","td","th"].indexOf(v(e))>=0}function _(e){return((w(e)?e.ownerDocument:e.document)||window.document).documentElement}function j(e){return"html"===v(e)?e:e.assignedSlot||e.parentNode||(x(e)?e.host:null)||_(e)}function N(e){return b(e)&&"fixed"!==C(e).position?e.offsetParent:null}function D(e){for(var t=y(e),i=N(e);i&&L(i)&&"static"===C(i).position;)i=N(i);return i&&("html"===v(i)||"body"===v(i)&&"static"===C(i).position)?t:i||function(e){var t=/firefox/i.test(E());if(/Trident/i.test(E())&&b(e)&&"fixed"===C(e).position)return null;var i=j(e);for(x(i)&&(i=i.host);b(i)&&["html","body"].indexOf(v(i))<0;){var s=C(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 P(e){return["top","bottom"].indexOf(e)>=0?"x":"y"}function U(e,t,i){return k(e,z(t,i))}function I(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=O(i.placement),m=P(f),u=[o,n].indexOf(f)>=0?"height":"width";if(p&&d){var h=function(e,t){return I("number"!=typeof(e="function"==typeof e?e(Object.assign({},t.rects,{placement:t.placement})):e)?e:q(e,c))}(l.padding,i),g=B(p),v="y"===m?r:o,y="y"===m?a:n,w=i.rects.reference[u]+i.rects.reference[m]-d[m]-i.rects.popper[u],b=d[m]-i.rects.reference[m],x=D(p),S=x?"y"===m?x.clientHeight||0:x.clientWidth||0:0,k=w/2-b/2,z=h[v],A=S-g[u]-h[y],E=S/2-g[u]/2+k,H=U(z,E,A),M=m;i.modifiersData[s]=((t={})[M]=H,t.centerOffset=H-E,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)))&&R(t.elements.popper,s)&&(t.elements.arrow=s)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function T(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,p=e.offsets,f=e.position,m=e.gpuAcceleration,u=e.adaptive,h=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 h?h({x:w,y:x}):{x:w,y:x};w=S.x,x=S.y;var O=p.hasOwnProperty("x"),k=p.hasOwnProperty("y"),z=o,E=r,H=window;if(u){var M=D(i),B="clientHeight",R="clientWidth";if(M===y(i)&&"static"!==C(M=_(i)).position&&"absolute"===f&&(B="scrollHeight",R="scrollWidth"),l===r||(l===o||l===n)&&c===d)E=a,x-=(g&&M===H&&H.visualViewport?H.visualViewport.height:M[B])-s.height,x*=m?1:-1;if(l===o||(l===r||l===a)&&c===d)z=n,w-=(g&&M===H&&H.visualViewport?H.visualViewport.width:M[R])-s.width,w*=m?1:-1}var L,j=Object.assign({position:f},u&&W),N=!0===h?function(e,t){var i=e.x,s=e.y,r=t.devicePixelRatio||1;return{x:A(i*r)/r||0,y:A(s*r)/r||0}}({x:w,y:x},y(i)):{x:w,y:x};return w=N.x,x=N.y,m?Object.assign({},j,((L={})[E]=k?"0":"",L[z]=O?"0":"",L.transform=(H.devicePixelRatio||1)<=1?"translate("+w+"px, "+x+"px)":"translate3d("+w+"px, "+x+"px, 0)",L)):Object.assign({},j,((t={})[E]=k?x+"px":"",t[z]=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 Y={start:"end",end:"start"};function J(e){return e.replace(/start|end/g,function(e){return Y[e]})}function K(e){var t=y(e);return{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function Q(e){return M(_(e)).left+K(e).scrollLeft}function Z(e){var t=C(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(j(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),a=y(s),n=r?[a].concat(a.visualViewport||[],Z(s)?s:[]):s,o=t.concat(n);return r?o:o.concat(te(j(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=_(e),r=i.visualViewport,a=s.clientWidth,n=s.clientHeight,o=0,l=0;if(r){a=r.width,n=r.height;var c=H();(c||!c&&"fixed"===t)&&(o=r.offsetLeft,l=r.offsetTop)}return{width:a,height:n,x:o+Q(e),y:l}}(e,i)):w(t)?function(e,t){var i=M(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=_(e),s=K(e),r=null==(t=e.ownerDocument)?void 0:t.body,a=k(i.scrollWidth,i.clientWidth,r?r.scrollWidth:0,r?r.clientWidth:0),n=k(i.scrollHeight,i.clientHeight,r?r.scrollHeight:0,r?r.clientHeight:0),o=-s.scrollLeft+Q(e),l=-s.scrollTop;return"rtl"===C(r||i).direction&&(o+=k(i.clientWidth,r?r.clientWidth:0)-a),{width:a,height:n,x:o,y:l}}(_(e)))}function re(e,t,i,s){var r="clippingParents"===t?function(e){var t=te(j(e)),i=["absolute","fixed"].indexOf(C(e).position)>=0&&b(e)?D(e):e;return w(i)?t.filter(function(e){return w(e)&&R(e,i)&&"body"!==v(e)}):[]}(e):[].concat(t),a=[].concat(r,[i]),n=a[0],o=a.reduce(function(t,i){var r=se(e,i,s);return t.top=k(r.top,t.top),t.right=z(r.right,t.right),t.bottom=z(r.bottom,t.bottom),t.left=k(r.left,t.left),t},se(e,n,s));return o.width=o.right-o.left,o.height=o.bottom-o.top,o.x=o.left,o.y=o.top,o}function ae(e){var t,i=e.reference,s=e.element,l=e.placement,c=l?O(l):null,f=l?T(l):null,m=i.x+i.width/2-s.width/2,u=i.y+i.height/2-s.height/2;switch(c){case r:t={x:m,y:i.y-s.height};break;case a:t={x:m,y:i.y+i.height};break;case n:t={x:i.x+i.width,y:u};break;case o:t={x:i.x-s.width,y:u};break;default:t={x:i.x,y:i.y}}var h=c?P(c):null;if(null!=h){var g="y"===h?"height":"width";switch(f){case p:t[h]=t[h]-(i[g]/2-s[g]/2);break;case d:t[h]=t[h]+(i[g]/2-s[g]/2)}}return t}function ne(e,t){void 0===t&&(t={});var i=t,s=i.placement,o=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,h=i.rootBoundary,g=void 0===h?f:h,v=i.elementContext,y=void 0===v?m:v,b=i.altBoundary,x=void 0!==b&&b,S=i.padding,O=void 0===S?0:S,k=I("number"!=typeof O?O:q(O,c)),z=y===m?"reference":m,A=e.rects.popper,E=e.elements[x?z:y],H=re(w(E)?E:E.contextElement||_(e.elements.popper),u,g,p),B=M(e.elements.reference),R=ae({reference:B,element:A,placement:o}),C=ie(Object.assign({},A,R)),L=y===m?C:B,j={top:H.top-L.top+k.top,bottom:L.bottom-H.bottom+k.bottom,left:H.left-L.left+k.left,right:L.right-H.right+k.right},N=e.modifiersData.offset;if(y===m&&N){var D=N[o];Object.keys(j).forEach(function(e){var t=[n,a].indexOf(e)>=0?1:-1,i=[r,a].indexOf(e)>=0?"y":"x";j[e]+=D[i]*t})}return j}function oe(e,t){void 0===t&&(t={});var i=t,s=i.placement,r=i.boundary,a=i.rootBoundary,n=i.padding,o=i.flipVariations,l=i.allowedAutoPlacements,p=void 0===l?h:l,d=T(s),f=d?o?u:u.filter(function(e){return T(e)===d}):c,m=f.filter(function(e){return p.indexOf(e)>=0});0===m.length&&(m=f);var g=m.reduce(function(t,i){return t[i]=ne(e,{placement:i,boundary:r,rootBoundary:a,padding:n})[O(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,m=void 0===f||f,u=i.fallbackPlacements,h=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,k=O(S),z=u||(k===S||!b?[G(S)]:function(e){if(O(e)===l)return[];var t=G(e);return[J(e),t,J(t)]}(S)),A=[S].concat(z).reduce(function(e,i){return e.concat(O(i)===l?oe(t,{placement:i,boundary:g,rootBoundary:v,padding:h,flipVariations:b,allowedAutoPlacements:x}):i)},[]),E=t.rects.reference,H=t.rects.popper,M=new Map,B=!0,R=A[0],C=0;C<A.length;C++){var L=A[C],_=O(L),j=T(L)===p,N=[r,a].indexOf(_)>=0,D=N?"width":"height",P=ne(t,{placement:L,boundary:g,rootBoundary:v,altBoundary:y,padding:h}),U=N?j?n:o:j?a:r;E[D]>H[D]&&(U=G(U));var I=G(U),q=[];if(d&&q.push(P[_]<=0),m&&q.push(P[U]<=0,P[I]<=0),q.every(function(e){return e})){R=L,B=!1;break}M.set(L,q)}if(B)for(var F=function(e){var t=A.find(function(t){var i=M.get(t);if(i)return i.slice(0,e).every(function(e){return e})});if(t)return R=t,"break"},W=b?3:1;W>0;W--){if("break"===F(W))break}t.placement!==R&&(t.modifiersData[s]._skip=!0,t.placement=R,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,a,o].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,a=i.offset,l=void 0===a?[0,0]:a,c=h.reduce(function(e,i){return e[i]=function(e,t,i){var s=O(e),a=[o,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)*a,[o,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,m=i.boundary,u=i.rootBoundary,h=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:m,rootBoundary:u,padding:g,altBoundary:h}),S=O(t.placement),A=T(t.placement),E=!A,H=P(S),M="x"===H?"y":"x",R=t.modifiersData.popperOffsets,C=t.rects.reference,L=t.rects.popper,_="function"==typeof b?b(Object.assign({},t.rects,{placement:t.placement})):b,j="number"==typeof _?{mainAxis:_,altAxis:_}:Object.assign({mainAxis:0,altAxis:0},_),N=t.modifiersData.offset?t.modifiersData.offset[t.placement]:null,I={x:0,y:0};if(R){if(c){var q,F="y"===H?r:o,W="y"===H?a:n,X="y"===H?"height":"width",V=R[H],$=V+x[F],G=V-x[W],Y=y?-L[X]/2:0,J=A===p?C[X]:L[X],K=A===p?-L[X]:-C[X],Q=t.elements.arrow,Z=y&&Q?B(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=U(0,C[X],Z[X]),re=E?C[X]/2-Y-se-te-j.mainAxis:J-se-te-j.mainAxis,ae=E?-C[X]/2+Y+se+ie+j.mainAxis:K+se+ie+j.mainAxis,oe=t.elements.arrow&&D(t.elements.arrow),le=oe?"y"===H?oe.clientTop||0:oe.clientLeft||0:0,ce=null!=(q=null==N?void 0:N[H])?q:0,pe=V+ae-ce,de=U(y?z($,V+re-ce-le):$,V,y?k(G,pe):G);R[H]=de,I[H]=de-V}if(f){var fe,me="x"===H?r:o,ue="x"===H?a:n,he=R[M],ge="y"===M?"height":"width",ve=he+x[me],ye=he-x[ue],we=-1!==[r,o].indexOf(S),be=null!=(fe=null==N?void 0:N[M])?fe:0,xe=we?ve:he-C[ge]-L[ge]-be+j.altAxis,Se=we?he+C[ge]+L[ge]-be-j.altAxis:ye,Oe=y&&we?function(e,t,i){var s=U(e,t,i);return s>i?i:s}(xe,he,Se):U(y?xe:ve,he,y?Se:ye);R[M]=Oe,I[M]=Oe-he}t.modifiersData[s]=I}},requiresIfExists:["offset"]};function me(e,t,i){void 0===i&&(i=!1);var s,r,a=b(t),n=b(t)&&function(e){var t=e.getBoundingClientRect(),i=A(t.width)/e.offsetWidth||1,s=A(t.height)/e.offsetHeight||1;return 1!==i||1!==s}(t),o=_(t),l=M(e,n,i),c={scrollLeft:0,scrollTop:0},p={x:0,y:0};return(a||!a&&!i)&&(("body"!==v(t)||Z(o))&&(c=(s=t)!==y(s)&&b(s)?{scrollLeft:(r=s).scrollLeft,scrollTop:r.scrollTop}:K(s)),b(t)?((p=M(t,!0)).x+=t.clientLeft,p.y+=t.clientTop):o&&(p.x=Q(o))),{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 he={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,a=void 0===r?he:r;return function(e,t,i){void 0===i&&(i=a);var r,n,o={placement:"bottom",orderedModifiers:[],options:Object.assign({},he,a),modifiersData:{},elements:{reference:e,popper:t},attributes:{},styles:{}},l=[],c=!1,p={state:o,setOptions:function(i){var r="function"==typeof i?i(o.options):i;d(),o.options=Object.assign({},a,o.options,r),o.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,o.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 o.orderedModifiers=f.filter(function(e){return e.enabled}),o.orderedModifiers.forEach(function(e){var t=e.name,i=e.options,s=void 0===i?{}:i,r=e.effect;if("function"==typeof r){var a=r({state:o,name:t,instance:p,options:s}),n=function(){};l.push(a||n)}}),p.update()},forceUpdate:function(){if(!c){var e=o.elements,t=e.reference,i=e.popper;if(ge(t,i)){o.rects={reference:me(t,D(i),"fixed"===o.options.strategy),popper:B(i)},o.reset=!1,o.placement=o.options.placement,o.orderedModifiers.forEach(function(e){return o.modifiersData[e.name]=Object.assign({},e.data)});for(var s=0;s<o.orderedModifiers.length;s++)if(!0!==o.reset){var r=o.orderedModifiers[s],a=r.fn,n=r.options,l=void 0===n?{}:n,d=r.name;"function"==typeof a&&(o=a({state:o,options:l,name:d,instance:p})||o)}else o.reset=!1,s=-1}}},update:(r=function(){return new Promise(function(e){p.forceUpdate(),e(o)})},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,a=void 0===r||r,n=s.resize,o=void 0===n||n,l=y(t.elements.popper),c=[].concat(t.scrollParents.reference,t.scrollParents.popper);return a&&c.forEach(function(e){e.addEventListener("scroll",i.update,V)}),o&&l.addEventListener("resize",i.update,V),function(){a&&c.forEach(function(e){e.removeEventListener("scroll",i.update,V)}),o&&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]=ae({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,a=i.adaptive,n=void 0===a||a,o=i.roundOffsets,l=void 0===o||o,c={placement:O(t.placement),variation:T(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,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,a=t.modifiersData.preventOverflow,n=ne(t,{elementContext:"reference"}),o=ne(t,{altBoundary:!0}),l=ce(n,s),c=ce(o,r,a),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
|
|
5
|
-
<div id="popover" class="popover util_insetLg body-default" part="popover">
|
|
4
|
+
`;class Oe extends t{constructor(){super(),this.placement="top"}_initializeDefaults(){this.isPopoverVisible=!1,this.id=`popover-${(Math.random()+1).toString(36).substring(7)}`,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}}}static get styles(){return[e`${xe}`,e`${be}`,e`${Se}`]}static register(e="auro-popover"){s.prototype.registerComponent(e,Oe)}connectedCallback(){super.connectedCallback(),this._initializeDefaults(),this.addEventListener("touchstart",function(){this.toggle(),this.setAttribute("isTouch","true")})}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.documentClickHandler)}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.auroPopover=this.shadowRoot.querySelector("#popover"),this.popper=new we(this.trigger,this.auroPopover,this.placement,this.boundary);const e=()=>{this.toggleShow()},t=()=>{this.toggleHide()},i="AURO-POPOVER"===this.trigger.parentElement.nodeName?this:this.trigger;i.addEventListener("mouseenter",e),i.addEventListener("mouseleave",t),this.trigger.addEventListener("keydown",e=>{const t=e.key.toLowerCase();this.isPopoverVisible&&("tab"!==t&&"escape"!==t||this.toggleHide())," "!==t&&"enter"!==t||this.toggle()}),this.trigger.addEventListener("focus",e),this.trigger.addEventListener("blur",t),this.addEventListener("hidePopover",t)}toggle(){this.isPopoverVisible?this.toggleHide():this.toggleShow()}toggleHide(){this.popper.hide(),this.isPopoverVisible=!1,this.removeAttribute("data-show"),document.querySelector("body").removeEventListener("mouseover",this.mouseoverHandler)}toggleShow(){this.popper.show(),this.isPopoverVisible=!0,this.setAttribute("data-show",!0),this.mouseoverHandler=e=>this.handleMouseoverEvent(e),document.querySelector("body").addEventListener("mouseover",this.mouseoverHandler)}handleMouseoverEvent(e){this.isPopoverVisible&&!e.composedPath().includes(this)&&this.toggleHide()}updated(e){e.has("boundary")&&(this.popper.boundaryElement=this.boundary)}render(){return i`
|
|
5
|
+
<div id="popover" class="popover util_insetLg body-default" aria-live="polite" part="popover">
|
|
6
6
|
<div id="arrow" class="arrow" data-popper-arrow></div>
|
|
7
|
-
<span role="tooltip"><slot></slot></span>
|
|
7
|
+
<span role="tooltip" aria-labelledby="${this.id}"><slot></slot></span>
|
|
8
8
|
</div>
|
|
9
9
|
|
|
10
|
-
<span>
|
|
10
|
+
<span id="${this.id}">
|
|
11
11
|
<slot name="trigger" data-trigger-placement="${this.placement}"></slot>
|
|
12
12
|
</span>
|
|
13
|
-
`}}export{
|
|
13
|
+
`}}export{Oe as A};
|
package/dist/index.d.ts
CHANGED
|
@@ -89,30 +89,10 @@ export type AuroPopoverProps = {
|
|
|
89
89
|
"disabled"?: AuroPopover['disabled'];
|
|
90
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. */
|
|
91
91
|
"for"?: AuroPopover['for'];
|
|
92
|
-
/** Position for popover in relation to the element
|
|
92
|
+
/** Position for popover in relation to the element. */
|
|
93
93
|
"placement"?: AuroPopover['placement'];
|
|
94
94
|
/** Removes top and bottom space around the appearance of the popover in relation to the trigger. */
|
|
95
95
|
"removeSpace"?: AuroPopover['removeSpace'];
|
|
96
|
-
/** */
|
|
97
|
-
"_addedTabIndex"?: AuroPopover['_addedTabIndex'];
|
|
98
|
-
/** */
|
|
99
|
-
"_onBodyMouseover"?: AuroPopover['_onBodyMouseover'];
|
|
100
|
-
/** */
|
|
101
|
-
"_onHidePopover"?: AuroPopover['_onHidePopover'];
|
|
102
|
-
/** */
|
|
103
|
-
"_onSlotChange"?: AuroPopover['_onSlotChange'];
|
|
104
|
-
/** */
|
|
105
|
-
"_onTouchStart"?: AuroPopover['_onTouchStart'];
|
|
106
|
-
/** */
|
|
107
|
-
"_onTriggerBlur"?: AuroPopover['_onTriggerBlur'];
|
|
108
|
-
/** */
|
|
109
|
-
"_onTriggerFocus"?: AuroPopover['_onTriggerFocus'];
|
|
110
|
-
/** */
|
|
111
|
-
"_onTriggerKeydown"?: AuroPopover['_onTriggerKeydown'];
|
|
112
|
-
/** */
|
|
113
|
-
"_onTriggerMouseEnter"?: AuroPopover['_onTriggerMouseEnter'];
|
|
114
|
-
/** */
|
|
115
|
-
"_onTriggerMouseLeave"?: AuroPopover['_onTriggerMouseLeave'];
|
|
116
96
|
|
|
117
97
|
|
|
118
98
|
}
|
|
@@ -131,18 +111,8 @@ export type AuroPopoverProps = {
|
|
|
131
111
|
* - `boundary`: The element to use as the boundary for the popover. Can be a query selector or an HTML element.
|
|
132
112
|
* - `disabled`: Disables the popover from showing on hover and focus.
|
|
133
113
|
* - `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.
|
|
134
|
-
* - `placement`: Position for popover in relation to the element
|
|
114
|
+
* - `placement`: Position for popover in relation to the element.
|
|
135
115
|
* - `removeSpace`: Removes top and bottom space around the appearance of the popover in relation to the trigger.
|
|
136
|
-
* - `_addedTabIndex`: undefined (property only)
|
|
137
|
-
* - `_onBodyMouseover`: undefined (property only)
|
|
138
|
-
* - `_onHidePopover`: undefined (property only)
|
|
139
|
-
* - `_onSlotChange`: undefined (property only)
|
|
140
|
-
* - `_onTouchStart`: undefined (property only)
|
|
141
|
-
* - `_onTriggerBlur`: undefined (property only)
|
|
142
|
-
* - `_onTriggerFocus`: undefined (property only)
|
|
143
|
-
* - `_onTriggerKeydown`: undefined (property only)
|
|
144
|
-
* - `_onTriggerMouseEnter`: undefined (property only)
|
|
145
|
-
* - `_onTriggerMouseLeave`: undefined (property only)
|
|
146
116
|
*
|
|
147
117
|
* ## Slots
|
|
148
118
|
*
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AuroPopover}from"./auro-popover-
|
|
1
|
+
export{A as AuroPopover}from"./auro-popover-BIsWI8m_.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-BIsWI8m_.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-
|
|
10
|
+
"version": "0.0.0-pr126.0",
|
|
11
11
|
"description": "auro-popover HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|