nve-designsystem 0.1.84 → 0.1.86

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,19 @@ 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;
+    private isOrientationVertical;
+    private iconForState;
+    private getStateText;
+    private getStateColorClass;
+    private getTitleClass;
+    private getIconClass;
+    private getDividerColorClass;
+    private renderDivider;
+    private renderDescription;
+    private isDescriptionValid;
     /** 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 updateVerticalDividerHeight;
+    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 { n as s, t as p } 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, g = Object.getOwnPropertyDescriptor, r = (t, e, a, n) => {
+  for (var o = n > 1 ? void 0 : n ? g(e, a) : e, l = t.length - 1, d; l >= 0; l--)
+    (d = t[l]) && (o = (n ? d(e, a, o) : d(o)) || o);
+  return n && o && f(e, a, o), o;
+}, y = /* @__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))(y || {});
+let i = class extends h {
   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() {
@@ -19,141 +19,114 @@ let e = class extends h {
   updated() {
     this.isOrientationVertical() && this.updateVerticalDividerHeight(), 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 e = "";
     switch (t) {
       case 0:
-        i = "circle";
-        break;
-      case 1:
-        i = "trip_origin";
+        e = "circle";
         break;
       case 2:
-        i = "check_circle";
+        e = "radio_button_checked";
+        break;
+      case 1:
+        e = "trip_origin";
         break;
       case 3:
-        i = "error";
+        e = "check_circle";
+        break;
+      case 4:
+        e = "error";
         break;
       default:
-        i = "check_circle";
+        e = "check_circle";
         break;
     }
-    return i;
+    return e;
   }
-  /**
-   * 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`
           <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) ? c`<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;
+  }
+  /** 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 e = this.descriptionElement.offsetHeight + 24, a = this.shadowRoot.querySelector(".vertical-divider-container .divider-vertical");
+    a && (a.style.height = `${e}px`);
   }
-  /** Render vertikalt steg */
   renderVerticalStep() {
     return c`
       <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 +144,11 @@ let e = class extends h {
       </div>
     `;
   }
-  /** Render metoden for komponenten */
   render() {
     return this.isOrientationVertical() ? this.renderVerticalStep() : c`
         <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>
@@ -193,47 +164,41 @@ let e = class extends h {
     `;
   }
 };
-e.styles = [u];
-s([
-  r({ reflect: !0 })
-], e.prototype, "title", 2);
-s([
-  r({ type: Number })
-], e.prototype, "spaceBetweenSteps", 2);
-s([
-  r({ type: Number })
-], e.prototype, "index", 2);
-s([
-  r({ type: String })
-], e.prototype, "description", 2);
-s([
-  r({ type: Number })
-], e.prototype, "state", 2);
-s([
-  r({ type: Number })
-], e.prototype, "selectedStepIndex", 2);
-s([
-  r({ type: Boolean, reflect: !0 })
-], e.prototype, "isSelected", 2);
-s([
-  r({ type: Boolean })
-], e.prototype, "isLast", 2);
-s([
-  r({ type: Boolean })
-], e.prototype, "entranceAllowed", 2);
-s([
-  r({ type: Boolean })
-], e.prototype, "disableClick", 2);
-s([
-  r()
-], e.prototype, "orientation", 2);
-s([
+i.styles = [u];
+r([
+  s({ reflect: !0 })
+], i.prototype, "title", 2);
+r([
+  s({ type: Number })
+], i.prototype, "index", 2);
+r([
+  s({ type: String })
+], i.prototype, "description", 2);
+r([
+  s({ type: Number })
+], i.prototype, "state", 2);
+r([
+  s({ type: Number })
+], i.prototype, "selectedStepIndex", 2);
+r([
+  s({ type: Boolean, reflect: !0 })
+], i.prototype, "isSelected", 2);
+r([
+  s({ type: Boolean })
+], i.prototype, "isLast", 2);
+r([
+  s({ type: Boolean })
+], i.prototype, "entranceAllowed", 2);
+r([
+  s()
+], i.prototype, "orientation", 2);
+r([
   v(".step-description")
-], e.prototype, "descriptionElement", 2);
-e = s([
+], i.prototype, "descriptionElement", 2);
+i = r([
   p("nve-step")
-], e);
+], i);
 export {
   y as StepState,
-  e as default
+  i 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;
 }