scb-wc-test 0.1.87 → 0.1.89

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 CHANGED
@@ -41,7 +41,6 @@ import './mvc/components/scb-list/scb-list.js';
41
41
  import './mvc/components/scb-menu/scb-menu-item.js';
42
42
  import './mvc/components/scb-menu/scb-menu.js';
43
43
  import './mvc/components/scb-menu/scb-sub-menu.js';
44
- import './mvc/components/scb-notification/scb-notification.js';
45
44
  import './mvc/components/scb-notification-card/scb-notification-card.js';
46
45
  import './mvc/components/scb-pagination/scb-pagination.js';
47
46
  import './mvc/components/scb-progress-indicator/scb-progress-indicator.js';
@@ -50,6 +49,7 @@ import './mvc/components/scb-radio-button/scb-radio-group.js';
50
49
  import './mvc/components/scb-search/scb-search.js';
51
50
  import './mvc/components/scb-segmented-button/scb-segmented-button.js';
52
51
  import './mvc/components/scb-segmented-button/scb-segmented-item.js';
52
+ import './mvc/components/scb-skeleton/scb-skeleton.js';
53
53
  import './mvc/components/scb-snackbar/scb-snackbar.js';
54
54
  import './mvc/components/scb-status-pill/scb-status-pill.js';
55
55
  import './mvc/components/scb-stepper/scb-step.js';
@@ -107,7 +107,6 @@ import './scb-list/scb-list.js';
107
107
  import './scb-menu/scb-menu-item.js';
108
108
  import './scb-menu/scb-menu.js';
109
109
  import './scb-menu/scb-sub-menu.js';
110
- import './scb-notification/scb-notification.js';
111
110
  import './scb-notification-card/scb-notification-card.js';
112
111
  import './scb-pagination/scb-pagination.js';
113
112
  import './scb-progress-indicator/scb-progress-indicator.js';
@@ -116,6 +115,7 @@ import './scb-radio-button/scb-radio-group.js';
116
115
  import './scb-search/scb-search.js';
117
116
  import './scb-segmented-button/scb-segmented-button.js';
118
117
  import './scb-segmented-button/scb-segmented-item.js';
118
+ import './scb-skeleton/scb-skeleton.js';
119
119
  import './scb-snackbar/scb-snackbar.js';
120
120
  import './scb-status-pill/scb-status-pill.js';
121
121
  import './scb-stepper/scb-step.js';
package/index.d.ts CHANGED
@@ -38,7 +38,6 @@ export * from './scb-list/scb-list';
38
38
  export * from './scb-menu/scb-menu-item';
39
39
  export * from './scb-menu/scb-menu';
40
40
  export * from './scb-menu/scb-sub-menu';
41
- export * from './scb-notification/scb-notification';
42
41
  export * from './scb-notification-card/scb-notification-card';
43
42
  export * from './scb-pagination/scb-pagination';
44
43
  export * from './scb-progress-indicator/scb-progress-indicator';
@@ -47,6 +46,7 @@ export * from './scb-radio-button/scb-radio-group';
47
46
  export * from './scb-search/scb-search';
48
47
  export * from './scb-segmented-button/scb-segmented-button';
49
48
  export * from './scb-segmented-button/scb-segmented-item';
49
+ export * from './scb-skeleton/scb-skeleton';
50
50
  export * from './scb-snackbar/scb-snackbar';
51
51
  export * from './scb-status-pill/scb-status-pill';
52
52
  export * from './scb-stepper/scb-step';
package/index.js CHANGED
@@ -6,17 +6,17 @@ import { ScbBadge as f } from "./scb-badge/scb-badge.js";
6
6
  import { SCBBreadcrumbItem as i } from "./scb-breadcrumb/scb-breadcrumb-item.js";
7
7
  import { SCBBreadcrumb as n } from "./scb-breadcrumb/scb-breadcrumb.js";
8
8
  import { ScbButton as C } from "./scb-button/scb-button.js";
9
- import { ScbCalendarCard as l } from "./scb-calendar-card/scb-calendar-card.js";
9
+ import { ScbCalendarCard as I } from "./scb-calendar-card/scb-calendar-card.js";
10
10
  import { ScbCard as D } from "./scb-card/scb-card.js";
11
11
  import { ScbCheckboxGroup as g } 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";
12
+ import { ScbCheckbox as k } from "./scb-checkbox/scb-checkbox.js";
13
+ import { ScbChip as F } from "./scb-chip/scb-chip.js";
14
+ import { ScbDialog as h } from "./scb-dialog/scb-dialog.js";
15
15
  import { ScbDivider as y } from "./scb-divider/scb-divider.js";
16
16
  import { ScbDrawerItem as P } from "./scb-drawer/scb-drawer-item.js";
17
17
  import { ScbDrawerSection as M } from "./scb-drawer/scb-drawer-section.js";
18
18
  import { ScbDrawer as z } from "./scb-drawer/scb-drawer.js";
19
- import { ScbSubDrawer as R } from "./scb-drawer/scb-sub-drawer.js";
19
+ import { ScbSubDrawer as K } from "./scb-drawer/scb-sub-drawer.js";
20
20
  import { ScbFactCardContent as U } from "./scb-fact-card/scb-fact-card-content.js";
21
21
  import { ScbFactCard as j } from "./scb-fact-card/scb-fact-card.js";
22
22
  import { ScbFooterSection as E } from "./scb-footer/scb-footer-section.js";
@@ -33,20 +33,20 @@ import { ScbHorizontalScroller as fr } from "./scb-horizontal-scroller/scb-horiz
33
33
  import { ScbIconButton as ir } from "./scb-icon-button/scb-icon-button.js";
34
34
  import { ScbKeyFigureCard as nr } from "./scb-keyfigure-card/scb-keyfigure-card.js";
35
35
  import { ScbLink as Cr } from "./scb-link/scb-link.js";
36
- import { ScbListItem as lr } from "./scb-list/scb-list-item.js";
36
+ import { ScbListItem as Ir } from "./scb-list/scb-list-item.js";
37
37
  import { ScbList as Dr } from "./scb-list/scb-list.js";
38
38
  import { ScbMenuItem as gr } 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 { ScbPagination as Pr } from "./scb-pagination/scb-pagination.js";
44
- import { ScbProgressIndicator as Mr } from "./scb-progress-indicator/scb-progress-indicator.js";
45
- import { ScbRadioButton as zr } from "./scb-radio-button/scb-radio-button.js";
46
- import { ScbRadioGroup as Rr } from "./scb-radio-button/scb-radio-group.js";
47
- import { ScbSearch as Ur } from "./scb-search/scb-search.js";
48
- import { ScbSegmentedButton as jr } from "./scb-segmented-button/scb-segmented-button.js";
49
- import { ScbSegmentedItem as Er } from "./scb-segmented-button/scb-segmented-item.js";
39
+ import { ScbMenu as kr } from "./scb-menu/scb-menu.js";
40
+ import { ScbSubMenu as Fr } from "./scb-menu/scb-sub-menu.js";
41
+ import { ScbNotificationCard as hr } from "./scb-notification-card/scb-notification-card.js";
42
+ import { ScbPagination as yr } from "./scb-pagination/scb-pagination.js";
43
+ import { ScbProgressIndicator as Pr } from "./scb-progress-indicator/scb-progress-indicator.js";
44
+ import { ScbRadioButton as Mr } from "./scb-radio-button/scb-radio-button.js";
45
+ import { ScbRadioGroup as zr } from "./scb-radio-button/scb-radio-group.js";
46
+ import { ScbSearch as Kr } from "./scb-search/scb-search.js";
47
+ import { ScbSegmentedButton as Ur } from "./scb-segmented-button/scb-segmented-button.js";
48
+ import { ScbSegmentedItem as jr } from "./scb-segmented-button/scb-segmented-item.js";
49
+ import { ScbSkeleton as Er } from "./scb-skeleton/scb-skeleton.js";
50
50
  import { ScbSnackbar as Or } from "./scb-snackbar/scb-snackbar.js";
51
51
  import { ScbStatusPill as Wr } from "./scb-status-pill/scb-status-pill.js";
52
52
  import { ScbStep as Yr } from "./scb-stepper/scb-step.js";
@@ -59,7 +59,7 @@ import { ScbTextField as bo } from "./scb-textfield/scb-textfield.js";
59
59
  import { ScbTocItem as fo } from "./scb-toc/scb-toc-item.js";
60
60
  import { ScbToc as io } from "./scb-toc/scb-toc.js";
61
61
  import { ScbTooltip as uo } from "./scb-tooltip/scb-tooltip.js";
62
- import { ScbViz as Io } from "./scb-viz/scb-viz.js";
62
+ import { ScbViz as lo } from "./scb-viz/scb-viz.js";
63
63
  export {
64
64
  n as SCBBreadcrumb,
65
65
  i as SCBBreadcrumbItem,
@@ -69,12 +69,12 @@ export {
69
69
  b as ScbAvatar,
70
70
  f as ScbBadge,
71
71
  C as ScbButton,
72
- l as ScbCalendarCard,
72
+ I as ScbCalendarCard,
73
73
  D as ScbCard,
74
- s as ScbCheckbox,
74
+ k as ScbCheckbox,
75
75
  g as ScbCheckboxGroup,
76
- H as ScbChip,
77
- k as ScbDialog,
76
+ F as ScbChip,
77
+ h as ScbDialog,
78
78
  y as ScbDivider,
79
79
  z as ScbDrawer,
80
80
  P as ScbDrawerItem,
@@ -95,32 +95,32 @@ export {
95
95
  nr as ScbKeyFigureCard,
96
96
  Cr as ScbLink,
97
97
  Dr as ScbList,
98
- lr as ScbListItem,
99
- sr as ScbMenu,
98
+ Ir as ScbListItem,
99
+ kr as ScbMenu,
100
100
  gr as ScbMenuItem,
101
- kr as ScbNotification,
102
- yr as ScbNotificationCard,
103
- Pr as ScbPagination,
101
+ hr as ScbNotificationCard,
102
+ yr as ScbPagination,
104
103
  eo as ScbPrimaryTab,
105
- Mr as ScbProgressIndicator,
106
- zr as ScbRadioButton,
107
- Rr as ScbRadioGroup,
108
- Ur as ScbSearch,
104
+ Pr as ScbProgressIndicator,
105
+ Mr as ScbRadioButton,
106
+ zr as ScbRadioGroup,
107
+ Kr as ScbSearch,
109
108
  co as ScbSecondaryTab,
110
- jr as ScbSegmentedButton,
111
- Er as ScbSegmentedItem,
109
+ Ur as ScbSegmentedButton,
110
+ jr as ScbSegmentedItem,
111
+ Er as ScbSkeleton,
112
112
  Or as ScbSnackbar,
113
113
  _ as ScbStack,
114
114
  Wr as ScbStatusPill,
115
115
  Yr as ScbStep,
116
116
  _r as ScbStepper,
117
- R as ScbSubDrawer,
118
- Hr as ScbSubMenu,
117
+ K as ScbSubDrawer,
118
+ Fr as ScbSubMenu,
119
119
  ro as ScbSwitch,
120
120
  mo as ScbTabs,
121
121
  bo as ScbTextField,
122
122
  io as ScbToc,
123
123
  fo as ScbTocItem,
124
124
  uo as ScbTooltip,
125
- Io as ScbViz
125
+ lo as ScbViz
126
126
  };
@@ -39,7 +39,6 @@ import './scb-menu/scb-menu.js';
39
39
  import './scb-menu/scb-menu-item.js';
40
40
  import './scb-menu/scb-sub-menu.js';
41
41
  import './scb-notification-card/scb-notification-card.js';
42
- import './scb-notification/scb-notification.js';
43
42
  import './scb-pagination/scb-pagination.js';
44
43
  import './scb-progress-indicator/scb-progress-indicator.js';
45
44
  import './scb-radio-button/scb-radio-button.js';
@@ -47,6 +46,7 @@ import './scb-radio-button/scb-radio-group.js';
47
46
  import './scb-search/scb-search.js';
48
47
  import './scb-segmented-button/scb-segmented-button.js';
49
48
  import './scb-segmented-button/scb-segmented-item.js';
49
+ import './scb-skeleton/scb-skeleton.js';
50
50
  import './scb-snackbar/scb-snackbar.js';
51
51
  import './scb-status-pill/scb-status-pill.js';
52
52
  import './scb-stepper/scb-step.js';
@@ -0,0 +1,33 @@
1
+ import{a as h,n as l,i as c,x as u,t as b}from"../../vendor/vendor.js";(function(){try{var a=typeof globalThis<"u"?globalThis:window;if(!a.__scb_ce_guard_installed__){a.__scb_ce_guard_installed__=!0;var i=customElements.define.bind(customElements);customElements.define=function(t,s,e){try{customElements.get(t)||i(t,s,e)}catch(n){var o=String(n||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var p=Object.defineProperty,g=Object.getOwnPropertyDescriptor,d=(a,i,t,s)=>{for(var e=s>1?void 0:s?g(i,t):i,o=a.length-1,n;o>=0;o--)(n=a[o])&&(e=(s?n(i,t,e):n(e))||e);return s&&e&&p(i,t,e),e};let r=class extends c{constructor(){super(...arguments),this.variant="rectangular",this.width="100%",this.height="100%",this.borderSize="small"}render(){return this.style.setProperty("--scb-skeleton-width",this.width),this.style.setProperty("--scb-skeleton-height",this.height),this.variant==="rounded"&&this.style.setProperty("--scb-skeleton-border-size",this.borderSize==="small"?"8px":this.borderSize==="medium"?"16px":this.borderSize==="large"?"24px":"8px"),u`
2
+ <div
3
+ class="skeleton${this.variant==="circular"?" circle":""} ${this.variant==="rounded"?" rounded":""}"
4
+ ><slot></slot></div>
5
+ `}};r.styles=h`
6
+ :host {
7
+ display: inline-block;
8
+ max-width: var(--scb-skeleton-width);
9
+ width: 100%;
10
+ height: var(--scb-skeleton-height);
11
+ }
12
+ .skeleton {
13
+ background: linear-gradient(90deg, var(--md-sys-color-surface-container-high) 25%, var(--md-sys-color-surface-container-highest) 50%, var(--md-sys-color-surface-container-high) 75%);
14
+ background-size: 200% 100%;
15
+ animation: skeleton-loading 3.2s infinite linear;
16
+ width: 100%;
17
+ height: 100%;
18
+ }
19
+ .rounded {
20
+ border-radius: var(--scb-skeleton-border-size);
21
+ }
22
+ .circle {
23
+ border-radius: 50%;
24
+ }
25
+ @keyframes skeleton-loading {
26
+ 0% {
27
+ background-position: 200% 0;
28
+ }
29
+ 100% {
30
+ background-position: -200% 0;
31
+ }
32
+ }
33
+ `;d([l({type:String})],r.prototype,"variant",2);d([l({type:String})],r.prototype,"width",2);d([l({type:String})],r.prototype,"height",2);d([l({type:String,attribute:"border-size"})],r.prototype,"borderSize",2);r=d([b("scb-skeleton")],r);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "scb-wc-test",
3
- "version": "0.1.87",
3
+ "version": "0.1.89",
4
4
  "type": "module",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
@@ -218,10 +218,6 @@
218
218
  "import": "./scb-menu/scb-sub-menu.js",
219
219
  "require": "./scb-menu/scb-sub-menu.js"
220
220
  },
221
- "./scb-notification": {
222
- "import": "./scb-notification/scb-notification.js",
223
- "require": "./scb-notification/scb-notification.js"
224
- },
225
221
  "./scb-notification-card": {
226
222
  "import": "./scb-notification-card/scb-notification-card.js",
227
223
  "require": "./scb-notification-card/scb-notification-card.js"
@@ -254,6 +250,10 @@
254
250
  "import": "./scb-segmented-button/scb-segmented-item.js",
255
251
  "require": "./scb-segmented-button/scb-segmented-item.js"
256
252
  },
253
+ "./scb-skeleton": {
254
+ "import": "./scb-skeleton/scb-skeleton.js",
255
+ "require": "./scb-skeleton/scb-skeleton.js"
256
+ },
257
257
  "./scb-snackbar": {
258
258
  "import": "./scb-snackbar/scb-snackbar.js",
259
259
  "require": "./scb-snackbar/scb-snackbar.js"
@@ -308,5 +308,5 @@
308
308
  },
309
309
  "./mvc/*": "./mvc/*"
310
310
  },
311
- "buildHash": "A26304F5F97D19133E673993DDDC5FA7E48B7F8625712A61FDA953E6A3B8DB7F"
311
+ "buildHash": "7D1B717909493228263DC343CAF7E2B83E9E4AEEB97F2EC43CB177286B4F30AB"
312
312
  }
@@ -0,0 +1,16 @@
1
+ import { LitElement } from 'lit';
2
+ /**
3
+ * Enkel skeleton loader för att visa platshållare vid laddning.
4
+ *
5
+ * @property {number} width - Bredd på skeleton (px eller %)
6
+ * @property {number} height - Höjd på skeleton (px)
7
+ * @property {boolean} circle - Om skeleton ska vara cirkulär
8
+ */
9
+ export declare class ScbSkeleton extends LitElement {
10
+ variant: 'rectangular' | 'rounded' | 'circular';
11
+ width: string;
12
+ height: string;
13
+ borderSize: 'small' | 'medium' | 'large' | '';
14
+ static styles: import('lit').CSSResult;
15
+ render(): import('lit-html').TemplateResult<1>;
16
+ }
@@ -0,0 +1,66 @@
1
+ import { css as d, LitElement as c, html as p } from "lit";
2
+ import { property as o, customElement as b } from "lit/decorators.js";
3
+ var g = Object.defineProperty, u = Object.getOwnPropertyDescriptor, r = (l, i, n, s) => {
4
+ for (var e = s > 1 ? void 0 : s ? u(i, n) : i, a = l.length - 1, h; a >= 0; a--)
5
+ (h = l[a]) && (e = (s ? h(i, n, e) : h(e)) || e);
6
+ return s && e && g(i, n, e), e;
7
+ };
8
+ let t = class extends c {
9
+ constructor() {
10
+ super(...arguments), this.variant = "rectangular", this.width = "100%", this.height = "100%", this.borderSize = "small";
11
+ }
12
+ render() {
13
+ return this.style.setProperty("--scb-skeleton-width", this.width), this.style.setProperty("--scb-skeleton-height", this.height), this.variant === "rounded" && this.style.setProperty("--scb-skeleton-border-size", this.borderSize === "small" ? "8px" : this.borderSize === "medium" ? "16px" : this.borderSize === "large" ? "24px" : "8px"), p`
14
+ <div
15
+ class="skeleton${this.variant === "circular" ? " circle" : ""} ${this.variant === "rounded" ? " rounded" : ""}"
16
+ ><slot></slot></div>
17
+ `;
18
+ }
19
+ };
20
+ t.styles = d`
21
+ :host {
22
+ display: inline-block;
23
+ max-width: var(--scb-skeleton-width);
24
+ width: 100%;
25
+ height: var(--scb-skeleton-height);
26
+ }
27
+ .skeleton {
28
+ background: linear-gradient(90deg, var(--md-sys-color-surface-container-high) 25%, var(--md-sys-color-surface-container-highest) 50%, var(--md-sys-color-surface-container-high) 75%);
29
+ background-size: 200% 100%;
30
+ animation: skeleton-loading 3.2s infinite linear;
31
+ width: 100%;
32
+ height: 100%;
33
+ }
34
+ .rounded {
35
+ border-radius: var(--scb-skeleton-border-size);
36
+ }
37
+ .circle {
38
+ border-radius: 50%;
39
+ }
40
+ @keyframes skeleton-loading {
41
+ 0% {
42
+ background-position: 200% 0;
43
+ }
44
+ 100% {
45
+ background-position: -200% 0;
46
+ }
47
+ }
48
+ `;
49
+ r([
50
+ o({ type: String })
51
+ ], t.prototype, "variant", 2);
52
+ r([
53
+ o({ type: String })
54
+ ], t.prototype, "width", 2);
55
+ r([
56
+ o({ type: String })
57
+ ], t.prototype, "height", 2);
58
+ r([
59
+ o({ type: String, attribute: "border-size" })
60
+ ], t.prototype, "borderSize", 2);
61
+ t = r([
62
+ b("scb-skeleton")
63
+ ], t);
64
+ export {
65
+ t as ScbSkeleton
66
+ };