@universityofmaryland/web-elements-library 1.3.6 → 1.4.0

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

@@ -0,0 +1,234 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const index$1 = require("../../../utilities/performance/index.js");
+require("../../../node_modules/postcss/lib/postcss.js");
+require("../../../node_modules/postcss-nesting/dist/index.js");
+require("../../../node_modules/postcss-js/index.js");
+const index = require("../../../model/elements/index.js");
+require("../../../atomic/animations/actions/indicator.js");
+const chevronFlow = require("../../../atomic/animations/brand/chevron-flow.js");
+require("../../../atomic/animations/brand/chevron-scroll.js");
+const observedAutoPlay = require("../../../atomic/assets/video/observed-auto-play.js");
+require("../../../atomic/layout/block/stacked.js");
+require("../../../atomic/layout/overlay/modal.js");
+require("../../../atomic/layout/person/columns.js");
+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) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const OVERLAY_CLASS = "hero-logo-brand-text-overlay";
+const ANIMATION_CONFIG = {
+  TEXT_FADE: {
+    DURATION: "1000ms",
+    EASING: "ease-in-out",
+    HEADLINE_DELAY: "600ms",
+    TEXT_DELAY: "1500ms"
+  },
+  OVERLAY_FADE: {
+    DURATION: "1500ms",
+    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: Styles__namespace.token.spacing.md
+      }
+    }
+  });
+};
+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"
+        }
+      }
+    }
+  });
+};
+const createTextChildren = (props) => {
+  const { headline: headline2, text } = props;
+  const children = [];
+  const headlineElement = createHeadline(headline2);
+  if (headlineElement) {
+    children.push(headlineElement);
+  }
+  const textElement = createText(text);
+  if (textElement) {
+    children.push(textElement);
+  }
+  return children;
+};
+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: `${Styles__namespace.token.spacing.xl} ${Styles__namespace.token.spacing.md}`,
+        ["& *"]: {
+          color: Styles__namespace.token.color.white
+        }
+      }
+    }
+  });
+  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}`
+      }
+    }
+  });
+};
+const createVideo = (video) => {
+  return observedAutoPlay({
+    video,
+    additionalElementStyles: {
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      top: 0,
+      left: 0
+    }
+  });
+};
+const createAnimationSequence = (container) => {
+  return () => {
+    const overlay = container.querySelector(
+      `.${OVERLAY_CLASS}`
+    );
+    const headline2 = container.querySelector(
+      `.${Styles__namespace.typography.campaign.fonts.extraLarge.className}`
+    );
+    const text = container.querySelector(
+      `.${Styles__namespace.element.text.rich.simpleLargest.className}`
+    );
+    if (overlay) overlay.style.opacity = "1";
+    if (headline2) headline2.style.opacity = "1";
+    if (text) text.style.opacity = "1";
+  };
+};
+const createEventHandlers = (composite, overlay) => {
+  const eventResize = () => {
+    if (composite.element.offsetHeight > window.innerHeight) {
+      composite.element.style.height = `${window.innerHeight * 0.9}px`;
+    }
+  };
+  const eventLoad = () => {
+    overlay.events.load();
+    eventResize();
+  };
+  window.addEventListener(
+    "resize",
+    index$1.debounce(eventResize, 20)
+  );
+  return { load: eventLoad };
+};
+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 overlay = chevronFlow({
+    sizedContainer: composite.element,
+    sizedWrapper: wrapper.element,
+    completedCallback: createAnimationSequence(composite.element),
+    isAnimationOnLoad
+  });
+  wrapper.element.appendChild(overlay.element);
+  wrapper.styles += overlay.styles;
+  composite.element.appendChild(wrapper.element);
+  composite.styles += wrapper.styles;
+  const events = createEventHandlers(composite, overlay);
+  return {
+    ...composite,
+    events
+  };
+};
+module.exports = videoArrow;
+//# sourceMappingURL=video-arrow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"video-arrow.js","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport { animations, assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type HeroVideoArrowProps as BaseHeroVideoArrowProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\n// Extend base type to add animation property and ensure video is required\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: Styles.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: `${Styles.token.spacing.xl} ${Styles.token.spacing.md}`,\n\n        ['& *']: {\n          color: Styles.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    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      `.${Styles.typography.campaign.fonts.extraLarge.className}`,\n    ) as HTMLDivElement;\n    const text = container.querySelector(\n      `.${Styles.element.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(\n    'resize',\n    Utils.performance.debounce(eventResize, 20),\n  );\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","Styles","ElementModel.richText.simpleLargest","ElementModel.create","assets.video.observedAutoPlay","Utils.performance.debounce","animations.brand.chevronFlow"],"mappings":"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"}

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

@@ -0,0 +1,218 @@
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { debounce } from "../../../utilities/performance/index.mjs";
+import "../../../node_modules/postcss/lib/postcss.mjs";
+import "../../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../../node_modules/postcss-js/index.mjs";
+import { create } from "../../../model/elements/index.mjs";
+import "../../../atomic/animations/actions/indicator.mjs";
+import chevronFlow from "../../../atomic/animations/brand/chevron-flow.mjs";
+import "../../../atomic/animations/brand/chevron-scroll.mjs";
+import observedAutoPlay from "../../../atomic/assets/video/observed-auto-play.mjs";
+import "../../../atomic/layout/block/stacked.mjs";
+import "../../../atomic/layout/overlay/modal.mjs";
+import "../../../atomic/layout/person/columns.mjs";
+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: {
+    DURATION: "1000ms",
+    EASING: "ease-in-out",
+    HEADLINE_DELAY: "600ms",
+    TEXT_DELAY: "1500ms"
+  },
+  OVERLAY_FADE: {
+    DURATION: "1500ms",
+    EASING: "ease-in-out"
+  }
+};
+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: Styles.token.spacing.md
+      }
+    }
+  });
+};
+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"
+        }
+      }
+    }
+  });
+};
+const createTextChildren = (props) => {
+  const { headline, text } = props;
+  const children = [];
+  const headlineElement = createHeadline(headline);
+  if (headlineElement) {
+    children.push(headlineElement);
+  }
+  const textElement = createText(text);
+  if (textElement) {
+    children.push(textElement);
+  }
+  return children;
+};
+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: `${Styles.token.spacing.xl} ${Styles.token.spacing.md}`,
+        ["& *"]: {
+          color: Styles.token.color.white
+        }
+      }
+    }
+  });
+  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}`
+      }
+    }
+  });
+};
+const createVideo = (video) => {
+  return observedAutoPlay({
+    video,
+    additionalElementStyles: {
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      top: 0,
+      left: 0
+    }
+  });
+};
+const createAnimationSequence = (container) => {
+  return () => {
+    const overlay = container.querySelector(
+      `.${OVERLAY_CLASS}`
+    );
+    const headline = container.querySelector(
+      `.${Styles.typography.campaign.fonts.extraLarge.className}`
+    );
+    const text = container.querySelector(
+      `.${Styles.element.text.rich.simpleLargest.className}`
+    );
+    if (overlay) overlay.style.opacity = "1";
+    if (headline) headline.style.opacity = "1";
+    if (text) text.style.opacity = "1";
+  };
+};
+const createEventHandlers = (composite, overlay) => {
+  const eventResize = () => {
+    if (composite.element.offsetHeight > window.innerHeight) {
+      composite.element.style.height = `${window.innerHeight * 0.9}px`;
+    }
+  };
+  const eventLoad = () => {
+    overlay.events.load();
+    eventResize();
+  };
+  window.addEventListener(
+    "resize",
+    debounce(eventResize, 20)
+  );
+  return { load: eventLoad };
+};
+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 overlay = chevronFlow({
+    sizedContainer: composite.element,
+    sizedWrapper: wrapper.element,
+    completedCallback: createAnimationSequence(composite.element),
+    isAnimationOnLoad
+  });
+  wrapper.element.appendChild(overlay.element);
+  wrapper.styles += overlay.styles;
+  composite.element.appendChild(wrapper.element);
+  composite.styles += wrapper.styles;
+  const events = createEventHandlers(composite, overlay);
+  return {
+    ...composite,
+    events
+  };
+};
+export {
+  videoArrow as default
+};
+//# sourceMappingURL=video-arrow.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"video-arrow.mjs","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport { animations, assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type HeroVideoArrowProps as BaseHeroVideoArrowProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\n// Extend base type to add animation property and ensure video is required\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: Styles.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: `${Styles.token.spacing.xl} ${Styles.token.spacing.md}`,\n\n        ['& *']: {\n          color: Styles.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    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      `.${Styles.typography.campaign.fonts.extraLarge.className}`,\n    ) as HTMLDivElement;\n    const text = container.querySelector(\n      `.${Styles.element.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(\n    'resize',\n    Utils.performance.debounce(eventResize, 20),\n  );\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","Utils.performance.debounce","animations.brand.chevronFlow"],"mappings":"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"}

package/dist/composite/hero/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./custom/index.js");
+const logo = require("./logo.js");
+const minimal = require("./minimal.js");
+const overlay = require("./overlay.js");
+const stacked = require("./stacked.js");
+const standard = require("./standard.js");
+exports.custom = index;
+exports.logo = logo;
+exports.minimal = minimal;
+exports.overlay = overlay;
+exports.stacked = stacked;
+exports.standard = standard;
+//# sourceMappingURL=index.js.map

package/dist/composite/hero/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/composite/hero/index.mjs

@@ -0,0 +1,15 @@
+import * as index from "./custom/index.mjs";
+import { default as default2 } from "./logo.mjs";
+import { default as default3 } from "./minimal.mjs";
+import { default as default4 } from "./overlay.mjs";
+import { default as default5 } from "./stacked.mjs";
+import { default as default6 } from "./standard.mjs";
+export {
+  index as custom,
+  default2 as logo,
+  default3 as minimal,
+  default4 as overlay,
+  default5 as stacked,
+  default6 as standard
+};
+//# sourceMappingURL=index.mjs.map

package/dist/composite/hero/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

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

@@ -1,4 +1,4 @@
-import { type HeroLogoProps } from './_types';
+import { HeroLogoProps } from './_types';
 declare const _default: (props: HeroLogoProps) => {
     element: HTMLElement;
     className: string;

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":"AAGA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;gCAiHvB,aAAa;;;;;AAApC,wBA6CE"}
+{"version":3,"file":"logo.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/logo.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;yBAyH9B,OAAO,aAAa;;;;;AAApC,wBA8BE"}