@justeattakeaway/pie-toast 1.1.8 → 1.2.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/README.md +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.js +27 -23
- package/dist/react.d.ts +4 -0
- package/package.json +1 -1
- package/src/defs.ts +4 -0
- package/src/index.ts +3 -0
package/README.md
CHANGED
|
@@ -42,7 +42,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
|
|
|
42
42
|
| `isMultiline` | `true`, `false` | Allows the message content to be displayed as multiline, limited to three rows. | `false` |
|
|
43
43
|
| `leadingAction` | `{ text: string, ariaLabel?: string }` | The leading action for the toast. | `undefined` |
|
|
44
44
|
| `duration` | `number`, `null` | Sets the duration of the toast in milliseconds before it auto-dismisses. `null` disables auto-dismiss. Defaults to 5 seconds if not specified. | `5000` |
|
|
45
|
-
| `aria` | `{ close?: string }`
|
|
45
|
+
| `aria` | `{ close?: string, live?: "off" \| "polite" \| "assertive" }` | The ARIA labels used for various parts of the toast. `close` sets the `aria-label` on the close button. `live` overrides the live region politeness; set it to `"off"` to disable the toast's own announcement (e.g. when [pie-toast-provider](https://webc.pie.design/?path=/docs/components-toast-provider--overview) announces the message instead). | `undefined` |
|
|
46
46
|
|
|
47
47
|
### Slots
|
|
48
48
|
This component does not have any slots. All content is controlled through properties.
|
package/dist/index.d.ts
CHANGED
|
@@ -18,6 +18,10 @@ export declare type ActionProps = {
|
|
|
18
18
|
|
|
19
19
|
declare type AriaProps = {
|
|
20
20
|
close?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Overrides the ARIA live region politeness of the toast.
|
|
23
|
+
*/
|
|
24
|
+
live?: 'off' | 'polite' | 'assertive';
|
|
21
25
|
};
|
|
22
26
|
|
|
23
27
|
export declare const componentClass = "c-toast";
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as p, query as
|
|
3
|
-
import { classMap as
|
|
4
|
-
import {
|
|
1
|
+
import { LitElement as $, unsafeCSS as x, nothing as l, html as d } from "lit";
|
|
2
|
+
import { property as p, query as y } from "lit/decorators.js";
|
|
3
|
+
import { classMap as A } from "lit/directives/class-map.js";
|
|
4
|
+
import { ifDefined as w } from "lit/directives/if-defined.js";
|
|
5
|
+
import { validPropertyValues as C, safeCustomElement as O, dispatchCustomEvent as g } from "@justeattakeaway/pie-webc-core";
|
|
5
6
|
import "@justeattakeaway/pie-icon-button";
|
|
6
7
|
import "@justeattakeaway/pie-button";
|
|
7
8
|
import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
|
|
@@ -9,14 +10,14 @@ import "@justeattakeaway/pie-icons-webc/dist/IconInfoCircle.js";
|
|
|
9
10
|
import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
|
|
10
11
|
import "@justeattakeaway/pie-icons-webc/dist/IconAlertTriangle.js";
|
|
11
12
|
import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
|
|
12
|
-
const f = class f extends
|
|
13
|
+
const f = class f extends $ {
|
|
13
14
|
willUpdate() {
|
|
14
15
|
this.getAttribute("v") || this.setAttribute("v", f.v);
|
|
15
16
|
}
|
|
16
17
|
};
|
|
17
|
-
f.v = "1.
|
|
18
|
+
f.v = "1.2.0";
|
|
18
19
|
let m = f;
|
|
19
|
-
const
|
|
20
|
+
const _ = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.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-family: var(--dt-font-body-s-family);--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);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-below-20);color:var(--toast-font-color);font-family:var(--toast-font-family);font-size:var(--toast-font-size);line-height:var(--toast-line-height)}.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-light);--toast-font-color: var(--dt-color-content-light)}.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}.is-multiline .c-toast-contentArea{align-items:flex-start;gap:0}.is-multiline .c-toast-messageArea{align-items:flex-start;padding-block-end:var(--dt-spacing-b)}.is-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)}", E = ["neutral", "info", "warning", "success", "error"], e = "pie-toast", a = "c-toast", T = `${e}-close`, k = `${e}-open`, B = `${e}-leading-action-click`, u = {
|
|
20
21
|
message: "",
|
|
21
22
|
isOpen: !0,
|
|
22
23
|
variant: "neutral",
|
|
@@ -25,10 +26,10 @@ const C = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-toast{--
|
|
|
25
26
|
isMultiline: !1,
|
|
26
27
|
duration: 5e3
|
|
27
28
|
};
|
|
28
|
-
var
|
|
29
|
-
for (var n = o > 1 ? void 0 : o ?
|
|
29
|
+
var L = Object.defineProperty, N = Object.getOwnPropertyDescriptor, i = (t, r, c, o) => {
|
|
30
|
+
for (var n = o > 1 ? void 0 : o ? N(r, c) : r, h = t.length - 1, v; h >= 0; h--)
|
|
30
31
|
(v = t[h]) && (n = (o ? v(r, c, n) : v(n)) || n);
|
|
31
|
-
return o && n &&
|
|
32
|
+
return o && n && L(r, c, n), n;
|
|
32
33
|
};
|
|
33
34
|
let s = class extends m {
|
|
34
35
|
constructor() {
|
|
@@ -88,7 +89,7 @@ let s = class extends m {
|
|
|
88
89
|
* It aborts all event listeners when toast is closed.
|
|
89
90
|
*/
|
|
90
91
|
async updated(t) {
|
|
91
|
-
t.has("isOpen") && this.isOpen && (g(this,
|
|
92
|
+
t.has("isOpen") && this.isOpen && (g(this, k, { targetNotification: this }), this.duration !== null && this.createAutoDismissEventListeners()), t.has("isOpen") && !this.isOpen && this.abortAndCleanEventListeners();
|
|
92
93
|
}
|
|
93
94
|
/**
|
|
94
95
|
* It handle the action button action.
|
|
@@ -96,7 +97,7 @@ let s = class extends m {
|
|
|
96
97
|
* @private
|
|
97
98
|
*/
|
|
98
99
|
handleActionClick() {
|
|
99
|
-
g(this,
|
|
100
|
+
g(this, B, { targetNotification: this });
|
|
100
101
|
}
|
|
101
102
|
/**
|
|
102
103
|
* Render the action button depending on action type and its action.
|
|
@@ -175,7 +176,7 @@ let s = class extends m {
|
|
|
175
176
|
* @private
|
|
176
177
|
*/
|
|
177
178
|
closeToastComponent() {
|
|
178
|
-
this.isOpen = !1, g(this,
|
|
179
|
+
this.isOpen = !1, g(this, T, { targetNotification: this }), this.abortAndCleanEventListeners();
|
|
179
180
|
}
|
|
180
181
|
/**
|
|
181
182
|
* Util method that returns an icon from a variant that has default icon.
|
|
@@ -215,6 +216,7 @@ let s = class extends m {
|
|
|
215
216
|
return this.variant === "warning" && this.isStrong;
|
|
216
217
|
}
|
|
217
218
|
render() {
|
|
219
|
+
var b;
|
|
218
220
|
if (!this.isOpen)
|
|
219
221
|
return l;
|
|
220
222
|
const {
|
|
@@ -233,8 +235,10 @@ let s = class extends m {
|
|
|
233
235
|
return d`
|
|
234
236
|
<div
|
|
235
237
|
role="${t === "error" ? "alert" : "status"}"
|
|
238
|
+
aria-live="${w((b = this.aria) == null ? void 0 : b.live)}"
|
|
239
|
+
aria-atomic="true"
|
|
236
240
|
data-test-id="${e}"
|
|
237
|
-
class="${
|
|
241
|
+
class="${A(v)}">
|
|
238
242
|
<div class="${a}-contentArea">
|
|
239
243
|
<div class="${a}-messageArea">
|
|
240
244
|
${this.variantHasIcon(t) ? this.getVariantIcon() : l}
|
|
@@ -249,7 +253,7 @@ let s = class extends m {
|
|
|
249
253
|
</div>`;
|
|
250
254
|
}
|
|
251
255
|
};
|
|
252
|
-
s.styles =
|
|
256
|
+
s.styles = x(_);
|
|
253
257
|
i([
|
|
254
258
|
p({ type: String })
|
|
255
259
|
], s.prototype, "message", 2);
|
|
@@ -258,7 +262,7 @@ i([
|
|
|
258
262
|
], s.prototype, "isOpen", 2);
|
|
259
263
|
i([
|
|
260
264
|
p({ type: String }),
|
|
261
|
-
|
|
265
|
+
C(e, E, u.variant)
|
|
262
266
|
], s.prototype, "variant", 2);
|
|
263
267
|
i([
|
|
264
268
|
p({ type: Boolean })
|
|
@@ -279,21 +283,21 @@ i([
|
|
|
279
283
|
p({ type: Object })
|
|
280
284
|
], s.prototype, "aria", 2);
|
|
281
285
|
i([
|
|
282
|
-
|
|
286
|
+
y("pie-button")
|
|
283
287
|
], s.prototype, "actionButton", 2);
|
|
284
288
|
i([
|
|
285
|
-
|
|
289
|
+
y("pie-icon-button")
|
|
286
290
|
], s.prototype, "closeButton", 2);
|
|
287
291
|
s = i([
|
|
288
|
-
|
|
292
|
+
O("pie-toast")
|
|
289
293
|
], s);
|
|
290
294
|
export {
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
295
|
+
T as ON_TOAST_CLOSE_EVENT,
|
|
296
|
+
B as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
|
|
297
|
+
k as ON_TOAST_OPEN_EVENT,
|
|
294
298
|
s as PieToast,
|
|
295
299
|
a as componentClass,
|
|
296
300
|
e as componentSelector,
|
|
297
301
|
u as defaultProps,
|
|
298
|
-
|
|
302
|
+
E as variants
|
|
299
303
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -19,6 +19,10 @@ export declare type ActionProps = {
|
|
|
19
19
|
|
|
20
20
|
declare type AriaProps = {
|
|
21
21
|
close?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Overrides the ARIA live region politeness of the toast.
|
|
24
|
+
*/
|
|
25
|
+
live?: 'off' | 'polite' | 'assertive';
|
|
22
26
|
};
|
|
23
27
|
|
|
24
28
|
export declare const componentClass = "c-toast";
|
package/package.json
CHANGED
package/src/defs.ts
CHANGED
|
@@ -4,6 +4,10 @@ export const variants = ['neutral', 'info', 'warning', 'success', 'error'] as co
|
|
|
4
4
|
|
|
5
5
|
type AriaProps = {
|
|
6
6
|
close?: string;
|
|
7
|
+
/**
|
|
8
|
+
* Overrides the ARIA live region politeness of the toast.
|
|
9
|
+
*/
|
|
10
|
+
live?: 'off' | 'polite' | 'assertive';
|
|
7
11
|
};
|
|
8
12
|
|
|
9
13
|
export type ActionProps = {
|
package/src/index.ts
CHANGED
|
@@ -8,6 +8,7 @@ import {
|
|
|
8
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
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
11
12
|
import {
|
|
12
13
|
dispatchCustomEvent,
|
|
13
14
|
safeCustomElement,
|
|
@@ -339,6 +340,8 @@ export class PieToast extends PieElement implements ToastProps {
|
|
|
339
340
|
return html`
|
|
340
341
|
<div
|
|
341
342
|
role="${variant === 'error' ? 'alert' : 'status'}"
|
|
343
|
+
aria-live="${ifDefined(this.aria?.live)}"
|
|
344
|
+
aria-atomic="true"
|
|
342
345
|
data-test-id="${componentSelector}"
|
|
343
346
|
class="${classMap(componentWrapperClasses)}">
|
|
344
347
|
<div class="${componentClass}-contentArea">
|