@universityofmaryland/web-elements-library 1.3.7 → 1.4.1

package/dist/atomic/animations/brand/index.d.ts

@@ -1,3 +1,4 @@
 export { default as chevronFlow } from './chevron-flow';
 export { default as chevronScroll } from './chevron-scroll';
+export { default as cardStack } from './card-stack';
 //# sourceMappingURL=index.d.ts.map

package/dist/atomic/animations/brand/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/atomic/animations/brand/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/atomic/animations/brand/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/dist/atomic/animations/brand/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const chevronFlow = require("./chevron-flow.js");
+const chevronScroll = require("./chevron-scroll.js");
+const cardStack = require("./card-stack.js");
+exports.chevronFlow = chevronFlow;
+exports.chevronScroll = chevronScroll;
+exports.cardStack = cardStack;
+//# sourceMappingURL=index.js.map

package/dist/atomic/animations/brand/index.js.map

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

package/dist/atomic/animations/brand/index.mjs

@@ -0,0 +1,9 @@
+import { default as default2 } from "./chevron-flow.mjs";
+import { default as default3 } from "./chevron-scroll.mjs";
+import { default as default4 } from "./card-stack.mjs";
+export {
+  default4 as cardStack,
+  default2 as chevronFlow,
+  default3 as chevronScroll
+};
+//# sourceMappingURL=index.mjs.map

package/dist/atomic/animations/brand/index.mjs.map

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

package/dist/atomic/animations/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./actions/index.js");
+const index$1 = require("./brand/index.js");
+exports.actions = index;
+exports.brand = index$1;
+//# sourceMappingURL=index.js.map

package/dist/atomic/animations/index.js.map

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

package/dist/atomic/animations/index.mjs

@@ -0,0 +1,7 @@
+import * as index from "./actions/index.mjs";
+import * as index$1 from "./brand/index.mjs";
+export {
+  index as actions,
+  index$1 as brand
+};
+//# sourceMappingURL=index.mjs.map

package/dist/atomic/animations/index.mjs.map

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

package/dist/atomic/assets/image/background.d.ts

@@ -1,13 +1,12 @@
+import { UMDElement } from '../../../_types';
 interface Asset {
-    image: HTMLImageElement | HTMLAnchorElement;
+    element: HTMLImageElement | HTMLAnchorElement;
     isAspectStandard?: boolean;
     isScaled?: boolean;
+    isGifAllowed?: boolean;
 }
 interface Props extends Asset {
-    dateSign?: {
-        element: HTMLElement;
-        styles: string;
-    };
+    dateSign?: UMDElement;
     isShowCaption?: boolean;
     customStyles?: Record<string, any>;
 }

package/dist/atomic/assets/image/background.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/background.ts"],"names":[],"mappings":"AAMA,UAAU,KAAK;IACb,KAAK,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAMD,UAAU,KAAM,SAAQ,KAAK;IAC3B,QAAQ,CAAC,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACpC;gCAoBsB,KAAK;;;;;AAA5B,wBAuDE"}
+{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/background.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,UAAU,KAAK;IACb,OAAO,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,UAAU,KAAM,SAAQ,KAAK;IAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACpC;yBAgGe,OAAO,KAAK;;;;;AAA5B,wBAyCE"}

package/dist/atomic/assets/image/background.js

@@ -0,0 +1,116 @@
+"use strict";
+const index = require("../../../model/elements/index.js");
+const gif = require("./gif.js");
+const layout = require("../../../model/elements/layout.js");
+const assets = require("../../../model/elements/assets.js");
+const ATTRIBUTE_CAPTION = "data-caption";
+const ATTRIBUTE_CREDIT = "data-credit";
+const isImageElement = (element) => {
+  return element instanceof HTMLImageElement;
+};
+const checkIsGif = (element) => {
+  if (isImageElement(element)) {
+    return element.src !== null && element.src.toLowerCase().includes(".gif");
+  }
+  if (element instanceof HTMLAnchorElement) {
+    const imgChild = element.querySelector("img");
+    const isGif = imgChild !== null && imgChild.src !== null && imgChild.src.toLowerCase().includes(".gif");
+    if (isGif) {
+      console.error(
+        `GIFs are not allowed in <a>. Please upload a different format.`
+      );
+    }
+    return isGif;
+  }
+  return false;
+};
+const createCaption = (element, isShowCaption) => {
+  if (!isShowCaption) return null;
+  const attributeCaption = element.getAttribute(ATTRIBUTE_CAPTION);
+  const attributeCredit = element.getAttribute(ATTRIBUTE_CREDIT);
+  if (attributeCaption) {
+    console.log(
+      `Attribute "data-caption" is deprecated. Use "data-credit" instead. This attribute will be removed in version 2.0.`
+    );
+  }
+  const text = attributeCaption || attributeCredit;
+  if (!text) return null;
+  const caption = document.createElement("span");
+  caption.textContent = text;
+  return assets.imageCaption({
+    element: caption
+  });
+};
+const embedAsset = ({
+  element,
+  isAspectStandard,
+  isGifAllowed
+}) => {
+  const isTypeGif = checkIsGif(element);
+  if (isGifAllowed && isTypeGif) {
+    return gif({ element });
+  }
+  if (!isGifAllowed && isTypeGif) {
+    console.error(
+      `GIFs are not allowed in <${element.localName}>. Please upload a different format.`
+    );
+    return;
+  }
+  if (isAspectStandard) {
+    return assets.imageAspect({
+      element
+    });
+  }
+  const defaultContainer = index.createDiv({
+    className: "image-container",
+    elementStyles: {
+      element: {
+        position: "relative",
+        width: "100%",
+        height: "100%"
+      }
+    }
+  });
+  defaultContainer.element.appendChild(element);
+  return defaultContainer;
+};
+const imageContainer = (props) => {
+  const {
+    customStyles,
+    dateSign,
+    element,
+    isAspectStandard = false,
+    isScaled,
+    isShowCaption = false,
+    isGifAllowed = false
+  } = props;
+  const asset = embedAsset({ element, isAspectStandard, isGifAllowed });
+  const caption = createCaption(element, isShowCaption);
+  const children = [];
+  if (caption) {
+    children.push(caption);
+  }
+  if (dateSign) {
+    children.push(
+      layout.backgroundBoxWhite({
+        element: document.createElement("div"),
+        children: [dateSign]
+      })
+    );
+  }
+  if (asset) {
+    children.push(asset);
+  }
+  return assets.imageWrapper({
+    element: document.createElement("div"),
+    children,
+    isScaled,
+    elementStyles: {
+      element: {
+        ...customStyles
+      }
+    }
+  });
+};
+module.exports = imageContainer;
+//# sourceMappingURL=background.js.map

package/dist/atomic/assets/image/background.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"background.js","sources":["../../../../source/atomic/assets/image/background.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { default as gifToggle } from './gif';\nimport { type UMDElement } from '../../../_types';\n\nconst ATTRIBUTE_CAPTION = 'data-caption';\nconst ATTRIBUTE_CREDIT = 'data-credit';\n\ninterface Asset {\n  element: HTMLImageElement | HTMLAnchorElement;\n  isAspectStandard?: boolean;\n  isScaled?: boolean;\n  isGifAllowed?: boolean;\n}\n\ninterface Props extends Asset {\n  dateSign?: UMDElement;\n  isShowCaption?: boolean;\n  customStyles?: Record<string, any>;\n}\n\nconst isImageElement = (element: HTMLElement): element is HTMLImageElement => {\n  return element instanceof HTMLImageElement;\n};\n\nconst checkIsGif = (element: HTMLImageElement | HTMLAnchorElement): boolean => {\n  if (isImageElement(element)) {\n    return element.src !== null && element.src.toLowerCase().includes('.gif');\n  }\n\n  if (element instanceof HTMLAnchorElement) {\n    const imgChild = element.querySelector('img');\n    const isGif =\n      imgChild !== null &&\n      imgChild.src !== null &&\n      imgChild.src.toLowerCase().includes('.gif');\n\n    if (isGif) {\n      console.error(\n        `GIFs are not allowed in <a>. Please upload a different format.`,\n      );\n    }\n\n    return isGif;\n  }\n\n  return false;\n};\n\nconst createCaption = (\n  element: HTMLImageElement | HTMLAnchorElement,\n  isShowCaption: boolean,\n): UMDElement | null => {\n  if (!isShowCaption) return null;\n\n  const attributeCaption = element.getAttribute(ATTRIBUTE_CAPTION);\n  const attributeCredit = element.getAttribute(ATTRIBUTE_CREDIT);\n\n  if (attributeCaption) {\n    console.log(\n      `Attribute \"data-caption\" is deprecated. Use \"data-credit\" instead. This attribute will be removed in version 2.0.`,\n    );\n  }\n\n  const text = attributeCaption || attributeCredit;\n  if (!text) return null;\n\n  const caption = document.createElement('span');\n  caption.textContent = text;\n\n  return ElementModel.assets.imageCaption({\n    element: caption,\n  });\n};\n\nconst embedAsset = ({\n  element,\n  isAspectStandard,\n  isGifAllowed,\n}: Pick<Asset, 'element' | 'isAspectStandard' | 'isGifAllowed'>) => {\n  const isTypeGif = checkIsGif(element);\n\n  if (isGifAllowed && isTypeGif) {\n    return gifToggle({ element });\n  }\n\n  if (!isGifAllowed && isTypeGif) {\n    console.error(\n      `GIFs are not allowed in <${element.localName}>. Please upload a different format.`,\n    );\n    return;\n  }\n\n  if (isAspectStandard) {\n    return ElementModel.assets.imageAspect({\n      element,\n    });\n  }\n\n  const defaultContainer = ElementModel.createDiv({\n    className: 'image-container',\n    elementStyles: {\n      element: {\n        position: 'relative',\n        width: '100%',\n        height: '100%',\n      },\n    },\n  });\n\n  defaultContainer.element.appendChild(element);\n\n  return defaultContainer;\n};\n\nexport default (props: Props) => {\n  const {\n    customStyles,\n    dateSign,\n    element,\n    isAspectStandard = false,\n    isScaled,\n    isShowCaption = false,\n    isGifAllowed = false,\n  } = props;\n  const asset = embedAsset({ element, isAspectStandard, isGifAllowed });\n  const caption = createCaption(element, isShowCaption);\n  const children: UMDElement[] = [];\n\n  if (caption) {\n    children.push(caption);\n  }\n\n  if (dateSign) {\n    children.push(\n      ElementModel.layout.backgroundBoxWhite({\n        element: document.createElement('div'),\n        children: [dateSign],\n      }),\n    );\n  }\n\n  if (asset) {\n    children.push(asset);\n  }\n\n  return ElementModel.assets.imageWrapper({\n    element: document.createElement('div'),\n    children,\n    isScaled,\n    elementStyles: {\n      element: {\n        ...customStyles,\n      },\n    },\n  });\n};\n"],"names":["ElementModel.assets.imageCaption","gifToggle","ElementModel.assets.imageAspect","ElementModel.createDiv","ElementModel.layout.backgroundBoxWhite","ElementModel.assets.imageWrapper"],"mappings":";;;;;AAIA,MAAM,oBAAoB;AAC1B,MAAM,mBAAmB;AAezB,MAAM,iBAAiB,CAAC,YAAsD;AAC5E,SAAO,mBAAmB;AAC5B;AAEA,MAAM,aAAa,CAAC,YAA2D;AAC7E,MAAI,eAAe,OAAO,GAAG;AAC3B,WAAO,QAAQ,QAAQ,QAAQ,QAAQ,IAAI,YAAA,EAAc,SAAS,MAAM;AAAA,EAC1E;AAEA,MAAI,mBAAmB,mBAAmB;AACxC,UAAM,WAAW,QAAQ,cAAc,KAAK;AAC5C,UAAM,QACJ,aAAa,QACb,SAAS,QAAQ,QACjB,SAAS,IAAI,cAAc,SAAS,MAAM;AAE5C,QAAI,OAAO;AACT,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,MAAM,gBAAgB,CACpB,SACA,kBACsB;AACtB,MAAI,CAAC,cAAe,QAAO;AAE3B,QAAM,mBAAmB,QAAQ,aAAa,iBAAiB;AAC/D,QAAM,kBAAkB,QAAQ,aAAa,gBAAgB;AAE7D,MAAI,kBAAkB;AACpB,YAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,OAAO,oBAAoB;AACjC,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,UAAQ,cAAc;AAEtB,SAAOA,oBAAiC;AAAA,IACtC,SAAS;AAAA,EAAA,CACV;AACH;AAEA,MAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,MAAoE;AAClE,QAAM,YAAY,WAAW,OAAO;AAEpC,MAAI,gBAAgB,WAAW;AAC7B,WAAOC,IAAU,EAAE,SAAS;AAAA,EAC9B;AAEA,MAAI,CAAC,gBAAgB,WAAW;AAC9B,YAAQ;AAAA,MACN,4BAA4B,QAAQ,SAAS;AAAA,IAAA;AAE/C;AAAA,EACF;AAEA,MAAI,kBAAkB;AACpB,WAAOC,mBAAgC;AAAA,MACrC;AAAA,IAAA,CACD;AAAA,EACH;AAEA,QAAM,mBAAmBC,MAAAA,UAAuB;AAAA,IAC9C,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EACF,CACD;AAED,mBAAiB,QAAQ,YAAY,OAAO;AAE5C,SAAO;AACT;AAEA,MAAA,iBAAe,CAAC,UAAiB;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA,gBAAgB;AAAA,IAChB,eAAe;AAAA,EAAA,IACb;AACJ,QAAM,QAAQ,WAAW,EAAE,SAAS,kBAAkB,cAAc;AACpE,QAAM,UAAU,cAAc,SAAS,aAAa;AACpD,QAAM,WAAyB,CAAA;AAE/B,MAAI,SAAS;AACX,aAAS,KAAK,OAAO;AAAA,EACvB;AAEA,MAAI,UAAU;AACZ,aAAS;AAAA,MACPC,0BAAuC;AAAA,QACrC,SAAS,SAAS,cAAc,KAAK;AAAA,QACrC,UAAU,CAAC,QAAQ;AAAA,MAAA,CACpB;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,OAAO;AACT,aAAS,KAAK,KAAK;AAAA,EACrB;AAEA,SAAOC,oBAAiC;AAAA,IACtC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC;AAAA,IACA;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF,CACD;AACH;;"}

package/dist/atomic/assets/image/background.mjs

@@ -0,0 +1,117 @@
+import { createDiv } from "../../../model/elements/index.mjs";
+import gifToggle from "./gif.mjs";
+import { backgroundBoxWhite } from "../../../model/elements/layout.mjs";
+import { imageWrapper, imageAspect, imageCaption } from "../../../model/elements/assets.mjs";
+const ATTRIBUTE_CAPTION = "data-caption";
+const ATTRIBUTE_CREDIT = "data-credit";
+const isImageElement = (element) => {
+  return element instanceof HTMLImageElement;
+};
+const checkIsGif = (element) => {
+  if (isImageElement(element)) {
+    return element.src !== null && element.src.toLowerCase().includes(".gif");
+  }
+  if (element instanceof HTMLAnchorElement) {
+    const imgChild = element.querySelector("img");
+    const isGif = imgChild !== null && imgChild.src !== null && imgChild.src.toLowerCase().includes(".gif");
+    if (isGif) {
+      console.error(
+        `GIFs are not allowed in <a>. Please upload a different format.`
+      );
+    }
+    return isGif;
+  }
+  return false;
+};
+const createCaption = (element, isShowCaption) => {
+  if (!isShowCaption) return null;
+  const attributeCaption = element.getAttribute(ATTRIBUTE_CAPTION);
+  const attributeCredit = element.getAttribute(ATTRIBUTE_CREDIT);
+  if (attributeCaption) {
+    console.log(
+      `Attribute "data-caption" is deprecated. Use "data-credit" instead. This attribute will be removed in version 2.0.`
+    );
+  }
+  const text = attributeCaption || attributeCredit;
+  if (!text) return null;
+  const caption = document.createElement("span");
+  caption.textContent = text;
+  return imageCaption({
+    element: caption
+  });
+};
+const embedAsset = ({
+  element,
+  isAspectStandard,
+  isGifAllowed
+}) => {
+  const isTypeGif = checkIsGif(element);
+  if (isGifAllowed && isTypeGif) {
+    return gifToggle({ element });
+  }
+  if (!isGifAllowed && isTypeGif) {
+    console.error(
+      `GIFs are not allowed in <${element.localName}>. Please upload a different format.`
+    );
+    return;
+  }
+  if (isAspectStandard) {
+    return imageAspect({
+      element
+    });
+  }
+  const defaultContainer = createDiv({
+    className: "image-container",
+    elementStyles: {
+      element: {
+        position: "relative",
+        width: "100%",
+        height: "100%"
+      }
+    }
+  });
+  defaultContainer.element.appendChild(element);
+  return defaultContainer;
+};
+const imageContainer = (props) => {
+  const {
+    customStyles,
+    dateSign,
+    element,
+    isAspectStandard = false,
+    isScaled,
+    isShowCaption = false,
+    isGifAllowed = false
+  } = props;
+  const asset = embedAsset({ element, isAspectStandard, isGifAllowed });
+  const caption = createCaption(element, isShowCaption);
+  const children = [];
+  if (caption) {
+    children.push(caption);
+  }
+  if (dateSign) {
+    children.push(
+      backgroundBoxWhite({
+        element: document.createElement("div"),
+        children: [dateSign]
+      })
+    );
+  }
+  if (asset) {
+    children.push(asset);
+  }
+  return imageWrapper({
+    element: document.createElement("div"),
+    children,
+    isScaled,
+    elementStyles: {
+      element: {
+        ...customStyles
+      }
+    }
+  });
+};
+export {
+  imageContainer as default
+};
+//# sourceMappingURL=background.mjs.map

package/dist/atomic/assets/image/background.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"background.mjs","sources":["../../../../source/atomic/assets/image/background.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport { default as gifToggle } from './gif';\nimport { type UMDElement } from '../../../_types';\n\nconst ATTRIBUTE_CAPTION = 'data-caption';\nconst ATTRIBUTE_CREDIT = 'data-credit';\n\ninterface Asset {\n  element: HTMLImageElement | HTMLAnchorElement;\n  isAspectStandard?: boolean;\n  isScaled?: boolean;\n  isGifAllowed?: boolean;\n}\n\ninterface Props extends Asset {\n  dateSign?: UMDElement;\n  isShowCaption?: boolean;\n  customStyles?: Record<string, any>;\n}\n\nconst isImageElement = (element: HTMLElement): element is HTMLImageElement => {\n  return element instanceof HTMLImageElement;\n};\n\nconst checkIsGif = (element: HTMLImageElement | HTMLAnchorElement): boolean => {\n  if (isImageElement(element)) {\n    return element.src !== null && element.src.toLowerCase().includes('.gif');\n  }\n\n  if (element instanceof HTMLAnchorElement) {\n    const imgChild = element.querySelector('img');\n    const isGif =\n      imgChild !== null &&\n      imgChild.src !== null &&\n      imgChild.src.toLowerCase().includes('.gif');\n\n    if (isGif) {\n      console.error(\n        `GIFs are not allowed in <a>. Please upload a different format.`,\n      );\n    }\n\n    return isGif;\n  }\n\n  return false;\n};\n\nconst createCaption = (\n  element: HTMLImageElement | HTMLAnchorElement,\n  isShowCaption: boolean,\n): UMDElement | null => {\n  if (!isShowCaption) return null;\n\n  const attributeCaption = element.getAttribute(ATTRIBUTE_CAPTION);\n  const attributeCredit = element.getAttribute(ATTRIBUTE_CREDIT);\n\n  if (attributeCaption) {\n    console.log(\n      `Attribute \"data-caption\" is deprecated. Use \"data-credit\" instead. This attribute will be removed in version 2.0.`,\n    );\n  }\n\n  const text = attributeCaption || attributeCredit;\n  if (!text) return null;\n\n  const caption = document.createElement('span');\n  caption.textContent = text;\n\n  return ElementModel.assets.imageCaption({\n    element: caption,\n  });\n};\n\nconst embedAsset = ({\n  element,\n  isAspectStandard,\n  isGifAllowed,\n}: Pick<Asset, 'element' | 'isAspectStandard' | 'isGifAllowed'>) => {\n  const isTypeGif = checkIsGif(element);\n\n  if (isGifAllowed && isTypeGif) {\n    return gifToggle({ element });\n  }\n\n  if (!isGifAllowed && isTypeGif) {\n    console.error(\n      `GIFs are not allowed in <${element.localName}>. Please upload a different format.`,\n    );\n    return;\n  }\n\n  if (isAspectStandard) {\n    return ElementModel.assets.imageAspect({\n      element,\n    });\n  }\n\n  const defaultContainer = ElementModel.createDiv({\n    className: 'image-container',\n    elementStyles: {\n      element: {\n        position: 'relative',\n        width: '100%',\n        height: '100%',\n      },\n    },\n  });\n\n  defaultContainer.element.appendChild(element);\n\n  return defaultContainer;\n};\n\nexport default (props: Props) => {\n  const {\n    customStyles,\n    dateSign,\n    element,\n    isAspectStandard = false,\n    isScaled,\n    isShowCaption = false,\n    isGifAllowed = false,\n  } = props;\n  const asset = embedAsset({ element, isAspectStandard, isGifAllowed });\n  const caption = createCaption(element, isShowCaption);\n  const children: UMDElement[] = [];\n\n  if (caption) {\n    children.push(caption);\n  }\n\n  if (dateSign) {\n    children.push(\n      ElementModel.layout.backgroundBoxWhite({\n        element: document.createElement('div'),\n        children: [dateSign],\n      }),\n    );\n  }\n\n  if (asset) {\n    children.push(asset);\n  }\n\n  return ElementModel.assets.imageWrapper({\n    element: document.createElement('div'),\n    children,\n    isScaled,\n    elementStyles: {\n      element: {\n        ...customStyles,\n      },\n    },\n  });\n};\n"],"names":["ElementModel.assets.imageCaption","ElementModel.assets.imageAspect","ElementModel.createDiv","ElementModel.layout.backgroundBoxWhite","ElementModel.assets.imageWrapper"],"mappings":";;;;AAIA,MAAM,oBAAoB;AAC1B,MAAM,mBAAmB;AAezB,MAAM,iBAAiB,CAAC,YAAsD;AAC5E,SAAO,mBAAmB;AAC5B;AAEA,MAAM,aAAa,CAAC,YAA2D;AAC7E,MAAI,eAAe,OAAO,GAAG;AAC3B,WAAO,QAAQ,QAAQ,QAAQ,QAAQ,IAAI,YAAA,EAAc,SAAS,MAAM;AAAA,EAC1E;AAEA,MAAI,mBAAmB,mBAAmB;AACxC,UAAM,WAAW,QAAQ,cAAc,KAAK;AAC5C,UAAM,QACJ,aAAa,QACb,SAAS,QAAQ,QACjB,SAAS,IAAI,cAAc,SAAS,MAAM;AAE5C,QAAI,OAAO;AACT,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,MAAM,gBAAgB,CACpB,SACA,kBACsB;AACtB,MAAI,CAAC,cAAe,QAAO;AAE3B,QAAM,mBAAmB,QAAQ,aAAa,iBAAiB;AAC/D,QAAM,kBAAkB,QAAQ,aAAa,gBAAgB;AAE7D,MAAI,kBAAkB;AACpB,YAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,OAAO,oBAAoB;AACjC,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,UAAQ,cAAc;AAEtB,SAAOA,aAAiC;AAAA,IACtC,SAAS;AAAA,EAAA,CACV;AACH;AAEA,MAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,MAAoE;AAClE,QAAM,YAAY,WAAW,OAAO;AAEpC,MAAI,gBAAgB,WAAW;AAC7B,WAAO,UAAU,EAAE,SAAS;AAAA,EAC9B;AAEA,MAAI,CAAC,gBAAgB,WAAW;AAC9B,YAAQ;AAAA,MACN,4BAA4B,QAAQ,SAAS;AAAA,IAAA;AAE/C;AAAA,EACF;AAEA,MAAI,kBAAkB;AACpB,WAAOC,YAAgC;AAAA,MACrC;AAAA,IAAA,CACD;AAAA,EACH;AAEA,QAAM,mBAAmBC,UAAuB;AAAA,IAC9C,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EACF,CACD;AAED,mBAAiB,QAAQ,YAAY,OAAO;AAE5C,SAAO;AACT;AAEA,MAAA,iBAAe,CAAC,UAAiB;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA,gBAAgB;AAAA,IAChB,eAAe;AAAA,EAAA,IACb;AACJ,QAAM,QAAQ,WAAW,EAAE,SAAS,kBAAkB,cAAc;AACpE,QAAM,UAAU,cAAc,SAAS,aAAa;AACpD,QAAM,WAAyB,CAAA;AAE/B,MAAI,SAAS;AACX,aAAS,KAAK,OAAO;AAAA,EACvB;AAEA,MAAI,UAAU;AACZ,aAAS;AAAA,MACPC,mBAAuC;AAAA,QACrC,SAAS,SAAS,cAAc,KAAK;AAAA,QACrC,UAAU,CAAC,QAAQ;AAAA,MAAA,CACpB;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,OAAO;AACT,aAAS,KAAK,KAAK;AAAA,EACrB;AAEA,SAAOC,aAAiC;AAAA,IACtC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC;AAAA,IACA;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF,CACD;AACH;"}

package/dist/atomic/assets/image/gif.d.ts

@@ -1,5 +1,5 @@
-declare const _default: ({ image }: {
-    image: HTMLImageElement;
+declare const _default: ({ element, }: {
+    element: HTMLImageElement | HTMLAnchorElement;
 }) => {
     element: HTMLElement;
     className: string;

package/dist/atomic/assets/image/gif.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gif.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/gif.ts"],"names":[],"mappings":"oCAG2B;IAAE,KAAK,EAAE,gBAAgB,CAAA;CAAE;;;;;AAAtD,wBAiGE"}
+{"version":3,"file":"gif.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/gif.ts"],"names":[],"mappings":"yBAiHgB,cAEb;IACD,OAAO,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;CAC/C;;;;;AAJD,wBAyBE"}

package/dist/atomic/assets/image/gif.js

@@ -0,0 +1,111 @@
+"use strict";
+const icons = require("../../../utilities/assets/icons.js");
+const index = require("../../../utilities/performance/index.js");
+require("../../../node_modules/postcss/lib/postcss.js");
+require("../../../node_modules/postcss-nesting/dist/index.js");
+require("../../../node_modules/postcss-js/index.js");
+require("../../../model/modifiers/index.js");
+require("@universityofmaryland/web-styles-library");
+const assets = require("../../../model/elements/assets.js");
+require("../../../model/elements/headline.js");
+const extractImageElement = (element) => {
+  if (element instanceof HTMLImageElement) {
+    return element;
+  }
+  if (element instanceof HTMLAnchorElement) {
+    return element.querySelector("img");
+  }
+  return null;
+};
+const applyGifToggle = (image, container) => {
+  const canvas = document.createElement("canvas");
+  const button = document.createElement("button");
+  const setButtonPlay = () => {
+    button.setAttribute("aria-label", "Pause");
+    button.innerHTML = icons.PAUSE;
+    canvas.style.opacity = "0";
+    image.style.opacity = "1";
+  };
+  const setButtonPause = () => {
+    button.setAttribute("aria-label", "Play");
+    button.innerHTML = icons.PLAY;
+    canvas.style.opacity = "1";
+    image.style.opacity = "0";
+  };
+  const sizeCanvas = ({ container: container2 }) => {
+    if (!container2) return;
+    const image2 = container2.querySelector("img");
+    const canvas2 = container2.querySelector("canvas");
+    if (!container2 || !canvas2 || !image2) return;
+    const ctx = canvas2.getContext("2d");
+    const containerWidth = container2.clientWidth;
+    const containerHeight = container2.clientHeight;
+    canvas2.style.width = "100%";
+    canvas2.style.height = `${image2.clientHeight}px`;
+    canvas2.style.position = "absolute";
+    canvas2.style.top = "0";
+    canvas2.style.left = "0";
+    canvas2.width = containerWidth;
+    canvas2.height = containerHeight;
+    const imgRatio = image2.naturalWidth / image2.naturalHeight;
+    const containerRatio = containerWidth / containerHeight;
+    let drawWidth, drawHeight, offsetX = 0, offsetY = 0;
+    if (imgRatio > containerRatio) {
+      drawHeight = containerHeight;
+      drawWidth = image2.naturalWidth * (containerHeight / image2.naturalHeight);
+      offsetX = (containerWidth - drawWidth) / 2;
+    } else {
+      drawWidth = containerWidth;
+      drawHeight = image2.naturalHeight * (containerWidth / image2.naturalWidth);
+      offsetY = (containerHeight - drawHeight) / 2;
+    }
+    ctx.clearRect(0, 0, containerWidth, containerHeight);
+    ctx.imageSmoothingEnabled = true;
+    ctx.drawImage(image2, offsetX, offsetY, drawWidth, drawHeight);
+  };
+  let isPlaying = true;
+  button.setAttribute("type", "button");
+  button.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (isPlaying) {
+      setButtonPause();
+      isPlaying = false;
+    } else {
+      setButtonPlay();
+      isPlaying = true;
+    }
+  });
+  image.addEventListener("load", () => {
+    container.appendChild(canvas);
+    container.appendChild(button);
+    setButtonPlay();
+    sizeCanvas({ container });
+  });
+  window.addEventListener(
+    "resize",
+    index.debounce(() => {
+      sizeCanvas({ container });
+    }, 50)
+  );
+};
+const gifToggle = ({
+  element
+}) => {
+  const image = extractImageElement(element);
+  if (!image) {
+    throw new Error("No valid image element found");
+  }
+  const isAnchor = element instanceof HTMLAnchorElement;
+  const container = isAnchor ? element : document.createElement("div");
+  const composite = assets.gifToggle({
+    element: container
+  });
+  if (!isAnchor) {
+    container.appendChild(element);
+  }
+  applyGifToggle(image, container);
+  return composite;
+};
+module.exports = gifToggle;
+//# sourceMappingURL=gif.js.map

package/dist/atomic/assets/image/gif.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gif.js","sources":["../../../../source/atomic/assets/image/gif.ts"],"sourcesContent":["import * as Utilities from 'utilities';\nimport { ElementModel } from 'model';\n\nconst extractImageElement = (\n  element: HTMLImageElement | HTMLAnchorElement,\n): HTMLImageElement | null => {\n  if (element instanceof HTMLImageElement) {\n    return element;\n  }\n\n  if (element instanceof HTMLAnchorElement) {\n    return element.querySelector('img');\n  }\n\n  return null;\n};\n\nconst applyGifToggle = (image: HTMLImageElement, container: HTMLElement) => {\n  const canvas = document.createElement('canvas');\n  const button = document.createElement('button');\n  const setButtonPlay = () => {\n    button.setAttribute('aria-label', 'Pause');\n    button.innerHTML = Utilities.asset.icon.PAUSE;\n    canvas.style.opacity = '0';\n    image.style.opacity = '1';\n  };\n  const setButtonPause = () => {\n    button.setAttribute('aria-label', 'Play');\n    button.innerHTML = Utilities.asset.icon.PLAY;\n    canvas.style.opacity = '1';\n    image.style.opacity = '0';\n  };\n  const sizeCanvas = ({ container }: { container: HTMLElement | null }) => {\n    if (!container) return;\n    const image = container.querySelector('img');\n    const canvas = container.querySelector('canvas') as HTMLCanvasElement;\n\n    if (!container || !canvas || !image) return;\n\n    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;\n\n    // Get container dimensions\n    const containerWidth = container.clientWidth;\n    const containerHeight = container.clientHeight;\n\n    // Set canvas display dimensions to match container\n    canvas.style.width = '100%';\n    canvas.style.height = `${image.clientHeight}px`;\n    canvas.style.position = 'absolute';\n    canvas.style.top = '0';\n    canvas.style.left = '0';\n\n    // Set canvas actual dimensions\n    canvas.width = containerWidth;\n    canvas.height = containerHeight;\n\n    // Calculate dimensions to maintain aspect ratio while covering\n    const imgRatio = image.naturalWidth / image.naturalHeight;\n    const containerRatio = containerWidth / containerHeight;\n\n    let drawWidth,\n      drawHeight,\n      offsetX = 0,\n      offsetY = 0;\n\n    if (imgRatio > containerRatio) {\n      // Image is wider than container relative to height\n      drawHeight = containerHeight;\n      drawWidth = image.naturalWidth * (containerHeight / image.naturalHeight);\n      offsetX = (containerWidth - drawWidth) / 2;\n    } else {\n      // Image is taller than container relative to width\n      drawWidth = containerWidth;\n      drawHeight = image.naturalHeight * (containerWidth / image.naturalWidth);\n      offsetY = (containerHeight - drawHeight) / 2;\n    }\n\n    // Clear the canvas and draw the image with cover behavior\n    ctx.clearRect(0, 0, containerWidth, containerHeight);\n    ctx.imageSmoothingEnabled = true;\n    ctx.drawImage(image, offsetX, offsetY, drawWidth, drawHeight);\n  };\n  let isPlaying = true;\n\n  button.setAttribute('type', 'button');\n  button.addEventListener('click', (event) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (isPlaying) {\n      setButtonPause();\n      isPlaying = false;\n    } else {\n      setButtonPlay();\n      isPlaying = true;\n    }\n  });\n\n  image.addEventListener('load', () => {\n    container.appendChild(canvas);\n    container.appendChild(button);\n    setButtonPlay();\n    sizeCanvas({ container });\n  });\n\n  window.addEventListener(\n    'resize',\n    Utilities.performance.debounce(() => {\n      sizeCanvas({ container });\n    }, 50),\n  );\n};\n\nexport default ({\n  element,\n}: {\n  element: HTMLImageElement | HTMLAnchorElement;\n}) => {\n  const image = extractImageElement(element);\n\n  if (!image) {\n    throw new Error('No valid image element found');\n  }\n\n  const isAnchor = element instanceof HTMLAnchorElement;\n  const container = isAnchor ? element : document.createElement('div');\n\n  const composite = ElementModel.assets.gifToggle({\n    element: container,\n  });\n\n  if (!isAnchor) {\n    container.appendChild(element);\n  }\n\n  applyGifToggle(image, container);\n\n  return composite;\n};\n"],"names":["Utilities.asset.icon.PAUSE","Utilities.asset.icon.PLAY","container","image","canvas","Utilities.performance.debounce","ElementModel.assets.gifToggle"],"mappings":"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"}

package/dist/atomic/assets/image/gif.mjs

@@ -0,0 +1,112 @@
+import { PLAY, PAUSE } from "../../../utilities/assets/icons.mjs";
+import { debounce } from "../../../utilities/performance/index.mjs";
+import "../../../node_modules/postcss/lib/postcss.mjs";
+import "../../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../../node_modules/postcss-js/index.mjs";
+import "../../../model/modifiers/index.mjs";
+import "@universityofmaryland/web-styles-library";
+import { gifToggle as gifToggle$1 } from "../../../model/elements/assets.mjs";
+import "../../../model/elements/headline.mjs";
+const extractImageElement = (element) => {
+  if (element instanceof HTMLImageElement) {
+    return element;
+  }
+  if (element instanceof HTMLAnchorElement) {
+    return element.querySelector("img");
+  }
+  return null;
+};
+const applyGifToggle = (image, container) => {
+  const canvas = document.createElement("canvas");
+  const button = document.createElement("button");
+  const setButtonPlay = () => {
+    button.setAttribute("aria-label", "Pause");
+    button.innerHTML = PAUSE;
+    canvas.style.opacity = "0";
+    image.style.opacity = "1";
+  };
+  const setButtonPause = () => {
+    button.setAttribute("aria-label", "Play");
+    button.innerHTML = PLAY;
+    canvas.style.opacity = "1";
+    image.style.opacity = "0";
+  };
+  const sizeCanvas = ({ container: container2 }) => {
+    if (!container2) return;
+    const image2 = container2.querySelector("img");
+    const canvas2 = container2.querySelector("canvas");
+    if (!container2 || !canvas2 || !image2) return;
+    const ctx = canvas2.getContext("2d");
+    const containerWidth = container2.clientWidth;
+    const containerHeight = container2.clientHeight;
+    canvas2.style.width = "100%";
+    canvas2.style.height = `${image2.clientHeight}px`;
+    canvas2.style.position = "absolute";
+    canvas2.style.top = "0";
+    canvas2.style.left = "0";
+    canvas2.width = containerWidth;
+    canvas2.height = containerHeight;
+    const imgRatio = image2.naturalWidth / image2.naturalHeight;
+    const containerRatio = containerWidth / containerHeight;
+    let drawWidth, drawHeight, offsetX = 0, offsetY = 0;
+    if (imgRatio > containerRatio) {
+      drawHeight = containerHeight;
+      drawWidth = image2.naturalWidth * (containerHeight / image2.naturalHeight);
+      offsetX = (containerWidth - drawWidth) / 2;
+    } else {
+      drawWidth = containerWidth;
+      drawHeight = image2.naturalHeight * (containerWidth / image2.naturalWidth);
+      offsetY = (containerHeight - drawHeight) / 2;
+    }
+    ctx.clearRect(0, 0, containerWidth, containerHeight);
+    ctx.imageSmoothingEnabled = true;
+    ctx.drawImage(image2, offsetX, offsetY, drawWidth, drawHeight);
+  };
+  let isPlaying = true;
+  button.setAttribute("type", "button");
+  button.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (isPlaying) {
+      setButtonPause();
+      isPlaying = false;
+    } else {
+      setButtonPlay();
+      isPlaying = true;
+    }
+  });
+  image.addEventListener("load", () => {
+    container.appendChild(canvas);
+    container.appendChild(button);
+    setButtonPlay();
+    sizeCanvas({ container });
+  });
+  window.addEventListener(
+    "resize",
+    debounce(() => {
+      sizeCanvas({ container });
+    }, 50)
+  );
+};
+const gifToggle = ({
+  element
+}) => {
+  const image = extractImageElement(element);
+  if (!image) {
+    throw new Error("No valid image element found");
+  }
+  const isAnchor = element instanceof HTMLAnchorElement;
+  const container = isAnchor ? element : document.createElement("div");
+  const composite = gifToggle$1({
+    element: container
+  });
+  if (!isAnchor) {
+    container.appendChild(element);
+  }
+  applyGifToggle(image, container);
+  return composite;
+};
+export {
+  gifToggle as default
+};
+//# sourceMappingURL=gif.mjs.map

package/dist/atomic/assets/image/gif.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"gif.mjs","sources":["../../../../source/atomic/assets/image/gif.ts"],"sourcesContent":["import * as Utilities from 'utilities';\nimport { ElementModel } from 'model';\n\nconst extractImageElement = (\n  element: HTMLImageElement | HTMLAnchorElement,\n): HTMLImageElement | null => {\n  if (element instanceof HTMLImageElement) {\n    return element;\n  }\n\n  if (element instanceof HTMLAnchorElement) {\n    return element.querySelector('img');\n  }\n\n  return null;\n};\n\nconst applyGifToggle = (image: HTMLImageElement, container: HTMLElement) => {\n  const canvas = document.createElement('canvas');\n  const button = document.createElement('button');\n  const setButtonPlay = () => {\n    button.setAttribute('aria-label', 'Pause');\n    button.innerHTML = Utilities.asset.icon.PAUSE;\n    canvas.style.opacity = '0';\n    image.style.opacity = '1';\n  };\n  const setButtonPause = () => {\n    button.setAttribute('aria-label', 'Play');\n    button.innerHTML = Utilities.asset.icon.PLAY;\n    canvas.style.opacity = '1';\n    image.style.opacity = '0';\n  };\n  const sizeCanvas = ({ container }: { container: HTMLElement | null }) => {\n    if (!container) return;\n    const image = container.querySelector('img');\n    const canvas = container.querySelector('canvas') as HTMLCanvasElement;\n\n    if (!container || !canvas || !image) return;\n\n    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;\n\n    // Get container dimensions\n    const containerWidth = container.clientWidth;\n    const containerHeight = container.clientHeight;\n\n    // Set canvas display dimensions to match container\n    canvas.style.width = '100%';\n    canvas.style.height = `${image.clientHeight}px`;\n    canvas.style.position = 'absolute';\n    canvas.style.top = '0';\n    canvas.style.left = '0';\n\n    // Set canvas actual dimensions\n    canvas.width = containerWidth;\n    canvas.height = containerHeight;\n\n    // Calculate dimensions to maintain aspect ratio while covering\n    const imgRatio = image.naturalWidth / image.naturalHeight;\n    const containerRatio = containerWidth / containerHeight;\n\n    let drawWidth,\n      drawHeight,\n      offsetX = 0,\n      offsetY = 0;\n\n    if (imgRatio > containerRatio) {\n      // Image is wider than container relative to height\n      drawHeight = containerHeight;\n      drawWidth = image.naturalWidth * (containerHeight / image.naturalHeight);\n      offsetX = (containerWidth - drawWidth) / 2;\n    } else {\n      // Image is taller than container relative to width\n      drawWidth = containerWidth;\n      drawHeight = image.naturalHeight * (containerWidth / image.naturalWidth);\n      offsetY = (containerHeight - drawHeight) / 2;\n    }\n\n    // Clear the canvas and draw the image with cover behavior\n    ctx.clearRect(0, 0, containerWidth, containerHeight);\n    ctx.imageSmoothingEnabled = true;\n    ctx.drawImage(image, offsetX, offsetY, drawWidth, drawHeight);\n  };\n  let isPlaying = true;\n\n  button.setAttribute('type', 'button');\n  button.addEventListener('click', (event) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (isPlaying) {\n      setButtonPause();\n      isPlaying = false;\n    } else {\n      setButtonPlay();\n      isPlaying = true;\n    }\n  });\n\n  image.addEventListener('load', () => {\n    container.appendChild(canvas);\n    container.appendChild(button);\n    setButtonPlay();\n    sizeCanvas({ container });\n  });\n\n  window.addEventListener(\n    'resize',\n    Utilities.performance.debounce(() => {\n      sizeCanvas({ container });\n    }, 50),\n  );\n};\n\nexport default ({\n  element,\n}: {\n  element: HTMLImageElement | HTMLAnchorElement;\n}) => {\n  const image = extractImageElement(element);\n\n  if (!image) {\n    throw new Error('No valid image element found');\n  }\n\n  const isAnchor = element instanceof HTMLAnchorElement;\n  const container = isAnchor ? element : document.createElement('div');\n\n  const composite = ElementModel.assets.gifToggle({\n    element: container,\n  });\n\n  if (!isAnchor) {\n    container.appendChild(element);\n  }\n\n  applyGifToggle(image, container);\n\n  return composite;\n};\n"],"names":["Utilities.asset.icon.PAUSE","Utilities.asset.icon.PLAY","container","image","canvas","Utilities.performance.debounce","ElementModel.assets.gifToggle"],"mappings":"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"}

package/dist/atomic/assets/image/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const background = require("./background.js");
+const gif = require("./gif.js");
+const placeholder = require("./placeholder.js");
+exports.background = background;
+exports.gif = gif;
+exports.placeholder = placeholder;
+//# sourceMappingURL=index.js.map

package/dist/atomic/assets/image/index.js.map

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

package/dist/atomic/assets/image/index.mjs

@@ -0,0 +1,9 @@
+import { default as default2 } from "./background.mjs";
+import { default as default3 } from "./gif.mjs";
+import { default as default4 } from "./placeholder.mjs";
+export {
+  default2 as background,
+  default3 as gif,
+  default4 as placeholder
+};
+//# sourceMappingURL=index.mjs.map

package/dist/atomic/assets/image/index.mjs.map

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