@universityofmaryland/web-elements-library 1.6.13 → 1.6.14

package/README.md

@@ -1,6 +1,6 @@
 # University of Maryland Web Elements Library
 
-[![Elements Version](https://img.shields.io/badge/Elements-v1.6.13-blue)](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
+[![Elements Version](https://img.shields.io/badge/Elements-v1.6.14-blue)](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
 
 Foundational UI building blocks for the UMD Design System, providing atomic elements that combine to create complex, accessible, and brand-compliant University of Maryland digital experiences.
 

package/dist/composite/navigation/elements/slider/slides.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slides.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/slider/slides.ts"],"names":[],"mappings":"AAKA,OAAO,EAAsD,mBAAmB,EAAkB,MAAM,eAAe,CAAC;AACxH,OAAO,EAAwD,eAAe,EAAE,MAAM,UAAU,CAAC;AAEjG,MAAM,MAAM,cAAc,GAAG,eAAe,GAC1C,mBAAmB,GAAG;IACpB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,oBAAoB,CAAC,EAAE,eAAe,EAAE,CAAC;IACzC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjD,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAMJ,KAAK,oBAAoB,GAAG,cAAc,GAAG;IAC3C,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AA8OF,eAAO,MAAM,+BAA+B;2BAnGZ,oBAAoB;;;;;;;CA2GnD,CAAC"}
+{"version":3,"file":"slides.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/slider/slides.ts"],"names":[],"mappings":"AAKA,OAAO,EAEL,mBAAmB,EAEpB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,eAAe,EAChB,MAAM,UAAU,CAAC;AAElB,MAAM,MAAM,cAAc,GAAG,eAAe,GAC1C,mBAAmB,GAAG;IACpB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,oBAAoB,CAAC,EAAE,eAAe,EAAE,CAAC;IACzC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjD,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAMJ,KAAK,oBAAoB,GAAG,cAAc,GAAG;IAC3C,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAuPF,eAAO,MAAM,+BAA+B;2BAnGZ,oBAAoB;;;;;;;CA2GnD,CAAC"}

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

@@ -15,6 +15,12 @@ const ContentStyles = `
     margin-top: ${token.spacing.lg};
   }
 `;
+const WrapperStyles = `
+  .${ELEMENT_NAV_SLIDE_WRAPPER} {
+    overflow-y: scroll;
+    height: 100%;
+  }
+`;
 const BackButtonStyles = `
   .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {
     display: block;
@@ -69,6 +75,7 @@ const STYLES_NAV_SLIDES = `
   ${BackButtonStyles}
   ${HeadlineStyles}
   ${ContentStyles}
+  ${WrapperStyles}
   ${createCompositeNavigationSliderAction.Styles}
   ${createCompositeNavigationSliderFirst.Styles}
 `;

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-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 { createCompositeNavigationSliderFirst as FirstSlide, TypeFirstSlideProps, TypeFirstSlide } from './slide-first';\nimport { createCompositeNavigationSliderAction as 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 const createCompositeNavigationSlides = {\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":["SlideAction","FirstSlide","iconChevronDown"],"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 {\n  createCompositeNavigationSliderFirst as FirstSlide,\n  TypeFirstSlideProps,\n  TypeFirstSlide,\n} from './slide-first';\nimport {\n  createCompositeNavigationSliderAction as SlideAction,\n  TypeActionProps,\n} 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 WrapperStyles = `\n  .${ELEMENT_NAV_SLIDE_WRAPPER} {\n    overflow-y: scroll;\n    height: 100%;\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  ${WrapperStyles}\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 const createCompositeNavigationSlides = {\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":["SlideAction","FirstSlide","iconChevronDown"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universityofmaryland/web-elements-library",
-  "version": "1.6.13",
+  "version": "1.6.14",
   "description": "UMD Web Elements",
   "type": "module",
   "main": "dist/index.js",
@@ -41,8 +41,8 @@
     "@types/postcss-js": "^4.0.4",
     "@universityofmaryland/web-builder-library": "^1.0.3",
     "@universityofmaryland/web-icons-library": "^1.0.4",
+    "@universityofmaryland/web-styles-library": "^1.8.9",
     "@universityofmaryland/web-token-library": "^1.0.1",
-    "@universityofmaryland/web-styles-library": "^1.8.8",
     "@universityofmaryland/web-utilities-library": "^1.0.5"
   },
   "peerDependencies": {