@universal-material/web 3.1.1 → 3.2.0
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/custom-elements.json +2870 -2847
- package/package.json +1 -1
- package/shared/events/redispatch-event.d.ts +1 -1
- package/shared/events/redispatch-event.d.ts.map +1 -1
- package/shared/events/redispatch-event.js +2 -2
- package/shared/events/redispatch-event.js.map +1 -1
- package/snackbar/snackbar.d.ts +8 -7
- package/snackbar/snackbar.d.ts.map +1 -1
- package/snackbar/snackbar.js +42 -21
- package/snackbar/snackbar.js.map +1 -1
- package/snackbar/snackbar.styles.d.ts.map +1 -1
- package/snackbar/snackbar.styles.js +18 -11
- package/snackbar/snackbar.styles.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const redispatchEvent: (element: Element, event: Event) => boolean;
|
|
1
|
+
export declare const redispatchEvent: (element: Element, event: Event, newType?: string | null) => boolean;
|
|
2
2
|
//# sourceMappingURL=redispatch-event.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"redispatch-event.d.ts","sourceRoot":"","sources":["../../../src/shared/events/redispatch-event.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,GAAI,SAAS,OAAO,EAAE,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"redispatch-event.d.ts","sourceRoot":"","sources":["../../../src/shared/events/redispatch-event.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,GAAI,SAAS,OAAO,EAAE,OAAO,KAAK,EAAE,UAAS,MAAM,GAAG,IAAW,YAe5F,CAAC"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export const redispatchEvent = (element, event) => {
|
|
1
|
+
export const redispatchEvent = (element, event, newType = null) => {
|
|
2
2
|
// For bubbling events in SSR light DOM (or composed), stop their propagation
|
|
3
3
|
// and dispatch the copy.
|
|
4
4
|
if (event.bubbles && (!element.shadowRoot || event.composed)) {
|
|
5
5
|
event.stopPropagation();
|
|
6
6
|
}
|
|
7
|
-
const copy = Reflect.construct(event.constructor, [event.type, event]);
|
|
7
|
+
const copy = Reflect.construct(event.constructor, [newType ?? event.type, event]);
|
|
8
8
|
const dispatched = element.dispatchEvent(copy);
|
|
9
9
|
if (!dispatched) {
|
|
10
10
|
event.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"redispatch-event.js","sourceRoot":"","sources":["../../../src/shared/events/redispatch-event.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,OAAgB,EAAE,KAAY,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"redispatch-event.js","sourceRoot":"","sources":["../../../src/shared/events/redispatch-event.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,OAAgB,EAAE,KAAY,EAAE,UAAyB,IAAI,EAAE,EAAE;IAC/F,6EAA6E;IAC7E,yBAAyB;IACzB,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,UAAU,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC7D,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM,IAAI,GAAU,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IACzF,MAAM,UAAU,GAAG,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAE/C,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC","sourcesContent":["export const redispatchEvent = (element: Element, event: Event, newType: string | null = null) => {\n // For bubbling events in SSR light DOM (or composed), stop their propagation\n // and dispatch the copy.\n if (event.bubbles && (!element.shadowRoot || event.composed)) {\n event.stopPropagation();\n }\n\n const copy: Event = Reflect.construct(event.constructor, [newType ?? event.type, event]);\n const dispatched = element.dispatchEvent(copy);\n\n if (!dispatched) {\n event.preventDefault();\n }\n\n return dispatched;\n};\n"]}
|
package/snackbar/snackbar.d.ts
CHANGED
|
@@ -2,9 +2,9 @@ import { HTMLTemplateResult, LitElement } from 'lit';
|
|
|
2
2
|
import '../button/button.js';
|
|
3
3
|
import '../button/icon-button.js';
|
|
4
4
|
export interface SnackbarConfig {
|
|
5
|
-
|
|
5
|
+
message: string;
|
|
6
6
|
duration?: SnackbarDuration;
|
|
7
|
-
|
|
7
|
+
action?: string;
|
|
8
8
|
showClose?: boolean;
|
|
9
9
|
}
|
|
10
10
|
export declare enum SnackbarDuration {
|
|
@@ -14,19 +14,20 @@ export declare enum SnackbarDuration {
|
|
|
14
14
|
}
|
|
15
15
|
export declare class UmSnackbar extends LitElement {
|
|
16
16
|
static styles: import("lit").CSSResult[];
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
message: string;
|
|
18
|
+
action: string;
|
|
19
19
|
showClose: boolean;
|
|
20
20
|
dismissed: boolean;
|
|
21
|
-
|
|
22
|
-
private readonly
|
|
21
|
+
duration: SnackbarDuration | number;
|
|
22
|
+
private readonly container;
|
|
23
23
|
render(): HTMLTemplateResult;
|
|
24
24
|
private renderButton;
|
|
25
25
|
private renderCloseButton;
|
|
26
|
+
actionClick(e: Event): void;
|
|
26
27
|
dismiss(): void;
|
|
27
28
|
private static _queue;
|
|
28
29
|
private static _consuming;
|
|
29
|
-
static show(
|
|
30
|
+
static show(message: string): UmSnackbar;
|
|
30
31
|
static show(config: SnackbarConfig): UmSnackbar;
|
|
31
32
|
private static consumeQueue;
|
|
32
33
|
private static showNext;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snackbar.d.ts","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAOpE,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0BAA0B,CAAC;AAElC,MAAM,WAAW,cAAc;IAC7B,
|
|
1
|
+
{"version":3,"file":"snackbar.d.ts","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAOpE,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0BAA0B,CAAC;AAElC,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,oBAAY,gBAAgB;IAC1B,KAAK,OAAO;IACZ,IAAI,OAAO;IACX,QAAQ,KAAK;CACd;AAED,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAwB;IAEjB,OAAO,SAAM;IACb,MAAM,SAAM;IAEzC,SAAS,UAAS;IAC0B,SAAS,UAAS;IAE9D,QAAQ,EAAG,gBAAgB,GAAG,MAAM,CAAC;IACV,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IAE3D,MAAM,IAAI,kBAAkB;IAcrC,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,iBAAiB;IAqBzB,WAAW,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAc3B,OAAO,IAAI,IAAI;IAiBf,OAAO,CAAC,MAAM,CAAC,MAAM,CAAoB;IACzC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAU;IAEnC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,UAAU;IACxC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,cAAc,GAAG,UAAU;IAsB/C,OAAO,CAAC,MAAM,CAAC,YAAY;IAO3B,OAAO,CAAC,MAAM,CAAC,QAAQ;IAmBvB,OAAO,CAAC,MAAM,CAAC,cAAc;CAS9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,UAAU,CAAC;KAC1B;CACF"}
|
package/snackbar/snackbar.js
CHANGED
|
@@ -16,8 +16,8 @@ export var SnackbarDuration;
|
|
|
16
16
|
let UmSnackbar = class UmSnackbar extends LitElement {
|
|
17
17
|
constructor() {
|
|
18
18
|
super(...arguments);
|
|
19
|
-
this.
|
|
20
|
-
this.
|
|
19
|
+
this.message = '';
|
|
20
|
+
this.action = '';
|
|
21
21
|
this.showClose = false;
|
|
22
22
|
this.dismissed = false;
|
|
23
23
|
}
|
|
@@ -26,23 +26,34 @@ let UmSnackbar = class UmSnackbar extends LitElement {
|
|
|
26
26
|
render() {
|
|
27
27
|
const classes = { dismiss: this.dismissed };
|
|
28
28
|
return html `
|
|
29
|
-
<div class="
|
|
30
|
-
<
|
|
29
|
+
<div class="container ${classMap(classes)}" part="container">
|
|
30
|
+
<u-elevation></u-elevation>
|
|
31
|
+
<div class="message-container" part="message-container">
|
|
32
|
+
<div class="message" part="message">${this.message}</div>
|
|
33
|
+
</div>
|
|
31
34
|
${this.renderButton()} ${this.renderCloseButton()}
|
|
32
35
|
</div>
|
|
33
36
|
`;
|
|
34
37
|
}
|
|
35
38
|
renderButton() {
|
|
36
|
-
return this.
|
|
39
|
+
return this.action
|
|
37
40
|
? html `
|
|
38
|
-
<u-button
|
|
41
|
+
<u-button
|
|
42
|
+
variant="text"
|
|
43
|
+
@click=${this.actionClick.bind(this)}
|
|
44
|
+
part="action"
|
|
45
|
+
>${this.action}
|
|
46
|
+
</u-button>
|
|
39
47
|
`
|
|
40
48
|
: nothing;
|
|
41
49
|
}
|
|
42
50
|
renderCloseButton() {
|
|
43
51
|
return this.showClose
|
|
44
52
|
? html `
|
|
45
|
-
<u-icon-button
|
|
53
|
+
<u-icon-button
|
|
54
|
+
@click=${this.dismiss.bind(this)}
|
|
55
|
+
part="close"
|
|
56
|
+
>
|
|
46
57
|
<svg
|
|
47
58
|
xmlns="http://www.w3.org/2000/svg"
|
|
48
59
|
height="1em"
|
|
@@ -56,27 +67,37 @@ let UmSnackbar = class UmSnackbar extends LitElement {
|
|
|
56
67
|
`
|
|
57
68
|
: nothing;
|
|
58
69
|
}
|
|
70
|
+
actionClick(e) {
|
|
71
|
+
e.stopPropagation();
|
|
72
|
+
const actionClickEvent = new CustomEvent('actionClick', { cancelable: true });
|
|
73
|
+
this.dispatchEvent(actionClickEvent);
|
|
74
|
+
if (actionClickEvent.defaultPrevented) {
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
this.dismiss();
|
|
78
|
+
}
|
|
59
79
|
dismiss() {
|
|
60
80
|
if (this.dismissed) {
|
|
61
81
|
return;
|
|
62
82
|
}
|
|
63
83
|
this.dismissed = true;
|
|
64
84
|
const onAnimationEnd = () => {
|
|
65
|
-
this.
|
|
85
|
+
this.container.removeEventListener('animationend', onAnimationEnd);
|
|
66
86
|
this.remove();
|
|
67
87
|
UmSnackbar_1.showNext();
|
|
68
88
|
};
|
|
69
|
-
this.
|
|
89
|
+
this.container.addEventListener('animationend', onAnimationEnd);
|
|
70
90
|
}
|
|
71
91
|
static { this._queue = []; }
|
|
72
|
-
static show(
|
|
73
|
-
if (typeof
|
|
74
|
-
|
|
75
|
-
|
|
92
|
+
static show(configOrMessage) {
|
|
93
|
+
if (typeof configOrMessage === 'string') {
|
|
94
|
+
configOrMessage = {
|
|
95
|
+
message: configOrMessage,
|
|
76
96
|
};
|
|
77
97
|
}
|
|
78
|
-
|
|
79
|
-
|
|
98
|
+
console.log(configOrMessage);
|
|
99
|
+
configOrMessage.duration ??= SnackbarDuration.short;
|
|
100
|
+
const snackbar = this.createSnackbar(configOrMessage);
|
|
80
101
|
UmSnackbar_1._queue.push(snackbar);
|
|
81
102
|
if (!UmSnackbar_1._consuming) {
|
|
82
103
|
UmSnackbar_1.consumeQueue();
|
|
@@ -104,8 +125,8 @@ let UmSnackbar = class UmSnackbar extends LitElement {
|
|
|
104
125
|
}
|
|
105
126
|
static createSnackbar(config) {
|
|
106
127
|
const snackbar = document.createElement('u-snackbar');
|
|
107
|
-
snackbar.
|
|
108
|
-
snackbar.
|
|
128
|
+
snackbar.message = config.message;
|
|
129
|
+
snackbar.action = config.action || '';
|
|
109
130
|
snackbar.showClose = config.showClose;
|
|
110
131
|
snackbar.duration = config.duration;
|
|
111
132
|
return snackbar;
|
|
@@ -113,10 +134,10 @@ let UmSnackbar = class UmSnackbar extends LitElement {
|
|
|
113
134
|
};
|
|
114
135
|
__decorate([
|
|
115
136
|
property({ reflect: true })
|
|
116
|
-
], UmSnackbar.prototype, "
|
|
137
|
+
], UmSnackbar.prototype, "message", void 0);
|
|
117
138
|
__decorate([
|
|
118
139
|
property({ reflect: true })
|
|
119
|
-
], UmSnackbar.prototype, "
|
|
140
|
+
], UmSnackbar.prototype, "action", void 0);
|
|
120
141
|
__decorate([
|
|
121
142
|
property({ type: Boolean, attribute: 'show-close', reflect: true })
|
|
122
143
|
], UmSnackbar.prototype, "showClose", void 0);
|
|
@@ -124,8 +145,8 @@ __decorate([
|
|
|
124
145
|
property({ type: Boolean, reflect: true })
|
|
125
146
|
], UmSnackbar.prototype, "dismissed", void 0);
|
|
126
147
|
__decorate([
|
|
127
|
-
query('.
|
|
128
|
-
], UmSnackbar.prototype, "
|
|
148
|
+
query('.container', true)
|
|
149
|
+
], UmSnackbar.prototype, "container", void 0);
|
|
129
150
|
UmSnackbar = UmSnackbar_1 = __decorate([
|
|
130
151
|
customElement('u-snackbar')
|
|
131
152
|
], UmSnackbar);
|
package/snackbar/snackbar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0BAA0B,CAAC;AASlC,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IAC1B,4DAAY,CAAA;IACZ,0DAAW,CAAA;IACX,gEAAa,CAAA;AACf,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B;AAGM,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAGwB,
|
|
1
|
+
{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './snackbar.styles.js';\n\nimport '../button/button.js';\nimport '../button/icon-button.js';\n\nexport interface SnackbarConfig {\n message: string;\n duration?: SnackbarDuration;\n action?: string;\n showClose?: boolean;\n}\n\nexport enum SnackbarDuration {\n short = 2500,\n long = 5000,\n infinite = -1,\n}\n\n@customElement('u-snackbar')\nexport class UmSnackbar extends LitElement {\n static override styles = [baseStyles, styles];\n\n @property({ reflect: true }) message = '';\n @property({ reflect: true }) action = '';\n @property({ type: Boolean, attribute: 'show-close', reflect: true })\n showClose = false;\n @property({ type: Boolean, reflect: true }) dismissed = false;\n\n duration!: SnackbarDuration | number;\n @query('.container', true) private readonly container!: HTMLElement;\n\n override render(): HTMLTemplateResult {\n const classes = { dismiss: this.dismissed };\n\n return html`\n <div class=\"container ${classMap(classes)}\" part=\"container\">\n <u-elevation></u-elevation>\n <div class=\"message-container\" part=\"message-container\">\n <div class=\"message\" part=\"message\">${this.message}</div>\n </div>\n ${this.renderButton()} ${this.renderCloseButton()}\n </div>\n `;\n }\n\n private renderButton() {\n return this.action\n ? html`\n <u-button\n variant=\"text\"\n @click=${this.actionClick.bind(this)}\n part=\"action\"\n >${this.action}\n </u-button>\n `\n : nothing;\n }\n\n private renderCloseButton() {\n return this.showClose\n ? html`\n <u-icon-button\n @click=${this.dismiss.bind(this)}\n part=\"close\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"1em\"\n viewBox=\"0 -960 960 960\"\n width=\"1em\"\n fill=\"currentColor\">\n <path\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\n </svg>\n </u-icon-button>\n `\n : nothing;\n }\n\n actionClick(e: Event): void {\n e.stopPropagation();\n\n const actionClickEvent = new CustomEvent('actionClick', { cancelable: true });\n\n this.dispatchEvent(actionClickEvent);\n\n if (actionClickEvent.defaultPrevented) {\n return;\n }\n\n this.dismiss();\n }\n\n dismiss(): void {\n if (this.dismissed) {\n return;\n }\n\n this.dismissed = true;\n\n const onAnimationEnd = () => {\n this.container.removeEventListener('animationend', onAnimationEnd);\n this.remove();\n\n UmSnackbar.showNext();\n };\n\n this.container.addEventListener('animationend', onAnimationEnd);\n }\n\n private static _queue: UmSnackbar[] = [];\n private static _consuming: boolean;\n\n static show(message: string): UmSnackbar;\n static show(config: SnackbarConfig): UmSnackbar;\n static show(configOrMessage: SnackbarConfig | string): UmSnackbar {\n if (typeof configOrMessage === 'string') {\n configOrMessage = {\n message: configOrMessage,\n };\n }\n\n console.log(configOrMessage);\n\n configOrMessage.duration ??= SnackbarDuration.short;\n\n const snackbar = this.createSnackbar(configOrMessage);\n UmSnackbar._queue.push(snackbar);\n\n if (!UmSnackbar._consuming) {\n UmSnackbar.consumeQueue();\n }\n\n return snackbar;\n }\n\n private static consumeQueue() {\n if (UmSnackbar._queue.length) {\n UmSnackbar._consuming = true;\n UmSnackbar.showNext();\n }\n }\n\n private static showNext() {\n if (!UmSnackbar._queue.length) {\n UmSnackbar._consuming = false;\n return;\n }\n\n const snackbar = UmSnackbar._queue[0];\n\n UmSnackbar._queue = UmSnackbar._queue.slice(1);\n\n document.body.appendChild(snackbar);\n\n if (snackbar.duration === -1) {\n return;\n }\n\n setTimeout(() => snackbar.dismiss(), snackbar.duration);\n }\n\n private static createSnackbar(config: SnackbarConfig): UmSnackbar {\n const snackbar = document.createElement('u-snackbar');\n snackbar.message = config.message;\n snackbar.action = config.action || '';\n snackbar.showClose = config.showClose!;\n snackbar.duration = config.duration!;\n\n return snackbar as unknown as UmSnackbar;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-snackbar': UmSnackbar;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snackbar.styles.d.ts","sourceRoot":"","sources":["../../src/snackbar/snackbar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"snackbar.styles.d.ts","sourceRoot":"","sources":["../../src/snackbar/snackbar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAqFlB,CAAC"}
|
|
@@ -12,12 +12,13 @@ export const styles = css `
|
|
|
12
12
|
justify-content: center;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
.
|
|
15
|
+
.container {
|
|
16
16
|
display: flex;
|
|
17
17
|
align-items: center;
|
|
18
|
+
justify-content: flex-end;
|
|
19
|
+
flex-wrap: wrap;
|
|
18
20
|
min-height: var(--u-snackbar-height, 48px);
|
|
19
|
-
color: var(--u-snackbar-
|
|
20
|
-
background-color: var(--u-snackbar-bg-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));
|
|
21
|
+
background-color: var(--u-snackbar-container-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));
|
|
21
22
|
border-radius: var(--u-snackbar-shape, var(--u-shape-corner-extra-small, 4px));
|
|
22
23
|
animation-name: snackbar-fade-in;
|
|
23
24
|
animation-duration: 450ms;
|
|
@@ -26,13 +27,13 @@ export const styles = css `
|
|
|
26
27
|
min-width: var(--u-snackbar-min-width, 100%);
|
|
27
28
|
max-width: var(--u-snackbar-max-width, 100%);
|
|
28
29
|
}
|
|
29
|
-
.
|
|
30
|
+
.container.dismiss {
|
|
30
31
|
animation-name: snackbar-fade-out;
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
u-button {
|
|
34
35
|
color: var(--u-color-inverse-primary, );
|
|
35
|
-
margin
|
|
36
|
+
margin: var(--u-snackbar-action-margin, var(--u-spacing-extra-small, 4px));
|
|
36
37
|
}
|
|
37
38
|
|
|
38
39
|
u-icon-button {
|
|
@@ -40,21 +41,27 @@ export const styles = css `
|
|
|
40
41
|
margin-inline: var(--u-snackbar-close-button-margin, var(--u-spacing-extra-small, 4px));
|
|
41
42
|
}
|
|
42
43
|
|
|
43
|
-
.
|
|
44
|
-
flex: 1;
|
|
44
|
+
.message-container {
|
|
45
|
+
flex: 1 1 auto;
|
|
45
46
|
overflow: hidden;
|
|
46
|
-
color: var(--u-on-inverse-surface
|
|
47
|
+
color: var(--u-snackbar-message-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));
|
|
47
48
|
padding: var(--u-snackbar-text-margin, var(--u-spacing-medium, 16px));
|
|
48
49
|
line-height: 18px;
|
|
49
50
|
}
|
|
50
51
|
|
|
52
|
+
.message {
|
|
53
|
+
display: -webkit-box;
|
|
54
|
+
-webkit-line-clamp: 2;
|
|
55
|
+
-webkit-box-orient: vertical;
|
|
56
|
+
overflow: hidden;
|
|
57
|
+
}
|
|
58
|
+
|
|
51
59
|
@media (min-width: 840px) {
|
|
52
60
|
:host {
|
|
53
61
|
--_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-large, 24px));
|
|
54
62
|
}
|
|
55
|
-
.
|
|
56
|
-
min-width: var(--u-snackbar-min-width,
|
|
57
|
-
max-width: var(--u-snackbar-max-width, 568px);
|
|
63
|
+
.container {
|
|
64
|
+
min-width: var(--u-snackbar-min-width, 344px);
|
|
58
65
|
}
|
|
59
66
|
}
|
|
60
67
|
@keyframes snackbar-fade-in {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snackbar.styles.js","sourceRoot":"","sources":["../../src/snackbar/snackbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"snackbar.styles.js","sourceRoot":"","sources":["../../src/snackbar/snackbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --u-elevation-level: var(--u-snackbar-elevation-level, 3);\n --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-medium, 16px));\n position: fixed;\n inset-inline: 0;\n inset-block-end: 0;\n padding: var(--_snackbar-margin);\n z-index: var(--u-snackbar-z-index, 1070);\n display: flex;\n justify-content: center;\n }\n\n .container {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n flex-wrap: wrap;\n min-height: var(--u-snackbar-height, 48px);\n background-color: var(--u-snackbar-container-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n border-radius: var(--u-snackbar-shape, var(--u-shape-corner-extra-small, 4px));\n animation-name: snackbar-fade-in;\n animation-duration: 450ms;\n animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n animation-fill-mode: forwards;\n min-width: var(--u-snackbar-min-width, 100%);\n max-width: var(--u-snackbar-max-width, 100%);\n }\n .container.dismiss {\n animation-name: snackbar-fade-out;\n }\n\n u-button {\n color: var(--u-color-inverse-primary, );\n margin: var(--u-snackbar-action-margin, var(--u-spacing-extra-small, 4px));\n }\n\n u-icon-button {\n color: var(--u-color-on-inverse-surface, rgb(245, 239, 247));\n margin-inline: var(--u-snackbar-close-button-margin, var(--u-spacing-extra-small, 4px));\n }\n\n .message-container {\n flex: 1 1 auto;\n overflow: hidden;\n color: var(--u-snackbar-message-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n padding: var(--u-snackbar-text-margin, var(--u-spacing-medium, 16px));\n line-height: 18px;\n }\n\n .message {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n\n @media (min-width: 840px) {\n :host {\n --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-large, 24px));\n }\n .container {\n min-width: var(--u-snackbar-min-width, 344px);\n }\n }\n @keyframes snackbar-fade-in {\n 0% {\n opacity: 0;\n transform: scale3d(0.5, 0.5, 1);\n }\n 100% {\n opacity: 1;\n transform: scale3d(1, 1, 1);\n }\n }\n @keyframes snackbar-fade-out {\n 0% {\n opacity: 1;\n transform: scale3d(1, 1, 1);\n }\n 100% {\n opacity: 0;\n transform: scale3d(0.5, 0.5, 1);\n }\n }\n`;\n"]}
|