@universityofmaryland/web-elements-library 1.3.6 → 1.4.0

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

@@ -0,0 +1,106 @@
+import { token, animation } from "@universityofmaryland/web-styles-library";
+import { animationLinkSpan } from "../../../../utilities/markup/modify.mjs";
+import { convertJSSObjectToStyles } from "../../../../utilities/theme/index.mjs";
+const Attributes = {
+  names: {
+    theme: "theme"
+  },
+  values: {
+    theme: {
+      DARK: "dark"
+    }
+  }
+};
+const IS_THEME_DARK = `[${Attributes.names.theme}=${Attributes.values.theme.DARK}]`;
+const ELEMENT_CONTAINER = "breadcrumb-container";
+const ELEMENT_PATH = "breadcrumb-path";
+const OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;
+const OVERWRITE_THEME_DARK_PATH = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_PATH}`;
+const OverwriteThemeStyles = `
+  ${OVERWRITE_THEME_DARK_CONTAINER} * {
+    color: ${token.color.white};
+  }
+
+  ${OVERWRITE_THEME_DARK_PATH} + *::before {
+    background-color: ${token.color.gray.dark};
+  }
+  
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`${OVERWRITE_THEME_DARK_PATH}:not(:last-child)`]: animation.line.slideUnderGrayDarkRed
+  }
+})}
+`;
+const PathStyles = `
+  .${ELEMENT_PATH}::-webkit-scrollbar { 
+    display: none;
+  }
+
+  .${ELEMENT_PATH}:last-child {
+    color: ${token.color.black};
+  }
+
+  .${ELEMENT_PATH}:not(:last-child) {
+    margin-right: 14px;
+  }
+
+  .${ELEMENT_PATH} + *::before {
+    content: '';
+    display: inline-block;
+    height: 14px;
+    background-color: ${token.color.gray.dark};
+    left: -8px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%) rotate(15deg);
+    width: 1px;
+  }
+`;
+const ContainerStyles = `
+  .${ELEMENT_CONTAINER} {
+    display: flex;
+    padding-right: 24px;
+    font-size: 12px;
+    padding-bottom: 1px;
+    overflow-x: auto;
+    scrollbar-width: none;
+    white-space: nowrap;
+    mask-image: linear-gradient(90deg, ${token.color.white} calc(100% - 24px), transparent);
+  }
+
+  .${ELEMENT_CONTAINER} * {
+    color: ${token.color.gray.mediumAA};
+    position: relative;
+  }
+
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ELEMENT_CONTAINER} a:not(:last-child)`]: animation.line.slideUnderGrayRed
+  }
+})}
+`;
+const index = ({ isThemeDark, linkListSlot }) => {
+  const links = linkListSlot.querySelectorAll("a");
+  let styles = `
+    ${ContainerStyles}
+    ${PathStyles}
+    ${OverwriteThemeStyles}
+  `;
+  if (isThemeDark)
+    linkListSlot.setAttribute(
+      Attributes.names.theme,
+      Attributes.values.theme.DARK
+    );
+  linkListSlot.classList.add(ELEMENT_CONTAINER);
+  for (const linkElement of links) {
+    linkElement.classList.add(ELEMENT_PATH);
+    animationLinkSpan({
+      element: linkElement
+    });
+  }
+  return { element: linkListSlot, styles };
+};
+export {
+  index as default
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/navigation/elements/breadcrumb/index.ts"],"sourcesContent":["import { animation, token } from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\n\nexport interface BreadcrumbProps {\n  isThemeDark?: boolean;\n  linkListSlot: HTMLElement;\n}\n\nconst Attributes = {\n  names: {\n    theme: 'theme',\n  },\n  values: {\n    theme: {\n      DARK: 'dark',\n    },\n  },\n};\n\nconst ELEMENT_NAME = 'umd-element-breadcrumb';\n\nconst IS_THEME_DARK = `[${Attributes.names.theme}=${Attributes.values.theme.DARK}]`;\n\nconst ELEMENT_CONTAINER = 'breadcrumb-container';\nconst ELEMENT_PATH = 'breadcrumb-path';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_PATH = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_PATH}`;\n\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_PATH} + *::before {\n    background-color: ${token.color.gray.dark};\n  }\n  \n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`${OVERWRITE_THEME_DARK_PATH}:not(:last-child)`]:\n        animation.line.slideUnderGrayDarkRed,\n    },\n  })}\n`;\n\nconst PathStyles = `\n  .${ELEMENT_PATH}::-webkit-scrollbar { \n    display: none;\n  }\n\n  .${ELEMENT_PATH}:last-child {\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_PATH}:not(:last-child) {\n    margin-right: 14px;\n  }\n\n  .${ELEMENT_PATH} + *::before {\n    content: '';\n    display: inline-block;\n    height: 14px;\n    background-color: ${token.color.gray.dark};\n    left: -8px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%) rotate(15deg);\n    width: 1px;\n  }\n`;\n\nconst ContainerStyles = `\n  .${ELEMENT_CONTAINER} {\n    display: flex;\n    padding-right: 24px;\n    font-size: 12px;\n    padding-bottom: 1px;\n    overflow-x: auto;\n    scrollbar-width: none;\n    white-space: nowrap;\n    mask-image: linear-gradient(90deg, ${\n      token.color.white\n    } calc(100% - 24px), transparent);\n  }\n\n  .${ELEMENT_CONTAINER} * {\n    color: ${token.color.gray.mediumAA};\n    position: relative;\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_CONTAINER} a:not(:last-child)`]:\n        animation.line.slideUnderGrayRed,\n    },\n  })}\n`;\n\nexport default ({ isThemeDark, linkListSlot }: BreadcrumbProps) => {\n  const links = linkListSlot.querySelectorAll('a') as NodeListOf<HTMLElement>;\n  let styles = `\n    ${ContainerStyles}\n    ${PathStyles}\n    ${OverwriteThemeStyles}\n  `;\n\n  if (isThemeDark)\n    linkListSlot.setAttribute(\n      Attributes.names.theme,\n      Attributes.values.theme.DARK,\n    );\n  linkListSlot.classList.add(ELEMENT_CONTAINER);\n\n  for (const linkElement of links) {\n    linkElement.classList.add(ELEMENT_PATH);\n    Utils.markup.modify.animationLinkSpan({\n      element: linkElement,\n    });\n  }\n\n  return { element: linkListSlot, styles };\n};\n"],"names":["Utils.theme.convertJSSObjectToStyles","Utils.markup.modify.animationLinkSpan"],"mappings":";;;AAQA,MAAM,aAAa;AAAA,EACjB,OAAO;AAAA,IACL,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ;AAAA,IACN,OAAO;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAIA,MAAM,gBAAgB,IAAI,WAAW,MAAM,KAAK,IAAI,WAAW,OAAO,MAAM,IAAI;AAEhF,MAAM,oBAAoB;AAC1B,MAAM,eAAe;AAErB,MAAM,iCAAiC,IAAI,iBAAiB,GAAG,aAAa;AAC5E,MAAM,4BAA4B,GAAG,8BAA8B,KAAK,YAAY;AAEpF,MAAM,uBAAuB;AAAA,IACzB,8BAA8B;AAAA,aACrB,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAG1B,yBAAyB;AAAA,wBACL,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,IAGzCA,yBAAqC;AAAA,EACrC,UAAU;AAAA,IACR,CAAC,GAAG,yBAAyB,mBAAmB,GAC9C,UAAU,KAAK;AAAA,EAAA;AAErB,CAAC,CAAC;AAAA;AAGJ,MAAM,aAAa;AAAA,KACd,YAAY;AAAA;AAAA;AAAA;AAAA,KAIZ,YAAY;AAAA,aACJ,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,KAGzB,YAAY;AAAA;AAAA;AAAA;AAAA,KAIZ,YAAY;AAAA;AAAA;AAAA;AAAA,wBAIO,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7C,MAAM,kBAAkB;AAAA,KACnB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAShB,MAAM,MAAM,KACd;AAAA;AAAA;AAAA,KAGC,iBAAiB;AAAA,aACT,MAAM,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,IAIlCA,yBAAqC;AAAA,EACrC,UAAU;AAAA,IACR,CAAC,IAAI,iBAAiB,qBAAqB,GACzC,UAAU,KAAK;AAAA,EAAA;AAErB,CAAC,CAAC;AAAA;AAGJ,MAAA,QAAe,CAAC,EAAE,aAAa,mBAAoC;AACjE,QAAM,QAAQ,aAAa,iBAAiB,GAAG;AAC/C,MAAI,SAAS;AAAA,MACT,eAAe;AAAA,MACf,UAAU;AAAA,MACV,oBAAoB;AAAA;AAGxB,MAAI;AACF,iBAAa;AAAA,MACX,WAAW,MAAM;AAAA,MACjB,WAAW,OAAO,MAAM;AAAA,IAAA;AAE5B,eAAa,UAAU,IAAI,iBAAiB;AAE5C,aAAW,eAAe,OAAO;AAC/B,gBAAY,UAAU,IAAI,YAAY;AACtCC,sBAAsC;AAAA,MACpC,SAAS;AAAA,IAAA,CACV;AAAA,EACH;AAEA,SAAO,EAAE,SAAS,cAAc,OAAA;AAClC;"}

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

@@ -0,0 +1,182 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const index$2 = require("../../../../utilities/accessibility/index.js");
+const icons = require("../../../../utilities/assets/icons.js");
+require("../../../../node_modules/postcss/lib/postcss.js");
+require("../../../../node_modules/postcss-nesting/dist/index.js");
+require("../../../../node_modules/postcss-js/index.js");
+const index$1 = require("../slider/index.js");
+const ANIMATION_TIME = 300;
+const ELEMENT_NAV_DRAWER_CONTAINER = "nav-drawer-container";
+const ELEMENT_NAV_DRAWER_OVERLAY = "nav-drawer-overlay";
+const ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER = "nav-drawer-overlay-wrapper";
+const ELEMENT_NAV_DRAWER_CLOSE_BUTTON = "nav-drawer-close-button";
+const DrawerButtonClose = `
+  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} {
+    background-color: ${Styles.token.color.red};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: ${Styles.token.spacing["2xl"]};
+    width: ${Styles.token.spacing["2xl"]};
+    padding: 12px;
+    transition: background .5s ease-in-out;
+    order: 2;
+  }
+
+  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:hover,
+  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:focus {
+    background-color: ${Styles.token.color.redDark};
+  }
+
+  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} svg {
+    fill: ${Styles.token.color.white};
+  }
+`;
+const DrawerContainer = `
+  .${ELEMENT_NAV_DRAWER_CONTAINER} {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    top: 0;
+    display: none;
+    z-index: 999999;
+  }
+
+  .${ELEMENT_NAV_DRAWER_OVERLAY} {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    background-color: rgba(0,0,0,0.5);
+    transition: opacity ${ANIMATION_TIME}ms ease-in-out;
+    cursor: pointer;
+    opacity: 0;
+  }
+
+  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} {
+    display: flex;
+    height: 100%;
+    transition: transform ${ANIMATION_TIME + 100}ms ease-in-out;
+    transform: translateX(-100%);
+  }
+
+  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} > *:not(.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}) {
+    height: 100% !important;
+  }
+`;
+const STYLES_NAV_DRAWER_ELEMENT = `
+  ${index$1.Styles}
+  ${DrawerButtonClose}
+  ${DrawerContainer}
+`;
+const CreateDrawerButton = (element) => {
+  const drawerCloseButton = document.createElement("button");
+  drawerCloseButton.innerHTML = icons.X;
+  drawerCloseButton.classList.add(ELEMENT_NAV_DRAWER_CLOSE_BUTTON);
+  drawerCloseButton.setAttribute("aria-label", "Close navigation drawer");
+  drawerCloseButton.addEventListener("click", element.eventClose.bind(element));
+  return drawerCloseButton;
+};
+const CreateNavDrawerContainer = (props) => {
+  const { eventClose } = props;
+  const bodyOverlay = document.createElement("div");
+  const bodyOverlayWrapper = document.createElement("div");
+  const closeButton = CreateDrawerButton(props);
+  const slider = index$1.CreateElement({
+    ...props,
+    displayType: "drawer-nav"
+  });
+  bodyOverlayWrapper.classList.add(ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER);
+  bodyOverlayWrapper.appendChild(closeButton);
+  bodyOverlayWrapper.appendChild(slider.container);
+  bodyOverlay.classList.add(ELEMENT_NAV_DRAWER_OVERLAY);
+  bodyOverlay.addEventListener("click", eventClose.bind(props));
+  bodyOverlay.appendChild(bodyOverlayWrapper);
+  return bodyOverlay;
+};
+const CreateNavDrawerElement = (props) => (() => {
+  const { context, primarySlideLinks } = props;
+  const body = document.querySelector("body");
+  const elementContainer = document.createElement("div");
+  if (!primarySlideLinks) return null;
+  const eventClose = () => {
+    const bodyOverlay = elementContainer.querySelector(
+      `.${ELEMENT_NAV_DRAWER_OVERLAY}`
+    );
+    const bodyOverlayWrapper = bodyOverlay.querySelector(
+      `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`
+    );
+    const slider = bodyOverlay.querySelector(
+      `.${index$1.Elements.slider}`
+    );
+    bodyOverlay.style.opacity = "0";
+    bodyOverlayWrapper.style.transform = "translateX(-100%)";
+    setTimeout(() => {
+      bodyOverlay.removeAttribute("style");
+      bodyOverlayWrapper.removeAttribute("style");
+      body.style.overflow = "auto";
+      elementContainer.style.display = "none";
+    }, ANIMATION_TIME + 100);
+    if (slider) {
+      slider.style.overflowY = `hidden`;
+    }
+  };
+  const eventOpen = () => {
+    const bodyOverlay = elementContainer.querySelector(
+      `.${ELEMENT_NAV_DRAWER_OVERLAY}`
+    );
+    const bodyOverlayWrapper = bodyOverlay.querySelector(
+      `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`
+    );
+    const closeButton = bodyOverlayWrapper.querySelector(
+      `.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}`
+    );
+    const slider = bodyOverlayWrapper.querySelector(
+      `.${index$1.Elements.slider}`
+    );
+    const activeSlide = bodyOverlayWrapper.querySelector(
+      `.${index$1.Elements.slider} div[data-active]`
+    );
+    elementContainer.style.display = "block";
+    bodyOverlay.style.display = "block";
+    bodyOverlayWrapper.style.display = "flex";
+    setTimeout(() => {
+      bodyOverlay.style.opacity = "1";
+      bodyOverlayWrapper.style.transform = "translateX(0)";
+      body.style.overflow = "hidden";
+      closeButton.focus();
+      index$2.eventAccessibilityFocus({
+        element: elementContainer,
+        action: () => eventClose(),
+        shadowDomContext: context
+      });
+    }, 100);
+    setTimeout(() => {
+      if (!activeSlide || !slider) return;
+      if (activeSlide.offsetHeight > elementContainer.offsetHeight) {
+        slider.style.overflowY = `scroll`;
+      }
+    }, 200);
+  };
+  const children = CreateNavDrawerContainer({
+    ...props,
+    eventOpen,
+    eventClose
+  });
+  elementContainer.classList.add(ELEMENT_NAV_DRAWER_CONTAINER);
+  elementContainer.appendChild(children);
+  return {
+    element: elementContainer,
+    events: {
+      eventOpen
+    }
+  };
+})();
+const index = {
+  CreateElement: CreateNavDrawerElement,
+  Styles: STYLES_NAV_DRAWER_ELEMENT
+};
+module.exports = index;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/drawer/index.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport { TypeMenuDisplayButtonRequirements } from '../menu-button';\nimport NavDrawerSlider, { TypeNavSliderRequirements } from '../slider';\n\nexport type TypeNavDrawerRequirements = TypeNavSliderRequirements & {\n  context?: HTMLElement;\n};\n\ntype TypeDrawerCloseButton = {\n  eventClose: () => void;\n};\n\ntype CombinedNavDrawerProps = TypeNavDrawerRequirements &\n  TypeDrawerCloseButton &\n  TypeMenuDisplayButtonRequirements;\n\nexport type TypeDrawerProps = CombinedNavDrawerProps;\n\nconst ANIMATION_TIME = 300;\n\nconst ELEMENT_NAV_DRAWER_CONTAINER = 'nav-drawer-container';\nconst ELEMENT_NAV_DRAWER_OVERLAY = 'nav-drawer-overlay';\nconst ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER = 'nav-drawer-overlay-wrapper';\nconst ELEMENT_NAV_DRAWER_CLOSE_BUTTON = 'nav-drawer-close-button';\n\n// prettier-ignore\nconst DrawerButtonClose = `\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} {\n    background-color: ${token.color.red};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: ${token.spacing['2xl']};\n    width: ${token.spacing['2xl']};\n    padding: 12px;\n    transition: background .5s ease-in-out;\n    order: 2;\n  }\n\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:hover,\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:focus {\n    background-color: ${token.color.redDark};\n  }\n\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} svg {\n    fill: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst DrawerContainer = `\n  .${ELEMENT_NAV_DRAWER_CONTAINER} {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    top: 0;\n    display: none;\n    z-index: 999999;\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY} {\n    position: fixed;\n    top: 0;\n    left: 0;\n    height: 100vh;\n    width: 100vw;\n    background-color: rgba(0,0,0,0.5);\n    transition: opacity ${ANIMATION_TIME}ms ease-in-out;\n    cursor: pointer;\n    opacity: 0;\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} {\n    display: flex;\n    height: 100%;\n    transition: transform ${ANIMATION_TIME + 100}ms ease-in-out;\n    transform: translateX(-100%);\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} > *:not(.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}) {\n    height: 100% !important;\n  }\n`;\n\nconst STYLES_NAV_DRAWER_ELEMENT = `\n  ${NavDrawerSlider.Styles}\n  ${DrawerButtonClose}\n  ${DrawerContainer}\n`;\n\nconst CreateDrawerButton = (element: TypeDrawerCloseButton) => {\n  const drawerCloseButton = document.createElement('button');\n\n  drawerCloseButton.innerHTML = Utility.asset.icon.X;\n  drawerCloseButton.classList.add(ELEMENT_NAV_DRAWER_CLOSE_BUTTON);\n  drawerCloseButton.setAttribute('aria-label', 'Close navigation drawer');\n  drawerCloseButton.addEventListener('click', element.eventClose.bind(element));\n\n  return drawerCloseButton;\n};\n\nconst CreateNavDrawerContainer = (props: TypeDrawerProps) => {\n  const { eventClose } = props;\n  const bodyOverlay = document.createElement('div');\n  const bodyOverlayWrapper = document.createElement('div');\n  const closeButton = CreateDrawerButton(props);\n  const slider = NavDrawerSlider.CreateElement({\n    ...props,\n    displayType: 'drawer-nav',\n  });\n\n  bodyOverlayWrapper.classList.add(ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER);\n\n  bodyOverlayWrapper.appendChild(closeButton);\n  bodyOverlayWrapper.appendChild(slider.container);\n\n  bodyOverlay.classList.add(ELEMENT_NAV_DRAWER_OVERLAY);\n  bodyOverlay.addEventListener('click', eventClose.bind(props));\n  bodyOverlay.appendChild(bodyOverlayWrapper);\n\n  return bodyOverlay;\n};\n\nconst CreateNavDrawerElement = (props: TypeNavDrawerRequirements) =>\n  (() => {\n    const { context, primarySlideLinks } = props;\n    const body = document.querySelector('body') as HTMLBodyElement;\n    const elementContainer = document.createElement('div');\n\n    if (!primarySlideLinks) return null;\n\n    const eventClose = () => {\n      const bodyOverlay = elementContainer.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY}`,\n      ) as HTMLDivElement;\n      const bodyOverlayWrapper = bodyOverlay.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`,\n      ) as HTMLDivElement;\n      const slider = bodyOverlay.querySelector(\n        `.${NavDrawerSlider.Elements.slider}`,\n      ) as HTMLDivElement;\n\n      bodyOverlay.style.opacity = '0';\n      bodyOverlayWrapper.style.transform = 'translateX(-100%)';\n\n      setTimeout(() => {\n        bodyOverlay.removeAttribute('style');\n        bodyOverlayWrapper.removeAttribute('style');\n        body.style.overflow = 'auto';\n        elementContainer.style.display = 'none';\n      }, ANIMATION_TIME + 100);\n\n      if (slider) {\n        slider.style.overflowY = `hidden`;\n      }\n    };\n\n    const eventOpen = () => {\n      const bodyOverlay = elementContainer.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY}`,\n      ) as HTMLDivElement;\n      const bodyOverlayWrapper = bodyOverlay.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`,\n      ) as HTMLDivElement;\n      const closeButton = bodyOverlayWrapper.querySelector(\n        `.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}`,\n      ) as HTMLButtonElement;\n      const slider = bodyOverlayWrapper.querySelector(\n        `.${NavDrawerSlider.Elements.slider}`,\n      ) as HTMLDivElement;\n      const activeSlide = bodyOverlayWrapper.querySelector(\n        `.${NavDrawerSlider.Elements.slider} div[data-active]`,\n      ) as HTMLDivElement;\n\n      elementContainer.style.display = 'block';\n      bodyOverlay.style.display = 'block';\n      bodyOverlayWrapper.style.display = 'flex';\n\n      setTimeout(() => {\n        bodyOverlay.style.opacity = '1';\n        bodyOverlayWrapper.style.transform = 'translateX(0)';\n        body.style.overflow = 'hidden';\n        closeButton.focus();\n\n        Utility.accessibility.eventAccessibilityFocus({\n          element: elementContainer,\n          action: () => eventClose(),\n          shadowDomContext: context,\n        });\n      }, 100);\n\n      setTimeout(() => {\n        if (!activeSlide || !slider) return;\n        if (activeSlide.offsetHeight > elementContainer.offsetHeight) {\n          slider.style.overflowY = `scroll`;\n        }\n      }, 200);\n    };\n\n    const children = CreateNavDrawerContainer({\n      ...props,\n      eventOpen,\n      eventClose,\n    });\n\n    elementContainer.classList.add(ELEMENT_NAV_DRAWER_CONTAINER);\n    elementContainer.appendChild(children);\n\n    return {\n      element: elementContainer,\n      events: {\n        eventOpen,\n      },\n    };\n  })();\n\nexport default {\n  CreateElement: CreateNavDrawerElement,\n  Styles: STYLES_NAV_DRAWER_ELEMENT,\n};\n"],"names":["token","NavDrawerSlider","Utility.asset.icon.X","Utility.accessibility.eventAccessibilityFocus"],"mappings":"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"}

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

@@ -0,0 +1,183 @@
+import { token } from "@universityofmaryland/web-styles-library";
+import { eventAccessibilityFocus } from "../../../../utilities/accessibility/index.mjs";
+import { X } from "../../../../utilities/assets/icons.mjs";
+import "../../../../node_modules/postcss/lib/postcss.mjs";
+import "../../../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../../../node_modules/postcss-js/index.mjs";
+import NavDrawerSlider from "../slider/index.mjs";
+const ANIMATION_TIME = 300;
+const ELEMENT_NAV_DRAWER_CONTAINER = "nav-drawer-container";
+const ELEMENT_NAV_DRAWER_OVERLAY = "nav-drawer-overlay";
+const ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER = "nav-drawer-overlay-wrapper";
+const ELEMENT_NAV_DRAWER_CLOSE_BUTTON = "nav-drawer-close-button";
+const DrawerButtonClose = `
+  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} {
+    background-color: ${token.color.red};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: ${token.spacing["2xl"]};
+    width: ${token.spacing["2xl"]};
+    padding: 12px;
+    transition: background .5s ease-in-out;
+    order: 2;
+  }
+
+  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:hover,
+  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:focus {
+    background-color: ${token.color.redDark};
+  }
+
+  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} svg {
+    fill: ${token.color.white};
+  }
+`;
+const DrawerContainer = `
+  .${ELEMENT_NAV_DRAWER_CONTAINER} {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    top: 0;
+    display: none;
+    z-index: 999999;
+  }
+
+  .${ELEMENT_NAV_DRAWER_OVERLAY} {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    background-color: rgba(0,0,0,0.5);
+    transition: opacity ${ANIMATION_TIME}ms ease-in-out;
+    cursor: pointer;
+    opacity: 0;
+  }
+
+  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} {
+    display: flex;
+    height: 100%;
+    transition: transform ${ANIMATION_TIME + 100}ms ease-in-out;
+    transform: translateX(-100%);
+  }
+
+  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} > *:not(.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}) {
+    height: 100% !important;
+  }
+`;
+const STYLES_NAV_DRAWER_ELEMENT = `
+  ${NavDrawerSlider.Styles}
+  ${DrawerButtonClose}
+  ${DrawerContainer}
+`;
+const CreateDrawerButton = (element) => {
+  const drawerCloseButton = document.createElement("button");
+  drawerCloseButton.innerHTML = X;
+  drawerCloseButton.classList.add(ELEMENT_NAV_DRAWER_CLOSE_BUTTON);
+  drawerCloseButton.setAttribute("aria-label", "Close navigation drawer");
+  drawerCloseButton.addEventListener("click", element.eventClose.bind(element));
+  return drawerCloseButton;
+};
+const CreateNavDrawerContainer = (props) => {
+  const { eventClose } = props;
+  const bodyOverlay = document.createElement("div");
+  const bodyOverlayWrapper = document.createElement("div");
+  const closeButton = CreateDrawerButton(props);
+  const slider = NavDrawerSlider.CreateElement({
+    ...props,
+    displayType: "drawer-nav"
+  });
+  bodyOverlayWrapper.classList.add(ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER);
+  bodyOverlayWrapper.appendChild(closeButton);
+  bodyOverlayWrapper.appendChild(slider.container);
+  bodyOverlay.classList.add(ELEMENT_NAV_DRAWER_OVERLAY);
+  bodyOverlay.addEventListener("click", eventClose.bind(props));
+  bodyOverlay.appendChild(bodyOverlayWrapper);
+  return bodyOverlay;
+};
+const CreateNavDrawerElement = (props) => (() => {
+  const { context, primarySlideLinks } = props;
+  const body = document.querySelector("body");
+  const elementContainer = document.createElement("div");
+  if (!primarySlideLinks) return null;
+  const eventClose = () => {
+    const bodyOverlay = elementContainer.querySelector(
+      `.${ELEMENT_NAV_DRAWER_OVERLAY}`
+    );
+    const bodyOverlayWrapper = bodyOverlay.querySelector(
+      `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`
+    );
+    const slider = bodyOverlay.querySelector(
+      `.${NavDrawerSlider.Elements.slider}`
+    );
+    bodyOverlay.style.opacity = "0";
+    bodyOverlayWrapper.style.transform = "translateX(-100%)";
+    setTimeout(() => {
+      bodyOverlay.removeAttribute("style");
+      bodyOverlayWrapper.removeAttribute("style");
+      body.style.overflow = "auto";
+      elementContainer.style.display = "none";
+    }, ANIMATION_TIME + 100);
+    if (slider) {
+      slider.style.overflowY = `hidden`;
+    }
+  };
+  const eventOpen = () => {
+    const bodyOverlay = elementContainer.querySelector(
+      `.${ELEMENT_NAV_DRAWER_OVERLAY}`
+    );
+    const bodyOverlayWrapper = bodyOverlay.querySelector(
+      `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`
+    );
+    const closeButton = bodyOverlayWrapper.querySelector(
+      `.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}`
+    );
+    const slider = bodyOverlayWrapper.querySelector(
+      `.${NavDrawerSlider.Elements.slider}`
+    );
+    const activeSlide = bodyOverlayWrapper.querySelector(
+      `.${NavDrawerSlider.Elements.slider} div[data-active]`
+    );
+    elementContainer.style.display = "block";
+    bodyOverlay.style.display = "block";
+    bodyOverlayWrapper.style.display = "flex";
+    setTimeout(() => {
+      bodyOverlay.style.opacity = "1";
+      bodyOverlayWrapper.style.transform = "translateX(0)";
+      body.style.overflow = "hidden";
+      closeButton.focus();
+      eventAccessibilityFocus({
+        element: elementContainer,
+        action: () => eventClose(),
+        shadowDomContext: context
+      });
+    }, 100);
+    setTimeout(() => {
+      if (!activeSlide || !slider) return;
+      if (activeSlide.offsetHeight > elementContainer.offsetHeight) {
+        slider.style.overflowY = `scroll`;
+      }
+    }, 200);
+  };
+  const children = CreateNavDrawerContainer({
+    ...props,
+    eventOpen,
+    eventClose
+  });
+  elementContainer.classList.add(ELEMENT_NAV_DRAWER_CONTAINER);
+  elementContainer.appendChild(children);
+  return {
+    element: elementContainer,
+    events: {
+      eventOpen
+    }
+  };
+})();
+const index = {
+  CreateElement: CreateNavDrawerElement,
+  Styles: STYLES_NAV_DRAWER_ELEMENT
+};
+export {
+  index as default
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/navigation/elements/drawer/index.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport { TypeMenuDisplayButtonRequirements } from '../menu-button';\nimport NavDrawerSlider, { TypeNavSliderRequirements } from '../slider';\n\nexport type TypeNavDrawerRequirements = TypeNavSliderRequirements & {\n  context?: HTMLElement;\n};\n\ntype TypeDrawerCloseButton = {\n  eventClose: () => void;\n};\n\ntype CombinedNavDrawerProps = TypeNavDrawerRequirements &\n  TypeDrawerCloseButton &\n  TypeMenuDisplayButtonRequirements;\n\nexport type TypeDrawerProps = CombinedNavDrawerProps;\n\nconst ANIMATION_TIME = 300;\n\nconst ELEMENT_NAV_DRAWER_CONTAINER = 'nav-drawer-container';\nconst ELEMENT_NAV_DRAWER_OVERLAY = 'nav-drawer-overlay';\nconst ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER = 'nav-drawer-overlay-wrapper';\nconst ELEMENT_NAV_DRAWER_CLOSE_BUTTON = 'nav-drawer-close-button';\n\n// prettier-ignore\nconst DrawerButtonClose = `\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} {\n    background-color: ${token.color.red};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: ${token.spacing['2xl']};\n    width: ${token.spacing['2xl']};\n    padding: 12px;\n    transition: background .5s ease-in-out;\n    order: 2;\n  }\n\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:hover,\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:focus {\n    background-color: ${token.color.redDark};\n  }\n\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} svg {\n    fill: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst DrawerContainer = `\n  .${ELEMENT_NAV_DRAWER_CONTAINER} {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    top: 0;\n    display: none;\n    z-index: 999999;\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY} {\n    position: fixed;\n    top: 0;\n    left: 0;\n    height: 100vh;\n    width: 100vw;\n    background-color: rgba(0,0,0,0.5);\n    transition: opacity ${ANIMATION_TIME}ms ease-in-out;\n    cursor: pointer;\n    opacity: 0;\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} {\n    display: flex;\n    height: 100%;\n    transition: transform ${ANIMATION_TIME + 100}ms ease-in-out;\n    transform: translateX(-100%);\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} > *:not(.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}) {\n    height: 100% !important;\n  }\n`;\n\nconst STYLES_NAV_DRAWER_ELEMENT = `\n  ${NavDrawerSlider.Styles}\n  ${DrawerButtonClose}\n  ${DrawerContainer}\n`;\n\nconst CreateDrawerButton = (element: TypeDrawerCloseButton) => {\n  const drawerCloseButton = document.createElement('button');\n\n  drawerCloseButton.innerHTML = Utility.asset.icon.X;\n  drawerCloseButton.classList.add(ELEMENT_NAV_DRAWER_CLOSE_BUTTON);\n  drawerCloseButton.setAttribute('aria-label', 'Close navigation drawer');\n  drawerCloseButton.addEventListener('click', element.eventClose.bind(element));\n\n  return drawerCloseButton;\n};\n\nconst CreateNavDrawerContainer = (props: TypeDrawerProps) => {\n  const { eventClose } = props;\n  const bodyOverlay = document.createElement('div');\n  const bodyOverlayWrapper = document.createElement('div');\n  const closeButton = CreateDrawerButton(props);\n  const slider = NavDrawerSlider.CreateElement({\n    ...props,\n    displayType: 'drawer-nav',\n  });\n\n  bodyOverlayWrapper.classList.add(ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER);\n\n  bodyOverlayWrapper.appendChild(closeButton);\n  bodyOverlayWrapper.appendChild(slider.container);\n\n  bodyOverlay.classList.add(ELEMENT_NAV_DRAWER_OVERLAY);\n  bodyOverlay.addEventListener('click', eventClose.bind(props));\n  bodyOverlay.appendChild(bodyOverlayWrapper);\n\n  return bodyOverlay;\n};\n\nconst CreateNavDrawerElement = (props: TypeNavDrawerRequirements) =>\n  (() => {\n    const { context, primarySlideLinks } = props;\n    const body = document.querySelector('body') as HTMLBodyElement;\n    const elementContainer = document.createElement('div');\n\n    if (!primarySlideLinks) return null;\n\n    const eventClose = () => {\n      const bodyOverlay = elementContainer.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY}`,\n      ) as HTMLDivElement;\n      const bodyOverlayWrapper = bodyOverlay.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`,\n      ) as HTMLDivElement;\n      const slider = bodyOverlay.querySelector(\n        `.${NavDrawerSlider.Elements.slider}`,\n      ) as HTMLDivElement;\n\n      bodyOverlay.style.opacity = '0';\n      bodyOverlayWrapper.style.transform = 'translateX(-100%)';\n\n      setTimeout(() => {\n        bodyOverlay.removeAttribute('style');\n        bodyOverlayWrapper.removeAttribute('style');\n        body.style.overflow = 'auto';\n        elementContainer.style.display = 'none';\n      }, ANIMATION_TIME + 100);\n\n      if (slider) {\n        slider.style.overflowY = `hidden`;\n      }\n    };\n\n    const eventOpen = () => {\n      const bodyOverlay = elementContainer.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY}`,\n      ) as HTMLDivElement;\n      const bodyOverlayWrapper = bodyOverlay.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`,\n      ) as HTMLDivElement;\n      const closeButton = bodyOverlayWrapper.querySelector(\n        `.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}`,\n      ) as HTMLButtonElement;\n      const slider = bodyOverlayWrapper.querySelector(\n        `.${NavDrawerSlider.Elements.slider}`,\n      ) as HTMLDivElement;\n      const activeSlide = bodyOverlayWrapper.querySelector(\n        `.${NavDrawerSlider.Elements.slider} div[data-active]`,\n      ) as HTMLDivElement;\n\n      elementContainer.style.display = 'block';\n      bodyOverlay.style.display = 'block';\n      bodyOverlayWrapper.style.display = 'flex';\n\n      setTimeout(() => {\n        bodyOverlay.style.opacity = '1';\n        bodyOverlayWrapper.style.transform = 'translateX(0)';\n        body.style.overflow = 'hidden';\n        closeButton.focus();\n\n        Utility.accessibility.eventAccessibilityFocus({\n          element: elementContainer,\n          action: () => eventClose(),\n          shadowDomContext: context,\n        });\n      }, 100);\n\n      setTimeout(() => {\n        if (!activeSlide || !slider) return;\n        if (activeSlide.offsetHeight > elementContainer.offsetHeight) {\n          slider.style.overflowY = `scroll`;\n        }\n      }, 200);\n    };\n\n    const children = CreateNavDrawerContainer({\n      ...props,\n      eventOpen,\n      eventClose,\n    });\n\n    elementContainer.classList.add(ELEMENT_NAV_DRAWER_CONTAINER);\n    elementContainer.appendChild(children);\n\n    return {\n      element: elementContainer,\n      events: {\n        eventOpen,\n      },\n    };\n  })();\n\nexport default {\n  CreateElement: CreateNavDrawerElement,\n  Styles: STYLES_NAV_DRAWER_ELEMENT,\n};\n"],"names":["Utility.asset.icon.X","Utility.accessibility.eventAccessibilityFocus"],"mappings":"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"}

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./breadcrumb/index.js");
+const index$1 = require("./drawer/index.js");
+const index$2 = require("./menu-button/index.js");
+const index$3 = require("./item/index.js");
+const index$4 = require("./slider/index.js");
+const index$5 = require("./sticky/index.js");
+exports.breadcrumb = index;
+exports.drawer = index$1;
+exports.menuButton = index$2;
+exports.item = index$3;
+exports.slider = index$4;
+exports.sticky = index$5;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

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

@@ -0,0 +1,15 @@
+import { default as default2 } from "./breadcrumb/index.mjs";
+import { default as default3 } from "./drawer/index.mjs";
+import { default as default4 } from "./menu-button/index.mjs";
+import { default as default5 } from "./item/index.mjs";
+import { default as default6 } from "./slider/index.mjs";
+import { default as default7 } from "./sticky/index.mjs";
+export {
+  default2 as breadcrumb,
+  default3 as drawer,
+  default5 as item,
+  default4 as menuButton,
+  default6 as slider,
+  default7 as sticky
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}