@universityofmaryland/web-elements-library 1.4.6 → 1.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +1 -1
  2. package/dist/composite/hero/custom/video-arrow.d.ts.map +1 -1
  3. package/dist/composite/hero/custom/video-arrow.js +1 -0
  4. package/dist/composite/hero/custom/video-arrow.js.map +1 -1
  5. package/dist/composite/hero/custom/video-arrow.mjs +1 -0
  6. package/dist/composite/hero/custom/video-arrow.mjs.map +1 -1
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # University of Maryland Web Elements Library
2
2
 
3
- [![Elements Version](https://img.shields.io/badge/Elements-v1.4.6-blue)](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
3
+ [![Elements Version](https://img.shields.io/badge/Elements-v1.4.7-blue)](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
4
4
 
5
5
  Foundational UI building blocks for the UMD Design System, providing atomic elements that combine to create complex, accessible, and brand-compliant University of Maryland digital experiences.
6
6
 
package/dist/composite/hero/custom/video-arrow.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"video-arrow.d.ts","sourceRoot":"","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,mBAAmB,IAAI,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAIhF,UAAU,mBAAoB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,OAAO,CAAC;IAC1E,KAAK,EAAE,gBAAgB,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;yBAkLe,OAAO,mBAAmB;;;;;;;;AAA1C,wBA2DE"}
1
+ {"version":3,"file":"video-arrow.d.ts","sourceRoot":"","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,mBAAmB,IAAI,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAIhF,UAAU,mBAAoB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,OAAO,CAAC;IAC1E,KAAK,EAAE,gBAAgB,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;yBAmLe,OAAO,mBAAmB;;;;;;;;AAA1C,wBA2DE"}
package/dist/composite/hero/custom/video-arrow.js CHANGED
@@ -139,6 +139,7 @@ const createTextContainer = (props) => {
139
139
  const createVideo = (video) => {
140
140
  return observedAutoPlay({
141
141
  video,
142
+ isScaled: true,
142
143
  additionalElementStyles: {
143
144
  width: "100%",
144
145
  height: "100%",
package/dist/composite/hero/custom/video-arrow.js.map CHANGED
@@ -1 +1 @@
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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"}
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 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 `.${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 CHANGED
@@ -121,6 +121,7 @@ const createTextContainer = (props) => {
121
121
  const createVideo = (video) => {
122
122
  return observedAutoPlay({
123
123
  video,
124
+ isScaled: true,
124
125
  additionalElementStyles: {
125
126
  width: "100%",
126
127
  height: "100%",
package/dist/composite/hero/custom/video-arrow.mjs.map CHANGED
@@ -1 +1 @@
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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"}
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 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 `.${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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@universityofmaryland/web-elements-library",
3
- "version": "1.4.6",
3
+ "version": "1.4.7",
4
4
  "description": "UMD Web Elements",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",