nve-designsystem 0.1.73 → 0.1.74

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

@@ -43,6 +43,8 @@ export default class NveStep extends LitElement {
     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. */
+    descriptionElement: HTMLElement;
     /** Metode som kjøres første gang komponenten er lagt til i DOM */
     firstUpdated(): void;
     /** Metode som kjøres hver gang komponentens oppdateres */
@@ -82,6 +84,8 @@ export default class NveStep extends LitElement {
     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 */

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

@@ -1,11 +1,12 @@
-import { s as h, x as o } from "../../../chunks/lit-element.js";
+import { s as h, x as c } from "../../../chunks/lit-element.js";
 import { n as r, t as p } from "../../../chunks/property.js";
-import v from "./nve-step.styles.js";
-var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (t, i, c, l) => {
-  for (var a = l > 1 ? void 0 : l ? f(i, c) : i, n = t.length - 1, d; n >= 0; n--)
-    (d = t[n]) && (a = (l ? d(i, c, a) : d(a)) || a);
-  return l && a && u(i, c, a), a;
-}, C = /* @__PURE__ */ ((t) => (t[t.NotStarted = 0] = "NotStarted", t[t.Started = 1] = "Started", t[t.Done = 2] = "Done", t[t.Error = 3] = "Error", t))(C || {});
+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 {
   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";
@@ -16,7 +17,7 @@ let e = class extends h {
   }
   /** Metode som kjøres hver gang komponentens oppdateres */
   updated() {
-    this.style.setProperty("line-color", this.isLast ? "0" : "1");
+    this.isOrientationVertical() && this.updateVerticalDividerHeight(), this.style.setProperty("line-color", this.isLast ? "0" : "1");
   }
   /** Sjekker om orienteringen er vertikal */
   isOrientationVertical() {
@@ -125,10 +126,15 @@ let e = class extends h {
   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 ? "" : o`
+    return this.isLast ? "" : c`
           <div class="vertical-divider-container">
           <div
           style="${this.isOrientationVertical() ? `height:${this.spaceBetweenSteps}px` : `min-width:${this.spaceBetweenSteps}px`}"
@@ -138,11 +144,11 @@ let e = class extends h {
   }
   /** Render beskrivelsen av steget */
   renderDescription() {
-    return this.description ? o`<div class="step-description">${this.description}</div>` : "";
+    return this.description ? c`<div class="step-description ${this.orientation === "vertical" ? "step-description-max-width-vertical" : "step-description-max-width-horizontal"}">${this.description}</div>` : "";
   }
   /** Render vertikalt steg */
   renderVerticalStep() {
-    return o`
+    return c`
       <div class="vertical-container">
         <div class="step-figure-vertical">
           <div
@@ -157,15 +163,17 @@ let e = class extends h {
           <div class="step-title step-title-vertical ${this.getTitleClass(this.state)}">${this.title}</div>
           <div class="step-state ${this.getStateColorClass(this.state)}">
             ${this.getStateText(this.state)}
-          </div>       
+          </div>
+          <div>       
           ${this.renderDescription()}
+          </div>
         </div>
       </div>
     `;
   }
   /** Render metoden for komponenten */
   render() {
-    return this.isOrientationVertical() ? this.renderVerticalStep() : o`
+    return this.isOrientationVertical() ? this.renderVerticalStep() : c`
         <div class="step-figure">
           <span
             @click="${this.onClick}"
@@ -185,7 +193,7 @@ let e = class extends h {
     `;
   }
 };
-e.styles = [v];
+e.styles = [u];
 s([
   r({ reflect: !0 })
 ], e.prototype, "title", 2);
@@ -219,10 +227,13 @@ s([
 s([
   r()
 ], e.prototype, "orientation", 2);
+s([
+  v(".step-description")
+], e.prototype, "descriptionElement", 2);
 e = s([
   p("nve-step")
 ], e);
 export {
-  C as StepState,
+  y as StepState,
   e as default
 };

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

@@ -1,148 +1,171 @@
 import { i as e } from "../../../chunks/lit-element.js";
-const o = e`
+const r = e`
   :host {
-    flex-grow: var(--flex-grow, 1);
-  }
-
-  .step-figure {
-    position: relative;
-    display: flex;
-    align-items: center;
-    font-size: 2rem;
-  }
-
-  .filled-icon {
-    font-variation-settings:
-      'FILL' 1,
-      'wght' 300,
-      'GRAD' 1,
-      'opsz' 48 !important;
-  }
-
-  .clickable {
-    cursor: pointer;
-  }
-
-  .disable-click {  
-    cursor: default;
-  }
-
-  .divider-horizontal {
-    height: 2px;
-    flex-grow: 1;
-  }
-
-  .text-container {
-    padding-right: 1.5rem; /*24px; */
-  }
-
-  .step-title {
-    color: var(--neutrals-foreground-primary, #0D0D0E);
-
-    /* Label/medium */
-    font-family: "Source Sans Pro";
-    font-size: 1.125rem; /*18px; */
-    font-style: normal;
-    font-weight: 600;
-    line-height: 110%; 
-    padding-top: 0.75rem; /*12px;*/
-  }
-
-  .step-state {
-    /* Label/x-small-light */
-    font-family: "Source Sans Pro";
-    font-size: 0.875rem;/*14px;*/
-    font-style: normal;
-    font-weight: 400;
-    line-height: 110%; 
-    padding-top: 0.25rem; /*4px;*/
-
-  }
-
-  .step-description {
-    color: var(--neutrals-foreground-primary, #0D0D0E);
-    
-    /* Label/small-light */
-    font-family: "Source Sans Pro";
-    font-size: 1rem; /*16px; */
-    font-style: normal;
-    font-weight: 400;
-    line-height: 110%; 
-    padding-top: 0.625rem; /*10px; */
-  }
-
-
-  .divider-not-reached-color {
-    /* TODO the token --neutrals-background-secondary gives wrong color #c8eaf9 instead of #E4E5E7
-    color:var(--neutrals-background-secondary, #E4E5E7); */
-    background:#E4E5E7; 
-}
-
-  .divider-reached-color {
-    background: var(--neutrals-foreground-primary, #0D0D0E);
-  }
-
-  .state-not-started-icon-color {
-    /* TODO the token --neutrals-background-secondary gives wrong color #c8eaf9 instead of #E4E5E7
-    color:var(--neutrals-background-secondary, #E4E5E7); */
-    color:#E4E5E7; 
-  }
-
-  .state-not-started-color {
-    color: var(--neutrals-foreground-subtle, #60656C);
-  }
-
-  .state-started-color {
-    color: var(--feedback-background-emphasized-info, #1E6FDC);
-  }
-
-  .state-done-color {
-    /* TODO the token feeedback is misspelled, should be feedback but --feedback-foreground-emphasized-success gives color */
-    color: var(--feeedback-foreground-emphasized-success, #00814B);
-  }
-
-  .state-error-color {
-    color: var(--feedback-background-emphasized-error, #CC0000);
-  }
-
-  .vertical-container {
-    display: flex;
-    align-items: flex-start; 
-  }
-
-  .divider-horizontal {
-    height: 2px;
-    flex-grow: 1;
-  }
-
-  .divider-vertical {
-    width: 2px;
-    align-self: stretch;
-  }
-
-  .step-figure-vertical { 
-    display: flex;
-    font-size: 2rem;
-    flex-direction: column; 
-  }  
-
-  .vertical-divider-container {
-    display: flex;
-    justify-content: center;
-    padding-top: 1.5px;
-  }
+  flex-grow: var(--flex-grow, 1);
+}
+
+.step-figure {
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-size: 2rem;
+  width: 100%;
+}
+
+.filled-icon {
+  font-variation-settings:
+    'FILL' 1,
+    'wght' 300,
+    'GRAD' 1,
+    'opsz' 48 !important;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.disable-click {  
+  cursor: default;
+}
+
+.divider-horizontal {
+  height: 2px;
+  flex-grow: 1;
+  width: 100%;
+}
+
+.text-container {
+  padding-right: 1.5rem; /*24px; */
+  width: 100%;
+}
+
+.step-title {
+  color: var(--neutrals-foreground-primary, #0D0D0E);
+
+  /* Label/medium */
+  font-family: "Source Sans Pro";
+  font-size: 1.125rem; /*18px; */
+  font-style: normal;
+  font-weight: 600;
+  line-height: 110%; 
+  padding-top: 0.75rem; /*12px;*/
+}
+
+.step-state {
+  /* Label/x-small-light */
+  font-family: "Source Sans Pro";
+  font-size: 0.875rem;/*14px;*/
+  font-style: normal;
+  font-weight: 400;
+  line-height: 110%; 
+  padding-top: 0.25rem; /*4px;*/
+
+}
+
+.step-description {
+  color: var(--neutrals-foreground-primary, #0D0D0E);
   
-  .text-container-vertical {
-    padding-left: 1.5rem; /*24px; */
-    justify-content: center;
-  }
+  /* Label/small-light */
+  font-family: "Source Sans Pro";
+  font-size: 1rem; /*16px; */
+  font-style: normal;
+  font-weight: 400;
+  line-height: 110%; 
+  padding-top: 0.625rem; /*10px; */
+}
+
+.step-description-max-width-vertical {
+  max-width:430px; 
+  padding-bottom: var(--spacing-large, 1.5rem);
+}
+
+.step-description-max-width-horizontal {
+  max-width:150px; 
+}
+
+.divider-not-reached-color {
+  /* TODO the token --neutrals-background-secondary gives wrong color #c8eaf9 instead of #E4E5E7
+  color:var(--neutrals-background-secondary, #E4E5E7); */
+  background:#E4E5E7; 
+}
+
+.divider-reached-color {
+  background: var(--neutrals-foreground-primary, #0D0D0E);
+}
+
+.state-not-started-icon-color {
+  /* TODO the token --neutrals-background-secondary gives wrong color #c8eaf9 instead of #E4E5E7
+  color:var(--neutrals-background-secondary, #E4E5E7); */
+  color:#E4E5E7; 
+}
+
+.state-not-started-color {
+  color: var(--neutrals-foreground-subtle, #60656C);
+}
+
+.state-started-color {
+  color: var(--feedback-background-emphasized-info, #1E6FDC);
+}
+
+.state-done-color {
+  /* TODO the token feeedback is misspelled, should be feedback but --feedback-foreground-emphasized-success gives color */
+  color: var(--feeedback-foreground-emphasized-success, #00814B);
+}
+
+.state-error-color {
+  color: var(--feedback-background-emphasized-error, #CC0000);
+}
+
+.vertical-container {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.divider-horizontal {
+  height: 2px;
+  flex-grow: 1;
+  width: 100%;
+}
+
+.divider-vertical {
+  width: 2px;
+  flex-grow: 1;
+  width: 100%;
+}
+
+.step-figure-vertical { 
+  display: flex;
+  font-size: 2rem;
+  flex-direction: column; 
+  align-items: center;
+  width: 100%;
+  flex:1;
+}  
+
+.vertical-divider-container {
+  display: flex;
+  justify-content: center;
+  flex-grow: 1;
+  height: 100%;
+  width: 2px;
+  padding-top:1px;
+}
+
+.text-container-vertical {
+  padding-left: 8px;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  flex:10;
+}
 
-  .step-title-vertical {
-    padding-top: 0;
-    align-self: flex-start; 
+.step-title-vertical {
+  padding-top: 0;
+  align-self: flex-start; 
 }
 
 `;
 export {
-  o as default
+  r as default
 };

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

@@ -1,7 +1,7 @@
 import { CSSResultArray, LitElement, TemplateResult } from 'lit';
 import { StepProps } from './nve-step/nve-step.component';
 /** Interface for stepper-komponenten */
-export interface INveStepper extends HTMLElement {
+export interface INveStepper {
     /** Går til neste steg */
     nextStep?(): void;
     /** Går til forrige steg */

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

@@ -1,7 +1,7 @@
 import { s as c, x as p } from "../../chunks/lit-element.js";
-import { n, t as S } from "../../chunks/property.js";
+import { n, t as u } from "../../chunks/property.js";
 import { StepState as a } from "./nve-step/nve-step.component.js";
-import u 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, d, o) => {
   for (var r = o > 1 ? void 0 : o ? f(t, d) : t, l = e.length - 1, h; l >= 0; l--)
@@ -135,7 +135,7 @@ let s = class extends c {
       ` : p`
       <div class="stepper ${this.orientation}">
         ${this.isOrientationVertical() ? "" : this.renderBackButton()}
-        <div class="steps-container ${this.orientation}">
+        <div class="steps-container ${this.orientation}  ${this.hideStepButtons ? "" : "steps-container-with-buttons"}">
           ${this.steps.map(
       (e, t) => p`
               <nve-step
@@ -162,7 +162,7 @@ let s = class extends c {
     `;
   }
 };
-s.styles = [u];
+s.styles = [S];
 i([
   n()
 ], s.prototype, "orientation", 2);
@@ -191,7 +191,7 @@ i([
   n({ type: Boolean })
 ], s.prototype, "displayMobileVersion", 2);
 s = i([
-  S("nve-stepper")
+  u("nve-stepper")
 ], s);
 export {
   s as default

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

@@ -33,9 +33,10 @@ const n = e`
   .vertical-btn-container {
     display: flex;
     width: 100%;
-    padding: 20px 60px 20px 60px;
+    padding: 20px 60px;
     justify-content: space-between;
     box-sizing: border-box;
+    max-width: 600px;
   }
 
   .vertical {
@@ -44,11 +45,12 @@ const n = e`
 
   .steps-container {
     display: flex;
-    padding: 20px 60px 20px 60px;
     flex-grow: 1;
   }
 
-
+  .steps-container-with-buttons {
+    padding: 20px 60px;
+  }
 
 `;
 export {

package/custom-elements.json

@@ -343,6 +343,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/nve-badge/nve-badge.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.",
+          "name": "NveBadge",
+          "members": [
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "array"
+              },
+              "static": true,
+              "default": "[styles]"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "string"
+              },
+              "default": "'primary'",
+              "description": "= primary, success, neutral, warning, danger, brand"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "default": "'medium'",
+              "description": "= small, medium eller large"
+            },
+            {
+              "kind": "field",
+              "name": "low",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "= gir lysere bakgrunnsfarge"
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagNameWithoutPrefix": "badge",
+          "tagName": "nve-badge",
+          "customElement": true,
+          "jsDoc": "/**\n * En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.\n * @property {string} size = small, medium eller large\n * @property {string} variant = primary, success, neutral, warning, danger, brand\n * @property {boolean} low = gir lysere bakgrunnsfarge\n */"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NveBadge",
+            "module": "components/nve-badge/nve-badge.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/nve-button/nve-button.js",
@@ -1159,77 +1230,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/nve-badge/nve-badge.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.",
-          "name": "NveBadge",
-          "members": [
-            {
-              "kind": "field",
-              "name": "styles",
-              "type": {
-                "text": "array"
-              },
-              "static": true,
-              "default": "[styles]"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "string"
-              },
-              "default": "'primary'",
-              "description": "= primary, success, neutral, warning, danger, brand"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "string"
-              },
-              "default": "'medium'",
-              "description": "= small, medium eller large"
-            },
-            {
-              "kind": "field",
-              "name": "low",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "= gir lysere bakgrunnsfarge"
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagNameWithoutPrefix": "badge",
-          "tagName": "nve-badge",
-          "customElement": true,
-          "jsDoc": "/**\n * En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.\n * @property {string} size = small, medium eller large\n * @property {string} variant = primary, success, neutral, warning, danger, brand\n * @property {boolean} low = gir lysere bakgrunnsfarge\n */"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "NveBadge",
-            "module": "components/nve-badge/nve-badge.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/nve-checkbox/nve-checkbox.js",
@@ -9392,6 +9392,14 @@
               "default": "'horizontal'",
               "description": "Retningen stegene skal gå i: horisontal eller vertikal"
             },
+            {
+              "kind": "field",
+              "name": "descriptionElement",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "description": "Brukes for å justere høyden for den vertikale skilleveggen blir så høy som nær Step har en description."
+            },
             {
               "kind": "method",
               "name": "firstUpdated",
@@ -9557,6 +9565,16 @@
               },
               "description": "Håndterer klikk på steget"
             },
+            {
+              "kind": "method",
+              "name": "updateVerticalDividerHeight",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "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."
+            },
             {
               "kind": "method",
               "name": "renderDivider",
@@ -9633,7 +9651,7 @@
   "package": {
     "name": "nve-designsystem",
     "description": "Designsystem for NVE",
-    "version": "0.1.72",
+    "version": "0.1.73",
     "author": {
       "name": "NVE",
       "email": "nve@nve.no"

package/package.json

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