@universityofmaryland/web-elements-library 1.3.6 → 1.4.0

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

@@ -0,0 +1,469 @@
+import * as Styles 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 { convertPixelStringToNumber } from "../../../utilities/theme/index.mjs";
+const { token } = Styles;
+const fullScreenClassName = Styles.element.action.button.fullScreen.className;
+const ATTRIBUTE_SINGLE_BLOCK = "single";
+const ANIMATION_DURATION = 750;
+const HINT_MULTIPLER_MOBILE_SIZING = 0.2;
+const HINT_MULTIPLER_SIZING = 0.6;
+const IS_SINGLE_BLOCK = `[${ATTRIBUTE_SINGLE_BLOCK}]`;
+const ELEMENT_NAME = "umd-element-animation-carousel-block";
+const ELEMENT_ANIMATION_CAROUSEL_DECLARATION = "animation-carousel-block-declaration";
+const ELEMENT_ANIMATION_CAROUSEL_CONTAINER = "animation-carousel-block-container";
+const ELEMENT_ANIMATION_CAROUSEL_WRAPPER = "animation-carousel-block-wrapper";
+const ELEMENT_ANIMATION_CAROUSEL_BUTTON = `animation-carousel-block-button`;
+const ELEMENT_ANIMATION_CAROUSEL_NEXT = `animation-carousel-block-button-next`;
+const ELEMENT_ANIMATION_CAROUSEL_PREVIOUS = `animation-carousel-block-button-previous`;
+const OVERWRITE_SINGLE_BLOCK_CONTAINER = `.${ELEMENT_ANIMATION_CAROUSEL_CONTAINER}${IS_SINGLE_BLOCK}`;
+const ButtonStyles = `
+  .${ELEMENT_ANIMATION_CAROUSEL_BUTTON} {
+    background-color: ${token.color.red};
+    padding: 10px ${token.spacing.xs};
+    position: absolute;
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    display: none;
+  }
+
+  .${ELEMENT_ANIMATION_CAROUSEL_BUTTON}:disabled {
+    opacity: 0.5;
+  }
+
+  .${ELEMENT_ANIMATION_CAROUSEL_BUTTON} svg {
+    width: 20px;
+    height: 20px;
+    fill: ${token.color.white};
+  }
+
+  .${ELEMENT_ANIMATION_CAROUSEL_PREVIOUS} svg {
+    transform: rotate(180deg);
+  }
+`;
+const ContainerStyles = `
+  .${ELEMENT_ANIMATION_CAROUSEL_CONTAINER} {
+    position: relative;
+  }
+
+  .${ELEMENT_ANIMATION_CAROUSEL_WRAPPER} {
+    overflow: hidden;
+    padding-right: 0;
+    width: 100%;
+  }
+`;
+const STYLES_CAROUSEL_CARDS_ELEMENT = `
+  .${ELEMENT_ANIMATION_CAROUSEL_DECLARATION} {
+    container: ${ELEMENT_NAME} / inline-size;
+    width: 100%;
+  }
+
+  ${ContainerStyles}
+  ${ButtonStyles}
+`;
+const EventScrollCarousel = (props) => {
+  const {
+    GetElements,
+    GetViewOptions,
+    GetSizes,
+    SetLayout,
+    isDirectionRight = true,
+    displayLogic
+  } = props;
+  const carouselSlider = GetElements.slide();
+  const slotContent = Array.from(
+    carouselSlider.querySelectorAll(":scope > *")
+  );
+  const isShowMobileHint = GetViewOptions.shouldShowMobileHint();
+  const isShowHint = GetViewOptions.shouldShowHint();
+  const count = GetViewOptions.showCount();
+  void slotContent[0]?.offsetHeight;
+  const elementSize = slotContent[0]?.offsetWidth || 0;
+  const carouselSize = GetSizes.carouselWidthBasedOnBlock({ count });
+  const { fullScreenCallback } = displayLogic;
+  if (!elementSize) return;
+  const elementSizeWithSpace = elementSize;
+  const temporaryCarouselSize = carouselSize + elementSizeWithSpace;
+  const cloneReferenceEvents = ({
+    orginal,
+    clone
+  }) => {
+    const orginalFullScreen = orginal.querySelector(`.${fullScreenClassName}`);
+    const cloneFullScreen = clone.querySelector(`.${fullScreenClassName}`);
+    if (orginalFullScreen && cloneFullScreen) {
+      const indexAttr = orginalFullScreen.getAttribute("data-index");
+      const index = indexAttr ? parseInt(indexAttr) : 0;
+      cloneFullScreen.addEventListener(
+        "click",
+        () => fullScreenCallback(index)
+      );
+    }
+  };
+  const animateRight = () => {
+    const firstElement = slotContent[0];
+    const clonedElement = firstElement.cloneNode(true);
+    const upcomingElement = slotContent[count];
+    const hintElement = slotContent[count + 1];
+    upcomingElement.style.display = "block";
+    cloneReferenceEvents({ orginal: firstElement, clone: clonedElement });
+    if (hintElement && (isShowMobileHint || isShowHint)) {
+      hintElement.style.display = "block";
+    }
+    carouselSlider.appendChild(clonedElement);
+    clonedElement.style.display = "none";
+    carouselSlider.style.width = `${temporaryCarouselSize}px`;
+    void carouselSlider.offsetHeight;
+    requestAnimationFrame(() => {
+      carouselSlider.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;
+      carouselSlider.style.transform = `translateX(-${elementSizeWithSpace}px)`;
+      setTimeout(() => {
+        carouselSlider.removeChild(firstElement);
+        SetLayout.carouselWidth({ count });
+      }, ANIMATION_DURATION);
+    });
+  };
+  const animateLeft = () => {
+    const lastElement = slotContent[slotContent.length - 1];
+    const removedElement = slotContent[count - 1];
+    const hintElementSibiling = slotContent[count];
+    const clonedElement = lastElement.cloneNode(true);
+    cloneReferenceEvents({ orginal: lastElement, clone: clonedElement });
+    carouselSlider.style.width = `${temporaryCarouselSize}px`;
+    carouselSlider.prepend(clonedElement);
+    clonedElement.style.display = "block";
+    carouselSlider.style.transform = `translateX(-${elementSizeWithSpace}px)`;
+    void carouselSlider.offsetHeight;
+    requestAnimationFrame(() => {
+      carouselSlider.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;
+      carouselSlider.style.transform = `translateX(0)`;
+      setTimeout(() => {
+        carouselSlider.removeChild(lastElement);
+        if (!isShowMobileHint && !isShowHint) {
+          removedElement.style.display = "none";
+        }
+        if (isShowMobileHint || isShowHint) {
+          hintElementSibiling.style.display = "none";
+        }
+        SetLayout.carouselWidth({ count });
+      }, ANIMATION_DURATION);
+    });
+  };
+  isDirectionRight ? animateRight() : animateLeft();
+};
+const EventSwipe = (props) => {
+  const { GetElements } = props;
+  const container = GetElements.container();
+  const swipes = (isrightswipe) => {
+    if (!isrightswipe) {
+      EventScrollCarousel(props);
+    } else {
+      EventScrollCarousel({ ...props, isDirectionRight: false });
+    }
+  };
+  CreateEventSwipe({ container, callback: swipes });
+};
+const ButtonVisibility = (props) => {
+  const { GetElements, GetViewOptions } = props;
+  const prevousButton = GetElements.container().querySelector(
+    `.${ELEMENT_ANIMATION_CAROUSEL_PREVIOUS}`
+  );
+  const nextButton = GetElements.container().querySelector(
+    `.${ELEMENT_ANIMATION_CAROUSEL_NEXT}`
+  );
+  const buttons = [nextButton, prevousButton];
+  const shouldShowLeftButton = GetViewOptions.shouldShowLeftButton();
+  const shouldShowRightButton = GetViewOptions.shouldShowRightButton();
+  const showCount = GetViewOptions.showCount();
+  const cardsTotal = GetElements.blocks().length;
+  const shouldHideLeftButton = showCount > 1 && !shouldShowLeftButton;
+  const shouldHideRightButton = showCount > 1 && !shouldShowRightButton;
+  if (cardsTotal === showCount) {
+    buttons.forEach((button) => button.style.display = "none");
+    return;
+  }
+  if (shouldHideLeftButton) {
+    prevousButton.style.display = "none";
+  } else {
+    prevousButton.style.display = "block";
+  }
+  if (shouldHideRightButton) {
+    nextButton.style.display = "none";
+  } else {
+    nextButton.style.display = "block";
+  }
+};
+const ButtonDisplay = (props) => {
+  const { GetElements } = props;
+  const prevousButton = GetElements.container().querySelector(
+    `.${ELEMENT_ANIMATION_CAROUSEL_PREVIOUS}`
+  );
+  const nextButton = GetElements.container().querySelector(
+    `.${ELEMENT_ANIMATION_CAROUSEL_NEXT}`
+  );
+  prevousButton.setAttribute("aria-label", "Previous");
+  nextButton.setAttribute("aria-label", "Next");
+  ButtonVisibility(props);
+};
+const CreateButton = ({
+  EventMoveForward,
+  EventMoveBackward,
+  isRight = true
+}) => {
+  const button = document.createElement("button");
+  button.setAttribute("type", "button");
+  button.setAttribute("aria-label", "Next");
+  button.classList.add(ELEMENT_ANIMATION_CAROUSEL_BUTTON);
+  button.innerHTML = FORWARD_ARROW;
+  if (isRight) {
+    button.classList.add(ELEMENT_ANIMATION_CAROUSEL_NEXT);
+  }
+  if (!isRight) {
+    button.setAttribute("aria-label", "Previous");
+    button.classList.add(ELEMENT_ANIMATION_CAROUSEL_PREVIOUS);
+  }
+  button.addEventListener("click", () => {
+    if (isRight) EventMoveForward();
+    if (!isRight) EventMoveBackward();
+    button.disabled = true;
+    setTimeout(() => {
+      button.disabled = false;
+    }, ANIMATION_DURATION);
+  });
+  return button;
+};
+const CreateCarouselCardsElement = (props) => (() => {
+  const { slide, shadowRef, blocks: blocks2, overwriteDisplayLogic } = props;
+  const declaration = document.createElement("div");
+  const container = document.createElement("div");
+  const wrapper = document.createElement("div");
+  const displayLogic = {
+    mobileBreakpoint: 550,
+    tabletBreakpoint: 768,
+    desktopBreakpoint: 1e3,
+    mobileCount: 1,
+    tabletCount: 2,
+    desktopCount: 3,
+    maxCount: 4,
+    blockGap: convertPixelStringToNumber(token.spacing.lg),
+    hasRightButton: true,
+    hasLeftButton: true,
+    showMobileHint: true,
+    showHint: true,
+    fullScreenCallback: void 0
+  };
+  let blockWidth = 0;
+  let hasInteractionOccured = false;
+  if (overwriteDisplayLogic) {
+    Object.keys(overwriteDisplayLogic).forEach((key) => {
+      const refKey = key;
+      const refValue = overwriteDisplayLogic[refKey];
+      displayLogic[refKey] = refValue;
+    });
+  }
+  const GetElements = {
+    container: () => container,
+    slide: () => slide,
+    blocks: () => blocks2
+  };
+  const GetViewOptions = {
+    isMobileView: () => {
+      return GetSizes.containerWidth() <= displayLogic.mobileBreakpoint;
+    },
+    isTabletView: () => {
+      return GetSizes.containerWidth() > displayLogic.mobileBreakpoint && GetSizes.containerWidth() <= displayLogic.tabletBreakpoint;
+    },
+    isDesktopView: () => {
+      return GetSizes.containerWidth() > displayLogic.tabletBreakpoint && GetSizes.containerWidth() <= displayLogic.desktopBreakpoint;
+    },
+    isHighView: () => {
+      return GetSizes.containerWidth() > displayLogic.desktopBreakpoint;
+    },
+    showCount: () => {
+      const isMobile = GetViewOptions.isMobileView();
+      const isTablet = GetViewOptions.isTabletView();
+      const isDesktop = GetViewOptions.isDesktopView();
+      const isHighDef = GetViewOptions.isHighView();
+      let count = 1;
+      if (isMobile) count = displayLogic.mobileCount;
+      if (isTablet) count = displayLogic.tabletCount;
+      if (isDesktop) count = displayLogic.desktopCount;
+      if (isHighDef) count = displayLogic.maxCount;
+      return count;
+    },
+    shouldShowMobileHint: () => {
+      const isMobileView = GetViewOptions.isMobileView();
+      const isShowMobileHint = displayLogic.showMobileHint;
+      const isShowHint = displayLogic.showHint;
+      return isShowMobileHint && isMobileView || isShowHint && isMobileView;
+    },
+    shouldShowHint: () => {
+      return displayLogic.showHint && !GetViewOptions.isMobileView();
+    },
+    shouldShowLeftButton: () => {
+      return displayLogic.hasLeftButton || hasInteractionOccured;
+    },
+    shouldShowRightButton: () => {
+      return displayLogic.hasRightButton || hasInteractionOccured;
+    }
+  };
+  const GetSizes = {
+    mobileHintWidth: ({ count }) => {
+      const containerWidth = container.offsetWidth;
+      return containerWidth / count * HINT_MULTIPLER_MOBILE_SIZING;
+    },
+    hintWidth: ({ count }) => {
+      const containerWidth = container.offsetWidth;
+      return containerWidth / count * HINT_MULTIPLER_SIZING;
+    },
+    carouselWidthBasedOnBlock: ({ count }) => {
+      const elementSize = blockWidth;
+      const isShowMobileHint = GetViewOptions.shouldShowMobileHint();
+      const isShowHint = GetViewOptions.shouldShowHint();
+      if (!elementSize) return window.innerWidth;
+      if (isShowMobileHint || isShowHint) {
+        return elementSize * (count + 1);
+      }
+      return elementSize * count;
+    },
+    containerWidth: () => {
+      return container.offsetWidth;
+    }
+  };
+  const SetLayout = {
+    blockWidth: () => blocks2.forEach((block) => block.style.width = `${blockWidth}px`),
+    carouselWidth: ({ count }) => {
+      const elementSize = GetSizes.carouselWidthBasedOnBlock({ count });
+      slide.style.width = `${elementSize}px`;
+      slide.style.transition = "none";
+      slide.style.transform = "translateX(0)";
+    },
+    blockDisplay: ({ count }) => {
+      const containerBlocks = Array.from(
+        slide.querySelectorAll(":scope > *")
+      );
+      const isHint = GetViewOptions.shouldShowHint();
+      const isShowMobileHint = GetViewOptions.shouldShowMobileHint();
+      containerBlocks.forEach((block, index) => {
+        if (index >= count) {
+          block.style.display = "none";
+        } else {
+          block.style.display = "block";
+        }
+      });
+      if (isShowMobileHint) containerBlocks[1].style.display = "block";
+      if (isHint) containerBlocks[count].style.display = "block";
+    }
+  };
+  const Event = {
+    helpers: {
+      displayLogic,
+      GetElements,
+      GetViewOptions,
+      GetSizes,
+      SetLayout
+    },
+    resize: () => {
+      const count = GetViewOptions.showCount();
+      const cacluateBlockWidth = ({ count: count2 }) => {
+        const isShowMobileHint = GetViewOptions.shouldShowMobileHint();
+        const isShowHint = GetViewOptions.shouldShowHint();
+        const containerWidth = container.offsetWidth;
+        if (isShowMobileHint || isShowHint) {
+          let hintElementSize = GetSizes.hintWidth({ count: count2 });
+          if (isShowMobileHint) {
+            hintElementSize = GetSizes.mobileHintWidth({ count: count2 });
+          }
+          blockWidth = (containerWidth - hintElementSize) / count2;
+        } else {
+          blockWidth = containerWidth / count2;
+        }
+      };
+      cacluateBlockWidth({ count });
+      SetLayout.blockWidth();
+      SetLayout.blockDisplay({ count });
+      SetLayout.carouselWidth({ count });
+      ButtonDisplay({ ...Event.helpers });
+      if (count === 1) {
+        container.setAttribute(ATTRIBUTE_SINGLE_BLOCK, "");
+      } else {
+        container.removeAttribute(ATTRIBUTE_SINGLE_BLOCK);
+      }
+    },
+    load: () => {
+      slide.style.display = "flex";
+      slide.style.gap = `${displayLogic.blockGap}px`;
+      Event.resize();
+      EventSwipe({ ...Event.helpers });
+    },
+    forward: () => {
+      hasInteractionOccured = true;
+      EventScrollCarousel({
+        ...Event.helpers
+      });
+      ButtonVisibility({ ...Event.helpers });
+    },
+    backward: () => {
+      hasInteractionOccured = true;
+      EventScrollCarousel({
+        ...Event.helpers,
+        isDirectionRight: false
+      });
+      ButtonVisibility({ ...Event.helpers });
+    }
+  };
+  container.appendChild(
+    CreateButton({
+      EventMoveForward: Event.forward,
+      EventMoveBackward: Event.backward
+    })
+  );
+  container.appendChild(
+    CreateButton({
+      EventMoveForward: Event.forward,
+      EventMoveBackward: Event.backward,
+      isRight: false
+    })
+  );
+  wrapper.classList.add(ELEMENT_ANIMATION_CAROUSEL_WRAPPER);
+  if (shadowRef) {
+    wrapper.appendChild(shadowRef);
+  } else {
+    blocks2.forEach((block) => slide.appendChild(block));
+    wrapper.appendChild(slide);
+  }
+  container.classList.add(ELEMENT_ANIMATION_CAROUSEL_CONTAINER);
+  container.appendChild(wrapper);
+  declaration.classList.add(ELEMENT_ANIMATION_CAROUSEL_DECLARATION);
+  declaration.appendChild(container);
+  window.addEventListener(
+    "resize",
+    debounce(Event.resize, 30)
+  );
+  return {
+    element: declaration,
+    events: {
+      resize: Event.resize,
+      load: Event.load
+    }
+  };
+})();
+const blocks = {
+  CreateElement: CreateCarouselCardsElement,
+  Styles: STYLES_CAROUSEL_CARDS_ELEMENT,
+  Elements: {
+    declaration: ELEMENT_ANIMATION_CAROUSEL_DECLARATION,
+    container: ELEMENT_ANIMATION_CAROUSEL_CONTAINER,
+    containerSingleBlock: OVERWRITE_SINGLE_BLOCK_CONTAINER,
+    button: ELEMENT_ANIMATION_CAROUSEL_BUTTON,
+    nextButton: ELEMENT_ANIMATION_CAROUSEL_NEXT,
+    previousButton: ELEMENT_ANIMATION_CAROUSEL_PREVIOUS
+  }
+};
+export {
+  blocks as default
+};
+//# sourceMappingURL=blocks.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"blocks.mjs","sources":["../../../../source/composite/carousel/elements/blocks.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\n\ntype TypeDisplayLogic = {\n  mobileCount: number;\n  mobileBreakpoint: number;\n  tabletCount: number;\n  tabletBreakpoint: number;\n  desktopCount: number;\n  desktopBreakpoint: number;\n  maxCount: number;\n  blockGap: number;\n  hasRightButton: boolean;\n  hasLeftButton: boolean;\n  showMobileHint: boolean;\n  showHint: boolean;\n  fullScreenCallback?: (index: number) => void;\n};\n\ntype TypeDisplayLogicProps = Partial<TypeDisplayLogic>;\n\ntype TypeAnimationCarouselBlockProps = {\n  slide: HTMLElement;\n  shadowRef?: HTMLElement;\n  blocks: HTMLElement[];\n  overwriteDisplayLogic?: TypeDisplayLogicProps;\n};\n\ntype TypeHelpers = {\n  displayLogic: Record<string, any>;\n  GetElements: {\n    container: () => HTMLDivElement;\n    slide: () => HTMLElement;\n    blocks: () => HTMLElement[];\n  };\n  GetViewOptions: {\n    isTabletView: () => boolean;\n    showCount: () => number;\n    shouldShowMobileHint: () => boolean;\n    shouldShowHint: () => boolean;\n    shouldShowLeftButton: () => boolean;\n    shouldShowRightButton: () => boolean;\n  };\n  GetSizes: {\n    carouselWidthBasedOnBlock: ({ count }: { count: number }) => number;\n  };\n  SetLayout: {\n    blockWidth: ({ count }: { count: number }) => void;\n    carouselWidth: ({ count }: { count: number }) => void;\n  };\n};\n\ntype TypeEventScroll = TypeHelpers & {\n  isDirectionRight?: boolean;\n};\n\nconst { token } = Styles;\nconst fullScreenClassName = Styles.element.action.button.fullScreen.className;\n\nconst ATTRIBUTE_SINGLE_BLOCK = 'single';\nconst ANIMATION_DURATION = 750;\nconst HINT_MULTIPLER_MOBILE_SIZING = 0.2;\nconst HINT_MULTIPLER_SIZING = 0.6;\n\nconst IS_SINGLE_BLOCK = `[${ATTRIBUTE_SINGLE_BLOCK}]`;\n\nconst ELEMENT_NAME = 'umd-element-animation-carousel-block';\nconst ELEMENT_ANIMATION_CAROUSEL_DECLARATION =\n  'animation-carousel-block-declaration';\nconst ELEMENT_ANIMATION_CAROUSEL_CONTAINER =\n  'animation-carousel-block-container';\nconst ELEMENT_ANIMATION_CAROUSEL_WRAPPER = 'animation-carousel-block-wrapper';\nconst ELEMENT_ANIMATION_CAROUSEL_BUTTON = `animation-carousel-block-button`;\nconst ELEMENT_ANIMATION_CAROUSEL_NEXT = `animation-carousel-block-button-next`;\nconst ELEMENT_ANIMATION_CAROUSEL_PREVIOUS = `animation-carousel-block-button-previous`;\n\nconst OVERWRITE_SINGLE_BLOCK_CONTAINER = `.${ELEMENT_ANIMATION_CAROUSEL_CONTAINER}${IS_SINGLE_BLOCK}`;\n\n// prettier-ignore\nconst ButtonStyles = `\n  .${ELEMENT_ANIMATION_CAROUSEL_BUTTON} {\n    background-color: ${token.color.red};\n    padding: 10px ${token.spacing.xs};\n    position: absolute;\n    z-index: 9999;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    display: none;\n  }\n\n  .${ELEMENT_ANIMATION_CAROUSEL_BUTTON}:disabled {\n    opacity: 0.5;\n  }\n\n  .${ELEMENT_ANIMATION_CAROUSEL_BUTTON} svg {\n    width: 20px;\n    height: 20px;\n    fill: ${token.color.white};\n  }\n\n  .${ELEMENT_ANIMATION_CAROUSEL_PREVIOUS} svg {\n    transform: rotate(180deg);\n  }\n`;\n\n// prettier-ignore\nconst ContainerStyles = `\n  .${ELEMENT_ANIMATION_CAROUSEL_CONTAINER} {\n    position: relative;\n  }\n\n  .${ELEMENT_ANIMATION_CAROUSEL_WRAPPER} {\n    overflow: hidden;\n    padding-right: 0;\n    width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_CARDS_ELEMENT = `\n  .${ELEMENT_ANIMATION_CAROUSEL_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n    width: 100%;\n  }\n\n  ${ContainerStyles}\n  ${ButtonStyles}\n`;\n\nconst EventScrollCarousel = (props: TypeEventScroll) => {\n  const {\n    GetElements,\n    GetViewOptions,\n    GetSizes,\n    SetLayout,\n    isDirectionRight = true,\n    displayLogic,\n  } = props;\n  const carouselSlider = GetElements.slide();\n  const slotContent = Array.from(\n    carouselSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n\n  const isShowMobileHint = GetViewOptions.shouldShowMobileHint();\n  const isShowHint = GetViewOptions.shouldShowHint();\n  const count = GetViewOptions.showCount();\n\n  // Force layout recalculation to get accurate measurements\n  void slotContent[0]?.offsetHeight;\n  const elementSize = slotContent[0]?.offsetWidth || 0;\n  const carouselSize = GetSizes.carouselWidthBasedOnBlock({ count });\n  const { fullScreenCallback } = displayLogic;\n\n  if (!elementSize) return;\n\n  const elementSizeWithSpace = elementSize;\n  const temporaryCarouselSize = carouselSize + elementSizeWithSpace;\n\n  const cloneReferenceEvents = ({\n    orginal,\n    clone,\n  }: {\n    orginal: HTMLElement;\n    clone: HTMLElement;\n  }) => {\n    const orginalFullScreen = orginal.querySelector(`.${fullScreenClassName}`);\n    const cloneFullScreen = clone.querySelector(`.${fullScreenClassName}`);\n\n    if (orginalFullScreen && cloneFullScreen) {\n      const indexAttr = orginalFullScreen.getAttribute('data-index');\n      const index = indexAttr ? parseInt(indexAttr) : 0;\n      cloneFullScreen.addEventListener('click', () =>\n        fullScreenCallback(index),\n      );\n    }\n  };\n\n  const animateRight = () => {\n    const firstElement = slotContent[0];\n    const clonedElement = firstElement.cloneNode(true) as HTMLDivElement;\n    const upcomingElement = slotContent[count];\n    const hintElement = slotContent[count + 1];\n\n    // Prepare elements before animation\n    upcomingElement.style.display = 'block';\n    cloneReferenceEvents({ orginal: firstElement, clone: clonedElement });\n\n    if (hintElement && (isShowMobileHint || isShowHint)) {\n      hintElement.style.display = 'block';\n    }\n\n    // Add clone but keep it hidden initially\n    carouselSlider.appendChild(clonedElement);\n    clonedElement.style.display = 'none';\n\n    // Set width first and force layout recalculation\n    carouselSlider.style.width = `${temporaryCarouselSize}px`;\n    void carouselSlider.offsetHeight;\n\n    // Use requestAnimationFrame for smoother animation timing\n    requestAnimationFrame(() => {\n      carouselSlider.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;\n      carouselSlider.style.transform = `translateX(-${elementSizeWithSpace}px)`;\n\n      setTimeout(() => {\n        carouselSlider.removeChild(firstElement);\n        SetLayout.carouselWidth({ count });\n      }, ANIMATION_DURATION);\n    });\n  };\n\n  const animateLeft = () => {\n    const lastElement = slotContent[slotContent.length - 1];\n    const removedElement = slotContent[count - 1];\n    const hintElementSibiling = slotContent[count];\n    const clonedElement = lastElement.cloneNode(true) as HTMLDivElement;\n\n    // Prepare clone with proper event handlers\n    cloneReferenceEvents({ orginal: lastElement, clone: clonedElement });\n\n    // Set width first before DOM manipulation\n    carouselSlider.style.width = `${temporaryCarouselSize}px`;\n\n    // Add cloned element at the beginning\n    carouselSlider.prepend(clonedElement);\n    clonedElement.style.display = 'block';\n\n    // Set initial transform position\n    carouselSlider.style.transform = `translateX(-${elementSizeWithSpace}px)`;\n\n    // Force layout recalculation\n    void carouselSlider.offsetHeight;\n\n    // Use requestAnimationFrame for smoother animation timing\n    requestAnimationFrame(() => {\n      carouselSlider.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;\n      carouselSlider.style.transform = `translateX(0)`;\n\n      setTimeout(() => {\n        carouselSlider.removeChild(lastElement);\n\n        if (!isShowMobileHint && !isShowHint) {\n          removedElement.style.display = 'none';\n        }\n\n        if (isShowMobileHint || isShowHint) {\n          hintElementSibiling.style.display = 'none';\n        }\n\n        SetLayout.carouselWidth({ count });\n      }, ANIMATION_DURATION);\n    });\n  };\n\n  isDirectionRight ? animateRight() : animateLeft();\n};\n\nconst EventSwipe = (props: TypeHelpers) => {\n  const { GetElements } = props;\n  const container = GetElements.container();\n\n  const swipes = (isrightswipe: Boolean) => {\n    if (!isrightswipe) {\n      EventScrollCarousel(props);\n    } else {\n      EventScrollCarousel({ ...props, isDirectionRight: false });\n    }\n  };\n\n  Utility.javascriptEvents.CreateEventSwipe({ container, callback: swipes });\n};\n\nconst ButtonVisibility = (props: TypeHelpers) => {\n  const { GetElements, GetViewOptions } = props;\n  const prevousButton = GetElements.container().querySelector(\n    `.${ELEMENT_ANIMATION_CAROUSEL_PREVIOUS}`,\n  ) as HTMLButtonElement;\n  const nextButton = GetElements.container().querySelector(\n    `.${ELEMENT_ANIMATION_CAROUSEL_NEXT}`,\n  ) as HTMLButtonElement;\n  const buttons = [nextButton, prevousButton];\n\n  const shouldShowLeftButton = GetViewOptions.shouldShowLeftButton();\n  const shouldShowRightButton = GetViewOptions.shouldShowRightButton();\n  const showCount = GetViewOptions.showCount();\n  const cardsTotal = GetElements.blocks().length;\n  const shouldHideLeftButton = showCount > 1 && !shouldShowLeftButton;\n  const shouldHideRightButton = showCount > 1 && !shouldShowRightButton;\n\n  if (cardsTotal === showCount) {\n    buttons.forEach((button) => (button.style.display = 'none'));\n    return;\n  }\n\n  if (shouldHideLeftButton) {\n    prevousButton.style.display = 'none';\n  } else {\n    prevousButton.style.display = 'block';\n  }\n\n  if (shouldHideRightButton) {\n    nextButton.style.display = 'none';\n  } else {\n    nextButton.style.display = 'block';\n  }\n};\n\nconst ButtonDisplay = (props: TypeHelpers) => {\n  const { GetElements } = props;\n  const prevousButton = GetElements.container().querySelector(\n    `.${ELEMENT_ANIMATION_CAROUSEL_PREVIOUS}`,\n  ) as HTMLButtonElement;\n  const nextButton = GetElements.container().querySelector(\n    `.${ELEMENT_ANIMATION_CAROUSEL_NEXT}`,\n  ) as HTMLButtonElement;\n\n  prevousButton.setAttribute('aria-label', 'Previous');\n  nextButton.setAttribute('aria-label', 'Next');\n\n  ButtonVisibility(props);\n};\n\nconst CreateButton = ({\n  EventMoveForward,\n  EventMoveBackward,\n  isRight = true,\n}: {\n  EventMoveForward: () => void;\n  EventMoveBackward: () => void;\n  isRight?: boolean;\n}) => {\n  const button = document.createElement('button');\n  button.setAttribute('type', 'button');\n  button.setAttribute('aria-label', 'Next');\n  button.classList.add(ELEMENT_ANIMATION_CAROUSEL_BUTTON);\n  button.innerHTML = Utility.asset.icon.FORWARD_ARROW;\n\n  if (isRight) {\n    button.classList.add(ELEMENT_ANIMATION_CAROUSEL_NEXT);\n  }\n\n  if (!isRight) {\n    button.setAttribute('aria-label', 'Previous');\n    button.classList.add(ELEMENT_ANIMATION_CAROUSEL_PREVIOUS);\n  }\n\n  button.addEventListener('click', () => {\n    if (isRight) EventMoveForward();\n    if (!isRight) EventMoveBackward();\n    button.disabled = true;\n\n    setTimeout(() => {\n      button.disabled = false;\n    }, ANIMATION_DURATION);\n  });\n\n  return button;\n};\n\nconst CreateCarouselCardsElement = (props: TypeAnimationCarouselBlockProps) =>\n  (() => {\n    const { slide, shadowRef, blocks, overwriteDisplayLogic } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n    const displayLogic: TypeDisplayLogic = {\n      mobileBreakpoint: 550,\n      tabletBreakpoint: 768,\n      desktopBreakpoint: 1000,\n      mobileCount: 1,\n      tabletCount: 2,\n      desktopCount: 3,\n      maxCount: 4,\n      blockGap: Utility.theme.convertPixelStringToNumber(token.spacing.lg),\n      hasRightButton: true,\n      hasLeftButton: true,\n      showMobileHint: true,\n      showHint: true,\n      fullScreenCallback: undefined,\n    };\n    let blockWidth = 0;\n    let hasInteractionOccured = false;\n\n    if (overwriteDisplayLogic) {\n      Object.keys(overwriteDisplayLogic).forEach((key) => {\n        const refKey = key as keyof typeof displayLogic;\n        const refValue = overwriteDisplayLogic[refKey] as never;\n\n        displayLogic[refKey] = refValue;\n      });\n    }\n\n    const GetElements = {\n      container: () => container,\n      slide: () => slide,\n      blocks: () => blocks,\n    };\n\n    const GetViewOptions = {\n      isMobileView: () => {\n        return GetSizes.containerWidth() <= displayLogic.mobileBreakpoint;\n      },\n      isTabletView: () => {\n        return (\n          GetSizes.containerWidth() > displayLogic.mobileBreakpoint &&\n          GetSizes.containerWidth() <= displayLogic.tabletBreakpoint\n        );\n      },\n\n      isDesktopView: () => {\n        return (\n          GetSizes.containerWidth() > displayLogic.tabletBreakpoint &&\n          GetSizes.containerWidth() <= displayLogic.desktopBreakpoint\n        );\n      },\n      isHighView: () => {\n        return GetSizes.containerWidth() > displayLogic.desktopBreakpoint;\n      },\n      showCount: () => {\n        const isMobile = GetViewOptions.isMobileView();\n        const isTablet = GetViewOptions.isTabletView();\n        const isDesktop = GetViewOptions.isDesktopView();\n        const isHighDef = GetViewOptions.isHighView();\n        let count = 1;\n\n        if (isMobile) count = displayLogic.mobileCount;\n        if (isTablet) count = displayLogic.tabletCount;\n        if (isDesktop) count = displayLogic.desktopCount;\n        if (isHighDef) count = displayLogic.maxCount;\n\n        return count;\n      },\n      shouldShowMobileHint: () => {\n        const isMobileView = GetViewOptions.isMobileView();\n        const isShowMobileHint = displayLogic.showMobileHint;\n        const isShowHint = displayLogic.showHint;\n\n        return (\n          (isShowMobileHint && isMobileView) || (isShowHint && isMobileView)\n        );\n      },\n      shouldShowHint: () => {\n        return displayLogic.showHint && !GetViewOptions.isMobileView();\n      },\n      shouldShowLeftButton: () => {\n        return displayLogic.hasLeftButton || hasInteractionOccured;\n      },\n      shouldShowRightButton: () => {\n        return displayLogic.hasRightButton || hasInteractionOccured;\n      },\n    };\n\n    const GetSizes = {\n      mobileHintWidth: ({ count }: { count: number }) => {\n        const containerWidth = container.offsetWidth;\n        return (containerWidth / count) * HINT_MULTIPLER_MOBILE_SIZING;\n      },\n      hintWidth: ({ count }: { count: number }) => {\n        const containerWidth = container.offsetWidth;\n        return (containerWidth / count) * HINT_MULTIPLER_SIZING;\n      },\n      carouselWidthBasedOnBlock: ({ count }: { count: number }) => {\n        const elementSize = blockWidth;\n        const isShowMobileHint = GetViewOptions.shouldShowMobileHint();\n        const isShowHint = GetViewOptions.shouldShowHint();\n\n        if (!elementSize) return window.innerWidth;\n\n        if (isShowMobileHint || isShowHint) {\n          return elementSize * (count + 1);\n        }\n\n        return elementSize * count;\n      },\n      containerWidth: () => {\n        return container.offsetWidth;\n      },\n    };\n\n    const SetLayout = {\n      blockWidth: () =>\n        blocks.forEach((block) => (block.style.width = `${blockWidth}px`)),\n      carouselWidth: ({ count }: { count: number }) => {\n        const elementSize = GetSizes.carouselWidthBasedOnBlock({ count });\n\n        slide.style.width = `${elementSize}px`;\n        slide.style.transition = 'none';\n        slide.style.transform = 'translateX(0)';\n      },\n      blockDisplay: ({ count }: { count: number }) => {\n        const containerBlocks = Array.from(\n          slide.querySelectorAll(':scope > *'),\n        ) as HTMLElement[];\n        const isHint = GetViewOptions.shouldShowHint();\n        const isShowMobileHint = GetViewOptions.shouldShowMobileHint();\n\n        containerBlocks.forEach((block, index) => {\n          if (index >= count) {\n            block.style.display = 'none';\n          } else {\n            block.style.display = 'block';\n          }\n        });\n\n        if (isShowMobileHint) containerBlocks[1].style.display = 'block';\n        if (isHint) containerBlocks[count].style.display = 'block';\n      },\n    };\n\n    const Event = {\n      helpers: {\n        displayLogic,\n        GetElements,\n        GetViewOptions,\n        GetSizes,\n        SetLayout,\n      },\n      resize: () => {\n        const count = GetViewOptions.showCount();\n        const cacluateBlockWidth = ({ count }: { count: number }) => {\n          const isShowMobileHint = GetViewOptions.shouldShowMobileHint();\n          const isShowHint = GetViewOptions.shouldShowHint();\n          const containerWidth = container.offsetWidth;\n\n          if (isShowMobileHint || isShowHint) {\n            let hintElementSize = GetSizes.hintWidth({ count });\n\n            if (isShowMobileHint) {\n              hintElementSize = GetSizes.mobileHintWidth({ count });\n            }\n\n            blockWidth = (containerWidth - hintElementSize) / count;\n          } else {\n            blockWidth = containerWidth / count;\n          }\n        };\n\n        cacluateBlockWidth({ count });\n        SetLayout.blockWidth();\n        SetLayout.blockDisplay({ count });\n        SetLayout.carouselWidth({ count });\n        ButtonDisplay({ ...Event.helpers });\n\n        if (count === 1) {\n          container.setAttribute(ATTRIBUTE_SINGLE_BLOCK, '');\n        } else {\n          container.removeAttribute(ATTRIBUTE_SINGLE_BLOCK);\n        }\n      },\n      load: () => {\n        slide.style.display = 'flex';\n        slide.style.gap = `${displayLogic.blockGap}px`;\n\n        Event.resize();\n        EventSwipe({ ...Event.helpers });\n      },\n      forward: () => {\n        hasInteractionOccured = true;\n        EventScrollCarousel({\n          ...Event.helpers,\n        });\n        ButtonVisibility({ ...Event.helpers });\n      },\n      backward: () => {\n        hasInteractionOccured = true;\n        EventScrollCarousel({\n          ...Event.helpers,\n          isDirectionRight: false,\n        });\n        ButtonVisibility({ ...Event.helpers });\n      },\n    };\n\n    container.appendChild(\n      CreateButton({\n        EventMoveForward: Event.forward,\n        EventMoveBackward: Event.backward,\n      }),\n    );\n\n    container.appendChild(\n      CreateButton({\n        EventMoveForward: Event.forward,\n        EventMoveBackward: Event.backward,\n        isRight: false,\n      }),\n    );\n\n    wrapper.classList.add(ELEMENT_ANIMATION_CAROUSEL_WRAPPER);\n\n    if (shadowRef) {\n      wrapper.appendChild(shadowRef);\n    } else {\n      blocks.forEach((block) => slide.appendChild(block));\n      wrapper.appendChild(slide);\n    }\n\n    container.classList.add(ELEMENT_ANIMATION_CAROUSEL_CONTAINER);\n    container.appendChild(wrapper);\n\n    declaration.classList.add(ELEMENT_ANIMATION_CAROUSEL_DECLARATION);\n    declaration.appendChild(container);\n\n    window.addEventListener(\n      'resize',\n      Utility.performance.debounce(Event.resize, 30),\n    );\n\n    return {\n      element: declaration,\n      events: {\n        resize: Event.resize,\n        load: Event.load,\n      },\n    };\n  })();\n\nexport default {\n  CreateElement: CreateCarouselCardsElement,\n  Styles: STYLES_CAROUSEL_CARDS_ELEMENT,\n  Elements: {\n    declaration: ELEMENT_ANIMATION_CAROUSEL_DECLARATION,\n    container: ELEMENT_ANIMATION_CAROUSEL_CONTAINER,\n    containerSingleBlock: OVERWRITE_SINGLE_BLOCK_CONTAINER,\n    button: ELEMENT_ANIMATION_CAROUSEL_BUTTON,\n    nextButton: ELEMENT_ANIMATION_CAROUSEL_NEXT,\n    previousButton: ELEMENT_ANIMATION_CAROUSEL_PREVIOUS,\n  },\n};\n"],"names":["Utility.javascriptEvents.CreateEventSwipe","Utility.asset.icon.FORWARD_ARROW","blocks","Utility.theme.convertPixelStringToNumber","count","Utility.performance.debounce"],"mappings":"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"}

package/dist/composite/carousel/elements/full-screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"full-screen.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"names":[],"mappings":"AAIA,KAAK,wBAAwB,GAAG;IAC9B,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;gDA2BqC,wBAAwB;;;;;;;;AAA/D,wBAuBE"}
+{"version":3,"file":"full-screen.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"names":[],"mappings":"AAIA,KAAK,wBAAwB,GAAG;IAC9B,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;yBA2Bc,uBAAuB,wBAAwB;;;;;;;;AAA/D,wBAuBE"}

package/dist/composite/carousel/elements/full-screen.js

@@ -0,0 +1,60 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const icons = require("../../../utilities/assets/icons.js");
+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");
+require("../../../atomic/layout/block/stacked.js");
+const modal = 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 ELEMENT_CLOSE_BUTTON = "carousel-fixed-screen-button";
+const STYLES_FIXED_FULL_SCREEN = `
+
+
+  .${ELEMENT_CLOSE_BUTTON} {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+
+  @media (${Styles.token.media.queries.tablet.min}) {
+    .${ELEMENT_CLOSE_BUTTON} {
+      top: calc(10vh - 22px);
+      right: calc(10vw - 22px);
+    }
+  }
+
+  .${ELEMENT_CLOSE_BUTTON} > svg {
+    fill: ${Styles.token.color.white};
+    width: 20px;
+    height: 20px;
+  }
+`;
+const fullScreen = ({ content, callback }) => {
+  const modal$1 = modal.createModal({ content, callback });
+  const closeButton = document.createElement("button");
+  let styles = STYLES_FIXED_FULL_SCREEN;
+  styles += modal$1.styles;
+  closeButton.setAttribute("type", "button");
+  closeButton.setAttribute("aria-label", "Close");
+  closeButton.classList.add(ELEMENT_CLOSE_BUTTON);
+  closeButton.innerHTML = icons.X;
+  closeButton.addEventListener("click", modal$1.events.hide);
+  modal$1.element.appendChild(closeButton);
+  return {
+    element: modal$1.element,
+    styles,
+    events: {
+      show: modal$1.events.show,
+      hide: modal$1.events.hide
+    }
+  };
+};
+module.exports = fullScreen;
+//# sourceMappingURL=full-screen.js.map

package/dist/composite/carousel/elements/full-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"full-screen.js","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport { layout } from 'atomic';\nimport * as Utility from 'utilities';\n\ntype TypeFixedFullScreenProps = {\n  content: HTMLElement;\n  callback: () => void;\n};\n\nconst ELEMENT_CLOSE_BUTTON = 'carousel-fixed-screen-button';\n\nconst STYLES_FIXED_FULL_SCREEN = `\n\n\n  .${ELEMENT_CLOSE_BUTTON} {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    .${ELEMENT_CLOSE_BUTTON} {\n      top: calc(10vh - 22px);\n      right: calc(10vw - 22px);\n    }\n  }\n\n  .${ELEMENT_CLOSE_BUTTON} > svg {\n    fill: ${token.color.white};\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nexport default ({ content, callback }: TypeFixedFullScreenProps) => {\n  const modal = layout.overlay.modal({ content, callback });\n  const closeButton = document.createElement('button');\n  let styles = STYLES_FIXED_FULL_SCREEN;\n\n  styles += modal.styles;\n\n  closeButton.setAttribute('type', 'button');\n  closeButton.setAttribute('aria-label', 'Close');\n  closeButton.classList.add(ELEMENT_CLOSE_BUTTON);\n  closeButton.innerHTML = Utility.asset.icon.X;\n  closeButton.addEventListener('click', modal.events.hide);\n\n  modal.element.appendChild(closeButton);\n\n  return {\n    element: modal.element,\n    styles,\n    events: {\n      show: modal.events.show,\n      hide: modal.events.hide,\n    },\n  };\n};\n"],"names":["token","modal","layout.overlay.modal","Utility.asset.icon.X"],"mappings":";;;;;;;;;;;;;;;AASA,MAAM,uBAAuB;AAE7B,MAAM,2BAA2B;AAAA;AAAA;AAAA,KAG5B,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMbA,OAAAA,MAAM,MAAM,QAAQ,OAAO,GAAG;AAAA,OACnC,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,oBAAoB;AAAA,YACbA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAA,aAAe,CAAC,EAAE,SAAS,eAAyC;AAClE,QAAMC,UAAQC,MAAAA,YAAqB,EAAE,SAAS,UAAU;AACxD,QAAM,cAAc,SAAS,cAAc,QAAQ;AACnD,MAAI,SAAS;AAEb,YAAUD,QAAM;AAEhB,cAAY,aAAa,QAAQ,QAAQ;AACzC,cAAY,aAAa,cAAc,OAAO;AAC9C,cAAY,UAAU,IAAI,oBAAoB;AAC9C,cAAY,YAAYE,MAAAA;AACxB,cAAY,iBAAiB,SAASF,QAAM,OAAO,IAAI;AAEvDA,UAAM,QAAQ,YAAY,WAAW;AAErC,SAAO;AAAA,IACL,SAASA,QAAM;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,MAAMA,QAAM,OAAO;AAAA,MACnB,MAAMA,QAAM,OAAO;AAAA,IAAA;AAAA,EACrB;AAEJ;;"}

package/dist/composite/carousel/elements/full-screen.mjs

@@ -0,0 +1,61 @@
+import { token } from "@universityofmaryland/web-styles-library";
+import { X } from "../../../utilities/assets/icons.mjs";
+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 "../../../atomic/layout/block/stacked.mjs";
+import { createModal } from "../../../atomic/layout/overlay/modal.mjs";
+import "../../../atomic/layout/person/columns.mjs";
+import "../../../atomic/text-lockup/date.mjs";
+import "../../../atomic/text-lockup/small.mjs";
+const ELEMENT_CLOSE_BUTTON = "carousel-fixed-screen-button";
+const STYLES_FIXED_FULL_SCREEN = `
+
+
+  .${ELEMENT_CLOSE_BUTTON} {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+
+  @media (${token.media.queries.tablet.min}) {
+    .${ELEMENT_CLOSE_BUTTON} {
+      top: calc(10vh - 22px);
+      right: calc(10vw - 22px);
+    }
+  }
+
+  .${ELEMENT_CLOSE_BUTTON} > svg {
+    fill: ${token.color.white};
+    width: 20px;
+    height: 20px;
+  }
+`;
+const fullScreen = ({ content, callback }) => {
+  const modal = createModal({ content, callback });
+  const closeButton = document.createElement("button");
+  let styles = STYLES_FIXED_FULL_SCREEN;
+  styles += modal.styles;
+  closeButton.setAttribute("type", "button");
+  closeButton.setAttribute("aria-label", "Close");
+  closeButton.classList.add(ELEMENT_CLOSE_BUTTON);
+  closeButton.innerHTML = X;
+  closeButton.addEventListener("click", modal.events.hide);
+  modal.element.appendChild(closeButton);
+  return {
+    element: modal.element,
+    styles,
+    events: {
+      show: modal.events.show,
+      hide: modal.events.hide
+    }
+  };
+};
+export {
+  fullScreen as default
+};
+//# sourceMappingURL=full-screen.mjs.map

package/dist/composite/carousel/elements/full-screen.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"full-screen.mjs","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport { layout } from 'atomic';\nimport * as Utility from 'utilities';\n\ntype TypeFixedFullScreenProps = {\n  content: HTMLElement;\n  callback: () => void;\n};\n\nconst ELEMENT_CLOSE_BUTTON = 'carousel-fixed-screen-button';\n\nconst STYLES_FIXED_FULL_SCREEN = `\n\n\n  .${ELEMENT_CLOSE_BUTTON} {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    .${ELEMENT_CLOSE_BUTTON} {\n      top: calc(10vh - 22px);\n      right: calc(10vw - 22px);\n    }\n  }\n\n  .${ELEMENT_CLOSE_BUTTON} > svg {\n    fill: ${token.color.white};\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nexport default ({ content, callback }: TypeFixedFullScreenProps) => {\n  const modal = layout.overlay.modal({ content, callback });\n  const closeButton = document.createElement('button');\n  let styles = STYLES_FIXED_FULL_SCREEN;\n\n  styles += modal.styles;\n\n  closeButton.setAttribute('type', 'button');\n  closeButton.setAttribute('aria-label', 'Close');\n  closeButton.classList.add(ELEMENT_CLOSE_BUTTON);\n  closeButton.innerHTML = Utility.asset.icon.X;\n  closeButton.addEventListener('click', modal.events.hide);\n\n  modal.element.appendChild(closeButton);\n\n  return {\n    element: modal.element,\n    styles,\n    events: {\n      show: modal.events.show,\n      hide: modal.events.hide,\n    },\n  };\n};\n"],"names":["layout.overlay.modal","Utility.asset.icon.X"],"mappings":";;;;;;;;;;;;;;AASA,MAAM,uBAAuB;AAE7B,MAAM,2BAA2B;AAAA;AAAA;AAAA,KAG5B,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMb,MAAM,MAAM,QAAQ,OAAO,GAAG;AAAA,OACnC,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,oBAAoB;AAAA,YACb,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAA,aAAe,CAAC,EAAE,SAAS,eAAyC;AAClE,QAAM,QAAQA,YAAqB,EAAE,SAAS,UAAU;AACxD,QAAM,cAAc,SAAS,cAAc,QAAQ;AACnD,MAAI,SAAS;AAEb,YAAU,MAAM;AAEhB,cAAY,aAAa,QAAQ,QAAQ;AACzC,cAAY,aAAa,cAAc,OAAO;AAC9C,cAAY,UAAU,IAAI,oBAAoB;AAC9C,cAAY,YAAYC;AACxB,cAAY,iBAAiB,SAAS,MAAM,OAAO,IAAI;AAEvD,QAAM,QAAQ,YAAY,WAAW;AAErC,SAAO;AAAA,IACL,SAAS,MAAM;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,MAAM,MAAM,OAAO;AAAA,MACnB,MAAM,MAAM,OAAO;AAAA,IAAA;AAAA,EACrB;AAEJ;"}