nve-designsystem 3.13.0 → 3.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/chunks/decorate.js +1 -1
- package/components/nve-icon/offline-icons.js +3 -0
- package/components/nve-link-card/nve-link-card.component.d.ts +5 -2
- package/components/nve-link-card/nve-link-card.component.js +3 -3
- package/components/nve-link-card/nve-link-card.styles.js +66 -61
- package/components/nve-navigation-card/nve-navigation-card.component.d.ts +52 -0
- package/components/nve-navigation-card/nve-navigation-card.component.js +62 -0
- package/components/nve-navigation-card/nve-navigation-card.styles.d.ts +2 -0
- package/components/nve-navigation-card/nve-navigation-card.styles.js +111 -0
- package/css/global.css +3 -2
- package/custom-elements.json +178 -18
- package/nve-designsystem.d.ts +1 -0
- package/nve-designsystem.js +18 -17
- package/package.json +1 -1
- package/vscode.css-custom-data.json +15 -0
- package/vscode.html-custom-data.json +47 -6
package/chunks/decorate.js
CHANGED
|
@@ -94,7 +94,7 @@ function u(e) {
|
|
|
94
94
|
} });
|
|
95
95
|
}
|
|
96
96
|
//#endregion
|
|
97
|
-
//#region \0@oxc-project+runtime@0.
|
|
97
|
+
//#region \0@oxc-project+runtime@0.120.0/helpers/decorate.js
|
|
98
98
|
function d(e, t, n, r) {
|
|
99
99
|
var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
|
|
100
100
|
if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
//#region src/components/nve-icon/offline-icons.ts
|
|
2
2
|
var e = {
|
|
3
|
+
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>",
|
|
3
4
|
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>",
|
|
4
5
|
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>",
|
|
5
6
|
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>",
|
|
6
7
|
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>",
|
|
8
|
+
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>",
|
|
7
9
|
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>",
|
|
8
10
|
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>",
|
|
9
11
|
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>",
|
|
12
|
+
mail: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#000000\"><path d=\"M80-160v-640h800v640H80Zm400-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z\"/></svg>",
|
|
10
13
|
open_in_new: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" fill=\"#000000\"><path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z\"/></svg>",
|
|
11
14
|
warning: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" fill=\"#000000\"><path d=\"m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z\"/></svg>"
|
|
12
15
|
};
|
|
@@ -4,8 +4,13 @@ import { INveComponent } from '../../interfaces/NveComponent.interface';
|
|
|
4
4
|
* Komponent som brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.
|
|
5
5
|
* For å bruke komponenten på best og tilgjengelig måte les mer i tilgjengelighet seksjonen.
|
|
6
6
|
*
|
|
7
|
+
* Ikonet lengst til venstre i kortet kan settes med <slot name="icon"> og kan være hvilket som helst element.
|
|
8
|
+
* Ikonet til høyre styres av clickAction-propen og vises automatisk.
|
|
9
|
+
*
|
|
7
10
|
* @csspart link-card Topp-element
|
|
8
11
|
* @csspart label Overskriften
|
|
12
|
+
* @csspart additional-text Tilleggsbeskrivelse under overskriften
|
|
13
|
+
* @slot icon Ikon til venstre i kortet (valgfritt)
|
|
9
14
|
*/
|
|
10
15
|
export default class NveLinkCard extends LitElement implements INveComponent {
|
|
11
16
|
/** Tittel som vises øverst på kortet */
|
|
@@ -22,8 +27,6 @@ export default class NveLinkCard extends LitElement implements INveComponent {
|
|
|
22
27
|
clickAction: 'internal' | 'download' | 'external' | 'mail';
|
|
23
28
|
/** Lenken som brukes for handlinger som intern/ekstern navigering eller e-post */
|
|
24
29
|
href: string | undefined;
|
|
25
|
-
/** Brukes for å legge :visited style når lenken kommer fra eksternt rammeverk som f.eks RouterLink i Vue */
|
|
26
|
-
visited: boolean;
|
|
27
30
|
static styles: import('lit').CSSResult[];
|
|
28
31
|
/**
|
|
29
32
|
* Returnerer ikonnavnet som vises på kortet basert på clickAction.
|
|
@@ -8,7 +8,7 @@ import c from "./nve-link-card.styles.js";
|
|
|
8
8
|
//#region src/components/nve-link-card/nve-link-card.component.ts
|
|
9
9
|
var l = class extends n {
|
|
10
10
|
constructor(...e) {
|
|
11
|
-
super(...e), this.label = "", this.size = "medium", this.variant = "primary", this.testId = void 0, this.clickAction = "internal", this.href = void 0
|
|
11
|
+
super(...e), this.label = "", this.size = "medium", this.variant = "primary", this.testId = void 0, this.clickAction = "internal", this.href = void 0;
|
|
12
12
|
}
|
|
13
13
|
static {
|
|
14
14
|
this.styles = [c];
|
|
@@ -24,6 +24,7 @@ var l = class extends n {
|
|
|
24
24
|
}
|
|
25
25
|
renderContent() {
|
|
26
26
|
return t`
|
|
27
|
+
<slot name="icon"></slot>
|
|
27
28
|
<div class="link-card__content">
|
|
28
29
|
<div part="label" class="link-card__label">${this.label}</div>
|
|
29
30
|
${this.additionalText ? t`<div part="additional-text" class="link-card__additional-text">${this.additionalText}</div>` : e}
|
|
@@ -37,7 +38,6 @@ var l = class extends n {
|
|
|
37
38
|
testId="${s(this.testId)}"
|
|
38
39
|
class=${o({
|
|
39
40
|
"link-card": !0,
|
|
40
|
-
"link-card--visited": this.visited,
|
|
41
41
|
[`link-card--${this.size}`]: !0,
|
|
42
42
|
[`link-card--${this.variant}`]: !0
|
|
43
43
|
})}
|
|
@@ -56,7 +56,7 @@ var l = class extends n {
|
|
|
56
56
|
`;
|
|
57
57
|
}
|
|
58
58
|
};
|
|
59
|
-
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),
|
|
59
|
+
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);
|
|
60
60
|
var u = l;
|
|
61
61
|
//#endregion
|
|
62
62
|
export { u as default };
|
|
@@ -2,125 +2,130 @@ import { u as e } from "../../chunks/lit.js";
|
|
|
2
2
|
//#region src/components/nve-link-card/nve-link-card.styles.ts
|
|
3
3
|
var t = e`
|
|
4
4
|
.link-card {
|
|
5
|
-
border-radius: var(--border-radius-small);
|
|
6
|
-
padding: var(--spacing-medium, 16px) var(--spacing-large, 24px);
|
|
7
|
-
transition: background 0.3s ease;
|
|
8
|
-
border: 2px solid transparent;
|
|
9
5
|
display: flex;
|
|
10
6
|
flex-direction: row;
|
|
11
7
|
justify-content: space-between;
|
|
12
8
|
align-items: center;
|
|
9
|
+
padding: var(--spacing-medium) var(--spacing-large);
|
|
10
|
+
gap: var(--spacing-medium);
|
|
11
|
+
border-radius: var(--border-radius-small);
|
|
12
|
+
border: var(--border-width-stronger) solid transparent;
|
|
13
|
+
background: var(--color-neutrals-background-primary);
|
|
13
14
|
cursor: pointer;
|
|
14
15
|
text-decoration: none;
|
|
16
|
+
transition:
|
|
17
|
+
background 0.3s ease,
|
|
18
|
+
border-color 0.3s ease;
|
|
15
19
|
}
|
|
16
20
|
|
|
17
|
-
/*
|
|
18
|
-
wrappar rundt lenke og som støtter :visited*/
|
|
21
|
+
/* Setter farge på <a> for å sikre riktig lenkefarge uansett rammeverk eller browser */
|
|
19
22
|
a {
|
|
20
|
-
color: var(--color-neutrals-foreground-primary
|
|
23
|
+
color: var(--color-neutrals-foreground-primary);
|
|
21
24
|
}
|
|
22
25
|
|
|
23
|
-
.link-card
|
|
24
|
-
|
|
25
|
-
|
|
26
|
+
.link-card:hover {
|
|
27
|
+
border-color: var(--color-neutrals-border-subtle);
|
|
28
|
+
background: var(--color-neutrals-background-primary);
|
|
26
29
|
}
|
|
27
30
|
|
|
28
|
-
.link-card:
|
|
29
|
-
|
|
31
|
+
.link-card:active {
|
|
32
|
+
border-color: var(--color-neutrals-border-mute);
|
|
30
33
|
}
|
|
31
34
|
|
|
32
|
-
.link-card:
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.link-card:active {
|
|
37
|
-
outline: var(--color-interactive-primary-foreground-border-focus, #008ffb) solid 2px;
|
|
35
|
+
.link-card:focus-visible {
|
|
36
|
+
outline: var(--color-interactive-primary-border-focus) solid 2px;
|
|
38
37
|
}
|
|
39
38
|
|
|
40
39
|
.link-card--small {
|
|
41
|
-
padding: var(--spacing-small) var(--spacing-medium)
|
|
40
|
+
padding: var(--spacing-small) var(--spacing-medium);
|
|
41
|
+
gap: var(--spacing-x-small);
|
|
42
42
|
min-height: var(--sizing-2x-small);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
.link-card--medium {
|
|
46
|
-
padding: var(--spacing-medium) var(--spacing-
|
|
46
|
+
padding: var(--spacing-medium) var(--spacing-large);
|
|
47
47
|
min-height: var(--sizing-2x-small);
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
.link-card--large {
|
|
51
|
-
padding: var(--spacing-
|
|
51
|
+
padding: var(--spacing-large);
|
|
52
52
|
min-height: var(--sizing-x-small);
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
.link-
|
|
56
|
-
|
|
57
|
-
font-family: 'Source Sans 3';
|
|
58
|
-
font-style: normal;
|
|
59
|
-
font-weight: 400;
|
|
60
|
-
line-height: 150%;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.link-card--visited .link-card__label,
|
|
64
|
-
.link-card:visited .link-card__label {
|
|
65
|
-
color: var(--color-interactive-links-visited);
|
|
55
|
+
.link-card--primary {
|
|
56
|
+
background: var(--color-neutrals-background-primary);
|
|
66
57
|
}
|
|
67
58
|
|
|
68
|
-
.link-
|
|
69
|
-
|
|
59
|
+
.link-card--contrast {
|
|
60
|
+
background: var(--color-neutrals-background-primary-contrast);
|
|
70
61
|
}
|
|
71
62
|
|
|
72
|
-
.link-
|
|
73
|
-
|
|
63
|
+
.link-card--secondary {
|
|
64
|
+
background: var(--color-neutrals-background-secondary);
|
|
74
65
|
}
|
|
75
66
|
|
|
76
67
|
.link-card__content {
|
|
77
68
|
display: flex;
|
|
78
69
|
flex-direction: column;
|
|
79
|
-
justify-content:
|
|
70
|
+
justify-content: center;
|
|
71
|
+
flex: 1;
|
|
80
72
|
}
|
|
81
73
|
|
|
82
|
-
.link-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
font-size: 0.875rem;
|
|
74
|
+
.link-card__label {
|
|
75
|
+
font: var(--typography-heading-x-small);
|
|
76
|
+
color: var(--color-neutrals-foreground-primary);
|
|
77
|
+
transition:
|
|
78
|
+
color 0.3s ease,
|
|
79
|
+
text-decoration-thickness 0.3s,
|
|
80
|
+
text-underline-offset 0.3s;
|
|
90
81
|
}
|
|
91
82
|
|
|
92
|
-
.link-card
|
|
93
|
-
|
|
94
|
-
|
|
83
|
+
.link-card:hover .link-card__label {
|
|
84
|
+
color: var(--color-brand-foreground-primary);
|
|
85
|
+
text-decoration: underline;
|
|
86
|
+
text-decoration-style: solid;
|
|
87
|
+
text-decoration-thickness: 5%;
|
|
88
|
+
text-underline-offset: 16%;
|
|
95
89
|
}
|
|
96
90
|
|
|
97
|
-
.link-card
|
|
98
|
-
|
|
91
|
+
.link-card:active .link-card__label {
|
|
92
|
+
text-decoration-thickness: 10%;
|
|
93
|
+
text-underline-offset: 16%;
|
|
99
94
|
}
|
|
100
95
|
|
|
101
|
-
.link-card--
|
|
102
|
-
|
|
96
|
+
.link-card--small .link-card__label {
|
|
97
|
+
font: var(--typography-label-small);
|
|
103
98
|
}
|
|
104
99
|
|
|
105
|
-
.link-card--
|
|
106
|
-
|
|
100
|
+
.link-card--large .link-card__label {
|
|
101
|
+
font: var(--typography-heading-x-small);
|
|
107
102
|
}
|
|
108
103
|
|
|
109
|
-
.link-
|
|
110
|
-
|
|
104
|
+
.link-card__additional-text {
|
|
105
|
+
color: var(--color-neutrals-foreground-subtle);
|
|
106
|
+
font: var(--typography-body-compact-x-small-compact);
|
|
107
|
+
overflow: hidden;
|
|
108
|
+
display: -webkit-box;
|
|
109
|
+
-webkit-line-clamp: 1;
|
|
110
|
+
-webkit-box-orient: vertical;
|
|
111
|
+
text-overflow: ellipsis;
|
|
111
112
|
}
|
|
112
113
|
|
|
113
|
-
.link-card--
|
|
114
|
-
|
|
114
|
+
.link-card--small .link-card__additional-text {
|
|
115
|
+
font: var(--typography-body-compact-x-small-compact);
|
|
115
116
|
}
|
|
116
117
|
|
|
117
|
-
.link-card--
|
|
118
|
-
|
|
118
|
+
.link-card--large .link-card__additional-text {
|
|
119
|
+
font: var(--typography-body-compact-small-compact);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.link-card ::slotted([slot='icon']) {
|
|
123
|
+
--icon-size: 24px;
|
|
119
124
|
}
|
|
120
125
|
|
|
121
126
|
nve-icon {
|
|
122
127
|
--icon-size: 24px;
|
|
123
|
-
color: var(--color-
|
|
128
|
+
color: var(--color-brand-foreground-primary);
|
|
124
129
|
}
|
|
125
130
|
`;
|
|
126
131
|
//#endregion
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import { INveComponent } from '../../interfaces/NveComponent.interface';
|
|
3
|
+
/**
|
|
4
|
+
* 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).
|
|
5
|
+
*
|
|
6
|
+
* 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.
|
|
7
|
+
*
|
|
8
|
+
* Ikon angis med `iconPath`-prop og rendres automatisk med aria-hidden. Bruk kun illustrasjonsikoner fra NVE.
|
|
9
|
+
*
|
|
10
|
+
* @csspart navigation-card Topp-elementet for kortet
|
|
11
|
+
* @csspart label Overskriften på kortet
|
|
12
|
+
* @csspart leading-icon Ikonet øverst i kortet
|
|
13
|
+
* @csspart content Innholdet i kortet
|
|
14
|
+
* @csspart additional-text Ekstra tekst under overskriften
|
|
15
|
+
*/
|
|
16
|
+
export default class NveNavigationCard extends LitElement implements INveComponent {
|
|
17
|
+
/** Test ID som kan brukes i testing og sporing */
|
|
18
|
+
testId: string | undefined;
|
|
19
|
+
/** Tittel som vises øverst på kortet (må settes) */
|
|
20
|
+
label: string;
|
|
21
|
+
/**
|
|
22
|
+
* Lenke for navigasjon (må settes for at kortet skal være klikkbart).
|
|
23
|
+
* Hvis du bruker komponenten uten å wrappe den i et rammeverks-router-element (f.eks. Vue Router eller React Router), må `href` settes.
|
|
24
|
+
*/
|
|
25
|
+
href: string;
|
|
26
|
+
/** Ekstratekst som vises under tittelen (maks 3 linjer, trunkeres) */
|
|
27
|
+
additionalText: string | undefined;
|
|
28
|
+
/** Definerer hva som skjer når kortet klikkes: 'internal' (intern lenke), 'download' (nedlasting), 'external' (ekstern lenke) */
|
|
29
|
+
clickAction: 'internal' | 'download' | 'external';
|
|
30
|
+
/** Path til ikon som vises øverst i kortet (dekorativt) */
|
|
31
|
+
iconPath: string | undefined;
|
|
32
|
+
static styles: import('lit').CSSResult[];
|
|
33
|
+
/**
|
|
34
|
+
* Returnerer ikonnavnet som vises på kortet basert på clickAction.
|
|
35
|
+
*/
|
|
36
|
+
private getIconName;
|
|
37
|
+
/**
|
|
38
|
+
* Genererer innholdet i kortet.
|
|
39
|
+
* Viser ikon (hvis iconPath), tittel og ev. additionalText.
|
|
40
|
+
*/
|
|
41
|
+
private renderContent;
|
|
42
|
+
/**
|
|
43
|
+
* Rendrer kortet som <a> hvis ikke parent er en lenke,
|
|
44
|
+
* ellers som <div> for å unngå nestede lenker (SPA-routing).
|
|
45
|
+
*/
|
|
46
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
47
|
+
}
|
|
48
|
+
declare global {
|
|
49
|
+
interface HTMLElementTagNameMap {
|
|
50
|
+
'nve-navigation-card': NveNavigationCard;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { n as e, s as t, t as n } from "../../chunks/lit.js";
|
|
2
|
+
import { o as r, s as i, t as a } from "../../chunks/decorate.js";
|
|
3
|
+
import "../../chunks/class-map.js";
|
|
4
|
+
import { t as o } from "../../chunks/if-defined.js";
|
|
5
|
+
import "../../chunks/unsafe-html.js";
|
|
6
|
+
import "../nve-icon/nve-icon.component.js";
|
|
7
|
+
import s from "./nve-navigation-card.styles.js";
|
|
8
|
+
//#region src/components/nve-navigation-card/nve-navigation-card.component.ts
|
|
9
|
+
var c = class extends n {
|
|
10
|
+
constructor(...e) {
|
|
11
|
+
super(...e), this.testId = void 0, this.label = "", this.href = "", this.additionalText = void 0, this.clickAction = "internal", this.iconPath = void 0;
|
|
12
|
+
}
|
|
13
|
+
static {
|
|
14
|
+
this.styles = [s];
|
|
15
|
+
}
|
|
16
|
+
getIconName() {
|
|
17
|
+
switch (this.clickAction) {
|
|
18
|
+
case "internal": return "arrow_forward";
|
|
19
|
+
case "download": return "download";
|
|
20
|
+
case "external": return "open_in_new";
|
|
21
|
+
default: return "arrow_forward";
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
renderContent() {
|
|
25
|
+
return t`
|
|
26
|
+
<div part="content" class="navigation-card__content">
|
|
27
|
+
${this.iconPath ? t`<img
|
|
28
|
+
part="leading-icon"
|
|
29
|
+
src="${this.iconPath}"
|
|
30
|
+
alt=""
|
|
31
|
+
aria-hidden="true"
|
|
32
|
+
class="navigation-card__icon"
|
|
33
|
+
/>` : e}
|
|
34
|
+
<h2 part="label" class="navigation-card__label">${this.label}</h2>
|
|
35
|
+
${!this.iconPath && this.additionalText ? t`<p part="additional-text" class="navigation-card__additional-text">${this.additionalText}</p>` : e}
|
|
36
|
+
</div>
|
|
37
|
+
<nve-icon aria-hidden="true" name="${this.getIconName()}" class="navigation-card__arrow" />
|
|
38
|
+
`;
|
|
39
|
+
}
|
|
40
|
+
render() {
|
|
41
|
+
return this.parentElement?.tagName.toLowerCase() === "a" || this.parentElement?.getAttribute("role") === "link" ? t`
|
|
42
|
+
<div part="navigation-card" class="navigation-card" testid=${o(this.testId)}>
|
|
43
|
+
${this.renderContent()}
|
|
44
|
+
</div>
|
|
45
|
+
` : t`
|
|
46
|
+
<a
|
|
47
|
+
testid=${o(this.testId)}
|
|
48
|
+
?download=${this.clickAction === "download"}
|
|
49
|
+
part="navigation-card"
|
|
50
|
+
class="navigation-card"
|
|
51
|
+
href="${o(this.href)}"
|
|
52
|
+
target=${this.clickAction === "external" ? "_blank" : e}
|
|
53
|
+
>
|
|
54
|
+
${this.renderContent()}
|
|
55
|
+
</a>
|
|
56
|
+
`;
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
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);
|
|
60
|
+
var l = c;
|
|
61
|
+
//#endregion
|
|
62
|
+
export { l as default };
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import { u as e } from "../../chunks/lit.js";
|
|
2
|
+
//#region src/components/nve-navigation-card/nve-navigation-card.styles.ts
|
|
3
|
+
var t = e`
|
|
4
|
+
:host {
|
|
5
|
+
--nav-card-arrow-transition:
|
|
6
|
+
margin-left 0.3s cubic-bezier(0, 0, 0.2, 1), margin-right 0.3s cubic-bezier(0, 0, 0.2, 1);
|
|
7
|
+
--nav-card-arrow-transition-fast:
|
|
8
|
+
margin-left 0.3s cubic-bezier(0, 0, 0.2, 1), margin-right 0.3s cubic-bezier(0, 0, 0.2, 1);
|
|
9
|
+
display: flex;
|
|
10
|
+
height: 100%;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.navigation-card {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: row;
|
|
16
|
+
justify-content: space-between;
|
|
17
|
+
align-items: center;
|
|
18
|
+
box-sizing: border-box;
|
|
19
|
+
width: 100%;
|
|
20
|
+
min-height: var(--sizing-card-link-card-height-x-large-min-height);
|
|
21
|
+
padding: var(--spacing-2x-large);
|
|
22
|
+
gap: var(--spacing-medium);
|
|
23
|
+
border-radius: var(--border-radius-small);
|
|
24
|
+
border: var(--border-width-stronger) solid transparent;
|
|
25
|
+
background: var(--color-neutrals-background-primary);
|
|
26
|
+
cursor: pointer;
|
|
27
|
+
text-decoration: none;
|
|
28
|
+
transition: border-color 0.3s ease;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.navigation-card:hover {
|
|
32
|
+
border-color: var(--color-neutrals-border-subtle);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.navigation-card:active {
|
|
36
|
+
border-color: var(--color-neutrals-border-mute);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.navigation-card:focus-visible {
|
|
40
|
+
outline: var(--color-interactive-primary-border-focus) solid 2px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.navigation-card__content {
|
|
44
|
+
display: flex;
|
|
45
|
+
flex-direction: column;
|
|
46
|
+
gap: var(--spacing-medium);
|
|
47
|
+
align-items: flex-start;
|
|
48
|
+
align-self: stretch;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.navigation-card__icon {
|
|
52
|
+
width: var(--sizing-icon-3x-large);
|
|
53
|
+
height: var(--sizing-icon-3x-large);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.navigation-card__label {
|
|
57
|
+
font: var(--typography-heading-small);
|
|
58
|
+
color: var(--color-neutrals-foreground-primary);
|
|
59
|
+
transition: color 0.3s ease;
|
|
60
|
+
margin: 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.navigation-card:hover .navigation-card__label {
|
|
64
|
+
color: var(--color-brand-foreground-primary);
|
|
65
|
+
text-decoration-line: underline;
|
|
66
|
+
text-decoration-style: solid;
|
|
67
|
+
text-decoration-thickness: 5%;
|
|
68
|
+
text-underline-offset: 16%;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.navigation-card:active .navigation-card__label {
|
|
72
|
+
text-decoration-thickness: 10%;
|
|
73
|
+
text-underline-offset: 16%;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.navigation-card__additional-text {
|
|
77
|
+
font: var(--typography-body-compact-medium-compact);
|
|
78
|
+
color: var(--color-neutrals-foreground-subtle);
|
|
79
|
+
overflow: hidden;
|
|
80
|
+
display: -webkit-box;
|
|
81
|
+
-webkit-line-clamp: 3;
|
|
82
|
+
-webkit-box-orient: vertical;
|
|
83
|
+
text-overflow: ellipsis;
|
|
84
|
+
margin: 0;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.navigation-card__arrow {
|
|
88
|
+
flex-shrink: 0;
|
|
89
|
+
color: var(--color-brand-foreground-primary);
|
|
90
|
+
margin-right: var(--spacing-x-small);
|
|
91
|
+
transition: var(--nav-card-arrow-transition);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.navigation-card:hover .navigation-card__arrow {
|
|
95
|
+
margin-left: var(--spacing-2x-small);
|
|
96
|
+
margin-right: var(--spacing-2x-small);
|
|
97
|
+
transition: var(--nav-card-arrow-transition-fast);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.navigation-card:active .navigation-card__arrow {
|
|
101
|
+
margin-left: var(--spacing-x-small);
|
|
102
|
+
margin-right: 0;
|
|
103
|
+
transition: var(--nav-card-arrow-transition-fast);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
nve-icon {
|
|
107
|
+
--icon-size: 24px;
|
|
108
|
+
}
|
|
109
|
+
`;
|
|
110
|
+
//#endregion
|
|
111
|
+
export { t as default };
|
package/css/global.css
CHANGED
|
@@ -17,8 +17,9 @@ a {
|
|
|
17
17
|
color: var(--color-neutrals-foreground-primary, #0d0d0e);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
/* Brukes for å fjerne standard linje i <a> som ikke er i Shadow-DOMen som f.eks de som skal wrappe <nve-link-card> */
|
|
21
|
-
a:has(nve-link-card)
|
|
20
|
+
/* 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> */
|
|
21
|
+
a:has(nve-link-card),
|
|
22
|
+
a:has(nve-navigation-card) {
|
|
22
23
|
text-decoration: unset;
|
|
23
24
|
}
|
|
24
25
|
|
package/custom-elements.json
CHANGED
|
@@ -7571,7 +7571,7 @@
|
|
|
7571
7571
|
"declarations": [
|
|
7572
7572
|
{
|
|
7573
7573
|
"kind": "class",
|
|
7574
|
-
"description": "Komponent som brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.\nFor å bruke komponenten på best og tilgjengelig måte les mer i tilgjengelighet seksjonen.",
|
|
7574
|
+
"description": "Komponent som brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.\nFor å bruke komponenten på best og tilgjengelig måte les mer i tilgjengelighet seksjonen.\n\nIkonet lengst til venstre i kortet kan settes med <slot name=\"icon\"> og kan være hvilket som helst element.\nIkonet til høyre styres av clickAction-propen og vises automatisk.",
|
|
7575
7575
|
"name": "NveLinkCard",
|
|
7576
7576
|
"cssParts": [
|
|
7577
7577
|
{
|
|
@@ -7581,6 +7581,16 @@
|
|
|
7581
7581
|
{
|
|
7582
7582
|
"description": "Overskriften",
|
|
7583
7583
|
"name": "label"
|
|
7584
|
+
},
|
|
7585
|
+
{
|
|
7586
|
+
"description": "Tilleggsbeskrivelse under overskriften",
|
|
7587
|
+
"name": "additional-text"
|
|
7588
|
+
}
|
|
7589
|
+
],
|
|
7590
|
+
"slots": [
|
|
7591
|
+
{
|
|
7592
|
+
"description": "Ikon til venstre i kortet (valgfritt)",
|
|
7593
|
+
"name": "icon"
|
|
7584
7594
|
}
|
|
7585
7595
|
],
|
|
7586
7596
|
"members": [
|
|
@@ -7646,15 +7656,6 @@
|
|
|
7646
7656
|
"default": "undefined",
|
|
7647
7657
|
"description": "Lenken som brukes for handlinger som intern/ekstern navigering eller e-post"
|
|
7648
7658
|
},
|
|
7649
|
-
{
|
|
7650
|
-
"kind": "field",
|
|
7651
|
-
"name": "visited",
|
|
7652
|
-
"type": {
|
|
7653
|
-
"text": "boolean"
|
|
7654
|
-
},
|
|
7655
|
-
"default": "false",
|
|
7656
|
-
"description": "Brukes for å legge :visited style når lenken kommer fra eksternt rammeverk som f.eks RouterLink i Vue"
|
|
7657
|
-
},
|
|
7658
7659
|
{
|
|
7659
7660
|
"kind": "field",
|
|
7660
7661
|
"name": "styles",
|
|
@@ -7718,13 +7719,6 @@
|
|
|
7718
7719
|
"text": "string | undefined"
|
|
7719
7720
|
},
|
|
7720
7721
|
"description": "Lenken som brukes for handlinger som intern/ekstern navigering eller e-post"
|
|
7721
|
-
},
|
|
7722
|
-
{
|
|
7723
|
-
"name": "visited",
|
|
7724
|
-
"type": {
|
|
7725
|
-
"text": "boolean"
|
|
7726
|
-
},
|
|
7727
|
-
"description": "Brukes for å legge :visited style når lenken kommer fra eksternt rammeverk som f.eks RouterLink i Vue"
|
|
7728
7722
|
}
|
|
7729
7723
|
],
|
|
7730
7724
|
"superclass": {
|
|
@@ -7734,7 +7728,7 @@
|
|
|
7734
7728
|
"tagNameWithoutPrefix": "link-card",
|
|
7735
7729
|
"tagName": "nve-link-card",
|
|
7736
7730
|
"customElement": true,
|
|
7737
|
-
"jsDoc": "/**\n * Komponent som brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.\n * For å bruke komponenten på best og tilgjengelig måte les mer i tilgjengelighet seksjonen.\n *\n * @csspart link-card Topp-element\n * @csspart label Overskriften\n */",
|
|
7731
|
+
"jsDoc": "/**\n * Komponent som brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.\n * For å bruke komponenten på best og tilgjengelig måte les mer i tilgjengelighet seksjonen.\n *\n * Ikonet lengst til venstre i kortet kan settes med <slot name=\"icon\"> og kan være hvilket som helst element.\n * Ikonet til høyre styres av clickAction-propen og vises automatisk.\n *\n * @csspart link-card Topp-element\n * @csspart label Overskriften\n * @csspart additional-text Tilleggsbeskrivelse under overskriften\n * @slot icon Ikon til venstre i kortet (valgfritt)\n */",
|
|
7738
7732
|
"modulePath": "src/components/nve-link-card/nve-link-card.component.ts"
|
|
7739
7733
|
}
|
|
7740
7734
|
],
|
|
@@ -8465,6 +8459,172 @@
|
|
|
8465
8459
|
}
|
|
8466
8460
|
]
|
|
8467
8461
|
},
|
|
8462
|
+
{
|
|
8463
|
+
"kind": "javascript-module",
|
|
8464
|
+
"path": "components/nve-navigation-card/nve-navigation-card.js",
|
|
8465
|
+
"declarations": [
|
|
8466
|
+
{
|
|
8467
|
+
"kind": "class",
|
|
8468
|
+
"description": "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).\n\nKomponenten 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.\n\nIkon angis med `iconPath`-prop og rendres automatisk med aria-hidden. Bruk kun illustrasjonsikoner fra NVE.",
|
|
8469
|
+
"name": "NveNavigationCard",
|
|
8470
|
+
"cssParts": [
|
|
8471
|
+
{
|
|
8472
|
+
"description": "Topp-elementet for kortet",
|
|
8473
|
+
"name": "navigation-card"
|
|
8474
|
+
},
|
|
8475
|
+
{
|
|
8476
|
+
"description": "Overskriften på kortet",
|
|
8477
|
+
"name": "label"
|
|
8478
|
+
},
|
|
8479
|
+
{
|
|
8480
|
+
"description": "Ikonet øverst i kortet",
|
|
8481
|
+
"name": "leading-icon"
|
|
8482
|
+
},
|
|
8483
|
+
{
|
|
8484
|
+
"description": "Innholdet i kortet",
|
|
8485
|
+
"name": "content"
|
|
8486
|
+
},
|
|
8487
|
+
{
|
|
8488
|
+
"description": "Ekstra tekst under overskriften",
|
|
8489
|
+
"name": "additional-text"
|
|
8490
|
+
}
|
|
8491
|
+
],
|
|
8492
|
+
"members": [
|
|
8493
|
+
{
|
|
8494
|
+
"kind": "field",
|
|
8495
|
+
"name": "testId",
|
|
8496
|
+
"type": {
|
|
8497
|
+
"text": "string | undefined"
|
|
8498
|
+
},
|
|
8499
|
+
"default": "undefined",
|
|
8500
|
+
"description": "Test ID som kan brukes i testing og sporing"
|
|
8501
|
+
},
|
|
8502
|
+
{
|
|
8503
|
+
"kind": "field",
|
|
8504
|
+
"name": "label",
|
|
8505
|
+
"type": {
|
|
8506
|
+
"text": "string"
|
|
8507
|
+
},
|
|
8508
|
+
"default": "''",
|
|
8509
|
+
"description": "Tittel som vises øverst på kortet (må settes)"
|
|
8510
|
+
},
|
|
8511
|
+
{
|
|
8512
|
+
"kind": "field",
|
|
8513
|
+
"name": "href",
|
|
8514
|
+
"type": {
|
|
8515
|
+
"text": "string"
|
|
8516
|
+
},
|
|
8517
|
+
"default": "''",
|
|
8518
|
+
"description": "Lenke for navigasjon (må settes for at kortet skal være klikkbart).\nHvis du bruker komponenten uten å wrappe den i et rammeverks-router-element (f.eks. Vue Router eller React Router), må `href` settes."
|
|
8519
|
+
},
|
|
8520
|
+
{
|
|
8521
|
+
"kind": "field",
|
|
8522
|
+
"name": "additionalText",
|
|
8523
|
+
"type": {
|
|
8524
|
+
"text": "string | undefined"
|
|
8525
|
+
},
|
|
8526
|
+
"default": "undefined",
|
|
8527
|
+
"description": "Ekstratekst som vises under tittelen (maks 3 linjer, trunkeres)"
|
|
8528
|
+
},
|
|
8529
|
+
{
|
|
8530
|
+
"kind": "field",
|
|
8531
|
+
"name": "clickAction",
|
|
8532
|
+
"type": {
|
|
8533
|
+
"text": "'internal' | 'download' | 'external'"
|
|
8534
|
+
},
|
|
8535
|
+
"default": "'internal'",
|
|
8536
|
+
"description": "Definerer hva som skjer når kortet klikkes: 'internal' (intern lenke), 'download' (nedlasting), 'external' (ekstern lenke)"
|
|
8537
|
+
},
|
|
8538
|
+
{
|
|
8539
|
+
"kind": "field",
|
|
8540
|
+
"name": "iconPath",
|
|
8541
|
+
"type": {
|
|
8542
|
+
"text": "string | undefined"
|
|
8543
|
+
},
|
|
8544
|
+
"default": "undefined",
|
|
8545
|
+
"description": "Path til ikon som vises øverst i kortet (dekorativt)"
|
|
8546
|
+
},
|
|
8547
|
+
{
|
|
8548
|
+
"kind": "field",
|
|
8549
|
+
"name": "styles",
|
|
8550
|
+
"type": {
|
|
8551
|
+
"text": "array"
|
|
8552
|
+
},
|
|
8553
|
+
"static": true,
|
|
8554
|
+
"default": "[styles]"
|
|
8555
|
+
},
|
|
8556
|
+
{
|
|
8557
|
+
"kind": "method",
|
|
8558
|
+
"name": "render",
|
|
8559
|
+
"description": "Rendrer kortet som <a> hvis ikke parent er en lenke,\nellers som <div> for å unngå nestede lenker (SPA-routing)."
|
|
8560
|
+
}
|
|
8561
|
+
],
|
|
8562
|
+
"attributes": [
|
|
8563
|
+
{
|
|
8564
|
+
"name": "testId",
|
|
8565
|
+
"type": {
|
|
8566
|
+
"text": "string | undefined"
|
|
8567
|
+
},
|
|
8568
|
+
"description": "Test ID som kan brukes i testing og sporing"
|
|
8569
|
+
},
|
|
8570
|
+
{
|
|
8571
|
+
"name": "label",
|
|
8572
|
+
"type": {
|
|
8573
|
+
"text": "any"
|
|
8574
|
+
},
|
|
8575
|
+
"description": "Tittel som vises øverst på kortet (må settes)"
|
|
8576
|
+
},
|
|
8577
|
+
{
|
|
8578
|
+
"name": "href",
|
|
8579
|
+
"type": {
|
|
8580
|
+
"text": "any"
|
|
8581
|
+
},
|
|
8582
|
+
"description": "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."
|
|
8583
|
+
},
|
|
8584
|
+
{
|
|
8585
|
+
"name": "additionalText",
|
|
8586
|
+
"type": {
|
|
8587
|
+
"text": "string | undefined"
|
|
8588
|
+
},
|
|
8589
|
+
"description": "Ekstratekst som vises under tittelen (maks 3 linjer, trunkeres)"
|
|
8590
|
+
},
|
|
8591
|
+
{
|
|
8592
|
+
"name": "clickAction",
|
|
8593
|
+
"type": {
|
|
8594
|
+
"text": "'internal' | 'download' | 'external'"
|
|
8595
|
+
},
|
|
8596
|
+
"description": "Definerer hva som skjer når kortet klikkes: 'internal' (intern lenke), 'download' (nedlasting), 'external' (ekstern lenke)"
|
|
8597
|
+
},
|
|
8598
|
+
{
|
|
8599
|
+
"name": "iconPath",
|
|
8600
|
+
"type": {
|
|
8601
|
+
"text": "string | undefined"
|
|
8602
|
+
},
|
|
8603
|
+
"description": "Path til ikon som vises øverst i kortet (dekorativt)"
|
|
8604
|
+
}
|
|
8605
|
+
],
|
|
8606
|
+
"superclass": {
|
|
8607
|
+
"name": "LitElement",
|
|
8608
|
+
"package": "lit"
|
|
8609
|
+
},
|
|
8610
|
+
"tagNameWithoutPrefix": "navigation-card",
|
|
8611
|
+
"tagName": "nve-navigation-card",
|
|
8612
|
+
"customElement": true,
|
|
8613
|
+
"jsDoc": "/**\n * 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).\n *\n * 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.\n *\n * Ikon angis med `iconPath`-prop og rendres automatisk med aria-hidden. Bruk kun illustrasjonsikoner fra NVE.\n *\n * @csspart navigation-card Topp-elementet for kortet\n * @csspart label Overskriften på kortet\n * @csspart leading-icon Ikonet øverst i kortet\n * @csspart content Innholdet i kortet\n * @csspart additional-text Ekstra tekst under overskriften\n */",
|
|
8614
|
+
"modulePath": "src/components/nve-navigation-card/nve-navigation-card.component.ts"
|
|
8615
|
+
}
|
|
8616
|
+
],
|
|
8617
|
+
"exports": [
|
|
8618
|
+
{
|
|
8619
|
+
"kind": "js",
|
|
8620
|
+
"name": "default",
|
|
8621
|
+
"declaration": {
|
|
8622
|
+
"name": "NveNavigationCard",
|
|
8623
|
+
"module": "components/nve-navigation-card/nve-navigation-card.js"
|
|
8624
|
+
}
|
|
8625
|
+
}
|
|
8626
|
+
]
|
|
8627
|
+
},
|
|
8468
8628
|
{
|
|
8469
8629
|
"kind": "javascript-module",
|
|
8470
8630
|
"path": "components/nve-option/nve-option.js",
|
package/nve-designsystem.d.ts
CHANGED
|
@@ -23,6 +23,7 @@ export { default as NveLinkCard } from './components/nve-link-card/nve-link-card
|
|
|
23
23
|
export { default as NveMenu } from './components/nve-menu/nve-menu.component';
|
|
24
24
|
export { default as NveMenuItem } from './components/nve-menu-item/nve-menu-item.component';
|
|
25
25
|
export { default as NveMessageCard } from './components/nve-message-card/nve-message-card.component';
|
|
26
|
+
export { default as NveNavigationCard } from './components/nve-navigation-card/nve-navigation-card.component';
|
|
26
27
|
export { default as NveOption } from './components/nve-option/nve-option.component';
|
|
27
28
|
export { default as NvePopup } from './components/nve-popup/nve-popup.component';
|
|
28
29
|
export { default as NveRadio } from './components/nve-radio/nve-radio.component';
|
package/nve-designsystem.js
CHANGED
|
@@ -64,20 +64,21 @@ import { t as S } from "./chunks/nve-dropdown.component.js";
|
|
|
64
64
|
import C from "./components/nve-link-card/nve-link-card.component.js";
|
|
65
65
|
import { t as w } from "./chunks/nve-menu-item.component.js";
|
|
66
66
|
import T from "./components/nve-message-card/nve-message-card.component.js";
|
|
67
|
-
import
|
|
68
|
-
import { t as D } from "./chunks/nve-radio
|
|
69
|
-
import { t as O } from "./chunks/nve-radio-
|
|
70
|
-
import k from "./
|
|
71
|
-
import
|
|
72
|
-
import { t as j } from "./chunks/nve-
|
|
73
|
-
import { t as M } from "./chunks/nve-
|
|
74
|
-
import N from "./
|
|
75
|
-
import P from "./components/nve-stepper/nve-
|
|
76
|
-
import F from "./components/nve-
|
|
77
|
-
import I from "./components/nve-
|
|
78
|
-
import L from "./components/nve-tab
|
|
79
|
-
import R from "./components/nve-tab-
|
|
80
|
-
import z from "./components/nve-
|
|
81
|
-
import B from "./components/nve-
|
|
82
|
-
import
|
|
83
|
-
|
|
67
|
+
import E from "./components/nve-navigation-card/nve-navigation-card.component.js";
|
|
68
|
+
import { t as D } from "./chunks/nve-radio.component.js";
|
|
69
|
+
import { t as O } from "./chunks/nve-radio-button.component.js";
|
|
70
|
+
import { t as k } from "./chunks/nve-radio-group.component.js";
|
|
71
|
+
import A from "./components/nve-relative-time/nve-relative-time.component.js";
|
|
72
|
+
import { t as j } from "./chunks/nve-select.component.js";
|
|
73
|
+
import { t as M } from "./chunks/nve-skeleton.component.js";
|
|
74
|
+
import { t as N } from "./chunks/nve-spinner.component.js";
|
|
75
|
+
import P from "./components/nve-stepper/nve-step/nve-step.component.js";
|
|
76
|
+
import F from "./components/nve-stepper/nve-stepper.component.js";
|
|
77
|
+
import I from "./components/nve-switch/nve-switch.component.js";
|
|
78
|
+
import L from "./components/nve-tab/nve-tab.component.js";
|
|
79
|
+
import R from "./components/nve-tab-group/nve-tab-group.component.js";
|
|
80
|
+
import z from "./components/nve-tab-panel/nve-tab-panel.component.js";
|
|
81
|
+
import B from "./components/nve-tag/nve-tag.component.js";
|
|
82
|
+
import V from "./components/nve-textarea/nve-textarea.component.js";
|
|
83
|
+
import { t as H } from "./chunks/nve-warning-level.component.js";
|
|
84
|
+
export { e as NveAccordion, t as NveAccordionItem, n as NveAlert, i as NveBadge, a as NveButton, o as NveCarousel, s as NveCarouselItem, c as NveCarouselThumbnail, l as NveCheckbox, f as NveCheckboxGroup, _ as NveCombobox, v as NveDarkmodeSwitch, y as NveDialog, b as NveDivider, x as NveDrawer, S as NveDropdown, r as NveIcon, m as NveInput, u as NveLabel, C as NveLinkCard, h as NveMenu, w as NveMenuItem, T as NveMessageCard, E as NveNavigationCard, g as NveOption, p as NvePopup, D as NveRadio, O as NveRadioButton, k as NveRadioGroup, A as NveRelativeTime, j as NveSelect, M as NveSkeleton, N as NveSpinner, P as NveStep, F as NveStepper, I as NveSwitch, L as NveTab, R as NveTabGroup, z as NveTabPanel, B as NveTag, V as NveTextarea, d as NveTooltip, H as NveWarningLevel };
|
package/package.json
CHANGED
|
@@ -796,6 +796,10 @@
|
|
|
796
796
|
},
|
|
797
797
|
{ "name": "::part(link-card)", "description": "Topp-element" },
|
|
798
798
|
{ "name": "::part(label)", "description": "Overskriften" },
|
|
799
|
+
{
|
|
800
|
+
"name": "::part(additional-text)",
|
|
801
|
+
"description": "Tilleggsbeskrivelse under overskriften"
|
|
802
|
+
},
|
|
799
803
|
{ "name": "::part(base)", "description": "The component's base wrapper." },
|
|
800
804
|
{
|
|
801
805
|
"name": "::part(checked-icon)",
|
|
@@ -821,6 +825,17 @@
|
|
|
821
825
|
{ "name": "::part(subheader)", "description": "ekstra tekst over label" },
|
|
822
826
|
{ "name": "::part(label)", "description": "tittel i header-seksjonen." },
|
|
823
827
|
{ "name": "::part(footer)", "description": "evt. knapperad nederst." },
|
|
828
|
+
{
|
|
829
|
+
"name": "::part(navigation-card)",
|
|
830
|
+
"description": "Topp-elementet for kortet"
|
|
831
|
+
},
|
|
832
|
+
{ "name": "::part(label)", "description": "Overskriften på kortet" },
|
|
833
|
+
{ "name": "::part(leading-icon)", "description": "Ikonet øverst i kortet" },
|
|
834
|
+
{ "name": "::part(content)", "description": "Innholdet i kortet" },
|
|
835
|
+
{
|
|
836
|
+
"name": "::part(additional-text)",
|
|
837
|
+
"description": "Ekstra tekst under overskriften"
|
|
838
|
+
},
|
|
824
839
|
{
|
|
825
840
|
"name": "::part(checked-icon)",
|
|
826
841
|
"description": "The checked icon, an `<sl-icon>` element."
|
|
@@ -1109,7 +1109,7 @@
|
|
|
1109
1109
|
},
|
|
1110
1110
|
{
|
|
1111
1111
|
"name": "nve-link-card",
|
|
1112
|
-
"description": "Komponent som brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.\nFor å bruke komponenten på best og tilgjengelig måte les mer i tilgjengelighet seksjonen.\n---\n\n\n### **Deler:**\n - **link-card** - Topp-element\n- **label** - Overskriften",
|
|
1112
|
+
"description": "Komponent som brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.\nFor å bruke komponenten på best og tilgjengelig måte les mer i tilgjengelighet seksjonen.\n\nIkonet lengst til venstre i kortet kan settes med <slot name=\"icon\"> og kan være hvilket som helst element.\nIkonet til høyre styres av clickAction-propen og vises automatisk.\n---\n\n\n### **Spor:**\n - **icon** - Ikon til venstre i kortet (valgfritt)\n\n### **Deler:**\n - **link-card** - Topp-element\n- **label** - Overskriften\n- **additional-text** - Tilleggsbeskrivelse under overskriften",
|
|
1113
1113
|
"attributes": [
|
|
1114
1114
|
{
|
|
1115
1115
|
"name": "label",
|
|
@@ -1158,11 +1158,6 @@
|
|
|
1158
1158
|
"name": "href",
|
|
1159
1159
|
"description": "Lenken som brukes for handlinger som intern/ekstern navigering eller e-post",
|
|
1160
1160
|
"values": []
|
|
1161
|
-
},
|
|
1162
|
-
{
|
|
1163
|
-
"name": "visited",
|
|
1164
|
-
"description": "Brukes for å legge :visited style når lenken kommer fra eksternt rammeverk som f.eks RouterLink i Vue",
|
|
1165
|
-
"values": []
|
|
1166
1161
|
}
|
|
1167
1162
|
],
|
|
1168
1163
|
"references": [
|
|
@@ -1284,6 +1279,52 @@
|
|
|
1284
1279
|
}
|
|
1285
1280
|
]
|
|
1286
1281
|
},
|
|
1282
|
+
{
|
|
1283
|
+
"name": "nve-navigation-card",
|
|
1284
|
+
"description": "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).\n\nKomponenten 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.\n\nIkon angis med `iconPath`-prop og rendres automatisk med aria-hidden. Bruk kun illustrasjonsikoner fra NVE.\n---\n\n\n### **Metoder:**\n - **render()** - Rendrer kortet som <a> hvis ikke parent er en lenke,\nellers som <div> for å unngå nestede lenker (SPA-routing).\n\n### **Deler:**\n - **navigation-card** - Topp-elementet for kortet\n- **label** - Overskriften på kortet\n- **leading-icon** - Ikonet øverst i kortet\n- **content** - Innholdet i kortet\n- **additional-text** - Ekstra tekst under overskriften",
|
|
1285
|
+
"attributes": [
|
|
1286
|
+
{
|
|
1287
|
+
"name": "testId",
|
|
1288
|
+
"description": "Test ID som kan brukes i testing og sporing",
|
|
1289
|
+
"values": []
|
|
1290
|
+
},
|
|
1291
|
+
{
|
|
1292
|
+
"name": "label",
|
|
1293
|
+
"description": "Tittel som vises øverst på kortet (må settes)",
|
|
1294
|
+
"values": []
|
|
1295
|
+
},
|
|
1296
|
+
{
|
|
1297
|
+
"name": "href",
|
|
1298
|
+
"description": "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.",
|
|
1299
|
+
"values": []
|
|
1300
|
+
},
|
|
1301
|
+
{
|
|
1302
|
+
"name": "additionalText",
|
|
1303
|
+
"description": "Ekstratekst som vises under tittelen (maks 3 linjer, trunkeres)",
|
|
1304
|
+
"values": []
|
|
1305
|
+
},
|
|
1306
|
+
{
|
|
1307
|
+
"name": "clickAction",
|
|
1308
|
+
"description": "Definerer hva som skjer når kortet klikkes: 'internal' (intern lenke), 'download' (nedlasting), 'external' (ekstern lenke)",
|
|
1309
|
+
"values": [
|
|
1310
|
+
{ "name": "internal" },
|
|
1311
|
+
{ "name": "download" },
|
|
1312
|
+
{ "name": "external" }
|
|
1313
|
+
]
|
|
1314
|
+
},
|
|
1315
|
+
{
|
|
1316
|
+
"name": "iconPath",
|
|
1317
|
+
"description": "Path til ikon som vises øverst i kortet (dekorativt)",
|
|
1318
|
+
"values": []
|
|
1319
|
+
}
|
|
1320
|
+
],
|
|
1321
|
+
"references": [
|
|
1322
|
+
{
|
|
1323
|
+
"name": "Mer info",
|
|
1324
|
+
"url": "https://designsystem.nve.no/components/nve-navigation-card"
|
|
1325
|
+
}
|
|
1326
|
+
]
|
|
1327
|
+
},
|
|
1287
1328
|
{
|
|
1288
1329
|
"name": "nve-option",
|
|
1289
1330
|
"description": "Representerer et valg i nve-select.\n---\n\n\n### **Metoder:**\n - **firstUpdated(changedProperties: _PropertyValues_): _void_** - Setter filled attributt på option når parent-select er filled, for å få annen hover-farge\nSetter så hide-checkmark basert på samme logikk\n- **getTextLabel(): _string_** - Gir tilbake plain-tekst-label som vises i select\n\n### **Spor:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **Deler:**\n - **checked-icon** - The checked icon, an `<sl-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
|