@universityofmaryland/web-elements-library 1.4.6 → 1.4.8

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 (12) hide show
  1. package/README.md +1 -1
  2. package/dist/composite/hero/custom/grid.d.ts.map +1 -1
  3. package/dist/composite/hero/custom/grid.js +12 -9
  4. package/dist/composite/hero/custom/grid.js.map +1 -1
  5. package/dist/composite/hero/custom/grid.mjs +5 -2
  6. package/dist/composite/hero/custom/grid.mjs.map +1 -1
  7. package/dist/composite/hero/custom/video-arrow.d.ts.map +1 -1
  8. package/dist/composite/hero/custom/video-arrow.js +1 -0
  9. package/dist/composite/hero/custom/video-arrow.js.map +1 -1
  10. package/dist/composite/hero/custom/video-arrow.mjs +1 -0
  11. package/dist/composite/hero/custom/video-arrow.mjs.map +1 -1
  12. 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.8-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/grid.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../source/composite/hero/custom/grid.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,UAAU,WAAW;IACnB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChC,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,WAAW;IACnB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACjC;AAED,UAAU,aAAa;IACrB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC5B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;yBAgZe,OAAO,aAAa;;;;;AAApC,wBAyCE"}
1
+ {"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../source/composite/hero/custom/grid.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,UAAU,WAAW;IACnB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChC,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,WAAW;IACnB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACjC;AAED,UAAU,aAAa;IACrB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC5B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;yBAmZe,OAAO,aAAa;;;;;AAApC,wBAyCE"}
package/dist/composite/hero/custom/grid.js CHANGED
@@ -1,10 +1,11 @@
1
1
  "use strict";
2
2
  const Styles = require("@universityofmaryland/web-styles-library");
3
+ const index = require("../../../utilities/accessibility/index.js");
3
4
  require("../../../node_modules/postcss/lib/postcss.js");
4
5
  require("../../../node_modules/postcss-nesting/dist/index.js");
5
6
  require("../../../node_modules/postcss-js/index.js");
6
7
  const media = require("../../../utilities/theme/media.js");
7
- const index = require("../../../model/elements/index.js");
8
+ const index$1 = require("../../../model/elements/index.js");
8
9
  require("../../../atomic/animations/actions/indicator.js");
9
10
  require("../../../atomic/animations/brand/chevron-scroll.js");
10
11
  require("../../../atomic/animations/brand/card-stack.js");
@@ -35,6 +36,9 @@ function _interopNamespaceDefault(e) {
35
36
  return Object.freeze(n);
36
37
  }
37
38
  const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
39
+ const isPreferReducedMotion = index.isPrefferdReducedMotion();
40
+ const isScrollTimelineSupported = () => "ScrollTimeline" in window || CSS.supports("animation-timeline", "scroll()");
41
+ const isDisplayWithoutAnimation = isPreferReducedMotion || !isScrollTimelineSupported();
38
42
  const ANIMATION_RANGES = {
39
43
  GRID_COLUMNS: { start: "110vh", end: "230vh" },
40
44
  GRID_ROWS: { start: "110vh", end: "230vh" },
@@ -126,7 +130,7 @@ const createVideoWrapper = (video) => observedAutoPlay({
126
130
  });
127
131
  const createCorner = ({ images, isCornerLeft }) => {
128
132
  const children = images.map((image) => createImageWrapper(image));
129
- return index.createDiv({
133
+ return index$1.createDiv({
130
134
  className: isCornerLeft ? "hero-grid-corner-left" : "hero-grid-corner-right",
131
135
  children,
132
136
  elementStyles: {
@@ -145,7 +149,7 @@ const createCorner = ({ images, isCornerLeft }) => {
145
149
  };
146
150
  const createCenter = ({ images, video }) => {
147
151
  const children = [
148
- index.create({
152
+ index$1.create({
149
153
  element: document.createElement("div"),
150
154
  className: "hero-grid-tint",
151
155
  elementStyles: {
@@ -185,7 +189,7 @@ const createCenter = ({ images, video }) => {
185
189
  children.push(createImageWrapper(image));
186
190
  });
187
191
  }
188
- return index.create({
192
+ return index$1.create({
189
193
  element: document.createElement("div"),
190
194
  className: "hero-grid-center",
191
195
  children,
@@ -234,14 +238,13 @@ const createHeadline = (props) => {
234
238
  const createTextContainer = (props) => {
235
239
  const { actions, headline: headline2, text, isThemeDark } = props;
236
240
  let shouldRenderBlackText = null;
237
- const allowsMotion = !window.matchMedia("(prefers-reduced-motion: reduce)").matches || !CSS.supports("animation-timeline", "view()");
238
- if (!allowsMotion && !isThemeDark) {
241
+ if (isDisplayWithoutAnimation && !isThemeDark) {
239
242
  shouldRenderBlackText = true;
240
243
  }
241
244
  if (!text && !actions && !headline2) {
242
245
  return null;
243
246
  }
244
- const textContainer = index.createDiv({
247
+ const textContainer = index$1.createDiv({
245
248
  className: "hero-expand-text-container",
246
249
  elementStyles: {
247
250
  element: {
@@ -347,7 +350,7 @@ const createGridLayout = (leftCorner, rightCorner, center) => {
347
350
  animationRangeEnd: ANIMATION_RANGES.GRID_COLUMNS.end
348
351
  })
349
352
  };
350
- return index.createDiv({
353
+ return index$1.createDiv({
351
354
  className: "hero-grid-layout",
352
355
  children: [
353
356
  createCorner(leftCorner),
@@ -370,7 +373,7 @@ const grid = (props) => {
370
373
  const text = createTextContainer(props);
371
374
  const grid2 = createGridLayout(leftCorner, rightCorner, center);
372
375
  const children = text ? [grid2, text] : [grid2];
373
- const composite = index.createDiv({
376
+ const composite = index$1.createDiv({
374
377
  className: "hero-grid-container",
375
378
  children,
376
379
  elementStyles: {
package/dist/composite/hero/custom/grid.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"grid.js","sources":["../../../../source/composite/hero/custom/grid.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { theme } from 'utilities';\nimport { type ContentElement } from '../../../_types';\n\ninterface CornerProps {\n images: Array<HTMLImageElement>;\n isCornerLeft: boolean;\n}\n\ninterface CenterProps {\n images: Array<HTMLImageElement>;\n video?: HTMLVideoElement | null;\n}\n\ninterface HeroGridProps {\n headline?: ContentElement;\n text?: ContentElement;\n actions?: ContentElement;\n corners: Array<CornerProps>;\n center: CenterProps | null;\n isThemeDark?: boolean;\n}\n\nconst ANIMATION_RANGES = {\n GRID_COLUMNS: { start: '110vh', end: '230vh' },\n GRID_ROWS: { start: '110vh', end: '230vh' },\n TINT_FADE: { start: '50vh', end: '140vh' },\n} as const;\n\nconst GRID_LAYOUT = {\n COLUMNS: {\n INITIAL: '20% 60% 20%',\n FINAL: '0 100% 0',\n DEFAULT: '25% 50% 25%',\n },\n ROWS: {\n INITIAL: '25vh 1fr 25vh',\n FINAL: '0 1fr 0',\n TRIPLE: '1fr 1fr 1fr',\n },\n} as const;\n\nconst keyFrameColumns = `\n @keyframes grid-columns {\n from {\n grid-template-columns: ${GRID_LAYOUT.COLUMNS.INITIAL};\n }\n to {\n grid-template-columns: ${GRID_LAYOUT.COLUMNS.FINAL};\n grid-gap: 0;\n }\n }\n`;\n\nconst keyFrameRows = `\n @keyframes grid-rows {\n from {\n grid-template-rows: ${GRID_LAYOUT.ROWS.INITIAL};\n }\n to {\n grid-template-rows: ${GRID_LAYOUT.ROWS.FINAL};\n grid-gap: 0;\n }\n }\n`;\n\nconst keyFrameTint = `\n @keyframes tint-fade {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n`;\n\nconst columnBase = {\n display: 'grid',\n gridAutoFlow: 'row dense',\n gridGap: `${Styles.token.spacing.min}`,\n width: '100%',\n height: '100vh',\n\n [`@media (${Styles.token.media.queries.tablet.min})`]: {\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@media (${Styles.token.media.queries.desktop.min})`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n },\n\n ['& > *']: {\n overflow: 'hidden',\n position: 'relative',\n },\n};\n\nconst createImageWrapper = (image: HTMLImageElement) =>\n assets.image.background({\n element: image,\n isScaled: true,\n isGifAllowed: true,\n isShowCaption: true,\n });\n\nconst createVideoWrapper = (video: HTMLVideoElement) =>\n assets.video.observedAutoPlay({\n video,\n isAutoplay: true,\n additionalElementStyles: {\n additionalElementStyles: {\n width: '100%',\n aspectRatio: '1 / 1',\n position: 'relative',\n overflow: 'hidden',\n\n [`& video`]: {\n height: '100%',\n width: '100%',\n objectFit: 'cover',\n },\n },\n },\n });\n\nconst createCorner = ({ images, isCornerLeft }: CornerProps) => {\n const children = images.map((image) => createImageWrapper(image));\n\n return ElementModel.createDiv({\n className: isCornerLeft\n ? 'hero-grid-corner-left'\n : 'hero-grid-corner-right',\n children,\n elementStyles: {\n element: {\n ...columnBase,\n gridTemplateRows: GRID_LAYOUT.ROWS.TRIPLE,\n },\n },\n attributes: [\n {\n role: 'region',\n 'aria-label': `${\n isCornerLeft ? 'Left' : 'Right'\n } decorative image grid`,\n },\n ],\n });\n};\n\nconst createCenter = ({ images, video }: CenterProps) => {\n const children = [\n ElementModel.create({\n element: document.createElement('div'),\n className: 'hero-grid-tint',\n elementStyles: {\n element: {\n width: '100%',\n height: '100%',\n position: 'absolute',\n top: 0,\n left: 0,\n backgroundColor: 'rgba(0, 0, 0, 0.5)',\n zIndex: 9,\n opacity: 0,\n ...theme.media.withViewTimelineAnimation({\n animation: 'tint-fade ease-in-out forwards',\n animationTimeline: 'view()',\n animationRangeStart: ANIMATION_RANGES.TINT_FADE.start,\n animationRangeEnd: ANIMATION_RANGES.TINT_FADE.end,\n }),\n },\n },\n attributes: [\n {\n role: 'region',\n 'aria-label': 'Main hero content',\n },\n ],\n }),\n ];\n\n if (video) {\n children.push(\n createImageWrapper(images[0]),\n createVideoWrapper(video),\n createImageWrapper(images[1]),\n );\n } else {\n images.forEach((image) => {\n children.push(createImageWrapper(image));\n });\n }\n\n return ElementModel.create({\n element: document.createElement('div'),\n className: 'hero-grid-center',\n children,\n elementStyles: {\n element: {\n ...columnBase,\n gridTemplateRows: GRID_LAYOUT.ROWS.INITIAL,\n ...theme.media.withViewTimelineAnimation({\n animation: 'grid-rows ease-in-out forwards',\n animationTimeline: 'view()',\n animationRangeStart: ANIMATION_RANGES.GRID_ROWS.start,\n animationRangeEnd: ANIMATION_RANGES.GRID_ROWS.end,\n }),\n },\n },\n });\n};\n\nconst createHeadline = (props: Pick<HeroGridProps, 'headline'>) => {\n const { headline } = props;\n const characterCount = headline?.textContent?.trim().length || 0;\n const isOverwriteHeadline = characterCount > 30;\n\n if (!headline) return null;\n\n const desktopStyles = {\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(isOverwriteHeadline && {\n fontSize: '80px',\n }),\n },\n };\n\n const headlineElement = ElementModel.headline.campaignExtraLarge({\n element: headline,\n elementStyles: {\n element: {\n textTransform: 'uppercase',\n textWrap: 'pretty',\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n isThemeDark: true,\n });\n\n return headlineElement;\n};\n\nconst createTextContainer = (\n props: Pick<HeroGridProps, 'headline' | 'text' | 'actions' | 'isThemeDark'>,\n) => {\n const { actions, headline, text, isThemeDark } = props;\n let shouldRenderBlackText = null;\n const allowsMotion =\n !window.matchMedia('(prefers-reduced-motion: reduce)').matches ||\n !CSS.supports('animation-timeline', 'view()');\n\n if (!allowsMotion && !isThemeDark) {\n shouldRenderBlackText = true;\n }\n\n if (!text && !actions && !headline) {\n return null;\n }\n\n const textContainer = ElementModel.createDiv({\n className: 'hero-expand-text-container',\n elementStyles: {\n element: {\n position: 'relative',\n height: '100%',\n zIndex: 9999,\n textAlign: 'center',\n padding: `${Styles.token.spacing.md} 0`,\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n padding: `${Styles.token.spacing['3xl']} 0`,\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n },\n\n [`@container (${Styles.token.media.queries.highDef.min})`]: {\n padding: `${Styles.token.spacing['6xl']} 0`,\n },\n\n ...theme.media.withViewTimelineAnimation({\n paddingTop: '140vh',\n }),\n\n ['*']: {\n ...(shouldRenderBlackText && {\n color: `${Styles.token.color.black} !important`,\n }),\n },\n },\n },\n });\n\n const lock = ElementModel.layout.spaceHorizontalSmallest({\n element: document.createElement('div'),\n elementStyles: {\n element: {\n height: '100%',\n width: '100%',\n position: 'relative',\n },\n },\n });\n\n const textLockupElement = textLockup.large({\n headlineComposite: createHeadline(props),\n textLargest: text,\n actions,\n isThemeDark: true,\n });\n\n lock.element.appendChild(textLockupElement.element);\n lock.styles += textLockupElement.styles;\n\n textContainer.element.appendChild(lock.element);\n textContainer.styles += lock.styles;\n\n return textContainer;\n};\n\nconst validateGridProps = (\n props: HeroGridProps,\n): {\n leftCorner: CornerProps;\n rightCorner: CornerProps;\n center: CenterProps;\n} | null => {\n const leftCorner = props.corners.find((c) => c.isCornerLeft);\n const rightCorner = props.corners.find((c) => !c.isCornerLeft);\n\n const errors = [];\n\n // Validate corners\n if (!leftCorner) {\n errors.push('Left corner is required for hero grid');\n } else if (!leftCorner.images || leftCorner.images.length === 0) {\n errors.push('Left corner must have at least one image');\n }\n\n if (!rightCorner) {\n errors.push('Right corner is required for hero grid');\n } else if (!rightCorner.images || rightCorner.images.length === 0) {\n errors.push('Right corner must have at least one image');\n }\n\n // Validate center\n if (!props.center) {\n errors.push('Center is required for hero grid');\n } else {\n if (!props.center.images || props.center.images.length === 0) {\n errors.push('Center must have at least one image');\n } else if (props.center.video && props.center.images.length < 2) {\n errors.push('Center must have at least 2 images when video is provided');\n }\n }\n\n if (errors.length > 0) {\n errors.forEach((error) => console.log('Hero Grid Error:', error));\n return null;\n }\n\n return {\n leftCorner: leftCorner as CornerProps,\n rightCorner: rightCorner as CornerProps,\n center: props.center as CenterProps,\n };\n};\n\nconst createGridLayout = (\n leftCorner: CornerProps,\n rightCorner: CornerProps,\n center: CenterProps,\n) => {\n const gridStyles = {\n gridTemplateColumns: GRID_LAYOUT.COLUMNS.DEFAULT,\n height: '100vh',\n width: '100%',\n display: 'grid',\n gridGap: `${Styles.token.spacing.min}`,\n\n [`@media (${Styles.token.media.queries.tablet.min})`]: {\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@media (${Styles.token.media.queries.desktop.min})`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n },\n\n ...theme.media.withViewTimelineAnimation({\n position: 'sticky',\n top: 0,\n animation: 'grid-columns ease-in-out forwards',\n animationTimeline: 'view()',\n animationRangeStart: ANIMATION_RANGES.GRID_COLUMNS.start,\n animationRangeEnd: ANIMATION_RANGES.GRID_COLUMNS.end,\n }),\n };\n\n return ElementModel.createDiv({\n className: 'hero-grid-layout',\n\n children: [\n createCorner(leftCorner),\n createCenter(center),\n createCorner(rightCorner),\n ],\n elementStyles: { element: gridStyles },\n attributes: [\n {\n role: 'region',\n 'aria-label': 'Hero grid layout',\n },\n ],\n });\n};\n\nexport default (props: HeroGridProps) => {\n const validated = validateGridProps(props);\n if (!validated) return null;\n\n const { leftCorner, rightCorner, center } = validated;\n const text = createTextContainer(props);\n const grid = createGridLayout(leftCorner, rightCorner, center);\n\n const children = text ? [grid, text] : [grid];\n\n const composite = ElementModel.createDiv({\n className: 'hero-grid-container',\n children,\n elementStyles: {\n element: {\n width: '100%',\n display: 'block',\n containerType: 'inline-size',\n ...theme.media.withViewTimelineAnimation({\n height: '300vh',\n }),\n ['img, video']: {\n objectFit: 'cover',\n width: '100%',\n height: '100%',\n },\n },\n },\n attributes: [\n {\n role: 'main',\n 'aria-label': 'Hero section',\n },\n ],\n });\n\n composite.styles += keyFrameColumns;\n composite.styles += keyFrameRows;\n composite.styles += keyFrameTint;\n\n return composite;\n};\n"],"names":["Styles","assets.image.background","assets.video.observedAutoPlay","ElementModel.createDiv","ElementModel.create","theme.media.withViewTimelineAnimation","headline","ElementModel.headline.campaignExtraLarge","ElementModel.layout.spaceHorizontalSmallest","textLockup.large","grid"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,mBAAmB;AAAA,EACvB,cAAc,EAAE,OAAO,SAAS,KAAK,QAAA;AAAA,EACrC,WAAW,EAAE,OAAO,SAAS,KAAK,QAAA;AAAA,EAClC,WAAW,EAAE,OAAO,QAAQ,KAAK,QAAA;AACnC;AAEA,MAAM,cAAc;AAAA,EAClB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAEZ;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA,+BAGO,YAAY,QAAQ,OAAO;AAAA;AAAA;AAAA,+BAG3B,YAAY,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAMxD,MAAM,eAAe;AAAA;AAAA;AAAA,4BAGO,YAAY,KAAK,OAAO;AAAA;AAAA;AAAA,4BAGxB,YAAY,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAMlD,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWrB,MAAM,aAAa;AAAA,EACjB,SAAS;AAAA,EACT,cAAc;AAAA,EACd,SAAS,GAAGA,kBAAO,MAAM,QAAQ,GAAG;AAAA,EACpC,OAAO;AAAA,EACP,QAAQ;AAAA,EAER,CAAC,WAAWA,kBAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,IACrD,SAAS,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,EAAA;AAAA,EAGrC,CAAC,WAAWA,kBAAO,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,IACtD,SAAS,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,EAAA;AAAA,EAGrC,CAAC,OAAO,GAAG;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,EAAA;AAEd;AAEA,MAAM,qBAAqB,CAAC,UAC1BC,WAAwB;AAAA,EACtB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AACjB,CAAC;AAEH,MAAM,qBAAqB,CAAC,UAC1BC,iBAA8B;AAAA,EAC5B;AAAA,EACA,YAAY;AAAA,EACZ,yBAAyB;AAAA,IACvB,yBAAyB;AAAA,MACvB,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,UAAU;AAAA,MAEV,CAAC,SAAS,GAAG;AAAA,QACX,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EACF;AAEJ,CAAC;AAEH,MAAM,eAAe,CAAC,EAAE,QAAQ,mBAAgC;AAC9D,QAAM,WAAW,OAAO,IAAI,CAAC,UAAU,mBAAmB,KAAK,CAAC;AAEhE,SAAOC,gBAAuB;AAAA,IAC5B,WAAW,eACP,0BACA;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAG;AAAA,QACH,kBAAkB,YAAY,KAAK;AAAA,MAAA;AAAA,IACrC;AAAA,IAEF,YAAY;AAAA,MACV;AAAA,QACE,MAAM;AAAA,QACN,cAAc,GACZ,eAAe,SAAS,OAC1B;AAAA,MAAA;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAM,eAAe,CAAC,EAAE,QAAQ,YAAyB;AACvD,QAAM,WAAW;AAAA,IACfC,aAAoB;AAAA,MAClB,SAAS,SAAS,cAAc,KAAK;AAAA,MACrC,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,iBAAiB;AAAA,UACjB,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,GAAGC,gCAAsC;AAAA,YACvC,WAAW;AAAA,YACX,mBAAmB;AAAA,YACnB,qBAAqB,iBAAiB,UAAU;AAAA,YAChD,mBAAmB,iBAAiB,UAAU;AAAA,UAAA,CAC/C;AAAA,QAAA;AAAA,MACH;AAAA,MAEF,YAAY;AAAA,QACV;AAAA,UACE,MAAM;AAAA,UACN,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,IACF,CACD;AAAA,EAAA;AAGH,MAAI,OAAO;AACT,aAAS;AAAA,MACP,mBAAmB,OAAO,CAAC,CAAC;AAAA,MAC5B,mBAAmB,KAAK;AAAA,MACxB,mBAAmB,OAAO,CAAC,CAAC;AAAA,IAAA;AAAA,EAEhC,OAAO;AACL,WAAO,QAAQ,CAAC,UAAU;AACxB,eAAS,KAAK,mBAAmB,KAAK,CAAC;AAAA,IACzC,CAAC;AAAA,EACH;AAEA,SAAOD,aAAoB;AAAA,IACzB,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAG;AAAA,QACH,kBAAkB,YAAY,KAAK;AAAA,QACnC,GAAGC,gCAAsC;AAAA,UACvC,WAAW;AAAA,UACX,mBAAmB;AAAA,UACnB,qBAAqB,iBAAiB,UAAU;AAAA,UAChD,mBAAmB,iBAAiB,UAAU;AAAA,QAAA,CAC/C;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;AAEA,MAAM,iBAAiB,CAAC,UAA2C;AACjE,QAAM,EAAA,UAAEC,eAAa;AACrB,QAAM,iBAAiBA,YAAU,aAAa,KAAA,EAAO,UAAU;AAC/D,QAAM,sBAAsB,iBAAiB;AAE7C,MAAI,CAACA,WAAU,QAAO;AAEtB,QAAM,gBAAgB;AAAA,IACpB,CAAC,eAAeN,kBAAO,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,MAC1D,GAAI,uBAAuB;AAAA,QACzB,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF;AAGF,QAAM,kBAAkBO,SAAAA,mBAAyC;AAAA,IAC/D,SAASD;AAAAA,IACT,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,UAAU;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,MAEL,cAAc;AAAA,QACZ,WAAWN,kBAAO,MAAM,QAAQ;AAAA,MAAA;AAAA,IAClC;AAAA,IAEF,aAAa;AAAA,EAAA,CACd;AAED,SAAO;AACT;AAEA,MAAM,sBAAsB,CAC1B,UACG;AACH,QAAM,EAAE,SAAS,UAAAM,WAAU,MAAM,gBAAgB;AACjD,MAAI,wBAAwB;AAC5B,QAAM,eACJ,CAAC,OAAO,WAAW,kCAAkC,EAAE,WACvD,CAAC,IAAI,SAAS,sBAAsB,QAAQ;AAE9C,MAAI,CAAC,gBAAgB,CAAC,aAAa;AACjC,4BAAwB;AAAA,EAC1B;AAEA,MAAI,CAAC,QAAQ,CAAC,WAAW,CAACA,WAAU;AAClC,WAAO;AAAA,EACT;AAEA,QAAM,gBAAgBH,MAAAA,UAAuB;AAAA,IAC3C,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,SAAS,GAAGH,kBAAO,MAAM,QAAQ,EAAE;AAAA,QAEnC,CAAC,eAAeA,kBAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UACzD,SAAS,GAAGA,kBAAO,MAAM,QAAQ,KAAK,CAAC;AAAA,UACvC,SAAS;AAAA,UACT,eAAe;AAAA,UACf,gBAAgB;AAAA,QAAA;AAAA,QAGlB,CAAC,eAAeA,kBAAO,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,UAC1D,SAAS,GAAGA,kBAAO,MAAM,QAAQ,KAAK,CAAC;AAAA,QAAA;AAAA,QAGzC,GAAGK,gCAAsC;AAAA,UACvC,YAAY;AAAA,QAAA,CACb;AAAA,QAED,CAAC,GAAG,GAAG;AAAA,UACL,GAAI,yBAAyB;AAAA,YAC3B,OAAO,GAAGL,kBAAO,MAAM,MAAM,KAAK;AAAA,UAAA;AAAA,QACpC;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,QAAM,OAAOQ,OAAAA,wBAA4C;AAAA,IACvD,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,QAAM,oBAAoBC,MAAiB;AAAA,IACzC,mBAAmB,eAAe,KAAK;AAAA,IACvC,aAAa;AAAA,IACb;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,OAAK,QAAQ,YAAY,kBAAkB,OAAO;AAClD,OAAK,UAAU,kBAAkB;AAEjC,gBAAc,QAAQ,YAAY,KAAK,OAAO;AAC9C,gBAAc,UAAU,KAAK;AAE7B,SAAO;AACT;AAEA,MAAM,oBAAoB,CACxB,UAKU;AACV,QAAM,aAAa,MAAM,QAAQ,KAAK,CAAC,MAAM,EAAE,YAAY;AAC3D,QAAM,cAAc,MAAM,QAAQ,KAAK,CAAC,MAAM,CAAC,EAAE,YAAY;AAE7D,QAAM,SAAS,CAAA;AAGf,MAAI,CAAC,YAAY;AACf,WAAO,KAAK,uCAAuC;AAAA,EACrD,WAAW,CAAC,WAAW,UAAU,WAAW,OAAO,WAAW,GAAG;AAC/D,WAAO,KAAK,0CAA0C;AAAA,EACxD;AAEA,MAAI,CAAC,aAAa;AAChB,WAAO,KAAK,wCAAwC;AAAA,EACtD,WAAW,CAAC,YAAY,UAAU,YAAY,OAAO,WAAW,GAAG;AACjE,WAAO,KAAK,2CAA2C;AAAA,EACzD;AAGA,MAAI,CAAC,MAAM,QAAQ;AACjB,WAAO,KAAK,kCAAkC;AAAA,EAChD,OAAO;AACL,QAAI,CAAC,MAAM,OAAO,UAAU,MAAM,OAAO,OAAO,WAAW,GAAG;AAC5D,aAAO,KAAK,qCAAqC;AAAA,IACnD,WAAW,MAAM,OAAO,SAAS,MAAM,OAAO,OAAO,SAAS,GAAG;AAC/D,aAAO,KAAK,2DAA2D;AAAA,IACzE;AAAA,EACF;AAEA,MAAI,OAAO,SAAS,GAAG;AACrB,WAAO,QAAQ,CAAC,UAAU,QAAQ,IAAI,oBAAoB,KAAK,CAAC;AAChE,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,QAAQ,MAAM;AAAA,EAAA;AAElB;AAEA,MAAM,mBAAmB,CACvB,YACA,aACA,WACG;AACH,QAAM,aAAa;AAAA,IACjB,qBAAqB,YAAY,QAAQ;AAAA,IACzC,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS,GAAGT,kBAAO,MAAM,QAAQ,GAAG;AAAA,IAEpC,CAAC,WAAWA,kBAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,MACrD,SAAS,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,IAAA;AAAA,IAGrC,CAAC,WAAWA,kBAAO,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,MACtD,SAAS,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,IAAA;AAAA,IAGrC,GAAGK,gCAAsC;AAAA,MACvC,UAAU;AAAA,MACV,KAAK;AAAA,MACL,WAAW;AAAA,MACX,mBAAmB;AAAA,MACnB,qBAAqB,iBAAiB,aAAa;AAAA,MACnD,mBAAmB,iBAAiB,aAAa;AAAA,IAAA,CAClD;AAAA,EAAA;AAGH,SAAOF,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IAEX,UAAU;AAAA,MACR,aAAa,UAAU;AAAA,MACvB,aAAa,MAAM;AAAA,MACnB,aAAa,WAAW;AAAA,IAAA;AAAA,IAE1B,eAAe,EAAE,SAAS,WAAA;AAAA,IAC1B,YAAY;AAAA,MACV;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA,EACF,CACD;AACH;AAEA,MAAA,OAAe,CAAC,UAAyB;AACvC,QAAM,YAAY,kBAAkB,KAAK;AACzC,MAAI,CAAC,UAAW,QAAO;AAEvB,QAAM,EAAE,YAAY,aAAa,OAAA,IAAW;AAC5C,QAAM,OAAO,oBAAoB,KAAK;AACtC,QAAMO,QAAO,iBAAiB,YAAY,aAAa,MAAM;AAE7D,QAAM,WAAW,OAAO,CAACA,OAAM,IAAI,IAAI,CAACA,KAAI;AAE5C,QAAM,YAAYP,MAAAA,UAAuB;AAAA,IACvC,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,OAAO;AAAA,QACP,SAAS;AAAA,QACT,eAAe;AAAA,QACf,GAAGE,gCAAsC;AAAA,UACvC,QAAQ;AAAA,QAAA,CACT;AAAA,QACD,CAAC,YAAY,GAAG;AAAA,UACd,WAAW;AAAA,UACX,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IACF;AAAA,IAEF,YAAY;AAAA,MACV;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA,EACF,CACD;AAED,YAAU,UAAU;AACpB,YAAU,UAAU;AACpB,YAAU,UAAU;AAEpB,SAAO;AACT;;"}
1
+ {"version":3,"file":"grid.js","sources":["../../../../source/composite/hero/custom/grid.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { accessibility, theme } from 'utilities';\nimport { type ContentElement } from '../../../_types';\n\ninterface CornerProps {\n images: Array<HTMLImageElement>;\n isCornerLeft: boolean;\n}\n\ninterface CenterProps {\n images: Array<HTMLImageElement>;\n video?: HTMLVideoElement | null;\n}\n\ninterface HeroGridProps {\n headline?: ContentElement;\n text?: ContentElement;\n actions?: ContentElement;\n corners: Array<CornerProps>;\n center: CenterProps | null;\n isThemeDark?: boolean;\n}\n\nconst isPreferReducedMotion = accessibility.isPrefferdReducedMotion();\nconst isScrollTimelineSupported = () =>\n 'ScrollTimeline' in window || CSS.supports('animation-timeline', 'scroll()');\nconst isDisplayWithoutAnimation =\n isPreferReducedMotion || !isScrollTimelineSupported();\n\nconst ANIMATION_RANGES = {\n GRID_COLUMNS: { start: '110vh', end: '230vh' },\n GRID_ROWS: { start: '110vh', end: '230vh' },\n TINT_FADE: { start: '50vh', end: '140vh' },\n} as const;\n\nconst GRID_LAYOUT = {\n COLUMNS: {\n INITIAL: '20% 60% 20%',\n FINAL: '0 100% 0',\n DEFAULT: '25% 50% 25%',\n },\n ROWS: {\n INITIAL: '25vh 1fr 25vh',\n FINAL: '0 1fr 0',\n TRIPLE: '1fr 1fr 1fr',\n },\n} as const;\n\nconst keyFrameColumns = `\n @keyframes grid-columns {\n from {\n grid-template-columns: ${GRID_LAYOUT.COLUMNS.INITIAL};\n }\n to {\n grid-template-columns: ${GRID_LAYOUT.COLUMNS.FINAL};\n grid-gap: 0;\n }\n }\n`;\n\nconst keyFrameRows = `\n @keyframes grid-rows {\n from {\n grid-template-rows: ${GRID_LAYOUT.ROWS.INITIAL};\n }\n to {\n grid-template-rows: ${GRID_LAYOUT.ROWS.FINAL};\n grid-gap: 0;\n }\n }\n`;\n\nconst keyFrameTint = `\n @keyframes tint-fade {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n`;\n\nconst columnBase = {\n display: 'grid',\n gridAutoFlow: 'row dense',\n gridGap: `${Styles.token.spacing.min}`,\n width: '100%',\n height: '100vh',\n\n [`@media (${Styles.token.media.queries.tablet.min})`]: {\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@media (${Styles.token.media.queries.desktop.min})`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n },\n\n ['& > *']: {\n overflow: 'hidden',\n position: 'relative',\n },\n};\n\nconst createImageWrapper = (image: HTMLImageElement) =>\n assets.image.background({\n element: image,\n isScaled: true,\n isGifAllowed: true,\n isShowCaption: true,\n });\n\nconst createVideoWrapper = (video: HTMLVideoElement) =>\n assets.video.observedAutoPlay({\n video,\n isAutoplay: true,\n additionalElementStyles: {\n additionalElementStyles: {\n width: '100%',\n aspectRatio: '1 / 1',\n position: 'relative',\n overflow: 'hidden',\n\n [`& video`]: {\n height: '100%',\n width: '100%',\n objectFit: 'cover',\n },\n },\n },\n });\n\nconst createCorner = ({ images, isCornerLeft }: CornerProps) => {\n const children = images.map((image) => createImageWrapper(image));\n\n return ElementModel.createDiv({\n className: isCornerLeft\n ? 'hero-grid-corner-left'\n : 'hero-grid-corner-right',\n children,\n elementStyles: {\n element: {\n ...columnBase,\n gridTemplateRows: GRID_LAYOUT.ROWS.TRIPLE,\n },\n },\n attributes: [\n {\n role: 'region',\n 'aria-label': `${\n isCornerLeft ? 'Left' : 'Right'\n } decorative image grid`,\n },\n ],\n });\n};\n\nconst createCenter = ({ images, video }: CenterProps) => {\n const children = [\n ElementModel.create({\n element: document.createElement('div'),\n className: 'hero-grid-tint',\n elementStyles: {\n element: {\n width: '100%',\n height: '100%',\n position: 'absolute',\n top: 0,\n left: 0,\n backgroundColor: 'rgba(0, 0, 0, 0.5)',\n zIndex: 9,\n opacity: 0,\n ...theme.media.withViewTimelineAnimation({\n animation: 'tint-fade ease-in-out forwards',\n animationTimeline: 'view()',\n animationRangeStart: ANIMATION_RANGES.TINT_FADE.start,\n animationRangeEnd: ANIMATION_RANGES.TINT_FADE.end,\n }),\n },\n },\n attributes: [\n {\n role: 'region',\n 'aria-label': 'Main hero content',\n },\n ],\n }),\n ];\n\n if (video) {\n children.push(\n createImageWrapper(images[0]),\n createVideoWrapper(video),\n createImageWrapper(images[1]),\n );\n } else {\n images.forEach((image) => {\n children.push(createImageWrapper(image));\n });\n }\n\n return ElementModel.create({\n element: document.createElement('div'),\n className: 'hero-grid-center',\n children,\n elementStyles: {\n element: {\n ...columnBase,\n gridTemplateRows: GRID_LAYOUT.ROWS.INITIAL,\n ...theme.media.withViewTimelineAnimation({\n animation: 'grid-rows ease-in-out forwards',\n animationTimeline: 'view()',\n animationRangeStart: ANIMATION_RANGES.GRID_ROWS.start,\n animationRangeEnd: ANIMATION_RANGES.GRID_ROWS.end,\n }),\n },\n },\n });\n};\n\nconst createHeadline = (props: Pick<HeroGridProps, 'headline'>) => {\n const { headline } = props;\n const characterCount = headline?.textContent?.trim().length || 0;\n const isOverwriteHeadline = characterCount > 30;\n\n if (!headline) return null;\n\n const desktopStyles = {\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(isOverwriteHeadline && {\n fontSize: '80px',\n }),\n },\n };\n\n const headlineElement = ElementModel.headline.campaignExtraLarge({\n element: headline,\n elementStyles: {\n element: {\n textTransform: 'uppercase',\n textWrap: 'pretty',\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n isThemeDark: true,\n });\n\n return headlineElement;\n};\n\nconst createTextContainer = (\n props: Pick<HeroGridProps, 'headline' | 'text' | 'actions' | 'isThemeDark'>,\n) => {\n const { actions, headline, text, isThemeDark } = props;\n let shouldRenderBlackText = null;\n\n if (isDisplayWithoutAnimation && !isThemeDark) {\n shouldRenderBlackText = true;\n }\n\n if (!text && !actions && !headline) {\n return null;\n }\n\n const textContainer = ElementModel.createDiv({\n className: 'hero-expand-text-container',\n elementStyles: {\n element: {\n position: 'relative',\n height: '100%',\n zIndex: 9999,\n textAlign: 'center',\n padding: `${Styles.token.spacing.md} 0`,\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n padding: `${Styles.token.spacing['3xl']} 0`,\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n },\n\n [`@container (${Styles.token.media.queries.highDef.min})`]: {\n padding: `${Styles.token.spacing['6xl']} 0`,\n },\n\n ...theme.media.withViewTimelineAnimation({\n paddingTop: '140vh',\n }),\n\n ['*']: {\n ...(shouldRenderBlackText && {\n color: `${Styles.token.color.black} !important`,\n }),\n },\n },\n },\n });\n\n const lock = ElementModel.layout.spaceHorizontalSmallest({\n element: document.createElement('div'),\n elementStyles: {\n element: {\n height: '100%',\n width: '100%',\n position: 'relative',\n },\n },\n });\n\n const textLockupElement = textLockup.large({\n headlineComposite: createHeadline(props),\n textLargest: text,\n actions,\n isThemeDark: true,\n });\n\n lock.element.appendChild(textLockupElement.element);\n lock.styles += textLockupElement.styles;\n\n textContainer.element.appendChild(lock.element);\n textContainer.styles += lock.styles;\n\n return textContainer;\n};\n\nconst validateGridProps = (\n props: HeroGridProps,\n): {\n leftCorner: CornerProps;\n rightCorner: CornerProps;\n center: CenterProps;\n} | null => {\n const leftCorner = props.corners.find((c) => c.isCornerLeft);\n const rightCorner = props.corners.find((c) => !c.isCornerLeft);\n\n const errors = [];\n\n // Validate corners\n if (!leftCorner) {\n errors.push('Left corner is required for hero grid');\n } else if (!leftCorner.images || leftCorner.images.length === 0) {\n errors.push('Left corner must have at least one image');\n }\n\n if (!rightCorner) {\n errors.push('Right corner is required for hero grid');\n } else if (!rightCorner.images || rightCorner.images.length === 0) {\n errors.push('Right corner must have at least one image');\n }\n\n // Validate center\n if (!props.center) {\n errors.push('Center is required for hero grid');\n } else {\n if (!props.center.images || props.center.images.length === 0) {\n errors.push('Center must have at least one image');\n } else if (props.center.video && props.center.images.length < 2) {\n errors.push('Center must have at least 2 images when video is provided');\n }\n }\n\n if (errors.length > 0) {\n errors.forEach((error) => console.log('Hero Grid Error:', error));\n return null;\n }\n\n return {\n leftCorner: leftCorner as CornerProps,\n rightCorner: rightCorner as CornerProps,\n center: props.center as CenterProps,\n };\n};\n\nconst createGridLayout = (\n leftCorner: CornerProps,\n rightCorner: CornerProps,\n center: CenterProps,\n) => {\n const gridStyles = {\n gridTemplateColumns: GRID_LAYOUT.COLUMNS.DEFAULT,\n height: '100vh',\n width: '100%',\n display: 'grid',\n gridGap: `${Styles.token.spacing.min}`,\n\n [`@media (${Styles.token.media.queries.tablet.min})`]: {\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@media (${Styles.token.media.queries.desktop.min})`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n },\n\n ...theme.media.withViewTimelineAnimation({\n position: 'sticky',\n top: 0,\n animation: 'grid-columns ease-in-out forwards',\n animationTimeline: 'view()',\n animationRangeStart: ANIMATION_RANGES.GRID_COLUMNS.start,\n animationRangeEnd: ANIMATION_RANGES.GRID_COLUMNS.end,\n }),\n };\n\n return ElementModel.createDiv({\n className: 'hero-grid-layout',\n\n children: [\n createCorner(leftCorner),\n createCenter(center),\n createCorner(rightCorner),\n ],\n elementStyles: { element: gridStyles },\n attributes: [\n {\n role: 'region',\n 'aria-label': 'Hero grid layout',\n },\n ],\n });\n};\n\nexport default (props: HeroGridProps) => {\n const validated = validateGridProps(props);\n if (!validated) return null;\n\n const { leftCorner, rightCorner, center } = validated;\n const text = createTextContainer(props);\n const grid = createGridLayout(leftCorner, rightCorner, center);\n\n const children = text ? [grid, text] : [grid];\n\n const composite = ElementModel.createDiv({\n className: 'hero-grid-container',\n children,\n elementStyles: {\n element: {\n width: '100%',\n display: 'block',\n containerType: 'inline-size',\n ...theme.media.withViewTimelineAnimation({\n height: '300vh',\n }),\n ['img, video']: {\n objectFit: 'cover',\n width: '100%',\n height: '100%',\n },\n },\n },\n attributes: [\n {\n role: 'main',\n 'aria-label': 'Hero section',\n },\n ],\n });\n\n composite.styles += keyFrameColumns;\n composite.styles += keyFrameRows;\n composite.styles += keyFrameTint;\n\n return composite;\n};\n"],"names":["accessibility.isPrefferdReducedMotion","Styles","assets.image.background","assets.video.observedAutoPlay","ElementModel.createDiv","ElementModel.create","theme.media.withViewTimelineAnimation","headline","ElementModel.headline.campaignExtraLarge","ElementModel.layout.spaceHorizontalSmallest","textLockup.large","grid"],"mappings":"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"}
package/dist/composite/hero/custom/grid.mjs CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as Styles from "@universityofmaryland/web-styles-library";
2
+ import { isPrefferdReducedMotion } from "../../../utilities/accessibility/index.mjs";
2
3
  import "../../../node_modules/postcss/lib/postcss.mjs";
3
4
  import "../../../node_modules/postcss-nesting/dist/index.mjs";
4
5
  import "../../../node_modules/postcss-js/index.mjs";
@@ -17,6 +18,9 @@ import large from "../../../atomic/text-lockup/large.mjs";
17
18
  import "../../../atomic/text-lockup/small.mjs";
18
19
  import { spaceHorizontalSmallest } from "../../../model/elements/layout.mjs";
19
20
  import { campaignExtraLarge } from "../../../model/elements/headline.mjs";
21
+ const isPreferReducedMotion = isPrefferdReducedMotion();
22
+ const isScrollTimelineSupported = () => "ScrollTimeline" in window || CSS.supports("animation-timeline", "scroll()");
23
+ const isDisplayWithoutAnimation = isPreferReducedMotion || !isScrollTimelineSupported();
20
24
  const ANIMATION_RANGES = {
21
25
  GRID_COLUMNS: { start: "110vh", end: "230vh" },
22
26
  GRID_ROWS: { start: "110vh", end: "230vh" },
@@ -216,8 +220,7 @@ const createHeadline = (props) => {
216
220
  const createTextContainer = (props) => {
217
221
  const { actions, headline, text, isThemeDark } = props;
218
222
  let shouldRenderBlackText = null;
219
- const allowsMotion = !window.matchMedia("(prefers-reduced-motion: reduce)").matches || !CSS.supports("animation-timeline", "view()");
220
- if (!allowsMotion && !isThemeDark) {
223
+ if (isDisplayWithoutAnimation && !isThemeDark) {
221
224
  shouldRenderBlackText = true;
222
225
  }
223
226
  if (!text && !actions && !headline) {
package/dist/composite/hero/custom/grid.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"grid.mjs","sources":["../../../../source/composite/hero/custom/grid.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { theme } from 'utilities';\nimport { type ContentElement } from '../../../_types';\n\ninterface CornerProps {\n images: Array<HTMLImageElement>;\n isCornerLeft: boolean;\n}\n\ninterface CenterProps {\n images: Array<HTMLImageElement>;\n video?: HTMLVideoElement | null;\n}\n\ninterface HeroGridProps {\n headline?: ContentElement;\n text?: ContentElement;\n actions?: ContentElement;\n corners: Array<CornerProps>;\n center: CenterProps | null;\n isThemeDark?: boolean;\n}\n\nconst ANIMATION_RANGES = {\n GRID_COLUMNS: { start: '110vh', end: '230vh' },\n GRID_ROWS: { start: '110vh', end: '230vh' },\n TINT_FADE: { start: '50vh', end: '140vh' },\n} as const;\n\nconst GRID_LAYOUT = {\n COLUMNS: {\n INITIAL: '20% 60% 20%',\n FINAL: '0 100% 0',\n DEFAULT: '25% 50% 25%',\n },\n ROWS: {\n INITIAL: '25vh 1fr 25vh',\n FINAL: '0 1fr 0',\n TRIPLE: '1fr 1fr 1fr',\n },\n} as const;\n\nconst keyFrameColumns = `\n @keyframes grid-columns {\n from {\n grid-template-columns: ${GRID_LAYOUT.COLUMNS.INITIAL};\n }\n to {\n grid-template-columns: ${GRID_LAYOUT.COLUMNS.FINAL};\n grid-gap: 0;\n }\n }\n`;\n\nconst keyFrameRows = `\n @keyframes grid-rows {\n from {\n grid-template-rows: ${GRID_LAYOUT.ROWS.INITIAL};\n }\n to {\n grid-template-rows: ${GRID_LAYOUT.ROWS.FINAL};\n grid-gap: 0;\n }\n }\n`;\n\nconst keyFrameTint = `\n @keyframes tint-fade {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n`;\n\nconst columnBase = {\n display: 'grid',\n gridAutoFlow: 'row dense',\n gridGap: `${Styles.token.spacing.min}`,\n width: '100%',\n height: '100vh',\n\n [`@media (${Styles.token.media.queries.tablet.min})`]: {\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@media (${Styles.token.media.queries.desktop.min})`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n },\n\n ['& > *']: {\n overflow: 'hidden',\n position: 'relative',\n },\n};\n\nconst createImageWrapper = (image: HTMLImageElement) =>\n assets.image.background({\n element: image,\n isScaled: true,\n isGifAllowed: true,\n isShowCaption: true,\n });\n\nconst createVideoWrapper = (video: HTMLVideoElement) =>\n assets.video.observedAutoPlay({\n video,\n isAutoplay: true,\n additionalElementStyles: {\n additionalElementStyles: {\n width: '100%',\n aspectRatio: '1 / 1',\n position: 'relative',\n overflow: 'hidden',\n\n [`& video`]: {\n height: '100%',\n width: '100%',\n objectFit: 'cover',\n },\n },\n },\n });\n\nconst createCorner = ({ images, isCornerLeft }: CornerProps) => {\n const children = images.map((image) => createImageWrapper(image));\n\n return ElementModel.createDiv({\n className: isCornerLeft\n ? 'hero-grid-corner-left'\n : 'hero-grid-corner-right',\n children,\n elementStyles: {\n element: {\n ...columnBase,\n gridTemplateRows: GRID_LAYOUT.ROWS.TRIPLE,\n },\n },\n attributes: [\n {\n role: 'region',\n 'aria-label': `${\n isCornerLeft ? 'Left' : 'Right'\n } decorative image grid`,\n },\n ],\n });\n};\n\nconst createCenter = ({ images, video }: CenterProps) => {\n const children = [\n ElementModel.create({\n element: document.createElement('div'),\n className: 'hero-grid-tint',\n elementStyles: {\n element: {\n width: '100%',\n height: '100%',\n position: 'absolute',\n top: 0,\n left: 0,\n backgroundColor: 'rgba(0, 0, 0, 0.5)',\n zIndex: 9,\n opacity: 0,\n ...theme.media.withViewTimelineAnimation({\n animation: 'tint-fade ease-in-out forwards',\n animationTimeline: 'view()',\n animationRangeStart: ANIMATION_RANGES.TINT_FADE.start,\n animationRangeEnd: ANIMATION_RANGES.TINT_FADE.end,\n }),\n },\n },\n attributes: [\n {\n role: 'region',\n 'aria-label': 'Main hero content',\n },\n ],\n }),\n ];\n\n if (video) {\n children.push(\n createImageWrapper(images[0]),\n createVideoWrapper(video),\n createImageWrapper(images[1]),\n );\n } else {\n images.forEach((image) => {\n children.push(createImageWrapper(image));\n });\n }\n\n return ElementModel.create({\n element: document.createElement('div'),\n className: 'hero-grid-center',\n children,\n elementStyles: {\n element: {\n ...columnBase,\n gridTemplateRows: GRID_LAYOUT.ROWS.INITIAL,\n ...theme.media.withViewTimelineAnimation({\n animation: 'grid-rows ease-in-out forwards',\n animationTimeline: 'view()',\n animationRangeStart: ANIMATION_RANGES.GRID_ROWS.start,\n animationRangeEnd: ANIMATION_RANGES.GRID_ROWS.end,\n }),\n },\n },\n });\n};\n\nconst createHeadline = (props: Pick<HeroGridProps, 'headline'>) => {\n const { headline } = props;\n const characterCount = headline?.textContent?.trim().length || 0;\n const isOverwriteHeadline = characterCount > 30;\n\n if (!headline) return null;\n\n const desktopStyles = {\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(isOverwriteHeadline && {\n fontSize: '80px',\n }),\n },\n };\n\n const headlineElement = ElementModel.headline.campaignExtraLarge({\n element: headline,\n elementStyles: {\n element: {\n textTransform: 'uppercase',\n textWrap: 'pretty',\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n isThemeDark: true,\n });\n\n return headlineElement;\n};\n\nconst createTextContainer = (\n props: Pick<HeroGridProps, 'headline' | 'text' | 'actions' | 'isThemeDark'>,\n) => {\n const { actions, headline, text, isThemeDark } = props;\n let shouldRenderBlackText = null;\n const allowsMotion =\n !window.matchMedia('(prefers-reduced-motion: reduce)').matches ||\n !CSS.supports('animation-timeline', 'view()');\n\n if (!allowsMotion && !isThemeDark) {\n shouldRenderBlackText = true;\n }\n\n if (!text && !actions && !headline) {\n return null;\n }\n\n const textContainer = ElementModel.createDiv({\n className: 'hero-expand-text-container',\n elementStyles: {\n element: {\n position: 'relative',\n height: '100%',\n zIndex: 9999,\n textAlign: 'center',\n padding: `${Styles.token.spacing.md} 0`,\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n padding: `${Styles.token.spacing['3xl']} 0`,\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n },\n\n [`@container (${Styles.token.media.queries.highDef.min})`]: {\n padding: `${Styles.token.spacing['6xl']} 0`,\n },\n\n ...theme.media.withViewTimelineAnimation({\n paddingTop: '140vh',\n }),\n\n ['*']: {\n ...(shouldRenderBlackText && {\n color: `${Styles.token.color.black} !important`,\n }),\n },\n },\n },\n });\n\n const lock = ElementModel.layout.spaceHorizontalSmallest({\n element: document.createElement('div'),\n elementStyles: {\n element: {\n height: '100%',\n width: '100%',\n position: 'relative',\n },\n },\n });\n\n const textLockupElement = textLockup.large({\n headlineComposite: createHeadline(props),\n textLargest: text,\n actions,\n isThemeDark: true,\n });\n\n lock.element.appendChild(textLockupElement.element);\n lock.styles += textLockupElement.styles;\n\n textContainer.element.appendChild(lock.element);\n textContainer.styles += lock.styles;\n\n return textContainer;\n};\n\nconst validateGridProps = (\n props: HeroGridProps,\n): {\n leftCorner: CornerProps;\n rightCorner: CornerProps;\n center: CenterProps;\n} | null => {\n const leftCorner = props.corners.find((c) => c.isCornerLeft);\n const rightCorner = props.corners.find((c) => !c.isCornerLeft);\n\n const errors = [];\n\n // Validate corners\n if (!leftCorner) {\n errors.push('Left corner is required for hero grid');\n } else if (!leftCorner.images || leftCorner.images.length === 0) {\n errors.push('Left corner must have at least one image');\n }\n\n if (!rightCorner) {\n errors.push('Right corner is required for hero grid');\n } else if (!rightCorner.images || rightCorner.images.length === 0) {\n errors.push('Right corner must have at least one image');\n }\n\n // Validate center\n if (!props.center) {\n errors.push('Center is required for hero grid');\n } else {\n if (!props.center.images || props.center.images.length === 0) {\n errors.push('Center must have at least one image');\n } else if (props.center.video && props.center.images.length < 2) {\n errors.push('Center must have at least 2 images when video is provided');\n }\n }\n\n if (errors.length > 0) {\n errors.forEach((error) => console.log('Hero Grid Error:', error));\n return null;\n }\n\n return {\n leftCorner: leftCorner as CornerProps,\n rightCorner: rightCorner as CornerProps,\n center: props.center as CenterProps,\n };\n};\n\nconst createGridLayout = (\n leftCorner: CornerProps,\n rightCorner: CornerProps,\n center: CenterProps,\n) => {\n const gridStyles = {\n gridTemplateColumns: GRID_LAYOUT.COLUMNS.DEFAULT,\n height: '100vh',\n width: '100%',\n display: 'grid',\n gridGap: `${Styles.token.spacing.min}`,\n\n [`@media (${Styles.token.media.queries.tablet.min})`]: {\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@media (${Styles.token.media.queries.desktop.min})`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n },\n\n ...theme.media.withViewTimelineAnimation({\n position: 'sticky',\n top: 0,\n animation: 'grid-columns ease-in-out forwards',\n animationTimeline: 'view()',\n animationRangeStart: ANIMATION_RANGES.GRID_COLUMNS.start,\n animationRangeEnd: ANIMATION_RANGES.GRID_COLUMNS.end,\n }),\n };\n\n return ElementModel.createDiv({\n className: 'hero-grid-layout',\n\n children: [\n createCorner(leftCorner),\n createCenter(center),\n createCorner(rightCorner),\n ],\n elementStyles: { element: gridStyles },\n attributes: [\n {\n role: 'region',\n 'aria-label': 'Hero grid layout',\n },\n ],\n });\n};\n\nexport default (props: HeroGridProps) => {\n const validated = validateGridProps(props);\n if (!validated) return null;\n\n const { leftCorner, rightCorner, center } = validated;\n const text = createTextContainer(props);\n const grid = createGridLayout(leftCorner, rightCorner, center);\n\n const children = text ? [grid, text] : [grid];\n\n const composite = ElementModel.createDiv({\n className: 'hero-grid-container',\n children,\n elementStyles: {\n element: {\n width: '100%',\n display: 'block',\n containerType: 'inline-size',\n ...theme.media.withViewTimelineAnimation({\n height: '300vh',\n }),\n ['img, video']: {\n objectFit: 'cover',\n width: '100%',\n height: '100%',\n },\n },\n },\n attributes: [\n {\n role: 'main',\n 'aria-label': 'Hero section',\n },\n ],\n });\n\n composite.styles += keyFrameColumns;\n composite.styles += keyFrameRows;\n composite.styles += keyFrameTint;\n\n return composite;\n};\n"],"names":["assets.image.background","assets.video.observedAutoPlay","ElementModel.createDiv","ElementModel.create","theme.media.withViewTimelineAnimation","ElementModel.headline.campaignExtraLarge","ElementModel.layout.spaceHorizontalSmallest","textLockup.large","grid"],"mappings":"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"}
1
+ {"version":3,"file":"grid.mjs","sources":["../../../../source/composite/hero/custom/grid.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { accessibility, theme } from 'utilities';\nimport { type ContentElement } from '../../../_types';\n\ninterface CornerProps {\n images: Array<HTMLImageElement>;\n isCornerLeft: boolean;\n}\n\ninterface CenterProps {\n images: Array<HTMLImageElement>;\n video?: HTMLVideoElement | null;\n}\n\ninterface HeroGridProps {\n headline?: ContentElement;\n text?: ContentElement;\n actions?: ContentElement;\n corners: Array<CornerProps>;\n center: CenterProps | null;\n isThemeDark?: boolean;\n}\n\nconst isPreferReducedMotion = accessibility.isPrefferdReducedMotion();\nconst isScrollTimelineSupported = () =>\n 'ScrollTimeline' in window || CSS.supports('animation-timeline', 'scroll()');\nconst isDisplayWithoutAnimation =\n isPreferReducedMotion || !isScrollTimelineSupported();\n\nconst ANIMATION_RANGES = {\n GRID_COLUMNS: { start: '110vh', end: '230vh' },\n GRID_ROWS: { start: '110vh', end: '230vh' },\n TINT_FADE: { start: '50vh', end: '140vh' },\n} as const;\n\nconst GRID_LAYOUT = {\n COLUMNS: {\n INITIAL: '20% 60% 20%',\n FINAL: '0 100% 0',\n DEFAULT: '25% 50% 25%',\n },\n ROWS: {\n INITIAL: '25vh 1fr 25vh',\n FINAL: '0 1fr 0',\n TRIPLE: '1fr 1fr 1fr',\n },\n} as const;\n\nconst keyFrameColumns = `\n @keyframes grid-columns {\n from {\n grid-template-columns: ${GRID_LAYOUT.COLUMNS.INITIAL};\n }\n to {\n grid-template-columns: ${GRID_LAYOUT.COLUMNS.FINAL};\n grid-gap: 0;\n }\n }\n`;\n\nconst keyFrameRows = `\n @keyframes grid-rows {\n from {\n grid-template-rows: ${GRID_LAYOUT.ROWS.INITIAL};\n }\n to {\n grid-template-rows: ${GRID_LAYOUT.ROWS.FINAL};\n grid-gap: 0;\n }\n }\n`;\n\nconst keyFrameTint = `\n @keyframes tint-fade {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n`;\n\nconst columnBase = {\n display: 'grid',\n gridAutoFlow: 'row dense',\n gridGap: `${Styles.token.spacing.min}`,\n width: '100%',\n height: '100vh',\n\n [`@media (${Styles.token.media.queries.tablet.min})`]: {\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@media (${Styles.token.media.queries.desktop.min})`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n },\n\n ['& > *']: {\n overflow: 'hidden',\n position: 'relative',\n },\n};\n\nconst createImageWrapper = (image: HTMLImageElement) =>\n assets.image.background({\n element: image,\n isScaled: true,\n isGifAllowed: true,\n isShowCaption: true,\n });\n\nconst createVideoWrapper = (video: HTMLVideoElement) =>\n assets.video.observedAutoPlay({\n video,\n isAutoplay: true,\n additionalElementStyles: {\n additionalElementStyles: {\n width: '100%',\n aspectRatio: '1 / 1',\n position: 'relative',\n overflow: 'hidden',\n\n [`& video`]: {\n height: '100%',\n width: '100%',\n objectFit: 'cover',\n },\n },\n },\n });\n\nconst createCorner = ({ images, isCornerLeft }: CornerProps) => {\n const children = images.map((image) => createImageWrapper(image));\n\n return ElementModel.createDiv({\n className: isCornerLeft\n ? 'hero-grid-corner-left'\n : 'hero-grid-corner-right',\n children,\n elementStyles: {\n element: {\n ...columnBase,\n gridTemplateRows: GRID_LAYOUT.ROWS.TRIPLE,\n },\n },\n attributes: [\n {\n role: 'region',\n 'aria-label': `${\n isCornerLeft ? 'Left' : 'Right'\n } decorative image grid`,\n },\n ],\n });\n};\n\nconst createCenter = ({ images, video }: CenterProps) => {\n const children = [\n ElementModel.create({\n element: document.createElement('div'),\n className: 'hero-grid-tint',\n elementStyles: {\n element: {\n width: '100%',\n height: '100%',\n position: 'absolute',\n top: 0,\n left: 0,\n backgroundColor: 'rgba(0, 0, 0, 0.5)',\n zIndex: 9,\n opacity: 0,\n ...theme.media.withViewTimelineAnimation({\n animation: 'tint-fade ease-in-out forwards',\n animationTimeline: 'view()',\n animationRangeStart: ANIMATION_RANGES.TINT_FADE.start,\n animationRangeEnd: ANIMATION_RANGES.TINT_FADE.end,\n }),\n },\n },\n attributes: [\n {\n role: 'region',\n 'aria-label': 'Main hero content',\n },\n ],\n }),\n ];\n\n if (video) {\n children.push(\n createImageWrapper(images[0]),\n createVideoWrapper(video),\n createImageWrapper(images[1]),\n );\n } else {\n images.forEach((image) => {\n children.push(createImageWrapper(image));\n });\n }\n\n return ElementModel.create({\n element: document.createElement('div'),\n className: 'hero-grid-center',\n children,\n elementStyles: {\n element: {\n ...columnBase,\n gridTemplateRows: GRID_LAYOUT.ROWS.INITIAL,\n ...theme.media.withViewTimelineAnimation({\n animation: 'grid-rows ease-in-out forwards',\n animationTimeline: 'view()',\n animationRangeStart: ANIMATION_RANGES.GRID_ROWS.start,\n animationRangeEnd: ANIMATION_RANGES.GRID_ROWS.end,\n }),\n },\n },\n });\n};\n\nconst createHeadline = (props: Pick<HeroGridProps, 'headline'>) => {\n const { headline } = props;\n const characterCount = headline?.textContent?.trim().length || 0;\n const isOverwriteHeadline = characterCount > 30;\n\n if (!headline) return null;\n\n const desktopStyles = {\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(isOverwriteHeadline && {\n fontSize: '80px',\n }),\n },\n };\n\n const headlineElement = ElementModel.headline.campaignExtraLarge({\n element: headline,\n elementStyles: {\n element: {\n textTransform: 'uppercase',\n textWrap: 'pretty',\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n isThemeDark: true,\n });\n\n return headlineElement;\n};\n\nconst createTextContainer = (\n props: Pick<HeroGridProps, 'headline' | 'text' | 'actions' | 'isThemeDark'>,\n) => {\n const { actions, headline, text, isThemeDark } = props;\n let shouldRenderBlackText = null;\n\n if (isDisplayWithoutAnimation && !isThemeDark) {\n shouldRenderBlackText = true;\n }\n\n if (!text && !actions && !headline) {\n return null;\n }\n\n const textContainer = ElementModel.createDiv({\n className: 'hero-expand-text-container',\n elementStyles: {\n element: {\n position: 'relative',\n height: '100%',\n zIndex: 9999,\n textAlign: 'center',\n padding: `${Styles.token.spacing.md} 0`,\n\n [`@container (${Styles.token.media.queries.tablet.min})`]: {\n padding: `${Styles.token.spacing['3xl']} 0`,\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n },\n\n [`@container (${Styles.token.media.queries.highDef.min})`]: {\n padding: `${Styles.token.spacing['6xl']} 0`,\n },\n\n ...theme.media.withViewTimelineAnimation({\n paddingTop: '140vh',\n }),\n\n ['*']: {\n ...(shouldRenderBlackText && {\n color: `${Styles.token.color.black} !important`,\n }),\n },\n },\n },\n });\n\n const lock = ElementModel.layout.spaceHorizontalSmallest({\n element: document.createElement('div'),\n elementStyles: {\n element: {\n height: '100%',\n width: '100%',\n position: 'relative',\n },\n },\n });\n\n const textLockupElement = textLockup.large({\n headlineComposite: createHeadline(props),\n textLargest: text,\n actions,\n isThemeDark: true,\n });\n\n lock.element.appendChild(textLockupElement.element);\n lock.styles += textLockupElement.styles;\n\n textContainer.element.appendChild(lock.element);\n textContainer.styles += lock.styles;\n\n return textContainer;\n};\n\nconst validateGridProps = (\n props: HeroGridProps,\n): {\n leftCorner: CornerProps;\n rightCorner: CornerProps;\n center: CenterProps;\n} | null => {\n const leftCorner = props.corners.find((c) => c.isCornerLeft);\n const rightCorner = props.corners.find((c) => !c.isCornerLeft);\n\n const errors = [];\n\n // Validate corners\n if (!leftCorner) {\n errors.push('Left corner is required for hero grid');\n } else if (!leftCorner.images || leftCorner.images.length === 0) {\n errors.push('Left corner must have at least one image');\n }\n\n if (!rightCorner) {\n errors.push('Right corner is required for hero grid');\n } else if (!rightCorner.images || rightCorner.images.length === 0) {\n errors.push('Right corner must have at least one image');\n }\n\n // Validate center\n if (!props.center) {\n errors.push('Center is required for hero grid');\n } else {\n if (!props.center.images || props.center.images.length === 0) {\n errors.push('Center must have at least one image');\n } else if (props.center.video && props.center.images.length < 2) {\n errors.push('Center must have at least 2 images when video is provided');\n }\n }\n\n if (errors.length > 0) {\n errors.forEach((error) => console.log('Hero Grid Error:', error));\n return null;\n }\n\n return {\n leftCorner: leftCorner as CornerProps,\n rightCorner: rightCorner as CornerProps,\n center: props.center as CenterProps,\n };\n};\n\nconst createGridLayout = (\n leftCorner: CornerProps,\n rightCorner: CornerProps,\n center: CenterProps,\n) => {\n const gridStyles = {\n gridTemplateColumns: GRID_LAYOUT.COLUMNS.DEFAULT,\n height: '100vh',\n width: '100%',\n display: 'grid',\n gridGap: `${Styles.token.spacing.min}`,\n\n [`@media (${Styles.token.media.queries.tablet.min})`]: {\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@media (${Styles.token.media.queries.desktop.min})`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n },\n\n ...theme.media.withViewTimelineAnimation({\n position: 'sticky',\n top: 0,\n animation: 'grid-columns ease-in-out forwards',\n animationTimeline: 'view()',\n animationRangeStart: ANIMATION_RANGES.GRID_COLUMNS.start,\n animationRangeEnd: ANIMATION_RANGES.GRID_COLUMNS.end,\n }),\n };\n\n return ElementModel.createDiv({\n className: 'hero-grid-layout',\n\n children: [\n createCorner(leftCorner),\n createCenter(center),\n createCorner(rightCorner),\n ],\n elementStyles: { element: gridStyles },\n attributes: [\n {\n role: 'region',\n 'aria-label': 'Hero grid layout',\n },\n ],\n });\n};\n\nexport default (props: HeroGridProps) => {\n const validated = validateGridProps(props);\n if (!validated) return null;\n\n const { leftCorner, rightCorner, center } = validated;\n const text = createTextContainer(props);\n const grid = createGridLayout(leftCorner, rightCorner, center);\n\n const children = text ? [grid, text] : [grid];\n\n const composite = ElementModel.createDiv({\n className: 'hero-grid-container',\n children,\n elementStyles: {\n element: {\n width: '100%',\n display: 'block',\n containerType: 'inline-size',\n ...theme.media.withViewTimelineAnimation({\n height: '300vh',\n }),\n ['img, video']: {\n objectFit: 'cover',\n width: '100%',\n height: '100%',\n },\n },\n },\n attributes: [\n {\n role: 'main',\n 'aria-label': 'Hero section',\n },\n ],\n });\n\n composite.styles += keyFrameColumns;\n composite.styles += keyFrameRows;\n composite.styles += keyFrameTint;\n\n return composite;\n};\n"],"names":["accessibility.isPrefferdReducedMotion","assets.image.background","assets.video.observedAutoPlay","ElementModel.createDiv","ElementModel.create","theme.media.withViewTimelineAnimation","ElementModel.headline.campaignExtraLarge","ElementModel.layout.spaceHorizontalSmallest","textLockup.large","grid"],"mappings":"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"}
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.8",
4
4
  "description": "UMD Web Elements",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",