scb-wc-test 0.1.61 → 0.1.63
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 +5 -2
- package/all.js +62 -0
- package/index.d.ts +1 -0
- package/index.js +64 -62
- package/mvc/components/all.js +1 -0
- package/mvc/components/scb-app-bar/scb-app-bar.js +30 -20
- package/mvc/components/scb-breadcrumb/scb-breadcrumb-item.js +3 -11
- package/mvc/components/scb-breadcrumb/scb-breadcrumb.js +7 -6
- package/mvc/components/scb-horizontal-scroller/scb-horizontal-scroller.js +134 -0
- package/mvc/components/scb-menu/scb-menu-item.js +43 -25
- package/mvc/components/scb-menu/scb-menu.js +35 -8
- package/mvc/components/scb-menu/scb-sub-menu.js +10 -6
- package/mvc/components/scb-snackbar/scb-snackbar.js +14 -12
- package/mvc/components/scb-status-pill/scb-status-pill.js +14 -10
- package/mvc/components/scb-tooltip/scb-tooltip.js +22 -23
- package/package.json +283 -266
- package/scb-app-bar/scb-app-bar.d.ts +1 -0
- package/scb-app-bar/scb-app-bar.js +63 -47
- package/scb-breadcrumb/scb-breadcrumb-item.js +9 -17
- package/scb-breadcrumb/scb-breadcrumb.d.ts +3 -0
- package/scb-breadcrumb/scb-breadcrumb.js +34 -24
- package/scb-horizontal-scroller/scb-horizontal-scroller.d.ts +25 -0
- package/scb-horizontal-scroller/scb-horizontal-scroller.js +250 -0
- package/scb-menu/scb-menu-item.d.ts +5 -4
- package/scb-menu/scb-menu-item.js +130 -63
- package/scb-menu/scb-menu.d.ts +3 -0
- package/scb-menu/scb-menu.js +78 -38
- package/scb-menu/scb-sub-menu.js +23 -19
- package/scb-snackbar/scb-snackbar.js +43 -41
- package/scb-status-pill/scb-status-pill.js +27 -23
- package/scb-tooltip/scb-tooltip.js +34 -35
- package/scb-wc-test.bundle.js +863 -672
package/README.md
CHANGED
|
@@ -23,6 +23,7 @@ npm install scb-wc-test
|
|
|
23
23
|
Importera enskilda komponenter (bäst för tree‑shaking):
|
|
24
24
|
```js
|
|
25
25
|
import 'scb-wc-test/scb-wc-test.css';
|
|
26
|
+
import 'scb-wc-test/scb-typography.css';
|
|
26
27
|
import 'scb-wc-test/scb-button';
|
|
27
28
|
import 'scb-wc-test/scb-accordion';
|
|
28
29
|
```
|
|
@@ -30,6 +31,7 @@ import 'scb-wc-test/scb-accordion';
|
|
|
30
31
|
Importera allt (ej rekommenderat, men möjligt):
|
|
31
32
|
```js
|
|
32
33
|
import 'scb-wc-test/scb-wc-test.css';
|
|
34
|
+
import 'scb-wc-test/scb-typography.css';
|
|
33
35
|
import 'scb-wc-test/all';
|
|
34
36
|
```
|
|
35
37
|
|
|
@@ -62,13 +64,13 @@ Det kopierar hela `mvc/` till `wwwroot/ui/` (komponenter, vendor och CSS).
|
|
|
62
64
|
```html
|
|
63
65
|
<!-- Lägg helst i <head> -->
|
|
64
66
|
<link rel="stylesheet" href="~/ui/scb-wc-test.css" />
|
|
67
|
+
<link rel="stylesheet" href="~/ui/scb-typography.css" />
|
|
68
|
+
|
|
65
69
|
|
|
66
70
|
<!-- Ladda ENDAST de komponenter du använder på sidan, gärna precis före </body> -->
|
|
67
71
|
<script type="module" src="~/ui/components/scb-link/scb-link.js"></script>
|
|
68
72
|
<script type="module" src="~/ui/components/scb-button/scb-button.js"></script>
|
|
69
73
|
|
|
70
|
-
<!-- För demosida: ladda alla -->
|
|
71
|
-
<!-- <script type="module" src="~/ui/components/all.js"></script> -->
|
|
72
74
|
```
|
|
73
75
|
|
|
74
76
|
---
|
|
@@ -99,6 +101,7 @@ node_modules/scb-wc-test/scb-wc-test.css
|
|
|
99
101
|
```
|
|
100
102
|
```html
|
|
101
103
|
<link rel="stylesheet" href="scb-wc-test.css">
|
|
104
|
+
<link rel="stylesheet" href="scb-typography.css" />
|
|
102
105
|
<script src="scb-wc-test.bundle.js"></script>
|
|
103
106
|
```
|
|
104
107
|
|
package/all.js
CHANGED
|
@@ -1,4 +1,65 @@
|
|
|
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-chip/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-horizontal-scroller/scb-horizontal-scroller.js';
|
|
35
|
+
import './mvc/components/scb-icon-button/scb-icon-button.js';
|
|
36
|
+
import './mvc/components/scb-keyfigure-card/scb-keyfigure-card.js';
|
|
37
|
+
import './mvc/components/scb-link/scb-link.js';
|
|
38
|
+
import './mvc/components/scb-list/scb-list-item.js';
|
|
39
|
+
import './mvc/components/scb-list/scb-list.js';
|
|
40
|
+
import './mvc/components/scb-menu/scb-menu-item.js';
|
|
41
|
+
import './mvc/components/scb-menu/scb-menu.js';
|
|
42
|
+
import './mvc/components/scb-menu/scb-sub-menu.js';
|
|
43
|
+
import './mvc/components/scb-notification/scb-notification.js';
|
|
44
|
+
import './mvc/components/scb-notification-card/scb-notification-card.js';
|
|
45
|
+
import './mvc/components/scb-progress-indicator/scb-progress-indicator.js';
|
|
46
|
+
import './mvc/components/scb-radio-button/scb-radio-button.js';
|
|
47
|
+
import './mvc/components/scb-radio-button/scb-radio-group.js';
|
|
48
|
+
import './mvc/components/scb-search/scb-search.js';
|
|
49
|
+
import './mvc/components/scb-snackbar/scb-snackbar.js';
|
|
50
|
+
import './mvc/components/scb-status-pill/scb-status-pill.js';
|
|
51
|
+
import './mvc/components/scb-switch/scb-switch.js';
|
|
52
|
+
import './mvc/components/scb-tabs/scb-primary-tab.js';
|
|
53
|
+
import './mvc/components/scb-tabs/scb-secondary-tab.js';
|
|
54
|
+
import './mvc/components/scb-tabs/scb-tabs.js';
|
|
55
|
+
import './mvc/components/scb-textfield/scb-textfield.js';
|
|
56
|
+
import './mvc/components/scb-toc/scb-toc-item.js';
|
|
57
|
+
import './mvc/components/scb-toc/scb-toc.js';
|
|
58
|
+
import './mvc/components/scb-tooltip/scb-tooltip.js';
|
|
59
|
+
import './mvc/vendor/preload-helper.js';
|
|
60
|
+
import './mvc/vendor/vendor-lit.js';
|
|
61
|
+
import './mvc/vendor/vendor-material.js';
|
|
62
|
+
import './mvc/vendor/vendor.js';
|
|
2
63
|
import './scb-accordion/scb-accordion-item.js';
|
|
3
64
|
import './scb-accordion/scb-accordion.js';
|
|
4
65
|
import './scb-app-bar/scb-app-bar.js';
|
|
@@ -29,6 +90,7 @@ import './scb-header/scb-header-drawer-item.js';
|
|
|
29
90
|
import './scb-header/scb-header-tab.js';
|
|
30
91
|
import './scb-header/scb-header-utility.js';
|
|
31
92
|
import './scb-header/scb-header.js';
|
|
93
|
+
import './scb-horizontal-scroller/scb-horizontal-scroller.js';
|
|
32
94
|
import './scb-icon-button/scb-icon-button.js';
|
|
33
95
|
import './scb-keyfigure-card/scb-keyfigure-card.js';
|
|
34
96
|
import './scb-link/scb-link.js';
|
package/index.d.ts
CHANGED
|
@@ -28,6 +28,7 @@ export * from './scb-header/scb-header-drawer-item';
|
|
|
28
28
|
export * from './scb-header/scb-header-tab';
|
|
29
29
|
export * from './scb-header/scb-header-utility';
|
|
30
30
|
export * from './scb-header/scb-header';
|
|
31
|
+
export * from './scb-horizontal-scroller/scb-horizontal-scroller';
|
|
31
32
|
export * from './scb-icon-button/scb-icon-button';
|
|
32
33
|
export * from './scb-keyfigure-card/scb-keyfigure-card';
|
|
33
34
|
export * from './scb-link/scb-link';
|
package/index.js
CHANGED
|
@@ -6,19 +6,19 @@ import { SCBBreadcrumbItem as f } from "./scb-breadcrumb/scb-breadcrumb-item.js"
|
|
|
6
6
|
import { SCBBreadcrumb as i } from "./scb-breadcrumb/scb-breadcrumb.js";
|
|
7
7
|
import { ScbButton as n } from "./scb-button/scb-button.js";
|
|
8
8
|
import { ScbCalendarCard as C } from "./scb-calendar-card/scb-calendar-card.js";
|
|
9
|
-
import { ScbCard as
|
|
10
|
-
import { ScbCheckboxGroup as
|
|
9
|
+
import { ScbCard as I } from "./scb-card/scb-card.js";
|
|
10
|
+
import { ScbCheckboxGroup as D } from "./scb-checkbox/scb-checkbox-group.js";
|
|
11
11
|
import { ScbCheckbox as w } from "./scb-checkbox/scb-checkbox.js";
|
|
12
12
|
import { ScbChip as F } from "./scb-chip/scb-chip.js";
|
|
13
|
-
import { ScbDialog as
|
|
14
|
-
import { ScbDivider as
|
|
13
|
+
import { ScbDialog as h } from "./scb-dialog/scb-dialog.js";
|
|
14
|
+
import { ScbDivider as G } from "./scb-divider/scb-divider.js";
|
|
15
15
|
import { ScbDrawerItem as A } from "./scb-drawer/scb-drawer-item.js";
|
|
16
16
|
import { ScbDrawerSection as L } from "./scb-drawer/scb-drawer-section.js";
|
|
17
17
|
import { ScbDrawer as P } from "./scb-drawer/scb-drawer.js";
|
|
18
18
|
import { ScbSubDrawer as N } from "./scb-drawer/scb-sub-drawer.js";
|
|
19
|
-
import { ScbFactCardContent as
|
|
20
|
-
import { ScbFactCard as
|
|
21
|
-
import { ScbFooterSection as
|
|
19
|
+
import { ScbFactCardContent as z } from "./scb-fact-card/scb-fact-card-content.js";
|
|
20
|
+
import { ScbFactCard as U } from "./scb-fact-card/scb-fact-card.js";
|
|
21
|
+
import { ScbFooterSection as q } from "./scb-footer/scb-footer-section.js";
|
|
22
22
|
import { ScbFooter as J } from "./scb-footer/scb-footer.js";
|
|
23
23
|
import { ScbGridItem as Q } from "./scb-grid/scb-grid-item.js";
|
|
24
24
|
import { ScbGrid as W } from "./scb-grid/scb-grid.js";
|
|
@@ -28,30 +28,31 @@ import { ScbHeaderDrawerItem as rr } from "./scb-header/scb-header-drawer-item.j
|
|
|
28
28
|
import { ScbHeaderTab as er } from "./scb-header/scb-header-tab.js";
|
|
29
29
|
import { ScbHeaderUtility as cr } from "./scb-header/scb-header-utility.js";
|
|
30
30
|
import { ScbHeader as Sr } from "./scb-header/scb-header.js";
|
|
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 {
|
|
31
|
+
import { ScbHorizontalScroller as pr } from "./scb-horizontal-scroller/scb-horizontal-scroller.js";
|
|
32
|
+
import { ScbIconButton as fr } from "./scb-icon-button/scb-icon-button.js";
|
|
33
|
+
import { ScbKeyFigureCard as ir } from "./scb-keyfigure-card/scb-keyfigure-card.js";
|
|
34
|
+
import { ScbLink as nr } from "./scb-link/scb-link.js";
|
|
35
|
+
import { ScbListItem as Cr } from "./scb-list/scb-list-item.js";
|
|
36
|
+
import { ScbList as Ir } from "./scb-list/scb-list.js";
|
|
37
|
+
import { ScbMenuItem as Dr } from "./scb-menu/scb-menu-item.js";
|
|
38
|
+
import { ScbMenu as wr } from "./scb-menu/scb-menu.js";
|
|
39
|
+
import { ScbSubMenu as Fr } from "./scb-menu/scb-sub-menu.js";
|
|
40
|
+
import { ScbNotification as hr } from "./scb-notification/scb-notification.js";
|
|
41
|
+
import { ScbNotificationCard as Gr } from "./scb-notification-card/scb-notification-card.js";
|
|
42
|
+
import { ScbProgressIndicator as Ar } from "./scb-progress-indicator/scb-progress-indicator.js";
|
|
43
|
+
import { ScbRadioButton as Lr } from "./scb-radio-button/scb-radio-button.js";
|
|
44
|
+
import { ScbRadioGroup as Pr } from "./scb-radio-button/scb-radio-group.js";
|
|
45
|
+
import { ScbSearch as Nr } from "./scb-search/scb-search.js";
|
|
46
|
+
import { ScbSnackbar as zr } from "./scb-snackbar/scb-snackbar.js";
|
|
47
|
+
import { ScbStatusPill as Ur } from "./scb-status-pill/scb-status-pill.js";
|
|
48
|
+
import { ScbSwitch as qr } from "./scb-switch/scb-switch.js";
|
|
49
|
+
import { ScbPrimaryTab as Jr } from "./scb-tabs/scb-primary-tab.js";
|
|
50
|
+
import { ScbSecondaryTab as Qr } from "./scb-tabs/scb-secondary-tab.js";
|
|
51
|
+
import { ScbTabs as Wr } from "./scb-tabs/scb-tabs.js";
|
|
52
|
+
import { ScbTextField2 as Yr } from "./scb-textfield/scb-textfield.js";
|
|
53
|
+
import { ScbTocItem as _r } from "./scb-toc/scb-toc-item.js";
|
|
54
|
+
import { ScbToc as ro } from "./scb-toc/scb-toc.js";
|
|
55
|
+
import { ScbTooltip as eo } from "./scb-tooltip/scb-tooltip.js";
|
|
55
56
|
export {
|
|
56
57
|
i as SCBBreadcrumb,
|
|
57
58
|
f as SCBBreadcrumbItem,
|
|
@@ -61,19 +62,19 @@ export {
|
|
|
61
62
|
p as ScbAvatar,
|
|
62
63
|
n as ScbButton,
|
|
63
64
|
C as ScbCalendarCard,
|
|
64
|
-
|
|
65
|
+
I as ScbCard,
|
|
65
66
|
w as ScbCheckbox,
|
|
66
|
-
|
|
67
|
+
D as ScbCheckboxGroup,
|
|
67
68
|
F as ScbChip,
|
|
68
|
-
|
|
69
|
-
|
|
69
|
+
h as ScbDialog,
|
|
70
|
+
G as ScbDivider,
|
|
70
71
|
P as ScbDrawer,
|
|
71
72
|
A as ScbDrawerItem,
|
|
72
73
|
L as ScbDrawerSection,
|
|
73
|
-
|
|
74
|
-
|
|
74
|
+
U as ScbFactCard,
|
|
75
|
+
z as ScbFactCardContent,
|
|
75
76
|
J as ScbFooter,
|
|
76
|
-
|
|
77
|
+
q as ScbFooterSection,
|
|
77
78
|
W as ScbGrid,
|
|
78
79
|
Q as ScbGridItem,
|
|
79
80
|
Sr as ScbHeader,
|
|
@@ -81,30 +82,31 @@ export {
|
|
|
81
82
|
rr as ScbHeaderDrawerItem,
|
|
82
83
|
er as ScbHeaderTab,
|
|
83
84
|
cr as ScbHeaderUtility,
|
|
84
|
-
pr as
|
|
85
|
-
fr as
|
|
86
|
-
ir as
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
Ar as
|
|
96
|
-
Lr as
|
|
97
|
-
Pr as
|
|
98
|
-
|
|
99
|
-
|
|
85
|
+
pr as ScbHorizontalScroller,
|
|
86
|
+
fr as ScbIconButton,
|
|
87
|
+
ir as ScbKeyFigureCard,
|
|
88
|
+
nr as ScbLink,
|
|
89
|
+
Ir as ScbList,
|
|
90
|
+
Cr as ScbListItem,
|
|
91
|
+
wr as ScbMenu,
|
|
92
|
+
Dr as ScbMenuItem,
|
|
93
|
+
hr as ScbNotification,
|
|
94
|
+
Gr as ScbNotificationCard,
|
|
95
|
+
Jr as ScbPrimaryTab,
|
|
96
|
+
Ar as ScbProgressIndicator,
|
|
97
|
+
Lr as ScbRadioButton,
|
|
98
|
+
Pr as ScbRadioGroup,
|
|
99
|
+
Nr as ScbSearch,
|
|
100
|
+
Qr as ScbSecondaryTab,
|
|
101
|
+
zr as ScbSnackbar,
|
|
100
102
|
Y as ScbStack,
|
|
101
|
-
|
|
103
|
+
Ur as ScbStatusPill,
|
|
102
104
|
N as ScbSubDrawer,
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
105
|
+
Fr as ScbSubMenu,
|
|
106
|
+
qr as ScbSwitch,
|
|
107
|
+
Wr as ScbTabs,
|
|
108
|
+
Yr as ScbTextField2,
|
|
109
|
+
ro as ScbToc,
|
|
110
|
+
_r as ScbTocItem,
|
|
111
|
+
eo as ScbTooltip
|
|
110
112
|
};
|
package/mvc/components/all.js
CHANGED
|
@@ -28,6 +28,7 @@ import './scb-header/scb-header-drawer-group.js';
|
|
|
28
28
|
import './scb-header/scb-header-drawer-item.js';
|
|
29
29
|
import './scb-header/scb-header-tab.js';
|
|
30
30
|
import './scb-header/scb-header-utility.js';
|
|
31
|
+
import './scb-horizontal-scroller/scb-horizontal-scroller.js';
|
|
31
32
|
import './scb-icon-button/scb-icon-button.js';
|
|
32
33
|
import './scb-keyfigure-card/scb-keyfigure-card.js';
|
|
33
34
|
import './scb-link/scb-link.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as h,n as d,i as c,x as r,t as
|
|
1
|
+
import{a as h,n as d,i as c,x as r,t as g}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-search/scb-search.js";import"../scb-avatar/scb-avatar.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";import"../scb-list/scb-list.js";import"../scb-list/scb-list-item.js";(function(){try{var a=typeof globalThis<"u"?globalThis:window;if(!a.__scb_ce_guard_installed__){a.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(i,e,t){try{customElements.get(i)||s(i,e,t)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var m=Object.defineProperty,f=Object.getOwnPropertyDescriptor,p=(a,s,i,e)=>{for(var t=e>1?void 0:e?f(s,i):s,n=a.length-1,o;n>=0;n--)(o=a[n])&&(t=(e?o(s,i,t):o(t))||t);return e&&t&&m(s,i,t),t};let l=class extends c{constructor(){super(...arguments),this.title="App title",this.type="default",this.position="default",this.searchSupportingText=""}handleAvatarSlotChange(a){a.target.assignedElements({flatten:!0}).forEach(e=>{e.tagName==="SCB-AVATAR"&&e.setAttribute("size","small")})}render(){switch(this.type){case"small-flexible":return r`
|
|
2
2
|
<header class="small-flexible ${this.position=="bottom"?"position-bottom":this.position=="top"?"position-top":""}" role="banner" aria-label="Small app bar">
|
|
3
3
|
<div class="leading">
|
|
4
4
|
<slot name="leading"></slot>
|
|
@@ -6,6 +6,7 @@ import{a as h,n as d,i as c,x as r,t as m}from"../../vendor/vendor.js";import"..
|
|
|
6
6
|
<h1 class="headline">${this.title}</h1>
|
|
7
7
|
<div class="trailing">
|
|
8
8
|
<slot name="trailing"></slot>
|
|
9
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
9
10
|
</div>
|
|
10
11
|
</header>
|
|
11
12
|
`;case"medium-flexible":return r`
|
|
@@ -16,6 +17,7 @@ import{a as h,n as d,i as c,x as r,t as m}from"../../vendor/vendor.js";import"..
|
|
|
16
17
|
</div>
|
|
17
18
|
<div>
|
|
18
19
|
<slot name="trailing"></slot>
|
|
20
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
19
21
|
</div>
|
|
20
22
|
</div>
|
|
21
23
|
<h1 class="headline">${this.title}</h1>
|
|
@@ -28,6 +30,7 @@ import{a as h,n as d,i as c,x as r,t as m}from"../../vendor/vendor.js";import"..
|
|
|
28
30
|
</div>
|
|
29
31
|
<div style="">
|
|
30
32
|
<slot name="trailing"></slot>
|
|
33
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
31
34
|
</div>
|
|
32
35
|
</div>
|
|
33
36
|
<h1 class="headline">${this.title}</h1>
|
|
@@ -42,6 +45,7 @@ import{a as h,n as d,i as c,x as r,t as m}from"../../vendor/vendor.js";import"..
|
|
|
42
45
|
</div>
|
|
43
46
|
<div class="trailing">
|
|
44
47
|
<slot name="trailing"></slot>
|
|
48
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
45
49
|
</div>
|
|
46
50
|
</header>
|
|
47
51
|
`;default:return r`
|
|
@@ -52,38 +56,40 @@ import{a as h,n as d,i as c,x as r,t as m}from"../../vendor/vendor.js";import"..
|
|
|
52
56
|
<h1 class="headline">${this.title}</h1>
|
|
53
57
|
<div class="trailing">
|
|
54
58
|
<slot name="trailing"></slot>
|
|
59
|
+
<slot name="avatar" @slotchange=${this.handleAvatarSlotChange}></slot>
|
|
55
60
|
</div>
|
|
56
61
|
</header>
|
|
57
|
-
`}}};
|
|
62
|
+
`}}};l.styles=[h`
|
|
58
63
|
:host {
|
|
59
64
|
display: block;
|
|
60
65
|
position: relative;
|
|
61
66
|
container-type: inline-size;
|
|
62
67
|
container-name: app-bar-container;
|
|
68
|
+
--app-search-height: 64px;
|
|
63
69
|
}
|
|
64
70
|
header {
|
|
65
71
|
background: var(--md-sys-color-surface-container);
|
|
66
72
|
color: var(--md-sys-color-on-surface);
|
|
67
73
|
display: flex;
|
|
68
74
|
align-items: center;
|
|
69
|
-
padding: 0
|
|
75
|
+
padding: 0 var(--spacing-5);
|
|
70
76
|
position: relative;
|
|
71
77
|
z-index: 10;
|
|
72
78
|
transition: height 0.3s;
|
|
73
|
-
min-height:
|
|
79
|
+
min-height: var(--app-search-height);
|
|
74
80
|
}
|
|
75
81
|
header.search {
|
|
76
|
-
height:
|
|
82
|
+
height: var(--app-search-height);
|
|
77
83
|
}
|
|
78
84
|
header.medium-flexible {
|
|
79
85
|
flex-direction: column;
|
|
80
86
|
align-items: flex-start;
|
|
81
|
-
padding:
|
|
87
|
+
padding: var(--spacing-5);
|
|
82
88
|
}
|
|
83
89
|
header.large-flexible {
|
|
84
90
|
flex-direction: column;
|
|
85
91
|
align-items: flex-start;
|
|
86
|
-
padding:
|
|
92
|
+
padding: var(--spacing-5);
|
|
87
93
|
}
|
|
88
94
|
header.position-top {
|
|
89
95
|
position: fixed;
|
|
@@ -102,36 +108,36 @@ import{a as h,n as d,i as c,x as r,t as m}from"../../vendor/vendor.js";import"..
|
|
|
102
108
|
.headline {
|
|
103
109
|
flex: 1 1 auto;
|
|
104
110
|
text-align: center;
|
|
105
|
-
font-size:
|
|
111
|
+
font-size: var(--md-sys-typescale-title-large-size);
|
|
106
112
|
font-weight: 600;
|
|
107
113
|
margin: 0;
|
|
108
114
|
}
|
|
109
115
|
header.small-flexible .headline {
|
|
110
116
|
text-align: left;
|
|
111
|
-
margin-left:
|
|
117
|
+
margin-left: var(--spacing-5);
|
|
112
118
|
}
|
|
113
119
|
header.medium-flexible .headline {
|
|
114
|
-
font-size:
|
|
115
|
-
line-height: 30px;
|
|
120
|
+
font-size: var(--md-sys-typescale-headline-small-size);
|
|
121
|
+
line-height: 30px; /* denna variabel finns inte, men sätts i figma.. --md-sys-typescale-headline-small-Line-Height2 */
|
|
116
122
|
font-weight: 700;
|
|
117
|
-
letter-spacing: -
|
|
123
|
+
letter-spacing: var(--md-sys-typescale-headline-small-Tracking);
|
|
118
124
|
text-align: left;
|
|
119
|
-
margin:
|
|
125
|
+
margin: var(--spacing-3) 0 0 var(--spacing-3);
|
|
120
126
|
}
|
|
121
127
|
header.large-flexible .headline {
|
|
122
|
-
font-size:
|
|
128
|
+
font-size: var(--md-sys-typescale-headline-medium-size);
|
|
123
129
|
font-weight: 700;
|
|
124
|
-
line-height:
|
|
125
|
-
letter-spacing: -
|
|
130
|
+
line-height: var(--md-sys-typescale-headline-medium-Line-Height);
|
|
131
|
+
letter-spacing: var(--md-sys-typescale-headline-medium-Tracking);
|
|
126
132
|
text-align: left;
|
|
127
|
-
margin:
|
|
133
|
+
margin: var(--spacing-8) 0 0 var(--spacing-3);
|
|
128
134
|
}
|
|
129
135
|
.search-container {
|
|
130
136
|
flex: 1 1 auto;
|
|
131
137
|
display: flex;
|
|
132
138
|
align-items: center;
|
|
133
139
|
justify-content: center;
|
|
134
|
-
padding: 0
|
|
140
|
+
padding: 0 var(--spacing-3);
|
|
135
141
|
}
|
|
136
142
|
.action-elements {
|
|
137
143
|
width: 100%;
|
|
@@ -139,6 +145,10 @@ import{a as h,n as d,i as c,x as r,t as m}from"../../vendor/vendor.js";import"..
|
|
|
139
145
|
flex-direction: row;
|
|
140
146
|
justify-content: space-between;
|
|
141
147
|
align-items: center;
|
|
142
|
-
margin-bottom:
|
|
148
|
+
margin-bottom: var(--spacing-3);
|
|
143
149
|
}
|
|
144
|
-
|
|
150
|
+
.trailing{
|
|
151
|
+
display: flex;
|
|
152
|
+
align-items: center;
|
|
153
|
+
}
|
|
154
|
+
`];p([d({type:String})],l.prototype,"title",2);p([d({type:String})],l.prototype,"type",2);p([d({type:String,reflect:!0})],l.prototype,"position",2);p([d({type:String,attribute:"search-supporting-text"})],l.prototype,"searchSupportingText",2);l=p([g("scb-app-bar")],l);
|
|
@@ -1,17 +1,9 @@
|
|
|
1
|
-
import{n as l,t as p,i as b,a as
|
|
1
|
+
import{n as l,t as p,i as b,a as f,x as u}from"../../vendor/vendor.js";import"../scb-link/scb-link.js";import"../../vendor/vendor-material.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(r,s,e){try{customElements.get(r)||t(r,s,e)}catch(n){var a=String(n||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var d=Object.defineProperty,m=Object.getOwnPropertyDescriptor,o=(i,t,r,s)=>{for(var e=s>1?void 0:s?m(t,r):t,a=i.length-1,n;a>=0;a--)(n=i[a])&&(e=(s?n(t,r,e):n(e))||e);return s&&e&&d(t,r,e),e};let c=class extends b{constructor(){super(...arguments),this.label="",this.isCurrent=!1,this.href=""}static get styles(){return f`
|
|
2
2
|
.breadcrumb-separator {
|
|
3
|
-
margin: 0
|
|
3
|
+
margin: var(--spacing-0) var(--spacing-3);
|
|
4
4
|
color: var(--md-sys-color-on-surface);
|
|
5
5
|
}
|
|
6
|
-
.breadcrumb-link {
|
|
7
|
-
color: var(--md-sys-color-primary);
|
|
8
|
-
text-decoration-thickness: 1px;
|
|
9
|
-
|
|
10
|
-
}
|
|
11
|
-
.breadcrumb-link:hover {
|
|
12
|
-
text-decoration-thickness: 2px;
|
|
13
|
-
}
|
|
14
6
|
`}render(){switch(!0){case this.isCurrent:return u`<span class="breadcrumb-current">${this.label}</span>`;default:return u`
|
|
15
7
|
<scb-link href="${this.href}">${this.label}</scb-link>
|
|
16
8
|
<span class="breadcrumb-separator">/</span>
|
|
17
|
-
`}}};
|
|
9
|
+
`}}};o([l({type:String})],c.prototype,"label",2);o([l({type:Boolean,attribute:"is-current"})],c.prototype,"isCurrent",2);o([l({type:String,attribute:"item-href"})],c.prototype,"href",2);c=o([p("scb-breadcrumb-item")],c);
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import{n as d,t as
|
|
1
|
+
import{n as d,t as b,i as m,a as p,x as o}from"../../vendor/vendor.js";import"./scb-breadcrumb-item.js";import"../../vendor/vendor-material.js";import"../scb-link/scb-link.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(s,t,a){try{customElements.get(s)||r(s,t,a)}catch(l){var i=String(l||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw l}}}}catch{}})();var u=Object.defineProperty,h=Object.getOwnPropertyDescriptor,c=(e,r,s,t)=>{for(var a=t>1?void 0:t?h(r,s):r,i=e.length-1,l;i>=0;i--)(l=e[i])&&(a=(t?l(r,s,a):l(a))||a);return t&&a&&u(r,s,a),a};let n=class extends m{constructor(){super(...arguments),this.showAll=!1}static get styles(){return p`
|
|
2
2
|
.scb-breadcrumb {
|
|
3
3
|
display: flex;
|
|
4
4
|
align-items: center;
|
|
5
5
|
flex-wrap: wrap;
|
|
6
6
|
}
|
|
7
7
|
.breadcrumb-separator {
|
|
8
|
-
margin: 0
|
|
8
|
+
margin: var(--spacing-0) var(--spacing-3);
|
|
9
9
|
color: var(--md-sys-color-on-surface);
|
|
10
10
|
}
|
|
11
11
|
.collapsed > scb-breadcrumb-item {
|
|
@@ -13,7 +13,8 @@ import{n as d,t as m,i as p,a as b,x as o}from"../../vendor/vendor.js";import"./
|
|
|
13
13
|
}
|
|
14
14
|
.collapsed > scb-breadcrumb-item:nth-child(-n+3),
|
|
15
15
|
.collapsed > scb-breadcrumb-item:nth-last-child(-n+3) {
|
|
16
|
-
display:
|
|
16
|
+
display: flex;
|
|
17
|
+
align-items: anchor-center;
|
|
17
18
|
}
|
|
18
19
|
.ellipsis:focus {
|
|
19
20
|
outline: none;
|
|
@@ -51,9 +52,9 @@ import{n as d,t as m,i as p,a as b,x as o}from"../../vendor/vendor.js";import"./
|
|
|
51
52
|
transform: translateY(0);
|
|
52
53
|
}
|
|
53
54
|
}
|
|
54
|
-
`}_onEllipsisClick(){this.showAll?this.showAll=!1:(this.showAll=!0,this.updateComplete.then(()=>{const e=this.shadowRoot?.querySelectorAll(".scb-breadcrumb.expanded > scb-breadcrumb-item");e&&(e.forEach((r,s)=>{r.classList.add("breadcrumb-animate"),r.style.animationDelay=`${s*60}ms`}),setTimeout(()=>{e.forEach(r=>{r.classList.remove("breadcrumb-animate"),r.style.animationDelay=""})},600))}))}render(){let e=[];this.children.length||(e=Array.from(this.shadowRoot?this.shadowRoot.querySelectorAll("scb-breadcrumb-item"):[])),e.length||(e=Array.from(this.children).filter(s=>s.tagName.toLowerCase()==="scb-breadcrumb-item")),e.length>0&&e[e.length-1].setAttribute("is-current","true");const r=e.length>6&&!this.showAll;return o`
|
|
55
|
+
`}_onEllipsisClick(){this.showAll?this.showAll=!1:(this.showAll=!0,this.updateComplete.then(()=>{const e=this.shadowRoot?.querySelectorAll(".scb-breadcrumb.expanded > scb-breadcrumb-item");e&&(e.forEach((r,s)=>{r.classList.add("breadcrumb-animate"),r.style.animationDelay=`${s*60}ms`}),setTimeout(()=>{e.forEach(r=>{r.classList.remove("breadcrumb-animate"),r.style.animationDelay=""})},600))}))}connectedCallback(){super.connectedCallback(),this._observer=new MutationObserver(()=>{this.requestUpdate()}),this._observer.observe(this,{childList:!0})}disconnectedCallback(){super.disconnectedCallback(),this._observer?.disconnect()}render(){let e=[];this.children.length||(e=Array.from(this.shadowRoot?this.shadowRoot.querySelectorAll("scb-breadcrumb-item"):[])),e.length||(e=Array.from(this.children).filter(s=>s.tagName.toLowerCase()==="scb-breadcrumb-item")),e.length>0&&e[e.length-1].setAttribute("is-current","true");const r=e.length>6&&!this.showAll;return o`
|
|
55
56
|
<div class="scb-breadcrumb ${r?"collapsed":"expanded"}">
|
|
56
|
-
${r?e.map((s,
|
|
57
|
+
${r?e.map((s,t)=>t===3?o`<span
|
|
57
58
|
class="ellipsis"
|
|
58
59
|
aria-label="Visa alla"
|
|
59
60
|
role="button"
|
|
@@ -62,4 +63,4 @@ import{n as d,t as m,i as p,a as b,x as o}from"../../vendor/vendor.js";import"./
|
|
|
62
63
|
@keydown=${a=>{(a.key==="Enter"||a.key===" ")&&this._onEllipsisClick()}}
|
|
63
64
|
><md-icon><md-focus-ring></md-focus-ring>more_horiz</md-icon></span><span class="breadcrumb-separator">/</span>${s}`:o`${s}`):e.map(s=>s)}
|
|
64
65
|
</div>
|
|
65
|
-
`}};c([d({type:Boolean})],n.prototype,"showAll",2);n=c([
|
|
66
|
+
`}};c([d({type:Boolean})],n.prototype,"showAll",2);n=c([b("scb-breadcrumb")],n);
|