nve-designsystem 0.1.70 → 0.1.72

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

@@ -1,56 +1,95 @@
-import { LitElement } from 'lit';
+import { CSSResultArray, LitElement, TemplateResult } from 'lit';
+/** Enum for å representere tilstanden til et steg */
 export declare enum StepState {
     NotStarted = 0,
     Started = 1,
     Done = 2,
     Error = 3
 }
+/** Interface for å definere egenskapene til et steg */
 export interface StepProps {
     title: string;
-    description: string;
+    description?: string;
     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 steppene
-     */
+    /** Avstand mellom stegene */
     spaceBetweenSteps: number;
-    /**
-     * Hvilken ikonbibliotek som skal brukes, Sharp eller Outlined.
-     */
-    iconLibrary: 'Outlined' | 'Sharp';
-    /**
-     * Stegets index
-     */
+    /** Indeks for steget */
     index: number;
+    /** Beskrivelse av steget */
     description: string;
     /**
-     * Er steget besøkt, ikke besøkt, fullført eller feilet
+     * Stegets tilstand: Ikke startet, påbegynt, fullført eller feilet
      * @type {StepState}
      */
     state: StepState;
+    /** Indeks for det valgte steget */
     selectedStepIndex: number;
+    /** Angir om steget er valgt */
+    isSelected: boolean;
+    /** Angir om steget er det siste i rekken */
+    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';
+    /** Metode som kjøres første gang komponenten er lagt til i DOM */
+    firstUpdated(): void;
+    /** Metode som kjøres hver gang komponentens oppdateres */
+    updated(): void;
+    /** Definerer stilene som brukes av komponenten */
+    static styles: CSSResultArray;
+    /** Sjekker om orienteringen er vertikal */
+    isOrientationVertical(): boolean;
     /**
-     * Er steget valgt
+     * Returnerer ikonet for den gitte stegetilstanden
+     * @param state - Stegets tilstand
      */
-    isSelected: boolean;
+    iconForState(state: StepState): string;
     /**
-     * Er steget det siste i rekken
+     * Returnerer teksten for den gitte stegetilstanden
+     * @param state - Stegets tilstand
      */
-    isLast: boolean;
+    getStateText(state: StepState): string;
     /**
-     * Er det lov å gå inn i steget, alle krav er oppfylt
+     * Returnerer CSS-klassen for fargen til den gitte stegetilstanden
+     * @param state - Stegets tilstand
      */
-    entraceAllowed: boolean;
-    firstUpdated(): void;
-    updated(): void;
-    static styles: import("lit").CSSResult[];
-    iconForState(state: StepState): string;
+    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;
-    render(): import("lit-html").TemplateResult<1>;
+    /** Render divideren mellom stegene */
+    renderDivider(): TemplateResult | string;
+    /** Render beskrivelsen av steget */
+    renderDescription(): TemplateResult | string;
+    /** Render vertikalt steg */
+    renderVerticalStep(): TemplateResult;
+    /** Render metoden for komponenten */
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,102 +1,228 @@
-import { s as d, x as l } from "../../../chunks/lit-element.js";
-import { n as r, t as h } from "../../../chunks/property.js";
-import y from "./nve-step.styles.js";
-var v = Object.defineProperty, u = Object.getOwnPropertyDescriptor, i = (e, t, a, n) => {
-  for (var o = n > 1 ? void 0 : n ? u(t, a) : t, c = e.length - 1, p; c >= 0; c--)
-    (p = e[c]) && (o = (n ? p(t, a, o) : p(o)) || o);
-  return n && o && v(t, a, o), o;
-}, f = /* @__PURE__ */ ((e) => (e[e.NotStarted = 0] = "NotStarted", e[e.Started = 1] = "Started", e[e.Done = 2] = "Done", e[e.Error = 3] = "Error", e))(f || {});
-let s = class extends d {
+import { s as h, x as o } from "../../../chunks/lit-element.js";
+import { n as r, t as p } from "../../../chunks/property.js";
+import v from "./nve-step.styles.js";
+var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (t, i, c, l) => {
+  for (var a = l > 1 ? void 0 : l ? f(i, c) : i, n = t.length - 1, d; n >= 0; n--)
+    (d = t[n]) && (a = (l ? d(i, c, a) : d(a)) || a);
+  return l && a && u(i, c, a), a;
+}, C = /* @__PURE__ */ ((t) => (t[t.NotStarted = 0] = "NotStarted", t[t.Started = 1] = "Started", t[t.Done = 2] = "Done", t[t.Error = 3] = "Error", t))(C || {});
+let e = class extends h {
   constructor() {
-    super(...arguments), this.title = "", this.spaceBetweenSteps = 200, this.iconLibrary = "Outlined", this.index = 0, this.description = "", this.state = 0, this.selectedStepIndex = 0, this.isSelected = !1, this.isLast = !1, this.entraceAllowed = !1;
+    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";
   }
+  /** Metode som kjøres første gang komponenten er lagt til i DOM */
   firstUpdated() {
     this.style.setProperty("--flex-grow", this.isLast ? "0" : "1");
   }
+  /** Metode som kjøres hver gang komponentens oppdateres */
   updated() {
     this.style.setProperty("line-color", this.isLast ? "0" : "1");
   }
-  iconForState(e) {
-    let t = "";
-    switch (e) {
+  /** Sjekker om orienteringen er vertikal */
+  isOrientationVertical() {
+    return this.orientation === "vertical";
+  }
+  /**
+   * Returnerer ikonet for den gitte stegetilstanden
+   * @param state - Stegets tilstand
+   */
+  iconForState(t) {
+    let i = "";
+    switch (t) {
       case 0:
-        t = `counter_${this.index + 1}`;
+        i = "circle";
         break;
       case 1:
-        this.isSelected ? t = `counter_${this.index + 1}` : t = "error";
+        i = "trip_origin";
         break;
       case 2:
-        this.isSelected ? t = `counter_${this.index + 1}` : t = "check_circle";
+        i = "check_circle";
         break;
       case 3:
-        t = "error";
+        i = "error";
         break;
       default:
-        t = `help_${this.iconLibrary}`;
+        i = "check_circle";
         break;
     }
-    return t;
+    return i;
   }
+  /**
+   * 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";
+      case 3:
+        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";
+      case 3:
+        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:
+        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:
+        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.dispatchEvent(new CustomEvent("clicked", { detail: { index: this.index } }));
+    this.disableClick || this.dispatchEvent(new CustomEvent("clicked", { detail: { index: this.index } }));
+  }
+  /** Render divideren mellom stegene */
+  renderDivider() {
+    const t = this.isOrientationVertical() ? "divider-vertical" : "divider-horizontal";
+    return this.isLast ? "" : o`
+          <div class="vertical-divider-container">
+          <div
+          style="${this.isOrientationVertical() ? `height:${this.spaceBetweenSteps}px` : `min-width:${this.spaceBetweenSteps}px`}"
+          class="${t} ${this.getDividerColorClass()}"
+        ></div>
+        </div>`;
+  }
+  /** Render beskrivelsen av steget */
+  renderDescription() {
+    return this.description ? o`<div class="step-description">${this.description}</div>` : "";
+  }
+  /** Render vertikalt steg */
+  renderVerticalStep() {
+    return o`
+      <div class="vertical-container">
+        <div class="step-figure-vertical">
+          <div
+            @click="${this.onClick}"
+            class="${this.getIsClickableClass()} ${this.getIconClass(this.state)}"
+          >
+            <nve-icon slot="suffix" name="${this.iconForState(this.state)}"></nve-icon>
+          </div>
+          ${this.renderDivider()}
+        </div>
+        <div class="text-container-vertical">
+          <div class="step-title step-title-vertical ${this.getTitleClass(this.state)}">${this.title}</div>
+          <div class="step-state ${this.getStateColorClass(this.state)}">
+            ${this.getStateText(this.state)}
+          </div>       
+          ${this.renderDescription()}
+        </div>
+      </div>
+    `;
   }
+  /** Render metoden for komponenten */
   render() {
-    return l`
-      <div class="step">
+    return this.isOrientationVertical() ? this.renderVerticalStep() : o`
         <div class="step-figure">
           <span
             @click="${this.onClick}"
-            class="${this.index <= this.selectedStepIndex ? "reached" : ""} ${this.state == 3 ? "hasError" : ""} ${this.state > 0 ? "" : "not-started"}"
+            class="${this.getIsClickableClass()} ${this.getIconClass(this.state)}"
           >
-            <nve-icon library=${this.iconLibrary} slot="suffix" name="${this.iconForState(this.state)}"></nve-icon>
+            <nve-icon  slot="suffix" name="${this.iconForState(this.state)}"></nve-icon>
           </span>
-
-          ${this.isLast ? "" : l`<div
-                style="min-width:${this.spaceBetweenSteps}px"
-                class="divider-horizontal ${this.index < this.selectedStepIndex ? "reached-interval" : ""} ${this.state > 0 ? "" : "not-started"}"
-              ></div>`}
+          ${this.renderDivider()}
+        </div>
+        <div class="${this.isLast ? "" : "text-container"}">
+          <div class="step-title ${this.getTitleClass(this.state)}">${this.title}</div>
+          <div class="step-state ${this.getStateColorClass(this.state)}">
+            ${this.getStateText(this.state)}
+          </div>       
+          ${this.renderDescription()}
         </div>
-        <div class="step-title">${this.title}</div>
-        <div class="step-description">${this.description}</div>
-      </div>
     `;
   }
 };
-s.styles = [y];
-i([
+e.styles = [v];
+s([
   r({ reflect: !0 })
-], s.prototype, "title", 2);
-i([
+], e.prototype, "title", 2);
+s([
   r({ type: Number })
-], s.prototype, "spaceBetweenSteps", 2);
-i([
-  r({ type: String })
-], s.prototype, "iconLibrary", 2);
-i([
+], e.prototype, "spaceBetweenSteps", 2);
+s([
   r({ type: Number })
-], s.prototype, "index", 2);
-i([
+], e.prototype, "index", 2);
+s([
   r({ type: String })
-], s.prototype, "description", 2);
-i([
+], e.prototype, "description", 2);
+s([
   r({ type: Number })
-], s.prototype, "state", 2);
-i([
+], e.prototype, "state", 2);
+s([
   r({ type: Number })
-], s.prototype, "selectedStepIndex", 2);
-i([
+], e.prototype, "selectedStepIndex", 2);
+s([
   r({ type: Boolean, reflect: !0 })
-], s.prototype, "isSelected", 2);
-i([
+], e.prototype, "isSelected", 2);
+s([
+  r({ type: Boolean })
+], e.prototype, "isLast", 2);
+s([
   r({ type: Boolean })
-], s.prototype, "isLast", 2);
-i([
+], e.prototype, "entranceAllowed", 2);
+s([
   r({ type: Boolean })
-], s.prototype, "entraceAllowed", 2);
-s = i([
-  h("nve-step")
-], s);
+], e.prototype, "disableClick", 2);
+s([
+  r()
+], e.prototype, "orientation", 2);
+e = s([
+  p("nve-step")
+], e);
 export {
-  f as StepState,
-  s as default
+  C as StepState,
+  e as default
 };

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

@@ -1,71 +1,148 @@
-import { i as o } from "../../../chunks/lit-element.js";
-const e = o`
+import { i as e } from "../../../chunks/lit-element.js";
+const o = e`
   :host {
     flex-grow: var(--flex-grow, 1);
   }
+
   .step-figure {
     position: relative;
     display: flex;
     align-items: center;
+    font-size: 2rem;
+  }
+
+  .filled-icon {
+    font-variation-settings:
+      'FILL' 1,
+      'wght' 300,
+      'GRAD' 1,
+      'opsz' 48 !important;
+  }
+
+  .clickable {
+    cursor: pointer;
+  }
+
+  .disable-click {  
+    cursor: default;
   }
 
   .divider-horizontal {
     height: 2px;
-    background-color: var(--grey-150);
     flex-grow: 1;
   }
 
+  .text-container {
+    padding-right: 1.5rem; /*24px; */
+  }
+
   .step-title {
-    font-size: 16px;
-    font-weight: bold;
-    padding-top: 4px;
+    color: var(--neutrals-foreground-primary, #0D0D0E);
+
+    /* Label/medium */
+    font-family: "Source Sans Pro";
+    font-size: 1.125rem; /*18px; */
+    font-style: normal;
+    font-weight: 600;
+    line-height: 110%; 
+    padding-top: 0.75rem; /*12px;*/
+  }
+
+  .step-state {
+    /* Label/x-small-light */
+    font-family: "Source Sans Pro";
+    font-size: 0.875rem;/*14px;*/
+    font-style: normal;
+    font-weight: 400;
+    line-height: 110%; 
+    padding-top: 0.25rem; /*4px;*/
+
   }
+
   .step-description {
-    font-size: 14px;
-    font-weight: bold;
-    padding-top: 4px;
+    color: var(--neutrals-foreground-primary, #0D0D0E);
+    
+    /* Label/small-light */
+    font-family: "Source Sans Pro";
+    font-size: 1rem; /*16px; */
+    font-style: normal;
+    font-weight: 400;
+    line-height: 110%; 
+    padding-top: 0.625rem; /*10px; */
   }
 
-  .reached-interval {
-    height: 4px;
-    background-color: var(--grey-999);
+
+  .divider-not-reached-color {
+    /* TODO the token --neutrals-background-secondary gives wrong color #c8eaf9 instead of #E4E5E7
+    color:var(--neutrals-background-secondary, #E4E5E7); */
+    background:#E4E5E7; 
+}
+
+  .divider-reached-color {
+    background: var(--neutrals-foreground-primary, #0D0D0E);
   }
 
-  .reached {
-    font-variation-settings:
-      'FILL' 1,
-      'wght' 300,
-      'GRAD' 1,
-      'opsz' 48 !important;
+  .state-not-started-icon-color {
+    /* TODO the token --neutrals-background-secondary gives wrong color #c8eaf9 instead of #E4E5E7
+    color:var(--neutrals-background-secondary, #E4E5E7); */
+    color:#E4E5E7; 
   }
 
-  .hasError {
-    color: red;
+  .state-not-started-color {
+    color: var(--neutrals-foreground-subtle, #60656C);
   }
 
-  .not-started {
-    color: var(--grey-150);
+  .state-started-color {
+    color: var(--feedback-background-emphasized-info, #1E6FDC);
   }
 
-  .evaluated {
-    background-color: rgb(184, 184, 184);
+  .state-done-color {
+    /* TODO the token feeedback is misspelled, should be feedback but --feedback-foreground-emphasized-success gives color */
+    color: var(--feeedback-foreground-emphasized-success, #00814B);
   }
 
-  span {
-    cursor: pointer;
-    font-size: 2rem;
+  .state-error-color {
+    color: var(--feedback-background-emphasized-error, #CC0000);
+  }
+
+  .vertical-container {
     display: flex;
+    align-items: flex-start; 
   }
 
-  .material-symbols-sharp {
+  .divider-horizontal {
+    height: 2px;
+    flex-grow: 1;
+  }
+
+  .divider-vertical {
+    width: 2px;
+    align-self: stretch;
+  }
+
+  .step-figure-vertical { 
+    display: flex;
     font-size: 2rem;
-    font-variation-settings:
-      'FILL' 0,
-      'wght' 300,
-      'GRAD' 0,
-      'opsz' 24;
+    flex-direction: column; 
+  }  
+
+  .vertical-divider-container {
+    display: flex;
+    justify-content: center;
+    padding-top: 1.5px;
+  }
+  
+  .text-container-vertical {
+    padding-left: 1.5rem; /*24px; */
+    justify-content: center;
   }
+
+  .step-title-vertical {
+    padding-top: 0;
+    align-self: flex-start; 
+}
+
 `;
 export {
-  e as default
+  o as default
 };

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

@@ -0,0 +1,21 @@
+import { CSSResultArray, LitElement, TemplateResult } from 'lit';
+import { StepProps } from './nve-step/nve-step.component';
+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;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-stepper-mobile': NveStepperMobile;
+    }
+}

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

@@ -0,0 +1,69 @@
+import { s as v, x as l } from "../../chunks/lit-element.js";
+import { n as c, 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;
+};
+let p = class extends v {
+  constructor() {
+    super(...arguments), this.steps = [], this.selectedStepIndex = { value: 0 }, this.hideStepButtons = !1;
+  }
+  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);
+  }
+  render() {
+    const e = this.steps[this.selectedStepIndex.value], s = this.steps[this.selectedStepIndex.value + 1], i = this.selectedStepIndex.value === this.steps.length - 1;
+    return l`
+      <div class="mobile-stepper">
+        <div class="progress-circle">
+          ${this.selectedStepIndex.value + 1} of ${this.steps.length}
+        </div>
+        <div class="step-info">
+          <div class="step-title">${e.title}</div>
+          ${this.hideStepButtons ? "" : l`
+                <div>
+                  ${i ? l`
+                        <div class="step-buttons next-button" @click=${this.handleNextStep}>
+                          Finish
+                        </div>` : l`
+                        <div class="step-buttons next-button" @click=${this.handleNextStep}>
+                          Neste: ${s.title}
+                        </div>`}
+                  <div class="step-buttons back-button" @click=${this.handlePrevStep}>
+                    Forrige
+                  </div>
+                </div>`}
+        </div>
+      </div>
+    `;
+  }
+};
+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([
+  h("nve-stepper-mobile")
+], p);
+export {
+  p as default
+};