nve-designsystem 0.2.10 → 0.2.12

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

@@ -12,6 +12,8 @@ export default class NveIcon extends LitElement {
     library: 'Outlined' | 'Sharp';
     /** Navnet på ikonet i Material Symbols-biblioteket */
     name: string;
+    /** Boolean som angir om ikonet har hatt tid til å laste. */
+    private iconLoaded;
     protected firstUpdated(): void;
     render(): import('lit-html').TemplateResult<1>;
 }

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

@@ -1,35 +1,146 @@
-import { h as m, k as c } from "../../chunks/lit-element.js";
-import { n as p, t as y } from "../../chunks/property.js";
-import f from "./nve-icon.styles.js";
-var h = Object.defineProperty, d = Object.getOwnPropertyDescriptor, n = (e, s, o, a) => {
-  for (var t = a > 1 ? void 0 : a ? d(s, o) : s, i = e.length - 1, l; i >= 0; i--)
-    (l = e[i]) && (t = (a ? l(s, o, t) : l(t)) || t);
-  return a && t && h(s, o, t), t;
+import { h as U, k as z } from "../../chunks/lit-element.js";
+import { n as F, t as H } from "../../chunks/property.js";
+import { r as J } from "../../chunks/state.js";
+import K from "./nve-icon.styles.js";
+function R(r) {
+  return r && r.__esModule && Object.prototype.hasOwnProperty.call(r, "default") ? r.default : r;
+}
+var $ = { exports: {} };
+(function(r) {
+  (function() {
+    function i(e, n) {
+      document.addEventListener ? e.addEventListener("scroll", n, !1) : e.attachEvent("scroll", n);
+    }
+    function L(e) {
+      document.body ? e() : document.addEventListener ? document.addEventListener("DOMContentLoaded", function n() {
+        document.removeEventListener("DOMContentLoaded", n), e();
+      }) : document.attachEvent("onreadystatechange", function n() {
+        (document.readyState == "interactive" || document.readyState == "complete") && (document.detachEvent("onreadystatechange", n), e());
+      });
+    }
+    function p(e) {
+      this.g = document.createElement("div"), this.g.setAttribute("aria-hidden", "true"), this.g.appendChild(document.createTextNode(e)), this.h = document.createElement("span"), this.i = document.createElement("span"), this.m = document.createElement("span"), this.j = document.createElement("span"), this.l = -1, this.h.style.cssText = "max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;", this.i.style.cssText = "max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;", this.j.style.cssText = "max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;", this.m.style.cssText = "display:inline-block;width:200%;height:200%;font-size:16px;max-width:none;", this.h.appendChild(this.m), this.i.appendChild(this.j), this.g.appendChild(this.h), this.g.appendChild(this.i);
+    }
+    function s(e, n) {
+      e.g.style.cssText = "max-width:none;min-width:20px;min-height:20px;display:inline-block;overflow:hidden;position:absolute;width:auto;margin:0;padding:0;top:-999px;white-space:nowrap;font-synthesis:none;font:" + n + ";";
+    }
+    function x(e) {
+      var n = e.g.offsetWidth, t = n + 100;
+      return e.j.style.width = t + "px", e.i.scrollLeft = t, e.h.scrollLeft = e.h.scrollWidth + 100, e.l !== n ? (e.l = n, !0) : !1;
+    }
+    function y(e, n) {
+      function t() {
+        var l = u;
+        x(l) && l.g.parentNode !== null && n(l.l);
+      }
+      var u = e;
+      i(e.h, t), i(e.i, t), x(e);
+    }
+    function I(e, n, t) {
+      n = n || {}, t = t || window, this.family = e, this.style = n.style || "normal", this.weight = n.weight || "normal", this.stretch = n.stretch || "normal", this.context = t;
+    }
+    var O = null, T = null, P = null, A = null;
+    function q(e) {
+      return T === null && (N(e) && /Apple/.test(window.navigator.vendor) ? (e = /AppleWebKit\/([0-9]+)(?:\.([0-9]+))(?:\.([0-9]+))/.exec(window.navigator.userAgent), T = !!e && 603 > parseInt(e[1], 10)) : T = !1), T;
+    }
+    function N(e) {
+      return A === null && (A = !!e.document.fonts), A;
+    }
+    function v(e, n) {
+      var t = e.style, u = e.weight;
+      if (P === null) {
+        var l = document.createElement("div");
+        try {
+          l.style.font = "condensed 100px sans-serif";
+        } catch {
+        }
+        P = l.style.font !== "";
+      }
+      return [t, u, P ? e.stretch : "", "100px", n].join(" ");
+    }
+    I.prototype.load = function(e, n) {
+      var t = this, u = e || "BESbswy", l = 0, g = n || 3e3, S = (/* @__PURE__ */ new Date()).getTime();
+      return new Promise(function(k, M) {
+        if (N(t.context) && !q(t.context)) {
+          var B = new Promise(function(w, b) {
+            function d() {
+              (/* @__PURE__ */ new Date()).getTime() - S >= g ? b(Error("" + g + "ms timeout exceeded")) : t.context.document.fonts.load(v(t, '"' + t.family + '"'), u).then(function(m) {
+                1 <= m.length ? w() : setTimeout(d, 25);
+              }, b);
+            }
+            d();
+          }), G = new Promise(function(w, b) {
+            l = setTimeout(function() {
+              b(Error("" + g + "ms timeout exceeded"));
+            }, g);
+          });
+          Promise.race([G, B]).then(function() {
+            clearTimeout(l), k(t);
+          }, M);
+        } else L(function() {
+          function w() {
+            var o;
+            (o = c != -1 && h != -1 || c != -1 && f != -1 || h != -1 && f != -1) && ((o = c != h && c != f && h != f) || (O === null && (o = /AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent), O = !!o && (536 > parseInt(o[1], 10) || parseInt(o[1], 10) === 536 && 11 >= parseInt(o[2], 10))), o = O && (c == D && h == D && f == D || c == W && h == W && f == W || c == _ && h == _ && f == _)), o = !o), o && (a.parentNode !== null && a.parentNode.removeChild(a), clearTimeout(l), k(t));
+          }
+          function b() {
+            if ((/* @__PURE__ */ new Date()).getTime() - S >= g) a.parentNode !== null && a.parentNode.removeChild(a), M(Error("" + g + "ms timeout exceeded"));
+            else {
+              var o = t.context.document.hidden;
+              (o === !0 || o === void 0) && (c = d.g.offsetWidth, h = m.g.offsetWidth, f = E.g.offsetWidth, w()), l = setTimeout(b, 50);
+            }
+          }
+          var d = new p(u), m = new p(u), E = new p(u), c = -1, h = -1, f = -1, D = -1, W = -1, _ = -1, a = document.createElement("div");
+          a.dir = "ltr", s(d, v(t, "sans-serif")), s(m, v(t, "serif")), s(E, v(t, "monospace")), a.appendChild(d.g), a.appendChild(m.g), a.appendChild(E.g), t.context.document.body.appendChild(a), D = d.g.offsetWidth, W = m.g.offsetWidth, _ = E.g.offsetWidth, b(), y(d, function(o) {
+            c = o, w();
+          }), s(d, v(t, '"' + t.family + '",sans-serif')), y(m, function(o) {
+            h = o, w();
+          }), s(m, v(t, '"' + t.family + '",serif')), y(E, function(o) {
+            f = o, w();
+          }), s(E, v(t, '"' + t.family + '",monospace'));
+        });
+      });
+    }, r.exports = I;
+  })();
+})($);
+var Q = $.exports;
+const V = /* @__PURE__ */ R(Q);
+var X = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, j = (r, i, L, p) => {
+  for (var s = p > 1 ? void 0 : p ? Y(i, L) : i, x = r.length - 1, y; x >= 0; x--)
+    (y = r[x]) && (s = (p ? y(i, L, s) : y(s)) || s);
+  return p && s && X(i, L, s), s;
 };
-let r = class extends m {
+let C = class extends U {
   constructor() {
-    super(...arguments), this.library = "Sharp", this.name = "";
+    super(...arguments), this.library = "Sharp", this.name = "", this.iconLoaded = !1;
   }
   firstUpdated() {
     if (!document.getElementById(`material-icons-${this.library.toLowerCase()}`)) {
-      const e = document.createElement("link");
-      e.id = `material-icons-${this.library.toLowerCase()}`, e.rel = "stylesheet", e.href = `https://fonts.googleapis.com/css2?family=Material+Symbols+${this.library}:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200`, document.head.appendChild(e);
+      const i = document.createElement("link");
+      i.id = `material-icons-${this.library.toLowerCase()}`, i.rel = "stylesheet", i.href = `https://fonts.googleapis.com/css2?family=Material+Symbols+${this.library}:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200`, document.head.appendChild(i);
     }
+    new V(`Material Symbols ${this.library}`).load().then(() => {
+      this.iconLoaded = !0, this.requestUpdate();
+    }).catch((i) => {
+      console.error("Failed to load the icon font:", i);
+    });
   }
   render() {
-    return c`<span part="icon" style="font-family:Material Symbols ${this.library}">${this.name}</span>`;
+    return this.iconLoaded ? z`<span part="icon" style="font-family: 'Material Symbols ${this.library}'; ">${this.name}</span>` : z`<nve-skeleton class="placeholder" effect="sheen"></nve-skeleton>`;
   }
 };
-r.styles = [f];
-n([
-  p({ type: String })
-], r.prototype, "library", 2);
-n([
-  p({ reflect: !0 })
-], r.prototype, "name", 2);
-r = n([
-  y("nve-icon")
-], r);
+C.styles = [K];
+j([
+  F({ type: String })
+], C.prototype, "library", 2);
+j([
+  F({ reflect: !0 })
+], C.prototype, "name", 2);
+j([
+  J()
+], C.prototype, "iconLoaded", 2);
+C = j([
+  H("nve-icon")
+], C);
 export {
-  r as default
+  C as default
 };

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

@@ -1,5 +1,5 @@
 import { i as e } from "../../chunks/lit-element.js";
-const o = e`
+const n = e`
   /* Brukes i dropdown. Eneste måten å override shadow dom for å rotere expand_more ikonet når menyen åpner */
   :host([name='expand_more']) {
     transform: var(--icon-rotation, none);
@@ -26,7 +26,13 @@ const o = e`
     line-height: 24px;
     font-weight: var(--font-weight-regular);
   }
+
+  .placeholder::part(indicator) {
+    width: 24px; 
+    height: 24px; 
+    border-radius: 4px;
+  }
 `;
 export {
-  o as default
+  n as default
 };

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

@@ -28,6 +28,8 @@ export default class NveInput extends SlInput implements INveComponent {
      * Brukes for å kunne identifisere komponenten
      */
     inputId?: string;
+    /** Brukes for å hindre nettleseren fra å validere feltet */
+    noValidation: boolean;
     protected alreadyInvalid: boolean;
     static styles: import('lit').CSSResultGroup[];
     constructor();

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

@@ -1,4 +1,4 @@
-import { n as l, t as g } from "../../chunks/property.js";
+import { n as o, t as g } from "../../chunks/property.js";
 import { r as b } from "../../chunks/state.js";
 import { i as y, k as h } from "../../chunks/lit-element.js";
 import { d as _ } from "../../chunks/chunk.GI7VDIWX.js";
@@ -358,8 +358,8 @@ var A = y`
     this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(t);
   }
   handleKeyDown(t) {
-    const o = t.metaKey || t.ctrlKey || t.shiftKey || t.altKey;
-    t.key === "Enter" && !o && setTimeout(() => {
+    const l = t.metaKey || t.ctrlKey || t.shiftKey || t.altKey;
+    t.key === "Enter" && !l && setTimeout(() => {
       !t.defaultPrevented && !t.isComposing && this.formControlController.submit();
     });
   }
@@ -388,13 +388,13 @@ var A = y`
     this.input.select();
   }
   /** Sets the start and end positions of the text selection (0-based). */
-  setSelectionRange(t, o, s = "none") {
-    this.input.setSelectionRange(t, o, s);
+  setSelectionRange(t, l, s = "none") {
+    this.input.setSelectionRange(t, l, s);
   }
   /** Replaces a range of text with a new string. */
-  setRangeText(t, o, s, a = "preserve") {
-    const n = o ?? this.input.selectionStart, p = s ?? this.input.selectionEnd;
-    this.input.setRangeText(t, n, p, a), this.value !== this.input.value && (this.value = this.input.value);
+  setRangeText(t, l, s, a = "preserve") {
+    const n = l ?? this.input.selectionStart, u = s ?? this.input.selectionEnd;
+    this.input.setRangeText(t, n, u, a), this.value !== this.input.value && (this.value = this.input.value);
   }
   /** Displays the browser picker for an input element (only works if the browser supports it for the input type). */
   showPicker() {
@@ -425,7 +425,7 @@ var A = y`
     this.input.setCustomValidity(t), this.formControlController.updateValidity();
   }
   render() {
-    const t = this.hasSlotController.test("label"), o = this.hasSlotController.test("help-text"), s = this.label ? !0 : !!t, a = this.helpText ? !0 : !!o, p = this.clearable && !this.disabled && !this.readonly && (typeof this.value == "number" || this.value.length > 0);
+    const t = this.hasSlotController.test("label"), l = this.hasSlotController.test("help-text"), s = this.label ? !0 : !!t, a = this.helpText ? !0 : !!l, u = this.clearable && !this.disabled && !this.readonly && (typeof this.value == "number" || this.value.length > 0);
     return h`
       <div
         part="form-control"
@@ -504,7 +504,7 @@ var A = y`
               @blur=${this.handleBlur}
             />
 
-            ${p ? h`
+            ${u ? h`
                   <button
                     part="clear-button"
                     class="input__clear"
@@ -566,97 +566,97 @@ i([
   b()
 ], e.prototype, "hasFocus", 2);
 i([
-  l()
+  o()
 ], e.prototype, "title", 2);
 i([
-  l({ reflect: !0 })
+  o({ reflect: !0 })
 ], e.prototype, "type", 2);
 i([
-  l()
+  o()
 ], e.prototype, "name", 2);
 i([
-  l()
+  o()
 ], e.prototype, "value", 2);
 i([
   _()
 ], e.prototype, "defaultValue", 2);
 i([
-  l({ reflect: !0 })
+  o({ reflect: !0 })
 ], e.prototype, "size", 2);
 i([
-  l({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], e.prototype, "filled", 2);
 i([
-  l({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], e.prototype, "pill", 2);
 i([
-  l()
+  o()
 ], e.prototype, "label", 2);
 i([
-  l({ attribute: "help-text" })
+  o({ attribute: "help-text" })
 ], e.prototype, "helpText", 2);
 i([
-  l({ type: Boolean })
+  o({ type: Boolean })
 ], e.prototype, "clearable", 2);
 i([
-  l({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
 i([
-  l()
+  o()
 ], e.prototype, "placeholder", 2);
 i([
-  l({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], e.prototype, "readonly", 2);
 i([
-  l({ attribute: "password-toggle", type: Boolean })
+  o({ attribute: "password-toggle", type: Boolean })
 ], e.prototype, "passwordToggle", 2);
 i([
-  l({ attribute: "password-visible", type: Boolean })
+  o({ attribute: "password-visible", type: Boolean })
 ], e.prototype, "passwordVisible", 2);
 i([
-  l({ attribute: "no-spin-buttons", type: Boolean })
+  o({ attribute: "no-spin-buttons", type: Boolean })
 ], e.prototype, "noSpinButtons", 2);
 i([
-  l({ reflect: !0 })
+  o({ reflect: !0 })
 ], e.prototype, "form", 2);
 i([
-  l({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], e.prototype, "required", 2);
 i([
-  l()
+  o()
 ], e.prototype, "pattern", 2);
 i([
-  l({ type: Number })
+  o({ type: Number })
 ], e.prototype, "minlength", 2);
 i([
-  l({ type: Number })
+  o({ type: Number })
 ], e.prototype, "maxlength", 2);
 i([
-  l()
+  o()
 ], e.prototype, "min", 2);
 i([
-  l()
+  o()
 ], e.prototype, "max", 2);
 i([
-  l()
+  o()
 ], e.prototype, "step", 2);
 i([
-  l()
+  o()
 ], e.prototype, "autocapitalize", 2);
 i([
-  l()
+  o()
 ], e.prototype, "autocorrect", 2);
 i([
-  l()
+  o()
 ], e.prototype, "autocomplete", 2);
 i([
-  l({ type: Boolean })
+  o({ type: Boolean })
 ], e.prototype, "autofocus", 2);
 i([
-  l()
+  o()
 ], e.prototype, "enterkeyhint", 2);
 i([
-  l({
+  o({
     type: Boolean,
     converter: {
       // Allow "true|false" attribute values but keep the property boolean
@@ -666,7 +666,7 @@ i([
   })
 ], e.prototype, "spellcheck", 2);
 i([
-  l()
+  o()
 ], e.prototype, "inputmode", 2);
 i([
   m("disabled", { waitUntilFirstUpdate: !0 })
@@ -679,14 +679,14 @@ i([
 ], e.prototype, "handleValueChange", 1);
 var v = e;
 e.define("sl-input");
-var D = Object.defineProperty, F = Object.getOwnPropertyDescriptor, d = (t, o, s, a) => {
-  for (var n = a > 1 ? void 0 : a ? F(o, s) : o, p = t.length - 1, c; p >= 0; p--)
-    (c = t[p]) && (n = (a ? c(o, s, n) : c(n)) || n);
-  return a && n && D(o, s, n), n;
+var B = Object.defineProperty, D = Object.getOwnPropertyDescriptor, d = (t, l, s, a) => {
+  for (var n = a > 1 ? void 0 : a ? D(l, s) : l, u = t.length - 1, c; u >= 0; u--)
+    (c = t[u]) && (n = (a ? c(l, s, n) : c(n)) || n);
+  return a && n && B(l, s, n), n;
 };
-let u = class extends v {
+let p = class extends v {
   constructor() {
-    super(), this.requiredLabel = "*Obligatorisk", this.testId = "", this.alreadyInvalid = !1;
+    super(), this.requiredLabel = "*Obligatorisk", this.testId = "", this.noValidation = !1, this.alreadyInvalid = !1;
   }
   connectedCallback() {
     super.connectedCallback(), this.addEventListener("sl-invalid", (t) => {
@@ -697,23 +697,23 @@ let u = class extends v {
     super.disconnectedCallback(), this.removeEventListener("sl-invalid", this.makeInvalid);
   }
   firstUpdated() {
-    var o;
+    var l;
     super.firstUpdated(), this.requiredLabel && this.style.setProperty("--sl-input-required-content", `"${this.requiredLabel}"`);
-    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
+    const t = (l = this.shadowRoot) == null ? void 0 : l.querySelector("input");
     t && r(this.autocomplete) && this.autocomplete === "false" && t.setAttribute("aria-autocomplete", "none");
   }
   updated(t) {
     super.updated(t);
-    const o = this.hasAttribute("data-user-invalid");
-    t.has("inputId") && this.updateInputId(), o && !this.alreadyInvalid && this.makeInvalid(), o || this.resetValidation();
+    const l = this.hasAttribute("data-user-invalid");
+    t.has("inputId") && this.updateInputId(), l && !this.alreadyInvalid && this.makeInvalid(), l || this.resetValidation();
   }
   updateInputId() {
-    var o;
-    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
+    var l;
+    const t = (l = this.shadowRoot) == null ? void 0 : l.querySelector("input");
     t && this.inputId && (t.id = this.inputId);
   }
   makeInvalid() {
-    this.showErrorIcon(), this.showErrorMessage(), this.alreadyInvalid = !0;
+    this.noValidation || (this.showErrorIcon(), this.showErrorMessage(), this.alreadyInvalid = !0);
   }
   resetValidation() {
     this.hideErrorIcon(), this.style.setProperty("--nve-input-error-message", ""), this.alreadyInvalid = !1;
@@ -724,35 +724,38 @@ let u = class extends v {
   showErrorIcon() {
     const t = document.createElement("nve-icon");
     t.setAttribute("id", "error-icon"), t.setAttribute("name", "error"), t.setAttribute("slot", "suffix");
-    const o = getComputedStyle(document.documentElement).getPropertyValue(
+    const l = getComputedStyle(document.documentElement).getPropertyValue(
       "--feedback-background-emphasized-error"
     );
-    t.style.color = o.trim(), this.appendChild(t);
+    t.style.color = l.trim(), this.appendChild(t);
   }
   hideErrorIcon() {
     const t = this.querySelector("#error-icon");
     t && t.remove();
   }
 };
-u.styles = [v.styles, E];
+p.styles = [v.styles, E];
 d([
-  l()
-], u.prototype, "requiredLabel", 2);
+  o()
+], p.prototype, "requiredLabel", 2);
 d([
-  l({ reflect: !0 })
-], u.prototype, "errorMessage", 2);
+  o({ reflect: !0 })
+], p.prototype, "errorMessage", 2);
 d([
-  l({ reflect: !0, type: String })
-], u.prototype, "testId", 2);
+  o({ reflect: !0, type: String })
+], p.prototype, "testId", 2);
 d([
-  l({ type: String, reflect: !0 })
-], u.prototype, "inputId", 2);
+  o({ type: String, reflect: !0 })
+], p.prototype, "inputId", 2);
+d([
+  o({ type: Boolean })
+], p.prototype, "noValidation", 2);
 d([
   b()
-], u.prototype, "alreadyInvalid", 2);
-u = d([
+], p.prototype, "alreadyInvalid", 2);
+p = d([
   g("nve-input")
-], u);
+], p);
 export {
-  u as default
+  p as default
 };

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

@@ -0,0 +1,15 @@
+import { INveComponent } from '../../interfaces/NveComponent.interface';
+import { default as SlSkeleton } from '@shoelace-style/shoelace/dist/components/skeleton/skeleton.js';
+/**
+ * Skeletons  brukes til å gi en visuell representasjon av hvor innholdet til slutt vil bli tegnet.
+ */
+export default class NveSkeleton extends SlSkeleton implements INveComponent {
+    testId: string | undefined;
+    static styles: import('lit').CSSResultGroup[];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-skeleton': NveSkeleton;
+    }
+}

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

@@ -0,0 +1,113 @@
+import { n as c, t as u } from "../../chunks/property.js";
+import f from "./nve-skeleton.styles.js";
+import { i as v, k as h } from "../../chunks/lit-element.js";
+import { c as k, b as m, S as _ } from "../../chunks/chunk.5THGRZAA.js";
+import { R as y } from "../../chunks/class-map.js";
+var b = v`
+  :host {
+    --border-radius: var(--sl-border-radius-pill);
+    --color: var(--sl-color-neutral-200);
+    --sheen-color: var(--sl-color-neutral-300);
+
+    display: block;
+    position: relative;
+  }
+
+  .skeleton {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: 1rem;
+  }
+
+  .skeleton__indicator {
+    flex: 1 1 auto;
+    background: var(--color);
+    border-radius: var(--border-radius);
+  }
+
+  .skeleton--sheen .skeleton__indicator {
+    background: linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color));
+    background-size: 400% 100%;
+    animation: sheen 8s ease-in-out infinite;
+  }
+
+  .skeleton--pulse .skeleton__indicator {
+    animation: pulse 2s ease-in-out 0.5s infinite;
+  }
+
+  /* Forced colors mode */
+  @media (forced-colors: active) {
+    :host {
+      --color: GrayText;
+    }
+  }
+
+  @keyframes sheen {
+    0% {
+      background-position: 200% 0;
+    }
+    to {
+      background-position: -200% 0;
+    }
+  }
+
+  @keyframes pulse {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`, r = class extends _ {
+  constructor() {
+    super(...arguments), this.effect = "none";
+  }
+  render() {
+    return h`
+      <div
+        part="base"
+        class=${y({
+      skeleton: !0,
+      "skeleton--pulse": this.effect === "pulse",
+      "skeleton--sheen": this.effect === "sheen"
+    })}
+      >
+        <div part="indicator" class="skeleton__indicator"></div>
+      </div>
+    `;
+  }
+};
+r.styles = [k, b];
+m([
+  c()
+], r.prototype, "effect", 2);
+var d = r;
+r.define("sl-skeleton");
+var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, p = (i, o, l, t) => {
+  for (var e = t > 1 ? void 0 : t ? x(o, l) : o, a = i.length - 1, n; a >= 0; a--)
+    (n = i[a]) && (e = (t ? n(o, l, e) : n(e)) || e);
+  return t && e && g(o, l, e), e;
+};
+let s = class extends d {
+  constructor() {
+    super(), this.testId = void 0;
+  }
+};
+s.styles = [
+  d.styles,
+  f
+];
+p([
+  c({ reflect: !0, type: String })
+], s.prototype, "testId", 2);
+s = p([
+  u("nve-skeleton")
+], s);
+export {
+  s as default
+};

package/components/nve-skeleton/nve-skeleton.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

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

@@ -0,0 +1,5 @@
+import { i as t } from "../../chunks/lit-element.js";
+const s = t``;
+export {
+  s as default
+};

package/custom-elements.json

@@ -3215,6 +3215,16 @@
               "default": "''",
               "description": "Navnet på ikonet i Material Symbols-biblioteket"
             },
+            {
+              "kind": "field",
+              "name": "iconLoaded",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Boolean som angir om ikonet har hatt tid til å laste."
+            },
             {
               "kind": "method",
               "name": "firstUpdated",
@@ -3289,6 +3299,15 @@
               },
               "description": "Brukes for å kunne identifisere komponenten"
             },
+            {
+              "kind": "field",
+              "name": "noValidation",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Brukes for å hindre nettleseren fra å validere feltet"
+            },
             {
               "kind": "field",
               "name": "alreadyInvalid",
@@ -8607,6 +8626,120 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/nve-skeleton/nve-skeleton.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Skeletons  brukes til å gi en visuell representasjon av hvor innholdet til slutt vil bli tegnet.",
+          "name": "NveSkeleton",
+          "members": [
+            {
+              "kind": "field",
+              "name": "testId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined"
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "array"
+              },
+              "static": true,
+              "default": "[ SlSkeleton.styles, styles]"
+            },
+            {
+              "kind": "field",
+              "name": "effect",
+              "type": {
+                "text": "'pulse' | 'sheen' | 'none'"
+              },
+              "default": "'none'",
+              "description": "Determines which effect the skeleton will use.",
+              "attribute": "effect",
+              "inheritedFrom": {
+                "name": "SlSkeleton"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "SlSkeleton",
+            "package": "@shoelace-style/shoelace/dist/components/skeleton/skeleton.js"
+          },
+          "tagNameWithoutPrefix": "skeleton",
+          "tagName": "nve-skeleton",
+          "customElement": true,
+          "jsDoc": "/**\n * Skeletons  brukes til å gi en visuell representasjon av hvor innholdet til slutt vil bli tegnet.\n */",
+          "cssProperties": [
+            {
+              "description": "The skeleton's border radius.",
+              "name": "--border-radius",
+              "inheritedFrom": {
+                "name": "SlSkeleton"
+              }
+            },
+            {
+              "description": "The color of the skeleton.",
+              "name": "--color",
+              "inheritedFrom": {
+                "name": "SlSkeleton"
+              }
+            },
+            {
+              "description": "The sheen color when the skeleton is in its loading state.",
+              "name": "--sheen-color",
+              "inheritedFrom": {
+                "name": "SlSkeleton"
+              }
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base",
+              "inheritedFrom": {
+                "name": "SlSkeleton"
+              }
+            },
+            {
+              "description": "The skeleton's indicator which is responsible for its color and animation.",
+              "name": "indicator",
+              "inheritedFrom": {
+                "name": "SlSkeleton"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "effect",
+              "type": {
+                "text": "'pulse' | 'sheen' | 'none'"
+              },
+              "default": "'none'",
+              "description": "Determines which effect the skeleton will use.",
+              "fieldName": "effect",
+              "inheritedFrom": {
+                "name": "SlSkeleton"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NveSkeleton",
+            "module": "components/nve-skeleton/nve-skeleton.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/nve-spinner/nve-spinner.js",
@@ -10626,7 +10759,7 @@
   "package": {
     "name": "nve-designsystem",
     "description": "Designsystem for NVE",
-    "version": "0.2.9",
+    "version": "0.2.11",
     "author": {
       "name": "NVE",
       "email": "nve@nve.no"

package/nve-designsystem.d.ts

@@ -20,6 +20,7 @@ export { default as NveRadio } from './components/nve-radio/nve-radio.component'
 export { default as NveRadioButton } from './components/nve-radio-button/nve-radio-button.component';
 export { default as NveRadioGroup } from './components/nve-radio-group/nve-radio-group.component';
 export { default as NveSelect } from './components/nve-select/nve-select.component';
+export { default as NveSkeleton } from './components/nve-skeleton/nve-skeleton.component';
 export { default as NveSpinner } from './components/nve-spinner/nve-spinner.component';
 export { default as NveStep } from './components/nve-stepper/nve-step/nve-step.component';
 export { default as NveStepper } from './components/nve-stepper/nve-stepper.component';

package/nve-designsystem.js

@@ -6,9 +6,9 @@ import { default as x } from "./components/nve-checkbox-group/nve-checkbox-group
 import { default as v } from "./components/nve-darkmode-switch/nve-darkmode-switch.component.js";
 import { default as N } from "./components/nve-dialog/nve-dialog.component.js";
 import { default as n } from "./components/nve-divider/nve-divider.component.js";
-import { default as S } from "./components/nve-dropdown/nve-dropdown.component.js";
-import { default as D } from "./components/nve-icon/nve-icon.component.js";
-import { default as g } from "./components/nve-input/nve-input.component.js";
+import { default as c } from "./components/nve-dropdown/nve-dropdown.component.js";
+import { default as k } from "./components/nve-icon/nve-icon.component.js";
+import { default as b } from "./components/nve-input/nve-input.component.js";
 import { default as w } from "./components/nve-label/nve-label.component.js";
 import { default as I } from "./components/nve-menu/nve-menu.component.js";
 import { default as T } from "./components/nve-menu-item/nve-menu-item.component.js";
@@ -18,13 +18,14 @@ import { default as O } from "./components/nve-radio/nve-radio.component.js";
 import { default as j } from "./components/nve-radio-button/nve-radio-button.component.js";
 import { default as y } from "./components/nve-radio-group/nve-radio-group.component.js";
 import { default as E } from "./components/nve-select/nve-select.component.js";
-import { default as H } from "./components/nve-spinner/nve-spinner.component.js";
-import { default as K } from "./components/nve-stepper/nve-step/nve-step.component.js";
-import { default as U } from "./components/nve-stepper/nve-stepper.component.js";
-import { default as W } from "./components/nve-switch/nve-switch.component.js";
-import { default as Y } from "./components/nve-tag/nve-tag.component.js";
-import { default as _ } from "./components/nve-textarea/nve-textarea.component.js";
-import { default as ee } from "./components/nve-tooltip/nve-tooltip.component.js";
+import { default as H } from "./components/nve-skeleton/nve-skeleton.component.js";
+import { default as K } from "./components/nve-spinner/nve-spinner.component.js";
+import { default as U } from "./components/nve-stepper/nve-step/nve-step.component.js";
+import { default as W } from "./components/nve-stepper/nve-stepper.component.js";
+import { default as Y } from "./components/nve-switch/nve-switch.component.js";
+import { default as _ } from "./components/nve-tag/nve-tag.component.js";
+import { default as ee } from "./components/nve-textarea/nve-textarea.component.js";
+import { default as te } from "./components/nve-tooltip/nve-tooltip.component.js";
 export {
   t as NveAlert,
   r as NveBadge,
@@ -34,9 +35,9 @@ export {
   v as NveDarkmodeSwitch,
   N as NveDialog,
   n as NveDivider,
-  S as NveDropdown,
-  D as NveIcon,
-  g as NveInput,
+  c as NveDropdown,
+  k as NveIcon,
+  b as NveInput,
   w as NveLabel,
   I as NveMenu,
   T as NveMenuItem,
@@ -46,11 +47,12 @@ export {
   j as NveRadioButton,
   y as NveRadioGroup,
   E as NveSelect,
-  H as NveSpinner,
-  K as NveStep,
-  U as NveStepper,
-  W as NveSwitch,
-  Y as NveTag,
-  _ as NveTextarea,
-  ee as NveTooltip
+  H as NveSkeleton,
+  K as NveSpinner,
+  U as NveStep,
+  W as NveStepper,
+  Y as NveSwitch,
+  _ as NveTag,
+  ee as NveTextarea,
+  te as NveTooltip
 };

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "MIT",
   "homepage": "https://github.com/NVE/Designsystem/",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "customElements": "custom-elements.json",
   "exports": {
     ".": {
@@ -24,6 +24,7 @@
   "scripts": {},
   "dependencies": {
     "@shoelace-style/shoelace": "^2.16.0",
+    "fontfaceobserver": "^2.3.0",
     "lit": "^3.2.0"
   },
   "devDependencies": {},