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

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

@@ -1,15 +0,0 @@
-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

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

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

@@ -1,386 +0,0 @@
-import * as token from "@universityofmaryland/web-token-library";
-import * as animation from "@universityofmaryland/web-styles-library/animation";
-import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
-import { wrapLinkForAnimation } from "@universityofmaryland/web-utilities-library/animation";
-import { handleKeyboardNavigation } from "@universityofmaryland/web-utilities-library/events";
-import { chevron_down } from "@universityofmaryland/web-icons-library/controls";
-const ATTRIBUTE_DROPDOWN = "data-dropdown";
-const ATTRIBUTE_SHOWING = "data-showing";
-const ATTRIBUTE_SELECTED = "data-selected";
-const BOUNDS_SHIFT = 140;
-const MAX_COLUMN_ITEMS = 8;
-const ELEMENT_NAV_ITEM_CONTAINER = `nav-item-container`;
-const ELEMENT_PRIMARY_LINK_CONTAINER = "nav-item-primary-link-container";
-const ELEMENT_PRIMARLY_LINK_WRAPPER = `nav-item-primary-link-wrapper`;
-const ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON = `nav-item-primary-link-button`;
-const ELEMENT_DROPDOWN_CONTAINER = `nav-item-dropdown-container`;
-const ELEMENT_DROPDOWN_LIST_CONTAINER = "nav-item-dropdown-list";
-const ELEMENT_DROPDOWN_MULTIPLE_COLUMN = "nav-item-dropdown-multiple-column";
-const ELEMENT_DROPDOWN_CTA_COLUMN = "nav-item-dropdown-cta-column";
-const IS_SELECTED = `[${ATTRIBUTE_SELECTED}]`;
-const IS_SHOWING = `[${ATTRIBUTE_SHOWING}]`;
-const IS_DROPDOWN = `[${ATTRIBUTE_DROPDOWN}]`;
-const OVERWRITE_DROPDOWN_CONTAINER = `.${ELEMENT_NAV_ITEM_CONTAINER}${IS_DROPDOWN}`;
-const OVERWRITE_IS_SHOWING_DROPDOWN_CONTAINER = `${OVERWRITE_DROPDOWN_CONTAINER}${IS_SHOWING} .${ELEMENT_DROPDOWN_CONTAINER}`;
-const OVERWRITE_IS_SHOWING_PRIMARY_LINK = `${OVERWRITE_DROPDOWN_CONTAINER} .${ELEMENT_PRIMARLY_LINK_WRAPPER}`;
-const OVERWRITE_IS_SHOWING_PRIMARY_BUTTON = `${OVERWRITE_DROPDOWN_CONTAINER}${IS_SHOWING} .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON}`;
-const OverwriteDropdownStyles = `
-  ${OVERWRITE_IS_SHOWING_DROPDOWN_CONTAINER} {
-    display: block;
-  }
-
-  ${OVERWRITE_IS_SHOWING_PRIMARY_BUTTON} {
-    transform: rotate(180deg) translateY(4px);
-  }
-
-  ${OVERWRITE_IS_SHOWING_PRIMARY_LINK} > a${IS_SELECTED}:before {
-    bottom: 1px;
-    right: 20px;
-  }
-`;
-const PrimaryStyles = `
-  .${ELEMENT_PRIMARY_LINK_CONTAINER} {
-    position: relative;
-  }
-
-  .${ELEMENT_PRIMARLY_LINK_WRAPPER} {
-    display: block;
-    position: relative;
-  }
-
-  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a {
-    color: ${token.color.black};
-    font-size: ${token.font.size.base};
-    transition: color 0.2s ease-in-out;
-    line-height: 1.15em;
-    font-weight: 700;
-    text-wrap: pretty;
-    display: block;
-    display: flex;
-    align-items: flex-end;
-    text-align: right;
-  }
-
-  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a:hover,
-  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a:focus {
-    color: ${token.color.red};
-   }
-
-  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a[${ATTRIBUTE_SELECTED}] span {
-    display: inline;
-    position: relative;
-    background-position: left calc(100% - 0px);
-    background-repeat: no-repeat;
-    background-size: 100% 2.5px;
-    background-image: linear-gradient(${token.color.gold}, ${token.color.gold});
-  }
-
-  .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON} {
-    position: absolute;
-    top: 2px;
-    right: -20px;
-    transition: transform .5s;
-  }
-
-  .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON} svg {
-    fill: ${token.color.red};
-    height: 14px;
-    width: 14px;
-    transform: rotate(0deg) translateY(0);
-    transition: fill .5s,transform .5s;
-  }
-`;
-const DropdownMultipleColumnStyles = `
-  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} > * {
-    min-width: 232px;
-  }
-
-  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} > *:not(:first-child) {
-    margin-left: 40px;
-  }
-`;
-const DropdownListStyles = `
-  .${ELEMENT_DROPDOWN_LIST_CONTAINER} {
-    background-color: ${token.color.white};
-    border-top: 2px solid ${token.color.red};
-    padding: ${token.spacing.lg};
-    box-shadow: -1px 9px 32px -10px rgba(0,0,0,0.19);
-  }
-
-  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a {
-    display: block;
-    min-width: 120px;
-    max-width: 230px;
-    font-weight: 700;
-    font-size: 14px;
-    line-height: 1.5em;
-  }
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_DROPDOWN_LIST_CONTAINER} a`]: animation.line.slideUnderRed
-  }
-})}
-
-  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a:hover,
-  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a:focus {
-    color: ${token.color.red};
-  }
-
-  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a + a {
-    margin-top: ${token.spacing.md};
-    display: block;
-  }
-
-  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED} span:not(.sr-only) {
-    display: inline;
-    position: relative;
-    background-position: left calc(100% - 0px);
-    background-repeat: no-repeat;
-    background-size: 100% 2.5px;
-    background-image: linear-gradient(${token.color.gold}, ${token.color.gold});
-  }
-
-  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED}:hover span,
-  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED}:focus span {
-    border-bottom: none;
-  }
-`;
-const DropdownStyles = `
-  .${ELEMENT_DROPDOWN_CONTAINER} {
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);v 
-    min-width: 200px;
-    width: auto;
-    padding-top: ${token.spacing.sm};
-    display: none;
-  }
-`;
-const STYLES_NAV_ITEM_ELEMENT = `
-  .${ELEMENT_NAV_ITEM_CONTAINER} {
-    position: relative;
-    z-index: 9999;
-  }
-
-  ${OVERWRITE_DROPDOWN_CONTAINER} {
-    padding-right: 20px;
-  }
-
-  .${ELEMENT_NAV_ITEM_CONTAINER} a {
-    font-family: ${token.font.family.sans};
-    font-size: ${token.font.size.sm};
-    font-weight: 700;
-    color: ${token.color.black};
-    text-decoration: none;
-  }
-  
-  .${ELEMENT_NAV_ITEM_CONTAINER}:foucs-within .${ELEMENT_DROPDOWN_CONTAINER} {
-    display: block;
-  }
-
-  ${PrimaryStyles}
-  ${DropdownStyles}
-  ${DropdownMultipleColumnStyles}
-  ${DropdownListStyles}
-  ${OverwriteDropdownStyles}
-`;
-const CreateMultipleColumns = ({ links }) => {
-  const column1 = document.createElement("div");
-  const column2 = document.createElement("div");
-  const firstColumnLinks = links.splice(0, Math.ceil(links.length / 2));
-  firstColumnLinks.forEach((link) => {
-    wrapLinkForAnimation({ element: link });
-    column1.appendChild(link);
-  });
-  links.forEach((link) => {
-    wrapLinkForAnimation({ element: link });
-    column2.appendChild(link);
-  });
-  return [column1, column2];
-};
-const CreateSingleColumn = ({ links }) => {
-  const container = document.createElement("div");
-  links.forEach((link) => {
-    wrapLinkForAnimation({ element: link });
-    container.appendChild(link);
-  });
-  return container;
-};
-const CreateDropdown = ({
-  dropdownLinksContainer,
-  dropdownCalloutsSlot
-}) => {
-  if (!dropdownLinksContainer) return;
-  const links = Array.from(
-    dropdownLinksContainer.querySelectorAll("a")
-  );
-  const container = document.createElement("div");
-  const wrapper = document.createElement("div");
-  wrapper.classList.add(ELEMENT_DROPDOWN_LIST_CONTAINER);
-  container.classList.add(ELEMENT_DROPDOWN_CONTAINER);
-  if (links.length > MAX_COLUMN_ITEMS) {
-    const columns = CreateMultipleColumns({ links });
-    columns.forEach((column) => {
-      wrapper.appendChild(column);
-    });
-    wrapper.classList.add(ELEMENT_DROPDOWN_MULTIPLE_COLUMN);
-  } else {
-    wrapper.appendChild(CreateSingleColumn({ links }));
-    if (dropdownCalloutsSlot) {
-      wrapper.classList.add(ELEMENT_DROPDOWN_MULTIPLE_COLUMN);
-    }
-  }
-  if (dropdownCalloutsSlot) {
-    const dropdownWrapper = document.createElement("div");
-    dropdownWrapper.classList.add(ELEMENT_DROPDOWN_CTA_COLUMN);
-    dropdownWrapper.appendChild(dropdownCalloutsSlot);
-    wrapper.appendChild(dropdownWrapper);
-  }
-  container.appendChild(wrapper);
-  return container;
-};
-const CreateButton = ({
-  buttonClick,
-  navItemName
-}) => {
-  const button = document.createElement("button");
-  button.classList.add(ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON);
-  button.innerHTML = chevron_down;
-  button.addEventListener("click", () => buttonClick());
-  button.setAttribute("aria-expanded", "false");
-  button.setAttribute("aria-controls", `nav-links-`);
-  button.setAttribute("aria-label", `List of menu items for ${navItemName}`);
-  return button;
-};
-const CreatePrimaryLink = (props) => {
-  const { hasDropdown, primaryLinkContainer } = props;
-  const container = document.createElement("div");
-  const wrapper = document.createElement("div");
-  const dropdown = CreateDropdown(props);
-  container.classList.add(ELEMENT_PRIMARY_LINK_CONTAINER);
-  wrapper.classList.add(ELEMENT_PRIMARLY_LINK_WRAPPER);
-  if (primaryLinkContainer) {
-    const clonedPrimaryLink = primaryLinkContainer.cloneNode(
-      true
-    );
-    wrapper.appendChild(clonedPrimaryLink);
-  }
-  if (hasDropdown) {
-    const button = CreateButton(props);
-    wrapper.appendChild(button);
-  }
-  if (dropdown) wrapper.appendChild(dropdown);
-  container.appendChild(wrapper);
-  return container;
-};
-const CreateNavItemElement = (props) => (() => {
-  const { dropdownLinksContainer, primaryLinkContainer, context } = props;
-  if (!primaryLinkContainer) {
-    throw new Error("Primary link is required for a nav item");
-  }
-  const elementContainer = document.createElement("div");
-  const dropDownContainerLinks = dropdownLinksContainer?.children;
-  const hasDropdown = dropDownContainerLinks && dropDownContainerLinks.length > 0 || false;
-  const navItemName = primaryLinkContainer.innerHTML.replace(/(<([^>]+)>)/gi, "").trim();
-  let isShowing = false;
-  let focusCallback = () => {
-  };
-  const OnLoadDropdownSpans = () => {
-    if (!dropdownLinksContainer) return;
-    const links = Array.from(
-      dropdownLinksContainer.querySelectorAll("a")
-    );
-    links.forEach((link) => {
-      const hasSpan = link.querySelector("span");
-      if (!hasSpan) {
-        wrapLinkForAnimation({ element: link });
-        link.appendChild(link);
-      }
-    });
-  };
-  const DropdownPositionPerViewPort = () => {
-    const elementBounds = elementContainer.getBoundingClientRect();
-    const dropdownContainer = elementContainer.querySelector(
-      `.${ELEMENT_DROPDOWN_CONTAINER}`
-    );
-    const width = elementContainer.offsetWidth;
-    if (!dropdownContainer) return;
-    const size = dropdownContainer.offsetWidth + BOUNDS_SHIFT;
-    if (elementBounds.left + width < size) {
-      dropdownContainer.style.left = "0";
-      dropdownContainer.style.transform = "translateX(0)";
-    }
-    if (window.innerWidth - elementBounds.right < size / 2) {
-      dropdownContainer.style.right = "0";
-      dropdownContainer.style.left = "inherit";
-      dropdownContainer.style.transform = "translateX(0)";
-    }
-  };
-  const ShowDropdown = () => {
-    elementContainer.setAttribute(ATTRIBUTE_SHOWING, "");
-    DropdownPositionPerViewPort();
-  };
-  const HideDropdown = () => {
-    elementContainer.removeAttribute(ATTRIBUTE_SHOWING);
-    focusCallback();
-    focusCallback = () => {
-    };
-  };
-  const EventButtonClick = () => {
-    if (isShowing && dropdownLinksContainer) {
-      ShowDropdown();
-      focusCallback = handleKeyboardNavigation({
-        element: elementContainer,
-        action: () => HideDropdown(),
-        shadowDomContext: context
-      });
-      setTimeout(() => {
-        const firstElement = dropdownLinksContainer.querySelector(
-          "a"
-        );
-        if (firstElement) firstElement.focus();
-      }, 100);
-    }
-    if (!isShowing) HideDropdown();
-  };
-  const buttonClick = () => {
-    isShowing = isShowing ? false : true;
-    EventButtonClick();
-  };
-  const linkContainer = CreatePrimaryLink({
-    ...props,
-    hasDropdown,
-    buttonClick,
-    navItemName
-  });
-  elementContainer.addEventListener("mouseover", () => {
-    isShowing = true;
-    ShowDropdown();
-  });
-  elementContainer.addEventListener("mouseleave", () => {
-    isShowing = false;
-    HideDropdown();
-  });
-  setTimeout(() => {
-    OnLoadDropdownSpans();
-  }, 10);
-  if (hasDropdown) elementContainer.setAttribute(ATTRIBUTE_DROPDOWN, "");
-  elementContainer.classList.add(ELEMENT_NAV_ITEM_CONTAINER);
-  elementContainer.appendChild(linkContainer);
-  return elementContainer;
-})();
-const NavigationItem = {
-  CreateElement: CreateNavItemElement,
-  Styles: STYLES_NAV_ITEM_ELEMENT
-};
-export {
-  NavigationItem as default
-};
-//# sourceMappingURL=index.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/navigation/elements/item/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { handleKeyboardNavigation } from '@universityofmaryland/web-utilities-library/events';\nimport { chevron_down as iconChevronDown } from '@universityofmaryland/web-icons-library/controls';\n\ntype TypePrimaryLinkRequirements = {\n  primaryLinkContainer?: HTMLElement | null;\n  context?: HTMLElement;\n};\n\ntype TypeDropdownProps = {\n  dropdownLinksContainer?: HTMLElement | null;\n  dropdownCalloutsSlot?: HTMLSlotElement | null;\n};\n\ntype TypePrimaryLinkButtonProps = {\n  buttonClick: () => void;\n  navItemName: string;\n};\n\ntype TypePrimaryLinkProps = TypePrimaryLinkRequirements &\n  TypeDropdownProps &\n  TypePrimaryLinkButtonProps & {\n    hasDropdown: boolean;\n  };\n\nexport type TypeNavItemRequirements = TypeDropdownProps &\n  TypePrimaryLinkRequirements;\n\ntype TypeNavItem = TypeNavItemRequirements;\n\nconst ELEMENT_NAME = 'umd-element-nav-item';\nconst ATTRIBUTE_DROPDOWN = 'data-dropdown';\nconst ATTRIBUTE_SHOWING = 'data-showing';\nconst ATTRIBUTE_SELECTED = 'data-selected';\n\nconst BOUNDS_SHIFT = 140;\nconst MAX_COLUMN_ITEMS = 8;\n\nconst ELEMENT_NAV_ITEM_CONTAINER = `nav-item-container`;\nconst ELEMENT_PRIMARY_LINK_CONTAINER = 'nav-item-primary-link-container';\nconst ELEMENT_PRIMARLY_LINK_WRAPPER = `nav-item-primary-link-wrapper`;\nconst ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON = `nav-item-primary-link-button`;\n\nconst ELEMENT_DROPDOWN_CONTAINER = `nav-item-dropdown-container`;\nconst ELEMENT_DROPDOWN_LIST_CONTAINER = 'nav-item-dropdown-list';\nconst ELEMENT_DROPDOWN_MULTIPLE_COLUMN = 'nav-item-dropdown-multiple-column';\nconst ELEMENT_DROPDOWN_CTA_COLUMN = 'nav-item-dropdown-cta-column';\n\nconst IS_SELECTED = `[${ATTRIBUTE_SELECTED}]`;\nconst IS_SHOWING = `[${ATTRIBUTE_SHOWING}]`;\nconst IS_DROPDOWN = `[${ATTRIBUTE_DROPDOWN}]`;\n\nconst OVERWRITE_DROPDOWN_CONTAINER = `.${ELEMENT_NAV_ITEM_CONTAINER}${IS_DROPDOWN}`;\nconst OVERWRITE_IS_SHOWING_DROPDOWN_CONTAINER = `${OVERWRITE_DROPDOWN_CONTAINER}${IS_SHOWING} .${ELEMENT_DROPDOWN_CONTAINER}`;\nconst OVERWRITE_IS_SHOWING_PRIMARY_LINK = `${OVERWRITE_DROPDOWN_CONTAINER} .${ELEMENT_PRIMARLY_LINK_WRAPPER}`;\nconst OVERWRITE_IS_SHOWING_PRIMARY_BUTTON = `${OVERWRITE_DROPDOWN_CONTAINER}${IS_SHOWING} .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON}`;\n\n// prettier-ignore\nconst OverwriteDropdownStyles = `\n  ${OVERWRITE_IS_SHOWING_DROPDOWN_CONTAINER} {\n    display: block;\n  }\n\n  ${OVERWRITE_IS_SHOWING_PRIMARY_BUTTON} {\n    transform: rotate(180deg) translateY(4px);\n  }\n\n  ${OVERWRITE_IS_SHOWING_PRIMARY_LINK} > a${IS_SELECTED}:before {\n    bottom: 1px;\n    right: 20px;\n  }\n`\n\n// prettier-ignore\nconst PrimaryStyles = `\n  .${ELEMENT_PRIMARY_LINK_CONTAINER} {\n    position: relative;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} {\n    display: block;\n    position: relative;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a {\n    color: ${token.color.black};\n    font-size: ${token.font.size.base};\n    transition: color 0.2s ease-in-out;\n    line-height: 1.15em;\n    font-weight: 700;\n    text-wrap: pretty;\n    display: block;\n    display: flex;\n    align-items: flex-end;\n    text-align: right;\n  }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a:hover,\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a:focus {\n    color: ${token.color.red};\n   }\n\n  .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a[${ATTRIBUTE_SELECTED}] span {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(${token.color.gold}, ${token.color.gold});\n  }\n\n  .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON} {\n    position: absolute;\n    top: 2px;\n    right: -20px;\n    transition: transform .5s;\n  }\n\n  .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON} svg {\n    fill: ${token.color.red};\n    height: 14px;\n    width: 14px;\n    transform: rotate(0deg) translateY(0);\n    transition: fill .5s,transform .5s;\n  }\n`;\n\n// prettier-ignore\nconst DropdownMultipleColumnStyles = `\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} > * {\n    min-width: 232px;\n  }\n\n  .${ELEMENT_DROPDOWN_MULTIPLE_COLUMN} > *:not(:first-child) {\n    margin-left: 40px;\n  }\n`\n\n// prettier-ignore\nconst DropdownListStyles = `\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} {\n    background-color: ${token.color.white};\n    border-top: 2px solid ${token.color.red};\n    padding: ${token.spacing.lg};\n    box-shadow: -1px 9px 32px -10px rgba(0,0,0,0.19);\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a {\n    display: block;\n    min-width: 120px;\n    max-width: 230px;\n    font-weight: 700;\n    font-size: 14px;\n    line-height: 1.5em;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_DROPDOWN_LIST_CONTAINER} a`]:\n      animation.line.slideUnderRed,\n    },\n  })}\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a:hover,\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a:focus {\n    color: ${token.color.red};\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a + a {\n    margin-top: ${token.spacing.md};\n    display: block;\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED} span:not(.sr-only) {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(${token.color.gold}, ${token.color.gold});\n  }\n\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED}:hover span,\n  .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED}:focus span {\n    border-bottom: none;\n  }\n`\n\n// prettier-ignore\nconst DropdownStyles = `\n  .${ELEMENT_DROPDOWN_CONTAINER} {\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);v \n    min-width: 200px;\n    width: auto;\n    padding-top: ${token.spacing.sm};\n    display: none;\n  }\n`;\n\nconst STYLES_NAV_ITEM_ELEMENT = `\n  .${ELEMENT_NAV_ITEM_CONTAINER} {\n    position: relative;\n    z-index: 9999;\n  }\n\n  ${OVERWRITE_DROPDOWN_CONTAINER} {\n    padding-right: 20px;\n  }\n\n  .${ELEMENT_NAV_ITEM_CONTAINER} a {\n    font-family: ${token.font.family.sans};\n    font-size: ${token.font.size.sm};\n    font-weight: 700;\n    color: ${token.color.black};\n    text-decoration: none;\n  }\n  \n  .${ELEMENT_NAV_ITEM_CONTAINER}:foucs-within .${ELEMENT_DROPDOWN_CONTAINER} {\n    display: block;\n  }\n\n  ${PrimaryStyles}\n  ${DropdownStyles}\n  ${DropdownMultipleColumnStyles}\n  ${DropdownListStyles}\n  ${OverwriteDropdownStyles}\n`;\n\nconst CreateMultipleColumns = ({ links }: { links: HTMLAnchorElement[] }) => {\n  const column1 = document.createElement('div');\n  const column2 = document.createElement('div');\n  const firstColumnLinks = links.splice(0, Math.ceil(links.length / 2));\n\n  firstColumnLinks.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    column1.appendChild(link);\n  });\n  links.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    column2.appendChild(link);\n  });\n\n  return [column1, column2];\n};\n\nconst CreateSingleColumn = ({ links }: { links: HTMLAnchorElement[] }) => {\n  const container = document.createElement('div');\n  links.forEach((link) => {\n    wrapLinkForAnimation({ element: link });\n    container.appendChild(link);\n  });\n\n  return container;\n};\n\nconst CreateDropdown = ({\n  dropdownLinksContainer,\n  dropdownCalloutsSlot,\n}: TypeDropdownProps) => {\n  if (!dropdownLinksContainer) return;\n\n  const links = Array.from(\n    dropdownLinksContainer.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n\n  wrapper.classList.add(ELEMENT_DROPDOWN_LIST_CONTAINER);\n  container.classList.add(ELEMENT_DROPDOWN_CONTAINER);\n\n  if (links.length > MAX_COLUMN_ITEMS) {\n    const columns = CreateMultipleColumns({ links });\n    columns.forEach((column) => {\n      wrapper.appendChild(column);\n    });\n    wrapper.classList.add(ELEMENT_DROPDOWN_MULTIPLE_COLUMN);\n  } else {\n    wrapper.appendChild(CreateSingleColumn({ links }));\n\n    if (dropdownCalloutsSlot) {\n      wrapper.classList.add(ELEMENT_DROPDOWN_MULTIPLE_COLUMN);\n    }\n  }\n\n  if (dropdownCalloutsSlot) {\n    const dropdownWrapper = document.createElement('div');\n\n    dropdownWrapper.classList.add(ELEMENT_DROPDOWN_CTA_COLUMN);\n    dropdownWrapper.appendChild(dropdownCalloutsSlot);\n    wrapper.appendChild(dropdownWrapper);\n  }\n\n  container.appendChild(wrapper);\n\n  return container;\n};\n\nconst CreateButton = ({\n  buttonClick,\n  navItemName,\n}: TypePrimaryLinkButtonProps) => {\n  const button = document.createElement('button');\n\n  button.classList.add(ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON);\n  button.innerHTML = iconChevronDown;\n  button.addEventListener('click', () => buttonClick());\n  button.setAttribute('aria-expanded', 'false');\n  button.setAttribute('aria-controls', `nav-links-`);\n  button.setAttribute('aria-label', `List of menu items for ${navItemName}`);\n\n  return button;\n};\n\nconst CreatePrimaryLink = (props: TypePrimaryLinkProps) => {\n  const { hasDropdown, primaryLinkContainer } = props;\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n\n  const dropdown = CreateDropdown(props);\n\n  container.classList.add(ELEMENT_PRIMARY_LINK_CONTAINER);\n  wrapper.classList.add(ELEMENT_PRIMARLY_LINK_WRAPPER);\n\n  if (primaryLinkContainer) {\n    const clonedPrimaryLink = primaryLinkContainer.cloneNode(\n      true,\n    ) as HTMLElement;\n    wrapper.appendChild(clonedPrimaryLink);\n  }\n\n  if (hasDropdown) {\n    const button = CreateButton(props);\n    wrapper.appendChild(button);\n  }\n\n  if (dropdown) wrapper.appendChild(dropdown);\n\n  container.appendChild(wrapper);\n  return container;\n};\n\nconst CreateNavItemElement = (props: TypeNavItem) =>\n  (() => {\n    const { dropdownLinksContainer, primaryLinkContainer, context } = props;\n\n    if (!primaryLinkContainer) {\n      throw new Error('Primary link is required for a nav item');\n    }\n\n    const elementContainer = document.createElement('div');\n    const dropDownContainerLinks = dropdownLinksContainer?.children;\n    const hasDropdown =\n      (dropDownContainerLinks && dropDownContainerLinks.length > 0) || false;\n\n    const navItemName = primaryLinkContainer.innerHTML\n      .replace(/(<([^>]+)>)/gi, '')\n      .trim();\n    let isShowing = false;\n    let focusCallback = () => {};\n\n    const OnLoadDropdownSpans = () => {\n      if (!dropdownLinksContainer) return;\n\n      const links = Array.from(\n        dropdownLinksContainer.querySelectorAll('a'),\n      ) as HTMLAnchorElement[];\n\n      links.forEach((link) => {\n        const hasSpan = link.querySelector('span');\n\n        if (!hasSpan) {\n          wrapLinkForAnimation({ element: link });\n          link.appendChild(link);\n        }\n      });\n    };\n\n    const DropdownPositionPerViewPort = () => {\n      const elementBounds = elementContainer.getBoundingClientRect();\n      const dropdownContainer = elementContainer.querySelector(\n        `.${ELEMENT_DROPDOWN_CONTAINER}`,\n      ) as HTMLDivElement;\n      const width = elementContainer.offsetWidth;\n\n      if (!dropdownContainer) return;\n\n      const size = dropdownContainer.offsetWidth + BOUNDS_SHIFT;\n\n      if (elementBounds.left + width < size) {\n        dropdownContainer.style.left = '0';\n        dropdownContainer.style.transform = 'translateX(0)';\n      }\n\n      if (window.innerWidth - elementBounds.right < size / 2) {\n        dropdownContainer.style.right = '0';\n        dropdownContainer.style.left = 'inherit';\n        dropdownContainer.style.transform = 'translateX(0)';\n      }\n    };\n\n    const ShowDropdown = () => {\n      elementContainer.setAttribute(ATTRIBUTE_SHOWING, '');\n      DropdownPositionPerViewPort();\n    };\n\n    const HideDropdown = () => {\n      elementContainer.removeAttribute(ATTRIBUTE_SHOWING);\n      focusCallback();\n      focusCallback = () => {};\n    };\n\n    const EventButtonClick = () => {\n      if (isShowing && dropdownLinksContainer) {\n        ShowDropdown();\n        focusCallback = handleKeyboardNavigation({\n          element: elementContainer,\n          action: () => HideDropdown(),\n          shadowDomContext: context,\n        });\n\n        setTimeout(() => {\n          const firstElement = dropdownLinksContainer.querySelector(\n            'a',\n          ) as HTMLAnchorElement;\n\n          if (firstElement) firstElement.focus();\n        }, 100);\n      }\n\n      if (!isShowing) HideDropdown();\n    };\n\n    const buttonClick = () => {\n      isShowing = isShowing ? false : true;\n      EventButtonClick();\n    };\n\n    // Load\n\n    const linkContainer = CreatePrimaryLink({\n      ...props,\n      hasDropdown,\n      buttonClick,\n      navItemName,\n    });\n\n    elementContainer.addEventListener('mouseover', () => {\n      isShowing = true;\n      ShowDropdown();\n    });\n\n    elementContainer.addEventListener('mouseleave', () => {\n      isShowing = false;\n      HideDropdown();\n    });\n\n    setTimeout(() => {\n      OnLoadDropdownSpans();\n    }, 10);\n\n    if (hasDropdown) elementContainer.setAttribute(ATTRIBUTE_DROPDOWN, '');\n    elementContainer.classList.add(ELEMENT_NAV_ITEM_CONTAINER);\n    elementContainer.appendChild(linkContainer);\n\n    return elementContainer;\n  })();\n\nexport default {\n  CreateElement: CreateNavItemElement,\n  Styles: STYLES_NAV_ITEM_ELEMENT,\n};\n"],"names":["iconChevronDown"],"mappings":"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"}

package/dist/composite/navigation/elements/menu-button/index.mjs

@@ -1,59 +0,0 @@
-import * as token from "@universityofmaryland/web-token-library";
-const NAV_DRAWER_BUTTON = "nav-drawer-button";
-const NAV_DRAWER_BUTTON_WRAPPER = "nav-drawer-button-wrapper";
-const STYLES_MENU_DISPLAY_BUTTON = `
-  .${NAV_DRAWER_BUTTON} {
-    height: 44px;
-    width: 34px;
-    display: flex;
-    align-items: center;
-  }
-
-  .${NAV_DRAWER_BUTTON}:hover .${NAV_DRAWER_BUTTON_WRAPPER} span,
-  .${NAV_DRAWER_BUTTON}:focus .${NAV_DRAWER_BUTTON_WRAPPER} span {
-    background-color: ${token.color.red};
-  }
-
-  .${NAV_DRAWER_BUTTON_WRAPPER} {
-    position: relative;
-    width: 20px;
-    height: 15px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
-
-  .${NAV_DRAWER_BUTTON_WRAPPER} span {
-    width: 20px;
-    height: 2px;
-    background-color: ${token.color.black};
-    transition: background-color 0.3s ease-in-out;
-  }
-
-  .${NAV_DRAWER_BUTTON_WRAPPER} span:last-child {
-    width: 17px;
-  }
-`;
-const CreateMenuDisplayButton = (props) => {
-  const { eventOpen } = props;
-  const button = document.createElement("button");
-  const wrapper = document.createElement("span");
-  const spans = ["one", "two", "three"].map(() => {
-    return document.createElement("span");
-  });
-  wrapper.classList.add(NAV_DRAWER_BUTTON_WRAPPER);
-  spans.forEach((span) => wrapper.appendChild(span));
-  button.appendChild(wrapper);
-  button.setAttribute("aria-label", "Open Navigation Drawer");
-  button.classList.add(NAV_DRAWER_BUTTON);
-  button.addEventListener("click", () => eventOpen());
-  return button;
-};
-const MenuButton = {
-  CreateElement: CreateMenuDisplayButton,
-  Styles: STYLES_MENU_DISPLAY_BUTTON
-};
-export {
-  MenuButton as default
-};
-//# sourceMappingURL=index.mjs.map

package/dist/composite/navigation/elements/menu-button/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/navigation/elements/menu-button/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\n\nexport type TypeMenuDisplayButtonRequirements = {\n  eventOpen: () => void;\n};\n\nconst NAV_DRAWER_BUTTON = 'nav-drawer-button';\nconst NAV_DRAWER_BUTTON_WRAPPER = 'nav-drawer-button-wrapper';\n\n// prettier-ignore\nconst STYLES_MENU_DISPLAY_BUTTON = `\n  .${NAV_DRAWER_BUTTON} {\n    height: 44px;\n    width: 34px;\n    display: flex;\n    align-items: center;\n  }\n\n  .${NAV_DRAWER_BUTTON}:hover .${NAV_DRAWER_BUTTON_WRAPPER} span,\n  .${NAV_DRAWER_BUTTON}:focus .${NAV_DRAWER_BUTTON_WRAPPER} span {\n    background-color: ${token.color.red};\n  }\n\n  .${NAV_DRAWER_BUTTON_WRAPPER} {\n    position: relative;\n    width: 20px;\n    height: 15px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n\n  .${NAV_DRAWER_BUTTON_WRAPPER} span {\n    width: 20px;\n    height: 2px;\n    background-color: ${token.color.black};\n    transition: background-color 0.3s ease-in-out;\n  }\n\n  .${NAV_DRAWER_BUTTON_WRAPPER} span:last-child {\n    width: 17px;\n  }\n`;\n\nconst CreateMenuDisplayButton = (props: TypeMenuDisplayButtonRequirements) => {\n  const { eventOpen } = props;\n  const button = document.createElement('button');\n  const wrapper = document.createElement('span');\n  const spans = ['one', 'two', 'three'].map(() => {\n    return document.createElement('span');\n  });\n\n  wrapper.classList.add(NAV_DRAWER_BUTTON_WRAPPER);\n  spans.forEach((span) => wrapper.appendChild(span));\n\n  button.appendChild(wrapper);\n  button.setAttribute('aria-label', 'Open Navigation Drawer');\n  button.classList.add(NAV_DRAWER_BUTTON);\n  button.addEventListener('click', () => eventOpen());\n\n  return button;\n};\n\nexport default {\n  CreateElement: CreateMenuDisplayButton,\n  Styles: STYLES_MENU_DISPLAY_BUTTON,\n};\n"],"names":[],"mappings":";AAMA,MAAM,oBAAoB;AAC1B,MAAM,4BAA4B;AAGlC,MAAM,6BAA6B;AAAA,KAC9B,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOjB,iBAAiB,WAAW,yBAAyB;AAAA,KACrD,iBAAiB,WAAW,yBAAyB;AAAA,wBAClC,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA,KAGlC,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KASzB,yBAAyB;AAAA;AAAA;AAAA,wBAGN,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,KAIpC,yBAAyB;AAAA;AAAA;AAAA;AAK9B,MAAM,0BAA0B,CAAC,UAA6C;AAC5E,QAAM,EAAE,cAAc;AACtB,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,QAAM,QAAQ,CAAC,OAAO,OAAO,OAAO,EAAE,IAAI,MAAM;AAC9C,WAAO,SAAS,cAAc,MAAM;AAAA,EACtC,CAAC;AAED,UAAQ,UAAU,IAAI,yBAAyB;AAC/C,QAAM,QAAQ,CAAC,SAAS,QAAQ,YAAY,IAAI,CAAC;AAEjD,SAAO,YAAY,OAAO;AAC1B,SAAO,aAAa,cAAc,wBAAwB;AAC1D,SAAO,UAAU,IAAI,iBAAiB;AACtC,SAAO,iBAAiB,SAAS,MAAM,UAAA,CAAW;AAElD,SAAO;AACT;AAEA,MAAA,aAAe;AAAA,EACb,eAAe;AAAA,EACf,QAAQ;AACV;"}

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

@@ -1,103 +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 { chevron_down } from "@universityofmaryland/web-icons-library/controls";
-const ELEMENT_SLIDE_ACTION_CONTAINER = "nav-slide-action-container";
-const ELEMENT_SLIDE_ACTION_LINK = "nav-slide-action-link";
-const ELEMENT_SLIDE_ACTION_BUTTON = "nav-slide-action-button";
-const LinkStyles = `
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_SLIDE_ACTION_LINK}`]: typography.sans.small
-  }
-})}
-
-  .${ELEMENT_SLIDE_ACTION_LINK} {
-    transition: color 0.3s ease-in-out;
-  }
-
-  a.${ELEMENT_SLIDE_ACTION_LINK}:hover,
-  a.${ELEMENT_SLIDE_ACTION_LINK}:focus {
-    color: ${token.color.red};
-  }
-`;
-const ButtonStyles = `
-  .${ELEMENT_SLIDE_ACTION_BUTTON} {
-    position: absolute;
-    right: ${token.spacing.min};
-    top: 5px;
-    width: ${token.spacing.lg};
-    height: ${token.spacing.lg};
-    display: flex;
-    justify-content: center;
-  }
-
-  .${ELEMENT_SLIDE_ACTION_BUTTON}:hover svg,
-  .${ELEMENT_SLIDE_ACTION_BUTTON}:focus svg {
-    transform: rotate(-90deg) translateY(4px);
-  }
-
-  .${ELEMENT_SLIDE_ACTION_BUTTON} svg {
-    fill: ${token.color.red};
-    height: 16px;
-    width: 16px;
-    transform: rotate(-90deg) translateY(0);
-    transition: transform 0.3s ease-in-out;
-  }
-`;
-const STYLES_SLIDER_ACTION_ELEMENT = `
-  .${ELEMENT_SLIDE_ACTION_CONTAINER} {
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    padding-right: ${token.spacing["3xl"]};
-    margin-bottom: ${token.spacing.xs};
-  }
-
-  ${LinkStyles}
-  ${ButtonStyles}
-`;
-const CreateSlideButton = ({
-  link,
-  GetContainer,
-  setUpcomingSlide,
-  eventSlideLeft,
-  ATTRIBUTE_CHILD_REF
-}) => {
-  const element = GetContainer();
-  if (!element) return null;
-  const childReference = link.getAttribute(ATTRIBUTE_CHILD_REF);
-  if (!childReference) return null;
-  const button = document.createElement("button");
-  button.classList.add(ELEMENT_SLIDE_ACTION_BUTTON);
-  button.setAttribute("type", "button");
-  button.setAttribute("aria-label", "Next level of navigation");
-  button.innerHTML = chevron_down;
-  button.addEventListener("click", () => {
-    setUpcomingSlide(childReference);
-    eventSlideLeft();
-  });
-  return button;
-};
-const CreateSliderActionElement = (props) => {
-  const { link } = props;
-  const actionContainer = document.createElement("div");
-  const button = CreateSlideButton(props);
-  actionContainer.classList.add(ELEMENT_SLIDE_ACTION_CONTAINER);
-  link.classList.add(ELEMENT_SLIDE_ACTION_LINK);
-  actionContainer.appendChild(link);
-  if (button) actionContainer.appendChild(button);
-  return actionContainer;
-};
-const SlideAction = {
-  CreateElement: CreateSliderActionElement,
-  Styles: STYLES_SLIDER_ACTION_ELEMENT,
-  Elements: {
-    container: ELEMENT_SLIDE_ACTION_CONTAINER,
-    link: ELEMENT_SLIDE_ACTION_LINK
-  }
-};
-export {
-  SlideAction as default
-};
-//# sourceMappingURL=action.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"action.mjs","sources":["../../../../../source/composite/navigation/elements/slider/action.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 { chevron_down as iconChevronDown } from '@universityofmaryland/web-icons-library/controls';\n\nexport type TypeActionProps = {\n  GetContainer: () => Element | null;\n  setUpcomingSlide: (arg: string) => void;\n  eventSlideLeft: () => void;\n  ATTRIBUTE_CHILD_REF: string;\n  ATTRIBUTE_PARENT_REF: string;\n};\n\nexport type TypeAction = TypeActionProps & {\n  link: HTMLAnchorElement;\n};\n\nconst ELEMENT_SLIDE_ACTION_CONTAINER = 'nav-slide-action-container';\nconst ELEMENT_SLIDE_ACTION_LINK = 'nav-slide-action-link';\nconst ELEMENT_SLIDE_ACTION_BUTTON = 'nav-slide-action-button';\n\n// prettier-ignore\nconst LinkStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_SLIDE_ACTION_LINK}`]: typography.sans.small,\n    },\n  })}\n\n  .${ELEMENT_SLIDE_ACTION_LINK} {\n    transition: color 0.3s ease-in-out;\n  }\n\n  a.${ELEMENT_SLIDE_ACTION_LINK}:hover,\n  a.${ELEMENT_SLIDE_ACTION_LINK}:focus {\n    color: ${token.color.red};\n  }\n`;\n\n// prettier-ignore\nconst ButtonStyles = `\n  .${ELEMENT_SLIDE_ACTION_BUTTON} {\n    position: absolute;\n    right: ${token.spacing.min};\n    top: 5px;\n    width: ${token.spacing.lg};\n    height: ${token.spacing.lg};\n    display: flex;\n    justify-content: center;\n  }\n\n  .${ELEMENT_SLIDE_ACTION_BUTTON}:hover svg,\n  .${ELEMENT_SLIDE_ACTION_BUTTON}:focus svg {\n    transform: rotate(-90deg) translateY(4px);\n  }\n\n  .${ELEMENT_SLIDE_ACTION_BUTTON} svg {\n    fill: ${token.color.red};\n    height: 16px;\n    width: 16px;\n    transform: rotate(-90deg) translateY(0);\n    transition: transform 0.3s ease-in-out;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_SLIDER_ACTION_ELEMENT = `\n  .${ELEMENT_SLIDE_ACTION_CONTAINER} {\n    display: flex;\n    justify-content: space-between;\n    position: relative;\n    padding-right: ${token.spacing['3xl']};\n    margin-bottom: ${token.spacing.xs};\n  }\n\n  ${LinkStyles}\n  ${ButtonStyles}\n`;\n\nconst CreateSlideButton = ({\n  link,\n  GetContainer,\n  setUpcomingSlide,\n  eventSlideLeft,\n  ATTRIBUTE_CHILD_REF,\n}: TypeAction) => {\n  const element = GetContainer();\n\n  if (!element) return null;\n\n  const childReference = link.getAttribute(ATTRIBUTE_CHILD_REF);\n\n  if (!childReference) return null;\n\n  const button = document.createElement('button');\n  button.classList.add(ELEMENT_SLIDE_ACTION_BUTTON);\n  button.setAttribute('type', 'button');\n  button.setAttribute('aria-label', 'Next level of navigation');\n  button.innerHTML = iconChevronDown;\n  button.addEventListener('click', () => {\n    setUpcomingSlide(childReference);\n    eventSlideLeft();\n  });\n\n  return button;\n};\n\nconst CreateSliderActionElement = (props: TypeAction) => {\n  const { link } = props;\n  const actionContainer = document.createElement('div');\n  const button = CreateSlideButton(props);\n\n  actionContainer.classList.add(ELEMENT_SLIDE_ACTION_CONTAINER);\n\n  link.classList.add(ELEMENT_SLIDE_ACTION_LINK);\n  actionContainer.appendChild(link);\n\n  if (button) actionContainer.appendChild(button);\n\n  return actionContainer;\n};\n\nexport default {\n  CreateElement: CreateSliderActionElement,\n  Styles: STYLES_SLIDER_ACTION_ELEMENT,\n  Elements: {\n    container: ELEMENT_SLIDE_ACTION_CONTAINER,\n    link: ELEMENT_SLIDE_ACTION_LINK,\n  },\n};\n"],"names":["iconChevronDown"],"mappings":";;;;AAiBA,MAAM,iCAAiC;AACvC,MAAM,4BAA4B;AAClC,MAAM,8BAA8B;AAGpC,MAAM,aAAa;AAAA,IACf,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,yBAAyB,EAAE,GAAG,WAAW,KAAK;AAAA,EAAA;AAEvD,CAAC,CAAC;AAAA;AAAA,KAEC,yBAAyB;AAAA;AAAA;AAAA;AAAA,MAIxB,yBAAyB;AAAA,MACzB,yBAAyB;AAAA,aAClB,MAAM,MAAM,GAAG;AAAA;AAAA;AAK5B,MAAM,eAAe;AAAA,KAChB,2BAA2B;AAAA;AAAA,aAEnB,MAAM,QAAQ,GAAG;AAAA;AAAA,aAEjB,MAAM,QAAQ,EAAE;AAAA,cACf,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,KAKzB,2BAA2B;AAAA,KAC3B,2BAA2B;AAAA;AAAA;AAAA;AAAA,KAI3B,2BAA2B;AAAA,YACpB,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,+BAA+B;AAAA,KAChC,8BAA8B;AAAA;AAAA;AAAA;AAAA,qBAId,MAAM,QAAQ,KAAK,CAAC;AAAA,qBACpB,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAGjC,UAAU;AAAA,IACV,YAAY;AAAA;AAGhB,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,QAAM,UAAU,aAAA;AAEhB,MAAI,CAAC,QAAS,QAAO;AAErB,QAAM,iBAAiB,KAAK,aAAa,mBAAmB;AAE5D,MAAI,CAAC,eAAgB,QAAO;AAE5B,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,UAAU,IAAI,2BAA2B;AAChD,SAAO,aAAa,QAAQ,QAAQ;AACpC,SAAO,aAAa,cAAc,0BAA0B;AAC5D,SAAO,YAAYA;AACnB,SAAO,iBAAiB,SAAS,MAAM;AACrC,qBAAiB,cAAc;AAC/B,mBAAA;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEA,MAAM,4BAA4B,CAAC,UAAsB;AACvD,QAAM,EAAE,SAAS;AACjB,QAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAM,SAAS,kBAAkB,KAAK;AAEtC,kBAAgB,UAAU,IAAI,8BAA8B;AAE5D,OAAK,UAAU,IAAI,yBAAyB;AAC5C,kBAAgB,YAAY,IAAI;AAEhC,MAAI,OAAQ,iBAAgB,YAAY,MAAM;AAE9C,SAAO;AACT;AAEA,MAAA,cAAe;AAAA,EACb,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,WAAW;AAAA,IACX,MAAM;AAAA,EAAA;AAEV;"}