nve-designsystem 3.2.0 → 3.3.0

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

@@ -1,115 +1,2 @@
-import { a as u, x as a } from "../../chunks/lit-element.js";
-import { n, t as c } 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";
-import { o as p } 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 = 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 r = t;
-        if (r.tagName.toLowerCase() === "sl-visually-hidden")
-          return !1;
-        if (!r.hasAttribute("slot"))
-          return !0;
-      }
-      return !1;
-    });
-  }
-  hasNamedSlot(t) {
-    return this.get(t) !== null;
-  }
-  /**
-   * @returns en slot med gitt navn eller null om den ikke finnes
-   */
-  get(t) {
-    return this.host.querySelector(`:scope > [slot="${t}"]`);
-  }
-  test(t) {
-    return t === "[default]" ? this.hasDefaultSlot() : this.hasNamedSlot(t);
-  }
-  hostConnected() {
-    this.host.shadowRoot.addEventListener("slotchange", this.handleSlotChange);
-  }
-  hostDisconnected() {
-    this.host.shadowRoot.removeEventListener("slotchange", this.handleSlotChange);
-  }
-}
-var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, s = (l, t, r, i) => {
-  for (var e = i > 1 ? void 0 : i ? g(t, r) : t, h = l.length - 1, f; h >= 0; h--)
-    (f = l[h]) && (e = (i ? f(t, r, e) : f(e)) || e);
-  return i && e && v(t, r, e), e;
-};
-let o = class extends u {
-  constructor() {
-    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 l = this.tooltip;
-    return l?.length || (l = this.hasSlotController.get("tooltip")), l ? a`<nve-tooltip placement="top">
-        <div slot="content">${l}</div>
-        <nve-icon class="nve-info-icon" name="Info"></nve-icon>
-      </nve-tooltip>` : a``;
-  }
-  renderValueProperty() {
-    return this.value.length ? a` <label
-        part="form-control-label"
-        class="form-control__label"
-        aria-hidden="false"
-        for=${p(this.for)}
-      >
-        <slot name="label">${this.value}</slot>
-      </label>` : a` <label
-        part="form-control-label"
-        class="form-control__label"
-        aria-hidden="false"
-        for=${p(this.for)}
-      >
-        <slot></slot>
-      </label>`;
-  }
-  render() {
-    return a`
-      ${this.iconLeft ? this.renderInfoIconWithTooltip() : null} ${this.renderValueProperty()}
-      <slot name="suffix"></slot>
-      ${this.iconLeft ? null : this.renderInfoIconWithTooltip()}
-    `;
-  }
-};
-o.styles = [d];
-s([
-  n({ reflect: !0 })
-], o.prototype, "value", 2);
-s([
-  n({ reflect: !0 })
-], o.prototype, "size", 2);
-s([
-  n({ type: Boolean, reflect: !0 })
-], o.prototype, "light", 2);
-s([
-  n({ reflect: !0 })
-], o.prototype, "tooltip", 2);
-s([
-  n({ type: Boolean, reflect: !0 })
-], o.prototype, "iconLeft", 2);
-s([
-  n({ reflect: !0 })
-], o.prototype, "iconColor", 2);
-s([
-  n({ reflect: !0 })
-], o.prototype, "for", 2);
-o = s([
-  c("nve-label")
-], o);
-export {
-  o as default
-};
+import { t as e } from "../../chunks/nve-label.component.js";
+export { e as default };

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

@@ -1,5 +1,6 @@
-import { i as l } from "../../chunks/lit-element.js";
-const t = l`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-label/nve-label.styles.ts
+var t = e`
   :host {
     color: var(--color-neutrals-foreground-primary);
     font: var(--typography-label-small);
@@ -54,6 +55,5 @@ const t = l`
     color: var(--color-shades-grey-999, #000000);
   }
 `;
-export {
-  t as styles
-};
+//#endregion
+export { t as styles };

package/components/nve-link-card/nve-link-card.component.d.ts

@@ -4,8 +4,13 @@ import { INveComponent } from '../../interfaces/NveComponent.interface';
  * Komponent som brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.
  * For å bruke komponenten på best og tilgjengelig måte les mer i tilgjengelighet seksjonen.
  *
+ * Ikonet lengst til venstre i kortet kan settes med <slot name="icon"> og kan være hvilket som helst element.
+ * Ikonet til høyre styres av clickAction-propen og vises automatisk.
+ *
  * @csspart link-card Topp-element
  * @csspart label Overskriften
+ * @csspart additional-text Tilleggsbeskrivelse under overskriften
+ * @slot icon Ikon til venstre i kortet (valgfritt)
  */
 export default class NveLinkCard extends LitElement implements INveComponent {
     /** Tittel som vises øverst på kortet */
@@ -22,8 +27,6 @@ export default class NveLinkCard extends LitElement implements INveComponent {
     clickAction: 'internal' | 'download' | 'external' | 'mail';
     /** Lenken som brukes for handlinger som intern/ekstern navigering eller e-post */
     href: string | undefined;
-    /** Brukes for å legge :visited style når lenken kommer fra eksternt rammeverk som f.eks RouterLink i Vue */
-    visited: boolean;
     static styles: import('lit').CSSResult[];
     /**
      * Returnerer ikonnavnet som vises på kortet basert på clickAction.

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

@@ -1,97 +1,61 @@
-import { a as v, E as h, x as s } from "../../chunks/lit-element.js";
-import { n as i, t as m } from "../../chunks/property.js";
-import { e as f } from "../../chunks/class-map.js";
-import { o as p } from "../../chunks/if-defined.js";
-import u from "./nve-link-card.styles.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";
 import "../nve-icon/nve-icon.component.js";
-var k = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (o, a, l, n) => {
-  for (var r = n > 1 ? void 0 : n ? _(a, l) : a, d = o.length - 1, c; d >= 0; d--)
-    (c = o[d]) && (r = (n ? c(a, l, r) : c(r)) || r);
-  return n && r && k(a, l, r), r;
-};
-let t = class extends v {
-  constructor() {
-    super(...arguments), this.label = "", this.size = "medium", this.variant = "primary", this.testId = void 0, this.clickAction = "internal", this.href = void 0, this.visited = !1;
-  }
-  /**
-   * Returnerer ikonnavnet som vises på kortet basert på clickAction.
-   */
-  getIconName() {
-    switch (this.clickAction) {
-      case "internal":
-        return "arrow_forward";
-      case "download":
-        return "download";
-      case "external":
-        return "open_in_new";
-      case "mail":
-        return "mail";
-      default:
-        return "arrow_forward";
-    }
-  }
-  renderContent() {
-    return s`
+import c from "./nve-link-card.styles.js";
+//#region src/components/nve-link-card/nve-link-card.component.ts
+var l = class extends n {
+	constructor(...e) {
+		super(...e), this.label = "", this.size = "medium", this.variant = "primary", this.testId = void 0, this.clickAction = "internal", this.href = void 0;
+	}
+	static {
+		this.styles = [c];
+	}
+	getIconName() {
+		switch (this.clickAction) {
+			case "internal": return "arrow_forward";
+			case "download": return "download";
+			case "external": return "open_in_new";
+			case "mail": return "mail";
+			default: return "arrow_forward";
+		}
+	}
+	renderContent() {
+		return e`
+      <slot name="icon"></slot>
       <div class="link-card__content">
         <div part="label" class="link-card__label">${this.label}</div>
-        ${this.additionalText ? s`<div part="additional-text" class="link-card__additional-text">${this.additionalText}</div>` : h}
+        ${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" ? s` <div
+	}
+	render() {
+		return this.parentElement?.tagName.toLowerCase() === "a" || this.parentElement?.getAttribute("role") === "link" ? e` <div
         part="link-card"
-        testId="${p(this.testId)}"
-        class=${f({
-      "link-card": !0,
-      "link-card--visited": this.visited,
-      [`link-card--${this.size}`]: !0,
-      [`link-card--${this.variant}`]: !0
-    })}
+        testId="${s(this.testId)}"
+        class=${o({
+			"link-card": !0,
+			[`link-card--${this.size}`]: !0,
+			[`link-card--${this.variant}`]: !0
+		})}
       >
         ${this.renderContent()}
-      </div>` : s`
+      </div>` : e`
         <a
-          testId="${p(this.testId)}"
+          testId="${s(this.testId)}"
           ?download=${this.clickAction === "download"}
           part="link-card"
           class="link-card link-card--${this.size} link-card--${this.variant}"
-          href=${p(this.clickAction === "mail" ? `mailto:${this.href}` : this.href)}
-          target=${this.clickAction === "external" ? "_blank" : h}
+          href=${s(this.clickAction === "mail" ? `mailto:${this.href}` : this.href)}
+          target=${this.clickAction === "external" ? "_blank" : t}
           >${this.renderContent()}
         </a>
       `;
-  }
-};
-t.styles = [u];
-e([
-  i()
-], t.prototype, "label", 2);
-e([
-  i()
-], t.prototype, "additionalText", 2);
-e([
-  i()
-], t.prototype, "size", 2);
-e([
-  i()
-], t.prototype, "variant", 2);
-e([
-  i()
-], t.prototype, "testId", 2);
-e([
-  i({ type: String })
-], t.prototype, "clickAction", 2);
-e([
-  i()
-], t.prototype, "href", 2);
-e([
-  i({ type: Boolean })
-], t.prototype, "visited", 2);
-t = e([
-  m("nve-link-card")
-], t);
-export {
-  t as default
+	}
 };
+a([r()], l.prototype, "label", void 0), a([r()], l.prototype, "additionalText", void 0), a([r()], l.prototype, "size", void 0), a([r()], l.prototype, "variant", void 0), a([r()], l.prototype, "testId", void 0), a([r({ type: String })], l.prototype, "clickAction", void 0), a([r()], l.prototype, "href", void 0), l = a([i("nve-link-card")], l);
+var u = l;
+//#endregion
+export { u as default };

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

@@ -1,127 +1,132 @@
-import { i as r } from "../../chunks/lit-element.js";
-const i = r`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-link-card/nve-link-card.styles.ts
+var t = e`
   .link-card {
-    border-radius: var(--border-radius-small);
-    padding: var(--spacing-medium, 16px) var(--spacing-large, 24px);
-    transition: background 0.3s ease;
-    border: 2px solid transparent;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+    padding: var(--spacing-medium) var(--spacing-large);
+    gap: var(--spacing-medium);
+    border-radius: var(--border-radius-small);
+    border: var(--border-width-stronger) solid transparent;
+    background: var(--color-neutrals-background-primary);
     cursor: pointer;
     text-decoration: none;
+    transition:
+      background 0.3s ease,
+      border-color 0.3s ease;
   }
 
-  /*bruker color på a, ikke på link-card fordi link-card overskriver standard lenke farge i remmeverker som next js som har sin egen
-  wrappar rundt lenke og som støtter :visited*/
+  /* Setter farge på <a> for å sikre riktig lenkefarge uansett rammeverk eller browser */
   a {
-    color: var(--color-neutrals-foreground-primary, #0d0d0e);
+    color: var(--color-neutrals-foreground-primary);
   }
 
-  .link-card--visited,
-  a:visited {
-    color: var(--color-interactive-links-visited);
+  .link-card:hover {
+    border-color: var(--color-neutrals-border-subtle);
+    background: var(--color-neutrals-background-primary);
   }
 
-  .link-card:focus {
-    outline: var(--color-interactive-primary-foreground-border-focus, #008ffb) solid 2px;
+  .link-card:active {
+    border-color: var(--color-neutrals-border-mute);
   }
 
-  .link-card:hover .link-card__label {
-    text-decoration: underline;
-  }
-
-  .link-card:active {
-    outline: var(--color-interactive-primary-foreground-border-focus, #008ffb) solid 2px;
+  .link-card:focus-visible {
+    outline: var(--color-interactive-border-accessibility-focus) solid 2px;
   }
 
   .link-card--small {
-    padding: var(--spacing-small) var(--spacing-medium) var(--spacing-small) var(--spacing-medium);
+    padding: var(--spacing-small) var(--spacing-medium);
+    gap: var(--spacing-x-small);
     min-height: var(--sizing-2x-small);
   }
 
   .link-card--medium {
-    padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) var(--spacing-large);
+    padding: var(--spacing-medium) var(--spacing-large);
     min-height: var(--sizing-2x-small);
   }
 
   .link-card--large {
-    padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) var(--spacing-large);
+    padding: var(--spacing-large);
     min-height: var(--sizing-x-small);
   }
 
-  .link-card__label {
-    font-size: 1rem;
-    font-family: 'Source Sans Pro';
-    font-style: normal;
-    font-weight: 400;
-    line-height: 150%;
-  }
-
-  .link-card--visited .link-card__label,
-  .link-card:visited .link-card__label {
-    color: var(--color-interactive-links-visited);
+  .link-card--primary {
+    background: var(--color-neutrals-background-primary);
   }
 
-  .link-card__label--small {
-    font-size: 0.875rem;
+  .link-card--contrast {
+    background: var(--color-neutrals-background-primary-contrast);
   }
 
-  .link-card__label--large {
-    font-size: 1.125rem;
+  .link-card--secondary {
+    background: var(--color-neutrals-background-secondary);
   }
 
   .link-card__content {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: center;
+    flex: 1;
   }
 
-  .link-card__additional-text {
-    color: inherit;
-    font-family: 'Source Sans Pro';
-    font-style: normal;
-    font-weight: 400;
-    line-height: 120%;
-    padding-top: 4px;
-    font-size: 0.875rem;
+  .link-card__label {
+    font: var(--typography-heading-x-small);
+    color: var(--color-neutrals-foreground-primary);
+    transition:
+      color 0.3s ease,
+      text-decoration-thickness 0.3s,
+      text-underline-offset 0.3s;
   }
 
-  .link-card--visited .link-card__additional-text,
-  a:visited .link-card__additional-text {
-    color: var(--color-interactive-links-visited);
+  .link-card:hover .link-card__label {
+    color: var(--color-brand-foreground-primary);
+    text-decoration: underline;
+    text-decoration-style: solid;
+    text-decoration-thickness: 5%;
+    text-underline-offset: 16%;
   }
 
-  .link-card--primary {
-    background: var(--color-neutrals-background-primary, #fff);
+  .link-card:active .link-card__label {
+    text-decoration-thickness: 10%;
+    text-underline-offset: 16%;
   }
 
-  .link-card--primary:hover {
-    background: var(--color-neutrals-background-secondary, #e4e5e7);
+  .link-card--small .link-card__label {
+    font: var(--typography-label-small);
   }
 
-  .link-card--contrast {
-    background: var(--color-neutrals-background-primary-contrast, #f7f7f8);
+  .link-card--large .link-card__label {
+    font: var(--typography-heading-x-small);
   }
 
-  .link-card--contrast:hover {
-    background: var(--color-neutrals-background-secondary, #e4e5e7);
+  .link-card__additional-text {
+    color: var(--color-neutrals-foreground-subtle);
+    font: var(--typography-body-compact-x-small-compact);
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
   }
 
-  .link-card--secondary {
-    background: var(--color-neutrals-background-secondary, #e4e5e7);
+  .link-card--small .link-card__additional-text {
+    font: var(--typography-body-compact-x-small-compact);
   }
 
-  .link-card--secondary:hover {
-    border: 2px solid var(--color-neutrals-foreground-primary, #0d0d0e);
+  .link-card--large .link-card__additional-text {
+    font: var(--typography-body-compact-small-compact);
+  }
+
+  .link-card ::slotted([slot='icon']) {
+    --icon-size: 24px;
   }
 
   nve-icon {
     --icon-size: 24px;
-    color: var(--color-neutrals-foreground-primary);
+    color: var(--color-brand-foreground-primary);
   }
 `;
-export {
-  i as default
-};
+//#endregion
+export { t as default };

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

@@ -1,22 +1,2 @@
-import { m as p } from "../../chunks/chunk.JHOXTQXA.js";
-import "../../chunks/chunk.4TUIT776.js";
-import { t as u } from "../../chunks/property.js";
-import "../../chunks/lit-element.js";
-import a from "./nve-menu.styles.js";
-var f = Object.getOwnPropertyDescriptor, v = (s, o, n, m) => {
-  for (var e = m > 1 ? void 0 : m ? f(o, n) : o, r = s.length - 1, l; r >= 0; r--)
-    (l = s[r]) && (e = l(e) || e);
-  return e;
-};
-let t = class extends p {
-  constructor() {
-    super();
-  }
-};
-t.styles = [p.styles, a];
-t = v([
-  u("nve-menu")
-], t);
-export {
-  t as default
-};
+import { t as e } from "../../chunks/nve-menu.component.js";
+export { e as default };

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

@@ -1,5 +1,6 @@
-import { i as o } from "../../chunks/lit-element.js";
-const a = o`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-menu/nve-menu.styles.ts
+var t = e`
   :host {
     padding: 0px;
     margin-top: var(--spacing-2x-small);
@@ -19,6 +20,5 @@ const a = o`
     margin-bottom: 1px;
   }
 `;
-export {
-  a as default
-};
+//#endregion
+export { t as default };

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

@@ -1,43 +1,2 @@
-import { m } from "../../chunks/chunk.HVTXQL7M.js";
-import "../../chunks/lit-element.js";
-import "../../chunks/chunk.5JY5FUCG.js";
-import "../../chunks/chunk.36O46B5H.js";
-import "../../chunks/chunk.6CTB5ZDJ.js";
-import "../../chunks/chunk.YHLNUJ7P.js";
-import "../../chunks/chunk.4TUIT776.js";
-import { n as l, t as a } from "../../chunks/property.js";
-import f from "./nve-menu-item.styles.js";
-var v = Object.defineProperty, c = Object.getOwnPropertyDescriptor, u = (e, r, p, o) => {
-  for (var t = o > 1 ? void 0 : o ? c(r, p) : r, i = e.length - 1, n; i >= 0; i--)
-    (n = e[i]) && (t = (o ? n(r, p, t) : n(t)) || t);
-  return o && t && v(r, p, t), t;
-};
-let s = class extends m {
-  constructor() {
-    super(), this.subtext = "", this.indent = !1, this.handleMouseOver = (e) => {
-      this.focus(), e.stopPropagation();
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.removeEventListener("mouseover", this.handleMouseOver);
-  }
-  /**
-   * Sørger for at subtext blir satt på, hvis den er tilstede i properties
-   */
-  updated(e) {
-    super.updated(e), e.has("subtext") && this.style.setProperty("--nve-menu-item-subtext", `"${this.subtext}"`);
-  }
-};
-s.styles = [m.styles, f];
-u([
-  l({ type: String, reflect: !0 })
-], s.prototype, "subtext", 2);
-u([
-  l({ type: Boolean, reflect: !0 })
-], s.prototype, "indent", 2);
-s = u([
-  a("nve-menu-item")
-], s);
-export {
-  s as default
-};
+import { t as e } from "../../chunks/nve-menu-item.component.js";
+export { e as default };

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

@@ -1,5 +1,6 @@
-import { i as r } from "../../chunks/lit-element.js";
-const o = r`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-menu-item/nve-menu-item.styles.ts
+var t = e`
   :host {
     position: relative;
   }
@@ -89,12 +90,11 @@ const o = r`
   }
 
   :host(:focus-visible) .menu-item {
-    box-shadow: inset 0 0 0 var(--border-width-strong, 2px) var(--color-interactive-primary-border-focus, #008ffb);
+    box-shadow: inset 0 0 0 var(--border-width-strong, 2px) var(--color-interactive-border-accessibility-focus);
     opacity: var(--border-width-default, 1);
-    color: var(--color-interactive-outlined-foreground-default);
+    color: var(--color-interactive-border-accessibility-focus);
     background-color: transparent;
   }
 `;
-export {
-  o as default
-};
+//#endregion
+export { t as default };