nve-designsystem 3.1.0 → 3.3.0

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

@@ -1,47 +1,2 @@
-import { n as d, t as c } from "../../chunks/property.js";
-import { c as u } from "../../chunks/chunk.ZH2AND3P.js";
-import "../../chunks/chunk.6CTB5ZDJ.js";
-import "../../chunks/chunk.YHLNUJ7P.js";
-import "../../chunks/chunk.4TUIT776.js";
-import m from "./nve-carousel.styles.js";
-var p = Object.defineProperty, h = Object.getOwnPropertyDescriptor, l = (t, r, a, o) => {
-  for (var e = o > 1 ? void 0 : o ? h(r, a) : r, n = t.length - 1, i; n >= 0; n--)
-    (i = t[n]) && (e = (o ? i(r, a, e) : i(e)) || e);
-  return o && e && p(r, a, e), e;
-};
-let s = class extends u {
-  constructor() {
-    super(), this.testId = void 0, this.paginationCounter = !1;
-  }
-  /* Overskrive metoden fra shoelace, slik den ser etter nve-carousel-item isteden for sl-carousel-item */
-  // @ts-expect-error overskriver private method
-  isCarouselItem(t) {
-    return t instanceof Element && t.tagName.toLowerCase() === "nve-carousel-item";
-  }
-  firstUpdated() {
-    super.firstUpdated();
-    const t = this.querySelectorAll("nve-carousel-item:not([data-clone])").length;
-    this.shadowRoot?.getElementById("scroll-container")?.setAttribute("data-num-items", t.toString()), this.shadowRoot?.getElementById("scroll-container")?.setAttribute("data-active-item", "1"), this.addEventListener("sl-slide-change", this.handeSlideChange.bind(this));
-  }
-  updated(t) {
-    super.updated(t);
-    const r = this.querySelectorAll("nve-carousel-item:not([data-clone])").length;
-    this.shadowRoot?.getElementById("scroll-container")?.setAttribute("data-num-items", r.toString());
-  }
-  handeSlideChange(t) {
-    this.shadowRoot?.getElementById("scroll-container")?.setAttribute("data-active-item", (t.detail.index + 1).toString());
-  }
-};
-s.styles = [u.styles, m];
-l([
-  d({ reflect: !0, type: String })
-], s.prototype, "testId", 2);
-l([
-  d({ reflect: !0, type: Boolean })
-], s.prototype, "paginationCounter", 2);
-s = l([
-  c("nve-carousel")
-], s);
-export {
-  s as default
-};
+import { t as e } from "../../chunks/nve-carousel.component.js";
+export { e as default };

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

@@ -1,5 +1,6 @@
-import { i as a } from "../../chunks/lit-element.js";
-const o = a`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-carousel/nve-carousel.styles.ts
+var t = e`
   :host::part(base) {
     gap: 0rem 10px;
   }
@@ -29,7 +30,7 @@ const o = a`
   }
 
   :host::part(navigation-button):hover {
-    background-color: var(--color-interactive-secondary-background-hover);
+    background-color: var(--color-interactive-background-secondary-hover);
     opacity: 70%;
     transition: 0.3s;
     color: var(--color-neutrals-background-primary);
@@ -64,6 +65,5 @@ const o = a`
     background-color: var(--color-neutrals-background-primary);
   }
 `;
-export {
-  o as default
-};
+//#endregion
+export { t as default };

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

@@ -1,40 +1,2 @@
-import { n, t as a } from "../../chunks/property.js";
-import { x as d } from "../../chunks/lit-element.js";
-import { c as u } from "../../chunks/chunk.IKV4VH3T.js";
-import "../../chunks/chunk.4TUIT776.js";
-import f from "./nve-carousel-item.styles.js";
-var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (e, s, o, i) => {
-  for (var t = i > 1 ? void 0 : i ? v(s, o) : s, p = e.length - 1, l; p >= 0; p--)
-    (l = e[p]) && (t = (i ? l(s, o, t) : l(t)) || t);
-  return i && t && m(s, o, t), t;
-};
-let r = class extends u {
-  constructor() {
-    super(), this.testId = void 0, this.description = "";
-  }
-  updated(e) {
-    super.updated(e), e.has("description") && this.style.setProperty("--nve-carousel-description", `"${this.description}"`);
-  }
-  render() {
-    return d`
-      <slot></slot>
-      ${this.description ? d`
-        <div class="carousel-item__description">
-          <p>${this.description}</p>
-        </div>` : ""}
-    `;
-  }
-};
-r.styles = [u.styles, f];
-c([
-  n({ reflect: !0, type: String })
-], r.prototype, "testId", 2);
-c([
-  n({ type: String, reflect: !0 })
-], r.prototype, "description", 2);
-r = c([
-  a("nve-carousel-item")
-], r);
-export {
-  r as default
-};
+import { t as e } from "../../chunks/nve-carousel-item.component.js";
+export { e as default };

package/components/nve-carousel-item/nve-carousel-item.styles.js

@@ -1,5 +1,6 @@
-import { i as o } from "../../chunks/lit-element.js";
-const r = o`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-carousel-item/nve-carousel-item.styles.ts
+var t = e`
   :host(nve-carousel-item) {
     aspect-ratio: 16/9;
     object-fit: contain;
@@ -17,6 +18,5 @@ const r = o`
     padding: 0 var(--spacing-medium);
   }
 `;
-export {
-  r as default
-};
+//#endregion
+export { t as default };

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

@@ -1,61 +1,51 @@
-import { a as d, x as u } from "../../chunks/lit-element.js";
-import { n as c, t as m } from "../../chunks/property.js";
-import h from "./nve-carousel-thumbnail.styles.js";
-var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (i, t, l, e) => {
-  for (var s = e > 1 ? void 0 : e ? g(t, l) : t, o = i.length - 1, a; o >= 0; o--)
-    (a = i[o]) && (s = (e ? a(t, l, s) : a(s)) || s);
-  return e && s && f(t, l, s), s;
-};
-let n = class extends d {
-  constructor() {
-    super(), this.testId = void 0, this.carouselId = void 0;
-  }
-  // For å vite hvilken karusell vi skal lytte på.
-  handleSlotChange() {
-    const t = this.shadowRoot?.querySelector("slot")?.assignedNodes({ flatten: !0 });
-    t.forEach((e) => {
-      e instanceof HTMLImageElement && e.classList.add("thumbnail__image");
-    }), t.filter((e) => e instanceof HTMLImageElement)[0].classList.add("thumbnail__image--active");
-  }
-  handleClick(i) {
-    if (!this.carouselId) return;
-    const t = document.getElementById(this.carouselId), l = i.target, s = this.shadowRoot?.querySelector("slot")?.assignedNodes({ flatten: !0 }).filter(
-      (o) => o instanceof HTMLImageElement && o.classList.contains("thumbnail__image")
-    );
-    if (l.matches(".thumbnail__image") && s && t) {
-      const o = s.indexOf(l);
-      t.goToSlide(o);
-    }
-  }
-  firstUpdated() {
-    if (!this.carouselId) return;
-    document.getElementById(this.carouselId).addEventListener("sl-slide-change", (t) => {
-      const e = this.shadowRoot?.querySelector("slot")?.assignedNodes({ flatten: !0 }).filter(
-        (a) => a instanceof HTMLImageElement && a.classList.contains("thumbnail__image")
-      ), s = t.detail.index, o = e[s];
-      e?.forEach((a) => a.classList.remove("thumbnail__image--active")), o?.classList.add("thumbnail__image--active");
-    });
-  }
-  render() {
-    return u`
+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
+var o = class extends t {
+	static {
+		this.styles = [a];
+	}
+	constructor() {
+		super(), this.testId = void 0, this.carouselId = void 0;
+	}
+	handleSlotChange() {
+		let e = (this.shadowRoot?.querySelector("slot"))?.assignedNodes({ flatten: !0 });
+		e.forEach((e) => {
+			e instanceof HTMLImageElement && e.classList.add("thumbnail__image");
+		}), e.filter((e) => e instanceof HTMLImageElement)[0].classList.add("thumbnail__image--active");
+	}
+	handleClick(e) {
+		if (!this.carouselId) return;
+		let t = document.getElementById(this.carouselId), n = e.target, r = (this.shadowRoot?.querySelector("slot"))?.assignedNodes({ flatten: !0 }).filter((e) => e instanceof HTMLImageElement && e.classList.contains("thumbnail__image"));
+		if (n.matches(".thumbnail__image") && r && t) {
+			let e = r.indexOf(n);
+			t.goToSlide(e);
+		}
+	}
+	firstUpdated() {
+		this.carouselId && document.getElementById(this.carouselId).addEventListener("sl-slide-change", (e) => {
+			let t = (this.shadowRoot?.querySelector("slot"))?.assignedNodes({ flatten: !0 }).filter((e) => e instanceof HTMLImageElement && e.classList.contains("thumbnail__image")), n = t[e.detail.index];
+			t?.forEach((e) => e.classList.remove("thumbnail__image--active")), n?.classList.add("thumbnail__image--active");
+		});
+	}
+	render() {
+		return e`
       <div class="thumbnail">
         <div class="thumbnail__scroller" @click="${this.handleClick}">
           <slot @slotchange="${this.handleSlotChange}"></slot>
         </div>
       </div>
     `;
-  }
-};
-n.styles = [h];
-r([
-  c({ reflect: !0, type: String })
-], n.prototype, "testId", 2);
-r([
-  c({ reflect: !0, type: String })
-], n.prototype, "carouselId", 2);
-n = r([
-  m("nve-carousel-thumbnail")
-], n);
-export {
-  n as default
+	}
 };
+i([n({
+	reflect: !0,
+	type: String
+})], o.prototype, "testId", void 0), i([n({
+	reflect: !0,
+	type: String
+})], o.prototype, "carouselId", void 0), o = i([r("nve-carousel-thumbnail")], o);
+var s = o;
+//#endregion
+export { s as default };

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

@@ -1,5 +1,6 @@
-import { i as t } from "../../chunks/lit-element.js";
-const i = t`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-carousel-thumbnail/nve-carousel-thumbnail.styles.ts
+var t = e`
   .thumbnail {
     display: flex;
     justify-content: center;
@@ -34,6 +35,5 @@ const i = t`
     opacity: 1;
   }
 `;
-export {
-  i as default
-};
+//#endregion
+export { t as default };

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

@@ -1,34 +1,2 @@
-import { t as i } from "../../chunks/property.js";
-import "../../chunks/lit-element.js";
-import { c as n } from "../../chunks/chunk.D5YQDJ7X.js";
-import "../../chunks/chunk.SI4ACBFK.js";
-import "../../chunks/chunk.3RPBFEDE.js";
-import "../../chunks/chunk.YHLNUJ7P.js";
-import "../../chunks/chunk.4TUIT776.js";
-import p from "./nve-checkbox.styles.js";
-var v = Object.getOwnPropertyDescriptor, d = (e, o, a, c) => {
-  for (var t = c > 1 ? void 0 : c ? v(o, a) : o, r = e.length - 1, l; r >= 0; r--)
-    (l = e[r]) && (t = l(t) || t);
-  return t;
-};
-let s = class extends n {
-  constructor() {
-    super();
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.addEventListener("sl-invalid", (e) => {
-      e.preventDefault();
-    });
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("sl-invalid", () => {
-    });
-  }
-};
-s.styles = [n.styles, p];
-s = d([
-  i("nve-checkbox")
-], s);
-export {
-  s as default
-};
+import { t as e } from "../../chunks/nve-checkbox.component.js";
+export { e as default };

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

@@ -1,5 +1,6 @@
-import { i as r } from "../../chunks/lit-element.js";
-const a = r`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-checkbox/nve-checkbox.styles.ts
+var t = e`
   .error {
     border-color: var(--color-feedback-background-emphasized-error) !important;
   }
@@ -23,7 +24,7 @@ const a = r`
   }
 
   :host([data-invalid])::part(control) {
-    border-color: var(--color-feedback-background-emphasized-error);
+    border-color: var(--color-feedback-border-emphasized-error);
   }
   :host([data-invalid])::part(control control--checked),
   :host([data-user-invalid])::part(control control--indeterminate) {
@@ -31,7 +32,7 @@ const a = r`
   }
 
   :host(:not([disabled]):hover)::part(control) {
-    border-color: var(--color-neutrals-foreground-subtle, #006b99) !important;
+    border-color: var(--color-neutrals-foreground-subtle) !important;
   }
 
   sl-icon {
@@ -51,6 +52,5 @@ const a = r`
     font: var(--typography-label-x-small-light);
   }
 `;
-export {
-  a as default
-};
+//#endregion
+export { t as default };

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

@@ -1,152 +1,2 @@
-import { a 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 g from "./nve-checkbox-group.styles.js";
-import { t as m } 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), o = Object.keys(t);
-  if (s.length !== o.length) return !1;
-  for (let l of s)
-    if (!o.includes(l) || !b(e[l], t[l])) return !1;
-  return !0;
-}
-var y = Object.defineProperty, k = Object.getOwnPropertyDescriptor, i = (e, t, s, o) => {
-  for (var l = o > 1 ? void 0 : o ? k(t, s) : t, n = e.length - 1, h; n >= 0; n--)
-    (h = e[n]) && (l = (o ? h(t, s, l) : h(l)) || l);
-  return o && l && y(t, s, l), l;
-};
-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((o) => b(o, t.value));
-        s !== -1 && this.selectedValues.splice(s, 1);
-      }
-      this.requestUpdate();
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.closest("form")?.addEventListener("submit", this.handleSubmit.bind(this)), this.addEventListener("sl-change", this.handleChange.bind(this));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("sl-change", this.handleChange), this.removeEventListener("submit", this.handleSubmit);
-  }
-  firstUpdated() {
-    if (this.requiredLabel && this.style.setProperty("--sl-checkbox-required-content", `"${this.requiredLabel}"`), !this.selectedValues?.length) return;
-    Array.from(this.querySelectorAll("nve-checkbox")).forEach((t) => {
-      this.selectedValues?.includes(t.value) ? t.checked = !0 : t.checked = !1;
-    });
-  }
-  updated(e) {
-    if (super.updated(e), e.has("disabled")) {
-      const t = Array.from(this.querySelectorAll("nve-checkbox"));
-      m(t, this.disabled, "disabled");
-    }
-  }
-  /** En 'fake' metode som gjør custom validering enklere på checkbox-group komponent */
-  setCustomValidity(e = "") {
-    const t = !e.length;
-    t ? this.resetValidation() : (this.errorMessage = e, this.makeInvalid()), this.isCustomValidationError = !t, this.toggleValidationAttributes(t);
-  }
-  handleSubmit(e) {
-    e.preventDefault(), this.checkValidity();
-  }
-  handleChange(e) {
-    this.updateSelectedValues(e), this.checkValidity();
-  }
-  /** Sjekker validity basert på constraint validation. Man kan legge til flere properties. */
-  checkValidity() {
-    if (!this.required || this.isCustomValidationError) return;
-    let e = !0;
-    this.required && (e = this.checkIfRequiredValid()), e ? this.resetValidation() : this.makeInvalid(), this.toggleValidationAttributes(e);
-  }
-  /** Toggler riktig validering attribute for å vise riktig style */
-  toggleValidationAttributes(e) {
-    this.toggleAttribute("data-valid", e), this.toggleAttribute("data-user-valid", e), this.toggleAttribute("data-invalid", !e), this.toggleAttribute("data-user-invalid", !e);
-  }
-  resetValidation() {
-    Array.from(this.querySelectorAll("nve-checkbox")).forEach((t) => {
-      t.toggleAttribute("data-user-invalid", !1), t.setCustomValidity("");
-    }), this.showErrorMessage = !1;
-  }
-  makeInvalid() {
-    Array.from(this.querySelectorAll("nve-checkbox")).forEach((s) => {
-      s.toggleAttribute("data-user-invalid", !0), s.setCustomValidity(this.errorMessage || "Error");
-    }), this.showErrorMessage = !0;
-    const t = new Event("sl-invalid", {
-      bubbles: !0,
-      cancelable: !0
-    });
-    this.dispatchEvent(t);
-  }
-  checkIfRequiredValid() {
-    return Array.from(this.querySelectorAll("nve-checkbox")).some((s) => s.checked);
-  }
-  render() {
-    return d`
-      <fieldset
-        class="checkbox-group"
-        aria-required=${this.required}
-        aria-labelledby="label"
-        aria-describedby="error-message"
-        aria-errormessage="error-message"
-      >
-        ${this.label ? d`<div class="checkbox-group__label">
-              <nve-label id="label" value=${this.label} size="small" tooltip=${this.tooltip}></nve-label>
-            </div>` : c}
-        <slot class="checkbox-group__checkboxes"></slot>
-        ${this.showErrorMessage ? d`<span role="alert" id="error-message" class="checkbox-group__error-message"
-              >${this.errorMessage || c}</span
-            >` : c}
-      </fieldset>
-    `;
-  }
-};
-r.styles = [g];
-i([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
-i([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "required", 2);
-i([
-  a()
-], r.prototype, "label", 2);
-i([
-  a()
-], r.prototype, "tooltip", 2);
-i([
-  a({ type: String, reflect: !0 })
-], r.prototype, "orientation", 2);
-i([
-  a()
-], r.prototype, "errorMessage", 2);
-i([
-  a()
-], r.prototype, "requiredLabel", 2);
-i([
-  a({ type: Array })
-], r.prototype, "selectedValues", 2);
-i([
-  v("slot")
-], r.prototype, "slot", 2);
-i([
-  u()
-], r.prototype, "showErrorMessage", 2);
-i([
-  u()
-], r.prototype, "isCustomValidationError", 2);
-r = i([
-  f("nve-checkbox-group")
-], r);
-export {
-  r as default
-};
+import { t as e } from "../../chunks/nve-checkbox-group.component.js";
+export { e as default };

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

@@ -1,5 +1,6 @@
-import { i as e } from "../../chunks/lit-element.js";
-const o = e`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-checkbox-group/nve-checkbox-group.styles.ts
+var t = e`
   :host {
     --sl-checkbox-required-content: '*Obligatorisk';
   }
@@ -53,6 +54,5 @@ const o = e`
     width: unset;
   }
 `;
-export {
-  o as default
-};
+//#endregion
+export { t as default };