@justeattakeaway/pie-toast 0.8.4 → 0.9.0

package/dist/index.js

@@ -1,7 +1,7 @@
-import { LitElement as A, unsafeCSS as C, nothing as u, html as l } from "lit";
-import { property as d, query as g } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
-import { RtlMixin as w, dispatchCustomEvent as h, validPropertyValues as E, defineCustomElement as k } from "@justeattakeaway/pie-webc-core";
+import { LitElement as x, nothing as d, html as l, unsafeCSS as A } from "lit";
+import { property as u, query as b } from "lit/decorators.js";
+import { classMap as w } from "lit/directives/class-map.js";
+import { RtlMixin as C, dispatchCustomEvent as g, validPropertyValues as O, safeCustomElement as _ } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
@@ -9,20 +9,14 @@ import "@justeattakeaway/pie-icons-webc/dist/IconInfoCircle.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconAlertTriangle.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
-var O = Object.defineProperty, T = (v, t, n, p) => {
-  for (var o = void 0, s = v.length - 1, c; s >= 0; s--)
-    (c = v[s]) && (o = c(t, n, o) || o);
-  return o && O(t, n, o), o;
-};
-class b extends A {
-  constructor() {
-    super(...arguments), this.v = "0.8.4";
+const h = class h extends x {
+  willUpdate() {
+    this.getAttribute("v") || this.setAttribute("v", h.v);
   }
-}
-T([
-  d({ type: String, reflect: !0 })
-], b.prototype, "v");
-const L = "*,*:after,*:before{box-sizing:inherit}.c-toast{--toast-border-radius: var(--dt-radius-rounded-b);--toast-background-color: var(--dt-color-container-inverse);--toast-font-color: var(--dt-color-content-inverse);--toast-font-size: calc(var(--dt-font-body-s-size) * 1px);--toast-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--toast-icon-fill: var(--dt-color-content-default);--toast-translate-start: -100%;--toast-translate-end: 0;display:flex;flex-direction:column;justify-content:center;min-height:48px;max-height:122px;min-width:300px;max-width:420px;padding:var(--dt-spacing-b) var(--dt-spacing-c) var(--dt-spacing-b) var(--dt-spacing-d);border-radius:var(--toast-border-radius);background-color:var(--toast-background-color);box-shadow:var(--dt-elevation-03);color:var(--toast-font-color);font-size:var(--toast-font-size);line-height:var(--toast-line-height);transition-property:all;transition-duration:var(--dt-motion-timing-100);transition-timing-function:var(--dt-motion-easing-in)}.c-toast--rtl{--toast-translate-start: 100%}.c-toast--animate-in{animation-duration:var(--dt-motion-timing-200);animation-name:animate-in;animation-timing-function:var(--dt-motion-easing-out);transform:translate(var(--toast-translate-end))}.c-toast--animate-out{animation-duration:var(--dt-motion-timing-100);animation-name:animate-out;animation-timing-function:var(--dt-motion-easing-in);transform:translate(var(--toast-translate-start));opacity:0}.c-toast--info{--toast-icon-fill: var(--dt-color-support-info-inverse)}.c-toast--info.c-toast--strong{--toast-background-color: var(--dt-color-support-info);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast--warning{--toast-icon-fill: var(--dt-color-support-warning-inverse)}.c-toast--warning.c-toast--strong{--toast-background-color: var(--dt-color-support-warning);--toast-icon-fill: var(--dt-color-content-dark);--toast-font-color: var(--dt-color-content-dark)}.c-toast--success{--toast-icon-fill: var(--dt-color-support-positive-inverse)}.c-toast--success.c-toast--strong{--toast-background-color: var(--dt-color-support-positive);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast--error{--toast-icon-fill: var(--dt-color-support-error-inverse)}.c-toast--error.c-toast--strong{--toast-background-color: var(--dt-color-support-error);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast-contentArea{display:flex;gap:var(--dt-spacing-b);justify-content:space-between}.c-toast-messageArea{display:flex;align-items:center;gap:var(--dt-spacing-b);padding:6px var(--dt-spacing-a) 6px 0;overflow:hidden}.c-toast-messageArea span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.c-toast-actionsArea{display:flex;gap:var(--dt-spacing-b);flex-shrink:0}.c-toast--multiline .c-toast-contentArea{align-items:flex-start;gap:0}.c-toast--multiline .c-toast-messageArea{align-items:flex-start;padding-block-end:var(--dt-spacing-b)}.c-toast--multiline .c-toast-messageArea span{max-height:60px;white-space:inherit;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.c-toast-footer{display:flex;justify-content:flex-end}.c-toast-icon{color:var(--toast-icon-fill)}@keyframes animate-in{0%{transform:translate(var(--toast-translate-start))}to{transform:translate(var(--toast-translate-end))}}@keyframes animate-out{0%{transform:translate(var(--toast-translate-end))}to{transform:translate(var(--toast-translate-start))}}", B = ["neutral", "info", "warning", "success", "error"], i = "pie-toast", e = "c-toast", N = `${i}-close`, S = `${i}-open`, I = `${i}-leading-action-click`, m = {
+};
+h.v = "0.9.0";
+let f = h;
+const E = "*,*:after,*:before{box-sizing:inherit}.c-toast{--toast-border-radius: var(--dt-radius-rounded-b);--toast-background-color: var(--dt-color-container-inverse);--toast-font-color: var(--dt-color-content-inverse);--toast-font-size: calc(var(--dt-font-body-s-size) * 1px);--toast-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--toast-icon-fill: var(--dt-color-content-default);--toast-translate-start: -100%;--toast-translate-end: 0;display:flex;flex-direction:column;justify-content:center;min-height:48px;max-height:122px;min-width:300px;max-width:420px;padding:var(--dt-spacing-b) var(--dt-spacing-c) var(--dt-spacing-b) var(--dt-spacing-d);border-radius:var(--toast-border-radius);background-color:var(--toast-background-color);box-shadow:var(--dt-elevation-03);color:var(--toast-font-color);font-size:var(--toast-font-size);line-height:var(--toast-line-height);transition-property:all;transition-duration:var(--dt-motion-timing-100);transition-timing-function:var(--dt-motion-easing-in)}.c-toast--rtl{--toast-translate-start: 100%}.c-toast--animate-in{animation-duration:var(--dt-motion-timing-200);animation-name:animate-in;animation-timing-function:var(--dt-motion-easing-out);transform:translate(var(--toast-translate-end))}.c-toast--animate-out{animation-duration:var(--dt-motion-timing-100);animation-name:animate-out;animation-timing-function:var(--dt-motion-easing-in);transform:translate(var(--toast-translate-start));opacity:0}.c-toast--info{--toast-icon-fill: var(--dt-color-support-info-inverse)}.c-toast--info.c-toast--strong{--toast-background-color: var(--dt-color-support-info);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast--warning{--toast-icon-fill: var(--dt-color-support-warning-inverse)}.c-toast--warning.c-toast--strong{--toast-background-color: var(--dt-color-support-warning);--toast-icon-fill: var(--dt-color-content-dark);--toast-font-color: var(--dt-color-content-dark)}.c-toast--success{--toast-icon-fill: var(--dt-color-support-positive-inverse)}.c-toast--success.c-toast--strong{--toast-background-color: var(--dt-color-support-positive);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast--error{--toast-icon-fill: var(--dt-color-support-error-inverse)}.c-toast--error.c-toast--strong{--toast-background-color: var(--dt-color-support-error);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast-contentArea{display:flex;gap:var(--dt-spacing-b);justify-content:space-between}.c-toast-messageArea{display:flex;align-items:center;gap:var(--dt-spacing-b);padding:6px var(--dt-spacing-a) 6px 0;overflow:hidden}.c-toast-messageArea span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.c-toast-actionsArea{display:flex;gap:var(--dt-spacing-b);flex-shrink:0}.c-toast--multiline .c-toast-contentArea{align-items:flex-start;gap:0}.c-toast--multiline .c-toast-messageArea{align-items:flex-start;padding-block-end:var(--dt-spacing-b)}.c-toast--multiline .c-toast-messageArea span{max-height:60px;white-space:inherit;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.c-toast-footer{display:flex;justify-content:flex-end}.c-toast-icon{color:var(--toast-icon-fill)}@keyframes animate-in{0%{transform:translate(var(--toast-translate-start))}to{transform:translate(var(--toast-translate-end))}}@keyframes animate-out{0%{transform:translate(var(--toast-translate-end))}to{transform:translate(var(--toast-translate-start))}}", T = ["neutral", "info", "warning", "success", "error"], i = "pie-toast", s = "c-toast", k = `${i}-close`, L = `${i}-open`, B = `${i}-leading-action-click`, p = {
   message: "",
   isOpen: !0,
   variant: "neutral",
@@ -31,14 +25,14 @@ const L = "*,*:after,*:before{box-sizing:inherit}.c-toast{--toast-border-radius:
   isMultiline: !1,
   duration: 5e3
 };
-var z = Object.defineProperty, r = (v, t, n, p) => {
-  for (var o = void 0, s = v.length - 1, c; s >= 0; s--)
-    (c = v[s]) && (o = c(t, n, o) || o);
-  return o && z(t, n, o), o;
+var N = Object.defineProperty, I = Object.getOwnPropertyDescriptor, n = (t, a, r, c) => {
+  for (var o = c > 1 ? void 0 : c ? I(a, r) : a, m = t.length - 1, v; m >= 0; m--)
+    (v = t[m]) && (o = (c ? v(a, r, o) : v(o)) || o);
+  return c && o && N(a, r, o), o;
 };
-const f = class f extends w(b) {
+let e = class extends C(f) {
   constructor() {
-    super(...arguments), this.message = m.message, this.isOpen = m.isOpen, this.variant = m.variant, this.isStrong = m.isStrong, this.isDismissible = m.isDismissible, this.isMultiline = m.isMultiline, this.duration = m.duration, this._timeoutId = null, this._abortController = null;
+    super(...arguments), this.message = p.message, this.isOpen = p.isOpen, this.variant = p.variant, this.isStrong = p.isStrong, this.isDismissible = p.isDismissible, this.isMultiline = p.isMultiline, this.duration = p.duration, this._timeoutId = null, this._abortController = null;
   }
   /**
    * Create a timeout function and set its id into a private attribute.
@@ -69,12 +63,12 @@ const f = class f extends w(b) {
    *
    * @private
    */
-  addListenersToElement(t, n, p, o) {
-    t && (t.addEventListener(n, () => {
+  addListenersToElement(t, a, r, c) {
+    t && (t.addEventListener(a, () => {
       this._timeoutId && clearTimeout(this._timeoutId);
-    }, { signal: o }), t.addEventListener(p, () => {
+    }, { signal: c }), t.addEventListener(r, () => {
       this.setAutoDismiss();
-    }, { signal: o }));
+    }, { signal: c }));
   }
   /**
    * It creates all event listeners to handle the auto-dismiss capability
@@ -94,7 +88,7 @@ const f = class f extends w(b) {
    * It aborts all event listeners when toast is closed.
    */
   async updated(t) {
-    t.has("isOpen") && this.isOpen && (h(this, S, { targetNotification: this }), this.duration !== null && this.createAutoDismissEventListeners()), t.has("isOpen") && !this.isOpen && this.abortAndCleanEventListeners();
+    t.has("isOpen") && this.isOpen && (g(this, L, { targetNotification: this }), this.duration !== null && this.createAutoDismissEventListeners()), t.has("isOpen") && !this.isOpen && this.abortAndCleanEventListeners();
   }
   /**
    * It handle the action button action.
@@ -102,7 +96,7 @@ const f = class f extends w(b) {
    * @private
    */
   handleActionClick() {
-    h(this, I, { targetNotification: this });
+    g(this, B, { targetNotification: this });
   }
   /**
    * Render the action button depending on action type and its action.
@@ -113,16 +107,16 @@ const f = class f extends w(b) {
    * @private
    */
   renderActionButton(t) {
-    const { text: n, ariaLabel: p } = t;
+    const { text: a, ariaLabel: r } = t;
     return l`
             <pie-button
                 variant="${this.shouldNotUseInverseBtnVariant() ? "ghost" : "ghost-inverse"}"
                 size="xsmall"
-                aria-label="${p || u}"
+                aria-label="${r || d}"
                 @click="${() => this.handleActionClick()}"
                 data-test-id="${i}-leading-action"
                 type="button">
-                ${n}
+                ${a}
             </pie-button>
         `;
   }
@@ -136,8 +130,8 @@ const f = class f extends w(b) {
   renderFooter() {
     const { leadingAction: t } = this;
     return l`
-            <footer class="${e}-footer" data-test-id="${i}-footer" >
-                ${t ? this.renderActionButton(t) : u}
+            <footer class="${s}-footer" data-test-id="${i}-footer" >
+                ${t ? this.renderActionButton(t) : d}
             </footer>
         `;
   }
@@ -179,7 +173,7 @@ const f = class f extends w(b) {
    * @private
    */
   closeToastComponent() {
-    this.isOpen = !1, h(this, N, { targetNotification: this }), this.abortAndCleanEventListeners();
+    this.isOpen = !1, g(this, k, { targetNotification: this }), this.abortAndCleanEventListeners();
   }
   /**
    * Util method that returns an icon from a variant that has default icon.
@@ -189,15 +183,15 @@ const f = class f extends w(b) {
   getVariantIcon() {
     switch (this.variant) {
       case "info":
-        return l`<icon-info-circle class="${e}-icon" size="s" data-test-id="${i}-heading-icon-info"></icon-info-circle>`;
+        return l`<icon-info-circle class="${s}-icon" size="s" data-test-id="${i}-heading-icon-info"></icon-info-circle>`;
       case "success":
-        return l`<icon-check-circle class="${e}-icon" size="s" data-test-id="${i}-heading-icon-success"></icon-check-circle>`;
+        return l`<icon-check-circle class="${s}-icon" size="s" data-test-id="${i}-heading-icon-success"></icon-check-circle>`;
       case "warning":
-        return l`<icon-alert-triangle class="${e}-icon" size="s" data-test-id="${i}-heading-icon-warning"></icon-alert-triangle>`;
+        return l`<icon-alert-triangle class="${s}-icon" size="s" data-test-id="${i}-heading-icon-warning"></icon-alert-triangle>`;
       case "error":
-        return l`<icon-alert-circle class="${e}-icon" size="s" data-test-id="${i}-heading-icon-error"></icon-alert-circle>`;
+        return l`<icon-alert-circle class="${s}-icon" size="s" data-test-id="${i}-heading-icon-error"></icon-alert-circle>`;
       default:
-        return u;
+        return d;
     }
   }
   /**
@@ -221,82 +215,83 @@ const f = class f extends w(b) {
   render() {
     const {
       isOpen: t,
-      variant: n,
-      message: p,
-      isDismissible: o,
-      leadingAction: s,
-      isMultiline: c,
-      isStrong: $,
-      isRTL: y
-    } = this, x = {
-      [e]: !0,
-      [`${e}--rtl`]: y,
-      [`${e}--multiline`]: c,
-      [`${e}--${n}`]: !0,
-      [`${e}--strong`]: $,
-      [`${e}--animate-in`]: t,
-      [`${e}--animate-out`]: !t
+      variant: a,
+      message: r,
+      isDismissible: c,
+      leadingAction: o,
+      isMultiline: m,
+      isStrong: v,
+      isRTL: $
+    } = this, y = {
+      [s]: !0,
+      [`${s}--rtl`]: $,
+      [`${s}--multiline`]: m,
+      [`${s}--${a}`]: !0,
+      [`${s}--strong`]: v,
+      [`${s}--animate-in`]: t,
+      [`${s}--animate-out`]: !t
     };
     return l`
             <div
-                role="${n === "error" ? "alert" : "status"}"
+                role="${a === "error" ? "alert" : "status"}"
                 data-test-id="${i}"
-                class="${_(x)}">
-                <div class="${e}-contentArea">
-                    <div class="${e}-messageArea">
-                        ${this.variantHasIcon(n) ? this.getVariantIcon() : u}
-                        ${p === "" ? u : this.renderMessage(p)}
+                class="${w(y)}">
+                <div class="${s}-contentArea">
+                    <div class="${s}-messageArea">
+                        ${this.variantHasIcon(a) ? this.getVariantIcon() : d}
+                        ${r === "" ? d : this.renderMessage(r)}
                     </div>
-                    <div class="${e}-actionsArea">
-                        ${!c && (s != null && s.text) ? this.renderActionButton(s) : u}
-                        ${o ? this.renderCloseButton() : u}
+                    <div class="${s}-actionsArea">
+                        ${!m && (o != null && o.text) ? this.renderActionButton(o) : d}
+                        ${c ? this.renderCloseButton() : d}
                     </div>
                 </div>
-                ${c && (s != null && s.text) ? this.renderFooter() : u}
+                ${m && (o != null && o.text) ? this.renderFooter() : d}
             </div>`;
   }
 };
-f.styles = C(L);
-let a = f;
-r([
-  d({ type: String })
-], a.prototype, "message");
-r([
-  d({ type: Boolean })
-], a.prototype, "isOpen");
-r([
-  d({ type: String }),
-  E(i, B, m.variant)
-], a.prototype, "variant");
-r([
-  d({ type: Boolean })
-], a.prototype, "isStrong");
-r([
-  d({ type: Boolean })
-], a.prototype, "isDismissible");
-r([
-  d({ type: Boolean })
-], a.prototype, "isMultiline");
-r([
-  d({ type: Object })
-], a.prototype, "leadingAction");
-r([
-  d({ type: Number })
-], a.prototype, "duration");
-r([
-  g("pie-button")
-], a.prototype, "actionButton");
-r([
-  g("pie-icon-button")
-], a.prototype, "closeButton");
-k(i, a);
+e.styles = A(E);
+n([
+  u({ type: String })
+], e.prototype, "message", 2);
+n([
+  u({ type: Boolean })
+], e.prototype, "isOpen", 2);
+n([
+  u({ type: String }),
+  O(i, T, p.variant)
+], e.prototype, "variant", 2);
+n([
+  u({ type: Boolean })
+], e.prototype, "isStrong", 2);
+n([
+  u({ type: Boolean })
+], e.prototype, "isDismissible", 2);
+n([
+  u({ type: Boolean })
+], e.prototype, "isMultiline", 2);
+n([
+  u({ type: Object })
+], e.prototype, "leadingAction", 2);
+n([
+  u({ type: Number })
+], e.prototype, "duration", 2);
+n([
+  b("pie-button")
+], e.prototype, "actionButton", 2);
+n([
+  b("pie-icon-button")
+], e.prototype, "closeButton", 2);
+e = n([
+  _("pie-toast")
+], e);
 export {
-  N as ON_TOAST_CLOSE_EVENT,
-  I as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
-  S as ON_TOAST_OPEN_EVENT,
-  a as PieToast,
-  e as componentClass,
+  k as ON_TOAST_CLOSE_EVENT,
+  B as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
+  L as ON_TOAST_OPEN_EVENT,
+  e as PieToast,
+  s as componentClass,
   i as componentSelector,
-  m as defaultProps,
-  B as variants
+  p as defaultProps,
+  T as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-toast",
   "description": "PIE Design System Toast built using Web Components",
-  "version": "0.8.4",
+  "version": "0.9.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -45,10 +45,10 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "1.5.1",
-    "@justeattakeaway/pie-icon-button": "1.4.4",
-    "@justeattakeaway/pie-icons-webc": "1.9.0",
-    "@justeattakeaway/pie-webc-core": "0.25.1"
+    "@justeattakeaway/pie-button": "1.6.0",
+    "@justeattakeaway/pie-icon-button": "1.5.0",
+    "@justeattakeaway/pie-icons-webc": "1.10.0",
+    "@justeattakeaway/pie-webc-core": "0.26.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -10,8 +10,8 @@ import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import {
     RtlMixin,
-    defineCustomElement,
     dispatchCustomEvent,
+    safeCustomElement,
     validPropertyValues,
 } from '@justeattakeaway/pie-webc-core';
 import '@justeattakeaway/pie-icon-button';
@@ -44,6 +44,7 @@ export * from './defs';
  * @event {CustomEvent} pie-toast-open - when the toast is opened.
  * @event {CustomEvent} pie-toast-leading-action-click - when the user interacts with the leading action.
  */
+@safeCustomElement('pie-toast')
 export class PieToast extends RtlMixin(PieElement) implements ToastProps {
     @property({ type: String })
     public message = defaultProps.message;
@@ -353,8 +354,6 @@ export class PieToast extends RtlMixin(PieElement) implements ToastProps {
     }
 }
 
-defineCustomElement(componentSelector, PieToast);
-
 declare global {
     interface HTMLElementTagNameMap {
         [componentSelector]: PieToast;