npm - @universityofmaryland/web-elements-library - Versions diffs - 1.4.8 → 1.5.0 - Mend

@universityofmaryland/web-elements-library 1.4.8 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1145) hide show

package/dist/composite/navigation/utility/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sources":["../../../../source/composite/navigation/utility/index.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport {\n createNavAlert,\n STYLES_NAV_ALERT,\n ALERT_CONSTANTS,\n TypeAlertProps,\n} from './alert';\nimport UtilitySearch from './search';\n\ntype TypeMenuItemsRequirements = {\n alertUrl?: string \| null;\n giftUrl?: string;\n isAdmissionsFeed: boolean;\n isAlertOff?: boolean;\n isEventsFeed: boolean;\n isGiftsFeed: boolean;\n isLockFull?: boolean;\n isNewsFeed: boolean;\n isSchoolsFeed: boolean;\n isSearch: boolean;\n isSearchDomain?: boolean;\n};\n\ntype TypeUtilityRequirements = TypeMenuItemsRequirements & TypeAlertProps;\n\nconst { token, layout } = Styles;\n\nconst flagIcon = `<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"29\" height=\"28\" viewBox=\"0 0 29 28\"><title>Flag</title><path d=\"M5 4c0 .72-.39 1.36-1 1.72V25.5c0 .266-.234.5-.5.5h-1c-.266 0-.5-.234-.5-.5V5.72c-.61-.36-1-1-1-1.72 0-1.11.89-2 2-2s2 .89 2 2zm23 1v11.922c0 .578-.36.797-.812 1.03-1.766.954-3.72 1.814-5.766 1.814-2.875 0-4.25-2.188-7.656-2.188-2.484 0-5.094 1.125-7.25 2.28-.172.095-.328.142-.516.142-.547 0-1-.453-1-1V7.406c0-.375.187-.64.484-.86.375-.25.828-.468 1.234-.67 1.97-1 4.36-1.876 6.578-1.876 2.453 0 4.375.812 6.547 1.828.438.22.89.297 1.375.297C23.67 6.125 26.312 4 26.998 4c.548 0 1 .453 1 1z\"></path></svg>`;\nconst homeIcon = `<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"28\" viewBox=\"0 0 26 28\"><title>School</title><path d=\"M22 15.5V23c0 .547-.453 1-1 1h-6v-6h-4v6H5c-.547 0-1-.453-1-1v-7.5c0-.03.016-.063.016-.094L13 8l8.984 7.406c.016.03.016.063.016.094zm3.484-1.078l-.97 1.156c-.077.094-.202.156-.327.172h-.047c-.125 0-.234-.03-.328-.11L13 6.626 2.185 15.64c-.11.08-.234.126-.375.11-.124-.016-.25-.078-.327-.172l-.97-1.156c-.17-.203-.14-.53.064-.703L11.81 4.36c.657-.547 1.72-.547 2.376 0L18 7.547V4.5c0-.28.218-.5.5-.5h3c.28 0 .5.22.5.5v6.375l3.42 2.844c.204.17.235.5.064.702z\"></path></svg>`;\nconst starIcon = `<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"28\" viewBox=\"0 0 26 28\"><title>Star</title><path d=\"M26 10.11c0 .28-.203.546-.406.75l-5.672 5.53 1.344 7.812c.016.11.016.203.016.313 0 .406-.187.78-.64.78-.22 0-.44-.077-.626-.186L13 21.42 5.984 25.11c-.203.108-.406.186-.625.186-.454 0-.657-.375-.657-.78 0-.11.016-.204.03-.314L6.08 16.39.39 10.86c-.187-.204-.39-.47-.39-.75 0-.47.483-.657.874-.72l7.844-1.14 3.516-7.11c.14-.297.406-.64.766-.64s.625.343.766.64l3.516 7.11 7.844 1.14c.375.063.875.25.875.72z\"></path></svg>`;\nconst calendarIcon = `<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"28\" viewBox=\"0 0 26 28\"><title>Calendar</title><path d=\"M2 26h22V10H2v16zM8 7V2.5c0-.28-.22-.5-.5-.5h-1c-.28 0-.5.22-.5.5V7c0 .28.22.5.5.5h1c.28 0 .5-.22.5-.5zm12 0V2.5c0-.28-.22-.5-.5-.5h-1c-.28 0-.5.22-.5.5V7c0 .28.22.5.5.5h1c.28 0 .5-.22.5-.5zm6-1v20c0 1.094-.906 2-2 2H2c-1.094 0-2-.906-2-2V6c0-1.094.906-2 2-2h2V2.5C4 1.125 5.125 0 6.5 0h1C8.875 0 10 1.125 10 2.5V4h6V2.5C16 1.125 17.125 0 18.5 0h1C20.875 0 22 1.125 22 2.5V4h2c1.094 0 2 .906 2 2z\"></path></svg>`;\nconst mIcon = `<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"28\" viewBox=\"0 0 35 28\"><title>Gift</title><path d=\"M16 1.4C7.937 1.4 1.4 7.937 1.4 16S7.937 30.6 16 30.6c8.063 0 14.6-6.537 14.6-14.6S24.063 1.4 16 1.4zm3.38 22.66v-2.55h2L21 13l-4.68 8.36h-.38L11.11 13l-.27 8.55h2v2.55H6.08v-2.55H8l.45-11.5H6.42V7.5h4.54l5.16 9.19 5-9.27h4.51v2.55h-2.04l.61 11.49h2v2.55z\"></path></svg>`;\n\nconst TABLET = 768;\nconst DESKTOP = 1024;\nconst ANIMATION_OUT_SPEED = 400;\nconst ANIMATION_IN_SPEED = 800;\n\nconst ATTRIBUTE_LOCK = 'lock';\nconst LOCK_FULL = 'full';\n\nconst ELEMENT_NAME = 'umd-element-utility-header';\n\nconst IS_LOCK_FULL = `[${ATTRIBUTE_LOCK}=${LOCK_FULL}]`;\n\nconst ELEMENT_UTILITY_DECLARATION = 'element-utility-declaration';\nconst ELEMENT_UTILITY_CONTAINTER = 'element-utility-container';\nconst ELEMENT_UTILITY_LOCK = 'umd-element-nav-utility-lock';\nconst ELEMENT_UTILITY_WRAPPER = 'umd-element-nav-utility-wrapper';\nconst ELEMENT_UTILITY_LOGO = 'umd-element-nav-utility-logo';\nconst ELEMENT_UTILITY_MENU = 'umd-element-nav-utility-menu';\nconst ELEMENT_UTILITY_MOBILE_MENU = 'umd-element-nav-utility-mobile-menu';\nconst ELEMENT_UTILITY_MOBILE_BUTTON = 'umd-element-nav-utility-mobile-button';\nconst ELEMENT_UTILITY_SEARCH_BUTTON = 'umd-element-nav-utility-search-button';\n\nconst OVERWRITE_LOCK_FULL = `.${ELEMENT_UTILITY_CONTAINTER}${IS_LOCK_FULL} .${ELEMENT_UTILITY_LOCK}`;\n\nconst isDesktop = () => window.innerWidth >= DESKTOP;\n\n// prettier-ignore\nconst LockStyles = `\n ${Utility.theme.convertJSSObjectToStyles({\n styleObj: {\n [`.${ELEMENT_UTILITY_LOCK}`]: layout.space.horizontal.larger,\n },\n })}\n\n ${Utility.theme.convertJSSObjectToStyles({\n styleObj: {\n [`${OVERWRITE_LOCK_FULL}`]: layout.space.horizontal.full,\n },\n })}\n`;\n\n// prettier-ignore\nconst WrapperStyles = `\n .${ELEMENT_UTILITY_WRAPPER} {\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: relative;\n min-height: 44px;\n }\n\n .${ELEMENT_UTILITY_WRAPPER} > a {\n color: ${token.color.white};\n text-transform: uppercase;\n }\n\n .${ELEMENT_UTILITY_WRAPPER} > a:hover,\n .${ELEMENT_UTILITY_WRAPPER} > a:focus {\n text-decoration: underline;\n }\n`;\n\n// prettier-ignore\nconst MenuStyles = `\n .${ELEMENT_UTILITY_MENU} {\n display: flex;\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MENU} {\n flex-direction: column;\n }\n }\n\n @container (min-width: ${DESKTOP}px) {\n .${ELEMENT_UTILITY_MENU} {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n }\n\n .${ELEMENT_UTILITY_MENU} a {\n color: ${token.color.white};\n text-decoration: none;\n text-transform: uppercase;\n }\n\n .${ELEMENT_UTILITY_MENU} > * {\n display: flex;\n align-items: center;\n gap: 4px;\n height: 100%;\n padding: ${token.spacing.min} ${token.spacing.sm};\n font-weight: 700;\n font-size: 13px;\n transition: background ${ANIMATION_IN_SPEED}ms;\n }\n\n @container (min-width: ${DESKTOP}px) {\n .${ELEMENT_UTILITY_MENU} > * {\n justify-content: space-between;\n }\n }\n\n .${ELEMENT_UTILITY_MENU} > [aria-expanded=\"true\"] {\n background-color: ${token.color.redDark};\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_CONTAINTER} .${ELEMENT_UTILITY_MENU} > {\n border-top: 1px solid ${token.color.gray.lighter};\n color: ${token.color.red};\n order: 2;\n transition: background ${ANIMATION_OUT_SPEED}ms, color ${ANIMATION_OUT_SPEED}ms;\n }\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MENU} > :first-child {\n border-top: none;\n }\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MENU} > a:hover,\n .${ELEMENT_UTILITY_MENU} > a:focus {\n background-color: ${token.color.red};\n color: ${token.color.white};\n transition: background ${ANIMATION_IN_SPEED}ms, color ${ANIMATION_IN_SPEED}ms;\n }\n }\n\n @container (min-width: ${DESKTOP}px) {\n .${ELEMENT_UTILITY_MENU} > :hover,\n .${ELEMENT_UTILITY_MENU} > *:focus {\n background-color: ${token.color.redDark};\n }\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MENU} > a:hover svg,\n .${ELEMENT_UTILITY_MENU} > a:focus svg {\n fill: ${token.color.white};\n }\n }\n\n .${ELEMENT_UTILITY_SEARCH_BUTTON} svg {\n height: 22px;\n width: inherit;\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_SEARCH_BUTTON} {\n display: none;\n }\n }\n\n .${ELEMENT_UTILITY_MENU} svg {\n max-width: 15px;\n transition: fill ${ANIMATION_OUT_SPEED}ms;\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MENU} svg {\n fill: ${token.color.red};\n transition: fill ${ANIMATION_IN_SPEED}ms;\n }\n }\n\n @container (min-width: ${DESKTOP}px) {\n .${ELEMENT_UTILITY_MENU} svg {\n fill: ${token.color.white};\n }\n }\n`;\n\n// prettier-ignore\nconst MobileMenuStyles = `\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MOBILE_MENU} {\n position: absolute;\n left: -${token.spacing['2xl']};\n right: -${token.spacing['2xl']};\n top: 44px;\n box-shadow: 0 5px 5px 1px rgba(0, 0, 0, .2);\n height: 0;\n overflow: hidden;\n transition: height ${ANIMATION_OUT_SPEED}ms;\n display: flex;\n flex-direction: column;\n background-color: ${token.color.white};\n }\n }\n\n @container (max-width: ${TABLET - 1}px) {\n .${ELEMENT_UTILITY_MOBILE_MENU} {\n left: -${token.spacing.md};\n right: -${token.spacing.md};\n }\n }\n\n @container (min-width: ${DESKTOP}px) {\n .${ELEMENT_UTILITY_MOBILE_MENU} {\n display: flex;\n height: inherit !important;\n margin-left: auto;\n position: relative;\n margin-right: -${token.spacing.md};\n }\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MOBILE_MENU}[aria-hidden=\"true\"] {\n transition: height ${ANIMATION_OUT_SPEED}ms;\n display: none;\n }\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MOBILE_MENU}[aria-hidden=\"false\"] {\n transition: height ${ANIMATION_IN_SPEED}ms;\n }\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MOBILE_MENU} > button {\n display: none;\n }\n }\n\n @container (min-width: ${DESKTOP}px) {\n .${ELEMENT_UTILITY_MOBILE_MENU} > button {\n transition: background ${ANIMATION_OUT_SPEED}ms;\n }\n }\n`\n\n// prettier-ignore\nconst MobileButtonStyles = `\n .${ELEMENT_UTILITY_MOBILE_BUTTON} {\n margin-left: auto;\n height: 100%;\n padding: ${token.spacing.xs} ${token.spacing.md};\n margin-right: -${token.spacing.md};\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n @media (min-width: ${TABLET}px) {\n margin-right: -${token.spacing['2xl']};\n }\n\n @container (min-width: ${DESKTOP}px) {\n .${ELEMENT_UTILITY_MOBILE_BUTTON} {\n display: none;\n }\n }\n\n .${ELEMENT_UTILITY_MOBILE_BUTTON}:hover,\n .${ELEMENT_UTILITY_MOBILE_BUTTON}:focus {\n background-color: ${token.color.redDark};\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MOBILE_BUTTON} svg {\n fill: ${token.color.white};\n width: 18px;\n height: 18px;\n }\n }\n`;\n\n// prettier-ignore\nconst LogoStyles = `\n .${ELEMENT_UTILITY_LOGO} {\n font-size: 14px;\n font-family: Crimson Text, Georgia, serif;\n letter-spacing: 1px;\n padding: 10px 0;\n opacity: 0;\n transition: opacity .3s ease-in;\n }\n`;\n\nlet STYLES_NAVIGATION_UTILITY = `\n .${ELEMENT_UTILITY_DECLARATION} {\n container: ${ELEMENT_NAME} / inline-size;\n }\n\n .${ELEMENT_UTILITY_CONTAINTER} {\n display: block;\n background-color: ${token.color.red};\n position: relative;\n z-index: 999;\n }\n\n ${LockStyles}\n ${WrapperStyles}\n ${LogoStyles}\n ${MenuStyles}\n ${MobileButtonStyles}\n ${MobileMenuStyles}\n ${STYLES_NAV_ALERT}\n ${UtilitySearch.Styles}\n`;\n\nconst CreateSearchFormButton = ({\n expandElement,\n}: {\n expandElement: HTMLDivElement \| HTMLFormElement;\n}) => {\n const button = document.createElement('button');\n const elements = Array.from(expandElement.querySelectorAll('div'));\n let focusCallback = () => {};\n\n const eventClose = () => {\n expandElement.style.height = `0`;\n\n setTimeout(() => {\n expandElement.style.display = 'none';\n expandElement.setAttribute('aria-hidden', 'true');\n button.setAttribute('aria-expanded', 'false');\n button.focus();\n\n if (focusCallback) {\n focusCallback();\n focusCallback = () => {};\n }\n }, ANIMATION_OUT_SPEED + 100);\n };\n\n const eventOpen = () => {\n const focusElement = expandElement.querySelector(\n 'input[type=\"text\"]',\n ) as HTMLInputElement;\n\n expandElement.style.display = 'block';\n\n setTimeout(() => {\n const size = elements.reduce((accumulator, currentValue) => {\n return accumulator + currentValue.offsetHeight;\n }, 0);\n\n expandElement.setAttribute('aria-hidden', 'false');\n expandElement.style.height = `${size}px`;\n button.setAttribute('aria-expanded', 'true');\n if (focusElement) focusElement.focus();\n }, 100);\n\n focusCallback = Utility.accessibility.eventAccessibilityFocus({\n element: expandElement,\n action: () => eventClose(),\n });\n };\n\n button.setAttribute('aria-label', 'enable the search form');\n button.setAttribute('type', 'button');\n button.innerHTML = `${Utility.asset.icon.MAGNIFY_GLASS}`;\n button.setAttribute('aria-controls', UtilitySearch.Elements.form);\n button.classList.add(ELEMENT_UTILITY_SEARCH_BUTTON);\n button.setAttribute('aria-expanded', 'false');\n\n button.addEventListener('click', () => {\n const isExpanded = button.getAttribute('aria-expanded') === 'true';\n\n if (isExpanded) {\n eventClose();\n } else {\n eventOpen();\n }\n });\n\n return button;\n};\n\nconst CreateMobileMenuButton = ({\n expandElement,\n}: {\n expandElement: HTMLDivElement;\n}) => {\n const button = document.createElement('button');\n let focusCallback = () => {};\n\n const eventClose = () => {\n expandElement.style.height = `0`;\n\n setTimeout(() => {\n expandElement.style.display = 'none';\n expandElement.setAttribute('aria-hidden', 'true');\n button.setAttribute('aria-expanded', 'false');\n button.focus();\n\n if (focusCallback) {\n focusCallback();\n focusCallback = () => {};\n }\n }, ANIMATION_OUT_SPEED + 100);\n };\n\n const eventOpen = () => {\n const wrapper = expandElement.querySelector(\n `.${ELEMENT_UTILITY_MENU}`,\n ) as HTMLElement;\n const focusElement = expandElement.querySelector('a') as HTMLAnchorElement;\n\n expandElement.style.display = 'block';\n\n setTimeout(() => {\n expandElement.setAttribute('aria-hidden', 'false');\n expandElement.style.height = `${wrapper.offsetHeight}px`;\n button.setAttribute('aria-expanded', 'true');\n if (focusElement) focusElement.focus();\n }, 100);\n\n focusCallback = Utility.accessibility.eventAccessibilityFocus({\n element: expandElement,\n action: () => eventClose(),\n });\n };\n\n button.innerHTML = `${Utility.asset.icon.CHEVRON_SMALL}`;\n button.setAttribute('type', 'button');\n button.setAttribute('aria-label', 'toggle mobile menu');\n button.setAttribute('aria-controls', `${ELEMENT_UTILITY_MOBILE_MENU}`);\n button.classList.add(ELEMENT_UTILITY_MOBILE_BUTTON);\n\n button.addEventListener('click', () => {\n const isExpanded = button.getAttribute('aria-expanded') === 'true';\n\n if (isExpanded) {\n eventClose();\n } else {\n eventOpen();\n }\n });\n\n return button;\n};\n\nconst CreateLogoElement = () => {\n const logo = document.createElement('a');\n\n logo.innerHTML = 'University of Maryland';\n logo.setAttribute('href', 'https://umd.edu');\n logo.setAttribute('target', '_blank');\n logo.setAttribute('rel', 'noopener noreferrer');\n logo.classList.add(ELEMENT_UTILITY_LOGO);\n\n setTimeout(() => {\n logo.style.opacity = '1';\n }, 200);\n\n return logo;\n};\n\nconst CreateMenuItems = ({\n isAdmissionsFeed,\n isEventsFeed,\n isGiftsFeed,\n isNewsFeed,\n isSchoolsFeed,\n isSearch,\n giftUrl,\n isSearchDomain,\n}: TypeMenuItemsRequirements) => {\n const container = document.createElement('div');\n\n const isValidUrl = (url: string) => {\n try {\n new URL(url);\n } catch (e) {\n return false;\n }\n return true;\n };\n\n const makeLinkElement = ({\n name,\n icon,\n url,\n }: {\n name: string;\n icon: string;\n url: string;\n }) => {\n const tag = document.createElement('a');\n\n tag.setAttribute('href', url);\n tag.setAttribute('target', '_blank');\n tag.setAttribute('rel', 'noopener noreferrer');\n tag.innerHTML = `${icon} <span>${name}</span>`;\n\n return tag;\n };\n\n let hasItems = false;\n\n if (isAdmissionsFeed) {\n hasItems = true;\n\n container.appendChild(\n makeLinkElement({\n name: 'Admissions',\n url: 'https://umd.edu/admissions',\n icon: flagIcon,\n }),\n );\n }\n\n if (isSchoolsFeed) {\n hasItems = true;\n\n container.appendChild(\n makeLinkElement({\n name: 'Colleges & Schools',\n url: 'https://umd.edu/colleges-and-schools',\n icon: homeIcon,\n }),\n );\n }\n\n if (isNewsFeed) {\n hasItems = true;\n\n container.appendChild(\n makeLinkElement({\n name: 'News',\n url: 'https://today.umd.edu/',\n icon: starIcon,\n }),\n );\n }\n\n if (isEventsFeed) {\n hasItems = true;\n\n container.appendChild(\n makeLinkElement({\n name: 'Events',\n url: 'https://calendar.umd.edu',\n icon: calendarIcon,\n }),\n );\n }\n\n if (isGiftsFeed) {\n hasItems = true;\n const getURL = () => {\n const defaultURL = 'https://giving.umd.edu/giving';\n\n if (!giftUrl) return defaultURL;\n\n const validURL = giftUrl ? isValidUrl(giftUrl) : null;\n return validURL ? giftUrl : defaultURL;\n };\n\n container.appendChild(\n makeLinkElement({\n name: 'Make a Gift',\n url: getURL(),\n icon: mIcon,\n }),\n );\n }\n\n if (isSearch \|\| isSearchDomain) {\n hasItems = true;\n const formElement = UtilitySearch.CreateElement({ isSearchDomain });\n const button = CreateSearchFormButton({\n expandElement: formElement,\n });\n\n container.appendChild(button);\n container.appendChild(formElement);\n }\n\n container.classList.add(ELEMENT_UTILITY_MENU);\n\n if (!hasItems) return null;\n\n return container;\n};\n\nconst CreateNavigationUtility = (props: TypeUtilityRequirements) =>\n (() => {\n {\n const { isLockFull, isAlertOff } = props;\n const declaration = document.createElement('div');\n const container = document.createElement('div');\n const lock = document.createElement('div');\n const wrapper = document.createElement('div');\n const logoElement = CreateLogoElement();\n\n const secondaryCta = Styles.element.action.secondary.normal;\n\n let styles =\n STYLES_NAVIGATION_UTILITY +\n Utility.theme.getStyleStringFromJssObject(secondaryCta);\n\n const setLayout = () => {\n const menuItems = CreateMenuItems({ ...props });\n const mobileMenu = document.createElement('div');\n const mobileMenuButton = CreateMobileMenuButton({\n expandElement: mobileMenu,\n });\n\n mobileMenu.setAttribute('id', `${ELEMENT_UTILITY_MOBILE_MENU}`);\n mobileMenu.classList.add(ELEMENT_UTILITY_MOBILE_MENU);\n mobileMenu.setAttribute('aria-hidden', (!isDesktop()).toString());\n\n if (menuItems) {\n mobileMenu.appendChild(menuItems);\n wrapper.appendChild(mobileMenuButton);\n wrapper.appendChild(mobileMenu);\n } else {\n wrapper.style.display = 'flex';\n wrapper.style.justifyContent = 'center';\n }\n };\n\n const resizeEvent = () => {\n const isDesktop = window.innerWidth >= DESKTOP;\n\n const form = container.querySelector(`.${UtilitySearch.Elements.form}`);\n const menu = container.querySelector(`.${ELEMENT_UTILITY_MOBILE_MENU}`);\n\n if (!form \|\| !menu) return;\n\n if (isDesktop) {\n menu.setAttribute('aria-hidden', 'false');\n form.setAttribute('aria-hidden', 'true');\n form.setAttribute('layout', 'desktop');\n } else {\n menu.setAttribute('aria-hidden', 'true');\n form.setAttribute('aria-hidden', 'false');\n form.setAttribute('layout', 'mobile');\n }\n };\n\n const load = async () => {\n if (!isAlertOff) {\n const alert = await createNavAlert(props);\n\n if (alert) {\n container.insertBefore(alert?.element, container.firstChild);\n }\n }\n\n setLayout();\n resizeEvent();\n };\n\n const showAlert = async () => {\n const isCurrentAlert = container.querySelector(\n `.${ALERT_CONSTANTS.ELEMENTS.CONTAINER}`,\n );\n\n if (isCurrentAlert) return;\n\n const alert = await createNavAlert(props);\n\n if (alert) {\n container.insertBefore(alert?.element, container.firstChild);\n }\n };\n\n const hideAlert = () => {\n const alert = container.querySelector(\n `.${ALERT_CONSTANTS.ELEMENTS.CONTAINER}`,\n );\n\n if (alert) {\n alert.remove();\n }\n };\n\n wrapper.appendChild(logoElement);\n wrapper.classList.add(ELEMENT_UTILITY_WRAPPER);\n\n lock.appendChild(wrapper);\n lock.classList.add(ELEMENT_UTILITY_LOCK);\n\n container.appendChild(lock);\n container.classList.add(ELEMENT_UTILITY_CONTAINTER);\n if (isLockFull) container.setAttribute(ATTRIBUTE_LOCK, LOCK_FULL);\n\n declaration.appendChild(container);\n declaration.classList.add(ELEMENT_UTILITY_DECLARATION);\n\n load();\n window.addEventListener('resize', resizeEvent);\n\n return {\n element: declaration,\n styles,\n events: {\n showAlert,\n hideAlert,\n },\n };\n }\n })();\n\nexport default CreateNavigationUtility;\n"],"names":["Utility.theme.convertJSSObjectToStyles","Utility.accessibility.eventAccessibilityFocus","Utility.asset.icon.MAGNIFY_GLASS","Utility.asset.icon.CHEVRON_SMALL","Utility.theme.getStyleStringFromJssObject","isDesktop"],"mappings":";;;;;;AA0BA,MAAM,EAAE,OAAO,OAAA,IAAW;AAE1B,MAAM,WAAW;AACjB,MAAM,WAAW;AACjB,MAAM,WAAW;AACjB,MAAM,eAAe;AACrB,MAAM,QAAQ;AAEd,MAAM,SAAS;AACf,MAAM,UAAU;AAChB,MAAM,sBAAsB;AAC5B,MAAM,qBAAqB;AAE3B,MAAM,iBAAiB;AACvB,MAAM,YAAY;AAElB,MAAM,eAAe;AAErB,MAAM,eAAe,IAAI,cAAc,IAAI,SAAS;AAEpD,MAAM,8BAA8B;AACpC,MAAM,6BAA6B;AACnC,MAAM,uBAAuB;AAC7B,MAAM,0BAA0B;AAChC,MAAM,uBAAuB;AAC7B,MAAM,uBAAuB;AAC7B,MAAM,8BAA8B;AACpC,MAAM,gCAAgC;AACtC,MAAM,gCAAgC;AAEtC,MAAM,sBAAsB,IAAI,0BAA0B,GAAG,YAAY,KAAK,oBAAoB;AAElG,MAAM,YAAY,MAAM,OAAO,cAAc;AAG7C,MAAM,aAAa;AAAA,IACfA,yBAAuC;AAAA,EACvC,UAAU;AAAA,IACR,CAAC,IAAI,oBAAoB,EAAE,GAAG,OAAO,MAAM,WAAW;AAAA,EAAA;AAE1D,CAAC,CAAC;AAAA;AAAA,IAEAA,yBAAuC;AAAA,EACvC,UAAU;AAAA,IACR,CAAC,GAAG,mBAAmB,EAAE,GAAG,OAAO,MAAM,WAAW;AAAA,EAAA;AAExD,CAAC,CAAC;AAAA;AAIJ,MAAM,gBAAgB;AAAA,KACjB,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAQvB,uBAAuB;AAAA,aACf,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,KAIzB,uBAAuB;AAAA,KACvB,uBAAuB;AAAA;AAAA;AAAA;AAM5B,MAAM,aAAa;AAAA,KACd,oBAAoB;AAAA;AAAA;AAAA;AAAA,2BAIE,UAAU,CAAC;AAAA,OAC/B,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKA,OAAO;AAAA,OAC3B,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOtB,oBAAoB;AAAA,aACZ,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,KAKzB,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA,eAKV,MAAM,QAAQ,GAAG,IAAI,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,6BAGvB,kBAAkB;AAAA;AAAA;AAAA,2BAGpB,OAAO;AAAA,MAC5B,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKrB,oBAAoB;AAAA,wBACD,MAAM,MAAM,OAAO;AAAA;AAAA;AAAA,2BAGhB,UAAU,CAAC;AAAA,OAC/B,0BAA0B,KAAK,oBAAoB;AAAA,8BAC5B,MAAM,MAAM,KAAK,OAAO;AAAA,eACvC,MAAM,MAAM,GAAG;AAAA;AAAA,+BAEC,mBAAmB,aAAa,mBAAmB;AAAA;AAAA;AAAA;AAAA,2BAIvD,UAAU,CAAC;AAAA,OAC/B,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKA,UAAU,CAAC;AAAA,OAC/B,oBAAoB;AAAA,OACpB,oBAAoB;AAAA,0BACD,MAAM,MAAM,GAAG;AAAA,eAC1B,MAAM,MAAM,KAAK;AAAA,+BACD,kBAAkB,aAAa,kBAAkB;AAAA;AAAA;AAAA;AAAA,2BAIrD,OAAO;AAAA,OAC3B,oBAAoB;AAAA,OACpB,oBAAoB;AAAA,0BACD,MAAM,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA,2BAIlB,UAAU,CAAC;AAAA,OAC/B,oBAAoB;AAAA,OACpB,oBAAoB;AAAA,cACb,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,KAI1B,6BAA6B;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKP,UAAU,CAAC;AAAA,OAC/B,6BAA6B;AAAA;AAAA;AAAA;AAAA;AAAA,KAK/B,oBAAoB;AAAA;AAAA,uBAEF,mBAAmB;AAAA;AAAA;AAAA,2BAGf,UAAU,CAAC;AAAA,OAC/B,oBAAoB;AAAA,cACb,MAAM,MAAM,GAAG;AAAA,yBACJ,kBAAkB;AAAA;AAAA;AAAA;AAAA,2BAIhB,OAAO;AAAA,OAC3B,oBAAoB;AAAA,cACb,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAM/B,MAAM,mBAAmB;AAAA,2BACE,UAAU,CAAC;AAAA,OAC/B,2BAA2B;AAAA;AAAA,eAEnB,MAAM,QAAQ,KAAK,CAAC;AAAA,gBACnB,MAAM,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKT,mBAAmB;AAAA;AAAA;AAAA,0BAGpB,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,2BAIhB,SAAS,CAAC;AAAA,OAC9B,2BAA2B;AAAA,eACnB,MAAM,QAAQ,EAAE;AAAA,gBACf,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,2BAIL,OAAO;AAAA,OAC3B,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA,uBAKX,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,2BAIZ,UAAU,CAAC;AAAA,OAC/B,2BAA2B;AAAA,2BACP,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKnB,UAAU,CAAC;AAAA,OAC/B,2BAA2B;AAAA,2BACP,kBAAkB;AAAA;AAAA;AAAA;AAAA,2BAIlB,UAAU,CAAC;AAAA,OAC/B,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKP,OAAO;AAAA,OAC3B,2BAA2B;AAAA,+BACH,mBAAmB;AAAA;AAAA;AAAA;AAMlD,MAAM,qBAAqB;AAAA,KACtB,6BAA6B;AAAA;AAAA;AAAA,eAGnB,MAAM,QAAQ,EAAE,IAAI,MAAM,QAAQ,EAAE;AAAA,qBAC9B,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAOd,MAAM;AAAA,qBACR,MAAM,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,2BAGd,OAAO;AAAA,OAC3B,6BAA6B;AAAA;AAAA;AAAA;AAAA;AAAA,KAK/B,6BAA6B;AAAA,KAC7B,6BAA6B;AAAA,wBACV,MAAM,MAAM,OAAO;AAAA;AAAA;AAAA,2BAGhB,UAAU,CAAC;AAAA,OAC/B,6BAA6B;AAAA,cACtB,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ/B,MAAM,aAAa;AAAA,KACd,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUzB,IAAI,4BAA4B;AAAA,KAC3B,2BAA2B;AAAA,iBACf,YAAY;AAAA;AAAA;AAAA,KAGxB,0BAA0B;AAAA;AAAA,wBAEP,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,IAKnC,UAAU;AAAA,IACV,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IACV,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,cAAc,MAAM;AAAA;AAGxB,MAAM,yBAAyB,CAAC;AAAA,EAC9B;AACF,MAEM;AACJ,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,WAAW,MAAM,KAAK,cAAc,iBAAiB,KAAK,CAAC;AACjE,MAAI,gBAAgB,MAAM;AAAA,EAAC;AAE3B,QAAM,aAAa,MAAM;AACvB,kBAAc,MAAM,SAAS;AAE7B,eAAW,MAAM;AACf,oBAAc,MAAM,UAAU;AAC9B,oBAAc,aAAa,eAAe,MAAM;AAChD,aAAO,aAAa,iBAAiB,OAAO;AAC5C,aAAO,MAAA;AAEP,UAAI,eAAe;AACjB,sBAAA;AACA,wBAAgB,MAAM;AAAA,QAAC;AAAA,MACzB;AAAA,IACF,GAAG,sBAAsB,GAAG;AAAA,EAC9B;AAEA,QAAM,YAAY,MAAM;AACtB,UAAM,eAAe,cAAc;AAAA,MACjC;AAAA,IAAA;AAGF,kBAAc,MAAM,UAAU;AAE9B,eAAW,MAAM;AACf,YAAM,OAAO,SAAS,OAAO,CAAC,aAAa,iBAAiB;AAC1D,eAAO,cAAc,aAAa;AAAA,MACpC,GAAG,CAAC;AAEJ,oBAAc,aAAa,eAAe,OAAO;AACjD,oBAAc,MAAM,SAAS,GAAG,IAAI;AACpC,aAAO,aAAa,iBAAiB,MAAM;AAC3C,UAAI,2BAA2B,MAAA;AAAA,IACjC,GAAG,GAAG;AAEN,oBAAgBC,wBAA8C;AAAA,MAC5D,SAAS;AAAA,MACT,QAAQ,MAAM,WAAA;AAAA,IAAW,CAC1B;AAAA,EACH;AAEA,SAAO,aAAa,cAAc,wBAAwB;AAC1D,SAAO,aAAa,QAAQ,QAAQ;AACpC,SAAO,YAAY,GAAGC,aAAgC;AACtD,SAAO,aAAa,iBAAiB,cAAc,SAAS,IAAI;AAChE,SAAO,UAAU,IAAI,6BAA6B;AAClD,SAAO,aAAa,iBAAiB,OAAO;AAE5C,SAAO,iBAAiB,SAAS,MAAM;AACrC,UAAM,aAAa,OAAO,aAAa,eAAe,MAAM;AAE5D,QAAI,YAAY;AACd,iBAAA;AAAA,IACF,OAAO;AACL,gBAAA;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEA,MAAM,yBAAyB,CAAC;AAAA,EAC9B;AACF,MAEM;AACJ,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,MAAI,gBAAgB,MAAM;AAAA,EAAC;AAE3B,QAAM,aAAa,MAAM;AACvB,kBAAc,MAAM,SAAS;AAE7B,eAAW,MAAM;AACf,oBAAc,MAAM,UAAU;AAC9B,oBAAc,aAAa,eAAe,MAAM;AAChD,aAAO,aAAa,iBAAiB,OAAO;AAC5C,aAAO,MAAA;AAEP,UAAI,eAAe;AACjB,sBAAA;AACA,wBAAgB,MAAM;AAAA,QAAC;AAAA,MACzB;AAAA,IACF,GAAG,sBAAsB,GAAG;AAAA,EAC9B;AAEA,QAAM,YAAY,MAAM;AACtB,UAAM,UAAU,cAAc;AAAA,MAC5B,IAAI,oBAAoB;AAAA,IAAA;AAE1B,UAAM,eAAe,cAAc,cAAc,GAAG;AAEpD,kBAAc,MAAM,UAAU;AAE9B,eAAW,MAAM;AACf,oBAAc,aAAa,eAAe,OAAO;AACjD,oBAAc,MAAM,SAAS,GAAG,QAAQ,YAAY;AACpD,aAAO,aAAa,iBAAiB,MAAM;AAC3C,UAAI,2BAA2B,MAAA;AAAA,IACjC,GAAG,GAAG;AAEN,oBAAgBD,wBAA8C;AAAA,MAC5D,SAAS;AAAA,MACT,QAAQ,MAAM,WAAA;AAAA,IAAW,CAC1B;AAAA,EACH;AAEA,SAAO,YAAY,GAAGE,aAAgC;AACtD,SAAO,aAAa,QAAQ,QAAQ;AACpC,SAAO,aAAa,cAAc,oBAAoB;AACtD,SAAO,aAAa,iBAAiB,GAAG,2BAA2B,EAAE;AACrE,SAAO,UAAU,IAAI,6BAA6B;AAElD,SAAO,iBAAiB,SAAS,MAAM;AACrC,UAAM,aAAa,OAAO,aAAa,eAAe,MAAM;AAE5D,QAAI,YAAY;AACd,iBAAA;AAAA,IACF,OAAO;AACL,gBAAA;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEA,MAAM,oBAAoB,MAAM;AAC9B,QAAM,OAAO,SAAS,cAAc,GAAG;AAEvC,OAAK,YAAY;AACjB,OAAK,aAAa,QAAQ,iBAAiB;AAC3C,OAAK,aAAa,UAAU,QAAQ;AACpC,OAAK,aAAa,OAAO,qBAAqB;AAC9C,OAAK,UAAU,IAAI,oBAAoB;AAEvC,aAAW,MAAM;AACf,SAAK,MAAM,UAAU;AAAA,EACvB,GAAG,GAAG;AAEN,SAAO;AACT;AAEA,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiC;AAC/B,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,QAAM,aAAa,CAAC,QAAgB;AAClC,QAAI;AACF,UAAI,IAAI,GAAG;AAAA,IACb,SAAS,GAAG;AACV,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB,CAAC;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,EAAA,MAKI;AACJ,UAAM,MAAM,SAAS,cAAc,GAAG;AAEtC,QAAI,aAAa,QAAQ,GAAG;AAC5B,QAAI,aAAa,UAAU,QAAQ;AACnC,QAAI,aAAa,OAAO,qBAAqB;AAC7C,QAAI,YAAY,GAAG,IAAI,UAAU,IAAI;AAErC,WAAO;AAAA,EACT;AAEA,MAAI,WAAW;AAEf,MAAI,kBAAkB;AACpB,eAAW;AAEX,cAAU;AAAA,MACR,gBAAgB;AAAA,QACd,MAAM;AAAA,QACN,KAAK;AAAA,QACL,MAAM;AAAA,MAAA,CACP;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,eAAe;AACjB,eAAW;AAEX,cAAU;AAAA,MACR,gBAAgB;AAAA,QACd,MAAM;AAAA,QACN,KAAK;AAAA,QACL,MAAM;AAAA,MAAA,CACP;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,YAAY;AACd,eAAW;AAEX,cAAU;AAAA,MACR,gBAAgB;AAAA,QACd,MAAM;AAAA,QACN,KAAK;AAAA,QACL,MAAM;AAAA,MAAA,CACP;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,cAAc;AAChB,eAAW;AAEX,cAAU;AAAA,MACR,gBAAgB;AAAA,QACd,MAAM;AAAA,QACN,KAAK;AAAA,QACL,MAAM;AAAA,MAAA,CACP;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,aAAa;AACf,eAAW;AACX,UAAM,SAAS,MAAM;AACnB,YAAM,aAAa;AAEnB,UAAI,CAAC,QAAS,QAAO;AAErB,YAAM,WAAW,UAAU,WAAW,OAAO,IAAI;AACjD,aAAO,WAAW,UAAU;AAAA,IAC9B;AAEA,cAAU;AAAA,MACR,gBAAgB;AAAA,QACd,MAAM;AAAA,QACN,KAAK,OAAA;AAAA,QACL,MAAM;AAAA,MAAA,CACP;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,YAAY,gBAAgB;AAC9B,eAAW;AACX,UAAM,cAAc,cAAc,cAAc,EAAE,gBAAgB;AAClE,UAAM,SAAS,uBAAuB;AAAA,MACpC,eAAe;AAAA,IAAA,CAChB;AAED,cAAU,YAAY,MAAM;AAC5B,cAAU,YAAY,WAAW;AAAA,EACnC;AAEA,YAAU,UAAU,IAAI,oBAAoB;AAE5C,MAAI,CAAC,SAAU,QAAO;AAEtB,SAAO;AACT;AAEA,MAAM,0BAA0B,CAAC,WAC9B,MAAM;AACL;AACE,UAAM,EAAE,YAAY,WAAA,IAAe;AACnC,UAAM,cAAc,SAAS,cAAc,KAAK;AAChD,UAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,UAAM,OAAO,SAAS,cAAc,KAAK;AACzC,UAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,UAAM,cAAc,kBAAA;AAEpB,UAAM,eAAe,OAAO,QAAQ,OAAO,UAAU;AAErD,QAAI,SACF,4BACAC,4BAA0C,YAAY;AAExD,UAAM,YAAY,MAAM;AACtB,YAAM,YAAY,gBAAgB,EAAE,GAAG,OAAO;AAC9C,YAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,YAAM,mBAAmB,uBAAuB;AAAA,QAC9C,eAAe;AAAA,MAAA,CAChB;AAED,iBAAW,aAAa,MAAM,GAAG,2BAA2B,EAAE;AAC9D,iBAAW,UAAU,IAAI,2BAA2B;AACpD,iBAAW,aAAa,gBAAgB,CAAC,UAAA,GAAa,UAAU;AAEhE,UAAI,WAAW;AACb,mBAAW,YAAY,SAAS;AAChC,gBAAQ,YAAY,gBAAgB;AACpC,gBAAQ,YAAY,UAAU;AAAA,MAChC,OAAO;AACL,gBAAQ,MAAM,UAAU;AACxB,gBAAQ,MAAM,iBAAiB;AAAA,MACjC;AAAA,IACF;AAEA,UAAM,cAAc,MAAM;AACxB,YAAMC,aAAY,OAAO,cAAc;AAEvC,YAAM,OAAO,UAAU,cAAc,IAAI,cAAc,SAAS,IAAI,EAAE;AACtE,YAAM,OAAO,UAAU,cAAc,IAAI,2BAA2B,EAAE;AAEtE,UAAI,CAAC,QAAQ,CAAC,KAAM;AAEpB,UAAIA,YAAW;AACb,aAAK,aAAa,eAAe,OAAO;AACxC,aAAK,aAAa,eAAe,MAAM;AACvC,aAAK,aAAa,UAAU,SAAS;AAAA,MACvC,OAAO;AACL,aAAK,aAAa,eAAe,MAAM;AACvC,aAAK,aAAa,eAAe,OAAO;AACxC,aAAK,aAAa,UAAU,QAAQ;AAAA,MACtC;AAAA,IACF;AAEA,UAAM,OAAO,YAAY;AACvB,UAAI,CAAC,YAAY;AACf,cAAM,QAAQ,MAAM,eAAe,KAAK;AAExC,YAAI,OAAO;AACT,oBAAU,aAAa,OAAO,SAAS,UAAU,UAAU;AAAA,QAC7D;AAAA,MACF;AAEA,gBAAA;AACA,kBAAA;AAAA,IACF;AAEA,UAAM,YAAY,YAAY;AAC5B,YAAM,iBAAiB,UAAU;AAAA,QAC/B,IAAI,gBAAgB,SAAS,SAAS;AAAA,MAAA;AAGxC,UAAI,eAAgB;AAEpB,YAAM,QAAQ,MAAM,eAAe,KAAK;AAExC,UAAI,OAAO;AACT,kBAAU,aAAa,OAAO,SAAS,UAAU,UAAU;AAAA,MAC7D;AAAA,IACF;AAEA,UAAM,YAAY,MAAM;AACtB,YAAM,QAAQ,UAAU;AAAA,QACtB,IAAI,gBAAgB,SAAS,SAAS;AAAA,MAAA;AAGxC,UAAI,OAAO;AACT,cAAM,OAAA;AAAA,MACR;AAAA,IACF;AAEA,YAAQ,YAAY,WAAW;AAC/B,YAAQ,UAAU,IAAI,uBAAuB;AAE7C,SAAK,YAAY,OAAO;AACxB,SAAK,UAAU,IAAI,oBAAoB;AAEvC,cAAU,YAAY,IAAI;AAC1B,cAAU,UAAU,IAAI,0BAA0B;AAClD,QAAI,WAAY,WAAU,aAAa,gBAAgB,SAAS;AAEhE,gBAAY,YAAY,SAAS;AACjC,gBAAY,UAAU,IAAI,2BAA2B;AAErD,SAAA;AACA,WAAO,iBAAiB,UAAU,WAAW;AAE7C,WAAO;AAAA,MACL,SAAS;AAAA,MACT;AAAA,MACA,QAAQ;AAAA,QACN;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ;AACF,GAAA;"}
1	+ {"version":3,"file":"index.mjs","sources":["../../../../source/composite/navigation/utility/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport {\n jssToCSS,\n jssEntryToCSS,\n} from '@universityofmaryland/web-utilities-library/styles';\nimport { handleKeyboardNavigation } from '@universityofmaryland/web-utilities-library/events';\nimport { search as iconSearch } from '@universityofmaryland/web-icons-library/search';\nimport { chevron_down as iconChevronDown } from '@universityofmaryland/web-icons-library/controls';\nimport {\n createNavAlert,\n STYLES_NAV_ALERT,\n ALERT_CONSTANTS,\n TypeAlertProps,\n} from './alert';\nimport UtilitySearch from './search';\n\ntype TypeMenuItemsRequirements = {\n alertUrl?: string \| null;\n giftUrl?: string;\n isAdmissionsFeed: boolean;\n isAlertOff?: boolean;\n isEventsFeed: boolean;\n isGiftsFeed: boolean;\n isLockFull?: boolean;\n isNewsFeed: boolean;\n isSchoolsFeed: boolean;\n isSearch: boolean;\n isSearchDomain?: boolean;\n};\n\ntype TypeUtilityRequirements = TypeMenuItemsRequirements & TypeAlertProps;\n\nconst flagIcon = `<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"29\" height=\"28\" viewBox=\"0 0 29 28\"><title>Flag</title><path d=\"M5 4c0 .72-.39 1.36-1 1.72V25.5c0 .266-.234.5-.5.5h-1c-.266 0-.5-.234-.5-.5V5.72c-.61-.36-1-1-1-1.72 0-1.11.89-2 2-2s2 .89 2 2zm23 1v11.922c0 .578-.36.797-.812 1.03-1.766.954-3.72 1.814-5.766 1.814-2.875 0-4.25-2.188-7.656-2.188-2.484 0-5.094 1.125-7.25 2.28-.172.095-.328.142-.516.142-.547 0-1-.453-1-1V7.406c0-.375.187-.64.484-.86.375-.25.828-.468 1.234-.67 1.97-1 4.36-1.876 6.578-1.876 2.453 0 4.375.812 6.547 1.828.438.22.89.297 1.375.297C23.67 6.125 26.312 4 26.998 4c.548 0 1 .453 1 1z\"></path></svg>`;\nconst homeIcon = `<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"28\" viewBox=\"0 0 26 28\"><title>School</title><path d=\"M22 15.5V23c0 .547-.453 1-1 1h-6v-6h-4v6H5c-.547 0-1-.453-1-1v-7.5c0-.03.016-.063.016-.094L13 8l8.984 7.406c.016.03.016.063.016.094zm3.484-1.078l-.97 1.156c-.077.094-.202.156-.327.172h-.047c-.125 0-.234-.03-.328-.11L13 6.626 2.185 15.64c-.11.08-.234.126-.375.11-.124-.016-.25-.078-.327-.172l-.97-1.156c-.17-.203-.14-.53.064-.703L11.81 4.36c.657-.547 1.72-.547 2.376 0L18 7.547V4.5c0-.28.218-.5.5-.5h3c.28 0 .5.22.5.5v6.375l3.42 2.844c.204.17.235.5.064.702z\"></path></svg>`;\nconst starIcon = `<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"28\" viewBox=\"0 0 26 28\"><title>Star</title><path d=\"M26 10.11c0 .28-.203.546-.406.75l-5.672 5.53 1.344 7.812c.016.11.016.203.016.313 0 .406-.187.78-.64.78-.22 0-.44-.077-.626-.186L13 21.42 5.984 25.11c-.203.108-.406.186-.625.186-.454 0-.657-.375-.657-.78 0-.11.016-.204.03-.314L6.08 16.39.39 10.86c-.187-.204-.39-.47-.39-.75 0-.47.483-.657.874-.72l7.844-1.14 3.516-7.11c.14-.297.406-.64.766-.64s.625.343.766.64l3.516 7.11 7.844 1.14c.375.063.875.25.875.72z\"></path></svg>`;\nconst calendarIcon = `<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"28\" viewBox=\"0 0 26 28\"><title>Calendar</title><path d=\"M2 26h22V10H2v16zM8 7V2.5c0-.28-.22-.5-.5-.5h-1c-.28 0-.5.22-.5.5V7c0 .28.22.5.5.5h1c.28 0 .5-.22.5-.5zm12 0V2.5c0-.28-.22-.5-.5-.5h-1c-.28 0-.5.22-.5.5V7c0 .28.22.5.5.5h1c.28 0 .5-.22.5-.5zm6-1v20c0 1.094-.906 2-2 2H2c-1.094 0-2-.906-2-2V6c0-1.094.906-2 2-2h2V2.5C4 1.125 5.125 0 6.5 0h1C8.875 0 10 1.125 10 2.5V4h6V2.5C16 1.125 17.125 0 18.5 0h1C20.875 0 22 1.125 22 2.5V4h2c1.094 0 2 .906 2 2z\"></path></svg>`;\nconst mIcon = `<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"28\" viewBox=\"0 0 35 28\"><title>Gift</title><path d=\"M16 1.4C7.937 1.4 1.4 7.937 1.4 16S7.937 30.6 16 30.6c8.063 0 14.6-6.537 14.6-14.6S24.063 1.4 16 1.4zm3.38 22.66v-2.55h2L21 13l-4.68 8.36h-.38L11.11 13l-.27 8.55h2v2.55H6.08v-2.55H8l.45-11.5H6.42V7.5h4.54l5.16 9.19 5-9.27h4.51v2.55h-2.04l.61 11.49h2v2.55z\"></path></svg>`;\n\nconst TABLET = 768;\nconst DESKTOP = 1024;\nconst ANIMATION_OUT_SPEED = 400;\nconst ANIMATION_IN_SPEED = 800;\n\nconst ATTRIBUTE_LOCK = 'lock';\nconst LOCK_FULL = 'full';\n\nconst ELEMENT_NAME = 'umd-element-utility-header';\n\nconst IS_LOCK_FULL = `[${ATTRIBUTE_LOCK}=${LOCK_FULL}]`;\n\nconst ELEMENT_UTILITY_DECLARATION = 'element-utility-declaration';\nconst ELEMENT_UTILITY_CONTAINTER = 'element-utility-container';\nconst ELEMENT_UTILITY_LOCK = 'umd-element-nav-utility-lock';\nconst ELEMENT_UTILITY_WRAPPER = 'umd-element-nav-utility-wrapper';\nconst ELEMENT_UTILITY_LOGO = 'umd-element-nav-utility-logo';\nconst ELEMENT_UTILITY_MENU = 'umd-element-nav-utility-menu';\nconst ELEMENT_UTILITY_MOBILE_MENU = 'umd-element-nav-utility-mobile-menu';\nconst ELEMENT_UTILITY_MOBILE_BUTTON = 'umd-element-nav-utility-mobile-button';\nconst ELEMENT_UTILITY_SEARCH_BUTTON = 'umd-element-nav-utility-search-button';\n\nconst OVERWRITE_LOCK_FULL = `.${ELEMENT_UTILITY_CONTAINTER}${IS_LOCK_FULL} .${ELEMENT_UTILITY_LOCK}`;\n\nconst isDesktop = () => window.innerWidth >= DESKTOP;\n\n// prettier-ignore\nconst LockStyles = `\n ${jssToCSS({\n styleObj: {\n [`.${ELEMENT_UTILITY_LOCK}`]: layout.space.horizontal.larger,\n },\n })}\n\n ${jssToCSS({\n styleObj: {\n [`${OVERWRITE_LOCK_FULL}`]: layout.space.horizontal.full,\n },\n })}\n`;\n\n// prettier-ignore\nconst WrapperStyles = `\n .${ELEMENT_UTILITY_WRAPPER} {\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: relative;\n min-height: 44px;\n }\n\n .${ELEMENT_UTILITY_WRAPPER} > a {\n color: ${token.color.white};\n text-transform: uppercase;\n }\n\n .${ELEMENT_UTILITY_WRAPPER} > a:hover,\n .${ELEMENT_UTILITY_WRAPPER} > a:focus {\n text-decoration: underline;\n }\n`;\n\n// prettier-ignore\nconst MenuStyles = `\n .${ELEMENT_UTILITY_MENU} {\n display: flex;\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MENU} {\n flex-direction: column;\n }\n }\n\n @container (min-width: ${DESKTOP}px) {\n .${ELEMENT_UTILITY_MENU} {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n }\n\n .${ELEMENT_UTILITY_MENU} a {\n color: ${token.color.white};\n text-decoration: none;\n text-transform: uppercase;\n }\n\n .${ELEMENT_UTILITY_MENU} > * {\n display: flex;\n align-items: center;\n gap: 4px;\n height: 100%;\n padding: ${token.spacing.min} ${token.spacing.sm};\n font-weight: 700;\n font-size: 13px;\n transition: background ${ANIMATION_IN_SPEED}ms;\n }\n\n @container (min-width: ${DESKTOP}px) {\n .${ELEMENT_UTILITY_MENU} > * {\n justify-content: space-between;\n }\n }\n\n .${ELEMENT_UTILITY_MENU} > [aria-expanded=\"true\"] {\n background-color: ${token.color.redDark};\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_CONTAINTER} .${ELEMENT_UTILITY_MENU} > {\n border-top: 1px solid ${token.color.gray.lighter};\n color: ${token.color.red};\n order: 2;\n transition: background ${ANIMATION_OUT_SPEED}ms, color ${ANIMATION_OUT_SPEED}ms;\n }\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MENU} > :first-child {\n border-top: none;\n }\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MENU} > a:hover,\n .${ELEMENT_UTILITY_MENU} > a:focus {\n background-color: ${token.color.red};\n color: ${token.color.white};\n transition: background ${ANIMATION_IN_SPEED}ms, color ${ANIMATION_IN_SPEED}ms;\n }\n }\n\n @container (min-width: ${DESKTOP}px) {\n .${ELEMENT_UTILITY_MENU} > :hover,\n .${ELEMENT_UTILITY_MENU} > *:focus {\n background-color: ${token.color.redDark};\n }\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MENU} > a:hover svg,\n .${ELEMENT_UTILITY_MENU} > a:focus svg {\n fill: ${token.color.white};\n }\n }\n\n .${ELEMENT_UTILITY_SEARCH_BUTTON} svg {\n height: 22px;\n width: inherit;\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_SEARCH_BUTTON} {\n display: none;\n }\n }\n\n .${ELEMENT_UTILITY_MENU} svg {\n max-width: 15px;\n transition: fill ${ANIMATION_OUT_SPEED}ms;\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MENU} svg {\n fill: ${token.color.red};\n transition: fill ${ANIMATION_IN_SPEED}ms;\n }\n }\n\n @container (min-width: ${DESKTOP}px) {\n .${ELEMENT_UTILITY_MENU} svg {\n fill: ${token.color.white};\n }\n }\n`;\n\n// prettier-ignore\nconst MobileMenuStyles = `\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MOBILE_MENU} {\n position: absolute;\n left: -${token.spacing['2xl']};\n right: -${token.spacing['2xl']};\n top: 44px;\n box-shadow: 0 5px 5px 1px rgba(0, 0, 0, .2);\n height: 0;\n overflow: hidden;\n transition: height ${ANIMATION_OUT_SPEED}ms;\n display: flex;\n flex-direction: column;\n background-color: ${token.color.white};\n }\n }\n\n @container (max-width: ${TABLET - 1}px) {\n .${ELEMENT_UTILITY_MOBILE_MENU} {\n left: -${token.spacing.md};\n right: -${token.spacing.md};\n }\n }\n\n @container (min-width: ${DESKTOP}px) {\n .${ELEMENT_UTILITY_MOBILE_MENU} {\n display: flex;\n height: inherit !important;\n margin-left: auto;\n position: relative;\n margin-right: -${token.spacing.md};\n }\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MOBILE_MENU}[aria-hidden=\"true\"] {\n transition: height ${ANIMATION_OUT_SPEED}ms;\n display: none;\n }\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MOBILE_MENU}[aria-hidden=\"false\"] {\n transition: height ${ANIMATION_IN_SPEED}ms;\n }\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MOBILE_MENU} > button {\n display: none;\n }\n }\n\n @container (min-width: ${DESKTOP}px) {\n .${ELEMENT_UTILITY_MOBILE_MENU} > button {\n transition: background ${ANIMATION_OUT_SPEED}ms;\n }\n }\n`\n\n// prettier-ignore\nconst MobileButtonStyles = `\n .${ELEMENT_UTILITY_MOBILE_BUTTON} {\n margin-left: auto;\n height: 100%;\n padding: ${token.spacing.xs} ${token.spacing.md};\n margin-right: -${token.spacing.md};\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n @media (min-width: ${TABLET}px) {\n margin-right: -${token.spacing['2xl']};\n }\n\n @container (min-width: ${DESKTOP}px) {\n .${ELEMENT_UTILITY_MOBILE_BUTTON} {\n display: none;\n }\n }\n\n .${ELEMENT_UTILITY_MOBILE_BUTTON}:hover,\n .${ELEMENT_UTILITY_MOBILE_BUTTON}:focus {\n background-color: ${token.color.redDark};\n }\n\n @container (max-width: ${DESKTOP - 1}px) {\n .${ELEMENT_UTILITY_MOBILE_BUTTON} svg {\n fill: ${token.color.white};\n width: 18px;\n height: 18px;\n }\n }\n`;\n\n// prettier-ignore\nconst LogoStyles = `\n .${ELEMENT_UTILITY_LOGO} {\n font-size: 14px;\n font-family: Crimson Text, Georgia, serif;\n letter-spacing: 1px;\n padding: 10px 0;\n opacity: 0;\n transition: opacity .3s ease-in;\n }\n`;\n\nlet STYLES_NAVIGATION_UTILITY = `\n .${ELEMENT_UTILITY_DECLARATION} {\n container: ${ELEMENT_NAME} / inline-size;\n }\n\n .${ELEMENT_UTILITY_CONTAINTER} {\n display: block;\n background-color: ${token.color.red};\n position: relative;\n z-index: 999;\n }\n\n ${LockStyles}\n ${WrapperStyles}\n ${LogoStyles}\n ${MenuStyles}\n ${MobileButtonStyles}\n ${MobileMenuStyles}\n ${STYLES_NAV_ALERT}\n ${UtilitySearch.Styles}\n`;\n\nconst CreateSearchFormButton = ({\n expandElement,\n}: {\n expandElement: HTMLDivElement \| HTMLFormElement;\n}) => {\n const button = document.createElement('button');\n const elements = Array.from(expandElement.querySelectorAll('div'));\n let focusCallback = () => {};\n\n const eventClose = () => {\n expandElement.style.height = `0`;\n\n setTimeout(() => {\n expandElement.style.display = 'none';\n expandElement.setAttribute('aria-hidden', 'true');\n button.setAttribute('aria-expanded', 'false');\n button.focus();\n\n if (focusCallback) {\n focusCallback();\n focusCallback = () => {};\n }\n }, ANIMATION_OUT_SPEED + 100);\n };\n\n const eventOpen = () => {\n const focusElement = expandElement.querySelector(\n 'input[type=\"text\"]',\n ) as HTMLInputElement;\n\n expandElement.style.display = 'block';\n\n setTimeout(() => {\n const size = elements.reduce((accumulator, currentValue) => {\n return accumulator + currentValue.offsetHeight;\n }, 0);\n\n expandElement.setAttribute('aria-hidden', 'false');\n expandElement.style.height = `${size}px`;\n button.setAttribute('aria-expanded', 'true');\n if (focusElement) focusElement.focus();\n }, 100);\n\n focusCallback = handleKeyboardNavigation({\n element: expandElement,\n action: () => eventClose(),\n });\n };\n\n button.setAttribute('aria-label', 'enable the search form');\n button.setAttribute('type', 'button');\n button.innerHTML = `${iconSearch}`;\n button.setAttribute('aria-controls', UtilitySearch.Elements.form);\n button.classList.add(ELEMENT_UTILITY_SEARCH_BUTTON);\n button.setAttribute('aria-expanded', 'false');\n\n button.addEventListener('click', () => {\n const isExpanded = button.getAttribute('aria-expanded') === 'true';\n\n if (isExpanded) {\n eventClose();\n } else {\n eventOpen();\n }\n });\n\n return button;\n};\n\nconst CreateMobileMenuButton = ({\n expandElement,\n}: {\n expandElement: HTMLDivElement;\n}) => {\n const button = document.createElement('button');\n let focusCallback = () => {};\n\n const eventClose = () => {\n expandElement.style.height = `0`;\n\n setTimeout(() => {\n expandElement.style.display = 'none';\n expandElement.setAttribute('aria-hidden', 'true');\n button.setAttribute('aria-expanded', 'false');\n button.focus();\n\n if (focusCallback) {\n focusCallback();\n focusCallback = () => {};\n }\n }, ANIMATION_OUT_SPEED + 100);\n };\n\n const eventOpen = () => {\n const wrapper = expandElement.querySelector(\n `.${ELEMENT_UTILITY_MENU}`,\n ) as HTMLElement;\n const focusElement = expandElement.querySelector('a') as HTMLAnchorElement;\n\n expandElement.style.display = 'block';\n\n setTimeout(() => {\n expandElement.setAttribute('aria-hidden', 'false');\n expandElement.style.height = `${wrapper.offsetHeight}px`;\n button.setAttribute('aria-expanded', 'true');\n if (focusElement) focusElement.focus();\n }, 100);\n\n focusCallback = handleKeyboardNavigation({\n element: expandElement,\n action: () => eventClose(),\n });\n };\n\n button.innerHTML = `${iconChevronDown}`;\n button.setAttribute('type', 'button');\n button.setAttribute('aria-label', 'toggle mobile menu');\n button.setAttribute('aria-controls', `${ELEMENT_UTILITY_MOBILE_MENU}`);\n button.classList.add(ELEMENT_UTILITY_MOBILE_BUTTON);\n\n button.addEventListener('click', () => {\n const isExpanded = button.getAttribute('aria-expanded') === 'true';\n\n if (isExpanded) {\n eventClose();\n } else {\n eventOpen();\n }\n });\n\n return button;\n};\n\nconst CreateLogoElement = () => {\n const logo = document.createElement('a');\n\n logo.innerHTML = 'University of Maryland';\n logo.setAttribute('href', 'https://umd.edu');\n logo.setAttribute('target', '_blank');\n logo.setAttribute('rel', 'noopener noreferrer');\n logo.classList.add(ELEMENT_UTILITY_LOGO);\n\n setTimeout(() => {\n logo.style.opacity = '1';\n }, 200);\n\n return logo;\n};\n\nconst CreateMenuItems = ({\n isAdmissionsFeed,\n isEventsFeed,\n isGiftsFeed,\n isNewsFeed,\n isSchoolsFeed,\n isSearch,\n giftUrl,\n isSearchDomain,\n}: TypeMenuItemsRequirements) => {\n const container = document.createElement('div');\n\n const isValidUrl = (url: string) => {\n try {\n new URL(url);\n } catch (e) {\n return false;\n }\n return true;\n };\n\n const makeLinkElement = ({\n name,\n icon,\n url,\n }: {\n name: string;\n icon: string;\n url: string;\n }) => {\n const tag = document.createElement('a');\n\n tag.setAttribute('href', url);\n tag.setAttribute('target', '_blank');\n tag.setAttribute('rel', 'noopener noreferrer');\n tag.innerHTML = `${icon} <span>${name}</span>`;\n\n return tag;\n };\n\n let hasItems = false;\n\n if (isAdmissionsFeed) {\n hasItems = true;\n\n container.appendChild(\n makeLinkElement({\n name: 'Admissions',\n url: 'https://umd.edu/admissions',\n icon: flagIcon,\n }),\n );\n }\n\n if (isSchoolsFeed) {\n hasItems = true;\n\n container.appendChild(\n makeLinkElement({\n name: 'Colleges & Schools',\n url: 'https://umd.edu/colleges-and-schools',\n icon: homeIcon,\n }),\n );\n }\n\n if (isNewsFeed) {\n hasItems = true;\n\n container.appendChild(\n makeLinkElement({\n name: 'News',\n url: 'https://today.umd.edu/',\n icon: starIcon,\n }),\n );\n }\n\n if (isEventsFeed) {\n hasItems = true;\n\n container.appendChild(\n makeLinkElement({\n name: 'Events',\n url: 'https://calendar.umd.edu',\n icon: calendarIcon,\n }),\n );\n }\n\n if (isGiftsFeed) {\n hasItems = true;\n const getURL = () => {\n const defaultURL = 'https://giving.umd.edu/giving';\n\n if (!giftUrl) return defaultURL;\n\n const validURL = giftUrl ? isValidUrl(giftUrl) : null;\n return validURL ? giftUrl : defaultURL;\n };\n\n container.appendChild(\n makeLinkElement({\n name: 'Make a Gift',\n url: getURL(),\n icon: mIcon,\n }),\n );\n }\n\n if (isSearch \|\| isSearchDomain) {\n hasItems = true;\n const formElement = UtilitySearch.CreateElement({ isSearchDomain });\n const button = CreateSearchFormButton({\n expandElement: formElement,\n });\n\n container.appendChild(button);\n container.appendChild(formElement);\n }\n\n container.classList.add(ELEMENT_UTILITY_MENU);\n\n if (!hasItems) return null;\n\n return container;\n};\n\nconst CreateNavigationUtility = (props: TypeUtilityRequirements) =>\n (() => {\n {\n const { isLockFull, isAlertOff } = props;\n const declaration = document.createElement('div');\n const container = document.createElement('div');\n const lock = document.createElement('div');\n const wrapper = document.createElement('div');\n const logoElement = CreateLogoElement();\n\n const secondaryCta = elementStyles.action.secondary.normal;\n\n let styles =\n STYLES_NAVIGATION_UTILITY + jssEntryToCSS(secondaryCta);\n\n const setLayout = () => {\n const menuItems = CreateMenuItems({ ...props });\n const mobileMenu = document.createElement('div');\n const mobileMenuButton = CreateMobileMenuButton({\n expandElement: mobileMenu,\n });\n\n mobileMenu.setAttribute('id', `${ELEMENT_UTILITY_MOBILE_MENU}`);\n mobileMenu.classList.add(ELEMENT_UTILITY_MOBILE_MENU);\n mobileMenu.setAttribute('aria-hidden', (!isDesktop()).toString());\n\n if (menuItems) {\n mobileMenu.appendChild(menuItems);\n wrapper.appendChild(mobileMenuButton);\n wrapper.appendChild(mobileMenu);\n } else {\n wrapper.style.display = 'flex';\n wrapper.style.justifyContent = 'center';\n }\n };\n\n const resizeEvent = () => {\n const isDesktop = window.innerWidth >= DESKTOP;\n\n const form = container.querySelector(`.${UtilitySearch.Elements.form}`);\n const menu = container.querySelector(`.${ELEMENT_UTILITY_MOBILE_MENU}`);\n\n if (!form \|\| !menu) return;\n\n if (isDesktop) {\n menu.setAttribute('aria-hidden', 'false');\n form.setAttribute('aria-hidden', 'true');\n form.setAttribute('layout', 'desktop');\n } else {\n menu.setAttribute('aria-hidden', 'true');\n form.setAttribute('aria-hidden', 'false');\n form.setAttribute('layout', 'mobile');\n }\n };\n\n const load = async () => {\n if (!isAlertOff) {\n const alert = await createNavAlert(props);\n\n if (alert) {\n container.insertBefore(alert?.element, container.firstChild);\n }\n }\n\n setLayout();\n resizeEvent();\n };\n\n const showAlert = async () => {\n const isCurrentAlert = container.querySelector(\n `.${ALERT_CONSTANTS.ELEMENTS.CONTAINER}`,\n );\n\n if (isCurrentAlert) return;\n\n const alert = await createNavAlert(props);\n\n if (alert) {\n container.insertBefore(alert?.element, container.firstChild);\n }\n };\n\n const hideAlert = () => {\n const alert = container.querySelector(\n `.${ALERT_CONSTANTS.ELEMENTS.CONTAINER}`,\n );\n\n if (alert) {\n alert.remove();\n }\n };\n\n wrapper.appendChild(logoElement);\n wrapper.classList.add(ELEMENT_UTILITY_WRAPPER);\n\n lock.appendChild(wrapper);\n lock.classList.add(ELEMENT_UTILITY_LOCK);\n\n container.appendChild(lock);\n container.classList.add(ELEMENT_UTILITY_CONTAINTER);\n if (isLockFull) container.setAttribute(ATTRIBUTE_LOCK, LOCK_FULL);\n\n declaration.appendChild(container);\n declaration.classList.add(ELEMENT_UTILITY_DECLARATION);\n\n load();\n window.addEventListener('resize', resizeEvent);\n\n return {\n element: declaration,\n styles,\n events: {\n showAlert,\n hideAlert,\n },\n };\n }\n })();\n\nexport default CreateNavigationUtility;\n"],"names":["iconSearch","iconChevronDown","isDesktop"],"mappings":"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"}

package/dist/composite/navigation/utility/search.js CHANGED Viewed

@@ -1,5 +1,22 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
+const token = require("@universityofmaryland/web-styles-library/token");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const SEARCH_URL = "https://search.umd.edu";
 const ANIMATION_IN_SPEED = 800;
 const ANIMATION_OUT_SPEED = 400;
@@ -24,7 +41,7 @@ const OverwriteLayoutDesktop = `
     position: absolute;
     top: 48px;
     right: 0;
-    background-color: ${Styles.token.color.white};
+    background-color: ${token__namespace.color.white};
     transition: height ${ANIMATION_OUT_SPEED}ms;
   }
@@ -38,7 +55,7 @@ const OverwriteLayoutDesktop = `
 `;
 const OverwriteLayoutMobile = `
   ${OVERWRITE_UTILITY_FORM_LAYOUT_MOBILE} {
-    padding: ${Styles.token.spacing.md} ${Styles.token.spacing.lg};
+    padding: ${token__namespace.spacing.md} ${token__namespace.spacing.lg};
     order: 1;
     display: block;
     height: auto;
@@ -58,8 +75,8 @@ const FormElementsStyles = `
   .${ELEMENT_UTILITY_FORM} input[type="submit"] {
     border: none;
-    background-color: ${Styles.token.color.red};
-    color: ${Styles.token.color.white};
+    background-color: ${token__namespace.color.red};
+    color: ${token__namespace.color.white};
     font-weight: 700;
     font-size: 12px;
     transition: background ${ANIMATION_OUT_SPEED}ms;
@@ -69,7 +86,7 @@ const FormElementsStyles = `
   .${ELEMENT_UTILITY_FORM} input[type="submit"]:hover,
   .${ELEMENT_UTILITY_FORM} input[type="submit"]:focus {
-    background-color: ${Styles.token.color.redDark};
+    background-color: ${token__namespace.color.redDark};
     transition: background ${ANIMATION_IN_SPEED}ms;
   }
 `;

package/dist/composite/navigation/utility/search.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"search.js","sources":["../../../../source/composite/navigation/utility/search.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\n\ntype TypeUtilitySearchProps = {\n isSearchDomain?: boolean;\n};\n\nconst SEARCH_URL = 'https://search.umd.edu';\nconst ANIMATION_IN_SPEED = 800;\nconst ANIMATION_OUT_SPEED = 400;\nconst LARGE = 1024;\n\nconst ATTRIBUTE_LAYOUT = 'layout';\nconst LAYOUT_DESKTOP = 'desktop';\nconst LAYOUT_MOBILE = 'mobile';\n\nconst IS_LAYOUT_DESKTOP = `[${ATTRIBUTE_LAYOUT}=${LAYOUT_DESKTOP}]`;\nconst IS_LAYOUT_MOBILE = `[${ATTRIBUTE_LAYOUT}=${LAYOUT_MOBILE}]`;\n\nconst ELEMENT_UTILITY_FORM = 'element-utility-form';\nconst ELEMENT_UTILITY_FORM_WRAPPER = 'element-utility-form-wrapper';\n\nconst OVERWRITE_UTILITY_FORM_LAYOUT_DESKTOP = `.${ELEMENT_UTILITY_FORM}${IS_LAYOUT_DESKTOP}`;\nconst OVERWRITE_UTILITY_FORM_LAYOUT_MOBILE = `.${ELEMENT_UTILITY_FORM}${IS_LAYOUT_MOBILE}`;\n\nconst OverwriteLayoutDesktop = `\n ${OVERWRITE_UTILITY_FORM_LAYOUT_DESKTOP} {\n margin: 0;\n padding: 0;\n display: none;\n overflow: hidden;\n min-width: 420px;\n height: 0;\n position: absolute;\n top: 48px;\n right: 0;\n background-color: ${token.color.white};\n transition: height ${ANIMATION_OUT_SPEED}ms;\n }\n\n ${ELEMENT_UTILITY_FORM}[aria-hidden=\"true\"] {\n transition: height ${ANIMATION_OUT_SPEED}ms;\n }\n\n ${ELEMENT_UTILITY_FORM}[aria-hidden=\"false\"] {\n transition: height ${ANIMATION_IN_SPEED}ms;\n }\n`;\n\nconst OverwriteLayoutMobile = `\n ${OVERWRITE_UTILITY_FORM_LAYOUT_MOBILE} {\n padding: ${token.spacing.md} ${token.spacing.lg};\n order: 1;\n display: block;\n height: auto;\n }\n`;\n\n// prettier-ignore\nconst FormElementsStyles = `\n .${ELEMENT_UTILITY_FORM} input[type=\"text\"] {\n width: calc(100% - 120px);\n display: block;\n padding: 0 10px;\n height: 44px;\n font-family: Source Sans,Source Sans Pro,sans-serif;\n font-size: 13px;\n line-height: 1.3;\n border: 1px solid #ccc;\n }\n\n .${ELEMENT_UTILITY_FORM} input[type=\"submit\"] {\n border: none;\n background-color: ${token.color.red};\n color: ${token.color.white};\n font-weight: 700;\n font-size: 12px;\n transition: background ${ANIMATION_OUT_SPEED}ms;\n min-width: 120px;\n height: 44px;\n }\n\n .${ELEMENT_UTILITY_FORM} input[type=\"submit\"]:hover,\n .${ELEMENT_UTILITY_FORM} input[type=\"submit\"]:focus {\n background-color: ${token.color.redDark};\n transition: background ${ANIMATION_IN_SPEED}ms;\n }\n`;\n\n// prettier-ignore\nconst FormWrapperStyles = `\n .${ELEMENT_UTILITY_FORM_WRAPPER} {\n display: flex;\n }\n\n @container (min-width: ${LARGE}px) {\n .${ELEMENT_UTILITY_FORM_WRAPPER} {\n padding: 10px;\n }\n }\n`;\n\n// prettier-ignore\nconst STYLES_NAV_UTILITY_SEARCH = `\n ${FormWrapperStyles}\n ${FormElementsStyles}\n ${OverwriteLayoutDesktop}\n ${OverwriteLayoutMobile}\n`\n\nconst CreateNavUtilitySearch = ({ isSearchDomain }: TypeUtilitySearchProps) =>\n (() => {\n const isDesktop = window.innerWidth >= LARGE;\n const form = document.createElement('form');\n const wrapper = document.createElement('div');\n const inputTextLabel = document.createElement('label');\n const inputText = document.createElement('input');\n const inputSubmit = document.createElement('input');\n\n inputTextLabel.innerHTML = 'Search input';\n inputTextLabel.setAttribute('for', 'input-text');\n inputTextLabel.classList.add('sr-only');\n\n inputText.setAttribute('type', 'text');\n inputText.setAttribute('id', 'input-text');\n inputText.setAttribute('name', 'query');\n inputText.setAttribute(\n 'placeholder',\n 'Search for People, places and things',\n );\n inputText.setAttribute('required', '');\n\n inputSubmit.setAttribute('type', 'submit');\n inputSubmit.value = 'Submit';\n\n wrapper.appendChild(inputTextLabel);\n wrapper.appendChild(inputText);\n wrapper.appendChild(inputSubmit);\n wrapper.classList.add(ELEMENT_UTILITY_FORM_WRAPPER);\n\n form.setAttribute('id', ELEMENT_UTILITY_FORM);\n form.classList.add(ELEMENT_UTILITY_FORM);\n form.addEventListener('submit', (event) => {\n event.preventDefault();\n\n let searchString = `#gsc.tab=0&gsc`;\n\n if (isSearchDomain) {\n searchString += `.q=site:${window.location.hostname} ${inputText.value}`;\n } else {\n searchString += `.q=${inputText.value}`;\n }\n\n searchString += `&gsc.sort=`;\n\n window.open(`${SEARCH_URL}${encodeURI(searchString)}`, '_blank');\n });\n\n if (isDesktop) {\n form.setAttribute('aria-hidden', 'true');\n form.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_DESKTOP);\n } else {\n form.setAttribute('aria-hidden', 'false');\n form.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_MOBILE);\n }\n\n form.appendChild(wrapper);\n\n return form;\n })();\n\nexport default {\n CreateElement: CreateNavUtilitySearch,\n Styles: STYLES_NAV_UTILITY_SEARCH,\n Elements: {\n form: ELEMENT_UTILITY_FORM,\n },\n};\n"],"names":["token"],"mappings":";;AAMA,MAAM,aAAa;AACnB,MAAM,qBAAqB;AAC3B,MAAM,sBAAsB;AAC5B,MAAM,QAAQ;AAEd,MAAM,mBAAmB;AACzB,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AAEtB,MAAM,oBAAoB,IAAI,gBAAgB,IAAI,cAAc;AAChE,MAAM,mBAAmB,IAAI,gBAAgB,IAAI,aAAa;AAE9D,MAAM,uBAAuB;AAC7B,MAAM,+BAA+B;AAErC,MAAM,wCAAwC,IAAI,oBAAoB,GAAG,iBAAiB;AAC1F,MAAM,uCAAuC,IAAI,oBAAoB,GAAG,gBAAgB;AAExF,MAAM,yBAAyB;AAAA,IAC3B,qCAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAUjBA,~~OAAAA~~,MAAM,~~MAAM,~~KAAK;AAAA,yBAChB,mBAAmB;AAAA;AAAA;AAAA,IAGxC,oBAAoB;AAAA,yBACC,mBAAmB;AAAA;AAAA;AAAA,IAGxC,oBAAoB;AAAA,yBACC,kBAAkB;AAAA;AAAA;AAI3C,MAAM,wBAAwB;AAAA,IAC1B,oCAAoC;AAAA,eACzBA,~~OAAAA~~,~~MAAM,~~QAAQ,EAAE,IAAIA,~~OAAAA~~,~~MAAM,~~QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAQnD,MAAM,qBAAqB;AAAA,KACtB,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAWpB,oBAAoB;AAAA;AAAA,wBAEDA,~~OAAAA~~,MAAM,~~MAAM,~~GAAG;AAAA,aAC1BA,~~OAAAA~~,MAAM,~~MAAM,~~KAAK;AAAA;AAAA;AAAA,6BAGD,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,KAK3C,oBAAoB;AAAA,KACpB,oBAAoB;AAAA,wBACDA,~~OAAAA~~,MAAM,~~MAAM,~~OAAO;AAAA,6BACd,kBAAkB;AAAA;AAAA;AAK/C,MAAM,oBAAoB;AAAA,KACrB,4BAA4B;AAAA;AAAA;AAAA;AAAA,2BAIN,KAAK;AAAA,OACzB,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAOnC,MAAM,4BAA4B;AAAA,IAC9B,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,sBAAsB;AAAA,IACtB,qBAAqB;AAAA;AAGzB,MAAM,yBAAyB,CAAC,EAAE,eAAA,OAC/B,MAAM;AACL,QAAM,YAAY,OAAO,cAAc;AACvC,QAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,QAAM,iBAAiB,SAAS,cAAc,OAAO;AACrD,QAAM,YAAY,SAAS,cAAc,OAAO;AAChD,QAAM,cAAc,SAAS,cAAc,OAAO;AAElD,iBAAe,YAAY;AAC3B,iBAAe,aAAa,OAAO,YAAY;AAC/C,iBAAe,UAAU,IAAI,SAAS;AAEtC,YAAU,aAAa,QAAQ,MAAM;AACrC,YAAU,aAAa,MAAM,YAAY;AACzC,YAAU,aAAa,QAAQ,OAAO;AACtC,YAAU;AAAA,IACR;AAAA,IACA;AAAA,EAAA;AAEF,YAAU,aAAa,YAAY,EAAE;AAErC,cAAY,aAAa,QAAQ,QAAQ;AACzC,cAAY,QAAQ;AAEpB,UAAQ,YAAY,cAAc;AAClC,UAAQ,YAAY,SAAS;AAC7B,UAAQ,YAAY,WAAW;AAC/B,UAAQ,UAAU,IAAI,4BAA4B;AAElD,OAAK,aAAa,MAAM,oBAAoB;AAC5C,OAAK,UAAU,IAAI,oBAAoB;AACvC,OAAK,iBAAiB,UAAU,CAAC,UAAU;AACzC,UAAM,eAAA;AAEN,QAAI,eAAe;AAEnB,QAAI,gBAAgB;AAClB,sBAAgB,WAAW,OAAO,SAAS,QAAQ,IAAI,UAAU,KAAK;AAAA,IACxE,OAAO;AACL,sBAAgB,MAAM,UAAU,KAAK;AAAA,IACvC;AAEA,oBAAgB;AAEhB,WAAO,KAAK,GAAG,UAAU,GAAG,UAAU,YAAY,CAAC,IAAI,QAAQ;AAAA,EACjE,CAAC;AAED,MAAI,WAAW;AACb,SAAK,aAAa,eAAe,MAAM;AACvC,SAAK,aAAa,kBAAkB,cAAc;AAAA,EACpD,OAAO;AACL,SAAK,aAAa,eAAe,OAAO;AACxC,SAAK,aAAa,kBAAkB,aAAa;AAAA,EACnD;AAEA,OAAK,YAAY,OAAO;AAExB,SAAO;AACT,GAAA;AAEF,MAAA,gBAAe;AAAA,EACb,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,MAAM;AAAA,EAAA;AAEV;;"}
1	+ {"version":3,"file":"search.js","sources":["../../../../source/composite/navigation/utility/search.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\n\ntype TypeUtilitySearchProps = {\n isSearchDomain?: boolean;\n};\n\nconst SEARCH_URL = 'https://search.umd.edu';\nconst ANIMATION_IN_SPEED = 800;\nconst ANIMATION_OUT_SPEED = 400;\nconst LARGE = 1024;\n\nconst ATTRIBUTE_LAYOUT = 'layout';\nconst LAYOUT_DESKTOP = 'desktop';\nconst LAYOUT_MOBILE = 'mobile';\n\nconst IS_LAYOUT_DESKTOP = `[${ATTRIBUTE_LAYOUT}=${LAYOUT_DESKTOP}]`;\nconst IS_LAYOUT_MOBILE = `[${ATTRIBUTE_LAYOUT}=${LAYOUT_MOBILE}]`;\n\nconst ELEMENT_UTILITY_FORM = 'element-utility-form';\nconst ELEMENT_UTILITY_FORM_WRAPPER = 'element-utility-form-wrapper';\n\nconst OVERWRITE_UTILITY_FORM_LAYOUT_DESKTOP = `.${ELEMENT_UTILITY_FORM}${IS_LAYOUT_DESKTOP}`;\nconst OVERWRITE_UTILITY_FORM_LAYOUT_MOBILE = `.${ELEMENT_UTILITY_FORM}${IS_LAYOUT_MOBILE}`;\n\nconst OverwriteLayoutDesktop = `\n ${OVERWRITE_UTILITY_FORM_LAYOUT_DESKTOP} {\n margin: 0;\n padding: 0;\n display: none;\n overflow: hidden;\n min-width: 420px;\n height: 0;\n position: absolute;\n top: 48px;\n right: 0;\n background-color: ${token.color.white};\n transition: height ${ANIMATION_OUT_SPEED}ms;\n }\n\n ${ELEMENT_UTILITY_FORM}[aria-hidden=\"true\"] {\n transition: height ${ANIMATION_OUT_SPEED}ms;\n }\n\n ${ELEMENT_UTILITY_FORM}[aria-hidden=\"false\"] {\n transition: height ${ANIMATION_IN_SPEED}ms;\n }\n`;\n\nconst OverwriteLayoutMobile = `\n ${OVERWRITE_UTILITY_FORM_LAYOUT_MOBILE} {\n padding: ${token.spacing.md} ${token.spacing.lg};\n order: 1;\n display: block;\n height: auto;\n }\n`;\n\n// prettier-ignore\nconst FormElementsStyles = `\n .${ELEMENT_UTILITY_FORM} input[type=\"text\"] {\n width: calc(100% - 120px);\n display: block;\n padding: 0 10px;\n height: 44px;\n font-family: Source Sans,Source Sans Pro,sans-serif;\n font-size: 13px;\n line-height: 1.3;\n border: 1px solid #ccc;\n }\n\n .${ELEMENT_UTILITY_FORM} input[type=\"submit\"] {\n border: none;\n background-color: ${token.color.red};\n color: ${token.color.white};\n font-weight: 700;\n font-size: 12px;\n transition: background ${ANIMATION_OUT_SPEED}ms;\n min-width: 120px;\n height: 44px;\n }\n\n .${ELEMENT_UTILITY_FORM} input[type=\"submit\"]:hover,\n .${ELEMENT_UTILITY_FORM} input[type=\"submit\"]:focus {\n background-color: ${token.color.redDark};\n transition: background ${ANIMATION_IN_SPEED}ms;\n }\n`;\n\n// prettier-ignore\nconst FormWrapperStyles = `\n .${ELEMENT_UTILITY_FORM_WRAPPER} {\n display: flex;\n }\n\n @container (min-width: ${LARGE}px) {\n .${ELEMENT_UTILITY_FORM_WRAPPER} {\n padding: 10px;\n }\n }\n`;\n\n// prettier-ignore\nconst STYLES_NAV_UTILITY_SEARCH = `\n ${FormWrapperStyles}\n ${FormElementsStyles}\n ${OverwriteLayoutDesktop}\n ${OverwriteLayoutMobile}\n`\n\nconst CreateNavUtilitySearch = ({ isSearchDomain }: TypeUtilitySearchProps) =>\n (() => {\n const isDesktop = window.innerWidth >= LARGE;\n const form = document.createElement('form');\n const wrapper = document.createElement('div');\n const inputTextLabel = document.createElement('label');\n const inputText = document.createElement('input');\n const inputSubmit = document.createElement('input');\n\n inputTextLabel.innerHTML = 'Search input';\n inputTextLabel.setAttribute('for', 'input-text');\n inputTextLabel.classList.add('sr-only');\n\n inputText.setAttribute('type', 'text');\n inputText.setAttribute('id', 'input-text');\n inputText.setAttribute('name', 'query');\n inputText.setAttribute(\n 'placeholder',\n 'Search for People, places and things',\n );\n inputText.setAttribute('required', '');\n\n inputSubmit.setAttribute('type', 'submit');\n inputSubmit.value = 'Submit';\n\n wrapper.appendChild(inputTextLabel);\n wrapper.appendChild(inputText);\n wrapper.appendChild(inputSubmit);\n wrapper.classList.add(ELEMENT_UTILITY_FORM_WRAPPER);\n\n form.setAttribute('id', ELEMENT_UTILITY_FORM);\n form.classList.add(ELEMENT_UTILITY_FORM);\n form.addEventListener('submit', (event) => {\n event.preventDefault();\n\n let searchString = `#gsc.tab=0&gsc`;\n\n if (isSearchDomain) {\n searchString += `.q=site:${window.location.hostname} ${inputText.value}`;\n } else {\n searchString += `.q=${inputText.value}`;\n }\n\n searchString += `&gsc.sort=`;\n\n window.open(`${SEARCH_URL}${encodeURI(searchString)}`, '_blank');\n });\n\n if (isDesktop) {\n form.setAttribute('aria-hidden', 'true');\n form.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_DESKTOP);\n } else {\n form.setAttribute('aria-hidden', 'false');\n form.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_MOBILE);\n }\n\n form.appendChild(wrapper);\n\n return form;\n })();\n\nexport default {\n CreateElement: CreateNavUtilitySearch,\n Styles: STYLES_NAV_UTILITY_SEARCH,\n Elements: {\n form: ELEMENT_UTILITY_FORM,\n },\n};\n"],"names":["token"],"mappings":"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"}

package/dist/composite/navigation/utility/search.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-import { token } from "@universityofmaryland/web-styles-library";
+import * as token from "@universityofmaryland/web-styles-library/token";
 const SEARCH_URL = "https://search.umd.edu";
 const ANIMATION_IN_SPEED = 800;
 const ANIMATION_OUT_SPEED = 400;

package/dist/composite/navigation/utility/search.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"search.mjs","sources":["../../../../source/composite/navigation/utility/search.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\n\ntype TypeUtilitySearchProps = {\n isSearchDomain?: boolean;\n};\n\nconst SEARCH_URL = 'https://search.umd.edu';\nconst ANIMATION_IN_SPEED = 800;\nconst ANIMATION_OUT_SPEED = 400;\nconst LARGE = 1024;\n\nconst ATTRIBUTE_LAYOUT = 'layout';\nconst LAYOUT_DESKTOP = 'desktop';\nconst LAYOUT_MOBILE = 'mobile';\n\nconst IS_LAYOUT_DESKTOP = `[${ATTRIBUTE_LAYOUT}=${LAYOUT_DESKTOP}]`;\nconst IS_LAYOUT_MOBILE = `[${ATTRIBUTE_LAYOUT}=${LAYOUT_MOBILE}]`;\n\nconst ELEMENT_UTILITY_FORM = 'element-utility-form';\nconst ELEMENT_UTILITY_FORM_WRAPPER = 'element-utility-form-wrapper';\n\nconst OVERWRITE_UTILITY_FORM_LAYOUT_DESKTOP = `.${ELEMENT_UTILITY_FORM}${IS_LAYOUT_DESKTOP}`;\nconst OVERWRITE_UTILITY_FORM_LAYOUT_MOBILE = `.${ELEMENT_UTILITY_FORM}${IS_LAYOUT_MOBILE}`;\n\nconst OverwriteLayoutDesktop = `\n ${OVERWRITE_UTILITY_FORM_LAYOUT_DESKTOP} {\n margin: 0;\n padding: 0;\n display: none;\n overflow: hidden;\n min-width: 420px;\n height: 0;\n position: absolute;\n top: 48px;\n right: 0;\n background-color: ${token.color.white};\n transition: height ${ANIMATION_OUT_SPEED}ms;\n }\n\n ${ELEMENT_UTILITY_FORM}[aria-hidden=\"true\"] {\n transition: height ${ANIMATION_OUT_SPEED}ms;\n }\n\n ${ELEMENT_UTILITY_FORM}[aria-hidden=\"false\"] {\n transition: height ${ANIMATION_IN_SPEED}ms;\n }\n`;\n\nconst OverwriteLayoutMobile = `\n ${OVERWRITE_UTILITY_FORM_LAYOUT_MOBILE} {\n padding: ${token.spacing.md} ${token.spacing.lg};\n order: 1;\n display: block;\n height: auto;\n }\n`;\n\n// prettier-ignore\nconst FormElementsStyles = `\n .${ELEMENT_UTILITY_FORM} input[type=\"text\"] {\n width: calc(100% - 120px);\n display: block;\n padding: 0 10px;\n height: 44px;\n font-family: Source Sans,Source Sans Pro,sans-serif;\n font-size: 13px;\n line-height: 1.3;\n border: 1px solid #ccc;\n }\n\n .${ELEMENT_UTILITY_FORM} input[type=\"submit\"] {\n border: none;\n background-color: ${token.color.red};\n color: ${token.color.white};\n font-weight: 700;\n font-size: 12px;\n transition: background ${ANIMATION_OUT_SPEED}ms;\n min-width: 120px;\n height: 44px;\n }\n\n .${ELEMENT_UTILITY_FORM} input[type=\"submit\"]:hover,\n .${ELEMENT_UTILITY_FORM} input[type=\"submit\"]:focus {\n background-color: ${token.color.redDark};\n transition: background ${ANIMATION_IN_SPEED}ms;\n }\n`;\n\n// prettier-ignore\nconst FormWrapperStyles = `\n .${ELEMENT_UTILITY_FORM_WRAPPER} {\n display: flex;\n }\n\n @container (min-width: ${LARGE}px) {\n .${ELEMENT_UTILITY_FORM_WRAPPER} {\n padding: 10px;\n }\n }\n`;\n\n// prettier-ignore\nconst STYLES_NAV_UTILITY_SEARCH = `\n ${FormWrapperStyles}\n ${FormElementsStyles}\n ${OverwriteLayoutDesktop}\n ${OverwriteLayoutMobile}\n`\n\nconst CreateNavUtilitySearch = ({ isSearchDomain }: TypeUtilitySearchProps) =>\n (() => {\n const isDesktop = window.innerWidth >= LARGE;\n const form = document.createElement('form');\n const wrapper = document.createElement('div');\n const inputTextLabel = document.createElement('label');\n const inputText = document.createElement('input');\n const inputSubmit = document.createElement('input');\n\n inputTextLabel.innerHTML = 'Search input';\n inputTextLabel.setAttribute('for', 'input-text');\n inputTextLabel.classList.add('sr-only');\n\n inputText.setAttribute('type', 'text');\n inputText.setAttribute('id', 'input-text');\n inputText.setAttribute('name', 'query');\n inputText.setAttribute(\n 'placeholder',\n 'Search for People, places and things',\n );\n inputText.setAttribute('required', '');\n\n inputSubmit.setAttribute('type', 'submit');\n inputSubmit.value = 'Submit';\n\n wrapper.appendChild(inputTextLabel);\n wrapper.appendChild(inputText);\n wrapper.appendChild(inputSubmit);\n wrapper.classList.add(ELEMENT_UTILITY_FORM_WRAPPER);\n\n form.setAttribute('id', ELEMENT_UTILITY_FORM);\n form.classList.add(ELEMENT_UTILITY_FORM);\n form.addEventListener('submit', (event) => {\n event.preventDefault();\n\n let searchString = `#gsc.tab=0&gsc`;\n\n if (isSearchDomain) {\n searchString += `.q=site:${window.location.hostname} ${inputText.value}`;\n } else {\n searchString += `.q=${inputText.value}`;\n }\n\n searchString += `&gsc.sort=`;\n\n window.open(`${SEARCH_URL}${encodeURI(searchString)}`, '_blank');\n });\n\n if (isDesktop) {\n form.setAttribute('aria-hidden', 'true');\n form.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_DESKTOP);\n } else {\n form.setAttribute('aria-hidden', 'false');\n form.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_MOBILE);\n }\n\n form.appendChild(wrapper);\n\n return form;\n })();\n\nexport default {\n CreateElement: CreateNavUtilitySearch,\n Styles: STYLES_NAV_UTILITY_SEARCH,\n Elements: {\n form: ELEMENT_UTILITY_FORM,\n },\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"search.mjs","sources":["../../../../source/composite/navigation/utility/search.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\n\ntype TypeUtilitySearchProps = {\n isSearchDomain?: boolean;\n};\n\nconst SEARCH_URL = 'https://search.umd.edu';\nconst ANIMATION_IN_SPEED = 800;\nconst ANIMATION_OUT_SPEED = 400;\nconst LARGE = 1024;\n\nconst ATTRIBUTE_LAYOUT = 'layout';\nconst LAYOUT_DESKTOP = 'desktop';\nconst LAYOUT_MOBILE = 'mobile';\n\nconst IS_LAYOUT_DESKTOP = `[${ATTRIBUTE_LAYOUT}=${LAYOUT_DESKTOP}]`;\nconst IS_LAYOUT_MOBILE = `[${ATTRIBUTE_LAYOUT}=${LAYOUT_MOBILE}]`;\n\nconst ELEMENT_UTILITY_FORM = 'element-utility-form';\nconst ELEMENT_UTILITY_FORM_WRAPPER = 'element-utility-form-wrapper';\n\nconst OVERWRITE_UTILITY_FORM_LAYOUT_DESKTOP = `.${ELEMENT_UTILITY_FORM}${IS_LAYOUT_DESKTOP}`;\nconst OVERWRITE_UTILITY_FORM_LAYOUT_MOBILE = `.${ELEMENT_UTILITY_FORM}${IS_LAYOUT_MOBILE}`;\n\nconst OverwriteLayoutDesktop = `\n ${OVERWRITE_UTILITY_FORM_LAYOUT_DESKTOP} {\n margin: 0;\n padding: 0;\n display: none;\n overflow: hidden;\n min-width: 420px;\n height: 0;\n position: absolute;\n top: 48px;\n right: 0;\n background-color: ${token.color.white};\n transition: height ${ANIMATION_OUT_SPEED}ms;\n }\n\n ${ELEMENT_UTILITY_FORM}[aria-hidden=\"true\"] {\n transition: height ${ANIMATION_OUT_SPEED}ms;\n }\n\n ${ELEMENT_UTILITY_FORM}[aria-hidden=\"false\"] {\n transition: height ${ANIMATION_IN_SPEED}ms;\n }\n`;\n\nconst OverwriteLayoutMobile = `\n ${OVERWRITE_UTILITY_FORM_LAYOUT_MOBILE} {\n padding: ${token.spacing.md} ${token.spacing.lg};\n order: 1;\n display: block;\n height: auto;\n }\n`;\n\n// prettier-ignore\nconst FormElementsStyles = `\n .${ELEMENT_UTILITY_FORM} input[type=\"text\"] {\n width: calc(100% - 120px);\n display: block;\n padding: 0 10px;\n height: 44px;\n font-family: Source Sans,Source Sans Pro,sans-serif;\n font-size: 13px;\n line-height: 1.3;\n border: 1px solid #ccc;\n }\n\n .${ELEMENT_UTILITY_FORM} input[type=\"submit\"] {\n border: none;\n background-color: ${token.color.red};\n color: ${token.color.white};\n font-weight: 700;\n font-size: 12px;\n transition: background ${ANIMATION_OUT_SPEED}ms;\n min-width: 120px;\n height: 44px;\n }\n\n .${ELEMENT_UTILITY_FORM} input[type=\"submit\"]:hover,\n .${ELEMENT_UTILITY_FORM} input[type=\"submit\"]:focus {\n background-color: ${token.color.redDark};\n transition: background ${ANIMATION_IN_SPEED}ms;\n }\n`;\n\n// prettier-ignore\nconst FormWrapperStyles = `\n .${ELEMENT_UTILITY_FORM_WRAPPER} {\n display: flex;\n }\n\n @container (min-width: ${LARGE}px) {\n .${ELEMENT_UTILITY_FORM_WRAPPER} {\n padding: 10px;\n }\n }\n`;\n\n// prettier-ignore\nconst STYLES_NAV_UTILITY_SEARCH = `\n ${FormWrapperStyles}\n ${FormElementsStyles}\n ${OverwriteLayoutDesktop}\n ${OverwriteLayoutMobile}\n`\n\nconst CreateNavUtilitySearch = ({ isSearchDomain }: TypeUtilitySearchProps) =>\n (() => {\n const isDesktop = window.innerWidth >= LARGE;\n const form = document.createElement('form');\n const wrapper = document.createElement('div');\n const inputTextLabel = document.createElement('label');\n const inputText = document.createElement('input');\n const inputSubmit = document.createElement('input');\n\n inputTextLabel.innerHTML = 'Search input';\n inputTextLabel.setAttribute('for', 'input-text');\n inputTextLabel.classList.add('sr-only');\n\n inputText.setAttribute('type', 'text');\n inputText.setAttribute('id', 'input-text');\n inputText.setAttribute('name', 'query');\n inputText.setAttribute(\n 'placeholder',\n 'Search for People, places and things',\n );\n inputText.setAttribute('required', '');\n\n inputSubmit.setAttribute('type', 'submit');\n inputSubmit.value = 'Submit';\n\n wrapper.appendChild(inputTextLabel);\n wrapper.appendChild(inputText);\n wrapper.appendChild(inputSubmit);\n wrapper.classList.add(ELEMENT_UTILITY_FORM_WRAPPER);\n\n form.setAttribute('id', ELEMENT_UTILITY_FORM);\n form.classList.add(ELEMENT_UTILITY_FORM);\n form.addEventListener('submit', (event) => {\n event.preventDefault();\n\n let searchString = `#gsc.tab=0&gsc`;\n\n if (isSearchDomain) {\n searchString += `.q=site:${window.location.hostname} ${inputText.value}`;\n } else {\n searchString += `.q=${inputText.value}`;\n }\n\n searchString += `&gsc.sort=`;\n\n window.open(`${SEARCH_URL}${encodeURI(searchString)}`, '_blank');\n });\n\n if (isDesktop) {\n form.setAttribute('aria-hidden', 'true');\n form.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_DESKTOP);\n } else {\n form.setAttribute('aria-hidden', 'false');\n form.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_MOBILE);\n }\n\n form.appendChild(wrapper);\n\n return form;\n })();\n\nexport default {\n CreateElement: CreateNavUtilitySearch,\n Styles: STYLES_NAV_UTILITY_SEARCH,\n Elements: {\n form: ELEMENT_UTILITY_FORM,\n },\n};\n"],"names":[],"mappings":"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"}

package/dist/composite/pathway/_common.js CHANGED Viewed

@@ -2,20 +2,31 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Styles = require("@universityofmaryland/web-styles-library");
 const index = require("../../model/elements/index.js");
-require("../../node_modules/postcss/lib/postcss.js");
-require("../../node_modules/postcss-nesting/dist/index.js");
-require("../../node_modules/postcss-js/index.js");
+require("@universityofmaryland/web-styles-library/token");
+require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-utilities-library/media");
+require("@universityofmaryland/web-utilities-library/dom");
+require("@universityofmaryland/web-icons-library/controls");
+require("@universityofmaryland/web-icons-library/communication");
+require("@universityofmaryland/web-icons-library/files");
+require("@universityofmaryland/web-icons-library/brand");
+require("@universityofmaryland/web-icons-library/arrows");
 require("../../atomic/animations/actions/indicator.js");
 require("../../atomic/animations/brand/chevron-scroll.js");
 require("../../atomic/animations/brand/card-stack.js");
 const background = require("../../atomic/assets/image/background.js");
+require("@universityofmaryland/web-utilities-library/performance");
 const observedAutoPlay = require("../../atomic/assets/video/observed-auto-play.js");
+require("@universityofmaryland/web-icons-library/location");
+require("@universityofmaryland/web-icons-library/calendar");
 require("../../atomic/layout/block/stacked.js");
 require("../../atomic/layout/overlay/modal.js");
 require("../../atomic/layout/person/columns.js");
+require("@universityofmaryland/web-icons-library/social");
 require("../../atomic/text-lockup/date.js");
 const medium = require("../../atomic/text-lockup/medium.js");
 require("../../atomic/text-lockup/small.js");
+require("@universityofmaryland/web-styles-library/typography");
 const headline = require("../../model/elements/headline.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/composite/pathway/_common.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"_common.js","sources":["../../../source/composite/pathway/_common.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport * as Atomic from 'atomic';\nimport { type PathwayTextLockupProps, type PathwayAssetProps } from './_types';\n\nexport const createCompositeHeadline = ({\n headline,\n isThemeDark,\n isThemeMaryland,\n}: Pick<\n PathwayTextLockupProps,\n 'headline' \| 'isThemeDark' \| 'isThemeMaryland'\n>) => {\n const characterCount = headline?.textContent?.trim().length \|\| 0;\n const isOverwriteHeadline = characterCount > 30;\n\n if (!headline) return null;\n\n const desktopStyles = {\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(isOverwriteHeadline && {\n fontSize: '40px',\n }),\n },\n };\n\n return ElementModel.headline.sansLargest({\n element: headline,\n isThemeDark: isThemeDark \|\| isThemeMaryland,\n elementStyles: {\n element: {\n fontWeight: 800,\n textTransform: 'uppercase',\n textWrap: 'balance',\n color: Styles.token.color.black,\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n });\n};\n\nexport const createCompositeStat = ({\n stats,\n}: Pick<PathwayTextLockupProps, 'stats'>) => {\n const mediumSize = 800;\n\n if (!stats) return null;\n\n const statWrapper = ElementModel.createDiv({\n className: 'text-lockup-medium-stats',\n elementStyles: {\n element: {\n marginTop: Styles.token.spacing.lg,\n\n [`&:has(> :nth-child(2))`]: {\n display: `grid`,\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n marginTop: Styles.token.spacing.lg,\n paddingTop: Styles.token.spacing.md,\n borderTop: `1px solid ${Styles.token.color.gray.light}`,\n },\n\n [`@container (min-width: ${mediumSize}px)`]: {\n marginTop: Styles.token.spacing['2xl'],\n\n [`&:has(> :nth-child(2))`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n gridTemplateColumns: `repeat(2, 1fr)`,\n },\n },\n },\n },\n });\n\n statWrapper.element.innerHTML = stats.innerHTML;\n\n return statWrapper;\n};\n\nexport const createTextLockupMedium = (\n props: Pick<\n PathwayTextLockupProps,\n \| 'stats'\n \| 'actions'\n \| 'eventDetails'\n \| 'eyebrow'\n \| 'headline'\n \| 'stats'\n \| 'text'\n \| 'isThemeDark'\n \| 'isThemeMaryland'\n >,\n) =>\n Atomic.textLockup.medium({\n ...props,\n ribbon: props.eyebrow,\n compositeHeadline: createCompositeHeadline(props),\n compositeStats: createCompositeStat(props),\n });\n\nexport const createAssetContent = (\n props: Pick<\n PathwayAssetProps,\n 'dateSign' \| 'image' \| 'video' \| 'isImageScaled'\n >,\n) => {\n const { dateSign, image, video, isImageScaled = true } = props;\n const children = [];\n\n if (video) {\n children.push(\n Atomic.assets.video.observedAutoPlay({\n video,\n isScaled: isImageScaled,\n additionalElementStyles: {\n [`& video`]: {\n objectFit: 'cover',\n width: '100%',\n height: '100%',\n },\n },\n }),\n );\n }\n\n if (!video && image) {\n children.push(\n Atomic.assets.image.background({\n element: image,\n isScaled: isImageScaled,\n isShowCaption: true,\n isGifAllowed: true,\n dateSign,\n }),\n );\n }\n\n return ElementModel.createDiv({\n className: 'pathway-image-container-wrapper',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n overflow: 'hidden',\n height: '100%',\n width: '100%',\n display: 'grid',\n\n [`&:has(.image-container)`]: {\n alignItems: 'center',\n },\n },\n },\n });\n};\n"],"names":["headline","Styles","ElementModel.headline.sansLargest","ElementModel.createDiv","Atomic.textLockup.medium","Atomic.assets.video.observedAutoPlay","Atomic.assets.image.background"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"_common.js","sources":["../../../source/composite/pathway/_common.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport * as Atomic from 'atomic';\nimport { type PathwayTextLockupProps, type PathwayAssetProps } from './_types';\n\nexport const createCompositeHeadline = ({\n headline,\n isThemeDark,\n isThemeMaryland,\n}: Pick<\n PathwayTextLockupProps,\n 'headline' \| 'isThemeDark' \| 'isThemeMaryland'\n>) => {\n const characterCount = headline?.textContent?.trim().length \|\| 0;\n const isOverwriteHeadline = characterCount > 30;\n\n if (!headline) return null;\n\n const desktopStyles = {\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(isOverwriteHeadline && {\n fontSize: '40px',\n }),\n },\n };\n\n return ElementModel.headline.sansLargest({\n element: headline,\n isThemeDark: isThemeDark \|\| isThemeMaryland,\n elementStyles: {\n element: {\n fontWeight: 800,\n textTransform: 'uppercase',\n textWrap: 'balance',\n color: Styles.token.color.black,\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n });\n};\n\nexport const createCompositeStat = ({\n stats,\n}: Pick<PathwayTextLockupProps, 'stats'>) => {\n const mediumSize = 800;\n\n if (!stats) return null;\n\n const statWrapper = ElementModel.createDiv({\n className: 'text-lockup-medium-stats',\n elementStyles: {\n element: {\n marginTop: Styles.token.spacing.lg,\n\n [`&:has(> :nth-child(2))`]: {\n display: `grid`,\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n marginTop: Styles.token.spacing.lg,\n paddingTop: Styles.token.spacing.md,\n borderTop: `1px solid ${Styles.token.color.gray.light}`,\n },\n\n [`@container (min-width: ${mediumSize}px)`]: {\n marginTop: Styles.token.spacing['2xl'],\n\n [`&:has(> :nth-child(2))`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n gridTemplateColumns: `repeat(2, 1fr)`,\n },\n },\n },\n },\n });\n\n statWrapper.element.innerHTML = stats.innerHTML;\n\n return statWrapper;\n};\n\nexport const createTextLockupMedium = (\n props: Pick<\n PathwayTextLockupProps,\n \| 'stats'\n \| 'actions'\n \| 'eventDetails'\n \| 'eyebrow'\n \| 'headline'\n \| 'stats'\n \| 'text'\n \| 'isThemeDark'\n \| 'isThemeMaryland'\n >,\n) =>\n Atomic.textLockup.medium({\n ...props,\n ribbon: props.eyebrow,\n compositeHeadline: createCompositeHeadline(props),\n compositeStats: createCompositeStat(props),\n });\n\nexport const createAssetContent = (\n props: Pick<\n PathwayAssetProps,\n 'dateSign' \| 'image' \| 'video' \| 'isImageScaled'\n >,\n) => {\n const { dateSign, image, video, isImageScaled = true } = props;\n const children = [];\n\n if (video) {\n children.push(\n Atomic.assets.video.observedAutoPlay({\n video,\n isScaled: isImageScaled,\n additionalElementStyles: {\n [`& video`]: {\n objectFit: 'cover',\n width: '100%',\n height: '100%',\n },\n },\n }),\n );\n }\n\n if (!video && image) {\n children.push(\n Atomic.assets.image.background({\n element: image,\n isScaled: isImageScaled,\n isShowCaption: true,\n isGifAllowed: true,\n dateSign,\n }),\n );\n }\n\n return ElementModel.createDiv({\n className: 'pathway-image-container-wrapper',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n overflow: 'hidden',\n height: '100%',\n width: '100%',\n display: 'grid',\n\n [`&:has(.image-container)`]: {\n alignItems: 'center',\n },\n },\n },\n });\n};\n"],"names":["headline","Styles","ElementModel.headline.sansLargest","ElementModel.createDiv","Atomic.textLockup.medium","Atomic.assets.video.observedAutoPlay","Atomic.assets.image.background"],"mappings":"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"}

package/dist/composite/pathway/_common.mjs CHANGED Viewed

@@ -1,19 +1,30 @@
 import * as Styles from "@universityofmaryland/web-styles-library";
 import { createDiv } from "../../model/elements/index.mjs";
-import "../../node_modules/postcss/lib/postcss.mjs";
-import "../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../node_modules/postcss-js/index.mjs";
+import "@universityofmaryland/web-styles-library/token";
+import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-utilities-library/media";
+import "@universityofmaryland/web-utilities-library/dom";
+import "@universityofmaryland/web-icons-library/controls";
+import "@universityofmaryland/web-icons-library/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
+import "@universityofmaryland/web-icons-library/arrows";
 import "../../atomic/animations/actions/indicator.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../atomic/animations/brand/card-stack.mjs";
 import imageContainer from "../../atomic/assets/image/background.mjs";
+import "@universityofmaryland/web-utilities-library/performance";
 import observedAutoPlay from "../../atomic/assets/video/observed-auto-play.mjs";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
 import "../../atomic/layout/block/stacked.mjs";
 import "../../atomic/layout/overlay/modal.mjs";
 import "../../atomic/layout/person/columns.mjs";
+import "@universityofmaryland/web-icons-library/social";
 import "../../atomic/text-lockup/date.mjs";
 import medium from "../../atomic/text-lockup/medium.mjs";
 import "../../atomic/text-lockup/small.mjs";
+import "@universityofmaryland/web-styles-library/typography";
 import { sansLargest } from "../../model/elements/headline.mjs";
 const createCompositeHeadline = ({
   headline,

package/dist/composite/pathway/_common.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"_common.mjs","sources":["../../../source/composite/pathway/_common.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport * as Atomic from 'atomic';\nimport { type PathwayTextLockupProps, type PathwayAssetProps } from './_types';\n\nexport const createCompositeHeadline = ({\n headline,\n isThemeDark,\n isThemeMaryland,\n}: Pick<\n PathwayTextLockupProps,\n 'headline' \| 'isThemeDark' \| 'isThemeMaryland'\n>) => {\n const characterCount = headline?.textContent?.trim().length \|\| 0;\n const isOverwriteHeadline = characterCount > 30;\n\n if (!headline) return null;\n\n const desktopStyles = {\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(isOverwriteHeadline && {\n fontSize: '40px',\n }),\n },\n };\n\n return ElementModel.headline.sansLargest({\n element: headline,\n isThemeDark: isThemeDark \|\| isThemeMaryland,\n elementStyles: {\n element: {\n fontWeight: 800,\n textTransform: 'uppercase',\n textWrap: 'balance',\n color: Styles.token.color.black,\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n });\n};\n\nexport const createCompositeStat = ({\n stats,\n}: Pick<PathwayTextLockupProps, 'stats'>) => {\n const mediumSize = 800;\n\n if (!stats) return null;\n\n const statWrapper = ElementModel.createDiv({\n className: 'text-lockup-medium-stats',\n elementStyles: {\n element: {\n marginTop: Styles.token.spacing.lg,\n\n [`&:has(> :nth-child(2))`]: {\n display: `grid`,\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n marginTop: Styles.token.spacing.lg,\n paddingTop: Styles.token.spacing.md,\n borderTop: `1px solid ${Styles.token.color.gray.light}`,\n },\n\n [`@container (min-width: ${mediumSize}px)`]: {\n marginTop: Styles.token.spacing['2xl'],\n\n [`&:has(> :nth-child(2))`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n gridTemplateColumns: `repeat(2, 1fr)`,\n },\n },\n },\n },\n });\n\n statWrapper.element.innerHTML = stats.innerHTML;\n\n return statWrapper;\n};\n\nexport const createTextLockupMedium = (\n props: Pick<\n PathwayTextLockupProps,\n \| 'stats'\n \| 'actions'\n \| 'eventDetails'\n \| 'eyebrow'\n \| 'headline'\n \| 'stats'\n \| 'text'\n \| 'isThemeDark'\n \| 'isThemeMaryland'\n >,\n) =>\n Atomic.textLockup.medium({\n ...props,\n ribbon: props.eyebrow,\n compositeHeadline: createCompositeHeadline(props),\n compositeStats: createCompositeStat(props),\n });\n\nexport const createAssetContent = (\n props: Pick<\n PathwayAssetProps,\n 'dateSign' \| 'image' \| 'video' \| 'isImageScaled'\n >,\n) => {\n const { dateSign, image, video, isImageScaled = true } = props;\n const children = [];\n\n if (video) {\n children.push(\n Atomic.assets.video.observedAutoPlay({\n video,\n isScaled: isImageScaled,\n additionalElementStyles: {\n [`& video`]: {\n objectFit: 'cover',\n width: '100%',\n height: '100%',\n },\n },\n }),\n );\n }\n\n if (!video && image) {\n children.push(\n Atomic.assets.image.background({\n element: image,\n isScaled: isImageScaled,\n isShowCaption: true,\n isGifAllowed: true,\n dateSign,\n }),\n );\n }\n\n return ElementModel.createDiv({\n className: 'pathway-image-container-wrapper',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n overflow: 'hidden',\n height: '100%',\n width: '100%',\n display: 'grid',\n\n [`&:has(.image-container)`]: {\n alignItems: 'center',\n },\n },\n },\n });\n};\n"],"names":["ElementModel.headline.sansLargest","ElementModel.createDiv","Atomic.textLockup.medium","Atomic.assets.video.observedAutoPlay","Atomic.assets.image.background"],"mappings":"~~;;;;;;;;;;;;;;;;;~~AAKO,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,MAGM;AACJ,QAAM,iBAAiB,UAAU,aAAa,KAAA,EAAO,UAAU;AAC/D,QAAM,sBAAsB,iBAAiB;AAE7C,MAAI,CAAC,SAAU,QAAO;AAEtB,QAAM,gBAAgB;AAAA,IACpB,CAAC,eAAe,OAAO,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,MAC1D,GAAI,uBAAuB;AAAA,QACzB,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF;AAGF,SAAOA,YAAkC;AAAA,IACvC,SAAS;AAAA,IACT,aAAa,eAAe;AAAA,IAC5B,eAAe;AAAA,MACb,SAAS;AAAA,QACP,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,UAAU;AAAA,QACV,OAAO,OAAO,MAAM,MAAM;AAAA,QAC1B,GAAG;AAAA,MAAA;AAAA,MAEL,cAAc;AAAA,QACZ,WAAW,OAAO,MAAM,QAAQ;AAAA,MAAA;AAAA,IAClC;AAAA,EACF,CACD;AACH;AAEO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AACF,MAA6C;AAC3C,QAAM,aAAa;AAEnB,MAAI,CAAC,MAAO,QAAO;AAEnB,QAAM,cAAcC,UAAuB;AAAA,IACzC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW,OAAO,MAAM,QAAQ;AAAA,QAEhC,CAAC,yBAAyB,GAAG;AAAA,UAC3B,SAAS;AAAA,UACT,SAAS,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,QAAA;AAAA,QAGrC,CAAC,0BAA0B,aAAa,CAAC,KAAK,GAAG;AAAA,UAC/C,WAAW,OAAO,MAAM,QAAQ;AAAA,UAChC,YAAY,OAAO,MAAM,QAAQ;AAAA,UACjC,WAAW,aAAa,OAAO,MAAM,MAAM,KAAK,KAAK;AAAA,QAAA;AAAA,QAGvD,CAAC,0BAA0B,UAAU,KAAK,GAAG;AAAA,UAC3C,WAAW,OAAO,MAAM,QAAQ,KAAK;AAAA,UAErC,CAAC,yBAAyB,GAAG;AAAA,YAC3B,SAAS,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,YACnC,qBAAqB;AAAA,UAAA;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,cAAY,QAAQ,YAAY,MAAM;AAEtC,SAAO;AACT;AAEO,MAAM,yBAAyB,CACpC,UAaAC,OAAyB;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,MAAM;AAAA,EACd,mBAAmB,wBAAwB,KAAK;AAAA,EAChD,gBAAgB,oBAAoB,KAAK;AAC3C,CAAC;AAEI,MAAM,qBAAqB,CAChC,UAIG;AACH,QAAM,EAAE,UAAU,OAAO,OAAO,gBAAgB,SAAS;AACzD,QAAM,WAAW,CAAA;AAEjB,MAAI,OAAO;AACT,aAAS;AAAA,MACPC,iBAAqC;AAAA,QACnC;AAAA,QACA,UAAU;AAAA,QACV,yBAAyB;AAAA,UACvB,CAAC,SAAS,GAAG;AAAA,YACX,WAAW;AAAA,YACX,OAAO;AAAA,YACP,QAAQ;AAAA,UAAA;AAAA,QACV;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,CAAC,SAAS,OAAO;AACnB,aAAS;AAAA,MACPC,eAA+B;AAAA,QAC7B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAe;AAAA,QACf,cAAc;AAAA,QACd;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOH,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,QAET,CAAC,yBAAyB,GAAG;AAAA,UAC3B,YAAY;AAAA,QAAA;AAAA,MACd;AAAA,IACF;AAAA,EACF,CACD;AACH;"}
1	+ {"version":3,"file":"_common.mjs","sources":["../../../source/composite/pathway/_common.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport * as Atomic from 'atomic';\nimport { type PathwayTextLockupProps, type PathwayAssetProps } from './_types';\n\nexport const createCompositeHeadline = ({\n headline,\n isThemeDark,\n isThemeMaryland,\n}: Pick<\n PathwayTextLockupProps,\n 'headline' \| 'isThemeDark' \| 'isThemeMaryland'\n>) => {\n const characterCount = headline?.textContent?.trim().length \|\| 0;\n const isOverwriteHeadline = characterCount > 30;\n\n if (!headline) return null;\n\n const desktopStyles = {\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(isOverwriteHeadline && {\n fontSize: '40px',\n }),\n },\n };\n\n return ElementModel.headline.sansLargest({\n element: headline,\n isThemeDark: isThemeDark \|\| isThemeMaryland,\n elementStyles: {\n element: {\n fontWeight: 800,\n textTransform: 'uppercase',\n textWrap: 'balance',\n color: Styles.token.color.black,\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n });\n};\n\nexport const createCompositeStat = ({\n stats,\n}: Pick<PathwayTextLockupProps, 'stats'>) => {\n const mediumSize = 800;\n\n if (!stats) return null;\n\n const statWrapper = ElementModel.createDiv({\n className: 'text-lockup-medium-stats',\n elementStyles: {\n element: {\n marginTop: Styles.token.spacing.lg,\n\n [`&:has(> :nth-child(2))`]: {\n display: `grid`,\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n marginTop: Styles.token.spacing.lg,\n paddingTop: Styles.token.spacing.md,\n borderTop: `1px solid ${Styles.token.color.gray.light}`,\n },\n\n [`@container (min-width: ${mediumSize}px)`]: {\n marginTop: Styles.token.spacing['2xl'],\n\n [`&:has(> :nth-child(2))`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n gridTemplateColumns: `repeat(2, 1fr)`,\n },\n },\n },\n },\n });\n\n statWrapper.element.innerHTML = stats.innerHTML;\n\n return statWrapper;\n};\n\nexport const createTextLockupMedium = (\n props: Pick<\n PathwayTextLockupProps,\n \| 'stats'\n \| 'actions'\n \| 'eventDetails'\n \| 'eyebrow'\n \| 'headline'\n \| 'stats'\n \| 'text'\n \| 'isThemeDark'\n \| 'isThemeMaryland'\n >,\n) =>\n Atomic.textLockup.medium({\n ...props,\n ribbon: props.eyebrow,\n compositeHeadline: createCompositeHeadline(props),\n compositeStats: createCompositeStat(props),\n });\n\nexport const createAssetContent = (\n props: Pick<\n PathwayAssetProps,\n 'dateSign' \| 'image' \| 'video' \| 'isImageScaled'\n >,\n) => {\n const { dateSign, image, video, isImageScaled = true } = props;\n const children = [];\n\n if (video) {\n children.push(\n Atomic.assets.video.observedAutoPlay({\n video,\n isScaled: isImageScaled,\n additionalElementStyles: {\n [`& video`]: {\n objectFit: 'cover',\n width: '100%',\n height: '100%',\n },\n },\n }),\n );\n }\n\n if (!video && image) {\n children.push(\n Atomic.assets.image.background({\n element: image,\n isScaled: isImageScaled,\n isShowCaption: true,\n isGifAllowed: true,\n dateSign,\n }),\n );\n }\n\n return ElementModel.createDiv({\n className: 'pathway-image-container-wrapper',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n overflow: 'hidden',\n height: '100%',\n width: '100%',\n display: 'grid',\n\n [`&:has(.image-container)`]: {\n alignItems: 'center',\n },\n },\n },\n });\n};\n"],"names":["ElementModel.headline.sansLargest","ElementModel.createDiv","Atomic.textLockup.medium","Atomic.assets.video.observedAutoPlay","Atomic.assets.image.background"],"mappings":"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"}

package/dist/composite/pathway/hero.js CHANGED Viewed

@@ -1,21 +1,31 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
+const token = require("@universityofmaryland/web-styles-library/token");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
 const index = require("../../model/elements/index.js");
-require("../../node_modules/postcss/lib/postcss.js");
-require("../../node_modules/postcss-nesting/dist/index.js");
-require("../../node_modules/postcss-js/index.js");
-const media = require("../../utilities/theme/media.js");
+require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-utilities-library/media");
+require("@universityofmaryland/web-utilities-library/dom");
+require("@universityofmaryland/web-icons-library/controls");
+require("@universityofmaryland/web-icons-library/communication");
+require("@universityofmaryland/web-icons-library/files");
+require("@universityofmaryland/web-icons-library/brand");
+require("@universityofmaryland/web-icons-library/arrows");
 require("../../atomic/animations/actions/indicator.js");
 require("../../atomic/animations/brand/chevron-scroll.js");
 require("../../atomic/animations/brand/card-stack.js");
 const background = require("../../atomic/assets/image/background.js");
+require("@universityofmaryland/web-utilities-library/performance");
 const observedAutoPlay = require("../../atomic/assets/video/observed-auto-play.js");
+require("@universityofmaryland/web-icons-library/location");
+require("@universityofmaryland/web-icons-library/calendar");
 require("../../atomic/layout/block/stacked.js");
 require("../../atomic/layout/overlay/modal.js");
 require("../../atomic/layout/person/columns.js");
+require("@universityofmaryland/web-icons-library/social");
 require("../../atomic/text-lockup/date.js");
 const large = require("../../atomic/text-lockup/large.js");
 require("../../atomic/text-lockup/small.js");
+require("@universityofmaryland/web-styles-library/typography");
 const layout = require("../../model/elements/layout.js");
 const headline = require("../../model/elements/headline.js");
 function _interopNamespaceDefault(e) {
@@ -34,7 +44,7 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const BREAK_SMALL = 999;
 const BREAK_MEDIUM = 1e3;
 const BREAK_LARGE = 1300;
@@ -132,7 +142,7 @@ const createAssetColumn = ({
         [`& img, & video`]: {
           [`@container (min-width: ${BREAK_MEDIUM}px)`]: {
             ...includesAnimation && {
-              ...media.withViewTimelineAnimation({
+              ...styles.withViewTimelineAnimation({
                 animation: `pathway-hero-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`
               })
             }
@@ -148,7 +158,7 @@ const createHeadline = (props) => {
   const isOverwriteHeadline = characterCount > 30;
   if (!headline$1) return null;
   const desktopStyles = {
-    [`@container (${Styles__namespace.token.media.queries.desktop.min})`]: {
+    [`@container (${token__namespace.media.queries.desktop.min})`]: {
       ...isOverwriteHeadline && {
         fontSize: "80px"
       }
@@ -156,14 +166,14 @@ const createHeadline = (props) => {
   };
   const elementStyles = {
     element: {
-      color: Styles__namespace.token.color.black,
+      color: token__namespace.color.black,
       margin: "0 auto",
       textTransform: "uppercase",
-      marginTop: `${Styles__namespace.token.spacing.sm}`,
+      marginTop: `${token__namespace.spacing.sm}`,
       ...desktopStyles
     },
     siblingAfter: {
-      marginTop: `${Styles__namespace.token.spacing.md}`
+      marginTop: `${token__namespace.spacing.md}`
     }
   };
   return headline.campaignExtraLarge({
@@ -190,10 +200,10 @@ const createTextWrapper = (props) => index.createDiv({
     element: {
       width: "100%",
       [`@container  (max-width: ${BREAK_SMALL}px)`]: {
-        padding: `${Styles__namespace.token.spacing.md} 0`
+        padding: `${token__namespace.spacing.md} 0`
       },
       [`@container  (min-width: ${BREAK_MEDIUM}px)`]: {
-        padding: `${Styles__namespace.token.spacing["4xl"]} 0`,
+        padding: `${token__namespace.spacing["4xl"]} 0`,
         ...props.isImagePositionLeft && {
           paddingRight: 0
         },
@@ -201,13 +211,13 @@ const createTextWrapper = (props) => index.createDiv({
           paddingLeft: 0
         },
         ...props.includesAnimation && {
-          ...media.withViewTimelineAnimation({
+          ...styles.withViewTimelineAnimation({
             animation: `pathway-hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`
           })
         }
       },
       [`@container  (min-width: ${BREAK_LARGE}px)`]: {
-        padding: `${Styles__namespace.token.spacing["8xl"]} 0`
+        padding: `${token__namespace.spacing["8xl"]} 0`
       }
     }
   }
@@ -223,19 +233,19 @@ const createLockColumn = (props) => layout.spaceHorizontalLarger({
         alignItems: "center",
         minHeight: "720px",
         ...props.isImagePositionLeft && {
-          paddingRight: Styles__namespace.token.spacing["2xl"]
+          paddingRight: token__namespace.spacing["2xl"]
         },
         ...!props.isImagePositionLeft && {
-          paddingLeft: Styles__namespace.token.spacing["2xl"],
+          paddingLeft: token__namespace.spacing["2xl"],
           order: 1
         }
       },
       [`@container (min-width: ${BREAK_LARGE}px)`]: {
         ...!props.isImagePositionLeft && {
-          paddingRight: Styles__namespace.token.spacing["4xl"]
+          paddingRight: token__namespace.spacing["4xl"]
         },
         ...props.isImagePositionLeft && {
-          paddingLeft: Styles__namespace.token.spacing["4xl"]
+          paddingLeft: token__namespace.spacing["4xl"]
         }
       }
     }