@justeattakeaway/pie-toast 0.7.8 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +107 -94
- package/dist/react.d.ts +2 -2
- package/package.json +8 -7
- package/src/index.ts +2 -2
package/custom-elements.json
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
import type { CSSResult } from 'lit';
|
|
3
3
|
import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
4
|
-
import
|
|
4
|
+
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
5
5
|
import type { PropertyValues } from 'lit';
|
|
6
6
|
import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
7
7
|
import type { TemplateResult } from 'lit';
|
|
@@ -173,7 +173,7 @@ export declare class PieToast extends PieToast_base implements ToastProps {
|
|
|
173
173
|
render(): TemplateResult<1>;
|
|
174
174
|
}
|
|
175
175
|
|
|
176
|
-
declare const PieToast_base: GenericConstructor<RTLInterface> & typeof
|
|
176
|
+
declare const PieToast_base: GenericConstructor<RTLInterface> & typeof PieElement;
|
|
177
177
|
|
|
178
178
|
export declare interface ToastProps {
|
|
179
179
|
/**
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as
|
|
3
|
-
import { classMap as
|
|
4
|
-
import { RtlMixin as w, dispatchCustomEvent as h, validPropertyValues as
|
|
1
|
+
import { LitElement as A, unsafeCSS as C, html as l, nothing as u } from "lit";
|
|
2
|
+
import { property as d, query as g } from "lit/decorators.js";
|
|
3
|
+
import { classMap as _ } from "lit/directives/class-map.js";
|
|
4
|
+
import { RtlMixin as w, dispatchCustomEvent as h, validPropertyValues as E, defineCustomElement as k } from "@justeattakeaway/pie-webc-core";
|
|
5
5
|
import "@justeattakeaway/pie-icon-button";
|
|
6
6
|
import "@justeattakeaway/pie-button";
|
|
7
7
|
import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
|
|
@@ -9,7 +9,20 @@ import "@justeattakeaway/pie-icons-webc/dist/IconInfoCircle.js";
|
|
|
9
9
|
import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
|
|
10
10
|
import "@justeattakeaway/pie-icons-webc/dist/IconAlertTriangle.js";
|
|
11
11
|
import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
|
|
12
|
-
|
|
12
|
+
var O = Object.defineProperty, T = (v, t, n, p) => {
|
|
13
|
+
for (var o = void 0, s = v.length - 1, c; s >= 0; s--)
|
|
14
|
+
(c = v[s]) && (o = c(t, n, o) || o);
|
|
15
|
+
return o && O(t, n, o), o;
|
|
16
|
+
};
|
|
17
|
+
class b extends A {
|
|
18
|
+
constructor() {
|
|
19
|
+
super(...arguments), this.v = "0.8.0";
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
T([
|
|
23
|
+
d({ type: String, reflect: !0 })
|
|
24
|
+
], b.prototype, "v");
|
|
25
|
+
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 = {
|
|
13
26
|
message: "",
|
|
14
27
|
isOpen: !0,
|
|
15
28
|
variant: "neutral",
|
|
@@ -18,14 +31,14 @@ const _ = "*,*:after,*:before{box-sizing:inherit}.c-toast{--toast-border-radius:
|
|
|
18
31
|
isMultiline: !1,
|
|
19
32
|
duration: 5e3
|
|
20
33
|
};
|
|
21
|
-
var
|
|
22
|
-
for (var
|
|
23
|
-
(
|
|
24
|
-
return
|
|
34
|
+
var z = Object.defineProperty, r = (v, t, n, p) => {
|
|
35
|
+
for (var o = void 0, s = v.length - 1, c; s >= 0; s--)
|
|
36
|
+
(c = v[s]) && (o = c(t, n, o) || o);
|
|
37
|
+
return o && z(t, n, o), o;
|
|
25
38
|
};
|
|
26
|
-
const
|
|
39
|
+
const f = class f extends w(b) {
|
|
27
40
|
constructor() {
|
|
28
|
-
super(...arguments), this.message =
|
|
41
|
+
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;
|
|
29
42
|
}
|
|
30
43
|
/**
|
|
31
44
|
* Create a timeout function and set its id into a private attribute.
|
|
@@ -56,12 +69,12 @@ const v = class v extends w(x) {
|
|
|
56
69
|
*
|
|
57
70
|
* @private
|
|
58
71
|
*/
|
|
59
|
-
addListenersToElement(t,
|
|
60
|
-
t && (t.addEventListener(
|
|
72
|
+
addListenersToElement(t, n, p, o) {
|
|
73
|
+
t && (t.addEventListener(n, () => {
|
|
61
74
|
this._timeoutId && clearTimeout(this._timeoutId);
|
|
62
|
-
}, { signal:
|
|
75
|
+
}, { signal: o }), t.addEventListener(p, () => {
|
|
63
76
|
this.setAutoDismiss();
|
|
64
|
-
}, { signal:
|
|
77
|
+
}, { signal: o }));
|
|
65
78
|
}
|
|
66
79
|
/**
|
|
67
80
|
* It creates all event listeners to handle the auto-dismiss capability
|
|
@@ -81,7 +94,7 @@ const v = class v extends w(x) {
|
|
|
81
94
|
* It aborts all event listeners when toast is closed.
|
|
82
95
|
*/
|
|
83
96
|
async updated(t) {
|
|
84
|
-
t.has("isOpen") && this.isOpen && (h(this,
|
|
97
|
+
t.has("isOpen") && this.isOpen && (h(this, S, { targetNotification: this }), this.duration !== null && this.createAutoDismissEventListeners()), t.has("isOpen") && !this.isOpen && this.abortAndCleanEventListeners();
|
|
85
98
|
}
|
|
86
99
|
/**
|
|
87
100
|
* It handle the action button action.
|
|
@@ -89,7 +102,7 @@ const v = class v extends w(x) {
|
|
|
89
102
|
* @private
|
|
90
103
|
*/
|
|
91
104
|
handleActionClick() {
|
|
92
|
-
h(this,
|
|
105
|
+
h(this, I, { targetNotification: this });
|
|
93
106
|
}
|
|
94
107
|
/**
|
|
95
108
|
* Render the action button depending on action type and its action.
|
|
@@ -100,16 +113,16 @@ const v = class v extends w(x) {
|
|
|
100
113
|
* @private
|
|
101
114
|
*/
|
|
102
115
|
renderActionButton(t) {
|
|
103
|
-
const { text:
|
|
104
|
-
return
|
|
116
|
+
const { text: n, ariaLabel: p } = t;
|
|
117
|
+
return l`
|
|
105
118
|
<pie-button
|
|
106
119
|
variant="${this.shouldNotUseInverseBtnVariant() ? "ghost" : "ghost-inverse"}"
|
|
107
120
|
size="xsmall"
|
|
108
|
-
aria-label="${
|
|
121
|
+
aria-label="${p || u}"
|
|
109
122
|
@click="${() => this.handleActionClick()}"
|
|
110
|
-
data-test-id="${
|
|
123
|
+
data-test-id="${i}-leading-action"
|
|
111
124
|
type="button">
|
|
112
|
-
${
|
|
125
|
+
${n}
|
|
113
126
|
</pie-button>
|
|
114
127
|
`;
|
|
115
128
|
}
|
|
@@ -122,9 +135,9 @@ const v = class v extends w(x) {
|
|
|
122
135
|
*/
|
|
123
136
|
renderFooter() {
|
|
124
137
|
const { leadingAction: t } = this;
|
|
125
|
-
return
|
|
126
|
-
<footer class="${
|
|
127
|
-
${t ? this.renderActionButton(t) :
|
|
138
|
+
return l`
|
|
139
|
+
<footer class="${e}-footer" data-test-id="${i}-footer" >
|
|
140
|
+
${t ? this.renderActionButton(t) : u}
|
|
128
141
|
</footer>
|
|
129
142
|
`;
|
|
130
143
|
}
|
|
@@ -135,11 +148,11 @@ const v = class v extends w(x) {
|
|
|
135
148
|
* @private
|
|
136
149
|
*/
|
|
137
150
|
renderCloseButton() {
|
|
138
|
-
return
|
|
151
|
+
return l`
|
|
139
152
|
<pie-icon-button
|
|
140
153
|
variant="${this.shouldNotUseInverseBtnVariant() ? "ghost-secondary" : "ghost-inverse"}"
|
|
141
154
|
size="xsmall"
|
|
142
|
-
data-test-id="${
|
|
155
|
+
data-test-id="${i}-close"
|
|
143
156
|
@click="${this.closeToastComponent}">
|
|
144
157
|
<icon-close></icon-close>
|
|
145
158
|
</pie-icon-button>`;
|
|
@@ -153,8 +166,8 @@ const v = class v extends w(x) {
|
|
|
153
166
|
* @private
|
|
154
167
|
*/
|
|
155
168
|
renderMessage(t) {
|
|
156
|
-
return
|
|
157
|
-
<span data-test-id="${
|
|
169
|
+
return l`
|
|
170
|
+
<span data-test-id="${i}-message">
|
|
158
171
|
${t}
|
|
159
172
|
</span>
|
|
160
173
|
`;
|
|
@@ -166,7 +179,7 @@ const v = class v extends w(x) {
|
|
|
166
179
|
* @private
|
|
167
180
|
*/
|
|
168
181
|
closeToastComponent() {
|
|
169
|
-
this.isOpen = !1, h(this,
|
|
182
|
+
this.isOpen = !1, h(this, N, { targetNotification: this }), this.abortAndCleanEventListeners();
|
|
170
183
|
}
|
|
171
184
|
/**
|
|
172
185
|
* Util method that returns an icon from a variant that has default icon.
|
|
@@ -176,15 +189,15 @@ const v = class v extends w(x) {
|
|
|
176
189
|
getVariantIcon() {
|
|
177
190
|
switch (this.variant) {
|
|
178
191
|
case "info":
|
|
179
|
-
return
|
|
192
|
+
return l`<icon-info-circle class="${e}-icon" size="s" data-test-id="${i}-heading-icon-info"></icon-info-circle>`;
|
|
180
193
|
case "success":
|
|
181
|
-
return
|
|
194
|
+
return l`<icon-check-circle class="${e}-icon" size="s" data-test-id="${i}-heading-icon-success"></icon-check-circle>`;
|
|
182
195
|
case "warning":
|
|
183
|
-
return
|
|
196
|
+
return l`<icon-alert-triangle class="${e}-icon" size="s" data-test-id="${i}-heading-icon-warning"></icon-alert-triangle>`;
|
|
184
197
|
case "error":
|
|
185
|
-
return
|
|
198
|
+
return l`<icon-alert-circle class="${e}-icon" size="s" data-test-id="${i}-heading-icon-error"></icon-alert-circle>`;
|
|
186
199
|
default:
|
|
187
|
-
return
|
|
200
|
+
return u;
|
|
188
201
|
}
|
|
189
202
|
}
|
|
190
203
|
/**
|
|
@@ -208,82 +221,82 @@ const v = class v extends w(x) {
|
|
|
208
221
|
render() {
|
|
209
222
|
const {
|
|
210
223
|
isOpen: t,
|
|
211
|
-
variant:
|
|
212
|
-
message:
|
|
213
|
-
isDismissible:
|
|
214
|
-
leadingAction:
|
|
215
|
-
isMultiline:
|
|
216
|
-
isStrong:
|
|
217
|
-
isRTL:
|
|
218
|
-
} = this,
|
|
219
|
-
[
|
|
220
|
-
[`${
|
|
221
|
-
[`${
|
|
222
|
-
[`${
|
|
223
|
-
[`${
|
|
224
|
-
[`${
|
|
225
|
-
[`${
|
|
224
|
+
variant: n,
|
|
225
|
+
message: p,
|
|
226
|
+
isDismissible: o,
|
|
227
|
+
leadingAction: s,
|
|
228
|
+
isMultiline: c,
|
|
229
|
+
isStrong: $,
|
|
230
|
+
isRTL: y
|
|
231
|
+
} = this, x = {
|
|
232
|
+
[e]: !0,
|
|
233
|
+
[`${e}--rtl`]: y,
|
|
234
|
+
[`${e}--multiline`]: c,
|
|
235
|
+
[`${e}--${n}`]: !0,
|
|
236
|
+
[`${e}--strong`]: $,
|
|
237
|
+
[`${e}--animate-in`]: t,
|
|
238
|
+
[`${e}--animate-out`]: !t
|
|
226
239
|
};
|
|
227
|
-
return
|
|
240
|
+
return l`
|
|
228
241
|
<div
|
|
229
|
-
role="${
|
|
230
|
-
data-test-id="${
|
|
231
|
-
class="${
|
|
232
|
-
<div class="${
|
|
233
|
-
<div class="${
|
|
234
|
-
${this.variantHasIcon(
|
|
235
|
-
${
|
|
242
|
+
role="${n === "error" ? "alert" : "status"}"
|
|
243
|
+
data-test-id="${i}"
|
|
244
|
+
class="${_(x)}">
|
|
245
|
+
<div class="${e}-contentArea">
|
|
246
|
+
<div class="${e}-messageArea">
|
|
247
|
+
${this.variantHasIcon(n) ? this.getVariantIcon() : u}
|
|
248
|
+
${p === "" ? u : this.renderMessage(p)}
|
|
236
249
|
</div>
|
|
237
|
-
<div class="${
|
|
238
|
-
${!
|
|
239
|
-
${
|
|
250
|
+
<div class="${e}-actionsArea">
|
|
251
|
+
${!c && (s != null && s.text) ? this.renderActionButton(s) : u}
|
|
252
|
+
${o ? this.renderCloseButton() : u}
|
|
240
253
|
</div>
|
|
241
254
|
</div>
|
|
242
|
-
${
|
|
255
|
+
${c && (s != null && s.text) ? this.renderFooter() : u}
|
|
243
256
|
</div>`;
|
|
244
257
|
}
|
|
245
258
|
};
|
|
246
|
-
|
|
247
|
-
let
|
|
259
|
+
f.styles = C(L);
|
|
260
|
+
let a = f;
|
|
248
261
|
r([
|
|
249
|
-
|
|
250
|
-
],
|
|
262
|
+
d({ type: String })
|
|
263
|
+
], a.prototype, "message");
|
|
251
264
|
r([
|
|
252
|
-
|
|
253
|
-
],
|
|
265
|
+
d({ type: Boolean })
|
|
266
|
+
], a.prototype, "isOpen");
|
|
254
267
|
r([
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
],
|
|
268
|
+
d({ type: String }),
|
|
269
|
+
E(i, B, m.variant)
|
|
270
|
+
], a.prototype, "variant");
|
|
258
271
|
r([
|
|
259
|
-
|
|
260
|
-
],
|
|
272
|
+
d({ type: Boolean })
|
|
273
|
+
], a.prototype, "isStrong");
|
|
261
274
|
r([
|
|
262
|
-
|
|
263
|
-
],
|
|
275
|
+
d({ type: Boolean })
|
|
276
|
+
], a.prototype, "isDismissible");
|
|
264
277
|
r([
|
|
265
|
-
|
|
266
|
-
],
|
|
278
|
+
d({ type: Boolean })
|
|
279
|
+
], a.prototype, "isMultiline");
|
|
267
280
|
r([
|
|
268
|
-
|
|
269
|
-
],
|
|
281
|
+
d({ type: Object })
|
|
282
|
+
], a.prototype, "leadingAction");
|
|
270
283
|
r([
|
|
271
|
-
|
|
272
|
-
],
|
|
284
|
+
d({ type: Number })
|
|
285
|
+
], a.prototype, "duration");
|
|
273
286
|
r([
|
|
274
|
-
|
|
275
|
-
],
|
|
287
|
+
g("pie-button")
|
|
288
|
+
], a.prototype, "actionButton");
|
|
276
289
|
r([
|
|
277
|
-
|
|
278
|
-
],
|
|
279
|
-
|
|
290
|
+
g("pie-icon-button")
|
|
291
|
+
], a.prototype, "closeButton");
|
|
292
|
+
k(i, a);
|
|
280
293
|
export {
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
294
|
+
N as ON_TOAST_CLOSE_EVENT,
|
|
295
|
+
I as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
|
|
296
|
+
S as ON_TOAST_OPEN_EVENT,
|
|
297
|
+
a as PieToast,
|
|
298
|
+
e as componentClass,
|
|
299
|
+
i as componentSelector,
|
|
300
|
+
m as defaultProps,
|
|
301
|
+
B as variants
|
|
289
302
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
import type { CSSResult } from 'lit';
|
|
3
3
|
import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
4
|
-
import
|
|
4
|
+
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
5
5
|
import type { PropertyValues } from 'lit';
|
|
6
6
|
import * as React_2 from 'react';
|
|
7
7
|
import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
@@ -176,7 +176,7 @@ declare class PieToast_2 extends PieToast_base implements ToastProps {
|
|
|
176
176
|
render(): TemplateResult<1>;
|
|
177
177
|
}
|
|
178
178
|
|
|
179
|
-
declare const PieToast_base: GenericConstructor<RTLInterface> & typeof
|
|
179
|
+
declare const PieToast_base: GenericConstructor<RTLInterface> & typeof PieElement;
|
|
180
180
|
|
|
181
181
|
declare type PieToastEvents = {
|
|
182
182
|
onPieToastClose?: (event: CustomEvent) => void;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-toast",
|
|
3
3
|
"description": "PIE Design System Toast built using Web Components",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.8.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -39,15 +39,16 @@
|
|
|
39
39
|
"license": "Apache-2.0",
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
42
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
43
|
-
"@justeattakeaway/pie-css": "0.
|
|
42
|
+
"@justeattakeaway/pie-components-config": "0.19.0",
|
|
43
|
+
"@justeattakeaway/pie-css": "0.16.0",
|
|
44
|
+
"@justeattakeaway/pie-monorepo-utils": "0.5.0",
|
|
44
45
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
45
46
|
},
|
|
46
47
|
"dependencies": {
|
|
47
|
-
"@justeattakeaway/pie-button": "1.
|
|
48
|
-
"@justeattakeaway/pie-icon-button": "1.
|
|
49
|
-
"@justeattakeaway/pie-icons-webc": "1.6.
|
|
50
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
48
|
+
"@justeattakeaway/pie-button": "1.5.0",
|
|
49
|
+
"@justeattakeaway/pie-icon-button": "1.4.0",
|
|
50
|
+
"@justeattakeaway/pie-icons-webc": "1.6.1",
|
|
51
|
+
"@justeattakeaway/pie-webc-core": "0.25.0"
|
|
51
52
|
},
|
|
52
53
|
"volta": {
|
|
53
54
|
"extends": "../../../package.json"
|
package/src/index.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import {
|
|
2
|
-
LitElement,
|
|
3
2
|
html,
|
|
4
3
|
unsafeCSS,
|
|
5
4
|
nothing,
|
|
6
5
|
type TemplateResult,
|
|
7
6
|
type PropertyValues,
|
|
8
7
|
} from 'lit';
|
|
8
|
+
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
9
9
|
import { property, query } from 'lit/decorators.js';
|
|
10
10
|
import { classMap } from 'lit/directives/class-map.js';
|
|
11
11
|
import {
|
|
@@ -44,7 +44,7 @@ export * from './defs';
|
|
|
44
44
|
* @event {CustomEvent} pie-toast-open - when the toast is opened.
|
|
45
45
|
* @event {CustomEvent} pie-toast-leading-action-click - when the user interacts with the leading action.
|
|
46
46
|
*/
|
|
47
|
-
export class PieToast extends RtlMixin(
|
|
47
|
+
export class PieToast extends RtlMixin(PieElement) implements ToastProps {
|
|
48
48
|
@property({ type: String })
|
|
49
49
|
public message = defaultProps.message;
|
|
50
50
|
|