@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

package/dist/composite/hero/custom/video-arrow.js

@@ -1,9 +1,11 @@
 "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 typography = require("@universityofmaryland/web-styles-library/typography");
 const elementStyles = require("@universityofmaryland/web-styles-library/element");
 const performance = require("@universityofmaryland/web-utilities-library/performance");
-const index = require("../../../model/elements/index.js");
+require("@universityofmaryland/web-styles-library/layout");
+require("@universityofmaryland/web-styles-library/animation");
 require("@universityofmaryland/web-utilities-library/media");
 require("@universityofmaryland/web-utilities-library/dom");
 require("@universityofmaryland/web-icons-library/controls");
@@ -15,17 +17,17 @@ require("../../../atomic/animations/actions/indicator.js");
 const chevronFlow = require("../../../atomic/animations/brand/chevron-flow.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
 require("../../../atomic/animations/brand/card-stack.js");
+require("@universityofmaryland/web-styles-library");
 const observedAutoPlay = require("../../../atomic/assets/video/observed-auto-play.js");
 require("@universityofmaryland/web-icons-library/location");
 require("@universityofmaryland/web-icons-library/calendar");
+require("@universityofmaryland/web-utilities-library/theme");
 require("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");
 require("../../../atomic/layout/person/columns.js");
 require("@universityofmaryland/web-icons-library/social");
 require("../../../atomic/text-lockup/date.js");
 require("../../../atomic/text-lockup/small.js");
-const headline = require("../../../model/elements/headline.js");
-const richText = require("../../../model/elements/rich-text.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -58,47 +60,45 @@ const ANIMATION_CONFIG = {
     EASING: "ease-in-out"
   }
 };
-const createHeadline = (headline$1) => {
-  if (!headline$1) return null;
-  return headline.campaignExtraLarge({
-    element: headline$1,
-    elementStyles: {
-      element: {
-        textTransform: "uppercase",
-        opacity: 0,
-        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,
-        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.HEADLINE_DELAY,
-        textWrap: "balance"
-      },
-      siblingAfter: {
-        marginTop: token__namespace.spacing.md
-      }
+const createHeadline = (headline) => {
+  if (!headline) return null;
+  return new webBuilderLibrary.ElementBuilder(headline).styled(typography__namespace.campaign.extralarge).withStyles({
+    element: {
+      textTransform: "uppercase",
+      opacity: 0,
+      transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,
+      transitionDelay: ANIMATION_CONFIG.TEXT_FADE.HEADLINE_DELAY,
+      textWrap: "balance",
+      color: token__namespace.color.white
+    },
+    siblingAfter: {
+      marginTop: token__namespace.spacing.md
     }
-  });
+  }).build();
 };
 const createText = (text) => {
   if (!text) return null;
-  return richText.simpleLargest({
-    element: text,
-    elementStyles: {
-      element: {
-        maxWidth: "720px",
-        marginLeft: "auto",
-        marginRight: "auto",
-        opacity: 0,
-        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,
-        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.TEXT_DELAY,
-        [`@media (max-width: 649px)`]: {
-          display: "none"
-        }
+  return new webBuilderLibrary.ElementBuilder(text).styled(elementStyles__namespace.text.rich.simpleLargest).withStyles({
+    element: {
+      maxWidth: "720px",
+      marginLeft: "auto",
+      marginRight: "auto",
+      opacity: 0,
+      transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,
+      transitionDelay: ANIMATION_CONFIG.TEXT_FADE.TEXT_DELAY,
+      ["& p"]: {
+        color: token__namespace.color.white
+      },
+      [`@media (max-width: 649px)`]: {
+        display: "none"
       }
     }
-  });
+  }).build();
 };
 const createTextChildren = (props) => {
-  const { headline: headline2, text } = props;
+  const { headline, text } = props;
   const children = [];
-  const headlineElement = createHeadline(headline2);
+  const headlineElement = createHeadline(headline);
   if (headlineElement) {
     children.push(headlineElement);
   }
@@ -111,41 +111,28 @@ const createTextChildren = (props) => {
 const createTextContainer = (props) => {
   const children = createTextChildren(props);
   if (children.length === 0) return null;
-  const container = index.create({
-    element: document.createElement("div"),
-    className: "hero-logo-brand-text-container",
-    children,
-    elementStyles: {
-      element: {
-        zIndex: 99,
-        textAlign: "center",
-        width: `calc(100% - 24px)`,
-        maxWidth: "950px",
-        padding: `${token__namespace.spacing.xl} ${token__namespace.spacing.md}`,
-        ["& *"]: {
-          color: token__namespace.color.white
-        }
-      }
+  const container = new webBuilderLibrary.ElementBuilder().withClassName("hero-logo-brand-text-container").withChildren(...children).withStyles({
+    element: {
+      zIndex: 99,
+      textAlign: "center",
+      width: `calc(100% - 24px)`,
+      maxWidth: "950px",
+      padding: `${token__namespace.spacing.xl} ${token__namespace.spacing.md}`
     }
-  });
-  return index.create({
-    element: document.createElement("div"),
-    className: OVERLAY_CLASS,
-    children: [container],
-    elementStyles: {
-      element: {
-        height: "100%",
-        width: "100%",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        backgroundColor: "rgba(0, 0, 0, 0.6)",
-        zIndex: 98,
-        opacity: 0,
-        transition: `opacity ${ANIMATION_CONFIG.OVERLAY_FADE.DURATION} ${ANIMATION_CONFIG.OVERLAY_FADE.EASING}`
-      }
+  }).build();
+  return new webBuilderLibrary.ElementBuilder().withClassName(OVERLAY_CLASS).withChild(container).withStyles({
+    element: {
+      height: "100%",
+      width: "100%",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: "rgba(0, 0, 0, 0.6)",
+      zIndex: 98,
+      opacity: 0,
+      transition: `opacity ${ANIMATION_CONFIG.OVERLAY_FADE.DURATION} ${ANIMATION_CONFIG.OVERLAY_FADE.EASING}`
     }
-  });
+  }).build();
 };
 const createVideo = (video) => {
   return observedAutoPlay({
@@ -165,14 +152,14 @@ const createAnimationSequence = (container) => {
     const overlay = container.querySelector(
       `.${OVERLAY_CLASS}`
     );
-    const headline2 = container.querySelector(
+    const headline = container.querySelector(
       `.${typography__namespace.campaign.fonts.extraLarge.className}`
     );
     const text = container.querySelector(
       `.${elementStyles__namespace.text.rich.simpleLargest.className}`
     );
     if (overlay) overlay.style.opacity = "1";
-    if (headline2) headline2.style.opacity = "1";
+    if (headline) headline.style.opacity = "1";
     if (text) text.style.opacity = "1";
   };
 };
@@ -191,49 +178,40 @@ const createEventHandlers = (composite, overlay) => {
 };
 const videoArrow = (props) => {
   const { video, isAnimationOnLoad } = props;
-  const composite = index.create({
-    element: document.createElement("section"),
-    className: "umd-element-hero-brand-video",
-    elementStyles: {
-      element: {
-        aspectRatio: "16 / 9",
-        width: "100%"
-      }
-    }
-  });
   const videoElement = createVideo(video);
   const textContainer = createTextContainer(props);
-  const wrapperChildren = [videoElement];
-  if (textContainer) {
-    wrapperChildren.push(textContainer);
-  }
-  const wrapper = index.create({
-    element: document.createElement("div"),
-    className: "hero-logo-brand-video-wrapper",
-    children: wrapperChildren,
-    elementStyles: {
-      element: {
-        containerType: "inline-size",
-        position: "relative",
-        overflow: "hidden",
-        height: "100%",
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      }
+  const composite = new webBuilderLibrary.ElementBuilder("section").withClassName("umd-element-hero-brand-video").withStyles({
+    element: {
+      aspectRatio: "16 / 9",
+      width: "100%"
+    }
+  }).build();
+  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("hero-logo-brand-video-wrapper").withChild(videoElement).withStyles({
+    element: {
+      containerType: "inline-size",
+      position: "relative",
+      overflow: "hidden",
+      height: "100%",
+      width: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
     }
   });
+  if (textContainer) {
+    wrapper.withChild(textContainer);
+  }
+  const wrapperBuilt = wrapper.build();
   const overlay = chevronFlow({
     sizedContainer: composite.element,
-    sizedWrapper: wrapper.element,
+    sizedWrapper: wrapperBuilt.element,
     completedCallback: createAnimationSequence(composite.element),
     isAnimationOnLoad
   });
-  wrapper.element.appendChild(overlay.element);
-  wrapper.styles += overlay.styles;
-  composite.element.appendChild(wrapper.element);
-  composite.styles += wrapper.styles;
+  wrapperBuilt.element.appendChild(overlay.element);
+  wrapperBuilt.styles += overlay.styles;
+  composite.element.appendChild(wrapperBuilt.element);
+  composite.styles += wrapperBuilt.styles;
   const events = createEventHandlers(composite, overlay);
   return {
     ...composite,

package/dist/composite/hero/custom/video-arrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"video-arrow.js","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { ElementModel } from 'model';\nimport { animations, assets } from 'atomic';\nimport { type HeroVideoArrowProps as BaseHeroVideoArrowProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\ninterface HeroVideoArrowProps extends Omit<BaseHeroVideoArrowProps, 'video'> {\n  video: HTMLVideoElement;\n  isAnimationOnLoad?: boolean;\n}\n\nconst OVERLAY_CLASS = 'hero-logo-brand-text-overlay';\n\nconst ANIMATION_CONFIG = {\n  TEXT_FADE: {\n    DURATION: '1000ms',\n    EASING: 'ease-in-out',\n    HEADLINE_DELAY: '600ms',\n    TEXT_DELAY: '1500ms',\n  },\n  OVERLAY_FADE: {\n    DURATION: '1500ms',\n    EASING: 'ease-in-out',\n  },\n} as const;\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  if (!headline) return null;\n\n  return ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.HEADLINE_DELAY,\n        textWrap: 'balance',\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    },\n  });\n};\n\nconst createText = (text?: HTMLElement | null) => {\n  if (!text) return null;\n\n  return ElementModel.richText.simpleLargest({\n    element: text,\n    elementStyles: {\n      element: {\n        maxWidth: '720px',\n        marginLeft: 'auto',\n        marginRight: 'auto',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.TEXT_DELAY,\n\n        [`@media (max-width: 649px)`]: {\n          display: 'none',\n        },\n      },\n    },\n  });\n};\n\nconst createTextChildren = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n): ElementVisual[] => {\n  const { headline, text } = props;\n  const children: ElementVisual[] = [];\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  const textElement = createText(text);\n  if (textElement) {\n    children.push(textElement);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n) => {\n  const children = createTextChildren(props);\n\n  if (children.length === 0) return null;\n\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-text-container',\n    children,\n    elementStyles: {\n      element: {\n        zIndex: 99,\n        textAlign: 'center',\n        width: `calc(100% - 24px)`,\n        maxWidth: '950px',\n        padding: `${token.spacing.xl} ${token.spacing.md}`,\n\n        ['& *']: {\n          color: token.color.white,\n        },\n      },\n    },\n  });\n\n  return ElementModel.create({\n    element: document.createElement('div'),\n    className: OVERLAY_CLASS,\n    children: [container],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        backgroundColor: 'rgba(0, 0, 0, 0.6)',\n        zIndex: 98,\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.OVERLAY_FADE.DURATION} ${ANIMATION_CONFIG.OVERLAY_FADE.EASING}`,\n      },\n    },\n  });\n};\n\nconst createVideo = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n    additionalElementStyles: {\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n    },\n  });\n};\n\nconst createAnimationSequence = (container: HTMLElement) => {\n  return () => {\n    const overlay = container.querySelector(\n      `.${OVERLAY_CLASS}`,\n    ) as HTMLDivElement;\n    const headline = container.querySelector(\n      `.${typography.campaign.fonts.extraLarge.className}`,\n    ) as HTMLDivElement;\n    const text = container.querySelector(\n      `.${elementStyles.text.rich.simpleLargest.className}`,\n    ) as HTMLDivElement;\n\n    if (overlay) overlay.style.opacity = '1';\n    if (headline) headline.style.opacity = '1';\n    if (text) text.style.opacity = '1';\n  };\n};\n\nconst createEventHandlers = (\n  composite: ElementVisual,\n  overlay: ReturnType<typeof animations.brand.chevronFlow>,\n) => {\n  const eventResize = () => {\n    if (composite.element.offsetHeight > window.innerHeight) {\n      composite.element.style.height = `${window.innerHeight * 0.9}px`;\n    }\n  };\n\n  const eventLoad = () => {\n    overlay.events.load();\n    eventResize();\n  };\n\n  window.addEventListener('resize', debounce(eventResize, 20));\n\n  return { load: eventLoad };\n};\n\nexport default (props: HeroVideoArrowProps) => {\n  const { video, isAnimationOnLoad } = props;\n\n  const composite = ElementModel.create({\n    element: document.createElement('section'),\n    className: 'umd-element-hero-brand-video',\n    elementStyles: {\n      element: {\n        aspectRatio: '16 / 9',\n        width: '100%',\n      },\n    },\n  });\n\n  const videoElement = createVideo(video);\n  const textContainer = createTextContainer(props);\n\n  const wrapperChildren: ElementVisual[] = [videoElement];\n  if (textContainer) {\n    wrapperChildren.push(textContainer);\n  }\n\n  const wrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-video-wrapper',\n    children: wrapperChildren,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        position: 'relative',\n        overflow: 'hidden',\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      },\n    },\n  });\n\n  const overlay = animations.brand.chevronFlow({\n    sizedContainer: composite.element,\n    sizedWrapper: wrapper.element,\n    completedCallback: createAnimationSequence(composite.element),\n    isAnimationOnLoad,\n  });\n\n  wrapper.element.appendChild(overlay.element);\n  wrapper.styles += overlay.styles;\n\n  composite.element.appendChild(wrapper.element);\n  composite.styles += wrapper.styles;\n\n  const events = createEventHandlers(composite, overlay);\n\n  return {\n    ...composite,\n    events,\n  };\n};\n"],"names":["headline","ElementModel.headline.campaignExtraLarge","token","ElementModel.richText.simpleLargest","ElementModel.create","assets.video.observedAutoPlay","typography","elementStyles","debounce","animations.brand.chevronFlow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,gBAAgB;AAEtB,MAAM,mBAAmB;AAAA,EACvB,WAAW;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,YAAY;AAAA,EAAA;AAAA,EAEd,cAAc;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,EAAA;AAEZ;AAEA,MAAM,iBAAiB,CAACA,eAAkC;AACxD,MAAI,CAACA,WAAU,QAAO;AAEtB,SAAOC,4BAAyC;AAAA,IAC9C,SAASD;AAAAA,IACT,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,SAAS;AAAA,QACT,YAAY,WAAW,iBAAiB,UAAU,QAAQ,IAAI,iBAAiB,UAAU,MAAM;AAAA,QAC/F,iBAAiB,iBAAiB,UAAU;AAAA,QAC5C,UAAU;AAAA,MAAA;AAAA,MAEZ,cAAc;AAAA,QACZ,WAAWE,iBAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B;AAAA,EACF,CACD;AACH;AAEA,MAAM,aAAa,CAAC,SAA8B;AAChD,MAAI,CAAC,KAAM,QAAO;AAElB,SAAOC,uBAAoC;AAAA,IACzC,SAAS;AAAA,IACT,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,aAAa;AAAA,QACb,SAAS;AAAA,QACT,YAAY,WAAW,iBAAiB,UAAU,QAAQ,IAAI,iBAAiB,UAAU,MAAM;AAAA,QAC/F,iBAAiB,iBAAiB,UAAU;AAAA,QAE5C,CAAC,2BAA2B,GAAG;AAAA,UAC7B,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,qBAAqB,CACzB,UACoB;AACpB,QAAM,EAAE,UAAAH,WAAU,KAAA,IAAS;AAC3B,QAAM,WAA4B,CAAA;AAElC,QAAM,kBAAkB,eAAeA,SAAQ;AAC/C,MAAI,iBAAiB;AACnB,aAAS,KAAK,eAAe;AAAA,EAC/B;AAEA,QAAM,cAAc,WAAW,IAAI;AACnC,MAAI,aAAa;AACf,aAAS,KAAK,WAAW;AAAA,EAC3B;AAEA,SAAO;AACT;AAEA,MAAM,sBAAsB,CAC1B,UACG;AACH,QAAM,WAAW,mBAAmB,KAAK;AAEzC,MAAI,SAAS,WAAW,EAAG,QAAO;AAElC,QAAM,YAAYI,MAAAA,OAAoB;AAAA,IACpC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,OAAO;AAAA,QACP,UAAU;AAAA,QACV,SAAS,GAAGF,iBAAM,QAAQ,EAAE,IAAIA,iBAAM,QAAQ,EAAE;AAAA,QAEhD,CAAC,KAAK,GAAG;AAAA,UACP,OAAOA,iBAAM,MAAM;AAAA,QAAA;AAAA,MACrB;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAOE,aAAoB;AAAA,IACzB,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,UAAU,CAAC,SAAS;AAAA,IACpB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,iBAAiB;AAAA,QACjB,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,YAAY,WAAW,iBAAiB,aAAa,QAAQ,IAAI,iBAAiB,aAAa,MAAM;AAAA,MAAA;AAAA,IACvG;AAAA,EACF,CACD;AACH;AAEA,MAAM,cAAc,CAAC,UAA4B;AAC/C,SAAOC,iBAA8B;AAAA,IACnC;AAAA,IACA,UAAU;AAAA,IACV,yBAAyB;AAAA,MACvB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,EACR,CACD;AACH;AAEA,MAAM,0BAA0B,CAAC,cAA2B;AAC1D,SAAO,MAAM;AACX,UAAM,UAAU,UAAU;AAAA,MACxB,IAAI,aAAa;AAAA,IAAA;AAEnB,UAAML,YAAW,UAAU;AAAA,MACzB,IAAIM,sBAAW,SAAS,MAAM,WAAW,SAAS;AAAA,IAAA;AAEpD,UAAM,OAAO,UAAU;AAAA,MACrB,IAAIC,yBAAc,KAAK,KAAK,cAAc,SAAS;AAAA,IAAA;AAGrD,QAAI,QAAS,SAAQ,MAAM,UAAU;AACrC,QAAIP,UAAU,CAAAA,UAAS,MAAM,UAAU;AACvC,QAAI,KAAM,MAAK,MAAM,UAAU;AAAA,EACjC;AACF;AAEA,MAAM,sBAAsB,CAC1B,WACA,YACG;AACH,QAAM,cAAc,MAAM;AACxB,QAAI,UAAU,QAAQ,eAAe,OAAO,aAAa;AACvD,gBAAU,QAAQ,MAAM,SAAS,GAAG,OAAO,cAAc,GAAG;AAAA,IAC9D;AAAA,EACF;AAEA,QAAM,YAAY,MAAM;AACtB,YAAQ,OAAO,KAAA;AACf,gBAAA;AAAA,EACF;AAEA,SAAO,iBAAiB,UAAUQ,YAAAA,SAAS,aAAa,EAAE,CAAC;AAE3D,SAAO,EAAE,MAAM,UAAA;AACjB;AAEA,MAAA,aAAe,CAAC,UAA+B;AAC7C,QAAM,EAAE,OAAO,kBAAA,IAAsB;AAErC,QAAM,YAAYJ,MAAAA,OAAoB;AAAA,IACpC,SAAS,SAAS,cAAc,SAAS;AAAA,IACzC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,aAAa;AAAA,QACb,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,EACF,CACD;AAED,QAAM,eAAe,YAAY,KAAK;AACtC,QAAM,gBAAgB,oBAAoB,KAAK;AAE/C,QAAM,kBAAmC,CAAC,YAAY;AACtD,MAAI,eAAe;AACjB,oBAAgB,KAAK,aAAa;AAAA,EACpC;AAEA,QAAM,UAAUA,MAAAA,OAAoB;AAAA,IAClC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,UAAU;AAAA,IACV,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,UAAU;AAAA,QACV,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,EACF,CACD;AAED,QAAM,UAAUK,YAA6B;AAAA,IAC3C,gBAAgB,UAAU;AAAA,IAC1B,cAAc,QAAQ;AAAA,IACtB,mBAAmB,wBAAwB,UAAU,OAAO;AAAA,IAC5D;AAAA,EAAA,CACD;AAED,UAAQ,QAAQ,YAAY,QAAQ,OAAO;AAC3C,UAAQ,UAAU,QAAQ;AAE1B,YAAU,QAAQ,YAAY,QAAQ,OAAO;AAC7C,YAAU,UAAU,QAAQ;AAE5B,QAAM,SAAS,oBAAoB,WAAW,OAAO;AAErD,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,EAAA;AAEJ;;"}
+{"version":3,"file":"video-arrow.js","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { animations, assets } from 'atomic';\nimport { type HeroVideoArrowProps as BaseHeroVideoArrowProps } from '../_types';\nimport { type ElementModel } from '../../../_types';\n\ninterface HeroVideoArrowProps extends Omit<BaseHeroVideoArrowProps, 'video'> {\n  video: HTMLVideoElement;\n  isAnimationOnLoad?: boolean;\n}\n\nconst OVERLAY_CLASS = 'hero-logo-brand-text-overlay';\n\nconst ANIMATION_CONFIG = {\n  TEXT_FADE: {\n    DURATION: '1000ms',\n    EASING: 'ease-in-out',\n    HEADLINE_DELAY: '600ms',\n    TEXT_DELAY: '1500ms',\n  },\n  OVERLAY_FADE: {\n    DURATION: '1500ms',\n    EASING: 'ease-in-out',\n  },\n} as const;\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(typography.campaign.extralarge)\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.HEADLINE_DELAY,\n        textWrap: 'balance',\n        color: token.color.white,\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .build();\n};\n\nconst createText = (text?: HTMLElement | null) => {\n  if (!text) return null;\n\n  return new ElementBuilder(text)\n    .styled(elementStyles.text.rich.simpleLargest)\n    .withStyles({\n      element: {\n        maxWidth: '720px',\n        marginLeft: 'auto',\n        marginRight: 'auto',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.TEXT_DELAY,\n\n        ['& p']: {\n          color: token.color.white,\n        },\n\n        [`@media (max-width: 649px)`]: {\n          display: 'none',\n        },\n      },\n    })\n    .build();\n};\n\nconst createTextChildren = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n): ElementModel<HTMLElement>[] => {\n  const { headline, text } = props;\n  const children: ElementModel<HTMLElement>[] = [];\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  const textElement = createText(text);\n  if (textElement) {\n    children.push(textElement);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n) => {\n  const children = createTextChildren(props);\n\n  if (children.length === 0) return null;\n\n  const container = new ElementBuilder()\n    .withClassName('hero-logo-brand-text-container')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        zIndex: 99,\n        textAlign: 'center',\n        width: `calc(100% - 24px)`,\n        maxWidth: '950px',\n        padding: `${token.spacing.xl} ${token.spacing.md}`,\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName(OVERLAY_CLASS)\n    .withChild(container)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        backgroundColor: 'rgba(0, 0, 0, 0.6)',\n        zIndex: 98,\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.OVERLAY_FADE.DURATION} ${ANIMATION_CONFIG.OVERLAY_FADE.EASING}`,\n      },\n    })\n    .build();\n};\n\nconst createVideo = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n    additionalElementStyles: {\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n    },\n  });\n};\n\nconst createAnimationSequence = (container: HTMLElement) => {\n  return () => {\n    const overlay = container.querySelector(\n      `.${OVERLAY_CLASS}`,\n    ) as HTMLDivElement;\n    const headline = container.querySelector(\n      `.${typography.campaign.fonts.extraLarge.className}`,\n    ) as HTMLDivElement;\n    const text = container.querySelector(\n      `.${elementStyles.text.rich.simpleLargest.className}`,\n    ) as HTMLDivElement;\n\n    if (overlay) overlay.style.opacity = '1';\n    if (headline) headline.style.opacity = '1';\n    if (text) text.style.opacity = '1';\n  };\n};\n\nconst createEventHandlers = (\n  composite: ElementModel<HTMLElement>,\n  overlay: ReturnType<typeof animations.brand.chevronFlow>,\n) => {\n  const eventResize = () => {\n    if (composite.element.offsetHeight > window.innerHeight) {\n      composite.element.style.height = `${window.innerHeight * 0.9}px`;\n    }\n  };\n\n  const eventLoad = () => {\n    overlay.events.load();\n    eventResize();\n  };\n\n  window.addEventListener('resize', debounce(eventResize, 20));\n\n  return { load: eventLoad };\n};\n\nexport default (props: HeroVideoArrowProps) => {\n  const { video, isAnimationOnLoad } = props;\n\n  const videoElement = createVideo(video);\n  const textContainer = createTextContainer(props);\n\n  const composite = new ElementBuilder('section')\n    .withClassName('umd-element-hero-brand-video')\n    .withStyles({\n      element: {\n        aspectRatio: '16 / 9',\n        width: '100%',\n      },\n    })\n    .build();\n\n  const wrapper = new ElementBuilder()\n    .withClassName('hero-logo-brand-video-wrapper')\n    .withChild(videoElement)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        position: 'relative',\n        overflow: 'hidden',\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      },\n    });\n\n  if (textContainer) {\n    wrapper.withChild(textContainer);\n  }\n\n  const wrapperBuilt = wrapper.build();\n\n  const overlay = animations.brand.chevronFlow({\n    sizedContainer: composite.element,\n    sizedWrapper: wrapperBuilt.element,\n    completedCallback: createAnimationSequence(composite.element),\n    isAnimationOnLoad,\n  });\n\n  wrapperBuilt.element.appendChild(overlay.element);\n  wrapperBuilt.styles += overlay.styles;\n\n  composite.element.appendChild(wrapperBuilt.element);\n  composite.styles += wrapperBuilt.styles;\n\n  const events = createEventHandlers(composite, overlay);\n\n  return {\n    ...composite,\n    events,\n  };\n};\n"],"names":["ElementBuilder","typography","token","elementStyles","assets.video.observedAutoPlay","debounce","animations.brand.chevronFlow"],"mappings":"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"}

package/dist/composite/hero/custom/video-arrow.mjs

@@ -1,8 +1,10 @@
-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 typography from "@universityofmaryland/web-styles-library/typography";
 import * as elementStyles from "@universityofmaryland/web-styles-library/element";
 import { debounce } from "@universityofmaryland/web-utilities-library/performance";
-import { create } from "../../../model/elements/index.mjs";
+import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-styles-library/animation";
 import "@universityofmaryland/web-utilities-library/media";
 import "@universityofmaryland/web-utilities-library/dom";
 import "@universityofmaryland/web-icons-library/controls";
@@ -14,17 +16,17 @@ import "../../../atomic/animations/actions/indicator.mjs";
 import chevronFlow from "../../../atomic/animations/brand/chevron-flow.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../../atomic/animations/brand/card-stack.mjs";
+import "@universityofmaryland/web-styles-library";
 import observedAutoPlay from "../../../atomic/assets/video/observed-auto-play.mjs";
 import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";
+import "@universityofmaryland/web-utilities-library/theme";
 import "../../../atomic/layout/block/stacked.mjs";
 import "../../../atomic/layout/overlay/modal.mjs";
 import "../../../atomic/layout/person/columns.mjs";
 import "@universityofmaryland/web-icons-library/social";
 import "../../../atomic/text-lockup/date.mjs";
 import "../../../atomic/text-lockup/small.mjs";
-import { campaignExtraLarge } from "../../../model/elements/headline.mjs";
-import { simpleLargest } from "../../../model/elements/rich-text.mjs";
 const OVERLAY_CLASS = "hero-logo-brand-text-overlay";
 const ANIMATION_CONFIG = {
   TEXT_FADE: {
@@ -40,40 +42,38 @@ const ANIMATION_CONFIG = {
 };
 const createHeadline = (headline) => {
   if (!headline) return null;
-  return campaignExtraLarge({
-    element: headline,
-    elementStyles: {
-      element: {
-        textTransform: "uppercase",
-        opacity: 0,
-        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,
-        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.HEADLINE_DELAY,
-        textWrap: "balance"
-      },
-      siblingAfter: {
-        marginTop: token.spacing.md
-      }
+  return new ElementBuilder(headline).styled(typography.campaign.extralarge).withStyles({
+    element: {
+      textTransform: "uppercase",
+      opacity: 0,
+      transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,
+      transitionDelay: ANIMATION_CONFIG.TEXT_FADE.HEADLINE_DELAY,
+      textWrap: "balance",
+      color: token.color.white
+    },
+    siblingAfter: {
+      marginTop: token.spacing.md
     }
-  });
+  }).build();
 };
 const createText = (text) => {
   if (!text) return null;
-  return simpleLargest({
-    element: text,
-    elementStyles: {
-      element: {
-        maxWidth: "720px",
-        marginLeft: "auto",
-        marginRight: "auto",
-        opacity: 0,
-        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,
-        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.TEXT_DELAY,
-        [`@media (max-width: 649px)`]: {
-          display: "none"
-        }
+  return new ElementBuilder(text).styled(elementStyles.text.rich.simpleLargest).withStyles({
+    element: {
+      maxWidth: "720px",
+      marginLeft: "auto",
+      marginRight: "auto",
+      opacity: 0,
+      transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,
+      transitionDelay: ANIMATION_CONFIG.TEXT_FADE.TEXT_DELAY,
+      ["& p"]: {
+        color: token.color.white
+      },
+      [`@media (max-width: 649px)`]: {
+        display: "none"
       }
     }
-  });
+  }).build();
 };
 const createTextChildren = (props) => {
   const { headline, text } = props;
@@ -91,41 +91,28 @@ const createTextChildren = (props) => {
 const createTextContainer = (props) => {
   const children = createTextChildren(props);
   if (children.length === 0) return null;
-  const container = create({
-    element: document.createElement("div"),
-    className: "hero-logo-brand-text-container",
-    children,
-    elementStyles: {
-      element: {
-        zIndex: 99,
-        textAlign: "center",
-        width: `calc(100% - 24px)`,
-        maxWidth: "950px",
-        padding: `${token.spacing.xl} ${token.spacing.md}`,
-        ["& *"]: {
-          color: token.color.white
-        }
-      }
+  const container = new ElementBuilder().withClassName("hero-logo-brand-text-container").withChildren(...children).withStyles({
+    element: {
+      zIndex: 99,
+      textAlign: "center",
+      width: `calc(100% - 24px)`,
+      maxWidth: "950px",
+      padding: `${token.spacing.xl} ${token.spacing.md}`
     }
-  });
-  return create({
-    element: document.createElement("div"),
-    className: OVERLAY_CLASS,
-    children: [container],
-    elementStyles: {
-      element: {
-        height: "100%",
-        width: "100%",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        backgroundColor: "rgba(0, 0, 0, 0.6)",
-        zIndex: 98,
-        opacity: 0,
-        transition: `opacity ${ANIMATION_CONFIG.OVERLAY_FADE.DURATION} ${ANIMATION_CONFIG.OVERLAY_FADE.EASING}`
-      }
+  }).build();
+  return new ElementBuilder().withClassName(OVERLAY_CLASS).withChild(container).withStyles({
+    element: {
+      height: "100%",
+      width: "100%",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: "rgba(0, 0, 0, 0.6)",
+      zIndex: 98,
+      opacity: 0,
+      transition: `opacity ${ANIMATION_CONFIG.OVERLAY_FADE.DURATION} ${ANIMATION_CONFIG.OVERLAY_FADE.EASING}`
     }
-  });
+  }).build();
 };
 const createVideo = (video) => {
   return observedAutoPlay({
@@ -171,49 +158,40 @@ const createEventHandlers = (composite, overlay) => {
 };
 const videoArrow = (props) => {
   const { video, isAnimationOnLoad } = props;
-  const composite = create({
-    element: document.createElement("section"),
-    className: "umd-element-hero-brand-video",
-    elementStyles: {
-      element: {
-        aspectRatio: "16 / 9",
-        width: "100%"
-      }
-    }
-  });
   const videoElement = createVideo(video);
   const textContainer = createTextContainer(props);
-  const wrapperChildren = [videoElement];
-  if (textContainer) {
-    wrapperChildren.push(textContainer);
-  }
-  const wrapper = create({
-    element: document.createElement("div"),
-    className: "hero-logo-brand-video-wrapper",
-    children: wrapperChildren,
-    elementStyles: {
-      element: {
-        containerType: "inline-size",
-        position: "relative",
-        overflow: "hidden",
-        height: "100%",
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      }
+  const composite = new ElementBuilder("section").withClassName("umd-element-hero-brand-video").withStyles({
+    element: {
+      aspectRatio: "16 / 9",
+      width: "100%"
+    }
+  }).build();
+  const wrapper = new ElementBuilder().withClassName("hero-logo-brand-video-wrapper").withChild(videoElement).withStyles({
+    element: {
+      containerType: "inline-size",
+      position: "relative",
+      overflow: "hidden",
+      height: "100%",
+      width: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
     }
   });
+  if (textContainer) {
+    wrapper.withChild(textContainer);
+  }
+  const wrapperBuilt = wrapper.build();
   const overlay = chevronFlow({
     sizedContainer: composite.element,
-    sizedWrapper: wrapper.element,
+    sizedWrapper: wrapperBuilt.element,
     completedCallback: createAnimationSequence(composite.element),
     isAnimationOnLoad
   });
-  wrapper.element.appendChild(overlay.element);
-  wrapper.styles += overlay.styles;
-  composite.element.appendChild(wrapper.element);
-  composite.styles += wrapper.styles;
+  wrapperBuilt.element.appendChild(overlay.element);
+  wrapperBuilt.styles += overlay.styles;
+  composite.element.appendChild(wrapperBuilt.element);
+  composite.styles += wrapperBuilt.styles;
   const events = createEventHandlers(composite, overlay);
   return {
     ...composite,

package/dist/composite/hero/custom/video-arrow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"video-arrow.mjs","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { ElementModel } from 'model';\nimport { animations, assets } from 'atomic';\nimport { type HeroVideoArrowProps as BaseHeroVideoArrowProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\ninterface HeroVideoArrowProps extends Omit<BaseHeroVideoArrowProps, 'video'> {\n  video: HTMLVideoElement;\n  isAnimationOnLoad?: boolean;\n}\n\nconst OVERLAY_CLASS = 'hero-logo-brand-text-overlay';\n\nconst ANIMATION_CONFIG = {\n  TEXT_FADE: {\n    DURATION: '1000ms',\n    EASING: 'ease-in-out',\n    HEADLINE_DELAY: '600ms',\n    TEXT_DELAY: '1500ms',\n  },\n  OVERLAY_FADE: {\n    DURATION: '1500ms',\n    EASING: 'ease-in-out',\n  },\n} as const;\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  if (!headline) return null;\n\n  return ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.HEADLINE_DELAY,\n        textWrap: 'balance',\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    },\n  });\n};\n\nconst createText = (text?: HTMLElement | null) => {\n  if (!text) return null;\n\n  return ElementModel.richText.simpleLargest({\n    element: text,\n    elementStyles: {\n      element: {\n        maxWidth: '720px',\n        marginLeft: 'auto',\n        marginRight: 'auto',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.TEXT_DELAY,\n\n        [`@media (max-width: 649px)`]: {\n          display: 'none',\n        },\n      },\n    },\n  });\n};\n\nconst createTextChildren = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n): ElementVisual[] => {\n  const { headline, text } = props;\n  const children: ElementVisual[] = [];\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  const textElement = createText(text);\n  if (textElement) {\n    children.push(textElement);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n) => {\n  const children = createTextChildren(props);\n\n  if (children.length === 0) return null;\n\n  const container = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-text-container',\n    children,\n    elementStyles: {\n      element: {\n        zIndex: 99,\n        textAlign: 'center',\n        width: `calc(100% - 24px)`,\n        maxWidth: '950px',\n        padding: `${token.spacing.xl} ${token.spacing.md}`,\n\n        ['& *']: {\n          color: token.color.white,\n        },\n      },\n    },\n  });\n\n  return ElementModel.create({\n    element: document.createElement('div'),\n    className: OVERLAY_CLASS,\n    children: [container],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        backgroundColor: 'rgba(0, 0, 0, 0.6)',\n        zIndex: 98,\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.OVERLAY_FADE.DURATION} ${ANIMATION_CONFIG.OVERLAY_FADE.EASING}`,\n      },\n    },\n  });\n};\n\nconst createVideo = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n    additionalElementStyles: {\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n    },\n  });\n};\n\nconst createAnimationSequence = (container: HTMLElement) => {\n  return () => {\n    const overlay = container.querySelector(\n      `.${OVERLAY_CLASS}`,\n    ) as HTMLDivElement;\n    const headline = container.querySelector(\n      `.${typography.campaign.fonts.extraLarge.className}`,\n    ) as HTMLDivElement;\n    const text = container.querySelector(\n      `.${elementStyles.text.rich.simpleLargest.className}`,\n    ) as HTMLDivElement;\n\n    if (overlay) overlay.style.opacity = '1';\n    if (headline) headline.style.opacity = '1';\n    if (text) text.style.opacity = '1';\n  };\n};\n\nconst createEventHandlers = (\n  composite: ElementVisual,\n  overlay: ReturnType<typeof animations.brand.chevronFlow>,\n) => {\n  const eventResize = () => {\n    if (composite.element.offsetHeight > window.innerHeight) {\n      composite.element.style.height = `${window.innerHeight * 0.9}px`;\n    }\n  };\n\n  const eventLoad = () => {\n    overlay.events.load();\n    eventResize();\n  };\n\n  window.addEventListener('resize', debounce(eventResize, 20));\n\n  return { load: eventLoad };\n};\n\nexport default (props: HeroVideoArrowProps) => {\n  const { video, isAnimationOnLoad } = props;\n\n  const composite = ElementModel.create({\n    element: document.createElement('section'),\n    className: 'umd-element-hero-brand-video',\n    elementStyles: {\n      element: {\n        aspectRatio: '16 / 9',\n        width: '100%',\n      },\n    },\n  });\n\n  const videoElement = createVideo(video);\n  const textContainer = createTextContainer(props);\n\n  const wrapperChildren: ElementVisual[] = [videoElement];\n  if (textContainer) {\n    wrapperChildren.push(textContainer);\n  }\n\n  const wrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-video-wrapper',\n    children: wrapperChildren,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        position: 'relative',\n        overflow: 'hidden',\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      },\n    },\n  });\n\n  const overlay = animations.brand.chevronFlow({\n    sizedContainer: composite.element,\n    sizedWrapper: wrapper.element,\n    completedCallback: createAnimationSequence(composite.element),\n    isAnimationOnLoad,\n  });\n\n  wrapper.element.appendChild(overlay.element);\n  wrapper.styles += overlay.styles;\n\n  composite.element.appendChild(wrapper.element);\n  composite.styles += wrapper.styles;\n\n  const events = createEventHandlers(composite, overlay);\n\n  return {\n    ...composite,\n    events,\n  };\n};\n"],"names":["ElementModel.headline.campaignExtraLarge","ElementModel.richText.simpleLargest","ElementModel.create","assets.video.observedAutoPlay","animations.brand.chevronFlow"],"mappings":"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"}
+{"version":3,"file":"video-arrow.mjs","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { animations, assets } from 'atomic';\nimport { type HeroVideoArrowProps as BaseHeroVideoArrowProps } from '../_types';\nimport { type ElementModel } from '../../../_types';\n\ninterface HeroVideoArrowProps extends Omit<BaseHeroVideoArrowProps, 'video'> {\n  video: HTMLVideoElement;\n  isAnimationOnLoad?: boolean;\n}\n\nconst OVERLAY_CLASS = 'hero-logo-brand-text-overlay';\n\nconst ANIMATION_CONFIG = {\n  TEXT_FADE: {\n    DURATION: '1000ms',\n    EASING: 'ease-in-out',\n    HEADLINE_DELAY: '600ms',\n    TEXT_DELAY: '1500ms',\n  },\n  OVERLAY_FADE: {\n    DURATION: '1500ms',\n    EASING: 'ease-in-out',\n  },\n} as const;\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(typography.campaign.extralarge)\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.HEADLINE_DELAY,\n        textWrap: 'balance',\n        color: token.color.white,\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .build();\n};\n\nconst createText = (text?: HTMLElement | null) => {\n  if (!text) return null;\n\n  return new ElementBuilder(text)\n    .styled(elementStyles.text.rich.simpleLargest)\n    .withStyles({\n      element: {\n        maxWidth: '720px',\n        marginLeft: 'auto',\n        marginRight: 'auto',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.TEXT_DELAY,\n\n        ['& p']: {\n          color: token.color.white,\n        },\n\n        [`@media (max-width: 649px)`]: {\n          display: 'none',\n        },\n      },\n    })\n    .build();\n};\n\nconst createTextChildren = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n): ElementModel<HTMLElement>[] => {\n  const { headline, text } = props;\n  const children: ElementModel<HTMLElement>[] = [];\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  const textElement = createText(text);\n  if (textElement) {\n    children.push(textElement);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n) => {\n  const children = createTextChildren(props);\n\n  if (children.length === 0) return null;\n\n  const container = new ElementBuilder()\n    .withClassName('hero-logo-brand-text-container')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        zIndex: 99,\n        textAlign: 'center',\n        width: `calc(100% - 24px)`,\n        maxWidth: '950px',\n        padding: `${token.spacing.xl} ${token.spacing.md}`,\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName(OVERLAY_CLASS)\n    .withChild(container)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        backgroundColor: 'rgba(0, 0, 0, 0.6)',\n        zIndex: 98,\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.OVERLAY_FADE.DURATION} ${ANIMATION_CONFIG.OVERLAY_FADE.EASING}`,\n      },\n    })\n    .build();\n};\n\nconst createVideo = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n    additionalElementStyles: {\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n    },\n  });\n};\n\nconst createAnimationSequence = (container: HTMLElement) => {\n  return () => {\n    const overlay = container.querySelector(\n      `.${OVERLAY_CLASS}`,\n    ) as HTMLDivElement;\n    const headline = container.querySelector(\n      `.${typography.campaign.fonts.extraLarge.className}`,\n    ) as HTMLDivElement;\n    const text = container.querySelector(\n      `.${elementStyles.text.rich.simpleLargest.className}`,\n    ) as HTMLDivElement;\n\n    if (overlay) overlay.style.opacity = '1';\n    if (headline) headline.style.opacity = '1';\n    if (text) text.style.opacity = '1';\n  };\n};\n\nconst createEventHandlers = (\n  composite: ElementModel<HTMLElement>,\n  overlay: ReturnType<typeof animations.brand.chevronFlow>,\n) => {\n  const eventResize = () => {\n    if (composite.element.offsetHeight > window.innerHeight) {\n      composite.element.style.height = `${window.innerHeight * 0.9}px`;\n    }\n  };\n\n  const eventLoad = () => {\n    overlay.events.load();\n    eventResize();\n  };\n\n  window.addEventListener('resize', debounce(eventResize, 20));\n\n  return { load: eventLoad };\n};\n\nexport default (props: HeroVideoArrowProps) => {\n  const { video, isAnimationOnLoad } = props;\n\n  const videoElement = createVideo(video);\n  const textContainer = createTextContainer(props);\n\n  const composite = new ElementBuilder('section')\n    .withClassName('umd-element-hero-brand-video')\n    .withStyles({\n      element: {\n        aspectRatio: '16 / 9',\n        width: '100%',\n      },\n    })\n    .build();\n\n  const wrapper = new ElementBuilder()\n    .withClassName('hero-logo-brand-video-wrapper')\n    .withChild(videoElement)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        position: 'relative',\n        overflow: 'hidden',\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      },\n    });\n\n  if (textContainer) {\n    wrapper.withChild(textContainer);\n  }\n\n  const wrapperBuilt = wrapper.build();\n\n  const overlay = animations.brand.chevronFlow({\n    sizedContainer: composite.element,\n    sizedWrapper: wrapperBuilt.element,\n    completedCallback: createAnimationSequence(composite.element),\n    isAnimationOnLoad,\n  });\n\n  wrapperBuilt.element.appendChild(overlay.element);\n  wrapperBuilt.styles += overlay.styles;\n\n  composite.element.appendChild(wrapperBuilt.element);\n  composite.styles += wrapperBuilt.styles;\n\n  const events = createEventHandlers(composite, overlay);\n\n  return {\n    ...composite,\n    events,\n  };\n};\n"],"names":["assets.video.observedAutoPlay","animations.brand.chevronFlow"],"mappings":"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"}

package/dist/composite/hero/logo.d.ts

@@ -1,8 +1,4 @@
 import { HeroLogoProps } from './_types';
-declare const _default: (props: HeroLogoProps) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: (props: HeroLogoProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=logo.d.ts.map

package/dist/composite/hero/logo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logo.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/logo.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;yBAyH9B,OAAO,aAAa;;;;;AAApC,wBA8BE"}
+{"version":3,"file":"logo.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/logo.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;yBA2H9B,OAAO,aAAa;AAApC,wBA8BE"}