@nuralyui/toast 0.0.2

package/demo/toast-demo.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+export declare class ElMeenuElement extends LitElement {
+    toast: any;
+    _showOptions: boolean;
+    _message: string;
+    firstUpdated(): void;
+    _callToast(): void;
+    _updateMessage(event: any): void;
+    _updatePadding(event: any): void;
+    _updateBottom(event: any): void;
+    _updateZIndex(event: any): void;
+    _updateFontSize(event: any): void;
+    _updateBorderRadius(event: any): void;
+    _updateBorder(event: any): void;
+    _color: string;
+    _backgroundColor: string;
+    _fontFamily: string;
+    _borderRadius: string;
+    _border: string;
+    _zIndex: string;
+    _fontSize: string;
+    _padding: string;
+    _bottom: string;
+    _updateColor(event: any): void;
+    _updateBackgroundColor(event: any): void;
+    _updateFontFamily(event: any): void;
+    protected render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=toast-demo.d.ts.map

package/demo/toast-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/demo/toast-demo.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,qBACa,cAAe,SAAQ,UAAU;IAE5C,KAAK,EAAG,GAAG,CAAE;IAGb,YAAY,UAAS;IAGrB,QAAQ,SAAM;IAEL,YAAY;IAYrB,UAAU;IAGV,cAAc,CAAC,KAAK,EAAC,GAAG;IAOxB,cAAc,CAAC,KAAK,EAAC,GAAG;IAQxB,aAAa,CAAC,KAAK,EAAC,GAAG;IAQvB,aAAa,CAAC,KAAK,EAAC,GAAG;IAQvB,eAAe,CAAC,KAAK,EAAC,GAAG;IAQzB,mBAAmB,CAAC,KAAK,EAAC,GAAG;IAQ7B,aAAa,CAAC,KAAK,EAAC,GAAG;IAQvB,MAAM,SAAM;IAEZ,gBAAgB,SAAM;IAEtB,WAAW,SAAM;IAEjB,aAAa,SAAM;IAEnB,OAAO,SAAM;IAEb,OAAO,SAAM;IAEb,SAAS,SAAM;IAEf,QAAQ,SAAM;IAEd,OAAO,SAAM;IAEb,YAAY,CAAC,KAAK,EAAC,GAAG;IAQtB,sBAAsB,CAAC,KAAK,EAAC,GAAG;IAWhC,iBAAiB,CAAC,KAAK,EAAC,GAAG;cAQR,MAAM;CAuM1B"}

package/demo/toast-demo.js

@@ -0,0 +1,353 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+let ElMeenuElement = class ElMeenuElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._showOptions = false;
+        this._message = "";
+        this._color = "";
+        this._backgroundColor = "";
+        this._fontFamily = "";
+        this._borderRadius = "";
+        this._border = "";
+        this._zIndex = "";
+        this._fontSize = "";
+        this._padding = "";
+        this._bottom = "";
+    }
+    firstUpdated() {
+        // Get lit-toast referece to save multiple DOM access
+        this.toast = this.shadowRoot.querySelector('hy-toast');
+        console.log(this.toast);
+        // If 'path' or 'composedPath()' unavailable, don't show options
+        this.addEventListener('click', (event) => {
+            this._showOptions = event.path || event.composedPath();
+        });
+        this.click();
+    }
+    _callToast() {
+        this.toast.show(this._message);
+    }
+    _updateMessage(event) {
+        let path = event.path || event.composedPath();
+        if (path) {
+            this._message = path[0].value;
+        }
+    }
+    _updatePadding(event) {
+        let path = event.path || event.composedPath();
+        if (path) {
+            this._padding = path[0].value;
+            this.toast.style.setProperty('--lt-padding', this._padding);
+        }
+    }
+    _updateBottom(event) {
+        let path = event.path || event.composedPath();
+        if (path) {
+            this._bottom = path[0].value;
+            this.toast.style.setProperty('--lt-bottom', this._bottom);
+        }
+    }
+    _updateZIndex(event) {
+        let path = event.path || event.composedPath();
+        if (path) {
+            this._zIndex = path[0].value;
+            this.toast.style.setProperty('--lt-z-index', this._zIndex);
+        }
+    }
+    _updateFontSize(event) {
+        let path = event.path || event.composedPath();
+        if (path) {
+            this._fontSize = path[0].value;
+            this.toast.style.setProperty('--lt-font-size', this._fontSize);
+        }
+    }
+    _updateBorderRadius(event) {
+        let path = event.path || event.composedPath();
+        if (path) {
+            this._borderRadius = path[0].value;
+            this.toast.style.setProperty('--lt-border-radius', this._borderRadius);
+        }
+    }
+    _updateBorder(event) {
+        let path = event.path || event.composedPath();
+        if (path) {
+            this._border = path[0].value;
+            this.toast.style.setProperty('--lt-border', this._border);
+        }
+    }
+    _updateColor(event) {
+        let path = event.path || event.composedPath();
+        if (path) {
+            this._color = path[0].value;
+            this.toast.style.setProperty('--lt-color', this._color);
+        }
+    }
+    _updateBackgroundColor(event) {
+        let path = event.path || event.composedPath();
+        if (path) {
+            this._backgroundColor = path[0].value;
+            this.toast.style.setProperty('--lt-background-color', this._backgroundColor);
+        }
+    }
+    _updateFontFamily(event) {
+        let path = event.path || event.composedPath();
+        if (path) {
+            this._fontFamily = path[0].value;
+            this.toast.style.setProperty('--lt-font-family', this._fontFamily);
+        }
+    }
+    render() {
+        return html `
+     <hy-toast></hy-toast>
+
+      <!-- Primary Container (to center everything) -->
+      <div class="container">
+        <!-- Title + GitHub link -->
+        <header>
+          <h1>lit-toast</h1>
+          <a
+            href="https://github.com/Victor-Bernabe/lit-toast"
+            rel="noreferrer"
+            id="link-github"
+            aria-label="See on GitHub"
+            title="See on GitHub"
+          ></a>
+        </header>
+
+        <main>
+          <!-- Call Toast Button -->
+          <button id="call-toast" @click="${this._callToast}">
+            Call Toast
+          </button>
+
+          ${this._showOptions
+            ? html `
+                <!-- Panels Section -->
+                <div id="panels">
+                  <!-- Options Section -->
+                  <section>
+                    <h2>Options</h2>
+                    <div class="panel panel-options">
+                      <!-- Options from 1 to 5 -->
+                      <div class="panel-column">
+                        <div class="option">
+                          <span id="padding" class="option-title">padding</span>
+                          <input
+                            class="input-common"
+                            type="text"
+                            placeholder="16px"
+                            .value="${this._padding}"
+                            @input="${this._updatePadding}"
+                            aria-labelledby="padding"
+                          />
+                        </div>
+                        <div class="option">
+                          <span id="bottom" class="option-title">bottom</span>
+                          <input
+                            class="input-common"
+                            type="text"
+                            placeholder="40px"
+                            .value="${this._bottom}"
+                            @input="${this._updateBottom}"
+                            aria-labelledby="bottom"
+                          />
+                        </div>
+                        <div class="option">
+                          <span id="color" class="option-title">color</span>
+                          <input
+                            class="input-common"
+                            type="color"
+                            .value="${this._color}"
+                            @change="${this._updateColor}"
+                            aria-labelledby="color"
+                            title="${this._color}"
+                          />
+                        </div>
+                        <div class="option">
+                          <span id="z-index" class="option-title">z-index</span>
+                          <input
+                            class="input-common"
+                            type="text"
+                            placeholder="2"
+                            .value="${this._zIndex}"
+                            @input="${this._updateZIndex}"
+                            aria-labelledby="z-index"
+                          />
+                        </div>
+                        <div class="option">
+                          <span id="font-size" class="option-title"
+                            >font-size</span
+                          >
+                          <input
+                            class="input-common"
+                            type="text"
+                            placeholder="1em"
+                            .value="${this._fontSize}"
+                            @input="${this._updateFontSize}"
+                            aria-labelledby="font-size"
+                          />
+                        </div>
+                      </div>
+
+                      <!-- Options from 6 to 10 -->
+                      <div class="panel-column">
+                        <div class="option">
+                          <span id="font-family" class="option-title"
+                            >font-family</span
+                          >
+                          <select
+                            class="input-common"
+                            @change="${this._updateFontFamily}"
+                            aria-labelledby="font-family"
+                          >
+                            <option value="sans-serif">sans-serif</option>
+                            <option value="serif">serif</option>
+                          </select>
+                        </div>
+                        <div class="option">
+                          <span id="border-radius" class="option-title"
+                            >border-radius</span
+                          >
+                          <input
+                            class="input-common"
+                            type="text"
+                            placeholder="2px"
+                            .value="${this._borderRadius}"
+                            @input="${this._updateBorderRadius}"
+                            aria-labelledby="border-radius"
+                          />
+                        </div>
+                        <div class="option">
+                          <span id="background-color" class="option-title"
+                            >background-color</span
+                          >
+                          <input
+                            class="input-common"
+                            type="color"
+                            .value="${this._backgroundColor}"
+                            @change="${this._updateBackgroundColor}"
+                            aria-labelledby="background-color"
+                            title="${this._backgroundColor}"
+                          />
+                        </div>
+                        <div class="option">
+                          <span id="border" class="option-title">border</span>
+                          <input
+                            class="input-common input-long-text"
+                            type="text"
+                            placeholder="none"
+                            .value="${this._border}"
+                            @input="${this._updateBorder}"
+                            aria-labelledby="border"
+                          />
+                        </div>
+                        <div class="option">
+                          <span id="text" class="option-title">text</span>
+                          <input
+                            class="input-common input-long-text"
+                            type="text"
+                            placeholder="Message"
+                            .value="${this._message}"
+                            @input="${this._updateMessage}"
+                            aria-labelledby="text"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </section>
+
+                  <!-- Code Section -->
+                  <section>
+                    <h2>Code</h2>
+                    <div class="panel panel-code">
+                      <span class="css-selector">#toast</span
+                      ><span class="bracket">{</span><br />
+                      <span class="css-property">--lt-background-color:</span>
+                      <span class="css-value">${this._backgroundColor};</span
+                      ><br />
+                      <span class="css-property">--lt-color:</span>
+                      <span class="css-value">${this._color};</span><br />
+                      <span class="css-property">--lt-padding:</span>
+                      <span class="css-value">${this._padding};</span><br />
+                      <span class="css-property">--lt-bottom:</span>
+                      <span class="css-value">${this._bottom};</span><br />
+                      <span class="css-property">--lt-font-size:</span>
+                      <span class="css-value">${this._fontSize};</span><br />
+                      <span class="css-property">--lt-font-family:</span>
+                      <span class="css-value">${this._fontFamily};</span><br />
+                      <span class="css-property">--lt-border-radius:</span>
+                      <span class="css-value">${this._borderRadius};</span
+                      ><br />
+                      <span class="css-property">--lt-border:</span>
+                      <span class="css-value">${this._border};</span><br />
+                      <span class="css-property">--lt-z-index:</span>
+                      <span class="css-value">${this._zIndex};</span><br />
+                      <span class="bracket">}</span>
+                    </div>
+                  </section>
+                </div>
+              `
+            : html `
+                <!-- path and composedPath() are not supported so... no options :( -->
+              `}
+        </main>
+      </div>
+
+    `;
+    }
+};
+__decorate([
+    state()
+], ElMeenuElement.prototype, "toast", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "_showOptions", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "_message", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "_color", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "_backgroundColor", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "_fontFamily", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "_borderRadius", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "_border", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "_zIndex", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "_fontSize", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "_padding", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "_bottom", void 0);
+ElMeenuElement = __decorate([
+    customElement('hy-toast-demo')
+], ElMeenuElement);
+export { ElMeenuElement };
+//# sourceMappingURL=toast-demo.js.map

package/demo/toast-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-demo.js","sourceRoot":"","sources":["../../../../src/components/toast/demo/toast-demo.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport {LitElement, html} from 'lit';\nimport {customElement, state} from 'lit/decorators.js';\n\n@customElement('hy-toast-demo')\nexport class ElMeenuElement extends LitElement {\n  @state()\n  toast : any ;\n\n  @state()\n  _showOptions = false;\n\n  @state()\n  _message = \"\";\n  \n  override firstUpdated() {\n    // Get lit-toast referece to save multiple DOM access\n    this.toast = this.shadowRoot!.querySelector('hy-toast');\n    console.log(this.toast);\n    // If 'path' or 'composedPath()' unavailable, don't show options\n    this.addEventListener('click', (event:any) => {\n      this._showOptions = event.path || event.composedPath();\n    });\n\n    this.click();\n  }\n\n  _callToast() {\n    this.toast.show(this._message)\n  }\n  _updateMessage(event:any) {\n    let path = event.path || event.composedPath();\n    if (path) {\n      this._message = path[0].value;\n    }\n  }\n\n  _updatePadding(event:any) {\n    let path = event.path || event.composedPath();\n    if (path) {\n      this._padding = path[0].value;\n      this.toast.style.setProperty('--lt-padding', this._padding);\n    }\n  }\n\n  _updateBottom(event:any) {\n    let path = event.path || event.composedPath();\n    if (path) {\n      this._bottom = path[0].value;\n      this.toast.style.setProperty('--lt-bottom', this._bottom);\n    }\n  }\n\n  _updateZIndex(event:any) {\n    let path = event.path || event.composedPath();\n    if (path) {\n      this._zIndex = path[0].value;\n      this.toast.style.setProperty('--lt-z-index', this._zIndex);\n    }\n  }\n\n  _updateFontSize(event:any) {\n    let path = event.path || event.composedPath();\n    if (path) {\n      this._fontSize = path[0].value;\n      this.toast.style.setProperty('--lt-font-size', this._fontSize);\n    }\n  }\n\n  _updateBorderRadius(event:any) {\n    let path = event.path || event.composedPath();\n    if (path) {\n      this._borderRadius = path[0].value;\n      this.toast.style.setProperty('--lt-border-radius', this._borderRadius);\n    }\n  }\n\n  _updateBorder(event:any) {\n    let path = event.path || event.composedPath();\n    if (path) {\n      this._border = path[0].value;\n      this.toast.style.setProperty('--lt-border', this._border);\n    }\n  }\n@state()\n  _color = \"\";\n  @state()\n  _backgroundColor = \"\";\n  @state()\n  _fontFamily = \"\";\n  @state()\n  _borderRadius = \"\";\n  @state()\n  _border = \"\";\n  @state()\n  _zIndex = \"\";\n  @state()\n  _fontSize = \"\";\n  @state()\n  _padding = \"\";\n  @state()\n  _bottom = \"\";\n\n  _updateColor(event:any) {\n    let path = event.path || event.composedPath();\n    if (path) {\n      this._color = path[0].value;\n      this.toast.style.setProperty('--lt-color', this._color);\n    }\n  }\n\n  _updateBackgroundColor(event:any) {\n    let path = event.path || event.composedPath();\n    if (path) {\n      this._backgroundColor = path[0].value;\n      this.toast.style.setProperty(\n        '--lt-background-color',\n        this._backgroundColor\n      );\n    }\n  }\n\n  _updateFontFamily(event:any) {\n    let path = event.path || event.composedPath();\n    if (path) {\n      this._fontFamily = path[0].value;\n      this.toast.style.setProperty('--lt-font-family', this._fontFamily);\n    }\n  }\n\n  protected override render() {\n    return html`\n     <hy-toast></hy-toast>\n\n      <!-- Primary Container (to center everything) -->\n      <div class=\"container\">\n        <!-- Title + GitHub link -->\n        <header>\n          <h1>lit-toast</h1>\n          <a\n            href=\"https://github.com/Victor-Bernabe/lit-toast\"\n            rel=\"noreferrer\"\n            id=\"link-github\"\n            aria-label=\"See on GitHub\"\n            title=\"See on GitHub\"\n          ></a>\n        </header>\n\n        <main>\n          <!-- Call Toast Button -->\n          <button id=\"call-toast\" @click=\"${this._callToast}\">\n            Call Toast\n          </button>\n\n          ${this._showOptions\n            ? html`\n                <!-- Panels Section -->\n                <div id=\"panels\">\n                  <!-- Options Section -->\n                  <section>\n                    <h2>Options</h2>\n                    <div class=\"panel panel-options\">\n                      <!-- Options from 1 to 5 -->\n                      <div class=\"panel-column\">\n                        <div class=\"option\">\n                          <span id=\"padding\" class=\"option-title\">padding</span>\n                          <input\n                            class=\"input-common\"\n                            type=\"text\"\n                            placeholder=\"16px\"\n                            .value=\"${this._padding}\"\n                            @input=\"${this._updatePadding}\"\n                            aria-labelledby=\"padding\"\n                          />\n                        </div>\n                        <div class=\"option\">\n                          <span id=\"bottom\" class=\"option-title\">bottom</span>\n                          <input\n                            class=\"input-common\"\n                            type=\"text\"\n                            placeholder=\"40px\"\n                            .value=\"${this._bottom}\"\n                            @input=\"${this._updateBottom}\"\n                            aria-labelledby=\"bottom\"\n                          />\n                        </div>\n                        <div class=\"option\">\n                          <span id=\"color\" class=\"option-title\">color</span>\n                          <input\n                            class=\"input-common\"\n                            type=\"color\"\n                            .value=\"${this._color}\"\n                            @change=\"${this._updateColor}\"\n                            aria-labelledby=\"color\"\n                            title=\"${this._color}\"\n                          />\n                        </div>\n                        <div class=\"option\">\n                          <span id=\"z-index\" class=\"option-title\">z-index</span>\n                          <input\n                            class=\"input-common\"\n                            type=\"text\"\n                            placeholder=\"2\"\n                            .value=\"${this._zIndex}\"\n                            @input=\"${this._updateZIndex}\"\n                            aria-labelledby=\"z-index\"\n                          />\n                        </div>\n                        <div class=\"option\">\n                          <span id=\"font-size\" class=\"option-title\"\n                            >font-size</span\n                          >\n                          <input\n                            class=\"input-common\"\n                            type=\"text\"\n                            placeholder=\"1em\"\n                            .value=\"${this._fontSize}\"\n                            @input=\"${this._updateFontSize}\"\n                            aria-labelledby=\"font-size\"\n                          />\n                        </div>\n                      </div>\n\n                      <!-- Options from 6 to 10 -->\n                      <div class=\"panel-column\">\n                        <div class=\"option\">\n                          <span id=\"font-family\" class=\"option-title\"\n                            >font-family</span\n                          >\n                          <select\n                            class=\"input-common\"\n                            @change=\"${this._updateFontFamily}\"\n                            aria-labelledby=\"font-family\"\n                          >\n                            <option value=\"sans-serif\">sans-serif</option>\n                            <option value=\"serif\">serif</option>\n                          </select>\n                        </div>\n                        <div class=\"option\">\n                          <span id=\"border-radius\" class=\"option-title\"\n                            >border-radius</span\n                          >\n                          <input\n                            class=\"input-common\"\n                            type=\"text\"\n                            placeholder=\"2px\"\n                            .value=\"${this._borderRadius}\"\n                            @input=\"${this._updateBorderRadius}\"\n                            aria-labelledby=\"border-radius\"\n                          />\n                        </div>\n                        <div class=\"option\">\n                          <span id=\"background-color\" class=\"option-title\"\n                            >background-color</span\n                          >\n                          <input\n                            class=\"input-common\"\n                            type=\"color\"\n                            .value=\"${this._backgroundColor}\"\n                            @change=\"${this._updateBackgroundColor}\"\n                            aria-labelledby=\"background-color\"\n                            title=\"${this._backgroundColor}\"\n                          />\n                        </div>\n                        <div class=\"option\">\n                          <span id=\"border\" class=\"option-title\">border</span>\n                          <input\n                            class=\"input-common input-long-text\"\n                            type=\"text\"\n                            placeholder=\"none\"\n                            .value=\"${this._border}\"\n                            @input=\"${this._updateBorder}\"\n                            aria-labelledby=\"border\"\n                          />\n                        </div>\n                        <div class=\"option\">\n                          <span id=\"text\" class=\"option-title\">text</span>\n                          <input\n                            class=\"input-common input-long-text\"\n                            type=\"text\"\n                            placeholder=\"Message\"\n                            .value=\"${this._message}\"\n                            @input=\"${this._updateMessage}\"\n                            aria-labelledby=\"text\"\n                          />\n                        </div>\n                      </div>\n                    </div>\n                  </section>\n\n                  <!-- Code Section -->\n                  <section>\n                    <h2>Code</h2>\n                    <div class=\"panel panel-code\">\n                      <span class=\"css-selector\">#toast</span\n                      ><span class=\"bracket\">{</span><br />\n                      <span class=\"css-property\">--lt-background-color:</span>\n                      <span class=\"css-value\">${this._backgroundColor};</span\n                      ><br />\n                      <span class=\"css-property\">--lt-color:</span>\n                      <span class=\"css-value\">${this._color};</span><br />\n                      <span class=\"css-property\">--lt-padding:</span>\n                      <span class=\"css-value\">${this._padding};</span><br />\n                      <span class=\"css-property\">--lt-bottom:</span>\n                      <span class=\"css-value\">${this._bottom};</span><br />\n                      <span class=\"css-property\">--lt-font-size:</span>\n                      <span class=\"css-value\">${this._fontSize};</span><br />\n                      <span class=\"css-property\">--lt-font-family:</span>\n                      <span class=\"css-value\">${this._fontFamily};</span><br />\n                      <span class=\"css-property\">--lt-border-radius:</span>\n                      <span class=\"css-value\">${this._borderRadius};</span\n                      ><br />\n                      <span class=\"css-property\">--lt-border:</span>\n                      <span class=\"css-value\">${this._border};</span><br />\n                      <span class=\"css-property\">--lt-z-index:</span>\n                      <span class=\"css-value\">${this._zIndex};</span><br />\n                      <span class=\"bracket\">}</span>\n                    </div>\n                  </section>\n                </div>\n              `\n            : html`\n                <!-- path and composedPath() are not supported so... no options :( -->\n              `}\n        </main>\n      </div>\n\n    `;\n  }\n}\n\n\n"]}

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './toast.component.js';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toast/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/index.js

@@ -0,0 +1,2 @@
+export * from './toast.component.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/toast/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './toast.component.js';\n"]}

package/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "@nuralyui/toast",
+    "version": "0.0.2",
+    "description": "",
+    "main": "index.js",
+    "type": "module",
+    "dependencies": {
+        "dayjs": "^1.11.7"
+    },
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "Labidi Aymen",
+    "license": "ISC"
+}

package/react.d.ts

@@ -0,0 +1,5 @@
+import { LitToast } from './toast.component.js';
+export declare const HyToast: import("@lit-labs/react").ReactWebComponent<LitToast, {
+    close: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

package/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/toast/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAE9C,eAAO,MAAM,OAAO;;EAOlB,CAAC"}

package/react.js

@@ -0,0 +1,12 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { LitToast } from './toast.component.js';
+export const HyToast = createComponent({
+    tagName: 'hy-toast',
+    elementClass: LitToast,
+    react: React,
+    events: {
+        close: 'close',
+    },
+});
+//# sourceMappingURL=react.js.map

package/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/toast/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,QAAQ;IACtB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,KAAK,EAAE,OAAO;KACf;CACF,CAAC,CAAC","sourcesContent":["import {createComponent} from '@lit-labs/react';\nimport * as React from 'react';\nimport {LitToast} from './toast.component.js';\n\nexport const HyToast = createComponent({\n  tagName: 'hy-toast',\n  elementClass: LitToast,\n  react: React,\n  events: {\n    close: 'close',\n  },\n});\n"]}

package/toast.component.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit-element';
+export declare class LitToast extends LitElement {
+    static styles: import("lit-element").CSSResult;
+    toasts: any[];
+    render(): import("lit-element").TemplateResult<1>;
+    show(text?: string, duration?: number): void;
+    handleAnimationEnd(index: any): void;
+}
+//# sourceMappingURL=toast.component.d.ts.map

package/toast.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.component.d.ts","sourceRoot":"","sources":["../../../src/components/toast/toast.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,aAAa,CAAC;AAE7E,qBACa,QAAS,SAAQ,UAAU;IACrC,OAAgB,MAAM,kCAmCrB;IAEyB,MAAM,EAAG,GAAG,EAAE,CAAK;IAErC,MAAM;IAaf,IAAI,CAAC,IAAI,SAAK,EAAE,QAAQ,SAAO;IAe/B,kBAAkB,CAAC,KAAK,EAAE,GAAG;CAM9B"}

package/toast.component.js

@@ -0,0 +1,82 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, property, customElement, css } from 'lit-element';
+let LitToast = class LitToast extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.toasts = [];
+    }
+    render() {
+        return html `
+      <div class="toast-container">
+        ${this.toasts.map((toast, index) => html `
+            <div class="toast show" @animationend="${() => this.handleAnimationEnd(index)}">${toast.text}</div>
+          `)}
+      </div>
+    `;
+    }
+    show(text = '', duration = 5000) {
+        const newToast = { text, duration };
+        this.toasts = [...this.toasts, newToast];
+        if (this.toasts.length === 1) {
+        }
+        setTimeout(() => {
+            this.toasts.shift();
+            this.requestUpdate('toasts');
+        }, duration);
+    }
+    handleAnimationEnd(index) {
+        this.toasts.splice(index, 1);
+        this.requestUpdate('toasts');
+        if (this.toasts.length > 0) {
+        }
+    }
+};
+LitToast.styles = css `
+    .toast-container {
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      z-index: 1000;
+    }
+
+    .toast {
+      background-color: #333;
+      color: #fff;
+      padding: 10px 20px;
+      margin-bottom: 10px;
+      border-radius: 5px;
+      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+      animation: fadein 0.5s, fadeout 0.5s 2.5s 3000ms;
+    }
+
+    @keyframes fadein {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    @keyframes fadeout {
+      from {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+      }
+    }
+  `;
+__decorate([
+    property({ type: Array })
+], LitToast.prototype, "toasts", void 0);
+LitToast = __decorate([
+    customElement('hy-toast')
+], LitToast);
+export { LitToast };
+//# sourceMappingURL=toast.component.js.map

package/toast.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.component.js","sourceRoot":"","sources":["../../../src/components/toast/toast.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAG7E,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAsC6B,WAAM,GAAU,EAAE,CAAC;IAoChD,CAAC;IAlCU,MAAM;QACb,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,MAAM,CAAC,GAAG,CACf,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;qDACqB,GAAG,EAAE,CAC5C,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,IAAI;WAChD,CACF;;KAEJ,CAAC;IACJ,CAAC;IAED,IAAI,CAAC,IAAI,GAAG,EAAE,EAAE,QAAQ,GAAG,IAAI;QAC7B,MAAM,QAAQ,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;QACpC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QAEzC,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;SAC7B;QAED,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YACpB,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC/B,CAAC,EAAE,QAAQ,CAAC,CAAC;IACf,CAAC;IAID,kBAAkB,CAAC,KAAU;QAC3B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC7B,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;SAC3B;IACH,CAAC;CACF,CAAA;AAzEkB,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmC3B,CAAA;AAEyB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wCAAoB;AAtCnC,QAAQ;IADpB,aAAa,CAAC,UAAU,CAAC;GACb,QAAQ,CA0EpB;SA1EY,QAAQ","sourcesContent":["import { LitElement, html, property, customElement, css } from 'lit-element';\n\n@customElement('hy-toast')\nexport class LitToast extends LitElement {\n   static override styles = css`\n    .toast-container {\n      position: fixed;\n      top: 20px;\n      right: 20px;\n      z-index: 1000;\n    }\n\n    .toast {\n      background-color: #333;\n      color: #fff;\n      padding: 10px 20px;\n      margin-bottom: 10px;\n      border-radius: 5px;\n      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);\n      animation: fadein 0.5s, fadeout 0.5s 2.5s 3000ms;\n    }\n\n    @keyframes fadein {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n\n    @keyframes fadeout {\n      from {\n        opacity: 1;\n      }\n      to {\n        opacity: 0;\n      }\n    }\n  `;\n\n  @property({ type: Array }) toasts  :any[]= [];\n\n  override render() {\n    return html`\n      <div class=\"toast-container\">\n        ${this.toasts.map(\n          (toast, index) => html`\n            <div class=\"toast show\" @animationend=\"${() =>\n              this.handleAnimationEnd(index)}\">${toast.text}</div>\n          `\n        )}\n      </div>\n    `;\n  }\n\n  show(text = '', duration = 5000) {\n    const newToast = { text, duration };\n    this.toasts = [...this.toasts, newToast];\n\n    if (this.toasts.length === 1) {\n    }\n\n    setTimeout(() => {\n      this.toasts.shift();\n      this.requestUpdate('toasts');\n    }, duration);\n  }\n\n\n\n  handleAnimationEnd(index :any) {\n    this.toasts.splice(index, 1);\n    this.requestUpdate('toasts');\n    if (this.toasts.length > 0) {\n    }\n  }\n}\n"]}

package/toast.style.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=toast.style.d.ts.map

package/toast.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.style.d.ts","sourceRoot":"","sources":["../../../src/components/toast/toast.style.ts"],"names":[],"mappings":";AAEA,wBAoEE"}

package/toast.style.js

@@ -0,0 +1,71 @@
+import { css } from "lit";
+export default css `
+:host {
+  display: flex;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */
+  z-index: var(--lt-z-index, 2);
+  top: 0; /* Change from bottom to top */
+  background-color: var(--lt-background-color, #292929);
+  color: var(--lt-color, #dddddd);
+  text-align: center;
+  border-radius: var(--lt-border-radius, 2px);
+  padding: var(--lt-padding, 16px);
+  border: var(--lt-border, none);
+  font-size: var(--lt-font-size, 1em);
+  font-family: var(--lt-font-family, sans-serif);
+}
+
+:host(.show) {
+  top: var(--lt-top, 40px); /* Change from bottom to top */
+  transform: translateX(-50%);
+  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+@-webkit-keyframes fadein {
+  from {
+    top: 0; /* Change from bottom to top */
+    transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */
+  }
+  to {
+    top: var(--lt-top, 40px); /* Change from bottom to top */
+    transform: translateX(-50%) translateY(0); /* Change translateY to 0 to reach the top */
+  }
+}
+
+@keyframes fadein {
+  from {
+    top: 0; /* Change from bottom to top */
+    transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */
+  }
+  to {
+    top: var(--lt-top, 40px); /* Change from bottom to top */
+    transform: translateX(-50%) translateY(0); /* Change translateY to 0 to reach the top */
+  }
+}
+
+@-webkit-keyframes fadeout {
+  from {
+    top: var(--lt-top, 40px); /* Change from bottom to top */
+    transform: translateX(-50%) translateY(0); /* Change translateY to 0 to reach the top */
+  }
+  to {
+    top: 0; /* Change from bottom to top */
+    transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */
+  }
+}
+
+@keyframes fadeout {
+  from {
+    top: var(--lt-top, 40px); /* Change from bottom to top */
+    transform: translateX(-50%) translateY(0); /* Change translateY to 0 to reach the top */
+  }
+  to {
+    top: 0; /* Change from bottom to top */
+    transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */
+  }
+}
+`;
+//# sourceMappingURL=toast.style.js.map

package/toast.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.style.js","sourceRoot":"","sources":["../../../src/components/toast/toast.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoEjB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nexport default css`\n:host {\n  display: flex;\n  position: fixed;\n  left: 50%;\n  transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */\n  z-index: var(--lt-z-index, 2);\n  top: 0; /* Change from bottom to top */\n  background-color: var(--lt-background-color, #292929);\n  color: var(--lt-color, #dddddd);\n  text-align: center;\n  border-radius: var(--lt-border-radius, 2px);\n  padding: var(--lt-padding, 16px);\n  border: var(--lt-border, none);\n  font-size: var(--lt-font-size, 1em);\n  font-family: var(--lt-font-family, sans-serif);\n}\n\n:host(.show) {\n  top: var(--lt-top, 40px); /* Change from bottom to top */\n  transform: translateX(-50%);\n  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;\n  animation: fadein 0.5s, fadeout 0.5s 2.5s;\n}\n\n@-webkit-keyframes fadein {\n  from {\n    top: 0; /* Change from bottom to top */\n    transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */\n  }\n  to {\n    top: var(--lt-top, 40px); /* Change from bottom to top */\n    transform: translateX(-50%) translateY(0); /* Change translateY to 0 to reach the top */\n  }\n}\n\n@keyframes fadein {\n  from {\n    top: 0; /* Change from bottom to top */\n    transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */\n  }\n  to {\n    top: var(--lt-top, 40px); /* Change from bottom to top */\n    transform: translateX(-50%) translateY(0); /* Change translateY to 0 to reach the top */\n  }\n}\n\n@-webkit-keyframes fadeout {\n  from {\n    top: var(--lt-top, 40px); /* Change from bottom to top */\n    transform: translateX(-50%) translateY(0); /* Change translateY to 0 to reach the top */\n  }\n  to {\n    top: 0; /* Change from bottom to top */\n    transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */\n  }\n}\n\n@keyframes fadeout {\n  from {\n    top: var(--lt-top, 40px); /* Change from bottom to top */\n    transform: translateX(-50%) translateY(0); /* Change translateY to 0 to reach the top */\n  }\n  to {\n    top: 0; /* Change from bottom to top */\n    transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */\n  }\n}\n`;\n"]}