nve-designsystem 2.15.2 → 2.16.0

package/components/nve-stepper/nve-stepper-mobile.component.d.ts

@@ -6,8 +6,7 @@ export default class NveStepperMobile extends LitElement {
     steps: StepProps[];
     /** Skjuler Neste og Forrige knappene slik at du kan implementere dine egne Neste og Forrige knappene. */
     hideStepButtons: boolean;
-    private handleNextStep;
-    private handlePrevStep;
+    private handleStepClick;
     selectedStepIndex: {
         value: number;
     };

package/components/nve-stepper/nve-stepper-mobile.component.js

@@ -1,41 +1,44 @@
-import { a as c, x as l } from "../../chunks/lit-element.js";
-import { n as v, t as a } from "../../chunks/property.js";
+import { a, x as n } from "../../chunks/lit-element.js";
+import { n as v, t as o } from "../../chunks/property.js";
 import h from "./nve-stepper-mobile.styles.js";
-var u = Object.defineProperty, b = Object.getOwnPropertyDescriptor, d = (e, s, p, n) => {
-  for (var t = n > 1 ? void 0 : n ? b(s, p) : s, r = e.length - 1, o; r >= 0; r--)
-    (o = e[r]) && (t = (n ? o(s, p, t) : o(t)) || t);
-  return n && t && u(s, p, t), t;
+var u = Object.defineProperty, x = Object.getOwnPropertyDescriptor, r = (e, s, l, p) => {
+  for (var t = p > 1 ? void 0 : p ? x(s, l) : s, d = e.length - 1, c; d >= 0; d--)
+    (c = e[d]) && (t = (p ? c(s, l, t) : c(t)) || t);
+  return p && t && u(s, l, t), t;
 };
-let i = class extends c {
+let i = class extends a {
   constructor() {
     super(...arguments), this.steps = [], this.hideStepButtons = !1, this.selectedStepIndex = { value: 0 };
   }
-  handleNextStep() {
-    const e = new CustomEvent("next-step", {
-      bubbles: !0,
-      composed: !0
-    });
-    this.dispatchEvent(e);
-  }
-  handlePrevStep() {
-    const e = new CustomEvent("prev-step", {
-      bubbles: !0,
-      composed: !0
-    });
-    this.dispatchEvent(e);
+  handleStepClick(e) {
+    this.dispatchEvent(
+      new CustomEvent("step-click", {
+        detail: {
+          action: e,
+          currentIndex: this.selectedStepIndex.value,
+          step: this.steps[this.selectedStepIndex.value],
+          nextIndex: e === "next" ? this.selectedStepIndex.value + 1 : this.selectedStepIndex.value - 1,
+          nextStep: this.steps[e === "next" ? this.selectedStepIndex.value + 1 : this.selectedStepIndex.value - 1]
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
   }
   render() {
-    const e = this.steps[this.selectedStepIndex.value], s = this.steps[this.selectedStepIndex.value + 1], p = this.selectedStepIndex.value === this.steps.length - 1;
-    return l`
+    const e = this.steps[this.selectedStepIndex.value], s = this.steps[this.selectedStepIndex.value + 1], l = this.selectedStepIndex.value === this.steps.length - 1;
+    return n`
       <div class="mobile-stepper">
         <div class="progress-circle">${this.selectedStepIndex.value + 1} of ${this.steps.length}</div>
         <div class="step-info">
           <div class="step-label">${e.label}</div>
-          ${this.hideStepButtons ? "" : l` <div>
-                ${p ? l` <div class="step-buttons next-button" @click=${this.handleNextStep}>Finish</div>` : l` <div class="step-buttons next-button" @click=${this.handleNextStep}>
+          ${this.hideStepButtons ? "" : n` <div>
+                ${l ? n` <div class="step-buttons next-button" @click=${() => this.handleStepClick("next")}>
+                      Finish
+                    </div>` : n` <div class="step-buttons next-button" @click=${() => this.handleStepClick("next")}>
                       Neste: ${s.label}
                     </div>`}
-                <div class="step-buttons back-button" @click=${this.handlePrevStep}>Forrige</div>
+                <div class="step-buttons back-button" @click=${() => this.handleStepClick("prev")}>Forrige</div>
               </div>`}
         </div>
       </div>
@@ -43,14 +46,14 @@ let i = class extends c {
   }
 };
 i.styles = [h];
-d([
+r([
   v({ type: Array })
 ], i.prototype, "steps", 2);
-d([
+r([
   v({ type: Boolean })
 ], i.prototype, "hideStepButtons", 2);
-i = d([
-  a("nve-stepper-mobile")
+i = r([
+  o("nve-stepper-mobile")
 ], i);
 export {
   i as default

package/components/nve-stepper/nve-stepper.component.d.ts

@@ -75,10 +75,10 @@ export default class NveStepper extends LitElement {
     finishSteps(): void;
     /** Metode for å hente den gjeldende indeksen */
     getCurrentIndex(): number;
+    handleStepClick(step: StepProps, index: number): void;
     private setStep;
     private getExtremes;
-    private handleMobileNextStep;
-    private handleMobilePrevStep;
+    private handleMobileStepClick;
     private renderBackButton;
     private isOrientationVertical;
     private renderForwardButton;

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

@@ -1,17 +1,17 @@
-import { a as u, x as p } from "../../chunks/lit-element.js";
-import { n, t as c } from "../../chunks/property.js";
+import { a as c, x as o } from "../../chunks/lit-element.js";
+import { n, t as u } from "../../chunks/property.js";
 import { StepState as h } from "./nve-step/nve-step.component.js";
 import S from "./nve-stepper.styles.js";
 import "./nve-stepper-mobile.component.js";
-var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (e, t, a, o) => {
-  for (var r = o > 1 ? void 0 : o ? f(t, a) : t, d = e.length - 1, l; d >= 0; d--)
-    (l = e[d]) && (r = (o ? l(t, a, r) : l(r)) || r);
-  return o && r && v(t, a, r), r;
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (e, t, a, p) => {
+  for (var r = p > 1 ? void 0 : p ? f(t, a) : t, d = e.length - 1, l; d >= 0; d--)
+    (l = e[d]) && (r = (p ? l(t, a, r) : l(r)) || r);
+  return p && r && v(t, a, r), r;
 };
 function x() {
   return /Mobi|Android/i.test(navigator.userAgent);
 }
-let s = class extends u {
+let s = class extends c {
   constructor() {
     super(...arguments), this.orientation = "horizontal", this.endButtonText = "Sende", this.steps = [], this.hideStepButtons = !1, this.hideMobileStepButtons = !1, this.displayMobileVersion = !1, this.hideStateText = !1, this.hideDescriptions = !1, this.selectedStepIndex = { value: 0 };
   }
@@ -49,6 +49,15 @@ let s = class extends u {
   getCurrentIndex() {
     return this.selectedStepIndex.value;
   }
+  handleStepClick(e, t) {
+    this.dispatchEvent(
+      new CustomEvent("step-click", {
+        detail: { step: e, index: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
   setStep(e) {
     if (this.steps[e].readyForEntrance) {
       this.selectedStepIndex.value = e;
@@ -62,14 +71,12 @@ let s = class extends u {
     if (this.selectedStepIndex.value === this.steps.length - 1)
       return "end";
   }
-  handleMobileNextStep() {
-    this.selectedStepIndex.value < this.steps.length - 1 ? this.nextStep() : this.finishSteps();
-  }
-  handleMobilePrevStep() {
-    this.prevStep();
+  handleMobileStepClick(e) {
+    const t = e.detail?.action;
+    t === "next" ? this.selectedStepIndex.value < this.steps.length - 1 ? this.nextStep() : this.finishSteps() : t === "prev" && this.prevStep();
   }
   renderBackButton() {
-    return this.hideStepButtons ? "" : p`
+    return this.hideStepButtons ? "" : o`
           <nve-button
             .disabled=${this.getExtremes() === "start"}
             size="medium"
@@ -85,12 +92,12 @@ let s = class extends u {
     return this.orientation === "vertical";
   }
   renderForwardButton() {
-    return this.hideStepButtons ? "" : this.getExtremes() === "end" ? p`
+    return this.hideStepButtons ? "" : this.getExtremes() === "end" ? o`
         <nve-button size="medium" variant="primary" @click=${this.finishSteps}>
           <nve-icon slot="suffix" name="done"></nve-icon>
           ${this.endButtonText}
         </nve-button>
-      ` : p`
+      ` : o`
       <nve-button .disabled=${this.getExtremes() === "end"} size="medium" variant="primary" @click=${this.nextStep}>
         <nve-icon slot="suffix" name="navigate_next"></nve-icon>
         Neste
@@ -98,24 +105,23 @@ let s = class extends u {
     `;
   }
   renderVerticalButtons() {
-    return this.hideStepButtons ? "" : p` <div class="vertical-btn-container">${this.renderBackButton()} ${this.renderForwardButton()}</div> `;
+    return this.hideStepButtons ? "" : o` <div class="vertical-btn-container">${this.renderBackButton()} ${this.renderForwardButton()}</div> `;
   }
   /** Hoved render-metode */
   render() {
-    return x() || this.displayMobileVersion ? p`
+    return x() || this.displayMobileVersion ? o`
         <nve-stepper-mobile
           .steps=${this.steps}
           .selectedStepIndex=${this.selectedStepIndex}
           .hideStepButtons=${this.hideMobileStepButtons}
-          @next-step=${this.handleMobileNextStep}
-          @prev-step=${this.handleMobilePrevStep}
+          @step-click=${this.handleMobileStepClick}
         ></nve-stepper-mobile>
-      ` : p`
+      ` : o`
       <div class="stepper ${this.orientation}">
         ${this.isOrientationVertical() ? "" : this.renderBackButton()}
         <div class="steps-container ${this.orientation}  ${this.hideStepButtons ? "" : "steps-container-with-buttons"}">
           ${this.steps.map(
-      (e, t) => p`
+      (e, t) => o`
               <nve-step
                 .label=${e.label}
                 .description=${e.description}
@@ -128,6 +134,7 @@ let s = class extends u {
                 .orientation=${this.orientation}
                 .hideStateText=${this.hideStateText}
                 .hideDescriptions=${this.hideDescriptions}
+                @click=${() => this.handleStepClick(e, t)}
               >
               </nve-step>
             `
@@ -165,7 +172,7 @@ i([
   n({ type: Boolean })
 ], s.prototype, "hideDescriptions", 2);
 s = i([
-  c("nve-stepper")
+  u("nve-stepper")
 ], s);
 export {
   s as default