{
"version": 3,
"sources": ["../components/timer.js", "../components/TabbedNavigator.js", "../components/site-nav.js", "../components/scroll-to-top.js", "../components/combobox/listbox.js", "../components/secondary-nav.js", "../components/wx-loader.js", "../locationSearch.js", "../components/combobox/combobox.js", "../components/recent-locations.js", "../components/combobox/location-listbox.js", "../components/saved-locations.js", "../components/saved-locations-section.js", "../aws-rum.js", "../components/offline-banner.js", "../components/aria-live.js", "../components/combobox/filterable-listbox.js", "../components/Tabs.js", "../components/county-alert-daily-alert-handler.js", "../components/state-index-filter.js"],
"sourcesContent": ["/** Convenience class for using setTimeout. */\nexport default class Timer {\n constructor() {\n this.timer = this.callback = this.delay = null;\n }\n\n stop = () => {\n if (this.timer === null) return;\n clearTimeout(this.timer);\n this.timer = this.callback = this.delay = null;\n };\n\n start = (callback, delay) => {\n this.stop();\n this.callback = callback;\n this.delay = Number.isFinite(delay) ? delay : 2000;\n this.timer = setTimeout(callback, this.delay);\n };\n\n reset = () => {\n if (this.timer === null) return;\n this.start(this.callback, this.delay);\n };\n}\n", "class TabbedNavigator extends HTMLElement {\n constructor() {\n super();\n\n // Bind this context to methods that need it\n this.handleAlertAnchorClick = this.handleAlertAnchorClick.bind(this);\n this.handleDescendantClick = this.handleDescendantClick.bind(this);\n this.handleTabButtonClick = this.handleTabButtonClick.bind(this);\n this.handlePopState = this.handlePopState.bind(this);\n this.switchToTab = this.switchToTab.bind(this);\n this.scrollToAccordion = this.scrollToAccordion.bind(this);\n this.navigateAlertAnchor = this.navigateAlertAnchor.bind(this);\n this.updateTabScrollState = this.updateTabScrollState.bind(this);\n }\n\n connectedCallback() {\n const pointTablist = this.querySelector(\"#point-page-tablist\");\n if (pointTablist) {\n // Capture scroll events because they do not bubble.\n this.addEventListener(\"scroll\", this.updateTabScrollState, true);\n this.tablistResizeObserver = new ResizeObserver(\n this.updateTabScrollState,\n );\n this.tablistResizeObserver.observe(this);\n this.tablistResizeObserver.observe(pointTablist);\n pointTablist.querySelectorAll(\".tab-button\").forEach((tab) => {\n this.tablistResizeObserver.observe(tab);\n });\n this.updateTabScrollState();\n }\n\n // If no tabs are selected by default, then select the first one\n const selected = Array.from(\n this.querySelectorAll(\".tab-button[data-selected]\"),\n );\n if (!selected.length) {\n this.switchToTab(this.querySelector(\"button\").dataset.tabName);\n }\n\n // Intercept click events on Alert links at the\n // top of the page and handle them in this component\n Array.from(document.querySelectorAll(\"wx-point-alert-links a\")).forEach(\n (alertAnchor) => {\n alertAnchor.addEventListener(\"click\", this.handleAlertAnchorClick);\n },\n );\n\n // Intercept click events on Alert spans that are in tab\n // containers controlled by this component\n this.addEventListener(\"click\", this.handleDescendantClick);\n window.addEventListener(\"popstate\", this.handlePopState);\n\n // Add needed event listeners\n Array.from(this.querySelectorAll(\"button.tab-button\")).forEach((button) => {\n button.addEventListener(\"click\", this.handleTabButtonClick);\n button.addEventListener(\"keydown\", this.handleTabListKeydown);\n });\n }\n\n disconnectedCallback() {\n this.tablistResizeObserver?.disconnect();\n this.removeEventListener(\"scroll\", this.updateTabScrollState, true);\n window.removeEventListener(\"popstate\", this.handlePopState);\n\n // Remove any event listeners\n Array.from(this.querySelectorAll(\"button.tab-button\")).forEach((button) => {\n button.removeEventListener(\"click\", this.handleTabButtonClick);\n button.removeEventListener(\"keydown\", this.handleTabListKeydown);\n });\n }\n\n updateTabScrollState() {\n const tablist = this.querySelector(\"#point-page-tablist\");\n const maxScroll = tablist ? tablist.scrollWidth - tablist.clientWidth : 0;\n this.toggleAttribute(\"data-tabs-overflow\", maxScroll > 0);\n this.toggleAttribute(\n \"data-tabs-scroll-left\",\n maxScroll > 0 && tablist.scrollLeft > 0,\n );\n // Allow for fractional scroll positions at the right edge.\n this.toggleAttribute(\n \"data-tabs-scroll-right\",\n maxScroll > 0 && maxScroll - tablist.scrollLeft > 1,\n );\n }\n\n navigateWithInitialHash() {\n const hash = new URL(window.location).hash;\n if (!hash || hash === \"\") {\n return;\n }\n\n try {\n const matchedTabButton = this.querySelector(\n `[data-tab-name=\"${hash.replace(\"#\", \"\")}\"]`,\n );\n if (matchedTabButton) {\n this.switchToTab(matchedTabButton.dataset.tabName);\n matchedTabButton.parentElement.scrollIntoView();\n return;\n }\n\n const childElement = this.querySelector(\n `${hash},wx-tab-container, .wx-tab-container ${hash}`,\n );\n if (childElement) {\n const tabContainer = childElement.closest(\".wx-tab-container\");\n this.switchToTab(tabContainer.id);\n if (childElement.matches(\".usa-accordion\")) {\n this.toggleAccordion(childElement, true);\n document.addEventListener(\"DOMContentLoaded\", () => {\n this.scrollToAccordion(childElement);\n });\n }\n }\n } catch (e) {\n // Guard against hashes that are not valid DOM identifiers. We can't\n // prevent users from typing random stuff in the address bar, but we\n // prevent our scripts from crashing if they do.\n }\n }\n\n switchToTab(tabId) {\n // First, deactivate all tabs\n Array.from(this.querySelectorAll(\".tab-button, .wx-tab-container\")).forEach(\n (element) => {\n element.removeAttribute(\"data-selected\");\n if (element.matches(\".tab-button\")) {\n element.setAttribute(\"aria-expanded\", \"false\");\n element.setAttribute(\"tabindex\", \"-1\");\n }\n },\n );\n\n // Active the tab button\n const tabButton = this.querySelector(`[data-tab-name=\"${tabId}\"]`);\n tabButton.setAttribute(\"data-selected\", \"\");\n tabButton.setAttribute(\"aria-expanded\", \"true\");\n tabButton.removeAttribute(\"tabindex\");\n\n // Activate the corresponding container\n const tabContainer = this.querySelector(`#${tabId}`);\n tabContainer.setAttribute(\"data-selected\", \"\");\n\n // Trigger a custom event for use externally\n // when tabs switch\n const event = new CustomEvent(\"wx:tab-switched\", {\n detail: {\n tabId,\n },\n bubbles: true,\n });\n this.dispatchEvent(event);\n }\n\n handleTabButtonClick(event) {\n const tabButton = event.currentTarget;\n this.switchToTab(tabButton.dataset.tabName);\n // Since this was an actual click, update the hash\n // of the site to the tab button's id and push it into the browser history\n window.history.pushState(null, null, tabButton.dataset.url);\n }\n\n handlePopState() {\n const currentPath = window.location.pathname;\n const matchingTab = Array.from(\n this.querySelectorAll(\".tab-button[data-url]\"),\n ).find((tabButton) => {\n const tabUrl = new URL(tabButton.dataset.url, window.location.origin);\n return tabUrl.pathname === currentPath;\n });\n\n if (matchingTab) {\n this.switchToTab(matchingTab.dataset.tabName);\n matchingTab.focus({ preventScroll: true });\n }\n }\n\n /**\n * A catch-all listener for click events inside the navigator and any\n * of its constituent tab content panes.\n * We use this to filter out for wx-alert clicks, which will be handled\n * separately.\n */\n handleDescendantClick(event) {\n if (!event.target.matches(\"a\")) {\n return;\n }\n const linkWrapper = event.target.closest(\".wx-alert-link\");\n if (!linkWrapper) {\n return;\n }\n this.navigateAlertAnchor(event.target);\n }\n\n navigateAlertAnchor(anchorEl) {\n const hash = new URL(anchorEl.href).hash;\n const accordionEl = this.querySelector(`${hash}.usa-accordion`);\n\n if (accordionEl) {\n // If we get here, then the element referred\n // to by the href is a child of this tabbed\n // navigator.\n // We need to toggle to the correct tab pane\n // to properly display and scroll to the element.\n const tabContainer = accordionEl.closest(\".wx-tab-container\");\n this.switchToTab(tabContainer.id);\n this.toggleAccordion(accordionEl, true);\n\n // Because we use a sticky position on\n // the tab button area, the normal browser\n // scrolling will not display the proper position\n // to the user. Instead, we have to roll our\n // own scrolling method\n this.scrollToAccordion(accordionEl);\n window.history.replaceState(null, null, hash);\n }\n }\n\n handleAlertAnchorClick(event) {\n event.preventDefault();\n this.navigateAlertAnchor(event.currentTarget);\n }\n\n toggleAccordion(accordionElement, on = true) {\n const button = accordionElement.querySelector(\n \"button.usa-accordion__button\",\n );\n const content = accordionElement.querySelector(\".usa-accordion__content\");\n\n if (on) {\n button.setAttribute(\"aria-expanded\", \"true\");\n content.removeAttribute(\"hidden\");\n } else {\n button.setAttribute(\"aria-expanded\", \"false\");\n content.addAttribute(\"hidden\", \"\");\n }\n }\n\n handleTabListKeydown(event) {\n // Per W3C guidelines, arrow keys and other navigation\n // keys should be used (instead of tab) to navigate the\n // focus of tab buttons.\n // See (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/)\n const currentElement = event.target;\n const isFirst = currentElement.matches(\":first-child\");\n const isLast = currentElement.matches(\":last-child\");\n if (event.key === \"ArrowRight\") {\n if (isLast) {\n event.target.parentElement\n .querySelector(\".tab-button:first-child\")\n .focus();\n } else {\n currentElement.nextElementSibling.focus();\n }\n event.preventDefault();\n } else if (event.key === \"ArrowLeft\") {\n if (isFirst) {\n event.target.parentElement\n .querySelector(\".tab-button:last-child\")\n .focus();\n } else {\n currentElement.previousElementSibling.focus();\n }\n event.preventDefault();\n } else if (event.key === \"Home\") {\n event.target.parentElement\n .querySelector(\".tab-button:first-child\")\n .focus();\n event.preventDefault();\n } else if (event.key === \"End\") {\n event.target.parentElement\n .querySelector(\".tab-button:last-child\")\n .focus();\n event.preventDefault();\n }\n }\n\n scrollToAccordion(accordionElement) {\n const accordionTop = accordionElement.getBoundingClientRect().top;\n const buttonArea = this.querySelector(\".tab-buttons\");\n const buttonAreaHeight = buttonArea.getBoundingClientRect().height;\n const scrollY = accordionTop + window.scrollY - buttonAreaHeight;\n window.scrollTo(0, scrollY);\n }\n}\n\nif (!window.customElements.get(\"wx-tabbed-nav\")) {\n window.customElements.define(\"wx-tabbed-nav\", TabbedNavigator);\n}\n", "/**\n * Site navigation interaction\n */\n\n// Import the tabbed-nav component, which is used by\n// the search box popout\nimport \"./TabbedNavigator.js\";\n\nconst setupSiteSearchMenuButton = (siteSubmenuElement) => {\n const button = siteSubmenuElement.querySelector(`button[aria-expanded]`);\n\n button.addEventListener(\"click\", () => {\n if (button.getAttribute(\"aria-expanded\") === \"false\") {\n button.setAttribute(\"aria-expanded\", \"true\");\n } else {\n button.setAttribute(\"aria-expanded\", \"false\");\n }\n });\n};\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n // Find the site search submenu and add a click listener\n // to toggle the aria-expanded attribute.\n const siteSearchSubmenu = document.getElementById(\"site-search-submenu\");\n if (siteSearchSubmenu) {\n setupSiteSearchMenuButton(siteSearchSubmenu);\n }\n});\n", "/** @file Code to show/hide a \"scroll to top\" button. */\n\nconst mobileButton = document.querySelector(\".ride-up-button--mobile\");\nconst tabletButton = document.querySelector(\".ride-up-button--tablet\");\nconst footerRegion = document.querySelector(\"footer\");\n\nconst prefersReducedMotion = window.matchMedia?.(\n \"(prefers-reduced-motion: reduce)\",\n)?.matches;\n\nlet scrollBracket = 0;\nlet bottomY = 0;\nlet hideThreshold = window.innerHeight * 1.75;\n// Show after scrolling up a 1/5 of a viewport.\nlet minScrollThreshold = window.innerHeight * 0.2;\nlet protectedArea = false;\n\nwindow.addEventListener(\"resize\", () => {\n hideThreshold = window.innerHeight * 1.75;\n minScrollThreshold = window.innerHeight * 0.2;\n});\n\nwindow.addEventListener(\n \"scroll\",\n () => {\n // has the user scrolled more than 128 units?\n if (window.scrollY / 128 !== scrollBracket) {\n scrollBracket = window.scrollY >> 7;\n // never show the buttons in the top 200vh or when the user scrolls down\n if (window.scrollY < hideThreshold || window.scrollY > bottomY) {\n mobileButton.classList.remove(\"ride-up-button--visible\");\n tabletButton.classList.remove(\"ride-up-button--visible\");\n bottomY = window.scrollY;\n } else if (bottomY - window.scrollY > minScrollThreshold) {\n mobileButton.classList.add(\"ride-up-button--visible\");\n tabletButton.classList.add(\"ride-up-button--visible\");\n bottomY = window.scrollY;\n }\n }\n },\n { passive: true },\n);\n\nconst scrollUp = () => {\n if (prefersReducedMotion) {\n window.scrollTo(0, 0);\n } else {\n window.scrollTo({ top: 0, behavior: \"smooth\" });\n }\n};\n\nmobileButton.addEventListener(\"click\", scrollUp);\ntabletButton.addEventListener(\"click\", scrollUp);\n", "/**\n * WCAG compliant listbox component\n * See https://www.w3.org/WAI/ARIA/apg/patterns/listbox/\n */\n\nexport default class Listbox extends HTMLElement {\n constructor() {\n super();\n\n this.template = document.createElement(\"template\");\n this.template.innerHTML = `\n `;\n this.attachShadow({ mode: \"open\" });\n this.shadowRoot.append(this.template.content.cloneNode(true));\n\n // Maps a key name to a handler for\n // key events by the name of the key\n this.keyMapping = {\n ArrowUp: this.moveUp,\n ArrowDown: this.moveDown,\n Enter: this.selectPseudoFocused,\n Home: this.moveHome,\n End: this.moveEnd,\n };\n\n // Bind methods\n this.bindEventListeners = this.bindEventListeners.bind(this);\n this.unbindEventListeners = this.unbindEventListeners.bind(this);\n this.handleFocus = this.handleFocus.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.handleItemsChanged = this.handleItemsChanged.bind(this);\n this.moveDown = this.moveDown.bind(this);\n this.moveUp = this.moveUp.bind(this);\n this.moveHome = this.moveHome.bind(this);\n this.moveEnd = this.moveEnd.bind(this);\n this.selectPseudoFocused = this.selectPseudoFocused.bind(this);\n this.pseudoFocusItem = this.pseudoFocusItem.bind(this);\n this.selectItem = this.selectItem.bind(this);\n\n this.bindEventListeners();\n }\n\n connectedCallback() {\n this.bindEventListeners();\n this.setAttribute(\"role\", \"listbox\");\n }\n\n disconnectedCallback() {\n this.unbindEventListeners();\n }\n\n bindEventListeners() {\n this.addEventListener(\"focus\", this.handleFocus);\n this.shadowRoot\n .querySelector(\"slot\")\n .addEventListener(\"slotchange\", this.handleItemsChanged);\n this.addEventListener(\"keydown\", this.handleKeyDown);\n this.addEventListener(\"click\", this.handleClick);\n }\n\n unbindEventListeners() {\n this.removeEventListener(\"focus\", this.handleFocus);\n this.removeEventListener(\"keydown\", this.handleKeyDown);\n this.removeEventListener(\"click\", this.handleClick);\n }\n\n handleFocus(e) {\n // Automatically pseudo-focus the\n // selected item.\n // If there is no selected item,\n // use the first item.\n const selected = this.selection;\n if (selected) {\n this.pseudoFocusItem(selected);\n } else {\n const first = this.querySelector(`[role=\"option\"]`);\n if (first) {\n this.pseudoFocusItem(first);\n }\n }\n }\n\n handleClick(event) {\n // We check to see if one of the options is in\n // the chain of the bubbled click event\n const closestOption = event.target.closest(`[role=\"option\"]`);\n if (closestOption) {\n event.currentTarget.selectItem(closestOption);\n }\n }\n\n /**\n * Attempts to look up a bound event handler\n * for the given key, and calls it.\n * Does nothing if the given key is not in\n * the component's keyMapping dictionary.\n */\n handleKeyDown(event) {\n if (event.target.keyMapping) {\n const handler = event.target.keyMapping[event.key];\n if (handler) {\n handler.bind(this)(event);\n event.preventDefault();\n }\n }\n }\n\n /**\n * Handler for when slotted elements change.\n * This is where we configure our listbox option\n * elements as they are attached/removed.\n * In this case, we add the data-option-index\n * attribute to specify an order of options as they\n * are presented in the dom (even though they can\n * be nested in different lists).\n * We also give each option an id based on the\n * current component's id, if there isn't one already\n * present.\n */\n handleItemsChanged(event) {\n const host = event.target.getRootNode().host;\n Array.from(host.querySelectorAll(`[role=\"option\"]`)).forEach(\n (option, idx) => {\n option.setAttribute(\"data-option-index\", idx);\n\n // If the listbox itself has an id set, use\n // that as a base for setting unique ids on\n // each option. Do not set any id on an option\n // that already has an id value.\n // These ids are necessary for other wrapping\n // components -- like a combobox -- that need\n // to use aria-activedescendant to manage assistive\n // technology focus capabilities.\n if (!option.id && host.id) {\n option.id = `${host.id}-option-${idx}`;\n }\n },\n );\n }\n\n /**\n * Pseudo Focus is what we are calling screenreader\n * focus that is separate from the browser's DOM focus.\n * It is managed primarily by the use of aria-activedescendant\n * and should also be visually indicated through styling.\n * This method removes the pseudo-focus state from all elements\n * and if an element is also passed in, adds the state to that element.\n * @param HTMLElement element\n */\n pseudoFocusItem(element) {\n // If the passed on object is null or falsy,\n // we un-focus all options in this component\n Array.from(this.querySelectorAll(`[role=\"option\"]`)).forEach((option) => {\n option.removeAttribute(\"data-pseudo-focus\");\n });\n\n if (element) {\n element.setAttribute(\"data-pseudo-focus\", \"true\");\n\n // Some listboxes might be inside an overflowed\n // or scrolling container. Be sure to scroll the\n // focused item into view\n if (element.offsetTop < this.scrollTop) {\n // user has scrolled past the item, so go back up\n this.scrollTop = element.offsetTop;\n } else if (\n element.offsetTop + element.offsetHeight >\n this.scrollTop + this.offsetHeight\n ) {\n // user is above the item, so go down\n this.scrollTop =\n element.offsetTop - this.offsetHeight + element.offsetHeight;\n }\n\n // If this component as the attribute\n // `selection-follows-focus` set to \"true\",\n // we also select the element we are focusing\n if (this.getAttribute(\"selection-follows-focus\") === \"true\") {\n this.selectItem(element);\n }\n }\n }\n\n /**\n * If there is an item that is currently pseudo-focused,\n * this method will call selectItem on that element.\n */\n selectPseudoFocused() {\n const element = this.pseudoFocus;\n if (element) {\n this.selectItem(element);\n }\n }\n\n /**\n * Select item marks the provided element as being\n * selected, for the purposes of listbox selection.\n * It will also remove selection on any previously\n * selected element(s).\n * If the fireEvent parameter is set to true (as is by default),\n * a change event will be dispatched from this component.\n * @param HTMLElement element\n * @param boolean fireEvent - Whether or not to dispatch\n * a change event after selection. True by default.\n */\n selectItem(element, fireEvent = true) {\n // De-select any that are already selected\n Array.from(this.querySelectorAll(`[aria-selected=\"true\"]`)).forEach(\n (selectedEl) => {\n selectedEl.removeAttribute(\"aria-selected\");\n },\n );\n\n // If there is an incoming element, select that one.\n // By moving this into a cased control flow,\n // we ensure that passing a falsy value for the element\n // has the effect of clearing the current selection only.\n if (element) {\n element.setAttribute(\"aria-selected\", \"true\");\n this.value = element.getAttribute(\"value\");\n }\n\n if (fireEvent) {\n this.dispatchEvent(\n new Event(\"change\", {\n bubbles: true,\n cancelable: true,\n }),\n );\n }\n }\n\n /**\n * Moves the pseudo focus one option previous\n * in the listbox, based on overall option order.\n * Navigation triggers the custom event wx:popup-nav\n */\n moveUp(event) {\n // Find the element with the pseudo-focus.\n // If there isn't one, bail.\n const current = this.pseudoFocus;\n if (current) {\n const options = Array.from(this.querySelectorAll(`[role=\"option\"]`));\n const currentIndex = options.indexOf(current);\n const prev = currentIndex > 0 ? options[currentIndex - 1] : null;\n // If prev does not exist, the call to pseudoFocusItem\n // will un-pseudo focus everything the component\n this.pseudoFocusItem(prev);\n this.dispatchEvent(\n new CustomEvent(\"wx:popup-nav\", {\n bubbles: true,\n detail: {\n previous: current,\n next: prev,\n beyondTop: !prev && !this.pseudoFocus,\n navCommand: \"moveUp\",\n },\n }),\n );\n }\n }\n\n /**\n * Moves the pseudo focus to the next option\n * element in the listbox, based on overall option\n * order.\n * Navigation triggers the custom event wx:popup-nav\n */\n moveDown(event) {\n const current = this.pseudoFocus;\n const options = Array.from(this.querySelectorAll(`[role=\"option\"]`));\n if (!options.length) {\n return;\n }\n const firstOption = options[0];\n const lastOption = options[options.length - 1];\n if (current === lastOption) {\n return;\n }\n const currentIndex = options.indexOf(current);\n const next = currentIndex >= 0 ? options[currentIndex + 1] : firstOption;\n\n if (next && next !== current) {\n this.pseudoFocusItem(next);\n this.dispatchEvent(\n new CustomEvent(\"wx:popup-nav\", {\n bubbles: true,\n detail: {\n previous: current,\n next: next,\n navCommand: \"moveDown\",\n },\n }),\n );\n }\n }\n\n /**\n * Moves the pseudo focus to the last option overall.\n * Navigation triggers the custom event wx:popup-nav\n */\n moveHome(event) {\n const current = this.pseudoFocus;\n const options = Array.from(this.querySelectorAll(`[role=\"option\"]`));\n const firstOption = options.length ? options[0] : null;\n if (current && firstOption && current !== firstOption) {\n this.pseudoFocusItem(firstOption);\n\n this.dispatchEvent(\n new CustomEvent(\"wx:popup-nav\", {\n bubbles: true,\n detail: {\n previous: current,\n next: firstOption,\n },\n }),\n );\n }\n }\n\n /**\n * Moves the pseudo focus to the first option overall.\n * Navigation triggers the custom event wx:popup-nav\n */\n moveEnd(event) {\n const current = this.pseudoFocus;\n const options = Array.from(this.querySelectorAll(`[role=\"option\"]`));\n const lastOption = options.length ? options[options.length - 1] : null;\n if (current && lastOption && current !== lastOption) {\n this.pseudoFocusItem(lastOption);\n\n this.dispatchEvent(\n new CustomEvent(\"wx:popup-nav\", {\n bubbles: true,\n detail: {\n previous: current,\n next: lastOption,\n },\n }),\n );\n }\n }\n\n get selection() {\n return this.querySelector(`[role=\"option\"][aria-selected=\"true\"]`);\n }\n\n get pseudoFocus() {\n return this.querySelector(`[data-pseudo-focus=\"true\"]`);\n }\n\n static get observedAttributes() {\n return [\"selection-follows-focus\"];\n }\n}\n\nwindow.customElements.define(\"wx-listbox\", Listbox);\n", "import \"./combobox/listbox.js\";\n\nexport function navigateToElement(combobox) {\n const popup = combobox.querySelector('[slot=\"popup\"]');\n const selected = popup && popup.selection;\n const targetUrl = selected && selected.getAttribute(\"data-value\");\n\n if (targetUrl) {\n window.location.href = targetUrl;\n }\n}\n\n// Make navigateToElement available globally for inline onchange handler\nwindow.navigateToElement = navigateToElement;\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n const sections = document.querySelectorAll(\".section-content h2[id]\");\n const navLinks = document.querySelectorAll(\".usa-sidenav__item a\");\n\n const observerOptions = {\n root: null, // Uses the browser viewport\n rootMargin: \"0px 0px -90% 0px\", // Triggers when section hits the upper-middle screen\n threshold: 0,\n };\n\n const observerCallback = (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n const id = entry.target.getAttribute(\"id\");\n\n // Remove active class from all links\n navLinks.forEach((link) => link.classList.remove(\"usa-current\"));\n\n // Add active class to matching link\n const activeLink = document.querySelector(\n `.usa-sidenav__item a[href=\"#${id}\"]`,\n );\n if (activeLink) {\n activeLink.classList.add(\"usa-current\");\n }\n }\n });\n };\n\n // Set the first link as active on page load\n if (navLinks.length > 0) {\n navLinks[0].classList.add(\"usa-current\");\n }\n\n const observer = new IntersectionObserver(observerCallback, observerOptions);\n sections.forEach((section) => observer.observe(section));\n});\n", "/** @file this is for the events to show and hide the wx-loader */\n\nconst hideNavigationLoader = () => {\n document.querySelectorAll(\"wx-search-loading-indicator\").forEach((loader) => {\n loader.setAttribute(\"aria-hidden\", true);\n });\n};\n\n/**\n * If there is a navigation loader available on the page,\n * make sure that it is being displayed.\n *\n * Each loader is supposed to have a `loader-for` attribute\n * with one or more unique identifiers. Pick the desired loader\n * by passing the ID when emitting the event.\n */\nconst showNavigationLoader = (event) => {\n const loaders = document.querySelectorAll(\"wx-search-loading-indicator\");\n const activeNav = event.detail?.id;\n\n loaders.forEach((loader) => {\n const loaderIsFor = (loader.getAttribute(\"loader-for\") || \"\").split(\" \");\n if (loaderIsFor.includes(activeNav)) {\n loader.removeAttribute(\"aria-hidden\");\n }\n });\n if (loaders.length) {\n const text = gettext(\"js.loader.loading-text.01\");\n window.dispatchEvent(new CustomEvent(\"wx-announce\", { detail: { text } }));\n }\n};\n\nwindow.addEventListener(\"wx-hide-navigation-loader\", hideNavigationLoader);\nwindow.addEventListener(\"wx-show-navigation-loader\", showNavigationLoader);\n\n// When the page is shown, hide the navigation loader. This is the best we can\n// do to handle hiding it when the back button is clicked. This code is not\n// (necessarily) executed again when the back button is pressed. Instead, its\n// state may simply be popped from the history stack. The pageshow event is\n// fired any time this page is shown, regardless of source, and our event\n// listener would persist as part of the popped state. The downside is there's\n// a flash of the loader before it gets hidden.\n//\n// In the event that the browser has already unloaded this page's state from\n// the history stack (to recoup memory, for example), then the page will\n// reload entirely. In that case, the loader is already hidden.\nwindow.addEventListener(\"pageshow\", hideNavigationLoader);\n", "/** @file Set up browser geolocation and handle searching by it. */\n\n(() => {\n const goToLocationPage = (latitude, longitude) => {\n // Submit the form, so we get the same behavior regardless of how we end up\n // navigating to the location page.\n const form = document.querySelector(\"form[data-location-search]\");\n form.setAttribute(\"action\", `/forecast/point/${latitude}/${longitude}`);\n\n form.submit();\n };\n\n const removeBrowserLocationButtons = (buttons) => {\n // make a copy and reverse so we don't accidentally clobber ourselves.\n Array.from(buttons)\n .reverse()\n .forEach((button) => {\n if (button) {\n const sibling = button.previousElementSibling;\n if (sibling) {\n sibling.remove();\n }\n button.remove();\n }\n });\n };\n\n const setupBrowserGeolocation = async () => {\n // There can be multiple buttons used for selecting the browser location.\n // For example, one can be hidden away in the nav bar while another is\n // present lower down on the page. Be sure to add the behavior to\n // all buttons\n const buttons = document.querySelectorAll(\n \"button.weathergov-use-browser-location\",\n );\n\n // If the browser does not support the geolocation API, just bail out. Take\n // the \"use my location\" button away too. Also bop out if we don't have a\n // button for some reason. Just being safe.\n if (!navigator.geolocation) {\n removeBrowserLocationButtons(buttons);\n return;\n }\n\n // Whether we should independently prompt the user prior to asking the browser\n // for their location. IF we can detect existing permissions AND the user has\n // not already granted or denied us, THEN we should prompt first. If we can't\n // detect existing permissions, don't prompt because otherwise we end up\n // putting up our prompt for that user every time they try to use their\n // location.\n let shouldPrompt = false;\n\n if (navigator.permissions) {\n try {\n // Query for geolocation permissions.\n const status = await navigator.permissions.query({\n name: \"geolocation\",\n });\n\n // If the user has already denied location, we can go ahead and bail out.\n // Changing browser settings is not detectable within the page, so they'll\n // have to reload to get the option back anyway.\n //\n // Might need to reconsider this. It might be preferable to leave the\n // button and show users a popup. There are several reasons we might get\n // the \"denied\" state:\n //\n // 1. The web browser does not have permission from the operating system.\n // 2. The web browser is configured to deny permission by default.\n // 3. The user has denied access to our site in particular.\n //\n // In cases 1 and 2, users may not be aware of their settings. If we show\n // the button and then popup a message when they click it letting them\n // know they need to change their browser settings, maybe that's useful.\n // The immediate drawback I can think of is we have no way of knowing\n // whether it's a browser setting or an operating system setting, so we\n // can't give them any more helpful advice than \"check your settings.\"\n //\n // In case 3, however, we should just leave the user alone. They have\n // already said no, and that should be the end of it.\n //\n // Key important takeaway, though, is that \"denied\" means all of those\n // things and it is impossible for us to know which.\n if (status.state === \"denied\") {\n removeBrowserLocationButtons(buttons);\n return;\n }\n\n // If the user has not denied us permission, then we should show our own\n // prompt if the user has not yet granted us permission.\n shouldPrompt = status.state === \"prompt\";\n } catch (_) {\n // An exception in the permissions API likely indicates that the specific\n // attribute we queried for isn't available. That doesn't mean the feature\n // doesn't exist, though, so we should continue as if the permissions API\n // doesn't exist at all and not use our prompt.\n }\n }\n\n const buttonHandler = async (e) => {\n // Stop any other event behavior, in case our button is inside a form\n // or something.\n e.preventDefault();\n e.stopPropagation();\n\n let proceed = true;\n\n // If location is available and we know that the user has neither denied or\n // granted us permission to use it, we will let them know before asking for\n // it. It's kind of a double-opt-in.\n if (shouldPrompt) {\n const text = gettext(\"js.location-search.prompt.user-consent.01\");\n proceed = window.confirm(text);\n }\n\n // If we don't know about the permission, we were already approved to use\n // it, or the user has signaled that we can ask for it... ask for it!\n if (proceed) {\n // Show the loader animation, if available\n window.dispatchEvent(\n new CustomEvent(\"wx-show-navigation-loader\", {\n detail: { id: e.currentTarget.getAttribute(\"id\") },\n }),\n );\n\n navigator.geolocation.getCurrentPosition(\n // Success callback\n ({ coords: { latitude, longitude } }) => {\n // Scale down the precision on these.\n const lat = Math.round(latitude * 1_000) / 1_000;\n const long = Math.round(longitude * 1_000) / 1_000;\n\n // And navigate away!\n goToLocationPage(lat, long);\n },\n // Error callback\n ({ code, message }) => {\n if (code > 1) {\n // There was a problem getting the user's location. They allowed it,\n // but the browser gave us an error.\n // (Error code 1 is for when the user denies access to location, so\n // for our purposes, that is not an error.)\n\n const alertText = interpolate(\n gettext(\"js.location-search.alert.geolocation-error.01\"),\n [message],\n );\n alert(alertText);\n }\n },\n );\n }\n };\n\n Array.from(buttons).forEach((button) => {\n button.addEventListener(\"click\", buttonHandler);\n });\n };\n setupBrowserGeolocation();\n})();\n", "/**\n * WCAG compliant Combobox component\n */\nconst comboTemplate = `\n\n\n`;\nexport default class Combobox extends HTMLElement {\n constructor() {\n super();\n this.popup = null;\n\n this.template = document.createElement(\"template\");\n this.template.innerHTML = comboTemplate;\n this.attachShadow({ mode: \"open\", delegatesFocus: true });\n this.shadowRoot.append(this.template.content.cloneNode(true));\n this.shadowRoot.addEventListener(\n \"slotchange\",\n this.handleSlotChange.bind(this),\n );\n\n // Bound methods\n this.handleInput = this.handleInput.bind(this);\n this.handleFocus = this.handleFocus.bind(this);\n this.handleBlur = this.handleBlur.bind(this);\n this.handleListboxMouseDown = this.handleListboxMouseDown.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.showPopup = this.showPopup.bind(this);\n this.hidePopup = this.hidePopup.bind(this);\n this.submit = this.submit.bind(this);\n this.handlePopupChange = this.handlePopupChange.bind(this);\n this.handleToggleClick = this.handleToggleClick.bind(this);\n this.handleClearClick = this.handleClearClick.bind(this);\n }\n\n connectedCallback() {\n // We need to ensure that the component has a unique id.\n // This is used to compute popup option ids, which are necessary\n // for the correct usage of aria-activedescendant and related\n // pseudo-focus capabilites for assistive technologies.\n if (!this.id) {\n console.error(\n `${this.tagName.toLowerCase()} requires an 'id' attribute to be set`,\n );\n }\n\n // Keyboard and input based events will be listened for on\n // the input element specifically, and handled on this component.\n this.input = this.querySelector(`input[slot=\"input\"]`);\n if (this.input) {\n this.input.addEventListener(\"input\", this.handleInput);\n this.input.addEventListener(\"keydown\", this.handleKeyDown);\n this.input.addEventListener(\"focus\", this.handleFocus);\n this.input.addEventListener(\"blur\", this.handleBlur);\n }\n\n this.addEventListener(\"focus\", this.handleFocus);\n this.addEventListener(\"blur\", this.handleBlur);\n\n // The wx:popup-nav is a custom event that will be fired by any\n // element that is serving as the combobox's popup, such as a\n // listbox, whenever a navigation event occurs in that element.\n // In our most common use case, this is when the pseudoFocus\n // is moved within a listbox that is slotted in this combobox.\n this.addEventListener(\"wx:popup-nav\", this.handlePopupNav);\n\n // Set up the appropriate event handlers for the clear button\n // and the toggle button.\n this.toggleButton = this.querySelector(`[slot=\"toggle-button\"]`);\n if (this.toggleButton) {\n this.toggleButton.addEventListener(\"click\", this.handleToggleClick);\n }\n this.clearButton = this.querySelector(`[slot=\"clear-button\"]`);\n if (this.clearButton) {\n this.clearButton.addEventListener(\"click\", this.handleClearClick);\n }\n }\n\n /**\n * Will attempt to show the popup child\n * element for the combobox, while setting\n * the appropriate aria attributes needed for\n * both screenreading and styling.\n */\n showPopup() {\n if (this.input) {\n this.input.setAttribute(\"aria-expanded\", true);\n this.setAttribute(\"expanded\", true);\n }\n if (this.popup) {\n const target = this.popup.selection ?? this.popup.pseudoFocus;\n if (target) {\n this.popup.pseudoFocusItem(target);\n }\n }\n }\n\n /**\n * Will hide the popup child element\n * for the combobox, by setting the appropriate\n * attributes needed for screenreading and styling\n */\n hidePopup() {\n this.removeAttribute(\"expanded\");\n this.input.removeAttribute(\"aria-expanded\");\n this.input.removeAttribute(\"aria-activedescendant\");\n }\n\n /**\n * Find the closest ancestor