nve-designsystem 2.10.0 → 2.10.1

package/components/nve-tab/nve-tab.component.js

@@ -9,13 +9,13 @@ var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, r = (p, s, i
 };
 let v = 0, e = class extends d {
   constructor() {
-    super(), this.testId = void 0, this.panel = null, this.size = "large", this.background = !1, this.attrId = ++v, this.componentId = `nve-tab-${this.attrId}`, this.id = this.id.length > 0 ? this.id : this.componentId;
+    super(), this.testId = void 0, this.panel = null, this.size = "large", this.background = !1, this.attrId = ++v, this.componentId = `nve-tab-${this.attrId}`;
   }
   connectedCallback() {
     super.connectedCallback(), this.setAttribute("role", "tab");
   }
   render() {
-    return c`
+    return this.id = this.id.length > 0 ? this.id : this.componentId, c`
       <div
         part="base"
         class=${u({ tab: !0, "tab--large": this.size === "large", "tab--background": this.background })}

package/components/nve-tab-group/nve-tab-group.component.js

@@ -5,10 +5,10 @@ import y from "./nve-tab-group.styles.js";
 import "../nve-button/nve-button.component.js";
 import { e as v } from "../../chunks/class-map.js";
 import { o as m } from "../../chunks/if-defined.js";
-var k = Object.defineProperty, S = Object.getOwnPropertyDescriptor, c = (t, e, s, o) => {
-  for (var a = o > 1 ? void 0 : o ? S(e, s) : e, i = t.length - 1, r; i >= 0; i--)
-    (r = t[i]) && (a = (o ? r(e, s, a) : r(a)) || a);
-  return o && a && k(e, s, a), a;
+var k = Object.defineProperty, S = Object.getOwnPropertyDescriptor, c = (t, e, a, r) => {
+  for (var s = r > 1 ? void 0 : r ? S(e, a) : e, o = t.length - 1, i; o >= 0; o--)
+    (i = t[o]) && (s = (r ? i(e, a, s) : i(s)) || s);
+  return r && s && k(e, a, s), s;
 };
 let n = class extends w {
   constructor() {
@@ -37,12 +37,12 @@ let n = class extends w {
    * @param event Klikkeventet.
    */
   handleClick(t) {
-    const e = t.composedPath(), s = e.find(
-      (a) => a instanceof HTMLElement && a.tagName.toLowerCase() === "nve-tab"
+    const e = t.composedPath(), a = e.find(
+      (s) => s instanceof HTMLElement && s.tagName.toLowerCase() === "nve-tab"
     );
     e.find(
-      (a) => a instanceof HTMLElement && a.tagName.toLowerCase() === "nve-tab-group"
-    ) === this && s && s.panel && this.setActiveTab(s.panel);
+      (s) => s instanceof HTMLElement && s.tagName.toLowerCase() === "nve-tab-group"
+    ) === this && a && a.panel && this.setActiveTab(a.panel);
   }
   /**
    * @internal
@@ -51,15 +51,15 @@ let n = class extends w {
    * @param event Tastetrykk eventet.
    */
   handleKeyDown(t) {
-    const e = t.composedPath(), s = e.find((a) => a instanceof HTMLElement && a.closest && a.closest("nve-tab") === a) || null;
+    const e = t.composedPath(), a = e.find((s) => s instanceof HTMLElement && s.closest && s.closest("nve-tab") === s) || null;
     if (e.find(
-      (a) => a instanceof HTMLElement && a.tagName.toLowerCase() === "nve-tab-group"
-    ) === this && (["Enter", " "].includes(t.key) && s && s.panel && (this.setActiveTab(s.panel), t.preventDefault()), ["ArrowLeft", "ArrowRight", "Home", "End"].includes(t.key))) {
-      const a = this.tabs.find((d) => d === s);
-      if (!a) return;
-      const i = this.tabs.indexOf(a);
-      let r;
-      t.key === "ArrowLeft" && (r = i > 0 ? this.tabs[i - 1] : this.tabs[this.tabs.length - 1]), t.key === "ArrowRight" && (r = i < this.tabs.length - 1 ? this.tabs[i + 1] : this.tabs[0]), t.key === "Home" && (r = this.tabs[0]), t.key === "End" && (r = this.tabs[this.tabs.length - 1]), r && (r.focus(), t.preventDefault());
+      (s) => s instanceof HTMLElement && s.tagName.toLowerCase() === "nve-tab-group"
+    ) === this && (["Enter", " "].includes(t.key) && a && a.panel && (this.setActiveTab(a.panel), t.preventDefault()), ["ArrowLeft", "ArrowRight", "Home", "End"].includes(t.key))) {
+      const s = this.tabs.find((d) => d === a);
+      if (!s) return;
+      const o = this.tabs.indexOf(s);
+      let i;
+      t.key === "ArrowLeft" && (i = o > 0 ? this.tabs[o - 1] : this.tabs[this.tabs.length - 1]), t.key === "ArrowRight" && (i = o < this.tabs.length - 1 ? this.tabs[o + 1] : this.tabs[0]), t.key === "Home" && (i = this.tabs[0]), t.key === "End" && (i = this.tabs[this.tabs.length - 1]), i && (i.focus(), t.preventDefault());
     }
   }
   /**
@@ -68,7 +68,7 @@ let n = class extends w {
    */
   getPanels() {
     const t = this.shadowRoot?.querySelector("slot:not([name])");
-    return t ? t.assignedElements({ flatten: !0 }).filter((s) => s.tagName.toLowerCase() === "nve-tab-panel") : [];
+    return t ? t.assignedElements({ flatten: !0 }).filter((a) => a.tagName.toLowerCase() === "nve-tab-panel") : [];
   }
   /**
    * Henter alle faner i tab gruppen.
@@ -76,7 +76,7 @@ let n = class extends w {
    */
   getTabs() {
     const t = this.shadowRoot?.querySelector('slot[name="nav"]');
-    return t ? t.assignedElements({ flatten: !0 }).filter((s) => s.tagName.toLowerCase() === "nve-tab") : [];
+    return t ? t.assignedElements({ flatten: !0 }).filter((a) => a.tagName.toLowerCase() === "nve-tab") : [];
   }
   /** Setter aria-selected og tabindex på fanene. Kun aktiv fane skal bli fokusert. Gjemmer inaktive paneller.
    * Sender en nve-tab-change event med navnet på den aktive fanen.
@@ -95,9 +95,9 @@ let n = class extends w {
   }
   updateIndicator() {
     if (this.isBackground) return;
-    const t = this.shadowRoot?.querySelector(".tab-group__nav"), e = this.tabs.find((s) => s.getAttribute("aria-selected") === "true");
+    const t = this.shadowRoot?.querySelector(".tab-group__nav"), e = this.tabs.find((a) => a.getAttribute("aria-selected") === "true");
     if (t && e) {
-      const s = e.offsetLeft - t.offsetLeft - 25, o = e.offsetWidth;
+      const a = t.getBoundingClientRect(), s = e.getBoundingClientRect().left - a.left + t.scrollLeft, o = e.offsetWidth;
       t.style.setProperty("--indicator-x", `${s}px`), t.style.setProperty("--indicator-width", `${o}px`);
     }
   }
@@ -107,7 +107,7 @@ let n = class extends w {
    */
   setAriaLabels() {
     this.tabs.forEach((t) => {
-      const e = this.panels.find((s) => s.name === t.panel);
+      const e = this.panels.find((a) => a.name === t.panel);
       e && (t.setAttribute("aria-controls", e.id), e.setAttribute("aria-labelledby", t.id));
     });
   }
@@ -134,8 +134,8 @@ let n = class extends w {
     const e = this.shadowRoot?.querySelector(".tab-group__nav-button--forward")?.querySelector("nve-button");
     if (e) {
       await e.updateComplete;
-      const s = e.shadowRoot?.querySelector('[part="base"]');
-      s && s.setAttribute("tabindex", "-1");
+      const a = e.shadowRoot?.querySelector('[part="base"]');
+      a && a.setAttribute("tabindex", "-1");
     }
   }
   /**
@@ -145,8 +145,8 @@ let n = class extends w {
     const e = this.shadowRoot?.querySelector(".tab-group__nav-button--backward")?.querySelector("nve-button");
     if (e) {
       await e.updateComplete;
-      const s = e.shadowRoot?.querySelector('[part="base"]');
-      s && s.setAttribute("tabindex", "-1");
+      const a = e.shadowRoot?.querySelector('[part="base"]');
+      a && a.setAttribute("tabindex", "-1");
     }
   }
   /**
@@ -173,10 +173,10 @@ let n = class extends w {
   scrollNavForward() {
     const t = this.shadowRoot?.querySelector(".tab-group__nav");
     if (!t || !this.tabs.length) return;
-    const e = t.scrollLeft, s = t.clientWidth, o = e + s;
-    for (let a of this.tabs)
-      if (a.offsetLeft + a.offsetWidth > o) {
-        const u = this.tabs[this.tabs.indexOf(a) - 1], p = u ? u.offsetLeft : 0;
+    const e = t.scrollLeft, a = t.clientWidth, r = e + a;
+    for (let s of this.tabs)
+      if (s.offsetLeft + s.offsetWidth > r) {
+        const u = this.tabs[this.tabs.indexOf(s) - 1], p = u ? u.offsetLeft : 0;
         t.scrollTo({
           left: p - this.buttonContainerWidth,
           behavior: "smooth"
@@ -190,12 +190,12 @@ let n = class extends w {
   scrollNavBackward() {
     const t = this.shadowRoot?.querySelector(".tab-group__nav");
     if (!t || !this.tabs.length) return;
-    const e = t.clientWidth, s = t.scrollLeft;
-    for (let o of this.tabs) {
-      const a = o.offsetLeft, i = a + o.offsetWidth;
-      if (a > s) {
+    const e = t.clientWidth, a = t.scrollLeft;
+    for (let r of this.tabs) {
+      const s = r.offsetLeft, o = s + r.offsetWidth;
+      if (s > a) {
         t.scrollTo({
-          left: i - e + this.buttonContainerWidth,
+          left: o - e + this.buttonContainerWidth,
           behavior: "smooth"
         });
         return;

package/components/nve-tab-panel/nve-tab-panel.component.js

@@ -8,13 +8,13 @@ var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, l = (o, s, n
 };
 let f = 0, e = class extends d {
   constructor() {
-    super(), this.testId = void 0, this.name = null, this.attrId = ++f, this.componentId = `nve-panel-${this.attrId}`, this.id = this.id.length > 0 ? this.id : this.componentId;
+    super(), this.testId = void 0, this.name = null, this.attrId = ++f, this.componentId = `nve-panel-${this.attrId}`;
   }
   connectedCallback() {
     super.connectedCallback(), this.setAttribute("role", "tabpanel"), this.name && this.setAttribute("name", this.name);
   }
   render() {
-    return h`<div class="tab-panel" part="base">
+    return this.id = this.id.length > 0 ? this.id : this.componentId, h`<div class="tab-panel" part="base">
       <slot></slot>
     </div> `;
   }

package/custom-elements.json

@@ -5388,10 +5388,6 @@
             {
               "kind": "method",
               "name": "render"
-            },
-            {
-              "kind": "field",
-              "name": "id"
             }
           ],
           "attributes": [
@@ -5755,10 +5751,6 @@
             {
               "kind": "method",
               "name": "render"
-            },
-            {
-              "kind": "field",
-              "name": "id"
             }
           ],
           "attributes": [
@@ -7173,7 +7165,7 @@
   "package": {
     "name": "nve-designsystem",
     "description": "Designsystem for NVE",
-    "version": "2.9.1",
+    "version": "2.10.0",
     "author": {
       "name": "NVE",
       "email": "nve@nve.no"

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "MIT",
   "homepage": "https://github.com/NVE/Designsystem/",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "customElements": "custom-elements.json",
   "exports": {
     ".": {