@universityofmaryland/web-elements-library 1.5.9 → 1.6.0-beta.1

package/dist/atomic/animations/brand/card-stack.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"card-stack.mjs","sources":["../../../../source/atomic/animations/brand/card-stack.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { isPreferredReducedMotion } from '@universityofmaryland/web-utilities-library/accessibility';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets } from 'atomic';\nimport { type ElementModel } from '../../../_types';\n\ninterface CardStackProps {\n  featured: HTMLImageElement | HTMLVideoElement;\n  images: HTMLImageElement[];\n  isExpandFeature: boolean;\n}\n\ninterface ConfigurationItem {\n  column?: string;\n  row?: string;\n  zIndex?: number;\n  featured?: boolean;\n  matchWidth?: boolean;\n  offset?: {\n    top?: string;\n    left?: string;\n    right?: string;\n    bottom?: string;\n  };\n}\n\ninterface Configuration {\n  count: number;\n  layout: {\n    gridTemplateColumns: string;\n    gridTemplateRows: string;\n  };\n  items: ConfigurationItem[];\n}\n\nconst configuration: Configuration[] = [\n  {\n    count: 4,\n    layout: {\n      gridTemplateColumns: 'repeat(15, 10vw)',\n      gridTemplateRows: 'repeat(15, 8vh)',\n    },\n    items: [\n      {\n        column: '3 / 8',\n        row: '4 / 5',\n        zIndex: 9,\n        offset: {\n          top: '-10%',\n          left: '-5%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '2 / 6',\n        offset: {\n          top: '-1%',\n          right: '-4%',\n        },\n      },\n      {\n        column: '4 / 7',\n        row: '10 / 15',\n        zIndex: 9,\n        offset: {\n          bottom: '-13%',\n          left: '-4%',\n        },\n      },\n      {\n        column: '13 / 15',\n        row: '10 / 14',\n        offset: {\n          right: '-8%',\n          bottom: '-3%',\n        },\n      },\n    ],\n  },\n  {\n    count: 5,\n    layout: {\n      gridTemplateColumns: 'repeat(15, 10vw)',\n      gridTemplateRows: 'repeat(15, 8vh)',\n    },\n    items: [\n      {\n        column: '2 / 6',\n        row: '4 / 9',\n        zIndex: 9,\n        offset: {\n          top: '-10%',\n          left: '-6%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '2 / 5',\n        offset: {\n          top: '-3%',\n          right: '-5%',\n        },\n      },\n      {\n        column: '10 / 12',\n        row: '3 / 5',\n        offset: {\n          bottom: '-20%',\n          right: '-1%',\n        },\n      },\n      {\n        column: '1 / 4',\n        row: '8/ 13',\n        zIndex: 9,\n        offset: {\n          bottom: '-10%',\n          left: '-10%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '10 / 14',\n        offset: {\n          right: '-10%',\n          bottom: '-7%',\n        },\n      },\n    ],\n  },\n  {\n    count: 6,\n    layout: {\n      gridTemplateColumns: 'repeat(15, 10vw)',\n      gridTemplateRows: 'repeat(15, 8vh)',\n    },\n    items: [\n      {\n        column: '2 / 6',\n        row: '4 / 9',\n        zIndex: 9,\n        offset: {\n          top: '-10%',\n          left: '-6%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '2 / 5',\n        offset: {\n          top: '-3%',\n          right: '-5%',\n        },\n      },\n      {\n        column: '10 / 12',\n        row: '3 / 5',\n        offset: {\n          bottom: '-20%',\n          right: '-1%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '6 / 8',\n        offset: {\n          bottom: '-5%',\n          right: '-20%',\n        },\n      },\n      {\n        column: '1 / 4',\n        row: '8/ 13',\n        zIndex: 9,\n        offset: {\n          bottom: '-10%',\n          left: '-10%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '10 / 14',\n        offset: {\n          right: '-10%',\n          bottom: '-7%',\n        },\n      },\n    ],\n  },\n  {\n    count: 7,\n    layout: {\n      gridTemplateColumns: 'repeat(15, 10vw)',\n      gridTemplateRows: 'repeat(15, 8vh)',\n    },\n    items: [\n      {\n        column: '2 / 6',\n        row: '4 / 9',\n        zIndex: 9,\n        offset: {\n          top: '-10%',\n          left: '-6%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '2 / 5',\n        offset: {\n          top: '-3%',\n          right: '-5%',\n        },\n      },\n      {\n        column: '10 / 12',\n        row: '3 / 5',\n        offset: {\n          bottom: '-20%',\n          right: '-1%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '6 / 8',\n        offset: {\n          bottom: '-5%',\n          right: '-20%',\n        },\n      },\n      {\n        column: '1 / 4',\n        row: '8/ 13',\n        zIndex: 9,\n        offset: {\n          bottom: '-10%',\n          left: '-10%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '10 / 14',\n        offset: {\n          right: '-10%',\n          bottom: '-7%',\n        },\n      },\n      {\n        column: '6 / 9',\n        row: '10 / 15',\n        offset: {\n          right: '-10%',\n          bottom: '-25%',\n        },\n      },\n    ],\n  },\n  {\n    count: 8,\n    layout: {\n      gridTemplateColumns: 'repeat(15, 10vw)',\n      gridTemplateRows: 'repeat(15, 8vh)',\n    },\n    items: [\n      {\n        column: '2 / 6',\n        row: '4 / 9',\n        zIndex: 9,\n        offset: {\n          top: '-10%',\n          left: '-6%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '2 / 5',\n        offset: {\n          top: '-3%',\n          right: '-5%',\n        },\n      },\n      {\n        column: '10 / 12',\n        row: '3 / 5',\n        offset: {\n          bottom: '-20%',\n          right: '-1%',\n        },\n      },\n      {\n        column: '3 / 9',\n        row: '1 / 3',\n        offset: {\n          right: '-10%',\n          top: '-25%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '6 / 8',\n        offset: {\n          bottom: '-5%',\n          right: '-20%',\n        },\n      },\n      {\n        column: '1 / 4',\n        row: '8/ 13',\n        zIndex: 9,\n        offset: {\n          bottom: '-10%',\n          left: '-10%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '10 / 14',\n        offset: {\n          right: '-10%',\n          bottom: '-7%',\n        },\n      },\n      {\n        column: '6 / 9',\n        row: '10 / 15',\n        offset: {\n          right: '-10%',\n          bottom: '-25%',\n        },\n      },\n    ],\n  },\n];\n\n// Class name constants\nconst STACK_CONTAINER_CLASS = 'brand-animations-card-stack';\nconst STACK_ELEMENT_CLASS = `${STACK_CONTAINER_CLASS}-element`;\nconst STACK_GRID_CLASS = `${STACK_CONTAINER_CLASS}-grid`;\nconst STACK_ITEM_CLASS = `${STACK_CONTAINER_CLASS}-item`;\nconst STACK_GRID_ERROR_CLASS = `${STACK_GRID_CLASS}-error`;\n\nconst KEY_FRAME_GRID_EXPAND = 'grid-expand';\nconst KEY_FRAME_GRID_ITEM = 'grid-item';\nconst KEY_FRAME_FEATURED_SIZE = 'featured-size';\n\nconst isPreferReducedMotion = isPreferredReducedMotion();\nconst isScrollTimelineSupported = () =>\n  'ScrollTimeline' in window || CSS.supports('animation-timeline', 'scroll()');\nconst isDisplayWithoutAnimation =\n  isPreferReducedMotion || !isScrollTimelineSupported();\n\nconst getResponsiveSizes = () => {\n  const windowWidth = window.innerWidth;\n\n  if (windowWidth >= 1024) {\n    return { width: 0.4, height: 0.4 };\n  } else if (windowWidth >= 768) {\n    return { width: 0.5, height: 0.5 };\n  } else {\n    return { width: 0.8, height: 0.5 };\n  }\n};\n\nconst keyFrameGridExpand = `\n  @keyframes ${KEY_FRAME_GRID_EXPAND} {\n    to {\n      transform: translate(0, 0);\n      width: inherit;\n    }\n  }\n`;\n\nconst keyFrameGridItem = `\n  @keyframes ${KEY_FRAME_GRID_ITEM} {\n    to {\n      opacity: 0;\n    }\n  }\n`;\n\nconst keyFrameFeaturedSize = `\n  @keyframes ${KEY_FRAME_FEATURED_SIZE} {\n    to {\n      width: 100%;\n      height: 100vh;\n      top: 0%;\n    }\n  }\n`;\n\n/**\n * Waits for all media elements (images and videos) to load and render.\n *\n * @param container - The container element containing the media\n * @returns Promise that resolves when all media is loaded and rendered\n */\nconst waitForMediaLoad = async (container: HTMLElement): Promise<void> => {\n  const images = Array.from(container.querySelectorAll('img'));\n  const videos = Array.from(container.querySelectorAll('video'));\n\n  const imagePromises = images.map((img) => {\n    if (img.complete) {\n      // Check if image loaded successfully or failed\n      if (img.naturalWidth > 0) {\n        return Promise.resolve();\n      } else {\n        // Image is complete but has no natural dimensions - it failed to load\n        return Promise.reject(new Error(`Failed to load image: ${img.src}`));\n      }\n    }\n    return new Promise<void>((resolve, reject) => {\n      img.addEventListener('load', () => resolve(), { once: true });\n      img.addEventListener(\n        'error',\n        () => reject(new Error(`Failed to load image: ${img.src}`)),\n        { once: true },\n      );\n    });\n  });\n\n  const videoPromises = videos.map((video) => {\n    if (video.readyState >= 3) {\n      return Promise.resolve();\n    }\n    return new Promise<void>((resolve, reject) => {\n      video.addEventListener('loadeddata', () => resolve(), { once: true });\n      video.addEventListener(\n        'error',\n        () => reject(new Error(`Failed to load video: ${video.src}`)),\n        { once: true },\n      );\n    });\n  });\n\n  await Promise.all([...imagePromises, ...videoPromises]);\n\n  return new Promise<void>((resolve) => {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        resolve();\n      });\n    });\n  });\n};\n\n/**\n * Retrieves the configuration object for a specific element count.\n *\n * @param count - The number of elements to display\n * @returns The configuration object for the given count, or undefined if not found\n */\nconst getConfigurationByCount = (count: number) => {\n  return configuration.find((c) => c.count === count);\n};\n\n/**\n * Gets the stack element from a grid item.\n *\n * @param gridItem - The grid item element\n * @param index - The index of the stack element\n * @returns The stack element or null if not found\n */\nconst getStackElementFromGridItem = (\n  gridItem: HTMLElement,\n  index: number,\n): HTMLElement | null => {\n  return gridItem.querySelector(\n    `.${STACK_ELEMENT_CLASS}-${index}`,\n  ) as HTMLElement;\n};\n\n/**\n * Calculates the transform values (x, y) needed to center an element\n * relative to the brand-animations-card-stack-grid container with optional offset.\n *\n * @param element - The element to be centered\n * @param gridContainer - The grid container element\n * @param offset - Optional offset values in percentages\n * @returns Transform values {x, y} in pixels to center the element with offset\n */\nconst calculateCenterTransform = (\n  element: HTMLElement,\n  centerElement: HTMLElement,\n  offset?: {\n    top?: string;\n    left?: string;\n    right?: string;\n    bottom?: string;\n  },\n): { x: number; y: number } => {\n  const elementRect = element.getBoundingClientRect();\n  const centerRect = centerElement.getBoundingClientRect();\n\n  const centerX = centerRect.left + centerRect.width / 2;\n  const centerY = centerRect.top + centerRect.height / 2;\n\n  const elementCenterX = elementRect.left + elementRect.width / 2;\n  const elementCenterY = elementRect.top + elementRect.height / 2;\n\n  let translateX = centerX - elementCenterX;\n  let translateY = centerY - elementCenterY;\n\n  if (offset) {\n    const applyOffset = (\n      value: string | undefined,\n      dimension: number,\n    ): number => {\n      return value ? (parseFloat(value) / 100) * dimension : 0;\n    };\n\n    translateX += applyOffset(offset.left, centerRect.width);\n    translateX -= applyOffset(offset.right, centerRect.width);\n    translateY += applyOffset(offset.top, centerRect.height);\n    translateY -= applyOffset(offset.bottom, centerRect.height);\n  }\n\n  return {\n    x: translateX,\n    y: translateY,\n  };\n};\n\n/**\n * Clears animations from elements.\n *\n * @param featuredElement - The featured element\n * @param gridContainer - The grid container element\n */\nconst clearElementAnimations = (\n  featuredElement: HTMLElement | null,\n  gridContainer: HTMLElement | null,\n): void => {\n  if (featuredElement) {\n    featuredElement.style.animation = 'none';\n  }\n  if (gridContainer) {\n    gridContainer.style.animation = 'none';\n  }\n};\n\n/**\n * Checks if the current device is mobile based on viewport width.\n *\n * @returns True if device is mobile (width < 768px)\n */\nconst isMobileDevice = (): boolean => {\n  return window.innerWidth < 768;\n};\n\n/**\n * Creates a resize handler function that only executes on actual window resizes.\n *\n * @param onResize - Callback to execute on resize\n * @param delay - Delay in milliseconds before executing callback\n * @returns Resize handler function\n */\nconst createResizeHandler = (\n  onResize: () => void,\n  delay: number = 300,\n): (() => void) => {\n  let timeoutId: NodeJS.Timeout | null = null;\n  let previousWidth = window.innerWidth;\n\n  return () => {\n    const currentWidth = window.innerWidth;\n\n    // Only trigger on width changes (actual resize, not mobile scroll)\n    if (currentWidth === previousWidth) {\n      return;\n    }\n\n    previousWidth = currentWidth;\n\n    if (timeoutId) {\n      clearTimeout(timeoutId);\n    }\n    timeoutId = setTimeout(() => {\n      onResize();\n      timeoutId = null;\n    }, delay);\n  };\n};\n\n/**\n * Sets opacity with optional transition.\n *\n * @param element - The element to modify\n * @param opacity - The opacity value\n * @param transition - Optional transition string\n */\nconst setElementOpacity = (\n  element: HTMLElement,\n  opacity: string,\n  transition?: string,\n): void => {\n  element.style.opacity = opacity;\n  if (transition) {\n    element.style.transition = transition;\n  }\n};\n\n/**\n * Validates required elements for animation.\n *\n * @param gridContainer - The grid container element\n * @param config - Configuration object\n * @returns True if all required elements are present\n */\nconst validateAnimationElements = (\n  gridContainer: HTMLElement | null,\n  config: Configuration | undefined,\n): boolean => {\n  return gridContainer !== null && config !== undefined;\n};\n\n/**\n * Applies dimension and position transforms to a grid element.\n *\n * @param element - The element to transform\n * @param itemConfig - Configuration for this specific item\n * @param featuredElement - The featured element for sizing reference\n * @param gridContainer - The grid container for position reference\n */\nconst applyElementTransforms = (\n  element: HTMLElement,\n  itemConfig: ConfigurationItem,\n  featuredElement: HTMLElement,\n): void => {\n  if (featuredElement) {\n    const windowWidth = window.innerWidth;\n    const windowHeight = window.innerHeight;\n    const featuredWidth = featuredElement.offsetWidth;\n    const featuredHeight = featuredElement.offsetHeight;\n    const isLargerThan40Percent =\n      featuredWidth > windowWidth * 0.41 ||\n      featuredHeight > windowHeight * 0.41;\n\n    if (!isLargerThan40Percent) {\n      element.style.width = `${featuredWidth}px`;\n      element.style.height = `${featuredHeight}px`;\n    } else {\n      const parentContainer = featuredElement.parentElement;\n      const parentWidth = parentContainer\n        ? parentContainer.offsetWidth\n        : windowWidth;\n\n      const { width: widthPercentage, height: heightVh } = getResponsiveSizes();\n      const width = Math.round(parentWidth * widthPercentage);\n      const height = Math.round(windowHeight * heightVh);\n\n      element.style.width = `${width}px`;\n      element.style.height = `${height}px`;\n    }\n  }\n\n  const transform = calculateCenterTransform(\n    element,\n    featuredElement,\n    itemConfig?.offset,\n  );\n  element.style.transform = `translate(${transform.x}px, ${transform.y}px)`;\n};\n\n/**\n * Processes all grid items for animation.\n *\n * @param gridContainer - The grid container element\n * @param config - Configuration object\n * @returns void\n */\nconst processGridAnimation = (\n  featuredElement: HTMLElement,\n  gridContainer: HTMLElement,\n  config: Configuration,\n): void => {\n  const gridItems = Array.from(gridContainer.children) as HTMLElement[];\n\n  gridItems.forEach((gridItem, index) => {\n    const element = getStackElementFromGridItem(gridItem, index);\n\n    if (!element) {\n      return;\n    }\n\n    const itemConfig = config.items[index];\n\n    applyElementTransforms(element, itemConfig, featuredElement);\n  });\n};\n\nconst createGridElement = (\n  element: HTMLImageElement | HTMLVideoElement,\n  index: number,\n  placement: ConfigurationItem,\n) => {\n  const rowStart = placement.row ? parseInt(placement.row.split(' / ')[0]) : 0;\n\n  const getStartRange = (row: number): number => {\n    if (row >= 13) return -70;\n    if (row >= 10 && row <= 12) return -40;\n    if (row >= 6 && row < 10) return 40;\n    return 80;\n  };\n\n  const getEndRange = (row: number): number => {\n    if (row >= 13) return 120;\n    if (row >= 10 && row <= 12) return 140;\n    if (row >= 6 && row < 10) return 160;\n    return 170;\n  };\n\n  const startRange = getStartRange(rowStart);\n  const endRange = getEndRange(rowStart);\n  const animationRangeStart = `${startRange}vh`;\n  const animationRangeEnd = `${endRange}vh`;\n\n  const builder = new ElementBuilder()\n    .withClassName(`${STACK_ELEMENT_CLASS}-${index}`)\n    .withStyles({\n      element: {\n        overflow: 'clip',\n        height: '100%',\n        width: '100%',\n\n        ...withViewTimelineAnimation({\n          animation: `${KEY_FRAME_GRID_EXPAND} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart,\n          animationRangeEnd,\n          animationDuration: '1ms',\n        }),\n      },\n    });\n\n  if (element.tagName === 'IMG') {\n    const backgroundImage = assets.image.background({\n      element: element as HTMLImageElement,\n      isScaled: true,\n    });\n    builder.withChild(backgroundImage);\n  }\n\n  return builder.build();\n};\n\nconst createGridItem = (\n  element: HTMLImageElement | HTMLVideoElement,\n  placement: ConfigurationItem,\n  index: number,\n) => {\n  const rowStart = placement.row ? parseInt(placement.row.split(' / ')[0]) : 0;\n  const startRange = rowStart > 8 ? 0 : 80;\n  const endRange = rowStart > 8 ? 200 : 200;\n  const animationRangeStart = `${startRange}vh`;\n  const animationRangeEnd = `${endRange}vh`;\n\n  const gridElement = createGridElement(element, index, placement);\n\n  return new ElementBuilder()\n    .withClassName(`${STACK_ITEM_CLASS}-${index}`)\n    .withStyles({\n      element: {\n        gridColumn: placement.column,\n        gridRow: placement.row,\n        zIndex: placement.zIndex || 1,\n        width: '100%',\n        height: '100%',\n\n        [`@media (${token.media.queries.large.max})`]: {\n          [`@supports not (animation-timeline: scroll())`]: {\n            display: 'none',\n          },\n        },\n\n        ...(isDisplayWithoutAnimation && {\n          display: 'none',\n        }),\n\n        ...withViewTimelineAnimation({\n          animation: `${KEY_FRAME_GRID_ITEM} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart,\n          animationRangeEnd,\n        }),\n      },\n    })\n    .withChild(gridElement)\n    .build();\n};\n\nconst createGrid = (props: CardStackProps) => {\n  const totalCount = props.images.length;\n  const config = getConfigurationByCount(totalCount);\n\n  if (!config) {\n    console.warn(`No configuration found for ${totalCount} elements`);\n    return new ElementBuilder().withClassName(STACK_GRID_ERROR_CLASS).build();\n  }\n\n  const gridItems = props.images.map((element, index) => {\n    const placement = config.items[index];\n    return createGridItem(element, placement, index);\n  });\n\n  const gridItemElements = gridItems.map((item) => item);\n\n  return new ElementBuilder()\n    .withClassName(STACK_GRID_CLASS)\n    .withStyles({\n      element: {\n        display: 'grid',\n        gridTemplateColumns: 'repeat(16, 1fr)',\n        gridTemplateRows: 'repeat(16, 2vh)',\n        gap: token.spacing.min,\n        minHeight: '300px',\n\n        [`@media (${token.media.queries.large.max})`]: {\n          '@supports not (animation-timeline: scroll())': {\n            width: '100%',\n          },\n        },\n\n        ...withViewTimelineAnimation({\n          gridTemplateColumns: config.layout.gridTemplateColumns,\n          gridTemplateRows: config.layout.gridTemplateRows,\n          transform: 'translate(-50%, -25%)',\n        }),\n      },\n    })\n    .withChildren(...gridItemElements)\n    .build();\n};\n\nconst createFeatured = (\n  element: HTMLImageElement | HTMLVideoElement,\n  isExpand: boolean,\n  totalCount: number,\n) => {\n  let video: ElementModel | undefined;\n  const { width: widthPercentage, height: heightVh } = getResponsiveSizes();\n\n  const builder = new ElementBuilder()\n    .withClassName(`${STACK_ELEMENT_CLASS}-featured`)\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: '20vh',\n        left: '50%',\n        transform: 'translateX(-50%)',\n        zIndex: 999,\n        width: `${widthPercentage * 100}%`,\n        height: `${heightVh * 100}vh`,\n\n        ...(isDisplayWithoutAnimation && {\n          top: '0',\n        }),\n\n        [`@media (${token.media.queries.large.max})`]: {\n          '@supports not (animation-timeline: view())': {\n            width: '100% !important',\n            height: '100% !important',\n            top: '0',\n          },\n        },\n\n        ...(isExpand && {\n          ...withViewTimelineAnimation({\n            top: '30vh',\n            animation: `${KEY_FRAME_FEATURED_SIZE} ease-in-out forwards`,\n            animationTimeline: 'view()',\n            animationRangeStart: `${100 + (totalCount - 4) * 10}vh`,\n            animationRangeEnd: '250vh',\n          }),\n        }),\n      },\n    });\n\n  if (element.tagName === 'IMG') {\n    const backgroundImage = assets.image.background({\n      element: element as HTMLImageElement,\n      isScaled: true,\n    });\n    builder.withChild(backgroundImage);\n  }\n\n  if (element.tagName === 'VIDEO') {\n    element.setAttribute('muted', 'true');\n    element.setAttribute('playsinline', 'true');\n    element.setAttribute('loop', 'true');\n\n    video = assets.video.toggle({\n      video: element as HTMLVideoElement,\n      isScaled: true,\n    });\n\n    if (video && video.element instanceof HTMLElement) {\n      builder.withChild(video as ElementModel & { element: HTMLElement });\n    }\n  }\n\n  const featuredElement = builder.build();\n\n  if (isExpand && featuredElement.element instanceof HTMLElement) {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            if (video?.events?.setPlay) video.events.setPlay();\n            observer.disconnect();\n          }\n        });\n      },\n      {\n        rootMargin: `-${100 + (totalCount - 4) * 10}px 0px 0px 0px`,\n        threshold: 0,\n      },\n    );\n\n    observer.observe(featuredElement.element);\n  }\n\n  return featuredElement;\n};\n\nconst createSticky = (props: CardStackProps) => {\n  const grid = createGrid(props);\n  const featured = createFeatured(\n    props.featured,\n    props.isExpandFeature,\n    props.images.length,\n  );\n\n  const wrapper = new ElementBuilder()\n    .withClassName(`${STACK_CONTAINER_CLASS}-sticky-wrapper`)\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        ...withViewTimelineAnimation({\n          position: 'sticky',\n          top: 0,\n        }),\n      },\n    })\n    .withChildren(grid, featured)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName(`${STACK_CONTAINER_CLASS}-sticky`)\n    .withStyles({\n      element: {\n        ...withViewTimelineAnimation({\n          height: '200vh',\n\n          ...(props.isExpandFeature && {\n            height: '250vh',\n          }),\n        }),\n      },\n    })\n    .withChild(wrapper)\n    .build();\n};\n\nexport default (props: CardStackProps) => {\n  const sticky = createSticky(props);\n\n  const composite = new ElementBuilder()\n    .withClassName(STACK_CONTAINER_CLASS)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        opacity: '0',\n        overflow: 'clip',\n      },\n    })\n    .withChild(sticky)\n    .build();\n\n  const loadAnimation = async () => {\n    const totalCount = props.images.length;\n    const config = getConfigurationByCount(totalCount);\n    const gridContainer = composite.element.querySelector(\n      `.${STACK_GRID_CLASS}`,\n    ) as HTMLElement;\n    const featuredElement = composite.element.querySelector(\n      `.${STACK_ELEMENT_CLASS}-featured`,\n    ) as HTMLElement;\n    let animationsCleared = false;\n\n    if (!validateAnimationElements(gridContainer, config)) {\n      return;\n    }\n\n    const clearAnimations = () => {\n      if (animationsCleared) return;\n\n      clearElementAnimations(featuredElement, gridContainer);\n      animationsCleared = true;\n\n      setTimeout(() => {\n        processGridAnimation(props.featured, gridContainer!, config!);\n      }, 100);\n    };\n\n    try {\n      await waitForMediaLoad(gridContainer!);\n    } catch (error) {\n      console.warn('Media loading failed, proceeding with animation:', error);\n    }\n\n    processGridAnimation(props.featured, gridContainer!, config!);\n    setElementOpacity(composite.element, '1');\n\n    if (!isMobileDevice()) {\n      const resizeHandler = createResizeHandler(() => {\n        setTimeout(() => {\n          processGridAnimation(props.featured, gridContainer!, config!);\n          setTimeout(() => {\n            setElementOpacity(composite.element, '1');\n            animationsCleared = false;\n          }, 100);\n        }, 200);\n      });\n\n      window.addEventListener('resize', () => {\n        if (isMobileDevice()) {\n          return;\n        }\n\n        if (composite.element.style.opacity === '1') {\n          setElementOpacity(composite.element, '0', 'opacity 0.3s ease-in-out');\n        }\n\n        clearAnimations();\n        resizeHandler();\n      });\n    }\n  };\n\n  composite.styles += keyFrameGridExpand;\n  composite.styles += keyFrameGridItem;\n  composite.styles += keyFrameFeaturedSize;\n\n  return {\n    ...composite,\n    events: {\n      loadAnimation,\n    },\n  };\n};\n"],"names":["index","assets.image.background","assets.video.toggle"],"mappings":"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"}

package/dist/atomic/animations/brand/chevron-flow.mjs

@@ -1,278 +0,0 @@
-const ELEMENT_CONTAINER = "animation-overlay-container";
-const ELEMENT_LAYER_OVERLAY_CONTAINER = "animation-overlay-layer-container";
-const ELEMENT_LAYER_RED_ARROW_CONTAINER = "animation-overlay-layer-red-arrow-container";
-const ELEMENT_LAYER_BLACK_ARROW_CONTAINER = "animation-overlay-layer-black-arrow-container";
-const ELEMENT_GENERIC_ARROW = "aninmation-arrow";
-const ID_OVERLAY_LEFT = "animation-overlay-left";
-const ID_OVERLAY_RIGHT = "animation-overlay-right";
-const ID_SLIDE_IN_RED = "slide-in-red-arrow";
-const ID_ARROW_BEHIND_OVERLAY = "animation-overlay-arrow";
-const ID_ARROW_BEHIND_FOLLOWING = "animation-following-arrow";
-const ID_ARROW_BEHIND_FOLLOWING_TWO = "animation-following-arrow-two";
-const TIMING_ANIMATION_ARROW_FIRST_TIME_IN = 1200;
-const TIMING_ANIMATION_ARROW_FIRST_TIME_OUT = 4500;
-const FollowingArrowStyles = `
-  .${ELEMENT_LAYER_BLACK_ARROW_CONTAINER} {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    transform: translate(-140%, -50%);
-    height: 100%;
-    z-index: 99;
-  }
-
-  .${ELEMENT_LAYER_BLACK_ARROW_CONTAINER} path {
-    fill: #000;
-  }
-
-  #${ID_ARROW_BEHIND_FOLLOWING} {
-    transform: translateX(-90%);
-  }
-`;
-const MainArrowStyles = `
-  .${ELEMENT_LAYER_RED_ARROW_CONTAINER} {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    transform: translate(-100%, -50%);
-    z-index: 999;
-    display: flex;
-    align-items: center;
-  }
-
-  .${ELEMENT_GENERIC_ARROW} {
-    height: 100%;
-  }
-`;
-const OverlayStyles = `
-  .${ELEMENT_LAYER_OVERLAY_CONTAINER} {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: auto;
-    height: auto;
-    min-width: 100%;
-    min-height: 100%;
-    z-index: 9;
-    display: flex;
-  }
-
-  #${ID_OVERLAY_RIGHT} {
-    width: 50%;
-  }
-
-  #${ID_OVERLAY_LEFT} {
-    width: 50%;
-  }
-
-  #${ID_ARROW_BEHIND_OVERLAY} {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    transform: translate(-60%, -50%);
-    height: 100%;
-    z-index: 9;
-    fill: #000;
-  }
-
-  #${ID_ARROW_BEHIND_OVERLAY} path {
-    fill: #000;
-  }
-`;
-const STYLES_ANIMATION_BRAND_OVERLAY_ELEMENT = `
-  ${OverlayStyles}
-  ${MainArrowStyles}
-  ${FollowingArrowStyles}
-
-  @media (prefers-reduced-motion: reduce) {
-    .${ELEMENT_CONTAINER} svg {
-      display: none;
-    }
-  }
-`;
-const CreateAnimatioOverlayContainer = (props) => {
-  const { container } = props;
-  const wrapper = document.createElement("div");
-  const SVG_OVERLAY_LEFT = `<svg id="${ID_OVERLAY_LEFT}" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="60 0 857.57 976"><defs><style>.overlay-left{fill:#000;fill-rule:evenodd;stroke-width:0px;}</style></defs><path class="overlay-left" d="M492.28,0H0v976h503.46l414.11-481.49L492.28,0Z"/></svg>`;
-  const SVG_OVERLAY_RIGHT = `<svg id="${ID_OVERLAY_RIGHT}" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 690.15 976"><defs><style>.overlay-right{fill:#000;fill-rule:evenodd;stroke-width:0px;}</style></defs><path class="overlay-right" d="M11.18,976l414.11-481.49L0,0h690.15v976H11.18Z"/></svg>`;
-  wrapper.classList.add(ELEMENT_LAYER_OVERLAY_CONTAINER);
-  wrapper.innerHTML = `${SVG_OVERLAY_LEFT} ${SVG_OVERLAY_RIGHT}`;
-  container.appendChild(wrapper);
-  return wrapper;
-};
-const CreateAnimationArrowContainer = (props) => {
-  const { container, id, wrapperStyleRef } = props;
-  const wrapper = document.createElement("div");
-  const SVG_ANIMATION_ARROW = `<svg id="${id}" class="${ELEMENT_GENERIC_ARROW}" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 973.01 976"><defs><style>.arrow-video{fill:#e21833;fill-rule:evenodd;}</style></defs><path class="arrow-video" d="m427.44,497.01L0,0h545.57l427.44,497.01-411.96,478.99H15.48l411.96-478.99Z"/></svg>`;
-  if (wrapperStyleRef) {
-    wrapper.classList.add(wrapperStyleRef);
-  }
-  wrapper.innerHTML = `${SVG_ANIMATION_ARROW}`;
-  container.appendChild(wrapper);
-  return wrapper;
-};
-const SizeElements = {
-  Arrow: ({ arrow, height }) => {
-    arrow.style.height = `${height}px`;
-  },
-  Arrows: (props) => {
-    const { container, getContainerHeight } = props;
-    const height = getContainerHeight();
-    const ArrowContainers = Array.from(
-      container.querySelectorAll(`.${ELEMENT_GENERIC_ARROW}`)
-    );
-    ArrowContainers.forEach((arrow) => SizeElements.Arrow({ arrow, height }));
-  },
-  All: (props) => {
-    SizeElements.Arrows(props);
-  }
-};
-const AnimateFollowingArrows = (props) => {
-  const { container } = props;
-  const arrow = container.querySelector(
-    `#${ID_ARROW_BEHIND_FOLLOWING}`
-  );
-  const arrowTwo = container.querySelector(
-    `#${ID_ARROW_BEHIND_FOLLOWING_TWO}`
-  );
-  setTimeout(() => {
-    arrow.style.transition = `transform ${TIMING_ANIMATION_ARROW_FIRST_TIME_OUT - 2400}ms ease-in-out`;
-    arrow.style.transform = `translateX(200vw)`;
-  }, TIMING_ANIMATION_ARROW_FIRST_TIME_IN + 120);
-  setTimeout(() => {
-    arrowTwo.style.transition = `transform ${TIMING_ANIMATION_ARROW_FIRST_TIME_OUT - 2800}ms ease-in-out`;
-    arrowTwo.style.transform = `translateX(200vw)`;
-  }, TIMING_ANIMATION_ARROW_FIRST_TIME_IN + 200);
-};
-const AnimateMainArrow = (props) => {
-  const { container, getContainerHeight, getHeightDiff } = props;
-  const arrow = container.querySelector(
-    `#${ID_SLIDE_IN_RED}`
-  );
-  const height = getContainerHeight();
-  const overlayLeft = container.querySelector(
-    `#${ID_OVERLAY_LEFT}`
-  );
-  const overlayPosition = overlayLeft.getBoundingClientRect();
-  const arrowPosition = arrow.getBoundingClientRect();
-  const diff = getHeightDiff();
-  const alignment = overlayPosition.width / 2 + Math.abs(arrowPosition.left) + diff - Math.abs(overlayPosition.left);
-  SizeElements.Arrow({ arrow, height });
-  arrow.style.transition = `transform ${TIMING_ANIMATION_ARROW_FIRST_TIME_IN}ms ease-in-out`;
-  arrow.style.transform = `translateX(${alignment}px)`;
-  setTimeout(() => {
-    arrow.style.transition = `transform ${TIMING_ANIMATION_ARROW_FIRST_TIME_OUT}ms ease-in-out`;
-    arrow.style.transform = `translateX(${alignment * 3}px)`;
-  }, TIMING_ANIMATION_ARROW_FIRST_TIME_IN);
-};
-const AnimateOverlay = (props) => {
-  const { container, completedCallback } = props;
-  const partOne = container.querySelector(`#${ID_OVERLAY_LEFT}`);
-  const partTwo = container.querySelector(`#${ID_OVERLAY_RIGHT}`);
-  const partThree = container.querySelector(
-    `#${ID_ARROW_BEHIND_OVERLAY}`
-  );
-  const endPosition = window.innerWidth * 2;
-  const FIRST_ELEMENT_TIME_OUT = 3500;
-  const SYNC_TIME = TIMING_ANIMATION_ARROW_FIRST_TIME_IN + FIRST_ELEMENT_TIME_OUT - 3e3;
-  const completedTiming = TIMING_ANIMATION_ARROW_FIRST_TIME_OUT - 3600;
-  setTimeout(() => {
-    partTwo.style.transition = `transform ${FIRST_ELEMENT_TIME_OUT}ms ease-in-out`;
-    partTwo.style.transform = `translateX(${endPosition}px`;
-  }, TIMING_ANIMATION_ARROW_FIRST_TIME_IN - 200);
-  setTimeout(() => {
-    partOne.style.transition = `transform ${completedTiming}ms ease-in-out`;
-    partOne.style.transform = `translateX(${endPosition}px`;
-  }, SYNC_TIME + 100);
-  setTimeout(() => {
-    partThree.style.transition = `transform ${completedTiming}ms ease-in-out`;
-    partThree.style.transform = `translate(${endPosition}px, -50%)`;
-  }, SYNC_TIME + 50);
-  if (completedCallback) {
-    setTimeout(() => completedCallback(), SYNC_TIME);
-  }
-};
-const AnimationSequence = (props) => {
-  AnimateOverlay(props);
-  AnimateMainArrow(props);
-  AnimateFollowingArrows(props);
-};
-const chevronFlow = ({
-  sizedContainer,
-  completedCallback,
-  isAnimationOnLoad = true
-}) => (() => {
-  const container = document.createElement("div");
-  let windowWidth = window.innerWidth;
-  let styles = STYLES_ANIMATION_BRAND_OVERLAY_ELEMENT;
-  const getContainerHeight = () => sizedContainer.offsetHeight;
-  const getHeightDiff = () => {
-    return sizedContainer.offsetHeight;
-  };
-  const data = {
-    container,
-    getHeightDiff,
-    getContainerHeight,
-    completedCallback
-  };
-  const overlay = CreateAnimatioOverlayContainer(data);
-  const overlayArrow = CreateAnimationArrowContainer({
-    ...data,
-    id: ID_ARROW_BEHIND_OVERLAY
-  });
-  const slideInArrow = CreateAnimationArrowContainer({
-    ...data,
-    id: ID_SLIDE_IN_RED,
-    wrapperStyleRef: ELEMENT_LAYER_RED_ARROW_CONTAINER
-  });
-  const slideInArrowBlackOne = CreateAnimationArrowContainer({
-    ...data,
-    id: ID_ARROW_BEHIND_FOLLOWING,
-    wrapperStyleRef: ELEMENT_LAYER_BLACK_ARROW_CONTAINER
-  });
-  const slideInArrowBlackTwo = CreateAnimationArrowContainer({
-    ...data,
-    id: ID_ARROW_BEHIND_FOLLOWING_TWO,
-    wrapperStyleRef: ELEMENT_LAYER_BLACK_ARROW_CONTAINER
-  });
-  const EventLoad = () => {
-    if (isAnimationOnLoad) {
-      AnimationSequence(data);
-      return;
-    }
-    const scrollEvent = () => {
-      const containerPosition = container.getBoundingClientRect();
-      const top = containerPosition.top;
-      if (top < window.innerHeight && window.scrollY !== 0) {
-        AnimationSequence(data);
-        window.removeEventListener("scroll", scrollEvent);
-      }
-    };
-    window.addEventListener("scroll", scrollEvent);
-  };
-  const EventResize = () => {
-    if (windowWidth !== window.innerWidth) {
-      window.removeEventListener("resize", EventResize);
-      container.remove();
-    }
-  };
-  container.classList.add(ELEMENT_CONTAINER);
-  container.appendChild(overlay);
-  container.appendChild(overlayArrow);
-  container.appendChild(slideInArrow);
-  container.appendChild(slideInArrowBlackOne);
-  container.appendChild(slideInArrowBlackTwo);
-  window.addEventListener("resize", EventResize);
-  return {
-    element: container,
-    styles,
-    events: {
-      load: EventLoad
-    }
-  };
-})();
-export {
-  chevronFlow as default
-};
-//# sourceMappingURL=chevron-flow.mjs.map

package/dist/atomic/animations/brand/chevron-flow.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"chevron-flow.mjs","sources":["../../../../source/atomic/animations/brand/chevron-flow.ts"],"sourcesContent":["type TypeAnimationProps = {\n  container: HTMLDivElement;\n  getHeightDiff: () => number;\n  getContainerHeight: () => number;\n  completedCallback?: () => void;\n};\n\ntype TypeArrowProps = TypeAnimationProps & {\n  id: string;\n  wrapperStyleRef?: string;\n};\n\nconst ELEMENT_CONTAINER = 'animation-overlay-container';\nconst ELEMENT_LAYER_OVERLAY_CONTAINER = 'animation-overlay-layer-container';\nconst ELEMENT_LAYER_RED_ARROW_CONTAINER =\n  'animation-overlay-layer-red-arrow-container';\nconst ELEMENT_LAYER_BLACK_ARROW_CONTAINER =\n  'animation-overlay-layer-black-arrow-container';\nconst ELEMENT_GENERIC_ARROW = 'aninmation-arrow';\n\nconst ID_OVERLAY_LEFT = 'animation-overlay-left';\nconst ID_OVERLAY_RIGHT = 'animation-overlay-right';\nconst ID_SLIDE_IN_RED = 'slide-in-red-arrow';\nconst ID_ARROW_BEHIND_OVERLAY = 'animation-overlay-arrow';\nconst ID_ARROW_BEHIND_FOLLOWING = 'animation-following-arrow';\nconst ID_ARROW_BEHIND_FOLLOWING_TWO = 'animation-following-arrow-two';\n\nconst TIMING_ANIMATION_ARROW_FIRST_TIME_IN = 1200;\nconst TIMING_ANIMATION_ARROW_FIRST_TIME_OUT = 4500;\n\nconst FollowingArrowStyles = `\n  .${ELEMENT_LAYER_BLACK_ARROW_CONTAINER} {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translate(-140%, -50%);\n    height: 100%;\n    z-index: 99;\n  }\n\n  .${ELEMENT_LAYER_BLACK_ARROW_CONTAINER} path {\n    fill: #000;\n  }\n\n  #${ID_ARROW_BEHIND_FOLLOWING} {\n    transform: translateX(-90%);\n  }\n`;\n\nconst MainArrowStyles = `\n  .${ELEMENT_LAYER_RED_ARROW_CONTAINER} {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translate(-100%, -50%);\n    z-index: 999;\n    display: flex;\n    align-items: center;\n  }\n\n  .${ELEMENT_GENERIC_ARROW} {\n    height: 100%;\n  }\n`;\n\nconst OverlayStyles = `\n  .${ELEMENT_LAYER_OVERLAY_CONTAINER} {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: auto;\n    height: auto;\n    min-width: 100%;\n    min-height: 100%;\n    z-index: 9;\n    display: flex;\n  }\n\n  #${ID_OVERLAY_RIGHT} {\n    width: 50%;\n  }\n\n  #${ID_OVERLAY_LEFT} {\n    width: 50%;\n  }\n\n  #${ID_ARROW_BEHIND_OVERLAY} {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translate(-60%, -50%);\n    height: 100%;\n    z-index: 9;\n    fill: #000;\n  }\n\n  #${ID_ARROW_BEHIND_OVERLAY} path {\n    fill: #000;\n  }\n`;\n\nconst STYLES_ANIMATION_BRAND_OVERLAY_ELEMENT = `\n  ${OverlayStyles}\n  ${MainArrowStyles}\n  ${FollowingArrowStyles}\n\n  @media (prefers-reduced-motion: reduce) {\n    .${ELEMENT_CONTAINER} svg {\n      display: none;\n    }\n  }\n`;\n\nconst CreateAnimatioOverlayContainer = (props: TypeAnimationProps) => {\n  const { container } = props;\n  const wrapper = document.createElement('div');\n  const SVG_OVERLAY_LEFT = `<svg id=\"${ID_OVERLAY_LEFT}\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"60 0 857.57 976\"><defs><style>.overlay-left{fill:#000;fill-rule:evenodd;stroke-width:0px;}</style></defs><path class=\"overlay-left\" d=\"M492.28,0H0v976h503.46l414.11-481.49L492.28,0Z\"/></svg>`;\n  const SVG_OVERLAY_RIGHT = `<svg id=\"${ID_OVERLAY_RIGHT}\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 690.15 976\"><defs><style>.overlay-right{fill:#000;fill-rule:evenodd;stroke-width:0px;}</style></defs><path class=\"overlay-right\" d=\"M11.18,976l414.11-481.49L0,0h690.15v976H11.18Z\"/></svg>`;\n\n  wrapper.classList.add(ELEMENT_LAYER_OVERLAY_CONTAINER);\n  wrapper.innerHTML = `${SVG_OVERLAY_LEFT} ${SVG_OVERLAY_RIGHT}`;\n  container.appendChild(wrapper);\n  return wrapper;\n};\n\nconst CreateAnimationArrowContainer = (props: TypeArrowProps) => {\n  const { container, id, wrapperStyleRef } = props;\n  const wrapper = document.createElement('div');\n\n  const SVG_ANIMATION_ARROW = `<svg id=\"${id}\" class=\"${ELEMENT_GENERIC_ARROW}\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 973.01 976\"><defs><style>.arrow-video{fill:#e21833;fill-rule:evenodd;}</style></defs><path class=\"arrow-video\" d=\"m427.44,497.01L0,0h545.57l427.44,497.01-411.96,478.99H15.48l411.96-478.99Z\"/></svg>`;\n\n  if (wrapperStyleRef) {\n    wrapper.classList.add(wrapperStyleRef);\n  }\n\n  wrapper.innerHTML = `${SVG_ANIMATION_ARROW}`;\n\n  container.appendChild(wrapper);\n\n  return wrapper;\n};\n\nconst SizeElements = {\n  Arrow: ({ arrow, height }: { arrow: HTMLDivElement; height: number }) => {\n    arrow.style.height = `${height}px`;\n  },\n  Arrows: (props: TypeAnimationProps) => {\n    const { container, getContainerHeight } = props;\n    const height = getContainerHeight();\n\n    const ArrowContainers = Array.from(\n      container.querySelectorAll(`.${ELEMENT_GENERIC_ARROW}`),\n    ) as HTMLDivElement[];\n\n    ArrowContainers.forEach((arrow) => SizeElements.Arrow({ arrow, height }));\n  },\n  All: (props: TypeAnimationProps) => {\n    SizeElements.Arrows(props);\n  },\n};\n\nconst AnimateFollowingArrows = (props: TypeAnimationProps) => {\n  const { container } = props;\n  const arrow = container.querySelector(\n    `#${ID_ARROW_BEHIND_FOLLOWING}`,\n  ) as HTMLDivElement;\n  const arrowTwo = container.querySelector(\n    `#${ID_ARROW_BEHIND_FOLLOWING_TWO}`,\n  ) as HTMLDivElement;\n\n  setTimeout(() => {\n    arrow.style.transition = `transform ${\n      TIMING_ANIMATION_ARROW_FIRST_TIME_OUT - 2400\n    }ms ease-in-out`;\n    arrow.style.transform = `translateX(200vw)`;\n  }, TIMING_ANIMATION_ARROW_FIRST_TIME_IN + 120);\n\n  setTimeout(() => {\n    arrowTwo.style.transition = `transform ${\n      TIMING_ANIMATION_ARROW_FIRST_TIME_OUT - 2800\n    }ms ease-in-out`;\n    arrowTwo.style.transform = `translateX(200vw)`;\n  }, TIMING_ANIMATION_ARROW_FIRST_TIME_IN + 200);\n};\n\nconst AnimateMainArrow = (props: TypeAnimationProps) => {\n  const { container, getContainerHeight, getHeightDiff } = props;\n  const arrow = container.querySelector(\n    `#${ID_SLIDE_IN_RED}`,\n  ) as HTMLDivElement;\n  const height = getContainerHeight();\n  const overlayLeft = container.querySelector(\n    `#${ID_OVERLAY_LEFT}`,\n  ) as SVGElement;\n  const overlayPosition = overlayLeft.getBoundingClientRect();\n  const arrowPosition = arrow.getBoundingClientRect();\n  const diff = getHeightDiff();\n  const alignment =\n    overlayPosition.width / 2 +\n    Math.abs(arrowPosition.left) +\n    diff -\n    Math.abs(overlayPosition.left);\n\n  SizeElements.Arrow({ arrow, height });\n  arrow.style.transition = `transform ${TIMING_ANIMATION_ARROW_FIRST_TIME_IN}ms ease-in-out`;\n  arrow.style.transform = `translateX(${alignment}px)`;\n\n  setTimeout(() => {\n    arrow.style.transition = `transform ${TIMING_ANIMATION_ARROW_FIRST_TIME_OUT}ms ease-in-out`;\n    arrow.style.transform = `translateX(${alignment * 3}px)`;\n  }, TIMING_ANIMATION_ARROW_FIRST_TIME_IN);\n};\n\nconst AnimateOverlay = (props: TypeAnimationProps) => {\n  const { container, completedCallback } = props;\n  const partOne = container.querySelector(`#${ID_OVERLAY_LEFT}`) as SVGElement;\n  const partTwo = container.querySelector(`#${ID_OVERLAY_RIGHT}`) as SVGElement;\n  const partThree = container.querySelector(\n    `#${ID_ARROW_BEHIND_OVERLAY}`,\n  ) as SVGElement;\n  const endPosition = window.innerWidth * 2;\n  const FIRST_ELEMENT_TIME_OUT = 3500;\n  const SYNC_TIME =\n    TIMING_ANIMATION_ARROW_FIRST_TIME_IN + FIRST_ELEMENT_TIME_OUT - 3000;\n  const completedTiming = TIMING_ANIMATION_ARROW_FIRST_TIME_OUT - 3600;\n\n  setTimeout(() => {\n    partTwo.style.transition = `transform ${FIRST_ELEMENT_TIME_OUT}ms ease-in-out`;\n    partTwo.style.transform = `translateX(${endPosition}px`;\n  }, TIMING_ANIMATION_ARROW_FIRST_TIME_IN - 200);\n\n  setTimeout(() => {\n    partOne.style.transition = `transform ${completedTiming}ms ease-in-out`;\n    partOne.style.transform = `translateX(${endPosition}px`;\n  }, SYNC_TIME + 100);\n\n  setTimeout(() => {\n    partThree.style.transition = `transform ${completedTiming}ms ease-in-out`;\n    partThree.style.transform = `translate(${endPosition}px, -50%)`;\n  }, SYNC_TIME + 50);\n\n  if (completedCallback) {\n    setTimeout(() => completedCallback(), SYNC_TIME);\n  }\n};\n\nconst AnimationSequence = (props: TypeAnimationProps) => {\n  AnimateOverlay(props);\n  AnimateMainArrow(props);\n  AnimateFollowingArrows(props);\n};\n\nexport default ({\n  sizedContainer,\n  completedCallback,\n  isAnimationOnLoad = true,\n}: {\n  sizedContainer: HTMLElement;\n  sizedWrapper: HTMLElement;\n  completedCallback?: () => void;\n  isAnimationOnLoad?: boolean;\n}) =>\n  (() => {\n    const container = document.createElement('div');\n    let windowWidth = window.innerWidth;\n    let styles = STYLES_ANIMATION_BRAND_OVERLAY_ELEMENT;\n\n    const getContainerHeight = () => sizedContainer.offsetHeight;\n    const getHeightDiff = () => {\n      return sizedContainer.offsetHeight;\n    };\n    const data = {\n      container: container,\n      getHeightDiff,\n      getContainerHeight,\n      completedCallback,\n    };\n    const overlay = CreateAnimatioOverlayContainer(data);\n    const overlayArrow = CreateAnimationArrowContainer({\n      ...data,\n      id: ID_ARROW_BEHIND_OVERLAY,\n    });\n    const slideInArrow = CreateAnimationArrowContainer({\n      ...data,\n      id: ID_SLIDE_IN_RED,\n      wrapperStyleRef: ELEMENT_LAYER_RED_ARROW_CONTAINER,\n    });\n    const slideInArrowBlackOne = CreateAnimationArrowContainer({\n      ...data,\n      id: ID_ARROW_BEHIND_FOLLOWING,\n      wrapperStyleRef: ELEMENT_LAYER_BLACK_ARROW_CONTAINER,\n    });\n    const slideInArrowBlackTwo = CreateAnimationArrowContainer({\n      ...data,\n      id: ID_ARROW_BEHIND_FOLLOWING_TWO,\n      wrapperStyleRef: ELEMENT_LAYER_BLACK_ARROW_CONTAINER,\n    });\n    const EventLoad = () => {\n      if (isAnimationOnLoad) {\n        AnimationSequence(data);\n        return;\n      }\n\n      const scrollEvent = () => {\n        const containerPosition = container.getBoundingClientRect();\n        const top = containerPosition.top;\n\n        if (top < window.innerHeight && window.scrollY !== 0) {\n          AnimationSequence(data);\n          window.removeEventListener('scroll', scrollEvent);\n        }\n      };\n\n      window.addEventListener('scroll', scrollEvent);\n    };\n    const EventResize = () => {\n      if (windowWidth !== window.innerWidth) {\n        window.removeEventListener('resize', EventResize);\n        container.remove();\n      }\n    };\n\n    container.classList.add(ELEMENT_CONTAINER);\n    container.appendChild(overlay);\n    container.appendChild(overlayArrow);\n    container.appendChild(slideInArrow);\n    container.appendChild(slideInArrowBlackOne);\n    container.appendChild(slideInArrowBlackTwo);\n\n    window.addEventListener('resize', EventResize);\n\n    return {\n      element: container,\n      styles,\n      events: {\n        load: EventLoad,\n      },\n    };\n  })();\n"],"names":[],"mappings":"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"}

package/dist/atomic/animations/brand/chevron-scroll.mjs

@@ -1,169 +0,0 @@
-import * as token from "@universityofmaryland/web-token-library";
-const ICON_CHEVRON_BIG = `<svg width="252" height="306" aria-hidden="true" viewBox="0 0 252 306" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M126 0H0L126 152.706L0 305.411H126L252 152.706L126 0Z" /></svg>`;
-const ICON_CHEVRON_SMALL = `<svg width="144" height="202" aria-hidden="true"  viewBox="0 0 144 202" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.3972 0H0L83.6028 100.765L0 201.529H60.3972L144 100.765L60.3972 0Z" /></svg>`;
-const ELEMENT_ANIMATION_BRAND_LOGO = "brand-logo-container";
-const ELEMENT_FIRST_CHEVRON = "brand-logo-first-chevron";
-const ELEMENT_SECOND_CHEVRON = "brand-logo-second-chevron";
-const ELEMENT_THIRD_CHEVRON = "brand-logo-third-chevron";
-const FirstChevronStyles = `
-  @keyframes chevron-one {
-    from { transform: translateX(-80%); }
-    to { transform: translateX(40%); }
-  }
-
-  .${ELEMENT_FIRST_CHEVRON} {
-    top: 0;
-    transform: translateX(-80%);
-  }
-
-  .${ELEMENT_FIRST_CHEVRON} svg {
-    fill: ${token.color.gold};
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-      .${ELEMENT_FIRST_CHEVRON} {
-        transform: translateX(40%);
-        animation: chevron-one forwards;
-        animation-timeline: view();
-        animation-range-start: cover;
-        animation-range-end: contain;
-      }
-    }
-  }
-`;
-const SecondChevronStyles = `
-  @keyframes chevron-two {
-    from { transform: translateX(-40%); }
-    to { transform: translateX(24%); }
-  }
-
-  .${ELEMENT_SECOND_CHEVRON} {
-    top: 10%;
-    z-index: 99;
-    transform: translateX(-40%);
-  }
-
-  @media (${token.media.queries.highDef.min}) {
-    .${ELEMENT_SECOND_CHEVRON} {
-       top: 95px;
-    }
-  }
-
-  .${ELEMENT_SECOND_CHEVRON} svg {
-    fill: ${token.color.red};
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-      .${ELEMENT_SECOND_CHEVRON} {
-        transform: translateX(24%);
-        animation: chevron-two forwards;
-        animation-timeline: view();
-        animation-range-start: cover;
-       animation-range-end: contain;
-      }
-    }
-  }
-`;
-const ThirdChevronStyles = `
-  @keyframes chevron-three {
-    from { transform: translateX(-30%); }
-    to { transform: translateX(60%); }
-  }
-
-  .${ELEMENT_THIRD_CHEVRON} {
-    top: 25%;
-    transform: translateX(-30%);
-  }
-
-  @media (${token.media.queries.highDef.min}) {
-    .${ELEMENT_THIRD_CHEVRON} {
-       top: 195px;
-    }
-  }
-
-  .${ELEMENT_THIRD_CHEVRON} svg {
-    fill: ${token.color.black};
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-      .${ELEMENT_THIRD_CHEVRON} {
-        transform: translateX(60%);
-        animation: chevron-three forwards;
-        animation-timeline: view();
-        animation-range-start: 0;
-        animation-range-end: 100vh;
-      }
-    }
-  }
-`;
-const STYLES_ANIMATION_BRAND_LOGO = `
-  .${ELEMENT_ANIMATION_BRAND_LOGO} {
-    position: relative;
-    height: 50vw;
-    width: 100vw;
-  }
-
-  .${ELEMENT_ANIMATION_BRAND_LOGO} > * {
-    position: absolute;
-    height: 100%;
-    right: 0;
-    transform: none;
-  }
-
-  .${ELEMENT_SECOND_CHEVRON} svg,
-  .${ELEMENT_THIRD_CHEVRON} svg {
-    height: 10vw;
-    width: 8.2vw;
-  }
-
-  @media (${token.media.queries.highDef.min}) {
-    .${ELEMENT_SECOND_CHEVRON} svg,
-    .${ELEMENT_THIRD_CHEVRON} svg {
-      height: 306px;
-      width: 252px;
-    }
-  }
-
-  .${FirstChevronStyles} svg {
-    height: 7vw;
-    width: 5vw;
-  }
-
-  @media (${token.media.queries.highDef.min}) {
-    .${FirstChevronStyles} svg {
-      height: 202px;
-      width: 144px;
-    }
-  }
-
-  ${FirstChevronStyles} 
-  ${SecondChevronStyles} 
-  ${ThirdChevronStyles} 
-`;
-const chevronScroll = () => (() => {
-  const container = document.createElement("div");
-  const first = document.createElement("div");
-  const second = document.createElement("div");
-  const third = document.createElement("div");
-  first.classList.add(ELEMENT_FIRST_CHEVRON);
-  first.innerHTML = ICON_CHEVRON_SMALL;
-  second.classList.add(ELEMENT_SECOND_CHEVRON);
-  second.innerHTML = ICON_CHEVRON_BIG;
-  third.classList.add(ELEMENT_THIRD_CHEVRON);
-  third.innerHTML = ICON_CHEVRON_BIG;
-  container.classList.add(ELEMENT_ANIMATION_BRAND_LOGO);
-  container.appendChild(first);
-  container.appendChild(second);
-  container.appendChild(third);
-  return {
-    element: container,
-    styles: STYLES_ANIMATION_BRAND_LOGO
-  };
-})();
-export {
-  chevronScroll as default
-};
-//# sourceMappingURL=chevron-scroll.mjs.map

package/dist/atomic/animations/brand/chevron-scroll.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"chevron-scroll.mjs","sources":["../../../../source/atomic/animations/brand/chevron-scroll.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\n\nconst ICON_CHEVRON_BIG = `<svg width=\"252\" height=\"306\" aria-hidden=\"true\" viewBox=\"0 0 252 306\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M126 0H0L126 152.706L0 305.411H126L252 152.706L126 0Z\" /></svg>`;\nconst ICON_CHEVRON_SMALL = `<svg width=\"144\" height=\"202\" aria-hidden=\"true\"  viewBox=\"0 0 144 202\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M60.3972 0H0L83.6028 100.765L0 201.529H60.3972L144 100.765L60.3972 0Z\" /></svg>`;\n\nconst ELEMENT_ANIMATION_BRAND_LOGO = 'brand-logo-container';\nconst ELEMENT_FIRST_CHEVRON = 'brand-logo-first-chevron';\nconst ELEMENT_SECOND_CHEVRON = 'brand-logo-second-chevron';\nconst ELEMENT_THIRD_CHEVRON = 'brand-logo-third-chevron';\n\nconst FirstChevronStyles = `\n  @keyframes chevron-one {\n    from { transform: translateX(-80%); }\n    to { transform: translateX(40%); }\n  }\n\n  .${ELEMENT_FIRST_CHEVRON} {\n    top: 0;\n    transform: translateX(-80%);\n  }\n\n  .${ELEMENT_FIRST_CHEVRON} svg {\n    fill: ${token.color.gold};\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_FIRST_CHEVRON} {\n        transform: translateX(40%);\n        animation: chevron-one forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: contain;\n      }\n    }\n  }\n`;\n\nconst SecondChevronStyles = `\n  @keyframes chevron-two {\n    from { transform: translateX(-40%); }\n    to { transform: translateX(24%); }\n  }\n\n  .${ELEMENT_SECOND_CHEVRON} {\n    top: 10%;\n    z-index: 99;\n    transform: translateX(-40%);\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${ELEMENT_SECOND_CHEVRON} {\n       top: 95px;\n    }\n  }\n\n  .${ELEMENT_SECOND_CHEVRON} svg {\n    fill: ${token.color.red};\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_SECOND_CHEVRON} {\n        transform: translateX(24%);\n        animation: chevron-two forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n       animation-range-end: contain;\n      }\n    }\n  }\n`;\n\nconst ThirdChevronStyles = `\n  @keyframes chevron-three {\n    from { transform: translateX(-30%); }\n    to { transform: translateX(60%); }\n  }\n\n  .${ELEMENT_THIRD_CHEVRON} {\n    top: 25%;\n    transform: translateX(-30%);\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${ELEMENT_THIRD_CHEVRON} {\n       top: 195px;\n    }\n  }\n\n  .${ELEMENT_THIRD_CHEVRON} svg {\n    fill: ${token.color.black};\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_THIRD_CHEVRON} {\n        transform: translateX(60%);\n        animation: chevron-three forwards;\n        animation-timeline: view();\n        animation-range-start: 0;\n        animation-range-end: 100vh;\n      }\n    }\n  }\n`;\n\nconst STYLES_ANIMATION_BRAND_LOGO = `\n  .${ELEMENT_ANIMATION_BRAND_LOGO} {\n    position: relative;\n    height: 50vw;\n    width: 100vw;\n  }\n\n  .${ELEMENT_ANIMATION_BRAND_LOGO} > * {\n    position: absolute;\n    height: 100%;\n    right: 0;\n    transform: none;\n  }\n\n  .${ELEMENT_SECOND_CHEVRON} svg,\n  .${ELEMENT_THIRD_CHEVRON} svg {\n    height: 10vw;\n    width: 8.2vw;\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${ELEMENT_SECOND_CHEVRON} svg,\n    .${ELEMENT_THIRD_CHEVRON} svg {\n      height: 306px;\n      width: 252px;\n    }\n  }\n\n  .${FirstChevronStyles} svg {\n    height: 7vw;\n    width: 5vw;\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${FirstChevronStyles} svg {\n      height: 202px;\n      width: 144px;\n    }\n  }\n\n  ${FirstChevronStyles} \n  ${SecondChevronStyles} \n  ${ThirdChevronStyles} \n`;\n\nexport default () =>\n  (() => {\n    const container = document.createElement('div');\n    const first = document.createElement('div');\n    const second = document.createElement('div');\n    const third = document.createElement('div');\n\n    first.classList.add(ELEMENT_FIRST_CHEVRON);\n    first.innerHTML = ICON_CHEVRON_SMALL;\n\n    second.classList.add(ELEMENT_SECOND_CHEVRON);\n    second.innerHTML = ICON_CHEVRON_BIG;\n\n    third.classList.add(ELEMENT_THIRD_CHEVRON);\n    third.innerHTML = ICON_CHEVRON_BIG;\n\n    container.classList.add(ELEMENT_ANIMATION_BRAND_LOGO);\n    container.appendChild(first);\n    container.appendChild(second);\n    container.appendChild(third);\n\n    return {\n      element: container,\n      styles: STYLES_ANIMATION_BRAND_LOGO,\n    };\n  })();\n"],"names":[],"mappings":";AAEA,MAAM,mBAAmB;AACzB,MAAM,qBAAqB;AAE3B,MAAM,+BAA+B;AACrC,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAC/B,MAAM,wBAAwB;AAE9B,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKrB,qBAAqB;AAAA,YACd,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,SAKnB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW9B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMf,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKxB,sBAAsB;AAAA,YACf,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,SAKlB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW/B,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKd,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKvB,qBAAqB;AAAA,YACd,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,SAKpB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW9B,MAAM,8BAA8B;AAAA,KAC/B,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAM5B,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAO5B,sBAAsB;AAAA,KACtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKd,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA,OACtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKX,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA;AAGtB,MAAA,gBAAe,OACZ,MAAM;AACL,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,QAAM,QAAQ,SAAS,cAAc,KAAK;AAE1C,QAAM,UAAU,IAAI,qBAAqB;AACzC,QAAM,YAAY;AAElB,SAAO,UAAU,IAAI,sBAAsB;AAC3C,SAAO,YAAY;AAEnB,QAAM,UAAU,IAAI,qBAAqB;AACzC,QAAM,YAAY;AAElB,YAAU,UAAU,IAAI,4BAA4B;AACpD,YAAU,YAAY,KAAK;AAC3B,YAAU,YAAY,MAAM;AAC5B,YAAU,YAAY,KAAK;AAE3B,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA;AAEZ,GAAA;"}

package/dist/atomic/animations/brand/index.mjs

@@ -1,9 +0,0 @@
-import { default as default2 } from "./chevron-flow.mjs";
-import { default as default3 } from "./chevron-scroll.mjs";
-import { default as default4 } from "./card-stack.mjs";
-export {
-  default4 as cardStack,
-  default2 as chevronFlow,
-  default3 as chevronScroll
-};
-//# sourceMappingURL=index.mjs.map

package/dist/atomic/animations/brand/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/atomic/animations/index.mjs

@@ -1,7 +0,0 @@
-import * as index from "./actions/index.mjs";
-import * as index$1 from "./brand/index.mjs";
-export {
-  index as actions,
-  index$1 as brand
-};
-//# sourceMappingURL=index.mjs.map

package/dist/atomic/animations/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}