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

package/dist/composite/quote/helper/animation.mjs

@@ -0,0 +1,74 @@
+const quoteAnimation = ({
+  image,
+  includesAnimation,
+  isTypeFeatured = false,
+  quote,
+  quoteElement
+}) => {
+  const quoteTextElement = quoteElement.element.querySelector(
+    ".quote-container-quote"
+  );
+  const attributionElement = quoteElement.element.querySelector(
+    ".quote-container-attribution"
+  );
+  const attributionSubTextElement = quoteElement.element.querySelector(
+    ".quote-container-text-attribution-sub-text"
+  );
+  const actionsElement = quoteElement.element.querySelector(
+    ".quote-container-actions"
+  );
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          if (!quote || !includesAnimation || !quoteTextElement) {
+            return;
+          }
+          const wordsList = Array.from(
+            quoteTextElement.querySelectorAll(".quote-text-split-word")
+          );
+          const animateAction = !isTypeFeatured || isTypeFeatured && !image;
+          let quoteAnimationLength = 50;
+          wordsList.forEach((word, i) => {
+            setTimeout(() => {
+              word.style.opacity = "1";
+              word.style.transform = "translateY(0)";
+            }, i * 50);
+            quoteAnimationLength += 50;
+          });
+          if (attributionElement) {
+            setTimeout(() => {
+              if (attributionElement) {
+                attributionElement.style.opacity = "1";
+                attributionElement.style.transform = "translateY(0)";
+              }
+            }, quoteAnimationLength);
+          }
+          if (attributionSubTextElement) {
+            setTimeout(() => {
+              attributionSubTextElement.style.opacity = "1";
+              attributionSubTextElement.style.transform = "translateY(0)";
+            }, quoteAnimationLength);
+          }
+          if (actionsElement && animateAction) {
+            setTimeout(() => {
+              actionsElement.style.opacity = "1";
+              actionsElement.style.transform = "translateY(0)";
+            }, quoteAnimationLength);
+          }
+        }
+      });
+    },
+    {
+      rootMargin: "0px 0px -120px 0px",
+      threshold: 0
+    }
+  );
+  if (quoteTextElement && includesAnimation) {
+    observer.observe(quoteTextElement);
+  }
+};
+export {
+  quoteAnimation
+};
+//# sourceMappingURL=animation.mjs.map

package/dist/composite/quote/helper/animation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.mjs","sources":["../../../../source/composite/quote/helper/animation.ts"],"sourcesContent":["import { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\ninterface QuoteAnimationProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'quote' | 'includesAnimation' | 'image'> {\n  quoteElement: ElementVisual;\n}\n\nexport const quoteAnimation = ({\n  image,\n  includesAnimation,\n  isTypeFeatured = false,\n  quote,\n  quoteElement,\n}: QuoteAnimationProps) => {\n  const quoteTextElement = quoteElement.element.querySelector(\n    '.quote-container-quote',\n  ) as HTMLElement;\n  const attributionElement = quoteElement.element.querySelector(\n    '.quote-container-attribution',\n  ) as HTMLElement;\n  const attributionSubTextElement = quoteElement.element.querySelector(\n    '.quote-container-text-attribution-sub-text',\n  ) as HTMLElement;\n  const actionsElement = quoteElement.element.querySelector(\n    '.quote-container-actions',\n  ) as HTMLElement;\n\n  const observer = new IntersectionObserver(\n    (entries) => {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting) {\n          if (!quote || !includesAnimation || !quoteTextElement) {\n            return;\n          }\n\n          const wordsList = Array.from(\n            quoteTextElement.querySelectorAll('.quote-text-split-word'),\n          ) as HTMLElement[];\n          const animateAction = !isTypeFeatured || (isTypeFeatured && !image);\n\n          let quoteAnimationLength = 50;\n\n          wordsList.forEach((word, i) => {\n            setTimeout(() => {\n              word.style.opacity = '1';\n              word.style.transform = 'translateY(0)';\n            }, i * 50);\n\n            quoteAnimationLength += 50;\n          });\n\n          if (attributionElement) {\n            setTimeout(() => {\n              if (attributionElement) {\n                attributionElement.style.opacity = '1';\n                attributionElement.style.transform = 'translateY(0)';\n              }\n            }, quoteAnimationLength);\n          }\n\n          if (attributionSubTextElement) {\n            setTimeout(() => {\n              attributionSubTextElement.style.opacity = '1';\n              attributionSubTextElement.style.transform = 'translateY(0)';\n            }, quoteAnimationLength);\n          }\n\n          if (actionsElement && animateAction) {\n            setTimeout(() => {\n              actionsElement.style.opacity = '1';\n              actionsElement.style.transform = 'translateY(0)';\n            }, quoteAnimationLength);\n          }\n        }\n      });\n    },\n    {\n      rootMargin: '0px 0px -120px 0px',\n      threshold: 0,\n    },\n  );\n\n  if (quoteTextElement && includesAnimation) {\n    observer.observe(quoteTextElement);\n  }\n};\n"],"names":[],"mappings":"AASO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,mBAAmB,aAAa,QAAQ;AAAA,IAC5C;AAAA,EAAA;AAEF,QAAM,qBAAqB,aAAa,QAAQ;AAAA,IAC9C;AAAA,EAAA;AAEF,QAAM,4BAA4B,aAAa,QAAQ;AAAA,IACrD;AAAA,EAAA;AAEF,QAAM,iBAAiB,aAAa,QAAQ;AAAA,IAC1C;AAAA,EAAA;AAGF,QAAM,WAAW,IAAI;AAAA,IACnB,CAAC,YAAY;AACX,cAAQ,QAAQ,CAAC,UAAU;AACzB,YAAI,MAAM,gBAAgB;AACxB,cAAI,CAAC,SAAS,CAAC,qBAAqB,CAAC,kBAAkB;AACrD;AAAA,UACF;AAEA,gBAAM,YAAY,MAAM;AAAA,YACtB,iBAAiB,iBAAiB,wBAAwB;AAAA,UAAA;AAE5D,gBAAM,gBAAgB,CAAC,kBAAmB,kBAAkB,CAAC;AAE7D,cAAI,uBAAuB;AAE3B,oBAAU,QAAQ,CAAC,MAAM,MAAM;AAC7B,uBAAW,MAAM;AACf,mBAAK,MAAM,UAAU;AACrB,mBAAK,MAAM,YAAY;AAAA,YACzB,GAAG,IAAI,EAAE;AAET,oCAAwB;AAAA,UAC1B,CAAC;AAED,cAAI,oBAAoB;AACtB,uBAAW,MAAM;AACf,kBAAI,oBAAoB;AACtB,mCAAmB,MAAM,UAAU;AACnC,mCAAmB,MAAM,YAAY;AAAA,cACvC;AAAA,YACF,GAAG,oBAAoB;AAAA,UACzB;AAEA,cAAI,2BAA2B;AAC7B,uBAAW,MAAM;AACf,wCAA0B,MAAM,UAAU;AAC1C,wCAA0B,MAAM,YAAY;AAAA,YAC9C,GAAG,oBAAoB;AAAA,UACzB;AAEA,cAAI,kBAAkB,eAAe;AACnC,uBAAW,MAAM;AACf,6BAAe,MAAM,UAAU;AAC/B,6BAAe,MAAM,YAAY;AAAA,YACnC,GAAG,oBAAoB;AAAA,UACzB;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE,YAAY;AAAA,MACZ,WAAW;AAAA,IAAA;AAAA,EACb;AAGF,MAAI,oBAAoB,mBAAmB;AACzC,aAAS,QAAQ,gBAAgB;AAAA,EACnC;AACF;"}

package/dist/composite/quote/index.d.ts

@@ -1,4 +1,4 @@
-export { default as elements } from './elements';
+export * as elements from './elements';
 export { default as featured } from './featured';
 export { default as inline } from './inline';
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/quote/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/composite/quote/index.mjs

@@ -1,9 +1,9 @@
-import { default as default2 } from "./elements/index.mjs";
-import { default as default3 } from "./featured.mjs";
-import { default as default4 } from "./inline.mjs";
+import * as index from "./elements/index.mjs";
+import { default as default2 } from "./featured.mjs";
+import { default as default3 } from "./inline.mjs";
 export {
-  default2 as elements,
-  default3 as featured,
-  default4 as inline
+  index as elements,
+  default2 as featured,
+  default3 as inline
 };
 //# sourceMappingURL=index.mjs.map

package/dist/composite/quote/inline.d.ts

@@ -1,12 +1,7 @@
-import { TypeQuoteTextContainer } from './elements/text';
-export type TypeInlineInline = TypeQuoteTextContainer & {
-    isThemeDark?: boolean;
-    isThemeMaryland?: boolean;
-    isSizeLarge: boolean;
-    image: HTMLElement | null;
-};
-declare const _default: (props: TypeInlineInline) => {
-    element: HTMLDivElement;
+import { QuoteInlineProps } from './_types';
+declare const _default: (props: QuoteInlineProps) => {
+    element: HTMLElement;
+    className: string;
     styles: string;
 };
 export default _default;

package/dist/composite/quote/inline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inline.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/inline.ts"],"names":[],"mappings":"AAEA,OAAa,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAG/D,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GAAG;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;CAC3B,CAAC;yBAmQc,OAAO,gBAAgB;;;;AAAvC,wBAsCE"}
+{"version":3,"file":"inline.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/inline.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;yBAGjC,OAAO,gBAAgB;;;;;AAAvC,wBA0DE"}

package/dist/composite/quote/inline.js

@@ -1,278 +1,79 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-const icons = require("../../utilities/assets/icons.js");
-require("../../node_modules/postcss/lib/postcss.js");
-require("../../node_modules/postcss-nesting/dist/index.js");
-require("../../node_modules/postcss-js/index.js");
-const text = require("./elements/text.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const index = require("../../model/elements/index.js");
 const image = require("./elements/image.js");
-const SMALL = 500;
-const ELEMENT_NAME = "umd-element-quote-inline";
-const ATTRIBUTE_WITH_IMAGE = "has-image";
-const ATTRIBUTE_THEME = "theme";
-const ATTRIBUTE_SIZE = "size";
-const THEME_MARYLAND = "maryland";
-const SIZE_LARGE = "large";
-const TEXT_CONTAINER = text.elements.container;
-const TEXT_CONTAINER_QUOTE_WRAPPER = text.elements.quoteWrapper;
-const QUOTE_INLINE_CONTAINER = "quote-inline-container";
-const QUOTE_INLINE_CONTAINER_WRAPPER = "quote-inline-container-wrapper";
-const IS_THEME_MARYLAND = `[${ATTRIBUTE_THEME}='${THEME_MARYLAND}']`;
-const IS_SIZE_LARGE = `[${ATTRIBUTE_SIZE}='${SIZE_LARGE}']`;
-const IS_WITH_IMAGE = `[${ATTRIBUTE_WITH_IMAGE}]`;
-const IS_WITH_IMAGE_CONTAINER = `.${QUOTE_INLINE_CONTAINER}${IS_WITH_IMAGE}`;
-const IS_SIZE_LARGE_CONTAINER = `.${QUOTE_INLINE_CONTAINER}${IS_SIZE_LARGE}`;
-const IS_SIZE_LARGE_WITH_IMAGE_CONTAINER = `${IS_WITH_IMAGE_CONTAINER}${IS_WITH_IMAGE}`;
-const IS_TEXT_CONTAINER_OVERWRITE = `.${QUOTE_INLINE_CONTAINER} .${TEXT_CONTAINER}`;
-const IS_IMAGE_CONTAINER_OVERWRITE = `.${QUOTE_INLINE_CONTAINER} .${image.elements.container}`;
-const IS_MARYLAND_CONTAINER = `.${QUOTE_INLINE_CONTAINER}${IS_THEME_MARYLAND}`;
-const IS_SIZE_LARGE_TEXT_CONTAINER = `${IS_SIZE_LARGE_CONTAINER} .${TEXT_CONTAINER}`;
-const IS_WITH_IMAGE_TEXT_CONTAINER = `${IS_WITH_IMAGE_CONTAINER} .${TEXT_CONTAINER}`;
-const IS_WITH_IMAGE_TEXT_QUOTE = `${IS_WITH_IMAGE_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER}`;
-const IS_WITH_IMAGE_SIZE_LARGE_TEXT_CONTAINER = `${IS_SIZE_LARGE_WITH_IMAGE_CONTAINER} .${TEXT_CONTAINER}`;
-const IS_WITH_IMAGE_SIZE_LARGE_TEXT_QUOTE = `${IS_SIZE_LARGE_WITH_IMAGE_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER}`;
-const OverwriteThemeMaryland = `
-  ${IS_MARYLAND_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER}:before {
-    background-color: ${Styles.token.color.gold};
-  }
-  
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_MARYLAND_CONTAINER} .${image.elements.container} img  {
-      border-right: 2px solid ${Styles.token.color.gold};
-    }
-  }
-  
-  ${IS_MARYLAND_CONTAINER} span svg {
-    fill: ${Styles.token.color.gold} !important;
-  }
-`;
-const OverwriteSizeLarge = `
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_SIZE_LARGE_CONTAINER} .${QUOTE_INLINE_CONTAINER_WRAPPER} {
-      gap: ${Styles.token.spacing.xl};
-    }
-  }
-
-  ${IS_SIZE_LARGE_CONTAINER} .${image.elements.container} img {
-    max-width: 200px;
-  }
-
-  ${IS_SIZE_LARGE_CONTAINER} .${image.elements.container} span {
-    bottom: -7px;
-    left: -2px;
-    height: 26px;
-    width: 36px;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_SIZE_LARGE_CONTAINER} .${image.elements.container} span {
-      height: 30px;
-      width: 41px;
-      top: -14px;
-      right: -28px;
-      left: inherit;
-    }
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {
-    ${IS_SIZE_LARGE_TEXT_CONTAINER} {
-      padding-top:  ${Styles.token.spacing["2xl"]};
-    }
-  }
-  
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_SIZE_LARGE_TEXT_CONTAINER} {
-      padding-left: ${Styles.token.spacing.md};
-    }
-  }
-
-  ${IS_SIZE_LARGE_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER} span {
-    height: 26px;
-    width: 36px;
-    top: -${Styles.token.spacing["2xl"]};
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_SIZE_LARGE_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER} span {
-      left: -${Styles.token.spacing["6xl"]};
-      top: 0;
-    }
-  }
-`;
-const OverwriteSizedLargeWithImage = `
-  ${IS_WITH_IMAGE_SIZE_LARGE_TEXT_CONTAINER} {
-    padding-top: 0;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_WITH_IMAGE_SIZE_LARGE_TEXT_QUOTE} {
-      margin-left: 0;
-      padding-left: 0;
-    }
-  }
-
-  ${IS_WITH_IMAGE_SIZE_LARGE_TEXT_QUOTE} span {
-    display: none;
-  }
-`;
-const OverwriteWithImage = `
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_WITH_IMAGE_TEXT_CONTAINER} {
-      padding-left: 0;
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_WITH_IMAGE_TEXT_QUOTE}:before {
-      display: none;
-    }
-  }
-`;
-const TextContainer = `
-  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {
-    ${IS_TEXT_CONTAINER_OVERWRITE} {
-      padding-top: ${Styles.token.spacing.lg};
-      padding-left: ${Styles.token.spacing.md};
-    }
-  }
-  
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_TEXT_CONTAINER_OVERWRITE} {
-      padding-left: ${Styles.token.spacing["4xl"]};
-    }
-  }
-
-  ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER} {
-    position: relative;
-  }
-
-  ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER}:before {
-    content: '';
-    position: absolute;
-    left: -${Styles.token.spacing.md};
-    top: 7px;
-    height: calc(100% - 14px);
-    width: 2px;
-    display: block;
-    background-color: ${Styles.token.color.red};
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER}:before {
-      left: -${Styles.token.spacing.md};
-    }
-  }
-
-  ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER} span {
-    position: absolute;
-    left: -${Styles.token.spacing.md};
-    top: -${Styles.token.spacing.lg};
-    height: 15px;
-    width: 22px;
-    display: block;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER} span {
-      position: absolute;
-      left: -${Styles.token.spacing["4xl"]};
-      top: 0;
-    }
-  }
-
-  ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER} svg {
-    fill: ${Styles.token.color.red};
-  }
-`;
-const ImageContainer = `
-  ${IS_IMAGE_CONTAINER_OVERWRITE} {
-    margin-bottom: ${Styles.token.spacing.sm};
-    position: relative;
-  }
-
-  ${IS_IMAGE_CONTAINER_OVERWRITE} img {
-    max-width: 160px;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_IMAGE_CONTAINER_OVERWRITE} img  {
-      border-right: 2px solid ${Styles.token.color.red};
-    }
-  }
-
-  ${IS_IMAGE_CONTAINER_OVERWRITE} span {
-    position: absolute;
-    bottom: -7px;
-    left: -2px;
-    height: 15px;
-    width: 21px;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    ${IS_IMAGE_CONTAINER_OVERWRITE} span {
-      height: 20px;
-      width: 29px;
-      top: -11px;
-      right: -20px;
-      left: inherit;
-    }
-  }
-
-  ${IS_IMAGE_CONTAINER_OVERWRITE} span svg {
-    fill: ${Styles.token.color.red};
-  }
-`;
-const STYLES_QUOTE_INLINE_ELEMENT = `
-  .${QUOTE_INLINE_CONTAINER} {
-    container: ${ELEMENT_NAME} / inline-size;
-    width: 100%;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    .${QUOTE_INLINE_CONTAINER_WRAPPER} {
-      display: flex;
-      gap: ${Styles.token.spacing.lg};
-    }
-  }
-
-  ${ImageContainer}
-  ${TextContainer}
-  ${OverwriteWithImage}
-  ${OverwriteSizeLarge}
-  ${OverwriteSizedLargeWithImage}
-  ${OverwriteThemeMaryland}
-`;
+const text = require("./elements/text.js");
+require("@universityofmaryland/web-icons-library/brand");
+const _constants = require("./_constants.js");
+require("@universityofmaryland/web-styles-library/layout");
+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]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const InlineQuote = (props) => {
-  const { isSizeLarge, image: image$1, isThemeDark, isThemeMaryland } = props;
-  const container = document.createElement("div");
-  const wrapper = document.createElement("div");
-  const hasImage = image$1 !== null;
-  const textContainer = text.create({
-    ...props
-  });
-  let styles = STYLES_QUOTE_INLINE_ELEMENT;
-  if (hasImage) {
-    const imageContainer = image.create({
-      image: image$1
+  const { isSizeLarge, image: image$1 } = props;
+  const textContainer = text(props);
+  const getInlineWrapperChildren = (props2) => {
+    const wrapperChildren2 = [];
+    if (image$1) {
+      const imageContainer = image({
+        ...props2,
+        isTypeFeatured: false,
+        image: image$1
+      });
+      wrapperChildren2.push(imageContainer);
+    }
+    wrapperChildren2.push(textContainer);
+    return wrapperChildren2;
+  };
+  const createWrapper = (children) => {
+    return index.createDiv({
+      className: "quote-inline-container-wrapper",
+      children,
+      elementStyles: {
+        element: {
+          [`@container (min-width: ${_constants.SMALL}px)`]: {
+            display: "flex",
+            gap: token__namespace.spacing.lg,
+            ...isSizeLarge && { gap: token__namespace.spacing.xl }
+          }
+        }
+      }
     });
-    if (imageContainer) {
-      const iconSpan = document.createElement("span");
-      iconSpan.innerHTML = icons.QUOTE;
-      imageContainer.element.appendChild(iconSpan);
-      wrapper.appendChild(imageContainer.element);
-      styles += imageContainer.styles;
-      container.setAttribute(ATTRIBUTE_WITH_IMAGE, "");
-    }
-  }
-  wrapper.classList.add(QUOTE_INLINE_CONTAINER_WRAPPER);
-  wrapper.appendChild(textContainer.element);
-  styles += textContainer.styles;
-  container.classList.add(QUOTE_INLINE_CONTAINER);
-  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, "dark");
-  if (isThemeMaryland) container.setAttribute(ATTRIBUTE_THEME, THEME_MARYLAND);
-  if (isSizeLarge) container.setAttribute(ATTRIBUTE_SIZE, SIZE_LARGE);
-  container.appendChild(wrapper);
-  return { element: container, styles };
+  };
+  const createContainer = (wrapper2) => {
+    return index.createDiv({
+      className: "quote-inline-container",
+      children: [wrapper2],
+      elementStyles: {
+        element: {
+          containerType: "inline-size",
+          width: "100%"
+        }
+      }
+    });
+  };
+  const wrapperChildren = getInlineWrapperChildren(props);
+  const wrapper = createWrapper(wrapperChildren);
+  animation.quoteAnimation({
+    ...props,
+    quoteElement: wrapper
+  });
+  return createContainer(wrapper);
 };
 module.exports = InlineQuote;
 //# sourceMappingURL=inline.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"inline.js","sources":["../../../source/composite/quote/inline.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport Text, { TypeQuoteTextContainer } from './elements/text';\nimport Image from './elements/image';\n\nexport type TypeInlineInline = TypeQuoteTextContainer & {\n  isThemeDark?: boolean;\n  isThemeMaryland?: boolean;\n  isSizeLarge: boolean;\n  image: HTMLElement | null;\n};\n\nconst SMALL = 500;\n\nconst ELEMENT_NAME = 'umd-element-quote-inline';\nconst ATTRIBUTE_WITH_IMAGE = 'has-image';\nconst ATTRIBUTE_THEME = 'theme';\nconst ATTRIBUTE_SIZE = 'size';\nconst THEME_MARYLAND = 'maryland';\nconst SIZE_LARGE = 'large';\n\nconst TEXT_CONTAINER = Text.elements.container;\nconst TEXT_CONTAINER_QUOTE_WRAPPER = Text.elements.quoteWrapper;\n\nconst QUOTE_INLINE_CONTAINER = 'quote-inline-container';\nconst QUOTE_INLINE_CONTAINER_WRAPPER = 'quote-inline-container-wrapper';\n\nconst IS_THEME_MARYLAND = `[${ATTRIBUTE_THEME}='${THEME_MARYLAND}']`;\nconst IS_SIZE_LARGE = `[${ATTRIBUTE_SIZE}='${SIZE_LARGE}']`;\nconst IS_WITH_IMAGE = `[${ATTRIBUTE_WITH_IMAGE}]`;\nconst IS_WITH_IMAGE_CONTAINER = `.${QUOTE_INLINE_CONTAINER}${IS_WITH_IMAGE}`;\nconst IS_SIZE_LARGE_CONTAINER = `.${QUOTE_INLINE_CONTAINER}${IS_SIZE_LARGE}`;\nconst IS_SIZE_LARGE_WITH_IMAGE_CONTAINER = `${IS_WITH_IMAGE_CONTAINER}${IS_WITH_IMAGE}`;\n\nconst IS_TEXT_CONTAINER_OVERWRITE = `.${QUOTE_INLINE_CONTAINER} .${TEXT_CONTAINER}`;\nconst IS_IMAGE_CONTAINER_OVERWRITE = `.${QUOTE_INLINE_CONTAINER} .${Image.elements.container}`;\n\nconst IS_MARYLAND_CONTAINER = `.${QUOTE_INLINE_CONTAINER}${IS_THEME_MARYLAND}`;\nconst IS_SIZE_LARGE_TEXT_CONTAINER = `${IS_SIZE_LARGE_CONTAINER} .${TEXT_CONTAINER}`;\nconst IS_WITH_IMAGE_TEXT_CONTAINER = `${IS_WITH_IMAGE_CONTAINER} .${TEXT_CONTAINER}`;\nconst IS_WITH_IMAGE_TEXT_QUOTE = `${IS_WITH_IMAGE_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER}`;\nconst IS_WITH_IMAGE_SIZE_LARGE_TEXT_CONTAINER = `${IS_SIZE_LARGE_WITH_IMAGE_CONTAINER} .${TEXT_CONTAINER}`;\nconst IS_WITH_IMAGE_SIZE_LARGE_TEXT_QUOTE = `${IS_SIZE_LARGE_WITH_IMAGE_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER}`;\n\n// prettier-ignore\nconst OverwriteThemeMaryland = `\n  ${IS_MARYLAND_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER}:before {\n    background-color: ${token.color.gold};\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_MARYLAND_CONTAINER} .${Image.elements.container} img  {\n      border-right: 2px solid ${token.color.gold};\n    }\n  }\n  \n  ${IS_MARYLAND_CONTAINER} span svg {\n    fill: ${token.color.gold} !important;\n  }\n`;\n\n// prettier-ignore\nconst OverwriteSizeLarge = `\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_SIZE_LARGE_CONTAINER} .${QUOTE_INLINE_CONTAINER_WRAPPER} {\n      gap: ${token.spacing.xl};\n    }\n  }\n\n  ${IS_SIZE_LARGE_CONTAINER} .${Image.elements.container} img {\n    max-width: 200px;\n  }\n\n  ${IS_SIZE_LARGE_CONTAINER} .${Image.elements.container} span {\n    bottom: -7px;\n    left: -2px;\n    height: 26px;\n    width: 36px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_SIZE_LARGE_CONTAINER} .${Image.elements.container} span {\n      height: 30px;\n      width: 41px;\n      top: -14px;\n      right: -28px;\n      left: inherit;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {\n    ${IS_SIZE_LARGE_TEXT_CONTAINER} {\n      padding-top:  ${token.spacing['2xl']};\n    }\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_SIZE_LARGE_TEXT_CONTAINER} {\n      padding-left: ${token.spacing.md};\n    }\n  }\n\n  ${IS_SIZE_LARGE_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER} span {\n    height: 26px;\n    width: 36px;\n    top: -${token.spacing['2xl']};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_SIZE_LARGE_CONTAINER} .${TEXT_CONTAINER_QUOTE_WRAPPER} span {\n      left: -${token.spacing['6xl']};\n      top: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst OverwriteSizedLargeWithImage = `\n  ${IS_WITH_IMAGE_SIZE_LARGE_TEXT_CONTAINER} {\n    padding-top: 0;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_WITH_IMAGE_SIZE_LARGE_TEXT_QUOTE} {\n      margin-left: 0;\n      padding-left: 0;\n    }\n  }\n\n  ${IS_WITH_IMAGE_SIZE_LARGE_TEXT_QUOTE} span {\n    display: none;\n  }\n`;\n\n// prettier-ignore\nconst OverwriteWithImage = `\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_WITH_IMAGE_TEXT_CONTAINER} {\n      padding-left: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_WITH_IMAGE_TEXT_QUOTE}:before {\n      display: none;\n    }\n  }\n`;\n\n// prettier-ignore\nconst TextContainer = `\n  @container ${ELEMENT_NAME} (max-width: ${SMALL - 1}px) {\n    ${IS_TEXT_CONTAINER_OVERWRITE} {\n      padding-top: ${token.spacing.lg};\n      padding-left: ${token.spacing.md};\n    }\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_TEXT_CONTAINER_OVERWRITE} {\n      padding-left: ${token.spacing['4xl']};\n    }\n  }\n\n  ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER} {\n    position: relative;\n  }\n\n  ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER}:before {\n    content: '';\n    position: absolute;\n    left: -${token.spacing.md};\n    top: 7px;\n    height: calc(100% - 14px);\n    width: 2px;\n    display: block;\n    background-color: ${token.color.red};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER}:before {\n      left: -${token.spacing.md};\n    }\n  }\n\n  ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER} span {\n    position: absolute;\n    left: -${token.spacing.md};\n    top: -${token.spacing.lg};\n    height: 15px;\n    width: 22px;\n    display: block;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER} span {\n      position: absolute;\n      left: -${token.spacing['4xl']};\n      top: 0;\n    }\n  }\n\n  ${IS_TEXT_CONTAINER_OVERWRITE} .${TEXT_CONTAINER_QUOTE_WRAPPER} svg {\n    fill: ${token.color.red};\n  }\n`\n\n// prettier-ignore\nconst ImageContainer = `\n  ${IS_IMAGE_CONTAINER_OVERWRITE} {\n    margin-bottom: ${token.spacing.sm};\n    position: relative;\n  }\n\n  ${IS_IMAGE_CONTAINER_OVERWRITE} img {\n    max-width: 160px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_IMAGE_CONTAINER_OVERWRITE} img  {\n      border-right: 2px solid ${token.color.red};\n    }\n  }\n\n  ${IS_IMAGE_CONTAINER_OVERWRITE} span {\n    position: absolute;\n    bottom: -7px;\n    left: -2px;\n    height: 15px;\n    width: 21px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    ${IS_IMAGE_CONTAINER_OVERWRITE} span {\n      height: 20px;\n      width: 29px;\n      top: -11px;\n      right: -20px;\n      left: inherit;\n    }\n  }\n\n  ${IS_IMAGE_CONTAINER_OVERWRITE} span svg {\n    fill: ${token.color.red};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_QUOTE_INLINE_ELEMENT = `\n  .${QUOTE_INLINE_CONTAINER} {\n    container: ${ELEMENT_NAME} / inline-size;\n    width: 100%;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${QUOTE_INLINE_CONTAINER_WRAPPER} {\n      display: flex;\n      gap: ${token.spacing.lg};\n    }\n  }\n\n  ${ImageContainer}\n  ${TextContainer}\n  ${OverwriteWithImage}\n  ${OverwriteSizeLarge}\n  ${OverwriteSizedLargeWithImage}\n  ${OverwriteThemeMaryland}\n`;\n\nexport default (props: TypeInlineInline) => {\n  const { isSizeLarge, image, isThemeDark, isThemeMaryland } = props;\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n  const hasImage = image !== null;\n  const textContainer = Text.create({\n    ...props,\n  });\n  let styles = STYLES_QUOTE_INLINE_ELEMENT;\n\n  if (hasImage) {\n    const imageContainer = Image.create({\n      image: image as HTMLImageElement,\n    });\n\n    if (imageContainer) {\n      const iconSpan = document.createElement('span');\n      iconSpan.innerHTML = Utility.asset.icon.QUOTE;\n      imageContainer.element.appendChild(iconSpan);\n\n      wrapper.appendChild(imageContainer.element);\n      styles += imageContainer.styles;\n\n      container.setAttribute(ATTRIBUTE_WITH_IMAGE, '');\n    }\n  }\n\n  wrapper.classList.add(QUOTE_INLINE_CONTAINER_WRAPPER);\n  wrapper.appendChild(textContainer.element);\n  styles += textContainer.styles;\n\n  container.classList.add(QUOTE_INLINE_CONTAINER);\n  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, 'dark');\n  if (isThemeMaryland) container.setAttribute(ATTRIBUTE_THEME, THEME_MARYLAND);\n  if (isSizeLarge) container.setAttribute(ATTRIBUTE_SIZE, SIZE_LARGE);\n  container.appendChild(wrapper);\n\n  return { element: container, styles };\n};\n"],"names":["Text","Image","token","image","Utility.asset.icon.QUOTE"],"mappings":"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"}
+{"version":3,"file":"inline.js","sources":["../../../source/composite/quote/inline.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { image as elementImage, text as elementText } from './elements';\nimport { quoteAnimation } from './helper/animation';\nimport { SMALL } from './_constants';\nimport { type QuoteInlineProps } from './_types';\nimport { type ElementVisual } from '../../_types';\n\nexport default (props: QuoteInlineProps) => {\n  const { isSizeLarge, image } = props;\n  const textContainer = elementText(props);\n  const getInlineWrapperChildren = (props: QuoteInlineProps) => {\n    const wrapperChildren: ElementVisual[] = [];\n\n    if (image) {\n      const imageContainer = elementImage({\n        ...props,\n        isTypeFeatured: false,\n        image,\n      });\n\n      wrapperChildren.push(imageContainer);\n    }\n\n    wrapperChildren.push(textContainer);\n    return wrapperChildren;\n  };\n\n  const createWrapper = (children: ElementVisual[]) => {\n    return ElementModel.createDiv({\n      className: 'quote-inline-container-wrapper',\n      children: children,\n      elementStyles: {\n        element: {\n          [`@container (min-width: ${SMALL}px)`]: {\n            display: 'flex',\n            gap: token.spacing.lg,\n            ...(isSizeLarge && { gap: token.spacing.xl }),\n          },\n        },\n      },\n    });\n  };\n\n  const createContainer = (wrapper: ElementVisual) => {\n    return ElementModel.createDiv({\n      className: 'quote-inline-container',\n      children: [wrapper],\n      elementStyles: {\n        element: {\n          containerType: 'inline-size',\n          width: '100%',\n        },\n      },\n    });\n  };\n\n  const wrapperChildren = getInlineWrapperChildren(props);\n  const wrapper = createWrapper(wrapperChildren);\n\n  quoteAnimation({\n    ...props,\n    quoteElement: wrapper,\n  });\n\n  return createContainer(wrapper);\n};\n"],"names":["image","elementText","props","wrapperChildren","elementImage","ElementModel.createDiv","SMALL","token","wrapper","quoteAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAA,cAAe,CAAC,UAA4B;AAC1C,QAAM,EAAE,oBAAaA,QAAA,IAAU;AAC/B,QAAM,gBAAgBC,KAAY,KAAK;AACvC,QAAM,2BAA2B,CAACC,WAA4B;AAC5D,UAAMC,mBAAmC,CAAA;AAEzC,QAAIH,SAAO;AACT,YAAM,iBAAiBI,MAAa;AAAA,QAClC,GAAGF;AAAAA,QACH,gBAAgB;AAAA,QAAA,OAChBF;AAAAA,MAAA,CACD;AAEDG,uBAAgB,KAAK,cAAc;AAAA,IACrC;AAEAA,qBAAgB,KAAK,aAAa;AAClC,WAAOA;AAAAA,EACT;AAEA,QAAM,gBAAgB,CAAC,aAA8B;AACnD,WAAOE,gBAAuB;AAAA,MAC5B,WAAW;AAAA,MACX;AAAA,MACA,eAAe;AAAA,QACb,SAAS;AAAA,UACP,CAAC,0BAA0BC,gBAAK,KAAK,GAAG;AAAA,YACtC,SAAS;AAAA,YACT,KAAKC,iBAAM,QAAQ;AAAA,YACnB,GAAI,eAAe,EAAE,KAAKA,iBAAM,QAAQ,GAAA;AAAA,UAAG;AAAA,QAC7C;AAAA,MACF;AAAA,IACF,CACD;AAAA,EACH;AAEA,QAAM,kBAAkB,CAACC,aAA2B;AAClD,WAAOH,gBAAuB;AAAA,MAC5B,WAAW;AAAA,MACX,UAAU,CAACG,QAAO;AAAA,MAClB,eAAe;AAAA,QACb,SAAS;AAAA,UACP,eAAe;AAAA,UACf,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,IACF,CACD;AAAA,EACH;AAEA,QAAM,kBAAkB,yBAAyB,KAAK;AACtD,QAAM,UAAU,cAAc,eAAe;AAE7CC,2BAAe;AAAA,IACb,GAAG;AAAA,IACH,cAAc;AAAA,EAAA,CACf;AAED,SAAO,gBAAgB,OAAO;AAChC;;"}