@universityofmaryland/web-elements-library 1.3.7 → 1.4.0

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

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/image.ts"],"names":[],"mappings":"AAGA,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;gCAwNqB,sBAAsB;;;;;6BA6Bb,MAAM;;;;;;AA7BtC,wBAyGO"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/image.ts"],"names":[],"mappings":"AAGA,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;yBAwNc,OAAO,sBAAsB;;;;;6BA6Bb,MAAM;;;;;;AA7BtC,wBAyGO"}

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

@@ -0,0 +1,268 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const icons = require("../../../utilities/assets/icons.js");
+const index$1 = require("../../../utilities/js-events/index.js");
+const index = require("../../../utilities/performance/index.js");
+require("../../../node_modules/postcss/lib/postcss.js");
+require("../../../node_modules/postcss-nesting/dist/index.js");
+require("../../../node_modules/postcss-js/index.js");
+const assets = require("../../../utilities/theme/assets.js");
+const ANIMATION_DURATION = 500;
+const ATTRIBUTE_ACTIVE_SLIDE = "data-active-slide";
+const ELEMENT_CAROUSEL_DECLARATION = "carousel-image-slider-container";
+const ELEMENT_CAROUSEL_CONTAINER = "carousel-image-slider";
+const ELEMENT_CAROUSEL_SLIDE = "carousel-image-slide";
+const ELEMENT_CAROUSEL_SLIDER_BUTTON = "carousel-slider-button";
+const OVERWRITE_ACTIVE_SLIDE = `.${ELEMENT_CAROUSEL_SLIDE}[${ATTRIBUTE_ACTIVE_SLIDE}]`;
+const SliderButtons = `
+  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} {
+    background-color: ${Styles.token.color.white};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 40px;
+    width: 40px;
+    position: absolute;
+    top: 50%;
+    z-index: 99;
+  }
+
+  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type {
+    left: ${Styles.token.spacing.sm};
+  }
+
+  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type svg {
+    transform: rotate(180deg);
+  }
+
+  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:last-of-type {
+    right: ${Styles.token.spacing.sm};
+  }
+
+  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} svg {
+    fill: ${Styles.token.color.black};
+    width: 16px;
+  }
+`;
+const SlideStyles = `
+  .${ELEMENT_CAROUSEL_SLIDE} {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    left: 100%;
+    display: none;
+    transition: transform ${ANIMATION_DURATION}ms ease-in-out;
+  }
+
+  ${OVERWRITE_ACTIVE_SLIDE} {
+    z-index: 99;
+    left: 0;
+    display: block;
+    transform: translateX(0);
+  }
+`;
+const SliderStyles = `
+  .${ELEMENT_CAROUSEL_CONTAINER} {
+    position: relative;
+  }
+`;
+const STYLES_CAROUSEL_IMAGE_ELEMENT = `
+  .${ELEMENT_CAROUSEL_DECLARATION} {
+    overflow: hidden;
+  }
+
+  ${SliderStyles}
+  ${SlideStyles}
+  ${SliderButtons}
+`;
+const CreateButton = ({
+  EventSlide,
+  isRight = true
+}) => {
+  const button = document.createElement("button");
+  button.setAttribute("type", "button");
+  button.classList.add(ELEMENT_CAROUSEL_SLIDER_BUTTON);
+  button.innerHTML = icons.FORWARD_ARROW;
+  if (!isRight) {
+    button.setAttribute("aria-label", "Previous");
+  } else {
+    button.setAttribute("aria-label", "Next");
+  }
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    if (isRight) EventSlide({});
+    if (!isRight) EventSlide({ forward: false });
+    button.disabled = true;
+    setTimeout(() => {
+      button.disabled = false;
+    }, ANIMATION_DURATION + 100);
+  });
+  return button;
+};
+const SetCarouselSize = ({
+  slider,
+  activeSlide,
+  transition = false,
+  maxHeight
+}) => {
+  const windowHeight = window.innerHeight - 48;
+  const children = Array.from(activeSlide.children);
+  const buttons = Array.from(
+    slider.querySelectorAll(`.${ELEMENT_CAROUSEL_SLIDER_BUTTON}`)
+  );
+  const img = activeSlide.querySelector("img");
+  const maxWindowHeight = maxHeight ? maxHeight > windowHeight ? windowHeight : maxHeight : windowHeight;
+  const imageSize = assets.getResponsiveImageSize({
+    image: img,
+    parentNode: slider,
+    maxWindowHeight
+  });
+  const imageContainer = children.find(
+    (child) => child.contains(img)
+  );
+  let size = imageSize;
+  imageContainer.style.height = `${imageSize}px`;
+  if (children.length > 1) {
+    size = children.reduce((acc, currentElement) => {
+      return currentElement.offsetHeight + acc;
+    }, 0);
+  }
+  buttons.forEach((button) => button.style.top = `${imageSize / 2}px`);
+  if (transition) {
+    slider.style.transition = `height ${ANIMATION_DURATION}ms ease-in-out`;
+  } else {
+    slider.style.transition = `none`;
+  }
+  slider.style.height = `${size}px`;
+};
+const SlideActiveSlide = ({
+  slide,
+  isRight = true
+}) => {
+  const transformDirection = isRight ? "translateX(-100%)" : "translateX(100%)";
+  slide.style.transform = `${transformDirection}`;
+  setTimeout(() => {
+    slide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);
+  }, ANIMATION_DURATION);
+  setTimeout(() => {
+    slide.style.transform = "none";
+  }, ANIMATION_DURATION + 100);
+};
+const SlideUpcomingSlide = ({
+  slide,
+  isRight = true
+}) => {
+  const amount = "90";
+  const transformDirection = isRight ? `translateX(-${amount}%)` : `translateX(${amount}%)`;
+  const startingPosition = isRight ? `${amount}%` : `-${amount}%`;
+  slide.style.zIndex = "9";
+  slide.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;
+  slide.style.display = "block";
+  slide.style.left = `${startingPosition}`;
+  setTimeout(() => {
+    slide.style.transform = `${transformDirection}`;
+  }, 1);
+  setTimeout(() => {
+    slide.style.transition = "none";
+    slide.style.left = "0";
+    slide.style.transform = "none";
+    slide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, "");
+  }, ANIMATION_DURATION);
+  setTimeout(() => {
+    slide.removeAttribute("style");
+  }, ANIMATION_DURATION + 100);
+};
+const image = (props) => (() => {
+  const { slides, callback, maxHeight } = props;
+  const container = document.createElement("div");
+  const slider = document.createElement("div");
+  let activeIndex = 0;
+  let styles = STYLES_CAROUSEL_IMAGE_ELEMENT;
+  const EventSlide = ({ forward = true }) => {
+    SlideActiveSlide({ slide: slides[activeIndex], isRight: forward });
+    if (forward) {
+      activeIndex = activeIndex + 1;
+      if (activeIndex >= slides.length) activeIndex = 0;
+    } else {
+      activeIndex = activeIndex - 1;
+      if (activeIndex < 0) activeIndex = slides.length - 1;
+    }
+    SlideUpcomingSlide({ slide: slides[activeIndex], isRight: forward });
+    SetCarouselSize({
+      slider,
+      activeSlide: slides[activeIndex],
+      transition: true,
+      maxHeight
+    });
+    if (callback) callback(activeIndex);
+  };
+  const EventMoveTo = (index2) => {
+    SlideActiveSlide({ slide: slides[activeIndex], isRight: true });
+    activeIndex = index2;
+    SlideUpcomingSlide({ slide: slides[activeIndex], isRight: true });
+    SetCarouselSize({
+      slider,
+      activeSlide: slides[activeIndex],
+      transition: true,
+      maxHeight
+    });
+    if (callback) callback(activeIndex);
+  };
+  const EventSlideLeft = () => EventSlide({ forward: false });
+  const EventSlideRight = () => EventSlide({ forward: true });
+  const EventSwipe = () => {
+    const swipes = (isrightswipe) => {
+      if (!isrightswipe) {
+        EventSlide({ forward: true });
+      } else {
+        EventSlide({ forward: false });
+      }
+    };
+    index$1.CreateEventSwipe({
+      container: slider,
+      callback: swipes
+    });
+  };
+  const EventResize = () => {
+    SetCarouselSize({ slider, activeSlide: slides[activeIndex], maxHeight });
+  };
+  const Load = () => {
+    const setSize = () => {
+      const activeSlide = slides[activeIndex];
+      SetCarouselSize({ slider, activeSlide, maxHeight });
+      activeSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, "");
+    };
+    setTimeout(setSize, 100);
+    setTimeout(setSize, 300);
+  };
+  slider.classList.add(ELEMENT_CAROUSEL_CONTAINER);
+  slides.forEach((slide) => slide.classList.add(ELEMENT_CAROUSEL_SLIDE));
+  slider.append(...slides);
+  slider.appendChild(CreateButton({ EventSlide, isRight: false }));
+  slider.appendChild(
+    CreateButton({
+      EventSlide,
+      isRight: true
+    })
+  );
+  container.classList.add(ELEMENT_CAROUSEL_DECLARATION);
+  container.appendChild(slider);
+  window.addEventListener(
+    "resize",
+    index.debounce(EventResize, 10)
+  );
+  EventSwipe();
+  return {
+    element: container,
+    styles,
+    events: {
+      Load,
+      EventMoveTo,
+      EventResize,
+      EventSlideLeft,
+      EventSlideRight
+    }
+  };
+})();
+module.exports = image;
+//# sourceMappingURL=image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","sources":["../../../../source/composite/carousel/elements/image.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\n\ntype TypeCarouselImageProps = {\n  slides: HTMLElement[];\n  callback?: (index: number) => void;\n  maxHeight?: number;\n};\n\nconst ANIMATION_DURATION = 500;\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active-slide';\n\nconst ELEMENT_CAROUSEL_DECLARATION = 'carousel-image-slider-container';\nconst ELEMENT_CAROUSEL_CONTAINER = 'carousel-image-slider';\nconst ELEMENT_CAROUSEL_SLIDE = 'carousel-image-slide';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-slider-button';\n\nconst OVERWRITE_ACTIVE_SLIDE = `.${ELEMENT_CAROUSEL_SLIDE}[${ATTRIBUTE_ACTIVE_SLIDE}]`;\n\n// prettier-ignore\nconst SliderButtons = `\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} {\n    background-color: ${token.color.white};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 40px;\n    width: 40px;\n    position: absolute;\n    top: 50%;\n    z-index: 99;\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type {\n    left: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type svg {\n    transform: rotate(180deg);\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:last-of-type {\n    right: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} svg {\n    fill: ${token.color.black};\n    width: 16px;\n  }\n`\n\n// prettier-ignore\nconst SlideStyles = `\n  .${ELEMENT_CAROUSEL_SLIDE} {\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    left: 100%;\n    display: none;\n    transition: transform ${ANIMATION_DURATION}ms ease-in-out;\n  }\n\n  ${OVERWRITE_ACTIVE_SLIDE} {\n    z-index: 99;\n    left: 0;\n    display: block;\n    transform: translateX(0);\n  }\n`\n\n// prettier-ignore\nconst SliderStyles = `\n  .${ELEMENT_CAROUSEL_CONTAINER} {\n    position: relative;\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_ELEMENT = `\n  .${ELEMENT_CAROUSEL_DECLARATION} {\n    overflow: hidden;\n  }\n\n  ${SliderStyles}\n  ${SlideStyles}\n  ${SliderButtons}\n`;\n\nconst CreateButton = ({\n  EventSlide,\n  isRight = true,\n}: {\n  EventSlide: ({ forward }: { forward?: boolean }) => void;\n  isRight?: boolean;\n}) => {\n  const button = document.createElement('button');\n  button.setAttribute('type', 'button');\n  button.classList.add(ELEMENT_CAROUSEL_SLIDER_BUTTON);\n  button.innerHTML = Utility.asset.icon.FORWARD_ARROW;\n\n  if (!isRight) {\n    button.setAttribute('aria-label', 'Previous');\n  } else {\n    button.setAttribute('aria-label', 'Next');\n  }\n\n  button.addEventListener('click', (event) => {\n    event.stopPropagation();\n    if (isRight) EventSlide({});\n    if (!isRight) EventSlide({ forward: false });\n    button.disabled = true;\n\n    setTimeout(() => {\n      button.disabled = false;\n    }, ANIMATION_DURATION + 100);\n  });\n\n  return button;\n};\n\nconst SetCarouselSize = ({\n  slider,\n  activeSlide,\n  transition = false,\n  maxHeight,\n}: {\n  slider: HTMLElement;\n  activeSlide: HTMLElement;\n  transition?: boolean;\n  maxHeight?: number;\n}) => {\n  const windowHeight = window.innerHeight - 48;\n  const children = Array.from(activeSlide.children) as HTMLDivElement[];\n  const buttons = Array.from(\n    slider.querySelectorAll(`.${ELEMENT_CAROUSEL_SLIDER_BUTTON}`),\n  ) as HTMLButtonElement[];\n  const img = activeSlide.querySelector('img') as HTMLImageElement;\n  const maxWindowHeight = maxHeight\n    ? maxHeight > windowHeight\n      ? windowHeight\n      : maxHeight\n    : windowHeight;\n  const imageSize = Utility.theme.assets.getResponsiveImageSize({\n    image: img,\n    parentNode: slider,\n    maxWindowHeight,\n  });\n  const imageContainer = children.find((child) =>\n    child.contains(img),\n  ) as HTMLElement;\n  let size = imageSize;\n\n  imageContainer.style.height = `${imageSize}px`;\n\n  if (children.length > 1) {\n    size = children.reduce((acc, currentElement) => {\n      return currentElement.offsetHeight + acc;\n    }, 0);\n  }\n\n  buttons.forEach((button) => (button.style.top = `${imageSize / 2}px`));\n\n  if (transition) {\n    slider.style.transition = `height ${ANIMATION_DURATION}ms ease-in-out`;\n  } else {\n    slider.style.transition = `none`;\n  }\n  slider.style.height = `${size}px`;\n};\n\nconst SlideActiveSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const transformDirection = isRight ? 'translateX(-100%)' : 'translateX(100%)';\n  slide.style.transform = `${transformDirection}`;\n\n  setTimeout(() => {\n    slide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.style.transform = 'none';\n  }, ANIMATION_DURATION + 100);\n};\n\nconst SlideUpcomingSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const amount = '90';\n  const transformDirection = isRight\n    ? `translateX(-${amount}%)`\n    : `translateX(${amount}%)`;\n  const startingPosition = isRight ? `${amount}%` : `-${amount}%`;\n\n  slide.style.zIndex = '9';\n  slide.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;\n  slide.style.display = 'block';\n  slide.style.left = `${startingPosition}`;\n\n  setTimeout(() => {\n    slide.style.transform = `${transformDirection}`;\n  }, 1);\n\n  setTimeout(() => {\n    slide.style.transition = 'none';\n    slide.style.left = '0';\n    slide.style.transform = 'none';\n    slide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.removeAttribute('style');\n  }, ANIMATION_DURATION + 100);\n};\n\nexport default (props: TypeCarouselImageProps) =>\n  (() => {\n    const { slides, callback, maxHeight } = props;\n    const container = document.createElement('div');\n    const slider = document.createElement('div');\n    let activeIndex = 0;\n    let styles = STYLES_CAROUSEL_IMAGE_ELEMENT;\n\n    const EventSlide = ({ forward = true }: { forward?: boolean }) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: forward });\n\n      if (forward) {\n        activeIndex = activeIndex + 1;\n        if (activeIndex >= slides.length) activeIndex = 0;\n      } else {\n        activeIndex = activeIndex - 1;\n        if (activeIndex < 0) activeIndex = slides.length - 1;\n      }\n\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: forward });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventMoveTo = (index: number) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: true });\n      activeIndex = index;\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: true });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventSlideLeft = () => EventSlide({ forward: false });\n    const EventSlideRight = () => EventSlide({ forward: true });\n\n    const EventSwipe = () => {\n      const swipes = (isrightswipe: Boolean) => {\n        if (!isrightswipe) {\n          EventSlide({ forward: true });\n        } else {\n          EventSlide({ forward: false });\n        }\n      };\n\n      Utility.javascriptEvents.CreateEventSwipe({\n        container: slider,\n        callback: swipes,\n      });\n    };\n\n    const EventResize = () => {\n      SetCarouselSize({ slider, activeSlide: slides[activeIndex], maxHeight });\n    };\n\n    const Load = () => {\n      const setSize = () => {\n        const activeSlide = slides[activeIndex];\n        SetCarouselSize({ slider, activeSlide, maxHeight });\n        activeSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n      };\n      setTimeout(setSize, 100);\n      setTimeout(setSize, 300);\n    };\n\n    slider.classList.add(ELEMENT_CAROUSEL_CONTAINER);\n    slides.forEach((slide) => slide.classList.add(ELEMENT_CAROUSEL_SLIDE));\n    slider.append(...slides);\n    slider.appendChild(CreateButton({ EventSlide, isRight: false }));\n    slider.appendChild(\n      CreateButton({\n        EventSlide,\n        isRight: true,\n      }),\n    );\n\n    container.classList.add(ELEMENT_CAROUSEL_DECLARATION);\n    container.appendChild(slider);\n\n    window.addEventListener(\n      'resize',\n      Utility.performance.debounce(EventResize, 10),\n    );\n    EventSwipe();\n\n    return {\n      element: container,\n      styles,\n      events: {\n        Load,\n        EventMoveTo,\n        EventResize,\n        EventSlideLeft,\n        EventSlideRight,\n      },\n    };\n  })();\n"],"names":["token","Utility.asset.icon.FORWARD_ARROW","Utility.theme.assets.getResponsiveImageSize","index","Utility.javascriptEvents.CreateEventSwipe","Utility.performance.debounce"],"mappings":"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"}

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

@@ -0,0 +1,269 @@
+import { token } from "@universityofmaryland/web-styles-library";
+import { FORWARD_ARROW } from "../../../utilities/assets/icons.mjs";
+import { CreateEventSwipe } from "../../../utilities/js-events/index.mjs";
+import { debounce } from "../../../utilities/performance/index.mjs";
+import "../../../node_modules/postcss/lib/postcss.mjs";
+import "../../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../../node_modules/postcss-js/index.mjs";
+import { getResponsiveImageSize } from "../../../utilities/theme/assets.mjs";
+const ANIMATION_DURATION = 500;
+const ATTRIBUTE_ACTIVE_SLIDE = "data-active-slide";
+const ELEMENT_CAROUSEL_DECLARATION = "carousel-image-slider-container";
+const ELEMENT_CAROUSEL_CONTAINER = "carousel-image-slider";
+const ELEMENT_CAROUSEL_SLIDE = "carousel-image-slide";
+const ELEMENT_CAROUSEL_SLIDER_BUTTON = "carousel-slider-button";
+const OVERWRITE_ACTIVE_SLIDE = `.${ELEMENT_CAROUSEL_SLIDE}[${ATTRIBUTE_ACTIVE_SLIDE}]`;
+const SliderButtons = `
+  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} {
+    background-color: ${token.color.white};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 40px;
+    width: 40px;
+    position: absolute;
+    top: 50%;
+    z-index: 99;
+  }
+
+  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type {
+    left: ${token.spacing.sm};
+  }
+
+  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type svg {
+    transform: rotate(180deg);
+  }
+
+  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:last-of-type {
+    right: ${token.spacing.sm};
+  }
+
+  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} svg {
+    fill: ${token.color.black};
+    width: 16px;
+  }
+`;
+const SlideStyles = `
+  .${ELEMENT_CAROUSEL_SLIDE} {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    left: 100%;
+    display: none;
+    transition: transform ${ANIMATION_DURATION}ms ease-in-out;
+  }
+
+  ${OVERWRITE_ACTIVE_SLIDE} {
+    z-index: 99;
+    left: 0;
+    display: block;
+    transform: translateX(0);
+  }
+`;
+const SliderStyles = `
+  .${ELEMENT_CAROUSEL_CONTAINER} {
+    position: relative;
+  }
+`;
+const STYLES_CAROUSEL_IMAGE_ELEMENT = `
+  .${ELEMENT_CAROUSEL_DECLARATION} {
+    overflow: hidden;
+  }
+
+  ${SliderStyles}
+  ${SlideStyles}
+  ${SliderButtons}
+`;
+const CreateButton = ({
+  EventSlide,
+  isRight = true
+}) => {
+  const button = document.createElement("button");
+  button.setAttribute("type", "button");
+  button.classList.add(ELEMENT_CAROUSEL_SLIDER_BUTTON);
+  button.innerHTML = FORWARD_ARROW;
+  if (!isRight) {
+    button.setAttribute("aria-label", "Previous");
+  } else {
+    button.setAttribute("aria-label", "Next");
+  }
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    if (isRight) EventSlide({});
+    if (!isRight) EventSlide({ forward: false });
+    button.disabled = true;
+    setTimeout(() => {
+      button.disabled = false;
+    }, ANIMATION_DURATION + 100);
+  });
+  return button;
+};
+const SetCarouselSize = ({
+  slider,
+  activeSlide,
+  transition = false,
+  maxHeight
+}) => {
+  const windowHeight = window.innerHeight - 48;
+  const children = Array.from(activeSlide.children);
+  const buttons = Array.from(
+    slider.querySelectorAll(`.${ELEMENT_CAROUSEL_SLIDER_BUTTON}`)
+  );
+  const img = activeSlide.querySelector("img");
+  const maxWindowHeight = maxHeight ? maxHeight > windowHeight ? windowHeight : maxHeight : windowHeight;
+  const imageSize = getResponsiveImageSize({
+    image: img,
+    parentNode: slider,
+    maxWindowHeight
+  });
+  const imageContainer = children.find(
+    (child) => child.contains(img)
+  );
+  let size = imageSize;
+  imageContainer.style.height = `${imageSize}px`;
+  if (children.length > 1) {
+    size = children.reduce((acc, currentElement) => {
+      return currentElement.offsetHeight + acc;
+    }, 0);
+  }
+  buttons.forEach((button) => button.style.top = `${imageSize / 2}px`);
+  if (transition) {
+    slider.style.transition = `height ${ANIMATION_DURATION}ms ease-in-out`;
+  } else {
+    slider.style.transition = `none`;
+  }
+  slider.style.height = `${size}px`;
+};
+const SlideActiveSlide = ({
+  slide,
+  isRight = true
+}) => {
+  const transformDirection = isRight ? "translateX(-100%)" : "translateX(100%)";
+  slide.style.transform = `${transformDirection}`;
+  setTimeout(() => {
+    slide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);
+  }, ANIMATION_DURATION);
+  setTimeout(() => {
+    slide.style.transform = "none";
+  }, ANIMATION_DURATION + 100);
+};
+const SlideUpcomingSlide = ({
+  slide,
+  isRight = true
+}) => {
+  const amount = "90";
+  const transformDirection = isRight ? `translateX(-${amount}%)` : `translateX(${amount}%)`;
+  const startingPosition = isRight ? `${amount}%` : `-${amount}%`;
+  slide.style.zIndex = "9";
+  slide.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;
+  slide.style.display = "block";
+  slide.style.left = `${startingPosition}`;
+  setTimeout(() => {
+    slide.style.transform = `${transformDirection}`;
+  }, 1);
+  setTimeout(() => {
+    slide.style.transition = "none";
+    slide.style.left = "0";
+    slide.style.transform = "none";
+    slide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, "");
+  }, ANIMATION_DURATION);
+  setTimeout(() => {
+    slide.removeAttribute("style");
+  }, ANIMATION_DURATION + 100);
+};
+const image = (props) => (() => {
+  const { slides, callback, maxHeight } = props;
+  const container = document.createElement("div");
+  const slider = document.createElement("div");
+  let activeIndex = 0;
+  let styles = STYLES_CAROUSEL_IMAGE_ELEMENT;
+  const EventSlide = ({ forward = true }) => {
+    SlideActiveSlide({ slide: slides[activeIndex], isRight: forward });
+    if (forward) {
+      activeIndex = activeIndex + 1;
+      if (activeIndex >= slides.length) activeIndex = 0;
+    } else {
+      activeIndex = activeIndex - 1;
+      if (activeIndex < 0) activeIndex = slides.length - 1;
+    }
+    SlideUpcomingSlide({ slide: slides[activeIndex], isRight: forward });
+    SetCarouselSize({
+      slider,
+      activeSlide: slides[activeIndex],
+      transition: true,
+      maxHeight
+    });
+    if (callback) callback(activeIndex);
+  };
+  const EventMoveTo = (index) => {
+    SlideActiveSlide({ slide: slides[activeIndex], isRight: true });
+    activeIndex = index;
+    SlideUpcomingSlide({ slide: slides[activeIndex], isRight: true });
+    SetCarouselSize({
+      slider,
+      activeSlide: slides[activeIndex],
+      transition: true,
+      maxHeight
+    });
+    if (callback) callback(activeIndex);
+  };
+  const EventSlideLeft = () => EventSlide({ forward: false });
+  const EventSlideRight = () => EventSlide({ forward: true });
+  const EventSwipe = () => {
+    const swipes = (isrightswipe) => {
+      if (!isrightswipe) {
+        EventSlide({ forward: true });
+      } else {
+        EventSlide({ forward: false });
+      }
+    };
+    CreateEventSwipe({
+      container: slider,
+      callback: swipes
+    });
+  };
+  const EventResize = () => {
+    SetCarouselSize({ slider, activeSlide: slides[activeIndex], maxHeight });
+  };
+  const Load = () => {
+    const setSize = () => {
+      const activeSlide = slides[activeIndex];
+      SetCarouselSize({ slider, activeSlide, maxHeight });
+      activeSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, "");
+    };
+    setTimeout(setSize, 100);
+    setTimeout(setSize, 300);
+  };
+  slider.classList.add(ELEMENT_CAROUSEL_CONTAINER);
+  slides.forEach((slide) => slide.classList.add(ELEMENT_CAROUSEL_SLIDE));
+  slider.append(...slides);
+  slider.appendChild(CreateButton({ EventSlide, isRight: false }));
+  slider.appendChild(
+    CreateButton({
+      EventSlide,
+      isRight: true
+    })
+  );
+  container.classList.add(ELEMENT_CAROUSEL_DECLARATION);
+  container.appendChild(slider);
+  window.addEventListener(
+    "resize",
+    debounce(EventResize, 10)
+  );
+  EventSwipe();
+  return {
+    element: container,
+    styles,
+    events: {
+      Load,
+      EventMoveTo,
+      EventResize,
+      EventSlideLeft,
+      EventSlideRight
+    }
+  };
+})();
+export {
+  image as default
+};
+//# sourceMappingURL=image.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.mjs","sources":["../../../../source/composite/carousel/elements/image.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\n\ntype TypeCarouselImageProps = {\n  slides: HTMLElement[];\n  callback?: (index: number) => void;\n  maxHeight?: number;\n};\n\nconst ANIMATION_DURATION = 500;\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active-slide';\n\nconst ELEMENT_CAROUSEL_DECLARATION = 'carousel-image-slider-container';\nconst ELEMENT_CAROUSEL_CONTAINER = 'carousel-image-slider';\nconst ELEMENT_CAROUSEL_SLIDE = 'carousel-image-slide';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-slider-button';\n\nconst OVERWRITE_ACTIVE_SLIDE = `.${ELEMENT_CAROUSEL_SLIDE}[${ATTRIBUTE_ACTIVE_SLIDE}]`;\n\n// prettier-ignore\nconst SliderButtons = `\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} {\n    background-color: ${token.color.white};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 40px;\n    width: 40px;\n    position: absolute;\n    top: 50%;\n    z-index: 99;\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type {\n    left: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type svg {\n    transform: rotate(180deg);\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:last-of-type {\n    right: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} svg {\n    fill: ${token.color.black};\n    width: 16px;\n  }\n`\n\n// prettier-ignore\nconst SlideStyles = `\n  .${ELEMENT_CAROUSEL_SLIDE} {\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    left: 100%;\n    display: none;\n    transition: transform ${ANIMATION_DURATION}ms ease-in-out;\n  }\n\n  ${OVERWRITE_ACTIVE_SLIDE} {\n    z-index: 99;\n    left: 0;\n    display: block;\n    transform: translateX(0);\n  }\n`\n\n// prettier-ignore\nconst SliderStyles = `\n  .${ELEMENT_CAROUSEL_CONTAINER} {\n    position: relative;\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_ELEMENT = `\n  .${ELEMENT_CAROUSEL_DECLARATION} {\n    overflow: hidden;\n  }\n\n  ${SliderStyles}\n  ${SlideStyles}\n  ${SliderButtons}\n`;\n\nconst CreateButton = ({\n  EventSlide,\n  isRight = true,\n}: {\n  EventSlide: ({ forward }: { forward?: boolean }) => void;\n  isRight?: boolean;\n}) => {\n  const button = document.createElement('button');\n  button.setAttribute('type', 'button');\n  button.classList.add(ELEMENT_CAROUSEL_SLIDER_BUTTON);\n  button.innerHTML = Utility.asset.icon.FORWARD_ARROW;\n\n  if (!isRight) {\n    button.setAttribute('aria-label', 'Previous');\n  } else {\n    button.setAttribute('aria-label', 'Next');\n  }\n\n  button.addEventListener('click', (event) => {\n    event.stopPropagation();\n    if (isRight) EventSlide({});\n    if (!isRight) EventSlide({ forward: false });\n    button.disabled = true;\n\n    setTimeout(() => {\n      button.disabled = false;\n    }, ANIMATION_DURATION + 100);\n  });\n\n  return button;\n};\n\nconst SetCarouselSize = ({\n  slider,\n  activeSlide,\n  transition = false,\n  maxHeight,\n}: {\n  slider: HTMLElement;\n  activeSlide: HTMLElement;\n  transition?: boolean;\n  maxHeight?: number;\n}) => {\n  const windowHeight = window.innerHeight - 48;\n  const children = Array.from(activeSlide.children) as HTMLDivElement[];\n  const buttons = Array.from(\n    slider.querySelectorAll(`.${ELEMENT_CAROUSEL_SLIDER_BUTTON}`),\n  ) as HTMLButtonElement[];\n  const img = activeSlide.querySelector('img') as HTMLImageElement;\n  const maxWindowHeight = maxHeight\n    ? maxHeight > windowHeight\n      ? windowHeight\n      : maxHeight\n    : windowHeight;\n  const imageSize = Utility.theme.assets.getResponsiveImageSize({\n    image: img,\n    parentNode: slider,\n    maxWindowHeight,\n  });\n  const imageContainer = children.find((child) =>\n    child.contains(img),\n  ) as HTMLElement;\n  let size = imageSize;\n\n  imageContainer.style.height = `${imageSize}px`;\n\n  if (children.length > 1) {\n    size = children.reduce((acc, currentElement) => {\n      return currentElement.offsetHeight + acc;\n    }, 0);\n  }\n\n  buttons.forEach((button) => (button.style.top = `${imageSize / 2}px`));\n\n  if (transition) {\n    slider.style.transition = `height ${ANIMATION_DURATION}ms ease-in-out`;\n  } else {\n    slider.style.transition = `none`;\n  }\n  slider.style.height = `${size}px`;\n};\n\nconst SlideActiveSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const transformDirection = isRight ? 'translateX(-100%)' : 'translateX(100%)';\n  slide.style.transform = `${transformDirection}`;\n\n  setTimeout(() => {\n    slide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.style.transform = 'none';\n  }, ANIMATION_DURATION + 100);\n};\n\nconst SlideUpcomingSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const amount = '90';\n  const transformDirection = isRight\n    ? `translateX(-${amount}%)`\n    : `translateX(${amount}%)`;\n  const startingPosition = isRight ? `${amount}%` : `-${amount}%`;\n\n  slide.style.zIndex = '9';\n  slide.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;\n  slide.style.display = 'block';\n  slide.style.left = `${startingPosition}`;\n\n  setTimeout(() => {\n    slide.style.transform = `${transformDirection}`;\n  }, 1);\n\n  setTimeout(() => {\n    slide.style.transition = 'none';\n    slide.style.left = '0';\n    slide.style.transform = 'none';\n    slide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.removeAttribute('style');\n  }, ANIMATION_DURATION + 100);\n};\n\nexport default (props: TypeCarouselImageProps) =>\n  (() => {\n    const { slides, callback, maxHeight } = props;\n    const container = document.createElement('div');\n    const slider = document.createElement('div');\n    let activeIndex = 0;\n    let styles = STYLES_CAROUSEL_IMAGE_ELEMENT;\n\n    const EventSlide = ({ forward = true }: { forward?: boolean }) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: forward });\n\n      if (forward) {\n        activeIndex = activeIndex + 1;\n        if (activeIndex >= slides.length) activeIndex = 0;\n      } else {\n        activeIndex = activeIndex - 1;\n        if (activeIndex < 0) activeIndex = slides.length - 1;\n      }\n\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: forward });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventMoveTo = (index: number) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: true });\n      activeIndex = index;\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: true });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventSlideLeft = () => EventSlide({ forward: false });\n    const EventSlideRight = () => EventSlide({ forward: true });\n\n    const EventSwipe = () => {\n      const swipes = (isrightswipe: Boolean) => {\n        if (!isrightswipe) {\n          EventSlide({ forward: true });\n        } else {\n          EventSlide({ forward: false });\n        }\n      };\n\n      Utility.javascriptEvents.CreateEventSwipe({\n        container: slider,\n        callback: swipes,\n      });\n    };\n\n    const EventResize = () => {\n      SetCarouselSize({ slider, activeSlide: slides[activeIndex], maxHeight });\n    };\n\n    const Load = () => {\n      const setSize = () => {\n        const activeSlide = slides[activeIndex];\n        SetCarouselSize({ slider, activeSlide, maxHeight });\n        activeSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n      };\n      setTimeout(setSize, 100);\n      setTimeout(setSize, 300);\n    };\n\n    slider.classList.add(ELEMENT_CAROUSEL_CONTAINER);\n    slides.forEach((slide) => slide.classList.add(ELEMENT_CAROUSEL_SLIDE));\n    slider.append(...slides);\n    slider.appendChild(CreateButton({ EventSlide, isRight: false }));\n    slider.appendChild(\n      CreateButton({\n        EventSlide,\n        isRight: true,\n      }),\n    );\n\n    container.classList.add(ELEMENT_CAROUSEL_DECLARATION);\n    container.appendChild(slider);\n\n    window.addEventListener(\n      'resize',\n      Utility.performance.debounce(EventResize, 10),\n    );\n    EventSwipe();\n\n    return {\n      element: container,\n      styles,\n      events: {\n        Load,\n        EventMoveTo,\n        EventResize,\n        EventSlideLeft,\n        EventSlideRight,\n      },\n    };\n  })();\n"],"names":["Utility.asset.icon.FORWARD_ARROW","Utility.theme.assets.getResponsiveImageSize","Utility.javascriptEvents.CreateEventSwipe","Utility.performance.debounce"],"mappings":";;;;;;;;AASA,MAAM,qBAAqB;AAC3B,MAAM,yBAAyB;AAE/B,MAAM,+BAA+B;AACrC,MAAM,6BAA6B;AACnC,MAAM,yBAAyB;AAC/B,MAAM,iCAAiC;AAEvC,MAAM,yBAAyB,IAAI,sBAAsB,IAAI,sBAAsB;AAGnF,MAAM,gBAAgB;AAAA,KACjB,8BAA8B;AAAA,wBACX,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAWpC,8BAA8B;AAAA,YACvB,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,KAGvB,8BAA8B;AAAA;AAAA;AAAA;AAAA,KAI9B,8BAA8B;AAAA,aACtB,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,KAGxB,8BAA8B;AAAA,YACvB,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAM7B,MAAM,cAAc;AAAA,KACf,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAMC,kBAAkB;AAAA;AAAA;AAAA,IAG1C,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1B,MAAM,eAAe;AAAA,KAChB,0BAA0B;AAAA;AAAA;AAAA;AAM/B,MAAM,gCAAgC;AAAA,KACjC,4BAA4B;AAAA;AAAA;AAAA;AAAA,IAI7B,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,aAAa;AAAA;AAGjB,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA,UAAU;AACZ,MAGM;AACJ,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,aAAa,QAAQ,QAAQ;AACpC,SAAO,UAAU,IAAI,8BAA8B;AACnD,SAAO,YAAYA;AAEnB,MAAI,CAAC,SAAS;AACZ,WAAO,aAAa,cAAc,UAAU;AAAA,EAC9C,OAAO;AACL,WAAO,aAAa,cAAc,MAAM;AAAA,EAC1C;AAEA,SAAO,iBAAiB,SAAS,CAAC,UAAU;AAC1C,UAAM,gBAAA;AACN,QAAI,QAAS,YAAW,EAAE;AAC1B,QAAI,CAAC,QAAS,YAAW,EAAE,SAAS,OAAO;AAC3C,WAAO,WAAW;AAElB,eAAW,MAAM;AACf,aAAO,WAAW;AAAA,IACpB,GAAG,qBAAqB,GAAG;AAAA,EAC7B,CAAC;AAED,SAAO;AACT;AAEA,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AACF,MAKM;AACJ,QAAM,eAAe,OAAO,cAAc;AAC1C,QAAM,WAAW,MAAM,KAAK,YAAY,QAAQ;AAChD,QAAM,UAAU,MAAM;AAAA,IACpB,OAAO,iBAAiB,IAAI,8BAA8B,EAAE;AAAA,EAAA;AAE9D,QAAM,MAAM,YAAY,cAAc,KAAK;AAC3C,QAAM,kBAAkB,YACpB,YAAY,eACV,eACA,YACF;AACJ,QAAM,YAAYC,uBAA4C;AAAA,IAC5D,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,EAAA,CACD;AACD,QAAM,iBAAiB,SAAS;AAAA,IAAK,CAAC,UACpC,MAAM,SAAS,GAAG;AAAA,EAAA;AAEpB,MAAI,OAAO;AAEX,iBAAe,MAAM,SAAS,GAAG,SAAS;AAE1C,MAAI,SAAS,SAAS,GAAG;AACvB,WAAO,SAAS,OAAO,CAAC,KAAK,mBAAmB;AAC9C,aAAO,eAAe,eAAe;AAAA,IACvC,GAAG,CAAC;AAAA,EACN;AAEA,UAAQ,QAAQ,CAAC,WAAY,OAAO,MAAM,MAAM,GAAG,YAAY,CAAC,IAAK;AAErE,MAAI,YAAY;AACd,WAAO,MAAM,aAAa,UAAU,kBAAkB;AAAA,EACxD,OAAO;AACL,WAAO,MAAM,aAAa;AAAA,EAC5B;AACA,SAAO,MAAM,SAAS,GAAG,IAAI;AAC/B;AAEA,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA,UAAU;AACZ,MAGM;AACJ,QAAM,qBAAqB,UAAU,sBAAsB;AAC3D,QAAM,MAAM,YAAY,GAAG,kBAAkB;AAE7C,aAAW,MAAM;AACf,UAAM,gBAAgB,sBAAsB;AAAA,EAC9C,GAAG,kBAAkB;AAErB,aAAW,MAAM;AACf,UAAM,MAAM,YAAY;AAAA,EAC1B,GAAG,qBAAqB,GAAG;AAC7B;AAEA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA,UAAU;AACZ,MAGM;AACJ,QAAM,SAAS;AACf,QAAM,qBAAqB,UACvB,eAAe,MAAM,OACrB,cAAc,MAAM;AACxB,QAAM,mBAAmB,UAAU,GAAG,MAAM,MAAM,IAAI,MAAM;AAE5D,QAAM,MAAM,SAAS;AACrB,QAAM,MAAM,aAAa,aAAa,kBAAkB;AACxD,QAAM,MAAM,UAAU;AACtB,QAAM,MAAM,OAAO,GAAG,gBAAgB;AAEtC,aAAW,MAAM;AACf,UAAM,MAAM,YAAY,GAAG,kBAAkB;AAAA,EAC/C,GAAG,CAAC;AAEJ,aAAW,MAAM;AACf,UAAM,MAAM,aAAa;AACzB,UAAM,MAAM,OAAO;AACnB,UAAM,MAAM,YAAY;AACxB,UAAM,aAAa,wBAAwB,EAAE;AAAA,EAC/C,GAAG,kBAAkB;AAErB,aAAW,MAAM;AACf,UAAM,gBAAgB,OAAO;AAAA,EAC/B,GAAG,qBAAqB,GAAG;AAC7B;AAEA,MAAA,QAAe,CAAC,WACb,MAAM;AACL,QAAM,EAAE,QAAQ,UAAU,UAAA,IAAc;AACxC,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,MAAI,cAAc;AAClB,MAAI,SAAS;AAEb,QAAM,aAAa,CAAC,EAAE,UAAU,WAAkC;AAChE,qBAAiB,EAAE,OAAO,OAAO,WAAW,GAAG,SAAS,SAAS;AAEjE,QAAI,SAAS;AACX,oBAAc,cAAc;AAC5B,UAAI,eAAe,OAAO,OAAQ,eAAc;AAAA,IAClD,OAAO;AACL,oBAAc,cAAc;AAC5B,UAAI,cAAc,EAAG,eAAc,OAAO,SAAS;AAAA,IACrD;AAEA,uBAAmB,EAAE,OAAO,OAAO,WAAW,GAAG,SAAS,SAAS;AACnE,oBAAgB;AAAA,MACd;AAAA,MACA,aAAa,OAAO,WAAW;AAAA,MAC/B,YAAY;AAAA,MACZ;AAAA,IAAA,CACD;AACD,QAAI,mBAAmB,WAAW;AAAA,EACpC;AAEA,QAAM,cAAc,CAAC,UAAkB;AACrC,qBAAiB,EAAE,OAAO,OAAO,WAAW,GAAG,SAAS,MAAM;AAC9D,kBAAc;AACd,uBAAmB,EAAE,OAAO,OAAO,WAAW,GAAG,SAAS,MAAM;AAChE,oBAAgB;AAAA,MACd;AAAA,MACA,aAAa,OAAO,WAAW;AAAA,MAC/B,YAAY;AAAA,MACZ;AAAA,IAAA,CACD;AACD,QAAI,mBAAmB,WAAW;AAAA,EACpC;AAEA,QAAM,iBAAiB,MAAM,WAAW,EAAE,SAAS,OAAO;AAC1D,QAAM,kBAAkB,MAAM,WAAW,EAAE,SAAS,MAAM;AAE1D,QAAM,aAAa,MAAM;AACvB,UAAM,SAAS,CAAC,iBAA0B;AACxC,UAAI,CAAC,cAAc;AACjB,mBAAW,EAAE,SAAS,MAAM;AAAA,MAC9B,OAAO;AACL,mBAAW,EAAE,SAAS,OAAO;AAAA,MAC/B;AAAA,IACF;AAEAC,qBAA0C;AAAA,MACxC,WAAW;AAAA,MACX,UAAU;AAAA,IAAA,CACX;AAAA,EACH;AAEA,QAAM,cAAc,MAAM;AACxB,oBAAgB,EAAE,QAAQ,aAAa,OAAO,WAAW,GAAG,WAAW;AAAA,EACzE;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,UAAU,MAAM;AACpB,YAAM,cAAc,OAAO,WAAW;AACtC,sBAAgB,EAAE,QAAQ,aAAa,UAAA,CAAW;AAClD,kBAAY,aAAa,wBAAwB,EAAE;AAAA,IACrD;AACA,eAAW,SAAS,GAAG;AACvB,eAAW,SAAS,GAAG;AAAA,EACzB;AAEA,SAAO,UAAU,IAAI,0BAA0B;AAC/C,SAAO,QAAQ,CAAC,UAAU,MAAM,UAAU,IAAI,sBAAsB,CAAC;AACrE,SAAO,OAAO,GAAG,MAAM;AACvB,SAAO,YAAY,aAAa,EAAE,YAAY,SAAS,MAAA,CAAO,CAAC;AAC/D,SAAO;AAAA,IACL,aAAa;AAAA,MACX;AAAA,MACA,SAAS;AAAA,IAAA,CACV;AAAA,EAAA;AAGH,YAAU,UAAU,IAAI,4BAA4B;AACpD,YAAU,YAAY,MAAM;AAE5B,SAAO;AAAA,IACL;AAAA,IACAC,SAA6B,aAAa,EAAE;AAAA,EAAA;AAE9C,aAAA;AAEA,SAAO;AAAA,IACL,SAAS;AAAA,IACT;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;"}

package/dist/composite/carousel/elements/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"names":[],"mappings":"qCA4C4B;IAAE,MAAM,EAAE,gBAAgB,EAAE,CAAA;CAAE;;;;+BAIxB,MAAM;;;AAJxC,wBAwDO"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"names":[],"mappings":"yBA4CgB,YAAY;IAAE,MAAM,EAAE,gBAAgB,EAAE,CAAA;CAAE;;;;+BAIxB,MAAM;;;AAJxC,wBAwDO"}