nve-designsystem 0.4.11 → 0.4.13

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

@@ -1,11 +1,20 @@
 import { default as SlOption } from '@shoelace-style/shoelace/dist/components/option/option.js';
+import { PropertyValues } from 'lit';
 /**
  * Representerer et valg i nve-select.
  */
 export default class NveOption extends SlOption {
     constructor();
     static styles: import('lit').CSSResultGroup[];
-    firstUpdated(changedProperties: any): void;
+    /**
+     * Tekst som vises i select når denne er valgt. Default er at all råtekst vises.
+     */
+    textLabel: string | undefined;
+    firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Gir tilbake plain-tekst-label som vises i select
+     */
+    getTextLabel(): string;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -2,17 +2,16 @@ import { o as f } from "../../chunks/chunk.MXB57G5B.js";
 import "../../chunks/chunk.6CTB5ZDJ.js";
 import "../../chunks/chunk.QCFOL4VF.js";
 import "../../chunks/chunk.EVP45OG4.js";
-import { t as u } from "../../chunks/property.js";
-import "../../chunks/lit-element.js";
-import a from "./nve-option.styles.js";
-var m = Object.defineProperty, n = Object.getOwnPropertyDescriptor, v = (r, t, o, s) => {
-  for (var e = s > 1 ? void 0 : s ? n(t, o) : t, i = r.length - 1, l; i >= 0; i--)
-    (l = r[i]) && (e = (s ? l(t, o, e) : l(e)) || e);
-  return s && e && m(t, o, e), e;
+import { n as u, t as n } from "../../chunks/property.js";
+import b from "./nve-option.styles.js";
+var v = Object.defineProperty, d = Object.getOwnPropertyDescriptor, a = (r, t, o, s) => {
+  for (var e = s > 1 ? void 0 : s ? d(t, o) : t, i = r.length - 1, p; i >= 0; i--)
+    (p = r[i]) && (e = (s ? p(t, o, e) : p(e)) || e);
+  return s && e && v(t, o, e), e;
 };
-let p = class extends f {
+let l = class extends f {
   constructor() {
-    super();
+    super(), this.textLabel = void 0;
   }
   /* Setter filled attributt på option når parent-select er filled, for å få annen hover-farge*/
   firstUpdated(r) {
@@ -20,11 +19,20 @@ let p = class extends f {
     const t = this.closest("nve-select");
     t != null && t.hasAttribute("filled") ? this.toggleAttribute("filled", !0) : this.toggleAttribute("filled", !1);
   }
+  /**
+   * Gir tilbake plain-tekst-label som vises i select
+   */
+  getTextLabel() {
+    return this.textLabel ? this.textLabel : super.getTextLabel();
+  }
 };
-p.styles = [f.styles, a];
-p = v([
-  u("nve-option")
-], p);
+l.styles = [f.styles, b];
+a([
+  u()
+], l.prototype, "textLabel", 2);
+l = a([
+  n("nve-option")
+], l);
 export {
-  p as default
+  l as default
 };

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

@@ -1,4 +1,5 @@
 import { default as SlSelect } from '@shoelace-style/shoelace/dist/components/select/select.js';
+import { PropertyValues } from 'lit';
 /**
  * En nedtrekksliste, også kjent som rullgardin eller drop-down list. Kjært barn har mange navn.
  * TODO: Klarte ikke å sette feil-ikonet når validering feiler. Eneste måte å gjøre det på kunne ha vært å bruke ::after pseudo-element på noen av sl-select partene, men
@@ -12,16 +13,18 @@ export default class NveSelect extends SlSelect {
      */
     requiredLabel: string;
     /**
-     * Brukes til enkel constraint validation til å overskrive default nettleseren melding
+     * Brukes til enkel constraint validation til å overskrive default nettleser-melding
      */
     errorMessage?: string;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     constructor();
     static styles: import('lit').CSSResultGroup[];
-    protected firstUpdated(changedProperties: any): void;
-    updated(changedProperties: any): void;
+    private slInvalidEventListener;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
     focus(): void;
+    private valueHasChanged;
     private handleOptionClick;
     private handleDefaultSlotChange;
     private getAllOptions;

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

@@ -6,73 +6,76 @@ import "../../chunks/chunk.G6R7BW5E.js";
 import "../../chunks/chunk.6CTB5ZDJ.js";
 import "../../chunks/chunk.QCFOL4VF.js";
 import "../../chunks/chunk.EVP45OG4.js";
-import { n as u, t as c } from "../../chunks/property.js";
-import h from "./nve-select.styles.js";
-var d = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? v(t, s) : t, o = e.length - 1, n; o >= 0; o--)
-    (n = e[o]) && (r = (i ? n(t, s, r) : n(r)) || r);
-  return i && r && d(t, s, r), r;
+import { n as u, t as h } from "../../chunks/property.js";
+import { r as d } from "../../chunks/state.js";
+import c from "./nve-select.styles.js";
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (t, e, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? f(e, s) : e, n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (r = (i ? a(e, s, r) : a(r)) || r);
+  return i && r && v(e, s, r), r;
 };
 let l = class extends p {
   constructor() {
-    super(), this.requiredLabel = "*Obligatorisk";
+    super(), this.requiredLabel = "*Obligatorisk", this.slInvalidEventListener = (t) => {
+      t.preventDefault();
+    }, this.valueHasChanged = !1;
   }
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("sl-invalid", (e) => {
-      e.preventDefault();
-    });
+    super.connectedCallback(), this.addEventListener("sl-invalid", this.slInvalidEventListener);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("sl-invalid", (e) => {
-      e.preventDefault();
-    });
+    super.disconnectedCallback(), this.removeEventListener("sl-invalid", this.slInvalidEventListener);
   }
-  firstUpdated(e) {
+  firstUpdated(t) {
     var s;
-    super.firstUpdated(e), this.requiredLabel && this.style.setProperty("--sl-input-required-content", `"${this.requiredLabel}"`);
-    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector("sl-popup");
-    t == null || t.setAttribute("distance", "3");
+    super.firstUpdated(t), this.requiredLabel && this.style.setProperty("--sl-input-required-content", `"${this.requiredLabel}"`);
+    const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("sl-popup");
+    e == null || e.setAttribute("distance", "3");
   }
-  updated(e) {
-    super.updated(e);
-    const t = this.hasAttribute("data-user-invalid");
-    t && (this.errorMessage || (this.errorMessage = this.validationMessage), this.style.setProperty("--nve-input-error-message", `"${this.errorMessage}"`)), t || this.style.setProperty("--nve-input-error-message", "");
+  updated(t) {
+    super.updated(t);
+    const e = this.hasAttribute("data-user-invalid");
+    e && (this.errorMessage || (this.errorMessage = this.validationMessage), this.style.setProperty("--nve-input-error-message", `"${this.errorMessage}"`)), e || this.style.setProperty("--nve-input-error-message", "");
   }
   focus() {
-    var t;
-    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("sl-popup");
-    e == null || e.classList.add("select--focused");
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("sl-popup");
+    t == null || t.classList.add("select--focused");
   }
-  // @ts-ignore
-  handleOptionClick(e) {
-    const s = e.target.closest("nve-option"), i = this.value;
-    s && !s.disabled && (this.multiple ? this.toggleOptionSelection(s) : this.setSelectedOptions(s), this.updateComplete.then(() => this.displayInput.focus({ preventScroll: !0 })), this.value !== i && this.updateComplete.then(() => {
+  // @ts-expect-error overskriver private method
+  handleOptionClick(t) {
+    const s = t.target.closest("nve-option"), i = this.value;
+    s && !s.disabled && (this.multiple ? this.toggleOptionSelection(s) : this.setSelectedOptions(s), this.updateComplete.then(() => this.displayInput.focus({ preventScroll: !0 })), this.value !== i && (this.valueHasChanged = !0, this.updateComplete.then(() => {
       this.emit("sl-input"), this.emit("sl-change");
-    }), this.multiple || (this.hide(), this.displayInput.focus({ preventScroll: !0 })));
+    })), this.multiple || (this.hide(), this.displayInput.focus({ preventScroll: !0 })));
   }
   //Lagt til nve-option
   handleDefaultSlotChange() {
-    const e = this.getAllOptions(), t = Array.isArray(this.value) ? this.value : [this.value], s = [];
-    customElements.get("nve-option") ? (e.forEach((i) => s.push(i.value)), this.setSelectedOptions(e.filter((i) => t.includes(i.value)))) : customElements.whenDefined("nve-option").then(() => this.handleDefaultSlotChange());
+    customElements.get("nve-option") || customElements.whenDefined("nve-option").then(() => this.handleDefaultSlotChange());
+    const t = this.getAllOptions(), e = this.valueHasChanged ? this.value : this.defaultValue, s = Array.isArray(e) ? e : [e];
+    this.setSelectedOptions(t.filter((i) => s.includes(i.value)));
   }
   //Lagt til nve-option
   getAllOptions() {
     return [...this.querySelectorAll("nve-option")];
   }
-  // @ts-ignore
+  // @ts-expect-error overskriver private method
   getFirstOption() {
     return this.querySelector("nve-option");
   }
 };
-l.styles = [p.styles, h];
-a([
+l.styles = [p.styles, c];
+o([
   u()
 ], l.prototype, "requiredLabel", 2);
-a([
+o([
   u({ reflect: !0 })
 ], l.prototype, "errorMessage", 2);
-l = a([
-  c("nve-select")
+o([
+  d()
+], l.prototype, "valueHasChanged", 2);
+l = o([
+  h("nve-select")
 ], l);
 export {
   l as default

package/custom-elements.json

@@ -5956,6 +5956,15 @@
               "static": true,
               "default": "[SlOption.styles, styles]"
             },
+            {
+              "kind": "field",
+              "name": "textLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined",
+              "description": "Tekst som vises i select når denne er valgt. Default er at all råtekst vises."
+            },
             {
               "kind": "method",
               "name": "firstUpdated",
@@ -5968,11 +5977,21 @@
                 {
                   "name": "changedProperties",
                   "type": {
-                    "text": "any"
+                    "text": "PropertyValues"
                   }
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "getTextLabel",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "description": "Gir tilbake plain-tekst-label som vises i select"
+            },
             {
               "kind": "field",
               "name": "dependencies",
@@ -6076,14 +6095,6 @@
               "inheritedFrom": {
                 "name": "SlOption"
               }
-            },
-            {
-              "kind": "method",
-              "name": "getTextLabel",
-              "description": "Returns a plain text label based on the option's content.",
-              "inheritedFrom": {
-                "name": "SlOption"
-              }
             }
           ],
           "superclass": {
@@ -8197,7 +8208,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Brukes til enkel constraint validation til å overskrive default nettleseren melding"
+              "description": "Brukes til enkel constraint validation til å overskrive default nettleser-melding"
             },
             {
               "kind": "field",
@@ -8208,6 +8219,11 @@
               "static": true,
               "default": "[SlSelect.styles, styles]"
             },
+            {
+              "kind": "field",
+              "name": "slInvalidEventListener",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "firstUpdated",
@@ -8216,7 +8232,7 @@
                 {
                   "name": "changedProperties",
                   "type": {
-                    "text": "any"
+                    "text": "PropertyValues"
                   }
                 }
               ]
@@ -8228,7 +8244,7 @@
                 {
                   "name": "changedProperties",
                   "type": {
-                    "text": "any"
+                    "text": "PropertyValues"
                   }
                 }
               ]
@@ -8237,6 +8253,15 @@
               "kind": "method",
               "name": "focus"
             },
+            {
+              "kind": "field",
+              "name": "valueHasChanged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "method",
               "name": "handleOptionClick",
@@ -11380,7 +11405,7 @@
   "package": {
     "name": "nve-designsystem",
     "description": "Designsystem for NVE",
-    "version": "0.4.10",
+    "version": "0.4.12",
     "author": {
       "name": "NVE",
       "email": "nve@nve.no"

package/package.json

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