@universityofmaryland/web-elements-library 1.4.5 → 1.4.7

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

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

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

@@ -6,6 +6,7 @@ import "../../../model/modifiers/index.mjs";
 import "../../../model/elements/headline.mjs";
 import "../../../atomic/animations/actions/indicator.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
+import "../../../atomic/animations/brand/card-stack.mjs";
 import fullscreen from "../../../atomic/buttons/fullscreen.mjs";
 import "../../../atomic/layout/block/stacked.mjs";
 import "../../../atomic/layout/overlay/modal.mjs";

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

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

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

@@ -5,6 +5,7 @@ require("../../../model/modifiers/index.js");
 require("../../../model/elements/headline.js");
 const indicator = require("../../../atomic/animations/actions/indicator.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
+require("../../../atomic/animations/brand/card-stack.js");
 const fullscreen = require("../../../atomic/buttons/fullscreen.js");
 require("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");

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

@@ -1 +1 @@
-{"version":3,"file":"standard.js","sources":["../../../../source/composite/carousel/image/standard.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { animations, buttons } from 'atomic';\nimport { Image as LayoutImage } from 'layout';\nimport * as Utility from 'utilities';\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 { element, token, typography } = Styles;\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_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\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  ${Utility.theme.convertJSSObjectToStyles({\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  ${Utility.theme.convertJSSObjectToStyles({\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":["Styles","Utility.theme.convertJSSObjectToStyles","LayoutImage","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.js","sources":["../../../../source/composite/carousel/image/standard.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { animations, buttons } from 'atomic';\nimport { Image as LayoutImage } from 'layout';\nimport * as Utility from 'utilities';\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 { element, token, typography } = Styles;\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_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\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  ${Utility.theme.convertJSSObjectToStyles({\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  ${Utility.theme.convertJSSObjectToStyles({\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":["Styles","Utility.theme.convertJSSObjectToStyles","LayoutImage","carouselElements.overlay","headline","image","isFullScreenOption","index","buttons.fullscreen","props","images","carouselElements.image","indicator","animations.actions.indicator","element"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAM,EAAE,SAAS,OAAO,WAAA,IAAeA;AAEvC,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,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;AAK7B,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,IAK7BC,+BAAuC;AAAA,EACvC,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,IAG9BA,+BAAuC;AAAA,EACvC,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,IAG7CC,MAAY,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,kBAAkBC,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,IAAA,OAC5BC;AAAAA,IACA,oBAAAC;AAAAA,IACA;AAAA,IAAA,OACAC;AAAAA,EAAA,MAC6B;AAC7B,UAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,UAAM,eAAe,SAAS,cAAc,KAAK;AACjD,UAAM,aAAaL,MAAY,cAAc;AAAA,MAAA,OAC3CG;AAAAA,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,QAAOE,WAAU;AACxC,YAAM,YAAYF,OAAM,aAAa,mBAAmB;AACxD,YAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,YAAM,iBAAiB,qBAAqB;AAAA,QAC1C,GAAGI;AAAAA,QACH,OAAAJ;AAAA,QACA;AAAA,QACA,OAAAE;AAAA,MAAA,CACD;AACD,YAAM,gBAAgB,oBAAoB,EAAE,GAAGE,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,QAAuB;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/image/standard.mjs

@@ -4,6 +4,7 @@ import "../../../model/modifiers/index.mjs";
 import "../../../model/elements/headline.mjs";
 import indicator from "../../../atomic/animations/actions/indicator.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
+import "../../../atomic/animations/brand/card-stack.mjs";
 import fullscreen from "../../../atomic/buttons/fullscreen.mjs";
 import "../../../atomic/layout/block/stacked.mjs";
 import "../../../atomic/layout/overlay/modal.mjs";

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

@@ -1 +1 @@
-{"version":3,"file":"standard.mjs","sources":["../../../../source/composite/carousel/image/standard.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { animations, buttons } from 'atomic';\nimport { Image as LayoutImage } from 'layout';\nimport * as Utility from 'utilities';\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 { element, token, typography } = Styles;\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_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\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  ${Utility.theme.convertJSSObjectToStyles({\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  ${Utility.theme.convertJSSObjectToStyles({\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":["Utility.theme.convertJSSObjectToStyles","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 * as Styles from '@universityofmaryland/web-styles-library';\nimport { animations, buttons } from 'atomic';\nimport { Image as LayoutImage } from 'layout';\nimport * as Utility from 'utilities';\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 { element, token, typography } = Styles;\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_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\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  ${Utility.theme.convertJSSObjectToStyles({\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  ${Utility.theme.convertJSSObjectToStyles({\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":["Utility.theme.convertJSSObjectToStyles","carouselElements.overlay","headline","image","isFullScreenOption","index","buttons.fullscreen","props","images","carouselElements.image","indicator","animations.actions.indicator","element"],"mappings":"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"}

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

@@ -8,6 +8,7 @@ require("../../../node_modules/postcss-js/index.js");
 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("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");
 require("../../../atomic/layout/person/columns.js");

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 Styles from '@universityofmaryland/web-styles-library';\nimport { asset } from 'utilities';\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 - (${Styles.token.spacing.md} + ${Styles.token.spacing.md}))`;\n  const buttonDesktopPosition = `calc(15vw - (${Styles.token.spacing['xl']} + ${Styles.token.spacing.md}))`;\n  const buttonHighPosition = `calc(20vw - (${Styles.token.spacing['xl']} + ${Styles.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\n          ? Styles.token.color.red\n          : Styles.token.color.white,\n        height: Styles.token.spacing.lg,\n        padding: Styles.token.spacing.min,\n        position: 'absolute',\n        transform: `${isPrev ? ' rotate(180deg)' : ''}`,\n        zIndex: 3,\n        transition: 'background 0.5s',\n        width: Styles.token.spacing.lg,\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          top: `calc(22vw + ${Styles.token.spacing.sm})`,\n          left: isPrev ? 'auto' : `${Styles.token.spacing['xl']}`,\n          right: isPrev ? `${Styles.token.spacing['xl']}` : 'auto',\n        },\n\n        [`@media (${Styles.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 (${Styles.token.media.queries.desktop.min})`]: {\n          width: Styles.token.spacing['2xl'],\n          height: Styles.token.spacing['2xl'],\n          padding: Styles.token.spacing.xs,\n          left: isPrev ? 'auto' : buttonDesktopPosition,\n          right: isPrev ? buttonDesktopPosition : 'auto',\n        },\n\n        [`@media (${Styles.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\n            ? Styles.token.color.white\n            : Styles.token.color.black,\n          transition: 'fill 0.5s',\n        },\n\n        '&:hover, &:focus': {\n          backgroundColor: isThemeDark\n            ? Styles.token.color.redDark\n            : Styles.token.color.red,\n\n          '& svg': {\n            fill: Styles.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', asset.icon.BACK_ARROW);\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: Styles.token.spacing.md,\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          padding: 0,\n          paddingTop: Styles.token.spacing.lg,\n        },\n      },\n    },\n    refs: {\n      indicator,\n    },\n  });\n};\n"],"names":["Styles","ElementModel.create","asset.icon.BACK_ARROW","indicator","animations.actions.indicator","createElementWithRefs"],"mappings":"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"}
+{"version":3,"file":"controls.js","sources":["../../../../source/composite/carousel/wide/controls.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { asset } from 'utilities';\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 - (${Styles.token.spacing.md} + ${Styles.token.spacing.md}))`;\n  const buttonDesktopPosition = `calc(15vw - (${Styles.token.spacing['xl']} + ${Styles.token.spacing.md}))`;\n  const buttonHighPosition = `calc(20vw - (${Styles.token.spacing['xl']} + ${Styles.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\n          ? Styles.token.color.red\n          : Styles.token.color.white,\n        height: Styles.token.spacing.lg,\n        padding: Styles.token.spacing.min,\n        position: 'absolute',\n        transform: `${isPrev ? ' rotate(180deg)' : ''}`,\n        zIndex: 3,\n        transition: 'background 0.5s',\n        width: Styles.token.spacing.lg,\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          top: `calc(22vw + ${Styles.token.spacing.sm})`,\n          left: isPrev ? 'auto' : `${Styles.token.spacing['xl']}`,\n          right: isPrev ? `${Styles.token.spacing['xl']}` : 'auto',\n        },\n\n        [`@media (${Styles.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 (${Styles.token.media.queries.desktop.min})`]: {\n          width: Styles.token.spacing['2xl'],\n          height: Styles.token.spacing['2xl'],\n          padding: Styles.token.spacing.xs,\n          left: isPrev ? 'auto' : buttonDesktopPosition,\n          right: isPrev ? buttonDesktopPosition : 'auto',\n        },\n\n        [`@media (${Styles.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\n            ? Styles.token.color.white\n            : Styles.token.color.black,\n          transition: 'fill 0.5s',\n        },\n\n        '&:hover, &:focus': {\n          backgroundColor: isThemeDark\n            ? Styles.token.color.redDark\n            : Styles.token.color.red,\n\n          '& svg': {\n            fill: Styles.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', asset.icon.BACK_ARROW);\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: Styles.token.spacing.md,\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          padding: 0,\n          paddingTop: Styles.token.spacing.lg,\n        },\n      },\n    },\n    refs: {\n      indicator,\n    },\n  });\n};\n"],"names":["Styles","ElementModel.create","asset.icon.BACK_ARROW","indicator","animations.actions.indicator","createElementWithRefs"],"mappings":"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"}

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

@@ -6,6 +6,7 @@ import "../../../node_modules/postcss-js/index.mjs";
 import { create } from "../../../model/elements/index.mjs";
 import indicator from "../../../atomic/animations/actions/indicator.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
+import "../../../atomic/animations/brand/card-stack.mjs";
 import "../../../atomic/layout/block/stacked.mjs";
 import "../../../atomic/layout/overlay/modal.mjs";
 import "../../../atomic/layout/person/columns.mjs";

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

@@ -1 +1 @@
-{"version":3,"file":"controls.mjs","sources":["../../../../source/composite/carousel/wide/controls.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { asset } from 'utilities';\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 - (${Styles.token.spacing.md} + ${Styles.token.spacing.md}))`;\n  const buttonDesktopPosition = `calc(15vw - (${Styles.token.spacing['xl']} + ${Styles.token.spacing.md}))`;\n  const buttonHighPosition = `calc(20vw - (${Styles.token.spacing['xl']} + ${Styles.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\n          ? Styles.token.color.red\n          : Styles.token.color.white,\n        height: Styles.token.spacing.lg,\n        padding: Styles.token.spacing.min,\n        position: 'absolute',\n        transform: `${isPrev ? ' rotate(180deg)' : ''}`,\n        zIndex: 3,\n        transition: 'background 0.5s',\n        width: Styles.token.spacing.lg,\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          top: `calc(22vw + ${Styles.token.spacing.sm})`,\n          left: isPrev ? 'auto' : `${Styles.token.spacing['xl']}`,\n          right: isPrev ? `${Styles.token.spacing['xl']}` : 'auto',\n        },\n\n        [`@media (${Styles.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 (${Styles.token.media.queries.desktop.min})`]: {\n          width: Styles.token.spacing['2xl'],\n          height: Styles.token.spacing['2xl'],\n          padding: Styles.token.spacing.xs,\n          left: isPrev ? 'auto' : buttonDesktopPosition,\n          right: isPrev ? buttonDesktopPosition : 'auto',\n        },\n\n        [`@media (${Styles.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\n            ? Styles.token.color.white\n            : Styles.token.color.black,\n          transition: 'fill 0.5s',\n        },\n\n        '&:hover, &:focus': {\n          backgroundColor: isThemeDark\n            ? Styles.token.color.redDark\n            : Styles.token.color.red,\n\n          '& svg': {\n            fill: Styles.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', asset.icon.BACK_ARROW);\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: Styles.token.spacing.md,\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          padding: 0,\n          paddingTop: Styles.token.spacing.lg,\n        },\n      },\n    },\n    refs: {\n      indicator,\n    },\n  });\n};\n"],"names":["ElementModel.create","asset.icon.BACK_ARROW","indicator","animations.actions.indicator"],"mappings":"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"}
+{"version":3,"file":"controls.mjs","sources":["../../../../source/composite/carousel/wide/controls.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { asset } from 'utilities';\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 - (${Styles.token.spacing.md} + ${Styles.token.spacing.md}))`;\n  const buttonDesktopPosition = `calc(15vw - (${Styles.token.spacing['xl']} + ${Styles.token.spacing.md}))`;\n  const buttonHighPosition = `calc(20vw - (${Styles.token.spacing['xl']} + ${Styles.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\n          ? Styles.token.color.red\n          : Styles.token.color.white,\n        height: Styles.token.spacing.lg,\n        padding: Styles.token.spacing.min,\n        position: 'absolute',\n        transform: `${isPrev ? ' rotate(180deg)' : ''}`,\n        zIndex: 3,\n        transition: 'background 0.5s',\n        width: Styles.token.spacing.lg,\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          top: `calc(22vw + ${Styles.token.spacing.sm})`,\n          left: isPrev ? 'auto' : `${Styles.token.spacing['xl']}`,\n          right: isPrev ? `${Styles.token.spacing['xl']}` : 'auto',\n        },\n\n        [`@media (${Styles.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 (${Styles.token.media.queries.desktop.min})`]: {\n          width: Styles.token.spacing['2xl'],\n          height: Styles.token.spacing['2xl'],\n          padding: Styles.token.spacing.xs,\n          left: isPrev ? 'auto' : buttonDesktopPosition,\n          right: isPrev ? buttonDesktopPosition : 'auto',\n        },\n\n        [`@media (${Styles.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\n            ? Styles.token.color.white\n            : Styles.token.color.black,\n          transition: 'fill 0.5s',\n        },\n\n        '&:hover, &:focus': {\n          backgroundColor: isThemeDark\n            ? Styles.token.color.redDark\n            : Styles.token.color.red,\n\n          '& svg': {\n            fill: Styles.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', asset.icon.BACK_ARROW);\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: Styles.token.spacing.md,\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          padding: 0,\n          paddingTop: Styles.token.spacing.lg,\n        },\n      },\n    },\n    refs: {\n      indicator,\n    },\n  });\n};\n"],"names":["ElementModel.create","asset.icon.BACK_ARROW","indicator","animations.actions.indicator"],"mappings":"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"}

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

@@ -7,6 +7,7 @@ require("../../../node_modules/postcss-js/index.js");
 const index = require("../../../model/elements/index.js");
 require("../../../atomic/animations/actions/indicator.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
+require("../../../atomic/animations/brand/card-stack.js");
 const background = require("../../../atomic/assets/image/background.js");
 require("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");

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

@@ -1 +1 @@
-{"version":3,"file":"frames.js","sources":["../../../../source/composite/carousel/wide/frames.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { createElementWithRefs } from './_elementModel';\nimport { createControlButton } from './controls';\nimport { type ElementVisual } from '../../../_types';\nimport { type CarouselWideProps } from '../_types';\n\nconst ASPECT_RATIO = '16 / 9';\n\nconst createSlideContent = ({\n  slide,\n  isThemeDark,\n}: {\n  slide: CarouselWideProps['slides'][0];\n  isThemeDark?: boolean;\n}) => {\n  const children: ElementVisual[] = [];\n\n  // Create content container first to get reference\n  let contentContainer: ElementVisual | null = null;\n\n  const closeButton = ElementModel.create({\n    element: document.createElement('button'),\n    className: 'umd-carousel-wide__slide-content-close',\n    attributes: [{ type: 'button' }, { 'aria-label': 'Close content' }],\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: 0,\n        right: 0,\n        background: 'transparent',\n        border: 'none',\n        cursor: 'pointer',\n        fontSize: '20px',\n        fontWeight: 'bold',\n        padding: Styles.token.spacing.min,\n        lineHeight: 1,\n        color: Styles.token.color.gray.dark,\n        transition: 'color 0.2s ease',\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          display: 'none',\n        },\n\n        '&:hover, &:focus': {\n          outline: `2px solid ${Styles.token.color.blue}`,\n        },\n\n        ...(isThemeDark && {\n          color: Styles.token.color.gray.light,\n          '&:hover': {\n            color: Styles.token.color.white,\n          },\n        }),\n      },\n    },\n  });\n\n  closeButton.element.innerHTML = '×';\n\n  closeButton.element.addEventListener('click', () => {\n    if (contentContainer) contentContainer.element.style.display = 'none';\n  });\n\n  children.push(closeButton);\n\n  if (slide.headline) {\n    children.push(\n      ElementModel.headline.sansLarge({\n        element: slide.headline,\n        elementStyles: {\n          element: {\n            color: `${Styles.token.color.black}`,\n          },\n          siblingAfter: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (slide.text) {\n    children.push(\n      ElementModel.richText.simple({\n        element: slide.text,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (children.length === 1) return null;\n\n  contentContainer = ElementModel.createDiv({\n    className: 'umd-carousel-wide__slide-content',\n    children,\n    elementStyles: {\n      element: {\n        backgroundColor: Styles.token.color.white,\n        border: `1px solid ${Styles.token.color.gray.light}`,\n        display: 'block',\n        padding: Styles.token.spacing.md,\n        width: '100%',\n        position: 'relative',\n        opacity: 0,\n        transform: 'translateY(20px)',\n        transition: 'opacity 0.6s ease-out, transform 0.6s ease-out',\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n          border: `1px solid ${Styles.token.color.gray.dark}`,\n        }),\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          borderTop: 'none',\n        },\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          border: 'none',\n          boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n          maxWidth: '50%',\n          position: 'absolute',\n          bottom: Styles.token.spacing.sm,\n          left: Styles.token.spacing.sm,\n\n          ...(isThemeDark && {\n            border: 'none',\n            boxShadow: 'none',\n          }),\n        },\n      },\n    },\n  });\n\n  return contentContainer;\n};\n\nconst createMainFrameSlide = (\n  slide: CarouselWideProps['slides'][0],\n  index: number,\n  isThemeDark?: boolean,\n) => {\n  const children: ElementVisual[] = [];\n  const slideContentWrapper = createSlideContent({ slide, isThemeDark });\n\n  children.push(\n    assets.image.background({\n      element: slide.image,\n      isScaled: true,\n    }),\n  );\n\n  if (slideContentWrapper) children.push(slideContentWrapper);\n\n  return ElementModel.create({\n    element: document.createElement('figure'),\n    className: 'umd-carousel-wide__slide',\n    children,\n    attributes: [{ 'data-index': `${index}` }],\n    elementStyles: {\n      element: {\n        display: 'none',\n        opacity: 0,\n        transition: 'opacity 0.3s ease-in-out, transform 0.5s ease-in-out',\n        transform: 'translateX(0)',\n        aspectRatio: ASPECT_RATIO,\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          width: '100%',\n          height: '100%',\n          top: 0,\n          left: 0,\n        },\n\n        '&[data-active=\"true\"]': {\n          opacity: 1,\n          transform: 'translateX(0)',\n          zIndex: 2,\n          display: 'block',\n        },\n\n        '&[data-animating=\"true\"]': {\n          zIndex: 1,\n          display: 'block',\n          opacity: 1,\n\n          [`@media (${Styles.token.media.queries.large.max})`]: {\n            position: 'absolute',\n            width: '100%',\n            top: 0,\n            left: 0,\n          },\n        },\n\n        '&[data-direction=\"left\"]': {\n          transform: 'translateX(-100%)',\n        },\n\n        '&[data-direction=\"right\"]': {\n          transform: 'translateX(100%)',\n        },\n\n        '&[data-content-visible=\"true\"] .umd-carousel-wide__slide-content': {\n          opacity: 1,\n          transform: 'translateY(0)',\n        },\n      },\n    },\n  });\n};\n\nconst createPreviewContainer = (position: 'left' | 'right') => {\n  const isPositionLeft = position === 'left';\n  return ElementModel.createDiv({\n    className: isPositionLeft\n      ? 'umd-carousel-wide__preview--left'\n      : 'umd-carousel-wide__preview--right',\n    attributes: [{ 'aria-hidden': 'true' }, { role: 'presentation' }],\n    elementStyles: {\n      element: {\n        display: 'none',\n        overflow: 'hidden',\n        position: 'relative',\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          display: 'flex',\n          alignItems: 'flex-end',\n          height: '100%',\n        },\n\n        ['& > * ']: {\n          position: 'absolute !important',\n          bottom: '0 !important',\n          left: '0 !important',\n          width: 'auto !important',\n          height: '75% !important',\n          display: 'block !important',\n          aspectRatio: ASPECT_RATIO,\n\n          ...(isPositionLeft && {\n            right: '0 !important',\n            left: 'auto !important',\n          }),\n\n          ['&:before ']: {\n            content: '\"\"',\n            position: 'absolute',\n            top: '0',\n            left: '0',\n            right: '0',\n            bottom: '0',\n            background: Styles.token.color.gray.darker,\n            opacity: 0.5,\n            zIndex: 1,\n          },\n        },\n      },\n    },\n  });\n};\n\nconst createMainContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const slideElements = slides.map((slide, index) => {\n    return createMainFrameSlide(slide, index, isThemeDark);\n  });\n\n  // Set first slide as active and content visible\n  if (slideElements.length > 0) {\n    slideElements[0].element.setAttribute('data-active', 'true');\n    slideElements[0].element.setAttribute('data-content-visible', 'true');\n  }\n\n  return {\n    component: ElementModel.createDiv({\n      className: 'umd-carousel-wide__main-container',\n      children: slideElements,\n      elementStyles: {\n        element: {\n          position: 'relative',\n          overflow: 'hidden',\n        },\n      },\n    }),\n    refs: slideElements.map((el) => el.element),\n  };\n};\n\nexport const createFramesContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const previewLeft = createPreviewContainer('left');\n  const previewRight = createPreviewContainer('right');\n  const previousButton = createControlButton('prev', isThemeDark);\n  const nextButton = createControlButton('next', isThemeDark);\n  const mainContainer = createMainContainer(slides, isThemeDark);\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__frames-container',\n    children: [\n      previewLeft,\n      mainContainer.component,\n      previewRight,\n      previousButton,\n      nextButton,\n    ],\n    elementStyles: {\n      element: {\n        position: 'relative',\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          padding: `0 ${Styles.token.spacing.md}`,\n        },\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          display: 'grid',\n          gridTemplateColumns: '10vw 1fr 10vw',\n          gridGap: Styles.token.spacing.md,\n          height: '56vw',\n          maxHeight: '60vh',\n        },\n\n        [`@media (${Styles.token.media.queries.desktop.min})`]: {\n          gridTemplateColumns: '15vw 1fr 15vw',\n          gridGap: Styles.token.spacing.lg,\n        },\n\n        [`@media (${Styles.token.media.queries.highDef.min})`]: {\n          gridTemplateColumns: '20vw 1fr 20vw',\n        },\n      },\n    },\n    refs: {\n      slidesContainer: mainContainer.component.element as HTMLDivElement,\n      slides: mainContainer.refs,\n      previews: {\n        left: previewLeft.element as HTMLElement,\n        right: previewRight.element as HTMLElement,\n      },\n      controls: {\n        prev: previousButton.element as HTMLButtonElement,\n        next: nextButton.element as HTMLButtonElement,\n      },\n    },\n  });\n};\n"],"names":["ElementModel.create","Styles","ElementModel.headline.sansLarge","ElementModel.richText.simple","ElementModel.createDiv","index","assets.image.background","createControlButton","createElementWithRefs"],"mappings":"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"}
+{"version":3,"file":"frames.js","sources":["../../../../source/composite/carousel/wide/frames.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { createElementWithRefs } from './_elementModel';\nimport { createControlButton } from './controls';\nimport { type ElementVisual } from '../../../_types';\nimport { type CarouselWideProps } from '../_types';\n\nconst ASPECT_RATIO = '16 / 9';\n\nconst createSlideContent = ({\n  slide,\n  isThemeDark,\n}: {\n  slide: CarouselWideProps['slides'][0];\n  isThemeDark?: boolean;\n}) => {\n  const children: ElementVisual[] = [];\n\n  // Create content container first to get reference\n  let contentContainer: ElementVisual | null = null;\n\n  const closeButton = ElementModel.create({\n    element: document.createElement('button'),\n    className: 'umd-carousel-wide__slide-content-close',\n    attributes: [{ type: 'button' }, { 'aria-label': 'Close content' }],\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: 0,\n        right: 0,\n        background: 'transparent',\n        border: 'none',\n        cursor: 'pointer',\n        fontSize: '20px',\n        fontWeight: 'bold',\n        padding: Styles.token.spacing.min,\n        lineHeight: 1,\n        color: Styles.token.color.gray.dark,\n        transition: 'color 0.2s ease',\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          display: 'none',\n        },\n\n        '&:hover, &:focus': {\n          outline: `2px solid ${Styles.token.color.blue}`,\n        },\n\n        ...(isThemeDark && {\n          color: Styles.token.color.gray.light,\n          '&:hover': {\n            color: Styles.token.color.white,\n          },\n        }),\n      },\n    },\n  });\n\n  closeButton.element.innerHTML = '×';\n\n  closeButton.element.addEventListener('click', () => {\n    if (contentContainer) contentContainer.element.style.display = 'none';\n  });\n\n  children.push(closeButton);\n\n  if (slide.headline) {\n    children.push(\n      ElementModel.headline.sansLarge({\n        element: slide.headline,\n        elementStyles: {\n          element: {\n            color: `${Styles.token.color.black}`,\n          },\n          siblingAfter: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (slide.text) {\n    children.push(\n      ElementModel.richText.simple({\n        element: slide.text,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (children.length === 1) return null;\n\n  contentContainer = ElementModel.createDiv({\n    className: 'umd-carousel-wide__slide-content',\n    children,\n    elementStyles: {\n      element: {\n        backgroundColor: Styles.token.color.white,\n        border: `1px solid ${Styles.token.color.gray.light}`,\n        display: 'block',\n        padding: Styles.token.spacing.md,\n        width: '100%',\n        position: 'relative',\n        opacity: 0,\n        transform: 'translateY(20px)',\n        transition: 'opacity 0.6s ease-out, transform 0.6s ease-out',\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n          border: `1px solid ${Styles.token.color.gray.dark}`,\n        }),\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          borderTop: 'none',\n        },\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          border: 'none',\n          boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n          maxWidth: '50%',\n          position: 'absolute',\n          bottom: Styles.token.spacing.sm,\n          left: Styles.token.spacing.sm,\n\n          ...(isThemeDark && {\n            border: 'none',\n            boxShadow: 'none',\n          }),\n        },\n      },\n    },\n  });\n\n  return contentContainer;\n};\n\nconst createMainFrameSlide = (\n  slide: CarouselWideProps['slides'][0],\n  index: number,\n  isThemeDark?: boolean,\n) => {\n  const children: ElementVisual[] = [];\n  const slideContentWrapper = createSlideContent({ slide, isThemeDark });\n\n  children.push(\n    assets.image.background({\n      element: slide.image,\n      isScaled: true,\n    }),\n  );\n\n  if (slideContentWrapper) children.push(slideContentWrapper);\n\n  return ElementModel.create({\n    element: document.createElement('figure'),\n    className: 'umd-carousel-wide__slide',\n    children,\n    attributes: [{ 'data-index': `${index}` }],\n    elementStyles: {\n      element: {\n        display: 'none',\n        opacity: 0,\n        transition: 'opacity 0.3s ease-in-out, transform 0.5s ease-in-out',\n        transform: 'translateX(0)',\n        aspectRatio: ASPECT_RATIO,\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          width: '100%',\n          height: '100%',\n          top: 0,\n          left: 0,\n        },\n\n        '&[data-active=\"true\"]': {\n          opacity: 1,\n          transform: 'translateX(0)',\n          zIndex: 2,\n          display: 'block',\n        },\n\n        '&[data-animating=\"true\"]': {\n          zIndex: 1,\n          display: 'block',\n          opacity: 1,\n\n          [`@media (${Styles.token.media.queries.large.max})`]: {\n            position: 'absolute',\n            width: '100%',\n            top: 0,\n            left: 0,\n          },\n        },\n\n        '&[data-direction=\"left\"]': {\n          transform: 'translateX(-100%)',\n        },\n\n        '&[data-direction=\"right\"]': {\n          transform: 'translateX(100%)',\n        },\n\n        '&[data-content-visible=\"true\"] .umd-carousel-wide__slide-content': {\n          opacity: 1,\n          transform: 'translateY(0)',\n        },\n      },\n    },\n  });\n};\n\nconst createPreviewContainer = (position: 'left' | 'right') => {\n  const isPositionLeft = position === 'left';\n  return ElementModel.createDiv({\n    className: isPositionLeft\n      ? 'umd-carousel-wide__preview--left'\n      : 'umd-carousel-wide__preview--right',\n    attributes: [{ 'aria-hidden': 'true' }, { role: 'presentation' }],\n    elementStyles: {\n      element: {\n        display: 'none',\n        overflow: 'hidden',\n        position: 'relative',\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          display: 'flex',\n          alignItems: 'flex-end',\n          height: '100%',\n        },\n\n        ['& > * ']: {\n          position: 'absolute !important',\n          bottom: '0 !important',\n          left: '0 !important',\n          width: 'auto !important',\n          height: '75% !important',\n          display: 'block !important',\n          aspectRatio: ASPECT_RATIO,\n\n          ...(isPositionLeft && {\n            right: '0 !important',\n            left: 'auto !important',\n          }),\n\n          ['&:before ']: {\n            content: '\"\"',\n            position: 'absolute',\n            top: '0',\n            left: '0',\n            right: '0',\n            bottom: '0',\n            background: Styles.token.color.gray.darker,\n            opacity: 0.5,\n            zIndex: 1,\n          },\n        },\n      },\n    },\n  });\n};\n\nconst createMainContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const slideElements = slides.map((slide, index) => {\n    return createMainFrameSlide(slide, index, isThemeDark);\n  });\n\n  // Set first slide as active and content visible\n  if (slideElements.length > 0) {\n    slideElements[0].element.setAttribute('data-active', 'true');\n    slideElements[0].element.setAttribute('data-content-visible', 'true');\n  }\n\n  return {\n    component: ElementModel.createDiv({\n      className: 'umd-carousel-wide__main-container',\n      children: slideElements,\n      elementStyles: {\n        element: {\n          position: 'relative',\n          overflow: 'hidden',\n        },\n      },\n    }),\n    refs: slideElements.map((el) => el.element),\n  };\n};\n\nexport const createFramesContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const previewLeft = createPreviewContainer('left');\n  const previewRight = createPreviewContainer('right');\n  const previousButton = createControlButton('prev', isThemeDark);\n  const nextButton = createControlButton('next', isThemeDark);\n  const mainContainer = createMainContainer(slides, isThemeDark);\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__frames-container',\n    children: [\n      previewLeft,\n      mainContainer.component,\n      previewRight,\n      previousButton,\n      nextButton,\n    ],\n    elementStyles: {\n      element: {\n        position: 'relative',\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          padding: `0 ${Styles.token.spacing.md}`,\n        },\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          display: 'grid',\n          gridTemplateColumns: '10vw 1fr 10vw',\n          gridGap: Styles.token.spacing.md,\n          height: '56vw',\n          maxHeight: '60vh',\n        },\n\n        [`@media (${Styles.token.media.queries.desktop.min})`]: {\n          gridTemplateColumns: '15vw 1fr 15vw',\n          gridGap: Styles.token.spacing.lg,\n        },\n\n        [`@media (${Styles.token.media.queries.highDef.min})`]: {\n          gridTemplateColumns: '20vw 1fr 20vw',\n        },\n      },\n    },\n    refs: {\n      slidesContainer: mainContainer.component.element as HTMLDivElement,\n      slides: mainContainer.refs,\n      previews: {\n        left: previewLeft.element as HTMLElement,\n        right: previewRight.element as HTMLElement,\n      },\n      controls: {\n        prev: previousButton.element as HTMLButtonElement,\n        next: nextButton.element as HTMLButtonElement,\n      },\n    },\n  });\n};\n"],"names":["ElementModel.create","Styles","ElementModel.headline.sansLarge","ElementModel.richText.simple","ElementModel.createDiv","index","assets.image.background","createControlButton","createElementWithRefs"],"mappings":"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"}

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

@@ -5,6 +5,7 @@ import "../../../node_modules/postcss-js/index.mjs";
 import { createDiv, create } from "../../../model/elements/index.mjs";
 import "../../../atomic/animations/actions/indicator.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
+import "../../../atomic/animations/brand/card-stack.mjs";
 import imageContainer from "../../../atomic/assets/image/background.mjs";
 import "../../../atomic/layout/block/stacked.mjs";
 import "../../../atomic/layout/overlay/modal.mjs";

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

@@ -1 +1 @@
-{"version":3,"file":"frames.mjs","sources":["../../../../source/composite/carousel/wide/frames.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { createElementWithRefs } from './_elementModel';\nimport { createControlButton } from './controls';\nimport { type ElementVisual } from '../../../_types';\nimport { type CarouselWideProps } from '../_types';\n\nconst ASPECT_RATIO = '16 / 9';\n\nconst createSlideContent = ({\n  slide,\n  isThemeDark,\n}: {\n  slide: CarouselWideProps['slides'][0];\n  isThemeDark?: boolean;\n}) => {\n  const children: ElementVisual[] = [];\n\n  // Create content container first to get reference\n  let contentContainer: ElementVisual | null = null;\n\n  const closeButton = ElementModel.create({\n    element: document.createElement('button'),\n    className: 'umd-carousel-wide__slide-content-close',\n    attributes: [{ type: 'button' }, { 'aria-label': 'Close content' }],\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: 0,\n        right: 0,\n        background: 'transparent',\n        border: 'none',\n        cursor: 'pointer',\n        fontSize: '20px',\n        fontWeight: 'bold',\n        padding: Styles.token.spacing.min,\n        lineHeight: 1,\n        color: Styles.token.color.gray.dark,\n        transition: 'color 0.2s ease',\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          display: 'none',\n        },\n\n        '&:hover, &:focus': {\n          outline: `2px solid ${Styles.token.color.blue}`,\n        },\n\n        ...(isThemeDark && {\n          color: Styles.token.color.gray.light,\n          '&:hover': {\n            color: Styles.token.color.white,\n          },\n        }),\n      },\n    },\n  });\n\n  closeButton.element.innerHTML = '×';\n\n  closeButton.element.addEventListener('click', () => {\n    if (contentContainer) contentContainer.element.style.display = 'none';\n  });\n\n  children.push(closeButton);\n\n  if (slide.headline) {\n    children.push(\n      ElementModel.headline.sansLarge({\n        element: slide.headline,\n        elementStyles: {\n          element: {\n            color: `${Styles.token.color.black}`,\n          },\n          siblingAfter: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (slide.text) {\n    children.push(\n      ElementModel.richText.simple({\n        element: slide.text,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (children.length === 1) return null;\n\n  contentContainer = ElementModel.createDiv({\n    className: 'umd-carousel-wide__slide-content',\n    children,\n    elementStyles: {\n      element: {\n        backgroundColor: Styles.token.color.white,\n        border: `1px solid ${Styles.token.color.gray.light}`,\n        display: 'block',\n        padding: Styles.token.spacing.md,\n        width: '100%',\n        position: 'relative',\n        opacity: 0,\n        transform: 'translateY(20px)',\n        transition: 'opacity 0.6s ease-out, transform 0.6s ease-out',\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n          border: `1px solid ${Styles.token.color.gray.dark}`,\n        }),\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          borderTop: 'none',\n        },\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          border: 'none',\n          boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n          maxWidth: '50%',\n          position: 'absolute',\n          bottom: Styles.token.spacing.sm,\n          left: Styles.token.spacing.sm,\n\n          ...(isThemeDark && {\n            border: 'none',\n            boxShadow: 'none',\n          }),\n        },\n      },\n    },\n  });\n\n  return contentContainer;\n};\n\nconst createMainFrameSlide = (\n  slide: CarouselWideProps['slides'][0],\n  index: number,\n  isThemeDark?: boolean,\n) => {\n  const children: ElementVisual[] = [];\n  const slideContentWrapper = createSlideContent({ slide, isThemeDark });\n\n  children.push(\n    assets.image.background({\n      element: slide.image,\n      isScaled: true,\n    }),\n  );\n\n  if (slideContentWrapper) children.push(slideContentWrapper);\n\n  return ElementModel.create({\n    element: document.createElement('figure'),\n    className: 'umd-carousel-wide__slide',\n    children,\n    attributes: [{ 'data-index': `${index}` }],\n    elementStyles: {\n      element: {\n        display: 'none',\n        opacity: 0,\n        transition: 'opacity 0.3s ease-in-out, transform 0.5s ease-in-out',\n        transform: 'translateX(0)',\n        aspectRatio: ASPECT_RATIO,\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          width: '100%',\n          height: '100%',\n          top: 0,\n          left: 0,\n        },\n\n        '&[data-active=\"true\"]': {\n          opacity: 1,\n          transform: 'translateX(0)',\n          zIndex: 2,\n          display: 'block',\n        },\n\n        '&[data-animating=\"true\"]': {\n          zIndex: 1,\n          display: 'block',\n          opacity: 1,\n\n          [`@media (${Styles.token.media.queries.large.max})`]: {\n            position: 'absolute',\n            width: '100%',\n            top: 0,\n            left: 0,\n          },\n        },\n\n        '&[data-direction=\"left\"]': {\n          transform: 'translateX(-100%)',\n        },\n\n        '&[data-direction=\"right\"]': {\n          transform: 'translateX(100%)',\n        },\n\n        '&[data-content-visible=\"true\"] .umd-carousel-wide__slide-content': {\n          opacity: 1,\n          transform: 'translateY(0)',\n        },\n      },\n    },\n  });\n};\n\nconst createPreviewContainer = (position: 'left' | 'right') => {\n  const isPositionLeft = position === 'left';\n  return ElementModel.createDiv({\n    className: isPositionLeft\n      ? 'umd-carousel-wide__preview--left'\n      : 'umd-carousel-wide__preview--right',\n    attributes: [{ 'aria-hidden': 'true' }, { role: 'presentation' }],\n    elementStyles: {\n      element: {\n        display: 'none',\n        overflow: 'hidden',\n        position: 'relative',\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          display: 'flex',\n          alignItems: 'flex-end',\n          height: '100%',\n        },\n\n        ['& > * ']: {\n          position: 'absolute !important',\n          bottom: '0 !important',\n          left: '0 !important',\n          width: 'auto !important',\n          height: '75% !important',\n          display: 'block !important',\n          aspectRatio: ASPECT_RATIO,\n\n          ...(isPositionLeft && {\n            right: '0 !important',\n            left: 'auto !important',\n          }),\n\n          ['&:before ']: {\n            content: '\"\"',\n            position: 'absolute',\n            top: '0',\n            left: '0',\n            right: '0',\n            bottom: '0',\n            background: Styles.token.color.gray.darker,\n            opacity: 0.5,\n            zIndex: 1,\n          },\n        },\n      },\n    },\n  });\n};\n\nconst createMainContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const slideElements = slides.map((slide, index) => {\n    return createMainFrameSlide(slide, index, isThemeDark);\n  });\n\n  // Set first slide as active and content visible\n  if (slideElements.length > 0) {\n    slideElements[0].element.setAttribute('data-active', 'true');\n    slideElements[0].element.setAttribute('data-content-visible', 'true');\n  }\n\n  return {\n    component: ElementModel.createDiv({\n      className: 'umd-carousel-wide__main-container',\n      children: slideElements,\n      elementStyles: {\n        element: {\n          position: 'relative',\n          overflow: 'hidden',\n        },\n      },\n    }),\n    refs: slideElements.map((el) => el.element),\n  };\n};\n\nexport const createFramesContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const previewLeft = createPreviewContainer('left');\n  const previewRight = createPreviewContainer('right');\n  const previousButton = createControlButton('prev', isThemeDark);\n  const nextButton = createControlButton('next', isThemeDark);\n  const mainContainer = createMainContainer(slides, isThemeDark);\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__frames-container',\n    children: [\n      previewLeft,\n      mainContainer.component,\n      previewRight,\n      previousButton,\n      nextButton,\n    ],\n    elementStyles: {\n      element: {\n        position: 'relative',\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          padding: `0 ${Styles.token.spacing.md}`,\n        },\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          display: 'grid',\n          gridTemplateColumns: '10vw 1fr 10vw',\n          gridGap: Styles.token.spacing.md,\n          height: '56vw',\n          maxHeight: '60vh',\n        },\n\n        [`@media (${Styles.token.media.queries.desktop.min})`]: {\n          gridTemplateColumns: '15vw 1fr 15vw',\n          gridGap: Styles.token.spacing.lg,\n        },\n\n        [`@media (${Styles.token.media.queries.highDef.min})`]: {\n          gridTemplateColumns: '20vw 1fr 20vw',\n        },\n      },\n    },\n    refs: {\n      slidesContainer: mainContainer.component.element as HTMLDivElement,\n      slides: mainContainer.refs,\n      previews: {\n        left: previewLeft.element as HTMLElement,\n        right: previewRight.element as HTMLElement,\n      },\n      controls: {\n        prev: previousButton.element as HTMLButtonElement,\n        next: nextButton.element as HTMLButtonElement,\n      },\n    },\n  });\n};\n"],"names":["ElementModel.create","ElementModel.headline.sansLarge","ElementModel.richText.simple","ElementModel.createDiv","index","assets.image.background"],"mappings":"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"}
+{"version":3,"file":"frames.mjs","sources":["../../../../source/composite/carousel/wide/frames.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { createElementWithRefs } from './_elementModel';\nimport { createControlButton } from './controls';\nimport { type ElementVisual } from '../../../_types';\nimport { type CarouselWideProps } from '../_types';\n\nconst ASPECT_RATIO = '16 / 9';\n\nconst createSlideContent = ({\n  slide,\n  isThemeDark,\n}: {\n  slide: CarouselWideProps['slides'][0];\n  isThemeDark?: boolean;\n}) => {\n  const children: ElementVisual[] = [];\n\n  // Create content container first to get reference\n  let contentContainer: ElementVisual | null = null;\n\n  const closeButton = ElementModel.create({\n    element: document.createElement('button'),\n    className: 'umd-carousel-wide__slide-content-close',\n    attributes: [{ type: 'button' }, { 'aria-label': 'Close content' }],\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: 0,\n        right: 0,\n        background: 'transparent',\n        border: 'none',\n        cursor: 'pointer',\n        fontSize: '20px',\n        fontWeight: 'bold',\n        padding: Styles.token.spacing.min,\n        lineHeight: 1,\n        color: Styles.token.color.gray.dark,\n        transition: 'color 0.2s ease',\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          display: 'none',\n        },\n\n        '&:hover, &:focus': {\n          outline: `2px solid ${Styles.token.color.blue}`,\n        },\n\n        ...(isThemeDark && {\n          color: Styles.token.color.gray.light,\n          '&:hover': {\n            color: Styles.token.color.white,\n          },\n        }),\n      },\n    },\n  });\n\n  closeButton.element.innerHTML = '×';\n\n  closeButton.element.addEventListener('click', () => {\n    if (contentContainer) contentContainer.element.style.display = 'none';\n  });\n\n  children.push(closeButton);\n\n  if (slide.headline) {\n    children.push(\n      ElementModel.headline.sansLarge({\n        element: slide.headline,\n        elementStyles: {\n          element: {\n            color: `${Styles.token.color.black}`,\n          },\n          siblingAfter: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (slide.text) {\n    children.push(\n      ElementModel.richText.simple({\n        element: slide.text,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (children.length === 1) return null;\n\n  contentContainer = ElementModel.createDiv({\n    className: 'umd-carousel-wide__slide-content',\n    children,\n    elementStyles: {\n      element: {\n        backgroundColor: Styles.token.color.white,\n        border: `1px solid ${Styles.token.color.gray.light}`,\n        display: 'block',\n        padding: Styles.token.spacing.md,\n        width: '100%',\n        position: 'relative',\n        opacity: 0,\n        transform: 'translateY(20px)',\n        transition: 'opacity 0.6s ease-out, transform 0.6s ease-out',\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n          border: `1px solid ${Styles.token.color.gray.dark}`,\n        }),\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          borderTop: 'none',\n        },\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          border: 'none',\n          boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n          maxWidth: '50%',\n          position: 'absolute',\n          bottom: Styles.token.spacing.sm,\n          left: Styles.token.spacing.sm,\n\n          ...(isThemeDark && {\n            border: 'none',\n            boxShadow: 'none',\n          }),\n        },\n      },\n    },\n  });\n\n  return contentContainer;\n};\n\nconst createMainFrameSlide = (\n  slide: CarouselWideProps['slides'][0],\n  index: number,\n  isThemeDark?: boolean,\n) => {\n  const children: ElementVisual[] = [];\n  const slideContentWrapper = createSlideContent({ slide, isThemeDark });\n\n  children.push(\n    assets.image.background({\n      element: slide.image,\n      isScaled: true,\n    }),\n  );\n\n  if (slideContentWrapper) children.push(slideContentWrapper);\n\n  return ElementModel.create({\n    element: document.createElement('figure'),\n    className: 'umd-carousel-wide__slide',\n    children,\n    attributes: [{ 'data-index': `${index}` }],\n    elementStyles: {\n      element: {\n        display: 'none',\n        opacity: 0,\n        transition: 'opacity 0.3s ease-in-out, transform 0.5s ease-in-out',\n        transform: 'translateX(0)',\n        aspectRatio: ASPECT_RATIO,\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          width: '100%',\n          height: '100%',\n          top: 0,\n          left: 0,\n        },\n\n        '&[data-active=\"true\"]': {\n          opacity: 1,\n          transform: 'translateX(0)',\n          zIndex: 2,\n          display: 'block',\n        },\n\n        '&[data-animating=\"true\"]': {\n          zIndex: 1,\n          display: 'block',\n          opacity: 1,\n\n          [`@media (${Styles.token.media.queries.large.max})`]: {\n            position: 'absolute',\n            width: '100%',\n            top: 0,\n            left: 0,\n          },\n        },\n\n        '&[data-direction=\"left\"]': {\n          transform: 'translateX(-100%)',\n        },\n\n        '&[data-direction=\"right\"]': {\n          transform: 'translateX(100%)',\n        },\n\n        '&[data-content-visible=\"true\"] .umd-carousel-wide__slide-content': {\n          opacity: 1,\n          transform: 'translateY(0)',\n        },\n      },\n    },\n  });\n};\n\nconst createPreviewContainer = (position: 'left' | 'right') => {\n  const isPositionLeft = position === 'left';\n  return ElementModel.createDiv({\n    className: isPositionLeft\n      ? 'umd-carousel-wide__preview--left'\n      : 'umd-carousel-wide__preview--right',\n    attributes: [{ 'aria-hidden': 'true' }, { role: 'presentation' }],\n    elementStyles: {\n      element: {\n        display: 'none',\n        overflow: 'hidden',\n        position: 'relative',\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          display: 'flex',\n          alignItems: 'flex-end',\n          height: '100%',\n        },\n\n        ['& > * ']: {\n          position: 'absolute !important',\n          bottom: '0 !important',\n          left: '0 !important',\n          width: 'auto !important',\n          height: '75% !important',\n          display: 'block !important',\n          aspectRatio: ASPECT_RATIO,\n\n          ...(isPositionLeft && {\n            right: '0 !important',\n            left: 'auto !important',\n          }),\n\n          ['&:before ']: {\n            content: '\"\"',\n            position: 'absolute',\n            top: '0',\n            left: '0',\n            right: '0',\n            bottom: '0',\n            background: Styles.token.color.gray.darker,\n            opacity: 0.5,\n            zIndex: 1,\n          },\n        },\n      },\n    },\n  });\n};\n\nconst createMainContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const slideElements = slides.map((slide, index) => {\n    return createMainFrameSlide(slide, index, isThemeDark);\n  });\n\n  // Set first slide as active and content visible\n  if (slideElements.length > 0) {\n    slideElements[0].element.setAttribute('data-active', 'true');\n    slideElements[0].element.setAttribute('data-content-visible', 'true');\n  }\n\n  return {\n    component: ElementModel.createDiv({\n      className: 'umd-carousel-wide__main-container',\n      children: slideElements,\n      elementStyles: {\n        element: {\n          position: 'relative',\n          overflow: 'hidden',\n        },\n      },\n    }),\n    refs: slideElements.map((el) => el.element),\n  };\n};\n\nexport const createFramesContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const previewLeft = createPreviewContainer('left');\n  const previewRight = createPreviewContainer('right');\n  const previousButton = createControlButton('prev', isThemeDark);\n  const nextButton = createControlButton('next', isThemeDark);\n  const mainContainer = createMainContainer(slides, isThemeDark);\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__frames-container',\n    children: [\n      previewLeft,\n      mainContainer.component,\n      previewRight,\n      previousButton,\n      nextButton,\n    ],\n    elementStyles: {\n      element: {\n        position: 'relative',\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          padding: `0 ${Styles.token.spacing.md}`,\n        },\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          display: 'grid',\n          gridTemplateColumns: '10vw 1fr 10vw',\n          gridGap: Styles.token.spacing.md,\n          height: '56vw',\n          maxHeight: '60vh',\n        },\n\n        [`@media (${Styles.token.media.queries.desktop.min})`]: {\n          gridTemplateColumns: '15vw 1fr 15vw',\n          gridGap: Styles.token.spacing.lg,\n        },\n\n        [`@media (${Styles.token.media.queries.highDef.min})`]: {\n          gridTemplateColumns: '20vw 1fr 20vw',\n        },\n      },\n    },\n    refs: {\n      slidesContainer: mainContainer.component.element as HTMLDivElement,\n      slides: mainContainer.refs,\n      previews: {\n        left: previewLeft.element as HTMLElement,\n        right: previewRight.element as HTMLElement,\n      },\n      controls: {\n        prev: previousButton.element as HTMLButtonElement,\n        next: nextButton.element as HTMLButtonElement,\n      },\n    },\n  });\n};\n"],"names":["ElementModel.create","ElementModel.headline.sansLarge","ElementModel.richText.simple","ElementModel.createDiv","index","assets.image.background"],"mappings":"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"}

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

@@ -6,6 +6,7 @@ require("../../../node_modules/postcss-js/index.js");
 const index$1 = require("../../../model/elements/index.js");
 require("../../../atomic/animations/actions/indicator.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
+require("../../../atomic/animations/brand/card-stack.js");
 const background = require("../../../atomic/assets/image/background.js");
 require("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");