scb-wc-test 0.1.1 → 0.1.2
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 +130 -130
- package/all.js +59 -0
- package/mvc/components/scb-card/scb-card.js +2 -2
- package/mvc/components/scb-checkbox/scb-checkbox-group.js +10 -15
- package/mvc/components/scb-checkbox/scb-checkbox.js +25 -48
- package/mvc/components/scb-fact-card/scb-fact-card.js +15 -14
- package/package.json +256 -247
- package/scb-card/scb-card.d.ts +1 -1
- package/scb-card/scb-card.js +2 -2
- package/scb-checkbox/scb-checkbox-group.js +30 -35
- package/scb-checkbox/scb-checkbox.js +74 -84
- package/scb-fact-card/scb-fact-card.d.ts +14 -0
- package/scb-fact-card/scb-fact-card.js +77 -39
- package/scb-wc-test.bundle.js +207 -234
package/README.md
CHANGED
|
@@ -1,130 +1,130 @@
|
|
|
1
|
-
# Om SCB Web Components Test
|
|
2
|
-
|
|
3
|
-
> ⚠️ **Testpaket**
|
|
4
|
-
> Testkomponenter under utveckling – kan ändras eller tas bort.
|
|
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.
|
|
7
|
-
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
## Kom igång
|
|
11
|
-
|
|
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).
|
|
13
|
-
|
|
14
|
-
Installera paketet:
|
|
15
|
-
```sh
|
|
16
|
-
npm install scb-wc-test
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
---
|
|
20
|
-
|
|
21
|
-
## Alternativ 1: Använd som ES-moduler (i exempelvis React)
|
|
22
|
-
|
|
23
|
-
Importera enskilda komponenter (bäst för tree‑shaking):
|
|
24
|
-
```js
|
|
25
|
-
import 'scb-wc-test/scb-wc-test.css';
|
|
26
|
-
import 'scb-wc-test/scb-button';
|
|
27
|
-
import 'scb-wc-test/scb-accordion';
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
Importera allt (ej rekommenderat, men möjligt):
|
|
31
|
-
```js
|
|
32
|
-
import 'scb-wc-test/scb-wc-test.css';
|
|
33
|
-
import 'scb-wc-test/all';
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
---
|
|
37
|
-
|
|
38
|
-
## Alternativ 2: Använd i MVC/MPA via `<script type="module">`
|
|
39
|
-
|
|
40
|
-
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/`.
|
|
41
|
-
|
|
42
|
-
### Rekommenderat: ett npm‑script
|
|
43
|
-
|
|
44
|
-
Lägg till i din apps `package.json`:
|
|
45
|
-
```jsonc
|
|
46
|
-
{
|
|
47
|
-
"scripts": {
|
|
48
|
-
"ui:install": "node -e \"const fs=require('fs'),p=require('path');const base=(process.env.npm_config_ui_wwwroot)||'wwwroot';const src=p.resolve('node_modules/scb-wc-test/mvc');const dst=p.resolve(base,'ui');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc-test?');process.exit(1);}fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(base,{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\""
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
Kör sedan:
|
|
54
|
-
```sh
|
|
55
|
-
npm run ui:install
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
Det kopierar hela `mvc/` till `wwwroot/ui/` (komponenter, vendor och CSS).
|
|
59
|
-
|
|
60
|
-
#### Vanliga lägen (var ligger din `package.json`?)
|
|
61
|
-
|
|
62
|
-
**A) Standard MVC-projekt**
|
|
63
|
-
`package.json` ligger i **projektroten** (vid sidan av `.csproj`).
|
|
64
|
-
Kör bara:
|
|
65
|
-
```sh
|
|
66
|
-
npm run ui:install
|
|
67
|
-
```
|
|
68
|
-
Resultat: filer kopieras till `./wwwroot/ui/`.
|
|
69
|
-
|
|
70
|
-
**B) Frontend i `ClientApp/`**
|
|
71
|
-
`package.json` ligger i **ClientApp/** och webbroten är `../wwwroot`.
|
|
72
|
-
Kör med flagga:
|
|
73
|
-
```sh
|
|
74
|
-
npm run ui:install --ui_wwwroot=../wwwroot
|
|
75
|
-
```
|
|
76
|
-
Resultat: filer kopieras till `../wwwroot/ui/`.
|
|
77
|
-
|
|
78
|
-
### Ladda filer i din layout
|
|
79
|
-
|
|
80
|
-
```html
|
|
81
|
-
<!-- Lägg helst i <head> -->
|
|
82
|
-
<link rel="stylesheet" href="~/ui/scb-wc-test.css" />
|
|
83
|
-
|
|
84
|
-
<!-- Ladda ENDAST de komponenter du använder på sidan, gärna precis före </body> -->
|
|
85
|
-
<script type="module" src="~/ui/components/scb-link/scb-link.js"></script>
|
|
86
|
-
<script type="module" src="~/ui/components/scb-button/scb-button.js"></script>
|
|
87
|
-
|
|
88
|
-
<!-- För demosida: ladda alla -->
|
|
89
|
-
<!-- <script type="module" src="~/ui/components/all.js"></script> -->
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
---
|
|
93
|
-
|
|
94
|
-
### 2.1) CI/CD (exempel)
|
|
95
|
-
|
|
96
|
-
Kör samma script i din pipeline:
|
|
97
|
-
```yaml
|
|
98
|
-
steps:
|
|
99
|
-
- script: npm ci
|
|
100
|
-
- script: npm run ui:install
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
Behöver du annan webbrotsökväg i pipelinen? Lägg till flaggan:
|
|
104
|
-
```yaml
|
|
105
|
-
- script: npm run ui:install --ui_wwwroot=../wwwroot
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
---
|
|
109
|
-
|
|
110
|
-
## Alternativ 3: Använd bundlad version (IIFE)
|
|
111
|
-
|
|
112
|
-
Om ESM inte stöds, använd den bundlade varianten från paketroten.
|
|
113
|
-
Flytta följande två filer från `node_modules/scb-wc-test` och använd dem i applikationen:
|
|
114
|
-
```
|
|
115
|
-
node_modules/scb-wc-test/scb-wc-test.bundle.js
|
|
116
|
-
node_modules/scb-wc-test/scb-wc-test.css
|
|
117
|
-
```
|
|
118
|
-
```html
|
|
119
|
-
<link rel="stylesheet" href="scb-wc-test.css">
|
|
120
|
-
<script src="scb-wc-test.bundle.js"></script>
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
---
|
|
124
|
-
|
|
125
|
-
## Viktigt
|
|
126
|
-
|
|
127
|
-
- **Stå i mappen med din `package.json`** när du kör `npm install` och kopieringskommandon.
|
|
128
|
-
- **Placeringen av `package.json` styr defaultmål**: roten -> `wwwroot/ui`, `ClientApp/` -> använd `--ui_wwwroot=../wwwroot`.
|
|
129
|
-
- **Blanda inte** MVC‑ESM och IIFE på samma sida.
|
|
130
|
-
- `scb-wc-test` är ett **testpaket** – komponenter kan ändras eller tas bort mellan versioner.
|
|
1
|
+
# Om SCB Web Components Test
|
|
2
|
+
|
|
3
|
+
> ⚠️ **Testpaket**
|
|
4
|
+
> Testkomponenter under utveckling – kan ändras eller tas bort.
|
|
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.
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## Kom igång
|
|
11
|
+
|
|
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).
|
|
13
|
+
|
|
14
|
+
Installera paketet:
|
|
15
|
+
```sh
|
|
16
|
+
npm install scb-wc-test
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Alternativ 1: Använd som ES-moduler (i exempelvis React)
|
|
22
|
+
|
|
23
|
+
Importera enskilda komponenter (bäst för tree‑shaking):
|
|
24
|
+
```js
|
|
25
|
+
import 'scb-wc-test/scb-wc-test.css';
|
|
26
|
+
import 'scb-wc-test/scb-button';
|
|
27
|
+
import 'scb-wc-test/scb-accordion';
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Importera allt (ej rekommenderat, men möjligt):
|
|
31
|
+
```js
|
|
32
|
+
import 'scb-wc-test/scb-wc-test.css';
|
|
33
|
+
import 'scb-wc-test/all';
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## Alternativ 2: Använd i MVC/MPA via `<script type="module">`
|
|
39
|
+
|
|
40
|
+
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/`.
|
|
41
|
+
|
|
42
|
+
### Rekommenderat: ett npm‑script
|
|
43
|
+
|
|
44
|
+
Lägg till i din apps `package.json`:
|
|
45
|
+
```jsonc
|
|
46
|
+
{
|
|
47
|
+
"scripts": {
|
|
48
|
+
"ui:install": "node -e \"const fs=require('fs'),p=require('path');const base=(process.env.npm_config_ui_wwwroot)||'wwwroot';const src=p.resolve('node_modules/scb-wc-test/mvc');const dst=p.resolve(base,'ui');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install scb-wc-test?');process.exit(1);}fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(base,{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\""
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Kör sedan:
|
|
54
|
+
```sh
|
|
55
|
+
npm run ui:install
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Det kopierar hela `mvc/` till `wwwroot/ui/` (komponenter, vendor och CSS).
|
|
59
|
+
|
|
60
|
+
#### Vanliga lägen (var ligger din `package.json`?)
|
|
61
|
+
|
|
62
|
+
**A) Standard MVC-projekt**
|
|
63
|
+
`package.json` ligger i **projektroten** (vid sidan av `.csproj`).
|
|
64
|
+
Kör bara:
|
|
65
|
+
```sh
|
|
66
|
+
npm run ui:install
|
|
67
|
+
```
|
|
68
|
+
Resultat: filer kopieras till `./wwwroot/ui/`.
|
|
69
|
+
|
|
70
|
+
**B) Frontend i `ClientApp/`**
|
|
71
|
+
`package.json` ligger i **ClientApp/** och webbroten är `../wwwroot`.
|
|
72
|
+
Kör med flagga:
|
|
73
|
+
```sh
|
|
74
|
+
npm run ui:install --ui_wwwroot=../wwwroot
|
|
75
|
+
```
|
|
76
|
+
Resultat: filer kopieras till `../wwwroot/ui/`.
|
|
77
|
+
|
|
78
|
+
### Ladda filer i din layout
|
|
79
|
+
|
|
80
|
+
```html
|
|
81
|
+
<!-- Lägg helst i <head> -->
|
|
82
|
+
<link rel="stylesheet" href="~/ui/scb-wc-test.css" />
|
|
83
|
+
|
|
84
|
+
<!-- Ladda ENDAST de komponenter du använder på sidan, gärna precis före </body> -->
|
|
85
|
+
<script type="module" src="~/ui/components/scb-link/scb-link.js"></script>
|
|
86
|
+
<script type="module" src="~/ui/components/scb-button/scb-button.js"></script>
|
|
87
|
+
|
|
88
|
+
<!-- För demosida: ladda alla -->
|
|
89
|
+
<!-- <script type="module" src="~/ui/components/all.js"></script> -->
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
94
|
+
### 2.1) CI/CD (exempel)
|
|
95
|
+
|
|
96
|
+
Kör samma script i din pipeline:
|
|
97
|
+
```yaml
|
|
98
|
+
steps:
|
|
99
|
+
- script: npm ci
|
|
100
|
+
- script: npm run ui:install
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
Behöver du annan webbrotsökväg i pipelinen? Lägg till flaggan:
|
|
104
|
+
```yaml
|
|
105
|
+
- script: npm run ui:install --ui_wwwroot=../wwwroot
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
## Alternativ 3: Använd bundlad version (IIFE)
|
|
111
|
+
|
|
112
|
+
Om ESM inte stöds, använd den bundlade varianten från paketroten.
|
|
113
|
+
Flytta följande två filer från `node_modules/scb-wc-test` och använd dem i applikationen:
|
|
114
|
+
```
|
|
115
|
+
node_modules/scb-wc-test/scb-wc-test.bundle.js
|
|
116
|
+
node_modules/scb-wc-test/scb-wc-test.css
|
|
117
|
+
```
|
|
118
|
+
```html
|
|
119
|
+
<link rel="stylesheet" href="scb-wc-test.css">
|
|
120
|
+
<script src="scb-wc-test.bundle.js"></script>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
## Viktigt
|
|
126
|
+
|
|
127
|
+
- **Stå i mappen med din `package.json`** när du kör `npm install` och kopieringskommandon.
|
|
128
|
+
- **Placeringen av `package.json` styr defaultmål**: roten -> `wwwroot/ui`, `ClientApp/` -> använd `--ui_wwwroot=../wwwroot`.
|
|
129
|
+
- **Blanda inte** MVC‑ESM och IIFE på samma sida.
|
|
130
|
+
- `scb-wc-test` är ett **testpaket** – komponenter kan ändras eller tas bort mellan versioner.
|
package/all.js
CHANGED
|
@@ -1,4 +1,63 @@
|
|
|
1
|
+
import './all.js';
|
|
1
2
|
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-breadcrumb/scb-breadcrumb-item.js';
|
|
9
|
+
import './mvc/components/scb-breadcrumb/scb-breadcrumb.js';
|
|
10
|
+
import './mvc/components/scb-button/scb-button.js';
|
|
11
|
+
import './mvc/components/scb-calendar-card/scb-calendar-card.js';
|
|
12
|
+
import './mvc/components/scb-card/scb-card.js';
|
|
13
|
+
import './mvc/components/scb-checkbox/scb-checkbox-group.js';
|
|
14
|
+
import './mvc/components/scb-checkbox/scb-checkbox.js';
|
|
15
|
+
import './mvc/components/scb-chips/scb-chip.js';
|
|
16
|
+
import './mvc/components/scb-dialog/scb-dialog.js';
|
|
17
|
+
import './mvc/components/scb-divider/scb-divider.js';
|
|
18
|
+
import './mvc/components/scb-drawer/scb-drawer-item.js';
|
|
19
|
+
import './mvc/components/scb-drawer/scb-drawer-section.js';
|
|
20
|
+
import './mvc/components/scb-drawer/scb-drawer.js';
|
|
21
|
+
import './mvc/components/scb-drawer/scb-sub-drawer.js';
|
|
22
|
+
import './mvc/components/scb-fact-card/scb-fact-card-content.js';
|
|
23
|
+
import './mvc/components/scb-fact-card/scb-fact-card.js';
|
|
24
|
+
import './mvc/components/scb-footer/scb-footer-section.js';
|
|
25
|
+
import './mvc/components/scb-footer/scb-footer.js';
|
|
26
|
+
import './mvc/components/scb-grid/scb-grid-item.js';
|
|
27
|
+
import './mvc/components/scb-grid/scb-grid.js';
|
|
28
|
+
import './mvc/components/scb-grid/scb-stack.js';
|
|
29
|
+
import './mvc/components/scb-header/scb-header-drawer-group.js';
|
|
30
|
+
import './mvc/components/scb-header/scb-header-drawer-item.js';
|
|
31
|
+
import './mvc/components/scb-header/scb-header-tab.js';
|
|
32
|
+
import './mvc/components/scb-header/scb-header-utility.js';
|
|
33
|
+
import './mvc/components/scb-header/scb-header.js';
|
|
34
|
+
import './mvc/components/scb-icon-button/scb-icon-button.js';
|
|
35
|
+
import './mvc/components/scb-keyfigure-card/scb-keyfigure-card.js';
|
|
36
|
+
import './mvc/components/scb-link/scb-link.js';
|
|
37
|
+
import './mvc/components/scb-list/scb-list-item.js';
|
|
38
|
+
import './mvc/components/scb-list/scb-list.js';
|
|
39
|
+
import './mvc/components/scb-menu/scb-menu-item.js';
|
|
40
|
+
import './mvc/components/scb-menu/scb-menu.js';
|
|
41
|
+
import './mvc/components/scb-menu/scb-sub-menu.js';
|
|
42
|
+
import './mvc/components/scb-notification/scb-notification.js';
|
|
43
|
+
import './mvc/components/scb-progress-indicator/scb-progress-indicator.js';
|
|
44
|
+
import './mvc/components/scb-radio-button/scb-radio-button.js';
|
|
45
|
+
import './mvc/components/scb-radio-button/scb-radio-group.js';
|
|
46
|
+
import './mvc/components/scb-search/scb-search.js';
|
|
47
|
+
import './mvc/components/scb-snackbar/scb-snackbar.js';
|
|
48
|
+
import './mvc/components/scb-status-pill/scb-status-pill.js';
|
|
49
|
+
import './mvc/components/scb-switch/scb-switch.js';
|
|
50
|
+
import './mvc/components/scb-tabs/scb-primary-tab.js';
|
|
51
|
+
import './mvc/components/scb-tabs/scb-secondary-tab.js';
|
|
52
|
+
import './mvc/components/scb-tabs/scb-tabs.js';
|
|
53
|
+
import './mvc/components/scb-textfield/scb-textfield.js';
|
|
54
|
+
import './mvc/components/scb-toc/scb-toc-item.js';
|
|
55
|
+
import './mvc/components/scb-toc/scb-toc.js';
|
|
56
|
+
import './mvc/components/scb-tooltip/scb-tooltip.js';
|
|
57
|
+
import './mvc/vendor/preload-helper.js';
|
|
58
|
+
import './mvc/vendor/vendor-lit.js';
|
|
59
|
+
import './mvc/vendor/vendor-material.js';
|
|
60
|
+
import './mvc/vendor/vendor.js';
|
|
2
61
|
import './scb-accordion/scb-accordion-item.js';
|
|
3
62
|
import './scb-accordion/scb-accordion.js';
|
|
4
63
|
import './scb-app-bar/scb-app-bar.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{b as p,n as e,i as h,x as i,t as v}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-list/scb-list.js";import"../scb-button/scb-button.js";import"../../vendor/preload-helper.js";import"../scb-list/scb-list-item.js";var m=Object.defineProperty,b=Object.getOwnPropertyDescriptor,s=(a,r,l,d)=>{for(var c=d>1?void 0:d?b(r,l):r,n=a.length-1,o;n>=0;n--)(o=a[n])&&(c=(d?o(r,l,c):o(c))||c);return d&&c&&m(r,l,c),c};let t=class extends h{constructor(){super(...arguments),this.type="",this.variant="",this.direction="",this.mediaType="",this.mediaHref="",this.cardHref="",this.label="",this.subLabel="",this.supportingText="",this.
|
|
1
|
+
import{b as p,n as e,i as h,x as i,t as v}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-list/scb-list.js";import"../scb-button/scb-button.js";import"../../vendor/preload-helper.js";import"../scb-list/scb-list-item.js";var m=Object.defineProperty,b=Object.getOwnPropertyDescriptor,s=(a,r,l,d)=>{for(var c=d>1?void 0:d?b(r,l):r,n=a.length-1,o;n>=0;n--)(o=a[n])&&(c=(d?o(r,l,c):o(c))||c);return d&&c&&m(r,l,c),c};let t=class extends h{constructor(){super(...arguments),this.type="",this.variant="",this.direction="",this.mediaType="",this.mediaHref="",this.cardHref="",this.label="",this.subLabel="",this.supportingText="",this.commentsText="",this.comments=0,this.likesText="",this.likes=0}render(){const a=this.variant?`${this.variant.toLowerCase()}`:"",r=this.direction?`${this.direction.toLowerCase()}`:"",l=this.cardHref?"clickable":"",d=this.mediaType?`${this.mediaType.toLowerCase()}`:"";switch(this.type){case"standard":return i`
|
|
2
2
|
<div class="scb-card ${a} ${r} ${l}">
|
|
3
3
|
${this.cardHref?i`<md-ripple></md-ripple>`:""}
|
|
4
4
|
${this.mediaHref?i`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />`:""}
|
|
@@ -253,4 +253,4 @@ import{b as p,n as e,i as h,x as i,t as v}from"../../vendor/vendor.js";import"..
|
|
|
253
253
|
gap: var(--spacing-3);
|
|
254
254
|
}
|
|
255
255
|
|
|
256
|
-
`;s([e({type:String})],t.prototype,"type",2);s([e({type:String})],t.prototype,"variant",2);s([e({type:String})],t.prototype,"direction",2);s([e({type:String,attribute:"media-type"})],t.prototype,"mediaType",2);s([e({type:String,attribute:"media-href"})],t.prototype,"mediaHref",2);s([e({type:String,attribute:"card-href"})],t.prototype,"cardHref",2);s([e({type:String})],t.prototype,"label",2);s([e({type:String,attribute:"sub-label"})],t.prototype,"subLabel",2);s([e({type:String,attribute:"supporting-text"})],t.prototype,"supportingText",2);s([e({type:Date})],t.prototype,"date",2);s([e({type:String,attribute:"social-comments-text"})],t.prototype,"commentsText",2);s([e({type:Number,attribute:"social-comments",reflect:!0})],t.prototype,"comments",2);s([e({type:String,attribute:"social-likes-text"})],t.prototype,"likesText",2);s([e({type:Number,attribute:"social-likes",reflect:!0})],t.prototype,"likes",2);t=s([v("scb-card")],t);
|
|
256
|
+
`;s([e({type:String})],t.prototype,"type",2);s([e({type:String})],t.prototype,"variant",2);s([e({type:String})],t.prototype,"direction",2);s([e({type:String,attribute:"media-type"})],t.prototype,"mediaType",2);s([e({type:String,attribute:"media-href"})],t.prototype,"mediaHref",2);s([e({type:String,attribute:"card-href"})],t.prototype,"cardHref",2);s([e({type:String})],t.prototype,"label",2);s([e({type:String,attribute:"sub-label"})],t.prototype,"subLabel",2);s([e({type:String,attribute:"supporting-text"})],t.prototype,"supportingText",2);s([e({type:Date,reflect:!0})],t.prototype,"date",2);s([e({type:String,attribute:"social-comments-text"})],t.prototype,"commentsText",2);s([e({type:Number,attribute:"social-comments",reflect:!0})],t.prototype,"comments",2);s([e({type:String,attribute:"social-likes-text"})],t.prototype,"likesText",2);s([e({type:Number,attribute:"social-likes",reflect:!0})],t.prototype,"likes",2);t=s([v("scb-card")],t);
|
|
@@ -1,33 +1,28 @@
|
|
|
1
|
-
import{b
|
|
2
|
-
<div class="g" role="group" aria-disabled=${String(this.disabled)} style=${`--_dir:${
|
|
3
|
-
<slot @slotchange=${p(this,
|
|
1
|
+
import{b,n as h,i as g,x as f,t as u}from"../../vendor/vendor.js";var v=Object.defineProperty,x=Object.getOwnPropertyDescriptor,d=t=>{throw TypeError(t)},c=(t,s,e,i)=>{for(var r=i>1?void 0:i?x(s,e):s,n=t.length-1,l;n>=0;n--)(l=t[n])&&(r=(i?l(s,e,r):l(r))||r);return i&&r&&v(s,e,r),r},y=(t,s,e)=>s.has(t)||d("Cannot "+e),p=(t,s,e)=>(y(t,s,"read from private field"),e?e.call(t):s.get(t)),_=(t,s,e)=>s.has(t)?d("Cannot add the same private member more than once"):s instanceof WeakSet?s.add(t):s.set(t,e),a;let o=class extends g{constructor(){super(...arguments),this.orientation="vertical",this.disabled=!1,this.spacing="group",_(this,a,()=>{const t=this.shadowRoot?.querySelector("slot");if(!t)return;const s=t.assignedElements({flatten:!0}).filter(e=>e.tagName.toLowerCase()==="scb-checkbox");for(const e of s)this.disabled?e.setAttribute("disabled",""):e.removeAttribute("disabled"),this.orientation==="horizontal"?e.setAttribute("orientation","horizontal"):e.removeAttribute("orientation"),this.spacing==="group"?e.style.setProperty("--scb-checkbox-gap","0"):e.style.removeProperty("--scb-checkbox-gap")})}render(){const t=this.orientation==="horizontal"?"row":"column";return f`
|
|
2
|
+
<div class="g" role="group" aria-disabled=${String(this.disabled)} style=${`--_dir:${t}`}>
|
|
3
|
+
<slot @slotchange=${p(this,a)}></slot>
|
|
4
4
|
</div>
|
|
5
|
-
`}firstUpdated(){p(this,
|
|
6
|
-
/* Standardgap när group äger spacing. Kan överskridas via --scb-checkbox-gap. */
|
|
5
|
+
`}firstUpdated(){p(this,a).call(this)}updated(t){(t.has("disabled")||t.has("orientation")||t.has("spacing"))&&p(this,a).call(this)}};a=new WeakMap;o.styles=b`
|
|
7
6
|
:host {
|
|
8
7
|
display: block;
|
|
9
|
-
--scb-checkbox-gap: 12px;
|
|
8
|
+
--scb-checkbox-gap: var(--spacing-4, 12px);
|
|
10
9
|
}
|
|
11
10
|
|
|
12
11
|
.g {
|
|
13
12
|
display: flex;
|
|
14
13
|
flex-direction: var(--_dir, column);
|
|
15
14
|
align-items: flex-start;
|
|
16
|
-
gap: 0;
|
|
17
|
-
}
|
|
15
|
+
gap: 0;
|
|
18
16
|
|
|
19
|
-
/* spacing="group" → använder gap-variabeln */
|
|
20
17
|
:host([spacing="group"]) .g {
|
|
21
18
|
gap: var(--scb-checkbox-gap);
|
|
22
19
|
}
|
|
23
20
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
21
|
+
:host([orientation="horizontal"]) {
|
|
22
|
+
--scb-checkbox-gap: var(--spacing-8, 32px);
|
|
23
|
+
}
|
|
28
24
|
|
|
29
|
-
/* När gruppen äger spacing: nolla barnens egen högermarginal (horisontellt läge). */
|
|
30
25
|
:host([spacing="group"]) ::slotted(scb-checkbox) {
|
|
31
26
|
--scb-checkbox-gap: 0;
|
|
32
27
|
}
|
|
33
|
-
`;
|
|
28
|
+
`;c([h({type:String,reflect:!0})],o.prototype,"orientation",2);c([h({type:Boolean,reflect:!0})],o.prototype,"disabled",2);c([h({type:String,reflect:!0})],o.prototype,"spacing",2);o=c([u("scb-checkbox-group")],o);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{b as
|
|
1
|
+
import{b as h,n,i as b,E as d,x as p,t as g}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";var u=Object.defineProperty,x=Object.getOwnPropertyDescriptor,i=(e,c,s,l)=>{for(var r=l>1?void 0:l?x(c,s):c,t=e.length-1,o;t>=0;t--)(o=e[t])&&(r=(l?o(c,s,r):o(r))||r);return l&&r&&u(c,s,r),r};let a=class extends b{constructor(){super(...arguments),this.disabled=!1,this.indeterminate=!1,this.checked=!1,this.label="",this.supportingText="",this._checkboxId=""}connectedCallback(){super.connectedCallback(),this._checkboxId=this.id||`scb-checkbox-${Math.random().toString(36).slice(2,11)}`}firstUpdated(){const e=this.shadowRoot?.querySelector("md-checkbox");e&&e.addEventListener("change",()=>{const s=e.checked;this.checked=s,this.dispatchEvent(new CustomEvent("change",{detail:{checked:s},bubbles:!0,composed:!0}))}),this.shadowRoot?.querySelector("label.wrap")?.addEventListener("click",s=>{if(this.disabled)return;if(!s.composedPath().some(t=>{const o=t;return o?.tagName?.toLowerCase?.()==="md-checkbox"||o?.classList?.contains("box-wrap")})){s.preventDefault();const t=this.shadowRoot.querySelector("md-checkbox");t&&(t.checked=!t.checked,t.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}})}updated(e){super.updated(e),e.has("disabled")&&this.toggleAttribute("aria-disabled",this.disabled)}render(){const e=this.supportingText?`${this._checkboxId}-supporting-text`:void 0;return p`
|
|
2
2
|
<label class="wrap">
|
|
3
3
|
<div class="box-wrap">
|
|
4
4
|
<md-checkbox
|
|
@@ -7,93 +7,70 @@ import{b as d,n as i,i as h,x as p,t as b}from"../../vendor/vendor.js";import"..
|
|
|
7
7
|
?disabled=${this.disabled}
|
|
8
8
|
?indeterminate=${this.indeterminate}
|
|
9
9
|
?checked=${this.checked}
|
|
10
|
-
aria-describedby=${e}
|
|
10
|
+
aria-describedby=${e||d}
|
|
11
|
+
aria-label=${this.label||d}
|
|
11
12
|
></md-checkbox>
|
|
12
13
|
</div>
|
|
13
|
-
${this.label?p`<span class="lbl">${this.label}</span>`:
|
|
14
|
+
${this.label?p`<span class="lbl">${this.label}</span>`:d}
|
|
14
15
|
</label>
|
|
15
16
|
|
|
16
17
|
${this.supportingText?p`<div id="${this._checkboxId}-supporting-text" class="supporting-text">
|
|
17
18
|
${this.supportingText}
|
|
18
|
-
</div>`:
|
|
19
|
-
|
|
19
|
+
</div>`:d}
|
|
20
20
|
<slot></slot>
|
|
21
|
-
`}};
|
|
22
|
-
/* Grundläggande layout med inline-grid */
|
|
21
|
+
`}};a.styles=h`
|
|
23
22
|
:host {
|
|
24
23
|
display: inline-grid;
|
|
25
24
|
grid-template-columns: auto;
|
|
26
25
|
grid-template-rows: auto auto;
|
|
27
|
-
row-gap: 4px;
|
|
26
|
+
row-gap: var(--spacing-2, 4px);
|
|
28
27
|
font-family: var(--brand-font, 'Inter', sans-serif);
|
|
29
28
|
}
|
|
30
29
|
|
|
31
|
-
/* Mer luft till höger i horisontella layouter (sätts av checkbox-gruppen) */
|
|
32
30
|
:host([orientation="horizontal"]) {
|
|
33
|
-
margin-inline-end: var(--scb-checkbox-gap, 24px);
|
|
31
|
+
margin-inline-end: var(--scb-checkbox-gap, var(--spacing-7, 24px));
|
|
34
32
|
}
|
|
35
33
|
|
|
36
|
-
/* Wrapper för md-checkbox + label
|
|
37
|
-
48px kontrollblock + 12px textgap (matchar radio) */
|
|
38
34
|
.wrap {
|
|
39
35
|
display: inline-flex;
|
|
40
36
|
align-items: center;
|
|
41
|
-
|
|
37
|
+
padding: var(--spacing-2, 4px);
|
|
38
|
+
gap: var(--spacing-2, 4px);
|
|
42
39
|
cursor: pointer;
|
|
43
|
-
overflow: visible;
|
|
44
|
-
}
|
|
45
|
-
:host([disabled]) .wrap {
|
|
46
|
-
cursor: default;
|
|
40
|
+
overflow: visible;
|
|
47
41
|
}
|
|
42
|
+
:host([disabled]) .wrap { cursor: default; }
|
|
48
43
|
|
|
49
|
-
/* Hit-target runt själva md-checkboxen (48px) */
|
|
50
44
|
.box-wrap {
|
|
51
|
-
height: var(--scb-checkbox-target,
|
|
52
|
-
width: var(--scb-checkbox-target,
|
|
45
|
+
height: var(--scb-checkbox-target, 40px);
|
|
46
|
+
width: var(--scb-checkbox-target, 40px);
|
|
53
47
|
display: flex;
|
|
54
48
|
align-items: center;
|
|
55
49
|
justify-content: center;
|
|
56
50
|
overflow: visible;
|
|
57
51
|
}
|
|
58
52
|
|
|
59
|
-
|
|
60
|
-
md-checkbox {
|
|
61
|
-
margin: 0;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
/* Visa focusring ENDAST vid tangentbordsfokus.
|
|
65
|
-
Vid musklick (focus men inte focus-visible) görs den transparent. */
|
|
66
|
-
md-checkbox:focus:not(:focus-visible) {
|
|
67
|
-
--md-focus-ring-color: transparent;
|
|
68
|
-
--md-focus-ring-width: 0;
|
|
69
|
-
outline: none;
|
|
70
|
-
box-shadow: none;
|
|
71
|
-
}
|
|
53
|
+
md-checkbox { margin: 0; }
|
|
72
54
|
|
|
73
|
-
/* Label-styling */
|
|
74
55
|
.lbl {
|
|
75
56
|
color: var(--md-sys-color-on-surface);
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
57
|
+
font-family: var(--brand-font);
|
|
58
|
+
font-size: var(--md-sys-typescale-body-large-size);
|
|
59
|
+
line-height: var(--md-sys-typescale-body-large-line-height);
|
|
60
|
+
font-weight: var(--weight-regular, 400);
|
|
61
|
+
letter-spacing: var(--md-sys-typescale-body-large-tracking);
|
|
81
62
|
}
|
|
63
|
+
:host([disabled]) .lbl { color: var(--n-60); }
|
|
82
64
|
|
|
83
|
-
/* Supporting text styling */
|
|
84
65
|
.supporting-text {
|
|
85
66
|
color: var(--md-sys-color-on-surface-variant);
|
|
86
|
-
line-height:
|
|
87
|
-
|
|
88
|
-
margin-left: calc(12px + var(--scb-checkbox-target, 48px));
|
|
89
|
-
}
|
|
90
|
-
:host([disabled]) .supporting-text {
|
|
91
|
-
color: var(--n-60);
|
|
67
|
+
line-height: var(--md-sys-typescale-body-medium-line-height, 20px);
|
|
68
|
+
margin-left: calc(var(--spacing-2, 4px) + var(--scb-checkbox-target, 40px));
|
|
92
69
|
}
|
|
70
|
+
:host([disabled]) .supporting-text { color: var(--n-60); }
|
|
93
71
|
|
|
94
|
-
/* Anpassning för mörkt läge */
|
|
95
72
|
@media (prefers-color-scheme: dark) {
|
|
96
73
|
.lbl { color: var(--md-sys-color-on-surface); }
|
|
97
74
|
.supporting-text { color: var(--md-sys-color-on-surface-variant); }
|
|
98
75
|
}
|
|
99
|
-
`;
|
|
76
|
+
`;i([n({type:Boolean,reflect:!0})],a.prototype,"disabled",2);i([n({type:Boolean,reflect:!0})],a.prototype,"indeterminate",2);i([n({type:Boolean,reflect:!0})],a.prototype,"checked",2);i([n({type:String})],a.prototype,"label",2);i([n({type:String,attribute:"supporting-text"})],a.prototype,"supportingText",2);a=i([g("scb-checkbox")],a);export{a as ScbCheckbox};
|
|
@@ -1,22 +1,23 @@
|
|
|
1
|
-
import{b as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
:host{ --scb-card-
|
|
1
|
+
import{b as d,n as r,i as u,x as a,t as h}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-icon-button/scb-icon-button.js";import"./scb-fact-card-content.js";import"../../vendor/preload-helper.js";var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,i=(t,e,c,n)=>{for(var s=n>1?void 0:n?f(e,c):e,l=t.length-1,p;l>=0;l--)(p=t[l])&&(s=(n?p(e,c,s):p(s))||s);return n&&s&&b(e,c,s),s};let o=class extends u{constructor(){super(...arguments),this.__onCloseClick=t=>{t.stopPropagation(),this.__setOpen(!1)},this.variant="filled",this.label="",this.subLabel="",this.supportingText="",this.icon="",this.showCloseButton=!1,this.open=!0,this.__lastTriggerEl=null,this.__onDocumentClick=t=>{this.__getActionFromEvent(t)==="toggle"&&(this.__setOpen(!this.open),t.stopPropagation())}}__getActionFromEvent(t){if(!this.id)return null;for(const e of t.composedPath())if(e instanceof Element){if(e.getAttribute("data-fact-card-toggle")===this.id)return this.__lastTriggerEl=e,"toggle";if(e.getAttribute("aria-controls")===this.id)return this.__lastTriggerEl=e,"toggle"}return null}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.__onDocumentClick,!1)}disconnectedCallback(){document.removeEventListener("click",this.__onDocumentClick,!1),super.disconnectedCallback()}updated(t){t.has("open")&&this.__updateTriggersExpanded()}__updateTriggersExpanded(){this.id&&document.querySelectorAll(`[aria-controls="${this.id}"], [data-fact-card-toggle="${this.id}"]`).forEach(t=>{t.hasAttribute("aria-controls")&&t.setAttribute("aria-expanded",String(this.open))})}__setOpen(t){const e=this.open;this.open=t,t&&!e?this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})):!t&&e&&this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}render(){if(!this.open)return a``;const t=this.variant==="outlined"?"outlined":"filled";return a`
|
|
2
|
+
${this.icon?a`<div class="icon-wrapper ${t}"><md-icon>${this.icon}</md-icon></div>`:""}
|
|
3
|
+
<div class="scb-fact-card ${t} ${this.icon?"no-topleft-radius":""} ${this.showCloseButton?"has-close":""}">
|
|
4
|
+
${this.showCloseButton?a`<scb-icon-button variant="standard" icon="close" @click=${this.__onCloseClick}></scb-icon-button>`:""}
|
|
5
|
+
<div class="content">
|
|
6
|
+
<slot></slot>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
`}};o.styles=d`
|
|
10
|
+
:host{ --scb-fact-card-max-w: 580px; }
|
|
11
11
|
:host {
|
|
12
|
-
max-width: var(--scb-card-
|
|
13
|
-
width:
|
|
12
|
+
max-width: var(--scb-fact-card-max-w);
|
|
13
|
+
width: fit-content;
|
|
14
14
|
display: block;
|
|
15
15
|
position: relative;
|
|
16
16
|
}
|
|
17
17
|
.scb-fact-card {
|
|
18
18
|
color: var(--md-sys-color-on-surface);
|
|
19
|
-
max-width: var(--scb-card-
|
|
19
|
+
max-width: var(--scb-fact-card-max-w);
|
|
20
|
+
width: fit-content;
|
|
20
21
|
position: relative;
|
|
21
22
|
border-radius: var(--md-sys-shape-corner-large);
|
|
22
23
|
background: var(--md-sys-color-surface-dim);
|
|
@@ -63,4 +64,4 @@ import{b as l,n as s,i as u,x as d,t as b}from"../../vendor/vendor.js";import"..
|
|
|
63
64
|
gap: var(--spacing-8);
|
|
64
65
|
width: 100%;
|
|
65
66
|
}
|
|
66
|
-
`;
|
|
67
|
+
`;i([r({type:String})],o.prototype,"variant",2);i([r({type:String})],o.prototype,"label",2);i([r({type:String,attribute:"sub-label"})],o.prototype,"subLabel",2);i([r({type:String,attribute:"supporting-text"})],o.prototype,"supportingText",2);i([r({type:String})],o.prototype,"icon",2);i([r({type:Boolean,attribute:"show-close-button"})],o.prototype,"showCloseButton",2);i([r({type:Boolean,reflect:!0})],o.prototype,"open",2);o=i([h("scb-fact-card")],o);
|