@digital-realty/ix-toast 1.0.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ix-toast
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,78 @@
+# \<ix-toast>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i ix-toast
+```
+
+## Usage
+
+```html
+<script type="module">
+  import '@digital-realty/ix-toast/ix-toasters.js';
+</script>
+
+<ix-toasters></ix-toasters>
+
+This will setup an event listener to add a toaster with toast. See the demo for a working example.
+```
+
+## Linting and formatting
+
+To scan the project for linting and formatting errors, run
+
+```bash
+npm run lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+npm run format
+```
+
+## Testing with Web Test Runner
+
+To execute a single test run:
+
+```bash
+npm run test
+```
+
+To run the tests in interactive watch mode run:
+
+```bash
+npm run test:watch
+```
+
+## Demoing with Storybook
+
+To run a local instance of Storybook for your component, run
+
+```bash
+npm run storybook
+```
+
+To build a production version of Storybook, run
+
+```bash
+npm run storybook:build
+```
+
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/demo/ToastDemo.js

@@ -0,0 +1,46 @@
+import { html, css, LitElement } from 'lit';
+
+class ToastDemo extends LitElement {
+  static styles = css`
+    .bg-green-500 {
+        background-color: rgb(34 197 94);
+    }
+
+    .p-2 {
+        padding: 0.5rem; 
+    }
+
+    .m-2 {
+        margin: 0.5rem; 
+    }
+  `;
+
+  static properties = {
+    id: {type: String},
+    forceClose: {type: Boolean}
+  };
+
+  closeToast() {
+    this.dispatchEvent(new CustomEvent('remove-toast', {
+      detail: {
+        ids: this.id,
+        forceClose: this.forceClose
+       },
+      bubbles: true,
+      composed: true
+    }));
+  };
+
+    render() {
+    return html`
+        <div class="bg-green-500 p-2 m-2">
+            <button @click=${()=>this.closeToast()}>close</button>
+            <slot></slot>
+        </div>
+    `
+    };
+
+}
+
+window.customElements.define('toast-demo', ToastDemo);
+

package/demo/ToasterDemo.js

@@ -0,0 +1,175 @@
+import { render, html, css, LitElement } from 'lit';
+import { v4 as uuidv4 } from 'uuid';
+import './ToastDemo.js';
+import '../dist/src/ix-toasters.js';
+import '../dist/src/ix-message-toast.js';
+
+
+class ToasterDemo extends LitElement {
+  static styles = css`
+    .bg-green-500 {
+        background-color: rgb(34 197 94);
+    }
+
+    .p-2 {
+        padding: 0.5rem; 
+    }
+
+    .m-2 {
+        margin: 0.5rem; 
+    }
+  `;
+
+    static properties = {
+        _uuid: {state: true},
+        _popupNo: {state:true}
+    };
+
+
+  constructor() {
+    super();
+    this._uuid = uuidv4();
+    this._popupNo = 1;
+  }
+
+
+    handleSubmit(e) {
+        e.preventDefault();
+        const formData = new FormData(e.target);
+//        formData.forEach((value, key) => console.log(`${key}: ${value}`));
+        const event = new CustomEvent("add-toast", { detail: {
+            id: formData.get('id'),
+            content: html`<toast-demo ?forceClose=${formData.get('forceClose') === 'on' ? true : false} .id=${formData.get('id')}>${formData.get('content')}</toast-demo>`,
+            autoClose: parseInt(formData.get('autoClose')),
+            durationOut: formData.get('durationOut'),
+            vertical: formData.get('vertical'),
+            horizontal: formData.get('horizontal'),
+            animated: formData.get('animated') === 'on' ? true : false,
+            above: formData.get('above') === 'on' ? true : false,
+        } });
+        window.dispatchEvent(event);
+        this._uuid = uuidv4();
+        this._popupNo += 1;
+        return formData;
+    }
+
+    createToast = ({id, content, autoClose, durationOut, vertical, horizontal, animated, above}) => {
+      window.dispatchEvent(
+        new CustomEvent("add-toast", { detail: {
+                  id,
+                  content,
+                  autoClose,
+                  durationOut,
+                  vertical,
+                  horizontal,
+                  animated,
+                  above,
+              } })
+      );
+  }
+
+    createMessageToast = ({id, content, autoClose, durationOut, vertical, horizontal, animated, above}) => {
+      window.dispatchEvent(
+        new CustomEvent("add-toast", { detail: {
+                  id,
+                  content: html`
+                    <ix-message-toast toastId=${id}>
+                        <div slot="heading">A heading</div>
+                        Hello world success
+                    </ix-message-toast>`,
+                  autoClose,
+                  durationOut,
+                  vertical,
+                  horizontal,
+                  animated,
+                  above,
+              } })
+      );
+  }
+
+
+    render() {
+    return html`
+        <ix-toasters>
+        </ix-toasters>
+        <form @submit=${this.handleSubmit}>
+        <div>
+            <label>
+            Id
+            <input name="id" value="${this._uuid}" />
+            </label>
+        </div>
+        <div>
+            <label>
+            Horizontal
+            <select name="horizontal">
+                <option value="right">right</option>
+                <option value="left">left</option>
+                <option value="center">center</option>
+            </select>
+            </label>
+        </div>
+        <div>
+            <label>
+            Vertical
+            <select name="vertical">
+                <option value="bottom">bottom</option>
+                <option value="top">top</option>
+                <option value="middle">middle</option>
+            </select>
+            </label>
+        </div>
+        <div>
+            <label>
+            Auto close (ms)
+            <input type="number" value="0" name="autoClose">
+            </label>
+        </div>
+        <div>
+            <label>
+            Duration out (ms)
+            <input type="number" value="333" name="durationOut">
+            </label>
+        </div>
+        <div>
+            <label>
+            Force close
+            <input type="checkbox" name="forceClose" />
+            </label>
+        </div>
+        <div>
+            <label>
+            Content
+            <input name="content" value="Hello World ${this._popupNo}" />
+            </label>
+        </div>
+        <div><label>
+            Animated
+            <input type="checkbox" name="animated" checked />
+        </label>
+    </div>
+        <div><label>
+            Above
+            <input type="checkbox" name="above" />
+        </label>
+    </div>
+        <button type="submit">Make toast</button>
+        </form>
+        <ix-message-toast>
+            <div slot="heading">A heading</div>
+            Hello world success</ix-message-toast>
+        <ix-message-toast type="warning">
+            <div slot="heading">A heading</div>
+            Hello world warning</ix-message-toast>
+        <ix-message-toast type="error">
+            <div slot="heading">A heading</div>
+            Hello world error</ix-message-toast>
+        <button type="button" @click=${() => this.createToast({content: html`hello world`})}>Make simple toast</button>
+        <button type="button" @click=${() => this.createMessageToast({id: uuidv4()})}>Make message toast</button>
+    `
+    };
+
+}
+
+window.customElements.define('toaster-demo', ToasterDemo);
+

package/demo/index.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+  />
+  <link
+    rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;700&display=swap"
+  />
+  <link rel="stylesheet" href="https://unpkg.com/@digital-realty/theme@1.0.7/dist/css/tw-reset-output.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@digital-realty/theme@1.0.7/dist/css/baseTheme.css" />
+  <style>
+    body {
+      background: #fafafa;
+    }
+  </style>
+</head>
+<body>
+  <div id="demo"></div>
+
+  <script type="module">
+    import { render, html } from 'lit';
+    import './ToasterDemo.js';
+
+    render(
+      html`
+        <toaster-demo></toaster-demo>
+      `,
+      document.querySelector('#demo')
+    );
+  </script>
+</body>
+</html>

package/dist/src/IxMessageToast.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+import { TMessageToast } from './utils.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+export declare class IxMessageToast extends LitElement {
+    toastId: string;
+    type: TMessageToast;
+    hasClose: boolean;
+    forceClose: boolean;
+    private _hasHeading;
+    private _handleSlotChange;
+    static styles: import("lit").CSSResult;
+    closeToast(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/src/IxMessageToast.js

@@ -0,0 +1,124 @@
+import { __decorate } from "tslib";
+import { html, LitElement, css, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { property, state } from 'lit/decorators.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+export class IxMessageToast extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.toastId = 'message-toast';
+        this.type = 'success';
+        this.hasClose = true;
+        this.forceClose = false;
+        this._hasHeading = false;
+    }
+    _handleSlotChange() {
+        this._hasHeading = true;
+    }
+    closeToast() {
+        this.dispatchEvent(new CustomEvent('remove-toast', {
+            detail: {
+                ids: this.toastId,
+                forceClose: this.forceClose,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+      <div class="message ${this.type}">
+        ${this.hasClose
+            ? html `
+              <ix-icon-button
+                class="close"
+                @click=${() => this.closeToast()}
+                icon="close"
+              ></ix-icon-button>
+            `
+            : nothing}
+        <div class="${classMap({ heading: this._hasHeading })}">
+          <slot name="heading" @slotchange=${this._handleSlotChange}></slot>
+        </div>
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+IxMessageToast.styles = css `
+    .message {
+      --_spacing: var(--ix-message-toast-spacing, 12px);
+      --_neg-spacing: calc(-1 * var(--_spacing));
+      --_half-spacing: calc(var(--_spacing) / 2);
+      border-radius: var(--ix-message-toast-radius, 6px);
+      filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07))
+        drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+      margin: var(--_spacing);
+      padding: var(--_spacing);
+    }
+
+    .heading {
+      margin: 0 var(--_neg-spacing);
+      margin-bottom: var(--_spacing);
+      padding: 0 var(--_spacing);
+      padding-bottom: var(--_half-spacing);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    }
+
+    .close {
+      margin: var(--_neg-spacing) var(--_neg-spacing) 0 0;
+      float: right;
+    }
+
+    .success {
+      background-color: var(
+        --ix-message-toast-sucess-bg,
+        var(--md-sys-color-success, #4caf50)
+      );
+      color: var(--ix-message-toast-success-color, #fff);
+      --md-sys-color-on-surface-variant: var(
+        --ix-message-toast-success-color,
+        #fff
+      );
+    }
+
+    .error {
+      background-color: var(
+        --ix-message-toast-error-bg,
+        var(--md-sys-color-error, #db0028)
+      );
+      color: var(--ix-message-toast-error-color, #fff);
+      --md-sys-color-on-surface-variant: var(
+        --ix-message-toast-error-color,
+        #fff
+      );
+    }
+
+    .warning {
+      background-color: var(
+        --ix-message-toast-warning-bg,
+        var(--md-sys-color-warning, rgba(255, 152, 0, 1))
+      );
+      color: var(--ix-message-toast-error-color, #000);
+      --md-sys-color-on-surface-variant: var(
+        --ix-message-toast-warning-color,
+        #000
+      );
+    }
+  `;
+__decorate([
+    property({ type: String })
+], IxMessageToast.prototype, "toastId", void 0);
+__decorate([
+    property({ type: String })
+], IxMessageToast.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxMessageToast.prototype, "hasClose", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxMessageToast.prototype, "forceClose", void 0);
+__decorate([
+    state()
+], IxMessageToast.prototype, "_hasHeading", void 0);
+//# sourceMappingURL=IxMessageToast.js.map

package/dist/src/IxMessageToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxMessageToast.js","sourceRoot":"","sources":["../../src/IxMessageToast.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,kDAAkD,CAAC;AAE1D,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QAC8B,YAAO,GAAW,eAAe,CAAC;QAElC,SAAI,GAAkB,SAAS,CAAC;QAE/B,aAAQ,GAAY,IAAI,CAAC;QAEzB,eAAU,GAAY,KAAK,CAAC;QAGjD,gBAAW,GAAY,KAAK,CAAC;IAoGvC,CAAC;IAlGS,iBAAiB;QACvB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;IAgED,UAAU;QACR,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,MAAM,EAAE;gBACN,GAAG,EAAE,IAAI,CAAC,OAAO;gBACjB,UAAU,EAAE,IAAI,CAAC,UAAU;aAC5B;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,IAAI;UAC3B,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA;;;yBAGS,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;;;aAGnC;YACH,CAAC,CAAC,OAAO;sBACG,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC;6CAChB,IAAI,CAAC,iBAAiB;;;;KAI9D,CAAC;IACJ,CAAC;;AA7FM,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DlB,CAAC;AA3E0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAmC;AAElC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAiC;AAE/B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAA0B;AAEzB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAA6B;AAGzD;IADC,KAAK,EAAE;mDAC6B","sourcesContent":["import { html, LitElement, css, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { property, state } from 'lit/decorators.js';\nimport { TMessageToast } from './utils.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\n\nexport class IxMessageToast extends LitElement {\n  @property({ type: String }) toastId: string = 'message-toast';\n\n  @property({ type: String }) type: TMessageToast = 'success';\n\n  @property({ type: Boolean }) hasClose: boolean = true;\n\n  @property({ type: Boolean }) forceClose: boolean = false;\n\n  @state()\n  private _hasHeading: boolean = false;\n\n  private _handleSlotChange() {\n    this._hasHeading = true;\n  }\n\n  static styles = css`\n    .message {\n      --_spacing: var(--ix-message-toast-spacing, 12px);\n      --_neg-spacing: calc(-1 * var(--_spacing));\n      --_half-spacing: calc(var(--_spacing) / 2);\n      border-radius: var(--ix-message-toast-radius, 6px);\n      filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07))\n        drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));\n      margin: var(--_spacing);\n      padding: var(--_spacing);\n    }\n\n    .heading {\n      margin: 0 var(--_neg-spacing);\n      margin-bottom: var(--_spacing);\n      padding: 0 var(--_spacing);\n      padding-bottom: var(--_half-spacing);\n      border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n    }\n\n    .close {\n      margin: var(--_neg-spacing) var(--_neg-spacing) 0 0;\n      float: right;\n    }\n\n    .success {\n      background-color: var(\n        --ix-message-toast-sucess-bg,\n        var(--md-sys-color-success, #4caf50)\n      );\n      color: var(--ix-message-toast-success-color, #fff);\n      --md-sys-color-on-surface-variant: var(\n        --ix-message-toast-success-color,\n        #fff\n      );\n    }\n\n    .error {\n      background-color: var(\n        --ix-message-toast-error-bg,\n        var(--md-sys-color-error, #db0028)\n      );\n      color: var(--ix-message-toast-error-color, #fff);\n      --md-sys-color-on-surface-variant: var(\n        --ix-message-toast-error-color,\n        #fff\n      );\n    }\n\n    .warning {\n      background-color: var(\n        --ix-message-toast-warning-bg,\n        var(--md-sys-color-warning, rgba(255, 152, 0, 1))\n      );\n      color: var(--ix-message-toast-error-color, #000);\n      --md-sys-color-on-surface-variant: var(\n        --ix-message-toast-warning-color,\n        #000\n      );\n    }\n  `;\n\n  closeToast() {\n    this.dispatchEvent(\n      new CustomEvent('remove-toast', {\n        detail: {\n          ids: this.toastId,\n          forceClose: this.forceClose,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  render() {\n    return html`\n      <div class=\"message ${this.type}\">\n        ${this.hasClose\n          ? html`\n              <ix-icon-button\n                class=\"close\"\n                @click=${() => this.closeToast()}\n                icon=\"close\"\n              ></ix-icon-button>\n            `\n          : nothing}\n        <div class=\"${classMap({ heading: this._hasHeading })}\">\n          <slot name=\"heading\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/src/IxToast.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+import { AnimateController } from '@lit-labs/motion';
+export declare class IxToast extends LitElement {
+    animated: Boolean;
+    uuid: string;
+    toastId: string;
+    toasterId: string;
+    autoClose: number;
+    shown: boolean;
+    durationOut: number;
+    private _timeout;
+    static styles: import("lit").CSSResult[];
+    private _setAutoClose;
+    private _animationCompleted;
+    private _dispatchEvent;
+    private _mouseover;
+    private _mouseout;
+    controller: AnimateController;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    closeToast(forceClose: boolean): void;
+    removeToast(forceClose?: boolean): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/src/IxToast.js

@@ -0,0 +1,145 @@
+import { __decorate } from "tslib";
+import { html, LitElement, css } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { animate, AnimateController } from '@lit-labs/motion';
+import { property, state } from 'lit/decorators.js';
+import { v4 as uuidv4 } from 'uuid';
+export class IxToast extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.animated = false;
+        this.uuid = uuidv4();
+        this.toastId = uuidv4();
+        this.toasterId = '';
+        this.autoClose = 0;
+        this.shown = true;
+        this.durationOut = 333;
+        this.controller = new AnimateController(this, {
+            onComplete: () => this._animationCompleted(),
+        });
+    }
+    _setAutoClose() {
+        if (this.autoClose > 0) {
+            this._timeout = setTimeout(() => {
+                this.removeToast();
+            }, this.autoClose);
+        }
+    }
+    _animationCompleted() {
+        if (!this.shown) {
+            this._dispatchEvent('toast-closed', 'toast closed');
+        }
+    }
+    _dispatchEvent(name, message) {
+        this.dispatchEvent(new CustomEvent(name, {
+            detail: {
+                message,
+                id: this.toastId,
+                uuid: this.uuid,
+                toasterId: this.toasterId,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _mouseover() {
+        if (this.autoClose > 0) {
+            this.shown = true;
+            clearTimeout(this._timeout);
+            if (this.controller.isAnimating) {
+                this.controller.finish();
+            }
+        }
+    }
+    _mouseout() {
+        this._setAutoClose();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._setAutoClose();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._timeout) {
+            clearTimeout(this._timeout);
+        }
+    }
+    closeToast(forceClose) {
+        if (this.animated) {
+            this.shown = false;
+        }
+        if (!this.animated || forceClose) {
+            this._dispatchEvent('toast-closed', 'toast closed');
+        }
+    }
+    removeToast(forceClose = false) {
+        this.dispatchEvent(new CustomEvent('remove-toast', {
+            detail: {
+                ids: this.toastId,
+                uuid: this.uuid,
+                forceClose,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+      <div
+        @mouseout=${this._mouseout}
+        @mouseover=${this._mouseover}
+        @focus=${this._mouseover}
+        @blur=${this._mouseout}
+      >
+        <div
+          class="toast ${classMap({
+            shown: this.shown,
+        })}"
+          ${animate({
+            keyframeOptions: {
+                duration: this.durationOut,
+            },
+            disabled: !this.animated,
+        })}
+        >
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+IxToast.styles = [
+    css `
+      .toast {
+        opacity: 0;
+      }
+      .shown {
+        opacity: 1;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean })
+], IxToast.prototype, "animated", void 0);
+__decorate([
+    property({ type: String })
+], IxToast.prototype, "uuid", void 0);
+__decorate([
+    property({ type: String, attribute: 'data-id' })
+], IxToast.prototype, "toastId", void 0);
+__decorate([
+    property({ type: String })
+], IxToast.prototype, "toasterId", void 0);
+__decorate([
+    property({ type: Number })
+], IxToast.prototype, "autoClose", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxToast.prototype, "shown", void 0);
+__decorate([
+    property({ type: Number })
+], IxToast.prototype, "durationOut", void 0);
+__decorate([
+    state()
+], IxToast.prototype, "_timeout", void 0);
+//# sourceMappingURL=IxToast.js.map