nve-designsystem 0.1.85 → 0.1.86
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.
|
@@ -57,6 +57,8 @@ export default class NveStep extends LitElement {
|
|
|
57
57
|
private renderDivider;
|
|
58
58
|
private renderDescription;
|
|
59
59
|
private isDescriptionValid;
|
|
60
|
+
/** Brukes for beregning av riktig høyde før divider. Description elementet har padding, så høyden før divider var for kort, så bruk denne funksjonen for regner ut riktig høyde. */
|
|
61
|
+
private updateVerticalDividerHeight;
|
|
60
62
|
private renderVerticalStep;
|
|
61
63
|
render(): TemplateResult;
|
|
62
64
|
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { s as
|
|
2
|
-
import { n as s, t as
|
|
1
|
+
import { s as h, x as c } from "../../../chunks/lit-element.js";
|
|
2
|
+
import { n as s, t as p } from "../../../chunks/property.js";
|
|
3
3
|
import { e as v } from "../../../chunks/query.js";
|
|
4
4
|
import u from "./nve-step.styles.js";
|
|
5
|
-
var f = Object.defineProperty,
|
|
6
|
-
for (var o =
|
|
7
|
-
(d = t[l]) && (o = (
|
|
8
|
-
return
|
|
9
|
-
},
|
|
10
|
-
let
|
|
5
|
+
var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (t, e, a, n) => {
|
|
6
|
+
for (var o = n > 1 ? void 0 : n ? g(e, a) : e, l = t.length - 1, d; l >= 0; l--)
|
|
7
|
+
(d = t[l]) && (o = (n ? d(e, a, o) : d(o)) || o);
|
|
8
|
+
return n && o && f(e, a, o), o;
|
|
9
|
+
}, y = /* @__PURE__ */ ((t) => (t[t.NotStarted = 0] = "NotStarted", t[t.Started = 1] = "Started", t[t.Active = 2] = "Active", t[t.Done = 3] = "Done", t[t.Error = 4] = "Error", t))(y || {});
|
|
10
|
+
let i = class extends h {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments), this.title = "", this.index = 0, this.description = "", this.state = 0, this.selectedStepIndex = 0, this.isSelected = !1, this.isLast = !1, this.entranceAllowed = !1, this.orientation = "horizontal";
|
|
13
13
|
}
|
|
@@ -17,34 +17,34 @@ let e = class extends p {
|
|
|
17
17
|
}
|
|
18
18
|
/** Metode som kjøres hver gang komponentens oppdateres */
|
|
19
19
|
updated() {
|
|
20
|
-
this.style.setProperty("line-color", this.isLast ? "0" : "1");
|
|
20
|
+
this.isOrientationVertical() && this.updateVerticalDividerHeight(), this.style.setProperty("line-color", this.isLast ? "0" : "1");
|
|
21
21
|
}
|
|
22
22
|
isOrientationVertical() {
|
|
23
23
|
return this.orientation === "vertical";
|
|
24
24
|
}
|
|
25
25
|
iconForState(t) {
|
|
26
|
-
let
|
|
26
|
+
let e = "";
|
|
27
27
|
switch (t) {
|
|
28
28
|
case 0:
|
|
29
|
-
|
|
29
|
+
e = "circle";
|
|
30
30
|
break;
|
|
31
31
|
case 2:
|
|
32
|
-
|
|
32
|
+
e = "radio_button_checked";
|
|
33
33
|
break;
|
|
34
34
|
case 1:
|
|
35
|
-
|
|
35
|
+
e = "trip_origin";
|
|
36
36
|
break;
|
|
37
37
|
case 3:
|
|
38
|
-
|
|
38
|
+
e = "check_circle";
|
|
39
39
|
break;
|
|
40
40
|
case 4:
|
|
41
|
-
|
|
41
|
+
e = "error";
|
|
42
42
|
break;
|
|
43
43
|
default:
|
|
44
|
-
|
|
44
|
+
e = "check_circle";
|
|
45
45
|
break;
|
|
46
46
|
}
|
|
47
|
-
return
|
|
47
|
+
return e;
|
|
48
48
|
}
|
|
49
49
|
getStateText(t) {
|
|
50
50
|
switch (t) {
|
|
@@ -103,7 +103,7 @@ let e = class extends p {
|
|
|
103
103
|
}
|
|
104
104
|
renderDivider() {
|
|
105
105
|
const t = this.isOrientationVertical() ? "divider-vertical" : "divider-horizontal";
|
|
106
|
-
return this.isLast ? "" :
|
|
106
|
+
return this.isLast ? "" : c`
|
|
107
107
|
<div class="vertical-divider-container">
|
|
108
108
|
<div
|
|
109
109
|
class="${t} ${this.getDividerColorClass()}"
|
|
@@ -111,13 +111,18 @@ let e = class extends p {
|
|
|
111
111
|
</div>`;
|
|
112
112
|
}
|
|
113
113
|
renderDescription() {
|
|
114
|
-
return this.isDescriptionValid(this.description) ?
|
|
114
|
+
return this.isDescriptionValid(this.description) ? c`<div class="step-description ${this.orientation === "vertical" ? "step-description-max-width-vertical" : "step-description-max-width-horizontal"}">${this.description}</div>` : "";
|
|
115
115
|
}
|
|
116
116
|
isDescriptionValid(t) {
|
|
117
117
|
return t.trim().length > 0;
|
|
118
118
|
}
|
|
119
|
+
/** Brukes for beregning av riktig høyde før divider. Description elementet har padding, så høyden før divider var for kort, så bruk denne funksjonen for regner ut riktig høyde. */
|
|
120
|
+
updateVerticalDividerHeight() {
|
|
121
|
+
const e = this.descriptionElement.offsetHeight + 24, a = this.shadowRoot.querySelector(".vertical-divider-container .divider-vertical");
|
|
122
|
+
a && (a.style.height = `${e}px`);
|
|
123
|
+
}
|
|
119
124
|
renderVerticalStep() {
|
|
120
|
-
return
|
|
125
|
+
return c`
|
|
121
126
|
<div class="vertical-container">
|
|
122
127
|
<div class="step-figure-vertical">
|
|
123
128
|
<div
|
|
@@ -140,7 +145,7 @@ let e = class extends p {
|
|
|
140
145
|
`;
|
|
141
146
|
}
|
|
142
147
|
render() {
|
|
143
|
-
return this.isOrientationVertical() ? this.renderVerticalStep() :
|
|
148
|
+
return this.isOrientationVertical() ? this.renderVerticalStep() : c`
|
|
144
149
|
<div class="step-figure">
|
|
145
150
|
<span
|
|
146
151
|
class=" ${this.getIconClass(this.state)}"
|
|
@@ -159,41 +164,41 @@ let e = class extends p {
|
|
|
159
164
|
`;
|
|
160
165
|
}
|
|
161
166
|
};
|
|
162
|
-
|
|
163
|
-
|
|
167
|
+
i.styles = [u];
|
|
168
|
+
r([
|
|
164
169
|
s({ reflect: !0 })
|
|
165
|
-
],
|
|
166
|
-
|
|
170
|
+
], i.prototype, "title", 2);
|
|
171
|
+
r([
|
|
167
172
|
s({ type: Number })
|
|
168
|
-
],
|
|
169
|
-
|
|
173
|
+
], i.prototype, "index", 2);
|
|
174
|
+
r([
|
|
170
175
|
s({ type: String })
|
|
171
|
-
],
|
|
172
|
-
|
|
176
|
+
], i.prototype, "description", 2);
|
|
177
|
+
r([
|
|
173
178
|
s({ type: Number })
|
|
174
|
-
],
|
|
175
|
-
|
|
179
|
+
], i.prototype, "state", 2);
|
|
180
|
+
r([
|
|
176
181
|
s({ type: Number })
|
|
177
|
-
],
|
|
178
|
-
|
|
182
|
+
], i.prototype, "selectedStepIndex", 2);
|
|
183
|
+
r([
|
|
179
184
|
s({ type: Boolean, reflect: !0 })
|
|
180
|
-
],
|
|
181
|
-
|
|
185
|
+
], i.prototype, "isSelected", 2);
|
|
186
|
+
r([
|
|
182
187
|
s({ type: Boolean })
|
|
183
|
-
],
|
|
184
|
-
|
|
188
|
+
], i.prototype, "isLast", 2);
|
|
189
|
+
r([
|
|
185
190
|
s({ type: Boolean })
|
|
186
|
-
],
|
|
187
|
-
|
|
191
|
+
], i.prototype, "entranceAllowed", 2);
|
|
192
|
+
r([
|
|
188
193
|
s()
|
|
189
|
-
],
|
|
190
|
-
|
|
194
|
+
], i.prototype, "orientation", 2);
|
|
195
|
+
r([
|
|
191
196
|
v(".step-description")
|
|
192
|
-
],
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
],
|
|
197
|
+
], i.prototype, "descriptionElement", 2);
|
|
198
|
+
i = r([
|
|
199
|
+
p("nve-step")
|
|
200
|
+
], i);
|
|
196
201
|
export {
|
|
197
|
-
|
|
198
|
-
|
|
202
|
+
y as StepState,
|
|
203
|
+
i as default
|
|
199
204
|
};
|
package/custom-elements.json
CHANGED
|
@@ -343,6 +343,77 @@
|
|
|
343
343
|
}
|
|
344
344
|
]
|
|
345
345
|
},
|
|
346
|
+
{
|
|
347
|
+
"kind": "javascript-module",
|
|
348
|
+
"path": "components/nve-badge/nve-badge.js",
|
|
349
|
+
"declarations": [
|
|
350
|
+
{
|
|
351
|
+
"kind": "class",
|
|
352
|
+
"description": "En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.",
|
|
353
|
+
"name": "NveBadge",
|
|
354
|
+
"members": [
|
|
355
|
+
{
|
|
356
|
+
"kind": "field",
|
|
357
|
+
"name": "styles",
|
|
358
|
+
"type": {
|
|
359
|
+
"text": "array"
|
|
360
|
+
},
|
|
361
|
+
"static": true,
|
|
362
|
+
"default": "[styles]"
|
|
363
|
+
},
|
|
364
|
+
{
|
|
365
|
+
"kind": "field",
|
|
366
|
+
"name": "variant",
|
|
367
|
+
"type": {
|
|
368
|
+
"text": "string"
|
|
369
|
+
},
|
|
370
|
+
"default": "'primary'",
|
|
371
|
+
"description": "= primary, success, neutral, warning, danger, brand"
|
|
372
|
+
},
|
|
373
|
+
{
|
|
374
|
+
"kind": "field",
|
|
375
|
+
"name": "size",
|
|
376
|
+
"type": {
|
|
377
|
+
"text": "string"
|
|
378
|
+
},
|
|
379
|
+
"default": "'medium'",
|
|
380
|
+
"description": "= small, medium eller large"
|
|
381
|
+
},
|
|
382
|
+
{
|
|
383
|
+
"kind": "field",
|
|
384
|
+
"name": "low",
|
|
385
|
+
"type": {
|
|
386
|
+
"text": "boolean"
|
|
387
|
+
},
|
|
388
|
+
"default": "false",
|
|
389
|
+
"description": "= gir lysere bakgrunnsfarge"
|
|
390
|
+
},
|
|
391
|
+
{
|
|
392
|
+
"kind": "method",
|
|
393
|
+
"name": "render"
|
|
394
|
+
}
|
|
395
|
+
],
|
|
396
|
+
"superclass": {
|
|
397
|
+
"name": "LitElement",
|
|
398
|
+
"package": "lit"
|
|
399
|
+
},
|
|
400
|
+
"tagNameWithoutPrefix": "badge",
|
|
401
|
+
"tagName": "nve-badge",
|
|
402
|
+
"customElement": true,
|
|
403
|
+
"jsDoc": "/**\n * En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.\n * @property {string} size = small, medium eller large\n * @property {string} variant = primary, success, neutral, warning, danger, brand\n * @property {boolean} low = gir lysere bakgrunnsfarge\n */"
|
|
404
|
+
}
|
|
405
|
+
],
|
|
406
|
+
"exports": [
|
|
407
|
+
{
|
|
408
|
+
"kind": "js",
|
|
409
|
+
"name": "default",
|
|
410
|
+
"declaration": {
|
|
411
|
+
"name": "NveBadge",
|
|
412
|
+
"module": "components/nve-badge/nve-badge.js"
|
|
413
|
+
}
|
|
414
|
+
}
|
|
415
|
+
]
|
|
416
|
+
},
|
|
346
417
|
{
|
|
347
418
|
"kind": "javascript-module",
|
|
348
419
|
"path": "components/nve-button/nve-button.js",
|
|
@@ -1159,77 +1230,6 @@
|
|
|
1159
1230
|
}
|
|
1160
1231
|
]
|
|
1161
1232
|
},
|
|
1162
|
-
{
|
|
1163
|
-
"kind": "javascript-module",
|
|
1164
|
-
"path": "components/nve-badge/nve-badge.js",
|
|
1165
|
-
"declarations": [
|
|
1166
|
-
{
|
|
1167
|
-
"kind": "class",
|
|
1168
|
-
"description": "En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.",
|
|
1169
|
-
"name": "NveBadge",
|
|
1170
|
-
"members": [
|
|
1171
|
-
{
|
|
1172
|
-
"kind": "field",
|
|
1173
|
-
"name": "styles",
|
|
1174
|
-
"type": {
|
|
1175
|
-
"text": "array"
|
|
1176
|
-
},
|
|
1177
|
-
"static": true,
|
|
1178
|
-
"default": "[styles]"
|
|
1179
|
-
},
|
|
1180
|
-
{
|
|
1181
|
-
"kind": "field",
|
|
1182
|
-
"name": "variant",
|
|
1183
|
-
"type": {
|
|
1184
|
-
"text": "string"
|
|
1185
|
-
},
|
|
1186
|
-
"default": "'primary'",
|
|
1187
|
-
"description": "= primary, success, neutral, warning, danger, brand"
|
|
1188
|
-
},
|
|
1189
|
-
{
|
|
1190
|
-
"kind": "field",
|
|
1191
|
-
"name": "size",
|
|
1192
|
-
"type": {
|
|
1193
|
-
"text": "string"
|
|
1194
|
-
},
|
|
1195
|
-
"default": "'medium'",
|
|
1196
|
-
"description": "= small, medium eller large"
|
|
1197
|
-
},
|
|
1198
|
-
{
|
|
1199
|
-
"kind": "field",
|
|
1200
|
-
"name": "low",
|
|
1201
|
-
"type": {
|
|
1202
|
-
"text": "boolean"
|
|
1203
|
-
},
|
|
1204
|
-
"default": "false",
|
|
1205
|
-
"description": "= gir lysere bakgrunnsfarge"
|
|
1206
|
-
},
|
|
1207
|
-
{
|
|
1208
|
-
"kind": "method",
|
|
1209
|
-
"name": "render"
|
|
1210
|
-
}
|
|
1211
|
-
],
|
|
1212
|
-
"superclass": {
|
|
1213
|
-
"name": "LitElement",
|
|
1214
|
-
"package": "lit"
|
|
1215
|
-
},
|
|
1216
|
-
"tagNameWithoutPrefix": "badge",
|
|
1217
|
-
"tagName": "nve-badge",
|
|
1218
|
-
"customElement": true,
|
|
1219
|
-
"jsDoc": "/**\n * En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.\n * @property {string} size = small, medium eller large\n * @property {string} variant = primary, success, neutral, warning, danger, brand\n * @property {boolean} low = gir lysere bakgrunnsfarge\n */"
|
|
1220
|
-
}
|
|
1221
|
-
],
|
|
1222
|
-
"exports": [
|
|
1223
|
-
{
|
|
1224
|
-
"kind": "js",
|
|
1225
|
-
"name": "default",
|
|
1226
|
-
"declaration": {
|
|
1227
|
-
"name": "NveBadge",
|
|
1228
|
-
"module": "components/nve-badge/nve-badge.js"
|
|
1229
|
-
}
|
|
1230
|
-
}
|
|
1231
|
-
]
|
|
1232
|
-
},
|
|
1233
1233
|
{
|
|
1234
1234
|
"kind": "javascript-module",
|
|
1235
1235
|
"path": "components/nve-checkbox/nve-checkbox.js",
|
|
@@ -10912,6 +10912,17 @@
|
|
|
10912
10912
|
}
|
|
10913
10913
|
]
|
|
10914
10914
|
},
|
|
10915
|
+
{
|
|
10916
|
+
"kind": "method",
|
|
10917
|
+
"name": "updateVerticalDividerHeight",
|
|
10918
|
+
"privacy": "private",
|
|
10919
|
+
"return": {
|
|
10920
|
+
"type": {
|
|
10921
|
+
"text": "void"
|
|
10922
|
+
}
|
|
10923
|
+
},
|
|
10924
|
+
"description": "Brukes for beregning av riktig høyde før divider. Description elementet har padding, så høyden før divider var for kort, så bruk denne funksjonen for regner ut riktig høyde."
|
|
10925
|
+
},
|
|
10915
10926
|
{
|
|
10916
10927
|
"kind": "method",
|
|
10917
10928
|
"name": "renderVerticalStep",
|
|
@@ -10957,7 +10968,7 @@
|
|
|
10957
10968
|
"package": {
|
|
10958
10969
|
"name": "nve-designsystem",
|
|
10959
10970
|
"description": "Designsystem for NVE",
|
|
10960
|
-
"version": "0.1.
|
|
10971
|
+
"version": "0.1.85",
|
|
10961
10972
|
"author": {
|
|
10962
10973
|
"name": "NVE",
|
|
10963
10974
|
"email": "nve@nve.no"
|