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

package/dist/composite/pathway/overlay.mjs

@@ -1,261 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-import * as token from "@universityofmaryland/web-token-library";
-import * as layout from "@universityofmaryland/web-styles-library/layout";
-import * as Styles from "@universityofmaryland/web-styles-library";
-import { withViewTimelineAnimation } from "@universityofmaryland/web-utilities-library/styles";
-import { createAssetContent, createTextLockupMedium } from "./_common.mjs";
-const REF_TEXT_ELEMENT = "pathway-text-container";
-const REF_IMAGE_ELEMENT = "pathway-image-container";
-const REF_KEY_FRAME_BACKGROUND_LEFT = "pathway-overlay-background-left";
-const REF_KEY_FRAME_BACKGROUND_RIGHT = "pathway-overlay-background-right";
-const mediumSize = 800;
-const largeSize = 1200;
-const keyFrameBackgroundLeft = `
-  @keyframes ${REF_KEY_FRAME_BACKGROUND_LEFT} {
-    from {
-      transform: translateX(30vw);
-   }
-    to {
-      transform: translateX(0);
-    }
-  }
-`;
-const keyFrameBackgroundRight = `
-  @keyframes ${REF_KEY_FRAME_BACKGROUND_RIGHT} {
-    from {
-      transform: translateX(-30vw);
-   }
-    to {
-      transform: translateX(0);
-    }
-  }
-`;
-const setupAnimation = (container) => {
-  const textElement = container.querySelector(
-    `.${REF_TEXT_ELEMENT}`
-  );
-  const imageElement = container.querySelector(
-    `.${REF_IMAGE_ELEMENT}`
-  );
-  if (!textElement) return;
-  const rect = container.getBoundingClientRect();
-  const elementTop = rect.top + window.scrollY;
-  const viewportBottom = window.scrollY + window.innerHeight;
-  const hasAnimationOccured = elementTop < viewportBottom - rect.height * 0.65;
-  let isInitialCheck = true;
-  if (hasAnimationOccured) {
-    textElement.style.transition = "opacity 0s, transform 0s";
-    textElement.style.opacity = "1";
-    textElement.style.transform = "translateY(0)";
-    if (imageElement) {
-      imageElement.style.transition = "opacity 0s, transform 0s";
-      imageElement.style.opacity = "1";
-      imageElement.style.transform = "translateY(0)";
-    }
-    return;
-  }
-  const observer = new IntersectionObserver(
-    (entries, observer2) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          if (isInitialCheck && entry.intersectionRatio >= 0.35) {
-            textElement.style.transition = "opacity 0s, transform 0s";
-          }
-          textElement.style.opacity = "1";
-          textElement.style.transform = "translateY(0)";
-          if (imageElement) {
-            if (isInitialCheck && entry.intersectionRatio >= 0.35) {
-              imageElement.style.transition = "opacity 0s, transform 0s";
-            }
-            imageElement.style.opacity = "1";
-            imageElement.style.transform = "translateY(0)";
-          }
-          observer2.unobserve(entry.target);
-        }
-        isInitialCheck = false;
-      });
-    },
-    {
-      rootMargin: "0px",
-      threshold: [0.35]
-    }
-  );
-  observer.observe(container);
-};
-const createAssetColumn = (props) => {
-  const { image, video, includesAnimation, isImagePositionLeft } = props;
-  if (!image && !video) return null;
-  return new ElementBuilder().withClassName(REF_IMAGE_ELEMENT).withChild(createAssetContent(props)).withStyles({
-    element: {
-      position: "relative",
-      height: "100%",
-      ...includesAnimation && {
-        ...withViewTimelineAnimation({
-          opacity: "0",
-          transform: "translateY(100px)",
-          transition: "opacity 1s, transform 1s",
-          transitionDelay: isImagePositionLeft ? "0s" : "0.5s"
-        })
-      },
-      [`@container (max-width: ${mediumSize - 1}px)`]: {
-        display: "grid",
-        minHeight: "56vw"
-      },
-      [`@container (min-width: ${mediumSize}px)`]: {
-        ...isImagePositionLeft === false && {
-          order: "2"
-        }
-      },
-      [`@container (min-width: ${largeSize}px)`]: {
-        [`& img`]: {
-          minHeight: "656px"
-        }
-      }
-    }
-  }).build();
-};
-const createTextContent = (props) => {
-  const wrapper = new ElementBuilder().withClassName("pathway-text-container-wrapper").withChild(createTextLockupMedium(props)).withStyles({
-    element: {
-      padding: `${token.spacing.md} 0`,
-      [`@container (max-width: ${mediumSize - 1}px)`]: {
-        ...layout.space.horizontal.larger
-      },
-      [`@container (min-width: ${mediumSize}px)`]: {
-        padding: `${token.spacing["4xl"]} ${token.spacing["2xl"]}`,
-        ...props.isImagePositionLeft === false && {
-          paddingLeft: "0"
-        },
-        ...props.isImagePositionLeft && {
-          paddingRight: "0"
-        }
-      },
-      [`@container (min-width: ${largeSize}px)`]: {
-        padding: `${token.spacing["8xl"]} ${token.spacing["6xl"]}`,
-        ...props.isImagePositionLeft === false && {
-          paddingLeft: "0"
-        },
-        ...props.isImagePositionLeft && {
-          paddingRight: "0"
-        }
-      }
-    }
-  }).build();
-  const container = new ElementBuilder().withClassName(REF_TEXT_ELEMENT).withChild(wrapper).withStyles({
-    element: {
-      zIndex: "99",
-      ...props.includesAnimation && {
-        ...withViewTimelineAnimation({
-          opacity: "0",
-          transform: "translateY(100px)",
-          transition: "opacity 1s, transform 1s",
-          transitionDelay: props.isImagePositionLeft ? "0.5s" : "0s"
-        })
-      },
-      [`@container (min-width: ${mediumSize}px)`]: {
-        ...props.isImagePositionLeft === false && {
-          order: "1"
-        }
-      }
-    }
-  }).build();
-  return container;
-};
-const createBackground = (props) => {
-  const getBackgroundColor = () => {
-    if (props.isThemeDark) return token.color.black;
-    if (props.isThemeLight) return token.color.gray.lighter;
-    if (props.isThemeMaryland) return token.color.red;
-    return token.color.white;
-  };
-  return new ElementBuilder().withClassName("pathway-overlay-container-background").withStyles({
-    element: {
-      position: "absolute",
-      top: "0",
-      bottom: "0",
-      right: `-${token.spacing.xl}`,
-      width: `calc(100% + ${token.spacing["6xl"]})`,
-      backgroundColor: getBackgroundColor(),
-      [`@container (min-width: ${mediumSize}px)`]: {
-        ...props.includesAnimation && {
-          animationTimeline: "view()",
-          animationRangeStart: "entry",
-          animationRangeEnd: "contain",
-          ...withViewTimelineAnimation({
-            width: "calc(75% + 1000px)",
-            ...props.isImagePositionLeft === true && {
-              right: "-1000px",
-              animationName: REF_KEY_FRAME_BACKGROUND_LEFT
-            },
-            ...props.isImagePositionLeft === false && {
-              animationName: REF_KEY_FRAME_BACKGROUND_RIGHT,
-              left: "-1000px",
-              right: "auto"
-            }
-          })
-        }
-      }
-    }
-  }).build();
-};
-const createLock = (props) => {
-  const isThemeApplied = props.isThemeDark || props.isThemeLight || props.isThemeMaryland;
-  const lockWrapper = new ElementBuilder().withClassName("pathway-overlay-container-lock-wrapper").withStyles({
-    element: {
-      position: "relative",
-      [`@container (max-width: ${mediumSize - 1}px)`]: {
-        padding: "0"
-      },
-      [`@container (min-width: ${mediumSize}px)`]: {
-        display: "grid",
-        gridTemplateColumns: "1fr 1fr",
-        alignItems: "center",
-        ...isThemeApplied && {
-          padding: `${token.spacing["6xl"]} 0`
-        }
-      }
-    }
-  });
-  lockWrapper.withChild(createBackground(props));
-  const assetColumn = createAssetColumn(props);
-  if (assetColumn) {
-    lockWrapper.withChild(assetColumn);
-  }
-  lockWrapper.withChild(createTextContent(props));
-  const lockWrapperBuilt = lockWrapper.build();
-  return new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(lockWrapperBuilt).withStyles({
-    element: {
-      [`@container (max-width: ${mediumSize - 1}px)`]: {
-        paddingLeft: 0,
-        paddingRight: 0
-      }
-    }
-  }).build();
-};
-const overlay = (props) => {
-  const wrapper = new ElementBuilder().withClassName("pathway-overlay-container-wrapper").withChild(createLock(props)).build();
-  const composite = new ElementBuilder().withClassName("pathway-overlay-container").withChild(wrapper).withStyles({
-    element: {
-      container: "inline-size",
-      position: "relative",
-      overflow: "clip"
-    }
-  }).build();
-  const loadAnimation = () => {
-    if (props.includesAnimation) {
-      setupAnimation(composite.element);
-    }
-  };
-  composite.styles += keyFrameBackgroundLeft;
-  composite.styles += keyFrameBackgroundRight;
-  return {
-    ...composite,
-    events: {
-      loadAnimation
-    }
-  };
-};
-export {
-  overlay as default
-};
-//# sourceMappingURL=overlay.mjs.map

package/dist/composite/pathway/overlay.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"overlay.mjs","sources":["../../../source/composite/pathway/overlay.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { createTextLockupMedium, createAssetContent } from './_common';\nimport { type PathwayOverlayProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst REF_TEXT_ELEMENT = 'pathway-text-container';\nconst REF_IMAGE_ELEMENT = 'pathway-image-container';\n\nconst REF_KEY_FRAME_BACKGROUND_LEFT = 'pathway-overlay-background-left';\nconst REF_KEY_FRAME_BACKGROUND_RIGHT = 'pathway-overlay-background-right';\n\nconst mediumSize = 800;\nconst largeSize = 1200;\n\nconst keyFrameBackgroundLeft = `\n  @keyframes ${REF_KEY_FRAME_BACKGROUND_LEFT} {\n    from {\n      transform: translateX(30vw);\n   }\n    to {\n      transform: translateX(0);\n    }\n  }\n`;\n\nconst keyFrameBackgroundRight = `\n  @keyframes ${REF_KEY_FRAME_BACKGROUND_RIGHT} {\n    from {\n      transform: translateX(-30vw);\n   }\n    to {\n      transform: translateX(0);\n    }\n  }\n`;\n\nconst setupAnimation = (container: HTMLElement) => {\n  const textElement = container.querySelector(\n    `.${REF_TEXT_ELEMENT}`,\n  ) as HTMLElement;\n  const imageElement = container.querySelector(\n    `.${REF_IMAGE_ELEMENT}`,\n  ) as HTMLElement | null;\n\n  if (!textElement) return;\n\n  const rect = container.getBoundingClientRect();\n  const elementTop = rect.top + window.scrollY;\n  const viewportBottom = window.scrollY + window.innerHeight;\n  const hasAnimationOccured = elementTop < viewportBottom - rect.height * 0.65;\n  let isInitialCheck = true;\n\n  if (hasAnimationOccured) {\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  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    PathwayOverlayProps,\n    | 'dateSign'\n    | 'isThemeDark'\n    | 'image'\n    | 'video'\n    | 'includesAnimation'\n    | 'isImagePositionLeft'\n    | 'isImageScaled'\n  >,\n): ElementModel<HTMLElement> | null => {\n  const { image, video, includesAnimation, isImagePositionLeft } = props;\n\n  if (!image && !video) return null;\n\n  return new ElementBuilder()\n    .withClassName(REF_IMAGE_ELEMENT)\n    .withChild(createAssetContent(props))\n    .withStyles({\n      element: {\n        position: 'relative',\n        height: '100%',\n\n        ...(includesAnimation && {\n          ...withViewTimelineAnimation({\n            opacity: '0',\n            transform: 'translateY(100px)',\n            transition: 'opacity 1s, transform 1s',\n            transitionDelay: isImagePositionLeft ? '0s' : '0.5s',\n          }),\n        }),\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          display: 'grid',\n          minHeight: '56vw',\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          ...(isImagePositionLeft === false && {\n            order: '2',\n          }),\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          [`& img`]: {\n            minHeight: '656px',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst createTextContent = (\n  props: PathwayOverlayProps,\n): ElementModel<HTMLElement> => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-text-container-wrapper')\n    .withChild(createTextLockupMedium(props))\n    .withStyles({\n      element: {\n        padding: `${token.spacing.md} 0`,\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          ...layout.space.horizontal.larger,\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          padding: `${token.spacing['4xl']} ${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: `${token.spacing['8xl']} ${token.spacing['6xl']}`,\n\n          ...(props.isImagePositionLeft === false && {\n            paddingLeft: '0',\n          }),\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: '0',\n          }),\n        },\n      },\n    })\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName(REF_TEXT_ELEMENT)\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        zIndex: '99',\n\n        ...(props.includesAnimation && {\n          ...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        [`@container (min-width: ${mediumSize}px)`]: {\n          ...(props.isImagePositionLeft === false && {\n            order: '1',\n          }),\n        },\n      },\n    })\n    .build();\n\n  return container;\n};\n\nconst createBackground = (\n  props: PathwayOverlayProps,\n): ElementModel<HTMLElement> => {\n  const getBackgroundColor = () => {\n    if (props.isThemeDark) return token.color.black;\n    if (props.isThemeLight) return token.color.gray.lighter;\n    if (props.isThemeMaryland) return token.color.red;\n    return token.color.white;\n  };\n\n  return new ElementBuilder()\n    .withClassName('pathway-overlay-container-background')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: '0',\n        bottom: '0',\n        right: `-${token.spacing.xl}`,\n        width: `calc(100% + ${token.spacing['6xl']})`,\n        backgroundColor: getBackgroundColor(),\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          ...(props.includesAnimation && {\n            animationTimeline: 'view()',\n            animationRangeStart: 'entry',\n            animationRangeEnd: 'contain',\n\n            ...withViewTimelineAnimation({\n              width: 'calc(75% + 1000px)',\n\n              ...(props.isImagePositionLeft === true && {\n                right: '-1000px',\n                animationName: REF_KEY_FRAME_BACKGROUND_LEFT,\n              }),\n\n              ...(props.isImagePositionLeft === false && {\n                animationName: REF_KEY_FRAME_BACKGROUND_RIGHT,\n                left: '-1000px',\n                right: 'auto',\n              }),\n            }),\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst createLock = (props: PathwayOverlayProps) => {\n  const isThemeApplied =\n    props.isThemeDark || props.isThemeLight || props.isThemeMaryland;\n\n  const lockWrapper = new ElementBuilder()\n    .withClassName('pathway-overlay-container-lock-wrapper')\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          padding: '0',\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          display: 'grid',\n          gridTemplateColumns: '1fr 1fr',\n          alignItems: 'center',\n\n          ...(isThemeApplied && {\n            padding: `${token.spacing['6xl']} 0`,\n          }),\n        },\n      },\n    });\n\n  lockWrapper.withChild(createBackground(props));\n\n  const assetColumn = createAssetColumn(props);\n  if (assetColumn) {\n    lockWrapper.withChild(assetColumn);\n  }\n\n  lockWrapper.withChild(createTextContent(props));\n\n  const lockWrapperBuilt = lockWrapper.build();\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(lockWrapperBuilt)\n    .withStyles({\n      element: {\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingLeft: 0,\n          paddingRight: 0,\n        },\n      },\n    })\n    .build();\n};\n\nexport default (props: PathwayOverlayProps) => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-overlay-container-wrapper')\n    .withChild(createLock(props))\n    .build();\n\n  const composite = new ElementBuilder()\n    .withClassName('pathway-overlay-container')\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        container: 'inline-size',\n        position: 'relative',\n        overflow: 'clip',\n      },\n    })\n    .build();\n\n  const loadAnimation = () => {\n    if (props.includesAnimation) {\n      setupAnimation(composite.element);\n    }\n  };\n\n  composite.styles += keyFrameBackgroundLeft;\n  composite.styles += keyFrameBackgroundRight;\n\n  return {\n    ...composite,\n    events: {\n      loadAnimation,\n    },\n  };\n};\n"],"names":["observer"],"mappings":"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"}

package/dist/composite/pathway/standard.mjs

@@ -1,201 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-import * as token from "@universityofmaryland/web-token-library";
-import * as Styles from "@universityofmaryland/web-styles-library";
-import { withViewTimelineAnimation } from "@universityofmaryland/web-utilities-library/styles";
-import { createTextLockupMedium, createAssetContent } from "./_common.mjs";
-const mediumSize = 800;
-const largeSize = 1200;
-const setupAnimation = (container, textElement, imageElement) => {
-  const rect = container.getBoundingClientRect();
-  const elementTop = rect.top + window.scrollY;
-  const viewportBottom = window.scrollY + window.innerHeight;
-  if (elementTop < viewportBottom - rect.height * 0.65) {
-    textElement.style.transition = "opacity 0s, transform 0s";
-    textElement.style.opacity = "1";
-    textElement.style.transform = "translateY(0)";
-    if (imageElement) {
-      imageElement.style.transition = "opacity 0s, transform 0s";
-      imageElement.style.opacity = "1";
-      imageElement.style.transform = "translateY(0)";
-    }
-    return;
-  }
-  let isInitialCheck = true;
-  const observer = new IntersectionObserver(
-    (entries, observer2) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          if (isInitialCheck && entry.intersectionRatio >= 0.35) {
-            textElement.style.transition = "opacity 0s, transform 0s";
-          }
-          textElement.style.opacity = "1";
-          textElement.style.transform = "translateY(0)";
-          if (imageElement) {
-            if (isInitialCheck && entry.intersectionRatio >= 0.35) {
-              imageElement.style.transition = "opacity 0s, transform 0s";
-            }
-            imageElement.style.opacity = "1";
-            imageElement.style.transform = "translateY(0)";
-          }
-          observer2.unobserve(entry.target);
-        }
-        isInitialCheck = false;
-      });
-    },
-    {
-      rootMargin: "0px",
-      threshold: [0.35]
-    }
-  );
-  observer.observe(container);
-};
-const createAssetColumn = (props) => {
-  const {
-    image,
-    video,
-    includesAnimation,
-    isImagePositionLeft,
-    isImageScaled
-  } = props;
-  if (!image && !video) return null;
-  return new ElementBuilder().withClassName("pathway-image-container").withChild(createAssetContent(props)).withStyles({
-    element: {
-      position: "relative",
-      height: "100%",
-      ...includesAnimation && {
-        ...withViewTimelineAnimation({
-          opacity: "0",
-          transform: "translateY(100px)",
-          transition: "opacity 1s, transform 1s",
-          transitionDelay: isImagePositionLeft ? "0s" : "0.5s"
-        })
-      },
-      ...isImageScaled === false && {
-        display: "flex",
-        justifyContent: "center"
-      },
-      [`@container (max-width: ${mediumSize - 1}px)`]: {
-        display: "grid",
-        height: "56vw"
-      },
-      [`@container (min-width: ${mediumSize}px)`]: {
-        ...isImagePositionLeft === false && {
-          order: "2"
-        }
-      }
-    }
-  }).build();
-};
-const createTextContent = (props) => {
-  const wrapper = new ElementBuilder().withClassName("pathway-text-container-wrapper").withChild(createTextLockupMedium(props)).withStyles({
-    element: {
-      padding: `${token.spacing.md} ${token.spacing.lg}`,
-      [`@container (min-width: ${mediumSize}px)`]: {
-        padding: `0 ${token.spacing["2xl"]}`,
-        ...props.isImagePositionLeft === false && {
-          paddingLeft: "0"
-        },
-        ...props.isImagePositionLeft && {
-          paddingRight: "0"
-        }
-      },
-      [`@container (min-width: ${largeSize}px)`]: {
-        padding: `0 ${token.spacing["6xl"]}`,
-        ...props.isImagePositionLeft === false && {
-          paddingLeft: "0"
-        },
-        ...props.isImagePositionLeft && {
-          paddingRight: "0"
-        }
-      }
-    }
-  }).build();
-  const container = new ElementBuilder().withClassName("pathway-text-container").withChild(wrapper).withStyles({
-    element: {
-      container: "inline-size",
-      ...props.includesAnimation && {
-        ...withViewTimelineAnimation({
-          opacity: "0",
-          transform: "translateY(100px)",
-          transition: "opacity 1s, transform 1s",
-          transitionDelay: props.isImagePositionLeft ? "0.5s" : "0s"
-        })
-      },
-      ...props.isThemeDark && {
-        backgroundColor: token.color.black,
-        color: token.color.white
-      },
-      ...props.isThemeMaryland && {
-        backgroundColor: token.color.red,
-        color: token.color.white
-      },
-      [`@container (min-width: ${mediumSize}px)`]: {
-        ...props.isImagePositionLeft === false && {
-          order: "1"
-        }
-      }
-    }
-  }).build();
-  return container;
-};
-const createLock = (props) => {
-  const textContent = createTextContent(props);
-  const assetContent = createAssetColumn(props);
-  const lockWrapper = new ElementBuilder().withClassName("pathway-container-lock-wrapper").withStyles({
-    element: {
-      position: "relative",
-      [`@container (min-width: ${mediumSize}px)`]: {
-        display: "grid",
-        gridTemplateColumns: "50% 50%",
-        alignItems: "center",
-        minHeight: "56vh"
-      }
-    }
-  });
-  if (assetContent) {
-    lockWrapper.withChild(assetContent);
-  }
-  lockWrapper.withChild(textContent);
-  const lockWrapperBuilt = lockWrapper.build();
-  return new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(lockWrapperBuilt).withStyles({
-    element: {
-      [`@container (max-width: ${mediumSize - 1}px)`]: {
-        paddingLeft: 0,
-        paddingRight: 0
-      }
-    }
-  }).build();
-};
-const standard = (props) => {
-  const wrapper = new ElementBuilder().withClassName("pathway-container-wrapper").withChild(createLock(props)).build();
-  const composite = new ElementBuilder().withClassName("pathway-container").withChild(wrapper).withStyles({
-    element: {
-      container: "inline-size",
-      position: "relative",
-      overflow: "hidden"
-    }
-  }).build();
-  const loadAnimation = () => {
-    if (props.includesAnimation) {
-      const textElement = composite.element.querySelector(
-        ".pathway-text-container"
-      );
-      const imageElement = composite.element.querySelector(
-        ".pathway-image-container"
-      );
-      if (textElement) {
-        setupAnimation(composite.element, textElement, imageElement);
-      }
-    }
-  };
-  return {
-    ...composite,
-    events: {
-      loadAnimation
-    }
-  };
-};
-export {
-  standard as default
-};
-//# sourceMappingURL=standard.mjs.map

package/dist/composite/pathway/standard.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"standard.mjs","sources":["../../../source/composite/pathway/standard.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { createTextLockupMedium, createAssetContent } from './_common';\nimport { type PathwayStandardProps } from './_types';\nimport { type ElementModel } 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): ElementModel<HTMLElement> | 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 new ElementBuilder()\n    .withClassName('pathway-image-container')\n    .withChild(createAssetContent(props))\n    .withStyles({\n      element: {\n        position: 'relative',\n        height: '100%',\n\n        ...(includesAnimation && {\n          ...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    .build();\n};\n\nconst createTextContent = (\n  props: PathwayStandardProps,\n): ElementModel<HTMLElement> => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-text-container-wrapper')\n    .withChild(createTextLockupMedium(props))\n    .withStyles({\n      element: {\n        padding: `${token.spacing.md} ${token.spacing.lg}`,\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          padding: `0 ${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 ${token.spacing['6xl']}`,\n\n          ...(props.isImagePositionLeft === false && {\n            paddingLeft: '0',\n          }),\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: '0',\n          }),\n        },\n      },\n    })\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('pathway-text-container')\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        container: 'inline-size',\n\n        ...(props.includesAnimation && {\n          ...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: token.color.black,\n          color: token.color.white,\n        }),\n\n        ...(props.isThemeMaryland && {\n          backgroundColor: token.color.red,\n          color: token.color.white,\n        }),\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          ...(props.isImagePositionLeft === false && {\n            order: '1',\n          }),\n        },\n      },\n    })\n    .build();\n\n  return container;\n};\n\nconst createLock = (props: PathwayStandardProps) => {\n  const textContent = createTextContent(props);\n  const assetContent = createAssetColumn(props);\n\n  const lockWrapper = new ElementBuilder()\n    .withClassName('pathway-container-lock-wrapper')\n    .withStyles({\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  if (assetContent) {\n    lockWrapper.withChild(assetContent);\n  }\n  lockWrapper.withChild(textContent);\n\n  const lockWrapperBuilt = lockWrapper.build();\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(lockWrapperBuilt)\n    .withStyles({\n      element: {\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingLeft: 0,\n          paddingRight: 0,\n        },\n      },\n    })\n    .build();\n};\n\nexport default (props: PathwayStandardProps) => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-container-wrapper')\n    .withChild(createLock(props))\n    .build();\n\n  const composite = new ElementBuilder()\n    .withClassName('pathway-container')\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        container: 'inline-size',\n        position: 'relative',\n        overflow: 'hidden',\n      },\n    })\n    .build();\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"],"mappings":"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"}

package/dist/composite/pathway/sticky.mjs

@@ -1,131 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-import * as token from "@universityofmaryland/web-token-library";
-import * as layout from "@universityofmaryland/web-styles-library/layout";
-import * as Styles from "@universityofmaryland/web-styles-library";
-import { createTextLockupMedium, createAssetContent } from "./_common.mjs";
-const mediumSize = 800;
-const largeSize = 1200;
-const createAssetColumn = (props) => {
-  const { image, video, isImagePositionLeft, isImageScaled } = props;
-  if (!image && !video) return null;
-  return new ElementBuilder().withClassName("pathway-image-container").withChild(createAssetContent(props)).withStyles({
-    element: {
-      position: "sticky",
-      top: "0",
-      alignSelf: "flex-start",
-      height: "100%",
-      ...isImageScaled === false && {
-        display: "flex",
-        justifyContent: "center"
-      },
-      [`@container (max-width: ${mediumSize - 1}px)`]: {
-        position: "relative",
-        display: "grid",
-        minHeight: "56vw"
-      },
-      [`@container (min-width: ${mediumSize}px)`]: {
-        position: "sticky",
-        top: "0",
-        alignSelf: "flex-start",
-        ...isImagePositionLeft === false && {
-          order: "2"
-        }
-      },
-      [`@container (min-width: ${largeSize}px)`]: {
-        [`& img`]: {
-          minHeight: "656px"
-        }
-      }
-    }
-  }).build();
-};
-const createTextContent = (props) => {
-  const wrapper = new ElementBuilder().withClassName("pathway-text-container-wrapper").withChild(createTextLockupMedium(props)).withStyles({
-    element: {
-      padding: `${token.spacing.md} 0`,
-      [`@container (max-width: ${mediumSize - 1}px)`]: {
-        ...layout.space.horizontal.larger
-      },
-      [`@container (min-width: ${mediumSize}px)`]: {
-        padding: `0 ${token.spacing["2xl"]}`,
-        ...props.isImagePositionLeft === false && {
-          paddingLeft: "0"
-        },
-        ...props.isImagePositionLeft && {
-          paddingRight: "0"
-        }
-      },
-      [`@container (min-width: ${largeSize}px)`]: {
-        padding: `0 ${token.spacing["6xl"]}`,
-        ...props.isImagePositionLeft === false && {
-          paddingLeft: "0"
-        },
-        ...props.isImagePositionLeft && {
-          paddingRight: "0"
-        }
-      }
-    }
-  }).build();
-  const container = new ElementBuilder().withClassName("pathway-text-container").withChild(wrapper).withStyles({
-    element: {
-      ...props.isThemeDark && {
-        backgroundColor: token.color.black,
-        color: token.color.white
-      },
-      ...props.isThemeMaryland && {
-        backgroundColor: token.color.red,
-        color: token.color.white
-      },
-      [`@container (min-width: ${mediumSize}px)`]: {
-        ...props.isImagePositionLeft === false && {
-          order: "1"
-        }
-      }
-    }
-  }).build();
-  return container;
-};
-const createLock = (props) => {
-  const textContent = createTextContent(props);
-  const assetContent = createAssetColumn(props);
-  const lockWrapper = new ElementBuilder().withClassName("pathway-container-lock-wrapper").withStyles({
-    element: {
-      position: "relative",
-      [`@container (max-width: ${mediumSize - 1}px)`]: {
-        padding: "0"
-      },
-      [`@container (min-width: ${mediumSize}px)`]: {
-        display: "flex",
-        [`& > *`]: {
-          width: "50%"
-        }
-      }
-    }
-  });
-  if (assetContent) {
-    lockWrapper.withChild(assetContent);
-  }
-  lockWrapper.withChild(textContent);
-  const lockWrapperBuilt = lockWrapper.build();
-  return new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(lockWrapperBuilt).withStyles({
-    element: {
-      [`@container (max-width: ${mediumSize - 1}px)`]: {
-        paddingLeft: 0,
-        paddingRight: 0
-      }
-    }
-  }).build();
-};
-const sticky = (props) => {
-  const wrapper = new ElementBuilder().withClassName("pathway-sticky-container-wrapper").withChild(createLock(props)).build();
-  return new ElementBuilder().withClassName("pathway-sticky-container").withChild(wrapper).withStyles({
-    element: {
-      container: "inline-size",
-      position: "relative"
-    }
-  }).build();
-};
-export {
-  sticky as default
-};
-//# sourceMappingURL=sticky.mjs.map

package/dist/composite/pathway/sticky.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"sticky.mjs","sources":["../../../source/composite/pathway/sticky.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { createAssetContent, createTextLockupMedium } from './_common';\nimport { type PathwayStickyProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst mediumSize = 800;\nconst largeSize = 1200;\n\nconst createAssetColumn = (\n  props: Pick<\n    PathwayStickyProps,\n    | 'dateSign'\n    | 'isThemeDark'\n    | 'image'\n    | 'video'\n    | 'isImagePositionLeft'\n    | 'isImageScaled'\n  >,\n): ElementModel<HTMLElement> | null => {\n  const { image, video, isImagePositionLeft, isImageScaled } = props;\n\n  if (!image && !video) return null;\n\n  return new ElementBuilder()\n    .withClassName('pathway-image-container')\n    .withChild(createAssetContent(props))\n    .withStyles({\n      element: {\n        position: 'sticky',\n        top: '0',\n        alignSelf: 'flex-start',\n        height: '100%',\n\n        ...(isImageScaled === false && {\n          display: 'flex',\n          justifyContent: 'center',\n        }),\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          position: 'relative',\n          display: 'grid',\n          minHeight: '56vw',\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          position: 'sticky',\n          top: '0',\n          alignSelf: 'flex-start',\n\n          ...(isImagePositionLeft === false && {\n            order: '2',\n          }),\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          [`& img`]: {\n            minHeight: '656px',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst createTextContent = (\n  props: PathwayStickyProps,\n): ElementModel<HTMLElement> => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-text-container-wrapper')\n    .withChild(createTextLockupMedium(props))\n    .withStyles({\n      element: {\n        padding: `${token.spacing.md} 0`,\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          ...layout.space.horizontal.larger,\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          padding: `0 ${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 ${token.spacing['6xl']}`,\n\n          ...(props.isImagePositionLeft === false && {\n            paddingLeft: '0',\n          }),\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: '0',\n          }),\n        },\n      },\n    })\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('pathway-text-container')\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        ...(props.isThemeDark && {\n          backgroundColor: token.color.black,\n          color: token.color.white,\n        }),\n\n        ...(props.isThemeMaryland && {\n          backgroundColor: token.color.red,\n          color: token.color.white,\n        }),\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          ...(props.isImagePositionLeft === false && {\n            order: '1',\n          }),\n        },\n      },\n    })\n    .build();\n\n  return container;\n};\n\nconst createLock = (props: PathwayStickyProps) => {\n  const textContent = createTextContent(props);\n  const assetContent = createAssetColumn(props);\n\n  const lockWrapper = new ElementBuilder()\n    .withClassName('pathway-container-lock-wrapper')\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          padding: '0',\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          display: 'flex',\n\n          [`& > *`]: {\n            width: '50%',\n          },\n        },\n      },\n    });\n\n  if (assetContent) {\n    lockWrapper.withChild(assetContent);\n  }\n  lockWrapper.withChild(textContent);\n\n  const lockWrapperBuilt = lockWrapper.build();\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(lockWrapperBuilt)\n    .withStyles({\n      element: {\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingLeft: 0,\n          paddingRight: 0,\n        },\n      },\n    })\n    .build();\n};\n\nexport default (props: PathwayStickyProps) => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-sticky-container-wrapper')\n    .withChild(createLock(props))\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('pathway-sticky-container')\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        container: 'inline-size',\n        position: 'relative',\n      },\n    })\n    .build();\n};\n"],"names":[],"mappings":"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"}