@cas-smartdesign/snackbar 3.0.1

package/dist/snackbar.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, TemplateResult, PropertyValues } from "lit";
+import type { IAnimationParams } from "./types";
+declare global {
+    interface HTMLElementTagNameMap {
+        [Snackbar.ID]: Snackbar;
+    }
+}
+declare class Snackbar extends LitElement {
+    static readonly ID = "sd-snackbar";
+    static ensureDefined: () => void;
+    animationIn: IAnimationParams;
+    animationOut: IAnimationParams;
+    static get styles(): import("lit").CSSResult[];
+    firstUpdated(changedProperties: PropertyValues): void;
+    close(): Promise<void>;
+    render(): TemplateResult;
+    private collapse;
+}
+export { Snackbar };
+export * from "./snackbar-provider";
+export type * from "./types";

package/dist/snackbar.mjs

@@ -0,0 +1,186 @@
+import { LitElement as l, css as m, unsafeCSS as p, html as a, render as b } from "lit";
+import { property as f } from "lit/decorators/property.js";
+import { repeat as k } from "lit/directives/repeat.js";
+import { ifDefined as S } from "lit/directives/if-defined.js";
+const g = ":host{display:block;contain:layout;margin-top:6px;margin-bottom:6px;position:relative;transition:height var(--sd-snackbar-height-transition-duration, .4s)}.root{display:flex;width:100%;height:100%}", x = ":host{position:fixed;display:flex;flex-direction:column;box-sizing:border-box;max-height:100%;contain:layout}:host([vertical-position=bottom]){flex-direction:column-reverse;bottom:var(--sd-snackbar-vertical-offset, 14px)}:host([vertical-position=top]){top:var(--sd-snackbar-vertical-offset, 14px)}:host([horizontal-position=left]){left:var(--sd-snackbar-horizontal-offset, 20px)}:host([horizontal-position=center]){left:50%;transform:translate(-50%)}:host([horizontal-position=right]){right:var(--sd-snackbar-horizontal-offset, 20px)}";
+var q = Object.defineProperty, y = Object.getOwnPropertyDescriptor, v = (h, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? y(e, t) : e, o = h.length - 1, d; o >= 0; o--)
+    (d = h[o]) && (s = (i ? d(e, t, s) : d(s)) || s);
+  return i && s && q(e, t, s), s;
+}, n;
+const c = (n = class extends l {
+  constructor() {
+    super(...arguments), this.verticalPosition = "bottom", this.horizontalPosition = "left", this.maxStack = 3, this.shouldCloseOldest = !1, this._queue = [], this._rendered = [];
+  }
+  static get styles() {
+    return [
+      m`
+                ${p(x)}
+            `
+    ];
+  }
+  render() {
+    return this.renderSnackbars(), a` <slot></slot> `;
+  }
+  renderSnackbars() {
+    b(
+      a`
+                ${k(
+        this._rendered,
+        ({ id: e }) => e,
+        (e) => this.renderSnackbar(e)
+      )}
+            `,
+      this
+    );
+  }
+  open(e) {
+    this._queue.push({ snackbar: e, direction: "in" }), this.updateQueue();
+  }
+  close(e) {
+    e ? this.requestSnackbarClose(e) : this._rendered.forEach(({ id: t }) => this.requestSnackbarClose(t));
+  }
+  renderSnackbar({ message: e, options: t = {} }) {
+    var i;
+    return a`
+            <sd-snackbar
+                class="${S(((i = t.classNames) == null ? void 0 : i.length) > 0 ? t.classNames.join(" ") : void 0)}"
+                .animationIn="${this.animationIn}"
+                .animationOut="${this.animationOut}"
+            >
+                ${this.renderSnackbarContent(e, t == null ? void 0 : t.closeAction)}
+            </sd-snackbar>
+        `;
+  }
+  renderSnackbarContent(e, t) {
+    return a` ${e}${t || ""} `;
+  }
+  updateQueue() {
+    if (this._queue.length === 0)
+      return;
+    const { direction: e, snackbar: t } = this._queue[0];
+    e === "in" ? this._rendered.length === this.maxStack ? this.requestOldestSnackbarClose() : (this.prepareSnackbarForRender(t), this._rendered.push(t), this.renderSnackbars(), this._queue.shift(), this.updateQueue()) : this.requestSnackbarClose(t.id);
+  }
+  requestOldestSnackbarClose() {
+    const e = this._rendered.find(
+      ({ requestClose: t, options: i }) => !t && (i == null ? void 0 : i.autoHideDuration)
+    );
+    e && (e.requestClose = !0, this._queue.unshift({ snackbar: e, direction: "out" }), this.updateQueue());
+  }
+  requestSnackbarClose(e) {
+    const t = this._rendered.findIndex((i) => i.id === e);
+    if (t !== -1) {
+      const i = this._rendered[t];
+      i.closing || (i.requestClose = !0, window.clearTimeout(i.timer), this.closeSnackbar(t));
+    }
+  }
+  closeSnackbar(e) {
+    var s;
+    const t = this._rendered[e], i = this.children.item(e);
+    i && (t.closing = !0, (s = t.options) != null && s.waitOnHover && i.matches(":hover") ? i.addEventListener("mouseleave", () => {
+      i.close().then(() => {
+        this.removeSnackbarAndUpdate(t);
+      });
+    }) : i.close().then(() => {
+      this.removeSnackbarAndUpdate(t);
+    }));
+  }
+  removeSnackbarAndUpdate(e) {
+    this.removeSnackbarFromQueue(e), this.removeSnackbarFromRendered(e), this.requestUpdate(), this.updateComplete.then(() => this.updateQueue());
+  }
+  removeSnackbarFromQueue(e) {
+    const t = this._queue.findIndex(({ snackbar: i }) => i.id === e.id);
+    t !== -1 && this._queue.splice(t, 1);
+  }
+  removeSnackbarFromRendered(e) {
+    const t = this._rendered.findIndex((i) => i.id == e.id);
+    t !== -1 && this._rendered.splice(t, 1);
+  }
+  setupTimeoutForAutoHideSnackbar(e) {
+    e.timer = window.setTimeout(() => {
+      this._queue.push({ snackbar: e, direction: "out" }), this.updateQueue();
+    }, e.options.autoHideDuration);
+  }
+  prepareSnackbarForRender(e) {
+    const { options: t, message: i } = e;
+    if (i.slot = "message", t) {
+      const { autoHideDuration: s, waitForMouseMove: o } = t;
+      s && (o ? this.listenForMouseMove(e) : this.setupTimeoutForAutoHideSnackbar(e)), this.setupAction(e);
+    }
+  }
+  listenForMouseMove(e) {
+    window.addEventListener("mousemove", this.handleWindowMouseMove.bind(this, e), { once: !0 });
+  }
+  handleWindowMouseMove(e) {
+    this.setupTimeoutForAutoHideSnackbar(e);
+  }
+  setupAction(e) {
+    const {
+      options: { closeAction: t }
+    } = e;
+    t && (t.addEventListener("click", () => {
+      this._queue.unshift({ snackbar: e, direction: "out" }), this.updateQueue();
+    }), t.slot = "action");
+  }
+}, n.ID = "sd-snackbar-provider", n.ensureDefined = () => {
+  u.ensureDefined(), customElements.get(n.ID) || customElements.define(n.ID, n);
+}, n);
+v([
+  f({ type: String, reflect: !0, attribute: "vertical-position" })
+], c.prototype, "verticalPosition", 2);
+v([
+  f({ type: String, reflect: !0, attribute: "horizontal-position" })
+], c.prototype, "horizontalPosition", 2);
+let F = c;
+const r = class r extends l {
+  static get styles() {
+    return [
+      m`
+                ${p(g)}
+            `
+    ];
+  }
+  firstUpdated(e) {
+    if (super.firstUpdated(e), this.animationIn) {
+      const { keyframes: t, options: i } = this.animationIn;
+      this.animate(t, i);
+    }
+  }
+  close() {
+    return new Promise((e) => {
+      if (this.animationOut) {
+        const { keyframes: t, options: i } = this.animationOut, s = this.animate(t, i);
+        s.onfinish = () => {
+          this.collapse(), this.addEventListener("transitionend", ({ propertyName: o }) => {
+            o === "height" && e();
+          });
+        };
+      } else
+        this.collapse(), e();
+    });
+  }
+  render() {
+    return a`
+            <div class="root">
+                <div class="message">
+                    <slot name="message"></slot>
+                </div>
+                <div class="action">
+                    <slot name="action"></slot>
+                </div>
+            </div>
+        `;
+  }
+  collapse() {
+    this.style.height = "0", this.style.opacity = "0";
+  }
+};
+r.ID = "sd-snackbar", r.ensureDefined = () => {
+  customElements.get(r.ID) || customElements.define(r.ID, r);
+};
+let u = r;
+export {
+  u as Snackbar,
+  F as SnackbarProvider
+};
+//# sourceMappingURL=snackbar.mjs.map

package/dist/snackbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.mjs","sources":["../snackbar-provider.ts","../snackbar.ts"],"sourcesContent":["import { LitElement, TemplateResult, html, unsafeCSS, css, render } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport type { VerticalPosition, HorizontalPosition, ISnackbar, IAnimationParams, IAction } from \"./types\";\nimport { Snackbar } from \"./snackbar\";\n\nimport style from \"./scss/provider.scss?inline\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [SnackbarProvider.ID]: SnackbarProvider;\n    }\n}\n\nclass SnackbarProvider extends LitElement {\n    public static readonly ID = \"sd-snackbar-provider\";\n    public static ensureDefined = (): void => {\n        Snackbar.ensureDefined();\n        if (!customElements.get(SnackbarProvider.ID)) {\n            customElements.define(SnackbarProvider.ID, SnackbarProvider);\n        }\n    };\n    @property({ type: String, reflect: true, attribute: \"vertical-position\" })\n    public verticalPosition: VerticalPosition = \"bottom\";\n    @property({ type: String, reflect: true, attribute: \"horizontal-position\" })\n    public horizontalPosition: HorizontalPosition = \"left\";\n    public maxStack = 3;\n    public animationIn: IAnimationParams;\n    public animationOut: IAnimationParams;\n    public shouldCloseOldest = false;\n\n    private _queue: IAction[] = [];\n    private _rendered: ISnackbar[] = [];\n\n    static get styles() {\n        return [\n            css`\n                ${unsafeCSS(style)}\n            `,\n        ];\n    }\n\n    public render(): TemplateResult {\n        this.renderSnackbars();\n        return html` <slot></slot> `;\n    }\n\n    public renderSnackbars(): void {\n        render(\n            html`\n                ${repeat(\n                    this._rendered,\n                    ({ id }) => id,\n                    (snackbar) => this.renderSnackbar(snackbar),\n                )}\n            `,\n            this,\n        );\n    }\n\n    public open(snackbar: ISnackbar): void {\n        this._queue.push({ snackbar, direction: \"in\" });\n        this.updateQueue();\n    }\n\n    public close(snackId?: string): void {\n        snackId\n            ? this.requestSnackbarClose(snackId)\n            : this._rendered.forEach(({ id }) => this.requestSnackbarClose(id));\n    }\n\n    private renderSnackbar({ message, options = {} }: ISnackbar): TemplateResult {\n        return html`\n            <sd-snackbar\n                class=\"${ifDefined(options.classNames?.length > 0 ? options.classNames.join(\" \") : undefined)}\"\n                .animationIn=\"${this.animationIn}\"\n                .animationOut=\"${this.animationOut}\"\n            >\n                ${this.renderSnackbarContent(message, options?.closeAction)}\n            </sd-snackbar>\n        `;\n    }\n\n    private renderSnackbarContent(message: HTMLElement, action?: HTMLElement): TemplateResult {\n        return html` ${message}${action ? action : \"\"} `;\n    }\n\n    private updateQueue(): void {\n        if (this._queue.length === 0) {\n            return;\n        }\n\n        const { direction, snackbar } = this._queue[0];\n        if (direction === \"in\") {\n            if (this._rendered.length === this.maxStack) {\n                this.requestOldestSnackbarClose();\n            } else {\n                this.prepareSnackbarForRender(snackbar);\n                this._rendered.push(snackbar);\n                this.renderSnackbars();\n                this._queue.shift();\n                this.updateQueue();\n            }\n        } else {\n            this.requestSnackbarClose(snackbar.id);\n        }\n    }\n\n    private requestOldestSnackbarClose(): void {\n        const oldestNotMarkedForLeave = this._rendered.find(\n            ({ requestClose, options }) => !requestClose && options?.autoHideDuration,\n        );\n        if (oldestNotMarkedForLeave) {\n            oldestNotMarkedForLeave.requestClose = true;\n            this._queue.unshift({ snackbar: oldestNotMarkedForLeave, direction: \"out\" });\n            this.updateQueue();\n        }\n    }\n\n    private requestSnackbarClose(id?: string): void {\n        const ind = this._rendered.findIndex((snack) => snack.id === id);\n        if (ind !== -1) {\n            const snackbar = this._rendered[ind];\n            if (!snackbar.closing) {\n                snackbar.requestClose = true;\n                window.clearTimeout(snackbar.timer);\n                this.closeSnackbar(ind);\n            }\n        }\n    }\n\n    private closeSnackbar(ind: number): void {\n        const snackbar = this._rendered[ind];\n        const snackbarElement = (this.children as HTMLCollectionOf<Snackbar>).item(ind);\n        if (snackbarElement) {\n            snackbar.closing = true;\n            if (snackbar.options?.waitOnHover && snackbarElement.matches(\":hover\")) {\n                snackbarElement.addEventListener(\"mouseleave\", () => {\n                    snackbarElement.close().then(() => {\n                        this.removeSnackbarAndUpdate(snackbar);\n                    });\n                });\n            } else {\n                snackbarElement.close().then(() => {\n                    this.removeSnackbarAndUpdate(snackbar);\n                });\n            }\n        }\n    }\n\n    private removeSnackbarAndUpdate(snackbar: ISnackbar): void {\n        this.removeSnackbarFromQueue(snackbar);\n        this.removeSnackbarFromRendered(snackbar);\n\n        this.requestUpdate();\n        this.updateComplete.then(() => this.updateQueue());\n    }\n\n    private removeSnackbarFromQueue(snack: ISnackbar): void {\n        const ind = this._queue.findIndex(({ snackbar }) => snackbar.id === snack.id);\n        if (ind !== -1) {\n            this._queue.splice(ind, 1);\n        }\n    }\n\n    private removeSnackbarFromRendered(snack: ISnackbar): void {\n        const ind = this._rendered.findIndex((snackbar) => snackbar.id == snack.id);\n        if (ind !== -1) {\n            this._rendered.splice(ind, 1);\n        }\n    }\n\n    private setupTimeoutForAutoHideSnackbar(snackbar: ISnackbar): void {\n        snackbar.timer = window.setTimeout(() => {\n            this._queue.push({ snackbar, direction: \"out\" });\n            this.updateQueue();\n        }, snackbar.options.autoHideDuration);\n    }\n\n    private prepareSnackbarForRender(snackbar: ISnackbar): void {\n        const { options, message } = snackbar;\n        message.slot = \"message\";\n        if (options) {\n            const { autoHideDuration, waitForMouseMove } = options;\n            if (autoHideDuration) {\n                if (waitForMouseMove) {\n                    this.listenForMouseMove(snackbar);\n                } else {\n                    this.setupTimeoutForAutoHideSnackbar(snackbar);\n                }\n            }\n\n            this.setupAction(snackbar);\n        }\n    }\n\n    private listenForMouseMove(snackbar: ISnackbar): void {\n        window.addEventListener(\"mousemove\", this.handleWindowMouseMove.bind(this, snackbar), { once: true });\n    }\n\n    private handleWindowMouseMove(snackbar: ISnackbar): void {\n        this.setupTimeoutForAutoHideSnackbar(snackbar);\n    }\n\n    private setupAction(snackbar: ISnackbar): void {\n        const {\n            options: { closeAction: action },\n        } = snackbar;\n        if (action) {\n            action.addEventListener(\"click\", () => {\n                this._queue.unshift({ snackbar, direction: \"out\" });\n                this.updateQueue();\n            });\n            action.slot = \"action\";\n        }\n    }\n}\n\nexport { SnackbarProvider };\n","import { LitElement, TemplateResult, html, unsafeCSS, PropertyValues, css } from \"lit\";\nimport type { IAnimationParams } from \"./types\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [Snackbar.ID]: Snackbar;\n    }\n}\nimport style from \"./scss/snackbar.scss?inline\";\n\nclass Snackbar extends LitElement {\n    public static readonly ID = \"sd-snackbar\";\n    public static ensureDefined = (): void => {\n        if (!customElements.get(Snackbar.ID)) {\n            customElements.define(Snackbar.ID, Snackbar);\n        }\n    };\n\n    public animationIn: IAnimationParams;\n    public animationOut: IAnimationParams;\n\n    static get styles() {\n        return [\n            css`\n                ${unsafeCSS(style)}\n            `,\n        ];\n    }\n\n    public firstUpdated(changedProperties: PropertyValues): void {\n        super.firstUpdated(changedProperties);\n        if (this.animationIn) {\n            const { keyframes, options } = this.animationIn;\n            this.animate(keyframes, options);\n        }\n    }\n\n    public close(): Promise<void> {\n        return new Promise<void>((resolve) => {\n            if (this.animationOut) {\n                const { keyframes, options } = this.animationOut;\n                const animation = this.animate(keyframes, options);\n                animation.onfinish = () => {\n                    // height and opacity are needed to be set to 0\n                    // so that moving newer snackbars can be animated\n                    this.collapse();\n                    this.addEventListener(\"transitionend\", ({ propertyName }) => {\n                        if (propertyName === \"height\") {\n                            resolve();\n                        }\n                    });\n                };\n            } else {\n                this.collapse();\n                resolve();\n            }\n        });\n    }\n\n    public render(): TemplateResult {\n        return html`\n            <div class=\"root\">\n                <div class=\"message\">\n                    <slot name=\"message\"></slot>\n                </div>\n                <div class=\"action\">\n                    <slot name=\"action\"></slot>\n                </div>\n            </div>\n        `;\n    }\n\n    private collapse(): void {\n        this.style.height = \"0\";\n        this.style.opacity = \"0\";\n    }\n}\n\nexport { Snackbar };\nexport * from \"./snackbar-provider\";\nexport type * from \"./types\";\n"],"names":["_SnackbarProvider","_a","LitElement","css","unsafeCSS","style","html","render","repeat","id","snackbar","snackId","message","options","ifDefined","action","direction","oldestNotMarkedForLeave","requestClose","ind","snack","snackbarElement","autoHideDuration","waitForMouseMove","Snackbar","__decorateClass","property","SnackbarProvider","_Snackbar","changedProperties","keyframes","resolve","animation","propertyName"],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,92 @@
+/**
+ * The possible values for the vertical position of the snackbar provider.
+ */
+type VerticalPosition = "top" | "bottom";
+/**
+ * The possible values for the horizontal position of the snackbar provider.
+ */
+type HorizontalPosition = "left" | "center" | "right";
+/**
+ * The direction of an action.
+ */
+type ActionDirection = "in" | "out";
+/**
+ * The object defining the content and configuration for a snackbar to be opened.
+ */
+interface ISnackbar {
+    /**
+     * The identifier of the snackbar.
+     */
+    id: string;
+    /**
+     * The html element used for the message part of the snackbar.
+     */
+    message: HTMLElement;
+    /**
+     * The id for the setTimout invoked for timing the auto hiding feature.
+     * This property is for internal use only.
+     */
+    timer?: number;
+    /**
+     * Defines whether if the snackbar is currently closing.
+     */
+    closing?: boolean;
+    /**
+     * Defines whether if the snackbar should close after other animations are done.
+     * This property is for internal use only.
+     */
+    requestClose?: boolean;
+    /**
+     * Defines whether if the snackbar is currently hovered on.
+     * This property is for internal use only.
+     */
+    hovered?: boolean;
+    /**
+     * The configuration options for the snackbar.
+     */
+    options?: ISnackbarOptions;
+}
+/**
+ * The configuration options for a snackbar.
+ */
+interface ISnackbarOptions {
+    /**
+     * Defines the amount of milliseconds before auto hiding the snackbar.
+     * If omitted the snackbar will be persistent.
+     */
+    autoHideDuration?: number;
+    /**
+     * Defines the element that goes in the action slot of the snackbar.
+     * This is useful for adding a close button for a persistent snackbar.
+     */
+    closeAction?: HTMLElement;
+    /**
+     * Defines whether if the snackbar should wait for a mouse move before setting up the timer for auto hiding.
+     */
+    waitForMouseMove?: boolean;
+    /**
+     * Defines the classes applied to the given snackbar.
+     * It is useful for applying styles for specific snackbars
+     */
+    classNames?: string[];
+    /**
+     * Defines whether if the snackbar should wait if it is currently hovered.
+     */
+    waitOnHover?: boolean;
+}
+/**
+ * The parameters for the opening or closing animation of a snackbar.
+ */
+interface IAnimationParams {
+    keyframes: Keyframe[];
+    options: KeyframeAnimationOptions;
+}
+/**
+ * Defines an action that should be performed on a snackbar.
+ * This is for internal usage only.
+ */
+interface IAction {
+    snackbar: ISnackbar;
+    direction: ActionDirection;
+}
+export type { VerticalPosition, HorizontalPosition, ISnackbar, ISnackbarOptions, IAnimationParams, IAction };

package/npm-third-party-licenses.json

@@ -0,0 +1,192 @@
+{
+    "@cypress/vite-dev-server@5.0.7": {
+        "licenses": "MIT",
+        "repository": "https://github.com/cypress-io/cypress",
+        "licenseUrl": "https://github.com/cypress-io/cypress/tree/develop/npm/vite-dev-server#readme"
+    },
+    "@rollup/plugin-node-resolve@15.2.3": {
+        "licenses": "MIT",
+        "repository": "https://github.com/rollup/plugins",
+        "licenseUrl": "https://github.com/rollup/plugins/raw/HEAD/LICENSE"
+    },
+    "@types/node@20.10.6": {
+        "licenses": "MIT",
+        "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
+        "licenseUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/raw/HEAD/LICENSE"
+    },
+    "@types/postcss-prefix-selector@1.16.3": {
+        "licenses": "MIT",
+        "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
+        "licenseUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/raw/HEAD/LICENSE"
+    },
+    "@typescript-eslint/eslint-plugin@6.17.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/typescript-eslint/typescript-eslint",
+        "licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
+    },
+    "@typescript-eslint/parser@6.17.0": {
+        "licenses": "BSD-2-Clause",
+        "repository": "https://github.com/typescript-eslint/typescript-eslint",
+        "licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
+    },
+    "@vitest/coverage-v8@1.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitest-dev/vitest",
+        "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE"
+    },
+    "@vitest/ui@1.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitest-dev/vitest",
+        "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE"
+    },
+    "axe-core@4.8.3": {
+        "licenses": "MPL-2.0",
+        "repository": "https://github.com/dequelabs/axe-core",
+        "licenseUrl": "https://github.com/dequelabs/axe-core/raw/HEAD/LICENSE"
+    },
+    "cypress-axe@1.5.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/component-driven/cypress-axe",
+        "licenseUrl": "https://github.com/component-driven/cypress-axe/raw/HEAD/License.md"
+    },
+    "cypress-real-events@1.13.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/dmtrKovalenko/cypress-real-events",
+        "licenseUrl": "https://github.com/dmtrKovalenko/cypress-real-events"
+    },
+    "cypress@13.6.2": {
+        "licenses": "MIT",
+        "repository": "https://github.com/cypress-io/cypress",
+        "licenseUrl": "https://cypress.io"
+    },
+    "esbuild@0.19.11": {
+        "licenses": "MIT",
+        "repository": "https://github.com/evanw/esbuild",
+        "licenseUrl": "https://github.com/evanw/esbuild/raw/HEAD/LICENSE.md"
+    },
+    "eslint-config-google@0.14.0": {
+        "licenses": "Apache-2.0",
+        "repository": "https://github.com/google/eslint-config-google",
+        "licenseUrl": "https://github.com/google/eslint-config-google/raw/HEAD/LICENSE"
+    },
+    "eslint-config-prettier@9.1.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/prettier/eslint-config-prettier",
+        "licenseUrl": "https://github.com/prettier/eslint-config-prettier/raw/HEAD/LICENSE"
+    },
+    "eslint@8.56.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/eslint/eslint",
+        "licenseUrl": "https://github.com/eslint/eslint/raw/HEAD/LICENSE"
+    },
+    "github-markdown-css@5.5.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/sindresorhus/github-markdown-css",
+        "licenseUrl": "https://github.com/sindresorhus/github-markdown-css/raw/HEAD/license"
+    },
+    "highlight.js@11.9.0": {
+        "licenses": "BSD-3-Clause",
+        "repository": "https://github.com/highlightjs/highlight.js",
+        "licenseUrl": "https://github.com/highlightjs/highlight.js/raw/HEAD/LICENSE"
+    },
+    "junit-report-builder@3.1.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/davidparsson/junit-report-builder",
+        "licenseUrl": "https://github.com/davidparsson/junit-report-builder/raw/HEAD/LICENSE"
+    },
+    "lint-staged@15.2.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/okonet/lint-staged",
+        "licenseUrl": "https://github.com/okonet/lint-staged/raw/HEAD/LICENSE"
+    },
+    "lit@2.8.0": {
+        "licenses": "BSD-3-Clause",
+        "repository": "https://github.com/lit/lit",
+        "licenseUrl": "https://github.com/lit/lit/raw/HEAD/LICENSE"
+    },
+    "marked@11.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/markedjs/marked",
+        "licenseUrl": "https://github.com/markedjs/marked/raw/HEAD/LICENSE.md"
+    },
+    "postcss-prefix-selector@1.16.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/RadValentin/postcss-prefix-selector",
+        "licenseUrl": "https://github.com/RadValentin/postcss-prefix-selector/raw/HEAD/LICENSE"
+    },
+    "postcss@8.4.32": {
+        "licenses": "MIT",
+        "repository": "https://github.com/postcss/postcss",
+        "licenseUrl": "https://github.com/postcss/postcss/raw/HEAD/LICENSE"
+    },
+    "prettier@3.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/prettier/prettier",
+        "licenseUrl": "https://github.com/prettier/prettier/raw/HEAD/LICENSE"
+    },
+    "resolve-pkg@2.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/sindresorhus/resolve-pkg",
+        "licenseUrl": "https://github.com/sindresorhus/resolve-pkg/raw/HEAD/license"
+    },
+    "sass@1.69.6": {
+        "licenses": "MIT",
+        "repository": "https://github.com/sass/dart-sass",
+        "licenseUrl": "https://github.com/sass/dart-sass/raw/HEAD/LICENSE"
+    },
+    "stylelint-config-recommended-scss@14.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint-scss/stylelint-config-recommended-scss",
+        "licenseUrl": "https://github.com/stylelint-scss/stylelint-config-recommended-scss/raw/HEAD/LICENSE"
+    },
+    "stylelint-config-standard@36.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint/stylelint-config-standard",
+        "licenseUrl": "https://github.com/stylelint/stylelint-config-standard/raw/HEAD/LICENSE"
+    },
+    "stylelint-scss@6.0.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint-scss/stylelint-scss",
+        "licenseUrl": "https://github.com/stylelint-scss/stylelint-scss/raw/HEAD/LICENSE"
+    },
+    "stylelint@16.1.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/stylelint/stylelint",
+        "licenseUrl": "https://github.com/stylelint/stylelint/raw/HEAD/LICENSE"
+    },
+    "tsup@8.0.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/egoist/tsup",
+        "licenseUrl": "https://github.com/egoist/tsup/raw/HEAD/LICENSE"
+    },
+    "turbo@1.11.2": {
+        "licenses": "MPL-2.0",
+        "repository": "https://github.com/vercel/turbo",
+        "licenseUrl": "https://github.com/vercel/turbo/raw/HEAD/LICENSE"
+    },
+    "typescript@5.3.3": {
+        "licenses": "Apache-2.0",
+        "repository": "https://github.com/Microsoft/TypeScript",
+        "licenseUrl": "https://github.com/Microsoft/TypeScript/raw/HEAD/LICENSE.txt"
+    },
+    "vite-tsconfig-paths@4.2.3": {
+        "licenses": "MIT",
+        "repository": "https://github.com/aleclarson/vite-tsconfig-paths",
+        "licenseUrl": "https://github.com/aleclarson/vite-tsconfig-paths/raw/HEAD/LICENSE"
+    },
+    "vite@5.0.10": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitejs/vite",
+        "licenseUrl": "https://github.com/vitejs/vite/raw/HEAD/LICENSE.md"
+    },
+    "vitest@1.1.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/vitest-dev/vitest",
+        "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE.md"
+    },
+    "yargs@17.7.2": {
+        "licenses": "MIT",
+        "repository": "https://github.com/yargs/yargs",
+        "licenseUrl": "https://github.com/yargs/yargs/raw/HEAD/LICENSE"
+    }
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@cas-smartdesign/snackbar",
+  "version": "3.0.1",
+  "description": "A snackbar element based on LitElement",
+  "main": "dist/snackbar-with-externals.js",
+  "module": "dist/snackbar.mjs",
+  "license": "SEE LICENSE IN LICENSE",
+  "types": "dist/snackbar.d.ts",
+  "dependencies": {
+    "lit": "^2.8.0"
+  },
+  "files": [
+    "dist",
+    "npm-third-party-licenses.json"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@cas-smartdesign/element-preview": "^0.2.1",
+    "@cas-smartdesign/license-generator": "^1.6.1"
+  },
+  "scripts": {
+    "version": "pnpm version",
+    "generate-declaration": "tsc -p tsconfig.types.json",
+    "build:no-license": "vite build && pnpm generate-declaration && vite build --mode documentation",
+    "build": "pnpm generate-license && pnpm build:no-license",
+    "watch": "vite build --watch",
+    "dev": "vite",
+    "generate-license": "sd-license-generator --r ../../"
+  }
+}

package/readme.md

@@ -0,0 +1,81 @@
+# @cas-smartdesign/snackbar
+
+A highly configurable element for displaying toast notifications based on [lit-element](https://github.com/Polymer/lit-element).
+
+## Attributes
+
+- `vertical-position`: VerticalPosition
+  - Defines the vertical anchor position of the
+- `horizontal-position`: HorizontalPosition
+  - Defines the horizontal anchor position
+
+## Properties
+
+- `verticalPosition`, `horizontalPosition`
+  - Reflects the corresponding attribute
+- `maxStack`: number
+  - Defines the max number of visible snackbar at the same time
+- `animationIn`: AnimationParams
+  - Defines the animation played when a snackbar enters the screen
+- `animationOut`: AnimationParams
+  - Defines the animation played when a snackbar leaves the screen
+
+## Public TypeScript Types
+
+- `VerticalPosition`
+  - Defines the possible values for the vertical position
+  - Possible values: `top`, `bottom`
+- `HorizontalPosition`
+  - Defines the possible values for the horizontal position
+  - Possible values: `left`, `center`, `right`
+- `ISnackbar`
+  - `id`: string
+  - `message`: HTMLElement
+  - `options`: ISnackbarOptions
+- `ISnackbarOptions`
+  - Defines the configurable properties
+  - `autoHideDuration`: number
+    - Defines the amount of milliseconds before auto hiding snackbar
+    - If omitted then the snackbar will be persistent
+  - `classNames`: string[]
+    - Defines the classes applied to the given snackbar
+    - It is useful for applying styles for specific snackbars
+  - `waitForMouseMove`: boolean
+    - Defines whether if the snackbar should wait for a mouse move before setting up the timer for auto hiding
+  - `closeAction`: HTMLElement
+    - Defines the element that goes in the action slot of the snackbar
+    - This is useful for adding a close button for a persistent snackbar
+  - `waitOnHover`: boolean
+    - Defines whether if the snackbar should wait before closing it is currently being hovered on.
+- `AnimationParams`
+  - The element uses the Web Animations API for the animations, and this interface defines the parameters for the animations.
+  - Properties:
+    - keyframes: Keyframe[]
+    - options: KeyFrameAnimationOptions
+
+## Custom CSS Properties
+
+- `--sd-snackbar-height-transition-duration`: defines the duration of the collapsing animation of the snackbar which is played after the snackbar left the screen
+- `--sd-snackbar-vertical-offset`: defines the vertical gap between the edge of the screen and the snackbar
+- `--sd-snackbar-horizontal-offset`: defines the horizontal gap between the edge of the screen and the snackbar
+
+## Public methods
+
+- `open`: (snackbar: ISnackbar) => void
+  - Use for opening a snackbar
+- `close`: (id?: string) => void
+  - Use for closing snackbar(s)
+  - If the id parameter is omitted then all snackbar are closed
+  - If a correct id is supplied then the snackbar with that specific id is closed
+
+## Customization
+
+- Style
+  - Custom styled snackbars can be achieved by applying css to sd-snackbar and to message and action HTML elements
+- Animation
+  - Custom animations can be set using the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
+  - The animation played when:
+    - opening a snackbar can be set by the animationIn property on the SnackbarProvider
+    - closing a snackbar can be set by the animationOut property on the SnackbarProvider
+
+## Demo