@universityofmaryland/web-elements-library 1.5.9 → 1.6.0-beta.1

package/dist/composite/hero/logo.mjs

@@ -1,138 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-import * as token from "@universityofmaryland/web-token-library";
-import * as elementStyles from "@universityofmaryland/web-styles-library/element";
-import * as Styles from "@universityofmaryland/web-styles-library";
-import { theme } from "@universityofmaryland/web-utilities-library/theme";
-import "@universityofmaryland/web-styles-library/layout";
-import "@universityofmaryland/web-styles-library/animation";
-import "@universityofmaryland/web-styles-library/typography";
-import "@universityofmaryland/web-utilities-library/media";
-import "@universityofmaryland/web-utilities-library/dom";
-import "@universityofmaryland/web-icons-library/controls";
-import "@universityofmaryland/web-icons-library/communication";
-import "@universityofmaryland/web-icons-library/files";
-import "@universityofmaryland/web-icons-library/brand";
-import "@universityofmaryland/web-icons-library/arrows";
-import "../../atomic/animations/actions/indicator.mjs";
-import "../../atomic/animations/brand/chevron-scroll.mjs";
-import "../../atomic/animations/brand/card-stack.mjs";
-import imageContainer from "../../atomic/assets/image/background.mjs";
-import "@universityofmaryland/web-utilities-library/performance";
-import "@universityofmaryland/web-utilities-library/accessibility";
-import "@universityofmaryland/web-icons-library/location";
-import "@universityofmaryland/web-icons-library/calendar";
-import "../../atomic/layout/block/stacked.mjs";
-import "../../atomic/layout/overlay/modal.mjs";
-import "../../atomic/layout/person/columns.mjs";
-import "@universityofmaryland/web-icons-library/social";
-import "../../atomic/text-lockup/date.mjs";
-import large from "../../atomic/text-lockup/large.mjs";
-import "../../atomic/text-lockup/small.mjs";
-const getBackgroundColor = (props) => {
-  const { isThemeDark, isThemeMaryland, isThemeLight } = props;
-  if (isThemeDark) return token.color.black;
-  if (isThemeMaryland) return token.color.red;
-  if (isThemeLight) return token.color.gray.lightest;
-  return token.color.white;
-};
-const createAsset = ({ image }) => {
-  if (!image) return null;
-  return new ElementBuilder().withClassName("umd-hero-logo__asset").withChild(
-    imageContainer({
-      element: image,
-      isScaled: false
-    })
-  ).withStyles({
-    element: {
-      textAlign: "center",
-      display: "flex",
-      justifyContent: "center",
-      maxWidth: "800px",
-      margin: "0 auto",
-      marginBottom: token.spacing.xl,
-      ["& img"]: {
-        maxWidth: "100%",
-        maxHeight: "500px",
-        marginLeft: "auto",
-        marginRight: "auto"
-      }
-    }
-  }).build();
-};
-const createHeadline = (props) => {
-  const { headline, isThemeDark, isThemeMaryland } = props;
-  const finalIsThemeDark = isThemeDark || isThemeMaryland;
-  if (!headline) return null;
-  return new ElementBuilder(headline).styled(
-    Styles.typography.campaign.compose("large", {
-      theme: theme.fontColor(finalIsThemeDark)
-    })
-  ).withStyles({
-    element: {
-      textTransform: "uppercase"
-    },
-    siblingAfter: {
-      marginTop: token.spacing.sm
-    }
-  }).build();
-};
-const createText = (props) => {
-  const { isThemeDark, isThemeMaryland } = props;
-  const textLockupElement = large({
-    ribbon: props.eyebrow,
-    headlineComposite: createHeadline(props),
-    textLargest: props.text,
-    actions: props.actions,
-    isThemeDark: isThemeDark || isThemeMaryland || false
-  });
-  const textContent = new ElementBuilder().withClassName("umd-hero-logo__text-content").withChild(textLockupElement).withStyles({
-    element: {
-      [`& .${elementStyles.text.rich.simpleLargest.className}`]: {
-        color: token.color.gray.dark
-      }
-    }
-  }).build();
-  return new ElementBuilder().withClassName("umd-hero-logo__text").withChild(textContent).withStyles({
-    element: {
-      display: "flex",
-      justifyContent: "center",
-      textAlign: "center"
-    }
-  }).build();
-};
-const makeLock = (props) => {
-  const asset = createAsset(props);
-  const text = createText(props);
-  const builder = new ElementBuilder().styled(
-    Styles.layout.space.horizontal.small
-  );
-  if (asset) {
-    builder.withChild(asset);
-  }
-  builder.withChild(text);
-  return builder.build();
-};
-const logo = (props) => {
-  const { isThemeDark } = props;
-  const container = new ElementBuilder().withClassName("umd-hero-logo__container").withChild(makeLock(props)).withStyles({
-    element: {
-      padding: `${token.spacing["5xl"]} 0 ${token.spacing.lg}`,
-      backgroundColor: getBackgroundColor(props),
-      // Dark them should have additonal padding at the bottom
-      [`@container (${token.media.queries.desktop.min})`]: {
-        ...isThemeDark && {
-          paddingBottom: `${token.spacing["5xl"]}`
-        }
-      }
-    }
-  }).build();
-  return new ElementBuilder().withClassName("umd-hero-logo").withChild(container).withStyles({
-    element: {
-      containerType: "inline-size"
-    }
-  }).build();
-};
-export {
-  logo as default
-};
-//# sourceMappingURL=logo.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"logo.mjs","sources":["../../../source/composite/hero/logo.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { type HeroLogoProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst getBackgroundColor = (props: HeroLogoProps) => {\n  const { isThemeDark, isThemeMaryland, isThemeLight } = props;\n\n  if (isThemeDark) return token.color.black;\n  if (isThemeMaryland) return token.color.red;\n  if (isThemeLight) return token.color.gray.lightest;\n  return token.color.white;\n};\n\nconst createAsset = ({ image }: Pick<HeroLogoProps, 'image'>) => {\n  if (!image) return null;\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-logo__asset')\n    .withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    )\n    .withStyles({\n      element: {\n        textAlign: 'center',\n        display: 'flex',\n        justifyContent: 'center',\n        maxWidth: '800px',\n        margin: '0 auto',\n        marginBottom: token.spacing.xl,\n\n        ['& img']: {\n          maxWidth: '100%',\n          maxHeight: '500px',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n        },\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<HeroLogoProps, 'headline' | 'isThemeDark' | 'isThemeMaryland'>,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n  const finalIsThemeDark = isThemeDark || isThemeMaryland;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.campaign.compose('large', {\n        theme: theme.fontColor(finalIsThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n};\n\nconst createText = (\n  props: Omit<HeroLogoProps, 'image' | 'video' | 'includesAnimation' | 'logo'>,\n) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textContent = new ElementBuilder()\n    .withClassName('umd-hero-logo__text-content')\n    .withChild(textLockupElement)\n    .withStyles({\n      element: {\n        [`& .${elementStyles.text.rich.simpleLargest.className}`]: {\n          color: token.color.gray.dark,\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-logo__text')\n    .withChild(textContent)\n    .withStyles({\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        textAlign: 'center',\n      },\n    })\n    .build();\n};\n\nconst makeLock = (props: HeroLogoProps) => {\n  const asset = createAsset(props);\n  const text = createText(props);\n\n  const builder = new ElementBuilder().styled(\n    Styles.layout.space.horizontal.small,\n  );\n\n  if (asset) {\n    builder.withChild(asset);\n  }\n\n  builder.withChild(text);\n\n  return builder.build();\n};\n\nexport default (props: HeroLogoProps) => {\n  const { isThemeDark } = props;\n\n  const container = new ElementBuilder()\n    .withClassName('umd-hero-logo__container')\n    .withChild(makeLock(props))\n    .withStyles({\n      element: {\n        padding: `${token.spacing['5xl']} 0 ${token.spacing.lg}`,\n        backgroundColor: getBackgroundColor(props),\n\n        // Dark them should have additonal padding at the bottom\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isThemeDark && {\n            paddingBottom: `${token.spacing['5xl']}`,\n          }),\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-logo')\n    .withChild(container)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n      },\n    })\n    .build();\n};\n"],"names":["assets.image.background","textLockup.large"],"mappings":"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"}

package/dist/composite/hero/minimal.mjs

@@ -1,174 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-import * as token from "@universityofmaryland/web-token-library";
-import * as Styles from "@universityofmaryland/web-styles-library";
-import { theme } from "@universityofmaryland/web-utilities-library/theme";
-import "@universityofmaryland/web-styles-library/element";
-import "@universityofmaryland/web-styles-library/layout";
-import "@universityofmaryland/web-styles-library/animation";
-import "@universityofmaryland/web-styles-library/typography";
-import "@universityofmaryland/web-utilities-library/media";
-import "@universityofmaryland/web-utilities-library/dom";
-import "@universityofmaryland/web-icons-library/controls";
-import "@universityofmaryland/web-icons-library/communication";
-import "@universityofmaryland/web-icons-library/files";
-import "@universityofmaryland/web-icons-library/brand";
-import "@universityofmaryland/web-icons-library/arrows";
-import "../../atomic/animations/actions/indicator.mjs";
-import "../../atomic/animations/brand/chevron-scroll.mjs";
-import "../../atomic/animations/brand/card-stack.mjs";
-import imageContainer from "../../atomic/assets/image/background.mjs";
-import "@universityofmaryland/web-utilities-library/performance";
-import "@universityofmaryland/web-utilities-library/accessibility";
-import "@universityofmaryland/web-icons-library/location";
-import "@universityofmaryland/web-icons-library/calendar";
-import "../../atomic/layout/block/stacked.mjs";
-import "../../atomic/layout/overlay/modal.mjs";
-import "../../atomic/layout/person/columns.mjs";
-import "@universityofmaryland/web-icons-library/social";
-import "../../atomic/text-lockup/date.mjs";
-import large from "../../atomic/text-lockup/large.mjs";
-import "../../atomic/text-lockup/small.mjs";
-const createImageAsset = (image) => {
-  return imageContainer({
-    element: image,
-    isScaled: true,
-    isGifAllowed: true,
-    isShowCaption: true
-  });
-};
-const buildAssetChildren = ({
-  image
-}) => {
-  if (!image) return [];
-  return [createImageAsset(image)];
-};
-const getBorderColor = (isThemeDark, isThemeMaryland) => {
-  return isThemeDark || isThemeMaryland ? token.color.gold : token.color.red;
-};
-const getBackgroundColor = (props) => {
-  const { isThemeDark, isThemeLight, isThemeMaryland } = props;
-  if (isThemeDark) return token.color.black;
-  if (isThemeMaryland) return token.color.red;
-  if (isThemeLight) return token.color.gray.lightest;
-  return "transparent";
-};
-const createAsset = ({ image }) => {
-  const children = buildAssetChildren({ image });
-  if (children.length === 0) {
-    return null;
-  }
-  return new ElementBuilder().withClassName("umd-hero-minimal__asset").withChildren(...children).withStyles({
-    element: {
-      [`@container (${token.media.queries.tablet.min})`]: {
-        position: "absolute",
-        right: 0,
-        top: 0,
-        width: "50%",
-        height: "100%"
-      },
-      ["& img"]: {
-        [`@container (${token.media.queries.tablet.min})`]: {
-          objectFit: "cover",
-          objectPosition: "center",
-          height: "100%",
-          width: "100%"
-        }
-      }
-    }
-  }).build();
-};
-const createHeadline = (props) => {
-  const { headline, isThemeDark, isThemeMaryland } = props;
-  const finalIsThemeDark = isThemeDark || isThemeMaryland;
-  const characterCount = headline?.textContent?.trim().length || 0;
-  const isOverwriteHeadline = characterCount > 40;
-  if (!headline) return null;
-  return new ElementBuilder(headline).styled(
-    Styles.typography.campaign.compose("large", {
-      theme: theme.fontColor(finalIsThemeDark)
-    })
-  ).withStyles({
-    element: {
-      fontWeight: 800,
-      textTransform: "uppercase",
-      [`@container (${token.media.queries.desktop.min})`]: {
-        ...isOverwriteHeadline && {
-          fontSize: "64px"
-        }
-      }
-    },
-    siblingAfter: {
-      marginTop: token.spacing.sm
-    }
-  }).build();
-};
-const buildTextWrapperStyles = (isThemeDark, isThemeMaryland) => {
-  return {
-    element: {
-      paddingLeft: token.spacing.md,
-      borderLeft: `2px solid ${getBorderColor(isThemeDark, isThemeMaryland)}`,
-      [`@container (${token.media.queries.desktop.min})`]: {
-        paddingLeft: token.spacing.lg
-      }
-    }
-  };
-};
-const buildTextContainerStyles = (hasAsset) => {
-  return {
-    element: {
-      padding: `${token.spacing.xl} 0`,
-      [`@container (${token.media.queries.tablet.min})`]: {
-        ...hasAsset && {
-          padding: `${token.spacing["4xl"]} 0`,
-          width: `calc(50% - ${token.spacing["4xl"]})`
-        }
-      }
-    }
-  };
-};
-const createText = (props, hasAsset) => {
-  const { isThemeDark, isThemeMaryland } = props;
-  const textLockupElement = large({
-    eyebrow: props.eyebrow,
-    headlineComposite: createHeadline(props),
-    text: props.text,
-    actions: props.actions,
-    isThemeDark: isThemeDark || isThemeMaryland || false
-  });
-  const textWrapper = new ElementBuilder().withClassName("umd-hero-minimal__text-wrapper").withChild(textLockupElement).withStyles(buildTextWrapperStyles(isThemeDark, isThemeMaryland)).build();
-  const textContainer = new ElementBuilder().withClassName("umd-hero-minimal__text").withChild(textWrapper).withStyles(buildTextContainerStyles(hasAsset)).build();
-  return new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(textContainer).withStyles({
-    element: {
-      height: "100%",
-      width: "100%",
-      position: "relative"
-    }
-  }).build();
-};
-const minimal = (props) => {
-  const asset = createAsset(props);
-  const text = createText(props, !!asset);
-  const container = new ElementBuilder().withClassName("umd-hero-minimal").withChild(text).withStyles({
-    element: {
-      backgroundColor: getBackgroundColor(props),
-      position: "relative",
-      display: "flex",
-      containerType: "inline-size",
-      [`@container (${token.media.queries.large.max})`]: {
-        flexDirection: "column-reverse"
-      },
-      [`@container (${token.media.queries.tablet.min})`]: {
-        minHeight: "288px",
-        alignItems: "center"
-      }
-    }
-  });
-  if (asset) {
-    container.withChild(asset);
-  }
-  return container.build();
-};
-export {
-  minimal as default
-};
-//# sourceMappingURL=minimal.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"minimal.mjs","sources":["../../../source/composite/hero/minimal.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { type ElementModel } from '../../_types';\nimport { type HeroMinimalProps } from './_types';\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n};\n\nconst buildAssetChildren = ({\n  image,\n}: Pick<HeroMinimalProps, 'image'>): ElementModel<HTMLElement>[] => {\n  if (!image) return [];\n  return [createImageAsset(image)];\n};\n\nconst getBorderColor = (isThemeDark?: boolean, isThemeMaryland?: boolean) => {\n  return isThemeDark || isThemeMaryland ? token.color.gold : token.color.red;\n};\n\nconst getBackgroundColor = (props: HeroMinimalProps) => {\n  const { isThemeDark, isThemeLight, isThemeMaryland } = props;\n\n  if (isThemeDark) return token.color.black;\n  if (isThemeMaryland) return token.color.red;\n  if (isThemeLight) return token.color.gray.lightest;\n  return 'transparent';\n};\n\nconst createAsset = ({ image }: Pick<HeroMinimalProps, 'image'>) => {\n  const children = buildAssetChildren({ image });\n\n  if (children.length === 0) {\n    return null;\n  }\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-minimal__asset')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        [`@container (${token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          right: 0,\n          top: 0,\n          width: '50%',\n          height: '100%',\n        },\n\n        ['& img']: {\n          [`@container (${token.media.queries.tablet.min})`]: {\n            objectFit: 'cover',\n            objectPosition: 'center',\n            height: '100%',\n            width: '100%',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroMinimalProps,\n    'headline' | 'isThemeDark' | 'isThemeLight' | 'isThemeMaryland'\n  >,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n  const finalIsThemeDark = isThemeDark || isThemeMaryland;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 40;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.campaign.compose('large', {\n        theme: theme.fontColor(finalIsThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '64px',\n          }),\n        },\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n};\n\nconst buildTextWrapperStyles = (\n  isThemeDark?: boolean,\n  isThemeMaryland?: boolean,\n) => {\n  return {\n    element: {\n      paddingLeft: token.spacing.md,\n      borderLeft: `2px solid ${getBorderColor(isThemeDark, isThemeMaryland)}`,\n\n      [`@container (${token.media.queries.desktop.min})`]: {\n        paddingLeft: token.spacing.lg,\n      },\n    },\n  };\n};\n\nconst buildTextContainerStyles = (hasAsset: boolean) => {\n  return {\n    element: {\n      padding: `${token.spacing.xl} 0`,\n\n      [`@container (${token.media.queries.tablet.min})`]: {\n        ...(hasAsset && {\n          padding: `${token.spacing['4xl']} 0`,\n          width: `calc(50% - ${token.spacing['4xl']})`,\n        }),\n      },\n    },\n  };\n};\n\nconst createText = (props: HeroMinimalProps, hasAsset: boolean) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    eyebrow: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    text: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textWrapper = new ElementBuilder()\n    .withClassName('umd-hero-minimal__text-wrapper')\n    .withChild(textLockupElement)\n    .withStyles(buildTextWrapperStyles(isThemeDark, isThemeMaryland))\n    .build();\n\n  const textContainer = new ElementBuilder()\n    .withClassName('umd-hero-minimal__text')\n    .withChild(textWrapper)\n    .withStyles(buildTextContainerStyles(hasAsset))\n    .build();\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(textContainer)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n};\n\nexport default (props: HeroMinimalProps) => {\n  const asset = createAsset(props);\n  const text = createText(props, !!asset);\n\n  const container = new ElementBuilder()\n    .withClassName('umd-hero-minimal')\n    .withChild(text)\n    .withStyles({\n      element: {\n        backgroundColor: getBackgroundColor(props),\n        position: 'relative',\n        display: 'flex',\n        containerType: 'inline-size',\n\n        [`@container (${token.media.queries.large.max})`]: {\n          flexDirection: 'column-reverse',\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          minHeight: '288px',\n          alignItems: 'center',\n        },\n      },\n    });\n\n  if (asset) {\n    container.withChild(asset);\n  }\n\n  return container.build();\n};\n"],"names":["assets.image.background","textLockup.large"],"mappings":"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"}

package/dist/composite/hero/overlay.mjs

@@ -1,251 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-import * as token from "@universityofmaryland/web-token-library";
-import * as elementStyles from "@universityofmaryland/web-styles-library/element";
-import * as Styles from "@universityofmaryland/web-styles-library";
-import "@universityofmaryland/web-styles-library/layout";
-import "@universityofmaryland/web-styles-library/animation";
-import "@universityofmaryland/web-styles-library/typography";
-import "@universityofmaryland/web-utilities-library/media";
-import "@universityofmaryland/web-utilities-library/dom";
-import "@universityofmaryland/web-icons-library/controls";
-import "@universityofmaryland/web-icons-library/communication";
-import "@universityofmaryland/web-icons-library/files";
-import "@universityofmaryland/web-icons-library/brand";
-import "@universityofmaryland/web-icons-library/arrows";
-import "../../atomic/animations/actions/indicator.mjs";
-import "../../atomic/animations/brand/chevron-scroll.mjs";
-import "../../atomic/animations/brand/card-stack.mjs";
-import imageContainer from "../../atomic/assets/image/background.mjs";
-import "@universityofmaryland/web-utilities-library/performance";
-import placeholder from "../../atomic/assets/image/placeholder.mjs";
-import observedAutoPlay from "../../atomic/assets/video/observed-auto-play.mjs";
-import "@universityofmaryland/web-icons-library/location";
-import "@universityofmaryland/web-icons-library/calendar";
-import "@universityofmaryland/web-utilities-library/theme";
-import "../../atomic/layout/block/stacked.mjs";
-import "../../atomic/layout/overlay/modal.mjs";
-import "../../atomic/layout/person/columns.mjs";
-import "@universityofmaryland/web-icons-library/social";
-import "../../atomic/text-lockup/date.mjs";
-import large from "../../atomic/text-lockup/large.mjs";
-import "../../atomic/text-lockup/small.mjs";
-const ANIMATION_CONFIG = {
-  RESIZE: {
-    DURATION: "1.5s",
-    TRANSFORM: {
-      FROM: "scale(1.1)",
-      TO: "scale(1)"
-    }
-  },
-  SLIDE_UP: {
-    DURATION: "1.5s",
-    TRANSFORM: {
-      FROM: "translateY(25px)",
-      TO: "translateY(0)"
-    },
-    OPACITY: {
-      FROM: 0.2,
-      TO: 1
-    }
-  }
-};
-const keyFrameHeroResize = `
-  @keyframes hero-overlay-resize {
-    from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }
-    to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }
-  }
-`;
-const keyFrameHeroSlideUp = `
-  @keyframes hero-slide-up {
-    from {
-      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM};
-      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};
-    }
-    to {
-      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO};
-      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};
-    }
-  }
-`;
-const createVideoAsset = (video) => {
-  return observedAutoPlay({
-    video,
-    isScaled: true
-  });
-};
-const createImageAsset = (image) => {
-  return imageContainer({
-    element: image,
-    isScaled: true,
-    isGifAllowed: true,
-    isShowCaption: true
-  });
-};
-const buildAssetChildren = ({
-  image,
-  video
-}) => {
-  if (video && video instanceof HTMLVideoElement) {
-    return [createVideoAsset(video)];
-  }
-  if (image) {
-    return [createImageAsset(image)];
-  }
-  return [placeholder.fearlessForward()];
-};
-const createAsset = ({
-  image,
-  video,
-  includesAnimation
-}) => {
-  const children = buildAssetChildren({ image, video });
-  if (children.length === 0) {
-    return null;
-  }
-  return new ElementBuilder().withClassName("umd-hero-overlay__asset").withChildren(...children).withStyles({
-    element: {
-      [`@media (${token.media.queries.large.max})`]: {
-        [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {
-          minHeight: "56vw",
-          display: "grid"
-        }
-      },
-      [`@container (${token.media.queries.tablet.min})`]: {
-        position: "absolute",
-        width: "60%",
-        height: `calc(100% - ${token.spacing["5xl"]})`,
-        right: 0,
-        top: 0,
-        overflow: "visible",
-        ...includesAnimation && {
-          [`@media (prefers-reduced-motion: no-preference)`]: {
-            animation: `hero-overlay-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`
-          }
-        }
-      },
-      ["& img, & video"]: {
-        height: "100%",
-        minHeight: "300px"
-      }
-    }
-  }).build();
-};
-const createHeadline = (props) => {
-  const { headline } = props;
-  const characterCount = headline?.textContent?.trim().length || 0;
-  const isOverwriteHeadline = characterCount > 30;
-  if (!headline) return null;
-  return new ElementBuilder(headline).styled(Styles.typography.campaign.fonts.extraLarge).withStyles({
-    element: {
-      textTransform: "uppercase",
-      textWrap: "pretty",
-      color: token.color.white,
-      [`@container (${token.media.queries.desktop.min})`]: {
-        ...isOverwriteHeadline && {
-          fontSize: "80px"
-        }
-      }
-    },
-    siblingAfter: {
-      marginTop: token.spacing.md
-    }
-  }).build();
-};
-const createTextContent = (props) => {
-  const textLockupElement = large({
-    ribbon: props.eyebrow,
-    headlineComposite: createHeadline(props),
-    text: props.text,
-    actions: props.actions,
-    isThemeDark: true
-  });
-  return new ElementBuilder().withClassName("umd-hero-overlay__text-content").withChild(textLockupElement).withStyles({
-    element: {
-      [`@container (${token.media.queries.tablet.min})`]: {
-        maxWidth: "55%"
-      },
-      [`& .${elementStyles.text.rich.simpleLargeDark.className}`]: {
-        [`@container (${token.media.queries.tablet.min})`]: {
-          maxWidth: "60%"
-        }
-      }
-    }
-  }).build();
-};
-const createText = (props) => {
-  const { includesAnimation } = props;
-  const textContent = createTextContent(props);
-  const lock = new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(textContent).withStyles({
-    element: {
-      height: "100%",
-      width: "100%",
-      position: "relative"
-    }
-  }).build();
-  return new ElementBuilder().withClassName("umd-hero-overlay__text").withChild(lock).withStyles({
-    element: {
-      padding: `${token.spacing.lg} 0`,
-      display: "flex",
-      position: "relative",
-      zIndex: 999,
-      width: "100%",
-      [`@container (${token.media.queries.tablet.min})`]: {
-        padding: `${token.spacing["5xl"]} 0`,
-        ...includesAnimation && {
-          [`@media (prefers-reduced-motion: no-preference)`]: {
-            animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`
-          }
-        }
-      }
-    }
-  }).build();
-};
-const overlay = (props) => {
-  const text = createText(props);
-  const asset = createAsset(props);
-  const container = new ElementBuilder().withClassName("umd-hero-overlay__container").withChild(text).withStyles({
-    element: {
-      position: "relative",
-      backgroundColor: token.color.black,
-      overflow: "clip",
-      [`@container (${token.media.queries.large.max})`]: {
-        display: "flex",
-        flexDirection: "column-reverse"
-      },
-      [`@container (${token.media.queries.tablet.min})`]: {
-        minHeight: "640px",
-        display: "flex",
-        alignItems: "center",
-        ["&:before"]: {
-          content: '""',
-          position: "absolute",
-          left: 0,
-          right: "50px",
-          top: 0,
-          height: "100%",
-          background: "linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 0) 75%)",
-          zIndex: 999
-        }
-      },
-      [`@container (${token.media.queries.desktop.min})`]: {
-        minHeight: "764px"
-      }
-    }
-  });
-  if (asset) {
-    container.withChild(asset);
-  }
-  const containerBuilt = container.build();
-  const composite = new ElementBuilder().withClassName("umd-hero-overlay").withChild(containerBuilt).withStyles({
-    element: {
-      containerType: "inline-size"
-    }
-  }).build();
-  composite.styles += keyFrameHeroResize;
-  composite.styles += keyFrameHeroSlideUp;
-  return composite;
-};
-export {
-  overlay as default
-};
-//# sourceMappingURL=overlay.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"overlay.mjs","sources":["../../../source/composite/hero/overlay.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { type ElementModel } from '../../_types';\nimport { type HeroOverlayProps } from './_types';\n\nconst ANIMATION_CONFIG = {\n  RESIZE: {\n    DURATION: '1.5s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n  SLIDE_UP: {\n    DURATION: '1.5s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n} as const;\n\nconst keyFrameHeroResize = `\n  @keyframes hero-overlay-resize {\n    from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }\n    to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }\n  }\n`;\n\nconst keyFrameHeroSlideUp = `\n  @keyframes hero-slide-up {\n    from {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n    }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n};\n\nconst buildAssetChildren = ({\n  image,\n  video,\n}: Pick<HeroOverlayProps, 'image' | 'video'>): ElementModel<HTMLElement>[] => {\n  if (video && video instanceof HTMLVideoElement) {\n    return [createVideoAsset(video)];\n  }\n\n  if (image) {\n    return [createImageAsset(image)];\n  }\n\n  return [assets.image.placeholder.fearlessForward()];\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n}: Pick<HeroOverlayProps, 'image' | 'video' | 'includesAnimation'>) => {\n  const children = buildAssetChildren({ image, video });\n\n  if (children.length === 0) {\n    return null;\n  }\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-overlay__asset')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        [`@media (${token.media.queries.large.max})`]: {\n          [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {\n            minHeight: '56vw',\n            display: 'grid',\n          },\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          width: '60%',\n          height: `calc(100% - ${token.spacing['5xl']})`,\n          right: 0,\n          top: 0,\n          overflow: 'visible',\n\n          ...(includesAnimation && {\n            [`@media (prefers-reduced-motion: no-preference)`]: {\n              animation: `hero-overlay-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`,\n            },\n          }),\n        },\n\n        ['& img, & video']: {\n          height: '100%',\n          minHeight: '300px',\n        },\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<HeroOverlayProps, 'headline'>,\n): ElementModel<HTMLElement> | null => {\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  return new ElementBuilder(headline)\n    .styled(Styles.typography.campaign.fonts.extraLarge)\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n        textWrap: 'pretty',\n        color: token.color.white,\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '80px',\n          }),\n        },\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .build();\n};\n\nconst createTextContent = (\n  props: Pick<HeroOverlayProps, 'eyebrow' | 'headline' | 'text' | 'actions'>,\n) => {\n  const textLockupElement = textLockup.large({\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    text: props.text,\n    actions: props.actions,\n    isThemeDark: true,\n  });\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-overlay__text-content')\n    .withChild(textLockupElement)\n    .withStyles({\n      element: {\n        [`@container (${token.media.queries.tablet.min})`]: {\n          maxWidth: '55%',\n        },\n\n        [`& .${elementStyles.text.rich.simpleLargeDark.className}`]: {\n          [`@container (${token.media.queries.tablet.min})`]: {\n            maxWidth: '60%',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst createText = (\n  props: Pick<\n    HeroOverlayProps,\n    'eyebrow' | 'headline' | 'text' | 'actions' | 'includesAnimation'\n  >,\n) => {\n  const { includesAnimation } = props;\n  const textContent = createTextContent(props);\n\n  const lock = new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(textContent)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-overlay__text')\n    .withChild(lock)\n    .withStyles({\n      element: {\n        padding: `${token.spacing.lg} 0`,\n        display: 'flex',\n        position: 'relative',\n        zIndex: 999,\n        width: '100%',\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          padding: `${token.spacing['5xl']} 0`,\n\n          ...(includesAnimation && {\n            [`@media (prefers-reduced-motion: no-preference)`]: {\n              animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n            },\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nexport default (props: HeroOverlayProps) => {\n  const text = createText(props);\n  const asset = createAsset(props);\n\n  const container = new ElementBuilder()\n    .withClassName('umd-hero-overlay__container')\n    .withChild(text)\n    .withStyles({\n      element: {\n        position: 'relative',\n        backgroundColor: token.color.black,\n        overflow: 'clip',\n\n        [`@container (${token.media.queries.large.max})`]: {\n          display: 'flex',\n          flexDirection: 'column-reverse',\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          minHeight: '640px',\n          display: 'flex',\n          alignItems: 'center',\n\n          ['&:before']: {\n            content: '\"\"',\n            position: 'absolute',\n            left: 0,\n            right: '50px',\n            top: 0,\n            height: '100%',\n            background:\n              'linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 0) 75%)',\n            zIndex: 999,\n          },\n        },\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          minHeight: '764px',\n        },\n      },\n    });\n\n  if (asset) {\n    container.withChild(asset);\n  }\n\n  const containerBuilt = container.build();\n\n  const composite = new ElementBuilder()\n    .withClassName('umd-hero-overlay')\n    .withChild(containerBuilt)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n      },\n    })\n    .build();\n\n  composite.styles += keyFrameHeroResize;\n  composite.styles += keyFrameHeroSlideUp;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","textLockup.large"],"mappings":"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"}