@universityofmaryland/web-elements-library 1.6.16 → 1.7.0

package/dist/composite/carousel/elements/{blocks.js → equal-width-items.js}

@@ -1,70 +1,14 @@
 import * as token from "@universityofmaryland/web-token-library";
-import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 import { debounce } from "@universityofmaryland/web-utilities-library/performance";
 import { setupSwipeDetection } from "@universityofmaryland/web-utilities-library/events";
 import { parsePixelValue } from "@universityofmaryland/web-utilities-library/styles";
-import { arrow_right } from "@universityofmaryland/web-icons-library/arrows";
-const fullScreenClassName = elementStyles.action.button.fullScreen.className;
-const ATTRIBUTE_SINGLE_BLOCK = "single";
+import { CreateButton, ButtonVisibility } from "./nav-button.js";
+import { createCaption } from "../../../atomic/assets/image/caption.js";
+import { fullscreen } from "../../../atomic/buttons/fullscreen.js";
 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,
@@ -81,27 +25,30 @@ const EventScrollCarousel = (props) => {
   const isShowMobileHint = GetViewOptions.shouldShowMobileHint();
   const isShowHint = GetViewOptions.shouldShowHint();
   const count = GetViewOptions.showCount();
-  void slotContent[0]?.offsetHeight;
-  const elementSize = slotContent[0]?.offsetWidth || 0;
+  const firstSlot = slotContent[0];
+  if (!firstSlot) return;
+  const elementSize = firstSlot.offsetWidth;
   const carouselSize = GetSizes.carouselWidthBasedOnBlock({ count });
   const { fullScreenCallback } = displayLogic;
   if (!elementSize) return;
   const elementSizeWithSpace = elementSize;
   const temporaryCarouselSize = carouselSize + elementSizeWithSpace;
   const cloneReferenceEvents = ({
-    orginal,
+    original,
     clone
   }) => {
-    const orginalFullScreen = orginal.querySelector(`.${fullScreenClassName}`);
+    const fullScreenClassName = fullscreen.className;
+    const originalFullScreen = original.querySelector(`.${fullScreenClassName}`);
     const cloneFullScreen = clone.querySelector(`.${fullScreenClassName}`);
-    if (orginalFullScreen && cloneFullScreen) {
-      const indexAttr = orginalFullScreen.getAttribute("data-index");
+    if (originalFullScreen && cloneFullScreen) {
+      const indexAttr = originalFullScreen.getAttribute("data-index");
       const index = indexAttr ? parseInt(indexAttr) : 0;
       cloneFullScreen.addEventListener(
         "click",
         () => fullScreenCallback(index)
       );
     }
+    createCaption.bindToggle(clone);
   };
   const animateRight = () => {
     const firstElement = slotContent[0];
@@ -109,7 +56,7 @@ const EventScrollCarousel = (props) => {
     const upcomingElement = slotContent[count];
     const hintElement = slotContent[count + 1];
     upcomingElement.style.display = "block";
-    cloneReferenceEvents({ orginal: firstElement, clone: clonedElement });
+    cloneReferenceEvents({ original: firstElement, clone: clonedElement });
     if (hintElement && (isShowMobileHint || isShowHint)) {
       hintElement.style.display = "block";
     }
@@ -131,7 +78,7 @@ const EventScrollCarousel = (props) => {
     const removedElement = slotContent[count - 1];
     const hintElementSibiling = slotContent[count];
     const clonedElement = lastElement.cloneNode(true);
-    cloneReferenceEvents({ orginal: lastElement, clone: clonedElement });
+    cloneReferenceEvents({ original: lastElement, clone: clonedElement });
     carouselSlider.style.width = `${temporaryCarouselSize}px`;
     carouselSlider.prepend(clonedElement);
     clonedElement.style.display = "block";
@@ -152,13 +99,17 @@ const EventScrollCarousel = (props) => {
       }, ANIMATION_DURATION);
     });
   };
-  isDirectionRight ? animateRight() : animateLeft();
+  if (isDirectionRight) {
+    animateRight();
+  } else {
+    animateLeft();
+  }
 };
 const EventSwipe = (props) => {
   const { GetElements } = props;
   const container = GetElements.container();
-  const swipes = (isrightswipe) => {
-    if (!isrightswipe) {
+  const swipes = (isRightSwipe) => {
+    if (!isRightSwipe) {
       EventScrollCarousel(props);
     } else {
       EventScrollCarousel({ ...props, isDirectionRight: false });
@@ -166,106 +117,46 @@ const EventSwipe = (props) => {
   };
   setupSwipeDetection({ 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 = arrow_right;
-  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, overwriteDisplayLogic } = props;
-  const declaration = document.createElement("div");
-  const container = document.createElement("div");
-  const wrapper = document.createElement("div");
+  const {
+    slide,
+    shadowRef,
+    blocks,
+    mobileBreakpoint = token.media.breakpointValues.medium.max,
+    tabletBreakpoint = token.media.breakpointValues.tablet.min,
+    desktopBreakpoint = token.media.breakpointValues.desktop.min,
+    mobileCount = 1,
+    tabletCount = 2,
+    desktopCount = 3,
+    maxCount = 4,
+    blockGap = parsePixelValue(token.spacing.lg),
+    hasLeftButton = true,
+    hasRightButton = true,
+    showMobileHint = true,
+    showHint = true,
+    fullScreenCallback,
+    button
+  } = props;
   const displayLogic = {
-    mobileBreakpoint: 550,
-    tabletBreakpoint: 768,
-    desktopBreakpoint: 1e3,
-    mobileCount: 1,
-    tabletCount: 2,
-    desktopCount: 3,
-    maxCount: 4,
-    blockGap: parsePixelValue(token.spacing.lg),
-    hasRightButton: true,
-    hasLeftButton: true,
-    showMobileHint: true,
-    showHint: true,
-    fullScreenCallback: void 0
+    mobileBreakpoint,
+    tabletBreakpoint,
+    desktopBreakpoint,
+    mobileCount,
+    tabletCount,
+    desktopCount,
+    maxCount,
+    blockGap,
+    hasLeftButton,
+    hasRightButton,
+    showMobileHint,
+    showHint,
+    fullScreenCallback
   };
   let blockWidth = 0;
   let hasInteractionOccured = false;
-  if (overwriteDisplayLogic) {
-    Object.keys(overwriteDisplayLogic).forEach((key) => {
-      const refKey = key;
-      const refValue = overwriteDisplayLogic[refKey];
-      displayLogic[refKey] = refValue;
-    });
-  }
+  let containerElement = null;
   const GetElements = {
-    container: () => container,
+    container: () => containerElement,
     slide: () => slide,
     blocks: () => blocks
   };
@@ -288,17 +179,21 @@ const CreateCarouselCardsElement = (props) => (() => {
       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;
+      if (isMobile) {
+        count = displayLogic.mobileCount;
+      } else if (isTablet) {
+        count = displayLogic.tabletCount;
+      } else if (isDesktop) {
+        count = displayLogic.desktopCount;
+      } else 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;
+      const showHintOnMobile = displayLogic.showMobileHint || displayLogic.showHint;
+      return showHintOnMobile && isMobileView;
     },
     shouldShowHint: () => {
       return displayLogic.showHint && !GetViewOptions.isMobileView();
@@ -312,12 +207,12 @@ const CreateCarouselCardsElement = (props) => (() => {
   };
   const GetSizes = {
     mobileHintWidth: ({ count }) => {
-      const containerWidth = container.offsetWidth;
-      return containerWidth / count * HINT_MULTIPLER_MOBILE_SIZING;
+      if (!containerElement) return 0;
+      return containerElement.offsetWidth / count * HINT_MULTIPLER_MOBILE_SIZING;
     },
     hintWidth: ({ count }) => {
-      const containerWidth = container.offsetWidth;
-      return containerWidth / count * HINT_MULTIPLER_SIZING;
+      if (!containerElement) return 0;
+      return containerElement.offsetWidth / count * HINT_MULTIPLER_SIZING;
     },
     carouselWidthBasedOnBlock: ({ count }) => {
       const elementSize = blockWidth;
@@ -330,7 +225,8 @@ const CreateCarouselCardsElement = (props) => (() => {
       return elementSize * count;
     },
     containerWidth: () => {
-      return container.offsetWidth;
+      if (!containerElement) return 0;
+      return containerElement.offsetWidth;
     }
   };
   const SetLayout = {
@@ -354,19 +250,36 @@ const CreateCarouselCardsElement = (props) => (() => {
           block.style.display = "block";
         }
       });
-      if (isShowMobileHint) containerBlocks[1].style.display = "block";
-      if (isHint) containerBlocks[count].style.display = "block";
+      if (isShowMobileHint) {
+        containerBlocks[1].style.display = "block";
+      }
+      if (isHint) {
+        containerBlocks[count].style.display = "block";
+      }
     }
   };
+  const buttonRefs = {
+    next: null,
+    prev: null
+  };
+  const GetButtons = {
+    next: () => buttonRefs.next,
+    prev: () => buttonRefs.prev
+  };
   const Event = {
     helpers: {
       displayLogic,
       GetElements,
+      GetButtons,
       GetViewOptions,
       GetSizes,
       SetLayout
     },
     resize: () => {
+      if (!containerElement) {
+        return;
+      }
+      const container = containerElement;
       const count = GetViewOptions.showCount();
       const cacluateBlockWidth = ({ count: count2 }) => {
         const isShowMobileHint = GetViewOptions.shouldShowMobileHint();
@@ -386,12 +299,7 @@ const CreateCarouselCardsElement = (props) => (() => {
       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);
-      }
+      ButtonVisibility({ ...Event.helpers });
     },
     load: () => {
       slide.style.display = "flex";
@@ -415,52 +323,74 @@ const CreateCarouselCardsElement = (props) => (() => {
       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 {
-    blocks.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 { verticalCenter, outsetOffset, backgroundColor } = button || {};
+  const buttonConfig = {
+    isVerticalCenter: verticalCenter !== false || Boolean(outsetOffset),
+    outsetOffset,
+    backgroundColor
   };
+  const nextButtonModel = CreateButton({
+    EventMoveForward: Event.forward,
+    EventMoveBackward: Event.backward,
+    ...buttonConfig
+  });
+  const prevButtonModel = CreateButton({
+    EventMoveForward: Event.forward,
+    EventMoveBackward: Event.backward,
+    isRight: false,
+    ...buttonConfig
+  });
+  buttonRefs.next = nextButtonModel.element;
+  buttonRefs.prev = prevButtonModel.element;
+  const wrapperModel = new ElementBuilder().withClassName("animation-carousel-block-wrapper").withStyles({
+    element: {
+      overflow: "hidden",
+      width: "100%"
+    }
+  }).withModifier((element) => {
+    if (shadowRef) {
+      element.appendChild(shadowRef);
+    } else {
+      blocks.forEach((block) => slide.appendChild(block));
+      element.appendChild(slide);
+    }
+  }).build();
+  const buttonWrapperModel = new ElementBuilder().withClassName("animation-carousel-block-buttons").withStyles({
+    element: {
+      display: "flex",
+      justifyContent: "center",
+      gap: token.spacing.min,
+      [`@media (max-width: ${tabletBreakpoint}px)`]: {
+        marginTop: token.spacing.md,
+        marginBottom: token.spacing.md
+      }
+    }
+  }).withChildren(prevButtonModel, nextButtonModel).build();
+  const containerModel = new ElementBuilder().withClassName("animation-carousel-block-container").withStyles({
+    element: {
+      position: "relative",
+      [`@media (max-width: ${tabletBreakpoint}px)`]: {
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center"
+      }
+    }
+  }).ref((element) => {
+    containerElement = element;
+  }).withChildren(wrapperModel, buttonWrapperModel).build();
+  const declarationModel = new ElementBuilder().withClassName("animation-carousel-block-declaration").withStyles({
+    element: {
+      containerType: "inline-size",
+      width: "100%"
+    }
+  }).withChild(containerModel).withEvents({ resize: Event.resize, load: Event.load }).build();
+  window.addEventListener("resize", debounce(Event.resize, 30));
+  return declarationModel;
 })();
 const createCompositeCarouselBlocks = {
-  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
-  }
+  CreateElement: CreateCarouselCardsElement
 };
 export {
   createCompositeCarouselBlocks
 };
-//# sourceMappingURL=blocks.js.map
+//# sourceMappingURL=equal-width-items.js.map

package/dist/composite/carousel/elements/equal-width-items.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"equal-width-items.js","sources":["../../../../source/composite/carousel/elements/equal-width-items.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { setupSwipeDetection } from '@universityofmaryland/web-utilities-library/events';\nimport { parsePixelValue } from '@universityofmaryland/web-utilities-library/styles';\nimport { CreateButton, ButtonVisibility } from './nav-button';\nimport { createCaption } from '../../../atomic/assets/image/caption';\nimport { fullscreen } from '../../../atomic/buttons/fullscreen';\n\nexport type TypeButtonConfig = {\n  backgroundColor?: string;\n  verticalCenter?: boolean;\n  outsetOffset?: string;\n};\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 TypeAnimationCarouselBlockProps = {\n  slide: HTMLElement;\n  shadowRef?: HTMLElement;\n  blocks: HTMLElement[];\n  mobileBreakpoint?: number;\n  tabletBreakpoint?: number;\n  desktopBreakpoint?: number;\n  mobileCount?: number;\n  tabletCount?: number;\n  desktopCount?: number;\n  maxCount?: number;\n  blockGap?: number;\n  hasLeftButton?: boolean;\n  hasRightButton?: boolean;\n  showMobileHint?: boolean;\n  showHint?: boolean;\n  fullScreenCallback?: (index: number) => void;\n  button?: TypeButtonConfig;\n};\n\ntype TypeHelpers = {\n  displayLogic: Record<string, any>;\n  GetElements: {\n    container: () => HTMLDivElement;\n    slide: () => HTMLElement;\n    blocks: () => HTMLElement[];\n  };\n  GetButtons: {\n    prev: () => HTMLButtonElement;\n    next: () => HTMLButtonElement;\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\ntype CarouselBlockModel = {\n  element: HTMLElement;\n  styles: string;\n  events: {\n    resize: () => void;\n    load: () => void;\n  };\n};\n\nconst ANIMATION_DURATION = 750;\nconst HINT_MULTIPLER_MOBILE_SIZING = 0.2;\nconst HINT_MULTIPLER_SIZING = 0.6;\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  const firstSlot = slotContent[0];\n  if (!firstSlot) return;\n\n  const elementSize = firstSlot.offsetWidth;\n\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    original,\n    clone,\n  }: {\n    original: HTMLElement;\n    clone: HTMLElement;\n  }) => {\n    const fullScreenClassName = fullscreen.className;\n    const originalFullScreen = original.querySelector(`.${fullScreenClassName}`);\n    const cloneFullScreen = clone.querySelector(`.${fullScreenClassName}`);\n\n    if (originalFullScreen && cloneFullScreen) {\n      const indexAttr = originalFullScreen.getAttribute('data-index');\n      const index = indexAttr ? parseInt(indexAttr) : 0;\n      cloneFullScreen.addEventListener('click', () =>\n        fullScreenCallback(index),\n      );\n    }\n\n    // cloneNode(true) drops the caption toggle's click listener; restore it.\n    createCaption.bindToggle(clone);\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    upcomingElement.style.display = 'block';\n    cloneReferenceEvents({ original: firstElement, clone: clonedElement });\n\n    if (hintElement && (isShowMobileHint || isShowHint)) {\n      hintElement.style.display = 'block';\n    }\n\n    carouselSlider.appendChild(clonedElement);\n    clonedElement.style.display = 'none';\n\n    carouselSlider.style.width = `${temporaryCarouselSize}px`;\n    void carouselSlider.offsetHeight;\n\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    cloneReferenceEvents({ original: lastElement, clone: clonedElement });\n\n    carouselSlider.style.width = `${temporaryCarouselSize}px`;\n    carouselSlider.prepend(clonedElement);\n    clonedElement.style.display = 'block';\n    carouselSlider.style.transform = `translateX(-${elementSizeWithSpace}px)`;\n\n    void carouselSlider.offsetHeight;\n\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  if (isDirectionRight) {\n    animateRight();\n  } else {\n    animateLeft();\n  }\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  setupSwipeDetection({ container, callback: swipes });\n};\n\n\nconst CreateCarouselCardsElement = (props: TypeAnimationCarouselBlockProps) =>\n  (() => {\n    const {\n      slide,\n      shadowRef,\n      blocks,\n      mobileBreakpoint = token.media.breakpointValues.medium.max,\n      tabletBreakpoint = token.media.breakpointValues.tablet.min,\n      desktopBreakpoint = token.media.breakpointValues.desktop.min,\n      mobileCount = 1,\n      tabletCount = 2,\n      desktopCount = 3,\n      maxCount = 4,\n      blockGap = parsePixelValue(token.spacing.lg),\n      hasLeftButton = true,\n      hasRightButton = true,\n      showMobileHint = true,\n      showHint = true,\n      fullScreenCallback,\n      button,\n    } = props;\n\n    const displayLogic: TypeDisplayLogic = {\n      mobileBreakpoint,\n      tabletBreakpoint,\n      desktopBreakpoint,\n      mobileCount,\n      tabletCount,\n      desktopCount,\n      maxCount,\n      blockGap,\n      hasLeftButton,\n      hasRightButton,\n      showMobileHint,\n      showHint,\n      fullScreenCallback,\n    };\n    let blockWidth = 0;\n    let hasInteractionOccured = false;\n    let containerElement: HTMLDivElement | null = null;\n\n    const GetElements = {\n      container: () => containerElement as HTMLDivElement,\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      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        else if (isTablet) { count = displayLogic.tabletCount; }\n        else if (isDesktop) { count = displayLogic.desktopCount; }\n        else if (isHighDef) { count = displayLogic.maxCount; }\n\n        return count;\n      },\n      shouldShowMobileHint: () => {\n        const isMobileView = GetViewOptions.isMobileView();\n        const showHintOnMobile = displayLogic.showMobileHint || displayLogic.showHint;\n\n        return showHintOnMobile && isMobileView;\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        if (!containerElement) return 0;\n        return (containerElement.offsetWidth / count) * HINT_MULTIPLER_MOBILE_SIZING;\n      },\n      hintWidth: ({ count }: { count: number }) => {\n        if (!containerElement) return 0;\n        return (containerElement.offsetWidth / 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        if (!containerElement) return 0;\n        return containerElement.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) {\n          containerBlocks[1].style.display = 'block';\n        }\n        if (isHint) {\n          containerBlocks[count].style.display = 'block';\n        }\n      },\n    };\n\n    const buttonRefs: { next: HTMLButtonElement | null; prev: HTMLButtonElement | null } = {\n      next: null,\n      prev: null,\n    };\n\n    const GetButtons = {\n      next: () => buttonRefs.next as HTMLButtonElement,\n      prev: () => buttonRefs.prev as HTMLButtonElement,\n    };\n\n    const Event = {\n      helpers: {\n        displayLogic,\n        GetElements,\n        GetButtons,\n        GetViewOptions,\n        GetSizes,\n        SetLayout,\n      },\n      resize: () => {\n        if (!containerElement) { return; }\n        const container = containerElement;\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        ButtonVisibility({ ...Event.helpers });\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    const { verticalCenter, outsetOffset, backgroundColor } = button || {};\n    const buttonConfig = {\n      isVerticalCenter: verticalCenter !== false || Boolean(outsetOffset),\n      outsetOffset,\n      backgroundColor,\n    };\n\n    const nextButtonModel = CreateButton({\n      EventMoveForward: Event.forward,\n      EventMoveBackward: Event.backward,\n      ...buttonConfig,\n    });\n\n    const prevButtonModel = CreateButton({\n      EventMoveForward: Event.forward,\n      EventMoveBackward: Event.backward,\n      isRight: false,\n      ...buttonConfig,\n    });\n\n    buttonRefs.next = nextButtonModel.element as HTMLButtonElement;\n    buttonRefs.prev = prevButtonModel.element as HTMLButtonElement;\n\n    const wrapperModel = new ElementBuilder()\n      .withClassName('animation-carousel-block-wrapper')\n      .withStyles({\n        element: {\n          overflow: 'hidden',\n          width: '100%',\n        },\n      })\n      .withModifier((element) => {\n        if (shadowRef) {\n          element.appendChild(shadowRef);\n        } else {\n          blocks.forEach((block) => slide.appendChild(block));\n          element.appendChild(slide);\n        }\n      })\n      .build();\n\n    const buttonWrapperModel = new ElementBuilder()\n      .withClassName('animation-carousel-block-buttons')\n      .withStyles({\n        element: {\n          display: 'flex',\n          justifyContent: 'center',\n          gap: token.spacing.min,\n          [`@media (max-width: ${tabletBreakpoint}px)`]: {\n            marginTop: token.spacing.md,\n            marginBottom: token.spacing.md,\n          },\n        },\n      })\n      .withChildren(prevButtonModel, nextButtonModel)\n      .build();\n\n    const containerModel = new ElementBuilder()\n      .withClassName('animation-carousel-block-container')\n      .withStyles({\n        element: {\n          position: 'relative',\n          [`@media (max-width: ${tabletBreakpoint}px)`]: {\n            display: 'flex',\n            flexWrap: 'wrap',\n            justifyContent: 'center',\n          },\n        },\n      })\n      .ref((element) => {\n        containerElement = element as HTMLDivElement;\n      })\n      .withChildren(wrapperModel, buttonWrapperModel)\n      .build();\n\n    const declarationModel = new ElementBuilder()\n      .withClassName('animation-carousel-block-declaration')\n      .withStyles({\n        element: {\n          containerType: 'inline-size',\n          width: '100%',\n        },\n      })\n      .withChild(containerModel)\n      .withEvents({ resize: Event.resize, load: Event.load })\n      .build();\n\n    window.addEventListener('resize', debounce(Event.resize, 30));\n\n    return declarationModel as CarouselBlockModel;\n  })();\n\nexport const createCompositeCarouselBlocks = {\n  CreateElement: CreateCarouselCardsElement,\n};\n"],"names":["count"],"mappings":"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"}

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

@@ -2,13 +2,14 @@ type TypeFixedFullScreenProps = {
     content: HTMLElement;
     callback: () => void;
 };
-export declare const createCompositeCarouselFullScreen: ({ content, callback }: TypeFixedFullScreenProps) => {
-    element: HTMLDivElement;
+type FullScreenModel = {
+    element: HTMLElement;
     styles: string;
     events: {
         show: () => void;
         hide: () => void;
     };
 };
+export declare const createCompositeCarouselFullScreen: ({ content }: TypeFixedFullScreenProps) => FullScreenModel;
 export {};
 //# sourceMappingURL=full-screen.d.ts.map

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;AA2BF,eAAO,MAAM,iCAAiC,GAAI,uBAAuB,wBAAwB;;;;;;;CAuBhG,CAAC"}
+{"version":3,"file":"full-screen.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"names":[],"mappings":"AAMA,KAAK,wBAAwB,GAAG;IAC9B,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,IAAI,CAAC;QACjB,IAAI,EAAE,MAAM,IAAI,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,iCAAiC,GAAI,aAAa,wBAAwB,KA0ChF,eACN,CAAC"}