@universityofmaryland/web-elements-library 1.5.2 → 1.5.5

package/dist/composite/pathway/standard.js

@@ -1,9 +1,9 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
+const Styles = require("@universityofmaryland/web-styles-library");
 const styles = require("@universityofmaryland/web-utilities-library/styles");
-const index = require("../../model/elements/index.js");
 const _common = require("./_common.js");
-const layout = require("../../model/elements/layout.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -21,6 +21,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
 const mediumSize = 800;
 const largeSize = 1200;
 const setupAnimation = (container, textElement, imageElement) => {
@@ -76,151 +77,123 @@ const createAssetColumn = (props) => {
     isImageScaled
   } = props;
   if (!image && !video) return null;
-  return index.createDiv({
-    className: "pathway-image-container",
-    children: [_common.createAssetContent(props)],
-    elementStyles: {
-      element: {
-        position: "relative",
-        height: "100%",
-        ...includesAnimation && {
-          ...styles.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"
-          }
+  return new webBuilderLibrary.ElementBuilder().withClassName("pathway-image-container").withChild(_common.createAssetContent(props)).withStyles({
+    element: {
+      position: "relative",
+      height: "100%",
+      ...includesAnimation && {
+        ...styles.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 = index.createDiv({
-    className: "pathway-text-container-wrapper",
-    children: [_common.createTextLockupMedium(props)],
-    elementStyles: {
-      element: {
-        padding: `${token__namespace.spacing.md} ${token__namespace.spacing.lg}`,
-        [`@container (min-width: ${mediumSize}px)`]: {
-          padding: `0 ${token__namespace.spacing["2xl"]}`,
-          ...props.isImagePositionLeft === false && {
-            paddingLeft: "0"
-          },
-          ...props.isImagePositionLeft && {
-            paddingRight: "0"
-          }
+  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("pathway-text-container-wrapper").withChild(_common.createTextLockupMedium(props)).withStyles({
+    element: {
+      padding: `${token__namespace.spacing.md} ${token__namespace.spacing.lg}`,
+      [`@container (min-width: ${mediumSize}px)`]: {
+        padding: `0 ${token__namespace.spacing["2xl"]}`,
+        ...props.isImagePositionLeft === false && {
+          paddingLeft: "0"
         },
-        [`@container (min-width: ${largeSize}px)`]: {
-          padding: `0 ${token__namespace.spacing["6xl"]}`,
-          ...props.isImagePositionLeft === false && {
-            paddingLeft: "0"
-          },
-          ...props.isImagePositionLeft && {
-            paddingRight: "0"
-          }
+        ...props.isImagePositionLeft && {
+          paddingRight: "0"
+        }
+      },
+      [`@container (min-width: ${largeSize}px)`]: {
+        padding: `0 ${token__namespace.spacing["6xl"]}`,
+        ...props.isImagePositionLeft === false && {
+          paddingLeft: "0"
+        },
+        ...props.isImagePositionLeft && {
+          paddingRight: "0"
         }
       }
     }
-  });
-  const container = index.createDiv({
-    className: "pathway-text-container",
-    children: [wrapper],
-    elementStyles: {
-      element: {
-        container: "inline-size",
-        ...props.includesAnimation && {
-          ...styles.withViewTimelineAnimation({
-            opacity: "0",
-            transform: "translateY(100px)",
-            transition: "opacity 1s, transform 1s",
-            transitionDelay: props.isImagePositionLeft ? "0.5s" : "0s"
-          })
-        },
-        ...props.isThemeDark && {
-          backgroundColor: token__namespace.color.black,
-          color: token__namespace.color.white
-        },
-        ...props.isThemeMaryland && {
-          backgroundColor: token__namespace.color.red,
-          color: token__namespace.color.white
-        },
-        [`@container (min-width: ${mediumSize}px)`]: {
-          ...props.isImagePositionLeft === false && {
-            order: "1"
-          }
+  }).build();
+  const container = new webBuilderLibrary.ElementBuilder().withClassName("pathway-text-container").withChild(wrapper).withStyles({
+    element: {
+      container: "inline-size",
+      ...props.includesAnimation && {
+        ...styles.withViewTimelineAnimation({
+          opacity: "0",
+          transform: "translateY(100px)",
+          transition: "opacity 1s, transform 1s",
+          transitionDelay: props.isImagePositionLeft ? "0.5s" : "0s"
+        })
+      },
+      ...props.isThemeDark && {
+        backgroundColor: token__namespace.color.black,
+        color: token__namespace.color.white
+      },
+      ...props.isThemeMaryland && {
+        backgroundColor: token__namespace.color.red,
+        color: token__namespace.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 children = [];
-  if (assetContent) {
-    children.push(assetContent);
-  }
-  children.push(textContent);
-  const lockWrapper = index.createDiv({
-    className: "pathway-container-lock-wrapper",
-    children,
-    elementStyles: {
-      element: {
-        position: "relative",
-        [`@container (min-width: ${mediumSize}px)`]: {
-          display: "grid",
-          gridTemplateColumns: "50% 50%",
-          alignItems: "center",
-          minHeight: "56vh"
-        }
+  const lockWrapper = new webBuilderLibrary.ElementBuilder().withClassName("pathway-container-lock-wrapper").withStyles({
+    element: {
+      position: "relative",
+      [`@container (min-width: ${mediumSize}px)`]: {
+        display: "grid",
+        gridTemplateColumns: "50% 50%",
+        alignItems: "center",
+        minHeight: "56vh"
       }
     }
   });
-  return layout.spaceHorizontalLarger({
-    element: document.createElement("div"),
-    children: [lockWrapper],
-    elementStyles: {
-      element: {
-        [`@container (max-width: ${mediumSize - 1}px)`]: {
-          paddingLeft: 0,
-          paddingRight: 0
-        }
+  if (assetContent) {
+    lockWrapper.withChild(assetContent);
+  }
+  lockWrapper.withChild(textContent);
+  const lockWrapperBuilt = lockWrapper.build();
+  return new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.space.horizontal.larger).withChild(lockWrapperBuilt).withStyles({
+    element: {
+      [`@container (max-width: ${mediumSize - 1}px)`]: {
+        paddingLeft: 0,
+        paddingRight: 0
       }
     }
-  });
+  }).build();
 };
 const standard = (props) => {
-  const composite = index.createDiv({
-    className: "pathway-container",
-    children: [
-      index.createDiv({
-        className: "pathway-container-wrapper",
-        children: [createLock(props)]
-      })
-    ],
-    elementStyles: {
-      element: {
-        container: "inline-size",
-        position: "relative",
-        overflow: "hidden"
-      }
+  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("pathway-container-wrapper").withChild(createLock(props)).build();
+  const composite = new webBuilderLibrary.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(

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

@@ -1 +1 @@
-{"version":3,"file":"standard.js","sources":["../../../source/composite/pathway/standard.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\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          ...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: `${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  });\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          ...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  });\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","withViewTimelineAnimation","createTextLockupMedium","token","ElementModel.layout.spaceHorizontalLarger"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,aAAa;AACnB,MAAM,YAAY;AAElB,MAAM,iBAAiB,CACrB,WACA,aACA,iBACG;AACH,QAAM,OAAO,UAAU,sBAAA;AACvB,QAAM,aAAa,KAAK,MAAM,OAAO;AACrC,QAAM,iBAAiB,OAAO,UAAU,OAAO;AAE/C,MAAI,aAAa,iBAAiB,KAAK,SAAS,MAAM;AACpD,gBAAY,MAAM,aAAa;AAC/B,gBAAY,MAAM,UAAU;AAC5B,gBAAY,MAAM,YAAY;AAE9B,QAAI,cAAc;AAChB,mBAAa,MAAM,aAAa;AAChC,mBAAa,MAAM,UAAU;AAC7B,mBAAa,MAAM,YAAY;AAAA,IACjC;AACA;AAAA,EACF;AAEA,MAAI,iBAAiB;AAErB,QAAM,WAAW,IAAI;AAAA,IACnB,CAAC,SAASA,cAAa;AACrB,cAAQ,QAAQ,CAAC,UAAU;AACzB,YAAI,MAAM,gBAAgB;AACxB,cAAI,kBAAkB,MAAM,qBAAqB,MAAM;AACrD,wBAAY,MAAM,aAAa;AAAA,UACjC;AAEA,sBAAY,MAAM,UAAU;AAC5B,sBAAY,MAAM,YAAY;AAE9B,cAAI,cAAc;AAChB,gBAAI,kBAAkB,MAAM,qBAAqB,MAAM;AACrD,2BAAa,MAAM,aAAa;AAAA,YAClC;AACA,yBAAa,MAAM,UAAU;AAC7B,yBAAa,MAAM,YAAY;AAAA,UACjC;AAEAA,oBAAS,UAAU,MAAM,MAAM;AAAA,QACjC;AAEA,yBAAiB;AAAA,MACnB,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE,YAAY;AAAA,MACZ,WAAW,CAAC,IAAI;AAAA,IAAA;AAAA,EAClB;AAGF,WAAS,QAAQ,SAAS;AAC5B;AAEA,MAAM,oBAAoB,CACxB,UAUyB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,MAAI,CAAC,SAAS,CAAC,MAAO,QAAO;AAE7B,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAACC,2BAAmB,KAAK,CAAC;AAAA,IACpC,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,QAAQ;AAAA,QAER,GAAI,qBAAqB;AAAA,UACvB,GAAGC,iCAA0B;AAAA,YAC3B,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,iBAAiB,sBAAsB,OAAO;AAAA,UAAA,CAC/C;AAAA,QAAA;AAAA,QAGH,GAAI,kBAAkB,SAAS;AAAA,UAC7B,SAAS;AAAA,UACT,gBAAgB;AAAA,QAAA;AAAA,QAGlB,CAAC,0BAA0B,aAAa,CAAC,KAAK,GAAG;AAAA,UAC/C,SAAS;AAAA,UACT,QAAQ;AAAA,QAAA;AAAA,QAGV,CAAC,0BAA0B,UAAU,KAAK,GAAG;AAAA,UAC3C,GAAI,wBAAwB,SAAS;AAAA,YACnC,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,oBAAoB,CAAC,UAA+C;AACxE,QAAM,UAAUF,MAAAA,UAAuB;AAAA,IACrC,WAAW;AAAA,IACX,UAAU,CAACG,+BAAuB,KAAK,CAAC;AAAA,IACxC,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS,GAAGC,iBAAM,QAAQ,EAAE,IAAIA,iBAAM,QAAQ,EAAE;AAAA,QAEhD,CAAC,0BAA0B,UAAU,KAAK,GAAG;AAAA,UAC3C,SAAS,KAAKA,iBAAM,QAAQ,KAAK,CAAC;AAAA,UAElC,GAAI,MAAM,wBAAwB,SAAS;AAAA,YACzC,aAAa;AAAA,UAAA;AAAA,UAGf,GAAI,MAAM,uBAAuB;AAAA,YAC/B,cAAc;AAAA,UAAA;AAAA,QAChB;AAAA,QAGF,CAAC,0BAA0B,SAAS,KAAK,GAAG;AAAA,UAC1C,SAAS,KAAKA,iBAAM,QAAQ,KAAK,CAAC;AAAA,UAElC,GAAI,MAAM,wBAAwB,SAAS;AAAA,YACzC,aAAa;AAAA,UAAA;AAAA,UAGf,GAAI,MAAM,uBAAuB;AAAA,YAC/B,cAAc;AAAA,UAAA;AAAA,QAChB;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,QAAM,YAAYJ,MAAAA,UAAuB;AAAA,IACvC,WAAW;AAAA,IACX,UAAU,CAAC,OAAO;AAAA,IAClB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW;AAAA,QAEX,GAAI,MAAM,qBAAqB;AAAA,UAC7B,GAAGE,iCAA0B;AAAA,YAC3B,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,iBAAiB,MAAM,sBAAsB,SAAS;AAAA,UAAA,CACvD;AAAA,QAAA;AAAA,QAGH,GAAI,MAAM,eAAe;AAAA,UACvB,iBAAiBE,iBAAM,MAAM;AAAA,UAC7B,OAAOA,iBAAM,MAAM;AAAA,QAAA;AAAA,QAGrB,GAAI,MAAM,mBAAmB;AAAA,UAC3B,iBAAiBA,iBAAM,MAAM;AAAA,UAC7B,OAAOA,iBAAM,MAAM;AAAA,QAAA;AAAA,QAGrB,CAAC,0BAA0B,UAAU,KAAK,GAAG;AAAA,UAC3C,GAAI,MAAM,wBAAwB,SAAS;AAAA,YACzC,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAO;AACT;AAEA,MAAM,aAAa,CAAC,UAAgC;AAClD,QAAM,cAAc,kBAAkB,KAAK;AAC3C,QAAM,eAAe,kBAAkB,KAAK;AAC5C,QAAM,WAA4B,CAAA;AAElC,MAAI,cAAc;AAChB,aAAS,KAAK,YAAY;AAAA,EAC5B;AACA,WAAS,KAAK,WAAW;AAEzB,QAAM,cAAcJ,MAAAA,UAAuB;AAAA,IACzC,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QAEV,CAAC,0BAA0B,UAAU,KAAK,GAAG;AAAA,UAC3C,SAAS;AAAA,UACT,qBAAqB;AAAA,UACrB,YAAY;AAAA,UACZ,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAOK,6BAA0C;AAAA,IAC/C,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,UAAU,CAAC,WAAW;AAAA,IACtB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,0BAA0B,aAAa,CAAC,KAAK,GAAG;AAAA,UAC/C,aAAa;AAAA,UACb,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAA,WAAe,CAAC,UAAgC;AAC9C,QAAM,YAAYL,MAAAA,UAAuB;AAAA,IACvC,WAAW;AAAA,IACX,UAAU;AAAA,MACRA,gBAAuB;AAAA,QACrB,WAAW;AAAA,QACX,UAAU,CAAC,WAAW,KAAK,CAAC;AAAA,MAAA,CAC7B;AAAA,IAAA;AAAA,IAEH,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAGD,QAAM,gBAAgB,MAAM;AAC1B,QAAI,MAAM,mBAAmB;AAC3B,YAAM,cAAc,UAAU,QAAQ;AAAA,QACpC;AAAA,MAAA;AAEF,YAAM,eAAe,UAAU,QAAQ;AAAA,QACrC;AAAA,MAAA;AAGF,UAAI,aAAa;AACf,uBAAe,UAAU,SAAS,aAAa,YAAY;AAAA,MAC7D;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ;;"}
+{"version":3,"file":"standard.js","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","ElementBuilder","createAssetContent","withViewTimelineAnimation","createTextLockupMedium","token","Styles"],"mappings":"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"}

package/dist/composite/pathway/standard.mjs

@@ -1,8 +1,8 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+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 { createDiv } from "../../model/elements/index.mjs";
 import { createTextLockupMedium, createAssetContent } from "./_common.mjs";
-import { spaceHorizontalLarger } from "../../model/elements/layout.mjs";
 const mediumSize = 800;
 const largeSize = 1200;
 const setupAnimation = (container, textElement, imageElement) => {
@@ -58,151 +58,123 @@ const createAssetColumn = (props) => {
     isImageScaled
   } = props;
   if (!image && !video) return null;
-  return createDiv({
-    className: "pathway-image-container",
-    children: [createAssetContent(props)],
-    elementStyles: {
-      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"
-          }
+  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 = createDiv({
-    className: "pathway-text-container-wrapper",
-    children: [createTextLockupMedium(props)],
-    elementStyles: {
-      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"
-          }
+  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"
         },
-        [`@container (min-width: ${largeSize}px)`]: {
-          padding: `0 ${token.spacing["6xl"]}`,
-          ...props.isImagePositionLeft === false && {
-            paddingLeft: "0"
-          },
-          ...props.isImagePositionLeft && {
-            paddingRight: "0"
-          }
+        ...props.isImagePositionLeft && {
+          paddingRight: "0"
+        }
+      },
+      [`@container (min-width: ${largeSize}px)`]: {
+        padding: `0 ${token.spacing["6xl"]}`,
+        ...props.isImagePositionLeft === false && {
+          paddingLeft: "0"
+        },
+        ...props.isImagePositionLeft && {
+          paddingRight: "0"
         }
       }
     }
-  });
-  const container = createDiv({
-    className: "pathway-text-container",
-    children: [wrapper],
-    elementStyles: {
-      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();
+  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 children = [];
-  if (assetContent) {
-    children.push(assetContent);
-  }
-  children.push(textContent);
-  const lockWrapper = createDiv({
-    className: "pathway-container-lock-wrapper",
-    children,
-    elementStyles: {
-      element: {
-        position: "relative",
-        [`@container (min-width: ${mediumSize}px)`]: {
-          display: "grid",
-          gridTemplateColumns: "50% 50%",
-          alignItems: "center",
-          minHeight: "56vh"
-        }
+  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"
       }
     }
   });
-  return spaceHorizontalLarger({
-    element: document.createElement("div"),
-    children: [lockWrapper],
-    elementStyles: {
-      element: {
-        [`@container (max-width: ${mediumSize - 1}px)`]: {
-          paddingLeft: 0,
-          paddingRight: 0
-        }
+  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 composite = createDiv({
-    className: "pathway-container",
-    children: [
-      createDiv({
-        className: "pathway-container-wrapper",
-        children: [createLock(props)]
-      })
-    ],
-    elementStyles: {
-      element: {
-        container: "inline-size",
-        position: "relative",
-        overflow: "hidden"
-      }
+  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(