nve-designsystem 0.1.84 → 0.1.85

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

@@ -3,8 +3,9 @@ import { CSSResultArray, LitElement, TemplateResult } from 'lit';
 export declare enum StepState {
     NotStarted = 0,
     Started = 1,
-    Done = 2,
-    Error = 3
+    Active = 2,
+    Done = 3,
+    Error = 4
 }
 /** Interface for å definere egenskapene til et steg */
 export interface StepProps {
@@ -13,15 +14,12 @@ export interface StepProps {
     state: StepState;
     isSelected: boolean;
     readyForEntrance: boolean;
-    disableClick?: boolean;
     orientation?: string;
 }
 /** Komponent for et enkelt steg i en stepper */
 export default class NveStep extends LitElement {
     /** Tittel på steget */
     title: string;
-    /** Avstand mellom stegene */
-    spaceBetweenSteps: number;
     /** Indeks for steget */
     index: number;
     /** Beskrivelse av steget */
@@ -39,8 +37,6 @@ export default class NveStep extends LitElement {
     isLast: boolean;
     /** Angir om det er tillatt å gå inn i steget */
     entranceAllowed: boolean;
-    /** Deaktiverer muligheten til å klikke på steget for å velge det */
-    disableClick: boolean;
     /** Retningen stegene skal gå i: horisontal eller vertikal */
     orientation: 'horizontal' | 'vertical';
     /** Brukes for å justere høyden for den vertikale skilleveggen blir så høy som nær Step har en description. */
@@ -51,48 +47,17 @@ export default class NveStep extends LitElement {
     updated(): void;
     /** Definerer stilene som brukes av komponenten */
     static styles: CSSResultArray;
-    /** Sjekker om orienteringen er vertikal */
-    isOrientationVertical(): boolean;
-    /**
-     * Returnerer ikonet for den gitte stegetilstanden
-     * @param state - Stegets tilstand
-     */
-    iconForState(state: StepState): string;
-    /**
-     * Returnerer teksten for den gitte stegetilstanden
-     * @param state - Stegets tilstand
-     */
-    getStateText(state: StepState): string;
-    /**
-     * Returnerer CSS-klassen for fargen til den gitte stegetilstanden
-     * @param state - Stegets tilstand
-     */
-    getStateColorClass(state: StepState): string;
-    /**
-     * Returnerer CSS-klassen for tittelen til den gitte stegetilstanden
-     * @param state - Stegets tilstand
-     */
-    getTitleClass(state: StepState): string;
-    /**
-     * Returnerer CSS-klassen for ikonet til den gitte stegetilstanden
-     * @param state - Stegets tilstand
-     */
-    getIconClass(state: StepState): string;
-    /** Returnerer CSS-klassen for om steget er klikkbart */
-    getIsClickableClass(): string;
-    /** Returnerer CSS-klassen for fargen til divideren */
-    getDividerColorClass(): string;
-    /** Håndterer klikk på steget */
-    onClick(): void;
-    /** Brukes for beregning av riktig høyde før divider. Description elementet har padding, så høyden før divider var for kort, så bruk denne funksjonen for regner ut riktig høyde. */
-    updateVerticalDividerHeight(): void;
-    /** Render divideren mellom stegene */
-    renderDivider(): TemplateResult | string;
-    /** Render beskrivelsen av steget */
-    renderDescription(): TemplateResult | string;
-    /** Render vertikalt steg */
-    renderVerticalStep(): TemplateResult;
-    /** Render metoden for komponenten */
+    private isOrientationVertical;
+    private iconForState;
+    private getStateText;
+    private getStateColorClass;
+    private getTitleClass;
+    private getIconClass;
+    private getDividerColorClass;
+    private renderDivider;
+    private renderDescription;
+    private isDescriptionValid;
+    private renderVerticalStep;
     render(): TemplateResult;
 }
 declare global {

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

@@ -1,15 +1,15 @@
-import { s as h, x as c } from "../../../chunks/lit-element.js";
-import { n as r, t as p } from "../../../chunks/property.js";
+import { s as p, x as n } from "../../../chunks/lit-element.js";
+import { n as s, t as h } from "../../../chunks/property.js";
 import { e as v } from "../../../chunks/query.js";
 import u from "./nve-step.styles.js";
-var f = Object.defineProperty, C = Object.getOwnPropertyDescriptor, s = (t, i, o, l) => {
-  for (var a = l > 1 ? void 0 : l ? C(i, o) : i, n = t.length - 1, d; n >= 0; n--)
-    (d = t[n]) && (a = (l ? d(i, o, a) : d(a)) || a);
-  return l && a && f(i, o, a), a;
-}, y = /* @__PURE__ */ ((t) => (t[t.NotStarted = 0] = "NotStarted", t[t.Started = 1] = "Started", t[t.Done = 2] = "Done", t[t.Error = 3] = "Error", t))(y || {});
-let e = class extends h {
+var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (t, r, c, a) => {
+  for (var o = a > 1 ? void 0 : a ? y(r, c) : r, l = t.length - 1, d; l >= 0; l--)
+    (d = t[l]) && (o = (a ? d(r, c, o) : d(o)) || o);
+  return a && o && f(r, c, o), o;
+}, g = /* @__PURE__ */ ((t) => (t[t.NotStarted = 0] = "NotStarted", t[t.Started = 1] = "Started", t[t.Active = 2] = "Active", t[t.Done = 3] = "Done", t[t.Error = 4] = "Error", t))(g || {});
+let e = class extends p {
   constructor() {
-    super(...arguments), this.title = "", this.spaceBetweenSteps = 200, this.index = 0, this.description = "", this.state = 0, this.selectedStepIndex = 0, this.isSelected = !1, this.isLast = !1, this.entranceAllowed = !1, this.disableClick = !1, this.orientation = "horizontal";
+    super(...arguments), this.title = "", this.index = 0, this.description = "", this.state = 0, this.selectedStepIndex = 0, this.isSelected = !1, this.isLast = !1, this.entranceAllowed = !1, this.orientation = "horizontal";
   }
   /** Metode som kjøres første gang komponenten er lagt til i DOM */
   firstUpdated() {
@@ -17,143 +17,111 @@ let e = class extends h {
   }
   /** Metode som kjøres hver gang komponentens oppdateres */
   updated() {
-    this.isOrientationVertical() && this.updateVerticalDividerHeight(), this.style.setProperty("line-color", this.isLast ? "0" : "1");
+    this.style.setProperty("line-color", this.isLast ? "0" : "1");
   }
-  /** Sjekker om orienteringen er vertikal */
   isOrientationVertical() {
     return this.orientation === "vertical";
   }
-  /**
-   * Returnerer ikonet for den gitte stegetilstanden
-   * @param state - Stegets tilstand
-   */
   iconForState(t) {
-    let i = "";
+    let r = "";
     switch (t) {
       case 0:
-        i = "circle";
-        break;
-      case 1:
-        i = "trip_origin";
+        r = "circle";
         break;
       case 2:
-        i = "check_circle";
+        r = "radio_button_checked";
+        break;
+      case 1:
+        r = "trip_origin";
         break;
       case 3:
-        i = "error";
+        r = "check_circle";
+        break;
+      case 4:
+        r = "error";
         break;
       default:
-        i = "check_circle";
+        r = "check_circle";
         break;
     }
-    return i;
+    return r;
   }
-  /**
-   * Returnerer teksten for den gitte stegetilstanden
-   * @param state - Stegets tilstand
-   */
   getStateText(t) {
     switch (t) {
       case 0:
         return "Ikke påbegynt";
-      case 1:
-        return "Aktiv";
       case 2:
-        return "Fullført";
+        return "Aktiv";
+      case 1:
+        return "Påbegynt";
       case 3:
+        return "Fullført";
+      case 4:
         return "Feil";
       default:
         return "Ikke påbegynt";
     }
   }
-  /**
-   * Returnerer CSS-klassen for fargen til den gitte stegetilstanden
-   * @param state - Stegets tilstand
-   */
   getStateColorClass(t) {
     switch (t) {
       case 0:
         return "state-not-started-color";
-      case 1:
-        return "state-started-color";
       case 2:
-        return "state-done-color";
+        return "state-started-color";
       case 3:
+        return "state-done-color";
+      case 4:
         return "state-error-color";
       default:
         return "state-not-started-color";
     }
   }
-  /**
-   * Returnerer CSS-klassen for tittelen til den gitte stegetilstanden
-   * @param state - Stegets tilstand
-   */
   getTitleClass(t) {
     switch (t) {
       case 0:
         return "state-not-started-color";
-      case 3:
+      case 4:
         return "state-error-color";
       default:
         return "";
     }
   }
-  /**
-   * Returnerer CSS-klassen for ikonet til den gitte stegetilstanden
-   * @param state - Stegets tilstand
-   */
   getIconClass(t) {
     switch (t) {
       case 1:
         return "";
       case 0:
         return "state-not-started-icon-color filled-icon";
-      case 3:
+      case 4:
         return "state-error-color filled-icon";
       default:
         return "filled-icon";
     }
   }
-  /** Returnerer CSS-klassen for om steget er klikkbart */
-  getIsClickableClass() {
-    return this.disableClick ? "disable-click" : "clickable";
-  }
-  /** Returnerer CSS-klassen for fargen til divideren */
   getDividerColorClass() {
     return this.index < this.selectedStepIndex ? "divider-reached-color" : "divider-not-reached-color";
   }
-  /** Håndterer klikk på steget */
-  onClick() {
-    this.disableClick || this.dispatchEvent(new CustomEvent("clicked", { detail: { index: this.index } }));
-  }
-  /** Brukes for beregning av riktig høyde før divider. Description elementet har padding, så høyden før divider var for kort, så bruk denne funksjonen for regner ut riktig høyde. */
-  updateVerticalDividerHeight() {
-    const i = this.descriptionElement.offsetHeight + 24, o = this.shadowRoot.querySelector(".vertical-divider-container .divider-vertical");
-    o && (o.style.height = `${i}px`);
-  }
-  /** Render divideren mellom stegene */
   renderDivider() {
     const t = this.isOrientationVertical() ? "divider-vertical" : "divider-horizontal";
-    return this.isLast ? "" : c`
+    return this.isLast ? "" : n`
           <div class="vertical-divider-container">
           <div
-          style="${this.isOrientationVertical() ? `height:${this.spaceBetweenSteps}px` : ""}"
           class="${t} ${this.getDividerColorClass()}"
         ></div>
         </div>`;
   }
-  /** Render beskrivelsen av steget */
   renderDescription() {
-    return this.description ? c`<div class="step-description ${this.orientation === "vertical" ? "step-description-max-width-vertical" : "step-description-max-width-horizontal"}">${this.description}</div>` : "";
+    return this.isDescriptionValid(this.description) ? n`<div class="step-description ${this.orientation === "vertical" ? "step-description-max-width-vertical" : "step-description-max-width-horizontal"}">${this.description}</div>` : "";
+  }
+  isDescriptionValid(t) {
+    return t.trim().length > 0;
   }
-  /** Render vertikalt steg */
   renderVerticalStep() {
-    return c`
+    return n`
       <div class="vertical-container">
         <div class="step-figure-vertical">
           <div
-            @click="${this.onClick}"
-            class="${this.getIsClickableClass()} ${this.getIconClass(this.state)}"
+            class=" ${this.getIconClass(this.state)}"
           >
             <nve-icon slot="suffix" name="${this.iconForState(this.state)}"></nve-icon>
           </div>
@@ -171,13 +139,11 @@ let e = class extends h {
       </div>
     `;
   }
-  /** Render metoden for komponenten */
   render() {
-    return this.isOrientationVertical() ? this.renderVerticalStep() : c`
+    return this.isOrientationVertical() ? this.renderVerticalStep() : n`
         <div class="step-figure">
           <span
-            @click="${this.onClick}"
-            class="${this.getIsClickableClass()} ${this.getIconClass(this.state)}"
+            class=" ${this.getIconClass(this.state)}"
           >
             <nve-icon  slot="suffix" name="${this.iconForState(this.state)}"></nve-icon>
           </span>
@@ -194,46 +160,40 @@ let e = class extends h {
   }
 };
 e.styles = [u];
-s([
-  r({ reflect: !0 })
+i([
+  s({ reflect: !0 })
 ], e.prototype, "title", 2);
-s([
-  r({ type: Number })
-], e.prototype, "spaceBetweenSteps", 2);
-s([
-  r({ type: Number })
+i([
+  s({ type: Number })
 ], e.prototype, "index", 2);
-s([
-  r({ type: String })
+i([
+  s({ type: String })
 ], e.prototype, "description", 2);
-s([
-  r({ type: Number })
+i([
+  s({ type: Number })
 ], e.prototype, "state", 2);
-s([
-  r({ type: Number })
+i([
+  s({ type: Number })
 ], e.prototype, "selectedStepIndex", 2);
-s([
-  r({ type: Boolean, reflect: !0 })
+i([
+  s({ type: Boolean, reflect: !0 })
 ], e.prototype, "isSelected", 2);
-s([
-  r({ type: Boolean })
+i([
+  s({ type: Boolean })
 ], e.prototype, "isLast", 2);
-s([
-  r({ type: Boolean })
+i([
+  s({ type: Boolean })
 ], e.prototype, "entranceAllowed", 2);
-s([
-  r({ type: Boolean })
-], e.prototype, "disableClick", 2);
-s([
-  r()
+i([
+  s()
 ], e.prototype, "orientation", 2);
-s([
+i([
   v(".step-description")
 ], e.prototype, "descriptionElement", 2);
-e = s([
-  p("nve-step")
+e = i([
+  h("nve-step")
 ], e);
 export {
-  y as StepState,
+  g as StepState,
   e as default
 };

package/components/nve-stepper/nve-step/nve-step.styles.js

@@ -116,6 +116,7 @@ const r = e`
   display: flex;
   align-items: flex-start;
   width: 100%;
+  height: 100%;
 }
 
 .divider-horizontal {
@@ -128,6 +129,7 @@ const r = e`
   width: 2px;
   flex-grow: 1;
   width: 100%;
+  height: 100%;
 }
 
 .step-figure-vertical { 
@@ -137,6 +139,7 @@ const r = e`
   align-items: center;
   width: 100%;
   flex:1;
+  height: 100%;
 }  
 
 .vertical-divider-container {

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

@@ -4,14 +4,13 @@ export default class NveStepperMobile extends LitElement {
     static styles: CSSResultArray;
     /** Steps som skal vises, se StepProps interface for data som skal sendes inn. */
     steps: StepProps[];
-    /** Indeks for valgt steg, gir mulighet for å styre hvilket steg som er valgt. */
-    selectedStepIndex: {
-        value: number;
-    };
     /** Skjuler Neste og Forrige knappene slik at du kan implementere dine egne Neste og Forrige knappene. */
     hideStepButtons: boolean;
     private handleNextStep;
     private handlePrevStep;
+    selectedStepIndex: {
+        value: number;
+    };
     render(): TemplateResult;
 }
 declare global {

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

@@ -1,14 +1,14 @@
-import { s as v, x as l } from "../../chunks/lit-element.js";
-import { n as c, t as h } from "../../chunks/property.js";
+import { s as c, x as l } from "../../chunks/lit-element.js";
+import { n as v, t as h } from "../../chunks/property.js";
 import u from "./nve-stepper-mobile.styles.js";
-var a = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (e, s, i, n) => {
-  for (var t = n > 1 ? void 0 : n ? b(s, i) : s, r = e.length - 1, d; r >= 0; r--)
-    (d = e[r]) && (t = (n ? d(s, i, t) : d(t)) || t);
-  return n && t && a(s, i, t), t;
+var a = 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 && a(s, p, t), t;
 };
-let p = class extends v {
+let i = class extends c {
   constructor() {
-    super(...arguments), this.steps = [], this.selectedStepIndex = { value: 0 }, this.hideStepButtons = !1;
+    super(...arguments), this.steps = [], this.hideStepButtons = !1, this.selectedStepIndex = { value: 0 };
   }
   handleNextStep() {
     const e = new CustomEvent("next-step", {
@@ -25,7 +25,7 @@ let p = class extends v {
     this.dispatchEvent(e);
   }
   render() {
-    const e = this.steps[this.selectedStepIndex.value], s = this.steps[this.selectedStepIndex.value + 1], i = this.selectedStepIndex.value === this.steps.length - 1;
+    const e = this.steps[this.selectedStepIndex.value], s = this.steps[this.selectedStepIndex.value + 1], p = this.selectedStepIndex.value === this.steps.length - 1;
     return l`
       <div class="mobile-stepper">
         <div class="progress-circle">
@@ -35,7 +35,7 @@ let p = class extends v {
           <div class="step-title">${e.title}</div>
           ${this.hideStepButtons ? "" : l`
                 <div>
-                  ${i ? l`
+                  ${p ? l`
                         <div class="step-buttons next-button" @click=${this.handleNextStep}>
                           Finish
                         </div>` : l`
@@ -51,19 +51,16 @@ let p = class extends v {
     `;
   }
 };
-p.styles = [u];
-o([
-  c({ type: Array })
-], p.prototype, "steps", 2);
-o([
-  c({ type: Object })
-], p.prototype, "selectedStepIndex", 2);
-o([
-  c({ type: Boolean })
-], p.prototype, "hideStepButtons", 2);
-p = o([
+i.styles = [u];
+d([
+  v({ type: Array })
+], i.prototype, "steps", 2);
+d([
+  v({ type: Boolean })
+], i.prototype, "hideStepButtons", 2);
+i = d([
   h("nve-stepper-mobile")
-], p);
+], i);
 export {
-  p as default
+  i as default
 };

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

@@ -6,8 +6,8 @@ export interface INveStepper {
     nextStep?(): void;
     /** Går til forrige steg */
     prevStep?(): void;
-    /** Velger et spesifikt steg basert på event */
-    selectStep?(event: CustomEvent): void;
+    /** Velger et spesifikt steg */
+    selectStep?(index: number): void;
     /** Fullfører alle stegene */
     finishSteps(): void;
     /** Henter indeksen for gjeldende steg */
@@ -16,18 +16,10 @@ export interface INveStepper {
     reRender?(): void;
     /** Hvilken retning Steps skal gå. */
     orientation?: 'horizontal' | 'vertical';
-    /** Indeks for valgt steg, gir mulighet for å styre hvilket steg som er valgt. */
-    selectedStepIndex?: {
-        value: number;
-    };
-    /** Avstand mellom Steps */
-    spaceBetweenSteps?: number;
     /** Mulighet om å endre teksten på knapp ved siste steg. */
-    optionalEndButton?: string;
+    endButtonText?: string;
     /** Steps som skal vises, se StepProps interface for data som skal sendes inn. */
     steps: StepProps[];
-    /** Deaktiverer muligheten til å klikke på en Step komponenten slik at den blir valgt. */
-    disableStepClick?: boolean;
     /** Skjuler Neste og Forrige knappene slik at du kan implementere dine egne Neste og Forrige knappene. */
     hideStepButtons?: boolean;
     /** Skjuler Neste og Forrige knappene på mobilversjonen. */
@@ -45,24 +37,17 @@ export default class NveStepper extends LitElement {
     static styles: CSSResultArray;
     /** Hvilken retning Steps skal gå. */
     orientation: 'horizontal' | 'vertical';
-    /** Indeks for valgt steg, gir mulighet for å styre hvilket steg som er valgt. */
-    selectedStepIndex: {
-        value: number;
-    };
-    /** Avstand mellom Steps */
-    spaceBetweenSteps: number;
     /** Mulighet om å endre teksten på knapp ved siste steg. */
-    optionalEndButton: string;
+    endButtonText: string;
     /** Steps som skal vises, se StepProps interface for data som skal sendes inn. */
     steps: StepProps[];
-    /** Deaktiverer muligheten til å klikke på en Step komponenten slik at den blir valgt. */
-    disableStepClick: boolean;
     /** Skjuler Neste og Forrige knappene slik at du kan implementere dine egne Neste og Forrige knappene. */
     hideStepButtons: boolean;
     /** Skjuler Neste og Forrige knappene på mobilversjonen. */
     hideMobileStepButtons: boolean;
     /** Viser mobilversjonen av Stepper. */
     displayMobileVersion: boolean;
+    private selectedStepIndex;
     /**
      * Ved endring av props, re-render komponenten eksternt med document.querySelector("nve-stepper")?.reRender();
      * Dette er nyttig når du vil tvinge en oppdatering av komponenten uten å endre dens interne state.
@@ -77,27 +62,19 @@ export default class NveStepper extends LitElement {
     /** Metode for å gå til forrige steg */
     prevStep(): void;
     /** Metode for å velge et spesifikt steg */
-    selectStep(event: CustomEvent): void;
+    selectStep(index: number): void;
     /** Metode som kjøres når alle stegene er fullført */
     finishSteps(): void;
-    /** Metode for å sette et spesifikt steg */
-    setStep(index: number): void;
     /** Metode for å hente den gjeldende indeksen */
     getCurrentIndex(): number;
-    /** Metode for å sjekke om vi er på start eller slutten av Steps */
-    getExtremes(): string | undefined;
-    /** Metode for å håndtere neste steg på mobil */
-    handleMobileNextStep(): void;
-    /** Metode for å håndtere forrige steg på mobil */
-    handleMobilePrevStep(): void;
-    /** Metode for å render tilbakeknappen */
-    renderBackButton(): TemplateResult | string;
-    /** Metode for å sjekke om orienteringen er vertikal */
-    isOrientationVertical(): boolean;
-    /** Metode for å render fremoverknappen */
-    renderForwardButton(): TemplateResult | string;
-    /** Metode for å render knapper i vertikal orientering */
-    renderVerticalButtons(): TemplateResult | string;
+    private setStep;
+    private getExtremes;
+    private handleMobileNextStep;
+    private handleMobilePrevStep;
+    private renderBackButton;
+    private isOrientationVertical;
+    private renderForwardButton;
+    private renderVerticalButtons;
     /** Hoved render-metode */
     render(): TemplateResult;
 }

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

@@ -1,19 +1,19 @@
-import { s as c, x as p } from "../../chunks/lit-element.js";
-import { n, t as u } from "../../chunks/property.js";
-import { StepState as a } from "./nve-step/nve-step.component.js";
+import { s as u, x as n } from "../../chunks/lit-element.js";
+import { n as p, t as c } 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, d, o) => {
-  for (var r = o > 1 ? void 0 : o ? f(t, d) : t, l = e.length - 1, h; l >= 0; l--)
-    (h = e[l]) && (r = (o ? h(t, d, r) : h(r)) || r);
-  return o && r && v(t, d, r), r;
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (e, t, a, o) => {
+  for (var i = o > 1 ? void 0 : o ? f(t, a) : t, d = e.length - 1, l; d >= 0; d--)
+    (l = e[d]) && (i = (o ? l(t, a, i) : l(i)) || i);
+  return o && i && v(t, a, i), i;
 };
 function x() {
   return /Mobi|Android/i.test(navigator.userAgent);
 }
-let s = class extends c {
+let s = class extends u {
   constructor() {
-    super(...arguments), this.orientation = "horizontal", this.selectedStepIndex = { value: 0 }, this.spaceBetweenSteps = 200, this.optionalEndButton = "Sende", this.steps = [], this.disableStepClick = !0, this.hideStepButtons = !1, this.hideMobileStepButtons = !1, this.displayMobileVersion = !1;
+    super(...arguments), this.orientation = "horizontal", this.endButtonText = "Sende", this.steps = [], this.hideStepButtons = !1, this.hideMobileStepButtons = !1, this.displayMobileVersion = !1, this.selectedStepIndex = { value: 0 };
   }
   /**
    * Ved endring av props, re-render komponenten eksternt med document.querySelector("nve-stepper")?.reRender();
@@ -40,41 +40,36 @@ let s = class extends c {
   }
   /** Metode for å velge et spesifikt steg */
   selectStep(e) {
-    e.detail.index > 0 && this.steps[e.detail.index - 1].state == a.NotStarted || this.setStep(e.detail.index);
+    this.setStep(e);
   }
   /** Metode som kjøres når alle stegene er fullført */
   finishSteps() {
   }
-  /** Metode for å sette et spesifikt steg */
+  /** Metode for å hente den gjeldende indeksen */
+  getCurrentIndex() {
+    return this.selectedStepIndex.value;
+  }
   setStep(e) {
-    if (this.selectedStepIndex.value < e && this.steps[this.selectedStepIndex.value].state === a.Started && (this.steps[this.selectedStepIndex.value].state = a.Done), this.steps[e].readyForEntrance) {
+    if (this.steps[e].readyForEntrance) {
       this.selectedStepIndex.value = e;
       for (let t = 0; t < this.steps.length; t++)
-        this.steps[t].isSelected = t === e, t === e && (this.steps[t].state = a.Started);
+        t < e ? this.steps[t].state = h.Done : t === e ? this.steps[t].state = h.Active : this.steps[t].state !== h.NotStarted && (this.steps[t].state = h.Started), this.steps[t].isSelected = t === e;
       this.steps = [...this.steps];
     }
   }
-  /** Metode for å hente den gjeldende indeksen */
-  getCurrentIndex() {
-    return this.selectedStepIndex.value;
-  }
-  /** Metode for å sjekke om vi er på start eller slutten av Steps */
   getExtremes() {
     if (this.selectedStepIndex.value === 0) return "start";
     if (this.selectedStepIndex.value === this.steps.length - 1)
       return "end";
   }
-  /** Metode for å håndtere neste steg på mobil */
   handleMobileNextStep() {
     this.selectedStepIndex.value < this.steps.length - 1 ? this.nextStep() : this.finishSteps();
   }
-  /** Metode for å håndtere forrige steg på mobil */
   handleMobilePrevStep() {
     this.prevStep();
   }
-  /** Metode for å render tilbakeknappen */
   renderBackButton() {
-    return this.hideStepButtons ? "" : p`
+    return this.hideStepButtons ? "" : n`
       <nve-button
         .disabled=${this.getExtremes() === "start"}
         size="medium"
@@ -86,22 +81,20 @@ let s = class extends c {
       </nve-button>
     `;
   }
-  /** Metode for å sjekke om orienteringen er vertikal */
   isOrientationVertical() {
     return this.orientation === "vertical";
   }
-  /** Metode for å render fremoverknappen */
   renderForwardButton() {
-    return this.hideStepButtons ? "" : this.getExtremes() === "end" ? p`
+    return this.hideStepButtons ? "" : this.getExtremes() === "end" ? n`
         <nve-button
           size="medium"
           variant="primary"
           @click=${this.finishSteps}
         >
           <nve-icon slot="suffix" name="done"></nve-icon>
-          ${this.optionalEndButton}
+          ${this.endButtonText}
         </nve-button>
-      ` : p`
+      ` : n`
       <nve-button
         .disabled=${this.getExtremes() === "end"}
         size="medium"
@@ -113,9 +106,8 @@ let s = class extends c {
       </nve-button>
     `;
   }
-  /** Metode for å render knapper i vertikal orientering */
   renderVerticalButtons() {
-    return this.hideStepButtons ? "" : p`
+    return this.hideStepButtons ? "" : n`
       <div class="vertical-btn-container">
         ${this.renderBackButton()}
         ${this.renderForwardButton()}
@@ -124,7 +116,7 @@ let s = class extends c {
   }
   /** Hoved render-metode */
   render() {
-    return x() || this.displayMobileVersion ? p`
+    return x() || this.displayMobileVersion ? n`
         <nve-stepper-mobile
           .steps=${this.steps}
           .selectedStepIndex=${this.selectedStepIndex}
@@ -132,14 +124,13 @@ let s = class extends c {
           @next-step=${this.handleMobileNextStep}
           @prev-step=${this.handleMobilePrevStep}
         ></nve-stepper-mobile>
-      ` : p`
+      ` : n`
       <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) => n`
               <nve-step
-                @clicked=${this.selectStep}
                 .title=${e.title}
                 .description=${e.description}
                 .state=${e.state}
@@ -147,10 +138,8 @@ let s = class extends c {
                 .isSelected=${e.isSelected}
                 .isLast=${t === this.steps.length - 1}
                 .index=${t}
-                .spaceBetweenSteps=${this.spaceBetweenSteps}
                 .readyForEntrance=${e.readyForEntrance}
                 .orientation=${this.orientation}
-                .disableClick=${this.disableStepClick}
               >
               </nve-step>
             `
@@ -163,35 +152,26 @@ let s = class extends c {
   }
 };
 s.styles = [S];
-i([
-  n()
+r([
+  p()
 ], s.prototype, "orientation", 2);
-i([
-  n({ type: Object })
-], s.prototype, "selectedStepIndex", 2);
-i([
-  n({ type: Number })
-], s.prototype, "spaceBetweenSteps", 2);
-i([
-  n({ type: String })
-], s.prototype, "optionalEndButton", 2);
-i([
-  n({ type: Array })
+r([
+  p({ type: String })
+], s.prototype, "endButtonText", 2);
+r([
+  p({ type: Array })
 ], s.prototype, "steps", 2);
-i([
-  n({ type: Boolean })
-], s.prototype, "disableStepClick", 2);
-i([
-  n({ type: Boolean })
+r([
+  p({ type: Boolean })
 ], s.prototype, "hideStepButtons", 2);
-i([
-  n({ type: Boolean })
+r([
+  p({ type: Boolean })
 ], s.prototype, "hideMobileStepButtons", 2);
-i([
-  n({ type: Boolean })
+r([
+  p({ type: Boolean })
 ], s.prototype, "displayMobileVersion", 2);
-s = i([
-  u("nve-stepper")
+s = r([
+  c("nve-stepper")
 ], s);
 export {
   s as default

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

@@ -15,6 +15,7 @@ const n = e`
     align-items: center;
     width: 100%;
     justify-content: space-between;
+    height: 100%;
   }
 
   .step {

package/custom-elements.json

@@ -9225,15 +9225,6 @@
               "default": "[]",
               "description": "Steps som skal vises, se StepProps interface for data som skal sendes inn."
             },
-            {
-              "kind": "field",
-              "name": "selectedStepIndex",
-              "type": {
-                "text": "{ value: number }"
-              },
-              "default": "{ value: 0 }",
-              "description": "Indeks for valgt steg, gir mulighet for å styre hvilket steg som er valgt."
-            },
             {
               "kind": "field",
               "name": "hideStepButtons",
@@ -9253,6 +9244,14 @@
               "name": "handlePrevStep",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "selectedStepIndex",
+              "type": {
+                "text": "{ value: number }"
+              },
+              "default": "{ value: 0 }"
+            },
             {
               "kind": "method",
               "name": "render",
@@ -9312,25 +9311,7 @@
             },
             {
               "kind": "field",
-              "name": "selectedStepIndex",
-              "type": {
-                "text": "{ value: number }"
-              },
-              "default": "{ value: 0 }",
-              "description": "Indeks for valgt steg, gir mulighet for å styre hvilket steg som er valgt."
-            },
-            {
-              "kind": "field",
-              "name": "spaceBetweenSteps",
-              "type": {
-                "text": "number"
-              },
-              "default": "200",
-              "description": "Avstand mellom Steps"
-            },
-            {
-              "kind": "field",
-              "name": "optionalEndButton",
+              "name": "endButtonText",
               "type": {
                 "text": "string"
               },
@@ -9346,15 +9327,6 @@
               "default": "[]",
               "description": "Steps som skal vises, se StepProps interface for data som skal sendes inn."
             },
-            {
-              "kind": "field",
-              "name": "disableStepClick",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Deaktiverer muligheten til å klikke på en Step komponenten slik at den blir valgt."
-            },
             {
               "kind": "field",
               "name": "hideStepButtons",
@@ -9382,6 +9354,15 @@
               "default": "false",
               "description": "Viser mobilversjonen av Stepper."
             },
+            {
+              "kind": "field",
+              "name": "selectedStepIndex",
+              "type": {
+                "text": "{ value: number }"
+              },
+              "privacy": "private",
+              "default": "{ value: 0 }"
+            },
             {
               "kind": "method",
               "name": "reRender",
@@ -9432,9 +9413,9 @@
               },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "index",
                   "type": {
-                    "text": "CustomEvent"
+                    "text": "number"
                   }
                 }
               ],
@@ -9450,9 +9431,20 @@
               },
               "description": "Metode som kjøres når alle stegene er fullført"
             },
+            {
+              "kind": "method",
+              "name": "getCurrentIndex",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "description": "Metode for å hente den gjeldende indeksen"
+            },
             {
               "kind": "method",
               "name": "setStep",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
@@ -9465,88 +9457,77 @@
                     "text": "number"
                   }
                 }
-              ],
-              "description": "Metode for å sette et spesifikt steg"
-            },
-            {
-              "kind": "method",
-              "name": "getCurrentIndex",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
-              },
-              "description": "Metode for å hente den gjeldende indeksen"
+              ]
             },
             {
               "kind": "method",
               "name": "getExtremes",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "string | undefined"
                 }
-              },
-              "description": "Metode for å sjekke om vi er på start eller slutten av Steps"
+              }
             },
             {
               "kind": "method",
               "name": "handleMobileNextStep",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              },
-              "description": "Metode for å håndtere neste steg på mobil"
+              }
             },
             {
               "kind": "method",
               "name": "handleMobilePrevStep",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              },
-              "description": "Metode for å håndtere forrige steg på mobil"
+              }
             },
             {
               "kind": "method",
               "name": "renderBackButton",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "TemplateResult | string"
                 }
-              },
-              "description": "Metode for å render tilbakeknappen"
+              }
             },
             {
               "kind": "method",
               "name": "isOrientationVertical",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "boolean"
                 }
-              },
-              "description": "Metode for å sjekke om orienteringen er vertikal"
+              }
             },
             {
               "kind": "method",
               "name": "renderForwardButton",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "TemplateResult | string"
                 }
-              },
-              "description": "Metode for å render fremoverknappen"
+              }
             },
             {
               "kind": "method",
               "name": "renderVerticalButtons",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "TemplateResult | string"
                 }
-              },
-              "description": "Metode for å render knapper i vertikal orientering"
+              }
             },
             {
               "kind": "method",
@@ -10674,15 +10655,6 @@
               "default": "''",
               "description": "Tittel på steget"
             },
-            {
-              "kind": "field",
-              "name": "spaceBetweenSteps",
-              "type": {
-                "text": "number"
-              },
-              "default": "200",
-              "description": "Avstand mellom stegene"
-            },
             {
               "kind": "field",
               "name": "index",
@@ -10745,15 +10717,6 @@
               "default": "false",
               "description": "Angir om det er tillatt å gå inn i steget"
             },
-            {
-              "kind": "field",
-              "name": "disableClick",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Deaktiverer muligheten til å klikke på steget for å velge det"
-            },
             {
               "kind": "field",
               "name": "orientation",
@@ -10804,16 +10767,17 @@
             {
               "kind": "method",
               "name": "isOrientationVertical",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "boolean"
                 }
-              },
-              "description": "Sjekker om orienteringen er vertikal"
+              }
             },
             {
               "kind": "method",
               "name": "iconForState",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "string"
@@ -10824,15 +10788,14 @@
                   "name": "state",
                   "type": {
                     "text": "StepState"
-                  },
-                  "description": "Stegets tilstand"
+                  }
                 }
-              ],
-              "description": "Returnerer ikonet for den gitte stegetilstanden"
+              ]
             },
             {
               "kind": "method",
               "name": "getStateText",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "string"
@@ -10843,15 +10806,14 @@
                   "name": "state",
                   "type": {
                     "text": "StepState"
-                  },
-                  "description": "Stegets tilstand"
+                  }
                 }
-              ],
-              "description": "Returnerer teksten for den gitte stegetilstanden"
+              ]
             },
             {
               "kind": "method",
               "name": "getStateColorClass",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "string"
@@ -10862,15 +10824,14 @@
                   "name": "state",
                   "type": {
                     "text": "StepState"
-                  },
-                  "description": "Stegets tilstand"
+                  }
                 }
-              ],
-              "description": "Returnerer CSS-klassen for fargen til den gitte stegetilstanden"
+              ]
             },
             {
               "kind": "method",
               "name": "getTitleClass",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "string"
@@ -10881,15 +10842,14 @@
                   "name": "state",
                   "type": {
                     "text": "StepState"
-                  },
-                  "description": "Stegets tilstand"
+                  }
                 }
-              ],
-              "description": "Returnerer CSS-klassen for tittelen til den gitte stegetilstanden"
+              ]
             },
             {
               "kind": "method",
               "name": "getIconClass",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "string"
@@ -10900,81 +10860,67 @@
                   "name": "state",
                   "type": {
                     "text": "StepState"
-                  },
-                  "description": "Stegets tilstand"
-                }
-              ],
-              "description": "Returnerer CSS-klassen for ikonet til den gitte stegetilstanden"
-            },
-            {
-              "kind": "method",
-              "name": "getIsClickableClass",
-              "return": {
-                "type": {
-                  "text": "string"
+                  }
                 }
-              },
-              "description": "Returnerer CSS-klassen for om steget er klikkbart"
+              ]
             },
             {
               "kind": "method",
               "name": "getDividerColorClass",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "string"
                 }
-              },
-              "description": "Returnerer CSS-klassen for fargen til divideren"
-            },
-            {
-              "kind": "method",
-              "name": "onClick",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Håndterer klikk på steget"
+              }
             },
             {
               "kind": "method",
-              "name": "updateVerticalDividerHeight",
+              "name": "renderDivider",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "TemplateResult | string"
                 }
-              },
-              "description": "Brukes for beregning av riktig høyde før divider. Description elementet har padding, så høyden før divider var for kort, så bruk denne funksjonen for regner ut riktig høyde."
+              }
             },
             {
               "kind": "method",
-              "name": "renderDivider",
+              "name": "renderDescription",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "TemplateResult | string"
                 }
-              },
-              "description": "Render divideren mellom stegene"
+              }
             },
             {
               "kind": "method",
-              "name": "renderDescription",
+              "name": "isDescriptionValid",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "TemplateResult | string"
+                  "text": "boolean"
                 }
               },
-              "description": "Render beskrivelsen av steget"
+              "parameters": [
+                {
+                  "name": "description",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
               "name": "renderVerticalStep",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "TemplateResult"
                 }
-              },
-              "description": "Render vertikalt steg"
+              }
             },
             {
               "kind": "method",
@@ -10983,18 +10929,7 @@
                 "type": {
                   "text": "TemplateResult"
                 }
-              },
-              "description": "Render metoden for komponenten"
-            }
-          ],
-          "events": [
-            {
-              "name": "clicked",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "reactName": "onClicked",
-              "eventName": "ClickedEvent"
+              }
             }
           ],
           "superclass": {
@@ -11022,7 +10957,7 @@
   "package": {
     "name": "nve-designsystem",
     "description": "Designsystem for NVE",
-    "version": "0.1.83",
+    "version": "0.1.84",
     "author": {
       "name": "NVE",
       "email": "nve@nve.no"

package/package.json

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