nve-designsystem 3.13.0 → 3.14.0

package/chunks/decorate.js

@@ -94,7 +94,7 @@ function u(e) {
 	} });
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.115.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.120.0/helpers/decorate.js
 function d(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);

package/components/nve-icon/offline-icons.js

@@ -1,9 +1,11 @@
 //#region src/components/nve-icon/offline-icons.ts
 var e = {
+	arrow_forward: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#000000\"><path d=\"M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z\"/></svg>",
 	check_circle: "<svg xmlns=\"http://www.w3.org/2000/svg\"  viewBox=\"0 -960 960 960\"  fill=\"#000000\"><path d=\"m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"/></svg>",
 	chevron_backward: "<svg xmlns=\"http://www.w3.org/2000/svg\"  viewBox=\"0 -960 960 960\"  fill=\"#000000\"><path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\"/></svg>",
 	chevron_forward: "<svg xmlns=\"http://www.w3.org/2000/svg\"  viewBox=\"0 -960 960 960\"  fill=\"#000000\"><path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\"/></svg>",
 	close: "<svg xmlns=\"http://www.w3.org/2000/svg\"  viewBox=\"0 -960 960 960\"  fill=\"#000000\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>",
+	download: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#000000\"><path d=\"M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM160-160v-200h80v120h480v-120h80v200H160Z\"/></svg>",
 	error: "<svg xmlns=\"http://www.w3.org/2000/svg\"  viewBox=\"0 -960 960 960\"  fill=\"#000000\"><path d=\"M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"/></svg>",
 	info: "<svg xmlns=\"http://www.w3.org/2000/svg\"  viewBox=\"0 -960 960 960\"  fill=\"#000000\"><path d=\"M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"/></svg>",
 	lock: "<svg xmlns=\"http://www.w3.org/2000/svg\"  viewBox=\"0 -960 960 960\"  fill=\"#000000\"><path d=\"M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM240-160v-400 400Z\"/></svg>",

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

@@ -0,0 +1,52 @@
+import { LitElement } from 'lit';
+import { INveComponent } from '../../interfaces/NveComponent.interface';
+/**
+ * Denne komponenten er ment å brukes som hovednavigasjon på sider, for eksempel transportside (i motsetning til `nve-link-card`, som er mindre og brukes der navigasjonen ikke er hovedfokus).
+ *
+ * Komponenten brukes i grid-oppsett, har minimum høyde, og støtter enten dekorativt ikon (angis via path) eller tilleggstekst (maks 3 linjer, trunkeres automatisk) – aldri begge samtidig.
+ *
+ * Ikon angis med `iconPath`-prop og rendres automatisk med aria-hidden. Bruk kun illustrasjonsikoner fra NVE.
+ *
+ * @csspart navigation-card Topp-elementet for kortet
+ * @csspart label Overskriften på kortet
+ * @csspart leading-icon Ikonet øverst i kortet
+ * @csspart content Innholdet i kortet
+ * @csspart additional-text Ekstra tekst under overskriften
+ */
+export default class NveNavigationCard extends LitElement implements INveComponent {
+    /** Test ID som kan brukes i testing og sporing */
+    testId: string | undefined;
+    /** Tittel som vises øverst på kortet (må settes) */
+    label: string;
+    /**
+     * Lenke for navigasjon (må settes for at kortet skal være klikkbart).
+     * Hvis du bruker komponenten uten å wrappe den i et rammeverks-router-element (f.eks. Vue Router eller React Router), må `href` settes.
+     */
+    href: string;
+    /** Ekstratekst som vises under tittelen (maks 3 linjer, trunkeres) */
+    additionalText: string | undefined;
+    /** Definerer hva som skjer når kortet klikkes: 'internal' (intern lenke), 'download' (nedlasting), 'external' (ekstern lenke) */
+    clickAction: 'internal' | 'download' | 'external';
+    /** Path til ikon som vises øverst i kortet (dekorativt) */
+    iconPath: string | undefined;
+    static styles: import('lit').CSSResult[];
+    /**
+     * Returnerer ikonnavnet som vises på kortet basert på clickAction.
+     */
+    private getIconName;
+    /**
+     * Genererer innholdet i kortet.
+     * Viser ikon (hvis iconPath), tittel og ev. additionalText.
+     */
+    private renderContent;
+    /**
+     * Rendrer kortet som <a> hvis ikke parent er en lenke,
+     * ellers som <div> for å unngå nestede lenker (SPA-routing).
+     */
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-navigation-card': NveNavigationCard;
+    }
+}

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

@@ -0,0 +1,62 @@
+import { n 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 "../../chunks/class-map.js";
+import { t as o } from "../../chunks/if-defined.js";
+import "../../chunks/unsafe-html.js";
+import "../nve-icon/nve-icon.component.js";
+import s from "./nve-navigation-card.styles.js";
+//#region src/components/nve-navigation-card/nve-navigation-card.component.ts
+var c = class extends n {
+	constructor(...e) {
+		super(...e), this.testId = void 0, this.label = "", this.href = "", this.additionalText = void 0, this.clickAction = "internal", this.iconPath = void 0;
+	}
+	static {
+		this.styles = [s];
+	}
+	getIconName() {
+		switch (this.clickAction) {
+			case "internal": return "arrow_forward";
+			case "download": return "download";
+			case "external": return "open_in_new";
+			default: return "arrow_forward";
+		}
+	}
+	renderContent() {
+		return t`
+      <div part="content" class="navigation-card__content">
+        ${this.iconPath ? t`<img
+              part="leading-icon"
+              src="${this.iconPath}"
+              alt=""
+              aria-hidden="true"
+              class="navigation-card__icon"
+            />` : e}
+        <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}
+      </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`
+        <div part="navigation-card" class="navigation-card" testid=${o(this.testId)}>
+          ${this.renderContent()}
+        </div>
+      ` : t`
+      <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}
+      >
+        ${this.renderContent()}
+      </a>
+    `;
+	}
+};
+a([r({ type: String })], c.prototype, "testId", void 0), a([r({ type: String })], c.prototype, "label", void 0), a([r({ type: String })], c.prototype, "href", void 0), a([r({ type: String })], c.prototype, "additionalText", void 0), a([r({ type: String })], c.prototype, "clickAction", void 0), a([r({ type: String })], c.prototype, "iconPath", void 0), c = a([i("nve-navigation-card")], c);
+var l = c;
+//#endregion
+export { l as default };

package/components/nve-navigation-card/nve-navigation-card.styles.d.ts

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

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

@@ -0,0 +1,111 @@
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-navigation-card/nve-navigation-card.styles.ts
+var t = e`
+  :host {
+    --nav-card-arrow-transition:
+      margin-left 0.3s cubic-bezier(0, 0, 0.2, 1), margin-right 0.3s cubic-bezier(0, 0, 0.2, 1);
+    --nav-card-arrow-transition-fast:
+      margin-left 0.3s cubic-bezier(0, 0, 0.2, 1), margin-right 0.3s cubic-bezier(0, 0, 0.2, 1);
+    display: flex;
+    height: 100%;
+  }
+
+  .navigation-card {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: var(--sizing-card-link-card-height-x-large-min-height);
+    padding: var(--spacing-2x-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: border-color 0.3s ease;
+  }
+
+  .navigation-card:hover {
+    border-color: var(--color-neutrals-border-subtle);
+  }
+
+  .navigation-card:active {
+    border-color: var(--color-neutrals-border-mute);
+  }
+
+  .navigation-card:focus-visible {
+    outline: var(--color-interactive-primary-border-focus) solid 2px;
+  }
+
+  .navigation-card__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-medium);
+    align-items: flex-start;
+    align-self: stretch;
+  }
+
+  .navigation-card__icon {
+    width: var(--sizing-icon-3x-large);
+    height: var(--sizing-icon-3x-large);
+  }
+
+  .navigation-card__label {
+    font: var(--typography-heading-small);
+    color: var(--color-neutrals-foreground-primary);
+    transition: color 0.3s ease;
+    margin: 0;
+  }
+
+  .navigation-card:hover .navigation-card__label {
+    color: var(--color-brand-foreground-primary);
+    text-decoration-line: underline;
+    text-decoration-style: solid;
+    text-decoration-thickness: 5%;
+    text-underline-offset: 16%;
+  }
+
+  .navigation-card:active .navigation-card__label {
+    text-decoration-thickness: 10%;
+    text-underline-offset: 16%;
+  }
+
+  .navigation-card__additional-text {
+    font: var(--typography-body-compact-medium-compact);
+    color: var(--color-neutrals-foreground-subtle);
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    margin: 0;
+  }
+
+  .navigation-card__arrow {
+    flex-shrink: 0;
+    color: var(--color-brand-foreground-primary);
+    margin-right: var(--spacing-x-small);
+    transition: var(--nav-card-arrow-transition);
+  }
+
+  .navigation-card:hover .navigation-card__arrow {
+    margin-left: var(--spacing-2x-small);
+    margin-right: var(--spacing-2x-small);
+    transition: var(--nav-card-arrow-transition-fast);
+  }
+
+  .navigation-card:active .navigation-card__arrow {
+    margin-left: var(--spacing-x-small);
+    margin-right: 0;
+    transition: var(--nav-card-arrow-transition-fast);
+  }
+
+  nve-icon {
+    --icon-size: 24px;
+  }
+`;
+//#endregion
+export { t as default };

package/css/global.css

@@ -17,8 +17,9 @@ a {
   color: var(--color-neutrals-foreground-primary, #0d0d0e);
 }
 
-/* Brukes for å fjerne standard linje i <a>  som ikke er i Shadow-DOMen som f.eks de som skal wrappe <nve-link-card> */
-a:has(nve-link-card) {
+/* Brukes for å fjerne standard linje i <a>  som ikke er i Shadow-DOMen som f.eks de som skal wrappe <nve-link-card> og <nve-navigation-card> */
+a:has(nve-link-card),
+a:has(nve-navigation-card) {
   text-decoration: unset;
 }