@universityofmaryland/web-elements-library 1.3.7 → 1.4.1

package/dist/composite/slider/events.js

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

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

@@ -0,0 +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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"}