@idds/js 1.0.72 → 1.0.73

package/dist/index.iife.js

@@ -38,6 +38,8 @@ var InaUI = (() => {
     initSingleFileUpload: () => initSingleFileUpload,
     initStepper: () => initStepper,
     initTab: () => initTab,
+    initTabHorizontal: () => initTabHorizontal,
+    initTabVertical: () => initTabVertical,
     initTimepicker: () => initTimepicker,
     initToggle: () => initToggle,
     showToast: () => showToast
@@ -2584,6 +2586,116 @@ var InaUI = (() => {
     });
   }
 
+  // src/js/components/stateful/tab-vertical.js
+  function initTabVertical() {
+    const tabs = document.querySelectorAll(`.${PREFIX}-tab-vertical`);
+    tabs.forEach((container) => {
+      if (container.dataset.initialized === "true") return;
+      container.dataset.initialized = "true";
+      const tabContainer = container.querySelector(
+        `.${PREFIX}-tab-vertical__container`
+      );
+      if (!tabContainer) return;
+      const tabButtons = tabContainer.querySelectorAll(
+        `.${PREFIX}-tab-vertical__tab`
+      );
+      const containerDisabled = container.classList.contains(
+        `${PREFIX}-tab-vertical--disabled`
+      );
+      const setActiveTab = (selectedTab) => {
+        if (containerDisabled || selectedTab.classList.contains(
+          `${PREFIX}-tab-vertical__tab--disabled`
+        ) || selectedTab.disabled) {
+          return;
+        }
+        tabButtons.forEach((tab) => {
+          const isSelected = tab === selectedTab;
+          tab.setAttribute("aria-selected", isSelected);
+          if (isSelected) {
+            tab.classList.add(`${PREFIX}-tab-vertical__tab--selected`);
+          } else {
+            tab.classList.remove(`${PREFIX}-tab-vertical__tab--selected`);
+          }
+        });
+        container.dispatchEvent(
+          new CustomEvent("tab:change", {
+            bubbles: true,
+            detail: {
+              value: selectedTab.dataset.value,
+              originalEvent: null
+            }
+          })
+        );
+      };
+      tabButtons.forEach((tab) => {
+        tab.addEventListener("click", () => {
+          setActiveTab(tab);
+        });
+        tab.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setActiveTab(tab);
+          }
+        });
+      });
+    });
+  }
+
+  // src/js/components/stateful/tab-horizontal.js
+  function initTabHorizontal() {
+    const tabs = document.querySelectorAll(`.${PREFIX}-tab-horizontal`);
+    tabs.forEach((container) => {
+      if (container.dataset.initialized === "true") return;
+      container.dataset.initialized = "true";
+      const tabContainer = container.querySelector(
+        `.${PREFIX}-tab-horizontal__container`
+      );
+      if (!tabContainer) return;
+      const tabButtons = tabContainer.querySelectorAll(
+        `.${PREFIX}-tab-horizontal__tab`
+      );
+      const containerDisabled = container.classList.contains(
+        `${PREFIX}-tab-horizontal--disabled`
+      );
+      const setActiveTab = (selectedTab) => {
+        if (containerDisabled || selectedTab.classList.contains(
+          `${PREFIX}-tab-horizontal__tab--disabled`
+        ) || selectedTab.disabled) {
+          return;
+        }
+        tabButtons.forEach((tab) => {
+          const isSelected = tab === selectedTab;
+          tab.setAttribute("aria-selected", isSelected);
+          if (isSelected) {
+            tab.classList.add(`${PREFIX}-tab-horizontal__tab--selected`);
+          } else {
+            tab.classList.remove(`${PREFIX}-tab-horizontal__tab--selected`);
+          }
+        });
+        container.dispatchEvent(
+          new CustomEvent("tab:change", {
+            bubbles: true,
+            detail: {
+              value: selectedTab.dataset.value,
+              originalEvent: null
+            }
+          })
+        );
+      };
+      tabButtons.forEach((tab) => {
+        tab.addEventListener("click", () => {
+          setActiveTab(tab);
+        });
+        tab.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setActiveTab(tab);
+          }
+        });
+      });
+    });
+  }
+
   // src/js/components/stateless/toast.js
   function showToast(optionsOrMessage, variant = "default", duration = 3e3) {
     let message, title, state, style, position, actionHtml;
@@ -2866,6 +2978,8 @@ var InaUI = (() => {
       initPagination();
       initSelectDropdown();
       initChip();
+      initTabVertical();
+      initTabHorizontal();
     });
   }
   return __toCommonJS(bundle_exports);

package/dist/index.js

@@ -2746,6 +2746,116 @@ function initPagination() {
   });
 }
 
+// src/js/components/stateful/tab-vertical.js
+function initTabVertical() {
+  const tabs = document.querySelectorAll(`.${PREFIX}-tab-vertical`);
+  tabs.forEach((container) => {
+    if (container.dataset.initialized === "true") return;
+    container.dataset.initialized = "true";
+    const tabContainer = container.querySelector(
+      `.${PREFIX}-tab-vertical__container`
+    );
+    if (!tabContainer) return;
+    const tabButtons = tabContainer.querySelectorAll(
+      `.${PREFIX}-tab-vertical__tab`
+    );
+    const containerDisabled = container.classList.contains(
+      `${PREFIX}-tab-vertical--disabled`
+    );
+    const setActiveTab = (selectedTab) => {
+      if (containerDisabled || selectedTab.classList.contains(
+        `${PREFIX}-tab-vertical__tab--disabled`
+      ) || selectedTab.disabled) {
+        return;
+      }
+      tabButtons.forEach((tab) => {
+        const isSelected = tab === selectedTab;
+        tab.setAttribute("aria-selected", isSelected);
+        if (isSelected) {
+          tab.classList.add(`${PREFIX}-tab-vertical__tab--selected`);
+        } else {
+          tab.classList.remove(`${PREFIX}-tab-vertical__tab--selected`);
+        }
+      });
+      container.dispatchEvent(
+        new CustomEvent("tab:change", {
+          bubbles: true,
+          detail: {
+            value: selectedTab.dataset.value,
+            originalEvent: null
+          }
+        })
+      );
+    };
+    tabButtons.forEach((tab) => {
+      tab.addEventListener("click", () => {
+        setActiveTab(tab);
+      });
+      tab.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          setActiveTab(tab);
+        }
+      });
+    });
+  });
+}
+
+// src/js/components/stateful/tab-horizontal.js
+function initTabHorizontal() {
+  const tabs = document.querySelectorAll(`.${PREFIX}-tab-horizontal`);
+  tabs.forEach((container) => {
+    if (container.dataset.initialized === "true") return;
+    container.dataset.initialized = "true";
+    const tabContainer = container.querySelector(
+      `.${PREFIX}-tab-horizontal__container`
+    );
+    if (!tabContainer) return;
+    const tabButtons = tabContainer.querySelectorAll(
+      `.${PREFIX}-tab-horizontal__tab`
+    );
+    const containerDisabled = container.classList.contains(
+      `${PREFIX}-tab-horizontal--disabled`
+    );
+    const setActiveTab = (selectedTab) => {
+      if (containerDisabled || selectedTab.classList.contains(
+        `${PREFIX}-tab-horizontal__tab--disabled`
+      ) || selectedTab.disabled) {
+        return;
+      }
+      tabButtons.forEach((tab) => {
+        const isSelected = tab === selectedTab;
+        tab.setAttribute("aria-selected", isSelected);
+        if (isSelected) {
+          tab.classList.add(`${PREFIX}-tab-horizontal__tab--selected`);
+        } else {
+          tab.classList.remove(`${PREFIX}-tab-horizontal__tab--selected`);
+        }
+      });
+      container.dispatchEvent(
+        new CustomEvent("tab:change", {
+          bubbles: true,
+          detail: {
+            value: selectedTab.dataset.value,
+            originalEvent: null
+          }
+        })
+      );
+    };
+    tabButtons.forEach((tab) => {
+      tab.addEventListener("click", () => {
+        setActiveTab(tab);
+      });
+      tab.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          setActiveTab(tab);
+        }
+      });
+    });
+  });
+}
+
 // src/js/components/stateless/toast.js
 function showToast(optionsOrMessage, variant = "default", duration = 3e3) {
   let message, title, state, style, position, actionHtml;
@@ -2841,6 +2951,8 @@ function initAll() {
   initTimepicker();
   initPagination();
   initChip();
+  initTabVertical();
+  initTabHorizontal();
 }
 export {
   PREFIX,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/js",
-  "version": "1.0.72",
+  "version": "1.0.73",
   "publishConfig": {
     "access": "public"
   },