nve-designsystem 1.7.0 → 1.8.0

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

@@ -8,7 +8,7 @@ import { PropertyValues } from 'lit';
 export default class NveAlert extends SlAlert {
     constructor();
     /** Tykk tekst, vises helt til venstre */
-    title: string;
+    label: string;
     /** Tynnere beskrivelse tekst */
     text: string;
     /** Bestemmer sterkere bakgrunnsfarge */

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

@@ -5,49 +5,49 @@ import "../../chunks/chunk.YHLNUJ7P.js";
 import "../../chunks/chunk.4TUIT776.js";
 import h from "./nve-alert.styles.js";
 import { n, t as u } from "../../chunks/property.js";
-var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, p = (o, r, i, a) => {
-  for (var t = a > 1 ? void 0 : a ? m(r, i) : r, e = o.length - 1, s; e >= 0; e--)
-    (s = o[e]) && (t = (a ? s(r, i, t) : s(t)) || t);
-  return a && t && y(r, i, t), t;
+var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, i = (o, l, a, p) => {
+  for (var t = p > 1 ? void 0 : p ? m(l, a) : l, e = o.length - 1, s; e >= 0; e--)
+    (s = o[e]) && (t = (p ? s(l, a, t) : s(t)) || t);
+  return p && t && y(l, a, t), t;
 };
-let l = class extends f {
+let r = class extends f {
   constructor() {
-    super(), this.title = "", this.text = "", this.saturation = null, this.leftStroke = !1;
+    super(), this.label = "", this.text = "", this.saturation = null, this.leftStroke = !1;
   }
   updated(o) {
-    var r, i;
-    if (super.updated(o), o.has("title") && this.style.setProperty("--nve-alert-title", `"${this.title}"`), o.has("text")) {
-      const a = ((r = this.base.querySelector(".alert__message slot")) == null ? void 0 : r.assignedNodes().map((e) => {
+    var l, a;
+    if (super.updated(o), o.has("label") && this.style.setProperty("--nve-alert-label", `"${this.label}"`), o.has("text")) {
+      const p = ((l = this.base.querySelector(".alert__message slot")) == null ? void 0 : l.assignedNodes().map((e) => {
         var s;
         return (s = e.textContent) == null ? void 0 : s.trim();
       }).filter((e) => {
         var s;
         return ((s = e ?? "") == null ? void 0 : s.length) > 0;
-      }).length) > 0, t = ((i = this.base.querySelector(".alert__message slot")) == null ? void 0 : i.assignedNodes().filter((e) => e.childNodes.length > 0).length) > 0;
-      a || t ? this.style.setProperty("--nve-alert-text", '""') : this.style.setProperty("--nve-alert-text", `"${this.text}"`);
+      }).length) > 0, t = ((a = this.base.querySelector(".alert__message slot")) == null ? void 0 : a.assignedNodes().filter((e) => e.childNodes.length > 0).length) > 0;
+      p || t ? this.style.setProperty("--nve-alert-text", '""') : this.style.setProperty("--nve-alert-text", `"${this.text}"`);
     }
   }
 };
-l.styles = [
+r.styles = [
   f.styles,
   // we have to have this otherwise closable is not working
   h
 ];
-p([
+i([
   n({ reflect: !0 })
-], l.prototype, "title", 2);
-p([
+], r.prototype, "label", 2);
+i([
   n({ reflect: !0 })
-], l.prototype, "text", 2);
-p([
+], r.prototype, "text", 2);
+i([
   n({ type: String, reflect: !1 })
-], l.prototype, "saturation", 2);
-p([
+], r.prototype, "saturation", 2);
+i([
   n({ type: Boolean, reflect: !0 })
-], l.prototype, "leftStroke", 2);
-l = p([
+], r.prototype, "leftStroke", 2);
+r = i([
   u("nve-alert")
-], l);
+], r);
 export {
-  l as default
+  r as default
 };

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

@@ -52,7 +52,7 @@ const e = r`
   }
 
   .alert__message::before {
-    content: var(--nve-alert-title);
+    content: var(--nve-alert-label);
     font: var(--label-large);
     white-space: nowrap;
   }

package/components/nve-link-card/nve-link-card.component.d.ts

@@ -5,7 +5,7 @@ import { INveComponent } from '../../interfaces/NveComponent.interface';
  */
 export default class NveLinkCard extends LitElement implements INveComponent {
     /** Tittel som vises øverst på kortet */
-    title: string;
+    label: string;
     /** Tilleggsbeskrivelse som vises under tittelen */
     additionalText?: string;
     /** Størrelse på kortet, kan være 'small', 'medium' eller 'large' */

package/components/nve-link-card/nve-link-card.component.js

@@ -1,17 +1,17 @@
 import { i as h, E as f, x as c } from "../../chunks/lit-element.js";
-import { n as a, t as p } from "../../chunks/property.js";
+import { n as o, t as p } from "../../chunks/property.js";
 import w from "./nve-link-card.styles.js";
 var u = Object.defineProperty, m = Object.getOwnPropertyDescriptor, i = (e, l, n, s) => {
-  for (var r = s > 1 ? void 0 : s ? m(l, n) : l, o = e.length - 1, d; o >= 0; o--)
-    (d = e[o]) && (r = (s ? d(l, n, r) : d(r)) || r);
+  for (var r = s > 1 ? void 0 : s ? m(l, n) : l, a = e.length - 1, d; a >= 0; a--)
+    (d = e[a]) && (r = (s ? d(l, n, r) : d(r)) || r);
   return s && r && u(l, n, r), r;
 };
 let t = class extends h {
   constructor() {
-    super(...arguments), this.title = "", this.size = "medium", this.variant = "primary", this.testId = void 0, this.clickAction = "internal", this.href = void 0, this.downloadHandler = this.defaultDownloadHandler;
+    super(...arguments), this.label = "", this.size = "medium", this.variant = "primary", this.testId = void 0, this.clickAction = "internal", this.href = void 0, this.downloadHandler = this.defaultDownloadHandler;
   }
   /**
-   * Standard nedlastingsfunksjon som brukes hvis downloadHandler ikke er overstyrt. 
+   * Standard nedlastingsfunksjon som brukes hvis downloadHandler ikke er overstyrt.
    * Bruker lenken (href) til å laste ned en fil.
    */
   async defaultDownloadHandler() {
@@ -20,8 +20,8 @@ let t = class extends h {
       try {
         const n = await fetch(e, { mode: "cors" });
         if (!n.ok) throw new Error(`Failed to fetch file: ${n.statusText}`);
-        const s = await n.blob(), r = URL.createObjectURL(s), o = document.createElement("a");
-        o.href = r, o.download = l, document.body.appendChild(o), o.click(), document.body.removeChild(o), URL.revokeObjectURL(r);
+        const s = await n.blob(), r = URL.createObjectURL(s), a = document.createElement("a");
+        a.href = r, a.download = l, document.body.appendChild(a), a.click(), document.body.removeChild(a), URL.revokeObjectURL(r);
       } catch {
       }
     }
@@ -91,9 +91,15 @@ let t = class extends h {
   }
   render() {
     return c`
-    <a part="link-card" class="link-card link-card--${this.size} link-card--${this.variant}" tabindex="0" @click="${this.handleClick}" @keydown="${this.handleKeyDown}">
+      <a
+        part="link-card"
+        class="link-card link-card--${this.size} link-card--${this.variant}"
+        tabindex="0"
+        @click="${this.handleClick}"
+        @keydown="${this.handleKeyDown}"
+      >
         <div class="link-card__content">
-          <div part="title" class="link-card__title">${this.title}</div>
+          <div part="label" class="link-card__label">${this.label}</div>
           ${this.additionalText ? c`<div part="additional-text" class="link-card__additional-text">${this.additionalText}</div>` : f}
         </div>
         <div>
@@ -105,31 +111,31 @@ let t = class extends h {
 };
 t.styles = [w];
 i([
-  a({ reflect: !0 })
-], t.prototype, "title", 2);
+  o({ reflect: !0 })
+], t.prototype, "label", 2);
 i([
-  a({ reflect: !0 })
+  o({ reflect: !0 })
 ], t.prototype, "additionalText", 2);
 i([
-  a({ reflect: !0 })
+  o({ reflect: !0 })
 ], t.prototype, "size", 2);
 i([
-  a({ reflect: !0 })
+  o({ reflect: !0 })
 ], t.prototype, "variant", 2);
 i([
-  a({ reflect: !0 })
+  o({ reflect: !0 })
 ], t.prototype, "testId", 2);
 i([
-  a({ reflect: !0 })
+  o({ reflect: !0 })
 ], t.prototype, "clickAction", 2);
 i([
-  a({ reflect: !0 })
+  o({ reflect: !0 })
 ], t.prototype, "href", 2);
 i([
-  a()
+  o()
 ], t.prototype, "downloadHandler", 2);
 i([
-  a()
+  o()
 ], t.prototype, "customClickHandler", 2);
 t = i([
   p("nve-link-card")

package/components/nve-link-card/nve-link-card.styles.js

@@ -1,5 +1,5 @@
 import { a as r } from "../../chunks/lit-element.js";
-const n = r`
+const e = r`
   .link-card {
     border-radius: var(--borderRadius-large, 6px);
     padding: var(--spacing-medium, 16px) var(--spacing-large, 24px);
@@ -13,15 +13,15 @@ const n = r`
   }
 
   .link-card:focus {
-    outline: var(--interactive-primary-foreground-border-focus, #008FFB) solid 2px;
+    outline: var(--interactive-primary-foreground-border-focus, #008ffb) solid 2px;
   }
 
-  .link-card:hover .link-card__title {
+  .link-card:hover .link-card__label {
     text-decoration: underline;
   }
 
   .link-card:active {
-    outline: var(--interactive-primary-foreground-border-focus, #008FFB) solid 2px;
+    outline: var(--interactive-primary-foreground-border-focus, #008ffb) solid 2px;
   }
 
   .link-card--small {
@@ -37,20 +37,20 @@ const n = r`
     min-height: 70px;
   }
 
-  .link-card__title {
+  .link-card__label {
     font-size: 1rem;
-    color: var(--neutrals-foreground-primary, #0D0D0E);
-    font-family: "Source Sans Pro";
+    color: var(--neutrals-foreground-primary, #0d0d0e);
+    font-family: 'Source Sans Pro';
     font-style: normal;
     font-weight: 400;
     line-height: 150%;
   }
 
-  .link-card__title--small {
+  .link-card__label--small {
     font-size: 0.875rem;
   }
 
-  .link-card__title--large {
+  .link-card__label--large {
     font-size: 1.125rem;
   }
 
@@ -61,8 +61,8 @@ const n = r`
   }
 
   .link-card__additional-text {
-    color: var(--neutrals-foreground-primary, #0D0D0E);
-    font-family: "Source Sans Pro";
+    color: var(--neutrals-foreground-primary, #0d0d0e);
+    font-family: 'Source Sans Pro';
     font-style: normal;
     font-weight: 400;
     line-height: 120%;
@@ -71,30 +71,30 @@ const n = r`
   }
 
   .link-card--primary {
-    background: var(--neutrals-background-primary, #FFF);
+    background: var(--neutrals-background-primary, #fff);
   }
 
   .link-card--primary:hover {
-    background: var(--neutrals-background-secondary, #E4E5E7);  
+    background: var(--neutrals-background-secondary, #e4e5e7);
   }
 
   .link-card--contrast {
-    background: var(--neutrals-background-primary-contrast, #F7F7F8);  
+    background: var(--neutrals-background-primary-contrast, #f7f7f8);
   }
 
   .link-card--contrast:hover {
-    background: var(--neutrals-background-secondary, #E4E5E7);  
+    background: var(--neutrals-background-secondary, #e4e5e7);
   }
 
   .link-card--secondary {
-    background: var(--neutrals-background-secondary, #E4E5E7);  
+    background: var(--neutrals-background-secondary, #e4e5e7);
   }
 
   .link-card--secondary:hover {
     border-radius: var(--borderRadius-large, 6px);
-    border: 2px solid var(--neutrals-foreground-primary, #0D0D0E);
+    border: 2px solid var(--neutrals-foreground-primary, #0d0d0e);
   }
 `;
 export {
-  n as default
+  e as default
 };

package/components/nve-message-card/nve-message-card.component.d.ts

@@ -17,7 +17,7 @@ Brukes som veiledning i skjemaer eller som en informasjon til brukere.
 * @csspart base - hoved komponent kontainer.
 * @csspart header - header seksjonen.
 * @csspart subheader - subheader seksjonen.
-* @csspart title - tittel i header seksjonen.
+* @csspart label - tittel i header seksjonen.
 * @csspart footer - footer seksjonen.
 */
 export default class NveMessageCard extends LitElement implements INveComponent {
@@ -31,7 +31,7 @@ export default class NveMessageCard extends LitElement implements INveComponent
     /** Viser ikonen ved siden i header seksjonen */
     showIcon: 'true' | 'false';
     /** Tittel i header seksjonen */
-    title: string;
+    label: string;
     /** Beskrivelse tekst under tittelen */
     text: string;
     /** Man kan velge ikon i headeren, enten kommer en default en */

package/components/nve-message-card/nve-message-card.component.js

@@ -3,14 +3,14 @@ import { n as r, t as u } from "../../chunks/property.js";
 import { e as h } from "../../chunks/class-map.js";
 import m from "./nve-message-card.styles.js";
 import "../nve-icon/nve-icon.component.js";
-var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, t = (s, a, c, o) => {
-  for (var i = o > 1 ? void 0 : o ? g(a, c) : a, l = s.length - 1, d; l >= 0; l--)
-    (d = s[l]) && (i = (o ? d(a, c, i) : d(i)) || i);
-  return o && i && v(a, c, i), i;
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, t = (s, a, l, o) => {
+  for (var i = o > 1 ? void 0 : o ? g(a, l) : a, c = s.length - 1, d; c >= 0; c--)
+    (d = s[c]) && (i = (o ? d(a, l, i) : d(i)) || i);
+  return o && i && v(a, l, i), i;
 };
 let e = class extends p {
   constructor() {
-    super(), this.testId = "", this.saturation = null, this.size = "default", this.closable = !1, this.showIcon = "true", this.title = "", this.text = "", this.iconTitle = "", this.variant = "primary";
+    super(), this.testId = "", this.saturation = null, this.size = "default", this.closable = !1, this.showIcon = "true", this.label = "", this.text = "", this.iconTitle = "", this.variant = "primary";
   }
   handleClose() {
     var a;
@@ -60,9 +60,9 @@ let e = class extends p {
         <div class="message-card__header-container">
           <div part="header" class="message-card__header">
             <slot part="subheader" name="subheader" class="message-card__subheader"></slot>
-            <div part="title" class="message-card__header-title">
+            <div part="label" class="message-card__header-label">
               ${this.showIcon === "true" ? n`<nve-icon name=${this.determineIcon()}></nve-icon>` : null}
-              ${this.title ? n`<span>${this.title}</span>` : null}
+              ${this.label ? n`<span>${this.label}</span>` : null}
             </div>
           </div>
           ${this.closable ? n`<button type="button" class="message-card__close-btn" @click=${this.handleClose}>
@@ -93,7 +93,7 @@ t([
 ], e.prototype, "showIcon", 2);
 t([
   r({ reflect: !0 })
-], e.prototype, "title", 2);
+], e.prototype, "label", 2);
 t([
   r({ reflect: !0 })
 ], e.prototype, "text", 2);

package/components/nve-message-card/nve-message-card.styles.js

@@ -35,7 +35,7 @@ const r = e`
   }
 
   /* tittelen blir kuttet hvis for langt i utgangspunktet */
-  .message-card__header-title {
+  .message-card__header-label {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -76,7 +76,7 @@ const r = e`
 
   nve-icon::part(icon) {
     display: unset;
-    font-size: 22px
+    font-size: 22px;
   }
 
   /** Varianter */
@@ -167,13 +167,11 @@ const r = e`
     gap: var(--spacing-x-small);
   }
 
-
-
-  :host([size='compact']) .message-card__header-title {
+  :host([size='compact']) .message-card__header-label {
     font: var(--label-medium);
   }
 
-  :host([size='simple']) .message-card__header-title {
+  :host([size='simple']) .message-card__header-label {
     font: var(--label-medium-light);
   }
 

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

@@ -9,7 +9,7 @@ export declare enum StepState {
 }
 /** Interface for å definere egenskapene til et steg */
 export interface StepProps {
-    title: string;
+    label: string;
     description?: string;
     state: StepState;
     isSelected: boolean;
@@ -21,7 +21,7 @@ export interface StepProps {
 /** Komponent for et enkelt steg i en stepper */
 export default class NveStep extends LitElement {
     /** Tittel på steget */
-    title: string;
+    label: string;
     /** Indeks for steget */
     index: number;
     /** Beskrivelse av steget */
@@ -57,7 +57,7 @@ export default class NveStep extends LitElement {
     private iconForState;
     private getStateText;
     private getStateColorClass;
-    private getTitleClass;
+    private getLabelClass;
     private getIconClass;
     private getDividerColorClass;
     private renderDivider;

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

@@ -1,15 +1,15 @@
-import { i as h, x as c } from "../../../chunks/lit-element.js";
+import { i as h, x as l } from "../../../chunks/lit-element.js";
 import { n as r, 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, y = Object.getOwnPropertyDescriptor, s = (t, i, n, o) => {
-  for (var a = o > 1 ? void 0 : o ? y(i, n) : i, l = t.length - 1, d; l >= 0; l--)
-    (d = t[l]) && (a = (o ? d(i, n, a) : d(a)) || a);
-  return o && a && f(i, n, a), a;
+var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (t, i, n, a) => {
+  for (var o = a > 1 ? void 0 : a ? y(i, n) : i, c = t.length - 1, d; c >= 0; c--)
+    (d = t[c]) && (o = (a ? d(i, n, o) : d(o)) || o);
+  return a && o && f(i, n, 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 h {
   constructor() {
-    super(...arguments), this.title = "", this.index = 0, this.state = 0, this.selectedStepIndex = 0, this.isSelected = !1, this.isLast = !1, this.entranceAllowed = !1, this.orientation = "horizontal", this.hideStateText = !1, this.hideDescriptions = !1;
+    super(...arguments), this.label = "", this.index = 0, this.state = 0, this.selectedStepIndex = 0, this.isSelected = !1, this.isLast = !1, this.entranceAllowed = !1, this.orientation = "horizontal", this.hideStateText = !1, this.hideDescriptions = !1;
   }
   /** Metode som kjøres første gang komponenten er lagt til i DOM */
   firstUpdated() {
@@ -76,7 +76,7 @@ let e = class extends h {
         return "state-not-started-color";
     }
   }
-  getTitleClass(t) {
+  getLabelClass(t) {
     switch (t) {
       case 0:
         return "state-not-started-color";
@@ -103,15 +103,18 @@ let e = class extends h {
   }
   renderDivider() {
     const t = this.isOrientationVertical() ? "divider-vertical" : "divider-horizontal";
-    return this.isLast ? "" : c`
-          <div class="vertical-divider-container">
-          <div
-          class="${t} ${this.getDividerColorClass()}"
-        ></div>
+    return this.isLast ? "" : l` <div class="vertical-divider-container">
+          <div class="${t} ${this.getDividerColorClass()}"></div>
         </div>`;
   }
   renderDescription() {
-    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>` : c`<div class="step-description empty-description ${this.orientation === "vertical" ? "step-description-max-width-vertical" : "step-description-max-width-horizontal"}"></div>`;
+    return this.isDescriptionValid(this.description) ? l`<div
+      class="step-description ${this.orientation === "vertical" ? "step-description-max-width-vertical" : "step-description-max-width-horizontal"}"
+    >
+      ${this.description}
+    </div>` : l`<div
+        class="step-description empty-description ${this.orientation === "vertical" ? "step-description-max-width-vertical" : "step-description-max-width-horizontal"}"
+      ></div>`;
   }
   isDescriptionValid(t) {
     return !!t && (t == null ? void 0 : t.trim().length) > 0;
@@ -120,56 +123,52 @@ let e = class extends h {
   updateVerticalDividerHeight() {
     let n = 34;
     this.descriptionElement && (n = this.descriptionElement.offsetHeight + 24);
-    const o = this.shadowRoot.querySelector(".vertical-divider-container .divider-vertical");
-    o && (o.style.height = `${n}px`);
+    const a = this.shadowRoot.querySelector(
+      ".vertical-divider-container .divider-vertical"
+    );
+    a && (a.style.height = `${n}px`);
   }
   renderVerticalStep() {
-    return c`
+    return l`
       <div class="vertical-container">
         <div class="step-figure-vertical">
-          <div
-            class=" ${this.getIconClass(this.state)}"
-          >
+          <div class=" ${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-label step-label-vertical ${this.getLabelClass(this.state)}">${this.label}</div>
           <div class="step-state ${this.getStateColorClass(this.state)}">
             ${this.hideStateText ? "" : this.getStateText(this.state)}
           </div>
-          <div>       
-            ${this.hideDescriptions ? "" : this.renderDescription()}
-          </div>
+          <div>${this.hideDescriptions ? "" : this.renderDescription()}</div>
         </div>
       </div>
     `;
   }
   render() {
-    return this.isOrientationVertical() ? this.renderVerticalStep() : c`
-        <div class="step-figure">
-          <span
-            class=" ${this.getIconClass(this.state)}"
-          >
-            <nve-icon  slot="suffix" name="${this.iconForState(this.state)}"></nve-icon>
-          </span>
-          ${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.hideStateText ? "" : this.getStateText(this.state)}
-          </div>       
+    return this.isOrientationVertical() ? this.renderVerticalStep() : l`
+          <div class="step-figure">
+            <span class=" ${this.getIconClass(this.state)}">
+              <nve-icon slot="suffix" name="${this.iconForState(this.state)}"></nve-icon>
+            </span>
+            ${this.renderDivider()}
+          </div>
+          <div class="${this.isLast ? "" : "text-container"}">
+            <div class="step-label ${this.getLabelClass(this.state)}">${this.label}</div>
+            <div class="step-state ${this.getStateColorClass(this.state)}">
+              ${this.hideStateText ? "" : this.getStateText(this.state)}
+            </div>
             ${this.hideDescriptions ? "" : this.renderDescription()}
-        </div>
-    `;
+          </div>
+        `;
   }
 };
 e.styles = [u];
 s([
   r({ reflect: !0 })
-], e.prototype, "title", 2);
+], e.prototype, "label", 2);
 s([
   r({ type: Number })
 ], e.prototype, "index", 2);

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

@@ -43,7 +43,7 @@ const r = e`
     width: 100%;
   }
 
-  .step-title {
+  .step-label {
     color: var(--neutrals-foreground-primary, #0d0d0e);
 
     /* Label/medium */
@@ -167,7 +167,7 @@ const r = e`
     flex: 10;
   }
 
-  .step-title-vertical {
+  .step-label-vertical {
     padding-top: 0;
     align-self: flex-start;
   }

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

@@ -1,12 +1,12 @@
 import { i 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, d = (e, s, i, n) => {
-  for (var t = n > 1 ? void 0 : n ? b(s, i) : s, r = e.length - 1, o; r >= 0; r--)
-    (o = e[r]) && (t = (n ? o(s, i, t) : o(t)) || t);
-  return n && t && a(s, i, t), t;
+import { n as v, t as a } from "../../chunks/property.js";
+import h from "./nve-stepper-mobile.styles.js";
+var u = 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 && u(s, p, t), t;
 };
-let p = class extends c {
+let i = class extends c {
   constructor() {
     super(...arguments), this.steps = [], this.hideStepButtons = !1, this.selectedStepIndex = { value: 0 };
   }
@@ -25,42 +25,33 @@ let p = class extends c {
     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">
-          ${this.selectedStepIndex.value + 1} of ${this.steps.length}
-        </div>
+        <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 class="step-label">${e.label}</div>
+          ${this.hideStepButtons ? "" : l` <div>
+                ${p ? l` <div class="step-buttons next-button" @click=${this.handleNextStep}>Finish</div>` : l` <div class="step-buttons next-button" @click=${this.handleNextStep}>
+                      Neste: ${s.label}
+                    </div>`}
+                <div class="step-buttons back-button" @click=${this.handlePrevStep}>Forrige</div>
+              </div>`}
         </div>
       </div>
     `;
   }
 };
-p.styles = [u];
+i.styles = [h];
 d([
   v({ type: Array })
-], p.prototype, "steps", 2);
+], i.prototype, "steps", 2);
 d([
   v({ type: Boolean })
-], p.prototype, "hideStepButtons", 2);
-p = d([
-  h("nve-stepper-mobile")
-], p);
+], i.prototype, "hideStepButtons", 2);
+i = d([
+  a("nve-stepper-mobile")
+], i);
 export {
-  p as default
+  i as default
 };

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

@@ -10,7 +10,7 @@ const r = e`
     width: 50px;
     height: 50px;
     border-radius: 50%;
-    border: 3px solid var(--feeedback-foreground-emphasized-success, #00814B);
+    border: 3px solid var(--feeedback-foreground-emphasized-success, #00814b);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -24,38 +24,38 @@ const r = e`
     flex-direction: column;
   }
 
-  .step-title {
+  .step-label {
     font-weight: bold;
     font-size: 18px;
   }
 
   .step-description {
-    color: var(--neutrals-foreground-primary, #0D0D0E);
+    color: var(--neutrals-foreground-primary, #0d0d0e);
 
     /* Label/medium */
-    font-family: "Source Sans Pro";
+    font-family: 'Source Sans Pro';
     font-size: 1.125rem; /*18px; */
     font-style: normal;
     font-weight: 600;
-    line-height: 110%; 
+    line-height: 110%;
     padding-top: 0.75rem; /*12px;*/
   }
 
   .next-button {
-    color: var(--neutrals-foreground-primary, #0D0D0E);
+    color: var(--neutrals-foreground-primary, #0d0d0e);
   }
 
   .back-button {
-    color: var(--neutrals-foreground-subtle, #60656C);
-}   
+    color: var(--neutrals-foreground-subtle, #60656c);
+  }
 
-  .step-buttons {    
+  .step-buttons {
     /* Label/small-light */
-    font-family: "Source Sans Pro";
+    font-family: 'Source Sans Pro';
     font-size: 1rem; /*16px; */
     font-style: normal;
     font-weight: 400;
-    line-height: 110%; 
+    line-height: 110%;
     padding-top: 0.625rem; /*10px; */
     cursor: pointer;
   }

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

@@ -70,49 +70,35 @@ let s = class extends u {
   }
   renderBackButton() {
     return this.hideStepButtons ? "" : p`
-      <nve-button
-        .disabled=${this.getExtremes() === "start"}
-        size="medium"
-        variant="primary"
-        @click=${this.prevStep}
-      >
-        <nve-icon slot="prefix" name="navigate_before"></nve-icon>
-        Forrige
-      </nve-button>
-    `;
+          <nve-button
+            .disabled=${this.getExtremes() === "start"}
+            size="medium"
+            variant="primary"
+            @click=${this.prevStep}
+          >
+            <nve-icon slot="prefix" name="navigate_before"></nve-icon>
+            Forrige
+          </nve-button>
+        `;
   }
   isOrientationVertical() {
     return this.orientation === "vertical";
   }
   renderForwardButton() {
     return this.hideStepButtons ? "" : this.getExtremes() === "end" ? p`
-        <nve-button
-          size="medium"
-          variant="primary"
-          @click=${this.finishSteps}
-        >
+        <nve-button size="medium" variant="primary" @click=${this.finishSteps}>
           <nve-icon slot="suffix" name="done"></nve-icon>
           ${this.endButtonText}
         </nve-button>
       ` : p`
-      <nve-button
-        .disabled=${this.getExtremes() === "end"}
-        size="medium"
-        variant="primary"
-        @click=${this.nextStep}
-      >
+      <nve-button .disabled=${this.getExtremes() === "end"} size="medium" variant="primary" @click=${this.nextStep}>
         <nve-icon slot="suffix" name="navigate_next"></nve-icon>
         Neste
       </nve-button>
     `;
   }
   renderVerticalButtons() {
-    return this.hideStepButtons ? "" : p`
-      <div class="vertical-btn-container">
-        ${this.renderBackButton()}
-        ${this.renderForwardButton()}
-      </div>
-    `;
+    return this.hideStepButtons ? "" : p` <div class="vertical-btn-container">${this.renderBackButton()} ${this.renderForwardButton()}</div> `;
   }
   /** Hoved render-metode */
   render() {
@@ -131,7 +117,7 @@ let s = class extends u {
           ${this.steps.map(
       (e, t) => p`
               <nve-step
-                .title=${e.title}
+                .label=${e.label}
                 .description=${e.description}
                 .state=${e.state}
                 .selectedStepIndex=${this.selectedStepIndex.value}

package/custom-elements.json

@@ -73,7 +73,7 @@
           "members": [
             {
               "kind": "field",
-              "name": "title",
+              "name": "label",
               "type": {
                 "text": "string"
               },
@@ -7373,11 +7373,11 @@
           "members": [
             {
               "kind": "field",
-              "name": "title",
+              "name": "label",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
+              "default": "''",
               "description": "Tittel som vises øverst på kortet"
             },
             {
@@ -7462,7 +7462,7 @@
               "kind": "method",
               "name": "defaultDownloadHandler",
               "privacy": "private",
-              "description": "Standard nedlastingsfunksjon som brukes hvis downloadHandler ikke er overstyrt. \nBruker lenken (href) til å laste ned en fil."
+              "description": "Standard nedlastingsfunksjon som brukes hvis downloadHandler ikke er overstyrt.\nBruker lenken (href) til å laste ned en fil."
             },
             {
               "kind": "method",
@@ -8132,7 +8132,7 @@
             },
             {
               "description": "tittel i header seksjonen.",
-              "name": "title"
+              "name": "label"
             },
             {
               "description": "footer seksjonen.",
@@ -8196,7 +8196,7 @@
             },
             {
               "kind": "field",
-              "name": "title",
+              "name": "label",
               "type": {
                 "text": "string"
               },
@@ -8272,7 +8272,7 @@
           "tagNameWithoutPrefix": "message-card",
           "tagName": "nve-message-card",
           "customElement": true,
-          "jsDoc": "/** \nBrukes som veiledning i skjemaer eller som en informasjon til brukere. \n*\n*\n* Hvis du skal vise en popup som er et resultat av brukerinteraksjon (som for eksempel varsler, feil, osv.), \n* bør du gjerne bruke nve-alert. Nve-message-card skal inneholde mer informasjon og skal i utgangspunktet være \n* en statisk komponent. Den er ment for å hjelpe brukere, for eksempel i skjemaer.\n* @dependency nve-icon\n*\n* @slot subheader - Ekstra informasjon i header seksjonen\n* @slot footer - Ekstra informasjon i footer seksjonen\n*\n* @event nve-hide - Emittes når kortet lukkes.\n*\n* @csspart base - hoved komponent kontainer.\n* @csspart header - header seksjonen.\n* @csspart subheader - subheader seksjonen.\n* @csspart title - tittel i header seksjonen.\n* @csspart footer - footer seksjonen.\n*/",
+          "jsDoc": "/** \nBrukes som veiledning i skjemaer eller som en informasjon til brukere. \n*\n*\n* Hvis du skal vise en popup som er et resultat av brukerinteraksjon (som for eksempel varsler, feil, osv.), \n* bør du gjerne bruke nve-alert. Nve-message-card skal inneholde mer informasjon og skal i utgangspunktet være \n* en statisk komponent. Den er ment for å hjelpe brukere, for eksempel i skjemaer.\n* @dependency nve-icon\n*\n* @slot subheader - Ekstra informasjon i header seksjonen\n* @slot footer - Ekstra informasjon i footer seksjonen\n*\n* @event nve-hide - Emittes når kortet lukkes.\n*\n* @csspart base - hoved komponent kontainer.\n* @csspart header - header seksjonen.\n* @csspart subheader - subheader seksjonen.\n* @csspart label - tittel i header seksjonen.\n* @csspart footer - footer seksjonen.\n*/",
           "dependencies": [
             "nve-icon"
           ],
@@ -12583,7 +12583,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "En stepper-komponent brukes for å bryte ned en kompleks prosess i flere mindre, håndterbare trinn.\nHver trinn representerer en del av prosessen og brukeren kan navigere frem og tilbake mellom trinnene. \nDette gir en strukturert og intuitiv måte å fullføre flertrinnsoppgaver på, som for eksempel skjemaer eller registreringsprosesser. \nSteppers kan være enten horisontale eller vertikale, og kan tilpasses med valideringslogikk og egne knapper.",
+          "description": "En stepper-komponent brukes for å bryte ned en kompleks prosess i flere mindre, håndterbare trinn.\nHver trinn representerer en del av prosessen og brukeren kan navigere frem og tilbake mellom trinnene.\nDette gir en strukturert og intuitiv måte å fullføre flertrinnsoppgaver på, som for eksempel skjemaer eller registreringsprosesser.\nSteppers kan være enten horisontale eller vertikale, og kan tilpasses med valideringslogikk og egne knapper.",
           "name": "NveStepper",
           "members": [
             {
@@ -12860,7 +12860,7 @@
           "tagNameWithoutPrefix": "stepper",
           "tagName": "nve-stepper",
           "customElement": true,
-          "jsDoc": "/**\n * En stepper-komponent brukes for å bryte ned en kompleks prosess i flere mindre, håndterbare trinn.\n * Hver trinn representerer en del av prosessen og brukeren kan navigere frem og tilbake mellom trinnene. \n * Dette gir en strukturert og intuitiv måte å fullføre flertrinnsoppgaver på, som for eksempel skjemaer eller registreringsprosesser. \n * Steppers kan være enten horisontale eller vertikale, og kan tilpasses med valideringslogikk og egne knapper.\n */",
+          "jsDoc": "/**\n * En stepper-komponent brukes for å bryte ned en kompleks prosess i flere mindre, håndterbare trinn.\n * Hver trinn representerer en del av prosessen og brukeren kan navigere frem og tilbake mellom trinnene.\n * Dette gir en strukturert og intuitiv måte å fullføre flertrinnsoppgaver på, som for eksempel skjemaer eller registreringsprosesser.\n * Steppers kan være enten horisontale eller vertikale, og kan tilpasses med valideringslogikk og egne knapper.\n */",
           "modulePath": "src/components/nve-stepper/nve-stepper.component.ts"
         }
       ],
@@ -14233,7 +14233,7 @@
           "members": [
             {
               "kind": "field",
-              "name": "title",
+              "name": "label",
               "type": {
                 "text": "string"
               },
@@ -14432,7 +14432,7 @@
             },
             {
               "kind": "method",
-              "name": "getTitleClass",
+              "name": "getLabelClass",
               "privacy": "private",
               "return": {
                 "type": {
@@ -14571,7 +14571,7 @@
   "package": {
     "name": "nve-designsystem",
     "description": "Designsystem for NVE",
-    "version": "1.6.6",
+    "version": "1.7.0",
     "author": {
       "name": "NVE",
       "email": "nve@nve.no"

package/package.json

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