scb-wc-test 0.1.363 → 0.1.364

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 (193) hide show
  1. package/README.md +194 -194
  2. package/all.js +5 -0
  3. package/index.js +1 -85
  4. package/mvc/components/scb-accordion/scb-accordion-item.js +11 -11
  5. package/mvc/components/scb-accordion/scb-accordion.js +7 -7
  6. package/mvc/components/scb-app-bar/scb-app-bar.js +11 -11
  7. package/mvc/components/scb-avatar/scb-avatar.js +11 -11
  8. package/mvc/components/scb-badge/scb-badge.js +6 -6
  9. package/mvc/components/scb-breadcrumb/scb-breadcrumb-item.js +3 -3
  10. package/mvc/components/scb-breadcrumb/scb-breadcrumb.js +12 -12
  11. package/mvc/components/scb-button/scb-button.js +30 -30
  12. package/mvc/components/scb-calendar/scb-calendar-event.js +3 -3
  13. package/mvc/components/scb-calendar/scb-calendar.js +21 -21
  14. package/mvc/components/scb-calendar-card/scb-calendar-card.js +16 -16
  15. package/mvc/components/scb-card/scb-card.js +45 -45
  16. package/mvc/components/scb-checkbox/scb-checkbox-group.js +4 -4
  17. package/mvc/components/scb-checkbox/scb-checkbox.js +7 -7
  18. package/mvc/components/scb-chevron/scb-chevron.js +3 -3
  19. package/mvc/components/scb-chip/scb-chip.js +6 -6
  20. package/mvc/components/scb-collapse/scb-collapse.js +4 -4
  21. package/mvc/components/scb-cookies-consent/scb-cookies-consent.js +3 -3
  22. package/mvc/components/scb-datepicker/scb-datepicker.js +18 -18
  23. package/mvc/components/scb-dialog/scb-dialog.js +25 -25
  24. package/mvc/components/scb-divider/scb-divider.js +2 -2
  25. package/mvc/components/scb-drawer/scb-drawer.js +6 -6
  26. package/mvc/components/scb-drop-zone/scb-drop-zone.js +28 -28
  27. package/mvc/components/scb-dropdown/scb-dropdown.js +9 -9
  28. package/mvc/components/scb-fab/scb-fab.js +6 -6
  29. package/mvc/components/scb-fact-card/scb-fact-card-content.js +6 -6
  30. package/mvc/components/scb-fact-card/scb-fact-card.js +7 -7
  31. package/mvc/components/scb-footer/scb-footer-section.js +2 -2
  32. package/mvc/components/scb-footer/scb-footer.js +33 -33
  33. package/mvc/components/scb-gallery-grid/scb-gallery-grid.js +10 -10
  34. package/mvc/components/scb-grid/scb-grid-item.js +2 -2
  35. package/mvc/components/scb-grid/scb-grid.js +2 -2
  36. package/mvc/components/scb-grid/scb-stack.js +2 -2
  37. package/mvc/components/scb-header/scb-header-menu-group.js +1 -1
  38. package/mvc/components/scb-header/scb-header-menu-item.js +2 -2
  39. package/mvc/components/scb-header/scb-header-tab.js +2 -2
  40. package/mvc/components/scb-header/scb-header-utility.js +1 -1
  41. package/mvc/components/scb-header/scb-header.js +35 -35
  42. package/mvc/components/scb-horizontal-scroller/scb-horizontal-scroller.js +7 -7
  43. package/mvc/components/scb-icon-button/scb-icon-button.js +26 -26
  44. package/mvc/components/scb-keyfigure-card/scb-keyfigure-card.js +15 -15
  45. package/mvc/components/scb-link/scb-link.js +9 -9
  46. package/mvc/components/scb-list/scb-list-item.js +19 -19
  47. package/mvc/components/scb-list/scb-list.js +4 -4
  48. package/mvc/components/scb-menu/scb-menu-item.js +9 -9
  49. package/mvc/components/scb-menu/scb-menu-section.js +4 -4
  50. package/mvc/components/scb-menu/scb-menu.js +5 -5
  51. package/mvc/components/scb-menu/scb-sub-menu.js +3 -3
  52. package/mvc/components/scb-nav/scb-nav-item.js +2 -2
  53. package/mvc/components/scb-nav/scb-nav.js +3 -3
  54. package/mvc/components/scb-notification-card/scb-notification-card.js +13 -13
  55. package/mvc/components/scb-options-menu/scb-options-menu-item.js +3 -3
  56. package/mvc/components/scb-options-menu/scb-options-menu.js +3 -3
  57. package/mvc/components/scb-options-menu/scb-options-sub-menu.js +3 -3
  58. package/mvc/components/scb-overlay/scb-overlay.js +5 -5
  59. package/mvc/components/scb-pagination/scb-pagination.js +26 -26
  60. package/mvc/components/scb-progress-indicator/scb-progress-indicator.js +6 -6
  61. package/mvc/components/scb-progress-stepper/scb-progress-step.js +8 -8
  62. package/mvc/components/scb-progress-stepper/scb-progress-stepper.js +3 -3
  63. package/mvc/components/scb-radio-button/scb-radio-button.js +9 -9
  64. package/mvc/components/scb-radio-button/scb-radio-group.js +5 -5
  65. package/mvc/components/scb-scrollspy/scb-scrollspy.js +7 -7
  66. package/mvc/components/scb-search/scb-search.js +7 -7
  67. package/mvc/components/scb-segmented-button/scb-segmented-button.js +2 -2
  68. package/mvc/components/scb-segmented-button/scb-segmented-item.js +6 -6
  69. package/mvc/components/scb-select/scb-select-option.js +6 -6
  70. package/mvc/components/scb-select/scb-select.js +6 -6
  71. package/mvc/components/scb-skeleton/scb-skeleton.js +3 -3
  72. package/mvc/components/scb-slider/scb-slider.js +4 -4
  73. package/mvc/components/scb-snackbar/scb-snackbar.js +10 -10
  74. package/mvc/components/scb-status-pill/scb-status-pill.js +4 -4
  75. package/mvc/components/scb-stepper/scb-step.js +11 -11
  76. package/mvc/components/scb-stepper/scb-stepper.js +3 -3
  77. package/mvc/components/scb-switch/scb-switch.js +5 -5
  78. package/mvc/components/scb-table/scb-table.js +3 -3
  79. package/mvc/components/scb-table-advanced/scb-table-advanced.js +4 -4
  80. package/mvc/components/scb-tabs/scb-primary-tab.js +2 -2
  81. package/mvc/components/scb-tabs/scb-secondary-tab.js +2 -2
  82. package/mvc/components/scb-tabs/scb-tabs.js +2 -2
  83. package/mvc/components/scb-textfield/scb-textfield.js +24 -24
  84. package/mvc/components/scb-toc/scb-toc-item.js +5 -5
  85. package/mvc/components/scb-toc/scb-toc.js +4 -4
  86. package/mvc/components/scb-tooltip/scb-tooltip.js +7 -7
  87. package/mvc/components/scb-vignette/scb-vignette.js +3 -3
  88. package/mvc/components/scb-viz/scb-viz-actions-runtime.js +2 -2
  89. package/mvc/components/scb-viz/scb-viz-print-runtime.js +13 -13
  90. package/mvc/components/scb-viz/scb-viz-series-differentiation-registry.js +1 -1
  91. package/mvc/components/scb-viz/scb-viz-series-differentiation-runtime.js +1 -1
  92. package/mvc/components/scb-viz/scb-viz-table-runtime.js +1 -1
  93. package/mvc/components/scb-viz/scb-viz.js +14 -14
  94. package/mvc/scb-logo.svg +20 -20
  95. package/mvc/scb.svg +13 -13
  96. package/mvc/vendor/assertClassBrand.js +1 -0
  97. package/mvc/vendor/classPrivateFieldGet2.js +1 -0
  98. package/mvc/vendor/decorate.js +1 -0
  99. package/mvc/vendor/preload-helper.js +1 -1
  100. package/mvc/vendor/vendor-material.js +117 -549
  101. package/mvc/vendor/vendor.js +4 -84
  102. package/package.json +10 -2
  103. package/scb-accordion/scb-accordion-item.js +166 -175
  104. package/scb-accordion/scb-accordion.js +119 -122
  105. package/scb-app-bar/scb-app-bar.js +206 -200
  106. package/scb-avatar/scb-avatar.js +104 -120
  107. package/scb-badge/scb-badge.js +94 -97
  108. package/scb-breadcrumb/scb-breadcrumb-item.js +47 -59
  109. package/scb-breadcrumb/scb-breadcrumb.js +166 -169
  110. package/scb-button/scb-button.js +138 -169
  111. package/scb-calendar/scb-calendar-event.js +43 -55
  112. package/scb-calendar/scb-calendar.js +582 -520
  113. package/scb-calendar-card/scb-calendar-card.js +187 -174
  114. package/scb-card/scb-card.js +694 -689
  115. package/scb-checkbox/scb-checkbox-group.js +75 -80
  116. package/scb-checkbox/scb-checkbox.js +195 -218
  117. package/scb-chevron/scb-chevron.js +33 -40
  118. package/scb-chip/scb-chip.js +193 -237
  119. package/scb-collapse/scb-collapse.js +185 -196
  120. package/scb-cookies-consent/scb-cookies-consent.js +95 -102
  121. package/scb-datepicker/scb-datepicker.js +289 -330
  122. package/scb-dialog/scb-dialog.js +354 -411
  123. package/scb-divider/scb-divider.js +50 -58
  124. package/scb-drawer/scb-drawer.js +193 -237
  125. package/scb-drop-zone/scb-drop-zone.js +555 -588
  126. package/scb-dropdown/scb-dropdown.js +357 -424
  127. package/scb-fab/scb-fab.js +89 -98
  128. package/scb-fact-card/scb-fact-card-content.js +44 -47
  129. package/scb-fact-card/scb-fact-card.js +165 -160
  130. package/scb-footer/scb-footer-section.js +20 -25
  131. package/scb-footer/scb-footer.js +189 -201
  132. package/scb-gallery-grid/scb-gallery-grid.js +129 -150
  133. package/scb-grid/scb-grid-item.js +70 -69
  134. package/scb-grid/scb-grid.js +100 -90
  135. package/scb-grid/scb-stack.js +87 -88
  136. package/scb-header/scb-header-menu-group.js +20 -20
  137. package/scb-header/scb-header-menu-item.js +17 -30
  138. package/scb-header/scb-header-tab.js +20 -30
  139. package/scb-header/scb-header-utility.js +26 -26
  140. package/scb-header/scb-header.js +956 -1082
  141. package/scb-horizontal-scroller/scb-horizontal-scroller.js +213 -225
  142. package/scb-icon-button/scb-icon-button.js +220 -264
  143. package/scb-keyfigure-card/scb-keyfigure-card.js +160 -166
  144. package/scb-link/scb-link.js +87 -91
  145. package/scb-list/scb-list-item.js +158 -184
  146. package/scb-list/scb-list.js +98 -106
  147. package/scb-menu/scb-menu-item.js +188 -211
  148. package/scb-menu/scb-menu-section.js +24 -31
  149. package/scb-menu/scb-menu.js +86 -98
  150. package/scb-menu/scb-sub-menu.js +30 -43
  151. package/scb-nav/scb-nav-item.js +68 -74
  152. package/scb-nav/scb-nav.js +164 -172
  153. package/scb-notification-card/scb-notification-card.js +157 -182
  154. package/scb-options-menu/scb-options-menu-item.js +167 -164
  155. package/scb-options-menu/scb-options-menu.js +154 -157
  156. package/scb-options-menu/scb-options-sub-menu.js +39 -44
  157. package/scb-overlay/scb-overlay.js +57 -65
  158. package/scb-pagination/scb-pagination.js +253 -283
  159. package/scb-progress-indicator/scb-progress-indicator.js +134 -140
  160. package/scb-progress-stepper/scb-progress-step.js +92 -99
  161. package/scb-progress-stepper/scb-progress-stepper.js +77 -79
  162. package/scb-radio-button/scb-radio-button.js +138 -156
  163. package/scb-radio-button/scb-radio-group.js +185 -237
  164. package/scb-scrollspy/scb-scrollspy.js +610 -586
  165. package/scb-search/scb-search.js +392 -397
  166. package/scb-segmented-button/scb-segmented-button.js +182 -206
  167. package/scb-segmented-button/scb-segmented-item.js +62 -68
  168. package/scb-select/scb-select-option.js +33 -51
  169. package/scb-select/scb-select.js +274 -286
  170. package/scb-skeleton/scb-skeleton.js +58 -68
  171. package/scb-slider/scb-slider.js +75 -83
  172. package/scb-snackbar/scb-snackbar.js +132 -152
  173. package/scb-status-pill/scb-status-pill.js +57 -64
  174. package/scb-stepper/scb-step.js +127 -130
  175. package/scb-stepper/scb-stepper.js +195 -224
  176. package/scb-switch/scb-switch.js +135 -154
  177. package/scb-table/scb-table.js +154 -175
  178. package/scb-table-advanced/scb-table-advanced.js +273 -306
  179. package/scb-tabs/scb-primary-tab.js +62 -83
  180. package/scb-tabs/scb-secondary-tab.js +62 -87
  181. package/scb-tabs/scb-tabs.js +71 -81
  182. package/scb-textfield/scb-textfield.js +454 -488
  183. package/scb-toc/scb-toc-item.js +222 -229
  184. package/scb-toc/scb-toc.js +86 -95
  185. package/scb-tooltip/scb-tooltip.js +251 -362
  186. package/scb-vignette/scb-vignette.js +55 -59
  187. package/scb-viz/scb-viz-actions-runtime.js +142 -165
  188. package/scb-viz/scb-viz-print-runtime.js +43 -46
  189. package/scb-viz/scb-viz-series-differentiation-registry.js +109 -98
  190. package/scb-viz/scb-viz-series-differentiation-runtime.js +120 -162
  191. package/scb-viz/scb-viz-table-runtime.js +81 -88
  192. package/scb-viz/scb-viz.js +1676 -1878
  193. package/scb-wc-test.bundle.js +3574 -4392
package/README.md CHANGED
@@ -1,194 +1,194 @@
1
- # Om SCB Web Components Test
2
-
3
- > ⚠️ **Testpaket**
4
- > `scb-wc-test` innehåller komponenter under utveckling. API, utseende och beteende kan ändras eller tas bort mellan versioner.
5
-
6
- SCB Web Components(test) finns för att underlätta skapandet av enhetliga, tillgängliga och användbara webbapplikationer.
7
-
8
- Komponenterna bygger på:
9
- - [Lit](https://lit.dev/)
10
- - [Material Web Components](https://material-web.dev/about/intro/)
11
-
12
- ## Storybook och dokumentation (internt)
13
-
14
- Testkomponenterna dokumenteras och demonstreras i Storybook på SCB:s interna testadress:
15
-
16
- - Test: <https://webcomponentstest.scb.intra>
17
-
18
- Produktionskomponenterna finns på:
19
-
20
- - Prod: <https://webcomponents.scb.intra>
21
-
22
- ---
23
-
24
- ## Kom igång
25
-
26
- > **Obs:** Kör alla kommandon i mappen där din `package.json` ligger.
27
- > Har du ingen? Kör `npm init -y` i projektroten (eller annan lämplig mapp).
28
-
29
- Installera paketet:
30
-
31
- ```sh
32
- npm install scb-wc-test
33
- ```
34
-
35
- ---
36
-
37
- ## Alternativ 1: Använd som ES‑moduler (t.ex. i React, Vue, SPA)
38
-
39
- Importera CSS och de testkomponenter du använder (bäst för tree‑shaking):
40
-
41
- ```js
42
- // Global CSS + tokens (måste bara importeras en gång)
43
- import 'scb-wc-test/scb-wc-test.css';
44
- import 'scb-wc-test/scb-typography.css';
45
-
46
- // Enskilda web components
47
- import 'scb-wc-test/scb-button';
48
- import 'scb-wc-test/scb-accordion';
49
- ```
50
-
51
- Vill du ladda allt finns en samlingsfil (inte rekommenderat i större appar):
52
-
53
- ```js
54
- // Global CSS + tokens (måste bara importeras en gång)
55
- import 'scb-wc-test/scb-wc-test.css';
56
- import 'scb-wc-test/scb-typography.css';
57
- import 'scb-wc-test/all';
58
- ```
59
-
60
- ### Självhosta fonter (Inter + Material Symbols)
61
-
62
- Som standard laddas fonterna från Google Fonts via `scb-wc-test.css`.
63
- Vill du selfhosta kan du istället importera:
64
-
65
- ```js
66
- import 'scb-wc-test/scb-wc-test-selfhost.css';
67
- ```
68
-
69
- Då används paketets egna fontfiler under `node_modules/scb-wc-test/fonts/`.
70
-
71
- ---
72
-
73
- ## Alternativ 2: Använd i MVC/MPA via `<script type="module">`
74
-
75
- Det här läget använder den färdig‑splittade **MVC‑ESM**‑builden som följer med paketet under:
76
-
77
- ```text
78
- node_modules/scb-wc-test/mvc/
79
- ```
80
-
81
- ### 2.1) Rekommenderat: ett npm‑script för att kopiera UI‑filer
82
-
83
- Lägg till i din apps `package.json`:
84
-
85
- ```jsonc
86
- {
87
- "scripts": {
88
- "ui:install": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/scb-wc-test/mvc');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc-test?');process.exit(1);}const start=process.env.INIT_CWD||process.cwd();const ov=process.env.npm_config_ui_wwwroot;function findBase(){if(ov){return p.isAbsolute(ov)?ov:p.resolve(start,ov);}let d=start;while(true){const cand=p.join(d,'wwwroot');if(fs.existsSync(cand)) return cand;const up=p.dirname(d);if(up===d) return p.resolve(start,'wwwroot');d=up;}}const base=findBase();const dst=p.resolve(base,'ui');fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(base,{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\""
89
- }
90
- }
91
- ```
92
-
93
- Kör sedan:
94
-
95
- ```sh
96
- npm run ui:install
97
- ```
98
-
99
- Det kopierar hela `node_modules/scb-wc-test/mvc/` till `wwwroot/ui/` i din applikation (komponenter, vendor och CSS).
100
-
101
- ### 2.2) Ladda filer i din layout (Razor, .cshtml, klassisk MVC)
102
-
103
- Du kan byta till `~/ui/scb-wc-test-selfhost.css` om du vill selfhosta fonterna (mappen `ui/fonts/` kopieras av `ui:install`).
104
-
105
- ```html
106
- <!-- Lägg helst i <head> -->
107
- <link rel="stylesheet" href="~/ui/scb-wc-test.css" />
108
- <link rel="stylesheet" href="~/ui/scb-typography.css" />
109
-
110
- <!-- Ladda ENDAST de komponenter du använder på sidan, gärna precis före </body> -->
111
- <script type="module" src="~/ui/components/scb-link/scb-link.js"></script>
112
- <script type="module" src="~/ui/components/scb-button/scb-button.js"></script>
113
- ```
114
-
115
- ### 2.3) CI/CD‑exempel
116
-
117
- Kör samma script i din pipeline:
118
-
119
- ```yaml
120
- steps:
121
- - script: npm ci
122
- - script: npm run ui:install
123
- ```
124
-
125
- Behöver du en annan webbrotsökväg (t.ex. om din `wwwroot` ligger någon annanstans) kan du ange flaggan:
126
-
127
- ```yaml
128
- - script: npm run ui:install --ui_wwwroot=../wwwroot
129
- ```
130
-
131
- ---
132
-
133
- ## Alternativ 3: Bundlad version (IIFE) för äldre miljöer
134
-
135
- Om ESM inte stöds kan du använda den bundlade test‑varianten från paketroten.
136
- Flytta följande två filer från `node_modules/scb-wc-test` och använd dem i applikationen:
137
-
138
- ```text
139
- node_modules/scb-wc-test/scb-wc-test.bundle.js
140
- node_modules/scb-wc-test/scb-wc-test.css
141
- ```
142
-
143
- ```html
144
- <link rel="stylesheet" href="scb-wc-test.css">
145
- <link rel="stylesheet" href="scb-typography.css" />
146
- <script src="scb-wc-test.bundle.js"></script>
147
- ```
148
-
149
- > **Obs:** Blanda inte MVC‑ESM och IIFE på samma sida.
150
-
151
- ---
152
-
153
- ## Alternativ 4: Blazor (Server och WebAssembly)
154
-
155
- SCB Web Components fungerar även i Blazor‑appar när du vill använda samma komponenter i både MVC/MPA och Blazor.
156
-
157
- Grundprincipen är samma som för `scb-wc`:
158
-
159
- 1. Använd MVC‑ESM‑builden (`node_modules/scb-wc-test/mvc`) och kopiera den till `wwwroot/ui` med `ui:install`.
160
- 2. Ladda `scb-blazor-bridge.js` från `wwwroot/ui` i din Blazor‑layout.
161
- 3. Lägg till (eller återanvänd) `ScbBlazorInteropBase` i din lösning.
162
-
163
- ### 4.1) Script i Blazor-projektets `package.json`
164
-
165
- Lägg till ett script som kopierar interop-filen från `node_modules` till ditt projekt (till exempel mappen `ScbBlazor`). Utöver `ui:install`-scriptet från MVC-exemplet ovan. Så att det till exempel blir så här i din `package.json`:
166
-
167
- ```jsonc
168
- {
169
- "scripts": {
170
- "ui:install": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/scb-wc-test/mvc');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc-test?');process.exit(1);}const start=process.env.INIT_CWD||process.cwd();const ov=process.env.npm_config_ui_wwwroot;function findBase(){if(ov){return p.isAbsolute(ov)?ov:p.resolve(start,ov);}let d=start;while(true){const cand=p.join(d,'wwwroot');if(fs.existsSync(cand)) return cand;const up=p.dirname(d);if(up===d) return p.resolve(start,'wwwroot');d=up;}}const base=findBase();const dst=p.resolve(base,'ui');fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(base,{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\"",
171
- "ui:blazor:interop": "node -e \"const fs=require('fs'),p=require('path');const start=process.env.INIT_CWD||process.cwd();const candidates=['node_modules/scb-wc-test/blazor/ScbBlazorInteropBase.cs','node_modules/scb-wc/blazor/ScbBlazorInteropBase.cs'];const src=candidates.find(f=>fs.existsSync(f));if(!src){console.error('Hittar inte ScbBlazorInteropBase.cs i scb-wc-test eller scb-wc. Har du kört npm install scb-wc-test?');process.exit(1);}const dst=p.resolve(start,'ScbBlazor/ScbBlazorInteropBase.cs');fs.mkdirSync(p.dirname(dst),{recursive:true});fs.copyFileSync(src,dst);console.log('Kopierade '+src+' → '+dst);\""
172
- }
173
- }
174
- ```
175
-
176
- Exempel på layout:
177
-
178
- ```html
179
- <link rel="stylesheet" href="~/ui/scb-wc-test.css" />
180
- <link rel="stylesheet" href="~/ui/scb-typography.css" />
181
-
182
- <script type="module" src="~/ui/scb-blazor-bridge.js"></script>
183
- ```
184
-
185
- `ScbBlazorInteropBase` är samma bas‑klass som används med prodpaketet. Du kan därför dela samma C#‑fil mellan projekt som använder `scb-wc` och `scb-wc-test`.
186
-
187
- ---
188
-
189
- ## Viktigt
190
-
191
- - `scb-wc-test` är ett **testpaket**. Komponenter kan ändras eller tas bort mellan versioner. Använd inte paketet i externa produktionsmiljöer.
192
- - **Kör kommandon i mappen med din `package.json`.** Placeringen av `package.json` styr standardmål för `ui:install` (rot → `wwwroot/ui`, `ClientApp/` → använd `--ui_wwwroot=../wwwroot`).
193
- - **Blanda inte MVC‑ESM och IIFE på samma sida.** Välj en distributionsform per sida/app.
194
- - **Blazor:** Se till att `scb-blazor-bridge.js` laddas efter att komponent‑JS:et finns på sidan, och att `ScbBlazorInteropBase` inte dupliceras i flera namespaces i samma lösning.
1
+ # Om SCB Web Components Test
2
+
3
+ > ⚠️ **Testpaket**
4
+ > `scb-wc-test` innehåller komponenter under utveckling. API, utseende och beteende kan ändras eller tas bort mellan versioner.
5
+
6
+ SCB Web Components(test) finns för att underlätta skapandet av enhetliga, tillgängliga och användbara webbapplikationer.
7
+
8
+ Komponenterna bygger på:
9
+ - [Lit](https://lit.dev/)
10
+ - [Material Web Components](https://material-web.dev/about/intro/)
11
+
12
+ ## Storybook och dokumentation (internt)
13
+
14
+ Testkomponenterna dokumenteras och demonstreras i Storybook på SCB:s interna testadress:
15
+
16
+ - Test: <https://webcomponentstest.scb.intra>
17
+
18
+ Produktionskomponenterna finns på:
19
+
20
+ - Prod: <https://webcomponents.scb.intra>
21
+
22
+ ---
23
+
24
+ ## Kom igång
25
+
26
+ > **Obs:** Kör alla kommandon i mappen där din `package.json` ligger.
27
+ > Har du ingen? Kör `npm init -y` i projektroten (eller annan lämplig mapp).
28
+
29
+ Installera paketet:
30
+
31
+ ```sh
32
+ npm install scb-wc-test
33
+ ```
34
+
35
+ ---
36
+
37
+ ## Alternativ 1: Använd som ES‑moduler (t.ex. i React, Vue, SPA)
38
+
39
+ Importera CSS och de testkomponenter du använder (bäst för tree‑shaking):
40
+
41
+ ```js
42
+ // Global CSS + tokens (måste bara importeras en gång)
43
+ import 'scb-wc-test/scb-wc-test.css';
44
+ import 'scb-wc-test/scb-typography.css';
45
+
46
+ // Enskilda web components
47
+ import 'scb-wc-test/scb-button';
48
+ import 'scb-wc-test/scb-accordion';
49
+ ```
50
+
51
+ Vill du ladda allt finns en samlingsfil (inte rekommenderat i större appar):
52
+
53
+ ```js
54
+ // Global CSS + tokens (måste bara importeras en gång)
55
+ import 'scb-wc-test/scb-wc-test.css';
56
+ import 'scb-wc-test/scb-typography.css';
57
+ import 'scb-wc-test/all';
58
+ ```
59
+
60
+ ### Självhosta fonter (Inter + Material Symbols)
61
+
62
+ Som standard laddas fonterna från Google Fonts via `scb-wc-test.css`.
63
+ Vill du selfhosta kan du istället importera:
64
+
65
+ ```js
66
+ import 'scb-wc-test/scb-wc-test-selfhost.css';
67
+ ```
68
+
69
+ Då används paketets egna fontfiler under `node_modules/scb-wc-test/fonts/`.
70
+
71
+ ---
72
+
73
+ ## Alternativ 2: Använd i MVC/MPA via `<script type="module">`
74
+
75
+ Det här läget använder den färdig‑splittade **MVC‑ESM**‑builden som följer med paketet under:
76
+
77
+ ```text
78
+ node_modules/scb-wc-test/mvc/
79
+ ```
80
+
81
+ ### 2.1) Rekommenderat: ett npm‑script för att kopiera UI‑filer
82
+
83
+ Lägg till i din apps `package.json`:
84
+
85
+ ```jsonc
86
+ {
87
+ "scripts": {
88
+ "ui:install": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/scb-wc-test/mvc');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc-test?');process.exit(1);}const start=process.env.INIT_CWD||process.cwd();const ov=process.env.npm_config_ui_wwwroot;function findBase(){if(ov){return p.isAbsolute(ov)?ov:p.resolve(start,ov);}let d=start;while(true){const cand=p.join(d,'wwwroot');if(fs.existsSync(cand)) return cand;const up=p.dirname(d);if(up===d) return p.resolve(start,'wwwroot');d=up;}}const base=findBase();const dst=p.resolve(base,'ui');fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(base,{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\""
89
+ }
90
+ }
91
+ ```
92
+
93
+ Kör sedan:
94
+
95
+ ```sh
96
+ npm run ui:install
97
+ ```
98
+
99
+ Det kopierar hela `node_modules/scb-wc-test/mvc/` till `wwwroot/ui/` i din applikation (komponenter, vendor och CSS).
100
+
101
+ ### 2.2) Ladda filer i din layout (Razor, .cshtml, klassisk MVC)
102
+
103
+ Du kan byta till `~/ui/scb-wc-test-selfhost.css` om du vill selfhosta fonterna (mappen `ui/fonts/` kopieras av `ui:install`).
104
+
105
+ ```html
106
+ <!-- Lägg helst i <head> -->
107
+ <link rel="stylesheet" href="~/ui/scb-wc-test.css" />
108
+ <link rel="stylesheet" href="~/ui/scb-typography.css" />
109
+
110
+ <!-- Ladda ENDAST de komponenter du använder på sidan, gärna precis före </body> -->
111
+ <script type="module" src="~/ui/components/scb-link/scb-link.js"></script>
112
+ <script type="module" src="~/ui/components/scb-button/scb-button.js"></script>
113
+ ```
114
+
115
+ ### 2.3) CI/CD‑exempel
116
+
117
+ Kör samma script i din pipeline:
118
+
119
+ ```yaml
120
+ steps:
121
+ - script: npm ci
122
+ - script: npm run ui:install
123
+ ```
124
+
125
+ Behöver du en annan webbrotsökväg (t.ex. om din `wwwroot` ligger någon annanstans) kan du ange flaggan:
126
+
127
+ ```yaml
128
+ - script: npm run ui:install --ui_wwwroot=../wwwroot
129
+ ```
130
+
131
+ ---
132
+
133
+ ## Alternativ 3: Bundlad version (IIFE) för äldre miljöer
134
+
135
+ Om ESM inte stöds kan du använda den bundlade test‑varianten från paketroten.
136
+ Flytta följande två filer från `node_modules/scb-wc-test` och använd dem i applikationen:
137
+
138
+ ```text
139
+ node_modules/scb-wc-test/scb-wc-test.bundle.js
140
+ node_modules/scb-wc-test/scb-wc-test.css
141
+ ```
142
+
143
+ ```html
144
+ <link rel="stylesheet" href="scb-wc-test.css">
145
+ <link rel="stylesheet" href="scb-typography.css" />
146
+ <script src="scb-wc-test.bundle.js"></script>
147
+ ```
148
+
149
+ > **Obs:** Blanda inte MVC‑ESM och IIFE på samma sida.
150
+
151
+ ---
152
+
153
+ ## Alternativ 4: Blazor (Server och WebAssembly)
154
+
155
+ SCB Web Components fungerar även i Blazor‑appar när du vill använda samma komponenter i både MVC/MPA och Blazor.
156
+
157
+ Grundprincipen är samma som för `scb-wc`:
158
+
159
+ 1. Använd MVC‑ESM‑builden (`node_modules/scb-wc-test/mvc`) och kopiera den till `wwwroot/ui` med `ui:install`.
160
+ 2. Ladda `scb-blazor-bridge.js` från `wwwroot/ui` i din Blazor‑layout.
161
+ 3. Lägg till (eller återanvänd) `ScbBlazorInteropBase` i din lösning.
162
+
163
+ ### 4.1) Script i Blazor-projektets `package.json`
164
+
165
+ Lägg till ett script som kopierar interop-filen från `node_modules` till ditt projekt (till exempel mappen `ScbBlazor`). Utöver `ui:install`-scriptet från MVC-exemplet ovan. Så att det till exempel blir så här i din `package.json`:
166
+
167
+ ```jsonc
168
+ {
169
+ "scripts": {
170
+ "ui:install": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/scb-wc-test/mvc');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc-test?');process.exit(1);}const start=process.env.INIT_CWD||process.cwd();const ov=process.env.npm_config_ui_wwwroot;function findBase(){if(ov){return p.isAbsolute(ov)?ov:p.resolve(start,ov);}let d=start;while(true){const cand=p.join(d,'wwwroot');if(fs.existsSync(cand)) return cand;const up=p.dirname(d);if(up===d) return p.resolve(start,'wwwroot');d=up;}}const base=findBase();const dst=p.resolve(base,'ui');fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(base,{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\"",
171
+ "ui:blazor:interop": "node -e \"const fs=require('fs'),p=require('path');const start=process.env.INIT_CWD||process.cwd();const candidates=['node_modules/scb-wc-test/blazor/ScbBlazorInteropBase.cs','node_modules/scb-wc/blazor/ScbBlazorInteropBase.cs'];const src=candidates.find(f=>fs.existsSync(f));if(!src){console.error('Hittar inte ScbBlazorInteropBase.cs i scb-wc-test eller scb-wc. Har du kört npm install scb-wc-test?');process.exit(1);}const dst=p.resolve(start,'ScbBlazor/ScbBlazorInteropBase.cs');fs.mkdirSync(p.dirname(dst),{recursive:true});fs.copyFileSync(src,dst);console.log('Kopierade '+src+' → '+dst);\""
172
+ }
173
+ }
174
+ ```
175
+
176
+ Exempel på layout:
177
+
178
+ ```html
179
+ <link rel="stylesheet" href="~/ui/scb-wc-test.css" />
180
+ <link rel="stylesheet" href="~/ui/scb-typography.css" />
181
+
182
+ <script type="module" src="~/ui/scb-blazor-bridge.js"></script>
183
+ ```
184
+
185
+ `ScbBlazorInteropBase` är samma bas‑klass som används med prodpaketet. Du kan därför dela samma C#‑fil mellan projekt som använder `scb-wc` och `scb-wc-test`.
186
+
187
+ ---
188
+
189
+ ## Viktigt
190
+
191
+ - `scb-wc-test` är ett **testpaket**. Komponenter kan ändras eller tas bort mellan versioner. Använd inte paketet i externa produktionsmiljöer.
192
+ - **Kör kommandon i mappen med din `package.json`.** Placeringen av `package.json` styr standardmål för `ui:install` (rot → `wwwroot/ui`, `ClientApp/` → använd `--ui_wwwroot=../wwwroot`).
193
+ - **Blanda inte MVC‑ESM och IIFE på samma sida.** Välj en distributionsform per sida/app.
194
+ - **Blazor:** Se till att `scb-blazor-bridge.js` laddas efter att komponent‑JS:et finns på sidan, och att `ScbBlazorInteropBase` inte dupliceras i flera namespaces i samma lösning.
package/all.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import './all.js';
2
2
  import './blazor/scb-blazor-bridge.js';
3
3
  import './index.js';
4
+ import './index2.js';
4
5
  import './mvc/components/all.js';
5
6
  import './mvc/components/scb-accordion/scb-accordion-item.js';
6
7
  import './mvc/components/scb-accordion/scb-accordion.js';
@@ -93,6 +94,9 @@ import './mvc/components/scb-viz/scb-viz-series-differentiation-runtime.js';
93
94
  import './mvc/components/scb-viz/scb-viz-table-runtime.js';
94
95
  import './mvc/components/scb-viz/scb-viz.js';
95
96
  import './mvc/scb-blazor-bridge.js';
97
+ import './mvc/vendor/assertClassBrand.js';
98
+ import './mvc/vendor/classPrivateFieldGet2.js';
99
+ import './mvc/vendor/decorate.js';
96
100
  import './mvc/vendor/preload-helper.js';
97
101
  import './mvc/vendor/vendor-lit.js';
98
102
  import './mvc/vendor/vendor-material.js';
@@ -187,3 +191,4 @@ import './scb-viz/scb-viz-series-differentiation-registry.js';
187
191
  import './scb-viz/scb-viz-series-differentiation-runtime.js';
188
192
  import './scb-viz/scb-viz-table-runtime.js';
189
193
  import './scb-viz/scb-viz.js';
194
+ import './_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js';
package/index.js CHANGED
@@ -1,85 +1 @@
1
- import "./scb-accordion/scb-accordion-item.js";
2
- import "./scb-accordion/scb-accordion.js";
3
- import "./scb-app-bar/scb-app-bar.js";
4
- import "./scb-avatar/scb-avatar.js";
5
- import "./scb-badge/scb-badge.js";
6
- import "./scb-breadcrumb/scb-breadcrumb-item.js";
7
- import "./scb-breadcrumb/scb-breadcrumb.js";
8
- import "./scb-button/scb-button.js";
9
- import "./scb-calendar/scb-calendar-event.js";
10
- import "./scb-calendar/scb-calendar.js";
11
- import "./scb-calendar-card/scb-calendar-card.js";
12
- import "./scb-card/scb-card.js";
13
- import "./scb-checkbox/scb-checkbox-group.js";
14
- import "./scb-checkbox/scb-checkbox.js";
15
- import "./scb-chevron/scb-chevron.js";
16
- import "./scb-chip/scb-chip.js";
17
- import "./scb-collapse/scb-collapse.js";
18
- import "./scb-cookies-consent/scb-cookies-consent.js";
19
- import "./scb-datepicker/scb-datepicker.js";
20
- import "./scb-dialog/scb-dialog.js";
21
- import "./scb-divider/scb-divider.js";
22
- import "./scb-drawer/scb-drawer.js";
23
- import "./scb-drop-zone/scb-drop-zone.js";
24
- import "./scb-dropdown/scb-dropdown.js";
25
- import "./scb-fab/scb-fab.js";
26
- import "./scb-fact-card/scb-fact-card-content.js";
27
- import "./scb-fact-card/scb-fact-card.js";
28
- import "./scb-footer/scb-footer-section.js";
29
- import "./scb-footer/scb-footer.js";
30
- import "./scb-gallery-grid/scb-gallery-grid.js";
31
- import "./scb-grid/scb-grid-item.js";
32
- import "./scb-grid/scb-grid.js";
33
- import "./scb-grid/scb-stack.js";
34
- import "./scb-header/scb-header-menu-group.js";
35
- import "./scb-header/scb-header-menu-item.js";
36
- import "./scb-header/scb-header-tab.js";
37
- import "./scb-header/scb-header-utility.js";
38
- import "./scb-header/scb-header.js";
39
- import "./scb-horizontal-scroller/scb-horizontal-scroller.js";
40
- import "./scb-icon-button/scb-icon-button.js";
41
- import "./scb-keyfigure-card/scb-keyfigure-card.js";
42
- import "./scb-link/scb-link.js";
43
- import "./scb-list/scb-list-item.js";
44
- import "./scb-list/scb-list.js";
45
- import "./scb-menu/scb-menu-item.js";
46
- import "./scb-menu/scb-menu-section.js";
47
- import "./scb-menu/scb-menu.js";
48
- import "./scb-menu/scb-sub-menu.js";
49
- import "./scb-nav/scb-nav-item.js";
50
- import "./scb-nav/scb-nav.js";
51
- import "./scb-notification-card/scb-notification-card.js";
52
- import "./scb-options-menu/scb-options-menu-item.js";
53
- import "./scb-options-menu/scb-options-menu.js";
54
- import "./scb-options-menu/scb-options-sub-menu.js";
55
- import "./scb-overlay/scb-overlay.js";
56
- import "./scb-pagination/scb-pagination.js";
57
- import "./scb-progress-indicator/scb-progress-indicator.js";
58
- import "./scb-progress-stepper/scb-progress-step.js";
59
- import "./scb-progress-stepper/scb-progress-stepper.js";
60
- import "./scb-radio-button/scb-radio-button.js";
61
- import "./scb-radio-button/scb-radio-group.js";
62
- import "./scb-scrollspy/scb-scrollspy.js";
63
- import "./scb-search/scb-search.js";
64
- import "./scb-segmented-button/scb-segmented-button.js";
65
- import "./scb-segmented-button/scb-segmented-item.js";
66
- import "./scb-select/scb-select-option.js";
67
- import "./scb-select/scb-select.js";
68
- import "./scb-skeleton/scb-skeleton.js";
69
- import "./scb-slider/scb-slider.js";
70
- import "./scb-snackbar/scb-snackbar.js";
71
- import "./scb-status-pill/scb-status-pill.js";
72
- import "./scb-stepper/scb-step.js";
73
- import "./scb-stepper/scb-stepper.js";
74
- import "./scb-switch/scb-switch.js";
75
- import "./scb-table/scb-table.js";
76
- import "./scb-table-advanced/scb-table-advanced.js";
77
- import "./scb-tabs/scb-primary-tab.js";
78
- import "./scb-tabs/scb-secondary-tab.js";
79
- import "./scb-tabs/scb-tabs.js";
80
- import "./scb-textfield/scb-textfield.js";
81
- import "./scb-toc/scb-toc-item.js";
82
- import "./scb-toc/scb-toc.js";
83
- import "./scb-tooltip/scb-tooltip.js";
84
- import "./scb-vignette/scb-vignette.js";
85
- import "./scb-viz/scb-viz.js";
1
+ import "./index2.js";
package/mvc/components/scb-accordion/scb-accordion-item.js CHANGED
@@ -1,4 +1,4 @@
1
- import{a as g,n,i as v,E as p,x as l,t as b}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-chevron/scb-chevron.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(o,a,s){try{customElements.get(o)||e(o,a,s)}catch(d){var c=String(d||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var m=Object.defineProperty,h=Object.getOwnPropertyDescriptor,r=(t,e,o,a)=>{for(var s=a>1?void 0:a?h(e,o):e,c=t.length-1,d;c>=0;c--)(d=t[c])&&(s=(a?d(e,o,s):d(s))||s);return a&&s&&m(e,o,s),s};let i=class extends v{constructor(){super(...arguments),this.open=!1,this.title="",this.content="",this.overline="",this.supportingText="",this.leading=!1,this.leadingVariant="",this.leadingIcon="",this.imgHrefImage="",this.avatarLabel="",this.avatarAlt="",this.avatarVariant="icon",this.avatarSrc="",this.density=0,this._unique=i._uid(),this._ignoreNextNativeTitleAttrChange=!1,this._onSummaryClick=t=>{t.preventDefault();const e=!this.open;this.closest("scb-accordion")?.onItemToggled?.(this,e),this.setOpen(e)},this._onToggle=t=>{const e=t.currentTarget;e.open||(e.open=!0),this._applyInertByOpen()}}static _uid(){return globalThis.crypto?.randomUUID?.()??`${i._uidPrefix}-${++i._uidSeq}`}static get observedAttributes(){const t=super.observedAttributes||[];return t.includes("title")?t:[...t,"title"]}attributeChangedCallback(t,e,o){if(t==="title"&&this._ignoreNextNativeTitleAttrChange){this._ignoreNextNativeTitleAttrChange=!1;return}super.attributeChangedCallback(t,e,o),t==="title"&&o!==null&&(this._ignoreNextNativeTitleAttrChange=!0,this.removeAttribute("title"))}firstUpdated(){this._applyInertByOpen()}_applyInertByOpen(){const t=this.renderRoot.querySelector(".scb-accordion-bottom");t&&(this.open?(t.removeAttribute("inert"),t.setAttribute("aria-hidden","false")):(t.setAttribute("inert",""),t.setAttribute("aria-hidden","true")))}_onKeyDown(t){const e=this.closest("scb-accordion"),a=Array.from(e?.querySelectorAll("scb-accordion-item")||[]).map(d=>d.renderRoot.querySelector("details")?.querySelector(".scb-accordion-top")||null).filter(d=>!!d),s=t.currentTarget,c=a.indexOf(s);switch(t.key){case"ArrowDown":t.preventDefault(),c<a.length-1&&a[c+1].focus();break;case"ArrowUp":t.preventDefault(),c>0&&a[c-1].focus();break;case"Home":t.preventDefault(),a.length&&a[0].focus();break;case"End":t.preventDefault(),a.length&&a[a.length-1].focus();break}}setOpen(t){this.open=!!t;const e=this.renderRoot.querySelector("details");e&&!e.open&&(e.open=!0),this._applyInertByOpen()}updated(t){if(t.has("open")){const e=this.renderRoot.querySelector("details");e&&!e.open&&(e.open=!0),this._applyInertByOpen(),this.dispatchEvent(new CustomEvent("open-changed",{detail:{open:this.open,title:this.title},bubbles:!0,composed:!0}))}}render(){const t=`bottom-${this._unique}`,e=`header-${this._unique}`,o=this.leading?this.leadingVariant==="image"&&this.imgHrefImage?l`<img part="leading-image" class="img" src="${this.imgHrefImage}" alt="" />`:this.leadingVariant==="avatar"?l`
1
+ import"../../vendor/vendor-material.js";import{_ as b,b as m,g as h,h as o,v as l,y as s}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as r}from"../../vendor/decorate.js";import"../scb-chevron/scb-chevron.js";(function(){try{var g=typeof globalThis<"u"?globalThis:window;if(!g.__scb_ce_guard_installed__){g.__scb_ce_guard_installed__=!0;var i=customElements.define.bind(customElements);customElements.define=function(t,e,v){try{customElements.get(t)||i(t,e,v)}catch(c){var n=String(c||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var d,p,a=(d=class extends b{constructor(...i){super(...i),this.open=!1,this.title="",this.content="",this.overline="",this.supportingText="",this.leading=!1,this.leadingVariant="",this.leadingIcon="",this.imgHrefImage="",this.avatarLabel="",this.avatarAlt="",this.avatarVariant="icon",this.avatarSrc="",this.density=0,this._unique=p._uid(),this._ignoreNextNativeTitleAttrChange=!1,this._onSummaryClick=t=>{t.preventDefault();const e=!this.open;this.closest("scb-accordion")?.onItemToggled?.(this,e),this.setOpen(e)},this._onToggle=t=>{const e=t.currentTarget;e.open||(e.open=!0),this._applyInertByOpen()}}static _uid(){return globalThis.crypto?.randomUUID?.()??`${p._uidPrefix}-${++p._uidSeq}`}static get observedAttributes(){const i=super.observedAttributes||[];return i.includes("title")?i:[...i,"title"]}attributeChangedCallback(i,t,e){if(i==="title"&&this._ignoreNextNativeTitleAttrChange){this._ignoreNextNativeTitleAttrChange=!1;return}super.attributeChangedCallback(i,t,e),i==="title"&&e!==null&&(this._ignoreNextNativeTitleAttrChange=!0,this.removeAttribute("title"))}firstUpdated(){this._applyInertByOpen()}_applyInertByOpen(){const i=this.renderRoot.querySelector(".scb-accordion-bottom");i&&(this.open?(i.removeAttribute("inert"),i.setAttribute("aria-hidden","false")):(i.setAttribute("inert",""),i.setAttribute("aria-hidden","true")))}_onKeyDown(i){const t=this.closest("scb-accordion"),e=Array.from(t?.querySelectorAll("scb-accordion-item")||[]).map(c=>c.renderRoot.querySelector("details")?.querySelector(".scb-accordion-top")||null).filter(c=>!!c),v=i.currentTarget,n=e.indexOf(v);switch(i.key){case"ArrowDown":i.preventDefault(),n<e.length-1&&e[n+1].focus();break;case"ArrowUp":i.preventDefault(),n>0&&e[n-1].focus();break;case"Home":i.preventDefault(),e.length&&e[0].focus();break;case"End":i.preventDefault(),e.length&&e[e.length-1].focus();break}}setOpen(i){this.open=!!i;const t=this.renderRoot.querySelector("details");t&&!t.open&&(t.open=!0),this._applyInertByOpen()}updated(i){if(i.has("open")){const t=this.renderRoot.querySelector("details");t&&!t.open&&(t.open=!0),this._applyInertByOpen(),this.dispatchEvent(new CustomEvent("open-changed",{detail:{open:this.open,title:this.title},bubbles:!0,composed:!0}))}}render(){const i=`bottom-${this._unique}`,t=`header-${this._unique}`,e=this.leading?this.leadingVariant==="image"&&this.imgHrefImage?s`<img part="leading-image" class="img" src="${this.imgHrefImage}" alt="" />`:this.leadingVariant==="avatar"?s`
2
2
  <scb-avatar
3
3
  label=${this.avatarLabel}
4
4
  alt=${this.avatarAlt}
@@ -7,37 +7,37 @@ import{a as g,n,i as v,E as p,x as l,t as b}from"../../vendor/vendor.js";import"
7
7
  shape="circular"
8
8
  variant=${this.avatarVariant}
9
9
  ></scb-avatar>
10
- `:this.leadingVariant==="icon"?l`<md-icon>${this.leadingIcon}</md-icon>`:p:p;return l`
10
+ `:this.leadingVariant==="icon"?s`<md-icon>${this.leadingIcon}</md-icon>`:l:l;return s`
11
11
  <details class="scb-accordion-item" open @toggle=${this._onToggle}>
12
12
  <summary
13
- id=${e}
13
+ id=${t}
14
14
  class="scb-accordion-top"
15
- aria-controls=${t}
15
+ aria-controls=${i}
16
16
  @click=${this._onSummaryClick}
17
17
  @keydown=${this._onKeyDown}
18
18
  >
19
19
  <md-ripple></md-ripple>
20
20
 
21
- ${this.leading?l`<div class="leading">${o}</div>`:p}
21
+ ${this.leading?s`<div class="leading">${e}</div>`:l}
22
22
 
23
23
  <div class="texts">
24
- ${this.overline?l`<div class="overline">${this.overline}</div>`:p}
24
+ ${this.overline?s`<div class="overline">${this.overline}</div>`:l}
25
25
  <div class="title">${this.title}</div>
26
- ${this.supportingText?l`<div class="supporting-text">${this.supportingText}</div>`:p}
26
+ ${this.supportingText?s`<div class="supporting-text">${this.supportingText}</div>`:l}
27
27
  </div>
28
28
 
29
29
  <scb-chevron class="chevron" .open=${this.open}></scb-chevron>
30
30
  </summary>
31
31
 
32
- <div id=${t} class="scb-accordion-bottom" role="region" aria-labelledby=${e}>
32
+ <div id=${i} class="scb-accordion-bottom" role="region" aria-labelledby=${t}>
33
33
  <div class="bottom-inner">
34
34
  <slot>${this.content}</slot>
35
35
  </div>
36
36
  </div>
37
37
  </details>
38
38
 
39
- <md-focus-ring for=${e} inward></md-focus-ring>
40
- `}};i._uidPrefix=`uid-${Math.random().toString(36).slice(2)}`;i._uidSeq=0;i.styles=[g`
39
+ <md-focus-ring for=${t} inward></md-focus-ring>
40
+ `}},p=d,d._uidPrefix=`uid-${Math.random().toString(36).slice(2)}`,d._uidSeq=0,d.styles=[m`
41
41
  :host {
42
42
  display: block;
43
43
  position: relative;
@@ -208,4 +208,4 @@ import{a as g,n,i as v,E as p,x as l,t as b}from"../../vendor/vendor.js";import"
208
208
  @media (prefers-reduced-motion: reduce) {
209
209
  md-ripple { display: none; }
210
210
  }
211
- `];r([n({type:Boolean,reflect:!0})],i.prototype,"open",2);r([n({type:String})],i.prototype,"title",2);r([n({type:String})],i.prototype,"content",2);r([n({type:String,attribute:"overline"})],i.prototype,"overline",2);r([n({type:String,attribute:"supporting-text"})],i.prototype,"supportingText",2);r([n({type:Boolean})],i.prototype,"leading",2);r([n({type:String,attribute:"leading-variant",reflect:!0})],i.prototype,"leadingVariant",2);r([n({type:String,attribute:"leading-icon"})],i.prototype,"leadingIcon",2);r([n({type:String,attribute:"img-href-image",reflect:!0})],i.prototype,"imgHrefImage",2);r([n({type:String,attribute:"avatar-label"})],i.prototype,"avatarLabel",2);r([n({type:String,attribute:"avatar-alt"})],i.prototype,"avatarAlt",2);r([n({type:String,attribute:"avatar-variant"})],i.prototype,"avatarVariant",2);r([n({type:String,attribute:"avatar-src"})],i.prototype,"avatarSrc",2);r([n({type:Number,reflect:!0})],i.prototype,"density",2);i=r([b("scb-accordion-item")],i);
211
+ `],d);r([o({type:Boolean,reflect:!0})],a.prototype,"open",void 0);r([o({type:String})],a.prototype,"title",void 0);r([o({type:String})],a.prototype,"content",void 0);r([o({type:String,attribute:"overline"})],a.prototype,"overline",void 0);r([o({type:String,attribute:"supporting-text"})],a.prototype,"supportingText",void 0);r([o({type:Boolean})],a.prototype,"leading",void 0);r([o({type:String,attribute:"leading-variant",reflect:!0})],a.prototype,"leadingVariant",void 0);r([o({type:String,attribute:"leading-icon"})],a.prototype,"leadingIcon",void 0);r([o({type:String,attribute:"img-href-image",reflect:!0})],a.prototype,"imgHrefImage",void 0);r([o({type:String,attribute:"avatar-label"})],a.prototype,"avatarLabel",void 0);r([o({type:String,attribute:"avatar-alt"})],a.prototype,"avatarAlt",void 0);r([o({type:String,attribute:"avatar-variant"})],a.prototype,"avatarVariant",void 0);r([o({type:String,attribute:"avatar-src"})],a.prototype,"avatarSrc",void 0);r([o({type:Number,reflect:!0})],a.prototype,"density",void 0);a=p=r([h("scb-accordion-item")],a);
package/mvc/components/scb-accordion/scb-accordion.js CHANGED
@@ -1,18 +1,18 @@
1
- import{a as _,n as l,i as O,E as k,x as b,t as S}from"../../vendor/vendor.js";import"./scb-accordion-item.js";import"../scb-button/scb-button.js";import"../../vendor/vendor-material.js";import"../scb-chevron/scb-chevron.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,s,n){try{customElements.get(i)||e(i,s,n)}catch(d){var p=String(d||"");if(p.indexOf("already been used")===-1&&p.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var C=Object.defineProperty,w=Object.getOwnPropertyDescriptor,u=t=>{throw TypeError(t)},r=(t,e,i,s)=>{for(var n=s>1?void 0:s?w(e,i):e,p=t.length-1,d;p>=0;p--)(d=t[p])&&(n=(s?d(e,i,n):d(n))||n);return s&&n&&C(e,i,n),n},A=(t,e,i)=>e.has(t)||u("Cannot "+i),T=(t,e,i)=>e.has(t)?u("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),a=(t,e,i)=>(A(t,e,"access private method"),i),o,m,v,h,y,g,f;let c=class extends O{constructor(){super(...arguments),T(this,o),this.singleOpen=!1,this.showCloseAll=!1,this.size="large",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0}connectedCallback(){super.connectedCallback(),this.addEventListener("open-changed",a(this,o,h))}disconnectedCallback(){this.removeEventListener("open-changed",a(this,o,h)),super.disconnectedCallback()}render(){const t=!this.singleOpen&&this.showCloseAll,e=t?a(this,o,m).call(this):!1;return b`
1
+ import{_ as m,b as v,g as y,h as a,v as _,y as b}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as c}from"../../vendor/decorate.js";import"./scb-accordion-item.js";import{n as k,t as n}from"../../vendor/assertClassBrand.js";import"../scb-button/scb-button.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(i,r,l){try{customElements.get(i)||t(i,r,l)}catch(h){var g=String(h||"");if(g.indexOf("already been used")===-1&&g.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var s,p,o=(s=new WeakSet,p=class extends m{constructor(...t){super(...t),k(this,s),this.singleOpen=!1,this.showCloseAll=!1,this.size="large",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0}connectedCallback(){super.connectedCallback(),this.addEventListener("open-changed",n(s,this,f))}disconnectedCallback(){this.removeEventListener("open-changed",n(s,this,f)),super.disconnectedCallback()}render(){const t=!this.singleOpen&&this.showCloseAll,i=t?n(s,this,S).call(this):!1;return b`
2
2
  <div class="scb-accordion" ?single-open=${this.singleOpen}>
3
3
  ${t?b`
4
4
  <div class="scb-accordion-actions" role="toolbar" aria-label="Accordionkontroller">
5
5
  <scb-button
6
6
  variant="text"
7
- label=${e?"Stäng alla":"Öppna alla"}
8
- @click=${a(this,o,v)}
7
+ label=${i?"Stäng alla":"Öppna alla"}
8
+ @click=${n(s,this,O)}
9
9
  ></scb-button>
10
10
  </div>
11
- `:k}
11
+ `:_}
12
12
 
13
- <slot @slotchange=${a(this,o,y)}></slot>
13
+ <slot @slotchange=${n(s,this,A)}></slot>
14
14
  </div>
15
- `}firstUpdated(){a(this,o,f).call(this),a(this,o,g).call(this)}updated(t){(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&a(this,o,f).call(this),t.has("singleOpen")&&a(this,o,g).call(this)}_getDirectItems(){return Array.from(this.children).filter(t=>t.tagName==="SCB-ACCORDION-ITEM")}onItemToggled(t,e){if(this.singleOpen&&e){this._getDirectItems().forEach(s=>{s!==t&&s.setOpen(!1)});return}!this.singleOpen&&this.showCloseAll&&this.requestUpdate()}mapSpacingToken(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e}};o=new WeakSet;m=function(){const t=this._getDirectItems();return t.length>0&&t.every(e=>e.open)};v=function(){if(this.singleOpen||!this.showCloseAll)return;const t=this._getDirectItems(),e=t.length>0&&t.every(i=>i.open);t.forEach(i=>i.setOpen(!e))};h=function(){this.singleOpen||this.showCloseAll&&this.requestUpdate()};y=function(){if(this.singleOpen){a(this,o,g).call(this);return}this.showCloseAll&&this.requestUpdate()};g=function(){if(!this.singleOpen)return;const e=this._getDirectItems().filter(i=>i.open);e.length<=1||e.slice(1).forEach(i=>i.setOpen(!1))};f=function(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,i=this.mapSpacingToken(this.spacingBottom)??t,s=this.mapSpacingToken(this.spacingLeft),n=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-accordion-spacing-block-start",e):this.style.removeProperty("--scb-accordion-spacing-block-start"),i?this.style.setProperty("--scb-accordion-spacing-block-end",i):this.style.removeProperty("--scb-accordion-spacing-block-end"),s?this.style.setProperty("--scb-accordion-spacing-inline-start",s):this.style.removeProperty("--scb-accordion-spacing-inline-start"),n?this.style.setProperty("--scb-accordion-spacing-inline-end",n):this.style.removeProperty("--scb-accordion-spacing-inline-end")};c.styles=_`
15
+ `}firstUpdated(){n(s,this,u).call(this),n(s,this,d).call(this)}updated(t){(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&n(s,this,u).call(this),t.has("singleOpen")&&n(s,this,d).call(this)}_getDirectItems(){return Array.from(this.children).filter(t=>t.tagName==="SCB-ACCORDION-ITEM")}onItemToggled(t,i){if(this.singleOpen&&i){this._getDirectItems().forEach(r=>{r!==t&&r.setOpen(!1)});return}!this.singleOpen&&this.showCloseAll&&this.requestUpdate()}mapSpacingToken(t){if(!t)return;const i=String(t).trim();if(i)return/^\d+$/.test(i)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(i,10)))})`:i}},p.styles=v`
16
16
  :host {
17
17
  display: block;
18
18
  margin-block-start: var(--scb-accordion-spacing-block-start, 0);
@@ -41,4 +41,4 @@ import{a as _,n as l,i as O,E as k,x as b,t as S}from"../../vendor/vendor.js";im
41
41
  padding-block-start: var(--scb-accordion-actions-padding-block);
42
42
  padding-block-end: var(--scb-accordion-actions-padding-block);
43
43
  }
44
- `;r([l({type:Boolean,attribute:"single-open",reflect:!0})],c.prototype,"singleOpen",2);r([l({type:Boolean,attribute:"show-close-all",reflect:!0})],c.prototype,"showCloseAll",2);r([l({type:String,reflect:!0})],c.prototype,"size",2);r([l({type:String,reflect:!0})],c.prototype,"spacing",2);r([l({type:String,attribute:"spacing-top",reflect:!0})],c.prototype,"spacingTop",2);r([l({type:String,attribute:"spacing-bottom",reflect:!0})],c.prototype,"spacingBottom",2);r([l({type:String,attribute:"spacing-left",reflect:!0})],c.prototype,"spacingLeft",2);r([l({type:String,attribute:"spacing-right",reflect:!0})],c.prototype,"spacingRight",2);c=r([S("scb-accordion")],c);
44
+ `,p);function S(){const e=this._getDirectItems();return e.length>0&&e.every(t=>t.open)}function O(){if(this.singleOpen||!this.showCloseAll)return;const e=this._getDirectItems(),t=e.length>0&&e.every(i=>i.open);e.forEach(i=>i.setOpen(!t))}function f(){this.singleOpen||this.showCloseAll&&this.requestUpdate()}function A(){if(this.singleOpen){n(s,this,d).call(this);return}this.showCloseAll&&this.requestUpdate()}function d(){if(!this.singleOpen)return;const e=this._getDirectItems().filter(t=>t.open);e.length<=1||e.slice(1).forEach(t=>t.setOpen(!1))}function u(){const e=this.mapSpacingToken(this.spacing),t=this.mapSpacingToken(this.spacingTop)??e,i=this.mapSpacingToken(this.spacingBottom)??e,r=this.mapSpacingToken(this.spacingLeft),l=this.mapSpacingToken(this.spacingRight);t?this.style.setProperty("--scb-accordion-spacing-block-start",t):this.style.removeProperty("--scb-accordion-spacing-block-start"),i?this.style.setProperty("--scb-accordion-spacing-block-end",i):this.style.removeProperty("--scb-accordion-spacing-block-end"),r?this.style.setProperty("--scb-accordion-spacing-inline-start",r):this.style.removeProperty("--scb-accordion-spacing-inline-start"),l?this.style.setProperty("--scb-accordion-spacing-inline-end",l):this.style.removeProperty("--scb-accordion-spacing-inline-end")}c([a({type:Boolean,attribute:"single-open",reflect:!0})],o.prototype,"singleOpen",void 0);c([a({type:Boolean,attribute:"show-close-all",reflect:!0})],o.prototype,"showCloseAll",void 0);c([a({type:String,reflect:!0})],o.prototype,"size",void 0);c([a({type:String,reflect:!0})],o.prototype,"spacing",void 0);c([a({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",void 0);c([a({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",void 0);c([a({type:String,attribute:"spacing-left",reflect:!0})],o.prototype,"spacingLeft",void 0);c([a({type:String,attribute:"spacing-right",reflect:!0})],o.prototype,"spacingRight",void 0);o=c([y("scb-accordion")],o);