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

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

@@ -7,6 +7,7 @@ const quoteAnimation = ({
   quote,
   quoteElement
 }) => {
+  if (!includesAnimation || !quote) return;
   const quoteTextElement = quoteElement.element.querySelector(
     ".quote-container-quote"
   );
@@ -19,45 +20,69 @@ const quoteAnimation = ({
   const actionsElement = quoteElement.element.querySelector(
     ".quote-container-actions"
   );
+  const animateAction = !isTypeFeatured || isTypeFeatured && !image;
+  const applyFinalState = () => {
+    const wordsList = Array.from(
+      quoteTextElement.querySelectorAll(".quote-text-split-word")
+    );
+    wordsList.forEach((word) => {
+      word.style.transition = "none";
+      word.style.opacity = "1";
+      word.style.transform = "translateY(0)";
+    });
+    if (attributionElement) {
+      attributionElement.style.transition = "none";
+      attributionElement.style.opacity = "1";
+      attributionElement.style.transform = "translateY(0)";
+    }
+    if (attributionSubTextElement) {
+      attributionSubTextElement.style.transition = "none";
+      attributionSubTextElement.style.opacity = "1";
+      attributionSubTextElement.style.transform = "translateY(0)";
+    }
+    if (actionsElement && animateAction) {
+      actionsElement.style.transition = "none";
+      actionsElement.style.opacity = "1";
+      actionsElement.style.transform = "translateY(0)";
+    }
+  };
+  const runAnimation = () => {
+    const wordsList = Array.from(
+      quoteTextElement.querySelectorAll(".quote-text-split-word")
+    );
+    let quoteAnimationLength = 50;
+    wordsList.forEach((word, i) => {
+      setTimeout(() => {
+        word.style.opacity = "1";
+        word.style.transform = "translateY(0)";
+      }, i * 50);
+      quoteAnimationLength += 50;
+    });
+    if (attributionElement) {
+      setTimeout(() => {
+        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);
+    }
+  };
   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);
-          }
+          runAnimation();
+          observer.unobserve(entry.target);
         }
       });
     },
@@ -66,7 +91,13 @@ const quoteAnimation = ({
       threshold: 0
     }
   );
-  if (quoteTextElement && includesAnimation) {
+  const rect = quoteTextElement.getBoundingClientRect();
+  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+  const triggerPoint = windowHeight - 120;
+  const isAlreadyPast = rect.top < triggerPoint;
+  if (isAlreadyPast) {
+    applyFinalState();
+  } else {
     observer.observe(quoteTextElement);
   }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"animation.js","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;;"}
+{"version":3,"file":"animation.js","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  if (!includesAnimation || !quote) return;\n\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 animateAction = !isTypeFeatured || (isTypeFeatured && !image);\n\n  const applyFinalState = () => {\n    const wordsList = Array.from(\n      quoteTextElement.querySelectorAll('.quote-text-split-word'),\n    ) as HTMLElement[];\n\n    wordsList.forEach((word) => {\n      word.style.transition = 'none';\n      word.style.opacity = '1';\n      word.style.transform = 'translateY(0)';\n    });\n\n    if (attributionElement) {\n      attributionElement.style.transition = 'none';\n      attributionElement.style.opacity = '1';\n      attributionElement.style.transform = 'translateY(0)';\n    }\n\n    if (attributionSubTextElement) {\n      attributionSubTextElement.style.transition = 'none';\n      attributionSubTextElement.style.opacity = '1';\n      attributionSubTextElement.style.transform = 'translateY(0)';\n    }\n\n    if (actionsElement && animateAction) {\n      actionsElement.style.transition = 'none';\n      actionsElement.style.opacity = '1';\n      actionsElement.style.transform = 'translateY(0)';\n    }\n  };\n\n  const runAnimation = () => {\n    const wordsList = Array.from(\n      quoteTextElement.querySelectorAll('.quote-text-split-word'),\n    ) as HTMLElement[];\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        attributionElement.style.opacity = '1';\n        attributionElement.style.transform = 'translateY(0)';\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  const observer = new IntersectionObserver(\n    (entries) => {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting) {\n          runAnimation();\n          observer.unobserve(entry.target);\n        }\n      });\n    },\n    {\n      rootMargin: '0px 0px -120px 0px',\n      threshold: 0,\n    },\n  );\n\n  const rect = quoteTextElement.getBoundingClientRect();\n  const windowHeight =\n    window.innerHeight || document.documentElement.clientHeight;\n  const triggerPoint = windowHeight - 120;\n  const isAlreadyPast = rect.top < triggerPoint;\n\n  if (isAlreadyPast) {\n    applyFinalState();\n  } else {\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,MAAI,CAAC,qBAAqB,CAAC,MAAO;AAElC,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,gBAAgB,CAAC,kBAAmB,kBAAkB,CAAC;AAE7D,QAAM,kBAAkB,MAAM;AAC5B,UAAM,YAAY,MAAM;AAAA,MACtB,iBAAiB,iBAAiB,wBAAwB;AAAA,IAAA;AAG5D,cAAU,QAAQ,CAAC,SAAS;AAC1B,WAAK,MAAM,aAAa;AACxB,WAAK,MAAM,UAAU;AACrB,WAAK,MAAM,YAAY;AAAA,IACzB,CAAC;AAED,QAAI,oBAAoB;AACtB,yBAAmB,MAAM,aAAa;AACtC,yBAAmB,MAAM,UAAU;AACnC,yBAAmB,MAAM,YAAY;AAAA,IACvC;AAEA,QAAI,2BAA2B;AAC7B,gCAA0B,MAAM,aAAa;AAC7C,gCAA0B,MAAM,UAAU;AAC1C,gCAA0B,MAAM,YAAY;AAAA,IAC9C;AAEA,QAAI,kBAAkB,eAAe;AACnC,qBAAe,MAAM,aAAa;AAClC,qBAAe,MAAM,UAAU;AAC/B,qBAAe,MAAM,YAAY;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,eAAe,MAAM;AACzB,UAAM,YAAY,MAAM;AAAA,MACtB,iBAAiB,iBAAiB,wBAAwB;AAAA,IAAA;AAG5D,QAAI,uBAAuB;AAE3B,cAAU,QAAQ,CAAC,MAAM,MAAM;AAC7B,iBAAW,MAAM;AACf,aAAK,MAAM,UAAU;AACrB,aAAK,MAAM,YAAY;AAAA,MACzB,GAAG,IAAI,EAAE;AAET,8BAAwB;AAAA,IAC1B,CAAC;AAED,QAAI,oBAAoB;AACtB,iBAAW,MAAM;AACf,2BAAmB,MAAM,UAAU;AACnC,2BAAmB,MAAM,YAAY;AAAA,MACvC,GAAG,oBAAoB;AAAA,IACzB;AAEA,QAAI,2BAA2B;AAC7B,iBAAW,MAAM;AACf,kCAA0B,MAAM,UAAU;AAC1C,kCAA0B,MAAM,YAAY;AAAA,MAC9C,GAAG,oBAAoB;AAAA,IACzB;AAEA,QAAI,kBAAkB,eAAe;AACnC,iBAAW,MAAM;AACf,uBAAe,MAAM,UAAU;AAC/B,uBAAe,MAAM,YAAY;AAAA,MACnC,GAAG,oBAAoB;AAAA,IACzB;AAAA,EACF;AAEA,QAAM,WAAW,IAAI;AAAA,IACnB,CAAC,YAAY;AACX,cAAQ,QAAQ,CAAC,UAAU;AACzB,YAAI,MAAM,gBAAgB;AACxB,uBAAA;AACA,mBAAS,UAAU,MAAM,MAAM;AAAA,QACjC;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE,YAAY;AAAA,MACZ,WAAW;AAAA,IAAA;AAAA,EACb;AAGF,QAAM,OAAO,iBAAiB,sBAAA;AAC9B,QAAM,eACJ,OAAO,eAAe,SAAS,gBAAgB;AACjD,QAAM,eAAe,eAAe;AACpC,QAAM,gBAAgB,KAAK,MAAM;AAEjC,MAAI,eAAe;AACjB,oBAAA;AAAA,EACF,OAAO;AACL,aAAS,QAAQ,gBAAgB;AAAA,EACnC;AACF;;"}

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

@@ -5,6 +5,7 @@ const quoteAnimation = ({
   quote,
   quoteElement
 }) => {
+  if (!includesAnimation || !quote) return;
   const quoteTextElement = quoteElement.element.querySelector(
     ".quote-container-quote"
   );
@@ -17,45 +18,69 @@ const quoteAnimation = ({
   const actionsElement = quoteElement.element.querySelector(
     ".quote-container-actions"
   );
+  const animateAction = !isTypeFeatured || isTypeFeatured && !image;
+  const applyFinalState = () => {
+    const wordsList = Array.from(
+      quoteTextElement.querySelectorAll(".quote-text-split-word")
+    );
+    wordsList.forEach((word) => {
+      word.style.transition = "none";
+      word.style.opacity = "1";
+      word.style.transform = "translateY(0)";
+    });
+    if (attributionElement) {
+      attributionElement.style.transition = "none";
+      attributionElement.style.opacity = "1";
+      attributionElement.style.transform = "translateY(0)";
+    }
+    if (attributionSubTextElement) {
+      attributionSubTextElement.style.transition = "none";
+      attributionSubTextElement.style.opacity = "1";
+      attributionSubTextElement.style.transform = "translateY(0)";
+    }
+    if (actionsElement && animateAction) {
+      actionsElement.style.transition = "none";
+      actionsElement.style.opacity = "1";
+      actionsElement.style.transform = "translateY(0)";
+    }
+  };
+  const runAnimation = () => {
+    const wordsList = Array.from(
+      quoteTextElement.querySelectorAll(".quote-text-split-word")
+    );
+    let quoteAnimationLength = 50;
+    wordsList.forEach((word, i) => {
+      setTimeout(() => {
+        word.style.opacity = "1";
+        word.style.transform = "translateY(0)";
+      }, i * 50);
+      quoteAnimationLength += 50;
+    });
+    if (attributionElement) {
+      setTimeout(() => {
+        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);
+    }
+  };
   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);
-          }
+          runAnimation();
+          observer.unobserve(entry.target);
         }
       });
     },
@@ -64,7 +89,13 @@ const quoteAnimation = ({
       threshold: 0
     }
   );
-  if (quoteTextElement && includesAnimation) {
+  const rect = quoteTextElement.getBoundingClientRect();
+  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+  const triggerPoint = windowHeight - 120;
+  const isAlreadyPast = rect.top < triggerPoint;
+  if (isAlreadyPast) {
+    applyFinalState();
+  } else {
     observer.observe(quoteTextElement);
   }
 };

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

@@ -1 +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;"}
+{"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  if (!includesAnimation || !quote) return;\n\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 animateAction = !isTypeFeatured || (isTypeFeatured && !image);\n\n  const applyFinalState = () => {\n    const wordsList = Array.from(\n      quoteTextElement.querySelectorAll('.quote-text-split-word'),\n    ) as HTMLElement[];\n\n    wordsList.forEach((word) => {\n      word.style.transition = 'none';\n      word.style.opacity = '1';\n      word.style.transform = 'translateY(0)';\n    });\n\n    if (attributionElement) {\n      attributionElement.style.transition = 'none';\n      attributionElement.style.opacity = '1';\n      attributionElement.style.transform = 'translateY(0)';\n    }\n\n    if (attributionSubTextElement) {\n      attributionSubTextElement.style.transition = 'none';\n      attributionSubTextElement.style.opacity = '1';\n      attributionSubTextElement.style.transform = 'translateY(0)';\n    }\n\n    if (actionsElement && animateAction) {\n      actionsElement.style.transition = 'none';\n      actionsElement.style.opacity = '1';\n      actionsElement.style.transform = 'translateY(0)';\n    }\n  };\n\n  const runAnimation = () => {\n    const wordsList = Array.from(\n      quoteTextElement.querySelectorAll('.quote-text-split-word'),\n    ) as HTMLElement[];\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        attributionElement.style.opacity = '1';\n        attributionElement.style.transform = 'translateY(0)';\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  const observer = new IntersectionObserver(\n    (entries) => {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting) {\n          runAnimation();\n          observer.unobserve(entry.target);\n        }\n      });\n    },\n    {\n      rootMargin: '0px 0px -120px 0px',\n      threshold: 0,\n    },\n  );\n\n  const rect = quoteTextElement.getBoundingClientRect();\n  const windowHeight =\n    window.innerHeight || document.documentElement.clientHeight;\n  const triggerPoint = windowHeight - 120;\n  const isAlreadyPast = rect.top < triggerPoint;\n\n  if (isAlreadyPast) {\n    applyFinalState();\n  } else {\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,MAAI,CAAC,qBAAqB,CAAC,MAAO;AAElC,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,gBAAgB,CAAC,kBAAmB,kBAAkB,CAAC;AAE7D,QAAM,kBAAkB,MAAM;AAC5B,UAAM,YAAY,MAAM;AAAA,MACtB,iBAAiB,iBAAiB,wBAAwB;AAAA,IAAA;AAG5D,cAAU,QAAQ,CAAC,SAAS;AAC1B,WAAK,MAAM,aAAa;AACxB,WAAK,MAAM,UAAU;AACrB,WAAK,MAAM,YAAY;AAAA,IACzB,CAAC;AAED,QAAI,oBAAoB;AACtB,yBAAmB,MAAM,aAAa;AACtC,yBAAmB,MAAM,UAAU;AACnC,yBAAmB,MAAM,YAAY;AAAA,IACvC;AAEA,QAAI,2BAA2B;AAC7B,gCAA0B,MAAM,aAAa;AAC7C,gCAA0B,MAAM,UAAU;AAC1C,gCAA0B,MAAM,YAAY;AAAA,IAC9C;AAEA,QAAI,kBAAkB,eAAe;AACnC,qBAAe,MAAM,aAAa;AAClC,qBAAe,MAAM,UAAU;AAC/B,qBAAe,MAAM,YAAY;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,eAAe,MAAM;AACzB,UAAM,YAAY,MAAM;AAAA,MACtB,iBAAiB,iBAAiB,wBAAwB;AAAA,IAAA;AAG5D,QAAI,uBAAuB;AAE3B,cAAU,QAAQ,CAAC,MAAM,MAAM;AAC7B,iBAAW,MAAM;AACf,aAAK,MAAM,UAAU;AACrB,aAAK,MAAM,YAAY;AAAA,MACzB,GAAG,IAAI,EAAE;AAET,8BAAwB;AAAA,IAC1B,CAAC;AAED,QAAI,oBAAoB;AACtB,iBAAW,MAAM;AACf,2BAAmB,MAAM,UAAU;AACnC,2BAAmB,MAAM,YAAY;AAAA,MACvC,GAAG,oBAAoB;AAAA,IACzB;AAEA,QAAI,2BAA2B;AAC7B,iBAAW,MAAM;AACf,kCAA0B,MAAM,UAAU;AAC1C,kCAA0B,MAAM,YAAY;AAAA,MAC9C,GAAG,oBAAoB;AAAA,IACzB;AAEA,QAAI,kBAAkB,eAAe;AACnC,iBAAW,MAAM;AACf,uBAAe,MAAM,UAAU;AAC/B,uBAAe,MAAM,YAAY;AAAA,MACnC,GAAG,oBAAoB;AAAA,IACzB;AAAA,EACF;AAEA,QAAM,WAAW,IAAI;AAAA,IACnB,CAAC,YAAY;AACX,cAAQ,QAAQ,CAAC,UAAU;AACzB,YAAI,MAAM,gBAAgB;AACxB,uBAAA;AACA,mBAAS,UAAU,MAAM,MAAM;AAAA,QACjC;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE,YAAY;AAAA,MACZ,WAAW;AAAA,IAAA;AAAA,EACb;AAGF,QAAM,OAAO,iBAAiB,sBAAA;AAC9B,QAAM,eACJ,OAAO,eAAe,SAAS,gBAAgB;AACjD,QAAM,eAAe,eAAe;AACpC,QAAM,gBAAgB,KAAK,MAAM;AAEjC,MAAI,eAAe;AACjB,oBAAA;AAAA,EACF,OAAO;AACL,aAAS,QAAQ,gBAAgB;AAAA,EACnC;AACF;"}

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

@@ -1,5 +1,8 @@
 import { QuoteInlineProps } from './_types';
 declare const _default: (props: QuoteInlineProps) => {
+    events: {
+        loadAnimation: () => void;
+    };
     element: HTMLElement;
     className: string;
     styles: string;

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":"AAKA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;yBAGjC,OAAO,gBAAgB;;;;;AAAvC,wBA0DE"}
+{"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,wBAiEE"}

package/dist/composite/quote/inline.js

@@ -6,6 +6,7 @@ const text = require("./elements/text.js");
 require("@universityofmaryland/web-icons-library/brand");
 const _constants = require("./_constants.js");
 require("@universityofmaryland/web-styles-library/layout");
+require("@universityofmaryland/web-styles-library/typography");
 const animation = require("./helper/animation.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -25,14 +26,14 @@ function _interopNamespaceDefault(e) {
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const InlineQuote = (props) => {
-  const { isSizeLarge, image: image$1 } = props;
+  const { isSizeLarge, image: image$1, isTypeFeatured = false } = props;
   const textContainer = text(props);
   const getInlineWrapperChildren = (props2) => {
     const wrapperChildren2 = [];
     if (image$1) {
       const imageContainer = image({
         ...props2,
-        isTypeFeatured: false,
+        isTypeFeatured,
         image: image$1
       });
       wrapperChildren2.push(imageContainer);
@@ -69,11 +70,18 @@ const InlineQuote = (props) => {
   };
   const wrapperChildren = getInlineWrapperChildren(props);
   const wrapper = createWrapper(wrapperChildren);
-  animation.quoteAnimation({
-    ...props,
-    quoteElement: wrapper
-  });
-  return createContainer(wrapper);
+  const loadAnimation = () => {
+    animation.quoteAnimation({
+      ...props,
+      quoteElement: wrapper
+    });
+  };
+  return {
+    ...createContainer(wrapper),
+    events: {
+      loadAnimation
+    }
+  };
 };
 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 * 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;;"}
+{"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, isTypeFeatured = false } = 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,\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  const loadAnimation = () => {\n    quoteAnimation({\n      ...props,\n      quoteElement: wrapper,\n    });\n  };\n\n  return {\n    ...createContainer(wrapper),\n    events: {\n      loadAnimation,\n    },\n  };\n};\n"],"names":["image","elementText","props","wrapperChildren","elementImage","ElementModel.createDiv","SMALL","token","wrapper","quoteAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAA,cAAe,CAAC,UAA4B;AAC1C,QAAM,EAAE,aAAA,OAAaA,SAAO,iBAAiB,UAAU;AACvD,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;AAAA,QAAA,OACAF;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;AAE7C,QAAM,gBAAgB,MAAM;AAC1BC,6BAAe;AAAA,MACb,GAAG;AAAA,MACH,cAAc;AAAA,IAAA,CACf;AAAA,EACH;AAEA,SAAO;AAAA,IACL,GAAG,gBAAgB,OAAO;AAAA,IAC1B,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ;;"}

package/dist/composite/quote/inline.mjs

@@ -5,16 +5,17 @@ import elementText from "./elements/text.mjs";
 import "@universityofmaryland/web-icons-library/brand";
 import { SMALL } from "./_constants.mjs";
 import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-styles-library/typography";
 import { quoteAnimation } from "./helper/animation.mjs";
 const InlineQuote = (props) => {
-  const { isSizeLarge, image } = props;
+  const { isSizeLarge, image, isTypeFeatured = false } = props;
   const textContainer = elementText(props);
   const getInlineWrapperChildren = (props2) => {
     const wrapperChildren2 = [];
     if (image) {
       const imageContainer = elementImage({
         ...props2,
-        isTypeFeatured: false,
+        isTypeFeatured,
         image
       });
       wrapperChildren2.push(imageContainer);
@@ -51,11 +52,18 @@ const InlineQuote = (props) => {
   };
   const wrapperChildren = getInlineWrapperChildren(props);
   const wrapper = createWrapper(wrapperChildren);
-  quoteAnimation({
-    ...props,
-    quoteElement: wrapper
-  });
-  return createContainer(wrapper);
+  const loadAnimation = () => {
+    quoteAnimation({
+      ...props,
+      quoteElement: wrapper
+    });
+  };
+  return {
+    ...createContainer(wrapper),
+    events: {
+      loadAnimation
+    }
+  };
 };
 export {
   InlineQuote as default

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

@@ -1 +1 @@
-{"version":3,"file":"inline.mjs","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":["props","wrapperChildren","ElementModel.createDiv","wrapper"],"mappings":";;;;;;;;AAQA,MAAA,cAAe,CAAC,UAA4B;AAC1C,QAAM,EAAE,aAAa,MAAA,IAAU;AAC/B,QAAM,gBAAgB,YAAY,KAAK;AACvC,QAAM,2BAA2B,CAACA,WAA4B;AAC5D,UAAMC,mBAAmC,CAAA;AAEzC,QAAI,OAAO;AACT,YAAM,iBAAiB,aAAa;AAAA,QAClC,GAAGD;AAAAA,QACH,gBAAgB;AAAA,QAChB;AAAA,MAAA,CACD;AAEDC,uBAAgB,KAAK,cAAc;AAAA,IACrC;AAEAA,qBAAgB,KAAK,aAAa;AAClC,WAAOA;AAAAA,EACT;AAEA,QAAM,gBAAgB,CAAC,aAA8B;AACnD,WAAOC,UAAuB;AAAA,MAC5B,WAAW;AAAA,MACX;AAAA,MACA,eAAe;AAAA,QACb,SAAS;AAAA,UACP,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,YACtC,SAAS;AAAA,YACT,KAAK,MAAM,QAAQ;AAAA,YACnB,GAAI,eAAe,EAAE,KAAK,MAAM,QAAQ,GAAA;AAAA,UAAG;AAAA,QAC7C;AAAA,MACF;AAAA,IACF,CACD;AAAA,EACH;AAEA,QAAM,kBAAkB,CAACC,aAA2B;AAClD,WAAOD,UAAuB;AAAA,MAC5B,WAAW;AAAA,MACX,UAAU,CAACC,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;AAE7C,iBAAe;AAAA,IACb,GAAG;AAAA,IACH,cAAc;AAAA,EAAA,CACf;AAED,SAAO,gBAAgB,OAAO;AAChC;"}
+{"version":3,"file":"inline.mjs","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, isTypeFeatured = false } = 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,\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  const loadAnimation = () => {\n    quoteAnimation({\n      ...props,\n      quoteElement: wrapper,\n    });\n  };\n\n  return {\n    ...createContainer(wrapper),\n    events: {\n      loadAnimation,\n    },\n  };\n};\n"],"names":["props","wrapperChildren","ElementModel.createDiv","wrapper"],"mappings":";;;;;;;;;AAQA,MAAA,cAAe,CAAC,UAA4B;AAC1C,QAAM,EAAE,aAAa,OAAO,iBAAiB,UAAU;AACvD,QAAM,gBAAgB,YAAY,KAAK;AACvC,QAAM,2BAA2B,CAACA,WAA4B;AAC5D,UAAMC,mBAAmC,CAAA;AAEzC,QAAI,OAAO;AACT,YAAM,iBAAiB,aAAa;AAAA,QAClC,GAAGD;AAAAA,QACH;AAAA,QACA;AAAA,MAAA,CACD;AAEDC,uBAAgB,KAAK,cAAc;AAAA,IACrC;AAEAA,qBAAgB,KAAK,aAAa;AAClC,WAAOA;AAAAA,EACT;AAEA,QAAM,gBAAgB,CAAC,aAA8B;AACnD,WAAOC,UAAuB;AAAA,MAC5B,WAAW;AAAA,MACX;AAAA,MACA,eAAe;AAAA,QACb,SAAS;AAAA,UACP,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,YACtC,SAAS;AAAA,YACT,KAAK,MAAM,QAAQ;AAAA,YACnB,GAAI,eAAe,EAAE,KAAK,MAAM,QAAQ,GAAA;AAAA,UAAG;AAAA,QAC7C;AAAA,MACF;AAAA,IACF,CACD;AAAA,EACH;AAEA,QAAM,kBAAkB,CAACC,aAA2B;AAClD,WAAOD,UAAuB;AAAA,MAC5B,WAAW;AAAA,MACX,UAAU,CAACC,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;AAE7C,QAAM,gBAAgB,MAAM;AAC1B,mBAAe;AAAA,MACb,GAAG;AAAA,MACH,cAAc;AAAA,IAAA,CACf;AAAA,EACH;AAEA,SAAO;AAAA,IACL,GAAG,gBAAgB,OAAO;AAAA,IAC1B,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universityofmaryland/web-elements-library",
-  "version": "1.5.0-beta.0",
+  "version": "1.5.0",
   "description": "UMD Web Elements",
   "main": "dist/index.js",
   "module": "dist/index.mjs",