scb-wc-test 0.1.362 → 0.1.363
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.
- package/README.md +194 -194
- package/mvc/components/scb-tooltip/scb-tooltip.js +10 -8
- package/mvc/scb-logo.svg +20 -20
- package/mvc/scb.svg +13 -13
- package/package.json +2 -2
- package/scb-tooltip/scb-tooltip.d.ts +2 -0
- package/scb-tooltip/scb-tooltip.js +61 -52
- package/scb-wc-test.bundle.js +69 -67
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.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as F,n as p,i as I,x as b,E as V,k as A,t as j}from"../../vendor/vendor.js";import"../scb-button/scb-button.js";import"../../vendor/vendor-material.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,r,o){try{customElements.get(i)||e(i,r,o)}catch(d){var c=String(d||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var q=Object.defineProperty,X=Object.getOwnPropertyDescriptor,h=(t,e,i,r)=>{for(var o=r>1?void 0:r?X(e,i):e,c=t.length-1,d;c>=0;c--)(d=t[c])&&(o=(r?d(e,i,o):d(o))||o);return r&&o&&q(e,i,o),o};let Y=0,a=class extends I{constructor(){super(...arguments),this.variant="plain",this.arrow=null,this.supportingtext="",this.label="",this.trigger="hover",this.position="top",this.open=!1,this.delay=.25,this.offset=0,this.maxWidth="300px",this._hoverActive=!1,this._clickActive=!1,this._hideTimeout=null,this._triggerEl=null,this._originalPosition="top",this._tooltipId=`scb-tooltip-${++Y}`,this._onTriggerMouseEnter=()=>{this._hasTooltipContent()&&(this._hoverActive=!0,this.open=!0)},this._onTriggerMouseLeave=()=>{this._hoverActive=!1,this._clickActive||(this.open=!1)},this._onTriggerFocus=()=>{this._hasTooltipContent()&&(this._hoverActive=!0,this.open=!0)},this._onTriggerBlur=()=>{this._hoverActive=!1,this._clickActive||(this.open=!1)},this._onTooltipMouseEnter=()=>{this._hasTooltipContent()&&(this.trigger==="hover"||this.trigger==="hover-click")&&(this._hoverActive=!0,this.open=!0)},this._onTooltipMouseLeave=()=>{(this.trigger==="hover"||this.trigger==="hover-click")&&(this._hoverActive=!1,this._clickActive||(this.open=!1))},this._onTriggerClick=()=>{this._hasTooltipContent()&&(this._clickActive=!this._clickActive,this._clickActive?this.open=!0:this._hoverActive||(this.open=!1))}}firstUpdated(){if(this._originalPosition=this.position,this._updateDelayCss(),this._updateMaxWidthCss(),this._updateTriggerElement(),this._updateTooltipHoverListeners(),this.open){const t=this._getTooltipElement();t&&this._showTooltip(t)}}updated(t){if(t.has("trigger")&&(this._updateTriggerElement(),this._updateTooltipHoverListeners()),t.has("delay")&&this._updateDelayCss(),t.has("maxWidth")&&this._updateMaxWidthCss(),(t.has("supportingtext")||t.has("label")||t.has("variant"))&&(this._hasTooltipContent()||(this._hoverActive=!1,this._clickActive=!1,this.open=!1),this._updateTriggerElement(),this._updateTooltipHoverListeners()),t.has("open")){if(this.open&&!this._hasTooltipContent()){this.open=!1;return}const e=this._getTooltipElement();if(!e)return;this.open?this._showTooltip(e):this._hideTooltip(e),this._dispatchOpenChanged()}}disconnectedCallback(){super.disconnectedCallback(),this._detachTriggerListeners();const t=this._getTooltipElement();t&&(t.removeEventListener("mouseenter",this._onTooltipMouseEnter),t.removeEventListener("mouseleave",this._onTooltipMouseLeave)),this._hideTimeout!==null&&(window.clearTimeout(this._hideTimeout),this._hideTimeout=null)}_getTooltipElement(){return this.renderRoot.querySelector(".scb-tooltip")}_hasTooltipContent(){const t=(this.supportingtext||"").trim();return this.variant==="rich"?!!((this.label||"").trim()||t):!!t}_updateDelayCss(){const t=Number.isFinite(this.delay)?this.delay:.25;this.style.setProperty("--delay",`${t}s`)}_updateMaxWidthCss(){const t=(this.maxWidth||"").trim(),e=t.toLowerCase()==="none",i=e?"none":t||"300px";this.style.setProperty("--max-width",i),this.style.setProperty("--wrap",e?"nowrap":"normal")}_dispatchOpenChanged(){const t={open:this.open};this.dispatchEvent(new CustomEvent("open-changed",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("openchanged",{detail:t,bubbles:!0,composed:!0}))}_findTriggerElement(){const t=this.querySelector("[scb-tooltip-anchor]:not([slot])");return t||(Array.from(this.children).find(i=>i.nodeType===Node.ELEMENT_NODE)??null)}_updateTriggerElement(){const t=this._triggerEl;t&&(this._detachTriggerListeners(),t.removeAttribute("aria-describedby"));const e=this._findTriggerElement();this._triggerEl=e,e&&this._hasTooltipContent()&&(e.setAttribute("aria-describedby",this._tooltipId),(this.trigger==="click"||this.trigger==="hover-click")&&e.addEventListener("click",this._onTriggerClick),(this.trigger==="hover"||this.trigger==="hover-click")&&(e.addEventListener("mouseenter",this._onTriggerMouseEnter),e.addEventListener("mouseleave",this._onTriggerMouseLeave),e.addEventListener("focus",this._onTriggerFocus),e.addEventListener("blur",this._onTriggerBlur)))}_updateTooltipHoverListeners(){const t=this._getTooltipElement();t&&(t.removeEventListener("mouseenter",this._onTooltipMouseEnter),t.removeEventListener("mouseleave",this._onTooltipMouseLeave),(this.trigger==="hover"||this.trigger==="hover-click")&&(t.addEventListener("mouseenter",this._onTooltipMouseEnter),t.addEventListener("mouseleave",this._onTooltipMouseLeave)))}_detachTriggerListeners(){const t=this._triggerEl;t&&(t.removeEventListener("click",this._onTriggerClick),t.removeEventListener("mouseenter",this._onTriggerMouseEnter),t.removeEventListener("mouseleave",this._onTriggerMouseLeave),t.removeEventListener("focus",this._onTriggerFocus),t.removeEventListener("blur",this._onTriggerBlur))}_showTooltip(t){if(!this._hasTooltipContent()){this.open=!1;return}this._hideTimeout!==null&&(window.clearTimeout(this._hideTimeout),this._hideTimeout=null);const e=this._triggerEl;this._resetPosition(),t.classList.remove("hidden"),t.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{e&&this._positionTooltip(t,e),t.setAttribute("open","")})}_hideTooltip(t){t.removeAttribute("open"),t.setAttribute("aria-hidden","true"),this._scheduleHidden(t)}_scheduleHidden(t){const e=(Number.isFinite(this.delay)?this.delay:.25)*1e3;if(e<=0){t.classList.add("hidden");return}this._hideTimeout=window.setTimeout(()=>{t.classList.add("hidden"),this._hideTimeout=null},e)}_resetPosition(){this.position=this._originalPosition}_positionTooltip(t,e){const i=e.getBoundingClientRect(),r=t.getBoundingClientRect(),o=this.getBoundingClientRect(),f=(this.offset??0)+8,v=8,y=v,T=window.innerHeight-v,x=v,w=window.innerWidth-v,O=s=>s>=y&&s+r.height<=T,P=s=>s>=x&&s+r.width<=w,E=(s,n,l,u)=>{let g=0;s<l&&(g+=l-s);const _=s+n;return _>u&&(g+=_-u),g},$=s=>{let n=0,l=0;switch(s){case"top":n=i.top-o.top-r.height-f,l=i.left-o.left+(i.width-r.width)/2;break;case"bottom":n=i.bottom-o.top+f,l=i.left-o.left+(i.width-r.width)/2;break;case"left":l=i.left-o.left-r.width-f,n=i.top-o.top+(i.height-r.height)/2;break;case"right":l=i.right-o.left+f,n=i.top-o.top+(i.height-r.height)/2;break}const u=n+o.top,g=l+o.left,_=E(u,r.height,y,T),R=E(g,r.width,x,w);return{pos:s,top:n,left:l,fitsV:O(u),fitsH:P(g),totalOverflow:_+R}},L=this.position==="top"||this.position==="bottom",C=this.position,S=this._getOppositePosition(C),M=[C,S,L?"left":"top",L?"right":"bottom"].map($);let m=M.find(s=>s.fitsV&&s.fitsH)??M.reduce((s,n)=>n.totalOverflow<s.totalOverflow?n:s);const k=(s,n,l)=>Math.min(Math.max(s,n),l),H=y-o.top,B=T-r.height-o.top,D=x-o.left,W=w-r.width-o.left,z=k(m.top,H,B),N=k(m.left,D,W);t.style.top=`${z}px`,t.style.left=`${N}px`,this.position!==m.pos&&(this.position=m.pos)}_getOppositePosition(t){switch(t){case"top":return"bottom";case"bottom":return"top";case"left":return"right";case"right":return"left"}}_onDefaultSlotChange(){this._updateTriggerElement()}render(){const t=this._hasTooltipContent(),e=this.arrow?b`<svg
|
|
2
2
|
class="scb-tooltip-arrow"
|
|
3
3
|
xmlns="http://www.w3.org/2000/svg"
|
|
4
4
|
width="13"
|
|
@@ -10,7 +10,7 @@ import{a as I,n as p,i as V,x as b,E as j,k as A,t as q}from"../../vendor/vendor
|
|
|
10
10
|
d="M6.5 6L0.5 0H12.5L6.5 6Z"
|
|
11
11
|
fill="var(--md-sys-color-inverse-surface, #0F0865)"
|
|
12
12
|
/>
|
|
13
|
-
</svg>`:
|
|
13
|
+
</svg>`:V,i=this.label||this.supportingtext;return t?this.variant==="rich"?b`
|
|
14
14
|
<div
|
|
15
15
|
id=${this._tooltipId}
|
|
16
16
|
class="scb-tooltip hidden"
|
|
@@ -45,17 +45,19 @@ import{a as I,n as p,i as V,x as b,E as j,k as A,t as q}from"../../vendor/vendor
|
|
|
45
45
|
${e}
|
|
46
46
|
</div>
|
|
47
47
|
<slot @slotchange=${this._onDefaultSlotChange}></slot>
|
|
48
|
-
`:b`<slot @slotchange=${this._onDefaultSlotChange}></slot>`}};
|
|
48
|
+
`:b`<slot @slotchange=${this._onDefaultSlotChange}></slot>`}};a.styles=F`
|
|
49
49
|
:host {
|
|
50
50
|
position: relative;
|
|
51
51
|
display: inline-block;
|
|
52
52
|
--delay: 0.25s;
|
|
53
|
+
--max-width: 300px;
|
|
54
|
+
--wrap: normal;
|
|
53
55
|
}
|
|
54
56
|
|
|
55
57
|
.scb-tooltip {
|
|
56
58
|
position: absolute;
|
|
57
59
|
min-width: 120px;
|
|
58
|
-
max-width:
|
|
60
|
+
max-width: var(--max-width);
|
|
59
61
|
width: max-content;
|
|
60
62
|
opacity: 0;
|
|
61
63
|
visibility: hidden;
|
|
@@ -80,13 +82,13 @@ import{a as I,n as p,i as V,x as b,E as j,k as A,t as q}from"../../vendor/vendor
|
|
|
80
82
|
font-style: normal;
|
|
81
83
|
line-height: var(--md-sys-typescale-body-small-line-height);
|
|
82
84
|
letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
83
|
-
white-space:
|
|
85
|
+
white-space: var(--wrap);
|
|
84
86
|
}
|
|
85
87
|
|
|
86
88
|
/* Plain variant */
|
|
87
89
|
|
|
88
90
|
:host([variant='plain']) .scb-tooltip {
|
|
89
|
-
max-width:
|
|
91
|
+
max-width: var(--max-width);
|
|
90
92
|
}
|
|
91
93
|
|
|
92
94
|
:host([variant='plain']) .scb-tooltip-container {
|
|
@@ -159,7 +161,7 @@ import{a as I,n as p,i as V,x as b,E as j,k as A,t as q}from"../../vendor/vendor
|
|
|
159
161
|
gap: var(--spacing-3);
|
|
160
162
|
border-radius: var(--md-sys-shape-corner-medium);
|
|
161
163
|
min-width: 200px;
|
|
162
|
-
max-width:
|
|
164
|
+
max-width: var(--max-width);
|
|
163
165
|
}
|
|
164
166
|
|
|
165
167
|
:host([variant='rich']) .scb-tooltip-text-container {
|
|
@@ -191,4 +193,4 @@ import{a as I,n as p,i as V,x as b,E as j,k as A,t as q}from"../../vendor/vendor
|
|
|
191
193
|
gap: var(--spacing-3);
|
|
192
194
|
align-self: stretch;
|
|
193
195
|
}
|
|
194
|
-
`;h([p({type:String,reflect:!0})],
|
|
196
|
+
`;h([p({type:String,reflect:!0})],a.prototype,"variant",2);h([p({type:Boolean,reflect:!0})],a.prototype,"arrow",2);h([p({type:String,attribute:"supporting-text"})],a.prototype,"supportingtext",2);h([p({type:String})],a.prototype,"label",2);h([p({type:String,reflect:!0})],a.prototype,"trigger",2);h([p({type:String,reflect:!0})],a.prototype,"position",2);h([p({type:Boolean,reflect:!0})],a.prototype,"open",2);h([p({type:Number,reflect:!0})],a.prototype,"delay",2);h([p({type:Number,reflect:!0})],a.prototype,"offset",2);h([p({type:String,reflect:!0,attribute:"max-width"})],a.prototype,"maxWidth",2);a=h([j("scb-tooltip")],a);
|
package/mvc/scb-logo.svg
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
-
<svg viewBox="-0.0002 -0.0066 1344.9076 377.9532" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
-
<defs>
|
|
4
|
-
<style type="text/css">
|
|
5
|
-
g {
|
|
6
|
-
fill: #100f0d;
|
|
7
|
-
}
|
|
8
|
-
g:target {
|
|
9
|
-
fill: #fff;
|
|
10
|
-
}
|
|
11
|
-
</style>
|
|
12
|
-
</defs>
|
|
13
|
-
<g transform="matrix(1.3333330154418945, 0, 0, -1.3333330154418945, 0, 377.9466552734375)" id="g10">
|
|
14
|
-
<g transform="scale(0.1)" id="inverted">
|
|
15
|
-
<path id="path14" d="m 1346.6,2515.59 c 0,48.24 -39.11,87.31 -87.4,87.31 -48.29,0 -87.4,-39.07 -87.4,-87.31 V 312.898 c 0,-48.339 39.11,-87.5 87.4,-87.5 48.29,0 87.4,39.161 87.4,87.5 V 1106.8 c 0,5.77 4.79,10.45 10.51,10.45 h 287.22 c 5.76,0 10.5,-4.68 10.5,-10.45 V 305.969 C 1654.83,137.02 1477.67,0 1259.2,0 1040.63,0 863.523,137.02 863.523,305.969 V 2528.77 c 0,168.86 177.107,305.88 395.677,305.88 218.47,0 395.63,-137.02 395.63,-305.88 V 1738.1 c 0,-5.86 -4.74,-10.45 -10.5,-10.45 h -287.22 c -5.72,0 -10.51,4.59 -10.51,10.45 v 777.49"/>
|
|
16
|
-
<path id="path16" d="M 10.4414,2265.38 C -8.01563,2136.85 -1.52734,1926.1 26.1172,1807.73 56.4922,1678.71 231.645,1417.96 310.555,1296.86 389.566,1175.85 494.949,1049.49 493.375,880.922 V 477.18 c 0,-48.25 -39.109,-87.41 -87.406,-87.41 -48.145,0 -87.254,39.16 -87.254,87.41 v 618.79 c 0,5.76 -4.785,10.55 -10.645,10.55 H 20.9453 c -5.8711,0 -10.5039,-4.79 -10.5039,-10.55 V 458.719 c 0,-168.957 177.1056,-305.969 395.5276,-305.969 218.574,0 395.683,137.012 395.683,305.969 v 422.203 c -1.324,289.568 -80.332,331.748 -182.867,505.398 -73.445,124.71 -254.121,381.95 -284.398,510.97 -27.735,118.36 -26.516,255.39 -15.672,379.9 0,48.25 39.109,87.41 87.254,87.41 48.297,0 87.406,-39.16 87.406,-87.41 v -550.32 c 0,-5.77 4.746,-10.45 10.645,-10.45 h 287.085 c 5.911,0 10.547,4.68 10.547,10.45 v 538.51 c 0,169.06 -177.109,305.97 -395.683,305.97 -218.422,0 -395.5276,-136.91 -395.5276,-305.97"/>
|
|
17
|
-
<path id="path18" d="m 1726.57,2547.82 h 440.8 c 182.04,0 329.61,-147.57 329.61,-329.52 v -462.24 c 0,-129.59 -84.97,-238.98 -202.16,-276.48 v -6.24 c 117.19,-37.4 202.16,-146.89 202.16,-276.58 V 491.148 c 0,-160.367 -130.2,-290.457 -290.45,-290.457 l -479.96,-0.293 c -5.91,0 -10.6,4.793 -10.6,10.454 V 2537.37 c 0,5.66 4.69,10.45 10.6,10.45 m 308.27,-229.22 c -5.97,0 -10.65,-4.78 -10.65,-10.55 v -729.33 c 0,-5.97 4.68,-10.65 10.65,-10.65 h 43.36 c 58.01,0 105.08,47.16 105.08,105.18 v 540.18 c 0,58 -47.07,105.17 -105.08,105.17 z m 0,-982.29 c -5.97,0 -10.65,-4.69 -10.65,-10.45 V 430.59 c 0,-5.86 4.68,-10.649 10.65,-10.649 h 51.85 c 58.12,0 105.09,47.18 105.09,105.188 v 706.011 c 0,58.19 -46.97,105.17 -105.09,105.17 h -51.85"/>
|
|
18
|
-
</g>
|
|
19
|
-
</g>
|
|
20
|
-
<text style="fill: rgb(1, 1, 1); font-family: Roboto; font-size: 139.2px; font-weight: 500; stroke: rgb(0, 0, 0); white-space: pre;" x="455.182" y="234.25">Designsystem</text>
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<svg viewBox="-0.0002 -0.0066 1344.9076 377.9532" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<defs>
|
|
4
|
+
<style type="text/css">
|
|
5
|
+
g {
|
|
6
|
+
fill: #100f0d;
|
|
7
|
+
}
|
|
8
|
+
g:target {
|
|
9
|
+
fill: #fff;
|
|
10
|
+
}
|
|
11
|
+
</style>
|
|
12
|
+
</defs>
|
|
13
|
+
<g transform="matrix(1.3333330154418945, 0, 0, -1.3333330154418945, 0, 377.9466552734375)" id="g10">
|
|
14
|
+
<g transform="scale(0.1)" id="inverted">
|
|
15
|
+
<path id="path14" d="m 1346.6,2515.59 c 0,48.24 -39.11,87.31 -87.4,87.31 -48.29,0 -87.4,-39.07 -87.4,-87.31 V 312.898 c 0,-48.339 39.11,-87.5 87.4,-87.5 48.29,0 87.4,39.161 87.4,87.5 V 1106.8 c 0,5.77 4.79,10.45 10.51,10.45 h 287.22 c 5.76,0 10.5,-4.68 10.5,-10.45 V 305.969 C 1654.83,137.02 1477.67,0 1259.2,0 1040.63,0 863.523,137.02 863.523,305.969 V 2528.77 c 0,168.86 177.107,305.88 395.677,305.88 218.47,0 395.63,-137.02 395.63,-305.88 V 1738.1 c 0,-5.86 -4.74,-10.45 -10.5,-10.45 h -287.22 c -5.72,0 -10.51,4.59 -10.51,10.45 v 777.49"/>
|
|
16
|
+
<path id="path16" d="M 10.4414,2265.38 C -8.01563,2136.85 -1.52734,1926.1 26.1172,1807.73 56.4922,1678.71 231.645,1417.96 310.555,1296.86 389.566,1175.85 494.949,1049.49 493.375,880.922 V 477.18 c 0,-48.25 -39.109,-87.41 -87.406,-87.41 -48.145,0 -87.254,39.16 -87.254,87.41 v 618.79 c 0,5.76 -4.785,10.55 -10.645,10.55 H 20.9453 c -5.8711,0 -10.5039,-4.79 -10.5039,-10.55 V 458.719 c 0,-168.957 177.1056,-305.969 395.5276,-305.969 218.574,0 395.683,137.012 395.683,305.969 v 422.203 c -1.324,289.568 -80.332,331.748 -182.867,505.398 -73.445,124.71 -254.121,381.95 -284.398,510.97 -27.735,118.36 -26.516,255.39 -15.672,379.9 0,48.25 39.109,87.41 87.254,87.41 48.297,0 87.406,-39.16 87.406,-87.41 v -550.32 c 0,-5.77 4.746,-10.45 10.645,-10.45 h 287.085 c 5.911,0 10.547,4.68 10.547,10.45 v 538.51 c 0,169.06 -177.109,305.97 -395.683,305.97 -218.422,0 -395.5276,-136.91 -395.5276,-305.97"/>
|
|
17
|
+
<path id="path18" d="m 1726.57,2547.82 h 440.8 c 182.04,0 329.61,-147.57 329.61,-329.52 v -462.24 c 0,-129.59 -84.97,-238.98 -202.16,-276.48 v -6.24 c 117.19,-37.4 202.16,-146.89 202.16,-276.58 V 491.148 c 0,-160.367 -130.2,-290.457 -290.45,-290.457 l -479.96,-0.293 c -5.91,0 -10.6,4.793 -10.6,10.454 V 2537.37 c 0,5.66 4.69,10.45 10.6,10.45 m 308.27,-229.22 c -5.97,0 -10.65,-4.78 -10.65,-10.55 v -729.33 c 0,-5.97 4.68,-10.65 10.65,-10.65 h 43.36 c 58.01,0 105.08,47.16 105.08,105.18 v 540.18 c 0,58 -47.07,105.17 -105.08,105.17 z m 0,-982.29 c -5.97,0 -10.65,-4.69 -10.65,-10.45 V 430.59 c 0,-5.86 4.68,-10.649 10.65,-10.649 h 51.85 c 58.12,0 105.09,47.18 105.09,105.188 v 706.011 c 0,58.19 -46.97,105.17 -105.09,105.17 h -51.85"/>
|
|
18
|
+
</g>
|
|
19
|
+
</g>
|
|
20
|
+
<text style="fill: rgb(1, 1, 1); font-family: Roboto; font-size: 139.2px; font-weight: 500; stroke: rgb(0, 0, 0); white-space: pre;" x="455.182" y="234.25">Designsystem</text>
|
|
21
21
|
</svg>
|
package/mvc/scb.svg
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
<svg
|
|
2
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
3
|
-
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
4
|
-
aria-hidden="true"
|
|
5
|
-
role="img"
|
|
6
|
-
width="48"
|
|
7
|
-
height="48"
|
|
8
|
-
preserveAspectRatio="xMidYMid meet"
|
|
9
|
-
viewBox="0 0 1300 1300"
|
|
10
|
-
>
|
|
11
|
-
<path d="M539.3,128.2c0-19.3-15.7-35-35-35c-19.3,0-35,15.6-35,35v882.1c0,19.4,15.7,35,35,35c19.3,0,35-15.7,35-35V692.4 c0-2.3,1.9-4.2,4.2-4.2h115c2.3,0,4.2,1.9,4.2,4.2v320.7c0,67.7-71,122.5-158.4,122.5c-87.5,0-158.5-54.9-158.5-122.5V122.9 c0-67.6,70.9-122.5,158.5-122.5c87.5,0,158.4,54.9,158.4,122.5v316.6c0,2.3-1.9,4.2-4.2,4.2h-115c-2.3,0-4.2-1.8-4.2-4.2V128.2z" />
|
|
12
|
-
<path d="M4.2,228.4c-7.4,51.5-4.8,135.9,6.3,183.3c12.2,51.7,82.3,156.1,113.9,204.6c31.6,48.5,73.8,99.1,73.2,166.6v161.7 c0,19.3-15.7,35-35,35c-19.3,0-34.9-15.7-34.9-35V696.7c0-2.3-1.9-4.2-4.3-4.2H8.4c-2.4,0-4.2,1.9-4.2,4.2v255.2 c0,67.7,70.9,122.5,158.4,122.5c87.5,0,158.5-54.9,158.5-122.5V782.8c-0.5-116-32.2-132.9-73.2-202.4 c-29.4-49.9-101.8-153-113.9-204.6c-11.1-47.4-10.6-102.3-6.3-152.1c0-19.3,15.7-35,34.9-35c19.3,0,35,15.7,35,35V444 c0,2.3,1.9,4.2,4.3,4.2h115c2.4,0,4.2-1.9,4.2-4.2V228.4c0-67.7-70.9-122.5-158.5-122.5C75.1,105.8,4.2,160.7,4.2,228.4" />
|
|
13
|
-
<path d="M814.9,600.4c-2.4,0-4.3,1.9-4.3,4.2v358.5c0,2.3,1.9,4.3,4.3,4.3h20.8c23.3,0,42.1-18.9,42.1-42.1V642.6 c0-23.3-18.8-42.1-42.1-42.1H814.9z M814.9,207.1c-2.4,0-4.3,1.9-4.3,4.2v292.1c0,2.4,1.9,4.3,4.3,4.3h17.4 c23.2,0,42.1-18.9,42.1-42.1V249.2c0-23.2-18.9-42.1-42.1-42.1H814.9z M691.5,115.3H868c72.9,0,132,59.1,132,132v185.1 c0,51.9-34,95.7-81,110.7v2.5c46.9,15,81,58.8,81,110.8v282.6c0,64.2-52.1,116.3-116.3,116.3l-192.2,0.1c-2.4,0-4.2-1.9-4.2-4.2 V119.4C687.2,117.2,689.1,115.3,691.5,115.3" />
|
|
1
|
+
<svg
|
|
2
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
3
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
4
|
+
aria-hidden="true"
|
|
5
|
+
role="img"
|
|
6
|
+
width="48"
|
|
7
|
+
height="48"
|
|
8
|
+
preserveAspectRatio="xMidYMid meet"
|
|
9
|
+
viewBox="0 0 1300 1300"
|
|
10
|
+
>
|
|
11
|
+
<path d="M539.3,128.2c0-19.3-15.7-35-35-35c-19.3,0-35,15.6-35,35v882.1c0,19.4,15.7,35,35,35c19.3,0,35-15.7,35-35V692.4 c0-2.3,1.9-4.2,4.2-4.2h115c2.3,0,4.2,1.9,4.2,4.2v320.7c0,67.7-71,122.5-158.4,122.5c-87.5,0-158.5-54.9-158.5-122.5V122.9 c0-67.6,70.9-122.5,158.5-122.5c87.5,0,158.4,54.9,158.4,122.5v316.6c0,2.3-1.9,4.2-4.2,4.2h-115c-2.3,0-4.2-1.8-4.2-4.2V128.2z" />
|
|
12
|
+
<path d="M4.2,228.4c-7.4,51.5-4.8,135.9,6.3,183.3c12.2,51.7,82.3,156.1,113.9,204.6c31.6,48.5,73.8,99.1,73.2,166.6v161.7 c0,19.3-15.7,35-35,35c-19.3,0-34.9-15.7-34.9-35V696.7c0-2.3-1.9-4.2-4.3-4.2H8.4c-2.4,0-4.2,1.9-4.2,4.2v255.2 c0,67.7,70.9,122.5,158.4,122.5c87.5,0,158.5-54.9,158.5-122.5V782.8c-0.5-116-32.2-132.9-73.2-202.4 c-29.4-49.9-101.8-153-113.9-204.6c-11.1-47.4-10.6-102.3-6.3-152.1c0-19.3,15.7-35,34.9-35c19.3,0,35,15.7,35,35V444 c0,2.3,1.9,4.2,4.3,4.2h115c2.4,0,4.2-1.9,4.2-4.2V228.4c0-67.7-70.9-122.5-158.5-122.5C75.1,105.8,4.2,160.7,4.2,228.4" />
|
|
13
|
+
<path d="M814.9,600.4c-2.4,0-4.3,1.9-4.3,4.2v358.5c0,2.3,1.9,4.3,4.3,4.3h20.8c23.3,0,42.1-18.9,42.1-42.1V642.6 c0-23.3-18.8-42.1-42.1-42.1H814.9z M814.9,207.1c-2.4,0-4.3,1.9-4.3,4.2v292.1c0,2.4,1.9,4.3,4.3,4.3h17.4 c23.2,0,42.1-18.9,42.1-42.1V249.2c0-23.2-18.9-42.1-42.1-42.1H814.9z M691.5,115.3H868c72.9,0,132,59.1,132,132v185.1 c0,51.9-34,95.7-81,110.7v2.5c46.9,15,81,58.8,81,110.8v282.6c0,64.2-52.1,116.3-116.3,116.3l-192.2,0.1c-2.4,0-4.2-1.9-4.2-4.2 V119.4C687.2,117.2,689.1,115.3,691.5,115.3" />
|
|
14
14
|
</svg>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.363",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -428,5 +428,5 @@
|
|
|
428
428
|
},
|
|
429
429
|
"./mvc/*": "./mvc/*"
|
|
430
430
|
},
|
|
431
|
-
"buildHash": "
|
|
431
|
+
"buildHash": "AC04F9303577AB77F8D721A27C6C42AD6DC24EE6C16C97EF078600D5A65E4CA9"
|
|
432
432
|
}
|
|
@@ -12,6 +12,7 @@ export declare class ScbTooltip extends LitElement {
|
|
|
12
12
|
open: boolean;
|
|
13
13
|
delay: number;
|
|
14
14
|
offset: number;
|
|
15
|
+
maxWidth: string;
|
|
15
16
|
private _hoverActive;
|
|
16
17
|
private _clickActive;
|
|
17
18
|
private _hideTimeout;
|
|
@@ -25,6 +26,7 @@ export declare class ScbTooltip extends LitElement {
|
|
|
25
26
|
private _getTooltipElement;
|
|
26
27
|
private _hasTooltipContent;
|
|
27
28
|
private _updateDelayCss;
|
|
29
|
+
private _updateMaxWidthCss;
|
|
28
30
|
private _dispatchOpenChanged;
|
|
29
31
|
private _findTriggerElement;
|
|
30
32
|
private _updateTriggerElement;
|