@universityofmaryland/web-elements-library 1.5.9 → 1.6.0-beta.1

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

@@ -1 +0,0 @@
-{"version":3,"file":"slides.mjs","sources":["../../../../../source/composite/navigation/elements/slider/slides.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { cloneElementWithoutAttributes } from '@universityofmaryland/web-utilities-library/dom';\nimport { chevron_down as iconChevronDown } from '@universityofmaryland/web-icons-library/controls';\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  ${jssToCSS({\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 = `${iconChevronDown} 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(cloneElementWithoutAttributes({ 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":["FirstSlide","iconChevronDown"],"mappings":"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"}

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

@@ -1,84 +0,0 @@
-import { debounce } from "@universityofmaryland/web-utilities-library/performance";
-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

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/navigation/elements/sticky/index.ts"],"sourcesContent":["import { debounce } from '@universityofmaryland/web-utilities-library/performance';\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      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":[],"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,IACA,SAAS,MAAM;AACb,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/header.mjs

@@ -1,327 +0,0 @@
-import * as token from "@universityofmaryland/web-token-library";
-import * as typography from "@universityofmaryland/web-styles-library/typography";
-import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
-import { isExternalUrl } from "@universityofmaryland/web-utilities-library/network";
-import { search } from "@universityofmaryland/web-icons-library/search";
-import MenuButton from "./elements/menu-button/index.mjs";
-import NavigationItem from "./elements/item/index.mjs";
-const ANIMATION_TIME = 500;
-const ATTRIBUTE_STICKY = "data-sticky";
-const ATTRIBUTE_CTA = "data-cta";
-const IS_STICKY = `[${ATTRIBUTE_STICKY}="true"]`;
-const IS_CTA = `[${ATTRIBUTE_CTA}="true"]`;
-const ELEMENT_HEADER_DECLARATION = "element-header-declaration";
-const ELEMENT_HEADER_CONTAINTER = "element-header-container";
-const ELEMENT_HEADER_WRAPPER = "element-header-wrapper";
-const ELEMENT_HEADER_LOGO_COLUMN = "element-header-logo-column";
-const ELEMENT_HEADER_NAVIGATION_COLUMN = "element-header-navigation-column";
-const ELEMENT_HEADER_LOGO = "element-header-logo";
-const ELEMENT_HEADER_MENU_BUTTON = "element-header-menu-button";
-const ELEMENT_HEADER_MENU_CTA = "element-header-menu-cta";
-const ELEMENT_HEADER_MENU_SEARCH = "element-header-menu-search";
-const ELEMENT_HEADER_NAVIGATION_ROW = "element-header-navigation-row";
-const ELEMENT_HEADER_UTILITY_ROW = "element-header-utility-row";
-const OVERWRITE_STICKY_CONTAINER = `.${ELEMENT_HEADER_CONTAINTER}${IS_STICKY}`;
-const OVERWRITE_STICKY_LOGO = `${OVERWRITE_STICKY_CONTAINER} .${ELEMENT_HEADER_LOGO}`;
-const OVERWRITE_CTA_WRAPPER = `.${ELEMENT_HEADER_WRAPPER}${IS_CTA}`;
-const OVERWRITE_CTA_WRAPPER_NAV_ROW = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADER_NAVIGATION_ROW}`;
-const OVERWRITE_CTA_WRAPPER_CTA = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADER_MENU_CTA}`;
-const OverwriteStickyStyles = `
-  ${OVERWRITE_STICKY_CONTAINER} {
-    padding: ${token.spacing.xs} 0;
-  }
-
-  .${ELEMENT_HEADER_WRAPPER} {
-     align-items: center;
-  }
-
-  ${OVERWRITE_STICKY_LOGO} img {
-    max-height: 30px;
-  }
-`;
-const CtaStyles = `
-  .${ELEMENT_HEADER_MENU_CTA} {
-    color: ${token.color.white};
-    font-weight: ${token.font.weight.bold};
-    font-size: ${token.font.size.sm};
-    padding: ${token.spacing.xs};
-    background-color: ${token.color.red};
-    transition: background .5s;
-    white-space: nowrap;
-  }
-
-  .${ELEMENT_HEADER_MENU_CTA}:hover,
-  .${ELEMENT_HEADER_MENU_CTA}:focus {
-    background-color: ${token.color.redDark};
-  }
-
-  ${OVERWRITE_CTA_WRAPPER_CTA} {
-    margin-top: -${token.spacing.min};
-  }
-`;
-const NavigationColumnStyles = `
-  @media (max-width: 1240px) {
-    .${ELEMENT_HEADER_NAVIGATION_COLUMN} {
-      display: none;
-    }
-  }
-
-  .${ELEMENT_HEADER_NAVIGATION_ROW} {
-    display: grid;
-    grid-auto-flow: column;
-  }
-
-  ${OVERWRITE_CTA_WRAPPER_NAV_ROW} {
-    padding-top: ${token.spacing.sm};
-  }
-
-  .${ELEMENT_HEADER_NAVIGATION_ROW} > * {
-    display: block;
-  }
-
-  .${ELEMENT_HEADER_NAVIGATION_ROW} > *:not(:first-child) {
-    margin-left: ${token.spacing.md};
-  }
-
-  .${ELEMENT_HEADER_NAVIGATION_ROW} svg {
-    width: 24px;
-    height: 24px;
-    fill: ${token.color.black};
-  }
-
-  .${ELEMENT_HEADER_UTILITY_ROW} {
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom: ${token.spacing.sm};
-  }
-
-  .${ELEMENT_HEADER_UTILITY_ROW} ::slotted(*) {
-    display: flex;
-    justify-content: flex-end;
-    gap: ${token.spacing.md};
-  }
-`;
-const LogoColumnStyles = `
-  .${ELEMENT_HEADER_LOGO_COLUMN} {
-    align-items: center;
-    display: flex;
-    justify-content: flex-start;
-    position: relative;
-    width: 100%;
-    max-width: 400px;
-  }
-
-  .${ELEMENT_HEADER_MENU_BUTTON} {
-    border-right: 1px solid ${token.color.gray.light};
-    padding-right: ${token.spacing.min};
-    margin-right: ${token.spacing.sm};
-  }
-
-  .${ELEMENT_HEADER_LOGO} {
-    display: grid;
-    justify-content: flex-start;
-    max-width: 350px;
-  }
-
-  .${ELEMENT_HEADER_LOGO}:has(img[src*=".svg"]) img {
-    height: 240px;
-  }
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_HEADER_LOGO}`]: typography.sans.larger
-  }
-})}
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_HEADER_LOGO} *`]: typography.sans.larger
-  }
-})}
-
-  .${ELEMENT_HEADER_LOGO},
-  .${ELEMENT_HEADER_LOGO} * {
-    line-height: 1.05em;
-    width: 100%;
-  }
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_HEADER_LOGO}[size="large"]`]: typography.sans.extraLarge
-  }
-})}
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_HEADER_LOGO}[size="large"] *`]: typography.sans.extraLarge
-  }
-})}
-
-  .${ELEMENT_HEADER_LOGO},
-  .${ELEMENT_HEADER_LOGO} * {
-    font-weight: 700;
-  }
-
-  .${ELEMENT_HEADER_LOGO} img {
-    width: 100%;
-    max-height: 48px;
-    max-width: 190px;
-  }
-
-  @media (min-width: ${token.media.breakpoints.tablet.min}) {
-    .${ELEMENT_HEADER_LOGO} img {
-      max-width: 240px;
-    }
-  }
-`;
-const WrapperStyles = `
-  .${ELEMENT_HEADER_WRAPPER} {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    gap: ${token.spacing.lg};
-    z-index: 999;
-  }
-`;
-const STYLES_NAVIGATION_HEADER = `
-  .${ELEMENT_HEADER_CONTAINTER} {
-    background-color: ${token.color.white};
-    display: block;
-    padding: ${token.spacing.md} 0;
-    position: relative;
-    transition: padding ${ANIMATION_TIME}ms;
-  }
-
-  ${WrapperStyles}
-  ${LogoColumnStyles}
-  ${NavigationColumnStyles}
-  ${CtaStyles}
-  ${OverwriteStickyStyles}
-  ${NavigationItem.Styles}
-  ${MenuButton.Styles}
-`;
-const CreateSearchLink = ({ searchUrl }) => {
-  if (!searchUrl) return null;
-  const searchLink = document.createElement("a");
-  searchLink.href = searchUrl;
-  searchLink.ariaLabel = "Visit the search page";
-  searchLink.innerHTML = search;
-  searchLink.classList.add(ELEMENT_HEADER_MENU_SEARCH);
-  return searchLink;
-};
-const CreateCtaLink = ({ ctaUrl, ctaText }) => {
-  if (!ctaUrl || !ctaText) return null;
-  const cta = document.createElement("a");
-  cta.innerHTML = ctaText;
-  if (isExternalUrl(ctaUrl)) {
-    cta.setAttribute("target", "_blank");
-  }
-  cta.setAttribute("href", ctaUrl);
-  cta.classList.add(ELEMENT_HEADER_MENU_CTA);
-  return cta;
-};
-const CreateNavigationColumn = ({
-  utilityRow,
-  navItems,
-  searchUrl,
-  ctaText,
-  ctaUrl
-}) => {
-  if (!navItems) return;
-  const navColumnContainer = document.createElement("div");
-  const utilityRowContainer = document.createElement("div");
-  const navRowContainer = document.createElement("div");
-  const searchLink = CreateSearchLink({
-    searchUrl
-  });
-  const ctaLink = CreateCtaLink({ ctaText, ctaUrl });
-  if (utilityRow) {
-    utilityRowContainer.classList.add(ELEMENT_HEADER_UTILITY_ROW);
-    utilityRowContainer.appendChild(utilityRow);
-    navColumnContainer.appendChild(utilityRowContainer);
-  }
-  navRowContainer.classList.add(ELEMENT_HEADER_NAVIGATION_ROW);
-  navItems.forEach((item) => {
-    navRowContainer.appendChild(item);
-  });
-  if (searchLink) navRowContainer.appendChild(searchLink);
-  if (ctaLink) navRowContainer.appendChild(ctaLink);
-  navColumnContainer.classList.add(ELEMENT_HEADER_NAVIGATION_COLUMN);
-  navColumnContainer.appendChild(navRowContainer);
-  return navColumnContainer;
-};
-const CreateLogoColumn = ({ logo, eventOpen }) => {
-  const container = document.createElement("div");
-  if (eventOpen) {
-    const menuButton = MenuButton.CreateElement({ eventOpen });
-    menuButton.classList.add(ELEMENT_HEADER_MENU_BUTTON);
-    container.appendChild(menuButton);
-  }
-  if (logo) {
-    const childrenText = Array.from(logo.children).reduce((acc, child) => {
-      if (child.nodeName === "IMG") return acc;
-      if (child.textContent) {
-        return acc + child.textContent.length;
-      }
-      return acc;
-    }, 0);
-    logo.classList.add(ELEMENT_HEADER_LOGO);
-    if (childrenText < 30) {
-      logo.setAttribute("size", "large");
-    }
-    container.appendChild(logo);
-  }
-  container.classList.add(ELEMENT_HEADER_LOGO_COLUMN);
-  return container;
-};
-const CreateNavigationHeader = (props) => {
-  const { ctaUrl, ctaText } = props;
-  const declaration = document.createElement("div");
-  const container = document.createElement("div");
-  const wrapper = document.createElement("div");
-  const logoColumn = CreateLogoColumn(props);
-  const navigationColumn = CreateNavigationColumn(props);
-  const eventSticky = ({ isSticky }) => {
-    const utility = container.querySelector(
-      `.${ELEMENT_HEADER_UTILITY_ROW}`
-    );
-    if (isSticky && isElementSticky) return;
-    if (isSticky) {
-      isElementSticky = true;
-      container.setAttribute(ATTRIBUTE_STICKY, "true");
-      if (utility) {
-        utility.style.display = "none";
-      }
-    }
-    if (!isSticky) {
-      isElementSticky = false;
-      container.removeAttribute(ATTRIBUTE_STICKY);
-      if (utility) {
-        utility.style.display = "block";
-      }
-    }
-  };
-  let isElementSticky = false;
-  wrapper.classList.add(ELEMENT_HEADER_WRAPPER);
-  wrapper.appendChild(logoColumn);
-  if (navigationColumn) wrapper.appendChild(navigationColumn);
-  if (ctaUrl && ctaText) wrapper.setAttribute(ATTRIBUTE_CTA, "true");
-  container.appendChild(wrapper);
-  container.classList.add(ELEMENT_HEADER_CONTAINTER);
-  declaration.classList.add(ELEMENT_HEADER_DECLARATION);
-  declaration.appendChild(container);
-  return {
-    element: declaration,
-    events: {
-      sticky: eventSticky
-    }
-  };
-};
-const header = {
-  CreateElement: CreateNavigationHeader,
-  Styles: STYLES_NAVIGATION_HEADER
-};
-export {
-  header as default
-};
-//# sourceMappingURL=header.mjs.map

package/dist/composite/navigation/header.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"header.mjs","sources":["../../../source/composite/navigation/header.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { isExternalUrl } from '@universityofmaryland/web-utilities-library/network';\nimport { search as iconSearch } from '@universityofmaryland/web-icons-library/search';\nimport MenuButton from './elements/menu-button';\nimport NavigationItem from './elements/item';\n\ntype TypeLogoRequirments = {\n  logo?: HTMLElement | null;\n  eventOpen?: () => void;\n};\n\ntype TypeSearchLink = {\n  searchUrl: string | null;\n};\n\ntype TypeCtaLink = {\n  ctaUrl: string | null;\n  ctaText: string | null;\n};\n\ntype TypeNavRow = TypeSearchLink &\n  TypeCtaLink & {\n    utilityRow?: HTMLElement | null;\n    navItems?: HTMLElement[];\n  };\n\ntype TypeHeaderRequirements = TypeLogoRequirments & TypeNavRow;\n\nconst ANIMATION_TIME = 500;\n\nconst ATTRIBUTE_STICKY = 'data-sticky';\nconst ATTRIBUTE_CTA = 'data-cta';\n\nconst IS_STICKY = `[${ATTRIBUTE_STICKY}=\"true\"]`;\nconst IS_CTA = `[${ATTRIBUTE_CTA}=\"true\"]`;\n\nconst ELEMENT_HEADER_DECLARATION = 'element-header-declaration';\nconst ELEMENT_HEADER_CONTAINTER = 'element-header-container';\nconst ELEMENT_HEADER_WRAPPER = 'element-header-wrapper';\nconst ELEMENT_HEADER_LOGO_COLUMN = 'element-header-logo-column';\nconst ELEMENT_HEADER_NAVIGATION_COLUMN = 'element-header-navigation-column';\nconst ELEMENT_HEADER_LOGO = 'element-header-logo';\nconst ELEMENT_HEADER_MENU_BUTTON = 'element-header-menu-button';\nconst ELEMENT_HEADER_MENU_CTA = 'element-header-menu-cta';\nconst ELEMENT_HEADER_MENU_SEARCH = 'element-header-menu-search';\nconst ELEMENT_HEADER_NAVIGATION_ROW = 'element-header-navigation-row';\nconst ELEMENT_HEADER_UTILITY_ROW = 'element-header-utility-row';\n\nconst OVERWRITE_STICKY_CONTAINER = `.${ELEMENT_HEADER_CONTAINTER}${IS_STICKY}`;\nconst OVERWRITE_STICKY_LOGO = `${OVERWRITE_STICKY_CONTAINER} .${ELEMENT_HEADER_LOGO}`;\nconst OVERWRITE_CTA_WRAPPER = `.${ELEMENT_HEADER_WRAPPER}${IS_CTA}`;\nconst OVERWRITE_CTA_WRAPPER_NAV_ROW = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADER_NAVIGATION_ROW}`;\nconst OVERWRITE_CTA_WRAPPER_CTA = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADER_MENU_CTA}`;\n\nconst OverwriteStickyStyles = `\n  ${OVERWRITE_STICKY_CONTAINER} {\n    padding: ${token.spacing.xs} 0;\n  }\n\n  .${ELEMENT_HEADER_WRAPPER} {\n     align-items: center;\n  }\n\n  ${OVERWRITE_STICKY_LOGO} img {\n    max-height: 30px;\n  }\n`;\n\nconst CtaStyles = `\n  .${ELEMENT_HEADER_MENU_CTA} {\n    color: ${token.color.white};\n    font-weight: ${token.font.weight.bold};\n    font-size: ${token.font.size.sm};\n    padding: ${token.spacing.xs};\n    background-color: ${token.color.red};\n    transition: background .5s;\n    white-space: nowrap;\n  }\n\n  .${ELEMENT_HEADER_MENU_CTA}:hover,\n  .${ELEMENT_HEADER_MENU_CTA}:focus {\n    background-color: ${token.color.redDark};\n  }\n\n  ${OVERWRITE_CTA_WRAPPER_CTA} {\n    margin-top: -${token.spacing.min};\n  }\n`;\n\nconst NavigationColumnStyles = `\n  @media (max-width: 1240px) {\n    .${ELEMENT_HEADER_NAVIGATION_COLUMN} {\n      display: none;\n    }\n  }\n\n  .${ELEMENT_HEADER_NAVIGATION_ROW} {\n    display: grid;\n    grid-auto-flow: column;\n  }\n\n  ${OVERWRITE_CTA_WRAPPER_NAV_ROW} {\n    padding-top: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_HEADER_NAVIGATION_ROW} > * {\n    display: block;\n  }\n\n  .${ELEMENT_HEADER_NAVIGATION_ROW} > *:not(:first-child) {\n    margin-left: ${token.spacing.md};\n  }\n\n  .${ELEMENT_HEADER_NAVIGATION_ROW} svg {\n    width: 24px;\n    height: 24px;\n    fill: ${token.color.black};\n  }\n\n  .${ELEMENT_HEADER_UTILITY_ROW} {\n    display: flex;\n    justify-content: flex-end;\n    margin-bottom: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_HEADER_UTILITY_ROW} ::slotted(*) {\n    display: flex;\n    justify-content: flex-end;\n    gap: ${token.spacing.md};\n  }\n`;\n\nconst LogoColumnStyles = `\n  .${ELEMENT_HEADER_LOGO_COLUMN} {\n    align-items: center;\n    display: flex;\n    justify-content: flex-start;\n    position: relative;\n    width: 100%;\n    max-width: 400px;\n  }\n\n  .${ELEMENT_HEADER_MENU_BUTTON} {\n    border-right: 1px solid ${token.color.gray.light};\n    padding-right: ${token.spacing.min};\n    margin-right: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_HEADER_LOGO} {\n    display: grid;\n    justify-content: flex-start;\n    max-width: 350px;\n  }\n\n  .${ELEMENT_HEADER_LOGO}:has(img[src*=\".svg\"]) img {\n    height: 240px;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_HEADER_LOGO}`]: typography.sans.larger,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_HEADER_LOGO} *`]: typography.sans.larger,\n    },\n  })}\n\n  .${ELEMENT_HEADER_LOGO},\n  .${ELEMENT_HEADER_LOGO} * {\n    line-height: 1.05em;\n    width: 100%;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_HEADER_LOGO}[size=\"large\"]`]: typography.sans.extraLarge,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_HEADER_LOGO}[size=\"large\"] *`]: typography.sans.extraLarge,\n    },\n  })}\n\n  .${ELEMENT_HEADER_LOGO},\n  .${ELEMENT_HEADER_LOGO} * {\n    font-weight: 700;\n  }\n\n  .${ELEMENT_HEADER_LOGO} img {\n    width: 100%;\n    max-height: 48px;\n    max-width: 190px;\n  }\n\n  @media (min-width: ${token.media.breakpoints.tablet.min}) {\n    .${ELEMENT_HEADER_LOGO} img {\n      max-width: 240px;\n    }\n  }\n`;\n\nconst WrapperStyles = `\n  .${ELEMENT_HEADER_WRAPPER} {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-end;\n    gap: ${token.spacing.lg};\n    z-index: 999;\n  }\n`;\n\nconst STYLES_NAVIGATION_HEADER = `\n  .${ELEMENT_HEADER_CONTAINTER} {\n    background-color: ${token.color.white};\n    display: block;\n    padding: ${token.spacing.md} 0;\n    position: relative;\n    transition: padding ${ANIMATION_TIME}ms;\n  }\n\n  ${WrapperStyles}\n  ${LogoColumnStyles}\n  ${NavigationColumnStyles}\n  ${CtaStyles}\n  ${OverwriteStickyStyles}\n  ${NavigationItem.Styles}\n  ${MenuButton.Styles}\n`;\n\nconst CreateSearchLink = ({ searchUrl }: TypeSearchLink) => {\n  if (!searchUrl) return null;\n\n  const searchLink = document.createElement('a');\n\n  searchLink.href = searchUrl;\n  searchLink.ariaLabel = 'Visit the search page';\n  searchLink.innerHTML = iconSearch;\n  searchLink.classList.add(ELEMENT_HEADER_MENU_SEARCH);\n\n  return searchLink;\n};\n\nconst CreateCtaLink = ({ ctaUrl, ctaText }: TypeCtaLink) => {\n  if (!ctaUrl || !ctaText) return null;\n\n  const cta = document.createElement('a');\n\n  cta.innerHTML = ctaText;\n  if (isExternalUrl(ctaUrl)) {\n    cta.setAttribute('target', '_blank');\n  }\n  cta.setAttribute('href', ctaUrl);\n  cta.classList.add(ELEMENT_HEADER_MENU_CTA);\n\n  return cta;\n};\n\nconst CreateNavigationColumn = ({\n  utilityRow,\n  navItems,\n  searchUrl,\n  ctaText,\n  ctaUrl,\n}: TypeNavRow) => {\n  if (!navItems) return;\n\n  const navColumnContainer = document.createElement('div');\n  const utilityRowContainer = document.createElement('div');\n  const navRowContainer = document.createElement('div');\n  const searchLink = CreateSearchLink({\n    searchUrl,\n  });\n  const ctaLink = CreateCtaLink({ ctaText, ctaUrl });\n\n  if (utilityRow) {\n    utilityRowContainer.classList.add(ELEMENT_HEADER_UTILITY_ROW);\n    utilityRowContainer.appendChild(utilityRow);\n    navColumnContainer.appendChild(utilityRowContainer);\n  }\n\n  navRowContainer.classList.add(ELEMENT_HEADER_NAVIGATION_ROW);\n\n  navItems.forEach((item) => {\n    navRowContainer.appendChild(item);\n  });\n  if (searchLink) navRowContainer.appendChild(searchLink);\n  if (ctaLink) navRowContainer.appendChild(ctaLink);\n\n  navColumnContainer.classList.add(ELEMENT_HEADER_NAVIGATION_COLUMN);\n  navColumnContainer.appendChild(navRowContainer);\n\n  return navColumnContainer;\n};\n\nconst CreateLogoColumn = ({ logo, eventOpen }: TypeLogoRequirments) => {\n  const container = document.createElement('div');\n\n  if (eventOpen) {\n    const menuButton = MenuButton.CreateElement({ eventOpen });\n    menuButton.classList.add(ELEMENT_HEADER_MENU_BUTTON);\n    container.appendChild(menuButton);\n  }\n\n  if (logo) {\n    const childrenText = Array.from(logo.children).reduce((acc, child) => {\n      if (child.nodeName === 'IMG') return acc;\n\n      if (child.textContent) {\n        return acc + child.textContent.length;\n      }\n\n      return acc;\n    }, 0);\n    logo.classList.add(ELEMENT_HEADER_LOGO);\n\n    if (childrenText < 30) {\n      logo.setAttribute('size', 'large');\n    }\n\n    container.appendChild(logo);\n  }\n  container.classList.add(ELEMENT_HEADER_LOGO_COLUMN);\n  return container;\n};\n\nconst CreateNavigationHeader = (props: TypeHeaderRequirements) => {\n  const { ctaUrl, ctaText } = props;\n  const declaration = document.createElement('div');\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n  const logoColumn = CreateLogoColumn(props);\n  const navigationColumn = CreateNavigationColumn(props);\n  const eventSticky = ({ isSticky }: { isSticky: boolean }) => {\n    const utility = container.querySelector(\n      `.${ELEMENT_HEADER_UTILITY_ROW}`,\n    ) as HTMLDivElement;\n\n    if (isSticky && isElementSticky) return;\n\n    if (isSticky) {\n      isElementSticky = true;\n      container.setAttribute(ATTRIBUTE_STICKY, 'true');\n\n      if (utility) {\n        utility.style.display = 'none';\n      }\n    }\n    if (!isSticky) {\n      isElementSticky = false;\n      container.removeAttribute(ATTRIBUTE_STICKY);\n\n      if (utility) {\n        utility.style.display = 'block';\n      }\n    }\n  };\n  let isElementSticky = false;\n\n  wrapper.classList.add(ELEMENT_HEADER_WRAPPER);\n  wrapper.appendChild(logoColumn);\n\n  if (navigationColumn) wrapper.appendChild(navigationColumn);\n  if (ctaUrl && ctaText) wrapper.setAttribute(ATTRIBUTE_CTA, 'true');\n\n  container.appendChild(wrapper);\n  container.classList.add(ELEMENT_HEADER_CONTAINTER);\n\n  declaration.classList.add(ELEMENT_HEADER_DECLARATION);\n  declaration.appendChild(container);\n\n  return {\n    element: declaration,\n    events: {\n      sticky: eventSticky,\n    },\n  };\n};\n\nexport default {\n  CreateElement: CreateNavigationHeader,\n  Styles: STYLES_NAVIGATION_HEADER,\n};\n"],"names":["iconSearch"],"mappings":"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"}

package/dist/composite/navigation/index.mjs

@@ -1,9 +0,0 @@
-import * as index from "./elements/index.mjs";
-import { default as default2 } from "./header.mjs";
-import { default as default3 } from "./utility/index.mjs";
-export {
-  index as elements,
-  default2 as header,
-  default3 as utility
-};
-//# sourceMappingURL=index.mjs.map

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

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