@universityofmaryland/web-elements-library 1.4.8 → 1.5.0

package/dist/composite/slider/events.js

@@ -1,9 +1,28 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-const icons = require("../../utilities/assets/icons.js");
-const index$2 = require("../../utilities/js-events/index.js");
-const index$1 = require("../../utilities/performance/index.js");
-const index = require("../../utilities/theme/index.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const typography = require("@universityofmaryland/web-styles-library/typography");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
+const events$1 = require("@universityofmaryland/web-utilities-library/events");
+const performance = require("@universityofmaryland/web-utilities-library/performance");
+const arrows = require("@universityofmaryland/web-icons-library/arrows");
+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 typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
 const TABLET = 750;
 const DESKTOP = 1e3;
 const LARGE = 1300;
@@ -32,7 +51,7 @@ const OVERWRITE_THEME_DARK_INTRO_HEADLINE = `.${ELEMENT_SLIDER_EVENT_CONTAINER}$
 const OVERWRITE_THEME_DARK_ARROW = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}`;
 const VariationThemeDark = `
   ${OVERWRITE_THEME_DARK_CONTAINER_WRAPPER} {
-    background-color: ${Styles.token.color.gray.darker};
+    background-color: ${token__namespace.color.gray.darker};
   }
 
   ${OVERWRITE_THEME_DARK_CONTAINER} * {
@@ -40,27 +59,27 @@ const VariationThemeDark = `
   }
 
   ${OVERWRITE_THEME_DARK_INTRO_COVER} {
-    background-color: ${Styles.token.color.gray.darker};
+    background-color: ${token__namespace.color.gray.darker};
   }
 
   ${OVERWRITE_THEME_DARK_INTRO_HEADLINE} {
-    color: ${Styles.token.color.white};
+    color: ${token__namespace.color.white};
   }
 
   ${OVERWRITE_THEME_DARK_ARROW} {
-    background-color: ${Styles.token.color.gray.dark};
+    background-color: ${token__namespace.color.gray.dark};
   }
 
   ${OVERWRITE_THEME_DARK_ARROW} svg {
-    fill: ${Styles.token.color.white}
+    fill: ${token__namespace.color.white}
   }
 
   ${OVERWRITE_THEME_DARK_ARROW}:hover {
-    background-color: ${Styles.token.color.white}
+    background-color: ${token__namespace.color.white}
   }
 
   ${OVERWRITE_THEME_DARK_ARROW}:hover svg {
-    fill: ${Styles.token.color.black}
+    fill: ${token__namespace.color.black}
   }
 `;
 const ButtonStyles = `
@@ -71,7 +90,7 @@ const ButtonStyles = `
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: ${Styles.token.color.gray.light};
+    background-color: ${token__namespace.color.gray.light};
     transition: background-color ${ANIMATION_DURATION}ms;
     position: absolute;
     top: 50%;
@@ -87,16 +106,16 @@ const ButtonStyles = `
   }
 
   .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}:hover {
-    background-color: ${Styles.token.color.black};
+    background-color: ${token__namespace.color.black};
   }
 
   .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}:hover svg {
-    fill: ${Styles.token.color.white};
+    fill: ${token__namespace.color.white};
   }
 
   .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} svg {
     transition: fill .5s;
-    fill: ${Styles.token.color.black};
+    fill: ${token__namespace.color.black};
     width: 16px;
     height: 6px;
   }
@@ -115,7 +134,7 @@ const ButtonStyles = `
   @container ${ELEMENT_NAME} (max-width: ${TABLET - 1}px) {
     .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK} {
       left: -24px;
-      top: ${Styles.token.spacing.xs};
+      top: ${token__namespace.spacing.xs};
     }
   }
 
@@ -126,7 +145,7 @@ const ButtonStyles = `
   @container ${ELEMENT_NAME} (max-width: ${TABLET - 1}px) {
     .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD} {
       right: -24px;
-      top: ${Styles.token.spacing.xs};
+      top: ${token__namespace.spacing.xs};
     }
   }
 `;
@@ -157,7 +176,7 @@ const DatesStyles = `
 `;
 const IntroStyles = `
   .${ELEMENT_SLIDER_EVENT_INTRO} {
-    padding: 0 ${Styles.token.spacing.lg};
+    padding: 0 ${token__namespace.spacing.lg};
     position: relative;
   }
 
@@ -183,18 +202,18 @@ const IntroStyles = `
   }
 
   .${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE} {
-    color: ${Styles.token.color.black};
+    color: ${token__namespace.color.black};
     font-weight: 700;
   }
 
   .${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE} + * {
-    margin-top: ${Styles.token.spacing.min};
+    margin-top: ${token__namespace.spacing.min};
     display: block;
   }
 
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
-    [`.${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE}`]: Styles.typography.sans.larger
+    [`.${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE}`]: typography__namespace.sans.larger
   }
 })}
 
@@ -203,7 +222,7 @@ const IntroStyles = `
   }
   
   .${ELEMENT_SLIDER_EVENT_INTRO_ACTIONS} {
-    margin-top: ${Styles.token.spacing.min};
+    margin-top: ${token__namespace.spacing.min};
   }
   
 
@@ -229,7 +248,7 @@ const CoverStyles = `
     height: 100%;
     top: 0;
     left: -100vw;
-    background-color: ${Styles.token.color.gray.lighter};
+    background-color: ${token__namespace.color.gray.lighter};
   }
   
   @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {
@@ -246,7 +265,7 @@ const STYLES_SLIDER_EVENTS_ELEMENT = `
   
   .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER} {
     padding: 24px 0;
-    background-color: ${Styles.token.color.gray.lighter};
+    background-color: ${token__namespace.color.gray.lighter};
     position: relative;
     z-index: 99;
   }
@@ -276,7 +295,7 @@ const CreateBackButton = ({
   SetSlideDatesBackwards
 }) => {
   const button = document.createElement("button");
-  button.innerHTML = icons.BACK_ARROW;
+  button.innerHTML = arrows.arrow_left;
   button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON);
   button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK);
   button.style.display = "none";
@@ -298,7 +317,7 @@ const CreateForwardButton = ({
   SetSlideDatesForward
 }) => {
   const button = document.createElement("button");
-  button.innerHTML = icons.FORWARD_ARROW;
+  button.innerHTML = arrows.arrow_right;
   button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON);
   button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD);
   button.setAttribute("type", "button");
@@ -424,9 +443,7 @@ const SizeDatesElements = ({
       const maxHeightElement = dateElements.sort((a, b) => {
         return a.offsetHeight - b.offsetHeight;
       })[0];
-      const height = maxHeightElement.offsetHeight + index.convertPixelStringToNumber(
-        maxHeightElement.style.marginTop
-      );
+      const height = maxHeightElement.offsetHeight + styles.parsePixelValue(maxHeightElement.style.marginTop);
       sliderWrapper2.style.height = `${height}px`;
     };
     const setWidthPerDate = () => {
@@ -444,17 +461,17 @@ const SizeDatesElements = ({
       dateElements.forEach((dateElement) => {
         dateElement.style.width = `${dateElementSize}px`;
         if (isMobile) {
-          const lineColor = isThemeDark ? Styles.token.color.gray.mediumAA : Styles.token.color.gray.light;
+          const lineColor = isThemeDark ? token__namespace.color.gray.mediumAA : token__namespace.color.gray.light;
           dateElement.style.display = `flex`;
           dateElement.style.justifyContent = `center`;
           dateElement.style.paddingRight = `0`;
-          dateElement.style.marginTop = `${Styles.token.spacing.xs}`;
-          dateElement.style.paddingTop = `${Styles.token.spacing.xs}`;
+          dateElement.style.marginTop = `${token__namespace.spacing.xs}`;
+          dateElement.style.paddingTop = `${token__namespace.spacing.xs}`;
           dateElement.style.borderTop = `1px solid ${lineColor}`;
         } else {
           dateElement.style.display = `flex`;
           dateElement.style.justifyContent = `inherit`;
-          dateElement.style.paddingRight = `${Styles.token.spacing.lg}`;
+          dateElement.style.paddingRight = `${token__namespace.spacing.lg}`;
           dateElement.style.marginTop = `0`;
           dateElement.style.paddingTop = `0`;
           dateElement.style.borderTop = `none`;
@@ -482,12 +499,12 @@ const EventSlideDates = ({
   const sliderPosition = sliderStyle ? parseInt(sliderStyle.replace(/[^\d.]/g, "")) : 0;
   const endPosition = forward ? Math.floor(sliderPosition + width) : Math.floor(sliderPosition - width);
   const increment = width / loop;
-  let index2 = 1;
+  let index = 1;
   const slideFunction = () => {
-    const incrementIncrease = increment * index2;
+    const incrementIncrease = increment * index;
     const postion = forward ? sliderPosition + incrementIncrease : sliderPosition - incrementIncrease;
-    if (loop > index2) {
-      index2++;
+    if (loop > index) {
+      index++;
       window.requestAnimationFrame(slideFunction);
       dataSlider.style.transform = `translateX(${-postion}px)`;
     } else {
@@ -524,7 +541,7 @@ const EventSwipe = ({
     }
     SetButtonVisibility();
   };
-  index$2.CreateEventSwipe({ container, callback: swipes });
+  events$1.setupSwipeDetection({ container, callback: swipes });
 };
 const OnLoadStyles = ({ dataSlider }) => {
   dataSlider.style.display = "flex";
@@ -581,7 +598,7 @@ const events = (props) => (() => {
     SetEventSwipe();
   };
   let currentPosition = 0;
-  let styles = STYLES_SLIDER_EVENTS_ELEMENT;
+  let styles2 = STYLES_SLIDER_EVENTS_ELEMENT;
   dataSlider.style.visibility = "hidden";
   coverElement.classList.add(ELEMENT_SLIDER_EVENT_COVER);
   wrapper.classList.add(ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER);
@@ -592,13 +609,10 @@ const events = (props) => (() => {
   container.appendChild(wrapper);
   declaration.classList.add(ELEMENT_SLIDER_EVENT_DECLRATION);
   declaration.appendChild(container);
-  window.addEventListener(
-    "resize",
-    index$1.debounce(EventResize, 20)
-  );
+  window.addEventListener("resize", performance.debounce(EventResize, 20));
   return {
     element: declaration,
-    styles,
+    styles: styles2,
     events: {
       load,
       size

package/dist/composite/slider/events.js.map

@@ -1 +1 @@
-{"version":3,"file":"events.js","sources":["../../../source/composite/slider/events.ts"],"sourcesContent":["import { token, typography } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\n\ntype TypeSliderEventButtonProps = {\n  SetCountForward: () => void;\n  SetCountBackward: () => void;\n  SetButtonVisibility: () => void;\n  SetSlideDatesBackwards: () => void;\n  SetSlideDatesForward: () => void;\n};\n\ntype TypeSliderEventIntroProps = {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n};\n\ntype TypeSliderEventSlideContentProps = {\n  dataSlider: HTMLDivElement;\n};\n\ntype TypeSliderEventSlideProps = TypeSliderEventSlideContentProps &\n  TypeSliderEventButtonProps;\n\ntype TypeSliderEventScrollerProps = TypeSliderEventSlideProps &\n  TypeSliderEventIntroProps;\n\ntype TypeSliderEventProps = TypeSliderEventSlideContentProps &\n  TypeSliderEventIntroProps & {\n    isThemeDark?: boolean;\n  };\n\nconst TABLET = 750;\nconst DESKTOP = 1000;\nconst LARGE = 1300;\n\nconst ANIMATION_DURATION = 500;\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-slider-events';\nconst ELEMENT_SLIDER_EVENT_DECLRATION = 'slider-events-declaration';\nconst ELEMENT_SLIDER_EVENT_CONTAINER = 'slider-events-container';\nconst ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER = 'slider-event-container-wrapper';\nconst ELEMENT_SLIDER_EVENT_COVER = 'slider-event-cover';\n\nconst ELEMENT_SLIDER_EVENT_INTRO = 'slider-event-intro-container';\nconst ELEMENT_SLIDER_EVENT_INTRO_HEADLINE = 'slider-event-intro-headline';\nconst ELEMENT_SLIDER_EVENT_INTRO_ACTIONS = 'slider-event-intro-actions';\n\nconst ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER = 'slider-event-slide-container';\nconst ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER = 'slider-event-slide-wrapper';\nconst ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER = 'slider-event-slide-scroller';\n\nconst ELEMENT_SLIDER_EVENT_SLIDE_BUTTON = 'slider-event-slide-button';\nconst ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD = 'slider-event-button-forward';\nconst ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK = 'slider-event-button-back';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_CONTAINER_WRAPPER = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_INTRO_COVER = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_COVER}`;\nconst OVERWRITE_THEME_DARK_INTRO_HEADLINE = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_ARROW = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}`;\n\n// prettier-ignore\nconst VariationThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER_WRAPPER} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_CONTAINER} * {\n    color: #fff !important;\n  }\n\n  ${OVERWRITE_THEME_DARK_INTRO_COVER} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_INTRO_HEADLINE} {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW} {\n    background-color: ${token.color.gray.dark};\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW} svg {\n    fill: ${token.color.white}\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW}:hover {\n    background-color: ${token.color.white}\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW}:hover svg {\n    fill: ${token.color.black}\n  }\n`\n\nconst ButtonStyles = `\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} {\n    border: none;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: ${token.color.gray.light};\n    transition: background-color ${ANIMATION_DURATION}ms;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    z-index: 99;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} {\n      width: 48px;\n      height: 48px;\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}:hover {\n    background-color: ${token.color.black};\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}:hover svg {\n    fill: ${token.color.white};\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} svg {\n    transition: fill .5s;\n    fill: ${token.color.black};\n    width: 16px;\n    height: 6px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} svg {\n      width: 24px;\n      height: 8px;\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK} {\n    left: 0;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${TABLET - 1}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK} {\n      left: -24px;\n      top: ${token.spacing.xs};\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD} {\n    right: 0;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${TABLET - 1}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD} {\n      right: -24px;\n      top: ${token.spacing.xs};\n    }\n  }\n`;\n\nconst DatesStyles = `\n  .${ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER} {\n    display: flex;\n    position: relative;\n    padding: 0 36px;\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER} {\n      padding: 0 60px;\n      width: calc(100% - 96px);\n    }\n  }\n  \n  .${ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER} {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    min-height: 44px;\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER} ::slotted(*) {\n    margin-bottom: 0 !important;\n  }\n`;\n\nconst IntroStyles = `\n  .${ELEMENT_SLIDER_EVENT_INTRO} {\n    padding: 0 ${token.spacing.lg};\n    position: relative;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${TABLET - 1}px) {\n    .${ELEMENT_SLIDER_EVENT_INTRO} {\n      text-align: center;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_INTRO} {\n      padding: 0;\n      padding-right: 24px;\n      padding-left: 0;\n      width: 200px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ELEMENT_SLIDER_EVENT_INTRO} {\n      width: 320px;\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE} {\n    color: ${token.color.black};\n    font-weight: 700;\n  }\n\n  .${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE} + * {\n    margin-top: ${token.spacing.min};\n    display: block;\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE}`]: typography.sans.larger,\n    },\n  })}\n\n  * + .${ELEMENT_SLIDER_EVENT_INTRO_ACTIONS} {\n    text-decoration: none;\n  }\n  \n  .${ELEMENT_SLIDER_EVENT_INTRO_ACTIONS} {\n    margin-top: ${token.spacing.min};\n  }\n  \n\n`;\n\nconst ScrollerStyles = `\n  .${ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER} {\n    position: relative;\n    z-index: 99;\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n  .${ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER} {\n      display: flex;\n      align-items: center;\n    }\n  }\n`;\n\nconst CoverStyles = `\n  .${ELEMENT_SLIDER_EVENT_COVER} {\n    display: block;\n    position: absolute;\n    width: 200vw;\n    height: 100%;\n    top: 0;\n    left: -100vw;\n    background-color: ${token.color.gray.lighter};\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_COVER} {\n      width: 40vw;\n      left: calc(100% - 1px);\n    }\n  }\n`;\n\n// prettier-ignore\nconst STYLES_SLIDER_EVENTS_ELEMENT = `\n  .${ELEMENT_SLIDER_EVENT_DECLRATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n  \n  .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER} {\n    padding: 24px 0;\n    background-color: ${token.color.gray.lighter};\n    position: relative;\n    z-index: 99;\n  }\n  \n  @container ${ELEMENT_NAME} (max-width: 260px) {\n    .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER} {\n      display: none\n    }\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER} {\n      padding: 40px;\n    }\n  }\n  \n  ${CoverStyles}\n  ${ScrollerStyles}\n  ${IntroStyles}\n  ${DatesStyles}\n  ${ButtonStyles}\n  ${VariationThemeDark}\n`;\n\nconst CreateBackButton = ({\n  SetCountBackward,\n  SetButtonVisibility,\n  SetSlideDatesBackwards,\n}: TypeSliderEventButtonProps) => {\n  const button = document.createElement('button');\n\n  button.innerHTML = Utility.asset.icon.BACK_ARROW;\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON);\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK);\n  button.style.display = 'none';\n  button.setAttribute('type', 'button');\n  button.setAttribute('aria-label', 'see previous date');\n\n  const clickEvent = () => {\n    if (button.hasAttribute('disabled')) return;\n    SetCountBackward();\n    SetButtonVisibility();\n    SetSlideDatesBackwards();\n  };\n\n  button.addEventListener('click', clickEvent);\n  button.addEventListener('touchstart', clickEvent);\n\n  return button;\n};\n\nconst CreateForwardButton = ({\n  SetCountForward,\n  SetButtonVisibility,\n  SetSlideDatesForward,\n}: TypeSliderEventButtonProps) => {\n  const button = document.createElement('button');\n\n  button.innerHTML = Utility.asset.icon.FORWARD_ARROW;\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON);\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD);\n  button.setAttribute('type', 'button');\n  button.setAttribute('aria-label', 'see next date');\n\n  const clickEvent = () => {\n    if (button.hasAttribute('disabled')) return;\n    SetCountForward();\n    SetButtonVisibility();\n    SetSlideDatesForward();\n  };\n\n  button.addEventListener('click', clickEvent);\n  button.addEventListener('touchstart', clickEvent);\n\n  return button;\n};\n\nconst CreateDatesContainer = (props: TypeSliderEventSlideProps) => {\n  const { dataSlider } = props;\n  const container = document.createElement('div');\n  const datesWrapper = document.createElement('div');\n  const backButton = CreateBackButton(props);\n  const forwardButton = CreateForwardButton(props);\n\n  datesWrapper.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER);\n  dataSlider.style.display = 'block';\n  datesWrapper.appendChild(dataSlider);\n\n  container.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER);\n  container.appendChild(backButton);\n  container.appendChild(datesWrapper);\n  container.appendChild(forwardButton);\n\n  return container;\n};\n\nconst CreateIntroWrapper = (props: TypeSliderEventIntroProps) => {\n  const { headline, actions } = props;\n  const introductionWrapper = document.createElement('div');\n  if (headline) {\n    headline.classList.add(ELEMENT_SLIDER_EVENT_INTRO_HEADLINE);\n    introductionWrapper.appendChild(headline);\n  }\n  if (actions) {\n    introductionWrapper.appendChild(actions);\n  }\n\n  introductionWrapper.classList.add(ELEMENT_SLIDER_EVENT_INTRO);\n\n  return introductionWrapper;\n};\n\nconst CreateScrollerWrapper = (props: TypeSliderEventScrollerProps) => {\n  const container = document.createElement('div');\n  const introductionWrapper = CreateIntroWrapper(props);\n  const datesContainer = CreateDatesContainer(props);\n\n  container.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER);\n\n  container.appendChild(introductionWrapper);\n  container.appendChild(datesContainer);\n\n  return container;\n};\n\nconst ShowNumberOfDates = ({ container }: { container: HTMLElement }) => {\n  let count = 1;\n\n  if (container.offsetWidth > TABLET) count = 2;\n  if (container.offsetWidth > DESKTOP) count = 3;\n  if (container.offsetWidth > LARGE) count = 4;\n\n  return count;\n};\n\nconst JumpToDate = ({\n  dataSlider,\n  currentPosition,\n}: {\n  dataSlider: HTMLElement;\n  currentPosition: number;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n\n  if (!dateElements) return;\n\n  const firstElement = dateElements[0];\n  const currentPositonAboveZero = currentPosition > 0;\n  const currentElement = dateElements[currentPosition];\n  let endPosition = 0;\n\n  if (currentPositonAboveZero) {\n    endPosition = currentElement.offsetLeft - firstElement.offsetLeft;\n  }\n\n  dataSlider.style.transform = `translateX(${-endPosition}px)`;\n};\n\nconst ButtonVisibilityLogic = ({\n  container,\n  dataSlider,\n  currentPosition,\n}: {\n  container: HTMLElement;\n  dataSlider: HTMLElement;\n  currentPosition: number;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n  const buttons = Array.from(\n    container.querySelectorAll(`.${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}`),\n  ) as HTMLButtonElement[];\n  const count = ShowNumberOfDates({ container });\n  const length = dateElements.length;\n\n  buttons.forEach((button) => {\n    button.setAttribute('disabled', '');\n\n    setTimeout(() => {\n      button.removeAttribute('disabled');\n    }, ANIMATION_DURATION + 100);\n  });\n\n  if (currentPosition === 0) {\n    buttons[0].style.display = 'none';\n  } else {\n    buttons[0].style.display = 'flex';\n  }\n\n  if (currentPosition >= length - count) {\n    buttons[1].style.display = 'none';\n  } else {\n    buttons[1].style.display = 'flex';\n  }\n};\n\nconst SizeDatesElements = ({\n  container,\n  dataSlider,\n  isThemeDark,\n  SetButtonVisibility,\n}: {\n  container: HTMLElement;\n  dataSlider: HTMLElement;\n  isThemeDark?: boolean;\n  SetButtonVisibility: () => void;\n}) => {\n  const sliderWrapper = container.querySelector(\n    `.${ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER}`,\n  ) as HTMLDivElement;\n\n  const sizing = ({ sliderWrapper }: { sliderWrapper: HTMLDivElement }) => {\n    const dateElements = Array.from(\n      dataSlider.querySelectorAll(':scope > *'),\n    ) as HTMLDivElement[];\n\n    const sliderVisibility = ({ show = true }: { show?: boolean }) => {\n      dataSlider.style.visibility = show ? 'visible' : 'hidden';\n    };\n\n    const setHeight = () => {\n      const maxHeightElement = dateElements.sort((a, b) => {\n        return a.offsetHeight - b.offsetHeight;\n      })[0];\n      const height =\n        maxHeightElement.offsetHeight +\n        Utility.theme.convertPixelStringToNumber(\n          maxHeightElement.style.marginTop,\n        );\n\n      sliderWrapper.style.height = `${height}px`;\n    };\n\n    const setWidthPerDate = () => {\n      const count = ShowNumberOfDates({ container });\n      const dateElementSize = sliderWrapper.offsetWidth / count;\n      const elementWidth = container.offsetWidth;\n      const isMobile = elementWidth < TABLET;\n\n      if (elementWidth === 0) {\n        setTimeout(() => {\n          sizing({ sliderWrapper });\n        }, 200);\n        return;\n      }\n\n      dataSlider.style.width = `${dateElements.length * dateElementSize}px`;\n\n      dateElements.forEach((dateElement) => {\n        dateElement.style.width = `${dateElementSize}px`;\n\n        if (isMobile) {\n          const lineColor = isThemeDark\n            ? token.color.gray.mediumAA\n            : token.color.gray.light;\n\n          dateElement.style.display = `flex`;\n          dateElement.style.justifyContent = `center`;\n          dateElement.style.paddingRight = `0`;\n          dateElement.style.marginTop = `${token.spacing.xs}`;\n          dateElement.style.paddingTop = `${token.spacing.xs}`;\n          dateElement.style.borderTop = `1px solid ${lineColor}`;\n        } else {\n          dateElement.style.display = `flex`;\n          dateElement.style.justifyContent = `inherit`;\n          dateElement.style.paddingRight = `${token.spacing.lg}`;\n\n          dateElement.style.marginTop = `0`;\n          dateElement.style.paddingTop = `0`;\n          dateElement.style.borderTop = `none`;\n        }\n      });\n    };\n\n    sliderVisibility({ show: false });\n    setWidthPerDate();\n    setHeight();\n    sliderVisibility({ show: true });\n    SetButtonVisibility();\n  };\n\n  sizing({ sliderWrapper });\n};\n\nconst EventSlideDates = ({\n  forward,\n  dataSlider,\n}: {\n  forward: boolean;\n  dataSlider: HTMLElement;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n  const width = dateElements[0].offsetWidth;\n  const loop = 30;\n  const sliderStyle = dataSlider.style.transform;\n  const sliderPosition = sliderStyle\n    ? parseInt(sliderStyle.replace(/[^\\d.]/g, ''))\n    : 0;\n  const endPosition = forward\n    ? Math.floor(sliderPosition + width)\n    : Math.floor(sliderPosition - width);\n  const increment = width / loop;\n  let index = 1;\n\n  const slideFunction = () => {\n    const incrementIncrease = increment * index;\n    const postion = forward\n      ? sliderPosition + incrementIncrease\n      : sliderPosition - incrementIncrease;\n\n    if (loop > index) {\n      index++;\n      window.requestAnimationFrame(slideFunction);\n      dataSlider.style.transform = `translateX(${-postion}px)`;\n    } else {\n      dataSlider.style.transform = `translateX(${-endPosition}px)`;\n    }\n  };\n\n  window.requestAnimationFrame(slideFunction);\n};\n\nconst EventSwipe = ({\n  container,\n  dataSlider,\n  currentPosition,\n  SetCountBackward,\n  SetCountForward,\n  SetSlideDatesBackwards,\n  SetSlideDatesForward,\n  SetButtonVisibility,\n}: {\n  container: HTMLElement;\n  dataSlider: HTMLElement;\n  currentPosition: number;\n  SetCountBackward: () => void;\n  SetCountForward: () => void;\n  SetSlideDatesBackwards: () => void;\n  SetSlideDatesForward: () => void;\n  SetButtonVisibility: () => void;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n  const count = ShowNumberOfDates({ container });\n  const swipes = (isrightswipe: Boolean) => {\n    if (isrightswipe) {\n      if (currentPosition > 0) {\n        SetCountBackward();\n        SetSlideDatesBackwards();\n      }\n    } else {\n      if (currentPosition <= dateElements.length - count) {\n        SetCountForward();\n        SetSlideDatesForward();\n      }\n    }\n\n    SetButtonVisibility();\n  };\n\n  Utility.javascriptEvents.CreateEventSwipe({ container, callback: swipes });\n};\n\nconst OnLoadStyles = ({ dataSlider }: { dataSlider: HTMLElement }) => {\n  dataSlider.style.display = 'flex';\n  dataSlider.style.position = 'absolute';\n  dataSlider.style.top = '0';\n  dataSlider.style.left = '0';\n};\n\nexport default (props: TypeSliderEventProps) =>\n  (() => {\n    const { isThemeDark, dataSlider } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n    const coverElement = document.createElement('div');\n    const CommonDomElements = {\n      container,\n      dataSlider,\n    };\n\n    const SetCountForward = () => (currentPosition = currentPosition + 1);\n    const SetCountBackward = () => (currentPosition = currentPosition - 1);\n    const SetButtonVisibility = () =>\n      ButtonVisibilityLogic({ ...CommonDomElements, currentPosition });\n    const size = () =>\n      SizeDatesElements({\n        ...CommonDomElements,\n        isThemeDark,\n        SetButtonVisibility,\n      });\n    const SetJumpToDate = () =>\n      JumpToDate({ ...CommonDomElements, currentPosition });\n    const SetSlideDatesForward = () =>\n      EventSlideDates({ ...CommonDomElements, forward: true });\n    const SetSlideDatesBackwards = () =>\n      EventSlideDates({ ...CommonDomElements, forward: false });\n    const SetEventSwipe = () =>\n      EventSwipe({\n        ...CommonDomElements,\n        currentPosition,\n        SetCountBackward,\n        SetCountForward,\n        SetSlideDatesBackwards,\n        SetSlideDatesForward,\n        SetButtonVisibility,\n      });\n    const EventResize = () => {\n      size();\n      SetJumpToDate();\n      SetButtonVisibility();\n    };\n    const containerWrapper = CreateScrollerWrapper({\n      ...props,\n      SetCountForward,\n      SetCountBackward,\n      SetButtonVisibility,\n      SetSlideDatesBackwards,\n      SetSlideDatesForward,\n    });\n    const load = () => {\n      OnLoadStyles({ dataSlider });\n      EventResize();\n      SetEventSwipe();\n    };\n\n    let currentPosition = 0;\n    let styles = STYLES_SLIDER_EVENTS_ELEMENT;\n\n    dataSlider.style.visibility = 'hidden';\n\n    coverElement.classList.add(ELEMENT_SLIDER_EVENT_COVER);\n\n    wrapper.classList.add(ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER);\n\n    wrapper.appendChild(containerWrapper);\n    wrapper.appendChild(coverElement);\n\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n    container.classList.add(ELEMENT_SLIDER_EVENT_CONTAINER);\n    container.appendChild(wrapper);\n\n    declaration.classList.add(ELEMENT_SLIDER_EVENT_DECLRATION);\n    declaration.appendChild(container);\n\n    window.addEventListener(\n      'resize',\n      Utility.performance.debounce(EventResize, 20),\n    );\n\n    return {\n      element: declaration,\n      styles,\n      events: {\n        load,\n        size,\n      },\n    };\n  })();\n"],"names":["token","Utility.theme.convertJSSObjectToStyles","typography","Utility.asset.icon.BACK_ARROW","Utility.asset.icon.FORWARD_ARROW","sliderWrapper","Utility.theme.convertPixelStringToNumber","index","Utility.javascriptEvents.CreateEventSwipe","Utility.performance.debounce"],"mappings":"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"}
+{"version":3,"file":"events.js","sources":["../../../source/composite/slider/events.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { setupSwipeDetection } from '@universityofmaryland/web-utilities-library/events';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { parsePixelValue } from '@universityofmaryland/web-utilities-library/styles';\nimport {\n  arrow_left as iconArrowLeft,\n  arrow_right as iconArrowRight,\n} from '@universityofmaryland/web-icons-library/arrows';\n\ntype TypeSliderEventButtonProps = {\n  SetCountForward: () => void;\n  SetCountBackward: () => void;\n  SetButtonVisibility: () => void;\n  SetSlideDatesBackwards: () => void;\n  SetSlideDatesForward: () => void;\n};\n\ntype TypeSliderEventIntroProps = {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n};\n\ntype TypeSliderEventSlideContentProps = {\n  dataSlider: HTMLDivElement;\n};\n\ntype TypeSliderEventSlideProps = TypeSliderEventSlideContentProps &\n  TypeSliderEventButtonProps;\n\ntype TypeSliderEventScrollerProps = TypeSliderEventSlideProps &\n  TypeSliderEventIntroProps;\n\ntype TypeSliderEventProps = TypeSliderEventSlideContentProps &\n  TypeSliderEventIntroProps & {\n    isThemeDark?: boolean;\n  };\n\nconst TABLET = 750;\nconst DESKTOP = 1000;\nconst LARGE = 1300;\n\nconst ANIMATION_DURATION = 500;\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-slider-events';\nconst ELEMENT_SLIDER_EVENT_DECLRATION = 'slider-events-declaration';\nconst ELEMENT_SLIDER_EVENT_CONTAINER = 'slider-events-container';\nconst ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER = 'slider-event-container-wrapper';\nconst ELEMENT_SLIDER_EVENT_COVER = 'slider-event-cover';\n\nconst ELEMENT_SLIDER_EVENT_INTRO = 'slider-event-intro-container';\nconst ELEMENT_SLIDER_EVENT_INTRO_HEADLINE = 'slider-event-intro-headline';\nconst ELEMENT_SLIDER_EVENT_INTRO_ACTIONS = 'slider-event-intro-actions';\n\nconst ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER = 'slider-event-slide-container';\nconst ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER = 'slider-event-slide-wrapper';\nconst ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER = 'slider-event-slide-scroller';\n\nconst ELEMENT_SLIDER_EVENT_SLIDE_BUTTON = 'slider-event-slide-button';\nconst ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD = 'slider-event-button-forward';\nconst ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK = 'slider-event-button-back';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_CONTAINER_WRAPPER = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_INTRO_COVER = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_COVER}`;\nconst OVERWRITE_THEME_DARK_INTRO_HEADLINE = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_ARROW = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}`;\n\n// prettier-ignore\nconst VariationThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER_WRAPPER} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_CONTAINER} * {\n    color: #fff !important;\n  }\n\n  ${OVERWRITE_THEME_DARK_INTRO_COVER} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_INTRO_HEADLINE} {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW} {\n    background-color: ${token.color.gray.dark};\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW} svg {\n    fill: ${token.color.white}\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW}:hover {\n    background-color: ${token.color.white}\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW}:hover svg {\n    fill: ${token.color.black}\n  }\n`\n\nconst ButtonStyles = `\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} {\n    border: none;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: ${token.color.gray.light};\n    transition: background-color ${ANIMATION_DURATION}ms;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    z-index: 99;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} {\n      width: 48px;\n      height: 48px;\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}:hover {\n    background-color: ${token.color.black};\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}:hover svg {\n    fill: ${token.color.white};\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} svg {\n    transition: fill .5s;\n    fill: ${token.color.black};\n    width: 16px;\n    height: 6px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} svg {\n      width: 24px;\n      height: 8px;\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK} {\n    left: 0;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${TABLET - 1}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK} {\n      left: -24px;\n      top: ${token.spacing.xs};\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD} {\n    right: 0;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${TABLET - 1}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD} {\n      right: -24px;\n      top: ${token.spacing.xs};\n    }\n  }\n`;\n\nconst DatesStyles = `\n  .${ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER} {\n    display: flex;\n    position: relative;\n    padding: 0 36px;\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER} {\n      padding: 0 60px;\n      width: calc(100% - 96px);\n    }\n  }\n  \n  .${ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER} {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    min-height: 44px;\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER} ::slotted(*) {\n    margin-bottom: 0 !important;\n  }\n`;\n\nconst IntroStyles = `\n  .${ELEMENT_SLIDER_EVENT_INTRO} {\n    padding: 0 ${token.spacing.lg};\n    position: relative;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${TABLET - 1}px) {\n    .${ELEMENT_SLIDER_EVENT_INTRO} {\n      text-align: center;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_INTRO} {\n      padding: 0;\n      padding-right: 24px;\n      padding-left: 0;\n      width: 200px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ELEMENT_SLIDER_EVENT_INTRO} {\n      width: 320px;\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE} {\n    color: ${token.color.black};\n    font-weight: 700;\n  }\n\n  .${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE} + * {\n    margin-top: ${token.spacing.min};\n    display: block;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE}`]: typography.sans.larger,\n    },\n  })}\n\n  * + .${ELEMENT_SLIDER_EVENT_INTRO_ACTIONS} {\n    text-decoration: none;\n  }\n  \n  .${ELEMENT_SLIDER_EVENT_INTRO_ACTIONS} {\n    margin-top: ${token.spacing.min};\n  }\n  \n\n`;\n\nconst ScrollerStyles = `\n  .${ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER} {\n    position: relative;\n    z-index: 99;\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n  .${ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER} {\n      display: flex;\n      align-items: center;\n    }\n  }\n`;\n\nconst CoverStyles = `\n  .${ELEMENT_SLIDER_EVENT_COVER} {\n    display: block;\n    position: absolute;\n    width: 200vw;\n    height: 100%;\n    top: 0;\n    left: -100vw;\n    background-color: ${token.color.gray.lighter};\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_COVER} {\n      width: 40vw;\n      left: calc(100% - 1px);\n    }\n  }\n`;\n\n// prettier-ignore\nconst STYLES_SLIDER_EVENTS_ELEMENT = `\n  .${ELEMENT_SLIDER_EVENT_DECLRATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n  \n  .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER} {\n    padding: 24px 0;\n    background-color: ${token.color.gray.lighter};\n    position: relative;\n    z-index: 99;\n  }\n  \n  @container ${ELEMENT_NAME} (max-width: 260px) {\n    .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER} {\n      display: none\n    }\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER} {\n      padding: 40px;\n    }\n  }\n  \n  ${CoverStyles}\n  ${ScrollerStyles}\n  ${IntroStyles}\n  ${DatesStyles}\n  ${ButtonStyles}\n  ${VariationThemeDark}\n`;\n\nconst CreateBackButton = ({\n  SetCountBackward,\n  SetButtonVisibility,\n  SetSlideDatesBackwards,\n}: TypeSliderEventButtonProps) => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconArrowLeft;\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON);\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK);\n  button.style.display = 'none';\n  button.setAttribute('type', 'button');\n  button.setAttribute('aria-label', 'see previous date');\n\n  const clickEvent = () => {\n    if (button.hasAttribute('disabled')) return;\n    SetCountBackward();\n    SetButtonVisibility();\n    SetSlideDatesBackwards();\n  };\n\n  button.addEventListener('click', clickEvent);\n  button.addEventListener('touchstart', clickEvent);\n\n  return button;\n};\n\nconst CreateForwardButton = ({\n  SetCountForward,\n  SetButtonVisibility,\n  SetSlideDatesForward,\n}: TypeSliderEventButtonProps) => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconArrowRight;\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON);\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD);\n  button.setAttribute('type', 'button');\n  button.setAttribute('aria-label', 'see next date');\n\n  const clickEvent = () => {\n    if (button.hasAttribute('disabled')) return;\n    SetCountForward();\n    SetButtonVisibility();\n    SetSlideDatesForward();\n  };\n\n  button.addEventListener('click', clickEvent);\n  button.addEventListener('touchstart', clickEvent);\n\n  return button;\n};\n\nconst CreateDatesContainer = (props: TypeSliderEventSlideProps) => {\n  const { dataSlider } = props;\n  const container = document.createElement('div');\n  const datesWrapper = document.createElement('div');\n  const backButton = CreateBackButton(props);\n  const forwardButton = CreateForwardButton(props);\n\n  datesWrapper.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER);\n  dataSlider.style.display = 'block';\n  datesWrapper.appendChild(dataSlider);\n\n  container.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER);\n  container.appendChild(backButton);\n  container.appendChild(datesWrapper);\n  container.appendChild(forwardButton);\n\n  return container;\n};\n\nconst CreateIntroWrapper = (props: TypeSliderEventIntroProps) => {\n  const { headline, actions } = props;\n  const introductionWrapper = document.createElement('div');\n  if (headline) {\n    headline.classList.add(ELEMENT_SLIDER_EVENT_INTRO_HEADLINE);\n    introductionWrapper.appendChild(headline);\n  }\n  if (actions) {\n    introductionWrapper.appendChild(actions);\n  }\n\n  introductionWrapper.classList.add(ELEMENT_SLIDER_EVENT_INTRO);\n\n  return introductionWrapper;\n};\n\nconst CreateScrollerWrapper = (props: TypeSliderEventScrollerProps) => {\n  const container = document.createElement('div');\n  const introductionWrapper = CreateIntroWrapper(props);\n  const datesContainer = CreateDatesContainer(props);\n\n  container.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER);\n\n  container.appendChild(introductionWrapper);\n  container.appendChild(datesContainer);\n\n  return container;\n};\n\nconst ShowNumberOfDates = ({ container }: { container: HTMLElement }) => {\n  let count = 1;\n\n  if (container.offsetWidth > TABLET) count = 2;\n  if (container.offsetWidth > DESKTOP) count = 3;\n  if (container.offsetWidth > LARGE) count = 4;\n\n  return count;\n};\n\nconst JumpToDate = ({\n  dataSlider,\n  currentPosition,\n}: {\n  dataSlider: HTMLElement;\n  currentPosition: number;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n\n  if (!dateElements) return;\n\n  const firstElement = dateElements[0];\n  const currentPositonAboveZero = currentPosition > 0;\n  const currentElement = dateElements[currentPosition];\n  let endPosition = 0;\n\n  if (currentPositonAboveZero) {\n    endPosition = currentElement.offsetLeft - firstElement.offsetLeft;\n  }\n\n  dataSlider.style.transform = `translateX(${-endPosition}px)`;\n};\n\nconst ButtonVisibilityLogic = ({\n  container,\n  dataSlider,\n  currentPosition,\n}: {\n  container: HTMLElement;\n  dataSlider: HTMLElement;\n  currentPosition: number;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n  const buttons = Array.from(\n    container.querySelectorAll(`.${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}`),\n  ) as HTMLButtonElement[];\n  const count = ShowNumberOfDates({ container });\n  const length = dateElements.length;\n\n  buttons.forEach((button) => {\n    button.setAttribute('disabled', '');\n\n    setTimeout(() => {\n      button.removeAttribute('disabled');\n    }, ANIMATION_DURATION + 100);\n  });\n\n  if (currentPosition === 0) {\n    buttons[0].style.display = 'none';\n  } else {\n    buttons[0].style.display = 'flex';\n  }\n\n  if (currentPosition >= length - count) {\n    buttons[1].style.display = 'none';\n  } else {\n    buttons[1].style.display = 'flex';\n  }\n};\n\nconst SizeDatesElements = ({\n  container,\n  dataSlider,\n  isThemeDark,\n  SetButtonVisibility,\n}: {\n  container: HTMLElement;\n  dataSlider: HTMLElement;\n  isThemeDark?: boolean;\n  SetButtonVisibility: () => void;\n}) => {\n  const sliderWrapper = container.querySelector(\n    `.${ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER}`,\n  ) as HTMLDivElement;\n\n  const sizing = ({ sliderWrapper }: { sliderWrapper: HTMLDivElement }) => {\n    const dateElements = Array.from(\n      dataSlider.querySelectorAll(':scope > *'),\n    ) as HTMLDivElement[];\n\n    const sliderVisibility = ({ show = true }: { show?: boolean }) => {\n      dataSlider.style.visibility = show ? 'visible' : 'hidden';\n    };\n\n    const setHeight = () => {\n      const maxHeightElement = dateElements.sort((a, b) => {\n        return a.offsetHeight - b.offsetHeight;\n      })[0];\n      const height =\n        maxHeightElement.offsetHeight +\n        parsePixelValue(maxHeightElement.style.marginTop);\n\n      sliderWrapper.style.height = `${height}px`;\n    };\n\n    const setWidthPerDate = () => {\n      const count = ShowNumberOfDates({ container });\n      const dateElementSize = sliderWrapper.offsetWidth / count;\n      const elementWidth = container.offsetWidth;\n      const isMobile = elementWidth < TABLET;\n\n      if (elementWidth === 0) {\n        setTimeout(() => {\n          sizing({ sliderWrapper });\n        }, 200);\n        return;\n      }\n\n      dataSlider.style.width = `${dateElements.length * dateElementSize}px`;\n\n      dateElements.forEach((dateElement) => {\n        dateElement.style.width = `${dateElementSize}px`;\n\n        if (isMobile) {\n          const lineColor = isThemeDark\n            ? token.color.gray.mediumAA\n            : token.color.gray.light;\n\n          dateElement.style.display = `flex`;\n          dateElement.style.justifyContent = `center`;\n          dateElement.style.paddingRight = `0`;\n          dateElement.style.marginTop = `${token.spacing.xs}`;\n          dateElement.style.paddingTop = `${token.spacing.xs}`;\n          dateElement.style.borderTop = `1px solid ${lineColor}`;\n        } else {\n          dateElement.style.display = `flex`;\n          dateElement.style.justifyContent = `inherit`;\n          dateElement.style.paddingRight = `${token.spacing.lg}`;\n\n          dateElement.style.marginTop = `0`;\n          dateElement.style.paddingTop = `0`;\n          dateElement.style.borderTop = `none`;\n        }\n      });\n    };\n\n    sliderVisibility({ show: false });\n    setWidthPerDate();\n    setHeight();\n    sliderVisibility({ show: true });\n    SetButtonVisibility();\n  };\n\n  sizing({ sliderWrapper });\n};\n\nconst EventSlideDates = ({\n  forward,\n  dataSlider,\n}: {\n  forward: boolean;\n  dataSlider: HTMLElement;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n  const width = dateElements[0].offsetWidth;\n  const loop = 30;\n  const sliderStyle = dataSlider.style.transform;\n  const sliderPosition = sliderStyle\n    ? parseInt(sliderStyle.replace(/[^\\d.]/g, ''))\n    : 0;\n  const endPosition = forward\n    ? Math.floor(sliderPosition + width)\n    : Math.floor(sliderPosition - width);\n  const increment = width / loop;\n  let index = 1;\n\n  const slideFunction = () => {\n    const incrementIncrease = increment * index;\n    const postion = forward\n      ? sliderPosition + incrementIncrease\n      : sliderPosition - incrementIncrease;\n\n    if (loop > index) {\n      index++;\n      window.requestAnimationFrame(slideFunction);\n      dataSlider.style.transform = `translateX(${-postion}px)`;\n    } else {\n      dataSlider.style.transform = `translateX(${-endPosition}px)`;\n    }\n  };\n\n  window.requestAnimationFrame(slideFunction);\n};\n\nconst EventSwipe = ({\n  container,\n  dataSlider,\n  currentPosition,\n  SetCountBackward,\n  SetCountForward,\n  SetSlideDatesBackwards,\n  SetSlideDatesForward,\n  SetButtonVisibility,\n}: {\n  container: HTMLElement;\n  dataSlider: HTMLElement;\n  currentPosition: number;\n  SetCountBackward: () => void;\n  SetCountForward: () => void;\n  SetSlideDatesBackwards: () => void;\n  SetSlideDatesForward: () => void;\n  SetButtonVisibility: () => void;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n  const count = ShowNumberOfDates({ container });\n  const swipes = (isrightswipe: Boolean) => {\n    if (isrightswipe) {\n      if (currentPosition > 0) {\n        SetCountBackward();\n        SetSlideDatesBackwards();\n      }\n    } else {\n      if (currentPosition <= dateElements.length - count) {\n        SetCountForward();\n        SetSlideDatesForward();\n      }\n    }\n\n    SetButtonVisibility();\n  };\n\n  setupSwipeDetection({ container, callback: swipes });\n};\n\nconst OnLoadStyles = ({ dataSlider }: { dataSlider: HTMLElement }) => {\n  dataSlider.style.display = 'flex';\n  dataSlider.style.position = 'absolute';\n  dataSlider.style.top = '0';\n  dataSlider.style.left = '0';\n};\n\nexport default (props: TypeSliderEventProps) =>\n  (() => {\n    const { isThemeDark, dataSlider } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n    const coverElement = document.createElement('div');\n    const CommonDomElements = {\n      container,\n      dataSlider,\n    };\n\n    const SetCountForward = () => (currentPosition = currentPosition + 1);\n    const SetCountBackward = () => (currentPosition = currentPosition - 1);\n    const SetButtonVisibility = () =>\n      ButtonVisibilityLogic({ ...CommonDomElements, currentPosition });\n    const size = () =>\n      SizeDatesElements({\n        ...CommonDomElements,\n        isThemeDark,\n        SetButtonVisibility,\n      });\n    const SetJumpToDate = () =>\n      JumpToDate({ ...CommonDomElements, currentPosition });\n    const SetSlideDatesForward = () =>\n      EventSlideDates({ ...CommonDomElements, forward: true });\n    const SetSlideDatesBackwards = () =>\n      EventSlideDates({ ...CommonDomElements, forward: false });\n    const SetEventSwipe = () =>\n      EventSwipe({\n        ...CommonDomElements,\n        currentPosition,\n        SetCountBackward,\n        SetCountForward,\n        SetSlideDatesBackwards,\n        SetSlideDatesForward,\n        SetButtonVisibility,\n      });\n    const EventResize = () => {\n      size();\n      SetJumpToDate();\n      SetButtonVisibility();\n    };\n    const containerWrapper = CreateScrollerWrapper({\n      ...props,\n      SetCountForward,\n      SetCountBackward,\n      SetButtonVisibility,\n      SetSlideDatesBackwards,\n      SetSlideDatesForward,\n    });\n    const load = () => {\n      OnLoadStyles({ dataSlider });\n      EventResize();\n      SetEventSwipe();\n    };\n\n    let currentPosition = 0;\n    let styles = STYLES_SLIDER_EVENTS_ELEMENT;\n\n    dataSlider.style.visibility = 'hidden';\n\n    coverElement.classList.add(ELEMENT_SLIDER_EVENT_COVER);\n\n    wrapper.classList.add(ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER);\n\n    wrapper.appendChild(containerWrapper);\n    wrapper.appendChild(coverElement);\n\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n    container.classList.add(ELEMENT_SLIDER_EVENT_CONTAINER);\n    container.appendChild(wrapper);\n\n    declaration.classList.add(ELEMENT_SLIDER_EVENT_DECLRATION);\n    declaration.appendChild(container);\n\n    window.addEventListener('resize', debounce(EventResize, 20));\n\n    return {\n      element: declaration,\n      styles,\n      events: {\n        load,\n        size,\n      },\n    };\n  })();\n"],"names":["token","jssToCSS","typography","iconArrowLeft","iconArrowRight","sliderWrapper","parsePixelValue","setupSwipeDetection","styles","debounce"],"mappings":"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"}

package/dist/composite/slider/events.mjs

@@ -1,8 +1,9 @@
-import { token, typography } from "@universityofmaryland/web-styles-library";
-import { BACK_ARROW, FORWARD_ARROW } from "../../utilities/assets/icons.mjs";
-import { CreateEventSwipe } from "../../utilities/js-events/index.mjs";
-import { debounce } from "../../utilities/performance/index.mjs";
-import { convertJSSObjectToStyles, convertPixelStringToNumber } from "../../utilities/theme/index.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import { jssToCSS, parsePixelValue } from "@universityofmaryland/web-utilities-library/styles";
+import { setupSwipeDetection } from "@universityofmaryland/web-utilities-library/events";
+import { debounce } from "@universityofmaryland/web-utilities-library/performance";
+import { arrow_left, arrow_right } from "@universityofmaryland/web-icons-library/arrows";
 const TABLET = 750;
 const DESKTOP = 1e3;
 const LARGE = 1300;
@@ -191,7 +192,7 @@ const IntroStyles = `
     display: block;
   }
 
-  ${convertJSSObjectToStyles({
+  ${jssToCSS({
   styleObj: {
     [`.${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE}`]: typography.sans.larger
   }
@@ -275,7 +276,7 @@ const CreateBackButton = ({
   SetSlideDatesBackwards
 }) => {
   const button = document.createElement("button");
-  button.innerHTML = BACK_ARROW;
+  button.innerHTML = arrow_left;
   button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON);
   button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK);
   button.style.display = "none";
@@ -297,7 +298,7 @@ const CreateForwardButton = ({
   SetSlideDatesForward
 }) => {
   const button = document.createElement("button");
-  button.innerHTML = FORWARD_ARROW;
+  button.innerHTML = arrow_right;
   button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON);
   button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD);
   button.setAttribute("type", "button");
@@ -423,9 +424,7 @@ const SizeDatesElements = ({
       const maxHeightElement = dateElements.sort((a, b) => {
         return a.offsetHeight - b.offsetHeight;
       })[0];
-      const height = maxHeightElement.offsetHeight + convertPixelStringToNumber(
-        maxHeightElement.style.marginTop
-      );
+      const height = maxHeightElement.offsetHeight + parsePixelValue(maxHeightElement.style.marginTop);
       sliderWrapper2.style.height = `${height}px`;
     };
     const setWidthPerDate = () => {
@@ -523,7 +522,7 @@ const EventSwipe = ({
     }
     SetButtonVisibility();
   };
-  CreateEventSwipe({ container, callback: swipes });
+  setupSwipeDetection({ container, callback: swipes });
 };
 const OnLoadStyles = ({ dataSlider }) => {
   dataSlider.style.display = "flex";
@@ -591,10 +590,7 @@ const events = (props) => (() => {
   container.appendChild(wrapper);
   declaration.classList.add(ELEMENT_SLIDER_EVENT_DECLRATION);
   declaration.appendChild(container);
-  window.addEventListener(
-    "resize",
-    debounce(EventResize, 20)
-  );
+  window.addEventListener("resize", debounce(EventResize, 20));
   return {
     element: declaration,
     styles,