UNPKG

@utahdts/utah-design-system-header

Version:
215 lines (206 loc) 136 kB
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`@utahdts/utah-design-system-header`]={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t={FLYOUT:`flyout`,INLINE:`inline`,MEGA_MENU:`mega-menu`,PLAIN:`plain`},n={BOTTOM:`bottom`,BOTTOM_START:`bottom-start`,BOTTOM_END:`bottom-end`,LEFT:`left`,LEFT_START:`left-start`,LEFT_END:`left-end`,RIGHT:`right`,RIGHT_START:`right-start`,RIGHT_END:`right-end`,TOP:`top`,TOP_START:`top-start`,TOP_END:`top-end`},r={HEADER_LOADED:`utahHeaderLoaded`,HEADER_UNLOADED:`utahHeaderUnloaded`},i={SMALL:`SMALL`,MEDIUM:`MEDIUM`,LARGE:`LARGE`},a=`/* @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-s); display: flex; justify-content: space-between; } .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__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; &.col-3 > div { width: 100%; } } .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 o(e){return`.${(Array.isArray(e)?e:[e]).join(`.`)}`}var s={UTAH_DESIGN_SYSTEM:`utah-design-system`,HEADER:`utds-header`,FOOTER:`utds-footer`,ICON_BUTTON:`icon-button`,CSS_HEADER_MEDIA_TAG_ID:`cssHeaderMediaTag`,SSO_HEADER_SCRIPT_TAG_ID:`ssoHeaderScriptTag`,IS_CLOSED:`is-closed`,IS_OPEN:`is-open`,VISUALLY_HIDDEN:`visually-hidden`,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`,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`,ACTION_ITEMS__WRAPPER:`utds-action-items-wrapper`,BADGE__LABEL:`utds-badge__label`,BADGE__VALUE:`utds-badge__value`,BADGE_WRAPPER:`utds-badge__wrapper`,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:`main-menu__hamburger`,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:`menu-item`,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`,MOBILE__VIP_ACTION_ITEMS__LEFT:`utds-header-mobile__vip-action-items--left`,MOBILE__VIP_ACTION_ITEMS__RIGHT:`utds-header-mobile__vip-action-items--right`,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`,OFFICIAL_BANNER:`utds-official-website__wrapper`,OFFICIAL_BUTTON:`utds-official-website__button`,OFFICIAL_WRAPPER:`utds-official-website-popup__wrapper`,VERTICAL_MENU:`vertical-menu`,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:`vertical-menu__wrapper`,VERTICAL_MENU_WRAPPER__WRAPPER_TITLE:`vertical-menu__wrapper-title`,POPUP__HIDDEN:`popup__wrapper--hidden`,POPUP__VISIBLE:`popup__wrapper--visible`,POPUP__WRAPPER:`popup__wrapper`,EXTERNAL_LINK:`utds-icon-after-external-link`,EXTERNAL_LINK__NEW_TAB:`utds-new-tab-link-a11y`,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`,SIZE__LARGE:`large`,SIZE__MEDIUM:`medium`,SKIP_LINK_LINK:`skip-link__link`,SKIP_LINK_WRAPPER:`skip-link__wrapper`,TITLE:`utds-title-wrapper`,TITLE__LOGO:`utds-title-wrapper__logo`,TITLE__TITLE:`utds-title-wrapper__title`,TOOLTIP:`utds-tooltip`,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`,NOTIFICATIONS__IFRAME:`utds-notifications-iframe`,NOTIFICATIONS__CACHE_KEY:`utds-notifications-cache`,NOTIFICATIONS__DRAWER_ID:`utds-notifications__drawer`,NOTIFICATIONS__DRAWER_HEADER_BUTTONS:`utds-notifications-drawer__header-buttons`,NOTIFICATIONS__DRAWER_MARK_ALL_READ_ID:`utds-notifications__mark-all-read`,NOTIFICATIONS__DRAWER_VIEW_ALL_ID:`utds-notifications__view-all`,NOTIFICATIONS__DRAWER_CLOSE_BUTTON:`drawer__close-button`,NOTIFICATIONS__DRAWER_BACKDROP:`drawer__backdrop`,NOTIFICATIONS__DRAWER_INNER:`drawer__inner`,NOTIFICATIONS__DRAWER_TITLE:`drawer__title`,NOTIFICATIONS__DRAWER_END_FOCUS:`drawer__end-focus`,NOTIFICATIONS__LIST:`utds-notifications__list`,NOTIFICATIONS__LOAD_MORE:`load-more-notifications`,NOTIFY__LIST_ITEM:`utds-notify-list-item`,NOTIFY__LIST_ITEM_IS_READ:`utds-notify-list-item--is-read`,NOTIFY__LIST_ITEM_STATUS:`utds-notify-list-item__status`,NOTIFY__LIST_ITEM_STATUS_IS_READ:`utds-notify-list-item__status--is-read`,NOTIFY__LIST_ITEM_ICON:`utds-notify-list-item__icon`,NOTIFY__LIST_ITEM_TITLE:`utds-notify-list-item__title`,NOTIFY__LIST_ITEM_TIME:`utds-notify-list-item__time`,NOTIFY__LIST_ITEM_BRAND:`utds-notify-list-item__brand`,NOTIFY__LIST_ITEM_MESSAGE:`utds-notify-list-item__message`,NOTIFY__LIST_ITEM_LINK:`utds-notify-list-item__link`,NOTIFY__LIST_ITEM_LINK_TEXT:`utds-notify-list-item__link-text`,NOTIFY__BUSY_CARD:`utds-notify-list-item--busy-card`,NOTIFICATIONS__ACTION_ITEM:`utds-header-action-item--notifications`,NOTIFICATIONS__ACTION_ITEM_BADGE:`utds-badge--notifications`,SPINNER__ANIMATION:`spinner__animation`,SPINNER__VALUE:`spinner__value`};function c(e,t){if(e)throw Error(t)}function l(e,t){if(e==null)throw Error(t);return e}function u(e){return typeof e==`string`||e instanceof String}function d(e){let t=new DOMParser,n;if(u(e)){let r=u(e)?t.parseFromString(e,`text/html`):e,i=r.body.children.length>1?r.body.children:r.body.children.item(0);if(!i)throw console.error(e),Error(`renderDOM: nothing rendered`);n=i}else if(e instanceof Element)n=e;else if(e)throw console.error(e),Error(`renderDOM: str is not a string nor a DOM Element : '${e}'`);else throw Error(`renderDOM: falsy string passed; cannot render nothing`);return n}function f(e){let t=typeof e==`string`?d(e):e;if(t instanceof HTMLCollection&&t.length>1)throw Error(`renderDOMSingle: must render a single element`);let n=t instanceof HTMLCollection?t[0]:t;if(!n)throw console.error(e),Error(`renderDOMSingle: nothing rendered`);return n}var p={applicationType:``,onSearch:!1,mainMenu:!1,mediaSizes:{mobile:640,tabletPortrait:768,tabletLandscape:1024},notifications:!1,showTitle:!0,size:i.MEDIUM,skipLinkUrl:`#main-content`,title:`My Utah.gov Site`,titleUrl:`/`,utahId:!1};function m(e){if(!e.showTitle&&!e.logo)throw 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.")}var h=new class{constructor(){this.settings={...p}}setSettings(e){let t={...p,...this.settings,...e};m(t),this.settings=t}getSettings(){return this.settings}clearSettings(){this.settings={...p}}};function g(){return h.getSettings()}function _(){return`10000000-1000-4000-8000-100000000000`.replace(/[018]/g,e=>(e^l(crypto.getRandomValues(new Uint8Array(1))[0],`uuidv4: crypto`)&(15>>e)/4).toString(16))}var v=`<div class="utds-header-mobile-menu__content-item" role="tabpanel"> </div> `;function y(e){let t=document.querySelector(o(s.MOBILE_MENU__WRAPPER));if(!t)throw Error(`addMobileMenuContentItem: mobileMenuWrapper not found`);let n=t.querySelector(o(s.MOBILE_MENU__CONTENT));if(!n)throw Error(`addMobileMenuContentItem: mobileContentWrapper not found`);let r=f(v);return r.appendChild(e),n.appendChild(r),r.setAttribute(`id`,_()),r}function b(e){return e instanceof Function?e():e}function x(e){let t=l(document.querySelector(o(s.MOBILE_MENU)),`${e}: mobileMenu not found`);return{hamburger:document.getElementById(s.MAIN_MENU__HAMBURGER_ID),hamburgerIcon:document.getElementById(s.MAIN_MENU__HAMBURGER_ICON_ID),mobileMenu:t}}function S(){let{hamburger:e,hamburgerIcon:t,mobileMenu:n}=x(`hideMobileMenu`);e?.setAttribute(`aria-expanded`,`false`),n.classList.remove(s.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 C(){document.querySelector(o(s.MAIN_MENU))?.classList.contains(s.MOBILE__HIDDEN)&&document.querySelector(`${o(s.UTAH_DESIGN_SYSTEM)}${o(s.MOBILE_MENU)}`)?.classList.add(s.MAIN_MENU__REMOVED);let{hamburger:e,hamburgerIcon:t,mobileMenu:n}=x(`showMobileMenu`);e?.setAttribute(`aria-expanded`,`true`),n.classList.add(s.IS_OPEN),e?.setAttribute(`aria-label`,`Close the mobile menu`),t?.classList.remove(`utds-icon-before-hamburger`),t?.classList.add(`utds-icon-before-x-icon`),document.body.style.position=`relative`}function w(e,t){e.querySelectorAll(o(s.MOBILE_MENU_ACTION_BAR__ACTION_ITEM_WRAPPER)).forEach(e=>{e.classList.remove(s.ACTION_ITEM__SELECTED);let t=e.querySelector(`button`);if(!t)throw Error(`showActionItem: actionWrapper does not have actionItem A`);t.setAttribute(`aria-selected`,`false`),t.setAttribute(`tabIndex`,`-1`)}),t.classList.add(s.ACTION_ITEM__SELECTED);let n=t.querySelector(`button`);if(!n)throw Error(`showActionItem: actionWrapper does not have actionItem B`);n.setAttribute(`aria-selected`,`true`),n.removeAttribute(`tabIndex`),n.focus()}function T(e,t){e.querySelectorAll(o(s.MOBILE_MENU__CONTENT_ITEM)).forEach(e=>e.classList.remove(s.IS_OPEN)),t.classList.add(s.IS_OPEN)}function ee(e,t,n,{ariaHasPopupType:r,additionalOnClick:i,onClickHandler:a,shouldOnClickCloseMenu:c}){let l=g();if(t&&!r)throw Error(`mobileMenuInteractionHandler: there is content, but the aria type is not given`);let u=document.querySelector(o(s.MOBILE_MENU));if(!u)throw Error(`mobileMenuInteractionHandler: mobileMenu not found`);let d=document.querySelector(o(s.MOBILE_MENU__WRAPPER));if(!d)throw Error(`mobileMenuInteractionHandler: mobileMenuWrapper not found`);let f=d.querySelector(o(s.MOBILE_MENU__CONTENT));if(!f)throw Error(`mobileMenuInteractionHandler: mobileContentWrapper not found`);let p=b(n),m=b(n)?.querySelector?.(`button`),h=(m||e).getAttribute(`id`);if(!h)throw Error(`mobileMenuInteractionHandler: interactiveElementId not found`);if(t&&l.mainMenu){let n=b(t);if(n){let t=n.getAttribute(`id`);if(!t)throw Error(`mobileMenuInteractionHandler: mobileMenuContentId not found`);(m||e).setAttribute(`aria-controls`,t),n.setAttribute(`aria-labelledby`,h)}}if(e.onclick)throw Error(`mobileMenuInteractionHandler: interactiveElement already has onclick`);if(e.onclick=e=>{if(!a?.(e))if(i?.(e),u.classList.contains(s.IS_OPEN))c&&S();else{C();let e=b(t);e&&T(f,e),w(d,b(n))}},t){if(p!==e&&p.onclick)throw Error(`mobileMenuInteractionHandler: actionItemWrapperValue already has onclick`);p.onclick=e=>{if(!a?.(e)){let e=b(t);e&&T(f,e),w(d,b(n))}}}}var E=new class{#e={notifications:null,isBusy:!1};constructor(e){this.#e=JSON.parse(JSON.stringify(e))}getState(){return JSON.parse(JSON.stringify(this.#e))}setState(e){this.#e={...this.#e,...e}}}({}),D=Math.min,O=Math.max,k=Math.round,A=Math.floor,j=e=>({x:e,y:e}),te={left:`right`,right:`left`,bottom:`top`,top:`bottom`};function ne(e,t,n){return O(e,D(t,n))}function re(e,t){return typeof e==`function`?e(t):e}function M(e){return e.split(`-`)[0]}function N(e){return e.split(`-`)[1]}function ie(e){return e===`x`?`y`:`x`}function ae(e){return e===`y`?`height`:`width`}function P(e){let t=e[0];return t===`t`||t===`b`?`y`:`x`}function oe(e){return ie(P(e))}function se(e,t,n){n===void 0&&(n=!1);let r=N(e),i=oe(e),a=ae(i),o=i===`x`?r===(n?`end`:`start`)?`right`:`left`:r===`start`?`bottom`:`top`;return t.reference[a]>t.floating[a]&&(o=ge(o)),[o,ge(o)]}function ce(e){let t=ge(e);return[le(e),t,le(t)]}function le(e){return e.includes(`start`)?e.replace(`start`,`end`):e.replace(`end`,`start`)}var ue=[`left`,`right`],de=[`right`,`left`],fe=[`top`,`bottom`],pe=[`bottom`,`top`];function me(e,t,n){switch(e){case`top`:case`bottom`:return n?t?de:ue:t?ue:de;case`left`:case`right`:return t?fe:pe;default:return[]}}function he(e,t,n,r){let i=N(e),a=me(M(e),n===`start`,r);return i&&(a=a.map(e=>e+`-`+i),t&&(a=a.concat(a.map(le)))),a}function ge(e){let t=M(e);return te[t]+e.slice(t.length)}function _e(e){return{top:0,right:0,bottom:0,left:0,...e}}function ve(e){return typeof e==`number`?{top:e,right:e,bottom:e,left:e}:_e(e)}function ye(e){let{x:t,y:n,width:r,height:i}=e;return{width:r,height:i,top:n,left:t,right:t+r,bottom:n+i,x:t,y:n}}function be(e,t,n){let{reference:r,floating:i}=e,a=P(t),o=oe(t),s=ae(o),c=M(t),l=a===`y`,u=r.x+r.width/2-i.width/2,d=r.y+r.height/2-i.height/2,f=r[s]/2-i[s]/2,p;switch(c){case`top`:p={x:u,y:r.y-i.height};break;case`bottom`:p={x:u,y:r.y+r.height};break;case`right`:p={x:r.x+r.width,y:d};break;case`left`:p={x:r.x-i.width,y:d};break;default:p={x:r.x,y:r.y}}switch(N(t)){case`start`:p[o]-=f*(n&&l?-1:1);break;case`end`:p[o]+=f*(n&&l?-1:1);break}return p}async function xe(e,t){t===void 0&&(t={});let{x:n,y:r,platform:i,rects:a,elements:o,strategy:s}=e,{boundary:c=`clippingAncestors`,rootBoundary:l=`viewport`,elementContext:u=`floating`,altBoundary:d=!1,padding:f=0}=re(t,e),p=ve(f),m=o[d?u===`floating`?`reference`:`floating`:u],h=ye(await i.getClippingRect({element:await(i.isElement==null?void 0:i.isElement(m))??!0?m:m.contextElement||await(i.getDocumentElement==null?void 0:i.getDocumentElement(o.floating)),boundary:c,rootBoundary:l,strategy:s})),g=u===`floating`?{x:n,y:r,width:a.floating.width,height:a.floating.height}:a.reference,_=await(i.getOffsetParent==null?void 0:i.getOffsetParent(o.floating)),v=await(i.isElement==null?void 0:i.isElement(_))&&await(i.getScale==null?void 0:i.getScale(_))||{x:1,y:1},y=ye(i.convertOffsetParentRelativeRectToViewportRelativeRect?await i.convertOffsetParentRelativeRectToViewportRelativeRect({elements:o,rect:g,offsetParent:_,strategy:s}):g);return{top:(h.top-y.top+p.top)/v.y,bottom:(y.bottom-h.bottom+p.bottom)/v.y,left:(h.left-y.left+p.left)/v.x,right:(y.right-h.right+p.right)/v.x}}var Se=50,Ce=async(e,t,n)=>{let{placement:r=`bottom`,strategy:i=`absolute`,middleware:a=[],platform:o}=n,s=o.detectOverflow?o:{...o,detectOverflow:xe},c=await(o.isRTL==null?void 0:o.isRTL(t)),l=await o.getElementRects({reference:e,floating:t,strategy:i}),{x:u,y:d}=be(l,r,c),f=r,p=0,m={};for(let n=0;n<a.length;n++){let h=a[n];if(!h)continue;let{name:g,fn:_}=h,{x:v,y,data:b,reset:x}=await _({x:u,y:d,initialPlacement:r,placement:f,strategy:i,middlewareData:m,rects:l,platform:s,elements:{reference:e,floating:t}});u=v??u,d=y??d,m[g]={...m[g],...b},x&&p<Se&&(p++,typeof x==`object`&&(x.placement&&(f=x.placement),x.rects&&(l=x.rects===!0?await o.getElementRects({reference:e,floating:t,strategy:i}):x.rects),{x:u,y:d}=be(l,f,c)),n=-1)}return{x:u,y:d,placement:f,strategy:i,middlewareData:m}},we=e=>({name:`arrow`,options:e,async fn(t){let{x:n,y:r,placement:i,rects:a,platform:o,elements:s,middlewareData:c}=t,{element:l,padding:u=0}=re(e,t)||{};if(l==null)return{};let d=ve(u),f={x:n,y:r},p=oe(i),m=ae(p),h=await o.getDimensions(l),g=p===`y`,_=g?`top`:`left`,v=g?`bottom`:`right`,y=g?`clientHeight`:`clientWidth`,b=a.reference[m]+a.reference[p]-f[p]-a.floating[m],x=f[p]-a.reference[p],S=await(o.getOffsetParent==null?void 0:o.getOffsetParent(l)),C=S?S[y]:0;(!C||!await(o.isElement==null?void 0:o.isElement(S)))&&(C=s.floating[y]||a.floating[m]);let w=b/2-x/2,T=C/2-h[m]/2-1,ee=D(d[_],T),E=D(d[v],T),O=ee,k=C-h[m]-E,A=C/2-h[m]/2+w,j=ne(O,A,k),te=!c.arrow&&N(i)!=null&&A!==j&&a.reference[m]/2-(A<O?ee:E)-h[m]/2<0,M=te?A<O?A-O:A-k:0;return{[p]:f[p]+M,data:{[p]:j,centerOffset:A-j-M,...te&&{alignmentOffset:M}},reset:te}}}),Te=function(e){return e===void 0&&(e={}),{name:`flip`,options:e,async fn(t){var n;let{placement:r,middlewareData:i,rects:a,initialPlacement:o,platform:s,elements:c}=t,{mainAxis:l=!0,crossAxis:u=!0,fallbackPlacements:d,fallbackStrategy:f=`bestFit`,fallbackAxisSideDirection:p=`none`,flipAlignment:m=!0,...h}=re(e,t);if((n=i.arrow)!=null&&n.alignmentOffset)return{};let g=M(r),_=P(o),v=M(o)===o,y=await(s.isRTL==null?void 0:s.isRTL(c.floating)),b=d||(v||!m?[ge(o)]:ce(o)),x=p!==`none`;!d&&x&&b.push(...he(o,m,p,y));let S=[o,...b],C=await s.detectOverflow(t,h),w=[],T=i.flip?.overflows||[];if(l&&w.push(C[g]),u){let e=se(r,a,y);w.push(C[e[0]],C[e[1]])}if(T=[...T,{placement:r,overflows:w}],!w.every(e=>e<=0)){let e=(i.flip?.index||0)+1,t=S[e];if(t&&(!(u===`alignment`&&_!==P(t))||T.every(e=>P(e.placement)===_?e.overflows[0]>0:!0)))return{data:{index:e,overflows:T},reset:{placement:t}};let n=T.filter(e=>e.overflows[0]<=0).sort((e,t)=>e.overflows[1]-t.overflows[1])[0]?.placement;if(!n)switch(f){case`bestFit`:{let e=T.filter(e=>{if(x){let t=P(e.placement);return t===_||t===`y`}return!0}).map(e=>[e.placement,e.overflows.filter(e=>e>0).reduce((e,t)=>e+t,0)]).sort((e,t)=>e[1]-t[1])[0]?.[0];e&&(n=e);break}case`initialPlacement`:n=o;break}if(r!==n)return{reset:{placement:n}}}return{}}}},Ee=new Set([`left`,`top`]);async function De(e,t){let{placement:n,platform:r,elements:i}=e,a=await(r.isRTL==null?void 0:r.isRTL(i.floating)),o=M(n),s=N(n),c=P(n)===`y`,l=Ee.has(o)?-1:1,u=a&&c?-1:1,d=re(t,e),{mainAxis:f,crossAxis:p,alignmentAxis:m}=typeof d==`number`?{mainAxis:d,crossAxis:0,alignmentAxis:null}:{mainAxis:d.mainAxis||0,crossAxis:d.crossAxis||0,alignmentAxis:d.alignmentAxis};return s&&typeof m==`number`&&(p=s===`end`?m*-1:m),c?{x:p*u,y:f*l}:{x:f*l,y:p*u}}var Oe=function(e){return e===void 0&&(e=0),{name:`offset`,options:e,async fn(t){var n;let{x:r,y:i,placement:a,middlewareData:o}=t,s=await De(t,e);return a===o.offset?.placement&&(n=o.arrow)!=null&&n.alignmentOffset?{}:{x:r+s.x,y:i+s.y,data:{...s,placement:a}}}}},ke=function(e){return e===void 0&&(e={}),{name:`shift`,options:e,async fn(t){let{x:n,y:r,placement:i,platform:a}=t,{mainAxis:o=!0,crossAxis:s=!1,limiter:c={fn:e=>{let{x:t,y:n}=e;return{x:t,y:n}}},...l}=re(e,t),u={x:n,y:r},d=await a.detectOverflow(t,l),f=P(M(i)),p=ie(f),m=u[p],h=u[f];if(o){let e=p===`y`?`top`:`left`,t=p===`y`?`bottom`:`right`,n=m+d[e],r=m-d[t];m=ne(n,m,r)}if(s){let e=f===`y`?`top`:`left`,t=f===`y`?`bottom`:`right`,n=h+d[e],r=h-d[t];h=ne(n,h,r)}let g=c.fn({...t,[p]:m,[f]:h});return{...g,data:{x:g.x-n,y:g.y-r,enabled:{[p]:o,[f]:s}}}}}};function Ae(){return typeof window<`u`}function F(e){return je(e)?(e.nodeName||``).toLowerCase():`#document`}function I(e){var t;return(e==null||(t=e.ownerDocument)==null?void 0:t.defaultView)||window}function L(e){return((je(e)?e.ownerDocument:e.document)||window.document)?.documentElement}function je(e){return Ae()?e instanceof Node||e instanceof I(e).Node:!1}function R(e){return Ae()?e instanceof Element||e instanceof I(e).Element:!1}function z(e){return Ae()?e instanceof HTMLElement||e instanceof I(e).HTMLElement:!1}function Me(e){return!Ae()||typeof ShadowRoot>`u`?!1:e instanceof ShadowRoot||e instanceof I(e).ShadowRoot}function Ne(e){let{overflow:t,overflowX:n,overflowY:r,display:i}=H(e);return/auto|scroll|overlay|hidden|clip/.test(t+r+n)&&i!==`inline`&&i!==`contents`}function Pe(e){return/^(table|td|th)$/.test(F(e))}function Fe(e){try{if(e.matches(`:popover-open`))return!0}catch{}try{return e.matches(`:modal`)}catch{return!1}}var Ie=/transform|translate|scale|rotate|perspective|filter/,Le=/paint|layout|strict|content/,B=e=>!!e&&e!==`none`,Re;function ze(e){let t=R(e)?H(e):e;return B(t.transform)||B(t.translate)||B(t.scale)||B(t.rotate)||B(t.perspective)||!Ve()&&(B(t.backdropFilter)||B(t.filter))||Ie.test(t.willChange||``)||Le.test(t.contain||``)}function Be(e){let t=U(e);for(;z(t)&&!V(t);){if(ze(t))return t;if(Fe(t))return null;t=U(t)}return null}function Ve(){return Re??=typeof CSS<`u`&&CSS.supports&&CSS.supports(`-webkit-backdrop-filter`,`none`),Re}function V(e){return/^(html|body|#document)$/.test(F(e))}function H(e){return I(e).getComputedStyle(e)}function He(e){return R(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.scrollX,scrollTop:e.scrollY}}function U(e){if(F(e)===`html`)return e;let t=e.assignedSlot||e.parentNode||Me(e)&&e.host||L(e);return Me(t)?t.host:t}function Ue(e){let t=U(e);return V(t)?e.ownerDocument?e.ownerDocument.body:e.body:z(t)&&Ne(t)?t:Ue(t)}function We(e,t,n){t===void 0&&(t=[]),n===void 0&&(n=!0);let r=Ue(e),i=r===e.ownerDocument?.body,a=I(r);if(i){let e=Ge(a);return t.concat(a,a.visualViewport||[],Ne(r)?r:[],e&&n?We(e):[])}else return t.concat(r,We(r,[],n))}function Ge(e){return e.parent&&Object.getPrototypeOf(e.parent)?e.frameElement:null}function Ke(e){let t=H(e),n=parseFloat(t.width)||0,r=parseFloat(t.height)||0,i=z(e),a=i?e.offsetWidth:n,o=i?e.offsetHeight:r,s=k(n)!==a||k(r)!==o;return s&&(n=a,r=o),{width:n,height:r,$:s}}function qe(e){return R(e)?e:e.contextElement}function W(e){let t=qe(e);if(!z(t))return j(1);let n=t.getBoundingClientRect(),{width:r,height:i,$:a}=Ke(t),o=(a?k(n.width):n.width)/r,s=(a?k(n.height):n.height)/i;return(!o||!Number.isFinite(o))&&(o=1),(!s||!Number.isFinite(s))&&(s=1),{x:o,y:s}}var Je=j(0);function Ye(e){let t=I(e);return!Ve()||!t.visualViewport?Je:{x:t.visualViewport.offsetLeft,y:t.visualViewport.offsetTop}}function Xe(e,t,n){return t===void 0&&(t=!1),!n||t&&n!==I(e)?!1:t}function G(e,t,n,r){t===void 0&&(t=!1),n===void 0&&(n=!1);let i=e.getBoundingClientRect(),a=qe(e),o=j(1);t&&(r?R(r)&&(o=W(r)):o=W(e));let s=Xe(a,n,r)?Ye(a):j(0),c=(i.left+s.x)/o.x,l=(i.top+s.y)/o.y,u=i.width/o.x,d=i.height/o.y;if(a){let e=I(a),t=r&&R(r)?I(r):r,n=e,i=Ge(n);for(;i&&r&&t!==n;){let e=W(i),t=i.getBoundingClientRect(),r=H(i),a=t.left+(i.clientLeft+parseFloat(r.paddingLeft))*e.x,o=t.top+(i.clientTop+parseFloat(r.paddingTop))*e.y;c*=e.x,l*=e.y,u*=e.x,d*=e.y,c+=a,l+=o,n=I(i),i=Ge(n)}}return ye({width:u,height:d,x:c,y:l})}function Ze(e,t){let n=He(e).scrollLeft;return t?t.left+n:G(L(e)).left+n}function Qe(e,t){let n=e.getBoundingClientRect();return{x:n.left+t.scrollLeft-Ze(e,n),y:n.top+t.scrollTop}}function $e(e){let{elements:t,rect:n,offsetParent:r,strategy:i}=e,a=i===`fixed`,o=L(r),s=t?Fe(t.floating):!1;if(r===o||s&&a)return n;let c={scrollLeft:0,scrollTop:0},l=j(1),u=j(0),d=z(r);if((d||!d&&!a)&&((F(r)!==`body`||Ne(o))&&(c=He(r)),d)){let e=G(r);l=W(r),u.x=e.x+r.clientLeft,u.y=e.y+r.clientTop}let f=o&&!d&&!a?Qe(o,c):j(0);return{width:n.width*l.x,height:n.height*l.y,x:n.x*l.x-c.scrollLeft*l.x+u.x+f.x,y:n.y*l.y-c.scrollTop*l.y+u.y+f.y}}function et(e){return Array.from(e.getClientRects())}function tt(e){let t=L(e),n=He(e),r=e.ownerDocument.body,i=O(t.scrollWidth,t.clientWidth,r.scrollWidth,r.clientWidth),a=O(t.scrollHeight,t.clientHeight,r.scrollHeight,r.clientHeight),o=-n.scrollLeft+Ze(e),s=-n.scrollTop;return H(r).direction===`rtl`&&(o+=O(t.clientWidth,r.clientWidth)-i),{width:i,height:a,x:o,y:s}}var nt=25;function rt(e,t){let n=I(e),r=L(e),i=n.visualViewport,a=r.clientWidth,o=r.clientHeight,s=0,c=0;if(i){a=i.width,o=i.height;let e=Ve();(!e||e&&t===`fixed`)&&(s=i.offsetLeft,c=i.offsetTop)}let l=Ze(r);if(l<=0){let e=r.ownerDocument,t=e.body,n=getComputedStyle(t),i=e.compatMode===`CSS1Compat`&&parseFloat(n.marginLeft)+parseFloat(n.marginRight)||0,o=Math.abs(r.clientWidth-t.clientWidth-i);o<=nt&&(a-=o)}else l<=nt&&(a+=l);return{width:a,height:o,x:s,y:c}}function it(e,t){let n=G(e,!0,t===`fixed`),r=n.top+e.clientTop,i=n.left+e.clientLeft,a=z(e)?W(e):j(1);return{width:e.clientWidth*a.x,height:e.clientHeight*a.y,x:i*a.x,y:r*a.y}}function at(e,t,n){let r;if(t===`viewport`)r=rt(e,n);else if(t===`document`)r=tt(L(e));else if(R(t))r=it(t,n);else{let n=Ye(e);r={x:t.x-n.x,y:t.y-n.y,width:t.width,height:t.height}}return ye(r)}function ot(e,t){let n=U(e);return n===t||!R(n)||V(n)?!1:H(n).position===`fixed`||ot(n,t)}function st(e,t){let n=t.get(e);if(n)return n;let r=We(e,[],!1).filter(e=>R(e)&&F(e)!==`body`),i=null,a=H(e).position===`fixed`,o=a?U(e):e;for(;R(o)&&!V(o);){let t=H(o),n=ze(o);!n&&t.position===`fixed`&&(i=null),(a?!n&&!i:!n&&t.position===`static`&&i&&(i.position===`absolute`||i.position===`fixed`)||Ne(o)&&!n&&ot(e,o))?r=r.filter(e=>e!==o):i=t,o=U(o)}return t.set(e,r),r}function ct(e){let{element:t,boundary:n,rootBoundary:r,strategy:i}=e,a=[...n===`clippingAncestors`?Fe(t)?[]:st(t,this._c):[].concat(n),r],o=at(t,a[0],i),s=o.top,c=o.right,l=o.bottom,u=o.left;for(let e=1;e<a.length;e++){let n=at(t,a[e],i);s=O(n.top,s),c=D(n.right,c),l=D(n.bottom,l),u=O(n.left,u)}return{width:c-u,height:l-s,x:u,y:s}}function lt(e){let{width:t,height:n}=Ke(e);return{width:t,height:n}}function ut(e,t,n){let r=z(t),i=L(t),a=n===`fixed`,o=G(e,!0,a,t),s={scrollLeft:0,scrollTop:0},c=j(0);function l(){c.x=Ze(i)}if(r||!r&&!a)if((F(t)!==`body`||Ne(i))&&(s=He(t)),r){let e=G(t,!0,a,t);c.x=e.x+t.clientLeft,c.y=e.y+t.clientTop}else i&&l();a&&!r&&i&&l();let u=i&&!r&&!a?Qe(i,s):j(0);return{x:o.left+s.scrollLeft-c.x-u.x,y:o.top+s.scrollTop-c.y-u.y,width:o.width,height:o.height}}function dt(e){return H(e).position===`static`}function ft(e,t){if(!z(e)||H(e).position===`fixed`)return null;if(t)return t(e);let n=e.offsetParent;return L(e)===n&&(n=n.ownerDocument.body),n}function pt(e,t){let n=I(e);if(Fe(e))return n;if(!z(e)){let t=U(e);for(;t&&!V(t);){if(R(t)&&!dt(t))return t;t=U(t)}return n}let r=ft(e,t);for(;r&&Pe(r)&&dt(r);)r=ft(r,t);return r&&V(r)&&dt(r)&&!ze(r)?n:r||Be(e)||n}var mt=async function(e){let t=this.getOffsetParent||pt,n=this.getDimensions,r=await n(e.floating);return{reference:ut(e.reference,await t(e.floating),e.strategy),floating:{x:0,y:0,width:r.width,height:r.height}}};function ht(e){return H(e).direction===`rtl`}var gt={convertOffsetParentRelativeRectToViewportRelativeRect:$e,getDocumentElement:L,getClippingRect:ct,getOffsetParent:pt,getElementRects:mt,getClientRects:et,getDimensions:lt,getScale:W,isElement:R,isRTL:ht};function _t(e,t){return e.x===t.x&&e.y===t.y&&e.width===t.width&&e.height===t.height}function vt(e,t){let n=null,r,i=L(e);function a(){var e;clearTimeout(r),(e=n)==null||e.disconnect(),n=null}function o(s,c){s===void 0&&(s=!1),c===void 0&&(c=1),a();let l=e.getBoundingClientRect(),{left:u,top:d,width:f,height:p}=l;if(s||t(),!f||!p)return;let m=A(d),h=A(i.clientWidth-(u+f)),g=A(i.clientHeight-(d+p)),_=A(u),v={rootMargin:-m+`px `+-h+`px `+-g+`px `+-_+`px`,threshold:O(0,D(1,c))||1},y=!0;function b(t){let n=t[0].intersectionRatio;if(n!==c){if(!y)return o();n?o(!1,n):r=setTimeout(()=>{o(!1,1e-7)},1e3)}n===1&&!_t(l,e.getBoundingClientRect())&&o(),y=!1}try{n=new IntersectionObserver(b,{...v,root:i.ownerDocument})}catch{n=new IntersectionObserver(b,v)}n.observe(e)}return o(!0),a}function yt(e,t,n,r){r===void 0&&(r={});let{ancestorScroll:i=!0,ancestorResize:a=!0,elementResize:o=typeof ResizeObserver==`function`,layoutShift:s=typeof IntersectionObserver==`function`,animationFrame:c=!1}=r,l=qe(e),u=i||a?[...l?We(l):[],...t?We(t):[]]:[];u.forEach(e=>{i&&e.addEventListener(`scroll`,n,{passive:!0}),a&&e.addEventListener(`resize`,n)});let d=l&&s?vt(l,n):null,f=-1,p=null;o&&(p=new ResizeObserver(e=>{let[r]=e;r&&r.target===l&&p&&t&&(p.unobserve(t),cancelAnimationFrame(f),f=requestAnimationFrame(()=>{var e;(e=p)==null||e.observe(t)})),n()}),l&&!c&&p.observe(l),t&&p.observe(t));let m,h=c?G(e):null;c&&g();function g(){let t=G(e);h&&!_t(h,t)&&n(),h=t,m=requestAnimationFrame(g)}return n(),()=>{var e;u.forEach(e=>{i&&e.removeEventListener(`scroll`,n),a&&e.removeEventListener(`resize`,n)}),d?.(),(e=p)==null||e.disconnect(),p=null,c&&cancelAnimationFrame(m)}}var bt=Oe,xt=ke,St=Te,Ct=we,wt=(e,t,n)=>{let r=new Map,i={platform:gt,...n},a={...i.platform,_c:r};return Ce(e,t,{...i,platform:a})},Tt=`<div class="tooltip__wrapper tooltip__wrapper--hidden" aria-hidden="true"> <div class="tooltip__content"> <div class="tooltip__arrow"></div> </div> </div> `,Et=NaN;function Dt(e,t){let r=f(Tt),i=r.querySelector(o(s.TOOLTIP__CONTENT)),a=r.querySelector(o(s.TOOLTIP__ARROW)),c;if(!i)throw Error(`hookupTooltip: tooltipContent not found`);i.appendChild(t),e.appendChild(r);let l=[bt(5),St(),xt()];a&&l.push(Ct({element:a}));let u=()=>wt(e,r,{placement:n.BOTTOM,middleware:l}).then(({x:e,y:t,middlewareData:i})=>{r.setAttribute(`data-popup-placement`,n.BOTTOM),Object.assign(r.style,{left:`${e}px`,top:`${t}px`}),a&&Object.assign(a?.style,{left:`${i.arrow?.x}px`,top:`${i?.arrow?.y}px`})});if(e.onmouseenter||e.onmouseleave)throw Error(`hookupTooltip: element already has an onmouseenter and/or onmouseleave event`);let d=NaN,p=()=>{clearTimeout(d),r.classList.add(s.TOOLTIP__WRAPPER__HIDDEN),r.classList.remove(s.TOOLTIP__WRAPPER__VISIBLE),typeof c==`function`&&c(),Et=window.setTimeout(()=>{Et=NaN},500)},m=e=>{(e.code===`Escape`||e.key===`Escape`)&&(p(),document.removeEventListener(`keyup`,m))};e.onmouseleave=()=>{p(),document.removeEventListener(`keyup`,m)},e.onmouseenter=()=>{clearTimeout(d),d=window.setTimeout(()=>{clearTimeout(Et),Et=-1;let t=e.querySelector(o(s.POPUP_WRAPPER));(!t||t.classList.contains(s.POPUP__HIDDEN))&&(r.classList.remove(s.TOOLTIP__WRAPPER__HIDDEN),r.classList.add(s.TOOLTIP__WRAPPER__VISIBLE),c=yt(e,r,u),document.addEventListener(`keyup`,m))},Et?0:500)}}var Ot=`<div class="utds-header-action-item"> <a href="#" class="icon-button utds-header-action-item__icon-button"> <span class="utds-header-action-item__title visually-hidden"></span> </a> </div> `,kt=`<div class="utds-badge__wrapper"> <span class="utds-badge__value"></span> <span class="utds-badge__label visually-hidden"></span> </div> `;function K(e){let t=null;if(e){t=f(kt),t.classList.add(s.BADGE_WRAPPER__ACTION_ITEM);let n=t.querySelector(o(s.BADGE__LABEL));if(!n)throw Error(`renderActionItemBadge: badgeLabel not found`);if(n.appendChild(document.createTextNode(e.label)),e.value||e.value===0){let n=t.querySelector(o(s.BADGE__VALUE));if(!n)throw Error(`renderActionItemBadge: badgeValue not found`);n.appendChild(document.createTextNode(`${e.value}`))}else t.classList.add(s.BADGE_WRAPPER__SMALL);e.className&&t.classList.add(e.className)}return t}function At(e){let t=f(Ot),n=document.createTextNode(e.title),r=t instanceof HTMLCollection?t[0]:t;e.showTitle&&r.classList.add(s.ACTION_ITEM__ICON_BUTTON_TITLE);let i=r.querySelector(o(s.ACTION_ITEM__TITLE));if(!i)throw Error(`renderActionItem: titleDiv not found`);i.appendChild(n),e.showTitle?i.classList.remove(s.VISUALLY_HIDDEN):i.classList.add(s.VISUALLY_HIDDEN);let a=t.querySelector(o(s.ACTION_ITEM__ICON_BUTTON));if(!a)throw Error(`renderActionItem: iconAnchor not found`);e.className&&a.classList.add(e.className);let c=K(e.badge);c&&a.appendChild(c);let l=f(e.icon);if(l.setAttribute(`role`,`presentation`),a.appendChild(l),!(a instanceof HTMLElement))throw Error(`renderActionItem: iconAnchor is not an HTMLElement`);if(e.actionLink)a.href=e.actionLink;else throw console.error(e),Error(`Action Item: no defined action; must have an actionLink`);return Dt(t,document.createTextNode(e.title)),t}var jt=`<div class="utah-design-system" id="utds-notifications__drawer"> <div class="drawer-wrapper utds-notifications-drawer"> <div class="drawer__backdrop backdrop-dark"> <dialog aria-labelledby="notifications-drawer-title" class="drawer__inner drawer--right" > <div class="drawer__title" id="notifications-drawer-title" tabindex="0" > <span class="utds-icon-before-alert" aria-hidden="true"></span> Notifications </div> <div class="utds-notifications-drawer__header-buttons" > <button class="button button--solid button--primary-color" type="button" id="utds-notifications__mark-all-read" disabled > Mark all as read </button> <a class="button button--solid" type="button" id="utds-notifications__view-all" > View all <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> </a> </div> <ul class="utds-notifications__list"></ul> <button class="button icon-button drawer__close-button icon-button--borderless icon-button--small drawer__close-button" type="button"><span class="utds-icon-before-x-icon" aria-hidden="true"></span><span class="visually-hidden">Close</span></button> </dialog> <a href="#endofdialog" class="drawer__end-focus visually-hidden">End of dialog</a> </div> </div> </div> `;function Mt(e){return{status:l(e.querySelector(o(s.NOTIFY__LIST_ITEM_STATUS)),`renderNotificationItem: status not found`),icon:l(e.querySelector(`.${s.NOTIFY__LIST_ITEM_ICON} span`),`renderNotificationItem: icon not found`),title:l(e.querySelector(o(s.NOTIFY__LIST_ITEM_TITLE)),`renderNotificationItem: title not found`),time:l(e.querySelector(o(s.NOTIFY__LIST_ITEM_TIME)),`renderNotificationItem: time not found`),brand:l(e.querySelector(o(s.NOTIFY__LIST_ITEM_BRAND)),`renderNotificationItem: brand not found`),message:l(e.querySelector(o(s.NOTIFY__LIST_ITEM_MESSAGE)),`renderNotificationItem: message not found`),link:l(e.querySelector(o(s.NOTIFY__LIST_ITEM_LINK)),`renderNotificationItem: link not found`),linkText:l(e.querySelector(o(s.NOTIFY__LIST_ITEM_LINK_TEXT)),`renderNotificationItem: link text not found`)}}function Nt(e=NaN){let t=E.getState(),n=l(document.getElementsByClassName(s.NOTIFICATIONS__ACTION_ITEM),`renderNotificationBadge: notifications action item not found`),r=l(document.getElementById(s.MAIN_MENU__HAMBURGER_ID),`renderNotificationBadge: notifications hamburger menu item not found`),i=Array.from(n);r&&i.push(r),i.forEach(n=>{let r=n.querySelector(`.${s.NOTIFICATIONS__ACTION_ITEM_BADGE}`);if(e||t.notifications?.unreadCount&&t.notifications.unreadCount>0){let i={label:`Notifications`,value:t.notifications?.unreadCount||e,className:s.NOTIFICATIONS__ACTION_ITEM_BADGE};r&&r.remove(),r=l(K(i),`renderNotificationBadge: notifications badge not found`),n.appendChild(r)}else r&&r.remove()})}function Pt(){if(!(window.location.href.includes(`.local`)&&!1))return`https://cdn.utah.gov/dts-ds-custom-header-plugin/notifications/v1/index.html`}var Ft=`setDebug`;function It(e=void 0){localStorage.removeItem(Ft);let t=[`localhost`,`127.0.0.1`,`::1`,`.local`,`.dev`,`.at`].find(e=>window.location.hostname.includes(e))?`true`:`false`,n=typeof e==`boolean`?e?`true`:`false`:t;localStorage.setItem(Ft,n)}function q(){localStorage.getItem(`setDebug`)===`true`&&console.log(...arguments)}function Lt(){localStorage.getItem(`setDebug`)===`true`&&console.warn(...arguments)}function Rt(){localStorage.getItem(`setDebug`)===`true`&&console.error(...arguments)}function zt(){let e=document.getElementById(s.NOTIFICATIONS__IFRAME),t=Pt();e?.contentWindow?(q(`Parent: Mark all notifications as read:`),e.contentWindow.postMessage({request:`markAllAsRead`},t)):console.error(`postMessageMarkAllAsRead: Iframe is not ready or not found. Cannot mark notification as read.`)}function Bt(){l(Array.from(document.querySelectorAll(o(s.NOTIFY__LIST_ITEM))),`renderNotificationItem: Notifications List not found`).forEach(e=>{let{status:t,title:n}=Mt(e);t.classList.add(s.NOTIFY__LIST_ITEM_STATUS_IS_READ),n.classList.add(s.NOTIFY__LIST_ITEM_STATUS_IS_READ),e.classList.add(s.NOTIFY__LIST_ITEM_IS_READ)});let e=E.getState()?.notifications;if(!e||!e.edges)throw Error(`No notifications object found in current state!`);{let t=e.edges.map(e=>{if(e.node.isRead)return e;{let t={...e.node,isRead:!0};return{...e,node:t}}});E.setState({notifications:{...e,edges:t,unreadCount:0}}),Nt(),zt()}}var Vt=`<li class="utds-notify-list-item" tabindex="0"> <div class="utds-notify-list-item__header"> <div class="utds-notify-list-item__status"></div> <div class="utds-notify-list-item__icon"> <span class="utds-icon-before-info" aria-hidden="true" /> </div> <div class="utds-notify-list-item__title"></div> <div class="utds-notify-list-item__time"></div> </div> <div class="utds-notify-list-item__message"></div> <div class="utds-notify-list-item__footer gap-xs"> <img src="" alt="" class="utds-notify-list-item__brand"> <a href="#" class="utds-notify-list-item__link button button--primary-color button--small" target="_blank" rel="noreferrer"> <span class="utds-notify-list-item__link-text">Learn more</span> <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> </a> </div> </li> `;function Ht(e){let t=new Date(e),n=Math.floor((new Date().getTime()-t.getTime())/1e3);return n<3600?`${Math.round(n/60)}m`:n<86400?`${Math.round(n/3600)}h`:`${Math.round(n/86400)}d`}function Ut(e){let t=document.getElementById(s.NOTIFICATIONS__IFRAME),n=Pt();t?.contentWindow?(q(`Parent: Mark a notification as read:`,e),t.contentWindow.postMessage({request:`markAsRead`,options:{id:e}},n)):console.error(`postMessageMarkAsRead: Iframe is not ready or not found. Cannot mark notification as read.`)}function Wt(e){let t=E.getState()?.notifications;if(!t||!t.edges)throw Error(`No notifications object found in current state!`);{let n=t.edges.find(t=>t.node.id===e);if(n&&!n.node.isRead){let r={...n.node,isRead:!0},i={...n,node:r},a=t.edges.map(t=>t.node.id===e?i:t),o=Math.max(0,t.unreadCount-1);E.setState({notifications:{...t,edges:a,unreadCount:o}}),Nt(),Ut(e)}}}function Gt(e){let t=f(Vt),{status:n,icon:r,title:i,time:a,brand:o,message:c,link:l,linkText:u}=Mt(t);t.id=e.id,t.addEventListener(`click`,e=>{e.preventDefault(),e.stopPropagation(),t.focus()});let d=NaN;return t.addEventListener(`focusin`,()=>{clearTimeout(d),d=window.setTimeout(()=>{Wt(e.id),n.classList.add(s.NOTIFY__LIST_ITEM_STATUS_IS_READ),i.classList.add(s.NOTIFY__LIST_ITEM_STATUS_IS_READ),t.classList.add(s.NOTIFY__LIST_ITEM_IS_READ)},2e3)}),t.addEventListener(`focusout`,()=>{clearTimeout(d)}),e.isRead&&(n.classList.add(`${s.NOTIFY__LIST_ITEM_STATUS_IS_READ}`),i.classList.add(s.NOTIFY__LIST_ITEM_STATUS_IS_READ),t.classList.add(s.NOTIFY__LIST_ITEM_IS_READ)),r.className=`utds-icon-before-${e.icon}`,i.innerText=e.title,a.innerText=e.createDate?Ht(e.createDate):``,o.setAttribute(`src`,e.logoUrl),o.setAttribute(`alt`,`logo for ${e.logoUrl}`),c.innerText=e.message,l.setAttribute(`href`,e.linkUrl),u.innerText=e.linkText,l.addEventListener(`click`,t=>{Wt(e.id),t.stopPropagation()}),t}function Kt(e=!1){return Gt({logoUrl:`https://cdn.utah.gov/agency-brands/dgo-myutah.svg`,logoDescription:`MyUtah Logo`,createDate:``,expireDate:``,icon:`info`,id:_(),isRead:!0,linkText:e?`Manage Settings`:`Visit MyUtah`,linkUrl:e?`/u?id=my_information&wgt=my_notifications`:`https://my.utah.gov/u?id=my_information&wgt=my_notifications`,message:`Your notifications will appear here. You may also receive email and text messages. Enroll or review your preferences.`,title:`No Unread Notifications`})}var qt=`<li class="flex justify-center p-spacing-xl"> <button class="button button--solid button--primary-color" type="button" id="load-more-notifications"> Load more </button> </li> `,Jt=`<div aria-valuemax="100" aria-valuemin="0" class="spinner spinner--indeterminate" role="progressbar" aria-label="Loading..." > <div class="spinner__animation"> <svg height="64" role="presentation" viewBox="-10.00 -10.00 120.00 120.00" width="64" > <path stroke-width="7" class="spinner__track" d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90" ></path> <path class="spinner__value" d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90" pathLength="360" stroke-dasharray="360 360" stroke-dashoffset="270" stroke-width="11" ></path> </svg> </div> <div class="spinner__children"> Loading </div> </div> `;function Yt({size:e,strokeWidth:t}={size:`64`,strokeWidth:`2`}){let n=f(Jt),r=l(n.querySelector(`${o(s.SPINNER__ANIMATION)} svg`),`renderSpinner: spinnerSVG not found`),i=l(n.querySelector(o(s.SPINNER__VALUE)),`renderSpinner: spinnerValue not found`);return r.setAttribute(`height`,e),r.setAttribute(`width`,e),i.setAttribute(`stroke-width`,t),n}function Xt(e){let t=document.getElementById(s.NOTIFICATIONS__IFRAME),n=Pt();t?.contentWindow&&t.contentWindow.postMessage({request:`getNotifications`,options:{endCursor:e,hostname:document.location.hostname}},n)}function Zt(e){let t=document.getElementById(s.NOTIFICATIONS__LOAD_MORE);t&&t.parentElement?.remove();let n=f(qt),r=n.children[0];return r&&r.addEventListener(`click`,()=>{r.innerHTML=``,r.appendChild(Yt({size:`24`,strokeWidth:`8`})),r.ariaDisabled=`true`,r.setAttribute(`disabled`,`true`),Xt(e)}),n}function Qt(e,t=null,n,r=!1){let i=t||document.querySelector(o(s.NOTIFICATIONS__LIST));if(i)if(e.length>0){e.sort((e,t)=>{let n=new Date(e.node.createDate).valueOf(),r=new Date(t.node.createDate).valueOf();return Number(e.node.isRead)-Number(t.node.isRead)||r-n}).forEach(e=>{document.getElementById(e.node.id)||i.appendChild(Gt({logoUrl:e.node.logoUrl,logoDescription:e.node.logoDescription,createDate:e.node.createDate,expireDate:e.node.expireDate,icon:String(e.node.icon).toLowerCase(),id:e.node.id,isRead:e.node.isRead,linkText:e.node.linkText,linkUrl:e.node.linkUrl,message:e.node.message,title:e.node.title}))});let t=document.querySelector(`#${s.NOTIFICATIONS__DRAWER_MARK_ALL_READ_ID}`);t&&(t.disabled=!1),n?.hasNextPage?i.appendChild(Zt(n.endCursor)):document.getElementById(s.NOTIFICATIONS__LOAD_MORE)?.parentElement?.remove()}else i.appendChild(Kt(r));else throw Error(`renderNotificationCards: notificationsListDom not found!`)}function $t(){let e=f(`<li class="utds-notify-list-item utds-notify-list-item--busy-card" tabindex="0"></li>`);return e.appendChild(Yt({size:`120`,strokeWidth:`8`})),e}var en=/^my(.local|.dev|.at)?\.utah\.gov$/;function tn(){function e(e){e.remove(),document.body.style.overflow=`unset`}let t=f(jt),n=document.body,r=en.test(document.location.hostname),i=l(t.querySelector(o(s.NOTIFICATIONS__DRAWER_CLOSE_BUTTON)),`renderNotificationsDrawer: closeButton not found`),a=l(t.querySelector(o(s.NOTIFICATIONS__DRAWER_BACKDROP)),`renderNotificationsDrawer: backdrop not found`),c=l(t.querySelector(o(s.NOTIFICATIONS__DRAWER_INNER)),`renderNotificationsDrawer: drawer inner not found`),u=l(t.querySelector(o(s.NOTIFICATIONS__DRAWER_TITLE)),`renderNotificationsDrawer: drawer title not found`),d=l(t.querySelector(o(s.NOTIFICATIONS__DRAWER_END_FOCUS)),`renderNotificationsDrawer: drawer end focus not found`),p=l(t.querySelector(o(s.NOTIFICATIONS__DRAWER_HEADER_BUTTONS)),`renderNotificationsDrawer: drawer "header buttons" not found`),m=l(t.querySelector(`#${s.NOTIFICATIONS__DRAWER_MARK_ALL_READ_ID}`),`renderNotificationsDrawer: drawer "mark all read" not found`),h=l(t.querySelector(`#${s.NOTIFICATIONS__DRAWER_VIEW_ALL_ID}`),`renderNotificationsDrawer: drawer "mark all read" not found`),g=l(t.querySelector(o(s.NOTIFICATIONS__LIST)),`renderNotificationsDrawer: notifications list end not found`);i.onclick=n=>{n.preventDefault(),n.stopPropagation(),e(t)},a.onclick=n=>{n.preventDefault(),n.stopPropagation(),e(t)},t.onkeyup=n=>{(n.code===`Escape`||n.key===`Escape`)&&(n.preventDefault(),n.stopPropagation(),e(t))},c.onclick=e=>{e.stopPropagation()};let _=At({icon:`<span class="utds-icon-before-gear" aria-hidden="true"></span>`,title:`Settings`,showTitle:!1,actionLink:r?`/u?id=my_information&wgt=my_notifications`:`https://my.utah.gov/u?id=my_information&wgt=my_notifications`,className:`notifications-settings-button`});p.appendChild(_),m.onclick=e=>{e.stopPropagation(),e.preventDefault(),Bt()},h.href=r?`/u?id=my_notifications`:`https://my.utah.gov/u?id=my_notifications`;let{notifications:v,isBusy:y}=E.getState();y&&g.appendChild($t()),v&&(Qt(v.edges,g,v.pageInfo,r),m.disabled=!1),d.addEventListener(`focus`,e=>{e.preventDefault(),e.stopPropagation(),u.focus()}),n?.appendChild(t),document.body.style.overflow=`hidden`,u.focus()}function nn(){return{showTitle:!1,title:`Notifications`,actionFunction:()=>{tn()},icon:`<span class="utds-icon-before-alert" aria-hidden="true" />`,className:s.NOTIFICATIONS__ACTION_ITEM}}function rn(e,t,n){let r=!1;return e&&(Array.isArray(e)?r=e.some(e=>rn(e,t,n)):(r=n(e),r||=!!t?.filter(t=>e[t])?.some(r=>rn(e[r],t,n)))),r}function an(e){return!e.closest(`.menu-item__title`)&&!e.closest(`.vertical-menu__title`)}function on(e,t,n,r){t?(e.classList.remove(r),e.classList.add(n)):(e.classList.add(r),e.classList.remove(n))}var J,sn={},cn={SHIFT:`shift-key`};function ln(){J&&=(document.removeEventListener(`click`,J.globalOnClick),document.removeEventListener(`keyup`,J.globalOnKeyup),document.removeEventListener(`keydown`,J.globalOnKeydown),null)}function un(){let e=[`${o(s.UTAH_DESIGN_SYSTEM)} ${o(s.HEADER)} ${o(s.POPUP_WRAPPER)}`,`${o(s.UTAH_DESIGN_SYSTEM)} ${o(s.MAIN_MENU)} ${o(s.POPUP_WRAPPER)}`],t=document.querySelectorAll(e.join(`,`));Array.from(t).filter(e=>!e.classList.contains(s.POPUP__HIDDEN)).forEach(e=>{let t=e.getAttribute(`id`);if(t){let e=document.querySelector(`[aria-controls="${t}"]`);e&&an(e)&&e.setAttribute(`aria-expanded`,`false`)}on(e,!1,s.POPUP__VISIBLE,s.POPUP__HIDDEN)})}function dn(){J&&ln(),J={globalOnClick:()=>{},globalOnKeyup:()=>{},globalOnKeydown:()=>{}},J.globalOnClick=un,document.addEventListener