@utahdts/utah-design-system-header 5.0.0 → 5.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/style.css CHANGED
@@ -766,6 +766,10 @@ variables and settings
766
766
  .utah-design-system .utds-icon-after-mail-open::after {
767
767
  content: "\e93f";
768
768
  }
769
+ .utah-design-system .utds-icon-before-ai::before,
770
+ .utah-design-system .utds-icon-after-ai::after {
771
+ content: "\e940";
772
+ }
769
773
  /*
770
774
  ############ _media-size-vars.scss ############
771
775
  Media Sizes - SCSS Variables
@@ -2422,6 +2426,68 @@ component specific, BEM (Block, Element, Modifier)
2422
2426
  .utah-design-system .tag--clearable .tag--small {
2423
2427
  padding: 0 0 0 var(--spacing-xs);
2424
2428
  }
2429
+ .utah-design-system .chatbot__wrapper {
2430
+ max-width: calc(100% - 2 * (1rem + var(--spacing-2xs)));
2431
+ }
2432
+ .utah-design-system .chatbot__input-wrapper label.text-area__label {
2433
+ display: flex;
2434
+ align-items: center;
2435
+ position: relative;
2436
+ }
2437
+ .utah-design-system .chatbot__input-wrapper label.text-area__label:before {
2438
+ content: "\e940";
2439
+ display: inline-block;
2440
+ font-family: "utah design system";
2441
+ font-style: normal;
2442
+ font-weight: normal;
2443
+ font-size: 1em;
2444
+ line-height: 1;
2445
+ -webkit-font-smoothing: antialiased;
2446
+ -moz-osx-font-smoothing: grayscale;
2447
+ position: absolute;
2448
+ left: calc(-1rem - var(--spacing-2xs));
2449
+ }
2450
+ .utah-design-system .chatbot__answer-wrapper {
2451
+ display: flex;
2452
+ flex-direction: column;
2453
+ }
2454
+ .utah-design-system .chatbot__answer-user {
2455
+ align-self: flex-end;
2456
+ background-color: var(--gray-light-color);
2457
+ padding: var(--spacing-s) var(--spacing);
2458
+ border-radius: var(--radius-medium) var(--radius-medium) 0 var(--radius-medium);
2459
+ margin-bottom: var(--spacing);
2460
+ max-width: 85%;
2461
+ position: relative;
2462
+ }
2463
+ .utah-design-system .chatbot__answer-user:after {
2464
+ content: "";
2465
+ display: block;
2466
+ width: 0;
2467
+ height: 0;
2468
+ position: absolute;
2469
+ bottom: 0;
2470
+ right: -10px;
2471
+ border-style: solid;
2472
+ border-width: 5px;
2473
+ border-color: transparent transparent var(--gray-light-color) var(--gray-light-color);
2474
+ }
2475
+ .utah-design-system .chatbot__answer-ai {
2476
+ position: relative;
2477
+ }
2478
+ .utah-design-system .chatbot__answer-ai:before {
2479
+ content: "\e940";
2480
+ display: inline-block;
2481
+ font-family: "utah design system";
2482
+ font-style: normal;
2483
+ font-weight: normal;
2484
+ font-size: 1em;
2485
+ line-height: 1;
2486
+ -webkit-font-smoothing: antialiased;
2487
+ -moz-osx-font-smoothing: grayscale;
2488
+ position: absolute;
2489
+ left: calc(-1rem - var(--spacing-2xs));
2490
+ }
2425
2491
  .utah-design-system .footer-agency-information {
2426
2492
  background: var(--gray-color);
2427
2493
  color: white;
@@ -3532,7 +3598,7 @@ component specific, BEM (Block, Element, Modifier)
3532
3598
  position: relative;
3533
3599
  z-index: 2500;
3534
3600
  }
3535
- .utah-design-system.main-menu__outer:hover {
3601
+ .utah-design-system.main-menu__outer:has(.popup__wrapper:not(.popup__wrapper--hidden)) {
3536
3602
  z-index: 4000;
3537
3603
  }
3538
3604
  .utah-design-system .main-menu__wrapper {
@@ -3569,7 +3635,7 @@ component specific, BEM (Block, Element, Modifier)
3569
3635
  padding: var(--spacing-3xs) var(--spacing);
3570
3636
  margin: var(--spacing-xs) 0;
3571
3637
  border-radius: 999px;
3572
- transition: all var(--timing-quick) ease-in-out;
3638
+ transition: box-shadow var(--timing-quick) ease-in-out;
3573
3639
  position: relative;
3574
3640
  box-sizing: border-box;
3575
3641
  font-size: var(--font-size);
@@ -3916,6 +3982,7 @@ component specific, BEM (Block, Element, Modifier)
3916
3982
  padding: var(--spacing-2xs) var(--spacing);
3917
3983
  text-align: left;
3918
3984
  text-decoration: none;
3985
+ transition: background-color var(--timing-quick) ease-in-out;
3919
3986
  width: 100%;
3920
3987
  position: relative;
3921
3988
  }
@@ -5145,6 +5212,15 @@ BEM standard: Block, Element, Modifier
5145
5212
  .utds-citizen-experience-wrapper .main-menu__search {
5146
5213
  margin-right: var(--spacing);
5147
5214
  }
5215
+ .utah-design-system .utds-utah-id__button {
5216
+ overflow: hidden;
5217
+ text-overflow: ellipsis;
5218
+ -webkit-line-clamp: 2;
5219
+ line-clamp: 2;
5220
+ display: -webkit-box;
5221
+ -webkit-box-orient: vertical;
5222
+ padding: 0 var(--spacing);
5223
+ }
5148
5224
  .utah-design-system .utds-action-items-wrapper {
5149
5225
  display: flex;
5150
5226
  gap: var(--spacing);
@@ -5315,6 +5391,15 @@ BEM standard: Block, Element, Modifier
5315
5391
  font-size: 1.9rem;
5316
5392
  }
5317
5393
  }
5394
+ @media screen and (max-width: 640px) {
5395
+ .utah-design-system .utds-title-wrapper__logo {
5396
+ flex: 1 0 auto;
5397
+ }
5398
+ .utah-design-system .utds-title-wrapper__title {
5399
+ flex: 1 1 auto;
5400
+ white-space: normal;
5401
+ }
5402
+ }
5318
5403
  .utds-official-website__wrapper button {
5319
5404
  padding: 0;
5320
5405
  border: none;
@@ -5341,6 +5426,11 @@ BEM standard: Block, Element, Modifier
5341
5426
  .utds-official-website__wrapper button[aria-expanded=true] svg {
5342
5427
  transform: rotate(180deg);
5343
5428
  }
5429
+ .utds-official-website__wrapper button:focus-visible {
5430
+ outline: 2px solid #FFF;
5431
+ outline-offset: 2px;
5432
+ border-radius: var(--radius-small1x);
5433
+ }
5344
5434
  .utds-official-website__banner {
5345
5435
  padding: var(--spacing-3xs) var(--spacing-l);
5346
5436
  background: var(--gray-color);
@@ -5373,6 +5463,7 @@ BEM standard: Block, Element, Modifier
5373
5463
  }
5374
5464
  .utds-official-website__button {
5375
5465
  width: 100%;
5466
+ outline-offset: 0 !important;
5376
5467
  justify-content: flex-start !important;
5377
5468
  padding: 0 var(--spacing-l) !important;
5378
5469
  }
@@ -24,7 +24,7 @@ var e = {
24
24
  SMALL: "SMALL",
25
25
  MEDIUM: "MEDIUM",
26
26
  LARGE: "LARGE"
27
- }, i = "/* @media is never in scope for --variables, so this is the only way to solve this. :-( */\n\n@media screen and (max-width: media-size__tablet-landscape__PLACEHOLDER) {\n /* put your media query here for tablet landscape */\n .utah-design-system .search-modal__input[type=text] {\n width: 75vw;\n }\n}\n\n@media screen and (max-width: media-size__tablet-portrait__PLACEHOLDER) {\n .utds-header-desktop--hidden {\n display: flex !important;\n }\n .utds-header-mobile--hidden {\n display: none !important;\n }\n .utds-header {\n height: 60px;\n padding: var(--spacing-xs) var(--spacing);\n display: flex;\n justify-content: space-between;\n }\n .utds-title-wrapper {\n font-size: var(--font-size-xl);\n }\n .utds-citizen-experience-wrapper {\n display: none;\n }\n .utds-citizen-experience-wrapper--mobile {\n display: flex;\n }\n .utah-design-system .main-menu__wrapper {\n padding: 0 var(--spacing);\n /* The utah id button is this tall, but without it, the menu doesn't fill the space up to the mobile menu content popup */\n min-height: 46px;\n }\n .utah-design-system .main-menu__nav {\n display: none;\n }\n .utah-design-system.utds-header-mobile-menu,\n .utah-design-system .utds-header-mobile__utah-id-wrapper {\n display: block;\n }\n .utah-design-system .icon-button.main-menu__hamburger,\n .utah-design-system .utds-header-mobile__vip-action-items--left,\n .utah-design-system .utds-header-mobile__vip-action-items--right,\n .utah-design-system .main-menu__search-placeholder {\n display: flex;\n }\n\n .utah-design-system .search-modal__input[type=text] {\n width: 80vw;\n padding: var(--spacing) var(--spacing) var(--spacing) var(--spacing-3xl);\n }\n .utah-design-system .search-modal__button-wrapper {\n right: unset;\n left: 50%;\n transform: translateX(-50%) translateY(110%);\n }\n .utah-design-system .search-modal__button.button--solid.button--primary-color {\n border-color: white;\n width: max-content;\n }\n\n .utah-design-system .utds-official-website-popup__col {\n width: 100%;\n }\n .utah-design-system .utds-official-website-popup__address-bar {\n width: auto;\n background-size: contain;\n background-repeat: no-repeat;\n }\n\n .color-example {\n flex-direction: column;\n &.col-3 > div {\n width: 100%;\n }\n }\n .color-example > div:not(:last-child) {\n margin-bottom: var(--spacing-l);\n }\n\n .search-page {\n .search-modal__form {\n margin-bottom: var(--spacing-4xl);\n }\n .search-modal__input[type=text] {\n padding: var(--spacing) var(--spacing) var(--spacing) var(--spacing-3xl);\n }\n }\n}\n\n@media screen and (max-width: media-size__mobile__PLACEHOLDER) {\n /* put your media query here for mobile */\n}\n";
27
+ }, i = "/* @media is never in scope for --variables, so this is the only way to solve this. :-( */\n\n@media screen and (max-width: media-size__tablet-landscape__PLACEHOLDER) {\n /* put your media query here for tablet landscape */\n .utah-design-system .search-modal__input[type=text] {\n width: 75vw;\n }\n}\n\n@media screen and (max-width: media-size__tablet-portrait__PLACEHOLDER) {\n .utds-header-desktop--hidden {\n display: flex !important;\n }\n .utds-header-mobile--hidden {\n display: none !important;\n }\n .utds-header {\n height: 60px;\n padding: var(--spacing-xs) var(--spacing-s);\n display: flex;\n justify-content: space-between;\n }\n .utds-citizen-experience-wrapper {\n display: none;\n }\n .utds-citizen-experience-wrapper--mobile {\n display: flex;\n }\n .utah-design-system .main-menu__wrapper {\n padding: 0 var(--spacing);\n /* The utah id button is this tall, but without it, the menu doesn't fill the space up to the mobile menu content popup */\n min-height: 46px;\n }\n .utah-design-system .main-menu__nav {\n display: none;\n }\n .utah-design-system.utds-header-mobile-menu,\n .utah-design-system .utds-header-mobile__utah-id-wrapper {\n display: block;\n }\n .utah-design-system .icon-button.main-menu__hamburger,\n .utah-design-system .utds-header-mobile__vip-action-items--left,\n .utah-design-system .utds-header-mobile__vip-action-items--right,\n .utah-design-system .main-menu__search-placeholder {\n display: flex;\n }\n\n .utah-design-system .search-modal__input[type=text] {\n width: 80vw;\n padding: var(--spacing) var(--spacing) var(--spacing) var(--spacing-3xl);\n }\n .utah-design-system .search-modal__button-wrapper {\n right: unset;\n left: 50%;\n transform: translateX(-50%) translateY(110%);\n }\n .utah-design-system .search-modal__button.button--solid.button--primary-color {\n border-color: white;\n width: max-content;\n }\n\n .utah-design-system .utds-official-website-popup__col {\n width: 100%;\n }\n .utah-design-system .utds-official-website-popup__address-bar {\n width: auto;\n background-size: contain;\n background-repeat: no-repeat;\n }\n\n .color-example {\n flex-direction: column;\n &.col-3 > div {\n width: 100%;\n }\n }\n .color-example > div:not(:last-child) {\n margin-bottom: var(--spacing-l);\n }\n\n .search-page {\n .search-modal__form {\n margin-bottom: var(--spacing-4xl);\n }\n .search-modal__input[type=text] {\n padding: var(--spacing) var(--spacing) var(--spacing) var(--spacing-3xl);\n }\n }\n}\n\n@media screen and (max-width: media-size__mobile__PLACEHOLDER) {\n /* put your media query here for mobile */\n}\n";
28
28
  //#endregion
29
29
  //#region src/js/enumerations/domConstants.js
30
30
  function a(e) {
@@ -2542,7 +2542,11 @@ function zr() {
2542
2542
  let f = jr(), p = Xn(f, "Main Menu");
2543
2543
  p.appendChild(f), Dr(v(p)), l ? (l.closest("div")?.removeAttribute("aria-labelledby"), kr(s, l)) : Or(), On(), Pr(), un(), Fr(), Lr();
2544
2544
  let m = h();
2545
- m.notifications && window.ssouserinfo?.triggerPoll(), (!m.mainMenu && !m.actionItems && m.utahId === !1 && !m.onSearch || !m.mainMenu && !m.actionItems && m.utahId === !1 && m.onSearch || !m.mainMenu && m.actionItems && m.utahId === !1 && !m.onSearch) && (s.classList.add(o.MAIN_MENU__REMOVED), c.remove()), (!m.mainMenu && !m.actionItems && m.utahId && !m.onSearch || !m.mainMenu && m.actionItems && m.utahId && !m.onSearch || !m.mainMenu && m.actionItems && !m.utahId && m.onSearch) && c.classList.add(o.DESKTOP__HIDDEN);
2545
+ if (m.notifications) {
2546
+ let e = document;
2547
+ typeof e.ssouserinfo?.triggerPoll == "function" && e.ssouserinfo.triggerPoll();
2548
+ }
2549
+ (!m.mainMenu && !m.actionItems && m.utahId === !1 && !m.onSearch || !m.mainMenu && !m.actionItems && m.utahId === !1 && m.onSearch || !m.mainMenu && m.actionItems && m.utahId === !1 && !m.onSearch) && (s.classList.add(o.MAIN_MENU__REMOVED), c.remove()), (!m.mainMenu && !m.actionItems && m.utahId && !m.onSearch || !m.mainMenu && m.actionItems && m.utahId && !m.onSearch || !m.mainMenu && m.actionItems && !m.utahId && m.onSearch) && c.classList.add(o.DESKTOP__HIDDEN);
2546
2550
  }
2547
2551
  jn();
2548
2552
  }
@@ -16,13 +16,10 @@
16
16
  }
17
17
  .utds-header {
18
18
  height: 60px;
19
- padding: var(--spacing-xs) var(--spacing);
19
+ padding: var(--spacing-xs) var(--spacing-s);
20
20
  display: flex;
21
21
  justify-content: space-between;
22
22
  }
23
- .utds-title-wrapper {
24
- font-size: var(--font-size-xl);
25
- }
26
23
  .utds-citizen-experience-wrapper {
27
24
  display: none;
28
25
  }
@@ -475,4 +472,4 @@
475
472
  ${o(s.MOBILE_MENU__ACTION_BAR)}
476
473
  ${o(s.MOBILE_MENU_ACTION_BAR__ACTION_ITEM_WRAPPER)}
477
474
  ${o(s.ACTION_ITEM__ICON_BUTTON)}
478
- `)];e.forEach(t=>{t.onkeydown=(e=>{(e.code===`Home`||e.code===`End`||e.code===`ArrowRight`||e.code===`ArrowLeft`)&&e.preventDefault()}),t.onkeyup=(n=>{let r=e.indexOf(t),i=NaN;if(n.code===`Home`?i=0:n.code===`End`?i=e.length-1:n.code===`ArrowRight`?i=(r+1)%e.length:n.code===`ArrowLeft`&&(i=(e.length+r-1)%e.length),!Number.isNaN(i)){n.preventDefault(),n.stopPropagation();let t=e[i],r=t?.closest(o(s.MOBILE_MENU_ACTION_BAR__ACTION_ITEM_WRAPPER));if(!r)throw Error(`hookupMobileActionItemKeyboarding: newWrapper not found... how in the blazes?!`);let a=t?.getAttribute(`aria-controls`);if(a&&document.getElementById(a))t?.click();else{let e=document.querySelector(o(s.MOBILE_MENU__WRAPPER));if(!e)throw Error(`hookupMobileActionItemKeyboarding: mobileMenuWrapper not found`);let t=e.querySelector(o(s.MOBILE_MENU__CONTENT));if(!t)throw Error(`hookupMobileActionItemKeyboarding: mobileContentWrapper not found`);t.querySelectorAll(o(s.MOBILE_MENU__CONTENT_ITEM)).forEach(e=>e.classList.remove(s.IS_OPEN))}let c=document.querySelector(o(s.MOBILE_MENU__WRAPPER));if(!c)throw Error(`hookupMobileActionItemKeyboarding: mobileMenuWrapper not found`);w(c,r)}})});let t=l(document.querySelector(o(s.MOBILE_MENU__LAST_FOCUSABLE)),`hookupMobileActionItemKeyboarding: hiddenLastFocusableButton not found`),{hamburger:n}=x(`hookupMobileActionItemKeyboarding`);t.addEventListener(`focusin`,e=>{e.preventDefault(),e.stopPropagation(),n?.focus()})}function Ir(){let e=a.replace(s.MEDIA_SIZE__TABLET_PORTRAIT__PLACEHOLDER,`${g().mediaSizes.tabletPortrait}px`).replace(s.MEDIA_SIZE__TABLET_LANDSCAPE__PLACEHOLDER,`${g().mediaSizes.tabletLandscape}px`).replace(s.MEDIA_SIZE__MOBILE__PLACEHOLDER,`${g().mediaSizes.mobile}px`),t=document.getElementById(s.CSS_HEADER_MEDIA_TAG_ID);t||(t=document.createElement(`style`),t.id=s.CSS_HEADER_MEDIA_TAG_ID),t.innerHTML=e,document.body.appendChild(t)}function Lr(e){let t=e.currentValues.utahid;q(`********** handleMyLoginEvent:`,t),Wn(t)}function Rr(){let e=g(),t=document.getElementById(s.SSO_HEADER_SCRIPT_TAG_ID);q(`isSetUtahHeaderSettingsCalled`,window[`@utahdts/utah-design-system-header`]?.isSetUtahHeaderSettingsCalled),q(`utah header settings`,JSON.parse(JSON.stringify(e)));let n=(typeof e.utahId==`object`?e.utahId?.currentUser:null)??null;!t&&!n?(q(`going to create script for ssouserinfo.js iframe`),t=document.createElement(`script`),t.id=s.SSO_HEADER_SCRIPT_TAG_ID,t.setAttribute(`src`,`https://mylogin.utah.gov/ssouserinfo/ssouserinfo.js`),document.head.appendChild(t),document.addEventListener(`ssoUserInfo.pollComplete`,Lr),document.addEventListener(`ssoUserInfo.valuesChanged`,Lr)):n&&(q(`handling my login info immediately!`),Wn())}function zr(){let e=g(),t=document.body;if(e.domLocationTarget){let n=[e.domLocationTarget.cssSelector,e.domLocationTarget.element,e.domLocationTarget.elementFunction].filter(e=>e);if(n.length<1)throw Error(`loadHeader: domLocationTarget must either have a value for one of its properties or not be specified at all`);if(n.length>1)throw Error(`loadHeader: domLocationTarget must only have one target specified`);if(e.domLocationTarget.cssSelector)t=document.querySelector(e.domLocationTarget.cssSelector),c(!t,`loadHeader: element not found for domLocationTarget.cssSelector ${e.domLocationTarget.cssSelector}`);else if(e.domLocationTarget.element)t=e.domLocationTarget.element;else if(e.domLocationTarget.elementFunction)t=e.domLocationTarget.elementFunction(),c(!t,`loadHeader: element not returned from domLocationTarget.elementFunction`);else throw Error(`loadHeader: domLocationTarget must have at least one field set`)}return l(t,`loadHeader: domTarget is null (how?!)`)}function Br(){if(!document.querySelector(o([s.UTAH_DESIGN_SYSTEM,s.HEADER]))){let e=mr(),t=zr();t.insertBefore(e,t.firstChild);let n=Dr();e.before(n);let r=Pr(),i=document.body;r&&i&&i.insertBefore(r,i.firstChild);let a=f(jr);e.after(a),a.onkeyup=e=>{(e.code===`Escape`||e.key===`Escape`)&&(e.preventDefault(),e.stopPropagation(),S())};let{mainMenuWrapper:c,utahIdPopup:l}=Sr();c&&e.after(c);let u=document.querySelector(o(s.MOBILE_MENU__BACKDROP));if(!u)throw Error(`mobileMenuInteractionHandler: mobileMenuBackdrop not found`);if(u.onclick)throw Error(`mobileMenuInteractionHandler: mobileMenuBackdrop already has onclick`);u.onclick=()=>S();let d=Mr(),p=Zn(d,`Main Menu`);p.appendChild(d),Or(y(p)),l?(l.closest(`div`)?.removeAttribute(`aria-labelledby`),Ar(a,l)):kr(),kn(),Fr(),dn(),Ir(),Rr();let m=g();m.notifications&&window.ssouserinfo?.triggerPoll(),(!m.mainMenu&&!m.actionItems&&m.utahId===!1&&!m.onSearch||!m.mainMenu&&!m.actionItems&&m.utahId===!1&&m.onSearch||!m.mainMenu&&m.actionItems&&m.utahId===!1&&!m.onSearch)&&(a.classList.add(s.MAIN_MENU__REMOVED),c.remove()),(!m.mainMenu&&!m.actionItems&&m.utahId&&!m.onSearch||!m.mainMenu&&m.actionItems&&m.utahId&&!m.onSearch||!m.mainMenu&&m.actionItems&&!m.utahId&&m.onSearch)&&c.classList.add(s.DESKTOP__HIDDEN)}Mn()}function Vr(e){document.querySelector(o([s.UTAH_DESIGN_SYSTEM,s.SKIP_LINK_WRAPPER]))?.remove(),document.querySelector(o([s.UTAH_DESIGN_SYSTEM,s.OFFICIAL_BANNER]))?.remove(),document.querySelector(o([s.UTAH_DESIGN_SYSTEM,s.HEADER]))?.remove(),document.querySelector(o([s.UTAH_DESIGN_SYSTEM,s.MAIN_MENU__OUTER]))?.remove(),document.querySelector(o([s.UTAH_DESIGN_SYSTEM,s.MOBILE_MENU]))?.remove(),document.querySelector(o([s.UTAH_DESIGN_SYSTEM,s.LOGO_OFFICIAL_WRAPPER]))?.remove(),document.getElementById(s.SEARCH__SEARCH_MODAL)?.remove(),ln(),e&&setTimeout(()=>document.dispatchEvent(new Event(r.HEADER_UNLOADED)),0)}function Hr(){Vr(!1),Br()}var Ur=15e3,Wr=0,Gr=setInterval(()=>{Wr+=1,Wr>=Ur||typeof window>`u`||window[`@utahdts/utah-design-system-header`]?.isSetUtahHeaderSettingsCalled?clearInterval(Gr):document.dispatchEvent(new Event(r.HEADER_LOADED))},2);window.addEventListener(`unload`,()=>{clearInterval(Gr)});function Kr(e){return h.setSettings(e),window[`@utahdts/utah-design-system-header`]&&(window[`@utahdts/utah-design-system-header`].isSetUtahHeaderSettingsCalled=!0),document?.body?Hr():window.addEventListener(`load`,()=>Hr()),h.getSettings()}function qr(e){return Kr({...p,...h.getSettings(),footer:e})}e.PopupPlacement=n,e.childrenMenuTypes=t,e.defaultSettings=p,e.events=r,e.getUtahHeaderSettings=g,e.loadHeader=Br,e.popupFocusHandler=Y,e.removeHeader=Vr,e.renderDOMSingle=f,e.setUtahFooterSettings=qr,e.setUtahHeaderSettings=Kr,e.sizes=i});
475
+ `)];e.forEach(t=>{t.onkeydown=(e=>{(e.code===`Home`||e.code===`End`||e.code===`ArrowRight`||e.code===`ArrowLeft`)&&e.preventDefault()}),t.onkeyup=(n=>{let r=e.indexOf(t),i=NaN;if(n.code===`Home`?i=0:n.code===`End`?i=e.length-1:n.code===`ArrowRight`?i=(r+1)%e.length:n.code===`ArrowLeft`&&(i=(e.length+r-1)%e.length),!Number.isNaN(i)){n.preventDefault(),n.stopPropagation();let t=e[i],r=t?.closest(o(s.MOBILE_MENU_ACTION_BAR__ACTION_ITEM_WRAPPER));if(!r)throw Error(`hookupMobileActionItemKeyboarding: newWrapper not found... how in the blazes?!`);let a=t?.getAttribute(`aria-controls`);if(a&&document.getElementById(a))t?.click();else{let e=document.querySelector(o(s.MOBILE_MENU__WRAPPER));if(!e)throw Error(`hookupMobileActionItemKeyboarding: mobileMenuWrapper not found`);let t=e.querySelector(o(s.MOBILE_MENU__CONTENT));if(!t)throw Error(`hookupMobileActionItemKeyboarding: mobileContentWrapper not found`);t.querySelectorAll(o(s.MOBILE_MENU__CONTENT_ITEM)).forEach(e=>e.classList.remove(s.IS_OPEN))}let c=document.querySelector(o(s.MOBILE_MENU__WRAPPER));if(!c)throw Error(`hookupMobileActionItemKeyboarding: mobileMenuWrapper not found`);w(c,r)}})});let t=l(document.querySelector(o(s.MOBILE_MENU__LAST_FOCUSABLE)),`hookupMobileActionItemKeyboarding: hiddenLastFocusableButton not found`),{hamburger:n}=x(`hookupMobileActionItemKeyboarding`);t.addEventListener(`focusin`,e=>{e.preventDefault(),e.stopPropagation(),n?.focus()})}function Ir(){let e=a.replace(s.MEDIA_SIZE__TABLET_PORTRAIT__PLACEHOLDER,`${g().mediaSizes.tabletPortrait}px`).replace(s.MEDIA_SIZE__TABLET_LANDSCAPE__PLACEHOLDER,`${g().mediaSizes.tabletLandscape}px`).replace(s.MEDIA_SIZE__MOBILE__PLACEHOLDER,`${g().mediaSizes.mobile}px`),t=document.getElementById(s.CSS_HEADER_MEDIA_TAG_ID);t||(t=document.createElement(`style`),t.id=s.CSS_HEADER_MEDIA_TAG_ID),t.innerHTML=e,document.body.appendChild(t)}function Lr(e){let t=e.currentValues.utahid;q(`********** handleMyLoginEvent:`,t),Wn(t)}function Rr(){let e=g(),t=document.getElementById(s.SSO_HEADER_SCRIPT_TAG_ID);q(`isSetUtahHeaderSettingsCalled`,window[`@utahdts/utah-design-system-header`]?.isSetUtahHeaderSettingsCalled),q(`utah header settings`,JSON.parse(JSON.stringify(e)));let n=(typeof e.utahId==`object`?e.utahId?.currentUser:null)??null;!t&&!n?(q(`going to create script for ssouserinfo.js iframe`),t=document.createElement(`script`),t.id=s.SSO_HEADER_SCRIPT_TAG_ID,t.setAttribute(`src`,`https://mylogin.utah.gov/ssouserinfo/ssouserinfo.js`),document.head.appendChild(t),document.addEventListener(`ssoUserInfo.pollComplete`,Lr),document.addEventListener(`ssoUserInfo.valuesChanged`,Lr)):n&&(q(`handling my login info immediately!`),Wn())}function zr(){let e=g(),t=document.body;if(e.domLocationTarget){let n=[e.domLocationTarget.cssSelector,e.domLocationTarget.element,e.domLocationTarget.elementFunction].filter(e=>e);if(n.length<1)throw Error(`loadHeader: domLocationTarget must either have a value for one of its properties or not be specified at all`);if(n.length>1)throw Error(`loadHeader: domLocationTarget must only have one target specified`);if(e.domLocationTarget.cssSelector)t=document.querySelector(e.domLocationTarget.cssSelector),c(!t,`loadHeader: element not found for domLocationTarget.cssSelector ${e.domLocationTarget.cssSelector}`);else if(e.domLocationTarget.element)t=e.domLocationTarget.element;else if(e.domLocationTarget.elementFunction)t=e.domLocationTarget.elementFunction(),c(!t,`loadHeader: element not returned from domLocationTarget.elementFunction`);else throw Error(`loadHeader: domLocationTarget must have at least one field set`)}return l(t,`loadHeader: domTarget is null (how?!)`)}function Br(){if(!document.querySelector(o([s.UTAH_DESIGN_SYSTEM,s.HEADER]))){let e=mr(),t=zr();t.insertBefore(e,t.firstChild);let n=Dr();e.before(n);let r=Pr(),i=document.body;r&&i&&i.insertBefore(r,i.firstChild);let a=f(jr);e.after(a),a.onkeyup=e=>{(e.code===`Escape`||e.key===`Escape`)&&(e.preventDefault(),e.stopPropagation(),S())};let{mainMenuWrapper:c,utahIdPopup:l}=Sr();c&&e.after(c);let u=document.querySelector(o(s.MOBILE_MENU__BACKDROP));if(!u)throw Error(`mobileMenuInteractionHandler: mobileMenuBackdrop not found`);if(u.onclick)throw Error(`mobileMenuInteractionHandler: mobileMenuBackdrop already has onclick`);u.onclick=()=>S();let d=Mr(),p=Zn(d,`Main Menu`);p.appendChild(d),Or(y(p)),l?(l.closest(`div`)?.removeAttribute(`aria-labelledby`),Ar(a,l)):kr(),kn(),Fr(),dn(),Ir(),Rr();let m=g();if(m.notifications){let e=document;typeof e.ssouserinfo?.triggerPoll==`function`&&e.ssouserinfo.triggerPoll()}(!m.mainMenu&&!m.actionItems&&m.utahId===!1&&!m.onSearch||!m.mainMenu&&!m.actionItems&&m.utahId===!1&&m.onSearch||!m.mainMenu&&m.actionItems&&m.utahId===!1&&!m.onSearch)&&(a.classList.add(s.MAIN_MENU__REMOVED),c.remove()),(!m.mainMenu&&!m.actionItems&&m.utahId&&!m.onSearch||!m.mainMenu&&m.actionItems&&m.utahId&&!m.onSearch||!m.mainMenu&&m.actionItems&&!m.utahId&&m.onSearch)&&c.classList.add(s.DESKTOP__HIDDEN)}Mn()}function Vr(e){document.querySelector(o([s.UTAH_DESIGN_SYSTEM,s.SKIP_LINK_WRAPPER]))?.remove(),document.querySelector(o([s.UTAH_DESIGN_SYSTEM,s.OFFICIAL_BANNER]))?.remove(),document.querySelector(o([s.UTAH_DESIGN_SYSTEM,s.HEADER]))?.remove(),document.querySelector(o([s.UTAH_DESIGN_SYSTEM,s.MAIN_MENU__OUTER]))?.remove(),document.querySelector(o([s.UTAH_DESIGN_SYSTEM,s.MOBILE_MENU]))?.remove(),document.querySelector(o([s.UTAH_DESIGN_SYSTEM,s.LOGO_OFFICIAL_WRAPPER]))?.remove(),document.getElementById(s.SEARCH__SEARCH_MODAL)?.remove(),ln(),e&&setTimeout(()=>document.dispatchEvent(new Event(r.HEADER_UNLOADED)),0)}function Hr(){Vr(!1),Br()}var Ur=15e3,Wr=0,Gr=setInterval(()=>{Wr+=1,Wr>=Ur||typeof window>`u`||window[`@utahdts/utah-design-system-header`]?.isSetUtahHeaderSettingsCalled?clearInterval(Gr):document.dispatchEvent(new Event(r.HEADER_LOADED))},2);window.addEventListener(`unload`,()=>{clearInterval(Gr)});function Kr(e){return h.setSettings(e),window[`@utahdts/utah-design-system-header`]&&(window[`@utahdts/utah-design-system-header`].isSetUtahHeaderSettingsCalled=!0),document?.body?Hr():window.addEventListener(`load`,()=>Hr()),h.getSettings()}function qr(e){return Kr({...p,...h.getSettings(),footer:e})}e.PopupPlacement=n,e.childrenMenuTypes=t,e.defaultSettings=p,e.events=r,e.getUtahHeaderSettings=g,e.loadHeader=Br,e.popupFocusHandler=Y,e.removeHeader=Vr,e.renderDOMSingle=f,e.setUtahFooterSettings=qr,e.setUtahHeaderSettings=Kr,e.sizes=i});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@utahdts/utah-design-system-header",
3
- "version": "5.0.0",
3
+ "version": "5.0.2",
4
4
  "description": "Utah Header for the Utah Design System",
5
5
  "exports": {
6
6
  ".": {
@@ -71,14 +71,14 @@
71
71
  "@floating-ui/dom": "^1.7.6"
72
72
  },
73
73
  "devDependencies": {
74
- "@vitest/ui": "^4.1.2",
75
- "jsdom": "^29.0.1",
74
+ "@vitest/ui": "^4.1.5",
75
+ "jsdom": "^29.1.1",
76
76
  "replace": "1.2.2",
77
- "sass": "^1.98.0",
77
+ "sass": "^1.99.0",
78
78
  "tslib": "2.8.1",
79
- "typescript": "^6.0.2",
80
- "vite": "^8.0.3",
81
- "vitest": "^4.1.2"
79
+ "typescript": "^6.0.3",
80
+ "vite": "^8.0.10",
81
+ "vitest": "^4.1.5"
82
82
  },
83
83
  "type": "module"
84
84
  }
@@ -16,13 +16,10 @@
16
16
  }
17
17
  .utds-header {
18
18
  height: 60px;
19
- padding: var(--spacing-xs) var(--spacing);
19
+ padding: var(--spacing-xs) var(--spacing-s);
20
20
  display: flex;
21
21
  justify-content: space-between;
22
22
  }
23
- .utds-title-wrapper {
24
- font-size: var(--font-size-xl);
25
- }
26
23
  .utds-citizen-experience-wrapper {
27
24
  display: none;
28
25
  }