@universityofmaryland/web-elements-library 1.6.17 → 1.7.0

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-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 const createCompositeCarouselImage = (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.js","sources":["../../../../source/composite/carousel/elements/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-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 { createCarouselNavButton, buttonColorsOnGray } from './nav-button';\n\ntype TypeCarouselImageProps = {\n  slides: HTMLElement[];\n  callback?: (index: number) => void;\n  maxHeight?: number;\n  isThemeDark?: boolean;\n  includeButtonWrapper?: boolean;\n};\n\ntype CarouselImageModel = {\n  element: HTMLElement;\n  styles: string;\n  buttons: { prev: { element: HTMLElement; styles: string }; next: { element: HTMLElement; styles: string } };\n  events: {\n    Load: () => void;\n    EventMoveTo: (index: number) => void;\n    EventResize: () => void;\n    EventSlideLeft: () => void;\n    EventSlideRight: () => void;\n  };\n};\n\nconst ANIMATION_DURATION = 500;\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active-slide';\nconst BUTTON_CLASS_NEXT = 'carousel-slider-button--next';\nconst BUTTON_CLASS_PREV = 'carousel-slider-button--prev';\n\nconst CreateButton = ({\n  EventSlide,\n  isRight = true,\n  isThemeDark,\n}: {\n  EventSlide: ({ forward }: { forward?: boolean }) => void;\n  isRight?: boolean;\n  isThemeDark?: boolean;\n}) => {\n  const buttonClassName = isRight ? BUTTON_CLASS_NEXT : BUTTON_CLASS_PREV;\n  const buttonDirection = isRight ? 'next' : 'prev';\n\n  return createCarouselNavButton({\n    className: buttonClassName,\n    direction: buttonDirection,\n  })\n    .withStyles({\n      element: {\n        position: 'relative',\n        top: 'auto',\n        left: 'auto',\n        right: 'auto',\n        zIndex: 99,\n        ...buttonColorsOnGray(isThemeDark),\n        [`@media (${token.media.queries.desktop.min})`]: {\n          position: 'absolute',\n          top: '50%',\n          left: 0,\n          right: 'auto',\n          ...(isRight && {\n            left: 'auto',\n            right: 0,\n          }),\n        },\n      },\n    })\n    .on('click', (event) => {\n      const button = event.currentTarget as HTMLButtonElement;\n      event.stopPropagation();\n      if (isRight) {\n        EventSlide({});\n      } else {\n        EventSlide({ forward: false });\n      }\n      button.disabled = true;\n      setTimeout(() => {\n        button.disabled = false;\n      }, ANIMATION_DURATION + 100);\n    })\n    .build();\n};\n\nconst CreateSlide = ({ slide }: { slide: HTMLElement }) => {\n  return new ElementBuilder(slide)\n    .withClassName('carousel-image-slide')\n    .withStyles({\n      element: {\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        '&[data-active-slide]': {\n          zIndex: 99,\n          left: 0,\n          display: 'block',\n          transform: 'translateX(0)',\n        },\n      },\n    })\n    .build();\n};\n\nconst SetCarouselSize = ({\n  slider,\n  activeSlide,\n  maxHeight,\n}: {\n  slider: HTMLElement;\n  activeSlide: HTMLElement;\n  maxHeight?: number;\n}) => {\n  const windowHeight = window.innerHeight - 48;\n  const children = Array.from(activeSlide.children) as HTMLDivElement[];\n  const sliderContainer = slider.parentElement;\n  const sliderWrapper = sliderContainer && sliderContainer.parentElement;\n  const buttonRoot = sliderWrapper || sliderContainer;\n  const buttons = buttonRoot\n    ? (Array.from(buttonRoot.querySelectorAll(`.${BUTTON_CLASS_PREV}, .${BUTTON_CLASS_NEXT}`)) as HTMLButtonElement[])\n    : [];\n  const img = activeSlide.querySelector('img') as HTMLImageElement;\n  const maxWindowHeight = Math.min(maxHeight || windowHeight, windowHeight);\n  const imageSize = getResponsiveImageSize({\n    image: img,\n    parentNode: slider,\n    maxWindowHeight,\n  });\n  const imageContainer = children.find((child) => child.contains(img)) as HTMLElement;\n  const isMobile = window.matchMedia(`(${token.media.queries.tablet.max})`).matches;\n  let size = imageSize;\n\n  imageContainer.style.height = `${imageSize}px`;\n\n  if (isMobile) {\n    buttons.forEach((button) => { button.style.top = ''; });\n  } else {\n    buttons.forEach((button) => {\n      button.style.top = `${imageSize / 2 - button.offsetHeight / 2}px`;\n    });\n  }\n\n  if (children.length > 1) {\n    size = children.reduce((accumulator, currentElement) => {\n      return currentElement.offsetHeight + accumulator;\n    }, 0);\n  }\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 ? '-100%' : '100%';\n\n  slide.style.transform = `translateX(${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 translate = isRight ? `translateX(-${amount}%)` : `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 = translate;\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 const createCompositeCarouselImage = (props: TypeCarouselImageProps) =>\n  (() => {\n    const { slides, callback, maxHeight, isThemeDark, includeButtonWrapper = true } = props;\n    let activeIndex = 0;\n    let sliderElement: HTMLElement | null = null;\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) {\n          activeIndex = 0;\n        }\n      } else {\n        activeIndex = activeIndex - 1;\n        if (activeIndex < 0) {\n          activeIndex = slides.length - 1;\n        }\n      }\n\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: forward });\n      if (sliderElement) {\n        SetCarouselSize({\n          slider: sliderElement,\n          activeSlide: slides[activeIndex],\n          maxHeight,\n        });\n      }\n      if (callback) {\n        callback(activeIndex);\n      }\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      if (sliderElement) {\n        SetCarouselSize({\n          slider: sliderElement,\n          activeSlide: slides[activeIndex],\n          maxHeight,\n        });\n      }\n      if (callback) {\n        callback(activeIndex);\n      }\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      if (sliderElement) {\n        setupSwipeDetection({ container: sliderElement, callback: swipes });\n      }\n    };\n\n    const EventResize = () => {\n      if (!sliderElement || sliderElement.offsetWidth === 0) {\n        return;\n      }\n\n      SetCarouselSize({\n        slider: sliderElement,\n        activeSlide: slides[activeIndex],\n        maxHeight,\n      });\n    };\n\n    const Load = () => {\n      const setSize = () => {\n        if (!sliderElement) return;\n        const activeSlide = slides[activeIndex];\n        SetCarouselSize({ slider: sliderElement, activeSlide, maxHeight });\n        activeSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n      };\n      setTimeout(setSize, 100);\n      setTimeout(setSize, 300);\n    };\n\n    const prevButtonModel = CreateButton({ EventSlide, isRight: false, isThemeDark });\n    const nextButtonModel = CreateButton({ EventSlide, isRight: true, isThemeDark });\n    const slidesElements = slides.map((slide) => CreateSlide({ slide: slide }));\n    const sliderModel = new ElementBuilder()\n      .withClassName('carousel-image-slider')\n      .withStyles({\n        element: {\n          position: 'relative',\n          overflow: 'hidden',\n          width: '100%',\n        },\n      })\n      .ref((element) => {\n        sliderElement = element;\n      })\n      .withChildren(...slidesElements)\n      .build();\n\n    const containerBuilder = new ElementBuilder()\n      .withClassName('carousel-image-slider-container')\n      .withStyles({\n        element: {\n          position: 'relative',\n          width: '100%',\n          ...(includeButtonWrapper && {\n            display: 'flex',\n            flexWrap: 'wrap',\n            justifyContent: 'center',\n            [`@media (${token.media.queries.desktop.min})`]: {\n              display: 'block',\n            },\n          }),\n        },\n      })\n      .withChild(sliderModel);\n\n    if (includeButtonWrapper) {\n      const buttonWrapperModel = new ElementBuilder()\n        .withClassName('carousel-image-slider-buttons')\n        .withStyles({\n          element: {\n            display: 'flex',\n            justifyContent: 'center',\n            gap: token.spacing.min,\n            width: '100%',\n            marginTop: token.spacing.md,\n            marginBottom: token.spacing.md,\n            [`@media (${token.media.queries.desktop.min})`]: {\n              width: 'auto',\n              marginTop: 0,\n              marginBottom: 0,\n            },\n          },\n        })\n        .withChildren(prevButtonModel, nextButtonModel)\n        .build();\n      containerBuilder.withChild(buttonWrapperModel);\n    }\n\n    const containerModel = containerBuilder\n      .withEvents({\n        Load,\n        EventMoveTo,\n        EventResize,\n        EventSlideLeft,\n        EventSlideRight,\n      })\n      .build();\n\n    window.addEventListener('resize', debounce(EventResize, 10));\n    EventSwipe();\n\n    return {\n      element: containerModel.element,\n      styles: containerModel.styles,\n      buttons: { prev: prevButtonModel, next: nextButtonModel },\n      events: containerModel.events,\n    } as CarouselImageModel;\n  })();\n"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,8 @@
-export { createCompositeCarouselBlocks as blocks } from './blocks';
+export { createCompositeCarouselBlocks as blocks } from './equal-width-items';
+export { buttonColorsOnGray, buttonColorsOnWhite, buttonColorsOnBlack } from './nav-button';
 export { createCompositeCarouselFullScreen as fullScreen } from './full-screen';
 export { createCompositeCarouselOverlay as overlay } from './overlay';
 export { createCompositeCarouselImage as image } from './image';
+export { createCarouselIndicatorWrapper as indicatorWrapper } from './indicator-wrapper';
+export { createCarouselNavButton as navButton } from './nav-button';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AACnE,OAAO,EAAE,iCAAiC,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,8BAA8B,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AACtE,OAAO,EAAE,4BAA4B,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC9E,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAC5F,OAAO,EAAE,iCAAiC,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,8BAA8B,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AACtE,OAAO,EAAE,4BAA4B,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAChE,OAAO,EAAE,8BAA8B,IAAI,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACzF,OAAO,EAAE,uBAAuB,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/dist/composite/carousel/elements/indicator-wrapper.d.ts

@@ -0,0 +1,13 @@
+type TypeIndicatorWrapperProps = {
+    count: number;
+    isThemeDark?: boolean;
+    isBackground?: boolean;
+    callback?: (index: number) => void;
+};
+export declare const createCarouselIndicatorWrapper: ({ count, isThemeDark, isBackground, callback, }: TypeIndicatorWrapperProps) => {
+    element: HTMLElement;
+    styles: string;
+    position: (index: number) => void;
+};
+export {};
+//# sourceMappingURL=indicator-wrapper.d.ts.map

package/dist/composite/carousel/elements/indicator-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"indicator-wrapper.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/indicator-wrapper.ts"],"names":[],"mappings":"AAIA,KAAK,yBAAyB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,8BAA8B,GAAI,iDAK5C,yBAAyB;;;;CAmC3B,CAAC"}

package/dist/composite/carousel/elements/indicator-wrapper.js

@@ -0,0 +1,67 @@
+import * as token from "@universityofmaryland/web-token-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-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 "@universityofmaryland/web-icons-library/arrows";
+import { createAnimationIndicator } from "../../../atomic/animations/actions/indicator.js";
+import "@universityofmaryland/web-utilities-library/styles";
+import "../../../atomic/animations/brand/card-stack.js";
+import "@universityofmaryland/web-styles-library";
+import "@universityofmaryland/web-utilities-library/accessibility";
+import "@universityofmaryland/web-utilities-library/performance";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
+import "@universityofmaryland/web-utilities-library/theme";
+import "../../../atomic/layout/block/stacked.js";
+import "../../../atomic/layout/person/columns.js";
+import "@universityofmaryland/web-icons-library/social";
+import "@universityofmaryland/web-utilities-library/string";
+import "@universityofmaryland/web-utilities-library/animation";
+import "../../../atomic/text-lockup/small.js";
+const createCarouselIndicatorWrapper = ({
+  count,
+  isThemeDark,
+  isBackground = true,
+  callback
+}) => {
+  const overlayColor = isBackground && !isThemeDark ? token.color.gray.lightest : void 0;
+  const indicator = createAnimationIndicator({
+    count,
+    isThemeDark,
+    callback: callback || (() => {
+    }),
+    ...overlayColor && { overlayColor }
+  });
+  const model = new ElementBuilder().withClassName("carousel-indicator-wrapper").withStyles({
+    element: {
+      display: "flex",
+      justifyContent: "center",
+      width: "100%",
+      padding: `0 ${token.spacing.md}`,
+      ...isBackground && {
+        backgroundColor: token.color.gray.lightest,
+        ...isThemeDark && { backgroundColor: token.color.black }
+      },
+      [`@media (${token.media.queries.tablet.min})`]: {
+        padding: `0 ${token.spacing.lg}`
+      }
+    }
+  }).withChild(indicator).build();
+  return {
+    element: model.element,
+    styles: model.styles,
+    position: indicator.position
+  };
+};
+export {
+  createCarouselIndicatorWrapper
+};
+//# sourceMappingURL=indicator-wrapper.js.map

package/dist/composite/carousel/elements/indicator-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"indicator-wrapper.js","sources":["../../../../source/composite/carousel/elements/indicator-wrapper.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { animations } from 'atomic';\n\ntype TypeIndicatorWrapperProps = {\n  count: number;\n  isThemeDark?: boolean;\n  isBackground?: boolean;\n  callback?: (index: number) => void;\n};\n\nexport const createCarouselIndicatorWrapper = ({\n  count,\n  isThemeDark,\n  isBackground = true,\n  callback,\n}: TypeIndicatorWrapperProps) => {\n  const overlayColor = isBackground && !isThemeDark ? token.color.gray.lightest : undefined;\n\n  const indicator = animations.actions.indicator({\n    count,\n    isThemeDark,\n    callback: callback || (() => {}),\n    ...(overlayColor && { overlayColor }),\n  });\n\n  const model = new ElementBuilder()\n    .withClassName('carousel-indicator-wrapper')\n    .withStyles({\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        width: '100%',\n        padding: `0 ${token.spacing.md}`,\n        ...(isBackground && {\n          backgroundColor: token.color.gray.lightest,\n          ...(isThemeDark && { backgroundColor: token.color.black }),\n        }),\n        [`@media (${token.media.queries.tablet.min})`]: {\n          padding: `0 ${token.spacing.lg}`,\n        },\n      },\n    })\n    .withChild(indicator)\n    .build();\n\n  return {\n    element: model.element,\n    styles: model.styles,\n    position: indicator.position,\n  };\n};\n"],"names":["animations.actions.indicator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,iCAAiC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AACF,MAAiC;AAC/B,QAAM,eAAe,gBAAgB,CAAC,cAAc,MAAM,MAAM,KAAK,WAAW;AAEhF,QAAM,YAAYA,yBAA6B;AAAA,IAC7C;AAAA,IACA;AAAA,IACA,UAAU,aAAa,MAAM;AAAA,IAAC;AAAA,IAC9B,GAAI,gBAAgB,EAAE,aAAA;AAAA,EAAa,CACpC;AAED,QAAM,QAAQ,IAAI,eAAA,EACf,cAAc,4BAA4B,EAC1C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,SAAS,KAAK,MAAM,QAAQ,EAAE;AAAA,MAC9B,GAAI,gBAAgB;AAAA,QAClB,iBAAiB,MAAM,MAAM,KAAK;AAAA,QAClC,GAAI,eAAe,EAAE,iBAAiB,MAAM,MAAM,MAAA;AAAA,MAAM;AAAA,MAE1D,CAAC,WAAW,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAC9C,SAAS,KAAK,MAAM,QAAQ,EAAE;AAAA,MAAA;AAAA,IAChC;AAAA,EACF,CACD,EACA,UAAU,SAAS,EACnB,MAAA;AAEH,SAAO;AAAA,IACL,SAAS,MAAM;AAAA,IACf,QAAQ,MAAM;AAAA,IACd,UAAU,UAAU;AAAA,EAAA;AAExB;"}

package/dist/composite/carousel/elements/nav-button.d.ts

@@ -0,0 +1,82 @@
+import { ElementBuilder } from '../../../../builder/dist/index.d.ts';
+type TypeCarouselNavButtonProps = {
+    className: string;
+    direction: 'prev' | 'next';
+    label?: string;
+};
+type TypeButtonHelpers = {
+    GetButtons: {
+        prev: () => HTMLButtonElement;
+        next: () => HTMLButtonElement;
+    };
+    GetElements: {
+        blocks: () => HTMLElement[];
+    };
+    GetViewOptions: {
+        shouldShowLeftButton: () => boolean;
+        shouldShowRightButton: () => boolean;
+        showCount: () => number;
+    };
+};
+export declare const createCarouselNavButton: ({ className, direction, label, }: TypeCarouselNavButtonProps) => ElementBuilder<HTMLElement>;
+export declare const ButtonVisibility: (props: TypeButtonHelpers) => void;
+export declare const CreateButton: ({ EventMoveForward, EventMoveBackward, isRight, isVerticalCenter, outsetOffset, backgroundColor, }: {
+    EventMoveForward: () => void;
+    EventMoveBackward: () => void;
+    isRight?: boolean;
+    isVerticalCenter?: boolean;
+    outsetOffset?: string;
+    backgroundColor?: string;
+}) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
+export declare const buttonColorsOnGray: (isThemeDark?: boolean) => {
+    backgroundColor: "#FFFFFF" | "#E21833";
+    '& svg': {
+        fill: "#000000";
+    } | {
+        fill: "#FFFFFF";
+    };
+    '&:hover': {
+        backgroundColor: "#242424";
+        '& svg': {
+            fill: "#FFFFFF";
+        };
+    } | {
+        backgroundColor: "#FFFFFF";
+        '& svg': {
+            fill: "#000000";
+        };
+    };
+};
+export declare const buttonColorsOnWhite: (isThemeDark?: boolean) => {
+    backgroundColor: "#E21833" | "#FAFAFA";
+    '& svg': {
+        fill: "#000000";
+    } | {
+        fill: "#FFFFFF";
+    };
+    '&:hover': {
+        backgroundColor: "#242424";
+        '& svg': {
+            fill: "#FFFFFF";
+        };
+    } | {
+        backgroundColor: "#FFFFFF";
+        '& svg': {
+            fill: "#000000";
+        };
+    };
+};
+export declare const buttonColorsOnBlack: () => {
+    backgroundColor: "#E21833";
+    '& svg': {
+        fill: "#FFFFFF";
+    };
+    '&:hover': {
+        backgroundColor: "#FFFFFF";
+        '& svg': {
+            fill: "#000000";
+        };
+    };
+};
+export {};
+//# sourceMappingURL=nav-button.d.ts.map

package/dist/composite/carousel/elements/nav-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-button.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/nav-button.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAG3E,KAAK,0BAA0B,GAAG;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,UAAU,EAAE;QACV,IAAI,EAAE,MAAM,iBAAiB,CAAC;QAC9B,IAAI,EAAE,MAAM,iBAAiB,CAAC;KAC/B,CAAC;IACF,WAAW,EAAE;QACX,MAAM,EAAE,MAAM,WAAW,EAAE,CAAC;KAC7B,CAAC;IACF,cAAc,EAAE;QACd,oBAAoB,EAAE,MAAM,OAAO,CAAC;QACpC,qBAAqB,EAAE,MAAM,OAAO,CAAC;QACrC,SAAS,EAAE,MAAM,MAAM,CAAC;KACzB,CAAC;CACH,CAAC;AAIF,eAAO,MAAM,uBAAuB,GAAI,kCAIrC,0BAA0B,gCA2B5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,iBAAiB,SA6BxD,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,oGAO1B;IACD,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,kFA0DA,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,cAAc,OAAO;;;;;;;;;;;;;;;;;;CAetD,CAAC;AAEH,eAAO,MAAM,mBAAmB,GAAI,cAAc,OAAO;;;;;;;;;;;;;;;;;;CAevD,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;CAO9B,CAAC"}

package/dist/composite/carousel/elements/nav-button.js

@@ -0,0 +1,164 @@
+import * as token from "@universityofmaryland/web-token-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { arrow_right } from "@universityofmaryland/web-icons-library/arrows";
+const BUTTON_DISABLE_DURATION = 750;
+const createCarouselNavButton = ({
+  className,
+  direction,
+  label
+}) => {
+  const isPrev = direction === "prev";
+  const defaultLabel = isPrev ? "Previous" : "Next";
+  const ariaLabel = label || defaultLabel;
+  return new ElementBuilder("button").withClassName(className).withAttribute("type", "button").withAria({ label: ariaLabel }).withHTML(arrow_right).withStyles({
+    element: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer",
+      width: token.spacing["2xl"],
+      height: token.spacing["2xl"],
+      transition: "background-color 0.3s",
+      "& svg": {
+        width: token.spacing.sm,
+        height: token.spacing.sm,
+        transition: "fill 0.3s",
+        ...isPrev && { transform: "rotate(180deg)" }
+      }
+    }
+  });
+};
+const ButtonVisibility = (props) => {
+  const { GetElements, GetButtons, GetViewOptions } = props;
+  const previousButton = GetButtons.prev();
+  const nextButton = GetButtons.next();
+  const buttons = [nextButton, previousButton];
+  const shouldShowLeftButton = GetViewOptions.shouldShowLeftButton();
+  const shouldShowRightButton = GetViewOptions.shouldShowRightButton();
+  const showCount = GetViewOptions.showCount();
+  const cardsTotal = GetElements.blocks().length;
+  const shouldHideLeftButton = showCount > 1 && !shouldShowLeftButton;
+  const shouldHideRightButton = showCount > 1 && !shouldShowRightButton;
+  if (cardsTotal === showCount) {
+    buttons.forEach((button) => button.style.display = "none");
+    return;
+  }
+  if (shouldHideLeftButton) {
+    previousButton.style.display = "none";
+  } else {
+    previousButton.style.display = "flex";
+  }
+  if (shouldHideRightButton) {
+    nextButton.style.display = "none";
+  } else {
+    nextButton.style.display = "flex";
+  }
+};
+const CreateButton = ({
+  EventMoveForward,
+  EventMoveBackward,
+  isRight = true,
+  isVerticalCenter = false,
+  outsetOffset,
+  backgroundColor
+}) => {
+  const buttonDirection = isRight ? "animation-carousel-block-button-next" : "animation-carousel-block-button-previous";
+  return createCarouselNavButton({
+    className: buttonDirection,
+    direction: isRight ? "next" : "prev"
+  }).withClassName("animation-carousel-block-button").withStyles({
+    element: {
+      ...buttonColorsOnWhite(),
+      ...backgroundColor === token.color.red && buttonColorsOnBlack(),
+      ...backgroundColor === token.color.white && buttonColorsOnGray(),
+      "& svg": {
+        fill: backgroundColor === token.color.red ? token.color.white : token.color.black,
+        width: "20px",
+        height: "20px"
+      },
+      padding: `10px ${token.spacing.xs}`,
+      position: "relative",
+      top: "auto",
+      left: "auto",
+      right: "auto",
+      transform: "none",
+      zIndex: 9999,
+      display: "none",
+      "&:disabled": { opacity: 0.5 },
+      [`@media (${token.media.queries.desktop.min})`]: {
+        position: "absolute",
+        ...isVerticalCenter && {
+          top: "50%",
+          transform: "translateY(-50%)",
+          left: 0,
+          ...outsetOffset && { left: `-${outsetOffset}` },
+          ...isRight && {
+            left: "auto",
+            right: 0,
+            ...outsetOffset && { right: `-${outsetOffset}` }
+          }
+        }
+      }
+    }
+  }).on("click", (event) => {
+    const button = event.currentTarget;
+    if (isRight) {
+      EventMoveForward();
+    } else {
+      EventMoveBackward();
+    }
+    button.disabled = true;
+    setTimeout(() => {
+      button.disabled = false;
+    }, BUTTON_DISABLE_DURATION);
+  }).build();
+};
+const buttonColorsOnGray = (isThemeDark) => ({
+  backgroundColor: token.color.white,
+  "& svg": { fill: token.color.black },
+  "&:hover": {
+    backgroundColor: token.color.gray.darker,
+    "& svg": { fill: token.color.white }
+  },
+  ...isThemeDark && {
+    backgroundColor: token.color.red,
+    "& svg": { fill: token.color.white },
+    "&:hover": {
+      backgroundColor: token.color.white,
+      "& svg": { fill: token.color.black }
+    }
+  }
+});
+const buttonColorsOnWhite = (isThemeDark) => ({
+  backgroundColor: token.color.gray.lightest,
+  "& svg": { fill: token.color.black },
+  "&:hover": {
+    backgroundColor: token.color.gray.darker,
+    "& svg": { fill: token.color.white }
+  },
+  ...isThemeDark && {
+    backgroundColor: token.color.red,
+    "& svg": { fill: token.color.white },
+    "&:hover": {
+      backgroundColor: token.color.white,
+      "& svg": { fill: token.color.black }
+    }
+  }
+});
+const buttonColorsOnBlack = () => ({
+  backgroundColor: token.color.red,
+  "& svg": { fill: token.color.white },
+  "&:hover": {
+    backgroundColor: token.color.white,
+    "& svg": { fill: token.color.black }
+  }
+});
+export {
+  ButtonVisibility,
+  CreateButton,
+  buttonColorsOnBlack,
+  buttonColorsOnGray,
+  buttonColorsOnWhite,
+  createCarouselNavButton
+};
+//# sourceMappingURL=nav-button.js.map

package/dist/composite/carousel/elements/nav-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-button.js","sources":["../../../../source/composite/carousel/elements/nav-button.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { arrow_right as iconArrowRight } from '@universityofmaryland/web-icons-library/arrows';\n\ntype TypeCarouselNavButtonProps = {\n  className: string;\n  direction: 'prev' | 'next';\n  label?: string;\n};\n\ntype TypeButtonHelpers = {\n  GetButtons: {\n    prev: () => HTMLButtonElement;\n    next: () => HTMLButtonElement;\n  };\n  GetElements: {\n    blocks: () => HTMLElement[];\n  };\n  GetViewOptions: {\n    shouldShowLeftButton: () => boolean;\n    shouldShowRightButton: () => boolean;\n    showCount: () => number;\n  };\n};\n\nconst BUTTON_DISABLE_DURATION = 750;\n\nexport const createCarouselNavButton = ({\n  className,\n  direction,\n  label,\n}: TypeCarouselNavButtonProps) => {\n  const isPrev = direction === 'prev';\n  const defaultLabel = isPrev ? 'Previous' : 'Next';\n  const ariaLabel = label || defaultLabel;\n\n  return new ElementBuilder('button')\n    .withClassName(className)\n    .withAttribute('type', 'button')\n    .withAria({ label: ariaLabel })\n    .withHTML(iconArrowRight)\n    .withStyles({\n      element: {\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        cursor: 'pointer',\n        width: token.spacing['2xl'],\n        height: token.spacing['2xl'],\n        transition: 'background-color 0.3s',\n        '& svg': {\n          width: token.spacing.sm,\n          height: token.spacing.sm,\n          transition: 'fill 0.3s',\n          ...(isPrev && { transform: 'rotate(180deg)' }),\n        },\n      },\n    });\n};\n\nexport const ButtonVisibility = (props: TypeButtonHelpers) => {\n  const { GetElements, GetButtons, GetViewOptions } = props;\n  const previousButton = GetButtons.prev();\n  const nextButton = GetButtons.next();\n  const buttons = [nextButton, previousButton];\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    previousButton.style.display = 'none';\n  } else {\n    previousButton.style.display = 'flex';\n  }\n\n  if (shouldHideRightButton) {\n    nextButton.style.display = 'none';\n  } else {\n    nextButton.style.display = 'flex';\n  }\n};\n\nexport const CreateButton = ({\n  EventMoveForward,\n  EventMoveBackward,\n  isRight = true,\n  isVerticalCenter = false,\n  outsetOffset,\n  backgroundColor,\n}: {\n  EventMoveForward: () => void;\n  EventMoveBackward: () => void;\n  isRight?: boolean;\n  isVerticalCenter?: boolean;\n  outsetOffset?: string;\n  backgroundColor?: string;\n}) => {\n  const buttonDirection = isRight\n    ? 'animation-carousel-block-button-next'\n    : 'animation-carousel-block-button-previous';\n\n  return createCarouselNavButton({\n    className: buttonDirection,\n    direction: isRight ? 'next' : 'prev',\n  })\n    .withClassName('animation-carousel-block-button')\n    .withStyles({\n      element: {\n        ...buttonColorsOnWhite(),\n        ...(backgroundColor === token.color.red && buttonColorsOnBlack()),\n        ...(backgroundColor === token.color.white && buttonColorsOnGray()),\n        '& svg': {\n          fill: backgroundColor === token.color.red ? token.color.white : token.color.black,\n          width: '20px',\n          height: '20px',\n        },\n        padding: `10px ${token.spacing.xs}`,\n        position: 'relative',\n        top: 'auto',\n        left: 'auto',\n        right: 'auto',\n        transform: 'none',\n        zIndex: 9999,\n        display: 'none',\n        '&:disabled': { opacity: 0.5 },\n        [`@media (${token.media.queries.desktop.min})`]: {\n          position: 'absolute',\n          ...(isVerticalCenter && {\n            top: '50%',\n            transform: 'translateY(-50%)',\n            left: 0,\n            ...(outsetOffset && { left: `-${outsetOffset}` }),\n            ...(isRight && {\n              left: 'auto',\n              right: 0,\n              ...(outsetOffset && { right: `-${outsetOffset}` }),\n            }),\n          }),\n        },\n      },\n    })\n    .on('click', (event) => {\n      const button = event.currentTarget as HTMLButtonElement;\n      if (isRight) {\n        EventMoveForward();\n      } else {\n        EventMoveBackward();\n      }\n      button.disabled = true;\n      setTimeout(() => {\n        button.disabled = false;\n      }, BUTTON_DISABLE_DURATION);\n    })\n    .build();\n};\n\nexport const buttonColorsOnGray = (isThemeDark?: boolean) => ({\n  backgroundColor: token.color.white,\n  '& svg': { fill: token.color.black },\n  '&:hover': {\n    backgroundColor: token.color.gray.darker,\n    '& svg': { fill: token.color.white },\n  },\n  ...(isThemeDark && {\n    backgroundColor: token.color.red,\n    '& svg': { fill: token.color.white },\n    '&:hover': {\n      backgroundColor: token.color.white,\n      '& svg': { fill: token.color.black },\n    },\n  }),\n});\n\nexport const buttonColorsOnWhite = (isThemeDark?: boolean) => ({\n  backgroundColor: token.color.gray.lightest,\n  '& svg': { fill: token.color.black },\n  '&:hover': {\n    backgroundColor: token.color.gray.darker,\n    '& svg': { fill: token.color.white },\n  },\n  ...(isThemeDark && {\n    backgroundColor: token.color.red,\n    '& svg': { fill: token.color.white },\n    '&:hover': {\n      backgroundColor: token.color.white,\n      '& svg': { fill: token.color.black },\n    },\n  }),\n});\n\nexport const buttonColorsOnBlack = () => ({\n  backgroundColor: token.color.red,\n  '& svg': { fill: token.color.white },\n  '&:hover': {\n    backgroundColor: token.color.white,\n    '& svg': { fill: token.color.black },\n  },\n});\n"],"names":["iconArrowRight"],"mappings":"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"}

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

@@ -1,7 +1,8 @@
-export declare const createCompositeCarouselOverlay: ({ images }: {
+export declare const createCompositeCarouselOverlay: ({ images, isToggleCaption, }: {
     images: HTMLImageElement[];
+    isToggleCaption?: boolean;
 }) => {
-    element: HTMLDivElement;
+    element: HTMLElement;
     styles: string;
     events: {
         setFullScreen: (index: number) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"names":[],"mappings":"AA4CA,eAAO,MAAM,8BAA8B,GAAI,YAAY;IAAE,MAAM,EAAE,gBAAgB,EAAE,CAAA;CAAE;;;;+BAIvD,MAAM;;CAoDlC,CAAC"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"names":[],"mappings":"AAgDA,eAAO,MAAM,8BAA8B,GAAI,8BAG5C;IACD,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;;;;+BAIiC,MAAM;;CA4DlC,CAAC"}

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

@@ -1,78 +1,108 @@
 import * as token from "@universityofmaryland/web-token-library";
-import "./blocks.js";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { combineStyles } from "@universityofmaryland/web-utilities-library/styles";
+import "@universityofmaryland/web-utilities-library/performance";
+import "@universityofmaryland/web-utilities-library/events";
+import "@universityofmaryland/web-icons-library/arrows";
+import "@universityofmaryland/web-styles-library/typography";
+import "@universityofmaryland/web-icons-library/controls";
 import { createCompositeCarouselFullScreen } from "./full-screen.js";
-import { createCompositeCarouselImage } from "./image.js";
-import { layoutImage } from "../../../layout/image.js";
-import "@universityofmaryland/web-builder-library";
 import "@universityofmaryland/web-styles-library";
-const ELEMENT_CAROUSEL_OVERLAY_COINTAINER = "carousel-overlay-container";
-const OverlayImageContainerStyles = `
-  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: ${token.color.gray.dark};
-  }
-
-  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} img {
-    object-fit: contain;
-    max-height: 100%;
-  }
-`;
-const STYLES_CAROUSEL_OVERLAY_ELEMENT = `
-  ${layoutImage.Styles}
-  ${OverlayImageContainerStyles}
-`;
-const CreateOverlaySlide = ({ images }) => images.map((image) => {
-  const slide = document.createElement("div");
-  const imageContainer = document.createElement("div");
-  const imageBlock = layoutImage.CreateElement({
-    image,
-    showCaption: true
-  });
-  imageContainer.classList.add(ELEMENT_CAROUSEL_OVERLAY_COINTAINER);
-  imageContainer.appendChild(imageBlock);
-  slide.appendChild(imageContainer);
-  return slide;
+import { createLayoutImageContainer } from "../../../layout/image.js";
+import { createCompositeCarouselImage } from "./image.js";
+import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-styles-library/animation";
+import "@universityofmaryland/web-utilities-library/media";
+import "@universityofmaryland/web-utilities-library/dom";
+import "@universityofmaryland/web-icons-library/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
+import "../../../atomic/animations/brand/card-stack.js";
+import "@universityofmaryland/web-utilities-library/accessibility";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
+import "@universityofmaryland/web-utilities-library/theme";
+import "../../../atomic/layout/block/stacked.js";
+import "../../../atomic/layout/person/columns.js";
+import "@universityofmaryland/web-icons-library/social";
+import "@universityofmaryland/web-utilities-library/string";
+import "@universityofmaryland/web-utilities-library/animation";
+import "../../../atomic/text-lockup/small.js";
+const CreateOverlaySlide = ({
+  images,
+  isToggleCaption
+}) => images.map((image) => {
+  const imageBlock = createLayoutImageContainer({ image, showCaption: true, isToggleCaption });
+  const imageContainerModel = new ElementBuilder().withClassName("carousel-overlay-container").withStyles({
+    element: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: token.color.gray.dark,
+      "& > *": {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      "& img": {
+        objectFit: "contain",
+        maxHeight: "100%",
+        maxWidth: "100%"
+      }
+    }
+  }).withChild(imageBlock).build();
+  return imageContainerModel;
 });
-const createCompositeCarouselOverlay = ({ images }) => (() => {
-  let styles = STYLES_CAROUSEL_OVERLAY_ELEMENT;
+const createCompositeCarouselOverlay = ({
+  images,
+  isToggleCaption = true
+}) => (() => {
   const setFullScreen = (index) => {
     let canMove = true;
-    const checkKeyEvents = (event) => {
-      if (!canMove) return;
-      canMove = false;
-      if (event.key == "ArrowLeft") overlayCarousel.events.EventSlideLeft();
-      if (event.key == "ArrowRight") overlayCarousel.events.EventSlideRight();
-      setTimeout(() => {
-        canMove = true;
-      }, 700);
-    };
     overlayCarousel.events.EventMoveTo(index);
     setTimeout(() => fixedFullScreen.events.show(), 100);
     setTimeout(() => {
       overlayCarousel.events.EventResize();
     }, 100);
-    isFullScreenEvents = window.addEventListener("keyup", checkKeyEvents);
+    window.addEventListener(
+      "keyup",
+      (event) => {
+        if (!canMove) return;
+        canMove = false;
+        if (event.key === "ArrowLeft") {
+          overlayCarousel.events.EventSlideLeft();
+        } else if (event.key === "ArrowRight") {
+          overlayCarousel.events.EventSlideRight();
+        }
+        setTimeout(() => {
+          canMove = true;
+        }, 700);
+      }
+    );
   };
-  const overlaySlides = CreateOverlaySlide({ images });
+  const overlaySlideModels = CreateOverlaySlide({ images, isToggleCaption });
+  const overlaySlides = overlaySlideModels.map((model) => model.element);
+  const firstSlide = overlaySlideModels[0];
+  const slideStyles = firstSlide ? firstSlide.styles : "";
   const overlayCarousel = createCompositeCarouselImage({
     slides: overlaySlides,
     maxHeight: window.innerHeight / 10 * 8
   });
-  styles += overlayCarousel.styles;
   const fixedFullScreen = createCompositeCarouselFullScreen({
-    content: overlayCarousel.element,
-    callback: () => {
-      if (isFullScreenEvents)
-        window.removeEventListener("keyup", isFullScreenEvents);
-    }
+    content: overlayCarousel.element
   });
-  styles += fixedFullScreen.styles;
-  let isFullScreenEvents = null;
   return {
     element: fixedFullScreen.element,
-    styles,
+    styles: combineStyles(
+      slideStyles,
+      overlayCarousel.styles,
+      fixedFullScreen.styles
+    ),
     events: {
       setFullScreen
     }