@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

package/dist/composite/carousel/elements/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","sources":["../../../../source/composite/carousel/elements/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { arrow_right as iconArrowRight } from '@universityofmaryland/web-icons-library/arrows';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { getResponsiveImageSize } from '@universityofmaryland/web-utilities-library/media';\nimport { setupSwipeDetection } from '@universityofmaryland/web-utilities-library/events';\n\ntype TypeCarouselImageProps = {\n  slides: HTMLElement[];\n  callback?: (index: number) => void;\n  maxHeight?: number;\n};\n\nconst ANIMATION_DURATION = 500;\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active-slide';\n\nconst ELEMENT_CAROUSEL_DECLARATION = 'carousel-image-slider-container';\nconst ELEMENT_CAROUSEL_CONTAINER = 'carousel-image-slider';\nconst ELEMENT_CAROUSEL_SLIDE = 'carousel-image-slide';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-slider-button';\n\nconst OVERWRITE_ACTIVE_SLIDE = `.${ELEMENT_CAROUSEL_SLIDE}[${ATTRIBUTE_ACTIVE_SLIDE}]`;\n\n// prettier-ignore\nconst SliderButtons = `\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} {\n    background-color: ${token.color.white};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 40px;\n    width: 40px;\n    position: absolute;\n    top: 50%;\n    z-index: 99;\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type {\n    left: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type svg {\n    transform: rotate(180deg);\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:last-of-type {\n    right: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} svg {\n    fill: ${token.color.black};\n    width: 16px;\n  }\n`\n\n// prettier-ignore\nconst SlideStyles = `\n  .${ELEMENT_CAROUSEL_SLIDE} {\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    left: 100%;\n    display: none;\n    transition: transform ${ANIMATION_DURATION}ms ease-in-out;\n  }\n\n  ${OVERWRITE_ACTIVE_SLIDE} {\n    z-index: 99;\n    left: 0;\n    display: block;\n    transform: translateX(0);\n  }\n`\n\n// prettier-ignore\nconst SliderStyles = `\n  .${ELEMENT_CAROUSEL_CONTAINER} {\n    position: relative;\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_ELEMENT = `\n  .${ELEMENT_CAROUSEL_DECLARATION} {\n    overflow: hidden;\n  }\n\n  ${SliderStyles}\n  ${SlideStyles}\n  ${SliderButtons}\n`;\n\nconst CreateButton = ({\n  EventSlide,\n  isRight = true,\n}: {\n  EventSlide: ({ forward }: { forward?: boolean }) => void;\n  isRight?: boolean;\n}) => {\n  const button = document.createElement('button');\n  button.setAttribute('type', 'button');\n  button.classList.add(ELEMENT_CAROUSEL_SLIDER_BUTTON);\n  button.innerHTML = iconArrowRight;\n\n  if (!isRight) {\n    button.setAttribute('aria-label', 'Previous');\n  } else {\n    button.setAttribute('aria-label', 'Next');\n  }\n\n  button.addEventListener('click', (event) => {\n    event.stopPropagation();\n    if (isRight) EventSlide({});\n    if (!isRight) EventSlide({ forward: false });\n    button.disabled = true;\n\n    setTimeout(() => {\n      button.disabled = false;\n    }, ANIMATION_DURATION + 100);\n  });\n\n  return button;\n};\n\nconst SetCarouselSize = ({\n  slider,\n  activeSlide,\n  transition = false,\n  maxHeight,\n}: {\n  slider: HTMLElement;\n  activeSlide: HTMLElement;\n  transition?: boolean;\n  maxHeight?: number;\n}) => {\n  const windowHeight = window.innerHeight - 48;\n  const children = Array.from(activeSlide.children) as HTMLDivElement[];\n  const buttons = Array.from(\n    slider.querySelectorAll(`.${ELEMENT_CAROUSEL_SLIDER_BUTTON}`),\n  ) as HTMLButtonElement[];\n  const img = activeSlide.querySelector('img') as HTMLImageElement;\n  const maxWindowHeight = maxHeight\n    ? maxHeight > windowHeight\n      ? windowHeight\n      : maxHeight\n    : windowHeight;\n  const imageSize = getResponsiveImageSize({\n    image: img,\n    parentNode: slider,\n    maxWindowHeight,\n  });\n  const imageContainer = children.find((child) =>\n    child.contains(img),\n  ) as HTMLElement;\n  let size = imageSize;\n\n  imageContainer.style.height = `${imageSize}px`;\n\n  if (children.length > 1) {\n    size = children.reduce((acc, currentElement) => {\n      return currentElement.offsetHeight + acc;\n    }, 0);\n  }\n\n  buttons.forEach((button) => (button.style.top = `${imageSize / 2}px`));\n\n  if (transition) {\n    slider.style.transition = `height ${ANIMATION_DURATION}ms ease-in-out`;\n  } else {\n    slider.style.transition = `none`;\n  }\n  slider.style.height = `${size}px`;\n};\n\nconst SlideActiveSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const transformDirection = isRight ? 'translateX(-100%)' : 'translateX(100%)';\n  slide.style.transform = `${transformDirection}`;\n\n  setTimeout(() => {\n    slide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.style.transform = 'none';\n  }, ANIMATION_DURATION + 100);\n};\n\nconst SlideUpcomingSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const amount = '90';\n  const transformDirection = isRight\n    ? `translateX(-${amount}%)`\n    : `translateX(${amount}%)`;\n  const startingPosition = isRight ? `${amount}%` : `-${amount}%`;\n\n  slide.style.zIndex = '9';\n  slide.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;\n  slide.style.display = 'block';\n  slide.style.left = `${startingPosition}`;\n\n  setTimeout(() => {\n    slide.style.transform = `${transformDirection}`;\n  }, 1);\n\n  setTimeout(() => {\n    slide.style.transition = 'none';\n    slide.style.left = '0';\n    slide.style.transform = 'none';\n    slide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.removeAttribute('style');\n  }, ANIMATION_DURATION + 100);\n};\n\nexport default (props: TypeCarouselImageProps) =>\n  (() => {\n    const { slides, callback, maxHeight } = props;\n    const container = document.createElement('div');\n    const slider = document.createElement('div');\n    let activeIndex = 0;\n    let styles = STYLES_CAROUSEL_IMAGE_ELEMENT;\n\n    const EventSlide = ({ forward = true }: { forward?: boolean }) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: forward });\n\n      if (forward) {\n        activeIndex = activeIndex + 1;\n        if (activeIndex >= slides.length) activeIndex = 0;\n      } else {\n        activeIndex = activeIndex - 1;\n        if (activeIndex < 0) activeIndex = slides.length - 1;\n      }\n\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: forward });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventMoveTo = (index: number) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: true });\n      activeIndex = index;\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: true });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventSlideLeft = () => EventSlide({ forward: false });\n    const EventSlideRight = () => EventSlide({ forward: true });\n\n    const EventSwipe = () => {\n      const swipes = (isrightswipe: Boolean) => {\n        if (!isrightswipe) {\n          EventSlide({ forward: true });\n        } else {\n          EventSlide({ forward: false });\n        }\n      };\n\n      setupSwipeDetection({\n        container: slider,\n        callback: swipes,\n      });\n    };\n\n    const EventResize = () => {\n      SetCarouselSize({ slider, activeSlide: slides[activeIndex], maxHeight });\n    };\n\n    const Load = () => {\n      const setSize = () => {\n        const activeSlide = slides[activeIndex];\n        SetCarouselSize({ slider, activeSlide, maxHeight });\n        activeSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n      };\n      setTimeout(setSize, 100);\n      setTimeout(setSize, 300);\n    };\n\n    slider.classList.add(ELEMENT_CAROUSEL_CONTAINER);\n    slides.forEach((slide) => slide.classList.add(ELEMENT_CAROUSEL_SLIDE));\n    slider.append(...slides);\n    slider.appendChild(CreateButton({ EventSlide, isRight: false }));\n    slider.appendChild(\n      CreateButton({\n        EventSlide,\n        isRight: true,\n      }),\n    );\n\n    container.classList.add(ELEMENT_CAROUSEL_DECLARATION);\n    container.appendChild(slider);\n\n    window.addEventListener('resize', debounce(EventResize, 10));\n    EventSwipe();\n\n    return {\n      element: container,\n      styles,\n      events: {\n        Load,\n        EventMoveTo,\n        EventResize,\n        EventSlideLeft,\n        EventSlideRight,\n      },\n    };\n  })();\n"],"names":["token","iconArrowRight","getResponsiveImageSize","setupSwipeDetection","debounce"],"mappings":"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"}
+{"version":3,"file":"image.js","sources":["../../../../source/composite/carousel/elements/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { getResponsiveImageSize } from '@universityofmaryland/web-utilities-library/media';\nimport { setupSwipeDetection } from '@universityofmaryland/web-utilities-library/events';\nimport { arrow_right as iconArrowRight } from '@universityofmaryland/web-icons-library/arrows';\n\ntype TypeCarouselImageProps = {\n  slides: HTMLElement[];\n  callback?: (index: number) => void;\n  maxHeight?: number;\n};\n\nconst ANIMATION_DURATION = 500;\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active-slide';\n\nconst ELEMENT_CAROUSEL_DECLARATION = 'carousel-image-slider-container';\nconst ELEMENT_CAROUSEL_CONTAINER = 'carousel-image-slider';\nconst ELEMENT_CAROUSEL_SLIDE = 'carousel-image-slide';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-slider-button';\n\nconst OVERWRITE_ACTIVE_SLIDE = `.${ELEMENT_CAROUSEL_SLIDE}[${ATTRIBUTE_ACTIVE_SLIDE}]`;\n\n// prettier-ignore\nconst SliderButtons = `\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} {\n    background-color: ${token.color.white};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 40px;\n    width: 40px;\n    position: absolute;\n    top: 50%;\n    z-index: 99;\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type {\n    left: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type svg {\n    transform: rotate(180deg);\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:last-of-type {\n    right: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} svg {\n    fill: ${token.color.black};\n    width: 16px;\n  }\n`\n\n// prettier-ignore\nconst SlideStyles = `\n  .${ELEMENT_CAROUSEL_SLIDE} {\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    left: 100%;\n    display: none;\n    transition: transform ${ANIMATION_DURATION}ms ease-in-out;\n  }\n\n  ${OVERWRITE_ACTIVE_SLIDE} {\n    z-index: 99;\n    left: 0;\n    display: block;\n    transform: translateX(0);\n  }\n`\n\n// prettier-ignore\nconst SliderStyles = `\n  .${ELEMENT_CAROUSEL_CONTAINER} {\n    position: relative;\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_ELEMENT = `\n  .${ELEMENT_CAROUSEL_DECLARATION} {\n    overflow: hidden;\n  }\n\n  ${SliderStyles}\n  ${SlideStyles}\n  ${SliderButtons}\n`;\n\nconst CreateButton = ({\n  EventSlide,\n  isRight = true,\n}: {\n  EventSlide: ({ forward }: { forward?: boolean }) => void;\n  isRight?: boolean;\n}) => {\n  const button = document.createElement('button');\n  button.setAttribute('type', 'button');\n  button.classList.add(ELEMENT_CAROUSEL_SLIDER_BUTTON);\n  button.innerHTML = iconArrowRight;\n\n  if (!isRight) {\n    button.setAttribute('aria-label', 'Previous');\n  } else {\n    button.setAttribute('aria-label', 'Next');\n  }\n\n  button.addEventListener('click', (event) => {\n    event.stopPropagation();\n    if (isRight) EventSlide({});\n    if (!isRight) EventSlide({ forward: false });\n    button.disabled = true;\n\n    setTimeout(() => {\n      button.disabled = false;\n    }, ANIMATION_DURATION + 100);\n  });\n\n  return button;\n};\n\nconst SetCarouselSize = ({\n  slider,\n  activeSlide,\n  transition = false,\n  maxHeight,\n}: {\n  slider: HTMLElement;\n  activeSlide: HTMLElement;\n  transition?: boolean;\n  maxHeight?: number;\n}) => {\n  const windowHeight = window.innerHeight - 48;\n  const children = Array.from(activeSlide.children) as HTMLDivElement[];\n  const buttons = Array.from(\n    slider.querySelectorAll(`.${ELEMENT_CAROUSEL_SLIDER_BUTTON}`),\n  ) as HTMLButtonElement[];\n  const img = activeSlide.querySelector('img') as HTMLImageElement;\n  const maxWindowHeight = maxHeight\n    ? maxHeight > windowHeight\n      ? windowHeight\n      : maxHeight\n    : windowHeight;\n  const imageSize = getResponsiveImageSize({\n    image: img,\n    parentNode: slider,\n    maxWindowHeight,\n  });\n  const imageContainer = children.find((child) =>\n    child.contains(img),\n  ) as HTMLElement;\n  let size = imageSize;\n\n  imageContainer.style.height = `${imageSize}px`;\n\n  if (children.length > 1) {\n    size = children.reduce((acc, currentElement) => {\n      return currentElement.offsetHeight + acc;\n    }, 0);\n  }\n\n  buttons.forEach((button) => (button.style.top = `${imageSize / 2}px`));\n\n  if (transition) {\n    slider.style.transition = `height ${ANIMATION_DURATION}ms ease-in-out`;\n  } else {\n    slider.style.transition = `none`;\n  }\n  slider.style.height = `${size}px`;\n};\n\nconst SlideActiveSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const transformDirection = isRight ? 'translateX(-100%)' : 'translateX(100%)';\n  slide.style.transform = `${transformDirection}`;\n\n  setTimeout(() => {\n    slide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.style.transform = 'none';\n  }, ANIMATION_DURATION + 100);\n};\n\nconst SlideUpcomingSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const amount = '90';\n  const transformDirection = isRight\n    ? `translateX(-${amount}%)`\n    : `translateX(${amount}%)`;\n  const startingPosition = isRight ? `${amount}%` : `-${amount}%`;\n\n  slide.style.zIndex = '9';\n  slide.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;\n  slide.style.display = 'block';\n  slide.style.left = `${startingPosition}`;\n\n  setTimeout(() => {\n    slide.style.transform = `${transformDirection}`;\n  }, 1);\n\n  setTimeout(() => {\n    slide.style.transition = 'none';\n    slide.style.left = '0';\n    slide.style.transform = 'none';\n    slide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.removeAttribute('style');\n  }, ANIMATION_DURATION + 100);\n};\n\nexport default (props: TypeCarouselImageProps) =>\n  (() => {\n    const { slides, callback, maxHeight } = props;\n    const container = document.createElement('div');\n    const slider = document.createElement('div');\n    let activeIndex = 0;\n    let styles = STYLES_CAROUSEL_IMAGE_ELEMENT;\n\n    const EventSlide = ({ forward = true }: { forward?: boolean }) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: forward });\n\n      if (forward) {\n        activeIndex = activeIndex + 1;\n        if (activeIndex >= slides.length) activeIndex = 0;\n      } else {\n        activeIndex = activeIndex - 1;\n        if (activeIndex < 0) activeIndex = slides.length - 1;\n      }\n\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: forward });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventMoveTo = (index: number) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: true });\n      activeIndex = index;\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: true });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventSlideLeft = () => EventSlide({ forward: false });\n    const EventSlideRight = () => EventSlide({ forward: true });\n\n    const EventSwipe = () => {\n      const swipes = (isrightswipe: Boolean) => {\n        if (!isrightswipe) {\n          EventSlide({ forward: true });\n        } else {\n          EventSlide({ forward: false });\n        }\n      };\n\n      setupSwipeDetection({\n        container: slider,\n        callback: swipes,\n      });\n    };\n\n    const EventResize = () => {\n      SetCarouselSize({ slider, activeSlide: slides[activeIndex], maxHeight });\n    };\n\n    const Load = () => {\n      const setSize = () => {\n        const activeSlide = slides[activeIndex];\n        SetCarouselSize({ slider, activeSlide, maxHeight });\n        activeSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n      };\n      setTimeout(setSize, 100);\n      setTimeout(setSize, 300);\n    };\n\n    slider.classList.add(ELEMENT_CAROUSEL_CONTAINER);\n    slides.forEach((slide) => slide.classList.add(ELEMENT_CAROUSEL_SLIDE));\n    slider.append(...slides);\n    slider.appendChild(CreateButton({ EventSlide, isRight: false }));\n    slider.appendChild(\n      CreateButton({\n        EventSlide,\n        isRight: true,\n      }),\n    );\n\n    container.classList.add(ELEMENT_CAROUSEL_DECLARATION);\n    container.appendChild(slider);\n\n    window.addEventListener('resize', debounce(EventResize, 10));\n    EventSwipe();\n\n    return {\n      element: container,\n      styles,\n      events: {\n        Load,\n        EventMoveTo,\n        EventResize,\n        EventSlideLeft,\n        EventSlideRight,\n      },\n    };\n  })();\n"],"names":["token","iconArrowRight","getResponsiveImageSize","setupSwipeDetection","debounce"],"mappings":"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"}

package/dist/composite/carousel/elements/image.mjs

@@ -1,8 +1,8 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
-import { arrow_right } from "@universityofmaryland/web-icons-library/arrows";
+import * as token from "@universityofmaryland/web-token-library";
 import { debounce } from "@universityofmaryland/web-utilities-library/performance";
 import { getResponsiveImageSize } from "@universityofmaryland/web-utilities-library/media";
 import { setupSwipeDetection } from "@universityofmaryland/web-utilities-library/events";
+import { arrow_right } from "@universityofmaryland/web-icons-library/arrows";
 const ANIMATION_DURATION = 500;
 const ATTRIBUTE_ACTIVE_SLIDE = "data-active-slide";
 const ELEMENT_CAROUSEL_DECLARATION = "carousel-image-slider-container";

package/dist/composite/carousel/elements/image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"image.mjs","sources":["../../../../source/composite/carousel/elements/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { arrow_right as iconArrowRight } from '@universityofmaryland/web-icons-library/arrows';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { getResponsiveImageSize } from '@universityofmaryland/web-utilities-library/media';\nimport { setupSwipeDetection } from '@universityofmaryland/web-utilities-library/events';\n\ntype TypeCarouselImageProps = {\n  slides: HTMLElement[];\n  callback?: (index: number) => void;\n  maxHeight?: number;\n};\n\nconst ANIMATION_DURATION = 500;\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active-slide';\n\nconst ELEMENT_CAROUSEL_DECLARATION = 'carousel-image-slider-container';\nconst ELEMENT_CAROUSEL_CONTAINER = 'carousel-image-slider';\nconst ELEMENT_CAROUSEL_SLIDE = 'carousel-image-slide';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-slider-button';\n\nconst OVERWRITE_ACTIVE_SLIDE = `.${ELEMENT_CAROUSEL_SLIDE}[${ATTRIBUTE_ACTIVE_SLIDE}]`;\n\n// prettier-ignore\nconst SliderButtons = `\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} {\n    background-color: ${token.color.white};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 40px;\n    width: 40px;\n    position: absolute;\n    top: 50%;\n    z-index: 99;\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type {\n    left: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type svg {\n    transform: rotate(180deg);\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:last-of-type {\n    right: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} svg {\n    fill: ${token.color.black};\n    width: 16px;\n  }\n`\n\n// prettier-ignore\nconst SlideStyles = `\n  .${ELEMENT_CAROUSEL_SLIDE} {\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    left: 100%;\n    display: none;\n    transition: transform ${ANIMATION_DURATION}ms ease-in-out;\n  }\n\n  ${OVERWRITE_ACTIVE_SLIDE} {\n    z-index: 99;\n    left: 0;\n    display: block;\n    transform: translateX(0);\n  }\n`\n\n// prettier-ignore\nconst SliderStyles = `\n  .${ELEMENT_CAROUSEL_CONTAINER} {\n    position: relative;\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_ELEMENT = `\n  .${ELEMENT_CAROUSEL_DECLARATION} {\n    overflow: hidden;\n  }\n\n  ${SliderStyles}\n  ${SlideStyles}\n  ${SliderButtons}\n`;\n\nconst CreateButton = ({\n  EventSlide,\n  isRight = true,\n}: {\n  EventSlide: ({ forward }: { forward?: boolean }) => void;\n  isRight?: boolean;\n}) => {\n  const button = document.createElement('button');\n  button.setAttribute('type', 'button');\n  button.classList.add(ELEMENT_CAROUSEL_SLIDER_BUTTON);\n  button.innerHTML = iconArrowRight;\n\n  if (!isRight) {\n    button.setAttribute('aria-label', 'Previous');\n  } else {\n    button.setAttribute('aria-label', 'Next');\n  }\n\n  button.addEventListener('click', (event) => {\n    event.stopPropagation();\n    if (isRight) EventSlide({});\n    if (!isRight) EventSlide({ forward: false });\n    button.disabled = true;\n\n    setTimeout(() => {\n      button.disabled = false;\n    }, ANIMATION_DURATION + 100);\n  });\n\n  return button;\n};\n\nconst SetCarouselSize = ({\n  slider,\n  activeSlide,\n  transition = false,\n  maxHeight,\n}: {\n  slider: HTMLElement;\n  activeSlide: HTMLElement;\n  transition?: boolean;\n  maxHeight?: number;\n}) => {\n  const windowHeight = window.innerHeight - 48;\n  const children = Array.from(activeSlide.children) as HTMLDivElement[];\n  const buttons = Array.from(\n    slider.querySelectorAll(`.${ELEMENT_CAROUSEL_SLIDER_BUTTON}`),\n  ) as HTMLButtonElement[];\n  const img = activeSlide.querySelector('img') as HTMLImageElement;\n  const maxWindowHeight = maxHeight\n    ? maxHeight > windowHeight\n      ? windowHeight\n      : maxHeight\n    : windowHeight;\n  const imageSize = getResponsiveImageSize({\n    image: img,\n    parentNode: slider,\n    maxWindowHeight,\n  });\n  const imageContainer = children.find((child) =>\n    child.contains(img),\n  ) as HTMLElement;\n  let size = imageSize;\n\n  imageContainer.style.height = `${imageSize}px`;\n\n  if (children.length > 1) {\n    size = children.reduce((acc, currentElement) => {\n      return currentElement.offsetHeight + acc;\n    }, 0);\n  }\n\n  buttons.forEach((button) => (button.style.top = `${imageSize / 2}px`));\n\n  if (transition) {\n    slider.style.transition = `height ${ANIMATION_DURATION}ms ease-in-out`;\n  } else {\n    slider.style.transition = `none`;\n  }\n  slider.style.height = `${size}px`;\n};\n\nconst SlideActiveSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const transformDirection = isRight ? 'translateX(-100%)' : 'translateX(100%)';\n  slide.style.transform = `${transformDirection}`;\n\n  setTimeout(() => {\n    slide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.style.transform = 'none';\n  }, ANIMATION_DURATION + 100);\n};\n\nconst SlideUpcomingSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const amount = '90';\n  const transformDirection = isRight\n    ? `translateX(-${amount}%)`\n    : `translateX(${amount}%)`;\n  const startingPosition = isRight ? `${amount}%` : `-${amount}%`;\n\n  slide.style.zIndex = '9';\n  slide.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;\n  slide.style.display = 'block';\n  slide.style.left = `${startingPosition}`;\n\n  setTimeout(() => {\n    slide.style.transform = `${transformDirection}`;\n  }, 1);\n\n  setTimeout(() => {\n    slide.style.transition = 'none';\n    slide.style.left = '0';\n    slide.style.transform = 'none';\n    slide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.removeAttribute('style');\n  }, ANIMATION_DURATION + 100);\n};\n\nexport default (props: TypeCarouselImageProps) =>\n  (() => {\n    const { slides, callback, maxHeight } = props;\n    const container = document.createElement('div');\n    const slider = document.createElement('div');\n    let activeIndex = 0;\n    let styles = STYLES_CAROUSEL_IMAGE_ELEMENT;\n\n    const EventSlide = ({ forward = true }: { forward?: boolean }) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: forward });\n\n      if (forward) {\n        activeIndex = activeIndex + 1;\n        if (activeIndex >= slides.length) activeIndex = 0;\n      } else {\n        activeIndex = activeIndex - 1;\n        if (activeIndex < 0) activeIndex = slides.length - 1;\n      }\n\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: forward });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventMoveTo = (index: number) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: true });\n      activeIndex = index;\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: true });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventSlideLeft = () => EventSlide({ forward: false });\n    const EventSlideRight = () => EventSlide({ forward: true });\n\n    const EventSwipe = () => {\n      const swipes = (isrightswipe: Boolean) => {\n        if (!isrightswipe) {\n          EventSlide({ forward: true });\n        } else {\n          EventSlide({ forward: false });\n        }\n      };\n\n      setupSwipeDetection({\n        container: slider,\n        callback: swipes,\n      });\n    };\n\n    const EventResize = () => {\n      SetCarouselSize({ slider, activeSlide: slides[activeIndex], maxHeight });\n    };\n\n    const Load = () => {\n      const setSize = () => {\n        const activeSlide = slides[activeIndex];\n        SetCarouselSize({ slider, activeSlide, maxHeight });\n        activeSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n      };\n      setTimeout(setSize, 100);\n      setTimeout(setSize, 300);\n    };\n\n    slider.classList.add(ELEMENT_CAROUSEL_CONTAINER);\n    slides.forEach((slide) => slide.classList.add(ELEMENT_CAROUSEL_SLIDE));\n    slider.append(...slides);\n    slider.appendChild(CreateButton({ EventSlide, isRight: false }));\n    slider.appendChild(\n      CreateButton({\n        EventSlide,\n        isRight: true,\n      }),\n    );\n\n    container.classList.add(ELEMENT_CAROUSEL_DECLARATION);\n    container.appendChild(slider);\n\n    window.addEventListener('resize', debounce(EventResize, 10));\n    EventSwipe();\n\n    return {\n      element: container,\n      styles,\n      events: {\n        Load,\n        EventMoveTo,\n        EventResize,\n        EventSlideLeft,\n        EventSlideRight,\n      },\n    };\n  })();\n"],"names":["iconArrowRight"],"mappings":"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"}
+{"version":3,"file":"image.mjs","sources":["../../../../source/composite/carousel/elements/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { getResponsiveImageSize } from '@universityofmaryland/web-utilities-library/media';\nimport { setupSwipeDetection } from '@universityofmaryland/web-utilities-library/events';\nimport { arrow_right as iconArrowRight } from '@universityofmaryland/web-icons-library/arrows';\n\ntype TypeCarouselImageProps = {\n  slides: HTMLElement[];\n  callback?: (index: number) => void;\n  maxHeight?: number;\n};\n\nconst ANIMATION_DURATION = 500;\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active-slide';\n\nconst ELEMENT_CAROUSEL_DECLARATION = 'carousel-image-slider-container';\nconst ELEMENT_CAROUSEL_CONTAINER = 'carousel-image-slider';\nconst ELEMENT_CAROUSEL_SLIDE = 'carousel-image-slide';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-slider-button';\n\nconst OVERWRITE_ACTIVE_SLIDE = `.${ELEMENT_CAROUSEL_SLIDE}[${ATTRIBUTE_ACTIVE_SLIDE}]`;\n\n// prettier-ignore\nconst SliderButtons = `\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} {\n    background-color: ${token.color.white};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 40px;\n    width: 40px;\n    position: absolute;\n    top: 50%;\n    z-index: 99;\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type {\n    left: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type svg {\n    transform: rotate(180deg);\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:last-of-type {\n    right: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} svg {\n    fill: ${token.color.black};\n    width: 16px;\n  }\n`\n\n// prettier-ignore\nconst SlideStyles = `\n  .${ELEMENT_CAROUSEL_SLIDE} {\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    left: 100%;\n    display: none;\n    transition: transform ${ANIMATION_DURATION}ms ease-in-out;\n  }\n\n  ${OVERWRITE_ACTIVE_SLIDE} {\n    z-index: 99;\n    left: 0;\n    display: block;\n    transform: translateX(0);\n  }\n`\n\n// prettier-ignore\nconst SliderStyles = `\n  .${ELEMENT_CAROUSEL_CONTAINER} {\n    position: relative;\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_ELEMENT = `\n  .${ELEMENT_CAROUSEL_DECLARATION} {\n    overflow: hidden;\n  }\n\n  ${SliderStyles}\n  ${SlideStyles}\n  ${SliderButtons}\n`;\n\nconst CreateButton = ({\n  EventSlide,\n  isRight = true,\n}: {\n  EventSlide: ({ forward }: { forward?: boolean }) => void;\n  isRight?: boolean;\n}) => {\n  const button = document.createElement('button');\n  button.setAttribute('type', 'button');\n  button.classList.add(ELEMENT_CAROUSEL_SLIDER_BUTTON);\n  button.innerHTML = iconArrowRight;\n\n  if (!isRight) {\n    button.setAttribute('aria-label', 'Previous');\n  } else {\n    button.setAttribute('aria-label', 'Next');\n  }\n\n  button.addEventListener('click', (event) => {\n    event.stopPropagation();\n    if (isRight) EventSlide({});\n    if (!isRight) EventSlide({ forward: false });\n    button.disabled = true;\n\n    setTimeout(() => {\n      button.disabled = false;\n    }, ANIMATION_DURATION + 100);\n  });\n\n  return button;\n};\n\nconst SetCarouselSize = ({\n  slider,\n  activeSlide,\n  transition = false,\n  maxHeight,\n}: {\n  slider: HTMLElement;\n  activeSlide: HTMLElement;\n  transition?: boolean;\n  maxHeight?: number;\n}) => {\n  const windowHeight = window.innerHeight - 48;\n  const children = Array.from(activeSlide.children) as HTMLDivElement[];\n  const buttons = Array.from(\n    slider.querySelectorAll(`.${ELEMENT_CAROUSEL_SLIDER_BUTTON}`),\n  ) as HTMLButtonElement[];\n  const img = activeSlide.querySelector('img') as HTMLImageElement;\n  const maxWindowHeight = maxHeight\n    ? maxHeight > windowHeight\n      ? windowHeight\n      : maxHeight\n    : windowHeight;\n  const imageSize = getResponsiveImageSize({\n    image: img,\n    parentNode: slider,\n    maxWindowHeight,\n  });\n  const imageContainer = children.find((child) =>\n    child.contains(img),\n  ) as HTMLElement;\n  let size = imageSize;\n\n  imageContainer.style.height = `${imageSize}px`;\n\n  if (children.length > 1) {\n    size = children.reduce((acc, currentElement) => {\n      return currentElement.offsetHeight + acc;\n    }, 0);\n  }\n\n  buttons.forEach((button) => (button.style.top = `${imageSize / 2}px`));\n\n  if (transition) {\n    slider.style.transition = `height ${ANIMATION_DURATION}ms ease-in-out`;\n  } else {\n    slider.style.transition = `none`;\n  }\n  slider.style.height = `${size}px`;\n};\n\nconst SlideActiveSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const transformDirection = isRight ? 'translateX(-100%)' : 'translateX(100%)';\n  slide.style.transform = `${transformDirection}`;\n\n  setTimeout(() => {\n    slide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.style.transform = 'none';\n  }, ANIMATION_DURATION + 100);\n};\n\nconst SlideUpcomingSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const amount = '90';\n  const transformDirection = isRight\n    ? `translateX(-${amount}%)`\n    : `translateX(${amount}%)`;\n  const startingPosition = isRight ? `${amount}%` : `-${amount}%`;\n\n  slide.style.zIndex = '9';\n  slide.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;\n  slide.style.display = 'block';\n  slide.style.left = `${startingPosition}`;\n\n  setTimeout(() => {\n    slide.style.transform = `${transformDirection}`;\n  }, 1);\n\n  setTimeout(() => {\n    slide.style.transition = 'none';\n    slide.style.left = '0';\n    slide.style.transform = 'none';\n    slide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.removeAttribute('style');\n  }, ANIMATION_DURATION + 100);\n};\n\nexport default (props: TypeCarouselImageProps) =>\n  (() => {\n    const { slides, callback, maxHeight } = props;\n    const container = document.createElement('div');\n    const slider = document.createElement('div');\n    let activeIndex = 0;\n    let styles = STYLES_CAROUSEL_IMAGE_ELEMENT;\n\n    const EventSlide = ({ forward = true }: { forward?: boolean }) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: forward });\n\n      if (forward) {\n        activeIndex = activeIndex + 1;\n        if (activeIndex >= slides.length) activeIndex = 0;\n      } else {\n        activeIndex = activeIndex - 1;\n        if (activeIndex < 0) activeIndex = slides.length - 1;\n      }\n\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: forward });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventMoveTo = (index: number) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: true });\n      activeIndex = index;\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: true });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventSlideLeft = () => EventSlide({ forward: false });\n    const EventSlideRight = () => EventSlide({ forward: true });\n\n    const EventSwipe = () => {\n      const swipes = (isrightswipe: Boolean) => {\n        if (!isrightswipe) {\n          EventSlide({ forward: true });\n        } else {\n          EventSlide({ forward: false });\n        }\n      };\n\n      setupSwipeDetection({\n        container: slider,\n        callback: swipes,\n      });\n    };\n\n    const EventResize = () => {\n      SetCarouselSize({ slider, activeSlide: slides[activeIndex], maxHeight });\n    };\n\n    const Load = () => {\n      const setSize = () => {\n        const activeSlide = slides[activeIndex];\n        SetCarouselSize({ slider, activeSlide, maxHeight });\n        activeSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n      };\n      setTimeout(setSize, 100);\n      setTimeout(setSize, 300);\n    };\n\n    slider.classList.add(ELEMENT_CAROUSEL_CONTAINER);\n    slides.forEach((slide) => slide.classList.add(ELEMENT_CAROUSEL_SLIDE));\n    slider.append(...slides);\n    slider.appendChild(CreateButton({ EventSlide, isRight: false }));\n    slider.appendChild(\n      CreateButton({\n        EventSlide,\n        isRight: true,\n      }),\n    );\n\n    container.classList.add(ELEMENT_CAROUSEL_DECLARATION);\n    container.appendChild(slider);\n\n    window.addEventListener('resize', debounce(EventResize, 10));\n    EventSwipe();\n\n    return {\n      element: container,\n      styles,\n      events: {\n        Load,\n        EventMoveTo,\n        EventResize,\n        EventSlideLeft,\n        EventSlideRight,\n      },\n    };\n  })();\n"],"names":["iconArrowRight"],"mappings":"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"}

package/dist/composite/carousel/elements/overlay.js

@@ -1,9 +1,9 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
-const image$1 = require("../../../layout/image.js");
+const token = require("@universityofmaryland/web-token-library");
 require("./blocks.js");
 const fullScreen = require("./full-screen.js");
 const image = require("./image.js");
+const image$1 = require("../../../layout/image.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/composite/carousel/elements/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { Image as LayoutImage } from 'layout';\nimport * as carouselElements from '../elements';\n\nconst ELEMENT_CAROUSEL_OVERLAY_COINTAINER = 'carousel-overlay-container';\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ${token.color.gray.dark};\n  }\n\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_OVERLAY_ELEMENT = `\n  ${LayoutImage.Styles}\n  ${OverlayImageContainerStyles}\n`;\n\nconst CreateOverlaySlide = ({ images }: { images: HTMLImageElement[] }) =>\n  images.map((image) => {\n    const slide = document.createElement('div');\n    const imageContainer = document.createElement('div');\n    const imageBlock = LayoutImage.CreateElement({\n      image,\n      showCaption: true,\n    });\n\n    imageContainer.classList.add(ELEMENT_CAROUSEL_OVERLAY_COINTAINER);\n    imageContainer.appendChild(imageBlock);\n\n    slide.appendChild(imageContainer);\n\n    return slide;\n  });\n\nexport default ({ images }: { images: HTMLImageElement[] }) =>\n  (() => {\n    let styles = STYLES_CAROUSEL_OVERLAY_ELEMENT;\n\n    const setFullScreen = (index: number) => {\n      let canMove = true;\n\n      const checkKeyEvents = (event: KeyboardEvent) => {\n        if (!canMove) return;\n        canMove = false;\n        if (event.key == 'ArrowLeft') overlayCarousel.events.EventSlideLeft();\n        if (event.key == 'ArrowRight') overlayCarousel.events.EventSlideRight();\n\n        setTimeout(() => {\n          canMove = true;\n        }, 700);\n      };\n\n      overlayCarousel.events.EventMoveTo(index);\n      setTimeout(() => fixedFullScreen.events.show(), 100);\n\n      setTimeout(() => {\n        overlayCarousel.events.EventResize();\n      }, 100);\n\n      isFullScreenEvents = window.addEventListener('keyup', checkKeyEvents);\n    };\n\n    const overlaySlides = CreateOverlaySlide({ images });\n\n    const overlayCarousel = carouselElements.image({\n      slides: overlaySlides,\n      maxHeight: (window.innerHeight / 10) * 8,\n    });\n\n    styles += overlayCarousel.styles;\n\n    const fixedFullScreen = carouselElements.fullScreen({\n      content: overlayCarousel.element,\n      callback: () => {\n        if (isFullScreenEvents)\n          window.removeEventListener('keyup', isFullScreenEvents);\n      },\n    });\n\n    styles += fixedFullScreen.styles;\n\n    let isFullScreenEvents: any = null;\n\n    return {\n      element: fixedFullScreen.element,\n      styles,\n      events: {\n        setFullScreen,\n      },\n    };\n  })();\n"],"names":["token","LayoutImage","image","carouselElements.image","carouselElements.fullScreen"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,sCAAsC;AAG5C,MAAM,8BAA8B;AAAA,KAC/B,mCAAmC;AAAA;AAAA;AAAA;AAAA,wBAIhBA,iBAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,KAGxC,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,kCAAkC;AAAA,IACpCC,QAAY,MAAM;AAAA,IAClB,2BAA2B;AAAA;AAG/B,MAAM,qBAAqB,CAAC,EAAE,OAAA,MAC5B,OAAO,IAAI,CAACC,WAAU;AACpB,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,aAAaD,QAAY,cAAc;AAAA,IAC3C,OAAAC;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,iBAAe,UAAU,IAAI,mCAAmC;AAChE,iBAAe,YAAY,UAAU;AAErC,QAAM,YAAY,cAAc;AAEhC,SAAO;AACT,CAAC;AAEH,MAAA,UAAe,CAAC,EAAE,OAAA,OACf,MAAM;AACL,MAAI,SAAS;AAEb,QAAM,gBAAgB,CAAC,UAAkB;AACvC,QAAI,UAAU;AAEd,UAAM,iBAAiB,CAAC,UAAyB;AAC/C,UAAI,CAAC,QAAS;AACd,gBAAU;AACV,UAAI,MAAM,OAAO,YAAa,iBAAgB,OAAO,eAAA;AACrD,UAAI,MAAM,OAAO,aAAc,iBAAgB,OAAO,gBAAA;AAEtD,iBAAW,MAAM;AACf,kBAAU;AAAA,MACZ,GAAG,GAAG;AAAA,IACR;AAEA,oBAAgB,OAAO,YAAY,KAAK;AACxC,eAAW,MAAM,gBAAgB,OAAO,KAAA,GAAQ,GAAG;AAEnD,eAAW,MAAM;AACf,sBAAgB,OAAO,YAAA;AAAA,IACzB,GAAG,GAAG;AAEN,yBAAqB,OAAO,iBAAiB,SAAS,cAAc;AAAA,EACtE;AAEA,QAAM,gBAAgB,mBAAmB,EAAE,QAAQ;AAEnD,QAAM,kBAAkBC,MAAuB;AAAA,IAC7C,QAAQ;AAAA,IACR,WAAY,OAAO,cAAc,KAAM;AAAA,EAAA,CACxC;AAED,YAAU,gBAAgB;AAE1B,QAAM,kBAAkBC,WAA4B;AAAA,IAClD,SAAS,gBAAgB;AAAA,IACzB,UAAU,MAAM;AACd,UAAI;AACF,eAAO,oBAAoB,SAAS,kBAAkB;AAAA,IAC1D;AAAA,EAAA,CACD;AAED,YAAU,gBAAgB;AAE1B,MAAI,qBAA0B;AAE9B,SAAO;AAAA,IACL,SAAS,gBAAgB;AAAA,IACzB;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;;"}
+{"version":3,"file":"overlay.js","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as carouselElements from '../elements';\nimport { Image as LayoutImage } from 'layout';\n\nconst ELEMENT_CAROUSEL_OVERLAY_COINTAINER = 'carousel-overlay-container';\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ${token.color.gray.dark};\n  }\n\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_OVERLAY_ELEMENT = `\n  ${LayoutImage.Styles}\n  ${OverlayImageContainerStyles}\n`;\n\nconst CreateOverlaySlide = ({ images }: { images: HTMLImageElement[] }) =>\n  images.map((image) => {\n    const slide = document.createElement('div');\n    const imageContainer = document.createElement('div');\n    const imageBlock = LayoutImage.CreateElement({\n      image,\n      showCaption: true,\n    });\n\n    imageContainer.classList.add(ELEMENT_CAROUSEL_OVERLAY_COINTAINER);\n    imageContainer.appendChild(imageBlock);\n\n    slide.appendChild(imageContainer);\n\n    return slide;\n  });\n\nexport default ({ images }: { images: HTMLImageElement[] }) =>\n  (() => {\n    let styles = STYLES_CAROUSEL_OVERLAY_ELEMENT;\n\n    const setFullScreen = (index: number) => {\n      let canMove = true;\n\n      const checkKeyEvents = (event: KeyboardEvent) => {\n        if (!canMove) return;\n        canMove = false;\n        if (event.key == 'ArrowLeft') overlayCarousel.events.EventSlideLeft();\n        if (event.key == 'ArrowRight') overlayCarousel.events.EventSlideRight();\n\n        setTimeout(() => {\n          canMove = true;\n        }, 700);\n      };\n\n      overlayCarousel.events.EventMoveTo(index);\n      setTimeout(() => fixedFullScreen.events.show(), 100);\n\n      setTimeout(() => {\n        overlayCarousel.events.EventResize();\n      }, 100);\n\n      isFullScreenEvents = window.addEventListener('keyup', checkKeyEvents);\n    };\n\n    const overlaySlides = CreateOverlaySlide({ images });\n\n    const overlayCarousel = carouselElements.image({\n      slides: overlaySlides,\n      maxHeight: (window.innerHeight / 10) * 8,\n    });\n\n    styles += overlayCarousel.styles;\n\n    const fixedFullScreen = carouselElements.fullScreen({\n      content: overlayCarousel.element,\n      callback: () => {\n        if (isFullScreenEvents)\n          window.removeEventListener('keyup', isFullScreenEvents);\n      },\n    });\n\n    styles += fixedFullScreen.styles;\n\n    let isFullScreenEvents: any = null;\n\n    return {\n      element: fixedFullScreen.element,\n      styles,\n      events: {\n        setFullScreen,\n      },\n    };\n  })();\n"],"names":["token","LayoutImage","image","carouselElements.image","carouselElements.fullScreen"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,sCAAsC;AAG5C,MAAM,8BAA8B;AAAA,KAC/B,mCAAmC;AAAA;AAAA;AAAA;AAAA,wBAIhBA,iBAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,KAGxC,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,kCAAkC;AAAA,IACpCC,QAAY,MAAM;AAAA,IAClB,2BAA2B;AAAA;AAG/B,MAAM,qBAAqB,CAAC,EAAE,OAAA,MAC5B,OAAO,IAAI,CAACC,WAAU;AACpB,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,aAAaD,QAAY,cAAc;AAAA,IAC3C,OAAAC;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,iBAAe,UAAU,IAAI,mCAAmC;AAChE,iBAAe,YAAY,UAAU;AAErC,QAAM,YAAY,cAAc;AAEhC,SAAO;AACT,CAAC;AAEH,MAAA,UAAe,CAAC,EAAE,OAAA,OACf,MAAM;AACL,MAAI,SAAS;AAEb,QAAM,gBAAgB,CAAC,UAAkB;AACvC,QAAI,UAAU;AAEd,UAAM,iBAAiB,CAAC,UAAyB;AAC/C,UAAI,CAAC,QAAS;AACd,gBAAU;AACV,UAAI,MAAM,OAAO,YAAa,iBAAgB,OAAO,eAAA;AACrD,UAAI,MAAM,OAAO,aAAc,iBAAgB,OAAO,gBAAA;AAEtD,iBAAW,MAAM;AACf,kBAAU;AAAA,MACZ,GAAG,GAAG;AAAA,IACR;AAEA,oBAAgB,OAAO,YAAY,KAAK;AACxC,eAAW,MAAM,gBAAgB,OAAO,KAAA,GAAQ,GAAG;AAEnD,eAAW,MAAM;AACf,sBAAgB,OAAO,YAAA;AAAA,IACzB,GAAG,GAAG;AAEN,yBAAqB,OAAO,iBAAiB,SAAS,cAAc;AAAA,EACtE;AAEA,QAAM,gBAAgB,mBAAmB,EAAE,QAAQ;AAEnD,QAAM,kBAAkBC,MAAuB;AAAA,IAC7C,QAAQ;AAAA,IACR,WAAY,OAAO,cAAc,KAAM;AAAA,EAAA,CACxC;AAED,YAAU,gBAAgB;AAE1B,QAAM,kBAAkBC,WAA4B;AAAA,IAClD,SAAS,gBAAgB;AAAA,IACzB,UAAU,MAAM;AACd,UAAI;AACF,eAAO,oBAAoB,SAAS,kBAAkB;AAAA,IAC1D;AAAA,EAAA,CACD;AAED,YAAU,gBAAgB;AAE1B,MAAI,qBAA0B;AAE9B,SAAO;AAAA,IACL,SAAS,gBAAgB;AAAA,IACzB;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;;"}

package/dist/composite/carousel/elements/overlay.mjs

@@ -1,8 +1,8 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
-import LayoutImage from "../../../layout/image.mjs";
+import * as token from "@universityofmaryland/web-token-library";
 import "./blocks.mjs";
 import fullScreen from "./full-screen.mjs";
 import image from "./image.mjs";
+import LayoutImage from "../../../layout/image.mjs";
 const ELEMENT_CAROUSEL_OVERLAY_COINTAINER = "carousel-overlay-container";
 const OverlayImageContainerStyles = `
   .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} {

package/dist/composite/carousel/elements/overlay.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.mjs","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { Image as LayoutImage } from 'layout';\nimport * as carouselElements from '../elements';\n\nconst ELEMENT_CAROUSEL_OVERLAY_COINTAINER = 'carousel-overlay-container';\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ${token.color.gray.dark};\n  }\n\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_OVERLAY_ELEMENT = `\n  ${LayoutImage.Styles}\n  ${OverlayImageContainerStyles}\n`;\n\nconst CreateOverlaySlide = ({ images }: { images: HTMLImageElement[] }) =>\n  images.map((image) => {\n    const slide = document.createElement('div');\n    const imageContainer = document.createElement('div');\n    const imageBlock = LayoutImage.CreateElement({\n      image,\n      showCaption: true,\n    });\n\n    imageContainer.classList.add(ELEMENT_CAROUSEL_OVERLAY_COINTAINER);\n    imageContainer.appendChild(imageBlock);\n\n    slide.appendChild(imageContainer);\n\n    return slide;\n  });\n\nexport default ({ images }: { images: HTMLImageElement[] }) =>\n  (() => {\n    let styles = STYLES_CAROUSEL_OVERLAY_ELEMENT;\n\n    const setFullScreen = (index: number) => {\n      let canMove = true;\n\n      const checkKeyEvents = (event: KeyboardEvent) => {\n        if (!canMove) return;\n        canMove = false;\n        if (event.key == 'ArrowLeft') overlayCarousel.events.EventSlideLeft();\n        if (event.key == 'ArrowRight') overlayCarousel.events.EventSlideRight();\n\n        setTimeout(() => {\n          canMove = true;\n        }, 700);\n      };\n\n      overlayCarousel.events.EventMoveTo(index);\n      setTimeout(() => fixedFullScreen.events.show(), 100);\n\n      setTimeout(() => {\n        overlayCarousel.events.EventResize();\n      }, 100);\n\n      isFullScreenEvents = window.addEventListener('keyup', checkKeyEvents);\n    };\n\n    const overlaySlides = CreateOverlaySlide({ images });\n\n    const overlayCarousel = carouselElements.image({\n      slides: overlaySlides,\n      maxHeight: (window.innerHeight / 10) * 8,\n    });\n\n    styles += overlayCarousel.styles;\n\n    const fixedFullScreen = carouselElements.fullScreen({\n      content: overlayCarousel.element,\n      callback: () => {\n        if (isFullScreenEvents)\n          window.removeEventListener('keyup', isFullScreenEvents);\n      },\n    });\n\n    styles += fixedFullScreen.styles;\n\n    let isFullScreenEvents: any = null;\n\n    return {\n      element: fixedFullScreen.element,\n      styles,\n      events: {\n        setFullScreen,\n      },\n    };\n  })();\n"],"names":["image","carouselElements.image","carouselElements.fullScreen"],"mappings":";;;;;AAIA,MAAM,sCAAsC;AAG5C,MAAM,8BAA8B;AAAA,KAC/B,mCAAmC;AAAA;AAAA;AAAA;AAAA,wBAIhB,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,KAGxC,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,kCAAkC;AAAA,IACpC,YAAY,MAAM;AAAA,IAClB,2BAA2B;AAAA;AAG/B,MAAM,qBAAqB,CAAC,EAAE,OAAA,MAC5B,OAAO,IAAI,CAACA,WAAU;AACpB,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,aAAa,YAAY,cAAc;AAAA,IAC3C,OAAAA;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,iBAAe,UAAU,IAAI,mCAAmC;AAChE,iBAAe,YAAY,UAAU;AAErC,QAAM,YAAY,cAAc;AAEhC,SAAO;AACT,CAAC;AAEH,MAAA,UAAe,CAAC,EAAE,OAAA,OACf,MAAM;AACL,MAAI,SAAS;AAEb,QAAM,gBAAgB,CAAC,UAAkB;AACvC,QAAI,UAAU;AAEd,UAAM,iBAAiB,CAAC,UAAyB;AAC/C,UAAI,CAAC,QAAS;AACd,gBAAU;AACV,UAAI,MAAM,OAAO,YAAa,iBAAgB,OAAO,eAAA;AACrD,UAAI,MAAM,OAAO,aAAc,iBAAgB,OAAO,gBAAA;AAEtD,iBAAW,MAAM;AACf,kBAAU;AAAA,MACZ,GAAG,GAAG;AAAA,IACR;AAEA,oBAAgB,OAAO,YAAY,KAAK;AACxC,eAAW,MAAM,gBAAgB,OAAO,KAAA,GAAQ,GAAG;AAEnD,eAAW,MAAM;AACf,sBAAgB,OAAO,YAAA;AAAA,IACzB,GAAG,GAAG;AAEN,yBAAqB,OAAO,iBAAiB,SAAS,cAAc;AAAA,EACtE;AAEA,QAAM,gBAAgB,mBAAmB,EAAE,QAAQ;AAEnD,QAAM,kBAAkBC,MAAuB;AAAA,IAC7C,QAAQ;AAAA,IACR,WAAY,OAAO,cAAc,KAAM;AAAA,EAAA,CACxC;AAED,YAAU,gBAAgB;AAE1B,QAAM,kBAAkBC,WAA4B;AAAA,IAClD,SAAS,gBAAgB;AAAA,IACzB,UAAU,MAAM;AACd,UAAI;AACF,eAAO,oBAAoB,SAAS,kBAAkB;AAAA,IAC1D;AAAA,EAAA,CACD;AAED,YAAU,gBAAgB;AAE1B,MAAI,qBAA0B;AAE9B,SAAO;AAAA,IACL,SAAS,gBAAgB;AAAA,IACzB;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;"}
+{"version":3,"file":"overlay.mjs","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as carouselElements from '../elements';\nimport { Image as LayoutImage } from 'layout';\n\nconst ELEMENT_CAROUSEL_OVERLAY_COINTAINER = 'carousel-overlay-container';\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ${token.color.gray.dark};\n  }\n\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_OVERLAY_ELEMENT = `\n  ${LayoutImage.Styles}\n  ${OverlayImageContainerStyles}\n`;\n\nconst CreateOverlaySlide = ({ images }: { images: HTMLImageElement[] }) =>\n  images.map((image) => {\n    const slide = document.createElement('div');\n    const imageContainer = document.createElement('div');\n    const imageBlock = LayoutImage.CreateElement({\n      image,\n      showCaption: true,\n    });\n\n    imageContainer.classList.add(ELEMENT_CAROUSEL_OVERLAY_COINTAINER);\n    imageContainer.appendChild(imageBlock);\n\n    slide.appendChild(imageContainer);\n\n    return slide;\n  });\n\nexport default ({ images }: { images: HTMLImageElement[] }) =>\n  (() => {\n    let styles = STYLES_CAROUSEL_OVERLAY_ELEMENT;\n\n    const setFullScreen = (index: number) => {\n      let canMove = true;\n\n      const checkKeyEvents = (event: KeyboardEvent) => {\n        if (!canMove) return;\n        canMove = false;\n        if (event.key == 'ArrowLeft') overlayCarousel.events.EventSlideLeft();\n        if (event.key == 'ArrowRight') overlayCarousel.events.EventSlideRight();\n\n        setTimeout(() => {\n          canMove = true;\n        }, 700);\n      };\n\n      overlayCarousel.events.EventMoveTo(index);\n      setTimeout(() => fixedFullScreen.events.show(), 100);\n\n      setTimeout(() => {\n        overlayCarousel.events.EventResize();\n      }, 100);\n\n      isFullScreenEvents = window.addEventListener('keyup', checkKeyEvents);\n    };\n\n    const overlaySlides = CreateOverlaySlide({ images });\n\n    const overlayCarousel = carouselElements.image({\n      slides: overlaySlides,\n      maxHeight: (window.innerHeight / 10) * 8,\n    });\n\n    styles += overlayCarousel.styles;\n\n    const fixedFullScreen = carouselElements.fullScreen({\n      content: overlayCarousel.element,\n      callback: () => {\n        if (isFullScreenEvents)\n          window.removeEventListener('keyup', isFullScreenEvents);\n      },\n    });\n\n    styles += fixedFullScreen.styles;\n\n    let isFullScreenEvents: any = null;\n\n    return {\n      element: fixedFullScreen.element,\n      styles,\n      events: {\n        setFullScreen,\n      },\n    };\n  })();\n"],"names":["image","carouselElements.image","carouselElements.fullScreen"],"mappings":";;;;;AAIA,MAAM,sCAAsC;AAG5C,MAAM,8BAA8B;AAAA,KAC/B,mCAAmC;AAAA;AAAA;AAAA;AAAA,wBAIhB,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,KAGxC,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,kCAAkC;AAAA,IACpC,YAAY,MAAM;AAAA,IAClB,2BAA2B;AAAA;AAG/B,MAAM,qBAAqB,CAAC,EAAE,OAAA,MAC5B,OAAO,IAAI,CAACA,WAAU;AACpB,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,aAAa,YAAY,cAAc;AAAA,IAC3C,OAAAA;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,iBAAe,UAAU,IAAI,mCAAmC;AAChE,iBAAe,YAAY,UAAU;AAErC,QAAM,YAAY,cAAc;AAEhC,SAAO;AACT,CAAC;AAEH,MAAA,UAAe,CAAC,EAAE,OAAA,OACf,MAAM;AACL,MAAI,SAAS;AAEb,QAAM,gBAAgB,CAAC,UAAkB;AACvC,QAAI,UAAU;AAEd,UAAM,iBAAiB,CAAC,UAAyB;AAC/C,UAAI,CAAC,QAAS;AACd,gBAAU;AACV,UAAI,MAAM,OAAO,YAAa,iBAAgB,OAAO,eAAA;AACrD,UAAI,MAAM,OAAO,aAAc,iBAAgB,OAAO,gBAAA;AAEtD,iBAAW,MAAM;AACf,kBAAU;AAAA,MACZ,GAAG,GAAG;AAAA,IACR;AAEA,oBAAgB,OAAO,YAAY,KAAK;AACxC,eAAW,MAAM,gBAAgB,OAAO,KAAA,GAAQ,GAAG;AAEnD,eAAW,MAAM;AACf,sBAAgB,OAAO,YAAA;AAAA,IACzB,GAAG,GAAG;AAEN,yBAAqB,OAAO,iBAAiB,SAAS,cAAc;AAAA,EACtE;AAEA,QAAM,gBAAgB,mBAAmB,EAAE,QAAQ;AAEnD,QAAM,kBAAkBC,MAAuB;AAAA,IAC7C,QAAQ;AAAA,IACR,WAAY,OAAO,cAAc,KAAM;AAAA,EAAA,CACxC;AAED,YAAU,gBAAgB;AAE1B,QAAM,kBAAkBC,WAA4B;AAAA,IAClD,SAAS,gBAAgB;AAAA,IACzB,UAAU,MAAM;AACd,UAAI;AACF,eAAO,oBAAoB,SAAS,kBAAkB;AAAA,IAC1D;AAAA,EAAA,CACD;AAED,YAAU,gBAAgB;AAE1B,MAAI,qBAA0B;AAE9B,SAAO;AAAA,IACL,SAAS,gBAAgB;AAAA,IACzB;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;"}

package/dist/composite/carousel/image/multiple.js

@@ -1,36 +1,38 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const token = require("@universityofmaryland/web-token-library");
 const elementStyles = require("@universityofmaryland/web-styles-library/element");
+const blocks = require("../elements/blocks.js");
+require("../elements/full-screen.js");
+const overlay = require("../elements/overlay.js");
+require("../elements/image.js");
+require("@universityofmaryland/web-builder-library");
+require("@universityofmaryland/web-styles-library/layout");
+require("@universityofmaryland/web-styles-library/animation");
+require("@universityofmaryland/web-styles-library/typography");
 require("@universityofmaryland/web-utilities-library/media");
 require("@universityofmaryland/web-utilities-library/dom");
 require("@universityofmaryland/web-icons-library/controls");
 require("@universityofmaryland/web-icons-library/communication");
 require("@universityofmaryland/web-icons-library/files");
 require("@universityofmaryland/web-icons-library/brand");
-require("../../../model/modifiers/index.js");
-require("@universityofmaryland/web-styles-library");
-require("../../../model/elements/headline.js");
 require("@universityofmaryland/web-icons-library/arrows");
 require("../../../atomic/animations/actions/indicator.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
 require("../../../atomic/animations/brand/card-stack.js");
+require("@universityofmaryland/web-styles-library");
 require("@universityofmaryland/web-utilities-library/performance");
 require("@universityofmaryland/web-utilities-library/accessibility");
 const fullscreen = require("../../../atomic/buttons/fullscreen.js");
 require("@universityofmaryland/web-icons-library/location");
 require("@universityofmaryland/web-icons-library/calendar");
+require("@universityofmaryland/web-utilities-library/theme");
 require("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");
 require("../../../atomic/layout/person/columns.js");
 require("@universityofmaryland/web-icons-library/social");
 require("../../../atomic/text-lockup/date.js");
 require("../../../atomic/text-lockup/small.js");
-require("@universityofmaryland/web-styles-library/typography");
 const image = require("../../../layout/image.js");
-const blocks = require("../elements/blocks.js");
-require("../elements/full-screen.js");
-const overlay = require("../elements/overlay.js");
-require("../elements/image.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/composite/carousel/image/multiple.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiple.js","sources":["../../../../source/composite/carousel/image/multiple.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { buttons } from 'atomic';\nimport { Image as LayoutImage } from 'layout';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselMultipleProps = {\n  images: HTMLImageElement[];\n  isThemeDark?: boolean;\n  isFullScreenOption?: boolean;\n};\n\nconst fullScreenClassName = elementStyles.action.button.fullScreen.className;\n\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-carousel-image-standard';\nconst ELEMENT_CAROUSEL_MULTIPLE_DECLARATION =\n  'carousel-image-multiple-declaration';\nconst ELEMENT_CAROUSEL_MULTIPLE_CONTAINER = 'carousel-image-multiple-container';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-multiple-button';\n\nconst OVERWRITE_LAYOUT_IMAGE = `.${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} .${LayoutImage.Elements.container}`;\n\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} .${carouselElements.blocks.Elements.button}`;\nconst OVERWRITE_FULL_SCREEN_BUTTON = `.${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} .${fullScreenClassName}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CAROUSEL_MULTIPLE_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_CAROUSEL_MULTIPLE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_SLIDER_BUTTON}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n    fill: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst OverwriteFullScreenOption = `\n  ${OVERWRITE_FULL_SCREEN_BUTTON} {\n    visibility: hidden;\n    opacity: 0;\n    transition: visibility 0s, opacity 0.5s linear;\n  }\n\n  ${OVERWRITE_FULL_SCREEN_BUTTON}:focus {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  ${OVERWRITE_LAYOUT_IMAGE}:focus-within .${fullScreenClassName},\n  ${OVERWRITE_LAYOUT_IMAGE}:hover .${fullScreenClassName} {\n    visibility: visible;\n    opacity: 1;\n  }\n`\n\n// prettier-ignore\nconst OverwriteImageStyles = `\n  ${OVERWRITE_LAYOUT_IMAGE} img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n`\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n    top: 50%;\n    transform: translateY(-50%);\n    background-color: ${token.color.white};\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} svg {\n    fill: ${token.color.black};\n  };\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n    left: 0;\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n    right: 0;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_MULTIPLE_ELEMENT = `\n  .${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_CAROUSEL_MULTIPLE_CONTAINER} {\n    overflow: hidden;\n  }\n\n\n  ${carouselElements.blocks.Styles}\n  ${LayoutImage.Styles}\n  ${OverwriteImageStyles}\n  ${OverwriteCarouselStyles}\n  ${OverwriteFullScreenOption}\n  ${OverwriteThemeDark}\n`;\n\nexport default (props: TypeCarouselMultipleProps) =>\n  (() => {\n    const { images, isThemeDark, isFullScreenOption } = props;\n    const elementDeclaration = document.createElement('div');\n    const elementContainer = document.createElement('div');\n    const clonedImages = images.map((image) =>\n      image.cloneNode(true),\n    ) as HTMLImageElement[];\n    let styles = STYLES_CAROUSEL_IMAGE_MULTIPLE_ELEMENT;\n\n    const overlayCarousel = carouselElements.overlay({\n      images,\n    });\n\n    styles += overlayCarousel.styles;\n\n    const slide = document.createElement('div');\n    const blocks = clonedImages.map((image, index) => {\n      const block = LayoutImage.CreateElement({\n        image,\n        showCaption: true,\n      });\n\n      if (isFullScreenOption) {\n        const button = buttons.fullscreen.create({\n          callback: overlayCarousel.events.setFullScreen,\n          index,\n        });\n\n        block.appendChild(button.element);\n        styles += button.styles;\n      }\n\n      return block;\n    });\n\n    const carousel = carouselElements.blocks.CreateElement({\n      blocks,\n      slide,\n      overwriteDisplayLogic: {\n        mobileBreakpoint: 600,\n        tabletBreakpoint: 900,\n        desktopBreakpoint: 1400,\n        desktopCount: 3,\n        maxCount: 4,\n        showHint: false,\n        fullScreenCallback: overlayCarousel.events.setFullScreen,\n      },\n    });\n\n    elementContainer.appendChild(carousel.element);\n    elementContainer.classList.add(ELEMENT_CAROUSEL_MULTIPLE_CONTAINER);\n    if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    elementDeclaration.classList.add(ELEMENT_CAROUSEL_MULTIPLE_DECLARATION);\n    elementDeclaration.appendChild(elementContainer);\n\n    images[images.length - 1].addEventListener('load', () => {\n      carousel.events.load();\n\n      setTimeout(() => {\n        const maxHeight = clonedImages.reduce(\n          (acc, image) => (image.offsetHeight > acc ? image.offsetHeight : acc),\n          300,\n        );\n\n        slide.style.minHeight = `${maxHeight}px`;\n      }, 100);\n    });\n\n    const responseOptions = {\n      styles,\n      events: {\n        SetEventReize: carousel.events.resize,\n      },\n    };\n\n    if (isFullScreenOption) {\n      const element = document.createElement('div');\n\n      element.appendChild(overlayCarousel.element);\n\n      element.appendChild(elementDeclaration);\n\n      return {\n        element,\n        ...responseOptions,\n      };\n    }\n\n    return {\n      element: elementDeclaration,\n      ...responseOptions,\n    };\n  })();\n"],"names":["elementStyles","LayoutImage","carouselElements.blocks","token","image","carouselElements.overlay","blocks","index","buttons.fullscreen"],"mappings":"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"}
+{"version":3,"file":"multiple.js","sources":["../../../../source/composite/carousel/image/multiple.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as carouselElements from '../elements';\nimport { buttons } from 'atomic';\nimport { Image as LayoutImage } from 'layout';\n\ntype TypeCarouselMultipleProps = {\n  images: HTMLImageElement[];\n  isThemeDark?: boolean;\n  isFullScreenOption?: boolean;\n};\n\nconst fullScreenClassName = elementStyles.action.button.fullScreen.className;\n\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-carousel-image-standard';\nconst ELEMENT_CAROUSEL_MULTIPLE_DECLARATION =\n  'carousel-image-multiple-declaration';\nconst ELEMENT_CAROUSEL_MULTIPLE_CONTAINER = 'carousel-image-multiple-container';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-multiple-button';\n\nconst OVERWRITE_LAYOUT_IMAGE = `.${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} .${LayoutImage.Elements.container}`;\n\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} .${carouselElements.blocks.Elements.button}`;\nconst OVERWRITE_FULL_SCREEN_BUTTON = `.${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} .${fullScreenClassName}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CAROUSEL_MULTIPLE_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_CAROUSEL_MULTIPLE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_SLIDER_BUTTON}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n    fill: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst OverwriteFullScreenOption = `\n  ${OVERWRITE_FULL_SCREEN_BUTTON} {\n    visibility: hidden;\n    opacity: 0;\n    transition: visibility 0s, opacity 0.5s linear;\n  }\n\n  ${OVERWRITE_FULL_SCREEN_BUTTON}:focus {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  ${OVERWRITE_LAYOUT_IMAGE}:focus-within .${fullScreenClassName},\n  ${OVERWRITE_LAYOUT_IMAGE}:hover .${fullScreenClassName} {\n    visibility: visible;\n    opacity: 1;\n  }\n`\n\n// prettier-ignore\nconst OverwriteImageStyles = `\n  ${OVERWRITE_LAYOUT_IMAGE} img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n`\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n    top: 50%;\n    transform: translateY(-50%);\n    background-color: ${token.color.white};\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} svg {\n    fill: ${token.color.black};\n  };\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n    left: 0;\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n    right: 0;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_MULTIPLE_ELEMENT = `\n  .${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_CAROUSEL_MULTIPLE_CONTAINER} {\n    overflow: hidden;\n  }\n\n\n  ${carouselElements.blocks.Styles}\n  ${LayoutImage.Styles}\n  ${OverwriteImageStyles}\n  ${OverwriteCarouselStyles}\n  ${OverwriteFullScreenOption}\n  ${OverwriteThemeDark}\n`;\n\nexport default (props: TypeCarouselMultipleProps) =>\n  (() => {\n    const { images, isThemeDark, isFullScreenOption } = props;\n    const elementDeclaration = document.createElement('div');\n    const elementContainer = document.createElement('div');\n    const clonedImages = images.map((image) =>\n      image.cloneNode(true),\n    ) as HTMLImageElement[];\n    let styles = STYLES_CAROUSEL_IMAGE_MULTIPLE_ELEMENT;\n\n    const overlayCarousel = carouselElements.overlay({\n      images,\n    });\n\n    styles += overlayCarousel.styles;\n\n    const slide = document.createElement('div');\n    const blocks = clonedImages.map((image, index) => {\n      const block = LayoutImage.CreateElement({\n        image,\n        showCaption: true,\n      });\n\n      if (isFullScreenOption) {\n        const button = buttons.fullscreen.create({\n          callback: overlayCarousel.events.setFullScreen,\n          index,\n        });\n\n        block.appendChild(button.element);\n        styles += button.styles;\n      }\n\n      return block;\n    });\n\n    const carousel = carouselElements.blocks.CreateElement({\n      blocks,\n      slide,\n      overwriteDisplayLogic: {\n        mobileBreakpoint: 600,\n        tabletBreakpoint: 900,\n        desktopBreakpoint: 1400,\n        desktopCount: 3,\n        maxCount: 4,\n        showHint: false,\n        fullScreenCallback: overlayCarousel.events.setFullScreen,\n      },\n    });\n\n    elementContainer.appendChild(carousel.element);\n    elementContainer.classList.add(ELEMENT_CAROUSEL_MULTIPLE_CONTAINER);\n    if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    elementDeclaration.classList.add(ELEMENT_CAROUSEL_MULTIPLE_DECLARATION);\n    elementDeclaration.appendChild(elementContainer);\n\n    images[images.length - 1].addEventListener('load', () => {\n      carousel.events.load();\n\n      setTimeout(() => {\n        const maxHeight = clonedImages.reduce(\n          (acc, image) => (image.offsetHeight > acc ? image.offsetHeight : acc),\n          300,\n        );\n\n        slide.style.minHeight = `${maxHeight}px`;\n      }, 100);\n    });\n\n    const responseOptions = {\n      styles,\n      events: {\n        SetEventReize: carousel.events.resize,\n      },\n    };\n\n    if (isFullScreenOption) {\n      const element = document.createElement('div');\n\n      element.appendChild(overlayCarousel.element);\n\n      element.appendChild(elementDeclaration);\n\n      return {\n        element,\n        ...responseOptions,\n      };\n    }\n\n    return {\n      element: elementDeclaration,\n      ...responseOptions,\n    };\n  })();\n"],"names":["elementStyles","LayoutImage","carouselElements.blocks","token","image","carouselElements.overlay","blocks","index","buttons.fullscreen"],"mappings":"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"}

package/dist/composite/carousel/image/multiple.mjs

@@ -1,35 +1,37 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import * as token from "@universityofmaryland/web-token-library";
 import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import blocks from "../elements/blocks.mjs";
+import "../elements/full-screen.mjs";
+import overlay from "../elements/overlay.mjs";
+import "../elements/image.mjs";
+import "@universityofmaryland/web-builder-library";
+import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-styles-library/animation";
+import "@universityofmaryland/web-styles-library/typography";
 import "@universityofmaryland/web-utilities-library/media";
 import "@universityofmaryland/web-utilities-library/dom";
 import "@universityofmaryland/web-icons-library/controls";
 import "@universityofmaryland/web-icons-library/communication";
 import "@universityofmaryland/web-icons-library/files";
 import "@universityofmaryland/web-icons-library/brand";
-import "../../../model/modifiers/index.mjs";
-import "@universityofmaryland/web-styles-library";
-import "../../../model/elements/headline.mjs";
 import "@universityofmaryland/web-icons-library/arrows";
 import "../../../atomic/animations/actions/indicator.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../../atomic/animations/brand/card-stack.mjs";
+import "@universityofmaryland/web-styles-library";
 import "@universityofmaryland/web-utilities-library/performance";
 import "@universityofmaryland/web-utilities-library/accessibility";
 import fullscreen from "../../../atomic/buttons/fullscreen.mjs";
 import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";
+import "@universityofmaryland/web-utilities-library/theme";
 import "../../../atomic/layout/block/stacked.mjs";
 import "../../../atomic/layout/overlay/modal.mjs";
 import "../../../atomic/layout/person/columns.mjs";
 import "@universityofmaryland/web-icons-library/social";
 import "../../../atomic/text-lockup/date.mjs";
 import "../../../atomic/text-lockup/small.mjs";
-import "@universityofmaryland/web-styles-library/typography";
 import LayoutImage from "../../../layout/image.mjs";
-import blocks from "../elements/blocks.mjs";
-import "../elements/full-screen.mjs";
-import overlay from "../elements/overlay.mjs";
-import "../elements/image.mjs";
 const fullScreenClassName = elementStyles.action.button.fullScreen.className;
 const ATTRIBUTE_THEME = "data-theme";
 const THEME_DARK = "dark";

package/dist/composite/carousel/image/multiple.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"multiple.mjs","sources":["../../../../source/composite/carousel/image/multiple.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { buttons } from 'atomic';\nimport { Image as LayoutImage } from 'layout';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselMultipleProps = {\n  images: HTMLImageElement[];\n  isThemeDark?: boolean;\n  isFullScreenOption?: boolean;\n};\n\nconst fullScreenClassName = elementStyles.action.button.fullScreen.className;\n\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-carousel-image-standard';\nconst ELEMENT_CAROUSEL_MULTIPLE_DECLARATION =\n  'carousel-image-multiple-declaration';\nconst ELEMENT_CAROUSEL_MULTIPLE_CONTAINER = 'carousel-image-multiple-container';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-multiple-button';\n\nconst OVERWRITE_LAYOUT_IMAGE = `.${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} .${LayoutImage.Elements.container}`;\n\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} .${carouselElements.blocks.Elements.button}`;\nconst OVERWRITE_FULL_SCREEN_BUTTON = `.${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} .${fullScreenClassName}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CAROUSEL_MULTIPLE_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_CAROUSEL_MULTIPLE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_SLIDER_BUTTON}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n    fill: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst OverwriteFullScreenOption = `\n  ${OVERWRITE_FULL_SCREEN_BUTTON} {\n    visibility: hidden;\n    opacity: 0;\n    transition: visibility 0s, opacity 0.5s linear;\n  }\n\n  ${OVERWRITE_FULL_SCREEN_BUTTON}:focus {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  ${OVERWRITE_LAYOUT_IMAGE}:focus-within .${fullScreenClassName},\n  ${OVERWRITE_LAYOUT_IMAGE}:hover .${fullScreenClassName} {\n    visibility: visible;\n    opacity: 1;\n  }\n`\n\n// prettier-ignore\nconst OverwriteImageStyles = `\n  ${OVERWRITE_LAYOUT_IMAGE} img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n`\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n    top: 50%;\n    transform: translateY(-50%);\n    background-color: ${token.color.white};\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} svg {\n    fill: ${token.color.black};\n  };\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n    left: 0;\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n    right: 0;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_MULTIPLE_ELEMENT = `\n  .${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_CAROUSEL_MULTIPLE_CONTAINER} {\n    overflow: hidden;\n  }\n\n\n  ${carouselElements.blocks.Styles}\n  ${LayoutImage.Styles}\n  ${OverwriteImageStyles}\n  ${OverwriteCarouselStyles}\n  ${OverwriteFullScreenOption}\n  ${OverwriteThemeDark}\n`;\n\nexport default (props: TypeCarouselMultipleProps) =>\n  (() => {\n    const { images, isThemeDark, isFullScreenOption } = props;\n    const elementDeclaration = document.createElement('div');\n    const elementContainer = document.createElement('div');\n    const clonedImages = images.map((image) =>\n      image.cloneNode(true),\n    ) as HTMLImageElement[];\n    let styles = STYLES_CAROUSEL_IMAGE_MULTIPLE_ELEMENT;\n\n    const overlayCarousel = carouselElements.overlay({\n      images,\n    });\n\n    styles += overlayCarousel.styles;\n\n    const slide = document.createElement('div');\n    const blocks = clonedImages.map((image, index) => {\n      const block = LayoutImage.CreateElement({\n        image,\n        showCaption: true,\n      });\n\n      if (isFullScreenOption) {\n        const button = buttons.fullscreen.create({\n          callback: overlayCarousel.events.setFullScreen,\n          index,\n        });\n\n        block.appendChild(button.element);\n        styles += button.styles;\n      }\n\n      return block;\n    });\n\n    const carousel = carouselElements.blocks.CreateElement({\n      blocks,\n      slide,\n      overwriteDisplayLogic: {\n        mobileBreakpoint: 600,\n        tabletBreakpoint: 900,\n        desktopBreakpoint: 1400,\n        desktopCount: 3,\n        maxCount: 4,\n        showHint: false,\n        fullScreenCallback: overlayCarousel.events.setFullScreen,\n      },\n    });\n\n    elementContainer.appendChild(carousel.element);\n    elementContainer.classList.add(ELEMENT_CAROUSEL_MULTIPLE_CONTAINER);\n    if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    elementDeclaration.classList.add(ELEMENT_CAROUSEL_MULTIPLE_DECLARATION);\n    elementDeclaration.appendChild(elementContainer);\n\n    images[images.length - 1].addEventListener('load', () => {\n      carousel.events.load();\n\n      setTimeout(() => {\n        const maxHeight = clonedImages.reduce(\n          (acc, image) => (image.offsetHeight > acc ? image.offsetHeight : acc),\n          300,\n        );\n\n        slide.style.minHeight = `${maxHeight}px`;\n      }, 100);\n    });\n\n    const responseOptions = {\n      styles,\n      events: {\n        SetEventReize: carousel.events.resize,\n      },\n    };\n\n    if (isFullScreenOption) {\n      const element = document.createElement('div');\n\n      element.appendChild(overlayCarousel.element);\n\n      element.appendChild(elementDeclaration);\n\n      return {\n        element,\n        ...responseOptions,\n      };\n    }\n\n    return {\n      element: elementDeclaration,\n      ...responseOptions,\n    };\n  })();\n"],"names":["carouselElements.blocks","carouselElements.overlay","blocks","index","buttons.fullscreen"],"mappings":"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"}
+{"version":3,"file":"multiple.mjs","sources":["../../../../source/composite/carousel/image/multiple.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as carouselElements from '../elements';\nimport { buttons } from 'atomic';\nimport { Image as LayoutImage } from 'layout';\n\ntype TypeCarouselMultipleProps = {\n  images: HTMLImageElement[];\n  isThemeDark?: boolean;\n  isFullScreenOption?: boolean;\n};\n\nconst fullScreenClassName = elementStyles.action.button.fullScreen.className;\n\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-carousel-image-standard';\nconst ELEMENT_CAROUSEL_MULTIPLE_DECLARATION =\n  'carousel-image-multiple-declaration';\nconst ELEMENT_CAROUSEL_MULTIPLE_CONTAINER = 'carousel-image-multiple-container';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-multiple-button';\n\nconst OVERWRITE_LAYOUT_IMAGE = `.${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} .${LayoutImage.Elements.container}`;\n\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} .${carouselElements.blocks.Elements.button}`;\nconst OVERWRITE_FULL_SCREEN_BUTTON = `.${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} .${fullScreenClassName}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CAROUSEL_MULTIPLE_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_CAROUSEL_MULTIPLE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_SLIDER_BUTTON}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n    fill: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst OverwriteFullScreenOption = `\n  ${OVERWRITE_FULL_SCREEN_BUTTON} {\n    visibility: hidden;\n    opacity: 0;\n    transition: visibility 0s, opacity 0.5s linear;\n  }\n\n  ${OVERWRITE_FULL_SCREEN_BUTTON}:focus {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  ${OVERWRITE_LAYOUT_IMAGE}:focus-within .${fullScreenClassName},\n  ${OVERWRITE_LAYOUT_IMAGE}:hover .${fullScreenClassName} {\n    visibility: visible;\n    opacity: 1;\n  }\n`\n\n// prettier-ignore\nconst OverwriteImageStyles = `\n  ${OVERWRITE_LAYOUT_IMAGE} img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n`\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n    top: 50%;\n    transform: translateY(-50%);\n    background-color: ${token.color.white};\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} svg {\n    fill: ${token.color.black};\n  };\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n    left: 0;\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n    right: 0;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_MULTIPLE_ELEMENT = `\n  .${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_CAROUSEL_MULTIPLE_CONTAINER} {\n    overflow: hidden;\n  }\n\n\n  ${carouselElements.blocks.Styles}\n  ${LayoutImage.Styles}\n  ${OverwriteImageStyles}\n  ${OverwriteCarouselStyles}\n  ${OverwriteFullScreenOption}\n  ${OverwriteThemeDark}\n`;\n\nexport default (props: TypeCarouselMultipleProps) =>\n  (() => {\n    const { images, isThemeDark, isFullScreenOption } = props;\n    const elementDeclaration = document.createElement('div');\n    const elementContainer = document.createElement('div');\n    const clonedImages = images.map((image) =>\n      image.cloneNode(true),\n    ) as HTMLImageElement[];\n    let styles = STYLES_CAROUSEL_IMAGE_MULTIPLE_ELEMENT;\n\n    const overlayCarousel = carouselElements.overlay({\n      images,\n    });\n\n    styles += overlayCarousel.styles;\n\n    const slide = document.createElement('div');\n    const blocks = clonedImages.map((image, index) => {\n      const block = LayoutImage.CreateElement({\n        image,\n        showCaption: true,\n      });\n\n      if (isFullScreenOption) {\n        const button = buttons.fullscreen.create({\n          callback: overlayCarousel.events.setFullScreen,\n          index,\n        });\n\n        block.appendChild(button.element);\n        styles += button.styles;\n      }\n\n      return block;\n    });\n\n    const carousel = carouselElements.blocks.CreateElement({\n      blocks,\n      slide,\n      overwriteDisplayLogic: {\n        mobileBreakpoint: 600,\n        tabletBreakpoint: 900,\n        desktopBreakpoint: 1400,\n        desktopCount: 3,\n        maxCount: 4,\n        showHint: false,\n        fullScreenCallback: overlayCarousel.events.setFullScreen,\n      },\n    });\n\n    elementContainer.appendChild(carousel.element);\n    elementContainer.classList.add(ELEMENT_CAROUSEL_MULTIPLE_CONTAINER);\n    if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    elementDeclaration.classList.add(ELEMENT_CAROUSEL_MULTIPLE_DECLARATION);\n    elementDeclaration.appendChild(elementContainer);\n\n    images[images.length - 1].addEventListener('load', () => {\n      carousel.events.load();\n\n      setTimeout(() => {\n        const maxHeight = clonedImages.reduce(\n          (acc, image) => (image.offsetHeight > acc ? image.offsetHeight : acc),\n          300,\n        );\n\n        slide.style.minHeight = `${maxHeight}px`;\n      }, 100);\n    });\n\n    const responseOptions = {\n      styles,\n      events: {\n        SetEventReize: carousel.events.resize,\n      },\n    };\n\n    if (isFullScreenOption) {\n      const element = document.createElement('div');\n\n      element.appendChild(overlayCarousel.element);\n\n      element.appendChild(elementDeclaration);\n\n      return {\n        element,\n        ...responseOptions,\n      };\n    }\n\n    return {\n      element: elementDeclaration,\n      ...responseOptions,\n    };\n  })();\n"],"names":["carouselElements.blocks","carouselElements.overlay","blocks","index","buttons.fullscreen"],"mappings":"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"}

package/dist/composite/carousel/image/standard.js

@@ -1,16 +1,22 @@
 "use strict";
 const Styles = require("@universityofmaryland/web-styles-library");
 const styles = require("@universityofmaryland/web-utilities-library/styles");
-require("@universityofmaryland/web-styles-library/token");
+require("../elements/blocks.js");
+require("../elements/full-screen.js");
+const overlay = require("../elements/overlay.js");
+const image$1 = require("../elements/image.js");
+require("@universityofmaryland/web-builder-library");
+require("@universityofmaryland/web-token-library");
 require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-styles-library/layout");
+require("@universityofmaryland/web-styles-library/animation");
+require("@universityofmaryland/web-styles-library/typography");
 require("@universityofmaryland/web-utilities-library/media");
 require("@universityofmaryland/web-utilities-library/dom");
 require("@universityofmaryland/web-icons-library/controls");
 require("@universityofmaryland/web-icons-library/communication");
 require("@universityofmaryland/web-icons-library/files");
 require("@universityofmaryland/web-icons-library/brand");
-require("../../../model/modifiers/index.js");
-require("../../../model/elements/headline.js");
 require("@universityofmaryland/web-icons-library/arrows");
 const indicator = require("../../../atomic/animations/actions/indicator.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
@@ -20,18 +26,14 @@ require("@universityofmaryland/web-utilities-library/accessibility");
 const fullscreen = require("../../../atomic/buttons/fullscreen.js");
 require("@universityofmaryland/web-icons-library/location");
 require("@universityofmaryland/web-icons-library/calendar");
+require("@universityofmaryland/web-utilities-library/theme");
 require("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");
 require("../../../atomic/layout/person/columns.js");
 require("@universityofmaryland/web-icons-library/social");
 require("../../../atomic/text-lockup/date.js");
 require("../../../atomic/text-lockup/small.js");
-require("@universityofmaryland/web-styles-library/typography");
 const image = require("../../../layout/image.js");
-require("../elements/blocks.js");
-require("../elements/full-screen.js");
-const overlay = require("../elements/overlay.js");
-const image$1 = require("../elements/image.js");
 const MEDIUM = 500;
 const ATTRIBUTE_REFERENCE = "data-reference";
 const ATTRIBUTE_THEME = "data-theme";

package/dist/composite/carousel/image/standard.js.map

@@ -1 +1 @@
-{"version":3,"file":"standard.js","sources":["../../../../source/composite/carousel/image/standard.ts"],"sourcesContent":["import {\n  element,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { animations, buttons } from 'atomic';\nimport { Image as LayoutImage } from 'layout';\nimport * as carouselElements from '../elements';\n\ntype TypeImage = {\n  image: HTMLImageElement;\n};\n\ntype TypeFullScreen = {\n  isFullScreenOption?: boolean;\n};\n\ntype TypesetFullScreen = {\n  setFullScreen: (arg: number) => void;\n};\n\ntype TypeSlideContent = {\n  images: HTMLImageElement[];\n  headlines?: HTMLElement[] | null;\n  texts?: HTMLElement[] | null;\n};\n\ntype TypeImageContainerProps = TypeImage &\n  TypeFullScreen &\n  TypesetFullScreen & {\n    index: number;\n  };\n\ntype TypeCarouselSlideProps = TypeSlideContent &\n  TypesetFullScreen &\n  TypeFullScreen;\n\ntype TypeCarouselImageStandardProps = TypeSlideContent &\n  TypeFullScreen & {\n    isThemeDark?: boolean;\n  };\n\nconst MEDIUM = 500;\n\nconst ATTRIBUTE_REFERENCE = 'data-reference';\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-carousel-image-standard';\nconst ELEMENT_CAROUSEL_IMAGE_DECLARATION =\n  'carousel-image-standard-declaration';\nconst ELEMENT_CAROUSEL_IMAGE_CONTAINER = 'carousel-image-standard-container';\n\nconst ELEMENT_SLIDE = 'carousel-image-standard-slide';\nconst ELEMENT_SLIDE_IMAGE_CONTAINER = 'carousel-image-standard-slide-image';\nconst ELEMENT_SLIDE_IMAGE_WRAPPER = 'carousel-image-standard-slide-wrapper';\nconst ELEMENT_SLIDE_TEXT_CONTAINER = 'carousel-image-standard-slide-text';\nconst ELEMENT_SLIDE_HEADLINE = 'carousel-image-standard-slide-headline';\nconst ELEMENT_SLIDE_RICH_TEXT = 'carousel-image-standard-slide-rich-text';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-slider-button';\n\nconst ELEMENT_CAROUSEL_INDICATOR_WRAPPER = 'carousel-indicator-wrapper';\nconst ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER =\n  'carousel-overlay-image-container';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_RICH_TEXT = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_SLIDE_RICH_TEXT}`;\nconst OVERWRITE_THEME_DARK_TEXT_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_TEXT_CONTAINER}`;\nconst OVERWRITE_THEME_DARK_IMAGE_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_IMAGE_CONTAINER}`;\nconst OVERWRITE_THEME_DARK_INDICATOR = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_SLIDER_BUTTON}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER},\n  ${OVERWRITE_THEME_DARK_TEXT_CONTAINER},\n  ${OVERWRITE_THEME_DARK_INDICATOR} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_IMAGE_CONTAINER} {\n    background-color: ${token.color.gray.dark};\n  }\n\n  ${OVERWRITE_THEME_DARK_TEXT_CONTAINER} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n    fill: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_RICH_TEXT} {\n    color: ${token.color.white};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`${OVERWRITE_THEME_DARK_RICH_TEXT}`]: element.text.rich.advancedDark,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst IndicatorContainerStyles = `\n  .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {\n    padding: ${token.spacing.md};\n    background-color: ${token.color.gray.lightest};\n    display: flex;\n    justify-content: center;\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {\n      padding: ${token.spacing.lg};\n    }\n  }\n`;\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n  .${ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER} {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ${token.color.gray.dark};\n  }\n\n  .${ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst TextContainerStyles = `\n  .${ELEMENT_SLIDE_TEXT_CONTAINER} {\n    padding: ${token.spacing.md};\n    padding-bottom: 0;\n    background-color: ${token.color.gray.lightest};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${ELEMENT_SLIDE_TEXT_CONTAINER} {\n      padding: ${token.spacing.lg};\n      padding-bottom: 0;\n    }\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_SLIDE_HEADLINE}`]: typography.sans.large,\n    },\n  })}\n\n  .${ELEMENT_SLIDE_RICH_TEXT} {\n    margin-top: ${token.spacing.min};\n    color: ${token.color.gray.dark}\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_SLIDE_RICH_TEXT}`]: element.text.rich.advanced,\n    },\n  })}\n`\n\n// prettier-ignore\nconst ImageContainerStyles = `\n  .${ELEMENT_SLIDE_IMAGE_CONTAINER} {\n    position: relative;\n    background-color: ${token.color.black};\n  }\n\n  .${ELEMENT_SLIDE_IMAGE_WRAPPER} {\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .${ELEMENT_SLIDE_IMAGE_WRAPPER} > * {\n    height: 100%;\n  }\n\n  .${ELEMENT_SLIDE_IMAGE_CONTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_STANDARD_ELEMENT = `\n  .${ELEMENT_CAROUSEL_IMAGE_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_CAROUSEL_IMAGE_CONTAINER} {\n    overflow: hidden;\n    background-color: ${token.color.gray.lightest};\n  }\n\n  ${LayoutImage.Styles}\n  ${ImageContainerStyles}\n  ${TextContainerStyles}\n  ${OverlayImageContainerStyles}\n  ${IndicatorContainerStyles}\n  ${OverwriteThemeDark}\n`;\n\nexport default (props: TypeCarouselImageStandardProps) =>\n  (() => {\n    const { images, isThemeDark, isFullScreenOption } = props;\n    const elementDeclaration = document.createElement('div');\n    const elementContainer = document.createElement('div');\n    const elementIndicator = document.createElement('div');\n    const overlayCarousel = carouselElements.overlay({\n      images,\n    });\n    let styles = STYLES_CAROUSEL_IMAGE_STANDARD_ELEMENT;\n\n    styles += overlayCarousel.styles;\n\n    const CreateTextContainer = ({\n      headlines,\n      texts,\n      reference,\n    }: {\n      headlines?: HTMLElement[] | null;\n      texts?: HTMLElement[] | null;\n      reference: string | null;\n    }) => {\n      const textContainer = document.createElement('div');\n\n      const headline = headlines?.find(\n        (headline) => headline.getAttribute(ATTRIBUTE_REFERENCE) === reference,\n      );\n      const richText = texts?.find(\n        (text) => text.getAttribute(ATTRIBUTE_REFERENCE) === reference,\n      );\n\n      textContainer.classList.add(ELEMENT_SLIDE_TEXT_CONTAINER);\n\n      if (headline || richText) {\n        if (headline) {\n          headline.classList.add(ELEMENT_SLIDE_HEADLINE);\n          textContainer.appendChild(headline);\n        }\n\n        if (richText) {\n          richText.classList.add(ELEMENT_SLIDE_RICH_TEXT);\n          textContainer.appendChild(richText);\n        }\n\n        return textContainer;\n      }\n\n      return null;\n    };\n\n    const CreateImageContainer = ({\n      image,\n      isFullScreenOption,\n      setFullScreen,\n      index,\n    }: TypeImageContainerProps) => {\n      const imageContainer = document.createElement('div');\n      const imageWrapper = document.createElement('div');\n      const imageBlock = LayoutImage.CreateElement({\n        image,\n        showCaption: true,\n      });\n\n      imageContainer.classList.add(ELEMENT_SLIDE_IMAGE_CONTAINER);\n\n      imageWrapper.classList.add(ELEMENT_SLIDE_IMAGE_WRAPPER);\n      imageWrapper.appendChild(imageBlock);\n\n      if (isFullScreenOption) {\n        const button = buttons.fullscreen.create({\n          callback: setFullScreen,\n          index,\n        });\n        imageBlock.appendChild(button.element);\n\n        styles += button.styles;\n      }\n\n      imageContainer.appendChild(imageWrapper);\n\n      return imageContainer;\n    };\n\n    const CreateSlide = (props: TypeCarouselSlideProps) => {\n      const { images, setFullScreen } = props;\n      const clonedImages = images.map((image) =>\n        image.cloneNode(true),\n      ) as HTMLImageElement[];\n\n      return clonedImages.map((image, index) => {\n        const reference = image.getAttribute(ATTRIBUTE_REFERENCE);\n        const slide = document.createElement('div');\n        const imageContainer = CreateImageContainer({\n          ...props,\n          image,\n          setFullScreen,\n          index,\n        });\n        const textContainer = CreateTextContainer({ ...props, reference });\n\n        slide.classList.add(ELEMENT_SLIDE);\n        slide.appendChild(imageContainer);\n        if (textContainer) slide.appendChild(textContainer);\n\n        return slide;\n      });\n    };\n\n    const slides = CreateSlide({\n      ...props,\n      setFullScreen: overlayCarousel.events.setFullScreen,\n    });\n    const carousel = carouselElements.image({\n      slides,\n      callback: (activeIndex) => {\n        indicator.position(activeIndex);\n      },\n      maxHeight: 500,\n    });\n\n    styles += carousel.styles;\n\n    const indicator = animations.actions.indicator({\n      count: images.length || 0,\n      callback: carousel.events.EventMoveTo,\n      isThemeDark,\n      isThemeLight: !isThemeDark,\n    });\n\n    styles += indicator.styles;\n\n    elementIndicator.classList.add(ELEMENT_CAROUSEL_INDICATOR_WRAPPER);\n    elementIndicator.appendChild(indicator.element);\n\n    elementContainer.classList.add(ELEMENT_CAROUSEL_IMAGE_CONTAINER);\n    elementContainer.appendChild(carousel.element);\n    elementContainer.appendChild(elementIndicator);\n    if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    elementDeclaration.classList.add(ELEMENT_CAROUSEL_IMAGE_DECLARATION);\n    elementDeclaration.appendChild(elementContainer);\n\n    images[images.length - 1].addEventListener('load', carousel.events.Load);\n\n    const responseOptions = {\n      styles,\n      events: {\n        SetEventReize: carousel.events.EventResize,\n      },\n    };\n\n    if (isFullScreenOption) {\n      const element = document.createElement('div');\n\n      element.appendChild(overlayCarousel.element);\n      element.appendChild(elementDeclaration);\n\n      return {\n        element,\n        ...responseOptions,\n      };\n    }\n\n    return {\n      element: elementDeclaration,\n      ...responseOptions,\n    };\n  })();\n"],"names":["token","jssToCSS","element","typography","LayoutImage","carouselElements.overlay","styles","headline","image","isFullScreenOption","index","buttons.fullscreen","props","images","carouselElements.image","indicator","animations.actions.indicator"],"mappings":"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"}
+{"version":3,"file":"standard.js","sources":["../../../../source/composite/carousel/image/standard.ts"],"sourcesContent":["import {\n  element,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport * as carouselElements from '../elements';\nimport { animations, buttons } from 'atomic';\nimport { Image as LayoutImage } from 'layout';\n\ntype TypeImage = {\n  image: HTMLImageElement;\n};\n\ntype TypeFullScreen = {\n  isFullScreenOption?: boolean;\n};\n\ntype TypesetFullScreen = {\n  setFullScreen: (arg: number) => void;\n};\n\ntype TypeSlideContent = {\n  images: HTMLImageElement[];\n  headlines?: HTMLElement[] | null;\n  texts?: HTMLElement[] | null;\n};\n\ntype TypeImageContainerProps = TypeImage &\n  TypeFullScreen &\n  TypesetFullScreen & {\n    index: number;\n  };\n\ntype TypeCarouselSlideProps = TypeSlideContent &\n  TypesetFullScreen &\n  TypeFullScreen;\n\ntype TypeCarouselImageStandardProps = TypeSlideContent &\n  TypeFullScreen & {\n    isThemeDark?: boolean;\n  };\n\nconst MEDIUM = 500;\n\nconst ATTRIBUTE_REFERENCE = 'data-reference';\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-carousel-image-standard';\nconst ELEMENT_CAROUSEL_IMAGE_DECLARATION =\n  'carousel-image-standard-declaration';\nconst ELEMENT_CAROUSEL_IMAGE_CONTAINER = 'carousel-image-standard-container';\n\nconst ELEMENT_SLIDE = 'carousel-image-standard-slide';\nconst ELEMENT_SLIDE_IMAGE_CONTAINER = 'carousel-image-standard-slide-image';\nconst ELEMENT_SLIDE_IMAGE_WRAPPER = 'carousel-image-standard-slide-wrapper';\nconst ELEMENT_SLIDE_TEXT_CONTAINER = 'carousel-image-standard-slide-text';\nconst ELEMENT_SLIDE_HEADLINE = 'carousel-image-standard-slide-headline';\nconst ELEMENT_SLIDE_RICH_TEXT = 'carousel-image-standard-slide-rich-text';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-slider-button';\n\nconst ELEMENT_CAROUSEL_INDICATOR_WRAPPER = 'carousel-indicator-wrapper';\nconst ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER =\n  'carousel-overlay-image-container';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_RICH_TEXT = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_SLIDE_RICH_TEXT}`;\nconst OVERWRITE_THEME_DARK_TEXT_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_TEXT_CONTAINER}`;\nconst OVERWRITE_THEME_DARK_IMAGE_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_IMAGE_CONTAINER}`;\nconst OVERWRITE_THEME_DARK_INDICATOR = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_SLIDER_BUTTON}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER},\n  ${OVERWRITE_THEME_DARK_TEXT_CONTAINER},\n  ${OVERWRITE_THEME_DARK_INDICATOR} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_IMAGE_CONTAINER} {\n    background-color: ${token.color.gray.dark};\n  }\n\n  ${OVERWRITE_THEME_DARK_TEXT_CONTAINER} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n    fill: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_RICH_TEXT} {\n    color: ${token.color.white};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`${OVERWRITE_THEME_DARK_RICH_TEXT}`]: element.text.rich.advancedDark,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst IndicatorContainerStyles = `\n  .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {\n    padding: ${token.spacing.md};\n    background-color: ${token.color.gray.lightest};\n    display: flex;\n    justify-content: center;\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {\n      padding: ${token.spacing.lg};\n    }\n  }\n`;\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n  .${ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER} {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ${token.color.gray.dark};\n  }\n\n  .${ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst TextContainerStyles = `\n  .${ELEMENT_SLIDE_TEXT_CONTAINER} {\n    padding: ${token.spacing.md};\n    padding-bottom: 0;\n    background-color: ${token.color.gray.lightest};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${ELEMENT_SLIDE_TEXT_CONTAINER} {\n      padding: ${token.spacing.lg};\n      padding-bottom: 0;\n    }\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_SLIDE_HEADLINE}`]: typography.sans.large,\n    },\n  })}\n\n  .${ELEMENT_SLIDE_RICH_TEXT} {\n    margin-top: ${token.spacing.min};\n    color: ${token.color.gray.dark}\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_SLIDE_RICH_TEXT}`]: element.text.rich.advanced,\n    },\n  })}\n`\n\n// prettier-ignore\nconst ImageContainerStyles = `\n  .${ELEMENT_SLIDE_IMAGE_CONTAINER} {\n    position: relative;\n    background-color: ${token.color.black};\n  }\n\n  .${ELEMENT_SLIDE_IMAGE_WRAPPER} {\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .${ELEMENT_SLIDE_IMAGE_WRAPPER} > * {\n    height: 100%;\n  }\n\n  .${ELEMENT_SLIDE_IMAGE_CONTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_STANDARD_ELEMENT = `\n  .${ELEMENT_CAROUSEL_IMAGE_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_CAROUSEL_IMAGE_CONTAINER} {\n    overflow: hidden;\n    background-color: ${token.color.gray.lightest};\n  }\n\n  ${LayoutImage.Styles}\n  ${ImageContainerStyles}\n  ${TextContainerStyles}\n  ${OverlayImageContainerStyles}\n  ${IndicatorContainerStyles}\n  ${OverwriteThemeDark}\n`;\n\nexport default (props: TypeCarouselImageStandardProps) =>\n  (() => {\n    const { images, isThemeDark, isFullScreenOption } = props;\n    const elementDeclaration = document.createElement('div');\n    const elementContainer = document.createElement('div');\n    const elementIndicator = document.createElement('div');\n    const overlayCarousel = carouselElements.overlay({\n      images,\n    });\n    let styles = STYLES_CAROUSEL_IMAGE_STANDARD_ELEMENT;\n\n    styles += overlayCarousel.styles;\n\n    const CreateTextContainer = ({\n      headlines,\n      texts,\n      reference,\n    }: {\n      headlines?: HTMLElement[] | null;\n      texts?: HTMLElement[] | null;\n      reference: string | null;\n    }) => {\n      const textContainer = document.createElement('div');\n\n      const headline = headlines?.find(\n        (headline) => headline.getAttribute(ATTRIBUTE_REFERENCE) === reference,\n      );\n      const richText = texts?.find(\n        (text) => text.getAttribute(ATTRIBUTE_REFERENCE) === reference,\n      );\n\n      textContainer.classList.add(ELEMENT_SLIDE_TEXT_CONTAINER);\n\n      if (headline || richText) {\n        if (headline) {\n          headline.classList.add(ELEMENT_SLIDE_HEADLINE);\n          textContainer.appendChild(headline);\n        }\n\n        if (richText) {\n          richText.classList.add(ELEMENT_SLIDE_RICH_TEXT);\n          textContainer.appendChild(richText);\n        }\n\n        return textContainer;\n      }\n\n      return null;\n    };\n\n    const CreateImageContainer = ({\n      image,\n      isFullScreenOption,\n      setFullScreen,\n      index,\n    }: TypeImageContainerProps) => {\n      const imageContainer = document.createElement('div');\n      const imageWrapper = document.createElement('div');\n      const imageBlock = LayoutImage.CreateElement({\n        image,\n        showCaption: true,\n      });\n\n      imageContainer.classList.add(ELEMENT_SLIDE_IMAGE_CONTAINER);\n\n      imageWrapper.classList.add(ELEMENT_SLIDE_IMAGE_WRAPPER);\n      imageWrapper.appendChild(imageBlock);\n\n      if (isFullScreenOption) {\n        const button = buttons.fullscreen.create({\n          callback: setFullScreen,\n          index,\n        });\n        imageBlock.appendChild(button.element);\n\n        styles += button.styles;\n      }\n\n      imageContainer.appendChild(imageWrapper);\n\n      return imageContainer;\n    };\n\n    const CreateSlide = (props: TypeCarouselSlideProps) => {\n      const { images, setFullScreen } = props;\n      const clonedImages = images.map((image) =>\n        image.cloneNode(true),\n      ) as HTMLImageElement[];\n\n      return clonedImages.map((image, index) => {\n        const reference = image.getAttribute(ATTRIBUTE_REFERENCE);\n        const slide = document.createElement('div');\n        const imageContainer = CreateImageContainer({\n          ...props,\n          image,\n          setFullScreen,\n          index,\n        });\n        const textContainer = CreateTextContainer({ ...props, reference });\n\n        slide.classList.add(ELEMENT_SLIDE);\n        slide.appendChild(imageContainer);\n        if (textContainer) slide.appendChild(textContainer);\n\n        return slide;\n      });\n    };\n\n    const slides = CreateSlide({\n      ...props,\n      setFullScreen: overlayCarousel.events.setFullScreen,\n    });\n    const carousel = carouselElements.image({\n      slides,\n      callback: (activeIndex) => {\n        indicator.position(activeIndex);\n      },\n      maxHeight: 500,\n    });\n\n    styles += carousel.styles;\n\n    const indicator = animations.actions.indicator({\n      count: images.length || 0,\n      callback: carousel.events.EventMoveTo,\n      isThemeDark,\n      isThemeLight: !isThemeDark,\n    });\n\n    styles += indicator.styles;\n\n    elementIndicator.classList.add(ELEMENT_CAROUSEL_INDICATOR_WRAPPER);\n    elementIndicator.appendChild(indicator.element);\n\n    elementContainer.classList.add(ELEMENT_CAROUSEL_IMAGE_CONTAINER);\n    elementContainer.appendChild(carousel.element);\n    elementContainer.appendChild(elementIndicator);\n    if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    elementDeclaration.classList.add(ELEMENT_CAROUSEL_IMAGE_DECLARATION);\n    elementDeclaration.appendChild(elementContainer);\n\n    images[images.length - 1].addEventListener('load', carousel.events.Load);\n\n    const responseOptions = {\n      styles,\n      events: {\n        SetEventReize: carousel.events.EventResize,\n      },\n    };\n\n    if (isFullScreenOption) {\n      const element = document.createElement('div');\n\n      element.appendChild(overlayCarousel.element);\n      element.appendChild(elementDeclaration);\n\n      return {\n        element,\n        ...responseOptions,\n      };\n    }\n\n    return {\n      element: elementDeclaration,\n      ...responseOptions,\n    };\n  })();\n"],"names":["token","jssToCSS","element","typography","LayoutImage","carouselElements.overlay","styles","headline","image","isFullScreenOption","index","buttons.fullscreen","props","images","carouselElements.image","indicator","animations.actions.indicator"],"mappings":"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"}

package/dist/composite/carousel/image/standard.mjs

@@ -1,15 +1,21 @@
 import { token, element, typography } from "@universityofmaryland/web-styles-library";
 import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
-import "@universityofmaryland/web-styles-library/token";
+import "../elements/blocks.mjs";
+import "../elements/full-screen.mjs";
+import overlay from "../elements/overlay.mjs";
+import image from "../elements/image.mjs";
+import "@universityofmaryland/web-builder-library";
+import "@universityofmaryland/web-token-library";
 import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-styles-library/animation";
+import "@universityofmaryland/web-styles-library/typography";
 import "@universityofmaryland/web-utilities-library/media";
 import "@universityofmaryland/web-utilities-library/dom";
 import "@universityofmaryland/web-icons-library/controls";
 import "@universityofmaryland/web-icons-library/communication";
 import "@universityofmaryland/web-icons-library/files";
 import "@universityofmaryland/web-icons-library/brand";
-import "../../../model/modifiers/index.mjs";
-import "../../../model/elements/headline.mjs";
 import "@universityofmaryland/web-icons-library/arrows";
 import indicator from "../../../atomic/animations/actions/indicator.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
@@ -19,18 +25,14 @@ import "@universityofmaryland/web-utilities-library/accessibility";
 import fullscreen from "../../../atomic/buttons/fullscreen.mjs";
 import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";
+import "@universityofmaryland/web-utilities-library/theme";
 import "../../../atomic/layout/block/stacked.mjs";
 import "../../../atomic/layout/overlay/modal.mjs";
 import "../../../atomic/layout/person/columns.mjs";
 import "@universityofmaryland/web-icons-library/social";
 import "../../../atomic/text-lockup/date.mjs";
 import "../../../atomic/text-lockup/small.mjs";
-import "@universityofmaryland/web-styles-library/typography";
 import LayoutImage from "../../../layout/image.mjs";
-import "../elements/blocks.mjs";
-import "../elements/full-screen.mjs";
-import overlay from "../elements/overlay.mjs";
-import image from "../elements/image.mjs";
 const MEDIUM = 500;
 const ATTRIBUTE_REFERENCE = "data-reference";
 const ATTRIBUTE_THEME = "data-theme";