@universityofmaryland/web-elements-library 1.5.2 → 1.5.5

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

@@ -1 +1 @@
-{"version":3,"file":"standard.mjs","sources":["../../../../source/composite/carousel/image/standard.ts"],"sourcesContent":["import {\n  element,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { animations, buttons } from 'atomic';\nimport { Image as LayoutImage } from 'layout';\nimport * as carouselElements from '../elements';\n\ntype TypeImage = {\n  image: HTMLImageElement;\n};\n\ntype TypeFullScreen = {\n  isFullScreenOption?: boolean;\n};\n\ntype TypesetFullScreen = {\n  setFullScreen: (arg: number) => void;\n};\n\ntype TypeSlideContent = {\n  images: HTMLImageElement[];\n  headlines?: HTMLElement[] | null;\n  texts?: HTMLElement[] | null;\n};\n\ntype TypeImageContainerProps = TypeImage &\n  TypeFullScreen &\n  TypesetFullScreen & {\n    index: number;\n  };\n\ntype TypeCarouselSlideProps = TypeSlideContent &\n  TypesetFullScreen &\n  TypeFullScreen;\n\ntype TypeCarouselImageStandardProps = TypeSlideContent &\n  TypeFullScreen & {\n    isThemeDark?: boolean;\n  };\n\nconst MEDIUM = 500;\n\nconst ATTRIBUTE_REFERENCE = 'data-reference';\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-carousel-image-standard';\nconst ELEMENT_CAROUSEL_IMAGE_DECLARATION =\n  'carousel-image-standard-declaration';\nconst ELEMENT_CAROUSEL_IMAGE_CONTAINER = 'carousel-image-standard-container';\n\nconst ELEMENT_SLIDE = 'carousel-image-standard-slide';\nconst ELEMENT_SLIDE_IMAGE_CONTAINER = 'carousel-image-standard-slide-image';\nconst ELEMENT_SLIDE_IMAGE_WRAPPER = 'carousel-image-standard-slide-wrapper';\nconst ELEMENT_SLIDE_TEXT_CONTAINER = 'carousel-image-standard-slide-text';\nconst ELEMENT_SLIDE_HEADLINE = 'carousel-image-standard-slide-headline';\nconst ELEMENT_SLIDE_RICH_TEXT = 'carousel-image-standard-slide-rich-text';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-slider-button';\n\nconst ELEMENT_CAROUSEL_INDICATOR_WRAPPER = 'carousel-indicator-wrapper';\nconst ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER =\n  'carousel-overlay-image-container';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_RICH_TEXT = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_SLIDE_RICH_TEXT}`;\nconst OVERWRITE_THEME_DARK_TEXT_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_TEXT_CONTAINER}`;\nconst OVERWRITE_THEME_DARK_IMAGE_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_IMAGE_CONTAINER}`;\nconst OVERWRITE_THEME_DARK_INDICATOR = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_SLIDER_BUTTON}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER},\n  ${OVERWRITE_THEME_DARK_TEXT_CONTAINER},\n  ${OVERWRITE_THEME_DARK_INDICATOR} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_IMAGE_CONTAINER} {\n    background-color: ${token.color.gray.dark};\n  }\n\n  ${OVERWRITE_THEME_DARK_TEXT_CONTAINER} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n    fill: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_RICH_TEXT} {\n    color: ${token.color.white};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`${OVERWRITE_THEME_DARK_RICH_TEXT}`]: element.text.rich.advancedDark,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst IndicatorContainerStyles = `\n  .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {\n    padding: ${token.spacing.md};\n    background-color: ${token.color.gray.lightest};\n    display: flex;\n    justify-content: center;\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {\n      padding: ${token.spacing.lg};\n    }\n  }\n`;\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n  .${ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER} {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ${token.color.gray.dark};\n  }\n\n  .${ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst TextContainerStyles = `\n  .${ELEMENT_SLIDE_TEXT_CONTAINER} {\n    padding: ${token.spacing.md};\n    padding-bottom: 0;\n    background-color: ${token.color.gray.lightest};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${ELEMENT_SLIDE_TEXT_CONTAINER} {\n      padding: ${token.spacing.lg};\n      padding-bottom: 0;\n    }\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_SLIDE_HEADLINE}`]: typography.sans.large,\n    },\n  })}\n\n  .${ELEMENT_SLIDE_RICH_TEXT} {\n    margin-top: ${token.spacing.min};\n    color: ${token.color.gray.dark}\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_SLIDE_RICH_TEXT}`]: element.text.rich.advanced,\n    },\n  })}\n`\n\n// prettier-ignore\nconst ImageContainerStyles = `\n  .${ELEMENT_SLIDE_IMAGE_CONTAINER} {\n    position: relative;\n    background-color: ${token.color.black};\n  }\n\n  .${ELEMENT_SLIDE_IMAGE_WRAPPER} {\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .${ELEMENT_SLIDE_IMAGE_WRAPPER} > * {\n    height: 100%;\n  }\n\n  .${ELEMENT_SLIDE_IMAGE_CONTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_STANDARD_ELEMENT = `\n  .${ELEMENT_CAROUSEL_IMAGE_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_CAROUSEL_IMAGE_CONTAINER} {\n    overflow: hidden;\n    background-color: ${token.color.gray.lightest};\n  }\n\n  ${LayoutImage.Styles}\n  ${ImageContainerStyles}\n  ${TextContainerStyles}\n  ${OverlayImageContainerStyles}\n  ${IndicatorContainerStyles}\n  ${OverwriteThemeDark}\n`;\n\nexport default (props: TypeCarouselImageStandardProps) =>\n  (() => {\n    const { images, isThemeDark, isFullScreenOption } = props;\n    const elementDeclaration = document.createElement('div');\n    const elementContainer = document.createElement('div');\n    const elementIndicator = document.createElement('div');\n    const overlayCarousel = carouselElements.overlay({\n      images,\n    });\n    let styles = STYLES_CAROUSEL_IMAGE_STANDARD_ELEMENT;\n\n    styles += overlayCarousel.styles;\n\n    const CreateTextContainer = ({\n      headlines,\n      texts,\n      reference,\n    }: {\n      headlines?: HTMLElement[] | null;\n      texts?: HTMLElement[] | null;\n      reference: string | null;\n    }) => {\n      const textContainer = document.createElement('div');\n\n      const headline = headlines?.find(\n        (headline) => headline.getAttribute(ATTRIBUTE_REFERENCE) === reference,\n      );\n      const richText = texts?.find(\n        (text) => text.getAttribute(ATTRIBUTE_REFERENCE) === reference,\n      );\n\n      textContainer.classList.add(ELEMENT_SLIDE_TEXT_CONTAINER);\n\n      if (headline || richText) {\n        if (headline) {\n          headline.classList.add(ELEMENT_SLIDE_HEADLINE);\n          textContainer.appendChild(headline);\n        }\n\n        if (richText) {\n          richText.classList.add(ELEMENT_SLIDE_RICH_TEXT);\n          textContainer.appendChild(richText);\n        }\n\n        return textContainer;\n      }\n\n      return null;\n    };\n\n    const CreateImageContainer = ({\n      image,\n      isFullScreenOption,\n      setFullScreen,\n      index,\n    }: TypeImageContainerProps) => {\n      const imageContainer = document.createElement('div');\n      const imageWrapper = document.createElement('div');\n      const imageBlock = LayoutImage.CreateElement({\n        image,\n        showCaption: true,\n      });\n\n      imageContainer.classList.add(ELEMENT_SLIDE_IMAGE_CONTAINER);\n\n      imageWrapper.classList.add(ELEMENT_SLIDE_IMAGE_WRAPPER);\n      imageWrapper.appendChild(imageBlock);\n\n      if (isFullScreenOption) {\n        const button = buttons.fullscreen.create({\n          callback: setFullScreen,\n          index,\n        });\n        imageBlock.appendChild(button.element);\n\n        styles += button.styles;\n      }\n\n      imageContainer.appendChild(imageWrapper);\n\n      return imageContainer;\n    };\n\n    const CreateSlide = (props: TypeCarouselSlideProps) => {\n      const { images, setFullScreen } = props;\n      const clonedImages = images.map((image) =>\n        image.cloneNode(true),\n      ) as HTMLImageElement[];\n\n      return clonedImages.map((image, index) => {\n        const reference = image.getAttribute(ATTRIBUTE_REFERENCE);\n        const slide = document.createElement('div');\n        const imageContainer = CreateImageContainer({\n          ...props,\n          image,\n          setFullScreen,\n          index,\n        });\n        const textContainer = CreateTextContainer({ ...props, reference });\n\n        slide.classList.add(ELEMENT_SLIDE);\n        slide.appendChild(imageContainer);\n        if (textContainer) slide.appendChild(textContainer);\n\n        return slide;\n      });\n    };\n\n    const slides = CreateSlide({\n      ...props,\n      setFullScreen: overlayCarousel.events.setFullScreen,\n    });\n    const carousel = carouselElements.image({\n      slides,\n      callback: (activeIndex) => {\n        indicator.position(activeIndex);\n      },\n      maxHeight: 500,\n    });\n\n    styles += carousel.styles;\n\n    const indicator = animations.actions.indicator({\n      count: images.length || 0,\n      callback: carousel.events.EventMoveTo,\n      isThemeDark,\n      isThemeLight: !isThemeDark,\n    });\n\n    styles += indicator.styles;\n\n    elementIndicator.classList.add(ELEMENT_CAROUSEL_INDICATOR_WRAPPER);\n    elementIndicator.appendChild(indicator.element);\n\n    elementContainer.classList.add(ELEMENT_CAROUSEL_IMAGE_CONTAINER);\n    elementContainer.appendChild(carousel.element);\n    elementContainer.appendChild(elementIndicator);\n    if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    elementDeclaration.classList.add(ELEMENT_CAROUSEL_IMAGE_DECLARATION);\n    elementDeclaration.appendChild(elementContainer);\n\n    images[images.length - 1].addEventListener('load', carousel.events.Load);\n\n    const responseOptions = {\n      styles,\n      events: {\n        SetEventReize: carousel.events.EventResize,\n      },\n    };\n\n    if (isFullScreenOption) {\n      const element = document.createElement('div');\n\n      element.appendChild(overlayCarousel.element);\n      element.appendChild(elementDeclaration);\n\n      return {\n        element,\n        ...responseOptions,\n      };\n    }\n\n    return {\n      element: elementDeclaration,\n      ...responseOptions,\n    };\n  })();\n"],"names":["carouselElements.overlay","headline","image","isFullScreenOption","index","buttons.fullscreen","props","images","carouselElements.image","indicator","animations.actions.indicator","element"],"mappings":"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"}
+{"version":3,"file":"standard.mjs","sources":["../../../../source/composite/carousel/image/standard.ts"],"sourcesContent":["import {\n  element,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport * as carouselElements from '../elements';\nimport { animations, buttons } from 'atomic';\nimport { Image as LayoutImage } from 'layout';\n\ntype TypeImage = {\n  image: HTMLImageElement;\n};\n\ntype TypeFullScreen = {\n  isFullScreenOption?: boolean;\n};\n\ntype TypesetFullScreen = {\n  setFullScreen: (arg: number) => void;\n};\n\ntype TypeSlideContent = {\n  images: HTMLImageElement[];\n  headlines?: HTMLElement[] | null;\n  texts?: HTMLElement[] | null;\n};\n\ntype TypeImageContainerProps = TypeImage &\n  TypeFullScreen &\n  TypesetFullScreen & {\n    index: number;\n  };\n\ntype TypeCarouselSlideProps = TypeSlideContent &\n  TypesetFullScreen &\n  TypeFullScreen;\n\ntype TypeCarouselImageStandardProps = TypeSlideContent &\n  TypeFullScreen & {\n    isThemeDark?: boolean;\n  };\n\nconst MEDIUM = 500;\n\nconst ATTRIBUTE_REFERENCE = 'data-reference';\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-carousel-image-standard';\nconst ELEMENT_CAROUSEL_IMAGE_DECLARATION =\n  'carousel-image-standard-declaration';\nconst ELEMENT_CAROUSEL_IMAGE_CONTAINER = 'carousel-image-standard-container';\n\nconst ELEMENT_SLIDE = 'carousel-image-standard-slide';\nconst ELEMENT_SLIDE_IMAGE_CONTAINER = 'carousel-image-standard-slide-image';\nconst ELEMENT_SLIDE_IMAGE_WRAPPER = 'carousel-image-standard-slide-wrapper';\nconst ELEMENT_SLIDE_TEXT_CONTAINER = 'carousel-image-standard-slide-text';\nconst ELEMENT_SLIDE_HEADLINE = 'carousel-image-standard-slide-headline';\nconst ELEMENT_SLIDE_RICH_TEXT = 'carousel-image-standard-slide-rich-text';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-slider-button';\n\nconst ELEMENT_CAROUSEL_INDICATOR_WRAPPER = 'carousel-indicator-wrapper';\nconst ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER =\n  'carousel-overlay-image-container';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_RICH_TEXT = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_SLIDE_RICH_TEXT}`;\nconst OVERWRITE_THEME_DARK_TEXT_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_TEXT_CONTAINER}`;\nconst OVERWRITE_THEME_DARK_IMAGE_CONTAINER = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDE_IMAGE_CONTAINER}`;\nconst OVERWRITE_THEME_DARK_INDICATOR = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_CAROUSEL_IMAGE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_SLIDER_BUTTON}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER},\n  ${OVERWRITE_THEME_DARK_TEXT_CONTAINER},\n  ${OVERWRITE_THEME_DARK_INDICATOR} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_IMAGE_CONTAINER} {\n    background-color: ${token.color.gray.dark};\n  }\n\n  ${OVERWRITE_THEME_DARK_TEXT_CONTAINER} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n    fill: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_RICH_TEXT} {\n    color: ${token.color.white};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`${OVERWRITE_THEME_DARK_RICH_TEXT}`]: element.text.rich.advancedDark,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst IndicatorContainerStyles = `\n  .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {\n    padding: ${token.spacing.md};\n    background-color: ${token.color.gray.lightest};\n    display: flex;\n    justify-content: center;\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${ELEMENT_CAROUSEL_INDICATOR_WRAPPER} {\n      padding: ${token.spacing.lg};\n    }\n  }\n`;\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n  .${ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER} {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ${token.color.gray.dark};\n  }\n\n  .${ELEMENT_CAROUSEL_OVERLAY_IMAGE_COINTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst TextContainerStyles = `\n  .${ELEMENT_SLIDE_TEXT_CONTAINER} {\n    padding: ${token.spacing.md};\n    padding-bottom: 0;\n    background-color: ${token.color.gray.lightest};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${ELEMENT_SLIDE_TEXT_CONTAINER} {\n      padding: ${token.spacing.lg};\n      padding-bottom: 0;\n    }\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_SLIDE_HEADLINE}`]: typography.sans.large,\n    },\n  })}\n\n  .${ELEMENT_SLIDE_RICH_TEXT} {\n    margin-top: ${token.spacing.min};\n    color: ${token.color.gray.dark}\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_SLIDE_RICH_TEXT}`]: element.text.rich.advanced,\n    },\n  })}\n`\n\n// prettier-ignore\nconst ImageContainerStyles = `\n  .${ELEMENT_SLIDE_IMAGE_CONTAINER} {\n    position: relative;\n    background-color: ${token.color.black};\n  }\n\n  .${ELEMENT_SLIDE_IMAGE_WRAPPER} {\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .${ELEMENT_SLIDE_IMAGE_WRAPPER} > * {\n    height: 100%;\n  }\n\n  .${ELEMENT_SLIDE_IMAGE_CONTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_STANDARD_ELEMENT = `\n  .${ELEMENT_CAROUSEL_IMAGE_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_CAROUSEL_IMAGE_CONTAINER} {\n    overflow: hidden;\n    background-color: ${token.color.gray.lightest};\n  }\n\n  ${LayoutImage.Styles}\n  ${ImageContainerStyles}\n  ${TextContainerStyles}\n  ${OverlayImageContainerStyles}\n  ${IndicatorContainerStyles}\n  ${OverwriteThemeDark}\n`;\n\nexport default (props: TypeCarouselImageStandardProps) =>\n  (() => {\n    const { images, isThemeDark, isFullScreenOption } = props;\n    const elementDeclaration = document.createElement('div');\n    const elementContainer = document.createElement('div');\n    const elementIndicator = document.createElement('div');\n    const overlayCarousel = carouselElements.overlay({\n      images,\n    });\n    let styles = STYLES_CAROUSEL_IMAGE_STANDARD_ELEMENT;\n\n    styles += overlayCarousel.styles;\n\n    const CreateTextContainer = ({\n      headlines,\n      texts,\n      reference,\n    }: {\n      headlines?: HTMLElement[] | null;\n      texts?: HTMLElement[] | null;\n      reference: string | null;\n    }) => {\n      const textContainer = document.createElement('div');\n\n      const headline = headlines?.find(\n        (headline) => headline.getAttribute(ATTRIBUTE_REFERENCE) === reference,\n      );\n      const richText = texts?.find(\n        (text) => text.getAttribute(ATTRIBUTE_REFERENCE) === reference,\n      );\n\n      textContainer.classList.add(ELEMENT_SLIDE_TEXT_CONTAINER);\n\n      if (headline || richText) {\n        if (headline) {\n          headline.classList.add(ELEMENT_SLIDE_HEADLINE);\n          textContainer.appendChild(headline);\n        }\n\n        if (richText) {\n          richText.classList.add(ELEMENT_SLIDE_RICH_TEXT);\n          textContainer.appendChild(richText);\n        }\n\n        return textContainer;\n      }\n\n      return null;\n    };\n\n    const CreateImageContainer = ({\n      image,\n      isFullScreenOption,\n      setFullScreen,\n      index,\n    }: TypeImageContainerProps) => {\n      const imageContainer = document.createElement('div');\n      const imageWrapper = document.createElement('div');\n      const imageBlock = LayoutImage.CreateElement({\n        image,\n        showCaption: true,\n      });\n\n      imageContainer.classList.add(ELEMENT_SLIDE_IMAGE_CONTAINER);\n\n      imageWrapper.classList.add(ELEMENT_SLIDE_IMAGE_WRAPPER);\n      imageWrapper.appendChild(imageBlock);\n\n      if (isFullScreenOption) {\n        const button = buttons.fullscreen.create({\n          callback: setFullScreen,\n          index,\n        });\n        imageBlock.appendChild(button.element);\n\n        styles += button.styles;\n      }\n\n      imageContainer.appendChild(imageWrapper);\n\n      return imageContainer;\n    };\n\n    const CreateSlide = (props: TypeCarouselSlideProps) => {\n      const { images, setFullScreen } = props;\n      const clonedImages = images.map((image) =>\n        image.cloneNode(true),\n      ) as HTMLImageElement[];\n\n      return clonedImages.map((image, index) => {\n        const reference = image.getAttribute(ATTRIBUTE_REFERENCE);\n        const slide = document.createElement('div');\n        const imageContainer = CreateImageContainer({\n          ...props,\n          image,\n          setFullScreen,\n          index,\n        });\n        const textContainer = CreateTextContainer({ ...props, reference });\n\n        slide.classList.add(ELEMENT_SLIDE);\n        slide.appendChild(imageContainer);\n        if (textContainer) slide.appendChild(textContainer);\n\n        return slide;\n      });\n    };\n\n    const slides = CreateSlide({\n      ...props,\n      setFullScreen: overlayCarousel.events.setFullScreen,\n    });\n    const carousel = carouselElements.image({\n      slides,\n      callback: (activeIndex) => {\n        indicator.position(activeIndex);\n      },\n      maxHeight: 500,\n    });\n\n    styles += carousel.styles;\n\n    const indicator = animations.actions.indicator({\n      count: images.length || 0,\n      callback: carousel.events.EventMoveTo,\n      isThemeDark,\n      isThemeLight: !isThemeDark,\n    });\n\n    styles += indicator.styles;\n\n    elementIndicator.classList.add(ELEMENT_CAROUSEL_INDICATOR_WRAPPER);\n    elementIndicator.appendChild(indicator.element);\n\n    elementContainer.classList.add(ELEMENT_CAROUSEL_IMAGE_CONTAINER);\n    elementContainer.appendChild(carousel.element);\n    elementContainer.appendChild(elementIndicator);\n    if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    elementDeclaration.classList.add(ELEMENT_CAROUSEL_IMAGE_DECLARATION);\n    elementDeclaration.appendChild(elementContainer);\n\n    images[images.length - 1].addEventListener('load', carousel.events.Load);\n\n    const responseOptions = {\n      styles,\n      events: {\n        SetEventReize: carousel.events.EventResize,\n      },\n    };\n\n    if (isFullScreenOption) {\n      const element = document.createElement('div');\n\n      element.appendChild(overlayCarousel.element);\n      element.appendChild(elementDeclaration);\n\n      return {\n        element,\n        ...responseOptions,\n      };\n    }\n\n    return {\n      element: elementDeclaration,\n      ...responseOptions,\n    };\n  })();\n"],"names":["carouselElements.overlay","headline","image","isFullScreenOption","index","buttons.fullscreen","props","images","carouselElements.image","indicator","animations.actions.indicator","element"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,SAAS;AAEf,MAAM,sBAAsB;AAC5B,MAAM,kBAAkB;AACxB,MAAM,aAAa;AAEnB,MAAM,gBAAgB,IAAI,eAAe,KAAK,UAAU;AAExD,MAAM,eAAe;AACrB,MAAM,qCACJ;AACF,MAAM,mCAAmC;AAEzC,MAAM,gBAAgB;AACtB,MAAM,gCAAgC;AACtC,MAAM,8BAA8B;AACpC,MAAM,+BAA+B;AACrC,MAAM,yBAAyB;AAC/B,MAAM,0BAA0B;AAChC,MAAM,iCAAiC;AAEvC,MAAM,qCAAqC;AAC3C,MAAM,4CACJ;AAEF,MAAM,iCAAiC,IAAI,gCAAgC,GAAG,aAAa;AAC3F,MAAM,iCAAiC,GAAG,8BAA8B,KAAK,uBAAuB;AACpG,MAAM,sCAAsC,IAAI,gCAAgC,GAAG,aAAa,KAAK,4BAA4B;AACjI,MAAM,uCAAuC,IAAI,gCAAgC,GAAG,aAAa,KAAK,6BAA6B;AACnI,MAAM,iCAAiC,IAAI,gCAAgC,GAAG,aAAa,KAAK,kCAAkC;AAClI,MAAM,8BAA8B,IAAI,gCAAgC,GAAG,aAAa,KAAK,8BAA8B;AAG3H,MAAM,qBAAqB;AAAA,IACvB,8BAA8B;AAAA,IAC9B,mCAAmC;AAAA,IACnC,8BAA8B;AAAA,wBACV,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAGrC,oCAAoC;AAAA,wBAChB,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,IAGzC,mCAAmC;AAAA,aAC1B,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAG1B,2BAA2B;AAAA,wBACP,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAGrC,2BAA2B;AAAA,YACnB,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAGzB,8BAA8B;AAAA,aACrB,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAG1B,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,GAAG,8BAA8B,EAAE,GAAG,QAAQ,KAAK,KAAK;AAAA,EAAA;AAE7D,CAAC,CAAC;AAAA;AAIJ,MAAM,2BAA2B;AAAA,KAC5B,kCAAkC;AAAA,eACxB,MAAM,QAAQ,EAAE;AAAA,wBACP,MAAM,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,eAKlC,YAAY,gBAAgB,MAAM;AAAA,OAC1C,kCAAkC;AAAA,iBACxB,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAMjC,MAAM,8BAA8B;AAAA,KAC/B,yCAAyC;AAAA;AAAA;AAAA;AAAA,wBAItB,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,KAGxC,yCAAyC;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,sBAAsB;AAAA,KACvB,4BAA4B;AAAA,eAClB,MAAM,QAAQ,EAAE;AAAA;AAAA,wBAEP,MAAM,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA,eAGlC,YAAY,gBAAgB,MAAM;AAAA,OAC1C,4BAA4B;AAAA,iBAClB,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,IAK7B,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,sBAAsB,EAAE,GAAG,WAAW,KAAK;AAAA,EAAA;AAEpD,CAAC,CAAC;AAAA;AAAA,KAEC,uBAAuB;AAAA,kBACV,MAAM,QAAQ,GAAG;AAAA,aACtB,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,IAG9B,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,uBAAuB,EAAE,GAAG,QAAQ,KAAK,KAAK;AAAA,EAAA;AAEvD,CAAC,CAAC;AAAA;AAIJ,MAAM,uBAAuB;AAAA,KACxB,6BAA6B;AAAA;AAAA,wBAEV,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,KAGpC,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAY3B,2BAA2B;AAAA;AAAA;AAAA;AAAA,KAI3B,6BAA6B;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,yCAAyC;AAAA,KAC1C,kCAAkC;AAAA,iBACtB,YAAY;AAAA;AAAA;AAAA,KAGxB,gCAAgC;AAAA;AAAA,wBAEb,MAAM,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA,IAG7C,YAAY,MAAM;AAAA,IAClB,oBAAoB;AAAA,IACpB,mBAAmB;AAAA,IACnB,2BAA2B;AAAA,IAC3B,wBAAwB;AAAA,IACxB,kBAAkB;AAAA;AAGtB,MAAA,WAAe,CAAC,WACb,MAAM;AACL,QAAM,EAAE,QAAQ,aAAa,mBAAA,IAAuB;AACpD,QAAM,qBAAqB,SAAS,cAAc,KAAK;AACvD,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,kBAAkBA,QAAyB;AAAA,IAC/C;AAAA,EAAA,CACD;AACD,MAAI,SAAS;AAEb,YAAU,gBAAgB;AAE1B,QAAM,sBAAsB,CAAC;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,EAAA,MAKI;AACJ,UAAM,gBAAgB,SAAS,cAAc,KAAK;AAElD,UAAM,WAAW,WAAW;AAAA,MAC1B,CAACC,cAAaA,UAAS,aAAa,mBAAmB,MAAM;AAAA,IAAA;AAE/D,UAAM,WAAW,OAAO;AAAA,MACtB,CAAC,SAAS,KAAK,aAAa,mBAAmB,MAAM;AAAA,IAAA;AAGvD,kBAAc,UAAU,IAAI,4BAA4B;AAExD,QAAI,YAAY,UAAU;AACxB,UAAI,UAAU;AACZ,iBAAS,UAAU,IAAI,sBAAsB;AAC7C,sBAAc,YAAY,QAAQ;AAAA,MACpC;AAEA,UAAI,UAAU;AACZ,iBAAS,UAAU,IAAI,uBAAuB;AAC9C,sBAAc,YAAY,QAAQ;AAAA,MACpC;AAEA,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,uBAAuB,CAAC;AAAA,IAC5B,OAAAC;AAAA,IACA,oBAAAC;AAAAA,IACA;AAAA,IAAA,OACAC;AAAAA,EAAA,MAC6B;AAC7B,UAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,UAAM,eAAe,SAAS,cAAc,KAAK;AACjD,UAAM,aAAa,YAAY,cAAc;AAAA,MAC3C,OAAAF;AAAA,MACA,aAAa;AAAA,IAAA,CACd;AAED,mBAAe,UAAU,IAAI,6BAA6B;AAE1D,iBAAa,UAAU,IAAI,2BAA2B;AACtD,iBAAa,YAAY,UAAU;AAEnC,QAAIC,qBAAoB;AACtB,YAAM,SAASE,WAAmB,OAAO;AAAA,QACvC,UAAU;AAAA,QAAA,OACVD;AAAAA,MAAA,CACD;AACD,iBAAW,YAAY,OAAO,OAAO;AAErC,gBAAU,OAAO;AAAA,IACnB;AAEA,mBAAe,YAAY,YAAY;AAEvC,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,CAACE,WAAkC;AACrD,UAAM,EAAE,QAAAC,SAAQ,cAAA,IAAkBD;AAClC,UAAM,eAAeC,QAAO;AAAA,MAAI,CAACL,WAC/BA,OAAM,UAAU,IAAI;AAAA,IAAA;AAGtB,WAAO,aAAa,IAAI,CAACA,QAAO,UAAU;AACxC,YAAM,YAAYA,OAAM,aAAa,mBAAmB;AACxD,YAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,YAAM,iBAAiB,qBAAqB;AAAA,QAC1C,GAAGI;AAAAA,QACH,OAAAJ;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AACD,YAAM,gBAAgB,oBAAoB,EAAE,GAAGI,QAAO,WAAW;AAEjE,YAAM,UAAU,IAAI,aAAa;AACjC,YAAM,YAAY,cAAc;AAChC,UAAI,cAAe,OAAM,YAAY,aAAa;AAElD,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,QAAM,SAAS,YAAY;AAAA,IACzB,GAAG;AAAA,IACH,eAAe,gBAAgB,OAAO;AAAA,EAAA,CACvC;AACD,QAAM,WAAWE,MAAuB;AAAA,IACtC;AAAA,IACA,UAAU,CAAC,gBAAgB;AACzBC,kBAAU,SAAS,WAAW;AAAA,IAChC;AAAA,IACA,WAAW;AAAA,EAAA,CACZ;AAED,YAAU,SAAS;AAEnB,QAAMA,cAAYC,UAA6B;AAAA,IAC7C,OAAO,OAAO,UAAU;AAAA,IACxB,UAAU,SAAS,OAAO;AAAA,IAC1B;AAAA,IACA,cAAc,CAAC;AAAA,EAAA,CAChB;AAED,YAAUD,YAAU;AAEpB,mBAAiB,UAAU,IAAI,kCAAkC;AACjE,mBAAiB,YAAYA,YAAU,OAAO;AAE9C,mBAAiB,UAAU,IAAI,gCAAgC;AAC/D,mBAAiB,YAAY,SAAS,OAAO;AAC7C,mBAAiB,YAAY,gBAAgB;AAC7C,MAAI,YAAa,kBAAiB,aAAa,iBAAiB,UAAU;AAE1E,qBAAmB,UAAU,IAAI,kCAAkC;AACnE,qBAAmB,YAAY,gBAAgB;AAE/C,SAAO,OAAO,SAAS,CAAC,EAAE,iBAAiB,QAAQ,SAAS,OAAO,IAAI;AAEvE,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA,QAAQ;AAAA,MACN,eAAe,SAAS,OAAO;AAAA,IAAA;AAAA,EACjC;AAGF,MAAI,oBAAoB;AACtB,UAAME,WAAU,SAAS,cAAc,KAAK;AAE5CA,aAAQ,YAAY,gBAAgB,OAAO;AAC3CA,aAAQ,YAAY,kBAAkB;AAEtC,WAAO;AAAA,MACL,SAAAA;AAAAA,MACA,GAAG;AAAA,IAAA;AAAA,EAEP;AAEA,SAAO;AAAA,IACL,SAAS;AAAA,IACT,GAAG;AAAA,EAAA;AAEP,GAAA;"}

package/dist/composite/carousel/thumbnail/index.js

@@ -1,5 +1,5 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const token = require("@universityofmaryland/web-token-library");
 const blocks = require("../elements/blocks.js");
 require("../elements/full-screen.js");
 require("../elements/overlay.js");

package/dist/composite/carousel/thumbnail/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../source/composite/carousel/thumbnail/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselThumbnailProps = {\n  blocks: HTMLElement[];\n  isThemeDark?: boolean;\n};\n\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-carousel-thumbnail';\nconst ELEMENT_THUMBNAIL_DECLARATION = 'carousel-thumbnail-declaration';\nconst ELEMENT_THUMBNAIL_CONTAINER = 'carousel-thumbnail-container';\nconst ELEMENT_PERSON_SLIDE = 'carousel-person-slide';\nconst ELEMENT_CAROUSEL_THUMBNAIL_BUTTON = 'carousel-thumbnail-button';\n\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${ELEMENT_THUMBNAIL_DECLARATION} .${carouselElements.blocks.Elements.button}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_THUMBNAIL_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_THUMBNAIL_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_THUMBNAIL_BUTTON}`;\nconst OVERWRITE_THEME_DARK_SLIDE = `.${ELEMENT_THUMBNAIL_CONTAINER}${IS_THEME_DARK} .${ELEMENT_PERSON_SLIDE}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n    fill: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_SLIDE} {\n    border: 1px solid ${token.color.gray.dark};\n    border-left: none;\n  }\n\n  ${OVERWRITE_THEME_DARK_SLIDE}:first-child {\n    border-left: 1px solid ${token.color.gray.dark};\n  }\n`;\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n    left: -${token.spacing.md};\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n    right: -${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst PersonSlideStyles = `\n  .${ELEMENT_PERSON_SLIDE} {\n    border: 1px solid ${token.color.gray.light};\n    border-left: none;\n    padding: ${token.spacing.lg};\n  }\n\n  .${ELEMENT_THUMBNAIL_CONTAINER} .${ELEMENT_PERSON_SLIDE}:first-child {\n    border-left: 1px solid ${token.color.gray.light};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_THUMBNAIL_ELEMENT = `\n  .${ELEMENT_THUMBNAIL_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_THUMBNAIL_CONTAINER} {\n    overflow: hidden;\n    padding: 0 ${token.spacing.md};\n  }\n\n  ${carouselElements.blocks.Styles}\n  ${PersonSlideStyles}\n  ${OverwriteCarouselStyles}\n  ${OverwriteThemeDark}\n`;\n\nconst CreatePerson = ({ block }: { block: HTMLElement }) => {\n  const container = document.createElement('div');\n\n  container.appendChild(block);\n  container.classList.add(ELEMENT_PERSON_SLIDE);\n\n  return container;\n};\n\nexport default (props: TypeCarouselThumbnailProps) =>\n  (() => {\n    const { blocks, isThemeDark } = props;\n    const elementDeclaration = document.createElement('div');\n    const elementContainer = document.createElement('div');\n    const slide = document.createElement('div');\n    const blocksWrapper = blocks.map((block) =>\n      CreatePerson({\n        block,\n      }),\n    );\n\n    const carousel = carouselElements.blocks.CreateElement({\n      blocks: blocksWrapper,\n      slide,\n      overwriteDisplayLogic: {\n        mobileBreakpoint: 500,\n        tabletBreakpoint: 900,\n        desktopBreakpoint: 1200,\n        desktopCount: 3,\n        maxCount: 4,\n        blockGap: 0,\n        showHint: false,\n        showMobileHint: false,\n      },\n    });\n\n    elementContainer.appendChild(carousel.element);\n    elementContainer.classList.add(ELEMENT_THUMBNAIL_CONTAINER);\n    if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    elementDeclaration.classList.add(ELEMENT_THUMBNAIL_DECLARATION);\n    elementDeclaration.appendChild(elementContainer);\n\n    return {\n      element: elementDeclaration,\n      styles: STYLES_CAROUSEL_THUMBNAIL_ELEMENT,\n      events: {\n        reize: carousel.events.resize,\n        load: carousel.events.load,\n      },\n    };\n  })();\n"],"names":["carouselElements.blocks","token","blocks"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../source/composite/carousel/thumbnail/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselThumbnailProps = {\n  blocks: HTMLElement[];\n  isThemeDark?: boolean;\n};\n\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-carousel-thumbnail';\nconst ELEMENT_THUMBNAIL_DECLARATION = 'carousel-thumbnail-declaration';\nconst ELEMENT_THUMBNAIL_CONTAINER = 'carousel-thumbnail-container';\nconst ELEMENT_PERSON_SLIDE = 'carousel-person-slide';\nconst ELEMENT_CAROUSEL_THUMBNAIL_BUTTON = 'carousel-thumbnail-button';\n\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${ELEMENT_THUMBNAIL_DECLARATION} .${carouselElements.blocks.Elements.button}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_THUMBNAIL_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_THUMBNAIL_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_THUMBNAIL_BUTTON}`;\nconst OVERWRITE_THEME_DARK_SLIDE = `.${ELEMENT_THUMBNAIL_CONTAINER}${IS_THEME_DARK} .${ELEMENT_PERSON_SLIDE}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n    fill: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_SLIDE} {\n    border: 1px solid ${token.color.gray.dark};\n    border-left: none;\n  }\n\n  ${OVERWRITE_THEME_DARK_SLIDE}:first-child {\n    border-left: 1px solid ${token.color.gray.dark};\n  }\n`;\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n    left: -${token.spacing.md};\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n    right: -${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst PersonSlideStyles = `\n  .${ELEMENT_PERSON_SLIDE} {\n    border: 1px solid ${token.color.gray.light};\n    border-left: none;\n    padding: ${token.spacing.lg};\n  }\n\n  .${ELEMENT_THUMBNAIL_CONTAINER} .${ELEMENT_PERSON_SLIDE}:first-child {\n    border-left: 1px solid ${token.color.gray.light};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_THUMBNAIL_ELEMENT = `\n  .${ELEMENT_THUMBNAIL_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_THUMBNAIL_CONTAINER} {\n    overflow: hidden;\n    padding: 0 ${token.spacing.md};\n  }\n\n  ${carouselElements.blocks.Styles}\n  ${PersonSlideStyles}\n  ${OverwriteCarouselStyles}\n  ${OverwriteThemeDark}\n`;\n\nconst CreatePerson = ({ block }: { block: HTMLElement }) => {\n  const container = document.createElement('div');\n\n  container.appendChild(block);\n  container.classList.add(ELEMENT_PERSON_SLIDE);\n\n  return container;\n};\n\nexport default (props: TypeCarouselThumbnailProps) =>\n  (() => {\n    const { blocks, isThemeDark } = props;\n    const elementDeclaration = document.createElement('div');\n    const elementContainer = document.createElement('div');\n    const slide = document.createElement('div');\n    const blocksWrapper = blocks.map((block) =>\n      CreatePerson({\n        block,\n      }),\n    );\n\n    const carousel = carouselElements.blocks.CreateElement({\n      blocks: blocksWrapper,\n      slide,\n      overwriteDisplayLogic: {\n        mobileBreakpoint: 500,\n        tabletBreakpoint: 900,\n        desktopBreakpoint: 1200,\n        desktopCount: 3,\n        maxCount: 4,\n        blockGap: 0,\n        showHint: false,\n        showMobileHint: false,\n      },\n    });\n\n    elementContainer.appendChild(carousel.element);\n    elementContainer.classList.add(ELEMENT_THUMBNAIL_CONTAINER);\n    if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    elementDeclaration.classList.add(ELEMENT_THUMBNAIL_DECLARATION);\n    elementDeclaration.appendChild(elementContainer);\n\n    return {\n      element: elementDeclaration,\n      styles: STYLES_CAROUSEL_THUMBNAIL_ELEMENT,\n      events: {\n        reize: carousel.events.resize,\n        load: carousel.events.load,\n      },\n    };\n  })();\n"],"names":["carouselElements.blocks","token","blocks"],"mappings":"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"}

package/dist/composite/carousel/thumbnail/index.mjs

@@ -1,4 +1,4 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import * as token from "@universityofmaryland/web-token-library";
 import blocks from "../elements/blocks.mjs";
 import "../elements/full-screen.mjs";
 import "../elements/overlay.mjs";

package/dist/composite/carousel/thumbnail/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../source/composite/carousel/thumbnail/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselThumbnailProps = {\n  blocks: HTMLElement[];\n  isThemeDark?: boolean;\n};\n\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-carousel-thumbnail';\nconst ELEMENT_THUMBNAIL_DECLARATION = 'carousel-thumbnail-declaration';\nconst ELEMENT_THUMBNAIL_CONTAINER = 'carousel-thumbnail-container';\nconst ELEMENT_PERSON_SLIDE = 'carousel-person-slide';\nconst ELEMENT_CAROUSEL_THUMBNAIL_BUTTON = 'carousel-thumbnail-button';\n\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${ELEMENT_THUMBNAIL_DECLARATION} .${carouselElements.blocks.Elements.button}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_THUMBNAIL_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_THUMBNAIL_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_THUMBNAIL_BUTTON}`;\nconst OVERWRITE_THEME_DARK_SLIDE = `.${ELEMENT_THUMBNAIL_CONTAINER}${IS_THEME_DARK} .${ELEMENT_PERSON_SLIDE}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n    fill: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_SLIDE} {\n    border: 1px solid ${token.color.gray.dark};\n    border-left: none;\n  }\n\n  ${OVERWRITE_THEME_DARK_SLIDE}:first-child {\n    border-left: 1px solid ${token.color.gray.dark};\n  }\n`;\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n    left: -${token.spacing.md};\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n    right: -${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst PersonSlideStyles = `\n  .${ELEMENT_PERSON_SLIDE} {\n    border: 1px solid ${token.color.gray.light};\n    border-left: none;\n    padding: ${token.spacing.lg};\n  }\n\n  .${ELEMENT_THUMBNAIL_CONTAINER} .${ELEMENT_PERSON_SLIDE}:first-child {\n    border-left: 1px solid ${token.color.gray.light};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_THUMBNAIL_ELEMENT = `\n  .${ELEMENT_THUMBNAIL_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_THUMBNAIL_CONTAINER} {\n    overflow: hidden;\n    padding: 0 ${token.spacing.md};\n  }\n\n  ${carouselElements.blocks.Styles}\n  ${PersonSlideStyles}\n  ${OverwriteCarouselStyles}\n  ${OverwriteThemeDark}\n`;\n\nconst CreatePerson = ({ block }: { block: HTMLElement }) => {\n  const container = document.createElement('div');\n\n  container.appendChild(block);\n  container.classList.add(ELEMENT_PERSON_SLIDE);\n\n  return container;\n};\n\nexport default (props: TypeCarouselThumbnailProps) =>\n  (() => {\n    const { blocks, isThemeDark } = props;\n    const elementDeclaration = document.createElement('div');\n    const elementContainer = document.createElement('div');\n    const slide = document.createElement('div');\n    const blocksWrapper = blocks.map((block) =>\n      CreatePerson({\n        block,\n      }),\n    );\n\n    const carousel = carouselElements.blocks.CreateElement({\n      blocks: blocksWrapper,\n      slide,\n      overwriteDisplayLogic: {\n        mobileBreakpoint: 500,\n        tabletBreakpoint: 900,\n        desktopBreakpoint: 1200,\n        desktopCount: 3,\n        maxCount: 4,\n        blockGap: 0,\n        showHint: false,\n        showMobileHint: false,\n      },\n    });\n\n    elementContainer.appendChild(carousel.element);\n    elementContainer.classList.add(ELEMENT_THUMBNAIL_CONTAINER);\n    if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    elementDeclaration.classList.add(ELEMENT_THUMBNAIL_DECLARATION);\n    elementDeclaration.appendChild(elementContainer);\n\n    return {\n      element: elementDeclaration,\n      styles: STYLES_CAROUSEL_THUMBNAIL_ELEMENT,\n      events: {\n        reize: carousel.events.resize,\n        load: carousel.events.load,\n      },\n    };\n  })();\n"],"names":["carouselElements.blocks","blocks"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../../source/composite/carousel/thumbnail/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselThumbnailProps = {\n  blocks: HTMLElement[];\n  isThemeDark?: boolean;\n};\n\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-carousel-thumbnail';\nconst ELEMENT_THUMBNAIL_DECLARATION = 'carousel-thumbnail-declaration';\nconst ELEMENT_THUMBNAIL_CONTAINER = 'carousel-thumbnail-container';\nconst ELEMENT_PERSON_SLIDE = 'carousel-person-slide';\nconst ELEMENT_CAROUSEL_THUMBNAIL_BUTTON = 'carousel-thumbnail-button';\n\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${ELEMENT_THUMBNAIL_DECLARATION} .${carouselElements.blocks.Elements.button}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_THUMBNAIL_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_THUMBNAIL_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_THUMBNAIL_BUTTON}`;\nconst OVERWRITE_THEME_DARK_SLIDE = `.${ELEMENT_THUMBNAIL_CONTAINER}${IS_THEME_DARK} .${ELEMENT_PERSON_SLIDE}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n    fill: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_SLIDE} {\n    border: 1px solid ${token.color.gray.dark};\n    border-left: none;\n  }\n\n  ${OVERWRITE_THEME_DARK_SLIDE}:first-child {\n    border-left: 1px solid ${token.color.gray.dark};\n  }\n`;\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n    left: -${token.spacing.md};\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n    right: -${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst PersonSlideStyles = `\n  .${ELEMENT_PERSON_SLIDE} {\n    border: 1px solid ${token.color.gray.light};\n    border-left: none;\n    padding: ${token.spacing.lg};\n  }\n\n  .${ELEMENT_THUMBNAIL_CONTAINER} .${ELEMENT_PERSON_SLIDE}:first-child {\n    border-left: 1px solid ${token.color.gray.light};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_THUMBNAIL_ELEMENT = `\n  .${ELEMENT_THUMBNAIL_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_THUMBNAIL_CONTAINER} {\n    overflow: hidden;\n    padding: 0 ${token.spacing.md};\n  }\n\n  ${carouselElements.blocks.Styles}\n  ${PersonSlideStyles}\n  ${OverwriteCarouselStyles}\n  ${OverwriteThemeDark}\n`;\n\nconst CreatePerson = ({ block }: { block: HTMLElement }) => {\n  const container = document.createElement('div');\n\n  container.appendChild(block);\n  container.classList.add(ELEMENT_PERSON_SLIDE);\n\n  return container;\n};\n\nexport default (props: TypeCarouselThumbnailProps) =>\n  (() => {\n    const { blocks, isThemeDark } = props;\n    const elementDeclaration = document.createElement('div');\n    const elementContainer = document.createElement('div');\n    const slide = document.createElement('div');\n    const blocksWrapper = blocks.map((block) =>\n      CreatePerson({\n        block,\n      }),\n    );\n\n    const carousel = carouselElements.blocks.CreateElement({\n      blocks: blocksWrapper,\n      slide,\n      overwriteDisplayLogic: {\n        mobileBreakpoint: 500,\n        tabletBreakpoint: 900,\n        desktopBreakpoint: 1200,\n        desktopCount: 3,\n        maxCount: 4,\n        blockGap: 0,\n        showHint: false,\n        showMobileHint: false,\n      },\n    });\n\n    elementContainer.appendChild(carousel.element);\n    elementContainer.classList.add(ELEMENT_THUMBNAIL_CONTAINER);\n    if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    elementDeclaration.classList.add(ELEMENT_THUMBNAIL_DECLARATION);\n    elementDeclaration.appendChild(elementContainer);\n\n    return {\n      element: elementDeclaration,\n      styles: STYLES_CAROUSEL_THUMBNAIL_ELEMENT,\n      events: {\n        reize: carousel.events.resize,\n        load: carousel.events.load,\n      },\n    };\n  })();\n"],"names":["carouselElements.blocks","blocks"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
-import { ElementVisual } from '../../../_types';
+import { UMDElement } from '../../../_types';
 interface ElementWithRefsProps<T extends Record<string, any>> {
     className: string;
     element?: HTMLElement;
-    children?: ElementVisual[];
+    children?: UMDElement[];
     elementStyles?: any;
     attributes?: Record<string, string>[];
     refs: T;

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

@@ -1 +1 @@
-{"version":3,"file":"_elementModel.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/wide/_elementModel.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,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,aAAa,EAAE,CAAC;IAC3B,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,CAc1B"}
+{"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,14 +1,27 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../../../model/elements/index.js");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
 function createElementWithRefs(props) {
-  const { refs, element, ...elementProps } = props;
-  const component = element ? index.create({
-    element,
-    ...elementProps
-  }) : index.createDiv(elementProps);
+  const { refs, element, children, elementStyles, attributes, className } = props;
+  const builder = element ? new webBuilderLibrary.ElementBuilder(element) : new webBuilderLibrary.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 {
-    ...component,
+    element: component.element,
+    className,
+    styles: component.styles,
     refs
   };
 }

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

@@ -1 +1 @@
-{"version":3,"file":"_elementModel.js","sources":["../../../../source/composite/carousel/wide/_elementModel.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { type ElementVisual } from '../../../_types';\n\ninterface ElementWithRefsProps<T extends Record<string, any>> {\n  className: string;\n  element?: HTMLElement;\n  children?: ElementVisual[];\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, ...elementProps } = props;\n\n  const component = element\n    ? ElementModel.create({\n        element,\n        ...elementProps,\n      })\n    : ElementModel.createDiv(elementProps);\n\n  return {\n    ...component,\n    refs,\n  };\n}\n"],"names":["ElementModel.create","ElementModel.createDiv"],"mappings":";;;AAmBO,SAAS,sBACd,OAC0B;AAC1B,QAAM,EAAE,MAAM,SAAS,GAAG,iBAAiB;AAE3C,QAAM,YAAY,UACdA,aAAoB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,CACJ,IACDC,MAAAA,UAAuB,YAAY;AAEvC,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,EAAA;AAEJ;;"}
+{"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":["ElementBuilder"],"mappings":";;;AAmBO,SAAS,sBACd,OAC0B;AAC1B,QAAM,EAAE,MAAM,SAAS,UAAU,eAAe,YAAY,cAC1D;AAEF,QAAM,UAAU,UAAU,IAAIA,kBAAAA,eAAe,OAAO,IAAI,IAAIA,iCAAA;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;;"}

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

@@ -1,12 +1,25 @@
-import { create, createDiv } from "../../../model/elements/index.mjs";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 function createElementWithRefs(props) {
-  const { refs, element, ...elementProps } = props;
-  const component = element ? create({
-    element,
-    ...elementProps
-  }) : createDiv(elementProps);
+  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 {
-    ...component,
+    element: component.element,
+    className,
+    styles: component.styles,
     refs
   };
 }

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

@@ -1 +1 @@
-{"version":3,"file":"_elementModel.mjs","sources":["../../../../source/composite/carousel/wide/_elementModel.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { type ElementVisual } from '../../../_types';\n\ninterface ElementWithRefsProps<T extends Record<string, any>> {\n  className: string;\n  element?: HTMLElement;\n  children?: ElementVisual[];\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, ...elementProps } = props;\n\n  const component = element\n    ? ElementModel.create({\n        element,\n        ...elementProps,\n      })\n    : ElementModel.createDiv(elementProps);\n\n  return {\n    ...component,\n    refs,\n  };\n}\n"],"names":["ElementModel.create","ElementModel.createDiv"],"mappings":";AAmBO,SAAS,sBACd,OAC0B;AAC1B,QAAM,EAAE,MAAM,SAAS,GAAG,iBAAiB;AAE3C,QAAM,YAAY,UACdA,OAAoB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,CACJ,IACDC,UAAuB,YAAY;AAEvC,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"_elementModel.mjs","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;"}

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

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/wide/container.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAwBnD,eAAO,MAAM,eAAe,GAC1B,OAAO,iBAAiB,EACxB,mBAAmB,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;;;;;;UAuBhB,oBAAoB;EAK/C,CAAC"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/wide/container.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAuBnD,eAAO,MAAM,eAAe,GAC1B,OAAO,iBAAiB,EACxB,mBAAmB,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;;;;;;UAuBhB,oBAAoB;EAK/C,CAAC"}

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

@@ -1,25 +1,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../../../model/elements/index.js");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
 const controls = require("./controls.js");
 const frames = require("./frames.js");
 const _elementModel = require("./_elementModel.js");
 const createAriaLive = () => {
-  const liveText = index.create({
-    element: document.createElement("p"),
-    className: "umd-carousel-wide__aria-live",
-    attributes: [{ "aria-live": "polite" }],
-    elementStyles: {
-      element: {
-        position: "absolute",
-        left: "-10000px",
-        width: "1px",
-        height: "1px",
-        overflow: "hidden"
-      }
+  const liveText = new webBuilderLibrary.ElementBuilder("p").withClassName("umd-carousel-wide__aria-live").withAttribute("aria-live", "polite").withStyles({
+    element: {
+      position: "absolute",
+      left: "-10000px",
+      width: "1px",
+      height: "1px",
+      overflow: "hidden"
     }
-  });
-  liveText.element.textContent = "Slide 1 Selected";
+  }).withText("Slide 1 Selected").build();
   liveText.element.classList.add("sr-only");
   return liveText;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"container.js","sources":["../../../../source/composite/carousel/wide/container.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { createIndicator } from './controls';\nimport { createFramesContainer } from './frames';\nimport { createElementWithRefs } from './_elementModel';\nimport { type CarouselWideProps } from '../_types';\n\nconst createAriaLive = () => {\n  const liveText = ElementModel.create({\n    element: document.createElement('p'),\n    className: 'umd-carousel-wide__aria-live',\n    attributes: [{ 'aria-live': 'polite' }],\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        left: '-10000px',\n        width: '1px',\n        height: '1px',\n        overflow: 'hidden',\n      },\n    },\n  });\n\n  liveText.element.textContent = 'Slide 1 Selected';\n  liveText.element.classList.add('sr-only');\n\n  return liveText;\n};\n\nexport const createContainer = (\n  props: CarouselWideProps,\n  onIndicatorClick?: (index: number) => void,\n) => {\n  const info = createAriaLive();\n  const framesContainer = createFramesContainer(\n    props.slides,\n    props.isThemeDark,\n  );\n\n  const indicatorWrapper = createIndicator(\n    props.slides,\n    props.isThemeDark,\n    onIndicatorClick,\n  );\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__container',\n    children: [info, framesContainer, indicatorWrapper],\n    elementStyles: {\n      element: {\n        position: 'relative',\n      },\n    },\n    refs: {\n      info: info.element as HTMLParagraphElement,\n      ...framesContainer.refs,\n      indicator: indicatorWrapper.refs.indicator,\n    },\n  });\n};\n"],"names":["ElementModel.create","createFramesContainer","createIndicator","createElementWithRefs"],"mappings":";;;;;;AAMA,MAAM,iBAAiB,MAAM;AAC3B,QAAM,WAAWA,MAAAA,OAAoB;AAAA,IACnC,SAAS,SAAS,cAAc,GAAG;AAAA,IACnC,WAAW;AAAA,IACX,YAAY,CAAC,EAAE,aAAa,UAAU;AAAA,IACtC,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,WAAS,QAAQ,cAAc;AAC/B,WAAS,QAAQ,UAAU,IAAI,SAAS;AAExC,SAAO;AACT;AAEO,MAAM,kBAAkB,CAC7B,OACA,qBACG;AACH,QAAM,OAAO,eAAA;AACb,QAAM,kBAAkBC,OAAAA;AAAAA,IACtB,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAGR,QAAM,mBAAmBC,SAAAA;AAAAA,IACvB,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,EAAA;AAGF,SAAOC,oCAAsB;AAAA,IAC3B,WAAW;AAAA,IACX,UAAU,CAAC,MAAM,iBAAiB,gBAAgB;AAAA,IAClD,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,IAEF,MAAM;AAAA,MACJ,MAAM,KAAK;AAAA,MACX,GAAG,gBAAgB;AAAA,MACnB,WAAW,iBAAiB,KAAK;AAAA,IAAA;AAAA,EACnC,CACD;AACH;;"}
+{"version":3,"file":"container.js","sources":["../../../../source/composite/carousel/wide/container.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { createIndicator } from './controls';\nimport { createFramesContainer } from './frames';\nimport { createElementWithRefs } from './_elementModel';\nimport { type CarouselWideProps } from '../_types';\n\nconst createAriaLive = () => {\n  const liveText = new ElementBuilder('p')\n    .withClassName('umd-carousel-wide__aria-live')\n    .withAttribute('aria-live', 'polite')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        left: '-10000px',\n        width: '1px',\n        height: '1px',\n        overflow: 'hidden',\n      },\n    })\n    .withText('Slide 1 Selected')\n    .build();\n\n  liveText.element.classList.add('sr-only');\n\n  return liveText;\n};\n\nexport const createContainer = (\n  props: CarouselWideProps,\n  onIndicatorClick?: (index: number) => void,\n) => {\n  const info = createAriaLive();\n  const framesContainer = createFramesContainer(\n    props.slides,\n    props.isThemeDark,\n  );\n\n  const indicatorWrapper = createIndicator(\n    props.slides,\n    props.isThemeDark,\n    onIndicatorClick,\n  );\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__container',\n    children: [info, framesContainer, indicatorWrapper],\n    elementStyles: {\n      element: {\n        position: 'relative',\n      },\n    },\n    refs: {\n      info: info.element as HTMLParagraphElement,\n      ...framesContainer.refs,\n      indicator: indicatorWrapper.refs.indicator,\n    },\n  });\n};\n"],"names":["ElementBuilder","createFramesContainer","createIndicator","createElementWithRefs"],"mappings":";;;;;;AAMA,MAAM,iBAAiB,MAAM;AAC3B,QAAM,WAAW,IAAIA,iCAAe,GAAG,EACpC,cAAc,8BAA8B,EAC5C,cAAc,aAAa,QAAQ,EACnC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,SAAS,kBAAkB,EAC3B,MAAA;AAEH,WAAS,QAAQ,UAAU,IAAI,SAAS;AAExC,SAAO;AACT;AAEO,MAAM,kBAAkB,CAC7B,OACA,qBACG;AACH,QAAM,OAAO,eAAA;AACb,QAAM,kBAAkBC,OAAAA;AAAAA,IACtB,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAGR,QAAM,mBAAmBC,SAAAA;AAAAA,IACvB,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,EAAA;AAGF,SAAOC,oCAAsB;AAAA,IAC3B,WAAW;AAAA,IACX,UAAU,CAAC,MAAM,iBAAiB,gBAAgB;AAAA,IAClD,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,IAEF,MAAM;AAAA,MACJ,MAAM,KAAK;AAAA,MACX,GAAG,gBAAgB;AAAA,MACnB,WAAW,iBAAiB,KAAK;AAAA,IAAA;AAAA,EACnC,CACD;AACH;;"}

package/dist/composite/carousel/wide/container.mjs

@@ -1,23 +1,17 @@
-import { create } from "../../../model/elements/index.mjs";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 import { createIndicator } from "./controls.mjs";
 import { createFramesContainer } from "./frames.mjs";
 import { createElementWithRefs } from "./_elementModel.mjs";
 const createAriaLive = () => {
-  const liveText = create({
-    element: document.createElement("p"),
-    className: "umd-carousel-wide__aria-live",
-    attributes: [{ "aria-live": "polite" }],
-    elementStyles: {
-      element: {
-        position: "absolute",
-        left: "-10000px",
-        width: "1px",
-        height: "1px",
-        overflow: "hidden"
-      }
+  const liveText = new ElementBuilder("p").withClassName("umd-carousel-wide__aria-live").withAttribute("aria-live", "polite").withStyles({
+    element: {
+      position: "absolute",
+      left: "-10000px",
+      width: "1px",
+      height: "1px",
+      overflow: "hidden"
     }
-  });
-  liveText.element.textContent = "Slide 1 Selected";
+  }).withText("Slide 1 Selected").build();
   liveText.element.classList.add("sr-only");
   return liveText;
 };

package/dist/composite/carousel/wide/container.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"container.mjs","sources":["../../../../source/composite/carousel/wide/container.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { createIndicator } from './controls';\nimport { createFramesContainer } from './frames';\nimport { createElementWithRefs } from './_elementModel';\nimport { type CarouselWideProps } from '../_types';\n\nconst createAriaLive = () => {\n  const liveText = ElementModel.create({\n    element: document.createElement('p'),\n    className: 'umd-carousel-wide__aria-live',\n    attributes: [{ 'aria-live': 'polite' }],\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        left: '-10000px',\n        width: '1px',\n        height: '1px',\n        overflow: 'hidden',\n      },\n    },\n  });\n\n  liveText.element.textContent = 'Slide 1 Selected';\n  liveText.element.classList.add('sr-only');\n\n  return liveText;\n};\n\nexport const createContainer = (\n  props: CarouselWideProps,\n  onIndicatorClick?: (index: number) => void,\n) => {\n  const info = createAriaLive();\n  const framesContainer = createFramesContainer(\n    props.slides,\n    props.isThemeDark,\n  );\n\n  const indicatorWrapper = createIndicator(\n    props.slides,\n    props.isThemeDark,\n    onIndicatorClick,\n  );\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__container',\n    children: [info, framesContainer, indicatorWrapper],\n    elementStyles: {\n      element: {\n        position: 'relative',\n      },\n    },\n    refs: {\n      info: info.element as HTMLParagraphElement,\n      ...framesContainer.refs,\n      indicator: indicatorWrapper.refs.indicator,\n    },\n  });\n};\n"],"names":["ElementModel.create"],"mappings":";;;;AAMA,MAAM,iBAAiB,MAAM;AAC3B,QAAM,WAAWA,OAAoB;AAAA,IACnC,SAAS,SAAS,cAAc,GAAG;AAAA,IACnC,WAAW;AAAA,IACX,YAAY,CAAC,EAAE,aAAa,UAAU;AAAA,IACtC,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,WAAS,QAAQ,cAAc;AAC/B,WAAS,QAAQ,UAAU,IAAI,SAAS;AAExC,SAAO;AACT;AAEO,MAAM,kBAAkB,CAC7B,OACA,qBACG;AACH,QAAM,OAAO,eAAA;AACb,QAAM,kBAAkB;AAAA,IACtB,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAGR,QAAM,mBAAmB;AAAA,IACvB,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,EAAA;AAGF,SAAO,sBAAsB;AAAA,IAC3B,WAAW;AAAA,IACX,UAAU,CAAC,MAAM,iBAAiB,gBAAgB;AAAA,IAClD,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,IAEF,MAAM;AAAA,MACJ,MAAM,KAAK;AAAA,MACX,GAAG,gBAAgB;AAAA,MACnB,WAAW,iBAAiB,KAAK;AAAA,IAAA;AAAA,EACnC,CACD;AACH;"}
+{"version":3,"file":"container.mjs","sources":["../../../../source/composite/carousel/wide/container.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { createIndicator } from './controls';\nimport { createFramesContainer } from './frames';\nimport { createElementWithRefs } from './_elementModel';\nimport { type CarouselWideProps } from '../_types';\n\nconst createAriaLive = () => {\n  const liveText = new ElementBuilder('p')\n    .withClassName('umd-carousel-wide__aria-live')\n    .withAttribute('aria-live', 'polite')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        left: '-10000px',\n        width: '1px',\n        height: '1px',\n        overflow: 'hidden',\n      },\n    })\n    .withText('Slide 1 Selected')\n    .build();\n\n  liveText.element.classList.add('sr-only');\n\n  return liveText;\n};\n\nexport const createContainer = (\n  props: CarouselWideProps,\n  onIndicatorClick?: (index: number) => void,\n) => {\n  const info = createAriaLive();\n  const framesContainer = createFramesContainer(\n    props.slides,\n    props.isThemeDark,\n  );\n\n  const indicatorWrapper = createIndicator(\n    props.slides,\n    props.isThemeDark,\n    onIndicatorClick,\n  );\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__container',\n    children: [info, framesContainer, indicatorWrapper],\n    elementStyles: {\n      element: {\n        position: 'relative',\n      },\n    },\n    refs: {\n      info: info.element as HTMLParagraphElement,\n      ...framesContainer.refs,\n      indicator: indicatorWrapper.refs.indicator,\n    },\n  });\n};\n"],"names":[],"mappings":";;;;AAMA,MAAM,iBAAiB,MAAM;AAC3B,QAAM,WAAW,IAAI,eAAe,GAAG,EACpC,cAAc,8BAA8B,EAC5C,cAAc,aAAa,QAAQ,EACnC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,SAAS,kBAAkB,EAC3B,MAAA;AAEH,WAAS,QAAQ,UAAU,IAAI,SAAS;AAExC,SAAO;AACT;AAEO,MAAM,kBAAkB,CAC7B,OACA,qBACG;AACH,QAAM,OAAO,eAAA;AACb,QAAM,kBAAkB;AAAA,IACtB,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAGR,QAAM,mBAAmB;AAAA,IACvB,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,EAAA;AAGF,SAAO,sBAAsB;AAAA,IAC3B,WAAW;AAAA,IACX,UAAU,CAAC,MAAM,iBAAiB,gBAAgB;AAAA,IAClD,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,IAEF,MAAM;AAAA,MACJ,MAAM,KAAK;AAAA,MACX,GAAG,gBAAgB;AAAA,MACnB,WAAW,iBAAiB,KAAK;AAAA,IAAA;AAAA,EACnC,CACD;AACH;"}

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

@@ -1,9 +1,5 @@
 import { CarouselWideProps } from '../_types';
-export declare const createControlButton: (type: "prev" | "next", isThemeDark?: boolean) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+export declare const createControlButton: (type: "prev" | "next", isThemeDark?: boolean) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export declare const createIndicator: (slides: CarouselWideProps["slides"], isThemeDark?: boolean, callback?: (index: number) => void) => import('./_elementModel').ElementWithRefsReturn<{
     indicator: {
         element: HTMLDivElement;

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

@@ -1 +1 @@
-{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/wide/controls.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAEnD,eAAO,MAAM,mBAAmB,GAC9B,MAAM,MAAM,GAAG,MAAM,EACrB,cAAc,OAAO;;;;CAiFtB,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,QAAQ,iBAAiB,CAAC,QAAQ,CAAC,EACnC,cAAc,OAAO,EACrB,WAAW,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;EA4BnC,CAAC"}
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/wide/controls.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAEnD,eAAO,MAAM,mBAAmB,GAC9B,MAAM,MAAM,GAAG,MAAM,EACrB,cAAc,OAAO,kFAkFtB,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,QAAQ,iBAAiB,CAAC,QAAQ,CAAC,EACnC,cAAc,OAAO,EACrB,WAAW,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;EA4BnC,CAAC"}

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

@@ -1,29 +1,33 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const token = require("@universityofmaryland/web-styles-library/token");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
 const arrows = require("@universityofmaryland/web-icons-library/arrows");
 require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-styles-library/layout");
+require("@universityofmaryland/web-styles-library/animation");
+require("@universityofmaryland/web-styles-library/typography");
 require("@universityofmaryland/web-utilities-library/media");
 require("@universityofmaryland/web-utilities-library/dom");
 require("@universityofmaryland/web-icons-library/controls");
 require("@universityofmaryland/web-icons-library/communication");
 require("@universityofmaryland/web-icons-library/files");
 require("@universityofmaryland/web-icons-library/brand");
-const index = require("../../../model/elements/index.js");
 const indicator = require("../../../atomic/animations/actions/indicator.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
 require("../../../atomic/animations/brand/card-stack.js");
+require("@universityofmaryland/web-styles-library");
 require("@universityofmaryland/web-utilities-library/performance");
 require("@universityofmaryland/web-utilities-library/accessibility");
 require("@universityofmaryland/web-icons-library/location");
 require("@universityofmaryland/web-icons-library/calendar");
+require("@universityofmaryland/web-utilities-library/theme");
 require("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");
 require("../../../atomic/layout/person/columns.js");
 require("@universityofmaryland/web-icons-library/social");
 require("../../../atomic/text-lockup/date.js");
 require("../../../atomic/text-lockup/small.js");
-require("@universityofmaryland/web-styles-library/typography");
 const _elementModel = require("./_elementModel.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -48,63 +52,58 @@ const createControlButton = (type, isThemeDark) => {
   const buttonTabletPosition = `calc(10vw - (${token__namespace.spacing.md} + ${token__namespace.spacing.md}))`;
   const buttonDesktopPosition = `calc(15vw - (${token__namespace.spacing["xl"]} + ${token__namespace.spacing.md}))`;
   const buttonHighPosition = `calc(20vw - (${token__namespace.spacing["xl"]} + ${token__namespace.spacing.md}))`;
-  const button = index.create({
-    element: document.createElement("button"),
-    className: isPrev ? "umd-carousel-wide__control--prev" : "umd-carousel-wide__control--next",
-    elementStyles: {
-      element: {
-        backgroundColor: isThemeDark ? token__namespace.color.red : token__namespace.color.white,
-        height: token__namespace.spacing.lg,
-        padding: token__namespace.spacing.min,
-        position: "absolute",
-        transform: `${isPrev ? " rotate(180deg)" : ""}`,
-        zIndex: 3,
-        transition: "background 0.5s",
-        width: token__namespace.spacing.lg,
-        [`@media (${token__namespace.media.queries.large.max})`]: {
-          top: `calc(22vw + ${token__namespace.spacing.sm})`,
-          left: isPrev ? "auto" : `${token__namespace.spacing["xl"]}`,
-          right: isPrev ? `${token__namespace.spacing["xl"]}` : "auto"
-        },
-        [`@media (${token__namespace.media.queries.tablet.min})`]: {
-          boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.4)",
-          left: isPrev ? "auto" : buttonTabletPosition,
-          right: isPrev ? buttonTabletPosition : "auto",
-          bottom: "35%"
-        },
-        [`@media (${token__namespace.media.queries.desktop.min})`]: {
-          width: token__namespace.spacing["2xl"],
-          height: token__namespace.spacing["2xl"],
-          padding: token__namespace.spacing.xs,
-          left: isPrev ? "auto" : buttonDesktopPosition,
-          right: isPrev ? buttonDesktopPosition : "auto"
-        },
-        [`@media (${token__namespace.media.queries.highDef.min})`]: {
-          left: isPrev ? "auto" : buttonHighPosition,
-          right: isPrev ? buttonHighPosition : "auto"
-        },
+  const srText = new webBuilderLibrary.ElementBuilder("span").withClassName("sr-only").withText(altText).build();
+  const button = new webBuilderLibrary.ElementBuilder("button").withClassName(
+    isPrev ? "umd-carousel-wide__control--prev" : "umd-carousel-wide__control--next"
+  ).withStyles({
+    element: {
+      backgroundColor: isThemeDark ? token__namespace.color.red : token__namespace.color.white,
+      height: token__namespace.spacing.lg,
+      padding: token__namespace.spacing.min,
+      position: "absolute",
+      transform: `${isPrev ? " rotate(180deg)" : ""}`,
+      zIndex: 3,
+      transition: "background 0.5s",
+      width: token__namespace.spacing.lg,
+      [`@media (${token__namespace.media.queries.large.max})`]: {
+        top: `calc(22vw + ${token__namespace.spacing.sm})`,
+        left: isPrev ? "auto" : `${token__namespace.spacing["xl"]}`,
+        right: isPrev ? `${token__namespace.spacing["xl"]}` : "auto"
+      },
+      [`@media (${token__namespace.media.queries.tablet.min})`]: {
+        boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.4)",
+        left: isPrev ? "auto" : buttonTabletPosition,
+        right: isPrev ? buttonTabletPosition : "auto",
+        bottom: "35%"
+      },
+      [`@media (${token__namespace.media.queries.desktop.min})`]: {
+        width: token__namespace.spacing["2xl"],
+        height: token__namespace.spacing["2xl"],
+        padding: token__namespace.spacing.xs,
+        left: isPrev ? "auto" : buttonDesktopPosition,
+        right: isPrev ? buttonDesktopPosition : "auto"
+      },
+      [`@media (${token__namespace.media.queries.highDef.min})`]: {
+        left: isPrev ? "auto" : buttonHighPosition,
+        right: isPrev ? buttonHighPosition : "auto"
+      },
+      "& svg": {
+        height: "100%",
+        width: "100%",
+        fill: isThemeDark ? token__namespace.color.white : token__namespace.color.black,
+        transition: "fill 0.5s"
+      },
+      "&:hover, &:focus": {
+        backgroundColor: isThemeDark ? token__namespace.color.redDark : token__namespace.color.red,
         "& svg": {
-          height: "100%",
-          width: "100%",
-          fill: isThemeDark ? token__namespace.color.white : token__namespace.color.black,
-          transition: "fill 0.5s"
-        },
-        "&:hover, &:focus": {
-          backgroundColor: isThemeDark ? token__namespace.color.redDark : token__namespace.color.red,
-          "& svg": {
-            fill: token__namespace.color.white
-          }
+          fill: token__namespace.color.white
         }
       }
     }
-  });
-  const srText = index.create({
-    element: document.createElement("span"),
-    className: "sr-only"
-  });
-  srText.element.textContent = altText;
-  button.element.append(srText.element);
-  button.element.insertAdjacentHTML("afterbegin", arrows.arrow_left);
+  }).withModifier((el) => {
+    el.append(srText.element);
+    el.insertAdjacentHTML("afterbegin", arrows.arrow_left);
+  }).build();
   return button;
 };
 const createIndicator = (slides, isThemeDark, callback) => {

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

@@ -1 +1 @@
-{"version":3,"file":"controls.js","sources":["../../../../source/composite/carousel/wide/controls.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { arrow_left as iconArrowLeft } from '@universityofmaryland/web-icons-library/arrows';\nimport { animations } from 'atomic';\nimport { ElementModel } from 'model';\nimport { createElementWithRefs } from './_elementModel';\nimport { type CarouselWideProps } from '../_types';\n\nexport const createControlButton = (\n  type: 'prev' | 'next',\n  isThemeDark?: boolean,\n) => {\n  const isPrev = type === 'prev';\n  const altText = isPrev\n    ? 'Reverse to the previous Slide'\n    : 'Advanced to the Next Slide';\n\n  const buttonTabletPosition = `calc(10vw - (${token.spacing.md} + ${token.spacing.md}))`;\n  const buttonDesktopPosition = `calc(15vw - (${token.spacing['xl']} + ${token.spacing.md}))`;\n  const buttonHighPosition = `calc(20vw - (${token.spacing['xl']} + ${token.spacing.md}))`;\n\n  const button = ElementModel.create({\n    element: document.createElement('button'),\n    className: isPrev\n      ? 'umd-carousel-wide__control--prev'\n      : 'umd-carousel-wide__control--next',\n    elementStyles: {\n      element: {\n        backgroundColor: isThemeDark ? token.color.red : token.color.white,\n        height: token.spacing.lg,\n        padding: token.spacing.min,\n        position: 'absolute',\n        transform: `${isPrev ? ' rotate(180deg)' : ''}`,\n        zIndex: 3,\n        transition: 'background 0.5s',\n        width: token.spacing.lg,\n\n        [`@media (${token.media.queries.large.max})`]: {\n          top: `calc(22vw + ${token.spacing.sm})`,\n          left: isPrev ? 'auto' : `${token.spacing['xl']}`,\n          right: isPrev ? `${token.spacing['xl']}` : 'auto',\n        },\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n          left: isPrev ? 'auto' : buttonTabletPosition,\n          right: isPrev ? buttonTabletPosition : 'auto',\n          bottom: '35%',\n        },\n\n        [`@media (${token.media.queries.desktop.min})`]: {\n          width: token.spacing['2xl'],\n          height: token.spacing['2xl'],\n          padding: token.spacing.xs,\n          left: isPrev ? 'auto' : buttonDesktopPosition,\n          right: isPrev ? buttonDesktopPosition : 'auto',\n        },\n\n        [`@media (${token.media.queries.highDef.min})`]: {\n          left: isPrev ? 'auto' : buttonHighPosition,\n          right: isPrev ? buttonHighPosition : 'auto',\n        },\n\n        '& svg': {\n          height: '100%',\n          width: '100%',\n          fill: isThemeDark ? token.color.white : token.color.black,\n          transition: 'fill 0.5s',\n        },\n\n        '&:hover, &:focus': {\n          backgroundColor: isThemeDark ? token.color.redDark : token.color.red,\n\n          '& svg': {\n            fill: token.color.white,\n          },\n        },\n      },\n    },\n  });\n\n  const srText = ElementModel.create({\n    element: document.createElement('span'),\n    className: 'sr-only',\n  });\n  srText.element.textContent = altText;\n\n  button.element.append(srText.element);\n  button.element.insertAdjacentHTML('afterbegin', iconArrowLeft);\n\n  return button;\n};\n\nexport const createIndicator = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n  callback?: (index: number) => void,\n) => {\n  const indicator = animations.actions.indicator({\n    count: slides.length,\n    isThemeDark,\n    callback: callback || (() => {}),\n  });\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__drawer',\n    children: [indicator],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        margin: 'auto',\n        padding: token.spacing.md,\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          padding: 0,\n          paddingTop: token.spacing.lg,\n        },\n      },\n    },\n    refs: {\n      indicator,\n    },\n  });\n};\n"],"names":["token","ElementModel.create","iconArrowLeft","indicator","animations.actions.indicator","createElementWithRefs"],"mappings":"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"}
+{"version":3,"file":"controls.js","sources":["../../../../source/composite/carousel/wide/controls.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { arrow_left as iconArrowLeft } from '@universityofmaryland/web-icons-library/arrows';\nimport { animations } from 'atomic';\nimport { createElementWithRefs } from './_elementModel';\nimport { type CarouselWideProps } from '../_types';\n\nexport const createControlButton = (\n  type: 'prev' | 'next',\n  isThemeDark?: boolean,\n) => {\n  const isPrev = type === 'prev';\n  const altText = isPrev\n    ? 'Reverse to the previous Slide'\n    : 'Advanced to the Next Slide';\n\n  const buttonTabletPosition = `calc(10vw - (${token.spacing.md} + ${token.spacing.md}))`;\n  const buttonDesktopPosition = `calc(15vw - (${token.spacing['xl']} + ${token.spacing.md}))`;\n  const buttonHighPosition = `calc(20vw - (${token.spacing['xl']} + ${token.spacing.md}))`;\n\n  const srText = new ElementBuilder('span')\n    .withClassName('sr-only')\n    .withText(altText)\n    .build();\n\n  const button = new ElementBuilder('button')\n    .withClassName(\n      isPrev\n        ? 'umd-carousel-wide__control--prev'\n        : 'umd-carousel-wide__control--next',\n    )\n    .withStyles({\n      element: {\n        backgroundColor: isThemeDark ? token.color.red : token.color.white,\n        height: token.spacing.lg,\n        padding: token.spacing.min,\n        position: 'absolute',\n        transform: `${isPrev ? ' rotate(180deg)' : ''}`,\n        zIndex: 3,\n        transition: 'background 0.5s',\n        width: token.spacing.lg,\n\n        [`@media (${token.media.queries.large.max})`]: {\n          top: `calc(22vw + ${token.spacing.sm})`,\n          left: isPrev ? 'auto' : `${token.spacing['xl']}`,\n          right: isPrev ? `${token.spacing['xl']}` : 'auto',\n        },\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n          left: isPrev ? 'auto' : buttonTabletPosition,\n          right: isPrev ? buttonTabletPosition : 'auto',\n          bottom: '35%',\n        },\n\n        [`@media (${token.media.queries.desktop.min})`]: {\n          width: token.spacing['2xl'],\n          height: token.spacing['2xl'],\n          padding: token.spacing.xs,\n          left: isPrev ? 'auto' : buttonDesktopPosition,\n          right: isPrev ? buttonDesktopPosition : 'auto',\n        },\n\n        [`@media (${token.media.queries.highDef.min})`]: {\n          left: isPrev ? 'auto' : buttonHighPosition,\n          right: isPrev ? buttonHighPosition : 'auto',\n        },\n\n        '& svg': {\n          height: '100%',\n          width: '100%',\n          fill: isThemeDark ? token.color.white : token.color.black,\n          transition: 'fill 0.5s',\n        },\n\n        '&:hover, &:focus': {\n          backgroundColor: isThemeDark ? token.color.redDark : token.color.red,\n\n          '& svg': {\n            fill: token.color.white,\n          },\n        },\n      },\n    })\n    .withModifier((el) => {\n      el.append(srText.element);\n      el.insertAdjacentHTML('afterbegin', iconArrowLeft);\n    })\n    .build();\n\n  return button;\n};\n\nexport const createIndicator = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n  callback?: (index: number) => void,\n) => {\n  const indicator = animations.actions.indicator({\n    count: slides.length,\n    isThemeDark,\n    callback: callback || (() => {}),\n  });\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__drawer',\n    children: [indicator],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        margin: 'auto',\n        padding: token.spacing.md,\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          padding: 0,\n          paddingTop: token.spacing.lg,\n        },\n      },\n    },\n    refs: {\n      indicator,\n    },\n  });\n};\n"],"names":["token","ElementBuilder","iconArrowLeft","indicator","animations.actions.indicator","createElementWithRefs"],"mappings":"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"}