@universityofmaryland/web-elements-library 1.5.9 → 1.6.0-beta.1

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

@@ -1,192 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-import * as token from "@universityofmaryland/web-token-library";
-import * as Styles from "@universityofmaryland/web-styles-library";
-import { createMediaQuery } from "@universityofmaryland/web-utilities-library/styles";
-import { truncateTextBasedOnSize } from "@universityofmaryland/web-utilities-library/string";
-import { quote } from "@universityofmaryland/web-icons-library/brand";
-import "@universityofmaryland/web-styles-library/element";
-import "@universityofmaryland/web-styles-library/layout";
-import "@universityofmaryland/web-styles-library/animation";
-import "@universityofmaryland/web-styles-library/typography";
-import "@universityofmaryland/web-utilities-library/media";
-import "@universityofmaryland/web-utilities-library/dom";
-import "@universityofmaryland/web-icons-library/controls";
-import "@universityofmaryland/web-icons-library/communication";
-import "@universityofmaryland/web-icons-library/files";
-import icon from "../../../atomic/actions/icon.mjs";
-import "../../../atomic/animations/actions/indicator.mjs";
-import "../../../atomic/animations/brand/chevron-scroll.mjs";
-import "../../../atomic/animations/brand/card-stack.mjs";
-import imageContainer from "../../../atomic/assets/image/background.mjs";
-import "@universityofmaryland/web-utilities-library/performance";
-import "@universityofmaryland/web-utilities-library/accessibility";
-import "@universityofmaryland/web-icons-library/location";
-import "@universityofmaryland/web-icons-library/calendar";
-import "@universityofmaryland/web-utilities-library/theme";
-import "../../../atomic/layout/block/stacked.mjs";
-import "../../../atomic/layout/overlay/modal.mjs";
-import "../../../atomic/layout/person/columns.mjs";
-import "@universityofmaryland/web-icons-library/social";
-import "../../../atomic/text-lockup/date.mjs";
-import "../../../atomic/text-lockup/small.mjs";
-import smallScaling from "../../../atomic/text-lockup/small-scaling.mjs";
-const classRef = "card-overlay-image";
-const createCardOverlayImage = (props) => {
-  const { isQuote, ctaIcon, dateSign, backgroundImage, text } = props;
-  const children = [];
-  const wrapperChildren = [];
-  const load = () => {
-    const sizeElements = () => {
-      const textCopy = text?.innerHTML;
-      if (text && textCopy) {
-        const modifiedText = truncateTextBasedOnSize({
-          text: textCopy,
-          size: composite.element.offsetWidth
-        });
-        text.innerHTML = modifiedText;
-        if (modifiedText.length >= 220) {
-          const assetContainer = composite.element.querySelector(
-            `.${imageContainerClass}`
-          );
-          if (assetContainer) {
-            assetContainer.setAttribute("data-size", "large");
-          }
-        }
-      }
-    };
-    sizeElements();
-  };
-  let imageContainerClass = null;
-  if (ctaIcon && ctaIcon instanceof HTMLElement) {
-    children.push(icon({ ...props, ctaIcon, isThemeLight: false }));
-  }
-  if (backgroundImage) {
-    const imageContainer$1 = imageContainer({
-      element: backgroundImage,
-      isScaled: true,
-      isGifAllowed: true,
-      customStyles: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-        [`&:before`]: {
-          content: '""',
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          height: "100%",
-          zIndex: 1,
-          opacity: 1,
-          transition: `opacity 0.5s ease-in-out`,
-          background: "linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, 0.9) 100%)"
-        },
-        [`&[data-size="large"]:before`]: {
-          background: "linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, 0.9) 100%)"
-        },
-        [`img`]: {
-          transform: "scale(1.025)"
-        }
-      }
-    });
-    children.push(imageContainer$1);
-    imageContainerClass = imageContainer$1.element.className;
-  }
-  if (dateSign) {
-    wrapperChildren.push(
-      new ElementBuilder().styled(Styles.layout.background.box.white).withStyles({
-        element: {
-          alignSelf: `flex-start`
-        },
-        siblingAfter: {
-          marginTop: `${token.spacing.min}`
-        }
-      }).withChild(dateSign).build()
-    );
-  }
-  if (isQuote) {
-    const quoteWrapper = new ElementBuilder().withClassName("card-overlay-image-quote-wrapper").withStyles({
-      element: {
-        width: "41px",
-        height: "30px",
-        marginBottom: `${token.spacing.xs}`,
-        "& svg": {
-          fill: `${token.color.red}`
-        }
-      }
-    }).withHTML(quote).build();
-    wrapperChildren.push(quoteWrapper);
-  }
-  wrapperChildren.push(
-    smallScaling({
-      ...props,
-      isThemeDark: true
-    })
-  );
-  const textContent = new ElementBuilder().withClassName("card-overlay-image-text-content").withStyles({
-    element: {
-      maxWidth: `${token.spacing.maxWidth.smallest}`,
-      height: "100%",
-      display: "flex",
-      flexDirection: "column",
-      zIndex: 9,
-      position: "relative",
-      [" & * "]: {
-        color: `${token.color.white}`
-      }
-    }
-  }).withChildren(...wrapperChildren).build();
-  const textWrapper = new ElementBuilder().withClassName("card-overlay-image-text-wrapper").withStyles({
-    element: {
-      height: "auto",
-      paddingRight: `${ctaIcon ? token.spacing["2xl"] : 0}`
-    }
-  }).withChild(textContent).build();
-  const container = new ElementBuilder().withClassName("card-overlay-image-container").withStyles({
-    element: {
-      position: "relative",
-      padding: `${token.spacing.lg} ${token.spacing.md}`,
-      paddingTop: `${token.spacing["4xl"]}`,
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "flex-end",
-      minHeight: "360px",
-      height: "100%",
-      overflow: "hidden",
-      ...createMediaQuery(
-        "min-width",
-        token.media.breakpointValues.medium.min,
-        {
-          paddingTop: `${token.spacing["8xl"]}`,
-          minHeight: `424px`
-        }
-      )
-    }
-  }).withChildren(...children, textWrapper).build();
-  const composite = new ElementBuilder().withClassName(classRef).withStyles({
-    element: {
-      height: "100%",
-      containerType: "inline-size",
-      [`&:hover .${imageContainerClass}:before, &:focus .${imageContainerClass}:before`]: {
-        opacity: 0.7
-      },
-      ["&:hover img, &:focus img"]: {
-        transform: "scale(1)",
-        transition: "transform 0.5s ease-in-out"
-      }
-    }
-  }).withChild(container).build();
-  return {
-    ...composite,
-    events: {
-      load
-    }
-  };
-};
-export {
-  classRef,
-  createCardOverlayImage
-};
-//# sourceMappingURL=image.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"image.mjs","sources":["../../../../source/composite/card/overlay/image.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { truncateTextBasedOnSize } from '@universityofmaryland/web-utilities-library/string';\nimport { quote as iconQuote } from '@universityofmaryland/web-icons-library/brand';\nimport { actions, assets, textLockup } from 'atomic';\nimport { CardOverlayProps } from '../_types';\nimport { type UMDElement } 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: UMDElement[] = [];\n  const wrapperChildren: UMDElement[] = [];\n  const load = () => {\n    const sizeElements = () => {\n      const textCopy = text?.innerHTML;\n      if (text && textCopy) {\n        const modifiedText = 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\n    children.push(imageContainer);\n    imageContainerClass = imageContainer.element.className;\n  }\n\n  if (dateSign) {\n    wrapperChildren.push(\n      new ElementBuilder()\n        .styled(Styles.layout.background.box.white)\n        .withStyles({\n          element: {\n            alignSelf: `flex-start`,\n          },\n          siblingAfter: {\n            marginTop: `${token.spacing.min}`,\n          },\n        })\n        .withChild(dateSign)\n        .build(),\n    );\n  }\n\n  if (isQuote) {\n    const quoteWrapper = new ElementBuilder()\n      .withClassName('card-overlay-image-quote-wrapper')\n      .withStyles({\n        element: {\n          width: '41px',\n          height: '30px',\n          marginBottom: `${token.spacing.xs}`,\n\n          '& svg': {\n            fill: `${token.color.red}`,\n          },\n        },\n      })\n      .withHTML(iconQuote)\n      .build();\n\n    wrapperChildren.push(quoteWrapper);\n  }\n\n  wrapperChildren.push(\n    textLockup.smallScaling({\n      ...props,\n      isThemeDark: true,\n    }),\n  );\n\n  const textContent = new ElementBuilder()\n    .withClassName('card-overlay-image-text-content')\n    .withStyles({\n      element: {\n        maxWidth: `${token.spacing.maxWidth.smallest}`,\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n        zIndex: 9,\n        position: 'relative',\n\n        [' & * ']: {\n          color: `${token.color.white}`,\n        },\n      },\n    })\n    .withChildren(...wrapperChildren)\n    .build();\n\n  const textWrapper = new ElementBuilder()\n    .withClassName('card-overlay-image-text-wrapper')\n    .withStyles({\n      element: {\n        height: 'auto',\n        paddingRight: `${ctaIcon ? token.spacing['2xl'] : 0}`,\n      },\n    })\n    .withChild(textContent)\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('card-overlay-image-container')\n    .withStyles({\n      element: {\n        position: 'relative',\n        padding: `${token.spacing.lg} ${token.spacing.md}`,\n        paddingTop: `${token.spacing['4xl']}`,\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'flex-end',\n        minHeight: '360px',\n        height: '100%',\n        overflow: 'hidden',\n\n        ...createMediaQuery(\n          'min-width',\n          token.media.breakpointValues.medium.min,\n          {\n            paddingTop: `${token.spacing['8xl']}`,\n            minHeight: `424px`,\n          },\n        ),\n      },\n    })\n    .withChildren(...children, textWrapper)\n    .build();\n\n  const composite = new ElementBuilder()\n    .withClassName(classRef)\n    .withStyles({\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    .withChild(container)\n    .build();\n\n  return {\n    ...composite,\n    events: {\n      load,\n    },\n  };\n};\n"],"names":["actions.icon","imageContainer","assets.image.background","iconQuote","textLockup.smallScaling"],"mappings":"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"}

package/dist/composite/card/overlay/index.mjs

@@ -1,10 +0,0 @@
-import { default as default2 } from "./color.mjs";
-import { default as default3 } from "./icon.mjs";
-import { createCardOverlayImage, classRef } from "./image.mjs";
-export {
-  default2 as color,
-  default3 as icon,
-  createCardOverlayImage as image,
-  classRef as imageClassRef
-};
-//# sourceMappingURL=index.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

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

@@ -1,46 +0,0 @@
-import "@universityofmaryland/web-builder-library";
-import "@universityofmaryland/web-token-library";
-import "@universityofmaryland/web-styles-library/element";
-import "@universityofmaryland/web-styles-library/layout";
-import "@universityofmaryland/web-styles-library/animation";
-import "@universityofmaryland/web-styles-library/typography";
-import "@universityofmaryland/web-utilities-library/media";
-import "@universityofmaryland/web-utilities-library/dom";
-import "@universityofmaryland/web-icons-library/controls";
-import "@universityofmaryland/web-icons-library/communication";
-import "@universityofmaryland/web-icons-library/files";
-import "@universityofmaryland/web-icons-library/brand";
-import "@universityofmaryland/web-icons-library/arrows";
-import "../../../atomic/animations/actions/indicator.mjs";
-import "../../../atomic/animations/brand/chevron-scroll.mjs";
-import "../../../atomic/animations/brand/card-stack.mjs";
-import "@universityofmaryland/web-styles-library";
-import "@universityofmaryland/web-utilities-library/performance";
-import observedAutoPlay from "../../../atomic/assets/video/observed-auto-play.mjs";
-import "@universityofmaryland/web-icons-library/location";
-import "@universityofmaryland/web-icons-library/calendar";
-import "@universityofmaryland/web-utilities-library/theme";
-import "../../../atomic/layout/block/stacked.mjs";
-import "../../../atomic/layout/overlay/modal.mjs";
-import "../../../atomic/layout/person/columns.mjs";
-import "@universityofmaryland/web-icons-library/social";
-import "../../../atomic/text-lockup/date.mjs";
-import "../../../atomic/text-lockup/small.mjs";
-const block = (props) => (() => observedAutoPlay({
-  ...props,
-  additionalElementStyles: {
-    width: "100%",
-    aspectRatio: "1 / 1",
-    position: "relative",
-    overflow: "hidden",
-    [`& video`]: {
-      height: "100%",
-      width: "100%",
-      objectFit: "cover"
-    }
-  }
-}))();
-export {
-  block as default
-};
-//# sourceMappingURL=block.mjs.map

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

@@ -1 +0,0 @@
-{"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/card/video/index.mjs

@@ -1,7 +0,0 @@
-import { default as default2 } from "./block.mjs";
-import { default as default3 } from "./short.mjs";
-export {
-  default2 as block,
-  default3 as short
-};
-//# sourceMappingURL=index.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/composite/card/video/short.mjs

@@ -1,47 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-const short = (props) => {
-  const { video } = props;
-  const setPlay = () => {
-    if (video.paused) {
-      video.muted = true;
-      video.play();
-    }
-  };
-  const setPause = () => {
-    if (!video.paused) {
-      video.pause();
-    }
-  };
-  video.setAttribute("controls", "true");
-  video.setAttribute(
-    "controlsList",
-    'nodownload nofullscreen noremoteplayback noplaybackrate"'
-  );
-  video.setAttribute("preload", "metadata");
-  video.setAttribute("playsinline", "");
-  video.setAttribute("muted", "");
-  video.addEventListener("mouseover", setPlay);
-  video.addEventListener("focus", setPlay);
-  video.addEventListener("mouseleave", setPause);
-  video.addEventListener("blur", setPause);
-  const composite = new ElementBuilder().withClassName("card-video-short-container").withStyles({
-    element: {
-      height: "100%",
-      width: "100%",
-      aspectRatio: "9/16",
-      [`& video`]: {
-        height: "100%",
-        width: "100%",
-        objectFit: "cover",
-        ["&:hover"]: {
-          cursor: "pointer"
-        }
-      }
-    }
-  }).withChild(video).build();
-  return composite;
-};
-export {
-  short as default
-};
-//# sourceMappingURL=short.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"short.mjs","sources":["../../../../source/composite/card/video/short.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n}\n\nexport default (props: CardVideoShortProps) => {\n  const { video } = props;\n\n  const setPlay = () => {\n    if (video.paused) {\n      video.muted = true;\n      video.play();\n    }\n  };\n\n  const setPause = () => {\n    if (!video.paused) {\n      video.pause();\n    }\n  };\n\n  video.setAttribute('controls', 'true');\n  video.setAttribute(\n    'controlsList',\n    'nodownload nofullscreen noremoteplayback noplaybackrate\"',\n  );\n  video.setAttribute('preload', 'metadata');\n  video.setAttribute('playsinline', '');\n  video.setAttribute('muted', '');\n  video.addEventListener('mouseover', setPlay);\n  video.addEventListener('focus', setPlay);\n  video.addEventListener('mouseleave', setPause);\n  video.addEventListener('blur', setPause);\n\n  const composite = new ElementBuilder()\n    .withClassName('card-video-short-container')\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        aspectRatio: '9/16',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n\n          ['&:hover']: {\n            cursor: 'pointer',\n          },\n        },\n      },\n    })\n    .withChild(video)\n    .build();\n\n  return composite;\n};\n"],"names":[],"mappings":";AAMA,MAAA,QAAe,CAAC,UAA+B;AAC7C,QAAM,EAAE,UAAU;AAElB,QAAM,UAAU,MAAM;AACpB,QAAI,MAAM,QAAQ;AAChB,YAAM,QAAQ;AACd,YAAM,KAAA;AAAA,IACR;AAAA,EACF;AAEA,QAAM,WAAW,MAAM;AACrB,QAAI,CAAC,MAAM,QAAQ;AACjB,YAAM,MAAA;AAAA,IACR;AAAA,EACF;AAEA,QAAM,aAAa,YAAY,MAAM;AACrC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EAAA;AAEF,QAAM,aAAa,WAAW,UAAU;AACxC,QAAM,aAAa,eAAe,EAAE;AACpC,QAAM,aAAa,SAAS,EAAE;AAC9B,QAAM,iBAAiB,aAAa,OAAO;AAC3C,QAAM,iBAAiB,SAAS,OAAO;AACvC,QAAM,iBAAiB,cAAc,QAAQ;AAC7C,QAAM,iBAAiB,QAAQ,QAAQ;AAEvC,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,4BAA4B,EAC1C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,aAAa;AAAA,MAEb,CAAC,SAAS,GAAG;AAAA,QACX,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW;AAAA,QAEX,CAAC,SAAS,GAAG;AAAA,UACX,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IACF;AAAA,EACF,CACD,EACA,UAAU,KAAK,EACf,MAAA;AAEH,SAAO;AACT;"}

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

@@ -1,302 +0,0 @@
-import { token, typography, element, layout } from "@universityofmaryland/web-styles-library";
-import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
-import blocks from "../elements/blocks.mjs";
-import "../elements/full-screen.mjs";
-import "../elements/overlay.mjs";
-import "../elements/image.mjs";
-const MEDIUM = 768;
-const LARGE = 1024;
-const BACKGROUND_TEXTURE = `<svg aria-hidden="true" width="1599" height="618" viewBox="0 0 1599 618" fill="none" xmlns="http://www.w3.org/2000/svg"
-"><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>`;
-const ELEMENT_NAME = "umd-element-carousel-cards";
-const ELEMENT_DECLARATION = "carousel-cards-declaration";
-const CAROUSEL_CONTAINER = "element-carousel-container";
-const CAROUSEL_LOCK = "element-carousel-lock";
-const INTRO_CONTAINER = "carousel-cards-intro-container";
-const INTRO_CONTAINER_LOCK = "carousel-cards-intro-container-lock";
-const INTRO_CONTAINER_HEADLINE = "carousel-cards-intro-container-headline";
-const INTRO_CONTAINER_TEXT = "carousel-cards-intro-container-text";
-const INTRO_CONTAINER_CTA = "carousel-cards-intro-container-cta";
-const OVERWRITE_ANIMATION_CAROUSEL_DECLARATION = `.${CAROUSEL_CONTAINER} .${blocks.Elements.declaration}`;
-const OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${blocks.Elements.container}`;
-const OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${blocks.Elements.button}`;
-const OverwriteCarouselStyles = `
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    ${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {
-      padding-bottom: 60px;
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    ${OVERWRITE_ANIMATION_CAROUSEL_DECLARATION} {
-      width: 60%;
-    }
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {
-      bottom: 0;
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {
-      top: 50%;
-      transform: translateY(-50%);
-    }
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {
-      left: 49px;
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {
-      right: -52px;
-    }
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {
-      left: 0;
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {
-      left: -52px;
-    }
-  }
-`;
-const HeadlineStyles = `
-  ${jssToCSS({
-  styleObj: {
-    [`.${INTRO_CONTAINER_HEADLINE}`]: typography.sans.largest
-  }
-})}
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${INTRO_CONTAINER_HEADLINE} *`]: typography.sans.largest
-  }
-})}
-
-  .${INTRO_CONTAINER_HEADLINE},
-  .${INTRO_CONTAINER_HEADLINE} * {
-    color: ${token.color.white};
-    font-weight: 800;
-    text-transform: uppercase;
-  }
-`;
-const TextStyles = `
-  * + .${INTRO_CONTAINER_TEXT} {
-    margin-top: ${token.spacing.md};
-  }
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${INTRO_CONTAINER_TEXT}`]: element.text.rich.advancedDark
-  }
-})}
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${INTRO_CONTAINER_TEXT}`]: typography.sans.medium
-  }
-})}
-`;
-const ActionStyles = `
-  * + .${INTRO_CONTAINER_CTA} {
-    margin-top: ${token.spacing.md};
-  }
-
-  .${INTRO_CONTAINER_CTA} a {
-    color: ${token.color.white};
-  }
-`;
-const IntroContainer = `
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    .${INTRO_CONTAINER} {
-      margin-bottom: ${token.spacing.md};
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${INTRO_CONTAINER} {
-      width: calc(40% - ${token.spacing["2xl"]});
-      padding-right: ${token.spacing["2xl"]};
-    }
-  }
-
-  @media (min-width: ${LARGE}px) {
-    .${INTRO_CONTAINER} .${INTRO_CONTAINER_LOCK} {
-      max-width: inherit;
-      padding: 0;
-    }
-  }
-`;
-const ContainerLock = `
-  .${CAROUSEL_LOCK} {
-    position: relative;
-    ${jssToCSS({
-  styleObj: layout.space.horizontal.larger
-})}
-  }
-
-  @media (max-width: ${MEDIUM - 1}px) {
-    .${CAROUSEL_LOCK} {
-      padding-right: 0;
-    }
-  }
-
-  @media (min-width: ${LARGE}px) {
-    .${CAROUSEL_LOCK} {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-  }
-
-  @media umd-carousel-card (max-width: ${LARGE - 1}px) {
-    .${CAROUSEL_LOCK} {
-      max-width: inherit;
-      padding: 0;
-    }
-  }
-`;
-const ContainerStyles = `
-  @keyframes card-carousel-slide-in {
-    from { transform: translateX(-25vw); }
-    to { transform: translateX(0);}
-  }
-
-  .${CAROUSEL_CONTAINER} {
-    background-color: ${token.color.black};
-    padding: ${token.spacing["3xl"]} 0;
-    position: relative;
-    overflow: clip;
-  }
-
-  @container ${ELEMENT_NAME} (max-width: 300px) {
-    .${CAROUSEL_CONTAINER} {
-      display: none;
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {
-    .${CAROUSEL_CONTAINER} {
-      padding: ${token.spacing["4xl"]} 0;
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${CAROUSEL_CONTAINER} {
-      padding: ${token.spacing["max"]} 0;
-    }
-  }
-
-  .${CAROUSEL_CONTAINER} > svg {
-    width: auto;
-    height: 100%;
-    object-fit: cover;
-    position: absolute;
-    top: 0;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-      .${CAROUSEL_CONTAINER} > svg {
-        animation: card-carousel-slide-in ease-in-out forwards;
-        animation-timeline: view();
-        animation-range-start: 0;
-        animation-range-end: 100vh;
-        transform: translateX(-15vw);
-      }
-    }
-  }
-`;
-const STYLES_CAROUSEL_CARDS_ELEMENT = `
-  .${ELEMENT_DECLARATION} {
-    container: ${ELEMENT_NAME} / inline-size;
-  }
-
-  .${ELEMENT_DECLARATION} * {
-    color: ${token.color.white};
-  }
-  
-  ${blocks.Styles}
-  ${ContainerStyles}
-  ${ContainerLock}
-  ${HeadlineStyles}
-  ${TextStyles}
-  ${ActionStyles}
-  ${IntroContainer}
-  ${OverwriteCarouselStyles}
-`;
-const CreateIntro = (props) => {
-  const { headline, text, actions } = props;
-  const introContainer = document.createElement("div");
-  const introWrapper = document.createElement("div");
-  introWrapper.classList.add(INTRO_CONTAINER_LOCK);
-  if (headline) {
-    headline.classList.add(INTRO_CONTAINER_HEADLINE);
-    introWrapper.appendChild(headline);
-  }
-  if (text) {
-    text.classList.add(INTRO_CONTAINER_TEXT);
-    introWrapper.appendChild(text);
-  }
-  if (actions) {
-    actions.classList.add(INTRO_CONTAINER_CTA);
-    introWrapper.appendChild(actions);
-  }
-  introContainer.classList.add(INTRO_CONTAINER);
-  introContainer.appendChild(introWrapper);
-  return introContainer;
-};
-const index = (props) => (() => {
-  const { slide, shadowRef } = props;
-  const declaration = document.createElement("div");
-  const container = document.createElement("div");
-  const wrapper = document.createElement("div");
-  if (slide) slide.style.minHeight = "450px";
-  if (shadowRef) shadowRef.style.minHeight = "450px";
-  const carouselContainer = blocks.CreateElement({
-    ...props,
-    blocks: props.cards,
-    overwriteDisplayLogic: {
-      mobileBreakpoint: 650,
-      tabletBreakpoint: 1024,
-      desktopBreakpoint: 1024,
-      mobileCount: 1,
-      tabletCount: 2,
-      desktopCount: 2,
-      maxCount: 2,
-      showMobileHint: true,
-      showHint: false
-    }
-  });
-  const introContainer = CreateIntro(props);
-  wrapper.classList.add(CAROUSEL_LOCK);
-  wrapper.appendChild(introContainer);
-  wrapper.appendChild(carouselContainer.element);
-  container.classList.add(CAROUSEL_CONTAINER);
-  container.innerHTML = BACKGROUND_TEXTURE;
-  container.appendChild(wrapper);
-  declaration.classList.add(ELEMENT_DECLARATION);
-  declaration.appendChild(container);
-  return {
-    element: declaration,
-    styles: STYLES_CAROUSEL_CARDS_ELEMENT,
-    events: {
-      resize: carouselContainer.events.resize,
-      load: carouselContainer.events.load
-    }
-  };
-})();
-export {
-  index as default
-};
-//# sourceMappingURL=index.mjs.map