nve-designsystem 0.1.51 → 0.1.54

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

@@ -1,11 +1,12 @@
 import { LitElement } from 'lit';
 /**
  * Et ikon.
- * Vi bruker ikoner fra Material Symbols.
+ * Vi bruker ikoner fra Material Symbols. Man kan bruke både 'Sharp' og 'Outlined' ikoner.
  * @see https://fonts.google.com/icons
  */
 export default class NveIcon extends LitElement {
     static styles: import("lit").CSSResult[];
+    /** Bestemmer om man skal bruke 'sharp' eller 'outlined' ikoner */
     library: 'Outlined' | 'Sharp';
     /** Navnet på ikonet i Material Symbols-biblioteket */
     name: string;

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

@@ -1,31 +1,35 @@
-import { s as f, x as m } from "../../chunks/lit-element.js";
-import { n as i, t as y } from "../../chunks/property.js";
-import u from "./nve-icon.styles.js";
-var c = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (l, t, n, s) => {
-  for (var r = s > 1 ? void 0 : s ? v(t, n) : t, o = l.length - 1, p; o >= 0; o--)
-    (p = l[o]) && (r = (s ? p(t, n, r) : p(r)) || r);
-  return s && r && c(t, n, r), r;
+import { s as m, x as c } from "../../chunks/lit-element.js";
+import { n as p, t as y } from "../../chunks/property.js";
+import f from "./nve-icon.styles.js";
+var h = Object.defineProperty, d = Object.getOwnPropertyDescriptor, n = (e, s, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? d(s, i) : s, a = e.length - 1, l; a >= 0; a--)
+    (l = e[a]) && (t = (o ? l(s, i, t) : l(t)) || t);
+  return o && t && h(s, i, t), t;
 };
-let e = class extends f {
+let r = class extends m {
   constructor() {
     super(...arguments), this.library = "Outlined", this.name = "";
   }
   firstUpdated() {
+    if (!document.getElementById(`material-icons-${this.library.toLowerCase()}`)) {
+      const e = document.createElement("link");
+      e.id = `material-icons-${this.library.toLowerCase()}`, e.rel = "stylesheet", e.href = `https://fonts.googleapis.com/css2?family=Material+Symbols+${this.library}:opsz,wght,FILL,GRAD@24,400,0,0`, document.head.appendChild(e);
+    }
   }
   render() {
-    return m`<span style="font-family:Material Symbols ${this.library}">${this.name}</span>`;
+    return c`<span part="icon" style="font-family:Material Symbols ${this.library}">${this.name}</span>`;
   }
 };
-e.styles = [u];
-a([
-  i({ type: String })
-], e.prototype, "library", 2);
-a([
-  i({ reflect: !0 })
-], e.prototype, "name", 2);
-e = a([
+r.styles = [f];
+n([
+  p({ type: String })
+], r.prototype, "library", 2);
+n([
+  p({ reflect: !0 })
+], r.prototype, "name", 2);
+r = n([
   y("nve-icon")
-], e);
+], r);
 export {
-  e as default
+  r as default
 };

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

@@ -1,25 +1,24 @@
 import { i as e } from "../../chunks/lit-element.js";
 const o = e`
-
   /* Brukes i dropdown. Eneste måten å override shadow dom for å rotere expand_more ikonet når menyen åpner */
   :host([name='expand_more']) {
     transform: var(--icon-rotation, none);
     transition: transform 0.3s ease;
   }
 
-  /* prevent icon beeing highlighted */ 
+  /* prevent icon beeing highlighted */
   :host {
-  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Old versions of Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Old versions of Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently
                                   supported by Chrome, Edge, Opera and Firefox */
-}
-:host {
+  }
+  :host {
     display: flex;
-}
+  }
 
   /* we need it to center the icon */
   :is(span) {

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

@@ -1,4 +1,4 @@
-import { LitElement } from "lit";
+import { LitElement } from 'lit';
 export declare enum StepState {
     NotStarted = 0,
     Started = 1,
@@ -6,7 +6,6 @@ export declare enum StepState {
     Error = 3
 }
 export interface StepProps {
-    icons: string[];
     title: string;
     description: string;
     state: StepState;
@@ -14,16 +13,37 @@ export interface StepProps {
     readyForEntrance: boolean;
 }
 export default class NveStep extends LitElement {
-    icons: string[];
     title: string;
+    /**
+     * Avstand mellom steppene
+     */
     spaceBetweenSteps: number;
+    /**
+     * Hvilken ikonbibliotek som skal brukes, Sharp eller Outlined.
+     */
     iconLibrary: 'Outlined' | 'Sharp';
+    /**
+     * Stegets index
+     */
     index: number;
     description: string;
+    /**
+     * Er steget besøkt, ikke besøkt, fullført eller feilet
+     * @type {StepState}
+     */
     state: StepState;
-    stepperIndex: number;
+    selectedStepIndex: number;
+    /**
+     * Er steget valgt
+     */
     isSelected: boolean;
+    /**
+     * Er steget det siste i rekken
+     */
     isLast: boolean;
+    /**
+     * Er det lov å gå inn i steget, alle krav er oppfylt
+     */
     entraceAllowed: boolean;
     static styles: import("lit").CSSResult[];
     iconForState(state: StepState): string;
@@ -32,6 +52,6 @@ export default class NveStep extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "nve-step": NveStep;
+        'nve-step': NveStep;
     }
 }

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

@@ -1,56 +1,54 @@
 import { s as d, x as l } from "../../../chunks/lit-element.js";
-import { n as i, t as h } from "../../../chunks/property.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, r = (e, s, p, n) => {
-  for (var o = n > 1 ? void 0 : n ? u(s, p) : s, a = e.length - 1, c; a >= 0; a--)
-    (c = e[a]) && (o = (n ? c(s, p, o) : c(o)) || o);
-  return n && o && v(s, p, o), o;
+var v = Object.defineProperty, u = Object.getOwnPropertyDescriptor, i = (e, t, c, n) => {
+  for (var o = n > 1 ? void 0 : n ? u(t, c) : t, a = e.length - 1, p; a >= 0; a--)
+    (p = e[a]) && (o = (n ? p(t, c, o) : p(o)) || o);
+  return n && o && v(t, c, 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 t = class extends d {
+let s = class extends d {
   constructor() {
-    super(...arguments), this.icons = [], this.title = "", this.spaceBetweenSteps = 200, this.iconLibrary = "Outlined", this.index = 0, this.description = "", this.state = 0, this.stepperIndex = 0, this.isSelected = !1, this.isLast = !1, this.entraceAllowed = !1;
+    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;
   }
   iconForState(e) {
-    let s = "";
+    let t = "";
     switch (e) {
       case 0:
-        s = `counter_${this.index + 1}`;
+        t = `counter_${this.index + 1}`;
         break;
       case 1:
-        this.isSelected ? s = `counter_${this.index + 1}` : s = "error";
+        this.isSelected ? t = `counter_${this.index + 1}` : t = "error";
         break;
       case 2:
-        s = "check_circle";
+        this.isSelected ? t = `counter_${this.index + 1}` : t = "check_circle";
         break;
       case 3:
-        s = "error";
+        t = "error";
         break;
       default:
-        s = `help_${this.iconLibrary}`;
+        t = `help_${this.iconLibrary}`;
         break;
     }
-    return s;
+    return t;
   }
   onClick() {
-    this.dispatchEvent(
-      new CustomEvent("clicked", { detail: { index: this.index } })
-    );
+    this.dispatchEvent(new CustomEvent("clicked", { detail: { index: this.index } }));
   }
   render() {
     return l`
       <div class="step">
-        <div class="step-figure"> 
-        <span
-          @click="${this.onClick}"
-          class="${this.isSelected ? "selected" : ""} ${this.state == 3 ? "hasError" : ""} ${this.state > 0 ? "" : "notStarted"}"
-        >
-        <nve-icon library=${this.iconLibrary} slot="suffix"  name="${this.iconForState(this.state)}"></nve-icon>
-        </span>
-           
-        ${this.isLast ? "" : l`<div
-              style="width:${this.spaceBetweenSteps}px"
-              class="divider-horizontal ${this.index < this.stepperIndex ? "selectedInterval" : ""} ${this.state > 0 ? "" : "notStarted"}"
-        ></div>`}
+        <div class="step-figure">
+          <span
+            @click="${this.onClick}"
+            class="${this.index <= this.selectedStepIndex ? "reached" : ""} ${this.state == 3 ? "hasError" : ""} ${this.state > 0 ? "" : "notStarted"}"
+          >
+            <nve-icon library=${this.iconLibrary} slot="suffix" name="${this.iconForState(this.state)}"></nve-icon>
+          </span>
+
+          ${this.isLast ? "" : l`<div
+                style="width:${this.spaceBetweenSteps}px"
+                class="divider-horizontal ${this.index < this.selectedStepIndex ? "selectedInterval" : ""} ${this.state > 0 ? "" : "notStarted"}"
+              ></div>`}
         </div>
         <div class="step-title">${this.title}</div>
         <div class="step-description">${this.description}</div>
@@ -58,44 +56,41 @@ let t = class extends d {
     `;
   }
 };
-t.styles = [y];
-r([
-  i({ type: Array })
-], t.prototype, "icons", 2);
-r([
-  i({ reflect: !0 })
-], t.prototype, "title", 2);
-r([
-  i({ type: Number })
-], t.prototype, "spaceBetweenSteps", 2);
-r([
-  i({ type: String })
-], t.prototype, "iconLibrary", 2);
-r([
-  i({ type: Number })
-], t.prototype, "index", 2);
-r([
-  i({ type: String })
-], t.prototype, "description", 2);
-r([
-  i({ type: Number })
-], t.prototype, "state", 2);
-r([
-  i({ type: Number })
-], t.prototype, "stepperIndex", 2);
-r([
-  i({ type: Boolean, reflect: !0 })
-], t.prototype, "isSelected", 2);
-r([
-  i({ type: Boolean })
-], t.prototype, "isLast", 2);
-r([
-  i({ type: Boolean })
-], t.prototype, "entraceAllowed", 2);
-t = r([
+s.styles = [y];
+i([
+  r({ reflect: !0 })
+], s.prototype, "title", 2);
+i([
+  r({ type: Number })
+], s.prototype, "spaceBetweenSteps", 2);
+i([
+  r({ type: String })
+], s.prototype, "iconLibrary", 2);
+i([
+  r({ type: Number })
+], s.prototype, "index", 2);
+i([
+  r({ type: String })
+], s.prototype, "description", 2);
+i([
+  r({ type: Number })
+], s.prototype, "state", 2);
+i([
+  r({ type: Number })
+], s.prototype, "selectedStepIndex", 2);
+i([
+  r({ type: Boolean, reflect: !0 })
+], s.prototype, "isSelected", 2);
+i([
+  r({ type: Boolean })
+], s.prototype, "isLast", 2);
+i([
+  r({ type: Boolean })
+], s.prototype, "entraceAllowed", 2);
+s = i([
   h("nve-step")
-], t);
+], s);
 export {
   f as StepState,
-  t as default
+  s as default
 };

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

@@ -1,64 +1,66 @@
 import { i as t } from "../../../chunks/lit-element.js";
 const o = t`
-.step-figure {
-  position: relative;
-  display: flex;
-  align-items: center;
-  
-}
+  .step-figure {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
 
-.divider-horizontal {
-  height: 2px;
-  background-color: black;
-  flex-grow: 1;
-}
+  .divider-horizontal {
+    height: 2px;
+    background-color: black;
+    flex-grow: 1;
+  }
 
-.step-title{
-  font-size: 16px; 
-  font-weight:bold;
-  padding-top:4px
-}
-.step-description{
-  font-size: 14px; 
-  font-weight:bold;
-  padding-top:4px
-}
+  .step-title {
+    font-size: 16px;
+    font-weight: bold;
+    padding-top: 4px;
+  }
+  .step-description {
+    font-size: 14px;
+    font-weight: bold;
+    padding-top: 4px;
+  }
 
-.selectedInterval {
-  height: 4px;
-}
+  .selectedInterval {
+    height: 4px;
+  }
 
-.selected {
-  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 1, "opsz" 48 !important;
-}
+  .reached {
+    font-variation-settings:
+      'FILL' 1,
+      'wght' 300,
+      'GRAD' 1,
+      'opsz' 48 !important;
+  }
 
-.hasError {
-  color: red;
-}
+  .hasError {
+    color: red;
+  }
 
-.notStarted {
-  color: rgb(184, 184, 184);
-}
+  .notStarted {
+    color: rgb(184, 184, 184);
+  }
 
-.evaluated {
-  background-color: rgb(184, 184, 184);
-}
+  .evaluated {
+    background-color: rgb(184, 184, 184);
+  }
 
-span {
-  cursor: pointer;
-  font-size:2rem;
-  display:flex;
-}
-
-.material-symbols-sharp {
-  font-size: 2rem;
-  font-variation-settings:
-  'FILL' 0,
-  'wght' 300,
-  'GRAD' 0,
-  'opsz' 24
-}
+  span {
+    cursor: pointer;
+    font-size: 2rem;
+    display: flex;
+  }
 
+  .material-symbols-sharp {
+    font-size: 2rem;
+    font-variation-settings:
+      'FILL' 0,
+      'wght' 300,
+      'GRAD' 0,
+      'opsz' 24;
+  }
 `;
 export {
   o as default

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

@@ -2,18 +2,49 @@ import { LitElement } from 'lit';
 import { StepProps } from './nve-step/nve-step.component';
 export default class NveStepper extends LitElement {
     static styles: import("lit").CSSResult[];
+    /**
+     * Hvilken retning steppene skal gå. TODO: implementer vertical
+     */
     orientation: 'horizontal' | 'vertical';
-    selectedStep: number;
+    /**
+     * Indeks for valgt steg, gir mulighet for å styre hvilket steg som er valgt.
+     */
+    selectedStepIndex: {
+        value: number;
+    };
+    /**
+     * Avstand mellom steppene
+     */
     spaceBetweenSteps: number;
+    /**
+     * Hvilken ikonbibliotek som skal brukes, Sharp eller Outlined.
+     */
     iconLibrary: 'Outlined' | 'Sharp';
+    /**
+     * Mulighet om å endre teksten på knapp ved siste steg,
+     * default er disabled neste.
+     */
+    optionalEndButton: string;
+    /**
+     * Steppene som skal vises, se StepProps interface for data som skal sendes inn.
+     */
     steps: StepProps[];
-    stepWidth: number;
+    /**
+     * Ved endring av props, re-render komponenten eksternt med document.querySelector("nve-stepper")?.reRender();
+     * Ellers vil man ikke se endringene før intern state endres.
+     */
+    reRender(): void;
     firstUpdated(): void;
     nextStep(): void;
     prevStep(): void;
     selectStep(event: any): void;
     setStep(index: number): void;
+    /**
+     * Sjekker om vi er på start eller slutten av steppene
+     * @returns 'start', 'end' eller undefined
+     */
     getExtremes(): "start" | "end" | undefined;
+    onComplete(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
@@ -22,7 +53,9 @@ declare global {
     }
 }
 export interface StepperProps {
-    selectedStep: number;
+    selectedStepIndex: {
+        value: number;
+    };
     steps: StepProps[];
     spaceBetweenSteps: number;
 }

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

@@ -1,59 +1,78 @@
-import { s as d, x as l } from "../../chunks/lit-element.js";
-import { n as p, t as S } from "../../chunks/property.js";
-import { StepState as h } from "./nve-step/nve-step.component.js";
-import f from "./nve-stepper.styles.js";
+import { s as c, x as h } from "../../chunks/lit-element.js";
+import { n as r, t as v } from "../../chunks/property.js";
+import { StepState as l } from "./nve-step/nve-step.component.js";
+import u from "./nve-stepper.styles.js";
 import "./nve-step/nve-step.styles.js";
-var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (e, t, o, n) => {
-  for (var i = n > 1 ? void 0 : n ? y(t, o) : t, a = e.length - 1, c; a >= 0; a--)
-    (c = e[a]) && (i = (n ? c(t, o, i) : c(i)) || i);
-  return n && i && v(t, o, i), i;
+var S = Object.defineProperty, y = Object.getOwnPropertyDescriptor, n = (e, t, o, p) => {
+  for (var i = p > 1 ? void 0 : p ? y(t, o) : t, a = e.length - 1, d; a >= 0; a--)
+    (d = e[a]) && (i = (p ? d(t, o, i) : d(i)) || i);
+  return p && i && S(t, o, i), i;
 };
-let s = class extends d {
+let s = class extends c {
   constructor() {
-    super(...arguments), this.orientation = "horizontal", this.spaceBetweenSteps = 200, this.iconLibrary = "Outlined", this.steps = new Array(), this.stepWidth = 100;
+    super(...arguments), this.orientation = "horizontal", this.selectedStepIndex = { value: 0 }, this.spaceBetweenSteps = 200, this.iconLibrary = "Outlined", this.optionalEndButton = "", this.steps = new Array();
+  }
+  /**
+   * Ved endring av props, re-render komponenten eksternt med document.querySelector("nve-stepper")?.reRender();
+   * Ellers vil man ikke se endringene før intern state endres.
+   */
+  reRender() {
+    this.requestUpdate();
   }
   firstUpdated() {
-    this.setStep(this.selectedStep);
+    this.setStep(this.selectedStepIndex.value);
   }
   nextStep() {
-    this.selectedStep < this.steps.length - 1 && this.setStep(this.selectedStep + 1);
+    this.selectedStepIndex.value < this.steps.length - 1 && this.setStep(this.selectedStepIndex.value + 1);
   }
   prevStep() {
-    this.selectedStep > 0 && this.setStep(this.selectedStep - 1);
+    this.selectedStepIndex.value > 0 && this.setStep(this.selectedStepIndex.value - 1);
   }
   selectStep(e) {
-    e.detail.index > 0 && this.steps[e.detail.index - 1].state == h.NotStarted || this.setStep(e.detail.index);
+    e.detail.index > 0 && this.steps[e.detail.index - 1].state == l.NotStarted || this.setStep(e.detail.index);
   }
   setStep(e) {
     if (this.steps[e].readyForEntrance) {
-      this.selectedStep = e;
+      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 < h.Done && (this.steps[t].state = h.Started), this.steps = [...this.steps];
+        this.steps[t].isSelected = t === e, t <= e && this.steps[t].state !== l.Done && (this.steps[t].state = l.Started), this.steps = [...this.steps];
     }
   }
+  /**
+   * Sjekker om vi er på start eller slutten av steppene
+   * @returns 'start', 'end' eller undefined
+   */
   getExtremes() {
-    if (this.selectedStep === 0)
+    if (this.selectedStepIndex.value === 0)
       return "start";
-    if (this.selectedStep === this.steps.length - 1)
+    if (this.selectedStepIndex.value === this.steps.length - 1)
       return "end";
   }
+  onComplete() {
+    this.dispatchEvent(new CustomEvent("complete", { bubbles: !0 }));
+  }
   render() {
-    return l`
+    return h`
       <div class="stepper ${this.orientation}">
-        <nve-button .disabled=${this.getExtremes() === "start"} size="medium" variant="primary" @click=${this.prevStep}
-          ><nve-icon slot="prefix" name="navigate_before" library="${this.iconLibrary}"></nve-icon>Forrige</nve-button
-        >
+        <div style="width: 120px">
+          <nve-button
+            .disabled=${this.getExtremes() === "start"}
+            size="medium"
+            variant="primary"
+            @click=${this.prevStep}
+            ><nve-icon slot="prefix" name="navigate_before" library="${this.iconLibrary}"></nve-icon>Forrige</nve-button
+          >
+        </div>
         <div class="flex-container">
           ${this.steps.map(
-      (e, t) => l`
+      (e, t) => h`
               <nve-step
                 @clicked=${this.selectStep}
                 .iconLibrary=${this.iconLibrary}
-                .icons=${e.icons}
                 .title=${e.title}
                 .description=${e.description}
                 .state=${e.state}
-                .stepperIndex=${this.selectedStep}
+                .selectedStepIndex=${this.selectedStepIndex.value}
                 .isSelected=${e.isSelected}
                 .isLast=${t === this.steps.length - 1}
                 .index=${t}
@@ -65,31 +84,42 @@ let s = class extends d {
             `
     )}
         </div>
-        <nve-button .disabled=${this.getExtremes() === "end"} size="medium" variant="primary" @click=${this.nextStep}>
-          <nve-icon slot="suffix" name="navigate_next" library="${this.iconLibrary}"></nve-icon>Neste</nve-button
-        >
+        <div style="width: 120px">
+          <nve-button
+            .disabled=${this.getExtremes() === "end" && this.optionalEndButton === ""}
+            size="medium"
+            variant="primary"
+            @click=${this.getExtremes() === "end" && this.optionalEndButton !== "" ? this.onComplete : this.nextStep}
+          >
+            <nve-icon slot="suffix" name="navigate_next" library="${this.iconLibrary}"></nve-icon>
+            ${this.getExtremes() === "end" && this.optionalEndButton !== "" ? this.optionalEndButton : "Neste"}
+          </nve-button>
+        </div>
       </div>
     `;
   }
 };
-s.styles = [f];
-r([
-  p()
+s.styles = [u];
+n([
+  r()
 ], s.prototype, "orientation", 2);
-r([
-  p({ type: Number })
-], s.prototype, "selectedStep", 2);
-r([
-  p({ type: Number })
+n([
+  r({ type: Object })
+], s.prototype, "selectedStepIndex", 2);
+n([
+  r({ type: Number })
 ], s.prototype, "spaceBetweenSteps", 2);
-r([
-  p({ type: String })
+n([
+  r({ type: String })
 ], s.prototype, "iconLibrary", 2);
-r([
-  p({ type: Array })
+n([
+  r({ type: String })
+], s.prototype, "optionalEndButton", 2);
+n([
+  r({ type: Array })
 ], s.prototype, "steps", 2);
-s = r([
-  S("nve-stepper")
+s = n([
+  v("nve-stepper")
 ], s);
 export {
   s as default

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

@@ -1,75 +1,65 @@
 import { i as e } from "../../chunks/lit-element.js";
 const t = e`
-.stepper {
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
+  .stepper {
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
 
-a {
-  cursor: pointer;
-  user-select: none;
-}
-.step {
-  height: 200px;
-}
-button {
-  z-index: 2;
-  user-select: none;
-}
+  a {
+    cursor: pointer;
+    user-select: none;
+  }
+  .step {
+    height: 200px;
+  }
+  button {
+    z-index: 2;
+    user-select: none;
+  }
 
-.scroll-menu {
-  display: flex;
-  align-items: center;
-  overflow-x: hidden;
-}
+  .scroll-menu {
+    display: flex;
+    align-items: center;
+    overflow-x: hidden;
+  }
 
-.flex-container {
-  display: flex;
-  padding: 20px 60px 20px 60px;
-  position: relative;
-}
-.hidden {
-  visibility: hidden;
-  pointer-events: none;
-}
-:host {
-  -webkit-touch-callout: none; /* iOS Safari */
+  .flex-container {
+    display: flex;
+    padding: 20px 60px 20px 60px;
+    position: relative;
+  }
+  .hidden {
+    visibility: hidden;
+    pointer-events: none;
+  }
+  :host {
+    -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Old versions of Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Old versions of Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently
                                   supported by Chrome, Edge, Opera and Firefox */
-}
+  }
 
-.scroll-button.prev {
-  background: linear-gradient(
-    to right,
-    #ffffff,
-    #ffffff 60%,
-    transparent 100%
-  );
-  padding: 20px 80px 20px 20px;
-  margin: 0 60px;
-  position: absolute;
-  z-index: 1;
-  left: 0;
-}
-.scroll-button.next {
-  background: linear-gradient(
-    to left,
-    #ffffff,
-    #ffffff 60%,
-    transparent 100%
-  );
-  padding: 20px 80px 20px 80px;
-  position: absolute;
-  z-index: 1;
-  right: 0;
-}
+  .scroll-button.prev {
+    background: linear-gradient(to right, #ffffff, #ffffff 60%, transparent 100%);
+    padding: 20px 80px 20px 20px;
+    margin: 0 60px;
+    position: absolute;
+    z-index: 1;
+    left: 0;
+  }
+  .scroll-button.next {
+    background: linear-gradient(to left, #ffffff, #ffffff 60%, transparent 100%);
+    padding: 20px 80px 20px 80px;
+    position: absolute;
+    z-index: 1;
+    right: 0;
+  }
 `;
 export {
   t as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nve-designsystem",
-  "version": "0.1.51",
+  "version": "0.1.54",
   "exports": {
     ".": {
       "import": "./nve-designsystem.js",