@universityofmaryland/web-elements-library 1.3.7 → 1.4.1

package/dist/composite/navigation/elements/slider/index.mjs

@@ -0,0 +1,291 @@
+import { token } from "@universityofmaryland/web-styles-library";
+import { debounce } from "../../../../utilities/performance/index.mjs";
+import { findParent } from "../../../../utilities/markup/locate.mjs";
+import "../../../../node_modules/postcss/lib/postcss.mjs";
+import "../../../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../../../node_modules/postcss-js/index.mjs";
+import Slides from "./slides.mjs";
+import SlideFirst from "./slide-first.mjs";
+import SlideAction from "./action.mjs";
+const ANIMATION_TIME = 300;
+const ATTRIBUTE_CHILD_REF = "data-child-ref";
+const ATTRIBUTE_PARENT_REF = "data-parent-ref";
+const ATTRIBUTE_ACTIVE_SLIDE = "data-active";
+const ATTRIBUTE_ACTIVE_SELECTED = "data-selected";
+const ATTRIBUTE_DATA_SLIDE = "data-slide";
+const ATTRIBUTE_DISPLAY_TYPE = "display-type";
+const DISPLAY_TYPE_DRAWER = "drawer-nav";
+const DISPLAY_TYPE_INTERIOR_NAV = "interior-nav";
+const ELEMENT_NAVIGATION_SLIDER_CONTAINER = "navigation-slider-container";
+const ELEMENT_NAVIGATION_SLIDER = "navigation-slider";
+const ELEMENT_SLIDER_DECORATIVE_LINE = "navigation-slider-decorative-line";
+const IS_DISPLAY_DRAWER = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_DRAWER}]`;
+const IS_DISPLAY_INTERIOR = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_INTERIOR_NAV}]`;
+const OVERWRITE_DISPLAY_DRAWER_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER}`;
+const OVERWRITE_DISPLAY_DRAWER_DECORATION = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${ELEMENT_SLIDER_DECORATIVE_LINE}`;
+const OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${Slides.Elements.wrapper}`;
+const OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${SlideAction.Elements.container}`;
+const OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideAction.Elements.container}`;
+const OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideFirst.Elements.secondaryContainer} .${SlideAction.Elements.container}`;
+const OVERWRITE_DISPLAY_INTERIOR_HEADLINE = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${Slides.Elements.headline}`;
+const OverwriteDisplayDrawer = `
+  ${OVERWRITE_DISPLAY_DRAWER_CONTAINER} {
+    background-color: ${token.color.white};
+    padding: ${token.spacing["2xl"]} 0;
+    width: calc(100vw - ${token.spacing["8xl"]});
+    max-width: 400px;
+    min-width: 227px;
+  }
+
+  ${OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER} {
+    padding: 0 ${token.spacing.md};
+  }
+
+  ${OVERWRITE_DISPLAY_DRAWER_DECORATION} {
+    display: block;
+  }
+
+  ${OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER} {
+    padding-left: ${token.spacing.sm};
+  }
+`;
+const OverwriteDisplayInterior = `
+  ${OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER} {
+    border-bottom: 1px solid ${token.color.gray.light};
+    padding-bottom: ${token.spacing.md};
+    margin-bottom: ${token.spacing.md};
+  }
+
+  ${OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER}:last-child {
+    margin-bottom: 0;
+  }
+
+  ${OVERWRITE_DISPLAY_INTERIOR_HEADLINE} {
+    border-bottom: 1px solid ${token.color.gray.light};
+    padding-bottom: ${token.spacing.md};
+    margin-bottom: ${token.spacing.md};
+  }
+`;
+const DecorativeLineStyles = `
+  .${ELEMENT_SLIDER_DECORATIVE_LINE} {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 8px;
+    background-color: ${token.color.red};
+    display: none;
+  }
+`;
+const SliderStyles = `
+  .${ELEMENT_NAVIGATION_SLIDER} {
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+  }
+
+  .${ELEMENT_NAVIGATION_SLIDER} > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: ${token.color.white};
+    display: none;
+  }
+
+  .${ELEMENT_NAVIGATION_SLIDER} > *[${ATTRIBUTE_ACTIVE_SLIDE}] {
+    display: block;
+  }
+`;
+const SelectedLinkStyles = `
+  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_SELECTED}] {
+    position: relative;
+  }
+
+  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_SELECTED}] span {
+    display: inline;
+    position: relative;
+    background-position: left calc(100% - 0px);
+    background-repeat: no-repeat;
+    background-size: 100% 2.5px;
+    background-image: linear-gradient(#ffd200, #ffd200);
+  }
+`;
+const STYLES_NAV_SLIDER_ELEMENT = `
+  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} {
+    position: relative;
+    height: 100%;
+    cursor: default;
+  }
+
+  ${Slides.Styles}
+  ${DecorativeLineStyles}
+  ${SliderStyles}
+  ${SelectedLinkStyles}
+  ${OverwriteDisplayDrawer}
+  ${OverwriteDisplayInterior}
+`;
+const CreateChildrenElements = (props) => {
+  const { displayType } = props;
+  const sliderContainer = document.createElement("div");
+  const slider = document.createElement("div");
+  const decorativeLine = document.createElement("div");
+  const isDisplayDrawerNav = displayType === DISPLAY_TYPE_DRAWER;
+  let displayTypeSetting = DISPLAY_TYPE_INTERIOR_NAV;
+  if (isDisplayDrawerNav) displayTypeSetting = DISPLAY_TYPE_DRAWER;
+  Slides.CreateElement({ ...props, slider });
+  slider.classList.add(ELEMENT_NAVIGATION_SLIDER);
+  decorativeLine.classList.add(ELEMENT_SLIDER_DECORATIVE_LINE);
+  sliderContainer.appendChild(decorativeLine);
+  sliderContainer.setAttribute(ATTRIBUTE_DISPLAY_TYPE, displayTypeSetting);
+  sliderContainer.classList.add(ELEMENT_NAVIGATION_SLIDER_CONTAINER);
+  sliderContainer.appendChild(slider);
+  sliderContainer.addEventListener("click", (event) => {
+    event.stopPropagation();
+  });
+  return sliderContainer;
+};
+const CreateNavSliderElement = (props) => (() => {
+  const elementContainer = document.createElement("div");
+  const getUpcomingSlide = () => {
+    const upcomingSlide = elementContainer.querySelector(
+      `[${ATTRIBUTE_PARENT_REF}=${upcomingSlideRef}]`
+    );
+    return upcomingSlide;
+  };
+  const getUpcomingSlideParent = () => {
+    const upcomingSlide = elementContainer.querySelector(
+      `[${ATTRIBUTE_CHILD_REF}=${upcomingSlideRef}]`
+    );
+    const parent = findParent({
+      element: upcomingSlide,
+      attr: ATTRIBUTE_DATA_SLIDE
+    });
+    return parent;
+  };
+  const sizeContainer = ({
+    withTransition = false
+  }) => {
+    let containerSize = 500;
+    if (currentSlide) {
+      const children2 = Array.from(currentSlide.children);
+      containerSize = children2.reduce((acc, currentElement) => {
+        return acc + currentElement.offsetHeight;
+      }, 50);
+    }
+    elementContainer.style.height = `${containerSize}px`;
+    if (withTransition)
+      elementContainer.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;
+    setTimeout(() => {
+      elementContainer.style.transition = "none";
+    }, ANIMATION_TIME);
+  };
+  const eventSlide = ({ isRight = false }) => {
+    const activeSlide = elementContainer.querySelector(
+      `[${ATTRIBUTE_ACTIVE_SLIDE}]`
+    );
+    const upcomingSlide = isRight ? getUpcomingSlideParent() : getUpcomingSlide();
+    const slides = [activeSlide, upcomingSlide];
+    if (!upcomingSlide) {
+      console.error("Missing slide for slide event");
+      return null;
+    }
+    const firstLink = upcomingSlide.querySelector("a");
+    const animate = () => {
+      let startPositionForUpcomingSlide = "100%";
+      let transitionPosition = "-100%";
+      if (isRight) {
+        startPositionForUpcomingSlide = "-100%";
+        transitionPosition = "100%";
+      }
+      upcomingSlide.style.left = startPositionForUpcomingSlide;
+      upcomingSlide.style.display = "block";
+      setTimeout(() => {
+        slides.forEach((slide) => {
+          slide.style.transition = `transform ${ANIMATION_TIME}ms ease-in-out`;
+          slide.style.transform = `translateX(${transitionPosition})`;
+        });
+        setCurrentSlide({ element: upcomingSlide, withTransition: true });
+      }, 100);
+      setTimeout(() => {
+        slides.forEach((slide) => {
+          slide.style.transition = "none";
+          slide.style.transform = "translateX(0)";
+          slide.style.left = "0";
+          slide.removeAttribute("style");
+        });
+        upcomingSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, "");
+        activeSlide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);
+        if (firstLink) firstLink.focus();
+      }, ANIMATION_TIME + 100);
+    };
+    if (!upcomingSlide || !activeSlide)
+      throw new Error("Missing slide for slide event");
+    animate();
+    if (upcomingSlide.offsetHeight > elementContainer.offsetHeight) {
+      setTimeout(() => {
+        upcomingSlide.style.overflowY = `scroll`;
+        upcomingSlide.style.height = `100%`;
+      }, ANIMATION_TIME + 100);
+    }
+  };
+  const setUpcomingSlide = (arg) => {
+    upcomingSlideRef = arg;
+  };
+  const setCurrentSlide = ({
+    element,
+    withTransition = false
+  }) => {
+    currentSlide = element;
+    setTimeout(() => {
+      sizeContainer({ withTransition });
+    }, 100);
+  };
+  const eventSlideLeft = () => eventSlide({ isRight: false });
+  const eventSlideRight = () => eventSlide({ isRight: true });
+  const eventReize = () => {
+    setTimeout(() => {
+      sizeContainer({ withTransition: false });
+    }, 200);
+  };
+  const GetContainer = () => elementContainer;
+  let upcomingSlideRef = null;
+  let currentSlide = null;
+  const children = CreateChildrenElements({
+    ...props,
+    GetContainer,
+    eventSlideLeft,
+    eventSlideRight,
+    setUpcomingSlide,
+    setCurrentSlide,
+    ATTRIBUTE_CHILD_REF,
+    ATTRIBUTE_PARENT_REF,
+    ATTRIBUTE_DATA_SLIDE,
+    ATTRIBUTE_ACTIVE_SLIDE,
+    currentSlide
+  });
+  elementContainer.appendChild(children);
+  window.addEventListener(
+    "resize",
+    debounce(() => {
+      eventReize();
+    }, 20)
+  );
+  return {
+    container: elementContainer,
+    events: {
+      resize: eventReize
+    }
+  };
+})();
+const NavDrawerSlider = {
+  CreateElement: CreateNavSliderElement,
+  Styles: STYLES_NAV_SLIDER_ELEMENT,
+  Elements: {
+    slider: ELEMENT_NAVIGATION_SLIDER
+  }
+};
+export {
+  NavDrawerSlider as default
+};
+//# sourceMappingURL=index.mjs.map

package/dist/composite/navigation/elements/slider/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/navigation/elements/slider/index.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport Slides, { TypeSlideProps } from './slides';\nimport SlideFirst from './slide-first';\nimport SlideAction from './action';\n\ntype TypeSubElements = TypeSlideProps;\n\nexport type TypeNavSliderRequirements = {\n  primarySlideLinks?: HTMLElement | null;\n  primarySlidesSecondaryLinks?: HTMLElement | null;\n  primarySlideContent?: HTMLElement | null;\n  childrenSlides?: HTMLElement | null;\n  childrenSlideContent?: HTMLSlotElement[];\n  displayType?: string;\n};\n\nexport type TypeNavSliderProps = TypeSubElements & TypeNavSliderRequirements;\n\nconst ANIMATION_TIME = 300;\nconst ATTRIBUTE_CHILD_REF = 'data-child-ref';\nconst ATTRIBUTE_PARENT_REF = 'data-parent-ref';\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active';\nconst ATTRIBUTE_ACTIVE_SELECTED = 'data-selected';\nconst ATTRIBUTE_DATA_SLIDE = 'data-slide';\nconst ATTRIBUTE_DISPLAY_TYPE = 'display-type';\n\nconst DISPLAY_TYPE_DRAWER = 'drawer-nav';\nconst DISPLAY_TYPE_INTERIOR_NAV = 'interior-nav';\n\nconst ELEMENT_NAVIGATION_SLIDER_CONTAINER = 'navigation-slider-container';\nconst ELEMENT_NAVIGATION_SLIDER = 'navigation-slider';\nconst ELEMENT_SLIDER_DECORATIVE_LINE = 'navigation-slider-decorative-line';\n\nconst IS_DISPLAY_DRAWER = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_DRAWER}]`;\nconst IS_DISPLAY_INTERIOR = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_INTERIOR_NAV}]`;\n\nconst OVERWRITE_DISPLAY_DRAWER_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER}`;\nconst OVERWRITE_DISPLAY_DRAWER_DECORATION = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${ELEMENT_SLIDER_DECORATIVE_LINE}`;\nconst OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${Slides.Elements.wrapper}`;\nconst OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${SlideAction.Elements.container}`;\n\nconst OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideAction.Elements.container}`;\nconst OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideFirst.Elements.secondaryContainer} .${SlideAction.Elements.container}`;\nconst OVERWRITE_DISPLAY_INTERIOR_HEADLINE = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${Slides.Elements.headline}`;\n\n// prettier-ignore\nconst OverwriteDisplayDrawer = `\n  ${OVERWRITE_DISPLAY_DRAWER_CONTAINER} {\n    background-color: ${token.color.white};\n    padding: ${token.spacing['2xl']} 0;\n    width: calc(100vw - ${token.spacing['8xl']});\n    max-width: 400px;\n    min-width: 227px;\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER} {\n    padding: 0 ${token.spacing.md};\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_DECORATION} {\n    display: block;\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER} {\n    padding-left: ${token.spacing.sm};\n  }\n`;\n\n// prettier-ignore\nconst OverwriteDisplayInterior = `\n  ${OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n\n  ${OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER}:last-child {\n    margin-bottom: 0;\n  }\n\n  ${OVERWRITE_DISPLAY_INTERIOR_HEADLINE} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst DecorativeLineStyles = `\n  .${ELEMENT_SLIDER_DECORATIVE_LINE} {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    height: 8px;\n    background-color: ${token.color.red};\n    display: none;\n  }\n`;\n\n// prettier-ignore\nconst SliderStyles = `\n  .${ELEMENT_NAVIGATION_SLIDER} {\n    position: relative;\n    overflow: hidden;\n    height: 100%;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER} > * {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    background-color: ${token.color.white};\n    display: none;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER} > *[${ATTRIBUTE_ACTIVE_SLIDE}] {\n    display: block;\n  }\n`;\n\nconst SelectedLinkStyles = `\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_SELECTED}] {\n    position: relative;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_SELECTED}] span {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(#ffd200, #ffd200);\n  }\n`;\n\n// prettier-ignore\nconst STYLES_NAV_SLIDER_ELEMENT = `\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} {\n    position: relative;\n    height: 100%;\n    cursor: default;\n  }\n\n  ${Slides.Styles}\n  ${DecorativeLineStyles}\n  ${SliderStyles}\n  ${SelectedLinkStyles}\n  ${OverwriteDisplayDrawer}\n  ${OverwriteDisplayInterior}\n`;\n\nconst CreateChildrenElements = (props: TypeNavSliderProps) => {\n  const { displayType } = props;\n  const sliderContainer = document.createElement('div');\n  const slider = document.createElement('div');\n  const decorativeLine = document.createElement('div');\n  const isDisplayDrawerNav = displayType === DISPLAY_TYPE_DRAWER;\n  let displayTypeSetting = DISPLAY_TYPE_INTERIOR_NAV;\n\n  if (isDisplayDrawerNav) displayTypeSetting = DISPLAY_TYPE_DRAWER;\n\n  Slides.CreateElement({ ...props, slider });\n\n  slider.classList.add(ELEMENT_NAVIGATION_SLIDER);\n\n  decorativeLine.classList.add(ELEMENT_SLIDER_DECORATIVE_LINE);\n  sliderContainer.appendChild(decorativeLine);\n\n  sliderContainer.setAttribute(ATTRIBUTE_DISPLAY_TYPE, displayTypeSetting);\n  sliderContainer.classList.add(ELEMENT_NAVIGATION_SLIDER_CONTAINER);\n  sliderContainer.appendChild(slider);\n\n  sliderContainer.addEventListener('click', (event) => {\n    event.stopPropagation();\n  });\n\n  return sliderContainer;\n};\n\nconst CreateNavSliderElement = (props: TypeNavSliderRequirements) =>\n  (() => {\n    const elementContainer = document.createElement('div');\n    const getUpcomingSlide = () => {\n      const upcomingSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_PARENT_REF}=${upcomingSlideRef}]`,\n      ) as HTMLDivElement;\n\n      return upcomingSlide;\n    };\n    const getUpcomingSlideParent = () => {\n      const upcomingSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_CHILD_REF}=${upcomingSlideRef}]`,\n      ) as HTMLDivElement;\n      const parent = Utility.markup.locate.findParent({\n        element: upcomingSlide,\n        attr: ATTRIBUTE_DATA_SLIDE,\n      });\n\n      return parent;\n    };\n    const sizeContainer = ({\n      withTransition = false,\n    }: {\n      withTransition?: boolean;\n    }) => {\n      let containerSize = 500;\n      if (currentSlide) {\n        const children = Array.from(currentSlide.children) as HTMLDivElement[];\n        containerSize = children.reduce((acc, currentElement) => {\n          return acc + currentElement.offsetHeight;\n        }, 50);\n      }\n\n      elementContainer.style.height = `${containerSize}px`;\n      if (withTransition)\n        elementContainer.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;\n\n      setTimeout(() => {\n        elementContainer.style.transition = 'none';\n      }, ANIMATION_TIME);\n    };\n    const eventSlide = ({ isRight = false }: { isRight?: boolean }) => {\n      const activeSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_ACTIVE_SLIDE}]`,\n      ) as HTMLDivElement;\n      const upcomingSlide = isRight\n        ? getUpcomingSlideParent()\n        : getUpcomingSlide();\n      const slides = [activeSlide, upcomingSlide];\n\n      if (!upcomingSlide) {\n        console.error('Missing slide for slide event');\n        return null;\n      }\n      const firstLink = upcomingSlide.querySelector('a') as HTMLAnchorElement;\n\n      const animate = () => {\n        let startPositionForUpcomingSlide = '100%';\n        let transitionPosition = '-100%';\n\n        if (isRight) {\n          startPositionForUpcomingSlide = '-100%';\n          transitionPosition = '100%';\n        }\n\n        upcomingSlide.style.left = startPositionForUpcomingSlide;\n        upcomingSlide.style.display = 'block';\n\n        setTimeout(() => {\n          slides.forEach((slide) => {\n            slide.style.transition = `transform ${ANIMATION_TIME}ms ease-in-out`;\n            slide.style.transform = `translateX(${transitionPosition})`;\n          });\n          setCurrentSlide({ element: upcomingSlide, withTransition: true });\n        }, 100);\n\n        setTimeout(() => {\n          slides.forEach((slide) => {\n            slide.style.transition = 'none';\n            slide.style.transform = 'translateX(0)';\n            slide.style.left = '0';\n            slide.removeAttribute('style');\n          });\n\n          upcomingSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n          activeSlide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n          if (firstLink) firstLink.focus();\n        }, ANIMATION_TIME + 100);\n      };\n\n      if (!upcomingSlide || !activeSlide)\n        throw new Error('Missing slide for slide event');\n\n      animate();\n\n      if (upcomingSlide.offsetHeight > elementContainer.offsetHeight) {\n        setTimeout(() => {\n          upcomingSlide.style.overflowY = `scroll`;\n          upcomingSlide.style.height = `100%`;\n        }, ANIMATION_TIME + 100);\n      }\n    };\n    const setUpcomingSlide = (arg: string) => {\n      upcomingSlideRef = arg;\n    };\n    const setCurrentSlide = ({\n      element,\n      withTransition = false,\n    }: {\n      element: HTMLElement;\n      withTransition?: boolean;\n    }) => {\n      currentSlide = element;\n\n      setTimeout(() => {\n        sizeContainer({ withTransition });\n      }, 100);\n    };\n    const eventSlideLeft = () => eventSlide({ isRight: false });\n    const eventSlideRight = () => eventSlide({ isRight: true });\n    const eventReize = () => {\n      setTimeout(() => {\n        sizeContainer({ withTransition: false });\n      }, 200);\n    };\n    const GetContainer = () => elementContainer;\n    let upcomingSlideRef: string | null = null;\n    let currentSlide: HTMLElement | null = null;\n\n    const children = CreateChildrenElements({\n      ...props,\n      GetContainer,\n      eventSlideLeft,\n      eventSlideRight,\n      setUpcomingSlide,\n      setCurrentSlide,\n      ATTRIBUTE_CHILD_REF,\n      ATTRIBUTE_PARENT_REF,\n      ATTRIBUTE_DATA_SLIDE,\n      ATTRIBUTE_ACTIVE_SLIDE,\n      currentSlide,\n    });\n\n    elementContainer.appendChild(children);\n\n    window.addEventListener(\n      'resize',\n      Utility.performance.debounce(() => {\n        eventReize();\n      }, 20),\n    );\n\n    return {\n      container: elementContainer,\n      events: {\n        resize: eventReize,\n      },\n    };\n  })();\n\nexport default {\n  CreateElement: CreateNavSliderElement,\n  Styles: STYLES_NAV_SLIDER_ELEMENT,\n  Elements: {\n    slider: ELEMENT_NAVIGATION_SLIDER,\n  },\n};\n"],"names":["Utility.markup.locate.findParent","children","Utility.performance.debounce"],"mappings":"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"}

package/dist/composite/navigation/elements/slider/slide-first.js

@@ -0,0 +1,121 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const index = require("../../../../utilities/theme/index.js");
+const slides = require("./slides.js");
+const action = require("./action.js");
+const ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER = "nav-slider-first-slide-container";
+const ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER = "nav-slider-first-slide-primary-links-container";
+const ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER = "nav-slider-secondary-links-container";
+const ELEMENT_SLIDER_ADDITIONAL_CONTENT = "nav-slider-additional-content";
+const OVERWRITE_ACTION_PRIMARY_CONTAINER = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${action.Elements.container}`;
+const OVERWRITE_ACTION_PRIMARY_LINK = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${action.Elements.link}`;
+const OverwriteSlidePrimaryLink = `
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`${OVERWRITE_ACTION_PRIMARY_LINK}`]: Styles.typography.sans.large
+  }
+})}
+
+  ${OVERWRITE_ACTION_PRIMARY_LINK} {
+    font-weight: 700;
+    line-height: 1.3em;
+  }
+`;
+const OverwriteSlidePrimaryContainer = `
+  ${OVERWRITE_ACTION_PRIMARY_CONTAINER} {
+    border-bottom: 1px solid ${Styles.token.color.gray.light};
+    padding-bottom: ${Styles.token.spacing.md};
+    margin-bottom: ${Styles.token.spacing.md};
+  }
+`;
+const SecondaryLinksContainer = `
+  .${ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER} .${action.Elements.container}:last-child {
+    border-bottom: 1px solid ${Styles.token.color.gray.light};
+    padding-bottom: ${Styles.token.spacing.md};
+  }
+`;
+const AdditonalContent = `
+  .${ELEMENT_SLIDER_ADDITIONAL_CONTENT} {
+    padding-top: ${Styles.token.spacing.md};
+  }
+`;
+const STYLES_SLIDE_FIRST_ELEMENT = `
+  ${SecondaryLinksContainer}
+  ${AdditonalContent}
+  ${OverwriteSlidePrimaryContainer}
+  ${OverwriteSlidePrimaryLink}
+`;
+const createPrimaryLinks = (props) => {
+  const container = document.createElement("div");
+  const { primarySlideLinks } = props;
+  if (!primarySlideLinks) return null;
+  const links = Array.from(
+    primarySlideLinks.querySelectorAll("a")
+  );
+  if (links.length > 0) {
+    container.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER);
+    links.forEach(
+      (link) => container.appendChild(action.CreateElement({ ...props, link }))
+    );
+    return container;
+  }
+  return null;
+};
+const createSecondaryLinks = (props) => {
+  const container = document.createElement("div");
+  const { primarySlidesSecondaryLinks } = props;
+  if (!primarySlidesSecondaryLinks) return null;
+  const elements = Array.from(
+    primarySlidesSecondaryLinks.querySelectorAll(":scope > *")
+  );
+  if (elements.length > 0) {
+    container.classList.add(ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER);
+    elements.forEach(
+      (link) => container.appendChild(action.CreateElement({ ...props, link }))
+    );
+    return container;
+  }
+  return null;
+};
+const createAdditonalContent = (element) => {
+  const container = document.createElement("div");
+  const { primarySlideContent } = element;
+  if (!primarySlideContent) return null;
+  container.classList.add(ELEMENT_SLIDER_ADDITIONAL_CONTENT);
+  container.appendChild(primarySlideContent);
+  return container;
+};
+const CreateSlideFirstElement = (props) => {
+  const {
+    setCurrentSlide,
+    ATTRIBUTE_DATA_SLIDE,
+    ATTRIBUTE_ACTIVE_SLIDE,
+    isContextMenu
+  } = props;
+  const sliderContainer = document.createElement("div");
+  const wrapper = document.createElement("div");
+  const primarlyLinkContent = createPrimaryLinks(props);
+  const secondaryLinkContent = createSecondaryLinks(props);
+  const additionalContent = createAdditonalContent(props);
+  sliderContainer.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER);
+  sliderContainer.setAttribute(`${ATTRIBUTE_DATA_SLIDE}`, "");
+  if (!isContextMenu) {
+    sliderContainer.setAttribute(`${ATTRIBUTE_ACTIVE_SLIDE}`, "");
+    setCurrentSlide({ element: sliderContainer });
+  }
+  if (primarlyLinkContent) wrapper.appendChild(primarlyLinkContent);
+  if (secondaryLinkContent) wrapper.appendChild(secondaryLinkContent);
+  if (additionalContent) wrapper.appendChild(additionalContent);
+  wrapper.classList.add(slides.Elements.wrapper);
+  sliderContainer.appendChild(wrapper);
+  return sliderContainer;
+};
+const SlideFirst = {
+  CreateElement: CreateSlideFirstElement,
+  Styles: STYLES_SLIDE_FIRST_ELEMENT,
+  Elements: {
+    secondaryContainer: ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER
+  }
+};
+module.exports = SlideFirst;
+//# sourceMappingURL=slide-first.js.map

package/dist/composite/navigation/elements/slider/slide-first.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide-first.js","sources":["../../../../../source/composite/navigation/elements/slider/slide-first.ts"],"sourcesContent":["import { token, typography } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport Slides from './slides';\nimport SlideAction, { TypeActionProps } from './action';\n\nexport type TypeFirstSlideProps = TypeActionProps & {\n  ATTRIBUTE_ACTIVE_SLIDE: string;\n  ATTRIBUTE_DATA_SLIDE: string;\n  currentSlide: HTMLElement | null;\n  primarySlideLinks?: HTMLElement | null;\n  primarySlidesSecondaryLinks?: HTMLElement | null;\n  primarySlideContent?: HTMLElement | null;\n  setCurrentSlide: (arg: {\n    element: HTMLElement;\n    withTransition?: boolean;\n  }) => void;\n  eventSlideRight: () => void;\n};\n\nexport type TypeFirstSlide = TypeFirstSlideProps & {\n  isContextMenu: boolean;\n};\n\nconst ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER = 'nav-slider-first-slide-container';\nconst ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER =\n  'nav-slider-first-slide-primary-links-container';\nconst ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER =\n  'nav-slider-secondary-links-container';\nconst ELEMENT_SLIDER_ADDITIONAL_CONTENT = 'nav-slider-additional-content';\n\nconst OVERWRITE_ACTION_PRIMARY_CONTAINER = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${SlideAction.Elements.container}`;\nconst OVERWRITE_ACTION_PRIMARY_LINK = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${SlideAction.Elements.link}`;\n\n//prettier-ignore;\nconst OverwriteSlidePrimaryLink = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`${OVERWRITE_ACTION_PRIMARY_LINK}`]: typography.sans.large,\n    },\n  })}\n\n  ${OVERWRITE_ACTION_PRIMARY_LINK} {\n    font-weight: 700;\n    line-height: 1.3em;\n  }\n`;\n\n//prettier-ignore;\nconst OverwriteSlidePrimaryContainer = `\n  ${OVERWRITE_ACTION_PRIMARY_CONTAINER} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n`;\n\n//prettier-ignore;\nconst SecondaryLinksContainer = `\n  .${ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER} .${SlideAction.Elements.container}:last-child {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n  }\n`;\n\n//prettier-ignore;\nconst AdditonalContent = `\n  .${ELEMENT_SLIDER_ADDITIONAL_CONTENT} {\n    padding-top: ${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_SLIDE_FIRST_ELEMENT = `\n  ${SecondaryLinksContainer}\n  ${AdditonalContent}\n  ${OverwriteSlidePrimaryContainer}\n  ${OverwriteSlidePrimaryLink}\n`;\n\nconst createPrimaryLinks = (props: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlideLinks } = props;\n\n  if (!primarySlideLinks) return null;\n\n  const links = Array.from(\n    primarySlideLinks.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  if (links.length > 0) {\n    container.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER);\n\n    links.forEach((link) =>\n      container.appendChild(SlideAction.CreateElement({ ...props, link })),\n    );\n\n    return container;\n  }\n\n  return null;\n};\n\nconst createSecondaryLinks = (props: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlidesSecondaryLinks } = props;\n\n  if (!primarySlidesSecondaryLinks) return null;\n\n  const elements = Array.from(\n    primarySlidesSecondaryLinks.querySelectorAll(':scope > *'),\n  ) as HTMLAnchorElement[];\n\n  if (elements.length > 0) {\n    container.classList.add(ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER);\n\n    elements.forEach((link) =>\n      container.appendChild(SlideAction.CreateElement({ ...props, link })),\n    );\n\n    return container;\n  }\n\n  return null;\n};\n\nconst createAdditonalContent = (element: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlideContent } = element;\n\n  if (!primarySlideContent) return null;\n\n  container.classList.add(ELEMENT_SLIDER_ADDITIONAL_CONTENT);\n  container.appendChild(primarySlideContent);\n\n  return container;\n};\n\nconst CreateSlideFirstElement = (props: TypeFirstSlide) => {\n  const {\n    setCurrentSlide,\n    ATTRIBUTE_DATA_SLIDE,\n    ATTRIBUTE_ACTIVE_SLIDE,\n    isContextMenu,\n  } = props;\n  const sliderContainer = document.createElement('div');\n  const wrapper = document.createElement('div');\n  const primarlyLinkContent = createPrimaryLinks(props);\n  const secondaryLinkContent = createSecondaryLinks(props);\n  const additionalContent = createAdditonalContent(props);\n\n  sliderContainer.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER);\n  sliderContainer.setAttribute(`${ATTRIBUTE_DATA_SLIDE}`, '');\n\n  if (!isContextMenu) {\n    sliderContainer.setAttribute(`${ATTRIBUTE_ACTIVE_SLIDE}`, '');\n    setCurrentSlide({ element: sliderContainer });\n  }\n\n  if (primarlyLinkContent) wrapper.appendChild(primarlyLinkContent);\n  if (secondaryLinkContent) wrapper.appendChild(secondaryLinkContent);\n  if (additionalContent) wrapper.appendChild(additionalContent);\n\n  wrapper.classList.add(Slides.Elements.wrapper);\n  sliderContainer.appendChild(wrapper);\n\n  return sliderContainer;\n};\n\nexport default {\n  CreateElement: CreateSlideFirstElement,\n  Styles: STYLES_SLIDE_FIRST_ELEMENT,\n  Elements: {\n    secondaryContainer: ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER,\n  },\n};\n"],"names":["SlideAction","Utility.theme.convertJSSObjectToStyles","typography","token","Slides"],"mappings":"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"}

package/dist/composite/navigation/elements/slider/slide-first.mjs

@@ -0,0 +1,122 @@
+import { typography, token } from "@universityofmaryland/web-styles-library";
+import { convertJSSObjectToStyles } from "../../../../utilities/theme/index.mjs";
+import Slides from "./slides.mjs";
+import SlideAction from "./action.mjs";
+const ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER = "nav-slider-first-slide-container";
+const ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER = "nav-slider-first-slide-primary-links-container";
+const ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER = "nav-slider-secondary-links-container";
+const ELEMENT_SLIDER_ADDITIONAL_CONTENT = "nav-slider-additional-content";
+const OVERWRITE_ACTION_PRIMARY_CONTAINER = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${SlideAction.Elements.container}`;
+const OVERWRITE_ACTION_PRIMARY_LINK = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${SlideAction.Elements.link}`;
+const OverwriteSlidePrimaryLink = `
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`${OVERWRITE_ACTION_PRIMARY_LINK}`]: typography.sans.large
+  }
+})}
+
+  ${OVERWRITE_ACTION_PRIMARY_LINK} {
+    font-weight: 700;
+    line-height: 1.3em;
+  }
+`;
+const OverwriteSlidePrimaryContainer = `
+  ${OVERWRITE_ACTION_PRIMARY_CONTAINER} {
+    border-bottom: 1px solid ${token.color.gray.light};
+    padding-bottom: ${token.spacing.md};
+    margin-bottom: ${token.spacing.md};
+  }
+`;
+const SecondaryLinksContainer = `
+  .${ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER} .${SlideAction.Elements.container}:last-child {
+    border-bottom: 1px solid ${token.color.gray.light};
+    padding-bottom: ${token.spacing.md};
+  }
+`;
+const AdditonalContent = `
+  .${ELEMENT_SLIDER_ADDITIONAL_CONTENT} {
+    padding-top: ${token.spacing.md};
+  }
+`;
+const STYLES_SLIDE_FIRST_ELEMENT = `
+  ${SecondaryLinksContainer}
+  ${AdditonalContent}
+  ${OverwriteSlidePrimaryContainer}
+  ${OverwriteSlidePrimaryLink}
+`;
+const createPrimaryLinks = (props) => {
+  const container = document.createElement("div");
+  const { primarySlideLinks } = props;
+  if (!primarySlideLinks) return null;
+  const links = Array.from(
+    primarySlideLinks.querySelectorAll("a")
+  );
+  if (links.length > 0) {
+    container.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER);
+    links.forEach(
+      (link) => container.appendChild(SlideAction.CreateElement({ ...props, link }))
+    );
+    return container;
+  }
+  return null;
+};
+const createSecondaryLinks = (props) => {
+  const container = document.createElement("div");
+  const { primarySlidesSecondaryLinks } = props;
+  if (!primarySlidesSecondaryLinks) return null;
+  const elements = Array.from(
+    primarySlidesSecondaryLinks.querySelectorAll(":scope > *")
+  );
+  if (elements.length > 0) {
+    container.classList.add(ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER);
+    elements.forEach(
+      (link) => container.appendChild(SlideAction.CreateElement({ ...props, link }))
+    );
+    return container;
+  }
+  return null;
+};
+const createAdditonalContent = (element) => {
+  const container = document.createElement("div");
+  const { primarySlideContent } = element;
+  if (!primarySlideContent) return null;
+  container.classList.add(ELEMENT_SLIDER_ADDITIONAL_CONTENT);
+  container.appendChild(primarySlideContent);
+  return container;
+};
+const CreateSlideFirstElement = (props) => {
+  const {
+    setCurrentSlide,
+    ATTRIBUTE_DATA_SLIDE,
+    ATTRIBUTE_ACTIVE_SLIDE,
+    isContextMenu
+  } = props;
+  const sliderContainer = document.createElement("div");
+  const wrapper = document.createElement("div");
+  const primarlyLinkContent = createPrimaryLinks(props);
+  const secondaryLinkContent = createSecondaryLinks(props);
+  const additionalContent = createAdditonalContent(props);
+  sliderContainer.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER);
+  sliderContainer.setAttribute(`${ATTRIBUTE_DATA_SLIDE}`, "");
+  if (!isContextMenu) {
+    sliderContainer.setAttribute(`${ATTRIBUTE_ACTIVE_SLIDE}`, "");
+    setCurrentSlide({ element: sliderContainer });
+  }
+  if (primarlyLinkContent) wrapper.appendChild(primarlyLinkContent);
+  if (secondaryLinkContent) wrapper.appendChild(secondaryLinkContent);
+  if (additionalContent) wrapper.appendChild(additionalContent);
+  wrapper.classList.add(Slides.Elements.wrapper);
+  sliderContainer.appendChild(wrapper);
+  return sliderContainer;
+};
+const SlideFirst = {
+  CreateElement: CreateSlideFirstElement,
+  Styles: STYLES_SLIDE_FIRST_ELEMENT,
+  Elements: {
+    secondaryContainer: ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER
+  }
+};
+export {
+  SlideFirst as default
+};
+//# sourceMappingURL=slide-first.mjs.map

package/dist/composite/navigation/elements/slider/slide-first.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide-first.mjs","sources":["../../../../../source/composite/navigation/elements/slider/slide-first.ts"],"sourcesContent":["import { token, typography } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport Slides from './slides';\nimport SlideAction, { TypeActionProps } from './action';\n\nexport type TypeFirstSlideProps = TypeActionProps & {\n  ATTRIBUTE_ACTIVE_SLIDE: string;\n  ATTRIBUTE_DATA_SLIDE: string;\n  currentSlide: HTMLElement | null;\n  primarySlideLinks?: HTMLElement | null;\n  primarySlidesSecondaryLinks?: HTMLElement | null;\n  primarySlideContent?: HTMLElement | null;\n  setCurrentSlide: (arg: {\n    element: HTMLElement;\n    withTransition?: boolean;\n  }) => void;\n  eventSlideRight: () => void;\n};\n\nexport type TypeFirstSlide = TypeFirstSlideProps & {\n  isContextMenu: boolean;\n};\n\nconst ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER = 'nav-slider-first-slide-container';\nconst ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER =\n  'nav-slider-first-slide-primary-links-container';\nconst ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER =\n  'nav-slider-secondary-links-container';\nconst ELEMENT_SLIDER_ADDITIONAL_CONTENT = 'nav-slider-additional-content';\n\nconst OVERWRITE_ACTION_PRIMARY_CONTAINER = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${SlideAction.Elements.container}`;\nconst OVERWRITE_ACTION_PRIMARY_LINK = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${SlideAction.Elements.link}`;\n\n//prettier-ignore;\nconst OverwriteSlidePrimaryLink = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`${OVERWRITE_ACTION_PRIMARY_LINK}`]: typography.sans.large,\n    },\n  })}\n\n  ${OVERWRITE_ACTION_PRIMARY_LINK} {\n    font-weight: 700;\n    line-height: 1.3em;\n  }\n`;\n\n//prettier-ignore;\nconst OverwriteSlidePrimaryContainer = `\n  ${OVERWRITE_ACTION_PRIMARY_CONTAINER} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n`;\n\n//prettier-ignore;\nconst SecondaryLinksContainer = `\n  .${ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER} .${SlideAction.Elements.container}:last-child {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n  }\n`;\n\n//prettier-ignore;\nconst AdditonalContent = `\n  .${ELEMENT_SLIDER_ADDITIONAL_CONTENT} {\n    padding-top: ${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_SLIDE_FIRST_ELEMENT = `\n  ${SecondaryLinksContainer}\n  ${AdditonalContent}\n  ${OverwriteSlidePrimaryContainer}\n  ${OverwriteSlidePrimaryLink}\n`;\n\nconst createPrimaryLinks = (props: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlideLinks } = props;\n\n  if (!primarySlideLinks) return null;\n\n  const links = Array.from(\n    primarySlideLinks.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  if (links.length > 0) {\n    container.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER);\n\n    links.forEach((link) =>\n      container.appendChild(SlideAction.CreateElement({ ...props, link })),\n    );\n\n    return container;\n  }\n\n  return null;\n};\n\nconst createSecondaryLinks = (props: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlidesSecondaryLinks } = props;\n\n  if (!primarySlidesSecondaryLinks) return null;\n\n  const elements = Array.from(\n    primarySlidesSecondaryLinks.querySelectorAll(':scope > *'),\n  ) as HTMLAnchorElement[];\n\n  if (elements.length > 0) {\n    container.classList.add(ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER);\n\n    elements.forEach((link) =>\n      container.appendChild(SlideAction.CreateElement({ ...props, link })),\n    );\n\n    return container;\n  }\n\n  return null;\n};\n\nconst createAdditonalContent = (element: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlideContent } = element;\n\n  if (!primarySlideContent) return null;\n\n  container.classList.add(ELEMENT_SLIDER_ADDITIONAL_CONTENT);\n  container.appendChild(primarySlideContent);\n\n  return container;\n};\n\nconst CreateSlideFirstElement = (props: TypeFirstSlide) => {\n  const {\n    setCurrentSlide,\n    ATTRIBUTE_DATA_SLIDE,\n    ATTRIBUTE_ACTIVE_SLIDE,\n    isContextMenu,\n  } = props;\n  const sliderContainer = document.createElement('div');\n  const wrapper = document.createElement('div');\n  const primarlyLinkContent = createPrimaryLinks(props);\n  const secondaryLinkContent = createSecondaryLinks(props);\n  const additionalContent = createAdditonalContent(props);\n\n  sliderContainer.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER);\n  sliderContainer.setAttribute(`${ATTRIBUTE_DATA_SLIDE}`, '');\n\n  if (!isContextMenu) {\n    sliderContainer.setAttribute(`${ATTRIBUTE_ACTIVE_SLIDE}`, '');\n    setCurrentSlide({ element: sliderContainer });\n  }\n\n  if (primarlyLinkContent) wrapper.appendChild(primarlyLinkContent);\n  if (secondaryLinkContent) wrapper.appendChild(secondaryLinkContent);\n  if (additionalContent) wrapper.appendChild(additionalContent);\n\n  wrapper.classList.add(Slides.Elements.wrapper);\n  sliderContainer.appendChild(wrapper);\n\n  return sliderContainer;\n};\n\nexport default {\n  CreateElement: CreateSlideFirstElement,\n  Styles: STYLES_SLIDE_FIRST_ELEMENT,\n  Elements: {\n    secondaryContainer: ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER,\n  },\n};\n"],"names":["Utility.theme.convertJSSObjectToStyles"],"mappings":"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"}