@aurodesignsystem-dev/auro-formkit 0.0.0-pr1422.2 → 0.0.0-pr1424.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/CHANGELOG.md +2 -2
- package/README.md +183 -133
- package/components/checkbox/demo/api.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/api.min.js +165 -276
- package/components/combobox/demo/index.min.js +165 -276
- package/components/combobox/dist/index.js +165 -276
- package/components/combobox/dist/registered.js +165 -276
- package/components/counter/demo/api.min.js +164 -275
- package/components/counter/demo/index.min.js +164 -275
- package/components/counter/dist/index.js +164 -275
- package/components/counter/dist/registered.js +164 -275
- package/components/datepicker/demo/api.min.js +165 -276
- package/components/datepicker/demo/index.min.js +165 -276
- package/components/datepicker/dist/index.js +165 -276
- package/components/datepicker/dist/registered.js +165 -276
- package/components/dropdown/demo/api.min.js +164 -275
- package/components/dropdown/demo/index.min.js +164 -275
- package/components/dropdown/dist/index.js +164 -275
- package/components/dropdown/dist/registered.js +164 -275
- package/components/form/demo/api.md +460 -76
- package/components/form/demo/api.min.js +661 -1105
- package/components/form/demo/index.min.js +661 -1105
- package/components/input/demo/api.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/radio/demo/api.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/api.min.js +164 -275
- package/components/select/demo/index.min.js +164 -275
- package/components/select/dist/index.js +164 -275
- package/components/select/dist/registered.js +164 -275
- package/package.json +3 -3
|
@@ -9290,7 +9290,7 @@ class AuroBibtemplate extends i$1 {
|
|
|
9290
9290
|
}
|
|
9291
9291
|
}
|
|
9292
9292
|
|
|
9293
|
-
var formkitVersion$2 = '
|
|
9293
|
+
var formkitVersion$2 = '202604072118';
|
|
9294
9294
|
|
|
9295
9295
|
let l$1 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s,a){const r=this.generateElementName(o,s),i=i$5`${s$5(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}};let d$1 = class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`),s=(o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim();return s||null}};let h$4 = class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}};var c$3=i$3`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]),:host([appearance=brand]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
|
|
9296
9296
|
`,u$6=i$3`.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}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0;box-sizing:border-box}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
|
|
@@ -11624,19 +11624,11 @@ class AuroFloatingUI {
|
|
|
11624
11624
|
* This ensures that the bib content has the same dimensions as the sizer element.
|
|
11625
11625
|
*/
|
|
11626
11626
|
mirrorSize() {
|
|
11627
|
-
const element = this.element;
|
|
11628
|
-
if (!element) {
|
|
11629
|
-
return;
|
|
11630
|
-
}
|
|
11631
|
-
|
|
11632
11627
|
// mirror the boxsize from bibSizer
|
|
11633
|
-
if (element.bibSizer && element.matchWidth
|
|
11634
|
-
const sizerStyle = window.getComputedStyle(element.bibSizer);
|
|
11635
|
-
const bibContent =
|
|
11636
|
-
|
|
11637
|
-
return;
|
|
11638
|
-
}
|
|
11639
|
-
|
|
11628
|
+
if (this.element.bibSizer && this.element.matchWidth) {
|
|
11629
|
+
const sizerStyle = window.getComputedStyle(this.element.bibSizer);
|
|
11630
|
+
const bibContent =
|
|
11631
|
+
this.element.bib.shadowRoot.querySelector(".container");
|
|
11640
11632
|
if (sizerStyle.width !== "0px") {
|
|
11641
11633
|
bibContent.style.width = sizerStyle.width;
|
|
11642
11634
|
}
|
|
@@ -11658,14 +11650,9 @@ class AuroFloatingUI {
|
|
|
11658
11650
|
* @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
|
|
11659
11651
|
*/
|
|
11660
11652
|
getPositioningStrategy() {
|
|
11661
|
-
const element = this.element;
|
|
11662
|
-
if (!element) {
|
|
11663
|
-
return "floating";
|
|
11664
|
-
}
|
|
11665
|
-
|
|
11666
11653
|
const breakpoint =
|
|
11667
|
-
element.bib
|
|
11668
|
-
element.floaterConfig?.fullscreenBreakpoint;
|
|
11654
|
+
this.element.bib.mobileFullscreenBreakpoint ||
|
|
11655
|
+
this.element.floaterConfig?.fullscreenBreakpoint;
|
|
11669
11656
|
switch (this.behavior) {
|
|
11670
11657
|
case "tooltip":
|
|
11671
11658
|
return "floating";
|
|
@@ -11676,9 +11663,9 @@ class AuroFloatingUI {
|
|
|
11676
11663
|
`(max-width: ${breakpoint})`,
|
|
11677
11664
|
).matches;
|
|
11678
11665
|
|
|
11679
|
-
element.expanded = smallerThanBreakpoint;
|
|
11666
|
+
this.element.expanded = smallerThanBreakpoint;
|
|
11680
11667
|
}
|
|
11681
|
-
if (element.nested) {
|
|
11668
|
+
if (this.element.nested) {
|
|
11682
11669
|
return "cover";
|
|
11683
11670
|
}
|
|
11684
11671
|
return "fullscreen";
|
|
@@ -11708,65 +11695,42 @@ class AuroFloatingUI {
|
|
|
11708
11695
|
* and applies the calculated position to the bib's style.
|
|
11709
11696
|
*/
|
|
11710
11697
|
position() {
|
|
11711
|
-
const element = this.element;
|
|
11712
|
-
if (!element) {
|
|
11713
|
-
return;
|
|
11714
|
-
}
|
|
11715
|
-
|
|
11716
11698
|
const strategy = this.getPositioningStrategy();
|
|
11717
11699
|
this.configureBibStrategy(strategy);
|
|
11718
11700
|
|
|
11719
11701
|
if (strategy === "floating") {
|
|
11720
|
-
if (!element.trigger || !element.bib) {
|
|
11721
|
-
return;
|
|
11722
|
-
}
|
|
11723
|
-
|
|
11724
11702
|
this.mirrorSize();
|
|
11725
11703
|
// Define the middlware for the floater configuration
|
|
11726
11704
|
const middleware = [
|
|
11727
|
-
offset(element.floaterConfig?.offset || 0),
|
|
11728
|
-
...(element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
|
|
11729
|
-
...(element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
|
|
11730
|
-
...(element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
|
|
11705
|
+
offset(this.element.floaterConfig?.offset || 0),
|
|
11706
|
+
...(this.element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
|
|
11707
|
+
...(this.element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
|
|
11708
|
+
...(this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
|
|
11731
11709
|
];
|
|
11732
11710
|
|
|
11733
11711
|
// Compute the position of the bib
|
|
11734
|
-
computePosition(element.trigger, element.bib, {
|
|
11735
|
-
strategy: element.floaterConfig?.strategy || "fixed",
|
|
11736
|
-
placement: element.floaterConfig?.placement,
|
|
11712
|
+
computePosition(this.element.trigger, this.element.bib, {
|
|
11713
|
+
strategy: this.element.floaterConfig?.strategy || "fixed",
|
|
11714
|
+
placement: this.element.floaterConfig?.placement,
|
|
11737
11715
|
middleware: middleware || [],
|
|
11738
11716
|
}).then(({ x, y }) => {
|
|
11739
11717
|
// eslint-disable-line id-length
|
|
11740
|
-
|
|
11741
|
-
if (!currentElement?.bib) {
|
|
11742
|
-
return;
|
|
11743
|
-
}
|
|
11744
|
-
|
|
11745
|
-
Object.assign(currentElement.bib.style, {
|
|
11718
|
+
Object.assign(this.element.bib.style, {
|
|
11746
11719
|
left: `${x}px`,
|
|
11747
11720
|
top: `${y}px`,
|
|
11748
11721
|
});
|
|
11749
11722
|
});
|
|
11750
11723
|
} else if (strategy === "cover") {
|
|
11751
|
-
if (!element.parentNode || !element.bib) {
|
|
11752
|
-
return;
|
|
11753
|
-
}
|
|
11754
|
-
|
|
11755
11724
|
// Compute the position of the bib
|
|
11756
|
-
computePosition(element.parentNode, element.bib, {
|
|
11725
|
+
computePosition(this.element.parentNode, this.element.bib, {
|
|
11757
11726
|
placement: "bottom-start",
|
|
11758
11727
|
}).then(({ x, y }) => {
|
|
11759
11728
|
// eslint-disable-line id-length
|
|
11760
|
-
|
|
11761
|
-
if (!currentElement?.bib || !currentElement.parentNode) {
|
|
11762
|
-
return;
|
|
11763
|
-
}
|
|
11764
|
-
|
|
11765
|
-
Object.assign(currentElement.bib.style, {
|
|
11729
|
+
Object.assign(this.element.bib.style, {
|
|
11766
11730
|
left: `${x}px`,
|
|
11767
|
-
top: `${y -
|
|
11768
|
-
width: `${
|
|
11769
|
-
height: `${
|
|
11731
|
+
top: `${y - this.element.parentNode.offsetHeight}px`,
|
|
11732
|
+
width: `${this.element.parentNode.offsetWidth}px`,
|
|
11733
|
+
height: `${this.element.parentNode.offsetHeight}px`,
|
|
11770
11734
|
});
|
|
11771
11735
|
});
|
|
11772
11736
|
}
|
|
@@ -11778,17 +11742,11 @@ class AuroFloatingUI {
|
|
|
11778
11742
|
* @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
|
|
11779
11743
|
*/
|
|
11780
11744
|
lockScroll(lock = true) {
|
|
11781
|
-
const element = this.element;
|
|
11782
|
-
|
|
11783
11745
|
if (lock) {
|
|
11784
|
-
if (!element?.bib) {
|
|
11785
|
-
return;
|
|
11786
|
-
}
|
|
11787
|
-
|
|
11788
11746
|
document.body.style.overflow = "hidden"; // hide body's scrollbar
|
|
11789
11747
|
|
|
11790
11748
|
// Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
|
|
11791
|
-
element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
|
|
11749
|
+
this.element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
|
|
11792
11750
|
} else {
|
|
11793
11751
|
document.body.style.overflow = "";
|
|
11794
11752
|
}
|
|
@@ -11804,24 +11762,20 @@ class AuroFloatingUI {
|
|
|
11804
11762
|
* @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
|
|
11805
11763
|
*/
|
|
11806
11764
|
configureBibStrategy(value) {
|
|
11807
|
-
const element = this.element;
|
|
11808
|
-
if (!element?.bib) {
|
|
11809
|
-
return;
|
|
11810
|
-
}
|
|
11811
|
-
|
|
11812
11765
|
if (value === "fullscreen") {
|
|
11813
|
-
element.isBibFullscreen = true;
|
|
11766
|
+
this.element.isBibFullscreen = true;
|
|
11814
11767
|
// reset the prev position
|
|
11815
|
-
element.bib.setAttribute("isfullscreen", "");
|
|
11816
|
-
element.bib.style.position = "fixed";
|
|
11817
|
-
element.bib.style.top = "0px";
|
|
11818
|
-
element.bib.style.left = "0px";
|
|
11819
|
-
element.bib.style.width = "";
|
|
11820
|
-
element.bib.style.height = "";
|
|
11821
|
-
element.style.contain = "";
|
|
11768
|
+
this.element.bib.setAttribute("isfullscreen", "");
|
|
11769
|
+
this.element.bib.style.position = "fixed";
|
|
11770
|
+
this.element.bib.style.top = "0px";
|
|
11771
|
+
this.element.bib.style.left = "0px";
|
|
11772
|
+
this.element.bib.style.width = "";
|
|
11773
|
+
this.element.bib.style.height = "";
|
|
11774
|
+
this.element.style.contain = "";
|
|
11822
11775
|
|
|
11823
11776
|
// reset the size that was mirroring `size` css-part
|
|
11824
|
-
const bibContent =
|
|
11777
|
+
const bibContent =
|
|
11778
|
+
this.element.bib.shadowRoot.querySelector(".container");
|
|
11825
11779
|
if (bibContent) {
|
|
11826
11780
|
bibContent.style.width = "";
|
|
11827
11781
|
bibContent.style.height = "";
|
|
@@ -11836,14 +11790,14 @@ class AuroFloatingUI {
|
|
|
11836
11790
|
}, 0);
|
|
11837
11791
|
}
|
|
11838
11792
|
|
|
11839
|
-
if (element.isPopoverVisible) {
|
|
11793
|
+
if (this.element.isPopoverVisible) {
|
|
11840
11794
|
this.lockScroll(true);
|
|
11841
11795
|
}
|
|
11842
11796
|
} else {
|
|
11843
|
-
element.bib.style.position = "";
|
|
11844
|
-
element.bib.removeAttribute("isfullscreen");
|
|
11845
|
-
element.isBibFullscreen = false;
|
|
11846
|
-
element.style.contain = "layout";
|
|
11797
|
+
this.element.bib.style.position = "";
|
|
11798
|
+
this.element.bib.removeAttribute("isfullscreen");
|
|
11799
|
+
this.element.isBibFullscreen = false;
|
|
11800
|
+
this.element.style.contain = "layout";
|
|
11847
11801
|
}
|
|
11848
11802
|
|
|
11849
11803
|
const isChanged = this.strategy && this.strategy !== value;
|
|
@@ -11861,21 +11815,16 @@ class AuroFloatingUI {
|
|
|
11861
11815
|
},
|
|
11862
11816
|
);
|
|
11863
11817
|
|
|
11864
|
-
element.dispatchEvent(event);
|
|
11818
|
+
this.element.dispatchEvent(event);
|
|
11865
11819
|
}
|
|
11866
11820
|
}
|
|
11867
11821
|
|
|
11868
11822
|
updateState() {
|
|
11869
|
-
const
|
|
11870
|
-
if (!element) {
|
|
11871
|
-
return;
|
|
11872
|
-
}
|
|
11873
|
-
|
|
11874
|
-
const isVisible = element.isPopoverVisible;
|
|
11823
|
+
const isVisible = this.element.isPopoverVisible;
|
|
11875
11824
|
if (!isVisible) {
|
|
11876
11825
|
this.cleanupHideHandlers();
|
|
11877
11826
|
try {
|
|
11878
|
-
element.cleanup?.();
|
|
11827
|
+
this.element.cleanup?.();
|
|
11879
11828
|
} catch (error) {
|
|
11880
11829
|
// Do nothing
|
|
11881
11830
|
}
|
|
@@ -11891,30 +11840,28 @@ class AuroFloatingUI {
|
|
|
11891
11840
|
* If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
|
|
11892
11841
|
*/
|
|
11893
11842
|
handleFocusLoss() {
|
|
11894
|
-
const element = this.element;
|
|
11895
|
-
if (!element?.bib) {
|
|
11896
|
-
return;
|
|
11897
|
-
}
|
|
11898
|
-
|
|
11899
11843
|
// if mouse is being pressed, skip and let click event to handle the action
|
|
11900
11844
|
if (AuroFloatingUI.isMousePressed) {
|
|
11901
11845
|
return;
|
|
11902
11846
|
}
|
|
11903
11847
|
|
|
11904
11848
|
if (
|
|
11905
|
-
element.noHideOnThisFocusLoss ||
|
|
11906
|
-
element.hasAttribute("noHideOnThisFocusLoss")
|
|
11849
|
+
this.element.noHideOnThisFocusLoss ||
|
|
11850
|
+
this.element.hasAttribute("noHideOnThisFocusLoss")
|
|
11907
11851
|
) {
|
|
11908
11852
|
return;
|
|
11909
11853
|
}
|
|
11910
11854
|
|
|
11911
11855
|
// if focus is still inside of trigger or bib, do not close
|
|
11912
|
-
if (
|
|
11856
|
+
if (
|
|
11857
|
+
this.element.matches(":focus") ||
|
|
11858
|
+
this.element.matches(":focus-within")
|
|
11859
|
+
) {
|
|
11913
11860
|
return;
|
|
11914
11861
|
}
|
|
11915
11862
|
|
|
11916
11863
|
// if fullscreen bib is in fullscreen mode, do not close
|
|
11917
|
-
if (element.bib.hasAttribute("isfullscreen")) {
|
|
11864
|
+
if (this.element.bib.hasAttribute("isfullscreen")) {
|
|
11918
11865
|
return;
|
|
11919
11866
|
}
|
|
11920
11867
|
|
|
@@ -11922,33 +11869,23 @@ class AuroFloatingUI {
|
|
|
11922
11869
|
}
|
|
11923
11870
|
|
|
11924
11871
|
setupHideHandlers() {
|
|
11925
|
-
const element = this.element;
|
|
11926
|
-
if (!element) {
|
|
11927
|
-
return;
|
|
11928
|
-
}
|
|
11929
|
-
|
|
11930
11872
|
// Define handlers & store references
|
|
11931
11873
|
this.focusHandler = () => this.handleFocusLoss();
|
|
11932
11874
|
|
|
11933
11875
|
this.clickHandler = (evt) => {
|
|
11934
|
-
const element = this.element;
|
|
11935
|
-
if (!element?.bib) {
|
|
11936
|
-
return;
|
|
11937
|
-
}
|
|
11938
|
-
|
|
11939
11876
|
// When the bib is fullscreen (modal dialog), don't close on outside
|
|
11940
11877
|
// clicks. VoiceOver's synthetic click events inside a top-layer modal
|
|
11941
11878
|
// <dialog> may not include the bib in composedPath(), causing false
|
|
11942
11879
|
// positives. This mirrors the fullscreen guard in handleFocusLoss().
|
|
11943
|
-
if (element.bib.hasAttribute("isfullscreen")) {
|
|
11880
|
+
if (this.element.bib && this.element.bib.hasAttribute("isfullscreen")) {
|
|
11944
11881
|
return;
|
|
11945
11882
|
}
|
|
11946
11883
|
|
|
11947
11884
|
if (
|
|
11948
|
-
(!evt.composedPath().includes(element.trigger) &&
|
|
11949
|
-
!evt.composedPath().includes(element.bib)) ||
|
|
11950
|
-
(element.bib.backdrop &&
|
|
11951
|
-
evt.composedPath().includes(element.bib.backdrop))
|
|
11885
|
+
(!evt.composedPath().includes(this.element.trigger) &&
|
|
11886
|
+
!evt.composedPath().includes(this.element.bib)) ||
|
|
11887
|
+
(this.element.bib.backdrop &&
|
|
11888
|
+
evt.composedPath().includes(this.element.bib.backdrop))
|
|
11952
11889
|
) {
|
|
11953
11890
|
const existedVisibleFloatingUI =
|
|
11954
11891
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
@@ -11969,12 +11906,7 @@ class AuroFloatingUI {
|
|
|
11969
11906
|
|
|
11970
11907
|
// ESC key handler
|
|
11971
11908
|
this.keyDownHandler = (evt) => {
|
|
11972
|
-
|
|
11973
|
-
if (!element) {
|
|
11974
|
-
return;
|
|
11975
|
-
}
|
|
11976
|
-
|
|
11977
|
-
if (evt.key === "Escape" && element.isPopoverVisible) {
|
|
11909
|
+
if (evt.key === "Escape" && this.element.isPopoverVisible) {
|
|
11978
11910
|
const existedVisibleFloatingUI =
|
|
11979
11911
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
11980
11912
|
if (
|
|
@@ -12031,10 +11963,6 @@ class AuroFloatingUI {
|
|
|
12031
11963
|
}
|
|
12032
11964
|
|
|
12033
11965
|
updateCurrentExpandedDropdown() {
|
|
12034
|
-
if (!this.element) {
|
|
12035
|
-
return;
|
|
12036
|
-
}
|
|
12037
|
-
|
|
12038
11966
|
// Close any other dropdown that is already open
|
|
12039
11967
|
const existedVisibleFloatingUI =
|
|
12040
11968
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
@@ -12051,34 +11979,25 @@ class AuroFloatingUI {
|
|
|
12051
11979
|
}
|
|
12052
11980
|
|
|
12053
11981
|
showBib() {
|
|
12054
|
-
|
|
12055
|
-
if (!element) {
|
|
12056
|
-
return;
|
|
12057
|
-
}
|
|
12058
|
-
|
|
12059
|
-
if (!element.bib || (!element.trigger && !element.parentNode)) {
|
|
12060
|
-
return;
|
|
12061
|
-
}
|
|
12062
|
-
|
|
12063
|
-
if (!element.disabled && !this.showing) {
|
|
11982
|
+
if (!this.element.disabled && !this.showing) {
|
|
12064
11983
|
this.updateCurrentExpandedDropdown();
|
|
12065
|
-
element.triggerChevron?.setAttribute("data-expanded", true);
|
|
11984
|
+
this.element.triggerChevron?.setAttribute("data-expanded", true);
|
|
12066
11985
|
|
|
12067
11986
|
// prevent double showing: isPopovervisible gets first and showBib gets called later
|
|
12068
11987
|
if (!this.showing) {
|
|
12069
|
-
if (!element.modal) {
|
|
11988
|
+
if (!this.element.modal) {
|
|
12070
11989
|
this.setupHideHandlers();
|
|
12071
11990
|
}
|
|
12072
11991
|
this.showing = true;
|
|
12073
|
-
element.isPopoverVisible = true;
|
|
11992
|
+
this.element.isPopoverVisible = true;
|
|
12074
11993
|
this.position();
|
|
12075
11994
|
this.dispatchEventDropdownToggle();
|
|
12076
11995
|
}
|
|
12077
11996
|
|
|
12078
11997
|
// Setup auto update to handle resize and scroll
|
|
12079
|
-
element.cleanup = autoUpdate(
|
|
12080
|
-
element.trigger || element.parentNode,
|
|
12081
|
-
element.bib,
|
|
11998
|
+
this.element.cleanup = autoUpdate(
|
|
11999
|
+
this.element.trigger || this.element.parentNode,
|
|
12000
|
+
this.element.bib,
|
|
12082
12001
|
() => {
|
|
12083
12002
|
this.position();
|
|
12084
12003
|
},
|
|
@@ -12091,27 +12010,22 @@ class AuroFloatingUI {
|
|
|
12091
12010
|
* @param {String} eventType - The event type that triggered the hiding action.
|
|
12092
12011
|
*/
|
|
12093
12012
|
hideBib(eventType = "unknown") {
|
|
12094
|
-
|
|
12095
|
-
if (!element) {
|
|
12096
|
-
return;
|
|
12097
|
-
}
|
|
12098
|
-
|
|
12099
|
-
if (element.disabled) {
|
|
12013
|
+
if (this.element.disabled) {
|
|
12100
12014
|
return;
|
|
12101
12015
|
}
|
|
12102
12016
|
|
|
12103
12017
|
// noToggle dropdowns should not close when the trigger is clicked (the
|
|
12104
12018
|
// "toggle" behavior), but they CAN still close via other interactions like
|
|
12105
12019
|
// Escape key or focus loss.
|
|
12106
|
-
if (element.noToggle && eventType === "click") {
|
|
12020
|
+
if (this.element.noToggle && eventType === "click") {
|
|
12107
12021
|
return;
|
|
12108
12022
|
}
|
|
12109
12023
|
|
|
12110
12024
|
this.lockScroll(false);
|
|
12111
|
-
element.triggerChevron?.removeAttribute("data-expanded");
|
|
12025
|
+
this.element.triggerChevron?.removeAttribute("data-expanded");
|
|
12112
12026
|
|
|
12113
|
-
if (element.isPopoverVisible) {
|
|
12114
|
-
element.isPopoverVisible = false;
|
|
12027
|
+
if (this.element.isPopoverVisible) {
|
|
12028
|
+
this.element.isPopoverVisible = false;
|
|
12115
12029
|
}
|
|
12116
12030
|
if (this.showing) {
|
|
12117
12031
|
this.cleanupHideHandlers();
|
|
@@ -12131,11 +12045,6 @@ class AuroFloatingUI {
|
|
|
12131
12045
|
* @param {String} eventType - The event type that triggered the toggle action.
|
|
12132
12046
|
*/
|
|
12133
12047
|
dispatchEventDropdownToggle(eventType) {
|
|
12134
|
-
const element = this.element;
|
|
12135
|
-
if (!element) {
|
|
12136
|
-
return;
|
|
12137
|
-
}
|
|
12138
|
-
|
|
12139
12048
|
const event = new CustomEvent(
|
|
12140
12049
|
this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
|
|
12141
12050
|
{
|
|
@@ -12147,16 +12056,11 @@ class AuroFloatingUI {
|
|
|
12147
12056
|
},
|
|
12148
12057
|
);
|
|
12149
12058
|
|
|
12150
|
-
element.dispatchEvent(event);
|
|
12059
|
+
this.element.dispatchEvent(event);
|
|
12151
12060
|
}
|
|
12152
12061
|
|
|
12153
12062
|
handleClick() {
|
|
12154
|
-
|
|
12155
|
-
if (!element) {
|
|
12156
|
-
return;
|
|
12157
|
-
}
|
|
12158
|
-
|
|
12159
|
-
if (element.isPopoverVisible) {
|
|
12063
|
+
if (this.element.isPopoverVisible) {
|
|
12160
12064
|
this.hideBib("click");
|
|
12161
12065
|
} else {
|
|
12162
12066
|
this.showBib();
|
|
@@ -12167,66 +12071,63 @@ class AuroFloatingUI {
|
|
|
12167
12071
|
{
|
|
12168
12072
|
composed: true,
|
|
12169
12073
|
detail: {
|
|
12170
|
-
expanded: element.isPopoverVisible,
|
|
12074
|
+
expanded: this.element.isPopoverVisible,
|
|
12171
12075
|
},
|
|
12172
12076
|
},
|
|
12173
12077
|
);
|
|
12174
12078
|
|
|
12175
|
-
element.dispatchEvent(event);
|
|
12079
|
+
this.element.dispatchEvent(event);
|
|
12176
12080
|
}
|
|
12177
12081
|
|
|
12178
12082
|
handleEvent(event) {
|
|
12179
|
-
|
|
12180
|
-
|
|
12181
|
-
|
|
12182
|
-
|
|
12183
|
-
|
|
12184
|
-
|
|
12185
|
-
|
|
12186
|
-
|
|
12187
|
-
|
|
12188
|
-
|
|
12189
|
-
|
|
12190
|
-
|
|
12191
|
-
|
|
12192
|
-
|
|
12193
|
-
|
|
12194
|
-
event.preventDefault();
|
|
12195
|
-
this.handleClick();
|
|
12083
|
+
if (!this.element.disableEventShow) {
|
|
12084
|
+
switch (event.type) {
|
|
12085
|
+
case "keydown": {
|
|
12086
|
+
// Support both Enter and Space keys for accessibility
|
|
12087
|
+
// Space is included as it's expected behavior for interactive elements
|
|
12088
|
+
|
|
12089
|
+
const origin = event.composedPath()[0];
|
|
12090
|
+
if (
|
|
12091
|
+
event.key === "Enter" ||
|
|
12092
|
+
(event.key === " " && (!origin || origin.tagName !== "INPUT"))
|
|
12093
|
+
) {
|
|
12094
|
+
event.preventDefault();
|
|
12095
|
+
this.handleClick();
|
|
12096
|
+
}
|
|
12097
|
+
break;
|
|
12196
12098
|
}
|
|
12197
|
-
|
|
12099
|
+
case "mouseenter":
|
|
12100
|
+
if (this.element.hoverToggle) {
|
|
12101
|
+
this.showBib();
|
|
12102
|
+
}
|
|
12103
|
+
break;
|
|
12104
|
+
case "mouseleave":
|
|
12105
|
+
if (this.element.hoverToggle) {
|
|
12106
|
+
this.hideBib("mouseleave");
|
|
12107
|
+
}
|
|
12108
|
+
break;
|
|
12109
|
+
case "focus":
|
|
12110
|
+
if (this.element.focusShow) {
|
|
12111
|
+
/*
|
|
12112
|
+
This needs to better handle clicking that gives focus -
|
|
12113
|
+
currently it shows and then immediately hides the bib
|
|
12114
|
+
*/
|
|
12115
|
+
this.showBib();
|
|
12116
|
+
}
|
|
12117
|
+
break;
|
|
12118
|
+
case "blur":
|
|
12119
|
+
// send this task 100ms later queue to
|
|
12120
|
+
// wait a frame in case focus moves within the floating element/bib
|
|
12121
|
+
setTimeout(() => this.handleFocusLoss(), 0);
|
|
12122
|
+
break;
|
|
12123
|
+
case "click":
|
|
12124
|
+
if (document.activeElement === document.body) {
|
|
12125
|
+
event.currentTarget.focus();
|
|
12126
|
+
}
|
|
12127
|
+
this.handleClick();
|
|
12128
|
+
break;
|
|
12129
|
+
// Do nothing
|
|
12198
12130
|
}
|
|
12199
|
-
case "mouseenter":
|
|
12200
|
-
if (element.hoverToggle) {
|
|
12201
|
-
this.showBib();
|
|
12202
|
-
}
|
|
12203
|
-
break;
|
|
12204
|
-
case "mouseleave":
|
|
12205
|
-
if (element.hoverToggle) {
|
|
12206
|
-
this.hideBib("mouseleave");
|
|
12207
|
-
}
|
|
12208
|
-
break;
|
|
12209
|
-
case "focus":
|
|
12210
|
-
if (element.focusShow) {
|
|
12211
|
-
/*
|
|
12212
|
-
This needs to better handle clicking that gives focus -
|
|
12213
|
-
currently it shows and then immediately hides the bib
|
|
12214
|
-
*/
|
|
12215
|
-
this.showBib();
|
|
12216
|
-
}
|
|
12217
|
-
break;
|
|
12218
|
-
case "blur":
|
|
12219
|
-
// send this task 100ms later queue to
|
|
12220
|
-
// wait a frame in case focus moves within the floating element/bib
|
|
12221
|
-
setTimeout(() => this.handleFocusLoss(), 0);
|
|
12222
|
-
break;
|
|
12223
|
-
case "click":
|
|
12224
|
-
if (document.activeElement === document.body) {
|
|
12225
|
-
event.currentTarget.focus();
|
|
12226
|
-
}
|
|
12227
|
-
this.handleClick();
|
|
12228
|
-
break;
|
|
12229
|
-
// Do nothing
|
|
12230
12131
|
}
|
|
12231
12132
|
}
|
|
12232
12133
|
|
|
@@ -12237,11 +12138,6 @@ class AuroFloatingUI {
|
|
|
12237
12138
|
* This prevents the component itself from being focusable when the trigger element already handles focus.
|
|
12238
12139
|
*/
|
|
12239
12140
|
handleTriggerTabIndex() {
|
|
12240
|
-
const element = this.element;
|
|
12241
|
-
if (!element) {
|
|
12242
|
-
return;
|
|
12243
|
-
}
|
|
12244
|
-
|
|
12245
12141
|
const focusableElementSelectors = [
|
|
12246
12142
|
"a",
|
|
12247
12143
|
"button",
|
|
@@ -12254,7 +12150,7 @@ class AuroFloatingUI {
|
|
|
12254
12150
|
"auro-hyperlink",
|
|
12255
12151
|
];
|
|
12256
12152
|
|
|
12257
|
-
const triggerNode = element.querySelectorAll('[slot="trigger"]')[0];
|
|
12153
|
+
const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
|
|
12258
12154
|
if (!triggerNode) {
|
|
12259
12155
|
return;
|
|
12260
12156
|
}
|
|
@@ -12263,13 +12159,13 @@ class AuroFloatingUI {
|
|
|
12263
12159
|
focusableElementSelectors.forEach((selector) => {
|
|
12264
12160
|
// Check if the trigger node element is focusable
|
|
12265
12161
|
if (triggerNodeTagName === selector) {
|
|
12266
|
-
element.tabIndex = -1;
|
|
12162
|
+
this.element.tabIndex = -1;
|
|
12267
12163
|
return;
|
|
12268
12164
|
}
|
|
12269
12165
|
|
|
12270
12166
|
// Check if any child is focusable
|
|
12271
12167
|
if (triggerNode.querySelector(selector)) {
|
|
12272
|
-
element.tabIndex = -1;
|
|
12168
|
+
this.element.tabIndex = -1;
|
|
12273
12169
|
}
|
|
12274
12170
|
});
|
|
12275
12171
|
}
|
|
@@ -12279,18 +12175,13 @@ class AuroFloatingUI {
|
|
|
12279
12175
|
* @param {*} eventPrefix
|
|
12280
12176
|
*/
|
|
12281
12177
|
regenerateBibId() {
|
|
12282
|
-
|
|
12283
|
-
if (!element) {
|
|
12284
|
-
return;
|
|
12285
|
-
}
|
|
12286
|
-
|
|
12287
|
-
this.id = element.getAttribute("id");
|
|
12178
|
+
this.id = this.element.getAttribute("id");
|
|
12288
12179
|
if (!this.id) {
|
|
12289
12180
|
this.id = window.crypto.randomUUID();
|
|
12290
|
-
element.setAttribute("id", this.id);
|
|
12181
|
+
this.element.setAttribute("id", this.id);
|
|
12291
12182
|
}
|
|
12292
12183
|
|
|
12293
|
-
element.bib
|
|
12184
|
+
this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
|
|
12294
12185
|
}
|
|
12295
12186
|
|
|
12296
12187
|
configure(elem, eventPrefix, enableKeyboardHandling = true) {
|
|
@@ -12302,69 +12193,67 @@ class AuroFloatingUI {
|
|
|
12302
12193
|
this.element = elem;
|
|
12303
12194
|
}
|
|
12304
12195
|
|
|
12305
|
-
|
|
12306
|
-
|
|
12307
|
-
return;
|
|
12196
|
+
if (this.behavior !== this.element.behavior) {
|
|
12197
|
+
this.behavior = this.element.behavior;
|
|
12308
12198
|
}
|
|
12309
12199
|
|
|
12310
|
-
if (this.
|
|
12311
|
-
this.behavior = element.behavior;
|
|
12312
|
-
}
|
|
12313
|
-
|
|
12314
|
-
if (element.trigger) {
|
|
12200
|
+
if (this.element.trigger) {
|
|
12315
12201
|
this.disconnect();
|
|
12316
12202
|
}
|
|
12317
|
-
element.trigger =
|
|
12318
|
-
element.triggerElement ||
|
|
12319
|
-
element.shadowRoot
|
|
12320
|
-
element.trigger;
|
|
12321
|
-
element.bib =
|
|
12322
|
-
|
|
12323
|
-
element.
|
|
12324
|
-
|
|
12203
|
+
this.element.trigger =
|
|
12204
|
+
this.element.triggerElement ||
|
|
12205
|
+
this.element.shadowRoot.querySelector("#trigger") ||
|
|
12206
|
+
this.element.trigger;
|
|
12207
|
+
this.element.bib =
|
|
12208
|
+
this.element.shadowRoot.querySelector("#bib") || this.element.bib;
|
|
12209
|
+
this.element.bibSizer = this.element.shadowRoot.querySelector("#bibSizer");
|
|
12210
|
+
this.element.triggerChevron =
|
|
12211
|
+
this.element.shadowRoot.querySelector("#showStateIcon");
|
|
12325
12212
|
|
|
12326
|
-
if (element.floaterConfig) {
|
|
12327
|
-
element.hoverToggle = element.floaterConfig.hoverToggle;
|
|
12213
|
+
if (this.element.floaterConfig) {
|
|
12214
|
+
this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
|
|
12328
12215
|
}
|
|
12329
12216
|
|
|
12330
12217
|
this.regenerateBibId();
|
|
12331
12218
|
this.handleTriggerTabIndex();
|
|
12332
12219
|
|
|
12333
12220
|
this.handleEvent = this.handleEvent.bind(this);
|
|
12334
|
-
if (element.trigger) {
|
|
12221
|
+
if (this.element.trigger) {
|
|
12335
12222
|
if (this.enableKeyboardHandling) {
|
|
12336
|
-
element.trigger.addEventListener("keydown", this.handleEvent);
|
|
12223
|
+
this.element.trigger.addEventListener("keydown", this.handleEvent);
|
|
12337
12224
|
}
|
|
12338
|
-
element.trigger.addEventListener("click", this.handleEvent);
|
|
12339
|
-
element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
12340
|
-
element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
12341
|
-
element.trigger.addEventListener("focus", this.handleEvent);
|
|
12342
|
-
element.trigger.addEventListener("blur", this.handleEvent);
|
|
12225
|
+
this.element.trigger.addEventListener("click", this.handleEvent);
|
|
12226
|
+
this.element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
12227
|
+
this.element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
12228
|
+
this.element.trigger.addEventListener("focus", this.handleEvent);
|
|
12229
|
+
this.element.trigger.addEventListener("blur", this.handleEvent);
|
|
12343
12230
|
}
|
|
12344
12231
|
}
|
|
12345
12232
|
|
|
12346
12233
|
disconnect() {
|
|
12347
12234
|
this.cleanupHideHandlers();
|
|
12235
|
+
if (this.element) {
|
|
12236
|
+
this.element.cleanup?.();
|
|
12348
12237
|
|
|
12349
|
-
|
|
12350
|
-
|
|
12351
|
-
|
|
12352
|
-
}
|
|
12353
|
-
|
|
12354
|
-
element.cleanup?.();
|
|
12355
|
-
|
|
12356
|
-
if (element.bib && element.shadowRoot) {
|
|
12357
|
-
element.shadowRoot.append(element.bib);
|
|
12358
|
-
}
|
|
12238
|
+
if (this.element.bib) {
|
|
12239
|
+
this.element.shadowRoot.append(this.element.bib);
|
|
12240
|
+
}
|
|
12359
12241
|
|
|
12360
|
-
|
|
12361
|
-
|
|
12362
|
-
|
|
12363
|
-
|
|
12364
|
-
|
|
12365
|
-
|
|
12366
|
-
|
|
12367
|
-
|
|
12242
|
+
// Remove event & keyboard listeners
|
|
12243
|
+
if (this.element?.trigger) {
|
|
12244
|
+
this.element.trigger.removeEventListener("keydown", this.handleEvent);
|
|
12245
|
+
this.element.trigger.removeEventListener("click", this.handleEvent);
|
|
12246
|
+
this.element.trigger.removeEventListener(
|
|
12247
|
+
"mouseenter",
|
|
12248
|
+
this.handleEvent,
|
|
12249
|
+
);
|
|
12250
|
+
this.element.trigger.removeEventListener(
|
|
12251
|
+
"mouseleave",
|
|
12252
|
+
this.handleEvent,
|
|
12253
|
+
);
|
|
12254
|
+
this.element.trigger.removeEventListener("focus", this.handleEvent);
|
|
12255
|
+
this.element.trigger.removeEventListener("blur", this.handleEvent);
|
|
12256
|
+
}
|
|
12368
12257
|
}
|
|
12369
12258
|
}
|
|
12370
12259
|
}
|
|
@@ -13492,7 +13381,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$1 {
|
|
|
13492
13381
|
}
|
|
13493
13382
|
};
|
|
13494
13383
|
|
|
13495
|
-
var formkitVersion$1 = '
|
|
13384
|
+
var formkitVersion$1 = '202604072118';
|
|
13496
13385
|
|
|
13497
13386
|
let AuroElement$2 = class AuroElement extends i$1 {
|
|
13498
13387
|
static get properties() {
|
|
@@ -21256,7 +21145,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
|
|
|
21256
21145
|
}
|
|
21257
21146
|
};
|
|
21258
21147
|
|
|
21259
|
-
var formkitVersion = '
|
|
21148
|
+
var formkitVersion = '202604072118';
|
|
21260
21149
|
|
|
21261
21150
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
21262
21151
|
// See LICENSE in the project root for license information.
|