@justeattakeaway/pie-notification 0.12.15 → 0.13.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 +130 -117
- package/dist/react.d.ts +2 -2
- package/package.json +7 -6
- 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
|
-
import type { LitElement } from 'lit';
|
|
4
3
|
import type { nothing } from 'lit';
|
|
4
|
+
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
5
5
|
import type { PropertyValues } from 'lit';
|
|
6
6
|
import type { TemplateResult } from 'lit';
|
|
7
7
|
|
|
@@ -121,7 +121,7 @@ export declare const ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT: string;
|
|
|
121
121
|
* @slot - Default slot
|
|
122
122
|
* @slot icon - The icon slot
|
|
123
123
|
*/
|
|
124
|
-
export declare class PieNotification extends
|
|
124
|
+
export declare class PieNotification extends PieElement implements NotificationProps {
|
|
125
125
|
isOpen: boolean;
|
|
126
126
|
variant: "neutral" | "neutral-alternative" | "info" | "success" | "warning" | "error";
|
|
127
127
|
position: "inline-content" | "full-width";
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
1
|
+
import { LitElement as _, unsafeCSS as A, nothing as l } from "lit";
|
|
2
|
+
import { property as r, queryAssignedElements as w } from "lit/decorators.js";
|
|
3
|
+
import { classMap as m } from "lit/directives/class-map.js";
|
|
4
|
+
import { html as p, unsafeStatic as E } from "lit/static-html.js";
|
|
5
|
+
import { dispatchCustomEvent as $, validPropertyValues as b, defineCustomElement as S } from "@justeattakeaway/pie-webc-core";
|
|
6
6
|
import { ifDefined as C } from "lit/directives/if-defined.js";
|
|
7
7
|
import "@justeattakeaway/pie-button";
|
|
8
8
|
import "@justeattakeaway/pie-icon-button";
|
|
@@ -11,7 +11,20 @@ import "@justeattakeaway/pie-icons-webc/dist/IconAlertTriangle.js";
|
|
|
11
11
|
import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
|
|
12
12
|
import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
|
|
13
13
|
import "@justeattakeaway/pie-icons-webc/dist/IconInfoCircle.js";
|
|
14
|
-
|
|
14
|
+
var z = Object.defineProperty, T = (u, i, n, a) => {
|
|
15
|
+
for (var t = void 0, c = u.length - 1, h; c >= 0; c--)
|
|
16
|
+
(h = u[c]) && (t = h(i, n, t) || t);
|
|
17
|
+
return t && z(i, n, t), t;
|
|
18
|
+
};
|
|
19
|
+
class O extends _ {
|
|
20
|
+
constructor() {
|
|
21
|
+
super(...arguments), this.v = "0.13.0";
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
T([
|
|
25
|
+
r({ type: String, reflect: !0 })
|
|
26
|
+
], O.prototype, "v");
|
|
27
|
+
const B = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], L = ["h2", "h3", "h4", "h5", "h6"], V = ["inline-content", "full-width"], o = "pie-notification", d = "c-notification", D = `${o}-close`, P = `${o}-open`, F = `${o}-leading-action-click`, j = `${o}-supporting-action-click`, f = {
|
|
15
28
|
variant: "neutral",
|
|
16
29
|
position: "inline-content",
|
|
17
30
|
isDismissible: !1,
|
|
@@ -20,22 +33,22 @@ const z = ["neutral", "neutral-alternative", "info", "success", "warning", "erro
|
|
|
20
33
|
hideIcon: !1,
|
|
21
34
|
isOpen: !0,
|
|
22
35
|
hasStackedActions: !1
|
|
23
|
-
},
|
|
24
|
-
var
|
|
25
|
-
for (var
|
|
26
|
-
(h =
|
|
27
|
-
return
|
|
36
|
+
}, G = "*,*:after,*:before{box-sizing:inherit}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-heading-font-size: calc(var(--dt-font-heading-s-size--narrow) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--narrow) * 1px);--notification-font-size: calc(var(--dt-font-body-l-size) * 1px);--notification-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--notification-close-icon-offset: var(--dt-spacing-b);--notification-icon-fill: var(--dt-color-content-default);--notification-icon-offset: 2px;--icon-size-override: 24px;padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height);color:var(--dt-color-content-default)}.c-notification.c-notification--compact{--notification-direction: row}.c-notification.c-notification--full-width{--notification-border-radius: var(--dt-radius-rounded-none)}.c-notification.c-notification--neutral-alternative{--notification-background-color: var(--dt-color-container-default)}.c-notification.c-notification--info{--notification-background-color: var(--dt-color-support-info-02);--notification-icon-fill: var(--dt-color-blue)}.c-notification.c-notification--success{--notification-background-color: var(--dt-color-support-positive-02);--notification-icon-fill: var(--dt-color-content-positive)}.c-notification.c-notification--warning{--notification-background-color: var(--dt-color-support-warning-02)}.c-notification.c-notification--error{--notification-background-color: var(--dt-color-support-error-02);--notification-icon-fill: var(--dt-color-support-error)}.c-notification-heading{margin:0;margin-block-end:var(--dt-spacing-a);font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height)}@media (min-width: 769px){.c-notification-heading{--notification-heading-font-size: calc(var(--dt-font-heading-s-size--wide) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--wide) * 1px)}}.c-notification-content-section{display:flex;flex-direction:row;gap:var(--dt-spacing-c)}.c-notification-content-section.c-notification-content-section--dismissible{max-width:calc(100% - var(--notification-close-icon-offset) - 40px)}.c-notification-icon-close{position:absolute;inset-block-start:var(--notification-close-icon-offset);inset-inline-end:var(--notification-close-icon-offset)}.c-notification-footer{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--dt-spacing-d)}.c-notification-footer.c-notification-footer--compact{align-self:flex-end}@media (max-width: 767px){.c-notification-footer.c-notification-footer--stacked{flex-direction:column-reverse}}.icon,::slotted([slot=icon]){display:inline-flex;color:var(--notification-icon-fill);margin-block-start:var(--notification-icon-offset)}@media (max-width: 767px){.icon,::slotted([slot=icon]){margin-block-start:0}}";
|
|
37
|
+
var H = Object.defineProperty, s = (u, i, n, a) => {
|
|
38
|
+
for (var t = void 0, c = u.length - 1, h; c >= 0; c--)
|
|
39
|
+
(h = u[c]) && (t = h(i, n, t) || t);
|
|
40
|
+
return t && H(i, n, t), t;
|
|
28
41
|
};
|
|
29
|
-
const
|
|
42
|
+
const y = class y extends O {
|
|
30
43
|
constructor() {
|
|
31
|
-
super(...arguments), this.isOpen =
|
|
44
|
+
super(...arguments), this.isOpen = f.isOpen, this.variant = f.variant, this.position = f.position, this.isDismissible = f.isDismissible, this.isCompact = f.isCompact, this.headingLevel = f.headingLevel, this.hideIcon = f.hideIcon, this.hasStackedActions = f.hasStackedActions;
|
|
32
45
|
}
|
|
33
46
|
/**
|
|
34
47
|
* Lifecycle method executed when component is updated.
|
|
35
48
|
* It dispatches an event if notification is opened.
|
|
36
49
|
*/
|
|
37
50
|
updated(i) {
|
|
38
|
-
i.has("isOpen") && this.isOpen &&
|
|
51
|
+
i.has("isOpen") && this.isOpen && $(this, P, { targetNotification: this });
|
|
39
52
|
}
|
|
40
53
|
/**
|
|
41
54
|
* Template for the footer area
|
|
@@ -47,19 +60,19 @@ const b = class b extends N {
|
|
|
47
60
|
const {
|
|
48
61
|
leadingAction: i,
|
|
49
62
|
supportingAction: n,
|
|
50
|
-
isCompact:
|
|
51
|
-
hasStackedActions:
|
|
52
|
-
} = this,
|
|
53
|
-
[`${
|
|
54
|
-
[`${
|
|
55
|
-
[`${
|
|
63
|
+
isCompact: a,
|
|
64
|
+
hasStackedActions: t
|
|
65
|
+
} = this, c = {
|
|
66
|
+
[`${d}-footer`]: !0,
|
|
67
|
+
[`${d}-footer--compact`]: a,
|
|
68
|
+
[`${d}-footer--stacked`]: t && !a
|
|
56
69
|
};
|
|
57
|
-
return
|
|
70
|
+
return p`
|
|
58
71
|
<footer
|
|
59
|
-
class="${
|
|
60
|
-
data-test-id="${
|
|
61
|
-
${n ? this.renderActionButton(n, "supporting") :
|
|
62
|
-
${i ? this.renderActionButton(i, "leading") :
|
|
72
|
+
class="${m(c)}"
|
|
73
|
+
data-test-id="${o}-footer">
|
|
74
|
+
${n ? this.renderActionButton(n, "supporting") : l}
|
|
75
|
+
${i ? this.renderActionButton(i, "leading") : l}
|
|
63
76
|
</footer>
|
|
64
77
|
`;
|
|
65
78
|
}
|
|
@@ -70,13 +83,13 @@ const b = class b extends N {
|
|
|
70
83
|
* @private
|
|
71
84
|
*/
|
|
72
85
|
renderNotificationHeading() {
|
|
73
|
-
const { heading: i, headingLevel: n } = this,
|
|
74
|
-
return
|
|
75
|
-
id="${
|
|
76
|
-
class="${
|
|
77
|
-
data-test-id="${
|
|
86
|
+
const { heading: i, headingLevel: n } = this, a = E(n);
|
|
87
|
+
return p`<${a}
|
|
88
|
+
id="${o}-heading"
|
|
89
|
+
class="${d}-heading"
|
|
90
|
+
data-test-id="${o}-heading">
|
|
78
91
|
${i}
|
|
79
|
-
</${
|
|
92
|
+
</${a}>`;
|
|
80
93
|
}
|
|
81
94
|
/**
|
|
82
95
|
* Util method that returns an icon from a variant that has default icon.
|
|
@@ -86,15 +99,15 @@ const b = class b extends N {
|
|
|
86
99
|
getDefaultVariantIcon() {
|
|
87
100
|
switch (this.variant) {
|
|
88
101
|
case "info":
|
|
89
|
-
return
|
|
102
|
+
return p`<icon-info-circle class="icon" size="m" data-test-id="${o}-heading-icon-info"></icon-info-circle>`;
|
|
90
103
|
case "success":
|
|
91
|
-
return
|
|
104
|
+
return p`<icon-check-circle class="icon" size="m" data-test-id="${o}-heading-icon-success"></icon-check-circle>`;
|
|
92
105
|
case "warning":
|
|
93
|
-
return
|
|
106
|
+
return p`<icon-alert-triangle class="icon" size="m" data-test-id="${o}-heading-icon-warning"></icon-alert-triangle>`;
|
|
94
107
|
case "error":
|
|
95
|
-
return
|
|
108
|
+
return p`<icon-alert-circle class="icon" size="m" data-test-id="${o}-heading-icon-error"></icon-alert-circle>`;
|
|
96
109
|
default:
|
|
97
|
-
return
|
|
110
|
+
return l;
|
|
98
111
|
}
|
|
99
112
|
}
|
|
100
113
|
/**
|
|
@@ -105,7 +118,7 @@ const b = class b extends N {
|
|
|
105
118
|
* @private
|
|
106
119
|
*/
|
|
107
120
|
renderIcon() {
|
|
108
|
-
return
|
|
121
|
+
return p`<slot name="icon">${this.getDefaultVariantIcon()}</slot>`;
|
|
109
122
|
}
|
|
110
123
|
/**
|
|
111
124
|
* Template for the close button element. Called within the
|
|
@@ -115,12 +128,12 @@ const b = class b extends N {
|
|
|
115
128
|
*/
|
|
116
129
|
renderCloseButton() {
|
|
117
130
|
var i;
|
|
118
|
-
return
|
|
131
|
+
return p`
|
|
119
132
|
<pie-icon-button
|
|
120
133
|
variant="ghost-secondary"
|
|
121
134
|
size="small"
|
|
122
|
-
class="${
|
|
123
|
-
data-test-id="${
|
|
135
|
+
class="${d}-icon-close"
|
|
136
|
+
data-test-id="${o}-icon-close"
|
|
124
137
|
@click="${this.handleCloseButton}"
|
|
125
138
|
aria-label="${C((i = this.aria) == null ? void 0 : i.close)}">
|
|
126
139
|
<icon-close></icon-close>
|
|
@@ -133,7 +146,7 @@ const b = class b extends N {
|
|
|
133
146
|
* @private
|
|
134
147
|
*/
|
|
135
148
|
handleCloseButton() {
|
|
136
|
-
this.isOpen = !1,
|
|
149
|
+
this.isOpen = !1, $(this, D, { targetNotification: this });
|
|
137
150
|
}
|
|
138
151
|
/**
|
|
139
152
|
* It handles the action button action.
|
|
@@ -144,7 +157,7 @@ const b = class b extends N {
|
|
|
144
157
|
* @private
|
|
145
158
|
*/
|
|
146
159
|
handleActionClick(i) {
|
|
147
|
-
|
|
160
|
+
$(this, i === "leading" ? F : j, { targetNotification: this });
|
|
148
161
|
}
|
|
149
162
|
/**
|
|
150
163
|
* Render the action button depending on action type and its action.
|
|
@@ -156,120 +169,120 @@ const b = class b extends N {
|
|
|
156
169
|
* @private
|
|
157
170
|
*/
|
|
158
171
|
renderActionButton(i, n) {
|
|
159
|
-
const { text:
|
|
160
|
-
return
|
|
172
|
+
const { text: a, ariaLabel: t } = i;
|
|
173
|
+
return a ? p`
|
|
161
174
|
<pie-button
|
|
162
175
|
variant="${n === "leading" ? "primary" : "ghost"}"
|
|
163
176
|
size="small-productive"
|
|
164
|
-
aria-label="${
|
|
177
|
+
aria-label="${t || l}"
|
|
165
178
|
@click="${() => this.handleActionClick(n)}"
|
|
166
|
-
data-test-id="${
|
|
179
|
+
data-test-id="${o}-${n}-action"
|
|
167
180
|
?isFullWidth="${this.hasStackedActions}"
|
|
168
181
|
type="button">
|
|
169
|
-
${
|
|
182
|
+
${a}
|
|
170
183
|
</pie-button>
|
|
171
|
-
` :
|
|
184
|
+
` : l;
|
|
172
185
|
}
|
|
173
186
|
render() {
|
|
174
187
|
const {
|
|
175
188
|
variant: i,
|
|
176
189
|
position: n,
|
|
177
|
-
heading:
|
|
178
|
-
isDismissible:
|
|
179
|
-
isCompact:
|
|
190
|
+
heading: a,
|
|
191
|
+
isDismissible: t,
|
|
192
|
+
isCompact: c,
|
|
180
193
|
hideIcon: h,
|
|
181
194
|
leadingAction: g,
|
|
182
|
-
isOpen:
|
|
183
|
-
aria:
|
|
195
|
+
isOpen: k,
|
|
196
|
+
aria: v
|
|
184
197
|
} = this;
|
|
185
|
-
if (!
|
|
186
|
-
return
|
|
187
|
-
const x =
|
|
188
|
-
[
|
|
189
|
-
[`${
|
|
190
|
-
[`${
|
|
191
|
-
[`${
|
|
192
|
-
},
|
|
193
|
-
[`${
|
|
194
|
-
[`${
|
|
198
|
+
if (!k)
|
|
199
|
+
return l;
|
|
200
|
+
const x = t && !c, I = {
|
|
201
|
+
[d]: !0,
|
|
202
|
+
[`${d}--${i}`]: !0,
|
|
203
|
+
[`${d}--${n}`]: !0,
|
|
204
|
+
[`${d}--compact`]: c
|
|
205
|
+
}, N = {
|
|
206
|
+
[`${d}-content-section`]: !0,
|
|
207
|
+
[`${d}-content-section--dismissible`]: x
|
|
195
208
|
};
|
|
196
|
-
return
|
|
209
|
+
return p`
|
|
197
210
|
<div
|
|
198
|
-
data-test-id="${
|
|
199
|
-
class="${
|
|
211
|
+
data-test-id="${o}"
|
|
212
|
+
class="${m(I)}"
|
|
200
213
|
role="region"
|
|
201
214
|
aria-live="${i === "error" ? "assertive" : "polite"}"
|
|
202
|
-
aria-labelledby="${
|
|
203
|
-
aria-label="${!
|
|
204
|
-
${x ? this.renderCloseButton() :
|
|
215
|
+
aria-labelledby="${a ? `${o}-heading` : l}"
|
|
216
|
+
aria-label="${!a && C(v == null ? void 0 : v.label)}">
|
|
217
|
+
${x ? this.renderCloseButton() : l}
|
|
205
218
|
|
|
206
|
-
<section class="${
|
|
207
|
-
${h ?
|
|
219
|
+
<section class="${m(N)}">
|
|
220
|
+
${h ? l : this.renderIcon()}
|
|
208
221
|
<article>
|
|
209
|
-
${
|
|
222
|
+
${a ? this.renderNotificationHeading() : l}
|
|
210
223
|
<slot></slot>
|
|
211
224
|
</article>
|
|
212
225
|
</section>
|
|
213
226
|
|
|
214
|
-
${g != null && g.text ? this.renderFooter() :
|
|
227
|
+
${g != null && g.text ? this.renderFooter() : l}
|
|
215
228
|
</div>`;
|
|
216
229
|
}
|
|
217
230
|
};
|
|
218
|
-
|
|
219
|
-
let
|
|
220
|
-
|
|
231
|
+
y.styles = A(G);
|
|
232
|
+
let e = y;
|
|
233
|
+
s([
|
|
221
234
|
r({ type: Boolean })
|
|
222
|
-
],
|
|
223
|
-
|
|
235
|
+
], e.prototype, "isOpen");
|
|
236
|
+
s([
|
|
224
237
|
r({ type: String }),
|
|
225
|
-
|
|
226
|
-
],
|
|
227
|
-
|
|
238
|
+
b(o, B, f.variant)
|
|
239
|
+
], e.prototype, "variant");
|
|
240
|
+
s([
|
|
228
241
|
r({ type: String }),
|
|
229
|
-
|
|
230
|
-
],
|
|
231
|
-
|
|
242
|
+
b(o, V, f.position)
|
|
243
|
+
], e.prototype, "position");
|
|
244
|
+
s([
|
|
232
245
|
r({ type: Boolean })
|
|
233
|
-
],
|
|
234
|
-
|
|
246
|
+
], e.prototype, "isDismissible");
|
|
247
|
+
s([
|
|
235
248
|
r({ type: Boolean })
|
|
236
|
-
],
|
|
237
|
-
|
|
249
|
+
], e.prototype, "isCompact");
|
|
250
|
+
s([
|
|
238
251
|
r({ type: String })
|
|
239
|
-
],
|
|
240
|
-
|
|
252
|
+
], e.prototype, "heading");
|
|
253
|
+
s([
|
|
241
254
|
r({ type: String }),
|
|
242
|
-
|
|
243
|
-
],
|
|
244
|
-
|
|
255
|
+
b(o, L, f.headingLevel)
|
|
256
|
+
], e.prototype, "headingLevel");
|
|
257
|
+
s([
|
|
245
258
|
r({ type: Boolean })
|
|
246
|
-
],
|
|
247
|
-
|
|
259
|
+
], e.prototype, "hideIcon");
|
|
260
|
+
s([
|
|
248
261
|
r({ type: Object })
|
|
249
|
-
],
|
|
250
|
-
|
|
262
|
+
], e.prototype, "leadingAction");
|
|
263
|
+
s([
|
|
251
264
|
r({ type: Object })
|
|
252
|
-
],
|
|
253
|
-
|
|
265
|
+
], e.prototype, "supportingAction");
|
|
266
|
+
s([
|
|
254
267
|
r({ type: Boolean })
|
|
255
|
-
],
|
|
256
|
-
|
|
268
|
+
], e.prototype, "hasStackedActions");
|
|
269
|
+
s([
|
|
257
270
|
r({ type: Object })
|
|
258
|
-
],
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
],
|
|
262
|
-
|
|
271
|
+
], e.prototype, "aria");
|
|
272
|
+
s([
|
|
273
|
+
w({ slot: "icon" })
|
|
274
|
+
], e.prototype, "_iconSlot");
|
|
275
|
+
S(o, e);
|
|
263
276
|
export {
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
277
|
+
D as ON_NOTIFICATION_CLOSE_EVENT,
|
|
278
|
+
F as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
|
|
279
|
+
P as ON_NOTIFICATION_OPEN_EVENT,
|
|
280
|
+
j as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
|
|
281
|
+
e as PieNotification,
|
|
282
|
+
d as componentClass,
|
|
283
|
+
o as componentSelector,
|
|
284
|
+
f as defaultProps,
|
|
285
|
+
L as headingLevels,
|
|
286
|
+
V as positions,
|
|
287
|
+
B as variants
|
|
275
288
|
};
|
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
|
-
import type { LitElement } from 'lit';
|
|
4
3
|
import type { nothing } from 'lit';
|
|
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 { TemplateResult } from 'lit';
|
|
@@ -124,7 +124,7 @@ export declare const PieNotification: React_2.ForwardRefExoticComponent<Notifica
|
|
|
124
124
|
* @slot - Default slot
|
|
125
125
|
* @slot icon - The icon slot
|
|
126
126
|
*/
|
|
127
|
-
declare class PieNotification_2 extends
|
|
127
|
+
declare class PieNotification_2 extends PieElement implements NotificationProps {
|
|
128
128
|
isOpen: boolean;
|
|
129
129
|
variant: "neutral" | "neutral-alternative" | "info" | "success" | "warning" | "error";
|
|
130
130
|
position: "inline-content" | "full-width";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-notification",
|
|
3
3
|
"description": "PIE Design System Notification built using Web Components",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.13.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
|
"@justeattakeaway/pie-wrapper-react": "0.14.3",
|
|
45
46
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
46
47
|
},
|
|
47
48
|
"dependencies": {
|
|
48
|
-
"@justeattakeaway/pie-icon-button": "1.
|
|
49
|
-
"@justeattakeaway/pie-icons-webc": "1.6.
|
|
50
|
-
"@justeattakeaway/pie-webc-core": "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,10 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
2
|
unsafeCSS,
|
|
3
3
|
nothing,
|
|
4
|
-
LitElement,
|
|
5
4
|
type TemplateResult,
|
|
6
5
|
type PropertyValues,
|
|
7
6
|
} from 'lit';
|
|
7
|
+
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
8
8
|
import { classMap } from 'lit/directives/class-map.js';
|
|
9
9
|
import { html, unsafeStatic } from 'lit/static-html.js';
|
|
10
10
|
import { defineCustomElement, validPropertyValues, dispatchCustomEvent } from '@justeattakeaway/pie-webc-core';
|
|
@@ -46,7 +46,7 @@ export * from './defs';
|
|
|
46
46
|
* @slot - Default slot
|
|
47
47
|
* @slot icon - The icon slot
|
|
48
48
|
*/
|
|
49
|
-
export class PieNotification extends
|
|
49
|
+
export class PieNotification extends PieElement implements NotificationProps {
|
|
50
50
|
@property({ type: Boolean })
|
|
51
51
|
public isOpen = defaultProps.isOpen;
|
|
52
52
|
|