@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

package/dist/composite/navigation/elements/item/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/navigation/elements/item/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { handleKeyboardNavigation } from '@universityofmaryland/web-utilities-library/events';\nimport { chevron_down as iconChevronDown } from '@universityofmaryland/web-icons-library/controls';\n\ntype TypePrimaryLinkRequirements = {\n  primaryLinkContainer?: HTMLElement | null;\n  context?: HTMLElement;\n};\n\ntype TypeDropdownProps = {\n  dropdownLinksContainer?: HTMLElement | null;\n  dropdownCalloutsSlot?: HTMLSlotElement | null;\n};\n\ntype TypePrimaryLinkButtonProps = {\n  buttonClick: () => void;\n  navItemName: string;\n};\n\ntype TypePrimaryLinkProps = TypePrimaryLinkRequirements &\n  TypeDropdownProps &\n  TypePrimaryLinkButtonProps & {\n    hasDropdown: boolean;\n  };\n\nexport type TypeNavItemRequirements = TypeDropdownProps &\n  TypePrimaryLinkRequirements;\n\ntype TypeNavItem = TypeNavItemRequirements;\n\nconst ELEMENT_NAME = 'umd-element-nav-item';\nconst ATTRIBUTE_DROPDOWN = 'data-dropdown';\nconst ATTRIBUTE_SHOWING = 'data-showing';\nconst ATTRIBUTE_SELECTED = 'data-selected';\n\nconst BOUNDS_SHIFT = 140;\nconst MAX_COLUMN_ITEMS = 8;\n\nconst ELEMENT_NAV_ITEM_CONTAINER = `nav-item-container`;\nconst ELEMENT_PRIMARY_LINK_CONTAINER = 'nav-item-primary-link-container';\nconst ELEMENT_PRIMARLY_LINK_WRAPPER = `nav-item-primary-link-wrapper`;\nconst ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON = `nav-item-primary-link-button`;\n\nconst ELEMENT_DROPDOWN_CONTAINER = `nav-item-dropdown-container`;\nconst ELEMENT_DROPDOWN_LIST_CONTAINER = 'nav-item-dropdown-list';\nconst ELEMENT_DROPDOWN_MULTIPLE_COLUMN = 'nav-item-dropdown-multiple-column';\nconst ELEMENT_DROPDOWN_CTA_COLUMN = 'nav-item-dropdown-cta-column';\n\nconst IS_SELECTED = `[${ATTRIBUTE_SELECTED}]`;\nconst IS_SHOWING = `[${ATTRIBUTE_SHOWING}]`;\nconst IS_DROPDOWN = `[${ATTRIBUTE_DROPDOWN}]`;\n\nconst OVERWRITE_DROPDOWN_CONTAINER = `.${ELEMENT_NAV_ITEM_CONTAINER}${IS_DROPDOWN}`;\nconst OVERWRITE_IS_SHOWING_DROPDOWN_CONTAINER = `${OVERWRITE_DROPDOWN_CONTAINER}${IS_SHOWING} .${ELEMENT_DROPDOWN_CONTAINER}`;\nconst OVERWRITE_IS_SHOWING_PRIMARY_LINK = `${OVERWRITE_DROPDOWN_CONTAINER} .${ELEMENT_PRIMARLY_LINK_WRAPPER}`;\nconst OVERWRITE_IS_SHOWING_PRIMARY_BUTTON = `${OVERWRITE_DROPDOWN_CONTAINER}${IS_SHOWING} .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON}`;\n\n// prettier-ignore\nconst OverwriteDropdownStyles = `\n  ${OVERWRITE_IS_SHOWING_DROPDOWN_CONTAINER} {\n    display: block;\n  }\n\n  ${OVERWRITE_IS_SHOWING_PRIMARY_BUTTON} {\n    transform: rotate(180deg) translateY(4px);\n  }\n\n  ${OVERWRITE_IS_SHOWING_PRIMARY_LINK} > a${IS_SELECTED}:before {\n    bottom: 1px;\n    right: 20px;\n  }\n`\n\n// prettier-ignore\nconst PrimaryStyles = `\n  .${ELEMENT_PRIMARY_LINK_CONTAINER} {\n    position: relative;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} {\n    display: block;\n    position: relative;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a {\n    color: ${token.color.black};\n    font-size: ${token.font.size.base};\n    transition: color 0.2s ease-in-out;\n    line-height: 1.15em;\n    font-weight: 700;\n    text-wrap: pretty;\n    display: block;\n    display: flex;\n    align-items: flex-end;\n    text-align: right;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a:hover,\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a:focus {\n    color: ${token.color.red};\n   }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a[${ATTRIBUTE_SELECTED}] span {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(${token.color.gold}, ${token.color.gold});\n  }\n\n  .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON} {\n    position: absolute;\n    top: 2px;\n    right: -20px;\n    transition: transform .5s;\n  }\n\n  .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON} svg {\n    fill: ${token.color.red};\n    height: 14px;\n    width: 14px;\n    transform: rotate(0deg) translateY(0);\n    transition: fill .5s,transform .5s;\n  }\n`;\n\n// prettier-ignore\nconst DropdownMultipleColumnStyles = `\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} > * {\n    min-width: 232px;\n  }\n\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} > *:not(:first-child) {\n    margin-left: 40px;\n  }\n`\n\n// prettier-ignore\nconst DropdownListStyles = `\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} {\n    background-color: ${token.color.white};\n    border-top: 2px solid ${token.color.red};\n    padding: ${token.spacing.lg};\n    box-shadow: -1px 9px 32px -10px rgba(0,0,0,0.19);\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a {\n    display: block;\n    min-width: 120px;\n    max-width: 230px;\n    font-weight: 700;\n    font-size: 14px;\n    line-height: 1.5em;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_DROPDOWN_LIST_CONTAINER} a`]:\n      animation.line.slideUnderRed,\n    },\n  })}\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a:hover,\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a:focus {\n    color: ${token.color.red};\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a + a {\n    margin-top: ${token.spacing.md};\n    display: block;\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED} span:not(.sr-only) {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(${token.color.gold}, ${token.color.gold});\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED}:hover span,\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED}:focus span {\n    border-bottom: none;\n  }\n`\n\n// prettier-ignore\nconst DropdownStyles = `\n  .${ELEMENT_DROPDOWN_CONTAINER} {\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);v \n    min-width: 200px;\n    width: auto;\n    padding-top: ${token.spacing.sm};\n    display: none;\n  }\n`;\n\nconst STYLES_NAV_ITEM_ELEMENT = `\n  .${ELEMENT_NAV_ITEM_CONTAINER} {\n    position: relative;\n    z-index: 9999;\n  }\n\n  ${OVERWRITE_DROPDOWN_CONTAINER} {\n    padding-right: 20px;\n  }\n\n  .${ELEMENT_NAV_ITEM_CONTAINER} a {\n    font-family: ${token.font.family.sans};\n    font-size: ${token.font.size.sm};\n    font-weight: 700;\n    color: ${token.color.black};\n    text-decoration: none;\n  }\n  \n  .${ELEMENT_NAV_ITEM_CONTAINER}:foucs-within .${ELEMENT_DROPDOWN_CONTAINER} {\n    display: block;\n  }\n\n  ${PrimaryStyles}\n  ${DropdownStyles}\n  ${DropdownMultipleColumnStyles}\n  ${DropdownListStyles}\n  ${OverwriteDropdownStyles}\n`;\n\nconst CreateMultipleColumns = ({ links }: { links: HTMLAnchorElement[] }) => {\n  const column1 = document.createElement('div');\n  const column2 = document.createElement('div');\n  const firstColumnLinks = links.splice(0, Math.ceil(links.length / 2));\n\n  firstColumnLinks.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    column1.appendChild(link);\n  });\n  links.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    column2.appendChild(link);\n  });\n\n  return [column1, column2];\n};\n\nconst CreateSingleColumn = ({ links }: { links: HTMLAnchorElement[] }) => {\n  const container = document.createElement('div');\n  links.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    container.appendChild(link);\n  });\n\n  return container;\n};\n\nconst CreateDropdown = ({\n  dropdownLinksContainer,\n  dropdownCalloutsSlot,\n}: TypeDropdownProps) => {\n  if (!dropdownLinksContainer) return;\n\n  const links = Array.from(\n    dropdownLinksContainer.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n\n  wrapper.classList.add(ELEMENT_DROPDOWN_LIST_CONTAINER);\n  container.classList.add(ELEMENT_DROPDOWN_CONTAINER);\n\n  if (links.length > MAX_COLUMN_ITEMS) {\n    const columns = CreateMultipleColumns({ links });\n    columns.forEach((column) => {\n      wrapper.appendChild(column);\n    });\n    wrapper.classList.add(ELEMENT_DROPDOWN_MULTIPLE_COLUMN);\n  } else {\n    wrapper.appendChild(CreateSingleColumn({ links }));\n\n    if (dropdownCalloutsSlot) {\n      wrapper.classList.add(ELEMENT_DROPDOWN_MULTIPLE_COLUMN);\n    }\n  }\n\n  if (dropdownCalloutsSlot) {\n    const dropdownWrapper = document.createElement('div');\n\n    dropdownWrapper.classList.add(ELEMENT_DROPDOWN_CTA_COLUMN);\n    dropdownWrapper.appendChild(dropdownCalloutsSlot);\n    wrapper.appendChild(dropdownWrapper);\n  }\n\n  container.appendChild(wrapper);\n\n  return container;\n};\n\nconst CreateButton = ({\n  buttonClick,\n  navItemName,\n}: TypePrimaryLinkButtonProps) => {\n  const button = document.createElement('button');\n\n  button.classList.add(ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON);\n  button.innerHTML = iconChevronDown;\n  button.addEventListener('click', () => buttonClick());\n  button.setAttribute('aria-expanded', 'false');\n  button.setAttribute('aria-controls', `nav-links-`);\n  button.setAttribute('aria-label', `List of menu items for ${navItemName}`);\n\n  return button;\n};\n\nconst CreatePrimaryLink = (props: TypePrimaryLinkProps) => {\n  const { hasDropdown, primaryLinkContainer } = props;\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n\n  const dropdown = CreateDropdown(props);\n\n  container.classList.add(ELEMENT_PRIMARY_LINK_CONTAINER);\n  wrapper.classList.add(ELEMENT_PRIMARLY_LINK_WRAPPER);\n\n  if (primaryLinkContainer) {\n    const clonedPrimaryLink = primaryLinkContainer.cloneNode(\n      true,\n    ) as HTMLElement;\n    wrapper.appendChild(clonedPrimaryLink);\n  }\n\n  if (hasDropdown) {\n    const button = CreateButton(props);\n    wrapper.appendChild(button);\n  }\n\n  if (dropdown) wrapper.appendChild(dropdown);\n\n  container.appendChild(wrapper);\n  return container;\n};\n\nconst CreateNavItemElement = (props: TypeNavItem) =>\n  (() => {\n    const { dropdownLinksContainer, primaryLinkContainer, context } = props;\n\n    if (!primaryLinkContainer) {\n      throw new Error('Primary link is required for a nav item');\n    }\n\n    const elementContainer = document.createElement('div');\n    const dropDownContainerLinks = dropdownLinksContainer?.children;\n    const hasDropdown =\n      (dropDownContainerLinks && dropDownContainerLinks.length > 0) || false;\n\n    const navItemName = primaryLinkContainer.innerHTML\n      .replace(/(<([^>]+)>)/gi, '')\n      .trim();\n    let isShowing = false;\n    let focusCallback = () => {};\n\n    const OnLoadDropdownSpans = () => {\n      if (!dropdownLinksContainer) return;\n\n      const links = Array.from(\n        dropdownLinksContainer.querySelectorAll('a'),\n      ) as HTMLAnchorElement[];\n\n      links.forEach((link) => {\n        const hasSpan = link.querySelector('span');\n\n        if (!hasSpan) {\n          wrapLinkForAnimation({ element: link });\n          link.appendChild(link);\n        }\n      });\n    };\n\n    const DropdownPositionPerViewPort = () => {\n      const elementBounds = elementContainer.getBoundingClientRect();\n      const dropdownContainer = elementContainer.querySelector(\n        `.${ELEMENT_DROPDOWN_CONTAINER}`,\n      ) as HTMLDivElement;\n      const width = elementContainer.offsetWidth;\n\n      if (!dropdownContainer) return;\n\n      const size = dropdownContainer.offsetWidth + BOUNDS_SHIFT;\n\n      if (elementBounds.left + width < size) {\n        dropdownContainer.style.left = '0';\n        dropdownContainer.style.transform = 'translateX(0)';\n      }\n\n      if (window.innerWidth - elementBounds.right < size / 2) {\n        dropdownContainer.style.right = '0';\n        dropdownContainer.style.left = 'inherit';\n        dropdownContainer.style.transform = 'translateX(0)';\n      }\n    };\n\n    const ShowDropdown = () => {\n      elementContainer.setAttribute(ATTRIBUTE_SHOWING, '');\n      DropdownPositionPerViewPort();\n    };\n\n    const HideDropdown = () => {\n      elementContainer.removeAttribute(ATTRIBUTE_SHOWING);\n      focusCallback();\n      focusCallback = () => {};\n    };\n\n    const EventButtonClick = () => {\n      if (isShowing && dropdownLinksContainer) {\n        ShowDropdown();\n        focusCallback = handleKeyboardNavigation({\n          element: elementContainer,\n          action: () => HideDropdown(),\n          shadowDomContext: context,\n        });\n\n        setTimeout(() => {\n          const firstElement = dropdownLinksContainer.querySelector(\n            'a',\n          ) as HTMLAnchorElement;\n\n          if (firstElement) firstElement.focus();\n        }, 100);\n      }\n\n      if (!isShowing) HideDropdown();\n    };\n\n    const buttonClick = () => {\n      isShowing = isShowing ? false : true;\n      EventButtonClick();\n    };\n\n    // Load\n\n    const linkContainer = CreatePrimaryLink({\n      ...props,\n      hasDropdown,\n      buttonClick,\n      navItemName,\n    });\n\n    elementContainer.addEventListener('mouseover', () => {\n      isShowing = true;\n      ShowDropdown();\n    });\n\n    elementContainer.addEventListener('mouseleave', () => {\n      isShowing = false;\n      HideDropdown();\n    });\n\n    setTimeout(() => {\n      OnLoadDropdownSpans();\n    }, 10);\n\n    if (hasDropdown) elementContainer.setAttribute(ATTRIBUTE_DROPDOWN, '');\n    elementContainer.classList.add(ELEMENT_NAV_ITEM_CONTAINER);\n    elementContainer.appendChild(linkContainer);\n\n    return elementContainer;\n  })();\n\nexport default {\n  CreateElement: CreateNavItemElement,\n  Styles: STYLES_NAV_ITEM_ELEMENT,\n};\n"],"names":["iconChevronDown"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/navigation/elements/item/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { handleKeyboardNavigation } from '@universityofmaryland/web-utilities-library/events';\nimport { chevron_down as iconChevronDown } from '@universityofmaryland/web-icons-library/controls';\n\ntype TypePrimaryLinkRequirements = {\n  primaryLinkContainer?: HTMLElement | null;\n  context?: HTMLElement;\n};\n\ntype TypeDropdownProps = {\n  dropdownLinksContainer?: HTMLElement | null;\n  dropdownCalloutsSlot?: HTMLSlotElement | null;\n};\n\ntype TypePrimaryLinkButtonProps = {\n  buttonClick: () => void;\n  navItemName: string;\n};\n\ntype TypePrimaryLinkProps = TypePrimaryLinkRequirements &\n  TypeDropdownProps &\n  TypePrimaryLinkButtonProps & {\n    hasDropdown: boolean;\n  };\n\nexport type TypeNavItemRequirements = TypeDropdownProps &\n  TypePrimaryLinkRequirements;\n\ntype TypeNavItem = TypeNavItemRequirements;\n\nconst ELEMENT_NAME = 'umd-element-nav-item';\nconst ATTRIBUTE_DROPDOWN = 'data-dropdown';\nconst ATTRIBUTE_SHOWING = 'data-showing';\nconst ATTRIBUTE_SELECTED = 'data-selected';\n\nconst BOUNDS_SHIFT = 140;\nconst MAX_COLUMN_ITEMS = 8;\n\nconst ELEMENT_NAV_ITEM_CONTAINER = `nav-item-container`;\nconst ELEMENT_PRIMARY_LINK_CONTAINER = 'nav-item-primary-link-container';\nconst ELEMENT_PRIMARLY_LINK_WRAPPER = `nav-item-primary-link-wrapper`;\nconst ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON = `nav-item-primary-link-button`;\n\nconst ELEMENT_DROPDOWN_CONTAINER = `nav-item-dropdown-container`;\nconst ELEMENT_DROPDOWN_LIST_CONTAINER = 'nav-item-dropdown-list';\nconst ELEMENT_DROPDOWN_MULTIPLE_COLUMN = 'nav-item-dropdown-multiple-column';\nconst ELEMENT_DROPDOWN_CTA_COLUMN = 'nav-item-dropdown-cta-column';\n\nconst IS_SELECTED = `[${ATTRIBUTE_SELECTED}]`;\nconst IS_SHOWING = `[${ATTRIBUTE_SHOWING}]`;\nconst IS_DROPDOWN = `[${ATTRIBUTE_DROPDOWN}]`;\n\nconst OVERWRITE_DROPDOWN_CONTAINER = `.${ELEMENT_NAV_ITEM_CONTAINER}${IS_DROPDOWN}`;\nconst OVERWRITE_IS_SHOWING_DROPDOWN_CONTAINER = `${OVERWRITE_DROPDOWN_CONTAINER}${IS_SHOWING} .${ELEMENT_DROPDOWN_CONTAINER}`;\nconst OVERWRITE_IS_SHOWING_PRIMARY_LINK = `${OVERWRITE_DROPDOWN_CONTAINER} .${ELEMENT_PRIMARLY_LINK_WRAPPER}`;\nconst OVERWRITE_IS_SHOWING_PRIMARY_BUTTON = `${OVERWRITE_DROPDOWN_CONTAINER}${IS_SHOWING} .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON}`;\n\n// prettier-ignore\nconst OverwriteDropdownStyles = `\n  ${OVERWRITE_IS_SHOWING_DROPDOWN_CONTAINER} {\n    display: block;\n  }\n\n  ${OVERWRITE_IS_SHOWING_PRIMARY_BUTTON} {\n    transform: rotate(180deg) translateY(4px);\n  }\n\n  ${OVERWRITE_IS_SHOWING_PRIMARY_LINK} > a${IS_SELECTED}:before {\n    bottom: 1px;\n    right: 20px;\n  }\n`\n\n// prettier-ignore\nconst PrimaryStyles = `\n  .${ELEMENT_PRIMARY_LINK_CONTAINER} {\n    position: relative;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} {\n    display: block;\n    position: relative;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a {\n    color: ${token.color.black};\n    font-size: ${token.font.size.base};\n    transition: color 0.2s ease-in-out;\n    line-height: 1.15em;\n    font-weight: 700;\n    text-wrap: pretty;\n    display: block;\n    display: flex;\n    align-items: flex-end;\n    text-align: right;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a:hover,\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a:focus {\n    color: ${token.color.red};\n   }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a[${ATTRIBUTE_SELECTED}] span {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(${token.color.gold}, ${token.color.gold});\n  }\n\n  .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON} {\n    position: absolute;\n    top: 2px;\n    right: -20px;\n    transition: transform .5s;\n  }\n\n  .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON} svg {\n    fill: ${token.color.red};\n    height: 14px;\n    width: 14px;\n    transform: rotate(0deg) translateY(0);\n    transition: fill .5s,transform .5s;\n  }\n`;\n\n// prettier-ignore\nconst DropdownMultipleColumnStyles = `\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} > * {\n    min-width: 232px;\n  }\n\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} > *:not(:first-child) {\n    margin-left: 40px;\n  }\n`\n\n// prettier-ignore\nconst DropdownListStyles = `\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} {\n    background-color: ${token.color.white};\n    border-top: 2px solid ${token.color.red};\n    padding: ${token.spacing.lg};\n    box-shadow: -1px 9px 32px -10px rgba(0,0,0,0.19);\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a {\n    display: block;\n    min-width: 120px;\n    max-width: 230px;\n    font-weight: 700;\n    font-size: 14px;\n    line-height: 1.5em;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_DROPDOWN_LIST_CONTAINER} a`]:\n      animation.line.slideUnderRed,\n    },\n  })}\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a:hover,\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a:focus {\n    color: ${token.color.red};\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a + a {\n    margin-top: ${token.spacing.md};\n    display: block;\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED} span:not(.sr-only) {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(${token.color.gold}, ${token.color.gold});\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED}:hover span,\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED}:focus span {\n    border-bottom: none;\n  }\n`\n\n// prettier-ignore\nconst DropdownStyles = `\n  .${ELEMENT_DROPDOWN_CONTAINER} {\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);v \n    min-width: 200px;\n    width: auto;\n    padding-top: ${token.spacing.sm};\n    display: none;\n  }\n`;\n\nconst STYLES_NAV_ITEM_ELEMENT = `\n  .${ELEMENT_NAV_ITEM_CONTAINER} {\n    position: relative;\n    z-index: 9999;\n  }\n\n  ${OVERWRITE_DROPDOWN_CONTAINER} {\n    padding-right: 20px;\n  }\n\n  .${ELEMENT_NAV_ITEM_CONTAINER} a {\n    font-family: ${token.font.family.sans};\n    font-size: ${token.font.size.sm};\n    font-weight: 700;\n    color: ${token.color.black};\n    text-decoration: none;\n  }\n  \n  .${ELEMENT_NAV_ITEM_CONTAINER}:foucs-within .${ELEMENT_DROPDOWN_CONTAINER} {\n    display: block;\n  }\n\n  ${PrimaryStyles}\n  ${DropdownStyles}\n  ${DropdownMultipleColumnStyles}\n  ${DropdownListStyles}\n  ${OverwriteDropdownStyles}\n`;\n\nconst CreateMultipleColumns = ({ links }: { links: HTMLAnchorElement[] }) => {\n  const column1 = document.createElement('div');\n  const column2 = document.createElement('div');\n  const firstColumnLinks = links.splice(0, Math.ceil(links.length / 2));\n\n  firstColumnLinks.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    column1.appendChild(link);\n  });\n  links.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    column2.appendChild(link);\n  });\n\n  return [column1, column2];\n};\n\nconst CreateSingleColumn = ({ links }: { links: HTMLAnchorElement[] }) => {\n  const container = document.createElement('div');\n  links.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    container.appendChild(link);\n  });\n\n  return container;\n};\n\nconst CreateDropdown = ({\n  dropdownLinksContainer,\n  dropdownCalloutsSlot,\n}: TypeDropdownProps) => {\n  if (!dropdownLinksContainer) return;\n\n  const links = Array.from(\n    dropdownLinksContainer.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n\n  wrapper.classList.add(ELEMENT_DROPDOWN_LIST_CONTAINER);\n  container.classList.add(ELEMENT_DROPDOWN_CONTAINER);\n\n  if (links.length > MAX_COLUMN_ITEMS) {\n    const columns = CreateMultipleColumns({ links });\n    columns.forEach((column) => {\n      wrapper.appendChild(column);\n    });\n    wrapper.classList.add(ELEMENT_DROPDOWN_MULTIPLE_COLUMN);\n  } else {\n    wrapper.appendChild(CreateSingleColumn({ links }));\n\n    if (dropdownCalloutsSlot) {\n      wrapper.classList.add(ELEMENT_DROPDOWN_MULTIPLE_COLUMN);\n    }\n  }\n\n  if (dropdownCalloutsSlot) {\n    const dropdownWrapper = document.createElement('div');\n\n    dropdownWrapper.classList.add(ELEMENT_DROPDOWN_CTA_COLUMN);\n    dropdownWrapper.appendChild(dropdownCalloutsSlot);\n    wrapper.appendChild(dropdownWrapper);\n  }\n\n  container.appendChild(wrapper);\n\n  return container;\n};\n\nconst CreateButton = ({\n  buttonClick,\n  navItemName,\n}: TypePrimaryLinkButtonProps) => {\n  const button = document.createElement('button');\n\n  button.classList.add(ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON);\n  button.innerHTML = iconChevronDown;\n  button.addEventListener('click', () => buttonClick());\n  button.setAttribute('aria-expanded', 'false');\n  button.setAttribute('aria-controls', `nav-links-`);\n  button.setAttribute('aria-label', `List of menu items for ${navItemName}`);\n\n  return button;\n};\n\nconst CreatePrimaryLink = (props: TypePrimaryLinkProps) => {\n  const { hasDropdown, primaryLinkContainer } = props;\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n\n  const dropdown = CreateDropdown(props);\n\n  container.classList.add(ELEMENT_PRIMARY_LINK_CONTAINER);\n  wrapper.classList.add(ELEMENT_PRIMARLY_LINK_WRAPPER);\n\n  if (primaryLinkContainer) {\n    const clonedPrimaryLink = primaryLinkContainer.cloneNode(\n      true,\n    ) as HTMLElement;\n    wrapper.appendChild(clonedPrimaryLink);\n  }\n\n  if (hasDropdown) {\n    const button = CreateButton(props);\n    wrapper.appendChild(button);\n  }\n\n  if (dropdown) wrapper.appendChild(dropdown);\n\n  container.appendChild(wrapper);\n  return container;\n};\n\nconst CreateNavItemElement = (props: TypeNavItem) =>\n  (() => {\n    const { dropdownLinksContainer, primaryLinkContainer, context } = props;\n\n    if (!primaryLinkContainer) {\n      throw new Error('Primary link is required for a nav item');\n    }\n\n    const elementContainer = document.createElement('div');\n    const dropDownContainerLinks = dropdownLinksContainer?.children;\n    const hasDropdown =\n      (dropDownContainerLinks && dropDownContainerLinks.length > 0) || false;\n\n    const navItemName = primaryLinkContainer.innerHTML\n      .replace(/(<([^>]+)>)/gi, '')\n      .trim();\n    let isShowing = false;\n    let focusCallback = () => {};\n\n    const OnLoadDropdownSpans = () => {\n      if (!dropdownLinksContainer) return;\n\n      const links = Array.from(\n        dropdownLinksContainer.querySelectorAll('a'),\n      ) as HTMLAnchorElement[];\n\n      links.forEach((link) => {\n        const hasSpan = link.querySelector('span');\n\n        if (!hasSpan) {\n          wrapLinkForAnimation({ element: link });\n          link.appendChild(link);\n        }\n      });\n    };\n\n    const DropdownPositionPerViewPort = () => {\n      const elementBounds = elementContainer.getBoundingClientRect();\n      const dropdownContainer = elementContainer.querySelector(\n        `.${ELEMENT_DROPDOWN_CONTAINER}`,\n      ) as HTMLDivElement;\n      const width = elementContainer.offsetWidth;\n\n      if (!dropdownContainer) return;\n\n      const size = dropdownContainer.offsetWidth + BOUNDS_SHIFT;\n\n      if (elementBounds.left + width < size) {\n        dropdownContainer.style.left = '0';\n        dropdownContainer.style.transform = 'translateX(0)';\n      }\n\n      if (window.innerWidth - elementBounds.right < size / 2) {\n        dropdownContainer.style.right = '0';\n        dropdownContainer.style.left = 'inherit';\n        dropdownContainer.style.transform = 'translateX(0)';\n      }\n    };\n\n    const ShowDropdown = () => {\n      elementContainer.setAttribute(ATTRIBUTE_SHOWING, '');\n      DropdownPositionPerViewPort();\n    };\n\n    const HideDropdown = () => {\n      elementContainer.removeAttribute(ATTRIBUTE_SHOWING);\n      focusCallback();\n      focusCallback = () => {};\n    };\n\n    const EventButtonClick = () => {\n      if (isShowing && dropdownLinksContainer) {\n        ShowDropdown();\n        focusCallback = handleKeyboardNavigation({\n          element: elementContainer,\n          action: () => HideDropdown(),\n          shadowDomContext: context,\n        });\n\n        setTimeout(() => {\n          const firstElement = dropdownLinksContainer.querySelector(\n            'a',\n          ) as HTMLAnchorElement;\n\n          if (firstElement) firstElement.focus();\n        }, 100);\n      }\n\n      if (!isShowing) HideDropdown();\n    };\n\n    const buttonClick = () => {\n      isShowing = isShowing ? false : true;\n      EventButtonClick();\n    };\n\n    // Load\n\n    const linkContainer = CreatePrimaryLink({\n      ...props,\n      hasDropdown,\n      buttonClick,\n      navItemName,\n    });\n\n    elementContainer.addEventListener('mouseover', () => {\n      isShowing = true;\n      ShowDropdown();\n    });\n\n    elementContainer.addEventListener('mouseleave', () => {\n      isShowing = false;\n      HideDropdown();\n    });\n\n    setTimeout(() => {\n      OnLoadDropdownSpans();\n    }, 10);\n\n    if (hasDropdown) elementContainer.setAttribute(ATTRIBUTE_DROPDOWN, '');\n    elementContainer.classList.add(ELEMENT_NAV_ITEM_CONTAINER);\n    elementContainer.appendChild(linkContainer);\n\n    return elementContainer;\n  })();\n\nexport default {\n  CreateElement: CreateNavItemElement,\n  Styles: STYLES_NAV_ITEM_ELEMENT,\n};\n"],"names":["iconChevronDown"],"mappings":"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"}

package/dist/composite/navigation/elements/menu-button/index.js

@@ -1,5 +1,5 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const token = require("@universityofmaryland/web-token-library");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/composite/navigation/elements/menu-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/menu-button/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\n\nexport type TypeMenuDisplayButtonRequirements = {\n  eventOpen: () => void;\n};\n\nconst NAV_DRAWER_BUTTON = 'nav-drawer-button';\nconst NAV_DRAWER_BUTTON_WRAPPER = 'nav-drawer-button-wrapper';\n\n// prettier-ignore\nconst STYLES_MENU_DISPLAY_BUTTON = `\n  .${NAV_DRAWER_BUTTON} {\n    height: 44px;\n    width: 34px;\n    display: flex;\n    align-items: center;\n  }\n\n  .${NAV_DRAWER_BUTTON}:hover .${NAV_DRAWER_BUTTON_WRAPPER} span,\n  .${NAV_DRAWER_BUTTON}:focus .${NAV_DRAWER_BUTTON_WRAPPER} span {\n    background-color: ${token.color.red};\n  }\n\n  .${NAV_DRAWER_BUTTON_WRAPPER} {\n    position: relative;\n    width: 20px;\n    height: 15px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n\n  .${NAV_DRAWER_BUTTON_WRAPPER} span {\n    width: 20px;\n    height: 2px;\n    background-color: ${token.color.black};\n    transition: background-color 0.3s ease-in-out;\n  }\n\n  .${NAV_DRAWER_BUTTON_WRAPPER} span:last-child {\n    width: 17px;\n  }\n`;\n\nconst CreateMenuDisplayButton = (props: TypeMenuDisplayButtonRequirements) => {\n  const { eventOpen } = props;\n  const button = document.createElement('button');\n  const wrapper = document.createElement('span');\n  const spans = ['one', 'two', 'three'].map(() => {\n    return document.createElement('span');\n  });\n\n  wrapper.classList.add(NAV_DRAWER_BUTTON_WRAPPER);\n  spans.forEach((span) => wrapper.appendChild(span));\n\n  button.appendChild(wrapper);\n  button.setAttribute('aria-label', 'Open Navigation Drawer');\n  button.classList.add(NAV_DRAWER_BUTTON);\n  button.addEventListener('click', () => eventOpen());\n\n  return button;\n};\n\nexport default {\n  CreateElement: CreateMenuDisplayButton,\n  Styles: STYLES_MENU_DISPLAY_BUTTON,\n};\n"],"names":["token"],"mappings":";;;;;;;;;;;;;;;;;;;AAMA,MAAM,oBAAoB;AAC1B,MAAM,4BAA4B;AAGlC,MAAM,6BAA6B;AAAA,KAC9B,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOjB,iBAAiB,WAAW,yBAAyB;AAAA,KACrD,iBAAiB,WAAW,yBAAyB;AAAA,wBAClCA,iBAAM,MAAM,GAAG;AAAA;AAAA;AAAA,KAGlC,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KASzB,yBAAyB;AAAA;AAAA;AAAA,wBAGNA,iBAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,KAIpC,yBAAyB;AAAA;AAAA;AAAA;AAK9B,MAAM,0BAA0B,CAAC,UAA6C;AAC5E,QAAM,EAAE,cAAc;AACtB,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,QAAM,QAAQ,CAAC,OAAO,OAAO,OAAO,EAAE,IAAI,MAAM;AAC9C,WAAO,SAAS,cAAc,MAAM;AAAA,EACtC,CAAC;AAED,UAAQ,UAAU,IAAI,yBAAyB;AAC/C,QAAM,QAAQ,CAAC,SAAS,QAAQ,YAAY,IAAI,CAAC;AAEjD,SAAO,YAAY,OAAO;AAC1B,SAAO,aAAa,cAAc,wBAAwB;AAC1D,SAAO,UAAU,IAAI,iBAAiB;AACtC,SAAO,iBAAiB,SAAS,MAAM,UAAA,CAAW;AAElD,SAAO;AACT;AAEA,MAAA,aAAe;AAAA,EACb,eAAe;AAAA,EACf,QAAQ;AACV;;"}
+{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/menu-button/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\n\nexport type TypeMenuDisplayButtonRequirements = {\n  eventOpen: () => void;\n};\n\nconst NAV_DRAWER_BUTTON = 'nav-drawer-button';\nconst NAV_DRAWER_BUTTON_WRAPPER = 'nav-drawer-button-wrapper';\n\n// prettier-ignore\nconst STYLES_MENU_DISPLAY_BUTTON = `\n  .${NAV_DRAWER_BUTTON} {\n    height: 44px;\n    width: 34px;\n    display: flex;\n    align-items: center;\n  }\n\n  .${NAV_DRAWER_BUTTON}:hover .${NAV_DRAWER_BUTTON_WRAPPER} span,\n  .${NAV_DRAWER_BUTTON}:focus .${NAV_DRAWER_BUTTON_WRAPPER} span {\n    background-color: ${token.color.red};\n  }\n\n  .${NAV_DRAWER_BUTTON_WRAPPER} {\n    position: relative;\n    width: 20px;\n    height: 15px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n\n  .${NAV_DRAWER_BUTTON_WRAPPER} span {\n    width: 20px;\n    height: 2px;\n    background-color: ${token.color.black};\n    transition: background-color 0.3s ease-in-out;\n  }\n\n  .${NAV_DRAWER_BUTTON_WRAPPER} span:last-child {\n    width: 17px;\n  }\n`;\n\nconst CreateMenuDisplayButton = (props: TypeMenuDisplayButtonRequirements) => {\n  const { eventOpen } = props;\n  const button = document.createElement('button');\n  const wrapper = document.createElement('span');\n  const spans = ['one', 'two', 'three'].map(() => {\n    return document.createElement('span');\n  });\n\n  wrapper.classList.add(NAV_DRAWER_BUTTON_WRAPPER);\n  spans.forEach((span) => wrapper.appendChild(span));\n\n  button.appendChild(wrapper);\n  button.setAttribute('aria-label', 'Open Navigation Drawer');\n  button.classList.add(NAV_DRAWER_BUTTON);\n  button.addEventListener('click', () => eventOpen());\n\n  return button;\n};\n\nexport default {\n  CreateElement: CreateMenuDisplayButton,\n  Styles: STYLES_MENU_DISPLAY_BUTTON,\n};\n"],"names":["token"],"mappings":";;;;;;;;;;;;;;;;;;;AAMA,MAAM,oBAAoB;AAC1B,MAAM,4BAA4B;AAGlC,MAAM,6BAA6B;AAAA,KAC9B,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOjB,iBAAiB,WAAW,yBAAyB;AAAA,KACrD,iBAAiB,WAAW,yBAAyB;AAAA,wBAClCA,iBAAM,MAAM,GAAG;AAAA;AAAA;AAAA,KAGlC,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KASzB,yBAAyB;AAAA;AAAA;AAAA,wBAGNA,iBAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,KAIpC,yBAAyB;AAAA;AAAA;AAAA;AAK9B,MAAM,0BAA0B,CAAC,UAA6C;AAC5E,QAAM,EAAE,cAAc;AACtB,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,QAAM,QAAQ,CAAC,OAAO,OAAO,OAAO,EAAE,IAAI,MAAM;AAC9C,WAAO,SAAS,cAAc,MAAM;AAAA,EACtC,CAAC;AAED,UAAQ,UAAU,IAAI,yBAAyB;AAC/C,QAAM,QAAQ,CAAC,SAAS,QAAQ,YAAY,IAAI,CAAC;AAEjD,SAAO,YAAY,OAAO;AAC1B,SAAO,aAAa,cAAc,wBAAwB;AAC1D,SAAO,UAAU,IAAI,iBAAiB;AACtC,SAAO,iBAAiB,SAAS,MAAM,UAAA,CAAW;AAElD,SAAO;AACT;AAEA,MAAA,aAAe;AAAA,EACb,eAAe;AAAA,EACf,QAAQ;AACV;;"}

package/dist/composite/navigation/elements/menu-button/index.mjs

@@ -1,4 +1,4 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import * as token from "@universityofmaryland/web-token-library";
 const NAV_DRAWER_BUTTON = "nav-drawer-button";
 const NAV_DRAWER_BUTTON_WRAPPER = "nav-drawer-button-wrapper";
 const STYLES_MENU_DISPLAY_BUTTON = `

package/dist/composite/navigation/elements/menu-button/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/navigation/elements/menu-button/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\n\nexport type TypeMenuDisplayButtonRequirements = {\n  eventOpen: () => void;\n};\n\nconst NAV_DRAWER_BUTTON = 'nav-drawer-button';\nconst NAV_DRAWER_BUTTON_WRAPPER = 'nav-drawer-button-wrapper';\n\n// prettier-ignore\nconst STYLES_MENU_DISPLAY_BUTTON = `\n  .${NAV_DRAWER_BUTTON} {\n    height: 44px;\n    width: 34px;\n    display: flex;\n    align-items: center;\n  }\n\n  .${NAV_DRAWER_BUTTON}:hover .${NAV_DRAWER_BUTTON_WRAPPER} span,\n  .${NAV_DRAWER_BUTTON}:focus .${NAV_DRAWER_BUTTON_WRAPPER} span {\n    background-color: ${token.color.red};\n  }\n\n  .${NAV_DRAWER_BUTTON_WRAPPER} {\n    position: relative;\n    width: 20px;\n    height: 15px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n\n  .${NAV_DRAWER_BUTTON_WRAPPER} span {\n    width: 20px;\n    height: 2px;\n    background-color: ${token.color.black};\n    transition: background-color 0.3s ease-in-out;\n  }\n\n  .${NAV_DRAWER_BUTTON_WRAPPER} span:last-child {\n    width: 17px;\n  }\n`;\n\nconst CreateMenuDisplayButton = (props: TypeMenuDisplayButtonRequirements) => {\n  const { eventOpen } = props;\n  const button = document.createElement('button');\n  const wrapper = document.createElement('span');\n  const spans = ['one', 'two', 'three'].map(() => {\n    return document.createElement('span');\n  });\n\n  wrapper.classList.add(NAV_DRAWER_BUTTON_WRAPPER);\n  spans.forEach((span) => wrapper.appendChild(span));\n\n  button.appendChild(wrapper);\n  button.setAttribute('aria-label', 'Open Navigation Drawer');\n  button.classList.add(NAV_DRAWER_BUTTON);\n  button.addEventListener('click', () => eventOpen());\n\n  return button;\n};\n\nexport default {\n  CreateElement: CreateMenuDisplayButton,\n  Styles: STYLES_MENU_DISPLAY_BUTTON,\n};\n"],"names":[],"mappings":";AAMA,MAAM,oBAAoB;AAC1B,MAAM,4BAA4B;AAGlC,MAAM,6BAA6B;AAAA,KAC9B,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOjB,iBAAiB,WAAW,yBAAyB;AAAA,KACrD,iBAAiB,WAAW,yBAAyB;AAAA,wBAClC,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA,KAGlC,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KASzB,yBAAyB;AAAA;AAAA;AAAA,wBAGN,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,KAIpC,yBAAyB;AAAA;AAAA;AAAA;AAK9B,MAAM,0BAA0B,CAAC,UAA6C;AAC5E,QAAM,EAAE,cAAc;AACtB,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,QAAM,QAAQ,CAAC,OAAO,OAAO,OAAO,EAAE,IAAI,MAAM;AAC9C,WAAO,SAAS,cAAc,MAAM;AAAA,EACtC,CAAC;AAED,UAAQ,UAAU,IAAI,yBAAyB;AAC/C,QAAM,QAAQ,CAAC,SAAS,QAAQ,YAAY,IAAI,CAAC;AAEjD,SAAO,YAAY,OAAO;AAC1B,SAAO,aAAa,cAAc,wBAAwB;AAC1D,SAAO,UAAU,IAAI,iBAAiB;AACtC,SAAO,iBAAiB,SAAS,MAAM,UAAA,CAAW;AAElD,SAAO;AACT;AAEA,MAAA,aAAe;AAAA,EACb,eAAe;AAAA,EACf,QAAQ;AACV;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/navigation/elements/menu-button/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\n\nexport type TypeMenuDisplayButtonRequirements = {\n  eventOpen: () => void;\n};\n\nconst NAV_DRAWER_BUTTON = 'nav-drawer-button';\nconst NAV_DRAWER_BUTTON_WRAPPER = 'nav-drawer-button-wrapper';\n\n// prettier-ignore\nconst STYLES_MENU_DISPLAY_BUTTON = `\n  .${NAV_DRAWER_BUTTON} {\n    height: 44px;\n    width: 34px;\n    display: flex;\n    align-items: center;\n  }\n\n  .${NAV_DRAWER_BUTTON}:hover .${NAV_DRAWER_BUTTON_WRAPPER} span,\n  .${NAV_DRAWER_BUTTON}:focus .${NAV_DRAWER_BUTTON_WRAPPER} span {\n    background-color: ${token.color.red};\n  }\n\n  .${NAV_DRAWER_BUTTON_WRAPPER} {\n    position: relative;\n    width: 20px;\n    height: 15px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n\n  .${NAV_DRAWER_BUTTON_WRAPPER} span {\n    width: 20px;\n    height: 2px;\n    background-color: ${token.color.black};\n    transition: background-color 0.3s ease-in-out;\n  }\n\n  .${NAV_DRAWER_BUTTON_WRAPPER} span:last-child {\n    width: 17px;\n  }\n`;\n\nconst CreateMenuDisplayButton = (props: TypeMenuDisplayButtonRequirements) => {\n  const { eventOpen } = props;\n  const button = document.createElement('button');\n  const wrapper = document.createElement('span');\n  const spans = ['one', 'two', 'three'].map(() => {\n    return document.createElement('span');\n  });\n\n  wrapper.classList.add(NAV_DRAWER_BUTTON_WRAPPER);\n  spans.forEach((span) => wrapper.appendChild(span));\n\n  button.appendChild(wrapper);\n  button.setAttribute('aria-label', 'Open Navigation Drawer');\n  button.classList.add(NAV_DRAWER_BUTTON);\n  button.addEventListener('click', () => eventOpen());\n\n  return button;\n};\n\nexport default {\n  CreateElement: CreateMenuDisplayButton,\n  Styles: STYLES_MENU_DISPLAY_BUTTON,\n};\n"],"names":[],"mappings":";AAMA,MAAM,oBAAoB;AAC1B,MAAM,4BAA4B;AAGlC,MAAM,6BAA6B;AAAA,KAC9B,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOjB,iBAAiB,WAAW,yBAAyB;AAAA,KACrD,iBAAiB,WAAW,yBAAyB;AAAA,wBAClC,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA,KAGlC,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KASzB,yBAAyB;AAAA;AAAA;AAAA,wBAGN,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,KAIpC,yBAAyB;AAAA;AAAA;AAAA;AAK9B,MAAM,0BAA0B,CAAC,UAA6C;AAC5E,QAAM,EAAE,cAAc;AACtB,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,QAAM,QAAQ,CAAC,OAAO,OAAO,OAAO,EAAE,IAAI,MAAM;AAC9C,WAAO,SAAS,cAAc,MAAM;AAAA,EACtC,CAAC;AAED,UAAQ,UAAU,IAAI,yBAAyB;AAC/C,QAAM,QAAQ,CAAC,SAAS,QAAQ,YAAY,IAAI,CAAC;AAEjD,SAAO,YAAY,OAAO;AAC1B,SAAO,aAAa,cAAc,wBAAwB;AAC1D,SAAO,UAAU,IAAI,iBAAiB;AACtC,SAAO,iBAAiB,SAAS,MAAM,UAAA,CAAW;AAElD,SAAO;AACT;AAEA,MAAA,aAAe;AAAA,EACb,eAAe;AAAA,EACf,QAAQ;AACV;"}

package/dist/composite/navigation/elements/slider/action.js

@@ -1,5 +1,5 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const token = require("@universityofmaryland/web-token-library");
 const typography = require("@universityofmaryland/web-styles-library/typography");
 const styles = require("@universityofmaryland/web-utilities-library/styles");
 const controls = require("@universityofmaryland/web-icons-library/controls");

package/dist/composite/navigation/elements/slider/action.js.map

@@ -1 +1 @@
-{"version":3,"file":"action.js","sources":["../../../../../source/composite/navigation/elements/slider/action.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { chevron_down as iconChevronDown } from '@universityofmaryland/web-icons-library/controls';\n\nexport type TypeActionProps = {\n  GetContainer: () => Element | null;\n  setUpcomingSlide: (arg: string) => void;\n  eventSlideLeft: () => void;\n  ATTRIBUTE_CHILD_REF: string;\n  ATTRIBUTE_PARENT_REF: string;\n};\n\nexport type TypeAction = TypeActionProps & {\n  link: HTMLAnchorElement;\n};\n\nconst ELEMENT_SLIDE_ACTION_CONTAINER = 'nav-slide-action-container';\nconst ELEMENT_SLIDE_ACTION_LINK = 'nav-slide-action-link';\nconst ELEMENT_SLIDE_ACTION_BUTTON = 'nav-slide-action-button';\n\n// prettier-ignore\nconst LinkStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_SLIDE_ACTION_LINK}`]: typography.sans.small,\n    },\n  })}\n\n  .${ELEMENT_SLIDE_ACTION_LINK} {\n    transition: color 0.3s ease-in-out;\n  }\n\n  a.${ELEMENT_SLIDE_ACTION_LINK}:hover,\n  a.${ELEMENT_SLIDE_ACTION_LINK}:focus {\n    color: ${token.color.red};\n  }\n`;\n\n// prettier-ignore\nconst ButtonStyles = `\n  .${ELEMENT_SLIDE_ACTION_BUTTON} {\n    position: absolute;\n    right: ${token.spacing.min};\n    top: 5px;\n    width: ${token.spacing.lg};\n    height: ${token.spacing.lg};\n    display: flex;\n    justify-content: center;\n  }\n\n  .${ELEMENT_SLIDE_ACTION_BUTTON}:hover svg,\n  .${ELEMENT_SLIDE_ACTION_BUTTON}:focus svg {\n    transform: rotate(-90deg) translateY(4px);\n  }\n\n  .${ELEMENT_SLIDE_ACTION_BUTTON} svg {\n    fill: ${token.color.red};\n    height: 16px;\n    width: 16px;\n    transform: rotate(-90deg) translateY(0);\n    transition: transform 0.3s ease-in-out;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_SLIDER_ACTION_ELEMENT = `\n  .${ELEMENT_SLIDE_ACTION_CONTAINER} {\n    display: flex;\n    justify-content: space-between;\n    position: relative;\n    padding-right: ${token.spacing['3xl']};\n    margin-bottom: ${token.spacing.xs};\n  }\n\n  ${LinkStyles}\n  ${ButtonStyles}\n`;\n\nconst CreateSlideButton = ({\n  link,\n  GetContainer,\n  setUpcomingSlide,\n  eventSlideLeft,\n  ATTRIBUTE_CHILD_REF,\n}: TypeAction) => {\n  const element = GetContainer();\n\n  if (!element) return null;\n\n  const childReference = link.getAttribute(ATTRIBUTE_CHILD_REF);\n\n  if (!childReference) return null;\n\n  const button = document.createElement('button');\n  button.classList.add(ELEMENT_SLIDE_ACTION_BUTTON);\n  button.setAttribute('type', 'button');\n  button.setAttribute('aria-label', 'Next level of navigation');\n  button.innerHTML = iconChevronDown;\n  button.addEventListener('click', () => {\n    setUpcomingSlide(childReference);\n    eventSlideLeft();\n  });\n\n  return button;\n};\n\nconst CreateSliderActionElement = (props: TypeAction) => {\n  const { link } = props;\n  const actionContainer = document.createElement('div');\n  const button = CreateSlideButton(props);\n\n  actionContainer.classList.add(ELEMENT_SLIDE_ACTION_CONTAINER);\n\n  link.classList.add(ELEMENT_SLIDE_ACTION_LINK);\n  actionContainer.appendChild(link);\n\n  if (button) actionContainer.appendChild(button);\n\n  return actionContainer;\n};\n\nexport default {\n  CreateElement: CreateSliderActionElement,\n  Styles: STYLES_SLIDER_ACTION_ELEMENT,\n  Elements: {\n    container: ELEMENT_SLIDE_ACTION_CONTAINER,\n    link: ELEMENT_SLIDE_ACTION_LINK,\n  },\n};\n"],"names":["jssToCSS","typography","token","iconChevronDown"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,iCAAiC;AACvC,MAAM,4BAA4B;AAClC,MAAM,8BAA8B;AAGpC,MAAM,aAAa;AAAA,IACfA,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,yBAAyB,EAAE,GAAGC,sBAAW,KAAK;AAAA,EAAA;AAEvD,CAAC,CAAC;AAAA;AAAA,KAEC,yBAAyB;AAAA;AAAA;AAAA;AAAA,MAIxB,yBAAyB;AAAA,MACzB,yBAAyB;AAAA,aAClBC,iBAAM,MAAM,GAAG;AAAA;AAAA;AAK5B,MAAM,eAAe;AAAA,KAChB,2BAA2B;AAAA;AAAA,aAEnBA,iBAAM,QAAQ,GAAG;AAAA;AAAA,aAEjBA,iBAAM,QAAQ,EAAE;AAAA,cACfA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,KAKzB,2BAA2B;AAAA,KAC3B,2BAA2B;AAAA;AAAA;AAAA;AAAA,KAI3B,2BAA2B;AAAA,YACpBA,iBAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,+BAA+B;AAAA,KAChC,8BAA8B;AAAA;AAAA;AAAA;AAAA,qBAIdA,iBAAM,QAAQ,KAAK,CAAC;AAAA,qBACpBA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAGjC,UAAU;AAAA,IACV,YAAY;AAAA;AAGhB,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,QAAM,UAAU,aAAA;AAEhB,MAAI,CAAC,QAAS,QAAO;AAErB,QAAM,iBAAiB,KAAK,aAAa,mBAAmB;AAE5D,MAAI,CAAC,eAAgB,QAAO;AAE5B,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,UAAU,IAAI,2BAA2B;AAChD,SAAO,aAAa,QAAQ,QAAQ;AACpC,SAAO,aAAa,cAAc,0BAA0B;AAC5D,SAAO,YAAYC,SAAAA;AACnB,SAAO,iBAAiB,SAAS,MAAM;AACrC,qBAAiB,cAAc;AAC/B,mBAAA;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEA,MAAM,4BAA4B,CAAC,UAAsB;AACvD,QAAM,EAAE,SAAS;AACjB,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,SAAS,kBAAkB,KAAK;AAEtC,kBAAgB,UAAU,IAAI,8BAA8B;AAE5D,OAAK,UAAU,IAAI,yBAAyB;AAC5C,kBAAgB,YAAY,IAAI;AAEhC,MAAI,OAAQ,iBAAgB,YAAY,MAAM;AAE9C,SAAO;AACT;AAEA,MAAA,cAAe;AAAA,EACb,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,WAAW;AAAA,IACX,MAAM;AAAA,EAAA;AAEV;;"}
+{"version":3,"file":"action.js","sources":["../../../../../source/composite/navigation/elements/slider/action.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { chevron_down as iconChevronDown } from '@universityofmaryland/web-icons-library/controls';\n\nexport type TypeActionProps = {\n  GetContainer: () => Element | null;\n  setUpcomingSlide: (arg: string) => void;\n  eventSlideLeft: () => void;\n  ATTRIBUTE_CHILD_REF: string;\n  ATTRIBUTE_PARENT_REF: string;\n};\n\nexport type TypeAction = TypeActionProps & {\n  link: HTMLAnchorElement;\n};\n\nconst ELEMENT_SLIDE_ACTION_CONTAINER = 'nav-slide-action-container';\nconst ELEMENT_SLIDE_ACTION_LINK = 'nav-slide-action-link';\nconst ELEMENT_SLIDE_ACTION_BUTTON = 'nav-slide-action-button';\n\n// prettier-ignore\nconst LinkStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_SLIDE_ACTION_LINK}`]: typography.sans.small,\n    },\n  })}\n\n  .${ELEMENT_SLIDE_ACTION_LINK} {\n    transition: color 0.3s ease-in-out;\n  }\n\n  a.${ELEMENT_SLIDE_ACTION_LINK}:hover,\n  a.${ELEMENT_SLIDE_ACTION_LINK}:focus {\n    color: ${token.color.red};\n  }\n`;\n\n// prettier-ignore\nconst ButtonStyles = `\n  .${ELEMENT_SLIDE_ACTION_BUTTON} {\n    position: absolute;\n    right: ${token.spacing.min};\n    top: 5px;\n    width: ${token.spacing.lg};\n    height: ${token.spacing.lg};\n    display: flex;\n    justify-content: center;\n  }\n\n  .${ELEMENT_SLIDE_ACTION_BUTTON}:hover svg,\n  .${ELEMENT_SLIDE_ACTION_BUTTON}:focus svg {\n    transform: rotate(-90deg) translateY(4px);\n  }\n\n  .${ELEMENT_SLIDE_ACTION_BUTTON} svg {\n    fill: ${token.color.red};\n    height: 16px;\n    width: 16px;\n    transform: rotate(-90deg) translateY(0);\n    transition: transform 0.3s ease-in-out;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_SLIDER_ACTION_ELEMENT = `\n  .${ELEMENT_SLIDE_ACTION_CONTAINER} {\n    display: flex;\n    justify-content: space-between;\n    position: relative;\n    padding-right: ${token.spacing['3xl']};\n    margin-bottom: ${token.spacing.xs};\n  }\n\n  ${LinkStyles}\n  ${ButtonStyles}\n`;\n\nconst CreateSlideButton = ({\n  link,\n  GetContainer,\n  setUpcomingSlide,\n  eventSlideLeft,\n  ATTRIBUTE_CHILD_REF,\n}: TypeAction) => {\n  const element = GetContainer();\n\n  if (!element) return null;\n\n  const childReference = link.getAttribute(ATTRIBUTE_CHILD_REF);\n\n  if (!childReference) return null;\n\n  const button = document.createElement('button');\n  button.classList.add(ELEMENT_SLIDE_ACTION_BUTTON);\n  button.setAttribute('type', 'button');\n  button.setAttribute('aria-label', 'Next level of navigation');\n  button.innerHTML = iconChevronDown;\n  button.addEventListener('click', () => {\n    setUpcomingSlide(childReference);\n    eventSlideLeft();\n  });\n\n  return button;\n};\n\nconst CreateSliderActionElement = (props: TypeAction) => {\n  const { link } = props;\n  const actionContainer = document.createElement('div');\n  const button = CreateSlideButton(props);\n\n  actionContainer.classList.add(ELEMENT_SLIDE_ACTION_CONTAINER);\n\n  link.classList.add(ELEMENT_SLIDE_ACTION_LINK);\n  actionContainer.appendChild(link);\n\n  if (button) actionContainer.appendChild(button);\n\n  return actionContainer;\n};\n\nexport default {\n  CreateElement: CreateSliderActionElement,\n  Styles: STYLES_SLIDER_ACTION_ELEMENT,\n  Elements: {\n    container: ELEMENT_SLIDE_ACTION_CONTAINER,\n    link: ELEMENT_SLIDE_ACTION_LINK,\n  },\n};\n"],"names":["jssToCSS","typography","token","iconChevronDown"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,iCAAiC;AACvC,MAAM,4BAA4B;AAClC,MAAM,8BAA8B;AAGpC,MAAM,aAAa;AAAA,IACfA,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,yBAAyB,EAAE,GAAGC,sBAAW,KAAK;AAAA,EAAA;AAEvD,CAAC,CAAC;AAAA;AAAA,KAEC,yBAAyB;AAAA;AAAA;AAAA;AAAA,MAIxB,yBAAyB;AAAA,MACzB,yBAAyB;AAAA,aAClBC,iBAAM,MAAM,GAAG;AAAA;AAAA;AAK5B,MAAM,eAAe;AAAA,KAChB,2BAA2B;AAAA;AAAA,aAEnBA,iBAAM,QAAQ,GAAG;AAAA;AAAA,aAEjBA,iBAAM,QAAQ,EAAE;AAAA,cACfA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,KAKzB,2BAA2B;AAAA,KAC3B,2BAA2B;AAAA;AAAA;AAAA;AAAA,KAI3B,2BAA2B;AAAA,YACpBA,iBAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,+BAA+B;AAAA,KAChC,8BAA8B;AAAA;AAAA;AAAA;AAAA,qBAIdA,iBAAM,QAAQ,KAAK,CAAC;AAAA,qBACpBA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAGjC,UAAU;AAAA,IACV,YAAY;AAAA;AAGhB,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,QAAM,UAAU,aAAA;AAEhB,MAAI,CAAC,QAAS,QAAO;AAErB,QAAM,iBAAiB,KAAK,aAAa,mBAAmB;AAE5D,MAAI,CAAC,eAAgB,QAAO;AAE5B,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,UAAU,IAAI,2BAA2B;AAChD,SAAO,aAAa,QAAQ,QAAQ;AACpC,SAAO,aAAa,cAAc,0BAA0B;AAC5D,SAAO,YAAYC,SAAAA;AACnB,SAAO,iBAAiB,SAAS,MAAM;AACrC,qBAAiB,cAAc;AAC/B,mBAAA;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEA,MAAM,4BAA4B,CAAC,UAAsB;AACvD,QAAM,EAAE,SAAS;AACjB,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,SAAS,kBAAkB,KAAK;AAEtC,kBAAgB,UAAU,IAAI,8BAA8B;AAE5D,OAAK,UAAU,IAAI,yBAAyB;AAC5C,kBAAgB,YAAY,IAAI;AAEhC,MAAI,OAAQ,iBAAgB,YAAY,MAAM;AAE9C,SAAO;AACT;AAEA,MAAA,cAAe;AAAA,EACb,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,WAAW;AAAA,IACX,MAAM;AAAA,EAAA;AAEV;;"}

package/dist/composite/navigation/elements/slider/action.mjs

@@ -1,4 +1,4 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import * as token from "@universityofmaryland/web-token-library";
 import * as typography from "@universityofmaryland/web-styles-library/typography";
 import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
 import { chevron_down } from "@universityofmaryland/web-icons-library/controls";

package/dist/composite/navigation/elements/slider/action.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"action.mjs","sources":["../../../../../source/composite/navigation/elements/slider/action.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { chevron_down as iconChevronDown } from '@universityofmaryland/web-icons-library/controls';\n\nexport type TypeActionProps = {\n  GetContainer: () => Element | null;\n  setUpcomingSlide: (arg: string) => void;\n  eventSlideLeft: () => void;\n  ATTRIBUTE_CHILD_REF: string;\n  ATTRIBUTE_PARENT_REF: string;\n};\n\nexport type TypeAction = TypeActionProps & {\n  link: HTMLAnchorElement;\n};\n\nconst ELEMENT_SLIDE_ACTION_CONTAINER = 'nav-slide-action-container';\nconst ELEMENT_SLIDE_ACTION_LINK = 'nav-slide-action-link';\nconst ELEMENT_SLIDE_ACTION_BUTTON = 'nav-slide-action-button';\n\n// prettier-ignore\nconst LinkStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_SLIDE_ACTION_LINK}`]: typography.sans.small,\n    },\n  })}\n\n  .${ELEMENT_SLIDE_ACTION_LINK} {\n    transition: color 0.3s ease-in-out;\n  }\n\n  a.${ELEMENT_SLIDE_ACTION_LINK}:hover,\n  a.${ELEMENT_SLIDE_ACTION_LINK}:focus {\n    color: ${token.color.red};\n  }\n`;\n\n// prettier-ignore\nconst ButtonStyles = `\n  .${ELEMENT_SLIDE_ACTION_BUTTON} {\n    position: absolute;\n    right: ${token.spacing.min};\n    top: 5px;\n    width: ${token.spacing.lg};\n    height: ${token.spacing.lg};\n    display: flex;\n    justify-content: center;\n  }\n\n  .${ELEMENT_SLIDE_ACTION_BUTTON}:hover svg,\n  .${ELEMENT_SLIDE_ACTION_BUTTON}:focus svg {\n    transform: rotate(-90deg) translateY(4px);\n  }\n\n  .${ELEMENT_SLIDE_ACTION_BUTTON} svg {\n    fill: ${token.color.red};\n    height: 16px;\n    width: 16px;\n    transform: rotate(-90deg) translateY(0);\n    transition: transform 0.3s ease-in-out;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_SLIDER_ACTION_ELEMENT = `\n  .${ELEMENT_SLIDE_ACTION_CONTAINER} {\n    display: flex;\n    justify-content: space-between;\n    position: relative;\n    padding-right: ${token.spacing['3xl']};\n    margin-bottom: ${token.spacing.xs};\n  }\n\n  ${LinkStyles}\n  ${ButtonStyles}\n`;\n\nconst CreateSlideButton = ({\n  link,\n  GetContainer,\n  setUpcomingSlide,\n  eventSlideLeft,\n  ATTRIBUTE_CHILD_REF,\n}: TypeAction) => {\n  const element = GetContainer();\n\n  if (!element) return null;\n\n  const childReference = link.getAttribute(ATTRIBUTE_CHILD_REF);\n\n  if (!childReference) return null;\n\n  const button = document.createElement('button');\n  button.classList.add(ELEMENT_SLIDE_ACTION_BUTTON);\n  button.setAttribute('type', 'button');\n  button.setAttribute('aria-label', 'Next level of navigation');\n  button.innerHTML = iconChevronDown;\n  button.addEventListener('click', () => {\n    setUpcomingSlide(childReference);\n    eventSlideLeft();\n  });\n\n  return button;\n};\n\nconst CreateSliderActionElement = (props: TypeAction) => {\n  const { link } = props;\n  const actionContainer = document.createElement('div');\n  const button = CreateSlideButton(props);\n\n  actionContainer.classList.add(ELEMENT_SLIDE_ACTION_CONTAINER);\n\n  link.classList.add(ELEMENT_SLIDE_ACTION_LINK);\n  actionContainer.appendChild(link);\n\n  if (button) actionContainer.appendChild(button);\n\n  return actionContainer;\n};\n\nexport default {\n  CreateElement: CreateSliderActionElement,\n  Styles: STYLES_SLIDER_ACTION_ELEMENT,\n  Elements: {\n    container: ELEMENT_SLIDE_ACTION_CONTAINER,\n    link: ELEMENT_SLIDE_ACTION_LINK,\n  },\n};\n"],"names":["iconChevronDown"],"mappings":";;;;AAiBA,MAAM,iCAAiC;AACvC,MAAM,4BAA4B;AAClC,MAAM,8BAA8B;AAGpC,MAAM,aAAa;AAAA,IACf,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,yBAAyB,EAAE,GAAG,WAAW,KAAK;AAAA,EAAA;AAEvD,CAAC,CAAC;AAAA;AAAA,KAEC,yBAAyB;AAAA;AAAA;AAAA;AAAA,MAIxB,yBAAyB;AAAA,MACzB,yBAAyB;AAAA,aAClB,MAAM,MAAM,GAAG;AAAA;AAAA;AAK5B,MAAM,eAAe;AAAA,KAChB,2BAA2B;AAAA;AAAA,aAEnB,MAAM,QAAQ,GAAG;AAAA;AAAA,aAEjB,MAAM,QAAQ,EAAE;AAAA,cACf,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,KAKzB,2BAA2B;AAAA,KAC3B,2BAA2B;AAAA;AAAA;AAAA;AAAA,KAI3B,2BAA2B;AAAA,YACpB,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,+BAA+B;AAAA,KAChC,8BAA8B;AAAA;AAAA;AAAA;AAAA,qBAId,MAAM,QAAQ,KAAK,CAAC;AAAA,qBACpB,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAGjC,UAAU;AAAA,IACV,YAAY;AAAA;AAGhB,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,QAAM,UAAU,aAAA;AAEhB,MAAI,CAAC,QAAS,QAAO;AAErB,QAAM,iBAAiB,KAAK,aAAa,mBAAmB;AAE5D,MAAI,CAAC,eAAgB,QAAO;AAE5B,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,UAAU,IAAI,2BAA2B;AAChD,SAAO,aAAa,QAAQ,QAAQ;AACpC,SAAO,aAAa,cAAc,0BAA0B;AAC5D,SAAO,YAAYA;AACnB,SAAO,iBAAiB,SAAS,MAAM;AACrC,qBAAiB,cAAc;AAC/B,mBAAA;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEA,MAAM,4BAA4B,CAAC,UAAsB;AACvD,QAAM,EAAE,SAAS;AACjB,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,SAAS,kBAAkB,KAAK;AAEtC,kBAAgB,UAAU,IAAI,8BAA8B;AAE5D,OAAK,UAAU,IAAI,yBAAyB;AAC5C,kBAAgB,YAAY,IAAI;AAEhC,MAAI,OAAQ,iBAAgB,YAAY,MAAM;AAE9C,SAAO;AACT;AAEA,MAAA,cAAe;AAAA,EACb,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,WAAW;AAAA,IACX,MAAM;AAAA,EAAA;AAEV;"}
+{"version":3,"file":"action.mjs","sources":["../../../../../source/composite/navigation/elements/slider/action.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { chevron_down as iconChevronDown } from '@universityofmaryland/web-icons-library/controls';\n\nexport type TypeActionProps = {\n  GetContainer: () => Element | null;\n  setUpcomingSlide: (arg: string) => void;\n  eventSlideLeft: () => void;\n  ATTRIBUTE_CHILD_REF: string;\n  ATTRIBUTE_PARENT_REF: string;\n};\n\nexport type TypeAction = TypeActionProps & {\n  link: HTMLAnchorElement;\n};\n\nconst ELEMENT_SLIDE_ACTION_CONTAINER = 'nav-slide-action-container';\nconst ELEMENT_SLIDE_ACTION_LINK = 'nav-slide-action-link';\nconst ELEMENT_SLIDE_ACTION_BUTTON = 'nav-slide-action-button';\n\n// prettier-ignore\nconst LinkStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_SLIDE_ACTION_LINK}`]: typography.sans.small,\n    },\n  })}\n\n  .${ELEMENT_SLIDE_ACTION_LINK} {\n    transition: color 0.3s ease-in-out;\n  }\n\n  a.${ELEMENT_SLIDE_ACTION_LINK}:hover,\n  a.${ELEMENT_SLIDE_ACTION_LINK}:focus {\n    color: ${token.color.red};\n  }\n`;\n\n// prettier-ignore\nconst ButtonStyles = `\n  .${ELEMENT_SLIDE_ACTION_BUTTON} {\n    position: absolute;\n    right: ${token.spacing.min};\n    top: 5px;\n    width: ${token.spacing.lg};\n    height: ${token.spacing.lg};\n    display: flex;\n    justify-content: center;\n  }\n\n  .${ELEMENT_SLIDE_ACTION_BUTTON}:hover svg,\n  .${ELEMENT_SLIDE_ACTION_BUTTON}:focus svg {\n    transform: rotate(-90deg) translateY(4px);\n  }\n\n  .${ELEMENT_SLIDE_ACTION_BUTTON} svg {\n    fill: ${token.color.red};\n    height: 16px;\n    width: 16px;\n    transform: rotate(-90deg) translateY(0);\n    transition: transform 0.3s ease-in-out;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_SLIDER_ACTION_ELEMENT = `\n  .${ELEMENT_SLIDE_ACTION_CONTAINER} {\n    display: flex;\n    justify-content: space-between;\n    position: relative;\n    padding-right: ${token.spacing['3xl']};\n    margin-bottom: ${token.spacing.xs};\n  }\n\n  ${LinkStyles}\n  ${ButtonStyles}\n`;\n\nconst CreateSlideButton = ({\n  link,\n  GetContainer,\n  setUpcomingSlide,\n  eventSlideLeft,\n  ATTRIBUTE_CHILD_REF,\n}: TypeAction) => {\n  const element = GetContainer();\n\n  if (!element) return null;\n\n  const childReference = link.getAttribute(ATTRIBUTE_CHILD_REF);\n\n  if (!childReference) return null;\n\n  const button = document.createElement('button');\n  button.classList.add(ELEMENT_SLIDE_ACTION_BUTTON);\n  button.setAttribute('type', 'button');\n  button.setAttribute('aria-label', 'Next level of navigation');\n  button.innerHTML = iconChevronDown;\n  button.addEventListener('click', () => {\n    setUpcomingSlide(childReference);\n    eventSlideLeft();\n  });\n\n  return button;\n};\n\nconst CreateSliderActionElement = (props: TypeAction) => {\n  const { link } = props;\n  const actionContainer = document.createElement('div');\n  const button = CreateSlideButton(props);\n\n  actionContainer.classList.add(ELEMENT_SLIDE_ACTION_CONTAINER);\n\n  link.classList.add(ELEMENT_SLIDE_ACTION_LINK);\n  actionContainer.appendChild(link);\n\n  if (button) actionContainer.appendChild(button);\n\n  return actionContainer;\n};\n\nexport default {\n  CreateElement: CreateSliderActionElement,\n  Styles: STYLES_SLIDER_ACTION_ELEMENT,\n  Elements: {\n    container: ELEMENT_SLIDE_ACTION_CONTAINER,\n    link: ELEMENT_SLIDE_ACTION_LINK,\n  },\n};\n"],"names":["iconChevronDown"],"mappings":";;;;AAiBA,MAAM,iCAAiC;AACvC,MAAM,4BAA4B;AAClC,MAAM,8BAA8B;AAGpC,MAAM,aAAa;AAAA,IACf,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,yBAAyB,EAAE,GAAG,WAAW,KAAK;AAAA,EAAA;AAEvD,CAAC,CAAC;AAAA;AAAA,KAEC,yBAAyB;AAAA;AAAA;AAAA;AAAA,MAIxB,yBAAyB;AAAA,MACzB,yBAAyB;AAAA,aAClB,MAAM,MAAM,GAAG;AAAA;AAAA;AAK5B,MAAM,eAAe;AAAA,KAChB,2BAA2B;AAAA;AAAA,aAEnB,MAAM,QAAQ,GAAG;AAAA;AAAA,aAEjB,MAAM,QAAQ,EAAE;AAAA,cACf,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,KAKzB,2BAA2B;AAAA,KAC3B,2BAA2B;AAAA;AAAA;AAAA;AAAA,KAI3B,2BAA2B;AAAA,YACpB,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,+BAA+B;AAAA,KAChC,8BAA8B;AAAA;AAAA;AAAA;AAAA,qBAId,MAAM,QAAQ,KAAK,CAAC;AAAA,qBACpB,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAGjC,UAAU;AAAA,IACV,YAAY;AAAA;AAGhB,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,QAAM,UAAU,aAAA;AAEhB,MAAI,CAAC,QAAS,QAAO;AAErB,QAAM,iBAAiB,KAAK,aAAa,mBAAmB;AAE5D,MAAI,CAAC,eAAgB,QAAO;AAE5B,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,UAAU,IAAI,2BAA2B;AAChD,SAAO,aAAa,QAAQ,QAAQ;AACpC,SAAO,aAAa,cAAc,0BAA0B;AAC5D,SAAO,YAAYA;AACnB,SAAO,iBAAiB,SAAS,MAAM;AACrC,qBAAiB,cAAc;AAC/B,mBAAA;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEA,MAAM,4BAA4B,CAAC,UAAsB;AACvD,QAAM,EAAE,SAAS;AACjB,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,SAAS,kBAAkB,KAAK;AAEtC,kBAAgB,UAAU,IAAI,8BAA8B;AAE5D,OAAK,UAAU,IAAI,yBAAyB;AAC5C,kBAAgB,YAAY,IAAI;AAEhC,MAAI,OAAQ,iBAAgB,YAAY,MAAM;AAE9C,SAAO;AACT;AAEA,MAAA,cAAe;AAAA,EACb,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,WAAW;AAAA,IACX,MAAM;AAAA,EAAA;AAEV;"}

package/dist/composite/navigation/elements/slider/index.js

@@ -1,5 +1,5 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const token = require("@universityofmaryland/web-token-library");
 const performance = require("@universityofmaryland/web-utilities-library/performance");
 const dom = require("@universityofmaryland/web-utilities-library/dom");
 const slides = require("./slides.js");

package/dist/composite/navigation/elements/slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/slider/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { findParent } from '@universityofmaryland/web-utilities-library/dom';\nimport Slides, { TypeSlideProps } from './slides';\nimport SlideFirst from './slide-first';\nimport SlideAction from './action';\n\ntype TypeSubElements = TypeSlideProps;\n\nexport type TypeNavSliderRequirements = {\n  primarySlideLinks?: HTMLElement | null;\n  primarySlidesSecondaryLinks?: HTMLElement | null;\n  primarySlideContent?: HTMLElement | null;\n  childrenSlides?: HTMLElement | null;\n  childrenSlideContent?: HTMLSlotElement[];\n  displayType?: string;\n};\n\nexport type TypeNavSliderProps = TypeSubElements & TypeNavSliderRequirements;\n\nconst ANIMATION_TIME = 300;\nconst ATTRIBUTE_CHILD_REF = 'data-child-ref';\nconst ATTRIBUTE_PARENT_REF = 'data-parent-ref';\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active';\nconst ATTRIBUTE_ACTIVE_SELECTED = 'data-selected';\nconst ATTRIBUTE_DATA_SLIDE = 'data-slide';\nconst ATTRIBUTE_DISPLAY_TYPE = 'display-type';\n\nconst DISPLAY_TYPE_DRAWER = 'drawer-nav';\nconst DISPLAY_TYPE_INTERIOR_NAV = 'interior-nav';\n\nconst ELEMENT_NAVIGATION_SLIDER_CONTAINER = 'navigation-slider-container';\nconst ELEMENT_NAVIGATION_SLIDER = 'navigation-slider';\nconst ELEMENT_SLIDER_DECORATIVE_LINE = 'navigation-slider-decorative-line';\n\nconst IS_DISPLAY_DRAWER = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_DRAWER}]`;\nconst IS_DISPLAY_INTERIOR = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_INTERIOR_NAV}]`;\n\nconst OVERWRITE_DISPLAY_DRAWER_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER}`;\nconst OVERWRITE_DISPLAY_DRAWER_DECORATION = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${ELEMENT_SLIDER_DECORATIVE_LINE}`;\nconst OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${Slides.Elements.wrapper}`;\nconst OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${SlideAction.Elements.container}`;\n\nconst OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideAction.Elements.container}`;\nconst OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideFirst.Elements.secondaryContainer} .${SlideAction.Elements.container}`;\nconst OVERWRITE_DISPLAY_INTERIOR_HEADLINE = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${Slides.Elements.headline}`;\n\n// prettier-ignore\nconst OverwriteDisplayDrawer = `\n  ${OVERWRITE_DISPLAY_DRAWER_CONTAINER} {\n    background-color: ${token.color.white};\n    padding: ${token.spacing['2xl']} 0;\n    width: calc(100vw - ${token.spacing['8xl']});\n    max-width: 400px;\n    min-width: 227px;\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER} {\n    padding: 0 ${token.spacing.md};\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_DECORATION} {\n    display: block;\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER} {\n    padding-left: ${token.spacing.sm};\n  }\n`;\n\n// prettier-ignore\nconst OverwriteDisplayInterior = `\n  ${OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n\n  ${OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER}:last-child {\n    margin-bottom: 0;\n  }\n\n  ${OVERWRITE_DISPLAY_INTERIOR_HEADLINE} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst DecorativeLineStyles = `\n  .${ELEMENT_SLIDER_DECORATIVE_LINE} {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    height: 8px;\n    background-color: ${token.color.red};\n    display: none;\n  }\n`;\n\n// prettier-ignore\nconst SliderStyles = `\n  .${ELEMENT_NAVIGATION_SLIDER} {\n    position: relative;\n    overflow: hidden;\n    height: 100%;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER} > * {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    background-color: ${token.color.white};\n    display: none;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER} > *[${ATTRIBUTE_ACTIVE_SLIDE}] {\n    display: block;\n  }\n`;\n\nconst SelectedLinkStyles = `\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_SELECTED}] {\n    position: relative;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_SELECTED}] span {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(#ffd200, #ffd200);\n  }\n`;\n\n// prettier-ignore\nconst STYLES_NAV_SLIDER_ELEMENT = `\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} {\n    position: relative;\n    height: 100%;\n    cursor: default;\n  }\n\n  ${Slides.Styles}\n  ${DecorativeLineStyles}\n  ${SliderStyles}\n  ${SelectedLinkStyles}\n  ${OverwriteDisplayDrawer}\n  ${OverwriteDisplayInterior}\n`;\n\nconst CreateChildrenElements = (props: TypeNavSliderProps) => {\n  const { displayType } = props;\n  const sliderContainer = document.createElement('div');\n  const slider = document.createElement('div');\n  const decorativeLine = document.createElement('div');\n  const isDisplayDrawerNav = displayType === DISPLAY_TYPE_DRAWER;\n  let displayTypeSetting = DISPLAY_TYPE_INTERIOR_NAV;\n\n  if (isDisplayDrawerNav) displayTypeSetting = DISPLAY_TYPE_DRAWER;\n\n  Slides.CreateElement({ ...props, slider });\n\n  slider.classList.add(ELEMENT_NAVIGATION_SLIDER);\n\n  decorativeLine.classList.add(ELEMENT_SLIDER_DECORATIVE_LINE);\n  sliderContainer.appendChild(decorativeLine);\n\n  sliderContainer.setAttribute(ATTRIBUTE_DISPLAY_TYPE, displayTypeSetting);\n  sliderContainer.classList.add(ELEMENT_NAVIGATION_SLIDER_CONTAINER);\n  sliderContainer.appendChild(slider);\n\n  sliderContainer.addEventListener('click', (event) => {\n    event.stopPropagation();\n  });\n\n  return sliderContainer;\n};\n\nconst CreateNavSliderElement = (props: TypeNavSliderRequirements) =>\n  (() => {\n    const elementContainer = document.createElement('div');\n    const getUpcomingSlide = () => {\n      const upcomingSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_PARENT_REF}=${upcomingSlideRef}]`,\n      ) as HTMLDivElement;\n\n      return upcomingSlide;\n    };\n    const getUpcomingSlideParent = () => {\n      const upcomingSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_CHILD_REF}=${upcomingSlideRef}]`,\n      ) as HTMLDivElement;\n      const parent = findParent({\n        element: upcomingSlide,\n        attr: ATTRIBUTE_DATA_SLIDE,\n      });\n\n      return parent;\n    };\n    const sizeContainer = ({\n      withTransition = false,\n    }: {\n      withTransition?: boolean;\n    }) => {\n      let containerSize = 500;\n      if (currentSlide) {\n        const children = Array.from(currentSlide.children) as HTMLDivElement[];\n        containerSize = children.reduce((acc, currentElement) => {\n          return acc + currentElement.offsetHeight;\n        }, 50);\n      }\n\n      elementContainer.style.height = `${containerSize}px`;\n      if (withTransition)\n        elementContainer.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;\n\n      setTimeout(() => {\n        elementContainer.style.transition = 'none';\n      }, ANIMATION_TIME);\n    };\n    const eventSlide = ({ isRight = false }: { isRight?: boolean }) => {\n      const activeSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_ACTIVE_SLIDE}]`,\n      ) as HTMLDivElement;\n      const upcomingSlide = isRight\n        ? getUpcomingSlideParent()\n        : getUpcomingSlide();\n      const slides = [activeSlide, upcomingSlide];\n\n      if (!upcomingSlide) {\n        console.error('Missing slide for slide event');\n        return null;\n      }\n      const firstLink = upcomingSlide.querySelector('a') as HTMLAnchorElement;\n\n      const animate = () => {\n        let startPositionForUpcomingSlide = '100%';\n        let transitionPosition = '-100%';\n\n        if (isRight) {\n          startPositionForUpcomingSlide = '-100%';\n          transitionPosition = '100%';\n        }\n\n        upcomingSlide.style.left = startPositionForUpcomingSlide;\n        upcomingSlide.style.display = 'block';\n\n        setTimeout(() => {\n          slides.forEach((slide) => {\n            slide.style.transition = `transform ${ANIMATION_TIME}ms ease-in-out`;\n            slide.style.transform = `translateX(${transitionPosition})`;\n          });\n          setCurrentSlide({ element: upcomingSlide, withTransition: true });\n        }, 100);\n\n        setTimeout(() => {\n          slides.forEach((slide) => {\n            slide.style.transition = 'none';\n            slide.style.transform = 'translateX(0)';\n            slide.style.left = '0';\n            slide.removeAttribute('style');\n          });\n\n          upcomingSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n          activeSlide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n          if (firstLink) firstLink.focus();\n        }, ANIMATION_TIME + 100);\n      };\n\n      if (!upcomingSlide || !activeSlide)\n        throw new Error('Missing slide for slide event');\n\n      animate();\n\n      if (upcomingSlide.offsetHeight > elementContainer.offsetHeight) {\n        setTimeout(() => {\n          upcomingSlide.style.overflowY = `scroll`;\n          upcomingSlide.style.height = `100%`;\n        }, ANIMATION_TIME + 100);\n      }\n    };\n    const setUpcomingSlide = (arg: string) => {\n      upcomingSlideRef = arg;\n    };\n    const setCurrentSlide = ({\n      element,\n      withTransition = false,\n    }: {\n      element: HTMLElement;\n      withTransition?: boolean;\n    }) => {\n      currentSlide = element;\n\n      setTimeout(() => {\n        sizeContainer({ withTransition });\n      }, 100);\n    };\n    const eventSlideLeft = () => eventSlide({ isRight: false });\n    const eventSlideRight = () => eventSlide({ isRight: true });\n    const eventReize = () => {\n      setTimeout(() => {\n        sizeContainer({ withTransition: false });\n      }, 200);\n    };\n    const GetContainer = () => elementContainer;\n    let upcomingSlideRef: string | null = null;\n    let currentSlide: HTMLElement | null = null;\n\n    const children = CreateChildrenElements({\n      ...props,\n      GetContainer,\n      eventSlideLeft,\n      eventSlideRight,\n      setUpcomingSlide,\n      setCurrentSlide,\n      ATTRIBUTE_CHILD_REF,\n      ATTRIBUTE_PARENT_REF,\n      ATTRIBUTE_DATA_SLIDE,\n      ATTRIBUTE_ACTIVE_SLIDE,\n      currentSlide,\n    });\n\n    elementContainer.appendChild(children);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventReize();\n      }, 20),\n    );\n\n    return {\n      container: elementContainer,\n      events: {\n        resize: eventReize,\n      },\n    };\n  })();\n\nexport default {\n  CreateElement: CreateNavSliderElement,\n  Styles: STYLES_NAV_SLIDER_ELEMENT,\n  Elements: {\n    slider: ELEMENT_NAVIGATION_SLIDER,\n  },\n};\n"],"names":["Slides","SlideAction","SlideFirst","token","findParent","children","slides","debounce"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,iBAAiB;AACvB,MAAM,sBAAsB;AAC5B,MAAM,uBAAuB;AAC7B,MAAM,yBAAyB;AAC/B,MAAM,4BAA4B;AAClC,MAAM,uBAAuB;AAC7B,MAAM,yBAAyB;AAE/B,MAAM,sBAAsB;AAC5B,MAAM,4BAA4B;AAElC,MAAM,sCAAsC;AAC5C,MAAM,4BAA4B;AAClC,MAAM,iCAAiC;AAEvC,MAAM,oBAAoB,IAAI,sBAAsB,IAAI,mBAAmB;AAC3E,MAAM,sBAAsB,IAAI,sBAAsB,IAAI,yBAAyB;AAEnF,MAAM,qCAAqC,IAAI,mCAAmC,GAAG,iBAAiB;AACtG,MAAM,sCAAsC,IAAI,mCAAmC,GAAG,iBAAiB,KAAK,8BAA8B;AAC1I,MAAM,yCAAyC,IAAI,mCAAmC,GAAG,iBAAiB,KAAKA,OAAO,SAAS,OAAO;AACtI,MAAM,4CAA4C,IAAI,mCAAmC,GAAG,iBAAiB,KAAKC,OAAY,SAAS,SAAS;AAEhJ,MAAM,8CAA8C,IAAI,mCAAmC,GAAG,mBAAmB,KAAKA,OAAY,SAAS,SAAS;AACpJ,MAAM,iDAAiD,IAAI,mCAAmC,GAAG,mBAAmB,KAAKC,WAAW,SAAS,kBAAkB,KAAKD,OAAY,SAAS,SAAS;AAClM,MAAM,sCAAsC,IAAI,mCAAmC,GAAG,mBAAmB,KAAKD,OAAO,SAAS,QAAQ;AAGtI,MAAM,yBAAyB;AAAA,IAC3B,kCAAkC;AAAA,wBACdG,iBAAM,MAAM,KAAK;AAAA,eAC1BA,iBAAM,QAAQ,KAAK,CAAC;AAAA,0BACTA,iBAAM,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAK1C,sCAAsC;AAAA,iBACzBA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG7B,mCAAmC;AAAA;AAAA;AAAA;AAAA,IAInC,yCAAyC;AAAA,oBACzBA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAKpC,MAAM,2BAA2B;AAAA,IAC7B,2CAA2C;AAAA,+BAChBA,iBAAM,MAAM,KAAK,KAAK;AAAA,sBAC/BA,iBAAM,QAAQ,EAAE;AAAA,qBACjBA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAGjC,8CAA8C;AAAA;AAAA;AAAA;AAAA,IAI9C,mCAAmC;AAAA,+BACRA,iBAAM,MAAM,KAAK,KAAK;AAAA,sBAC/BA,iBAAM,QAAQ,EAAE;AAAA,qBACjBA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAKrC,MAAM,uBAAuB;AAAA,KACxB,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMXA,iBAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAMvC,MAAM,eAAe;AAAA,KAChB,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMzB,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKNA,iBAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,KAIpC,yBAAyB,QAAQ,sBAAsB;AAAA;AAAA;AAAA;AAK5D,MAAM,qBAAqB;AAAA,KACtB,mCAAmC,MAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA,KAIlE,mCAAmC,MAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWvE,MAAM,4BAA4B;AAAA,KAC7B,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMpCH,OAAO,MAAM;AAAA,IACb,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,sBAAsB;AAAA,IACtB,wBAAwB;AAAA;AAG5B,MAAM,yBAAyB,CAAC,UAA8B;AAC5D,QAAM,EAAE,gBAAgB;AACxB,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,qBAAqB,gBAAgB;AAC3C,MAAI,qBAAqB;AAEzB,MAAI,mBAAoB,sBAAqB;AAE7CA,SAAO,cAAc,EAAE,GAAG,OAAO,QAAQ;AAEzC,SAAO,UAAU,IAAI,yBAAyB;AAE9C,iBAAe,UAAU,IAAI,8BAA8B;AAC3D,kBAAgB,YAAY,cAAc;AAE1C,kBAAgB,aAAa,wBAAwB,kBAAkB;AACvE,kBAAgB,UAAU,IAAI,mCAAmC;AACjE,kBAAgB,YAAY,MAAM;AAElC,kBAAgB,iBAAiB,SAAS,CAAC,UAAU;AACnD,UAAM,gBAAA;AAAA,EACR,CAAC;AAED,SAAO;AACT;AAEA,MAAM,yBAAyB,CAAC,WAC7B,MAAM;AACL,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,mBAAmB,MAAM;AAC7B,UAAM,gBAAgB,iBAAiB;AAAA,MACrC,IAAI,oBAAoB,IAAI,gBAAgB;AAAA,IAAA;AAG9C,WAAO;AAAA,EACT;AACA,QAAM,yBAAyB,MAAM;AACnC,UAAM,gBAAgB,iBAAiB;AAAA,MACrC,IAAI,mBAAmB,IAAI,gBAAgB;AAAA,IAAA;AAE7C,UAAM,SAASI,IAAAA,WAAW;AAAA,MACxB,SAAS;AAAA,MACT,MAAM;AAAA,IAAA,CACP;AAED,WAAO;AAAA,EACT;AACA,QAAM,gBAAgB,CAAC;AAAA,IACrB,iBAAiB;AAAA,EAAA,MAGb;AACJ,QAAI,gBAAgB;AACpB,QAAI,cAAc;AAChB,YAAMC,YAAW,MAAM,KAAK,aAAa,QAAQ;AACjD,sBAAgBA,UAAS,OAAO,CAAC,KAAK,mBAAmB;AACvD,eAAO,MAAM,eAAe;AAAA,MAC9B,GAAG,EAAE;AAAA,IACP;AAEA,qBAAiB,MAAM,SAAS,GAAG,aAAa;AAChD,QAAI;AACF,uBAAiB,MAAM,aAAa,UAAU,cAAc;AAE9D,eAAW,MAAM;AACf,uBAAiB,MAAM,aAAa;AAAA,IACtC,GAAG,cAAc;AAAA,EACnB;AACA,QAAM,aAAa,CAAC,EAAE,UAAU,YAAmC;AACjE,UAAM,cAAc,iBAAiB;AAAA,MACnC,IAAI,sBAAsB;AAAA,IAAA;AAE5B,UAAM,gBAAgB,UAClB,uBAAA,IACA,iBAAA;AACJ,UAAMC,UAAS,CAAC,aAAa,aAAa;AAE1C,QAAI,CAAC,eAAe;AAClB,cAAQ,MAAM,+BAA+B;AAC7C,aAAO;AAAA,IACT;AACA,UAAM,YAAY,cAAc,cAAc,GAAG;AAEjD,UAAM,UAAU,MAAM;AACpB,UAAI,gCAAgC;AACpC,UAAI,qBAAqB;AAEzB,UAAI,SAAS;AACX,wCAAgC;AAChC,6BAAqB;AAAA,MACvB;AAEA,oBAAc,MAAM,OAAO;AAC3B,oBAAc,MAAM,UAAU;AAE9B,iBAAW,MAAM;AACf,QAAAA,QAAO,QAAQ,CAAC,UAAU;AACxB,gBAAM,MAAM,aAAa,aAAa,cAAc;AACpD,gBAAM,MAAM,YAAY,cAAc,kBAAkB;AAAA,QAC1D,CAAC;AACD,wBAAgB,EAAE,SAAS,eAAe,gBAAgB,MAAM;AAAA,MAClE,GAAG,GAAG;AAEN,iBAAW,MAAM;AACf,QAAAA,QAAO,QAAQ,CAAC,UAAU;AACxB,gBAAM,MAAM,aAAa;AACzB,gBAAM,MAAM,YAAY;AACxB,gBAAM,MAAM,OAAO;AACnB,gBAAM,gBAAgB,OAAO;AAAA,QAC/B,CAAC;AAED,sBAAc,aAAa,wBAAwB,EAAE;AACrD,oBAAY,gBAAgB,sBAAsB;AAClD,YAAI,qBAAqB,MAAA;AAAA,MAC3B,GAAG,iBAAiB,GAAG;AAAA,IACzB;AAEA,QAAI,CAAC,iBAAiB,CAAC;AACrB,YAAM,IAAI,MAAM,+BAA+B;AAEjD,YAAA;AAEA,QAAI,cAAc,eAAe,iBAAiB,cAAc;AAC9D,iBAAW,MAAM;AACf,sBAAc,MAAM,YAAY;AAChC,sBAAc,MAAM,SAAS;AAAA,MAC/B,GAAG,iBAAiB,GAAG;AAAA,IACzB;AAAA,EACF;AACA,QAAM,mBAAmB,CAAC,QAAgB;AACxC,uBAAmB;AAAA,EACrB;AACA,QAAM,kBAAkB,CAAC;AAAA,IACvB;AAAA,IACA,iBAAiB;AAAA,EAAA,MAIb;AACJ,mBAAe;AAEf,eAAW,MAAM;AACf,oBAAc,EAAE,gBAAgB;AAAA,IAClC,GAAG,GAAG;AAAA,EACR;AACA,QAAM,iBAAiB,MAAM,WAAW,EAAE,SAAS,OAAO;AAC1D,QAAM,kBAAkB,MAAM,WAAW,EAAE,SAAS,MAAM;AAC1D,QAAM,aAAa,MAAM;AACvB,eAAW,MAAM;AACf,oBAAc,EAAE,gBAAgB,OAAO;AAAA,IACzC,GAAG,GAAG;AAAA,EACR;AACA,QAAM,eAAe,MAAM;AAC3B,MAAI,mBAAkC;AACtC,MAAI,eAAmC;AAEvC,QAAM,WAAW,uBAAuB;AAAA,IACtC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,mBAAiB,YAAY,QAAQ;AAErC,SAAO;AAAA,IACL;AAAA,IACAC,YAAAA,SAAS,MAAM;AACb,iBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,SAAO;AAAA,IACL,WAAW;AAAA,IACX,QAAQ;AAAA,MACN,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,GAAA;AAEF,MAAA,kBAAe;AAAA,EACb,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,QAAQ;AAAA,EAAA;AAEZ;;"}
+{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/slider/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { findParent } from '@universityofmaryland/web-utilities-library/dom';\nimport Slides, { TypeSlideProps } from './slides';\nimport SlideFirst from './slide-first';\nimport SlideAction from './action';\n\ntype TypeSubElements = TypeSlideProps;\n\nexport type TypeNavSliderRequirements = {\n  primarySlideLinks?: HTMLElement | null;\n  primarySlidesSecondaryLinks?: HTMLElement | null;\n  primarySlideContent?: HTMLElement | null;\n  childrenSlides?: HTMLElement | null;\n  childrenSlideContent?: HTMLSlotElement[];\n  displayType?: string;\n};\n\nexport type TypeNavSliderProps = TypeSubElements & TypeNavSliderRequirements;\n\nconst ANIMATION_TIME = 300;\nconst ATTRIBUTE_CHILD_REF = 'data-child-ref';\nconst ATTRIBUTE_PARENT_REF = 'data-parent-ref';\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active';\nconst ATTRIBUTE_ACTIVE_SELECTED = 'data-selected';\nconst ATTRIBUTE_DATA_SLIDE = 'data-slide';\nconst ATTRIBUTE_DISPLAY_TYPE = 'display-type';\n\nconst DISPLAY_TYPE_DRAWER = 'drawer-nav';\nconst DISPLAY_TYPE_INTERIOR_NAV = 'interior-nav';\n\nconst ELEMENT_NAVIGATION_SLIDER_CONTAINER = 'navigation-slider-container';\nconst ELEMENT_NAVIGATION_SLIDER = 'navigation-slider';\nconst ELEMENT_SLIDER_DECORATIVE_LINE = 'navigation-slider-decorative-line';\n\nconst IS_DISPLAY_DRAWER = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_DRAWER}]`;\nconst IS_DISPLAY_INTERIOR = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_INTERIOR_NAV}]`;\n\nconst OVERWRITE_DISPLAY_DRAWER_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER}`;\nconst OVERWRITE_DISPLAY_DRAWER_DECORATION = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${ELEMENT_SLIDER_DECORATIVE_LINE}`;\nconst OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${Slides.Elements.wrapper}`;\nconst OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${SlideAction.Elements.container}`;\n\nconst OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideAction.Elements.container}`;\nconst OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideFirst.Elements.secondaryContainer} .${SlideAction.Elements.container}`;\nconst OVERWRITE_DISPLAY_INTERIOR_HEADLINE = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${Slides.Elements.headline}`;\n\n// prettier-ignore\nconst OverwriteDisplayDrawer = `\n  ${OVERWRITE_DISPLAY_DRAWER_CONTAINER} {\n    background-color: ${token.color.white};\n    padding: ${token.spacing['2xl']} 0;\n    width: calc(100vw - ${token.spacing['8xl']});\n    max-width: 400px;\n    min-width: 227px;\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER} {\n    padding: 0 ${token.spacing.md};\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_DECORATION} {\n    display: block;\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER} {\n    padding-left: ${token.spacing.sm};\n  }\n`;\n\n// prettier-ignore\nconst OverwriteDisplayInterior = `\n  ${OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n\n  ${OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER}:last-child {\n    margin-bottom: 0;\n  }\n\n  ${OVERWRITE_DISPLAY_INTERIOR_HEADLINE} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst DecorativeLineStyles = `\n  .${ELEMENT_SLIDER_DECORATIVE_LINE} {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    height: 8px;\n    background-color: ${token.color.red};\n    display: none;\n  }\n`;\n\n// prettier-ignore\nconst SliderStyles = `\n  .${ELEMENT_NAVIGATION_SLIDER} {\n    position: relative;\n    overflow: hidden;\n    height: 100%;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER} > * {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    background-color: ${token.color.white};\n    display: none;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER} > *[${ATTRIBUTE_ACTIVE_SLIDE}] {\n    display: block;\n  }\n`;\n\nconst SelectedLinkStyles = `\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_SELECTED}] {\n    position: relative;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_SELECTED}] span {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(#ffd200, #ffd200);\n  }\n`;\n\n// prettier-ignore\nconst STYLES_NAV_SLIDER_ELEMENT = `\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} {\n    position: relative;\n    height: 100%;\n    cursor: default;\n  }\n\n  ${Slides.Styles}\n  ${DecorativeLineStyles}\n  ${SliderStyles}\n  ${SelectedLinkStyles}\n  ${OverwriteDisplayDrawer}\n  ${OverwriteDisplayInterior}\n`;\n\nconst CreateChildrenElements = (props: TypeNavSliderProps) => {\n  const { displayType } = props;\n  const sliderContainer = document.createElement('div');\n  const slider = document.createElement('div');\n  const decorativeLine = document.createElement('div');\n  const isDisplayDrawerNav = displayType === DISPLAY_TYPE_DRAWER;\n  let displayTypeSetting = DISPLAY_TYPE_INTERIOR_NAV;\n\n  if (isDisplayDrawerNav) displayTypeSetting = DISPLAY_TYPE_DRAWER;\n\n  Slides.CreateElement({ ...props, slider });\n\n  slider.classList.add(ELEMENT_NAVIGATION_SLIDER);\n\n  decorativeLine.classList.add(ELEMENT_SLIDER_DECORATIVE_LINE);\n  sliderContainer.appendChild(decorativeLine);\n\n  sliderContainer.setAttribute(ATTRIBUTE_DISPLAY_TYPE, displayTypeSetting);\n  sliderContainer.classList.add(ELEMENT_NAVIGATION_SLIDER_CONTAINER);\n  sliderContainer.appendChild(slider);\n\n  sliderContainer.addEventListener('click', (event) => {\n    event.stopPropagation();\n  });\n\n  return sliderContainer;\n};\n\nconst CreateNavSliderElement = (props: TypeNavSliderRequirements) =>\n  (() => {\n    const elementContainer = document.createElement('div');\n    const getUpcomingSlide = () => {\n      const upcomingSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_PARENT_REF}=${upcomingSlideRef}]`,\n      ) as HTMLDivElement;\n\n      return upcomingSlide;\n    };\n    const getUpcomingSlideParent = () => {\n      const upcomingSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_CHILD_REF}=${upcomingSlideRef}]`,\n      ) as HTMLDivElement;\n      const parent = findParent({\n        element: upcomingSlide,\n        attr: ATTRIBUTE_DATA_SLIDE,\n      });\n\n      return parent;\n    };\n    const sizeContainer = ({\n      withTransition = false,\n    }: {\n      withTransition?: boolean;\n    }) => {\n      let containerSize = 500;\n      if (currentSlide) {\n        const children = Array.from(currentSlide.children) as HTMLDivElement[];\n        containerSize = children.reduce((acc, currentElement) => {\n          return acc + currentElement.offsetHeight;\n        }, 50);\n      }\n\n      elementContainer.style.height = `${containerSize}px`;\n      if (withTransition)\n        elementContainer.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;\n\n      setTimeout(() => {\n        elementContainer.style.transition = 'none';\n      }, ANIMATION_TIME);\n    };\n    const eventSlide = ({ isRight = false }: { isRight?: boolean }) => {\n      const activeSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_ACTIVE_SLIDE}]`,\n      ) as HTMLDivElement;\n      const upcomingSlide = isRight\n        ? getUpcomingSlideParent()\n        : getUpcomingSlide();\n      const slides = [activeSlide, upcomingSlide];\n\n      if (!upcomingSlide) {\n        console.error('Missing slide for slide event');\n        return null;\n      }\n      const firstLink = upcomingSlide.querySelector('a') as HTMLAnchorElement;\n\n      const animate = () => {\n        let startPositionForUpcomingSlide = '100%';\n        let transitionPosition = '-100%';\n\n        if (isRight) {\n          startPositionForUpcomingSlide = '-100%';\n          transitionPosition = '100%';\n        }\n\n        upcomingSlide.style.left = startPositionForUpcomingSlide;\n        upcomingSlide.style.display = 'block';\n\n        setTimeout(() => {\n          slides.forEach((slide) => {\n            slide.style.transition = `transform ${ANIMATION_TIME}ms ease-in-out`;\n            slide.style.transform = `translateX(${transitionPosition})`;\n          });\n          setCurrentSlide({ element: upcomingSlide, withTransition: true });\n        }, 100);\n\n        setTimeout(() => {\n          slides.forEach((slide) => {\n            slide.style.transition = 'none';\n            slide.style.transform = 'translateX(0)';\n            slide.style.left = '0';\n            slide.removeAttribute('style');\n          });\n\n          upcomingSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n          activeSlide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n          if (firstLink) firstLink.focus();\n        }, ANIMATION_TIME + 100);\n      };\n\n      if (!upcomingSlide || !activeSlide)\n        throw new Error('Missing slide for slide event');\n\n      animate();\n\n      if (upcomingSlide.offsetHeight > elementContainer.offsetHeight) {\n        setTimeout(() => {\n          upcomingSlide.style.overflowY = `scroll`;\n          upcomingSlide.style.height = `100%`;\n        }, ANIMATION_TIME + 100);\n      }\n    };\n    const setUpcomingSlide = (arg: string) => {\n      upcomingSlideRef = arg;\n    };\n    const setCurrentSlide = ({\n      element,\n      withTransition = false,\n    }: {\n      element: HTMLElement;\n      withTransition?: boolean;\n    }) => {\n      currentSlide = element;\n\n      setTimeout(() => {\n        sizeContainer({ withTransition });\n      }, 100);\n    };\n    const eventSlideLeft = () => eventSlide({ isRight: false });\n    const eventSlideRight = () => eventSlide({ isRight: true });\n    const eventReize = () => {\n      setTimeout(() => {\n        sizeContainer({ withTransition: false });\n      }, 200);\n    };\n    const GetContainer = () => elementContainer;\n    let upcomingSlideRef: string | null = null;\n    let currentSlide: HTMLElement | null = null;\n\n    const children = CreateChildrenElements({\n      ...props,\n      GetContainer,\n      eventSlideLeft,\n      eventSlideRight,\n      setUpcomingSlide,\n      setCurrentSlide,\n      ATTRIBUTE_CHILD_REF,\n      ATTRIBUTE_PARENT_REF,\n      ATTRIBUTE_DATA_SLIDE,\n      ATTRIBUTE_ACTIVE_SLIDE,\n      currentSlide,\n    });\n\n    elementContainer.appendChild(children);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventReize();\n      }, 20),\n    );\n\n    return {\n      container: elementContainer,\n      events: {\n        resize: eventReize,\n      },\n    };\n  })();\n\nexport default {\n  CreateElement: CreateNavSliderElement,\n  Styles: STYLES_NAV_SLIDER_ELEMENT,\n  Elements: {\n    slider: ELEMENT_NAVIGATION_SLIDER,\n  },\n};\n"],"names":["Slides","SlideAction","SlideFirst","token","findParent","children","slides","debounce"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,iBAAiB;AACvB,MAAM,sBAAsB;AAC5B,MAAM,uBAAuB;AAC7B,MAAM,yBAAyB;AAC/B,MAAM,4BAA4B;AAClC,MAAM,uBAAuB;AAC7B,MAAM,yBAAyB;AAE/B,MAAM,sBAAsB;AAC5B,MAAM,4BAA4B;AAElC,MAAM,sCAAsC;AAC5C,MAAM,4BAA4B;AAClC,MAAM,iCAAiC;AAEvC,MAAM,oBAAoB,IAAI,sBAAsB,IAAI,mBAAmB;AAC3E,MAAM,sBAAsB,IAAI,sBAAsB,IAAI,yBAAyB;AAEnF,MAAM,qCAAqC,IAAI,mCAAmC,GAAG,iBAAiB;AACtG,MAAM,sCAAsC,IAAI,mCAAmC,GAAG,iBAAiB,KAAK,8BAA8B;AAC1I,MAAM,yCAAyC,IAAI,mCAAmC,GAAG,iBAAiB,KAAKA,OAAO,SAAS,OAAO;AACtI,MAAM,4CAA4C,IAAI,mCAAmC,GAAG,iBAAiB,KAAKC,OAAY,SAAS,SAAS;AAEhJ,MAAM,8CAA8C,IAAI,mCAAmC,GAAG,mBAAmB,KAAKA,OAAY,SAAS,SAAS;AACpJ,MAAM,iDAAiD,IAAI,mCAAmC,GAAG,mBAAmB,KAAKC,WAAW,SAAS,kBAAkB,KAAKD,OAAY,SAAS,SAAS;AAClM,MAAM,sCAAsC,IAAI,mCAAmC,GAAG,mBAAmB,KAAKD,OAAO,SAAS,QAAQ;AAGtI,MAAM,yBAAyB;AAAA,IAC3B,kCAAkC;AAAA,wBACdG,iBAAM,MAAM,KAAK;AAAA,eAC1BA,iBAAM,QAAQ,KAAK,CAAC;AAAA,0BACTA,iBAAM,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAK1C,sCAAsC;AAAA,iBACzBA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG7B,mCAAmC;AAAA;AAAA;AAAA;AAAA,IAInC,yCAAyC;AAAA,oBACzBA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAKpC,MAAM,2BAA2B;AAAA,IAC7B,2CAA2C;AAAA,+BAChBA,iBAAM,MAAM,KAAK,KAAK;AAAA,sBAC/BA,iBAAM,QAAQ,EAAE;AAAA,qBACjBA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAGjC,8CAA8C;AAAA;AAAA;AAAA;AAAA,IAI9C,mCAAmC;AAAA,+BACRA,iBAAM,MAAM,KAAK,KAAK;AAAA,sBAC/BA,iBAAM,QAAQ,EAAE;AAAA,qBACjBA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAKrC,MAAM,uBAAuB;AAAA,KACxB,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMXA,iBAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAMvC,MAAM,eAAe;AAAA,KAChB,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMzB,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKNA,iBAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,KAIpC,yBAAyB,QAAQ,sBAAsB;AAAA;AAAA;AAAA;AAK5D,MAAM,qBAAqB;AAAA,KACtB,mCAAmC,MAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA,KAIlE,mCAAmC,MAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWvE,MAAM,4BAA4B;AAAA,KAC7B,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMpCH,OAAO,MAAM;AAAA,IACb,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,sBAAsB;AAAA,IACtB,wBAAwB;AAAA;AAG5B,MAAM,yBAAyB,CAAC,UAA8B;AAC5D,QAAM,EAAE,gBAAgB;AACxB,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,qBAAqB,gBAAgB;AAC3C,MAAI,qBAAqB;AAEzB,MAAI,mBAAoB,sBAAqB;AAE7CA,SAAO,cAAc,EAAE,GAAG,OAAO,QAAQ;AAEzC,SAAO,UAAU,IAAI,yBAAyB;AAE9C,iBAAe,UAAU,IAAI,8BAA8B;AAC3D,kBAAgB,YAAY,cAAc;AAE1C,kBAAgB,aAAa,wBAAwB,kBAAkB;AACvE,kBAAgB,UAAU,IAAI,mCAAmC;AACjE,kBAAgB,YAAY,MAAM;AAElC,kBAAgB,iBAAiB,SAAS,CAAC,UAAU;AACnD,UAAM,gBAAA;AAAA,EACR,CAAC;AAED,SAAO;AACT;AAEA,MAAM,yBAAyB,CAAC,WAC7B,MAAM;AACL,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,mBAAmB,MAAM;AAC7B,UAAM,gBAAgB,iBAAiB;AAAA,MACrC,IAAI,oBAAoB,IAAI,gBAAgB;AAAA,IAAA;AAG9C,WAAO;AAAA,EACT;AACA,QAAM,yBAAyB,MAAM;AACnC,UAAM,gBAAgB,iBAAiB;AAAA,MACrC,IAAI,mBAAmB,IAAI,gBAAgB;AAAA,IAAA;AAE7C,UAAM,SAASI,IAAAA,WAAW;AAAA,MACxB,SAAS;AAAA,MACT,MAAM;AAAA,IAAA,CACP;AAED,WAAO;AAAA,EACT;AACA,QAAM,gBAAgB,CAAC;AAAA,IACrB,iBAAiB;AAAA,EAAA,MAGb;AACJ,QAAI,gBAAgB;AACpB,QAAI,cAAc;AAChB,YAAMC,YAAW,MAAM,KAAK,aAAa,QAAQ;AACjD,sBAAgBA,UAAS,OAAO,CAAC,KAAK,mBAAmB;AACvD,eAAO,MAAM,eAAe;AAAA,MAC9B,GAAG,EAAE;AAAA,IACP;AAEA,qBAAiB,MAAM,SAAS,GAAG,aAAa;AAChD,QAAI;AACF,uBAAiB,MAAM,aAAa,UAAU,cAAc;AAE9D,eAAW,MAAM;AACf,uBAAiB,MAAM,aAAa;AAAA,IACtC,GAAG,cAAc;AAAA,EACnB;AACA,QAAM,aAAa,CAAC,EAAE,UAAU,YAAmC;AACjE,UAAM,cAAc,iBAAiB;AAAA,MACnC,IAAI,sBAAsB;AAAA,IAAA;AAE5B,UAAM,gBAAgB,UAClB,uBAAA,IACA,iBAAA;AACJ,UAAMC,UAAS,CAAC,aAAa,aAAa;AAE1C,QAAI,CAAC,eAAe;AAClB,cAAQ,MAAM,+BAA+B;AAC7C,aAAO;AAAA,IACT;AACA,UAAM,YAAY,cAAc,cAAc,GAAG;AAEjD,UAAM,UAAU,MAAM;AACpB,UAAI,gCAAgC;AACpC,UAAI,qBAAqB;AAEzB,UAAI,SAAS;AACX,wCAAgC;AAChC,6BAAqB;AAAA,MACvB;AAEA,oBAAc,MAAM,OAAO;AAC3B,oBAAc,MAAM,UAAU;AAE9B,iBAAW,MAAM;AACf,QAAAA,QAAO,QAAQ,CAAC,UAAU;AACxB,gBAAM,MAAM,aAAa,aAAa,cAAc;AACpD,gBAAM,MAAM,YAAY,cAAc,kBAAkB;AAAA,QAC1D,CAAC;AACD,wBAAgB,EAAE,SAAS,eAAe,gBAAgB,MAAM;AAAA,MAClE,GAAG,GAAG;AAEN,iBAAW,MAAM;AACf,QAAAA,QAAO,QAAQ,CAAC,UAAU;AACxB,gBAAM,MAAM,aAAa;AACzB,gBAAM,MAAM,YAAY;AACxB,gBAAM,MAAM,OAAO;AACnB,gBAAM,gBAAgB,OAAO;AAAA,QAC/B,CAAC;AAED,sBAAc,aAAa,wBAAwB,EAAE;AACrD,oBAAY,gBAAgB,sBAAsB;AAClD,YAAI,qBAAqB,MAAA;AAAA,MAC3B,GAAG,iBAAiB,GAAG;AAAA,IACzB;AAEA,QAAI,CAAC,iBAAiB,CAAC;AACrB,YAAM,IAAI,MAAM,+BAA+B;AAEjD,YAAA;AAEA,QAAI,cAAc,eAAe,iBAAiB,cAAc;AAC9D,iBAAW,MAAM;AACf,sBAAc,MAAM,YAAY;AAChC,sBAAc,MAAM,SAAS;AAAA,MAC/B,GAAG,iBAAiB,GAAG;AAAA,IACzB;AAAA,EACF;AACA,QAAM,mBAAmB,CAAC,QAAgB;AACxC,uBAAmB;AAAA,EACrB;AACA,QAAM,kBAAkB,CAAC;AAAA,IACvB;AAAA,IACA,iBAAiB;AAAA,EAAA,MAIb;AACJ,mBAAe;AAEf,eAAW,MAAM;AACf,oBAAc,EAAE,gBAAgB;AAAA,IAClC,GAAG,GAAG;AAAA,EACR;AACA,QAAM,iBAAiB,MAAM,WAAW,EAAE,SAAS,OAAO;AAC1D,QAAM,kBAAkB,MAAM,WAAW,EAAE,SAAS,MAAM;AAC1D,QAAM,aAAa,MAAM;AACvB,eAAW,MAAM;AACf,oBAAc,EAAE,gBAAgB,OAAO;AAAA,IACzC,GAAG,GAAG;AAAA,EACR;AACA,QAAM,eAAe,MAAM;AAC3B,MAAI,mBAAkC;AACtC,MAAI,eAAmC;AAEvC,QAAM,WAAW,uBAAuB;AAAA,IACtC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,mBAAiB,YAAY,QAAQ;AAErC,SAAO;AAAA,IACL;AAAA,IACAC,YAAAA,SAAS,MAAM;AACb,iBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,SAAO;AAAA,IACL,WAAW;AAAA,IACX,QAAQ;AAAA,MACN,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,GAAA;AAEF,MAAA,kBAAe;AAAA,EACb,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,QAAQ;AAAA,EAAA;AAEZ;;"}

package/dist/composite/navigation/elements/slider/index.mjs

@@ -1,4 +1,4 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import * as token from "@universityofmaryland/web-token-library";
 import { debounce } from "@universityofmaryland/web-utilities-library/performance";
 import { findParent } from "@universityofmaryland/web-utilities-library/dom";
 import Slides from "./slides.mjs";

package/dist/composite/navigation/elements/slider/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/navigation/elements/slider/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { findParent } from '@universityofmaryland/web-utilities-library/dom';\nimport Slides, { TypeSlideProps } from './slides';\nimport SlideFirst from './slide-first';\nimport SlideAction from './action';\n\ntype TypeSubElements = TypeSlideProps;\n\nexport type TypeNavSliderRequirements = {\n  primarySlideLinks?: HTMLElement | null;\n  primarySlidesSecondaryLinks?: HTMLElement | null;\n  primarySlideContent?: HTMLElement | null;\n  childrenSlides?: HTMLElement | null;\n  childrenSlideContent?: HTMLSlotElement[];\n  displayType?: string;\n};\n\nexport type TypeNavSliderProps = TypeSubElements & TypeNavSliderRequirements;\n\nconst ANIMATION_TIME = 300;\nconst ATTRIBUTE_CHILD_REF = 'data-child-ref';\nconst ATTRIBUTE_PARENT_REF = 'data-parent-ref';\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active';\nconst ATTRIBUTE_ACTIVE_SELECTED = 'data-selected';\nconst ATTRIBUTE_DATA_SLIDE = 'data-slide';\nconst ATTRIBUTE_DISPLAY_TYPE = 'display-type';\n\nconst DISPLAY_TYPE_DRAWER = 'drawer-nav';\nconst DISPLAY_TYPE_INTERIOR_NAV = 'interior-nav';\n\nconst ELEMENT_NAVIGATION_SLIDER_CONTAINER = 'navigation-slider-container';\nconst ELEMENT_NAVIGATION_SLIDER = 'navigation-slider';\nconst ELEMENT_SLIDER_DECORATIVE_LINE = 'navigation-slider-decorative-line';\n\nconst IS_DISPLAY_DRAWER = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_DRAWER}]`;\nconst IS_DISPLAY_INTERIOR = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_INTERIOR_NAV}]`;\n\nconst OVERWRITE_DISPLAY_DRAWER_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER}`;\nconst OVERWRITE_DISPLAY_DRAWER_DECORATION = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${ELEMENT_SLIDER_DECORATIVE_LINE}`;\nconst OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${Slides.Elements.wrapper}`;\nconst OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${SlideAction.Elements.container}`;\n\nconst OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideAction.Elements.container}`;\nconst OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideFirst.Elements.secondaryContainer} .${SlideAction.Elements.container}`;\nconst OVERWRITE_DISPLAY_INTERIOR_HEADLINE = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${Slides.Elements.headline}`;\n\n// prettier-ignore\nconst OverwriteDisplayDrawer = `\n  ${OVERWRITE_DISPLAY_DRAWER_CONTAINER} {\n    background-color: ${token.color.white};\n    padding: ${token.spacing['2xl']} 0;\n    width: calc(100vw - ${token.spacing['8xl']});\n    max-width: 400px;\n    min-width: 227px;\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER} {\n    padding: 0 ${token.spacing.md};\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_DECORATION} {\n    display: block;\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER} {\n    padding-left: ${token.spacing.sm};\n  }\n`;\n\n// prettier-ignore\nconst OverwriteDisplayInterior = `\n  ${OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n\n  ${OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER}:last-child {\n    margin-bottom: 0;\n  }\n\n  ${OVERWRITE_DISPLAY_INTERIOR_HEADLINE} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst DecorativeLineStyles = `\n  .${ELEMENT_SLIDER_DECORATIVE_LINE} {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    height: 8px;\n    background-color: ${token.color.red};\n    display: none;\n  }\n`;\n\n// prettier-ignore\nconst SliderStyles = `\n  .${ELEMENT_NAVIGATION_SLIDER} {\n    position: relative;\n    overflow: hidden;\n    height: 100%;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER} > * {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    background-color: ${token.color.white};\n    display: none;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER} > *[${ATTRIBUTE_ACTIVE_SLIDE}] {\n    display: block;\n  }\n`;\n\nconst SelectedLinkStyles = `\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_SELECTED}] {\n    position: relative;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_SELECTED}] span {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(#ffd200, #ffd200);\n  }\n`;\n\n// prettier-ignore\nconst STYLES_NAV_SLIDER_ELEMENT = `\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} {\n    position: relative;\n    height: 100%;\n    cursor: default;\n  }\n\n  ${Slides.Styles}\n  ${DecorativeLineStyles}\n  ${SliderStyles}\n  ${SelectedLinkStyles}\n  ${OverwriteDisplayDrawer}\n  ${OverwriteDisplayInterior}\n`;\n\nconst CreateChildrenElements = (props: TypeNavSliderProps) => {\n  const { displayType } = props;\n  const sliderContainer = document.createElement('div');\n  const slider = document.createElement('div');\n  const decorativeLine = document.createElement('div');\n  const isDisplayDrawerNav = displayType === DISPLAY_TYPE_DRAWER;\n  let displayTypeSetting = DISPLAY_TYPE_INTERIOR_NAV;\n\n  if (isDisplayDrawerNav) displayTypeSetting = DISPLAY_TYPE_DRAWER;\n\n  Slides.CreateElement({ ...props, slider });\n\n  slider.classList.add(ELEMENT_NAVIGATION_SLIDER);\n\n  decorativeLine.classList.add(ELEMENT_SLIDER_DECORATIVE_LINE);\n  sliderContainer.appendChild(decorativeLine);\n\n  sliderContainer.setAttribute(ATTRIBUTE_DISPLAY_TYPE, displayTypeSetting);\n  sliderContainer.classList.add(ELEMENT_NAVIGATION_SLIDER_CONTAINER);\n  sliderContainer.appendChild(slider);\n\n  sliderContainer.addEventListener('click', (event) => {\n    event.stopPropagation();\n  });\n\n  return sliderContainer;\n};\n\nconst CreateNavSliderElement = (props: TypeNavSliderRequirements) =>\n  (() => {\n    const elementContainer = document.createElement('div');\n    const getUpcomingSlide = () => {\n      const upcomingSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_PARENT_REF}=${upcomingSlideRef}]`,\n      ) as HTMLDivElement;\n\n      return upcomingSlide;\n    };\n    const getUpcomingSlideParent = () => {\n      const upcomingSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_CHILD_REF}=${upcomingSlideRef}]`,\n      ) as HTMLDivElement;\n      const parent = findParent({\n        element: upcomingSlide,\n        attr: ATTRIBUTE_DATA_SLIDE,\n      });\n\n      return parent;\n    };\n    const sizeContainer = ({\n      withTransition = false,\n    }: {\n      withTransition?: boolean;\n    }) => {\n      let containerSize = 500;\n      if (currentSlide) {\n        const children = Array.from(currentSlide.children) as HTMLDivElement[];\n        containerSize = children.reduce((acc, currentElement) => {\n          return acc + currentElement.offsetHeight;\n        }, 50);\n      }\n\n      elementContainer.style.height = `${containerSize}px`;\n      if (withTransition)\n        elementContainer.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;\n\n      setTimeout(() => {\n        elementContainer.style.transition = 'none';\n      }, ANIMATION_TIME);\n    };\n    const eventSlide = ({ isRight = false }: { isRight?: boolean }) => {\n      const activeSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_ACTIVE_SLIDE}]`,\n      ) as HTMLDivElement;\n      const upcomingSlide = isRight\n        ? getUpcomingSlideParent()\n        : getUpcomingSlide();\n      const slides = [activeSlide, upcomingSlide];\n\n      if (!upcomingSlide) {\n        console.error('Missing slide for slide event');\n        return null;\n      }\n      const firstLink = upcomingSlide.querySelector('a') as HTMLAnchorElement;\n\n      const animate = () => {\n        let startPositionForUpcomingSlide = '100%';\n        let transitionPosition = '-100%';\n\n        if (isRight) {\n          startPositionForUpcomingSlide = '-100%';\n          transitionPosition = '100%';\n        }\n\n        upcomingSlide.style.left = startPositionForUpcomingSlide;\n        upcomingSlide.style.display = 'block';\n\n        setTimeout(() => {\n          slides.forEach((slide) => {\n            slide.style.transition = `transform ${ANIMATION_TIME}ms ease-in-out`;\n            slide.style.transform = `translateX(${transitionPosition})`;\n          });\n          setCurrentSlide({ element: upcomingSlide, withTransition: true });\n        }, 100);\n\n        setTimeout(() => {\n          slides.forEach((slide) => {\n            slide.style.transition = 'none';\n            slide.style.transform = 'translateX(0)';\n            slide.style.left = '0';\n            slide.removeAttribute('style');\n          });\n\n          upcomingSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n          activeSlide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n          if (firstLink) firstLink.focus();\n        }, ANIMATION_TIME + 100);\n      };\n\n      if (!upcomingSlide || !activeSlide)\n        throw new Error('Missing slide for slide event');\n\n      animate();\n\n      if (upcomingSlide.offsetHeight > elementContainer.offsetHeight) {\n        setTimeout(() => {\n          upcomingSlide.style.overflowY = `scroll`;\n          upcomingSlide.style.height = `100%`;\n        }, ANIMATION_TIME + 100);\n      }\n    };\n    const setUpcomingSlide = (arg: string) => {\n      upcomingSlideRef = arg;\n    };\n    const setCurrentSlide = ({\n      element,\n      withTransition = false,\n    }: {\n      element: HTMLElement;\n      withTransition?: boolean;\n    }) => {\n      currentSlide = element;\n\n      setTimeout(() => {\n        sizeContainer({ withTransition });\n      }, 100);\n    };\n    const eventSlideLeft = () => eventSlide({ isRight: false });\n    const eventSlideRight = () => eventSlide({ isRight: true });\n    const eventReize = () => {\n      setTimeout(() => {\n        sizeContainer({ withTransition: false });\n      }, 200);\n    };\n    const GetContainer = () => elementContainer;\n    let upcomingSlideRef: string | null = null;\n    let currentSlide: HTMLElement | null = null;\n\n    const children = CreateChildrenElements({\n      ...props,\n      GetContainer,\n      eventSlideLeft,\n      eventSlideRight,\n      setUpcomingSlide,\n      setCurrentSlide,\n      ATTRIBUTE_CHILD_REF,\n      ATTRIBUTE_PARENT_REF,\n      ATTRIBUTE_DATA_SLIDE,\n      ATTRIBUTE_ACTIVE_SLIDE,\n      currentSlide,\n    });\n\n    elementContainer.appendChild(children);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventReize();\n      }, 20),\n    );\n\n    return {\n      container: elementContainer,\n      events: {\n        resize: eventReize,\n      },\n    };\n  })();\n\nexport default {\n  CreateElement: CreateNavSliderElement,\n  Styles: STYLES_NAV_SLIDER_ELEMENT,\n  Elements: {\n    slider: ELEMENT_NAVIGATION_SLIDER,\n  },\n};\n"],"names":["children"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/navigation/elements/slider/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { findParent } from '@universityofmaryland/web-utilities-library/dom';\nimport Slides, { TypeSlideProps } from './slides';\nimport SlideFirst from './slide-first';\nimport SlideAction from './action';\n\ntype TypeSubElements = TypeSlideProps;\n\nexport type TypeNavSliderRequirements = {\n  primarySlideLinks?: HTMLElement | null;\n  primarySlidesSecondaryLinks?: HTMLElement | null;\n  primarySlideContent?: HTMLElement | null;\n  childrenSlides?: HTMLElement | null;\n  childrenSlideContent?: HTMLSlotElement[];\n  displayType?: string;\n};\n\nexport type TypeNavSliderProps = TypeSubElements & TypeNavSliderRequirements;\n\nconst ANIMATION_TIME = 300;\nconst ATTRIBUTE_CHILD_REF = 'data-child-ref';\nconst ATTRIBUTE_PARENT_REF = 'data-parent-ref';\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active';\nconst ATTRIBUTE_ACTIVE_SELECTED = 'data-selected';\nconst ATTRIBUTE_DATA_SLIDE = 'data-slide';\nconst ATTRIBUTE_DISPLAY_TYPE = 'display-type';\n\nconst DISPLAY_TYPE_DRAWER = 'drawer-nav';\nconst DISPLAY_TYPE_INTERIOR_NAV = 'interior-nav';\n\nconst ELEMENT_NAVIGATION_SLIDER_CONTAINER = 'navigation-slider-container';\nconst ELEMENT_NAVIGATION_SLIDER = 'navigation-slider';\nconst ELEMENT_SLIDER_DECORATIVE_LINE = 'navigation-slider-decorative-line';\n\nconst IS_DISPLAY_DRAWER = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_DRAWER}]`;\nconst IS_DISPLAY_INTERIOR = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_INTERIOR_NAV}]`;\n\nconst OVERWRITE_DISPLAY_DRAWER_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER}`;\nconst OVERWRITE_DISPLAY_DRAWER_DECORATION = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${ELEMENT_SLIDER_DECORATIVE_LINE}`;\nconst OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${Slides.Elements.wrapper}`;\nconst OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${SlideAction.Elements.container}`;\n\nconst OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideAction.Elements.container}`;\nconst OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideFirst.Elements.secondaryContainer} .${SlideAction.Elements.container}`;\nconst OVERWRITE_DISPLAY_INTERIOR_HEADLINE = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${Slides.Elements.headline}`;\n\n// prettier-ignore\nconst OverwriteDisplayDrawer = `\n  ${OVERWRITE_DISPLAY_DRAWER_CONTAINER} {\n    background-color: ${token.color.white};\n    padding: ${token.spacing['2xl']} 0;\n    width: calc(100vw - ${token.spacing['8xl']});\n    max-width: 400px;\n    min-width: 227px;\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER} {\n    padding: 0 ${token.spacing.md};\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_DECORATION} {\n    display: block;\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER} {\n    padding-left: ${token.spacing.sm};\n  }\n`;\n\n// prettier-ignore\nconst OverwriteDisplayInterior = `\n  ${OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n\n  ${OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER}:last-child {\n    margin-bottom: 0;\n  }\n\n  ${OVERWRITE_DISPLAY_INTERIOR_HEADLINE} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst DecorativeLineStyles = `\n  .${ELEMENT_SLIDER_DECORATIVE_LINE} {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    height: 8px;\n    background-color: ${token.color.red};\n    display: none;\n  }\n`;\n\n// prettier-ignore\nconst SliderStyles = `\n  .${ELEMENT_NAVIGATION_SLIDER} {\n    position: relative;\n    overflow: hidden;\n    height: 100%;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER} > * {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    background-color: ${token.color.white};\n    display: none;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER} > *[${ATTRIBUTE_ACTIVE_SLIDE}] {\n    display: block;\n  }\n`;\n\nconst SelectedLinkStyles = `\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_SELECTED}] {\n    position: relative;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_SELECTED}] span {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(#ffd200, #ffd200);\n  }\n`;\n\n// prettier-ignore\nconst STYLES_NAV_SLIDER_ELEMENT = `\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} {\n    position: relative;\n    height: 100%;\n    cursor: default;\n  }\n\n  ${Slides.Styles}\n  ${DecorativeLineStyles}\n  ${SliderStyles}\n  ${SelectedLinkStyles}\n  ${OverwriteDisplayDrawer}\n  ${OverwriteDisplayInterior}\n`;\n\nconst CreateChildrenElements = (props: TypeNavSliderProps) => {\n  const { displayType } = props;\n  const sliderContainer = document.createElement('div');\n  const slider = document.createElement('div');\n  const decorativeLine = document.createElement('div');\n  const isDisplayDrawerNav = displayType === DISPLAY_TYPE_DRAWER;\n  let displayTypeSetting = DISPLAY_TYPE_INTERIOR_NAV;\n\n  if (isDisplayDrawerNav) displayTypeSetting = DISPLAY_TYPE_DRAWER;\n\n  Slides.CreateElement({ ...props, slider });\n\n  slider.classList.add(ELEMENT_NAVIGATION_SLIDER);\n\n  decorativeLine.classList.add(ELEMENT_SLIDER_DECORATIVE_LINE);\n  sliderContainer.appendChild(decorativeLine);\n\n  sliderContainer.setAttribute(ATTRIBUTE_DISPLAY_TYPE, displayTypeSetting);\n  sliderContainer.classList.add(ELEMENT_NAVIGATION_SLIDER_CONTAINER);\n  sliderContainer.appendChild(slider);\n\n  sliderContainer.addEventListener('click', (event) => {\n    event.stopPropagation();\n  });\n\n  return sliderContainer;\n};\n\nconst CreateNavSliderElement = (props: TypeNavSliderRequirements) =>\n  (() => {\n    const elementContainer = document.createElement('div');\n    const getUpcomingSlide = () => {\n      const upcomingSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_PARENT_REF}=${upcomingSlideRef}]`,\n      ) as HTMLDivElement;\n\n      return upcomingSlide;\n    };\n    const getUpcomingSlideParent = () => {\n      const upcomingSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_CHILD_REF}=${upcomingSlideRef}]`,\n      ) as HTMLDivElement;\n      const parent = findParent({\n        element: upcomingSlide,\n        attr: ATTRIBUTE_DATA_SLIDE,\n      });\n\n      return parent;\n    };\n    const sizeContainer = ({\n      withTransition = false,\n    }: {\n      withTransition?: boolean;\n    }) => {\n      let containerSize = 500;\n      if (currentSlide) {\n        const children = Array.from(currentSlide.children) as HTMLDivElement[];\n        containerSize = children.reduce((acc, currentElement) => {\n          return acc + currentElement.offsetHeight;\n        }, 50);\n      }\n\n      elementContainer.style.height = `${containerSize}px`;\n      if (withTransition)\n        elementContainer.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;\n\n      setTimeout(() => {\n        elementContainer.style.transition = 'none';\n      }, ANIMATION_TIME);\n    };\n    const eventSlide = ({ isRight = false }: { isRight?: boolean }) => {\n      const activeSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_ACTIVE_SLIDE}]`,\n      ) as HTMLDivElement;\n      const upcomingSlide = isRight\n        ? getUpcomingSlideParent()\n        : getUpcomingSlide();\n      const slides = [activeSlide, upcomingSlide];\n\n      if (!upcomingSlide) {\n        console.error('Missing slide for slide event');\n        return null;\n      }\n      const firstLink = upcomingSlide.querySelector('a') as HTMLAnchorElement;\n\n      const animate = () => {\n        let startPositionForUpcomingSlide = '100%';\n        let transitionPosition = '-100%';\n\n        if (isRight) {\n          startPositionForUpcomingSlide = '-100%';\n          transitionPosition = '100%';\n        }\n\n        upcomingSlide.style.left = startPositionForUpcomingSlide;\n        upcomingSlide.style.display = 'block';\n\n        setTimeout(() => {\n          slides.forEach((slide) => {\n            slide.style.transition = `transform ${ANIMATION_TIME}ms ease-in-out`;\n            slide.style.transform = `translateX(${transitionPosition})`;\n          });\n          setCurrentSlide({ element: upcomingSlide, withTransition: true });\n        }, 100);\n\n        setTimeout(() => {\n          slides.forEach((slide) => {\n            slide.style.transition = 'none';\n            slide.style.transform = 'translateX(0)';\n            slide.style.left = '0';\n            slide.removeAttribute('style');\n          });\n\n          upcomingSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n          activeSlide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n          if (firstLink) firstLink.focus();\n        }, ANIMATION_TIME + 100);\n      };\n\n      if (!upcomingSlide || !activeSlide)\n        throw new Error('Missing slide for slide event');\n\n      animate();\n\n      if (upcomingSlide.offsetHeight > elementContainer.offsetHeight) {\n        setTimeout(() => {\n          upcomingSlide.style.overflowY = `scroll`;\n          upcomingSlide.style.height = `100%`;\n        }, ANIMATION_TIME + 100);\n      }\n    };\n    const setUpcomingSlide = (arg: string) => {\n      upcomingSlideRef = arg;\n    };\n    const setCurrentSlide = ({\n      element,\n      withTransition = false,\n    }: {\n      element: HTMLElement;\n      withTransition?: boolean;\n    }) => {\n      currentSlide = element;\n\n      setTimeout(() => {\n        sizeContainer({ withTransition });\n      }, 100);\n    };\n    const eventSlideLeft = () => eventSlide({ isRight: false });\n    const eventSlideRight = () => eventSlide({ isRight: true });\n    const eventReize = () => {\n      setTimeout(() => {\n        sizeContainer({ withTransition: false });\n      }, 200);\n    };\n    const GetContainer = () => elementContainer;\n    let upcomingSlideRef: string | null = null;\n    let currentSlide: HTMLElement | null = null;\n\n    const children = CreateChildrenElements({\n      ...props,\n      GetContainer,\n      eventSlideLeft,\n      eventSlideRight,\n      setUpcomingSlide,\n      setCurrentSlide,\n      ATTRIBUTE_CHILD_REF,\n      ATTRIBUTE_PARENT_REF,\n      ATTRIBUTE_DATA_SLIDE,\n      ATTRIBUTE_ACTIVE_SLIDE,\n      currentSlide,\n    });\n\n    elementContainer.appendChild(children);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventReize();\n      }, 20),\n    );\n\n    return {\n      container: elementContainer,\n      events: {\n        resize: eventReize,\n      },\n    };\n  })();\n\nexport default {\n  CreateElement: CreateNavSliderElement,\n  Styles: STYLES_NAV_SLIDER_ELEMENT,\n  Elements: {\n    slider: ELEMENT_NAVIGATION_SLIDER,\n  },\n};\n"],"names":["children"],"mappings":"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"}

package/dist/composite/navigation/elements/slider/slide-first.js

@@ -1,5 +1,5 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const token = require("@universityofmaryland/web-token-library");
 const typography = require("@universityofmaryland/web-styles-library/typography");
 const styles = require("@universityofmaryland/web-utilities-library/styles");
 const slides = require("./slides.js");

package/dist/composite/navigation/elements/slider/slide-first.js.map

@@ -1 +1 @@
-{"version":3,"file":"slide-first.js","sources":["../../../../../source/composite/navigation/elements/slider/slide-first.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport Slides from './slides';\nimport SlideAction, { TypeActionProps } from './action';\n\nexport type TypeFirstSlideProps = TypeActionProps & {\n  ATTRIBUTE_ACTIVE_SLIDE: string;\n  ATTRIBUTE_DATA_SLIDE: string;\n  currentSlide: HTMLElement | null;\n  primarySlideLinks?: HTMLElement | null;\n  primarySlidesSecondaryLinks?: HTMLElement | null;\n  primarySlideContent?: HTMLElement | null;\n  setCurrentSlide: (arg: {\n    element: HTMLElement;\n    withTransition?: boolean;\n  }) => void;\n  eventSlideRight: () => void;\n};\n\nexport type TypeFirstSlide = TypeFirstSlideProps & {\n  isContextMenu: boolean;\n};\n\nconst ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER = 'nav-slider-first-slide-container';\nconst ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER =\n  'nav-slider-first-slide-primary-links-container';\nconst ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER =\n  'nav-slider-secondary-links-container';\nconst ELEMENT_SLIDER_ADDITIONAL_CONTENT = 'nav-slider-additional-content';\n\nconst OVERWRITE_ACTION_PRIMARY_CONTAINER = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${SlideAction.Elements.container}`;\nconst OVERWRITE_ACTION_PRIMARY_LINK = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${SlideAction.Elements.link}`;\n\n//prettier-ignore;\nconst OverwriteSlidePrimaryLink = `\n  ${jssToCSS({\n    styleObj: {\n      [`${OVERWRITE_ACTION_PRIMARY_LINK}`]: typography.sans.large,\n    },\n  })}\n\n  ${OVERWRITE_ACTION_PRIMARY_LINK} {\n    font-weight: 700;\n    line-height: 1.3em;\n  }\n`;\n\n//prettier-ignore;\nconst OverwriteSlidePrimaryContainer = `\n  ${OVERWRITE_ACTION_PRIMARY_CONTAINER} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n`;\n\n//prettier-ignore;\nconst SecondaryLinksContainer = `\n  .${ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER} .${SlideAction.Elements.container}:last-child {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n  }\n`;\n\n//prettier-ignore;\nconst AdditonalContent = `\n  .${ELEMENT_SLIDER_ADDITIONAL_CONTENT} {\n    padding-top: ${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_SLIDE_FIRST_ELEMENT = `\n  ${SecondaryLinksContainer}\n  ${AdditonalContent}\n  ${OverwriteSlidePrimaryContainer}\n  ${OverwriteSlidePrimaryLink}\n`;\n\nconst createPrimaryLinks = (props: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlideLinks } = props;\n\n  if (!primarySlideLinks) return null;\n\n  const links = Array.from(\n    primarySlideLinks.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  if (links.length > 0) {\n    container.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER);\n\n    links.forEach((link) =>\n      container.appendChild(SlideAction.CreateElement({ ...props, link })),\n    );\n\n    return container;\n  }\n\n  return null;\n};\n\nconst createSecondaryLinks = (props: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlidesSecondaryLinks } = props;\n\n  if (!primarySlidesSecondaryLinks) return null;\n\n  const elements = Array.from(\n    primarySlidesSecondaryLinks.querySelectorAll(':scope > *'),\n  ) as HTMLAnchorElement[];\n\n  if (elements.length > 0) {\n    container.classList.add(ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER);\n\n    elements.forEach((link) =>\n      container.appendChild(SlideAction.CreateElement({ ...props, link })),\n    );\n\n    return container;\n  }\n\n  return null;\n};\n\nconst createAdditonalContent = (element: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlideContent } = element;\n\n  if (!primarySlideContent) return null;\n\n  container.classList.add(ELEMENT_SLIDER_ADDITIONAL_CONTENT);\n  container.appendChild(primarySlideContent);\n\n  return container;\n};\n\nconst CreateSlideFirstElement = (props: TypeFirstSlide) => {\n  const {\n    setCurrentSlide,\n    ATTRIBUTE_DATA_SLIDE,\n    ATTRIBUTE_ACTIVE_SLIDE,\n    isContextMenu,\n  } = props;\n  const sliderContainer = document.createElement('div');\n  const wrapper = document.createElement('div');\n  const primarlyLinkContent = createPrimaryLinks(props);\n  const secondaryLinkContent = createSecondaryLinks(props);\n  const additionalContent = createAdditonalContent(props);\n\n  sliderContainer.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER);\n  sliderContainer.setAttribute(`${ATTRIBUTE_DATA_SLIDE}`, '');\n\n  if (!isContextMenu) {\n    sliderContainer.setAttribute(`${ATTRIBUTE_ACTIVE_SLIDE}`, '');\n    setCurrentSlide({ element: sliderContainer });\n  }\n\n  if (primarlyLinkContent) wrapper.appendChild(primarlyLinkContent);\n  if (secondaryLinkContent) wrapper.appendChild(secondaryLinkContent);\n  if (additionalContent) wrapper.appendChild(additionalContent);\n\n  wrapper.classList.add(Slides.Elements.wrapper);\n  sliderContainer.appendChild(wrapper);\n\n  return sliderContainer;\n};\n\nexport default {\n  CreateElement: CreateSlideFirstElement,\n  Styles: STYLES_SLIDE_FIRST_ELEMENT,\n  Elements: {\n    secondaryContainer: ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER,\n  },\n};\n"],"names":["SlideAction","jssToCSS","typography","token","Slides"],"mappings":"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"}
+{"version":3,"file":"slide-first.js","sources":["../../../../../source/composite/navigation/elements/slider/slide-first.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport Slides from './slides';\nimport SlideAction, { TypeActionProps } from './action';\n\nexport type TypeFirstSlideProps = TypeActionProps & {\n  ATTRIBUTE_ACTIVE_SLIDE: string;\n  ATTRIBUTE_DATA_SLIDE: string;\n  currentSlide: HTMLElement | null;\n  primarySlideLinks?: HTMLElement | null;\n  primarySlidesSecondaryLinks?: HTMLElement | null;\n  primarySlideContent?: HTMLElement | null;\n  setCurrentSlide: (arg: {\n    element: HTMLElement;\n    withTransition?: boolean;\n  }) => void;\n  eventSlideRight: () => void;\n};\n\nexport type TypeFirstSlide = TypeFirstSlideProps & {\n  isContextMenu: boolean;\n};\n\nconst ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER = 'nav-slider-first-slide-container';\nconst ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER =\n  'nav-slider-first-slide-primary-links-container';\nconst ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER =\n  'nav-slider-secondary-links-container';\nconst ELEMENT_SLIDER_ADDITIONAL_CONTENT = 'nav-slider-additional-content';\n\nconst OVERWRITE_ACTION_PRIMARY_CONTAINER = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${SlideAction.Elements.container}`;\nconst OVERWRITE_ACTION_PRIMARY_LINK = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${SlideAction.Elements.link}`;\n\n//prettier-ignore;\nconst OverwriteSlidePrimaryLink = `\n  ${jssToCSS({\n    styleObj: {\n      [`${OVERWRITE_ACTION_PRIMARY_LINK}`]: typography.sans.large,\n    },\n  })}\n\n  ${OVERWRITE_ACTION_PRIMARY_LINK} {\n    font-weight: 700;\n    line-height: 1.3em;\n  }\n`;\n\n//prettier-ignore;\nconst OverwriteSlidePrimaryContainer = `\n  ${OVERWRITE_ACTION_PRIMARY_CONTAINER} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n`;\n\n//prettier-ignore;\nconst SecondaryLinksContainer = `\n  .${ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER} .${SlideAction.Elements.container}:last-child {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n  }\n`;\n\n//prettier-ignore;\nconst AdditonalContent = `\n  .${ELEMENT_SLIDER_ADDITIONAL_CONTENT} {\n    padding-top: ${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_SLIDE_FIRST_ELEMENT = `\n  ${SecondaryLinksContainer}\n  ${AdditonalContent}\n  ${OverwriteSlidePrimaryContainer}\n  ${OverwriteSlidePrimaryLink}\n`;\n\nconst createPrimaryLinks = (props: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlideLinks } = props;\n\n  if (!primarySlideLinks) return null;\n\n  const links = Array.from(\n    primarySlideLinks.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  if (links.length > 0) {\n    container.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER);\n\n    links.forEach((link) =>\n      container.appendChild(SlideAction.CreateElement({ ...props, link })),\n    );\n\n    return container;\n  }\n\n  return null;\n};\n\nconst createSecondaryLinks = (props: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlidesSecondaryLinks } = props;\n\n  if (!primarySlidesSecondaryLinks) return null;\n\n  const elements = Array.from(\n    primarySlidesSecondaryLinks.querySelectorAll(':scope > *'),\n  ) as HTMLAnchorElement[];\n\n  if (elements.length > 0) {\n    container.classList.add(ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER);\n\n    elements.forEach((link) =>\n      container.appendChild(SlideAction.CreateElement({ ...props, link })),\n    );\n\n    return container;\n  }\n\n  return null;\n};\n\nconst createAdditonalContent = (element: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlideContent } = element;\n\n  if (!primarySlideContent) return null;\n\n  container.classList.add(ELEMENT_SLIDER_ADDITIONAL_CONTENT);\n  container.appendChild(primarySlideContent);\n\n  return container;\n};\n\nconst CreateSlideFirstElement = (props: TypeFirstSlide) => {\n  const {\n    setCurrentSlide,\n    ATTRIBUTE_DATA_SLIDE,\n    ATTRIBUTE_ACTIVE_SLIDE,\n    isContextMenu,\n  } = props;\n  const sliderContainer = document.createElement('div');\n  const wrapper = document.createElement('div');\n  const primarlyLinkContent = createPrimaryLinks(props);\n  const secondaryLinkContent = createSecondaryLinks(props);\n  const additionalContent = createAdditonalContent(props);\n\n  sliderContainer.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER);\n  sliderContainer.setAttribute(`${ATTRIBUTE_DATA_SLIDE}`, '');\n\n  if (!isContextMenu) {\n    sliderContainer.setAttribute(`${ATTRIBUTE_ACTIVE_SLIDE}`, '');\n    setCurrentSlide({ element: sliderContainer });\n  }\n\n  if (primarlyLinkContent) wrapper.appendChild(primarlyLinkContent);\n  if (secondaryLinkContent) wrapper.appendChild(secondaryLinkContent);\n  if (additionalContent) wrapper.appendChild(additionalContent);\n\n  wrapper.classList.add(Slides.Elements.wrapper);\n  sliderContainer.appendChild(wrapper);\n\n  return sliderContainer;\n};\n\nexport default {\n  CreateElement: CreateSlideFirstElement,\n  Styles: STYLES_SLIDE_FIRST_ELEMENT,\n  Elements: {\n    secondaryContainer: ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER,\n  },\n};\n"],"names":["SlideAction","jssToCSS","typography","token","Slides"],"mappings":"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"}

package/dist/composite/navigation/elements/slider/slide-first.mjs

@@ -1,4 +1,4 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import * as token from "@universityofmaryland/web-token-library";
 import * as typography from "@universityofmaryland/web-styles-library/typography";
 import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
 import Slides from "./slides.mjs";

package/dist/composite/navigation/elements/slider/slide-first.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"slide-first.mjs","sources":["../../../../../source/composite/navigation/elements/slider/slide-first.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport Slides from './slides';\nimport SlideAction, { TypeActionProps } from './action';\n\nexport type TypeFirstSlideProps = TypeActionProps & {\n  ATTRIBUTE_ACTIVE_SLIDE: string;\n  ATTRIBUTE_DATA_SLIDE: string;\n  currentSlide: HTMLElement | null;\n  primarySlideLinks?: HTMLElement | null;\n  primarySlidesSecondaryLinks?: HTMLElement | null;\n  primarySlideContent?: HTMLElement | null;\n  setCurrentSlide: (arg: {\n    element: HTMLElement;\n    withTransition?: boolean;\n  }) => void;\n  eventSlideRight: () => void;\n};\n\nexport type TypeFirstSlide = TypeFirstSlideProps & {\n  isContextMenu: boolean;\n};\n\nconst ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER = 'nav-slider-first-slide-container';\nconst ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER =\n  'nav-slider-first-slide-primary-links-container';\nconst ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER =\n  'nav-slider-secondary-links-container';\nconst ELEMENT_SLIDER_ADDITIONAL_CONTENT = 'nav-slider-additional-content';\n\nconst OVERWRITE_ACTION_PRIMARY_CONTAINER = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${SlideAction.Elements.container}`;\nconst OVERWRITE_ACTION_PRIMARY_LINK = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${SlideAction.Elements.link}`;\n\n//prettier-ignore;\nconst OverwriteSlidePrimaryLink = `\n  ${jssToCSS({\n    styleObj: {\n      [`${OVERWRITE_ACTION_PRIMARY_LINK}`]: typography.sans.large,\n    },\n  })}\n\n  ${OVERWRITE_ACTION_PRIMARY_LINK} {\n    font-weight: 700;\n    line-height: 1.3em;\n  }\n`;\n\n//prettier-ignore;\nconst OverwriteSlidePrimaryContainer = `\n  ${OVERWRITE_ACTION_PRIMARY_CONTAINER} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n`;\n\n//prettier-ignore;\nconst SecondaryLinksContainer = `\n  .${ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER} .${SlideAction.Elements.container}:last-child {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n  }\n`;\n\n//prettier-ignore;\nconst AdditonalContent = `\n  .${ELEMENT_SLIDER_ADDITIONAL_CONTENT} {\n    padding-top: ${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_SLIDE_FIRST_ELEMENT = `\n  ${SecondaryLinksContainer}\n  ${AdditonalContent}\n  ${OverwriteSlidePrimaryContainer}\n  ${OverwriteSlidePrimaryLink}\n`;\n\nconst createPrimaryLinks = (props: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlideLinks } = props;\n\n  if (!primarySlideLinks) return null;\n\n  const links = Array.from(\n    primarySlideLinks.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  if (links.length > 0) {\n    container.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER);\n\n    links.forEach((link) =>\n      container.appendChild(SlideAction.CreateElement({ ...props, link })),\n    );\n\n    return container;\n  }\n\n  return null;\n};\n\nconst createSecondaryLinks = (props: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlidesSecondaryLinks } = props;\n\n  if (!primarySlidesSecondaryLinks) return null;\n\n  const elements = Array.from(\n    primarySlidesSecondaryLinks.querySelectorAll(':scope > *'),\n  ) as HTMLAnchorElement[];\n\n  if (elements.length > 0) {\n    container.classList.add(ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER);\n\n    elements.forEach((link) =>\n      container.appendChild(SlideAction.CreateElement({ ...props, link })),\n    );\n\n    return container;\n  }\n\n  return null;\n};\n\nconst createAdditonalContent = (element: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlideContent } = element;\n\n  if (!primarySlideContent) return null;\n\n  container.classList.add(ELEMENT_SLIDER_ADDITIONAL_CONTENT);\n  container.appendChild(primarySlideContent);\n\n  return container;\n};\n\nconst CreateSlideFirstElement = (props: TypeFirstSlide) => {\n  const {\n    setCurrentSlide,\n    ATTRIBUTE_DATA_SLIDE,\n    ATTRIBUTE_ACTIVE_SLIDE,\n    isContextMenu,\n  } = props;\n  const sliderContainer = document.createElement('div');\n  const wrapper = document.createElement('div');\n  const primarlyLinkContent = createPrimaryLinks(props);\n  const secondaryLinkContent = createSecondaryLinks(props);\n  const additionalContent = createAdditonalContent(props);\n\n  sliderContainer.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER);\n  sliderContainer.setAttribute(`${ATTRIBUTE_DATA_SLIDE}`, '');\n\n  if (!isContextMenu) {\n    sliderContainer.setAttribute(`${ATTRIBUTE_ACTIVE_SLIDE}`, '');\n    setCurrentSlide({ element: sliderContainer });\n  }\n\n  if (primarlyLinkContent) wrapper.appendChild(primarlyLinkContent);\n  if (secondaryLinkContent) wrapper.appendChild(secondaryLinkContent);\n  if (additionalContent) wrapper.appendChild(additionalContent);\n\n  wrapper.classList.add(Slides.Elements.wrapper);\n  sliderContainer.appendChild(wrapper);\n\n  return sliderContainer;\n};\n\nexport default {\n  CreateElement: CreateSlideFirstElement,\n  Styles: STYLES_SLIDE_FIRST_ELEMENT,\n  Elements: {\n    secondaryContainer: ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER,\n  },\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"slide-first.mjs","sources":["../../../../../source/composite/navigation/elements/slider/slide-first.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport Slides from './slides';\nimport SlideAction, { TypeActionProps } from './action';\n\nexport type TypeFirstSlideProps = TypeActionProps & {\n  ATTRIBUTE_ACTIVE_SLIDE: string;\n  ATTRIBUTE_DATA_SLIDE: string;\n  currentSlide: HTMLElement | null;\n  primarySlideLinks?: HTMLElement | null;\n  primarySlidesSecondaryLinks?: HTMLElement | null;\n  primarySlideContent?: HTMLElement | null;\n  setCurrentSlide: (arg: {\n    element: HTMLElement;\n    withTransition?: boolean;\n  }) => void;\n  eventSlideRight: () => void;\n};\n\nexport type TypeFirstSlide = TypeFirstSlideProps & {\n  isContextMenu: boolean;\n};\n\nconst ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER = 'nav-slider-first-slide-container';\nconst ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER =\n  'nav-slider-first-slide-primary-links-container';\nconst ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER =\n  'nav-slider-secondary-links-container';\nconst ELEMENT_SLIDER_ADDITIONAL_CONTENT = 'nav-slider-additional-content';\n\nconst OVERWRITE_ACTION_PRIMARY_CONTAINER = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${SlideAction.Elements.container}`;\nconst OVERWRITE_ACTION_PRIMARY_LINK = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${SlideAction.Elements.link}`;\n\n//prettier-ignore;\nconst OverwriteSlidePrimaryLink = `\n  ${jssToCSS({\n    styleObj: {\n      [`${OVERWRITE_ACTION_PRIMARY_LINK}`]: typography.sans.large,\n    },\n  })}\n\n  ${OVERWRITE_ACTION_PRIMARY_LINK} {\n    font-weight: 700;\n    line-height: 1.3em;\n  }\n`;\n\n//prettier-ignore;\nconst OverwriteSlidePrimaryContainer = `\n  ${OVERWRITE_ACTION_PRIMARY_CONTAINER} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n`;\n\n//prettier-ignore;\nconst SecondaryLinksContainer = `\n  .${ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER} .${SlideAction.Elements.container}:last-child {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n  }\n`;\n\n//prettier-ignore;\nconst AdditonalContent = `\n  .${ELEMENT_SLIDER_ADDITIONAL_CONTENT} {\n    padding-top: ${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_SLIDE_FIRST_ELEMENT = `\n  ${SecondaryLinksContainer}\n  ${AdditonalContent}\n  ${OverwriteSlidePrimaryContainer}\n  ${OverwriteSlidePrimaryLink}\n`;\n\nconst createPrimaryLinks = (props: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlideLinks } = props;\n\n  if (!primarySlideLinks) return null;\n\n  const links = Array.from(\n    primarySlideLinks.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  if (links.length > 0) {\n    container.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER);\n\n    links.forEach((link) =>\n      container.appendChild(SlideAction.CreateElement({ ...props, link })),\n    );\n\n    return container;\n  }\n\n  return null;\n};\n\nconst createSecondaryLinks = (props: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlidesSecondaryLinks } = props;\n\n  if (!primarySlidesSecondaryLinks) return null;\n\n  const elements = Array.from(\n    primarySlidesSecondaryLinks.querySelectorAll(':scope > *'),\n  ) as HTMLAnchorElement[];\n\n  if (elements.length > 0) {\n    container.classList.add(ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER);\n\n    elements.forEach((link) =>\n      container.appendChild(SlideAction.CreateElement({ ...props, link })),\n    );\n\n    return container;\n  }\n\n  return null;\n};\n\nconst createAdditonalContent = (element: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlideContent } = element;\n\n  if (!primarySlideContent) return null;\n\n  container.classList.add(ELEMENT_SLIDER_ADDITIONAL_CONTENT);\n  container.appendChild(primarySlideContent);\n\n  return container;\n};\n\nconst CreateSlideFirstElement = (props: TypeFirstSlide) => {\n  const {\n    setCurrentSlide,\n    ATTRIBUTE_DATA_SLIDE,\n    ATTRIBUTE_ACTIVE_SLIDE,\n    isContextMenu,\n  } = props;\n  const sliderContainer = document.createElement('div');\n  const wrapper = document.createElement('div');\n  const primarlyLinkContent = createPrimaryLinks(props);\n  const secondaryLinkContent = createSecondaryLinks(props);\n  const additionalContent = createAdditonalContent(props);\n\n  sliderContainer.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER);\n  sliderContainer.setAttribute(`${ATTRIBUTE_DATA_SLIDE}`, '');\n\n  if (!isContextMenu) {\n    sliderContainer.setAttribute(`${ATTRIBUTE_ACTIVE_SLIDE}`, '');\n    setCurrentSlide({ element: sliderContainer });\n  }\n\n  if (primarlyLinkContent) wrapper.appendChild(primarlyLinkContent);\n  if (secondaryLinkContent) wrapper.appendChild(secondaryLinkContent);\n  if (additionalContent) wrapper.appendChild(additionalContent);\n\n  wrapper.classList.add(Slides.Elements.wrapper);\n  sliderContainer.appendChild(wrapper);\n\n  return sliderContainer;\n};\n\nexport default {\n  CreateElement: CreateSlideFirstElement,\n  Styles: STYLES_SLIDE_FIRST_ELEMENT,\n  Elements: {\n    secondaryContainer: ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER,\n  },\n};\n"],"names":[],"mappings":"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"}

package/dist/composite/navigation/elements/slider/slides.js

@@ -1,5 +1,5 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const token = require("@universityofmaryland/web-token-library");
 const typography = require("@universityofmaryland/web-styles-library/typography");
 const styles = require("@universityofmaryland/web-utilities-library/styles");
 const dom = require("@universityofmaryland/web-utilities-library/dom");

package/dist/composite/navigation/elements/slider/slides.js.map

@@ -1 +1 @@
-{"version":3,"file":"slides.js","sources":["../../../../../source/composite/navigation/elements/slider/slides.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { cloneElementWithoutAttributes } from '@universityofmaryland/web-utilities-library/dom';\nimport { chevron_down as iconChevronDown } from '@universityofmaryland/web-icons-library/controls';\nimport FirstSlide, { TypeFirstSlideProps, TypeFirstSlide } from './slide-first';\nimport SlideAction, { TypeActionProps } from './action';\n\nexport type TypeSlideProps = TypeActionProps &\n  TypeFirstSlideProps & {\n    ATTRIBUTE_DATA_SLIDE: string;\n    ATTRIBUTE_ACTIVE_SLIDE: string;\n    childrenSlides?: HTMLElement | null;\n    childrenSlideContent?: HTMLSlotElement[];\n    primarySlideLinks?: HTMLElement | null;\n    primarySlidesSecondaryLinks?: HTMLElement | null;\n    eventSlideRight: () => void;\n  };\n\ntype TypeSlideBackContainer = TypeSlideProps & {\n  parentRef: string;\n};\n\ntype TypeDrawerChildSlide = TypeSlideProps & {\n  slider: HTMLElement;\n};\n\ntype TypeSlideFirstContainer = TypeDrawerChildSlide & TypeFirstSlide;\n\ntype TypeSliderSlideActions = TypeSlideProps & {\n  slide: HTMLDivElement;\n};\n\nconst ELEMENT_NAV_SLIDE_CONTAINER = 'nav-slide-container';\nconst ELEMENT_NAV_SLIDE_WRAPPER = 'nav-slide-wrapper';\nconst ELEMENT_NAV_SLIDE_HEADLINE = 'nav-slide-headline';\nconst ELEMENT_NAV_SLIDE_BACK_BUTTON = 'nav-slide-action-back-button';\nconst ELEMENT_NAV_SLIDE_CONTENT = 'nav-slide-action-content';\n\n// prettier-ignore\nconst ContentStyles = `\n  * + .${ELEMENT_NAV_SLIDE_CONTENT} {\n    margin-top: ${token.spacing.lg};\n  }\n`;\n\n// prettier-ignore\nconst BackButtonStyles = `\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {\n    display: block;\n    border-bottom: 1px solid ${token.color.black};\n    margin-bottom: ${token.spacing.sm};\n    padding-bottom: ${token.spacing.sm};\n  }\n\n  @media (min-width: 480px) {\n    .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {\n      margin-bottom: ${token.spacing.md};\n      padding-bottom: ${token.spacing.md};\n    }\n  }\n\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button {\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-Spacing: 1px;\n    display: flex;\n    align-items: center;\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button:hover,\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button:focus {\n    text-decoration: underline;\n  }\n\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button svg {\n    fill: ${token.color.red};\n    width: 12px;\n    height: 12px;\n    margin-right: ${token.spacing.min};\n    transform: rotate(90deg);\n  }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_NAV_SLIDE_HEADLINE}`]: typography.sans.large,\n    },\n  })}\n\n  .${ELEMENT_NAV_SLIDE_HEADLINE} {\n    margin-bottom: ${token.spacing.md};\n    font-weight: 700;\n    color: ${token.color.black};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_NAV_SLIDES = `\n  ${BackButtonStyles}\n  ${HeadlineStyles}\n  ${ContentStyles}\n  ${SlideAction.Styles}\n  ${FirstSlide.Styles}\n`;\n\nconst createSlideBackButton = (props: TypeSlideBackContainer) => {\n  const { eventSlideRight, parentRef, setUpcomingSlide } = props;\n\n  if (!parentRef) return;\n  const backButtonContainer = document.createElement('div');\n  const slideBackButton = document.createElement('button');\n\n  slideBackButton.innerHTML = `${iconChevronDown} Back`;\n  slideBackButton.setAttribute('type', 'button');\n  slideBackButton.setAttribute('aria-label', 'Previous level of navigation');\n  slideBackButton.addEventListener('click', () => {\n    setUpcomingSlide(parentRef);\n    eventSlideRight();\n  });\n\n  backButtonContainer.classList.add(ELEMENT_NAV_SLIDE_BACK_BUTTON);\n  backButtonContainer.appendChild(slideBackButton);\n\n  return backButtonContainer;\n};\n\nconst createSlideHeadline = ({ link }: { link: HTMLAnchorElement }) => {\n  const slideHeadline = document.createElement('p');\n\n  slideHeadline.appendChild(cloneElementWithoutAttributes({ element: link }));\n  slideHeadline.classList.add(ELEMENT_NAV_SLIDE_HEADLINE);\n\n  return slideHeadline;\n};\n\nconst createSlideActions = (props: TypeSliderSlideActions) => {\n  const { slide } = props;\n\n  const slideActionsContainer = document.createElement('div');\n  const clonedSlide = slide.cloneNode(true) as HTMLDivElement;\n  const links = Array.from(\n    clonedSlide.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  if (links.length > 0) {\n    links.forEach((link) =>\n      slideActionsContainer.appendChild(\n        SlideAction.CreateElement({ ...props, link }),\n      ),\n    );\n  }\n\n  return slideActionsContainer;\n};\n\nconst CreateFirstSlide = (props: TypeSlideFirstContainer) => {\n  const { slider } = props;\n  slider.appendChild(FirstSlide.CreateElement(props));\n};\n\nconst CreateNavSlides = (props: TypeDrawerChildSlide) => {\n  const {\n    slider,\n    setCurrentSlide,\n    childrenSlides,\n    childrenSlideContent,\n    primarySlideLinks,\n    primarySlidesSecondaryLinks,\n    ATTRIBUTE_PARENT_REF,\n    ATTRIBUTE_CHILD_REF,\n    ATTRIBUTE_ACTIVE_SLIDE,\n    ATTRIBUTE_DATA_SLIDE,\n  } = props;\n  let isContextMenu = false;\n  if (!childrenSlides) {\n    CreateFirstSlide({ ...props, isContextMenu });\n    return;\n  }\n\n  const slides = Array.from(\n    childrenSlides.querySelectorAll(`[${ATTRIBUTE_PARENT_REF}]`),\n  ) as HTMLDivElement[];\n  const primaryLinks = primarySlideLinks\n    ? Array.from(primarySlideLinks.querySelectorAll('a'))\n    : [];\n  const secondaryLinks = primarySlidesSecondaryLinks\n    ? Array.from(primarySlidesSecondaryLinks.querySelectorAll(':scope > *'))\n    : [];\n  const childLinks = Array.from(\n    childrenSlides.querySelectorAll(`[${ATTRIBUTE_CHILD_REF}]`),\n  ) as HTMLAnchorElement[];\n  const parentOptions = [\n    ...primaryLinks,\n    ...secondaryLinks,\n    ...childLinks,\n  ] as HTMLAnchorElement[];\n\n  slides.forEach((slide, i) => {\n    const contentRef = slide.getAttribute('content-slot');\n    const sliderContainer = document.createElement('div');\n    const sliderWrapper = document.createElement('div');\n    const isSlideActive = slide.hasAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n    const parentRef = slide.getAttribute(ATTRIBUTE_PARENT_REF) as string;\n    const parentElement = parentOptions.find(\n      (option) => option.getAttribute(ATTRIBUTE_CHILD_REF) === parentRef,\n    );\n\n    if (!parentElement) {\n      console.error(`No parent reference found for ${parentRef}`);\n      return;\n    }\n\n    const slideBackButton = createSlideBackButton({ ...props, parentRef });\n    const slideHeadline = createSlideHeadline({ link: parentElement });\n    const slideActions = createSlideActions({ ...props, slide });\n\n    // Context Menu\n    if (isSlideActive) {\n      sliderContainer.setAttribute(`${ATTRIBUTE_ACTIVE_SLIDE}`, ``);\n      setCurrentSlide({ element: sliderContainer });\n      isContextMenu = true;\n    }\n\n    sliderContainer.setAttribute(`${ATTRIBUTE_DATA_SLIDE}`, '');\n    sliderContainer.classList.add(ELEMENT_NAV_SLIDE_CONTAINER);\n    sliderContainer.setAttribute(`${ATTRIBUTE_PARENT_REF}`, `${parentRef}`);\n\n    if (slideBackButton) sliderWrapper.appendChild(slideBackButton);\n    sliderWrapper.appendChild(slideHeadline);\n    sliderWrapper.appendChild(slideActions);\n\n    sliderWrapper.classList.add(ELEMENT_NAV_SLIDE_WRAPPER);\n    sliderContainer.appendChild(sliderWrapper);\n\n    if (contentRef) {\n      const additionalContent = childrenSlideContent?.find(\n        (element) => element.getAttribute('name') === contentRef,\n      );\n\n      if (additionalContent) {\n        const contentContainer = document.createElement('div');\n\n        contentContainer.appendChild(additionalContent);\n        contentContainer.classList.add(ELEMENT_NAV_SLIDE_CONTENT);\n\n        sliderContainer.appendChild(contentContainer);\n      }\n    }\n\n    slider.appendChild(sliderContainer);\n\n    if (i === slides.length - 1) {\n      setTimeout(() => {\n        CreateFirstSlide({ ...props, isContextMenu });\n      }, 100);\n    }\n  });\n};\n\nexport default {\n  CreateElement: CreateNavSlides,\n  Styles: STYLES_NAV_SLIDES,\n  Elements: {\n    container: ELEMENT_NAV_SLIDE_CONTAINER,\n    wrapper: ELEMENT_NAV_SLIDE_WRAPPER,\n    headline: ELEMENT_NAV_SLIDE_HEADLINE,\n  },\n};\n"],"names":["token","jssToCSS","typography","SlideAction","FirstSlide","iconChevronDown","cloneElementWithoutAttributes"],"mappings":"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"}
+{"version":3,"file":"slides.js","sources":["../../../../../source/composite/navigation/elements/slider/slides.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { cloneElementWithoutAttributes } from '@universityofmaryland/web-utilities-library/dom';\nimport { chevron_down as iconChevronDown } from '@universityofmaryland/web-icons-library/controls';\nimport FirstSlide, { TypeFirstSlideProps, TypeFirstSlide } from './slide-first';\nimport SlideAction, { TypeActionProps } from './action';\n\nexport type TypeSlideProps = TypeActionProps &\n  TypeFirstSlideProps & {\n    ATTRIBUTE_DATA_SLIDE: string;\n    ATTRIBUTE_ACTIVE_SLIDE: string;\n    childrenSlides?: HTMLElement | null;\n    childrenSlideContent?: HTMLSlotElement[];\n    primarySlideLinks?: HTMLElement | null;\n    primarySlidesSecondaryLinks?: HTMLElement | null;\n    eventSlideRight: () => void;\n  };\n\ntype TypeSlideBackContainer = TypeSlideProps & {\n  parentRef: string;\n};\n\ntype TypeDrawerChildSlide = TypeSlideProps & {\n  slider: HTMLElement;\n};\n\ntype TypeSlideFirstContainer = TypeDrawerChildSlide & TypeFirstSlide;\n\ntype TypeSliderSlideActions = TypeSlideProps & {\n  slide: HTMLDivElement;\n};\n\nconst ELEMENT_NAV_SLIDE_CONTAINER = 'nav-slide-container';\nconst ELEMENT_NAV_SLIDE_WRAPPER = 'nav-slide-wrapper';\nconst ELEMENT_NAV_SLIDE_HEADLINE = 'nav-slide-headline';\nconst ELEMENT_NAV_SLIDE_BACK_BUTTON = 'nav-slide-action-back-button';\nconst ELEMENT_NAV_SLIDE_CONTENT = 'nav-slide-action-content';\n\n// prettier-ignore\nconst ContentStyles = `\n  * + .${ELEMENT_NAV_SLIDE_CONTENT} {\n    margin-top: ${token.spacing.lg};\n  }\n`;\n\n// prettier-ignore\nconst BackButtonStyles = `\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {\n    display: block;\n    border-bottom: 1px solid ${token.color.black};\n    margin-bottom: ${token.spacing.sm};\n    padding-bottom: ${token.spacing.sm};\n  }\n\n  @media (min-width: 480px) {\n    .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {\n      margin-bottom: ${token.spacing.md};\n      padding-bottom: ${token.spacing.md};\n    }\n  }\n\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button {\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-Spacing: 1px;\n    display: flex;\n    align-items: center;\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button:hover,\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button:focus {\n    text-decoration: underline;\n  }\n\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button svg {\n    fill: ${token.color.red};\n    width: 12px;\n    height: 12px;\n    margin-right: ${token.spacing.min};\n    transform: rotate(90deg);\n  }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_NAV_SLIDE_HEADLINE}`]: typography.sans.large,\n    },\n  })}\n\n  .${ELEMENT_NAV_SLIDE_HEADLINE} {\n    margin-bottom: ${token.spacing.md};\n    font-weight: 700;\n    color: ${token.color.black};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_NAV_SLIDES = `\n  ${BackButtonStyles}\n  ${HeadlineStyles}\n  ${ContentStyles}\n  ${SlideAction.Styles}\n  ${FirstSlide.Styles}\n`;\n\nconst createSlideBackButton = (props: TypeSlideBackContainer) => {\n  const { eventSlideRight, parentRef, setUpcomingSlide } = props;\n\n  if (!parentRef) return;\n  const backButtonContainer = document.createElement('div');\n  const slideBackButton = document.createElement('button');\n\n  slideBackButton.innerHTML = `${iconChevronDown} Back`;\n  slideBackButton.setAttribute('type', 'button');\n  slideBackButton.setAttribute('aria-label', 'Previous level of navigation');\n  slideBackButton.addEventListener('click', () => {\n    setUpcomingSlide(parentRef);\n    eventSlideRight();\n  });\n\n  backButtonContainer.classList.add(ELEMENT_NAV_SLIDE_BACK_BUTTON);\n  backButtonContainer.appendChild(slideBackButton);\n\n  return backButtonContainer;\n};\n\nconst createSlideHeadline = ({ link }: { link: HTMLAnchorElement }) => {\n  const slideHeadline = document.createElement('p');\n\n  slideHeadline.appendChild(cloneElementWithoutAttributes({ element: link }));\n  slideHeadline.classList.add(ELEMENT_NAV_SLIDE_HEADLINE);\n\n  return slideHeadline;\n};\n\nconst createSlideActions = (props: TypeSliderSlideActions) => {\n  const { slide } = props;\n\n  const slideActionsContainer = document.createElement('div');\n  const clonedSlide = slide.cloneNode(true) as HTMLDivElement;\n  const links = Array.from(\n    clonedSlide.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  if (links.length > 0) {\n    links.forEach((link) =>\n      slideActionsContainer.appendChild(\n        SlideAction.CreateElement({ ...props, link }),\n      ),\n    );\n  }\n\n  return slideActionsContainer;\n};\n\nconst CreateFirstSlide = (props: TypeSlideFirstContainer) => {\n  const { slider } = props;\n  slider.appendChild(FirstSlide.CreateElement(props));\n};\n\nconst CreateNavSlides = (props: TypeDrawerChildSlide) => {\n  const {\n    slider,\n    setCurrentSlide,\n    childrenSlides,\n    childrenSlideContent,\n    primarySlideLinks,\n    primarySlidesSecondaryLinks,\n    ATTRIBUTE_PARENT_REF,\n    ATTRIBUTE_CHILD_REF,\n    ATTRIBUTE_ACTIVE_SLIDE,\n    ATTRIBUTE_DATA_SLIDE,\n  } = props;\n  let isContextMenu = false;\n  if (!childrenSlides) {\n    CreateFirstSlide({ ...props, isContextMenu });\n    return;\n  }\n\n  const slides = Array.from(\n    childrenSlides.querySelectorAll(`[${ATTRIBUTE_PARENT_REF}]`),\n  ) as HTMLDivElement[];\n  const primaryLinks = primarySlideLinks\n    ? Array.from(primarySlideLinks.querySelectorAll('a'))\n    : [];\n  const secondaryLinks = primarySlidesSecondaryLinks\n    ? Array.from(primarySlidesSecondaryLinks.querySelectorAll(':scope > *'))\n    : [];\n  const childLinks = Array.from(\n    childrenSlides.querySelectorAll(`[${ATTRIBUTE_CHILD_REF}]`),\n  ) as HTMLAnchorElement[];\n  const parentOptions = [\n    ...primaryLinks,\n    ...secondaryLinks,\n    ...childLinks,\n  ] as HTMLAnchorElement[];\n\n  slides.forEach((slide, i) => {\n    const contentRef = slide.getAttribute('content-slot');\n    const sliderContainer = document.createElement('div');\n    const sliderWrapper = document.createElement('div');\n    const isSlideActive = slide.hasAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n    const parentRef = slide.getAttribute(ATTRIBUTE_PARENT_REF) as string;\n    const parentElement = parentOptions.find(\n      (option) => option.getAttribute(ATTRIBUTE_CHILD_REF) === parentRef,\n    );\n\n    if (!parentElement) {\n      console.error(`No parent reference found for ${parentRef}`);\n      return;\n    }\n\n    const slideBackButton = createSlideBackButton({ ...props, parentRef });\n    const slideHeadline = createSlideHeadline({ link: parentElement });\n    const slideActions = createSlideActions({ ...props, slide });\n\n    // Context Menu\n    if (isSlideActive) {\n      sliderContainer.setAttribute(`${ATTRIBUTE_ACTIVE_SLIDE}`, ``);\n      setCurrentSlide({ element: sliderContainer });\n      isContextMenu = true;\n    }\n\n    sliderContainer.setAttribute(`${ATTRIBUTE_DATA_SLIDE}`, '');\n    sliderContainer.classList.add(ELEMENT_NAV_SLIDE_CONTAINER);\n    sliderContainer.setAttribute(`${ATTRIBUTE_PARENT_REF}`, `${parentRef}`);\n\n    if (slideBackButton) sliderWrapper.appendChild(slideBackButton);\n    sliderWrapper.appendChild(slideHeadline);\n    sliderWrapper.appendChild(slideActions);\n\n    sliderWrapper.classList.add(ELEMENT_NAV_SLIDE_WRAPPER);\n    sliderContainer.appendChild(sliderWrapper);\n\n    if (contentRef) {\n      const additionalContent = childrenSlideContent?.find(\n        (element) => element.getAttribute('name') === contentRef,\n      );\n\n      if (additionalContent) {\n        const contentContainer = document.createElement('div');\n\n        contentContainer.appendChild(additionalContent);\n        contentContainer.classList.add(ELEMENT_NAV_SLIDE_CONTENT);\n\n        sliderContainer.appendChild(contentContainer);\n      }\n    }\n\n    slider.appendChild(sliderContainer);\n\n    if (i === slides.length - 1) {\n      setTimeout(() => {\n        CreateFirstSlide({ ...props, isContextMenu });\n      }, 100);\n    }\n  });\n};\n\nexport default {\n  CreateElement: CreateNavSlides,\n  Styles: STYLES_NAV_SLIDES,\n  Elements: {\n    container: ELEMENT_NAV_SLIDE_CONTAINER,\n    wrapper: ELEMENT_NAV_SLIDE_WRAPPER,\n    headline: ELEMENT_NAV_SLIDE_HEADLINE,\n  },\n};\n"],"names":["token","jssToCSS","typography","SlideAction","FirstSlide","iconChevronDown","cloneElementWithoutAttributes"],"mappings":"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"}