nve-designsystem 1.4.6 → 1.5.0

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

@@ -13,7 +13,9 @@ const a = t`
     position: relative;
     border: none;
     min-width: 48px;
-    transition: background-color 0.3s ease;
+    transition:
+      background-color 0.3s ease,
+      border-color 0.3s ease;
   }
 
   :host([has-icon-only])::part(base) {

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

@@ -1,10 +1,12 @@
 import { LitElement } from 'lit';
 /**
  * Et ikon.
- * Vi bruker ikoner fra Material Symbols.
- * Vi bruker strek-tykkelse 400 uansett størrelse på ikonet.
- * Fill skal ikke brukes.
+ * Vi bruker ikoner fra Material Symbols, men det er også mulig å bruke ikoner fra egen repo. Det anbefales sterkt å bruke Material-ikonene.
+ * Strektykkelsen skal være 400, uavhengig av ikonets størrelse, og kun stilene Sharp og Outlined skal brukes.
+ * Fill-stilen bør unngås, da den fyller hele ikonet med farge i stedet for å bruke kun konturer
  * @see https://fonts.google.com/icons
+ * @csspart icon - Selve ikon span-element.
+ * @cssproperty --icon-size - Størrelse på ikonet. 16px er standard.
  */
 export default class NveIcon extends LitElement {
     static styles: import('lit').CSSResult[];
@@ -12,6 +14,8 @@ export default class NveIcon extends LitElement {
     library: 'Outlined' | 'Sharp';
     /** Navnet på ikonet i Material Symbols-biblioteket */
     name: string;
+    src: string;
+    alt: string | undefined;
     /** Boolean som angir om ikonet har hatt tid til å laste. */
     private iconLoaded;
     protected firstUpdated(): void;

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

@@ -1,148 +1,164 @@
-import { r as U, x as z } from "../../chunks/lit-element.js";
-import { n as q, t as H } from "../../chunks/property.js";
+import { r as U, x as F } from "../../chunks/lit-element.js";
+import { n as j, t as H } from "../../chunks/property.js";
 import { r as J } from "../../chunks/state.js";
 import K from "./nve-icon.styles.js";
-function Q(s) {
+import { e as Q } from "../../chunks/class-map.js";
+import { o as V } from "../../chunks/if-defined.js";
+function X(s) {
   return s && s.__esModule && Object.prototype.hasOwnProperty.call(s, "default") ? s.default : s;
 }
-var F = { exports: {} }, k;
-function V() {
-  return k || (k = 1, function(s) {
+var I = { exports: {} }, q;
+function Y() {
+  return q || (q = 1, function(s) {
     (function() {
       function i(e, n) {
         document.addEventListener ? e.addEventListener("scroll", n, !1) : e.attachEvent("scroll", n);
       }
-      function L(e) {
+      function T(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 u(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 r(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) {
+      function E(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 v(e, n) {
+      function y(e, n) {
         function t() {
-          var l = p;
-          x(l) && l.g.parentNode !== null && n(l.l);
+          var a = u;
+          E(a) && a.g.parentNode !== null && n(a.l);
         }
-        var p = e;
-        i(e.h, t), i(e.i, t), x(e);
+        var u = e;
+        i(e.h, t), i(e.i, t), E(e);
       }
-      function I(e, n, t) {
+      function N(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;
+      var P = null, _ = null, $ = null, A = null;
       function B(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;
+        return _ === null && (S(e) && /Apple/.test(window.navigator.vendor) ? (e = /AppleWebKit\/([0-9]+)(?:\.([0-9]+))(?:\.([0-9]+))/.exec(window.navigator.userAgent), _ = !!e && 603 > parseInt(e[1], 10)) : _ = !1), _;
       }
-      function N(e) {
+      function S(e) {
         return A === null && (A = !!e.document.fonts), A;
       }
-      function y(e, n) {
-        var t = e.style, p = e.weight;
-        if (P === null) {
-          var l = document.createElement("div");
+      function g(e, n) {
+        var t = e.style, u = e.weight;
+        if ($ === null) {
+          var a = document.createElement("div");
           try {
-            l.style.font = "condensed 100px sans-serif";
+            a.style.font = "condensed 100px sans-serif";
           } catch {
           }
-          P = l.style.font !== "";
+          $ = a.style.font !== "";
         }
-        return [t, p, P ? e.stretch : "", "100px", n].join(" ");
+        return [t, u, $ ? e.stretch : "", "100px", n].join(" ");
       }
-      I.prototype.load = function(e, n) {
-        var t = this, p = e || "BESbswy", l = 0, g = n || 3e3, S = (/* @__PURE__ */ new Date()).getTime();
-        return new Promise(function(M, $) {
-          if (N(t.context) && !B(t.context)) {
-            var G = new Promise(function(w, b) {
+      N.prototype.load = function(e, n) {
+        var t = this, u = e || "BESbswy", a = 0, w = n || 3e3, z = (/* @__PURE__ */ new Date()).getTime();
+        return new Promise(function(M, k) {
+          if (S(t.context) && !B(t.context)) {
+            var G = new Promise(function(b, x) {
               function d() {
-                (/* @__PURE__ */ new Date()).getTime() - S >= g ? b(Error("" + g + "ms timeout exceeded")) : t.context.document.fonts.load(y(t, '"' + t.family + '"'), p).then(function(m) {
-                  1 <= m.length ? w() : setTimeout(d, 25);
-                }, b);
+                (/* @__PURE__ */ new Date()).getTime() - z >= w ? x(Error("" + w + "ms timeout exceeded")) : t.context.document.fonts.load(g(t, '"' + t.family + '"'), u).then(function(m) {
+                  1 <= m.length ? b() : setTimeout(d, 25);
+                }, x);
               }
               d();
-            }), R = new Promise(function(w, b) {
-              l = setTimeout(function() {
-                b(Error("" + g + "ms timeout exceeded"));
-              }, g);
+            }), R = new Promise(function(b, x) {
+              a = setTimeout(function() {
+                x(Error("" + w + "ms timeout exceeded"));
+              }, w);
             });
             Promise.race([R, G]).then(function() {
-              clearTimeout(l), M(t);
-            }, $);
-          } else L(function() {
-            function w() {
+              clearTimeout(a), M(t);
+            }, k);
+          } else T(function() {
+            function b() {
               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 == _ && h == _ && f == _ || c == D && h == D && f == D || c == W && h == W && f == W)), o = !o), o && (a.parentNode !== null && a.parentNode.removeChild(a), clearTimeout(l), M(t));
+              (o = c != -1 && h != -1 || c != -1 && f != -1 || h != -1 && f != -1) && ((o = c != h && c != f && h != f) || (P === null && (o = /AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent), P = !!o && (536 > parseInt(o[1], 10) || parseInt(o[1], 10) === 536 && 11 >= parseInt(o[2], 10))), o = P && (c == D && h == D && f == D || c == O && h == O && f == O || c == W && h == W && f == W)), o = !o), o && (l.parentNode !== null && l.parentNode.removeChild(l), clearTimeout(a), M(t));
             }
-            function b() {
-              if ((/* @__PURE__ */ new Date()).getTime() - S >= g) a.parentNode !== null && a.parentNode.removeChild(a), $(Error("" + g + "ms timeout exceeded"));
+            function x() {
+              if ((/* @__PURE__ */ new Date()).getTime() - z >= w) l.parentNode !== null && l.parentNode.removeChild(l), k(Error("" + w + "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);
+                (o === !0 || o === void 0) && (c = d.g.offsetWidth, h = m.g.offsetWidth, f = C.g.offsetWidth, b()), a = setTimeout(x, 50);
               }
             }
-            var d = new u(p), m = new u(p), E = new u(p), c = -1, h = -1, f = -1, _ = -1, D = -1, W = -1, a = document.createElement("div");
-            a.dir = "ltr", r(d, y(t, "sans-serif")), r(m, y(t, "serif")), r(E, y(t, "monospace")), a.appendChild(d.g), a.appendChild(m.g), a.appendChild(E.g), t.context.document.body.appendChild(a), _ = d.g.offsetWidth, D = m.g.offsetWidth, W = E.g.offsetWidth, b(), v(d, function(o) {
-              c = o, w();
-            }), r(d, y(t, '"' + t.family + '",sans-serif')), v(m, function(o) {
-              h = o, w();
-            }), r(m, y(t, '"' + t.family + '",serif')), v(E, function(o) {
-              f = o, w();
-            }), r(E, y(t, '"' + t.family + '",monospace'));
+            var d = new p(u), m = new p(u), C = new p(u), c = -1, h = -1, f = -1, D = -1, O = -1, W = -1, l = document.createElement("div");
+            l.dir = "ltr", r(d, g(t, "sans-serif")), r(m, g(t, "serif")), r(C, g(t, "monospace")), l.appendChild(d.g), l.appendChild(m.g), l.appendChild(C.g), t.context.document.body.appendChild(l), D = d.g.offsetWidth, O = m.g.offsetWidth, W = C.g.offsetWidth, x(), y(d, function(o) {
+              c = o, b();
+            }), r(d, g(t, '"' + t.family + '",sans-serif')), y(m, function(o) {
+              h = o, b();
+            }), r(m, g(t, '"' + t.family + '",serif')), y(C, function(o) {
+              f = o, b();
+            }), r(C, g(t, '"' + t.family + '",monospace'));
           });
         });
-      }, s.exports = I;
+      }, s.exports = N;
     })();
-  }(F)), F.exports;
+  }(I)), I.exports;
 }
-var X = V();
-const Y = /* @__PURE__ */ Q(X);
-var Z = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, j = (s, i, L, u) => {
-  for (var r = u > 1 ? void 0 : u ? ee(i, L) : i, x = s.length - 1, v; x >= 0; x--)
-    (v = s[x]) && (r = (u ? v(i, L, r) : v(r)) || r);
-  return u && r && Z(i, L, r), r;
+var Z = Y();
+const ee = /* @__PURE__ */ X(Z);
+var te = Object.defineProperty, ne = Object.getOwnPropertyDescriptor, L = (s, i, T, p) => {
+  for (var r = p > 1 ? void 0 : p ? ne(i, T) : i, E = s.length - 1, y; E >= 0; E--)
+    (y = s[E]) && (r = (p ? y(i, T, r) : y(r)) || r);
+  return p && r && te(i, T, r), r;
 };
-let C = class extends U {
+let v = class extends U {
   constructor() {
-    super(...arguments), this.library = "Sharp", this.name = "", this.iconLoaded = !1;
+    super(...arguments), this.library = "Sharp", this.name = "", this.src = "", this.alt = void 0, this.iconLoaded = !1;
   }
   firstUpdated() {
+    if (this.src) return;
     if (!document.getElementById(`material-icons-${this.library.toLowerCase()}`)) {
       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 Y(`Material Symbols ${this.library}`).load().then(() => {
+    new ee(`Material Symbols ${this.library}`).load().then(() => {
       this.iconLoaded = !0, this.requestUpdate();
     }).catch((i) => {
       console.error("Failed to load the icon font:", i);
     });
   }
   render() {
-    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>`;
+    return this.src ? F`<img src=${this.src} alt=${V(this.alt)} />` : !this.src && this.iconLoaded ? F`<span
+        part="icon"
+        class=${Q({
+      "material-outlined": this.library === "Outlined",
+      "material-sharp": this.library === "Sharp"
+    })}
+        >${this.name}</span
+      >` : F`<nve-skeleton class="placeholder" effect="sheen"></nve-skeleton>`;
   }
 };
-C.styles = [K];
-j([
-  q({ type: String })
-], C.prototype, "library", 2);
-j([
-  q({ reflect: !0 })
-], C.prototype, "name", 2);
-j([
+v.styles = [K];
+L([
+  j()
+], v.prototype, "library", 2);
+L([
+  j({ type: String, reflect: !0 })
+], v.prototype, "name", 2);
+L([
+  j()
+], v.prototype, "src", 2);
+L([
+  j()
+], v.prototype, "alt", 2);
+L([
   J()
-], C.prototype, "iconLoaded", 2);
-C = j([
+], v.prototype, "iconLoaded", 2);
+v = L([
   H("nve-icon")
-], C);
+], v);
 export {
-  C as default
+  v as default
 };

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

@@ -8,30 +8,41 @@ const n = e`
 
   /* prevent icon beeing highlighted */
   :host {
+    display: flex;
+    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
     -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
-    -khtml-user-select: none; /* Konqueror HTML */
-    -moz-user-select: none; /* Old versions of Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-    user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome, Edge, Opera and Firefox */
+    --icon-size: 16px;
+    font-size: var(--icon-size);
+    line-height: var(--icon-size);
   }
-  :host {
-    display: flex;
+
+  :is(img) {
+    width: var(--icon-size);
+    height: var(--icon-size);
   }
 
   /* we need it to center the icon */
   :is(span) {
     display: inline-flex;
-    line-height: 24px;
+    font-size: inherit;
+    line-height: inherit;
     font-weight: var(--font-weight-regular);
   }
 
   .placeholder::part(indicator) {
-    width: 24px; 
-    height: 24px; 
+    width: var(--icon-size);
+    height: var(--icon-size);
     border-radius: 4px;
   }
+
+  .material-outlined {
+    font-family: 'Material Symbols Outlined';
+  }
+
+  .material-sharp {
+    font-family: 'Material Symbols Sharp';
+  }
 `;
 export {
   n as default