@universityofmaryland/web-elements-library 1.6.16 → 1.7.0

package/dist/composite/carousel/elements/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as carouselElements from '../elements';\nimport { Image as LayoutImage } from 'layout';\n\nconst ELEMENT_CAROUSEL_OVERLAY_COINTAINER = 'carousel-overlay-container';\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n  .${ELEMENT_CAROUSEL_OVERLAY_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_COINTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_OVERLAY_ELEMENT = `\n  ${LayoutImage.Styles}\n  ${OverlayImageContainerStyles}\n`;\n\nconst CreateOverlaySlide = ({ images }: { images: HTMLImageElement[] }) =>\n  images.map((image) => {\n    const slide = document.createElement('div');\n    const imageContainer = document.createElement('div');\n    const imageBlock = LayoutImage.CreateElement({\n      image,\n      showCaption: true,\n    });\n\n    imageContainer.classList.add(ELEMENT_CAROUSEL_OVERLAY_COINTAINER);\n    imageContainer.appendChild(imageBlock);\n\n    slide.appendChild(imageContainer);\n\n    return slide;\n  });\n\nexport const createCompositeCarouselOverlay = ({ images }: { images: HTMLImageElement[] }) =>\n  (() => {\n    let styles = STYLES_CAROUSEL_OVERLAY_ELEMENT;\n\n    const setFullScreen = (index: number) => {\n      let canMove = true;\n\n      const checkKeyEvents = (event: KeyboardEvent) => {\n        if (!canMove) return;\n        canMove = false;\n        if (event.key == 'ArrowLeft') overlayCarousel.events.EventSlideLeft();\n        if (event.key == 'ArrowRight') overlayCarousel.events.EventSlideRight();\n\n        setTimeout(() => {\n          canMove = true;\n        }, 700);\n      };\n\n      overlayCarousel.events.EventMoveTo(index);\n      setTimeout(() => fixedFullScreen.events.show(), 100);\n\n      setTimeout(() => {\n        overlayCarousel.events.EventResize();\n      }, 100);\n\n      isFullScreenEvents = window.addEventListener('keyup', checkKeyEvents);\n    };\n\n    const overlaySlides = CreateOverlaySlide({ images });\n\n    const overlayCarousel = carouselElements.image({\n      slides: overlaySlides,\n      maxHeight: (window.innerHeight / 10) * 8,\n    });\n\n    styles += overlayCarousel.styles;\n\n    const fixedFullScreen = carouselElements.fullScreen({\n      content: overlayCarousel.element,\n      callback: () => {\n        if (isFullScreenEvents)\n          window.removeEventListener('keyup', isFullScreenEvents);\n      },\n    });\n\n    styles += fixedFullScreen.styles;\n\n    let isFullScreenEvents: any = null;\n\n    return {\n      element: fixedFullScreen.element,\n      styles,\n      events: {\n        setFullScreen,\n      },\n    };\n  })();\n"],"names":["LayoutImage","carouselElements.image","carouselElements.fullScreen"],"mappings":";;;;;;;AAIA,MAAM,sCAAsC;AAG5C,MAAM,8BAA8B;AAAA,KAC/B,mCAAmC;AAAA;AAAA;AAAA;AAAA,wBAIhB,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,KAGxC,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,kCAAkC;AAAA,IACpCA,YAAY,MAAM;AAAA,IAClB,2BAA2B;AAAA;AAG/B,MAAM,qBAAqB,CAAC,EAAE,OAAA,MAC5B,OAAO,IAAI,CAAC,UAAU;AACpB,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,aAAaA,YAAY,cAAc;AAAA,IAC3C;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,iBAAe,UAAU,IAAI,mCAAmC;AAChE,iBAAe,YAAY,UAAU;AAErC,QAAM,YAAY,cAAc;AAEhC,SAAO;AACT,CAAC;AAEI,MAAM,iCAAiC,CAAC,EAAE,OAAA,OAC9C,MAAM;AACL,MAAI,SAAS;AAEb,QAAM,gBAAgB,CAAC,UAAkB;AACvC,QAAI,UAAU;AAEd,UAAM,iBAAiB,CAAC,UAAyB;AAC/C,UAAI,CAAC,QAAS;AACd,gBAAU;AACV,UAAI,MAAM,OAAO,YAAa,iBAAgB,OAAO,eAAA;AACrD,UAAI,MAAM,OAAO,aAAc,iBAAgB,OAAO,gBAAA;AAEtD,iBAAW,MAAM;AACf,kBAAU;AAAA,MACZ,GAAG,GAAG;AAAA,IACR;AAEA,oBAAgB,OAAO,YAAY,KAAK;AACxC,eAAW,MAAM,gBAAgB,OAAO,KAAA,GAAQ,GAAG;AAEnD,eAAW,MAAM;AACf,sBAAgB,OAAO,YAAA;AAAA,IACzB,GAAG,GAAG;AAEN,yBAAqB,OAAO,iBAAiB,SAAS,cAAc;AAAA,EACtE;AAEA,QAAM,gBAAgB,mBAAmB,EAAE,QAAQ;AAEnD,QAAM,kBAAkBC,6BAAuB;AAAA,IAC7C,QAAQ;AAAA,IACR,WAAY,OAAO,cAAc,KAAM;AAAA,EAAA,CACxC;AAED,YAAU,gBAAgB;AAE1B,QAAM,kBAAkBC,kCAA4B;AAAA,IAClD,SAAS,gBAAgB;AAAA,IACzB,UAAU,MAAM;AACd,UAAI;AACF,eAAO,oBAAoB,SAAS,kBAAkB;AAAA,IAC1D;AAAA,EAAA,CACD;AAED,YAAU,gBAAgB;AAE1B,MAAI,qBAA0B;AAE9B,SAAO;AAAA,IACL,SAAS,gBAAgB;AAAA,IACzB;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;"}
+{"version":3,"file":"overlay.js","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { combineStyles } from '@universityofmaryland/web-utilities-library/styles';\nimport * as carouselElements from '../elements';\nimport { createLayoutImageContainer } from 'layout';\n\nconst CreateOverlaySlide = ({\n  images,\n  isToggleCaption,\n}: {\n  images: HTMLImageElement[];\n  isToggleCaption: boolean;\n}) =>\n  images.map((image) => {\n    const imageBlock = createLayoutImageContainer({ image, showCaption: true, isToggleCaption });\n\n    const imageContainerModel = new ElementBuilder()\n      .withClassName('carousel-overlay-container')\n      .withStyles({\n        element: {\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          backgroundColor: token.color.gray.dark,\n\n          '& > *': {\n            width: '100%',\n            height: '100%',\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n          },\n\n          '& img': {\n            objectFit: 'contain',\n            maxHeight: '100%',\n            maxWidth: '100%',\n          },\n        },\n      })\n      .withChild(imageBlock)\n      .build();\n\n    return imageContainerModel;\n  });\n\nexport const createCompositeCarouselOverlay = ({\n  images,\n  isToggleCaption = true,\n}: {\n  images: HTMLImageElement[];\n  isToggleCaption?: boolean;\n}) =>\n  (() => {\n    let isFullScreenEvents: any = null;\n\n    const setFullScreen = (index: number) => {\n      let canMove = true;\n\n      overlayCarousel.events.EventMoveTo(index);\n\n      setTimeout(() => fixedFullScreen.events.show(), 100);\n\n      setTimeout(() => {\n        overlayCarousel.events.EventResize();\n      }, 100);\n\n      isFullScreenEvents = window.addEventListener(\n        'keyup',\n        (event: KeyboardEvent) => {\n          if (!canMove) return;\n\n          canMove = false;\n          if (event.key === 'ArrowLeft') {\n            overlayCarousel.events.EventSlideLeft();\n          } else if (event.key === 'ArrowRight') {\n            overlayCarousel.events.EventSlideRight();\n          }\n\n          setTimeout(() => {\n            canMove = true;\n          }, 700);\n        },\n      );\n    };\n\n    const overlaySlideModels = CreateOverlaySlide({ images, isToggleCaption });\n    const overlaySlides = overlaySlideModels.map((model) => model.element);\n    const firstSlide = overlaySlideModels[0];\n    const slideStyles = firstSlide ? firstSlide.styles : '';\n\n    const overlayCarousel = carouselElements.image({\n      slides: overlaySlides,\n      maxHeight: (window.innerHeight / 10) * 8,\n    });\n\n    const fixedFullScreen = carouselElements.fullScreen({\n      content: overlayCarousel.element,\n      callback: () => {\n        if (isFullScreenEvents) {\n          window.removeEventListener('keyup', isFullScreenEvents);\n        }\n      },\n    });\n\n    return {\n      element: fixedFullScreen.element,\n      styles: combineStyles(\n        slideStyles,\n        overlayCarousel.styles,\n        fixedFullScreen.styles,\n      ),\n      events: {\n        setFullScreen,\n      },\n    };\n  })();\n"],"names":["carouselElements.image","carouselElements.fullScreen"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AACF,MAIE,OAAO,IAAI,CAAC,UAAU;AACpB,QAAM,aAAa,2BAA2B,EAAE,OAAO,aAAa,MAAM,iBAAiB;AAE3F,QAAM,sBAAsB,IAAI,eAAA,EAC7B,cAAc,4BAA4B,EAC1C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,iBAAiB,MAAM,MAAM,KAAK;AAAA,MAElC,SAAS;AAAA,QACP,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,MAAA;AAAA,MAGd,SAAS;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD,EACA,UAAU,UAAU,EACpB,MAAA;AAEH,SAAO;AACT,CAAC;AAEI,MAAM,iCAAiC,CAAC;AAAA,EAC7C;AAAA,EACA,kBAAkB;AACpB,OAIG,MAAM;AAGL,QAAM,gBAAgB,CAAC,UAAkB;AACvC,QAAI,UAAU;AAEd,oBAAgB,OAAO,YAAY,KAAK;AAExC,eAAW,MAAM,gBAAgB,OAAO,KAAA,GAAQ,GAAG;AAEnD,eAAW,MAAM;AACf,sBAAgB,OAAO,YAAA;AAAA,IACzB,GAAG,GAAG;AAEe,WAAO;AAAA,MAC1B;AAAA,MACA,CAAC,UAAyB;AACxB,YAAI,CAAC,QAAS;AAEd,kBAAU;AACV,YAAI,MAAM,QAAQ,aAAa;AAC7B,0BAAgB,OAAO,eAAA;AAAA,QACzB,WAAW,MAAM,QAAQ,cAAc;AACrC,0BAAgB,OAAO,gBAAA;AAAA,QACzB;AAEA,mBAAW,MAAM;AACf,oBAAU;AAAA,QACZ,GAAG,GAAG;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,qBAAqB,mBAAmB,EAAE,QAAQ,iBAAiB;AACzE,QAAM,gBAAgB,mBAAmB,IAAI,CAAC,UAAU,MAAM,OAAO;AACrE,QAAM,aAAa,mBAAmB,CAAC;AACvC,QAAM,cAAc,aAAa,WAAW,SAAS;AAErD,QAAM,kBAAkBA,6BAAuB;AAAA,IAC7C,QAAQ;AAAA,IACR,WAAY,OAAO,cAAc,KAAM;AAAA,EAAA,CACxC;AAED,QAAM,kBAAkBC,kCAA4B;AAAA,IAClD,SAAS,gBAAgB;AAAA,EAM3B,CAAC;AAED,SAAO;AAAA,IACL,SAAS,gBAAgB;AAAA,IACzB,QAAQ;AAAA,MACN;AAAA,MACA,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,IAAA;AAAA,IAElB,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;"}

package/dist/composite/carousel/image/multiple.d.ts

@@ -2,13 +2,8 @@ type TypeCarouselMultipleProps = {
     images: HTMLImageElement[];
     isThemeDark?: boolean;
     isFullScreenOption?: boolean;
+    isToggleCaption?: boolean;
 };
-export declare const createCompositeCarouselImageMultiple: (props: TypeCarouselMultipleProps) => {
-    styles: string;
-    events: {
-        SetEventReize: () => void;
-    };
-    element: HTMLDivElement;
-};
+export declare const createCompositeCarouselImageMultiple: (props: TypeCarouselMultipleProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 export {};
 //# sourceMappingURL=multiple.d.ts.map

package/dist/composite/carousel/image/multiple.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiple.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/image/multiple.ts"],"names":[],"mappings":"AAMA,KAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AA2GF,eAAO,MAAM,oCAAoC,GAAI,OAAO,yBAAyB;;;;;;CA8F/E,CAAC"}
+{"version":3,"file":"multiple.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/image/multiple.ts"],"names":[],"mappings":"AAOA,KAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAIF,eAAO,MAAM,oCAAoC,GAAI,OAAO,yBAAyB,kFA8H/E,CAAC"}

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

@@ -1,22 +1,20 @@
 import * as token from "@universityofmaryland/web-token-library";
-import * as elementStyles from "@universityofmaryland/web-styles-library/element";
-import { createCompositeCarouselBlocks } from "../elements/blocks.js";
-import "../elements/full-screen.js";
-import { createCompositeCarouselOverlay } from "../elements/overlay.js";
-import "../elements/image.js";
-import "@universityofmaryland/web-builder-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { combineStyles } from "@universityofmaryland/web-utilities-library/styles";
+import { createCompositeCarouselBlocks } from "../elements/equal-width-items.js";
+import { buttonColorsOnWhite } from "../elements/nav-button.js";
+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/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 "@universityofmaryland/web-utilities-library/performance";
-import "../../../atomic/animations/brand/chevron-scroll.js";
 import "../../../atomic/animations/brand/card-stack.js";
 import "@universityofmaryland/web-styles-library";
 import "@universityofmaryland/web-utilities-library/accessibility";
@@ -25,174 +23,111 @@ 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/overlay/modal.js";
 import "../../../atomic/layout/person/columns.js";
 import "@universityofmaryland/web-icons-library/social";
-import "../../../atomic/text-lockup/date.js";
+import "@universityofmaryland/web-utilities-library/string";
+import "@universityofmaryland/web-utilities-library/animation";
 import "../../../atomic/text-lockup/small.js";
-import { layoutImage } from "../../../layout/image.js";
-const fullScreenClassName = elementStyles.action.button.fullScreen.className;
-const ATTRIBUTE_THEME = "data-theme";
-const THEME_DARK = "dark";
-const IS_THEME_DARK = `[${ATTRIBUTE_THEME}="${THEME_DARK}"]`;
-const ELEMENT_NAME = "umd-carousel-image-standard";
-const ELEMENT_CAROUSEL_MULTIPLE_DECLARATION = "carousel-image-multiple-declaration";
-const ELEMENT_CAROUSEL_MULTIPLE_CONTAINER = "carousel-image-multiple-container";
-const ELEMENT_CAROUSEL_SLIDER_BUTTON = "carousel-multiple-button";
-const OVERWRITE_LAYOUT_IMAGE = `.${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} .${layoutImage.Elements.container}`;
-const OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} .${createCompositeCarouselBlocks.Elements.button}`;
-const OVERWRITE_FULL_SCREEN_BUTTON = `.${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} .${fullScreenClassName}`;
-const OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CAROUSEL_MULTIPLE_CONTAINER}${IS_THEME_DARK}`;
-const OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_CAROUSEL_MULTIPLE_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_SLIDER_BUTTON}`;
-const OverwriteThemeDark = `
-  ${OVERWRITE_THEME_DARK_CONTAINER} {
-    background-color: ${token.color.black};
-  }
-
-  ${OVERWRITE_THEME_DARK_BUTTON} {
-    background-color: ${token.color.black};
-  }
-
-  ${OVERWRITE_THEME_DARK_BUTTON} > svg {
-    fill: ${token.color.white};
-  }
-`;
-const OverwriteFullScreenOption = `
-  ${OVERWRITE_FULL_SCREEN_BUTTON} {
-    visibility: hidden;
-    opacity: 0;
-    transition: visibility 0s, opacity 0.5s linear;
-  }
-
-  ${OVERWRITE_FULL_SCREEN_BUTTON}:focus {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  ${OVERWRITE_LAYOUT_IMAGE}:focus-within .${fullScreenClassName},
-  ${OVERWRITE_LAYOUT_IMAGE}:hover .${fullScreenClassName} {
-    visibility: visible;
-    opacity: 1;
-  }
-`;
-const OverwriteImageStyles = `
-  ${OVERWRITE_LAYOUT_IMAGE} img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-`;
-const OverwriteCarouselStyles = `
-  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: ${token.color.white};
-  }
-
-  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} svg {
-    fill: ${token.color.black};
-  };
-
-  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {
-    left: 0;
-  }
-
-  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {
-    right: 0;
-  }
-`;
-const STYLES_CAROUSEL_IMAGE_MULTIPLE_ELEMENT = `
-  .${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} {
-    container: ${ELEMENT_NAME} / inline-size;
-  }
-
-  .${ELEMENT_CAROUSEL_MULTIPLE_CONTAINER} {
-    overflow: hidden;
-  }
-
-
-  ${createCompositeCarouselBlocks.Styles}
-  ${layoutImage.Styles}
-  ${OverwriteImageStyles}
-  ${OverwriteCarouselStyles}
-  ${OverwriteFullScreenOption}
-  ${OverwriteThemeDark}
-`;
+import { createCompositeCarouselOverlay } from "../elements/overlay.js";
+import "@universityofmaryland/web-utilities-library/events";
+import { createLayoutImageContainer } from "../../../layout/image.js";
+const fullScreenClassName = fullscreen.className;
 const createCompositeCarouselImageMultiple = (props) => (() => {
-  const { images, isThemeDark, isFullScreenOption } = props;
-  const elementDeclaration = document.createElement("div");
-  const elementContainer = document.createElement("div");
-  const clonedImages = images.map(
-    (image) => image.cloneNode(true)
-  );
-  let styles = STYLES_CAROUSEL_IMAGE_MULTIPLE_ELEMENT;
-  const overlayCarousel = createCompositeCarouselOverlay({
-    images
-  });
-  styles += overlayCarousel.styles;
-  const slide = document.createElement("div");
-  const blocks = clonedImages.map((image, index$1) => {
-    const block = layoutImage.CreateElement({
-      image,
-      showCaption: true
-    });
+  const { images, isThemeDark, isFullScreenOption = false, isToggleCaption = true } = props;
+  const clonedImages = images.map((image) => image.cloneNode(true));
+  const slide = new ElementBuilder().build().element;
+  const overlayCarousel = createCompositeCarouselOverlay({ images, isToggleCaption });
+  let buttonStyles = "";
+  let blockStyles = "";
+  let containerClass = "";
+  const blockModels = clonedImages.map((image, index$1) => {
+    const block = createLayoutImageContainer({ image, showCaption: true, isToggleCaption });
+    containerClass = block.element.className;
     if (isFullScreenOption) {
       const button = fullscreen.create({
         callback: overlayCarousel.events.setFullScreen,
         index: index$1
       });
-      block.appendChild(button.element);
-      styles += button.styles;
+      block.element.appendChild(button.element);
+      buttonStyles += button.styles;
     }
-    return block;
+    blockStyles += block.styles;
+    return block.element;
   });
   const carousel = createCompositeCarouselBlocks.CreateElement({
-    blocks,
+    blocks: blockModels,
     slide,
-    overwriteDisplayLogic: {
-      mobileBreakpoint: 600,
-      tabletBreakpoint: 900,
-      desktopBreakpoint: 1400,
-      desktopCount: 3,
-      maxCount: 4,
-      showHint: false,
-      fullScreenCallback: overlayCarousel.events.setFullScreen
+    mobileBreakpoint: token.media.breakpointValues.medium.max,
+    tabletBreakpoint: token.media.breakpointValues.desktop.min,
+    desktopBreakpoint: token.media.breakpointValues.highDef.max,
+    desktopCount: 3,
+    maxCount: 4,
+    showHint: false,
+    fullScreenCallback: overlayCarousel.events.setFullScreen,
+    button: {
+      ...buttonColorsOnWhite(isThemeDark)
     }
   });
-  elementContainer.appendChild(carousel.element);
-  elementContainer.classList.add(ELEMENT_CAROUSEL_MULTIPLE_CONTAINER);
-  if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
-  elementDeclaration.classList.add(ELEMENT_CAROUSEL_MULTIPLE_DECLARATION);
-  elementDeclaration.appendChild(elementContainer);
+  const containerModel = new ElementBuilder().withClassName("carousel-image-multiple-container").withStyles({
+    element: {
+      overflow: "hidden",
+      ...isThemeDark && { backgroundColor: token.color.black }
+    }
+  }).withChild(carousel).build();
+  const declarationModel = new ElementBuilder().withClassName("carousel-image-multiple-declaration").withStyles({
+    element: {
+      containerType: "inline-size",
+      [`& .${containerClass} img`]: { objectFit: "cover" }
+    }
+  }).withStylesIf(isFullScreenOption, {
+    element: {
+      // Only hide/reveal the Full Screen button on devices that actually
+      // hover. On touch (hover: none) the button stays visible by default —
+      // and, crucially, no `:hover` rule exists on this container, so iOS
+      // Safari does not swallow the first tap as a hover. A hover-reveal on
+      // the container would make iOS treat the first tap on the caption
+      // toggle (a child of this container) as a hover instead of a click.
+      "@media (hover: hover)": {
+        [`& .${fullScreenClassName}`]: {
+          visibility: "hidden",
+          opacity: 0,
+          transition: "visibility 0s, opacity 0.5s linear",
+          "&:focus": { visibility: "visible", opacity: 1 }
+        },
+        [`& .${containerClass}:focus-within .${fullScreenClassName}`]: {
+          visibility: "visible",
+          opacity: 1
+        },
+        [`& .${containerClass}:hover .${fullScreenClassName}`]: {
+          visibility: "visible",
+          opacity: 1
+        }
+      }
+    }
+  }).withChild(containerModel).withEvents({ SetEventReize: carousel.events.resize }).build();
+  declarationModel.styles = combineStyles(
+    declarationModel.styles,
+    blockStyles,
+    overlayCarousel.styles,
+    buttonStyles
+  );
   images[images.length - 1].addEventListener("load", () => {
     carousel.events.load();
     setTimeout(() => {
       const maxHeight = clonedImages.reduce(
-        (acc, image) => image.offsetHeight > acc ? image.offsetHeight : acc,
+        (accumulator, image) => Math.max(image.offsetHeight, accumulator),
         300
       );
       slide.style.minHeight = `${maxHeight}px`;
     }, 100);
   });
-  const responseOptions = {
-    styles,
-    events: {
-      SetEventReize: carousel.events.resize
-    }
-  };
   if (isFullScreenOption) {
-    const element = document.createElement("div");
-    element.appendChild(overlayCarousel.element);
-    element.appendChild(elementDeclaration);
-    return {
-      element,
-      ...responseOptions
-    };
+    const wrapperModel = new ElementBuilder().withChild(declarationModel).withModifier((element) => {
+      element.insertAdjacentElement("afterbegin", overlayCarousel.element);
+    }).withEvents({ SetEventReize: carousel.events.resize }).build();
+    return wrapperModel;
   }
-  return {
-    element: elementDeclaration,
-    ...responseOptions
-  };
+  return declarationModel;
 })();
 export {
   createCompositeCarouselImageMultiple

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 token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as carouselElements from '../elements';\nimport { buttons } from 'atomic';\nimport { Image as LayoutImage } from 'layout';\n\ntype TypeCarouselMultipleProps = {\n  images: HTMLImageElement[];\n  isThemeDark?: boolean;\n  isFullScreenOption?: boolean;\n};\n\nconst fullScreenClassName = elementStyles.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 const createCompositeCarouselImageMultiple = (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":["LayoutImage","carouselElements.blocks","carouselElements.overlay","index","buttons.fullscreen"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,sBAAsB,cAAc,OAAO,OAAO,WAAW;AAEnE,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,KAAKA,YAAY,SAAS,SAAS;AAE3G,MAAM,sCAAsC,IAAI,qCAAqC,KAAKC,8BAAwB,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,8BAAwB,MAAM;AAAA,IAC9BD,YAAY,MAAM;AAAA,IAClB,oBAAoB;AAAA,IACpB,uBAAuB;AAAA,IACvB,yBAAyB;AAAA,IACzB,kBAAkB;AAAA;AAGf,MAAM,uCAAuC,CAAC,WAClD,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,CAAC,UAC/B,MAAM,UAAU,IAAI;AAAA,EAAA;AAEtB,MAAI,SAAS;AAEb,QAAM,kBAAkBE,+BAAyB;AAAA,IAC/C;AAAA,EAAA,CACD;AAED,YAAU,gBAAgB;AAE1B,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,SAAS,aAAa,IAAI,CAAC,OAAOC,YAAU;AAChD,UAAM,QAAQH,YAAY,cAAc;AAAA,MACtC;AAAA,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,WAAWF,8BAAwB,cAAc;AAAA,IACrD;AAAA,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,KAAK,UAAW,MAAM,eAAe,MAAM,MAAM,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 token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { combineStyles } from '@universityofmaryland/web-utilities-library/styles';\nimport * as carouselElements from '../elements';\nimport { buttons } from 'atomic';\nimport { createLayoutImageContainer } from 'layout';\n\ntype TypeCarouselMultipleProps = {\n  images: HTMLImageElement[];\n  isThemeDark?: boolean;\n  isFullScreenOption?: boolean;\n  isToggleCaption?: boolean;\n};\n\nconst fullScreenClassName = buttons.fullscreen.className;\n\nexport const createCompositeCarouselImageMultiple = (props: TypeCarouselMultipleProps) =>\n  (() => {\n    const { images, isThemeDark, isFullScreenOption = false, isToggleCaption = true } = props;\n    const clonedImages = images.map((image) => image.cloneNode(true)) as HTMLImageElement[];\n    const slide = new ElementBuilder().build().element;\n    const overlayCarousel = carouselElements.overlay({ images, isToggleCaption });\n\n    let buttonStyles = '';\n    let blockStyles = '';\n    let containerClass = '';\n\n    const blockModels = clonedImages.map((image, index) => {\n      const block = createLayoutImageContainer({ image, showCaption: true, isToggleCaption });\n      containerClass = block.element.className;\n\n      if (isFullScreenOption) {\n        const button = buttons.fullscreen.create({\n          callback: overlayCarousel.events.setFullScreen,\n          index,\n        });\n\n        block.element.appendChild(button.element);\n        buttonStyles += button.styles;\n      }\n\n      blockStyles += block.styles;\n      return block.element;\n    });\n\n    const carousel = carouselElements.blocks.CreateElement({\n      blocks: blockModels,\n      slide,\n      mobileBreakpoint: token.media.breakpointValues.medium.max,\n      tabletBreakpoint: token.media.breakpointValues.desktop.min,\n      desktopBreakpoint: token.media.breakpointValues.highDef.max,\n      desktopCount: 3,\n      maxCount: 4,\n      showHint: false,\n      fullScreenCallback: overlayCarousel.events.setFullScreen,\n      button: {\n        ...carouselElements.buttonColorsOnWhite(isThemeDark),\n      },\n    });\n\n    const containerModel = new ElementBuilder()\n      .withClassName('carousel-image-multiple-container')\n      .withStyles({\n        element: {\n          overflow: 'hidden',\n          ...(isThemeDark && { backgroundColor: token.color.black }),\n        },\n      })\n      .withChild(carousel)\n      .build();\n\n    const declarationModel = new ElementBuilder()\n      .withClassName('carousel-image-multiple-declaration')\n      .withStyles({\n        element: {\n          containerType: 'inline-size',\n          [`& .${containerClass} img`]: { objectFit: 'cover' },\n        },\n      })\n      .withStylesIf(isFullScreenOption, {\n        element: {\n          // Only hide/reveal the Full Screen button on devices that actually\n          // hover. On touch (hover: none) the button stays visible by default —\n          // and, crucially, no `:hover` rule exists on this container, so iOS\n          // Safari does not swallow the first tap as a hover. A hover-reveal on\n          // the container would make iOS treat the first tap on the caption\n          // toggle (a child of this container) as a hover instead of a click.\n          '@media (hover: hover)': {\n            [`& .${fullScreenClassName}`]: {\n              visibility: 'hidden',\n              opacity: 0,\n              transition: 'visibility 0s, opacity 0.5s linear',\n              '&:focus': { visibility: 'visible', opacity: 1 },\n            },\n            [`& .${containerClass}:focus-within .${fullScreenClassName}`]: {\n              visibility: 'visible',\n              opacity: 1,\n            },\n            [`& .${containerClass}:hover .${fullScreenClassName}`]: {\n              visibility: 'visible',\n              opacity: 1,\n            },\n          },\n        },\n      })\n      .withChild(containerModel)\n      .withEvents({ SetEventReize: carousel.events.resize })\n      .build();\n\n    declarationModel.styles = combineStyles(\n      declarationModel.styles,\n      blockStyles,\n      overlayCarousel.styles,\n      buttonStyles,\n    );\n\n    images[images.length - 1].addEventListener('load', () => {\n      carousel.events.load();\n\n      setTimeout(() => {\n        const maxHeight = clonedImages.reduce(\n          (accumulator, image) => Math.max(image.offsetHeight, accumulator),\n          300,\n        );\n\n        slide.style.minHeight = `${maxHeight}px`;\n      }, 100);\n    });\n\n    if (isFullScreenOption) {\n      const wrapperModel = new ElementBuilder()\n        .withChild(declarationModel)\n        .withModifier((element) => {\n          element.insertAdjacentElement('afterbegin', overlayCarousel.element);\n        })\n        .withEvents({ SetEventReize: carousel.events.resize })\n        .build();\n\n      return wrapperModel;\n    }\n\n    return declarationModel;\n  })();\n"],"names":["buttons.fullscreen","carouselElements.overlay","index","carouselElements.blocks","carouselElements.buttonColorsOnWhite"],"mappings":"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"}

package/dist/composite/carousel/image/standard.d.ts

@@ -8,13 +8,8 @@ type TypeSlideContent = {
 };
 type TypeCarouselImageStandardProps = TypeSlideContent & TypeFullScreen & {
     isThemeDark?: boolean;
+    isToggleCaption?: boolean;
 };
-export declare const createCompositeCarouselImageStandard: (props: TypeCarouselImageStandardProps) => {
-    styles: string;
-    events: {
-        SetEventReize: () => void;
-    };
-    element: HTMLDivElement;
-};
+export declare const createCompositeCarouselImageStandard: (props: TypeCarouselImageStandardProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 export {};
 //# sourceMappingURL=standard.d.ts.map

package/dist/composite/carousel/image/standard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/image/standard.ts"],"names":[],"mappings":"AAcA,KAAK,cAAc,GAAG;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAMF,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;CAC9B,CAAC;AAYF,KAAK,8BAA8B,GAAG,gBAAgB,GACpD,cAAc,GAAG;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAqLJ,eAAO,MAAM,oCAAoC,GAC/C,OAAO,8BAA8B;;;;;;CA0KjC,CAAC"}
+{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/image/standard.ts"],"names":[],"mappings":"AAWA,KAAK,cAAc,GAAG;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAMF,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;CAC9B,CAAC;AAYF,KAAK,8BAA8B,GAAG,gBAAgB,GACpD,cAAc,GAAG;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAIJ,eAAO,MAAM,oCAAoC,GAC/C,OAAO,8BAA8B,kFA8PjC,CAAC"}