@universityofmaryland/web-elements-library 1.6.17 → 1.7.0

package/dist/composite/slider/events.js.map

@@ -1 +1 @@
-{"version":3,"file":"events.js","sources":["../../../source/composite/slider/events.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { setupSwipeDetection } from '@universityofmaryland/web-utilities-library/events';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { parsePixelValue } from '@universityofmaryland/web-utilities-library/styles';\nimport {\n  arrow_left as iconArrowLeft,\n  arrow_right as iconArrowRight,\n} from '@universityofmaryland/web-icons-library/arrows';\n\ntype TypeSliderEventButtonProps = {\n  SetCountForward: () => void;\n  SetCountBackward: () => void;\n  SetButtonVisibility: () => void;\n  SetSlideDatesBackwards: () => void;\n  SetSlideDatesForward: () => void;\n};\n\ntype TypeSliderEventIntroProps = {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n};\n\ntype TypeSliderEventSlideContentProps = {\n  dataSlider: HTMLDivElement;\n};\n\ntype TypeSliderEventSlideProps = TypeSliderEventSlideContentProps &\n  TypeSliderEventButtonProps;\n\ntype TypeSliderEventScrollerProps = TypeSliderEventSlideProps &\n  TypeSliderEventIntroProps;\n\ntype TypeSliderEventProps = TypeSliderEventSlideContentProps &\n  TypeSliderEventIntroProps & {\n    isThemeDark?: boolean;\n  };\n\nconst TABLET = 750;\nconst DESKTOP = 1000;\nconst LARGE = 1300;\n\nconst ANIMATION_DURATION = 500;\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-slider-events';\nconst ELEMENT_SLIDER_EVENT_DECLRATION = 'slider-events-declaration';\nconst ELEMENT_SLIDER_EVENT_CONTAINER = 'slider-events-container';\nconst ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER = 'slider-event-container-wrapper';\nconst ELEMENT_SLIDER_EVENT_COVER = 'slider-event-cover';\n\nconst ELEMENT_SLIDER_EVENT_INTRO = 'slider-event-intro-container';\nconst ELEMENT_SLIDER_EVENT_INTRO_HEADLINE = 'slider-event-intro-headline';\nconst ELEMENT_SLIDER_EVENT_INTRO_ACTIONS = 'slider-event-intro-actions';\n\nconst ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER = 'slider-event-slide-container';\nconst ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER = 'slider-event-slide-wrapper';\nconst ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER = 'slider-event-slide-scroller';\n\nconst ELEMENT_SLIDER_EVENT_SLIDE_BUTTON = 'slider-event-slide-button';\nconst ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD = 'slider-event-button-forward';\nconst ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK = 'slider-event-button-back';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_CONTAINER_WRAPPER = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_INTRO_COVER = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_COVER}`;\nconst OVERWRITE_THEME_DARK_INTRO_HEADLINE = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_ARROW = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}`;\n\n// prettier-ignore\nconst VariationThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER_WRAPPER} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_CONTAINER} * {\n    color: #fff !important;\n  }\n\n  ${OVERWRITE_THEME_DARK_INTRO_COVER} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_INTRO_HEADLINE} {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW} {\n    background-color: ${token.color.gray.dark};\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW} svg {\n    fill: ${token.color.white}\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW}:hover {\n    background-color: ${token.color.white}\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW}:hover svg {\n    fill: ${token.color.black}\n  }\n`\n\nconst ButtonStyles = `\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} {\n    border: none;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: ${token.color.gray.light};\n    transition: background-color ${ANIMATION_DURATION}ms;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    z-index: 99;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} {\n      width: 48px;\n      height: 48px;\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}:hover {\n    background-color: ${token.color.black};\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}:hover svg {\n    fill: ${token.color.white};\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} svg {\n    transition: fill .5s;\n    fill: ${token.color.black};\n    width: 16px;\n    height: 6px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} svg {\n      width: 24px;\n      height: 8px;\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK} {\n    left: 0;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${TABLET - 1}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK} {\n      left: -24px;\n      top: ${token.spacing.xs};\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD} {\n    right: 0;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${TABLET - 1}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD} {\n      right: -24px;\n      top: ${token.spacing.xs};\n    }\n  }\n`;\n\nconst DatesStyles = `\n  .${ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER} {\n    display: flex;\n    position: relative;\n    padding: 0 36px;\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER} {\n      padding: 0 60px;\n      width: calc(100% - 96px);\n    }\n  }\n  \n  .${ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER} {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    min-height: 44px;\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER} ::slotted(*) {\n    margin-bottom: 0 !important;\n  }\n`;\n\nconst IntroStyles = `\n  .${ELEMENT_SLIDER_EVENT_INTRO} {\n    padding: 0 ${token.spacing.lg};\n    position: relative;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${TABLET - 1}px) {\n    .${ELEMENT_SLIDER_EVENT_INTRO} {\n      text-align: center;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_INTRO} {\n      padding: 0;\n      padding-right: 24px;\n      padding-left: 0;\n      width: 200px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ELEMENT_SLIDER_EVENT_INTRO} {\n      width: 320px;\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE} {\n    color: ${token.color.black};\n    font-weight: 700;\n  }\n\n  .${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE} + * {\n    margin-top: ${token.spacing.min};\n    display: block;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE}`]: typography.sans.larger,\n    },\n  })}\n\n  * + .${ELEMENT_SLIDER_EVENT_INTRO_ACTIONS} {\n    text-decoration: none;\n  }\n  \n  .${ELEMENT_SLIDER_EVENT_INTRO_ACTIONS} {\n    margin-top: ${token.spacing.min};\n  }\n  \n\n`;\n\nconst ScrollerStyles = `\n  .${ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER} {\n    position: relative;\n    z-index: 99;\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n  .${ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER} {\n      display: flex;\n      align-items: center;\n    }\n  }\n`;\n\nconst CoverStyles = `\n  .${ELEMENT_SLIDER_EVENT_COVER} {\n    display: block;\n    position: absolute;\n    width: 200vw;\n    height: 100%;\n    top: 0;\n    left: -100vw;\n    background-color: ${token.color.gray.lighter};\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_COVER} {\n      width: 40vw;\n      left: calc(100% - 1px);\n    }\n  }\n`;\n\n// prettier-ignore\nconst STYLES_SLIDER_EVENTS_ELEMENT = `\n  .${ELEMENT_SLIDER_EVENT_DECLRATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n  \n  .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER} {\n    padding: 24px 0;\n    background-color: ${token.color.gray.lighter};\n    position: relative;\n    z-index: 99;\n  }\n  \n  @container ${ELEMENT_NAME} (max-width: 260px) {\n    .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER} {\n      display: none\n    }\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER} {\n      padding: 40px;\n    }\n  }\n  \n  ${CoverStyles}\n  ${ScrollerStyles}\n  ${IntroStyles}\n  ${DatesStyles}\n  ${ButtonStyles}\n  ${VariationThemeDark}\n`;\n\nconst CreateBackButton = ({\n  SetCountBackward,\n  SetButtonVisibility,\n  SetSlideDatesBackwards,\n}: TypeSliderEventButtonProps) => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconArrowLeft;\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON);\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK);\n  button.style.display = 'none';\n  button.setAttribute('type', 'button');\n  button.setAttribute('aria-label', 'see previous date');\n\n  const clickEvent = () => {\n    if (button.hasAttribute('disabled')) return;\n    SetCountBackward();\n    SetButtonVisibility();\n    SetSlideDatesBackwards();\n  };\n\n  button.addEventListener('click', clickEvent);\n  button.addEventListener('touchstart', clickEvent);\n\n  return button;\n};\n\nconst CreateForwardButton = ({\n  SetCountForward,\n  SetButtonVisibility,\n  SetSlideDatesForward,\n}: TypeSliderEventButtonProps) => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconArrowRight;\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON);\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD);\n  button.setAttribute('type', 'button');\n  button.setAttribute('aria-label', 'see next date');\n\n  const clickEvent = () => {\n    if (button.hasAttribute('disabled')) return;\n    SetCountForward();\n    SetButtonVisibility();\n    SetSlideDatesForward();\n  };\n\n  button.addEventListener('click', clickEvent);\n  button.addEventListener('touchstart', clickEvent);\n\n  return button;\n};\n\nconst CreateDatesContainer = (props: TypeSliderEventSlideProps) => {\n  const { dataSlider } = props;\n  const container = document.createElement('div');\n  const datesWrapper = document.createElement('div');\n  const backButton = CreateBackButton(props);\n  const forwardButton = CreateForwardButton(props);\n\n  datesWrapper.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER);\n  dataSlider.style.display = 'block';\n  datesWrapper.appendChild(dataSlider);\n\n  container.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER);\n  container.appendChild(backButton);\n  container.appendChild(datesWrapper);\n  container.appendChild(forwardButton);\n\n  return container;\n};\n\nconst CreateIntroWrapper = (props: TypeSliderEventIntroProps) => {\n  const { headline, actions } = props;\n  const introductionWrapper = document.createElement('div');\n  if (headline) {\n    headline.classList.add(ELEMENT_SLIDER_EVENT_INTRO_HEADLINE);\n    introductionWrapper.appendChild(headline);\n  }\n  if (actions) {\n    introductionWrapper.appendChild(actions);\n  }\n\n  introductionWrapper.classList.add(ELEMENT_SLIDER_EVENT_INTRO);\n\n  return introductionWrapper;\n};\n\nconst CreateScrollerWrapper = (props: TypeSliderEventScrollerProps) => {\n  const container = document.createElement('div');\n  const introductionWrapper = CreateIntroWrapper(props);\n  const datesContainer = CreateDatesContainer(props);\n\n  container.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER);\n\n  container.appendChild(introductionWrapper);\n  container.appendChild(datesContainer);\n\n  return container;\n};\n\nconst ShowNumberOfDates = ({ container }: { container: HTMLElement }) => {\n  let count = 1;\n\n  if (container.offsetWidth > TABLET) count = 2;\n  if (container.offsetWidth > DESKTOP) count = 3;\n  if (container.offsetWidth > LARGE) count = 4;\n\n  return count;\n};\n\nconst JumpToDate = ({\n  dataSlider,\n  currentPosition,\n}: {\n  dataSlider: HTMLElement;\n  currentPosition: number;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n\n  if (!dateElements) return;\n\n  const firstElement = dateElements[0];\n  const currentPositonAboveZero = currentPosition > 0;\n  const currentElement = dateElements[currentPosition];\n  let endPosition = 0;\n\n  if (currentPositonAboveZero) {\n    endPosition = currentElement.offsetLeft - firstElement.offsetLeft;\n  }\n\n  dataSlider.style.transform = `translateX(${-endPosition}px)`;\n};\n\nconst ButtonVisibilityLogic = ({\n  container,\n  dataSlider,\n  currentPosition,\n}: {\n  container: HTMLElement;\n  dataSlider: HTMLElement;\n  currentPosition: number;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n  const buttons = Array.from(\n    container.querySelectorAll(`.${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}`),\n  ) as HTMLButtonElement[];\n  const count = ShowNumberOfDates({ container });\n  const length = dateElements.length;\n\n  buttons.forEach((button) => {\n    button.setAttribute('disabled', '');\n\n    setTimeout(() => {\n      button.removeAttribute('disabled');\n    }, ANIMATION_DURATION + 100);\n  });\n\n  if (currentPosition === 0) {\n    buttons[0].style.display = 'none';\n  } else {\n    buttons[0].style.display = 'flex';\n  }\n\n  if (currentPosition >= length - count) {\n    buttons[1].style.display = 'none';\n  } else {\n    buttons[1].style.display = 'flex';\n  }\n};\n\nconst SizeDatesElements = ({\n  container,\n  dataSlider,\n  isThemeDark,\n  SetButtonVisibility,\n}: {\n  container: HTMLElement;\n  dataSlider: HTMLElement;\n  isThemeDark?: boolean;\n  SetButtonVisibility: () => void;\n}) => {\n  const sliderWrapper = container.querySelector(\n    `.${ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER}`,\n  ) as HTMLDivElement;\n\n  const sizing = ({ sliderWrapper }: { sliderWrapper: HTMLDivElement }) => {\n    const dateElements = Array.from(\n      dataSlider.querySelectorAll(':scope > *'),\n    ) as HTMLDivElement[];\n\n    const sliderVisibility = ({ show = true }: { show?: boolean }) => {\n      dataSlider.style.visibility = show ? 'visible' : 'hidden';\n    };\n\n    const setHeight = () => {\n      const maxHeightElement = dateElements.sort((a, b) => {\n        return a.offsetHeight - b.offsetHeight;\n      })[0];\n      const height =\n        maxHeightElement.offsetHeight +\n        parsePixelValue(maxHeightElement.style.marginTop);\n\n      sliderWrapper.style.height = `${height}px`;\n    };\n\n    const setWidthPerDate = () => {\n      const count = ShowNumberOfDates({ container });\n      const dateElementSize = sliderWrapper.offsetWidth / count;\n      const elementWidth = container.offsetWidth;\n      const isMobile = elementWidth < TABLET;\n\n      if (elementWidth === 0) {\n        setTimeout(() => {\n          sizing({ sliderWrapper });\n        }, 200);\n        return;\n      }\n\n      dataSlider.style.width = `${dateElements.length * dateElementSize}px`;\n\n      dateElements.forEach((dateElement) => {\n        dateElement.style.width = `${dateElementSize}px`;\n\n        if (isMobile) {\n          const lineColor = isThemeDark\n            ? token.color.gray.mediumAA\n            : token.color.gray.light;\n\n          dateElement.style.display = `flex`;\n          dateElement.style.justifyContent = `center`;\n          dateElement.style.paddingRight = `0`;\n          dateElement.style.marginTop = `${token.spacing.xs}`;\n          dateElement.style.paddingTop = `${token.spacing.xs}`;\n          dateElement.style.borderTop = `1px solid ${lineColor}`;\n        } else {\n          dateElement.style.display = `flex`;\n          dateElement.style.justifyContent = `inherit`;\n          dateElement.style.paddingRight = `${token.spacing.lg}`;\n\n          dateElement.style.marginTop = `0`;\n          dateElement.style.paddingTop = `0`;\n          dateElement.style.borderTop = `none`;\n        }\n      });\n    };\n\n    sliderVisibility({ show: false });\n    setWidthPerDate();\n    setHeight();\n    sliderVisibility({ show: true });\n    SetButtonVisibility();\n  };\n\n  sizing({ sliderWrapper });\n};\n\nconst EventSlideDates = ({\n  forward,\n  dataSlider,\n}: {\n  forward: boolean;\n  dataSlider: HTMLElement;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n  const width = dateElements[0].offsetWidth;\n  const loop = 30;\n  const sliderStyle = dataSlider.style.transform;\n  const sliderPosition = sliderStyle\n    ? parseInt(sliderStyle.replace(/[^\\d.]/g, ''))\n    : 0;\n  const endPosition = forward\n    ? Math.floor(sliderPosition + width)\n    : Math.floor(sliderPosition - width);\n  const increment = width / loop;\n  let index = 1;\n\n  const slideFunction = () => {\n    const incrementIncrease = increment * index;\n    const postion = forward\n      ? sliderPosition + incrementIncrease\n      : sliderPosition - incrementIncrease;\n\n    if (loop > index) {\n      index++;\n      window.requestAnimationFrame(slideFunction);\n      dataSlider.style.transform = `translateX(${-postion}px)`;\n    } else {\n      dataSlider.style.transform = `translateX(${-endPosition}px)`;\n    }\n  };\n\n  window.requestAnimationFrame(slideFunction);\n};\n\nconst EventSwipe = ({\n  container,\n  dataSlider,\n  currentPosition,\n  SetCountBackward,\n  SetCountForward,\n  SetSlideDatesBackwards,\n  SetSlideDatesForward,\n  SetButtonVisibility,\n}: {\n  container: HTMLElement;\n  dataSlider: HTMLElement;\n  currentPosition: number;\n  SetCountBackward: () => void;\n  SetCountForward: () => void;\n  SetSlideDatesBackwards: () => void;\n  SetSlideDatesForward: () => void;\n  SetButtonVisibility: () => void;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n  const count = ShowNumberOfDates({ container });\n  const swipes = (isrightswipe: Boolean) => {\n    if (isrightswipe) {\n      if (currentPosition > 0) {\n        SetCountBackward();\n        SetSlideDatesBackwards();\n      }\n    } else {\n      if (currentPosition <= dateElements.length - count) {\n        SetCountForward();\n        SetSlideDatesForward();\n      }\n    }\n\n    SetButtonVisibility();\n  };\n\n  setupSwipeDetection({ container, callback: swipes });\n};\n\nconst OnLoadStyles = ({ dataSlider }: { dataSlider: HTMLElement }) => {\n  dataSlider.style.display = 'flex';\n  dataSlider.style.position = 'absolute';\n  dataSlider.style.top = '0';\n  dataSlider.style.left = '0';\n};\n\nexport const createCompositeSliderEvents = (props: TypeSliderEventProps) =>\n  (() => {\n    const { isThemeDark, dataSlider } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n    const coverElement = document.createElement('div');\n    const CommonDomElements = {\n      container,\n      dataSlider,\n    };\n\n    const SetCountForward = () => (currentPosition = currentPosition + 1);\n    const SetCountBackward = () => (currentPosition = currentPosition - 1);\n    const SetButtonVisibility = () =>\n      ButtonVisibilityLogic({ ...CommonDomElements, currentPosition });\n    const size = () =>\n      SizeDatesElements({\n        ...CommonDomElements,\n        isThemeDark,\n        SetButtonVisibility,\n      });\n    const SetJumpToDate = () =>\n      JumpToDate({ ...CommonDomElements, currentPosition });\n    const SetSlideDatesForward = () =>\n      EventSlideDates({ ...CommonDomElements, forward: true });\n    const SetSlideDatesBackwards = () =>\n      EventSlideDates({ ...CommonDomElements, forward: false });\n    const SetEventSwipe = () =>\n      EventSwipe({\n        ...CommonDomElements,\n        currentPosition,\n        SetCountBackward,\n        SetCountForward,\n        SetSlideDatesBackwards,\n        SetSlideDatesForward,\n        SetButtonVisibility,\n      });\n    const EventResize = () => {\n      size();\n      SetJumpToDate();\n      SetButtonVisibility();\n    };\n    const containerWrapper = CreateScrollerWrapper({\n      ...props,\n      SetCountForward,\n      SetCountBackward,\n      SetButtonVisibility,\n      SetSlideDatesBackwards,\n      SetSlideDatesForward,\n    });\n    const load = () => {\n      OnLoadStyles({ dataSlider });\n      EventResize();\n      SetEventSwipe();\n    };\n\n    let currentPosition = 0;\n    let styles = STYLES_SLIDER_EVENTS_ELEMENT;\n\n    dataSlider.style.visibility = 'hidden';\n\n    coverElement.classList.add(ELEMENT_SLIDER_EVENT_COVER);\n\n    wrapper.classList.add(ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER);\n\n    wrapper.appendChild(containerWrapper);\n    wrapper.appendChild(coverElement);\n\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n    container.classList.add(ELEMENT_SLIDER_EVENT_CONTAINER);\n    container.appendChild(wrapper);\n\n    declaration.classList.add(ELEMENT_SLIDER_EVENT_DECLRATION);\n    declaration.appendChild(container);\n\n    window.addEventListener('resize', debounce(EventResize, 20));\n\n    return {\n      element: declaration,\n      styles,\n      events: {\n        load,\n        size,\n      },\n    };\n  })();\n"],"names":["iconArrowLeft","iconArrowRight","sliderWrapper"],"mappings":"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"}
+{"version":3,"file":"events.js","sources":["../../../source/composite/slider/events.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { setupSwipeDetection } from '@universityofmaryland/web-utilities-library/events';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { parsePixelValue } from '@universityofmaryland/web-utilities-library/styles';\nimport {\n  arrow_left as iconArrowLeft,\n  arrow_right as iconArrowRight,\n} from '@universityofmaryland/web-icons-library/arrows';\n\ntype TypeThemeProps = {\n  isThemeDark?: boolean;\n};\n\ntype TypeSliderEventButtonProps = {\n  SetCountForward: () => void;\n  SetCountBackward: () => void;\n  SetButtonVisibility: () => void;\n  SetSlideDatesBackwards: () => void;\n  SetSlideDatesForward: () => void;\n};\n\ntype TypeSliderEventIntroProps = TypeThemeProps & {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n};\n\ntype TypeSliderEventSlideContentProps = {\n  dataSlider: HTMLDivElement;\n};\n\ntype TypeSliderEventSlideProps = TypeSliderEventSlideContentProps &\n  TypeSliderEventButtonProps &\n  TypeThemeProps;\n\ntype TypeSliderEventScrollerProps = TypeSliderEventSlideProps &\n  TypeSliderEventIntroProps;\n\ntype TypeSliderEventProps = TypeSliderEventSlideContentProps &\n  TypeSliderEventIntroProps;\n\nconst TABLET = 750;\nconst DESKTOP = 1000;\nconst LARGE = 1300;\nconst ANIMATION_DURATION = 500;\n\nconst ShowNumberOfDates = ({ container }: { container: HTMLElement }) => {\n  let count = 1;\n\n  if (container.offsetWidth > TABLET) count = 2;\n  if (container.offsetWidth > DESKTOP) count = 3;\n  if (container.offsetWidth > LARGE) count = 4;\n\n  return count;\n};\n\nconst JumpToDate = ({\n  dataSlider,\n  currentPosition,\n}: {\n  dataSlider: HTMLElement;\n  currentPosition: number;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n  const firstElement = dateElements[0];\n  const currentElement = dateElements[currentPosition];\n  let endPosition = 0;\n\n  if (currentPosition > 0) {\n    endPosition = currentElement.offsetLeft - firstElement.offsetLeft;\n  }\n\n  dataSlider.style.transform = `translateX(${-endPosition}px)`;\n};\n\nconst ButtonVisibilityLogic = ({\n  container,\n  dataSlider,\n  currentPosition,\n}: {\n  container: HTMLElement;\n  dataSlider: HTMLElement;\n  currentPosition: number;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n  const [backButton, forwardButton] = Array.from(\n    container.querySelectorAll('.slider-event-slide-button'),\n  ) as HTMLButtonElement[];\n  const count = ShowNumberOfDates({ container });\n  const length = dateElements.length;\n\n  [backButton, forwardButton].forEach((button) => {\n    button.setAttribute('disabled', '');\n\n    setTimeout(() => {\n      button.removeAttribute('disabled');\n    }, ANIMATION_DURATION + 100);\n  });\n\n  if (currentPosition === 0) {\n    backButton.style.display = 'none';\n  } else {\n    backButton.style.display = 'flex';\n  }\n\n  if (currentPosition >= length - count) {\n    forwardButton.style.display = 'none';\n  } else {\n    forwardButton.style.display = 'flex';\n  }\n};\n\nconst SizeDatesElements = ({\n  container,\n  dataSlider,\n  SetButtonVisibility,\n}: {\n  container: HTMLElement;\n  dataSlider: HTMLElement;\n  SetButtonVisibility: () => void;\n}) => {\n\n  const sizing = () => {\n    const dateElements = Array.from(\n      dataSlider.querySelectorAll(':scope > *'),\n    ) as HTMLDivElement[];\n\n\t\tconst sliderWrapper = container.querySelector(\n\t\t\t'.slider-event-slide-wrapper',\n\t\t) as HTMLDivElement;\n\n    const sliderVisibility = ({ show = true }: { show?: boolean }) => {\n      if (show) {\n        dataSlider.style.visibility = 'visible';\n      } else {\n        dataSlider.style.visibility = 'hidden';\n      }\n    };\n\n    const setHeight = () => {\n      const maxHeightElement = dateElements.sort((a, b) => {\n        return a.offsetHeight - b.offsetHeight;\n      })[0];\n      const height =\n        maxHeightElement.offsetHeight +\n        parsePixelValue(getComputedStyle(maxHeightElement).marginTop);\n\n      sliderWrapper.style.height = `${height}px`;\n    };\n\n    const setWidthPerDate = () => {\n      const count = ShowNumberOfDates({ container });\n      const dateElementSize = sliderWrapper.offsetWidth / count;\n      const containerWidth = container.offsetWidth;\n\n      if (containerWidth === 0) {\n        setTimeout(() => {\n          sizing();\n        }, 200);\n        return;\n      }\n\n      dataSlider.style.width = `${dateElements.length * dateElementSize}px`;\n\n      dateElements.forEach((dateElement) => {\n        dateElement.style.width = `${dateElementSize}px`;\n      });\n    };\n\n    sliderVisibility({ show: false });\n    setWidthPerDate();\n    setHeight();\n    sliderVisibility({ show: true });\n    SetButtonVisibility();\n  };\n\n  sizing();\n};\n\nconst EventSlideDates = ({\n  forward,\n  dataSlider,\n}: {\n  forward: boolean;\n  dataSlider: HTMLElement;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n  const width = dateElements[0].offsetWidth;\n  const loop = 30;\n  const sliderStyle = dataSlider.style.transform;\n  const sliderPosition = sliderStyle\n    ? parseInt(sliderStyle.replace(/[^\\d.]/g, ''))\n    : 0;\n  const endPosition = forward\n    ? Math.floor(sliderPosition + width)\n    : Math.floor(sliderPosition - width);\n  const increment = width / loop;\n  let index = 1;\n\n  const slideFunction = () => {\n    const incrementIncrease = increment * index;\n    const postion = forward\n      ? sliderPosition + incrementIncrease\n      : sliderPosition - incrementIncrease;\n\n    if (loop > index) {\n      index++;\n      window.requestAnimationFrame(slideFunction);\n      dataSlider.style.transform = `translateX(${-postion}px)`;\n    } else {\n      dataSlider.style.transform = `translateX(${-endPosition}px)`;\n    }\n  };\n\n  window.requestAnimationFrame(slideFunction);\n};\n\nconst EventSwipe = ({\n  container,\n  dataSlider,\n  currentPosition,\n  SetCountBackward,\n  SetCountForward,\n  SetSlideDatesBackwards,\n  SetSlideDatesForward,\n  SetButtonVisibility,\n}: {\n  container: HTMLElement;\n  dataSlider: HTMLElement;\n  currentPosition: number;\n  SetCountBackward: () => void;\n  SetCountForward: () => void;\n  SetSlideDatesBackwards: () => void;\n  SetSlideDatesForward: () => void;\n  SetButtonVisibility: () => void;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n  const count = ShowNumberOfDates({ container });\n  const swipes = (isrightswipe: Boolean) => {\n    if (isrightswipe) {\n      if (currentPosition > 0) {\n        SetCountBackward();\n        SetSlideDatesBackwards();\n      }\n    } else {\n      if (currentPosition <= dateElements.length - count) {\n        SetCountForward();\n        SetSlideDatesForward();\n      }\n    }\n\n    SetButtonVisibility();\n  };\n\n  setupSwipeDetection({ container, callback: swipes });\n};\n\nconst CreateBackButton = (props: TypeSliderEventSlideProps) => {\n  const { SetCountBackward, SetButtonVisibility, SetSlideDatesBackwards, isThemeDark } = props;\n\n  const clickEvent = (event: Event) => {\n    const button = event.currentTarget as HTMLButtonElement;\n    if (button.hasAttribute('disabled')) return;\n    SetCountBackward();\n    SetButtonVisibility();\n    SetSlideDatesBackwards();\n  };\n\n  return new ElementBuilder('button')\n    .withClassName('slider-event-button-back')\n    .withClassName('slider-event-slide-button')\n    .withHTML(iconArrowLeft)\n    .withAttribute('type', 'button')\n    .withAria({ label: 'see previous date' })\n    .withStyles({\n      element: {\n        border: 'none',\n        width: token.spacing.lg,\n        height: token.spacing.lg,\n        display: 'none',\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: token.color.gray.light,\n        transition: `background-color ${ANIMATION_DURATION}ms`,\n        position: 'absolute',\n        top: '50%',\n        transform: 'translateY(-50%)',\n        zIndex: 99,\n        left: 0,\n        ...(isThemeDark && { backgroundColor: token.color.gray.dark }),\n        [`@container (min-width: ${TABLET}px)`]: {\n          width: token.spacing['2xl'],\n          height: token.spacing['2xl'],\n        },\n        [`@container (max-width: ${TABLET - 1}px)`]: {\n          left: `-${token.spacing.md}`,\n          top: token.spacing.xs,\n        },\n        '&:hover': {\n          backgroundColor: token.color.black,\n          ...(isThemeDark && { backgroundColor: token.color.white }),\n        },\n        '& svg': {\n          transition: 'fill .5s',\n          fill: token.color.black,\n          width: token.spacing.sm,\n          height: '6px',\n          ...(isThemeDark && { fill: token.color.white }),\n          [`@container (min-width: ${TABLET}px)`]: {\n            width: token.spacing.md,\n            height: '8px',\n          },\n        },\n        '&:hover svg': {\n          fill: token.color.white,\n          ...(isThemeDark && { fill: token.color.black }),\n        },\n      },\n    })\n    .on('click', clickEvent)\n    .on('touchstart', clickEvent)\n    .build();\n};\n\nconst CreateForwardButton = (props: TypeSliderEventSlideProps) => {\n  const { SetCountForward, SetButtonVisibility, SetSlideDatesForward, isThemeDark } = props;\n\n  const clickEvent = (event: Event) => {\n    const button = event.currentTarget as HTMLButtonElement;\n    if (button.hasAttribute('disabled')) return;\n    SetCountForward();\n    SetButtonVisibility();\n    SetSlideDatesForward();\n  };\n\n  return new ElementBuilder('button')\n    .withClassName('slider-event-button-forward')\n    .withClassName('slider-event-slide-button')\n    .withHTML(iconArrowRight)\n    .withAttribute('type', 'button')\n    .withAria({ label: 'see next date' })\n    .withStyles({\n      element: {\n        border: 'none',\n        width: token.spacing.lg,\n        height: token.spacing.lg,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: token.color.gray.light,\n        transition: `background-color ${ANIMATION_DURATION}ms`,\n        position: 'absolute',\n        top: '50%',\n        transform: 'translateY(-50%)',\n        zIndex: 99,\n        right: 0,\n        ...(isThemeDark && { backgroundColor: token.color.gray.dark }),\n        [`@container (min-width: ${TABLET}px)`]: {\n          width: token.spacing['2xl'],\n          height: token.spacing['2xl'],\n        },\n        [`@container (max-width: ${TABLET - 1}px)`]: {\n          right: `-${token.spacing.md}`,\n          top: token.spacing.xs,\n        },\n        '&:hover': {\n          backgroundColor: token.color.black,\n          ...(isThemeDark && { backgroundColor: token.color.white }),\n        },\n        '& svg': {\n          transition: 'fill .5s',\n          fill: token.color.black,\n          width: token.spacing.sm,\n          height: '6px',\n          ...(isThemeDark && { fill: token.color.white }),\n          [`@container (min-width: ${TABLET}px)`]: {\n            width: token.spacing.md,\n            height: '8px',\n          },\n        },\n        '&:hover svg': {\n          fill: token.color.white,\n          ...(isThemeDark && { fill: token.color.black }),\n        },\n      },\n    })\n    .on('click', clickEvent)\n    .on('touchstart', clickEvent)\n    .build();\n};\n\nconst CreateDatesContainer = (props: TypeSliderEventSlideProps) => {\n  const { dataSlider, isThemeDark } = props;\n\n  const backButton = CreateBackButton(props);\n  const forwardButton = CreateForwardButton(props);\n\n  const dataSliderModel = new ElementBuilder(dataSlider)\n    .withClassName('slider-event-data-slider')\n    .withStyles({\n      element: {\n        display: 'flex',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        '& > *': {\n          display: 'flex',\n          justifyContent: 'inherit',\n          paddingRight: token.spacing.lg,\n          [`@container (max-width: ${TABLET - 1}px)`]: {\n            justifyContent: 'center',\n            paddingRight: 0,\n            marginTop: token.spacing.xs,\n            paddingTop: token.spacing.xs,\n            borderTop: `1px solid ${token.color.gray.light}`,\n            ...(isThemeDark && {\n              borderTop: `1px solid ${token.color.gray.mediumAA}`,\n            }),\n          },\n        },\n      },\n    })\n    .build();\n\n  const datesWrapper = new ElementBuilder()\n    .withClassName('slider-event-slide-wrapper')\n    .withStyles({\n      element: {\n        position: 'relative',\n        width: '100%',\n        overflow: 'hidden',\n        minHeight: '44px',\n        '& ::slotted(*)': {\n          marginBottom: '0 !important',\n        },\n      },\n    })\n    .withChild(dataSliderModel)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('slider-event-slide-container')\n    .withStyles({\n      element: {\n        display: 'flex',\n        position: 'relative',\n        padding: '0 36px',\n        [`@container (min-width: ${TABLET}px)`]: {\n          padding: '0 60px',\n          width: 'calc(100% - 96px)',\n        },\n      },\n    })\n    .withChildren(backButton, datesWrapper, forwardButton)\n    .build();\n};\n\nconst CreateIntroWrapper = (props: TypeSliderEventIntroProps) => {\n  const { headline, actions, isThemeDark } = props;\n\n  const createHeadline = () => {\n    if (!headline) {\n      console.warn('CreateIntroWrapper: headline element is required');\n      return null;\n    }\n\n    return new ElementBuilder(headline)\n      .withClassName('slider-event-intro-headline')\n      .withStyles({\n        element: {\n          ...typography.sans.larger,\n          color: token.color.black,\n          fontWeight: 700,\n          ...(isThemeDark && { color: token.color.white }),\n          '& + *': {\n            marginTop: token.spacing.min,\n            display: 'block',\n          },\n        },\n      })\n      .build();\n  };\n\n  const createActions = () => {\n    if (!actions) return null;\n\n    return new ElementBuilder(actions)\n      .withClassName('slider-event-intro-actions')\n      .withStyles({\n        element: {\n          marginTop: token.spacing.min,\n        },\n      })\n      .build();\n  };\n\n  return new ElementBuilder()\n    .withClassName('slider-event-intro-container')\n    .withStyles({\n      element: {\n        padding: `0 ${token.spacing.lg}`,\n        position: 'relative',\n        [`@container (max-width: ${TABLET - 1}px)`]: {\n          textAlign: 'center',\n        },\n        [`@container (min-width: ${TABLET}px)`]: {\n          padding: 0,\n          paddingRight: '24px',\n          width: '200px',\n        },\n        [`@container (min-width: ${LARGE}px)`]: {\n          width: '320px',\n        },\n      },\n    })\n    .withChild(createHeadline())\n    .withChild(createActions())\n    .build();\n};\n\nconst CreateScrollerWrapper = (props: TypeSliderEventScrollerProps) => {\n  const introductionWrapper = CreateIntroWrapper(props);\n  const datesContainer = CreateDatesContainer(props);\n\n  return new ElementBuilder()\n    .withClassName('slider-event-slide-scroller')\n    .withStyles({\n      element: {\n        position: 'relative',\n        zIndex: 99,\n        [`@container (min-width: ${TABLET}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n        },\n      },\n    })\n    .withChildren(introductionWrapper, datesContainer)\n    .build();\n};\n\nexport const createCompositeSliderEvents = (props: TypeSliderEventProps) =>\n  (() => {\n    const { isThemeDark, dataSlider } = props;\n    let currentPosition = 0;\n    let container!: HTMLElement;\n\n    const SetCountForward = () => (currentPosition = currentPosition + 1);\n    const SetCountBackward = () => (currentPosition = currentPosition - 1);\n    const SetButtonVisibility = () =>\n      ButtonVisibilityLogic({ container, dataSlider, currentPosition });\n    const size = () =>\n      SizeDatesElements({\n        container,\n        dataSlider,\n        SetButtonVisibility,\n      });\n    const SetJumpToDate = () =>\n      JumpToDate({ dataSlider, currentPosition });\n    const SetSlideDatesForward = () =>\n      EventSlideDates({ dataSlider, forward: true });\n    const SetSlideDatesBackwards = () =>\n      EventSlideDates({ dataSlider, forward: false });\n    const SetEventSwipe = () =>\n      EventSwipe({\n        container,\n        dataSlider,\n        currentPosition,\n        SetCountBackward,\n        SetCountForward,\n        SetSlideDatesBackwards,\n        SetSlideDatesForward,\n        SetButtonVisibility,\n      });\n    const EventResize = () => {\n      size();\n      SetJumpToDate();\n      SetButtonVisibility();\n    };\n    const load = () => {\n      EventResize();\n      SetEventSwipe();\n    };\n\n    const scrollerModel = CreateScrollerWrapper({\n      ...props,\n      SetCountForward,\n      SetCountBackward,\n      SetButtonVisibility,\n      SetSlideDatesBackwards,\n      SetSlideDatesForward,\n    });\n\n    const coverModel = new ElementBuilder()\n      .withClassName('slider-event-cover')\n      .withStyles({\n        element: {\n          display: 'block',\n          position: 'absolute',\n          width: '200vw',\n          height: '100%',\n          top: 0,\n          left: '-100vw',\n          backgroundColor: token.color.gray.lighter,\n          ...(isThemeDark && { backgroundColor: token.color.gray.darker }),\n          [`@container (min-width: ${TABLET}px)`]: {\n            width: '40vw',\n            left: 'calc(100% - 1px)',\n          },\n        },\n      })\n      .build();\n\n    const wrapperModel = new ElementBuilder()\n      .withClassName('slider-event-container-wrapper')\n      .withStyles({\n        element: {\n          padding: '24px 0',\n          backgroundColor: token.color.gray.lighter,\n          position: 'relative',\n          zIndex: 99,\n          ...(isThemeDark && { backgroundColor: token.color.gray.darker }),\n          '@container (max-width: 260px)': {\n            display: 'none',\n          },\n          [`@container (min-width: ${TABLET}px)`]: {\n            padding: '40px',\n          },\n        },\n      })\n      .withChildren(scrollerModel, coverModel)\n      .build();\n\n    const containerModel = new ElementBuilder()\n      .withClassName('slider-events-container')\n      .withStylesIf(!!isThemeDark, {\n        element: {\n          '& *': { color: '#fff !important' },\n        },\n      })\n      .ref((element) => {\n        container = element;\n      })\n      .withChild(wrapperModel)\n      .build();\n\n    const declarationModel = new ElementBuilder()\n      .withClassName('slider-events-declaration')\n      .withStyles({\n        element: {\n          containerType: 'inline-size',\n        },\n      })\n      .withChild(containerModel)\n      .withEvents({ load, size })\n      .build();\n\n    dataSlider.style.visibility = 'hidden';\n    window.addEventListener('resize', debounce(EventResize, 20));\n\n    return declarationModel;\n  })();\n"],"names":["iconArrowLeft","iconArrowRight"],"mappings":"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"}

package/dist/layout/image.d.ts

@@ -1,11 +1,6 @@
-export declare const layoutImage: {
-    CreateElement: ({ image, showCaption, }: {
-        image: HTMLImageElement | HTMLElement | string;
-        showCaption?: boolean;
-    }) => HTMLDivElement;
-    Styles: string;
-    Elements: {
-        container: string;
-    };
-};
+export declare const createLayoutImageContainer: ({ image, showCaption, isToggleCaption, }: {
+    image: HTMLImageElement;
+    showCaption?: boolean;
+    isToggleCaption?: boolean;
+}) => import('../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=image.d.ts.map

package/dist/layout/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../source/layout/image.ts"],"names":[],"mappings":"AAsGA,eAAO,MAAM,WAAW;6CAzCrB;QACD,KAAK,EAAE,gBAAgB,GAAG,WAAW,GAAG,MAAM,CAAC;QAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB;;;;;CA4CA,CAAC"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../source/layout/image.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,0BAA0B,GAAI,0CAIxC;IACD,KAAK,EAAE,gBAAgB,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,kFA4BA,CAAC"}

package/dist/layout/image.js

@@ -1,95 +1,34 @@
-import * as token from "@universityofmaryland/web-token-library";
-import * as typography from "@universityofmaryland/web-styles-library/typography";
-import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
-const ATTRIBUTE_CAPTION = "data-caption";
-const ATTRIBUTE_CREDIT = "data-credit";
-const ELEMENT_IMAGE_CONTAINER = "image-container";
-const STYLES_IMAGE_CONTAINER = `
-  .${ELEMENT_IMAGE_CONTAINER} {
-    position: relative;
-    display: inline-block;
-  }
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_IMAGE_CONTAINER} > span`]: typography.sans.min
-  }
-})}
-
-  .${ELEMENT_IMAGE_CONTAINER} > span {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    height: auto !important;
-    width: auto !important;
-    padding: ${token.spacing.min};
-    background-color: rgba(0, 0, 0, 0.5);
-    color: ${token.color.white};
-    z-index: 99;
-  }
-
-  .${ELEMENT_IMAGE_CONTAINER} > img {
-    display: block;
-  }
-
-  .${ELEMENT_IMAGE_CONTAINER} > a {
-    display: block;
-    line-height: 0;
-    overflow: hidden;
-  }
-
-  .${ELEMENT_IMAGE_CONTAINER} > a img {
-    object-fit: cover;
-    object-position: center;
-    transform: scale(1);
-    transition: transform 0.5s;
-    width: 100%;
-  }
-
-  .${ELEMENT_IMAGE_CONTAINER} > a:hover img,
-  .${ELEMENT_IMAGE_CONTAINER} > a:focus img {
-    transform: scale(1.025);
-  }
-`;
-const CreateImageContainer = ({
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { createCaption } from "../atomic/assets/image/caption.js";
+const createLayoutImageContainer = ({
   image,
-  showCaption = false
+  showCaption = false,
+  isToggleCaption = false
 }) => {
-  const container = document.createElement("div");
-  const isString = typeof image === "string";
-  const hasCaption = !isString && image.hasAttribute(ATTRIBUTE_CAPTION);
-  const hasCredit = !isString && image.hasAttribute(ATTRIBUTE_CREDIT);
-  const attributeCaption = hasCaption ? image.getAttribute(ATTRIBUTE_CAPTION) : null;
-  const attributeCredit = hasCredit ? image.getAttribute(ATTRIBUTE_CREDIT) : null;
-  container.classList.add(ELEMENT_IMAGE_CONTAINER);
-  if (isString) {
-    container.innerHTML = image;
-    return container;
-  }
-  if (showCaption) {
-    if (attributeCaption) {
-      console.log(
-        `Attribute "data-caption" is deprecated. Use "data-credit" instead. This attribute will be removed in version 2.0.`
-      );
+  const caption = showCaption ? createCaption.create(isToggleCaption, image) : null;
+  const children = [image, caption].filter((child) => child != null);
+  return new ElementBuilder().withClassName("image-container").withStyles({
+    element: {
+      position: "relative",
+      display: "inline-block",
+      "& > img": { display: "block", width: "100%", height: "100%" },
+      "& > a": {
+        display: "block",
+        lineHeight: 0,
+        overflow: "hidden",
+        "& img": {
+          objectFit: "cover",
+          objectPosition: "center",
+          transform: "scale(1)",
+          transition: "transform 0.5s",
+          width: "100%"
+        },
+        "&:hover img, &:focus img": { transform: "scale(1.025)" }
+      }
     }
-    if (attributeCaption || attributeCredit) {
-      const text = attributeCaption || attributeCredit;
-      const caption = document.createElement("span");
-      caption.textContent = text;
-      container.appendChild(caption);
-    }
-  }
-  container.appendChild(image);
-  return container;
-};
-const layoutImage = {
-  CreateElement: CreateImageContainer,
-  Styles: STYLES_IMAGE_CONTAINER,
-  Elements: {
-    container: ELEMENT_IMAGE_CONTAINER
-  }
+  }).withChildren(...children).build();
 };
 export {
-  layoutImage
+  createLayoutImageContainer
 };
 //# sourceMappingURL=image.js.map

package/dist/layout/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","sources":["../../source/layout/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\n\nconst ATTRIBUTE_CAPTION = 'data-caption';\nconst ATTRIBUTE_CREDIT = 'data-credit';\n\nconst ELEMENT_IMAGE_CONTAINER = 'image-container';\n\n// prettier-ignore\nconst STYLES_IMAGE_CONTAINER = `\n  .${ELEMENT_IMAGE_CONTAINER} {\n    position: relative;\n    display: inline-block;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_IMAGE_CONTAINER} > span`]: typography.sans.min,\n    },\n  })}\n\n  .${ELEMENT_IMAGE_CONTAINER} > span {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    height: auto !important;\n    width: auto !important;\n    padding: ${token.spacing.min};\n    background-color: rgba(0, 0, 0, 0.5);\n    color: ${token.color.white};\n    z-index: 99;\n  }\n\n  .${ELEMENT_IMAGE_CONTAINER} > img {\n    display: block;\n  }\n\n  .${ELEMENT_IMAGE_CONTAINER} > a {\n    display: block;\n    line-height: 0;\n    overflow: hidden;\n  }\n\n  .${ELEMENT_IMAGE_CONTAINER} > a img {\n    object-fit: cover;\n    object-position: center;\n    transform: scale(1);\n    transition: transform 0.5s;\n    width: 100%;\n  }\n\n  .${ELEMENT_IMAGE_CONTAINER} > a:hover img,\n  .${ELEMENT_IMAGE_CONTAINER} > a:focus img {\n    transform: scale(1.025);\n  }\n`;\n\nconst CreateImageContainer = ({\n  image,\n  showCaption = false,\n}: {\n  image: HTMLImageElement | HTMLElement | string;\n  showCaption?: boolean;\n}) => {\n  const container = document.createElement('div');\n  const isString = typeof image === 'string';\n  const hasCaption = !isString && image.hasAttribute(ATTRIBUTE_CAPTION);\n  const hasCredit = !isString && image.hasAttribute(ATTRIBUTE_CREDIT);\n  const attributeCaption = hasCaption\n    ? image.getAttribute(ATTRIBUTE_CAPTION)\n    : null;\n  const attributeCredit = hasCredit\n    ? image.getAttribute(ATTRIBUTE_CREDIT)\n    : null;\n\n  container.classList.add(ELEMENT_IMAGE_CONTAINER);\n\n  if (isString) {\n    container.innerHTML = image;\n    return container;\n  }\n\n  if (showCaption) {\n    if (attributeCaption) {\n      console.log(\n        `Attribute \"data-caption\" is deprecated. Use \"data-credit\" instead. This attribute will be removed in version 2.0.`,\n      );\n    }\n\n    if (attributeCaption || attributeCredit) {\n      const text = attributeCaption || attributeCredit;\n      const caption = document.createElement('span');\n      caption.textContent = text;\n      container.appendChild(caption);\n    }\n  }\n\n  container.appendChild(image);\n  return container;\n};\n\nexport const layoutImage = {\n  CreateElement: CreateImageContainer,\n  Styles: STYLES_IMAGE_CONTAINER,\n  Elements: {\n    container: ELEMENT_IMAGE_CONTAINER,\n  },\n};\n"],"names":[],"mappings":";;;AAIA,MAAM,oBAAoB;AAC1B,MAAM,mBAAmB;AAEzB,MAAM,0BAA0B;AAGhC,MAAM,yBAAyB;AAAA,KAC1B,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKxB,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,uBAAuB,SAAS,GAAG,WAAW,KAAK;AAAA,EAAA;AAE5D,CAAC,CAAC;AAAA;AAAA,KAEC,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMb,MAAM,QAAQ,GAAG;AAAA;AAAA,aAEnB,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,KAIzB,uBAAuB;AAAA;AAAA;AAAA;AAAA,KAIvB,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAQvB,uBAAuB;AAAA,KACvB,uBAAuB;AAAA;AAAA;AAAA;AAK5B,MAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA,cAAc;AAChB,MAGM;AACJ,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,WAAW,OAAO,UAAU;AAClC,QAAM,aAAa,CAAC,YAAY,MAAM,aAAa,iBAAiB;AACpE,QAAM,YAAY,CAAC,YAAY,MAAM,aAAa,gBAAgB;AAClE,QAAM,mBAAmB,aACrB,MAAM,aAAa,iBAAiB,IACpC;AACJ,QAAM,kBAAkB,YACpB,MAAM,aAAa,gBAAgB,IACnC;AAEJ,YAAU,UAAU,IAAI,uBAAuB;AAE/C,MAAI,UAAU;AACZ,cAAU,YAAY;AACtB,WAAO;AAAA,EACT;AAEA,MAAI,aAAa;AACf,QAAI,kBAAkB;AACpB,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAEA,QAAI,oBAAoB,iBAAiB;AACvC,YAAM,OAAO,oBAAoB;AACjC,YAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,cAAQ,cAAc;AACtB,gBAAU,YAAY,OAAO;AAAA,IAC/B;AAAA,EACF;AAEA,YAAU,YAAY,KAAK;AAC3B,SAAO;AACT;AAEO,MAAM,cAAc;AAAA,EACzB,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,WAAW;AAAA,EAAA;AAEf;"}
+{"version":3,"file":"image.js","sources":["../../source/layout/image.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { createCaption } from '../atomic/assets/image/caption';\n\nexport const createLayoutImageContainer = ({\n  image,\n  showCaption = false,\n  isToggleCaption = false,\n}: {\n  image: HTMLImageElement;\n  showCaption?: boolean;\n  isToggleCaption?: boolean;\n}) => {\n  const caption = showCaption ? createCaption.create(isToggleCaption, image) : null;\n  const children = [image, caption].filter((child) => child != null);\n\n  return new ElementBuilder()\n    .withClassName('image-container')\n    .withStyles({\n      element: {\n        position: 'relative',\n        display: 'inline-block',\n        '& > img': { display: 'block', width: '100%', height: '100%' },\n        '& > a': {\n          display: 'block',\n          lineHeight: 0,\n          overflow: 'hidden',\n          '& img': {\n            objectFit: 'cover',\n            objectPosition: 'center',\n            transform: 'scale(1)',\n            transition: 'transform 0.5s',\n            width: '100%',\n          },\n          '&:hover img, &:focus img': { transform: 'scale(1.025)' },\n        },\n      },\n    })\n    .withChildren(...children)\n    .build();\n};\n"],"names":[],"mappings":";;AAGO,MAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA,cAAc;AAAA,EACd,kBAAkB;AACpB,MAIM;AACJ,QAAM,UAAU,cAAc,cAAc,OAAO,iBAAiB,KAAK,IAAI;AAC7E,QAAM,WAAW,CAAC,OAAO,OAAO,EAAE,OAAO,CAAC,UAAU,SAAS,IAAI;AAEjE,SAAO,IAAI,eAAA,EACR,cAAc,iBAAiB,EAC/B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW,EAAE,SAAS,SAAS,OAAO,QAAQ,QAAQ,OAAA;AAAA,MACtD,SAAS;AAAA,QACP,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,SAAS;AAAA,UACP,WAAW;AAAA,UACX,gBAAgB;AAAA,UAChB,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,OAAO;AAAA,QAAA;AAAA,QAET,4BAA4B,EAAE,WAAW,eAAA;AAAA,MAAe;AAAA,IAC1D;AAAA,EACF,CACD,EACA,aAAa,GAAG,QAAQ,EACxB,MAAA;AACL;"}

package/dist/layout/index.d.ts

@@ -1,5 +1,5 @@
-export { layoutImage as Image } from './image';
 export { createLayoutStacked as stacked } from './stacked';
+export { createLayoutImageContainer } from './image';
 export { createLayoutGrid as grid } from './grid';
 export { createLayoutGridGap as gridGap } from './grid-gap';
 export { createLayoutGridBorder as gridBorder } from './grid-border';

package/dist/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../source/layout/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,EAAE,mBAAmB,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC3D,OAAO,EAAE,gBAAgB,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,mBAAmB,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,sBAAsB,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,sBAAsB,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../source/layout/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC3D,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,gBAAgB,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,mBAAmB,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,sBAAsB,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,sBAAsB,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/layout.js

@@ -1,11 +1,11 @@
-import { layoutImage } from "./layout/image.js";
 import { createLayoutStacked } from "./layout/stacked.js";
+import { createLayoutImageContainer } from "./layout/image.js";
 import { createLayoutGrid } from "./layout/grid.js";
 import { createLayoutGridGap } from "./layout/grid-gap.js";
 import { createLayoutGridBorder } from "./layout/grid-border.js";
 import { createLayoutGridOffset } from "./layout/grid-offset.js";
 export {
-  layoutImage as Image,
+  createLayoutImageContainer,
   createLayoutGrid as grid,
   createLayoutGridBorder as gridBorder,
   createLayoutGridGap as gridGap,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universityofmaryland/web-elements-library",
-  "version": "1.6.17",
+  "version": "1.7.0",
   "description": "UMD Web Elements",
   "type": "module",
   "main": "dist/index.js",
@@ -39,11 +39,11 @@
   },
   "dependencies": {
     "@types/postcss-js": "^4.0.4",
-    "@universityofmaryland/web-builder-library": "^1.0.3",
-    "@universityofmaryland/web-styles-library": "^1.8.11",
-    "@universityofmaryland/web-token-library": "^1.0.2",
-    "@universityofmaryland/web-utilities-library": "^1.0.5",
-    "@universityofmaryland/web-icons-library": "^1.0.4"
+    "@universityofmaryland/web-icons-library": "^1.0.4",
+    "@universityofmaryland/web-token-library": "^1.0.3",
+    "@universityofmaryland/web-utilities-library": "^1.0.6",
+    "@universityofmaryland/web-builder-library": "^1.0.4",
+    "@universityofmaryland/web-styles-library": "^1.8.14"
   },
   "peerDependencies": {
     "@universityofmaryland/web-builder-library": "^1.0.0",

package/dist/composite/carousel/elements/blocks.d.ts

@@ -1,42 +0,0 @@
-type TypeDisplayLogic = {
-    mobileCount: number;
-    mobileBreakpoint: number;
-    tabletCount: number;
-    tabletBreakpoint: number;
-    desktopCount: number;
-    desktopBreakpoint: number;
-    maxCount: number;
-    blockGap: number;
-    hasRightButton: boolean;
-    hasLeftButton: boolean;
-    showMobileHint: boolean;
-    showHint: boolean;
-    fullScreenCallback?: (index: number) => void;
-};
-type TypeDisplayLogicProps = Partial<TypeDisplayLogic>;
-type TypeAnimationCarouselBlockProps = {
-    slide: HTMLElement;
-    shadowRef?: HTMLElement;
-    blocks: HTMLElement[];
-    overwriteDisplayLogic?: TypeDisplayLogicProps;
-};
-export declare const createCompositeCarouselBlocks: {
-    CreateElement: (props: TypeAnimationCarouselBlockProps) => {
-        element: HTMLDivElement;
-        events: {
-            resize: () => void;
-            load: () => void;
-        };
-    };
-    Styles: string;
-    Elements: {
-        declaration: string;
-        container: string;
-        containerSingleBlock: string;
-        button: string;
-        nextButton: string;
-        previousButton: string;
-    };
-};
-export {};
-//# sourceMappingURL=blocks.d.ts.map

package/dist/composite/carousel/elements/blocks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/blocks.ts"],"names":[],"mappings":"AAOA,KAAK,gBAAgB,GAAG;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,KAAK,qBAAqB,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAAC;AAEvD,KAAK,+BAA+B,GAAG;IACrC,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C,CAAC;AA6kBF,eAAO,MAAM,6BAA6B;2BA/PC,+BAA+B;;;;;;;;;;;;;;;;CA0QzE,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"blocks.js","sources":["../../../../source/composite/carousel/elements/blocks.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as element from '@universityofmaryland/web-styles-library/element';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { setupSwipeDetection } from '@universityofmaryland/web-utilities-library/events';\nimport { parsePixelValue } from '@universityofmaryland/web-utilities-library/styles';\nimport { arrow_right as iconArrowRight } from '@universityofmaryland/web-icons-library/arrows';\n\ntype TypeDisplayLogic = {\n  mobileCount: number;\n  mobileBreakpoint: number;\n  tabletCount: number;\n  tabletBreakpoint: number;\n  desktopCount: number;\n  desktopBreakpoint: number;\n  maxCount: number;\n  blockGap: number;\n  hasRightButton: boolean;\n  hasLeftButton: boolean;\n  showMobileHint: boolean;\n  showHint: boolean;\n  fullScreenCallback?: (index: number) => void;\n};\n\ntype TypeDisplayLogicProps = Partial<TypeDisplayLogic>;\n\ntype TypeAnimationCarouselBlockProps = {\n  slide: HTMLElement;\n  shadowRef?: HTMLElement;\n  blocks: HTMLElement[];\n  overwriteDisplayLogic?: TypeDisplayLogicProps;\n};\n\ntype TypeHelpers = {\n  displayLogic: Record<string, any>;\n  GetElements: {\n    container: () => HTMLDivElement;\n    slide: () => HTMLElement;\n    blocks: () => HTMLElement[];\n  };\n  GetViewOptions: {\n    isTabletView: () => boolean;\n    showCount: () => number;\n    shouldShowMobileHint: () => boolean;\n    shouldShowHint: () => boolean;\n    shouldShowLeftButton: () => boolean;\n    shouldShowRightButton: () => boolean;\n  };\n  GetSizes: {\n    carouselWidthBasedOnBlock: ({ count }: { count: number }) => number;\n  };\n  SetLayout: {\n    blockWidth: ({ count }: { count: number }) => void;\n    carouselWidth: ({ count }: { count: number }) => void;\n  };\n};\n\ntype TypeEventScroll = TypeHelpers & {\n  isDirectionRight?: boolean;\n};\n\nconst fullScreenClassName = element.action.button.fullScreen.className;\n\nconst ATTRIBUTE_SINGLE_BLOCK = 'single';\nconst ANIMATION_DURATION = 750;\nconst HINT_MULTIPLER_MOBILE_SIZING = 0.2;\nconst HINT_MULTIPLER_SIZING = 0.6;\n\nconst IS_SINGLE_BLOCK = `[${ATTRIBUTE_SINGLE_BLOCK}]`;\n\nconst ELEMENT_NAME = 'umd-element-animation-carousel-block';\nconst ELEMENT_ANIMATION_CAROUSEL_DECLARATION =\n  'animation-carousel-block-declaration';\nconst ELEMENT_ANIMATION_CAROUSEL_CONTAINER =\n  'animation-carousel-block-container';\nconst ELEMENT_ANIMATION_CAROUSEL_WRAPPER = 'animation-carousel-block-wrapper';\nconst ELEMENT_ANIMATION_CAROUSEL_BUTTON = `animation-carousel-block-button`;\nconst ELEMENT_ANIMATION_CAROUSEL_NEXT = `animation-carousel-block-button-next`;\nconst ELEMENT_ANIMATION_CAROUSEL_PREVIOUS = `animation-carousel-block-button-previous`;\n\nconst OVERWRITE_SINGLE_BLOCK_CONTAINER = `.${ELEMENT_ANIMATION_CAROUSEL_CONTAINER}${IS_SINGLE_BLOCK}`;\n\n// prettier-ignore\nconst ButtonStyles = `\n  .${ELEMENT_ANIMATION_CAROUSEL_BUTTON} {\n    background-color: ${token.color.red};\n    padding: 10px ${token.spacing.xs};\n    position: absolute;\n    z-index: 9999;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    display: none;\n  }\n\n  .${ELEMENT_ANIMATION_CAROUSEL_BUTTON}:disabled {\n    opacity: 0.5;\n  }\n\n  .${ELEMENT_ANIMATION_CAROUSEL_BUTTON} svg {\n    width: 20px;\n    height: 20px;\n    fill: ${token.color.white};\n  }\n\n  .${ELEMENT_ANIMATION_CAROUSEL_PREVIOUS} svg {\n    transform: rotate(180deg);\n  }\n`;\n\n// prettier-ignore\nconst ContainerStyles = `\n  .${ELEMENT_ANIMATION_CAROUSEL_CONTAINER} {\n    position: relative;\n  }\n\n  .${ELEMENT_ANIMATION_CAROUSEL_WRAPPER} {\n    overflow: hidden;\n    padding-right: 0;\n    width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_CARDS_ELEMENT = `\n  .${ELEMENT_ANIMATION_CAROUSEL_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n    width: 100%;\n  }\n\n  ${ContainerStyles}\n  ${ButtonStyles}\n`;\n\nconst EventScrollCarousel = (props: TypeEventScroll) => {\n  const {\n    GetElements,\n    GetViewOptions,\n    GetSizes,\n    SetLayout,\n    isDirectionRight = true,\n    displayLogic,\n  } = props;\n  const carouselSlider = GetElements.slide();\n  const slotContent = Array.from(\n    carouselSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n\n  const isShowMobileHint = GetViewOptions.shouldShowMobileHint();\n  const isShowHint = GetViewOptions.shouldShowHint();\n  const count = GetViewOptions.showCount();\n\n  // Force layout recalculation to get accurate measurements\n  void slotContent[0]?.offsetHeight;\n  const elementSize = slotContent[0]?.offsetWidth || 0;\n  const carouselSize = GetSizes.carouselWidthBasedOnBlock({ count });\n  const { fullScreenCallback } = displayLogic;\n\n  if (!elementSize) return;\n\n  const elementSizeWithSpace = elementSize;\n  const temporaryCarouselSize = carouselSize + elementSizeWithSpace;\n\n  const cloneReferenceEvents = ({\n    orginal,\n    clone,\n  }: {\n    orginal: HTMLElement;\n    clone: HTMLElement;\n  }) => {\n    const orginalFullScreen = orginal.querySelector(`.${fullScreenClassName}`);\n    const cloneFullScreen = clone.querySelector(`.${fullScreenClassName}`);\n\n    if (orginalFullScreen && cloneFullScreen) {\n      const indexAttr = orginalFullScreen.getAttribute('data-index');\n      const index = indexAttr ? parseInt(indexAttr) : 0;\n      cloneFullScreen.addEventListener('click', () =>\n        fullScreenCallback(index),\n      );\n    }\n  };\n\n  const animateRight = () => {\n    const firstElement = slotContent[0];\n    const clonedElement = firstElement.cloneNode(true) as HTMLDivElement;\n    const upcomingElement = slotContent[count];\n    const hintElement = slotContent[count + 1];\n\n    // Prepare elements before animation\n    upcomingElement.style.display = 'block';\n    cloneReferenceEvents({ orginal: firstElement, clone: clonedElement });\n\n    if (hintElement && (isShowMobileHint || isShowHint)) {\n      hintElement.style.display = 'block';\n    }\n\n    // Add clone but keep it hidden initially\n    carouselSlider.appendChild(clonedElement);\n    clonedElement.style.display = 'none';\n\n    // Set width first and force layout recalculation\n    carouselSlider.style.width = `${temporaryCarouselSize}px`;\n    void carouselSlider.offsetHeight;\n\n    // Use requestAnimationFrame for smoother animation timing\n    requestAnimationFrame(() => {\n      carouselSlider.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;\n      carouselSlider.style.transform = `translateX(-${elementSizeWithSpace}px)`;\n\n      setTimeout(() => {\n        carouselSlider.removeChild(firstElement);\n        SetLayout.carouselWidth({ count });\n      }, ANIMATION_DURATION);\n    });\n  };\n\n  const animateLeft = () => {\n    const lastElement = slotContent[slotContent.length - 1];\n    const removedElement = slotContent[count - 1];\n    const hintElementSibiling = slotContent[count];\n    const clonedElement = lastElement.cloneNode(true) as HTMLDivElement;\n\n    // Prepare clone with proper event handlers\n    cloneReferenceEvents({ orginal: lastElement, clone: clonedElement });\n\n    // Set width first before DOM manipulation\n    carouselSlider.style.width = `${temporaryCarouselSize}px`;\n\n    // Add cloned element at the beginning\n    carouselSlider.prepend(clonedElement);\n    clonedElement.style.display = 'block';\n\n    // Set initial transform position\n    carouselSlider.style.transform = `translateX(-${elementSizeWithSpace}px)`;\n\n    // Force layout recalculation\n    void carouselSlider.offsetHeight;\n\n    // Use requestAnimationFrame for smoother animation timing\n    requestAnimationFrame(() => {\n      carouselSlider.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;\n      carouselSlider.style.transform = `translateX(0)`;\n\n      setTimeout(() => {\n        carouselSlider.removeChild(lastElement);\n\n        if (!isShowMobileHint && !isShowHint) {\n          removedElement.style.display = 'none';\n        }\n\n        if (isShowMobileHint || isShowHint) {\n          hintElementSibiling.style.display = 'none';\n        }\n\n        SetLayout.carouselWidth({ count });\n      }, ANIMATION_DURATION);\n    });\n  };\n\n  isDirectionRight ? animateRight() : animateLeft();\n};\n\nconst EventSwipe = (props: TypeHelpers) => {\n  const { GetElements } = props;\n  const container = GetElements.container();\n\n  const swipes = (isrightswipe: Boolean) => {\n    if (!isrightswipe) {\n      EventScrollCarousel(props);\n    } else {\n      EventScrollCarousel({ ...props, isDirectionRight: false });\n    }\n  };\n\n  setupSwipeDetection({ container, callback: swipes });\n};\n\nconst ButtonVisibility = (props: TypeHelpers) => {\n  const { GetElements, GetViewOptions } = props;\n  const prevousButton = GetElements.container().querySelector(\n    `.${ELEMENT_ANIMATION_CAROUSEL_PREVIOUS}`,\n  ) as HTMLButtonElement;\n  const nextButton = GetElements.container().querySelector(\n    `.${ELEMENT_ANIMATION_CAROUSEL_NEXT}`,\n  ) as HTMLButtonElement;\n  const buttons = [nextButton, prevousButton];\n\n  const shouldShowLeftButton = GetViewOptions.shouldShowLeftButton();\n  const shouldShowRightButton = GetViewOptions.shouldShowRightButton();\n  const showCount = GetViewOptions.showCount();\n  const cardsTotal = GetElements.blocks().length;\n  const shouldHideLeftButton = showCount > 1 && !shouldShowLeftButton;\n  const shouldHideRightButton = showCount > 1 && !shouldShowRightButton;\n\n  if (cardsTotal === showCount) {\n    buttons.forEach((button) => (button.style.display = 'none'));\n    return;\n  }\n\n  if (shouldHideLeftButton) {\n    prevousButton.style.display = 'none';\n  } else {\n    prevousButton.style.display = 'block';\n  }\n\n  if (shouldHideRightButton) {\n    nextButton.style.display = 'none';\n  } else {\n    nextButton.style.display = 'block';\n  }\n};\n\nconst ButtonDisplay = (props: TypeHelpers) => {\n  const { GetElements } = props;\n  const prevousButton = GetElements.container().querySelector(\n    `.${ELEMENT_ANIMATION_CAROUSEL_PREVIOUS}`,\n  ) as HTMLButtonElement;\n  const nextButton = GetElements.container().querySelector(\n    `.${ELEMENT_ANIMATION_CAROUSEL_NEXT}`,\n  ) as HTMLButtonElement;\n\n  prevousButton.setAttribute('aria-label', 'Previous');\n  nextButton.setAttribute('aria-label', 'Next');\n\n  ButtonVisibility(props);\n};\n\nconst CreateButton = ({\n  EventMoveForward,\n  EventMoveBackward,\n  isRight = true,\n}: {\n  EventMoveForward: () => void;\n  EventMoveBackward: () => void;\n  isRight?: boolean;\n}) => {\n  const button = document.createElement('button');\n  button.setAttribute('type', 'button');\n  button.setAttribute('aria-label', 'Next');\n  button.classList.add(ELEMENT_ANIMATION_CAROUSEL_BUTTON);\n  button.innerHTML = iconArrowRight;\n\n  if (isRight) {\n    button.classList.add(ELEMENT_ANIMATION_CAROUSEL_NEXT);\n  }\n\n  if (!isRight) {\n    button.setAttribute('aria-label', 'Previous');\n    button.classList.add(ELEMENT_ANIMATION_CAROUSEL_PREVIOUS);\n  }\n\n  button.addEventListener('click', () => {\n    if (isRight) EventMoveForward();\n    if (!isRight) EventMoveBackward();\n    button.disabled = true;\n\n    setTimeout(() => {\n      button.disabled = false;\n    }, ANIMATION_DURATION);\n  });\n\n  return button;\n};\n\nconst CreateCarouselCardsElement = (props: TypeAnimationCarouselBlockProps) =>\n  (() => {\n    const { slide, shadowRef, blocks, overwriteDisplayLogic } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n    const displayLogic: TypeDisplayLogic = {\n      mobileBreakpoint: 550,\n      tabletBreakpoint: 768,\n      desktopBreakpoint: 1000,\n      mobileCount: 1,\n      tabletCount: 2,\n      desktopCount: 3,\n      maxCount: 4,\n      blockGap: parsePixelValue(token.spacing.lg),\n      hasRightButton: true,\n      hasLeftButton: true,\n      showMobileHint: true,\n      showHint: true,\n      fullScreenCallback: undefined,\n    };\n    let blockWidth = 0;\n    let hasInteractionOccured = false;\n\n    if (overwriteDisplayLogic) {\n      Object.keys(overwriteDisplayLogic).forEach((key) => {\n        const refKey = key as keyof typeof displayLogic;\n        const refValue = overwriteDisplayLogic[refKey] as never;\n\n        displayLogic[refKey] = refValue;\n      });\n    }\n\n    const GetElements = {\n      container: () => container,\n      slide: () => slide,\n      blocks: () => blocks,\n    };\n\n    const GetViewOptions = {\n      isMobileView: () => {\n        return GetSizes.containerWidth() <= displayLogic.mobileBreakpoint;\n      },\n      isTabletView: () => {\n        return (\n          GetSizes.containerWidth() > displayLogic.mobileBreakpoint &&\n          GetSizes.containerWidth() <= displayLogic.tabletBreakpoint\n        );\n      },\n\n      isDesktopView: () => {\n        return (\n          GetSizes.containerWidth() > displayLogic.tabletBreakpoint &&\n          GetSizes.containerWidth() <= displayLogic.desktopBreakpoint\n        );\n      },\n      isHighView: () => {\n        return GetSizes.containerWidth() > displayLogic.desktopBreakpoint;\n      },\n      showCount: () => {\n        const isMobile = GetViewOptions.isMobileView();\n        const isTablet = GetViewOptions.isTabletView();\n        const isDesktop = GetViewOptions.isDesktopView();\n        const isHighDef = GetViewOptions.isHighView();\n        let count = 1;\n\n        if (isMobile) count = displayLogic.mobileCount;\n        if (isTablet) count = displayLogic.tabletCount;\n        if (isDesktop) count = displayLogic.desktopCount;\n        if (isHighDef) count = displayLogic.maxCount;\n\n        return count;\n      },\n      shouldShowMobileHint: () => {\n        const isMobileView = GetViewOptions.isMobileView();\n        const isShowMobileHint = displayLogic.showMobileHint;\n        const isShowHint = displayLogic.showHint;\n\n        return (\n          (isShowMobileHint && isMobileView) || (isShowHint && isMobileView)\n        );\n      },\n      shouldShowHint: () => {\n        return displayLogic.showHint && !GetViewOptions.isMobileView();\n      },\n      shouldShowLeftButton: () => {\n        return displayLogic.hasLeftButton || hasInteractionOccured;\n      },\n      shouldShowRightButton: () => {\n        return displayLogic.hasRightButton || hasInteractionOccured;\n      },\n    };\n\n    const GetSizes = {\n      mobileHintWidth: ({ count }: { count: number }) => {\n        const containerWidth = container.offsetWidth;\n        return (containerWidth / count) * HINT_MULTIPLER_MOBILE_SIZING;\n      },\n      hintWidth: ({ count }: { count: number }) => {\n        const containerWidth = container.offsetWidth;\n        return (containerWidth / count) * HINT_MULTIPLER_SIZING;\n      },\n      carouselWidthBasedOnBlock: ({ count }: { count: number }) => {\n        const elementSize = blockWidth;\n        const isShowMobileHint = GetViewOptions.shouldShowMobileHint();\n        const isShowHint = GetViewOptions.shouldShowHint();\n\n        if (!elementSize) return window.innerWidth;\n\n        if (isShowMobileHint || isShowHint) {\n          return elementSize * (count + 1);\n        }\n\n        return elementSize * count;\n      },\n      containerWidth: () => {\n        return container.offsetWidth;\n      },\n    };\n\n    const SetLayout = {\n      blockWidth: () =>\n        blocks.forEach((block) => (block.style.width = `${blockWidth}px`)),\n      carouselWidth: ({ count }: { count: number }) => {\n        const elementSize = GetSizes.carouselWidthBasedOnBlock({ count });\n\n        slide.style.width = `${elementSize}px`;\n        slide.style.transition = 'none';\n        slide.style.transform = 'translateX(0)';\n      },\n      blockDisplay: ({ count }: { count: number }) => {\n        const containerBlocks = Array.from(\n          slide.querySelectorAll(':scope > *'),\n        ) as HTMLElement[];\n        const isHint = GetViewOptions.shouldShowHint();\n        const isShowMobileHint = GetViewOptions.shouldShowMobileHint();\n\n        containerBlocks.forEach((block, index) => {\n          if (index >= count) {\n            block.style.display = 'none';\n          } else {\n            block.style.display = 'block';\n          }\n        });\n\n        if (isShowMobileHint) containerBlocks[1].style.display = 'block';\n        if (isHint) containerBlocks[count].style.display = 'block';\n      },\n    };\n\n    const Event = {\n      helpers: {\n        displayLogic,\n        GetElements,\n        GetViewOptions,\n        GetSizes,\n        SetLayout,\n      },\n      resize: () => {\n        const count = GetViewOptions.showCount();\n        const cacluateBlockWidth = ({ count }: { count: number }) => {\n          const isShowMobileHint = GetViewOptions.shouldShowMobileHint();\n          const isShowHint = GetViewOptions.shouldShowHint();\n          const containerWidth = container.offsetWidth;\n\n          if (isShowMobileHint || isShowHint) {\n            let hintElementSize = GetSizes.hintWidth({ count });\n\n            if (isShowMobileHint) {\n              hintElementSize = GetSizes.mobileHintWidth({ count });\n            }\n\n            blockWidth = (containerWidth - hintElementSize) / count;\n          } else {\n            blockWidth = containerWidth / count;\n          }\n        };\n\n        cacluateBlockWidth({ count });\n        SetLayout.blockWidth();\n        SetLayout.blockDisplay({ count });\n        SetLayout.carouselWidth({ count });\n        ButtonDisplay({ ...Event.helpers });\n\n        if (count === 1) {\n          container.setAttribute(ATTRIBUTE_SINGLE_BLOCK, '');\n        } else {\n          container.removeAttribute(ATTRIBUTE_SINGLE_BLOCK);\n        }\n      },\n      load: () => {\n        slide.style.display = 'flex';\n        slide.style.gap = `${displayLogic.blockGap}px`;\n\n        Event.resize();\n        EventSwipe({ ...Event.helpers });\n      },\n      forward: () => {\n        hasInteractionOccured = true;\n        EventScrollCarousel({\n          ...Event.helpers,\n        });\n        ButtonVisibility({ ...Event.helpers });\n      },\n      backward: () => {\n        hasInteractionOccured = true;\n        EventScrollCarousel({\n          ...Event.helpers,\n          isDirectionRight: false,\n        });\n        ButtonVisibility({ ...Event.helpers });\n      },\n    };\n\n    container.appendChild(\n      CreateButton({\n        EventMoveForward: Event.forward,\n        EventMoveBackward: Event.backward,\n      }),\n    );\n\n    container.appendChild(\n      CreateButton({\n        EventMoveForward: Event.forward,\n        EventMoveBackward: Event.backward,\n        isRight: false,\n      }),\n    );\n\n    wrapper.classList.add(ELEMENT_ANIMATION_CAROUSEL_WRAPPER);\n\n    if (shadowRef) {\n      wrapper.appendChild(shadowRef);\n    } else {\n      blocks.forEach((block) => slide.appendChild(block));\n      wrapper.appendChild(slide);\n    }\n\n    container.classList.add(ELEMENT_ANIMATION_CAROUSEL_CONTAINER);\n    container.appendChild(wrapper);\n\n    declaration.classList.add(ELEMENT_ANIMATION_CAROUSEL_DECLARATION);\n    declaration.appendChild(container);\n\n    window.addEventListener('resize', debounce(Event.resize, 30));\n\n    return {\n      element: declaration,\n      events: {\n        resize: Event.resize,\n        load: Event.load,\n      },\n    };\n  })();\n\nexport const createCompositeCarouselBlocks = {\n  CreateElement: CreateCarouselCardsElement,\n  Styles: STYLES_CAROUSEL_CARDS_ELEMENT,\n  Elements: {\n    declaration: ELEMENT_ANIMATION_CAROUSEL_DECLARATION,\n    container: ELEMENT_ANIMATION_CAROUSEL_CONTAINER,\n    containerSingleBlock: OVERWRITE_SINGLE_BLOCK_CONTAINER,\n    button: ELEMENT_ANIMATION_CAROUSEL_BUTTON,\n    nextButton: ELEMENT_ANIMATION_CAROUSEL_NEXT,\n    previousButton: ELEMENT_ANIMATION_CAROUSEL_PREVIOUS,\n  },\n};\n"],"names":["element","iconArrowRight","count"],"mappings":"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"}

package/dist/composite/carousel/wide/_elementModel.d.ts

@@ -1,18 +0,0 @@
-import { UMDElement } from '../../../_types';
-interface ElementWithRefsProps<T extends Record<string, any>> {
-    className: string;
-    element?: HTMLElement;
-    children?: UMDElement[];
-    elementStyles?: any;
-    attributes?: Record<string, string>[];
-    refs: T;
-}
-export interface ElementWithRefsReturn<T extends Record<string, any>> {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-    refs: T;
-}
-export declare function createElementWithRefs<T extends Record<string, any>>(props: ElementWithRefsProps<T>): ElementWithRefsReturn<T>;
-export {};
-//# sourceMappingURL=_elementModel.d.ts.map

package/dist/composite/carousel/wide/_elementModel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"_elementModel.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/wide/_elementModel.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,UAAU,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAC1D,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IACtC,IAAI,EAAE,CAAC,CAAC;CACT;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAClE,OAAO,EAAE,WAAW,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,CAAC,CAAC;CACT;AAED,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACjE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAC7B,qBAAqB,CAAC,CAAC,CAAC,CA+B1B"}

package/dist/composite/carousel/wide/_elementModel.js

@@ -1,29 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-function createElementWithRefs(props) {
-  const { refs, element, children, elementStyles, attributes, className } = props;
-  const builder = element ? new ElementBuilder(element) : new ElementBuilder();
-  builder.withClassName(className);
-  if (children) {
-    builder.withChildren(...children);
-  }
-  if (elementStyles) {
-    builder.withStyles(elementStyles);
-  }
-  if (attributes) {
-    attributes.forEach((attr) => {
-      const [key, value] = Object.entries(attr)[0];
-      builder.withAttribute(key, value);
-    });
-  }
-  const component = builder.build();
-  return {
-    element: component.element,
-    className,
-    styles: component.styles,
-    refs
-  };
-}
-export {
-  createElementWithRefs
-};
-//# sourceMappingURL=_elementModel.js.map

package/dist/composite/carousel/wide/_elementModel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_elementModel.js","sources":["../../../../source/composite/carousel/wide/_elementModel.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { type UMDElement } from '../../../_types';\n\ninterface ElementWithRefsProps<T extends Record<string, any>> {\n  className: string;\n  element?: HTMLElement;\n  children?: UMDElement[];\n  elementStyles?: any;\n  attributes?: Record<string, string>[];\n  refs: T;\n}\n\nexport interface ElementWithRefsReturn<T extends Record<string, any>> {\n  element: HTMLElement;\n  className: string;\n  styles: string;\n  refs: T;\n}\n\nexport function createElementWithRefs<T extends Record<string, any>>(\n  props: ElementWithRefsProps<T>,\n): ElementWithRefsReturn<T> {\n  const { refs, element, children, elementStyles, attributes, className } =\n    props;\n\n  const builder = element ? new ElementBuilder(element) : new ElementBuilder();\n\n  builder.withClassName(className);\n\n  if (children) {\n    builder.withChildren(...children);\n  }\n\n  if (elementStyles) {\n    builder.withStyles(elementStyles);\n  }\n\n  if (attributes) {\n    attributes.forEach((attr) => {\n      const [key, value] = Object.entries(attr)[0];\n      builder.withAttribute(key, value);\n    });\n  }\n\n  const component = builder.build();\n\n  return {\n    element: component.element,\n    className,\n    styles: component.styles,\n    refs,\n  };\n}\n"],"names":[],"mappings":";AAmBO,SAAS,sBACd,OAC0B;AAC1B,QAAM,EAAE,MAAM,SAAS,UAAU,eAAe,YAAY,cAC1D;AAEF,QAAM,UAAU,UAAU,IAAI,eAAe,OAAO,IAAI,IAAI,eAAA;AAE5D,UAAQ,cAAc,SAAS;AAE/B,MAAI,UAAU;AACZ,YAAQ,aAAa,GAAG,QAAQ;AAAA,EAClC;AAEA,MAAI,eAAe;AACjB,YAAQ,WAAW,aAAa;AAAA,EAClC;AAEA,MAAI,YAAY;AACd,eAAW,QAAQ,CAAC,SAAS;AAC3B,YAAM,CAAC,KAAK,KAAK,IAAI,OAAO,QAAQ,IAAI,EAAE,CAAC;AAC3C,cAAQ,cAAc,KAAK,KAAK;AAAA,IAClC,CAAC;AAAA,EACH;AAEA,QAAM,YAAY,QAAQ,MAAA;AAE1B,SAAO;AAAA,IACL,SAAS,UAAU;AAAA,IACnB;AAAA,IACA,QAAQ,UAAU;AAAA,IAClB;AAAA,EAAA;AAEJ;"}