@universityofmaryland/web-elements-library 1.4.7 → 1.5.0-beta.0

package/dist/composite/quote/featured.js

@@ -1,265 +1,217 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
+const token = require("@universityofmaryland/web-styles-library/token");
+const media = require("@universityofmaryland/web-utilities-library/media");
+const index = require("../../model/elements/index.js");
 const inline = require("./inline.js");
-const text = require("./elements/text.js");
-const create = require("../../utilities/markup/create.js");
-require("../../node_modules/postcss/lib/postcss.js");
-require("../../node_modules/postcss-nesting/dist/index.js");
-require("../../node_modules/postcss-js/index.js");
-const SMALL = 500;
-const MEDIUM = 900;
-const BACKGROUND_TEXTURE_LIGHT = `<svg id="quote_background_light" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 850.5 532.1"><path d="M.3,0h332.7L.3,326.6V0Z" fill="#757575" fill-rule="evenodd" isolation="isolate" opacity=".04" stroke-width="0"/><path d="M517.9,532.1h332.7L308.6,0H0v23.6l517.9,508.5Z" fill="#000" fill-rule="evenodd" isolation="isolate" opacity=".04" stroke-width="0"/></svg>`;
-const BACKGROUND_TEXTURE_DARK = `<svg id="quote_background_dark" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 614.86 300.65"><defs><style>.cls-1{opacity:.25;}.cls-1,.cls-2{fill:#757575;fill-rule:evenodd;isolation:isolate;}.cls-2{opacity:.1;}</style></defs><path class="cls-2" d="m.27,0h332.67L27.46,299.93H.27V0Z"/><path class="cls-1" d="m0,0h308.65l306.21,300.65h-332.67L0,23.59V0Z"/></svg>`;
-const ELEMENT_NAME = "umd-element-quote-featured";
-const ATTRIBUTE_HAS_IMAGE = "has-image";
-const ATTRIBUTE_TRANSPARENT = "transparent";
-const ATTRIBUTE_THEME = "theme";
-const THEME_DARK = "dark";
-const THEME_MARYLAND = "maryland";
-const IS_THEME_DARK = `[${ATTRIBUTE_THEME}="${THEME_DARK}"]`;
-const IS_THEME_MARYLAND = `[${ATTRIBUTE_THEME}="${THEME_MARYLAND}"]`;
-const IS_WITH_IMAGE = `[${ATTRIBUTE_HAS_IMAGE}]`;
-const IS_TRANSPARENT = `[${ATTRIBUTE_TRANSPARENT}="true"]`;
-const QUOTE_FEATURED_CONTAINER = "quote-featured-container";
-const QUOTE_FEATURED_CONTAINER_SPACER = "quote-featured-container-spacer";
-const QUOTE_FEATURED_CONTAINER_WRAPPER = "quote-featured-container-wrapper";
-const QUOTE_FEATURED_TEXTURE = "quote-featured-texture";
-const QUOTE_FEATURED_TEXT = "quote-featured-text";
-const QUOTE_FEATURED_IMAGE = "quote-featured-image";
-const QUOTE_FEATURED_IMAGE_ACTIONS = "quote-featured-image-actions";
-const OVERWRITE_WITH_IMAGE_WRAPPER = `.${QUOTE_FEATURED_CONTAINER}${IS_WITH_IMAGE} .${QUOTE_FEATURED_CONTAINER_WRAPPER}`;
-const OVERWRITE_WITH_IMAGE_QUOTE_TEXT_CONTAINER = `.${QUOTE_FEATURED_CONTAINER}${IS_WITH_IMAGE} .${text.elements.container}`;
-const OVERWRITE_WITH_IMAGE_QUOTE_TEXT = `.${QUOTE_FEATURED_CONTAINER}${IS_WITH_IMAGE} .${text.elements.quoteWrapper}`;
-const OVERWRITE_THEME_DARK_WRAPPER = `.${QUOTE_FEATURED_CONTAINER}${IS_THEME_DARK} .${QUOTE_FEATURED_CONTAINER_WRAPPER}`;
-const OVERWRITE_THEME_MARYLAND_WRAPPER = `.${QUOTE_FEATURED_CONTAINER}${IS_THEME_MARYLAND} .${QUOTE_FEATURED_CONTAINER_WRAPPER}`;
-const OVERWRITE_TRANSPARENT_CONTAINER = `.${QUOTE_FEATURED_CONTAINER}${IS_TRANSPARENT}`;
-const OVERWRITE_TRANSPARENT_WRAPPER = `${OVERWRITE_TRANSPARENT_CONTAINER} .${QUOTE_FEATURED_CONTAINER_WRAPPER}`;
-const OVERWRITE_TRANSPARENT_SPACER = `${OVERWRITE_TRANSPARENT_CONTAINER} .${QUOTE_FEATURED_CONTAINER_SPACER}`;
-const OVERWRITE_TRANSPARENT_TEXT = `${OVERWRITE_TRANSPARENT_CONTAINER} .${QUOTE_FEATURED_TEXT}`;
-const OverwriteTransparent = `
-  ${OVERWRITE_TRANSPARENT_WRAPPER} {
-    background-color: transparent;
-  }
-
-  ${OVERWRITE_TRANSPARENT_TEXT},
-  ${OVERWRITE_TRANSPARENT_SPACER} {
-    padding: 0;
-  }
-`;
-const OverwriteTheme = `
-  ${OVERWRITE_THEME_DARK_WRAPPER} {
-    background-color: ${Styles.token.color.black};
-  }
-
-  ${OVERWRITE_THEME_MARYLAND_WRAPPER} {
-    background-color: ${Styles.token.color.red};
-  }
-`;
-const OverwriteWithImage = `
-  ${OVERWRITE_WITH_IMAGE_WRAPPER} {
-    display: flex;
-    flex-direction: column;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {
-    ${OVERWRITE_WITH_IMAGE_WRAPPER} {
-      display: flex;
-      flex-direction: row;
-    }
-  }
-
-  ${OVERWRITE_WITH_IMAGE_QUOTE_TEXT_CONTAINER} {
-    padding-top: 0;
-  }
-
-  ${OVERWRITE_WITH_IMAGE_QUOTE_TEXT} span {
-    display: none !important;
-  }
-`;
-const ImageContainer = `
-  .${QUOTE_FEATURED_IMAGE} {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: -${Styles.token.spacing.lg};
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {
-    .${QUOTE_FEATURED_IMAGE} {
-      padding: 0 ${Styles.token.spacing.lg};
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px) {
-    .${QUOTE_FEATURED_IMAGE} {
-      margin: 0 auto;
-      margin-top: -${Styles.token.spacing["8xl"]};
-      max-width: 300px;
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {
-    .${QUOTE_FEATURED_IMAGE}[data-aligned="center"] {
-      margin-top: 0;
-      justify-content: center;
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {
-    .${QUOTE_FEATURED_IMAGE} {
-      padding-left: ${Styles.token.spacing["6xl"]};
-      width: calc(300px + ${Styles.token.spacing["6xl"]});
-    }
-  }
-
-  .${QUOTE_FEATURED_IMAGE_ACTIONS} {
-    margin-top: ${Styles.token.spacing.sm};
-  }
-
-  .${QUOTE_FEATURED_IMAGE_ACTIONS} * + * {
-    margin-top: ${Styles.token.spacing.min};
-  }
-`;
-const TextContainer = `
-  .${QUOTE_FEATURED_TEXT} {
-    padding: ${Styles.token.spacing.lg};
-    position: relative;
-    width: 100%;
-  }
-  
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    .${QUOTE_FEATURED_TEXT} {
-      padding: ${Styles.token.spacing["2xl"]} ${Styles.token.spacing["2xl"]} ${Styles.token.spacing["2xl"]} ${Styles.token.spacing["2xl"]};
-    }
-  }
-  
-  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {
-    .${QUOTE_FEATURED_TEXT} {
-      padding: ${Styles.token.spacing["4xl"]} ${Styles.token.spacing["4xl"]} ${Styles.token.spacing["4xl"]} ${Styles.token.spacing["4xl"]};
-    }
-  }
-`;
-const TextureStyles = `
-  .${QUOTE_FEATURED_TEXTURE} {
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .${QUOTE_FEATURED_TEXTURE} > img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 70%;
-    height: 120%;
-    object-fit: cover;
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${MEDIUM - 1}px) {
-    .${QUOTE_FEATURED_TEXTURE} {
-      display: none;
+const image = require("./elements/image.js");
+require("@universityofmaryland/web-styles-library/typography");
+require("@universityofmaryland/web-icons-library/brand");
+const _constants = require("./_constants.js");
+const action = require("./elements/action.js");
+const animation = require("./helper/animation.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
     }
   }
-`;
-const Wrapper = `
-  .${QUOTE_FEATURED_CONTAINER_WRAPPER} {
-    background-color: ${Styles.token.color.gray.lightest};
-    position: relative;
-  }
-`;
-let STYLES_QUOTE_FEATURED_ELEMENT = `
-  .${QUOTE_FEATURED_CONTAINER} {
-    container: ${ELEMENT_NAME} / inline-size;
-  }
-
-  .${QUOTE_FEATURED_CONTAINER_SPACER} {
-    padding-top: ${Styles.token.spacing.lg};
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px) {
-    .${QUOTE_FEATURED_CONTAINER_SPACER} {
-      padding-top: ${Styles.token.spacing["8xl"]};
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const BACKGROUND_TEXTURE_LIGHT = `<svg id="quote_background_light" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 850.5 532.1"><path d="M.3,0h332.7L.3,326.6V0Z" fill="#757575" fill-rule="evenodd" isolation="isolate" opacity=".04" stroke-width="0"/><path d="M517.9,532.1h332.7L308.6,0H0v23.6l517.9,508.5Z" fill="#000" fill-rule="evenodd" isolation="isolate" opacity=".04" stroke-width="0"/></svg>`;
+const BACKGROUND_TEXTURE_DARK = `<svg id="quote_background_dark" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 614.86 300.65"><defs><style>.cls-1{opacity:.25;}.cls-1,.cls-2{fill:#757575;fill-rule:evenodd;isolation:isolate;}.cls-2{opacity:.1;}</style></defs><path class="cls-2" d="m.27,0h332.67L27.46,299.93H.27V0Z"/><path class="cls-1" d="m0,0h308.65l306.21,300.65h-332.67L0,23.59V0Z"/></svg>`;
+const createImageContainer = (props) => {
+  const { image: image$1, action: action$1 } = props;
+  const getContainerChildren = () => {
+    const containerChildren2 = [];
+    if (image$1) {
+      const imageElement = image({
+        ...props,
+        isTypeFeatured: true,
+        image: image$1
+      });
+      containerChildren2.push(imageElement);
     }
-  }
-
-  ${Wrapper}
-  ${TextureStyles}
-  ${TextContainer}
-  ${ImageContainer}
-  ${OverwriteTheme}
-  ${OverwriteWithImage}
-  ${OverwriteTransparent}
-`;
-const CreateImageContainer = ({
-  image,
-  action
-}) => {
-  const container = document.createElement("div");
-  container.classList.add(QUOTE_FEATURED_IMAGE);
-  container.appendChild(image);
-  if (action) {
-    action.classList.add(QUOTE_FEATURED_IMAGE_ACTIONS);
-    container.appendChild(action);
-  }
-  if (window.innerWidth >= MEDIUM) {
-    if (image instanceof HTMLImageElement) {
-      image.addEventListener("load", () => {
-        const parent = image.parentElement;
-        if (!parent) return;
-        const aspectRatio = image.offsetHeight / parent.offsetHeight;
-        if (aspectRatio < 0.5) {
-          container.setAttribute("data-aligned", "center");
-        }
+    if (action$1) {
+      const actionElement = action({
+        isTypeFeatured: true,
+        action: action$1
       });
+      containerChildren2.push(actionElement);
     }
+    return containerChildren2;
+  };
+  const createImageContainerElement = () => {
+    return index.createDiv({
+      className: "quote-featured-image",
+      children: containerChildren,
+      elementStyles: {
+        element: {
+          position: "relative",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          marginTop: `-${token__namespace.spacing.lg}`,
+          ["&[align-center=true]"]: {
+            marginTop: "0",
+            justifyContent: "center"
+          },
+          [`@container (max-width: ${_constants.SMALL - 1}px)`]: {
+            padding: `0 ${token__namespace.spacing.lg}`
+          },
+          [`@container (min-width: ${_constants.SMALL}px) and (max-width: ${_constants.MEDIUM - 1}px)`]: {
+            margin: "0 auto",
+            marginTop: `-${token__namespace.spacing["8xl"]}`,
+            maxWidth: "300px"
+          },
+          [`@container (min-width: ${_constants.MEDIUM}px)`]: {
+            paddingLeft: token__namespace.spacing["6xl"],
+            width: `calc(300px + ${token__namespace.spacing["6xl"]})`
+          }
+        }
+      }
+    });
+  };
+  const containerChildren = getContainerChildren();
+  const container = createImageContainerElement();
+  if (window.innerWidth >= _constants.MEDIUM && image$1 instanceof HTMLImageElement) {
+    image$1.addEventListener("load", () => {
+      const parent = container;
+      if (!parent) return;
+      const aspectRatio = image$1.offsetHeight / parent.element.offsetHeight;
+      if (aspectRatio < 0.5) {
+        container.element.setAttribute("align-center", "true");
+      }
+    });
   }
   return container;
 };
-const CreateTextureContainer = ({
+const createTextureContainer = ({
   isThemeDark,
   isThemeMaryland
 }) => {
-  const container = document.createElement("div");
   const isDarkText = isThemeDark || isThemeMaryland;
-  const backgroundTexture = create.imageFromSvg({
+  const backgroundTexture = media.imageFromSvg({
     SVG: isDarkText ? BACKGROUND_TEXTURE_DARK : BACKGROUND_TEXTURE_LIGHT
   });
-  container.classList.add(QUOTE_FEATURED_TEXTURE);
-  container.appendChild(backgroundTexture);
+  const backgroundTextureElement = index.create({
+    element: backgroundTexture,
+    className: "quote-background-texture"
+  });
+  const container = index.createDiv({
+    className: "quote-featured-texture",
+    children: [backgroundTextureElement],
+    elementStyles: {
+      element: {
+        overflow: "hidden",
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        [`& > img`]: {
+          position: "absolute",
+          top: "0",
+          left: "0",
+          width: "70%",
+          height: "120%",
+          objectFit: "cover"
+        },
+        [`@container (max-width: ${_constants.MEDIUM - 1}px)`]: {
+          display: "none"
+        }
+      }
+    }
+  });
   return container;
 };
 const featured = (props) => {
-  const { isThemeDark, isThemeMaryland, action, image, isTransparent } = props;
-  const container = document.createElement("div");
-  const spacer = document.createElement("div");
-  const wrapper = document.createElement("div");
-  const textureContainer = CreateTextureContainer(props);
-  const textContainer = document.createElement("div");
-  const hasImage = !!image;
-  const inlineActions = hasImage ? null : action;
-  const inlineProps = { ...props, action: inlineActions, image: null };
-  const inlineQuote = inline(inlineProps);
-  let styles = STYLES_QUOTE_FEATURED_ELEMENT;
-  wrapper.classList.add(QUOTE_FEATURED_CONTAINER_WRAPPER);
-  textContainer.classList.add(QUOTE_FEATURED_TEXT);
-  textContainer.appendChild(inlineQuote.element);
-  if (!isTransparent) wrapper.appendChild(textureContainer);
-  if (hasImage) wrapper.appendChild(CreateImageContainer({ image, action }));
-  wrapper.appendChild(textContainer);
-  styles += inlineQuote.styles;
-  spacer.classList.add(QUOTE_FEATURED_CONTAINER_SPACER);
-  spacer.appendChild(wrapper);
-  container.classList.add(QUOTE_FEATURED_CONTAINER);
-  container.appendChild(spacer);
-  if (isThemeDark) container.setAttribute("theme", THEME_DARK);
-  if (isThemeMaryland) container.setAttribute("theme", THEME_MARYLAND);
-  if (hasImage) container.setAttribute(ATTRIBUTE_HAS_IMAGE, "");
-  if (isTransparent) container.setAttribute(ATTRIBUTE_TRANSPARENT, "true");
-  return { element: container, styles };
+  const { isThemeDark, isThemeMaryland, image: image2, isTransparent } = props;
+  const wrapperChildren = [];
+  const inlineQuote = inline(props);
+  const textContainer = index.createDiv({
+    className: "quote-featured-text",
+    children: [inlineQuote],
+    elementStyles: {
+      element: {
+        padding: token__namespace.spacing.lg,
+        position: "relative",
+        width: "100%",
+        ...isTransparent && { padding: "0" },
+        [`@container (min-width: ${_constants.SMALL}px)`]: {
+          padding: `${token__namespace.spacing["2xl"]}`
+        },
+        [`@container (min-width: ${_constants.MEDIUM}px)`]: {
+          padding: `${token__namespace.spacing["4xl"]}`
+        }
+      }
+    }
+  });
+  if (!isTransparent) {
+    wrapperChildren.push(createTextureContainer(props));
+  }
+  if (image2) {
+    wrapperChildren.push(createImageContainer(props));
+  }
+  wrapperChildren.push(textContainer);
+  const wrapper = index.createDiv({
+    className: "quote-featured-container-wrapper",
+    children: wrapperChildren,
+    elementStyles: {
+      element: {
+        backgroundColor: token__namespace.color.gray.lightest,
+        position: "relative",
+        ...isThemeDark && { backgroundColor: token__namespace.color.black },
+        ...isThemeMaryland && { backgroundColor: token__namespace.color.red },
+        ...isTransparent && { backgroundColor: "transparent" },
+        ...image2 && {
+          display: "flex",
+          flexDirection: "column",
+          [`@container (min-width: ${_constants.MEDIUM}px)`]: {
+            display: "flex",
+            flexDirection: "row"
+          }
+        }
+      }
+    }
+  });
+  const spacer = index.createDiv({
+    className: "quote-featured-container-spacer",
+    children: [wrapper],
+    elementStyles: {
+      element: {
+        paddingTop: token__namespace.spacing.lg,
+        ...isTransparent && { padding: "0" },
+        [`@container (min-width: ${_constants.SMALL}px) and (max-width: ${_constants.MEDIUM - 1}px)`]: {
+          ...image2 && {
+            paddingTop: token__namespace.spacing["8xl"]
+          }
+        }
+      }
+    }
+  });
+  const container = index.createDiv({
+    className: "quote-featured-container",
+    children: [spacer],
+    elementStyles: {
+      element: {
+        containerType: "inline-size"
+      }
+    }
+  });
+  animation.quoteAnimation({
+    ...props,
+    quoteElement: container
+  });
+  return container;
 };
 module.exports = featured;
 //# sourceMappingURL=featured.js.map

package/dist/composite/quote/featured.js.map

@@ -1 +1 @@
-{"version":3,"file":"featured.js","sources":["../../../source/composite/quote/featured.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport InlineQuote, { TypeInlineInline } from './inline';\nimport QuoteText from './elements/text';\nimport * as Utility from 'utilities';\n\ntype TypeQuoteFeatured = TypeInlineInline & {\n  isTransparent: boolean;\n  isThemeDark?: boolean;\n  isThemeMaryland?: boolean;\n};\n\ntype TypeQuoteFeaturedText = TypeQuoteFeatured & {\n  hasImage: boolean;\n  styles: string;\n};\n\nconst SMALL = 500;\nconst MEDIUM = 900;\n\nconst BACKGROUND_TEXTURE_LIGHT = `<svg id=\"quote_background_light\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 850.5 532.1\"><path d=\"M.3,0h332.7L.3,326.6V0Z\" fill=\"#757575\" fill-rule=\"evenodd\" isolation=\"isolate\" opacity=\".04\" stroke-width=\"0\"/><path d=\"M517.9,532.1h332.7L308.6,0H0v23.6l517.9,508.5Z\" fill=\"#000\" fill-rule=\"evenodd\" isolation=\"isolate\" opacity=\".04\" stroke-width=\"0\"/></svg>`;\nconst BACKGROUND_TEXTURE_DARK = `<svg id=\"quote_background_dark\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 614.86 300.65\"><defs><style>.cls-1{opacity:.25;}.cls-1,.cls-2{fill:#757575;fill-rule:evenodd;isolation:isolate;}.cls-2{opacity:.1;}</style></defs><path class=\"cls-2\" d=\"m.27,0h332.67L27.46,299.93H.27V0Z\"/><path class=\"cls-1\" d=\"m0,0h308.65l306.21,300.65h-332.67L0,23.59V0Z\"/></svg>`;\n\nconst ELEMENT_NAME = 'umd-element-quote-featured';\nconst ATTRIBUTE_HAS_IMAGE = 'has-image';\nconst ATTRIBUTE_TRANSPARENT = 'transparent';\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\nconst THEME_MARYLAND = 'maryland';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\nconst IS_THEME_MARYLAND = `[${ATTRIBUTE_THEME}=\"${THEME_MARYLAND}\"]`;\nconst IS_WITH_IMAGE = `[${ATTRIBUTE_HAS_IMAGE}]`;\nconst IS_TRANSPARENT = `[${ATTRIBUTE_TRANSPARENT}=\"true\"]`;\n\nconst QUOTE_FEATURED_CONTAINER = 'quote-featured-container';\nconst QUOTE_FEATURED_CONTAINER_SPACER = 'quote-featured-container-spacer';\nconst QUOTE_FEATURED_CONTAINER_WRAPPER = 'quote-featured-container-wrapper';\nconst QUOTE_FEATURED_TEXTURE = 'quote-featured-texture';\nconst QUOTE_FEATURED_TEXT = 'quote-featured-text';\nconst QUOTE_FEATURED_IMAGE = 'quote-featured-image';\nconst QUOTE_FEATURED_IMAGE_ACTIONS = 'quote-featured-image-actions';\n\nconst OVERWRITE_WITH_IMAGE_WRAPPER = `.${QUOTE_FEATURED_CONTAINER}${IS_WITH_IMAGE} .${QUOTE_FEATURED_CONTAINER_WRAPPER}`;\nconst OVERWRITE_WITH_IMAGE_QUOTE_TEXT_CONTAINER = `.${QUOTE_FEATURED_CONTAINER}${IS_WITH_IMAGE} .${QuoteText.elements.container}`;\nconst OVERWRITE_WITH_IMAGE_QUOTE_TEXT = `.${QUOTE_FEATURED_CONTAINER}${IS_WITH_IMAGE} .${QuoteText.elements.quoteWrapper}`;\n\nconst OVERWRITE_THEME_DARK_WRAPPER = `.${QUOTE_FEATURED_CONTAINER}${IS_THEME_DARK} .${QUOTE_FEATURED_CONTAINER_WRAPPER}`;\nconst OVERWRITE_THEME_MARYLAND_WRAPPER = `.${QUOTE_FEATURED_CONTAINER}${IS_THEME_MARYLAND} .${QUOTE_FEATURED_CONTAINER_WRAPPER}`;\n\nconst OVERWRITE_TRANSPARENT_CONTAINER = `.${QUOTE_FEATURED_CONTAINER}${IS_TRANSPARENT}`;\nconst OVERWRITE_TRANSPARENT_WRAPPER = `${OVERWRITE_TRANSPARENT_CONTAINER} .${QUOTE_FEATURED_CONTAINER_WRAPPER}`;\nconst OVERWRITE_TRANSPARENT_SPACER = `${OVERWRITE_TRANSPARENT_CONTAINER} .${QUOTE_FEATURED_CONTAINER_SPACER}`;\nconst OVERWRITE_TRANSPARENT_TEXT = `${OVERWRITE_TRANSPARENT_CONTAINER} .${QUOTE_FEATURED_TEXT}`;\n\n// prettier-ignore\nconst OverwriteTransparent = `\n  ${OVERWRITE_TRANSPARENT_WRAPPER} {\n    background-color: transparent;\n  }\n\n  ${OVERWRITE_TRANSPARENT_TEXT},\n  ${OVERWRITE_TRANSPARENT_SPACER} {\n    padding: 0;\n  }\n`;\n\n// prettier-ignore\nconst OverwriteTheme = `\n  ${OVERWRITE_THEME_DARK_WRAPPER} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_MARYLAND_WRAPPER} {\n    background-color: ${token.color.red};\n  }\n`;\n\n// prettier-ignore\nconst OverwriteWithImage = `\n  ${OVERWRITE_WITH_IMAGE_WRAPPER} {\n    display: flex;\n    flex-direction: column;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    ${OVERWRITE_WITH_IMAGE_WRAPPER} {\n      display: flex;\n      flex-direction: row;\n    }\n  }\n\n  ${OVERWRITE_WITH_IMAGE_QUOTE_TEXT_CONTAINER} {\n    padding-top: 0;\n  }\n\n  ${OVERWRITE_WITH_IMAGE_QUOTE_TEXT} span {\n    display: none !important;\n  }\n`;\n\n// prettier-ignore\nconst ImageContainer = `\n  .${QUOTE_FEATURED_IMAGE} {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin-top: -${token.spacing.lg};\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {\n    .${QUOTE_FEATURED_IMAGE} {\n      padding: 0 ${token.spacing.lg};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px) {\n    .${QUOTE_FEATURED_IMAGE} {\n      margin: 0 auto;\n      margin-top: -${token.spacing['8xl']};\n      max-width: 300px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${QUOTE_FEATURED_IMAGE}[data-aligned=\"center\"] {\n      margin-top: 0;\n      justify-content: center;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${QUOTE_FEATURED_IMAGE} {\n      padding-left: ${token.spacing['6xl']};\n      width: calc(300px + ${token.spacing['6xl']});\n    }\n  }\n\n  .${QUOTE_FEATURED_IMAGE_ACTIONS} {\n    margin-top: ${token.spacing.sm};\n  }\n\n  .${QUOTE_FEATURED_IMAGE_ACTIONS} * + * {\n    margin-top: ${token.spacing.min};\n  }\n`;\n\n// prettier-ignore\nconst TextContainer = `\n  .${QUOTE_FEATURED_TEXT} {\n    padding: ${token.spacing.lg};\n    position: relative;\n    width: 100%;\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${QUOTE_FEATURED_TEXT} {\n      padding: ${token.spacing['2xl']} ${token.spacing['2xl']} ${token.spacing['2xl']} ${token.spacing['2xl']};\n    }\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${QUOTE_FEATURED_TEXT} {\n      padding: ${token.spacing['4xl']} ${token.spacing['4xl']} ${token.spacing['4xl']} ${token.spacing['4xl']};\n    }\n  }\n`;\n\n// prettier-ignore\nconst TextureStyles = `\n  .${QUOTE_FEATURED_TEXTURE} {\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .${QUOTE_FEATURED_TEXTURE} > img {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 70%;\n    height: 120%;\n    object-fit: cover;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDIUM - 1}px) {\n    .${QUOTE_FEATURED_TEXTURE} {\n      display: none;\n    }\n  }\n`;\n\n// prettier-ignore\nconst Wrapper = `\n  .${QUOTE_FEATURED_CONTAINER_WRAPPER} {\n    background-color: ${token.color.gray.lightest};\n    position: relative;\n  }\n`;\n\n// prettier-ignore\nlet STYLES_QUOTE_FEATURED_ELEMENT = `\n  .${QUOTE_FEATURED_CONTAINER} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${QUOTE_FEATURED_CONTAINER_SPACER} {\n    padding-top: ${token.spacing.lg};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px) {\n    .${QUOTE_FEATURED_CONTAINER_SPACER} {\n      padding-top: ${token.spacing['8xl']};\n    }\n  }\n\n  ${Wrapper}\n  ${TextureStyles}\n  ${TextContainer}\n  ${ImageContainer}\n  ${OverwriteTheme}\n  ${OverwriteWithImage}\n  ${OverwriteTransparent}\n`;\n\nconst CreateImageContainer = ({\n  image,\n  action,\n}: {\n  image: HTMLImageElement | HTMLElement;\n  action?: HTMLElement | null;\n}) => {\n  const container = document.createElement('div');\n\n  container.classList.add(QUOTE_FEATURED_IMAGE);\n\n  container.appendChild(image);\n  if (action) {\n    action.classList.add(QUOTE_FEATURED_IMAGE_ACTIONS);\n    container.appendChild(action);\n  }\n\n  if (window.innerWidth >= MEDIUM) {\n    if (image instanceof HTMLImageElement) {\n      image.addEventListener('load', () => {\n        const parent = image.parentElement as HTMLElement;\n        if (!parent) return;\n\n        const aspectRatio = image.offsetHeight / parent.offsetHeight;\n\n        if (aspectRatio < 0.5) {\n          container.setAttribute('data-aligned', 'center');\n        }\n      });\n    }\n  }\n\n  return container;\n};\n\nconst CreateTextureContainer = ({\n  isThemeDark,\n  isThemeMaryland,\n}: TypeQuoteFeatured) => {\n  const container = document.createElement('div');\n  const isDarkText = isThemeDark || isThemeMaryland;\n  const backgroundTexture = Utility.markup.create.imageFromSvg({\n    SVG: isDarkText ? BACKGROUND_TEXTURE_DARK : BACKGROUND_TEXTURE_LIGHT,\n  });\n\n  container.classList.add(QUOTE_FEATURED_TEXTURE);\n  container.appendChild(backgroundTexture);\n\n  return container;\n};\n\nexport default (props: TypeQuoteFeatured) => {\n  const { isThemeDark, isThemeMaryland, action, image, isTransparent } = props;\n  const container = document.createElement('div');\n  const spacer = document.createElement('div');\n  const wrapper = document.createElement('div');\n  const textureContainer = CreateTextureContainer(props);\n  const textContainer = document.createElement('div');\n  const hasImage = !!image;\n  const inlineActions = hasImage ? null : action;\n  const inlineProps = { ...props, action: inlineActions, image: null };\n  const inlineQuote = InlineQuote(inlineProps);\n  let styles = STYLES_QUOTE_FEATURED_ELEMENT;\n\n  wrapper.classList.add(QUOTE_FEATURED_CONTAINER_WRAPPER);\n\n  textContainer.classList.add(QUOTE_FEATURED_TEXT);\n  textContainer.appendChild(inlineQuote.element);\n  if (!isTransparent) wrapper.appendChild(textureContainer);\n  if (hasImage) wrapper.appendChild(CreateImageContainer({ image, action }));\n  wrapper.appendChild(textContainer);\n  styles += inlineQuote.styles;\n\n  spacer.classList.add(QUOTE_FEATURED_CONTAINER_SPACER);\n  spacer.appendChild(wrapper);\n\n  container.classList.add(QUOTE_FEATURED_CONTAINER);\n  container.appendChild(spacer);\n  if (isThemeDark) container.setAttribute('theme', THEME_DARK);\n  if (isThemeMaryland) container.setAttribute('theme', THEME_MARYLAND);\n  if (hasImage) container.setAttribute(ATTRIBUTE_HAS_IMAGE, '');\n  if (isTransparent) container.setAttribute(ATTRIBUTE_TRANSPARENT, 'true');\n\n  return { element: container, styles };\n};\n"],"names":["QuoteText","token","Utility.markup.create.imageFromSvg","InlineQuote"],"mappings":"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"}
+{"version":3,"file":"featured.js","sources":["../../../source/composite/quote/featured.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\nimport { ElementModel } from 'model';\nimport InlineQuote from './inline';\nimport { image as elementImage, action as elementAction } from './elements';\nimport { quoteAnimation } from './helper/animation';\nimport { MEDIUM, SMALL } from './_constants';\nimport { type QuoteFeaturedProps } from './_types';\nimport { type ElementVisual } from '../../_types';\n\nconst BACKGROUND_TEXTURE_LIGHT = `<svg id=\"quote_background_light\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 850.5 532.1\"><path d=\"M.3,0h332.7L.3,326.6V0Z\" fill=\"#757575\" fill-rule=\"evenodd\" isolation=\"isolate\" opacity=\".04\" stroke-width=\"0\"/><path d=\"M517.9,532.1h332.7L308.6,0H0v23.6l517.9,508.5Z\" fill=\"#000\" fill-rule=\"evenodd\" isolation=\"isolate\" opacity=\".04\" stroke-width=\"0\"/></svg>`;\nconst BACKGROUND_TEXTURE_DARK = `<svg id=\"quote_background_dark\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 614.86 300.65\"><defs><style>.cls-1{opacity:.25;}.cls-1,.cls-2{fill:#757575;fill-rule:evenodd;isolation:isolate;}.cls-2{opacity:.1;}</style></defs><path class=\"cls-2\" d=\"m.27,0h332.67L27.46,299.93H.27V0Z\"/><path class=\"cls-1\" d=\"m0,0h308.65l306.21,300.65h-332.67L0,23.59V0Z\"/></svg>`;\n\nconst createImageContainer = (props: QuoteFeaturedProps) => {\n  const { image, action } = props;\n\n  const getContainerChildren = () => {\n    const containerChildren: ElementVisual[] = [];\n\n    if (image) {\n      const imageElement = elementImage({\n        ...props,\n        isTypeFeatured: true,\n        image,\n      });\n      containerChildren.push(imageElement);\n    }\n\n    if (action) {\n      const actionElement = elementAction({\n        isTypeFeatured: true,\n        action,\n      });\n      containerChildren.push(actionElement);\n    }\n\n    return containerChildren;\n  };\n\n  const createImageContainerElement = () => {\n    return ElementModel.createDiv({\n      className: 'quote-featured-image',\n      children: containerChildren,\n      elementStyles: {\n        element: {\n          position: 'relative',\n          display: 'flex',\n          flexDirection: 'column',\n          alignItems: 'center',\n          marginTop: `-${token.spacing.lg}`,\n\n          ['&[align-center=true]']: {\n            marginTop: '0',\n            justifyContent: 'center',\n          },\n\n          [`@container (max-width: ${SMALL - 1}px)`]: {\n            padding: `0 ${token.spacing.lg}`,\n          },\n\n          [`@container (min-width: ${SMALL}px) and (max-width: ${\n            MEDIUM - 1\n          }px)`]: {\n            margin: '0 auto',\n            marginTop: `-${token.spacing['8xl']}`,\n            maxWidth: '300px',\n          },\n\n          [`@container (min-width: ${MEDIUM}px)`]: {\n            paddingLeft: token.spacing['6xl'],\n            width: `calc(300px + ${token.spacing['6xl']})`,\n          },\n        },\n      },\n    });\n  };\n\n  const containerChildren = getContainerChildren();\n  const container = createImageContainerElement();\n\n  if (window.innerWidth >= MEDIUM && image instanceof HTMLImageElement) {\n    image.addEventListener('load', () => {\n      const parent = container;\n\n      if (!parent) return;\n\n      const aspectRatio = image.offsetHeight / parent.element.offsetHeight;\n\n      if (aspectRatio < 0.5) {\n        container.element.setAttribute('align-center', 'true');\n      }\n    });\n  }\n\n  return container;\n};\n\nconst createTextureContainer = ({\n  isThemeDark,\n  isThemeMaryland,\n}: QuoteFeaturedProps) => {\n  const isDarkText = isThemeDark || isThemeMaryland;\n  const backgroundTexture = imageFromSvg({\n    SVG: isDarkText ? BACKGROUND_TEXTURE_DARK : BACKGROUND_TEXTURE_LIGHT,\n  });\n\n  const backgroundTextureElement = ElementModel.create({\n    element: backgroundTexture,\n    className: 'quote-background-texture',\n  });\n  const container = ElementModel.createDiv({\n    className: 'quote-featured-texture',\n    children: [backgroundTextureElement],\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        position: 'absolute',\n        top: '0',\n        left: '0',\n        width: '100%',\n        height: '100%',\n\n        [`& > img`]: {\n          position: 'absolute',\n          top: '0',\n          left: '0',\n          width: '70%',\n          height: '120%',\n          objectFit: 'cover',\n        },\n\n        [`@container (max-width: ${MEDIUM - 1}px)`]: {\n          display: 'none',\n        },\n      },\n    },\n  });\n\n  return container;\n};\n\nexport default (props: QuoteFeaturedProps) => {\n  const { isThemeDark, isThemeMaryland, image, isTransparent } = props;\n  const wrapperChildren: ElementVisual[] = [];\n\n  const inlineQuote = InlineQuote(props);\n\n  const textContainer = ElementModel.createDiv({\n    className: 'quote-featured-text',\n    children: [inlineQuote],\n    elementStyles: {\n      element: {\n        padding: token.spacing.lg,\n        position: 'relative',\n        width: '100%',\n\n        ...(isTransparent && { padding: '0' }),\n\n        [`@container (min-width: ${SMALL}px)`]: {\n          padding: `${token.spacing['2xl']}`,\n        },\n\n        [`@container (min-width: ${MEDIUM}px)`]: {\n          padding: `${token.spacing['4xl']}`,\n        },\n      },\n    },\n  });\n\n  if (!isTransparent) {\n    wrapperChildren.push(createTextureContainer(props));\n  }\n\n  if (image) {\n    wrapperChildren.push(createImageContainer(props));\n  }\n\n  wrapperChildren.push(textContainer);\n\n  const wrapper = ElementModel.createDiv({\n    className: 'quote-featured-container-wrapper',\n    children: wrapperChildren,\n    elementStyles: {\n      element: {\n        backgroundColor: token.color.gray.lightest,\n        position: 'relative',\n        ...(isThemeDark && { backgroundColor: token.color.black }),\n        ...(isThemeMaryland && { backgroundColor: token.color.red }),\n        ...(isTransparent && { backgroundColor: 'transparent' }),\n\n        ...(image && {\n          display: 'flex',\n          flexDirection: 'column',\n\n          [`@container (min-width: ${MEDIUM}px)`]: {\n            display: 'flex',\n            flexDirection: 'row',\n          },\n        }),\n      },\n    },\n  });\n\n  const spacer = ElementModel.createDiv({\n    className: 'quote-featured-container-spacer',\n    children: [wrapper],\n    elementStyles: {\n      element: {\n        paddingTop: token.spacing.lg,\n\n        ...(isTransparent && { padding: '0' }),\n\n        [`@container (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px)`]:\n          {\n            ...(image && {\n              paddingTop: token.spacing['8xl'],\n            }),\n          },\n      },\n    },\n  });\n\n  const container = ElementModel.createDiv({\n    className: 'quote-featured-container',\n    children: [spacer],\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n      },\n    },\n  });\n\n  quoteAnimation({\n    ...props,\n    quoteElement: container,\n  });\n\n  return container;\n};\n"],"names":["image","action","containerChildren","elementImage","elementAction","ElementModel.createDiv","token","SMALL","MEDIUM","imageFromSvg","ElementModel.create","InlineQuote","quoteAnimation"],"mappings":"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"}