nve-designsystem 0.1.85 → 0.1.87

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

@@ -3,13 +3,16 @@ import { INveComponent } from '../../interfaces/NveComponent.interface';
 /**
  * Selveste NVE-knappen.
  * Bruk href for å gjøre den om til en link.
- * Disse feltene skal ikke brukes: circle, caret og pill
+ * Disse feltene skal ikke brukes:caret og pill
+ * Circle attributte skal brukes kun når man viser bare et ikon.
  */
 export default class NveButton extends SlButton implements INveComponent {
     constructor();
     static styles: import("lit").CSSResultGroup[];
     size: 'small' | 'medium' | 'large';
     testId: string | undefined;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,30 +1,30 @@
-import { n as r, t as y } from "../../chunks/property.js";
+import { n as i, t as y } from "../../chunks/property.js";
 import { S as v } from "../../chunks/chunk.I2FDN2OJ.js";
 import { F as C, v as g } from "../../chunks/chunk.UEQZEZFU.js";
 import { b as $ } from "../../chunks/chunk.MGOBPGE5.js";
-import { H as B } from "../../chunks/chunk.NYIIDP5N.js";
-import { L as _ } from "../../chunks/chunk.MAS2SHYD.js";
-import { S as x } from "../../chunks/chunk.2HU27ZWH.js";
-import { w as S } from "../../chunks/chunk.Q6ASPMKT.js";
-import { b as e, S as w } from "../../chunks/chunk.JS655M6J.js";
+import { H as _ } from "../../chunks/chunk.NYIIDP5N.js";
+import { L as B } from "../../chunks/chunk.MAS2SHYD.js";
+import { S } from "../../chunks/chunk.2HU27ZWH.js";
+import { w as x } from "../../chunks/chunk.Q6ASPMKT.js";
+import { b as o, S as w } from "../../chunks/chunk.JS655M6J.js";
 import { e as F } from "../../chunks/class-map.js";
 import { s as c, n as f } from "../../chunks/static.js";
-import { o as s } from "../../chunks/if-defined.js";
+import { o as n } from "../../chunks/if-defined.js";
 import { r as m } from "../../chunks/state.js";
-import { e as V } from "../../chunks/query.js";
-import z from "./nve-button.styles.js";
-var t = class extends w {
+import { e as I } from "../../chunks/query.js";
+import N from "./nve-button.styles.js";
+var e = class extends w {
   constructor() {
     super(...arguments), this.formControlController = new C(this, {
-      form: (o) => {
-        if (o.hasAttribute("form")) {
-          const i = o.getRootNode(), a = o.getAttribute("form");
-          return i.getElementById(a);
+      form: (t) => {
+        if (t.hasAttribute("form")) {
+          const r = t.getRootNode(), l = t.getAttribute("form");
+          return r.getElementById(l);
         }
-        return o.closest("form");
+        return t.closest("form");
       },
       assumeInteractionOn: ["click"]
-    }), this.hasSlotController = new B(this, "[default]", "prefix", "suffix"), this.localize = new _(this), this.hasFocus = !1, this.invalid = !1, this.title = "", this.variant = "default", this.size = "medium", this.caret = !1, this.disabled = !1, this.loading = !1, this.outline = !1, this.pill = !1, this.circle = !1, this.type = "button", this.name = "", this.value = "", this.href = "", this.rel = "noreferrer noopener";
+    }), this.hasSlotController = new _(this, "[default]", "prefix", "suffix"), this.localize = new B(this), this.hasFocus = !1, this.invalid = !1, this.title = "", this.variant = "default", this.size = "medium", this.caret = !1, this.disabled = !1, this.loading = !1, this.outline = !1, this.pill = !1, this.circle = !1, this.type = "button", this.name = "", this.value = "", this.href = "", this.rel = "noreferrer noopener";
   }
   /** Gets the validity state object */
   get validity() {
@@ -46,8 +46,8 @@ var t = class extends w {
   handleClick() {
     this.type === "submit" && this.formControlController.submit(this), this.type === "reset" && this.formControlController.reset(this);
   }
-  handleInvalid(o) {
-    this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(o);
+  handleInvalid(t) {
+    this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(t);
   }
   isButton() {
     return !this.href;
@@ -63,8 +63,8 @@ var t = class extends w {
     this.button.click();
   }
   /** Sets focus on the button. */
-  focus(o) {
-    this.button.focus(o);
+  focus(t) {
+    this.button.focus(t);
   }
   /** Removes focus from the button. */
   blur() {
@@ -83,13 +83,13 @@ var t = class extends w {
     return this.isButton() ? this.button.reportValidity() : !0;
   }
   /** Sets a custom validation message. Pass an empty string to restore validity. */
-  setCustomValidity(o) {
-    this.isButton() && (this.button.setCustomValidity(o), this.formControlController.updateValidity());
+  setCustomValidity(t) {
+    this.isButton() && (this.button.setCustomValidity(t), this.formControlController.updateValidity());
   }
   render() {
-    const o = this.isLink(), i = o ? c`a` : c`button`;
+    const t = this.isLink(), r = t ? c`a` : c`button`;
     return f`
-      <${i}
+      <${r}
         part="base"
         class=${F({
       button: !0,
@@ -116,16 +116,16 @@ var t = class extends w {
       "button--has-prefix": this.hasSlotController.test("prefix"),
       "button--has-suffix": this.hasSlotController.test("suffix")
     })}
-        ?disabled=${s(o ? void 0 : this.disabled)}
-        type=${s(o ? void 0 : this.type)}
+        ?disabled=${n(t ? void 0 : this.disabled)}
+        type=${n(t ? void 0 : this.type)}
         title=${this.title}
-        name=${s(o ? void 0 : this.name)}
-        value=${s(o ? void 0 : this.value)}
-        href=${s(o ? this.href : void 0)}
-        target=${s(o ? this.target : void 0)}
-        download=${s(o ? this.download : void 0)}
-        rel=${s(o ? this.rel : void 0)}
-        role=${s(o ? void 0 : "button")}
+        name=${n(t ? void 0 : this.name)}
+        value=${n(t ? void 0 : this.value)}
+        href=${n(t ? this.href : void 0)}
+        target=${n(t ? this.target : void 0)}
+        download=${n(t ? this.download : void 0)}
+        rel=${n(t ? this.rel : void 0)}
+        role=${n(t ? void 0 : "button")}
         aria-disabled=${this.disabled ? "true" : "false"}
         tabindex=${this.disabled ? "-1" : "0"}
         @blur=${this.handleBlur}
@@ -138,115 +138,135 @@ var t = class extends w {
         <slot name="suffix" part="suffix" class="button__suffix"></slot>
         ${this.caret ? f` <sl-icon part="caret" class="button__caret" library="system" name="caret"></sl-icon> ` : ""}
         ${this.loading ? f`<sl-spinner part="spinner"></sl-spinner>` : ""}
-      </${i}>
+      </${r}>
     `;
   }
 };
-t.styles = $;
-t.dependencies = {
-  "sl-icon": x,
+e.styles = $;
+e.dependencies = {
+  "sl-icon": S,
   "sl-spinner": v
 };
-e([
-  V(".button")
-], t.prototype, "button", 2);
-e([
+o([
+  I(".button")
+], e.prototype, "button", 2);
+o([
   m()
-], t.prototype, "hasFocus", 2);
-e([
+], e.prototype, "hasFocus", 2);
+o([
   m()
-], t.prototype, "invalid", 2);
-e([
-  r()
-], t.prototype, "title", 2);
-e([
-  r({ reflect: !0 })
-], t.prototype, "variant", 2);
-e([
-  r({ reflect: !0 })
-], t.prototype, "size", 2);
-e([
-  r({ type: Boolean, reflect: !0 })
-], t.prototype, "caret", 2);
-e([
-  r({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled", 2);
-e([
-  r({ type: Boolean, reflect: !0 })
-], t.prototype, "loading", 2);
-e([
-  r({ type: Boolean, reflect: !0 })
-], t.prototype, "outline", 2);
-e([
-  r({ type: Boolean, reflect: !0 })
-], t.prototype, "pill", 2);
-e([
-  r({ type: Boolean, reflect: !0 })
-], t.prototype, "circle", 2);
-e([
-  r()
-], t.prototype, "type", 2);
-e([
-  r()
-], t.prototype, "name", 2);
-e([
-  r()
-], t.prototype, "value", 2);
-e([
-  r()
-], t.prototype, "href", 2);
-e([
-  r()
-], t.prototype, "target", 2);
-e([
-  r()
-], t.prototype, "rel", 2);
-e([
-  r()
-], t.prototype, "download", 2);
-e([
-  r()
-], t.prototype, "form", 2);
-e([
-  r({ attribute: "formaction" })
-], t.prototype, "formAction", 2);
-e([
-  r({ attribute: "formenctype" })
-], t.prototype, "formEnctype", 2);
-e([
-  r({ attribute: "formmethod" })
-], t.prototype, "formMethod", 2);
-e([
-  r({ attribute: "formnovalidate", type: Boolean })
-], t.prototype, "formNoValidate", 2);
-e([
-  r({ attribute: "formtarget" })
-], t.prototype, "formTarget", 2);
-e([
-  S("disabled", { waitUntilFirstUpdate: !0 })
-], t.prototype, "handleDisabledChange", 1);
-var b = t;
-t.define("sl-button");
-var I = Object.defineProperty, k = Object.getOwnPropertyDescriptor, d = (o, i, a, u) => {
-  for (var l = u > 1 ? void 0 : u ? k(i, a) : i, h = o.length - 1, p; h >= 0; h--)
-    (p = o[h]) && (l = (u ? p(i, a, l) : p(l)) || l);
-  return u && l && I(i, a, l), l;
+], e.prototype, "invalid", 2);
+o([
+  i()
+], e.prototype, "title", 2);
+o([
+  i({ reflect: !0 })
+], e.prototype, "variant", 2);
+o([
+  i({ reflect: !0 })
+], e.prototype, "size", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "caret", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "loading", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "outline", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "pill", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "circle", 2);
+o([
+  i()
+], e.prototype, "type", 2);
+o([
+  i()
+], e.prototype, "name", 2);
+o([
+  i()
+], e.prototype, "value", 2);
+o([
+  i()
+], e.prototype, "href", 2);
+o([
+  i()
+], e.prototype, "target", 2);
+o([
+  i()
+], e.prototype, "rel", 2);
+o([
+  i()
+], e.prototype, "download", 2);
+o([
+  i()
+], e.prototype, "form", 2);
+o([
+  i({ attribute: "formaction" })
+], e.prototype, "formAction", 2);
+o([
+  i({ attribute: "formenctype" })
+], e.prototype, "formEnctype", 2);
+o([
+  i({ attribute: "formmethod" })
+], e.prototype, "formMethod", 2);
+o([
+  i({ attribute: "formnovalidate", type: Boolean })
+], e.prototype, "formNoValidate", 2);
+o([
+  i({ attribute: "formtarget" })
+], e.prototype, "formTarget", 2);
+o([
+  x("disabled", { waitUntilFirstUpdate: !0 })
+], e.prototype, "handleDisabledChange", 1);
+var b = e;
+e.define("sl-button");
+var V = Object.defineProperty, z = Object.getOwnPropertyDescriptor, p = (t, r, l, a) => {
+  for (var s = a > 1 ? void 0 : a ? z(r, l) : r, u = t.length - 1, d; u >= 0; u--)
+    (d = t[u]) && (s = (a ? d(r, l, s) : d(s)) || s);
+  return a && s && V(r, l, s), s;
 };
-let n = class extends b {
+let h = class extends b {
   constructor() {
     super(), this.size = "large", this.testId = void 0;
   }
+  // setter has-icon-only attributtet hvis det er kun ikone i standard sporet. Trengs for riktig styling.
+  firstUpdated() {
+    var r;
+    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".button__label");
+    if (t) {
+      const l = t.assignedNodes();
+      l.length === 1 && l[0].nodeName.toLowerCase() === "nve-icon" && this.setAttribute("has-icon-only", "");
+    }
+  }
+  // Hvis man har kun ikone i standard sporet og bruker loading attributtet, fjerner vi ikonet.
+  updated(t) {
+    var r;
+    if (super.updated(t), t.has("loading") && this.loading && this.hasAttribute("has-icon-only")) {
+      const l = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".button__label");
+      if (l) {
+        const s = l.assignedNodes().find((u) => u.nodeName.toLowerCase() === "nve-icon");
+        s && s.parentNode && s.parentNode.removeChild(s);
+      }
+    }
+  }
 };
-n.styles = [b.styles, z];
-d([
-  r({ reflect: !0 })
-], n.prototype, "size", 2);
-d([
-  r({ reflect: !0, type: String })
-], n.prototype, "testId", 2);
-n = d([
+h.styles = [b.styles, N];
+p([
+  i({ reflect: !0 })
+], h.prototype, "size", 2);
+p([
+  i({ reflect: !0, type: String })
+], h.prototype, "testId", 2);
+h = p([
   y("nve-button")
-], n);
+], h);
 export {
-  n as default
+  h as default
 };

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

@@ -1,7 +1,11 @@
 import { i as t } from "../../chunks/lit-element.js";
-const n = t`
+const a = t`
   /* kan ikke bruke gap fordi den lager rom mellom slots selv om de er tomme */
   /* derfor setter margin på ::part(label) og substraherer margin verdi i horizontal padding i selve .button klassen  */
+  :host {
+    --nve-icon-color: inherit;
+  }
+
   .button {
     width: fit-content;
     align-items: center;
@@ -12,6 +16,30 @@ const n = t`
     transition: background-color 0.3s ease;
   }
 
+  :host([has-icon-only])::part(base) {
+    gap: unset;
+  }
+
+  :host([has-icon-only]) .button--small {
+    gap: unset;
+    padding: var(--spacing-xx-small);
+    min-width: unset;
+  }
+
+  :host([has-icon-only]) .button--medium {
+    gap: unset;
+    padding: var(--spacing-x-small);
+    min-width: unset;
+  }
+
+  :host([has-icon-only][circle])::part(base) {
+    width: unset;
+  }
+
+  :host([has-icon-only][loading])::part(spinner) {
+    margin-right: 0;
+  }
+
   .button ::slotted(nve-badge) {
     position: absolute;
     top: 0;
@@ -25,16 +53,14 @@ const n = t`
     --track-width: 2.5px;
     position: relative;
     top: 0;
+    font-size: 24px;
     left: 0;
     margin-right: var(--spacing-x-small);
   }
 
   :host ::slotted(nve-icon) {
     font-size: 24px;
-  }
-
-  :host([size='small']) ::slotted(nve-icon) {
-    font-size: 20px;
+    color: var(--nve-icon-color);
   }
 
   :host::part(label) {
@@ -141,6 +167,12 @@ const n = t`
     border-radius: var(--border-radius-small, 4px);
     border: none;
   }
+
+  :host([variant='text'][circle]) .button.button--standard,
+  :host([variant='ghost'][circle]) .button.button--standard {
+    border-radius: 50%;
+  }
+
   :host([variant='text']) .button.button--standard:hover:not(.button--disabled),
   :host([variant='ghost']) .button.button--standard:hover:not(.button--disabled) {
     background-color: var(--interactive-ghost-background-hover);
@@ -175,5 +207,5 @@ const n = t`
   }
 `;
 export {
-  n as default
+  a as default
 };

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

@@ -57,6 +57,8 @@ export default class NveStep extends LitElement {
     private renderDivider;
     private renderDescription;
     private isDescriptionValid;
+    /** 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. */
+    private updateVerticalDividerHeight;
     private renderVerticalStep;
     render(): TemplateResult;
 }

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

@@ -1,13 +1,13 @@
-import { s as p, x as n } from "../../../chunks/lit-element.js";
-import { n as s, t as h } from "../../../chunks/property.js";
+import { s 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, i = (t, r, c, a) => {
-  for (var o = a > 1 ? void 0 : a ? y(r, c) : r, l = t.length - 1, d; l >= 0; l--)
-    (d = t[l]) && (o = (a ? d(r, c, o) : d(o)) || o);
-  return a && o && f(r, c, o), o;
-}, g = /* @__PURE__ */ ((t) => (t[t.NotStarted = 0] = "NotStarted", t[t.Started = 1] = "Started", t[t.Active = 2] = "Active", t[t.Done = 3] = "Done", t[t.Error = 4] = "Error", t))(g || {});
-let e = class extends p {
+var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (t, e, a, n) => {
+  for (var o = n > 1 ? void 0 : n ? g(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;
+}, y = /* @__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))(y || {});
+let i = 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";
   }
@@ -17,34 +17,34 @@ let e = class extends p {
   }
   /** 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");
   }
   isOrientationVertical() {
     return this.orientation === "vertical";
   }
   iconForState(t) {
-    let r = "";
+    let e = "";
     switch (t) {
       case 0:
-        r = "circle";
+        e = "circle";
         break;
       case 2:
-        r = "radio_button_checked";
+        e = "radio_button_checked";
         break;
       case 1:
-        r = "trip_origin";
+        e = "trip_origin";
         break;
       case 3:
-        r = "check_circle";
+        e = "check_circle";
         break;
       case 4:
-        r = "error";
+        e = "error";
         break;
       default:
-        r = "check_circle";
+        e = "check_circle";
         break;
     }
-    return r;
+    return e;
   }
   getStateText(t) {
     switch (t) {
@@ -103,7 +103,7 @@ let e = class extends p {
   }
   renderDivider() {
     const t = this.isOrientationVertical() ? "divider-vertical" : "divider-horizontal";
-    return this.isLast ? "" : n`
+    return this.isLast ? "" : c`
           <div class="vertical-divider-container">
           <div
           class="${t} ${this.getDividerColorClass()}"
@@ -111,13 +111,18 @@ let e = class extends p {
         </div>`;
   }
   renderDescription() {
-    return this.isDescriptionValid(this.description) ? n`<div class="step-description ${this.orientation === "vertical" ? "step-description-max-width-vertical" : "step-description-max-width-horizontal"}">${this.description}</div>` : "";
+    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>` : "";
   }
   isDescriptionValid(t) {
     return 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`);
+  }
   renderVerticalStep() {
-    return n`
+    return c`
       <div class="vertical-container">
         <div class="step-figure-vertical">
           <div
@@ -140,7 +145,7 @@ let e = class extends p {
     `;
   }
   render() {
-    return this.isOrientationVertical() ? this.renderVerticalStep() : n`
+    return this.isOrientationVertical() ? this.renderVerticalStep() : c`
         <div class="step-figure">
           <span
             class=" ${this.getIconClass(this.state)}"
@@ -159,41 +164,41 @@ let e = class extends p {
     `;
   }
 };
-e.styles = [u];
-i([
+i.styles = [u];
+r([
   s({ reflect: !0 })
-], e.prototype, "title", 2);
-i([
+], i.prototype, "title", 2);
+r([
   s({ type: Number })
-], e.prototype, "index", 2);
-i([
+], i.prototype, "index", 2);
+r([
   s({ type: String })
-], e.prototype, "description", 2);
-i([
+], i.prototype, "description", 2);
+r([
   s({ type: Number })
-], e.prototype, "state", 2);
-i([
+], i.prototype, "state", 2);
+r([
   s({ type: Number })
-], e.prototype, "selectedStepIndex", 2);
-i([
+], i.prototype, "selectedStepIndex", 2);
+r([
   s({ type: Boolean, reflect: !0 })
-], e.prototype, "isSelected", 2);
-i([
+], i.prototype, "isSelected", 2);
+r([
   s({ type: Boolean })
-], e.prototype, "isLast", 2);
-i([
+], i.prototype, "isLast", 2);
+r([
   s({ type: Boolean })
-], e.prototype, "entranceAllowed", 2);
-i([
+], i.prototype, "entranceAllowed", 2);
+r([
   s()
-], e.prototype, "orientation", 2);
-i([
+], i.prototype, "orientation", 2);
+r([
   v(".step-description")
-], e.prototype, "descriptionElement", 2);
-e = i([
-  h("nve-step")
-], e);
+], i.prototype, "descriptionElement", 2);
+i = r([
+  p("nve-step")
+], i);
 export {
-  g as StepState,
-  e as default
+  y as StepState,
+  i as default
 };