nve-designsystem 1.6.4 → 1.6.6

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

@@ -1,43 +1,53 @@
-import { a as u } from "../../chunks/chunk.OV3FWA7A.js";
+import { a as f } from "../../chunks/chunk.OV3FWA7A.js";
 import "../../chunks/chunk.MMEGYRNV.js";
 import "../../chunks/chunk.6CTB5ZDJ.js";
 import "../../chunks/chunk.5YPURQKE.js";
 import "../../chunks/chunk.EMG3ZSPT.js";
-import y from "./nve-alert.styles.js";
-import { n as p, t as n } from "../../chunks/property.js";
-var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (r, l, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? v(l, i) : l, a = r.length - 1, f; a >= 0; a--)
-    (f = r[a]) && (t = (o ? f(l, i, t) : f(t)) || t);
-  return o && t && m(l, i, t), t;
+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;
 };
-let e = class extends u {
+let l = class extends f {
   constructor() {
     super(), this.title = "", this.text = "", this.saturation = null, this.leftStroke = !1;
   }
-  updated(r) {
-    super.updated(r), r.has("title") && this.style.setProperty("--nve-alert-title", `"${this.title}"`), r.has("text") && this.style.setProperty("--nve-alert-text", `"${this.text}"`);
+  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 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}"`);
+    }
   }
 };
-e.styles = [
-  u.styles,
+l.styles = [
+  f.styles,
   // we have to have this otherwise closable is not working
-  y
+  h
 ];
-s([
-  p({ reflect: !0 })
-], e.prototype, "title", 2);
-s([
-  p({ reflect: !0 })
-], e.prototype, "text", 2);
-s([
-  p({ type: String, reflect: !1 })
-], e.prototype, "saturation", 2);
-s([
-  p({ type: Boolean, reflect: !0 })
-], e.prototype, "leftStroke", 2);
-e = s([
-  n("nve-alert")
-], e);
+p([
+  n({ reflect: !0 })
+], l.prototype, "title", 2);
+p([
+  n({ reflect: !0 })
+], l.prototype, "text", 2);
+p([
+  n({ type: String, reflect: !1 })
+], l.prototype, "saturation", 2);
+p([
+  n({ type: Boolean, reflect: !0 })
+], l.prototype, "leftStroke", 2);
+l = p([
+  u("nve-alert")
+], l);
 export {
-  e as default
+  l as default
 };

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

@@ -16,6 +16,7 @@ const e = r`
     align-items: center;
     margin-left: var(--spacing-x-small, 0.5rem);
     gap: var(--spacing-medium, 1rem);
+    font: var(--body-medium);
   }
   :host::part(--sl-input-icon-color-hover) {
     font-size: 24px;
@@ -50,11 +51,15 @@ const e = r`
     font: var(--body-medium);
   }
 
-  :host::part(message)::before {
+  .alert__message::before {
     content: var(--nve-alert-title);
     font: var(--label-large);
     white-space: nowrap;
   }
+  .alert__message::after {
+    content: var(--nve-alert-text);
+    font: var(--body-medium);
+  }
 
   /*variants */
   .alert--primary {
@@ -179,6 +184,11 @@ const e = r`
   :host([leftStroke][saturation='emphasized']) .alert--warning {
     border-color: var(--feedback-background-default-warning);
   }
+
+  /* lukk-knapp. Overstyrer sl-icon-button sin border-radius */
+  sl-icon-button::part(base) {
+    border-radius: var(--border-radius-small);
+  }
 `;
 export {
   e as default

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