nve-designsystem 0.1.83 → 0.1.85

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

@@ -9,7 +9,7 @@ export default class NveButton extends SlButton implements INveComponent {
     constructor();
     static styles: import("lit").CSSResultGroup[];
     size: 'small' | 'medium' | 'large';
-    testId: string;
+    testId: string | undefined;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -234,7 +234,7 @@ var I = Object.defineProperty, k = Object.getOwnPropertyDescriptor, d = (o, i, a
 };
 let n = class extends b {
   constructor() {
-    super(), this.size = "large", this.testId = "";
+    super(), this.size = "large", this.testId = void 0;
   }
 };
 n.styles = [b.styles, z];

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

@@ -8,6 +8,8 @@ const n = t`
     box-sizing: border-box;
     position: relative;
     border: none;
+    min-width: 48px;
+    transition: background-color 0.3s ease;
   }
 
   .button ::slotted(nve-badge) {
@@ -20,6 +22,7 @@ const n = t`
 
   :host::part(spinner) {
     --track-color: none;
+    --track-width: 2.5px;
     position: relative;
     top: 0;
     left: 0;

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

@@ -0,0 +1,23 @@
+import { INveComponent } from '../../interfaces/NveComponent.interface';
+import NveButton from '../nve-button/nve-button.component';
+/**
+ * Knapp som viser kun ikon. Den har de samme egenskapene som en vanlig nve-button.
+ *
+ * @dependency nve-icon
+ * @dependency nve-button
+ */
+export default class NveIconButton extends NveButton implements INveComponent {
+    testId: string | undefined;
+    /** Navnet på ikonet som skal vises */
+    iconName: string;
+    /** Den blir lest av hjelpemidler. Bruk den for optimal universell utforming og beskriv hva knappen gjør */
+    label: string | undefined;
+    static styles: import("lit").CSSResult[];
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-icon-button': NveIconButton;
+    }
+}

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

@@ -0,0 +1,49 @@
+import { x as v } from "../../chunks/lit-element.js";
+import { n as d, t as c } from "../../chunks/property.js";
+import h from "./nve-icon-button.styles.js";
+import "../nve-icon/nve-icon.component.js";
+import { o as e } from "../../chunks/if-defined.js";
+import u from "../nve-button/nve-button.component.js";
+var m = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (p, o, n, r) => {
+  for (var t = r > 1 ? void 0 : r ? f(o, n) : o, l = p.length - 1, a; l >= 0; l--)
+    (a = p[l]) && (t = (r ? a(o, n, t) : a(t)) || t);
+  return r && t && m(o, n, t), t;
+};
+let i = class extends u {
+  constructor() {
+    super(), this.testId = void 0, this.iconName = "", this.label = void 0;
+  }
+  render() {
+    return v`
+      <nve-button
+        aria-label=${e(this.label ? this.label : void 0)}
+        loading=${e(this.loading ? !0 : void 0)}
+        disabled=${e(this.disabled ? !0 : void 0)}
+        size=${this.size}
+        variant=${this.variant}
+        testId=${e(this.testId ? this.testId : void 0)}
+      >
+        ${e(this.loading) ? "" : v`<nve-icon
+              testId=${e(this.testId ? "icon-${this.testId}" : void 0)}
+              name=${this.iconName}
+            ></nve-icon>`}
+      </nve-button>
+    `;
+  }
+};
+i.styles = [h];
+s([
+  d({ reflect: !0, type: String })
+], i.prototype, "testId", 2);
+s([
+  d({ reflect: !0, type: String })
+], i.prototype, "iconName", 2);
+s([
+  d({ reflect: !0, type: String })
+], i.prototype, "label", 2);
+i = s([
+  c("nve-icon-button")
+], i);
+export {
+  i as default
+};

package/components/nve-icon-button/nve-icon-button.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

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

@@ -0,0 +1,32 @@
+import { i as s } from "../../chunks/lit-element.js";
+const i = s`
+  :host::part(base) {
+    min-width: 0;
+    padding: 0px var(--spacing-small);
+    gap: 0;
+  }
+
+  :host::part(spinner) {
+    margin-right: 0;
+    font-size: 24px;
+  }
+
+  :host([size='medium'])::part(base) {
+    padding: 0px var(--spacing-x-small);
+  }
+
+  :host([size='small'])::part(base) {
+    padding: 0px var(--spacing-xx-small, 4px);
+  }
+
+  :host([size='small']) ::slotted(nve-icon) {
+    font-size: 24px;
+  }
+
+  :host([circle])::part(base) {
+    border-radius: 50%;
+  }
+`;
+export {
+  i as default
+};

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
 };