@universityofmaryland/web-elements-library 1.4.2 → 1.4.3
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.
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# University of Maryland Web Elements Library
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
|
|
4
4
|
|
|
5
5
|
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.
|
|
6
6
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"standard.js","sources":["../../../source/composite/pathway/standard.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { theme } from 'utilities';\nimport { createTextLockupMedium, createAssetContent } from './_common';\nimport { type ElementVisual } from '../../_types';\nimport { type PathwayStandardProps } from './_types';\n\nconst mediumSize = 800;\nconst largeSize = 1200;\n\nconst setupAnimation = (\n container: HTMLElement,\n textElement: HTMLElement,\n imageElement: HTMLElement | null,\n) => {\n const rect = container.getBoundingClientRect();\n const elementTop = rect.top + window.scrollY;\n const viewportBottom = window.scrollY + window.innerHeight;\n\n if (elementTop < viewportBottom - rect.height * 0.65) {\n textElement.style.transition = 'opacity 0s, transform 0s';\n textElement.style.opacity = '1';\n textElement.style.transform = 'translateY(0)';\n\n if (imageElement) {\n imageElement.style.transition = 'opacity 0s, transform 0s';\n imageElement.style.opacity = '1';\n imageElement.style.transform = 'translateY(0)';\n }\n return;\n }\n\n let isInitialCheck = true;\n\n const observer = new IntersectionObserver(\n (entries, observer) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n if (isInitialCheck && entry.intersectionRatio >= 0.35) {\n textElement.style.transition = 'opacity 0s, transform 0s';\n }\n\n textElement.style.opacity = '1';\n textElement.style.transform = 'translateY(0)';\n\n if (imageElement) {\n if (isInitialCheck && entry.intersectionRatio >= 0.35) {\n imageElement.style.transition = 'opacity 0s, transform 0s';\n }\n imageElement.style.opacity = '1';\n imageElement.style.transform = 'translateY(0)';\n }\n\n observer.unobserve(entry.target);\n }\n\n isInitialCheck = false;\n });\n },\n {\n rootMargin: '0px',\n threshold: [0.35],\n },\n );\n\n observer.observe(container);\n};\n\nconst createAssetColumn = (\n props: Pick<\n PathwayStandardProps,\n | 'dateSign'\n | 'isThemeDark'\n | 'image'\n | 'video'\n | 'includesAnimation'\n | 'isImagePositionLeft'\n | 'isImageScaled'\n >,\n): ElementVisual | null => {\n const {\n image,\n video,\n includesAnimation,\n isImagePositionLeft,\n isImageScaled,\n } = props;\n\n if (!image && !video) return null;\n\n return ElementModel.createDiv({\n className: 'pathway-image-container',\n children: [createAssetContent(props)],\n elementStyles: {\n element: {\n position: 'relative',\n height: '100%',\n\n ...(includesAnimation && {\n ...theme.media.withViewTimelineAnimation({\n opacity: '0',\n transform: 'translateY(100px)',\n transition: 'opacity 1s, transform 1s',\n transitionDelay: isImagePositionLeft ? '0s' : '0.5s',\n }),\n }),\n\n ...(isImageScaled === false && {\n display: 'flex',\n justifyContent: 'center',\n }),\n\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n display: 'grid',\n height: '56vw',\n },\n\n [`@container (min-width: ${mediumSize}px)`]: {\n ...(isImagePositionLeft === false && {\n order: '2',\n }),\n },\n },\n },\n });\n};\n\nconst createTextContent = (props: PathwayStandardProps): ElementVisual => {\n const wrapper = ElementModel.createDiv({\n className: 'pathway-text-container-wrapper',\n children: [createTextLockupMedium(props)],\n elementStyles: {\n element: {\n padding: `${Styles.token.spacing.md} ${Styles.token.spacing.lg}`,\n\n [`@container (min-width: ${mediumSize}px)`]: {\n padding: `0 ${Styles.token.spacing['2xl']}`,\n\n ...(props.isImagePositionLeft === false && {\n paddingLeft: '0',\n }),\n\n ...(props.isImagePositionLeft && {\n paddingRight: '0',\n }),\n },\n\n [`@container (min-width: ${largeSize}px)`]: {\n padding: `0 ${Styles.token.spacing['6xl']}`,\n\n ...(props.isImagePositionLeft === false && {\n paddingLeft: '0',\n }),\n\n ...(props.isImagePositionLeft && {\n paddingRight: '0',\n }),\n },\n },\n },\n });\n\n const container = ElementModel.createDiv({\n className: 'pathway-text-container',\n children: [wrapper],\n elementStyles: {\n element: {\n container: 'inline-size',\n\n ...(props.includesAnimation && {\n ...theme.media.withViewTimelineAnimation({\n opacity: '0',\n transform: 'translateY(100px)',\n transition: 'opacity 1s, transform 1s',\n transitionDelay: props.isImagePositionLeft ? '0.5s' : '0s',\n }),\n }),\n\n ...(props.isThemeDark && {\n backgroundColor: Styles.token.color.black,\n color: Styles.token.color.white,\n }),\n\n ...(props.isThemeMaryland && {\n backgroundColor: Styles.token.color.red,\n color: Styles.token.color.white,\n }),\n\n [`@container (min-width: ${mediumSize}px)`]: {\n ...(props.isImagePositionLeft === false && {\n order: '1',\n }),\n },\n },\n },\n });\n\n return container;\n};\n\nconst createLock = (props: PathwayStandardProps) => {\n const textContent = createTextContent(props);\n const assetContent = createAssetColumn(props);\n const children: ElementVisual[] = [];\n\n if (assetContent) {\n children.push(assetContent);\n }\n children.push(textContent);\n\n const lockWrapper = ElementModel.createDiv({\n className: 'pathway-container-lock-wrapper',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n\n [`@container (min-width: ${mediumSize}px)`]: {\n display: 'grid',\n gridTemplateColumns: '50% 50%',\n alignItems: 'center',\n minHeight: '48vh',\n },\n },\n },\n });\n\n return ElementModel.layout.spaceHorizontalLarger({\n element: document.createElement('div'),\n children: [lockWrapper],\n elementStyles: {\n element: {\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n paddingLeft: 0,\n paddingRight: 0,\n },\n },\n },\n });\n};\n\nexport default (props: PathwayStandardProps) => {\n const composite = ElementModel.createDiv({\n className: 'pathway-container',\n children: [\n ElementModel.createDiv({\n className: 'pathway-container-wrapper',\n children: [createLock(props)],\n }),\n ],\n elementStyles: {\n element: {\n container: 'inline-size',\n position: 'relative',\n overflow: 'hidden',\n },\n },\n });\n\n // Set up animation observer\n const loadAnimation = () => {\n if (props.includesAnimation) {\n const textElement = composite.element.querySelector(\n '.pathway-text-container',\n ) as HTMLElement;\n const imageElement = composite.element.querySelector(\n '.pathway-image-container',\n ) as HTMLElement | null;\n\n if (textElement) {\n setupAnimation(composite.element, textElement, imageElement);\n }\n }\n };\n\n return {\n ...composite,\n events: {\n loadAnimation,\n },\n };\n};\n"],"names":["observer","ElementModel.createDiv","createAssetContent","theme.media.withViewTimelineAnimation","createTextLockupMedium","Styles","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"standard.js","sources":["../../../source/composite/pathway/standard.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { theme } from 'utilities';\nimport { createTextLockupMedium, createAssetContent } from './_common';\nimport { type ElementVisual } from '../../_types';\nimport { type PathwayStandardProps } from './_types';\n\nconst mediumSize = 800;\nconst largeSize = 1200;\n\nconst setupAnimation = (\n container: HTMLElement,\n textElement: HTMLElement,\n imageElement: HTMLElement | null,\n) => {\n const rect = container.getBoundingClientRect();\n const elementTop = rect.top + window.scrollY;\n const viewportBottom = window.scrollY + window.innerHeight;\n\n if (elementTop < viewportBottom - rect.height * 0.65) {\n textElement.style.transition = 'opacity 0s, transform 0s';\n textElement.style.opacity = '1';\n textElement.style.transform = 'translateY(0)';\n\n if (imageElement) {\n imageElement.style.transition = 'opacity 0s, transform 0s';\n imageElement.style.opacity = '1';\n imageElement.style.transform = 'translateY(0)';\n }\n return;\n }\n\n let isInitialCheck = true;\n\n const observer = new IntersectionObserver(\n (entries, observer) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n if (isInitialCheck && entry.intersectionRatio >= 0.35) {\n textElement.style.transition = 'opacity 0s, transform 0s';\n }\n\n textElement.style.opacity = '1';\n textElement.style.transform = 'translateY(0)';\n\n if (imageElement) {\n if (isInitialCheck && entry.intersectionRatio >= 0.35) {\n imageElement.style.transition = 'opacity 0s, transform 0s';\n }\n imageElement.style.opacity = '1';\n imageElement.style.transform = 'translateY(0)';\n }\n\n observer.unobserve(entry.target);\n }\n\n isInitialCheck = false;\n });\n },\n {\n rootMargin: '0px',\n threshold: [0.35],\n },\n );\n\n observer.observe(container);\n};\n\nconst createAssetColumn = (\n props: Pick<\n PathwayStandardProps,\n | 'dateSign'\n | 'isThemeDark'\n | 'image'\n | 'video'\n | 'includesAnimation'\n | 'isImagePositionLeft'\n | 'isImageScaled'\n >,\n): ElementVisual | null => {\n const {\n image,\n video,\n includesAnimation,\n isImagePositionLeft,\n isImageScaled,\n } = props;\n\n if (!image && !video) return null;\n\n return ElementModel.createDiv({\n className: 'pathway-image-container',\n children: [createAssetContent(props)],\n elementStyles: {\n element: {\n position: 'relative',\n height: '100%',\n\n ...(includesAnimation && {\n ...theme.media.withViewTimelineAnimation({\n opacity: '0',\n transform: 'translateY(100px)',\n transition: 'opacity 1s, transform 1s',\n transitionDelay: isImagePositionLeft ? '0s' : '0.5s',\n }),\n }),\n\n ...(isImageScaled === false && {\n display: 'flex',\n justifyContent: 'center',\n }),\n\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n display: 'grid',\n height: '56vw',\n },\n\n [`@container (min-width: ${mediumSize}px)`]: {\n ...(isImagePositionLeft === false && {\n order: '2',\n }),\n },\n },\n },\n });\n};\n\nconst createTextContent = (props: PathwayStandardProps): ElementVisual => {\n const wrapper = ElementModel.createDiv({\n className: 'pathway-text-container-wrapper',\n children: [createTextLockupMedium(props)],\n elementStyles: {\n element: {\n padding: `${Styles.token.spacing.md} ${Styles.token.spacing.lg}`,\n\n [`@container (min-width: ${mediumSize}px)`]: {\n padding: `0 ${Styles.token.spacing['2xl']}`,\n\n ...(props.isImagePositionLeft === false && {\n paddingLeft: '0',\n }),\n\n ...(props.isImagePositionLeft && {\n paddingRight: '0',\n }),\n },\n\n [`@container (min-width: ${largeSize}px)`]: {\n padding: `0 ${Styles.token.spacing['6xl']}`,\n\n ...(props.isImagePositionLeft === false && {\n paddingLeft: '0',\n }),\n\n ...(props.isImagePositionLeft && {\n paddingRight: '0',\n }),\n },\n },\n },\n });\n\n const container = ElementModel.createDiv({\n className: 'pathway-text-container',\n children: [wrapper],\n elementStyles: {\n element: {\n container: 'inline-size',\n\n ...(props.includesAnimation && {\n ...theme.media.withViewTimelineAnimation({\n opacity: '0',\n transform: 'translateY(100px)',\n transition: 'opacity 1s, transform 1s',\n transitionDelay: props.isImagePositionLeft ? '0.5s' : '0s',\n }),\n }),\n\n ...(props.isThemeDark && {\n backgroundColor: Styles.token.color.black,\n color: Styles.token.color.white,\n }),\n\n ...(props.isThemeMaryland && {\n backgroundColor: Styles.token.color.red,\n color: Styles.token.color.white,\n }),\n\n [`@container (min-width: ${mediumSize}px)`]: {\n ...(props.isImagePositionLeft === false && {\n order: '1',\n }),\n },\n },\n },\n });\n\n return container;\n};\n\nconst createLock = (props: PathwayStandardProps) => {\n const textContent = createTextContent(props);\n const assetContent = createAssetColumn(props);\n const children: ElementVisual[] = [];\n\n if (assetContent) {\n children.push(assetContent);\n }\n children.push(textContent);\n\n const lockWrapper = ElementModel.createDiv({\n className: 'pathway-container-lock-wrapper',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n\n [`@container (min-width: ${mediumSize}px)`]: {\n display: 'grid',\n gridTemplateColumns: '50% 50%',\n alignItems: 'center',\n minHeight: '56vh',\n },\n },\n },\n });\n\n return ElementModel.layout.spaceHorizontalLarger({\n element: document.createElement('div'),\n children: [lockWrapper],\n elementStyles: {\n element: {\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n paddingLeft: 0,\n paddingRight: 0,\n },\n },\n },\n });\n};\n\nexport default (props: PathwayStandardProps) => {\n const composite = ElementModel.createDiv({\n className: 'pathway-container',\n children: [\n ElementModel.createDiv({\n className: 'pathway-container-wrapper',\n children: [createLock(props)],\n }),\n ],\n elementStyles: {\n element: {\n container: 'inline-size',\n position: 'relative',\n overflow: 'hidden',\n },\n },\n });\n\n // Set up animation observer\n const loadAnimation = () => {\n if (props.includesAnimation) {\n const textElement = composite.element.querySelector(\n '.pathway-text-container',\n ) as HTMLElement;\n const imageElement = composite.element.querySelector(\n '.pathway-image-container',\n ) as HTMLElement | null;\n\n if (textElement) {\n setupAnimation(composite.element, textElement, imageElement);\n }\n }\n };\n\n return {\n ...composite,\n events: {\n loadAnimation,\n },\n };\n};\n"],"names":["observer","ElementModel.createDiv","createAssetContent","theme.media.withViewTimelineAnimation","createTextLockupMedium","Styles","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"standard.mjs","sources":["../../../source/composite/pathway/standard.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { theme } from 'utilities';\nimport { createTextLockupMedium, createAssetContent } from './_common';\nimport { type ElementVisual } from '../../_types';\nimport { type PathwayStandardProps } from './_types';\n\nconst mediumSize = 800;\nconst largeSize = 1200;\n\nconst setupAnimation = (\n container: HTMLElement,\n textElement: HTMLElement,\n imageElement: HTMLElement | null,\n) => {\n const rect = container.getBoundingClientRect();\n const elementTop = rect.top + window.scrollY;\n const viewportBottom = window.scrollY + window.innerHeight;\n\n if (elementTop < viewportBottom - rect.height * 0.65) {\n textElement.style.transition = 'opacity 0s, transform 0s';\n textElement.style.opacity = '1';\n textElement.style.transform = 'translateY(0)';\n\n if (imageElement) {\n imageElement.style.transition = 'opacity 0s, transform 0s';\n imageElement.style.opacity = '1';\n imageElement.style.transform = 'translateY(0)';\n }\n return;\n }\n\n let isInitialCheck = true;\n\n const observer = new IntersectionObserver(\n (entries, observer) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n if (isInitialCheck && entry.intersectionRatio >= 0.35) {\n textElement.style.transition = 'opacity 0s, transform 0s';\n }\n\n textElement.style.opacity = '1';\n textElement.style.transform = 'translateY(0)';\n\n if (imageElement) {\n if (isInitialCheck && entry.intersectionRatio >= 0.35) {\n imageElement.style.transition = 'opacity 0s, transform 0s';\n }\n imageElement.style.opacity = '1';\n imageElement.style.transform = 'translateY(0)';\n }\n\n observer.unobserve(entry.target);\n }\n\n isInitialCheck = false;\n });\n },\n {\n rootMargin: '0px',\n threshold: [0.35],\n },\n );\n\n observer.observe(container);\n};\n\nconst createAssetColumn = (\n props: Pick<\n PathwayStandardProps,\n | 'dateSign'\n | 'isThemeDark'\n | 'image'\n | 'video'\n | 'includesAnimation'\n | 'isImagePositionLeft'\n | 'isImageScaled'\n >,\n): ElementVisual | null => {\n const {\n image,\n video,\n includesAnimation,\n isImagePositionLeft,\n isImageScaled,\n } = props;\n\n if (!image && !video) return null;\n\n return ElementModel.createDiv({\n className: 'pathway-image-container',\n children: [createAssetContent(props)],\n elementStyles: {\n element: {\n position: 'relative',\n height: '100%',\n\n ...(includesAnimation && {\n ...theme.media.withViewTimelineAnimation({\n opacity: '0',\n transform: 'translateY(100px)',\n transition: 'opacity 1s, transform 1s',\n transitionDelay: isImagePositionLeft ? '0s' : '0.5s',\n }),\n }),\n\n ...(isImageScaled === false && {\n display: 'flex',\n justifyContent: 'center',\n }),\n\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n display: 'grid',\n height: '56vw',\n },\n\n [`@container (min-width: ${mediumSize}px)`]: {\n ...(isImagePositionLeft === false && {\n order: '2',\n }),\n },\n },\n },\n });\n};\n\nconst createTextContent = (props: PathwayStandardProps): ElementVisual => {\n const wrapper = ElementModel.createDiv({\n className: 'pathway-text-container-wrapper',\n children: [createTextLockupMedium(props)],\n elementStyles: {\n element: {\n padding: `${Styles.token.spacing.md} ${Styles.token.spacing.lg}`,\n\n [`@container (min-width: ${mediumSize}px)`]: {\n padding: `0 ${Styles.token.spacing['2xl']}`,\n\n ...(props.isImagePositionLeft === false && {\n paddingLeft: '0',\n }),\n\n ...(props.isImagePositionLeft && {\n paddingRight: '0',\n }),\n },\n\n [`@container (min-width: ${largeSize}px)`]: {\n padding: `0 ${Styles.token.spacing['6xl']}`,\n\n ...(props.isImagePositionLeft === false && {\n paddingLeft: '0',\n }),\n\n ...(props.isImagePositionLeft && {\n paddingRight: '0',\n }),\n },\n },\n },\n });\n\n const container = ElementModel.createDiv({\n className: 'pathway-text-container',\n children: [wrapper],\n elementStyles: {\n element: {\n container: 'inline-size',\n\n ...(props.includesAnimation && {\n ...theme.media.withViewTimelineAnimation({\n opacity: '0',\n transform: 'translateY(100px)',\n transition: 'opacity 1s, transform 1s',\n transitionDelay: props.isImagePositionLeft ? '0.5s' : '0s',\n }),\n }),\n\n ...(props.isThemeDark && {\n backgroundColor: Styles.token.color.black,\n color: Styles.token.color.white,\n }),\n\n ...(props.isThemeMaryland && {\n backgroundColor: Styles.token.color.red,\n color: Styles.token.color.white,\n }),\n\n [`@container (min-width: ${mediumSize}px)`]: {\n ...(props.isImagePositionLeft === false && {\n order: '1',\n }),\n },\n },\n },\n });\n\n return container;\n};\n\nconst createLock = (props: PathwayStandardProps) => {\n const textContent = createTextContent(props);\n const assetContent = createAssetColumn(props);\n const children: ElementVisual[] = [];\n\n if (assetContent) {\n children.push(assetContent);\n }\n children.push(textContent);\n\n const lockWrapper = ElementModel.createDiv({\n className: 'pathway-container-lock-wrapper',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n\n [`@container (min-width: ${mediumSize}px)`]: {\n display: 'grid',\n gridTemplateColumns: '50% 50%',\n alignItems: 'center',\n minHeight: '48vh',\n },\n },\n },\n });\n\n return ElementModel.layout.spaceHorizontalLarger({\n element: document.createElement('div'),\n children: [lockWrapper],\n elementStyles: {\n element: {\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n paddingLeft: 0,\n paddingRight: 0,\n },\n },\n },\n });\n};\n\nexport default (props: PathwayStandardProps) => {\n const composite = ElementModel.createDiv({\n className: 'pathway-container',\n children: [\n ElementModel.createDiv({\n className: 'pathway-container-wrapper',\n children: [createLock(props)],\n }),\n ],\n elementStyles: {\n element: {\n container: 'inline-size',\n position: 'relative',\n overflow: 'hidden',\n },\n },\n });\n\n // Set up animation observer\n const loadAnimation = () => {\n if (props.includesAnimation) {\n const textElement = composite.element.querySelector(\n '.pathway-text-container',\n ) as HTMLElement;\n const imageElement = composite.element.querySelector(\n '.pathway-image-container',\n ) as HTMLElement | null;\n\n if (textElement) {\n setupAnimation(composite.element, textElement, imageElement);\n }\n }\n };\n\n return {\n ...composite,\n events: {\n loadAnimation,\n },\n };\n};\n"],"names":["observer","ElementModel.createDiv","theme.media.withViewTimelineAnimation","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"standard.mjs","sources":["../../../source/composite/pathway/standard.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { theme } from 'utilities';\nimport { createTextLockupMedium, createAssetContent } from './_common';\nimport { type ElementVisual } from '../../_types';\nimport { type PathwayStandardProps } from './_types';\n\nconst mediumSize = 800;\nconst largeSize = 1200;\n\nconst setupAnimation = (\n container: HTMLElement,\n textElement: HTMLElement,\n imageElement: HTMLElement | null,\n) => {\n const rect = container.getBoundingClientRect();\n const elementTop = rect.top + window.scrollY;\n const viewportBottom = window.scrollY + window.innerHeight;\n\n if (elementTop < viewportBottom - rect.height * 0.65) {\n textElement.style.transition = 'opacity 0s, transform 0s';\n textElement.style.opacity = '1';\n textElement.style.transform = 'translateY(0)';\n\n if (imageElement) {\n imageElement.style.transition = 'opacity 0s, transform 0s';\n imageElement.style.opacity = '1';\n imageElement.style.transform = 'translateY(0)';\n }\n return;\n }\n\n let isInitialCheck = true;\n\n const observer = new IntersectionObserver(\n (entries, observer) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n if (isInitialCheck && entry.intersectionRatio >= 0.35) {\n textElement.style.transition = 'opacity 0s, transform 0s';\n }\n\n textElement.style.opacity = '1';\n textElement.style.transform = 'translateY(0)';\n\n if (imageElement) {\n if (isInitialCheck && entry.intersectionRatio >= 0.35) {\n imageElement.style.transition = 'opacity 0s, transform 0s';\n }\n imageElement.style.opacity = '1';\n imageElement.style.transform = 'translateY(0)';\n }\n\n observer.unobserve(entry.target);\n }\n\n isInitialCheck = false;\n });\n },\n {\n rootMargin: '0px',\n threshold: [0.35],\n },\n );\n\n observer.observe(container);\n};\n\nconst createAssetColumn = (\n props: Pick<\n PathwayStandardProps,\n | 'dateSign'\n | 'isThemeDark'\n | 'image'\n | 'video'\n | 'includesAnimation'\n | 'isImagePositionLeft'\n | 'isImageScaled'\n >,\n): ElementVisual | null => {\n const {\n image,\n video,\n includesAnimation,\n isImagePositionLeft,\n isImageScaled,\n } = props;\n\n if (!image && !video) return null;\n\n return ElementModel.createDiv({\n className: 'pathway-image-container',\n children: [createAssetContent(props)],\n elementStyles: {\n element: {\n position: 'relative',\n height: '100%',\n\n ...(includesAnimation && {\n ...theme.media.withViewTimelineAnimation({\n opacity: '0',\n transform: 'translateY(100px)',\n transition: 'opacity 1s, transform 1s',\n transitionDelay: isImagePositionLeft ? '0s' : '0.5s',\n }),\n }),\n\n ...(isImageScaled === false && {\n display: 'flex',\n justifyContent: 'center',\n }),\n\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n display: 'grid',\n height: '56vw',\n },\n\n [`@container (min-width: ${mediumSize}px)`]: {\n ...(isImagePositionLeft === false && {\n order: '2',\n }),\n },\n },\n },\n });\n};\n\nconst createTextContent = (props: PathwayStandardProps): ElementVisual => {\n const wrapper = ElementModel.createDiv({\n className: 'pathway-text-container-wrapper',\n children: [createTextLockupMedium(props)],\n elementStyles: {\n element: {\n padding: `${Styles.token.spacing.md} ${Styles.token.spacing.lg}`,\n\n [`@container (min-width: ${mediumSize}px)`]: {\n padding: `0 ${Styles.token.spacing['2xl']}`,\n\n ...(props.isImagePositionLeft === false && {\n paddingLeft: '0',\n }),\n\n ...(props.isImagePositionLeft && {\n paddingRight: '0',\n }),\n },\n\n [`@container (min-width: ${largeSize}px)`]: {\n padding: `0 ${Styles.token.spacing['6xl']}`,\n\n ...(props.isImagePositionLeft === false && {\n paddingLeft: '0',\n }),\n\n ...(props.isImagePositionLeft && {\n paddingRight: '0',\n }),\n },\n },\n },\n });\n\n const container = ElementModel.createDiv({\n className: 'pathway-text-container',\n children: [wrapper],\n elementStyles: {\n element: {\n container: 'inline-size',\n\n ...(props.includesAnimation && {\n ...theme.media.withViewTimelineAnimation({\n opacity: '0',\n transform: 'translateY(100px)',\n transition: 'opacity 1s, transform 1s',\n transitionDelay: props.isImagePositionLeft ? '0.5s' : '0s',\n }),\n }),\n\n ...(props.isThemeDark && {\n backgroundColor: Styles.token.color.black,\n color: Styles.token.color.white,\n }),\n\n ...(props.isThemeMaryland && {\n backgroundColor: Styles.token.color.red,\n color: Styles.token.color.white,\n }),\n\n [`@container (min-width: ${mediumSize}px)`]: {\n ...(props.isImagePositionLeft === false && {\n order: '1',\n }),\n },\n },\n },\n });\n\n return container;\n};\n\nconst createLock = (props: PathwayStandardProps) => {\n const textContent = createTextContent(props);\n const assetContent = createAssetColumn(props);\n const children: ElementVisual[] = [];\n\n if (assetContent) {\n children.push(assetContent);\n }\n children.push(textContent);\n\n const lockWrapper = ElementModel.createDiv({\n className: 'pathway-container-lock-wrapper',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n\n [`@container (min-width: ${mediumSize}px)`]: {\n display: 'grid',\n gridTemplateColumns: '50% 50%',\n alignItems: 'center',\n minHeight: '56vh',\n },\n },\n },\n });\n\n return ElementModel.layout.spaceHorizontalLarger({\n element: document.createElement('div'),\n children: [lockWrapper],\n elementStyles: {\n element: {\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n paddingLeft: 0,\n paddingRight: 0,\n },\n },\n },\n });\n};\n\nexport default (props: PathwayStandardProps) => {\n const composite = ElementModel.createDiv({\n className: 'pathway-container',\n children: [\n ElementModel.createDiv({\n className: 'pathway-container-wrapper',\n children: [createLock(props)],\n }),\n ],\n elementStyles: {\n element: {\n container: 'inline-size',\n position: 'relative',\n overflow: 'hidden',\n },\n },\n });\n\n // Set up animation observer\n const loadAnimation = () => {\n if (props.includesAnimation) {\n const textElement = composite.element.querySelector(\n '.pathway-text-container',\n ) as HTMLElement;\n const imageElement = composite.element.querySelector(\n '.pathway-image-container',\n ) as HTMLElement | null;\n\n if (textElement) {\n setupAnimation(composite.element, textElement, imageElement);\n }\n }\n };\n\n return {\n ...composite,\n events: {\n loadAnimation,\n },\n };\n};\n"],"names":["observer","ElementModel.createDiv","theme.media.withViewTimelineAnimation","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
|