nve-designsystem 0.4.10 → 0.4.12

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

@@ -37,6 +37,10 @@ export default class NveLabel extends LitElement {
      * Ikon farge
      */
     iconColor: 'default' | 'black';
+    /**
+     * For-attributten legges på label, og brukes som html-standard. Sett til samme som id på elementet label tilhører
+     */
+    for?: string;
     static styles: import('lit').CSSResult[];
     private renderInfoIconWithTooltip;
     private renderValueProperty;

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

@@ -1,24 +1,25 @@
-import { r as u, x as a } from "../../chunks/lit-element.js";
-import { n as i, t as c } from "../../chunks/property.js";
-import { styles as p } from "./nve-label.styles.js";
+import { r as c, x as a } from "../../chunks/lit-element.js";
+import { n, t as p } from "../../chunks/property.js";
+import { styles as d } from "./nve-label.styles.js";
 import "../nve-icon/nve-icon.component.js";
 import "../nve-tooltip/nve-tooltip.component.js";
-class d {
-  constructor(t, ...s) {
-    this.slotNames = [], this.handleSlotChange = (r) => {
-      const e = r.target;
+import { o as u } from "../../chunks/if-defined.js";
+class m {
+  constructor(t, ...r) {
+    this.slotNames = [], this.handleSlotChange = (i) => {
+      const e = i.target;
       (this.slotNames.includes("[default]") && !e.name || e.name && this.slotNames.includes(e.name)) && this.host.requestUpdate();
-    }, (this.host = t).addController(this), this.slotNames = s;
+    }, (this.host = t).addController(this), this.slotNames = r;
   }
   hasDefaultSlot() {
     return [...this.host.childNodes].some((t) => {
       if (t.nodeType === t.TEXT_NODE && t.textContent.trim() !== "")
         return !0;
       if (t.nodeType === t.ELEMENT_NODE) {
-        const s = t;
-        if (s.tagName.toLowerCase() === "sl-visually-hidden")
+        const r = t;
+        if (r.tagName.toLowerCase() === "sl-visually-hidden")
           return !1;
-        if (!s.hasAttribute("slot"))
+        if (!r.hasAttribute("slot"))
           return !0;
       }
       return !1;
@@ -43,14 +44,14 @@ class d {
     this.host.shadowRoot.removeEventListener("slotchange", this.handleSlotChange);
   }
 }
-var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (o, t, s, r) => {
-  for (var e = r > 1 ? void 0 : r ? v(t, s) : t, h = o.length - 1, f; h >= 0; h--)
-    (f = o[h]) && (e = (r ? f(t, s, e) : f(e)) || e);
-  return r && e && m(t, s, e), e;
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, s = (o, t, r, i) => {
+  for (var e = i > 1 ? void 0 : i ? g(t, r) : t, h = o.length - 1, f; h >= 0; h--)
+    (f = o[h]) && (e = (i ? f(t, r, e) : f(e)) || e);
+  return i && e && v(t, r, e), e;
 };
-let l = class extends u {
+let l = class extends c {
   constructor() {
-    super(...arguments), this.hasSlotController = new d(this, "tooltip"), this.value = "", this.size = "small", this.light = !1, this.tooltip = void 0, this.iconLeft = !1, this.iconColor = "default";
+    super(...arguments), this.hasSlotController = new m(this, "tooltip"), this.value = "", this.size = "small", this.light = !1, this.tooltip = void 0, this.iconLeft = !1, this.iconColor = "default", this.for = void 0;
   }
   renderInfoIconWithTooltip() {
     let o = this.tooltip;
@@ -60,9 +61,19 @@ let l = class extends u {
       </nve-tooltip>` : a``;
   }
   renderValueProperty() {
-    return this.value.length ? a` <label part="form-control-label" class="form-control__label" aria-hidden="false">
+    return this.value.length ? a` <label
+        part="form-control-label"
+        class="form-control__label"
+        aria-hidden="false"
+        for=${u(this.for)}
+      >
         <slot name="label">${this.value}</slot>
-      </label>` : a` <label part="form-control-label" class="form-control__label" aria-hidden="false">
+      </label>` : a` <label
+        part="form-control-label"
+        class="form-control__label"
+        aria-hidden="false"
+        for=${u(this.for)}
+      >
         <slot></slot>
       </label>`;
   }
@@ -74,27 +85,30 @@ let l = class extends u {
     `;
   }
 };
-l.styles = [p];
-n([
-  i({ reflect: !0 })
+l.styles = [d];
+s([
+  n({ reflect: !0 })
 ], l.prototype, "value", 2);
-n([
-  i({ reflect: !0 })
+s([
+  n({ reflect: !0 })
 ], l.prototype, "size", 2);
-n([
-  i({ type: Boolean, reflect: !0 })
+s([
+  n({ type: Boolean, reflect: !0 })
 ], l.prototype, "light", 2);
-n([
-  i({ reflect: !0 })
+s([
+  n({ reflect: !0 })
 ], l.prototype, "tooltip", 2);
-n([
-  i({ type: Boolean, reflect: !0 })
+s([
+  n({ type: Boolean, reflect: !0 })
 ], l.prototype, "iconLeft", 2);
-n([
-  i({ reflect: !0 })
+s([
+  n({ reflect: !0 })
 ], l.prototype, "iconColor", 2);
-l = n([
-  c("nve-label")
+s([
+  n({ reflect: !0 })
+], l.prototype, "for", 2);
+l = s([
+  p("nve-label")
 ], l);
 export {
   l as default

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
@@ -19,8 +20,8 @@ export default class NveSelect extends SlSelect {
     disconnectedCallback(): void;
     constructor();
     static styles: import('lit').CSSResultGroup[];
-    protected firstUpdated(changedProperties: any): void;
-    updated(changedProperties: any): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
     focus(): void;
     private handleOptionClick;
     private handleDefaultSlotChange;

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

@@ -61,8 +61,8 @@ export default class NveTextarea extends LitElement implements INveComponent {
     /** Indikerer om nettleserens autokorrekturfunksjon er på eller av. */
     tooltip?: string;
     /**
-    * Brukes for å kunne identifisere komponenten i tester
-    */
+     * Brukes for å kunne identifisere komponenten i tester
+     */
     testId: string;
     /**
      * Forteller nettleseren hvilken type data som vil bli skrevet inn av brukeren, slik at den kan vise det passende virtuelle

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

@@ -1,11 +1,11 @@
-import { r as c, x as l } from "../../chunks/lit-element.js";
+import { r as c, x as o } from "../../chunks/lit-element.js";
 import { n as s, t as m } from "../../chunks/property.js";
 import { r as u } from "../../chunks/state.js";
 import { e as b } from "../../chunks/query.js";
 import v from "./nve-textarea.styles.js";
-import { o } from "../../chunks/if-defined.js";
-import { l as f } from "../../chunks/live.js";
-import { e as g } from "../../chunks/class-map.js";
+import { o as l } from "../../chunks/if-defined.js";
+import { l as g } from "../../chunks/live.js";
+import { e as f } from "../../chunks/class-map.js";
 import "../nve-icon/nve-icon.component.js";
 import "../nve-label/nve-label.component.js";
 var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (t, a, h, n) => {
@@ -75,38 +75,37 @@ let e = class extends c {
     this.toggleAttribute("data-valid", t), this.toggleAttribute("data-user-valid", t), this.toggleAttribute("data-invalid", !t), this.toggleAttribute("data-user-invalid", !t);
   }
   render() {
-    return l`
-      <div part="form-control" class=${g({ "form-control": !0, "form-control--has-label": this.label })}>
+    return o`
+      <div part="form-control" class=${f({ "form-control": !0, "form-control--has-label": this.label })}>
         <div part="textarea-label" class="textarea__label">
-          ${this.label ? l`
+          ${this.label ? o`
                 <nve-label
-                  for="input"
                   aria-hidden=${this.label ? "false" : "true"}
                   value=${this.label}
-                  tooltip=${o(this.tooltip)}
+                  tooltip=${l(this.tooltip)}
                 ></nve-label>
               ` : null}
-          ${this.required && this.label ? l`<span class="textarea__required-label">${this.requiredLabel}</span>` : null}
+          ${this.required && this.label ? o`<span class="textarea__required-label">${this.requiredLabel}</span>` : null}
         </div>
         <div part="base" class="textarea__base">
           <textarea
             part="textarea"
             class="textarea__control"
             title=${this.title}
-            name=${o(this.name)}
-            .value=${f(this.value)}
+            name=${l(this.name)}
+            .value=${g(this.value)}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
             ?required=${this.required}
-            placeholder=${o(this.placeholder)}
-            minlength=${o(this.minlength)}
-            maxlength=${o(this.maxlength)}
-            autocapitalize=${o(this.autocapitalize)}
-            autocorrect=${o(this.autocorrect)}
+            placeholder=${l(this.placeholder)}
+            minlength=${l(this.minlength)}
+            maxlength=${l(this.maxlength)}
+            autocapitalize=${l(this.autocapitalize)}
+            autocorrect=${l(this.autocorrect)}
             ?autofocus=${this.autofocus}
-            inputmode=${o(this.inputmode)}
+            inputmode=${l(this.inputmode)}
             aria-describedby="help-text"
-            rows=${o(this.rows)}
+            rows=${l(this.rows)}
             @change=${this.handleChange}
             @input=${this.handleInput}
             @blur=${this.handleBlur}
@@ -116,17 +115,17 @@ let e = class extends c {
           Må gjøres sånn fordi vi vil ikke begrense textarea__base brede til fit-content (da textarea kan aldri ta så mye plass som er 
           tilgjengelig i nettleseren og man må alltid sette brede på den manuelt. Nei takk.) -->
           <!-- Foreløpig kan man ha enten 'lock' eller 'error' ikone -->
-          ${this.disabled || this.showErrorMessage ? l`<div class="textarea__icon__container">
-                ${this.disabled ? l`<nve-icon name="lock"></nve-icon>` : null}
-                ${this.showErrorMessage ? l`<nve-icon class="textarea__icon--error" name="error"></nve-icon>` : null}
+          ${this.disabled || this.showErrorMessage ? o`<div class="textarea__icon__container">
+                ${this.disabled ? o`<nve-icon name="lock"></nve-icon>` : null}
+                ${this.showErrorMessage ? o`<nve-icon class="textarea__icon--error" name="error"></nve-icon>` : null}
               </div>` : null}
         </div>
         <div part="help-text-container" class="textarea__help-text__container">
           <!-- Ikke vis hjelpe tekst mens feil -->
-          ${!this.showErrorMessage && this.helpText ? l`<span class="textarea__help-text" aria-hidden=${this.helpText ? "false" : "true"}
+          ${!this.showErrorMessage && this.helpText ? o`<span class="textarea__help-text" aria-hidden=${this.helpText ? "false" : "true"}
                 >${this.helpText}</span
               >` : null}
-          ${this.showErrorMessage ? l`<span class="textarea__help-text textarea__help-text--error">${this.errorMessage}</span>` : null}
+          ${this.showErrorMessage ? o`<span class="textarea__help-text textarea__help-text--error">${this.errorMessage}</span>` : null}
         </div>
       </div>
     `;

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

@@ -53,6 +53,10 @@ const a = r`
     }
   }
 
+  :host([filled][data-user-invalid]) .textarea__control {
+    border-color: var(--feedback-background-emphasized-error);
+  }
+
   :host([readonly]) .textarea__control {
     background: var(--neutrals-background-secondary);
     color: var(--neutrals-foreground-subtle,);