nve-designsystem 1.6.3 → 1.6.5

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

@@ -40,7 +40,9 @@ const r = e`
     align-items: center;
     gap: 8px;
     width: 100%;
-    font: var(--label-large);
+    padding: 2px 0;
+    font: var(--header-small);
+    line-height: 140%;
     :is(span) {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -49,7 +51,7 @@ const r = e`
   }
 
   .message-card__body {
-    font: var(--body-medium);
+    font: var(--body-large);
   }
 
   .message-card__close-btn {
@@ -74,7 +76,7 @@ const r = e`
 
   nve-icon::part(icon) {
     display: unset;
-    font-size: 24px;
+    font-size: 22px
   }
 
   /** Varianter */
@@ -165,11 +167,22 @@ const r = e`
     gap: var(--spacing-x-small);
   }
 
+
+
+  :host([size='compact']) .message-card__header-title {
+    font: var(--label-medium);
+  }
+
   :host([size='simple']) .message-card__header-title {
-    font: var(--label-small-light);
+    font: var(--label-medium-light);
+  }
+
+  :host([size='compact']) .message-card__body {
+    font: var(--body-small);
   }
 
-  :host([size='simple']) nve-icon::part(icon) {
+  :host([size='simple']) nve-icon::part(icon),
+  :host([size='compact']) nve-icon::part(icon) {
     font-size: 20px;
   }
 `;

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

@@ -16,6 +16,7 @@ export interface StepProps {
     readyForEntrance: boolean;
     orientation?: string;
     hideStateText?: boolean;
+    hideDescriptions?: boolean;
 }
 /** Komponent for et enkelt steg i en stepper */
 export default class NveStep extends LitElement {
@@ -24,7 +25,7 @@ export default class NveStep extends LitElement {
     /** Indeks for steget */
     index: number;
     /** Beskrivelse av steget */
-    description: string;
+    description?: string;
     /**
      * Stegets tilstand: Ikke startet, påbegynt, fullført eller feilet
      * @type {StepState}
@@ -42,6 +43,8 @@ export default class NveStep extends LitElement {
     orientation: 'horizontal' | 'vertical';
     /** Angir om stateText skal skjules */
     hideStateText: boolean;
+    /** Angir om beskrivelser skal skjules */
+    hideDescriptions: boolean;
     /** Brukes for å justere høyden for den vertikale skilleveggen blir så høy som nær Step har en description. */
     descriptionElement: HTMLElement;
     /** Metode som kjøres første gang komponenten er lagt til i DOM */

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

@@ -2,14 +2,14 @@ import { r as h, x as c } from "../../../chunks/lit-element.js";
 import { n as s, t as p } from "../../../chunks/property.js";
 import { e as v } from "../../../chunks/query.js";
 import u from "./nve-step.styles.js";
-var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (t, e, a, n) => {
-  for (var o = n > 1 ? void 0 : n ? y(e, a) : e, l = t.length - 1, d; l >= 0; l--)
-    (d = t[l]) && (o = (n ? d(e, a, o) : d(o)) || o);
-  return n && o && f(e, a, o), o;
+var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (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;
 }, 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 i = class extends h {
+let e = class extends h {
   constructor() {
-    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", this.hideStateText = !1;
+    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;
   }
   /** Metode som kjøres første gang komponenten er lagt til i DOM */
   firstUpdated() {
@@ -23,28 +23,28 @@ let i = class extends h {
     return this.orientation === "vertical";
   }
   iconForState(t) {
-    let e = "";
+    let i = "";
     switch (t) {
       case 0:
-        e = "circle";
+        i = "circle";
         break;
       case 2:
-        e = "radio_button_checked";
+        i = "radio_button_checked";
         break;
       case 1:
-        e = "trip_origin";
+        i = "trip_origin";
         break;
       case 3:
-        e = "check_circle";
+        i = "check_circle";
         break;
       case 4:
-        e = "error";
+        i = "error";
         break;
       default:
-        e = "check_circle";
+        i = "check_circle";
         break;
     }
-    return e;
+    return i;
   }
   getStateText(t) {
     switch (t) {
@@ -111,15 +111,17 @@ let i = class extends h {
         </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>` : "";
+    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>`;
   }
   isDescriptionValid(t) {
-    return t.trim().length > 0;
+    return !!t && (t == null ? void 0 : t.trim().length) > 0;
   }
   /** Brukes for beregning av riktig høyde før divider. Description elementet har padding, så høyden før divider var for kort, så bruk denne funksjonen for regner ut riktig høyde. */
   updateVerticalDividerHeight() {
-    const e = this.descriptionElement.offsetHeight + 24, a = this.shadowRoot.querySelector(".vertical-divider-container .divider-vertical");
-    a && (a.style.height = `${e}px`);
+    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`);
   }
   renderVerticalStep() {
     return c`
@@ -138,7 +140,7 @@ let i = class extends h {
             ${this.hideStateText ? "" : this.getStateText(this.state)}
           </div>
           <div>       
-          ${this.renderDescription()}
+            ${this.hideDescriptions ? "" : this.renderDescription()}
           </div>
         </div>
       </div>
@@ -157,51 +159,54 @@ let i = class extends h {
         <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)}
+            ${this.hideStateText ? "" : this.getStateText(this.state)}
           </div>       
-          ${this.renderDescription()}
+            ${this.hideDescriptions ? "" : this.renderDescription()}
         </div>
     `;
   }
 };
-i.styles = [u];
+e.styles = [u];
 r([
   s({ reflect: !0 })
-], i.prototype, "title", 2);
+], e.prototype, "title", 2);
 r([
   s({ type: Number })
-], i.prototype, "index", 2);
+], e.prototype, "index", 2);
 r([
   s({ type: String })
-], i.prototype, "description", 2);
+], e.prototype, "description", 2);
 r([
   s({ type: Number })
-], i.prototype, "state", 2);
+], e.prototype, "state", 2);
 r([
   s({ type: Number })
-], i.prototype, "selectedStepIndex", 2);
+], e.prototype, "selectedStepIndex", 2);
 r([
   s({ type: Boolean, reflect: !0 })
-], i.prototype, "isSelected", 2);
+], e.prototype, "isSelected", 2);
 r([
   s({ type: Boolean })
-], i.prototype, "isLast", 2);
+], e.prototype, "isLast", 2);
 r([
   s({ type: Boolean })
-], i.prototype, "entranceAllowed", 2);
+], e.prototype, "entranceAllowed", 2);
 r([
   s()
-], i.prototype, "orientation", 2);
+], e.prototype, "orientation", 2);
+r([
+  s({ type: Boolean })
+], e.prototype, "hideStateText", 2);
 r([
   s({ type: Boolean })
-], i.prototype, "hideStateText", 2);
+], e.prototype, "hideDescriptions", 2);
 r([
   v(".step-description")
-], i.prototype, "descriptionElement", 2);
-i = r([
+], e.prototype, "descriptionElement", 2);
+e = r([
   p("nve-step")
-], i);
+], e);
 export {
   g as StepState,
-  i as default
+  e as default
 };

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

@@ -77,6 +77,11 @@ const r = e`
     padding-top: 0.625rem; /*10px; */
   }
 
+  .empty-description {
+    min-height: 1rem; /* Set a minimum height for empty descriptions */
+    padding-top: 0.625rem; /* Match the padding of regular descriptions */
+  }
+
   .step-description-max-width-vertical {
     max-width: 430px;
     padding-bottom: var(--spacing-large, 1.5rem);

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

@@ -28,6 +28,8 @@ export interface INveStepper {
     displayMobileVersion?: boolean;
     /** Angir om stateText skal skjules for alle trinn */
     hideStateText?: boolean;
+    /** Skjuler beskrivelser for alle trinn */
+    hideDescriptions?: boolean;
 }
 /**
  * En stepper-komponent brukes for å bryte ned en kompleks prosess i flere mindre, håndterbare trinn.
@@ -51,6 +53,8 @@ export default class NveStepper extends LitElement {
     displayMobileVersion: boolean;
     /** Angir om stateText skal skjules for alle trinn */
     hideStateText: boolean;
+    /** Skjuler beskrivelser for alle trinn */
+    hideDescriptions: boolean;
     private selectedStepIndex;
     /**
      * Ved endring av props, re-render komponenten eksternt med document.querySelector("nve-stepper")?.reRender();

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

@@ -1,19 +1,19 @@
-import { r as u, x as r } from "../../chunks/lit-element.js";
-import { n as p, t as S } from "../../chunks/property.js";
+import { r as u, x as p } from "../../chunks/lit-element.js";
+import { n, t as c } from "../../chunks/property.js";
 import { StepState as h } from "./nve-step/nve-step.component.js";
-import c from "./nve-stepper.styles.js";
+import S from "./nve-stepper.styles.js";
 import "./nve-stepper-mobile.component.js";
 var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (e, t, a, o) => {
-  for (var n = o > 1 ? void 0 : o ? f(t, a) : t, d = e.length - 1, l; d >= 0; d--)
-    (l = e[d]) && (n = (o ? l(t, a, n) : l(n)) || n);
-  return o && n && v(t, a, n), n;
+  for (var r = o > 1 ? void 0 : o ? f(t, a) : t, d = e.length - 1, l; d >= 0; d--)
+    (l = e[d]) && (r = (o ? l(t, a, r) : l(r)) || r);
+  return o && r && v(t, a, r), r;
 };
 function x() {
   return /Mobi|Android/i.test(navigator.userAgent);
 }
 let s = class extends u {
   constructor() {
-    super(...arguments), this.orientation = "horizontal", this.endButtonText = "Sende", this.steps = [], this.hideStepButtons = !1, this.hideMobileStepButtons = !1, this.displayMobileVersion = !1, this.hideStateText = !1, this.selectedStepIndex = { value: 0 };
+    super(...arguments), this.orientation = "horizontal", this.endButtonText = "Sende", this.steps = [], this.hideStepButtons = !1, this.hideMobileStepButtons = !1, this.displayMobileVersion = !1, this.hideStateText = !1, this.hideDescriptions = !1, this.selectedStepIndex = { value: 0 };
   }
   /**
    * Ved endring av props, re-render komponenten eksternt med document.querySelector("nve-stepper")?.reRender();
@@ -69,7 +69,7 @@ let s = class extends u {
     this.prevStep();
   }
   renderBackButton() {
-    return this.hideStepButtons ? "" : r`
+    return this.hideStepButtons ? "" : p`
       <nve-button
         .disabled=${this.getExtremes() === "start"}
         size="medium"
@@ -85,7 +85,7 @@ let s = class extends u {
     return this.orientation === "vertical";
   }
   renderForwardButton() {
-    return this.hideStepButtons ? "" : this.getExtremes() === "end" ? r`
+    return this.hideStepButtons ? "" : this.getExtremes() === "end" ? p`
         <nve-button
           size="medium"
           variant="primary"
@@ -94,7 +94,7 @@ let s = class extends u {
           <nve-icon slot="suffix" name="done"></nve-icon>
           ${this.endButtonText}
         </nve-button>
-      ` : r`
+      ` : p`
       <nve-button
         .disabled=${this.getExtremes() === "end"}
         size="medium"
@@ -107,7 +107,7 @@ let s = class extends u {
     `;
   }
   renderVerticalButtons() {
-    return this.hideStepButtons ? "" : r`
+    return this.hideStepButtons ? "" : p`
       <div class="vertical-btn-container">
         ${this.renderBackButton()}
         ${this.renderForwardButton()}
@@ -116,7 +116,7 @@ let s = class extends u {
   }
   /** Hoved render-metode */
   render() {
-    return x() || this.displayMobileVersion ? r`
+    return x() || this.displayMobileVersion ? p`
         <nve-stepper-mobile
           .steps=${this.steps}
           .selectedStepIndex=${this.selectedStepIndex}
@@ -124,12 +124,12 @@ let s = class extends u {
           @next-step=${this.handleMobileNextStep}
           @prev-step=${this.handleMobilePrevStep}
         ></nve-stepper-mobile>
-      ` : r`
+      ` : p`
       <div class="stepper ${this.orientation}">
         ${this.isOrientationVertical() ? "" : this.renderBackButton()}
         <div class="steps-container ${this.orientation}  ${this.hideStepButtons ? "" : "steps-container-with-buttons"}">
           ${this.steps.map(
-      (e, t) => r`
+      (e, t) => p`
               <nve-step
                 .title=${e.title}
                 .description=${e.description}
@@ -141,6 +141,7 @@ let s = class extends u {
                 .readyForEntrance=${e.readyForEntrance}
                 .orientation=${this.orientation}
                 .hideStateText=${this.hideStateText}
+                .hideDescriptions=${this.hideDescriptions}
               >
               </nve-step>
             `
@@ -152,30 +153,33 @@ let s = class extends u {
     `;
   }
 };
-s.styles = [c];
+s.styles = [S];
 i([
-  p()
+  n()
 ], s.prototype, "orientation", 2);
 i([
-  p({ type: String })
+  n({ type: String })
 ], s.prototype, "endButtonText", 2);
 i([
-  p({ type: Array })
+  n({ type: Array })
 ], s.prototype, "steps", 2);
 i([
-  p({ type: Boolean })
+  n({ type: Boolean })
 ], s.prototype, "hideStepButtons", 2);
 i([
-  p({ type: Boolean })
+  n({ type: Boolean })
 ], s.prototype, "hideMobileStepButtons", 2);
 i([
-  p({ type: Boolean })
+  n({ type: Boolean })
 ], s.prototype, "displayMobileVersion", 2);
 i([
-  p({ type: Boolean })
+  n({ type: Boolean })
 ], s.prototype, "hideStateText", 2);
+i([
+  n({ type: Boolean })
+], s.prototype, "hideDescriptions", 2);
 s = i([
-  S("nve-stepper")
+  c("nve-stepper")
 ], s);
 export {
   s as default

package/custom-elements.json

@@ -10906,6 +10906,15 @@
               "default": "false",
               "description": "Angir om stateText skal skjules for alle trinn"
             },
+            {
+              "kind": "field",
+              "name": "hideDescriptions",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Skjuler beskrivelser for alle trinn"
+            },
             {
               "kind": "field",
               "name": "selectedStepIndex",
@@ -12390,9 +12399,8 @@
               "kind": "field",
               "name": "description",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
               "description": "Beskrivelse av steget"
             },
             {
@@ -12457,6 +12465,15 @@
               "default": "false",
               "description": "Angir om stateText skal skjules"
             },
+            {
+              "kind": "field",
+              "name": "hideDescriptions",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Angir om beskrivelser skal skjules"
+            },
             {
               "kind": "field",
               "name": "descriptionElement",
@@ -12638,7 +12655,7 @@
                 {
                   "name": "description",
                   "type": {
-                    "text": "string"
+                    "text": "string | undefined"
                   }
                 }
               ]
@@ -12699,7 +12716,7 @@
   "package": {
     "name": "nve-designsystem",
     "description": "Designsystem for NVE",
-    "version": "1.6.2",
+    "version": "1.6.4",
     "author": {
       "name": "NVE",
       "email": "nve@nve.no"

package/package.json

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