@universityofmaryland/web-elements-library 1.3.7 → 1.4.1

package/dist/composite/navigation/elements/slider/slides.js

@@ -0,0 +1,206 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const icons = require("../../../../utilities/assets/icons.js");
+const modify = require("../../../../utilities/markup/modify.js");
+const index = require("../../../../utilities/theme/index.js");
+const slideFirst = require("./slide-first.js");
+const action = require("./action.js");
+const ELEMENT_NAV_SLIDE_CONTAINER = "nav-slide-container";
+const ELEMENT_NAV_SLIDE_WRAPPER = "nav-slide-wrapper";
+const ELEMENT_NAV_SLIDE_HEADLINE = "nav-slide-headline";
+const ELEMENT_NAV_SLIDE_BACK_BUTTON = "nav-slide-action-back-button";
+const ELEMENT_NAV_SLIDE_CONTENT = "nav-slide-action-content";
+const ContentStyles = `
+  * + .${ELEMENT_NAV_SLIDE_CONTENT} {
+    margin-top: ${Styles.token.spacing.lg};
+  }
+`;
+const BackButtonStyles = `
+  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {
+    display: block;
+    border-bottom: 1px solid ${Styles.token.color.black};
+    margin-bottom: ${Styles.token.spacing.sm};
+    padding-bottom: ${Styles.token.spacing.sm};
+  }
+
+  @media (min-width: 480px) {
+    .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {
+      margin-bottom: ${Styles.token.spacing.md};
+      padding-bottom: ${Styles.token.spacing.md};
+    }
+  }
+
+  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button {
+    text-transform: uppercase;
+    font-weight: 600;
+    letter-Spacing: 1px;
+    display: flex;
+    align-items: center;
+    color: ${Styles.token.color.black};
+  }
+
+  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button:hover,
+  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button:focus {
+    text-decoration: underline;
+  }
+
+  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button svg {
+    fill: ${Styles.token.color.red};
+    width: 12px;
+    height: 12px;
+    margin-right: ${Styles.token.spacing.min};
+    transform: rotate(90deg);
+  }
+`;
+const HeadlineStyles = `
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ELEMENT_NAV_SLIDE_HEADLINE}`]: Styles.typography.sans.large
+  }
+})}
+
+  .${ELEMENT_NAV_SLIDE_HEADLINE} {
+    margin-bottom: ${Styles.token.spacing.md};
+    font-weight: 700;
+    color: ${Styles.token.color.black};
+  }
+`;
+const STYLES_NAV_SLIDES = `
+  ${BackButtonStyles}
+  ${HeadlineStyles}
+  ${ContentStyles}
+  ${action.Styles}
+  ${slideFirst.Styles}
+`;
+const createSlideBackButton = (props) => {
+  const { eventSlideRight, parentRef, setUpcomingSlide } = props;
+  if (!parentRef) return;
+  const backButtonContainer = document.createElement("div");
+  const slideBackButton = document.createElement("button");
+  slideBackButton.innerHTML = `${icons.CHEVRON_SMALL} Back`;
+  slideBackButton.setAttribute("type", "button");
+  slideBackButton.setAttribute("aria-label", "Previous level of navigation");
+  slideBackButton.addEventListener("click", () => {
+    setUpcomingSlide(parentRef);
+    eventSlideRight();
+  });
+  backButtonContainer.classList.add(ELEMENT_NAV_SLIDE_BACK_BUTTON);
+  backButtonContainer.appendChild(slideBackButton);
+  return backButtonContainer;
+};
+const createSlideHeadline = ({ link }) => {
+  const slideHeadline = document.createElement("p");
+  slideHeadline.appendChild(modify.cleanCopy({ element: link }));
+  slideHeadline.classList.add(ELEMENT_NAV_SLIDE_HEADLINE);
+  return slideHeadline;
+};
+const createSlideActions = (props) => {
+  const { slide } = props;
+  const slideActionsContainer = document.createElement("div");
+  const clonedSlide = slide.cloneNode(true);
+  const links = Array.from(
+    clonedSlide.querySelectorAll("a")
+  );
+  if (links.length > 0) {
+    links.forEach(
+      (link) => slideActionsContainer.appendChild(
+        action.CreateElement({ ...props, link })
+      )
+    );
+  }
+  return slideActionsContainer;
+};
+const CreateFirstSlide = (props) => {
+  const { slider } = props;
+  slider.appendChild(slideFirst.CreateElement(props));
+};
+const CreateNavSlides = (props) => {
+  const {
+    slider,
+    setCurrentSlide,
+    childrenSlides,
+    childrenSlideContent,
+    primarySlideLinks,
+    primarySlidesSecondaryLinks,
+    ATTRIBUTE_PARENT_REF,
+    ATTRIBUTE_CHILD_REF,
+    ATTRIBUTE_ACTIVE_SLIDE,
+    ATTRIBUTE_DATA_SLIDE
+  } = props;
+  let isContextMenu = false;
+  if (!childrenSlides) {
+    CreateFirstSlide({ ...props, isContextMenu });
+    return;
+  }
+  const slides = Array.from(
+    childrenSlides.querySelectorAll(`[${ATTRIBUTE_PARENT_REF}]`)
+  );
+  const primaryLinks = primarySlideLinks ? Array.from(primarySlideLinks.querySelectorAll("a")) : [];
+  const secondaryLinks = primarySlidesSecondaryLinks ? Array.from(primarySlidesSecondaryLinks.querySelectorAll(":scope > *")) : [];
+  const childLinks = Array.from(
+    childrenSlides.querySelectorAll(`[${ATTRIBUTE_CHILD_REF}]`)
+  );
+  const parentOptions = [
+    ...primaryLinks,
+    ...secondaryLinks,
+    ...childLinks
+  ];
+  slides.forEach((slide, i) => {
+    const contentRef = slide.getAttribute("content-slot");
+    const sliderContainer = document.createElement("div");
+    const sliderWrapper = document.createElement("div");
+    const isSlideActive = slide.hasAttribute(ATTRIBUTE_ACTIVE_SLIDE);
+    const parentRef = slide.getAttribute(ATTRIBUTE_PARENT_REF);
+    const parentElement = parentOptions.find(
+      (option) => option.getAttribute(ATTRIBUTE_CHILD_REF) === parentRef
+    );
+    if (!parentElement) {
+      console.error(`No parent reference found for ${parentRef}`);
+      return;
+    }
+    const slideBackButton = createSlideBackButton({ ...props, parentRef });
+    const slideHeadline = createSlideHeadline({ link: parentElement });
+    const slideActions = createSlideActions({ ...props, slide });
+    if (isSlideActive) {
+      sliderContainer.setAttribute(`${ATTRIBUTE_ACTIVE_SLIDE}`, ``);
+      setCurrentSlide({ element: sliderContainer });
+      isContextMenu = true;
+    }
+    sliderContainer.setAttribute(`${ATTRIBUTE_DATA_SLIDE}`, "");
+    sliderContainer.classList.add(ELEMENT_NAV_SLIDE_CONTAINER);
+    sliderContainer.setAttribute(`${ATTRIBUTE_PARENT_REF}`, `${parentRef}`);
+    if (slideBackButton) sliderWrapper.appendChild(slideBackButton);
+    sliderWrapper.appendChild(slideHeadline);
+    sliderWrapper.appendChild(slideActions);
+    sliderWrapper.classList.add(ELEMENT_NAV_SLIDE_WRAPPER);
+    sliderContainer.appendChild(sliderWrapper);
+    if (contentRef) {
+      const additionalContent = childrenSlideContent?.find(
+        (element) => element.getAttribute("name") === contentRef
+      );
+      if (additionalContent) {
+        const contentContainer = document.createElement("div");
+        contentContainer.appendChild(additionalContent);
+        contentContainer.classList.add(ELEMENT_NAV_SLIDE_CONTENT);
+        sliderContainer.appendChild(contentContainer);
+      }
+    }
+    slider.appendChild(sliderContainer);
+    if (i === slides.length - 1) {
+      setTimeout(() => {
+        CreateFirstSlide({ ...props, isContextMenu });
+      }, 100);
+    }
+  });
+};
+const Slides = {
+  CreateElement: CreateNavSlides,
+  Styles: STYLES_NAV_SLIDES,
+  Elements: {
+    container: ELEMENT_NAV_SLIDE_CONTAINER,
+    wrapper: ELEMENT_NAV_SLIDE_WRAPPER,
+    headline: ELEMENT_NAV_SLIDE_HEADLINE
+  }
+};
+module.exports = Slides;
+//# sourceMappingURL=slides.js.map

package/dist/composite/navigation/elements/slider/slides.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slides.js","sources":["../../../../../source/composite/navigation/elements/slider/slides.ts"],"sourcesContent":["import { token, typography } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport FirstSlide, { TypeFirstSlideProps, TypeFirstSlide } from './slide-first';\nimport SlideAction, { TypeActionProps } from './action';\n\nexport type TypeSlideProps = TypeActionProps &\n  TypeFirstSlideProps & {\n    ATTRIBUTE_DATA_SLIDE: string;\n    ATTRIBUTE_ACTIVE_SLIDE: string;\n    childrenSlides?: HTMLElement | null;\n    childrenSlideContent?: HTMLSlotElement[];\n    primarySlideLinks?: HTMLElement | null;\n    primarySlidesSecondaryLinks?: HTMLElement | null;\n    eventSlideRight: () => void;\n  };\n\ntype TypeSlideBackContainer = TypeSlideProps & {\n  parentRef: string;\n};\n\ntype TypeDrawerChildSlide = TypeSlideProps & {\n  slider: HTMLElement;\n};\n\ntype TypeSlideFirstContainer = TypeDrawerChildSlide & TypeFirstSlide;\n\ntype TypeSliderSlideActions = TypeSlideProps & {\n  slide: HTMLDivElement;\n};\n\nconst ELEMENT_NAV_SLIDE_CONTAINER = 'nav-slide-container';\nconst ELEMENT_NAV_SLIDE_WRAPPER = 'nav-slide-wrapper';\nconst ELEMENT_NAV_SLIDE_HEADLINE = 'nav-slide-headline';\nconst ELEMENT_NAV_SLIDE_BACK_BUTTON = 'nav-slide-action-back-button';\nconst ELEMENT_NAV_SLIDE_CONTENT = 'nav-slide-action-content';\n\n// prettier-ignore\nconst ContentStyles = `\n  * + .${ELEMENT_NAV_SLIDE_CONTENT} {\n    margin-top: ${token.spacing.lg};\n  }\n`;\n\n// prettier-ignore\nconst BackButtonStyles = `\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {\n    display: block;\n    border-bottom: 1px solid ${token.color.black};\n    margin-bottom: ${token.spacing.sm};\n    padding-bottom: ${token.spacing.sm};\n  }\n\n  @media (min-width: 480px) {\n    .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {\n      margin-bottom: ${token.spacing.md};\n      padding-bottom: ${token.spacing.md};\n    }\n  }\n\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button {\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-Spacing: 1px;\n    display: flex;\n    align-items: center;\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button:hover,\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button:focus {\n    text-decoration: underline;\n  }\n\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button svg {\n    fill: ${token.color.red};\n    width: 12px;\n    height: 12px;\n    margin-right: ${token.spacing.min};\n    transform: rotate(90deg);\n  }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_NAV_SLIDE_HEADLINE}`]: typography.sans.large,\n    },\n  })}\n\n  .${ELEMENT_NAV_SLIDE_HEADLINE} {\n    margin-bottom: ${token.spacing.md};\n    font-weight: 700;\n    color: ${token.color.black};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_NAV_SLIDES = `\n  ${BackButtonStyles}\n  ${HeadlineStyles}\n  ${ContentStyles}\n  ${SlideAction.Styles}\n  ${FirstSlide.Styles}\n`;\n\nconst createSlideBackButton = (props: TypeSlideBackContainer) => {\n  const { eventSlideRight, parentRef, setUpcomingSlide } = props;\n\n  if (!parentRef) return;\n  const backButtonContainer = document.createElement('div');\n  const slideBackButton = document.createElement('button');\n\n  slideBackButton.innerHTML = `${Utility.asset.icon.CHEVRON_SMALL} Back`;\n  slideBackButton.setAttribute('type', 'button');\n  slideBackButton.setAttribute('aria-label', 'Previous level of navigation');\n  slideBackButton.addEventListener('click', () => {\n    setUpcomingSlide(parentRef);\n    eventSlideRight();\n  });\n\n  backButtonContainer.classList.add(ELEMENT_NAV_SLIDE_BACK_BUTTON);\n  backButtonContainer.appendChild(slideBackButton);\n\n  return backButtonContainer;\n};\n\nconst createSlideHeadline = ({ link }: { link: HTMLAnchorElement }) => {\n  const slideHeadline = document.createElement('p');\n\n  slideHeadline.appendChild(Utility.markup.modify.cleanCopy({ element: link }));\n  slideHeadline.classList.add(ELEMENT_NAV_SLIDE_HEADLINE);\n\n  return slideHeadline;\n};\n\nconst createSlideActions = (props: TypeSliderSlideActions) => {\n  const { slide } = props;\n\n  const slideActionsContainer = document.createElement('div');\n  const clonedSlide = slide.cloneNode(true) as HTMLDivElement;\n  const links = Array.from(\n    clonedSlide.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  if (links.length > 0) {\n    links.forEach((link) =>\n      slideActionsContainer.appendChild(\n        SlideAction.CreateElement({ ...props, link }),\n      ),\n    );\n  }\n\n  return slideActionsContainer;\n};\n\nconst CreateFirstSlide = (props: TypeSlideFirstContainer) => {\n  const { slider } = props;\n  slider.appendChild(FirstSlide.CreateElement(props));\n};\n\nconst CreateNavSlides = (props: TypeDrawerChildSlide) => {\n  const {\n    slider,\n    setCurrentSlide,\n    childrenSlides,\n    childrenSlideContent,\n    primarySlideLinks,\n    primarySlidesSecondaryLinks,\n    ATTRIBUTE_PARENT_REF,\n    ATTRIBUTE_CHILD_REF,\n    ATTRIBUTE_ACTIVE_SLIDE,\n    ATTRIBUTE_DATA_SLIDE,\n  } = props;\n  let isContextMenu = false;\n  if (!childrenSlides) {\n    CreateFirstSlide({ ...props, isContextMenu });\n    return;\n  }\n\n  const slides = Array.from(\n    childrenSlides.querySelectorAll(`[${ATTRIBUTE_PARENT_REF}]`),\n  ) as HTMLDivElement[];\n  const primaryLinks = primarySlideLinks\n    ? Array.from(primarySlideLinks.querySelectorAll('a'))\n    : [];\n  const secondaryLinks = primarySlidesSecondaryLinks\n    ? Array.from(primarySlidesSecondaryLinks.querySelectorAll(':scope > *'))\n    : [];\n  const childLinks = Array.from(\n    childrenSlides.querySelectorAll(`[${ATTRIBUTE_CHILD_REF}]`),\n  ) as HTMLAnchorElement[];\n  const parentOptions = [\n    ...primaryLinks,\n    ...secondaryLinks,\n    ...childLinks,\n  ] as HTMLAnchorElement[];\n\n  slides.forEach((slide, i) => {\n    const contentRef = slide.getAttribute('content-slot');\n    const sliderContainer = document.createElement('div');\n    const sliderWrapper = document.createElement('div');\n    const isSlideActive = slide.hasAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n    const parentRef = slide.getAttribute(ATTRIBUTE_PARENT_REF) as string;\n    const parentElement = parentOptions.find(\n      (option) => option.getAttribute(ATTRIBUTE_CHILD_REF) === parentRef,\n    );\n\n    if (!parentElement) {\n      console.error(`No parent reference found for ${parentRef}`);\n      return;\n    }\n\n    const slideBackButton = createSlideBackButton({ ...props, parentRef });\n    const slideHeadline = createSlideHeadline({ link: parentElement });\n    const slideActions = createSlideActions({ ...props, slide });\n\n    // Context Menu\n    if (isSlideActive) {\n      sliderContainer.setAttribute(`${ATTRIBUTE_ACTIVE_SLIDE}`, ``);\n      setCurrentSlide({ element: sliderContainer });\n      isContextMenu = true;\n    }\n\n    sliderContainer.setAttribute(`${ATTRIBUTE_DATA_SLIDE}`, '');\n    sliderContainer.classList.add(ELEMENT_NAV_SLIDE_CONTAINER);\n    sliderContainer.setAttribute(`${ATTRIBUTE_PARENT_REF}`, `${parentRef}`);\n\n    if (slideBackButton) sliderWrapper.appendChild(slideBackButton);\n    sliderWrapper.appendChild(slideHeadline);\n    sliderWrapper.appendChild(slideActions);\n\n    sliderWrapper.classList.add(ELEMENT_NAV_SLIDE_WRAPPER);\n    sliderContainer.appendChild(sliderWrapper);\n\n    if (contentRef) {\n      const additionalContent = childrenSlideContent?.find(\n        (element) => element.getAttribute('name') === contentRef,\n      );\n\n      if (additionalContent) {\n        const contentContainer = document.createElement('div');\n\n        contentContainer.appendChild(additionalContent);\n        contentContainer.classList.add(ELEMENT_NAV_SLIDE_CONTENT);\n\n        sliderContainer.appendChild(contentContainer);\n      }\n    }\n\n    slider.appendChild(sliderContainer);\n\n    if (i === slides.length - 1) {\n      setTimeout(() => {\n        CreateFirstSlide({ ...props, isContextMenu });\n      }, 100);\n    }\n  });\n};\n\nexport default {\n  CreateElement: CreateNavSlides,\n  Styles: STYLES_NAV_SLIDES,\n  Elements: {\n    container: ELEMENT_NAV_SLIDE_CONTAINER,\n    wrapper: ELEMENT_NAV_SLIDE_WRAPPER,\n    headline: ELEMENT_NAV_SLIDE_HEADLINE,\n  },\n};\n"],"names":["token","Utility.theme.convertJSSObjectToStyles","typography","SlideAction","FirstSlide","Utility.asset.icon.CHEVRON_SMALL","Utility.markup.modify.cleanCopy"],"mappings":"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"}

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

@@ -0,0 +1,207 @@
+import { token, typography } from "@universityofmaryland/web-styles-library";
+import { CHEVRON_SMALL } from "../../../../utilities/assets/icons.mjs";
+import { cleanCopy } from "../../../../utilities/markup/modify.mjs";
+import { convertJSSObjectToStyles } from "../../../../utilities/theme/index.mjs";
+import SlideFirst from "./slide-first.mjs";
+import SlideAction from "./action.mjs";
+const ELEMENT_NAV_SLIDE_CONTAINER = "nav-slide-container";
+const ELEMENT_NAV_SLIDE_WRAPPER = "nav-slide-wrapper";
+const ELEMENT_NAV_SLIDE_HEADLINE = "nav-slide-headline";
+const ELEMENT_NAV_SLIDE_BACK_BUTTON = "nav-slide-action-back-button";
+const ELEMENT_NAV_SLIDE_CONTENT = "nav-slide-action-content";
+const ContentStyles = `
+  * + .${ELEMENT_NAV_SLIDE_CONTENT} {
+    margin-top: ${token.spacing.lg};
+  }
+`;
+const BackButtonStyles = `
+  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {
+    display: block;
+    border-bottom: 1px solid ${token.color.black};
+    margin-bottom: ${token.spacing.sm};
+    padding-bottom: ${token.spacing.sm};
+  }
+
+  @media (min-width: 480px) {
+    .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {
+      margin-bottom: ${token.spacing.md};
+      padding-bottom: ${token.spacing.md};
+    }
+  }
+
+  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button {
+    text-transform: uppercase;
+    font-weight: 600;
+    letter-Spacing: 1px;
+    display: flex;
+    align-items: center;
+    color: ${token.color.black};
+  }
+
+  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button:hover,
+  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button:focus {
+    text-decoration: underline;
+  }
+
+  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button svg {
+    fill: ${token.color.red};
+    width: 12px;
+    height: 12px;
+    margin-right: ${token.spacing.min};
+    transform: rotate(90deg);
+  }
+`;
+const HeadlineStyles = `
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ELEMENT_NAV_SLIDE_HEADLINE}`]: typography.sans.large
+  }
+})}
+
+  .${ELEMENT_NAV_SLIDE_HEADLINE} {
+    margin-bottom: ${token.spacing.md};
+    font-weight: 700;
+    color: ${token.color.black};
+  }
+`;
+const STYLES_NAV_SLIDES = `
+  ${BackButtonStyles}
+  ${HeadlineStyles}
+  ${ContentStyles}
+  ${SlideAction.Styles}
+  ${SlideFirst.Styles}
+`;
+const createSlideBackButton = (props) => {
+  const { eventSlideRight, parentRef, setUpcomingSlide } = props;
+  if (!parentRef) return;
+  const backButtonContainer = document.createElement("div");
+  const slideBackButton = document.createElement("button");
+  slideBackButton.innerHTML = `${CHEVRON_SMALL} Back`;
+  slideBackButton.setAttribute("type", "button");
+  slideBackButton.setAttribute("aria-label", "Previous level of navigation");
+  slideBackButton.addEventListener("click", () => {
+    setUpcomingSlide(parentRef);
+    eventSlideRight();
+  });
+  backButtonContainer.classList.add(ELEMENT_NAV_SLIDE_BACK_BUTTON);
+  backButtonContainer.appendChild(slideBackButton);
+  return backButtonContainer;
+};
+const createSlideHeadline = ({ link }) => {
+  const slideHeadline = document.createElement("p");
+  slideHeadline.appendChild(cleanCopy({ element: link }));
+  slideHeadline.classList.add(ELEMENT_NAV_SLIDE_HEADLINE);
+  return slideHeadline;
+};
+const createSlideActions = (props) => {
+  const { slide } = props;
+  const slideActionsContainer = document.createElement("div");
+  const clonedSlide = slide.cloneNode(true);
+  const links = Array.from(
+    clonedSlide.querySelectorAll("a")
+  );
+  if (links.length > 0) {
+    links.forEach(
+      (link) => slideActionsContainer.appendChild(
+        SlideAction.CreateElement({ ...props, link })
+      )
+    );
+  }
+  return slideActionsContainer;
+};
+const CreateFirstSlide = (props) => {
+  const { slider } = props;
+  slider.appendChild(SlideFirst.CreateElement(props));
+};
+const CreateNavSlides = (props) => {
+  const {
+    slider,
+    setCurrentSlide,
+    childrenSlides,
+    childrenSlideContent,
+    primarySlideLinks,
+    primarySlidesSecondaryLinks,
+    ATTRIBUTE_PARENT_REF,
+    ATTRIBUTE_CHILD_REF,
+    ATTRIBUTE_ACTIVE_SLIDE,
+    ATTRIBUTE_DATA_SLIDE
+  } = props;
+  let isContextMenu = false;
+  if (!childrenSlides) {
+    CreateFirstSlide({ ...props, isContextMenu });
+    return;
+  }
+  const slides = Array.from(
+    childrenSlides.querySelectorAll(`[${ATTRIBUTE_PARENT_REF}]`)
+  );
+  const primaryLinks = primarySlideLinks ? Array.from(primarySlideLinks.querySelectorAll("a")) : [];
+  const secondaryLinks = primarySlidesSecondaryLinks ? Array.from(primarySlidesSecondaryLinks.querySelectorAll(":scope > *")) : [];
+  const childLinks = Array.from(
+    childrenSlides.querySelectorAll(`[${ATTRIBUTE_CHILD_REF}]`)
+  );
+  const parentOptions = [
+    ...primaryLinks,
+    ...secondaryLinks,
+    ...childLinks
+  ];
+  slides.forEach((slide, i) => {
+    const contentRef = slide.getAttribute("content-slot");
+    const sliderContainer = document.createElement("div");
+    const sliderWrapper = document.createElement("div");
+    const isSlideActive = slide.hasAttribute(ATTRIBUTE_ACTIVE_SLIDE);
+    const parentRef = slide.getAttribute(ATTRIBUTE_PARENT_REF);
+    const parentElement = parentOptions.find(
+      (option) => option.getAttribute(ATTRIBUTE_CHILD_REF) === parentRef
+    );
+    if (!parentElement) {
+      console.error(`No parent reference found for ${parentRef}`);
+      return;
+    }
+    const slideBackButton = createSlideBackButton({ ...props, parentRef });
+    const slideHeadline = createSlideHeadline({ link: parentElement });
+    const slideActions = createSlideActions({ ...props, slide });
+    if (isSlideActive) {
+      sliderContainer.setAttribute(`${ATTRIBUTE_ACTIVE_SLIDE}`, ``);
+      setCurrentSlide({ element: sliderContainer });
+      isContextMenu = true;
+    }
+    sliderContainer.setAttribute(`${ATTRIBUTE_DATA_SLIDE}`, "");
+    sliderContainer.classList.add(ELEMENT_NAV_SLIDE_CONTAINER);
+    sliderContainer.setAttribute(`${ATTRIBUTE_PARENT_REF}`, `${parentRef}`);
+    if (slideBackButton) sliderWrapper.appendChild(slideBackButton);
+    sliderWrapper.appendChild(slideHeadline);
+    sliderWrapper.appendChild(slideActions);
+    sliderWrapper.classList.add(ELEMENT_NAV_SLIDE_WRAPPER);
+    sliderContainer.appendChild(sliderWrapper);
+    if (contentRef) {
+      const additionalContent = childrenSlideContent?.find(
+        (element) => element.getAttribute("name") === contentRef
+      );
+      if (additionalContent) {
+        const contentContainer = document.createElement("div");
+        contentContainer.appendChild(additionalContent);
+        contentContainer.classList.add(ELEMENT_NAV_SLIDE_CONTENT);
+        sliderContainer.appendChild(contentContainer);
+      }
+    }
+    slider.appendChild(sliderContainer);
+    if (i === slides.length - 1) {
+      setTimeout(() => {
+        CreateFirstSlide({ ...props, isContextMenu });
+      }, 100);
+    }
+  });
+};
+const Slides = {
+  CreateElement: CreateNavSlides,
+  Styles: STYLES_NAV_SLIDES,
+  Elements: {
+    container: ELEMENT_NAV_SLIDE_CONTAINER,
+    wrapper: ELEMENT_NAV_SLIDE_WRAPPER,
+    headline: ELEMENT_NAV_SLIDE_HEADLINE
+  }
+};
+export {
+  Slides as default
+};
+//# sourceMappingURL=slides.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slides.mjs","sources":["../../../../../source/composite/navigation/elements/slider/slides.ts"],"sourcesContent":["import { token, typography } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport FirstSlide, { TypeFirstSlideProps, TypeFirstSlide } from './slide-first';\nimport SlideAction, { TypeActionProps } from './action';\n\nexport type TypeSlideProps = TypeActionProps &\n  TypeFirstSlideProps & {\n    ATTRIBUTE_DATA_SLIDE: string;\n    ATTRIBUTE_ACTIVE_SLIDE: string;\n    childrenSlides?: HTMLElement | null;\n    childrenSlideContent?: HTMLSlotElement[];\n    primarySlideLinks?: HTMLElement | null;\n    primarySlidesSecondaryLinks?: HTMLElement | null;\n    eventSlideRight: () => void;\n  };\n\ntype TypeSlideBackContainer = TypeSlideProps & {\n  parentRef: string;\n};\n\ntype TypeDrawerChildSlide = TypeSlideProps & {\n  slider: HTMLElement;\n};\n\ntype TypeSlideFirstContainer = TypeDrawerChildSlide & TypeFirstSlide;\n\ntype TypeSliderSlideActions = TypeSlideProps & {\n  slide: HTMLDivElement;\n};\n\nconst ELEMENT_NAV_SLIDE_CONTAINER = 'nav-slide-container';\nconst ELEMENT_NAV_SLIDE_WRAPPER = 'nav-slide-wrapper';\nconst ELEMENT_NAV_SLIDE_HEADLINE = 'nav-slide-headline';\nconst ELEMENT_NAV_SLIDE_BACK_BUTTON = 'nav-slide-action-back-button';\nconst ELEMENT_NAV_SLIDE_CONTENT = 'nav-slide-action-content';\n\n// prettier-ignore\nconst ContentStyles = `\n  * + .${ELEMENT_NAV_SLIDE_CONTENT} {\n    margin-top: ${token.spacing.lg};\n  }\n`;\n\n// prettier-ignore\nconst BackButtonStyles = `\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {\n    display: block;\n    border-bottom: 1px solid ${token.color.black};\n    margin-bottom: ${token.spacing.sm};\n    padding-bottom: ${token.spacing.sm};\n  }\n\n  @media (min-width: 480px) {\n    .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {\n      margin-bottom: ${token.spacing.md};\n      padding-bottom: ${token.spacing.md};\n    }\n  }\n\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button {\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-Spacing: 1px;\n    display: flex;\n    align-items: center;\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button:hover,\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button:focus {\n    text-decoration: underline;\n  }\n\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button svg {\n    fill: ${token.color.red};\n    width: 12px;\n    height: 12px;\n    margin-right: ${token.spacing.min};\n    transform: rotate(90deg);\n  }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_NAV_SLIDE_HEADLINE}`]: typography.sans.large,\n    },\n  })}\n\n  .${ELEMENT_NAV_SLIDE_HEADLINE} {\n    margin-bottom: ${token.spacing.md};\n    font-weight: 700;\n    color: ${token.color.black};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_NAV_SLIDES = `\n  ${BackButtonStyles}\n  ${HeadlineStyles}\n  ${ContentStyles}\n  ${SlideAction.Styles}\n  ${FirstSlide.Styles}\n`;\n\nconst createSlideBackButton = (props: TypeSlideBackContainer) => {\n  const { eventSlideRight, parentRef, setUpcomingSlide } = props;\n\n  if (!parentRef) return;\n  const backButtonContainer = document.createElement('div');\n  const slideBackButton = document.createElement('button');\n\n  slideBackButton.innerHTML = `${Utility.asset.icon.CHEVRON_SMALL} Back`;\n  slideBackButton.setAttribute('type', 'button');\n  slideBackButton.setAttribute('aria-label', 'Previous level of navigation');\n  slideBackButton.addEventListener('click', () => {\n    setUpcomingSlide(parentRef);\n    eventSlideRight();\n  });\n\n  backButtonContainer.classList.add(ELEMENT_NAV_SLIDE_BACK_BUTTON);\n  backButtonContainer.appendChild(slideBackButton);\n\n  return backButtonContainer;\n};\n\nconst createSlideHeadline = ({ link }: { link: HTMLAnchorElement }) => {\n  const slideHeadline = document.createElement('p');\n\n  slideHeadline.appendChild(Utility.markup.modify.cleanCopy({ element: link }));\n  slideHeadline.classList.add(ELEMENT_NAV_SLIDE_HEADLINE);\n\n  return slideHeadline;\n};\n\nconst createSlideActions = (props: TypeSliderSlideActions) => {\n  const { slide } = props;\n\n  const slideActionsContainer = document.createElement('div');\n  const clonedSlide = slide.cloneNode(true) as HTMLDivElement;\n  const links = Array.from(\n    clonedSlide.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  if (links.length > 0) {\n    links.forEach((link) =>\n      slideActionsContainer.appendChild(\n        SlideAction.CreateElement({ ...props, link }),\n      ),\n    );\n  }\n\n  return slideActionsContainer;\n};\n\nconst CreateFirstSlide = (props: TypeSlideFirstContainer) => {\n  const { slider } = props;\n  slider.appendChild(FirstSlide.CreateElement(props));\n};\n\nconst CreateNavSlides = (props: TypeDrawerChildSlide) => {\n  const {\n    slider,\n    setCurrentSlide,\n    childrenSlides,\n    childrenSlideContent,\n    primarySlideLinks,\n    primarySlidesSecondaryLinks,\n    ATTRIBUTE_PARENT_REF,\n    ATTRIBUTE_CHILD_REF,\n    ATTRIBUTE_ACTIVE_SLIDE,\n    ATTRIBUTE_DATA_SLIDE,\n  } = props;\n  let isContextMenu = false;\n  if (!childrenSlides) {\n    CreateFirstSlide({ ...props, isContextMenu });\n    return;\n  }\n\n  const slides = Array.from(\n    childrenSlides.querySelectorAll(`[${ATTRIBUTE_PARENT_REF}]`),\n  ) as HTMLDivElement[];\n  const primaryLinks = primarySlideLinks\n    ? Array.from(primarySlideLinks.querySelectorAll('a'))\n    : [];\n  const secondaryLinks = primarySlidesSecondaryLinks\n    ? Array.from(primarySlidesSecondaryLinks.querySelectorAll(':scope > *'))\n    : [];\n  const childLinks = Array.from(\n    childrenSlides.querySelectorAll(`[${ATTRIBUTE_CHILD_REF}]`),\n  ) as HTMLAnchorElement[];\n  const parentOptions = [\n    ...primaryLinks,\n    ...secondaryLinks,\n    ...childLinks,\n  ] as HTMLAnchorElement[];\n\n  slides.forEach((slide, i) => {\n    const contentRef = slide.getAttribute('content-slot');\n    const sliderContainer = document.createElement('div');\n    const sliderWrapper = document.createElement('div');\n    const isSlideActive = slide.hasAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n    const parentRef = slide.getAttribute(ATTRIBUTE_PARENT_REF) as string;\n    const parentElement = parentOptions.find(\n      (option) => option.getAttribute(ATTRIBUTE_CHILD_REF) === parentRef,\n    );\n\n    if (!parentElement) {\n      console.error(`No parent reference found for ${parentRef}`);\n      return;\n    }\n\n    const slideBackButton = createSlideBackButton({ ...props, parentRef });\n    const slideHeadline = createSlideHeadline({ link: parentElement });\n    const slideActions = createSlideActions({ ...props, slide });\n\n    // Context Menu\n    if (isSlideActive) {\n      sliderContainer.setAttribute(`${ATTRIBUTE_ACTIVE_SLIDE}`, ``);\n      setCurrentSlide({ element: sliderContainer });\n      isContextMenu = true;\n    }\n\n    sliderContainer.setAttribute(`${ATTRIBUTE_DATA_SLIDE}`, '');\n    sliderContainer.classList.add(ELEMENT_NAV_SLIDE_CONTAINER);\n    sliderContainer.setAttribute(`${ATTRIBUTE_PARENT_REF}`, `${parentRef}`);\n\n    if (slideBackButton) sliderWrapper.appendChild(slideBackButton);\n    sliderWrapper.appendChild(slideHeadline);\n    sliderWrapper.appendChild(slideActions);\n\n    sliderWrapper.classList.add(ELEMENT_NAV_SLIDE_WRAPPER);\n    sliderContainer.appendChild(sliderWrapper);\n\n    if (contentRef) {\n      const additionalContent = childrenSlideContent?.find(\n        (element) => element.getAttribute('name') === contentRef,\n      );\n\n      if (additionalContent) {\n        const contentContainer = document.createElement('div');\n\n        contentContainer.appendChild(additionalContent);\n        contentContainer.classList.add(ELEMENT_NAV_SLIDE_CONTENT);\n\n        sliderContainer.appendChild(contentContainer);\n      }\n    }\n\n    slider.appendChild(sliderContainer);\n\n    if (i === slides.length - 1) {\n      setTimeout(() => {\n        CreateFirstSlide({ ...props, isContextMenu });\n      }, 100);\n    }\n  });\n};\n\nexport default {\n  CreateElement: CreateNavSlides,\n  Styles: STYLES_NAV_SLIDES,\n  Elements: {\n    container: ELEMENT_NAV_SLIDE_CONTAINER,\n    wrapper: ELEMENT_NAV_SLIDE_WRAPPER,\n    headline: ELEMENT_NAV_SLIDE_HEADLINE,\n  },\n};\n"],"names":["Utility.theme.convertJSSObjectToStyles","FirstSlide","Utility.asset.icon.CHEVRON_SMALL","Utility.markup.modify.cleanCopy"],"mappings":"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"}

package/dist/composite/navigation/elements/sticky/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/sticky/index.ts"],"names":[],"mappings":"kDA4BG;IACD,OAAO,EAAE,WAAW,CAAC;IACrB,SAAS,EAAE,WAAW,CAAC;CACxB;;;;AAND,wBAyEO"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/sticky/index.ts"],"names":[],"mappings":"yBAyBgB,yBAGb;IACD,OAAO,EAAE,WAAW,CAAC;IACrB,SAAS,EAAE,WAAW,CAAC;CACxB;;;;AAND,wBAyEO"}

package/dist/composite/navigation/elements/sticky/index.js

@@ -0,0 +1,86 @@
+"use strict";
+const index$1 = require("../../../../utilities/performance/index.js");
+require("../../../../node_modules/postcss/lib/postcss.js");
+require("../../../../node_modules/postcss-nesting/dist/index.js");
+require("../../../../node_modules/postcss-js/index.js");
+const ELEMENT_NAV_STICKY_CONTAINER = "nav-sticky-container";
+const ELEMENT_NAV_STICKY_WRAPPER = "nav-sticky-wrapper";
+const ELEMENT_NAV_STIKCY_WRAPPER_FIXED = "nav-sticky-wrapper-fixed";
+const STYLES_NAV_STICKY_ELEMENT = `
+  .${ELEMENT_NAV_STICKY_CONTAINER} {
+    width: 100%;
+  }
+
+  .${ELEMENT_NAV_STICKY_WRAPPER} {
+    width: 100%;
+    background-color: white;
+  }
+
+  .${ELEMENT_NAV_STIKCY_WRAPPER_FIXED} {
+    position: fixed;
+    top: 0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+`;
+const index = ({
+  content,
+  component
+}) => (() => {
+  const elementContainer = document.createElement("div");
+  const elementWrapper = document.createElement("div");
+  const headerElement = component.querySelector(
+    "umd-element-navigation-header"
+  );
+  const eventScroll = () => {
+    const componentBounds = component.getBoundingClientRect();
+    if (componentBounds.top < 0) {
+      if (headerElement) {
+        headerElement.setAttribute("sticky", "true");
+        elementWrapper.classList.add(ELEMENT_NAV_STIKCY_WRAPPER_FIXED);
+      }
+    } else {
+      if (headerElement) {
+        headerElement.removeAttribute("sticky");
+        elementWrapper.classList.remove(ELEMENT_NAV_STIKCY_WRAPPER_FIXED);
+        if (hasIncorrectHeight) {
+          setTimeout(() => {
+            eventResize();
+          }, 200);
+          setTimeout(() => {
+            eventResize();
+          }, 500);
+          hasIncorrectHeight = false;
+        }
+      }
+    }
+  };
+  const eventResize = () => {
+    const wrapperSize = elementWrapper.offsetHeight;
+    if (wrapperSize !== 0) {
+      elementContainer.style.height = `${wrapperSize}px`;
+    }
+  };
+  let hasIncorrectHeight = false;
+  elementWrapper.classList.add(ELEMENT_NAV_STICKY_WRAPPER);
+  elementWrapper.appendChild(content);
+  elementContainer.classList.add(ELEMENT_NAV_STICKY_CONTAINER);
+  elementContainer.appendChild(elementWrapper);
+  window.addEventListener("scroll", eventScroll);
+  window.addEventListener(
+    "resize",
+    index$1.debounce(() => {
+      eventResize();
+    }, 20)
+  );
+  window.addEventListener("load", () => {
+    setTimeout(() => {
+      eventResize();
+    }, 500);
+  });
+  if (window.scrollY > 0) {
+    hasIncorrectHeight = true;
+  }
+  return { element: elementContainer, styles: STYLES_NAV_STICKY_ELEMENT };
+})();
+module.exports = index;
+//# sourceMappingURL=index.js.map

package/dist/composite/navigation/elements/sticky/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/sticky/index.ts"],"sourcesContent":["import * as Utility from 'utilities';\n\nconst ELEMENT_NAV_STICKY_CONTAINER = 'nav-sticky-container';\nconst ELEMENT_NAV_STICKY_WRAPPER = 'nav-sticky-wrapper';\n\nconst ELEMENT_NAV_STIKCY_WRAPPER_FIXED = 'nav-sticky-wrapper-fixed';\n\n// prettier-ignore\nconst STYLES_NAV_STICKY_ELEMENT = `\n  .${ELEMENT_NAV_STICKY_CONTAINER} {\n    width: 100%;\n  }\n\n  .${ELEMENT_NAV_STICKY_WRAPPER} {\n    width: 100%;\n    background-color: white;\n  }\n\n  .${ELEMENT_NAV_STIKCY_WRAPPER_FIXED} {\n    position: fixed;\n    top: 0;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n`;\n\nexport default ({\n  content,\n  component,\n}: {\n  content: HTMLElement;\n  component: HTMLElement;\n}) =>\n  (() => {\n    const elementContainer = document.createElement('div');\n    const elementWrapper = document.createElement('div');\n    const headerElement = component.querySelector(\n      'umd-element-navigation-header',\n    );\n    const eventScroll = () => {\n      const componentBounds = component.getBoundingClientRect();\n\n      if (componentBounds.top < 0) {\n        if (headerElement) {\n          headerElement.setAttribute('sticky', 'true');\n          elementWrapper.classList.add(ELEMENT_NAV_STIKCY_WRAPPER_FIXED);\n        }\n      } else {\n        if (headerElement) {\n          headerElement.removeAttribute('sticky');\n          elementWrapper.classList.remove(ELEMENT_NAV_STIKCY_WRAPPER_FIXED);\n\n          if (hasIncorrectHeight) {\n            setTimeout(() => {\n              eventResize();\n            }, 200);\n            setTimeout(() => {\n              eventResize();\n            }, 500);\n            hasIncorrectHeight = false;\n          }\n        }\n      }\n    };\n\n    const eventResize = () => {\n      const wrapperSize = elementWrapper.offsetHeight;\n\n      if (wrapperSize !== 0) {\n        elementContainer.style.height = `${wrapperSize}px`;\n      }\n    };\n    let hasIncorrectHeight = false;\n\n    elementWrapper.classList.add(ELEMENT_NAV_STICKY_WRAPPER);\n    elementWrapper.appendChild(content);\n\n    elementContainer.classList.add(ELEMENT_NAV_STICKY_CONTAINER);\n    elementContainer.appendChild(elementWrapper);\n\n    window.addEventListener('scroll', eventScroll);\n    window.addEventListener(\n      'resize',\n      Utility.performance.debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    window.addEventListener('load', () => {\n      setTimeout(() => {\n        eventResize();\n      }, 500);\n    });\n\n    if (window.scrollY > 0) {\n      hasIncorrectHeight = true;\n    }\n\n    return { element: elementContainer, styles: STYLES_NAV_STICKY_ELEMENT };\n  })();\n"],"names":["Utility.performance.debounce"],"mappings":";;;;;AAEA,MAAM,+BAA+B;AACrC,MAAM,6BAA6B;AAEnC,MAAM,mCAAmC;AAGzC,MAAM,4BAA4B;AAAA,KAC7B,4BAA4B;AAAA;AAAA;AAAA;AAAA,KAI5B,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA,KAK1B,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrC,MAAA,QAAe,CAAC;AAAA,EACd;AAAA,EACA;AACF,OAIG,MAAM;AACL,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,gBAAgB,UAAU;AAAA,IAC9B;AAAA,EAAA;AAEF,QAAM,cAAc,MAAM;AACxB,UAAM,kBAAkB,UAAU,sBAAA;AAElC,QAAI,gBAAgB,MAAM,GAAG;AAC3B,UAAI,eAAe;AACjB,sBAAc,aAAa,UAAU,MAAM;AAC3C,uBAAe,UAAU,IAAI,gCAAgC;AAAA,MAC/D;AAAA,IACF,OAAO;AACL,UAAI,eAAe;AACjB,sBAAc,gBAAgB,QAAQ;AACtC,uBAAe,UAAU,OAAO,gCAAgC;AAEhE,YAAI,oBAAoB;AACtB,qBAAW,MAAM;AACf,wBAAA;AAAA,UACF,GAAG,GAAG;AACN,qBAAW,MAAM;AACf,wBAAA;AAAA,UACF,GAAG,GAAG;AACN,+BAAqB;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,cAAc,eAAe;AAEnC,QAAI,gBAAgB,GAAG;AACrB,uBAAiB,MAAM,SAAS,GAAG,WAAW;AAAA,IAChD;AAAA,EACF;AACA,MAAI,qBAAqB;AAEzB,iBAAe,UAAU,IAAI,0BAA0B;AACvD,iBAAe,YAAY,OAAO;AAElC,mBAAiB,UAAU,IAAI,4BAA4B;AAC3D,mBAAiB,YAAY,cAAc;AAE3C,SAAO,iBAAiB,UAAU,WAAW;AAC7C,SAAO;AAAA,IACL;AAAA,IACAA,QAAAA,SAA6B,MAAM;AACjC,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,SAAO,iBAAiB,QAAQ,MAAM;AACpC,eAAW,MAAM;AACf,kBAAA;AAAA,IACF,GAAG,GAAG;AAAA,EACR,CAAC;AAED,MAAI,OAAO,UAAU,GAAG;AACtB,yBAAqB;AAAA,EACvB;AAEA,SAAO,EAAE,SAAS,kBAAkB,QAAQ,0BAAA;AAC9C,GAAA;;"}

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

@@ -0,0 +1,87 @@
+import { debounce } from "../../../../utilities/performance/index.mjs";
+import "../../../../node_modules/postcss/lib/postcss.mjs";
+import "../../../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../../../node_modules/postcss-js/index.mjs";
+const ELEMENT_NAV_STICKY_CONTAINER = "nav-sticky-container";
+const ELEMENT_NAV_STICKY_WRAPPER = "nav-sticky-wrapper";
+const ELEMENT_NAV_STIKCY_WRAPPER_FIXED = "nav-sticky-wrapper-fixed";
+const STYLES_NAV_STICKY_ELEMENT = `
+  .${ELEMENT_NAV_STICKY_CONTAINER} {
+    width: 100%;
+  }
+
+  .${ELEMENT_NAV_STICKY_WRAPPER} {
+    width: 100%;
+    background-color: white;
+  }
+
+  .${ELEMENT_NAV_STIKCY_WRAPPER_FIXED} {
+    position: fixed;
+    top: 0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+`;
+const index = ({
+  content,
+  component
+}) => (() => {
+  const elementContainer = document.createElement("div");
+  const elementWrapper = document.createElement("div");
+  const headerElement = component.querySelector(
+    "umd-element-navigation-header"
+  );
+  const eventScroll = () => {
+    const componentBounds = component.getBoundingClientRect();
+    if (componentBounds.top < 0) {
+      if (headerElement) {
+        headerElement.setAttribute("sticky", "true");
+        elementWrapper.classList.add(ELEMENT_NAV_STIKCY_WRAPPER_FIXED);
+      }
+    } else {
+      if (headerElement) {
+        headerElement.removeAttribute("sticky");
+        elementWrapper.classList.remove(ELEMENT_NAV_STIKCY_WRAPPER_FIXED);
+        if (hasIncorrectHeight) {
+          setTimeout(() => {
+            eventResize();
+          }, 200);
+          setTimeout(() => {
+            eventResize();
+          }, 500);
+          hasIncorrectHeight = false;
+        }
+      }
+    }
+  };
+  const eventResize = () => {
+    const wrapperSize = elementWrapper.offsetHeight;
+    if (wrapperSize !== 0) {
+      elementContainer.style.height = `${wrapperSize}px`;
+    }
+  };
+  let hasIncorrectHeight = false;
+  elementWrapper.classList.add(ELEMENT_NAV_STICKY_WRAPPER);
+  elementWrapper.appendChild(content);
+  elementContainer.classList.add(ELEMENT_NAV_STICKY_CONTAINER);
+  elementContainer.appendChild(elementWrapper);
+  window.addEventListener("scroll", eventScroll);
+  window.addEventListener(
+    "resize",
+    debounce(() => {
+      eventResize();
+    }, 20)
+  );
+  window.addEventListener("load", () => {
+    setTimeout(() => {
+      eventResize();
+    }, 500);
+  });
+  if (window.scrollY > 0) {
+    hasIncorrectHeight = true;
+  }
+  return { element: elementContainer, styles: STYLES_NAV_STICKY_ELEMENT };
+})();
+export {
+  index as default
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/navigation/elements/sticky/index.ts"],"sourcesContent":["import * as Utility from 'utilities';\n\nconst ELEMENT_NAV_STICKY_CONTAINER = 'nav-sticky-container';\nconst ELEMENT_NAV_STICKY_WRAPPER = 'nav-sticky-wrapper';\n\nconst ELEMENT_NAV_STIKCY_WRAPPER_FIXED = 'nav-sticky-wrapper-fixed';\n\n// prettier-ignore\nconst STYLES_NAV_STICKY_ELEMENT = `\n  .${ELEMENT_NAV_STICKY_CONTAINER} {\n    width: 100%;\n  }\n\n  .${ELEMENT_NAV_STICKY_WRAPPER} {\n    width: 100%;\n    background-color: white;\n  }\n\n  .${ELEMENT_NAV_STIKCY_WRAPPER_FIXED} {\n    position: fixed;\n    top: 0;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n`;\n\nexport default ({\n  content,\n  component,\n}: {\n  content: HTMLElement;\n  component: HTMLElement;\n}) =>\n  (() => {\n    const elementContainer = document.createElement('div');\n    const elementWrapper = document.createElement('div');\n    const headerElement = component.querySelector(\n      'umd-element-navigation-header',\n    );\n    const eventScroll = () => {\n      const componentBounds = component.getBoundingClientRect();\n\n      if (componentBounds.top < 0) {\n        if (headerElement) {\n          headerElement.setAttribute('sticky', 'true');\n          elementWrapper.classList.add(ELEMENT_NAV_STIKCY_WRAPPER_FIXED);\n        }\n      } else {\n        if (headerElement) {\n          headerElement.removeAttribute('sticky');\n          elementWrapper.classList.remove(ELEMENT_NAV_STIKCY_WRAPPER_FIXED);\n\n          if (hasIncorrectHeight) {\n            setTimeout(() => {\n              eventResize();\n            }, 200);\n            setTimeout(() => {\n              eventResize();\n            }, 500);\n            hasIncorrectHeight = false;\n          }\n        }\n      }\n    };\n\n    const eventResize = () => {\n      const wrapperSize = elementWrapper.offsetHeight;\n\n      if (wrapperSize !== 0) {\n        elementContainer.style.height = `${wrapperSize}px`;\n      }\n    };\n    let hasIncorrectHeight = false;\n\n    elementWrapper.classList.add(ELEMENT_NAV_STICKY_WRAPPER);\n    elementWrapper.appendChild(content);\n\n    elementContainer.classList.add(ELEMENT_NAV_STICKY_CONTAINER);\n    elementContainer.appendChild(elementWrapper);\n\n    window.addEventListener('scroll', eventScroll);\n    window.addEventListener(\n      'resize',\n      Utility.performance.debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    window.addEventListener('load', () => {\n      setTimeout(() => {\n        eventResize();\n      }, 500);\n    });\n\n    if (window.scrollY > 0) {\n      hasIncorrectHeight = true;\n    }\n\n    return { element: elementContainer, styles: STYLES_NAV_STICKY_ELEMENT };\n  })();\n"],"names":["Utility.performance.debounce"],"mappings":";;;;AAEA,MAAM,+BAA+B;AACrC,MAAM,6BAA6B;AAEnC,MAAM,mCAAmC;AAGzC,MAAM,4BAA4B;AAAA,KAC7B,4BAA4B;AAAA;AAAA;AAAA;AAAA,KAI5B,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA,KAK1B,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrC,MAAA,QAAe,CAAC;AAAA,EACd;AAAA,EACA;AACF,OAIG,MAAM;AACL,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,gBAAgB,UAAU;AAAA,IAC9B;AAAA,EAAA;AAEF,QAAM,cAAc,MAAM;AACxB,UAAM,kBAAkB,UAAU,sBAAA;AAElC,QAAI,gBAAgB,MAAM,GAAG;AAC3B,UAAI,eAAe;AACjB,sBAAc,aAAa,UAAU,MAAM;AAC3C,uBAAe,UAAU,IAAI,gCAAgC;AAAA,MAC/D;AAAA,IACF,OAAO;AACL,UAAI,eAAe;AACjB,sBAAc,gBAAgB,QAAQ;AACtC,uBAAe,UAAU,OAAO,gCAAgC;AAEhE,YAAI,oBAAoB;AACtB,qBAAW,MAAM;AACf,wBAAA;AAAA,UACF,GAAG,GAAG;AACN,qBAAW,MAAM;AACf,wBAAA;AAAA,UACF,GAAG,GAAG;AACN,+BAAqB;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,cAAc,eAAe;AAEnC,QAAI,gBAAgB,GAAG;AACrB,uBAAiB,MAAM,SAAS,GAAG,WAAW;AAAA,IAChD;AAAA,EACF;AACA,MAAI,qBAAqB;AAEzB,iBAAe,UAAU,IAAI,0BAA0B;AACvD,iBAAe,YAAY,OAAO;AAElC,mBAAiB,UAAU,IAAI,4BAA4B;AAC3D,mBAAiB,YAAY,cAAc;AAE3C,SAAO,iBAAiB,UAAU,WAAW;AAC7C,SAAO;AAAA,IACL;AAAA,IACAA,SAA6B,MAAM;AACjC,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,SAAO,iBAAiB,QAAQ,MAAM;AACpC,eAAW,MAAM;AACf,kBAAA;AAAA,IACF,GAAG,GAAG;AAAA,EACR,CAAC;AAED,MAAI,OAAO,UAAU,GAAG;AACtB,yBAAqB;AAAA,EACvB;AAEA,SAAO,EAAE,SAAS,kBAAkB,QAAQ,0BAAA;AAC9C,GAAA;"}