nve-designsystem 4.3.0 → 4.5.0

package/chunks/static-html.js

@@ -1,15 +1,15 @@
-import { s as e } from "./lit.js";
-//#region node_modules/lit-html/static.js
+import { a as e } from "./lit.js";
+//#region .pnpm/lit-html@3.3.3/node_modules/lit-html/static.js
 var t = Symbol.for(""), n = (e) => {
 	if (e?.r === t) return e?._$litStatic$;
 }, r = (e) => ({
 	_$litStatic$: e,
 	r: t
 }), i = (e, ...n) => ({
-	_$litStatic$: n.reduce(((t, n, r) => t + ((e) => {
+	_$litStatic$: n.reduce((t, n, r) => t + ((e) => {
 		if (e._$litStatic$ !== void 0) return e._$litStatic$;
 		throw Error(`Value passed to 'literal' function must be a 'literal' result: ${e}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`);
-	})(n) + e[r + 1]), e[0]),
+	})(n) + e[r + 1], e[0]),
 	r: t
 }), a = /* @__PURE__ */ new Map(), o = ((e) => (t, ...r) => {
 	let i = r.length, o, s, c = [], l = [], u, d = 0, f = !1;

package/chunks/unsafe-html.js

@@ -1,6 +1,6 @@
 import { n as e, r as t } from "./lit.js";
 import { i as n, n as r, r as i } from "./class-map.js";
-//#region node_modules/lit-html/directives/unsafe-html.js
+//#region .pnpm/lit-html@3.3.3/node_modules/lit-html/directives/unsafe-html.js
 var a = class extends i {
 	constructor(t) {
 		if (super(t), this.it = e, t.type !== n.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");

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

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a as e, t } from "../../chunks/lit.js";
 import { o as n, s as r, t as i } from "../../chunks/decorate.js";
 //#region src/components/nve-accordion/nve-accordion.component.ts
 var a = class extends t {

package/components/nve-aspect-rose/nve-aspect-rose.component.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+import { INveComponent } from '../../interfaces/NveComponent.interface';
+/**
+ * Viser utsatte himmelretninger som en kompassrose.
+ * Rosen er delt opp i 8 sektorer. Utsatte sektorer vises i rødt.
+ * Er laget for å vise hvilke himmelretninger et skredproblem gjelder for, men kan selvfølgelig også brukes til andre ting.
+ * @cssproperty --aspect-rose-size - Høyde og bredde på komponenten. 90px er standard.
+ * @cssproperty --aspect-rose-outline-color - Farge på sirkelens omriss. Standard er #c6c6c5.
+ * @cssproperty --aspect-rose-affected-color - Farge på utsatte sektorer. Standard er #d21523.
+ * @cssproperty --aspect-rose-unaffected-color - Farge på ikke-utsatte sektorer. Standard er #e3e3e3.
+ */
+export default class NveAspectRose extends LitElement implements INveComponent {
+    testId: string | undefined;
+    /**
+     * 8-tegns binærtekst som representerer utsatte sektorer.
+     * Starter med nordlig sektor og går deretter med klokka.
+     * Eksempel: "00111110"
+     */
+    value: string;
+    /** Språk for himmelretningene. Blir satt til engelsk om lang starter på 'en'. Standard er norsk. */
+    lang: string;
+    /**
+     * Tilgjengelig tittel.
+     * Vises som aria-label på SVG-elementet og som <title> i SVG.
+     * Standardverdi avhenger av språket: 'Utsatte sektorer' for norsk, 'Affected aspects' for engelsk.
+     * Du kan overstyre denne teksten.
+     */
+    label: string | undefined;
+    static styles: import('lit').CSSResult[];
+    private isEnglish;
+    private get effectiveLabel();
+    private get directions();
+    private readonly rotations;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-aspect-rose': NveAspectRose;
+    }
+}

package/components/nve-aspect-rose/nve-aspect-rose.component.js

@@ -0,0 +1,90 @@
+import { a as e, s as t, t as n } from "../../chunks/lit.js";
+import { o as r, s as i, t as a } from "../../chunks/decorate.js";
+import { t as o } from "../../chunks/if-defined.js";
+import s from "./nve-aspect-rose.styles.js";
+//#region src/components/nve-aspect-rose/nve-aspect-rose.component.ts
+var c = class extends n {
+	constructor(...e) {
+		super(...e), this.testId = void 0, this.value = "00000000", this.lang = "no", this.label = void 0, this.rotations = [
+			-22.5,
+			22.5,
+			67.5,
+			112.5,
+			157.5,
+			202.5,
+			247.5,
+			292.5
+		];
+	}
+	static {
+		this.styles = [s];
+	}
+	isEnglish() {
+		return this.lang.toLowerCase().startsWith("en");
+	}
+	get effectiveLabel() {
+		return this.label ?? (this.isEnglish() ? "Affected aspects" : "Utsatte sektorer");
+	}
+	get directions() {
+		return [
+			{
+				cx: 45,
+				cy: 9,
+				label: "N"
+			},
+			{
+				cx: 81,
+				cy: 45,
+				label: this.isEnglish() ? "E" : "Ø"
+			},
+			{
+				cx: 45,
+				cy: 81,
+				label: "S"
+			},
+			{
+				cx: 9,
+				cy: 45,
+				label: this.isEnglish() ? "W" : "V"
+			}
+		];
+	}
+	render() {
+		let n = /^[01]{8}$/.test(this.value) ? this.value : "00000000";
+		return e`
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 90 90"
+        width="100%"
+        height="100%"
+        role="img"
+        aria-label=${this.effectiveLabel}
+        testid=${o(this.testId)}
+      >
+        ${t`<title>${this.effectiveLabel}</title>`}
+        <g>
+          ${this.rotations.map((e, r) => t`
+              <path
+                d="M 45 9 A 36 36 0 0 1 70.45584412271572 19.54415587728429 L 45 45 Z"
+                transform="rotate(${e} 45 45)"
+                stroke-width="1"
+                stroke="var(--aspect-rose-outline-color, #c6c6c5)"
+                class=${n[r] === "1" ? "sector-affected" : "sector-unaffected"}
+              ></path>
+            `)}
+          <circle cx="45" cy="45" r="36" fill="none" stroke-width="1" class="circle-outline"></circle>
+        </g>
+        ${this.directions.map(({ cx: e, cy: n, label: r }) => t`
+            <g>
+              <circle cx=${e} cy=${n} r="7.2" stroke-width="1" stroke="var(--aspect-rose-outline-color, #c6c6c5)" fill="#fff"></circle>
+              <text x=${e} y=${n} dy="3.168" text-anchor="middle" fill="#6a7a7b">${r}</text>
+            </g>
+          `)}
+      </svg>
+    `;
+	}
+};
+a([r({ type: String })], c.prototype, "testId", void 0), a([r({ type: String })], c.prototype, "value", void 0), a([r({ type: String })], c.prototype, "lang", void 0), a([r({ type: String })], c.prototype, "label", void 0), c = a([i("nve-aspect-rose")], c);
+var l = c;
+//#endregion
+export { l as default };

package/components/nve-aspect-rose/nve-aspect-rose.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/components/nve-aspect-rose/nve-aspect-rose.styles.js

@@ -0,0 +1,27 @@
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-aspect-rose/nve-aspect-rose.styles.ts
+var t = e`
+  :host {
+    display: inline-block;
+    width: var(--aspect-rose-size, 90px);
+    height: var(--aspect-rose-size, 90px);
+  }
+
+  text {
+    font-family: 'Source Sans 3', sans-serif;
+    font-weight: var(--font-weight-regular);
+    font-size: 0.67rem;
+  }
+
+  .circle-outline {
+    stroke: var(--aspect-rose-outline-color, #c6c6c5);
+  }
+  .sector-affected {
+    fill: var(--aspect-rose-affected-color, #d21523);
+  }
+  .sector-unaffected {
+    fill: var(--aspect-rose-unaffected-color, #e3e3e3);
+  }
+`;
+//#endregion
+export { t as default };

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

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a as e, t } from "../../chunks/lit.js";
 import { o as n, s as r, t as i } from "../../chunks/decorate.js";
 import { t as a } from "../../chunks/class-map.js";
 import o from "./nve-badge.styles.js";

package/components/nve-carousel-thumbnail/nve-carousel-thumbnail.component.js

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a as e, t } from "../../chunks/lit.js";
 import { o as n, s as r, t as i } from "../../chunks/decorate.js";
 import a from "./nve-carousel-thumbnail.styles.js";
 //#region src/components/nve-carousel-thumbnail/nve-carousel-thumbnail.component.ts

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

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a as e, t } from "../../chunks/lit.js";
 import { a as n, o as r, s as i, t as a } from "../../chunks/decorate.js";
 import { t as o } from "../../chunks/unsafe-html.js";
 import { n as s, t as c } from "../../chunks/ref.js";

package/components/nve-darkmode-switch/nve-darkmode-switch.component.js

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a as e, t } from "../../chunks/lit.js";
 import { o as n, s as r, t as i } from "../../chunks/decorate.js";
 //#region src/components/nve-darkmode-switch/nve-darkmode-switch.component.ts
 var a = class extends t {
@@ -6,7 +6,8 @@ var a = class extends t {
 		super(), this.testId = "", this.darkmode = !1, this.darkmodeclass = "darkmode", this.localStorageVariable = "preferdarkmode";
 	}
 	toggleDarkmode(e) {
-		this.darkmode = !!e.target.checked, localStorage.setItem(this.localStorageVariable, this.darkmode.toString()), this.darkmode ? document.documentElement.classList.add(this.darkmodeclass) : document.documentElement.classList.remove(this.darkmodeclass);
+		let t = e.target;
+		this.darkmode = !!t?.checked, localStorage.setItem(this.localStorageVariable, this.darkmode.toString()), this.darkmode ? document.documentElement.classList.add(this.darkmodeclass) : document.documentElement.classList.remove(this.darkmodeclass);
 	}
 	connectedCallback() {
 		super.connectedCallback();

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

@@ -1,5 +1,5 @@
 import { r as e, t } from "../../chunks/chunk.js";
-import { s as n, t as r } from "../../chunks/lit.js";
+import { a as n, t as r } from "../../chunks/lit.js";
 import { a as i, o as a, s as o, t as s } from "../../chunks/decorate.js";
 import { t as c } from "../../chunks/class-map.js";
 import { t as l } from "../../chunks/if-defined.js";

package/components/nve-link-card/nve-link-card.component.js

@@ -1,4 +1,4 @@
-import { n as e, s as t, t as n } from "../../chunks/lit.js";
+import { a as e, n as t, t as n } from "../../chunks/lit.js";
 import { o as r, s as i, t as a } from "../../chunks/decorate.js";
 import { t as o } from "../../chunks/class-map.js";
 import { t as s } from "../../chunks/if-defined.js";
@@ -22,17 +22,17 @@ var l = class extends n {
 		}
 	}
 	renderContent() {
-		return t`
+		return e`
       <slot name="icon"></slot>
       <div class="link-card__content">
         <div part="label" class="link-card__label">${this.label}</div>
-        ${this.additionalText ? t`<div part="additional-text" class="link-card__additional-text">${this.additionalText}</div>` : e}
+        ${this.additionalText ? e`<div part="additional-text" class="link-card__additional-text">${this.additionalText}</div>` : t}
       </div>
       <nve-icon aria-hidden="true" slot="suffix" name="${this.getIconName()}"></nve-icon>
     `;
 	}
 	render() {
-		return this.parentElement?.tagName.toLowerCase() === "a" || this.parentElement?.getAttribute("role") === "link" ? t` <div
+		return this.parentElement?.tagName.toLowerCase() === "a" || this.parentElement?.getAttribute("role") === "link" ? e` <div
         part="link-card"
         testId="${s(this.testId)}"
         class=${o({
@@ -42,14 +42,14 @@ var l = class extends n {
 		})}
       >
         ${this.renderContent()}
-      </div>` : t`
+      </div>` : e`
         <a
           testId="${s(this.testId)}"
           ?download=${this.clickAction === "download"}
           part="link-card"
           class="link-card link-card--${this.size} link-card--${this.variant}"
           href=${s(this.clickAction === "mail" ? `mailto:${this.href}` : this.href)}
-          target=${this.clickAction === "external" ? "_blank" : e}
+          target=${this.clickAction === "external" ? "_blank" : t}
           >${this.renderContent()}
         </a>
       `;

package/components/nve-message-card/nve-message-card.component.js

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a as e, t } from "../../chunks/lit.js";
 import { o as n, s as r, t as i } from "../../chunks/decorate.js";
 import { t as a } from "../../chunks/class-map.js";
 import "../nve-icon/nve-icon.component.js";

package/components/nve-navigation-card/nve-navigation-card.component.js

@@ -1,4 +1,4 @@
-import { n as e, s as t, t as n } from "../../chunks/lit.js";
+import { a as e, n as t, t as n } from "../../chunks/lit.js";
 import { o as r, s as i, t as a } from "../../chunks/decorate.js";
 import { t as o } from "../../chunks/if-defined.js";
 import "../nve-icon/nve-icon.component.js";
@@ -20,34 +20,34 @@ var c = class extends n {
 		}
 	}
 	renderContent() {
-		return t`
+		return e`
       <div part="content" class="navigation-card__content">
-        ${this.iconPath ? t`<img
+        ${this.iconPath ? e`<img
               part="leading-icon"
               src="${this.iconPath}"
               alt=""
               aria-hidden="true"
               class="navigation-card__icon"
-            />` : e}
+            />` : t}
         <h2 part="label" class="navigation-card__label">${this.label}</h2>
-        ${!this.iconPath && this.additionalText ? t`<p part="additional-text" class="navigation-card__additional-text">${this.additionalText}</p>` : e}
+        ${!this.iconPath && this.additionalText ? e`<p part="additional-text" class="navigation-card__additional-text">${this.additionalText}</p>` : t}
       </div>
       <nve-icon aria-hidden="true" name="${this.getIconName()}" class="navigation-card__arrow" />
     `;
 	}
 	render() {
-		return this.parentElement?.tagName.toLowerCase() === "a" || this.parentElement?.getAttribute("role") === "link" ? t`
+		return this.parentElement?.tagName.toLowerCase() === "a" || this.parentElement?.getAttribute("role") === "link" ? e`
         <div part="navigation-card" class="navigation-card" testid=${o(this.testId)}>
           ${this.renderContent()}
         </div>
-      ` : t`
+      ` : e`
       <a
         testid=${o(this.testId)}
         ?download=${this.clickAction === "download"}
         part="navigation-card"
         class="navigation-card"
         href="${o(this.href)}"
-        target=${this.clickAction === "external" ? "_blank" : e}
+        target=${this.clickAction === "external" ? "_blank" : t}
       >
         ${this.renderContent()}
       </a>

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

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a as e, t } from "../../chunks/lit.js";
 import { o as n, s as r, t as i } from "../../chunks/decorate.js";
 import a from "./nve-paragraph.styles.js";
 //#region src/components/nve-paragraph/nve-paragraph.component.ts

package/components/nve-stepper/nve-step/nve-step.component.js

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../../chunks/lit.js";
+import { a as e, t } from "../../../chunks/lit.js";
 import { o as n, r, s as i, t as a } from "../../../chunks/decorate.js";
 import o from "./nve-step.styles.js";
 //#region src/components/nve-stepper/nve-step/nve-step.component.ts
@@ -6,7 +6,7 @@ var s = /* @__PURE__ */ function(e) {
 	return e[e.NotStarted = 0] = "NotStarted", e[e.Started = 1] = "Started", e[e.Active = 2] = "Active", e[e.Done = 3] = "Done", e[e.Error = 4] = "Error", e;
 }({}), c = class extends t {
 	constructor(...e) {
-		super(...e), this.label = "", this.index = 0, this.state = s.NotStarted, this.selectedStepIndex = 0, this.isSelected = !1, this.isLast = !1, this.entranceAllowed = !1, this.orientation = "horizontal", this.hideStateText = !1, this.hideDescriptions = !1;
+		super(...e), this.label = "", this.index = 0, this.state = 0, this.selectedStepIndex = 0, this.isSelected = !1, this.isLast = !1, this.entranceAllowed = !1, this.orientation = "horizontal", this.hideStateText = !1, this.hideDescriptions = !1;
 	}
 	firstUpdated() {
 		this.style.setProperty("--flex-grow", this.isLast ? "0" : "1");
@@ -23,19 +23,19 @@ var s = /* @__PURE__ */ function(e) {
 	iconForState(e) {
 		let t = "";
 		switch (e) {
-			case s.NotStarted:
+			case 0:
 				t = "circle";
 				break;
-			case s.Active:
+			case 2:
 				t = "radio_button_checked";
 				break;
-			case s.Started:
+			case 1:
 				t = "trip_origin";
 				break;
-			case s.Done:
+			case 3:
 				t = "check_circle";
 				break;
-			case s.Error:
+			case 4:
 				t = "error";
 				break;
 			default:
@@ -46,35 +46,35 @@ var s = /* @__PURE__ */ function(e) {
 	}
 	getStateText(e) {
 		switch (e) {
-			case s.NotStarted: return "Ikke påbegynt";
-			case s.Active: return "Aktiv";
-			case s.Started: return "Påbegynt";
-			case s.Done: return "Fullført";
-			case s.Error: return "Feil";
+			case 0: return "Ikke påbegynt";
+			case 2: return "Aktiv";
+			case 1: return "Påbegynt";
+			case 3: return "Fullført";
+			case 4: return "Feil";
 			default: return "Ikke påbegynt";
 		}
 	}
 	getStateColorClass(e) {
 		switch (e) {
-			case s.NotStarted: return "state-not-started-color";
-			case s.Active: return "state-started-color";
-			case s.Done: return "state-done-color";
-			case s.Error: return "state-error-color";
+			case 0: return "state-not-started-color";
+			case 2: return "state-started-color";
+			case 3: return "state-done-color";
+			case 4: return "state-error-color";
 			default: return "state-not-started-color";
 		}
 	}
 	getLabelClass(e) {
 		switch (e) {
-			case s.NotStarted: return "state-not-started-color";
-			case s.Error: return "state-error-color";
+			case 0: return "state-not-started-color";
+			case 4: return "state-error-color";
 			default: return "";
 		}
 	}
 	getIconClass(e) {
 		switch (e) {
-			case s.Started: return "";
-			case s.NotStarted: return "state-not-started-icon-color filled-icon";
-			case s.Error: return "state-error-color filled-icon";
+			case 1: return "";
+			case 0: return "state-not-started-icon-color filled-icon";
+			case 4: return "state-error-color filled-icon";
 			default: return "filled-icon";
 		}
 	}

package/components/nve-stepper/nve-stepper-mobile.component.js

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a as e, t } from "../../chunks/lit.js";
 import { o as n, s as r, t as i } from "../../chunks/decorate.js";
 import a from "./nve-stepper-mobile.styles.js";
 //#region src/components/nve-stepper/nve-stepper-mobile.component.ts

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

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a as e, t } from "../../chunks/lit.js";
 import { o as n, s as r, t as i } from "../../chunks/decorate.js";
 import { StepState as a } from "./nve-step/nve-step.component.js";
 import o from "./nve-stepper.styles.js";

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

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a as e, t } from "../../chunks/lit.js";
 import { a as n, o as r, r as i, s as a, t as o } from "../../chunks/decorate.js";
 import { t as s } from "../../chunks/class-map.js";
 import { t as c } from "../../chunks/if-defined.js";

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

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a as e, t } from "../../chunks/lit.js";
 import { o as n, s as r, t as i } from "../../chunks/decorate.js";
 import { t as a } from "../../chunks/class-map.js";
 import o from "./nve-tab.styles.js";

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

@@ -1,4 +1,4 @@
-import { n as e, s as t, t as n } from "../../chunks/lit.js";
+import { a as e, n as t, t as n } from "../../chunks/lit.js";
 import { a as r, o as i, s as a, t as o } from "../../chunks/decorate.js";
 import { t as s } from "../../chunks/class-map.js";
 import { t as c } from "../../chunks/if-defined.js";
@@ -157,7 +157,7 @@ var d = class extends n {
 		}
 	}
 	render() {
-		return t`
+		return e`
       <div
         part="base"
         class="tab-group"
@@ -175,7 +175,7 @@ var d = class extends n {
           >
             <slot name="nav"></slot>
           </div>
-          ${this.canScrollBack && this.isOverflow ? t`
+          ${this.canScrollBack && this.isOverflow ? e`
                 <div
                   aria-hidden="true"
                   part="button-backward-base"
@@ -185,8 +185,8 @@ var d = class extends n {
                     <nve-icon name="chevron_backward"></nve-icon>
                   </nve-button>
                 </div>
-              ` : e}
-          ${this.canScrollForward && this.isOverflow ? t`
+              ` : t}
+          ${this.canScrollForward && this.isOverflow ? e`
                 <div
                   part="button-forward-base"
                   aria-hidden="true"
@@ -196,7 +196,7 @@ var d = class extends n {
                     <nve-icon name="chevron_forward"></nve-icon>
                   </nve-button>
                 </div>
-              ` : e}
+              ` : t}
         </div>
         <slot part="body"></slot>
       </div>

package/components/nve-tab-panel/nve-tab-panel.component.js

@@ -1,4 +1,4 @@
-import { s as e, t } from "../../chunks/lit.js";
+import { a as e, t } from "../../chunks/lit.js";
 import { o as n, s as r, t as i } from "../../chunks/decorate.js";
 import a from "./nve-tab-panel.styles.js";
 //#region src/components/nve-tab-panel/nve-tab-panel.component.ts

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

@@ -1,4 +1,4 @@
-import { n as e, s as t, t as n } from "../../chunks/lit.js";
+import { a as e, n as t, t as n } from "../../chunks/lit.js";
 import { o as r, s as i, t as a } from "../../chunks/decorate.js";
 import { t as o } from "../../chunks/class-map.js";
 import s from "./nve-tag.styles.js";
@@ -20,7 +20,7 @@ var c = class extends n {
 		this.dispatchEvent(e);
 	}
 	render() {
-		return t`
+		return e`
       <span
         part="base"
         class=${o({
@@ -38,20 +38,20 @@ var c = class extends n {
 		})}
       >
         <slot name="prefix"
-          >${this.dot ? t`<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+          >${this.dot ? e`<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <circle cx="5.5" cy="5" r="5" fill="currentcolor" />
-              </svg> ` : e}</slot
+              </svg> ` : t}</slot
         >
         <slot part="text"></slot>
         <slot name="extra" part="extra">${this.extraText}</slot>
-        ${this.closeable ? t`<button
+        ${this.closeable ? e`<button
               part="close"
               class="tag-close"
               aria-label="${this.closeAriaLabel}"
               @click=${this.closeButtonClick}
             >
               <nve-icon name="close"></nve-icon>
-            </button>` : e}
+            </button>` : t}
       </span>
     `;
 	}

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

@@ -1,4 +1,4 @@
-import { n as e, s as t, t as n } from "../../chunks/lit.js";
+import { a as e, n as t, t as n } from "../../chunks/lit.js";
 import { a as r, o as i, r as a, s as o, t as s } from "../../chunks/decorate.js";
 import { t as c } from "../../chunks/class-map.js";
 import { t as l } from "../../chunks/if-defined.js";
@@ -62,20 +62,20 @@ var f = class extends n {
 	}
 	render() {
 		let n = !!this.querySelector("[slot=\"label\"]");
-		return t`
+		return e`
       <div part="form-control" class=${c({
 			"form-control": !0,
 			"form-control--has-label": this.label
 		})}>
-        ${n ? t`<slot name="label"></slot>` : this.label ? t`<nve-label
+        ${n ? e`<slot name="label"></slot>` : this.label ? e`<nve-label
                 id="label"
                 value=${this.label}
                 size="small"
                 tooltip=${l(this.tooltip)}
-              ></nve-label>` : e}
-        ${this.helpText ? t` <div part="help-text-container" class="textarea__help-text__container">
+              ></nve-label>` : t}
+        ${this.helpText ? e` <div part="help-text-container" class="textarea__help-text__container">
               <span class="textarea__help-text" aria-hidden=${this.helpText ? "false" : "true"}>${this.helpText}</span>
-            </div>` : e}
+            </div>` : t}
 
         <div part="base" class="textarea__base">
           <textarea
@@ -105,15 +105,15 @@ var f = class extends n {
           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 ? t`<div class="textarea__icon__container">
-                ${this.disabled ? t`<nve-icon name="lock"></nve-icon>` : null}
-                ${this.showErrorMessage ? t`<nve-icon class="textarea__icon--error" name="error"></nve-icon>` : null}
-              </div>` : e}
+          ${this.disabled || this.showErrorMessage ? e`<div class="textarea__icon__container">
+                ${this.disabled ? e`<nve-icon name="lock"></nve-icon>` : null}
+                ${this.showErrorMessage ? e`<nve-icon class="textarea__icon--error" name="error"></nve-icon>` : null}
+              </div>` : t}
         </div>
         <div part="hint-text-container" class="textarea__hint-text__container">
           <!-- Ikke vis hint dersom feil -->
-          ${!this.showErrorMessage && this.hint ? t`<span class="textarea__hint" aria-hidden=${this.hint ? "false" : "true"}>${this.hint}</span>` : e}
-          ${this.showErrorMessage ? t`<span class="textarea__help-text textarea__help-text--error">${this.errorMessage}</span>` : e}
+          ${!this.showErrorMessage && this.hint ? e`<span class="textarea__hint" aria-hidden=${this.hint ? "false" : "true"}>${this.hint}</span>` : t}
+          ${this.showErrorMessage ? e`<span class="textarea__help-text textarea__help-text--error">${this.errorMessage}</span>` : t}
         </div>
       </div>
     `;