@exmg/exm-snackbar 0.0.2-alpha.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/README.md +75 -0
- package/dist/exm-snackbar.d.ts +18 -0
- package/dist/exm-snackbar.js +59 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +3 -0
- package/dist/styles/exm-snackbar-css.d.ts +1 -0
- package/dist/styles/exm-snackbar-css.js +31 -0
- package/dist/types.d.ts +4 -0
- package/dist/types.js +2 -0
- package/package.json +41 -0
package/README.md
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
# `<exm-snackbar>` [](https://www.npmjs.com/package/@exmg/exm-snackbar)
|
|
2
|
+
|
|
3
|
+
# @exmg/exm-snackbar
|
|
4
|
+
|
|
5
|
+
Snackbar element to show information and feedback based on user interaction.
|
|
6
|
+
|
|
7
|
+
Based on `mwc-snackbar`
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```sh
|
|
12
|
+
npm install @exmg/exm-snackbar
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Example Usage
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<exm-button unelevated @click=${() =>
|
|
19
|
+
this.shadowRoot?.querySelector<ExmSnackbar>('#default-snackbar')?.show()}>
|
|
20
|
+
Open default
|
|
21
|
+
</exm-button>
|
|
22
|
+
<exm-snackbar id="default-snackbar" labelText="Default auto close"></exm-snackbar>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## API
|
|
26
|
+
|
|
27
|
+
### Slots
|
|
28
|
+
|
|
29
|
+
| Name | Description |
|
|
30
|
+
| --------- | ------------------------------------------------------------- |
|
|
31
|
+
| `icon` | Icon of the snackbar |
|
|
32
|
+
| `action` | Action element of the snackbar |
|
|
33
|
+
| `dismiss` | Dismiss element of the snackbar, used to dismiss the snackbar |
|
|
34
|
+
|
|
35
|
+
### Properties/Attributes
|
|
36
|
+
|
|
37
|
+
| Name | Type | Default | Description |
|
|
38
|
+
| --------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
|
|
39
|
+
| `variant` | `string` | _null_ | Sets the Snackbar variant, options from MWC ('positive', 'negative', 'info') |
|
|
40
|
+
| `xOffset` | `Number` | _0_ | The horizontal offset of the snackbar |
|
|
41
|
+
| `yOffset` | `Number` | _0_ | The vertical offset of the snackbar |
|
|
42
|
+
| `open` | `boolean` | Whether the snackbar is currently open. |
|
|
43
|
+
| `timeoutMs` | `number` | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds). |
|
|
44
|
+
| `closeOnEscape` | `boolean` | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`. |
|
|
45
|
+
| `labelText` | `string` | The text content of the label element. |
|
|
46
|
+
| `stacked` | `boolean` | Enables the _stacked_ layout (see above). |
|
|
47
|
+
| `leading` | `boolean` | Enables the _leading_ layout (see above). |
|
|
48
|
+
|
|
49
|
+
### Methods
|
|
50
|
+
|
|
51
|
+
| Name | Description |
|
|
52
|
+
| ------------------------------------ | --------------------------------------------------------------------------------------- |
|
|
53
|
+
| `show() => void` | Opens the snackbar. |
|
|
54
|
+
| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed. |
|
|
55
|
+
|
|
56
|
+
### Events
|
|
57
|
+
|
|
58
|
+
| Name | Detail | Description |
|
|
59
|
+
| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
60
|
+
| `MDCSnackbar:opening` | `{}` | Indicates when the snackbar begins its opening animation. |
|
|
61
|
+
| `MDCSnackbar:opened` | `{}` | Indicates when the snackbar finishes its opening animation. |
|
|
62
|
+
| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method). |
|
|
63
|
+
| `MDCSnackbar:closed` | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method). |
|
|
64
|
+
|
|
65
|
+
### CSS Custom Properties
|
|
66
|
+
|
|
67
|
+
| Name | Default | Description |
|
|
68
|
+
| ----------------------------- | -------------------------------------- | -------------------------------- |
|
|
69
|
+
| `--mdc-snackbar-action-color` |  `#bb86fc` | Color of the action button text. |
|
|
70
|
+
|
|
71
|
+
## Additional references
|
|
72
|
+
|
|
73
|
+
- [Additional Documentation](https://exmg.github.io/exmachina-web-components/ExmSnackbar.html)
|
|
74
|
+
|
|
75
|
+
- [Demo](https://exmg.github.io/exmachina-web-components/demo/?el=exm-snackbar)
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { CSSResult } from 'lit';
|
|
2
|
+
import { SnackbarBase } from '@material/mwc-snackbar/mwc-snackbar-base.js';
|
|
3
|
+
export declare class ExmSnackbar extends SnackbarBase {
|
|
4
|
+
/**
|
|
5
|
+
* Sets the Snackbar variant, options from MWC
|
|
6
|
+
* @type {String}
|
|
7
|
+
*/
|
|
8
|
+
variant: 'positive' | 'negative' | 'info' | null;
|
|
9
|
+
xOffset: number;
|
|
10
|
+
yOffset: number;
|
|
11
|
+
static styles: CSSResult[];
|
|
12
|
+
protected render(): import("lit-html").TemplateResult<1>;
|
|
13
|
+
}
|
|
14
|
+
declare global {
|
|
15
|
+
interface HTMLElementTagNameMap {
|
|
16
|
+
'exm-snackbar': ExmSnackbar;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
5
|
+
import { SnackbarBase } from '@material/mwc-snackbar/mwc-snackbar-base.js';
|
|
6
|
+
import { accessibleSnackbarLabel } from '@material/mwc-snackbar/accessible-snackbar-label-directive.js';
|
|
7
|
+
import { style as newStyles } from './styles/exm-snackbar-css.js';
|
|
8
|
+
import { styles } from '@material/mwc-snackbar/mwc-snackbar.css.js';
|
|
9
|
+
let ExmSnackbar = class ExmSnackbar extends SnackbarBase {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments);
|
|
12
|
+
/**
|
|
13
|
+
* Sets the Snackbar variant, options from MWC
|
|
14
|
+
* @type {String}
|
|
15
|
+
*/
|
|
16
|
+
this.variant = null;
|
|
17
|
+
this.xOffset = 0;
|
|
18
|
+
this.yOffset = 0;
|
|
19
|
+
}
|
|
20
|
+
render() {
|
|
21
|
+
const classes = {
|
|
22
|
+
'mdc-snackbar--stacked': this.stacked,
|
|
23
|
+
'mdc-snackbar--leading': this.leading,
|
|
24
|
+
'mdc-snackbar--positive': this.variant === 'positive',
|
|
25
|
+
'mdc-snackbar--negative': this.variant === 'negative',
|
|
26
|
+
'mdc-snackbar--info': this.variant === 'info',
|
|
27
|
+
};
|
|
28
|
+
return html ` <div
|
|
29
|
+
class="mdc-snackbar ${classMap(classes)}"
|
|
30
|
+
style="left:${this.xOffset}px; bottom:${this.yOffset}px;"
|
|
31
|
+
@keydown="${this._handleKeydown}"
|
|
32
|
+
>
|
|
33
|
+
<div class="mdc-snackbar__surface">
|
|
34
|
+
<slot name="icon"></slot>
|
|
35
|
+
${accessibleSnackbarLabel(this.labelText, this.open)}
|
|
36
|
+
<div class="mdc-snackbar__actions">
|
|
37
|
+
<slot name="action" @click="${this._handleActionClick}"></slot>
|
|
38
|
+
<slot name="dismiss" @click="${this._handleDismissClick}"></slot>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>`;
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
ExmSnackbar.styles = [styles, newStyles];
|
|
45
|
+
__decorate([
|
|
46
|
+
property({ type: String })
|
|
47
|
+
], ExmSnackbar.prototype, "variant", void 0);
|
|
48
|
+
__decorate([
|
|
49
|
+
property({ type: Number })
|
|
50
|
+
], ExmSnackbar.prototype, "xOffset", void 0);
|
|
51
|
+
__decorate([
|
|
52
|
+
property({ type: Number })
|
|
53
|
+
], ExmSnackbar.prototype, "yOffset", void 0);
|
|
54
|
+
ExmSnackbar = __decorate([
|
|
55
|
+
customElement('exm-snackbar')
|
|
56
|
+
// @ts-ignore this due to a version conflict between the currently used lit and the version used bu mcw
|
|
57
|
+
], ExmSnackbar);
|
|
58
|
+
export { ExmSnackbar };
|
|
59
|
+
//# sourceMappingURL=exm-snackbar.js.map
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const style: import("lit").CSSResult;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const style = css `
|
|
3
|
+
:host {
|
|
4
|
+
--exm-snackbar-positive-background-color: #12805c;
|
|
5
|
+
--exm-snackbar-negative-background-color: #c9252d;
|
|
6
|
+
--exm-snackbar-info-background-color: #0d66d0;
|
|
7
|
+
--exm-snackbar-text-color: #fff;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.mdc-snackbar--positive .mdc-snackbar__surface {
|
|
11
|
+
background-color: var(--exm-snackbar-positive-background-color) !important;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.mdc-snackbar--negative .mdc-snackbar__surface {
|
|
15
|
+
background-color: var(--exm-snackbar-negative-background-color) !important;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.mdc-snackbar--info .mdc-snackbar__surface {
|
|
19
|
+
background-color: var(--exm-snackbar-info-background-color) !important;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.mdc-snackbar__surface {
|
|
23
|
+
color: var(--exm-snackbar-text-color);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
slot[name='icon']::slotted(*) {
|
|
27
|
+
margin-left: 12px;
|
|
28
|
+
min-width: 24px;
|
|
29
|
+
}
|
|
30
|
+
`;
|
|
31
|
+
//# sourceMappingURL=exm-snackbar-css.js.map
|
package/dist/types.d.ts
ADDED
package/dist/types.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@exmg/exm-snackbar",
|
|
3
|
+
"version": "0.0.2-alpha.0+df24e0c",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"types": "dist/index.d.ts",
|
|
7
|
+
"module": "dist/index.js",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": "./dist/index.js",
|
|
10
|
+
"./exm-snackbar.js": "./dist/exm-snackbar.js"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"@material/mwc-snackbar": "=0.27.0"
|
|
14
|
+
},
|
|
15
|
+
"peerDependencies": {
|
|
16
|
+
"lit": "3.2.1",
|
|
17
|
+
"tslib": "^2.6.2"
|
|
18
|
+
},
|
|
19
|
+
"keywords": [
|
|
20
|
+
"web-components",
|
|
21
|
+
"lit",
|
|
22
|
+
"button"
|
|
23
|
+
],
|
|
24
|
+
"files": [
|
|
25
|
+
"**/*.scss",
|
|
26
|
+
"**/*.js",
|
|
27
|
+
"**/*.d.ts"
|
|
28
|
+
],
|
|
29
|
+
"homepage": "https://bitbucket.org/exmachina/exm-web-components",
|
|
30
|
+
"repository": {
|
|
31
|
+
"type": "git",
|
|
32
|
+
"url": "git@bitbucket.org:exmachina/exm-web-components.git",
|
|
33
|
+
"directory": "packages/exm-snackbar"
|
|
34
|
+
},
|
|
35
|
+
"license": "MIT",
|
|
36
|
+
"scripts": {},
|
|
37
|
+
"publishConfig": {
|
|
38
|
+
"access": "public"
|
|
39
|
+
},
|
|
40
|
+
"gitHead": "df24e0c74a76a7e1c258f69386036e24e7860256"
|
|
41
|
+
}
|