@universityofmaryland/web-elements-library 1.4.1 → 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.
Files changed (10) hide show
  1. package/README.md +1 -1
  2. package/dist/composite/pathway/_common.js +1 -1
  3. package/dist/composite/pathway/_common.js.map +1 -1
  4. package/dist/composite/pathway/_common.mjs +1 -1
  5. package/dist/composite/pathway/_common.mjs.map +1 -1
  6. package/dist/composite/pathway/standard.js +1 -1
  7. package/dist/composite/pathway/standard.js.map +1 -1
  8. package/dist/composite/pathway/standard.mjs +1 -1
  9. package/dist/composite/pathway/standard.mjs.map +1 -1
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # University of Maryland Web Elements Library
2
2
 
3
- [![Elements Version](https://img.shields.io/badge/Elements-v1.4.1-blue)](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
3
+ [![Elements Version](https://img.shields.io/badge/Elements-v1.4.3-blue)](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
 
package/dist/composite/pathway/_common.js CHANGED
@@ -104,7 +104,7 @@ const createTextLockupMedium = (props) => medium({
104
104
  compositeStats: createCompositeStat(props)
105
105
  });
106
106
  const createAssetContent = (props) => {
107
- const { dateSign, image, video, isImageScaled } = props;
107
+ const { dateSign, image, video, isImageScaled = true } = props;
108
108
  const children = [];
109
109
  if (video) {
110
110
  children.push(
package/dist/composite/pathway/_common.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"_common.js","sources":["../../../source/composite/pathway/_common.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport * as Atomic from 'atomic';\nimport { type PathwayTextLockupProps, type PathwayAssetProps } from './_types';\n\nexport const createCompositeHeadline = ({\n headline,\n isThemeDark,\n isThemeMaryland,\n}: Pick<\n PathwayTextLockupProps,\n 'headline' | 'isThemeDark' | 'isThemeMaryland'\n>) => {\n const characterCount = headline?.textContent?.trim().length || 0;\n const isOverwriteHeadline = characterCount > 30;\n\n if (!headline) return null;\n\n const desktopStyles = {\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(isOverwriteHeadline && {\n fontSize: '40px',\n }),\n },\n };\n\n return ElementModel.headline.sansLargest({\n element: headline,\n isThemeDark: isThemeDark || isThemeMaryland,\n elementStyles: {\n element: {\n fontWeight: 800,\n textTransform: 'uppercase',\n textWrap: 'balance',\n color: Styles.token.color.black,\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n });\n};\n\nexport const createCompositeStat = ({\n stats,\n}: Pick<PathwayTextLockupProps, 'stats'>) => {\n const mediumSize = 800;\n\n if (!stats) return null;\n\n const statWrapper = ElementModel.createDiv({\n className: 'text-lockup-medium-stats',\n elementStyles: {\n element: {\n marginTop: Styles.token.spacing.lg,\n\n [`&:has(> *:nth-child(2))`]: {\n display: `grid`,\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n marginTop: Styles.token.spacing.lg,\n paddingTop: Styles.token.spacing.md,\n borderTop: `1px solid ${Styles.token.color.gray.light}`,\n },\n\n [`@container (min-width: ${mediumSize}px)`]: {\n marginTop: Styles.token.spacing['2xl'],\n\n [`&:has(> *:nth-child(2))`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n gridTemplateColumns: `repeat(2, 1fr)`,\n },\n },\n },\n },\n });\n\n statWrapper.element.innerHTML = stats.innerHTML;\n\n return statWrapper;\n};\n\nexport const createTextLockupMedium = (\n props: Pick<\n PathwayTextLockupProps,\n | 'stats'\n | 'actions'\n | 'eventDetails'\n | 'eyebrow'\n | 'headline'\n | 'stats'\n | 'text'\n | 'isThemeDark'\n | 'isThemeMaryland'\n >,\n) =>\n Atomic.textLockup.medium({\n ...props,\n ribbon: props.eyebrow,\n compositeHeadline: createCompositeHeadline(props),\n compositeStats: createCompositeStat(props),\n });\n\nexport const createAssetContent = (\n props: Pick<\n PathwayAssetProps,\n 'dateSign' | 'image' | 'video' | 'isImageScaled'\n >,\n) => {\n const { dateSign, image, video, isImageScaled } = props;\n const children = [];\n\n if (video) {\n children.push(\n Atomic.assets.video.observedAutoPlay({\n video,\n isScaled: isImageScaled,\n additionalElementStyles: {\n [`& video`]: {\n objectFit: 'cover',\n width: '100%',\n height: '100%',\n },\n },\n }),\n );\n }\n\n if (!video && image) {\n children.push(\n Atomic.assets.image.background({\n element: image,\n isScaled: isImageScaled,\n isShowCaption: true,\n isGifAllowed: true,\n dateSign,\n }),\n );\n }\n\n return ElementModel.createDiv({\n className: 'pathway-image-container-wrapper',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n overflow: 'hidden',\n height: '100%',\n width: '100%',\n display: 'grid',\n\n [`&:has(.image-container)`]: {\n alignItems: 'center',\n },\n },\n },\n });\n};\n"],"names":["headline","Styles","ElementModel.headline.sansLargest","ElementModel.createDiv","Atomic.textLockup.medium","Atomic.assets.video.observedAutoPlay","Atomic.assets.image.background"],"mappings":"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"}
1
+ {"version":3,"file":"_common.js","sources":["../../../source/composite/pathway/_common.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport * as Atomic from 'atomic';\nimport { type PathwayTextLockupProps, type PathwayAssetProps } from './_types';\n\nexport const createCompositeHeadline = ({\n headline,\n isThemeDark,\n isThemeMaryland,\n}: Pick<\n PathwayTextLockupProps,\n 'headline' | 'isThemeDark' | 'isThemeMaryland'\n>) => {\n const characterCount = headline?.textContent?.trim().length || 0;\n const isOverwriteHeadline = characterCount > 30;\n\n if (!headline) return null;\n\n const desktopStyles = {\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(isOverwriteHeadline && {\n fontSize: '40px',\n }),\n },\n };\n\n return ElementModel.headline.sansLargest({\n element: headline,\n isThemeDark: isThemeDark || isThemeMaryland,\n elementStyles: {\n element: {\n fontWeight: 800,\n textTransform: 'uppercase',\n textWrap: 'balance',\n color: Styles.token.color.black,\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n });\n};\n\nexport const createCompositeStat = ({\n stats,\n}: Pick<PathwayTextLockupProps, 'stats'>) => {\n const mediumSize = 800;\n\n if (!stats) return null;\n\n const statWrapper = ElementModel.createDiv({\n className: 'text-lockup-medium-stats',\n elementStyles: {\n element: {\n marginTop: Styles.token.spacing.lg,\n\n [`&:has(> *:nth-child(2))`]: {\n display: `grid`,\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n marginTop: Styles.token.spacing.lg,\n paddingTop: Styles.token.spacing.md,\n borderTop: `1px solid ${Styles.token.color.gray.light}`,\n },\n\n [`@container (min-width: ${mediumSize}px)`]: {\n marginTop: Styles.token.spacing['2xl'],\n\n [`&:has(> *:nth-child(2))`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n gridTemplateColumns: `repeat(2, 1fr)`,\n },\n },\n },\n },\n });\n\n statWrapper.element.innerHTML = stats.innerHTML;\n\n return statWrapper;\n};\n\nexport const createTextLockupMedium = (\n props: Pick<\n PathwayTextLockupProps,\n | 'stats'\n | 'actions'\n | 'eventDetails'\n | 'eyebrow'\n | 'headline'\n | 'stats'\n | 'text'\n | 'isThemeDark'\n | 'isThemeMaryland'\n >,\n) =>\n Atomic.textLockup.medium({\n ...props,\n ribbon: props.eyebrow,\n compositeHeadline: createCompositeHeadline(props),\n compositeStats: createCompositeStat(props),\n });\n\nexport const createAssetContent = (\n props: Pick<\n PathwayAssetProps,\n 'dateSign' | 'image' | 'video' | 'isImageScaled'\n >,\n) => {\n const { dateSign, image, video, isImageScaled = true } = props;\n const children = [];\n\n if (video) {\n children.push(\n Atomic.assets.video.observedAutoPlay({\n video,\n isScaled: isImageScaled,\n additionalElementStyles: {\n [`& video`]: {\n objectFit: 'cover',\n width: '100%',\n height: '100%',\n },\n },\n }),\n );\n }\n\n if (!video && image) {\n children.push(\n Atomic.assets.image.background({\n element: image,\n isScaled: isImageScaled,\n isShowCaption: true,\n isGifAllowed: true,\n dateSign,\n }),\n );\n }\n\n return ElementModel.createDiv({\n className: 'pathway-image-container-wrapper',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n overflow: 'hidden',\n height: '100%',\n width: '100%',\n display: 'grid',\n\n [`&:has(.image-container)`]: {\n alignItems: 'center',\n },\n },\n },\n });\n};\n"],"names":["headline","Styles","ElementModel.headline.sansLargest","ElementModel.createDiv","Atomic.textLockup.medium","Atomic.assets.video.observedAutoPlay","Atomic.assets.image.background"],"mappings":"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"}
package/dist/composite/pathway/_common.mjs CHANGED
@@ -85,7 +85,7 @@ const createTextLockupMedium = (props) => medium({
85
85
  compositeStats: createCompositeStat(props)
86
86
  });
87
87
  const createAssetContent = (props) => {
88
- const { dateSign, image, video, isImageScaled } = props;
88
+ const { dateSign, image, video, isImageScaled = true } = props;
89
89
  const children = [];
90
90
  if (video) {
91
91
  children.push(
package/dist/composite/pathway/_common.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"_common.mjs","sources":["../../../source/composite/pathway/_common.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport * as Atomic from 'atomic';\nimport { type PathwayTextLockupProps, type PathwayAssetProps } from './_types';\n\nexport const createCompositeHeadline = ({\n headline,\n isThemeDark,\n isThemeMaryland,\n}: Pick<\n PathwayTextLockupProps,\n 'headline' | 'isThemeDark' | 'isThemeMaryland'\n>) => {\n const characterCount = headline?.textContent?.trim().length || 0;\n const isOverwriteHeadline = characterCount > 30;\n\n if (!headline) return null;\n\n const desktopStyles = {\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(isOverwriteHeadline && {\n fontSize: '40px',\n }),\n },\n };\n\n return ElementModel.headline.sansLargest({\n element: headline,\n isThemeDark: isThemeDark || isThemeMaryland,\n elementStyles: {\n element: {\n fontWeight: 800,\n textTransform: 'uppercase',\n textWrap: 'balance',\n color: Styles.token.color.black,\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n });\n};\n\nexport const createCompositeStat = ({\n stats,\n}: Pick<PathwayTextLockupProps, 'stats'>) => {\n const mediumSize = 800;\n\n if (!stats) return null;\n\n const statWrapper = ElementModel.createDiv({\n className: 'text-lockup-medium-stats',\n elementStyles: {\n element: {\n marginTop: Styles.token.spacing.lg,\n\n [`&:has(> *:nth-child(2))`]: {\n display: `grid`,\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n marginTop: Styles.token.spacing.lg,\n paddingTop: Styles.token.spacing.md,\n borderTop: `1px solid ${Styles.token.color.gray.light}`,\n },\n\n [`@container (min-width: ${mediumSize}px)`]: {\n marginTop: Styles.token.spacing['2xl'],\n\n [`&:has(> *:nth-child(2))`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n gridTemplateColumns: `repeat(2, 1fr)`,\n },\n },\n },\n },\n });\n\n statWrapper.element.innerHTML = stats.innerHTML;\n\n return statWrapper;\n};\n\nexport const createTextLockupMedium = (\n props: Pick<\n PathwayTextLockupProps,\n | 'stats'\n | 'actions'\n | 'eventDetails'\n | 'eyebrow'\n | 'headline'\n | 'stats'\n | 'text'\n | 'isThemeDark'\n | 'isThemeMaryland'\n >,\n) =>\n Atomic.textLockup.medium({\n ...props,\n ribbon: props.eyebrow,\n compositeHeadline: createCompositeHeadline(props),\n compositeStats: createCompositeStat(props),\n });\n\nexport const createAssetContent = (\n props: Pick<\n PathwayAssetProps,\n 'dateSign' | 'image' | 'video' | 'isImageScaled'\n >,\n) => {\n const { dateSign, image, video, isImageScaled } = props;\n const children = [];\n\n if (video) {\n children.push(\n Atomic.assets.video.observedAutoPlay({\n video,\n isScaled: isImageScaled,\n additionalElementStyles: {\n [`& video`]: {\n objectFit: 'cover',\n width: '100%',\n height: '100%',\n },\n },\n }),\n );\n }\n\n if (!video && image) {\n children.push(\n Atomic.assets.image.background({\n element: image,\n isScaled: isImageScaled,\n isShowCaption: true,\n isGifAllowed: true,\n dateSign,\n }),\n );\n }\n\n return ElementModel.createDiv({\n className: 'pathway-image-container-wrapper',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n overflow: 'hidden',\n height: '100%',\n width: '100%',\n display: 'grid',\n\n [`&:has(.image-container)`]: {\n alignItems: 'center',\n },\n },\n },\n });\n};\n"],"names":["ElementModel.headline.sansLargest","ElementModel.createDiv","Atomic.textLockup.medium","Atomic.assets.video.observedAutoPlay","Atomic.assets.image.background"],"mappings":"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"}
1
+ {"version":3,"file":"_common.mjs","sources":["../../../source/composite/pathway/_common.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport * as Atomic from 'atomic';\nimport { type PathwayTextLockupProps, type PathwayAssetProps } from './_types';\n\nexport const createCompositeHeadline = ({\n headline,\n isThemeDark,\n isThemeMaryland,\n}: Pick<\n PathwayTextLockupProps,\n 'headline' | 'isThemeDark' | 'isThemeMaryland'\n>) => {\n const characterCount = headline?.textContent?.trim().length || 0;\n const isOverwriteHeadline = characterCount > 30;\n\n if (!headline) return null;\n\n const desktopStyles = {\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(isOverwriteHeadline && {\n fontSize: '40px',\n }),\n },\n };\n\n return ElementModel.headline.sansLargest({\n element: headline,\n isThemeDark: isThemeDark || isThemeMaryland,\n elementStyles: {\n element: {\n fontWeight: 800,\n textTransform: 'uppercase',\n textWrap: 'balance',\n color: Styles.token.color.black,\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n });\n};\n\nexport const createCompositeStat = ({\n stats,\n}: Pick<PathwayTextLockupProps, 'stats'>) => {\n const mediumSize = 800;\n\n if (!stats) return null;\n\n const statWrapper = ElementModel.createDiv({\n className: 'text-lockup-medium-stats',\n elementStyles: {\n element: {\n marginTop: Styles.token.spacing.lg,\n\n [`&:has(> *:nth-child(2))`]: {\n display: `grid`,\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n marginTop: Styles.token.spacing.lg,\n paddingTop: Styles.token.spacing.md,\n borderTop: `1px solid ${Styles.token.color.gray.light}`,\n },\n\n [`@container (min-width: ${mediumSize}px)`]: {\n marginTop: Styles.token.spacing['2xl'],\n\n [`&:has(> *:nth-child(2))`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n gridTemplateColumns: `repeat(2, 1fr)`,\n },\n },\n },\n },\n });\n\n statWrapper.element.innerHTML = stats.innerHTML;\n\n return statWrapper;\n};\n\nexport const createTextLockupMedium = (\n props: Pick<\n PathwayTextLockupProps,\n | 'stats'\n | 'actions'\n | 'eventDetails'\n | 'eyebrow'\n | 'headline'\n | 'stats'\n | 'text'\n | 'isThemeDark'\n | 'isThemeMaryland'\n >,\n) =>\n Atomic.textLockup.medium({\n ...props,\n ribbon: props.eyebrow,\n compositeHeadline: createCompositeHeadline(props),\n compositeStats: createCompositeStat(props),\n });\n\nexport const createAssetContent = (\n props: Pick<\n PathwayAssetProps,\n 'dateSign' | 'image' | 'video' | 'isImageScaled'\n >,\n) => {\n const { dateSign, image, video, isImageScaled = true } = props;\n const children = [];\n\n if (video) {\n children.push(\n Atomic.assets.video.observedAutoPlay({\n video,\n isScaled: isImageScaled,\n additionalElementStyles: {\n [`& video`]: {\n objectFit: 'cover',\n width: '100%',\n height: '100%',\n },\n },\n }),\n );\n }\n\n if (!video && image) {\n children.push(\n Atomic.assets.image.background({\n element: image,\n isScaled: isImageScaled,\n isShowCaption: true,\n isGifAllowed: true,\n dateSign,\n }),\n );\n }\n\n return ElementModel.createDiv({\n className: 'pathway-image-container-wrapper',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n overflow: 'hidden',\n height: '100%',\n width: '100%',\n display: 'grid',\n\n [`&:has(.image-container)`]: {\n alignItems: 'center',\n },\n },\n },\n });\n};\n"],"names":["ElementModel.headline.sansLargest","ElementModel.createDiv","Atomic.textLockup.medium","Atomic.assets.video.observedAutoPlay","Atomic.assets.image.background"],"mappings":"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"}
package/dist/composite/pathway/standard.js CHANGED
@@ -189,7 +189,7 @@ const createLock = (props) => {
189
189
  display: "grid",
190
190
  gridTemplateColumns: "50% 50%",
191
191
  alignItems: "center",
192
- minHeight: "48vh"
192
+ minHeight: "56vh"
193
193
  }
194
194
  }
195
195
  }
package/dist/composite/pathway/standard.js.map CHANGED
@@ -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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"}
package/dist/composite/pathway/standard.mjs CHANGED
@@ -171,7 +171,7 @@ const createLock = (props) => {
171
171
  display: "grid",
172
172
  gridTemplateColumns: "50% 50%",
173
173
  alignItems: "center",
174
- minHeight: "48vh"
174
+ minHeight: "56vh"
175
175
  }
176
176
  }
177
177
  }
package/dist/composite/pathway/standard.mjs.map CHANGED
@@ -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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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@universityofmaryland/web-elements-library",
3
- "version": "1.4.1",
3
+ "version": "1.4.3",
4
4
  "description": "UMD Web Elements",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",