@aurodesignsystem-dev/auro-drawer 0.0.0-pr131.2 → 0.0.0-pr131.4
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 +56 -12
- package/demo/auro-drawer.min.js +26 -3
- package/dist/{auro-drawer-Cu_nT0cn.js → auro-drawer-DTS2mk2U.js} +6 -5
- package/dist/index.d.ts +18 -2
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +1 -1
package/demo/api.md
CHANGED
|
@@ -42,14 +42,23 @@ The `auro-drawer` element provides users a way to implement an expandable drawer
|
|
|
42
42
|
|
|
43
43
|
### CSS Shadow Parts
|
|
44
44
|
|
|
45
|
-
| Name | Description
|
|
46
|
-
| --------------- |
|
|
47
|
-
| close-button | to style the close button.
|
|
48
|
-
| drawer-backdrop | to
|
|
49
|
-
| drawer-content | to style the container of the drawer content.
|
|
50
|
-
| drawer-footer | to style the footer.
|
|
51
|
-
| drawer-header | to style the header.
|
|
52
|
-
| drawer-wrapper | to style the content wrapper.
|
|
45
|
+
| Name | Description |
|
|
46
|
+
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
47
|
+
| close-button | to style the close button. |
|
|
48
|
+
| drawer-backdrop | DEPRECATED - To migrate to the token approach, set `display: none` on this part and use the `--auro-drawer-backdrop-*` CSS custom properties instead. |
|
|
49
|
+
| drawer-content | to style the container of the drawer content. |
|
|
50
|
+
| drawer-footer | to style the footer. |
|
|
51
|
+
| drawer-header | to style the header. |
|
|
52
|
+
| drawer-wrapper | to style the content wrapper. |
|
|
53
|
+
|
|
54
|
+
### CSS Custom Properties
|
|
55
|
+
|
|
56
|
+
| Name | Description |
|
|
57
|
+
| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
58
|
+
| --auro-drawer-backdrop-background | Background of the `::backdrop` pseudo-element. In modal/backdrop mode the component sets this to the design-system scrim token; consumers can override it. |
|
|
59
|
+
| --auro-drawer-backdrop-filter | `backdrop-filter` applied to the `::backdrop` pseudo-element (e.g. `blur(4px)`). |
|
|
60
|
+
| --auro-drawer-backdrop-opacity | Opacity of the `::backdrop` pseudo-element. |
|
|
61
|
+
| --auro-drawer-backdrop-transition | Transition applied to the `::backdrop` pseudo-element (e.g. `opacity 0.3s ease`). |
|
|
53
62
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
54
63
|
|
|
55
64
|
## Basic
|
|
@@ -1013,13 +1022,36 @@ To customize the aria-label text for the close button, use the `ariaLabel.drawer
|
|
|
1013
1022
|
|
|
1014
1023
|
The drawer's size and some styles can be styled using CSS `part`.
|
|
1015
1024
|
|
|
1016
|
-
- `auro-drawer::part(
|
|
1017
|
-
- `auro-drawer ::part(drawer-wrapper)` to style the container of the drawer content.
|
|
1025
|
+
- `auro-drawer::part(drawer-wrapper)` to style the container of the drawer content (the drawer panel itself).
|
|
1018
1026
|
- `auro-drawer ::part(drawer-header)` to style the header.
|
|
1019
1027
|
- `auro-drawer ::part(drawer-content)` to style the content wrapper.
|
|
1020
1028
|
- `auro-drawer ::part(drawer-footer)` to style the footer.
|
|
1021
1029
|
- `auro-drawer ::part(close-button)` to style the close button.
|
|
1022
1030
|
|
|
1031
|
+
The drawer backdrop cannot be targeted via `::part()` because browser restrictions prevent CSS parts from targeting `::backdrop`. The `drawer-backdrop` part is kept for backwards compatibility — it targets a decorative `<div>` that sits behind the drawer panel.
|
|
1032
|
+
|
|
1033
|
+
To migrate to the new token approach, hide the legacy div and use the CSS custom properties instead:
|
|
1034
|
+
|
|
1035
|
+
```css
|
|
1036
|
+
/* Step 1: disable the legacy backdrop div */
|
|
1037
|
+
auro-drawer::part(drawer-backdrop) {
|
|
1038
|
+
display: none;
|
|
1039
|
+
}
|
|
1040
|
+
|
|
1041
|
+
/* Step 2: style via tokens on the native ::backdrop */
|
|
1042
|
+
auro-drawer {
|
|
1043
|
+
--auro-drawer-backdrop-background: rgba(0, 0, 0, 0.6);
|
|
1044
|
+
--auro-drawer-backdrop-filter: blur(4px);
|
|
1045
|
+
}
|
|
1046
|
+
```
|
|
1047
|
+
|
|
1048
|
+
| Custom Property | Default | Description |
|
|
1049
|
+
|---|---|---|
|
|
1050
|
+
| `--auro-drawer-backdrop-background` | `transparent` | Background of the native `::backdrop`. |
|
|
1051
|
+
| `--auro-drawer-backdrop-filter` | `none` | `backdrop-filter` applied to the native `::backdrop` (e.g. `blur(4px)`). |
|
|
1052
|
+
| `--auro-drawer-backdrop-opacity` | `1` | Opacity of the native `::backdrop`. |
|
|
1053
|
+
| `--auro-drawer-backdrop-transition` | `opacity 0.3s ease` | Transition applied to the native `::backdrop`. |
|
|
1054
|
+
|
|
1023
1055
|
`close` slot can be used to replace the close button to a different element.
|
|
1024
1056
|
|
|
1025
1057
|
<div class="exampleWrapper">
|
|
@@ -1039,8 +1071,14 @@ The drawer's size and some styles can be styled using CSS `part`.
|
|
|
1039
1071
|
background: linear-gradient(180deg, var( --ds-advanced-color-accents-accent1) 50%, var(--ds-advanced-color-accents-accent1-muted) 100%);
|
|
1040
1072
|
width: 50%;
|
|
1041
1073
|
}
|
|
1074
|
+
/* Migrate to the token approach: disable the legacy backdrop div first,
|
|
1075
|
+
then style the native ::backdrop via CSS custom properties. */
|
|
1042
1076
|
#customizedDrawer::part(drawer-backdrop) {
|
|
1043
|
-
|
|
1077
|
+
display: none;
|
|
1078
|
+
}
|
|
1079
|
+
#customizedDrawer {
|
|
1080
|
+
--auro-drawer-backdrop-background: rgba(255, 0, 0, 0.5);
|
|
1081
|
+
--auro-drawer-backdrop-filter: blur(2px);
|
|
1044
1082
|
}
|
|
1045
1083
|
</style>
|
|
1046
1084
|
<div>
|
|
@@ -1135,8 +1173,14 @@ The drawer's size and some styles can be styled using CSS `part`.
|
|
|
1135
1173
|
background: linear-gradient(180deg, var( --ds-advanced-color-accents-accent1) 50%, var(--ds-advanced-color-accents-accent1-muted) 100%);
|
|
1136
1174
|
width: 50%;
|
|
1137
1175
|
}
|
|
1176
|
+
/* Migrate to the token approach: disable the legacy backdrop div first,
|
|
1177
|
+
then style the native ::backdrop via CSS custom properties. */
|
|
1138
1178
|
#customizedDrawer::part(drawer-backdrop) {
|
|
1139
|
-
|
|
1179
|
+
display: none;
|
|
1180
|
+
}
|
|
1181
|
+
#customizedDrawer {
|
|
1182
|
+
--auro-drawer-backdrop-background: rgba(255, 0, 0, 0.5);
|
|
1183
|
+
--auro-drawer-backdrop-filter: blur(2px);
|
|
1140
1184
|
}
|
|
1141
1185
|
</style>
|
|
1142
1186
|
<div>
|
package/demo/auro-drawer.min.js
CHANGED
|
@@ -2449,10 +2449,10 @@ class AuroFloatingUI {
|
|
|
2449
2449
|
}
|
|
2450
2450
|
}
|
|
2451
2451
|
|
|
2452
|
-
var colorCss$1 = i$5`:host([onbackdrop])
|
|
2452
|
+
var colorCss$1 = i$5`:host([onbackdrop]) .backdrop{background:var(--ds-auro-floater-backdrop-modal-background-color)}::slotted(*){background:var(--ds-auro-floater-container-background-color);color:var(--ds-auro-floater-container-text-color)}
|
|
2453
2453
|
`;
|
|
2454
2454
|
|
|
2455
|
-
var styleCss$1 = i$5`:host{position:absolute;z-index:var(--ds-depth-overlay, 200);display:none;flex-direction:column;opacity:0;transition:opacity .3s ease-in-out,display .3s;transition-behavior:allow-discrete;will-change:opacity}.util_displayHiddenVisually{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog.container{background-color:transparent;max-width:none;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0);display:inline-block;width:100%;height:100%}dialog.container::backdrop{background:transparent}dialog.container ::slotted(:only-child){z-index:var(--ds-depth-modal, 300);box-shadow:var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, .15))}:host([data-show]){display:block;opacity:1}@starting-style{:host([data-show]){opacity:0}}:host([data-show][modal]){pointer-events:initial}:host([isfullscreen]){width:100%;height:100%}:host([isfullscreen]) dialog.container{overflow:auto;width:100%;height:100%}
|
|
2455
|
+
var styleCss$1 = i$5`:host{position:absolute;z-index:var(--ds-depth-overlay, 200);display:none;flex-direction:column;opacity:0;transition:opacity .3s ease-in-out,display .3s;transition-behavior:allow-discrete;will-change:opacity}.util_displayHiddenVisually{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog.container{background-color:transparent;max-width:none;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0);display:inline-block;width:100%;height:100%}dialog.container::backdrop{background:var(--auro-drawer-backdrop-background, transparent);backdrop-filter:var(--auro-drawer-backdrop-filter, none);opacity:var(--auro-drawer-backdrop-opacity, 1);transition:var(--auro-drawer-backdrop-transition, opacity .3s ease)}dialog.container .backdrop{position:fixed;inset:0;pointer-events:none}dialog.container ::slotted(:only-child){z-index:var(--ds-depth-modal, 300);box-shadow:var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, .15))}:host([data-show]){display:block;opacity:1}@starting-style{:host([data-show]){opacity:0}}:host([data-show][modal]){pointer-events:initial}:host([isfullscreen]){width:100%;height:100%}:host([isfullscreen]) dialog.container{overflow:auto;width:100%;height:100%}
|
|
2456
2456
|
`;
|
|
2457
2457
|
|
|
2458
2458
|
var tokensCss$1 = i$5`:host{--ds-auro-floater-backdrop-modal-background-color: var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, .5));--ds-auro-floater-container-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-floater-container-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
|
|
@@ -2519,6 +2519,14 @@ class AuroFloaterBib extends i$2 {
|
|
|
2519
2519
|
new KeyboardEvent(e.type, { ...e, bubbles: true, composed: true }),
|
|
2520
2520
|
);
|
|
2521
2521
|
});
|
|
2522
|
+
|
|
2523
|
+
// Clicks on the empty dialog area (outside the drawer panel) target the
|
|
2524
|
+
// dialog element directly; clicks inside the panel bubble up from a child.
|
|
2525
|
+
this.dialog.addEventListener("click", (e) => {
|
|
2526
|
+
if (e.target === this.dialog) {
|
|
2527
|
+
this.dispatchEvent(new Event("dialog-backdrop-click", { bubbles: true, composed: true }));
|
|
2528
|
+
}
|
|
2529
|
+
});
|
|
2522
2530
|
}
|
|
2523
2531
|
|
|
2524
2532
|
/**
|
|
@@ -2631,6 +2639,7 @@ class AuroFloaterBib extends i$2 {
|
|
|
2631
2639
|
return u$2`
|
|
2632
2640
|
<dialog class="container" aria-labelledby="dialogLabel">
|
|
2633
2641
|
<span id="dialogLabel" class="util_displayHiddenVisually" aria-hidden="true">${this.bibLabel || ""}</span>
|
|
2642
|
+
<div class="backdrop" part="backdrop"></div>
|
|
2634
2643
|
<slot></slot>
|
|
2635
2644
|
</dialog>
|
|
2636
2645
|
`;
|
|
@@ -3354,12 +3363,17 @@ const CONFIG = {
|
|
|
3354
3363
|
*
|
|
3355
3364
|
* @fires auroDrawer-toggled - Event fired when the drawer is toggled open or closed.
|
|
3356
3365
|
*
|
|
3357
|
-
* @csspart drawer-backdrop - to
|
|
3366
|
+
* @csspart {deprecated} drawer-backdrop - DEPRECATED - To migrate to the token approach, set `display: none` on this part and use the `--auro-drawer-backdrop-*` CSS custom properties instead.
|
|
3358
3367
|
* @csspart drawer-wrapper - to style the content wrapper.
|
|
3359
3368
|
* @csspart drawer-header - to style the header.
|
|
3360
3369
|
* @csspart drawer-content - to style the container of the drawer content.
|
|
3361
3370
|
* @csspart drawer-footer - to style the footer.
|
|
3362
3371
|
* @csspart close-button - to style the close button.
|
|
3372
|
+
*
|
|
3373
|
+
* @cssprop [--auro-drawer-backdrop-background=transparent] - Background of the `::backdrop` pseudo-element. In modal/backdrop mode the component sets this to the design-system scrim token; consumers can override it.
|
|
3374
|
+
* @cssprop [--auro-drawer-backdrop-filter=none] - `backdrop-filter` applied to the `::backdrop` pseudo-element (e.g. `blur(4px)`).
|
|
3375
|
+
* @cssprop [--auro-drawer-backdrop-opacity=1] - Opacity of the `::backdrop` pseudo-element.
|
|
3376
|
+
* @cssprop [--auro-drawer-backdrop-transition=opacity 0.3s ease] - Transition applied to the `::backdrop` pseudo-element (e.g. `opacity 0.3s ease`).
|
|
3363
3377
|
*/
|
|
3364
3378
|
class AuroDrawer extends AuroFloater {
|
|
3365
3379
|
constructor() {
|
|
@@ -3540,6 +3554,15 @@ class AuroDrawer extends AuroFloater {
|
|
|
3540
3554
|
this.floater.hideBib();
|
|
3541
3555
|
});
|
|
3542
3556
|
|
|
3557
|
+
// Handle backdrop clicks — close unless this is a modal drawer.
|
|
3558
|
+
this.bib.addEventListener("dialog-backdrop-click", () => {
|
|
3559
|
+
if (this.modal) {
|
|
3560
|
+
return; // Modal drawers require an explicit action to close.
|
|
3561
|
+
}
|
|
3562
|
+
this.bib?.hideDialog();
|
|
3563
|
+
this.floater.hideBib();
|
|
3564
|
+
});
|
|
3565
|
+
|
|
3543
3566
|
this.setupAria();
|
|
3544
3567
|
}
|
|
3545
3568
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import{css as e,LitElement as t,html as o}from"lit";import{unsafeStatic as s,literal as a,html as r}from"lit/static-html.js";import{classMap as i}from"lit/directives/class-map.js";import{ifDefined as n}from"lit/directives/if-defined.js";class l{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,o=(t,s=t&&t.closest(e))=>t&&t!==document&&t!==window?s||o(t.getRootNode().host):null){return o(t)}handleComponentTagRename(e,t){const o=t.toLowerCase();e.tagName.toLowerCase()!==o&&e.setAttribute(o,!0)}elementMatch(e,t){const o=t.toLowerCase();return e.tagName.toLowerCase()===o||e.hasAttribute(o)}getSlotText(e,t){const o=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return(o?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}class c{generateElementName(e,t){let o=e;return o+="-",o+=t.replace(/[.]/g,"_"),o}generateTag(e,t,o){const r=this.generateElementName(e,t),i=a`${s(r)}`;return customElements.get(r)||customElements.define(r,class extends o{}),i}}const d=["start","end"],h=["top","right","bottom","left"].reduce((e,t)=>e.concat(t,t+"-"+d[0],t+"-"+d[1]),[]),u=Math.min,p=Math.max,b=Math.round,m=Math.floor,f=e=>({x:e,y:e}),g={left:"right",right:"left",bottom:"top",top:"bottom"},v={start:"end",end:"start"};function x(e,t,o){return p(e,u(t,o))}function w(e,t){return"function"==typeof e?e(t):e}function y(e){return e.split("-")[0]}function z(e){return e.split("-")[1]}function k(e){return"x"===e?"y":"x"}function S(e){return"y"===e?"height":"width"}const A=new Set(["top","bottom"]);function B(e){return A.has(y(e))?"y":"x"}function E(e){return k(B(e))}function T(e,t,o){void 0===o&&(o=!1);const s=z(e),a=E(e),r=S(a);let i="x"===a?s===(o?"end":"start")?"right":"left":"start"===s?"bottom":"top";return t.reference[r]>t.floating[r]&&(i=M(i)),[i,M(i)]}function C(e){return e.replace(/start|end/g,e=>v[e])}const H=["left","right"],R=["right","left"],L=["top","bottom"],F=["bottom","top"];function q(e,t,o,s){const a=z(e);let r=function(e,t,o){switch(e){case"top":case"bottom":return o?t?R:H:t?H:R;case"left":case"right":return t?L:F;default:return[]}}(y(e),"start"===o,s);return a&&(r=r.map(e=>e+"-"+a),t&&(r=r.concat(r.map(C)))),r}function M(e){return e.replace(/left|right|bottom|top/g,e=>g[e])}function N(e){const{x:t,y:o,width:s,height:a}=e;return{width:s,height:a,top:o,left:t,right:t+s,bottom:o+a,x:t,y:o}}function _(e,t,o){let{reference:s,floating:a}=e;const r=B(t),i=E(t),n=S(i),l=y(t),c="y"===r,d=s.x+s.width/2-a.width/2,h=s.y+s.height/2-a.height/2,u=s[n]/2-a[n]/2;let p;switch(l){case"top":p={x:d,y:s.y-a.height};break;case"bottom":p={x:d,y:s.y+s.height};break;case"right":p={x:s.x+s.width,y:h};break;case"left":p={x:s.x-a.width,y:h};break;default:p={x:s.x,y:s.y}}switch(z(t)){case"start":p[i]-=u*(o&&c?-1:1);break;case"end":p[i]+=u*(o&&c?-1:1)}return p}async function D(e,t){var o;void 0===t&&(t={});const{x:s,y:a,platform:r,rects:i,elements:n,strategy:l}=e,{boundary:c="clippingAncestors",rootBoundary:d="viewport",elementContext:h="floating",altBoundary:u=!1,padding:p=0}=w(t,e),b=function(e){return"number"!=typeof e?function(e){return{top:0,right:0,bottom:0,left:0,...e}}(e):{top:e,right:e,bottom:e,left:e}}(p),m=n[u?"floating"===h?"reference":"floating":h],f=N(await r.getClippingRect({element:null==(o=await(null==r.isElement?void 0:r.isElement(m)))||o?m:m.contextElement||await(null==r.getDocumentElement?void 0:r.getDocumentElement(n.floating)),boundary:c,rootBoundary:d,strategy:l})),g="floating"===h?{x:s,y:a,width:i.floating.width,height:i.floating.height}:i.reference,v=await(null==r.getOffsetParent?void 0:r.getOffsetParent(n.floating)),x=await(null==r.isElement?void 0:r.isElement(v))&&await(null==r.getScale?void 0:r.getScale(v))||{x:1,y:1},y=N(r.convertOffsetParentRelativeRectToViewportRelativeRect?await r.convertOffsetParentRelativeRectToViewportRelativeRect({elements:n,rect:g,offsetParent:v,strategy:l}):g);return{top:(f.top-y.top+b.top)/x.y,bottom:(y.bottom-f.bottom+b.bottom)/x.y,left:(f.left-y.left+b.left)/x.x,right:(y.right-f.right+b.right)/x.x}}const I=new Set(["left","top"]);function U(){return"undefined"!=typeof window}function P(e){return W(e)?(e.nodeName||"").toLowerCase():"#document"}function $(e){var t;return(null==e||null==(t=e.ownerDocument)?void 0:t.defaultView)||window}function O(e){var t;return null==(t=(W(e)?e.ownerDocument:e.document)||window.document)?void 0:t.documentElement}function W(e){return!!U()&&(e instanceof Node||e instanceof $(e).Node)}function V(e){return!!U()&&(e instanceof Element||e instanceof $(e).Element)}function X(e){return!!U()&&(e instanceof HTMLElement||e instanceof $(e).HTMLElement)}function j(e){return!(!U()||"undefined"==typeof ShadowRoot)&&(e instanceof ShadowRoot||e instanceof $(e).ShadowRoot)}const G=new Set(["inline","contents"]);function Y(e){const{overflow:t,overflowX:o,overflowY:s,display:a}=ne(e);return/auto|scroll|overlay|hidden|clip/.test(t+s+o)&&!G.has(a)}const Z=new Set(["table","td","th"]);function K(e){return Z.has(P(e))}const J=[":popover-open",":modal"];function Q(e){return J.some(t=>{try{return e.matches(t)}catch(e){return!1}})}const ee=["transform","translate","scale","rotate","perspective"],te=["transform","translate","scale","rotate","perspective","filter"],oe=["paint","layout","strict","content"];function se(e){const t=ae(),o=V(e)?ne(e):e;return ee.some(e=>!!o[e]&&"none"!==o[e])||!!o.containerType&&"normal"!==o.containerType||!t&&!!o.backdropFilter&&"none"!==o.backdropFilter||!t&&!!o.filter&&"none"!==o.filter||te.some(e=>(o.willChange||"").includes(e))||oe.some(e=>(o.contain||"").includes(e))}function ae(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}const re=new Set(["html","body","#document"]);function ie(e){return re.has(P(e))}function ne(e){return $(e).getComputedStyle(e)}function le(e){return V(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.scrollX,scrollTop:e.scrollY}}function ce(e){if("html"===P(e))return e;const t=e.assignedSlot||e.parentNode||j(e)&&e.host||O(e);return j(t)?t.host:t}function de(e){const t=ce(e);return ie(t)?e.ownerDocument?e.ownerDocument.body:e.body:X(t)&&Y(t)?t:de(t)}function he(e,t,o){var s;void 0===t&&(t=[]),void 0===o&&(o=!0);const a=de(e),r=a===(null==(s=e.ownerDocument)?void 0:s.body),i=$(a);if(r){const e=ue(i);return t.concat(i,i.visualViewport||[],Y(a)?a:[],e&&o?he(e):[])}return t.concat(a,he(a,[],o))}function ue(e){return e.parent&&Object.getPrototypeOf(e.parent)?e.frameElement:null}function pe(e){const t=ne(e);let o=parseFloat(t.width)||0,s=parseFloat(t.height)||0;const a=X(e),r=a?e.offsetWidth:o,i=a?e.offsetHeight:s,n=b(o)!==r||b(s)!==i;return n&&(o=r,s=i),{width:o,height:s,$:n}}function be(e){return V(e)?e:e.contextElement}function me(e){const t=be(e);if(!X(t))return f(1);const o=t.getBoundingClientRect(),{width:s,height:a,$:r}=pe(t);let i=(r?b(o.width):o.width)/s,n=(r?b(o.height):o.height)/a;return i&&Number.isFinite(i)||(i=1),n&&Number.isFinite(n)||(n=1),{x:i,y:n}}const fe=f(0);function ge(e){const t=$(e);return ae()&&t.visualViewport?{x:t.visualViewport.offsetLeft,y:t.visualViewport.offsetTop}:fe}function ve(e,t,o,s){void 0===t&&(t=!1),void 0===o&&(o=!1);const a=e.getBoundingClientRect(),r=be(e);let i=f(1);t&&(s?V(s)&&(i=me(s)):i=me(e));const n=function(e,t,o){return void 0===t&&(t=!1),!(!o||t&&o!==$(e))&&t}(r,o,s)?ge(r):f(0);let l=(a.left+n.x)/i.x,c=(a.top+n.y)/i.y,d=a.width/i.x,h=a.height/i.y;if(r){const e=$(r),t=s&&V(s)?$(s):s;let o=e,a=ue(o);for(;a&&s&&t!==o;){const e=me(a),t=a.getBoundingClientRect(),s=ne(a),r=t.left+(a.clientLeft+parseFloat(s.paddingLeft))*e.x,i=t.top+(a.clientTop+parseFloat(s.paddingTop))*e.y;l*=e.x,c*=e.y,d*=e.x,h*=e.y,l+=r,c+=i,o=$(a),a=ue(o)}}return N({width:d,height:h,x:l,y:c})}function xe(e,t){const o=le(e).scrollLeft;return t?t.left+o:ve(O(e)).left+o}function we(e,t){const o=e.getBoundingClientRect();return{x:o.left+t.scrollLeft-xe(e,o),y:o.top+t.scrollTop}}const ye=new Set(["absolute","fixed"]);function ze(e,t,o){let s;if("viewport"===t)s=function(e,t){const o=$(e),s=O(e),a=o.visualViewport;let r=s.clientWidth,i=s.clientHeight,n=0,l=0;if(a){r=a.width,i=a.height;const e=ae();(!e||e&&"fixed"===t)&&(n=a.offsetLeft,l=a.offsetTop)}const c=xe(s);if(c<=0){const e=s.ownerDocument,t=e.body,o=getComputedStyle(t),a="CSS1Compat"===e.compatMode&&parseFloat(o.marginLeft)+parseFloat(o.marginRight)||0,i=Math.abs(s.clientWidth-t.clientWidth-a);i<=25&&(r-=i)}else c<=25&&(r+=c);return{width:r,height:i,x:n,y:l}}(e,o);else if("document"===t)s=function(e){const t=O(e),o=le(e),s=e.ownerDocument.body,a=p(t.scrollWidth,t.clientWidth,s.scrollWidth,s.clientWidth),r=p(t.scrollHeight,t.clientHeight,s.scrollHeight,s.clientHeight);let i=-o.scrollLeft+xe(e);const n=-o.scrollTop;return"rtl"===ne(s).direction&&(i+=p(t.clientWidth,s.clientWidth)-a),{width:a,height:r,x:i,y:n}}(O(e));else if(V(t))s=function(e,t){const o=ve(e,!0,"fixed"===t),s=o.top+e.clientTop,a=o.left+e.clientLeft,r=X(e)?me(e):f(1);return{width:e.clientWidth*r.x,height:e.clientHeight*r.y,x:a*r.x,y:s*r.y}}(t,o);else{const o=ge(e);s={x:t.x-o.x,y:t.y-o.y,width:t.width,height:t.height}}return N(s)}function ke(e,t){const o=ce(e);return!(o===t||!V(o)||ie(o))&&("fixed"===ne(o).position||ke(o,t))}function Se(e,t,o){const s=X(t),a=O(t),r="fixed"===o,i=ve(e,!0,r,t);let n={scrollLeft:0,scrollTop:0};const l=f(0);function c(){l.x=xe(a)}if(s||!s&&!r)if(("body"!==P(t)||Y(a))&&(n=le(t)),s){const e=ve(t,!0,r,t);l.x=e.x+t.clientLeft,l.y=e.y+t.clientTop}else a&&c();r&&!s&&a&&c();const d=!a||s||r?f(0):we(a,n);return{x:i.left+n.scrollLeft-l.x-d.x,y:i.top+n.scrollTop-l.y-d.y,width:i.width,height:i.height}}function Ae(e){return"static"===ne(e).position}function Be(e,t){if(!X(e)||"fixed"===ne(e).position)return null;if(t)return t(e);let o=e.offsetParent;return O(e)===o&&(o=o.ownerDocument.body),o}function Ee(e,t){const o=$(e);if(Q(e))return o;if(!X(e)){let t=ce(e);for(;t&&!ie(t);){if(V(t)&&!Ae(t))return t;t=ce(t)}return o}let s=Be(e,t);for(;s&&K(s)&&Ae(s);)s=Be(s,t);return s&&ie(s)&&Ae(s)&&!se(s)?o:s||function(e){let t=ce(e);for(;X(t)&&!ie(t);){if(se(t))return t;if(Q(t))return null;t=ce(t)}return null}(e)||o}const Te={convertOffsetParentRelativeRectToViewportRelativeRect:function(e){let{elements:t,rect:o,offsetParent:s,strategy:a}=e;const r="fixed"===a,i=O(s),n=!!t&&Q(t.floating);if(s===i||n&&r)return o;let l={scrollLeft:0,scrollTop:0},c=f(1);const d=f(0),h=X(s);if((h||!h&&!r)&&(("body"!==P(s)||Y(i))&&(l=le(s)),X(s))){const e=ve(s);c=me(s),d.x=e.x+s.clientLeft,d.y=e.y+s.clientTop}const u=!i||h||r?f(0):we(i,l);return{width:o.width*c.x,height:o.height*c.y,x:o.x*c.x-l.scrollLeft*c.x+d.x+u.x,y:o.y*c.y-l.scrollTop*c.y+d.y+u.y}},getDocumentElement:O,getClippingRect:function(e){let{element:t,boundary:o,rootBoundary:s,strategy:a}=e;const r=[..."clippingAncestors"===o?Q(t)?[]:function(e,t){const o=t.get(e);if(o)return o;let s=he(e,[],!1).filter(e=>V(e)&&"body"!==P(e)),a=null;const r="fixed"===ne(e).position;let i=r?ce(e):e;for(;V(i)&&!ie(i);){const t=ne(i),o=se(i);o||"fixed"!==t.position||(a=null),(r?!o&&!a:!o&&"static"===t.position&&a&&ye.has(a.position)||Y(i)&&!o&&ke(e,i))?s=s.filter(e=>e!==i):a=t,i=ce(i)}return t.set(e,s),s}(t,this._c):[].concat(o),s],i=r[0],n=r.reduce((e,o)=>{const s=ze(t,o,a);return e.top=p(s.top,e.top),e.right=u(s.right,e.right),e.bottom=u(s.bottom,e.bottom),e.left=p(s.left,e.left),e},ze(t,i,a));return{width:n.right-n.left,height:n.bottom-n.top,x:n.left,y:n.top}},getOffsetParent:Ee,getElementRects:async function(e){const t=this.getOffsetParent||Ee,o=this.getDimensions,s=await o(e.floating);return{reference:Se(e.reference,await t(e.floating),e.strategy),floating:{x:0,y:0,width:s.width,height:s.height}}},getClientRects:function(e){return Array.from(e.getClientRects())},getDimensions:function(e){const{width:t,height:o}=pe(e);return{width:t,height:o}},getScale:me,isElement:V,isRTL:function(e){return"rtl"===ne(e).direction}};function Ce(e,t){return e.x===t.x&&e.y===t.y&&e.width===t.width&&e.height===t.height}function He(e,t,o,s){void 0===s&&(s={});const{ancestorScroll:a=!0,ancestorResize:r=!0,elementResize:i="function"==typeof ResizeObserver,layoutShift:n="function"==typeof IntersectionObserver,animationFrame:l=!1}=s,c=be(e),d=a||r?[...c?he(c):[],...he(t)]:[];d.forEach(e=>{a&&e.addEventListener("scroll",o,{passive:!0}),r&&e.addEventListener("resize",o)});const h=c&&n?function(e,t){let o,s=null;const a=O(e);function r(){var e;clearTimeout(o),null==(e=s)||e.disconnect(),s=null}return function i(n,l){void 0===n&&(n=!1),void 0===l&&(l=1),r();const c=e.getBoundingClientRect(),{left:d,top:h,width:b,height:f}=c;if(n||t(),!b||!f)return;const g={rootMargin:-m(h)+"px "+-m(a.clientWidth-(d+b))+"px "+-m(a.clientHeight-(h+f))+"px "+-m(d)+"px",threshold:p(0,u(1,l))||1};let v=!0;function x(t){const s=t[0].intersectionRatio;if(s!==l){if(!v)return i();s?i(!1,s):o=setTimeout(()=>{i(!1,1e-7)},1e3)}1!==s||Ce(c,e.getBoundingClientRect())||i(),v=!1}try{s=new IntersectionObserver(x,{...g,root:a.ownerDocument})}catch(e){s=new IntersectionObserver(x,g)}s.observe(e)}(!0),r}(c,o):null;let b,f=-1,g=null;i&&(g=new ResizeObserver(e=>{let[s]=e;s&&s.target===c&&g&&(g.unobserve(t),cancelAnimationFrame(f),f=requestAnimationFrame(()=>{var e;null==(e=g)||e.observe(t)})),o()}),c&&!l&&g.observe(c),g.observe(t));let v=l?ve(e):null;return l&&function t(){const s=ve(e);v&&!Ce(v,s)&&o();v=s,b=requestAnimationFrame(t)}(),o(),()=>{var e;d.forEach(e=>{a&&e.removeEventListener("scroll",o),r&&e.removeEventListener("resize",o)}),null==h||h(),null==(e=g)||e.disconnect(),g=null,l&&cancelAnimationFrame(b)}}const Re=function(e){return void 0===e&&(e=0),{name:"offset",options:e,async fn(t){var o,s;const{x:a,y:r,placement:i,middlewareData:n}=t,l=await async function(e,t){const{placement:o,platform:s,elements:a}=e,r=await(null==s.isRTL?void 0:s.isRTL(a.floating)),i=y(o),n=z(o),l="y"===B(o),c=I.has(i)?-1:1,d=r&&l?-1:1,h=w(t,e);let{mainAxis:u,crossAxis:p,alignmentAxis:b}="number"==typeof h?{mainAxis:h,crossAxis:0,alignmentAxis:null}:{mainAxis:h.mainAxis||0,crossAxis:h.crossAxis||0,alignmentAxis:h.alignmentAxis};return n&&"number"==typeof b&&(p="end"===n?-1*b:b),l?{x:p*d,y:u*c}:{x:u*c,y:p*d}}(t,e);return i===(null==(o=n.offset)?void 0:o.placement)&&null!=(s=n.arrow)&&s.alignmentOffset?{}:{x:a+l.x,y:r+l.y,data:{...l,placement:i}}}}},Le=function(e){return void 0===e&&(e={}),{name:"autoPlacement",options:e,async fn(t){var o,s,a;const{rects:r,middlewareData:i,placement:n,platform:l,elements:c}=t,{crossAxis:d=!1,alignment:u,allowedPlacements:p=h,autoAlignment:b=!0,...m}=w(e,t),f=void 0!==u||p===h?function(e,t,o){return(e?[...o.filter(t=>z(t)===e),...o.filter(t=>z(t)!==e)]:o.filter(e=>y(e)===e)).filter(o=>!e||z(o)===e||!!t&&C(o)!==o)}(u||null,b,p):p,g=await D(t,m),v=(null==(o=i.autoPlacement)?void 0:o.index)||0,x=f[v];if(null==x)return{};const k=T(x,r,await(null==l.isRTL?void 0:l.isRTL(c.floating)));if(n!==x)return{reset:{placement:f[0]}};const S=[g[y(x)],g[k[0]],g[k[1]]],A=[...(null==(s=i.autoPlacement)?void 0:s.overflows)||[],{placement:x,overflows:S}],B=f[v+1];if(B)return{data:{index:v+1,overflows:A},reset:{placement:B}};const E=A.map(e=>{const t=z(e.placement);return[e.placement,t&&d?e.overflows.slice(0,2).reduce((e,t)=>e+t,0):e.overflows[0],e.overflows]}).sort((e,t)=>e[1]-t[1]),H=E.filter(e=>e[2].slice(0,z(e[0])?2:3).every(e=>e<=0)),R=(null==(a=H[0])?void 0:a[0])||E[0][0];return R!==n?{data:{index:v+1,overflows:A},reset:{placement:R}}:{}}}},Fe=function(e){return void 0===e&&(e={}),{name:"shift",options:e,async fn(t){const{x:o,y:s,placement:a}=t,{mainAxis:r=!0,crossAxis:i=!1,limiter:n={fn:e=>{let{x:t,y:o}=e;return{x:t,y:o}}},...l}=w(e,t),c={x:o,y:s},d=await D(t,l),h=B(y(a)),u=k(h);let p=c[u],b=c[h];if(r){const e="y"===u?"bottom":"right";p=x(p+d["y"===u?"top":"left"],p,p-d[e])}if(i){const e="y"===h?"bottom":"right";b=x(b+d["y"===h?"top":"left"],b,b-d[e])}const m=n.fn({...t,[u]:p,[h]:b});return{...m,data:{x:m.x-o,y:m.y-s,enabled:{[u]:r,[h]:i}}}}}},qe=function(e){return void 0===e&&(e={}),{name:"flip",options:e,async fn(t){var o,s;const{placement:a,middlewareData:r,rects:i,initialPlacement:n,platform:l,elements:c}=t,{mainAxis:d=!0,crossAxis:h=!0,fallbackPlacements:u,fallbackStrategy:p="bestFit",fallbackAxisSideDirection:b="none",flipAlignment:m=!0,...f}=w(e,t);if(null!=(o=r.arrow)&&o.alignmentOffset)return{};const g=y(a),v=B(n),x=y(n)===n,z=await(null==l.isRTL?void 0:l.isRTL(c.floating)),k=u||(x||!m?[M(n)]:function(e){const t=M(e);return[C(e),t,C(t)]}(n)),S="none"!==b;!u&&S&&k.push(...q(n,m,b,z));const A=[n,...k],E=await D(t,f),H=[];let R=(null==(s=r.flip)?void 0:s.overflows)||[];if(d&&H.push(E[g]),h){const e=T(a,i,z);H.push(E[e[0]],E[e[1]])}if(R=[...R,{placement:a,overflows:H}],!H.every(e=>e<=0)){var L,F;const e=((null==(L=r.flip)?void 0:L.index)||0)+1,t=A[e];if(t){if(!("alignment"===h&&v!==B(t))||R.every(e=>B(e.placement)!==v||e.overflows[0]>0))return{data:{index:e,overflows:R},reset:{placement:t}}}let o=null==(F=R.filter(e=>e.overflows[0]<=0).sort((e,t)=>e.overflows[1]-t.overflows[1])[0])?void 0:F.placement;if(!o)switch(p){case"bestFit":{var N;const e=null==(N=R.filter(e=>{if(S){const t=B(e.placement);return t===v||"y"===t}return!0}).map(e=>[e.placement,e.overflows.filter(e=>e>0).reduce((e,t)=>e+t,0)]).sort((e,t)=>e[1]-t[1])[0])?void 0:N[0];e&&(o=e);break}case"initialPlacement":o=n}if(a!==o)return{reset:{placement:o}}}return{}}}},Me=(e,t,o)=>{const s=new Map,a={platform:Te,...o},r={...a.platform,_c:s};return(async(e,t,o)=>{const{placement:s="bottom",strategy:a="absolute",middleware:r=[],platform:i}=o,n=r.filter(Boolean),l=await(null==i.isRTL?void 0:i.isRTL(t));let c=await i.getElementRects({reference:e,floating:t,strategy:a}),{x:d,y:h}=_(c,s,l),u=s,p={},b=0;for(let o=0;o<n.length;o++){const{name:r,fn:m}=n[o],{x:f,y:g,data:v,reset:x}=await m({x:d,y:h,initialPlacement:s,placement:u,strategy:a,middlewareData:p,rects:c,platform:i,elements:{reference:e,floating:t}});d=null!=f?f:d,h=null!=g?g:h,p={...p,[r]:{...p[r],...v}},x&&b<=50&&(b++,"object"==typeof x&&(x.placement&&(u=x.placement),x.rects&&(c=!0===x.rects?await i.getElementRects({reference:e,floating:t,strategy:a}):x.rects),({x:d,y:h}=_(c,u,l))),o=-1)}return{x:d,y:h,placement:u,strategy:a,middlewareData:p}})(e,t,{...a,platform:r})};class Ne{static isMousePressed=!1;static isMousePressHandlerInitialized=!1;static setupMousePressChecker(){if(!Ne.isMousePressHandlerInitialized&&window&&window.addEventListener){Ne.isMousePressHandlerInitialized=!0,Ne._mousePressedTimeout||(Ne._mousePressedTimeout=null);const e=e=>{const t="mousedown"===e.type;t?(null!==Ne._mousePressedTimeout&&(clearTimeout(Ne._mousePressedTimeout),Ne._mousePressedTimeout=null),Ne.isMousePressed||(Ne.isMousePressed=!0)):Ne.isMousePressed&&!t&&(Ne._mousePressedTimeout=setTimeout(()=>{Ne.isMousePressed=!1,Ne._mousePressedTimeout=null},0))};window.addEventListener("mousedown",e),window.addEventListener("mouseup",e)}}constructor(e,t){this.element=e,this.behavior=t,this.focusHandler=null,this.clickHandler=null,this.keyDownHandler=null,this.configureTrial=0,this.eventPrefix=void 0,this.id=void 0,this.showing=!1,this.strategy=void 0}mirrorSize(){if(this.element.bibSizer&&this.element.matchWidth){const e=window.getComputedStyle(this.element.bibSizer),t=this.element.bib.shadowRoot.querySelector(".container");"0px"!==e.width&&(t.style.width=e.width),"0px"!==e.height&&(t.style.height=e.height),t.style.maxWidth=e.maxWidth,t.style.maxHeight=e.maxHeight}}getPositioningStrategy(){const e=this.element.bib.mobileFullscreenBreakpoint||this.element.floaterConfig?.fullscreenBreakpoint;switch(this.behavior){case"tooltip":return"floating";case"dialog":case"drawer":if(e){const t=window.matchMedia(`(max-width: ${e})`).matches;this.element.expanded=t}return this.element.nested?"cover":"fullscreen";case"dropdown":case void 0:case null:if(e){if(window.matchMedia(`(max-width: ${e})`).matches)return"fullscreen"}return"floating";default:return this.behavior}}position(){const e=this.getPositioningStrategy();if(this.configureBibStrategy(e),"floating"===e){this.mirrorSize();const e=[Re(this.element.floaterConfig?.offset||0),...this.element.floaterConfig?.shift?[Fe()]:[],...this.element.floaterConfig?.flip?[qe()]:[],...this.element.floaterConfig?.autoPlacement?[Le()]:[]];Me(this.element.trigger,this.element.bib,{strategy:this.element.floaterConfig?.strategy||"fixed",placement:this.element.floaterConfig?.placement,middleware:e||[]}).then(({x:e,y:t})=>{Object.assign(this.element.bib.style,{left:`${e}px`,top:`${t}px`})})}else"cover"===e&&Me(this.element.parentNode,this.element.bib,{placement:"bottom-start"}).then(({x:e,y:t})=>{Object.assign(this.element.bib.style,{left:`${e}px`,top:t-this.element.parentNode.offsetHeight+"px",width:`${this.element.parentNode.offsetWidth}px`,height:`${this.element.parentNode.offsetHeight}px`})})}lockScroll(e=!0){e?(document.body.style.overflow="hidden",this.element.bib.style.transform=`translateY(${window?.visualViewport?.offsetTop}px)`):document.body.style.overflow=""}configureBibStrategy(e){if("fullscreen"===e){this.element.isBibFullscreen=!0,this.element.bib.setAttribute("isfullscreen",""),this.element.bib.style.position="fixed",this.element.bib.style.top="0px",this.element.bib.style.left="0px",this.element.bib.style.width="",this.element.bib.style.height="",this.element.style.contain="";const t=this.element.bib.shadowRoot.querySelector(".container");t?(t.style.width="",t.style.height="",t.style.maxWidth="",t.style.maxHeight=`${window?.visualViewport?.height}px`,this.configureTrial=0):this.configureTrial<10&&(this.configureTrial+=1,setTimeout(()=>{this.configureBibStrategy(e)},0)),this.element.isPopoverVisible&&this.lockScroll(!0)}else this.element.bib.style.position="",this.element.bib.removeAttribute("isfullscreen"),this.element.isBibFullscreen=!1,this.element.style.contain="layout";const t=this.strategy&&this.strategy!==e;if(this.strategy=e,t){const t=new CustomEvent(this.eventPrefix?`${this.eventPrefix}-strategy-change`:"strategy-change",{detail:{value:e},composed:!0});this.element.dispatchEvent(t)}}updateState(){if(!this.element.isPopoverVisible){this.cleanupHideHandlers();try{this.element.cleanup?.()}catch(e){}}}handleFocusLoss(){if(Ne.isMousePressed)return;if(this.element.noHideOnThisFocusLoss||this.element.hasAttribute("noHideOnThisFocusLoss"))return;const{activeElement:e}=document;this.element.contains(e)||this.element.bib?.contains(e)||this.element.bib.hasAttribute("isfullscreen")||this.hideBib("keydown")}setupHideHandlers(){this.focusHandler=()=>this.handleFocusLoss(),this.clickHandler=e=>{if(!e.composedPath().includes(this.element.trigger)&&!e.composedPath().includes(this.element.bib)||this.element.bib.backdrop&&e.composedPath().includes(this.element.bib.backdrop)){const e=document.expandedAuroFormkitDropdown||document.expandedAuroFloater;e&&e.element.isPopoverVisible?(e.hideBib(),document.expandedAuroFormkitDropdown=null,document.expandedAuroFloater=this):this.hideBib("click")}},this.keyDownHandler=e=>{if("Escape"===e.key&&this.element.isPopoverVisible){const e=document.expandedAuroFormkitDropdown||document.expandedAuroFloater;if(e&&e!==this&&e.element.isPopoverVisible)return;this.hideBib("keydown")}},"drawer"!==this.behavior&&"dialog"!==this.behavior&&document.addEventListener("focusin",this.focusHandler),document.addEventListener("keydown",this.keyDownHandler),setTimeout(()=>{window.addEventListener("click",this.clickHandler)},0)}cleanupHideHandlers(){this.focusHandler&&(document.removeEventListener("focusin",this.focusHandler),this.focusHandler=null),this.clickHandler&&(window.removeEventListener("click",this.clickHandler),this.clickHandler=null),this.keyDownHandler&&(document.removeEventListener("keydown",this.keyDownHandler),this.keyDownHandler=null)}handleUpdate(e){e.has("isPopoverVisible")&&this.updateState()}updateCurrentExpandedDropdown(){const e=document.expandedAuroFormkitDropdown||document.expandedAuroFloater;e&&e!==this&&e.element.isPopoverVisible&&document.expandedAuroFloater.eventPrefix===this.eventPrefix&&document.expandedAuroFloater.hideBib(),document.expandedAuroFloater=this}showBib(){this.element.disabled||this.showing||(this.updateCurrentExpandedDropdown(),this.element.triggerChevron?.setAttribute("data-expanded",!0),this.showing||(this.element.modal||this.setupHideHandlers(),this.showing=!0,this.element.isPopoverVisible=!0,this.position(),this.dispatchEventDropdownToggle()),this.element.cleanup=He(this.element.trigger||this.element.parentNode,this.element.bib,()=>{this.position()}))}hideBib(e="unknown"){this.element.disabled||this.element.noToggle||(this.lockScroll(!1),this.element.triggerChevron?.removeAttribute("data-expanded"),this.element.isPopoverVisible&&(this.element.isPopoverVisible=!1),this.showing&&(this.cleanupHideHandlers(),this.showing=!1,this.dispatchEventDropdownToggle(e))),document.expandedAuroFloater=null}dispatchEventDropdownToggle(e){const t=new CustomEvent(this.eventPrefix?`${this.eventPrefix}-toggled`:"toggled",{detail:{expanded:this.showing,eventType:e||"unknown"},composed:!0});this.element.dispatchEvent(t)}handleClick(){this.element.isPopoverVisible?this.hideBib("click"):this.showBib();const e=new CustomEvent(this.eventPrefix?`${this.eventPrefix}-triggerClick`:"triggerClick",{composed:!0,detail:{expanded:this.element.isPopoverVisible}});this.element.dispatchEvent(e)}handleEvent(e){if(!this.element.disableEventShow)switch(e.type){case"keydown":const t=e.composedPath()[0];"Enter"!==e.key&&(" "!==e.key||t&&"INPUT"===t.tagName)||(e.preventDefault(),this.handleClick());break;case"mouseenter":this.element.hoverToggle&&this.showBib();break;case"mouseleave":this.element.hoverToggle&&this.hideBib("mouseleave");break;case"focus":this.element.focusShow&&this.showBib();break;case"blur":setTimeout(()=>this.handleFocusLoss(),0);break;case"click":document.activeElement===document.body&&e.currentTarget.focus(),this.handleClick()}}handleTriggerTabIndex(){const e=this.element.querySelectorAll('[slot="trigger"]')[0];if(!e)return;const t=e.tagName.toLowerCase();["a","button",'input:not([type="hidden"])',"select","textarea",'[tabindex]:not([tabindex="-1"])',"auro-button","auro-input","auro-hyperlink"].forEach(o=>{t!==o?e.querySelector(o)&&(this.element.tabIndex=-1):this.element.tabIndex=-1})}regenerateBibId(){this.id=this.element.getAttribute("id"),this.id||(this.id=window.crypto.randomUUID(),this.element.setAttribute("id",this.id)),this.element.bib.setAttribute("id",`${this.id}-floater-bib`)}configure(e,t){Ne.setupMousePressChecker(),this.eventPrefix=t,this.element!==e&&(this.element=e),this.behavior!==this.element.behavior&&(this.behavior=this.element.behavior),this.element.trigger&&this.disconnect(),this.element.trigger=this.element.triggerElement||this.element.shadowRoot.querySelector("#trigger")||this.element.trigger,this.element.bib=this.element.shadowRoot.querySelector("#bib")||this.element.bib,this.element.bibSizer=this.element.shadowRoot.querySelector("#bibSizer"),this.element.triggerChevron=this.element.shadowRoot.querySelector("#showStateIcon"),this.element.floaterConfig&&(this.element.hoverToggle=this.element.floaterConfig.hoverToggle),this.regenerateBibId(),this.handleTriggerTabIndex(),this.handleEvent=this.handleEvent.bind(this),this.element.trigger&&(this.element.trigger.addEventListener("keydown",this.handleEvent),this.element.trigger.addEventListener("click",this.handleEvent),this.element.trigger.addEventListener("mouseenter",this.handleEvent),this.element.trigger.addEventListener("mouseleave",this.handleEvent),this.element.trigger.addEventListener("focus",this.handleEvent),this.element.trigger.addEventListener("blur",this.handleEvent))}disconnect(){this.cleanupHideHandlers(),this.element&&(this.element.cleanup?.(),this.element.bib&&this.element.shadowRoot.append(this.element.bib),this.element?.trigger&&(this.element.trigger.removeEventListener("keydown",this.handleEvent),this.element.trigger.removeEventListener("click",this.handleEvent),this.element.trigger.removeEventListener("mouseenter",this.handleEvent),this.element.trigger.removeEventListener("mouseleave",this.handleEvent),this.element.trigger.removeEventListener("focus",this.handleEvent),this.element.trigger.removeEventListener("blur",this.handleEvent)))}}var _e=e`:host([onbackdrop]) dialog.container::backdrop{background:var(--ds-auro-floater-backdrop-modal-background-color)}::slotted(*){background:var(--ds-auro-floater-container-background-color);color:var(--ds-auro-floater-container-text-color)}
|
|
2
|
-
`,
|
|
1
|
+
import{css as e,LitElement as t,html as o}from"lit";import{unsafeStatic as s,literal as a,html as r}from"lit/static-html.js";import{classMap as i}from"lit/directives/class-map.js";import{ifDefined as n}from"lit/directives/if-defined.js";class l{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,o=(t,s=t&&t.closest(e))=>t&&t!==document&&t!==window?s||o(t.getRootNode().host):null){return o(t)}handleComponentTagRename(e,t){const o=t.toLowerCase();e.tagName.toLowerCase()!==o&&e.setAttribute(o,!0)}elementMatch(e,t){const o=t.toLowerCase();return e.tagName.toLowerCase()===o||e.hasAttribute(o)}getSlotText(e,t){const o=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return(o?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}class c{generateElementName(e,t){let o=e;return o+="-",o+=t.replace(/[.]/g,"_"),o}generateTag(e,t,o){const r=this.generateElementName(e,t),i=a`${s(r)}`;return customElements.get(r)||customElements.define(r,class extends o{}),i}}const d=["start","end"],h=["top","right","bottom","left"].reduce((e,t)=>e.concat(t,t+"-"+d[0],t+"-"+d[1]),[]),u=Math.min,p=Math.max,b=Math.round,m=Math.floor,f=e=>({x:e,y:e}),g={left:"right",right:"left",bottom:"top",top:"bottom"},v={start:"end",end:"start"};function x(e,t,o){return p(e,u(t,o))}function w(e,t){return"function"==typeof e?e(t):e}function y(e){return e.split("-")[0]}function z(e){return e.split("-")[1]}function k(e){return"x"===e?"y":"x"}function S(e){return"y"===e?"height":"width"}const A=new Set(["top","bottom"]);function B(e){return A.has(y(e))?"y":"x"}function E(e){return k(B(e))}function T(e,t,o){void 0===o&&(o=!1);const s=z(e),a=E(e),r=S(a);let i="x"===a?s===(o?"end":"start")?"right":"left":"start"===s?"bottom":"top";return t.reference[r]>t.floating[r]&&(i=M(i)),[i,M(i)]}function C(e){return e.replace(/start|end/g,e=>v[e])}const H=["left","right"],R=["right","left"],L=["top","bottom"],F=["bottom","top"];function q(e,t,o,s){const a=z(e);let r=function(e,t,o){switch(e){case"top":case"bottom":return o?t?R:H:t?H:R;case"left":case"right":return t?L:F;default:return[]}}(y(e),"start"===o,s);return a&&(r=r.map(e=>e+"-"+a),t&&(r=r.concat(r.map(C)))),r}function M(e){return e.replace(/left|right|bottom|top/g,e=>g[e])}function D(e){const{x:t,y:o,width:s,height:a}=e;return{width:s,height:a,top:o,left:t,right:t+s,bottom:o+a,x:t,y:o}}function N(e,t,o){let{reference:s,floating:a}=e;const r=B(t),i=E(t),n=S(i),l=y(t),c="y"===r,d=s.x+s.width/2-a.width/2,h=s.y+s.height/2-a.height/2,u=s[n]/2-a[n]/2;let p;switch(l){case"top":p={x:d,y:s.y-a.height};break;case"bottom":p={x:d,y:s.y+s.height};break;case"right":p={x:s.x+s.width,y:h};break;case"left":p={x:s.x-a.width,y:h};break;default:p={x:s.x,y:s.y}}switch(z(t)){case"start":p[i]-=u*(o&&c?-1:1);break;case"end":p[i]+=u*(o&&c?-1:1)}return p}async function _(e,t){var o;void 0===t&&(t={});const{x:s,y:a,platform:r,rects:i,elements:n,strategy:l}=e,{boundary:c="clippingAncestors",rootBoundary:d="viewport",elementContext:h="floating",altBoundary:u=!1,padding:p=0}=w(t,e),b=function(e){return"number"!=typeof e?function(e){return{top:0,right:0,bottom:0,left:0,...e}}(e):{top:e,right:e,bottom:e,left:e}}(p),m=n[u?"floating"===h?"reference":"floating":h],f=D(await r.getClippingRect({element:null==(o=await(null==r.isElement?void 0:r.isElement(m)))||o?m:m.contextElement||await(null==r.getDocumentElement?void 0:r.getDocumentElement(n.floating)),boundary:c,rootBoundary:d,strategy:l})),g="floating"===h?{x:s,y:a,width:i.floating.width,height:i.floating.height}:i.reference,v=await(null==r.getOffsetParent?void 0:r.getOffsetParent(n.floating)),x=await(null==r.isElement?void 0:r.isElement(v))&&await(null==r.getScale?void 0:r.getScale(v))||{x:1,y:1},y=D(r.convertOffsetParentRelativeRectToViewportRelativeRect?await r.convertOffsetParentRelativeRectToViewportRelativeRect({elements:n,rect:g,offsetParent:v,strategy:l}):g);return{top:(f.top-y.top+b.top)/x.y,bottom:(y.bottom-f.bottom+b.bottom)/x.y,left:(f.left-y.left+b.left)/x.x,right:(y.right-f.right+b.right)/x.x}}const I=new Set(["left","top"]);function U(){return"undefined"!=typeof window}function P(e){return W(e)?(e.nodeName||"").toLowerCase():"#document"}function $(e){var t;return(null==e||null==(t=e.ownerDocument)?void 0:t.defaultView)||window}function O(e){var t;return null==(t=(W(e)?e.ownerDocument:e.document)||window.document)?void 0:t.documentElement}function W(e){return!!U()&&(e instanceof Node||e instanceof $(e).Node)}function V(e){return!!U()&&(e instanceof Element||e instanceof $(e).Element)}function X(e){return!!U()&&(e instanceof HTMLElement||e instanceof $(e).HTMLElement)}function j(e){return!(!U()||"undefined"==typeof ShadowRoot)&&(e instanceof ShadowRoot||e instanceof $(e).ShadowRoot)}const G=new Set(["inline","contents"]);function Y(e){const{overflow:t,overflowX:o,overflowY:s,display:a}=ne(e);return/auto|scroll|overlay|hidden|clip/.test(t+s+o)&&!G.has(a)}const Z=new Set(["table","td","th"]);function K(e){return Z.has(P(e))}const J=[":popover-open",":modal"];function Q(e){return J.some(t=>{try{return e.matches(t)}catch(e){return!1}})}const ee=["transform","translate","scale","rotate","perspective"],te=["transform","translate","scale","rotate","perspective","filter"],oe=["paint","layout","strict","content"];function se(e){const t=ae(),o=V(e)?ne(e):e;return ee.some(e=>!!o[e]&&"none"!==o[e])||!!o.containerType&&"normal"!==o.containerType||!t&&!!o.backdropFilter&&"none"!==o.backdropFilter||!t&&!!o.filter&&"none"!==o.filter||te.some(e=>(o.willChange||"").includes(e))||oe.some(e=>(o.contain||"").includes(e))}function ae(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}const re=new Set(["html","body","#document"]);function ie(e){return re.has(P(e))}function ne(e){return $(e).getComputedStyle(e)}function le(e){return V(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.scrollX,scrollTop:e.scrollY}}function ce(e){if("html"===P(e))return e;const t=e.assignedSlot||e.parentNode||j(e)&&e.host||O(e);return j(t)?t.host:t}function de(e){const t=ce(e);return ie(t)?e.ownerDocument?e.ownerDocument.body:e.body:X(t)&&Y(t)?t:de(t)}function he(e,t,o){var s;void 0===t&&(t=[]),void 0===o&&(o=!0);const a=de(e),r=a===(null==(s=e.ownerDocument)?void 0:s.body),i=$(a);if(r){const e=ue(i);return t.concat(i,i.visualViewport||[],Y(a)?a:[],e&&o?he(e):[])}return t.concat(a,he(a,[],o))}function ue(e){return e.parent&&Object.getPrototypeOf(e.parent)?e.frameElement:null}function pe(e){const t=ne(e);let o=parseFloat(t.width)||0,s=parseFloat(t.height)||0;const a=X(e),r=a?e.offsetWidth:o,i=a?e.offsetHeight:s,n=b(o)!==r||b(s)!==i;return n&&(o=r,s=i),{width:o,height:s,$:n}}function be(e){return V(e)?e:e.contextElement}function me(e){const t=be(e);if(!X(t))return f(1);const o=t.getBoundingClientRect(),{width:s,height:a,$:r}=pe(t);let i=(r?b(o.width):o.width)/s,n=(r?b(o.height):o.height)/a;return i&&Number.isFinite(i)||(i=1),n&&Number.isFinite(n)||(n=1),{x:i,y:n}}const fe=f(0);function ge(e){const t=$(e);return ae()&&t.visualViewport?{x:t.visualViewport.offsetLeft,y:t.visualViewport.offsetTop}:fe}function ve(e,t,o,s){void 0===t&&(t=!1),void 0===o&&(o=!1);const a=e.getBoundingClientRect(),r=be(e);let i=f(1);t&&(s?V(s)&&(i=me(s)):i=me(e));const n=function(e,t,o){return void 0===t&&(t=!1),!(!o||t&&o!==$(e))&&t}(r,o,s)?ge(r):f(0);let l=(a.left+n.x)/i.x,c=(a.top+n.y)/i.y,d=a.width/i.x,h=a.height/i.y;if(r){const e=$(r),t=s&&V(s)?$(s):s;let o=e,a=ue(o);for(;a&&s&&t!==o;){const e=me(a),t=a.getBoundingClientRect(),s=ne(a),r=t.left+(a.clientLeft+parseFloat(s.paddingLeft))*e.x,i=t.top+(a.clientTop+parseFloat(s.paddingTop))*e.y;l*=e.x,c*=e.y,d*=e.x,h*=e.y,l+=r,c+=i,o=$(a),a=ue(o)}}return D({width:d,height:h,x:l,y:c})}function xe(e,t){const o=le(e).scrollLeft;return t?t.left+o:ve(O(e)).left+o}function we(e,t){const o=e.getBoundingClientRect();return{x:o.left+t.scrollLeft-xe(e,o),y:o.top+t.scrollTop}}const ye=new Set(["absolute","fixed"]);function ze(e,t,o){let s;if("viewport"===t)s=function(e,t){const o=$(e),s=O(e),a=o.visualViewport;let r=s.clientWidth,i=s.clientHeight,n=0,l=0;if(a){r=a.width,i=a.height;const e=ae();(!e||e&&"fixed"===t)&&(n=a.offsetLeft,l=a.offsetTop)}const c=xe(s);if(c<=0){const e=s.ownerDocument,t=e.body,o=getComputedStyle(t),a="CSS1Compat"===e.compatMode&&parseFloat(o.marginLeft)+parseFloat(o.marginRight)||0,i=Math.abs(s.clientWidth-t.clientWidth-a);i<=25&&(r-=i)}else c<=25&&(r+=c);return{width:r,height:i,x:n,y:l}}(e,o);else if("document"===t)s=function(e){const t=O(e),o=le(e),s=e.ownerDocument.body,a=p(t.scrollWidth,t.clientWidth,s.scrollWidth,s.clientWidth),r=p(t.scrollHeight,t.clientHeight,s.scrollHeight,s.clientHeight);let i=-o.scrollLeft+xe(e);const n=-o.scrollTop;return"rtl"===ne(s).direction&&(i+=p(t.clientWidth,s.clientWidth)-a),{width:a,height:r,x:i,y:n}}(O(e));else if(V(t))s=function(e,t){const o=ve(e,!0,"fixed"===t),s=o.top+e.clientTop,a=o.left+e.clientLeft,r=X(e)?me(e):f(1);return{width:e.clientWidth*r.x,height:e.clientHeight*r.y,x:a*r.x,y:s*r.y}}(t,o);else{const o=ge(e);s={x:t.x-o.x,y:t.y-o.y,width:t.width,height:t.height}}return D(s)}function ke(e,t){const o=ce(e);return!(o===t||!V(o)||ie(o))&&("fixed"===ne(o).position||ke(o,t))}function Se(e,t,o){const s=X(t),a=O(t),r="fixed"===o,i=ve(e,!0,r,t);let n={scrollLeft:0,scrollTop:0};const l=f(0);function c(){l.x=xe(a)}if(s||!s&&!r)if(("body"!==P(t)||Y(a))&&(n=le(t)),s){const e=ve(t,!0,r,t);l.x=e.x+t.clientLeft,l.y=e.y+t.clientTop}else a&&c();r&&!s&&a&&c();const d=!a||s||r?f(0):we(a,n);return{x:i.left+n.scrollLeft-l.x-d.x,y:i.top+n.scrollTop-l.y-d.y,width:i.width,height:i.height}}function Ae(e){return"static"===ne(e).position}function Be(e,t){if(!X(e)||"fixed"===ne(e).position)return null;if(t)return t(e);let o=e.offsetParent;return O(e)===o&&(o=o.ownerDocument.body),o}function Ee(e,t){const o=$(e);if(Q(e))return o;if(!X(e)){let t=ce(e);for(;t&&!ie(t);){if(V(t)&&!Ae(t))return t;t=ce(t)}return o}let s=Be(e,t);for(;s&&K(s)&&Ae(s);)s=Be(s,t);return s&&ie(s)&&Ae(s)&&!se(s)?o:s||function(e){let t=ce(e);for(;X(t)&&!ie(t);){if(se(t))return t;if(Q(t))return null;t=ce(t)}return null}(e)||o}const Te={convertOffsetParentRelativeRectToViewportRelativeRect:function(e){let{elements:t,rect:o,offsetParent:s,strategy:a}=e;const r="fixed"===a,i=O(s),n=!!t&&Q(t.floating);if(s===i||n&&r)return o;let l={scrollLeft:0,scrollTop:0},c=f(1);const d=f(0),h=X(s);if((h||!h&&!r)&&(("body"!==P(s)||Y(i))&&(l=le(s)),X(s))){const e=ve(s);c=me(s),d.x=e.x+s.clientLeft,d.y=e.y+s.clientTop}const u=!i||h||r?f(0):we(i,l);return{width:o.width*c.x,height:o.height*c.y,x:o.x*c.x-l.scrollLeft*c.x+d.x+u.x,y:o.y*c.y-l.scrollTop*c.y+d.y+u.y}},getDocumentElement:O,getClippingRect:function(e){let{element:t,boundary:o,rootBoundary:s,strategy:a}=e;const r=[..."clippingAncestors"===o?Q(t)?[]:function(e,t){const o=t.get(e);if(o)return o;let s=he(e,[],!1).filter(e=>V(e)&&"body"!==P(e)),a=null;const r="fixed"===ne(e).position;let i=r?ce(e):e;for(;V(i)&&!ie(i);){const t=ne(i),o=se(i);o||"fixed"!==t.position||(a=null),(r?!o&&!a:!o&&"static"===t.position&&a&&ye.has(a.position)||Y(i)&&!o&&ke(e,i))?s=s.filter(e=>e!==i):a=t,i=ce(i)}return t.set(e,s),s}(t,this._c):[].concat(o),s],i=r[0],n=r.reduce((e,o)=>{const s=ze(t,o,a);return e.top=p(s.top,e.top),e.right=u(s.right,e.right),e.bottom=u(s.bottom,e.bottom),e.left=p(s.left,e.left),e},ze(t,i,a));return{width:n.right-n.left,height:n.bottom-n.top,x:n.left,y:n.top}},getOffsetParent:Ee,getElementRects:async function(e){const t=this.getOffsetParent||Ee,o=this.getDimensions,s=await o(e.floating);return{reference:Se(e.reference,await t(e.floating),e.strategy),floating:{x:0,y:0,width:s.width,height:s.height}}},getClientRects:function(e){return Array.from(e.getClientRects())},getDimensions:function(e){const{width:t,height:o}=pe(e);return{width:t,height:o}},getScale:me,isElement:V,isRTL:function(e){return"rtl"===ne(e).direction}};function Ce(e,t){return e.x===t.x&&e.y===t.y&&e.width===t.width&&e.height===t.height}function He(e,t,o,s){void 0===s&&(s={});const{ancestorScroll:a=!0,ancestorResize:r=!0,elementResize:i="function"==typeof ResizeObserver,layoutShift:n="function"==typeof IntersectionObserver,animationFrame:l=!1}=s,c=be(e),d=a||r?[...c?he(c):[],...he(t)]:[];d.forEach(e=>{a&&e.addEventListener("scroll",o,{passive:!0}),r&&e.addEventListener("resize",o)});const h=c&&n?function(e,t){let o,s=null;const a=O(e);function r(){var e;clearTimeout(o),null==(e=s)||e.disconnect(),s=null}return function i(n,l){void 0===n&&(n=!1),void 0===l&&(l=1),r();const c=e.getBoundingClientRect(),{left:d,top:h,width:b,height:f}=c;if(n||t(),!b||!f)return;const g={rootMargin:-m(h)+"px "+-m(a.clientWidth-(d+b))+"px "+-m(a.clientHeight-(h+f))+"px "+-m(d)+"px",threshold:p(0,u(1,l))||1};let v=!0;function x(t){const s=t[0].intersectionRatio;if(s!==l){if(!v)return i();s?i(!1,s):o=setTimeout(()=>{i(!1,1e-7)},1e3)}1!==s||Ce(c,e.getBoundingClientRect())||i(),v=!1}try{s=new IntersectionObserver(x,{...g,root:a.ownerDocument})}catch(e){s=new IntersectionObserver(x,g)}s.observe(e)}(!0),r}(c,o):null;let b,f=-1,g=null;i&&(g=new ResizeObserver(e=>{let[s]=e;s&&s.target===c&&g&&(g.unobserve(t),cancelAnimationFrame(f),f=requestAnimationFrame(()=>{var e;null==(e=g)||e.observe(t)})),o()}),c&&!l&&g.observe(c),g.observe(t));let v=l?ve(e):null;return l&&function t(){const s=ve(e);v&&!Ce(v,s)&&o();v=s,b=requestAnimationFrame(t)}(),o(),()=>{var e;d.forEach(e=>{a&&e.removeEventListener("scroll",o),r&&e.removeEventListener("resize",o)}),null==h||h(),null==(e=g)||e.disconnect(),g=null,l&&cancelAnimationFrame(b)}}const Re=function(e){return void 0===e&&(e=0),{name:"offset",options:e,async fn(t){var o,s;const{x:a,y:r,placement:i,middlewareData:n}=t,l=await async function(e,t){const{placement:o,platform:s,elements:a}=e,r=await(null==s.isRTL?void 0:s.isRTL(a.floating)),i=y(o),n=z(o),l="y"===B(o),c=I.has(i)?-1:1,d=r&&l?-1:1,h=w(t,e);let{mainAxis:u,crossAxis:p,alignmentAxis:b}="number"==typeof h?{mainAxis:h,crossAxis:0,alignmentAxis:null}:{mainAxis:h.mainAxis||0,crossAxis:h.crossAxis||0,alignmentAxis:h.alignmentAxis};return n&&"number"==typeof b&&(p="end"===n?-1*b:b),l?{x:p*d,y:u*c}:{x:u*c,y:p*d}}(t,e);return i===(null==(o=n.offset)?void 0:o.placement)&&null!=(s=n.arrow)&&s.alignmentOffset?{}:{x:a+l.x,y:r+l.y,data:{...l,placement:i}}}}},Le=function(e){return void 0===e&&(e={}),{name:"autoPlacement",options:e,async fn(t){var o,s,a;const{rects:r,middlewareData:i,placement:n,platform:l,elements:c}=t,{crossAxis:d=!1,alignment:u,allowedPlacements:p=h,autoAlignment:b=!0,...m}=w(e,t),f=void 0!==u||p===h?function(e,t,o){return(e?[...o.filter(t=>z(t)===e),...o.filter(t=>z(t)!==e)]:o.filter(e=>y(e)===e)).filter(o=>!e||z(o)===e||!!t&&C(o)!==o)}(u||null,b,p):p,g=await _(t,m),v=(null==(o=i.autoPlacement)?void 0:o.index)||0,x=f[v];if(null==x)return{};const k=T(x,r,await(null==l.isRTL?void 0:l.isRTL(c.floating)));if(n!==x)return{reset:{placement:f[0]}};const S=[g[y(x)],g[k[0]],g[k[1]]],A=[...(null==(s=i.autoPlacement)?void 0:s.overflows)||[],{placement:x,overflows:S}],B=f[v+1];if(B)return{data:{index:v+1,overflows:A},reset:{placement:B}};const E=A.map(e=>{const t=z(e.placement);return[e.placement,t&&d?e.overflows.slice(0,2).reduce((e,t)=>e+t,0):e.overflows[0],e.overflows]}).sort((e,t)=>e[1]-t[1]),H=E.filter(e=>e[2].slice(0,z(e[0])?2:3).every(e=>e<=0)),R=(null==(a=H[0])?void 0:a[0])||E[0][0];return R!==n?{data:{index:v+1,overflows:A},reset:{placement:R}}:{}}}},Fe=function(e){return void 0===e&&(e={}),{name:"shift",options:e,async fn(t){const{x:o,y:s,placement:a}=t,{mainAxis:r=!0,crossAxis:i=!1,limiter:n={fn:e=>{let{x:t,y:o}=e;return{x:t,y:o}}},...l}=w(e,t),c={x:o,y:s},d=await _(t,l),h=B(y(a)),u=k(h);let p=c[u],b=c[h];if(r){const e="y"===u?"bottom":"right";p=x(p+d["y"===u?"top":"left"],p,p-d[e])}if(i){const e="y"===h?"bottom":"right";b=x(b+d["y"===h?"top":"left"],b,b-d[e])}const m=n.fn({...t,[u]:p,[h]:b});return{...m,data:{x:m.x-o,y:m.y-s,enabled:{[u]:r,[h]:i}}}}}},qe=function(e){return void 0===e&&(e={}),{name:"flip",options:e,async fn(t){var o,s;const{placement:a,middlewareData:r,rects:i,initialPlacement:n,platform:l,elements:c}=t,{mainAxis:d=!0,crossAxis:h=!0,fallbackPlacements:u,fallbackStrategy:p="bestFit",fallbackAxisSideDirection:b="none",flipAlignment:m=!0,...f}=w(e,t);if(null!=(o=r.arrow)&&o.alignmentOffset)return{};const g=y(a),v=B(n),x=y(n)===n,z=await(null==l.isRTL?void 0:l.isRTL(c.floating)),k=u||(x||!m?[M(n)]:function(e){const t=M(e);return[C(e),t,C(t)]}(n)),S="none"!==b;!u&&S&&k.push(...q(n,m,b,z));const A=[n,...k],E=await _(t,f),H=[];let R=(null==(s=r.flip)?void 0:s.overflows)||[];if(d&&H.push(E[g]),h){const e=T(a,i,z);H.push(E[e[0]],E[e[1]])}if(R=[...R,{placement:a,overflows:H}],!H.every(e=>e<=0)){var L,F;const e=((null==(L=r.flip)?void 0:L.index)||0)+1,t=A[e];if(t){if(!("alignment"===h&&v!==B(t))||R.every(e=>B(e.placement)!==v||e.overflows[0]>0))return{data:{index:e,overflows:R},reset:{placement:t}}}let o=null==(F=R.filter(e=>e.overflows[0]<=0).sort((e,t)=>e.overflows[1]-t.overflows[1])[0])?void 0:F.placement;if(!o)switch(p){case"bestFit":{var D;const e=null==(D=R.filter(e=>{if(S){const t=B(e.placement);return t===v||"y"===t}return!0}).map(e=>[e.placement,e.overflows.filter(e=>e>0).reduce((e,t)=>e+t,0)]).sort((e,t)=>e[1]-t[1])[0])?void 0:D[0];e&&(o=e);break}case"initialPlacement":o=n}if(a!==o)return{reset:{placement:o}}}return{}}}},Me=(e,t,o)=>{const s=new Map,a={platform:Te,...o},r={...a.platform,_c:s};return(async(e,t,o)=>{const{placement:s="bottom",strategy:a="absolute",middleware:r=[],platform:i}=o,n=r.filter(Boolean),l=await(null==i.isRTL?void 0:i.isRTL(t));let c=await i.getElementRects({reference:e,floating:t,strategy:a}),{x:d,y:h}=N(c,s,l),u=s,p={},b=0;for(let o=0;o<n.length;o++){const{name:r,fn:m}=n[o],{x:f,y:g,data:v,reset:x}=await m({x:d,y:h,initialPlacement:s,placement:u,strategy:a,middlewareData:p,rects:c,platform:i,elements:{reference:e,floating:t}});d=null!=f?f:d,h=null!=g?g:h,p={...p,[r]:{...p[r],...v}},x&&b<=50&&(b++,"object"==typeof x&&(x.placement&&(u=x.placement),x.rects&&(c=!0===x.rects?await i.getElementRects({reference:e,floating:t,strategy:a}):x.rects),({x:d,y:h}=N(c,u,l))),o=-1)}return{x:d,y:h,placement:u,strategy:a,middlewareData:p}})(e,t,{...a,platform:r})};class De{static isMousePressed=!1;static isMousePressHandlerInitialized=!1;static setupMousePressChecker(){if(!De.isMousePressHandlerInitialized&&window&&window.addEventListener){De.isMousePressHandlerInitialized=!0,De._mousePressedTimeout||(De._mousePressedTimeout=null);const e=e=>{const t="mousedown"===e.type;t?(null!==De._mousePressedTimeout&&(clearTimeout(De._mousePressedTimeout),De._mousePressedTimeout=null),De.isMousePressed||(De.isMousePressed=!0)):De.isMousePressed&&!t&&(De._mousePressedTimeout=setTimeout(()=>{De.isMousePressed=!1,De._mousePressedTimeout=null},0))};window.addEventListener("mousedown",e),window.addEventListener("mouseup",e)}}constructor(e,t){this.element=e,this.behavior=t,this.focusHandler=null,this.clickHandler=null,this.keyDownHandler=null,this.configureTrial=0,this.eventPrefix=void 0,this.id=void 0,this.showing=!1,this.strategy=void 0}mirrorSize(){if(this.element.bibSizer&&this.element.matchWidth){const e=window.getComputedStyle(this.element.bibSizer),t=this.element.bib.shadowRoot.querySelector(".container");"0px"!==e.width&&(t.style.width=e.width),"0px"!==e.height&&(t.style.height=e.height),t.style.maxWidth=e.maxWidth,t.style.maxHeight=e.maxHeight}}getPositioningStrategy(){const e=this.element.bib.mobileFullscreenBreakpoint||this.element.floaterConfig?.fullscreenBreakpoint;switch(this.behavior){case"tooltip":return"floating";case"dialog":case"drawer":if(e){const t=window.matchMedia(`(max-width: ${e})`).matches;this.element.expanded=t}return this.element.nested?"cover":"fullscreen";case"dropdown":case void 0:case null:if(e){if(window.matchMedia(`(max-width: ${e})`).matches)return"fullscreen"}return"floating";default:return this.behavior}}position(){const e=this.getPositioningStrategy();if(this.configureBibStrategy(e),"floating"===e){this.mirrorSize();const e=[Re(this.element.floaterConfig?.offset||0),...this.element.floaterConfig?.shift?[Fe()]:[],...this.element.floaterConfig?.flip?[qe()]:[],...this.element.floaterConfig?.autoPlacement?[Le()]:[]];Me(this.element.trigger,this.element.bib,{strategy:this.element.floaterConfig?.strategy||"fixed",placement:this.element.floaterConfig?.placement,middleware:e||[]}).then(({x:e,y:t})=>{Object.assign(this.element.bib.style,{left:`${e}px`,top:`${t}px`})})}else"cover"===e&&Me(this.element.parentNode,this.element.bib,{placement:"bottom-start"}).then(({x:e,y:t})=>{Object.assign(this.element.bib.style,{left:`${e}px`,top:t-this.element.parentNode.offsetHeight+"px",width:`${this.element.parentNode.offsetWidth}px`,height:`${this.element.parentNode.offsetHeight}px`})})}lockScroll(e=!0){e?(document.body.style.overflow="hidden",this.element.bib.style.transform=`translateY(${window?.visualViewport?.offsetTop}px)`):document.body.style.overflow=""}configureBibStrategy(e){if("fullscreen"===e){this.element.isBibFullscreen=!0,this.element.bib.setAttribute("isfullscreen",""),this.element.bib.style.position="fixed",this.element.bib.style.top="0px",this.element.bib.style.left="0px",this.element.bib.style.width="",this.element.bib.style.height="",this.element.style.contain="";const t=this.element.bib.shadowRoot.querySelector(".container");t?(t.style.width="",t.style.height="",t.style.maxWidth="",t.style.maxHeight=`${window?.visualViewport?.height}px`,this.configureTrial=0):this.configureTrial<10&&(this.configureTrial+=1,setTimeout(()=>{this.configureBibStrategy(e)},0)),this.element.isPopoverVisible&&this.lockScroll(!0)}else this.element.bib.style.position="",this.element.bib.removeAttribute("isfullscreen"),this.element.isBibFullscreen=!1,this.element.style.contain="layout";const t=this.strategy&&this.strategy!==e;if(this.strategy=e,t){const t=new CustomEvent(this.eventPrefix?`${this.eventPrefix}-strategy-change`:"strategy-change",{detail:{value:e},composed:!0});this.element.dispatchEvent(t)}}updateState(){if(!this.element.isPopoverVisible){this.cleanupHideHandlers();try{this.element.cleanup?.()}catch(e){}}}handleFocusLoss(){if(De.isMousePressed)return;if(this.element.noHideOnThisFocusLoss||this.element.hasAttribute("noHideOnThisFocusLoss"))return;const{activeElement:e}=document;this.element.contains(e)||this.element.bib?.contains(e)||this.element.bib.hasAttribute("isfullscreen")||this.hideBib("keydown")}setupHideHandlers(){this.focusHandler=()=>this.handleFocusLoss(),this.clickHandler=e=>{if(!e.composedPath().includes(this.element.trigger)&&!e.composedPath().includes(this.element.bib)||this.element.bib.backdrop&&e.composedPath().includes(this.element.bib.backdrop)){const e=document.expandedAuroFormkitDropdown||document.expandedAuroFloater;e&&e.element.isPopoverVisible?(e.hideBib(),document.expandedAuroFormkitDropdown=null,document.expandedAuroFloater=this):this.hideBib("click")}},this.keyDownHandler=e=>{if("Escape"===e.key&&this.element.isPopoverVisible){const e=document.expandedAuroFormkitDropdown||document.expandedAuroFloater;if(e&&e!==this&&e.element.isPopoverVisible)return;this.hideBib("keydown")}},"drawer"!==this.behavior&&"dialog"!==this.behavior&&document.addEventListener("focusin",this.focusHandler),document.addEventListener("keydown",this.keyDownHandler),setTimeout(()=>{window.addEventListener("click",this.clickHandler)},0)}cleanupHideHandlers(){this.focusHandler&&(document.removeEventListener("focusin",this.focusHandler),this.focusHandler=null),this.clickHandler&&(window.removeEventListener("click",this.clickHandler),this.clickHandler=null),this.keyDownHandler&&(document.removeEventListener("keydown",this.keyDownHandler),this.keyDownHandler=null)}handleUpdate(e){e.has("isPopoverVisible")&&this.updateState()}updateCurrentExpandedDropdown(){const e=document.expandedAuroFormkitDropdown||document.expandedAuroFloater;e&&e!==this&&e.element.isPopoverVisible&&document.expandedAuroFloater.eventPrefix===this.eventPrefix&&document.expandedAuroFloater.hideBib(),document.expandedAuroFloater=this}showBib(){this.element.disabled||this.showing||(this.updateCurrentExpandedDropdown(),this.element.triggerChevron?.setAttribute("data-expanded",!0),this.showing||(this.element.modal||this.setupHideHandlers(),this.showing=!0,this.element.isPopoverVisible=!0,this.position(),this.dispatchEventDropdownToggle()),this.element.cleanup=He(this.element.trigger||this.element.parentNode,this.element.bib,()=>{this.position()}))}hideBib(e="unknown"){this.element.disabled||this.element.noToggle||(this.lockScroll(!1),this.element.triggerChevron?.removeAttribute("data-expanded"),this.element.isPopoverVisible&&(this.element.isPopoverVisible=!1),this.showing&&(this.cleanupHideHandlers(),this.showing=!1,this.dispatchEventDropdownToggle(e))),document.expandedAuroFloater=null}dispatchEventDropdownToggle(e){const t=new CustomEvent(this.eventPrefix?`${this.eventPrefix}-toggled`:"toggled",{detail:{expanded:this.showing,eventType:e||"unknown"},composed:!0});this.element.dispatchEvent(t)}handleClick(){this.element.isPopoverVisible?this.hideBib("click"):this.showBib();const e=new CustomEvent(this.eventPrefix?`${this.eventPrefix}-triggerClick`:"triggerClick",{composed:!0,detail:{expanded:this.element.isPopoverVisible}});this.element.dispatchEvent(e)}handleEvent(e){if(!this.element.disableEventShow)switch(e.type){case"keydown":const t=e.composedPath()[0];"Enter"!==e.key&&(" "!==e.key||t&&"INPUT"===t.tagName)||(e.preventDefault(),this.handleClick());break;case"mouseenter":this.element.hoverToggle&&this.showBib();break;case"mouseleave":this.element.hoverToggle&&this.hideBib("mouseleave");break;case"focus":this.element.focusShow&&this.showBib();break;case"blur":setTimeout(()=>this.handleFocusLoss(),0);break;case"click":document.activeElement===document.body&&e.currentTarget.focus(),this.handleClick()}}handleTriggerTabIndex(){const e=this.element.querySelectorAll('[slot="trigger"]')[0];if(!e)return;const t=e.tagName.toLowerCase();["a","button",'input:not([type="hidden"])',"select","textarea",'[tabindex]:not([tabindex="-1"])',"auro-button","auro-input","auro-hyperlink"].forEach(o=>{t!==o?e.querySelector(o)&&(this.element.tabIndex=-1):this.element.tabIndex=-1})}regenerateBibId(){this.id=this.element.getAttribute("id"),this.id||(this.id=window.crypto.randomUUID(),this.element.setAttribute("id",this.id)),this.element.bib.setAttribute("id",`${this.id}-floater-bib`)}configure(e,t){De.setupMousePressChecker(),this.eventPrefix=t,this.element!==e&&(this.element=e),this.behavior!==this.element.behavior&&(this.behavior=this.element.behavior),this.element.trigger&&this.disconnect(),this.element.trigger=this.element.triggerElement||this.element.shadowRoot.querySelector("#trigger")||this.element.trigger,this.element.bib=this.element.shadowRoot.querySelector("#bib")||this.element.bib,this.element.bibSizer=this.element.shadowRoot.querySelector("#bibSizer"),this.element.triggerChevron=this.element.shadowRoot.querySelector("#showStateIcon"),this.element.floaterConfig&&(this.element.hoverToggle=this.element.floaterConfig.hoverToggle),this.regenerateBibId(),this.handleTriggerTabIndex(),this.handleEvent=this.handleEvent.bind(this),this.element.trigger&&(this.element.trigger.addEventListener("keydown",this.handleEvent),this.element.trigger.addEventListener("click",this.handleEvent),this.element.trigger.addEventListener("mouseenter",this.handleEvent),this.element.trigger.addEventListener("mouseleave",this.handleEvent),this.element.trigger.addEventListener("focus",this.handleEvent),this.element.trigger.addEventListener("blur",this.handleEvent))}disconnect(){this.cleanupHideHandlers(),this.element&&(this.element.cleanup?.(),this.element.bib&&this.element.shadowRoot.append(this.element.bib),this.element?.trigger&&(this.element.trigger.removeEventListener("keydown",this.handleEvent),this.element.trigger.removeEventListener("click",this.handleEvent),this.element.trigger.removeEventListener("mouseenter",this.handleEvent),this.element.trigger.removeEventListener("mouseleave",this.handleEvent),this.element.trigger.removeEventListener("focus",this.handleEvent),this.element.trigger.removeEventListener("blur",this.handleEvent)))}}var Ne=e`:host([onbackdrop]) .backdrop{background:var(--ds-auro-floater-backdrop-modal-background-color)}::slotted(*){background:var(--ds-auro-floater-container-background-color);color:var(--ds-auro-floater-container-text-color)}
|
|
2
|
+
`,_e=e`:host{position:absolute;z-index:var(--ds-depth-overlay, 200);display:none;flex-direction:column;opacity:0;transition:opacity .3s ease-in-out,display .3s;transition-behavior:allow-discrete;will-change:opacity}.util_displayHiddenVisually{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog.container{background-color:transparent;max-width:none;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0);display:inline-block;width:100%;height:100%}dialog.container::backdrop{background:var(--auro-drawer-backdrop-background, transparent);backdrop-filter:var(--auro-drawer-backdrop-filter, none);opacity:var(--auro-drawer-backdrop-opacity, 1);transition:var(--auro-drawer-backdrop-transition, opacity .3s ease)}dialog.container .backdrop{position:fixed;inset:0;pointer-events:none}dialog.container ::slotted(:only-child){z-index:var(--ds-depth-modal, 300);box-shadow:var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, .15))}:host([data-show]){display:block;opacity:1}@starting-style{:host([data-show]){opacity:0}}:host([data-show][modal]){pointer-events:initial}:host([isfullscreen]){width:100%;height:100%}:host([isfullscreen]) dialog.container{overflow:auto;width:100%;height:100%}
|
|
3
3
|
`,Ie=e`:host{--ds-auro-floater-backdrop-modal-background-color: var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, .5));--ds-auro-floater-container-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-floater-container-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
|
|
4
|
-
`;class Ue extends t{constructor(){super(),this._mobileBreakpointValue=void 0,this._boundTouchMoveHandler=void 0}static get properties(){return{bibLabel:{type:String}}}static get styles(){return[_e,
|
|
4
|
+
`;class Ue extends t{constructor(){super(),this._mobileBreakpointValue=void 0,this._boundTouchMoveHandler=void 0}static get properties(){return{bibLabel:{type:String}}}static get styles(){return[Ne,_e,Ie]}firstUpdated(){l.prototype.handleComponentTagRename(this,"auro-floater-bib"),this.dialog=this.shadowRoot.querySelector("dialog"),this.dialog.addEventListener("cancel",e=>{e.preventDefault(),this.dispatchEvent(new Event("dialog-cancel",{bubbles:!0,composed:!0}))}),this.dialog.addEventListener("keydown",e=>{e.target===this.dialog&&this.dialog.dispatchEvent(new KeyboardEvent(e.type,{...e,bubbles:!0,composed:!0}))}),this.dialog.addEventListener("click",e=>{e.target===this.dialog&&this.dispatchEvent(new Event("dialog-backdrop-click",{bubbles:!0,composed:!0}))})}async showDialog({nested:e=!1}={}){this.dialog||await this.updateComplete,this.dialog&&(e?this.dialog.setAttribute("open",""):(this._savedScrollY=window.scrollY,document.body.style.position="fixed",document.body.style.top=`-${this._savedScrollY}px`,document.body.style.width="100%",document.body.style.overflow="hidden",document.documentElement.style.overflow="hidden",this._scrollLocked=!0,this.dialog.showModal(),this._lockTouchScroll()))}hideDialog(){this._restorePageScroll(),this._unlockTouchScroll(),this.dialog?.open&&setTimeout(()=>{this.dialog.close()},300)}_restorePageScroll(){this._scrollLocked&&(document.body.style.position="",document.body.style.top="",document.body.style.width="",document.body.style.overflow="",document.documentElement.style.overflow="",window.scrollTo(0,this._savedScrollY||0),this._savedScrollY=void 0,this._scrollLocked=!1)}_lockTouchScroll(){this._boundTouchMoveHandler||(this._boundTouchMoveHandler=e=>{e.composedPath().some(e=>e!==document&&e.scrollHeight>e.clientHeight)||e.preventDefault()},document.addEventListener("touchmove",this._boundTouchMoveHandler,{passive:!1}))}_unlockTouchScroll(){this._boundTouchMoveHandler&&(document.removeEventListener("touchmove",this._boundTouchMoveHandler,{passive:!1}),this._boundTouchMoveHandler=void 0)}render(){return r`
|
|
5
5
|
<dialog class="container" aria-labelledby="dialogLabel">
|
|
6
6
|
<span id="dialogLabel" class="util_displayHiddenVisually" aria-hidden="true">${this.bibLabel||""}</span>
|
|
7
|
+
<div class="backdrop" part="backdrop"></div>
|
|
7
8
|
<slot></slot>
|
|
8
9
|
</dialog>
|
|
9
|
-
`}}class Pe extends t{constructor(e){super(),this.behavior=e,this.floater=void 0;const t=`${this.floaterConfig.prefix.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}-bib`;this.floaterBibTag=c.prototype.generateTag(t,"0.0.0",Ue)}get floaterConfig(){return{prefix:"auroFloater"}}static get properties(){return{isPopoverVisible:{attribute:"open",type:Boolean,reflect:!0},triggerElement:{attribute:!1}}}firstUpdated(){this.floater=new
|
|
10
|
+
`}}class Pe extends t{constructor(e){super(),this.behavior=e,this.floater=void 0;const t=`${this.floaterConfig.prefix.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}-bib`;this.floaterBibTag=c.prototype.generateTag(t,"0.0.0",Ue)}get floaterConfig(){return{prefix:"auroFloater"}}static get properties(){return{isPopoverVisible:{attribute:"open",type:Boolean,reflect:!0},triggerElement:{attribute:!1}}}firstUpdated(){this.floater=new De(this,this.behavior),this.floater.configure(this,this.floaterConfig.prefix)}disconnectedCallback(){this.floater&&(this.floater.hideBib("disconnect"),this.floater.disconnect())}updated(e){this.floater.handleUpdate(e),e.has("triggerElement")&&this.floater.configure(this,this.floaterConfig.prefix),e.has("isPopoverVisible")&&(this.isPopoverVisible?(this.floater.showBib(),this.bib?.showDialog({nested:this.nested})):(this.floater.hideBib(),this.bib?.hideDialog()))}render(){return r`
|
|
10
11
|
<${this.floaterBibTag} id="bib"
|
|
11
12
|
?data-show=${this.isPopoverVisible}
|
|
12
13
|
?onBackdrop="${this.floaterConfig.backdrop}">
|
|
@@ -129,4 +130,4 @@ import{css as e,LitElement as t,html as o}from"lit";import{unsafeStatic as s,lit
|
|
|
129
130
|
</div>
|
|
130
131
|
`}
|
|
131
132
|
</div>
|
|
132
|
-
`}}customElements.get("auro-drawer-content")||customElements.define("auro-drawer-content",Ht);const Rt=["lg","md","sm","xs"];function Lt(e){if(!(Rt.includes(e)?e:void 0))return;return getComputedStyle(document.documentElement).getPropertyValue("--ds-grid-breakpoint-"+e)}const Ft={backdrop:!0,prefix:"auroDrawer"};class qt extends Pe{constructor(){super("drawer"),this._initializeDefaults()}_initializeDefaults(){this.closeButtonAppearance="default",this.placement="right",this.size="lg",this.fullscreenBreakpoint="sm",this.drawerBib=void 0}static get properties(){return{...Pe.properties,closeButtonAppearance:{type:String,attribute:"close-button-appearance",carryDown:!0,reflect:!0},fullscreenBreakpoint:{type:String,reflect:!0},modal:{type:Boolean,carryDown:!0,reflect:!0},nested:{type:Boolean,reflect:!0},onDark:{type:Boolean,carryDown:!0,reflect:!0},placement:{type:String,carryDown:!0},size:{type:String,carryDown:!0},unformatted:{type:Boolean,carryDown:!0,reflect:!0}}}static register(e="auro-drawer"){l.prototype.registerComponent(e,qt)}get floaterConfig(){return{...super.floaterConfig,...Ft,placement:this.placement,fullscreenBreakpoint:Lt(this.fullscreenBreakpoint)}}set expanded(e){e?this.drawerBib.setAttribute("stretch",""):this.drawerBib.removeAttribute("stretch")}get expanded(){return this.drawerBib.hasAttribute("stretch")}firstUpdated(){super.firstUpdated(),l.prototype.handleComponentTagRename(this,"auro-drawer"),this.drawerBib=document.createElement("auro-drawer-content"),this.drawerBib.triggerElement=this.triggerElement,this.drawerBib.addEventListener("close-click",()=>{this.bib?.hideDialog(),this.floater.hideBib()}),this.append(this.drawerBib),this.bib.setAttribute("exportparts","backdrop:drawer-backdrop"),this.bib.addEventListener("dialog-cancel",()=>{this.modal||this.floater.hideBib()}),this.setupAria()}setupAria(){this.triggerElement&&(this.triggerElement.setAttribute("aria-haspopup","dialog"),this.triggerElement.setAttribute("aria-controls",this.bib.getAttribute("id")),this.bib.bibLabel=this.triggerElement.textContent.trim())}updateDrawerBibAttribute(e,t){"boolean"==typeof t||void 0===t?t?this.drawerBib.setAttribute(e,""):this.drawerBib.removeAttribute(e):this.drawerBib.setAttribute(e,t)}updated(e){super.updated(e),[...this.children].forEach(e=>{e!==this.drawerBib&&this.drawerBib.append(e)}),[...e.entries()].forEach(([e])=>{qt.properties[e].carryDown&&this.updateDrawerBibAttribute(qt.properties[e].attribute||e,this[e])}),e.has("isPopoverVisible")&&(this.drawerBib.visible=this.isPopoverVisible,this.isPopoverVisible||(this.drawerBib.closing=!0)),e.has("triggerElement")&&(this.drawerBib&&(this.drawerBib.triggerElement=this.triggerElement),this.setupAria())}}export{qt as A};
|
|
133
|
+
`}}customElements.get("auro-drawer-content")||customElements.define("auro-drawer-content",Ht);const Rt=["lg","md","sm","xs"];function Lt(e){if(!(Rt.includes(e)?e:void 0))return;return getComputedStyle(document.documentElement).getPropertyValue("--ds-grid-breakpoint-"+e)}const Ft={backdrop:!0,prefix:"auroDrawer"};class qt extends Pe{constructor(){super("drawer"),this._initializeDefaults()}_initializeDefaults(){this.closeButtonAppearance="default",this.placement="right",this.size="lg",this.fullscreenBreakpoint="sm",this.drawerBib=void 0}static get properties(){return{...Pe.properties,closeButtonAppearance:{type:String,attribute:"close-button-appearance",carryDown:!0,reflect:!0},fullscreenBreakpoint:{type:String,reflect:!0},modal:{type:Boolean,carryDown:!0,reflect:!0},nested:{type:Boolean,reflect:!0},onDark:{type:Boolean,carryDown:!0,reflect:!0},placement:{type:String,carryDown:!0},size:{type:String,carryDown:!0},unformatted:{type:Boolean,carryDown:!0,reflect:!0}}}static register(e="auro-drawer"){l.prototype.registerComponent(e,qt)}get floaterConfig(){return{...super.floaterConfig,...Ft,placement:this.placement,fullscreenBreakpoint:Lt(this.fullscreenBreakpoint)}}set expanded(e){e?this.drawerBib.setAttribute("stretch",""):this.drawerBib.removeAttribute("stretch")}get expanded(){return this.drawerBib.hasAttribute("stretch")}firstUpdated(){super.firstUpdated(),l.prototype.handleComponentTagRename(this,"auro-drawer"),this.drawerBib=document.createElement("auro-drawer-content"),this.drawerBib.triggerElement=this.triggerElement,this.drawerBib.addEventListener("close-click",()=>{this.bib?.hideDialog(),this.floater.hideBib()}),this.append(this.drawerBib),this.bib.setAttribute("exportparts","backdrop:drawer-backdrop"),this.bib.addEventListener("dialog-cancel",()=>{this.modal||this.floater.hideBib()}),this.bib.addEventListener("dialog-backdrop-click",()=>{this.modal||(this.bib?.hideDialog(),this.floater.hideBib())}),this.setupAria()}setupAria(){this.triggerElement&&(this.triggerElement.setAttribute("aria-haspopup","dialog"),this.triggerElement.setAttribute("aria-controls",this.bib.getAttribute("id")),this.bib.bibLabel=this.triggerElement.textContent.trim())}updateDrawerBibAttribute(e,t){"boolean"==typeof t||void 0===t?t?this.drawerBib.setAttribute(e,""):this.drawerBib.removeAttribute(e):this.drawerBib.setAttribute(e,t)}updated(e){super.updated(e),[...this.children].forEach(e=>{e!==this.drawerBib&&this.drawerBib.append(e)}),[...e.entries()].forEach(([e])=>{qt.properties[e].carryDown&&this.updateDrawerBibAttribute(qt.properties[e].attribute||e,this[e])}),e.has("isPopoverVisible")&&(this.drawerBib.visible=this.isPopoverVisible,this.isPopoverVisible||(this.drawerBib.closing=!0)),e.has("triggerElement")&&(this.drawerBib&&(this.drawerBib.triggerElement=this.triggerElement),this.setupAria())}}export{qt as A};
|
package/dist/index.d.ts
CHANGED
|
@@ -153,12 +153,21 @@ When expanded, the drawer will automatically display in fullscreen mode if the s
|
|
|
153
153
|
* - `_initializeDefaults() => void`: undefined
|
|
154
154
|
* - `register(name?: string = "auro-drawer") => void`: This will register this element with the browser.
|
|
155
155
|
*
|
|
156
|
+
* ## CSS Custom Properties
|
|
157
|
+
*
|
|
158
|
+
* CSS variables available for styling the component.
|
|
159
|
+
*
|
|
160
|
+
* - `--auro-drawer-backdrop-background`: Background of the `::backdrop` pseudo-element. In modal/backdrop mode the component sets this to the design-system scrim token; consumers can override it. (default: `transparent`)
|
|
161
|
+
* - `--auro-drawer-backdrop-filter`: `backdrop-filter` applied to the `::backdrop` pseudo-element (e.g. `blur(4px)`). (default: `none`)
|
|
162
|
+
* - `--auro-drawer-backdrop-opacity`: Opacity of the `::backdrop` pseudo-element. (default: `1`)
|
|
163
|
+
* - `--auro-drawer-backdrop-transition`: Transition applied to the `::backdrop` pseudo-element (e.g. `opacity 0.3s ease`). (default: `opacity 0.3s ease`)
|
|
164
|
+
*
|
|
156
165
|
* ## CSS Parts
|
|
157
166
|
*
|
|
158
167
|
* Custom selectors for styling elements within the component.
|
|
159
168
|
*
|
|
160
169
|
* - `close-button`: to style the close button.
|
|
161
|
-
* - `drawer-backdrop`: to
|
|
170
|
+
* - `drawer-backdrop`: DEPRECATED - To migrate to the token approach, set `display: none` on this part and use the `--auro-drawer-backdrop-*` CSS custom properties instead.
|
|
162
171
|
* - `drawer-content`: to style the container of the drawer content.
|
|
163
172
|
* - `drawer-footer`: to style the footer.
|
|
164
173
|
* - `drawer-header`: to style the header.
|
|
@@ -168,7 +177,14 @@ When expanded, the drawer will automatically display in fullscreen mode if the s
|
|
|
168
177
|
}
|
|
169
178
|
|
|
170
179
|
export type CustomCssProperties = {
|
|
171
|
-
|
|
180
|
+
/** Background of the `::backdrop` pseudo-element. In modal/backdrop mode the component sets this to the design-system scrim token; consumers can override it. */
|
|
181
|
+
"--auro-drawer-backdrop-background"?: string;
|
|
182
|
+
/** `backdrop-filter` applied to the `::backdrop` pseudo-element (e.g. `blur(4px)`). */
|
|
183
|
+
"--auro-drawer-backdrop-filter"?: string;
|
|
184
|
+
/** Opacity of the `::backdrop` pseudo-element. */
|
|
185
|
+
"--auro-drawer-backdrop-opacity"?: string;
|
|
186
|
+
/** Transition applied to the `::backdrop` pseudo-element (e.g. `opacity 0.3s ease`). */
|
|
187
|
+
"--auro-drawer-backdrop-transition"?: string;
|
|
172
188
|
}
|
|
173
189
|
|
|
174
190
|
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AuroDrawer}from"./auro-drawer-
|
|
1
|
+
export{A as AuroDrawer}from"./auro-drawer-DTS2mk2U.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";
|
package/dist/registered.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{A as i}from"./auro-drawer-
|
|
1
|
+
import{A as i}from"./auro-drawer-DTS2mk2U.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";i.register();
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem-dev/auro-drawer",
|
|
10
|
-
"version": "0.0.0-pr131.
|
|
10
|
+
"version": "0.0.0-pr131.4",
|
|
11
11
|
"description": "auro-drawer HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|