@universityofmaryland/web-elements-library 1.3.7 → 1.4.0

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

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

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

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

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

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

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

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

package/dist/composite/tabs/index.mjs

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

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

package/dist/composite/tabs/standard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../source/composite/tabs/standard.ts"],"names":[],"mappings":"AAGA,KAAK,aAAa,GAAG;IACnB,aAAa,EAAE,WAAW,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,CAAC;gCA2PqB,aAAa;;;;;;;;AAApC,wBAgIO"}
+{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../source/composite/tabs/standard.ts"],"names":[],"mappings":"AAGA,KAAK,aAAa,GAAG;IACnB,aAAa,EAAE,WAAW,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,CAAC;yBA2Pc,OAAO,aAAa;;;;;;;;AAApC,wBAgIO"}

package/dist/composite/tabs/standard.js

@@ -0,0 +1,309 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const index = require("../../utilities/performance/index.js");
+const index$1 = require("../../utilities/theme/index.js");
+const animations = require("../../utilities/theme/animations.js");
+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: ${Styles.token.color.gray.dark};
+  }
+`;
+const DisplayLineStyles = `
+  .${ELEMENT_ACTIVE_LINE_STRIP} {
+    position: absolute;
+    height: 100%;
+    top: 0;
+    left: -2px;
+    width: 2px;
+    background-color: ${Styles.token.color.gray.light};
+    z-index: -1;
+  }
+
+  ${OVERWRITE_VERTICAL_LAYOUT_LINE} {
+    height: 2px;
+    left: 0;
+    top: inherit;
+  }
+
+  .${ELEMENT_ACTIVE_LINE} {
+    position: absolute;
+    width: 0;
+    height: 0;
+    display: block;
+    background-color: ${Styles.token.color.red};
+    transform: translate(0);
+  }
+`;
+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, index2) => {
+    if (!content) return;
+    if (index2 === activeTab) {
+      content.style.display = "block";
+    } else {
+      content.style.display = "none";
+    }
+  });
+  const SetActiveButton = () => buttons.map((button, index2) => {
+    if (index2 === activeTab) {
+      button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, "true");
+      if (getIsThemeDark) button.style.color = `${Styles.token.color.white}`;
+    } else {
+      button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, "false");
+      if (getIsThemeDark) button.style.color = `${Styles.token.color.gray.light}`;
+    }
+  });
+  const SetContentPosition = () => {
+    const activeContent = contents[activeTab];
+    const space = isFlexLayout ? index$1.convertPixelStringToNumber(Styles.token.spacing.xl) : index$1.convertPixelStringToNumber(Styles.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 = index$1.convertPixelStringToNumber(
+          Styles.token.spacing.md
+        );
+        const spread = additionalSpread ? convertedSpace + additionalSpread : convertedSpace;
+        animations.scrollTo({
+          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 = (index2) => {
+    activeTab = index2;
+    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, index2) => {
+      button.addEventListener("click", () => SetActiveTab(index2));
+      button.style.position = "relative";
+      button.style.textAlign = "left";
+      button.style.display = "inline-block";
+      button.style.padding = `${Styles.token.spacing.sm} ${Styles.token.spacing.md}`;
+      button.style.border = "none";
+      button.style.background = "transparent";
+      Object.keys(Styles.typography.sans.large).forEach((key) => {
+        const keyRef = key;
+        button.style[keyRef] = Styles.typography.sans.large[keyRef];
+      });
+      if (isThemeDark) {
+        button.style.color = Styles.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",
+    index.debounce(EventResize, 10)
+  );
+  return {
+    element: declaration,
+    styles: STYLES_TABS_ELEMENT,
+    events: {
+      resize: EventResize,
+      load: EventLoad
+    }
+  };
+})();
+module.exports = standard;
+//# sourceMappingURL=standard.js.map

package/dist/composite/tabs/standard.js.map

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