nve-designsystem 2.0.1 → 2.0.2

package/components/nve-checkbox-group/nve-checkbox-group.component.js

@@ -1,33 +1,33 @@
-import { i as b, x as c } from "../../chunks/lit-element.js";
-import { n as a, t as p } from "../../chunks/property.js";
-import { r as d } from "../../chunks/state.js";
-import { e as f } from "../../chunks/query.js";
+import { i as p, E as c, x as d } from "../../chunks/lit-element.js";
+import { n as a, t as f } from "../../chunks/property.js";
+import { r as u } from "../../chunks/state.js";
+import { e as v } from "../../chunks/query.js";
 import "../nve-label/nve-label.component.js";
-import v from "./nve-checkbox-group.styles.js";
-import { t as g } from "../../chunks/updateInvalidProperty.js";
-function u(e, t) {
+import g from "./nve-checkbox-group.styles.js";
+import { t as y } from "../../chunks/updateInvalidProperty.js";
+function b(e, t) {
   if (e === t) return !0;
   if (typeof e != "object" || e === null || typeof t != "object" || t === null)
     return !1;
   let s = Object.keys(e), i = Object.keys(t);
   if (s.length !== i.length) return !1;
   for (let o of s)
-    if (!i.includes(o) || !u(e[o], t[o])) return !1;
+    if (!i.includes(o) || !b(e[o], t[o])) return !1;
   return !0;
 }
-var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, l = (e, t, s, i) => {
-  for (var o = i > 1 ? void 0 : i ? m(t, s) : t, n = e.length - 1, h; n >= 0; n--)
+var m = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? k(t, s) : t, n = e.length - 1, h; n >= 0; n--)
     (h = e[n]) && (o = (i ? h(t, s, o) : h(o)) || o);
-  return i && o && y(t, s, o), o;
+  return i && o && m(t, s, o), o;
 };
-let r = class extends b {
+let r = class extends p {
   constructor() {
     super(), this.disabled = !1, this.required = !1, this.orientation = "vertical", this.requiredLabel = "*Obligatorisk", this.showErrorMessage = !1, this.isCustomValidationError = !1, this.updateSelectedValues = (e) => {
       const t = e.target;
       if (t.checked)
         this.selectedValues || (this.selectedValues = []), this.selectedValues.push(t.value);
       else if (this.selectedValues) {
-        const s = this.selectedValues.findIndex((i) => u(i, t.value));
+        const s = this.selectedValues.findIndex((i) => b(i, t.value));
         s !== -1 && this.selectedValues.splice(s, 1);
       }
       this.requestUpdate();
@@ -52,7 +52,7 @@ let r = class extends b {
   updated(e) {
     if (super.updated(e), e.has("disabled")) {
       const t = Array.from(this.querySelectorAll("nve-checkbox"));
-      g(t, this.disabled, "disabled");
+      y(t, this.disabled, "disabled");
     }
   }
   /** En 'fake' metode som gjør custom validering enklere på checkbox-group komponent */
@@ -95,7 +95,7 @@ let r = class extends b {
     return Array.from(this.querySelectorAll("nve-checkbox")).some((s) => s.checked);
   }
   render() {
-    return c`
+    return d`
       <fieldset
         class="checkbox-group"
         aria-required=${this.required}
@@ -103,18 +103,18 @@ let r = class extends b {
         aria-describedby="error-message"
         aria-errormessage="error-message"
       >
-        ${this.label ? c`<div class="checkbox-group__label">
+        ${this.label ? d`<div class="checkbox-group__label">
               <nve-label id="label" value=${this.label} size="small" tooltip=${this.tooltip}></nve-label>
-            </div>` : null}
+            </div>` : c}
         <slot class="checkbox-group__checkboxes"></slot>
-        ${this.showErrorMessage ? c`<span role="alert" id="error-message" class="checkbox-group__error-message"
-              >${this.errorMessage || null}</span
-            >` : null}
+        ${this.showErrorMessage ? d`<span role="alert" id="error-message" class="checkbox-group__error-message"
+              >${this.errorMessage || c}</span
+            >` : c}
       </fieldset>
     `;
   }
 };
-r.styles = [v];
+r.styles = [g];
 l([
   a({ type: Boolean, reflect: !0 })
 ], r.prototype, "disabled", 2);
@@ -140,16 +140,16 @@ l([
   a({ type: Array })
 ], r.prototype, "selectedValues", 2);
 l([
-  f("slot")
+  v("slot")
 ], r.prototype, "slot", 2);
 l([
-  d()
+  u()
 ], r.prototype, "showErrorMessage", 2);
 l([
-  d()
+  u()
 ], r.prototype, "isCustomValidationError", 2);
 r = l([
-  p("nve-checkbox-group")
+  f("nve-checkbox-group")
 ], r);
 export {
   r as default

package/components/nve-checkbox-group/nve-checkbox-group.styles.js

@@ -48,6 +48,10 @@ const a = e`
     font: var(--body-xsmall);
     color: var(--feedback-background-emphasized-error);
   }
+
+  nve-label {
+    width: unset;
+  }
 `;
 export {
   a as default

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

@@ -87,11 +87,11 @@ const a = r`
     border-color: var(--feedback-background-emphasized-error);
   }
 
-  /* Formaterer "*Obligatorisk" over input-felt og til høyre riktig når required er satt */
+  /* Formaterer "*Obligatorisk" over input-felt når required er satt */
   .form-control--has-label .form-control__label {
     display: flex;
-    width: 100%;
-    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-xx-small);
     margin-inline-start: unset;
   }
 `;

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

@@ -1,29 +1,29 @@
-import { i as c, x as l } from "../../chunks/lit-element.js";
-import { n as s, t as m } from "../../chunks/property.js";
+import { i as m, E as d, x as n } from "../../chunks/lit-element.js";
+import { n as s, t as b } 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 { e as v } from "../../chunks/query.js";
+import y from "./nve-textarea.styles.js";
 import { o } 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) => {
-  for (var r = n > 1 ? void 0 : n ? x(a, h) : a, p = t.length - 1, d; p >= 0; p--)
-    (d = t[p]) && (r = (n ? d(a, h, r) : d(r)) || r);
-  return n && r && y(a, h, r), r;
+var x = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, i = (t, a, h, l) => {
+  for (var r = l > 1 ? void 0 : l ? _(a, h) : a, p = t.length - 1, c; p >= 0; p--)
+    (c = t[p]) && (r = (l ? c(a, h, r) : c(r)) || r);
+  return l && r && x(a, h, r), r;
 };
-let e = class extends c {
+let e = class extends m {
   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.testId = "", this.showErrorMessage = !1, this.touched = !1, this.resizeObserver = null;
   }
   firstUpdated() {
-    var h, n;
-    if (this.required) {
+    var h, l;
+    if (this.requiredLabel && this.style.setProperty("--textarea-required-content", `"${this.requiredLabel}"`), this.required) {
       const r = this.input.checkValidity();
       this.toggleAttribute("data-valid", r), this.toggleAttribute("data-invalid", !r);
     }
-    const t = (h = this.shadowRoot) == null ? void 0 : h.querySelector(".textarea__control"), a = (n = this.shadowRoot) == null ? void 0 : n.querySelector(".textarea__label");
+    const t = (h = this.shadowRoot) == null ? void 0 : h.querySelector(".textarea__control"), a = (l = this.shadowRoot) == null ? void 0 : l.querySelector(".textarea__label");
     t && (this.resizeObserver = new ResizeObserver((r) => {
       for (const p of r)
         a.style.width = `${p.contentRect.width + 32}px`;
@@ -76,18 +76,11 @@ let e = class extends c {
   }
   // eslint-disable-next-line max-lines-per-function
   render() {
-    return l`
+    return n`
       <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`
-                <nve-label
-                  aria-hidden=${this.label ? "false" : "true"}
-                  value=${this.label}
-                  tooltip=${o(this.tooltip)}
-                ></nve-label>
-              ` : null}
-          ${this.required && this.label ? l`<span class="textarea__required-label">${this.requiredLabel}</span>` : null}
-        </div>
+        ${this.label ? n`<div class="textarea__label">
+              <nve-label id="label" value=${this.label} size="small" tooltip=${o(this.tooltip)}></nve-label>
+            </div>` : d}
         <div part="base" class="textarea__base">
           <textarea
             part="textarea"
@@ -116,23 +109,23 @@ 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}
-              </div>` : null}
+          ${this.disabled || this.showErrorMessage ? n`<div class="textarea__icon__container">
+                ${this.disabled ? n`<nve-icon name="lock"></nve-icon>` : null}
+                ${this.showErrorMessage ? n`<nve-icon class="textarea__icon--error" name="error"></nve-icon>` : null}
+              </div>` : d}
         </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 ? n`<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}
+              >` : d}
+          ${this.showErrorMessage ? n`<span class="textarea__help-text textarea__help-text--error">${this.errorMessage}</span>` : d}
         </div>
       </div>
     `;
   }
 };
-e.styles = [v];
+e.styles = [y];
 i([
   s()
 ], e.prototype, "name", 2);
@@ -200,10 +193,10 @@ i([
   u()
 ], e.prototype, "touched", 2);
 i([
-  b(".textarea__control")
+  v(".textarea__control")
 ], e.prototype, "input", 2);
 e = i([
-  m("nve-textarea")
+  b("nve-textarea")
 ], e);
 export {
   e as default

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

@@ -2,6 +2,7 @@ import { a as r } from "../../chunks/lit-element.js";
 const a = r`
   :host {
     display: flex;
+    --textarea-required-content: '*Obligatorisk';
   }
 
   .form-control {
@@ -70,8 +71,10 @@ const a = r`
     align-items: center;
   }
 
-  .textarea__required-label {
+  :host([required]) nve-label::after {
+    content: var(--textarea-required-content);
     font: var(--label-x-small-light);
+    margin-left: auto;
     color: var(--feedback-background-emphasized-error);
   }
 
@@ -100,6 +103,10 @@ const a = r`
     top: 10px;
     color: var(--feedback-background-emphasized-error);
   }
+
+  nve-label {
+    width: unset;
+  }
 `;
 export {
   a as default