@universityofmaryland/web-elements-library 1.4.4 → 1.4.6

package/dist/composite/card/overlay/image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"image.mjs","sources":["../../../../source/composite/card/overlay/image.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { actions, assets, textLockup } from 'atomic';\nimport { asset, markup, theme } from 'utilities';\nimport { CardOverlayProps } from '../_types';\nimport { ElementVisual } from '../../../_types';\n\nexport const classRef = 'card-overlay-image';\n\nexport const createCardOverlayImage = (props: CardOverlayProps) => {\n  const { isQuote, ctaIcon, dateSign, backgroundImage, text } = props;\n  const children: ElementVisual[] = [];\n  const wrapperChildren: ElementVisual[] = [];\n  const load = () => {\n    const sizeElements = () => {\n      const textCopy = text?.innerHTML;\n      if (text && textCopy) {\n        const modifiedText = markup.modify.truncateTextBasedOnSize({\n          text: textCopy,\n          size: composite.element.offsetWidth,\n        });\n\n        text.innerHTML = modifiedText;\n\n        if (modifiedText.length >= 220) {\n          const assetContainer = composite.element.querySelector(\n            `.${imageContainerClass}`,\n          );\n          if (assetContainer) {\n            assetContainer.setAttribute('data-size', 'large');\n          }\n        }\n      }\n    };\n\n    sizeElements();\n  };\n  let imageContainerClass: string | null = null;\n\n  if (ctaIcon && ctaIcon instanceof HTMLElement) {\n    children.push(actions.icon({ ...props, ctaIcon, isThemeLight: false }));\n  }\n\n  if (backgroundImage) {\n    const imageContainer = assets.image.background({\n      element: backgroundImage,\n      isScaled: true,\n      isGifAllowed: true,\n      customStyles: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n\n        [`&:before`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          zIndex: 1,\n          opacity: 1,\n          transition: `opacity 0.5s ease-in-out`,\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`&[data-size=\"large\"]:before`]: {\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`img`]: {\n          transform: 'scale(1.025)',\n        },\n      },\n    });\n    children.push(imageContainer);\n    imageContainerClass = imageContainer.element.className;\n  }\n\n  if (dateSign) {\n    wrapperChildren.push(\n      ElementModel.layout.backgroundBoxWhite({\n        element: document.createElement('div'),\n        elementStyles: {\n          element: {\n            alignSelf: `flex-start`,\n          },\n          siblingAfter: {\n            marginTop: `${Styles.token.spacing.min}`,\n          },\n        },\n        children: [dateSign],\n      }),\n    );\n  }\n\n  if (isQuote) {\n    const quoteWrapper = ElementModel.createDiv({\n      className: 'card-overlay-image-quote-wrapper',\n      elementStyles: {\n        element: {\n          width: '41px',\n          height: '30px',\n          marginBottom: `${Styles.token.spacing.xs}`,\n\n          '& svg': {\n            fill: `${Styles.token.color.red}`,\n          },\n        },\n      },\n    });\n\n    quoteWrapper.element.innerHTML = asset.icon.QUOTE;\n    wrapperChildren.push(quoteWrapper);\n  }\n\n  wrapperChildren.push(\n    textLockup.smallScaling({\n      ...props,\n      isThemeDark: true,\n    }),\n  );\n\n  const textWrapper = ElementModel.createDiv({\n    className: 'card-overlay-image-text-wrapper',\n    elementStyles: {\n      element: {\n        height: 'auto',\n        paddingRight: `${ctaIcon ? Styles.token.spacing['2xl'] : 0}`,\n      },\n    },\n    children: [\n      ElementModel.createDiv({\n        children: wrapperChildren,\n        className: 'card-overlay-image-text-content',\n        elementStyles: {\n          element: {\n            maxWidth: `${Styles.token.spacing.maxWidth.smallest}`,\n            height: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            zIndex: 9,\n            position: 'relative',\n          },\n        },\n      }),\n    ],\n  });\n\n  const composite = ElementModel.createDiv({\n    className: classRef,\n    children: [\n      ElementModel.createDiv({\n        className: 'card-overlay-image-container',\n        children: [...children, textWrapper],\n        elementStyles: {\n          element: {\n            position: 'relative',\n            padding: `${Styles.token.spacing.lg} ${Styles.token.spacing.md}`,\n            paddingTop: `${Styles.token.spacing['4xl']}`,\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'flex-end',\n            minHeight: '360px',\n            height: '100%',\n            overflow: 'hidden',\n\n            ...theme.media.createContainerQuery(\n              'min-width',\n              Styles.token.media.breakpointValues.medium.min,\n              {\n                paddingTop: `${Styles.token.spacing['8xl']}`,\n                minHeight: `424px`,\n              },\n            ),\n          },\n        },\n      }),\n    ],\n    elementStyles: {\n      element: {\n        height: '100%',\n        containerType: 'inline-size',\n\n        [`&:hover .${imageContainerClass}:before, &:focus .${imageContainerClass}:before`]:\n          {\n            opacity: 0.7,\n          },\n\n        ['&:hover img, &:focus img']: {\n          transform: 'scale(1)',\n          transition: 'transform 0.5s ease-in-out',\n        },\n      },\n    },\n  });\n\n  return {\n    ...composite,\n    events: {\n      load,\n    },\n  };\n};\n"],"names":["markup.modify.truncateTextBasedOnSize","actions.icon","imageContainer","assets.image.background","ElementModel.layout.backgroundBoxWhite","ElementModel.createDiv","asset.icon.QUOTE","textLockup.smallScaling","theme.media.createContainerQuery"],"mappings":"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"}
+{"version":3,"file":"image.mjs","sources":["../../../../source/composite/card/overlay/image.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { actions, assets, textLockup } from 'atomic';\nimport { asset, markup, theme } from 'utilities';\nimport { CardOverlayProps } from '../_types';\nimport { ElementVisual } from '../../../_types';\n\nexport const classRef = 'card-overlay-image';\n\nexport const createCardOverlayImage = (props: CardOverlayProps) => {\n  const { isQuote, ctaIcon, dateSign, backgroundImage, text } = props;\n  const children: ElementVisual[] = [];\n  const wrapperChildren: ElementVisual[] = [];\n  const load = () => {\n    const sizeElements = () => {\n      const textCopy = text?.innerHTML;\n      if (text && textCopy) {\n        const modifiedText = markup.modify.truncateTextBasedOnSize({\n          text: textCopy,\n          size: composite.element.offsetWidth,\n        });\n\n        text.innerHTML = modifiedText;\n\n        if (modifiedText.length >= 220) {\n          const assetContainer = composite.element.querySelector(\n            `.${imageContainerClass}`,\n          );\n          if (assetContainer) {\n            assetContainer.setAttribute('data-size', 'large');\n          }\n        }\n      }\n    };\n\n    sizeElements();\n  };\n  let imageContainerClass: string | null = null;\n\n  if (ctaIcon && ctaIcon instanceof HTMLElement) {\n    children.push(actions.icon({ ...props, ctaIcon, isThemeLight: false }));\n  }\n\n  if (backgroundImage) {\n    const imageContainer = assets.image.background({\n      element: backgroundImage,\n      isScaled: true,\n      isGifAllowed: true,\n      customStyles: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n\n        [`&:before`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          zIndex: 1,\n          opacity: 1,\n          transition: `opacity 0.5s ease-in-out`,\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`&[data-size=\"large\"]:before`]: {\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`img`]: {\n          transform: 'scale(1.025)',\n        },\n      },\n    });\n    children.push(imageContainer);\n    imageContainerClass = imageContainer.element.className;\n  }\n\n  if (dateSign) {\n    wrapperChildren.push(\n      ElementModel.layout.backgroundBoxWhite({\n        element: document.createElement('div'),\n        elementStyles: {\n          element: {\n            alignSelf: `flex-start`,\n          },\n          siblingAfter: {\n            marginTop: `${Styles.token.spacing.min}`,\n          },\n        },\n        children: [dateSign],\n      }),\n    );\n  }\n\n  if (isQuote) {\n    const quoteWrapper = ElementModel.createDiv({\n      className: 'card-overlay-image-quote-wrapper',\n      elementStyles: {\n        element: {\n          width: '41px',\n          height: '30px',\n          marginBottom: `${Styles.token.spacing.xs}`,\n\n          '& svg': {\n            fill: `${Styles.token.color.red}`,\n          },\n        },\n      },\n    });\n\n    quoteWrapper.element.innerHTML = asset.icon.QUOTE;\n    wrapperChildren.push(quoteWrapper);\n  }\n\n  wrapperChildren.push(\n    textLockup.smallScaling({\n      ...props,\n      isThemeDark: true,\n    }),\n  );\n\n  const textWrapper = ElementModel.createDiv({\n    className: 'card-overlay-image-text-wrapper',\n    elementStyles: {\n      element: {\n        height: 'auto',\n        paddingRight: `${ctaIcon ? Styles.token.spacing['2xl'] : 0}`,\n      },\n    },\n    children: [\n      ElementModel.createDiv({\n        children: wrapperChildren,\n        className: 'card-overlay-image-text-content',\n        elementStyles: {\n          element: {\n            maxWidth: `${Styles.token.spacing.maxWidth.smallest}`,\n            height: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            zIndex: 9,\n            position: 'relative',\n          },\n        },\n      }),\n    ],\n  });\n\n  const composite = ElementModel.createDiv({\n    className: classRef,\n    children: [\n      ElementModel.createDiv({\n        className: 'card-overlay-image-container',\n        children: [...children, textWrapper],\n        elementStyles: {\n          element: {\n            position: 'relative',\n            padding: `${Styles.token.spacing.lg} ${Styles.token.spacing.md}`,\n            paddingTop: `${Styles.token.spacing['4xl']}`,\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'flex-end',\n            minHeight: '360px',\n            height: '100%',\n            overflow: 'hidden',\n\n            ...theme.media.createContainerQuery(\n              'min-width',\n              Styles.token.media.breakpointValues.medium.min,\n              {\n                paddingTop: `${Styles.token.spacing['8xl']}`,\n                minHeight: `424px`,\n              },\n            ),\n          },\n        },\n      }),\n    ],\n    elementStyles: {\n      element: {\n        height: '100%',\n        containerType: 'inline-size',\n\n        [`&:hover .${imageContainerClass}:before, &:focus .${imageContainerClass}:before`]:\n          {\n            opacity: 0.7,\n          },\n\n        ['&:hover img, &:focus img']: {\n          transform: 'scale(1)',\n          transition: 'transform 0.5s ease-in-out',\n        },\n      },\n    },\n  });\n\n  return {\n    ...composite,\n    events: {\n      load,\n    },\n  };\n};\n"],"names":["markup.modify.truncateTextBasedOnSize","actions.icon","imageContainer","assets.image.background","ElementModel.layout.backgroundBoxWhite","ElementModel.createDiv","asset.icon.QUOTE","textLockup.smallScaling","theme.media.createContainerQuery"],"mappings":"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"}

package/dist/composite/card/video/block.js

@@ -7,6 +7,7 @@ require("../../../model/modifiers/index.js");
 require("../../../model/elements/headline.js");
 require("../../../atomic/animations/actions/indicator.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
+require("../../../atomic/animations/brand/card-stack.js");
 const observedAutoPlay = require("../../../atomic/assets/video/observed-auto-play.js");
 require("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");

package/dist/composite/card/video/block.js.map

@@ -1 +1 @@
-{"version":3,"file":"block.js","sources":["../../../../source/composite/card/video/block.ts"],"sourcesContent":["import { assets } from 'atomic';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n}\n\nexport default (props: CardVideoShortProps) =>\n  (() =>\n    assets.video.observedAutoPlay({\n      ...props,\n      additionalElementStyles: {\n        width: '100%',\n        aspectRatio: '1 / 1',\n        position: 'relative',\n        overflow: 'hidden',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n        },\n      },\n    }))();\n"],"names":["assets.video.observedAutoPlay"],"mappings":";;;;;;;;;;;;;;;AAOA,MAAA,QAAe,CAAC,WACb,MACCA,iBAA8B;AAAA,EAC5B,GAAG;AAAA,EACH,yBAAyB;AAAA,IACvB,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,CAAC,SAAS,GAAG;AAAA,MACX,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ,CAAC,GAAA;;"}
+{"version":3,"file":"block.js","sources":["../../../../source/composite/card/video/block.ts"],"sourcesContent":["import { assets } from 'atomic';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n}\n\nexport default (props: CardVideoShortProps) =>\n  (() =>\n    assets.video.observedAutoPlay({\n      ...props,\n      additionalElementStyles: {\n        width: '100%',\n        aspectRatio: '1 / 1',\n        position: 'relative',\n        overflow: 'hidden',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n        },\n      },\n    }))();\n"],"names":["assets.video.observedAutoPlay"],"mappings":";;;;;;;;;;;;;;;;AAOA,MAAA,QAAe,CAAC,WACb,MACCA,iBAA8B;AAAA,EAC5B,GAAG;AAAA,EACH,yBAAyB;AAAA,IACvB,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,CAAC,SAAS,GAAG;AAAA,MACX,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ,CAAC,GAAA;;"}

package/dist/composite/card/video/block.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 observedAutoPlay from "../../../atomic/assets/video/observed-auto-play.mjs";
 import "../../../atomic/layout/block/stacked.mjs";
 import "../../../atomic/layout/overlay/modal.mjs";

package/dist/composite/card/video/block.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"block.mjs","sources":["../../../../source/composite/card/video/block.ts"],"sourcesContent":["import { assets } from 'atomic';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n}\n\nexport default (props: CardVideoShortProps) =>\n  (() =>\n    assets.video.observedAutoPlay({\n      ...props,\n      additionalElementStyles: {\n        width: '100%',\n        aspectRatio: '1 / 1',\n        position: 'relative',\n        overflow: 'hidden',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n        },\n      },\n    }))();\n"],"names":["assets.video.observedAutoPlay"],"mappings":";;;;;;;;;;;;;;AAOA,MAAA,QAAe,CAAC,WACb,MACCA,iBAA8B;AAAA,EAC5B,GAAG;AAAA,EACH,yBAAyB;AAAA,IACvB,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,CAAC,SAAS,GAAG;AAAA,MACX,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ,CAAC,GAAA;"}
+{"version":3,"file":"block.mjs","sources":["../../../../source/composite/card/video/block.ts"],"sourcesContent":["import { assets } from 'atomic';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n}\n\nexport default (props: CardVideoShortProps) =>\n  (() =>\n    assets.video.observedAutoPlay({\n      ...props,\n      additionalElementStyles: {\n        width: '100%',\n        aspectRatio: '1 / 1',\n        position: 'relative',\n        overflow: 'hidden',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n        },\n      },\n    }))();\n"],"names":["assets.video.observedAutoPlay"],"mappings":";;;;;;;;;;;;;;;AAOA,MAAA,QAAe,CAAC,WACb,MACCA,iBAA8B;AAAA,EAC5B,GAAG;AAAA,EACH,yBAAyB;AAAA,IACvB,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,CAAC,SAAS,GAAG;AAAA,MACX,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ,CAAC,GAAA;"}

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

@@ -207,7 +207,7 @@ const ContainerStyles = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${CAROUSEL_CONTAINER} > svg {
         animation: card-carousel-slide-in ease-in-out forwards;
         animation-timeline: view();

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../source/composite/carousel/cards/index.ts"],"sourcesContent":["import {\n  element,\n  layout,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselCardsRequirements = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  slide: HTMLElement;\n  shadowRef?: HTMLElement;\n  cards: HTMLElement[];\n};\n\nconst MEDIUM = 768;\nconst LARGE = 1024;\n\nconst BACKGROUND_TEXTURE = `<svg aria-hidden=\"true\" width=\"1599\" height=\"618\" viewBox=\"0 0 1599 618\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n\"><mask id=\"mask0_2135_11278\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"1600\" height=\"618\"><rect width=\"1600\" height=\"618\" fill=\"#242424\"></rect></mask><g mask=\"url(#mask0_2135_11278)\"><g opacity=\"0.5\"><mask id=\"mask1_2135_11278\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"-17\" y=\"-56\" width=\"1823\" height=\"408\"><path d=\"M-17 351.98V-56H1806V351.98\" fill=\"white\"></path></mask><g mask=\"url(#mask1_2135_11278)\"><path d=\"M807.562 -68.3515L-433.759 1173.58L-217.501 1389.94L1023.82 148.012L807.562 -68.3515Z\" fill=\"#262626\"></path><path d=\"M360.649 -82.8017L-880.672 1159.13L-649.997 1389.92L591.324 147.986L360.649 -82.8017Z\" fill=\"black\"></path><path d=\"M1154.8 1173.26L-533.139 -515.499L-677.311 -371.256L1010.63 1317.51L1154.8 1173.26Z\" fill=\"#262626\"></path><path d=\"M2162.77 710.525L1312.18 -140.478L1168.01 3.76505L2018.6 854.768L2162.77 710.525Z\" fill=\"black\"></path><path d=\"M1312.16 -140.485L202.096 -1251.09L57.9241 -1106.85L1167.99 3.75794L1312.16 -140.485Z\" fill=\"#EDEDED\"></path><path d=\"M2133.89 -1251.07L1023.83 -140.458L1168 3.78455L2278.07 -1106.83L2133.89 -1251.07Z\" fill=\"#383838\"></path><path d=\"M591.343 147.968L-634.061 -1078.04L-864.736 -847.248L360.668 378.756L591.343 147.968Z\" fill=\"black\"></path><path d=\"M1023.82 147.97L-217.503 -1093.96L-433.761 -877.595L807.559 364.333L1023.82 147.97Z\" fill=\"#383838\"></path></g><mask id=\"mask2_2135_11278\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"-17\" y=\"351\" width=\"1823\" height=\"780\"><path d=\"M-17 351.938V753.629L837.67 753.672L845.662 1130.18L1806 1130.26V352.094\" fill=\"white\"></path></mask><g mask=\"url(#mask2_2135_11278)\"><path d=\"M1023.81 555.952L-217.506 -685.977L-433.764 -469.613L807.557 772.316L1023.81 555.952Z\" fill=\"#262626\"></path><path d=\"M591.347 555.967L-649.973 -685.962L-880.648 -455.174L360.672 786.755L591.347 555.967Z\" fill=\"black\"></path><path d=\"M1010.63 -613.543L-677.305 1075.22L-533.133 1219.46L1154.8 -469.3L1010.63 -613.543Z\" fill=\"#262626\"></path><path d=\"M1760.63 110.929L910.039 961.932L1054.21 1106.17L1904.8 255.172L1760.63 110.929Z\" fill=\"black\"></path><path d=\"M360.674 325.168L-864.73 1551.17L-634.055 1781.96L591.349 555.956L360.674 325.168Z\" fill=\"black\"></path><path d=\"M807.565 339.631L-433.756 1581.56L-217.498 1797.92L1023.82 555.995L807.565 339.631Z\" fill=\"#383838\"></path></g></g></g></svg>`;\n\nconst ELEMENT_NAME = 'umd-element-carousel-cards';\n\nconst ELEMENT_DECLARATION = 'carousel-cards-declaration';\nconst CAROUSEL_CONTAINER = 'element-carousel-container';\nconst CAROUSEL_LOCK = 'element-carousel-lock';\n\nconst INTRO_CONTAINER = 'carousel-cards-intro-container';\nconst INTRO_CONTAINER_LOCK = 'carousel-cards-intro-container-lock';\nconst INTRO_CONTAINER_HEADLINE = 'carousel-cards-intro-container-headline';\nconst INTRO_CONTAINER_TEXT = 'carousel-cards-intro-container-text';\nconst INTRO_CONTAINER_CTA = 'carousel-cards-intro-container-cta';\n\nconst OVERWRITE_ANIMATION_CAROUSEL_DECLARATION = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.declaration}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.container}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.button}`;\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {\n      padding-bottom: 60px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_DECLARATION} {\n      width: 60%;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n      bottom: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n      top: 50%;\n      transform: translateY(-50%);\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n      left: 49px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n      right: -52px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n      left: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n      left: -52px;\n    }\n  }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE}`]: typography.sans.largest,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE} *`]: typography.sans.largest,\n    },\n  })}\n\n  .${INTRO_CONTAINER_HEADLINE},\n  .${INTRO_CONTAINER_HEADLINE} * {\n    color: ${token.color.white};\n    font-weight: 800;\n    text-transform: uppercase;\n  }\n`;\n\n// prettier-ignore\nconst TextStyles = `\n  * + .${INTRO_CONTAINER_TEXT} {\n    margin-top: ${token.spacing.md};\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: element.text.rich.advancedDark,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: typography.sans.medium,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst ActionStyles = `\n  * + .${INTRO_CONTAINER_CTA} {\n    margin-top: ${token.spacing.md};\n  }\n\n  .${INTRO_CONTAINER_CTA} a {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst IntroContainer = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${INTRO_CONTAINER} {\n      margin-bottom: ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${INTRO_CONTAINER} {\n      width: calc(40% - ${token.spacing['2xl']});\n      padding-right: ${token.spacing['2xl']};\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    .${INTRO_CONTAINER} .${INTRO_CONTAINER_LOCK} {\n      max-width: inherit;\n      padding: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ContainerLock = `\n  .${CAROUSEL_LOCK} {\n    position: relative;\n    ${Utility.theme.convertJSSObjectToStyles({\n      styleObj: layout.space.horizontal.larger,\n    })}\n  }\n\n  @media (max-width: ${MEDIUM - 1}px) {\n    .${CAROUSEL_LOCK} {\n      padding-right: 0;\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    .${CAROUSEL_LOCK} {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n  }\n\n  @media umd-carousel-card (max-width: ${LARGE - 1}px) {\n    .${CAROUSEL_LOCK} {\n      max-width: inherit;\n      padding: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ContainerStyles = `\n  @keyframes card-carousel-slide-in {\n    from { transform: translateX(-25vw); }\n    to { transform: translateX(0);}\n  }\n\n  .${CAROUSEL_CONTAINER} {\n    background-color: ${token.color.black};\n    padding: ${token.spacing['3xl']} 0;\n    position: relative;\n    overflow: clip;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: 300px) {\n    .${CAROUSEL_CONTAINER} {\n      display: none;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${CAROUSEL_CONTAINER} {\n      padding: ${token.spacing['4xl']} 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${CAROUSEL_CONTAINER} {\n      padding: ${token.spacing['max']} 0;\n    }\n  }\n\n  .${CAROUSEL_CONTAINER} > svg {\n    width: auto;\n    height: 100%;\n    object-fit: cover;\n    position: absolute;\n    top: 0;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${CAROUSEL_CONTAINER} > svg {\n        animation: card-carousel-slide-in ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: 0;\n        animation-range-end: 100vh;\n        transform: translateX(-15vw);\n      }\n    }\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_CARDS_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_DECLARATION} * {\n    color: ${token.color.white};\n  }\n  \n  ${carouselElements.blocks.Styles}\n  ${ContainerStyles}\n  ${ContainerLock}\n  ${HeadlineStyles}\n  ${TextStyles}\n  ${ActionStyles}\n  ${IntroContainer}\n  ${OverwriteCarouselStyles}\n`;\n\nconst CreateIntro = (props: TypeCarouselCardsRequirements) => {\n  const { headline, text, actions } = props;\n  const introContainer = document.createElement('div');\n  const introWrapper = document.createElement('div');\n\n  introWrapper.classList.add(INTRO_CONTAINER_LOCK);\n\n  if (headline) {\n    headline.classList.add(INTRO_CONTAINER_HEADLINE);\n    introWrapper.appendChild(headline);\n  }\n\n  if (text) {\n    text.classList.add(INTRO_CONTAINER_TEXT);\n    introWrapper.appendChild(text);\n  }\n\n  if (actions) {\n    actions.classList.add(INTRO_CONTAINER_CTA);\n    introWrapper.appendChild(actions);\n  }\n\n  introContainer.classList.add(INTRO_CONTAINER);\n  introContainer.appendChild(introWrapper);\n\n  return introContainer;\n};\n\nexport default (props: TypeCarouselCardsRequirements) =>\n  (() => {\n    const { slide, shadowRef } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n\n    if (slide) slide.style.minHeight = '450px';\n    if (shadowRef) shadowRef.style.minHeight = '450px';\n\n    const carouselContainer = carouselElements.blocks.CreateElement({\n      ...props,\n      blocks: props.cards,\n      overwriteDisplayLogic: {\n        mobileBreakpoint: 650,\n        tabletBreakpoint: 1024,\n        desktopBreakpoint: 1024,\n        mobileCount: 1,\n        tabletCount: 2,\n        desktopCount: 2,\n        maxCount: 2,\n        showMobileHint: true,\n        showHint: false,\n      },\n    });\n    const introContainer = CreateIntro(props);\n\n    wrapper.classList.add(CAROUSEL_LOCK);\n    wrapper.appendChild(introContainer);\n    wrapper.appendChild(carouselContainer.element);\n\n    container.classList.add(CAROUSEL_CONTAINER);\n    container.innerHTML = BACKGROUND_TEXTURE;\n    container.appendChild(wrapper);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    return {\n      element: declaration,\n      styles: STYLES_CAROUSEL_CARDS_ELEMENT,\n      events: {\n        resize: carouselContainer.events.resize,\n        load: carouselContainer.events.load,\n      },\n    };\n  })();\n"],"names":["carouselElements.blocks","Utility.theme.convertJSSObjectToStyles","typography","token","element","layout"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../source/composite/carousel/cards/index.ts"],"sourcesContent":["import {\n  element,\n  layout,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselCardsRequirements = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  slide: HTMLElement;\n  shadowRef?: HTMLElement;\n  cards: HTMLElement[];\n};\n\nconst MEDIUM = 768;\nconst LARGE = 1024;\n\nconst BACKGROUND_TEXTURE = `<svg aria-hidden=\"true\" width=\"1599\" height=\"618\" viewBox=\"0 0 1599 618\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n\"><mask id=\"mask0_2135_11278\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"1600\" height=\"618\"><rect width=\"1600\" height=\"618\" fill=\"#242424\"></rect></mask><g mask=\"url(#mask0_2135_11278)\"><g opacity=\"0.5\"><mask id=\"mask1_2135_11278\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"-17\" y=\"-56\" width=\"1823\" height=\"408\"><path d=\"M-17 351.98V-56H1806V351.98\" fill=\"white\"></path></mask><g mask=\"url(#mask1_2135_11278)\"><path d=\"M807.562 -68.3515L-433.759 1173.58L-217.501 1389.94L1023.82 148.012L807.562 -68.3515Z\" fill=\"#262626\"></path><path d=\"M360.649 -82.8017L-880.672 1159.13L-649.997 1389.92L591.324 147.986L360.649 -82.8017Z\" fill=\"black\"></path><path d=\"M1154.8 1173.26L-533.139 -515.499L-677.311 -371.256L1010.63 1317.51L1154.8 1173.26Z\" fill=\"#262626\"></path><path d=\"M2162.77 710.525L1312.18 -140.478L1168.01 3.76505L2018.6 854.768L2162.77 710.525Z\" fill=\"black\"></path><path d=\"M1312.16 -140.485L202.096 -1251.09L57.9241 -1106.85L1167.99 3.75794L1312.16 -140.485Z\" fill=\"#EDEDED\"></path><path d=\"M2133.89 -1251.07L1023.83 -140.458L1168 3.78455L2278.07 -1106.83L2133.89 -1251.07Z\" fill=\"#383838\"></path><path d=\"M591.343 147.968L-634.061 -1078.04L-864.736 -847.248L360.668 378.756L591.343 147.968Z\" fill=\"black\"></path><path d=\"M1023.82 147.97L-217.503 -1093.96L-433.761 -877.595L807.559 364.333L1023.82 147.97Z\" fill=\"#383838\"></path></g><mask id=\"mask2_2135_11278\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"-17\" y=\"351\" width=\"1823\" height=\"780\"><path d=\"M-17 351.938V753.629L837.67 753.672L845.662 1130.18L1806 1130.26V352.094\" fill=\"white\"></path></mask><g mask=\"url(#mask2_2135_11278)\"><path d=\"M1023.81 555.952L-217.506 -685.977L-433.764 -469.613L807.557 772.316L1023.81 555.952Z\" fill=\"#262626\"></path><path d=\"M591.347 555.967L-649.973 -685.962L-880.648 -455.174L360.672 786.755L591.347 555.967Z\" fill=\"black\"></path><path d=\"M1010.63 -613.543L-677.305 1075.22L-533.133 1219.46L1154.8 -469.3L1010.63 -613.543Z\" fill=\"#262626\"></path><path d=\"M1760.63 110.929L910.039 961.932L1054.21 1106.17L1904.8 255.172L1760.63 110.929Z\" fill=\"black\"></path><path d=\"M360.674 325.168L-864.73 1551.17L-634.055 1781.96L591.349 555.956L360.674 325.168Z\" fill=\"black\"></path><path d=\"M807.565 339.631L-433.756 1581.56L-217.498 1797.92L1023.82 555.995L807.565 339.631Z\" fill=\"#383838\"></path></g></g></g></svg>`;\n\nconst ELEMENT_NAME = 'umd-element-carousel-cards';\n\nconst ELEMENT_DECLARATION = 'carousel-cards-declaration';\nconst CAROUSEL_CONTAINER = 'element-carousel-container';\nconst CAROUSEL_LOCK = 'element-carousel-lock';\n\nconst INTRO_CONTAINER = 'carousel-cards-intro-container';\nconst INTRO_CONTAINER_LOCK = 'carousel-cards-intro-container-lock';\nconst INTRO_CONTAINER_HEADLINE = 'carousel-cards-intro-container-headline';\nconst INTRO_CONTAINER_TEXT = 'carousel-cards-intro-container-text';\nconst INTRO_CONTAINER_CTA = 'carousel-cards-intro-container-cta';\n\nconst OVERWRITE_ANIMATION_CAROUSEL_DECLARATION = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.declaration}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.container}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.button}`;\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {\n      padding-bottom: 60px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_DECLARATION} {\n      width: 60%;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n      bottom: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n      top: 50%;\n      transform: translateY(-50%);\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n      left: 49px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n      right: -52px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n      left: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n      left: -52px;\n    }\n  }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE}`]: typography.sans.largest,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE} *`]: typography.sans.largest,\n    },\n  })}\n\n  .${INTRO_CONTAINER_HEADLINE},\n  .${INTRO_CONTAINER_HEADLINE} * {\n    color: ${token.color.white};\n    font-weight: 800;\n    text-transform: uppercase;\n  }\n`;\n\n// prettier-ignore\nconst TextStyles = `\n  * + .${INTRO_CONTAINER_TEXT} {\n    margin-top: ${token.spacing.md};\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: element.text.rich.advancedDark,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: typography.sans.medium,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst ActionStyles = `\n  * + .${INTRO_CONTAINER_CTA} {\n    margin-top: ${token.spacing.md};\n  }\n\n  .${INTRO_CONTAINER_CTA} a {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst IntroContainer = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${INTRO_CONTAINER} {\n      margin-bottom: ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${INTRO_CONTAINER} {\n      width: calc(40% - ${token.spacing['2xl']});\n      padding-right: ${token.spacing['2xl']};\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    .${INTRO_CONTAINER} .${INTRO_CONTAINER_LOCK} {\n      max-width: inherit;\n      padding: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ContainerLock = `\n  .${CAROUSEL_LOCK} {\n    position: relative;\n    ${Utility.theme.convertJSSObjectToStyles({\n      styleObj: layout.space.horizontal.larger,\n    })}\n  }\n\n  @media (max-width: ${MEDIUM - 1}px) {\n    .${CAROUSEL_LOCK} {\n      padding-right: 0;\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    .${CAROUSEL_LOCK} {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n  }\n\n  @media umd-carousel-card (max-width: ${LARGE - 1}px) {\n    .${CAROUSEL_LOCK} {\n      max-width: inherit;\n      padding: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ContainerStyles = `\n  @keyframes card-carousel-slide-in {\n    from { transform: translateX(-25vw); }\n    to { transform: translateX(0);}\n  }\n\n  .${CAROUSEL_CONTAINER} {\n    background-color: ${token.color.black};\n    padding: ${token.spacing['3xl']} 0;\n    position: relative;\n    overflow: clip;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: 300px) {\n    .${CAROUSEL_CONTAINER} {\n      display: none;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${CAROUSEL_CONTAINER} {\n      padding: ${token.spacing['4xl']} 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${CAROUSEL_CONTAINER} {\n      padding: ${token.spacing['max']} 0;\n    }\n  }\n\n  .${CAROUSEL_CONTAINER} > svg {\n    width: auto;\n    height: 100%;\n    object-fit: cover;\n    position: absolute;\n    top: 0;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${CAROUSEL_CONTAINER} > svg {\n        animation: card-carousel-slide-in ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: 0;\n        animation-range-end: 100vh;\n        transform: translateX(-15vw);\n      }\n    }\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_CARDS_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_DECLARATION} * {\n    color: ${token.color.white};\n  }\n  \n  ${carouselElements.blocks.Styles}\n  ${ContainerStyles}\n  ${ContainerLock}\n  ${HeadlineStyles}\n  ${TextStyles}\n  ${ActionStyles}\n  ${IntroContainer}\n  ${OverwriteCarouselStyles}\n`;\n\nconst CreateIntro = (props: TypeCarouselCardsRequirements) => {\n  const { headline, text, actions } = props;\n  const introContainer = document.createElement('div');\n  const introWrapper = document.createElement('div');\n\n  introWrapper.classList.add(INTRO_CONTAINER_LOCK);\n\n  if (headline) {\n    headline.classList.add(INTRO_CONTAINER_HEADLINE);\n    introWrapper.appendChild(headline);\n  }\n\n  if (text) {\n    text.classList.add(INTRO_CONTAINER_TEXT);\n    introWrapper.appendChild(text);\n  }\n\n  if (actions) {\n    actions.classList.add(INTRO_CONTAINER_CTA);\n    introWrapper.appendChild(actions);\n  }\n\n  introContainer.classList.add(INTRO_CONTAINER);\n  introContainer.appendChild(introWrapper);\n\n  return introContainer;\n};\n\nexport default (props: TypeCarouselCardsRequirements) =>\n  (() => {\n    const { slide, shadowRef } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n\n    if (slide) slide.style.minHeight = '450px';\n    if (shadowRef) shadowRef.style.minHeight = '450px';\n\n    const carouselContainer = carouselElements.blocks.CreateElement({\n      ...props,\n      blocks: props.cards,\n      overwriteDisplayLogic: {\n        mobileBreakpoint: 650,\n        tabletBreakpoint: 1024,\n        desktopBreakpoint: 1024,\n        mobileCount: 1,\n        tabletCount: 2,\n        desktopCount: 2,\n        maxCount: 2,\n        showMobileHint: true,\n        showHint: false,\n      },\n    });\n    const introContainer = CreateIntro(props);\n\n    wrapper.classList.add(CAROUSEL_LOCK);\n    wrapper.appendChild(introContainer);\n    wrapper.appendChild(carouselContainer.element);\n\n    container.classList.add(CAROUSEL_CONTAINER);\n    container.innerHTML = BACKGROUND_TEXTURE;\n    container.appendChild(wrapper);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    return {\n      element: declaration,\n      styles: STYLES_CAROUSEL_CARDS_ELEMENT,\n      events: {\n        resize: carouselContainer.events.resize,\n        load: carouselContainer.events.load,\n      },\n    };\n  })();\n"],"names":["carouselElements.blocks","Utility.theme.convertJSSObjectToStyles","typography","token","element","layout"],"mappings":"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"}

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

@@ -206,7 +206,7 @@ const ContainerStyles = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${CAROUSEL_CONTAINER} > svg {
         animation: card-carousel-slide-in ease-in-out forwards;
         animation-timeline: view();

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../source/composite/carousel/cards/index.ts"],"sourcesContent":["import {\n  element,\n  layout,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselCardsRequirements = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  slide: HTMLElement;\n  shadowRef?: HTMLElement;\n  cards: HTMLElement[];\n};\n\nconst MEDIUM = 768;\nconst LARGE = 1024;\n\nconst BACKGROUND_TEXTURE = `<svg aria-hidden=\"true\" width=\"1599\" height=\"618\" viewBox=\"0 0 1599 618\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n\"><mask id=\"mask0_2135_11278\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"1600\" height=\"618\"><rect width=\"1600\" height=\"618\" fill=\"#242424\"></rect></mask><g mask=\"url(#mask0_2135_11278)\"><g opacity=\"0.5\"><mask id=\"mask1_2135_11278\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"-17\" y=\"-56\" width=\"1823\" height=\"408\"><path d=\"M-17 351.98V-56H1806V351.98\" fill=\"white\"></path></mask><g mask=\"url(#mask1_2135_11278)\"><path d=\"M807.562 -68.3515L-433.759 1173.58L-217.501 1389.94L1023.82 148.012L807.562 -68.3515Z\" fill=\"#262626\"></path><path d=\"M360.649 -82.8017L-880.672 1159.13L-649.997 1389.92L591.324 147.986L360.649 -82.8017Z\" fill=\"black\"></path><path d=\"M1154.8 1173.26L-533.139 -515.499L-677.311 -371.256L1010.63 1317.51L1154.8 1173.26Z\" fill=\"#262626\"></path><path d=\"M2162.77 710.525L1312.18 -140.478L1168.01 3.76505L2018.6 854.768L2162.77 710.525Z\" fill=\"black\"></path><path d=\"M1312.16 -140.485L202.096 -1251.09L57.9241 -1106.85L1167.99 3.75794L1312.16 -140.485Z\" fill=\"#EDEDED\"></path><path d=\"M2133.89 -1251.07L1023.83 -140.458L1168 3.78455L2278.07 -1106.83L2133.89 -1251.07Z\" fill=\"#383838\"></path><path d=\"M591.343 147.968L-634.061 -1078.04L-864.736 -847.248L360.668 378.756L591.343 147.968Z\" fill=\"black\"></path><path d=\"M1023.82 147.97L-217.503 -1093.96L-433.761 -877.595L807.559 364.333L1023.82 147.97Z\" fill=\"#383838\"></path></g><mask id=\"mask2_2135_11278\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"-17\" y=\"351\" width=\"1823\" height=\"780\"><path d=\"M-17 351.938V753.629L837.67 753.672L845.662 1130.18L1806 1130.26V352.094\" fill=\"white\"></path></mask><g mask=\"url(#mask2_2135_11278)\"><path d=\"M1023.81 555.952L-217.506 -685.977L-433.764 -469.613L807.557 772.316L1023.81 555.952Z\" fill=\"#262626\"></path><path d=\"M591.347 555.967L-649.973 -685.962L-880.648 -455.174L360.672 786.755L591.347 555.967Z\" fill=\"black\"></path><path d=\"M1010.63 -613.543L-677.305 1075.22L-533.133 1219.46L1154.8 -469.3L1010.63 -613.543Z\" fill=\"#262626\"></path><path d=\"M1760.63 110.929L910.039 961.932L1054.21 1106.17L1904.8 255.172L1760.63 110.929Z\" fill=\"black\"></path><path d=\"M360.674 325.168L-864.73 1551.17L-634.055 1781.96L591.349 555.956L360.674 325.168Z\" fill=\"black\"></path><path d=\"M807.565 339.631L-433.756 1581.56L-217.498 1797.92L1023.82 555.995L807.565 339.631Z\" fill=\"#383838\"></path></g></g></g></svg>`;\n\nconst ELEMENT_NAME = 'umd-element-carousel-cards';\n\nconst ELEMENT_DECLARATION = 'carousel-cards-declaration';\nconst CAROUSEL_CONTAINER = 'element-carousel-container';\nconst CAROUSEL_LOCK = 'element-carousel-lock';\n\nconst INTRO_CONTAINER = 'carousel-cards-intro-container';\nconst INTRO_CONTAINER_LOCK = 'carousel-cards-intro-container-lock';\nconst INTRO_CONTAINER_HEADLINE = 'carousel-cards-intro-container-headline';\nconst INTRO_CONTAINER_TEXT = 'carousel-cards-intro-container-text';\nconst INTRO_CONTAINER_CTA = 'carousel-cards-intro-container-cta';\n\nconst OVERWRITE_ANIMATION_CAROUSEL_DECLARATION = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.declaration}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.container}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.button}`;\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {\n      padding-bottom: 60px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_DECLARATION} {\n      width: 60%;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n      bottom: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n      top: 50%;\n      transform: translateY(-50%);\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n      left: 49px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n      right: -52px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n      left: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n      left: -52px;\n    }\n  }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE}`]: typography.sans.largest,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE} *`]: typography.sans.largest,\n    },\n  })}\n\n  .${INTRO_CONTAINER_HEADLINE},\n  .${INTRO_CONTAINER_HEADLINE} * {\n    color: ${token.color.white};\n    font-weight: 800;\n    text-transform: uppercase;\n  }\n`;\n\n// prettier-ignore\nconst TextStyles = `\n  * + .${INTRO_CONTAINER_TEXT} {\n    margin-top: ${token.spacing.md};\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: element.text.rich.advancedDark,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: typography.sans.medium,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst ActionStyles = `\n  * + .${INTRO_CONTAINER_CTA} {\n    margin-top: ${token.spacing.md};\n  }\n\n  .${INTRO_CONTAINER_CTA} a {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst IntroContainer = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${INTRO_CONTAINER} {\n      margin-bottom: ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${INTRO_CONTAINER} {\n      width: calc(40% - ${token.spacing['2xl']});\n      padding-right: ${token.spacing['2xl']};\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    .${INTRO_CONTAINER} .${INTRO_CONTAINER_LOCK} {\n      max-width: inherit;\n      padding: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ContainerLock = `\n  .${CAROUSEL_LOCK} {\n    position: relative;\n    ${Utility.theme.convertJSSObjectToStyles({\n      styleObj: layout.space.horizontal.larger,\n    })}\n  }\n\n  @media (max-width: ${MEDIUM - 1}px) {\n    .${CAROUSEL_LOCK} {\n      padding-right: 0;\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    .${CAROUSEL_LOCK} {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n  }\n\n  @media umd-carousel-card (max-width: ${LARGE - 1}px) {\n    .${CAROUSEL_LOCK} {\n      max-width: inherit;\n      padding: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ContainerStyles = `\n  @keyframes card-carousel-slide-in {\n    from { transform: translateX(-25vw); }\n    to { transform: translateX(0);}\n  }\n\n  .${CAROUSEL_CONTAINER} {\n    background-color: ${token.color.black};\n    padding: ${token.spacing['3xl']} 0;\n    position: relative;\n    overflow: clip;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: 300px) {\n    .${CAROUSEL_CONTAINER} {\n      display: none;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${CAROUSEL_CONTAINER} {\n      padding: ${token.spacing['4xl']} 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${CAROUSEL_CONTAINER} {\n      padding: ${token.spacing['max']} 0;\n    }\n  }\n\n  .${CAROUSEL_CONTAINER} > svg {\n    width: auto;\n    height: 100%;\n    object-fit: cover;\n    position: absolute;\n    top: 0;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${CAROUSEL_CONTAINER} > svg {\n        animation: card-carousel-slide-in ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: 0;\n        animation-range-end: 100vh;\n        transform: translateX(-15vw);\n      }\n    }\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_CARDS_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_DECLARATION} * {\n    color: ${token.color.white};\n  }\n  \n  ${carouselElements.blocks.Styles}\n  ${ContainerStyles}\n  ${ContainerLock}\n  ${HeadlineStyles}\n  ${TextStyles}\n  ${ActionStyles}\n  ${IntroContainer}\n  ${OverwriteCarouselStyles}\n`;\n\nconst CreateIntro = (props: TypeCarouselCardsRequirements) => {\n  const { headline, text, actions } = props;\n  const introContainer = document.createElement('div');\n  const introWrapper = document.createElement('div');\n\n  introWrapper.classList.add(INTRO_CONTAINER_LOCK);\n\n  if (headline) {\n    headline.classList.add(INTRO_CONTAINER_HEADLINE);\n    introWrapper.appendChild(headline);\n  }\n\n  if (text) {\n    text.classList.add(INTRO_CONTAINER_TEXT);\n    introWrapper.appendChild(text);\n  }\n\n  if (actions) {\n    actions.classList.add(INTRO_CONTAINER_CTA);\n    introWrapper.appendChild(actions);\n  }\n\n  introContainer.classList.add(INTRO_CONTAINER);\n  introContainer.appendChild(introWrapper);\n\n  return introContainer;\n};\n\nexport default (props: TypeCarouselCardsRequirements) =>\n  (() => {\n    const { slide, shadowRef } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n\n    if (slide) slide.style.minHeight = '450px';\n    if (shadowRef) shadowRef.style.minHeight = '450px';\n\n    const carouselContainer = carouselElements.blocks.CreateElement({\n      ...props,\n      blocks: props.cards,\n      overwriteDisplayLogic: {\n        mobileBreakpoint: 650,\n        tabletBreakpoint: 1024,\n        desktopBreakpoint: 1024,\n        mobileCount: 1,\n        tabletCount: 2,\n        desktopCount: 2,\n        maxCount: 2,\n        showMobileHint: true,\n        showHint: false,\n      },\n    });\n    const introContainer = CreateIntro(props);\n\n    wrapper.classList.add(CAROUSEL_LOCK);\n    wrapper.appendChild(introContainer);\n    wrapper.appendChild(carouselContainer.element);\n\n    container.classList.add(CAROUSEL_CONTAINER);\n    container.innerHTML = BACKGROUND_TEXTURE;\n    container.appendChild(wrapper);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    return {\n      element: declaration,\n      styles: STYLES_CAROUSEL_CARDS_ELEMENT,\n      events: {\n        resize: carouselContainer.events.resize,\n        load: carouselContainer.events.load,\n      },\n    };\n  })();\n"],"names":["carouselElements.blocks","Utility.theme.convertJSSObjectToStyles"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../../source/composite/carousel/cards/index.ts"],"sourcesContent":["import {\n  element,\n  layout,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselCardsRequirements = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  slide: HTMLElement;\n  shadowRef?: HTMLElement;\n  cards: HTMLElement[];\n};\n\nconst MEDIUM = 768;\nconst LARGE = 1024;\n\nconst BACKGROUND_TEXTURE = `<svg aria-hidden=\"true\" width=\"1599\" height=\"618\" viewBox=\"0 0 1599 618\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n\"><mask id=\"mask0_2135_11278\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"1600\" height=\"618\"><rect width=\"1600\" height=\"618\" fill=\"#242424\"></rect></mask><g mask=\"url(#mask0_2135_11278)\"><g opacity=\"0.5\"><mask id=\"mask1_2135_11278\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"-17\" y=\"-56\" width=\"1823\" height=\"408\"><path d=\"M-17 351.98V-56H1806V351.98\" fill=\"white\"></path></mask><g mask=\"url(#mask1_2135_11278)\"><path d=\"M807.562 -68.3515L-433.759 1173.58L-217.501 1389.94L1023.82 148.012L807.562 -68.3515Z\" fill=\"#262626\"></path><path d=\"M360.649 -82.8017L-880.672 1159.13L-649.997 1389.92L591.324 147.986L360.649 -82.8017Z\" fill=\"black\"></path><path d=\"M1154.8 1173.26L-533.139 -515.499L-677.311 -371.256L1010.63 1317.51L1154.8 1173.26Z\" fill=\"#262626\"></path><path d=\"M2162.77 710.525L1312.18 -140.478L1168.01 3.76505L2018.6 854.768L2162.77 710.525Z\" fill=\"black\"></path><path d=\"M1312.16 -140.485L202.096 -1251.09L57.9241 -1106.85L1167.99 3.75794L1312.16 -140.485Z\" fill=\"#EDEDED\"></path><path d=\"M2133.89 -1251.07L1023.83 -140.458L1168 3.78455L2278.07 -1106.83L2133.89 -1251.07Z\" fill=\"#383838\"></path><path d=\"M591.343 147.968L-634.061 -1078.04L-864.736 -847.248L360.668 378.756L591.343 147.968Z\" fill=\"black\"></path><path d=\"M1023.82 147.97L-217.503 -1093.96L-433.761 -877.595L807.559 364.333L1023.82 147.97Z\" fill=\"#383838\"></path></g><mask id=\"mask2_2135_11278\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"-17\" y=\"351\" width=\"1823\" height=\"780\"><path d=\"M-17 351.938V753.629L837.67 753.672L845.662 1130.18L1806 1130.26V352.094\" fill=\"white\"></path></mask><g mask=\"url(#mask2_2135_11278)\"><path d=\"M1023.81 555.952L-217.506 -685.977L-433.764 -469.613L807.557 772.316L1023.81 555.952Z\" fill=\"#262626\"></path><path d=\"M591.347 555.967L-649.973 -685.962L-880.648 -455.174L360.672 786.755L591.347 555.967Z\" fill=\"black\"></path><path d=\"M1010.63 -613.543L-677.305 1075.22L-533.133 1219.46L1154.8 -469.3L1010.63 -613.543Z\" fill=\"#262626\"></path><path d=\"M1760.63 110.929L910.039 961.932L1054.21 1106.17L1904.8 255.172L1760.63 110.929Z\" fill=\"black\"></path><path d=\"M360.674 325.168L-864.73 1551.17L-634.055 1781.96L591.349 555.956L360.674 325.168Z\" fill=\"black\"></path><path d=\"M807.565 339.631L-433.756 1581.56L-217.498 1797.92L1023.82 555.995L807.565 339.631Z\" fill=\"#383838\"></path></g></g></g></svg>`;\n\nconst ELEMENT_NAME = 'umd-element-carousel-cards';\n\nconst ELEMENT_DECLARATION = 'carousel-cards-declaration';\nconst CAROUSEL_CONTAINER = 'element-carousel-container';\nconst CAROUSEL_LOCK = 'element-carousel-lock';\n\nconst INTRO_CONTAINER = 'carousel-cards-intro-container';\nconst INTRO_CONTAINER_LOCK = 'carousel-cards-intro-container-lock';\nconst INTRO_CONTAINER_HEADLINE = 'carousel-cards-intro-container-headline';\nconst INTRO_CONTAINER_TEXT = 'carousel-cards-intro-container-text';\nconst INTRO_CONTAINER_CTA = 'carousel-cards-intro-container-cta';\n\nconst OVERWRITE_ANIMATION_CAROUSEL_DECLARATION = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.declaration}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.container}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.button}`;\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {\n      padding-bottom: 60px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_DECLARATION} {\n      width: 60%;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n      bottom: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n      top: 50%;\n      transform: translateY(-50%);\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n      left: 49px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n      right: -52px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n      left: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n      left: -52px;\n    }\n  }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE}`]: typography.sans.largest,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE} *`]: typography.sans.largest,\n    },\n  })}\n\n  .${INTRO_CONTAINER_HEADLINE},\n  .${INTRO_CONTAINER_HEADLINE} * {\n    color: ${token.color.white};\n    font-weight: 800;\n    text-transform: uppercase;\n  }\n`;\n\n// prettier-ignore\nconst TextStyles = `\n  * + .${INTRO_CONTAINER_TEXT} {\n    margin-top: ${token.spacing.md};\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: element.text.rich.advancedDark,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: typography.sans.medium,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst ActionStyles = `\n  * + .${INTRO_CONTAINER_CTA} {\n    margin-top: ${token.spacing.md};\n  }\n\n  .${INTRO_CONTAINER_CTA} a {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst IntroContainer = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${INTRO_CONTAINER} {\n      margin-bottom: ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${INTRO_CONTAINER} {\n      width: calc(40% - ${token.spacing['2xl']});\n      padding-right: ${token.spacing['2xl']};\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    .${INTRO_CONTAINER} .${INTRO_CONTAINER_LOCK} {\n      max-width: inherit;\n      padding: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ContainerLock = `\n  .${CAROUSEL_LOCK} {\n    position: relative;\n    ${Utility.theme.convertJSSObjectToStyles({\n      styleObj: layout.space.horizontal.larger,\n    })}\n  }\n\n  @media (max-width: ${MEDIUM - 1}px) {\n    .${CAROUSEL_LOCK} {\n      padding-right: 0;\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    .${CAROUSEL_LOCK} {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n  }\n\n  @media umd-carousel-card (max-width: ${LARGE - 1}px) {\n    .${CAROUSEL_LOCK} {\n      max-width: inherit;\n      padding: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ContainerStyles = `\n  @keyframes card-carousel-slide-in {\n    from { transform: translateX(-25vw); }\n    to { transform: translateX(0);}\n  }\n\n  .${CAROUSEL_CONTAINER} {\n    background-color: ${token.color.black};\n    padding: ${token.spacing['3xl']} 0;\n    position: relative;\n    overflow: clip;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: 300px) {\n    .${CAROUSEL_CONTAINER} {\n      display: none;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${CAROUSEL_CONTAINER} {\n      padding: ${token.spacing['4xl']} 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${CAROUSEL_CONTAINER} {\n      padding: ${token.spacing['max']} 0;\n    }\n  }\n\n  .${CAROUSEL_CONTAINER} > svg {\n    width: auto;\n    height: 100%;\n    object-fit: cover;\n    position: absolute;\n    top: 0;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${CAROUSEL_CONTAINER} > svg {\n        animation: card-carousel-slide-in ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: 0;\n        animation-range-end: 100vh;\n        transform: translateX(-15vw);\n      }\n    }\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_CARDS_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_DECLARATION} * {\n    color: ${token.color.white};\n  }\n  \n  ${carouselElements.blocks.Styles}\n  ${ContainerStyles}\n  ${ContainerLock}\n  ${HeadlineStyles}\n  ${TextStyles}\n  ${ActionStyles}\n  ${IntroContainer}\n  ${OverwriteCarouselStyles}\n`;\n\nconst CreateIntro = (props: TypeCarouselCardsRequirements) => {\n  const { headline, text, actions } = props;\n  const introContainer = document.createElement('div');\n  const introWrapper = document.createElement('div');\n\n  introWrapper.classList.add(INTRO_CONTAINER_LOCK);\n\n  if (headline) {\n    headline.classList.add(INTRO_CONTAINER_HEADLINE);\n    introWrapper.appendChild(headline);\n  }\n\n  if (text) {\n    text.classList.add(INTRO_CONTAINER_TEXT);\n    introWrapper.appendChild(text);\n  }\n\n  if (actions) {\n    actions.classList.add(INTRO_CONTAINER_CTA);\n    introWrapper.appendChild(actions);\n  }\n\n  introContainer.classList.add(INTRO_CONTAINER);\n  introContainer.appendChild(introWrapper);\n\n  return introContainer;\n};\n\nexport default (props: TypeCarouselCardsRequirements) =>\n  (() => {\n    const { slide, shadowRef } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n\n    if (slide) slide.style.minHeight = '450px';\n    if (shadowRef) shadowRef.style.minHeight = '450px';\n\n    const carouselContainer = carouselElements.blocks.CreateElement({\n      ...props,\n      blocks: props.cards,\n      overwriteDisplayLogic: {\n        mobileBreakpoint: 650,\n        tabletBreakpoint: 1024,\n        desktopBreakpoint: 1024,\n        mobileCount: 1,\n        tabletCount: 2,\n        desktopCount: 2,\n        maxCount: 2,\n        showMobileHint: true,\n        showHint: false,\n      },\n    });\n    const introContainer = CreateIntro(props);\n\n    wrapper.classList.add(CAROUSEL_LOCK);\n    wrapper.appendChild(introContainer);\n    wrapper.appendChild(carouselContainer.element);\n\n    container.classList.add(CAROUSEL_CONTAINER);\n    container.innerHTML = BACKGROUND_TEXTURE;\n    container.appendChild(wrapper);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    return {\n      element: declaration,\n      styles: STYLES_CAROUSEL_CARDS_ELEMENT,\n      events: {\n        resize: carouselContainer.events.resize,\n        load: carouselContainer.events.load,\n      },\n    };\n  })();\n"],"names":["carouselElements.blocks","Utility.theme.convertJSSObjectToStyles"],"mappings":"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"}

package/dist/composite/carousel/elements/full-screen.js

@@ -8,6 +8,7 @@ require("../../../model/modifiers/index.js");
 require("../../../model/elements/headline.js");
 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");
 const modal = require("../../../atomic/layout/overlay/modal.js");
 require("../../../atomic/layout/person/columns.js");

package/dist/composite/carousel/elements/full-screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"full-screen.js","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport { layout } from 'atomic';\nimport * as Utility from 'utilities';\n\ntype TypeFixedFullScreenProps = {\n  content: HTMLElement;\n  callback: () => void;\n};\n\nconst ELEMENT_CLOSE_BUTTON = 'carousel-fixed-screen-button';\n\nconst STYLES_FIXED_FULL_SCREEN = `\n\n\n  .${ELEMENT_CLOSE_BUTTON} {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    .${ELEMENT_CLOSE_BUTTON} {\n      top: calc(10vh - 22px);\n      right: calc(10vw - 22px);\n    }\n  }\n\n  .${ELEMENT_CLOSE_BUTTON} > svg {\n    fill: ${token.color.white};\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nexport default ({ content, callback }: TypeFixedFullScreenProps) => {\n  const modal = layout.overlay.modal({ content, callback });\n  const closeButton = document.createElement('button');\n  let styles = STYLES_FIXED_FULL_SCREEN;\n\n  styles += modal.styles;\n\n  closeButton.setAttribute('type', 'button');\n  closeButton.setAttribute('aria-label', 'Close');\n  closeButton.classList.add(ELEMENT_CLOSE_BUTTON);\n  closeButton.innerHTML = Utility.asset.icon.X;\n  closeButton.addEventListener('click', modal.events.hide);\n\n  modal.element.appendChild(closeButton);\n\n  return {\n    element: modal.element,\n    styles,\n    events: {\n      show: modal.events.show,\n      hide: modal.events.hide,\n    },\n  };\n};\n"],"names":["token","modal","layout.overlay.modal","Utility.asset.icon.X"],"mappings":";;;;;;;;;;;;;;;AASA,MAAM,uBAAuB;AAE7B,MAAM,2BAA2B;AAAA;AAAA;AAAA,KAG5B,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMbA,OAAAA,MAAM,MAAM,QAAQ,OAAO,GAAG;AAAA,OACnC,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,oBAAoB;AAAA,YACbA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAA,aAAe,CAAC,EAAE,SAAS,eAAyC;AAClE,QAAMC,UAAQC,MAAAA,YAAqB,EAAE,SAAS,UAAU;AACxD,QAAM,cAAc,SAAS,cAAc,QAAQ;AACnD,MAAI,SAAS;AAEb,YAAUD,QAAM;AAEhB,cAAY,aAAa,QAAQ,QAAQ;AACzC,cAAY,aAAa,cAAc,OAAO;AAC9C,cAAY,UAAU,IAAI,oBAAoB;AAC9C,cAAY,YAAYE,MAAAA;AACxB,cAAY,iBAAiB,SAASF,QAAM,OAAO,IAAI;AAEvDA,UAAM,QAAQ,YAAY,WAAW;AAErC,SAAO;AAAA,IACL,SAASA,QAAM;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,MAAMA,QAAM,OAAO;AAAA,MACnB,MAAMA,QAAM,OAAO;AAAA,IAAA;AAAA,EACrB;AAEJ;;"}
+{"version":3,"file":"full-screen.js","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport { layout } from 'atomic';\nimport * as Utility from 'utilities';\n\ntype TypeFixedFullScreenProps = {\n  content: HTMLElement;\n  callback: () => void;\n};\n\nconst ELEMENT_CLOSE_BUTTON = 'carousel-fixed-screen-button';\n\nconst STYLES_FIXED_FULL_SCREEN = `\n\n\n  .${ELEMENT_CLOSE_BUTTON} {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    .${ELEMENT_CLOSE_BUTTON} {\n      top: calc(10vh - 22px);\n      right: calc(10vw - 22px);\n    }\n  }\n\n  .${ELEMENT_CLOSE_BUTTON} > svg {\n    fill: ${token.color.white};\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nexport default ({ content, callback }: TypeFixedFullScreenProps) => {\n  const modal = layout.overlay.modal({ content, callback });\n  const closeButton = document.createElement('button');\n  let styles = STYLES_FIXED_FULL_SCREEN;\n\n  styles += modal.styles;\n\n  closeButton.setAttribute('type', 'button');\n  closeButton.setAttribute('aria-label', 'Close');\n  closeButton.classList.add(ELEMENT_CLOSE_BUTTON);\n  closeButton.innerHTML = Utility.asset.icon.X;\n  closeButton.addEventListener('click', modal.events.hide);\n\n  modal.element.appendChild(closeButton);\n\n  return {\n    element: modal.element,\n    styles,\n    events: {\n      show: modal.events.show,\n      hide: modal.events.hide,\n    },\n  };\n};\n"],"names":["token","modal","layout.overlay.modal","Utility.asset.icon.X"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,uBAAuB;AAE7B,MAAM,2BAA2B;AAAA;AAAA;AAAA,KAG5B,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMbA,OAAAA,MAAM,MAAM,QAAQ,OAAO,GAAG;AAAA,OACnC,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,oBAAoB;AAAA,YACbA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAA,aAAe,CAAC,EAAE,SAAS,eAAyC;AAClE,QAAMC,UAAQC,MAAAA,YAAqB,EAAE,SAAS,UAAU;AACxD,QAAM,cAAc,SAAS,cAAc,QAAQ;AACnD,MAAI,SAAS;AAEb,YAAUD,QAAM;AAEhB,cAAY,aAAa,QAAQ,QAAQ;AACzC,cAAY,aAAa,cAAc,OAAO;AAC9C,cAAY,UAAU,IAAI,oBAAoB;AAC9C,cAAY,YAAYE,MAAAA;AACxB,cAAY,iBAAiB,SAASF,QAAM,OAAO,IAAI;AAEvDA,UAAM,QAAQ,YAAY,WAAW;AAErC,SAAO;AAAA,IACL,SAASA,QAAM;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,MAAMA,QAAM,OAAO;AAAA,MACnB,MAAMA,QAAM,OAAO;AAAA,IAAA;AAAA,EACrB;AAEJ;;"}

package/dist/composite/carousel/elements/full-screen.mjs

@@ -7,6 +7,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 "../../../atomic/layout/block/stacked.mjs";
 import { createModal } from "../../../atomic/layout/overlay/modal.mjs";
 import "../../../atomic/layout/person/columns.mjs";

package/dist/composite/carousel/elements/full-screen.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"full-screen.mjs","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport { layout } from 'atomic';\nimport * as Utility from 'utilities';\n\ntype TypeFixedFullScreenProps = {\n  content: HTMLElement;\n  callback: () => void;\n};\n\nconst ELEMENT_CLOSE_BUTTON = 'carousel-fixed-screen-button';\n\nconst STYLES_FIXED_FULL_SCREEN = `\n\n\n  .${ELEMENT_CLOSE_BUTTON} {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    .${ELEMENT_CLOSE_BUTTON} {\n      top: calc(10vh - 22px);\n      right: calc(10vw - 22px);\n    }\n  }\n\n  .${ELEMENT_CLOSE_BUTTON} > svg {\n    fill: ${token.color.white};\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nexport default ({ content, callback }: TypeFixedFullScreenProps) => {\n  const modal = layout.overlay.modal({ content, callback });\n  const closeButton = document.createElement('button');\n  let styles = STYLES_FIXED_FULL_SCREEN;\n\n  styles += modal.styles;\n\n  closeButton.setAttribute('type', 'button');\n  closeButton.setAttribute('aria-label', 'Close');\n  closeButton.classList.add(ELEMENT_CLOSE_BUTTON);\n  closeButton.innerHTML = Utility.asset.icon.X;\n  closeButton.addEventListener('click', modal.events.hide);\n\n  modal.element.appendChild(closeButton);\n\n  return {\n    element: modal.element,\n    styles,\n    events: {\n      show: modal.events.show,\n      hide: modal.events.hide,\n    },\n  };\n};\n"],"names":["layout.overlay.modal","Utility.asset.icon.X"],"mappings":";;;;;;;;;;;;;;AASA,MAAM,uBAAuB;AAE7B,MAAM,2BAA2B;AAAA;AAAA;AAAA,KAG5B,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMb,MAAM,MAAM,QAAQ,OAAO,GAAG;AAAA,OACnC,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,oBAAoB;AAAA,YACb,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAA,aAAe,CAAC,EAAE,SAAS,eAAyC;AAClE,QAAM,QAAQA,YAAqB,EAAE,SAAS,UAAU;AACxD,QAAM,cAAc,SAAS,cAAc,QAAQ;AACnD,MAAI,SAAS;AAEb,YAAU,MAAM;AAEhB,cAAY,aAAa,QAAQ,QAAQ;AACzC,cAAY,aAAa,cAAc,OAAO;AAC9C,cAAY,UAAU,IAAI,oBAAoB;AAC9C,cAAY,YAAYC;AACxB,cAAY,iBAAiB,SAAS,MAAM,OAAO,IAAI;AAEvD,QAAM,QAAQ,YAAY,WAAW;AAErC,SAAO;AAAA,IACL,SAAS,MAAM;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,MAAM,MAAM,OAAO;AAAA,MACnB,MAAM,MAAM,OAAO;AAAA,IAAA;AAAA,EACrB;AAEJ;"}
+{"version":3,"file":"full-screen.mjs","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport { layout } from 'atomic';\nimport * as Utility from 'utilities';\n\ntype TypeFixedFullScreenProps = {\n  content: HTMLElement;\n  callback: () => void;\n};\n\nconst ELEMENT_CLOSE_BUTTON = 'carousel-fixed-screen-button';\n\nconst STYLES_FIXED_FULL_SCREEN = `\n\n\n  .${ELEMENT_CLOSE_BUTTON} {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    .${ELEMENT_CLOSE_BUTTON} {\n      top: calc(10vh - 22px);\n      right: calc(10vw - 22px);\n    }\n  }\n\n  .${ELEMENT_CLOSE_BUTTON} > svg {\n    fill: ${token.color.white};\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nexport default ({ content, callback }: TypeFixedFullScreenProps) => {\n  const modal = layout.overlay.modal({ content, callback });\n  const closeButton = document.createElement('button');\n  let styles = STYLES_FIXED_FULL_SCREEN;\n\n  styles += modal.styles;\n\n  closeButton.setAttribute('type', 'button');\n  closeButton.setAttribute('aria-label', 'Close');\n  closeButton.classList.add(ELEMENT_CLOSE_BUTTON);\n  closeButton.innerHTML = Utility.asset.icon.X;\n  closeButton.addEventListener('click', modal.events.hide);\n\n  modal.element.appendChild(closeButton);\n\n  return {\n    element: modal.element,\n    styles,\n    events: {\n      show: modal.events.show,\n      hide: modal.events.hide,\n    },\n  };\n};\n"],"names":["layout.overlay.modal","Utility.asset.icon.X"],"mappings":";;;;;;;;;;;;;;;AASA,MAAM,uBAAuB;AAE7B,MAAM,2BAA2B;AAAA;AAAA;AAAA,KAG5B,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMb,MAAM,MAAM,QAAQ,OAAO,GAAG;AAAA,OACnC,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,oBAAoB;AAAA,YACb,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAA,aAAe,CAAC,EAAE,SAAS,eAAyC;AAClE,QAAM,QAAQA,YAAqB,EAAE,SAAS,UAAU;AACxD,QAAM,cAAc,SAAS,cAAc,QAAQ;AACnD,MAAI,SAAS;AAEb,YAAU,MAAM;AAEhB,cAAY,aAAa,QAAQ,QAAQ;AACzC,cAAY,aAAa,cAAc,OAAO;AAC9C,cAAY,UAAU,IAAI,oBAAoB;AAC9C,cAAY,YAAYC;AACxB,cAAY,iBAAiB,SAAS,MAAM,OAAO,IAAI;AAEvD,QAAM,QAAQ,YAAY,WAAW;AAErC,SAAO;AAAA,IACL,SAAS,MAAM;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,MAAM,MAAM,OAAO;AAAA,MACnB,MAAM,MAAM,OAAO;AAAA,IAAA;AAAA,EACrB;AAEJ;"}

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

@@ -7,6 +7,7 @@ require("../../../model/modifiers/index.js");
 require("../../../model/elements/headline.js");
 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/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,EAAE,UAAUA;AAClB,MAAM,sBAAsBA,kBAAO,QAAQ,OAAO,OAAO,WAAW;AAEpE,MAAM,kBAAkB;AACxB,MAAM,aAAa;AAEnB,MAAM,gBAAgB,IAAI,eAAe,KAAK,UAAU;AAExD,MAAM,eAAe;AACrB,MAAM,wCACJ;AACF,MAAM,sCAAsC;AAC5C,MAAM,iCAAiC;AAEvC,MAAM,yBAAyB,IAAI,qCAAqC,KAAKC,MAAY,SAAS,SAAS;AAE3G,MAAM,sCAAsC,IAAI,qCAAqC,KAAKC,OAAwB,SAAS,MAAM;AACjI,MAAM,+BAA+B,IAAI,qCAAqC,KAAK,mBAAmB;AAEtG,MAAM,iCAAiC,IAAI,mCAAmC,GAAG,aAAa;AAC9F,MAAM,8BAA8B,IAAI,mCAAmC,GAAG,aAAa,KAAK,8BAA8B;AAG9H,MAAM,qBAAqB;AAAA,IACvB,8BAA8B;AAAA,wBACV,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAGrC,2BAA2B;AAAA,wBACP,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAGrC,2BAA2B;AAAA,YACnB,MAAM,MAAM,KAAK;AAAA;AAAA;AAK7B,MAAM,4BAA4B;AAAA,IAC9B,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM5B,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK5B,sBAAsB,kBAAkB,mBAAmB;AAAA,IAC3D,sBAAsB,WAAW,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAOxD,MAAM,uBAAuB;AAAA,IACzB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ1B,MAAM,0BAA0B;AAAA,IAC5B,mCAAmC;AAAA;AAAA;AAAA,wBAGf,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAGrC,mCAAmC;AAAA,YAC3B,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAGzB,mCAAmC;AAAA;AAAA;AAAA;AAAA,IAInC,mCAAmC;AAAA;AAAA;AAAA;AAMvC,MAAM,yCAAyC;AAAA,KAC1C,qCAAqC;AAAA,iBACzB,YAAY;AAAA;AAAA;AAAA,KAGxB,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpCA,OAAwB,MAAM;AAAA,IAC9BD,MAAY,MAAM;AAAA,IAClB,oBAAoB;AAAA,IACpB,uBAAuB;AAAA,IACvB,yBAAyB;AAAA,IACzB,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,eAAe,OAAO;AAAA,IAAI,CAACE,WAC/BA,OAAM,UAAU,IAAI;AAAA,EAAA;AAEtB,MAAI,SAAS;AAEb,QAAM,kBAAkBC,QAAyB;AAAA,IAC/C;AAAA,EAAA,CACD;AAED,YAAU,gBAAgB;AAE1B,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAMC,WAAS,aAAa,IAAI,CAACF,SAAOG,YAAU;AAChD,UAAM,QAAQL,MAAY,cAAc;AAAA,MAAA,OACtCE;AAAAA,MACA,aAAa;AAAA,IAAA,CACd;AAED,QAAI,oBAAoB;AACtB,YAAM,SAASI,WAAmB,OAAO;AAAA,QACvC,UAAU,gBAAgB,OAAO;AAAA,QAAA,OACjCD;AAAAA,MAAA,CACD;AAED,YAAM,YAAY,OAAO,OAAO;AAChC,gBAAU,OAAO;AAAA,IACnB;AAEA,WAAO;AAAA,EACT,CAAC;AAED,QAAM,WAAWJ,OAAwB,cAAc;AAAA,IAAA,QACrDG;AAAAA,IACA;AAAA,IACA,uBAAuB;AAAA,MACrB,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB,mBAAmB;AAAA,MACnB,cAAc;AAAA,MACd,UAAU;AAAA,MACV,UAAU;AAAA,MACV,oBAAoB,gBAAgB,OAAO;AAAA,IAAA;AAAA,EAC7C,CACD;AAED,mBAAiB,YAAY,SAAS,OAAO;AAC7C,mBAAiB,UAAU,IAAI,mCAAmC;AAClE,MAAI,YAAa,kBAAiB,aAAa,iBAAiB,UAAU;AAE1E,qBAAmB,UAAU,IAAI,qCAAqC;AACtE,qBAAmB,YAAY,gBAAgB;AAE/C,SAAO,OAAO,SAAS,CAAC,EAAE,iBAAiB,QAAQ,MAAM;AACvD,aAAS,OAAO,KAAA;AAEhB,eAAW,MAAM;AACf,YAAM,YAAY,aAAa;AAAA,QAC7B,CAAC,KAAKF,WAAWA,OAAM,eAAe,MAAMA,OAAM,eAAe;AAAA,QACjE;AAAA,MAAA;AAGF,YAAM,MAAM,YAAY,GAAG,SAAS;AAAA,IACtC,GAAG,GAAG;AAAA,EACR,CAAC;AAED,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA,QAAQ;AAAA,MACN,eAAe,SAAS,OAAO;AAAA,IAAA;AAAA,EACjC;AAGF,MAAI,oBAAoB;AACtB,UAAM,UAAU,SAAS,cAAc,KAAK;AAE5C,YAAQ,YAAY,gBAAgB,OAAO;AAE3C,YAAQ,YAAY,kBAAkB;AAEtC,WAAO;AAAA,MACL;AAAA,MACA,GAAG;AAAA,IAAA;AAAA,EAEP;AAEA,SAAO;AAAA,IACL,SAAS;AAAA,IACT,GAAG;AAAA,EAAA;AAEP,GAAA;;"}
+{"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":"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"}

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";