scb-wc-test 0.1.68 → 0.1.70
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/all.js +2 -0
- package/index.d.ts +1 -0
- package/index.js +108 -106
- package/mvc/components/all.js +1 -0
- package/mvc/components/scb-badge/scb-badge.js +43 -0
- package/mvc/components/scb-grid/scb-stack.js +15 -7
- package/package.json +6 -2
- package/scb-badge/scb-badge.d.ts +14 -0
- package/scb-badge/scb-badge.js +81 -0
- package/scb-grid/scb-stack.js +20 -12
- package/scb-wc-test.bundle.js +351 -301
package/all.js
CHANGED
|
@@ -5,6 +5,7 @@ import './mvc/components/scb-accordion/scb-accordion-item.js';
|
|
|
5
5
|
import './mvc/components/scb-accordion/scb-accordion.js';
|
|
6
6
|
import './mvc/components/scb-app-bar/scb-app-bar.js';
|
|
7
7
|
import './mvc/components/scb-avatar/scb-avatar.js';
|
|
8
|
+
import './mvc/components/scb-badge/scb-badge.js';
|
|
8
9
|
import './mvc/components/scb-breadcrumb/scb-breadcrumb-item.js';
|
|
9
10
|
import './mvc/components/scb-breadcrumb/scb-breadcrumb.js';
|
|
10
11
|
import './mvc/components/scb-button/scb-button.js';
|
|
@@ -66,6 +67,7 @@ import './scb-accordion/scb-accordion-item.js';
|
|
|
66
67
|
import './scb-accordion/scb-accordion.js';
|
|
67
68
|
import './scb-app-bar/scb-app-bar.js';
|
|
68
69
|
import './scb-avatar/scb-avatar.js';
|
|
70
|
+
import './scb-badge/scb-badge.js';
|
|
69
71
|
import './scb-breadcrumb/scb-breadcrumb-item.js';
|
|
70
72
|
import './scb-breadcrumb/scb-breadcrumb.js';
|
|
71
73
|
import './scb-button/scb-button.js';
|
package/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export * from './scb-accordion/scb-accordion-item';
|
|
|
2
2
|
export * from './scb-accordion/scb-accordion';
|
|
3
3
|
export * from './scb-app-bar/scb-app-bar';
|
|
4
4
|
export * from './scb-avatar/scb-avatar';
|
|
5
|
+
export * from './scb-badge/scb-badge';
|
|
5
6
|
export * from './scb-breadcrumb/scb-breadcrumb-item';
|
|
6
7
|
export * from './scb-breadcrumb/scb-breadcrumb';
|
|
7
8
|
export * from './scb-button/scb-button';
|
package/index.js
CHANGED
|
@@ -2,115 +2,117 @@ import { ScbAccordionItem as e } from "./scb-accordion/scb-accordion-item.js";
|
|
|
2
2
|
import { ScbAccordion as c } from "./scb-accordion/scb-accordion.js";
|
|
3
3
|
import { ScbAppBar as S } from "./scb-app-bar/scb-app-bar.js";
|
|
4
4
|
import { ScbAvatar as p } from "./scb-avatar/scb-avatar.js";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import {
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
33
|
-
import {
|
|
34
|
-
import {
|
|
35
|
-
import {
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import {
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
41
|
-
import {
|
|
42
|
-
import {
|
|
43
|
-
import {
|
|
44
|
-
import {
|
|
45
|
-
import {
|
|
46
|
-
import {
|
|
47
|
-
import {
|
|
48
|
-
import {
|
|
49
|
-
import {
|
|
50
|
-
import {
|
|
51
|
-
import {
|
|
52
|
-
import {
|
|
53
|
-
import {
|
|
54
|
-
import {
|
|
55
|
-
import {
|
|
56
|
-
import {
|
|
57
|
-
import {
|
|
5
|
+
import { ScbBadge as f } from "./scb-badge/scb-badge.js";
|
|
6
|
+
import { SCBBreadcrumbItem as i } from "./scb-breadcrumb/scb-breadcrumb-item.js";
|
|
7
|
+
import { SCBBreadcrumb as n } from "./scb-breadcrumb/scb-breadcrumb.js";
|
|
8
|
+
import { ScbButton as C } from "./scb-button/scb-button.js";
|
|
9
|
+
import { ScbCalendarCard as l } from "./scb-calendar-card/scb-calendar-card.js";
|
|
10
|
+
import { ScbCard as D } from "./scb-card/scb-card.js";
|
|
11
|
+
import { ScbCheckboxGroup as w } from "./scb-checkbox/scb-checkbox-group.js";
|
|
12
|
+
import { ScbCheckbox as s } from "./scb-checkbox/scb-checkbox.js";
|
|
13
|
+
import { ScbChip as H } from "./scb-chip/scb-chip.js";
|
|
14
|
+
import { ScbDialog as k } from "./scb-dialog/scb-dialog.js";
|
|
15
|
+
import { ScbDivider as y } from "./scb-divider/scb-divider.js";
|
|
16
|
+
import { ScbDrawerItem as L } from "./scb-drawer/scb-drawer-item.js";
|
|
17
|
+
import { ScbDrawerSection as P } from "./scb-drawer/scb-drawer-section.js";
|
|
18
|
+
import { ScbDrawer as N } from "./scb-drawer/scb-drawer.js";
|
|
19
|
+
import { ScbSubDrawer as z } from "./scb-drawer/scb-sub-drawer.js";
|
|
20
|
+
import { ScbFactCardContent as U } from "./scb-fact-card/scb-fact-card-content.js";
|
|
21
|
+
import { ScbFactCard as q } from "./scb-fact-card/scb-fact-card.js";
|
|
22
|
+
import { ScbFooterSection as J } from "./scb-footer/scb-footer-section.js";
|
|
23
|
+
import { ScbFooter as Q } from "./scb-footer/scb-footer.js";
|
|
24
|
+
import { ScbGridItem as W } from "./scb-grid/scb-grid-item.js";
|
|
25
|
+
import { ScbGrid as Y } from "./scb-grid/scb-grid.js";
|
|
26
|
+
import { ScbStack as _ } from "./scb-grid/scb-stack.js";
|
|
27
|
+
import { ScbHeaderDrawerGroup as rr } from "./scb-header/scb-header-drawer-group.js";
|
|
28
|
+
import { ScbHeaderDrawerItem as er } from "./scb-header/scb-header-drawer-item.js";
|
|
29
|
+
import { ScbHeaderTab as cr } from "./scb-header/scb-header-tab.js";
|
|
30
|
+
import { ScbHeaderUtility as Sr } from "./scb-header/scb-header-utility.js";
|
|
31
|
+
import { ScbHeader as pr } from "./scb-header/scb-header.js";
|
|
32
|
+
import { ScbHorizontalScroller as fr } from "./scb-horizontal-scroller/scb-horizontal-scroller.js";
|
|
33
|
+
import { ScbIconButton as ir } from "./scb-icon-button/scb-icon-button.js";
|
|
34
|
+
import { ScbKeyFigureCard as nr } from "./scb-keyfigure-card/scb-keyfigure-card.js";
|
|
35
|
+
import { ScbLink as Cr } from "./scb-link/scb-link.js";
|
|
36
|
+
import { ScbListItem as lr } from "./scb-list/scb-list-item.js";
|
|
37
|
+
import { ScbList as Dr } from "./scb-list/scb-list.js";
|
|
38
|
+
import { ScbMenuItem as wr } from "./scb-menu/scb-menu-item.js";
|
|
39
|
+
import { ScbMenu as sr } from "./scb-menu/scb-menu.js";
|
|
40
|
+
import { ScbSubMenu as Hr } from "./scb-menu/scb-sub-menu.js";
|
|
41
|
+
import { ScbNotification as kr } from "./scb-notification/scb-notification.js";
|
|
42
|
+
import { ScbNotificationCard as yr } from "./scb-notification-card/scb-notification-card.js";
|
|
43
|
+
import { ScbProgressIndicator as Lr } from "./scb-progress-indicator/scb-progress-indicator.js";
|
|
44
|
+
import { ScbRadioButton as Pr } from "./scb-radio-button/scb-radio-button.js";
|
|
45
|
+
import { ScbRadioGroup as Nr } from "./scb-radio-button/scb-radio-group.js";
|
|
46
|
+
import { ScbSearch as zr } from "./scb-search/scb-search.js";
|
|
47
|
+
import { ScbSegmentedButton as Ur } from "./scb-segmented-button/scb-segmented-button.js";
|
|
48
|
+
import { ScbSegmentedItem as qr } from "./scb-segmented-button/scb-segmented-item.js";
|
|
49
|
+
import { ScbSnackbar as Jr } from "./scb-snackbar/scb-snackbar.js";
|
|
50
|
+
import { ScbStatusPill as Qr } from "./scb-status-pill/scb-status-pill.js";
|
|
51
|
+
import { ScbSwitch as Wr } from "./scb-switch/scb-switch.js";
|
|
52
|
+
import { ScbPrimaryTab as Yr } from "./scb-tabs/scb-primary-tab.js";
|
|
53
|
+
import { ScbSecondaryTab as _r } from "./scb-tabs/scb-secondary-tab.js";
|
|
54
|
+
import { ScbTabs as ro } from "./scb-tabs/scb-tabs.js";
|
|
55
|
+
import { ScbTextField2 as eo } from "./scb-textfield/scb-textfield.js";
|
|
56
|
+
import { ScbTocItem as co } from "./scb-toc/scb-toc-item.js";
|
|
57
|
+
import { ScbToc as So } from "./scb-toc/scb-toc.js";
|
|
58
|
+
import { ScbTooltip as po } from "./scb-tooltip/scb-tooltip.js";
|
|
58
59
|
export {
|
|
59
|
-
|
|
60
|
-
|
|
60
|
+
n as SCBBreadcrumb,
|
|
61
|
+
i as SCBBreadcrumbItem,
|
|
61
62
|
c as ScbAccordion,
|
|
62
63
|
e as ScbAccordionItem,
|
|
63
64
|
S as ScbAppBar,
|
|
64
65
|
p as ScbAvatar,
|
|
65
|
-
|
|
66
|
-
C as
|
|
67
|
-
l as
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
k as
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
L as
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
rr as
|
|
85
|
-
er as
|
|
86
|
-
cr as
|
|
87
|
-
|
|
88
|
-
fr as
|
|
89
|
-
ir as
|
|
90
|
-
nr as
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
kr as
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
Lr as
|
|
100
|
-
Pr as
|
|
101
|
-
Nr as
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
Ur as
|
|
105
|
-
qr as
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
ro as
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
66
|
+
f as ScbBadge,
|
|
67
|
+
C as ScbButton,
|
|
68
|
+
l as ScbCalendarCard,
|
|
69
|
+
D as ScbCard,
|
|
70
|
+
s as ScbCheckbox,
|
|
71
|
+
w as ScbCheckboxGroup,
|
|
72
|
+
H as ScbChip,
|
|
73
|
+
k as ScbDialog,
|
|
74
|
+
y as ScbDivider,
|
|
75
|
+
N as ScbDrawer,
|
|
76
|
+
L as ScbDrawerItem,
|
|
77
|
+
P as ScbDrawerSection,
|
|
78
|
+
q as ScbFactCard,
|
|
79
|
+
U as ScbFactCardContent,
|
|
80
|
+
Q as ScbFooter,
|
|
81
|
+
J as ScbFooterSection,
|
|
82
|
+
Y as ScbGrid,
|
|
83
|
+
W as ScbGridItem,
|
|
84
|
+
pr as ScbHeader,
|
|
85
|
+
rr as ScbHeaderDrawerGroup,
|
|
86
|
+
er as ScbHeaderDrawerItem,
|
|
87
|
+
cr as ScbHeaderTab,
|
|
88
|
+
Sr as ScbHeaderUtility,
|
|
89
|
+
fr as ScbHorizontalScroller,
|
|
90
|
+
ir as ScbIconButton,
|
|
91
|
+
nr as ScbKeyFigureCard,
|
|
92
|
+
Cr as ScbLink,
|
|
93
|
+
Dr as ScbList,
|
|
94
|
+
lr as ScbListItem,
|
|
95
|
+
sr as ScbMenu,
|
|
96
|
+
wr as ScbMenuItem,
|
|
97
|
+
kr as ScbNotification,
|
|
98
|
+
yr as ScbNotificationCard,
|
|
99
|
+
Yr as ScbPrimaryTab,
|
|
100
|
+
Lr as ScbProgressIndicator,
|
|
101
|
+
Pr as ScbRadioButton,
|
|
102
|
+
Nr as ScbRadioGroup,
|
|
103
|
+
zr as ScbSearch,
|
|
104
|
+
_r as ScbSecondaryTab,
|
|
105
|
+
Ur as ScbSegmentedButton,
|
|
106
|
+
qr as ScbSegmentedItem,
|
|
107
|
+
Jr as ScbSnackbar,
|
|
108
|
+
_ as ScbStack,
|
|
109
|
+
Qr as ScbStatusPill,
|
|
110
|
+
z as ScbSubDrawer,
|
|
111
|
+
Hr as ScbSubMenu,
|
|
112
|
+
Wr as ScbSwitch,
|
|
113
|
+
ro as ScbTabs,
|
|
114
|
+
eo as ScbTextField2,
|
|
115
|
+
So as ScbToc,
|
|
116
|
+
co as ScbTocItem,
|
|
117
|
+
po as ScbTooltip
|
|
116
118
|
};
|
package/mvc/components/all.js
CHANGED
|
@@ -2,6 +2,7 @@ import './scb-accordion/scb-accordion.js';
|
|
|
2
2
|
import './scb-accordion/scb-accordion-item.js';
|
|
3
3
|
import './scb-app-bar/scb-app-bar.js';
|
|
4
4
|
import './scb-avatar/scb-avatar.js';
|
|
5
|
+
import './scb-badge/scb-badge.js';
|
|
5
6
|
import './scb-breadcrumb/scb-breadcrumb.js';
|
|
6
7
|
import './scb-breadcrumb/scb-breadcrumb-item.js';
|
|
7
8
|
import './scb-button/scb-button.js';
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import{a as c,n,i as p,x as u,t as b}from"../../vendor/vendor.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var a=customElements.define.bind(customElements);customElements.define=function(i,r,t){try{customElements.get(i)||a(i,r,t)}catch(o){var l=String(o||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var v=Object.defineProperty,h=Object.getOwnPropertyDescriptor,d=(e,a,i,r)=>{for(var t=r>1?void 0:r?h(a,i):a,l=e.length-1,o;l>=0;l--)(o=e[l])&&(t=(r?o(a,i,t):o(t))||t);return r&&t&&v(a,i,t),t};let s=class extends p{constructor(){super(...arguments),this.value="",this.label="",this.disabled=!1,this.variant="dot"}updated(){}render(){let e=this.value;!isNaN(Number(this.value))&&this.value.length>4&&(e=this.value.slice(0,4)+"+");const a=this.variant==="value"&&!this.value?"badge-value-empty":"";return this.variant==="dot"&&(e=""),u`
|
|
2
|
+
<div class="badge-content"
|
|
3
|
+
.value=${this.value}
|
|
4
|
+
.label=${this.label}
|
|
5
|
+
?disabled=${this.disabled}
|
|
6
|
+
>
|
|
7
|
+
<div class="badge ${a}">${e}</div>
|
|
8
|
+
<slot></slot>
|
|
9
|
+
</div>
|
|
10
|
+
`}};s.styles=c`
|
|
11
|
+
:host {
|
|
12
|
+
--scb-badge-top: 0;
|
|
13
|
+
--scb-badge-right: 12px;
|
|
14
|
+
display: block;
|
|
15
|
+
position: relative;
|
|
16
|
+
width: fit-content;
|
|
17
|
+
}
|
|
18
|
+
:host([variant="value"]) .badge {
|
|
19
|
+
width: fit-content;
|
|
20
|
+
padding: 6px;
|
|
21
|
+
}
|
|
22
|
+
:host([variant="value"]) .badge.badge-value-empty{
|
|
23
|
+
width: 8px;
|
|
24
|
+
padding: 4px;
|
|
25
|
+
}
|
|
26
|
+
.badge{
|
|
27
|
+
background-color: var(--md-sys-color-error);
|
|
28
|
+
color: var(--md-sys-color-on-error);
|
|
29
|
+
font-size: 12px;
|
|
30
|
+
line-height: 100%; /* 150% */
|
|
31
|
+
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
|
|
32
|
+
border-radius: 9999px;
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
justify-content: center;
|
|
36
|
+
width: 8px;
|
|
37
|
+
height: 8px;
|
|
38
|
+
position: absolute;
|
|
39
|
+
top: var(--scb-badge-top);
|
|
40
|
+
left: calc(100% - var(--scb-badge-right));
|
|
41
|
+
white-space: nowrap;
|
|
42
|
+
}
|
|
43
|
+
`;d([n({type:String,reflect:!0})],s.prototype,"value",2);d([n({type:String,reflect:!0})],s.prototype,"label",2);d([n({type:Boolean,reflect:!0})],s.prototype,"disabled",2);d([n({type:String,reflect:!0})],s.prototype,"variant",2);s=d([b("scb-badge")],s);
|
|
@@ -1,6 +1,14 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as u,n as o,i as y,x as g,t as b}from"../../vendor/vendor.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(s,i,a){try{customElements.get(s)||t(s,i,a)}catch(l){var c=String(l||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw l}}}}catch{}})();var v=Object.defineProperty,w=Object.getOwnPropertyDescriptor,f=e=>{throw TypeError(e)},n=(e,t,s,i)=>{for(var a=i>1?void 0:i?w(t,s):t,c=e.length-1,l;c>=0;c--)(l=e[c])&&(a=(i?l(t,s,a):l(a))||a);return i&&a&&v(t,s,a),a},m=(e,t,s)=>t.has(e)||f("Cannot "+s),_=(e,t,s)=>t.has(e)?f("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,s),d=(e,t,s)=>(m(e,t,"access private method"),s),p,h;let r=class extends y{constructor(){super(...arguments),_(this,p),this.direction="column",this.gap="",this.rowGap="",this.columnGap="",this.align="stretch",this.justify="start",this.wrap=!1,this.inline=!1}firstUpdated(){d(this,p,h).call(this)}updated(){d(this,p,h).call(this)}mapSpacingToken(e){if(!e)return;const t=String(e).trim();return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}parseGapShorthand(e){if(!e)return{};const t=e.trim().split(/\s+/);if(t.length===1){const s=this.mapSpacingToken(t[0]);return{row:s,col:s}}return{row:this.mapSpacingToken(t[0]),col:this.mapSpacingToken(t[1])}}render(){return g`<div class="base"><slot></slot></div>`}};p=new WeakSet;h=function(){this.style.setProperty("--scb-stack-direction",this.direction);const e="var(--spacing-5, 16px)",t=this.parseGapShorthand(this.gap),s=this.mapSpacingToken(this.rowGap)??t.row??e,i=this.mapSpacingToken(this.columnGap)??t.col??e;this.style.setProperty("--scb-stack-gap",`${s}`),this.style.setProperty("--scb-stack-row-gap",s),this.style.setProperty("--scb-stack-column-gap",i);const a={start:"flex-start",center:"center",end:"flex-end",stretch:"stretch",baseline:"baseline"},c={start:"flex-start",center:"center",end:"flex-end",between:"space-between",around:"space-around",evenly:"space-evenly"};this.style.setProperty("--scb-stack-align",a[this.align]??"stretch"),this.style.setProperty("--scb-stack-justify",c[this.justify]??"flex-start"),this.style.setProperty("--scb-stack-wrap",this.wrap?"wrap":"nowrap")};r.styles=u`
|
|
2
2
|
:host {
|
|
3
3
|
box-sizing: border-box;
|
|
4
|
+
display: block;
|
|
5
|
+
width: auto;
|
|
6
|
+
max-width: 100%;
|
|
7
|
+
min-inline-size: 0;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
/* Inre flexlayout så att gap även fungerar för slottat innehåll */
|
|
11
|
+
.base {
|
|
4
12
|
display: var(--scb-stack-display, flex);
|
|
5
13
|
flex-direction: var(--scb-stack-direction, column);
|
|
6
14
|
|
|
@@ -11,14 +19,14 @@ import{a as d,n as o,i as y,x as g,t as b}from"../../vendor/vendor.js";(function
|
|
|
11
19
|
align-items: var(--scb-stack-align, stretch);
|
|
12
20
|
justify-content: var(--scb-stack-justify, flex-start);
|
|
13
21
|
flex-wrap: var(--scb-stack-wrap, nowrap);
|
|
14
|
-
|
|
15
|
-
width: auto;
|
|
16
|
-
max-width: 100%;
|
|
17
|
-
min-inline-size: 0;
|
|
18
22
|
}
|
|
19
|
-
:host([inline]) { --scb-stack-display: inline-flex; }
|
|
20
23
|
|
|
21
|
-
/*
|
|
24
|
+
/* Gör att slotens tilldelade noder blir barn till .base */
|
|
25
|
+
slot { display: contents; }
|
|
26
|
+
|
|
27
|
+
:host([inline]) .base { --scb-stack-display: inline-flex; }
|
|
28
|
+
|
|
29
|
+
/* Barnens flex-beteende i row-läge kan styras via variabeln och defaultar till att inte ta full bredd */
|
|
22
30
|
:host([direction="row"]) ::slotted(*) {
|
|
23
31
|
flex: var(--scb-stack-item-flex, 0 0 auto);
|
|
24
32
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.70",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -74,6 +74,10 @@
|
|
|
74
74
|
"import": "./scb-avatar/scb-avatar.js",
|
|
75
75
|
"require": "./scb-avatar/scb-avatar.js"
|
|
76
76
|
},
|
|
77
|
+
"./scb-badge": {
|
|
78
|
+
"import": "./scb-badge/scb-badge.js",
|
|
79
|
+
"require": "./scb-badge/scb-badge.js"
|
|
80
|
+
},
|
|
77
81
|
"./scb-breadcrumb": {
|
|
78
82
|
"import": "./scb-breadcrumb/scb-breadcrumb.js",
|
|
79
83
|
"require": "./scb-breadcrumb/scb-breadcrumb.js"
|
|
@@ -288,5 +292,5 @@
|
|
|
288
292
|
},
|
|
289
293
|
"./mvc/*": "./mvc/*"
|
|
290
294
|
},
|
|
291
|
-
"buildHash": "
|
|
295
|
+
"buildHash": "24ECE43A6671F3197386F295DD01218859A336BAAD7DC1D81CADEFBF56001DA1"
|
|
292
296
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* En badge-komponent baserad på Material 3 Web Component Badge.
|
|
4
|
+
* @slot - Innehåll som badgen placeras på (t.ex. ikon, text)
|
|
5
|
+
*/
|
|
6
|
+
export declare class ScbBadge extends LitElement {
|
|
7
|
+
value: string;
|
|
8
|
+
label: string;
|
|
9
|
+
disabled: boolean;
|
|
10
|
+
variant: 'dot' | 'value';
|
|
11
|
+
updated(): void;
|
|
12
|
+
static styles: import('lit').CSSResult;
|
|
13
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
14
|
+
}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { css as n, LitElement as c, html as v } from "lit";
|
|
2
|
+
import { property as i, customElement as b } from "lit/decorators.js";
|
|
3
|
+
var u = Object.defineProperty, h = Object.getOwnPropertyDescriptor, s = (a, r, o, l) => {
|
|
4
|
+
for (var e = l > 1 ? void 0 : l ? h(r, o) : r, p = a.length - 1, d; p >= 0; p--)
|
|
5
|
+
(d = a[p]) && (e = (l ? d(r, o, e) : d(e)) || e);
|
|
6
|
+
return l && e && u(r, o, e), e;
|
|
7
|
+
};
|
|
8
|
+
let t = class extends c {
|
|
9
|
+
constructor() {
|
|
10
|
+
super(...arguments), this.value = "", this.label = "", this.disabled = !1, this.variant = "dot";
|
|
11
|
+
}
|
|
12
|
+
updated() {
|
|
13
|
+
}
|
|
14
|
+
render() {
|
|
15
|
+
let a = this.value;
|
|
16
|
+
!isNaN(Number(this.value)) && this.value.length > 4 && (a = this.value.slice(0, 4) + "+");
|
|
17
|
+
const r = this.variant === "value" && !this.value ? "badge-value-empty" : "";
|
|
18
|
+
return this.variant === "dot" && (a = ""), v`
|
|
19
|
+
<div class="badge-content"
|
|
20
|
+
.value=${this.value}
|
|
21
|
+
.label=${this.label}
|
|
22
|
+
?disabled=${this.disabled}
|
|
23
|
+
>
|
|
24
|
+
<div class="badge ${r}">${a}</div>
|
|
25
|
+
<slot></slot>
|
|
26
|
+
</div>
|
|
27
|
+
`;
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
t.styles = n`
|
|
31
|
+
:host {
|
|
32
|
+
--scb-badge-top: 0;
|
|
33
|
+
--scb-badge-right: 12px;
|
|
34
|
+
display: block;
|
|
35
|
+
position: relative;
|
|
36
|
+
width: fit-content;
|
|
37
|
+
}
|
|
38
|
+
:host([variant="value"]) .badge {
|
|
39
|
+
width: fit-content;
|
|
40
|
+
padding: 6px;
|
|
41
|
+
}
|
|
42
|
+
:host([variant="value"]) .badge.badge-value-empty{
|
|
43
|
+
width: 8px;
|
|
44
|
+
padding: 4px;
|
|
45
|
+
}
|
|
46
|
+
.badge{
|
|
47
|
+
background-color: var(--md-sys-color-error);
|
|
48
|
+
color: var(--md-sys-color-on-error);
|
|
49
|
+
font-size: 12px;
|
|
50
|
+
line-height: 100%; /* 150% */
|
|
51
|
+
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
|
|
52
|
+
border-radius: 9999px;
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
justify-content: center;
|
|
56
|
+
width: 8px;
|
|
57
|
+
height: 8px;
|
|
58
|
+
position: absolute;
|
|
59
|
+
top: var(--scb-badge-top);
|
|
60
|
+
left: calc(100% - var(--scb-badge-right));
|
|
61
|
+
white-space: nowrap;
|
|
62
|
+
}
|
|
63
|
+
`;
|
|
64
|
+
s([
|
|
65
|
+
i({ type: String, reflect: !0 })
|
|
66
|
+
], t.prototype, "value", 2);
|
|
67
|
+
s([
|
|
68
|
+
i({ type: String, reflect: !0 })
|
|
69
|
+
], t.prototype, "label", 2);
|
|
70
|
+
s([
|
|
71
|
+
i({ type: Boolean, reflect: !0 })
|
|
72
|
+
], t.prototype, "disabled", 2);
|
|
73
|
+
s([
|
|
74
|
+
i({ type: String, reflect: !0 })
|
|
75
|
+
], t.prototype, "variant", 2);
|
|
76
|
+
t = s([
|
|
77
|
+
b("scb-badge")
|
|
78
|
+
], t);
|
|
79
|
+
export {
|
|
80
|
+
t as ScbBadge
|
|
81
|
+
};
|
package/scb-grid/scb-stack.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { css as y, LitElement as
|
|
1
|
+
import { css as y, LitElement as d, html as g } from "lit";
|
|
2
2
|
import { property as i, customElement as b } from "lit/decorators.js";
|
|
3
|
-
var
|
|
3
|
+
var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, u = (e) => {
|
|
4
4
|
throw TypeError(e);
|
|
5
5
|
}, n = (e, t, s, c) => {
|
|
6
|
-
for (var r = c > 1 ? void 0 : c ?
|
|
6
|
+
for (var r = c > 1 ? void 0 : c ? m(t, s) : t, o = e.length - 1, l; o >= 0; o--)
|
|
7
7
|
(l = e[o]) && (r = (c ? l(t, s, r) : l(r)) || r);
|
|
8
|
-
return c && r &&
|
|
8
|
+
return c && r && v(t, s, r), r;
|
|
9
9
|
}, k = (e, t, s) => t.has(e) || u("Cannot " + s), w = (e, t, s) => t.has(e) ? u("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), f = (e, t, s) => (k(e, t, "access private method"), s), p, h;
|
|
10
|
-
let a = class extends
|
|
10
|
+
let a = class extends d {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments), w(this, p), this.direction = "column", this.gap = "", this.rowGap = "", this.columnGap = "", this.align = "stretch", this.justify = "start", this.wrap = !1, this.inline = !1;
|
|
13
13
|
}
|
|
@@ -32,7 +32,7 @@ let a = class extends g {
|
|
|
32
32
|
return { row: this.mapSpacingToken(t[0]), col: this.mapSpacingToken(t[1]) };
|
|
33
33
|
}
|
|
34
34
|
render() {
|
|
35
|
-
return
|
|
35
|
+
return g`<div class="base"><slot></slot></div>`;
|
|
36
36
|
}
|
|
37
37
|
};
|
|
38
38
|
p = /* @__PURE__ */ new WeakSet();
|
|
@@ -59,6 +59,14 @@ h = function() {
|
|
|
59
59
|
a.styles = y`
|
|
60
60
|
:host {
|
|
61
61
|
box-sizing: border-box;
|
|
62
|
+
display: block;
|
|
63
|
+
width: auto;
|
|
64
|
+
max-width: 100%;
|
|
65
|
+
min-inline-size: 0;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Inre flexlayout så att gap även fungerar för slottat innehåll */
|
|
69
|
+
.base {
|
|
62
70
|
display: var(--scb-stack-display, flex);
|
|
63
71
|
flex-direction: var(--scb-stack-direction, column);
|
|
64
72
|
|
|
@@ -69,14 +77,14 @@ a.styles = y`
|
|
|
69
77
|
align-items: var(--scb-stack-align, stretch);
|
|
70
78
|
justify-content: var(--scb-stack-justify, flex-start);
|
|
71
79
|
flex-wrap: var(--scb-stack-wrap, nowrap);
|
|
72
|
-
|
|
73
|
-
width: auto;
|
|
74
|
-
max-width: 100%;
|
|
75
|
-
min-inline-size: 0;
|
|
76
80
|
}
|
|
77
|
-
:host([inline]) { --scb-stack-display: inline-flex; }
|
|
78
81
|
|
|
79
|
-
/*
|
|
82
|
+
/* Gör att slotens tilldelade noder blir barn till .base */
|
|
83
|
+
slot { display: contents; }
|
|
84
|
+
|
|
85
|
+
:host([inline]) .base { --scb-stack-display: inline-flex; }
|
|
86
|
+
|
|
87
|
+
/* Barnens flex-beteende i row-läge kan styras via variabeln och defaultar till att inte ta full bredd */
|
|
80
88
|
:host([direction="row"]) ::slotted(*) {
|
|
81
89
|
flex: var(--scb-stack-item-flex, 0 0 auto);
|
|
82
90
|
}
|