@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

package/dist/composite/quote/featured.js

@@ -1,10 +1,11 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
 const media = require("@universityofmaryland/web-utilities-library/media");
-const index = require("../../model/elements/index.js");
 const inline = require("./inline.js");
 const image = require("./elements/image.js");
 require("@universityofmaryland/web-styles-library/typography");
+require("@universityofmaryland/web-utilities-library/theme");
 const action = require("./elements/action.js");
 require("@universityofmaryland/web-icons-library/brand");
 const _constants = require("./_constants.js");
@@ -26,62 +27,51 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const BACKGROUND_TEXTURE_LIGHT = `<svg id="quote_background_light" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 850.5 532.1"><path d="M.3,0h332.7L.3,326.6V0Z" fill="#757575" fill-rule="evenodd" isolation="isolate" opacity=".04" stroke-width="0"/><path d="M517.9,532.1h332.7L308.6,0H0v23.6l517.9,508.5Z" fill="#000" fill-rule="evenodd" isolation="isolate" opacity=".04" stroke-width="0"/></svg>`;
-const BACKGROUND_TEXTURE_DARK = `<svg id="quote_background_dark" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 614.86 300.65"><defs><style>.cls-1{opacity:.25;}.cls-1,.cls-2{fill:#757575;fill-rule:evenodd;isolation:isolate;}.cls-2{opacity:.1;}</style></defs><path class="cls-2" d="m.27,0h332.67L27.46,299.93H.27V0Z"/><path class="cls-1" d="m0,0h308.65l306.21,300.65h-332.67L0,23.59V0Z"/></svg>`;
+const BACKGROUND_TEXTURE_LIGHT = `<svg id="quote_background_light" aria-hidden="true" title="background decoration" 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" title="background decoration" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 614.86 300.65"><defs><style>.cls-1{opacity:.25;}.cls-1,.cls-2{fill:#757575;fill-rule:evenodd;isolation:isolate;}.cls-2{opacity:.1;}</style></defs><path class="cls-2" d="m.27,0h332.67L27.46,299.93H.27V0Z"/><path class="cls-1" d="m0,0h308.65l306.21,300.65h-332.67L0,23.59V0Z"/></svg>`;
 const createImageContainer = (props) => {
   const { image: image$1, action: action$1 } = props;
-  const getContainerChildren = () => {
-    const containerChildren2 = [];
-    if (image$1) {
-      const imageElement = image({
-        ...props,
-        isTypeFeatured: true,
-        image: image$1
-      });
-      containerChildren2.push(imageElement);
-    }
-    if (action$1) {
-      const actionElement = action({
-        isTypeFeatured: true,
-        action: action$1
-      });
-      containerChildren2.push(actionElement);
-    }
-    return containerChildren2;
-  };
-  const createImageContainerElement = () => {
-    return index.createDiv({
-      className: "quote-featured-image",
-      children: containerChildren,
-      elementStyles: {
-        element: {
-          position: "relative",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          marginTop: `-${token__namespace.spacing.lg}`,
-          ["&[align-center=true]"]: {
-            marginTop: "0",
-            justifyContent: "center"
-          },
-          [`@container (max-width: ${_constants.SMALL - 1}px)`]: {
-            padding: `0 ${token__namespace.spacing.lg}`
-          },
-          [`@container (min-width: ${_constants.SMALL}px) and (max-width: ${_constants.MEDIUM - 1}px)`]: {
-            margin: "0 auto",
-            marginTop: `-${token__namespace.spacing["8xl"]}`,
-            maxWidth: "300px"
-          },
-          [`@container (min-width: ${_constants.MEDIUM}px)`]: {
-            paddingLeft: token__namespace.spacing["6xl"],
-            width: `calc(300px + ${token__namespace.spacing["6xl"]})`
-          }
-        }
+  const containerBuilder = new webBuilderLibrary.ElementBuilder().withClassName("quote-featured-image").withStyles({
+    element: {
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      marginTop: `-${token__namespace.spacing.lg}`,
+      ["&[align-center=true]"]: {
+        marginTop: "0",
+        justifyContent: "center"
+      },
+      [`@container (max-width: ${_constants.SMALL - 1}px)`]: {
+        padding: `0 ${token__namespace.spacing.lg}`
+      },
+      [`@container (min-width: ${_constants.SMALL}px) and (max-width: ${_constants.MEDIUM - 1}px)`]: {
+        margin: "0 auto",
+        marginTop: `-${token__namespace.spacing["8xl"]}`,
+        maxWidth: "300px"
+      },
+      [`@container (min-width: ${_constants.MEDIUM}px)`]: {
+        paddingLeft: token__namespace.spacing["6xl"],
+        width: `calc(300px + ${token__namespace.spacing["6xl"]})`
       }
+    }
+  });
+  if (image$1) {
+    const imageElement = image({
+      ...props,
+      isTypeFeatured: true,
+      image: image$1
     });
-  };
-  const containerChildren = getContainerChildren();
-  const container = createImageContainerElement();
+    containerBuilder.withChild(imageElement);
+  }
+  if (action$1) {
+    const actionElement = action({
+      isTypeFeatured: true,
+      action: action$1
+    });
+    containerBuilder.withChild(actionElement);
+  }
+  const container = containerBuilder.build();
   if (window.innerWidth >= _constants.MEDIUM && image$1 instanceof HTMLImageElement) {
     image$1.addEventListener("load", () => {
       const parent = container;
@@ -102,111 +92,88 @@ const createTextureContainer = ({
   const backgroundTexture = media.imageFromSvg({
     SVG: isDarkText ? BACKGROUND_TEXTURE_DARK : BACKGROUND_TEXTURE_LIGHT
   });
-  const backgroundTextureElement = index.create({
-    element: backgroundTexture,
-    className: "quote-background-texture"
-  });
-  const container = index.createDiv({
-    className: "quote-featured-texture",
-    children: [backgroundTextureElement],
-    elementStyles: {
-      element: {
-        overflow: "hidden",
+  const backgroundTextureElement = new webBuilderLibrary.ElementBuilder(backgroundTexture).withClassName("quote-background-texture").build();
+  const container = new webBuilderLibrary.ElementBuilder().withClassName("quote-featured-texture").withChild(backgroundTextureElement).withStyles({
+    element: {
+      overflow: "hidden",
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      [`& > img`]: {
         position: "absolute",
         top: "0",
         left: "0",
-        width: "100%",
-        height: "100%",
-        [`& > img`]: {
-          position: "absolute",
-          top: "0",
-          left: "0",
-          width: "70%",
-          height: "120%",
-          objectFit: "cover"
-        },
-        [`@container (max-width: ${_constants.MEDIUM - 1}px)`]: {
-          display: "none"
-        }
+        width: "70%",
+        height: "120%",
+        objectFit: "cover"
+      },
+      [`@container (max-width: ${_constants.MEDIUM - 1}px)`]: {
+        display: "none"
       }
     }
-  });
+  }).build();
   return container;
 };
 const featured = (props) => {
   const { isThemeDark, isThemeMaryland, image: image2, isTransparent } = props;
-  const wrapperChildren = [];
   const inlineQuote = inline({ ...props, isTypeFeatured: true });
-  const textContainer = index.createDiv({
-    className: "quote-featured-text",
-    children: [inlineQuote],
-    elementStyles: {
-      element: {
-        padding: token__namespace.spacing.lg,
-        position: "relative",
-        width: "100%",
-        ...isTransparent && { padding: "0" },
-        [`@container (min-width: ${_constants.SMALL}px)`]: {
-          padding: `${token__namespace.spacing["2xl"]}`
-        },
+  const textContainer = new webBuilderLibrary.ElementBuilder().withClassName("quote-featured-text").withChild(inlineQuote).withStyles({
+    element: {
+      padding: token__namespace.spacing.lg,
+      position: "relative",
+      width: "100%",
+      ...isTransparent && { padding: "0" },
+      [`@container (min-width: ${_constants.SMALL}px)`]: {
+        padding: `${token__namespace.spacing["2xl"]}`
+      },
+      [`@container (min-width: ${_constants.MEDIUM}px)`]: {
+        padding: `${token__namespace.spacing["4xl"]}`
+      }
+    }
+  }).build();
+  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("quote-featured-container-wrapper").withStyles({
+    element: {
+      backgroundColor: token__namespace.color.gray.lightest,
+      position: "relative",
+      ...isThemeDark && { backgroundColor: token__namespace.color.black },
+      ...isThemeMaryland && { backgroundColor: token__namespace.color.red },
+      ...isTransparent && { backgroundColor: "transparent" },
+      ...image2 && {
+        display: "flex",
+        flexDirection: "column",
         [`@container (min-width: ${_constants.MEDIUM}px)`]: {
-          padding: `${token__namespace.spacing["4xl"]}`
+          display: "flex",
+          flexDirection: "row"
         }
       }
     }
   });
   if (!isTransparent) {
-    wrapperChildren.push(createTextureContainer(props));
+    wrapper.withChild(createTextureContainer(props));
   }
   if (image2) {
-    wrapperChildren.push(createImageContainer(props));
+    wrapper.withChild(createImageContainer(props));
   }
-  wrapperChildren.push(textContainer);
-  const wrapper = index.createDiv({
-    className: "quote-featured-container-wrapper",
-    children: wrapperChildren,
-    elementStyles: {
-      element: {
-        backgroundColor: token__namespace.color.gray.lightest,
-        position: "relative",
-        ...isThemeDark && { backgroundColor: token__namespace.color.black },
-        ...isThemeMaryland && { backgroundColor: token__namespace.color.red },
-        ...isTransparent && { backgroundColor: "transparent" },
+  wrapper.withChild(textContainer);
+  const wrapperBuilt = wrapper.build();
+  const spacer = new webBuilderLibrary.ElementBuilder().withClassName("quote-featured-container-spacer").withChild(wrapperBuilt).withStyles({
+    element: {
+      paddingTop: token__namespace.spacing.lg,
+      ...isTransparent && { padding: "0" },
+      [`@container (min-width: ${_constants.SMALL}px) and (max-width: ${_constants.MEDIUM - 1}px)`]: {
         ...image2 && {
-          display: "flex",
-          flexDirection: "column",
-          [`@container (min-width: ${_constants.MEDIUM}px)`]: {
-            display: "flex",
-            flexDirection: "row"
-          }
+          paddingTop: token__namespace.spacing["8xl"]
         }
       }
     }
-  });
-  const spacer = index.createDiv({
-    className: "quote-featured-container-spacer",
-    children: [wrapper],
-    elementStyles: {
-      element: {
-        paddingTop: token__namespace.spacing.lg,
-        ...isTransparent && { padding: "0" },
-        [`@container (min-width: ${_constants.SMALL}px) and (max-width: ${_constants.MEDIUM - 1}px)`]: {
-          ...image2 && {
-            paddingTop: token__namespace.spacing["8xl"]
-          }
-        }
-      }
-    }
-  });
-  const container = index.createDiv({
-    className: "quote-featured-container",
-    children: [spacer],
-    elementStyles: {
-      element: {
-        containerType: "inline-size"
-      }
+  }).build();
+  const container = new webBuilderLibrary.ElementBuilder().withClassName("quote-featured-container").withChild(spacer).withStyles({
+    element: {
+      containerType: "inline-size"
     }
-  });
+  }).build();
   const loadAnimation = () => {
     animation.quoteAnimation({
       ...props,

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, 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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"}
+{"version":3,"file":"featured.js","sources":["../../../source/composite/quote/featured.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\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';\n\nconst BACKGROUND_TEXTURE_LIGHT = `<svg id=\"quote_background_light\" aria-hidden=\"true\" title=\"background decoration\" 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\" title=\"background decoration\" 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 containerBuilder = new ElementBuilder()\n    .withClassName('quote-featured-image')\n    .withStyles({\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: ${MEDIUM - 1}px)`]:\n          {\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  if (image) {\n    const imageElement = elementImage({\n      ...props,\n      isTypeFeatured: true,\n      image,\n    });\n    containerBuilder.withChild(imageElement);\n  }\n\n  if (action) {\n    const actionElement = elementAction({\n      isTypeFeatured: true,\n      action,\n    });\n    containerBuilder.withChild(actionElement);\n  }\n\n  const container = containerBuilder.build();\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 = new ElementBuilder(backgroundTexture)\n    .withClassName('quote-background-texture')\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('quote-featured-texture')\n    .withChild(backgroundTextureElement)\n    .withStyles({\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    .build();\n\n  return container;\n};\n\nexport default (props: QuoteFeaturedProps) => {\n  const { isThemeDark, isThemeMaryland, image, isTransparent } = props;\n\n  const inlineQuote = InlineQuote({ ...props, isTypeFeatured: true });\n\n  const textContainer = new ElementBuilder()\n    .withClassName('quote-featured-text')\n    .withChild(inlineQuote)\n    .withStyles({\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    .build();\n\n  const wrapper = new ElementBuilder()\n    .withClassName('quote-featured-container-wrapper')\n    .withStyles({\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  if (!isTransparent) {\n    wrapper.withChild(createTextureContainer(props));\n  }\n\n  if (image) {\n    wrapper.withChild(createImageContainer(props));\n  }\n\n  wrapper.withChild(textContainer);\n\n  const wrapperBuilt = wrapper.build();\n\n  const spacer = new ElementBuilder()\n    .withClassName('quote-featured-container-spacer')\n    .withChild(wrapperBuilt)\n    .withStyles({\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    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('quote-featured-container')\n    .withChild(spacer)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n      },\n    })\n    .build();\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","ElementBuilder","token","SMALL","MEDIUM","elementImage","elementAction","imageFromSvg","InlineQuote","quoteAnimation"],"mappings":"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"}

package/dist/composite/quote/featured.mjs

@@ -1,69 +1,59 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
 import { imageFromSvg } from "@universityofmaryland/web-utilities-library/media";
-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 "@universityofmaryland/web-utilities-library/theme";
 import elementAction from "./elements/action.mjs";
 import "@universityofmaryland/web-icons-library/brand";
 import { MEDIUM, SMALL } from "./_constants.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>`;
+const BACKGROUND_TEXTURE_LIGHT = `<svg id="quote_background_light" aria-hidden="true" title="background decoration" 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" title="background decoration" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 614.86 300.65"><defs><style>.cls-1{opacity:.25;}.cls-1,.cls-2{fill:#757575;fill-rule:evenodd;isolation:isolate;}.cls-2{opacity:.1;}</style></defs><path class="cls-2" d="m.27,0h332.67L27.46,299.93H.27V0Z"/><path class="cls-1" d="m0,0h308.65l306.21,300.65h-332.67L0,23.59V0Z"/></svg>`;
 const createImageContainer = (props) => {
   const { image, action } = props;
-  const getContainerChildren = () => {
-    const containerChildren2 = [];
-    if (image) {
-      const imageElement = elementImage({
-        ...props,
-        isTypeFeatured: true,
-        image
-      });
-      containerChildren2.push(imageElement);
-    }
-    if (action) {
-      const actionElement = elementAction({
-        isTypeFeatured: true,
-        action
-      });
-      containerChildren2.push(actionElement);
-    }
-    return containerChildren2;
-  };
-  const createImageContainerElement = () => {
-    return createDiv({
-      className: "quote-featured-image",
-      children: containerChildren,
-      elementStyles: {
-        element: {
-          position: "relative",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          marginTop: `-${token.spacing.lg}`,
-          ["&[align-center=true]"]: {
-            marginTop: "0",
-            justifyContent: "center"
-          },
-          [`@container (max-width: ${SMALL - 1}px)`]: {
-            padding: `0 ${token.spacing.lg}`
-          },
-          [`@container (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px)`]: {
-            margin: "0 auto",
-            marginTop: `-${token.spacing["8xl"]}`,
-            maxWidth: "300px"
-          },
-          [`@container (min-width: ${MEDIUM}px)`]: {
-            paddingLeft: token.spacing["6xl"],
-            width: `calc(300px + ${token.spacing["6xl"]})`
-          }
-        }
+  const containerBuilder = new ElementBuilder().withClassName("quote-featured-image").withStyles({
+    element: {
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      marginTop: `-${token.spacing.lg}`,
+      ["&[align-center=true]"]: {
+        marginTop: "0",
+        justifyContent: "center"
+      },
+      [`@container (max-width: ${SMALL - 1}px)`]: {
+        padding: `0 ${token.spacing.lg}`
+      },
+      [`@container (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px)`]: {
+        margin: "0 auto",
+        marginTop: `-${token.spacing["8xl"]}`,
+        maxWidth: "300px"
+      },
+      [`@container (min-width: ${MEDIUM}px)`]: {
+        paddingLeft: token.spacing["6xl"],
+        width: `calc(300px + ${token.spacing["6xl"]})`
       }
+    }
+  });
+  if (image) {
+    const imageElement = elementImage({
+      ...props,
+      isTypeFeatured: true,
+      image
     });
-  };
-  const containerChildren = getContainerChildren();
-  const container = createImageContainerElement();
+    containerBuilder.withChild(imageElement);
+  }
+  if (action) {
+    const actionElement = elementAction({
+      isTypeFeatured: true,
+      action
+    });
+    containerBuilder.withChild(actionElement);
+  }
+  const container = containerBuilder.build();
   if (window.innerWidth >= MEDIUM && image instanceof HTMLImageElement) {
     image.addEventListener("load", () => {
       const parent = container;
@@ -84,111 +74,88 @@ const createTextureContainer = ({
   const backgroundTexture = imageFromSvg({
     SVG: isDarkText ? BACKGROUND_TEXTURE_DARK : BACKGROUND_TEXTURE_LIGHT
   });
-  const backgroundTextureElement = create({
-    element: backgroundTexture,
-    className: "quote-background-texture"
-  });
-  const container = createDiv({
-    className: "quote-featured-texture",
-    children: [backgroundTextureElement],
-    elementStyles: {
-      element: {
-        overflow: "hidden",
+  const backgroundTextureElement = new ElementBuilder(backgroundTexture).withClassName("quote-background-texture").build();
+  const container = new ElementBuilder().withClassName("quote-featured-texture").withChild(backgroundTextureElement).withStyles({
+    element: {
+      overflow: "hidden",
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      [`& > img`]: {
         position: "absolute",
         top: "0",
         left: "0",
-        width: "100%",
-        height: "100%",
-        [`& > img`]: {
-          position: "absolute",
-          top: "0",
-          left: "0",
-          width: "70%",
-          height: "120%",
-          objectFit: "cover"
-        },
-        [`@container (max-width: ${MEDIUM - 1}px)`]: {
-          display: "none"
-        }
+        width: "70%",
+        height: "120%",
+        objectFit: "cover"
+      },
+      [`@container (max-width: ${MEDIUM - 1}px)`]: {
+        display: "none"
       }
     }
-  });
+  }).build();
   return container;
 };
 const featured = (props) => {
   const { isThemeDark, isThemeMaryland, image, isTransparent } = props;
-  const wrapperChildren = [];
   const inlineQuote = InlineQuote({ ...props, isTypeFeatured: true });
-  const textContainer = createDiv({
-    className: "quote-featured-text",
-    children: [inlineQuote],
-    elementStyles: {
-      element: {
-        padding: token.spacing.lg,
-        position: "relative",
-        width: "100%",
-        ...isTransparent && { padding: "0" },
-        [`@container (min-width: ${SMALL}px)`]: {
-          padding: `${token.spacing["2xl"]}`
-        },
+  const textContainer = new ElementBuilder().withClassName("quote-featured-text").withChild(inlineQuote).withStyles({
+    element: {
+      padding: token.spacing.lg,
+      position: "relative",
+      width: "100%",
+      ...isTransparent && { padding: "0" },
+      [`@container (min-width: ${SMALL}px)`]: {
+        padding: `${token.spacing["2xl"]}`
+      },
+      [`@container (min-width: ${MEDIUM}px)`]: {
+        padding: `${token.spacing["4xl"]}`
+      }
+    }
+  }).build();
+  const wrapper = new ElementBuilder().withClassName("quote-featured-container-wrapper").withStyles({
+    element: {
+      backgroundColor: token.color.gray.lightest,
+      position: "relative",
+      ...isThemeDark && { backgroundColor: token.color.black },
+      ...isThemeMaryland && { backgroundColor: token.color.red },
+      ...isTransparent && { backgroundColor: "transparent" },
+      ...image && {
+        display: "flex",
+        flexDirection: "column",
         [`@container (min-width: ${MEDIUM}px)`]: {
-          padding: `${token.spacing["4xl"]}`
+          display: "flex",
+          flexDirection: "row"
         }
       }
     }
   });
   if (!isTransparent) {
-    wrapperChildren.push(createTextureContainer(props));
+    wrapper.withChild(createTextureContainer(props));
   }
   if (image) {
-    wrapperChildren.push(createImageContainer(props));
+    wrapper.withChild(createImageContainer(props));
   }
-  wrapperChildren.push(textContainer);
-  const wrapper = createDiv({
-    className: "quote-featured-container-wrapper",
-    children: wrapperChildren,
-    elementStyles: {
-      element: {
-        backgroundColor: token.color.gray.lightest,
-        position: "relative",
-        ...isThemeDark && { backgroundColor: token.color.black },
-        ...isThemeMaryland && { backgroundColor: token.color.red },
-        ...isTransparent && { backgroundColor: "transparent" },
+  wrapper.withChild(textContainer);
+  const wrapperBuilt = wrapper.build();
+  const spacer = new ElementBuilder().withClassName("quote-featured-container-spacer").withChild(wrapperBuilt).withStyles({
+    element: {
+      paddingTop: token.spacing.lg,
+      ...isTransparent && { padding: "0" },
+      [`@container (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px)`]: {
         ...image && {
-          display: "flex",
-          flexDirection: "column",
-          [`@container (min-width: ${MEDIUM}px)`]: {
-            display: "flex",
-            flexDirection: "row"
-          }
+          paddingTop: token.spacing["8xl"]
         }
       }
     }
-  });
-  const spacer = createDiv({
-    className: "quote-featured-container-spacer",
-    children: [wrapper],
-    elementStyles: {
-      element: {
-        paddingTop: token.spacing.lg,
-        ...isTransparent && { padding: "0" },
-        [`@container (min-width: ${SMALL}px) and (max-width: ${MEDIUM - 1}px)`]: {
-          ...image && {
-            paddingTop: token.spacing["8xl"]
-          }
-        }
-      }
-    }
-  });
-  const container = createDiv({
-    className: "quote-featured-container",
-    children: [spacer],
-    elementStyles: {
-      element: {
-        containerType: "inline-size"
-      }
+  }).build();
+  const container = new ElementBuilder().withClassName("quote-featured-container").withChild(spacer).withStyles({
+    element: {
+      containerType: "inline-size"
     }
-  });
+  }).build();
   const loadAnimation = () => {
     quoteAnimation({
       ...props,