@universityofmaryland/web-elements-library 1.3.6 → 1.4.0

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

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

package/dist/composite/social/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const sharing = require("./sharing.js");
+exports.sharing = sharing;
+//# sourceMappingURL=index.js.map

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

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

package/dist/composite/social/index.mjs

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

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

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

package/dist/composite/social/sharing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sharing.d.ts","sourceRoot":"","sources":["../../../source/composite/social/sharing.ts"],"names":[],"mappings":"AAGA,KAAK,sBAAsB,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACrB,CAAC;AAqJF,QAAA,MAAM,0BAA0B,UAAW,sBAAsB;;;;;;CA4H3D,CAAC;AAEP,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"sharing.d.ts","sourceRoot":"","sources":["../../../source/composite/social/sharing.ts"],"names":[],"mappings":"AAGA,KAAK,sBAAsB,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACrB,CAAC;AAqJF,QAAA,MAAM,0BAA0B,GAAI,OAAO,sBAAsB;;;;;;CA4H3D,CAAC;AAEP,eAAe,0BAA0B,CAAC"}

package/dist/composite/social/sharing.js

@@ -0,0 +1,233 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const icons = require("../../utilities/assets/icons.js");
+const social = require("../../utilities/assets/social.js");
+const index = require("../../utilities/performance/index.js");
+require("../../node_modules/postcss/lib/postcss.js");
+require("../../node_modules/postcss-nesting/dist/index.js");
+require("../../node_modules/postcss-js/index.js");
+const 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 (${Styles.token.media.queries.tablet.min}) {
+    ${OVERWRITE_FIXED_CONTAINER} {
+      flex-direction: column;
+    }
+  }
+
+  @media (${Styles.token.media.queries.tablet.min}) {
+    ${OVERWRITE_FIXED_CONTAINER} > *:not(:last-child) {
+      border-right: 1px solid ${Styles.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: ${Styles.token.spacing["2xl"]};
+    width: ${Styles.token.spacing["2xl"]};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid ${Styles.token.color.gray.light};
+    background-color: ${Styles.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: ${Styles.token.color.gray.dark};
+
+    & svg path {
+      fill: ${Styles.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: ${Styles.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 = social.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 = social.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 = icons.EMAIL;
+  return link;
+};
+const CreatePrint = () => {
+  const button = document.createElement("button");
+  button.innerHTML = icons.PRINTER;
+  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",
+      index.debounce(() => eventScroll(), 20)
+    );
+    window.addEventListener(
+      "resize",
+      index.debounce(() => eventResize(), 20)
+    );
+  }
+  return {
+    element: declaration,
+    events: {
+      load
+    },
+    styles: STYLES_SOCIAL_SHARING_ELEMENT
+  };
+})();
+module.exports = CreateSocialSharingElement;
+//# sourceMappingURL=sharing.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sharing.js","sources":["../../../source/composite/social/sharing.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\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 = Utility.asset.social.FACEBOOK;\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 = Utility.asset.social.X;\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 = Utility.asset.icon.EMAIL;\n\n  return link;\n};\n\nconst CreatePrint = () => {\n  const button = document.createElement('button');\n\n  button.innerHTML = Utility.asset.icon.PRINTER;\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        Utility.performance.debounce(() => eventScroll(), 20),\n      );\n\n      window.addEventListener(\n        'resize',\n        Utility.performance.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":["token","Utility.asset.social.FACEBOOK","Utility.asset.social.X","Utility.asset.icon.EMAIL","Utility.asset.icon.PRINTER","Utility.performance.debounce"],"mappings":"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"}

package/dist/composite/social/sharing.mjs

@@ -0,0 +1,234 @@
+import { token } from "@universityofmaryland/web-styles-library";
+import { EMAIL, PRINTER } from "../../utilities/assets/icons.mjs";
+import { FACEBOOK, X } from "../../utilities/assets/social.mjs";
+import { debounce } from "../../utilities/performance/index.mjs";
+import "../../node_modules/postcss/lib/postcss.mjs";
+import "../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../node_modules/postcss-js/index.mjs";
+const 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 = PRINTER;
+  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

@@ -0,0 +1 @@
+{"version":3,"file":"sharing.mjs","sources":["../../../source/composite/social/sharing.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\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 = Utility.asset.social.FACEBOOK;\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 = Utility.asset.social.X;\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 = Utility.asset.icon.EMAIL;\n\n  return link;\n};\n\nconst CreatePrint = () => {\n  const button = document.createElement('button');\n\n  button.innerHTML = Utility.asset.icon.PRINTER;\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        Utility.performance.debounce(() => eventScroll(), 20),\n      );\n\n      window.addEventListener(\n        'resize',\n        Utility.performance.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":["Utility.asset.social.FACEBOOK","Utility.asset.social.X","Utility.asset.icon.EMAIL","Utility.asset.icon.PRINTER","Utility.performance.debounce"],"mappings":"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"}

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

@@ -0,0 +1,45 @@
+"use strict";
+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
+};
+module.exports = DomStrcuture;
+//# sourceMappingURL=dom-structure.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dom-structure.js","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/dom-structure.mjs

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

@@ -0,0 +1 @@
+{"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.js

@@ -0,0 +1,7 @@
+"use strict";
+const domStructure = require("./dom-structure.js");
+const index = {
+  DomStrcuture: domStructure
+};
+module.exports = index;
+//# sourceMappingURL=index.js.map