scb-wc-test 0.1.3 → 0.1.5
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 +1 -19
- package/index.d.ts +0 -1
- package/mvc/components/scb-progress-indicator/scb-progress-indicator.js +16 -23
- package/package.json +6 -2
- package/scb-accordion/scb-accordion-item.d.ts +0 -1
- package/scb-accordion/scb-accordion.d.ts +0 -1
- package/scb-app-bar/scb-app-bar.d.ts +0 -1
- package/scb-avatar/scb-avatar.d.ts +0 -1
- package/scb-breadcrumb/scb-breadcrumb-item.d.ts +0 -1
- package/scb-breadcrumb/scb-breadcrumb.d.ts +0 -1
- package/scb-button/scb-button.d.ts +0 -1
- package/scb-calendar-card/scb-calendar-card.d.ts +0 -1
- package/scb-card/scb-card.d.ts +0 -1
- package/scb-checkbox/scb-checkbox-group.d.ts +0 -1
- package/scb-checkbox/scb-checkbox.d.ts +0 -1
- package/scb-chips/scb-chip.d.ts +0 -1
- package/scb-dialog/scb-dialog.d.ts +0 -1
- package/scb-divider/scb-divider.d.ts +0 -1
- package/scb-drawer/scb-drawer-item.d.ts +0 -1
- package/scb-drawer/scb-drawer-section.d.ts +0 -1
- package/scb-drawer/scb-drawer.d.ts +0 -1
- package/scb-drawer/scb-sub-drawer.d.ts +0 -1
- package/scb-fact-card/scb-fact-card-content.d.ts +0 -1
- package/scb-fact-card/scb-fact-card.d.ts +0 -1
- package/scb-footer/scb-footer-section.d.ts +0 -1
- package/scb-footer/scb-footer.d.ts +0 -1
- package/scb-grid/scb-grid-item.d.ts +0 -1
- package/scb-grid/scb-grid.d.ts +0 -1
- package/scb-grid/scb-stack.d.ts +0 -1
- package/scb-header/scb-header-drawer-group.d.ts +0 -1
- package/scb-header/scb-header-drawer-item.d.ts +0 -1
- package/scb-header/scb-header-tab.d.ts +0 -1
- package/scb-header/scb-header-utility.d.ts +0 -1
- package/scb-header/scb-header.d.ts +0 -1
- package/scb-icon-button/scb-icon-button.d.ts +0 -1
- package/scb-keyfigure-card/scb-keyfigure-card.d.ts +0 -1
- package/scb-link/scb-link.d.ts +0 -1
- package/scb-list/scb-list-item.d.ts +0 -1
- package/scb-list/scb-list.d.ts +0 -1
- package/scb-menu/scb-menu-item.d.ts +0 -1
- package/scb-menu/scb-menu.d.ts +0 -1
- package/scb-menu/scb-sub-menu.d.ts +0 -1
- package/scb-notification/scb-notification.d.ts +0 -1
- package/scb-progress-indicator/scb-progress-indicator.d.ts +1 -3
- package/scb-progress-indicator/scb-progress-indicator.js +37 -47
- package/scb-radio-button/scb-radio-button.d.ts +0 -1
- package/scb-radio-button/scb-radio-group.d.ts +0 -1
- package/scb-search/scb-search.d.ts +0 -1
- package/scb-snackbar/scb-snackbar.d.ts +0 -1
- package/scb-status-pill/scb-status-pill.d.ts +0 -1
- package/scb-switch/scb-switch.d.ts +0 -1
- package/scb-tabs/scb-primary-tab.d.ts +0 -1
- package/scb-tabs/scb-secondary-tab.d.ts +0 -1
- package/scb-tabs/scb-tabs.d.ts +0 -1
- package/scb-textfield/scb-textfield.d.ts +0 -1
- package/scb-toc/scb-toc-item.d.ts +0 -1
- package/scb-toc/scb-toc.d.ts +0 -1
- package/scb-tooltip/scb-tooltip.d.ts +0 -1
- package/scb-wc-test.bundle.js +83 -90
- /package/{scb-wc-test.d.ts → dist-types/scb-test-components/scb-wc-test.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -45,7 +45,7 @@ Lägg till i din apps `package.json`:
|
|
|
45
45
|
```jsonc
|
|
46
46
|
{
|
|
47
47
|
"scripts": {
|
|
48
|
-
"ui:install": "node -e \"const fs=require('fs'),p=require('path');const
|
|
48
|
+
"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);\""
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
```
|
|
@@ -57,24 +57,6 @@ npm run ui:install
|
|
|
57
57
|
|
|
58
58
|
Det kopierar hela `mvc/` till `wwwroot/ui/` (komponenter, vendor och CSS).
|
|
59
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
60
|
### Ladda filer i din layout
|
|
79
61
|
|
|
80
62
|
```html
|
package/index.d.ts
CHANGED
|
@@ -1,30 +1,26 @@
|
|
|
1
|
-
import{b as
|
|
1
|
+
import{b as p,n as o,i as h,x as s,t as g}from"../../vendor/vendor.js";var f=Object.defineProperty,y=Object.getOwnPropertyDescriptor,e=(d,t,c,a)=>{for(var r=a>1?void 0:a?y(t,c):t,l=d.length-1,n;l>=0;l--)(n=d[l])&&(r=(a?n(t,c,r):n(r))||r);return a&&r&&f(t,c,r),r};let i=class extends h{constructor(){super(...arguments),this.id="",this.type="circular",this.progress=25,this.isStatic=!0}render(){return s`
|
|
2
2
|
<div class="scb-progress-indicator">
|
|
3
|
-
${this.type==="circular"?
|
|
3
|
+
${this.type==="circular"?s`
|
|
4
4
|
<div class="circular">
|
|
5
5
|
<svg class="circular-spin" viewBox="0 0 40 40">
|
|
6
6
|
<circle class="circular-bg" cx="20" cy="20" r="16" fill="none" stroke-width="4" />
|
|
7
7
|
<circle
|
|
8
8
|
class="circular-fg"
|
|
9
9
|
cx="20" cy="20" r="16" fill="none" stroke-width="4"
|
|
10
|
-
stroke="
|
|
10
|
+
stroke="var(--md-sys-color-primary)"
|
|
11
11
|
stroke-dasharray="${2*Math.PI*16}"
|
|
12
12
|
stroke-dashoffset="${(1-this.progress/100)*2*Math.PI*16}"
|
|
13
13
|
/>
|
|
14
14
|
</svg>
|
|
15
15
|
</div>
|
|
16
|
-
`:
|
|
17
|
-
|
|
18
|
-
${this.isStatic?
|
|
16
|
+
`:s`
|
|
17
|
+
<div class="linear" style="--progress-fill: var(--md-sys-color-primary);">
|
|
18
|
+
${this.isStatic?s`<div class="linear-static" style="width: ${this.progress}%;"></div>`:s`<div class="linear-loader"></div>`}
|
|
19
19
|
</div>
|
|
20
20
|
`}
|
|
21
21
|
</div>
|
|
22
|
-
`}};
|
|
23
|
-
|
|
24
|
-
display: block;
|
|
25
|
-
font-family: var(--brand-font, sans-serif);
|
|
26
|
-
color: var(--md-sys-color-on-surface, #222);
|
|
27
|
-
}
|
|
22
|
+
`}};i.styles=[p`
|
|
23
|
+
|
|
28
24
|
.circular {
|
|
29
25
|
display: flex;
|
|
30
26
|
align-items: center;
|
|
@@ -36,7 +32,7 @@ import{b as d,n as s,i as f,x as i,t as h}from"../../vendor/vendor.js";var g=Obj
|
|
|
36
32
|
.circular-spin {
|
|
37
33
|
animation: spin 1s linear infinite;
|
|
38
34
|
width: 46px;
|
|
39
|
-
height: 46px;
|
|
35
|
+
height: 46px ;
|
|
40
36
|
position: relative;
|
|
41
37
|
z-index: 1;
|
|
42
38
|
}
|
|
@@ -45,13 +41,7 @@ import{b as d,n as s,i as f,x as i,t as h}from"../../vendor/vendor.js";var g=Obj
|
|
|
45
41
|
100% { transform: rotate(360deg); }
|
|
46
42
|
}
|
|
47
43
|
.circular-bg {
|
|
48
|
-
stroke:
|
|
49
|
-
}
|
|
50
|
-
.circular-fg {
|
|
51
|
-
transition: stroke-dashoffset 0.3s ease;
|
|
52
|
-
}
|
|
53
|
-
.circular-bg {
|
|
54
|
-
stroke: #eee;
|
|
44
|
+
stroke: var(--md-sys-color-secondary-container);
|
|
55
45
|
}
|
|
56
46
|
.circular-fg {
|
|
57
47
|
transition: stroke-dashoffset 0.3s ease;
|
|
@@ -59,15 +49,17 @@ import{b as d,n as s,i as f,x as i,t as h}from"../../vendor/vendor.js";var g=Obj
|
|
|
59
49
|
.linear {
|
|
60
50
|
width: 100%;
|
|
61
51
|
height: 6px;
|
|
62
|
-
background:
|
|
52
|
+
background: var(--md-sys-color-secondary-container);
|
|
63
53
|
border-radius: 3px;
|
|
64
54
|
overflow: hidden;
|
|
65
55
|
position: relative;
|
|
66
56
|
}
|
|
57
|
+
:host {
|
|
58
|
+
--progress-fill: var(--md-sys-color-primary); }
|
|
67
59
|
.linear-loader {
|
|
68
60
|
height: 100%;
|
|
69
61
|
width: 40%;
|
|
70
|
-
background: var(--
|
|
62
|
+
background: var(--progress-fill);
|
|
71
63
|
border-radius: 3px;
|
|
72
64
|
animation: linear-progress 1.2s cubic-bezier(.4,0,.2,1) infinite;
|
|
73
65
|
}
|
|
@@ -75,10 +67,11 @@ import{b as d,n as s,i as f,x as i,t as h}from"../../vendor/vendor.js";var g=Obj
|
|
|
75
67
|
height: 100%;
|
|
76
68
|
border-radius: 3px;
|
|
77
69
|
transition: width 0.3s ease;
|
|
70
|
+
background: var(--progress-fill);
|
|
78
71
|
}
|
|
79
72
|
@keyframes linear-progress {
|
|
80
73
|
0% { margin-left: -40%; width: 40%; }
|
|
81
74
|
50% { margin-left: 30%; width: 60%; }
|
|
82
75
|
100% { margin-left: 100%; width: 40%; }
|
|
83
76
|
}
|
|
84
|
-
`];
|
|
77
|
+
`];e([o({type:String})],i.prototype,"id",2);e([o({type:String,reflect:!0})],i.prototype,"type",2);e([o({type:Number,reflect:!0})],i.prototype,"progress",2);e([o({type:Boolean,attribute:"is-static"})],i.prototype,"isStatic",2);i=e([g("scb-progress-indicator")],i);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -31,6 +31,10 @@
|
|
|
31
31
|
"import": "./scb-wc-test.bundle.js",
|
|
32
32
|
"require": "./scb-wc-test.bundle.js"
|
|
33
33
|
},
|
|
34
|
+
"./dist-types": {
|
|
35
|
+
"import": "./dist-types/dist-types.js",
|
|
36
|
+
"require": "./dist-types/dist-types.js"
|
|
37
|
+
},
|
|
34
38
|
"./mvc": {
|
|
35
39
|
"import": "./mvc/mvc.js",
|
|
36
40
|
"require": "./mvc/mvc.js"
|
|
@@ -253,5 +257,5 @@
|
|
|
253
257
|
},
|
|
254
258
|
"./mvc/*": "./mvc/*"
|
|
255
259
|
},
|
|
256
|
-
"buildHash": "
|
|
260
|
+
"buildHash": "21342A82787EBBBEFB597B58A6C247571F3EC3A7CBDD465245E58ACBFD92C567"
|
|
257
261
|
}
|
package/scb-card/scb-card.d.ts
CHANGED
package/scb-chips/scb-chip.d.ts
CHANGED
package/scb-grid/scb-grid.d.ts
CHANGED
package/scb-grid/scb-stack.d.ts
CHANGED
package/scb-link/scb-link.d.ts
CHANGED
package/scb-list/scb-list.d.ts
CHANGED
package/scb-menu/scb-menu.d.ts
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { LitElement, TemplateResult } from 'lit';
|
|
2
|
-
|
|
3
2
|
export declare class ScbProgressIndicator extends LitElement {
|
|
4
|
-
|
|
3
|
+
id: string;
|
|
5
4
|
type: 'circular' | 'linear';
|
|
6
|
-
color: string;
|
|
7
5
|
progress: number;
|
|
8
6
|
isStatic: boolean;
|
|
9
7
|
static styles: import('lit').CSSResult[];
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { css as d, LitElement as
|
|
2
|
-
import { property as
|
|
3
|
-
var
|
|
4
|
-
for (var
|
|
5
|
-
(n = p[l]) && (
|
|
6
|
-
return a &&
|
|
1
|
+
import { css as d, LitElement as h, html as i } from "lit";
|
|
2
|
+
import { property as o, customElement as g } from "lit/decorators.js";
|
|
3
|
+
var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (p, t, c, a) => {
|
|
4
|
+
for (var r = a > 1 ? void 0 : a ? y(t, c) : t, l = p.length - 1, n; l >= 0; l--)
|
|
5
|
+
(n = p[l]) && (r = (a ? n(t, c, r) : n(r)) || r);
|
|
6
|
+
return a && r && f(t, c, r), r;
|
|
7
7
|
};
|
|
8
|
-
let
|
|
8
|
+
let e = class extends h {
|
|
9
9
|
constructor() {
|
|
10
|
-
super(...arguments), this.
|
|
10
|
+
super(...arguments), this.id = "", this.type = "circular", this.progress = 25, this.isStatic = !0;
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return
|
|
13
|
+
return i`
|
|
14
14
|
<div class="scb-progress-indicator">
|
|
15
15
|
${this.type === "circular" ? i`
|
|
16
16
|
<div class="circular">
|
|
@@ -19,28 +19,24 @@ let r = class extends f {
|
|
|
19
19
|
<circle
|
|
20
20
|
class="circular-fg"
|
|
21
21
|
cx="20" cy="20" r="16" fill="none" stroke-width="4"
|
|
22
|
-
stroke="
|
|
22
|
+
stroke="var(--md-sys-color-primary)"
|
|
23
23
|
stroke-dasharray="${2 * Math.PI * 16}"
|
|
24
24
|
stroke-dashoffset="${(1 - this.progress / 100) * 2 * Math.PI * 16}"
|
|
25
25
|
/>
|
|
26
26
|
</svg>
|
|
27
27
|
</div>
|
|
28
28
|
` : i`
|
|
29
|
-
|
|
30
|
-
${this.isStatic ? i`<div class="linear-static" style="width: ${this.progress}%;
|
|
29
|
+
<div class="linear" style="--progress-fill: var(--md-sys-color-primary);">
|
|
30
|
+
${this.isStatic ? i`<div class="linear-static" style="width: ${this.progress}%;"></div>` : i`<div class="linear-loader"></div>`}
|
|
31
31
|
</div>
|
|
32
32
|
`}
|
|
33
33
|
</div>
|
|
34
34
|
`;
|
|
35
35
|
}
|
|
36
36
|
};
|
|
37
|
-
|
|
37
|
+
e.styles = [
|
|
38
38
|
d`
|
|
39
|
-
|
|
40
|
-
display: block;
|
|
41
|
-
font-family: var(--brand-font, sans-serif);
|
|
42
|
-
color: var(--md-sys-color-on-surface, #222);
|
|
43
|
-
}
|
|
39
|
+
|
|
44
40
|
.circular {
|
|
45
41
|
display: flex;
|
|
46
42
|
align-items: center;
|
|
@@ -52,7 +48,7 @@ r.styles = [
|
|
|
52
48
|
.circular-spin {
|
|
53
49
|
animation: spin 1s linear infinite;
|
|
54
50
|
width: 46px;
|
|
55
|
-
height: 46px;
|
|
51
|
+
height: 46px ;
|
|
56
52
|
position: relative;
|
|
57
53
|
z-index: 1;
|
|
58
54
|
}
|
|
@@ -61,13 +57,7 @@ r.styles = [
|
|
|
61
57
|
100% { transform: rotate(360deg); }
|
|
62
58
|
}
|
|
63
59
|
.circular-bg {
|
|
64
|
-
stroke:
|
|
65
|
-
}
|
|
66
|
-
.circular-fg {
|
|
67
|
-
transition: stroke-dashoffset 0.3s ease;
|
|
68
|
-
}
|
|
69
|
-
.circular-bg {
|
|
70
|
-
stroke: #eee;
|
|
60
|
+
stroke: var(--md-sys-color-secondary-container);
|
|
71
61
|
}
|
|
72
62
|
.circular-fg {
|
|
73
63
|
transition: stroke-dashoffset 0.3s ease;
|
|
@@ -75,15 +65,17 @@ r.styles = [
|
|
|
75
65
|
.linear {
|
|
76
66
|
width: 100%;
|
|
77
67
|
height: 6px;
|
|
78
|
-
background:
|
|
68
|
+
background: var(--md-sys-color-secondary-container);
|
|
79
69
|
border-radius: 3px;
|
|
80
70
|
overflow: hidden;
|
|
81
71
|
position: relative;
|
|
82
72
|
}
|
|
73
|
+
:host {
|
|
74
|
+
--progress-fill: var(--md-sys-color-primary); }
|
|
83
75
|
.linear-loader {
|
|
84
76
|
height: 100%;
|
|
85
77
|
width: 40%;
|
|
86
|
-
background: var(--
|
|
78
|
+
background: var(--progress-fill);
|
|
87
79
|
border-radius: 3px;
|
|
88
80
|
animation: linear-progress 1.2s cubic-bezier(.4,0,.2,1) infinite;
|
|
89
81
|
}
|
|
@@ -91,6 +83,7 @@ r.styles = [
|
|
|
91
83
|
height: 100%;
|
|
92
84
|
border-radius: 3px;
|
|
93
85
|
transition: width 0.3s ease;
|
|
86
|
+
background: var(--progress-fill);
|
|
94
87
|
}
|
|
95
88
|
@keyframes linear-progress {
|
|
96
89
|
0% { margin-left: -40%; width: 40%; }
|
|
@@ -99,24 +92,21 @@ r.styles = [
|
|
|
99
92
|
}
|
|
100
93
|
`
|
|
101
94
|
];
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
],
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
],
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
],
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
],
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
],
|
|
117
|
-
r = t([
|
|
118
|
-
h("scb-progress-indicator")
|
|
119
|
-
], r);
|
|
95
|
+
s([
|
|
96
|
+
o({ type: String })
|
|
97
|
+
], e.prototype, "id", 2);
|
|
98
|
+
s([
|
|
99
|
+
o({ type: String, reflect: !0 })
|
|
100
|
+
], e.prototype, "type", 2);
|
|
101
|
+
s([
|
|
102
|
+
o({ type: Number, reflect: !0 })
|
|
103
|
+
], e.prototype, "progress", 2);
|
|
104
|
+
s([
|
|
105
|
+
o({ type: Boolean, attribute: "is-static" })
|
|
106
|
+
], e.prototype, "isStatic", 2);
|
|
107
|
+
e = s([
|
|
108
|
+
g("scb-progress-indicator")
|
|
109
|
+
], e);
|
|
120
110
|
export {
|
|
121
|
-
|
|
111
|
+
e as ScbProgressIndicator
|
|
122
112
|
};
|