@progressive-development/pd-spa-helper 0.8.22 → 0.9.1

package/dist/tmpown/pd-toast.js

@@ -1,128 +0,0 @@
-import { css, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let PdToast = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.isError = false;
-    this.isSuccess = false;
-    this.duration = -100;
-  }
-  render() {
-    return html`
-      <slot></slot>
-      <pd-icon
-        @click="${this._close}"
-        icon="closeLink"
-        class="close-link"
-      ></pd-icon>
-    `;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("aria-live", "polite");
-  }
-  updated(changedProps) {
-    if (changedProps.has("duration")) {
-      if (this.duration === -100) {
-        this._close();
-      } else {
-        this._show();
-      }
-    }
-  }
-  _show() {
-    return new Promise((resolve) => {
-      if (this.className === "show") ;
-      else {
-        if (this.duration >= 1e3) {
-          this.style.animation = `fadein 0.5s, fadeout 0.5s ${this.duration - 500}ms`;
-        }
-        this.className = "show";
-        if (this.duration > 0) {
-          setTimeout(
-            () => {
-              this._close();
-              resolve("Ok");
-            },
-            this.duration >= 1e3 ? this.duration : 3e3
-          );
-        }
-      }
-    });
-  }
-  _close() {
-    this.style.animation = "";
-    this.className = this.className.replace("show", "");
-  }
-};
-PdToast.styles = css`
-    :host {
-      --pd-icon-size: 1rem;
-
-      transform: translateX(-150%);
-      transition: transform 1s;
-
-      /* Other styles */
-      position: fixed;
-      bottom: 30px;
-      left: 30px;
-      width: calc(100% - 60px);
-      max-width: 400px;
-
-      z-index: 105;
-
-      background: var(--app-primary-color, #ebcf57);
-      color: #0a3a48;
-      padding: 0.6rem;
-      border-radius: var(--item-border-radius, 2px);
-      box-shadow: 3px 5px 5px 3px lightgrey;
-      display: flex;
-    }
-
-    :host([isError]) {
-      background: darkred;
-      color: #fff;
-    }
-
-    :host([isSuccess]) {
-      background: green;
-      color: #fff;
-    }
-
-    :host(.show) {
-      transform: translateX(0%);
-    }
-
-    .close-link {
-      --pd-icon-size: 1.4rem;
-      position: absolute;
-      right: 0;
-      top: 0;
-      cursor: pointer;
-    }
-  `;
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], PdToast.prototype, "isError", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], PdToast.prototype, "isSuccess", 2);
-__decorateClass([
-  property({ type: Number })
-], PdToast.prototype, "duration", 2);
-PdToast = __decorateClass([
-  customElement("pd-toast")
-], PdToast);
-export {
-  PdToast
-};