@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
|
@@ -9549,7 +9549,7 @@ class AuroBibtemplate extends i$1 {
|
|
|
9549
9549
|
}
|
|
9550
9550
|
}
|
|
9551
9551
|
|
|
9552
|
-
var formkitVersion$2 = '
|
|
9552
|
+
var formkitVersion$2 = '202604072118';
|
|
9553
9553
|
|
|
9554
9554
|
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}
|
|
9555
9555
|
`,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}}
|
|
@@ -11883,19 +11883,11 @@ class AuroFloatingUI {
|
|
|
11883
11883
|
* This ensures that the bib content has the same dimensions as the sizer element.
|
|
11884
11884
|
*/
|
|
11885
11885
|
mirrorSize() {
|
|
11886
|
-
const element = this.element;
|
|
11887
|
-
if (!element) {
|
|
11888
|
-
return;
|
|
11889
|
-
}
|
|
11890
|
-
|
|
11891
11886
|
// mirror the boxsize from bibSizer
|
|
11892
|
-
if (element.bibSizer && element.matchWidth
|
|
11893
|
-
const sizerStyle = window.getComputedStyle(element.bibSizer);
|
|
11894
|
-
const bibContent =
|
|
11895
|
-
|
|
11896
|
-
return;
|
|
11897
|
-
}
|
|
11898
|
-
|
|
11887
|
+
if (this.element.bibSizer && this.element.matchWidth) {
|
|
11888
|
+
const sizerStyle = window.getComputedStyle(this.element.bibSizer);
|
|
11889
|
+
const bibContent =
|
|
11890
|
+
this.element.bib.shadowRoot.querySelector(".container");
|
|
11899
11891
|
if (sizerStyle.width !== "0px") {
|
|
11900
11892
|
bibContent.style.width = sizerStyle.width;
|
|
11901
11893
|
}
|
|
@@ -11917,14 +11909,9 @@ class AuroFloatingUI {
|
|
|
11917
11909
|
* @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
|
|
11918
11910
|
*/
|
|
11919
11911
|
getPositioningStrategy() {
|
|
11920
|
-
const element = this.element;
|
|
11921
|
-
if (!element) {
|
|
11922
|
-
return "floating";
|
|
11923
|
-
}
|
|
11924
|
-
|
|
11925
11912
|
const breakpoint =
|
|
11926
|
-
element.bib
|
|
11927
|
-
element.floaterConfig?.fullscreenBreakpoint;
|
|
11913
|
+
this.element.bib.mobileFullscreenBreakpoint ||
|
|
11914
|
+
this.element.floaterConfig?.fullscreenBreakpoint;
|
|
11928
11915
|
switch (this.behavior) {
|
|
11929
11916
|
case "tooltip":
|
|
11930
11917
|
return "floating";
|
|
@@ -11935,9 +11922,9 @@ class AuroFloatingUI {
|
|
|
11935
11922
|
`(max-width: ${breakpoint})`,
|
|
11936
11923
|
).matches;
|
|
11937
11924
|
|
|
11938
|
-
element.expanded = smallerThanBreakpoint;
|
|
11925
|
+
this.element.expanded = smallerThanBreakpoint;
|
|
11939
11926
|
}
|
|
11940
|
-
if (element.nested) {
|
|
11927
|
+
if (this.element.nested) {
|
|
11941
11928
|
return "cover";
|
|
11942
11929
|
}
|
|
11943
11930
|
return "fullscreen";
|
|
@@ -11967,65 +11954,42 @@ class AuroFloatingUI {
|
|
|
11967
11954
|
* and applies the calculated position to the bib's style.
|
|
11968
11955
|
*/
|
|
11969
11956
|
position() {
|
|
11970
|
-
const element = this.element;
|
|
11971
|
-
if (!element) {
|
|
11972
|
-
return;
|
|
11973
|
-
}
|
|
11974
|
-
|
|
11975
11957
|
const strategy = this.getPositioningStrategy();
|
|
11976
11958
|
this.configureBibStrategy(strategy);
|
|
11977
11959
|
|
|
11978
11960
|
if (strategy === "floating") {
|
|
11979
|
-
if (!element.trigger || !element.bib) {
|
|
11980
|
-
return;
|
|
11981
|
-
}
|
|
11982
|
-
|
|
11983
11961
|
this.mirrorSize();
|
|
11984
11962
|
// Define the middlware for the floater configuration
|
|
11985
11963
|
const middleware = [
|
|
11986
|
-
offset(element.floaterConfig?.offset || 0),
|
|
11987
|
-
...(element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
|
|
11988
|
-
...(element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
|
|
11989
|
-
...(element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
|
|
11964
|
+
offset(this.element.floaterConfig?.offset || 0),
|
|
11965
|
+
...(this.element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
|
|
11966
|
+
...(this.element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
|
|
11967
|
+
...(this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
|
|
11990
11968
|
];
|
|
11991
11969
|
|
|
11992
11970
|
// Compute the position of the bib
|
|
11993
|
-
computePosition(element.trigger, element.bib, {
|
|
11994
|
-
strategy: element.floaterConfig?.strategy || "fixed",
|
|
11995
|
-
placement: element.floaterConfig?.placement,
|
|
11971
|
+
computePosition(this.element.trigger, this.element.bib, {
|
|
11972
|
+
strategy: this.element.floaterConfig?.strategy || "fixed",
|
|
11973
|
+
placement: this.element.floaterConfig?.placement,
|
|
11996
11974
|
middleware: middleware || [],
|
|
11997
11975
|
}).then(({ x, y }) => {
|
|
11998
11976
|
// eslint-disable-line id-length
|
|
11999
|
-
|
|
12000
|
-
if (!currentElement?.bib) {
|
|
12001
|
-
return;
|
|
12002
|
-
}
|
|
12003
|
-
|
|
12004
|
-
Object.assign(currentElement.bib.style, {
|
|
11977
|
+
Object.assign(this.element.bib.style, {
|
|
12005
11978
|
left: `${x}px`,
|
|
12006
11979
|
top: `${y}px`,
|
|
12007
11980
|
});
|
|
12008
11981
|
});
|
|
12009
11982
|
} else if (strategy === "cover") {
|
|
12010
|
-
if (!element.parentNode || !element.bib) {
|
|
12011
|
-
return;
|
|
12012
|
-
}
|
|
12013
|
-
|
|
12014
11983
|
// Compute the position of the bib
|
|
12015
|
-
computePosition(element.parentNode, element.bib, {
|
|
11984
|
+
computePosition(this.element.parentNode, this.element.bib, {
|
|
12016
11985
|
placement: "bottom-start",
|
|
12017
11986
|
}).then(({ x, y }) => {
|
|
12018
11987
|
// eslint-disable-line id-length
|
|
12019
|
-
|
|
12020
|
-
if (!currentElement?.bib || !currentElement.parentNode) {
|
|
12021
|
-
return;
|
|
12022
|
-
}
|
|
12023
|
-
|
|
12024
|
-
Object.assign(currentElement.bib.style, {
|
|
11988
|
+
Object.assign(this.element.bib.style, {
|
|
12025
11989
|
left: `${x}px`,
|
|
12026
|
-
top: `${y -
|
|
12027
|
-
width: `${
|
|
12028
|
-
height: `${
|
|
11990
|
+
top: `${y - this.element.parentNode.offsetHeight}px`,
|
|
11991
|
+
width: `${this.element.parentNode.offsetWidth}px`,
|
|
11992
|
+
height: `${this.element.parentNode.offsetHeight}px`,
|
|
12029
11993
|
});
|
|
12030
11994
|
});
|
|
12031
11995
|
}
|
|
@@ -12037,17 +12001,11 @@ class AuroFloatingUI {
|
|
|
12037
12001
|
* @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
|
|
12038
12002
|
*/
|
|
12039
12003
|
lockScroll(lock = true) {
|
|
12040
|
-
const element = this.element;
|
|
12041
|
-
|
|
12042
12004
|
if (lock) {
|
|
12043
|
-
if (!element?.bib) {
|
|
12044
|
-
return;
|
|
12045
|
-
}
|
|
12046
|
-
|
|
12047
12005
|
document.body.style.overflow = "hidden"; // hide body's scrollbar
|
|
12048
12006
|
|
|
12049
12007
|
// Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
|
|
12050
|
-
element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
|
|
12008
|
+
this.element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
|
|
12051
12009
|
} else {
|
|
12052
12010
|
document.body.style.overflow = "";
|
|
12053
12011
|
}
|
|
@@ -12063,24 +12021,20 @@ class AuroFloatingUI {
|
|
|
12063
12021
|
* @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
|
|
12064
12022
|
*/
|
|
12065
12023
|
configureBibStrategy(value) {
|
|
12066
|
-
const element = this.element;
|
|
12067
|
-
if (!element?.bib) {
|
|
12068
|
-
return;
|
|
12069
|
-
}
|
|
12070
|
-
|
|
12071
12024
|
if (value === "fullscreen") {
|
|
12072
|
-
element.isBibFullscreen = true;
|
|
12025
|
+
this.element.isBibFullscreen = true;
|
|
12073
12026
|
// reset the prev position
|
|
12074
|
-
element.bib.setAttribute("isfullscreen", "");
|
|
12075
|
-
element.bib.style.position = "fixed";
|
|
12076
|
-
element.bib.style.top = "0px";
|
|
12077
|
-
element.bib.style.left = "0px";
|
|
12078
|
-
element.bib.style.width = "";
|
|
12079
|
-
element.bib.style.height = "";
|
|
12080
|
-
element.style.contain = "";
|
|
12027
|
+
this.element.bib.setAttribute("isfullscreen", "");
|
|
12028
|
+
this.element.bib.style.position = "fixed";
|
|
12029
|
+
this.element.bib.style.top = "0px";
|
|
12030
|
+
this.element.bib.style.left = "0px";
|
|
12031
|
+
this.element.bib.style.width = "";
|
|
12032
|
+
this.element.bib.style.height = "";
|
|
12033
|
+
this.element.style.contain = "";
|
|
12081
12034
|
|
|
12082
12035
|
// reset the size that was mirroring `size` css-part
|
|
12083
|
-
const bibContent =
|
|
12036
|
+
const bibContent =
|
|
12037
|
+
this.element.bib.shadowRoot.querySelector(".container");
|
|
12084
12038
|
if (bibContent) {
|
|
12085
12039
|
bibContent.style.width = "";
|
|
12086
12040
|
bibContent.style.height = "";
|
|
@@ -12095,14 +12049,14 @@ class AuroFloatingUI {
|
|
|
12095
12049
|
}, 0);
|
|
12096
12050
|
}
|
|
12097
12051
|
|
|
12098
|
-
if (element.isPopoverVisible) {
|
|
12052
|
+
if (this.element.isPopoverVisible) {
|
|
12099
12053
|
this.lockScroll(true);
|
|
12100
12054
|
}
|
|
12101
12055
|
} else {
|
|
12102
|
-
element.bib.style.position = "";
|
|
12103
|
-
element.bib.removeAttribute("isfullscreen");
|
|
12104
|
-
element.isBibFullscreen = false;
|
|
12105
|
-
element.style.contain = "layout";
|
|
12056
|
+
this.element.bib.style.position = "";
|
|
12057
|
+
this.element.bib.removeAttribute("isfullscreen");
|
|
12058
|
+
this.element.isBibFullscreen = false;
|
|
12059
|
+
this.element.style.contain = "layout";
|
|
12106
12060
|
}
|
|
12107
12061
|
|
|
12108
12062
|
const isChanged = this.strategy && this.strategy !== value;
|
|
@@ -12120,21 +12074,16 @@ class AuroFloatingUI {
|
|
|
12120
12074
|
},
|
|
12121
12075
|
);
|
|
12122
12076
|
|
|
12123
|
-
element.dispatchEvent(event);
|
|
12077
|
+
this.element.dispatchEvent(event);
|
|
12124
12078
|
}
|
|
12125
12079
|
}
|
|
12126
12080
|
|
|
12127
12081
|
updateState() {
|
|
12128
|
-
const
|
|
12129
|
-
if (!element) {
|
|
12130
|
-
return;
|
|
12131
|
-
}
|
|
12132
|
-
|
|
12133
|
-
const isVisible = element.isPopoverVisible;
|
|
12082
|
+
const isVisible = this.element.isPopoverVisible;
|
|
12134
12083
|
if (!isVisible) {
|
|
12135
12084
|
this.cleanupHideHandlers();
|
|
12136
12085
|
try {
|
|
12137
|
-
element.cleanup?.();
|
|
12086
|
+
this.element.cleanup?.();
|
|
12138
12087
|
} catch (error) {
|
|
12139
12088
|
// Do nothing
|
|
12140
12089
|
}
|
|
@@ -12150,30 +12099,28 @@ class AuroFloatingUI {
|
|
|
12150
12099
|
* If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
|
|
12151
12100
|
*/
|
|
12152
12101
|
handleFocusLoss() {
|
|
12153
|
-
const element = this.element;
|
|
12154
|
-
if (!element?.bib) {
|
|
12155
|
-
return;
|
|
12156
|
-
}
|
|
12157
|
-
|
|
12158
12102
|
// if mouse is being pressed, skip and let click event to handle the action
|
|
12159
12103
|
if (AuroFloatingUI.isMousePressed) {
|
|
12160
12104
|
return;
|
|
12161
12105
|
}
|
|
12162
12106
|
|
|
12163
12107
|
if (
|
|
12164
|
-
element.noHideOnThisFocusLoss ||
|
|
12165
|
-
element.hasAttribute("noHideOnThisFocusLoss")
|
|
12108
|
+
this.element.noHideOnThisFocusLoss ||
|
|
12109
|
+
this.element.hasAttribute("noHideOnThisFocusLoss")
|
|
12166
12110
|
) {
|
|
12167
12111
|
return;
|
|
12168
12112
|
}
|
|
12169
12113
|
|
|
12170
12114
|
// if focus is still inside of trigger or bib, do not close
|
|
12171
|
-
if (
|
|
12115
|
+
if (
|
|
12116
|
+
this.element.matches(":focus") ||
|
|
12117
|
+
this.element.matches(":focus-within")
|
|
12118
|
+
) {
|
|
12172
12119
|
return;
|
|
12173
12120
|
}
|
|
12174
12121
|
|
|
12175
12122
|
// if fullscreen bib is in fullscreen mode, do not close
|
|
12176
|
-
if (element.bib.hasAttribute("isfullscreen")) {
|
|
12123
|
+
if (this.element.bib.hasAttribute("isfullscreen")) {
|
|
12177
12124
|
return;
|
|
12178
12125
|
}
|
|
12179
12126
|
|
|
@@ -12181,33 +12128,23 @@ class AuroFloatingUI {
|
|
|
12181
12128
|
}
|
|
12182
12129
|
|
|
12183
12130
|
setupHideHandlers() {
|
|
12184
|
-
const element = this.element;
|
|
12185
|
-
if (!element) {
|
|
12186
|
-
return;
|
|
12187
|
-
}
|
|
12188
|
-
|
|
12189
12131
|
// Define handlers & store references
|
|
12190
12132
|
this.focusHandler = () => this.handleFocusLoss();
|
|
12191
12133
|
|
|
12192
12134
|
this.clickHandler = (evt) => {
|
|
12193
|
-
const element = this.element;
|
|
12194
|
-
if (!element?.bib) {
|
|
12195
|
-
return;
|
|
12196
|
-
}
|
|
12197
|
-
|
|
12198
12135
|
// When the bib is fullscreen (modal dialog), don't close on outside
|
|
12199
12136
|
// clicks. VoiceOver's synthetic click events inside a top-layer modal
|
|
12200
12137
|
// <dialog> may not include the bib in composedPath(), causing false
|
|
12201
12138
|
// positives. This mirrors the fullscreen guard in handleFocusLoss().
|
|
12202
|
-
if (element.bib.hasAttribute("isfullscreen")) {
|
|
12139
|
+
if (this.element.bib && this.element.bib.hasAttribute("isfullscreen")) {
|
|
12203
12140
|
return;
|
|
12204
12141
|
}
|
|
12205
12142
|
|
|
12206
12143
|
if (
|
|
12207
|
-
(!evt.composedPath().includes(element.trigger) &&
|
|
12208
|
-
!evt.composedPath().includes(element.bib)) ||
|
|
12209
|
-
(element.bib.backdrop &&
|
|
12210
|
-
evt.composedPath().includes(element.bib.backdrop))
|
|
12144
|
+
(!evt.composedPath().includes(this.element.trigger) &&
|
|
12145
|
+
!evt.composedPath().includes(this.element.bib)) ||
|
|
12146
|
+
(this.element.bib.backdrop &&
|
|
12147
|
+
evt.composedPath().includes(this.element.bib.backdrop))
|
|
12211
12148
|
) {
|
|
12212
12149
|
const existedVisibleFloatingUI =
|
|
12213
12150
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
@@ -12228,12 +12165,7 @@ class AuroFloatingUI {
|
|
|
12228
12165
|
|
|
12229
12166
|
// ESC key handler
|
|
12230
12167
|
this.keyDownHandler = (evt) => {
|
|
12231
|
-
|
|
12232
|
-
if (!element) {
|
|
12233
|
-
return;
|
|
12234
|
-
}
|
|
12235
|
-
|
|
12236
|
-
if (evt.key === "Escape" && element.isPopoverVisible) {
|
|
12168
|
+
if (evt.key === "Escape" && this.element.isPopoverVisible) {
|
|
12237
12169
|
const existedVisibleFloatingUI =
|
|
12238
12170
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
12239
12171
|
if (
|
|
@@ -12290,10 +12222,6 @@ class AuroFloatingUI {
|
|
|
12290
12222
|
}
|
|
12291
12223
|
|
|
12292
12224
|
updateCurrentExpandedDropdown() {
|
|
12293
|
-
if (!this.element) {
|
|
12294
|
-
return;
|
|
12295
|
-
}
|
|
12296
|
-
|
|
12297
12225
|
// Close any other dropdown that is already open
|
|
12298
12226
|
const existedVisibleFloatingUI =
|
|
12299
12227
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
@@ -12310,34 +12238,25 @@ class AuroFloatingUI {
|
|
|
12310
12238
|
}
|
|
12311
12239
|
|
|
12312
12240
|
showBib() {
|
|
12313
|
-
|
|
12314
|
-
if (!element) {
|
|
12315
|
-
return;
|
|
12316
|
-
}
|
|
12317
|
-
|
|
12318
|
-
if (!element.bib || (!element.trigger && !element.parentNode)) {
|
|
12319
|
-
return;
|
|
12320
|
-
}
|
|
12321
|
-
|
|
12322
|
-
if (!element.disabled && !this.showing) {
|
|
12241
|
+
if (!this.element.disabled && !this.showing) {
|
|
12323
12242
|
this.updateCurrentExpandedDropdown();
|
|
12324
|
-
element.triggerChevron?.setAttribute("data-expanded", true);
|
|
12243
|
+
this.element.triggerChevron?.setAttribute("data-expanded", true);
|
|
12325
12244
|
|
|
12326
12245
|
// prevent double showing: isPopovervisible gets first and showBib gets called later
|
|
12327
12246
|
if (!this.showing) {
|
|
12328
|
-
if (!element.modal) {
|
|
12247
|
+
if (!this.element.modal) {
|
|
12329
12248
|
this.setupHideHandlers();
|
|
12330
12249
|
}
|
|
12331
12250
|
this.showing = true;
|
|
12332
|
-
element.isPopoverVisible = true;
|
|
12251
|
+
this.element.isPopoverVisible = true;
|
|
12333
12252
|
this.position();
|
|
12334
12253
|
this.dispatchEventDropdownToggle();
|
|
12335
12254
|
}
|
|
12336
12255
|
|
|
12337
12256
|
// Setup auto update to handle resize and scroll
|
|
12338
|
-
element.cleanup = autoUpdate(
|
|
12339
|
-
element.trigger || element.parentNode,
|
|
12340
|
-
element.bib,
|
|
12257
|
+
this.element.cleanup = autoUpdate(
|
|
12258
|
+
this.element.trigger || this.element.parentNode,
|
|
12259
|
+
this.element.bib,
|
|
12341
12260
|
() => {
|
|
12342
12261
|
this.position();
|
|
12343
12262
|
},
|
|
@@ -12350,27 +12269,22 @@ class AuroFloatingUI {
|
|
|
12350
12269
|
* @param {String} eventType - The event type that triggered the hiding action.
|
|
12351
12270
|
*/
|
|
12352
12271
|
hideBib(eventType = "unknown") {
|
|
12353
|
-
|
|
12354
|
-
if (!element) {
|
|
12355
|
-
return;
|
|
12356
|
-
}
|
|
12357
|
-
|
|
12358
|
-
if (element.disabled) {
|
|
12272
|
+
if (this.element.disabled) {
|
|
12359
12273
|
return;
|
|
12360
12274
|
}
|
|
12361
12275
|
|
|
12362
12276
|
// noToggle dropdowns should not close when the trigger is clicked (the
|
|
12363
12277
|
// "toggle" behavior), but they CAN still close via other interactions like
|
|
12364
12278
|
// Escape key or focus loss.
|
|
12365
|
-
if (element.noToggle && eventType === "click") {
|
|
12279
|
+
if (this.element.noToggle && eventType === "click") {
|
|
12366
12280
|
return;
|
|
12367
12281
|
}
|
|
12368
12282
|
|
|
12369
12283
|
this.lockScroll(false);
|
|
12370
|
-
element.triggerChevron?.removeAttribute("data-expanded");
|
|
12284
|
+
this.element.triggerChevron?.removeAttribute("data-expanded");
|
|
12371
12285
|
|
|
12372
|
-
if (element.isPopoverVisible) {
|
|
12373
|
-
element.isPopoverVisible = false;
|
|
12286
|
+
if (this.element.isPopoverVisible) {
|
|
12287
|
+
this.element.isPopoverVisible = false;
|
|
12374
12288
|
}
|
|
12375
12289
|
if (this.showing) {
|
|
12376
12290
|
this.cleanupHideHandlers();
|
|
@@ -12390,11 +12304,6 @@ class AuroFloatingUI {
|
|
|
12390
12304
|
* @param {String} eventType - The event type that triggered the toggle action.
|
|
12391
12305
|
*/
|
|
12392
12306
|
dispatchEventDropdownToggle(eventType) {
|
|
12393
|
-
const element = this.element;
|
|
12394
|
-
if (!element) {
|
|
12395
|
-
return;
|
|
12396
|
-
}
|
|
12397
|
-
|
|
12398
12307
|
const event = new CustomEvent(
|
|
12399
12308
|
this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
|
|
12400
12309
|
{
|
|
@@ -12406,16 +12315,11 @@ class AuroFloatingUI {
|
|
|
12406
12315
|
},
|
|
12407
12316
|
);
|
|
12408
12317
|
|
|
12409
|
-
element.dispatchEvent(event);
|
|
12318
|
+
this.element.dispatchEvent(event);
|
|
12410
12319
|
}
|
|
12411
12320
|
|
|
12412
12321
|
handleClick() {
|
|
12413
|
-
|
|
12414
|
-
if (!element) {
|
|
12415
|
-
return;
|
|
12416
|
-
}
|
|
12417
|
-
|
|
12418
|
-
if (element.isPopoverVisible) {
|
|
12322
|
+
if (this.element.isPopoverVisible) {
|
|
12419
12323
|
this.hideBib("click");
|
|
12420
12324
|
} else {
|
|
12421
12325
|
this.showBib();
|
|
@@ -12426,66 +12330,63 @@ class AuroFloatingUI {
|
|
|
12426
12330
|
{
|
|
12427
12331
|
composed: true,
|
|
12428
12332
|
detail: {
|
|
12429
|
-
expanded: element.isPopoverVisible,
|
|
12333
|
+
expanded: this.element.isPopoverVisible,
|
|
12430
12334
|
},
|
|
12431
12335
|
},
|
|
12432
12336
|
);
|
|
12433
12337
|
|
|
12434
|
-
element.dispatchEvent(event);
|
|
12338
|
+
this.element.dispatchEvent(event);
|
|
12435
12339
|
}
|
|
12436
12340
|
|
|
12437
12341
|
handleEvent(event) {
|
|
12438
|
-
|
|
12439
|
-
|
|
12440
|
-
|
|
12441
|
-
|
|
12442
|
-
|
|
12443
|
-
|
|
12444
|
-
|
|
12445
|
-
|
|
12446
|
-
|
|
12447
|
-
|
|
12448
|
-
|
|
12449
|
-
|
|
12450
|
-
|
|
12451
|
-
|
|
12452
|
-
|
|
12453
|
-
event.preventDefault();
|
|
12454
|
-
this.handleClick();
|
|
12342
|
+
if (!this.element.disableEventShow) {
|
|
12343
|
+
switch (event.type) {
|
|
12344
|
+
case "keydown": {
|
|
12345
|
+
// Support both Enter and Space keys for accessibility
|
|
12346
|
+
// Space is included as it's expected behavior for interactive elements
|
|
12347
|
+
|
|
12348
|
+
const origin = event.composedPath()[0];
|
|
12349
|
+
if (
|
|
12350
|
+
event.key === "Enter" ||
|
|
12351
|
+
(event.key === " " && (!origin || origin.tagName !== "INPUT"))
|
|
12352
|
+
) {
|
|
12353
|
+
event.preventDefault();
|
|
12354
|
+
this.handleClick();
|
|
12355
|
+
}
|
|
12356
|
+
break;
|
|
12455
12357
|
}
|
|
12456
|
-
|
|
12358
|
+
case "mouseenter":
|
|
12359
|
+
if (this.element.hoverToggle) {
|
|
12360
|
+
this.showBib();
|
|
12361
|
+
}
|
|
12362
|
+
break;
|
|
12363
|
+
case "mouseleave":
|
|
12364
|
+
if (this.element.hoverToggle) {
|
|
12365
|
+
this.hideBib("mouseleave");
|
|
12366
|
+
}
|
|
12367
|
+
break;
|
|
12368
|
+
case "focus":
|
|
12369
|
+
if (this.element.focusShow) {
|
|
12370
|
+
/*
|
|
12371
|
+
This needs to better handle clicking that gives focus -
|
|
12372
|
+
currently it shows and then immediately hides the bib
|
|
12373
|
+
*/
|
|
12374
|
+
this.showBib();
|
|
12375
|
+
}
|
|
12376
|
+
break;
|
|
12377
|
+
case "blur":
|
|
12378
|
+
// send this task 100ms later queue to
|
|
12379
|
+
// wait a frame in case focus moves within the floating element/bib
|
|
12380
|
+
setTimeout(() => this.handleFocusLoss(), 0);
|
|
12381
|
+
break;
|
|
12382
|
+
case "click":
|
|
12383
|
+
if (document.activeElement === document.body) {
|
|
12384
|
+
event.currentTarget.focus();
|
|
12385
|
+
}
|
|
12386
|
+
this.handleClick();
|
|
12387
|
+
break;
|
|
12388
|
+
// Do nothing
|
|
12457
12389
|
}
|
|
12458
|
-
case "mouseenter":
|
|
12459
|
-
if (element.hoverToggle) {
|
|
12460
|
-
this.showBib();
|
|
12461
|
-
}
|
|
12462
|
-
break;
|
|
12463
|
-
case "mouseleave":
|
|
12464
|
-
if (element.hoverToggle) {
|
|
12465
|
-
this.hideBib("mouseleave");
|
|
12466
|
-
}
|
|
12467
|
-
break;
|
|
12468
|
-
case "focus":
|
|
12469
|
-
if (element.focusShow) {
|
|
12470
|
-
/*
|
|
12471
|
-
This needs to better handle clicking that gives focus -
|
|
12472
|
-
currently it shows and then immediately hides the bib
|
|
12473
|
-
*/
|
|
12474
|
-
this.showBib();
|
|
12475
|
-
}
|
|
12476
|
-
break;
|
|
12477
|
-
case "blur":
|
|
12478
|
-
// send this task 100ms later queue to
|
|
12479
|
-
// wait a frame in case focus moves within the floating element/bib
|
|
12480
|
-
setTimeout(() => this.handleFocusLoss(), 0);
|
|
12481
|
-
break;
|
|
12482
|
-
case "click":
|
|
12483
|
-
if (document.activeElement === document.body) {
|
|
12484
|
-
event.currentTarget.focus();
|
|
12485
|
-
}
|
|
12486
|
-
this.handleClick();
|
|
12487
|
-
break;
|
|
12488
|
-
// Do nothing
|
|
12489
12390
|
}
|
|
12490
12391
|
}
|
|
12491
12392
|
|
|
@@ -12496,11 +12397,6 @@ class AuroFloatingUI {
|
|
|
12496
12397
|
* This prevents the component itself from being focusable when the trigger element already handles focus.
|
|
12497
12398
|
*/
|
|
12498
12399
|
handleTriggerTabIndex() {
|
|
12499
|
-
const element = this.element;
|
|
12500
|
-
if (!element) {
|
|
12501
|
-
return;
|
|
12502
|
-
}
|
|
12503
|
-
|
|
12504
12400
|
const focusableElementSelectors = [
|
|
12505
12401
|
"a",
|
|
12506
12402
|
"button",
|
|
@@ -12513,7 +12409,7 @@ class AuroFloatingUI {
|
|
|
12513
12409
|
"auro-hyperlink",
|
|
12514
12410
|
];
|
|
12515
12411
|
|
|
12516
|
-
const triggerNode = element.querySelectorAll('[slot="trigger"]')[0];
|
|
12412
|
+
const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
|
|
12517
12413
|
if (!triggerNode) {
|
|
12518
12414
|
return;
|
|
12519
12415
|
}
|
|
@@ -12522,13 +12418,13 @@ class AuroFloatingUI {
|
|
|
12522
12418
|
focusableElementSelectors.forEach((selector) => {
|
|
12523
12419
|
// Check if the trigger node element is focusable
|
|
12524
12420
|
if (triggerNodeTagName === selector) {
|
|
12525
|
-
element.tabIndex = -1;
|
|
12421
|
+
this.element.tabIndex = -1;
|
|
12526
12422
|
return;
|
|
12527
12423
|
}
|
|
12528
12424
|
|
|
12529
12425
|
// Check if any child is focusable
|
|
12530
12426
|
if (triggerNode.querySelector(selector)) {
|
|
12531
|
-
element.tabIndex = -1;
|
|
12427
|
+
this.element.tabIndex = -1;
|
|
12532
12428
|
}
|
|
12533
12429
|
});
|
|
12534
12430
|
}
|
|
@@ -12538,18 +12434,13 @@ class AuroFloatingUI {
|
|
|
12538
12434
|
* @param {*} eventPrefix
|
|
12539
12435
|
*/
|
|
12540
12436
|
regenerateBibId() {
|
|
12541
|
-
|
|
12542
|
-
if (!element) {
|
|
12543
|
-
return;
|
|
12544
|
-
}
|
|
12545
|
-
|
|
12546
|
-
this.id = element.getAttribute("id");
|
|
12437
|
+
this.id = this.element.getAttribute("id");
|
|
12547
12438
|
if (!this.id) {
|
|
12548
12439
|
this.id = window.crypto.randomUUID();
|
|
12549
|
-
element.setAttribute("id", this.id);
|
|
12440
|
+
this.element.setAttribute("id", this.id);
|
|
12550
12441
|
}
|
|
12551
12442
|
|
|
12552
|
-
element.bib
|
|
12443
|
+
this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
|
|
12553
12444
|
}
|
|
12554
12445
|
|
|
12555
12446
|
configure(elem, eventPrefix, enableKeyboardHandling = true) {
|
|
@@ -12561,69 +12452,67 @@ class AuroFloatingUI {
|
|
|
12561
12452
|
this.element = elem;
|
|
12562
12453
|
}
|
|
12563
12454
|
|
|
12564
|
-
|
|
12565
|
-
|
|
12566
|
-
return;
|
|
12455
|
+
if (this.behavior !== this.element.behavior) {
|
|
12456
|
+
this.behavior = this.element.behavior;
|
|
12567
12457
|
}
|
|
12568
12458
|
|
|
12569
|
-
if (this.
|
|
12570
|
-
this.behavior = element.behavior;
|
|
12571
|
-
}
|
|
12572
|
-
|
|
12573
|
-
if (element.trigger) {
|
|
12459
|
+
if (this.element.trigger) {
|
|
12574
12460
|
this.disconnect();
|
|
12575
12461
|
}
|
|
12576
|
-
element.trigger =
|
|
12577
|
-
element.triggerElement ||
|
|
12578
|
-
element.shadowRoot
|
|
12579
|
-
element.trigger;
|
|
12580
|
-
element.bib =
|
|
12581
|
-
|
|
12582
|
-
element.
|
|
12583
|
-
|
|
12462
|
+
this.element.trigger =
|
|
12463
|
+
this.element.triggerElement ||
|
|
12464
|
+
this.element.shadowRoot.querySelector("#trigger") ||
|
|
12465
|
+
this.element.trigger;
|
|
12466
|
+
this.element.bib =
|
|
12467
|
+
this.element.shadowRoot.querySelector("#bib") || this.element.bib;
|
|
12468
|
+
this.element.bibSizer = this.element.shadowRoot.querySelector("#bibSizer");
|
|
12469
|
+
this.element.triggerChevron =
|
|
12470
|
+
this.element.shadowRoot.querySelector("#showStateIcon");
|
|
12584
12471
|
|
|
12585
|
-
if (element.floaterConfig) {
|
|
12586
|
-
element.hoverToggle = element.floaterConfig.hoverToggle;
|
|
12472
|
+
if (this.element.floaterConfig) {
|
|
12473
|
+
this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
|
|
12587
12474
|
}
|
|
12588
12475
|
|
|
12589
12476
|
this.regenerateBibId();
|
|
12590
12477
|
this.handleTriggerTabIndex();
|
|
12591
12478
|
|
|
12592
12479
|
this.handleEvent = this.handleEvent.bind(this);
|
|
12593
|
-
if (element.trigger) {
|
|
12480
|
+
if (this.element.trigger) {
|
|
12594
12481
|
if (this.enableKeyboardHandling) {
|
|
12595
|
-
element.trigger.addEventListener("keydown", this.handleEvent);
|
|
12482
|
+
this.element.trigger.addEventListener("keydown", this.handleEvent);
|
|
12596
12483
|
}
|
|
12597
|
-
element.trigger.addEventListener("click", this.handleEvent);
|
|
12598
|
-
element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
12599
|
-
element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
12600
|
-
element.trigger.addEventListener("focus", this.handleEvent);
|
|
12601
|
-
element.trigger.addEventListener("blur", this.handleEvent);
|
|
12484
|
+
this.element.trigger.addEventListener("click", this.handleEvent);
|
|
12485
|
+
this.element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
12486
|
+
this.element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
12487
|
+
this.element.trigger.addEventListener("focus", this.handleEvent);
|
|
12488
|
+
this.element.trigger.addEventListener("blur", this.handleEvent);
|
|
12602
12489
|
}
|
|
12603
12490
|
}
|
|
12604
12491
|
|
|
12605
12492
|
disconnect() {
|
|
12606
12493
|
this.cleanupHideHandlers();
|
|
12494
|
+
if (this.element) {
|
|
12495
|
+
this.element.cleanup?.();
|
|
12607
12496
|
|
|
12608
|
-
|
|
12609
|
-
|
|
12610
|
-
|
|
12611
|
-
}
|
|
12612
|
-
|
|
12613
|
-
element.cleanup?.();
|
|
12614
|
-
|
|
12615
|
-
if (element.bib && element.shadowRoot) {
|
|
12616
|
-
element.shadowRoot.append(element.bib);
|
|
12617
|
-
}
|
|
12497
|
+
if (this.element.bib) {
|
|
12498
|
+
this.element.shadowRoot.append(this.element.bib);
|
|
12499
|
+
}
|
|
12618
12500
|
|
|
12619
|
-
|
|
12620
|
-
|
|
12621
|
-
|
|
12622
|
-
|
|
12623
|
-
|
|
12624
|
-
|
|
12625
|
-
|
|
12626
|
-
|
|
12501
|
+
// Remove event & keyboard listeners
|
|
12502
|
+
if (this.element?.trigger) {
|
|
12503
|
+
this.element.trigger.removeEventListener("keydown", this.handleEvent);
|
|
12504
|
+
this.element.trigger.removeEventListener("click", this.handleEvent);
|
|
12505
|
+
this.element.trigger.removeEventListener(
|
|
12506
|
+
"mouseenter",
|
|
12507
|
+
this.handleEvent,
|
|
12508
|
+
);
|
|
12509
|
+
this.element.trigger.removeEventListener(
|
|
12510
|
+
"mouseleave",
|
|
12511
|
+
this.handleEvent,
|
|
12512
|
+
);
|
|
12513
|
+
this.element.trigger.removeEventListener("focus", this.handleEvent);
|
|
12514
|
+
this.element.trigger.removeEventListener("blur", this.handleEvent);
|
|
12515
|
+
}
|
|
12627
12516
|
}
|
|
12628
12517
|
}
|
|
12629
12518
|
}
|
|
@@ -13751,7 +13640,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$1 {
|
|
|
13751
13640
|
}
|
|
13752
13641
|
};
|
|
13753
13642
|
|
|
13754
|
-
var formkitVersion$1 = '
|
|
13643
|
+
var formkitVersion$1 = '202604072118';
|
|
13755
13644
|
|
|
13756
13645
|
let AuroElement$2 = class AuroElement extends i$1 {
|
|
13757
13646
|
static get properties() {
|
|
@@ -21515,7 +21404,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
|
|
|
21515
21404
|
}
|
|
21516
21405
|
};
|
|
21517
21406
|
|
|
21518
|
-
var formkitVersion = '
|
|
21407
|
+
var formkitVersion = '202604072118';
|
|
21519
21408
|
|
|
21520
21409
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
21521
21410
|
// See LICENSE in the project root for license information.
|