nve-designsystem 1.8.0 → 1.9.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.
@@ -7,7 +7,9 @@ import { PropertyValues } from 'lit';
7
7
  */
8
8
  export default class NveAlert extends SlAlert {
9
9
  constructor();
10
- /** Tykk tekst, vises helt til venstre */
10
+ /**
11
+ * Tykk tekst, vises helt til venstre
12
+ */
11
13
  label: string;
12
14
  /** Tynnere beskrivelse tekst */
13
15
  text: string;
@@ -64,48 +64,56 @@
64
64
  },
65
65
  {
66
66
  "kind": "javascript-module",
67
- "path": "components/nve-alert/nve-alert.js",
67
+ "path": "components/nve-accordion-item/nve-accordion-item.js",
68
68
  "declarations": [
69
69
  {
70
70
  "kind": "class",
71
- "description": "Brukes til å vise viktige beskjeder enten en side eller som en enkel popup.\nHvis du trenger å vise en statisk varsling med mer informasjon, kan det hende at\nnve-message-card er et bedre valg.",
72
- "name": "NveAlert",
71
+ "description": "Viser et kort sammendrag og utvides for å vise ekstra innhold.\nKan brukes som en selvstendig komponent eller som en del av nve-accordion.",
72
+ "name": "NveAccordionItem",
73
73
  "members": [
74
74
  {
75
75
  "kind": "field",
76
- "name": "label",
76
+ "name": "testId",
77
77
  "type": {
78
- "text": "string"
78
+ "text": "string | undefined"
79
79
  },
80
- "default": "''",
81
- "description": "Tykk tekst, vises helt til venstre"
80
+ "default": "undefined"
82
81
  },
83
82
  {
84
83
  "kind": "field",
85
- "name": "text",
84
+ "name": "leftStroke",
86
85
  "type": {
87
- "text": "string"
86
+ "text": "boolean"
88
87
  },
89
- "default": "''",
90
- "description": "Tynnere beskrivelse tekst"
88
+ "default": "false",
89
+ "description": "tykk strek på venstre side"
91
90
  },
92
91
  {
93
92
  "kind": "field",
94
- "name": "saturation",
93
+ "name": "variant",
95
94
  "type": {
96
- "text": "'emphasized' | null"
95
+ "text": "'none' | 'neutral' | 'info' | 'success' | 'warning' | 'error'"
97
96
  },
98
- "default": "null",
99
- "description": "Bestemmer sterkere bakgrunnsfarge"
97
+ "default": "'none'",
98
+ "description": "Setter farge på bakgrunn og tekst"
100
99
  },
101
100
  {
102
101
  "kind": "field",
103
- "name": "leftStroke",
102
+ "name": "border",
104
103
  "type": {
105
104
  "text": "boolean"
106
105
  },
107
106
  "default": "false",
108
- "description": "Ramme linje til venstre"
107
+ "description": "Vis en ramme rundt hele komponenten"
108
+ },
109
+ {
110
+ "kind": "field",
111
+ "name": "compact",
112
+ "type": {
113
+ "text": "boolean"
114
+ },
115
+ "default": "false",
116
+ "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre"
109
117
  },
110
118
  {
111
119
  "kind": "field",
@@ -114,96 +122,61 @@
114
122
  "text": "array"
115
123
  },
116
124
  "static": true,
117
- "default": "[ SlAlert.styles, // we have to have this otherwise closable is not working styles, ]"
125
+ "default": "[SlDetails.styles, styles]"
118
126
  },
119
127
  {
120
128
  "kind": "method",
121
- "name": "updated",
129
+ "name": "handleSummaryClick",
130
+ "privacy": "private",
122
131
  "parameters": [
123
132
  {
124
- "name": "changedProperties",
133
+ "name": "event",
125
134
  "type": {
126
- "text": "PropertyValues"
135
+ "text": "MouseEvent"
127
136
  }
128
137
  }
129
- ]
130
- },
131
- {
132
- "kind": "method",
133
- "name": "restartAutoHide",
134
- "privacy": "private",
135
- "inheritedFrom": {
136
- "name": "SlAlert"
137
- }
138
- },
139
- {
140
- "kind": "method",
141
- "name": "pauseAutoHide",
142
- "privacy": "private",
143
- "inheritedFrom": {
144
- "name": "SlAlert"
145
- }
146
- },
147
- {
148
- "kind": "method",
149
- "name": "resumeAutoHide",
150
- "privacy": "private",
151
- "inheritedFrom": {
152
- "name": "SlAlert"
153
- }
154
- },
155
- {
156
- "kind": "method",
157
- "name": "handleCountdownChange",
158
- "privacy": "private",
138
+ ],
159
139
  "inheritedFrom": {
160
- "name": "SlAlert"
140
+ "name": "SlDetails"
161
141
  }
162
142
  },
163
143
  {
164
144
  "kind": "method",
165
- "name": "handleCloseClick",
145
+ "name": "handleSummaryKeyDown",
166
146
  "privacy": "private",
147
+ "parameters": [
148
+ {
149
+ "name": "event",
150
+ "type": {
151
+ "text": "KeyboardEvent"
152
+ }
153
+ }
154
+ ],
167
155
  "inheritedFrom": {
168
- "name": "SlAlert"
156
+ "name": "SlDetails"
169
157
  }
170
158
  },
171
159
  {
172
160
  "kind": "method",
173
161
  "name": "handleOpenChange",
174
162
  "inheritedFrom": {
175
- "name": "SlAlert"
176
- }
177
- },
178
- {
179
- "kind": "method",
180
- "name": "handleDurationChange",
181
- "inheritedFrom": {
182
- "name": "SlAlert"
163
+ "name": "SlDetails"
183
164
  }
184
165
  },
185
166
  {
186
167
  "kind": "method",
187
168
  "name": "show",
188
- "description": "Shows the alert.",
169
+ "description": "Shows the details.",
189
170
  "inheritedFrom": {
190
- "name": "SlAlert"
171
+ "name": "SlDetails"
191
172
  }
192
173
  },
193
174
  {
194
175
  "kind": "method",
195
176
  "name": "hide",
196
- "description": "Hides the alert",
197
- "inheritedFrom": {
198
- "name": "SlAlert"
199
- }
200
- },
201
- {
202
- "kind": "method",
203
- "name": "toast",
204
- "description": "Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.",
177
+ "description": "Hides the details",
205
178
  "inheritedFrom": {
206
- "name": "SlAlert"
179
+ "name": "SlDetails"
207
180
  }
208
181
  },
209
182
  {
@@ -213,104 +186,69 @@
213
186
  "text": "object"
214
187
  },
215
188
  "static": true,
216
- "default": "{ 'sl-icon-button': SlIconButton }",
189
+ "default": "{ 'sl-icon': SlIcon }",
217
190
  "inheritedFrom": {
218
- "name": "SlAlert"
191
+ "name": "SlDetails"
219
192
  }
220
193
  },
221
194
  {
222
195
  "kind": "field",
223
- "name": "autoHideTimeout",
224
- "type": {
225
- "text": "number"
226
- },
196
+ "name": "localize",
227
197
  "privacy": "private",
198
+ "readonly": true,
199
+ "default": "new LocalizeController(this)",
228
200
  "inheritedFrom": {
229
- "name": "SlAlert"
201
+ "name": "SlDetails"
230
202
  }
231
203
  },
232
204
  {
233
205
  "kind": "field",
234
- "name": "remainingTimeInterval",
206
+ "name": "details",
235
207
  "type": {
236
- "text": "number"
208
+ "text": "HTMLDetailsElement"
237
209
  },
238
- "privacy": "private",
239
210
  "inheritedFrom": {
240
- "name": "SlAlert"
211
+ "name": "SlDetails"
241
212
  }
242
213
  },
243
214
  {
244
215
  "kind": "field",
245
- "name": "countdownAnimation",
216
+ "name": "header",
246
217
  "type": {
247
- "text": "Animation | undefined"
218
+ "text": "HTMLElement"
248
219
  },
249
- "privacy": "private",
250
- "inheritedFrom": {
251
- "name": "SlAlert"
252
- }
253
- },
254
- {
255
- "kind": "field",
256
- "name": "hasSlotController",
257
- "privacy": "private",
258
- "readonly": true,
259
- "default": "new HasSlotController(this, 'icon', 'suffix')",
260
- "inheritedFrom": {
261
- "name": "SlAlert"
262
- }
263
- },
264
- {
265
- "kind": "field",
266
- "name": "localize",
267
- "privacy": "private",
268
- "readonly": true,
269
- "default": "new LocalizeController(this)",
270
220
  "inheritedFrom": {
271
- "name": "SlAlert"
221
+ "name": "SlDetails"
272
222
  }
273
223
  },
274
224
  {
275
225
  "kind": "field",
276
- "name": "currentToastStack",
226
+ "name": "body",
277
227
  "type": {
278
- "text": "HTMLDivElement"
228
+ "text": "HTMLElement"
279
229
  },
280
- "privacy": "private",
281
- "static": true,
282
- "inheritedFrom": {
283
- "name": "SlAlert"
284
- }
285
- },
286
- {
287
- "kind": "field",
288
- "name": "toastStack",
289
- "privacy": "private",
290
- "static": true,
291
- "readonly": true,
292
230
  "inheritedFrom": {
293
- "name": "SlAlert"
231
+ "name": "SlDetails"
294
232
  }
295
233
  },
296
234
  {
297
235
  "kind": "field",
298
- "name": "base",
236
+ "name": "expandIconSlot",
299
237
  "type": {
300
- "text": "HTMLElement"
238
+ "text": "HTMLSlotElement"
301
239
  },
302
240
  "inheritedFrom": {
303
- "name": "SlAlert"
241
+ "name": "SlDetails"
304
242
  }
305
243
  },
306
244
  {
307
245
  "kind": "field",
308
- "name": "countdownElement",
246
+ "name": "detailsObserver",
309
247
  "type": {
310
- "text": "HTMLElement"
248
+ "text": "MutationObserver"
311
249
  },
312
250
  "inheritedFrom": {
313
- "name": "SlAlert"
251
+ "name": "SlDetails"
314
252
  }
315
253
  },
316
254
  {
@@ -320,117 +258,84 @@
320
258
  "text": "boolean"
321
259
  },
322
260
  "default": "false",
323
- "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
261
+ "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
324
262
  "attribute": "open",
325
263
  "reflects": true,
326
264
  "inheritedFrom": {
327
- "name": "SlAlert"
265
+ "name": "SlDetails"
328
266
  }
329
267
  },
330
268
  {
331
269
  "kind": "field",
332
- "name": "closable",
270
+ "name": "summary",
333
271
  "type": {
334
- "text": "boolean"
272
+ "text": "string"
335
273
  },
336
- "default": "false",
337
- "description": "Enables a close button that allows the user to dismiss the alert.",
338
- "attribute": "closable",
339
- "reflects": true,
274
+ "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
275
+ "attribute": "summary",
340
276
  "inheritedFrom": {
341
- "name": "SlAlert"
277
+ "name": "SlDetails"
342
278
  }
343
279
  },
344
280
  {
345
281
  "kind": "field",
346
- "name": "variant",
282
+ "name": "disabled",
347
283
  "type": {
348
- "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
284
+ "text": "boolean"
349
285
  },
350
- "default": "'primary'",
351
- "description": "The alert's theme variant.",
352
- "attribute": "variant",
286
+ "default": "false",
287
+ "description": "Disables the details so it can't be toggled.",
288
+ "attribute": "disabled",
353
289
  "reflects": true,
354
290
  "inheritedFrom": {
355
- "name": "SlAlert"
291
+ "name": "SlDetails"
292
+ }
293
+ }
294
+ ],
295
+ "superclass": {
296
+ "name": "SlDetails",
297
+ "package": "@shoelace-style/shoelace"
298
+ },
299
+ "tagNameWithoutPrefix": "accordion-item",
300
+ "tagName": "nve-accordion-item",
301
+ "customElement": true,
302
+ "jsDoc": "/**\n * Viser et kort sammendrag og utvides for å vise ekstra innhold.\n * Kan brukes som en selvstendig komponent eller som en del av nve-accordion.\n */",
303
+ "modulePath": "src/components/nve-accordion-item/nve-accordion-item.component.ts",
304
+ "cssProperties": [],
305
+ "cssParts": [
306
+ {
307
+ "description": "The component's base wrapper.",
308
+ "name": "base",
309
+ "inheritedFrom": {
310
+ "name": "SlDetails"
356
311
  }
357
312
  },
358
313
  {
359
- "kind": "field",
360
- "name": "duration",
361
- "default": "Infinity",
362
- "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
363
- "attribute": "duration",
314
+ "description": "The header that wraps both the summary and the expand/collapse icon.",
315
+ "name": "header",
364
316
  "inheritedFrom": {
365
- "name": "SlAlert"
317
+ "name": "SlDetails"
366
318
  }
367
319
  },
368
320
  {
369
- "kind": "field",
370
- "name": "countdown",
371
- "type": {
372
- "text": "'rtl' | 'ltr' | undefined"
373
- },
374
- "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
375
- "attribute": "countdown",
376
- "reflects": true,
377
- "inheritedFrom": {
378
- "name": "SlAlert"
379
- }
380
- },
381
- {
382
- "kind": "field",
383
- "name": "remainingTime",
384
- "privacy": "private",
385
- "inheritedFrom": {
386
- "name": "SlAlert"
387
- }
388
- }
389
- ],
390
- "superclass": {
391
- "name": "SlAlert",
392
- "package": "@shoelace-style/shoelace/dist/components/alert/alert.js"
393
- },
394
- "tagNameWithoutPrefix": "alert",
395
- "tagName": "nve-alert",
396
- "customElement": true,
397
- "jsDoc": "/**\n * Brukes til å vise viktige beskjeder enten på en side eller som en enkel popup.\n * Hvis du trenger å vise en statisk varsling med mer informasjon, kan det hende at\n * nve-message-card er et bedre valg.\n */",
398
- "modulePath": "src/components/nve-alert/nve-alert.component.ts",
399
- "cssProperties": [],
400
- "cssParts": [
401
- {
402
- "description": "The component's base wrapper.",
403
- "name": "base",
404
- "inheritedFrom": {
405
- "name": "SlAlert"
406
- }
407
- },
408
- {
409
- "description": "The container that wraps the optional icon.",
410
- "name": "icon",
411
- "inheritedFrom": {
412
- "name": "SlAlert"
413
- }
414
- },
415
- {
416
- "description": "The container that wraps the alert's main content.",
417
- "name": "message",
321
+ "description": "The container that wraps the summary.",
322
+ "name": "summary",
418
323
  "inheritedFrom": {
419
- "name": "SlAlert"
324
+ "name": "SlDetails"
420
325
  }
421
326
  },
422
327
  {
423
- "description": "The close button, an `<sl-icon-button>`.",
424
- "name": "close-button",
328
+ "description": "The container that wraps the expand/collapse icons.",
329
+ "name": "summary-icon",
425
330
  "inheritedFrom": {
426
- "name": "SlAlert"
331
+ "name": "SlDetails"
427
332
  }
428
333
  },
429
334
  {
430
- "description": "The close button's exported `base` part.",
431
- "name": "close-button__base",
335
+ "description": "The details content.",
336
+ "name": "content",
432
337
  "inheritedFrom": {
433
- "name": "SlAlert"
338
+ "name": "SlDetails"
434
339
  }
435
340
  }
436
341
  ],
@@ -442,108 +347,101 @@
442
347
  "text": "boolean"
443
348
  },
444
349
  "default": "false",
445
- "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
350
+ "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
446
351
  "fieldName": "open",
447
352
  "inheritedFrom": {
448
- "name": "SlAlert"
449
- }
450
- },
451
- {
452
- "name": "closable",
453
- "type": {
454
- "text": "boolean"
455
- },
456
- "default": "false",
457
- "description": "Enables a close button that allows the user to dismiss the alert.",
458
- "fieldName": "closable",
459
- "inheritedFrom": {
460
- "name": "SlAlert"
353
+ "name": "SlDetails"
461
354
  }
462
355
  },
463
356
  {
464
- "name": "variant",
357
+ "name": "summary",
465
358
  "type": {
466
- "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
359
+ "text": "string"
467
360
  },
468
- "default": "'primary'",
469
- "description": "The alert's theme variant.",
470
- "fieldName": "variant",
471
- "inheritedFrom": {
472
- "name": "SlAlert"
473
- }
474
- },
475
- {
476
- "name": "duration",
477
- "default": "Infinity",
478
- "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
479
- "fieldName": "duration",
361
+ "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
362
+ "fieldName": "summary",
480
363
  "inheritedFrom": {
481
- "name": "SlAlert"
364
+ "name": "SlDetails"
482
365
  }
483
366
  },
484
367
  {
485
- "name": "countdown",
368
+ "name": "disabled",
486
369
  "type": {
487
- "text": "'rtl' | 'ltr' | undefined"
370
+ "text": "boolean"
488
371
  },
489
- "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
490
- "fieldName": "countdown",
372
+ "default": "false",
373
+ "description": "Disables the details so it can't be toggled.",
374
+ "fieldName": "disabled",
491
375
  "inheritedFrom": {
492
- "name": "SlAlert"
376
+ "name": "SlDetails"
493
377
  }
494
378
  }
495
379
  ],
496
380
  "events": [
497
381
  {
498
- "description": "Emitted when the alert opens.",
382
+ "description": "Emitted when the details opens.",
499
383
  "name": "sl-show",
500
384
  "reactName": "onSlShow",
501
385
  "eventName": "SlShowEvent",
502
386
  "inheritedFrom": {
503
- "name": "SlAlert"
387
+ "name": "SlDetails"
504
388
  }
505
389
  },
506
390
  {
507
- "description": "Emitted after the alert opens and all animations are complete.",
391
+ "description": "Emitted after the details opens and all animations are complete.",
508
392
  "name": "sl-after-show",
509
393
  "reactName": "onSlAfterShow",
510
394
  "eventName": "SlAfterShowEvent",
511
395
  "inheritedFrom": {
512
- "name": "SlAlert"
396
+ "name": "SlDetails"
513
397
  }
514
398
  },
515
399
  {
516
- "description": "Emitted when the alert closes.",
400
+ "description": "Emitted when the details closes.",
517
401
  "name": "sl-hide",
518
402
  "reactName": "onSlHide",
519
403
  "eventName": "SlHideEvent",
520
404
  "inheritedFrom": {
521
- "name": "SlAlert"
405
+ "name": "SlDetails"
522
406
  }
523
407
  },
524
408
  {
525
- "description": "Emitted after the alert closes and all animations are complete.",
409
+ "description": "Emitted after the details closes and all animations are complete.",
526
410
  "name": "sl-after-hide",
527
411
  "reactName": "onSlAfterHide",
528
412
  "eventName": "SlAfterHideEvent",
529
413
  "inheritedFrom": {
530
- "name": "SlAlert"
414
+ "name": "SlDetails"
531
415
  }
532
416
  }
533
417
  ],
534
418
  "slots": [
535
419
  {
536
- "description": "The alert's main content.",
420
+ "description": "The details' main content.",
537
421
  "name": "",
538
422
  "inheritedFrom": {
539
- "name": "SlAlert"
423
+ "name": "SlDetails"
540
424
  }
541
425
  },
542
426
  {
543
- "description": "An icon to show in the alert. Works best with `<sl-icon>`.",
544
- "name": "icon",
427
+ "description": "The details' summary. Alternatively, you can use the `summary` attribute.",
428
+ "name": "summary",
545
429
  "inheritedFrom": {
546
- "name": "SlAlert"
430
+ "name": "SlDetails"
431
+ }
432
+ },
433
+ {
434
+ "description": "Optional expand icon to use instead of the default. Works best with `<sl-icon>`.",
435
+ "name": "expand-icon",
436
+ "inheritedFrom": {
437
+ "name": "SlDetails"
438
+ }
439
+ },
440
+ {
441
+ "description": "Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.",
442
+ "name": "collapse-icon",
443
+ "inheritedFrom": {
444
+ "name": "SlDetails"
547
445
  }
548
446
  }
549
447
  ]
@@ -554,64 +452,56 @@
554
452
  "kind": "js",
555
453
  "name": "default",
556
454
  "declaration": {
557
- "name": "NveAlert",
558
- "module": "components/nve-alert/nve-alert.js"
455
+ "name": "NveAccordionItem",
456
+ "module": "components/nve-accordion-item/nve-accordion-item.js"
559
457
  }
560
458
  }
561
459
  ]
562
460
  },
563
461
  {
564
462
  "kind": "javascript-module",
565
- "path": "components/nve-accordion-item/nve-accordion-item.js",
463
+ "path": "components/nve-alert/nve-alert.js",
566
464
  "declarations": [
567
465
  {
568
466
  "kind": "class",
569
- "description": "Viser et kort sammendrag og utvides for å vise ekstra innhold.\nKan brukes som en selvstendig komponent eller som en del av nve-accordion.",
570
- "name": "NveAccordionItem",
467
+ "description": "Brukes til å vise viktige beskjeder enten en side eller som en enkel popup.\nHvis du trenger å vise en statisk varsling med mer informasjon, kan det hende at\nnve-message-card er et bedre valg.",
468
+ "name": "NveAlert",
571
469
  "members": [
572
470
  {
573
471
  "kind": "field",
574
- "name": "testId",
575
- "type": {
576
- "text": "string | undefined"
577
- },
578
- "default": "undefined"
579
- },
580
- {
581
- "kind": "field",
582
- "name": "leftStroke",
472
+ "name": "label",
583
473
  "type": {
584
- "text": "boolean"
474
+ "text": "string"
585
475
  },
586
- "default": "false",
587
- "description": "tykk strek venstre side"
476
+ "default": "''",
477
+ "description": "Tykk tekst, vises helt til venstre"
588
478
  },
589
479
  {
590
480
  "kind": "field",
591
- "name": "variant",
481
+ "name": "text",
592
482
  "type": {
593
- "text": "'none' | 'neutral' | 'info' | 'success' | 'warning' | 'error'"
483
+ "text": "string"
594
484
  },
595
- "default": "'none'",
596
- "description": "Setter farge på bakgrunn og tekst"
485
+ "default": "''",
486
+ "description": "Tynnere beskrivelse tekst"
597
487
  },
598
488
  {
599
489
  "kind": "field",
600
- "name": "border",
490
+ "name": "saturation",
601
491
  "type": {
602
- "text": "boolean"
492
+ "text": "'emphasized' | null"
603
493
  },
604
- "default": "false",
605
- "description": "Vis en ramme rundt hele komponenten"
494
+ "default": "null",
495
+ "description": "Bestemmer sterkere bakgrunnsfarge"
606
496
  },
607
497
  {
608
498
  "kind": "field",
609
- "name": "compact",
499
+ "name": "leftStroke",
610
500
  "type": {
611
501
  "text": "boolean"
612
502
  },
613
503
  "default": "false",
614
- "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre"
504
+ "description": "Ramme linje til venstre"
615
505
  },
616
506
  {
617
507
  "kind": "field",
@@ -620,73 +510,151 @@
620
510
  "text": "array"
621
511
  },
622
512
  "static": true,
623
- "default": "[SlDetails.styles, styles]"
513
+ "default": "[ SlAlert.styles, // we have to have this otherwise closable is not working styles, ]"
624
514
  },
625
515
  {
626
516
  "kind": "method",
627
- "name": "handleSummaryClick",
628
- "privacy": "private",
517
+ "name": "updated",
629
518
  "parameters": [
630
519
  {
631
- "name": "event",
520
+ "name": "changedProperties",
632
521
  "type": {
633
- "text": "MouseEvent"
522
+ "text": "PropertyValues"
634
523
  }
635
524
  }
636
- ],
525
+ ]
526
+ },
527
+ {
528
+ "kind": "method",
529
+ "name": "restartAutoHide",
530
+ "privacy": "private",
637
531
  "inheritedFrom": {
638
- "name": "SlDetails"
532
+ "name": "SlAlert"
639
533
  }
640
534
  },
641
535
  {
642
536
  "kind": "method",
643
- "name": "handleSummaryKeyDown",
537
+ "name": "pauseAutoHide",
644
538
  "privacy": "private",
645
- "parameters": [
646
- {
647
- "name": "event",
648
- "type": {
649
- "text": "KeyboardEvent"
650
- }
651
- }
652
- ],
653
539
  "inheritedFrom": {
654
- "name": "SlDetails"
540
+ "name": "SlAlert"
541
+ }
542
+ },
543
+ {
544
+ "kind": "method",
545
+ "name": "resumeAutoHide",
546
+ "privacy": "private",
547
+ "inheritedFrom": {
548
+ "name": "SlAlert"
549
+ }
550
+ },
551
+ {
552
+ "kind": "method",
553
+ "name": "handleCountdownChange",
554
+ "privacy": "private",
555
+ "inheritedFrom": {
556
+ "name": "SlAlert"
557
+ }
558
+ },
559
+ {
560
+ "kind": "method",
561
+ "name": "handleCloseClick",
562
+ "privacy": "private",
563
+ "inheritedFrom": {
564
+ "name": "SlAlert"
655
565
  }
656
566
  },
657
567
  {
658
568
  "kind": "method",
659
569
  "name": "handleOpenChange",
660
570
  "inheritedFrom": {
661
- "name": "SlDetails"
571
+ "name": "SlAlert"
572
+ }
573
+ },
574
+ {
575
+ "kind": "method",
576
+ "name": "handleDurationChange",
577
+ "inheritedFrom": {
578
+ "name": "SlAlert"
579
+ }
580
+ },
581
+ {
582
+ "kind": "method",
583
+ "name": "show",
584
+ "description": "Shows the alert.",
585
+ "inheritedFrom": {
586
+ "name": "SlAlert"
587
+ }
588
+ },
589
+ {
590
+ "kind": "method",
591
+ "name": "hide",
592
+ "description": "Hides the alert",
593
+ "inheritedFrom": {
594
+ "name": "SlAlert"
595
+ }
596
+ },
597
+ {
598
+ "kind": "method",
599
+ "name": "toast",
600
+ "description": "Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.",
601
+ "inheritedFrom": {
602
+ "name": "SlAlert"
603
+ }
604
+ },
605
+ {
606
+ "kind": "field",
607
+ "name": "dependencies",
608
+ "type": {
609
+ "text": "object"
610
+ },
611
+ "static": true,
612
+ "default": "{ 'sl-icon-button': SlIconButton }",
613
+ "inheritedFrom": {
614
+ "name": "SlAlert"
615
+ }
616
+ },
617
+ {
618
+ "kind": "field",
619
+ "name": "autoHideTimeout",
620
+ "type": {
621
+ "text": "number"
622
+ },
623
+ "privacy": "private",
624
+ "inheritedFrom": {
625
+ "name": "SlAlert"
662
626
  }
663
627
  },
664
628
  {
665
- "kind": "method",
666
- "name": "show",
667
- "description": "Shows the details.",
629
+ "kind": "field",
630
+ "name": "remainingTimeInterval",
631
+ "type": {
632
+ "text": "number"
633
+ },
634
+ "privacy": "private",
668
635
  "inheritedFrom": {
669
- "name": "SlDetails"
636
+ "name": "SlAlert"
670
637
  }
671
638
  },
672
639
  {
673
- "kind": "method",
674
- "name": "hide",
675
- "description": "Hides the details",
640
+ "kind": "field",
641
+ "name": "countdownAnimation",
642
+ "type": {
643
+ "text": "Animation | undefined"
644
+ },
645
+ "privacy": "private",
676
646
  "inheritedFrom": {
677
- "name": "SlDetails"
647
+ "name": "SlAlert"
678
648
  }
679
649
  },
680
650
  {
681
651
  "kind": "field",
682
- "name": "dependencies",
683
- "type": {
684
- "text": "object"
685
- },
686
- "static": true,
687
- "default": "{ 'sl-icon': SlIcon }",
652
+ "name": "hasSlotController",
653
+ "privacy": "private",
654
+ "readonly": true,
655
+ "default": "new HasSlotController(this, 'icon', 'suffix')",
688
656
  "inheritedFrom": {
689
- "name": "SlDetails"
657
+ "name": "SlAlert"
690
658
  }
691
659
  },
692
660
  {
@@ -696,144 +664,169 @@
696
664
  "readonly": true,
697
665
  "default": "new LocalizeController(this)",
698
666
  "inheritedFrom": {
699
- "name": "SlDetails"
667
+ "name": "SlAlert"
700
668
  }
701
669
  },
702
670
  {
703
671
  "kind": "field",
704
- "name": "details",
672
+ "name": "currentToastStack",
705
673
  "type": {
706
- "text": "HTMLDetailsElement"
674
+ "text": "HTMLDivElement"
707
675
  },
676
+ "privacy": "private",
677
+ "static": true,
708
678
  "inheritedFrom": {
709
- "name": "SlDetails"
679
+ "name": "SlAlert"
710
680
  }
711
681
  },
712
682
  {
713
683
  "kind": "field",
714
- "name": "header",
715
- "type": {
716
- "text": "HTMLElement"
717
- },
684
+ "name": "toastStack",
685
+ "privacy": "private",
686
+ "static": true,
687
+ "readonly": true,
718
688
  "inheritedFrom": {
719
- "name": "SlDetails"
689
+ "name": "SlAlert"
720
690
  }
721
691
  },
722
692
  {
723
693
  "kind": "field",
724
- "name": "body",
694
+ "name": "base",
725
695
  "type": {
726
696
  "text": "HTMLElement"
727
697
  },
728
698
  "inheritedFrom": {
729
- "name": "SlDetails"
699
+ "name": "SlAlert"
730
700
  }
731
701
  },
732
702
  {
733
703
  "kind": "field",
734
- "name": "expandIconSlot",
704
+ "name": "countdownElement",
735
705
  "type": {
736
- "text": "HTMLSlotElement"
706
+ "text": "HTMLElement"
737
707
  },
738
708
  "inheritedFrom": {
739
- "name": "SlDetails"
709
+ "name": "SlAlert"
740
710
  }
741
711
  },
742
712
  {
743
713
  "kind": "field",
744
- "name": "detailsObserver",
714
+ "name": "open",
745
715
  "type": {
746
- "text": "MutationObserver"
716
+ "text": "boolean"
747
717
  },
718
+ "default": "false",
719
+ "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
720
+ "attribute": "open",
721
+ "reflects": true,
748
722
  "inheritedFrom": {
749
- "name": "SlDetails"
723
+ "name": "SlAlert"
750
724
  }
751
725
  },
752
726
  {
753
727
  "kind": "field",
754
- "name": "open",
728
+ "name": "closable",
755
729
  "type": {
756
730
  "text": "boolean"
757
731
  },
758
732
  "default": "false",
759
- "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
760
- "attribute": "open",
733
+ "description": "Enables a close button that allows the user to dismiss the alert.",
734
+ "attribute": "closable",
761
735
  "reflects": true,
762
736
  "inheritedFrom": {
763
- "name": "SlDetails"
737
+ "name": "SlAlert"
764
738
  }
765
739
  },
766
740
  {
767
741
  "kind": "field",
768
- "name": "summary",
742
+ "name": "variant",
769
743
  "type": {
770
- "text": "string"
744
+ "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
771
745
  },
772
- "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
773
- "attribute": "summary",
746
+ "default": "'primary'",
747
+ "description": "The alert's theme variant.",
748
+ "attribute": "variant",
749
+ "reflects": true,
774
750
  "inheritedFrom": {
775
- "name": "SlDetails"
751
+ "name": "SlAlert"
776
752
  }
777
753
  },
778
754
  {
779
755
  "kind": "field",
780
- "name": "disabled",
756
+ "name": "duration",
757
+ "default": "Infinity",
758
+ "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
759
+ "attribute": "duration",
760
+ "inheritedFrom": {
761
+ "name": "SlAlert"
762
+ }
763
+ },
764
+ {
765
+ "kind": "field",
766
+ "name": "countdown",
781
767
  "type": {
782
- "text": "boolean"
768
+ "text": "'rtl' | 'ltr' | undefined"
783
769
  },
784
- "default": "false",
785
- "description": "Disables the details so it can't be toggled.",
786
- "attribute": "disabled",
770
+ "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
771
+ "attribute": "countdown",
787
772
  "reflects": true,
788
773
  "inheritedFrom": {
789
- "name": "SlDetails"
774
+ "name": "SlAlert"
775
+ }
776
+ },
777
+ {
778
+ "kind": "field",
779
+ "name": "remainingTime",
780
+ "privacy": "private",
781
+ "inheritedFrom": {
782
+ "name": "SlAlert"
790
783
  }
791
784
  }
792
785
  ],
793
786
  "superclass": {
794
- "name": "SlDetails",
795
- "package": "@shoelace-style/shoelace"
787
+ "name": "SlAlert",
788
+ "package": "@shoelace-style/shoelace/dist/components/alert/alert.js"
796
789
  },
797
- "tagNameWithoutPrefix": "accordion-item",
798
- "tagName": "nve-accordion-item",
790
+ "tagNameWithoutPrefix": "alert",
791
+ "tagName": "nve-alert",
799
792
  "customElement": true,
800
- "jsDoc": "/**\n * Viser et kort sammendrag og utvides for å vise ekstra innhold.\n * Kan brukes som en selvstendig komponent eller som en del av nve-accordion.\n */",
801
- "modulePath": "src/components/nve-accordion-item/nve-accordion-item.component.ts",
793
+ "jsDoc": "/**\n * Brukes til å vise viktige beskjeder enten en side eller som en enkel popup.\n * Hvis du trenger å vise en statisk varsling med mer informasjon, kan det hende at\n * nve-message-card er et bedre valg.\n */",
794
+ "modulePath": "src/components/nve-alert/nve-alert.component.ts",
802
795
  "cssProperties": [],
803
796
  "cssParts": [
804
797
  {
805
798
  "description": "The component's base wrapper.",
806
799
  "name": "base",
807
800
  "inheritedFrom": {
808
- "name": "SlDetails"
801
+ "name": "SlAlert"
809
802
  }
810
803
  },
811
804
  {
812
- "description": "The header that wraps both the summary and the expand/collapse icon.",
813
- "name": "header",
805
+ "description": "The container that wraps the optional icon.",
806
+ "name": "icon",
814
807
  "inheritedFrom": {
815
- "name": "SlDetails"
808
+ "name": "SlAlert"
816
809
  }
817
810
  },
818
811
  {
819
- "description": "The container that wraps the summary.",
820
- "name": "summary",
812
+ "description": "The container that wraps the alert's main content.",
813
+ "name": "message",
821
814
  "inheritedFrom": {
822
- "name": "SlDetails"
815
+ "name": "SlAlert"
823
816
  }
824
817
  },
825
818
  {
826
- "description": "The container that wraps the expand/collapse icons.",
827
- "name": "summary-icon",
819
+ "description": "The close button, an `<sl-icon-button>`.",
820
+ "name": "close-button",
828
821
  "inheritedFrom": {
829
- "name": "SlDetails"
822
+ "name": "SlAlert"
830
823
  }
831
824
  },
832
825
  {
833
- "description": "The details content.",
834
- "name": "content",
826
+ "description": "The close button's exported `base` part.",
827
+ "name": "close-button__base",
835
828
  "inheritedFrom": {
836
- "name": "SlDetails"
829
+ "name": "SlAlert"
837
830
  }
838
831
  }
839
832
  ],
@@ -845,101 +838,108 @@
845
838
  "text": "boolean"
846
839
  },
847
840
  "default": "false",
848
- "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
841
+ "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
849
842
  "fieldName": "open",
850
843
  "inheritedFrom": {
851
- "name": "SlDetails"
844
+ "name": "SlAlert"
852
845
  }
853
846
  },
854
847
  {
855
- "name": "summary",
848
+ "name": "closable",
856
849
  "type": {
857
- "text": "string"
850
+ "text": "boolean"
858
851
  },
859
- "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
860
- "fieldName": "summary",
852
+ "default": "false",
853
+ "description": "Enables a close button that allows the user to dismiss the alert.",
854
+ "fieldName": "closable",
861
855
  "inheritedFrom": {
862
- "name": "SlDetails"
856
+ "name": "SlAlert"
863
857
  }
864
858
  },
865
859
  {
866
- "name": "disabled",
860
+ "name": "variant",
867
861
  "type": {
868
- "text": "boolean"
862
+ "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
869
863
  },
870
- "default": "false",
871
- "description": "Disables the details so it can't be toggled.",
872
- "fieldName": "disabled",
864
+ "default": "'primary'",
865
+ "description": "The alert's theme variant.",
866
+ "fieldName": "variant",
873
867
  "inheritedFrom": {
874
- "name": "SlDetails"
868
+ "name": "SlAlert"
869
+ }
870
+ },
871
+ {
872
+ "name": "duration",
873
+ "default": "Infinity",
874
+ "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
875
+ "fieldName": "duration",
876
+ "inheritedFrom": {
877
+ "name": "SlAlert"
878
+ }
879
+ },
880
+ {
881
+ "name": "countdown",
882
+ "type": {
883
+ "text": "'rtl' | 'ltr' | undefined"
884
+ },
885
+ "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
886
+ "fieldName": "countdown",
887
+ "inheritedFrom": {
888
+ "name": "SlAlert"
875
889
  }
876
890
  }
877
891
  ],
878
892
  "events": [
879
893
  {
880
- "description": "Emitted when the details opens.",
894
+ "description": "Emitted when the alert opens.",
881
895
  "name": "sl-show",
882
896
  "reactName": "onSlShow",
883
897
  "eventName": "SlShowEvent",
884
898
  "inheritedFrom": {
885
- "name": "SlDetails"
899
+ "name": "SlAlert"
886
900
  }
887
901
  },
888
902
  {
889
- "description": "Emitted after the details opens and all animations are complete.",
903
+ "description": "Emitted after the alert opens and all animations are complete.",
890
904
  "name": "sl-after-show",
891
905
  "reactName": "onSlAfterShow",
892
906
  "eventName": "SlAfterShowEvent",
893
907
  "inheritedFrom": {
894
- "name": "SlDetails"
908
+ "name": "SlAlert"
895
909
  }
896
910
  },
897
911
  {
898
- "description": "Emitted when the details closes.",
912
+ "description": "Emitted when the alert closes.",
899
913
  "name": "sl-hide",
900
914
  "reactName": "onSlHide",
901
915
  "eventName": "SlHideEvent",
902
916
  "inheritedFrom": {
903
- "name": "SlDetails"
917
+ "name": "SlAlert"
904
918
  }
905
919
  },
906
920
  {
907
- "description": "Emitted after the details closes and all animations are complete.",
921
+ "description": "Emitted after the alert closes and all animations are complete.",
908
922
  "name": "sl-after-hide",
909
923
  "reactName": "onSlAfterHide",
910
924
  "eventName": "SlAfterHideEvent",
911
925
  "inheritedFrom": {
912
- "name": "SlDetails"
926
+ "name": "SlAlert"
913
927
  }
914
928
  }
915
929
  ],
916
930
  "slots": [
917
931
  {
918
- "description": "The details' main content.",
932
+ "description": "The alert's main content.",
919
933
  "name": "",
920
934
  "inheritedFrom": {
921
- "name": "SlDetails"
922
- }
923
- },
924
- {
925
- "description": "The details' summary. Alternatively, you can use the `summary` attribute.",
926
- "name": "summary",
927
- "inheritedFrom": {
928
- "name": "SlDetails"
929
- }
930
- },
931
- {
932
- "description": "Optional expand icon to use instead of the default. Works best with `<sl-icon>`.",
933
- "name": "expand-icon",
934
- "inheritedFrom": {
935
- "name": "SlDetails"
935
+ "name": "SlAlert"
936
936
  }
937
937
  },
938
938
  {
939
- "description": "Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.",
940
- "name": "collapse-icon",
939
+ "description": "An icon to show in the alert. Works best with `<sl-icon>`.",
940
+ "name": "icon",
941
941
  "inheritedFrom": {
942
- "name": "SlDetails"
942
+ "name": "SlAlert"
943
943
  }
944
944
  }
945
945
  ]
@@ -950,8 +950,8 @@
950
950
  "kind": "js",
951
951
  "name": "default",
952
952
  "declaration": {
953
- "name": "NveAccordionItem",
954
- "module": "components/nve-accordion-item/nve-accordion-item.js"
953
+ "name": "NveAlert",
954
+ "module": "components/nve-alert/nve-alert.js"
955
955
  }
956
956
  }
957
957
  ]
@@ -14571,7 +14571,7 @@
14571
14571
  "package": {
14572
14572
  "name": "nve-designsystem",
14573
14573
  "description": "Designsystem for NVE",
14574
- "version": "1.7.0",
14574
+ "version": "1.8.0",
14575
14575
  "author": {
14576
14576
  "name": "NVE",
14577
14577
  "email": "nve@nve.no"
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  },
8
8
  "license": "MIT",
9
9
  "homepage": "https://github.com/NVE/Designsystem/",
10
- "version": "1.8.0",
10
+ "version": "1.9.0",
11
11
  "customElements": "custom-elements.json",
12
12
  "exports": {
13
13
  ".": {