@universityofmaryland/web-elements-library 1.5.3 → 1.5.6

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":"yBAqHgB,cAEb;IACD,OAAO,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;CAC/C;;;;;AAJD,wBAyBE"}
+{"version":3,"file":"gif.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/gif.ts"],"names":[],"mappings":"yBAyHgB,cAEb;IACD,OAAO,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;CAC/C;AAJD,wBAyBE"}

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

@@ -1,10 +1,25 @@
 "use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
 const performance = require("@universityofmaryland/web-utilities-library/performance");
 const controls = require("@universityofmaryland/web-icons-library/controls");
-require("../../../model/modifiers/index.js");
-require("@universityofmaryland/web-styles-library");
-const assets = require("../../../model/elements/assets.js");
-require("../../../model/elements/headline.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 Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
 const extractImageElement = (element) => {
   if (element instanceof HTMLImageElement) {
     return element;
@@ -77,7 +92,9 @@ const applyGifToggle = (image, container) => {
     container.appendChild(canvas);
     container.appendChild(button);
     setButtonPlay();
-    sizeCanvas({ container });
+    setTimeout(() => {
+      sizeCanvas({ container });
+    }, 100);
   });
   window.addEventListener(
     "resize",
@@ -95,13 +112,12 @@ const gifToggle = ({
   }
   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);
+  const composite = new webBuilderLibrary.ElementBuilder(container).styled(Styles__namespace.element.asset.gif.toggle).withModifier((el) => {
+    if (!isAnchor) {
+      el.appendChild(element);
+    }
+    applyGifToggle(image, el);
+  }).build();
   return composite;
 };
 module.exports = gifToggle;

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

@@ -1 +1 @@
-{"version":3,"file":"gif.js","sources":["../../../../source/atomic/assets/image/gif.ts"],"sourcesContent":["import { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\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 = iconPause;\n    canvas.style.opacity = '0';\n    image.style.opacity = '1';\n  };\n  const setButtonPause = () => {\n    button.setAttribute('aria-label', 'Play');\n    button.innerHTML = iconPlay;\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    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":["iconPause","iconPlay","container","image","canvas","debounce","ElementModel.assets.gifToggle"],"mappings":"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"}
+{"version":3,"file":"gif.js","sources":["../../../../source/atomic/assets/image/gif.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\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 = iconPause;\n    canvas.style.opacity = '0';\n    image.style.opacity = '1';\n  };\n  const setButtonPause = () => {\n    button.setAttribute('aria-label', 'Play');\n    button.innerHTML = iconPlay;\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\n    setTimeout(() => {\n      sizeCanvas({ container });\n    }, 100);\n  });\n\n  window.addEventListener(\n    'resize',\n    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 = new ElementBuilder(container)\n    .styled(Styles.element.asset.gif.toggle)\n    .withModifier((el) => {\n      if (!isAnchor) {\n        el.appendChild(element);\n      }\n      applyGifToggle(image, el);\n    })\n    .build();\n\n  return composite;\n};\n"],"names":["iconPause","iconPlay","container","image","canvas","debounce","ElementBuilder","Styles"],"mappings":"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"}

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

@@ -1,9 +1,7 @@
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 import { debounce } from "@universityofmaryland/web-utilities-library/performance";
 import { play, pause } from "@universityofmaryland/web-icons-library/controls";
-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;
@@ -76,7 +74,9 @@ const applyGifToggle = (image, container) => {
     container.appendChild(canvas);
     container.appendChild(button);
     setButtonPlay();
-    sizeCanvas({ container });
+    setTimeout(() => {
+      sizeCanvas({ container });
+    }, 100);
   });
   window.addEventListener(
     "resize",
@@ -94,13 +94,12 @@ const gifToggle = ({
   }
   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);
+  const composite = new ElementBuilder(container).styled(Styles.element.asset.gif.toggle).withModifier((el) => {
+    if (!isAnchor) {
+      el.appendChild(element);
+    }
+    applyGifToggle(image, el);
+  }).build();
   return composite;
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"gif.mjs","sources":["../../../../source/atomic/assets/image/gif.ts"],"sourcesContent":["import { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\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 = iconPause;\n    canvas.style.opacity = '0';\n    image.style.opacity = '1';\n  };\n  const setButtonPause = () => {\n    button.setAttribute('aria-label', 'Play');\n    button.innerHTML = iconPlay;\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    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":["iconPause","iconPlay","container","image","canvas","ElementModel.assets.gifToggle"],"mappings":"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"}
+{"version":3,"file":"gif.mjs","sources":["../../../../source/atomic/assets/image/gif.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\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 = iconPause;\n    canvas.style.opacity = '0';\n    image.style.opacity = '1';\n  };\n  const setButtonPause = () => {\n    button.setAttribute('aria-label', 'Play');\n    button.innerHTML = iconPlay;\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\n    setTimeout(() => {\n      sizeCanvas({ container });\n    }, 100);\n  });\n\n  window.addEventListener(\n    'resize',\n    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 = new ElementBuilder(container)\n    .styled(Styles.element.asset.gif.toggle)\n    .withModifier((el) => {\n      if (!isAnchor) {\n        el.appendChild(element);\n      }\n      applyGifToggle(image, el);\n    })\n    .build();\n\n  return composite;\n};\n"],"names":["iconPause","iconPlay","container","image","canvas"],"mappings":";;;;AAQA,MAAM,sBAAsB,CAC1B,YAC4B;AAC5B,MAAI,mBAAmB,kBAAkB;AACvC,WAAO;AAAA,EACT;AAEA,MAAI,mBAAmB,mBAAmB;AACxC,WAAO,QAAQ,cAAc,KAAK;AAAA,EACpC;AAEA,SAAO;AACT;AAEA,MAAM,iBAAiB,CAAC,OAAyB,cAA2B;AAC1E,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,gBAAgB,MAAM;AAC1B,WAAO,aAAa,cAAc,OAAO;AACzC,WAAO,YAAYA;AACnB,WAAO,MAAM,UAAU;AACvB,UAAM,MAAM,UAAU;AAAA,EACxB;AACA,QAAM,iBAAiB,MAAM;AAC3B,WAAO,aAAa,cAAc,MAAM;AACxC,WAAO,YAAYC;AACnB,WAAO,MAAM,UAAU;AACvB,UAAM,MAAM,UAAU;AAAA,EACxB;AACA,QAAM,aAAa,CAAC,EAAE,WAAAC,iBAAmD;AACvE,QAAI,CAACA,WAAW;AAChB,UAAMC,SAAQD,WAAU,cAAc,KAAK;AAC3C,UAAME,UAASF,WAAU,cAAc,QAAQ;AAE/C,QAAI,CAACA,cAAa,CAACE,WAAU,CAACD,OAAO;AAErC,UAAM,MAAMC,QAAO,WAAW,IAAI;AAGlC,UAAM,iBAAiBF,WAAU;AACjC,UAAM,kBAAkBA,WAAU;AAGlCE,YAAO,MAAM,QAAQ;AACrBA,YAAO,MAAM,SAAS,GAAGD,OAAM,YAAY;AAC3CC,YAAO,MAAM,WAAW;AACxBA,YAAO,MAAM,MAAM;AACnBA,YAAO,MAAM,OAAO;AAGpBA,YAAO,QAAQ;AACfA,YAAO,SAAS;AAGhB,UAAM,WAAWD,OAAM,eAAeA,OAAM;AAC5C,UAAM,iBAAiB,iBAAiB;AAExC,QAAI,WACF,YACA,UAAU,GACV,UAAU;AAEZ,QAAI,WAAW,gBAAgB;AAE7B,mBAAa;AACb,kBAAYA,OAAM,gBAAgB,kBAAkBA,OAAM;AAC1D,iBAAW,iBAAiB,aAAa;AAAA,IAC3C,OAAO;AAEL,kBAAY;AACZ,mBAAaA,OAAM,iBAAiB,iBAAiBA,OAAM;AAC3D,iBAAW,kBAAkB,cAAc;AAAA,IAC7C;AAGA,QAAI,UAAU,GAAG,GAAG,gBAAgB,eAAe;AACnD,QAAI,wBAAwB;AAC5B,QAAI,UAAUA,QAAO,SAAS,SAAS,WAAW,UAAU;AAAA,EAC9D;AACA,MAAI,YAAY;AAEhB,SAAO,aAAa,QAAQ,QAAQ;AACpC,SAAO,iBAAiB,SAAS,CAAC,UAAU;AAC1C,UAAM,eAAA;AACN,UAAM,gBAAA;AAEN,QAAI,WAAW;AACb,qBAAA;AACA,kBAAY;AAAA,IACd,OAAO;AACL,oBAAA;AACA,kBAAY;AAAA,IACd;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB,QAAQ,MAAM;AACnC,cAAU,YAAY,MAAM;AAC5B,cAAU,YAAY,MAAM;AAC5B,kBAAA;AAEA,eAAW,MAAM;AACf,iBAAW,EAAE,WAAW;AAAA,IAC1B,GAAG,GAAG;AAAA,EACR,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA,SAAS,MAAM;AACb,iBAAW,EAAE,WAAW;AAAA,IAC1B,GAAG,EAAE;AAAA,EAAA;AAET;AAEA,MAAA,YAAe,CAAC;AAAA,EACd;AACF,MAEM;AACJ,QAAM,QAAQ,oBAAoB,OAAO;AAEzC,MAAI,CAAC,OAAO;AACV,UAAM,IAAI,MAAM,8BAA8B;AAAA,EAChD;AAEA,QAAM,WAAW,mBAAmB;AACpC,QAAM,YAAY,WAAW,UAAU,SAAS,cAAc,KAAK;AAEnE,QAAM,YAAY,IAAI,eAAe,SAAS,EAC3C,OAAO,OAAO,QAAQ,MAAM,IAAI,MAAM,EACtC,aAAa,CAAC,OAAO;AACpB,QAAI,CAAC,UAAU;AACb,SAAG,YAAY,OAAO;AAAA,IACxB;AACA,mBAAe,OAAO,EAAE;AAAA,EAC1B,CAAC,EACA,MAAA;AAEH,SAAO;AACT;"}

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

@@ -1,9 +1,5 @@
 declare const _default: {
-    fearlessForward: () => {
-        element: HTMLElement;
-        className: string;
-        styles: string;
-    };
+    fearlessForward: () => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 };
 export default _default;
 //# sourceMappingURL=placeholder.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"placeholder.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/placeholder.ts"],"names":[],"mappings":";;;;;;;AAcA,wBAME"}
+{"version":3,"file":"placeholder.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/placeholder.ts"],"names":[],"mappings":";;;AAcA,wBAME"}

package/dist/atomic/assets/video/observed-auto-play.d.ts

@@ -4,14 +4,6 @@ interface CardVideoShortProps {
     isScaled?: boolean;
     additionalElementStyles?: Record<string, any>;
 }
-declare const _default: ({ video, isAutoplay, isScaled, additionalElementStyles, }: CardVideoShortProps) => {
-    events: {
-        setPlay: () => void;
-        setPause: () => void;
-    };
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: ({ video, isAutoplay, isScaled, additionalElementStyles, }: CardVideoShortProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=observed-auto-play.d.ts.map

package/dist/atomic/assets/video/observed-auto-play.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"observed-auto-play.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC/C;yBAEe,2DAKb,mBAAmB;;;;;;;;;AALtB,wBAuDO"}
+{"version":3,"file":"observed-auto-play.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC/C;yBAEe,2DAKb,mBAAmB;AALtB,wBA2DO"}

package/dist/atomic/assets/video/observed-auto-play.js

@@ -12,17 +12,21 @@ const observedAutoPlay = ({
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
           if (video.readyState >= 2) {
-            composite.events.setPlay();
+            composite?.events?.setPlay();
           } else {
-            video.addEventListener("loadeddata", composite.events.setPlay, {
-              once: true
-            });
+            video.addEventListener(
+              "loadeddata",
+              () => composite?.events?.setPlay(),
+              {
+                once: true
+              }
+            );
             if (video.readyState === 0) {
               video.load();
             }
           }
         } else {
-          composite.events.setPause();
+          composite?.events?.setPause();
         }
       });
     },

package/dist/atomic/assets/video/observed-auto-play.js.map

@@ -1 +1 @@
-{"version":3,"file":"observed-auto-play.js","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"sourcesContent":["import { isPreferredReducedMotion } from '@universityofmaryland/web-utilities-library/accessibility';\nimport { default as toggle } from './toggle';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n}\n\nexport default ({\n  video,\n  isAutoplay = false,\n  isScaled = false,\n  additionalElementStyles,\n}: CardVideoShortProps) =>\n  (() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            if (video.readyState >= 2) {\n              composite.events.setPlay();\n            } else {\n              video.addEventListener('loadeddata', composite.events.setPlay, {\n                once: true,\n              });\n\n              if (video.readyState === 0) {\n                video.load();\n              }\n            }\n          } else {\n            composite.events.setPause();\n          }\n        });\n      },\n      {\n        threshold: 0.25,\n      },\n    );\n    const callback = (isPlaying: boolean) => {\n      if (isPlaying && observer) {\n        observer.disconnect();\n      }\n    };\n\n    video.removeAttribute('controls');\n    video.setAttribute('preload', 'true');\n    video.setAttribute('playsinline', '');\n    video.setAttribute('muted', '');\n    video.setAttribute('loop', '');\n\n    const composite = toggle({\n      video,\n      additionalElementStyles,\n      isScaled,\n      callback,\n    });\n\n    if (!isPreferredReducedMotion() && isAutoplay) {\n      observer.observe(composite.element);\n    }\n\n    return composite;\n  })();\n"],"names":["isPreferredReducedMotion"],"mappings":";;;AAUA,MAAA,mBAAe,CAAC;AAAA,EACd;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX;AACF,OACG,MAAM;AACL,QAAM,WAAW,IAAI;AAAA,IACnB,CAAC,YAAY;AACX,cAAQ,QAAQ,CAAC,UAAU;AACzB,YAAI,MAAM,gBAAgB;AACxB,cAAI,MAAM,cAAc,GAAG;AACzB,sBAAU,OAAO,QAAA;AAAA,UACnB,OAAO;AACL,kBAAM,iBAAiB,cAAc,UAAU,OAAO,SAAS;AAAA,cAC7D,MAAM;AAAA,YAAA,CACP;AAED,gBAAI,MAAM,eAAe,GAAG;AAC1B,oBAAM,KAAA;AAAA,YACR;AAAA,UACF;AAAA,QACF,OAAO;AACL,oBAAU,OAAO,SAAA;AAAA,QACnB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE,WAAW;AAAA,IAAA;AAAA,EACb;AAEF,QAAM,WAAW,CAAC,cAAuB;AACvC,QAAI,aAAa,UAAU;AACzB,eAAS,WAAA;AAAA,IACX;AAAA,EACF;AAEA,QAAM,gBAAgB,UAAU;AAChC,QAAM,aAAa,WAAW,MAAM;AACpC,QAAM,aAAa,eAAe,EAAE;AACpC,QAAM,aAAa,SAAS,EAAE;AAC9B,QAAM,aAAa,QAAQ,EAAE;AAE7B,QAAM,YAAY,OAAO;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,MAAI,CAACA,cAAAA,yBAAA,KAA8B,YAAY;AAC7C,aAAS,QAAQ,UAAU,OAAO;AAAA,EACpC;AAEA,SAAO;AACT,GAAA;;"}
+{"version":3,"file":"observed-auto-play.js","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"sourcesContent":["import { isPreferredReducedMotion } from '@universityofmaryland/web-utilities-library/accessibility';\nimport { default as toggle } from './toggle';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n}\n\nexport default ({\n  video,\n  isAutoplay = false,\n  isScaled = false,\n  additionalElementStyles,\n}: CardVideoShortProps) =>\n  (() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            if (video.readyState >= 2) {\n              composite?.events?.setPlay();\n            } else {\n              video.addEventListener(\n                'loadeddata',\n                () => composite?.events?.setPlay(),\n                {\n                  once: true,\n                },\n              );\n\n              if (video.readyState === 0) {\n                video.load();\n              }\n            }\n          } else {\n            composite?.events?.setPause();\n          }\n        });\n      },\n      {\n        threshold: 0.25,\n      },\n    );\n    const callback = (isPlaying: boolean) => {\n      if (isPlaying && observer) {\n        observer.disconnect();\n      }\n    };\n\n    video.removeAttribute('controls');\n    video.setAttribute('preload', 'true');\n    video.setAttribute('playsinline', '');\n    video.setAttribute('muted', '');\n    video.setAttribute('loop', '');\n\n    const composite = toggle({\n      video,\n      additionalElementStyles,\n      isScaled,\n      callback,\n    });\n\n    if (!isPreferredReducedMotion() && isAutoplay) {\n      observer.observe(composite.element);\n    }\n\n    return composite;\n  })();\n"],"names":["isPreferredReducedMotion"],"mappings":";;;AAUA,MAAA,mBAAe,CAAC;AAAA,EACd;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX;AACF,OACG,MAAM;AACL,QAAM,WAAW,IAAI;AAAA,IACnB,CAAC,YAAY;AACX,cAAQ,QAAQ,CAAC,UAAU;AACzB,YAAI,MAAM,gBAAgB;AACxB,cAAI,MAAM,cAAc,GAAG;AACzB,uBAAW,QAAQ,QAAA;AAAA,UACrB,OAAO;AACL,kBAAM;AAAA,cACJ;AAAA,cACA,MAAM,WAAW,QAAQ,QAAA;AAAA,cACzB;AAAA,gBACE,MAAM;AAAA,cAAA;AAAA,YACR;AAGF,gBAAI,MAAM,eAAe,GAAG;AAC1B,oBAAM,KAAA;AAAA,YACR;AAAA,UACF;AAAA,QACF,OAAO;AACL,qBAAW,QAAQ,SAAA;AAAA,QACrB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE,WAAW;AAAA,IAAA;AAAA,EACb;AAEF,QAAM,WAAW,CAAC,cAAuB;AACvC,QAAI,aAAa,UAAU;AACzB,eAAS,WAAA;AAAA,IACX;AAAA,EACF;AAEA,QAAM,gBAAgB,UAAU;AAChC,QAAM,aAAa,WAAW,MAAM;AACpC,QAAM,aAAa,eAAe,EAAE;AACpC,QAAM,aAAa,SAAS,EAAE;AAC9B,QAAM,aAAa,QAAQ,EAAE;AAE7B,QAAM,YAAY,OAAO;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,MAAI,CAACA,cAAAA,yBAAA,KAA8B,YAAY;AAC7C,aAAS,QAAQ,UAAU,OAAO;AAAA,EACpC;AAEA,SAAO;AACT,GAAA;;"}

package/dist/atomic/assets/video/observed-auto-play.mjs

@@ -11,17 +11,21 @@ const observedAutoPlay = ({
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
           if (video.readyState >= 2) {
-            composite.events.setPlay();
+            composite?.events?.setPlay();
           } else {
-            video.addEventListener("loadeddata", composite.events.setPlay, {
-              once: true
-            });
+            video.addEventListener(
+              "loadeddata",
+              () => composite?.events?.setPlay(),
+              {
+                once: true
+              }
+            );
             if (video.readyState === 0) {
               video.load();
             }
           }
         } else {
-          composite.events.setPause();
+          composite?.events?.setPause();
         }
       });
     },

package/dist/atomic/assets/video/observed-auto-play.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"observed-auto-play.mjs","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"sourcesContent":["import { isPreferredReducedMotion } from '@universityofmaryland/web-utilities-library/accessibility';\nimport { default as toggle } from './toggle';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n}\n\nexport default ({\n  video,\n  isAutoplay = false,\n  isScaled = false,\n  additionalElementStyles,\n}: CardVideoShortProps) =>\n  (() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            if (video.readyState >= 2) {\n              composite.events.setPlay();\n            } else {\n              video.addEventListener('loadeddata', composite.events.setPlay, {\n                once: true,\n              });\n\n              if (video.readyState === 0) {\n                video.load();\n              }\n            }\n          } else {\n            composite.events.setPause();\n          }\n        });\n      },\n      {\n        threshold: 0.25,\n      },\n    );\n    const callback = (isPlaying: boolean) => {\n      if (isPlaying && observer) {\n        observer.disconnect();\n      }\n    };\n\n    video.removeAttribute('controls');\n    video.setAttribute('preload', 'true');\n    video.setAttribute('playsinline', '');\n    video.setAttribute('muted', '');\n    video.setAttribute('loop', '');\n\n    const composite = toggle({\n      video,\n      additionalElementStyles,\n      isScaled,\n      callback,\n    });\n\n    if (!isPreferredReducedMotion() && isAutoplay) {\n      observer.observe(composite.element);\n    }\n\n    return composite;\n  })();\n"],"names":[],"mappings":";;AAUA,MAAA,mBAAe,CAAC;AAAA,EACd;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX;AACF,OACG,MAAM;AACL,QAAM,WAAW,IAAI;AAAA,IACnB,CAAC,YAAY;AACX,cAAQ,QAAQ,CAAC,UAAU;AACzB,YAAI,MAAM,gBAAgB;AACxB,cAAI,MAAM,cAAc,GAAG;AACzB,sBAAU,OAAO,QAAA;AAAA,UACnB,OAAO;AACL,kBAAM,iBAAiB,cAAc,UAAU,OAAO,SAAS;AAAA,cAC7D,MAAM;AAAA,YAAA,CACP;AAED,gBAAI,MAAM,eAAe,GAAG;AAC1B,oBAAM,KAAA;AAAA,YACR;AAAA,UACF;AAAA,QACF,OAAO;AACL,oBAAU,OAAO,SAAA;AAAA,QACnB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE,WAAW;AAAA,IAAA;AAAA,EACb;AAEF,QAAM,WAAW,CAAC,cAAuB;AACvC,QAAI,aAAa,UAAU;AACzB,eAAS,WAAA;AAAA,IACX;AAAA,EACF;AAEA,QAAM,gBAAgB,UAAU;AAChC,QAAM,aAAa,WAAW,MAAM;AACpC,QAAM,aAAa,eAAe,EAAE;AACpC,QAAM,aAAa,SAAS,EAAE;AAC9B,QAAM,aAAa,QAAQ,EAAE;AAE7B,QAAM,YAAY,OAAO;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,MAAI,CAAC,yBAAA,KAA8B,YAAY;AAC7C,aAAS,QAAQ,UAAU,OAAO;AAAA,EACpC;AAEA,SAAO;AACT,GAAA;"}
+{"version":3,"file":"observed-auto-play.mjs","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"sourcesContent":["import { isPreferredReducedMotion } from '@universityofmaryland/web-utilities-library/accessibility';\nimport { default as toggle } from './toggle';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n}\n\nexport default ({\n  video,\n  isAutoplay = false,\n  isScaled = false,\n  additionalElementStyles,\n}: CardVideoShortProps) =>\n  (() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            if (video.readyState >= 2) {\n              composite?.events?.setPlay();\n            } else {\n              video.addEventListener(\n                'loadeddata',\n                () => composite?.events?.setPlay(),\n                {\n                  once: true,\n                },\n              );\n\n              if (video.readyState === 0) {\n                video.load();\n              }\n            }\n          } else {\n            composite?.events?.setPause();\n          }\n        });\n      },\n      {\n        threshold: 0.25,\n      },\n    );\n    const callback = (isPlaying: boolean) => {\n      if (isPlaying && observer) {\n        observer.disconnect();\n      }\n    };\n\n    video.removeAttribute('controls');\n    video.setAttribute('preload', 'true');\n    video.setAttribute('playsinline', '');\n    video.setAttribute('muted', '');\n    video.setAttribute('loop', '');\n\n    const composite = toggle({\n      video,\n      additionalElementStyles,\n      isScaled,\n      callback,\n    });\n\n    if (!isPreferredReducedMotion() && isAutoplay) {\n      observer.observe(composite.element);\n    }\n\n    return composite;\n  })();\n"],"names":[],"mappings":";;AAUA,MAAA,mBAAe,CAAC;AAAA,EACd;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX;AACF,OACG,MAAM;AACL,QAAM,WAAW,IAAI;AAAA,IACnB,CAAC,YAAY;AACX,cAAQ,QAAQ,CAAC,UAAU;AACzB,YAAI,MAAM,gBAAgB;AACxB,cAAI,MAAM,cAAc,GAAG;AACzB,uBAAW,QAAQ,QAAA;AAAA,UACrB,OAAO;AACL,kBAAM;AAAA,cACJ;AAAA,cACA,MAAM,WAAW,QAAQ,QAAA;AAAA,cACzB;AAAA,gBACE,MAAM;AAAA,cAAA;AAAA,YACR;AAGF,gBAAI,MAAM,eAAe,GAAG;AAC1B,oBAAM,KAAA;AAAA,YACR;AAAA,UACF;AAAA,QACF,OAAO;AACL,qBAAW,QAAQ,SAAA;AAAA,QACrB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE,WAAW;AAAA,IAAA;AAAA,EACb;AAEF,QAAM,WAAW,CAAC,cAAuB;AACvC,QAAI,aAAa,UAAU;AACzB,eAAS,WAAA;AAAA,IACX;AAAA,EACF;AAEA,QAAM,gBAAgB,UAAU;AAChC,QAAM,aAAa,WAAW,MAAM;AACpC,QAAM,aAAa,eAAe,EAAE;AACpC,QAAM,aAAa,SAAS,EAAE;AAC9B,QAAM,aAAa,QAAQ,EAAE;AAE7B,QAAM,YAAY,OAAO;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,MAAI,CAAC,yBAAA,KAA8B,YAAY;AAC7C,aAAS,QAAQ,UAAU,OAAO;AAAA,EACpC;AAEA,SAAO;AACT,GAAA;"}

package/dist/atomic/assets/video/toggle.d.ts

@@ -4,14 +4,6 @@ interface VideoProps {
     additionalElementStyles?: Record<string, any>;
     callback?: (isPlaying: boolean) => void;
 }
-declare const _default: (props: VideoProps) => {
-    events: {
-        setPlay: () => void;
-        setPause: () => void;
-    };
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: (props: VideoProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=toggle.d.ts.map

package/dist/atomic/assets/video/toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/video/toggle.ts"],"names":[],"mappings":"AAMA,UAAU,UAAU;IAClB,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;yBAEe,OAAO,UAAU;;;;;;;;;AAAjC,wBAsFO"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/video/toggle.ts"],"names":[],"mappings":"AAOA,UAAU,UAAU;IAClB,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;yBAEe,OAAO,UAAU;AAAjC,wBA4EO"}

package/dist/atomic/assets/video/toggle.js

@@ -1,7 +1,24 @@
 "use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
 const controls = require("@universityofmaryland/web-icons-library/controls");
-const index = require("../../../model/elements/index.js");
-const buttons = require("../../../model/elements/buttons.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 Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
 const toggle = (props) => (() => {
   const {
     video,
@@ -9,32 +26,7 @@ const toggle = (props) => (() => {
     isScaled = false,
     callback
   } = props;
-  const composite = index.create({
-    element: document.createElement("div"),
-    className: "umd-element-video",
-    elementStyles: {
-      element: {
-        position: "relative",
-        ...additionalElementStyles,
-        ...isScaled && {
-          width: "100%",
-          height: "100%",
-          objectFit: "cover"
-        },
-        ...isScaled && {
-          [`& video`]: {
-            width: "100%",
-            height: "100%",
-            objectFit: "cover",
-            display: "block"
-          }
-        }
-      }
-    }
-  });
-  const button = buttons.videoState({
-    element: document.createElement("button")
-  });
+  const button = new webBuilderLibrary.ElementBuilder("button").styled(Styles__namespace.element.action.button.videoState).withAttribute("type", "button").withAttribute("aria-label", "Play").withHTML(controls.play).build();
   const setPlay = () => {
     button.element.setAttribute("aria-label", "Pause");
     button.element.innerHTML = controls.pause;
@@ -51,9 +43,6 @@ const toggle = (props) => (() => {
     button.element.innerHTML = controls.play;
     video.pause();
   };
-  button.element.setAttribute("aria-label", "Play");
-  button.element.innerHTML = controls.play;
-  button.element.setAttribute("type", "button");
   button.element.addEventListener("click", () => {
     if (video.paused) {
       if (callback) callback(false);
@@ -66,16 +55,25 @@ const toggle = (props) => (() => {
   if (video.getAttribute("autoplay") === "" || video.getAttribute("autoplay") === "true") {
     setPlay();
   }
-  composite.element.appendChild(video);
-  composite.element.appendChild(button.element);
-  composite.styles += button.styles;
-  return {
-    ...composite,
-    events: {
-      setPlay,
-      setPause
+  return new webBuilderLibrary.ElementBuilder().withClassName("umd-element-video").withStyles({
+    element: {
+      position: "relative",
+      ...additionalElementStyles,
+      ...isScaled && {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover"
+      },
+      ...isScaled && {
+        [`& video`]: {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          display: "block"
+        }
+      }
     }
-  };
+  }).withChildren(video, button).withEvents({ setPlay, setPause }).build();
 })();
 module.exports = toggle;
 //# sourceMappingURL=toggle.js.map

package/dist/atomic/assets/video/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../../../source/atomic/assets/video/toggle.ts"],"sourcesContent":["import {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\nimport { ElementModel } from 'model';\n\ninterface VideoProps {\n  video: HTMLVideoElement;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n  callback?: (isPlaying: boolean) => void;\n}\n\nexport default (props: VideoProps) =>\n  (() => {\n    const {\n      video,\n      additionalElementStyles,\n      isScaled = false,\n      callback,\n    } = props;\n    const composite = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-element-video',\n      elementStyles: {\n        element: {\n          position: 'relative',\n          ...additionalElementStyles,\n          ...(isScaled && {\n            width: '100%',\n            height: '100%',\n            objectFit: 'cover',\n          }),\n\n          ...(isScaled && {\n            [`& video`]: {\n              width: '100%',\n              height: '100%',\n              objectFit: 'cover',\n              display: 'block',\n            },\n          }),\n        },\n      },\n    });\n    const button = ElementModel.buttons.videoState({\n      element: document.createElement('button'),\n    });\n\n    const setPlay = () => {\n      button.element.setAttribute('aria-label', 'Pause');\n      button.element.innerHTML = iconPause;\n      video.muted = true;\n      video.play().catch((error) => {\n        if (error.name === 'NotAllowedError') {\n          setPause();\n        }\n        console.warn('Video play failed:', error);\n      });\n    };\n    const setPause = () => {\n      button.element.setAttribute('aria-label', 'Play');\n      button.element.innerHTML = iconPlay;\n      video.pause();\n    };\n\n    // Load styles and attributes\n\n    button.element.setAttribute('aria-label', 'Play');\n    button.element.innerHTML = iconPlay;\n    button.element.setAttribute('type', 'button');\n    button.element.addEventListener('click', () => {\n      if (video.paused) {\n        if (callback) callback(false);\n        setPlay();\n      } else {\n        if (callback) callback(true);\n        setPause();\n      }\n    });\n\n    if (\n      video.getAttribute('autoplay') === '' ||\n      video.getAttribute('autoplay') === 'true'\n    ) {\n      setPlay();\n    }\n\n    composite.element.appendChild(video);\n    composite.element.appendChild(button.element);\n    composite.styles += button.styles;\n\n    return {\n      ...composite,\n      events: {\n        setPlay,\n        setPause,\n      },\n    };\n  })();\n"],"names":["ElementModel.create","ElementModel.buttons.videoState","iconPause","iconPlay"],"mappings":";;;;AAaA,MAAA,SAAe,CAAC,WACb,MAAM;AACL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EAAA,IACE;AACJ,QAAM,YAAYA,MAAAA,OAAoB;AAAA,IACpC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,GAAG;AAAA,QACH,GAAI,YAAY;AAAA,UACd,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,QAAA;AAAA,QAGb,GAAI,YAAY;AAAA,UACd,CAAC,SAAS,GAAG;AAAA,YACX,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW;AAAA,YACX,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACD,QAAM,SAASC,QAAAA,WAAgC;AAAA,IAC7C,SAAS,SAAS,cAAc,QAAQ;AAAA,EAAA,CACzC;AAED,QAAM,UAAU,MAAM;AACpB,WAAO,QAAQ,aAAa,cAAc,OAAO;AACjD,WAAO,QAAQ,YAAYC,SAAAA;AAC3B,UAAM,QAAQ;AACd,UAAM,KAAA,EAAO,MAAM,CAAC,UAAU;AAC5B,UAAI,MAAM,SAAS,mBAAmB;AACpC,iBAAA;AAAA,MACF;AACA,cAAQ,KAAK,sBAAsB,KAAK;AAAA,IAC1C,CAAC;AAAA,EACH;AACA,QAAM,WAAW,MAAM;AACrB,WAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,WAAO,QAAQ,YAAYC,SAAAA;AAC3B,UAAM,MAAA;AAAA,EACR;AAIA,SAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,SAAO,QAAQ,YAAYA,SAAAA;AAC3B,SAAO,QAAQ,aAAa,QAAQ,QAAQ;AAC5C,SAAO,QAAQ,iBAAiB,SAAS,MAAM;AAC7C,QAAI,MAAM,QAAQ;AAChB,UAAI,mBAAmB,KAAK;AAC5B,cAAA;AAAA,IACF,OAAO;AACL,UAAI,mBAAmB,IAAI;AAC3B,eAAA;AAAA,IACF;AAAA,EACF,CAAC;AAED,MACE,MAAM,aAAa,UAAU,MAAM,MACnC,MAAM,aAAa,UAAU,MAAM,QACnC;AACA,YAAA;AAAA,EACF;AAEA,YAAU,QAAQ,YAAY,KAAK;AACnC,YAAU,QAAQ,YAAY,OAAO,OAAO;AAC5C,YAAU,UAAU,OAAO;AAE3B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;;"}
+{"version":3,"file":"toggle.js","sources":["../../../../source/atomic/assets/video/toggle.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\n\ninterface VideoProps {\n  video: HTMLVideoElement;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n  callback?: (isPlaying: boolean) => void;\n}\n\nexport default (props: VideoProps) =>\n  (() => {\n    const {\n      video,\n      additionalElementStyles,\n      isScaled = false,\n      callback,\n    } = props;\n\n    const button = new ElementBuilder('button')\n      .styled(Styles.element.action.button.videoState)\n      .withAttribute('type', 'button')\n      .withAttribute('aria-label', 'Play')\n      .withHTML(iconPlay)\n      .build();\n\n    const setPlay = () => {\n      button.element.setAttribute('aria-label', 'Pause');\n      button.element.innerHTML = iconPause;\n      video.muted = true;\n      video.play().catch((error) => {\n        if (error.name === 'NotAllowedError') {\n          setPause();\n        }\n        console.warn('Video play failed:', error);\n      });\n    };\n\n    const setPause = () => {\n      button.element.setAttribute('aria-label', 'Play');\n      button.element.innerHTML = iconPlay;\n      video.pause();\n    };\n\n    button.element.addEventListener('click', () => {\n      if (video.paused) {\n        if (callback) callback(false);\n        setPlay();\n      } else {\n        if (callback) callback(true);\n        setPause();\n      }\n    });\n\n    if (\n      video.getAttribute('autoplay') === '' ||\n      video.getAttribute('autoplay') === 'true'\n    ) {\n      setPlay();\n    }\n\n    return new ElementBuilder()\n      .withClassName('umd-element-video')\n      .withStyles({\n        element: {\n          position: 'relative',\n          ...additionalElementStyles,\n          ...(isScaled && {\n            width: '100%',\n            height: '100%',\n            objectFit: 'cover',\n          }),\n\n          ...(isScaled && {\n            [`& video`]: {\n              width: '100%',\n              height: '100%',\n              objectFit: 'cover',\n              display: 'block',\n            },\n          }),\n        },\n      })\n      .withChildren(video, button)\n      .withEvents({ setPlay, setPause })\n      .build();\n  })();\n"],"names":["ElementBuilder","Styles","iconPlay","iconPause"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcA,MAAA,SAAe,CAAC,WACb,MAAM;AACL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EAAA,IACE;AAEJ,QAAM,SAAS,IAAIA,kBAAAA,eAAe,QAAQ,EACvC,OAAOC,kBAAO,QAAQ,OAAO,OAAO,UAAU,EAC9C,cAAc,QAAQ,QAAQ,EAC9B,cAAc,cAAc,MAAM,EAClC,SAASC,aAAQ,EACjB,MAAA;AAEH,QAAM,UAAU,MAAM;AACpB,WAAO,QAAQ,aAAa,cAAc,OAAO;AACjD,WAAO,QAAQ,YAAYC,SAAAA;AAC3B,UAAM,QAAQ;AACd,UAAM,KAAA,EAAO,MAAM,CAAC,UAAU;AAC5B,UAAI,MAAM,SAAS,mBAAmB;AACpC,iBAAA;AAAA,MACF;AACA,cAAQ,KAAK,sBAAsB,KAAK;AAAA,IAC1C,CAAC;AAAA,EACH;AAEA,QAAM,WAAW,MAAM;AACrB,WAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,WAAO,QAAQ,YAAYD,SAAAA;AAC3B,UAAM,MAAA;AAAA,EACR;AAEA,SAAO,QAAQ,iBAAiB,SAAS,MAAM;AAC7C,QAAI,MAAM,QAAQ;AAChB,UAAI,mBAAmB,KAAK;AAC5B,cAAA;AAAA,IACF,OAAO;AACL,UAAI,mBAAmB,IAAI;AAC3B,eAAA;AAAA,IACF;AAAA,EACF,CAAC;AAED,MACE,MAAM,aAAa,UAAU,MAAM,MACnC,MAAM,aAAa,UAAU,MAAM,QACnC;AACA,YAAA;AAAA,EACF;AAEA,SAAO,IAAIF,kBAAAA,eAAA,EACR,cAAc,mBAAmB,EACjC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,GAAG;AAAA,MACH,GAAI,YAAY;AAAA,QACd,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,MAAA;AAAA,MAGb,GAAI,YAAY;AAAA,QACd,CAAC,SAAS,GAAG;AAAA,UACX,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF,CACD,EACA,aAAa,OAAO,MAAM,EAC1B,WAAW,EAAE,SAAS,UAAU,EAChC,MAAA;AACL,GAAA;;"}

package/dist/atomic/assets/video/toggle.mjs

@@ -1,6 +1,6 @@
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 import { play, pause } from "@universityofmaryland/web-icons-library/controls";
-import { create } from "../../../model/elements/index.mjs";
-import { videoState } from "../../../model/elements/buttons.mjs";
 const toggle = (props) => (() => {
   const {
     video,
@@ -8,32 +8,7 @@ const toggle = (props) => (() => {
     isScaled = false,
     callback
   } = props;
-  const composite = create({
-    element: document.createElement("div"),
-    className: "umd-element-video",
-    elementStyles: {
-      element: {
-        position: "relative",
-        ...additionalElementStyles,
-        ...isScaled && {
-          width: "100%",
-          height: "100%",
-          objectFit: "cover"
-        },
-        ...isScaled && {
-          [`& video`]: {
-            width: "100%",
-            height: "100%",
-            objectFit: "cover",
-            display: "block"
-          }
-        }
-      }
-    }
-  });
-  const button = videoState({
-    element: document.createElement("button")
-  });
+  const button = new ElementBuilder("button").styled(Styles.element.action.button.videoState).withAttribute("type", "button").withAttribute("aria-label", "Play").withHTML(play).build();
   const setPlay = () => {
     button.element.setAttribute("aria-label", "Pause");
     button.element.innerHTML = pause;
@@ -50,9 +25,6 @@ const toggle = (props) => (() => {
     button.element.innerHTML = play;
     video.pause();
   };
-  button.element.setAttribute("aria-label", "Play");
-  button.element.innerHTML = play;
-  button.element.setAttribute("type", "button");
   button.element.addEventListener("click", () => {
     if (video.paused) {
       if (callback) callback(false);
@@ -65,16 +37,25 @@ const toggle = (props) => (() => {
   if (video.getAttribute("autoplay") === "" || video.getAttribute("autoplay") === "true") {
     setPlay();
   }
-  composite.element.appendChild(video);
-  composite.element.appendChild(button.element);
-  composite.styles += button.styles;
-  return {
-    ...composite,
-    events: {
-      setPlay,
-      setPause
+  return new ElementBuilder().withClassName("umd-element-video").withStyles({
+    element: {
+      position: "relative",
+      ...additionalElementStyles,
+      ...isScaled && {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover"
+      },
+      ...isScaled && {
+        [`& video`]: {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          display: "block"
+        }
+      }
     }
-  };
+  }).withChildren(video, button).withEvents({ setPlay, setPause }).build();
 })();
 export {
   toggle as default

package/dist/atomic/assets/video/toggle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.mjs","sources":["../../../../source/atomic/assets/video/toggle.ts"],"sourcesContent":["import {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\nimport { ElementModel } from 'model';\n\ninterface VideoProps {\n  video: HTMLVideoElement;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n  callback?: (isPlaying: boolean) => void;\n}\n\nexport default (props: VideoProps) =>\n  (() => {\n    const {\n      video,\n      additionalElementStyles,\n      isScaled = false,\n      callback,\n    } = props;\n    const composite = ElementModel.create({\n      element: document.createElement('div'),\n      className: 'umd-element-video',\n      elementStyles: {\n        element: {\n          position: 'relative',\n          ...additionalElementStyles,\n          ...(isScaled && {\n            width: '100%',\n            height: '100%',\n            objectFit: 'cover',\n          }),\n\n          ...(isScaled && {\n            [`& video`]: {\n              width: '100%',\n              height: '100%',\n              objectFit: 'cover',\n              display: 'block',\n            },\n          }),\n        },\n      },\n    });\n    const button = ElementModel.buttons.videoState({\n      element: document.createElement('button'),\n    });\n\n    const setPlay = () => {\n      button.element.setAttribute('aria-label', 'Pause');\n      button.element.innerHTML = iconPause;\n      video.muted = true;\n      video.play().catch((error) => {\n        if (error.name === 'NotAllowedError') {\n          setPause();\n        }\n        console.warn('Video play failed:', error);\n      });\n    };\n    const setPause = () => {\n      button.element.setAttribute('aria-label', 'Play');\n      button.element.innerHTML = iconPlay;\n      video.pause();\n    };\n\n    // Load styles and attributes\n\n    button.element.setAttribute('aria-label', 'Play');\n    button.element.innerHTML = iconPlay;\n    button.element.setAttribute('type', 'button');\n    button.element.addEventListener('click', () => {\n      if (video.paused) {\n        if (callback) callback(false);\n        setPlay();\n      } else {\n        if (callback) callback(true);\n        setPause();\n      }\n    });\n\n    if (\n      video.getAttribute('autoplay') === '' ||\n      video.getAttribute('autoplay') === 'true'\n    ) {\n      setPlay();\n    }\n\n    composite.element.appendChild(video);\n    composite.element.appendChild(button.element);\n    composite.styles += button.styles;\n\n    return {\n      ...composite,\n      events: {\n        setPlay,\n        setPause,\n      },\n    };\n  })();\n"],"names":["ElementModel.create","ElementModel.buttons.videoState","iconPause","iconPlay"],"mappings":";;;AAaA,MAAA,SAAe,CAAC,WACb,MAAM;AACL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EAAA,IACE;AACJ,QAAM,YAAYA,OAAoB;AAAA,IACpC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,GAAG;AAAA,QACH,GAAI,YAAY;AAAA,UACd,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,QAAA;AAAA,QAGb,GAAI,YAAY;AAAA,UACd,CAAC,SAAS,GAAG;AAAA,YACX,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW;AAAA,YACX,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACD,QAAM,SAASC,WAAgC;AAAA,IAC7C,SAAS,SAAS,cAAc,QAAQ;AAAA,EAAA,CACzC;AAED,QAAM,UAAU,MAAM;AACpB,WAAO,QAAQ,aAAa,cAAc,OAAO;AACjD,WAAO,QAAQ,YAAYC;AAC3B,UAAM,QAAQ;AACd,UAAM,KAAA,EAAO,MAAM,CAAC,UAAU;AAC5B,UAAI,MAAM,SAAS,mBAAmB;AACpC,iBAAA;AAAA,MACF;AACA,cAAQ,KAAK,sBAAsB,KAAK;AAAA,IAC1C,CAAC;AAAA,EACH;AACA,QAAM,WAAW,MAAM;AACrB,WAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,WAAO,QAAQ,YAAYC;AAC3B,UAAM,MAAA;AAAA,EACR;AAIA,SAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,SAAO,QAAQ,YAAYA;AAC3B,SAAO,QAAQ,aAAa,QAAQ,QAAQ;AAC5C,SAAO,QAAQ,iBAAiB,SAAS,MAAM;AAC7C,QAAI,MAAM,QAAQ;AAChB,UAAI,mBAAmB,KAAK;AAC5B,cAAA;AAAA,IACF,OAAO;AACL,UAAI,mBAAmB,IAAI;AAC3B,eAAA;AAAA,IACF;AAAA,EACF,CAAC;AAED,MACE,MAAM,aAAa,UAAU,MAAM,MACnC,MAAM,aAAa,UAAU,MAAM,QACnC;AACA,YAAA;AAAA,EACF;AAEA,YAAU,QAAQ,YAAY,KAAK;AACnC,YAAU,QAAQ,YAAY,OAAO,OAAO;AAC5C,YAAU,UAAU,OAAO;AAE3B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;"}
+{"version":3,"file":"toggle.mjs","sources":["../../../../source/atomic/assets/video/toggle.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\n\ninterface VideoProps {\n  video: HTMLVideoElement;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n  callback?: (isPlaying: boolean) => void;\n}\n\nexport default (props: VideoProps) =>\n  (() => {\n    const {\n      video,\n      additionalElementStyles,\n      isScaled = false,\n      callback,\n    } = props;\n\n    const button = new ElementBuilder('button')\n      .styled(Styles.element.action.button.videoState)\n      .withAttribute('type', 'button')\n      .withAttribute('aria-label', 'Play')\n      .withHTML(iconPlay)\n      .build();\n\n    const setPlay = () => {\n      button.element.setAttribute('aria-label', 'Pause');\n      button.element.innerHTML = iconPause;\n      video.muted = true;\n      video.play().catch((error) => {\n        if (error.name === 'NotAllowedError') {\n          setPause();\n        }\n        console.warn('Video play failed:', error);\n      });\n    };\n\n    const setPause = () => {\n      button.element.setAttribute('aria-label', 'Play');\n      button.element.innerHTML = iconPlay;\n      video.pause();\n    };\n\n    button.element.addEventListener('click', () => {\n      if (video.paused) {\n        if (callback) callback(false);\n        setPlay();\n      } else {\n        if (callback) callback(true);\n        setPause();\n      }\n    });\n\n    if (\n      video.getAttribute('autoplay') === '' ||\n      video.getAttribute('autoplay') === 'true'\n    ) {\n      setPlay();\n    }\n\n    return new ElementBuilder()\n      .withClassName('umd-element-video')\n      .withStyles({\n        element: {\n          position: 'relative',\n          ...additionalElementStyles,\n          ...(isScaled && {\n            width: '100%',\n            height: '100%',\n            objectFit: 'cover',\n          }),\n\n          ...(isScaled && {\n            [`& video`]: {\n              width: '100%',\n              height: '100%',\n              objectFit: 'cover',\n              display: 'block',\n            },\n          }),\n        },\n      })\n      .withChildren(video, button)\n      .withEvents({ setPlay, setPause })\n      .build();\n  })();\n"],"names":["iconPlay","iconPause"],"mappings":";;;AAcA,MAAA,SAAe,CAAC,WACb,MAAM;AACL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EAAA,IACE;AAEJ,QAAM,SAAS,IAAI,eAAe,QAAQ,EACvC,OAAO,OAAO,QAAQ,OAAO,OAAO,UAAU,EAC9C,cAAc,QAAQ,QAAQ,EAC9B,cAAc,cAAc,MAAM,EAClC,SAASA,IAAQ,EACjB,MAAA;AAEH,QAAM,UAAU,MAAM;AACpB,WAAO,QAAQ,aAAa,cAAc,OAAO;AACjD,WAAO,QAAQ,YAAYC;AAC3B,UAAM,QAAQ;AACd,UAAM,KAAA,EAAO,MAAM,CAAC,UAAU;AAC5B,UAAI,MAAM,SAAS,mBAAmB;AACpC,iBAAA;AAAA,MACF;AACA,cAAQ,KAAK,sBAAsB,KAAK;AAAA,IAC1C,CAAC;AAAA,EACH;AAEA,QAAM,WAAW,MAAM;AACrB,WAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,WAAO,QAAQ,YAAYD;AAC3B,UAAM,MAAA;AAAA,EACR;AAEA,SAAO,QAAQ,iBAAiB,SAAS,MAAM;AAC7C,QAAI,MAAM,QAAQ;AAChB,UAAI,mBAAmB,KAAK;AAC5B,cAAA;AAAA,IACF,OAAO;AACL,UAAI,mBAAmB,IAAI;AAC3B,eAAA;AAAA,IACF;AAAA,EACF,CAAC;AAED,MACE,MAAM,aAAa,UAAU,MAAM,MACnC,MAAM,aAAa,UAAU,MAAM,QACnC;AACA,YAAA;AAAA,EACF;AAEA,SAAO,IAAI,eAAA,EACR,cAAc,mBAAmB,EACjC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,GAAG;AAAA,MACH,GAAI,YAAY;AAAA,QACd,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,MAAA;AAAA,MAGb,GAAI,YAAY;AAAA,QACd,CAAC,SAAS,GAAG;AAAA,UACX,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF,CACD,EACA,aAAa,OAAO,MAAM,EAC1B,WAAW,EAAE,SAAS,UAAU,EAChC,MAAA;AACL,GAAA;"}

package/dist/atomic/buttons/fullscreen.d.ts

@@ -2,11 +2,7 @@ declare const _default: {
     create: ({ callback, index, }: {
         callback: (arg: number) => void;
         index: number;
-    }) => {
-        element: HTMLElement;
-        className: string;
-        styles: string;
-    };
+    }) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 };
 export default _default;
 //# sourceMappingURL=fullscreen.d.ts.map

package/dist/atomic/buttons/fullscreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen.d.ts","sourceRoot":"","sources":["../../../source/atomic/buttons/fullscreen.ts"],"names":[],"mappings":";mCAMG;QACD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;KACf;;;;;;AAeD,wBAEE"}
+{"version":3,"file":"fullscreen.d.ts","sourceRoot":"","sources":["../../../source/atomic/buttons/fullscreen.ts"],"names":[],"mappings":";mCAOG;QACD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;KACf;;AAWD,wBAEE"}