wj-elements 0.1.50 → 0.1.51

package/dist/wje-tab-group.js

@@ -1,9 +1,9 @@
 var u = Object.defineProperty;
 var m = (a, e, t) => e in a ? u(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
-var v = (a, e, t) => (m(a, typeof e != "symbol" ? e + "" : e, t), t);
+var b = (a, e, t) => (m(a, typeof e != "symbol" ? e + "" : e, t), t);
 import h from "./wje-element.js";
 const g = ":host{--wje-tab-top: 0;--wje-tab-start: 0;--wje-tab-end: 0;--wje-tab-bottom: 0}.native-tab-group{display:flex;flex-direction:column;overflow:hidden;position:relative}.native-tab-group>header{display:flex;flex-direction:column}.native-tab-group>header>nav{display:flex}.native-tab-group>section{width:100%}.native-tab-group>section>article{scroll-snap-align:start;overflow-y:auto;overscroll-behavior-y:contain}:host([variant=top]){--wje-tab-top: auto !important;--wje-tab-writing-mode: horizontal-tb}:host([variant=top]) .native-tab-group{flex-direction:column}:host([variant=top]) nav{border-bottom:1px solid var(--wje-border-color)}:host([variant=start]){--wje-tab-start: auto !important;--wje-tab-writing-mode: vertical-rl}:host([variant=start]) .native-tab-group{flex-direction:row}:host([variant=start]) nav{flex-direction:column;border-right:1px solid var(--wje-border-color)}:host([variant=end]){--wje-tab-writing-mode: vertical-rl}:host([variant=end]) .native-tab-group{flex-direction:row-reverse}:host([variant=end]) nav{flex-direction:column;border-left:1px solid var(--wje-border-color)}:host([variant=bottom]){--wje-tab-bottom: auto !important;--wje-tab-writing-mode: horizontal-tb}:host([variant=bottom]) .native-tab-group{flex-direction:column-reverse}:host([variant=bottom]) nav{border-top:1px solid var(--wje-border-color)}";
-class b extends h {
+class v extends h {
   /**
    * Creates an instance of TabGroup.
    *
@@ -11,7 +11,7 @@ class b extends h {
    */
   constructor() {
     super();
-    v(this, "className", "TabGroup");
+    b(this, "className", "TabGroup");
   }
   /**
    * Returns the CSS styles for the component.
@@ -28,6 +28,17 @@ class b extends h {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
+  /**
+   * Sets up the event listeners before the component is drawn.
+   * This method is called before the component is drawn.
+   * It is used to set up event listeners.
+   */
+  beforeDraw() {
+    let t = location.hash.replace("#", "");
+    this.getPanelAllName().includes(t) && window.addEventListener("load", (i) => {
+      this.setActiveTab(t);
+    });
+  }
   /**
    * Draws the component.
    *
@@ -36,25 +47,25 @@ class b extends h {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(t, l, i) {
+  draw(t, i, n) {
     let s = document.createDocumentFragment(), r = document.createElement("div");
     r.setAttribute("part", "native"), r.classList.add("native-tab-group");
     let o = document.createElement("header");
     o.setAttribute("part", "tabs"), o.classList.add("scroll-snap-x");
-    let c = document.createElement("nav"), n = document.createElement("section");
-    n.setAttribute("part", "panels");
+    let c = document.createElement("nav"), l = document.createElement("section");
+    l.setAttribute("part", "panels");
     let p = document.createElement("slot"), d = document.createElement("slot");
-    return d.setAttribute("name", "nav"), o.appendChild(c), c.appendChild(d), n.appendChild(p), r.appendChild(o), r.appendChild(n), s.appendChild(r), s;
+    return d.setAttribute("name", "nav"), o.appendChild(c), c.appendChild(d), l.appendChild(p), r.appendChild(o), r.appendChild(l), s.appendChild(r), s;
   }
   /**
    * Sets up the event listeners after the component is drawn.
    */
   afterDraw() {
-    let t = this.getActiveTab(), l = t ? t[0].name : this.getTabAll()[0].panel;
-    this.setActiveTab(l), this.addEventListener("wje:tab-change", (i) => {
-      if (i.detail.context.hasAttribute("disabled"))
+    let t = this.getActiveTab(), i = t ? t[0].name : this.getTabAll()[0].panel;
+    this.setActiveTab(i), this.addEventListener("wje-tab:change", (n) => {
+      if (n.detail.context.hasAttribute("disabled"))
         return !1;
-      this.setActiveTab(i.detail.context.panel);
+      this.setActiveTab(n.detail.context.panel);
     });
   }
   /**
@@ -100,8 +111,16 @@ class b extends h {
   getPanelAll() {
     return Array.from(this.querySelectorAll("wje-tab-panel"));
   }
+  /**
+   * Returns the names of all tabs.
+   *
+   * @returns {Array<string>} An array of all tab names.
+   */
+  getPanelAllName() {
+    return this.getPanelAll().map((t) => t.getAttribute("name"));
+  }
 }
-b.define("wje-tab-group", b);
+v.define("wje-tab-group", v);
 export {
-  b as default
+  v as default
 };

package/dist/wje-tab.js

@@ -50,7 +50,7 @@ class i extends b {
    * Sets up the event listeners after the component is drawn.
    */
   afterDraw() {
-    c.addListener(this, "click", "wje:tab-change");
+    c.addListener(this, "click", "wje-tab:change");
   }
 }
 i.define("wje-tab", i);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.50",
+  "version": "0.1.51",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",