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

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

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

package/dist/composite/social/sharing.mjs

@@ -1,232 +0,0 @@
-import * as token from "@universityofmaryland/web-token-library";
-import { debounce } from "@universityofmaryland/web-utilities-library/performance";
-import { facebook, x } from "@universityofmaryland/web-icons-library/social";
-import { email } from "@universityofmaryland/web-icons-library/communication";
-import { print } from "@universityofmaryland/web-icons-library/controls";
-const ATTRIBUTE_FIXED = "fixed";
-const IS_FIXED = `[${ATTRIBUTE_FIXED}]`;
-const ELEMENT_NAME = "umd-element-social-sharing";
-const ELEMENT_SOCIAL_SHARING_DECLARATION = "social-sharing-declarion";
-const ELEMENT_SOCIAL_SHARING_CONTAINER = "social-sharing-container";
-const OVERWRITE_FIXED_CONTAINER = `.${ELEMENT_SOCIAL_SHARING_CONTAINER}${IS_FIXED}`;
-const OverwriteFixed = `
-  @media (${token.media.queries.tablet.min}) {
-    ${OVERWRITE_FIXED_CONTAINER} {
-      flex-direction: column;
-    }
-  }
-
-  @media (${token.media.queries.tablet.min}) {
-    ${OVERWRITE_FIXED_CONTAINER} > *:not(:last-child) {
-      border-right: 1px solid ${token.color.gray.light};
-      border-bottom: none;
-    }
-  }
-`;
-const ContainerStyles = `
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} {
-    display: flex;
-    transition: transform 250ms ease-in-out;
-  }
-  
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > * {
-    height: ${token.spacing["2xl"]};
-    width: ${token.spacing["2xl"]};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid ${token.color.gray.light};
-    background-color: ${token.color.white};
-    transition: background-color 250ms ease-in-out;
-  }
-
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > button:hover,
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > button:focus,
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > a:hover,
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > a:focus {
-    background-color: ${token.color.gray.dark};
-
-    & svg path {
-      fill: ${token.color.white};
-    }
-  }
-
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > *:not(:last-child) {
-    border-right: none;
-  }
-  
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg {
-    display: block;
-    transition: fill 250ms ease-in-out;
-  }
-  
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg path {
-    fill: ${token.color.black};
-  }
-
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg#icon_facebook {
-    width: 34px;
-    height: 30px;
-  }
-
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg#icon_email {
-    width: 21px;
-    height: 20px;
-  }
-`;
-const STYLES_SOCIAL_SHARING_ELEMENT = `
-  .${ELEMENT_SOCIAL_SHARING_DECLARATION} {
-    container: ${ELEMENT_NAME} / inline-size;
-  }
-
-  ${ContainerStyles}
-  ${OverwriteFixed}
-`;
-const CreateFacebook = () => {
-  const button = document.createElement("button");
-  button.innerHTML = facebook;
-  button.setAttribute("aria-label", "share this page on facebook");
-  button.addEventListener("click", () => {
-    const shareURL = `http://www.facebook.com/share.php?u=${encodeURIComponent(
-      window.location.toString()
-    )}`;
-    window.open(
-      shareURL,
-      "Facebook",
-      "toolbar=0,status=0,width=626,height=436"
-    );
-  });
-  return button;
-};
-const CreateTwitter = ({ url, title }) => {
-  const button = document.createElement("button");
-  button.innerHTML = x;
-  button.setAttribute("aria-label", "share this page on twitter");
-  button.addEventListener("click", () => {
-    const shareURL = `http://twitter.com/share?url=${url}&text=${title}`;
-    window.open(shareURL, "sharer", "toolbar=0,status=0,width=626,height=436");
-  });
-  return button;
-};
-const CreateEmail = ({ url, title }) => {
-  const link = document.createElement("a");
-  link.href = `mailto:?subject=${title}&body=${url}`;
-  link.setAttribute("aria-label", "email this page");
-  link.setAttribute("target", "_blank");
-  link.innerHTML = email;
-  return link;
-};
-const CreatePrint = () => {
-  const button = document.createElement("button");
-  button.innerHTML = print;
-  button.setAttribute("aria-label", "print this page");
-  button.addEventListener("click", () => window.print());
-  return button;
-};
-const CreateSocialSharingElement = (props) => (() => {
-  const {
-    includeFacebook = true,
-    includeTwitter = true,
-    includeEmail = false,
-    includePrint = false,
-    title: defaultTitle,
-    url: defaultUrl,
-    isFixed = false
-  } = props;
-  const declaration = document.createElement("div");
-  const container = document.createElement("div");
-  const defaultStartingPosition = `translateX(-100vh)`;
-  const title = defaultTitle || document.title;
-  const url = defaultUrl || window.location.toString();
-  const getSpacing = () => window.innerWidth > 768 ? 40 : 8;
-  let startingPosition = null;
-  let isShowing = false;
-  const eventResize = () => {
-    startingPosition = declaration.getBoundingClientRect().left;
-  };
-  const eventScroll = () => {
-    const windowHeight = window.innerHeight;
-    const pagePosition = window.scrollY;
-    const isNearBottom = pagePosition + windowHeight >= document.body.scrollHeight - windowHeight / 2;
-    const showWindow = !isNearBottom;
-    if (showWindow) {
-      setVisiblePosition();
-    } else {
-      setHiddenPosition();
-    }
-  };
-  const setVisiblePosition = () => {
-    if (!isShowing) {
-      container.style.transform = "translateX(0)";
-      isShowing = true;
-    }
-  };
-  const setHiddenPosition = () => {
-    if (isShowing) {
-      isShowing = false;
-      if (startingPosition) {
-        const spacing = getSpacing();
-        const translateAmount = window.innerWidth - startingPosition;
-        const position = translateAmount + spacing + container.offsetWidth;
-        container.style.transform = `translateX(-${position}px)`;
-      } else {
-        container.style.transform = defaultStartingPosition;
-      }
-    }
-  };
-  const load = () => {
-    startingPosition = declaration.getBoundingClientRect().left;
-    container.style.transition = "none";
-    setHiddenPosition();
-    setTimeout(() => {
-      container.style.transition = "transform 250ms ease-in-out";
-    }, 100);
-  };
-  container.classList.add(ELEMENT_SOCIAL_SHARING_CONTAINER);
-  if (includeFacebook) {
-    container.appendChild(CreateFacebook());
-  }
-  if (includeTwitter) {
-    container.appendChild(
-      CreateTwitter({
-        title,
-        url
-      })
-    );
-  }
-  if (includeEmail) {
-    container.appendChild(
-      CreateEmail({
-        title,
-        url
-      })
-    );
-  }
-  if (includePrint) {
-    container.appendChild(CreatePrint());
-  }
-  declaration.appendChild(container);
-  declaration.classList.add(ELEMENT_SOCIAL_SHARING_DECLARATION);
-  if (isFixed) {
-    container.setAttribute(ATTRIBUTE_FIXED, "");
-    window.addEventListener(
-      "scroll",
-      debounce(() => eventScroll(), 20)
-    );
-    window.addEventListener(
-      "resize",
-      debounce(() => eventResize(), 20)
-    );
-  }
-  return {
-    element: declaration,
-    events: {
-      load
-    },
-    styles: STYLES_SOCIAL_SHARING_ELEMENT
-  };
-})();
-export {
-  CreateSocialSharingElement as default
-};
-//# sourceMappingURL=sharing.mjs.map

package/dist/composite/social/sharing.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"sharing.mjs","sources":["../../../source/composite/social/sharing.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { facebook as iconFacebook, x as iconX } from '@universityofmaryland/web-icons-library/social';\nimport { email as iconEmail } from '@universityofmaryland/web-icons-library/communication';\nimport { print as iconPrint } from '@universityofmaryland/web-icons-library/controls';\n\ntype TypeSocialSharingProps = {\n  isFixed?: boolean;\n  includeFacebook?: boolean;\n  includeTwitter?: boolean;\n  includeEmail?: boolean;\n  includePrint?: boolean;\n  title?: string | null;\n  url?: string | null;\n};\n\nconst ATTRIBUTE_FIXED = 'fixed';\n\nconst IS_FIXED = `[${ATTRIBUTE_FIXED}]`;\n\nconst ELEMENT_NAME = 'umd-element-social-sharing';\nconst ELEMENT_SOCIAL_SHARING_DECLARATION = 'social-sharing-declarion';\nconst ELEMENT_SOCIAL_SHARING_CONTAINER = 'social-sharing-container';\n\nconst OVERWRITE_FIXED_CONTAINER = `.${ELEMENT_SOCIAL_SHARING_CONTAINER}${IS_FIXED}`;\n\n// prettier-ignore\nconst OverwriteFixed = `\n  @media (${token.media.queries.tablet.min}) {\n    ${OVERWRITE_FIXED_CONTAINER} {\n      flex-direction: column;\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    ${OVERWRITE_FIXED_CONTAINER} > *:not(:last-child) {\n      border-right: 1px solid ${token.color.gray.light};\n      border-bottom: none;\n    }\n  }\n`\n\n// prettier-ignore\nconst ContainerStyles = `\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} {\n    display: flex;\n    transition: transform 250ms ease-in-out;\n  }\n  \n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > * {\n    height: ${token.spacing['2xl']};\n    width: ${token.spacing['2xl']};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid ${token.color.gray.light};\n    background-color: ${token.color.white};\n    transition: background-color 250ms ease-in-out;\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > button:hover,\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > button:focus,\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > a:hover,\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > a:focus {\n    background-color: ${token.color.gray.dark};\n\n    & svg path {\n      fill: ${token.color.white};\n    }\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > *:not(:last-child) {\n    border-right: none;\n  }\n  \n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg {\n    display: block;\n    transition: fill 250ms ease-in-out;\n  }\n  \n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg path {\n    fill: ${token.color.black};\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg#icon_facebook {\n    width: 34px;\n    height: 30px;\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg#icon_email {\n    width: 21px;\n    height: 20px;\n  }\n`\n\n// prettier-ignore\nconst STYLES_SOCIAL_SHARING_ELEMENT = `\n  .${ELEMENT_SOCIAL_SHARING_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${ContainerStyles}\n  ${OverwriteFixed}\n`;\n\nconst CreateFacebook = () => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconFacebook;\n  button.setAttribute('aria-label', 'share this page on facebook');\n\n  button.addEventListener('click', () => {\n    const shareURL = `http://www.facebook.com/share.php?u=${encodeURIComponent(\n      window.location.toString(),\n    )}`;\n\n    window.open(\n      shareURL,\n      'Facebook',\n      'toolbar=0,status=0,width=626,height=436',\n    );\n  });\n\n  return button;\n};\n\nconst CreateTwitter = ({ url, title }: { url: string; title: string }) => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconX;\n  button.setAttribute('aria-label', 'share this page on twitter');\n\n  button.addEventListener('click', () => {\n    const shareURL = `http://twitter.com/share?url=${url}&text=${title}`;\n\n    window.open(shareURL, 'sharer', 'toolbar=0,status=0,width=626,height=436');\n  });\n\n  return button;\n};\n\nconst CreateEmail = ({ url, title }: { url: string; title: string }) => {\n  const link = document.createElement('a');\n\n  link.href = `mailto:?subject=${title}&body=${url}`;\n  link.setAttribute('aria-label', 'email this page');\n  link.setAttribute('target', '_blank');\n\n  link.innerHTML = iconEmail;\n\n  return link;\n};\n\nconst CreatePrint = () => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconPrint;\n  button.setAttribute('aria-label', 'print this page');\n  button.addEventListener('click', () => window.print());\n\n  return button;\n};\n\nconst CreateSocialSharingElement = (props: TypeSocialSharingProps) =>\n  (() => {\n    const {\n      includeFacebook = true,\n      includeTwitter = true,\n      includeEmail = false,\n      includePrint = false,\n      title: defaultTitle,\n      url: defaultUrl,\n      isFixed = false,\n    } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const defaultStartingPosition = `translateX(-100vh)`;\n    const title = defaultTitle || document.title;\n    const url = defaultUrl || window.location.toString();\n\n    const getSpacing = () => (window.innerWidth > 768 ? 40 : 8);\n    let startingPosition: null | number = null;\n    let isShowing = false;\n\n    const eventResize = () => {\n      startingPosition = declaration.getBoundingClientRect().left;\n    };\n\n    const eventScroll = () => {\n      const windowHeight = window.innerHeight;\n      const pagePosition = window.scrollY;\n      const isNearBottom =\n        pagePosition + windowHeight >=\n        document.body.scrollHeight - windowHeight / 2;\n      const showWindow = !isNearBottom;\n\n      if (showWindow) {\n        setVisiblePosition();\n      } else {\n        setHiddenPosition();\n      }\n    };\n\n    const setVisiblePosition = () => {\n      if (!isShowing) {\n        container.style.transform = 'translateX(0)';\n        isShowing = true;\n      }\n    };\n\n    const setHiddenPosition = () => {\n      if (isShowing) {\n        isShowing = false;\n\n        if (startingPosition) {\n          const spacing = getSpacing();\n          const translateAmount = window.innerWidth - startingPosition;\n          const position = translateAmount + spacing + container.offsetWidth;\n\n          container.style.transform = `translateX(-${position}px)`;\n        } else {\n          container.style.transform = defaultStartingPosition;\n        }\n      }\n    };\n\n    const load = () => {\n      startingPosition = declaration.getBoundingClientRect().left;\n      container.style.transition = 'none';\n      setHiddenPosition();\n\n      setTimeout(() => {\n        container.style.transition = 'transform 250ms ease-in-out';\n      }, 100);\n    };\n\n    container.classList.add(ELEMENT_SOCIAL_SHARING_CONTAINER);\n\n    if (includeFacebook) {\n      container.appendChild(CreateFacebook());\n    }\n\n    if (includeTwitter) {\n      container.appendChild(\n        CreateTwitter({\n          title,\n          url,\n        }),\n      );\n    }\n\n    if (includeEmail) {\n      container.appendChild(\n        CreateEmail({\n          title,\n          url,\n        }),\n      );\n    }\n\n    if (includePrint) {\n      container.appendChild(CreatePrint());\n    }\n\n    declaration.appendChild(container);\n    declaration.classList.add(ELEMENT_SOCIAL_SHARING_DECLARATION);\n\n    if (isFixed) {\n      container.setAttribute(ATTRIBUTE_FIXED, '');\n      window.addEventListener(\n        'scroll',\n        debounce(() => eventScroll(), 20),\n      );\n\n      window.addEventListener(\n        'resize',\n        debounce(() => eventResize(), 20),\n      );\n    }\n\n    return {\n      element: declaration,\n      events: {\n        load,\n      },\n      styles: STYLES_SOCIAL_SHARING_ELEMENT,\n    };\n  })();\n\nexport default CreateSocialSharingElement;\n"],"names":["iconFacebook","iconX","iconEmail","iconPrint"],"mappings":"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"}

package/dist/composite/tabs/elements/dom-structure.mjs

@@ -1,46 +0,0 @@
-const ATTRIBUTE_BUTTON_TITLE = "data-title";
-const ATTRIBUTE_ARIA_EXPANDED = "aria-expanded";
-const ATTRIBUTE_ARIA_CONTROLS = "aria-controls";
-const ELEMENT_TABS_CONTENT_WRAPPER = "tabs-content-wrapper";
-const ELEMENT_TABS_BUTTON_WRAPPER = "tabs-button-wrapper";
-const CreateButtons = ({ tabs }) => tabs.map((tab, index) => {
-  const title = tab.getAttribute(ATTRIBUTE_BUTTON_TITLE);
-  if (!title) return;
-  const tabButtonWrapper = document.createElement("div");
-  const tabButton = document.createElement("button");
-  tabButton.setAttribute(ATTRIBUTE_ARIA_EXPANDED, "false");
-  tabButton.setAttribute(ATTRIBUTE_ARIA_CONTROLS, index.toString());
-  tabButton.innerHTML = title;
-  tabButtonWrapper.classList.add(ELEMENT_TABS_BUTTON_WRAPPER);
-  tabButtonWrapper.appendChild(tabButton);
-  return tabButtonWrapper;
-});
-const ModifyTabsDomStrcuture = ({
-  markup
-}) => {
-  const container = document.createElement("div");
-  container.innerHTML = markup.innerHTML;
-  container.classList.add(ELEMENT_TABS_CONTENT_WRAPPER);
-  const tabs = Array.from(
-    container.querySelectorAll(":scope > *")
-  );
-  const buttons = CreateButtons({ tabs });
-  tabs.forEach((tab, index) => {
-    const buttonWrapper = buttons[index];
-    const button = buttonWrapper.querySelector("button");
-    if (buttonWrapper) container.insertBefore(buttonWrapper, tab);
-    if (button) {
-      const ref = `${button.innerHTML.replace(/\s/g, "")}-${index}`;
-      button.setAttribute(ATTRIBUTE_ARIA_CONTROLS, ref);
-      tab.setAttribute("id", ref);
-    }
-  });
-  return container;
-};
-const DomStrcuture = {
-  ModifyElement: ModifyTabsDomStrcuture
-};
-export {
-  DomStrcuture as default
-};
-//# sourceMappingURL=dom-structure.mjs.map

package/dist/composite/tabs/elements/dom-structure.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"dom-structure.mjs","sources":["../../../../source/composite/tabs/elements/dom-structure.ts"],"sourcesContent":["const ATTRIBUTE_BUTTON_TITLE = 'data-title';\n\nconst ATTRIBUTE_ARIA_EXPANDED = 'aria-expanded';\nconst ATTRIBUTE_ARIA_CONTROLS = 'aria-controls';\n\nconst ELEMENT_TABS_CONTENT_WRAPPER = 'tabs-content-wrapper';\nconst ELEMENT_TABS_BUTTON_WRAPPER = 'tabs-button-wrapper';\n\nconst CreateButtons = ({ tabs }: { tabs: HTMLElement[] }) =>\n  tabs.map((tab, index) => {\n    const title = tab.getAttribute(ATTRIBUTE_BUTTON_TITLE);\n\n    if (!title) return;\n\n    const tabButtonWrapper = document.createElement('div');\n    const tabButton = document.createElement('button');\n\n    tabButton.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'false');\n    tabButton.setAttribute(ATTRIBUTE_ARIA_CONTROLS, index.toString());\n    tabButton.innerHTML = title;\n    tabButtonWrapper.classList.add(ELEMENT_TABS_BUTTON_WRAPPER);\n    tabButtonWrapper.appendChild(tabButton);\n\n    return tabButtonWrapper;\n  });\n\nconst ModifyTabsDomStrcuture = ({\n  markup,\n}: {\n  markup: Element | HTMLElement | HTMLSlotElement;\n}) => {\n  const container = document.createElement('div');\n\n  container.innerHTML = markup.innerHTML;\n  container.classList.add(ELEMENT_TABS_CONTENT_WRAPPER);\n\n  const tabs = Array.from(\n    container.querySelectorAll(':scope > *'),\n  ) as HTMLElement[];\n  const buttons = CreateButtons({ tabs });\n\n  tabs.forEach((tab, index) => {\n    const buttonWrapper = buttons[index] as HTMLDivElement;\n    const button = buttonWrapper.querySelector('button');\n    if (buttonWrapper) container.insertBefore(buttonWrapper, tab);\n\n    if (button) {\n      const ref = `${button.innerHTML.replace(/\\s/g, '')}-${index}`;\n      button.setAttribute(ATTRIBUTE_ARIA_CONTROLS, ref);\n      tab.setAttribute('id', ref);\n    }\n  });\n\n  return container;\n};\n\nexport default {\n  ModifyElement: ModifyTabsDomStrcuture,\n};\n"],"names":[],"mappings":"AAAA,MAAM,yBAAyB;AAE/B,MAAM,0BAA0B;AAChC,MAAM,0BAA0B;AAEhC,MAAM,+BAA+B;AACrC,MAAM,8BAA8B;AAEpC,MAAM,gBAAgB,CAAC,EAAE,KAAA,MACvB,KAAK,IAAI,CAAC,KAAK,UAAU;AACvB,QAAM,QAAQ,IAAI,aAAa,sBAAsB;AAErD,MAAI,CAAC,MAAO;AAEZ,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,YAAY,SAAS,cAAc,QAAQ;AAEjD,YAAU,aAAa,yBAAyB,OAAO;AACvD,YAAU,aAAa,yBAAyB,MAAM,SAAA,CAAU;AAChE,YAAU,YAAY;AACtB,mBAAiB,UAAU,IAAI,2BAA2B;AAC1D,mBAAiB,YAAY,SAAS;AAEtC,SAAO;AACT,CAAC;AAEH,MAAM,yBAAyB,CAAC;AAAA,EAC9B;AACF,MAEM;AACJ,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,YAAU,YAAY,OAAO;AAC7B,YAAU,UAAU,IAAI,4BAA4B;AAEpD,QAAM,OAAO,MAAM;AAAA,IACjB,UAAU,iBAAiB,YAAY;AAAA,EAAA;AAEzC,QAAM,UAAU,cAAc,EAAE,MAAM;AAEtC,OAAK,QAAQ,CAAC,KAAK,UAAU;AAC3B,UAAM,gBAAgB,QAAQ,KAAK;AACnC,UAAM,SAAS,cAAc,cAAc,QAAQ;AACnD,QAAI,cAAe,WAAU,aAAa,eAAe,GAAG;AAE5D,QAAI,QAAQ;AACV,YAAM,MAAM,GAAG,OAAO,UAAU,QAAQ,OAAO,EAAE,CAAC,IAAI,KAAK;AAC3D,aAAO,aAAa,yBAAyB,GAAG;AAChD,UAAI,aAAa,MAAM,GAAG;AAAA,IAC5B;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEA,MAAA,eAAe;AAAA,EACb,eAAe;AACjB;"}

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

@@ -1,8 +0,0 @@
-import DomStrcuture from "./dom-structure.mjs";
-const index = {
-  DomStrcuture
-};
-export {
-  index as default
-};
-//# sourceMappingURL=index.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":["../../../../source/composite/tabs/elements/index.ts"],"sourcesContent":["import DomStrcuture from './dom-structure';\n\nexport default {\n  DomStrcuture,\n};\n"],"names":[],"mappings":";AAEA,MAAA,QAAe;AAAA,EACb;AACF;"}

package/dist/composite/tabs/index.mjs

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

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

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

package/dist/composite/tabs/standard.mjs

@@ -1,307 +0,0 @@
-import * as token from "@universityofmaryland/web-token-library";
-import * as typography from "@universityofmaryland/web-styles-library/typography";
-import { smoothScrollToElement } from "@universityofmaryland/web-utilities-library/animation";
-import { debounce } from "@universityofmaryland/web-utilities-library/performance";
-import { parsePixelValue } from "@universityofmaryland/web-utilities-library/styles";
-const ATTRIBUTE_LAYOUT_HORIZONTAL = "data-layout-horizontal";
-const ATTRIBUTE_ARIA_EXPANDED = "aria-expanded";
-const ATTRIBUTE_THEME = "theme";
-const THEME_DARK = "dark";
-const ELEMENT_NAME = "umd-element-tabs";
-const ELEMENT_DECLARATION = "tabs-declaration";
-const ELEMENT_CONTAINER = "tabs-container";
-const ELEMENT_CONTENT_STRIP = "tabs-content-strip";
-const ELEMENT_ACTIVE_LINE_STRIP = "tab-active-line-strip";
-const ELEMENT_ACTIVE_LINE = "tab-active-line";
-const IS_LAYOUT_HORIZONTAL = `[${ATTRIBUTE_LAYOUT_HORIZONTAL}]`;
-const IS_THEME_DARK = `[${ATTRIBUTE_THEME}="${THEME_DARK}"]`;
-const OVERWRITE_VERTICAL_LAYOUT_CONTAINER = `.${ELEMENT_CONTAINER}${IS_LAYOUT_HORIZONTAL}`;
-const OVERWRITE_VERTICAL_LAYOUT_LINE = `${OVERWRITE_VERTICAL_LAYOUT_CONTAINER} .${ELEMENT_ACTIVE_LINE_STRIP}`;
-const OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;
-const OVERWRITE_THEME_DARK_LINE = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ACTIVE_LINE_STRIP}`;
-const OverwriteThemeStyles = `
-  ${OVERWRITE_THEME_DARK_LINE} {
-    background-color: ${token.color.gray.dark};
-  }
-`;
-const DisplayLineStyles = `
-  .${ELEMENT_ACTIVE_LINE_STRIP} {
-    position: absolute;
-    height: 100%;
-    top: 0;
-    left: -2px;
-    width: 2px;
-    background-color: ${token.color.gray.light};
-    z-index: 9;
-  }
-
-  ${OVERWRITE_VERTICAL_LAYOUT_LINE} {
-    height: 2px;
-    left: 0;
-    top: inherit;
-  }
-
-  .${ELEMENT_ACTIVE_LINE} {
-    position: absolute;
-    width: 0;
-    height: 0;
-    display: block;
-    background-color: ${token.color.red};
-    transform: translate(0);
-    z-index: 99;
-  }
-`;
-const STYLES_TABS_ELEMENT = `
-  .${ELEMENT_DECLARATION} {
-    container: ${ELEMENT_NAME} / inline-size;
-    position: relative;
-  }
-
-  ${DisplayLineStyles}
-  ${OverwriteThemeStyles}
-`;
-const SetDisplay = ({
-  GetElements,
-  GetState,
-  transition = true,
-  additionalSpread
-}) => {
-  const {
-    getContainer,
-    getTabsContainer,
-    getDisplayLineStrip,
-    getDisplayLine,
-    getContentStrip,
-    getButtons,
-    getContents
-  } = GetElements;
-  const {
-    getActiveTab,
-    getIsFlexLayout,
-    getButtonWidths,
-    getButtonHeights,
-    getIsThemeDark
-  } = GetState;
-  const container = getContainer();
-  const tabsContainer = getTabsContainer();
-  const displayLineStrip = getDisplayLineStrip();
-  const displayLine = getDisplayLine();
-  const strip = getContentStrip();
-  const buttons = getButtons();
-  const contents = getContents();
-  const isFlexLayout = getIsFlexLayout();
-  const activeTab = getActiveTab();
-  const buttonWidths = getButtonWidths();
-  const buttonHeights = getButtonHeights();
-  const SetActiveContent = () => contents.map((content, index) => {
-    if (!content) return;
-    if (index === activeTab) {
-      content.style.display = "block";
-    } else {
-      content.style.display = "none";
-    }
-  });
-  const SetActiveButton = () => buttons.map((button, index) => {
-    if (index === activeTab) {
-      button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, "true");
-      if (getIsThemeDark) button.style.color = `${token.color.white}`;
-    } else {
-      button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, "false");
-      if (getIsThemeDark) button.style.color = `${token.color.gray.light}`;
-    }
-  });
-  const SetContentPosition = () => {
-    const activeContent = contents[activeTab];
-    const space = isFlexLayout ? parsePixelValue(token.spacing.xl) : parsePixelValue(token.spacing.md);
-    if (activeContent) {
-      if (transition) {
-        strip.style.transition = "height 0.5s";
-      } else {
-        strip.style.transition = "none";
-      }
-      strip.style.height = `${activeContent.offsetHeight + space}px`;
-      activeContent.style.top = `${tabsContainer.offsetHeight + space}px`;
-      activeContent.style.width = "100%";
-      if (!isFlexLayout && transition) {
-        const convertedSpace = parsePixelValue(token.spacing.md);
-        const spread = additionalSpread ? convertedSpace + additionalSpread : convertedSpace;
-        smoothScrollToElement({
-          element: activeContent,
-          spread
-        });
-      }
-    }
-  };
-  const SetContainerStyles = () => {
-    if (isFlexLayout) {
-      container.setAttribute(ATTRIBUTE_LAYOUT_HORIZONTAL, "");
-    } else {
-      container.removeAttribute(ATTRIBUTE_LAYOUT_HORIZONTAL);
-    }
-  };
-  const StyleWrapperStyles = () => {
-    if (isFlexLayout) {
-      tabsContainer.style.display = "flex";
-    } else {
-      tabsContainer.style.display = "block";
-    }
-  };
-  const SetLineStyles = () => {
-    const activeButton = buttons[activeTab];
-    if (transition) {
-      displayLine.style.transition = "width 0.5s ease-in-out, height 0.5s ease-in-out, transform 0.5s ease-in-out";
-    } else {
-      displayLine.style.transition = "none";
-    }
-    if (isFlexLayout) {
-      let offset = 0;
-      if (activeTab > 0) {
-        for (let i = 0; i < activeTab; i++) {
-          offset += buttons[i].offsetWidth;
-        }
-      }
-      displayLineStrip.style.width = `${buttonWidths}px`;
-      displayLineStrip.style.height = `2px`;
-      displayLine.style.top = `inherit`;
-      displayLine.style.left = `0`;
-      displayLine.style.width = `${activeButton.offsetWidth}px`;
-      displayLine.style.height = `2px`;
-      displayLine.style.transform = `translate(${offset}px, 0)`;
-    } else {
-      let offset = 0;
-      if (activeTab > 0) {
-        for (let i = 0; i < activeTab; i++) {
-          offset += buttons[i].offsetHeight;
-        }
-      }
-      displayLineStrip.style.width = `2px`;
-      displayLineStrip.style.height = `${buttonHeights}px`;
-      displayLine.style.top = `0`;
-      displayLine.style.left = `-2px`;
-      displayLine.style.width = `2px`;
-      displayLine.style.height = `${activeButton.offsetHeight}px`;
-      displayLine.style.transform = `translate(0, ${offset}px)`;
-    }
-  };
-  SetActiveContent();
-  SetActiveButton();
-  SetContainerStyles();
-  StyleWrapperStyles();
-  SetLineStyles();
-  SetContentPosition();
-};
-const standard = (props) => (() => {
-  const { isThemeDark, tabsContainer, shadowContent, topPosition } = props;
-  const declaration = document.createElement("div");
-  const container = document.createElement("div");
-  const contentStrip = document.createElement("div");
-  const displayLineStrip = document.createElement("div");
-  const displayLine = document.createElement("span");
-  const children = Array.from(tabsContainer.children);
-  const buttons = Array.from(tabsContainer.querySelectorAll("button"));
-  const additionalSpread = topPosition ? parseInt(topPosition) : null;
-  const contents = children.filter(
-    (child) => buttons.find(
-      (button) => button.getAttribute("aria-controls") === child.getAttribute("id")
-    )
-  );
-  const GetElements = {
-    getContainer: () => container,
-    getTabsContainer: () => tabsContainer,
-    getDisplayLineStrip: () => displayLineStrip,
-    getDisplayLine: () => displayLine,
-    getContentStrip: () => contentStrip,
-    getButtons: () => buttons,
-    getContents: () => contents
-  };
-  const GetState = {
-    getActiveTab: () => activeTab,
-    getIsFlexLayout: () => isFlexLayout,
-    getButtonWidths: () => buttonWidths,
-    getButtonHeights: () => buttonHeights,
-    getIsThemeDark: isThemeDark || false
-  };
-  const GetContext = { GetElements, GetState };
-  const SetActiveTab = (index) => {
-    activeTab = index;
-    SetDisplay({ ...GetContext, additionalSpread });
-  };
-  const SetDisplayLayout = () => {
-    buttonWidths = buttons.reduce(
-      (acc, button) => acc + button.offsetWidth,
-      0
-    );
-    buttonHeights = buttons.reduce(
-      (acc, button) => acc + button.offsetHeight,
-      0
-    );
-    isFlexLayout = buttonWidths < container.offsetWidth;
-  };
-  const SetLoadStyles = () => {
-    buttons.forEach((button, index) => {
-      button.addEventListener("click", () => SetActiveTab(index));
-      button.style.position = "relative";
-      button.style.textAlign = "left";
-      button.style.display = "inline-block";
-      button.style.padding = `${token.spacing.sm} ${token.spacing.md}`;
-      button.style.border = "none";
-      button.style.background = "transparent";
-      Object.keys(typography.sans.large).forEach((key) => {
-        const keyRef = key;
-        button.style[keyRef] = typography.sans.large[keyRef];
-      });
-      if (isThemeDark) {
-        button.style.color = token.color.white;
-      }
-    });
-    contents.forEach((content) => {
-      if (!content) return;
-      content.style.display = "none";
-      content.style.position = "absolute";
-      content.style.top = "0";
-      content.style.left = "0";
-    });
-  };
-  let activeTab = 0;
-  let isFlexLayout = false;
-  let buttonWidths = 0;
-  let buttonHeights = 0;
-  const EventResize = () => {
-    SetDisplayLayout();
-    SetDisplay({ ...GetContext, transition: false });
-  };
-  const EventLoad = () => {
-    SetLoadStyles();
-    SetDisplay({ ...GetContext, transition: false });
-    SetDisplayLayout();
-    SetDisplay({ ...GetContext, transition: false });
-  };
-  contentStrip.classList.add(ELEMENT_CONTENT_STRIP);
-  if (shadowContent) {
-    container.appendChild(shadowContent);
-  } else {
-    container.appendChild(tabsContainer);
-  }
-  displayLineStrip.classList.add(ELEMENT_ACTIVE_LINE_STRIP);
-  container.appendChild(displayLineStrip);
-  displayLine.classList.add(ELEMENT_ACTIVE_LINE);
-  container.appendChild(displayLine);
-  container.appendChild(contentStrip);
-  container.classList.add(ELEMENT_CONTAINER);
-  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
-  declaration.classList.add(ELEMENT_DECLARATION);
-  declaration.appendChild(container);
-  window.addEventListener("resize", debounce(EventResize, 10));
-  return {
-    element: declaration,
-    styles: STYLES_TABS_ELEMENT,
-    events: {
-      resize: EventResize,
-      load: EventLoad
-    }
-  };
-})();
-export {
-  standard as default
-};
-//# sourceMappingURL=standard.mjs.map