nve-designsystem 0.1.61 → 0.1.63

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

@@ -64,6 +64,13 @@ export default class NveTextarea extends LitElement {
      * tastaturet på støttede enheter.
      */
     inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /** Antall rader med tekst i textarea-taggen.
+     * Browser-default dersom denne ikke er satt er 2 i alle browsere
+     *
+     * Bestemmer initiell høyde på textarea-boksen
+     * (settes slik at antall rader * font-høyde får plass)
+     */
+    rows?: number;
     /** Bestemmer om feilmelding skal vises når validering feiler  */
     private showErrorMessage;
     /** Om bruker starter å skrive noe i textarea */

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

@@ -1,11 +1,11 @@
-import { s as c, x as o } from "../../chunks/lit-element.js";
+import { s as c, x as l } from "../../chunks/lit-element.js";
 import { n as r, 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 as l } from "../../chunks/if-defined.js";
+import { o } from "../../chunks/if-defined.js";
 import { l as f } from "../../chunks/live.js";
-import { e as y } from "../../chunks/class-map.js";
+import { e as g } from "../../chunks/class-map.js";
 import "../nve-icon/nve-icon.component.js";
 import "../nve-label/nve-label.component.js";
 import "../../chunks/directive-helpers.js";
@@ -17,44 +17,44 @@ import "../../chunks/chunk.GMVRWIWU.js";
 import "../../chunks/chunk.KRRLOROJ.js";
 import "../../chunks/chunk.MAS2SHYD.js";
 import "../../chunks/chunk.Q6ASPMKT.js";
-var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (t, a, n, h) => {
-  for (var s = h > 1 ? void 0 : h ? x(a, n) : a, p = t.length - 1, d; p >= 0; p--)
-    (d = t[p]) && (s = (h ? d(a, n, s) : d(s)) || s);
-  return h && s && g(a, n, s), s;
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (e, a, h, n) => {
+  for (var s = n > 1 ? void 0 : n ? x(a, h) : a, p = e.length - 1, d; p >= 0; p--)
+    (d = e[p]) && (s = (n ? d(a, h, s) : d(s)) || s);
+  return n && s && y(a, h, s), s;
 };
-let e = class extends c {
+let t = class extends c {
   constructor() {
     super(), this.name = "", this.value = "", this.title = "", this.filled = !1, this.label = "", this.helpText = "", this.disabled = !1, this.readonly = !1, this.placeholder = "", this.required = !1, this.requiredLabel = "*Obligatorisk", this.autocapitalize = "off", this.showErrorMessage = !1, this.touched = !1, this.resizeObserver = null;
   }
   firstUpdated() {
-    var n, h;
+    var h, n;
     if (this.required) {
       const s = this.input.checkValidity();
       this.toggleAttribute("data-valid", s), this.toggleAttribute("data-invalid", !s);
     }
-    const t = (n = this.shadowRoot) == null ? void 0 : n.querySelector(".textarea__control"), a = (h = this.shadowRoot) == null ? void 0 : h.querySelector(".textarea__label");
-    t && (this.resizeObserver = new ResizeObserver((s) => {
+    const e = (h = this.shadowRoot) == null ? void 0 : h.querySelector(".textarea__control"), a = (n = this.shadowRoot) == null ? void 0 : n.querySelector(".textarea__label");
+    e && (this.resizeObserver = new ResizeObserver((s) => {
       for (let p of s)
         a.style.width = `${p.contentRect.width + 32}px`;
-    }), this.resizeObserver.observe(t));
+    }), this.resizeObserver.observe(e));
   }
   connectedCallback() {
     super.connectedCallback();
-    const t = this.closest("form");
-    t == null || t.addEventListener("submit", this.handleSubmit.bind(this));
+    const e = this.closest("form");
+    e == null || e.addEventListener("submit", this.handleSubmit.bind(this));
   }
   disconnectedCallback() {
     var a;
     super.disconnectedCallback();
-    const t = this.closest("form");
-    t == null || t.removeEventListener("submit", this.handleSubmit.bind(this)), (a = this.resizeObserver) == null || a.disconnect();
+    const e = this.closest("form");
+    e == null || e.removeEventListener("submit", this.handleSubmit.bind(this)), (a = this.resizeObserver) == null || a.disconnect();
   }
   // kan senere flyttes til utils hvis blir brukt flere steder
-  emit(t) {
-    this.dispatchEvent(new CustomEvent(t));
+  emit(e) {
+    this.dispatchEvent(new CustomEvent(e));
   }
-  handleSubmit(t) {
-    t.preventDefault(), this.checkValidity();
+  handleSubmit(e) {
+    e.preventDefault(), this.checkValidity();
   }
   // validerer ikke hvis bruker ikke har tatt på input feltet
   handleBlur() {
@@ -70,8 +70,8 @@ let e = class extends c {
   checkValidity() {
     this.input.checkValidity() ? this.resetValidation() : this.makeInvalid();
   }
-  setCustomValidity(t = "") {
-    this.input.setCustomValidity(t), this.checkValidity();
+  setCustomValidity(e = "") {
+    this.input.setCustomValidity(e), this.checkValidity();
   }
   makeInvalid() {
     this.errorMessage = this.errorMessage || this.input.validationMessage, this.showErrorMessage = !0, this.emit("sl-invalid"), this.toggleValidationAttributes(!1);
@@ -80,129 +80,137 @@ let e = class extends c {
     this.showErrorMessage = !1, this.toggleValidationAttributes(!0);
   }
   /** Toggler riktig validering attribute for å vise riktig style */
-  toggleValidationAttributes(t) {
-    this.toggleAttribute("data-valid", t), this.toggleAttribute("data-user-valid", t), this.toggleAttribute("data-invalid", !t), this.toggleAttribute("data-user-invalid", !t);
+  toggleValidationAttributes(e) {
+    this.toggleAttribute("data-valid", e), this.toggleAttribute("data-user-valid", e), this.toggleAttribute("data-invalid", !e), this.toggleAttribute("data-user-invalid", !e);
   }
   render() {
-    return o`
-      <div part="form-control" class=${y({ "form-control": !0, "form-control--has-label": this.label })}>
+    return l`
+      <div part="form-control" class=${g({ "form-control": !0, "form-control--has-label": this.label })}>
         <div part="textarea-label" class="textarea__label">
-          ${this.label ? o`
+          ${this.label ? l`
                 <nve-label
                   for="input"
                   aria-hidden=${this.label ? "false" : "true"}
                   value=${this.label}
-                  tooltip=${l(this.tooltip)}
+                  tooltip=${o(this.tooltip)}
                 ></nve-label>
               ` : null}
-          ${this.required ? o`<span class="textarea__required-label">${this.requiredLabel}</span>` : null}
+          ${this.required && this.label ? l`<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=${l(this.name)}
+            name=${o(this.name)}
             .value=${f(this.value)}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
             ?required=${this.required}
-            placeholder=${l(this.placeholder)}
-            minlength=${l(this.minlength)}
-            maxlength=${l(this.maxlength)}
-            autocapitalize=${l(this.autocapitalize)}
-            autocorrect=${l(this.autocorrect)}
+            placeholder=${o(this.placeholder)}
+            minlength=${o(this.minlength)}
+            maxlength=${o(this.maxlength)}
+            autocapitalize=${o(this.autocapitalize)}
+            autocorrect=${o(this.autocorrect)}
             ?autofocus=${this.autofocus}
-            inputmode=${l(this.inputmode)}
+            inputmode=${o(this.inputmode)}
             aria-describedby="help-text"
+            rows=${o(this.rows)}
             @change=${this.handleChange}
             @input=${this.handleInput}
             @blur=${this.handleBlur}
           ></textarea>
+          <!-- Her kommer litt hokus pokus med å poisjonere ikonen. Det er en ekstra div med posisjon relativt 
+          som skal vises rett etter textarea, og den skal inneholde ikone med position absolute som skal deretter vises inn i textarea.
+          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 ? 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}
+          ${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}
               </div>` : null}
         </div>
         <div part="help-text-container" class="textarea__help-text__container">
           <!-- Ikke vis hjelpe tekst mens feil -->
-          ${!this.showErrorMessage && this.helpText ? o`<span class="textarea__help-text" aria-hidden=${this.helpText ? "false" : "true"}
+          ${!this.showErrorMessage && this.helpText ? l`<span class="textarea__help-text" aria-hidden=${this.helpText ? "false" : "true"}
                 >${this.helpText}</span
               >` : null}
-          ${this.showErrorMessage ? o`<span class="textarea__help-text textarea__help-text--error">${this.errorMessage}</span>` : null}
+          ${this.showErrorMessage ? l`<span class="textarea__help-text textarea__help-text--error">${this.errorMessage}</span>` : null}
         </div>
       </div>
     `;
   }
 };
-e.styles = [v];
+t.styles = [v];
 i([
   r()
-], e.prototype, "name", 2);
+], t.prototype, "name", 2);
 i([
   r()
-], e.prototype, "value", 2);
+], t.prototype, "value", 2);
 i([
   r()
-], e.prototype, "errorMessage", 2);
+], t.prototype, "errorMessage", 2);
 i([
   r()
-], e.prototype, "title", 2);
+], t.prototype, "title", 2);
 i([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "filled", 2);
+], t.prototype, "filled", 2);
 i([
   r()
-], e.prototype, "label", 2);
+], t.prototype, "label", 2);
 i([
   r()
-], e.prototype, "helpText", 2);
+], t.prototype, "helpText", 2);
 i([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled", 2);
+], t.prototype, "disabled", 2);
 i([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "readonly", 2);
+], t.prototype, "readonly", 2);
 i([
   r()
-], e.prototype, "placeholder", 2);
+], t.prototype, "placeholder", 2);
 i([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "required", 2);
+], t.prototype, "required", 2);
 i([
   r()
-], e.prototype, "requiredLabel", 2);
+], t.prototype, "requiredLabel", 2);
 i([
   r({ type: Number })
-], e.prototype, "minlength", 2);
+], t.prototype, "minlength", 2);
 i([
   r({ type: Number })
-], e.prototype, "maxlength", 2);
+], t.prototype, "maxlength", 2);
 i([
   r()
-], e.prototype, "autocapitalize", 2);
+], t.prototype, "autocapitalize", 2);
 i([
   r()
-], e.prototype, "autocorrect", 2);
+], t.prototype, "autocorrect", 2);
 i([
   r()
-], e.prototype, "tooltip", 2);
+], t.prototype, "tooltip", 2);
 i([
   r()
-], e.prototype, "inputmode", 2);
+], t.prototype, "inputmode", 2);
+i([
+  r()
+], t.prototype, "rows", 2);
 i([
   u()
-], e.prototype, "showErrorMessage", 2);
+], t.prototype, "showErrorMessage", 2);
 i([
   u()
-], e.prototype, "touched", 2);
+], t.prototype, "touched", 2);
 i([
   b(".textarea__control")
-], e.prototype, "input", 2);
-e = i([
+], t.prototype, "input", 2);
+t = i([
   m("nve-textarea")
-], e);
+], t);
 export {
-  e as default
+  t as default
 };

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

@@ -13,7 +13,6 @@ const a = r`
 
   .textarea__base {
     display: flex;
-    position: relative; /** trengs for å posisjonere ikonen */
   }
 
   .textarea__control {
@@ -88,12 +87,13 @@ const a = r`
   }
 
   .textarea__icon__container {
-    position: absolute;
-    right: var(--sizing-4x-small);
-    top: var(--sizing-4x-small);
+    position: relative; /** trengs for å posisjonere ikonen */
   }
 
   .textarea__icon--error {
+    position: absolute;
+    left: -24px;
+    top: 10px;
     color: var(--feedback-background-emphasized-error);
   }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nve-designsystem",
-  "version": "0.1.61",
+  "version": "0.1.63",
   "exports": {
     ".": {
       "import": "./nve-designsystem.js",