scb-wc-test 0.1.79 → 0.1.81
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/mvc/components/scb-snackbar/scb-snackbar.js +123 -85
- package/package.json +2 -2
- package/scb-snackbar/scb-snackbar.d.ts +1 -1
- package/scb-snackbar/scb-snackbar.js +155 -102
- package/scb-wc-test.bundle.js +123 -85
|
@@ -1,85 +1,123 @@
|
|
|
1
|
-
import{a as p,n as r,i as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
`
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
1
|
+
import{a as p,n as r,i as u,x as a,t as m}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-tooltip/scb-tooltip.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(t,c,i){try{customElements.get(t)||o(t,c,i)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var b=Object.defineProperty,h=Object.getOwnPropertyDescriptor,n=(e,o,t,c)=>{for(var i=c>1?void 0:c?h(o,t):o,l=e.length-1,d;l>=0;l--)(d=e[l])&&(i=(c?d(o,t,i):d(i))||i);return c&&i&&b(o,t,i),i};let s=class extends u{constructor(){super(...arguments),this.message="",this.open=!1,this.actionText="",this.showClose=!1,this.fixed=!1,this.fadeout=!1,this.withLongerAction=!1}handleAction(){this.dispatchEvent(new CustomEvent("snackbar-action",{bubbles:!0,composed:!0})),this.open=!1}handleClose(){this.open=!1}updated(e){super.updated(e),e.has("open")&&(this.open?this.dispatchEvent(new CustomEvent("snackbar-open",{bubbles:!0,composed:!0})):this.dispatchEvent(new CustomEvent("snackbar-close",{bubbles:!0,composed:!0}))),(e.has("open")||e.has("fadeout"))&&(this.open&&this.fadeout?(window.clearTimeout(this._fadeoutTimer),this._fadeoutTimer=window.setTimeout(()=>{this.open=!1},5e3)):window.clearTimeout(this._fadeoutTimer))}render(){const e=!!this.actionText,o=!!this.showClose;let t="snackbar";return!e&&!o&&(t+=" no-actions"),this.withLongerAction&&(t+=" longer-action"),a`
|
|
2
|
+
<div class="${t}" ?hidden=${!this.open}>
|
|
3
|
+
${this.withLongerAction?a`
|
|
4
|
+
<div class="message">${this.message}</div>
|
|
5
|
+
<div class="actions">
|
|
6
|
+
${e?a`
|
|
7
|
+
<scb-button
|
|
8
|
+
variant="text"
|
|
9
|
+
label=${this.actionText}
|
|
10
|
+
@click=${this.handleAction}
|
|
11
|
+
></scb-button>
|
|
12
|
+
`:""}
|
|
13
|
+
${o?a`
|
|
14
|
+
<scb-icon-button
|
|
15
|
+
icon="close"
|
|
16
|
+
@click=${this.handleClose}
|
|
17
|
+
aria-label="Stäng"
|
|
18
|
+
></scb-icon-button>
|
|
19
|
+
`:""}
|
|
20
|
+
</div>
|
|
21
|
+
`:a`
|
|
22
|
+
<span class="message">${this.message}</span>
|
|
23
|
+
${e?a`
|
|
24
|
+
<scb-button
|
|
25
|
+
variant="text"
|
|
26
|
+
label=${this.actionText}
|
|
27
|
+
@click=${this.handleAction}
|
|
28
|
+
></scb-button>
|
|
29
|
+
`:""}
|
|
30
|
+
${o?a`
|
|
31
|
+
<scb-icon-button
|
|
32
|
+
icon="close"
|
|
33
|
+
@click=${this.handleClose}
|
|
34
|
+
aria-label="Stäng"
|
|
35
|
+
></scb-icon-button>
|
|
36
|
+
`:""}
|
|
37
|
+
`}
|
|
38
|
+
</div>
|
|
39
|
+
`}};s.styles=p`
|
|
40
|
+
:host {
|
|
41
|
+
position: relative;
|
|
42
|
+
display: block;
|
|
43
|
+
min-width: 312px;
|
|
44
|
+
max-width: 560px;
|
|
45
|
+
font-family: var(--brand-font, 'Inter', sans-serif);
|
|
46
|
+
}
|
|
47
|
+
:host([fixed]) {
|
|
48
|
+
position: fixed;
|
|
49
|
+
z-index: 9999;
|
|
50
|
+
left: 50%;
|
|
51
|
+
bottom: 24px;
|
|
52
|
+
transform: translateX(-50%);
|
|
53
|
+
}
|
|
54
|
+
.snackbar {
|
|
55
|
+
background: var(--md-sys-color-inverse-surface);
|
|
56
|
+
color: var(--md-sys-color-inverse-on-surface);
|
|
57
|
+
border-radius: var(--md-sys-shape-corner-extra-small);
|
|
58
|
+
box-shadow:
|
|
59
|
+
0 4px 8px 3px rgba(0, 0, 0, 0.15),
|
|
60
|
+
0 1px 3px 0 rgba(0, 0, 0, 0.3);
|
|
61
|
+
display: flex;
|
|
62
|
+
align-items: center;
|
|
63
|
+
padding: 14px var(--spacing-5);
|
|
64
|
+
opacity: 0;
|
|
65
|
+
transition: opacity 0.3s, bottom 0.3s;
|
|
66
|
+
pointer-events: auto;
|
|
67
|
+
position: relative;
|
|
68
|
+
}
|
|
69
|
+
.snackbar.longer-action {
|
|
70
|
+
flex-direction: column;
|
|
71
|
+
align-items: flex-start;
|
|
72
|
+
}
|
|
73
|
+
.snackbar .actions {
|
|
74
|
+
display: flex;
|
|
75
|
+
margin-top: 10px;
|
|
76
|
+
width: 100%;
|
|
77
|
+
justify-content: flex-end;
|
|
78
|
+
}
|
|
79
|
+
.message.no-actions {
|
|
80
|
+
margin-right: 0;
|
|
81
|
+
}
|
|
82
|
+
:host([open]) .snackbar {
|
|
83
|
+
opacity: 1;
|
|
84
|
+
pointer-events: auto;
|
|
85
|
+
}
|
|
86
|
+
.message {
|
|
87
|
+
flex: 1 1 auto;
|
|
88
|
+
margin-right: var(--spacing-2);
|
|
89
|
+
font-size: var(--md-sys-typescale-body-medium-size);
|
|
90
|
+
line-height: var(--md-sys-typescale-body-medium-line-height);
|
|
91
|
+
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
92
|
+
}
|
|
93
|
+
.snackbar scb-icon-button {
|
|
94
|
+
--md-icon-button-icon-color: var(--md-sys-color-inverse-on-surface);
|
|
95
|
+
--md-icon-button-hover-icon-color: var(--md-sys-color-inverse-on-surface);
|
|
96
|
+
--md-icon-button-hover-state-layer-color: var(
|
|
97
|
+
--md-sys-color-surface-container
|
|
98
|
+
);
|
|
99
|
+
--md-icon-button-focus-icon-color: var(
|
|
100
|
+
--md-sys-color-inverse-on-surface
|
|
101
|
+
);
|
|
102
|
+
--md-icon-button-pressed-icon-color: var(
|
|
103
|
+
--md-sys-color-inverse-on-surface
|
|
104
|
+
);
|
|
105
|
+
--md-focus-ring-color: var(--md-sys-color-inverse-on-surface);
|
|
106
|
+
}
|
|
107
|
+
.snackbar scb-button {
|
|
108
|
+
--md-text-button-label-text-color: var(--md-sys-color-inverse-primary);
|
|
109
|
+
--md-text-button-hover-label-text-color: var(
|
|
110
|
+
--md-sys-color-inverse-primary
|
|
111
|
+
);
|
|
112
|
+
--md-text-button-hover-state-layer-color: var(
|
|
113
|
+
--md-sys-color-surface-container
|
|
114
|
+
);
|
|
115
|
+
--md-text-button-focus-label-text-color: var(
|
|
116
|
+
--md-sys-color-inverse-primary
|
|
117
|
+
);
|
|
118
|
+
--md-text-button-pressed-label-text-color: var(
|
|
119
|
+
--md-sys-color-inverse-primary
|
|
120
|
+
);
|
|
121
|
+
--md-focus-ring-color: var(--md-sys-color-inverse-on-surface);
|
|
122
|
+
}
|
|
123
|
+
`;n([r({type:String})],s.prototype,"message",2);n([r({type:Boolean,reflect:!0})],s.prototype,"open",2);n([r({type:String,attribute:"action-text"})],s.prototype,"actionText",2);n([r({type:Boolean,attribute:"show-close"})],s.prototype,"showClose",2);n([r({type:Boolean,reflect:!0})],s.prototype,"fixed",2);n([r({type:Boolean})],s.prototype,"fadeout",2);n([r({type:Boolean,attribute:"with-longer-action"})],s.prototype,"withLongerAction",2);s=n([m("scb-snackbar")],s);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.81",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -304,5 +304,5 @@
|
|
|
304
304
|
},
|
|
305
305
|
"./mvc/*": "./mvc/*"
|
|
306
306
|
},
|
|
307
|
-
"buildHash": "
|
|
307
|
+
"buildHash": "A38DABAC9665BE119E5B3B7C63AE434921E42435382A84E408E7BCCC8A9DA755"
|
|
308
308
|
}
|
|
@@ -11,6 +11,6 @@ export declare class ScbSnackbar extends LitElement {
|
|
|
11
11
|
static styles: import('lit').CSSResult;
|
|
12
12
|
private handleAction;
|
|
13
13
|
private handleClose;
|
|
14
|
-
updated(changedProps: Map<string,
|
|
14
|
+
updated(changedProps: Map<string, unknown>): void;
|
|
15
15
|
render(): import('lit-html').TemplateResult<1>;
|
|
16
16
|
}
|
|
@@ -1,141 +1,194 @@
|
|
|
1
1
|
import { css as d, LitElement as m, html as a } from "lit";
|
|
2
|
-
import { property as
|
|
2
|
+
import { property as i, customElement as u } from "lit/decorators.js";
|
|
3
3
|
import "../scb-icon-button/scb-icon-button.js";
|
|
4
4
|
import "../scb-button/scb-button.js";
|
|
5
|
-
var
|
|
6
|
-
for (var
|
|
7
|
-
(p = t[l]) && (
|
|
8
|
-
return c &&
|
|
5
|
+
var b = Object.defineProperty, h = Object.getOwnPropertyDescriptor, s = (t, o, n, c) => {
|
|
6
|
+
for (var r = c > 1 ? void 0 : c ? h(o, n) : o, l = t.length - 1, p; l >= 0; l--)
|
|
7
|
+
(p = t[l]) && (r = (c ? p(o, n, r) : p(r)) || r);
|
|
8
|
+
return c && r && b(o, n, r), r;
|
|
9
9
|
};
|
|
10
10
|
let e = class extends m {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments), this.message = "", this.open = !1, this.actionText = "", this.showClose = !1, this.fixed = !1, this.fadeout = !1, this.withLongerAction = !1;
|
|
13
13
|
}
|
|
14
14
|
handleAction() {
|
|
15
|
-
this.dispatchEvent(
|
|
15
|
+
this.dispatchEvent(
|
|
16
|
+
new CustomEvent("snackbar-action", {
|
|
17
|
+
bubbles: !0,
|
|
18
|
+
composed: !0
|
|
19
|
+
})
|
|
20
|
+
), this.open = !1;
|
|
16
21
|
}
|
|
17
22
|
handleClose() {
|
|
18
|
-
this.
|
|
23
|
+
this.open = !1;
|
|
19
24
|
}
|
|
20
25
|
updated(t) {
|
|
21
|
-
super.updated(t), t.has("open") && (this.open ? this.dispatchEvent(
|
|
26
|
+
super.updated(t), t.has("open") && (this.open ? this.dispatchEvent(
|
|
27
|
+
new CustomEvent("snackbar-open", {
|
|
28
|
+
bubbles: !0,
|
|
29
|
+
composed: !0
|
|
30
|
+
})
|
|
31
|
+
) : this.dispatchEvent(
|
|
32
|
+
new CustomEvent("snackbar-close", {
|
|
33
|
+
bubbles: !0,
|
|
34
|
+
composed: !0
|
|
35
|
+
})
|
|
36
|
+
)), (t.has("open") || t.has("fadeout")) && (this.open && this.fadeout ? (window.clearTimeout(this._fadeoutTimer), this._fadeoutTimer = window.setTimeout(() => {
|
|
22
37
|
this.open = !1;
|
|
23
38
|
}, 5e3)) : window.clearTimeout(this._fadeoutTimer));
|
|
24
39
|
}
|
|
25
40
|
render() {
|
|
26
41
|
const t = !!this.actionText, o = !!this.showClose;
|
|
27
|
-
let
|
|
28
|
-
return !t && !o && (
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
`
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
let n = "snackbar";
|
|
43
|
+
return !t && !o && (n += " no-actions"), this.withLongerAction && (n += " longer-action"), a`
|
|
44
|
+
<div class="${n}" ?hidden=${!this.open}>
|
|
45
|
+
${this.withLongerAction ? a`
|
|
46
|
+
<div class="message">${this.message}</div>
|
|
47
|
+
<div class="actions">
|
|
48
|
+
${t ? a`
|
|
49
|
+
<scb-button
|
|
50
|
+
variant="text"
|
|
51
|
+
label=${this.actionText}
|
|
52
|
+
@click=${this.handleAction}
|
|
53
|
+
></scb-button>
|
|
54
|
+
` : ""}
|
|
55
|
+
${o ? a`
|
|
56
|
+
<scb-icon-button
|
|
57
|
+
icon="close"
|
|
58
|
+
@click=${this.handleClose}
|
|
59
|
+
aria-label="Stäng"
|
|
60
|
+
></scb-icon-button>
|
|
61
|
+
` : ""}
|
|
62
|
+
</div>
|
|
63
|
+
` : a`
|
|
64
|
+
<span class="message">${this.message}</span>
|
|
65
|
+
${t ? a`
|
|
66
|
+
<scb-button
|
|
67
|
+
variant="text"
|
|
68
|
+
label=${this.actionText}
|
|
69
|
+
@click=${this.handleAction}
|
|
70
|
+
></scb-button>
|
|
71
|
+
` : ""}
|
|
72
|
+
${o ? a`
|
|
73
|
+
<scb-icon-button
|
|
74
|
+
icon="close"
|
|
75
|
+
@click=${this.handleClose}
|
|
76
|
+
aria-label="Stäng"
|
|
77
|
+
></scb-icon-button>
|
|
78
|
+
` : ""}
|
|
79
|
+
`}
|
|
80
|
+
</div>
|
|
81
|
+
`;
|
|
44
82
|
}
|
|
45
83
|
};
|
|
46
84
|
e.styles = d`
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
85
|
+
:host {
|
|
86
|
+
position: relative;
|
|
87
|
+
display: block;
|
|
88
|
+
min-width: 312px;
|
|
89
|
+
max-width: 560px;
|
|
90
|
+
font-family: var(--brand-font, 'Inter', sans-serif);
|
|
91
|
+
}
|
|
92
|
+
:host([fixed]) {
|
|
93
|
+
position: fixed;
|
|
94
|
+
z-index: 9999;
|
|
95
|
+
left: 50%;
|
|
96
|
+
bottom: 24px;
|
|
97
|
+
transform: translateX(-50%);
|
|
98
|
+
}
|
|
99
|
+
.snackbar {
|
|
100
|
+
background: var(--md-sys-color-inverse-surface);
|
|
101
|
+
color: var(--md-sys-color-inverse-on-surface);
|
|
102
|
+
border-radius: var(--md-sys-shape-corner-extra-small);
|
|
103
|
+
box-shadow:
|
|
104
|
+
0 4px 8px 3px rgba(0, 0, 0, 0.15),
|
|
105
|
+
0 1px 3px 0 rgba(0, 0, 0, 0.3);
|
|
106
|
+
display: flex;
|
|
107
|
+
align-items: center;
|
|
108
|
+
padding: 14px var(--spacing-5);
|
|
109
|
+
opacity: 0;
|
|
110
|
+
transition: opacity 0.3s, bottom 0.3s;
|
|
111
|
+
pointer-events: auto;
|
|
112
|
+
position: relative;
|
|
113
|
+
}
|
|
114
|
+
.snackbar.longer-action {
|
|
115
|
+
flex-direction: column;
|
|
116
|
+
align-items: flex-start;
|
|
117
|
+
}
|
|
118
|
+
.snackbar .actions {
|
|
119
|
+
display: flex;
|
|
120
|
+
margin-top: 10px;
|
|
121
|
+
width: 100%;
|
|
122
|
+
justify-content: flex-end;
|
|
123
|
+
}
|
|
124
|
+
.message.no-actions {
|
|
125
|
+
margin-right: 0;
|
|
126
|
+
}
|
|
127
|
+
:host([open]) .snackbar {
|
|
128
|
+
opacity: 1;
|
|
129
|
+
pointer-events: auto;
|
|
130
|
+
}
|
|
131
|
+
.message {
|
|
132
|
+
flex: 1 1 auto;
|
|
133
|
+
margin-right: var(--spacing-2);
|
|
134
|
+
font-size: var(--md-sys-typescale-body-medium-size);
|
|
135
|
+
line-height: var(--md-sys-typescale-body-medium-line-height);
|
|
136
|
+
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
137
|
+
}
|
|
138
|
+
.snackbar scb-icon-button {
|
|
139
|
+
--md-icon-button-icon-color: var(--md-sys-color-inverse-on-surface);
|
|
140
|
+
--md-icon-button-hover-icon-color: var(--md-sys-color-inverse-on-surface);
|
|
141
|
+
--md-icon-button-hover-state-layer-color: var(
|
|
142
|
+
--md-sys-color-surface-container
|
|
143
|
+
);
|
|
144
|
+
--md-icon-button-focus-icon-color: var(
|
|
145
|
+
--md-sys-color-inverse-on-surface
|
|
146
|
+
);
|
|
147
|
+
--md-icon-button-pressed-icon-color: var(
|
|
148
|
+
--md-sys-color-inverse-on-surface
|
|
149
|
+
);
|
|
150
|
+
--md-focus-ring-color: var(--md-sys-color-inverse-on-surface);
|
|
151
|
+
}
|
|
152
|
+
.snackbar scb-button {
|
|
153
|
+
--md-text-button-label-text-color: var(--md-sys-color-inverse-primary);
|
|
154
|
+
--md-text-button-hover-label-text-color: var(
|
|
155
|
+
--md-sys-color-inverse-primary
|
|
156
|
+
);
|
|
157
|
+
--md-text-button-hover-state-layer-color: var(
|
|
158
|
+
--md-sys-color-surface-container
|
|
159
|
+
);
|
|
160
|
+
--md-text-button-focus-label-text-color: var(
|
|
161
|
+
--md-sys-color-inverse-primary
|
|
162
|
+
);
|
|
163
|
+
--md-text-button-pressed-label-text-color: var(
|
|
164
|
+
--md-sys-color-inverse-primary
|
|
165
|
+
);
|
|
166
|
+
--md-focus-ring-color: var(--md-sys-color-inverse-on-surface);
|
|
167
|
+
}
|
|
168
|
+
`;
|
|
116
169
|
s([
|
|
117
|
-
|
|
170
|
+
i({ type: String })
|
|
118
171
|
], e.prototype, "message", 2);
|
|
119
172
|
s([
|
|
120
|
-
|
|
173
|
+
i({ type: Boolean, reflect: !0 })
|
|
121
174
|
], e.prototype, "open", 2);
|
|
122
175
|
s([
|
|
123
|
-
|
|
176
|
+
i({ type: String, attribute: "action-text" })
|
|
124
177
|
], e.prototype, "actionText", 2);
|
|
125
178
|
s([
|
|
126
|
-
|
|
179
|
+
i({ type: Boolean, attribute: "show-close" })
|
|
127
180
|
], e.prototype, "showClose", 2);
|
|
128
181
|
s([
|
|
129
|
-
|
|
182
|
+
i({ type: Boolean, reflect: !0 })
|
|
130
183
|
], e.prototype, "fixed", 2);
|
|
131
184
|
s([
|
|
132
|
-
|
|
185
|
+
i({ type: Boolean })
|
|
133
186
|
], e.prototype, "fadeout", 2);
|
|
134
187
|
s([
|
|
135
|
-
|
|
188
|
+
i({ type: Boolean, attribute: "with-longer-action" })
|
|
136
189
|
], e.prototype, "withLongerAction", 2);
|
|
137
190
|
e = s([
|
|
138
|
-
|
|
191
|
+
u("scb-snackbar")
|
|
139
192
|
], e);
|
|
140
193
|
export {
|
|
141
194
|
e as ScbSnackbar
|
package/scb-wc-test.bundle.js
CHANGED
|
@@ -6287,91 +6287,129 @@ var ScbWcTest=function(a){"use strict";var Es;function d(o,e,t,i){var r=argument
|
|
|
6287
6287
|
::slotted([role="button"]:first-child .segmented-item) {
|
|
6288
6288
|
border-left: 1px solid var(--md-sys-color-outline);
|
|
6289
6289
|
}
|
|
6290
|
-
`,pi([l({type:String,reflect:!0})],a.ScbSegmentedButton.prototype,"variant",2),pi([l({type:String,reflect:!0})],a.ScbSegmentedButton.prototype,"value",2),pi([l({type:Array})],a.ScbSegmentedButton.prototype,"values",2),pi([l({type:Boolean,reflect:!0})],a.ScbSegmentedButton.prototype,"disabled",2),a.ScbSegmentedButton=pi([f("scb-segmented-button")],a.ScbSegmentedButton);var Nh=Object.defineProperty,qh=Object.getOwnPropertyDescriptor,Ge=(o,e,t,i)=>{for(var r=i>1?void 0:i?qh(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&Nh(e,t,r),r};a.ScbSnackbar=class extends y{constructor(){super(...arguments),this.message="",this.open=!1,this.actionText="",this.showClose=!1,this.fixed=!1,this.fadeout=!1,this.withLongerAction=!1}handleAction(){this.dispatchEvent(new CustomEvent("snackbar-action")),this.open=!1}handleClose(){this.
|
|
6291
|
-
|
|
6292
|
-
|
|
6293
|
-
|
|
6294
|
-
|
|
6295
|
-
|
|
6296
|
-
|
|
6297
|
-
|
|
6298
|
-
|
|
6299
|
-
|
|
6300
|
-
|
|
6301
|
-
|
|
6302
|
-
`
|
|
6303
|
-
|
|
6304
|
-
|
|
6305
|
-
|
|
6306
|
-
|
|
6307
|
-
|
|
6308
|
-
|
|
6309
|
-
|
|
6310
|
-
|
|
6311
|
-
|
|
6312
|
-
|
|
6313
|
-
|
|
6314
|
-
|
|
6315
|
-
|
|
6316
|
-
|
|
6317
|
-
|
|
6318
|
-
|
|
6319
|
-
|
|
6320
|
-
|
|
6321
|
-
|
|
6322
|
-
|
|
6323
|
-
|
|
6324
|
-
|
|
6325
|
-
|
|
6326
|
-
|
|
6327
|
-
|
|
6328
|
-
|
|
6329
|
-
|
|
6330
|
-
|
|
6331
|
-
|
|
6332
|
-
|
|
6333
|
-
|
|
6334
|
-
|
|
6335
|
-
|
|
6336
|
-
|
|
6337
|
-
|
|
6338
|
-
|
|
6339
|
-
|
|
6340
|
-
|
|
6341
|
-
|
|
6342
|
-
|
|
6343
|
-
|
|
6344
|
-
|
|
6345
|
-
|
|
6346
|
-
|
|
6347
|
-
|
|
6348
|
-
|
|
6349
|
-
|
|
6350
|
-
|
|
6351
|
-
|
|
6352
|
-
|
|
6353
|
-
|
|
6354
|
-
|
|
6355
|
-
|
|
6356
|
-
|
|
6357
|
-
|
|
6358
|
-
|
|
6359
|
-
|
|
6360
|
-
|
|
6361
|
-
|
|
6362
|
-
|
|
6363
|
-
|
|
6364
|
-
|
|
6365
|
-
|
|
6366
|
-
|
|
6367
|
-
|
|
6368
|
-
|
|
6369
|
-
|
|
6370
|
-
|
|
6371
|
-
|
|
6372
|
-
|
|
6373
|
-
|
|
6374
|
-
|
|
6290
|
+
`,pi([l({type:String,reflect:!0})],a.ScbSegmentedButton.prototype,"variant",2),pi([l({type:String,reflect:!0})],a.ScbSegmentedButton.prototype,"value",2),pi([l({type:Array})],a.ScbSegmentedButton.prototype,"values",2),pi([l({type:Boolean,reflect:!0})],a.ScbSegmentedButton.prototype,"disabled",2),a.ScbSegmentedButton=pi([f("scb-segmented-button")],a.ScbSegmentedButton);var Nh=Object.defineProperty,qh=Object.getOwnPropertyDescriptor,Ge=(o,e,t,i)=>{for(var r=i>1?void 0:i?qh(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&Nh(e,t,r),r};a.ScbSnackbar=class extends y{constructor(){super(...arguments),this.message="",this.open=!1,this.actionText="",this.showClose=!1,this.fixed=!1,this.fadeout=!1,this.withLongerAction=!1}handleAction(){this.dispatchEvent(new CustomEvent("snackbar-action",{bubbles:!0,composed:!0})),this.open=!1}handleClose(){this.open=!1}updated(e){super.updated(e),e.has("open")&&(this.open?this.dispatchEvent(new CustomEvent("snackbar-open",{bubbles:!0,composed:!0})):this.dispatchEvent(new CustomEvent("snackbar-close",{bubbles:!0,composed:!0}))),(e.has("open")||e.has("fadeout"))&&(this.open&&this.fadeout?(window.clearTimeout(this._fadeoutTimer),this._fadeoutTimer=window.setTimeout(()=>{this.open=!1},5e3)):window.clearTimeout(this._fadeoutTimer))}render(){const e=!!this.actionText,t=!!this.showClose;let i="snackbar";return!e&&!t&&(i+=" no-actions"),this.withLongerAction&&(i+=" longer-action"),c`
|
|
6291
|
+
<div class="${i}" ?hidden=${!this.open}>
|
|
6292
|
+
${this.withLongerAction?c`
|
|
6293
|
+
<div class="message">${this.message}</div>
|
|
6294
|
+
<div class="actions">
|
|
6295
|
+
${e?c`
|
|
6296
|
+
<scb-button
|
|
6297
|
+
variant="text"
|
|
6298
|
+
label=${this.actionText}
|
|
6299
|
+
@click=${this.handleAction}
|
|
6300
|
+
></scb-button>
|
|
6301
|
+
`:""}
|
|
6302
|
+
${t?c`
|
|
6303
|
+
<scb-icon-button
|
|
6304
|
+
icon="close"
|
|
6305
|
+
@click=${this.handleClose}
|
|
6306
|
+
aria-label="Stäng"
|
|
6307
|
+
></scb-icon-button>
|
|
6308
|
+
`:""}
|
|
6309
|
+
</div>
|
|
6310
|
+
`:c`
|
|
6311
|
+
<span class="message">${this.message}</span>
|
|
6312
|
+
${e?c`
|
|
6313
|
+
<scb-button
|
|
6314
|
+
variant="text"
|
|
6315
|
+
label=${this.actionText}
|
|
6316
|
+
@click=${this.handleAction}
|
|
6317
|
+
></scb-button>
|
|
6318
|
+
`:""}
|
|
6319
|
+
${t?c`
|
|
6320
|
+
<scb-icon-button
|
|
6321
|
+
icon="close"
|
|
6322
|
+
@click=${this.handleClose}
|
|
6323
|
+
aria-label="Stäng"
|
|
6324
|
+
></scb-icon-button>
|
|
6325
|
+
`:""}
|
|
6326
|
+
`}
|
|
6327
|
+
</div>
|
|
6328
|
+
`}},a.ScbSnackbar.styles=b`
|
|
6329
|
+
:host {
|
|
6330
|
+
position: relative;
|
|
6331
|
+
display: block;
|
|
6332
|
+
min-width: 312px;
|
|
6333
|
+
max-width: 560px;
|
|
6334
|
+
font-family: var(--brand-font, 'Inter', sans-serif);
|
|
6335
|
+
}
|
|
6336
|
+
:host([fixed]) {
|
|
6337
|
+
position: fixed;
|
|
6338
|
+
z-index: 9999;
|
|
6339
|
+
left: 50%;
|
|
6340
|
+
bottom: 24px;
|
|
6341
|
+
transform: translateX(-50%);
|
|
6342
|
+
}
|
|
6343
|
+
.snackbar {
|
|
6344
|
+
background: var(--md-sys-color-inverse-surface);
|
|
6345
|
+
color: var(--md-sys-color-inverse-on-surface);
|
|
6346
|
+
border-radius: var(--md-sys-shape-corner-extra-small);
|
|
6347
|
+
box-shadow:
|
|
6348
|
+
0 4px 8px 3px rgba(0, 0, 0, 0.15),
|
|
6349
|
+
0 1px 3px 0 rgba(0, 0, 0, 0.3);
|
|
6350
|
+
display: flex;
|
|
6351
|
+
align-items: center;
|
|
6352
|
+
padding: 14px var(--spacing-5);
|
|
6353
|
+
opacity: 0;
|
|
6354
|
+
transition: opacity 0.3s, bottom 0.3s;
|
|
6355
|
+
pointer-events: auto;
|
|
6356
|
+
position: relative;
|
|
6357
|
+
}
|
|
6358
|
+
.snackbar.longer-action {
|
|
6359
|
+
flex-direction: column;
|
|
6360
|
+
align-items: flex-start;
|
|
6361
|
+
}
|
|
6362
|
+
.snackbar .actions {
|
|
6363
|
+
display: flex;
|
|
6364
|
+
margin-top: 10px;
|
|
6365
|
+
width: 100%;
|
|
6366
|
+
justify-content: flex-end;
|
|
6367
|
+
}
|
|
6368
|
+
.message.no-actions {
|
|
6369
|
+
margin-right: 0;
|
|
6370
|
+
}
|
|
6371
|
+
:host([open]) .snackbar {
|
|
6372
|
+
opacity: 1;
|
|
6373
|
+
pointer-events: auto;
|
|
6374
|
+
}
|
|
6375
|
+
.message {
|
|
6376
|
+
flex: 1 1 auto;
|
|
6377
|
+
margin-right: var(--spacing-2);
|
|
6378
|
+
font-size: var(--md-sys-typescale-body-medium-size);
|
|
6379
|
+
line-height: var(--md-sys-typescale-body-medium-line-height);
|
|
6380
|
+
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
6381
|
+
}
|
|
6382
|
+
.snackbar scb-icon-button {
|
|
6383
|
+
--md-icon-button-icon-color: var(--md-sys-color-inverse-on-surface);
|
|
6384
|
+
--md-icon-button-hover-icon-color: var(--md-sys-color-inverse-on-surface);
|
|
6385
|
+
--md-icon-button-hover-state-layer-color: var(
|
|
6386
|
+
--md-sys-color-surface-container
|
|
6387
|
+
);
|
|
6388
|
+
--md-icon-button-focus-icon-color: var(
|
|
6389
|
+
--md-sys-color-inverse-on-surface
|
|
6390
|
+
);
|
|
6391
|
+
--md-icon-button-pressed-icon-color: var(
|
|
6392
|
+
--md-sys-color-inverse-on-surface
|
|
6393
|
+
);
|
|
6394
|
+
--md-focus-ring-color: var(--md-sys-color-inverse-on-surface);
|
|
6395
|
+
}
|
|
6396
|
+
.snackbar scb-button {
|
|
6397
|
+
--md-text-button-label-text-color: var(--md-sys-color-inverse-primary);
|
|
6398
|
+
--md-text-button-hover-label-text-color: var(
|
|
6399
|
+
--md-sys-color-inverse-primary
|
|
6400
|
+
);
|
|
6401
|
+
--md-text-button-hover-state-layer-color: var(
|
|
6402
|
+
--md-sys-color-surface-container
|
|
6403
|
+
);
|
|
6404
|
+
--md-text-button-focus-label-text-color: var(
|
|
6405
|
+
--md-sys-color-inverse-primary
|
|
6406
|
+
);
|
|
6407
|
+
--md-text-button-pressed-label-text-color: var(
|
|
6408
|
+
--md-sys-color-inverse-primary
|
|
6409
|
+
);
|
|
6410
|
+
--md-focus-ring-color: var(--md-sys-color-inverse-on-surface);
|
|
6411
|
+
}
|
|
6412
|
+
`,Ge([l({type:String})],a.ScbSnackbar.prototype,"message",2),Ge([l({type:Boolean,reflect:!0})],a.ScbSnackbar.prototype,"open",2),Ge([l({type:String,attribute:"action-text"})],a.ScbSnackbar.prototype,"actionText",2),Ge([l({type:Boolean,attribute:"show-close"})],a.ScbSnackbar.prototype,"showClose",2),Ge([l({type:Boolean,reflect:!0})],a.ScbSnackbar.prototype,"fixed",2),Ge([l({type:Boolean})],a.ScbSnackbar.prototype,"fadeout",2),Ge([l({type:Boolean,attribute:"with-longer-action"})],a.ScbSnackbar.prototype,"withLongerAction",2),a.ScbSnackbar=Ge([f("scb-snackbar")],a.ScbSnackbar);var Vh=Object.defineProperty,Uh=Object.getOwnPropertyDescriptor,vr=(o,e,t,i)=>{for(var r=i>1?void 0:i?Uh(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&Vh(e,t,r),r};a.ScbStatusPill=class extends y{constructor(){super(...arguments),this.status="",this.label="",this.showIcon=!1}render(){return c`
|
|
6375
6413
|
${this.showIcon?this.status==="success"?c`<md-icon>check_circle</md-icon>`:this.status==="warning"?c`<md-icon>warning</md-icon>`:this.status==="error"?c`<md-icon>error</md-icon>`:"":""}
|
|
6376
6414
|
<span class="label">${this.label}</span>
|
|
6377
6415
|
`}},a.ScbStatusPill.styles=b`
|