nve-designsystem 3.1.0 → 3.3.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.
Files changed (197) hide show
  1. package/chunks/chunk.2PCBEMQZ.js +163 -226
  2. package/chunks/chunk.36O46B5H.js +15 -15
  3. package/chunks/chunk.4TUIT776.js +78 -96
  4. package/chunks/chunk.5JY5FUCG.js +965 -1245
  5. package/chunks/chunk.5P45LHIX.js +668 -96
  6. package/chunks/chunk.6CTB5ZDJ.js +107 -100
  7. package/chunks/chunk.B4BZKR24.js +29 -39
  8. package/chunks/chunk.D5YQDJ7X.js +122 -166
  9. package/chunks/chunk.EA437WHD.js +5 -5
  10. package/chunks/chunk.GI7VDIWX.js +14 -15
  11. package/chunks/chunk.GMYPQTFK.js +18 -20
  12. package/chunks/chunk.HVTXQL7M.js +191 -215
  13. package/chunks/chunk.IKV4VH3T.js +18 -16
  14. package/chunks/chunk.IVVHNXMC.js +26 -27
  15. package/chunks/chunk.JHOXTQXA.js +65 -74
  16. package/chunks/chunk.JXOKFADN.js +63 -90
  17. package/chunks/chunk.K7JGTRV7.js +24 -23
  18. package/chunks/chunk.KPLQLAWP.js +132 -147
  19. package/chunks/chunk.LD4M4QGE.js +61 -74
  20. package/chunks/chunk.MSKEYBDI.js +53 -71
  21. package/chunks/chunk.NYIIDP5N.js +39 -45
  22. package/chunks/chunk.RWUUFNUL.js +91 -114
  23. package/chunks/chunk.SAPQLUO4.js +249 -228
  24. package/chunks/chunk.SI4ACBFK.js +139 -5
  25. package/chunks/chunk.TP2GB2HO.js +361 -460
  26. package/chunks/chunk.UDWRA64J.js +185 -223
  27. package/chunks/chunk.URTPIBTY.js +119 -151
  28. package/chunks/chunk.VESXC477.js +63 -66
  29. package/chunks/chunk.XA43ZQPC.js +198 -313
  30. package/chunks/chunk.XQ2OKYYA.js +25 -26
  31. package/chunks/chunk.XZNBUGX7.js +6 -6
  32. package/chunks/chunk.YHLNUJ7P.js +93 -116
  33. package/chunks/chunk.ZH2AND3P.js +340 -399
  34. package/chunks/chunk.ZL53POKZ.js +61 -156
  35. package/chunks/chunk.js +20 -0
  36. package/chunks/class-map.js +49 -45
  37. package/chunks/decorate.js +105 -0
  38. package/chunks/directive-helpers.js +5 -7
  39. package/chunks/if-defined.js +5 -5
  40. package/chunks/lit.js +525 -0
  41. package/chunks/live.js +24 -24
  42. package/chunks/nve-alert.component.js +163 -0
  43. package/chunks/nve-carousel-item.component.js +36 -0
  44. package/chunks/nve-carousel.component.js +41 -0
  45. package/chunks/nve-checkbox-group.component.js +114 -0
  46. package/chunks/nve-checkbox.component.js +28 -0
  47. package/chunks/nve-dialog.component.js +39 -0
  48. package/chunks/nve-divider.component.js +23 -0
  49. package/chunks/nve-drawer.component.js +40 -0
  50. package/chunks/nve-dropdown.component.js +83 -0
  51. package/chunks/nve-input.component.js +80 -0
  52. package/chunks/nve-label.component.js +89 -0
  53. package/chunks/nve-menu-item.component.js +35 -0
  54. package/chunks/nve-menu.component.js +17 -0
  55. package/chunks/nve-option.component.js +27 -0
  56. package/chunks/nve-popup.component.js +15 -0
  57. package/chunks/nve-radio-button.component.js +20 -0
  58. package/chunks/nve-radio-group.component.js +78 -0
  59. package/chunks/nve-radio.component.js +18 -0
  60. package/chunks/nve-select.component.js +58 -0
  61. package/chunks/nve-skeleton.component.js +20 -0
  62. package/chunks/nve-spinner.component.js +23 -0
  63. package/chunks/nve-tooltip.component.js +20 -0
  64. package/chunks/nve-warning-level.component.js +57 -0
  65. package/chunks/ref.js +75 -84
  66. package/chunks/shoelace.js +10006 -0
  67. package/chunks/static-html.js +27 -0
  68. package/chunks/unsafe-html.js +24 -20
  69. package/chunks/updateInvalidProperty.js +7 -7
  70. package/chunks/watch.js +20 -20
  71. package/components/nve-accordion/nve-accordion.component.js +24 -30
  72. package/components/nve-accordion-item/nve-accordion-item.component.js +30 -64
  73. package/components/nve-accordion-item/nve-accordion-item.styles.js +5 -5
  74. package/components/nve-alert/nve-alert.component.js +2 -227
  75. package/components/nve-alert/nve-alert.styles.js +45 -27
  76. package/components/nve-badge/nve-badge.component.js +41 -45
  77. package/components/nve-badge/nve-badge.styles.js +33 -31
  78. package/components/nve-button/nve-button.component.d.ts +110 -10
  79. package/components/nve-button/nve-button.component.js +146 -39
  80. package/components/nve-button/nve-button.styles.js +214 -157
  81. package/components/nve-carousel/nve-carousel.component.js +2 -47
  82. package/components/nve-carousel/nve-carousel.styles.js +6 -6
  83. package/components/nve-carousel-item/nve-carousel-item.component.js +2 -40
  84. package/components/nve-carousel-item/nve-carousel-item.styles.js +5 -5
  85. package/components/nve-carousel-thumbnail/nve-carousel-thumbnail.component.js +44 -54
  86. package/components/nve-carousel-thumbnail/nve-carousel-thumbnail.styles.js +5 -5
  87. package/components/nve-checkbox/nve-checkbox.component.js +2 -34
  88. package/components/nve-checkbox/nve-checkbox.styles.js +7 -7
  89. package/components/nve-checkbox-group/nve-checkbox-group.component.js +2 -152
  90. package/components/nve-checkbox-group/nve-checkbox-group.styles.js +5 -5
  91. package/components/nve-combobox/nve-combobox.component.js +222 -440
  92. package/components/nve-combobox/nve-combobox.styles.js +6 -6
  93. package/components/nve-darkmode-switch/nve-darkmode-switch.component.js +32 -38
  94. package/components/nve-dialog/nve-dialog-styles.js +6 -6
  95. package/components/nve-dialog/nve-dialog.component.js +2 -54
  96. package/components/nve-divider/nve-divider.component.js +2 -30
  97. package/components/nve-drawer/nve-drawer.component.js +2 -44
  98. package/components/nve-drawer/nve-drawer.styles.js +6 -6
  99. package/components/nve-dropdown/nve-dropdown.component.js +2 -79
  100. package/components/nve-dropdown/nve-dropdown.styles.js +5 -5
  101. package/components/nve-heading/nve-heading.component.d.ts +29 -0
  102. package/components/nve-heading/nve-heading.component.js +45 -0
  103. package/components/nve-heading/nve-heading.styles.d.ts +2 -0
  104. package/components/nve-heading/nve-heading.styles.js +41 -0
  105. package/components/nve-icon/nve-icon.component.js +145 -164
  106. package/components/nve-icon/nve-icon.styles.js +11 -6
  107. package/components/nve-icon/offline-icons.js +16 -13
  108. package/components/nve-input/nve-input.component.js +2 -100
  109. package/components/nve-input/nve-input.styles.js +5 -5
  110. package/components/nve-label/nve-label.component.js +2 -115
  111. package/components/nve-label/nve-label.styles.js +5 -5
  112. package/components/nve-link-card/nve-link-card.component.d.ts +5 -2
  113. package/components/nve-link-card/nve-link-card.component.js +44 -80
  114. package/components/nve-link-card/nve-link-card.styles.js +71 -66
  115. package/components/nve-menu/nve-menu.component.js +2 -22
  116. package/components/nve-menu/nve-menu.styles.js +5 -5
  117. package/components/nve-menu-item/nve-menu-item.component.js +2 -43
  118. package/components/nve-menu-item/nve-menu-item.styles.js +7 -7
  119. package/components/nve-message-card/nve-message-card.component.js +61 -91
  120. package/components/nve-message-card/nve-message-card.styles.js +24 -27
  121. package/components/nve-navigation-card/nve-navigation-card.component.d.ts +52 -0
  122. package/components/nve-navigation-card/nve-navigation-card.component.js +60 -0
  123. package/components/nve-navigation-card/nve-navigation-card.styles.d.ts +2 -0
  124. package/components/nve-navigation-card/nve-navigation-card.styles.js +112 -0
  125. package/components/nve-option/nve-option.component.js +2 -41
  126. package/components/nve-option/nve-option.styles.js +5 -5
  127. package/components/nve-paragraph/nve-paragraph.component.d.ts +26 -0
  128. package/components/nve-paragraph/nve-paragraph.component.js +26 -0
  129. package/components/nve-paragraph/nve-paragraph.styles.d.ts +2 -0
  130. package/components/nve-paragraph/nve-paragraph.styles.js +105 -0
  131. package/components/nve-popup/nve-popup.component.js +2 -22
  132. package/components/nve-radio/nve-radio.component.js +2 -23
  133. package/components/nve-radio/nve-radio.styles.js +5 -5
  134. package/components/nve-radio-button/nve-radio-button.component.js +2 -25
  135. package/components/nve-radio-button/nve-radio-button.styles.js +5 -5
  136. package/components/nve-radio-group/nve-radio-group.component.js +2 -119
  137. package/components/nve-radio-group/nve-radio-group.styles.js +5 -5
  138. package/components/nve-relative-time/nve-relative-time.component.js +21 -56
  139. package/components/nve-relative-time/nve-relative-time.styles.js +5 -5
  140. package/components/nve-select/nve-select.component.js +2 -80
  141. package/components/nve-select/nve-select.styles.js +6 -6
  142. package/components/nve-skeleton/nve-skeleton.component.js +2 -27
  143. package/components/nve-skeleton/nve-skeleton.styles.js +5 -5
  144. package/components/nve-spinner/nve-spinner.component.js +2 -31
  145. package/components/nve-stepper/nve-step/nve-step.component.js +113 -173
  146. package/components/nve-stepper/nve-step/nve-step.styles.js +12 -12
  147. package/components/nve-stepper/nve-stepper-mobile.component.js +37 -49
  148. package/components/nve-stepper/nve-stepper-mobile.styles.js +7 -7
  149. package/components/nve-stepper/nve-stepper.component.js +94 -139
  150. package/components/nve-stepper/nve-stepper.styles.js +5 -5
  151. package/components/nve-switch/nve-switch.component.js +75 -107
  152. package/components/nve-switch/nve-switch.styles.js +7 -7
  153. package/components/nve-tab/nve-tab.component.js +30 -42
  154. package/components/nve-tab/nve-tab.styles.js +7 -7
  155. package/components/nve-tab-group/nve-tab-group.component.js +180 -260
  156. package/components/nve-tab-group/nve-tab-group.styles.js +5 -5
  157. package/components/nve-tab-panel/nve-tab-panel.component.js +21 -31
  158. package/components/nve-tab-panel/nve-tab-panel.styles.js +5 -5
  159. package/components/nve-tag/nve-tag.component.d.ts +3 -3
  160. package/components/nve-tag/nve-tag.component.js +71 -72
  161. package/components/nve-tag/nve-tag.styles.js +23 -22
  162. package/components/nve-textarea/nve-textarea.component.d.ts +3 -1
  163. package/components/nve-textarea/nve-textarea.component.js +112 -173
  164. package/components/nve-textarea/nve-textarea.styles.js +10 -5
  165. package/components/nve-tooltip/nve-tooltip.component.js +2 -30
  166. package/components/nve-tooltip/nve-tooltip.styles.js +5 -5
  167. package/components/nve-warning-level/nve-warning-level.component.js +2 -78
  168. package/components/nve-warning-level/nve-warning-level.styles.js +7 -7
  169. package/css/global.css +13 -55
  170. package/css/nve.css +1048 -393
  171. package/css/nve_dark.css +406 -305
  172. package/css/rme.css +1050 -395
  173. package/css/rme_dark.css +408 -307
  174. package/css/shoelace-styles.css +539 -0
  175. package/css/varsom.css +1046 -391
  176. package/css/varsom_dark.css +404 -303
  177. package/custom-elements.json +2905 -12389
  178. package/fonts/LICENSE.txt +37 -0
  179. package/fonts/SourceSans3-VariableFont_wght.woff2 +0 -0
  180. package/interfaces/NveComponent.interface.js +0 -1
  181. package/nve-designsystem.d.ts +5 -0
  182. package/nve-designsystem.js +46 -86
  183. package/package.json +26 -8
  184. package/registerIcons/systemLibraryCustomization.js +23 -91
  185. package/vite-env.d.js +0 -1
  186. package/chunks/chunk.3RPBFEDE.js +0 -162
  187. package/chunks/chunk.JCXLDPQF.js +0 -225
  188. package/chunks/chunk.JQBT7BOV.js +0 -8446
  189. package/chunks/chunk.MAQXLKQ7.js +0 -598
  190. package/chunks/lit-element.js +0 -508
  191. package/chunks/property.js +0 -37
  192. package/chunks/query.js +0 -13
  193. package/chunks/state.js +0 -7
  194. package/chunks/static.js +0 -26
  195. package/nve-designsystem.css +0 -1
  196. package/vscode.css-custom-data.json +0 -621
  197. package/vscode.html-custom-data.json +0 -2354
@@ -1,2354 +0,0 @@
1
- {
2
- "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
3
- "version": 1.1,
4
- "tags": [
5
- {
6
- "name": "nve-accordion",
7
- "description": "En gruppering av nve-accordion-item slik at de sammen fungerer som et accordion.\nKomponenten vil sørge for at kun en nve-accordion-item kan være åpen om gangen.\nKomponenten har ingen egen utforming, den viser kun det som er inni.\n---\n\n\n### **Spor:**\n - **(default)** - legg alle nve-accordion-item inne denne for å kunne kontrollere dem",
8
- "attributes": [{ "name": "testId", "description": "", "values": [] }],
9
- "references": [
10
- {
11
- "name": "Mer info",
12
- "url": "https://designsystem.nve.no/components/nve-accordion"
13
- }
14
- ]
15
- },
16
- {
17
- "name": "nve-accordion-item",
18
- "description": "Viser et kort sammendrag og utvides for å vise ekstra innhold.\nKan brukes som en selvstendig komponent eller som en del av nve-accordion.\n---\n\n\n### **Hendelser:**\n - **sl-show** - Emitted when the details opens.\n- **sl-after-show** - Emitted after the details opens and all animations are complete.\n- **sl-hide** - Emitted when the details closes.\n- **sl-after-hide** - Emitted after the details closes and all animations are complete.\n\n### **Metoder:**\n - **show()** - Shows the details.\n- **hide()** - Hides the details\n\n### **Spor:**\n - _default_ - The details' main content.\n- **summary** - The details' summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sl-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.\n\n### **Deler:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **content** - The details content.",
19
- "attributes": [
20
- { "name": "testId", "description": "", "values": [] },
21
- {
22
- "name": "leftStroke",
23
- "description": "tykk strek på venstre side",
24
- "values": []
25
- },
26
- {
27
- "name": "variant",
28
- "description": "Setter farge på bakgrunn og tekst",
29
- "values": [
30
- { "name": "none" },
31
- { "name": "neutral" },
32
- { "name": "info" },
33
- { "name": "success" },
34
- { "name": "warning" },
35
- { "name": "error" }
36
- ]
37
- },
38
- {
39
- "name": "border",
40
- "description": "Vis en ramme rundt hele komponenten",
41
- "values": []
42
- },
43
- {
44
- "name": "compact",
45
- "description": "Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre",
46
- "values": []
47
- },
48
- {
49
- "name": "open",
50
- "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.",
51
- "values": []
52
- },
53
- {
54
- "name": "summary",
55
- "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
56
- "values": []
57
- },
58
- {
59
- "name": "disabled",
60
- "description": "Disables the details so it can't be toggled.",
61
- "values": []
62
- }
63
- ],
64
- "references": [
65
- {
66
- "name": "Mer info",
67
- "url": "https://designsystem.nve.no/components/nve-accordion-item"
68
- }
69
- ]
70
- },
71
- {
72
- "name": "nve-alert",
73
- "description": "Brukes til å vise viktige beskjeder som toast. Dette er en komponent som bruker alert-rollen.\nHvis du trenger å vise en statisk varsling med mer informasjon, bruk nve-message-card.\nLes mer i seksjonen om tilgjengelighet.\n---\n\n\n### **Hendelser:**\n - **sl-show** - Når alerten blir vist\n- **sl-hide** - Når alerten blir skjult\n- **sl-after-show** - Etter allerten er vist\n- **sl-after-hide** - Etter allerten er skjult\n\n### **Metoder:**\n - **show(): __** - Viser alerten med animasjon.\nSetter `open` til true, kjører visningsanimasjonen, og starter eventuell auto-hide timer.\nSender ut eventen `sl-after-show` når animasjonen er ferdig.\n- **hide(): __** - Skjuler alerten med animasjon.\nKjører skjuleanimasjonen før `open` settes til false.\nSender ut eventen `sl-after-hide` når animasjonen og oppdateringen er ferdig.\nStopper eventuell auto-hide timer.\n- **toast(): __** - Viser alerten som en toast-melding.\nLegger alerten i toast-stacken, venter til den er rendret, og viser den med animasjon.\nFjerner alerten fra toast-stacken når den skjules, og fjerner stacken hvis det ikke er flere alerts igjen.\n\n### **Spor:**\n - _default_ - tekst - Hoved teksten i alerten.\n- **icon** - Det første ikonet (til venstre).\n- **label** - Overskriften for alerten.\n\n### **Deler:**\n - **base** - Topp-element\n- **icon** - Ikonet til venstre\n- **label** - Overskriften\n- **message** - Hoved tekst",
74
- "attributes": [
75
- { "name": "testId", "description": "", "values": [] },
76
- { "name": "label", "description": "Overskriften", "values": [] },
77
- { "name": "text", "description": "Hoved tekst", "values": [] },
78
- {
79
- "name": "saturation",
80
- "description": "Bestemmer sterkere bakgrunnsfarge",
81
- "values": [{ "name": "emphasized" }]
82
- },
83
- {
84
- "name": "leftStroke",
85
- "description": "Ramme linje til venstre",
86
- "values": []
87
- },
88
- {
89
- "name": "variant",
90
- "description": "Bestemmer hvilken variant av alerten som skal brukes.",
91
- "values": [
92
- { "name": "primary" },
93
- { "name": "success" },
94
- { "name": "neutral" },
95
- { "name": "warning" },
96
- { "name": "danger" }
97
- ]
98
- },
99
- {
100
- "name": "closable",
101
- "description": "Om lukk knapp skal vises",
102
- "values": []
103
- },
104
- {
105
- "name": "open",
106
- "description": "Om alerten er åpen. Hvis sant alerten vises, ellers er den skjult.",
107
- "values": []
108
- },
109
- {
110
- "name": "duration",
111
- "description": "Hvor lenge alerten skal være åpen før den lukkes automatisk, i millisekunder. Altid er standard",
112
- "values": []
113
- },
114
- {
115
- "name": "buttonLabel",
116
- "description": "Aria label på knapp med kun ikone. Lukk er standard.",
117
- "values": []
118
- },
119
- {
120
- "name": "iconName",
121
- "description": "Navnet på ikonet som skal vises til venstre siden av alerten.",
122
- "values": []
123
- },
124
- {
125
- "name": "showIcon",
126
- "description": "Om variant ikonen skal vises",
127
- "values": [{ "name": "true" }, { "name": "false" }]
128
- }
129
- ],
130
- "references": [
131
- {
132
- "name": "Mer info",
133
- "url": "https://designsystem.nve.no/components/nve-alert"
134
- }
135
- ]
136
- },
137
- {
138
- "name": "nve-badge",
139
- "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.\n---\n",
140
- "attributes": [
141
- {
142
- "name": "variant",
143
- "description": "Variant",
144
- "values": [
145
- { "name": "" },
146
- { "name": "primary" },
147
- { "name": "success" },
148
- { "name": "neutral" },
149
- { "name": "warning" },
150
- { "name": "danger" },
151
- { "name": "brand" }
152
- ]
153
- },
154
- {
155
- "name": "size",
156
- "description": "Størrelse på komponenten",
157
- "values": [
158
- { "name": "small" },
159
- { "name": "medium" },
160
- { "name": "large" }
161
- ]
162
- },
163
- {
164
- "name": "saturation",
165
- "description": "Viser lav metning, default er at denne ikke er satt",
166
- "values": [{ "name": "subtle" }]
167
- }
168
- ],
169
- "references": [
170
- {
171
- "name": "Mer info",
172
- "url": "https://designsystem.nve.no/components/nve-badge"
173
- }
174
- ]
175
- },
176
- {
177
- "name": "nve-button",
178
- "description": "Selveste NVE-knappen.\nBruk href for å gjøre den om til en link.\nDisse feltene skal ikke brukes:caret og pill\nCircle attributte skal brukes kun når man viser bare et ikon.\n---\n\n\n### **Hendelser:**\n - **sl-blur** - Emitted when the button loses focus.\n- **sl-focus** - Emitted when the button gains focus.\n- **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Metoder:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Spor:**\n - _default_ - The button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n\n### **Deler:**\n - **base** - The component's base wrapper.\n- **prefix** - The container that wraps the prefix.\n- **label** - The button's label.\n- **suffix** - The container that wraps the suffix.\n- **caret** - The button's caret icon, an `<sl-icon>` element.\n- **spinner** - The spinner that shows when the button is in the loading state.",
179
- "attributes": [
180
- {
181
- "name": "size",
182
- "description": "",
183
- "values": [
184
- { "name": "small" },
185
- { "name": "medium" },
186
- { "name": "large" }
187
- ]
188
- },
189
- { "name": "testId", "description": "", "values": [] },
190
- { "name": "title", "values": [] },
191
- {
192
- "name": "variant",
193
- "description": "The button's theme variant.",
194
- "values": [
195
- { "name": "default" },
196
- { "name": "primary" },
197
- { "name": "success" },
198
- { "name": "neutral" },
199
- { "name": "warning" },
200
- { "name": "danger" },
201
- { "name": "text" }
202
- ]
203
- },
204
- {
205
- "name": "caret",
206
- "description": "Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior.",
207
- "values": []
208
- },
209
- {
210
- "name": "disabled",
211
- "description": "Disables the button.",
212
- "values": []
213
- },
214
- {
215
- "name": "loading",
216
- "description": "Draws the button in a loading state.",
217
- "values": []
218
- },
219
- {
220
- "name": "outline",
221
- "description": "Draws an outlined button.",
222
- "values": []
223
- },
224
- {
225
- "name": "pill",
226
- "description": "Draws a pill-style button with rounded edges.",
227
- "values": []
228
- },
229
- {
230
- "name": "circle",
231
- "description": "Draws a circular icon button. When this attribute is present, the button expects a single `<sl-icon>` in the\ndefault slot.",
232
- "values": []
233
- },
234
- {
235
- "name": "type",
236
- "description": "The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native\n`<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.",
237
- "values": [
238
- { "name": "button" },
239
- { "name": "submit" },
240
- { "name": "reset" }
241
- ]
242
- },
243
- {
244
- "name": "name",
245
- "description": "The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.\nThis attribute is ignored when `href` is present.",
246
- "values": []
247
- },
248
- {
249
- "name": "value",
250
- "description": "The value of the button, submitted as a pair with the button's name as part of the form data, but only when this\nbutton is the submitter. This attribute is ignored when `href` is present.",
251
- "values": []
252
- },
253
- {
254
- "name": "href",
255
- "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
256
- "values": []
257
- },
258
- {
259
- "name": "target",
260
- "description": "Tells the browser where to open the link. Only used when `href` is present.",
261
- "values": [
262
- { "name": "_blank" },
263
- { "name": "_parent" },
264
- { "name": "_self" },
265
- { "name": "_top" }
266
- ]
267
- },
268
- {
269
- "name": "rel",
270
- "description": "When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the\ndefault is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a\nspecific tab/window, this will prevent that from working correctly. You can remove or change the default value by\nsetting the attribute to an empty string or a value of your choice, respectively.",
271
- "values": []
272
- },
273
- {
274
- "name": "download",
275
- "description": "Tells the browser to download the linked file as this filename. Only used when `href` is present.",
276
- "values": []
277
- },
278
- {
279
- "name": "form",
280
- "description": "The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\nvalue of this attribute must be an id of a form in the same document or shadow root as the button.",
281
- "values": []
282
- },
283
- {
284
- "name": "formaction",
285
- "description": "Used to override the form owner's `action` attribute.",
286
- "values": []
287
- },
288
- {
289
- "name": "formenctype",
290
- "description": "Used to override the form owner's `enctype` attribute.",
291
- "values": [
292
- { "name": "application/x-www-form-urlencoded" },
293
- { "name": "multipart/form-data" },
294
- { "name": "text/plain" }
295
- ]
296
- },
297
- {
298
- "name": "formmethod",
299
- "description": "Used to override the form owner's `method` attribute.",
300
- "values": [{ "name": "post" }, { "name": "get" }]
301
- },
302
- {
303
- "name": "formnovalidate",
304
- "description": "Used to override the form owner's `novalidate` attribute.",
305
- "values": []
306
- },
307
- {
308
- "name": "formtarget",
309
- "description": "Used to override the form owner's `target` attribute.",
310
- "values": [
311
- { "name": "_self" },
312
- { "name": "_blank" },
313
- { "name": "_parent" },
314
- { "name": "_top" }
315
- ]
316
- }
317
- ],
318
- "references": [
319
- {
320
- "name": "Mer info",
321
- "url": "https://designsystem.nve.no/components/nve-button"
322
- }
323
- ]
324
- },
325
- {
326
- "name": "nve-carousel",
327
- "description": "En karusell for å vise bilder eller annet valgfritt innhold i en serie.\nNve-carousel støtter ikke propertien: orientation=\"vertical\".\n---\n\n\n### **Hendelser:**\n - **sl-slide-change** - Emitted when the active slide changes.\n\n### **Metoder:**\n - **previous(behavior: _ScrollBehavior_)** - Move the carousel backward by `slides-per-move` slides.\n- **next(behavior: _ScrollBehavior_)** - Move the carousel forward by `slides-per-move` slides.\n- **goToSlide(index: _number_, behavior: _ScrollBehavior_)** - Scrolls the carousel to the slide specified by `index`.\n\n### **Spor:**\n - _default_ - The carousel's main content, one or more `<sl-carousel-item>` elements.\n- **next-icon** - Optional next icon to use instead of the default. Works best with `<sl-icon>`.\n- **previous-icon** - Optional previous icon to use instead of the default. Works best with `<sl-icon>`.\n\n### **CSS-variabler:**\n - **--pagination-counter-color** - Fargen på sidetellerteksten. _(default: undefined)_\n- **--pagination-counter-bg-color** - Bakgrunnsfargen til pagineringstelleren. _(default: undefined)_\n- **--slide-gap** - The space between each slide. _(default: undefined)_\n- **--aspect-ratio** - The aspect ratio of each slide. _(default: 16/9)_\n- **--scroll-hint** - The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint. _(default: undefined)_\n\n### **Deler:**\n - **base** - The carousel's internal wrapper.\n- **scroll-container** - The scroll container that wraps the slides.\n- **pagination** - The pagination indicators wrapper.\n- **pagination-item** - The pagination indicator.\n- **pagination-item--active** - Applied when the item is active.\n- **navigation** - The navigation wrapper.\n- **navigation-button** - The navigation button.\n- **navigation-button--previous** - Applied to the previous button.\n- **navigation-button--next** - Applied to the next button.",
328
- "attributes": [
329
- { "name": "testId", "description": "", "values": [] },
330
- {
331
- "name": "paginationCounter",
332
- "description": "Dersom denne er satt vises en teller av typen \"1 / 4\" på karusellen.",
333
- "values": []
334
- },
335
- {
336
- "name": "loop",
337
- "description": "When set, allows the user to navigate the carousel in the same direction indefinitely.",
338
- "values": []
339
- },
340
- {
341
- "name": "navigation",
342
- "description": "When set, show the carousel's navigation.",
343
- "values": []
344
- },
345
- {
346
- "name": "pagination",
347
- "description": "When set, show the carousel's pagination indicators.",
348
- "values": []
349
- },
350
- {
351
- "name": "autoplay",
352
- "description": "When set, the slides will scroll automatically when the user is not interacting with them.",
353
- "values": []
354
- },
355
- {
356
- "name": "autoplay-interval",
357
- "description": "Specifies the amount of time, in milliseconds, between each automatic scroll.",
358
- "values": []
359
- },
360
- {
361
- "name": "slides-per-page",
362
- "description": "Specifies how many slides should be shown at a given time.",
363
- "values": []
364
- },
365
- {
366
- "name": "slides-per-move",
367
- "description": "Specifies the number of slides the carousel will advance when scrolling, useful when specifying a `slides-per-page`\ngreater than one. It can't be higher than `slides-per-page`.",
368
- "values": []
369
- },
370
- {
371
- "name": "orientation",
372
- "description": "Specifies the orientation in which the carousel will lay out.",
373
- "values": [{ "name": "horizontal" }, { "name": "vertical" }]
374
- },
375
- {
376
- "name": "mouse-dragging",
377
- "description": "When set, it is possible to scroll through the slides by dragging them with the mouse.",
378
- "values": []
379
- }
380
- ],
381
- "references": [
382
- {
383
- "name": "Mer info",
384
- "url": "https://designsystem.nve.no/components/nve-carousel"
385
- }
386
- ]
387
- },
388
- {
389
- "name": "nve-carousel-item",
390
- "description": "Et karusellelement som representerer bilder eller annet valgfritt innhold i en karusell.\nBruk propertien \"description\" for å legge på bildetekst under bildet.\nAnbefaler å bare godta liggende eller stående formater på bilder i karusellen for best layout.\n---\n\n\n### **Spor:**\n - _default_ - The carousel item's content..\n\n### **CSS-variabler:**\n - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_",
391
- "attributes": [
392
- { "name": "testId", "description": "", "values": [] },
393
- {
394
- "name": "description",
395
- "description": "Brukes til å legge på beskrivelse på bildene.",
396
- "values": []
397
- }
398
- ],
399
- "references": [
400
- {
401
- "name": "Mer info",
402
- "url": "https://designsystem.nve.no/components/nve-carousel-item"
403
- }
404
- ]
405
- },
406
- {
407
- "name": "nve-carousel-thumbnail",
408
- "description": "En rekke med miniatyrbilder som brukes til å forhåndsvise bildene i nve-carousel.\nDefiner en lik id på nve-carousel og nve-carousel-thumbnail for å koble komponentene sammen.\n---\n",
409
- "attributes": [
410
- { "name": "testId", "description": "", "values": [] },
411
- {
412
- "name": "carouselId",
413
- "description": "Brukes til å targete riktig karusell som skal kobles opp mot thumbnailsene.",
414
- "values": [{ "name": "''" }]
415
- }
416
- ],
417
- "references": [
418
- {
419
- "name": "Mer info",
420
- "url": "https://designsystem.nve.no/components/nve-carousel-thumbnail"
421
- }
422
- ]
423
- },
424
- {
425
- "name": "nve-checkbox",
426
- "description": "En avkrysningsboks.\nIkke bruk `size`, i NVE bruker vi kun en størrelse på avkrysningsbokser.\n---\n\n\n### **Hendelser:**\n - **sl-blur** - Emitted when the checkbox loses focus.\n- **sl-change** - Emitted when the checked state changes.\n- **sl-focus** - Emitted when the checkbox gains focus.\n- **sl-input** - Emitted when the checkbox receives input.\n- **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Metoder:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Spor:**\n - _default_ - The checkbox's label.\n- **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n\n### **Deler:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<sl-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<sl-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **form-control-help-text** - The help text's wrapper.",
427
- "attributes": [
428
- { "name": "title", "values": [] },
429
- {
430
- "name": "name",
431
- "description": "The name of the checkbox, submitted as a name/value pair with form data.",
432
- "values": []
433
- },
434
- {
435
- "name": "value",
436
- "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
437
- "values": []
438
- },
439
- {
440
- "name": "size",
441
- "description": "The checkbox's size.",
442
- "values": [
443
- { "name": "small" },
444
- { "name": "medium" },
445
- { "name": "large" }
446
- ]
447
- },
448
- {
449
- "name": "disabled",
450
- "description": "Disables the checkbox.",
451
- "values": []
452
- },
453
- {
454
- "name": "checked",
455
- "description": "Draws the checkbox in a checked state.",
456
- "values": []
457
- },
458
- {
459
- "name": "indeterminate",
460
- "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
461
- "values": []
462
- },
463
- {
464
- "name": "form",
465
- "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
466
- "values": []
467
- },
468
- {
469
- "name": "required",
470
- "description": "Makes the checkbox a required field.",
471
- "values": []
472
- },
473
- {
474
- "name": "help-text",
475
- "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
476
- "values": []
477
- }
478
- ],
479
- "references": [
480
- {
481
- "name": "Mer info",
482
- "url": "https://designsystem.nve.no/components/nve-checkbox"
483
- }
484
- ]
485
- },
486
- {
487
- "name": "nve-checkbox-group",
488
- "description": "Bruk denne for å håndtere flere avkrysningsbokser (nve-checkbox) som hører sammen.\nselectedValues inneholder `value` til hver av avkrysningsboksene som er valgt i gruppa.\nGruppa oppdaterer seg automatisk når man klikker på en avkrysningsboks.\nStøtter både constraint validation (kun `required`) og tilpasset validering.\nTilpasset validering prioriteres foran `required`.\n---\n\n\n### **Metoder:**\n - **setCustomValidity(message)** - En 'fake' metode som gjør custom validering enklere på checkbox-group komponent\n\n### **Spor:**\n - **default** - legg avkrysningsboksene inni denne.",
489
- "attributes": [
490
- {
491
- "name": "disabled",
492
- "description": "Deaktiverer alle sjekkbokser hvis 'true'",
493
- "values": []
494
- },
495
- {
496
- "name": "required",
497
- "description": "Om minst en sjekkboks er sjekket på",
498
- "values": []
499
- },
500
- { "name": "label", "description": "Ledetekst", "values": [] },
501
- {
502
- "name": "tooltip",
503
- "description": "Viser i-ikon og hjelpetekst ved siden av label. Du må ha en label for å bruke denne.",
504
- "values": []
505
- },
506
- {
507
- "name": "orientation",
508
- "description": "Om gruppa skal vises horisontalt eller vertikalt",
509
- "values": [{ "name": "horizontal" }, { "name": "vertical" }]
510
- },
511
- {
512
- "name": "errorMessage",
513
- "description": "Feilmelding som vises under gruppe hvis validering feiler",
514
- "values": []
515
- },
516
- {
517
- "name": "requiredLabel",
518
- "description": "Tekst som vises for å markere at et felt er obligatorisk",
519
- "values": []
520
- },
521
- {
522
- "name": "selectedValues",
523
- "description": "Returnerer en tabell av value-attributet til alle sjekkbokser som er valgt. Man kan lagre både primitiver og objekter i selectedValues.",
524
- "values": [{ "name": "string[]" }]
525
- }
526
- ],
527
- "references": [
528
- {
529
- "name": "Mer info",
530
- "url": "https://designsystem.nve.no/components/nve-checkbox-group"
531
- }
532
- ]
533
- },
534
- {
535
- "name": "nve-combobox",
536
- "description": "En combobox komponent som lar brukeren velge ett eller flere alternativer fra en liste eller søke etter alternativer.\n---\n\n\n### **Hendelser:**\n - **value** - Returnerer de valgte alternativene etter at man har valgt / fjernet ett alternativ\n- **invalid** - Indikerer at validering har feilet ved form submit\n\n### **Metoder:**\n - **firstUpdated()** - Kalles første gang komponenten er rendret.\nSetter selectedOptions basert på options med selected=true.\n- **handleFocus(): _void_** - Setter fokus på input feltet som er inne i prefix slotten\nog oppdaterer listen med søketreff.\n- **handleClick(): _void_** - Setter fokus på input feltet som er inne i prefix slotten\nog åpner popupen.\n- **togglePopupActive(event: _Event_): _void_** - Toggle for å aktivere eller deaktivere popupen.\n- **handleInput(): _void_** - Håndterer input i søkefeltet og oppdaterer søkeresultater.\n- **handleKeyboardNavigationInput(event: _KeyboardEvent_): _void_** - Håndterer tastaturnavigasjon i inputfeltet, ikke popupen.\n- **handleKeyboardNavigationListBox(event: _KeyboardEvent_): _void_** - Håndterer tastaturnavigasjon i popupen, ikke inputfeltet. selectOptionKeyDown håndterer enter .\n- **selectOption(option: _Option_): _void_** - Velger et alternativ.\n- **selectOptionKeyDown(option: _Option_, event: _KeyboardEvent_): _void_** - Velger et alternativ med tastatur.\n- **unSelectOption(option: _Option_): _void_** - Fjerner et valgt alternativ.\n- **unSelectOptionKeyDown(option: _Option_, event: _KeyboardEvent_): _void_** - Fjerner ett valgt alternativ med tastatur.\n- **unSelectOptionKeyDownTag(option: _Option_, event: _KeyboardEvent_): _void_** - Fjerner en tag med tastatur.\n- **toggleOptionInListWithSearchHits(option: _Option_, index: _number_): _void_** - Toggle valg av alternativ i søkeresultatlisten.\n- **toggleOptionInListWithSearchHitsKeyDown(option: _Option_, index: _number_, event: _KeyboardEvent_): _void_** - Toggle valg av alternativ i søkeresultatlisten med tastatur (kun Enter).\n- **addHighlightingToSearchResult(label: _string_): _TemplateResult_** - Legger til utheving av søketreff i label.\n- **shouldDisplayOptionAsDisabled(option: _Option_): _boolean_** - Sjekker om et alternativ skal vises som deaktivert.\nHvis disabled er true, vises alle alternativer som deaktivert.\nHvis maksimalt antall alternativer er valgt, vises alle alternativer som ikke er valgt som deaktivert.",
537
- "attributes": [
538
- {
539
- "name": "label",
540
- "description": "Tekst som vises over input feltet.",
541
- "values": []
542
- },
543
- {
544
- "name": "placeholder",
545
- "description": "Placeholder som vises inne i input feltet.",
546
- "values": []
547
- },
548
- {
549
- "name": "helpText",
550
- "description": "Teksten som vises under input feltet, byttes ut med errorMessage hvis det er en feil ved validering",
551
- "values": []
552
- },
553
- {
554
- "name": "requiredLabel",
555
- "description": "Teksten på høyre side som forteller at feltet er obligatorisk.",
556
- "values": []
557
- },
558
- {
559
- "name": "errorMessage",
560
- "description": "Teksten som vises ved en feil i validering.",
561
- "values": []
562
- },
563
- {
564
- "name": "options",
565
- "description": "Alle valgene som kan velges i comboboxen, bruk selected:true på verdier som er valgt fra start.",
566
- "values": [{ "name": "Option[]" }]
567
- },
568
- {
569
- "name": "max",
570
- "description": "Antall valg som kan velges i comboboxen, hvis ikke spesifisert kan man velge så mange man ønsker.",
571
- "values": []
572
- },
573
- {
574
- "name": "min",
575
- "description": "Minimum valg som skal være valgt.",
576
- "values": []
577
- },
578
- {
579
- "name": "disabled",
580
- "description": "Er comboboxen deaktivert.",
581
- "values": []
582
- },
583
- {
584
- "name": "filled",
585
- "description": "Skal den ha filled utseende (dvs. at den har en bakgrunnsfarge).",
586
- "values": []
587
- },
588
- {
589
- "name": "required",
590
- "description": "Skal den være påkrevd.",
591
- "values": []
592
- },
593
- {
594
- "name": "size",
595
- "description": "Inputfeltets størrelse.",
596
- "values": [
597
- { "name": "small" },
598
- { "name": "medium" },
599
- { "name": "large" }
600
- ]
601
- },
602
- {
603
- "name": "testId",
604
- "description": "Test-id for enklere testing.",
605
- "values": []
606
- }
607
- ],
608
- "references": [
609
- {
610
- "name": "Mer info",
611
- "url": "https://designsystem.nve.no/components/nve-combobox"
612
- }
613
- ]
614
- },
615
- {
616
- "name": "nve-darkmode-switch",
617
- "description": "Komponent for å sette .darkmode-klasse på root.\nMå kun være en av dem på siden, de vil ikke synkronisere data.\n\nHvorvidt bruker foretrekker dark-mode eller ikke hentes fra browser via \"prefers-color-scheme\".\nDersom bruker setter darkmode ved å klikke på komponenten, lagres valget i localstorage.\n\nMan kan bruke \"darkmodeclass\" for å sette klassen som legges til dersom den ikke er \"darkmode\"\n---\n",
618
- "attributes": [
619
- { "name": "testId", "description": "", "values": [] },
620
- { "name": "darkmode", "description": "", "values": [] },
621
- { "name": "darkmodeclass", "description": "", "values": [] }
622
- ],
623
- "references": [
624
- {
625
- "name": "Mer info",
626
- "url": "https://designsystem.nve.no/components/nve-darkmode-switch"
627
- }
628
- ]
629
- },
630
- {
631
- "name": "nve-dialog",
632
- "description": "En dialogboks.\nVil du ha ikon foran overskriften, bruk `icon`.\nSkal det ikke være mulig å trykke utenfor for å lukke dialogen, bruk `disableBackground`.\n---\n\n\n### **Hendelser:**\n - **sl-show** - Emitted when the dialog opens.\n- **sl-after-show** - Emitted after the dialog opens and all animations are complete.\n- **sl-hide** - Emitted when the dialog closes.\n- **sl-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **sl-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **sl-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Metoder:**\n - **handleRequestClose(event: _CustomEvent_)** - Stjålet fra shoelace eksempel. Hindrer at man lukker dialogen ved å trykke utenfor\n- **updateIcon()** - Oppdaterer ikonet som vises i dialogens tittel.\nMetoden søker først etter tittel-elementet i komponentens skygge-DOM.\nHvis tittel-elementet finnes og `icon`-egenskapen er satt, oppdateres\ntittel-elementets stil for å inkludere det angitte ikonet.\nHvis `icon`-egenskapen ikke er satt, settes ikoninnholdet til null\nfor å unngå å skape unødvendig mellomrom i layouten.\n- **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Spor:**\n - **label** - teksten som skal vises i overskriften. Eller du kan bruke label-attributtet\n- **body** - hovedinnholdet\n- **footer** - feltet i bunnen hvor knappene er plassert\n- _default_ - The dialog's main content.\n- **header-actions** - Optional actions to add to the header. Works best with `<sl-icon-button>`.\n\n### **CSS-variabler:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **Deler:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the dialog.\n- **panel** - The dialog's panel (where the dialog and its content are rendered).\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<sl-icon-button>`.\n- **title** - The dialog's title.\n- **close-button** - The close button, an `<sl-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",
633
- "attributes": [
634
- {
635
- "name": "icon",
636
- "description": "Ikonet som skal vises",
637
- "values": []
638
- },
639
- {
640
- "name": "disableBackground",
641
- "description": "Hvis denne er satt, kan man ikke trykke utenfor dialogen for å lukke den.",
642
- "values": []
643
- },
644
- {
645
- "name": "open",
646
- "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
647
- "values": []
648
- },
649
- {
650
- "name": "label",
651
- "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
652
- "values": []
653
- },
654
- {
655
- "name": "no-header",
656
- "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
657
- "values": []
658
- }
659
- ],
660
- "references": [
661
- {
662
- "name": "Mer info",
663
- "url": "https://designsystem.nve.no/components/nve-dialog"
664
- }
665
- ]
666
- },
667
- {
668
- "name": "nve-divider",
669
- "description": "Bruk denne til å skille innhold fra hverandre\n---\n\n\n### **CSS-variabler:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - The spacing of the divider. _(default: undefined)_",
670
- "attributes": [
671
- {
672
- "name": "vertical",
673
- "description": "Draws the divider in a vertical orientation.",
674
- "values": []
675
- }
676
- ],
677
- "references": [
678
- {
679
- "name": "Mer info",
680
- "url": "https://designsystem.nve.no/components/nve-divider"
681
- }
682
- ]
683
- },
684
- {
685
- "name": "nve-drawer",
686
- "description": "Bruk denne hvor du trenger en skuff, enten for hele siden eller mer lokalisert inne i en boks.\n---\n\n\n### **Hendelser:**\n - **sl-show** - Emitted when the drawer opens.\n- **sl-after-show** - Emitted after the drawer opens and all animations are complete.\n- **sl-hide** - Emitted when the drawer closes.\n- **sl-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **sl-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **sl-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Metoder:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\n\n### **Spor:**\n - _default_ - The drawer's main content.\n- **label** - The drawer's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<sl-icon-button>`.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS-variabler:**\n - **--size** - The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **Deler:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the drawer.\n- **panel** - The drawer's panel (where the drawer and its content are rendered).\n- **header** - The drawer's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<sl-icon-button>`.\n- **title** - The drawer's title.\n- **close-button** - The close button, an `<sl-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.",
687
- "attributes": [
688
- { "name": "testId", "description": "", "values": [] },
689
- {
690
- "name": "open",
691
- "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
692
- "values": []
693
- },
694
- {
695
- "name": "label",
696
- "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
697
- "values": []
698
- },
699
- {
700
- "name": "placement",
701
- "description": "The direction from which the drawer will open.",
702
- "values": [
703
- { "name": "top" },
704
- { "name": "end" },
705
- { "name": "bottom" },
706
- { "name": "start" }
707
- ]
708
- },
709
- {
710
- "name": "contained",
711
- "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.",
712
- "values": []
713
- },
714
- {
715
- "name": "no-header",
716
- "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
717
- "values": []
718
- }
719
- ],
720
- "references": [
721
- {
722
- "name": "Mer info",
723
- "url": "https://designsystem.nve.no/components/nve-drawer"
724
- }
725
- ]
726
- },
727
- {
728
- "name": "nve-dropdown",
729
- "description": "TODO: Beskrivelse mangler\n---\n\n\n### **Hendelser:**\n - **sl-show** - Emitted when the dropdown opens.\n- **sl-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **sl-hide** - Emitted when the dropdown closes.\n- **sl-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Metoder:**\n - **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Spor:**\n - _default_ - The dropdown's main content.\n- **trigger** - The dropdown's trigger, usually a `<sl-button>` element.\n\n### **Deler:**\n - **base** - The component's base wrapper, an `<sl-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
730
- "attributes": [
731
- { "name": "testId", "description": "", "values": [] },
732
- {
733
- "name": "open",
734
- "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
735
- "values": []
736
- },
737
- {
738
- "name": "placement",
739
- "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
740
- "values": [
741
- { "name": "" },
742
- { "name": "top" },
743
- { "name": "top-start" },
744
- { "name": "top-end" },
745
- { "name": "bottom" },
746
- { "name": "bottom-start" },
747
- { "name": "bottom-end" },
748
- { "name": "right" },
749
- { "name": "right-start" },
750
- { "name": "right-end" },
751
- { "name": "left" },
752
- { "name": "left-start" },
753
- { "name": "left-end" }
754
- ]
755
- },
756
- {
757
- "name": "disabled",
758
- "description": "Disables the dropdown so the panel will not open.",
759
- "values": []
760
- },
761
- {
762
- "name": "stay-open-on-select",
763
- "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
764
- "values": []
765
- },
766
- {
767
- "name": "distance",
768
- "description": "The distance in pixels from which to offset the panel away from its trigger.",
769
- "values": []
770
- },
771
- {
772
- "name": "skidding",
773
- "description": "The distance in pixels from which to offset the panel along its trigger.",
774
- "values": []
775
- },
776
- {
777
- "name": "hoist",
778
- "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
779
- "values": []
780
- },
781
- {
782
- "name": "sync",
783
- "description": "Syncs the popup width or height to that of the trigger element.",
784
- "values": [
785
- { "name": "width" },
786
- { "name": "height" },
787
- { "name": "both" }
788
- ]
789
- }
790
- ],
791
- "references": [
792
- {
793
- "name": "Mer info",
794
- "url": "https://designsystem.nve.no/components/nve-dropdown"
795
- }
796
- ]
797
- },
798
- {
799
- "name": "nve-icon",
800
- "description": "Et ikon.\nVi bruker ikoner fra Material Symbols, men det er også mulig å bruke ikoner fra eget repo. \nVi anbefaler å bruke Material-ikonene.\nStrektykkelsen skal være 400, uavhengig av ikonets størrelse, og kun stilene Sharp og Outlined skal brukes.\nFill-stilen bør unngås, da den fyller hele ikonet med farge i stedet for å bruke kun konturer\n---\n\n\n### **CSS-variabler:**\n - **--icon-size** - Størrelse på ikonet. 16px er standard. _(default: undefined)_\n\n### **Deler:**\n - **icon** - Selve ikon span-element.",
801
- "attributes": [
802
- {
803
- "name": "library",
804
- "description": "Skarpe eller myke hjørner. Ikonene i ikonsettet skal i utgangspunktet ha skarpe hjørner, men hjørner kan være avrundet om det gjør motivet tydeligere.",
805
- "values": [{ "name": "Outlined" }, { "name": "Sharp" }]
806
- },
807
- {
808
- "name": "name",
809
- "description": "Navnet på ikonet i Material Symbols-biblioteket",
810
- "values": []
811
- },
812
- {
813
- "name": "src",
814
- "description": "Filnavn til ikonet om du velger å bruke et lokalt ikon",
815
- "values": []
816
- },
817
- {
818
- "name": "alt",
819
- "description": "En beskrivelse av ikonet",
820
- "values": []
821
- }
822
- ],
823
- "references": [
824
- {
825
- "name": "Mer info",
826
- "url": "https://designsystem.nve.no/components/nve-icon"
827
- }
828
- ]
829
- },
830
- {
831
- "name": "nve-input",
832
- "description": "Et tekstfelt.\nVil du ha info-ikon med hjelpetekst etter ledeteksten, putt en nve-label i label-slot.\npill skal ikke brukes.\nTODO: Feltet blir bredere hvis validering feiler, fordi vi må ha plass til feil-ikonet.\n---\n\n\n### **Hendelser:**\n - **sl-blur** - Emitted when the control loses focus.\n- **sl-change** - Emitted when an alteration to the control's value is committed by the user.\n- **sl-clear** - Emitted when the clear button is activated.\n- **sl-focus** - Emitted when the control gains focus.\n- **sl-input** - Emitted when the control receives input.\n- **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Metoder:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Spor:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **suffix** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **Deler:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` control.\n- **prefix** - The container that wraps the prefix.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The container that wraps the suffix.",
833
- "attributes": [
834
- {
835
- "name": "requiredLabel",
836
- "description": "Tekst som vises for å markere at et felt er obligatorisk",
837
- "values": []
838
- },
839
- {
840
- "name": "errorMessage",
841
- "description": "Feilmelding som vises hvis validering feiler",
842
- "values": []
843
- },
844
- {
845
- "name": "testId",
846
- "description": "Brukes for å kunne identifisere komponenten i tester",
847
- "values": []
848
- },
849
- {
850
- "name": "inputId",
851
- "description": "Brukes for å kunne identifisere komponenten",
852
- "values": []
853
- },
854
- {
855
- "name": "noValidation",
856
- "description": "Brukes for å hindre nettleseren fra å validere feltet",
857
- "values": []
858
- },
859
- { "name": "title", "values": [] },
860
- {
861
- "name": "type",
862
- "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
863
- "values": [
864
- { "name": "" },
865
- { "name": "date" },
866
- { "name": "datetime-local" },
867
- { "name": "email" },
868
- { "name": "number" },
869
- { "name": "password" },
870
- { "name": "search" },
871
- { "name": "tel" },
872
- { "name": "text" },
873
- { "name": "time" },
874
- { "name": "url" }
875
- ]
876
- },
877
- {
878
- "name": "name",
879
- "description": "The name of the input, submitted as a name/value pair with form data.",
880
- "values": []
881
- },
882
- {
883
- "name": "value",
884
- "description": "The current value of the input, submitted as a name/value pair with form data.",
885
- "values": []
886
- },
887
- {
888
- "name": "size",
889
- "description": "The input's size.",
890
- "values": [
891
- { "name": "small" },
892
- { "name": "medium" },
893
- { "name": "large" }
894
- ]
895
- },
896
- {
897
- "name": "filled",
898
- "description": "Draws a filled input.",
899
- "values": []
900
- },
901
- {
902
- "name": "pill",
903
- "description": "Draws a pill-style input with rounded edges.",
904
- "values": []
905
- },
906
- {
907
- "name": "label",
908
- "description": "The input's label. If you need to display HTML, use the `label` slot instead.",
909
- "values": []
910
- },
911
- {
912
- "name": "help-text",
913
- "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
914
- "values": []
915
- },
916
- {
917
- "name": "clearable",
918
- "description": "Adds a clear button when the input is not empty.",
919
- "values": []
920
- },
921
- {
922
- "name": "disabled",
923
- "description": "Disables the input.",
924
- "values": []
925
- },
926
- {
927
- "name": "placeholder",
928
- "description": "Placeholder text to show as a hint when the input is empty.",
929
- "values": []
930
- },
931
- {
932
- "name": "readonly",
933
- "description": "Makes the input readonly.",
934
- "values": []
935
- },
936
- {
937
- "name": "password-toggle",
938
- "description": "Adds a button to toggle the password's visibility. Only applies to password types.",
939
- "values": []
940
- },
941
- {
942
- "name": "password-visible",
943
- "description": "Determines whether or not the password is currently visible. Only applies to password input types.",
944
- "values": []
945
- },
946
- {
947
- "name": "no-spin-buttons",
948
- "description": "Hides the browser's built-in increment/decrement spin buttons for number inputs.",
949
- "values": []
950
- },
951
- {
952
- "name": "form",
953
- "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
954
- "values": []
955
- },
956
- {
957
- "name": "required",
958
- "description": "Makes the input a required field.",
959
- "values": []
960
- },
961
- {
962
- "name": "pattern",
963
- "description": "A regular expression pattern to validate input against.",
964
- "values": []
965
- },
966
- {
967
- "name": "minlength",
968
- "description": "The minimum length of input that will be considered valid.",
969
- "values": []
970
- },
971
- {
972
- "name": "maxlength",
973
- "description": "The maximum length of input that will be considered valid.",
974
- "values": []
975
- },
976
- {
977
- "name": "min",
978
- "description": "The input's minimum value. Only applies to date and number input types.",
979
- "values": []
980
- },
981
- {
982
- "name": "max",
983
- "description": "The input's maximum value. Only applies to date and number input types.",
984
- "values": []
985
- },
986
- {
987
- "name": "step",
988
- "description": "Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\nimplied, allowing any numeric value. Only applies to date and number input types.",
989
- "values": [{ "name": "any" }]
990
- },
991
- {
992
- "name": "autocapitalize",
993
- "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
994
- "values": [
995
- { "name": "off" },
996
- { "name": "none" },
997
- { "name": "on" },
998
- { "name": "sentences" },
999
- { "name": "words" },
1000
- { "name": "characters" }
1001
- ]
1002
- },
1003
- {
1004
- "name": "autocorrect",
1005
- "description": "Indicates whether the browser's autocorrect feature is on or off.",
1006
- "values": [{ "name": "off" }, { "name": "on" }]
1007
- },
1008
- {
1009
- "name": "autocomplete",
1010
- "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
1011
- "values": []
1012
- },
1013
- {
1014
- "name": "autofocus",
1015
- "description": "Indicates that the input should receive focus on page load.",
1016
- "values": []
1017
- },
1018
- {
1019
- "name": "enterkeyhint",
1020
- "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
1021
- "values": [
1022
- { "name": "enter" },
1023
- { "name": "done" },
1024
- { "name": "go" },
1025
- { "name": "next" },
1026
- { "name": "previous" },
1027
- { "name": "search" },
1028
- { "name": "send" }
1029
- ]
1030
- },
1031
- {
1032
- "name": "spellcheck",
1033
- "description": "Enables spell checking on the input.",
1034
- "values": []
1035
- },
1036
- {
1037
- "name": "inputmode",
1038
- "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
1039
- "values": [
1040
- { "name": "none" },
1041
- { "name": "text" },
1042
- { "name": "decimal" },
1043
- { "name": "numeric" },
1044
- { "name": "tel" },
1045
- { "name": "search" },
1046
- { "name": "email" },
1047
- { "name": "url" }
1048
- ]
1049
- }
1050
- ],
1051
- "references": [
1052
- {
1053
- "name": "Mer info",
1054
- "url": "https://designsystem.nve.no/components/nve-input"
1055
- }
1056
- ]
1057
- },
1058
- {
1059
- "name": "nve-label",
1060
- "description": "Ledetekst med verktøy-hint (og tilhørende info-ikon)\r\n\r\nKan også brukes i nve-menu for å skille kategorier. Her får den en spesiell utforming.\n---\n\n\n### **Spor:**\n - **(default)** - teksten som skal vises. Eller du kan bruke value-attributtet\n- **tooltip** - innhold i denne blir vist som en tooltip hvis man svever over info-ikonet\n- **suffix** - viser ekstra innhold etter hoved label som f.eks. nve-spinner TODO: Skal være litt mer plass mellom tekst og info-ikon TODO: Hvis du angir både value og innhold i slot, er det value som vises. Det bør være motsatt.",
1061
- "attributes": [
1062
- {
1063
- "name": "value",
1064
- "description": "Teksten som skal vises",
1065
- "values": []
1066
- },
1067
- {
1068
- "name": "size",
1069
- "description": "Størrelse",
1070
- "values": [
1071
- { "name": "x-small" },
1072
- { "name": "small" },
1073
- { "name": "medium" },
1074
- { "name": "large" }
1075
- ]
1076
- },
1077
- {
1078
- "name": "light",
1079
- "description": "Sett denne hvis du vil ha litt lettere skriftvekt",
1080
- "values": []
1081
- },
1082
- {
1083
- "name": "tooltip",
1084
- "description": "Denne teksten blir vist som et verktøyhint hvis man svever over info-ikonet",
1085
- "values": []
1086
- },
1087
- {
1088
- "name": "iconLeft",
1089
- "description": "Om tooltip ikone skal vises på venstre siden",
1090
- "values": []
1091
- },
1092
- {
1093
- "name": "iconColor",
1094
- "description": "Ikon farge",
1095
- "values": [{ "name": "default" }, { "name": "black" }]
1096
- },
1097
- {
1098
- "name": "for",
1099
- "description": "For-attributten legges på label, og brukes som html-standard. Sett til samme som id på elementet label tilhører",
1100
- "values": []
1101
- }
1102
- ],
1103
- "references": [
1104
- {
1105
- "name": "Mer info",
1106
- "url": "https://designsystem.nve.no/components/nve-label"
1107
- }
1108
- ]
1109
- },
1110
- {
1111
- "name": "nve-link-card",
1112
- "description": "Komponent som brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post.\nFor å bruke komponenten på best og tilgjengelig måte les mer i tilgjengelighet seksjonen.\n---\n\n\n### **Deler:**\n - **link-card** - Topp-element\n- **label** - Overskriften",
1113
- "attributes": [
1114
- {
1115
- "name": "label",
1116
- "description": "Tittel som vises øverst på kortet",
1117
- "values": []
1118
- },
1119
- {
1120
- "name": "additionalText",
1121
- "description": "Tilleggsbeskrivelse som vises under tittelen",
1122
- "values": []
1123
- },
1124
- {
1125
- "name": "size",
1126
- "description": "Størrelse på kortet, kan være 'small', 'medium' eller 'large'",
1127
- "values": [
1128
- { "name": "small" },
1129
- { "name": "medium" },
1130
- { "name": "large" }
1131
- ]
1132
- },
1133
- {
1134
- "name": "variant",
1135
- "description": "Variant som bestemmer stilen på kortet: 'primary', 'contrast', eller 'secondary'",
1136
- "values": [
1137
- { "name": "primary" },
1138
- { "name": "contrast" },
1139
- { "name": "secondary" }
1140
- ]
1141
- },
1142
- {
1143
- "name": "testId",
1144
- "description": "Test ID som kan brukes i testing og sporing",
1145
- "values": []
1146
- },
1147
- {
1148
- "name": "clickAction",
1149
- "description": "Definerer hva som skjer når kortet klikkes: 'internal' (intern lenke), 'download' (nedlasting), 'external' (ekstern lenke), eller 'mail' (e-post)",
1150
- "values": [
1151
- { "name": "internal" },
1152
- { "name": "download" },
1153
- { "name": "external" },
1154
- { "name": "mail" }
1155
- ]
1156
- },
1157
- {
1158
- "name": "href",
1159
- "description": "Lenken som brukes for handlinger som intern/ekstern navigering eller e-post",
1160
- "values": []
1161
- },
1162
- {
1163
- "name": "visited",
1164
- "description": "Brukes for å legge :visited style når lenken kommer fra eksternt rammeverk som f.eks RouterLink i Vue",
1165
- "values": []
1166
- }
1167
- ],
1168
- "references": [
1169
- {
1170
- "name": "Mer info",
1171
- "url": "https://designsystem.nve.no/components/nve-link-card"
1172
- }
1173
- ]
1174
- },
1175
- {
1176
- "name": "nve-menu",
1177
- "description": "En meny som tilbyr en liste av valg. Valgene lager du med en eller flere nve-menu-item's.\nDu kan også bruke nve-label inni nve-menu, for eksempel til å kategorisere menyvalg.\nNve-label får en spesiell styling når den brukes inni nve-menu\nFor å skille skille valg fra hverandre, kan du bruke nve-divider.\n---\n\n\n### **Hendelser:**\n - **sl-select** - Emitted when a menu item is selected.\n\n### **Spor:**\n - _default_ - The menu's content, including menu items, menu labels, and dividers.",
1178
- "attributes": [],
1179
- "references": [
1180
- {
1181
- "name": "Mer info",
1182
- "url": "https://designsystem.nve.no/components/nve-menu"
1183
- }
1184
- ]
1185
- },
1186
- {
1187
- "name": "nve-menu-item",
1188
- "description": "Bruk denne til å lage valg i en nve-menu.\nProperty \"loading\" støttes foreløpig ikke.\n---\n\n\n### **Metoder:**\n - **updated(changedProperties: _PropertyValues<this>_)** - Sørger for at subtext blir satt på, hvis den er tilstede i properties\n- **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.\n\n### **Spor:**\n - _default_ - The menu item's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n- **submenu** - Used to denote a nested menu.\n\n### **CSS-variabler:**\n - **--submenu-offset** - The distance submenus shift to overlap the parent menu. _(default: -2px)_\n\n### **Deler:**\n - **base** - The component's base wrapper.\n- **checked-icon** - The checked icon, which is only visible when the menu item is checked.\n- **prefix** - The prefix container.\n- **label** - The menu item label.\n- **suffix** - The suffix container.\n- **spinner** - The spinner that shows when the menu item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **submenu-icon** - The submenu icon, visible only when the menu item has a submenu (not yet implemented).",
1189
- "attributes": [
1190
- {
1191
- "name": "subtext",
1192
- "description": "Gi menyvalget en egen undertekst.",
1193
- "values": []
1194
- },
1195
- {
1196
- "name": "indent",
1197
- "description": "Gjør at teksten får innrykk og en svakere farge",
1198
- "values": []
1199
- },
1200
- {
1201
- "name": "type",
1202
- "description": "The type of menu item to render. To use `checked`, this value must be set to `checkbox`.",
1203
- "values": [{ "name": "normal" }, { "name": "checkbox" }]
1204
- },
1205
- {
1206
- "name": "checked",
1207
- "description": "Draws the item in a checked state.",
1208
- "values": []
1209
- },
1210
- {
1211
- "name": "value",
1212
- "description": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected.",
1213
- "values": []
1214
- },
1215
- {
1216
- "name": "loading",
1217
- "description": "Draws the menu item in a loading state.",
1218
- "values": []
1219
- },
1220
- {
1221
- "name": "disabled",
1222
- "description": "Draws the menu item in a disabled state, preventing selection.",
1223
- "values": []
1224
- }
1225
- ],
1226
- "references": [
1227
- {
1228
- "name": "Mer info",
1229
- "url": "https://designsystem.nve.no/components/nve-menu-item"
1230
- }
1231
- ]
1232
- },
1233
- {
1234
- "name": "nve-message-card",
1235
- "description": "Minner om en nve-alert, men skal fortrinnsvis vises hele tiden, ikke bare som et resultat av en hendelse.\nNve-message-card inneholder gjerne mer informasjon enn nve-alert.\nDen er ment for å hjelpe brukere, for eksempel i skjemaer.\n---\n\n\n### **Hendelser:**\n - **nve-hide** - Emittes når kortet lukkes.\n\n### **Spor:**\n - **subheader** - brukes til ekstra tekst over label.\n- **footer** - brukes til evt. knapperad nederst.\n\n### **Deler:**\n - **base** - hele komponenten.\n- **header** - alt som er over brødteksten\n- **subheader** - ekstra tekst over label\n- **label** - tittel i header-seksjonen.\n- **footer** - evt. knapperad nederst.",
1236
- "attributes": [
1237
- { "name": "testId", "description": "", "values": [] },
1238
- {
1239
- "name": "saturation",
1240
- "description": "Sett denne for sterkere bakgrunnsfarge",
1241
- "values": [{ "name": "emphasized" }]
1242
- },
1243
- {
1244
- "name": "size",
1245
- "description": "Sett størrelse på kortet",
1246
- "values": [
1247
- { "name": "default" },
1248
- { "name": "compact" },
1249
- { "name": "simple" }
1250
- ]
1251
- },
1252
- {
1253
- "name": "closable",
1254
- "description": "Bruk denne for å lukk-knappen i høyre hjørne",
1255
- "values": []
1256
- },
1257
- {
1258
- "name": "showIcon",
1259
- "description": "Styrer visning av ikon foran label",
1260
- "values": [{ "name": "true" }, { "name": "false" }]
1261
- },
1262
- { "name": "label", "description": "Tittel / overskrift", "values": [] },
1263
- {
1264
- "name": "iconTitle",
1265
- "description": "Bruk denne til å overstyre standard-ikonet foran label",
1266
- "values": []
1267
- },
1268
- {
1269
- "name": "variant",
1270
- "description": "Bestemmer farge",
1271
- "values": [
1272
- { "name": "neutral" },
1273
- { "name": "primary" },
1274
- { "name": "warning" },
1275
- { "name": "danger" },
1276
- { "name": "success" }
1277
- ]
1278
- }
1279
- ],
1280
- "references": [
1281
- {
1282
- "name": "Mer info",
1283
- "url": "https://designsystem.nve.no/components/nve-message-card"
1284
- }
1285
- ]
1286
- },
1287
- {
1288
- "name": "nve-option",
1289
- "description": "Representerer et valg i nve-select.\n---\n\n\n### **Metoder:**\n - **firstUpdated(changedProperties: _PropertyValues_): _void_** - Setter filled attributt på option når parent-select er filled, for å få annen hover-farge\nSetter så hide-checkmark basert på samme logikk\n- **getTextLabel(): _string_** - Gir tilbake plain-tekst-label som vises i select\n\n### **Spor:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **Deler:**\n - **checked-icon** - The checked icon, an `<sl-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
1290
- "attributes": [
1291
- {
1292
- "name": "textLabel",
1293
- "description": "Tekst som vises i select når denne er valgt. Default er at all råtekst vises.",
1294
- "values": []
1295
- },
1296
- {
1297
- "name": "value",
1298
- "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
1299
- "values": []
1300
- },
1301
- {
1302
- "name": "disabled",
1303
- "description": "Draws the option in a disabled state, preventing selection.",
1304
- "values": []
1305
- }
1306
- ],
1307
- "references": [
1308
- {
1309
- "name": "Mer info",
1310
- "url": "https://designsystem.nve.no/components/nve-option"
1311
- }
1312
- ]
1313
- },
1314
- {
1315
- "name": "nve-popup",
1316
- "description": "Popup er et verktøy som lar deg deklarativt forankre \"popup\"-beholdere til et annet element.\nPopup gir ingen stiler - bare posisjonering! \nPopup-vinduets foretrukne plassering, avstand og skrens (offset) kan konfigureres ved hjelp av attributter.\n---\n\n\n### **Hendelser:**\n - **sl-reposition** - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.\n\n### **Metoder:**\n - **reposition()** - Forces the popup to recalculate and reposition itself.\n\n### **Spor:**\n - _default_ - The popup's content.\n- **anchor** - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the `anchor` attribute or property instead.\n\n### **CSS-variabler:**\n - **--arrow-size** - The size of the arrow. Note that an arrow won't be shown unless the `arrow` attribute is used. _(default: 6px)_\n- **--arrow-color** - The color of the arrow. _(default: var(--sl-color-neutral-0))_\n- **--auto-size-available-width** - A read-only custom property that determines the amount of width the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n- **--auto-size-available-height** - A read-only custom property that determines the amount of height the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n\n### **Deler:**\n - **arrow** - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and maybe a border or box shadow.\n- **popup** - The popup's container. Useful for setting a background color, box shadow, etc.\n- **hover-bridge** - The hover bridge element. Only available when the `hover-bridge` option is enabled.",
1317
- "attributes": [
1318
- {
1319
- "name": "anchor",
1320
- "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
1321
- "values": [{ "name": "Element" }, { "name": "VirtualElement" }]
1322
- },
1323
- {
1324
- "name": "active",
1325
- "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
1326
- "values": []
1327
- },
1328
- {
1329
- "name": "placement",
1330
- "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
1331
- "values": [
1332
- { "name": "" },
1333
- { "name": "top" },
1334
- { "name": "top-start" },
1335
- { "name": "top-end" },
1336
- { "name": "bottom" },
1337
- { "name": "bottom-start" },
1338
- { "name": "bottom-end" },
1339
- { "name": "right" },
1340
- { "name": "right-start" },
1341
- { "name": "right-end" },
1342
- { "name": "left" },
1343
- { "name": "left-start" },
1344
- { "name": "left-end" }
1345
- ]
1346
- },
1347
- {
1348
- "name": "strategy",
1349
- "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
1350
- "values": [{ "name": "absolute" }, { "name": "fixed" }]
1351
- },
1352
- {
1353
- "name": "distance",
1354
- "description": "The distance in pixels from which to offset the panel away from its anchor.",
1355
- "values": []
1356
- },
1357
- {
1358
- "name": "skidding",
1359
- "description": "The distance in pixels from which to offset the panel along its anchor.",
1360
- "values": []
1361
- },
1362
- {
1363
- "name": "arrow",
1364
- "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
1365
- "values": []
1366
- },
1367
- {
1368
- "name": "arrow-placement",
1369
- "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
1370
- "values": [
1371
- { "name": "start" },
1372
- { "name": "end" },
1373
- { "name": "center" },
1374
- { "name": "anchor" }
1375
- ]
1376
- },
1377
- {
1378
- "name": "arrow-padding",
1379
- "description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
1380
- "values": []
1381
- },
1382
- {
1383
- "name": "flip",
1384
- "description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
1385
- "values": []
1386
- },
1387
- {
1388
- "name": "flip-fallback-placements",
1389
- "description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
1390
- "values": []
1391
- },
1392
- {
1393
- "name": "flip-fallback-strategy",
1394
- "description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
1395
- "values": [{ "name": "best-fit" }, { "name": "initial" }]
1396
- },
1397
- {
1398
- "name": "flipBoundary",
1399
- "description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
1400
- "values": [{ "name": "Element" }, { "name": "Element[]" }]
1401
- },
1402
- {
1403
- "name": "flip-padding",
1404
- "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
1405
- "values": []
1406
- },
1407
- {
1408
- "name": "shift",
1409
- "description": "Moves the popup along the axis to keep it in view when clipped.",
1410
- "values": []
1411
- },
1412
- {
1413
- "name": "shiftBoundary",
1414
- "description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
1415
- "values": [{ "name": "Element" }, { "name": "Element[]" }]
1416
- },
1417
- {
1418
- "name": "shift-padding",
1419
- "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
1420
- "values": []
1421
- },
1422
- {
1423
- "name": "auto-size",
1424
- "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
1425
- "values": [
1426
- { "name": "horizontal" },
1427
- { "name": "vertical" },
1428
- { "name": "both" }
1429
- ]
1430
- },
1431
- {
1432
- "name": "sync",
1433
- "description": "Syncs the popup's width or height to that of the anchor element.",
1434
- "values": [
1435
- { "name": "width" },
1436
- { "name": "height" },
1437
- { "name": "both" }
1438
- ]
1439
- },
1440
- {
1441
- "name": "autoSizeBoundary",
1442
- "description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
1443
- "values": [{ "name": "Element" }, { "name": "Element[]" }]
1444
- },
1445
- {
1446
- "name": "auto-size-padding",
1447
- "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
1448
- "values": []
1449
- },
1450
- {
1451
- "name": "hover-bridge",
1452
- "description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
1453
- "values": []
1454
- }
1455
- ],
1456
- "references": [
1457
- {
1458
- "name": "Mer info",
1459
- "url": "https://designsystem.nve.no/components/nve-popup"
1460
- }
1461
- ]
1462
- },
1463
- {
1464
- "name": "nve-radio",
1465
- "description": "En sl-radio med NVE design.\nSe https://shoelace.style/components/radio\n---\n\n\n### **Hendelser:**\n - **sl-blur** - Emitted when the control loses focus.\n- **sl-focus** - Emitted when the control gains focus.\n\n### **Spor:**\n - _default_ - The radio's label.\n\n### **Deler:**\n - **base** - The component's base wrapper.\n- **control** - The circular container that wraps the radio's checked state.\n- **control--checked** - The radio control when the radio is checked.\n- **checked-icon** - The checked icon, an `<sl-icon>` element.\n- **label** - The container that wraps the radio's label.",
1466
- "attributes": [
1467
- {
1468
- "name": "value",
1469
- "description": "The radio's value. When selected, the radio group will receive this value.",
1470
- "values": []
1471
- },
1472
- {
1473
- "name": "size",
1474
- "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
1475
- "values": [
1476
- { "name": "small" },
1477
- { "name": "medium" },
1478
- { "name": "large" }
1479
- ]
1480
- },
1481
- {
1482
- "name": "disabled",
1483
- "description": "Disables the radio.",
1484
- "values": []
1485
- }
1486
- ],
1487
- "references": [
1488
- {
1489
- "name": "Mer info",
1490
- "url": "https://designsystem.nve.no/components/nve-radio"
1491
- }
1492
- ]
1493
- },
1494
- {
1495
- "name": "nve-radio-button",
1496
- "description": "En sl-radio-button med NVE design.\n\nMerk at denne har ekstra hjørne-styling på første og siste knapp i gruppen.\nMan må derfor unngå å ha andre elementer blant nve-radio-button\n\nI motsetning til vanlig button så har denne støtte for \"pill\", men gjelder også da kun første og siste knapp\n---\n\n\n### **Hendelser:**\n - **sl-blur** - Emitted when the button loses focus.\n- **sl-focus** - Emitted when the button gains focus.\n\n### **Metoder:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the radio button.\n\n### **Spor:**\n - _default_ - The radio button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n\n### **Deler:**\n - **base** - The component's base wrapper.\n- **button** - The internal `<button>` element.\n- **button--checked** - The internal button element when the radio button is checked.\n- **prefix** - The container that wraps the prefix.\n- **label** - The container that wraps the radio button's label.\n- **suffix** - The container that wraps the suffix.",
1497
- "attributes": [
1498
- { "name": "testId", "description": "", "values": [] },
1499
- {
1500
- "name": "value",
1501
- "description": "The radio's value. When selected, the radio group will receive this value.",
1502
- "values": []
1503
- },
1504
- {
1505
- "name": "disabled",
1506
- "description": "Disables the radio button.",
1507
- "values": []
1508
- },
1509
- {
1510
- "name": "size",
1511
- "description": "The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\nthis attribute can typically be omitted.",
1512
- "values": [
1513
- { "name": "small" },
1514
- { "name": "medium" },
1515
- { "name": "large" }
1516
- ]
1517
- },
1518
- {
1519
- "name": "pill",
1520
- "description": "Draws a pill-style radio button with rounded edges.",
1521
- "values": []
1522
- }
1523
- ],
1524
- "references": [
1525
- {
1526
- "name": "Mer info",
1527
- "url": "https://designsystem.nve.no/components/nve-radio-button"
1528
- }
1529
- ]
1530
- },
1531
- {
1532
- "name": "nve-radio-group",
1533
- "description": "Brukes til å gruppere radioknapper som hører sammen. Den kan inneholde både nve-radio og nve-radio-button.\nPass på at nve-radio eller nva-radio-button har en value, ellers vil ikke radiogruppa fungere som forventet.\n---\n\n\n### **Hendelser:**\n - **sl-change** - Emitted when the radio group's selected value changes.\n- **sl-input** - Emitted when the radio group receives user input.\n- **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Metoder:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the radio-group.\n\n### **Spor:**\n - **Standard** - slot hvor <nve-radio> eller <nve-radio-button> plasseres\n- _default_ - The default slot where `<sl-radio>` or `<sl-radio-button>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.\n\n### **Deler:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
1534
- "attributes": [
1535
- {
1536
- "name": "orientation",
1537
- "description": "Om radio knapper skal vises horisontalt eller vertikalt",
1538
- "values": [{ "name": "horizontal" }, { "name": "vertical" }]
1539
- },
1540
- {
1541
- "name": "disabled",
1542
- "description": "Deaktivere alle radioknapper i gruppen",
1543
- "values": []
1544
- },
1545
- {
1546
- "name": "errorMessage",
1547
- "description": "Feilmelding som vises under radiogruppe. Vi har ikke tilgang til SlRadioGroup errorMessage så må overskrive med vår egen",
1548
- "values": []
1549
- },
1550
- {
1551
- "name": "requiredLabel",
1552
- "description": "Tekst som vises for å markere at et felt er obligatorisk. Er satt til \"*Obligatorisk\" som standard.",
1553
- "values": []
1554
- },
1555
- {
1556
- "name": "testId",
1557
- "description": "Hjelpevariabel som sjekker om radio gruppe er allerede invalid",
1558
- "values": []
1559
- },
1560
- {
1561
- "name": "label",
1562
- "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
1563
- "values": []
1564
- },
1565
- {
1566
- "name": "help-text",
1567
- "description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
1568
- "values": []
1569
- },
1570
- {
1571
- "name": "name",
1572
- "description": "The name of the radio group, submitted as a name/value pair with form data.",
1573
- "values": []
1574
- },
1575
- {
1576
- "name": "value",
1577
- "description": "The current value of the radio group, submitted as a name/value pair with form data.",
1578
- "values": []
1579
- },
1580
- {
1581
- "name": "size",
1582
- "description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
1583
- "values": [
1584
- { "name": "small" },
1585
- { "name": "medium" },
1586
- { "name": "large" }
1587
- ]
1588
- },
1589
- {
1590
- "name": "form",
1591
- "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
1592
- "values": []
1593
- },
1594
- {
1595
- "name": "required",
1596
- "description": "Ensures a child radio is checked before allowing the containing form to submit.",
1597
- "values": []
1598
- }
1599
- ],
1600
- "references": [
1601
- {
1602
- "name": "Mer info",
1603
- "url": "https://designsystem.nve.no/components/nve-radio-group"
1604
- }
1605
- ]
1606
- },
1607
- {
1608
- "name": "nve-relative-time",
1609
- "description": "En enkel wrapper rundt SlRelativeTime. Bruker <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat\" class=\"external-link\" rel=\"noopener noreferrer\" target=\"_blank\"><code>Intl.RelativeTimeFormat</code> API'et</a> for å formattere dato og vise tekst på valgte språk.\n---\n",
1610
- "attributes": [
1611
- { "name": "testId", "description": "", "values": [] },
1612
- {
1613
- "name": "lang",
1614
- "description": "Setter språket som brukes. Bruk 'nn' eller 'nb' for norsk, 'en' for engelsk. Dersom denne ikke settes (og heller ikke arves) så er det browseren sitt språk som brukes",
1615
- "values": []
1616
- },
1617
- {
1618
- "name": "date",
1619
- "description": "The date from which to calculate time from. If not set, the current date and time will be used. When passing a\nstring, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert\na date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
1620
- "values": [{ "name": "Date" }]
1621
- },
1622
- {
1623
- "name": "format",
1624
- "description": "The formatting style to use.",
1625
- "values": [
1626
- { "name": "long" },
1627
- { "name": "short" },
1628
- { "name": "narrow" }
1629
- ]
1630
- },
1631
- {
1632
- "name": "numeric",
1633
- "description": "When `auto`, values such as \"yesterday\" and \"tomorrow\" will be shown when possible. When `always`, values such as\n\"1 day ago\" and \"in 1 day\" will be shown.",
1634
- "values": [{ "name": "always" }, { "name": "auto" }]
1635
- },
1636
- {
1637
- "name": "sync",
1638
- "description": "Keep the displayed value up to date as time passes.",
1639
- "values": []
1640
- }
1641
- ],
1642
- "references": [
1643
- {
1644
- "name": "Mer info",
1645
- "url": "https://designsystem.nve.no/components/nve-relative-time"
1646
- }
1647
- ]
1648
- },
1649
- {
1650
- "name": "nve-select",
1651
- "description": "En nedtrekksliste, også kjent som rullgardin eller drop-down list. Kjært barn har mange navn.\nTODO: Klarte ikke å sette feil-ikonet når validering feiler. Eneste måte å gjøre det på kunne ha vært å bruke ::after pseudo-element på noen av sl-select partene, men\nfunka ikke med ikonet.\nMan kan bruke .focus() for å fokusere komponenten programatisk. Sjekk https://shoelace.style/getting-started/usage#methods for å se hvordan å bruke det.\nKan være at i Vue applikasjon man må kjøre .focus i neste tick for å fokusere komponenten.\n---\n\n\n### **Hendelser:**\n - **sl-change** - Emitted when the control's value changes.\n- **sl-clear** - Emitted when the control's value is cleared.\n- **sl-input** - Emitted when the control receives input.\n- **sl-focus** - Emitted when the control gains focus.\n- **sl-blur** - Emitted when the control loses focus.\n- **sl-show** - Emitted when the select's menu opens.\n- **sl-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **sl-hide** - Emitted when the select's menu closes.\n- **sl-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Metoder:**\n - **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **blur()** - Removes focus from the control.\n\n### **Spor:**\n - _default_ - The listbox options. Must be `<sl-option>` elements. You can use `<sl-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **Deler:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
1652
- "attributes": [
1653
- {
1654
- "name": "requiredLabel",
1655
- "description": "Tekst som vises for å markere at et felt er obligatorisk. Er satt til \"*Obligatorisk\" som standard.",
1656
- "values": []
1657
- },
1658
- {
1659
- "name": "hideCheckmark",
1660
- "description": "Settes dersom man ikke ønsker å ha checkmark på valgte options i dropdown",
1661
- "values": []
1662
- },
1663
- {
1664
- "name": "errorMessage",
1665
- "description": "Brukes til enkel constraint validation til å overskrive default nettleser-melding",
1666
- "values": []
1667
- },
1668
- {
1669
- "name": "name",
1670
- "description": "The name of the select, submitted as a name/value pair with form data.",
1671
- "values": []
1672
- },
1673
- {
1674
- "name": "value",
1675
- "description": "The default value of the form control. Primarily used for resetting the form control.",
1676
- "values": [{ "name": "string[]" }]
1677
- },
1678
- {
1679
- "name": "size",
1680
- "description": "The select's size.",
1681
- "values": [
1682
- { "name": "small" },
1683
- { "name": "medium" },
1684
- { "name": "large" }
1685
- ]
1686
- },
1687
- {
1688
- "name": "placeholder",
1689
- "description": "Placeholder text to show as a hint when the select is empty.",
1690
- "values": []
1691
- },
1692
- {
1693
- "name": "multiple",
1694
- "description": "Allows more than one option to be selected.",
1695
- "values": []
1696
- },
1697
- {
1698
- "name": "max-options-visible",
1699
- "description": "The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
1700
- "values": []
1701
- },
1702
- {
1703
- "name": "disabled",
1704
- "description": "Disables the select control.",
1705
- "values": []
1706
- },
1707
- {
1708
- "name": "clearable",
1709
- "description": "Adds a clear button when the select is not empty.",
1710
- "values": []
1711
- },
1712
- {
1713
- "name": "open",
1714
- "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
1715
- "values": []
1716
- },
1717
- {
1718
- "name": "hoist",
1719
- "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
1720
- "values": []
1721
- },
1722
- {
1723
- "name": "filled",
1724
- "description": "Draws a filled select.",
1725
- "values": []
1726
- },
1727
- {
1728
- "name": "pill",
1729
- "description": "Draws a pill-style select with rounded edges.",
1730
- "values": []
1731
- },
1732
- {
1733
- "name": "label",
1734
- "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
1735
- "values": []
1736
- },
1737
- {
1738
- "name": "placement",
1739
- "description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
1740
- "values": [{ "name": "top" }, { "name": "bottom" }]
1741
- },
1742
- {
1743
- "name": "help-text",
1744
- "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
1745
- "values": []
1746
- },
1747
- {
1748
- "name": "form",
1749
- "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
1750
- "values": []
1751
- },
1752
- {
1753
- "name": "required",
1754
- "description": "The select's required attribute.",
1755
- "values": []
1756
- },
1757
- {
1758
- "name": "getTag",
1759
- "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index. The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
1760
- "values": [
1761
- { "name": "(option: SlOption, index: number) => TemplateResult" },
1762
- { "name": "HTMLElement" }
1763
- ]
1764
- }
1765
- ],
1766
- "references": [
1767
- {
1768
- "name": "Mer info",
1769
- "url": "https://designsystem.nve.no/components/nve-select"
1770
- }
1771
- ]
1772
- },
1773
- {
1774
- "name": "nve-skeleton",
1775
- "description": "Skeletons brukes til å gi en visuell representasjon av hvor innholdet til slutt vil bli tegnet.\n---\n\n\n### **CSS-variabler:**\n - **--border-radius** - The skeleton's border radius. _(default: undefined)_\n- **--color** - The color of the skeleton. _(default: undefined)_\n- **--sheen-color** - The sheen color when the skeleton is in its loading state. _(default: undefined)_\n\n### **Deler:**\n - **base** - The component's base wrapper.\n- **indicator** - The skeleton's indicator which is responsible for its color and animation.",
1776
- "attributes": [
1777
- { "name": "testId", "description": "", "values": [] },
1778
- {
1779
- "name": "effect",
1780
- "description": "Determines which effect the skeleton will use.",
1781
- "values": [
1782
- { "name": "pulse" },
1783
- { "name": "sheen" },
1784
- { "name": "none" }
1785
- ]
1786
- }
1787
- ],
1788
- "references": [
1789
- {
1790
- "name": "Mer info",
1791
- "url": "https://designsystem.nve.no/components/nve-skeleton"
1792
- }
1793
- ]
1794
- },
1795
- {
1796
- "name": "nve-spinner",
1797
- "description": "Ei snurre\n---\n\n\n### **CSS-variabler:**\n - **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the spinner's indicator. _(default: undefined)_\n- **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_\n\n### **Deler:**\n - **base** - The component's base wrapper.",
1798
- "attributes": [],
1799
- "references": [
1800
- {
1801
- "name": "Mer info",
1802
- "url": "https://designsystem.nve.no/components/nve-spinner"
1803
- }
1804
- ]
1805
- },
1806
- {
1807
- "name": "nve-stepper-mobile",
1808
- "description": "\n---\n\n\n### **Hendelser:**\n - **step-click**",
1809
- "attributes": [
1810
- {
1811
- "name": "steps",
1812
- "description": "Steps som skal vises, se StepProps interface for data som skal sendes inn.",
1813
- "values": [{ "name": "StepProps[]" }]
1814
- },
1815
- {
1816
- "name": "hideStepButtons",
1817
- "description": "Skjuler Neste og Forrige knappene slik at du kan implementere dine egne Neste og Forrige knappene.",
1818
- "values": []
1819
- }
1820
- ],
1821
- "references": [
1822
- {
1823
- "name": "Mer info",
1824
- "url": "https://designsystem.nve.no/components/nve-stepper-mobile"
1825
- }
1826
- ]
1827
- },
1828
- {
1829
- "name": "nve-stepper",
1830
- "description": "En stepper-komponent brukes for å bryte ned en kompleks prosess i flere mindre, håndterbare trinn.\nHver trinn representerer en del av prosessen og brukeren kan navigere frem og tilbake mellom trinnene.\nDette gir en strukturert og intuitiv måte å fullføre flertrinnsoppgaver på, som for eksempel skjemaer eller registreringsprosesser.\nSteppers kan være enten horisontale eller vertikale, og kan tilpasses med valideringslogikk og egne knapper.\n---\n\n\n### **Hendelser:**\n - **step-click** - Emittes når et steg blir klikket på. Sender step og index som ligger på event.detail\n\n### **Metoder:**\n - **reRender(): _void_** - Ved endring av props, re-render komponenten eksternt med document.querySelector(\"nve-stepper\")?.reRender();\nDette er nyttig når du vil tvinge en oppdatering av komponenten uten å endre dens interne state.\nEllers vil man ikke se endringene før intern state endres.\n`requestUpdate` er en innebygd Lit funksjon som planlegger en oppdatering av komponenten.\n- **firstUpdated(): _void_** - Metode som kjøres første gang komponenten er lagt til i DOM\n- **nextStep(): _void_** - Metode for å gå til neste steg\n- **prevStep(): _void_** - Metode for å gå til forrige steg\n- **selectStep(index: _number_): _void_** - Metode for å velge et spesifikt steg\n- **finishSteps(): _void_** - Metode som kjøres når alle stegene er fullført\n- **getCurrentIndex(): _number_** - Metode for å hente den gjeldende indeksen\n- **render(): _TemplateResult_** - Hoved render-metode",
1831
- "attributes": [
1832
- {
1833
- "name": "orientation",
1834
- "description": "Hvilken retning Steps skal gå.",
1835
- "values": [{ "name": "horizontal" }, { "name": "vertical" }]
1836
- },
1837
- {
1838
- "name": "endButtonText",
1839
- "description": "Mulighet om å endre teksten på knapp ved siste steg.",
1840
- "values": []
1841
- },
1842
- {
1843
- "name": "steps",
1844
- "description": "Steps som skal vises, se StepProps interface for data som skal sendes inn.",
1845
- "values": [{ "name": "StepProps[]" }]
1846
- },
1847
- {
1848
- "name": "hideStepButtons",
1849
- "description": "Skjuler Neste og Forrige knappene slik at du kan implementere dine egne Neste og Forrige knappene.",
1850
- "values": []
1851
- },
1852
- {
1853
- "name": "hideMobileStepButtons",
1854
- "description": "Skjuler Neste og Forrige knappene på mobilversjonen.",
1855
- "values": []
1856
- },
1857
- {
1858
- "name": "displayMobileVersion",
1859
- "description": "Viser mobilversjonen av Stepper.",
1860
- "values": []
1861
- },
1862
- {
1863
- "name": "hideStateText",
1864
- "description": "Angir om stateText skal skjules for alle trinn",
1865
- "values": []
1866
- },
1867
- {
1868
- "name": "hideDescriptions",
1869
- "description": "Skjuler beskrivelser for alle trinn",
1870
- "values": []
1871
- }
1872
- ],
1873
- "references": [
1874
- {
1875
- "name": "Mer info",
1876
- "url": "https://designsystem.nve.no/components/nve-stepper"
1877
- }
1878
- ]
1879
- },
1880
- {
1881
- "name": "nve-switch",
1882
- "description": "En vippe-bryter med støtte for ikoner.\n---\n\n\n### **Hendelser:**\n - **blur** - Bryter mister fokus\n- **change** - Bryter endres\n- **input** - Bryter endres\n- **focus** - Bryter får fokus\n\n### **Metoder:**\n - **click()** - click, focus og blur sendes til input (checkbox)\n\n### **Spor:**\n - _default_ - Tekst etter bryteren\n- **onicon** - Det første ikonet (til venstre). Synlig når status er PÅ\n- **officon** - Det andre ikonet (til høyre). Synlig når status er AV\n\n### **Deler:**\n - **base** - Topp-element\n- **control** - Element rundt bryteren\n- **thumb** - Bryter-indikatoren\n- **label** - Tekst bak bryteren",
1883
- "attributes": [
1884
- { "name": "testId", "description": "", "values": [] },
1885
- { "name": "title", "description": "", "values": [] },
1886
- { "name": "name", "description": "Navn på switch", "values": [] },
1887
- {
1888
- "name": "value",
1889
- "description": "Switchens verdi, bruk i forms",
1890
- "values": []
1891
- },
1892
- { "name": "disabled", "description": "", "values": [] },
1893
- {
1894
- "name": "checked",
1895
- "description": "Verdien til switchen.",
1896
- "values": []
1897
- },
1898
- {
1899
- "name": "variant",
1900
- "description": "Bestemmer fargevariant",
1901
- "values": [{ "name": "primary" }, { "name": "default" }]
1902
- },
1903
- {
1904
- "name": "labelPosition",
1905
- "description": "Plassering av label-tekst i forhold til bryteren",
1906
- "values": [{ "name": "start" }, { "name": "end" }]
1907
- }
1908
- ],
1909
- "references": [
1910
- {
1911
- "name": "Mer info",
1912
- "url": "https://designsystem.nve.no/components/nve-switch"
1913
- }
1914
- ]
1915
- },
1916
- {
1917
- "name": "nve-tab",
1918
- "description": "En fane som kan brukes i en nve-tab-group.\nFane har ingen egen utforming, den viser kun det som er inni.\nHvis ikke angitt får fanen en unik id som kan brukes for å referere til den automatisk.\n---\n\n\n### **Spor:**\n - **(prefix)** - legg inn innhold som skal vises før hovedinnholdet\n- **(standard)** - legg inn fane teksten\n- **(suffix)** - legg inn innhold som skal vises etter hovedinnholdet\n\n### **Deler:**\n - **base** - Topp-element",
1919
- "attributes": [
1920
- { "name": "testId", "description": "", "values": [] },
1921
- {
1922
- "name": "panel",
1923
- "description": "Navn på panelet, brukes for å referere til fanen i tab-gruppen",
1924
- "values": []
1925
- },
1926
- {
1927
- "name": "size",
1928
- "description": "Fane størrelse",
1929
- "values": [{ "name": "large" }, { "name": "small" }]
1930
- },
1931
- {
1932
- "name": "background",
1933
- "description": "Om fanen skal ha bakgrunn",
1934
- "values": []
1935
- },
1936
- {
1937
- "name": "disabled",
1938
- "description": "Faner kan være disabled",
1939
- "values": []
1940
- }
1941
- ],
1942
- "references": [
1943
- {
1944
- "name": "Mer info",
1945
- "url": "https://designsystem.nve.no/components/nve-tab"
1946
- }
1947
- ]
1948
- },
1949
- {
1950
- "name": "nve-tab-group",
1951
- "description": "Fanegruppe som viser og styrer et sett med faner og tilhørende innholdspaneler.\nHåndterer navigasjon mellom faner, synkronisering av aktive faner og paneler, samt tilgjengelighetsegenskaper.\nSporet 'nav' brukes for å legge til faner, og standardsporet brukes for innholdspaneler. Foreløpig støttes kun horisontal retning på fanene.\nAutomatisk aktivering av faner (når man blar mellom fanene med tastatur) støttes ikke – det kan være uheldig fra et tilgjengelighetsperspektiv.\nFor beste praksis, les mer i seksjonen om tilgjengelighet.\n---\n\n\n### **Hendelser:**\n - **nve-tab-change** - Når aktiv fane endres.\n\n### **Spor:**\n - **(nav)** - legg inn faner her.\n- **(standard)** - legg inn paneler her.\n\n### **CSS-variabler:**\n - **--scroll-button-background** - farge på bakover og fremoverknappene. Standard er #fff og #1b1b1f for dark modus. _(default: undefined)_\n\n### **Deler:**\n - **base** - Topp-element\n- **body** - Innholdet i tab gruppen\n- **nav** - hoved kontainer for fanene\n- **button-backward-base** - Bakoverknapp kontainer\n- **button-forward-base** - Fremoverknapp kontainer",
1952
- "attributes": [
1953
- { "name": "testId", "description": "", "values": [] },
1954
- {
1955
- "name": "background",
1956
- "description": "Om tab gruppen skal ha bakgrunnsfarge",
1957
- "values": []
1958
- },
1959
- {
1960
- "name": "size",
1961
- "description": "Størrelse på tab gruppen",
1962
- "values": [{ "name": "small" }, { "name": "large" }]
1963
- },
1964
- {
1965
- "name": "activeTab",
1966
- "description": "Den aktive fanen i tab gruppen",
1967
- "values": []
1968
- }
1969
- ],
1970
- "references": [
1971
- {
1972
- "name": "Mer info",
1973
- "url": "https://designsystem.nve.no/components/nve-tab-group"
1974
- }
1975
- ]
1976
- },
1977
- {
1978
- "name": "nve-tab-panel",
1979
- "description": "En panel som brukes i en nve-tab-group for å vise innhold relatert til en fane.\nKan ikke brukes utenfor en nve-tab-group.\nHvis ikke angitt får panelet en unik id som kan brukes for å referere til det automatisk.\n---\n\n\n### **Spor:**\n - **(default)** - legg inn innholdet som skal vises\n\n### **Deler:**\n - **base** - hoved kontainer",
1980
- "attributes": [
1981
- { "name": "testId", "description": "", "values": [] },
1982
- {
1983
- "name": "name",
1984
- "description": "Navn på panelet, brukes for å referere til panelet i faner",
1985
- "values": []
1986
- }
1987
- ],
1988
- "references": [
1989
- {
1990
- "name": "Mer info",
1991
- "url": "https://designsystem.nve.no/components/nve-tab-panel"
1992
- }
1993
- ]
1994
- },
1995
- {
1996
- "name": "nve-tag",
1997
- "description": "En tag som brukes for å vise litt info eller for filtre. Har en valgfri lukke-knapp\n---\n\n\n### **Hendelser:**\n - **nve-close** - Bruker klikket på lukk-knappen\n\n### **Spor:**\n - _default_ - Tekst på tag\n- **extra** - Ekstra tekst etter hovedteksten. Vises som standard med slankere tekst\n- **prefix** - Før teksten. Brukes til ikon\n\n### **Deler:**\n - **base** - Topp-element\n- **text** - Hoved-teksten\n- **extra** - Ekstra-tekst\n- **close** - Lukk-ikon",
1998
- "attributes": [
1999
- {
2000
- "name": "variant",
2001
- "description": "Variant",
2002
- "values": [
2003
- { "name": "neutral" },
2004
- { "name": "success" },
2005
- { "name": "info" },
2006
- { "name": "warning" },
2007
- { "name": "error" }
2008
- ]
2009
- },
2010
- {
2011
- "name": "saturation",
2012
- "description": "Saturation - Hvor mettet fargen på tag er",
2013
- "values": [
2014
- { "name": "emphasized" },
2015
- { "name": "subtle" },
2016
- { "name": "default" }
2017
- ]
2018
- },
2019
- {
2020
- "name": "size",
2021
- "description": "Størrelse på komponenten",
2022
- "values": [{ "name": "small" }, { "name": "medium" }]
2023
- },
2024
- { "name": "'extra-text'", "description": "Ekstra tekst", "values": [] },
2025
- {
2026
- "name": "dot",
2027
- "description": "Viser dot-ikon i prefix",
2028
- "values": []
2029
- },
2030
- {
2031
- "name": "'closeable'",
2032
- "description": "Viser lukke-knapp",
2033
- "values": []
2034
- },
2035
- {
2036
- "name": "'close-aria-label'",
2037
- "description": "aria-label på lukke-knapp",
2038
- "values": []
2039
- }
2040
- ],
2041
- "references": [
2042
- {
2043
- "name": "Mer info",
2044
- "url": "https://designsystem.nve.no/components/nve-tag"
2045
- }
2046
- ]
2047
- },
2048
- {
2049
- "name": "nve-textarea",
2050
- "description": "Skal brukes til å lage lang tekstfelt. Min høyde er satt opp til --sizing-2x-small. De fleste attributer som brukes på vanlig textarea\nburde bli støttet her. Hvis det er noe som mangler, bare å legge til.\nMan kan bruke label og tooltip attributer for å vise label over textarea. Samt med helpText. Trenger ikke noe eksta slots per i dag. Trengs ikke å lage separate slots for det.\nSiden vi skulle bruke ikoner inn i textarea var det enklere å lage vår egen komponent enn å leke med sl-textarea\n\nValidering. Siden textarea ikke er shoelace komponent, constraint valdiering skal ikke fungere så bra med andre shoelace komponenter i formen.\nShoelace wrapper alle sine form komponenter i en form kontroll som gjør at alle blir validert samtidig når man bruker constraint validering. Det er ikke en default\nnettlesersen oppførsel. Submit event stopper på den første feil den møter i formen. Per i dag siden vi blander både shoelace komponenter og våre egne\nvåre komponeter skal bli diskriminert i gruppe validering. Derfor anbefales det å bruke custom validering på textarea med setCustomValidation.\n---\n\n\n### **Hendelser:**\n - **eventName**\n- **sl-blur** - trigges når textarea mister fokus\n- **sl-change** - trigges når textarea endrer verdi\n- **sl-input** - trigges når textarea endrer verdi\n- **sl-invalid** - trigges når textarea er invalid\n\n### **Deler:**\n - **form-control** - hoved komponent sitt container\n- **textarea-label** - label og requiredLabel container\n- **base** - textarea og ikone container\n- **help-text-container** - container for hjelpetekst",
2051
- "attributes": [
2052
- {
2053
- "name": "name",
2054
- "description": "Navnet på tekstområdet, sendt som et navn/verdi-par med skjemadata",
2055
- "values": []
2056
- },
2057
- {
2058
- "name": "value",
2059
- "description": "Textarea verdi, sendt som et navn/verdi-par med skjemadata",
2060
- "values": []
2061
- },
2062
- {
2063
- "name": "errorMessage",
2064
- "description": "Feil melding som vises under gruppe hvis validering feiler",
2065
- "values": []
2066
- },
2067
- { "name": "title", "description": "", "values": [] },
2068
- {
2069
- "name": "filled",
2070
- "description": "Viser filled variant",
2071
- "values": []
2072
- },
2073
- { "name": "label", "description": "Label tekst", "values": [] },
2074
- {
2075
- "name": "helpText",
2076
- "description": "Hjelpetekst under textarea",
2077
- "values": []
2078
- },
2079
- {
2080
- "name": "disabled",
2081
- "description": "Om textarea er deaktivert",
2082
- "values": []
2083
- },
2084
- {
2085
- "name": "readonly",
2086
- "description": "Om textarea er skrivebeskyttet",
2087
- "values": []
2088
- },
2089
- {
2090
- "name": "placeholder",
2091
- "description": "Placeholder tekst",
2092
- "values": []
2093
- },
2094
- {
2095
- "name": "required",
2096
- "description": "Om textarea er obligatorisk",
2097
- "values": []
2098
- },
2099
- {
2100
- "name": "requiredLabel",
2101
- "description": "Tekst som vises for å markere at et felt er obligatorisk. Er satt til \"*Obligatorisk\" som standard.",
2102
- "values": []
2103
- },
2104
- {
2105
- "name": "minlength",
2106
- "description": "Den minste lengden på inndata som vil bli betraktet som gyldig.",
2107
- "values": []
2108
- },
2109
- {
2110
- "name": "maxlength",
2111
- "description": "Maksimal lengde på inndata som vil bli betraktet som gyldig.",
2112
- "values": []
2113
- },
2114
- {
2115
- "name": "autocapitalize",
2116
- "description": "Kontrollerer om og hvordan tekstinnput automatisk blir gjort stor som det blir skrevet inn av brukeren.",
2117
- "values": [
2118
- { "name": "off" },
2119
- { "name": "none" },
2120
- { "name": "on" },
2121
- { "name": "sentences" },
2122
- { "name": "words" },
2123
- { "name": "characters" }
2124
- ]
2125
- },
2126
- {
2127
- "name": "autocorrect",
2128
- "description": "Indikerer om nettleserens autokorrekturfunksjon er på eller av.",
2129
- "values": []
2130
- },
2131
- {
2132
- "name": "tooltip",
2133
- "description": "Indikerer om nettleserens autokorrekturfunksjon er på eller av.",
2134
- "values": []
2135
- },
2136
- {
2137
- "name": "testId",
2138
- "description": "Brukes for å kunne identifisere komponenten i tester",
2139
- "values": []
2140
- },
2141
- {
2142
- "name": "inputmode",
2143
- "description": "Forteller nettleseren hvilken type data som vil bli skrevet inn av brukeren, slik at den kan vise det passende virtuelle tastaturet på støttede enheter.",
2144
- "values": [
2145
- { "name": "none" },
2146
- { "name": "text" },
2147
- { "name": "decimal" },
2148
- { "name": "numeric" },
2149
- { "name": "tel" },
2150
- { "name": "search" },
2151
- { "name": "email" },
2152
- { "name": "url" }
2153
- ]
2154
- },
2155
- {
2156
- "name": "rows",
2157
- "description": "Antall rader med tekst i textarea-taggen. Browser-default dersom denne ikke er satt er 2 i alle browsere Bestemmer initiell høyde på textarea-boksen (settes slik at antall rader * font-høyde får plass)",
2158
- "values": []
2159
- }
2160
- ],
2161
- "references": [
2162
- {
2163
- "name": "Mer info",
2164
- "url": "https://designsystem.nve.no/components/nve-textarea"
2165
- }
2166
- ]
2167
- },
2168
- {
2169
- "name": "nve-tooltip",
2170
- "description": "Et verktøyhint. Kan åpnes og lukkes programmatisk eller automatisk med ulike hendelser. Kan ha ulik farge og metning.\n---\n\n\n### **Hendelser:**\n - **sl-show** - Emitted when the tooltip begins to show.\n- **sl-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **sl-hide** - Emitted when the tooltip begins to hide.\n- **sl-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Metoder:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n\n### **Spor:**\n - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n- **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n\n### **CSS-variabler:**\n - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\n\n### **Deler:**\n - **base** - The component's base wrapper, an `<sl-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body where its content is rendered.",
2171
- "attributes": [
2172
- {
2173
- "name": "variant",
2174
- "description": "Variant, bestemmer fargen på tag",
2175
- "values": [
2176
- { "name": "neutral" },
2177
- { "name": "success" },
2178
- { "name": "info" },
2179
- { "name": "warning" },
2180
- { "name": "error" }
2181
- ]
2182
- },
2183
- {
2184
- "name": "saturation",
2185
- "description": "Saturation - Hvor mettet fargen på tooltip er",
2186
- "values": [
2187
- { "name": "emphasized" },
2188
- { "name": "subtle" },
2189
- { "name": "default" }
2190
- ]
2191
- },
2192
- {
2193
- "name": "content",
2194
- "description": "The tooltip's content. If you need to display HTML, use the `content` slot instead.",
2195
- "values": []
2196
- },
2197
- {
2198
- "name": "placement",
2199
- "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
2200
- "values": [
2201
- { "name": "" },
2202
- { "name": "top" },
2203
- { "name": "top-start" },
2204
- { "name": "top-end" },
2205
- { "name": "right" },
2206
- { "name": "right-start" },
2207
- { "name": "right-end" },
2208
- { "name": "bottom" },
2209
- { "name": "bottom-start" },
2210
- { "name": "bottom-end" },
2211
- { "name": "left" },
2212
- { "name": "left-start" },
2213
- { "name": "left-end" }
2214
- ]
2215
- },
2216
- {
2217
- "name": "disabled",
2218
- "description": "Disables the tooltip so it won't show when triggered.",
2219
- "values": []
2220
- },
2221
- {
2222
- "name": "distance",
2223
- "description": "The distance in pixels from which to offset the tooltip away from its target.",
2224
- "values": []
2225
- },
2226
- {
2227
- "name": "open",
2228
- "description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.",
2229
- "values": []
2230
- },
2231
- {
2232
- "name": "skidding",
2233
- "description": "The distance in pixels from which to offset the tooltip along its target.",
2234
- "values": []
2235
- },
2236
- {
2237
- "name": "trigger",
2238
- "description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
2239
- "values": []
2240
- },
2241
- {
2242
- "name": "hoist",
2243
- "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
2244
- "values": []
2245
- }
2246
- ],
2247
- "references": [
2248
- {
2249
- "name": "Mer info",
2250
- "url": "https://designsystem.nve.no/components/nve-tooltip"
2251
- }
2252
- ]
2253
- },
2254
- {
2255
- "name": "nve-warning-level",
2256
- "description": "DangerLevel-komponenten brukes til å vise gjeldende faregrad ved hjelp av farge og et siffer som representerer nivået.\nFaregraden angis med et tall fra 1 til 5, eller et spørsmålstegn (?) dersom nivået er ukjent.\n\nI tillegg kan faregraden støttes av et ekstra ikon/badge som plasseres nederst til høyre i komponenten.\nDette ikonet kan være enten en trekant eller en sirkel (se eksempler nedenfor) for å tiltrekke ekstra oppmerksomhet.\n\nKomponenten kan legges inni button- eller a-elementer for å gi ekstra hover-effekter.\n\nTilgjengelighetsmerkingen (aria-label) kan variere ut fra behov, og det anbefales derfor at brukere selv setter verdiene for ariaLabel.\nLes mer i seksjonen om tilgjengelighet.\n---\n\n\n### **Deler:**\n - **base** - farenivå kontainer\n- **warning-badge** - støtte badge som vises nederst til høyre i faregradskomponenten",
2257
- "attributes": [
2258
- { "name": "testId", "description": "", "values": [] },
2259
- {
2260
- "name": "level",
2261
- "description": "Farenivå. Bestemmer farge og tekst i komponenten",
2262
- "values": [
2263
- { "name": "unknown" },
2264
- { "name": "1" },
2265
- { "name": "2" },
2266
- { "name": "3" },
2267
- { "name": "4" },
2268
- { "name": "5" }
2269
- ]
2270
- },
2271
- {
2272
- "name": "border",
2273
- "description": "Om farenivå skal ha en ramme",
2274
- "values": []
2275
- },
2276
- {
2277
- "name": "warningBadge",
2278
- "description": "Støtte badge type",
2279
- "values": [{ "name": "triangle" }, { "name": "circle" }]
2280
- },
2281
- {
2282
- "name": "ariaLabel",
2283
- "description": "Aria-label tekst for komponenten",
2284
- "values": []
2285
- }
2286
- ],
2287
- "references": [
2288
- {
2289
- "name": "Mer info",
2290
- "url": "https://designsystem.nve.no/components/nve-warning-level"
2291
- }
2292
- ]
2293
- },
2294
- {
2295
- "name": "nve-step",
2296
- "description": "Komponent for et enkelt steg i en stepper\n---\n\n\n### **Metoder:**\n - **firstUpdated(): _void_** - Metode som kjøres første gang komponenten er lagt til i DOM\n- **updated(): _void_** - Metode som kjøres hver gang komponentens oppdateres",
2297
- "attributes": [
2298
- { "name": "label", "description": "Tittel på steget", "values": [] },
2299
- { "name": "index", "description": "Indeks for steget", "values": [] },
2300
- {
2301
- "name": "description",
2302
- "description": "Beskrivelse av steget",
2303
- "values": []
2304
- },
2305
- {
2306
- "name": "state",
2307
- "description": "Stegets tilstand: Ikke startet, påbegynt, fullført eller feilet",
2308
- "values": [{ "name": "StepState" }]
2309
- },
2310
- {
2311
- "name": "selectedStepIndex",
2312
- "description": "Indeks for det valgte steget",
2313
- "values": []
2314
- },
2315
- {
2316
- "name": "isSelected",
2317
- "description": "Angir om steget er valgt",
2318
- "values": []
2319
- },
2320
- {
2321
- "name": "isLast",
2322
- "description": "Angir om steget er det siste i rekken",
2323
- "values": []
2324
- },
2325
- {
2326
- "name": "entranceAllowed",
2327
- "description": "Angir om det er tillatt å gå inn i steget",
2328
- "values": []
2329
- },
2330
- {
2331
- "name": "orientation",
2332
- "description": "Retningen stegene skal gå i: horisontal eller vertikal",
2333
- "values": [{ "name": "horizontal" }, { "name": "vertical" }]
2334
- },
2335
- {
2336
- "name": "hideStateText",
2337
- "description": "Angir om stateText skal skjules",
2338
- "values": []
2339
- },
2340
- {
2341
- "name": "hideDescriptions",
2342
- "description": "Angir om beskrivelser skal skjules",
2343
- "values": []
2344
- }
2345
- ],
2346
- "references": [
2347
- {
2348
- "name": "Mer info",
2349
- "url": "https://designsystem.nve.no/components/nve-step"
2350
- }
2351
- ]
2352
- }
2353
- ]
2354
- }