@universityofmaryland/web-elements-library 1.4.8 → 1.5.0-beta.0

package/dist/composite/carousel/elements/full-screen.js

@@ -1,19 +1,47 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-const icons = require("../../../utilities/assets/icons.js");
-require("../../../node_modules/postcss/lib/postcss.js");
-require("../../../node_modules/postcss-nesting/dist/index.js");
-require("../../../node_modules/postcss-js/index.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const controls = require("@universityofmaryland/web-icons-library/controls");
+require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-utilities-library/media");
+require("@universityofmaryland/web-utilities-library/dom");
+require("@universityofmaryland/web-icons-library/communication");
+require("@universityofmaryland/web-icons-library/files");
+require("@universityofmaryland/web-icons-library/brand");
 require("../../../model/modifiers/index.js");
+require("@universityofmaryland/web-styles-library");
 require("../../../model/elements/headline.js");
+require("@universityofmaryland/web-icons-library/arrows");
 require("../../../atomic/animations/actions/indicator.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
 require("../../../atomic/animations/brand/card-stack.js");
+require("@universityofmaryland/web-utilities-library/performance");
+require("@universityofmaryland/web-utilities-library/accessibility");
+require("@universityofmaryland/web-icons-library/location");
+require("@universityofmaryland/web-icons-library/calendar");
 require("../../../atomic/layout/block/stacked.js");
 const modal = require("../../../atomic/layout/overlay/modal.js");
 require("../../../atomic/layout/person/columns.js");
+require("@universityofmaryland/web-icons-library/social");
 require("../../../atomic/text-lockup/date.js");
 require("../../../atomic/text-lockup/small.js");
+require("@universityofmaryland/web-styles-library/typography");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const ELEMENT_CLOSE_BUTTON = "carousel-fixed-screen-button";
 const STYLES_FIXED_FULL_SCREEN = `
 
@@ -24,7 +52,7 @@ const STYLES_FIXED_FULL_SCREEN = `
     right: 10px;
   }
 
-  @media (${Styles.token.media.queries.tablet.min}) {
+  @media (${token__namespace.media.queries.tablet.min}) {
     .${ELEMENT_CLOSE_BUTTON} {
       top: calc(10vh - 22px);
       right: calc(10vw - 22px);
@@ -32,7 +60,7 @@ const STYLES_FIXED_FULL_SCREEN = `
   }
 
   .${ELEMENT_CLOSE_BUTTON} > svg {
-    fill: ${Styles.token.color.white};
+    fill: ${token__namespace.color.white};
     width: 20px;
     height: 20px;
   }
@@ -45,7 +73,7 @@ const fullScreen = ({ content, callback }) => {
   closeButton.setAttribute("type", "button");
   closeButton.setAttribute("aria-label", "Close");
   closeButton.classList.add(ELEMENT_CLOSE_BUTTON);
-  closeButton.innerHTML = icons.X;
+  closeButton.innerHTML = controls.close_large;
   closeButton.addEventListener("click", modal$1.events.hide);
   modal$1.element.appendChild(closeButton);
   return {

package/dist/composite/carousel/elements/full-screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"full-screen.js","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport { layout } from 'atomic';\nimport * as Utility from 'utilities';\n\ntype TypeFixedFullScreenProps = {\n  content: HTMLElement;\n  callback: () => void;\n};\n\nconst ELEMENT_CLOSE_BUTTON = 'carousel-fixed-screen-button';\n\nconst STYLES_FIXED_FULL_SCREEN = `\n\n\n  .${ELEMENT_CLOSE_BUTTON} {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    .${ELEMENT_CLOSE_BUTTON} {\n      top: calc(10vh - 22px);\n      right: calc(10vw - 22px);\n    }\n  }\n\n  .${ELEMENT_CLOSE_BUTTON} > svg {\n    fill: ${token.color.white};\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nexport default ({ content, callback }: TypeFixedFullScreenProps) => {\n  const modal = layout.overlay.modal({ content, callback });\n  const closeButton = document.createElement('button');\n  let styles = STYLES_FIXED_FULL_SCREEN;\n\n  styles += modal.styles;\n\n  closeButton.setAttribute('type', 'button');\n  closeButton.setAttribute('aria-label', 'Close');\n  closeButton.classList.add(ELEMENT_CLOSE_BUTTON);\n  closeButton.innerHTML = Utility.asset.icon.X;\n  closeButton.addEventListener('click', modal.events.hide);\n\n  modal.element.appendChild(closeButton);\n\n  return {\n    element: modal.element,\n    styles,\n    events: {\n      show: modal.events.show,\n      hide: modal.events.hide,\n    },\n  };\n};\n"],"names":["token","modal","layout.overlay.modal","Utility.asset.icon.X"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,uBAAuB;AAE7B,MAAM,2BAA2B;AAAA;AAAA;AAAA,KAG5B,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMbA,OAAAA,MAAM,MAAM,QAAQ,OAAO,GAAG;AAAA,OACnC,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,oBAAoB;AAAA,YACbA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAA,aAAe,CAAC,EAAE,SAAS,eAAyC;AAClE,QAAMC,UAAQC,MAAAA,YAAqB,EAAE,SAAS,UAAU;AACxD,QAAM,cAAc,SAAS,cAAc,QAAQ;AACnD,MAAI,SAAS;AAEb,YAAUD,QAAM;AAEhB,cAAY,aAAa,QAAQ,QAAQ;AACzC,cAAY,aAAa,cAAc,OAAO;AAC9C,cAAY,UAAU,IAAI,oBAAoB;AAC9C,cAAY,YAAYE,MAAAA;AACxB,cAAY,iBAAiB,SAASF,QAAM,OAAO,IAAI;AAEvDA,UAAM,QAAQ,YAAY,WAAW;AAErC,SAAO;AAAA,IACL,SAASA,QAAM;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,MAAMA,QAAM,OAAO;AAAA,MACnB,MAAMA,QAAM,OAAO;AAAA,IAAA;AAAA,EACrB;AAEJ;;"}
+{"version":3,"file":"full-screen.js","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { close_large as iconCloseLarge } from '@universityofmaryland/web-icons-library/controls';\nimport { layout } from 'atomic';\n\ntype TypeFixedFullScreenProps = {\n  content: HTMLElement;\n  callback: () => void;\n};\n\nconst ELEMENT_CLOSE_BUTTON = 'carousel-fixed-screen-button';\n\nconst STYLES_FIXED_FULL_SCREEN = `\n\n\n  .${ELEMENT_CLOSE_BUTTON} {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    .${ELEMENT_CLOSE_BUTTON} {\n      top: calc(10vh - 22px);\n      right: calc(10vw - 22px);\n    }\n  }\n\n  .${ELEMENT_CLOSE_BUTTON} > svg {\n    fill: ${token.color.white};\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nexport default ({ content, callback }: TypeFixedFullScreenProps) => {\n  const modal = layout.overlay.modal({ content, callback });\n  const closeButton = document.createElement('button');\n  let styles = STYLES_FIXED_FULL_SCREEN;\n\n  styles += modal.styles;\n\n  closeButton.setAttribute('type', 'button');\n  closeButton.setAttribute('aria-label', 'Close');\n  closeButton.classList.add(ELEMENT_CLOSE_BUTTON);\n  closeButton.innerHTML = iconCloseLarge;\n  closeButton.addEventListener('click', modal.events.hide);\n\n  modal.element.appendChild(closeButton);\n\n  return {\n    element: modal.element,\n    styles,\n    events: {\n      show: modal.events.show,\n      hide: modal.events.hide,\n    },\n  };\n};\n"],"names":["token","modal","layout.overlay.modal","iconCloseLarge"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,uBAAuB;AAE7B,MAAM,2BAA2B;AAAA;AAAA;AAAA,KAG5B,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMbA,iBAAM,MAAM,QAAQ,OAAO,GAAG;AAAA,OACnC,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,oBAAoB;AAAA,YACbA,iBAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAA,aAAe,CAAC,EAAE,SAAS,eAAyC;AAClE,QAAMC,UAAQC,MAAAA,YAAqB,EAAE,SAAS,UAAU;AACxD,QAAM,cAAc,SAAS,cAAc,QAAQ;AACnD,MAAI,SAAS;AAEb,YAAUD,QAAM;AAEhB,cAAY,aAAa,QAAQ,QAAQ;AACzC,cAAY,aAAa,cAAc,OAAO;AAC9C,cAAY,UAAU,IAAI,oBAAoB;AAC9C,cAAY,YAAYE,SAAAA;AACxB,cAAY,iBAAiB,SAASF,QAAM,OAAO,IAAI;AAEvDA,UAAM,QAAQ,YAAY,WAAW;AAErC,SAAO;AAAA,IACL,SAASA,QAAM;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,MAAMA,QAAM,OAAO;AAAA,MACnB,MAAMA,QAAM,OAAO;AAAA,IAAA;AAAA,EACrB;AAEJ;;"}

package/dist/composite/carousel/elements/full-screen.mjs

@@ -1,18 +1,29 @@
-import { token } from "@universityofmaryland/web-styles-library";
-import { X } from "../../../utilities/assets/icons.mjs";
-import "../../../node_modules/postcss/lib/postcss.mjs";
-import "../../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../../node_modules/postcss-js/index.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import { close_large } from "@universityofmaryland/web-icons-library/controls";
+import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-utilities-library/media";
+import "@universityofmaryland/web-utilities-library/dom";
+import "@universityofmaryland/web-icons-library/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
 import "../../../model/modifiers/index.mjs";
+import "@universityofmaryland/web-styles-library";
 import "../../../model/elements/headline.mjs";
+import "@universityofmaryland/web-icons-library/arrows";
 import "../../../atomic/animations/actions/indicator.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../../atomic/animations/brand/card-stack.mjs";
+import "@universityofmaryland/web-utilities-library/performance";
+import "@universityofmaryland/web-utilities-library/accessibility";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
 import "../../../atomic/layout/block/stacked.mjs";
 import { createModal } from "../../../atomic/layout/overlay/modal.mjs";
 import "../../../atomic/layout/person/columns.mjs";
+import "@universityofmaryland/web-icons-library/social";
 import "../../../atomic/text-lockup/date.mjs";
 import "../../../atomic/text-lockup/small.mjs";
+import "@universityofmaryland/web-styles-library/typography";
 const ELEMENT_CLOSE_BUTTON = "carousel-fixed-screen-button";
 const STYLES_FIXED_FULL_SCREEN = `
 
@@ -44,7 +55,7 @@ const fullScreen = ({ content, callback }) => {
   closeButton.setAttribute("type", "button");
   closeButton.setAttribute("aria-label", "Close");
   closeButton.classList.add(ELEMENT_CLOSE_BUTTON);
-  closeButton.innerHTML = X;
+  closeButton.innerHTML = close_large;
   closeButton.addEventListener("click", modal.events.hide);
   modal.element.appendChild(closeButton);
   return {

package/dist/composite/carousel/elements/full-screen.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"full-screen.mjs","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport { layout } from 'atomic';\nimport * as Utility from 'utilities';\n\ntype TypeFixedFullScreenProps = {\n  content: HTMLElement;\n  callback: () => void;\n};\n\nconst ELEMENT_CLOSE_BUTTON = 'carousel-fixed-screen-button';\n\nconst STYLES_FIXED_FULL_SCREEN = `\n\n\n  .${ELEMENT_CLOSE_BUTTON} {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    .${ELEMENT_CLOSE_BUTTON} {\n      top: calc(10vh - 22px);\n      right: calc(10vw - 22px);\n    }\n  }\n\n  .${ELEMENT_CLOSE_BUTTON} > svg {\n    fill: ${token.color.white};\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nexport default ({ content, callback }: TypeFixedFullScreenProps) => {\n  const modal = layout.overlay.modal({ content, callback });\n  const closeButton = document.createElement('button');\n  let styles = STYLES_FIXED_FULL_SCREEN;\n\n  styles += modal.styles;\n\n  closeButton.setAttribute('type', 'button');\n  closeButton.setAttribute('aria-label', 'Close');\n  closeButton.classList.add(ELEMENT_CLOSE_BUTTON);\n  closeButton.innerHTML = Utility.asset.icon.X;\n  closeButton.addEventListener('click', modal.events.hide);\n\n  modal.element.appendChild(closeButton);\n\n  return {\n    element: modal.element,\n    styles,\n    events: {\n      show: modal.events.show,\n      hide: modal.events.hide,\n    },\n  };\n};\n"],"names":["layout.overlay.modal","Utility.asset.icon.X"],"mappings":";;;;;;;;;;;;;;;AASA,MAAM,uBAAuB;AAE7B,MAAM,2BAA2B;AAAA;AAAA;AAAA,KAG5B,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMb,MAAM,MAAM,QAAQ,OAAO,GAAG;AAAA,OACnC,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,oBAAoB;AAAA,YACb,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAA,aAAe,CAAC,EAAE,SAAS,eAAyC;AAClE,QAAM,QAAQA,YAAqB,EAAE,SAAS,UAAU;AACxD,QAAM,cAAc,SAAS,cAAc,QAAQ;AACnD,MAAI,SAAS;AAEb,YAAU,MAAM;AAEhB,cAAY,aAAa,QAAQ,QAAQ;AACzC,cAAY,aAAa,cAAc,OAAO;AAC9C,cAAY,UAAU,IAAI,oBAAoB;AAC9C,cAAY,YAAYC;AACxB,cAAY,iBAAiB,SAAS,MAAM,OAAO,IAAI;AAEvD,QAAM,QAAQ,YAAY,WAAW;AAErC,SAAO;AAAA,IACL,SAAS,MAAM;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,MAAM,MAAM,OAAO;AAAA,MACnB,MAAM,MAAM,OAAO;AAAA,IAAA;AAAA,EACrB;AAEJ;"}
+{"version":3,"file":"full-screen.mjs","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { close_large as iconCloseLarge } from '@universityofmaryland/web-icons-library/controls';\nimport { layout } from 'atomic';\n\ntype TypeFixedFullScreenProps = {\n  content: HTMLElement;\n  callback: () => void;\n};\n\nconst ELEMENT_CLOSE_BUTTON = 'carousel-fixed-screen-button';\n\nconst STYLES_FIXED_FULL_SCREEN = `\n\n\n  .${ELEMENT_CLOSE_BUTTON} {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    .${ELEMENT_CLOSE_BUTTON} {\n      top: calc(10vh - 22px);\n      right: calc(10vw - 22px);\n    }\n  }\n\n  .${ELEMENT_CLOSE_BUTTON} > svg {\n    fill: ${token.color.white};\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nexport default ({ content, callback }: TypeFixedFullScreenProps) => {\n  const modal = layout.overlay.modal({ content, callback });\n  const closeButton = document.createElement('button');\n  let styles = STYLES_FIXED_FULL_SCREEN;\n\n  styles += modal.styles;\n\n  closeButton.setAttribute('type', 'button');\n  closeButton.setAttribute('aria-label', 'Close');\n  closeButton.classList.add(ELEMENT_CLOSE_BUTTON);\n  closeButton.innerHTML = iconCloseLarge;\n  closeButton.addEventListener('click', modal.events.hide);\n\n  modal.element.appendChild(closeButton);\n\n  return {\n    element: modal.element,\n    styles,\n    events: {\n      show: modal.events.show,\n      hide: modal.events.hide,\n    },\n  };\n};\n"],"names":["layout.overlay.modal","iconCloseLarge"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,uBAAuB;AAE7B,MAAM,2BAA2B;AAAA;AAAA;AAAA,KAG5B,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMb,MAAM,MAAM,QAAQ,OAAO,GAAG;AAAA,OACnC,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,oBAAoB;AAAA,YACb,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAA,aAAe,CAAC,EAAE,SAAS,eAAyC;AAClE,QAAM,QAAQA,YAAqB,EAAE,SAAS,UAAU;AACxD,QAAM,cAAc,SAAS,cAAc,QAAQ;AACnD,MAAI,SAAS;AAEb,YAAU,MAAM;AAEhB,cAAY,aAAa,QAAQ,QAAQ;AACzC,cAAY,aAAa,cAAc,OAAO;AAC9C,cAAY,UAAU,IAAI,oBAAoB;AAC9C,cAAY,YAAYC;AACxB,cAAY,iBAAiB,SAAS,MAAM,OAAO,IAAI;AAEvD,QAAM,QAAQ,YAAY,WAAW;AAErC,SAAO;AAAA,IACL,SAAS,MAAM;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,MAAM,MAAM,OAAO;AAAA,MACnB,MAAM,MAAM,OAAO;AAAA,IAAA;AAAA,EACrB;AAEJ;"}

package/dist/composite/carousel/elements/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/image.ts"],"names":[],"mappings":"AAGA,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;yBAwNc,OAAO,sBAAsB;;;;;6BA6Bb,MAAM;;;;;;AA7BtC,wBAyGO"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/image.ts"],"names":[],"mappings":"AAMA,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;yBAwNc,OAAO,sBAAsB;;;;;6BA6Bb,MAAM;;;;;;AA7BtC,wBAsGO"}

package/dist/composite/carousel/elements/image.js

@@ -1,12 +1,26 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-const icons = require("../../../utilities/assets/icons.js");
-const index$1 = require("../../../utilities/js-events/index.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");
-const assets = require("../../../utilities/theme/assets.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const arrows = require("@universityofmaryland/web-icons-library/arrows");
+const performance = require("@universityofmaryland/web-utilities-library/performance");
+const media = require("@universityofmaryland/web-utilities-library/media");
+const events = require("@universityofmaryland/web-utilities-library/events");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const ANIMATION_DURATION = 500;
 const ATTRIBUTE_ACTIVE_SLIDE = "data-active-slide";
 const ELEMENT_CAROUSEL_DECLARATION = "carousel-image-slider-container";
@@ -16,7 +30,7 @@ const ELEMENT_CAROUSEL_SLIDER_BUTTON = "carousel-slider-button";
 const OVERWRITE_ACTIVE_SLIDE = `.${ELEMENT_CAROUSEL_SLIDE}[${ATTRIBUTE_ACTIVE_SLIDE}]`;
 const SliderButtons = `
   .${ELEMENT_CAROUSEL_SLIDER_BUTTON} {
-    background-color: ${Styles.token.color.white};
+    background-color: ${token__namespace.color.white};
     display: flex;
     justify-content: center;
     align-items: center;
@@ -28,7 +42,7 @@ const SliderButtons = `
   }
 
   .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type {
-    left: ${Styles.token.spacing.sm};
+    left: ${token__namespace.spacing.sm};
   }
 
   .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type svg {
@@ -36,11 +50,11 @@ const SliderButtons = `
   }
 
   .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:last-of-type {
-    right: ${Styles.token.spacing.sm};
+    right: ${token__namespace.spacing.sm};
   }
 
   .${ELEMENT_CAROUSEL_SLIDER_BUTTON} svg {
-    fill: ${Styles.token.color.black};
+    fill: ${token__namespace.color.black};
     width: 16px;
   }
 `;
@@ -82,7 +96,7 @@ const CreateButton = ({
   const button = document.createElement("button");
   button.setAttribute("type", "button");
   button.classList.add(ELEMENT_CAROUSEL_SLIDER_BUTTON);
-  button.innerHTML = icons.FORWARD_ARROW;
+  button.innerHTML = arrows.arrow_right;
   if (!isRight) {
     button.setAttribute("aria-label", "Previous");
   } else {
@@ -112,7 +126,7 @@ const SetCarouselSize = ({
   );
   const img = activeSlide.querySelector("img");
   const maxWindowHeight = maxHeight ? maxHeight > windowHeight ? windowHeight : maxHeight : windowHeight;
-  const imageSize = assets.getResponsiveImageSize({
+  const imageSize = media.getResponsiveImageSize({
     image: img,
     parentNode: slider,
     maxWindowHeight
@@ -196,9 +210,9 @@ const image = (props) => (() => {
     });
     if (callback) callback(activeIndex);
   };
-  const EventMoveTo = (index2) => {
+  const EventMoveTo = (index) => {
     SlideActiveSlide({ slide: slides[activeIndex], isRight: true });
-    activeIndex = index2;
+    activeIndex = index;
     SlideUpcomingSlide({ slide: slides[activeIndex], isRight: true });
     SetCarouselSize({
       slider,
@@ -218,7 +232,7 @@ const image = (props) => (() => {
         EventSlide({ forward: false });
       }
     };
-    index$1.CreateEventSwipe({
+    events.setupSwipeDetection({
       container: slider,
       callback: swipes
     });
@@ -247,10 +261,7 @@ const image = (props) => (() => {
   );
   container.classList.add(ELEMENT_CAROUSEL_DECLARATION);
   container.appendChild(slider);
-  window.addEventListener(
-    "resize",
-    index.debounce(EventResize, 10)
-  );
+  window.addEventListener("resize", performance.debounce(EventResize, 10));
   EventSwipe();
   return {
     element: container,

package/dist/composite/carousel/elements/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","sources":["../../../../source/composite/carousel/elements/image.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\n\ntype TypeCarouselImageProps = {\n  slides: HTMLElement[];\n  callback?: (index: number) => void;\n  maxHeight?: number;\n};\n\nconst ANIMATION_DURATION = 500;\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active-slide';\n\nconst ELEMENT_CAROUSEL_DECLARATION = 'carousel-image-slider-container';\nconst ELEMENT_CAROUSEL_CONTAINER = 'carousel-image-slider';\nconst ELEMENT_CAROUSEL_SLIDE = 'carousel-image-slide';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-slider-button';\n\nconst OVERWRITE_ACTIVE_SLIDE = `.${ELEMENT_CAROUSEL_SLIDE}[${ATTRIBUTE_ACTIVE_SLIDE}]`;\n\n// prettier-ignore\nconst SliderButtons = `\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} {\n    background-color: ${token.color.white};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 40px;\n    width: 40px;\n    position: absolute;\n    top: 50%;\n    z-index: 99;\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type {\n    left: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type svg {\n    transform: rotate(180deg);\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:last-of-type {\n    right: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} svg {\n    fill: ${token.color.black};\n    width: 16px;\n  }\n`\n\n// prettier-ignore\nconst SlideStyles = `\n  .${ELEMENT_CAROUSEL_SLIDE} {\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    left: 100%;\n    display: none;\n    transition: transform ${ANIMATION_DURATION}ms ease-in-out;\n  }\n\n  ${OVERWRITE_ACTIVE_SLIDE} {\n    z-index: 99;\n    left: 0;\n    display: block;\n    transform: translateX(0);\n  }\n`\n\n// prettier-ignore\nconst SliderStyles = `\n  .${ELEMENT_CAROUSEL_CONTAINER} {\n    position: relative;\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_ELEMENT = `\n  .${ELEMENT_CAROUSEL_DECLARATION} {\n    overflow: hidden;\n  }\n\n  ${SliderStyles}\n  ${SlideStyles}\n  ${SliderButtons}\n`;\n\nconst CreateButton = ({\n  EventSlide,\n  isRight = true,\n}: {\n  EventSlide: ({ forward }: { forward?: boolean }) => void;\n  isRight?: boolean;\n}) => {\n  const button = document.createElement('button');\n  button.setAttribute('type', 'button');\n  button.classList.add(ELEMENT_CAROUSEL_SLIDER_BUTTON);\n  button.innerHTML = Utility.asset.icon.FORWARD_ARROW;\n\n  if (!isRight) {\n    button.setAttribute('aria-label', 'Previous');\n  } else {\n    button.setAttribute('aria-label', 'Next');\n  }\n\n  button.addEventListener('click', (event) => {\n    event.stopPropagation();\n    if (isRight) EventSlide({});\n    if (!isRight) EventSlide({ forward: false });\n    button.disabled = true;\n\n    setTimeout(() => {\n      button.disabled = false;\n    }, ANIMATION_DURATION + 100);\n  });\n\n  return button;\n};\n\nconst SetCarouselSize = ({\n  slider,\n  activeSlide,\n  transition = false,\n  maxHeight,\n}: {\n  slider: HTMLElement;\n  activeSlide: HTMLElement;\n  transition?: boolean;\n  maxHeight?: number;\n}) => {\n  const windowHeight = window.innerHeight - 48;\n  const children = Array.from(activeSlide.children) as HTMLDivElement[];\n  const buttons = Array.from(\n    slider.querySelectorAll(`.${ELEMENT_CAROUSEL_SLIDER_BUTTON}`),\n  ) as HTMLButtonElement[];\n  const img = activeSlide.querySelector('img') as HTMLImageElement;\n  const maxWindowHeight = maxHeight\n    ? maxHeight > windowHeight\n      ? windowHeight\n      : maxHeight\n    : windowHeight;\n  const imageSize = Utility.theme.assets.getResponsiveImageSize({\n    image: img,\n    parentNode: slider,\n    maxWindowHeight,\n  });\n  const imageContainer = children.find((child) =>\n    child.contains(img),\n  ) as HTMLElement;\n  let size = imageSize;\n\n  imageContainer.style.height = `${imageSize}px`;\n\n  if (children.length > 1) {\n    size = children.reduce((acc, currentElement) => {\n      return currentElement.offsetHeight + acc;\n    }, 0);\n  }\n\n  buttons.forEach((button) => (button.style.top = `${imageSize / 2}px`));\n\n  if (transition) {\n    slider.style.transition = `height ${ANIMATION_DURATION}ms ease-in-out`;\n  } else {\n    slider.style.transition = `none`;\n  }\n  slider.style.height = `${size}px`;\n};\n\nconst SlideActiveSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const transformDirection = isRight ? 'translateX(-100%)' : 'translateX(100%)';\n  slide.style.transform = `${transformDirection}`;\n\n  setTimeout(() => {\n    slide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.style.transform = 'none';\n  }, ANIMATION_DURATION + 100);\n};\n\nconst SlideUpcomingSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const amount = '90';\n  const transformDirection = isRight\n    ? `translateX(-${amount}%)`\n    : `translateX(${amount}%)`;\n  const startingPosition = isRight ? `${amount}%` : `-${amount}%`;\n\n  slide.style.zIndex = '9';\n  slide.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;\n  slide.style.display = 'block';\n  slide.style.left = `${startingPosition}`;\n\n  setTimeout(() => {\n    slide.style.transform = `${transformDirection}`;\n  }, 1);\n\n  setTimeout(() => {\n    slide.style.transition = 'none';\n    slide.style.left = '0';\n    slide.style.transform = 'none';\n    slide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.removeAttribute('style');\n  }, ANIMATION_DURATION + 100);\n};\n\nexport default (props: TypeCarouselImageProps) =>\n  (() => {\n    const { slides, callback, maxHeight } = props;\n    const container = document.createElement('div');\n    const slider = document.createElement('div');\n    let activeIndex = 0;\n    let styles = STYLES_CAROUSEL_IMAGE_ELEMENT;\n\n    const EventSlide = ({ forward = true }: { forward?: boolean }) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: forward });\n\n      if (forward) {\n        activeIndex = activeIndex + 1;\n        if (activeIndex >= slides.length) activeIndex = 0;\n      } else {\n        activeIndex = activeIndex - 1;\n        if (activeIndex < 0) activeIndex = slides.length - 1;\n      }\n\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: forward });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventMoveTo = (index: number) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: true });\n      activeIndex = index;\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: true });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventSlideLeft = () => EventSlide({ forward: false });\n    const EventSlideRight = () => EventSlide({ forward: true });\n\n    const EventSwipe = () => {\n      const swipes = (isrightswipe: Boolean) => {\n        if (!isrightswipe) {\n          EventSlide({ forward: true });\n        } else {\n          EventSlide({ forward: false });\n        }\n      };\n\n      Utility.javascriptEvents.CreateEventSwipe({\n        container: slider,\n        callback: swipes,\n      });\n    };\n\n    const EventResize = () => {\n      SetCarouselSize({ slider, activeSlide: slides[activeIndex], maxHeight });\n    };\n\n    const Load = () => {\n      const setSize = () => {\n        const activeSlide = slides[activeIndex];\n        SetCarouselSize({ slider, activeSlide, maxHeight });\n        activeSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n      };\n      setTimeout(setSize, 100);\n      setTimeout(setSize, 300);\n    };\n\n    slider.classList.add(ELEMENT_CAROUSEL_CONTAINER);\n    slides.forEach((slide) => slide.classList.add(ELEMENT_CAROUSEL_SLIDE));\n    slider.append(...slides);\n    slider.appendChild(CreateButton({ EventSlide, isRight: false }));\n    slider.appendChild(\n      CreateButton({\n        EventSlide,\n        isRight: true,\n      }),\n    );\n\n    container.classList.add(ELEMENT_CAROUSEL_DECLARATION);\n    container.appendChild(slider);\n\n    window.addEventListener(\n      'resize',\n      Utility.performance.debounce(EventResize, 10),\n    );\n    EventSwipe();\n\n    return {\n      element: container,\n      styles,\n      events: {\n        Load,\n        EventMoveTo,\n        EventResize,\n        EventSlideLeft,\n        EventSlideRight,\n      },\n    };\n  })();\n"],"names":["token","Utility.asset.icon.FORWARD_ARROW","Utility.theme.assets.getResponsiveImageSize","index","Utility.javascriptEvents.CreateEventSwipe","Utility.performance.debounce"],"mappings":"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"}
+{"version":3,"file":"image.js","sources":["../../../../source/composite/carousel/elements/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { arrow_right as iconArrowRight } from '@universityofmaryland/web-icons-library/arrows';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { getResponsiveImageSize } from '@universityofmaryland/web-utilities-library/media';\nimport { setupSwipeDetection } from '@universityofmaryland/web-utilities-library/events';\n\ntype TypeCarouselImageProps = {\n  slides: HTMLElement[];\n  callback?: (index: number) => void;\n  maxHeight?: number;\n};\n\nconst ANIMATION_DURATION = 500;\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active-slide';\n\nconst ELEMENT_CAROUSEL_DECLARATION = 'carousel-image-slider-container';\nconst ELEMENT_CAROUSEL_CONTAINER = 'carousel-image-slider';\nconst ELEMENT_CAROUSEL_SLIDE = 'carousel-image-slide';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-slider-button';\n\nconst OVERWRITE_ACTIVE_SLIDE = `.${ELEMENT_CAROUSEL_SLIDE}[${ATTRIBUTE_ACTIVE_SLIDE}]`;\n\n// prettier-ignore\nconst SliderButtons = `\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} {\n    background-color: ${token.color.white};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 40px;\n    width: 40px;\n    position: absolute;\n    top: 50%;\n    z-index: 99;\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type {\n    left: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type svg {\n    transform: rotate(180deg);\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:last-of-type {\n    right: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} svg {\n    fill: ${token.color.black};\n    width: 16px;\n  }\n`\n\n// prettier-ignore\nconst SlideStyles = `\n  .${ELEMENT_CAROUSEL_SLIDE} {\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    left: 100%;\n    display: none;\n    transition: transform ${ANIMATION_DURATION}ms ease-in-out;\n  }\n\n  ${OVERWRITE_ACTIVE_SLIDE} {\n    z-index: 99;\n    left: 0;\n    display: block;\n    transform: translateX(0);\n  }\n`\n\n// prettier-ignore\nconst SliderStyles = `\n  .${ELEMENT_CAROUSEL_CONTAINER} {\n    position: relative;\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_ELEMENT = `\n  .${ELEMENT_CAROUSEL_DECLARATION} {\n    overflow: hidden;\n  }\n\n  ${SliderStyles}\n  ${SlideStyles}\n  ${SliderButtons}\n`;\n\nconst CreateButton = ({\n  EventSlide,\n  isRight = true,\n}: {\n  EventSlide: ({ forward }: { forward?: boolean }) => void;\n  isRight?: boolean;\n}) => {\n  const button = document.createElement('button');\n  button.setAttribute('type', 'button');\n  button.classList.add(ELEMENT_CAROUSEL_SLIDER_BUTTON);\n  button.innerHTML = iconArrowRight;\n\n  if (!isRight) {\n    button.setAttribute('aria-label', 'Previous');\n  } else {\n    button.setAttribute('aria-label', 'Next');\n  }\n\n  button.addEventListener('click', (event) => {\n    event.stopPropagation();\n    if (isRight) EventSlide({});\n    if (!isRight) EventSlide({ forward: false });\n    button.disabled = true;\n\n    setTimeout(() => {\n      button.disabled = false;\n    }, ANIMATION_DURATION + 100);\n  });\n\n  return button;\n};\n\nconst SetCarouselSize = ({\n  slider,\n  activeSlide,\n  transition = false,\n  maxHeight,\n}: {\n  slider: HTMLElement;\n  activeSlide: HTMLElement;\n  transition?: boolean;\n  maxHeight?: number;\n}) => {\n  const windowHeight = window.innerHeight - 48;\n  const children = Array.from(activeSlide.children) as HTMLDivElement[];\n  const buttons = Array.from(\n    slider.querySelectorAll(`.${ELEMENT_CAROUSEL_SLIDER_BUTTON}`),\n  ) as HTMLButtonElement[];\n  const img = activeSlide.querySelector('img') as HTMLImageElement;\n  const maxWindowHeight = maxHeight\n    ? maxHeight > windowHeight\n      ? windowHeight\n      : maxHeight\n    : windowHeight;\n  const imageSize = getResponsiveImageSize({\n    image: img,\n    parentNode: slider,\n    maxWindowHeight,\n  });\n  const imageContainer = children.find((child) =>\n    child.contains(img),\n  ) as HTMLElement;\n  let size = imageSize;\n\n  imageContainer.style.height = `${imageSize}px`;\n\n  if (children.length > 1) {\n    size = children.reduce((acc, currentElement) => {\n      return currentElement.offsetHeight + acc;\n    }, 0);\n  }\n\n  buttons.forEach((button) => (button.style.top = `${imageSize / 2}px`));\n\n  if (transition) {\n    slider.style.transition = `height ${ANIMATION_DURATION}ms ease-in-out`;\n  } else {\n    slider.style.transition = `none`;\n  }\n  slider.style.height = `${size}px`;\n};\n\nconst SlideActiveSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const transformDirection = isRight ? 'translateX(-100%)' : 'translateX(100%)';\n  slide.style.transform = `${transformDirection}`;\n\n  setTimeout(() => {\n    slide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.style.transform = 'none';\n  }, ANIMATION_DURATION + 100);\n};\n\nconst SlideUpcomingSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const amount = '90';\n  const transformDirection = isRight\n    ? `translateX(-${amount}%)`\n    : `translateX(${amount}%)`;\n  const startingPosition = isRight ? `${amount}%` : `-${amount}%`;\n\n  slide.style.zIndex = '9';\n  slide.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;\n  slide.style.display = 'block';\n  slide.style.left = `${startingPosition}`;\n\n  setTimeout(() => {\n    slide.style.transform = `${transformDirection}`;\n  }, 1);\n\n  setTimeout(() => {\n    slide.style.transition = 'none';\n    slide.style.left = '0';\n    slide.style.transform = 'none';\n    slide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.removeAttribute('style');\n  }, ANIMATION_DURATION + 100);\n};\n\nexport default (props: TypeCarouselImageProps) =>\n  (() => {\n    const { slides, callback, maxHeight } = props;\n    const container = document.createElement('div');\n    const slider = document.createElement('div');\n    let activeIndex = 0;\n    let styles = STYLES_CAROUSEL_IMAGE_ELEMENT;\n\n    const EventSlide = ({ forward = true }: { forward?: boolean }) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: forward });\n\n      if (forward) {\n        activeIndex = activeIndex + 1;\n        if (activeIndex >= slides.length) activeIndex = 0;\n      } else {\n        activeIndex = activeIndex - 1;\n        if (activeIndex < 0) activeIndex = slides.length - 1;\n      }\n\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: forward });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventMoveTo = (index: number) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: true });\n      activeIndex = index;\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: true });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventSlideLeft = () => EventSlide({ forward: false });\n    const EventSlideRight = () => EventSlide({ forward: true });\n\n    const EventSwipe = () => {\n      const swipes = (isrightswipe: Boolean) => {\n        if (!isrightswipe) {\n          EventSlide({ forward: true });\n        } else {\n          EventSlide({ forward: false });\n        }\n      };\n\n      setupSwipeDetection({\n        container: slider,\n        callback: swipes,\n      });\n    };\n\n    const EventResize = () => {\n      SetCarouselSize({ slider, activeSlide: slides[activeIndex], maxHeight });\n    };\n\n    const Load = () => {\n      const setSize = () => {\n        const activeSlide = slides[activeIndex];\n        SetCarouselSize({ slider, activeSlide, maxHeight });\n        activeSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n      };\n      setTimeout(setSize, 100);\n      setTimeout(setSize, 300);\n    };\n\n    slider.classList.add(ELEMENT_CAROUSEL_CONTAINER);\n    slides.forEach((slide) => slide.classList.add(ELEMENT_CAROUSEL_SLIDE));\n    slider.append(...slides);\n    slider.appendChild(CreateButton({ EventSlide, isRight: false }));\n    slider.appendChild(\n      CreateButton({\n        EventSlide,\n        isRight: true,\n      }),\n    );\n\n    container.classList.add(ELEMENT_CAROUSEL_DECLARATION);\n    container.appendChild(slider);\n\n    window.addEventListener('resize', debounce(EventResize, 10));\n    EventSwipe();\n\n    return {\n      element: container,\n      styles,\n      events: {\n        Load,\n        EventMoveTo,\n        EventResize,\n        EventSlideLeft,\n        EventSlideRight,\n      },\n    };\n  })();\n"],"names":["token","iconArrowRight","getResponsiveImageSize","setupSwipeDetection","debounce"],"mappings":"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"}

package/dist/composite/carousel/elements/image.mjs

@@ -1,11 +1,8 @@
-import { token } from "@universityofmaryland/web-styles-library";
-import { FORWARD_ARROW } from "../../../utilities/assets/icons.mjs";
-import { CreateEventSwipe } from "../../../utilities/js-events/index.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 { getResponsiveImageSize } from "../../../utilities/theme/assets.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import { arrow_right } from "@universityofmaryland/web-icons-library/arrows";
+import { debounce } from "@universityofmaryland/web-utilities-library/performance";
+import { getResponsiveImageSize } from "@universityofmaryland/web-utilities-library/media";
+import { setupSwipeDetection } from "@universityofmaryland/web-utilities-library/events";
 const ANIMATION_DURATION = 500;
 const ATTRIBUTE_ACTIVE_SLIDE = "data-active-slide";
 const ELEMENT_CAROUSEL_DECLARATION = "carousel-image-slider-container";
@@ -81,7 +78,7 @@ const CreateButton = ({
   const button = document.createElement("button");
   button.setAttribute("type", "button");
   button.classList.add(ELEMENT_CAROUSEL_SLIDER_BUTTON);
-  button.innerHTML = FORWARD_ARROW;
+  button.innerHTML = arrow_right;
   if (!isRight) {
     button.setAttribute("aria-label", "Previous");
   } else {
@@ -217,7 +214,7 @@ const image = (props) => (() => {
         EventSlide({ forward: false });
       }
     };
-    CreateEventSwipe({
+    setupSwipeDetection({
       container: slider,
       callback: swipes
     });
@@ -246,10 +243,7 @@ const image = (props) => (() => {
   );
   container.classList.add(ELEMENT_CAROUSEL_DECLARATION);
   container.appendChild(slider);
-  window.addEventListener(
-    "resize",
-    debounce(EventResize, 10)
-  );
+  window.addEventListener("resize", debounce(EventResize, 10));
   EventSwipe();
   return {
     element: container,

package/dist/composite/carousel/elements/image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"image.mjs","sources":["../../../../source/composite/carousel/elements/image.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\n\ntype TypeCarouselImageProps = {\n  slides: HTMLElement[];\n  callback?: (index: number) => void;\n  maxHeight?: number;\n};\n\nconst ANIMATION_DURATION = 500;\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active-slide';\n\nconst ELEMENT_CAROUSEL_DECLARATION = 'carousel-image-slider-container';\nconst ELEMENT_CAROUSEL_CONTAINER = 'carousel-image-slider';\nconst ELEMENT_CAROUSEL_SLIDE = 'carousel-image-slide';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-slider-button';\n\nconst OVERWRITE_ACTIVE_SLIDE = `.${ELEMENT_CAROUSEL_SLIDE}[${ATTRIBUTE_ACTIVE_SLIDE}]`;\n\n// prettier-ignore\nconst SliderButtons = `\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} {\n    background-color: ${token.color.white};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 40px;\n    width: 40px;\n    position: absolute;\n    top: 50%;\n    z-index: 99;\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type {\n    left: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type svg {\n    transform: rotate(180deg);\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:last-of-type {\n    right: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} svg {\n    fill: ${token.color.black};\n    width: 16px;\n  }\n`\n\n// prettier-ignore\nconst SlideStyles = `\n  .${ELEMENT_CAROUSEL_SLIDE} {\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    left: 100%;\n    display: none;\n    transition: transform ${ANIMATION_DURATION}ms ease-in-out;\n  }\n\n  ${OVERWRITE_ACTIVE_SLIDE} {\n    z-index: 99;\n    left: 0;\n    display: block;\n    transform: translateX(0);\n  }\n`\n\n// prettier-ignore\nconst SliderStyles = `\n  .${ELEMENT_CAROUSEL_CONTAINER} {\n    position: relative;\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_ELEMENT = `\n  .${ELEMENT_CAROUSEL_DECLARATION} {\n    overflow: hidden;\n  }\n\n  ${SliderStyles}\n  ${SlideStyles}\n  ${SliderButtons}\n`;\n\nconst CreateButton = ({\n  EventSlide,\n  isRight = true,\n}: {\n  EventSlide: ({ forward }: { forward?: boolean }) => void;\n  isRight?: boolean;\n}) => {\n  const button = document.createElement('button');\n  button.setAttribute('type', 'button');\n  button.classList.add(ELEMENT_CAROUSEL_SLIDER_BUTTON);\n  button.innerHTML = Utility.asset.icon.FORWARD_ARROW;\n\n  if (!isRight) {\n    button.setAttribute('aria-label', 'Previous');\n  } else {\n    button.setAttribute('aria-label', 'Next');\n  }\n\n  button.addEventListener('click', (event) => {\n    event.stopPropagation();\n    if (isRight) EventSlide({});\n    if (!isRight) EventSlide({ forward: false });\n    button.disabled = true;\n\n    setTimeout(() => {\n      button.disabled = false;\n    }, ANIMATION_DURATION + 100);\n  });\n\n  return button;\n};\n\nconst SetCarouselSize = ({\n  slider,\n  activeSlide,\n  transition = false,\n  maxHeight,\n}: {\n  slider: HTMLElement;\n  activeSlide: HTMLElement;\n  transition?: boolean;\n  maxHeight?: number;\n}) => {\n  const windowHeight = window.innerHeight - 48;\n  const children = Array.from(activeSlide.children) as HTMLDivElement[];\n  const buttons = Array.from(\n    slider.querySelectorAll(`.${ELEMENT_CAROUSEL_SLIDER_BUTTON}`),\n  ) as HTMLButtonElement[];\n  const img = activeSlide.querySelector('img') as HTMLImageElement;\n  const maxWindowHeight = maxHeight\n    ? maxHeight > windowHeight\n      ? windowHeight\n      : maxHeight\n    : windowHeight;\n  const imageSize = Utility.theme.assets.getResponsiveImageSize({\n    image: img,\n    parentNode: slider,\n    maxWindowHeight,\n  });\n  const imageContainer = children.find((child) =>\n    child.contains(img),\n  ) as HTMLElement;\n  let size = imageSize;\n\n  imageContainer.style.height = `${imageSize}px`;\n\n  if (children.length > 1) {\n    size = children.reduce((acc, currentElement) => {\n      return currentElement.offsetHeight + acc;\n    }, 0);\n  }\n\n  buttons.forEach((button) => (button.style.top = `${imageSize / 2}px`));\n\n  if (transition) {\n    slider.style.transition = `height ${ANIMATION_DURATION}ms ease-in-out`;\n  } else {\n    slider.style.transition = `none`;\n  }\n  slider.style.height = `${size}px`;\n};\n\nconst SlideActiveSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const transformDirection = isRight ? 'translateX(-100%)' : 'translateX(100%)';\n  slide.style.transform = `${transformDirection}`;\n\n  setTimeout(() => {\n    slide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.style.transform = 'none';\n  }, ANIMATION_DURATION + 100);\n};\n\nconst SlideUpcomingSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const amount = '90';\n  const transformDirection = isRight\n    ? `translateX(-${amount}%)`\n    : `translateX(${amount}%)`;\n  const startingPosition = isRight ? `${amount}%` : `-${amount}%`;\n\n  slide.style.zIndex = '9';\n  slide.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;\n  slide.style.display = 'block';\n  slide.style.left = `${startingPosition}`;\n\n  setTimeout(() => {\n    slide.style.transform = `${transformDirection}`;\n  }, 1);\n\n  setTimeout(() => {\n    slide.style.transition = 'none';\n    slide.style.left = '0';\n    slide.style.transform = 'none';\n    slide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.removeAttribute('style');\n  }, ANIMATION_DURATION + 100);\n};\n\nexport default (props: TypeCarouselImageProps) =>\n  (() => {\n    const { slides, callback, maxHeight } = props;\n    const container = document.createElement('div');\n    const slider = document.createElement('div');\n    let activeIndex = 0;\n    let styles = STYLES_CAROUSEL_IMAGE_ELEMENT;\n\n    const EventSlide = ({ forward = true }: { forward?: boolean }) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: forward });\n\n      if (forward) {\n        activeIndex = activeIndex + 1;\n        if (activeIndex >= slides.length) activeIndex = 0;\n      } else {\n        activeIndex = activeIndex - 1;\n        if (activeIndex < 0) activeIndex = slides.length - 1;\n      }\n\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: forward });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventMoveTo = (index: number) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: true });\n      activeIndex = index;\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: true });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventSlideLeft = () => EventSlide({ forward: false });\n    const EventSlideRight = () => EventSlide({ forward: true });\n\n    const EventSwipe = () => {\n      const swipes = (isrightswipe: Boolean) => {\n        if (!isrightswipe) {\n          EventSlide({ forward: true });\n        } else {\n          EventSlide({ forward: false });\n        }\n      };\n\n      Utility.javascriptEvents.CreateEventSwipe({\n        container: slider,\n        callback: swipes,\n      });\n    };\n\n    const EventResize = () => {\n      SetCarouselSize({ slider, activeSlide: slides[activeIndex], maxHeight });\n    };\n\n    const Load = () => {\n      const setSize = () => {\n        const activeSlide = slides[activeIndex];\n        SetCarouselSize({ slider, activeSlide, maxHeight });\n        activeSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n      };\n      setTimeout(setSize, 100);\n      setTimeout(setSize, 300);\n    };\n\n    slider.classList.add(ELEMENT_CAROUSEL_CONTAINER);\n    slides.forEach((slide) => slide.classList.add(ELEMENT_CAROUSEL_SLIDE));\n    slider.append(...slides);\n    slider.appendChild(CreateButton({ EventSlide, isRight: false }));\n    slider.appendChild(\n      CreateButton({\n        EventSlide,\n        isRight: true,\n      }),\n    );\n\n    container.classList.add(ELEMENT_CAROUSEL_DECLARATION);\n    container.appendChild(slider);\n\n    window.addEventListener(\n      'resize',\n      Utility.performance.debounce(EventResize, 10),\n    );\n    EventSwipe();\n\n    return {\n      element: container,\n      styles,\n      events: {\n        Load,\n        EventMoveTo,\n        EventResize,\n        EventSlideLeft,\n        EventSlideRight,\n      },\n    };\n  })();\n"],"names":["Utility.asset.icon.FORWARD_ARROW","Utility.theme.assets.getResponsiveImageSize","Utility.javascriptEvents.CreateEventSwipe","Utility.performance.debounce"],"mappings":"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"}
+{"version":3,"file":"image.mjs","sources":["../../../../source/composite/carousel/elements/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { arrow_right as iconArrowRight } from '@universityofmaryland/web-icons-library/arrows';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { getResponsiveImageSize } from '@universityofmaryland/web-utilities-library/media';\nimport { setupSwipeDetection } from '@universityofmaryland/web-utilities-library/events';\n\ntype TypeCarouselImageProps = {\n  slides: HTMLElement[];\n  callback?: (index: number) => void;\n  maxHeight?: number;\n};\n\nconst ANIMATION_DURATION = 500;\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active-slide';\n\nconst ELEMENT_CAROUSEL_DECLARATION = 'carousel-image-slider-container';\nconst ELEMENT_CAROUSEL_CONTAINER = 'carousel-image-slider';\nconst ELEMENT_CAROUSEL_SLIDE = 'carousel-image-slide';\nconst ELEMENT_CAROUSEL_SLIDER_BUTTON = 'carousel-slider-button';\n\nconst OVERWRITE_ACTIVE_SLIDE = `.${ELEMENT_CAROUSEL_SLIDE}[${ATTRIBUTE_ACTIVE_SLIDE}]`;\n\n// prettier-ignore\nconst SliderButtons = `\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} {\n    background-color: ${token.color.white};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 40px;\n    width: 40px;\n    position: absolute;\n    top: 50%;\n    z-index: 99;\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type {\n    left: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type svg {\n    transform: rotate(180deg);\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:last-of-type {\n    right: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} svg {\n    fill: ${token.color.black};\n    width: 16px;\n  }\n`\n\n// prettier-ignore\nconst SlideStyles = `\n  .${ELEMENT_CAROUSEL_SLIDE} {\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    left: 100%;\n    display: none;\n    transition: transform ${ANIMATION_DURATION}ms ease-in-out;\n  }\n\n  ${OVERWRITE_ACTIVE_SLIDE} {\n    z-index: 99;\n    left: 0;\n    display: block;\n    transform: translateX(0);\n  }\n`\n\n// prettier-ignore\nconst SliderStyles = `\n  .${ELEMENT_CAROUSEL_CONTAINER} {\n    position: relative;\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_IMAGE_ELEMENT = `\n  .${ELEMENT_CAROUSEL_DECLARATION} {\n    overflow: hidden;\n  }\n\n  ${SliderStyles}\n  ${SlideStyles}\n  ${SliderButtons}\n`;\n\nconst CreateButton = ({\n  EventSlide,\n  isRight = true,\n}: {\n  EventSlide: ({ forward }: { forward?: boolean }) => void;\n  isRight?: boolean;\n}) => {\n  const button = document.createElement('button');\n  button.setAttribute('type', 'button');\n  button.classList.add(ELEMENT_CAROUSEL_SLIDER_BUTTON);\n  button.innerHTML = iconArrowRight;\n\n  if (!isRight) {\n    button.setAttribute('aria-label', 'Previous');\n  } else {\n    button.setAttribute('aria-label', 'Next');\n  }\n\n  button.addEventListener('click', (event) => {\n    event.stopPropagation();\n    if (isRight) EventSlide({});\n    if (!isRight) EventSlide({ forward: false });\n    button.disabled = true;\n\n    setTimeout(() => {\n      button.disabled = false;\n    }, ANIMATION_DURATION + 100);\n  });\n\n  return button;\n};\n\nconst SetCarouselSize = ({\n  slider,\n  activeSlide,\n  transition = false,\n  maxHeight,\n}: {\n  slider: HTMLElement;\n  activeSlide: HTMLElement;\n  transition?: boolean;\n  maxHeight?: number;\n}) => {\n  const windowHeight = window.innerHeight - 48;\n  const children = Array.from(activeSlide.children) as HTMLDivElement[];\n  const buttons = Array.from(\n    slider.querySelectorAll(`.${ELEMENT_CAROUSEL_SLIDER_BUTTON}`),\n  ) as HTMLButtonElement[];\n  const img = activeSlide.querySelector('img') as HTMLImageElement;\n  const maxWindowHeight = maxHeight\n    ? maxHeight > windowHeight\n      ? windowHeight\n      : maxHeight\n    : windowHeight;\n  const imageSize = getResponsiveImageSize({\n    image: img,\n    parentNode: slider,\n    maxWindowHeight,\n  });\n  const imageContainer = children.find((child) =>\n    child.contains(img),\n  ) as HTMLElement;\n  let size = imageSize;\n\n  imageContainer.style.height = `${imageSize}px`;\n\n  if (children.length > 1) {\n    size = children.reduce((acc, currentElement) => {\n      return currentElement.offsetHeight + acc;\n    }, 0);\n  }\n\n  buttons.forEach((button) => (button.style.top = `${imageSize / 2}px`));\n\n  if (transition) {\n    slider.style.transition = `height ${ANIMATION_DURATION}ms ease-in-out`;\n  } else {\n    slider.style.transition = `none`;\n  }\n  slider.style.height = `${size}px`;\n};\n\nconst SlideActiveSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const transformDirection = isRight ? 'translateX(-100%)' : 'translateX(100%)';\n  slide.style.transform = `${transformDirection}`;\n\n  setTimeout(() => {\n    slide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.style.transform = 'none';\n  }, ANIMATION_DURATION + 100);\n};\n\nconst SlideUpcomingSlide = ({\n  slide,\n  isRight = true,\n}: {\n  slide: HTMLElement;\n  isRight: boolean;\n}) => {\n  const amount = '90';\n  const transformDirection = isRight\n    ? `translateX(-${amount}%)`\n    : `translateX(${amount}%)`;\n  const startingPosition = isRight ? `${amount}%` : `-${amount}%`;\n\n  slide.style.zIndex = '9';\n  slide.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;\n  slide.style.display = 'block';\n  slide.style.left = `${startingPosition}`;\n\n  setTimeout(() => {\n    slide.style.transform = `${transformDirection}`;\n  }, 1);\n\n  setTimeout(() => {\n    slide.style.transition = 'none';\n    slide.style.left = '0';\n    slide.style.transform = 'none';\n    slide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n  }, ANIMATION_DURATION);\n\n  setTimeout(() => {\n    slide.removeAttribute('style');\n  }, ANIMATION_DURATION + 100);\n};\n\nexport default (props: TypeCarouselImageProps) =>\n  (() => {\n    const { slides, callback, maxHeight } = props;\n    const container = document.createElement('div');\n    const slider = document.createElement('div');\n    let activeIndex = 0;\n    let styles = STYLES_CAROUSEL_IMAGE_ELEMENT;\n\n    const EventSlide = ({ forward = true }: { forward?: boolean }) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: forward });\n\n      if (forward) {\n        activeIndex = activeIndex + 1;\n        if (activeIndex >= slides.length) activeIndex = 0;\n      } else {\n        activeIndex = activeIndex - 1;\n        if (activeIndex < 0) activeIndex = slides.length - 1;\n      }\n\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: forward });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventMoveTo = (index: number) => {\n      SlideActiveSlide({ slide: slides[activeIndex], isRight: true });\n      activeIndex = index;\n      SlideUpcomingSlide({ slide: slides[activeIndex], isRight: true });\n      SetCarouselSize({\n        slider,\n        activeSlide: slides[activeIndex],\n        transition: true,\n        maxHeight,\n      });\n      if (callback) callback(activeIndex);\n    };\n\n    const EventSlideLeft = () => EventSlide({ forward: false });\n    const EventSlideRight = () => EventSlide({ forward: true });\n\n    const EventSwipe = () => {\n      const swipes = (isrightswipe: Boolean) => {\n        if (!isrightswipe) {\n          EventSlide({ forward: true });\n        } else {\n          EventSlide({ forward: false });\n        }\n      };\n\n      setupSwipeDetection({\n        container: slider,\n        callback: swipes,\n      });\n    };\n\n    const EventResize = () => {\n      SetCarouselSize({ slider, activeSlide: slides[activeIndex], maxHeight });\n    };\n\n    const Load = () => {\n      const setSize = () => {\n        const activeSlide = slides[activeIndex];\n        SetCarouselSize({ slider, activeSlide, maxHeight });\n        activeSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n      };\n      setTimeout(setSize, 100);\n      setTimeout(setSize, 300);\n    };\n\n    slider.classList.add(ELEMENT_CAROUSEL_CONTAINER);\n    slides.forEach((slide) => slide.classList.add(ELEMENT_CAROUSEL_SLIDE));\n    slider.append(...slides);\n    slider.appendChild(CreateButton({ EventSlide, isRight: false }));\n    slider.appendChild(\n      CreateButton({\n        EventSlide,\n        isRight: true,\n      }),\n    );\n\n    container.classList.add(ELEMENT_CAROUSEL_DECLARATION);\n    container.appendChild(slider);\n\n    window.addEventListener('resize', debounce(EventResize, 10));\n    EventSwipe();\n\n    return {\n      element: container,\n      styles,\n      events: {\n        Load,\n        EventMoveTo,\n        EventResize,\n        EventSlideLeft,\n        EventSlideRight,\n      },\n    };\n  })();\n"],"names":["iconArrowRight"],"mappings":"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"}

package/dist/composite/carousel/elements/overlay.js

@@ -1,16 +1,33 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
+const token = require("@universityofmaryland/web-styles-library/token");
 const image$1 = require("../../../layout/image.js");
 require("./blocks.js");
 const fullScreen = require("./full-screen.js");
 const image = require("./image.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const ELEMENT_CAROUSEL_OVERLAY_COINTAINER = "carousel-overlay-container";
 const OverlayImageContainerStyles = `
   .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} {
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: ${Styles.token.color.gray.dark};
+    background-color: ${token__namespace.color.gray.dark};
   }
 
   .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} img {

package/dist/composite/carousel/elements/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport { Image as LayoutImage } from 'layout';\nimport * as carouselElements from '../elements';\n\nconst ELEMENT_CAROUSEL_OVERLAY_COINTAINER = 'carousel-overlay-container';\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ${token.color.gray.dark};\n  }\n\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_OVERLAY_ELEMENT = `\n  ${LayoutImage.Styles}\n  ${OverlayImageContainerStyles}\n`;\n\nconst CreateOverlaySlide = ({ images }: { images: HTMLImageElement[] }) =>\n  images.map((image) => {\n    const slide = document.createElement('div');\n    const imageContainer = document.createElement('div');\n    const imageBlock = LayoutImage.CreateElement({\n      image,\n      showCaption: true,\n    });\n\n    imageContainer.classList.add(ELEMENT_CAROUSEL_OVERLAY_COINTAINER);\n    imageContainer.appendChild(imageBlock);\n\n    slide.appendChild(imageContainer);\n\n    return slide;\n  });\n\nexport default ({ images }: { images: HTMLImageElement[] }) =>\n  (() => {\n    let styles = STYLES_CAROUSEL_OVERLAY_ELEMENT;\n\n    const setFullScreen = (index: number) => {\n      let canMove = true;\n\n      const checkKeyEvents = (event: KeyboardEvent) => {\n        if (!canMove) return;\n        canMove = false;\n        if (event.key == 'ArrowLeft') overlayCarousel.events.EventSlideLeft();\n        if (event.key == 'ArrowRight') overlayCarousel.events.EventSlideRight();\n\n        setTimeout(() => {\n          canMove = true;\n        }, 700);\n      };\n\n      overlayCarousel.events.EventMoveTo(index);\n      setTimeout(() => fixedFullScreen.events.show(), 100);\n\n      setTimeout(() => {\n        overlayCarousel.events.EventResize();\n      }, 100);\n\n      isFullScreenEvents = window.addEventListener('keyup', checkKeyEvents);\n    };\n\n    const overlaySlides = CreateOverlaySlide({ images });\n\n    const overlayCarousel = carouselElements.image({\n      slides: overlaySlides,\n      maxHeight: (window.innerHeight / 10) * 8,\n    });\n\n    styles += overlayCarousel.styles;\n\n    const fixedFullScreen = carouselElements.fullScreen({\n      content: overlayCarousel.element,\n      callback: () => {\n        if (isFullScreenEvents)\n          window.removeEventListener('keyup', isFullScreenEvents);\n      },\n    });\n\n    styles += fixedFullScreen.styles;\n\n    let isFullScreenEvents: any = null;\n\n    return {\n      element: fixedFullScreen.element,\n      styles,\n      events: {\n        setFullScreen,\n      },\n    };\n  })();\n"],"names":["token","LayoutImage","image","carouselElements.image","carouselElements.fullScreen"],"mappings":";;;;;;AAIA,MAAM,sCAAsC;AAG5C,MAAM,8BAA8B;AAAA,KAC/B,mCAAmC;AAAA;AAAA;AAAA;AAAA,wBAIhBA,aAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,KAGxC,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,kCAAkC;AAAA,IACpCC,QAAY,MAAM;AAAA,IAClB,2BAA2B;AAAA;AAG/B,MAAM,qBAAqB,CAAC,EAAE,OAAA,MAC5B,OAAO,IAAI,CAACC,WAAU;AACpB,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,aAAaD,QAAY,cAAc;AAAA,IAC3C,OAAAC;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,iBAAe,UAAU,IAAI,mCAAmC;AAChE,iBAAe,YAAY,UAAU;AAErC,QAAM,YAAY,cAAc;AAEhC,SAAO;AACT,CAAC;AAEH,MAAA,UAAe,CAAC,EAAE,OAAA,OACf,MAAM;AACL,MAAI,SAAS;AAEb,QAAM,gBAAgB,CAAC,UAAkB;AACvC,QAAI,UAAU;AAEd,UAAM,iBAAiB,CAAC,UAAyB;AAC/C,UAAI,CAAC,QAAS;AACd,gBAAU;AACV,UAAI,MAAM,OAAO,YAAa,iBAAgB,OAAO,eAAA;AACrD,UAAI,MAAM,OAAO,aAAc,iBAAgB,OAAO,gBAAA;AAEtD,iBAAW,MAAM;AACf,kBAAU;AAAA,MACZ,GAAG,GAAG;AAAA,IACR;AAEA,oBAAgB,OAAO,YAAY,KAAK;AACxC,eAAW,MAAM,gBAAgB,OAAO,KAAA,GAAQ,GAAG;AAEnD,eAAW,MAAM;AACf,sBAAgB,OAAO,YAAA;AAAA,IACzB,GAAG,GAAG;AAEN,yBAAqB,OAAO,iBAAiB,SAAS,cAAc;AAAA,EACtE;AAEA,QAAM,gBAAgB,mBAAmB,EAAE,QAAQ;AAEnD,QAAM,kBAAkBC,MAAuB;AAAA,IAC7C,QAAQ;AAAA,IACR,WAAY,OAAO,cAAc,KAAM;AAAA,EAAA,CACxC;AAED,YAAU,gBAAgB;AAE1B,QAAM,kBAAkBC,WAA4B;AAAA,IAClD,SAAS,gBAAgB;AAAA,IACzB,UAAU,MAAM;AACd,UAAI;AACF,eAAO,oBAAoB,SAAS,kBAAkB;AAAA,IAC1D;AAAA,EAAA,CACD;AAED,YAAU,gBAAgB;AAE1B,MAAI,qBAA0B;AAE9B,SAAO;AAAA,IACL,SAAS,gBAAgB;AAAA,IACzB;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;;"}
+{"version":3,"file":"overlay.js","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { Image as LayoutImage } from 'layout';\nimport * as carouselElements from '../elements';\n\nconst ELEMENT_CAROUSEL_OVERLAY_COINTAINER = 'carousel-overlay-container';\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ${token.color.gray.dark};\n  }\n\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_OVERLAY_ELEMENT = `\n  ${LayoutImage.Styles}\n  ${OverlayImageContainerStyles}\n`;\n\nconst CreateOverlaySlide = ({ images }: { images: HTMLImageElement[] }) =>\n  images.map((image) => {\n    const slide = document.createElement('div');\n    const imageContainer = document.createElement('div');\n    const imageBlock = LayoutImage.CreateElement({\n      image,\n      showCaption: true,\n    });\n\n    imageContainer.classList.add(ELEMENT_CAROUSEL_OVERLAY_COINTAINER);\n    imageContainer.appendChild(imageBlock);\n\n    slide.appendChild(imageContainer);\n\n    return slide;\n  });\n\nexport default ({ images }: { images: HTMLImageElement[] }) =>\n  (() => {\n    let styles = STYLES_CAROUSEL_OVERLAY_ELEMENT;\n\n    const setFullScreen = (index: number) => {\n      let canMove = true;\n\n      const checkKeyEvents = (event: KeyboardEvent) => {\n        if (!canMove) return;\n        canMove = false;\n        if (event.key == 'ArrowLeft') overlayCarousel.events.EventSlideLeft();\n        if (event.key == 'ArrowRight') overlayCarousel.events.EventSlideRight();\n\n        setTimeout(() => {\n          canMove = true;\n        }, 700);\n      };\n\n      overlayCarousel.events.EventMoveTo(index);\n      setTimeout(() => fixedFullScreen.events.show(), 100);\n\n      setTimeout(() => {\n        overlayCarousel.events.EventResize();\n      }, 100);\n\n      isFullScreenEvents = window.addEventListener('keyup', checkKeyEvents);\n    };\n\n    const overlaySlides = CreateOverlaySlide({ images });\n\n    const overlayCarousel = carouselElements.image({\n      slides: overlaySlides,\n      maxHeight: (window.innerHeight / 10) * 8,\n    });\n\n    styles += overlayCarousel.styles;\n\n    const fixedFullScreen = carouselElements.fullScreen({\n      content: overlayCarousel.element,\n      callback: () => {\n        if (isFullScreenEvents)\n          window.removeEventListener('keyup', isFullScreenEvents);\n      },\n    });\n\n    styles += fixedFullScreen.styles;\n\n    let isFullScreenEvents: any = null;\n\n    return {\n      element: fixedFullScreen.element,\n      styles,\n      events: {\n        setFullScreen,\n      },\n    };\n  })();\n"],"names":["token","LayoutImage","image","carouselElements.image","carouselElements.fullScreen"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,sCAAsC;AAG5C,MAAM,8BAA8B;AAAA,KAC/B,mCAAmC;AAAA;AAAA;AAAA;AAAA,wBAIhBA,iBAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,KAGxC,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,kCAAkC;AAAA,IACpCC,QAAY,MAAM;AAAA,IAClB,2BAA2B;AAAA;AAG/B,MAAM,qBAAqB,CAAC,EAAE,OAAA,MAC5B,OAAO,IAAI,CAACC,WAAU;AACpB,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,aAAaD,QAAY,cAAc;AAAA,IAC3C,OAAAC;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,iBAAe,UAAU,IAAI,mCAAmC;AAChE,iBAAe,YAAY,UAAU;AAErC,QAAM,YAAY,cAAc;AAEhC,SAAO;AACT,CAAC;AAEH,MAAA,UAAe,CAAC,EAAE,OAAA,OACf,MAAM;AACL,MAAI,SAAS;AAEb,QAAM,gBAAgB,CAAC,UAAkB;AACvC,QAAI,UAAU;AAEd,UAAM,iBAAiB,CAAC,UAAyB;AAC/C,UAAI,CAAC,QAAS;AACd,gBAAU;AACV,UAAI,MAAM,OAAO,YAAa,iBAAgB,OAAO,eAAA;AACrD,UAAI,MAAM,OAAO,aAAc,iBAAgB,OAAO,gBAAA;AAEtD,iBAAW,MAAM;AACf,kBAAU;AAAA,MACZ,GAAG,GAAG;AAAA,IACR;AAEA,oBAAgB,OAAO,YAAY,KAAK;AACxC,eAAW,MAAM,gBAAgB,OAAO,KAAA,GAAQ,GAAG;AAEnD,eAAW,MAAM;AACf,sBAAgB,OAAO,YAAA;AAAA,IACzB,GAAG,GAAG;AAEN,yBAAqB,OAAO,iBAAiB,SAAS,cAAc;AAAA,EACtE;AAEA,QAAM,gBAAgB,mBAAmB,EAAE,QAAQ;AAEnD,QAAM,kBAAkBC,MAAuB;AAAA,IAC7C,QAAQ;AAAA,IACR,WAAY,OAAO,cAAc,KAAM;AAAA,EAAA,CACxC;AAED,YAAU,gBAAgB;AAE1B,QAAM,kBAAkBC,WAA4B;AAAA,IAClD,SAAS,gBAAgB;AAAA,IACzB,UAAU,MAAM;AACd,UAAI;AACF,eAAO,oBAAoB,SAAS,kBAAkB;AAAA,IAC1D;AAAA,EAAA,CACD;AAED,YAAU,gBAAgB;AAE1B,MAAI,qBAA0B;AAE9B,SAAO;AAAA,IACL,SAAS,gBAAgB;AAAA,IACzB;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;;"}

package/dist/composite/carousel/elements/overlay.mjs

@@ -1,4 +1,4 @@
-import { token } from "@universityofmaryland/web-styles-library";
+import * as token from "@universityofmaryland/web-styles-library/token";
 import LayoutImage from "../../../layout/image.mjs";
 import "./blocks.mjs";
 import fullScreen from "./full-screen.mjs";

package/dist/composite/carousel/elements/overlay.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.mjs","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport { Image as LayoutImage } from 'layout';\nimport * as carouselElements from '../elements';\n\nconst ELEMENT_CAROUSEL_OVERLAY_COINTAINER = 'carousel-overlay-container';\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ${token.color.gray.dark};\n  }\n\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_OVERLAY_ELEMENT = `\n  ${LayoutImage.Styles}\n  ${OverlayImageContainerStyles}\n`;\n\nconst CreateOverlaySlide = ({ images }: { images: HTMLImageElement[] }) =>\n  images.map((image) => {\n    const slide = document.createElement('div');\n    const imageContainer = document.createElement('div');\n    const imageBlock = LayoutImage.CreateElement({\n      image,\n      showCaption: true,\n    });\n\n    imageContainer.classList.add(ELEMENT_CAROUSEL_OVERLAY_COINTAINER);\n    imageContainer.appendChild(imageBlock);\n\n    slide.appendChild(imageContainer);\n\n    return slide;\n  });\n\nexport default ({ images }: { images: HTMLImageElement[] }) =>\n  (() => {\n    let styles = STYLES_CAROUSEL_OVERLAY_ELEMENT;\n\n    const setFullScreen = (index: number) => {\n      let canMove = true;\n\n      const checkKeyEvents = (event: KeyboardEvent) => {\n        if (!canMove) return;\n        canMove = false;\n        if (event.key == 'ArrowLeft') overlayCarousel.events.EventSlideLeft();\n        if (event.key == 'ArrowRight') overlayCarousel.events.EventSlideRight();\n\n        setTimeout(() => {\n          canMove = true;\n        }, 700);\n      };\n\n      overlayCarousel.events.EventMoveTo(index);\n      setTimeout(() => fixedFullScreen.events.show(), 100);\n\n      setTimeout(() => {\n        overlayCarousel.events.EventResize();\n      }, 100);\n\n      isFullScreenEvents = window.addEventListener('keyup', checkKeyEvents);\n    };\n\n    const overlaySlides = CreateOverlaySlide({ images });\n\n    const overlayCarousel = carouselElements.image({\n      slides: overlaySlides,\n      maxHeight: (window.innerHeight / 10) * 8,\n    });\n\n    styles += overlayCarousel.styles;\n\n    const fixedFullScreen = carouselElements.fullScreen({\n      content: overlayCarousel.element,\n      callback: () => {\n        if (isFullScreenEvents)\n          window.removeEventListener('keyup', isFullScreenEvents);\n      },\n    });\n\n    styles += fixedFullScreen.styles;\n\n    let isFullScreenEvents: any = null;\n\n    return {\n      element: fixedFullScreen.element,\n      styles,\n      events: {\n        setFullScreen,\n      },\n    };\n  })();\n"],"names":["image","carouselElements.image","carouselElements.fullScreen"],"mappings":";;;;;AAIA,MAAM,sCAAsC;AAG5C,MAAM,8BAA8B;AAAA,KAC/B,mCAAmC;AAAA;AAAA;AAAA;AAAA,wBAIhB,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,KAGxC,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,kCAAkC;AAAA,IACpC,YAAY,MAAM;AAAA,IAClB,2BAA2B;AAAA;AAG/B,MAAM,qBAAqB,CAAC,EAAE,OAAA,MAC5B,OAAO,IAAI,CAACA,WAAU;AACpB,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,aAAa,YAAY,cAAc;AAAA,IAC3C,OAAAA;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,iBAAe,UAAU,IAAI,mCAAmC;AAChE,iBAAe,YAAY,UAAU;AAErC,QAAM,YAAY,cAAc;AAEhC,SAAO;AACT,CAAC;AAEH,MAAA,UAAe,CAAC,EAAE,OAAA,OACf,MAAM;AACL,MAAI,SAAS;AAEb,QAAM,gBAAgB,CAAC,UAAkB;AACvC,QAAI,UAAU;AAEd,UAAM,iBAAiB,CAAC,UAAyB;AAC/C,UAAI,CAAC,QAAS;AACd,gBAAU;AACV,UAAI,MAAM,OAAO,YAAa,iBAAgB,OAAO,eAAA;AACrD,UAAI,MAAM,OAAO,aAAc,iBAAgB,OAAO,gBAAA;AAEtD,iBAAW,MAAM;AACf,kBAAU;AAAA,MACZ,GAAG,GAAG;AAAA,IACR;AAEA,oBAAgB,OAAO,YAAY,KAAK;AACxC,eAAW,MAAM,gBAAgB,OAAO,KAAA,GAAQ,GAAG;AAEnD,eAAW,MAAM;AACf,sBAAgB,OAAO,YAAA;AAAA,IACzB,GAAG,GAAG;AAEN,yBAAqB,OAAO,iBAAiB,SAAS,cAAc;AAAA,EACtE;AAEA,QAAM,gBAAgB,mBAAmB,EAAE,QAAQ;AAEnD,QAAM,kBAAkBC,MAAuB;AAAA,IAC7C,QAAQ;AAAA,IACR,WAAY,OAAO,cAAc,KAAM;AAAA,EAAA,CACxC;AAED,YAAU,gBAAgB;AAE1B,QAAM,kBAAkBC,WAA4B;AAAA,IAClD,SAAS,gBAAgB;AAAA,IACzB,UAAU,MAAM;AACd,UAAI;AACF,eAAO,oBAAoB,SAAS,kBAAkB;AAAA,IAC1D;AAAA,EAAA,CACD;AAED,YAAU,gBAAgB;AAE1B,MAAI,qBAA0B;AAE9B,SAAO;AAAA,IACL,SAAS,gBAAgB;AAAA,IACzB;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;"}
+{"version":3,"file":"overlay.mjs","sources":["../../../../source/composite/carousel/elements/overlay.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { Image as LayoutImage } from 'layout';\nimport * as carouselElements from '../elements';\n\nconst ELEMENT_CAROUSEL_OVERLAY_COINTAINER = 'carousel-overlay-container';\n\n// prettier-ignore\nconst OverlayImageContainerStyles = `\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ${token.color.gray.dark};\n  }\n\n  .${ELEMENT_CAROUSEL_OVERLAY_COINTAINER} img {\n    object-fit: contain;\n    max-height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_OVERLAY_ELEMENT = `\n  ${LayoutImage.Styles}\n  ${OverlayImageContainerStyles}\n`;\n\nconst CreateOverlaySlide = ({ images }: { images: HTMLImageElement[] }) =>\n  images.map((image) => {\n    const slide = document.createElement('div');\n    const imageContainer = document.createElement('div');\n    const imageBlock = LayoutImage.CreateElement({\n      image,\n      showCaption: true,\n    });\n\n    imageContainer.classList.add(ELEMENT_CAROUSEL_OVERLAY_COINTAINER);\n    imageContainer.appendChild(imageBlock);\n\n    slide.appendChild(imageContainer);\n\n    return slide;\n  });\n\nexport default ({ images }: { images: HTMLImageElement[] }) =>\n  (() => {\n    let styles = STYLES_CAROUSEL_OVERLAY_ELEMENT;\n\n    const setFullScreen = (index: number) => {\n      let canMove = true;\n\n      const checkKeyEvents = (event: KeyboardEvent) => {\n        if (!canMove) return;\n        canMove = false;\n        if (event.key == 'ArrowLeft') overlayCarousel.events.EventSlideLeft();\n        if (event.key == 'ArrowRight') overlayCarousel.events.EventSlideRight();\n\n        setTimeout(() => {\n          canMove = true;\n        }, 700);\n      };\n\n      overlayCarousel.events.EventMoveTo(index);\n      setTimeout(() => fixedFullScreen.events.show(), 100);\n\n      setTimeout(() => {\n        overlayCarousel.events.EventResize();\n      }, 100);\n\n      isFullScreenEvents = window.addEventListener('keyup', checkKeyEvents);\n    };\n\n    const overlaySlides = CreateOverlaySlide({ images });\n\n    const overlayCarousel = carouselElements.image({\n      slides: overlaySlides,\n      maxHeight: (window.innerHeight / 10) * 8,\n    });\n\n    styles += overlayCarousel.styles;\n\n    const fixedFullScreen = carouselElements.fullScreen({\n      content: overlayCarousel.element,\n      callback: () => {\n        if (isFullScreenEvents)\n          window.removeEventListener('keyup', isFullScreenEvents);\n      },\n    });\n\n    styles += fixedFullScreen.styles;\n\n    let isFullScreenEvents: any = null;\n\n    return {\n      element: fixedFullScreen.element,\n      styles,\n      events: {\n        setFullScreen,\n      },\n    };\n  })();\n"],"names":["image","carouselElements.image","carouselElements.fullScreen"],"mappings":";;;;;AAIA,MAAM,sCAAsC;AAG5C,MAAM,8BAA8B;AAAA,KAC/B,mCAAmC;AAAA;AAAA;AAAA;AAAA,wBAIhB,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,KAGxC,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,kCAAkC;AAAA,IACpC,YAAY,MAAM;AAAA,IAClB,2BAA2B;AAAA;AAG/B,MAAM,qBAAqB,CAAC,EAAE,OAAA,MAC5B,OAAO,IAAI,CAACA,WAAU;AACpB,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,aAAa,YAAY,cAAc;AAAA,IAC3C,OAAAA;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,iBAAe,UAAU,IAAI,mCAAmC;AAChE,iBAAe,YAAY,UAAU;AAErC,QAAM,YAAY,cAAc;AAEhC,SAAO;AACT,CAAC;AAEH,MAAA,UAAe,CAAC,EAAE,OAAA,OACf,MAAM;AACL,MAAI,SAAS;AAEb,QAAM,gBAAgB,CAAC,UAAkB;AACvC,QAAI,UAAU;AAEd,UAAM,iBAAiB,CAAC,UAAyB;AAC/C,UAAI,CAAC,QAAS;AACd,gBAAU;AACV,UAAI,MAAM,OAAO,YAAa,iBAAgB,OAAO,eAAA;AACrD,UAAI,MAAM,OAAO,aAAc,iBAAgB,OAAO,gBAAA;AAEtD,iBAAW,MAAM;AACf,kBAAU;AAAA,MACZ,GAAG,GAAG;AAAA,IACR;AAEA,oBAAgB,OAAO,YAAY,KAAK;AACxC,eAAW,MAAM,gBAAgB,OAAO,KAAA,GAAQ,GAAG;AAEnD,eAAW,MAAM;AACf,sBAAgB,OAAO,YAAA;AAAA,IACzB,GAAG,GAAG;AAEN,yBAAqB,OAAO,iBAAiB,SAAS,cAAc;AAAA,EACtE;AAEA,QAAM,gBAAgB,mBAAmB,EAAE,QAAQ;AAEnD,QAAM,kBAAkBC,MAAuB;AAAA,IAC7C,QAAQ;AAAA,IACR,WAAY,OAAO,cAAc,KAAM;AAAA,EAAA,CACxC;AAED,YAAU,gBAAgB;AAE1B,QAAM,kBAAkBC,WAA4B;AAAA,IAClD,SAAS,gBAAgB;AAAA,IACzB,UAAU,MAAM;AACd,UAAI;AACF,eAAO,oBAAoB,SAAS,kBAAkB;AAAA,IAC1D;AAAA,EAAA,CACD;AAED,YAAU,gBAAgB;AAE1B,MAAI,qBAA0B;AAE9B,SAAO;AAAA,IACL,SAAS,gBAAgB;AAAA,IACzB;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;"}

package/dist/composite/carousel/image/multiple.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiple.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/image/multiple.ts"],"names":[],"mappings":"AAKA,KAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;yBA4Gc,OAAO,yBAAyB;;;;;;;AAAhD,wBA8FO"}
+{"version":3,"file":"multiple.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/image/multiple.ts"],"names":[],"mappings":"AAMA,KAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;yBA2Gc,OAAO,yBAAyB;;;;;;;AAAhD,wBA8FO"}