@m3e/snackbar 1.0.0-rc.1 → 1.0.0-rc.2

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.
Files changed (17) hide show
  1. package/README.md +1 -2
  2. package/dist/custom-elements.json +2547 -0
  3. package/package.json +6 -6
  4. package/cem.config.mjs +0 -16
  5. package/demo/index.html +0 -49
  6. package/dist/src/Snackbar.d.ts +0 -62
  7. package/dist/src/Snackbar.d.ts.map +0 -1
  8. package/dist/src/SnackbarElement.d.ts +0 -77
  9. package/dist/src/SnackbarElement.d.ts.map +0 -1
  10. package/dist/src/index.d.ts +0 -3
  11. package/dist/src/index.d.ts.map +0 -1
  12. package/eslint.config.mjs +0 -13
  13. package/rollup.config.js +0 -32
  14. package/src/Snackbar.ts +0 -135
  15. package/src/SnackbarElement.ts +0 -318
  16. package/src/index.ts +0 -2
  17. package/tsconfig.json +0 -9
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@m3e/snackbar",
3
- "version": "1.0.0-rc.1",
3
+ "version": "1.0.0-rc.2",
4
4
  "description": "Snackbar for M3E",
5
5
  "author": "matraic <matraic@yahoo.com>",
6
6
  "license": "MIT",
7
- "homepage": "https://matraic.github.io/m3e/",
7
+ "homepage": "https://matraic.github.io/m3e/#/components/snackbar.html",
8
8
  "repository": {
9
9
  "type": "git",
10
- "url": "https://github.com/matraic/m3e.git"
10
+ "url": "git+https://github.com/matraic/m3e.git"
11
11
  },
12
12
  "keywords": [
13
13
  "material design",
@@ -27,9 +27,9 @@
27
27
  "clean": "rimraf dist"
28
28
  },
29
29
  "peerDependencies": {
30
- "@m3e/core": "1.0.0-rc.1",
31
- "@m3e/button": "1.0.0-rc.1",
32
- "@m3e/icon-button": "1.0.0-rc.1",
30
+ "@m3e/core": "1.0.0-rc.2",
31
+ "@m3e/button": "1.0.0-rc.2",
32
+ "@m3e/icon-button": "1.0.0-rc.2",
33
33
  "lit": "^3.3.0"
34
34
  },
35
35
  "devDependencies": {
package/cem.config.mjs DELETED
@@ -1,16 +0,0 @@
1
- import { customElementVsCodePlugin } from "custom-element-vs-code-integration";
2
-
3
- export default {
4
- globs: ["src/**/*.ts"],
5
- exclude: ["src/**/*.spec.ts"],
6
- packagejson: true,
7
- outdir: "dist",
8
- litelement: true,
9
- plugins: [
10
- customElementVsCodePlugin({
11
- outdir: "dist",
12
- htmlFileName: "html-custom-data.json",
13
- cssFileName: "css-custom-data.json",
14
- }),
15
- ],
16
- };
package/demo/index.html DELETED
@@ -1,49 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" style="overflow-y: auto">
3
- <head>
4
- <title>Snackbar for M3E</title>
5
- <meta charset="utf-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1" />
7
- <meta name="description" content="Snackbar for M3E" />
8
- <base href="./" />
9
- <link rel="preconnect" href="https://fonts.googleapis.com" />
10
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11
- <link
12
- href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
13
- rel="stylesheet"
14
- />
15
- <link
16
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0"
17
- rel="stylesheet"
18
- />
19
- <script type="importmap">
20
- {
21
- "imports": {
22
- "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
23
- "@m3e/core": "../../core/dist/index.min.js"
24
- }
25
- }
26
- </script>
27
- <script type="module" src="../../button/dist/index.min.js"></script>
28
- <script type="module" src="../../icon-button/dist/index.min.js"></script>
29
- <script type="module" src="../../theme/dist/index.min.js"></script>
30
- <script type="module" src="../dist/index.min.js"></script>
31
- <style>
32
- body {
33
- font-family: "Roboto";
34
- }
35
- *:not(:defined) {
36
- display: none;
37
- }
38
- </style>
39
- </head>
40
- <body>
41
- <m3e-theme strong-focus>
42
- <m3e-button
43
- onclick="M3eSnackbar.open('Test', 'Custom Action', true, { duration: 5000, actionCallback: () => console.log('Action Taken')})"
44
- >
45
- Open Snackbar
46
- </m3e-button>
47
- </m3e-theme>
48
- </body>
49
- </html>
package/dist/src/Snackbar.d.ts DELETED
@@ -1,62 +0,0 @@
1
- /** Encapsulates options used to present a snackbar message. */
2
- export interface SnackbarOptions {
3
- /** The length of time, in milliseconds, to wait before automatically dismissing the snackbar. */
4
- duration?: number;
5
- /** The accessible label given to the close button used to dismiss the snackbar. */
6
- closeLabel?: string;
7
- /** The callback function invoked when the action is clicked. */
8
- actionCallback?: () => void;
9
- }
10
- /**
11
- * Presents short updates about application processes at the bottom of the screen from anywhere in an application.
12
- * @example
13
- * The following example illustrates basic usage.
14
- * ```js
15
- * M3eSnackbar.open("File deleted");
16
- * ```
17
- * @example
18
- * The next example illustrates presenting a snackbar with an action and callback.
19
- * ```js
20
- * M3eSnackbar.open("File deleted", "Undo", {
21
- * actionCallback: () => {
22
- * // Undo logic here
23
- * },
24
- * });
25
- */
26
- export declare class M3eSnackbar {
27
- /**
28
- * Opens a snackbar with a message.
29
- * @param {string} message The message to show in the snackbar.
30
- * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.
31
- */
32
- static open(message: string, options?: SnackbarOptions): void;
33
- /**
34
- * Opens a snackbar with a message and action.
35
- * @param {string} message The message to show in the snackbar.
36
- * @param {string} action The label for the snackbar action.
37
- * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.
38
- */
39
- static open(message: string, action: string, options?: SnackbarOptions): void;
40
- /**
41
- * Opens a snackbar with a message, action and optional close affordance.
42
- * @param {string} message The message to show in the snackbar.
43
- * @param {string} action The label for the snackbar action.
44
- * @param {boolean} dismissible Whether to present close affordance.
45
- * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.
46
- */
47
- static open(message: string, action: string, dismissible: boolean, options?: SnackbarOptions): void;
48
- /**
49
- * Opens a snackbar with a message and optional close affordance.
50
- * @param {string} message The message to show in the snackbar.
51
- * @param {boolean} dismissible Whether to present close affordance.
52
- * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.
53
- */
54
- static open(message: string, dismissible: boolean, options?: SnackbarOptions): void;
55
- /** Dismisses the currently visible snackbar. */
56
- static dismiss(): void;
57
- }
58
- declare global {
59
- /** Presents short updates about application processes at the bottom of the screen from anywhere in an application. */
60
- var M3eSnackbar: M3eSnackbar;
61
- }
62
- //# sourceMappingURL=Snackbar.d.ts.map
package/dist/src/Snackbar.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../src/Snackbar.ts"],"names":[],"mappings":"AAMA,+DAA+D;AAC/D,MAAM,WAAW,eAAe;IAC9B,iGAAiG;IACjG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,mFAAmF;IACnF,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,gEAAgE;IAChE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,WAAW;IACtB;;;;OAIG;IACH,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,IAAI;IAE7D;;;;;OAKG;IACH,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,IAAI;IAE7E;;;;;;OAMG;IACH,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,IAAI;IAEnG;;;;;OAKG;IACH,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,IAAI;IA0DnF,gDAAgD;IAChD,MAAM,CAAC,OAAO,IAAI,IAAI;CAGvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,sHAAsH;IACtH,IAAI,WAAW,EAAE,WAAW,CAAC;CAC9B"}
package/dist/src/SnackbarElement.d.ts DELETED
@@ -1,77 +0,0 @@
1
- import { CSSResultGroup, LitElement } from "lit";
2
- declare const M3eSnackbarElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
3
- /**
4
- * Presents short updates about application processes at the bottom of the screen.
5
- * @tag m3e-snackbar
6
- *
7
- * @slot - Renders the content of the snackbar.
8
- * @slot close-icon - Renders the icon of the button used to close the snackbar.
9
- *
10
- * @attr action - The label of the snackbar's action.
11
- * @attr close-label - The accessible label given to the button used to dismiss the snackbar.
12
- * @attr dismissible - Whether a button is presented that can be used to close the snackbar.
13
- * @attr duration - The length of time, in milliseconds, to wait before automatically dismissing the snackbar.
14
- *
15
- * @fires toggle - Emitted when the opened state of the snackbar changes.
16
- *
17
- * @cssprop --m3e-snackbar-margin - Vertical offset from the bottom of the viewport.
18
- * @cssprop --m3e-snackbar-container-shape - Border radius of the snackbar container.
19
- * @cssprop --m3e-snackbar-container-color - Background color of the snackbar.
20
- * @cssprop --m3e-snackbar-padding - Internal spacing of the snackbar container.
21
- * @cssprop --m3e-snackbar-min-width - Minimum width of the snackbar.
22
- * @cssprop --m3e-snackbar-max-width - Maximum width of the snackbar.
23
- */
24
- export declare class M3eSnackbarElement extends M3eSnackbarElement_base {
25
- #private;
26
- /** The styles of the element. */
27
- static styles: CSSResultGroup;
28
- /** @private */ static __current: M3eSnackbarElement | null;
29
- constructor();
30
- /** The currently open snackbar. */
31
- static get current(): M3eSnackbarElement | null;
32
- /**
33
- * The length of time, in milliseconds, to wait before automatically dismissing the snackbar.
34
- * @default 3000
35
- */
36
- duration: number;
37
- /**
38
- * The label of the snackbar's action.
39
- * @default ""
40
- */
41
- action: string;
42
- /**
43
- * Whether a button is presented that can be used to close the snackbar.
44
- * @default false
45
- */
46
- dismissible: boolean;
47
- /**
48
- * The accessible label given to the button used to dismiss the snackbar.
49
- * @default "Close"
50
- */
51
- closeLabel: string;
52
- /** Whether the user clicked the action. */
53
- get isActionTaken(): boolean;
54
- /** @inheritdoc */
55
- connectedCallback(): void;
56
- /** @inheritdoc */
57
- disconnectedCallback(): void;
58
- /** @inheritdoc */
59
- protected render(): import("lit-html").TemplateResult<1>;
60
- }
61
- interface M3eSnackbarElementEventMap extends HTMLElementEventMap {
62
- beforetoggle: ToggleEvent;
63
- toggle: ToggleEvent;
64
- }
65
- export interface M3eSnackbarElement {
66
- addEventListener<K extends keyof M3eSnackbarElementEventMap>(type: K, listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
67
- addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
68
- removeEventListener<K extends keyof M3eSnackbarElementEventMap>(type: K, listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
69
- removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
70
- }
71
- declare global {
72
- interface HTMLElementTagNameMap {
73
- "m3e-snackbar": M3eSnackbarElement;
74
- }
75
- }
76
- export {};
77
- //# sourceMappingURL=SnackbarElement.d.ts.map
package/dist/src/SnackbarElement.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"SnackbarElement.d.ts","sourceRoot":"","sources":["../../src/SnackbarElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAsB,MAAM,KAAK,CAAC;;AAKhF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,kBAAmB,SAAQ,uBAA0B;;IAChE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAkIpC;IAEF,eAAe,CAAC,MAAM,CAAC,SAAS,EAAE,kBAAkB,GAAG,IAAI,CAAQ;;IAgBnE,mCAAmC;IACnC,MAAM,KAAK,OAAO,IAAI,kBAAkB,GAAG,IAAI,CAE9C;IAED;;;OAGG;IACyB,QAAQ,SAAQ;IAE5C;;;OAGG;IACS,MAAM,SAAM;IAExB;;;OAGG;IACyC,WAAW,UAAS;IAEhE;;;OAGG;IACqC,UAAU,SAAW;IAE7D,2CAA2C;IAC3C,IAAI,aAAa,IAAI,OAAO,CAE3B;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAQlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAMrC,kBAAkB;cACC,MAAM;CAkD1B;AAED,UAAU,0BAA2B,SAAQ,mBAAmB;IAC9D,YAAY,EAAE,WAAW,CAAC;IAC1B,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,gBAAgB,CAAC,CAAC,SAAS,MAAM,0BAA0B,EACzD,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,EAAE,EAAE,0BAA0B,CAAC,CAAC,CAAC,KAAK,IAAI,EAC/E,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,mBAAmB,CAAC,CAAC,SAAS,MAAM,0BAA0B,EAC5D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,EAAE,EAAE,0BAA0B,CAAC,CAAC,CAAC,KAAK,IAAI,EAC/E,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IAER,mBAAmB,CACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}
package/dist/src/index.d.ts DELETED
@@ -1,3 +0,0 @@
1
- export * from "./Snackbar";
2
- export * from "./SnackbarElement";
3
- //# sourceMappingURL=index.d.ts.map
package/dist/src/index.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC"}
package/eslint.config.mjs DELETED
@@ -1,13 +0,0 @@
1
- import eslint from "@eslint/js";
2
- import tseslint from "typescript-eslint";
3
- import { fileURLToPath } from "url";
4
- import { dirname } from "path";
5
-
6
- export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
7
- languageOptions: {
8
- parserOptions: {
9
- project: true,
10
- tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
11
- },
12
- },
13
- });
package/rollup.config.js DELETED
@@ -1,32 +0,0 @@
1
- import resolve from "@rollup/plugin-node-resolve";
2
- import terser from "@rollup/plugin-terser";
3
- import typescript from "@rollup/plugin-typescript";
4
-
5
- const banner = `/**
6
- * @license MIT
7
- * Copyright (c) 2025 matraic
8
- * See LICENSE file in the project root for full license text.
9
- */`;
10
-
11
- export default [
12
- {
13
- input: "src/index.ts",
14
- output: [
15
- {
16
- file: "dist/index.js",
17
- format: "esm",
18
- sourcemap: true,
19
- banner: banner,
20
- },
21
- {
22
- file: "dist/index.min.js",
23
- format: "esm",
24
- sourcemap: true,
25
- banner: banner,
26
- plugins: [terser({ mangle: true })],
27
- },
28
- ],
29
- external: ["@m3e/core", "@m3e/button", "@m3e/icon-button", "lit"],
30
- plugins: [resolve(), typescript()],
31
- },
32
- ];
package/src/Snackbar.ts DELETED
@@ -1,135 +0,0 @@
1
- import { isServer } from "lit";
2
-
3
- import { prefersReducedMotion } from "@m3e/core";
4
-
5
- import { M3eSnackbarElement } from "./SnackbarElement";
6
-
7
- /** Encapsulates options used to present a snackbar message. */
8
- export interface SnackbarOptions {
9
- /** The length of time, in milliseconds, to wait before automatically dismissing the snackbar. */
10
- duration?: number;
11
-
12
- /** The accessible label given to the close button used to dismiss the snackbar. */
13
- closeLabel?: string;
14
-
15
- /** The callback function invoked when the action is clicked. */
16
- actionCallback?: () => void;
17
- }
18
-
19
- /**
20
- * Presents short updates about application processes at the bottom of the screen from anywhere in an application.
21
- * @example
22
- * The following example illustrates basic usage.
23
- * ```js
24
- * M3eSnackbar.open("File deleted");
25
- * ```
26
- * @example
27
- * The next example illustrates presenting a snackbar with an action and callback.
28
- * ```js
29
- * M3eSnackbar.open("File deleted", "Undo", {
30
- * actionCallback: () => {
31
- * // Undo logic here
32
- * },
33
- * });
34
- */
35
- export class M3eSnackbar {
36
- /**
37
- * Opens a snackbar with a message.
38
- * @param {string} message The message to show in the snackbar.
39
- * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.
40
- */
41
- static open(message: string, options?: SnackbarOptions): void;
42
-
43
- /**
44
- * Opens a snackbar with a message and action.
45
- * @param {string} message The message to show in the snackbar.
46
- * @param {string} action The label for the snackbar action.
47
- * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.
48
- */
49
- static open(message: string, action: string, options?: SnackbarOptions): void;
50
-
51
- /**
52
- * Opens a snackbar with a message, action and optional close affordance.
53
- * @param {string} message The message to show in the snackbar.
54
- * @param {string} action The label for the snackbar action.
55
- * @param {boolean} dismissible Whether to present close affordance.
56
- * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.
57
- */
58
- static open(message: string, action: string, dismissible: boolean, options?: SnackbarOptions): void;
59
-
60
- /**
61
- * Opens a snackbar with a message and optional close affordance.
62
- * @param {string} message The message to show in the snackbar.
63
- * @param {boolean} dismissible Whether to present close affordance.
64
- * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.
65
- */
66
- static open(message: string, dismissible: boolean, options?: SnackbarOptions): void;
67
-
68
- static open(
69
- message: string,
70
- actionOrDismissibleOrOptions?: string | boolean | SnackbarOptions,
71
- dismissibleOrOptions?: boolean | SnackbarOptions,
72
- options?: SnackbarOptions
73
- ): void {
74
- if (isServer) return;
75
-
76
- const snackbar = document.createElement("m3e-snackbar");
77
- snackbar.append(document.createTextNode(message));
78
-
79
- let actualOptions: SnackbarOptions | undefined = undefined;
80
-
81
- if (typeof actionOrDismissibleOrOptions == "string") {
82
- snackbar.action = actionOrDismissibleOrOptions;
83
- } else if (typeof actionOrDismissibleOrOptions == "boolean") {
84
- snackbar.dismissible = actionOrDismissibleOrOptions;
85
- } else {
86
- actualOptions = actionOrDismissibleOrOptions;
87
- }
88
-
89
- if (typeof dismissibleOrOptions == "boolean") {
90
- snackbar.dismissible = dismissibleOrOptions;
91
- } else {
92
- actualOptions = dismissibleOrOptions;
93
- }
94
-
95
- if (options) {
96
- actualOptions = options;
97
- }
98
-
99
- if (actualOptions?.duration !== undefined) {
100
- snackbar.duration = actualOptions.duration;
101
- }
102
- if (actualOptions?.closeLabel) {
103
- snackbar.closeLabel = actualOptions.closeLabel;
104
- }
105
-
106
- snackbar.addEventListener("toggle", (e) => {
107
- if (e.newState === "closed") {
108
- if (prefersReducedMotion()) {
109
- snackbar.remove();
110
- } else {
111
- snackbar.addEventListener("transitionend", () => snackbar.remove(), { once: true });
112
- }
113
-
114
- if (snackbar.isActionTaken) {
115
- actualOptions?.actionCallback?.();
116
- }
117
- }
118
- });
119
-
120
- (document.querySelector("m3e-theme") ?? document.body).append(snackbar);
121
- snackbar.showPopover();
122
- }
123
-
124
- /** Dismisses the currently visible snackbar. */
125
- static dismiss(): void {
126
- M3eSnackbarElement.current?.hidePopover();
127
- }
128
- }
129
-
130
- declare global {
131
- /** Presents short updates about application processes at the bottom of the screen from anywhere in an application. */
132
- var M3eSnackbar: M3eSnackbar;
133
- }
134
-
135
- globalThis.M3eSnackbar = M3eSnackbar;