scb-wc-test 0.1.96 → 0.1.98

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 (6) hide show
  1. package/README.md +75 -23
  2. package/all.js +0 -70
  3. package/blazor/blazor/ScbBlazorInteropBase.cs +1362 -0
  4. package/blazor/blazor/scb-blazor-bridge.js +1922 -0
  5. package/mvc/scb-blazor-bridge.js +1922 -0
  6. package/package.json +307 -319
package/README.md CHANGED
@@ -1,34 +1,55 @@
1
1
  # Om SCB Web Components Test
2
2
 
3
3
  > ⚠️ **Testpaket**
4
- > Testkomponenter under utveckling – kan ändras eller tas bort.
4
+ > `scb-wc-test` innehåller komponenter under utveckling. API, utseende och beteende kan ändras eller tas bort mellan versioner.
5
5
 
6
- SCB Web Components Test finns för att underlätta skapandet av enhetliga, tillgängliga och användbara webbapplikationer. Komponenterna är under utveckling och kan ändras eller tas bort mellan versioner.
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>
7
21
 
8
22
  ---
9
23
 
10
24
  ## Kom igång
11
25
 
12
- **Obs:** Kör alla kommandon i mappen där din `package.json` ligger. Har du ingen? Kör `npm init -y` i projektroten (eller annan lämplig mapp).
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).
13
28
 
14
29
  Installera paketet:
30
+
15
31
  ```sh
16
32
  npm install scb-wc-test
17
33
  ```
18
34
 
19
35
  ---
20
36
 
21
- ## Alternativ 1: Använd som ES-moduler (i exempelvis React)
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):
22
40
 
23
- Importera enskilda komponenter (bäst för tree‑shaking):
24
41
  ```js
42
+ // Global CSS + tokens (måste bara importeras en gång)
25
43
  import 'scb-wc-test/scb-wc-test.css';
26
44
  import 'scb-wc-test/scb-typography.css';
45
+
46
+ // Enskilda web components
27
47
  import 'scb-wc-test/scb-button';
28
48
  import 'scb-wc-test/scb-accordion';
29
49
  ```
30
50
 
31
- Importera allt (ej rekommenderat, men möjligt):
51
+ Vill du ladda allt finns en samlingsfil (inte rekommenderat i större appar):
52
+
32
53
  ```js
33
54
  import 'scb-wc-test/scb-wc-test.css';
34
55
  import 'scb-wc-test/scb-typography.css';
@@ -39,11 +60,16 @@ import 'scb-wc-test/all';
39
60
 
40
61
  ## Alternativ 2: Använd i MVC/MPA via `<script type="module">`
41
62
 
42
- Det här läget använder den färdig‑splittrade **MVC‑ESM**‑builden som följer med paketet under `node_modules/scb-wc-test/mvc/`.
63
+ Det här läget använder den färdig‑splittade **MVC‑ESM**‑builden som följer med paketet under:
43
64
 
44
- ### Rekommenderat: ett npm‑script
65
+ ```text
66
+ node_modules/scb-wc-test/mvc/
67
+ ```
68
+
69
+ ### 2.1) Rekommenderat: ett npm‑script för att kopiera UI‑filer
45
70
 
46
71
  Lägg till i din apps `package.json`:
72
+
47
73
  ```jsonc
48
74
  {
49
75
  "scripts": {
@@ -53,63 +79,89 @@ Lägg till i din apps `package.json`:
53
79
  ```
54
80
 
55
81
  Kör sedan:
82
+
56
83
  ```sh
57
84
  npm run ui:install
58
85
  ```
59
86
 
60
- Det kopierar hela `mvc/` till `wwwroot/ui/` (komponenter, vendor och CSS).
87
+ Det kopierar hela `node_modules/scb-wc-test/mvc/` till `wwwroot/ui/` i din applikation (komponenter, vendor och CSS).
61
88
 
62
- ### Ladda filer i din layout
89
+ ### 2.2) Ladda filer i din layout (Razor, .cshtml, klassisk MVC)
63
90
 
64
91
  ```html
65
92
  <!-- Lägg helst i <head> -->
66
93
  <link rel="stylesheet" href="~/ui/scb-wc-test.css" />
67
94
  <link rel="stylesheet" href="~/ui/scb-typography.css" />
68
95
 
69
-
70
96
  <!-- Ladda ENDAST de komponenter du använder på sidan, gärna precis före </body> -->
71
97
  <script type="module" src="~/ui/components/scb-link/scb-link.js"></script>
72
98
  <script type="module" src="~/ui/components/scb-button/scb-button.js"></script>
73
-
74
99
  ```
75
100
 
76
- ---
77
-
78
- ### 2.1) CI/CD (exempel)
101
+ ### 2.3) CI/CD‑exempel
79
102
 
80
103
  Kör samma script i din pipeline:
104
+
81
105
  ```yaml
82
106
  steps:
83
107
  - script: npm ci
84
108
  - script: npm run ui:install
85
109
  ```
86
110
 
87
- Behöver du annan webbrotsökväg i pipelinen? Lägg till flaggan:
111
+ Behöver du en annan webbrotsökväg (t.ex. om din `wwwroot` ligger någon annanstans) kan du ange flaggan:
112
+
88
113
  ```yaml
89
114
  - script: npm run ui:install --ui_wwwroot=../wwwroot
90
115
  ```
91
116
 
92
117
  ---
93
118
 
94
- ## Alternativ 3: Använd bundlad version (IIFE)
119
+ ## Alternativ 3: Bundlad version (IIFE) för äldre miljöer
95
120
 
96
- Om ESM inte stöds, använd den bundlade varianten från paketroten.
121
+ Om ESM inte stöds kan du använda den bundlade test‑varianten från paketroten.
97
122
  Flytta följande två filer från `node_modules/scb-wc-test` och använd dem i applikationen:
98
- ```
123
+
124
+ ```text
99
125
  node_modules/scb-wc-test/scb-wc-test.bundle.js
100
126
  node_modules/scb-wc-test/scb-wc-test.css
101
127
  ```
128
+
102
129
  ```html
103
130
  <link rel="stylesheet" href="scb-wc-test.css">
104
131
  <link rel="stylesheet" href="scb-typography.css" />
105
132
  <script src="scb-wc-test.bundle.js"></script>
106
133
  ```
107
134
 
135
+ > **Obs:** Blanda inte MVC‑ESM och IIFE på samma sida.
136
+
137
+ ---
138
+
139
+ ## Alternativ 4: Blazor (Server och WebAssembly)
140
+
141
+ Även testkomponenterna kan användas i Blazor‑appar när du vill prova nya komponenter innan de flyttas till produktionspaketet.
142
+
143
+ Grundprincipen är samma som för `scb-wc`:
144
+
145
+ 1. Använd MVC‑ESM‑builden (`node_modules/scb-wc-test/mvc`) och kopiera den till `wwwroot/ui` med `ui:install`.
146
+ 2. Ladda `scb-blazor-bridge.js` från `wwwroot/ui` i din Blazor‑layout.
147
+ 3. Lägg till (eller återanvänd) `ScbBlazorInteropBase` i din lösning.
148
+
149
+ Exempel på layout:
150
+
151
+ ```html
152
+ <link rel="stylesheet" href="~/ui/scb-wc-test.css" />
153
+ <link rel="stylesheet" href="~/ui/scb-typography.css" />
154
+
155
+ <script type="module" src="~/ui/scb-blazor-bridge.js"></script>
156
+ ```
157
+
158
+ `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`.
159
+
108
160
  ---
109
161
 
110
162
  ## Viktigt
111
163
 
112
- - **Stå i mappen med din `package.json`** när du kör `npm install` och kopieringskommandon.
113
- - **Placeringen av `package.json` styr defaultmål**: roten -> `wwwroot/ui`, `ClientApp/` -> använd `--ui_wwwroot=../wwwroot`.
114
- - **Blanda inte** MVC‑ESM och IIFE på samma sida.
115
- - `scb-wc-test` är ett **testpaket** – komponenter kan ändras eller tas bort mellan versioner.
164
+ - `scb-wc-test` är ett **testpaket**. Komponenter kan ändras eller tas bort mellan versioner. Använd inte paketet i externa produktionsmiljöer.
165
+ - **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`).
166
+ - **Blanda inte MVC‑ESM och IIFE på samma sida.** Välj en distributionsform per sida/app.
167
+ - **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,74 +1,4 @@
1
- import './all.js';
2
1
  import './index.js';
3
- import './mvc/components/all.js';
4
- import './mvc/components/scb-accordion/scb-accordion-item.js';
5
- import './mvc/components/scb-accordion/scb-accordion.js';
6
- import './mvc/components/scb-app-bar/scb-app-bar.js';
7
- import './mvc/components/scb-avatar/scb-avatar.js';
8
- import './mvc/components/scb-badge/scb-badge.js';
9
- import './mvc/components/scb-breadcrumb/scb-breadcrumb-item.js';
10
- import './mvc/components/scb-breadcrumb/scb-breadcrumb.js';
11
- import './mvc/components/scb-button/scb-button.js';
12
- import './mvc/components/scb-calendar-card/scb-calendar-card.js';
13
- import './mvc/components/scb-card/scb-card.js';
14
- import './mvc/components/scb-checkbox/scb-checkbox-group.js';
15
- import './mvc/components/scb-checkbox/scb-checkbox.js';
16
- import './mvc/components/scb-chip/scb-chip.js';
17
- import './mvc/components/scb-dialog/scb-dialog.js';
18
- import './mvc/components/scb-divider/scb-divider.js';
19
- import './mvc/components/scb-drawer/scb-drawer-item.js';
20
- import './mvc/components/scb-drawer/scb-drawer-section.js';
21
- import './mvc/components/scb-drawer/scb-drawer.js';
22
- import './mvc/components/scb-drawer/scb-sub-drawer.js';
23
- import './mvc/components/scb-fact-card/scb-fact-card-content.js';
24
- import './mvc/components/scb-fact-card/scb-fact-card.js';
25
- import './mvc/components/scb-footer/scb-footer-section.js';
26
- import './mvc/components/scb-footer/scb-footer.js';
27
- import './mvc/components/scb-grid/scb-grid-item.js';
28
- import './mvc/components/scb-grid/scb-grid.js';
29
- import './mvc/components/scb-grid/scb-stack.js';
30
- import './mvc/components/scb-header/scb-header-drawer-group.js';
31
- import './mvc/components/scb-header/scb-header-drawer-item.js';
32
- import './mvc/components/scb-header/scb-header-tab.js';
33
- import './mvc/components/scb-header/scb-header-utility.js';
34
- import './mvc/components/scb-header/scb-header.js';
35
- import './mvc/components/scb-horizontal-scroller/scb-horizontal-scroller.js';
36
- import './mvc/components/scb-icon-button/scb-icon-button.js';
37
- import './mvc/components/scb-keyfigure-card/scb-keyfigure-card.js';
38
- import './mvc/components/scb-link/scb-link.js';
39
- import './mvc/components/scb-list/scb-list-item.js';
40
- import './mvc/components/scb-list/scb-list.js';
41
- import './mvc/components/scb-menu/scb-menu-item.js';
42
- import './mvc/components/scb-menu/scb-menu.js';
43
- import './mvc/components/scb-menu/scb-sub-menu.js';
44
- import './mvc/components/scb-notification-card/scb-notification-card.js';
45
- import './mvc/components/scb-pagination/scb-pagination.js';
46
- import './mvc/components/scb-progress-indicator/scb-progress-indicator.js';
47
- import './mvc/components/scb-progress-stepper/scb-progress-step.js';
48
- import './mvc/components/scb-progress-stepper/scb-progress-stepper.js';
49
- import './mvc/components/scb-radio-button/scb-radio-button.js';
50
- import './mvc/components/scb-radio-button/scb-radio-group.js';
51
- import './mvc/components/scb-search/scb-search.js';
52
- import './mvc/components/scb-segmented-button/scb-segmented-button.js';
53
- import './mvc/components/scb-segmented-button/scb-segmented-item.js';
54
- import './mvc/components/scb-skeleton/scb-skeleton.js';
55
- import './mvc/components/scb-snackbar/scb-snackbar.js';
56
- import './mvc/components/scb-status-pill/scb-status-pill.js';
57
- import './mvc/components/scb-stepper/scb-step.js';
58
- import './mvc/components/scb-stepper/scb-stepper.js';
59
- import './mvc/components/scb-switch/scb-switch.js';
60
- import './mvc/components/scb-tabs/scb-primary-tab.js';
61
- import './mvc/components/scb-tabs/scb-secondary-tab.js';
62
- import './mvc/components/scb-tabs/scb-tabs.js';
63
- import './mvc/components/scb-textfield/scb-textfield.js';
64
- import './mvc/components/scb-toc/scb-toc-item.js';
65
- import './mvc/components/scb-toc/scb-toc.js';
66
- import './mvc/components/scb-tooltip/scb-tooltip.js';
67
- import './mvc/components/scb-viz/scb-viz.js';
68
- import './mvc/vendor/preload-helper.js';
69
- import './mvc/vendor/vendor-lit.js';
70
- import './mvc/vendor/vendor-material.js';
71
- import './mvc/vendor/vendor.js';
72
2
  import './scb-accordion/scb-accordion-item.js';
73
3
  import './scb-accordion/scb-accordion.js';
74
4
  import './scb-app-bar/scb-app-bar.js';