@universityofmaryland/web-elements-library 1.6.16 → 1.7.0

package/dist/composite/media/inline/caption.js

@@ -1,103 +1,92 @@
 import * as token from "@universityofmaryland/web-token-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 import { debounce } from "@universityofmaryland/web-utilities-library/performance";
 import { createCompositeMediaCaption } from "../elements/caption.js";
-import { layoutImage } from "../../../layout/image.js";
-import "@universityofmaryland/web-builder-library";
 import "@universityofmaryland/web-styles-library";
-const ELEMENT_MEDIA_INLINE_CONTAINER = "element-media-with-caption-container";
-const ELEMENT_OBJECT_CAPTION_CONTAINER = "element-media-caption-container";
-const ObjectContainer = `
-  .${ELEMENT_OBJECT_CAPTION_CONTAINER} {
-    display: flex;
-    flex-direction: column;
-    padding-bottom: ${token.spacing.sm};
-    max-width: 100%;
-  }
-`;
-const STYLES_MEDIA_INLINE_ELEMENT = `
-  .${ELEMENT_MEDIA_INLINE_CONTAINER} {
-    display: inline-block;
-    max-width: 100%;
-  }
-
-  ${layoutImage.Styles}
-  ${createCompositeMediaCaption.Styles}
-  ${ObjectContainer}
-`;
-const CreateMediaWithCaption = (props) => (() => {
+import { createLayoutImageContainer } from "../../../layout/image.js";
+const CreateMediaWithCaption = (props) => {
   const { caption, image, isThemeDark } = props;
   const hasCaption = caption && caption !== null;
-  const elementContainer = document.createElement("div");
-  const objectContainer = document.createElement("div");
-  const sizeCaption = () => {
-    const imageContainer = elementContainer.querySelector(
-      `.${layoutImage.Elements.container}`
-    );
-    const caption2 = elementContainer.querySelector(
-      `.${createCompositeMediaCaption.Elements.container}`
-    );
-    if (caption2) {
-      caption2.style.width = `${imageContainer.offsetWidth}px`;
-      caption2.style.display = `block`;
+  const createImage = () => {
+    if (!image) {
+      console.warn("CreateMediaWithCaption: No image provided");
+      return null;
     }
+    return createLayoutImageContainer({ image, showCaption: true });
   };
-  const eventResize = () => {
-    sizeCaption();
+  const createCaption = () => {
+    if (!hasCaption) {
+      console.warn("CreateMediaWithCaption: No caption provided");
+      return null;
+    }
+    const captionContainer = createCompositeMediaCaption.CreateElement({ caption, isThemeDark });
+    captionContainer.style.display = "none";
+    return captionContainer;
   };
-  if (image) {
-    objectContainer.appendChild(
-      layoutImage.CreateElement({
-        image,
-        showCaption: true
-      })
-    );
+  const imageElement = createImage();
+  const captionElement = createCaption();
+  const children = [imageElement, captionElement].filter((child) => child != null);
+  const objectModel = new ElementBuilder().withClassName("element-media-caption-container").withStyles({
+    element: {
+      display: "flex",
+      flexDirection: "column",
+      paddingBottom: token.spacing.sm,
+      maxWidth: "100%"
+    }
+  }).withChildren(...children).build();
+  const containerBuilder = new ElementBuilder().withClassName("element-media-with-caption-container").withStyles({
+    element: {
+      display: "inline-block",
+      maxWidth: "100%"
+    }
+  });
+  if (image || hasCaption) {
+    containerBuilder.withChild(objectModel);
   }
+  const containerModel = containerBuilder.build();
+  const objectContainer = objectModel.element;
+  const sizeCaption = () => {
+    if (!imageElement || !captionElement) return;
+    captionElement.style.width = `${imageElement.element.offsetWidth}px`;
+    captionElement.style.display = `block`;
+  };
   const load = () => {
     const checkSizing = () => {
-      const caption2 = objectContainer.querySelector(
+      const captionElement2 = objectContainer.querySelector(
         `.${createCompositeMediaCaption.Elements.container}`
       );
-      if (caption2) {
-        caption2.style.opacity = `1`;
+      if (captionElement2) {
+        captionElement2.style.opacity = `1`;
       }
     };
-    image?.addEventListener("load", () => {
+    if (!image) {
+      console.warn("CreateMediaWithCaption: No image provided");
+      return null;
+    }
+    image.addEventListener("load", () => {
       checkSizing();
       setTimeout(() => {
         checkSizing();
       }, 500);
     });
   };
-  if (hasCaption) {
-    const captionElement = createCompositeMediaCaption.CreateElement({
-      caption,
-      isThemeDark
-    });
-    captionElement.style.display = `none`;
-    objectContainer.appendChild(captionElement);
-  }
-  if (objectContainer.children.length > 0) {
-    elementContainer.appendChild(objectContainer);
-  }
-  objectContainer.classList.add(ELEMENT_OBJECT_CAPTION_CONTAINER);
-  elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);
   window.addEventListener(
     "resize",
     debounce(() => {
-      eventResize();
+      sizeCaption();
     }, 20)
   );
   setTimeout(() => {
-    eventResize();
+    sizeCaption();
   }, 100);
+  containerModel.styles += createCompositeMediaCaption.Styles;
   return {
-    element: elementContainer,
+    ...containerModel,
     events: {
       load
-    },
-    styles: STYLES_MEDIA_INLINE_ELEMENT
+    }
   };
-})();
+};
 const createCompositeMediaInlineCaption = CreateMediaWithCaption;
 export {
   createCompositeMediaInlineCaption

package/dist/composite/media/inline/caption.js.map

@@ -1 +1 @@
-{"version":3,"file":"caption.js","sources":["../../../../source/composite/media/inline/caption.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { createCompositeMediaCaption as CaptionContainer } from '../elements/caption';\nimport { Image as LayoutImage } from 'layout';\n\nexport type TypeMediaInlineRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-with-caption-container';\nconst ELEMENT_OBJECT_CAPTION_CONTAINER = 'element-media-caption-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n  .${ELEMENT_OBJECT_CAPTION_CONTAINER} {\n    display: flex;\n    flex-direction: column;\n    padding-bottom: ${token.spacing.sm};\n    max-width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: inline-block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n  ${CaptionContainer.Styles}\n  ${ObjectContainer}\n`;\n\nconst CreateMediaWithCaption = (props: TypeMediaInlineRequirements) =>\n  (() => {\n    const { caption, image, isThemeDark } = props;\n    const hasCaption = caption && caption !== null;\n    const elementContainer = document.createElement('div');\n    const objectContainer = document.createElement('div');\n    const sizeCaption = () => {\n      const imageContainer = elementContainer.querySelector(\n        `.${LayoutImage.Elements.container}`,\n      ) as HTMLElement;\n      const caption = elementContainer.querySelector(\n        `.${CaptionContainer.Elements.container}`,\n      ) as HTMLElement;\n\n      if (caption) {\n        caption.style.width = `${imageContainer.offsetWidth}px`;\n        caption.style.display = `block`;\n      }\n    };\n    const eventResize = () => {\n      sizeCaption();\n    };\n\n    if (image) {\n      objectContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    const load = () => {\n      const checkSizing = () => {\n        const caption = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (caption) {\n          caption.style.opacity = `1`;\n        }\n      };\n\n      image?.addEventListener('load', () => {\n        checkSizing();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    if (hasCaption) {\n      const captionElement = CaptionContainer.CreateElement({\n        caption,\n        isThemeDark,\n      });\n      captionElement.style.display = `none`;\n      objectContainer.appendChild(captionElement);\n    }\n\n    if (objectContainer.children.length > 0) {\n      elementContainer.appendChild(objectContainer);\n    }\n\n    objectContainer.classList.add(ELEMENT_OBJECT_CAPTION_CONTAINER);\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    setTimeout(() => {\n      eventResize();\n    }, 100);\n\n    return {\n      element: elementContainer,\n      events: {\n        load,\n      },\n      styles: STYLES_MEDIA_INLINE_ELEMENT,\n    };\n  })();\n\nexport const createCompositeMediaInlineCaption = CreateMediaWithCaption;\n"],"names":["LayoutImage","CaptionContainer","caption"],"mappings":";;;;;;AAaA,MAAM,iCAAiC;AACvC,MAAM,mCAAmC;AAGzC,MAAM,kBAAkB;AAAA,KACnB,gCAAgC;AAAA;AAAA;AAAA,sBAGf,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAMtC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/BA,YAAY,MAAM;AAAA,IAClBC,4BAAiB,MAAM;AAAA,IACvB,eAAe;AAAA;AAGnB,MAAM,yBAAyB,CAAC,WAC7B,MAAM;AACL,QAAM,EAAE,SAAS,OAAO,YAAA,IAAgB;AACxC,QAAM,aAAa,WAAW,YAAY;AAC1C,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,cAAc,MAAM;AACxB,UAAM,iBAAiB,iBAAiB;AAAA,MACtC,IAAID,YAAY,SAAS,SAAS;AAAA,IAAA;AAEpC,UAAME,WAAU,iBAAiB;AAAA,MAC/B,IAAID,4BAAiB,SAAS,SAAS;AAAA,IAAA;AAGzC,QAAIC,UAAS;AACXA,eAAQ,MAAM,QAAQ,GAAG,eAAe,WAAW;AACnDA,eAAQ,MAAM,UAAU;AAAA,IAC1B;AAAA,EACF;AACA,QAAM,cAAc,MAAM;AACxB,gBAAA;AAAA,EACF;AAEA,MAAI,OAAO;AACT,oBAAgB;AAAA,MACdF,YAAY,cAAc;AAAA,QACxB;AAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,cAAc,MAAM;AACxB,YAAME,WAAU,gBAAgB;AAAA,QAC9B,IAAID,4BAAiB,SAAS,SAAS;AAAA,MAAA;AAGzC,UAAIC,UAAS;AACXA,iBAAQ,MAAM,UAAU;AAAA,MAC1B;AAAA,IACF;AAEA,WAAO,iBAAiB,QAAQ,MAAM;AACpC,kBAAA;AAEA,iBAAW,MAAM;AACf,oBAAA;AAAA,MACF,GAAG,GAAG;AAAA,IACR,CAAC;AAAA,EACH;AAEA,MAAI,YAAY;AACd,UAAM,iBAAiBD,4BAAiB,cAAc;AAAA,MACpD;AAAA,MACA;AAAA,IAAA,CACD;AACD,mBAAe,MAAM,UAAU;AAC/B,oBAAgB,YAAY,cAAc;AAAA,EAC5C;AAEA,MAAI,gBAAgB,SAAS,SAAS,GAAG;AACvC,qBAAiB,YAAY,eAAe;AAAA,EAC9C;AAEA,kBAAgB,UAAU,IAAI,gCAAgC;AAC9D,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL;AAAA,IACA,SAAS,MAAM;AACb,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,aAAW,MAAM;AACf,gBAAA;AAAA,EACF,GAAG,GAAG;AAEN,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,IAEF,QAAQ;AAAA,EAAA;AAEZ,GAAA;AAEK,MAAM,oCAAoC;"}
+{"version":3,"file":"caption.js","sources":["../../../../source/composite/media/inline/caption.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { createCompositeMediaCaption as CaptionContainer } from '../elements/caption';\nimport { createLayoutImageContainer } from 'layout';\n\nexport type TypeMediaInlineRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  isThemeDark?: boolean;\n};\n\nconst CreateMediaWithCaption = (props: TypeMediaInlineRequirements) =>\n  {\n    const { caption, image, isThemeDark } = props;\n    const hasCaption = caption && caption !== null;\n\n    const createImage = () => {\n      if (!image) {\n        console.warn('CreateMediaWithCaption: No image provided');\n        return null;\n      }\n      return createLayoutImageContainer({ image, showCaption: true });\n    };\n\n    const createCaption = () => {\n      if (!hasCaption) {\n        console.warn('CreateMediaWithCaption: No caption provided');\n        return null;\n      }\n      const captionContainer = CaptionContainer.CreateElement({ caption, isThemeDark });\n      captionContainer.style.display = 'none';\n      return captionContainer;\n    };\n\n    const imageElement = createImage();\n    const captionElement = createCaption();\n    const children = [imageElement, captionElement].filter((child) => child != null);\n\n    const objectModel = new ElementBuilder()\n      .withClassName('element-media-caption-container')\n      .withStyles({\n        element: {\n          display: 'flex',\n          flexDirection: 'column',\n          paddingBottom: token.spacing.sm,\n          maxWidth: '100%',\n        },\n      })\n      .withChildren(...children)\n      .build();\n\n    const containerBuilder = new ElementBuilder()\n      .withClassName('element-media-with-caption-container')\n      .withStyles({\n        element: {\n          display: 'inline-block',\n          maxWidth: '100%',\n        },\n      });\n\n    if (image || hasCaption) {\n      containerBuilder.withChild(objectModel);\n    }\n\n    const containerModel = containerBuilder.build();\n    const objectContainer = objectModel.element;\n\n    const sizeCaption = () => {\n      if (!imageElement || !captionElement) return;\n      captionElement.style.width = `${imageElement.element.offsetWidth}px`;\n      captionElement.style.display = `block`;\n    };\n\n    const load = () => {\n      const checkSizing = () => {\n        const captionElement = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (captionElement) {\n          captionElement.style.opacity = `1`;\n        }\n      };\n\n      if (!image) {\n        console.warn('CreateMediaWithCaption: No image provided');\n        return null;\n      }\n\n      image.addEventListener('load', () => {\n        checkSizing();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        sizeCaption();\n      }, 20),\n    );\n\n    setTimeout(() => {\n      sizeCaption();\n    }, 100);\n\n    containerModel.styles += CaptionContainer.Styles;\n\n    return {\n      ...containerModel,\n      events: {\n        load,\n      },\n    };\n  };\n\nexport const createCompositeMediaInlineCaption = CreateMediaWithCaption;\n"],"names":["CaptionContainer","captionElement"],"mappings":";;;;;;AAYA,MAAM,yBAAyB,CAAC,UAC9B;AACE,QAAM,EAAE,SAAS,OAAO,YAAA,IAAgB;AACxC,QAAM,aAAa,WAAW,YAAY;AAE1C,QAAM,cAAc,MAAM;AACxB,QAAI,CAAC,OAAO;AACV,cAAQ,KAAK,2CAA2C;AACxD,aAAO;AAAA,IACT;AACA,WAAO,2BAA2B,EAAE,OAAO,aAAa,MAAM;AAAA,EAChE;AAEA,QAAM,gBAAgB,MAAM;AAC1B,QAAI,CAAC,YAAY;AACf,cAAQ,KAAK,6CAA6C;AAC1D,aAAO;AAAA,IACT;AACA,UAAM,mBAAmBA,4BAAiB,cAAc,EAAE,SAAS,aAAa;AAChF,qBAAiB,MAAM,UAAU;AACjC,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,YAAA;AACrB,QAAM,iBAAiB,cAAA;AACvB,QAAM,WAAW,CAAC,cAAc,cAAc,EAAE,OAAO,CAAC,UAAU,SAAS,IAAI;AAE/E,QAAM,cAAc,IAAI,eAAA,EACrB,cAAc,iCAAiC,EAC/C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,eAAe;AAAA,MACf,eAAe,MAAM,QAAQ;AAAA,MAC7B,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,aAAa,GAAG,QAAQ,EACxB,MAAA;AAEH,QAAM,mBAAmB,IAAI,eAAA,EAC1B,cAAc,sCAAsC,EACpD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,IAAA;AAAA,EACZ,CACD;AAEH,MAAI,SAAS,YAAY;AACvB,qBAAiB,UAAU,WAAW;AAAA,EACxC;AAEA,QAAM,iBAAiB,iBAAiB,MAAA;AACxC,QAAM,kBAAkB,YAAY;AAEpC,QAAM,cAAc,MAAM;AACxB,QAAI,CAAC,gBAAgB,CAAC,eAAgB;AACtC,mBAAe,MAAM,QAAQ,GAAG,aAAa,QAAQ,WAAW;AAChE,mBAAe,MAAM,UAAU;AAAA,EACjC;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,cAAc,MAAM;AACxB,YAAMC,kBAAiB,gBAAgB;AAAA,QACrC,IAAID,4BAAiB,SAAS,SAAS;AAAA,MAAA;AAGzC,UAAIC,iBAAgB;AAClBA,wBAAe,MAAM,UAAU;AAAA,MACjC;AAAA,IACF;AAEA,QAAI,CAAC,OAAO;AACV,cAAQ,KAAK,2CAA2C;AACxD,aAAO;AAAA,IACT;AAEA,UAAM,iBAAiB,QAAQ,MAAM;AACnC,kBAAA;AAEA,iBAAW,MAAM;AACf,oBAAA;AAAA,MACF,GAAG,GAAG;AAAA,IACR,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA,SAAS,MAAM;AACb,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,aAAW,MAAM;AACf,gBAAA;AAAA,EACF,GAAG,GAAG;AAEN,iBAAe,UAAUD,4BAAiB;AAE1C,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ;AAEK,MAAM,oCAAoC;"}

package/dist/composite/media/inline/index.d.ts

@@ -1,21 +1,22 @@
 export declare const createCompositeMediaInline: {
     caption: (props: import('./caption').TypeMediaInlineRequirements) => {
-        element: HTMLDivElement;
         events: {
-            load: () => void;
+            load: () => null | undefined;
         };
+        element: HTMLElement;
         styles: string;
+        update?: (props: Partial<import('../../../../builder/dist/index.d.ts').BuilderOptions>) => void;
+        destroy?: () => void;
     };
-    standard: (props: import('./standard').TypeMediaInlineRequirements) => {
-        element: HTMLDivElement;
-        styles: string;
-    };
+    standard: (props: import('./standard').TypeMediaInlineRequirements) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
     wrapped: (props: import('./wrapped').TypeMediaInlineWrappedRequirements) => {
-        element: HTMLDivElement;
         events: {
-            load: () => void;
+            load: () => null | undefined;
         };
+        element: HTMLElement;
         styles: string;
+        update?: (props: Partial<import('../../../../builder/dist/index.d.ts').BuilderOptions>) => void;
+        destroy?: () => void;
     };
 };
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/media/inline/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/inline/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;CAItC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/inline/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;CAItC,CAAC"}

package/dist/composite/media/inline/standard.d.ts

@@ -1,8 +1,5 @@
 export type TypeMediaInlineRequirements = {
     image?: HTMLImageElement | null;
 };
-export declare const createCompositeMediaInlineStandard: (props: TypeMediaInlineRequirements) => {
-    element: HTMLDivElement;
-    styles: string;
-};
+export declare const createCompositeMediaInlineStandard: (props: TypeMediaInlineRequirements) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=standard.d.ts.map

package/dist/composite/media/inline/standard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/inline/standard.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACjC,CAAC;AAoCF,eAAO,MAAM,kCAAkC,UAtBb,2BAA2B;;;CAsBM,CAAC"}
+{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/inline/standard.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACjC,CAAC;AA+BF,eAAO,MAAM,kCAAkC,UA7Bb,2BAA2B,kFA6BM,CAAC"}

package/dist/composite/media/inline/standard.js

@@ -1,32 +1,24 @@
-import { layoutImage } from "../../../layout/image.js";
-import "@universityofmaryland/web-builder-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 import "@universityofmaryland/web-styles-library";
+import { createLayoutImageContainer } from "../../../layout/image.js";
 import "@universityofmaryland/web-token-library";
-const ELEMENT_MEDIA_INLINE_CONTAINER = "element-media-inline-container";
-const STYLES_MEDIA_INLINE_ELEMENT = `
-  .${ELEMENT_MEDIA_INLINE_CONTAINER} {
-    display: block;
-    max-width: 100%;
-  }
-
-  ${layoutImage.Styles}
-`;
 const CreateMediaInline = (props) => (() => {
-  const elementContainer = document.createElement("div");
   const { image } = props;
-  if (image) {
-    elementContainer.appendChild(
-      layoutImage.CreateElement({
-        image,
-        showCaption: true
-      })
-    );
-  }
-  elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);
-  return {
-    element: elementContainer,
-    styles: STYLES_MEDIA_INLINE_ELEMENT
+  const createImage = () => {
+    if (!image) {
+      console.warn("CreateMediaInline: No image provided");
+      return null;
+    }
+    return createLayoutImageContainer({ image, showCaption: true });
   };
+  const imageElement = createImage();
+  const model = new ElementBuilder().withClassName("element-media-inline-container").withStyles({
+    element: {
+      display: "block",
+      maxWidth: "100%"
+    }
+  }).withChild(imageElement).build();
+  return model;
 })();
 const createCompositeMediaInlineStandard = CreateMediaInline;
 export {

package/dist/composite/media/inline/standard.js.map

@@ -1 +1 @@
-{"version":3,"file":"standard.js","sources":["../../../../source/composite/media/inline/standard.ts"],"sourcesContent":["import { Image as LayoutImage } from 'layout';\n\nexport type TypeMediaInlineRequirements = {\n  image?: HTMLImageElement | null;\n};\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-inline-container';\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n`;\n\nconst CreateMediaInline = (props: TypeMediaInlineRequirements) =>\n  (() => {\n    const elementContainer = document.createElement('div');\n    const { image } = props;\n\n    if (image) {\n      elementContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    return {\n      element: elementContainer,\n      styles: STYLES_MEDIA_INLINE_ELEMENT,\n    };\n  })();\n\nexport const createCompositeMediaInlineStandard = CreateMediaInline;\n"],"names":["LayoutImage"],"mappings":";;;;AAMA,MAAM,iCAAiC;AAGvC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/BA,YAAY,MAAM;AAAA;AAGtB,MAAM,oBAAoB,CAAC,WACxB,MAAM;AACL,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,EAAE,UAAU;AAElB,MAAI,OAAO;AACT,qBAAiB;AAAA,MACfA,YAAY,cAAc;AAAA,QACxB;AAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,mBAAiB,UAAU,IAAI,8BAA8B;AAE7D,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA;AAEZ,GAAA;AAEK,MAAM,qCAAqC;"}
+{"version":3,"file":"standard.js","sources":["../../../../source/composite/media/inline/standard.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { createLayoutImageContainer } from 'layout';\n\nexport type TypeMediaInlineRequirements = {\n  image?: HTMLImageElement | null;\n};\n\nconst CreateMediaInline = (props: TypeMediaInlineRequirements) =>\n  (() => {\n    const { image } = props;\n\n    const createImage = () => {\n      if (!image) {\n        console.warn('CreateMediaInline: No image provided');\n        return null;\n      }\n      return createLayoutImageContainer({ image, showCaption: true });\n    };\n\n    const imageElement = createImage();\n\n    const model = new ElementBuilder()\n      .withClassName('element-media-inline-container')\n      .withStyles({\n        element: {\n          display: 'block',\n          maxWidth: '100%',\n        },\n      })\n      .withChild(imageElement)\n      .build();\n\n\n    return model;\n  })();\n\nexport const createCompositeMediaInlineStandard = CreateMediaInline;\n"],"names":[],"mappings":";;;;AAOA,MAAM,oBAAoB,CAAC,WACxB,MAAM;AACL,QAAM,EAAE,UAAU;AAElB,QAAM,cAAc,MAAM;AACxB,QAAI,CAAC,OAAO;AACV,cAAQ,KAAK,sCAAsC;AACnD,aAAO;AAAA,IACT;AACA,WAAO,2BAA2B,EAAE,OAAO,aAAa,MAAM;AAAA,EAChE;AAEA,QAAM,eAAe,YAAA;AAErB,QAAM,QAAQ,IAAI,eAAA,EACf,cAAc,gCAAgC,EAC9C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,UAAU,YAAY,EACtB,MAAA;AAGH,SAAO;AACT,GAAA;AAEK,MAAM,qCAAqC;"}

package/dist/composite/media/inline/wrapped.d.ts

@@ -6,10 +6,12 @@ export type TypeMediaInlineWrappedRequirements = {
     isThemeDark?: boolean;
 };
 export declare const createCompositeMediaInlineWrapped: (props: TypeMediaInlineWrappedRequirements) => {
-    element: HTMLDivElement;
     events: {
-        load: () => void;
+        load: () => null | undefined;
     };
+    element: HTMLElement;
     styles: string;
+    update?: (props: Partial<import('../../../../builder/dist/index.d.ts').BuilderOptions>) => void;
+    destroy?: () => void;
 };
 //# sourceMappingURL=wrapped.d.ts.map

package/dist/composite/media/inline/wrapped.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wrapped.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/inline/wrapped.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,kCAAkC,GAAG;IAC/C,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAkMF,eAAO,MAAM,iCAAiC,UA9IL,kCAAkC;;;;;;CA8IF,CAAC"}
+{"version":3,"file":"wrapped.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/inline/wrapped.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,kCAAkC,GAAG;IAC/C,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAsMF,eAAO,MAAM,iCAAiC,UA9KL,kCAAkC;;;;;;;;CA8KF,CAAC"}

package/dist/composite/media/inline/wrapped.js

@@ -1,30 +1,10 @@
 import * as token from "@universityofmaryland/web-token-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 import { debounce } from "@universityofmaryland/web-utilities-library/performance";
 import { createCompositeMediaCaption } from "../elements/caption.js";
-import { layoutImage } from "../../../layout/image.js";
-import "@universityofmaryland/web-builder-library";
 import "@universityofmaryland/web-styles-library";
+import { createLayoutImageContainer } from "../../../layout/image.js";
 const BREAKPOINT = 400;
-const ATTRIBUTE_IS_WRAPPING_TEXT = "is-wrapping-text";
-const ELEMENT_MEDIA_INLINE_CONTAINER = "element-media-inline-wrapped-container";
-const ELEMENT_OBJECT_WRAPPED_CONTAINER = "element-object-wrapped-container";
-const ObjectContainer = `
-  .${ELEMENT_OBJECT_WRAPPED_CONTAINER} {
-    display: inline-block;
-    padding-bottom: ${token.spacing.sm};
-    max-width: 100%;
-  }
-`;
-const STYLES_MEDIA_INLINE_WRAPPED_ELEMENT = `
-  .${ELEMENT_MEDIA_INLINE_CONTAINER} {
-    display: inline-block;
-    max-width: 100%;
-  }
-
-  ${layoutImage.Styles}
-  ${createCompositeMediaCaption.Styles}
-  ${ObjectContainer}
-`;
 const GetObjectSize = ({
   elementContainer,
   image
@@ -41,52 +21,88 @@ const GetObjectSize = ({
 };
 const CreateMediaInlineWrapped = (props) => (() => {
   const { image, isAlignmentRight, isThemeDark, caption, wrappingText } = props;
-  const elementContainer = document.createElement("div");
-  const objectContainer = document.createElement("div");
-  const hasWrappingtext = wrappingText && wrappingText !== null;
+  const hasWrappingText = wrappingText && wrappingText !== null;
   const hasCaption = caption && caption !== null;
+  const createImage = () => {
+    if (!image) {
+      console.warn("CreateMediaInlineWrapped: No image provided");
+      return null;
+    }
+    return createLayoutImageContainer({ image, showCaption: true });
+  };
+  const createCaption = () => {
+    if (!hasCaption) {
+      console.warn("CreateMediaInlineWrapped: No caption provided");
+      return null;
+    }
+    const captionElement2 = createCompositeMediaCaption.CreateElement({ caption, isThemeDark });
+    captionElement2.style.opacity = "0";
+    return captionElement2;
+  };
+  const imageElement = createImage();
+  const captionElement = createCaption();
+  const objectModel = new ElementBuilder().withClassName("element-object-wrapped-container").withStyles({
+    element: {
+      display: "inline-block",
+      paddingBottom: token.spacing.sm,
+      maxWidth: "100%"
+    }
+  }).withChild(imageElement).withChild(captionElement).build();
+  const objectContainer = objectModel.element;
+  const containerBuilder = new ElementBuilder().withClassName("element-media-inline-wrapped-container").withStyles({
+    element: {
+      display: "inline-block",
+      maxWidth: "100%"
+    }
+  });
+  if (image || hasCaption) {
+    containerBuilder.withChild(objectModel);
+  }
+  if (hasWrappingText && wrappingText) {
+    containerBuilder.withChild(wrappingText).withAttribute("is-wrapping-text", "");
+  }
+  const containerModel = containerBuilder.build();
+  const elementContainer = containerModel.element;
   const sizeCaption = () => {
-    const imageContainer = elementContainer.querySelector(
-      `.${layoutImage.Elements.container}`
-    );
-    const caption2 = elementContainer.querySelector(
+    if (!imageElement) return;
+    const captionContainer = elementContainer.querySelector(
       `.${createCompositeMediaCaption.Elements.container}`
     );
-    if (caption2) {
-      caption2.style.width = `${imageContainer.offsetWidth}px`;
+    if (captionContainer) {
+      captionContainer.style.width = `${imageElement.element.offsetWidth}px`;
     }
   };
   const sizeObject = () => {
     const isAboveBreakPoint = elementContainer.offsetWidth > BREAKPOINT;
-    const objectContainer2 = elementContainer.querySelector(
-      `.${ELEMENT_OBJECT_WRAPPED_CONTAINER}`
-    );
     if (!image) return;
     if (isAboveBreakPoint) {
-      const objectSize = GetObjectSize({ elementContainer, image });
-      objectContainer2.style.width = `${objectSize}px`;
-      objectContainer2.style.display = "inline-block";
-      objectContainer2.style.textAlign = "left";
+      const objectSize = GetObjectSize({
+        elementContainer,
+        image
+      });
+      objectContainer.style.width = `${objectSize}px`;
+      objectContainer.style.display = "inline-block";
+      objectContainer.style.textAlign = "left";
       if (isAlignmentRight) {
-        objectContainer2.style.float = `right`;
-        objectContainer2.style.paddingLeft = `${token.spacing.md}`;
+        objectContainer.style.float = `right`;
+        objectContainer.style.paddingLeft = `${token.spacing.md}`;
       } else {
-        objectContainer2.style.float = "left";
-        objectContainer2.style.paddingRight = `${token.spacing.md}`;
+        objectContainer.style.float = "left";
+        objectContainer.style.paddingRight = `${token.spacing.md}`;
       }
     } else {
-      objectContainer2.style.width = "100%";
-      objectContainer2.style.float = "none";
-      objectContainer2.style.textAlign = "center";
-      objectContainer2.style.paddingLeft = `0`;
-      objectContainer2.style.paddingRight = `0`;
+      objectContainer.style.width = "100%";
+      objectContainer.style.float = "none";
+      objectContainer.style.textAlign = "center";
+      objectContainer.style.paddingLeft = `0`;
+      objectContainer.style.paddingRight = `0`;
     }
     setTimeout(() => {
       sizeCaption();
     }, 100);
   };
   const eventResize = () => {
-    if (hasWrappingtext) {
+    if (hasWrappingText) {
       sizeObject();
     }
     if (hasCaption) {
@@ -95,14 +111,18 @@ const CreateMediaInlineWrapped = (props) => (() => {
   };
   const load = () => {
     const checkSizing = () => {
-      const caption2 = objectContainer.querySelector(
+      const captionContainer = objectContainer.querySelector(
         `.${createCompositeMediaCaption.Elements.container}`
       );
-      if (caption2) {
-        caption2.style.opacity = `1`;
+      if (captionContainer) {
+        captionContainer.style.opacity = `1`;
       }
     };
-    image?.addEventListener("load", () => {
+    if (!image) {
+      console.warn("load(): No image found");
+      return null;
+    }
+    image.addEventListener("load", () => {
       eventResize();
       setTimeout(() => {
         checkSizing();
@@ -112,49 +132,26 @@ const CreateMediaInlineWrapped = (props) => (() => {
       }, 500);
     });
   };
-  objectContainer.classList.add(ELEMENT_OBJECT_WRAPPED_CONTAINER);
-  if (image) {
-    objectContainer.appendChild(
-      layoutImage.CreateElement({
-        image,
-        showCaption: true
-      })
-    );
-  }
-  if (hasCaption) {
-    const captionElement = createCompositeMediaCaption.CreateElement({
-      caption,
-      isThemeDark
-    });
-    captionElement.style.opacity = `0`;
-    objectContainer.appendChild(captionElement);
-  }
-  if (objectContainer.children.length > 0) {
-    elementContainer.appendChild(objectContainer);
-  }
-  if (hasWrappingtext) {
-    elementContainer.appendChild(wrappingText);
-    elementContainer.setAttribute(ATTRIBUTE_IS_WRAPPING_TEXT, "");
-    setTimeout(() => {
-      sizeObject();
-    }, 100);
-  }
-  elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);
   window.addEventListener(
     "resize",
     debounce(() => {
       eventResize();
     }, 20)
   );
+  if (hasWrappingText) {
+    setTimeout(() => {
+      sizeObject();
+    }, 100);
+  }
   setTimeout(() => {
     eventResize();
   }, 200);
+  containerModel.styles += createCompositeMediaCaption.Styles;
   return {
-    element: elementContainer,
+    ...containerModel,
     events: {
       load
-    },
-    styles: STYLES_MEDIA_INLINE_WRAPPED_ELEMENT
+    }
   };
 })();
 const createCompositeMediaInlineWrapped = CreateMediaInlineWrapped;

package/dist/composite/media/inline/wrapped.js.map

@@ -1 +1 @@
-{"version":3,"file":"wrapped.js","sources":["../../../../source/composite/media/inline/wrapped.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { createCompositeMediaCaption as CaptionContainer } from '../elements/caption';\nimport { Image as LayoutImage } from 'layout';\n\nexport type TypeMediaInlineWrappedRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  wrappingText?: HTMLElement | null;\n  isAlignmentRight?: boolean;\n  isThemeDark?: boolean;\n};\n\nconst { spacing } = token;\n\nconst BREAKPOINT = 400;\n\nconst ATTRIBUTE_IS_WRAPPING_TEXT = 'is-wrapping-text';\n\nconst ELEMENT_MEDIA_INLINE_CONTAINER = 'element-media-inline-wrapped-container';\nconst ELEMENT_OBJECT_WRAPPED_CONTAINER = 'element-object-wrapped-container';\n\n// prettier-ignore\nconst ObjectContainer = `\n  .${ELEMENT_OBJECT_WRAPPED_CONTAINER} {\n    display: inline-block;\n    padding-bottom: ${token.spacing.sm};\n    max-width: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_MEDIA_INLINE_WRAPPED_ELEMENT = `\n  .${ELEMENT_MEDIA_INLINE_CONTAINER} {\n    display: inline-block;\n    max-width: 100%;\n  }\n\n  ${LayoutImage.Styles}\n  ${CaptionContainer.Styles}\n  ${ObjectContainer}\n`;\n\nconst GetObjectSize = ({\n  elementContainer,\n  image,\n}: {\n  elementContainer: HTMLElement;\n  image: HTMLImageElement;\n}) => {\n  const containerSize = elementContainer.offsetWidth;\n  const imageWidth = image.naturalWidth;\n  const isMediumView = containerSize > BREAKPOINT;\n  let width = imageWidth;\n\n  if (isMediumView) {\n    const shouldMaxSized = imageWidth > containerSize / 2;\n    if (shouldMaxSized) width = containerSize / 2;\n  }\n\n  return width;\n};\n\nconst CreateMediaInlineWrapped = (props: TypeMediaInlineWrappedRequirements) =>\n  (() => {\n    const { image, isAlignmentRight, isThemeDark, caption, wrappingText } =\n      props;\n\n    const elementContainer = document.createElement('div');\n    const objectContainer = document.createElement('div');\n    const hasWrappingtext = wrappingText && wrappingText !== null;\n    const hasCaption = caption && caption !== null;\n    const sizeCaption = () => {\n      const imageContainer = elementContainer.querySelector(\n        `.${LayoutImage.Elements.container}`,\n      ) as HTMLElement;\n      const caption = elementContainer.querySelector(\n        `.${CaptionContainer.Elements.container}`,\n      ) as HTMLElement;\n\n      if (caption) {\n        caption.style.width = `${imageContainer.offsetWidth}px`;\n      }\n    };\n    const sizeObject = () => {\n      const isAboveBreakPoint = elementContainer.offsetWidth > BREAKPOINT;\n      const objectContainer = elementContainer.querySelector(\n        `.${ELEMENT_OBJECT_WRAPPED_CONTAINER}`,\n      ) as HTMLElement;\n\n      if (!image) return;\n\n      if (isAboveBreakPoint) {\n        const objectSize = GetObjectSize({ elementContainer, image });\n\n        objectContainer.style.width = `${objectSize}px`;\n        objectContainer.style.display = 'inline-block';\n        objectContainer.style.textAlign = 'left';\n\n        if (isAlignmentRight) {\n          objectContainer.style.float = `right`;\n          objectContainer.style.paddingLeft = `${token.spacing.md}`;\n        } else {\n          objectContainer.style.float = 'left';\n          objectContainer.style.paddingRight = `${token.spacing.md}`;\n        }\n      } else {\n        objectContainer.style.width = '100%';\n        objectContainer.style.float = 'none';\n        objectContainer.style.textAlign = 'center';\n        objectContainer.style.paddingLeft = `0`;\n        objectContainer.style.paddingRight = `0`;\n      }\n\n      setTimeout(() => {\n        sizeCaption();\n      }, 100);\n    };\n    const eventResize = () => {\n      if (hasWrappingtext) {\n        sizeObject();\n      }\n      if (hasCaption) {\n        sizeCaption();\n      }\n    };\n\n    const load = () => {\n      const checkSizing = () => {\n        const caption = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (caption) {\n          caption.style.opacity = `1`;\n        }\n      };\n\n      image?.addEventListener('load', () => {\n        eventResize();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 100);\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    objectContainer.classList.add(ELEMENT_OBJECT_WRAPPED_CONTAINER);\n\n    if (image) {\n      objectContainer.appendChild(\n        LayoutImage.CreateElement({\n          image,\n          showCaption: true,\n        }),\n      );\n    }\n\n    if (hasCaption) {\n      const captionElement = CaptionContainer.CreateElement({\n        caption,\n        isThemeDark,\n      });\n      captionElement.style.opacity = `0`;\n      objectContainer.appendChild(captionElement);\n    }\n\n    if (objectContainer.children.length > 0) {\n      elementContainer.appendChild(objectContainer);\n    }\n\n    if (hasWrappingtext) {\n      elementContainer.appendChild(wrappingText);\n      elementContainer.setAttribute(ATTRIBUTE_IS_WRAPPING_TEXT, '');\n      setTimeout(() => {\n        sizeObject();\n      }, 100);\n    }\n\n    elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    setTimeout(() => {\n      eventResize();\n    }, 200);\n\n    return {\n      element: elementContainer,\n      events: {\n        load,\n      },\n      styles: STYLES_MEDIA_INLINE_WRAPPED_ELEMENT,\n    };\n  })();\n\nexport const createCompositeMediaInlineWrapped = CreateMediaInlineWrapped;\n"],"names":["LayoutImage","CaptionContainer","caption","objectContainer"],"mappings":"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"}
+{"version":3,"file":"wrapped.js","sources":["../../../../source/composite/media/inline/wrapped.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { createCompositeMediaCaption as CaptionContainer } from '../elements/caption';\nimport { createLayoutImageContainer } from 'layout';\n\nexport type TypeMediaInlineWrappedRequirements = {\n  image?: HTMLImageElement | null;\n  caption?: HTMLElement | null;\n  wrappingText?: HTMLElement | null;\n  isAlignmentRight?: boolean;\n  isThemeDark?: boolean;\n};\n\nconst BREAKPOINT = 400;\n\nconst GetObjectSize = ({\n  elementContainer,\n  image,\n}: {\n  elementContainer: HTMLElement;\n  image: HTMLImageElement;\n}) => {\n  const containerSize = elementContainer.offsetWidth;\n  const imageWidth = image.naturalWidth;\n  const isMediumView = containerSize > BREAKPOINT;\n  let width = imageWidth;\n\n  if (isMediumView) {\n    const shouldMaxSized = imageWidth > containerSize / 2;\n    if (shouldMaxSized) width = containerSize / 2;\n  }\n\n  return width;\n};\n\nconst CreateMediaInlineWrapped = (props: TypeMediaInlineWrappedRequirements) =>\n  (() => {\n    const { image, isAlignmentRight, isThemeDark, caption, wrappingText } =\n      props;\n    const hasWrappingText = wrappingText && wrappingText !== null;\n    const hasCaption = caption && caption !== null;\n\n    const createImage = () => {\n      if (!image) {\n        console.warn('CreateMediaInlineWrapped: No image provided');\n        return null;\n      }\n      return createLayoutImageContainer({ image, showCaption: true });\n    };\n\n    const createCaption = () => {\n      if (!hasCaption) {\n        console.warn('CreateMediaInlineWrapped: No caption provided');\n        return null;\n      }\n      const captionElement = CaptionContainer.CreateElement({ caption, isThemeDark });\n      captionElement.style.opacity = '0';\n      return captionElement;\n    };\n\n\t\tconst imageElement = createImage()\n\t\tconst captionElement = createCaption()\n\n    const objectModel = new ElementBuilder()\n      .withClassName('element-object-wrapped-container')\n      .withStyles({\n        element: {\n          display: 'inline-block',\n          paddingBottom: token.spacing.sm,\n          maxWidth: '100%',\n        },\n      })\n      .withChild(imageElement)\n      .withChild(captionElement)\n      .build();\n\n    const objectContainer = objectModel.element;\n\n    const containerBuilder = new ElementBuilder()\n      .withClassName('element-media-inline-wrapped-container')\n      .withStyles({\n        element: {\n          display: 'inline-block',\n          maxWidth: '100%',\n        },\n      });\n\n    if (image || hasCaption) {\n      containerBuilder.withChild(objectModel);\n    }\n\n    if (hasWrappingText && wrappingText) {\n      containerBuilder.withChild(wrappingText).withAttribute('is-wrapping-text', '');\n    }\n\n    const containerModel = containerBuilder.build();\n    const elementContainer = containerModel.element;\n\n    const sizeCaption = () => {\n      if (!imageElement) return;\n      const captionContainer = elementContainer.querySelector(\n        `.${CaptionContainer.Elements.container}`,\n      ) as HTMLElement;\n\n      if (captionContainer) {\n        captionContainer.style.width = `${imageElement.element.offsetWidth}px`;\n      }\n    };\n\n    const sizeObject = () => {\n      const isAboveBreakPoint = elementContainer.offsetWidth > BREAKPOINT;\n\n      if (!image) return;\n\n      if (isAboveBreakPoint) {\n        const objectSize = GetObjectSize({\n          elementContainer,\n          image,\n        });\n\n        objectContainer.style.width = `${objectSize}px`;\n        objectContainer.style.display = 'inline-block';\n        objectContainer.style.textAlign = 'left';\n\n        if (isAlignmentRight) {\n          objectContainer.style.float = `right`;\n          objectContainer.style.paddingLeft = `${token.spacing.md}`;\n        } else {\n          objectContainer.style.float = 'left';\n          objectContainer.style.paddingRight = `${token.spacing.md}`;\n        }\n      } else {\n        objectContainer.style.width = '100%';\n        objectContainer.style.float = 'none';\n        objectContainer.style.textAlign = 'center';\n        objectContainer.style.paddingLeft = `0`;\n        objectContainer.style.paddingRight = `0`;\n      }\n\n      setTimeout(() => {\n        sizeCaption();\n      }, 100);\n    };\n\n    const eventResize = () => {\n      if (hasWrappingText) {\n        sizeObject();\n      }\n      if (hasCaption) {\n        sizeCaption();\n      }\n    };\n\n    const load = () => {\n      const checkSizing = () => {\n        const captionContainer = objectContainer.querySelector(\n          `.${CaptionContainer.Elements.container}`,\n        ) as HTMLElement;\n\n        if (captionContainer) {\n          captionContainer.style.opacity = `1`;\n        }\n      };\n\n\t\t\tif (!image) {\n        console.warn('load(): No image found');\n        return null;\n      }\n\n      image.addEventListener('load', () => {\n        eventResize();\n\n        setTimeout(() => {\n          checkSizing();\n        }, 100);\n\n        setTimeout(() => {\n          checkSizing();\n        }, 500);\n      });\n    };\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    if (hasWrappingText) {\n      setTimeout(() => {\n        sizeObject();\n      }, 100);\n    }\n\n    setTimeout(() => {\n      eventResize();\n    }, 200);\n\n    containerModel.styles += CaptionContainer.Styles;\n\n    return {\n      ...containerModel,\n      events: {\n        load,\n      },\n    };\n  })();\n\nexport const createCompositeMediaInlineWrapped = CreateMediaInlineWrapped;\n"],"names":["captionElement","CaptionContainer"],"mappings":";;;;;;AAcA,MAAM,aAAa;AAEnB,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAGM;AACJ,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,aAAa,MAAM;AACzB,QAAM,eAAe,gBAAgB;AACrC,MAAI,QAAQ;AAEZ,MAAI,cAAc;AAChB,UAAM,iBAAiB,aAAa,gBAAgB;AACpD,QAAI,wBAAwB,gBAAgB;AAAA,EAC9C;AAEA,SAAO;AACT;AAEA,MAAM,2BAA2B,CAAC,WAC/B,MAAM;AACL,QAAM,EAAE,OAAO,kBAAkB,aAAa,SAAS,iBACrD;AACF,QAAM,kBAAkB,gBAAgB,iBAAiB;AACzD,QAAM,aAAa,WAAW,YAAY;AAE1C,QAAM,cAAc,MAAM;AACxB,QAAI,CAAC,OAAO;AACV,cAAQ,KAAK,6CAA6C;AAC1D,aAAO;AAAA,IACT;AACA,WAAO,2BAA2B,EAAE,OAAO,aAAa,MAAM;AAAA,EAChE;AAEA,QAAM,gBAAgB,MAAM;AAC1B,QAAI,CAAC,YAAY;AACf,cAAQ,KAAK,+CAA+C;AAC5D,aAAO;AAAA,IACT;AACA,UAAMA,kBAAiBC,4BAAiB,cAAc,EAAE,SAAS,aAAa;AAC9ED,oBAAe,MAAM,UAAU;AAC/B,WAAOA;AAAAA,EACT;AAEF,QAAM,eAAe,YAAA;AACrB,QAAM,iBAAiB,cAAA;AAErB,QAAM,cAAc,IAAI,eAAA,EACrB,cAAc,kCAAkC,EAChD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,eAAe,MAAM,QAAQ;AAAA,MAC7B,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,UAAU,YAAY,EACtB,UAAU,cAAc,EACxB,MAAA;AAEH,QAAM,kBAAkB,YAAY;AAEpC,QAAM,mBAAmB,IAAI,eAAA,EAC1B,cAAc,wCAAwC,EACtD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,IAAA;AAAA,EACZ,CACD;AAEH,MAAI,SAAS,YAAY;AACvB,qBAAiB,UAAU,WAAW;AAAA,EACxC;AAEA,MAAI,mBAAmB,cAAc;AACnC,qBAAiB,UAAU,YAAY,EAAE,cAAc,oBAAoB,EAAE;AAAA,EAC/E;AAEA,QAAM,iBAAiB,iBAAiB,MAAA;AACxC,QAAM,mBAAmB,eAAe;AAExC,QAAM,cAAc,MAAM;AACxB,QAAI,CAAC,aAAc;AACnB,UAAM,mBAAmB,iBAAiB;AAAA,MACxC,IAAIC,4BAAiB,SAAS,SAAS;AAAA,IAAA;AAGzC,QAAI,kBAAkB;AACpB,uBAAiB,MAAM,QAAQ,GAAG,aAAa,QAAQ,WAAW;AAAA,IACpE;AAAA,EACF;AAEA,QAAM,aAAa,MAAM;AACvB,UAAM,oBAAoB,iBAAiB,cAAc;AAEzD,QAAI,CAAC,MAAO;AAEZ,QAAI,mBAAmB;AACrB,YAAM,aAAa,cAAc;AAAA,QAC/B;AAAA,QACA;AAAA,MAAA,CACD;AAED,sBAAgB,MAAM,QAAQ,GAAG,UAAU;AAC3C,sBAAgB,MAAM,UAAU;AAChC,sBAAgB,MAAM,YAAY;AAElC,UAAI,kBAAkB;AACpB,wBAAgB,MAAM,QAAQ;AAC9B,wBAAgB,MAAM,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,MACzD,OAAO;AACL,wBAAgB,MAAM,QAAQ;AAC9B,wBAAgB,MAAM,eAAe,GAAG,MAAM,QAAQ,EAAE;AAAA,MAC1D;AAAA,IACF,OAAO;AACL,sBAAgB,MAAM,QAAQ;AAC9B,sBAAgB,MAAM,QAAQ;AAC9B,sBAAgB,MAAM,YAAY;AAClC,sBAAgB,MAAM,cAAc;AACpC,sBAAgB,MAAM,eAAe;AAAA,IACvC;AAEA,eAAW,MAAM;AACf,kBAAA;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AAEA,QAAM,cAAc,MAAM;AACxB,QAAI,iBAAiB;AACnB,iBAAA;AAAA,IACF;AACA,QAAI,YAAY;AACd,kBAAA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,cAAc,MAAM;AACxB,YAAM,mBAAmB,gBAAgB;AAAA,QACvC,IAAIA,4BAAiB,SAAS,SAAS;AAAA,MAAA;AAGzC,UAAI,kBAAkB;AACpB,yBAAiB,MAAM,UAAU;AAAA,MACnC;AAAA,IACF;AAEH,QAAI,CAAC,OAAO;AACP,cAAQ,KAAK,wBAAwB;AACrC,aAAO;AAAA,IACT;AAEA,UAAM,iBAAiB,QAAQ,MAAM;AACnC,kBAAA;AAEA,iBAAW,MAAM;AACf,oBAAA;AAAA,MACF,GAAG,GAAG;AAEN,iBAAW,MAAM;AACf,oBAAA;AAAA,MACF,GAAG,GAAG;AAAA,IACR,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA,SAAS,MAAM;AACb,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,MAAI,iBAAiB;AACnB,eAAW,MAAM;AACf,iBAAA;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AAEA,aAAW,MAAM;AACf,gBAAA;AAAA,EACF,GAAG,GAAG;AAEN,iBAAe,UAAUA,4BAAiB;AAE1C,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;AAEK,MAAM,oCAAoC;"}

package/dist/composite/navigation/elements/slider/slide-first.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slide-first.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/slider/slide-first.ts"],"names":[],"mappings":"AAIA,OAAO,EAAwD,eAAe,EAAE,MAAM,UAAU,CAAC;AAEjG,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAAG;IAClD,sBAAsB,EAAE,MAAM,CAAC;IAC/B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,YAAY,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjD,mBAAmB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzC,eAAe,EAAE,CAAC,GAAG,EAAE;QACrB,OAAO,EAAE,WAAW,CAAC;QACrB,cAAc,CAAC,EAAE,OAAO,CAAC;KAC1B,KAAK,IAAI,CAAC;IACX,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,mBAAmB,GAAG;IACjD,aAAa,EAAE,OAAO,CAAC;CACxB,CAAC;AAmJF,eAAO,MAAM,oCAAoC;2BA/BT,cAAc;;;;;CAqCrD,CAAC"}
+{"version":3,"file":"slide-first.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/slider/slide-first.ts"],"names":[],"mappings":"AAIA,OAAO,EAAwD,eAAe,EAAE,MAAM,UAAU,CAAC;AAEjG,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAAG;IAClD,sBAAsB,EAAE,MAAM,CAAC;IAC/B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,YAAY,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjD,mBAAmB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzC,eAAe,EAAE,CAAC,GAAG,EAAE;QACrB,OAAO,EAAE,WAAW,CAAC;QACrB,cAAc,CAAC,EAAE,OAAO,CAAC;KAC1B,KAAK,IAAI,CAAC;IACX,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,mBAAmB,GAAG;IACjD,aAAa,EAAE,OAAO,CAAC;CACxB,CAAC;AAuJF,eAAO,MAAM,oCAAoC;2BAnCT,cAAc;;;;;CAyCrD,CAAC"}

package/dist/composite/navigation/elements/slider/slide-first.js

@@ -93,6 +93,7 @@ const CreateSlideFirstElement = (props) => {
     isContextMenu
   } = props;
   const sliderContainer = document.createElement("div");
+  const sliderOverflow = document.createElement("div");
   const wrapper = document.createElement("div");
   const primarlyLinkContent = createPrimaryLinks(props);
   const secondaryLinkContent = createSecondaryLinks(props);
@@ -107,7 +108,9 @@ const CreateSlideFirstElement = (props) => {
   if (secondaryLinkContent) wrapper.appendChild(secondaryLinkContent);
   if (additionalContent) wrapper.appendChild(additionalContent);
   wrapper.classList.add(createCompositeNavigationSlides.Elements.wrapper);
-  sliderContainer.appendChild(wrapper);
+  sliderOverflow.classList.add(createCompositeNavigationSlides.Elements.overflow);
+  sliderOverflow.appendChild(wrapper);
+  sliderContainer.appendChild(sliderOverflow);
   return sliderContainer;
 };
 const createCompositeNavigationSliderFirst = {