@universityofmaryland/web-elements-library 1.5.9 → 1.6.0-beta.1

package/dist/composite/media/index.js

@@ -1,7 +1,7 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./elements/index.js");
-const index$1 = require("./inline/index.js");
-exports.elements = index;
-exports.inline = index$1;
+import * as index from "./elements/index.js";
+import { createCompositeMediaInline } from "./inline/index.js";
+export {
+  index as elements,
+  createCompositeMediaInline as inline
+};
 //# sourceMappingURL=index.js.map

package/dist/composite/media/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

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

@@ -3,12 +3,11 @@ export type TypeMediaInlineRequirements = {
     caption?: HTMLElement | null;
     isThemeDark?: boolean;
 };
-declare const CreateMediaWithCaption: (props: TypeMediaInlineRequirements) => {
+export declare const createCompositeMediaInlineCaption: (props: TypeMediaInlineRequirements) => {
     element: HTMLDivElement;
     events: {
         load: () => void;
     };
     styles: string;
 };
-export default CreateMediaWithCaption;
 //# sourceMappingURL=caption.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"caption.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/inline/caption.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AA6BF,QAAA,MAAM,sBAAsB,GAAI,OAAO,2BAA2B;;;;;;CAsF5D,CAAC;AAEP,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"caption.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/inline/caption.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAqHF,eAAO,MAAM,iCAAiC,UAxFP,2BAA2B;;;;;;CAwFK,CAAC"}

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

@@ -1,32 +1,16 @@
-"use strict";
-const token = require("@universityofmaryland/web-token-library");
-const performance = require("@universityofmaryland/web-utilities-library/performance");
-const caption = require("../elements/caption.js");
-const image = require("../../../layout/image.js");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+import * as token from "@universityofmaryland/web-token-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__namespace.spacing.sm};
+    padding-bottom: ${token.spacing.sm};
     max-width: 100%;
   }
 `;
@@ -36,21 +20,21 @@ const STYLES_MEDIA_INLINE_ELEMENT = `
     max-width: 100%;
   }
 
-  ${image.Styles}
-  ${caption.Styles}
+  ${layoutImage.Styles}
+  ${createCompositeMediaCaption.Styles}
   ${ObjectContainer}
 `;
 const CreateMediaWithCaption = (props) => (() => {
-  const { caption: caption$1, image: image$1, isThemeDark } = props;
-  const hasCaption = caption$1 && caption$1 !== null;
+  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(
-      `.${image.Elements.container}`
+      `.${layoutImage.Elements.container}`
     );
     const caption2 = elementContainer.querySelector(
-      `.${caption.Elements.container}`
+      `.${createCompositeMediaCaption.Elements.container}`
     );
     if (caption2) {
       caption2.style.width = `${imageContainer.offsetWidth}px`;
@@ -60,10 +44,10 @@ const CreateMediaWithCaption = (props) => (() => {
   const eventResize = () => {
     sizeCaption();
   };
-  if (image$1) {
+  if (image) {
     objectContainer.appendChild(
-      image.CreateElement({
-        image: image$1,
+      layoutImage.CreateElement({
+        image,
         showCaption: true
       })
     );
@@ -71,13 +55,13 @@ const CreateMediaWithCaption = (props) => (() => {
   const load = () => {
     const checkSizing = () => {
       const caption2 = objectContainer.querySelector(
-        `.${caption.Elements.container}`
+        `.${createCompositeMediaCaption.Elements.container}`
       );
       if (caption2) {
         caption2.style.opacity = `1`;
       }
     };
-    image$1?.addEventListener("load", () => {
+    image?.addEventListener("load", () => {
       checkSizing();
       setTimeout(() => {
         checkSizing();
@@ -85,8 +69,8 @@ const CreateMediaWithCaption = (props) => (() => {
     });
   };
   if (hasCaption) {
-    const captionElement = caption.CreateElement({
-      caption: caption$1,
+    const captionElement = createCompositeMediaCaption.CreateElement({
+      caption,
       isThemeDark
     });
     captionElement.style.display = `none`;
@@ -99,7 +83,7 @@ const CreateMediaWithCaption = (props) => (() => {
   elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);
   window.addEventListener(
     "resize",
-    performance.debounce(() => {
+    debounce(() => {
       eventResize();
     }, 20)
   );
@@ -114,5 +98,8 @@ const CreateMediaWithCaption = (props) => (() => {
     styles: STYLES_MEDIA_INLINE_ELEMENT
   };
 })();
-module.exports = CreateMediaWithCaption;
+const createCompositeMediaInlineCaption = CreateMediaWithCaption;
+export {
+  createCompositeMediaInlineCaption
+};
 //# sourceMappingURL=caption.js.map

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 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 default CreateMediaWithCaption;\n"],"names":["token","LayoutImage","CaptionContainer","caption","image","debounce"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,iCAAiC;AACvC,MAAM,mCAAmC;AAGzC,MAAM,kBAAkB;AAAA,KACnB,gCAAgC;AAAA;AAAA;AAAA,sBAGfA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAMtC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/BC,MAAY,MAAM;AAAA,IAClBC,QAAiB,MAAM;AAAA,IACvB,eAAe;AAAA;AAGnB,MAAM,yBAAyB,CAAC,WAC7B,MAAM;AACL,QAAM,WAAEC,WAAA,OAASC,SAAO,YAAA,IAAgB;AACxC,QAAM,aAAaD,aAAWA,cAAY;AAC1C,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,cAAc,MAAM;AACxB,UAAM,iBAAiB,iBAAiB;AAAA,MACtC,IAAIF,MAAY,SAAS,SAAS;AAAA,IAAA;AAEpC,UAAME,WAAU,iBAAiB;AAAA,MAC/B,IAAID,QAAiB,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,MAAIC,SAAO;AACT,oBAAgB;AAAA,MACdH,MAAY,cAAc;AAAA,QAAA,OACxBG;AAAAA,QACA,aAAa;AAAA,MAAA,CACd;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,cAAc,MAAM;AACxB,YAAMD,WAAU,gBAAgB;AAAA,QAC9B,IAAID,QAAiB,SAAS,SAAS;AAAA,MAAA;AAGzC,UAAIC,UAAS;AACXA,iBAAQ,MAAM,UAAU;AAAA,MAC1B;AAAA,IACF;AAEAC,aAAO,iBAAiB,QAAQ,MAAM;AACpC,kBAAA;AAEA,iBAAW,MAAM;AACf,oBAAA;AAAA,MACF,GAAG,GAAG;AAAA,IACR,CAAC;AAAA,EACH;AAEA,MAAI,YAAY;AACd,UAAM,iBAAiBF,QAAiB,cAAc;AAAA,MAAA,SACpDC;AAAAA,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,IACAE,YAAAA,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;;"}
+{"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;"}

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

@@ -1,4 +1,4 @@
-declare const _default: {
+export declare const createCompositeMediaInline: {
     caption: (props: import('./caption').TypeMediaInlineRequirements) => {
         element: HTMLDivElement;
         events: {
@@ -18,5 +18,4 @@ declare const _default: {
         styles: string;
     };
 };
-export default _default;
 //# 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,wBAIE"}
+{"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/index.js

@@ -1,11 +1,12 @@
-"use strict";
-const caption = require("./caption.js");
-const standard = require("./standard.js");
-const wrapped = require("./wrapped.js");
-const index = {
-  caption,
-  standard,
-  wrapped
+import { createCompositeMediaInlineCaption } from "./caption.js";
+import { createCompositeMediaInlineStandard } from "./standard.js";
+import { createCompositeMediaInlineWrapped } from "./wrapped.js";
+const createCompositeMediaInline = {
+  caption: createCompositeMediaInlineCaption,
+  standard: createCompositeMediaInlineStandard,
+  wrapped: createCompositeMediaInlineWrapped
+};
+export {
+  createCompositeMediaInline
 };
-module.exports = index;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../source/composite/media/inline/index.ts"],"sourcesContent":["import { default as caption } from './caption';\nimport { default as standard } from './standard';\nimport { default as wrapped } from './wrapped';\n\nexport default {\n  caption,\n  standard,\n  wrapped,\n};\n"],"names":[],"mappings":";;;;AAIA,MAAA,QAAe;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF;;"}
+{"version":3,"file":"index.js","sources":["../../../../source/composite/media/inline/index.ts"],"sourcesContent":["import { createCompositeMediaInlineCaption as caption } from './caption';\nimport { createCompositeMediaInlineStandard as standard } from './standard';\nimport { createCompositeMediaInlineWrapped as wrapped } from './wrapped';\n\nexport const createCompositeMediaInline = {\n  caption,\n  standard,\n  wrapped,\n};\n"],"names":["caption","standard","wrapped"],"mappings":";;;AAIO,MAAM,6BAA6B;AAAA,EAAA,SACxCA;AAAAA,EAAA,UACAC;AAAAA,EAAA,SACAC;AACF;"}

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

@@ -1,9 +1,8 @@
 export type TypeMediaInlineRequirements = {
     image?: HTMLImageElement | null;
 };
-declare const CreateMediaInline: (props: TypeMediaInlineRequirements) => {
+export declare const createCompositeMediaInlineStandard: (props: TypeMediaInlineRequirements) => {
     element: HTMLDivElement;
     styles: string;
 };
-export default CreateMediaInline;
 //# 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;AAcF,QAAA,MAAM,iBAAiB,GAAI,OAAO,2BAA2B;;;CAoBvD,CAAC;AAEP,eAAe,iBAAiB,CAAC"}
+{"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"}

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

@@ -1,5 +1,7 @@
-"use strict";
-const image = require("../../../layout/image.js");
+import { layoutImage } from "../../../layout/image.js";
+import "@universityofmaryland/web-builder-library";
+import "@universityofmaryland/web-styles-library";
+import "@universityofmaryland/web-token-library";
 const ELEMENT_MEDIA_INLINE_CONTAINER = "element-media-inline-container";
 const STYLES_MEDIA_INLINE_ELEMENT = `
   .${ELEMENT_MEDIA_INLINE_CONTAINER} {
@@ -7,15 +9,15 @@ const STYLES_MEDIA_INLINE_ELEMENT = `
     max-width: 100%;
   }
 
-  ${image.Styles}
+  ${layoutImage.Styles}
 `;
 const CreateMediaInline = (props) => (() => {
   const elementContainer = document.createElement("div");
-  const { image: image$1 } = props;
-  if (image$1) {
+  const { image } = props;
+  if (image) {
     elementContainer.appendChild(
-      image.CreateElement({
-        image: image$1,
+      layoutImage.CreateElement({
+        image,
         showCaption: true
       })
     );
@@ -26,5 +28,8 @@ const CreateMediaInline = (props) => (() => {
     styles: STYLES_MEDIA_INLINE_ELEMENT
   };
 })();
-module.exports = CreateMediaInline;
+const createCompositeMediaInlineStandard = CreateMediaInline;
+export {
+  createCompositeMediaInlineStandard
+};
 //# sourceMappingURL=standard.js.map

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 default CreateMediaInline;\n"],"names":["LayoutImage","image"],"mappings":";;AAMA,MAAM,iCAAiC;AAGvC,MAAM,8BAA8B;AAAA,KAC/B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/BA,MAAY,MAAM;AAAA;AAGtB,MAAM,oBAAoB,CAAC,WACxB,MAAM;AACL,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,EAAA,OAAEC,YAAU;AAElB,MAAIA,SAAO;AACT,qBAAiB;AAAA,MACfD,MAAY,cAAc;AAAA,QAAA,OACxBC;AAAAA,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;;"}
+{"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;"}

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

@@ -5,12 +5,11 @@ export type TypeMediaInlineWrappedRequirements = {
     isAlignmentRight?: boolean;
     isThemeDark?: boolean;
 };
-declare const CreateMediaInlineWrapped: (props: TypeMediaInlineWrappedRequirements) => {
+export declare const createCompositeMediaInlineWrapped: (props: TypeMediaInlineWrappedRequirements) => {
     element: HTMLDivElement;
     events: {
         load: () => void;
     };
     styles: string;
 };
-export default CreateMediaInlineWrapped;
 //# 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;AAoDF,QAAA,MAAM,wBAAwB,GAAI,OAAO,kCAAkC;;;;;;CA4IrE,CAAC;AAEP,eAAe,wBAAwB,CAAC"}
+{"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"}

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

@@ -1,25 +1,9 @@
-"use strict";
-const token = require("@universityofmaryland/web-token-library");
-const performance = require("@universityofmaryland/web-utilities-library/performance");
-const caption = require("../elements/caption.js");
-const image = require("../../../layout/image.js");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+import * as token from "@universityofmaryland/web-token-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 BREAKPOINT = 400;
 const ATTRIBUTE_IS_WRAPPING_TEXT = "is-wrapping-text";
 const ELEMENT_MEDIA_INLINE_CONTAINER = "element-media-inline-wrapped-container";
@@ -27,7 +11,7 @@ const ELEMENT_OBJECT_WRAPPED_CONTAINER = "element-object-wrapped-container";
 const ObjectContainer = `
   .${ELEMENT_OBJECT_WRAPPED_CONTAINER} {
     display: inline-block;
-    padding-bottom: ${token__namespace.spacing.sm};
+    padding-bottom: ${token.spacing.sm};
     max-width: 100%;
   }
 `;
@@ -37,16 +21,16 @@ const STYLES_MEDIA_INLINE_WRAPPED_ELEMENT = `
     max-width: 100%;
   }
 
-  ${image.Styles}
-  ${caption.Styles}
+  ${layoutImage.Styles}
+  ${createCompositeMediaCaption.Styles}
   ${ObjectContainer}
 `;
 const GetObjectSize = ({
   elementContainer,
-  image: image2
+  image
 }) => {
   const containerSize = elementContainer.offsetWidth;
-  const imageWidth = image2.naturalWidth;
+  const imageWidth = image.naturalWidth;
   const isMediumView = containerSize > BREAKPOINT;
   let width = imageWidth;
   if (isMediumView) {
@@ -56,17 +40,17 @@ const GetObjectSize = ({
   return width;
 };
 const CreateMediaInlineWrapped = (props) => (() => {
-  const { image: image$1, isAlignmentRight, isThemeDark, caption: caption$1, wrappingText } = props;
+  const { image, isAlignmentRight, isThemeDark, caption, wrappingText } = props;
   const elementContainer = document.createElement("div");
   const objectContainer = document.createElement("div");
   const hasWrappingtext = wrappingText && wrappingText !== null;
-  const hasCaption = caption$1 && caption$1 !== null;
+  const hasCaption = caption && caption !== null;
   const sizeCaption = () => {
     const imageContainer = elementContainer.querySelector(
-      `.${image.Elements.container}`
+      `.${layoutImage.Elements.container}`
     );
     const caption2 = elementContainer.querySelector(
-      `.${caption.Elements.container}`
+      `.${createCompositeMediaCaption.Elements.container}`
     );
     if (caption2) {
       caption2.style.width = `${imageContainer.offsetWidth}px`;
@@ -77,18 +61,18 @@ const CreateMediaInlineWrapped = (props) => (() => {
     const objectContainer2 = elementContainer.querySelector(
       `.${ELEMENT_OBJECT_WRAPPED_CONTAINER}`
     );
-    if (!image$1) return;
+    if (!image) return;
     if (isAboveBreakPoint) {
-      const objectSize = GetObjectSize({ elementContainer, image: image$1 });
+      const objectSize = GetObjectSize({ elementContainer, image });
       objectContainer2.style.width = `${objectSize}px`;
       objectContainer2.style.display = "inline-block";
       objectContainer2.style.textAlign = "left";
       if (isAlignmentRight) {
         objectContainer2.style.float = `right`;
-        objectContainer2.style.paddingLeft = `${token__namespace.spacing.md}`;
+        objectContainer2.style.paddingLeft = `${token.spacing.md}`;
       } else {
         objectContainer2.style.float = "left";
-        objectContainer2.style.paddingRight = `${token__namespace.spacing.md}`;
+        objectContainer2.style.paddingRight = `${token.spacing.md}`;
       }
     } else {
       objectContainer2.style.width = "100%";
@@ -112,13 +96,13 @@ const CreateMediaInlineWrapped = (props) => (() => {
   const load = () => {
     const checkSizing = () => {
       const caption2 = objectContainer.querySelector(
-        `.${caption.Elements.container}`
+        `.${createCompositeMediaCaption.Elements.container}`
       );
       if (caption2) {
         caption2.style.opacity = `1`;
       }
     };
-    image$1?.addEventListener("load", () => {
+    image?.addEventListener("load", () => {
       eventResize();
       setTimeout(() => {
         checkSizing();
@@ -129,17 +113,17 @@ const CreateMediaInlineWrapped = (props) => (() => {
     });
   };
   objectContainer.classList.add(ELEMENT_OBJECT_WRAPPED_CONTAINER);
-  if (image$1) {
+  if (image) {
     objectContainer.appendChild(
-      image.CreateElement({
-        image: image$1,
+      layoutImage.CreateElement({
+        image,
         showCaption: true
       })
     );
   }
   if (hasCaption) {
-    const captionElement = caption.CreateElement({
-      caption: caption$1,
+    const captionElement = createCompositeMediaCaption.CreateElement({
+      caption,
       isThemeDark
     });
     captionElement.style.opacity = `0`;
@@ -158,7 +142,7 @@ const CreateMediaInlineWrapped = (props) => (() => {
   elementContainer.classList.add(ELEMENT_MEDIA_INLINE_CONTAINER);
   window.addEventListener(
     "resize",
-    performance.debounce(() => {
+    debounce(() => {
       eventResize();
     }, 20)
   );
@@ -173,5 +157,8 @@ const CreateMediaInlineWrapped = (props) => (() => {
     styles: STYLES_MEDIA_INLINE_WRAPPED_ELEMENT
   };
 })();
-module.exports = CreateMediaInlineWrapped;
+const createCompositeMediaInlineWrapped = CreateMediaInlineWrapped;
+export {
+  createCompositeMediaInlineWrapped
+};
 //# sourceMappingURL=wrapped.js.map

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 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 default CreateMediaInlineWrapped;\n"],"names":["token","LayoutImage","CaptionContainer","image","caption","objectContainer","debounce"],"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 { 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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"}

package/dist/composite/navigation/elements/breadcrumb/index.d.ts

@@ -2,9 +2,8 @@ export interface BreadcrumbProps {
     isThemeDark?: boolean;
     linkListSlot: HTMLElement;
 }
-declare const _default: ({ isThemeDark, linkListSlot }: BreadcrumbProps) => {
+export declare const createCompositeNavigationBreadcrumb: ({ isThemeDark, linkListSlot }: BreadcrumbProps) => {
     element: HTMLElement;
     styles: string;
 };
-export default _default;
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/navigation/elements/breadcrumb/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/breadcrumb/index.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,WAAW,CAAC;CAC3B;yBA6Fe,+BAA+B,eAAe;;;;AAA9D,wBAuBE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/breadcrumb/index.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,WAAW,CAAC;CAC3B;AAsHD,eAAO,MAAM,mCAAmC,kCAzBgB,eAAe;;;CAyBL,CAAC"}