nve-designsystem 0.1.86 → 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
 };