@universityofmaryland/web-elements-library 1.6.17 → 1.7.0

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

@@ -1,300 +1,181 @@
-import { token, typography, element, layout } from "@universityofmaryland/web-styles-library";
-import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
-import { createCompositeCarouselBlocks } from "../elements/blocks.js";
-import "../elements/full-screen.js";
-import "../elements/overlay.js";
-import "../elements/image.js";
-const MEDIUM = 768;
-const LARGE = 1024;
+import { token, layout, typography, element } from "@universityofmaryland/web-styles-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { withViewTimelineAnimation } from "@universityofmaryland/web-utilities-library/styles";
+import { createCompositeCarouselBlocks } from "../elements/equal-width-items.js";
+import { buttonColorsOnBlack } from "../elements/nav-button.js";
+import "@universityofmaryland/web-token-library";
+import "@universityofmaryland/web-icons-library/controls";
+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/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
+import "@universityofmaryland/web-icons-library/arrows";
+import "@universityofmaryland/web-utilities-library/performance";
+import "../../../atomic/animations/brand/card-stack.js";
+import "@universityofmaryland/web-utilities-library/accessibility";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
+import "@universityofmaryland/web-utilities-library/theme";
+import "../../../atomic/layout/block/stacked.js";
+import "../../../atomic/layout/person/columns.js";
+import "@universityofmaryland/web-icons-library/social";
+import "@universityofmaryland/web-utilities-library/string";
+import "@universityofmaryland/web-utilities-library/animation";
+import "../../../atomic/text-lockup/small.js";
+import "@universityofmaryland/web-utilities-library/events";
 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} .${createCompositeCarouselBlocks.Elements.declaration}`;
-const OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${createCompositeCarouselBlocks.Elements.container}`;
-const OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${createCompositeCarouselBlocks.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 {
+const ANIMATION_NAME = "card-carousel-slide-in";
+const KEYFRAMES = `
+  @keyframes ${ANIMATION_NAME} {
     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};
+    to { transform: translateX(0); }
   }
-  
-  ${createCompositeCarouselBlocks.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 createHeadline = () => {
+    if (!headline) return null;
+    return new ElementBuilder(headline).withClassName("carousel-cards-intro-container-headline").styled(typography.sans.largest).withStyles({
+      element: {
+        color: token.color.white,
+        fontWeight: token.font.weight.extraBold,
+        textTransform: "uppercase",
+        "& *": {
+          color: token.color.white,
+          fontWeight: token.font.weight.extraBold,
+          textTransform: "uppercase"
+        }
+      }
+    });
+  };
+  const createText = () => {
+    if (!text) return null;
+    return new ElementBuilder(text).withClassName("carousel-cards-intro-container-text").styled(element.text.rich.advancedDark).styled(typography.sans.medium).withStyles({
+      element: {
+        "* + &": { marginTop: token.spacing.md }
+      }
+    });
+  };
+  const createActions = () => {
+    if (!actions) return null;
+    return new ElementBuilder(actions).withClassName("carousel-cards-intro-container-cta").withStyles({
+      element: {
+        "* + &": { marginTop: token.spacing.md },
+        "& a": { color: token.color.white }
+      }
+    });
+  };
+  const wrapperChildren = [createHeadline(), createText(), createActions()].filter((child) => child !== null);
+  const wrapperModel = new ElementBuilder().withClassName("carousel-cards-intro-container-lock").withStyles({
+    element: {
+      [`@media (${token.media.queries.desktop.min})`]: {
+        maxWidth: "inherit",
+        padding: 0
+      }
+    }
+  }).withChildren(...wrapperChildren).build();
+  return new ElementBuilder().withClassName("carousel-cards-intro-container").withStyles({
+    element: {
+      marginBottom: token.spacing.md,
+      [`@container (${token.media.queries.desktop.min})`]: {
+        width: `calc(40% - ${token.spacing["2xl"]})`,
+        paddingRight: token.spacing["2xl"],
+        marginBottom: 0
+      }
+    }
+  }).withChild(wrapperModel).build();
 };
 const createCompositeCarouselCards = (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 = "360px";
-  if (shadowRef) shadowRef.style.minHeight = "360px";
+  if (slide) {
+    slide.style.minHeight = "360px";
+  }
+  if (shadowRef) {
+    shadowRef.style.minHeight = "360px";
+  }
   const carouselContainer = createCompositeCarouselBlocks.CreateElement({
-    ...props,
+    slide: props.slide,
+    shadowRef: props.shadowRef,
     blocks: props.cards,
-    overwriteDisplayLogic: {
-      mobileBreakpoint: 650,
-      tabletBreakpoint: 1024,
-      desktopBreakpoint: 1024,
-      mobileCount: 1,
-      tabletCount: 2,
-      desktopCount: 2,
-      maxCount: 2,
-      showMobileHint: true,
-      showHint: false
+    mobileBreakpoint: token.media.breakpointValues.large.min,
+    tabletBreakpoint: token.media.breakpointValues.desktop.min,
+    desktopBreakpoint: token.media.breakpointValues.desktop.min,
+    mobileCount: 1,
+    tabletCount: 2,
+    desktopCount: 2,
+    maxCount: 2,
+    showMobileHint: true,
+    showHint: false,
+    button: {
+      ...buttonColorsOnBlack(),
+      outsetOffset: "52px"
     }
   });
-  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
+  const carouselWrapperModel = new ElementBuilder().withClassName("carousel-cards-block-wrapper").withStyles({
+    element: {
+      [`@container (${token.media.queries.desktop.min})`]: {
+        width: "60%"
+      }
     }
-  };
+  }).withChild(carouselContainer).build();
+  const introModel = CreateIntro(props);
+  const wrapperModel = new ElementBuilder().withClassName("element-carousel-lock").styled(layout.space.horizontal.larger).withStyles({
+    element: {
+      position: "relative",
+      paddingRight: 0,
+      [`@media (${token.media.queries.tablet.min})`]: { paddingRight: token.spacing["2xl"] },
+      [`@media (${token.media.queries.highDef.min})`]: { paddingRight: token.spacing["4xl"] },
+      [`@media (${token.media.queries.desktop.min})`]: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center"
+      }
+    }
+  }).withChildren(introModel, carouselWrapperModel).build();
+  const containerModel = new ElementBuilder().withClassName("element-carousel-container").withStyles({
+    element: {
+      backgroundColor: token.color.black,
+      padding: `${token.spacing["3xl"]} 0`,
+      position: "relative",
+      overflow: "clip",
+      "& > svg": {
+        width: "auto",
+        height: "100%",
+        objectFit: "cover",
+        position: "absolute",
+        top: 0,
+        ...withViewTimelineAnimation({
+          animation: `${ANIMATION_NAME} ease-in-out forwards`,
+          animationTimeline: "view()",
+          animationRangeStart: "0",
+          animationRangeEnd: "100vh",
+          transform: "translateX(-15vw)"
+        })
+      },
+      "@container (max-width: 300px)": { display: "none" },
+      [`@container (${token.media.queries.tablet.min})`]: { padding: `${token.spacing["4xl"]} 0` },
+      [`@container (${token.media.queries.desktop.min})`]: { padding: `${token.spacing["max"]} 0` }
+    }
+  }).withChild(wrapperModel).withModifier((element2) => {
+    element2.insertAdjacentHTML("afterbegin", BACKGROUND_TEXTURE);
+  }).build();
+  containerModel.styles += KEYFRAMES;
+  const declarationModel = new ElementBuilder().withClassName("carousel-cards-declaration").withStyles({
+    element: {
+      containerType: "inline-size",
+      "& *": { color: token.color.white }
+    }
+  }).withChild(containerModel).withEvents({
+    resize: carouselContainer.events.resize,
+    load: carouselContainer.events.load
+  }).build();
+  return declarationModel;
 })();
 export {
   createCompositeCarouselCards

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 { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\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  ${jssToCSS({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE}`]: typography.sans.largest,\n    },\n  })}\n\n  ${jssToCSS({\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  ${jssToCSS({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: element.text.rich.advancedDark,\n    },\n  })}\n\n  ${jssToCSS({\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    ${jssToCSS({\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 const createCompositeCarouselCards = (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 = '360px';\n    if (shadowRef) shadowRef.style.minHeight = '360px';\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"],"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 { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\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 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 ANIMATION_NAME = 'card-carousel-slide-in';\n\nconst KEYFRAMES = `\n  @keyframes ${ANIMATION_NAME} {\n    from { transform: translateX(-25vw); }\n    to { transform: translateX(0); }\n  }\n`;\n\nconst CreateIntro = (props: TypeCarouselCardsRequirements) => {\n  const { headline, text, actions } = props;\n\n  const createHeadline = () => {\n    if (!headline) return null;\n    return new ElementBuilder(headline)\n      .withClassName('carousel-cards-intro-container-headline')\n      .styled(typography.sans.largest)\n      .withStyles({\n        element: {\n          color: token.color.white,\n          fontWeight: token.font.weight.extraBold,\n          textTransform: 'uppercase',\n          '& *': {\n            color: token.color.white,\n            fontWeight: token.font.weight.extraBold,\n            textTransform: 'uppercase',\n          },\n        },\n      });\n  };\n\n  const createText = () => {\n    if (!text) return null;\n    return new ElementBuilder(text)\n      .withClassName('carousel-cards-intro-container-text')\n      .styled(element.text.rich.advancedDark)\n      .styled(typography.sans.medium)\n      .withStyles({\n        element: {\n          '* + &': { marginTop: token.spacing.md },\n        },\n      });\n  };\n\n  const createActions = () => {\n    if (!actions) return null;\n\n    return new ElementBuilder(actions)\n      .withClassName('carousel-cards-intro-container-cta')\n      .withStyles({\n        element: {\n          '* + &': { marginTop: token.spacing.md },\n          '& a': { color: token.color.white },\n        },\n      });\n  };\n\n  const wrapperChildren = [createHeadline(), createText(), createActions()].filter((child) => child !== null);\n\n  const wrapperModel = new ElementBuilder()\n    .withClassName('carousel-cards-intro-container-lock')\n    .withStyles({\n      element: {\n        [`@media (${token.media.queries.desktop.min})`]: {\n          maxWidth: 'inherit',\n          padding: 0,\n        },\n      },\n    })\n    .withChildren(...wrapperChildren)\n    .build();\n\n\n  return new ElementBuilder()\n    .withClassName('carousel-cards-intro-container')\n    .withStyles({\n      element: {\n        marginBottom: token.spacing.md,\n        [`@container (${token.media.queries.desktop.min})`]: {\n          width: `calc(40% - ${token.spacing['2xl']})`,\n          paddingRight: token.spacing['2xl'],\n          marginBottom: 0,\n        },\n      },\n    })\n    .withChild(wrapperModel)\n    .build();\n};\n\nexport const createCompositeCarouselCards = (props: TypeCarouselCardsRequirements) =>\n  (() => {\n    const { slide, shadowRef } = props;\n\n    if (slide) {\n      slide.style.minHeight = '360px';\n    }\n    if (shadowRef) {\n      shadowRef.style.minHeight = '360px';\n    }\n\n    const carouselContainer = carouselElements.blocks.CreateElement({\n      slide: props.slide,\n      shadowRef: props.shadowRef,\n      blocks: props.cards,\n      mobileBreakpoint: token.media.breakpointValues.large.min,\n      tabletBreakpoint: token.media.breakpointValues.desktop.min,\n      desktopBreakpoint: token.media.breakpointValues.desktop.min,\n      mobileCount: 1,\n      tabletCount: 2,\n      desktopCount: 2,\n      maxCount: 2,\n      showMobileHint: true,\n      showHint: false,\n      button: {\n        ...carouselElements.buttonColorsOnBlack(),\n        outsetOffset: '52px',\n      },\n    });\n\n    const carouselWrapperModel = new ElementBuilder()\n      .withClassName('carousel-cards-block-wrapper')\n      .withStyles({\n        element: {\n          [`@container (${token.media.queries.desktop.min})`]: {\n            width: '60%',\n          },\n        },\n      })\n      .withChild(carouselContainer)\n      .build();\n\n    const introModel = CreateIntro(props);\n\n    const wrapperModel = new ElementBuilder()\n      .withClassName('element-carousel-lock')\n      .styled(layout.space.horizontal.larger)\n      .withStyles({\n        element: {\n          position: 'relative',\n          paddingRight: 0,\n          [`@media (${token.media.queries.tablet.min})`]: { paddingRight: token.spacing['2xl'] },\n          [`@media (${token.media.queries.highDef.min})`]: { paddingRight: token.spacing['4xl'] },\n          [`@media (${token.media.queries.desktop.min})`]: {\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n          },\n        },\n      })\n      .withChildren(introModel, carouselWrapperModel)\n      .build();\n\n    const containerModel = new ElementBuilder()\n      .withClassName('element-carousel-container')\n      .withStyles({\n        element: {\n          backgroundColor: token.color.black,\n          padding: `${token.spacing['3xl']} 0`,\n          position: 'relative',\n          overflow: 'clip',\n          '& > svg': {\n            width: 'auto',\n            height: '100%',\n            objectFit: 'cover',\n            position: 'absolute',\n            top: 0,\n            ...withViewTimelineAnimation({\n              animation: `${ANIMATION_NAME} ease-in-out forwards`,\n              animationTimeline: 'view()',\n              animationRangeStart: '0',\n              animationRangeEnd: '100vh',\n              transform: 'translateX(-15vw)',\n            }),\n          },\n          '@container (max-width: 300px)': { display: 'none' },\n          [`@container (${token.media.queries.tablet.min})`]: { padding: `${token.spacing['4xl']} 0` },\n          [`@container (${token.media.queries.desktop.min})`]: { padding: `${token.spacing['max']} 0` },\n        },\n      })\n      .withChild(wrapperModel)\n      .withModifier((element) => {\n        element.insertAdjacentHTML('afterbegin', BACKGROUND_TEXTURE);\n      })\n      .build();\n\n    containerModel.styles += KEYFRAMES;\n\n    const declarationModel = new ElementBuilder()\n      .withClassName('carousel-cards-declaration')\n      .withStyles({\n        element: {\n          containerType: 'inline-size',\n          '& *': { color: token.color.white },\n        },\n      })\n      .withChild(containerModel)\n      .withEvents({\n        resize: carouselContainer.events.resize,\n        load: carouselContainer.events.load,\n      })\n      .build();\n\n    return declarationModel;\n  })();\n"],"names":["carouselElements.blocks","carouselElements.buttonColorsOnBlack","element"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+import { TypeButtonConfig } from '../elements/equal-width-items';
 type TypeCarouselRequirements = {
     slide: HTMLElement;
     shadowRef?: HTMLElement;
@@ -8,21 +9,14 @@ type TypeCarouselRequirements = {
     hasRightButton?: boolean;
     mobileHint?: boolean;
     hint?: boolean;
-    mobileSize?: number | null;
-    tabletSize?: number | null;
-    desktopSize?: number | null;
-    mobileCount?: number | null;
-    tabletCount?: number | null;
-    desktopCount?: number | null;
-    maxCount?: number | null;
-};
-export declare const createCompositeCarouselDefault: (props: TypeCarouselRequirements) => {
-    element: HTMLDivElement;
-    styles: string;
-    events: {
-        resize: () => void;
-        load: () => void;
-    };
+    tabletSize?: number;
+    desktopSize?: number;
+    mobileCount?: number;
+    tabletCount?: number;
+    desktopCount?: number;
+    maxCount?: number;
+    button?: TypeButtonConfig;
 };
+export declare const createCompositeCarouselDefault: (props: TypeCarouselRequirements) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/default/index.ts"],"names":[],"mappings":"AAGA,KAAK,wBAAwB,GAAG;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,CAAC;AAuGF,eAAO,MAAM,8BAA8B,GAAI,OAAO,wBAAwB;;;;;;;CA+DxE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/default/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,KAAK,wBAAwB,GAAG;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,8BAA8B,GAAI,OAAO,wBAAwB,kFAkFxE,CAAC"}