@idds/js 1.0.72 → 1.0.74

package/dist/index.iife.js

@@ -38,8 +38,11 @@ var InaUI = (() => {
     initSingleFileUpload: () => initSingleFileUpload,
     initStepper: () => initStepper,
     initTab: () => initTab,
+    initTabHorizontal: () => initTabHorizontal,
+    initTabVertical: () => initTabVertical,
     initTimepicker: () => initTimepicker,
     initToggle: () => initToggle,
+    setBrandTheme: () => setBrandTheme,
     showToast: () => showToast
   });
 
@@ -2584,6 +2587,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;
@@ -2653,6 +2766,24 @@ var InaUI = (() => {
     }
   }
 
+  // src/js/utils/theme.js
+  function setBrandTheme(brandName) {
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
+    const oldBrand = root.getAttribute("data-brand");
+    if (oldBrand === brandName) return;
+    if (brandName) {
+      root.setAttribute("data-brand", brandName);
+    } else {
+      root.removeAttribute("data-brand");
+    }
+    window.dispatchEvent(
+      new CustomEvent("idds:theme-change", {
+        detail: { brand: brandName, previousBrand: oldBrand }
+      })
+    );
+  }
+
   // src/js/index.js
   var PREFIX = "ina";
 
@@ -2866,6 +2997,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;
@@ -2815,6 +2925,24 @@ function showToast(optionsOrMessage, variant = "default", duration = 3e3) {
   }
 }
 
+// src/js/utils/theme.js
+function setBrandTheme(brandName) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  const oldBrand = root.getAttribute("data-brand");
+  if (oldBrand === brandName) return;
+  if (brandName) {
+    root.setAttribute("data-brand", brandName);
+  } else {
+    root.removeAttribute("data-brand");
+  }
+  window.dispatchEvent(
+    new CustomEvent("idds:theme-change", {
+      detail: { brand: brandName, previousBrand: oldBrand }
+    })
+  );
+}
+
 // src/js/index.js
 var PREFIX = "ina";
 function initAll() {
@@ -2841,9 +2969,12 @@ function initAll() {
   initTimepicker();
   initPagination();
   initChip();
+  initTabVertical();
+  initTabHorizontal();
 }
 export {
   PREFIX,
   initAll,
+  setBrandTheme,
   showToast
 };

package/package.json

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