@justeattakeaway/pie-notification 0.13.3 → 0.14.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/dist/index.js +123 -128
- package/package.json +4 -4
- package/src/index.ts +2 -3
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as r, queryAssignedElements as w } from "lit/decorators.js";
|
|
1
|
+
import { LitElement as A, unsafeCSS as k, nothing as s } from "lit";
|
|
3
2
|
import { classMap as m } from "lit/directives/class-map.js";
|
|
4
|
-
import { html as p, unsafeStatic as
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
3
|
+
import { html as p, unsafeStatic as w } from "lit/static-html.js";
|
|
4
|
+
import { validPropertyValues as y, safeCustomElement as _, dispatchCustomEvent as b } from "@justeattakeaway/pie-webc-core";
|
|
5
|
+
import { property as r, queryAssignedElements as z } from "lit/decorators.js";
|
|
6
|
+
import { ifDefined as x } from "lit/directives/if-defined.js";
|
|
7
7
|
import "@justeattakeaway/pie-button";
|
|
8
8
|
import "@justeattakeaway/pie-icon-button";
|
|
9
9
|
import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
|
|
@@ -11,20 +11,14 @@ 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
|
-
|
|
15
|
-
|
|
16
|
-
(
|
|
17
|
-
return t && z(i, n, t), t;
|
|
18
|
-
};
|
|
19
|
-
class O extends _ {
|
|
20
|
-
constructor() {
|
|
21
|
-
super(...arguments), this.v = "0.13.3";
|
|
14
|
+
const u = class u extends A {
|
|
15
|
+
willUpdate() {
|
|
16
|
+
this.getAttribute("v") || this.setAttribute("v", u.v);
|
|
22
17
|
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
],
|
|
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 = {
|
|
18
|
+
};
|
|
19
|
+
u.v = "0.14.0";
|
|
20
|
+
let $ = u;
|
|
21
|
+
const S = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], E = ["h2", "h3", "h4", "h5", "h6"], T = ["inline-content", "full-width"], t = "pie-notification", l = "c-notification", B = `${t}-close`, L = `${t}-open`, D = `${t}-leading-action-click`, V = `${t}-supporting-action-click`, d = {
|
|
28
22
|
variant: "neutral",
|
|
29
23
|
position: "inline-content",
|
|
30
24
|
isDismissible: !1,
|
|
@@ -33,22 +27,22 @@ const B = ["neutral", "neutral-alternative", "info", "success", "warning", "erro
|
|
|
33
27
|
hideIcon: !1,
|
|
34
28
|
isOpen: !0,
|
|
35
29
|
hasStackedActions: !1
|
|
36
|
-
},
|
|
37
|
-
var
|
|
38
|
-
for (var
|
|
39
|
-
(h =
|
|
40
|
-
return
|
|
30
|
+
}, P = "*,*: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}}";
|
|
31
|
+
var F = Object.defineProperty, j = Object.getOwnPropertyDescriptor, a = (i, o, n, f) => {
|
|
32
|
+
for (var c = f > 1 ? void 0 : f ? j(o, n) : o, g = i.length - 1, h; g >= 0; g--)
|
|
33
|
+
(h = i[g]) && (c = (f ? h(o, n, c) : h(c)) || c);
|
|
34
|
+
return f && c && F(o, n, c), c;
|
|
41
35
|
};
|
|
42
|
-
|
|
36
|
+
let e = class extends $ {
|
|
43
37
|
constructor() {
|
|
44
|
-
super(...arguments), this.isOpen =
|
|
38
|
+
super(...arguments), this.isOpen = d.isOpen, this.variant = d.variant, this.position = d.position, this.isDismissible = d.isDismissible, this.isCompact = d.isCompact, this.headingLevel = d.headingLevel, this.hideIcon = d.hideIcon, this.hasStackedActions = d.hasStackedActions;
|
|
45
39
|
}
|
|
46
40
|
/**
|
|
47
41
|
* Lifecycle method executed when component is updated.
|
|
48
42
|
* It dispatches an event if notification is opened.
|
|
49
43
|
*/
|
|
50
44
|
updated(i) {
|
|
51
|
-
i.has("isOpen") && this.isOpen &&
|
|
45
|
+
i.has("isOpen") && this.isOpen && b(this, L, { targetNotification: this });
|
|
52
46
|
}
|
|
53
47
|
/**
|
|
54
48
|
* Template for the footer area
|
|
@@ -59,20 +53,20 @@ const y = class y extends O {
|
|
|
59
53
|
renderFooter() {
|
|
60
54
|
const {
|
|
61
55
|
leadingAction: i,
|
|
62
|
-
supportingAction:
|
|
63
|
-
isCompact:
|
|
64
|
-
hasStackedActions:
|
|
56
|
+
supportingAction: o,
|
|
57
|
+
isCompact: n,
|
|
58
|
+
hasStackedActions: f
|
|
65
59
|
} = this, c = {
|
|
66
|
-
[`${
|
|
67
|
-
[`${
|
|
68
|
-
[`${
|
|
60
|
+
[`${l}-footer`]: !0,
|
|
61
|
+
[`${l}-footer--compact`]: n,
|
|
62
|
+
[`${l}-footer--stacked`]: f && !n
|
|
69
63
|
};
|
|
70
64
|
return p`
|
|
71
65
|
<footer
|
|
72
66
|
class="${m(c)}"
|
|
73
|
-
data-test-id="${
|
|
74
|
-
${
|
|
75
|
-
${i ? this.renderActionButton(i, "leading") :
|
|
67
|
+
data-test-id="${t}-footer">
|
|
68
|
+
${o ? this.renderActionButton(o, "supporting") : s}
|
|
69
|
+
${i ? this.renderActionButton(i, "leading") : s}
|
|
76
70
|
</footer>
|
|
77
71
|
`;
|
|
78
72
|
}
|
|
@@ -83,13 +77,13 @@ const y = class y extends O {
|
|
|
83
77
|
* @private
|
|
84
78
|
*/
|
|
85
79
|
renderNotificationHeading() {
|
|
86
|
-
const { heading: i, headingLevel:
|
|
87
|
-
return p`<${
|
|
88
|
-
id="${
|
|
89
|
-
class="${
|
|
90
|
-
data-test-id="${
|
|
80
|
+
const { heading: i, headingLevel: o } = this, n = w(o);
|
|
81
|
+
return p`<${n}
|
|
82
|
+
id="${t}-heading"
|
|
83
|
+
class="${l}-heading"
|
|
84
|
+
data-test-id="${t}-heading">
|
|
91
85
|
${i}
|
|
92
|
-
</${
|
|
86
|
+
</${n}>`;
|
|
93
87
|
}
|
|
94
88
|
/**
|
|
95
89
|
* Util method that returns an icon from a variant that has default icon.
|
|
@@ -99,15 +93,15 @@ const y = class y extends O {
|
|
|
99
93
|
getDefaultVariantIcon() {
|
|
100
94
|
switch (this.variant) {
|
|
101
95
|
case "info":
|
|
102
|
-
return p`<icon-info-circle class="icon" size="m" data-test-id="${
|
|
96
|
+
return p`<icon-info-circle class="icon" size="m" data-test-id="${t}-heading-icon-info"></icon-info-circle>`;
|
|
103
97
|
case "success":
|
|
104
|
-
return p`<icon-check-circle class="icon" size="m" data-test-id="${
|
|
98
|
+
return p`<icon-check-circle class="icon" size="m" data-test-id="${t}-heading-icon-success"></icon-check-circle>`;
|
|
105
99
|
case "warning":
|
|
106
|
-
return p`<icon-alert-triangle class="icon" size="m" data-test-id="${
|
|
100
|
+
return p`<icon-alert-triangle class="icon" size="m" data-test-id="${t}-heading-icon-warning"></icon-alert-triangle>`;
|
|
107
101
|
case "error":
|
|
108
|
-
return p`<icon-alert-circle class="icon" size="m" data-test-id="${
|
|
102
|
+
return p`<icon-alert-circle class="icon" size="m" data-test-id="${t}-heading-icon-error"></icon-alert-circle>`;
|
|
109
103
|
default:
|
|
110
|
-
return
|
|
104
|
+
return s;
|
|
111
105
|
}
|
|
112
106
|
}
|
|
113
107
|
/**
|
|
@@ -132,10 +126,10 @@ const y = class y extends O {
|
|
|
132
126
|
<pie-icon-button
|
|
133
127
|
variant="ghost-secondary"
|
|
134
128
|
size="small"
|
|
135
|
-
class="${
|
|
136
|
-
data-test-id="${
|
|
129
|
+
class="${l}-icon-close"
|
|
130
|
+
data-test-id="${t}-icon-close"
|
|
137
131
|
@click="${this.handleCloseButton}"
|
|
138
|
-
aria-label="${
|
|
132
|
+
aria-label="${x((i = this.aria) == null ? void 0 : i.close)}">
|
|
139
133
|
<icon-close></icon-close>
|
|
140
134
|
</pie-icon-button>`;
|
|
141
135
|
}
|
|
@@ -146,7 +140,7 @@ const y = class y extends O {
|
|
|
146
140
|
* @private
|
|
147
141
|
*/
|
|
148
142
|
handleCloseButton() {
|
|
149
|
-
this.isOpen = !1,
|
|
143
|
+
this.isOpen = !1, b(this, B, { targetNotification: this });
|
|
150
144
|
}
|
|
151
145
|
/**
|
|
152
146
|
* It handles the action button action.
|
|
@@ -157,7 +151,7 @@ const y = class y extends O {
|
|
|
157
151
|
* @private
|
|
158
152
|
*/
|
|
159
153
|
handleActionClick(i) {
|
|
160
|
-
|
|
154
|
+
b(this, i === "leading" ? D : V, { targetNotification: this });
|
|
161
155
|
}
|
|
162
156
|
/**
|
|
163
157
|
* Render the action button depending on action type and its action.
|
|
@@ -168,121 +162,122 @@ const y = class y extends O {
|
|
|
168
162
|
* @returns {TemplateResult | typeof nothing} - The rendered action button or nothing if the action text is not defined.
|
|
169
163
|
* @private
|
|
170
164
|
*/
|
|
171
|
-
renderActionButton(i,
|
|
172
|
-
const { text:
|
|
173
|
-
return
|
|
165
|
+
renderActionButton(i, o) {
|
|
166
|
+
const { text: n, ariaLabel: f } = i;
|
|
167
|
+
return n ? p`
|
|
174
168
|
<pie-button
|
|
175
|
-
variant="${
|
|
169
|
+
variant="${o === "leading" ? "primary" : "ghost"}"
|
|
176
170
|
size="small-productive"
|
|
177
|
-
aria-label="${
|
|
178
|
-
@click="${() => this.handleActionClick(
|
|
179
|
-
data-test-id="${
|
|
171
|
+
aria-label="${f || s}"
|
|
172
|
+
@click="${() => this.handleActionClick(o)}"
|
|
173
|
+
data-test-id="${t}-${o}-action"
|
|
180
174
|
?isFullWidth="${this.hasStackedActions}"
|
|
181
175
|
type="button">
|
|
182
|
-
${
|
|
176
|
+
${n}
|
|
183
177
|
</pie-button>
|
|
184
|
-
` :
|
|
178
|
+
` : s;
|
|
185
179
|
}
|
|
186
180
|
render() {
|
|
187
181
|
const {
|
|
188
182
|
variant: i,
|
|
189
|
-
position:
|
|
190
|
-
heading:
|
|
191
|
-
isDismissible:
|
|
183
|
+
position: o,
|
|
184
|
+
heading: n,
|
|
185
|
+
isDismissible: f,
|
|
192
186
|
isCompact: c,
|
|
193
|
-
hideIcon:
|
|
194
|
-
leadingAction:
|
|
195
|
-
isOpen:
|
|
187
|
+
hideIcon: g,
|
|
188
|
+
leadingAction: h,
|
|
189
|
+
isOpen: C,
|
|
196
190
|
aria: v
|
|
197
191
|
} = this;
|
|
198
|
-
if (!
|
|
199
|
-
return
|
|
200
|
-
const
|
|
201
|
-
[
|
|
202
|
-
[`${
|
|
203
|
-
[`${
|
|
204
|
-
[`${
|
|
205
|
-
},
|
|
206
|
-
[`${
|
|
207
|
-
[`${
|
|
192
|
+
if (!C)
|
|
193
|
+
return s;
|
|
194
|
+
const O = f && !c, N = {
|
|
195
|
+
[l]: !0,
|
|
196
|
+
[`${l}--${i}`]: !0,
|
|
197
|
+
[`${l}--${o}`]: !0,
|
|
198
|
+
[`${l}--compact`]: c
|
|
199
|
+
}, I = {
|
|
200
|
+
[`${l}-content-section`]: !0,
|
|
201
|
+
[`${l}-content-section--dismissible`]: O
|
|
208
202
|
};
|
|
209
203
|
return p`
|
|
210
204
|
<div
|
|
211
|
-
data-test-id="${
|
|
212
|
-
class="${m(
|
|
205
|
+
data-test-id="${t}"
|
|
206
|
+
class="${m(N)}"
|
|
213
207
|
role="region"
|
|
214
208
|
aria-live="${i === "error" ? "assertive" : "polite"}"
|
|
215
|
-
aria-labelledby="${
|
|
216
|
-
aria-label="${!
|
|
217
|
-
${
|
|
209
|
+
aria-labelledby="${n ? `${t}-heading` : s}"
|
|
210
|
+
aria-label="${!n && x(v == null ? void 0 : v.label)}">
|
|
211
|
+
${O ? this.renderCloseButton() : s}
|
|
218
212
|
|
|
219
|
-
<section class="${m(
|
|
220
|
-
${
|
|
213
|
+
<section class="${m(I)}">
|
|
214
|
+
${g ? s : this.renderIcon()}
|
|
221
215
|
<article>
|
|
222
|
-
${
|
|
216
|
+
${n ? this.renderNotificationHeading() : s}
|
|
223
217
|
<slot></slot>
|
|
224
218
|
</article>
|
|
225
219
|
</section>
|
|
226
220
|
|
|
227
|
-
${
|
|
221
|
+
${h != null && h.text ? this.renderFooter() : s}
|
|
228
222
|
</div>`;
|
|
229
223
|
}
|
|
230
224
|
};
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
s([
|
|
225
|
+
e.styles = k(P);
|
|
226
|
+
a([
|
|
234
227
|
r({ type: Boolean })
|
|
235
|
-
], e.prototype, "isOpen");
|
|
236
|
-
|
|
228
|
+
], e.prototype, "isOpen", 2);
|
|
229
|
+
a([
|
|
237
230
|
r({ type: String }),
|
|
238
|
-
|
|
239
|
-
], e.prototype, "variant");
|
|
240
|
-
|
|
231
|
+
y(t, S, d.variant)
|
|
232
|
+
], e.prototype, "variant", 2);
|
|
233
|
+
a([
|
|
241
234
|
r({ type: String }),
|
|
242
|
-
|
|
243
|
-
], e.prototype, "position");
|
|
244
|
-
|
|
235
|
+
y(t, T, d.position)
|
|
236
|
+
], e.prototype, "position", 2);
|
|
237
|
+
a([
|
|
245
238
|
r({ type: Boolean })
|
|
246
|
-
], e.prototype, "isDismissible");
|
|
247
|
-
|
|
239
|
+
], e.prototype, "isDismissible", 2);
|
|
240
|
+
a([
|
|
248
241
|
r({ type: Boolean })
|
|
249
|
-
], e.prototype, "isCompact");
|
|
250
|
-
|
|
242
|
+
], e.prototype, "isCompact", 2);
|
|
243
|
+
a([
|
|
251
244
|
r({ type: String })
|
|
252
|
-
], e.prototype, "heading");
|
|
253
|
-
|
|
245
|
+
], e.prototype, "heading", 2);
|
|
246
|
+
a([
|
|
254
247
|
r({ type: String }),
|
|
255
|
-
|
|
256
|
-
], e.prototype, "headingLevel");
|
|
257
|
-
|
|
248
|
+
y(t, E, d.headingLevel)
|
|
249
|
+
], e.prototype, "headingLevel", 2);
|
|
250
|
+
a([
|
|
258
251
|
r({ type: Boolean })
|
|
259
|
-
], e.prototype, "hideIcon");
|
|
260
|
-
|
|
252
|
+
], e.prototype, "hideIcon", 2);
|
|
253
|
+
a([
|
|
261
254
|
r({ type: Object })
|
|
262
|
-
], e.prototype, "leadingAction");
|
|
263
|
-
|
|
255
|
+
], e.prototype, "leadingAction", 2);
|
|
256
|
+
a([
|
|
264
257
|
r({ type: Object })
|
|
265
|
-
], e.prototype, "supportingAction");
|
|
266
|
-
|
|
258
|
+
], e.prototype, "supportingAction", 2);
|
|
259
|
+
a([
|
|
267
260
|
r({ type: Boolean })
|
|
268
|
-
], e.prototype, "hasStackedActions");
|
|
269
|
-
|
|
261
|
+
], e.prototype, "hasStackedActions", 2);
|
|
262
|
+
a([
|
|
270
263
|
r({ type: Object })
|
|
271
|
-
], e.prototype, "aria");
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
], e.prototype, "_iconSlot");
|
|
275
|
-
|
|
264
|
+
], e.prototype, "aria", 2);
|
|
265
|
+
a([
|
|
266
|
+
z({ slot: "icon" })
|
|
267
|
+
], e.prototype, "_iconSlot", 2);
|
|
268
|
+
e = a([
|
|
269
|
+
_("pie-notification")
|
|
270
|
+
], e);
|
|
276
271
|
export {
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
272
|
+
B as ON_NOTIFICATION_CLOSE_EVENT,
|
|
273
|
+
D as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
|
|
274
|
+
L as ON_NOTIFICATION_OPEN_EVENT,
|
|
275
|
+
V as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
|
|
281
276
|
e as PieNotification,
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
277
|
+
l as componentClass,
|
|
278
|
+
t as componentSelector,
|
|
279
|
+
d as defaultProps,
|
|
280
|
+
E as headingLevels,
|
|
281
|
+
T as positions,
|
|
282
|
+
S as variants
|
|
288
283
|
};
|
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.14.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -46,9 +46,9 @@
|
|
|
46
46
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@justeattakeaway/pie-icon-button": "1.
|
|
50
|
-
"@justeattakeaway/pie-icons-webc": "1.
|
|
51
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
49
|
+
"@justeattakeaway/pie-icon-button": "1.5.0",
|
|
50
|
+
"@justeattakeaway/pie-icons-webc": "1.10.0",
|
|
51
|
+
"@justeattakeaway/pie-webc-core": "0.26.0"
|
|
52
52
|
},
|
|
53
53
|
"volta": {
|
|
54
54
|
"extends": "../../../package.json"
|
package/src/index.ts
CHANGED
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
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
|
-
import {
|
|
10
|
+
import { validPropertyValues, dispatchCustomEvent, safeCustomElement } from '@justeattakeaway/pie-webc-core';
|
|
11
11
|
import { property, queryAssignedElements } from 'lit/decorators.js';
|
|
12
12
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
13
13
|
import {
|
|
@@ -46,6 +46,7 @@ export * from './defs';
|
|
|
46
46
|
* @slot - Default slot
|
|
47
47
|
* @slot icon - The icon slot
|
|
48
48
|
*/
|
|
49
|
+
@safeCustomElement('pie-notification')
|
|
49
50
|
export class PieNotification extends PieElement implements NotificationProps {
|
|
50
51
|
@property({ type: Boolean })
|
|
51
52
|
public isOpen = defaultProps.isOpen;
|
|
@@ -305,8 +306,6 @@ export class PieNotification extends PieElement implements NotificationProps {
|
|
|
305
306
|
}
|
|
306
307
|
}
|
|
307
308
|
|
|
308
|
-
defineCustomElement(componentSelector, PieNotification);
|
|
309
|
-
|
|
310
309
|
declare global {
|
|
311
310
|
interface HTMLElementTagNameMap {
|
|
312
311
|
[componentSelector]: PieNotification;
|