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

package/dist/composite/quote/elements/text.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"text.mjs","sources":["../../../../source/composite/quote/elements/text.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { ElementModel } from 'model';\nimport { default as elementIcon } from './icon';\nimport { default as elementAction } from './action';\nimport { SMALL } from '../_constants';\nimport { type QuoteTextProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\nexport default (props: QuoteTextProps) => {\n  const {\n    isThemeDark,\n    isThemeMaryland,\n    isSizeLarge = false,\n    isTypeFeatured = false,\n    image,\n    quote,\n    attribution,\n    attributionSubText,\n    action,\n    includesAnimation,\n  } = props;\n\n  const createQuoteText = (\n    quote: HTMLElement,\n    quoteChildren: ElementVisual[],\n  ) => {\n    let quoteTextElement: HTMLElement = quote;\n    const wordsList = splitWords(quote);\n\n    if (includesAnimation) {\n      quoteTextElement = document.createElement('div');\n\n      wordsList.map((word) => {\n        quoteTextElement.appendChild(word);\n      });\n    }\n\n    const quoteElement = ElementModel.create({\n      element: quoteTextElement,\n      className: 'quote-container-quote',\n      children: quoteChildren,\n      elementStyles: {\n        element: {\n          position: 'relative',\n          fontWeight: '700',\n          color: token.color.black,\n          ...typography.sans.larger,\n\n          ...(isSizeLarge && { ...typography.sans.extraLarge }),\n\n          ...((isThemeDark || isThemeMaryland) && {\n            color: token.color.white,\n          }),\n\n          [`&::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            backgroundColor: token.color.red,\n            ...(isThemeMaryland && { backgroundColor: token.color.gold }),\n\n            ...(image &&\n              !isTypeFeatured && {\n                display: 'none',\n              }),\n\n            [`@container (min-width: ${SMALL}px)`]: {\n              left: `-${token.spacing.md}`,\n            },\n\n            [`@container (max-width: ${SMALL - 1}px)`]: {\n              ...(!isTypeFeatured && {\n                display: 'block',\n              }),\n            },\n          },\n\n          ['& *']: {\n            color: 'currentColor',\n            ...typography.sans.larger,\n            ...(isSizeLarge && { ...typography.sans.extraLarge }),\n          },\n        },\n      },\n    });\n\n    return quoteElement;\n  };\n\n  const getQuoteTextContainerChildren = (props: QuoteTextProps) => {\n    const wrapperChildren: ElementVisual[] = [];\n\n    if (quote) {\n      const quoteChildren: ElementVisual[] = [];\n      const iconSpan = elementIcon(props);\n\n      if (!image) {\n        quoteChildren.push(iconSpan);\n      }\n\n      const quoteElement = createQuoteText(quote, quoteChildren);\n\n      wrapperChildren.push(quoteElement);\n    }\n\n    if (attribution) {\n      const attributionElement = ElementModel.create({\n        element: attribution,\n        className: 'quote-container-attribution',\n        elementStyles: {\n          element: {\n            marginTop: token.spacing.sm,\n\n            ...(includesAnimation && {\n              opacity: '0',\n              transform: 'translateY(20px)',\n              transition: 'opacity 1s ease, transform 0.5s ease',\n            }),\n\n            ...(isThemeDark && {\n              color: token.color.white,\n            }),\n\n            [`& *`]: {\n              color: 'currentColor',\n              ...typography.sans.medium,\n            },\n          },\n        },\n      });\n\n      wrapperChildren.push(attributionElement);\n    }\n\n    if (attributionSubText) {\n      const attributionSubTextElement = ElementModel.create({\n        element: attributionSubText,\n        className: 'quote-container-text-attribution-sub-text',\n        elementStyles: {\n          element: {\n            color: token.color.gray.dark,\n            fontStyle: 'italic',\n            ...typography.sans.small,\n\n            ...(includesAnimation && {\n              opacity: '0',\n              transform: 'translateY(20px)',\n              transition: 'opacity 1s ease, transform 0.5s ease',\n            }),\n\n            ...((isThemeDark || isThemeMaryland) && {\n              color: token.color.white,\n            }),\n          },\n        },\n      });\n\n      wrapperChildren.push(attributionSubTextElement);\n    }\n\n    if (action) {\n      const actionElement = elementAction({\n        ...props,\n        action,\n      });\n\n      wrapperChildren.push(actionElement);\n    }\n\n    return wrapperChildren;\n  };\n\n  const splitWords = (quote: HTMLElement) => {\n    const text = quote.textContent ?? '';\n    const words = text.trim().split(/\\s+/);\n\n    const wordElements = words.map((word, index) => {\n      const wordElement = document.createElement('div');\n      wordElement.classList.add('quote-text-split-word');\n\n      Object.assign(wordElement.style, {\n        display: 'inline-block',\n        whiteSpace: 'pre-wrap',\n        opacity: '0',\n        transform: 'translateY(20px)',\n        transition: 'opacity 1s ease, transform 0.5s ease',\n      });\n\n      wordElement.textContent = word + (index < words.length - 1 ? ' ' : '');\n\n      return wordElement;\n    });\n\n    return wordElements;\n  };\n\n  const CreateQuoteTextContainer = (props: QuoteTextProps) => {\n    const wrapperChildren = getQuoteTextContainerChildren(props);\n\n    const wrapper = ElementModel.createDiv({\n      className: 'quote-text-container-wrapper',\n      children: wrapperChildren,\n    });\n\n    return ElementModel.createDiv({\n      className: 'quote-text-container',\n      children: [wrapper],\n      elementStyles: {\n        element: {\n          width: '100%',\n          ...typography.sans.medium,\n\n          [`@container (max-width: ${SMALL - 1}px)`]: {\n            paddingTop: token.spacing.lg,\n            paddingLeft: token.spacing.md,\n\n            ...(!isTypeFeatured && {\n              ...(isSizeLarge && { paddingTop: token.spacing['2xl'] }),\n            }),\n          },\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            paddingLeft: token.spacing['4xl'],\n\n            ...(!isTypeFeatured && {\n              ...(image && { paddingLeft: '0' }),\n            }),\n          },\n\n          [`& *`]: {\n            ...typography.sans.medium,\n\n            ...(isThemeDark && {\n              color: token.color.white,\n            }),\n\n            ...(isThemeMaryland && {\n              color: token.color.white,\n            }),\n          },\n        },\n      },\n    });\n  };\n\n  return CreateQuoteTextContainer(props);\n};\n"],"names":["quote","ElementModel.create","props","ElementModel.createDiv"],"mappings":"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"}
+{"version":3,"file":"text.mjs","sources":["../../../../source/composite/quote/elements/text.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { ElementModel } from 'model';\nimport { default as elementAction } from './action';\nimport { default as elementQuote } from './quote';\nimport { SMALL } from '../_constants';\nimport { type QuoteTextProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\ninterface ChildrenProps\n  extends Pick<\n    QuoteTextProps,\n    | 'quote'\n    | 'image'\n    | 'attribution'\n    | 'attributionSubText'\n    | 'action'\n    | 'isThemeDark'\n    | 'isSizeLarge'\n    | 'isTypeFeatured'\n    | 'includesAnimation'\n  > {\n  shouldHaveWhiteText?: boolean;\n  hasImage: boolean;\n}\n\nconst createChildren = (props: ChildrenProps) => {\n  const {\n    action,\n    attribution,\n    attributionSubText,\n    hasImage,\n    includesAnimation,\n    isThemeDark,\n    quote,\n    shouldHaveWhiteText,\n  } = props;\n  const wrapperChildren: ElementVisual[] = [];\n\n  if (quote) {\n    wrapperChildren.push(\n      elementQuote({ ...props, shouldHaveWhiteText, quote, hasImage }),\n    );\n  }\n\n  if (attribution) {\n    const attributionElement = ElementModel.create({\n      element: attribution,\n      className: 'quote-container-attribution',\n      elementStyles: {\n        element: {\n          marginTop: token.spacing.sm,\n\n          ...(includesAnimation && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n\n          ...(isThemeDark && {\n            color: token.color.white,\n          }),\n\n          [`& *`]: {\n            color: 'currentColor',\n            ...typography.sans.medium,\n          },\n        },\n      },\n    });\n\n    wrapperChildren.push(attributionElement);\n  }\n\n  if (attributionSubText) {\n    const attributionSubTextElement = ElementModel.create({\n      element: attributionSubText,\n      className: 'quote-container-text-attribution-sub-text',\n      elementStyles: {\n        element: {\n          color: token.color.gray.dark,\n          fontStyle: 'italic',\n          ...typography.sans.small,\n\n          ...(includesAnimation && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n\n          ...(shouldHaveWhiteText && {\n            color: token.color.white,\n          }),\n        },\n      },\n    });\n\n    wrapperChildren.push(attributionSubTextElement);\n  }\n\n  if (action) {\n    const actionElement = elementAction({\n      ...props,\n      action,\n    });\n\n    wrapperChildren.push(actionElement);\n  }\n\n  return wrapperChildren;\n};\n\nexport default (\n  props: Pick<\n    QuoteTextProps,\n    | 'isThemeDark'\n    | 'isThemeMaryland'\n    | 'isSizeLarge'\n    | 'isTypeFeatured'\n    | 'image'\n    | 'quote'\n    | 'attribution'\n    | 'attributionSubText'\n    | 'action'\n    | 'includesAnimation'\n  >,\n) => {\n  const {\n    image,\n    isSizeLarge = false,\n    isThemeDark,\n    isThemeMaryland,\n    isTypeFeatured = false,\n  } = props;\n  const shouldHaveWhiteText = isThemeDark || isThemeMaryland;\n  const isSizeLargeAndNotFeatured = isSizeLarge && !isTypeFeatured;\n  const hasImage = image != null;\n  const isHasImageAndNotFeatured = hasImage && !isTypeFeatured;\n\n  const wrapper = ElementModel.createDiv({\n    className: 'quote-text-container-wrapper',\n    children: [\n      ...createChildren({\n        ...props,\n        shouldHaveWhiteText,\n        hasImage,\n      }),\n    ],\n  });\n\n  return ElementModel.createDiv({\n    className: 'quote-text-container',\n    children: [wrapper],\n    elementStyles: {\n      element: {\n        width: '100%',\n        ...typography.sans.medium,\n\n        [`@container (max-width: ${SMALL - 1}px)`]: {\n          paddingLeft: token.spacing.md,\n\n          ...(!hasImage && {\n            paddingTop: token.spacing.lg,\n          }),\n\n          ...(isSizeLargeAndNotFeatured && {\n            paddingTop: token.spacing['2xl'],\n          }),\n        },\n\n        [`@container (min-width: ${SMALL}px)`]: {\n          paddingLeft: token.spacing['4xl'],\n\n          ...(isHasImageAndNotFeatured && { paddingLeft: '0' }),\n        },\n\n        [`& *`]: {\n          ...typography.sans.medium,\n\n          ...(shouldHaveWhiteText && {\n            color: token.color.white,\n          }),\n        },\n      },\n    },\n  });\n};\n"],"names":["ElementModel.create","ElementModel.createDiv"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"featured.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/featured.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;yBAsInC,OAAO,kBAAkB;;;;;AAAzC,wBAiGE"}
+{"version":3,"file":"featured.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/featured.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;yBAsInC,OAAO,kBAAkB;;;;;;;;AAAzC,wBAwGE"}

package/dist/composite/quote/featured.js

@@ -5,9 +5,9 @@ const index = require("../../model/elements/index.js");
 const inline = require("./inline.js");
 const image = require("./elements/image.js");
 require("@universityofmaryland/web-styles-library/typography");
+const action = require("./elements/action.js");
 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" } });
@@ -136,7 +136,7 @@ const createTextureContainer = ({
 const featured = (props) => {
   const { isThemeDark, isThemeMaryland, image: image2, isTransparent } = props;
   const wrapperChildren = [];
-  const inlineQuote = inline(props);
+  const inlineQuote = inline({ ...props, isTypeFeatured: true });
   const textContainer = index.createDiv({
     className: "quote-featured-text",
     children: [inlineQuote],
@@ -207,11 +207,18 @@ const featured = (props) => {
       }
     }
   });
-  animation.quoteAnimation({
-    ...props,
-    quoteElement: container
-  });
-  return container;
+  const loadAnimation = () => {
+    animation.quoteAnimation({
+      ...props,
+      quoteElement: container
+    });
+  };
+  return {
+    ...container,
+    events: {
+      loadAnimation
+    }
+  };
 };
 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 * 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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"}
+{"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, isTypeFeatured: true });\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  const loadAnimation = () => {\n    quoteAnimation({\n      ...props,\n      quoteElement: container,\n    });\n  };\n\n  return {\n    ...container,\n    events: {\n      loadAnimation,\n    },\n  };\n};\n"],"names":["image","action","containerChildren","elementImage","elementAction","ElementModel.createDiv","token","SMALL","MEDIUM","imageFromSvg","ElementModel.create","InlineQuote","quoteAnimation"],"mappings":"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"}

package/dist/composite/quote/featured.mjs

@@ -4,9 +4,9 @@ import { createDiv, create } from "../../model/elements/index.mjs";
 import InlineQuote from "./inline.mjs";
 import elementImage from "./elements/image.mjs";
 import "@universityofmaryland/web-styles-library/typography";
+import elementAction from "./elements/action.mjs";
 import "@universityofmaryland/web-icons-library/brand";
 import { MEDIUM, SMALL } from "./_constants.mjs";
-import elementAction from "./elements/action.mjs";
 import { quoteAnimation } from "./helper/animation.mjs";
 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>`;
@@ -118,7 +118,7 @@ const createTextureContainer = ({
 const featured = (props) => {
   const { isThemeDark, isThemeMaryland, image, isTransparent } = props;
   const wrapperChildren = [];
-  const inlineQuote = InlineQuote(props);
+  const inlineQuote = InlineQuote({ ...props, isTypeFeatured: true });
   const textContainer = createDiv({
     className: "quote-featured-text",
     children: [inlineQuote],
@@ -189,11 +189,18 @@ const featured = (props) => {
       }
     }
   });
-  quoteAnimation({
-    ...props,
-    quoteElement: container
-  });
-  return container;
+  const loadAnimation = () => {
+    quoteAnimation({
+      ...props,
+      quoteElement: container
+    });
+  };
+  return {
+    ...container,
+    events: {
+      loadAnimation
+    }
+  };
 };
 export {
   featured as default

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

@@ -1 +1 @@
-{"version":3,"file":"featured.mjs","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":["containerChildren","ElementModel.createDiv","ElementModel.create"],"mappings":"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"}
+{"version":3,"file":"featured.mjs","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, isTypeFeatured: true });\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  const loadAnimation = () => {\n    quoteAnimation({\n      ...props,\n      quoteElement: container,\n    });\n  };\n\n  return {\n    ...container,\n    events: {\n      loadAnimation,\n    },\n  };\n};\n"],"names":["containerChildren","ElementModel.createDiv","ElementModel.create"],"mappings":"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"}

package/dist/composite/quote/helper/animation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/helper/animation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACxE,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,UAAU,mBACR,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,mBAAmB,GAAG,OAAO,CAAC;IAC/D,YAAY,EAAE,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc,GAAI,oEAM5B,mBAAmB,SAwErB,CAAC"}
+{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/helper/animation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACxE,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,UAAU,mBACR,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,mBAAmB,GAAG,OAAO,CAAC;IAC/D,YAAY,EAAE,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc,GAAI,oEAM5B,mBAAmB,SAgHrB,CAAC"}

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"}