@universityofmaryland/web-elements-library 1.3.7 → 1.4.0

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

@@ -0,0 +1,81 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const image$1 = require("../../../layout/image.js");
+require("./blocks.js");
+const fullScreen = require("./full-screen.js");
+const image = require("./image.js");
+const ELEMENT_CAROUSEL_OVERLAY_COINTAINER = "carousel-overlay-container";
+const OverlayImageContainerStyles = `
+  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: ${Styles.token.color.gray.dark};
+  }
+
+  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} img {
+    object-fit: contain;
+    max-height: 100%;
+  }
+`;
+const STYLES_CAROUSEL_OVERLAY_ELEMENT = `
+  ${image$1.Styles}
+  ${OverlayImageContainerStyles}
+`;
+const CreateOverlaySlide = ({ images }) => images.map((image2) => {
+  const slide = document.createElement("div");
+  const imageContainer = document.createElement("div");
+  const imageBlock = image$1.CreateElement({
+    image: image2,
+    showCaption: true
+  });
+  imageContainer.classList.add(ELEMENT_CAROUSEL_OVERLAY_COINTAINER);
+  imageContainer.appendChild(imageBlock);
+  slide.appendChild(imageContainer);
+  return slide;
+});
+const overlay = ({ images }) => (() => {
+  let styles = STYLES_CAROUSEL_OVERLAY_ELEMENT;
+  const setFullScreen = (index) => {
+    let canMove = true;
+    const checkKeyEvents = (event) => {
+      if (!canMove) return;
+      canMove = false;
+      if (event.key == "ArrowLeft") overlayCarousel.events.EventSlideLeft();
+      if (event.key == "ArrowRight") overlayCarousel.events.EventSlideRight();
+      setTimeout(() => {
+        canMove = true;
+      }, 700);
+    };
+    overlayCarousel.events.EventMoveTo(index);
+    setTimeout(() => fixedFullScreen.events.show(), 100);
+    setTimeout(() => {
+      overlayCarousel.events.EventResize();
+    }, 100);
+    isFullScreenEvents = window.addEventListener("keyup", checkKeyEvents);
+  };
+  const overlaySlides = CreateOverlaySlide({ images });
+  const overlayCarousel = image({
+    slides: overlaySlides,
+    maxHeight: window.innerHeight / 10 * 8
+  });
+  styles += overlayCarousel.styles;
+  const fixedFullScreen = fullScreen({
+    content: overlayCarousel.element,
+    callback: () => {
+      if (isFullScreenEvents)
+        window.removeEventListener("keyup", isFullScreenEvents);
+    }
+  });
+  styles += fixedFullScreen.styles;
+  let isFullScreenEvents = null;
+  return {
+    element: fixedFullScreen.element,
+    styles,
+    events: {
+      setFullScreen
+    }
+  };
+})();
+module.exports = overlay;
+//# sourceMappingURL=overlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.js","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport { Image as LayoutImage } from 'layout';\nimport * as carouselElements from '../elements';\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 default ({ 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":["token","LayoutImage","image","carouselElements.image","carouselElements.fullScreen"],"mappings":";;;;;;AAIA,MAAM,sCAAsC;AAG5C,MAAM,8BAA8B;AAAA,KAC/B,mCAAmC;AAAA;AAAA;AAAA;AAAA,wBAIhBA,aAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,KAGxC,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,kCAAkC;AAAA,IACpCC,QAAY,MAAM;AAAA,IAClB,2BAA2B;AAAA;AAG/B,MAAM,qBAAqB,CAAC,EAAE,OAAA,MAC5B,OAAO,IAAI,CAACC,WAAU;AACpB,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,aAAaD,QAAY,cAAc;AAAA,IAC3C,OAAAC;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,iBAAe,UAAU,IAAI,mCAAmC;AAChE,iBAAe,YAAY,UAAU;AAErC,QAAM,YAAY,cAAc;AAEhC,SAAO;AACT,CAAC;AAEH,MAAA,UAAe,CAAC,EAAE,OAAA,OACf,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,MAAuB;AAAA,IAC7C,QAAQ;AAAA,IACR,WAAY,OAAO,cAAc,KAAM;AAAA,EAAA,CACxC;AAED,YAAU,gBAAgB;AAE1B,QAAM,kBAAkBC,WAA4B;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;;"}

package/dist/composite/carousel/elements/overlay.mjs

@@ -0,0 +1,82 @@
+import { token } from "@universityofmaryland/web-styles-library";
+import LayoutImage from "../../../layout/image.mjs";
+import "./blocks.mjs";
+import fullScreen from "./full-screen.mjs";
+import image from "./image.mjs";
+const ELEMENT_CAROUSEL_OVERLAY_COINTAINER = "carousel-overlay-container";
+const OverlayImageContainerStyles = `
+  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: ${token.color.gray.dark};
+  }
+
+  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} img {
+    object-fit: contain;
+    max-height: 100%;
+  }
+`;
+const STYLES_CAROUSEL_OVERLAY_ELEMENT = `
+  ${LayoutImage.Styles}
+  ${OverlayImageContainerStyles}
+`;
+const CreateOverlaySlide = ({ images }) => images.map((image2) => {
+  const slide = document.createElement("div");
+  const imageContainer = document.createElement("div");
+  const imageBlock = LayoutImage.CreateElement({
+    image: image2,
+    showCaption: true
+  });
+  imageContainer.classList.add(ELEMENT_CAROUSEL_OVERLAY_COINTAINER);
+  imageContainer.appendChild(imageBlock);
+  slide.appendChild(imageContainer);
+  return slide;
+});
+const overlay = ({ images }) => (() => {
+  let styles = STYLES_CAROUSEL_OVERLAY_ELEMENT;
+  const setFullScreen = (index) => {
+    let canMove = true;
+    const checkKeyEvents = (event) => {
+      if (!canMove) return;
+      canMove = false;
+      if (event.key == "ArrowLeft") overlayCarousel.events.EventSlideLeft();
+      if (event.key == "ArrowRight") overlayCarousel.events.EventSlideRight();
+      setTimeout(() => {
+        canMove = true;
+      }, 700);
+    };
+    overlayCarousel.events.EventMoveTo(index);
+    setTimeout(() => fixedFullScreen.events.show(), 100);
+    setTimeout(() => {
+      overlayCarousel.events.EventResize();
+    }, 100);
+    isFullScreenEvents = window.addEventListener("keyup", checkKeyEvents);
+  };
+  const overlaySlides = CreateOverlaySlide({ images });
+  const overlayCarousel = image({
+    slides: overlaySlides,
+    maxHeight: window.innerHeight / 10 * 8
+  });
+  styles += overlayCarousel.styles;
+  const fixedFullScreen = fullScreen({
+    content: overlayCarousel.element,
+    callback: () => {
+      if (isFullScreenEvents)
+        window.removeEventListener("keyup", isFullScreenEvents);
+    }
+  });
+  styles += fixedFullScreen.styles;
+  let isFullScreenEvents = null;
+  return {
+    element: fixedFullScreen.element,
+    styles,
+    events: {
+      setFullScreen
+    }
+  };
+})();
+export {
+  overlay as default
+};
+//# sourceMappingURL=overlay.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.mjs","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport { Image as LayoutImage } from 'layout';\nimport * as carouselElements from '../elements';\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 default ({ 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":["image","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,IACpC,YAAY,MAAM;AAAA,IAClB,2BAA2B;AAAA;AAG/B,MAAM,qBAAqB,CAAC,EAAE,OAAA,MAC5B,OAAO,IAAI,CAACA,WAAU;AACpB,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,aAAa,YAAY,cAAc;AAAA,IAC3C,OAAAA;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,iBAAe,UAAU,IAAI,mCAAmC;AAChE,iBAAe,YAAY,UAAU;AAErC,QAAM,YAAY,cAAc;AAEhC,SAAO;AACT,CAAC;AAEH,MAAA,UAAe,CAAC,EAAE,OAAA,OACf,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,MAAuB;AAAA,IAC7C,QAAQ;AAAA,IACR,WAAY,OAAO,cAAc,KAAM;AAAA,EAAA,CACxC;AAED,YAAU,gBAAgB;AAE1B,QAAM,kBAAkBC,WAA4B;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;"}

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":"AAKA,KAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;gCA4GqB,yBAAyB;;;;;;;AAAhD,wBA8FO"}
+{"version":3,"file":"multiple.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/image/multiple.ts"],"names":[],"mappings":"AAKA,KAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;yBA4Gc,OAAO,yBAAyB;;;;;;;AAAhD,wBA8FO"}

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

@@ -0,0 +1,203 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+require("../../../node_modules/postcss/lib/postcss.js");
+require("../../../node_modules/postcss-nesting/dist/index.js");
+require("../../../node_modules/postcss-js/index.js");
+require("../../../model/modifiers/index.js");
+require("../../../model/elements/headline.js");
+require("../../../atomic/animations/actions/indicator.js");
+require("../../../atomic/animations/brand/chevron-scroll.js");
+const fullscreen = require("../../../atomic/buttons/fullscreen.js");
+require("../../../atomic/layout/block/stacked.js");
+require("../../../atomic/layout/overlay/modal.js");
+require("../../../atomic/layout/person/columns.js");
+require("../../../atomic/text-lockup/date.js");
+require("../../../atomic/text-lockup/small.js");
+const image = require("../../../layout/image.js");
+const blocks = require("../elements/blocks.js");
+require("../elements/full-screen.js");
+const overlay = require("../elements/overlay.js");
+require("../elements/image.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const { token } = Styles__namespace;
+const fullScreenClassName = Styles__namespace.element.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} .${image.Elements.container}`;
+const OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${ELEMENT_CAROUSEL_MULTIPLE_DECLARATION} .${blocks.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;
+  }
+
+
+  ${blocks.Styles}
+  ${image.Styles}
+  ${OverwriteImageStyles}
+  ${OverwriteCarouselStyles}
+  ${OverwriteFullScreenOption}
+  ${OverwriteThemeDark}
+`;
+const multiple = (props) => (() => {
+  const { images, isThemeDark, isFullScreenOption } = props;
+  const elementDeclaration = document.createElement("div");
+  const elementContainer = document.createElement("div");
+  const clonedImages = images.map(
+    (image2) => image2.cloneNode(true)
+  );
+  let styles = STYLES_CAROUSEL_IMAGE_MULTIPLE_ELEMENT;
+  const overlayCarousel = overlay({
+    images
+  });
+  styles += overlayCarousel.styles;
+  const slide = document.createElement("div");
+  const blocks$1 = clonedImages.map((image$1, index$1) => {
+    const block = image.CreateElement({
+      image: image$1,
+      showCaption: true
+    });
+    if (isFullScreenOption) {
+      const button = fullscreen.create({
+        callback: overlayCarousel.events.setFullScreen,
+        index: index$1
+      });
+      block.appendChild(button.element);
+      styles += button.styles;
+    }
+    return block;
+  });
+  const carousel = blocks.CreateElement({
+    blocks: blocks$1,
+    slide,
+    overwriteDisplayLogic: {
+      mobileBreakpoint: 600,
+      tabletBreakpoint: 900,
+      desktopBreakpoint: 1400,
+      desktopCount: 3,
+      maxCount: 4,
+      showHint: false,
+      fullScreenCallback: overlayCarousel.events.setFullScreen
+    }
+  });
+  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);
+  images[images.length - 1].addEventListener("load", () => {
+    carousel.events.load();
+    setTimeout(() => {
+      const maxHeight = clonedImages.reduce(
+        (acc, image2) => image2.offsetHeight > acc ? image2.offsetHeight : acc,
+        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
+    };
+  }
+  return {
+    element: elementDeclaration,
+    ...responseOptions
+  };
+})();
+module.exports = multiple;
+//# sourceMappingURL=multiple.js.map

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

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

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

@@ -0,0 +1,187 @@
+import * as Styles from "@universityofmaryland/web-styles-library";
+import "../../../node_modules/postcss/lib/postcss.mjs";
+import "../../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../../node_modules/postcss-js/index.mjs";
+import "../../../model/modifiers/index.mjs";
+import "../../../model/elements/headline.mjs";
+import "../../../atomic/animations/actions/indicator.mjs";
+import "../../../atomic/animations/brand/chevron-scroll.mjs";
+import fullscreen from "../../../atomic/buttons/fullscreen.mjs";
+import "../../../atomic/layout/block/stacked.mjs";
+import "../../../atomic/layout/overlay/modal.mjs";
+import "../../../atomic/layout/person/columns.mjs";
+import "../../../atomic/text-lockup/date.mjs";
+import "../../../atomic/text-lockup/small.mjs";
+import LayoutImage from "../../../layout/image.mjs";
+import blocks from "../elements/blocks.mjs";
+import "../elements/full-screen.mjs";
+import overlay from "../elements/overlay.mjs";
+import "../elements/image.mjs";
+const { token } = Styles;
+const fullScreenClassName = Styles.element.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} .${blocks.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;
+  }
+
+
+  ${blocks.Styles}
+  ${LayoutImage.Styles}
+  ${OverwriteImageStyles}
+  ${OverwriteCarouselStyles}
+  ${OverwriteFullScreenOption}
+  ${OverwriteThemeDark}
+`;
+const multiple = (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 = overlay({
+    images
+  });
+  styles += overlayCarousel.styles;
+  const slide = document.createElement("div");
+  const blocks$1 = clonedImages.map((image, index$1) => {
+    const block = LayoutImage.CreateElement({
+      image,
+      showCaption: true
+    });
+    if (isFullScreenOption) {
+      const button = fullscreen.create({
+        callback: overlayCarousel.events.setFullScreen,
+        index: index$1
+      });
+      block.appendChild(button.element);
+      styles += button.styles;
+    }
+    return block;
+  });
+  const carousel = blocks.CreateElement({
+    blocks: blocks$1,
+    slide,
+    overwriteDisplayLogic: {
+      mobileBreakpoint: 600,
+      tabletBreakpoint: 900,
+      desktopBreakpoint: 1400,
+      desktopCount: 3,
+      maxCount: 4,
+      showHint: false,
+      fullScreenCallback: overlayCarousel.events.setFullScreen
+    }
+  });
+  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);
+  images[images.length - 1].addEventListener("load", () => {
+    carousel.events.load();
+    setTimeout(() => {
+      const maxHeight = clonedImages.reduce(
+        (acc, image) => image.offsetHeight > acc ? image.offsetHeight : acc,
+        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
+    };
+  }
+  return {
+    element: elementDeclaration,
+    ...responseOptions
+  };
+})();
+export {
+  multiple as default
+};
+//# sourceMappingURL=multiple.mjs.map

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

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

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":"AAUA,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;gCA4KmB,8BAA8B;;;;;;;AAArD,wBAuKO"}
+{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/image/standard.ts"],"names":[],"mappings":"AAUA,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;yBA4KY,OAAO,8BAA8B;;;;;;;AAArD,wBAuKO"}