UNPKG

@utahdts/utah-design-system-header

Version:
1,685 lines (1,678 loc) 112 kB
const U = { FLYOUT: ( /** @type {ChildrenMenuTypes} */ "flyout" ), INLINE: ( /** @type {ChildrenMenuTypes} */ "inline" ), MEGA_MENU: ( /** @type {ChildrenMenuTypes} */ "mega-menu" ), PLAIN: ( /** @type {ChildrenMenuTypes} */ "plain" ) }, Ie = { BOTTOM: ( /** @type {PopupPlacementType} */ "bottom" ), BOTTOM_START: ( /** @type {PopupPlacementType} */ "bottom-start" ), BOTTOM_END: ( /** @type {PopupPlacementType} */ "bottom-end" ), LEFT: ( /** @type {PopupPlacementType} */ "left" ), LEFT_START: ( /** @type {PopupPlacementType} */ "left-start" ), LEFT_END: ( /** @type {PopupPlacementType} */ "left-end" ), RIGHT: ( /** @type {PopupPlacementType} */ "right" ), RIGHT_START: ( /** @type {PopupPlacementType} */ "right-start" ), RIGHT_END: ( /** @type {PopupPlacementType} */ "right-end" ), TOP: ( /** @type {PopupPlacementType} */ "top" ), TOP_START: ( /** @type {PopupPlacementType} */ "top-start" ), TOP_END: ( /** @type {PopupPlacementType} */ "top-end" ) }, vt = { // Fired when the utah header is first loaded (setUtahHeaderSettings does not trigger this) HEADER_LOADED: ( /** @type {Events} */ "utahHeaderLoaded" ), // Fired when the header unloads by code calling the function removeHeader() (not when settings updated) HEADER_UNLOADED: ( /** @type {Events} */ "utahHeaderUnloaded" ) }, me = { SMALL: ( /** @type {Size} */ "SMALL" ), MEDIUM: ( /** @type {Size} */ "MEDIUM" ), LARGE: ( /** @type {Size} */ "LARGE" ) }, en = `/* @media is never in scope for --variables, so this is the only way to solve this. :-( */ @media screen and (max-width: media-size__tablet-landscape__PLACEHOLDER) { /* put your media query here for tablet landscape */ .utah-design-system .search-modal__input[type=text] { width: 75vw; } } @media screen and (max-width: media-size__tablet-portrait__PLACEHOLDER) { .utds-header-desktop--hidden { display: flex !important; } .utds-header-mobile--hidden { display: none !important; } .utds-header { height: 60px; padding: var(--spacing-xs) var(--spacing); } .utds-title-wrapper { font-size: var(--font-size-xl); } .utds-citizen-experience-wrapper { display: none; } .utds-citizen-experience-wrapper--mobile { display: flex; } .utah-design-system .main-menu__wrapper { padding: 0 var(--spacing); /* The utah id button is this tall, but without it, the menu doesn't fill the space up to the mobile menu content popup */ min-height: 46px; } .utah-design-system .main-menu__nav { display: none; } .utah-design-system.utds-header-mobile-menu, .utah-design-system .utds-header-mobile__utah-id-wrapper { display: block; } .utah-design-system .icon-button.main-menu__hamburger, .utah-design-system .utds-header-mobile__vip-action-items--left, .utah-design-system .utds-header-mobile__vip-action-items--right, .utah-design-system .main-menu__search-placeholder { display: flex; } .utah-design-system .search-modal__input[type=text] { width: 80vw; padding: var(--spacing) var(--spacing) var(--spacing) var(--spacing-3xl); } .utah-design-system .search-modal__button-wrapper { right: unset; left: 50%; transform: translateX(-50%) translateY(110%); } .utah-design-system .search-modal__button.button--solid.button--primary-color { border-color: white; width: max-content; } .utah-design-system .utds-official-website-popup__content { flex-wrap: wrap; gap: var(--spacing-l); } .utah-design-system .utds-official-website-popup__col { width: 100%; } .utah-design-system .utds-official-website-popup__address-bar { width: auto; background-size: contain; background-repeat: no-repeat; } .color-example { flex-direction: column; } .color-example > div:not(:last-child) { margin-bottom: var(--spacing-l); } .search-page { .search-modal__form { margin-bottom: var(--spacing-4xl); } .search-modal__input[type=text] { padding: var(--spacing) var(--spacing) var(--spacing) var(--spacing-3xl); } } } @media screen and (max-width: media-size__mobile__PLACEHOLDER) { /* put your media query here for mobile */ } `; function f(e) { return `.${(Array.isArray(e) ? e : [e]).join(".")}`; } const r = { // Global Information UTAH_DESIGN_SYSTEM: "utah-design-system", HEADER: "utds-header", FOOTER: "utds-footer", // HTML elements ICON_BUTTON: "icon-button", // IDs CSS_HEADER_MEDIA_TAG_ID: "cssHeaderMediaTag", // Modifiers IS_CLOSED: "is-closed", IS_OPEN: "is-open", VISUALLY_HIDDEN: "visually-hidden", // Replacement Placeholders MEDIA_SIZE__MOBILE__PLACEHOLDER: "media-size__mobile__PLACEHOLDER", MEDIA_SIZE__TABLET_LANDSCAPE__PLACEHOLDER: "media-size__tablet-landscape__PLACEHOLDER", MEDIA_SIZE__TABLET_PORTRAIT__PLACEHOLDER: "media-size__tablet-portrait__PLACEHOLDER", // Header Components ACTION_ITEM: "utds-header-action-item", ACTION_ITEM__ICON_BUTTON: "utds-header-action-item__icon-button", ACTION_ITEM__ICON_BUTTON_TITLE: "utds-header-action-item__icon-button--has-title", ACTION_ITEM__TITLE: "utds-header-action-item__title", BADGE__LABEL: "utds-badge__label", BADGE__VALUE: "utds-badge__value", BADGE_WRAPPER__SMALL: "utds-badge__wrapper--small", BADGE_WRAPPER__ACTION_ITEM: "utds-badge__wrapper--action-item", CITIZEN_EXPERIENCE: "utds-citizen-experience-wrapper", CITIZEN_EXPERIENCE_MOBILE: "utds-citizen-experience-wrapper--mobile", FOOTER_COPYRIGHT_YEAR: "utds-footer__copyright-year", FOOTER_HORIZONTAL_DIVIDER: "utds-footer__horizontal-divider", FOOTER_LINK_PRIVACY_ID: "utds-footer-privacy-link", FOOTER_LINK_TERMS_ID: "utds-footer-terms-link", FOOTER_LINKS: "utds-footer__links", LOGO: "utds-logo-wrapper", LOGO_OFFICIAL_CLOSE_BUTTON: "utds-official-website-popup__close-button", LOGO_OFFICIAL_WRAPPER: "utds-official-website-popup__wrapper", LOGO_SVG: "utah-logo-svg", MAIN_MENU: "main-menu__wrapper", MAIN_MENU__HAMBURGER_ID: "utds-main-menu__hamburger", MAIN_MENU__HAMBURGER_ICON_ID: "utds-main-menu__hamburger-icon", MAIN_MENU__MENU_TOP: "main-menu__menu-top", MAIN_MENU__NAV: "main-menu__nav", MAIN_MENU__OUTER: "main-menu__outer", MAIN_MENU__REMOVED: "main-menu-is-removed", MAIN_MENU__SEARCH: "main-menu__search", MENU_ITEM__ARROW: "menu-item__menu-arrow", MENU_ITEM__BUTTON_TITLE: "menu-item__button-title", MENU_ITEM__LINK_TITLE: "menu-item__link-title", MENU_ITEM__LINK_TITLE_SPAN: "menu-item__link-title-span", MENU_ITEM__SELECTED: "menu-item--selected", MENU_ITEM__SELECTED_PARENT: "menu-item--selected_parent", MENU_ITEM__TITLE: "menu-item__title", MENU_ITEM__FLY_OUT: "menu-item--fly_out", MENU_ITEM__INLINE: "menu-item--inline", MENU_ITEM__MEGA_MENU: "menu-item--mega-menu", DESKTOP__HIDDEN: "utds-header-desktop--hidden", MOBILE__HIDDEN: "utds-header-mobile--hidden", MOBILE__UTAH_ID: "utds-header-mobile__utah-id-wrapper", ACTION_ITEM__SELECTED: "utds-header-mobile-menu__action-item--selected", MOBILE_MENU: "utds-header-mobile-menu", MOBILE_MENU__ACTION_BAR: "utds-header-mobile-menu__action-bar", MOBILE_MENU__BACKDROP: "utds-header-mobile-menu__backdrop", MOBILE_MENU__CONTENT: "utds-header-mobile-menu__content", MOBILE_MENU__CONTENT_ITEM: "utds-header-mobile-menu__content-item", MOBILE_MENU__LAST_FOCUSABLE: "utds-header-mobile-menu__hidden-last-focusable", MOBILE_MENU__WRAPPER: "utds-header-mobile-menu__wrapper", MOBILE_MENU_ACTON_BAR__HOME_ID: "utds-header-mobile-menu_action-bar__home", MOBILE_MENU_ACTON_BAR__PROFILE_ID: "utds-header-mobile-menu_action-bar__profile", MOBILE_MENU_ACTION_BAR__ACTION_ITEM_WRAPPER: "utds-header-mobile-menu__action-item", VERTICAL_MENU__BUTTON_TITLE: "vertical-menu__button-title", VERTICAL_MENU__CHEVRON: "vertical-menu__chevron", VERTICAL_MENU__DIVIDER: "vertical-menu__divider", VERTICAL_MENU__LINK_TEXT: "vertical-menu__link-text", VERTICAL_MENU__LINK_TITLE: "vertical-menu__link-title", VERTICAL_MENU__PLAIN_TITLE: "vertical-menu__plain-title", VERTICAL_MENU__TITLE: "vertical-menu__title", VERTICAL_MENU_WRAPPER__WRAPPER_TITLE: "vertical-menu__wrapper-title", POPUP__HIDDEN: "popup__wrapper--hidden", POPUP__VISIBLE: "popup__wrapper--visible", POPUP_ARROW: "popup__arrow", POPUP_CONTENT_WRAPPER: "popup__content", POPUP_WRAPPER: "popup__wrapper", SEARCH__SEARCH_BACKDROP: "search-backdrop", SEARCH__SEARCH_CLOSE_BUTTON: "search-modal__close-button", SEARCH__SEARCH_BUTTON: "search-modal__button", SEARCH__SEARCH_BUTTON_WRAPPER: "search-modal__button-wrapper", SEARCH__SEARCH_INPUT: "search-modal__input", SEARCH__SEARCH_MODAL: "search-modal", SKIP_LINK_LINK: "skip-link__link", SKIP_LINK_WRAPPER: "skip-link__wrapper", TITLE__LOGO: "utds-title-wrapper__logo", TITLE__TITLE: "utds-title-wrapper__title", TOOLTIP__ARROW: "tooltip__arrow", TOOLTIP__CONTENT: "tooltip__content", TOOLTIP__WRAPPER: "tooltip__wrapper", TOOLTIP__WRAPPER__HIDDEN: "tooltip__wrapper--hidden", TOOLTIP__WRAPPER__VISIBLE: "tooltip__wrapper--visible", UTAH_ID: "utds-utah-id-wrapper", UTAH_ID__BUTTON: "utds-utah-id__button" }; function R(e, t) { if (e) throw new Error(t); } function T(e, t) { if (e == null) throw new Error(t); return e; } function at(e) { return typeof e == "string" || e instanceof String; } function tn(e) { const t = new DOMParser(); let n; if (at(e)) { const o = ( /** @type {Document} */ at(e) ? t.parseFromString(e, "text/html") : e ), i = o.body.children.length > 1 ? o.body.children : o.body.children.item(0); if (!i) throw console.error(e), new Error("renderDOM: nothing rendered"); n = i; } else if ( /** @type {unknown} */ e instanceof Element ) n = e; else throw e ? (console.error(e), new Error(`renderDOM: str is not a string nor a DOM Element : '${e}'`)) : new Error("renderDOM: falsy string passed; cannot render nothing"); return n; } function g(e) { const t = typeof e == "string" ? tn(e) : e; if (t instanceof HTMLCollection && t.length > 1) throw new Error("renderDOMSingle: must render a single element"); const n = ( /** @type {HTMLElement | null} */ t instanceof HTMLCollection ? t[0] : t ); if (!n) throw console.error(e), new Error("renderDOMSingle: nothing rendered"); return n; } const ye = { // @ts-expect-error a blank string is not a valid value; applicationType needs set in the header settings by the application applicationType: "", onSearch: !1, mainMenu: !1, mediaSizes: { mobile: 640, tabletPortrait: 768, tabletLandscape: 1024 }, showTitle: !0, size: me.MEDIUM, skipLinkUrl: "#main-content", title: "My Utah.gov Site", titleUrl: "/", utahId: !1 }; function nn(e) { if (!e.showTitle && !e.logo) throw new Error("validateSettings: A title must be shown if there is no logo. Please change the `showTitle` setting to be `true` or provide a logo image."); } class on { constructor() { this.settings = { ...ye }; } /** * @param {SettingsInput} settings */ setSettings(t) { const n = { ...ye, ...this.settings, ...t }; nn(n), this.settings = n; } /** * @returns {Settings} */ getSettings() { return this.settings; } /** * Mainly for testing purposes? since tests will want a fresh slate every time, and calling * setUtahHeaderSettings() does a merge of the settings, this puts settings back to blank * starting settings */ clearSettings() { this.settings = { ...ye }; } } const Se = new on(); function M() { return Se.getSettings(); } function w() { return ( // @ts-expect-error this is some funky shtuff ("10000000-1000-4000-8000" + -1e11).replace( /[018]/g, /** * @param {number} c * @returns {string} */ // eslint-disable-next-line no-bitwise (e) => (e ^ T(crypto.getRandomValues(new Uint8Array(1))[0], "uuidv4: crypto") & (15 >> e) / 4).toString(16) ) ); } const rn = `<div class="utds-header-mobile-menu__content-item" role="tabpanel"> </div> `; function Ke(e) { const t = document.querySelector(f(r.MOBILE_MENU__WRAPPER)); if (!t) throw new Error("addMobileMenuContentItem: mobileMenuWrapper not found"); const n = t.querySelector(f(r.MOBILE_MENU__CONTENT)); if (!n) throw new Error("addMobileMenuContentItem: mobileContentWrapper not found"); const o = g(rn); return o.appendChild(e), n.appendChild(o), o.setAttribute("id", w()), o; } function W(e) { return e instanceof Function ? e() : e; } function ge(e) { const t = ( /** @type {HTMLElement} */ T( document.querySelector(f(r.MOBILE_MENU)), `${e}: mobileMenu not found` ) ), n = document.getElementById(r.MAIN_MENU__HAMBURGER_ID), o = document.getElementById(r.MAIN_MENU__HAMBURGER_ICON_ID); return { hamburger: n, hamburgerIcon: o, mobileMenu: t }; } function be() { const { hamburger: e, hamburgerIcon: t, mobileMenu: n } = ge("hideMobileMenu"); e?.setAttribute("aria-expanded", "false"), n.classList.remove(r.IS_OPEN), e?.setAttribute("aria-label", "Open the mobile menu"), t?.classList.add("utds-icon-before-hamburger"), t?.classList.remove("utds-icon-before-x-icon"), document.body.style.position = ""; } function sn() { document.querySelector(f(r.MAIN_MENU))?.classList.contains(r.MOBILE__HIDDEN) && document.querySelector(`${f(r.UTAH_DESIGN_SYSTEM)}${f(r.MOBILE_MENU)}`)?.classList.add(r.MAIN_MENU__REMOVED); const { hamburger: t, hamburgerIcon: n, mobileMenu: o } = ge("showMobileMenu"); t?.setAttribute("aria-expanded", "true"), o.classList.add(r.IS_OPEN), t?.setAttribute("aria-label", "Close the mobile menu"), n?.classList.remove("utds-icon-before-hamburger"), n?.classList.add("utds-icon-before-x-icon"), document.body.style.position = "relative"; } function We(e, t) { e.querySelectorAll(f(r.MOBILE_MENU_ACTION_BAR__ACTION_ITEM_WRAPPER)).forEach((o) => { o.classList.remove(r.ACTION_ITEM__SELECTED); const i = o.querySelector("button"); if (!i) throw new Error("showActionItem: actionWrapper does not have actionItem A"); i.setAttribute("aria-selected", "false"), i.setAttribute("tabIndex", "-1"); }), t.classList.add(r.ACTION_ITEM__SELECTED); const n = t.querySelector("button"); if (!n) throw new Error("showActionItem: actionWrapper does not have actionItem B"); n.setAttribute("aria-selected", "true"), n.removeAttribute("tabIndex"), n.focus(); } function ct(e, t) { e.querySelectorAll(f(r.MOBILE_MENU__CONTENT_ITEM)).forEach((n) => n.classList.remove(r.IS_OPEN)), t.classList.add(r.IS_OPEN); } function Ze(e, t, n, { ariaHasPopupType: o, additionalOnClick: i, onClickHandler: a, shouldOnClickCloseMenu: s }) { if (t && !o) throw new Error("mobileMenuInteractionHandler: there is content, but the aria type is not given"); const c = ( /** @type {HTMLElement} */ document.querySelector(f(r.MOBILE_MENU)) ); if (!c) throw new Error("mobileMenuInteractionHandler: mobileMenu not found"); const d = ( /** @type {HTMLElement} */ document.querySelector(f(r.MOBILE_MENU__WRAPPER)) ); if (!d) throw new Error("mobileMenuInteractionHandler: mobileMenuWrapper not found"); const u = ( /** @type {HTMLElement} */ d.querySelector(f(r.MOBILE_MENU__CONTENT)) ); if (!u) throw new Error("mobileMenuInteractionHandler: mobileContentWrapper not found"); const _ = W(n), p = W(n)?.querySelector?.("button"), h = (p || e).getAttribute("id"); if (!h) throw new Error("mobileMenuInteractionHandler: interactiveElementId not found"); if (t) { const l = W(t); if (l) { const m = l.getAttribute("id"); if (!m) throw new Error("mobileMenuInteractionHandler: mobileMenuContentId not found"); (p || e).setAttribute("aria-controls", m), l.setAttribute("aria-labelledby", h); } } if (e.onclick) throw new Error("mobileMenuInteractionHandler: interactiveElement already has onclick"); if (e.onclick = (l) => { if (!a?.(l)) if (i?.(l), c.classList.contains(r.IS_OPEN)) s && be(); else { sn(); const E = W(t); E && ct(u, E), We(d, W(n)); } }, t) { if (_ !== e && _.onclick) throw new Error("mobileMenuInteractionHandler: actionItemWrapperValue already has onclick"); _.onclick = (l) => { if (!a?.(l)) { const m = W(t); m && ct(u, m), We(d, W(n)); } }; } } function X(e) { return !e.closest(".menu-item__title") && !e.closest(".vertical-menu__title"); } function Fe(e, t, n) { let o = !1; return e && (Array.isArray(e) ? o = e.some((i) => Fe(i, t, n)) : (o = n(e), o || (o = !!t?.filter((i) => e[i])?.some((i) => Fe(e[i], t, n))))), o; } const re = Math.min, te = Math.max, Ne = Math.round, we = Math.floor, F = (e) => ({ x: e, y: e }), an = { left: "right", right: "left", bottom: "top", top: "bottom" }, cn = { start: "end", end: "start" }; function Ve(e, t, n) { return te(e, re(t, n)); } function Me(e, t) { return typeof e == "function" ? e(t) : e; } function ne(e) { return e.split("-")[0]; } function ve(e) { return e.split("-")[1]; } function Lt(e) { return e === "x" ? "y" : "x"; } function Xe(e) { return e === "y" ? "height" : "width"; } const ln = /* @__PURE__ */ new Set(["top", "bottom"]); function Z(e) { return ln.has(ne(e)) ? "y" : "x"; } function je(e) { return Lt(Z(e)); } function un(e, t, n) { n === void 0 && (n = !1); const o = ve(e), i = je(e), a = Xe(i); let s = i === "x" ? o === (n ? "end" : "start") ? "right" : "left" : o === "start" ? "bottom" : "top"; return t.reference[a] > t.floating[a] && (s = Pe(s)), [s, Pe(s)]; } function dn(e) { const t = Pe(e); return [qe(e), t, qe(t)]; } function qe(e) { return e.replace(/start|end/g, (t) => cn[t]); } const lt = ["left", "right"], ut = ["right", "left"], fn = ["top", "bottom"], pn = ["bottom", "top"]; function _n(e, t, n) { switch (e) { case "top": case "bottom": return n ? t ? ut : lt : t ? lt : ut; case "left": case "right": return t ? fn : pn; default: return []; } } function hn(e, t, n, o) { const i = ve(e); let a = _n(ne(e), n === "start", o); return i && (a = a.map((s) => s + "-" + i), t && (a = a.concat(a.map(qe)))), a; } function Pe(e) { return e.replace(/left|right|bottom|top/g, (t) => an[t]); } function mn(e) { return { top: 0, right: 0, bottom: 0, left: 0, ...e }; } function wt(e) { return typeof e != "number" ? mn(e) : { top: e, right: e, bottom: e, left: e }; } function Ce(e) { const { x: t, y: n, width: o, height: i } = e; return { width: o, height: i, top: n, left: t, right: t + o, bottom: n + i, x: t, y: n }; } function dt(e, t, n) { let { reference: o, floating: i } = e; const a = Z(t), s = je(t), c = Xe(s), d = ne(t), u = a === "y", _ = o.x + o.width / 2 - i.width / 2, p = o.y + o.height / 2 - i.height / 2, h = o[c] / 2 - i[c] / 2; let l; switch (d) { case "top": l = { x: _, y: o.y - i.height }; break; case "bottom": l = { x: _, y: o.y + o.height }; break; case "right": l = { x: o.x + o.width, y: p }; break; case "left": l = { x: o.x - i.width, y: p }; break; default: l = { x: o.x, y: o.y }; } switch (ve(t)) { case "start": l[s] -= h * (n && u ? -1 : 1); break; case "end": l[s] += h * (n && u ? -1 : 1); break; } return l; } const En = async (e, t, n) => { const { placement: o = "bottom", strategy: i = "absolute", middleware: a = [], platform: s } = n, c = a.filter(Boolean), d = await (s.isRTL == null ? void 0 : s.isRTL(t)); let u = await s.getElementRects({ reference: e, floating: t, strategy: i }), { x: _, y: p } = dt(u, o, d), h = o, l = {}, m = 0; for (let E = 0; E < c.length; E++) { const { name: b, fn: I } = c[E], { x: A, y: v, data: O, reset: L } = await I({ x: _, y: p, initialPlacement: o, placement: h, strategy: i, middlewareData: l, rects: u, platform: s, elements: { reference: e, floating: t } }); _ = A ?? _, p = v ?? p, l = { ...l, [b]: { ...l[b], ...O } }, L && m <= 50 && (m++, typeof L == "object" && (L.placement && (h = L.placement), L.rects && (u = L.rects === !0 ? await s.getElementRects({ reference: e, floating: t, strategy: i }) : L.rects), { x: _, y: p } = dt(u, h, d)), E = -1); } return { x: _, y: p, placement: h, strategy: i, middlewareData: l }; }; async function Ot(e, t) { var n; t === void 0 && (t = {}); const { x: o, y: i, platform: a, rects: s, elements: c, strategy: d } = e, { boundary: u = "clippingAncestors", rootBoundary: _ = "viewport", elementContext: p = "floating", altBoundary: h = !1, padding: l = 0 } = Me(t, e), m = wt(l), b = c[h ? p === "floating" ? "reference" : "floating" : p], I = Ce(await a.getClippingRect({ element: (n = await (a.isElement == null ? void 0 : a.isElement(b))) == null || n ? b : b.contextElement || await (a.getDocumentElement == null ? void 0 : a.getDocumentElement(c.floating)), boundary: u, rootBoundary: _, strategy: d })), A = p === "floating" ? { x: o, y: i, width: s.floating.width, height: s.floating.height } : s.reference, v = await (a.getOffsetParent == null ? void 0 : a.getOffsetParent(c.floating)), O = await (a.isElement == null ? void 0 : a.isElement(v)) ? await (a.getScale == null ? void 0 : a.getScale(v)) || { x: 1, y: 1 } : { x: 1, y: 1 }, L = Ce(a.convertOffsetParentRelativeRectToViewportRelativeRect ? await a.convertOffsetParentRelativeRectToViewportRelativeRect({ elements: c, rect: A, offsetParent: v, strategy: d }) : A); return { top: (I.top - L.top + m.top) / O.y, bottom: (L.bottom - I.bottom + m.bottom) / O.y, left: (I.left - L.left + m.left) / O.x, right: (L.right - I.right + m.right) / O.x }; } const In = (e) => ({ name: "arrow", options: e, async fn(t) { const { x: n, y: o, placement: i, rects: a, platform: s, elements: c, middlewareData: d } = t, { element: u, padding: _ = 0 } = Me(e, t) || {}; if (u == null) return {}; const p = wt(_), h = { x: n, y: o }, l = je(i), m = Xe(l), E = await s.getDimensions(u), b = l === "y", I = b ? "top" : "left", A = b ? "bottom" : "right", v = b ? "clientHeight" : "clientWidth", O = a.reference[m] + a.reference[l] - h[l] - a.floating[m], L = h[l] - a.reference[l], $ = await (s.getOffsetParent == null ? void 0 : s.getOffsetParent(u)); let C = $ ? $[v] : 0; (!C || !await (s.isElement == null ? void 0 : s.isElement($))) && (C = c.floating[v] || a.floating[m]); const le = O / 2 - L / 2, Q = C / 2 - E[m] / 2 - 1, G = re(p[I], Q), ue = re(p[A], Q), J = G, de = C - E[m] - ue, y = C / 2 - E[m] / 2 + le, ee = Ve(J, y, de), z = !d.arrow && ve(i) != null && y !== ee && a.reference[m] / 2 - (y < J ? G : ue) - E[m] / 2 < 0, D = z ? y < J ? y - J : y - de : 0; return { [l]: h[l] + D, data: { [l]: ee, centerOffset: y - ee - D, ...z && { alignmentOffset: D } }, reset: z }; } }), gn = function(e) { return e === void 0 && (e = {}), { name: "flip", options: e, async fn(t) { var n, o; const { placement: i, middlewareData: a, rects: s, initialPlacement: c, platform: d, elements: u } = t, { mainAxis: _ = !0, crossAxis: p = !0, fallbackPlacements: h, fallbackStrategy: l = "bestFit", fallbackAxisSideDirection: m = "none", flipAlignment: E = !0, ...b } = Me(e, t); if ((n = a.arrow) != null && n.alignmentOffset) return {}; const I = ne(i), A = Z(c), v = ne(c) === c, O = await (d.isRTL == null ? void 0 : d.isRTL(u.floating)), L = h || (v || !E ? [Pe(c)] : dn(c)), $ = m !== "none"; !h && $ && L.push(...hn(c, E, m, O)); const C = [c, ...L], le = await Ot(t, b), Q = []; let G = ((o = a.flip) == null ? void 0 : o.overflows) || []; if (_ && Q.push(le[I]), p) { const y = un(i, s, O); Q.push(le[y[0]], le[y[1]]); } if (G = [...G, { placement: i, overflows: Q }], !Q.every((y) => y <= 0)) { var ue, J; const y = (((ue = a.flip) == null ? void 0 : ue.index) || 0) + 1, ee = C[y]; if (ee && (!(p === "alignment" ? A !== Z(ee) : !1) || // We leave the current main axis only if every placement on that axis // overflows the main axis. G.every((x) => Z(x.placement) === A ? x.overflows[0] > 0 : !0))) return { data: { index: y, overflows: G }, reset: { placement: ee } }; let z = (J = G.filter((D) => D.overflows[0] <= 0).sort((D, x) => D.overflows[1] - x.overflows[1])[0]) == null ? void 0 : J.placement; if (!z) switch (l) { case "bestFit": { var de; const D = (de = G.filter((x) => { if ($) { const K = Z(x.placement); return K === A || // Create a bias to the `y` side axis due to horizontal // reading directions favoring greater width. K === "y"; } return !0; }).map((x) => [x.placement, x.overflows.filter((K) => K > 0).reduce((K, Jt) => K + Jt, 0)]).sort((x, K) => x[1] - K[1])[0]) == null ? void 0 : de[0]; D && (z = D); break; } case "initialPlacement": z = c; break; } if (i !== z) return { reset: { placement: z } }; } return {}; } }; }, bn = /* @__PURE__ */ new Set(["left", "top"]); async function Tn(e, t) { const { placement: n, platform: o, elements: i } = e, a = await (o.isRTL == null ? void 0 : o.isRTL(i.floating)), s = ne(n), c = ve(n), d = Z(n) === "y", u = bn.has(s) ? -1 : 1, _ = a && d ? -1 : 1, p = Me(t, e); let { mainAxis: h, crossAxis: l, alignmentAxis: m } = typeof p == "number" ? { mainAxis: p, crossAxis: 0, alignmentAxis: null } : { mainAxis: p.mainAxis || 0, crossAxis: p.crossAxis || 0, alignmentAxis: p.alignmentAxis }; return c && typeof m == "number" && (l = c === "end" ? m * -1 : m), d ? { x: l * _, y: h * u } : { x: h * u, y: l * _ }; } const An = function(e) { return e === void 0 && (e = 0), { name: "offset", options: e, async fn(t) { var n, o; const { x: i, y: a, placement: s, middlewareData: c } = t, d = await Tn(t, e); return s === ((n = c.offset) == null ? void 0 : n.placement) && (o = c.arrow) != null && o.alignmentOffset ? {} : { x: i + d.x, y: a + d.y, data: { ...d, placement: s } }; } }; }, Mn = function(e) { return e === void 0 && (e = {}), { name: "shift", options: e, async fn(t) { const { x: n, y: o, placement: i } = t, { mainAxis: a = !0, crossAxis: s = !1, limiter: c = { fn: (b) => { let { x: I, y: A } = b; return { x: I, y: A }; } }, ...d } = Me(e, t), u = { x: n, y: o }, _ = await Ot(t, d), p = Z(ne(i)), h = Lt(p); let l = u[h], m = u[p]; if (a) { const b = h === "y" ? "top" : "left", I = h === "y" ? "bottom" : "right", A = l + _[b], v = l - _[I]; l = Ve(A, l, v); } if (s) { const b = p === "y" ? "top" : "left", I = p === "y" ? "bottom" : "right", A = m + _[b], v = m - _[I]; m = Ve(A, m, v); } const E = c.fn({ ...t, [h]: l, [p]: m }); return { ...E, data: { x: E.x - n, y: E.y - o, enabled: { [h]: a, [p]: s } } }; } }; }; function Ue() { return typeof window < "u"; } function ce(e) { return yt(e) ? (e.nodeName || "").toLowerCase() : "#document"; } function P(e) { var t; return (e == null || (t = e.ownerDocument) == null ? void 0 : t.defaultView) || window; } function q(e) { var t; return (t = (yt(e) ? e.ownerDocument : e.document) || window.document) == null ? void 0 : t.documentElement; } function yt(e) { return Ue() ? e instanceof Node || e instanceof P(e).Node : !1; } function H(e) { return Ue() ? e instanceof Element || e instanceof P(e).Element : !1; } function V(e) { return Ue() ? e instanceof HTMLElement || e instanceof P(e).HTMLElement : !1; } function ft(e) { return !Ue() || typeof ShadowRoot > "u" ? !1 : e instanceof ShadowRoot || e instanceof P(e).ShadowRoot; } const vn = /* @__PURE__ */ new Set(["inline", "contents"]); function Le(e) { const { overflow: t, overflowX: n, overflowY: o, display: i } = B(e); return /auto|scroll|overlay|hidden|clip/.test(t + o + n) && !vn.has(i); } const Ln = /* @__PURE__ */ new Set(["table", "td", "th"]); function wn(e) { return Ln.has(ce(e)); } const On = [":popover-open", ":modal"]; function De(e) { return On.some((t) => { try { return e.matches(t); } catch { return !1; } }); } const yn = ["transform", "translate", "scale", "rotate", "perspective"], Sn = ["transform", "translate", "scale", "rotate", "perspective", "filter"], Nn = ["paint", "layout", "strict", "content"]; function Qe(e) { const t = Je(), n = H(e) ? B(e) : e; return yn.some((o) => n[o] ? n[o] !== "none" : !1) || (n.containerType ? n.containerType !== "normal" : !1) || !t && (n.backdropFilter ? n.backdropFilter !== "none" : !1) || !t && (n.filter ? n.filter !== "none" : !1) || Sn.some((o) => (n.willChange || "").includes(o)) || Nn.some((o) => (n.contain || "").includes(o)); } function Pn(e) { let t = j(e); for (; V(t) && !se(t); ) { if (Qe(t)) return t; if (De(t)) return null; t = j(t); } return null; } function Je() { return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("-webkit-backdrop-filter", "none"); } const Cn = /* @__PURE__ */ new Set(["html", "body", "#document"]); function se(e) { return Cn.has(ce(e)); } function B(e) { return P(e).getComputedStyle(e); } function xe(e) { return H(e) ? { scrollLeft: e.scrollLeft, scrollTop: e.scrollTop } : { scrollLeft: e.scrollX, scrollTop: e.scrollY }; } function j(e) { if (ce(e) === "html") return e; const t = ( // Step into the shadow DOM of the parent of a slotted node. e.assignedSlot || // DOM Element detected. e.parentNode || // ShadowRoot detected. ft(e) && e.host || // Fallback. q(e) ); return ft(t) ? t.host : t; } function St(e) { const t = j(e); return se(t) ? e.ownerDocument ? e.ownerDocument.body : e.body : V(t) && Le(t) ? t : St(t); } function Te(e, t, n) { var o; t === void 0 && (t = []), n === void 0 && (n = !0); const i = St(e), a = i === ((o = e.ownerDocument) == null ? void 0 : o.body), s = P(i); if (a) { const c = $e(s); return t.concat(s, s.visualViewport || [], Le(i) ? i : [], c && n ? Te(c) : []); } return t.concat(i, Te(i, [], n)); } function $e(e) { return e.parent && Object.getPrototypeOf(e.parent) ? e.frameElement : null; } function Nt(e) { const t = B(e); let n = parseFloat(t.width) || 0, o = parseFloat(t.height) || 0; const i = V(e), a = i ? e.offsetWidth : n, s = i ? e.offsetHeight : o, c = Ne(n) !== a || Ne(o) !== s; return c && (n = a, o = s), { width: n, height: o, $: c }; } function et(e) { return H(e) ? e : e.contextElement; } function ie(e) { const t = et(e); if (!V(t)) return F(1); const n = t.getBoundingClientRect(), { width: o, height: i, $: a } = Nt(t); let s = (a ? Ne(n.width) : n.width) / o, c = (a ? Ne(n.height) : n.height) / i; return (!s || !Number.isFinite(s)) && (s = 1), (!c || !Number.isFinite(c)) && (c = 1), { x: s, y: c }; } const Rn = /* @__PURE__ */ F(0); function Pt(e) { const t = P(e); return !Je() || !t.visualViewport ? Rn : { x: t.visualViewport.offsetLeft, y: t.visualViewport.offsetTop }; } function Un(e, t, n) { return t === void 0 && (t = !1), !n || t && n !== P(e) ? !1 : t; } function oe(e, t, n, o) { t === void 0 && (t = !1), n === void 0 && (n = !1); const i = e.getBoundingClientRect(), a = et(e); let s = F(1); t && (o ? H(o) && (s = ie(o)) : s = ie(e)); const c = Un(a, n, o) ? Pt(a) : F(0); let d = (i.left + c.x) / s.x, u = (i.top + c.y) / s.y, _ = i.width / s.x, p = i.height / s.y; if (a) { const h = P(a), l = o && H(o) ? P(o) : o; let m = h, E = $e(m); for (; E && o && l !== m; ) { const b = ie(E), I = E.getBoundingClientRect(), A = B(E), v = I.left + (E.clientLeft + parseFloat(A.paddingLeft)) * b.x, O = I.top + (E.clientTop + parseFloat(A.paddingTop)) * b.y; d *= b.x, u *= b.y, _ *= b.x, p *= b.y, d += v, u += O, m = P(E), E = $e(m); } } return Ce({ width: _, height: p, x: d, y: u }); } function He(e, t) { const n = xe(e).scrollLeft; return t ? t.left + n : oe(q(e)).left + n; } function Ct(e, t) { const n = e.getBoundingClientRect(), o = n.left + t.scrollLeft - He(e, n), i = n.top + t.scrollTop; return { x: o, y: i }; } function Dn(e) { let { elements: t, rect: n, offsetParent: o, strategy: i } = e; const a = i === "fixed", s = q(o), c = t ? De(t.floating) : !1; if (o === s || c && a) return n; let d = { scrollLeft: 0, scrollTop: 0 }, u = F(1); const _ = F(0), p = V(o); if ((p || !p && !a) && ((ce(o) !== "body" || Le(s)) && (d = xe(o)), V(o))) { const l = oe(o); u = ie(o), _.x = l.x + o.clientLeft, _.y = l.y + o.clientTop; } const h = s && !p && !a ? Ct(s, d) : F(0); return { width: n.width * u.x, height: n.height * u.y, x: n.x * u.x - d.scrollLeft * u.x + _.x + h.x, y: n.y * u.y - d.scrollTop * u.y + _.y + h.y }; } function xn(e) { return Array.from(e.getClientRects()); } function Hn(e) { const t = q(e), n = xe(e), o = e.ownerDocument.body, i = te(t.scrollWidth, t.clientWidth, o.scrollWidth, o.clientWidth), a = te(t.scrollHeight, t.clientHeight, o.scrollHeight, o.clientHeight); let s = -n.scrollLeft + He(e); const c = -n.scrollTop; return B(o).direction === "rtl" && (s += te(t.clientWidth, o.clientWidth) - i), { width: i, height: a, x: s, y: c }; } const pt = 25; function Bn(e, t) { const n = P(e), o = q(e), i = n.visualViewport; let a = o.clientWidth, s = o.clientHeight, c = 0, d = 0; if (i) { a = i.width, s = i.height; const _ = Je(); (!_ || _ && t === "fixed") && (c = i.offsetLeft, d = i.offsetTop); } const u = He(o); if (u <= 0) { const _ = o.ownerDocument, p = _.body, h = getComputedStyle(p), l = _.compatMode === "CSS1Compat" && parseFloat(h.marginLeft) + parseFloat(h.marginRight) || 0, m = Math.abs(o.clientWidth - p.clientWidth - l); m <= pt && (a -= m); } else u <= pt && (a += u); return { width: a, height: s, x: c, y: d }; } const kn = /* @__PURE__ */ new Set(["absolute", "fixed"]); function Wn(e, t) { const n = oe(e, !0, t === "fixed"), o = n.top + e.clientTop, i = n.left + e.clientLeft, a = V(e) ? ie(e) : F(1), s = e.clientWidth * a.x, c = e.clientHeight * a.y, d = i * a.x, u = o * a.y; return { width: s, height: c, x: d, y: u }; } function _t(e, t, n) { let o; if (t === "viewport") o = Bn(e, n); else if (t === "document") o = Hn(q(e)); else if (H(t)) o = Wn(t, n); else { const i = Pt(e); o = { x: t.x - i.x, y: t.y - i.y, width: t.width, height: t.height }; } return Ce(o); } function Rt(e, t) { const n = j(e); return n === t || !H(n) || se(n) ? !1 : B(n).position === "fixed" || Rt(n, t); } function Fn(e, t) { const n = t.get(e); if (n) return n; let o = Te(e, [], !1).filter((c) => H(c) && ce(c) !== "body"), i = null; const a = B(e).position === "fixed"; let s = a ? j(e) : e; for (; H(s) && !se(s); ) { const c = B(s), d = Qe(s); !d && c.position === "fixed" && (i = null), (a ? !d && !i : !d && c.position === "static" && !!i && kn.has(i.position) || Le(s) && !d && Rt(e, s)) ? o = o.filter((_) => _ !== s) : i = c, s = j(s); } return t.set(e, o), o; } function Vn(e) { let { element: t, boundary: n, rootBoundary: o, strategy: i } = e; const s = [...n === "clippingAncestors" ? De(t) ? [] : Fn(t, this._c) : [].concat(n), o], c = s[0], d = s.reduce((u, _) => { const p = _t(t, _, i); return u.top = te(p.top, u.top), u.right = re(p.right, u.right), u.bottom = re(p.bottom, u.bottom), u.left = te(p.left, u.left), u; }, _t(t, c, i)); return { width: d.right - d.left, height: d.bottom - d.top, x: d.left, y: d.top }; } function qn(e) { const { width: t, height: n } = Nt(e); return { width: t, height: n }; } function $n(e, t, n) { const o = V(t), i = q(t), a = n === "fixed", s = oe(e, !0, a, t); let c = { scrollLeft: 0, scrollTop: 0 }; const d = F(0); function u() { d.x = He(i); } if (o || !o && !a) if ((ce(t) !== "body" || Le(i)) && (c = xe(t)), o) { const l = oe(t, !0, a, t); d.x = l.x + t.clientLeft, d.y = l.y + t.clientTop; } else i && u(); a && !o && i && u(); const _ = i && !o && !a ? Ct(i, c) : F(0), p = s.left + c.scrollLeft - d.x - _.x, h = s.top + c.scrollTop - d.y - _.y; return { x: p, y: h, width: s.width, height: s.height }; } function Be(e) { return B(e).position === "static"; } function ht(e, t) { if (!V(e) || B(e).position === "fixed") return null; if (t) return t(e); let n = e.offsetParent; return q(e) === n && (n = n.ownerDocument.body), n; } function Ut(e, t) { const n = P(e); if (De(e)) return n; if (!V(e)) { let i = j(e); for (; i && !se(i); ) { if (H(i) && !Be(i)) return i; i = j(i); } return n; } let o = ht(e, t); for (; o && wn(o) && Be(o); ) o = ht(o, t); return o && se(o) && Be(o) && !Qe(o) ? n : o || Pn(e) || n; } const Gn = async function(e) { const t = this.getOffsetParent || Ut, n = this.getDimensions, o = await n(e.floating); return { reference: $n(e.reference, await t(e.floating), e.strategy), floating: { x: 0, y: 0, width: o.width, height: o.height } }; }; function zn(e) { return B(e).direction === "rtl"; } const Yn = { convertOffsetParentRelativeRectToViewportRelativeRect: Dn, getDocumentElement: q, getClippingRect: Vn, getOffsetParent: Ut, getElementRects: Gn, getClientRects: xn, getDimensions: qn, getScale: ie, isElement: H, isRTL: zn }; function Dt(e, t) { return e.x === t.x && e.y === t.y && e.width === t.width && e.height === t.height; } function Kn(e, t) { let n = null, o; const i = q(e); function a() { var c; clearTimeout(o), (c = n) == null || c.disconnect(), n = null; } function s(c, d) { c === void 0 && (c = !1), d === void 0 && (d = 1), a(); const u = e.getBoundingClientRect(), { left: _, top: p, width: h, height: l } = u; if (c || t(), !h || !l) return; const m = we(p), E = we(i.clientWidth - (_ + h)), b = we(i.clientHeight - (p + l)), I = we(_), v = { rootMargin: -m + "px " + -E + "px " + -b + "px " + -I + "px", threshold: te(0, re(1, d)) || 1 }; let O = !0; function L($) { const C = $[0].intersectionRatio; if (C !== d) { if (!O) return s(); C ? s(!1, C) : o = setTimeout(() => { s(!1, 1e-7); }, 1e3); } C === 1 && !Dt(u, e.getBoundingClientRect()) && s(), O = !1; } try { n = new IntersectionObserver(L, { ...v, // Handle <iframe>s root: i.ownerDocument }); } catch { n = new IntersectionObserver(L, v); } n.observe(e); } return s(!0), a; } function Zn(e, t, n, o) { o === void 0 && (o = {}); const { ancestorScroll: i = !0, ancestorResize: a = !0, elementResize: s = typeof ResizeObserver == "function", layoutShift: c = typeof IntersectionObserver == "function", animationFrame: d = !1 } = o, u = et(e), _ = i || a ? [...u ? Te(u) : [], ...Te(t)] : []; _.forEach((I) => { i && I.addEventListener("scroll", n, { passive: !0 }), a && I.addEventListener("resize", n); }); const p = u && c ? Kn(u, n) : null; let h = -1, l = null; s && (l = new ResizeObserver((I) => { let [A] = I; A && A.target === u && l && (l.unobserve(t), cancelAnimationFrame(h), h = requestAnimationFrame(() => { var v; (v = l) == null || v.observe(t); })), n(); }), u && !d && l.observe(u), l.observe(t)); let m, E = d ? oe(e) : null; d && b(); function b() { const I = oe(e); E && !Dt(E, I) && n(), E = I, m = requestAnimationFrame(b); } return n(), () => { var I; _.forEach((A) => { i && A.removeEventListener("scroll", n), a && A.removeEventListener("resize", n); }), p?.(), (I = l) == null || I.disconnect(), l = null, d && cancelAnimationFrame(m); }; } const xt = An, Ht = Mn, Bt = gn, kt = In, Wt = (e, t, n) => { const o = /* @__PURE__ */ new Map(), i = { platform: Yn, ...n }, a = { ...i.platform, _c: o }; return En(e, t, { ...i, platform: a }); }; function Ge(e, t, n, o) { t ? (e.classList.remove(o), e.classList.add(n)) : (e.classList.add(o), e.classList.remove(n)); } let N; const _e = {}, ze = { SHIFT: "shift-key" }; function Ft() { N && (document.removeEventListener("click", N.globalOnClick), document.removeEventListener("keyup", N.globalOnKeyup), document.removeEventListener("keydown", N.globalOnKeydown), N = null); } function Ye() { const e = [ `${f(r.UTAH_DESIGN_SYSTEM)} ${f(r.HEADER)} ${f(r.POPUP_WRAPPER)}`, `${f(r.UTAH_DESIGN_SYSTEM)} ${f(r.MAIN_MENU)} ${f(r.POPUP_WRAPPER)}` ], t = document.querySelectorAll(e.join(",")); Array.from(t).filter((n) => !n.classList.contains(r.POPUP__HIDDEN)).forEach((n) => { const o = n.getAttribute("id"); if (o) { const i = document.querySelector(`[aria-controls="${o}"]`); i && X(i) && i.setAttribute("aria-expanded", "false"); } Ge(n, !1, r.POPUP__VISIBLE, r.POPUP__HIDDEN); }); } function Xn() { N && Ft(), N = { // eslint-disable-next-line @typescript-eslint/no-empty-function globalOnClick: () => { }, // eslint-disable-next-line @typescript-eslint/no-empty-function globalOnKeyup: () => { }, // eslint-disable-next-line @typescript-eslint/no-empty-function globalOnKeydown: () => { } }, N.globalOnClick = Ye, document.addEventListener("click", N.globalOnClick), N.globalOnKeyup = /** @param {KeyboardEvent} e */ ((e) => { e.key === "Escape" && Ye(), e.shiftKey || (_e[ze.SHIFT] = !1), _e[e.key] = !1; }), document.addEventListener("keyup", N.globalOnKeyup), N.globalOnKeydown = (e) => { e.shiftKey && (_e[ze.SHIFT] = !0), _e[e.key] = !0; }, document.addEventListener("keydown", N.globalOnKeydown); } function jn() { return "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0; } function Ae(e, t, n, o, i) { let a = NaN, s = NaN; const c = 350, d = 150, u = 50; X(t) && t.setAttribute("aria-expanded", "false"), t.setAttribute("aria-haspopup", o); function _(h) { clearTimeout(a), clearTimeout(s), (!i?.isPerformPopup || i?.isPerformPopup()) && (a = window.setTimeout( () => { const l = n.querySelector(f(r.POPUP_ARROW)), m = [ xt(11), Bt(), Ht() ]; l && m.push(kt({ element: l })), Wt( t, n, { placement: i?.popupPlacement || Ie.BOTTOM, middleware: m } ).then(({ x: E, y: b, middlewareData: I }) => { n.setAttribute("data-popup-placement", i?.popupPlacement || Ie.BOTTOM), Object.assign(n.style, { left: `${E}px`, top: `${b}px` }), l && Object.assign(l.style, { left: E != null ? `${I?.arrow?.x}px` : "", top: b != null ? `${I?.arrow?.y}px` : "" }); }), Ge(n, !0, r.POPUP__VISIBLE, r.POPUP__HIDDEN), X(t) && t.setAttribute("aria-expanded", "true"), document.querySelectorAll(f(r.TOOLTIP__WRAPPER)).forEach((E) => E.classList.add(r.TOOLTIP__WRAPPER__HIDDEN)); }, h )); } function p(h) { clearTimeout(a), clearTimeout(s), (!i?.isPerformPopup || i.isPerformPopup()) && (s = window.setTimeout( () => { Ge(n, !1, r.POPUP__VISIBLE, r.POPUP__HIDDEN), X(t) && t.setAttribute("aria-expanded", "false"); }, h )); } if (i?.preventOnClickHandling && (R(!!e.onclick, "popupFocusHandler: wrapper already has an onclick"), e.onclick = (h) => { h.stopPropagation(); }), e.addEventListener("focusin", () => _(d)), e.addEventListener("focusout", () => p(d)), e.addEventListener("keyup", (h) => { (h.code === "Escape" || h.key === "Escape") && (t.focus(), p(u)); }), i?.shouldFocusOnHover && (e.addEventListener("mouseenter", () => _(c)), e.addEventListener("mouseleave", () => p(c))), !i?.preventOnClickHandling) { if (t.onclick) throw new Error("popupFocusHandler: button already has onclick"); t.onclick = (h) => { const l = t.getAttribute("aria-expanded") === "true"; (!i?.isPerformPopup || i.isPerformPopup()) && (h.stopPropagation(), h.preventDefault(), l && t.getAttribute("aria-expanded") === "true" ? i?.doNotClosePopupOnClick || (p(u), document.activeElement?.blur()) : (jn() && Ye(), _(u))), i?.onClick && i.onClick(h); }; } } const tt = `<span class="utds-new-tab-link-a11y"> <span class="visually-hidden">, opens in a new tab</span> <span class="utds-icon-after-external-link" aria-hidden="true"></span> </span> `, Qn = `<span class="utds-icon-before-chevron-right vertical-menu__chevron" aria-hidden="true"></span> `; function Vt(e, t) { let n; return typeof t == "function" ? n = t(e) : n = t ?? "Overview", ` ${n}`; } const Jn = `<div class="popup__wrapper popup__wrapper--hidden"> <div class="popup__content"> <div class="popup__arrow"></div> </div> </div> `; function nt(e, t) { const n = e.getAttribute("id"); if (!n) throw new Error("renderPopup: labelledByElement does not have an `id` attribute"); const o = w(); e.setAttribute("aria-controls", o); const i = g(Jn); if (i.setAttribute("id", o), i.setAttribute("aria-labelledby", n), t?.removePopupArrow) { const a = i.querySelector(f(r.POPUP_ARROW)); if (!a) throw new Error("renderPopup(): popup arrow missing (I wanted to remove it!!)"); a.remove(); } return i; } const eo = `<ul class="vertical-menu" /> `, to = `<li class="vertical-menu__item"> <span class="vertical-menu__title"> <span class="vertical-menu__plain-title"></span> <a href="#" class="vertical-menu__link-title"> <span class="vertical-menu__link-text"></span> </a> <button class="vertical-menu__button-title"> <span class="vertical-menu__link-text"></span> </button> </span> <span class="vertical-menu__divider" /> </li> `; function qt(e) { const t = e.closest("li"); if (!t) throw console.error("element", e), new Error("toggleChildMenuExpansion: parent not found for child"); t.querySelectorAll(":scope > ul").forEach((n) => { const o = n.closest("li")?.querySelector(f(r.VERTICAL_MENU__BUTTON_TITLE)); if (!o) throw new Error("toggleChildMenuExpansion: button not found"); const i = o.querySelector(`:scope > ${f(r.VERTICAL_MENU__CHEVRON)}`); if (!i) throw new Error("toggleChildMenuExpansion: chevron not found"); n.classList.toggle(r.VISUALLY_HIDDEN), n.classList.contains(r.VISUALLY_HIDDEN) ? (X(o) && o.setAttribute("aria-expanded", "false"), i.classList.add(r.IS_CLOSED), i.classList.remove(r.IS_OPEN)) : (X(o) && o.setAttribute("aria-expanded", "true"), i.classList.remove(r.IS_CLOSED), i.classList.add(r.IS_OPEN)); }); } function no(e) { return (t) => { t.preventDefault(), t.stopPropagation(), qt(e); }; } function mt() { const e = g(Qn); return e.classList.add(r.IS_CLOSED), e; } function Oe() { setTimeout(() => { document.activeElement?.blur(); }, 0); } function oo(e, t, n) { const o = g(to), i = o.querySelector(f(r.VERTICAL_MENU__TITLE)); if (!i) throw new Error("renderPopupMenuItem: menuItemTitleWrapper not found"); const a = ( /** @type {HTMLElement | null} */ o.querySelector(f(r.VERTICAL_MENU__BUTTON_TITLE)) ); if (!a) throw new Error("renderPopupMenuItem: menuButton not found")