npm - @universityofmaryland/web-elements-library - Versions diffs - 1.6.16 → 1.7.0 - Mend

@universityofmaryland/web-elements-library 1.6.16 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (198) hide show

package/README.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # University of Maryland Web Elements Library
-[![Elements Version](https://img.shields.io/badge/Elements-v1.6.16-blue)](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
+[![Elements Version](https://img.shields.io/badge/Elements-v1.7.0-blue)](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
 Foundational UI building blocks for the UMD Design System, providing atomic elements that combine to create complex, accessible, and brand-compliant University of Maryland digital experiences.

package/dist/atomic/animations/brand/card-stack.js CHANGED Viewed

@@ -14,7 +14,6 @@ import "@universityofmaryland/web-icons-library/files";
 import "@universityofmaryland/web-icons-library/brand";
 import "@universityofmaryland/web-icons-library/arrows";
 import "@universityofmaryland/web-utilities-library/performance";
-import "./chevron-scroll.js";
 import { createImageBackground } from "../../assets/image/background.js";
 import "@universityofmaryland/web-styles-library";
 import { createVideoToggle } from "../../assets/video/toggle.js";
@@ -22,10 +21,10 @@ import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";
 import "@universityofmaryland/web-utilities-library/theme";
 import "../../layout/block/stacked.js";
-import "../../layout/overlay/modal.js";
 import "../../layout/person/columns.js";
 import "@universityofmaryland/web-icons-library/social";
-import "../../text-lockup/date.js";
+import "@universityofmaryland/web-utilities-library/string";
+import "@universityofmaryland/web-utilities-library/animation";
 import "../../text-lockup/small.js";
 const configuration = [
   {

package/dist/atomic/animations/brand/card-stack.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card-stack.js","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: ReturnType<typeof setTimeout> \| 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 imageLoading: 'lazy',\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 imageLoading: 'lazy',\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 const createAnimationCardStack = (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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"}
1	+ {"version":3,"file":"card-stack.js","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: ReturnType<typeof setTimeout> \| 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 imageLoading: 'lazy',\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 imageLoading: 'lazy',\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 const createAnimationCardStack = (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.d.ts CHANGED Viewed

@@ -3,11 +3,5 @@ export declare const createAnimationChevronFlow: ({ sizedContainer, completedCal
     sizedWrapper: HTMLElement;
     completedCallback?: () => void;
     isAnimationOnLoad?: boolean;
-}) => {
-    element: HTMLDivElement;
-    styles: string;
-    events: {
-        load: () => void;
-    };
-};
+}) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=chevron-flow.d.ts.map

package/dist/atomic/animations/brand/chevron-flow.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chevron-flow.d.ts","sourceRoot":"","sources":["../../../../source/atomic/animations/brand/chevron-flow.ts"],"names":[],"mappings":"~~AA6PA~~,eAAO,MAAM,0BAA0B,GAAI,2DAIxC;IACD,cAAc,EAAE,WAAW,CAAC;IAC5B,YAAY,EAAE,WAAW,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B~~;;;;;;CA6EK~~,CAAC"}
1	+ {"version":3,"file":"chevron-flow.d.ts","sourceRoot":"","sources":["../../../../source/atomic/animations/brand/chevron-flow.ts"],"names":[],"mappings":"AAkMA,eAAO,MAAM,0BAA0B,GAAI,2DAIxC;IACD,cAAc,EAAE,WAAW,CAAC;IAC5B,YAAY,EAAE,WAAW,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,kFAsEK,CAAC"}

package/dist/atomic/animations/brand/chevron-flow.js CHANGED Viewed

@@ -1,133 +1,72 @@
-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";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 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 CLASS_ANIMATION_ARROW = "animation-arrow";
 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 CreateAnimatioOverlayContainer = () => {
   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;
+  return new ElementBuilder().withClassName("animation-overlay-layer-container").withHTML(`${SVG_OVERLAY_LEFT} ${SVG_OVERLAY_RIGHT}`).withStyles({
+    element: {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      width: "auto",
+      height: "auto",
+      minWidth: "100%",
+      minHeight: "100%",
+      zIndex: "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%",
+        zIndex: "9",
+        fill: "#000",
+        "& path": { fill: "#000" }
+      }
+    }
+  }).build();
 };
-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);
+const createArrowSvg = (id) => `<svg id="${id}" class="${CLASS_ANIMATION_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>`;
+const CreateOverlayArrow = (id) => new ElementBuilder().withHTML(createArrowSvg(id)).build();
+const CreateRedArrow = (id) => new ElementBuilder().withClassName("animation-overlay-layer-red-arrow-container").withHTML(createArrowSvg(id)).withStyles({
+  element: {
+    position: "absolute",
+    top: "50%",
+    left: "0",
+    transform: "translate(-100%, -50%)",
+    zIndex: "999",
+    display: "flex",
+    alignItems: "center",
+    [`& .${CLASS_ANIMATION_ARROW}`]: { height: "100%" }
   }
-  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);
+}).build();
+const CreateBlackArrow = (id) => new ElementBuilder().withClassName("animation-overlay-layer-black-arrow-container").withHTML(createArrowSvg(id)).withStyles({
+  element: {
+    position: "absolute",
+    top: "50%",
+    left: "0",
+    transform: "translate(-140%, -50%)",
+    height: "100%",
+    zIndex: "99",
+    "& path": { fill: "#000" },
+    [`& .${CLASS_ANIMATION_ARROW}`]: { height: "100%" },
+    [`& #${ID_ARROW_BEHIND_FOLLOWING}`]: {
+      transform: "translateX(-90%)"
+    }
   }
-};
+}).build();
 const AnimateFollowingArrows = (props) => {
   const { container } = props;
   const arrow = container.querySelector(
@@ -158,7 +97,7 @@ const AnimateMainArrow = (props) => {
   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.height = `${height}px`;
   arrow.style.transition = `transform ${TIMING_ANIMATION_ARROW_FIRST_TIME_IN}ms ease-in-out`;
   arrow.style.transform = `translateX(${alignment}px)`;
   setTimeout(() => {
@@ -203,46 +142,42 @@ const createAnimationChevronFlow = ({
   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 getHeightDiff = () => sizedContainer.offsetHeight;
+  const containerBuilder = new ElementBuilder().withClassName("animation-overlay-container").withStyles({
+    element: {
+      "@media (prefers-reduced-motion: reduce)": {
+        "& svg": { display: "none" }
+      }
+    }
+  });
+  const containerEl = containerBuilder.getElement();
   const data = {
-    container,
+    container: containerEl,
     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 overlay = CreateAnimatioOverlayContainer();
+  const overlayArrow = CreateOverlayArrow(ID_ARROW_BEHIND_OVERLAY);
+  const slideInArrow = CreateRedArrow(ID_SLIDE_IN_RED);
+  const slideInArrowBlackOne = CreateBlackArrow(ID_ARROW_BEHIND_FOLLOWING);
+  const slideInArrowBlackTwo = CreateBlackArrow(ID_ARROW_BEHIND_FOLLOWING_TWO);
+  const children = [
+    overlay,
+    overlayArrow,
+    slideInArrow,
+    slideInArrowBlackOne,
+    slideInArrowBlackTwo
+  ];
   const EventLoad = () => {
     if (isAnimationOnLoad) {
       AnimationSequence(data);
       return;
     }
     const scrollEvent = () => {
-      const containerPosition = container.getBoundingClientRect();
+      const containerPosition = containerEl.getBoundingClientRect();
       const top = containerPosition.top;
       if (top < window.innerHeight && window.scrollY !== 0) {
         AnimationSequence(data);
@@ -254,23 +189,11 @@ const createAnimationChevronFlow = ({
   const EventResize = () => {
     if (windowWidth !== window.innerWidth) {
       window.removeEventListener("resize", EventResize);
-      container.remove();
+      containerEl.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
-    }
-  };
+  return containerBuilder.withChildren(...children).withEvents({ load: EventLoad }).build();
 })();
 export {
   createAnimationChevronFlow

package/dist/atomic/animations/brand/chevron-flow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chevron-flow.js","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 const createAnimationChevronFlow = ({\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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"}
1	+ {"version":3,"file":"chevron-flow.js","sources":["../../../../source/atomic/animations/brand/chevron-flow.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\n\ntype TypeAnimationProps = {\n container: HTMLDivElement;\n getHeightDiff: () => number;\n getContainerHeight: () => number;\n completedCallback?: () => void;\n};\n\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';\nconst CLASS_ANIMATION_ARROW = 'animation-arrow';\n\nconst TIMING_ANIMATION_ARROW_FIRST_TIME_IN = 1200;\nconst TIMING_ANIMATION_ARROW_FIRST_TIME_OUT = 4500;\n\nconst CreateAnimatioOverlayContainer = () => {\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 return new ElementBuilder()\n .withClassName('animation-overlay-layer-container')\n .withHTML(`${SVG_OVERLAY_LEFT} ${SVG_OVERLAY_RIGHT}`)\n .withStyles({\n element: {\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: 'auto',\n height: 'auto',\n minWidth: '100%',\n minHeight: '100%',\n zIndex: '9',\n display: 'flex',\n\n [`& #${ID_OVERLAY_RIGHT}`]: { width: '50%' },\n [`& #${ID_OVERLAY_LEFT}`]: { width: '50%' },\n [`& #${ID_ARROW_BEHIND_OVERLAY}`]: {\n position: 'absolute',\n top: '50%',\n left: '0',\n transform: 'translate(-60%, -50%)',\n height: '100%',\n zIndex: '9',\n fill: '#000',\n '& path': { fill: '#000' },\n },\n },\n })\n .build();\n};\n\nconst createArrowSvg = (id: string) =>\n `<svg id=\"${id}\" class=\"${CLASS_ANIMATION_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\nconst CreateOverlayArrow = (id: string) =>\n new ElementBuilder().withHTML(createArrowSvg(id)).build();\n\nconst CreateRedArrow = (id: string) =>\n new ElementBuilder()\n .withClassName('animation-overlay-layer-red-arrow-container')\n .withHTML(createArrowSvg(id))\n .withStyles({\n element: {\n position: 'absolute',\n top: '50%',\n left: '0',\n transform: 'translate(-100%, -50%)',\n zIndex: '999',\n display: 'flex',\n alignItems: 'center',\n [`& .${CLASS_ANIMATION_ARROW}`]: { height: '100%' },\n },\n })\n .build();\n\nconst CreateBlackArrow = (id: string) =>\n new ElementBuilder()\n .withClassName('animation-overlay-layer-black-arrow-container')\n .withHTML(createArrowSvg(id))\n .withStyles({\n element: {\n position: 'absolute',\n top: '50%',\n left: '0',\n transform: 'translate(-140%, -50%)',\n height: '100%',\n zIndex: '99',\n '& path': { fill: '#000' },\n [`& .${CLASS_ANIMATION_ARROW}`]: { height: '100%' },\n [`& #${ID_ARROW_BEHIND_FOLLOWING}`]: {\n transform: 'translateX(-90%)',\n },\n },\n })\n .build();\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 arrow.style.height = `${height}px`;\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 const createAnimationChevronFlow = ({\n sizedContainer,\n completedCallback,\n isAnimationOnLoad = true,\n}: {\n sizedContainer: HTMLElement;\n sizedWrapper: HTMLElement;\n completedCallback?: () => void;\n isAnimationOnLoad?: boolean;\n}) =>\n (() => {\n let windowWidth = window.innerWidth;\n\n const getContainerHeight = () => sizedContainer.offsetHeight;\n const getHeightDiff = () => sizedContainer.offsetHeight;\n\n const containerBuilder = new ElementBuilder()\n .withClassName('animation-overlay-container')\n .withStyles({\n element: {\n '@media (prefers-reduced-motion: reduce)': {\n '& svg': { display: 'none' },\n },\n },\n });\n const containerEl = containerBuilder.getElement() as HTMLDivElement;\n\n const data = {\n container: containerEl,\n getHeightDiff,\n getContainerHeight,\n completedCallback,\n };\n\n const overlay = CreateAnimatioOverlayContainer();\n const overlayArrow = CreateOverlayArrow(ID_ARROW_BEHIND_OVERLAY);\n const slideInArrow = CreateRedArrow(ID_SLIDE_IN_RED);\n const slideInArrowBlackOne = CreateBlackArrow(ID_ARROW_BEHIND_FOLLOWING);\n const slideInArrowBlackTwo = CreateBlackArrow(ID_ARROW_BEHIND_FOLLOWING_TWO);\n const children = [\n overlay,\n overlayArrow,\n slideInArrow,\n slideInArrowBlackOne,\n slideInArrowBlackTwo,\n ];\n\n const EventLoad = () => {\n if (isAnimationOnLoad) {\n AnimationSequence(data);\n return;\n }\n\n const scrollEvent = () => {\n const containerPosition = containerEl.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\n const EventResize = () => {\n if (windowWidth !== window.innerWidth) {\n window.removeEventListener('resize', EventResize);\n containerEl.remove();\n }\n };\n\n window.addEventListener('resize', EventResize);\n\n return containerBuilder\n .withChildren(...children)\n .withEvents({ load: EventLoad })\n .build();\n })();\n"],"names":[],"mappings":";AAUA,MAAM,kBAAkB;AACxB,MAAM,mBAAmB;AACzB,MAAM,kBAAkB;AACxB,MAAM,0BAA0B;AAChC,MAAM,4BAA4B;AAClC,MAAM,gCAAgC;AACtC,MAAM,wBAAwB;AAE9B,MAAM,uCAAuC;AAC7C,MAAM,wCAAwC;AAE9C,MAAM,iCAAiC,MAAM;AAC3C,QAAM,mBAAmB,YAAY,eAAe;AACpD,QAAM,oBAAoB,YAAY,gBAAgB;AAEtD,SAAO,IAAI,eAAA,EACR,cAAc,mCAAmC,EACjD,SAAS,GAAG,gBAAgB,IAAI,iBAAiB,EAAE,EACnD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,SAAS;AAAA,MAET,CAAC,MAAM,gBAAgB,EAAE,GAAG,EAAE,OAAO,MAAA;AAAA,MACrC,CAAC,MAAM,eAAe,EAAE,GAAG,EAAE,OAAO,MAAA;AAAA,MACpC,CAAC,MAAM,uBAAuB,EAAE,GAAG;AAAA,QACjC,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU,EAAE,MAAM,OAAA;AAAA,MAAO;AAAA,IAC3B;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,iBAAiB,CAAC,OACtB,YAAY,EAAE,YAAY,qBAAqB;AAEjD,MAAM,qBAAqB,CAAC,OAC1B,IAAI,eAAA,EAAiB,SAAS,eAAe,EAAE,CAAC,EAAE,MAAA;AAEpD,MAAM,iBAAiB,CAAC,OACtB,IAAI,iBACD,cAAc,6CAA6C,EAC3D,SAAS,eAAe,EAAE,CAAC,EAC3B,WAAW;AAAA,EACV,SAAS;AAAA,IACP,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,CAAC,MAAM,qBAAqB,EAAE,GAAG,EAAE,QAAQ,OAAA;AAAA,EAAO;AAEtD,CAAC,EACA,MAAA;AAEL,MAAM,mBAAmB,CAAC,OACxB,IAAI,iBACD,cAAc,+CAA+C,EAC7D,SAAS,eAAe,EAAE,CAAC,EAC3B,WAAW;AAAA,EACV,SAAS;AAAA,IACP,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU,EAAE,MAAM,OAAA;AAAA,IAClB,CAAC,MAAM,qBAAqB,EAAE,GAAG,EAAE,QAAQ,OAAA;AAAA,IAC3C,CAAC,MAAM,yBAAyB,EAAE,GAAG;AAAA,MACnC,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ,CAAC,EACA,MAAA;AAEL,MAAM,yBAAyB,CAAC,UAA8B;AAC5D,QAAM,EAAE,cAAc;AACtB,QAAM,QAAQ,UAAU;AAAA,IACtB,IAAI,yBAAyB;AAAA,EAAA;AAE/B,QAAM,WAAW,UAAU;AAAA,IACzB,IAAI,6BAA6B;AAAA,EAAA;AAGnC,aAAW,MAAM;AACf,UAAM,MAAM,aAAa,aACvB,wCAAwC,IAC1C;AACA,UAAM,MAAM,YAAY;AAAA,EAC1B,GAAG,uCAAuC,GAAG;AAE7C,aAAW,MAAM;AACf,aAAS,MAAM,aAAa,aAC1B,wCAAwC,IAC1C;AACA,aAAS,MAAM,YAAY;AAAA,EAC7B,GAAG,uCAAuC,GAAG;AAC/C;AAEA,MAAM,mBAAmB,CAAC,UAA8B;AACtD,QAAM,EAAE,WAAW,oBAAoB,cAAA,IAAkB;AACzD,QAAM,QAAQ,UAAU;AAAA,IACtB,IAAI,eAAe;AAAA,EAAA;AAErB,QAAM,SAAS,mBAAA;AACf,QAAM,cAAc,UAAU;AAAA,IAC5B,IAAI,eAAe;AAAA,EAAA;AAErB,QAAM,kBAAkB,YAAY,sBAAA;AACpC,QAAM,gBAAgB,MAAM,sBAAA;AAC5B,QAAM,OAAO,cAAA;AACb,QAAM,YACJ,gBAAgB,QAAQ,IACxB,KAAK,IAAI,cAAc,IAAI,IAC3B,OACA,KAAK,IAAI,gBAAgB,IAAI;AAE/B,QAAM,MAAM,SAAS,GAAG,MAAM;AAC9B,QAAM,MAAM,aAAa,aAAa,oCAAoC;AAC1E,QAAM,MAAM,YAAY,cAAc,SAAS;AAE/C,aAAW,MAAM;AACf,UAAM,MAAM,aAAa,aAAa,qCAAqC;AAC3E,UAAM,MAAM,YAAY,cAAc,YAAY,CAAC;AAAA,EACrD,GAAG,oCAAoC;AACzC;AAEA,MAAM,iBAAiB,CAAC,UAA8B;AACpD,QAAM,EAAE,WAAW,kBAAA,IAAsB;AACzC,QAAM,UAAU,UAAU,cAAc,IAAI,eAAe,EAAE;AAC7D,QAAM,UAAU,UAAU,cAAc,IAAI,gBAAgB,EAAE;AAC9D,QAAM,YAAY,UAAU;AAAA,IAC1B,IAAI,uBAAuB;AAAA,EAAA;AAE7B,QAAM,cAAc,OAAO,aAAa;AACxC,QAAM,yBAAyB;AAC/B,QAAM,YACJ,uCAAuC,yBAAyB;AAClE,QAAM,kBAAkB,wCAAwC;AAEhE,aAAW,MAAM;AACf,YAAQ,MAAM,aAAa,aAAa,sBAAsB;AAC9D,YAAQ,MAAM,YAAY,cAAc,WAAW;AAAA,EACrD,GAAG,uCAAuC,GAAG;AAE7C,aAAW,MAAM;AACf,YAAQ,MAAM,aAAa,aAAa,eAAe;AACvD,YAAQ,MAAM,YAAY,cAAc,WAAW;AAAA,EACrD,GAAG,YAAY,GAAG;AAElB,aAAW,MAAM;AACf,cAAU,MAAM,aAAa,aAAa,eAAe;AACzD,cAAU,MAAM,YAAY,aAAa,WAAW;AAAA,EACtD,GAAG,YAAY,EAAE;AAEjB,MAAI,mBAAmB;AACrB,eAAW,MAAM,kBAAA,GAAqB,SAAS;AAAA,EACjD;AACF;AAEA,MAAM,oBAAoB,CAAC,UAA8B;AACvD,iBAAe,KAAK;AACpB,mBAAiB,KAAK;AACtB,yBAAuB,KAAK;AAC9B;AAEO,MAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA,oBAAoB;AACtB,OAMG,MAAM;AACL,MAAI,cAAc,OAAO;AAEzB,QAAM,qBAAqB,MAAM,eAAe;AAChD,QAAM,gBAAgB,MAAM,eAAe;AAE3C,QAAM,mBAAmB,IAAI,eAAA,EAC1B,cAAc,6BAA6B,EAC3C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,2CAA2C;AAAA,QACzC,SAAS,EAAE,SAAS,OAAA;AAAA,MAAO;AAAA,IAC7B;AAAA,EACF,CACD;AACH,QAAM,cAAc,iBAAiB,WAAA;AAErC,QAAM,OAAO;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,UAAU,+BAAA;AAChB,QAAM,eAAe,mBAAmB,uBAAuB;AAC/D,QAAM,eAAe,eAAe,eAAe;AACnD,QAAM,uBAAuB,iBAAiB,yBAAyB;AACvE,QAAM,uBAAuB,iBAAiB,6BAA6B;AAC3E,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,YAAY,MAAM;AACtB,QAAI,mBAAmB;AACrB,wBAAkB,IAAI;AACtB;AAAA,IACF;AAEA,UAAM,cAAc,MAAM;AACxB,YAAM,oBAAoB,YAAY,sBAAA;AACtC,YAAM,MAAM,kBAAkB;AAE9B,UAAI,MAAM,OAAO,eAAe,OAAO,YAAY,GAAG;AACpD,0BAAkB,IAAI;AACtB,eAAO,oBAAoB,UAAU,WAAW;AAAA,MAClD;AAAA,IACF;AAEA,WAAO,iBAAiB,UAAU,WAAW;AAAA,EAC/C;AAEA,QAAM,cAAc,MAAM;AACxB,QAAI,gBAAgB,OAAO,YAAY;AACrC,aAAO,oBAAoB,UAAU,WAAW;AAChD,kBAAY,OAAA;AAAA,IACd;AAAA,EACF;AAEA,SAAO,iBAAiB,UAAU,WAAW;AAE7C,SAAO,iBACJ,aAAa,GAAG,QAAQ,EACxB,WAAW,EAAE,MAAM,WAAW,EAC9B,MAAA;AACL,GAAA;"}