nve-designsystem 4.5.0 → 4.7.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/components/nve-exposed-height/nve-exposed-height.component.d.ts +53 -0
- package/components/nve-exposed-height/nve-exposed-height.component.js +183 -0
- package/components/nve-exposed-height/nve-exposed-height.styles.d.ts +2 -0
- package/components/nve-exposed-height/nve-exposed-height.styles.js +39 -0
- package/css/nve.css +18 -3
- package/css/rme.css +18 -3
- package/css/varsom.css +18 -3
- package/custom-elements.json +112 -0
- package/nve-designsystem.d.ts +1 -0
- package/nve-designsystem.js +24 -23
- package/package.json +2 -2
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import { INveComponent } from '../../interfaces/NveComponent.interface';
|
|
3
|
+
/**
|
|
4
|
+
* Visualisering av utsatt høyde for et skredproblem.
|
|
5
|
+
* Viser et fjell med fargelegging av utsatt høyde i tillegg til piler og høydegrenser.
|
|
6
|
+
* @cssproperty --exposed-height-affected-color - Farge på utsatte høyde. Standard er #d21523.
|
|
7
|
+
* @cssproperty --exposed-height-unaffected-color - Farge på ikke-utsatt høyde. Standard er #e3e3e3.
|
|
8
|
+
* @cssproperty --exposed-height-width - Bredde på hele komponenten. Standard er 150px.
|
|
9
|
+
*/
|
|
10
|
+
export default class NveExposedHeight extends LitElement implements INveComponent {
|
|
11
|
+
/** Type fyll: 1=over, 2=under, 3=over og under, 4=mellom */
|
|
12
|
+
variant: 1 | 2 | 3 | 4;
|
|
13
|
+
/** Første høydeverdi i meter */
|
|
14
|
+
height1: number;
|
|
15
|
+
/** Andre høydeverdi i meter (for variant 3 og 4) */
|
|
16
|
+
height2: number;
|
|
17
|
+
/** Språk for aria-label. Blir satt til engelsk om lang starter på 'en'. Standard er norsk. */
|
|
18
|
+
lang: string;
|
|
19
|
+
testId: string | undefined;
|
|
20
|
+
static styles: import('lit').CSSResult[];
|
|
21
|
+
private isEnglish;
|
|
22
|
+
/** Tegne-instruksjoner for enten to- eller tre-delt fjell, avhengig av variant */
|
|
23
|
+
private createMountainGeometry;
|
|
24
|
+
/**
|
|
25
|
+
* Lager geometri og fargeklasser for tegning av fjellet
|
|
26
|
+
* @param variant hver variant har forskjellig geometri og fargelegging
|
|
27
|
+
* @returns Et objekt som inneholder SVG-paths og tilhørende fargeklasser for aktuell variant
|
|
28
|
+
*/
|
|
29
|
+
private createMountainPath;
|
|
30
|
+
/** Lager geometri for pil */
|
|
31
|
+
private createArrowPath;
|
|
32
|
+
/** Lager SVG-elementer for fjellet */
|
|
33
|
+
private renderMountain;
|
|
34
|
+
/** Lager SVG-elementer for piler og etiketter */
|
|
35
|
+
private renderArrowsAndLabels;
|
|
36
|
+
/** Lager SVG-element for pil. Hvis rotation er angitt, snus pila på hodet */
|
|
37
|
+
private renderArrow;
|
|
38
|
+
/** Lager SVG-element for tekst */
|
|
39
|
+
private renderText;
|
|
40
|
+
/** Lager ARIA-label for SVG-elementet */
|
|
41
|
+
private getAriaLabel;
|
|
42
|
+
/** Returnerer den høyeste av de to høydene */
|
|
43
|
+
private get maxHeight();
|
|
44
|
+
/** Returnerer den laveste av de to høydene */
|
|
45
|
+
private get minHeight();
|
|
46
|
+
/** Tegn komponenten */
|
|
47
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
48
|
+
}
|
|
49
|
+
declare global {
|
|
50
|
+
interface HTMLElementTagNameMap {
|
|
51
|
+
'nve-exposed-height': NveExposedHeight;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
import { a 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 o from "./nve-exposed-height.styles.js";
|
|
4
|
+
//#region src/components/nve-exposed-height/nve-exposed-height.component.ts
|
|
5
|
+
var s = class extends n {
|
|
6
|
+
constructor(...e) {
|
|
7
|
+
super(...e), this.variant = 1, this.height1 = 0, this.height2 = 0, this.lang = "no", this.testId = void 0;
|
|
8
|
+
}
|
|
9
|
+
static {
|
|
10
|
+
this.styles = [o];
|
|
11
|
+
}
|
|
12
|
+
isEnglish() {
|
|
13
|
+
return this.lang.toLowerCase().startsWith("en");
|
|
14
|
+
}
|
|
15
|
+
createMountainGeometry(e) {
|
|
16
|
+
return e === 1 || e === 2 ? {
|
|
17
|
+
top: "M34.1299,22.8691 L20.1809,1.0741 C19.7079,0.3711 19.1749,0.0461 18.5749,0.0961 C17.9749,0.1461 17.4999,0.5581 17.1459,1.3301 L8.5139,18.9511 C10.8769,18.8161 12.7759,20.6831 12.7759,20.6831 C13.8629,21.6761 14.2179,22.0151 16.1509,22.0291 C19.1399,22.0511 20.0179,20.7691 22.0269,21.4881 C24.3919,22.3371 25.3159,23.3921 27.1709,24.5401 C29.9429,26.2481 31.3449,26.2291 33.0259,25.1611 C33.0259,25.1611 34.6099,24.2071 34.1299,22.8691",
|
|
18
|
+
bottom: "M6.4121,23.752 L1.0791,34.822 C0.6321,35.565 0.5661,36.549 0.8771,37.084 C1.1851,37.623 1.7671,38.58 2.6191,38.58 L39.6821,38.58 C40.5341,38.58 41.1151,37.623 41.4251,37.084 C41.7341,36.549 41.6681,35.219 41.2231,34.479 L36.2291,26.217 C36.4201,27.445 34.3141,28.854 34.3141,28.854 C32.6091,29.992 30.3481,29.959 27.8371,28.975 C25.7441,28.152 24.4491,26.895 22.4571,25.955 C20.4671,25.012 19.3401,26.041 16.5901,26.281 C14.9531,26.424 13.9711,26.166 12.6221,25.324 C12.6221,25.324 9.9561,23.752 6.4601,23.752 L6.4121,23.752 Z"
|
|
19
|
+
} : {
|
|
20
|
+
top: "M23.917,10.0605 L19.813,2.6985 C19.387,2.0665 18.906,1.7735 18.367,1.8185 C17.826,1.8645 17.4,2.2345 17.08,2.9285 L14.471,8.8895 L14.384,9.0545 C14.384,9.0545 16.84,8.2885 18.863,9.4345 C20.521,10.3725 21.144,11.3805 23.917,10.0605",
|
|
21
|
+
middle: "M34.2402,27.625 C34.2402,28.483 33.0472,29.218 33.0472,29.218 C31.3652,30.286 29.3092,30.762 26.6252,28.92 C24.6822,27.587 23.7362,26.562 21.4802,25.868 C19.4402,25.241 18.5942,26.431 15.6052,26.409 C13.6722,26.396 13.2832,25.827 12.2282,25.063 C12.2282,25.063 10.6742,23.747 8.6982,23.268 L8.0602,23.169 L12.9712,12.208 C12.9712,12.208 16.3302,11.472 18.5802,12.745 C20.4222,13.788 23.3102,15.342 25.7672,13.209 L34.2402,27.625",
|
|
22
|
+
bottom: "M5.9922,27.7842 L0.8322,39.2022 C0.3852,39.9442 0.3202,40.9292 0.6312,41.4642 C0.9392,42.0032 1.5212,42.9602 2.3732,42.9602 L39.4352,42.9602 C40.2872,42.9602 40.8692,42.0032 41.1782,41.4642 C41.4882,40.9292 41.4222,39.5982 40.9762,38.8582 L36.0102,30.6382 C35.9552,31.7022 34.0682,33.2332 34.0682,33.2332 C32.3632,34.3722 30.1012,34.3392 27.5902,33.3542 C25.4982,32.5322 24.2032,31.2742 22.2112,30.3352 C20.2212,29.3912 19.0942,30.4212 16.3442,30.6612 C14.7072,30.8042 13.7242,30.5462 12.3752,29.7042 C12.3752,29.7042 9.9982,27.7842 6.5022,27.7842 L5.9922,27.7842 Z"
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
createMountainPath(e) {
|
|
26
|
+
let t = {
|
|
27
|
+
1: {
|
|
28
|
+
topClass: "mountain-danger",
|
|
29
|
+
bottomClass: "mountain-safe"
|
|
30
|
+
},
|
|
31
|
+
2: {
|
|
32
|
+
topClass: "mountain-safe",
|
|
33
|
+
bottomClass: "mountain-danger"
|
|
34
|
+
},
|
|
35
|
+
3: {
|
|
36
|
+
topClass: "mountain-danger",
|
|
37
|
+
middleClass: "mountain-safe",
|
|
38
|
+
bottomClass: "mountain-danger"
|
|
39
|
+
},
|
|
40
|
+
4: {
|
|
41
|
+
topClass: "mountain-safe",
|
|
42
|
+
middleClass: "mountain-danger",
|
|
43
|
+
bottomClass: "mountain-safe"
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
return {
|
|
47
|
+
...this.createMountainGeometry(e),
|
|
48
|
+
...t[e]
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
createArrowPath() {
|
|
52
|
+
return "M11.92,8 L7.96,8 L7.96,16 L3.98,16 L3.98,8 L0,8 L5.96,0 Z";
|
|
53
|
+
}
|
|
54
|
+
renderMountain(e) {
|
|
55
|
+
return this.variant === 3 || this.variant === 4 ? t`
|
|
56
|
+
<path d="${e.top}" class="${e.topClass}" stroke-width="0.5" />
|
|
57
|
+
<path d="${e.middle}" class="${e.middleClass}" stroke-width="0.5" />
|
|
58
|
+
<path d="${e.bottom}" class="${e.bottomClass}" stroke-width="0.5" />
|
|
59
|
+
` : t`
|
|
60
|
+
<path d="${e.top}" class="${e.topClass}" stroke-width="0.5" />
|
|
61
|
+
<path d="${e.bottom}" class="${e.bottomClass}" stroke-width="0.5" />
|
|
62
|
+
`;
|
|
63
|
+
}
|
|
64
|
+
renderArrowsAndLabels() {
|
|
65
|
+
let e = this.variant === 3 || this.variant === 4 ? -6 : 0, n = (this.variant === 3 || this.variant === 4 ? 47 : 39) / 2 + e, { groupHeight: r, arrows: i, texts: a } = {
|
|
66
|
+
1: {
|
|
67
|
+
groupHeight: 28,
|
|
68
|
+
arrows: [{
|
|
69
|
+
y: 0,
|
|
70
|
+
rotation: 0
|
|
71
|
+
}],
|
|
72
|
+
texts: [{
|
|
73
|
+
y: 30,
|
|
74
|
+
text: `${this.height1}m`,
|
|
75
|
+
xOffset: 5.96,
|
|
76
|
+
centered: !0
|
|
77
|
+
}]
|
|
78
|
+
},
|
|
79
|
+
2: {
|
|
80
|
+
groupHeight: 28,
|
|
81
|
+
arrows: [{
|
|
82
|
+
y: 12,
|
|
83
|
+
rotation: 180
|
|
84
|
+
}],
|
|
85
|
+
texts: [{
|
|
86
|
+
y: 8,
|
|
87
|
+
text: `${this.height1}m`,
|
|
88
|
+
xOffset: 5.96,
|
|
89
|
+
centered: !0
|
|
90
|
+
}]
|
|
91
|
+
},
|
|
92
|
+
3: {
|
|
93
|
+
groupHeight: 38,
|
|
94
|
+
arrows: [{
|
|
95
|
+
y: 0,
|
|
96
|
+
rotation: 0
|
|
97
|
+
}, {
|
|
98
|
+
y: 22,
|
|
99
|
+
rotation: 180
|
|
100
|
+
}],
|
|
101
|
+
texts: [{
|
|
102
|
+
y: 16,
|
|
103
|
+
text: `${this.maxHeight}m`,
|
|
104
|
+
xOffset: 16,
|
|
105
|
+
centered: !1
|
|
106
|
+
}, {
|
|
107
|
+
y: 30,
|
|
108
|
+
text: `${this.minHeight}m`,
|
|
109
|
+
xOffset: 16,
|
|
110
|
+
centered: !1
|
|
111
|
+
}]
|
|
112
|
+
},
|
|
113
|
+
4: {
|
|
114
|
+
groupHeight: 40,
|
|
115
|
+
arrows: [{
|
|
116
|
+
y: 0,
|
|
117
|
+
rotation: 180
|
|
118
|
+
}, {
|
|
119
|
+
y: 24,
|
|
120
|
+
rotation: 0
|
|
121
|
+
}],
|
|
122
|
+
texts: [{
|
|
123
|
+
y: 22,
|
|
124
|
+
text: `${this.minHeight}-${this.maxHeight}m`,
|
|
125
|
+
xOffset: 12,
|
|
126
|
+
centered: !1
|
|
127
|
+
}]
|
|
128
|
+
}
|
|
129
|
+
}[this.variant];
|
|
130
|
+
return t`
|
|
131
|
+
<g transform="translate(55, ${n - r / 2})">
|
|
132
|
+
${i.map((e) => this.renderArrow(e.y, e.rotation))}
|
|
133
|
+
${a.map((e) => this.renderText(e.y, e.text, e.xOffset, e.centered))}
|
|
134
|
+
</g>
|
|
135
|
+
`;
|
|
136
|
+
}
|
|
137
|
+
renderArrow(e, n) {
|
|
138
|
+
return t`
|
|
139
|
+
<g transform="translate(0, ${e})${n === 0 ? "" : " rotate(180 5.96 8)"}">
|
|
140
|
+
<path d="${this.createArrowPath()}" class="arrow" />
|
|
141
|
+
</g>
|
|
142
|
+
`;
|
|
143
|
+
}
|
|
144
|
+
renderText(e, n, r, i) {
|
|
145
|
+
return t`<text x="${r}" y="${e}" class="${i ? "height-label centered" : "height-label"}">${n}</text>`;
|
|
146
|
+
}
|
|
147
|
+
getAriaLabel() {
|
|
148
|
+
let e = this.isEnglish() ? "Exposed height" : "Utsatt høyde", t = this.isEnglish() ? "Between" : "Mellom", n = this.isEnglish() ? "and" : "og", r = this.isEnglish() ? "meters" : "meter";
|
|
149
|
+
switch (this.variant) {
|
|
150
|
+
case 1: return `${e}: Over ${this.height1} ${r}`;
|
|
151
|
+
case 2: return `${e}: Under ${this.height1} ${r}`;
|
|
152
|
+
case 3: return `${e}: Under ${this.minHeight} ${r} ${n} over ${this.maxHeight} ${r}`;
|
|
153
|
+
case 4: return `${e}: ${t} ${this.minHeight} ${n} ${this.maxHeight} ${r}`;
|
|
154
|
+
default: return "";
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
get maxHeight() {
|
|
158
|
+
return Math.max(this.height1, this.height2);
|
|
159
|
+
}
|
|
160
|
+
get minHeight() {
|
|
161
|
+
return Math.min(this.height1, this.height2);
|
|
162
|
+
}
|
|
163
|
+
render() {
|
|
164
|
+
let t = this.createMountainPath(this.variant), n = this.variant === 3 || this.variant === 4 ? -6 : 0, r = this.variant === 3 || this.variant === 4;
|
|
165
|
+
return e`
|
|
166
|
+
<svg
|
|
167
|
+
class="exposed-height"
|
|
168
|
+
viewBox="-2 ${r ? -6 : -2} 120 ${r ? 48 : 46}"
|
|
169
|
+
preserveAspectRatio="xMidYMid meet"
|
|
170
|
+
role="img"
|
|
171
|
+
aria-label="${this.getAriaLabel()}"
|
|
172
|
+
testid=${this.testId}
|
|
173
|
+
>
|
|
174
|
+
<g transform="translate(0, ${n})">${this.renderMountain(t)}</g>
|
|
175
|
+
${this.renderArrowsAndLabels()}
|
|
176
|
+
</svg>
|
|
177
|
+
`;
|
|
178
|
+
}
|
|
179
|
+
};
|
|
180
|
+
a([r({ type: Number })], s.prototype, "variant", void 0), a([r({ type: Number })], s.prototype, "height1", void 0), a([r({ type: Number })], s.prototype, "height2", void 0), a([r({ type: String })], s.prototype, "lang", void 0), a([r({ type: String })], s.prototype, "testId", void 0), s = a([i("nve-exposed-height")], s);
|
|
181
|
+
var c = s;
|
|
182
|
+
//#endregion
|
|
183
|
+
export { c as default };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { u as e } from "../../chunks/lit.js";
|
|
2
|
+
//#region src/components/nve-exposed-height/nve-exposed-height.styles.ts
|
|
3
|
+
var t = e`
|
|
4
|
+
:host {
|
|
5
|
+
display: inline-block;
|
|
6
|
+
width: var(--exposed-height-width, 150px);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.exposed-height {
|
|
10
|
+
width: 100%;
|
|
11
|
+
height: auto; /* auto = maintains aspect ratio from intrinsic width/height */
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.mountain-danger {
|
|
15
|
+
fill: var(--exposed-height-affected-color, #d21523);
|
|
16
|
+
stroke: var(--exposed-height-affected-color, #d21523);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.mountain-safe {
|
|
20
|
+
fill: var(--exposed-height-unaffected-color, #e3e3e3);
|
|
21
|
+
stroke: var(--exposed-height-unaffected-color, #e3e3e3);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.arrow {
|
|
25
|
+
fill: var(--exposed-height-affected-color, #d21523);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.height-label {
|
|
29
|
+
font-family: 'Source Sans 3', sans-serif;
|
|
30
|
+
font-weight: var(--font-weight-regular);
|
|
31
|
+
font-size: 0.67rem;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.height-label.centered {
|
|
35
|
+
text-anchor: middle;
|
|
36
|
+
}
|
|
37
|
+
`;
|
|
38
|
+
//#endregion
|
|
39
|
+
export { t as default };
|
package/css/nve.css
CHANGED
|
@@ -500,6 +500,8 @@
|
|
|
500
500
|
--sizing-62x: 62px;
|
|
501
501
|
--sizing-64x: 64px;
|
|
502
502
|
--sizing-70x: 70px;
|
|
503
|
+
--sizing-72x: 72px;
|
|
504
|
+
--sizing-80x: 80px;
|
|
503
505
|
--sizing-84x: 84px;
|
|
504
506
|
--sizing-88x: 88px;
|
|
505
507
|
--sizing-92x: 92px;
|
|
@@ -660,6 +662,7 @@
|
|
|
660
662
|
--sizing-icon-medium: var(--sizing-32x);
|
|
661
663
|
--sizing-icon-small: var(--sizing-24x);
|
|
662
664
|
--sizing-icon-x-small: var(--sizing-20x);
|
|
665
|
+
--sizing-icon-2x-small: var(--sizing-18x);
|
|
663
666
|
--sizing-fixed-sizing-2x-small: var(--dimension-4x);
|
|
664
667
|
--sizing-fixed-sizing-x-small: var(--dimension-5x);
|
|
665
668
|
--sizing-fixed-sizing-small: var(--dimension-6x);
|
|
@@ -680,7 +683,6 @@
|
|
|
680
683
|
--typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/1.4 var(--font-family-primary-family);
|
|
681
684
|
--typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
|
|
682
685
|
--typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family);
|
|
683
|
-
--font-size-small: var(--dimension-4-5x); /** 16 px */
|
|
684
686
|
--typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family);
|
|
685
687
|
--typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/1.5 var(--font-family-primary-family);
|
|
686
688
|
--typography-body-large: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
|
|
@@ -712,6 +714,7 @@
|
|
|
712
714
|
--typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
|
|
713
715
|
--typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
|
|
714
716
|
--font-size-x-small: var(--dimension-4x); /** 14 px */
|
|
717
|
+
--font-size-small: var(--dimension-4-5x); /** 16 px */
|
|
715
718
|
--font-size-medium: var(--dimension-5x); /** 18 px */
|
|
716
719
|
--font-size-large: var(--dimension-6x); /** 20 px */
|
|
717
720
|
--font-size-x-large: var(--dimension-8x); /** 24 px */
|
|
@@ -747,6 +750,8 @@
|
|
|
747
750
|
--sizing-62x: 62px;
|
|
748
751
|
--sizing-64x: 64px;
|
|
749
752
|
--sizing-70x: 70px;
|
|
753
|
+
--sizing-72x: 72px;
|
|
754
|
+
--sizing-80x: 80px;
|
|
750
755
|
--sizing-84x: 84px;
|
|
751
756
|
--sizing-88x: 88px;
|
|
752
757
|
--sizing-92x: 92px;
|
|
@@ -900,6 +905,7 @@
|
|
|
900
905
|
--sizing-icon-medium: var(--sizing-32x);
|
|
901
906
|
--sizing-icon-small: var(--sizing-24x);
|
|
902
907
|
--sizing-icon-x-small: var(--sizing-20x);
|
|
908
|
+
--sizing-icon-2x-small: var(--sizing-18x);
|
|
903
909
|
--font-size-2x-small: var(--dimension-3-5x); /** 12 px */
|
|
904
910
|
--font-size-x-small: var(--dimension-4x); /** 14 px */
|
|
905
911
|
--font-size-small: var(--dimension-4-5x); /** 16 px */
|
|
@@ -941,6 +947,8 @@
|
|
|
941
947
|
--sizing-62x: 62px;
|
|
942
948
|
--sizing-64x: 64px;
|
|
943
949
|
--sizing-70x: 70px;
|
|
950
|
+
--sizing-72x: 72px;
|
|
951
|
+
--sizing-80x: 80px;
|
|
944
952
|
--sizing-84x: 84px;
|
|
945
953
|
--sizing-88x: 88px;
|
|
946
954
|
--sizing-92x: 92px;
|
|
@@ -1081,7 +1089,7 @@
|
|
|
1081
1089
|
--sizing-device-content-max-width-medium: var(--sizing-800x);
|
|
1082
1090
|
--sizing-device-content-max-width-small: var(--sizing-544x);
|
|
1083
1091
|
--sizing-device-content-max-width-x-small: var(--sizing-216x);
|
|
1084
|
-
--sizing-brand-logo-medium: var(--sizing-
|
|
1092
|
+
--sizing-brand-logo-medium: var(--sizing-80x);
|
|
1085
1093
|
--sizing-brand-illustration-medium: var(--sizing-40x);
|
|
1086
1094
|
--sizing-image-x-small: var(--sizing-48x);
|
|
1087
1095
|
--sizing-image-large: var(--sizing-544x);
|
|
@@ -1094,6 +1102,7 @@
|
|
|
1094
1102
|
--sizing-icon-medium: var(--sizing-32x);
|
|
1095
1103
|
--sizing-icon-small: var(--sizing-24x);
|
|
1096
1104
|
--sizing-icon-x-small: var(--sizing-20x);
|
|
1105
|
+
--sizing-icon-2x-small: var(--sizing-18x);
|
|
1097
1106
|
--font-size-2x-small: var(--dimension-3x); /** 12 px */
|
|
1098
1107
|
--font-size-x-small: var(--dimension-3-5x); /** 14 px */
|
|
1099
1108
|
--font-size-small: var(--dimension-4x); /** 16 px */
|
|
@@ -1135,6 +1144,8 @@
|
|
|
1135
1144
|
--sizing-62x: 62px;
|
|
1136
1145
|
--sizing-64x: 64px;
|
|
1137
1146
|
--sizing-70x: 70px;
|
|
1147
|
+
--sizing-72x: 72px;
|
|
1148
|
+
--sizing-80x: 80px;
|
|
1138
1149
|
--sizing-84x: 84px;
|
|
1139
1150
|
--sizing-88x: 88px;
|
|
1140
1151
|
--sizing-92x: 92px;
|
|
@@ -1275,7 +1286,7 @@
|
|
|
1275
1286
|
--sizing-device-content-max-width-medium: var(--sizing-600x);
|
|
1276
1287
|
--sizing-device-content-max-width-small: var(--sizing-496x);
|
|
1277
1288
|
--sizing-device-content-max-width-x-small: var(--sizing-496x);
|
|
1278
|
-
--sizing-brand-logo-medium: var(--sizing-
|
|
1289
|
+
--sizing-brand-logo-medium: var(--sizing-72x);
|
|
1279
1290
|
--sizing-brand-illustration-medium: var(--sizing-40x);
|
|
1280
1291
|
--sizing-image-x-small: var(--sizing-48x);
|
|
1281
1292
|
--sizing-image-large: var(--sizing-390x);
|
|
@@ -1288,6 +1299,7 @@
|
|
|
1288
1299
|
--sizing-icon-medium: var(--sizing-28x);
|
|
1289
1300
|
--sizing-icon-small: var(--sizing-24x);
|
|
1290
1301
|
--sizing-icon-x-small: var(--sizing-20x);
|
|
1302
|
+
--sizing-icon-2x-small: var(--sizing-18x);
|
|
1291
1303
|
--font-size-2x-small: var(--dimension-3x); /** 12 px */
|
|
1292
1304
|
--font-size-x-small: var(--dimension-3-5x); /** 14 px */
|
|
1293
1305
|
--font-size-small: var(--dimension-4x); /** 16 px */
|
|
@@ -1329,6 +1341,8 @@
|
|
|
1329
1341
|
--sizing-62x: 62px;
|
|
1330
1342
|
--sizing-64x: 64px;
|
|
1331
1343
|
--sizing-70x: 70px;
|
|
1344
|
+
--sizing-72x: 72px;
|
|
1345
|
+
--sizing-80x: 80px;
|
|
1332
1346
|
--sizing-84x: 84px;
|
|
1333
1347
|
--sizing-88x: 88px;
|
|
1334
1348
|
--sizing-92x: 92px;
|
|
@@ -1482,6 +1496,7 @@
|
|
|
1482
1496
|
--sizing-icon-medium: var(--sizing-28x);
|
|
1483
1497
|
--sizing-icon-small: var(--sizing-24x);
|
|
1484
1498
|
--sizing-icon-x-small: var(--sizing-20x);
|
|
1499
|
+
--sizing-icon-2x-small: var(--sizing-18x);
|
|
1485
1500
|
--font-size-2x-small: var(--dimension-3x); /** 12 px */
|
|
1486
1501
|
--font-size-x-small: var(--dimension-3-5x); /** 14 px */
|
|
1487
1502
|
--font-size-small: var(--dimension-4x); /** 16 px */
|
package/css/rme.css
CHANGED
|
@@ -500,6 +500,8 @@
|
|
|
500
500
|
--sizing-62x: 62px;
|
|
501
501
|
--sizing-64x: 64px;
|
|
502
502
|
--sizing-70x: 70px;
|
|
503
|
+
--sizing-72x: 72px;
|
|
504
|
+
--sizing-80x: 80px;
|
|
503
505
|
--sizing-84x: 84px;
|
|
504
506
|
--sizing-88x: 88px;
|
|
505
507
|
--sizing-92x: 92px;
|
|
@@ -660,6 +662,7 @@
|
|
|
660
662
|
--sizing-icon-medium: var(--sizing-32x);
|
|
661
663
|
--sizing-icon-small: var(--sizing-24x);
|
|
662
664
|
--sizing-icon-x-small: var(--sizing-20x);
|
|
665
|
+
--sizing-icon-2x-small: var(--sizing-18x);
|
|
663
666
|
--sizing-fixed-sizing-2x-small: var(--dimension-4x);
|
|
664
667
|
--sizing-fixed-sizing-x-small: var(--dimension-5x);
|
|
665
668
|
--sizing-fixed-sizing-small: var(--dimension-6x);
|
|
@@ -680,7 +683,6 @@
|
|
|
680
683
|
--typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/1.4 var(--font-family-primary-family);
|
|
681
684
|
--typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
|
|
682
685
|
--typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family);
|
|
683
|
-
--font-size-small: var(--dimension-4-5x); /** 16 px */
|
|
684
686
|
--typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family);
|
|
685
687
|
--typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/1.5 var(--font-family-primary-family);
|
|
686
688
|
--typography-body-large: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
|
|
@@ -712,6 +714,7 @@
|
|
|
712
714
|
--typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
|
|
713
715
|
--typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
|
|
714
716
|
--font-size-x-small: var(--dimension-4x); /** 14 px */
|
|
717
|
+
--font-size-small: var(--dimension-4-5x); /** 16 px */
|
|
715
718
|
--font-size-medium: var(--dimension-5x); /** 18 px */
|
|
716
719
|
--font-size-large: var(--dimension-6x); /** 20 px */
|
|
717
720
|
--font-size-x-large: var(--dimension-8x); /** 24 px */
|
|
@@ -747,6 +750,8 @@
|
|
|
747
750
|
--sizing-62x: 62px;
|
|
748
751
|
--sizing-64x: 64px;
|
|
749
752
|
--sizing-70x: 70px;
|
|
753
|
+
--sizing-72x: 72px;
|
|
754
|
+
--sizing-80x: 80px;
|
|
750
755
|
--sizing-84x: 84px;
|
|
751
756
|
--sizing-88x: 88px;
|
|
752
757
|
--sizing-92x: 92px;
|
|
@@ -900,6 +905,7 @@
|
|
|
900
905
|
--sizing-icon-medium: var(--sizing-32x);
|
|
901
906
|
--sizing-icon-small: var(--sizing-24x);
|
|
902
907
|
--sizing-icon-x-small: var(--sizing-20x);
|
|
908
|
+
--sizing-icon-2x-small: var(--sizing-18x);
|
|
903
909
|
--font-size-2x-small: var(--dimension-3-5x); /** 12 px */
|
|
904
910
|
--font-size-x-small: var(--dimension-4x); /** 14 px */
|
|
905
911
|
--font-size-small: var(--dimension-4-5x); /** 16 px */
|
|
@@ -941,6 +947,8 @@
|
|
|
941
947
|
--sizing-62x: 62px;
|
|
942
948
|
--sizing-64x: 64px;
|
|
943
949
|
--sizing-70x: 70px;
|
|
950
|
+
--sizing-72x: 72px;
|
|
951
|
+
--sizing-80x: 80px;
|
|
944
952
|
--sizing-84x: 84px;
|
|
945
953
|
--sizing-88x: 88px;
|
|
946
954
|
--sizing-92x: 92px;
|
|
@@ -1081,7 +1089,7 @@
|
|
|
1081
1089
|
--sizing-device-content-max-width-medium: var(--sizing-800x);
|
|
1082
1090
|
--sizing-device-content-max-width-small: var(--sizing-544x);
|
|
1083
1091
|
--sizing-device-content-max-width-x-small: var(--sizing-216x);
|
|
1084
|
-
--sizing-brand-logo-medium: var(--sizing-
|
|
1092
|
+
--sizing-brand-logo-medium: var(--sizing-80x);
|
|
1085
1093
|
--sizing-brand-illustration-medium: var(--sizing-40x);
|
|
1086
1094
|
--sizing-image-x-small: var(--sizing-48x);
|
|
1087
1095
|
--sizing-image-large: var(--sizing-544x);
|
|
@@ -1094,6 +1102,7 @@
|
|
|
1094
1102
|
--sizing-icon-medium: var(--sizing-32x);
|
|
1095
1103
|
--sizing-icon-small: var(--sizing-24x);
|
|
1096
1104
|
--sizing-icon-x-small: var(--sizing-20x);
|
|
1105
|
+
--sizing-icon-2x-small: var(--sizing-18x);
|
|
1097
1106
|
--font-size-2x-small: var(--dimension-3x); /** 12 px */
|
|
1098
1107
|
--font-size-x-small: var(--dimension-3-5x); /** 14 px */
|
|
1099
1108
|
--font-size-small: var(--dimension-4x); /** 16 px */
|
|
@@ -1135,6 +1144,8 @@
|
|
|
1135
1144
|
--sizing-62x: 62px;
|
|
1136
1145
|
--sizing-64x: 64px;
|
|
1137
1146
|
--sizing-70x: 70px;
|
|
1147
|
+
--sizing-72x: 72px;
|
|
1148
|
+
--sizing-80x: 80px;
|
|
1138
1149
|
--sizing-84x: 84px;
|
|
1139
1150
|
--sizing-88x: 88px;
|
|
1140
1151
|
--sizing-92x: 92px;
|
|
@@ -1275,7 +1286,7 @@
|
|
|
1275
1286
|
--sizing-device-content-max-width-medium: var(--sizing-600x);
|
|
1276
1287
|
--sizing-device-content-max-width-small: var(--sizing-496x);
|
|
1277
1288
|
--sizing-device-content-max-width-x-small: var(--sizing-496x);
|
|
1278
|
-
--sizing-brand-logo-medium: var(--sizing-
|
|
1289
|
+
--sizing-brand-logo-medium: var(--sizing-72x);
|
|
1279
1290
|
--sizing-brand-illustration-medium: var(--sizing-40x);
|
|
1280
1291
|
--sizing-image-x-small: var(--sizing-48x);
|
|
1281
1292
|
--sizing-image-large: var(--sizing-390x);
|
|
@@ -1288,6 +1299,7 @@
|
|
|
1288
1299
|
--sizing-icon-medium: var(--sizing-28x);
|
|
1289
1300
|
--sizing-icon-small: var(--sizing-24x);
|
|
1290
1301
|
--sizing-icon-x-small: var(--sizing-20x);
|
|
1302
|
+
--sizing-icon-2x-small: var(--sizing-18x);
|
|
1291
1303
|
--font-size-2x-small: var(--dimension-3x); /** 12 px */
|
|
1292
1304
|
--font-size-x-small: var(--dimension-3-5x); /** 14 px */
|
|
1293
1305
|
--font-size-small: var(--dimension-4x); /** 16 px */
|
|
@@ -1329,6 +1341,8 @@
|
|
|
1329
1341
|
--sizing-62x: 62px;
|
|
1330
1342
|
--sizing-64x: 64px;
|
|
1331
1343
|
--sizing-70x: 70px;
|
|
1344
|
+
--sizing-72x: 72px;
|
|
1345
|
+
--sizing-80x: 80px;
|
|
1332
1346
|
--sizing-84x: 84px;
|
|
1333
1347
|
--sizing-88x: 88px;
|
|
1334
1348
|
--sizing-92x: 92px;
|
|
@@ -1482,6 +1496,7 @@
|
|
|
1482
1496
|
--sizing-icon-medium: var(--sizing-28x);
|
|
1483
1497
|
--sizing-icon-small: var(--sizing-24x);
|
|
1484
1498
|
--sizing-icon-x-small: var(--sizing-20x);
|
|
1499
|
+
--sizing-icon-2x-small: var(--sizing-18x);
|
|
1485
1500
|
--font-size-2x-small: var(--dimension-3x); /** 12 px */
|
|
1486
1501
|
--font-size-x-small: var(--dimension-3-5x); /** 14 px */
|
|
1487
1502
|
--font-size-small: var(--dimension-4x); /** 16 px */
|
package/css/varsom.css
CHANGED
|
@@ -500,6 +500,8 @@
|
|
|
500
500
|
--sizing-62x: 62px;
|
|
501
501
|
--sizing-64x: 64px;
|
|
502
502
|
--sizing-70x: 70px;
|
|
503
|
+
--sizing-72x: 72px;
|
|
504
|
+
--sizing-80x: 80px;
|
|
503
505
|
--sizing-84x: 84px;
|
|
504
506
|
--sizing-88x: 88px;
|
|
505
507
|
--sizing-92x: 92px;
|
|
@@ -660,6 +662,7 @@
|
|
|
660
662
|
--sizing-icon-medium: var(--sizing-32x);
|
|
661
663
|
--sizing-icon-small: var(--sizing-24x);
|
|
662
664
|
--sizing-icon-x-small: var(--sizing-20x);
|
|
665
|
+
--sizing-icon-2x-small: var(--sizing-18x);
|
|
663
666
|
--sizing-fixed-sizing-2x-small: var(--dimension-4x);
|
|
664
667
|
--sizing-fixed-sizing-x-small: var(--dimension-5x);
|
|
665
668
|
--sizing-fixed-sizing-small: var(--dimension-6x);
|
|
@@ -680,7 +683,6 @@
|
|
|
680
683
|
--typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/1.4 var(--font-family-primary-family);
|
|
681
684
|
--typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
|
|
682
685
|
--typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family);
|
|
683
|
-
--font-size-small: var(--dimension-4-5x); /** 16 px */
|
|
684
686
|
--typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family);
|
|
685
687
|
--typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/1.5 var(--font-family-primary-family);
|
|
686
688
|
--typography-body-large: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
|
|
@@ -712,6 +714,7 @@
|
|
|
712
714
|
--typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
|
|
713
715
|
--typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
|
|
714
716
|
--font-size-x-small: var(--dimension-4x); /** 14 px */
|
|
717
|
+
--font-size-small: var(--dimension-4-5x); /** 16 px */
|
|
715
718
|
--font-size-medium: var(--dimension-5x); /** 18 px */
|
|
716
719
|
--font-size-large: var(--dimension-6x); /** 20 px */
|
|
717
720
|
--font-size-x-large: var(--dimension-8x); /** 24 px */
|
|
@@ -747,6 +750,8 @@
|
|
|
747
750
|
--sizing-62x: 62px;
|
|
748
751
|
--sizing-64x: 64px;
|
|
749
752
|
--sizing-70x: 70px;
|
|
753
|
+
--sizing-72x: 72px;
|
|
754
|
+
--sizing-80x: 80px;
|
|
750
755
|
--sizing-84x: 84px;
|
|
751
756
|
--sizing-88x: 88px;
|
|
752
757
|
--sizing-92x: 92px;
|
|
@@ -900,6 +905,7 @@
|
|
|
900
905
|
--sizing-icon-medium: var(--sizing-32x);
|
|
901
906
|
--sizing-icon-small: var(--sizing-24x);
|
|
902
907
|
--sizing-icon-x-small: var(--sizing-20x);
|
|
908
|
+
--sizing-icon-2x-small: var(--sizing-18x);
|
|
903
909
|
--font-size-2x-small: var(--dimension-3-5x); /** 12 px */
|
|
904
910
|
--font-size-x-small: var(--dimension-4x); /** 14 px */
|
|
905
911
|
--font-size-small: var(--dimension-4-5x); /** 16 px */
|
|
@@ -941,6 +947,8 @@
|
|
|
941
947
|
--sizing-62x: 62px;
|
|
942
948
|
--sizing-64x: 64px;
|
|
943
949
|
--sizing-70x: 70px;
|
|
950
|
+
--sizing-72x: 72px;
|
|
951
|
+
--sizing-80x: 80px;
|
|
944
952
|
--sizing-84x: 84px;
|
|
945
953
|
--sizing-88x: 88px;
|
|
946
954
|
--sizing-92x: 92px;
|
|
@@ -1081,7 +1089,7 @@
|
|
|
1081
1089
|
--sizing-device-content-max-width-medium: var(--sizing-800x);
|
|
1082
1090
|
--sizing-device-content-max-width-small: var(--sizing-544x);
|
|
1083
1091
|
--sizing-device-content-max-width-x-small: var(--sizing-216x);
|
|
1084
|
-
--sizing-brand-logo-medium: var(--sizing-
|
|
1092
|
+
--sizing-brand-logo-medium: var(--sizing-80x);
|
|
1085
1093
|
--sizing-brand-illustration-medium: var(--sizing-40x);
|
|
1086
1094
|
--sizing-image-x-small: var(--sizing-48x);
|
|
1087
1095
|
--sizing-image-large: var(--sizing-544x);
|
|
@@ -1094,6 +1102,7 @@
|
|
|
1094
1102
|
--sizing-icon-medium: var(--sizing-32x);
|
|
1095
1103
|
--sizing-icon-small: var(--sizing-24x);
|
|
1096
1104
|
--sizing-icon-x-small: var(--sizing-20x);
|
|
1105
|
+
--sizing-icon-2x-small: var(--sizing-18x);
|
|
1097
1106
|
--font-size-2x-small: var(--dimension-3x); /** 12 px */
|
|
1098
1107
|
--font-size-x-small: var(--dimension-3-5x); /** 14 px */
|
|
1099
1108
|
--font-size-small: var(--dimension-4x); /** 16 px */
|
|
@@ -1135,6 +1144,8 @@
|
|
|
1135
1144
|
--sizing-62x: 62px;
|
|
1136
1145
|
--sizing-64x: 64px;
|
|
1137
1146
|
--sizing-70x: 70px;
|
|
1147
|
+
--sizing-72x: 72px;
|
|
1148
|
+
--sizing-80x: 80px;
|
|
1138
1149
|
--sizing-84x: 84px;
|
|
1139
1150
|
--sizing-88x: 88px;
|
|
1140
1151
|
--sizing-92x: 92px;
|
|
@@ -1275,7 +1286,7 @@
|
|
|
1275
1286
|
--sizing-device-content-max-width-medium: var(--sizing-600x);
|
|
1276
1287
|
--sizing-device-content-max-width-small: var(--sizing-496x);
|
|
1277
1288
|
--sizing-device-content-max-width-x-small: var(--sizing-496x);
|
|
1278
|
-
--sizing-brand-logo-medium: var(--sizing-
|
|
1289
|
+
--sizing-brand-logo-medium: var(--sizing-72x);
|
|
1279
1290
|
--sizing-brand-illustration-medium: var(--sizing-40x);
|
|
1280
1291
|
--sizing-image-x-small: var(--sizing-48x);
|
|
1281
1292
|
--sizing-image-large: var(--sizing-390x);
|
|
@@ -1288,6 +1299,7 @@
|
|
|
1288
1299
|
--sizing-icon-medium: var(--sizing-28x);
|
|
1289
1300
|
--sizing-icon-small: var(--sizing-24x);
|
|
1290
1301
|
--sizing-icon-x-small: var(--sizing-20x);
|
|
1302
|
+
--sizing-icon-2x-small: var(--sizing-18x);
|
|
1291
1303
|
--font-size-2x-small: var(--dimension-3x); /** 12 px */
|
|
1292
1304
|
--font-size-x-small: var(--dimension-3-5x); /** 14 px */
|
|
1293
1305
|
--font-size-small: var(--dimension-4x); /** 16 px */
|
|
@@ -1329,6 +1341,8 @@
|
|
|
1329
1341
|
--sizing-62x: 62px;
|
|
1330
1342
|
--sizing-64x: 64px;
|
|
1331
1343
|
--sizing-70x: 70px;
|
|
1344
|
+
--sizing-72x: 72px;
|
|
1345
|
+
--sizing-80x: 80px;
|
|
1332
1346
|
--sizing-84x: 84px;
|
|
1333
1347
|
--sizing-88x: 88px;
|
|
1334
1348
|
--sizing-92x: 92px;
|
|
@@ -1482,6 +1496,7 @@
|
|
|
1482
1496
|
--sizing-icon-medium: var(--sizing-28x);
|
|
1483
1497
|
--sizing-icon-small: var(--sizing-24x);
|
|
1484
1498
|
--sizing-icon-x-small: var(--sizing-20x);
|
|
1499
|
+
--sizing-icon-2x-small: var(--sizing-18x);
|
|
1485
1500
|
--font-size-2x-small: var(--dimension-3x); /** 12 px */
|
|
1486
1501
|
--font-size-x-small: var(--dimension-3-5x); /** 14 px */
|
|
1487
1502
|
--font-size-small: var(--dimension-4x); /** 16 px */
|
package/custom-elements.json
CHANGED
|
@@ -2229,6 +2229,118 @@
|
|
|
2229
2229
|
}
|
|
2230
2230
|
]
|
|
2231
2231
|
},
|
|
2232
|
+
{
|
|
2233
|
+
"kind": "javascript-module",
|
|
2234
|
+
"path": "components/nve-exposed-height/nve-exposed-height.js",
|
|
2235
|
+
"declarations": [
|
|
2236
|
+
{
|
|
2237
|
+
"kind": "class",
|
|
2238
|
+
"description": "Visualisering av utsatt høyde for et skredproblem. Viser et fjell med fargelegging av utsatt høyde i tillegg til piler og høydegrenser.",
|
|
2239
|
+
"name": "NveExposedHeight",
|
|
2240
|
+
"members": [
|
|
2241
|
+
{
|
|
2242
|
+
"kind": "field",
|
|
2243
|
+
"name": "variant",
|
|
2244
|
+
"type": {
|
|
2245
|
+
"text": "1 | 2 | 3 | 4"
|
|
2246
|
+
},
|
|
2247
|
+
"default": "1",
|
|
2248
|
+
"description": "Type fyll: 1=over, 2=under, 3=over og under, 4=mellom"
|
|
2249
|
+
},
|
|
2250
|
+
{
|
|
2251
|
+
"kind": "field",
|
|
2252
|
+
"name": "height1",
|
|
2253
|
+
"type": {
|
|
2254
|
+
"text": "number"
|
|
2255
|
+
},
|
|
2256
|
+
"default": "0",
|
|
2257
|
+
"description": "Første høydeverdi i meter"
|
|
2258
|
+
},
|
|
2259
|
+
{
|
|
2260
|
+
"kind": "field",
|
|
2261
|
+
"name": "height2",
|
|
2262
|
+
"type": {
|
|
2263
|
+
"text": "number"
|
|
2264
|
+
},
|
|
2265
|
+
"default": "0",
|
|
2266
|
+
"description": "Andre høydeverdi i meter (for variant 3 og 4)"
|
|
2267
|
+
},
|
|
2268
|
+
{
|
|
2269
|
+
"kind": "field",
|
|
2270
|
+
"name": "lang",
|
|
2271
|
+
"type": {
|
|
2272
|
+
"text": "string"
|
|
2273
|
+
},
|
|
2274
|
+
"default": "'no'",
|
|
2275
|
+
"description": "Språk for aria-label. Blir satt til engelsk om lang starter på 'en'. Standard er norsk."
|
|
2276
|
+
},
|
|
2277
|
+
{
|
|
2278
|
+
"kind": "field",
|
|
2279
|
+
"name": "testId",
|
|
2280
|
+
"type": {
|
|
2281
|
+
"text": "string | undefined"
|
|
2282
|
+
},
|
|
2283
|
+
"default": "undefined"
|
|
2284
|
+
}
|
|
2285
|
+
],
|
|
2286
|
+
"attributes": [
|
|
2287
|
+
{
|
|
2288
|
+
"name": "variant",
|
|
2289
|
+
"type": {
|
|
2290
|
+
"text": "1 | 2 | 3 | 4"
|
|
2291
|
+
},
|
|
2292
|
+
"description": "Type fyll: 1=over, 2=under, 3=over og under, 4=mellom"
|
|
2293
|
+
},
|
|
2294
|
+
{
|
|
2295
|
+
"name": "height1",
|
|
2296
|
+
"type": {
|
|
2297
|
+
"text": "number"
|
|
2298
|
+
},
|
|
2299
|
+
"description": "Første høydeverdi i meter"
|
|
2300
|
+
},
|
|
2301
|
+
{
|
|
2302
|
+
"name": "height2",
|
|
2303
|
+
"type": {
|
|
2304
|
+
"text": "number"
|
|
2305
|
+
},
|
|
2306
|
+
"description": "Andre høydeverdi i meter (for variant 3 og 4)"
|
|
2307
|
+
},
|
|
2308
|
+
{
|
|
2309
|
+
"name": "lang",
|
|
2310
|
+
"type": {
|
|
2311
|
+
"text": "string"
|
|
2312
|
+
},
|
|
2313
|
+
"description": "Språk for aria-label. Blir satt til engelsk om lang starter på 'en'. Standard er norsk."
|
|
2314
|
+
},
|
|
2315
|
+
{
|
|
2316
|
+
"name": "testId",
|
|
2317
|
+
"type": {
|
|
2318
|
+
"text": "string | undefined"
|
|
2319
|
+
}
|
|
2320
|
+
}
|
|
2321
|
+
],
|
|
2322
|
+
"superclass": {
|
|
2323
|
+
"name": "LitElement",
|
|
2324
|
+
"package": "lit"
|
|
2325
|
+
},
|
|
2326
|
+
"tagNameWithoutPrefix": "exposed-height",
|
|
2327
|
+
"tagName": "nve-exposed-height",
|
|
2328
|
+
"customElement": true,
|
|
2329
|
+
"jsDoc": "/**\n * Visualisering av utsatt høyde for et skredproblem.\n * Viser et fjell med fargelegging av utsatt høyde i tillegg til piler og høydegrenser.\n * @cssproperty --exposed-height-affected-color - Farge på utsatte høyde. Standard er #d21523.\n * @cssproperty --exposed-height-unaffected-color - Farge på ikke-utsatt høyde. Standard er #e3e3e3.\n * @cssproperty --exposed-height-width - Bredde på hele komponenten. Standard er 150px.\n */",
|
|
2330
|
+
"modulePath": "src/components/nve-exposed-height/nve-exposed-height.component.ts"
|
|
2331
|
+
}
|
|
2332
|
+
],
|
|
2333
|
+
"exports": [
|
|
2334
|
+
{
|
|
2335
|
+
"kind": "js",
|
|
2336
|
+
"name": "default",
|
|
2337
|
+
"declaration": {
|
|
2338
|
+
"name": "NveExposedHeight",
|
|
2339
|
+
"module": "components/nve-exposed-height/nve-exposed-height.js"
|
|
2340
|
+
}
|
|
2341
|
+
}
|
|
2342
|
+
]
|
|
2343
|
+
},
|
|
2232
2344
|
{
|
|
2233
2345
|
"kind": "javascript-module",
|
|
2234
2346
|
"path": "components/nve-heading/nve-heading.js",
|
package/nve-designsystem.d.ts
CHANGED
|
@@ -17,6 +17,7 @@ export { default as NveDialog } from './components/nve-dialog/nve-dialog.compone
|
|
|
17
17
|
export { default as NveDivider } from './components/nve-divider/nve-divider.component';
|
|
18
18
|
export { default as NveDrawer } from './components/nve-drawer/nve-drawer.component';
|
|
19
19
|
export { default as NveDropdown } from './components/nve-dropdown/nve-dropdown.component';
|
|
20
|
+
export { default as NveExposedHeight } from './components/nve-exposed-height/nve-exposed-height.component';
|
|
20
21
|
export { default as NveHeading } from './components/nve-heading/nve-heading.component';
|
|
21
22
|
export { default as NveIcon } from './components/nve-icon/nve-icon.component';
|
|
22
23
|
export { default as NveInput } from './components/nve-input/nve-input.component';
|
package/nve-designsystem.js
CHANGED
|
@@ -22,26 +22,27 @@ import { t as b } from "./chunks/nve-dialog.component.js";
|
|
|
22
22
|
import { t as x } from "./chunks/nve-divider.component.js";
|
|
23
23
|
import { t as S } from "./chunks/nve-drawer.component.js";
|
|
24
24
|
import { t as C } from "./chunks/nve-dropdown.component.js";
|
|
25
|
-
import w from "./components/nve-
|
|
26
|
-
import T from "./components/nve-
|
|
27
|
-
import
|
|
28
|
-
import D from "./
|
|
29
|
-
import O from "./components/nve-
|
|
30
|
-
import k from "./components/nve-
|
|
31
|
-
import
|
|
32
|
-
import { t as j } from "./chunks/nve-radio
|
|
33
|
-
import { t as M } from "./chunks/nve-radio-
|
|
34
|
-
import N from "./
|
|
35
|
-
import
|
|
36
|
-
import { t as F } from "./chunks/nve-
|
|
37
|
-
import { t as I } from "./chunks/nve-
|
|
38
|
-
import L from "./
|
|
39
|
-
import R from "./components/nve-stepper/nve-
|
|
40
|
-
import z from "./components/nve-
|
|
41
|
-
import B from "./components/nve-
|
|
42
|
-
import V from "./components/nve-tab
|
|
43
|
-
import H from "./components/nve-tab-
|
|
44
|
-
import U from "./components/nve-
|
|
45
|
-
import W from "./components/nve-
|
|
46
|
-
import
|
|
47
|
-
|
|
25
|
+
import w from "./components/nve-exposed-height/nve-exposed-height.component.js";
|
|
26
|
+
import T from "./components/nve-heading/nve-heading.component.js";
|
|
27
|
+
import E from "./components/nve-link-card/nve-link-card.component.js";
|
|
28
|
+
import { t as D } from "./chunks/nve-menu-item.component.js";
|
|
29
|
+
import O from "./components/nve-message-card/nve-message-card.component.js";
|
|
30
|
+
import k from "./components/nve-navigation-card/nve-navigation-card.component.js";
|
|
31
|
+
import A from "./components/nve-paragraph/nve-paragraph.component.js";
|
|
32
|
+
import { t as j } from "./chunks/nve-radio.component.js";
|
|
33
|
+
import { t as M } from "./chunks/nve-radio-button.component.js";
|
|
34
|
+
import { t as N } from "./chunks/nve-radio-group.component.js";
|
|
35
|
+
import P from "./components/nve-relative-time/nve-relative-time.component.js";
|
|
36
|
+
import { t as F } from "./chunks/nve-select.component.js";
|
|
37
|
+
import { t as I } from "./chunks/nve-skeleton.component.js";
|
|
38
|
+
import { t as L } from "./chunks/nve-spinner.component.js";
|
|
39
|
+
import R from "./components/nve-stepper/nve-step/nve-step.component.js";
|
|
40
|
+
import z from "./components/nve-stepper/nve-stepper.component.js";
|
|
41
|
+
import B from "./components/nve-switch/nve-switch.component.js";
|
|
42
|
+
import V from "./components/nve-tab/nve-tab.component.js";
|
|
43
|
+
import H from "./components/nve-tab-group/nve-tab-group.component.js";
|
|
44
|
+
import U from "./components/nve-tab-panel/nve-tab-panel.component.js";
|
|
45
|
+
import W from "./components/nve-tag/nve-tag.component.js";
|
|
46
|
+
import G from "./components/nve-textarea/nve-textarea.component.js";
|
|
47
|
+
import { t as K } from "./chunks/nve-warning-level.component.js";
|
|
48
|
+
export { e as NveAccordion, t as NveAccordionItem, n as NveAlert, i as NveAspectRose, a as NveBadge, o as NveButton, s as NveCarousel, c as NveCarouselItem, l as NveCarouselThumbnail, u as NveCheckbox, p as NveCheckboxGroup, v as NveCombobox, y as NveDarkmodeSwitch, b as NveDialog, x as NveDivider, S as NveDrawer, C as NveDropdown, w as NveExposedHeight, T as NveHeading, r as NveIcon, h as NveInput, d as NveLabel, E as NveLinkCard, g as NveMenu, D as NveMenuItem, O as NveMessageCard, k as NveNavigationCard, _ as NveOption, A as NveParagraph, m as NvePopup, j as NveRadio, M as NveRadioButton, N as NveRadioGroup, P as NveRelativeTime, F as NveSelect, I as NveSkeleton, L as NveSpinner, R as NveStep, z as NveStepper, B as NveSwitch, V as NveTab, H as NveTabGroup, U as NveTabPanel, W as NveTag, G as NveTextarea, f as NveTooltip, K as NveWarningLevel };
|
package/package.json
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
},
|
|
12
12
|
"license": "MIT",
|
|
13
13
|
"homepage": "https://github.com/NVE/Designsystem/",
|
|
14
|
-
"version": "4.
|
|
14
|
+
"version": "4.7.0",
|
|
15
15
|
"customElements": "dist/custom-elements.json",
|
|
16
16
|
"exports": {
|
|
17
17
|
".": {
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {},
|
|
37
37
|
"optionalDependencies": {
|
|
38
|
-
"@rollup/rollup-linux-x64-gnu": "^4.
|
|
38
|
+
"@rollup/rollup-linux-x64-gnu": "^4.62.2"
|
|
39
39
|
},
|
|
40
40
|
"config": {
|
|
41
41
|
"commitizen": {
|