@trycourier/courier-ui-inbox 1.0.3-beta → 1.0.5-beta

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.es.js DELETED
@@ -1,4341 +0,0 @@
1
- var qo = Object.defineProperty;
2
- var Vo = (h, t, e) => t in h ? qo(h, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[t] = e;
3
- var a = (h, t, e) => Vo(h, typeof t != "symbol" ? t + "" : t, e);
4
- var jo = Object.defineProperty, Zo = (h, t, e) => t in h ? jo(h, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[t] = e, T = (h, t, e) => Zo(h, typeof t != "symbol" ? t + "" : t, e);
5
- const ko = class wo {
6
- constructor(t, e) {
7
- T(this, "webSocket", null), T(this, "pingInterval", null), T(this, "onOpen"), T(this, "onMessageReceived"), T(this, "onClose"), T(this, "onError"), T(this, "url"), T(this, "options"), this.url = t, this.options = e;
8
- }
9
- /**
10
- * Dynamically checks if the WebSocket is connected
11
- */
12
- get isConnected() {
13
- return this.webSocket !== null;
14
- }
15
- async connect() {
16
- return this.disconnect(), new Promise((t, e) => {
17
- try {
18
- this.webSocket = new WebSocket(this.url), this.webSocket.onopen = () => {
19
- var i;
20
- (i = this.onOpen) == null || i.call(this), t();
21
- }, this.webSocket.onmessage = (i) => {
22
- var s;
23
- (s = this.onMessageReceived) == null || s.call(this, i.data);
24
- }, this.webSocket.onclose = (i) => {
25
- var s;
26
- this.webSocket = null, (s = this.onClose) == null || s.call(this, i.code, i.reason);
27
- }, this.webSocket.onerror = (i) => {
28
- var s;
29
- this.webSocket = null;
30
- const o = new Error("Courier Socket connection failed");
31
- o.originalEvent = i, (s = this.onError) == null || s.call(this, o), e(o);
32
- };
33
- } catch (i) {
34
- this.webSocket = null, e(i);
35
- }
36
- });
37
- }
38
- disconnect() {
39
- this.stopPing(), this.webSocket && (this.webSocket.close(wo.NORMAL_CLOSURE_STATUS), this.webSocket = null);
40
- }
41
- async send(t) {
42
- if (!this.webSocket)
43
- return !1;
44
- const e = JSON.stringify(t);
45
- return this.webSocket.send(e) !== void 0;
46
- }
47
- keepAlive(t) {
48
- this.stopPing(), this.pingInterval = setInterval(async () => {
49
- var e;
50
- try {
51
- await this.send({ action: "keepAlive" });
52
- } catch (i) {
53
- (e = this.options.logger) == null || e.error("Error occurred on Keep Alive:", i);
54
- }
55
- }, (t == null ? void 0 : t.intervalInMillis) ?? 3e5);
56
- }
57
- stopPing() {
58
- this.pingInterval && (clearInterval(this.pingInterval), this.pingInterval = null);
59
- }
60
- };
61
- T(ko, "NORMAL_CLOSURE_STATUS", 1e3);
62
- let Jo = ko;
63
- const yo = (h) => ({
64
- courier: {
65
- rest: (h == null ? void 0 : h.courier.rest) || "https://api.courier.com",
66
- graphql: (h == null ? void 0 : h.courier.graphql) || "https://api.courier.com/client/q"
67
- },
68
- inbox: {
69
- graphql: (h == null ? void 0 : h.inbox.graphql) || "https://inbox.courier.com/q",
70
- webSocket: (h == null ? void 0 : h.inbox.webSocket) || "wss://realtime.courier.com"
71
- }
72
- });
73
- class Go {
74
- constructor(t) {
75
- T(this, "PREFIX", "[COURIER]"), this.showLogs = t;
76
- }
77
- warn(t, ...e) {
78
- this.showLogs && console.warn(`${this.PREFIX} ${t}`, ...e);
79
- }
80
- log(t, ...e) {
81
- this.showLogs && console.log(`${this.PREFIX} ${t}`, ...e);
82
- }
83
- error(t, ...e) {
84
- this.showLogs && console.error(`${this.PREFIX} ${t}`, ...e);
85
- }
86
- debug(t, ...e) {
87
- this.showLogs && console.debug(`${this.PREFIX} ${t}`, ...e);
88
- }
89
- info(t, ...e) {
90
- this.showLogs && console.info(`${this.PREFIX} ${t}`, ...e);
91
- }
92
- }
93
- class Ae {
94
- static generate(t) {
95
- const e = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
96
- return t ? t + e : e;
97
- }
98
- }
99
- class Pe extends Error {
100
- constructor(t, e, i) {
101
- super(e), this.code = t, this.type = i, this.name = "CourierRequestError";
102
- }
103
- }
104
- function So(h, t, e, i) {
105
- h.log(`
106
- 📡 New Courier ${e} Request: ${t}
107
- URL: ${i.url}
108
- ${i.method ? `Method: ${i.method}` : ""}
109
- ${i.query ? `Query: ${i.query}` : ""}
110
- ${i.variables ? `Variables: ${JSON.stringify(i.variables, null, 2)}` : ""}
111
- Headers: ${JSON.stringify(i.headers, null, 2)}
112
- Body: ${i.body ? JSON.stringify(i.body, null, 2) : "Empty"}
113
- `);
114
- }
115
- function Io(h, t, e, i) {
116
- h.log(`
117
- 📡 New Courier ${e} Response: ${t}
118
- Status Code: ${i.status}
119
- Response JSON: ${JSON.stringify(i.response, null, 2)}
120
- `);
121
- }
122
- async function K(h) {
123
- const t = h.validCodes ?? [200], e = h.options.showLogs ? Ae.generate() : void 0, i = new Request(h.url, {
124
- method: h.method,
125
- headers: {
126
- "Content-Type": "application/json",
127
- ...h.headers
128
- },
129
- body: h.body ? JSON.stringify(h.body) : void 0
130
- });
131
- e && So(h.options.logger, e, "HTTP", {
132
- url: i.url,
133
- method: i.method,
134
- headers: Object.fromEntries(i.headers.entries()),
135
- body: h.body
136
- });
137
- const s = await fetch(i);
138
- if (s.status === 204)
139
- return;
140
- let o;
141
- try {
142
- o = await s.json();
143
- } catch {
144
- if (s.status === 200)
145
- return;
146
- throw new Pe(
147
- s.status,
148
- "Failed to parse response as JSON",
149
- "PARSE_ERROR"
150
- );
151
- }
152
- if (e && Io(h.options.logger, e, "HTTP", {
153
- status: s.status,
154
- response: o
155
- }), !t.includes(s.status))
156
- throw new Pe(
157
- s.status,
158
- (o == null ? void 0 : o.message) || "Unknown Error",
159
- o == null ? void 0 : o.type
160
- );
161
- return o;
162
- }
163
- async function Z(h) {
164
- const t = h.options.showLogs ? Ae.generate() : void 0;
165
- t && So(h.options.logger, t, "GraphQL", {
166
- url: h.url,
167
- headers: h.headers,
168
- query: h.query,
169
- variables: h.variables
170
- });
171
- const e = await fetch(h.url, {
172
- method: "POST",
173
- headers: {
174
- "Content-Type": "application/json",
175
- ...h.headers
176
- },
177
- body: JSON.stringify({
178
- query: h.query,
179
- variables: h.variables
180
- })
181
- });
182
- let i;
183
- try {
184
- i = await e.json();
185
- } catch {
186
- throw new Pe(
187
- e.status,
188
- "Failed to parse response as JSON",
189
- "PARSE_ERROR"
190
- );
191
- }
192
- if (t && Io(h.options.logger, t, "GraphQL", {
193
- status: e.status,
194
- response: i
195
- }), !e.ok)
196
- throw new Pe(
197
- e.status,
198
- (i == null ? void 0 : i.message) || "Unknown Error",
199
- i == null ? void 0 : i.type
200
- );
201
- return i;
202
- }
203
- class re {
204
- constructor(t) {
205
- this.options = t;
206
- }
207
- }
208
- class Wo extends re {
209
- /**
210
- * Get a brand by ID using GraphQL
211
- * @param brandId - The ID of the brand to retrieve
212
- * @returns Promise resolving to the requested brand
213
- */
214
- async getBrand(t) {
215
- const e = `
216
- query GetBrand {
217
- brand(brandId: "${t.brandId}") {
218
- settings {
219
- colors {
220
- primary
221
- secondary
222
- tertiary
223
- }
224
- inapp {
225
- borderRadius
226
- disableCourierFooter
227
- }
228
- }
229
- }
230
- }
231
- `;
232
- return (await Z({
233
- options: this.options,
234
- url: this.options.apiUrls.courier.graphql,
235
- headers: {
236
- "x-courier-user-id": this.options.userId,
237
- "x-courier-client-key": "empty",
238
- // Empty for now. Will be removed in future.
239
- Authorization: `Bearer ${this.options.accessToken}`
240
- },
241
- query: e,
242
- variables: { brandId: t.brandId }
243
- })).data.brand;
244
- }
245
- }
246
- class ze extends Jo {
247
- constructor(t) {
248
- const e = ze.buildUrl(t);
249
- super(e, t), T(this, "receivedMessage"), T(this, "receivedMessageEvent"), this.onMessageReceived = (i) => this.convertToType(i);
250
- }
251
- convertToType(t) {
252
- var e, i, s, o;
253
- try {
254
- switch (JSON.parse(t).type) {
255
- case "event":
256
- const c = JSON.parse(t);
257
- (e = this.receivedMessageEvent) == null || e.call(this, c);
258
- break;
259
- case "message":
260
- const d = JSON.parse(t);
261
- (i = this.receivedMessage) == null || i.call(this, d);
262
- break;
263
- }
264
- } catch (n) {
265
- (s = this.options.logger) == null || s.error("Error parsing socket message", n), n instanceof Error && ((o = this.onError) == null || o.call(this, n));
266
- }
267
- }
268
- async sendSubscribe(t) {
269
- var e;
270
- const i = {
271
- action: "subscribe",
272
- data: {
273
- userAgent: "courier-js",
274
- // TODO: Equivalent to Courier.agent.value()
275
- channel: this.options.userId,
276
- event: "*",
277
- version: (t == null ? void 0 : t.version) ?? 5
278
- }
279
- };
280
- this.options.connectionId && (i.data.clientSourceId = this.options.connectionId), this.options.tenantId && (i.data.accountId = this.options.tenantId), (e = this.options.logger) == null || e.debug("Sending subscribe request", i), await this.send(i);
281
- }
282
- static buildUrl(t) {
283
- var e;
284
- let i = ((e = t.apiUrls) == null ? void 0 : e.inbox.webSocket) ?? "";
285
- return t.accessToken && (i += `/?auth=${t.accessToken}`), i;
286
- }
287
- }
288
- class Ko extends re {
289
- constructor(t) {
290
- super(t), T(this, "socket"), this.socket = new ze(t);
291
- }
292
- /**
293
- * Get paginated messages
294
- * @param paginationLimit - Number of messages to return per page (default: 24)
295
- * @param startCursor - Cursor for pagination
296
- * @returns Promise resolving to paginated messages response
297
- */
298
- async getMessages(t) {
299
- const e = `
300
- query GetInboxMessages(
301
- $params: FilterParamsInput = { ${this.options.tenantId ? `accountId: "${this.options.tenantId}"` : ""} }
302
- $limit: Int = ${(t == null ? void 0 : t.paginationLimit) ?? 24}
303
- $after: String ${t != null && t.startCursor ? `= "${t.startCursor}"` : ""}
304
- ) {
305
- count(params: $params)
306
- messages(params: $params, limit: $limit, after: $after) {
307
- totalCount
308
- pageInfo {
309
- startCursor
310
- hasNextPage
311
- }
312
- nodes {
313
- messageId
314
- read
315
- archived
316
- created
317
- opened
318
- title
319
- preview
320
- data
321
- tags
322
- trackingIds {
323
- clickTrackingId
324
- }
325
- actions {
326
- content
327
- data
328
- href
329
- }
330
- }
331
- }
332
- }
333
- `;
334
- return await Z({
335
- options: this.options,
336
- query: e,
337
- headers: {
338
- "x-courier-user-id": this.options.userId,
339
- Authorization: `Bearer ${this.options.accessToken}`
340
- },
341
- url: this.options.apiUrls.inbox.graphql
342
- });
343
- }
344
- /**
345
- * Get paginated archived messages
346
- * @param paginationLimit - Number of messages to return per page (default: 24)
347
- * @param startCursor - Cursor for pagination
348
- * @returns Promise resolving to paginated archived messages response
349
- */
350
- async getArchivedMessages(t) {
351
- const e = `
352
- query GetInboxMessages(
353
- $params: FilterParamsInput = { ${this.options.tenantId ? `accountId: "${this.options.tenantId}"` : ""}, archived: true }
354
- $limit: Int = ${(t == null ? void 0 : t.paginationLimit) ?? 24}
355
- $after: String ${t != null && t.startCursor ? `= "${t.startCursor}"` : ""}
356
- ) {
357
- count(params: $params)
358
- messages(params: $params, limit: $limit, after: $after) {
359
- totalCount
360
- pageInfo {
361
- startCursor
362
- hasNextPage
363
- }
364
- nodes {
365
- messageId
366
- read
367
- archived
368
- created
369
- opened
370
- title
371
- preview
372
- data
373
- tags
374
- trackingIds {
375
- clickTrackingId
376
- }
377
- actions {
378
- content
379
- data
380
- href
381
- }
382
- }
383
- }
384
- }
385
- `;
386
- return Z({
387
- options: this.options,
388
- query: e,
389
- headers: {
390
- "x-courier-user-id": this.options.userId,
391
- Authorization: `Bearer ${this.options.accessToken}`
392
- },
393
- url: this.options.apiUrls.inbox.graphql
394
- });
395
- }
396
- /**
397
- * Get unread message count
398
- * @returns Promise resolving to number of unread messages
399
- */
400
- async getUnreadMessageCount() {
401
- var t;
402
- const e = `
403
- query GetMessages {
404
- count(params: { status: "unread" ${this.options.tenantId ? `, accountId: "${this.options.tenantId}"` : ""} })
405
- }
406
- `;
407
- return ((t = (await Z({
408
- options: this.options,
409
- query: e,
410
- headers: {
411
- "x-courier-user-id": this.options.userId,
412
- Authorization: `Bearer ${this.options.accessToken}`
413
- },
414
- url: this.options.apiUrls.inbox.graphql
415
- })).data) == null ? void 0 : t.count) ?? 0;
416
- }
417
- /**
418
- * Track a click event
419
- * @param messageId - ID of the message
420
- * @param trackingId - ID for tracking the click
421
- * @returns Promise resolving when click is tracked
422
- */
423
- async click(t) {
424
- const e = `
425
- mutation TrackEvent {
426
- clicked(messageId: "${t.messageId}", trackingId: "${t.trackingId}")
427
- }
428
- `, i = {
429
- "x-courier-user-id": this.options.userId,
430
- Authorization: `Bearer ${this.options.accessToken}`
431
- };
432
- this.options.connectionId && (i["x-courier-client-source-id"] = this.options.connectionId), await Z({
433
- options: this.options,
434
- query: e,
435
- headers: i,
436
- url: this.options.apiUrls.inbox.graphql
437
- });
438
- }
439
- /**
440
- * Mark a message as read
441
- * @param messageId - ID of the message to mark as read
442
- * @returns Promise resolving when message is marked as read
443
- */
444
- async read(t) {
445
- const e = `
446
- mutation TrackEvent {
447
- read(messageId: "${t.messageId}")
448
- }
449
- `, i = {
450
- "x-courier-user-id": this.options.userId,
451
- Authorization: `Bearer ${this.options.accessToken}`
452
- };
453
- this.options.connectionId && (i["x-courier-client-source-id"] = this.options.connectionId), await Z({
454
- options: this.options,
455
- query: e,
456
- headers: i,
457
- url: this.options.apiUrls.inbox.graphql
458
- });
459
- }
460
- /**
461
- * Mark a message as unread
462
- * @param messageId - ID of the message to mark as unread
463
- * @returns Promise resolving when message is marked as unread
464
- */
465
- async unread(t) {
466
- const e = `
467
- mutation TrackEvent {
468
- unread(messageId: "${t.messageId}")
469
- }
470
- `, i = {
471
- "x-courier-user-id": this.options.userId,
472
- Authorization: `Bearer ${this.options.accessToken}`
473
- };
474
- this.options.connectionId && (i["x-courier-client-source-id"] = this.options.connectionId), await Z({
475
- options: this.options,
476
- query: e,
477
- headers: i,
478
- url: this.options.apiUrls.inbox.graphql
479
- });
480
- }
481
- /**
482
- * Mark all messages as read
483
- * @returns Promise resolving when all messages are marked as read
484
- */
485
- async readAll() {
486
- const t = `
487
- mutation TrackEvent {
488
- markAllRead
489
- }
490
- `, e = {
491
- "x-courier-user-id": this.options.userId,
492
- Authorization: `Bearer ${this.options.accessToken}`
493
- };
494
- this.options.connectionId && (e["x-courier-client-source-id"] = this.options.connectionId), await Z({
495
- options: this.options,
496
- query: t,
497
- headers: e,
498
- url: this.options.apiUrls.inbox.graphql
499
- });
500
- }
501
- /**
502
- * Mark a message as opened
503
- * @param messageId - ID of the message to mark as opened
504
- * @returns Promise resolving when message is marked as opened
505
- */
506
- async open(t) {
507
- const e = `
508
- mutation TrackEvent {
509
- opened(messageId: "${t.messageId}")
510
- }
511
- `, i = {
512
- "x-courier-user-id": this.options.userId,
513
- Authorization: `Bearer ${this.options.accessToken}`
514
- };
515
- this.options.connectionId && (i["x-courier-client-source-id"] = this.options.connectionId), await Z({
516
- options: this.options,
517
- query: e,
518
- headers: i,
519
- url: this.options.apiUrls.inbox.graphql
520
- });
521
- }
522
- /**
523
- * Archive a message
524
- * @param messageId - ID of the message to archive
525
- * @returns Promise resolving when message is archived
526
- */
527
- async archive(t) {
528
- const e = `
529
- mutation TrackEvent {
530
- archive(messageId: "${t.messageId}")
531
- }
532
- `, i = {
533
- "x-courier-user-id": this.options.userId,
534
- Authorization: `Bearer ${this.options.accessToken}`
535
- };
536
- this.options.connectionId && (i["x-courier-client-source-id"] = this.options.connectionId), await Z({
537
- options: this.options,
538
- query: e,
539
- headers: i,
540
- url: this.options.apiUrls.inbox.graphql
541
- });
542
- }
543
- /**
544
- * Archive all read messages.
545
- */
546
- async archiveRead() {
547
- const t = `
548
- mutation TrackEvent {
549
- archiveRead
550
- }
551
- `, e = {
552
- "x-courier-user-id": this.options.userId,
553
- Authorization: `Bearer ${this.options.accessToken}`
554
- };
555
- this.options.connectionId && (e["x-courier-client-source-id"] = this.options.connectionId), await Z({
556
- options: this.options,
557
- query: t,
558
- headers: e,
559
- url: this.options.apiUrls.inbox.graphql
560
- });
561
- }
562
- }
563
- class Xo {
564
- /**
565
- * Transforms a single API response item to the CourierUserPreferencesTopic type
566
- * @param item - The API response item
567
- * @returns A CourierUserPreferencesTopic object
568
- */
569
- transformItem(t) {
570
- return {
571
- topicId: t.topic_id,
572
- topicName: t.topic_name,
573
- sectionId: t.section_id,
574
- sectionName: t.section_name,
575
- status: t.status,
576
- defaultStatus: t.default_status,
577
- hasCustomRouting: t.has_custom_routing,
578
- customRouting: t.custom_routing || []
579
- };
580
- }
581
- /**
582
- * Transforms an array of API response items to CourierUserPreferencesTopic objects
583
- * @param items - The API response items
584
- * @returns A generator of CourierUserPreferencesTopic objects
585
- */
586
- *transform(t) {
587
- for (const e of t)
588
- yield this.transformItem(e);
589
- }
590
- }
591
- function Qo(h) {
592
- const t = atob(h), e = new Uint8Array(t.length);
593
- for (let i = 0; i < t.length; i++)
594
- e[i] = t.charCodeAt(i);
595
- return String.fromCharCode(...e);
596
- }
597
- function Yo(h) {
598
- const t = new Uint8Array(h.length);
599
- for (let e = 0; e < h.length; e++)
600
- t[e] = h.charCodeAt(e);
601
- return btoa(String.fromCharCode(...t));
602
- }
603
- class en extends re {
604
- constructor() {
605
- super(...arguments), T(this, "transformer", new Xo());
606
- }
607
- /**
608
- * Get all preferences for a user
609
- * @param paginationCursor - Optional cursor for pagination
610
- * @returns Promise resolving to user preferences
611
- * @see https://www.courier.com/docs/reference/user-preferences/list-all-user-preferences
612
- */
613
- async getUserPreferences(t) {
614
- let e = `${this.options.apiUrls.courier.rest}/users/${this.options.userId}/preferences`;
615
- t != null && t.paginationCursor && (e += `?cursor=${t.paginationCursor}`);
616
- const s = await K({
617
- options: this.options,
618
- url: e,
619
- method: "GET",
620
- headers: {
621
- Authorization: `Bearer ${this.options.accessToken}`
622
- }
623
- });
624
- return {
625
- items: [...this.transformer.transform(s.items)],
626
- paging: s.paging
627
- };
628
- }
629
- /**
630
- * Get preferences for a specific topic
631
- * @param topicId - The ID of the topic to get preferences for
632
- * @returns Promise resolving to topic preferences
633
- * @see https://www.courier.com/docs/reference/user-preferences/get-subscription-topic-preferences
634
- */
635
- async getUserPreferenceTopic(t) {
636
- const i = await K({
637
- options: this.options,
638
- url: `${this.options.apiUrls.courier.rest}/users/${this.options.userId}/preferences/${t.topicId}`,
639
- method: "GET",
640
- headers: {
641
- Authorization: `Bearer ${this.options.accessToken}`
642
- }
643
- });
644
- return this.transformer.transformItem(i.topic);
645
- }
646
- /**
647
- * Update preferences for a specific topic
648
- * @param topicId - The ID of the topic to update preferences for
649
- * @param status - The new status for the topic
650
- * @param hasCustomRouting - Whether the topic has custom routing
651
- * @param customRouting - The custom routing channels for the topic
652
- * @returns Promise resolving when update is complete
653
- * @see https://www.courier.com/docs/reference/user-preferences/update-subscription-topic-preferences
654
- */
655
- async putUserPreferenceTopic(t) {
656
- const e = {
657
- topic: {
658
- status: t.status,
659
- has_custom_routing: t.hasCustomRouting,
660
- custom_routing: t.customRouting
661
- }
662
- };
663
- await K({
664
- options: this.options,
665
- url: `${this.options.apiUrls.courier.rest}/users/${this.options.userId}/preferences/${t.topicId}`,
666
- method: "PUT",
667
- headers: {
668
- Authorization: `Bearer ${this.options.accessToken}`
669
- },
670
- body: e
671
- });
672
- }
673
- /**
674
- * Get the notification center URL
675
- * @param clientKey - The client key to use for the URL
676
- * @returns The notification center URL
677
- */
678
- getNotificationCenterUrl(t) {
679
- const e = Qo(t.clientKey);
680
- return `https://view.notificationcenter.app/p/${Yo(`${e}#${this.options.userId}${this.options.tenantId ? `#${this.options.tenantId}` : ""}#false`)}`;
681
- }
682
- }
683
- class tn extends re {
684
- /**
685
- * Store a push notification token for a user
686
- * @param token - The push notification token
687
- * @param provider - The provider of the token
688
- * @param device - The device information
689
- * @see https://www.courier.com/docs/reference/token-management/put-token
690
- */
691
- async putUserToken(t) {
692
- const e = {
693
- provider_key: t.provider,
694
- ...t.device && {
695
- device: {
696
- app_id: t.device.appId,
697
- ad_id: t.device.adId,
698
- device_id: t.device.deviceId,
699
- platform: t.device.platform,
700
- manufacturer: t.device.manufacturer,
701
- model: t.device.model
702
- }
703
- }
704
- };
705
- await K({
706
- options: this.options,
707
- url: `${this.options.apiUrls.courier.rest}/users/${this.options.userId}/tokens/${t.token}`,
708
- method: "PUT",
709
- headers: {
710
- Authorization: `Bearer ${this.options.accessToken}`
711
- },
712
- body: e,
713
- validCodes: [200, 204]
714
- });
715
- }
716
- /**
717
- * Delete a push notification token for a user
718
- * @param token - The push notification token
719
- * @returns Promise resolving when token is deleted
720
- */
721
- async deleteUserToken(t) {
722
- await K({
723
- options: this.options,
724
- url: `${this.options.apiUrls.courier.rest}/users/${this.options.userId}/tokens/${t.token}`,
725
- method: "DELETE",
726
- headers: {
727
- Authorization: `Bearer ${this.options.accessToken}`
728
- },
729
- validCodes: [200, 204]
730
- });
731
- }
732
- }
733
- class sn extends re {
734
- /**
735
- * Subscribe a user to a list
736
- * @param listId - The ID of the list to subscribe to
737
- * @returns Promise resolving when subscription is complete
738
- * @see https://www.courier.com/docs/reference/lists/recipient-subscribe
739
- */
740
- async putSubscription(t) {
741
- return await K({
742
- url: `${this.options.apiUrls.courier.rest}/lists/${t.listId}/subscriptions/${this.options.userId}`,
743
- options: this.options,
744
- method: "PUT",
745
- headers: {
746
- Authorization: `Bearer ${this.options.accessToken}`
747
- }
748
- });
749
- }
750
- /**
751
- * Unsubscribe a user from a list
752
- * @param listId - The ID of the list to unsubscribe from
753
- * @returns Promise resolving when unsubscription is complete
754
- * @see https://www.courier.com/docs/reference/lists/delete-subscription
755
- */
756
- async deleteSubscription(t) {
757
- return await K({
758
- url: `${this.options.apiUrls.courier.rest}/lists/${t.listId}/subscriptions/${this.options.userId}`,
759
- options: this.options,
760
- method: "DELETE",
761
- headers: {
762
- Authorization: `Bearer ${this.options.accessToken}`
763
- }
764
- });
765
- }
766
- }
767
- class on extends re {
768
- /**
769
- * Post an inbound courier event
770
- * @param event - The event type: Example: "New Order Placed"
771
- * @param messageId - The message ID
772
- * @param type - The type of event: Available options: "track"
773
- * @param properties - The properties of the event
774
- * @returns Promise resolving to the message ID
775
- * @see https://www.courier.com/docs/reference/inbound/courier-track-event
776
- */
777
- async postInboundCourier(t) {
778
- return await K({
779
- url: `${this.options.apiUrls.courier.rest}/inbound/courier`,
780
- options: this.options,
781
- method: "POST",
782
- headers: {
783
- Authorization: `Bearer ${this.options.accessToken}`
784
- },
785
- body: {
786
- ...t,
787
- userId: this.options.userId
788
- },
789
- validCodes: [200, 202]
790
- });
791
- }
792
- /**
793
- * Post a tracking URL event
794
- * These urls are found in messages sent from Courier
795
- * @param url - The URL to post the event to
796
- * @param event - The event type: Available options: "click", "open", "unsubscribe"
797
- * @returns Promise resolving when the event is posted
798
- */
799
- async postTrackingUrl(t) {
800
- return await K({
801
- url: t.url,
802
- options: this.options,
803
- method: "POST",
804
- body: {
805
- event: t.event
806
- }
807
- });
808
- }
809
- }
810
- class nn extends re {
811
- constructor(t) {
812
- var e, i;
813
- const s = t.showLogs !== void 0 ? t.showLogs : process.env.NODE_ENV === "development", o = {
814
- ...t,
815
- showLogs: s,
816
- apiUrls: t.apiUrls || yo(),
817
- accessToken: t.jwt ?? t.publicApiKey
818
- };
819
- super({
820
- ...o,
821
- logger: new Go(o.showLogs),
822
- apiUrls: yo(o.apiUrls)
823
- }), T(this, "tokens"), T(this, "brands"), T(this, "preferences"), T(this, "inbox"), T(this, "lists"), T(this, "tracking"), this.tokens = new tn(this.options), this.brands = new Wo(this.options), this.preferences = new en(this.options), this.inbox = new Ko(this.options), this.lists = new sn(this.options), this.tracking = new on(this.options), !this.options.jwt && !this.options.publicApiKey && this.options.logger.warn("Courier Client initialized with no authentication method. Please provide a JWT or public API key."), this.options.publicApiKey && ((e = this.options.logger) == null || e.warn(
824
- `Courier Warning: Public API Keys are for testing only. Please use JWTs for production.
825
- You can generate a JWT with this endpoint: https://www.courier.com/docs/reference/auth/issue-token
826
- This endpoint should be called from your backend server, not the SDK.`
827
- )), this.options.jwt && this.options.publicApiKey && ((i = this.options.logger) == null || i.warn(
828
- "Courier Warning: Both a JWT and a Public API Key were provided. The Public API Key will be ignored."
829
- ));
830
- }
831
- }
832
- class rn {
833
- constructor(t) {
834
- T(this, "callback"), this.callback = t;
835
- }
836
- remove() {
837
- v.shared.removeAuthenticationListener(this);
838
- }
839
- }
840
- const Eo = class Me {
841
- constructor() {
842
- T(this, "id", Ae.generate()), T(this, "instanceClient"), T(this, "_paginationLimit", 24), T(this, "authenticationListeners", []);
843
- }
844
- get paginationLimit() {
845
- return this._paginationLimit;
846
- }
847
- set paginationLimit(t) {
848
- this._paginationLimit = Math.min(Math.max(t, 1), 100);
849
- }
850
- /**
851
- * Get the Courier client instance
852
- * @returns The Courier client instance or undefined if not signed in
853
- */
854
- get client() {
855
- return this.instanceClient;
856
- }
857
- /**
858
- * Get the shared Courier instance
859
- * @returns The shared Courier instance
860
- */
861
- static get shared() {
862
- return Me.instance || (Me.instance = new Me()), Me.instance;
863
- }
864
- /**
865
- * Sign in to Courier
866
- * @param options - The options for the Courier client
867
- */
868
- signIn(t) {
869
- const e = t.connectionId ?? Ae.generate();
870
- this.instanceClient = new nn({ ...t, connectionId: e }), this.notifyAuthenticationListeners({ userId: t.userId });
871
- }
872
- /**
873
- * Sign out of Courier
874
- */
875
- signOut() {
876
- this.instanceClient = void 0, this.notifyAuthenticationListeners({ userId: void 0 });
877
- }
878
- /**
879
- * Register a callback to be notified of authentication state changes
880
- * @param callback - Function to be called when authentication state changes
881
- * @returns AuthenticationListener instance that can be used to remove the listener
882
- */
883
- addAuthenticationListener(t) {
884
- var e;
885
- (e = this.instanceClient) == null || e.options.logger.info("Adding authentication listener");
886
- const i = new rn(t);
887
- return this.authenticationListeners.push(i), i;
888
- }
889
- /**
890
- * Unregister an authentication state change listener
891
- * @param listener - The AuthenticationListener instance to remove
892
- */
893
- removeAuthenticationListener(t) {
894
- var e;
895
- (e = this.instanceClient) == null || e.options.logger.info("Removing authentication listener"), this.authenticationListeners = this.authenticationListeners.filter((i) => i !== t);
896
- }
897
- /**
898
- * Notify all authentication listeners
899
- * @param props - The props to notify the listeners with
900
- */
901
- notifyAuthenticationListeners(t) {
902
- this.authenticationListeners.forEach((e) => e.callback(t));
903
- }
904
- };
905
- T(Eo, "instance");
906
- let v = Eo;
907
- var an = Object.defineProperty, hn = (h, t, e) => t in h ? an(h, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[t] = e, $ = (h, t, e) => hn(h, typeof t != "symbol" ? t + "" : t, e);
908
- const r = {
909
- black: {
910
- 500: "#171717",
911
- 50010: "#1717171A",
912
- 50020: "#17171733"
913
- },
914
- gray: {
915
- 200: "#F5F5F5",
916
- 400: "#3A3A3A",
917
- 500: "#E5E5E5",
918
- 600: "#737373"
919
- },
920
- white: {
921
- 500: "#FFFFFF",
922
- 50010: "#FFFFFF1A",
923
- 50020: "#FFFFFF33"
924
- },
925
- blue: {
926
- 400: "#60A5FA",
927
- 500: "#2563EB"
928
- }
929
- }, W = {
930
- light: {
931
- colors: {
932
- primary: r.black[500],
933
- secondary: r.white[500],
934
- border: r.gray[500],
935
- link: r.blue[500],
936
- icon: r.black[500]
937
- },
938
- button: {
939
- cornerRadius: "4px"
940
- }
941
- },
942
- dark: {
943
- colors: {
944
- primary: r.white[500],
945
- secondary: r.black[500],
946
- border: r.gray[400],
947
- link: r.blue[400],
948
- icon: r.white[500]
949
- },
950
- button: {
951
- cornerRadius: "4px"
952
- }
953
- }
954
- }, Mo = () => typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", To = (h) => {
955
- if (typeof window > "u")
956
- return () => {
957
- };
958
- const t = window.matchMedia("(prefers-color-scheme: dark)"), e = (i) => {
959
- h(i.matches ? "dark" : "light");
960
- };
961
- return t.addEventListener("change", e), () => {
962
- t.removeEventListener("change", e);
963
- };
964
- };
965
- class $o extends HTMLElement {
966
- constructor() {
967
- super(), $(this, "_currentSystemTheme"), $(this, "_systemThemeCleanup"), this._currentSystemTheme = Mo(), this._systemThemeCleanup = To((t) => {
968
- this._currentSystemTheme = t, this.onSystemThemeChange(t);
969
- });
970
- }
971
- get currentSystemTheme() {
972
- return this._currentSystemTheme;
973
- }
974
- disconnectedCallback() {
975
- this._systemThemeCleanup && this._systemThemeCleanup();
976
- }
977
- onSystemThemeChange(t) {
978
- }
979
- }
980
- const Fe = {
981
- borderRadius: "4px",
982
- fontSize: "14px"
983
- }, se = {
984
- primary: (h) => ({
985
- ...Fe,
986
- backgroundColor: W[h].colors.primary,
987
- textColor: W[h].colors.secondary,
988
- fontWeight: "500",
989
- shadow: "none"
990
- }),
991
- secondary: (h) => ({
992
- ...Fe,
993
- backgroundColor: W[h].colors.secondary,
994
- textColor: W[h].colors.primary,
995
- fontWeight: "500",
996
- border: `1px solid ${W[h].colors.border}`,
997
- shadow: h === "light" ? "0px 1px 2px 0px rgba(0, 0, 0, 0.06)" : "0px 1px 2px 0px rgba(255, 255, 255, 0.1)"
998
- }),
999
- tertiary: (h) => ({
1000
- ...Fe,
1001
- backgroundColor: W[h].colors.border,
1002
- textColor: W[h].colors.primary,
1003
- fontWeight: "500",
1004
- border: "none",
1005
- shadow: "none"
1006
- })
1007
- };
1008
- class Re extends $o {
1009
- constructor(t) {
1010
- super(), $(this, "_button"), $(this, "_style");
1011
- const e = this.attachShadow({ mode: "open" });
1012
- this._button = document.createElement("button"), this._button.setAttribute("part", "button"), this._style = document.createElement("style"), this._style.textContent = this.getStyles(t), e.appendChild(this._style), e.appendChild(this._button), this.updateButton(t), this._button.addEventListener("click", (i) => {
1013
- i.preventDefault(), i.stopPropagation(), t.onClick && t.onClick();
1014
- });
1015
- }
1016
- getStyles(t) {
1017
- const e = () => se.secondary(this.currentSystemTheme).textColor, i = () => se.secondary(this.currentSystemTheme).backgroundColor, s = () => se.secondary(this.currentSystemTheme).border, o = () => se.secondary(this.currentSystemTheme).shadow, n = () => se.secondary(this.currentSystemTheme).borderRadius, c = () => se.secondary(this.currentSystemTheme).fontSize, d = () => se.secondary(this.currentSystemTheme).fontWeight;
1018
- return `
1019
- :host {
1020
- display: inline-block;
1021
- }
1022
-
1023
- button {
1024
- border: none;
1025
- border-radius: ${t.borderRadius ?? n()};
1026
- font-weight: ${t.fontWeight ?? d()};
1027
- font-family: ${t.fontFamily ?? "inherit"};
1028
- font-size: ${t.fontSize ?? c()};
1029
- padding: 6px 10px;
1030
- cursor: pointer;
1031
- width: 100%;
1032
- height: 100%;
1033
- background-color: ${t.backgroundColor ?? i()};
1034
- color: ${t.textColor ?? e()};
1035
- border: ${t.border ?? s()};
1036
- box-shadow: ${t.shadow ?? o()};
1037
- touch-action: manipulation;
1038
- }
1039
-
1040
- button:hover {
1041
- ${t.hoverBackgroundColor ? `background-color: ${t.hoverBackgroundColor};` : "filter: brightness(0.9);"}
1042
- }
1043
-
1044
- button:active {
1045
- ${t.activeBackgroundColor ? `background-color: ${t.activeBackgroundColor};` : "filter: brightness(0.8);"}
1046
- }
1047
-
1048
- button:disabled {
1049
- opacity: 0.5;
1050
- cursor: not-allowed;
1051
- }
1052
- `;
1053
- }
1054
- updateButton(t) {
1055
- t.text && (this._button.textContent = t.text), this._style.textContent = this.getStyles(t);
1056
- }
1057
- }
1058
- customElements.get("courier-button") || customElements.define("courier-button", Re);
1059
- const x = {
1060
- inbox: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1061
- <path d="M5.5 14.5V17C5.5 17.2812 5.71875 17.5 6 17.5H18C18.25 17.5 18.5 17.2812 18.5 17V14.5H15.9375L15.2812 15.8125C15.0938 16.25 14.6562 16.5 14.1875 16.5H9.78125C9.3125 16.5 8.875 16.25 8.6875 15.8125L8.03125 14.5H5.5ZM18.1875 13L16.6562 6.90625C16.5938 6.65625 16.4062 6.5 16.1875 6.5H7.8125C7.5625 6.5 7.375 6.65625 7.3125 6.90625L5.78125 13H8.1875C8.65625 13 9.09375 13.2812 9.3125 13.7188L9.9375 15H14.0312L14.6875 13.7188C14.875 13.2812 15.3125 13 15.7812 13H18.1875ZM4 14.25C4 14.0938 4 13.9375 4.03125 13.7812L5.84375 6.53125C6.09375 5.625 6.875 5 7.8125 5H16.1875C17.0938 5 17.9062 5.625 18.125 6.53125L19.9375 13.7812C19.9688 13.9375 20 14.0938 20 14.25V17C20 18.125 19.0938 19 18 19H6C4.875 19 4 18.125 4 17V14.25Z" fill="currentColor"/>
1062
- </svg>`,
1063
- archive: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1064
- <path d="M5.5 6.5V8H18.5V6.5H5.5ZM5 5H19C19.5312 5 20 5.46875 20 6V8.5C20 9.0625 19.5312 9.5 19 9.5H5C4.4375 9.5 4 9.0625 4 8.5V6C4 5.46875 4.4375 5 5 5ZM9 11.75C9 11.3438 9.3125 11 9.75 11H14.25C14.6562 11 15 11.3438 15 11.75C15 12.1875 14.6562 12.5 14.25 12.5H9.75C9.3125 12.5 9 12.1875 9 11.75ZM5 17V10.5H6.5V17C6.5 17.2812 6.71875 17.5 7 17.5H17C17.25 17.5 17.5 17.2812 17.5 17V10.5H19V17C19 18.125 18.0938 19 17 19H7C5.875 19 5 18.125 5 17Z" fill="currentColor"/>
1065
- </svg>`,
1066
- check: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1067
- <path d="M18.793 7.33203C19.0742 7.64453 19.0742 8.11328 18.793 8.39453L10.543 16.6445C10.2305 16.957 9.76172 16.957 9.48047 16.6445L5.23047 12.3945C4.91797 12.1133 4.91797 11.6445 5.23047 11.3633C5.51172 11.0508 5.98047 11.0508 6.26172 11.3633L9.98047 15.082L17.7305 7.33203C18.0117 7.05078 18.4805 7.05078 18.7617 7.33203H18.793Z" fill="currentColor"/>
1068
- </svg>`,
1069
- filter: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1070
- <path d="M5 7C5 6.59375 5.3125 6.25 5.75 6.25H18.25C18.6562 6.25 19 6.59375 19 7C19 7.4375 18.6562 7.75 18.25 7.75H5.75C5.3125 7.75 5 7.4375 5 7ZM7 12C7 11.5938 7.3125 11.25 7.75 11.25H16.25C16.6562 11.25 17 11.5938 17 12C17 12.4375 16.6562 12.75 16.25 12.75H7.75C7.3125 12.75 7 12.4375 7 12ZM14 17C14 17.4375 13.6562 17.75 13.25 17.75H10.75C10.3125 17.75 10 17.4375 10 17C10 16.5938 10.3125 16.25 10.75 16.25H13.25C13.6562 16.25 14 16.5938 14 17Z" fill="currentColor"/>
1071
- </svg>`,
1072
- overflow: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1073
- <path d="M18.5117 11.9883C18.5117 12.5508 18.1992 13.0195 17.7617 13.3008C17.293 13.582 16.6992 13.582 16.2617 13.3008C15.793 13.0195 15.5117 12.5508 15.5117 11.9883C15.5117 11.457 15.793 10.9883 16.2617 10.707C16.6992 10.4258 17.293 10.4258 17.7617 10.707C18.1992 10.9883 18.5117 11.457 18.5117 11.9883ZM13.5117 11.9883C13.5117 12.5508 13.1992 13.0195 12.7617 13.3008C12.293 13.582 11.6992 13.582 11.2617 13.3008C10.793 13.0195 10.5117 12.5508 10.5117 11.9883C10.5117 11.457 10.793 10.9883 11.2617 10.707C11.6992 10.4258 12.293 10.4258 12.7617 10.707C13.1992 10.9883 13.5117 11.457 13.5117 11.9883ZM7.01172 13.4883C6.44922 13.4883 5.98047 13.207 5.69922 12.7383C5.41797 12.3008 5.41797 11.707 5.69922 11.2383C5.98047 10.8008 6.44922 10.4883 7.01172 10.4883C7.54297 10.4883 8.01172 10.8008 8.29297 11.2383C8.57422 11.707 8.57422 12.3008 8.29297 12.7383C8.01172 13.207 7.54297 13.4883 7.01172 13.4883Z" fill="currentColor"/>
1074
- </svg>`,
1075
- read: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1076
- <path d="M7 6.5C6.71875 6.5 6.5 6.75 6.5 7V17C6.5 17.2812 6.71875 17.5 7 17.5H17C17.25 17.5 17.5 17.2812 17.5 17V7C17.5 6.75 17.25 6.5 17 6.5H7ZM5 7C5 5.90625 5.875 5 7 5H17C18.0938 5 19 5.90625 19 7V17C19 18.125 18.0938 19 17 19H7C5.875 19 5 18.125 5 17V7ZM15.5312 10.5312L11.5312 14.5312C11.2188 14.8438 10.75 14.8438 10.4688 14.5312L8.46875 12.5312C8.15625 12.25 8.15625 11.7812 8.46875 11.5C8.75 11.1875 9.21875 11.1875 9.53125 11.5L11 12.9688L14.4688 9.46875C14.75 9.1875 15.2188 9.1875 15.5 9.46875C15.8125 9.78125 15.8125 10.25 15.5 10.5312H15.5312Z" fill="currentColor"/>
1077
- </svg>`,
1078
- archiveRead: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1079
- <path d="M7.5 6.5V15.25H16.5V6.5H7.5ZM6 15.25V6.5C6 5.6875 6.65625 5 7.5 5H16.5C17.3125 5 18 5.6875 18 6.5V15.25C18.4062 15.25 18.75 15.5938 18.75 16C18.75 16.4375 18.4062 16.75 18 16.75H6C5.5625 16.75 5.25 16.4375 5.25 16C5.25 15.5938 5.5625 15.25 6 15.25ZM5 13V14.5H4.5V17.5H19.5V14.5H19V13H19.5C20.3125 13 21 13.6875 21 14.5V17.5C21 18.3438 20.3125 19 19.5 19H4.5C3.65625 19 3 18.3438 3 17.5V14.5C3 13.6875 3.65625 13 4.5 13H5ZM15.0312 9.625L11.6875 12.9688C11.5312 13.0938 11.3438 13.1875 11.1562 13.1875C10.9375 13.1875 10.75 13.0938 10.625 12.9688L8.96875 11.2812C8.65625 11 8.65625 10.5312 8.96875 10.25C9.25 9.9375 9.71875 9.9375 10 10.25L11.1562 11.375L13.9688 8.5625C14.25 8.28125 14.7188 8.28125 15 8.5625C15.3125 8.875 15.3125 9.34375 15 9.625H15.0312Z" fill="currentColor"/>
1080
- </svg>`,
1081
- unread: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1082
- <path d="M17 6.5H7C6.71875 6.5 6.5 6.75 6.5 7V17C6.5 17.2812 6.71875 17.5 7 17.5H17C17.25 17.5 17.5 17.2812 17.5 17V7C17.5 6.75 17.25 6.5 17 6.5ZM7 5H17C18.0938 5 19 5.90625 19 7V17C19 18.125 18.0938 19 17 19H7C5.875 19 5 18.125 5 17V7C5 5.90625 5.875 5 7 5Z" fill="currentColor"/>
1083
- </svg>`,
1084
- unarchive: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1085
- <path d="M5.5 11C5.0625 11 4.75 10.6875 4.75 10.25V5.75C4.75 5.34375 5.0625 5 5.5 5C5.90625 5 6.25 5.34375 6.25 5.75V8.28125L6.875 7.53125C8.15625 6 10.0625 5 12.25 5C16.0938 5 19.25 8.15625 19.25 12C19.25 15.875 16.0938 19 12.25 19C10.6562 19 9.21875 18.5 8.03125 17.625C7.71875 17.375 7.625 16.9062 7.875 16.5625C8.125 16.2188 8.59375 16.1562 8.9375 16.4062C9.84375 17.0938 11 17.5 12.25 17.5C15.2812 17.5 17.75 15.0625 17.75 12C17.75 8.96875 15.2812 6.5 12.25 6.5C10.5312 6.5 9.03125 7.28125 8 8.5L7.15625 9.5H10C10.4062 9.5 10.75 9.84375 10.75 10.25C10.75 10.6875 10.4062 11 10 11H5.5Z" fill="currentColor"/>
1086
- </svg>`
1087
- };
1088
- class ne extends HTMLElement {
1089
- constructor(t, e) {
1090
- super(), $(this, "_color"), $(this, "_svg"), $(this, "_iconContainer"), $(this, "_style"), this._color = t ?? r.black[500], this._svg = e;
1091
- const i = this.attachShadow({ mode: "open" });
1092
- this._iconContainer = document.createElement("div"), i.appendChild(this._iconContainer), this._style = document.createElement("style"), this._style.textContent = this.getStyles(this._color), i.appendChild(this._style), this.refresh();
1093
- }
1094
- getStyles(t) {
1095
- return `
1096
- :host {
1097
- display: inline-block;
1098
- line-height: 0;
1099
- display: flex;
1100
- align-items: center;
1101
- justify-content: center;
1102
- }
1103
-
1104
- svg {
1105
- width: 24px;
1106
- height: 24px;
1107
- color: ${t};
1108
- }
1109
- `;
1110
- }
1111
- refresh() {
1112
- this._svg && (this._iconContainer.innerHTML = this._svg), this._color && (this._style.textContent = this.getStyles(this._color));
1113
- }
1114
- updateColor(t) {
1115
- this._color = t, this.refresh();
1116
- }
1117
- updateSVG(t) {
1118
- this._svg = t, this.refresh();
1119
- }
1120
- }
1121
- customElements.get("courier-icon") || customElements.define("courier-icon", ne);
1122
- class Ue extends HTMLElement {
1123
- constructor() {
1124
- super(), $(this, "link");
1125
- const t = this.attachShadow({ mode: "open" });
1126
- this.link = document.createElement("a"), this.link.setAttribute("part", "link");
1127
- const e = document.createElement("style");
1128
- e.textContent = `
1129
- :host {
1130
- display: inline-block;
1131
- }
1132
-
1133
- a {
1134
- text-decoration: none;
1135
- border-radius: 4px;
1136
- cursor: pointer;
1137
- font-weight: 500;
1138
- transition: all 0.2s ease;
1139
- font-family: var(--courier-link-font-family, inherit);
1140
- font-size: var(--courier-link-font-size, inherit);
1141
- }
1142
-
1143
- /* Variants */
1144
- a[data-variant="primary"][data-mode="light"] {
1145
- color: var(--courier-link-color, ${W.light.colors.link});
1146
- }
1147
-
1148
- a[data-variant="primary"][data-mode="light"]:hover {
1149
- opacity: 0.8;
1150
- }
1151
-
1152
- a[data-variant="primary"][data-mode="light"]:active {
1153
- opacity: 0.6;
1154
- }
1155
-
1156
- a[data-variant="primary"][data-mode="dark"] {
1157
- color: var(--courier-link-color, ${W.dark.colors.link});
1158
- }
1159
-
1160
- a[data-variant="primary"][data-mode="dark"]:hover {
1161
- opacity: 0.8;
1162
- }
1163
-
1164
- a[data-variant="primary"][data-mode="dark"]:active {
1165
- opacity: 0.6;
1166
- }
1167
-
1168
- a[data-underline="true"] {
1169
- text-decoration: underline;
1170
- }
1171
-
1172
- a:disabled {
1173
- opacity: 0.6;
1174
- cursor: not-allowed;
1175
- pointer-events: none;
1176
- }
1177
- `, t.appendChild(e), t.appendChild(this.link), this.updateVariant(), this.updateUnderline(), this.updateMode();
1178
- }
1179
- connectedCallback() {
1180
- const t = document.createElement("slot");
1181
- this.link.appendChild(t), this.updateHref();
1182
- }
1183
- attributeChangedCallback(t, e, i) {
1184
- if (e !== i)
1185
- switch (t) {
1186
- case "href":
1187
- this.updateHref();
1188
- break;
1189
- case "variant":
1190
- case "mode":
1191
- this.updateVariant();
1192
- break;
1193
- case "disabled":
1194
- this.link.style.pointerEvents = this.hasAttribute("disabled") ? "none" : "auto", this.link.style.opacity = this.hasAttribute("disabled") ? "0.6" : "1";
1195
- break;
1196
- case "color":
1197
- this.updateColor();
1198
- break;
1199
- case "underline":
1200
- this.updateUnderline();
1201
- break;
1202
- case "target":
1203
- this.updateTarget();
1204
- break;
1205
- case "font-family":
1206
- this.updateFontFamily();
1207
- break;
1208
- case "font-size":
1209
- this.updateFontSize();
1210
- break;
1211
- }
1212
- }
1213
- updateHref() {
1214
- const t = this.getAttribute("href");
1215
- t && (this.link.href = t);
1216
- }
1217
- updateVariant() {
1218
- const t = this.getAttribute("variant") || "primary", e = this.getAttribute("mode") || "light";
1219
- this.link.setAttribute("data-variant", t), this.link.setAttribute("data-mode", e);
1220
- }
1221
- updateColor() {
1222
- const t = this.getAttribute("color");
1223
- t ? this.link.style.setProperty("--courier-link-color", t) : this.link.style.removeProperty("--courier-link-color");
1224
- }
1225
- updateUnderline() {
1226
- const t = this.getAttribute("underline") === "true";
1227
- this.link.setAttribute("data-underline", t.toString());
1228
- }
1229
- updateMode() {
1230
- const t = this.getAttribute("mode") || "light";
1231
- this.link.setAttribute("data-mode", t);
1232
- }
1233
- updateTarget() {
1234
- const t = this.getAttribute("target");
1235
- t && (this.link.target = t);
1236
- }
1237
- updateFontFamily() {
1238
- const t = this.getAttribute("font-family");
1239
- t ? this.link.style.setProperty("--courier-link-font-family", t) : this.link.style.removeProperty("--courier-link-font-family");
1240
- }
1241
- updateFontSize() {
1242
- const t = this.getAttribute("font-size");
1243
- t ? this.link.style.setProperty("--courier-link-font-size", t) : this.link.style.removeProperty("--courier-link-font-size");
1244
- }
1245
- }
1246
- $(Ue, "observedAttributes", [
1247
- "href",
1248
- "variant",
1249
- "disabled",
1250
- "color",
1251
- "underline",
1252
- "mode",
1253
- "target",
1254
- "font-family",
1255
- "font-size"
1256
- ]);
1257
- customElements.get("courier-link") || customElements.define("courier-link", Ue);
1258
- class De extends $o {
1259
- constructor() {
1260
- super(), $(this, "shadow"), this.shadow = this.attachShadow({ mode: "open" });
1261
- }
1262
- // Build the element with a factory function
1263
- build(t) {
1264
- if (t === null) {
1265
- this.shadow.replaceChildren();
1266
- return;
1267
- }
1268
- const e = t ?? this.defaultElement();
1269
- this.shadow.replaceChildren(e);
1270
- }
1271
- // Default element to be used if no factory is provided
1272
- defaultElement() {
1273
- const t = document.createElement("div");
1274
- return t.textContent = "Default Element Factory", t.style.cssText = `
1275
- background-color: red;
1276
- text-align: center;
1277
- padding: 12px;
1278
- `, t;
1279
- }
1280
- }
1281
- class Be extends De {
1282
- constructor(t) {
1283
- super(), $(this, "_props"), $(this, "_title"), $(this, "_button"), $(this, "_style"), $(this, "_buttonClickCallback", null), this._props = t;
1284
- }
1285
- defaultElement() {
1286
- var t, e;
1287
- const i = document.createElement("div");
1288
- return this._title = document.createElement("h2"), (t = this._props.title) != null && t.text && (this._title.textContent = this._props.title.text), this._button = new Re(this._props.button ?? se.secondary(this.currentSystemTheme)), this._style = document.createElement("style"), this._style.textContent = this.getStyles(this._props), i.className = "container", i.appendChild(this._style), i.appendChild(this._title), i.appendChild(this._button), this.shadow.appendChild(i), (e = this._button) == null || e.addEventListener("click", () => {
1289
- this._buttonClickCallback && this._buttonClickCallback();
1290
- }), i;
1291
- }
1292
- onSystemThemeChange(t) {
1293
- this.updateStyles(this._props);
1294
- }
1295
- getStyles(t) {
1296
- var e, i, s, o;
1297
- return `
1298
- :host {
1299
- display: flex;
1300
- align-items: center;
1301
- justify-content: center;
1302
- height: 100%;
1303
- width: 100%;
1304
- }
1305
-
1306
- .container {
1307
- display: flex;
1308
- flex-direction: column;
1309
- align-items: center;
1310
- justify-content: center;
1311
- gap: 16px;
1312
- text-align: center;
1313
- padding: 24px;
1314
- }
1315
-
1316
- .container h2 {
1317
- margin: 0;
1318
- color: ${((e = t.title) == null ? void 0 : e.textColor) ?? "red"};
1319
- font-size: ${((i = t.title) == null ? void 0 : i.fontSize) ?? "16px"};
1320
- font-weight: ${((s = t.title) == null ? void 0 : s.fontWeight) ?? "500"};
1321
- font-family: ${((o = t.title) == null ? void 0 : o.fontFamily) ?? "inherit"};
1322
- }
1323
- `;
1324
- }
1325
- updateStyles(t) {
1326
- this._props = t, this._style && (this._style.textContent = this.getStyles(t)), this._button && this._button.updateButton(t.button);
1327
- }
1328
- setButtonClickCallback(t) {
1329
- this._buttonClickCallback = t;
1330
- }
1331
- }
1332
- customElements.get("courier-info-state") || customElements.define("courier-info-state", Be);
1333
- class $e extends HTMLElement {
1334
- constructor(t, e, i, s, o, n, c, d) {
1335
- super(), $(this, "_backgroundColor"), $(this, "_hoverBackgroundColor"), $(this, "_activeBackgroundColor"), $(this, "_borderRadius"), $(this, "_height"), $(this, "_width"), $(this, "_style"), $(this, "_button"), $(this, "_icon"), this._borderRadius = n, this._backgroundColor = i, this._hoverBackgroundColor = s, this._activeBackgroundColor = o, this._height = c, this._width = d;
1336
- const l = this.attachShadow({ mode: "open" });
1337
- this._button = document.createElement("button"), this._button.setAttribute("part", "button"), this._icon = new ne(e, t), this._style = document.createElement("style"), this.refresh(), l.appendChild(this._style), this._button.appendChild(this._icon), l.appendChild(this._button);
1338
- }
1339
- refresh() {
1340
- this._style.textContent = this.getStyles();
1341
- }
1342
- getStyles() {
1343
- return `
1344
- :host {
1345
- display: inline-block;
1346
- border-radius: ${this._borderRadius ?? "50%"};
1347
- }
1348
-
1349
- button {
1350
- border: none;
1351
- border-radius: ${this._borderRadius ?? "50%"};
1352
- cursor: pointer;
1353
- width: ${this._width ?? "36px"};
1354
- height: ${this._height ?? "36px"};
1355
- display: flex;
1356
- align-items: center;
1357
- justify-content: center;
1358
- background: ${this._backgroundColor ?? "transparent"};
1359
- transition: background-color 0.2s ease;
1360
- touch-action: manipulation;
1361
- }
1362
-
1363
- button:hover {
1364
- background-color: ${this._hoverBackgroundColor ?? "red"};
1365
- }
1366
-
1367
- button:active {
1368
- background-color: ${this._activeBackgroundColor ?? "red"};
1369
- }
1370
-
1371
- button:disabled {
1372
- opacity: 0.6;
1373
- cursor: not-allowed;
1374
- }
1375
-
1376
- [part="icon"] {
1377
- display: flex;
1378
- align-items: center;
1379
- justify-content: center;
1380
- width: 24px;
1381
- height: 24px;
1382
- }
1383
- `;
1384
- }
1385
- updateIconColor(t) {
1386
- this._icon.updateColor(t);
1387
- }
1388
- updateIconSVG(t) {
1389
- this._icon.updateSVG(t);
1390
- }
1391
- updateBackgroundColor(t) {
1392
- this._backgroundColor = t, this.refresh();
1393
- }
1394
- updateHoverBackgroundColor(t) {
1395
- this._hoverBackgroundColor = t, this.refresh();
1396
- }
1397
- updateActiveBackgroundColor(t) {
1398
- this._activeBackgroundColor = t, this.refresh();
1399
- }
1400
- }
1401
- customElements.get("courier-icon-button") || customElements.define("courier-icon-button", $e);
1402
- const cn = [
1403
- { name: "courier-button", class: Re },
1404
- { name: "courier-icon", class: ne },
1405
- { name: "courier-link", class: Ue },
1406
- { name: "courier-info-state", class: Be },
1407
- { name: "courier-icon-button", class: $e }
1408
- ];
1409
- cn.forEach(({ name: h, class: t }) => {
1410
- customElements.get(h) || customElements.define(h, t);
1411
- });
1412
- const oe = class oe {
1413
- constructor() {
1414
- a(this, "_inboxDataSet");
1415
- a(this, "_archiveDataSet");
1416
- a(this, "_dataStoreListeners", []);
1417
- a(this, "_unreadCount");
1418
- a(this, "isPaginatingInbox", !1);
1419
- a(this, "isPaginatingArchive", !1);
1420
- }
1421
- static get shared() {
1422
- return oe.instance || (oe.instance = new oe()), oe.instance;
1423
- }
1424
- get unreadCount() {
1425
- return this._unreadCount ?? 0;
1426
- }
1427
- get inboxDataSet() {
1428
- return this._inboxDataSet ?? { messages: [], canPaginate: !1, paginationCursor: null };
1429
- }
1430
- get archiveDataSet() {
1431
- return this._archiveDataSet ?? { messages: [], canPaginate: !1, paginationCursor: null };
1432
- }
1433
- addDataStoreListener(t) {
1434
- this._dataStoreListeners.push(t);
1435
- }
1436
- removeDataStoreListener(t) {
1437
- this._dataStoreListeners = this._dataStoreListeners.filter((e) => e !== t);
1438
- }
1439
- async fetchDataSet(t) {
1440
- var i, s, o, n, c, d, l, p, m, g;
1441
- if (t.canUseCache)
1442
- switch (t.feedType) {
1443
- case "inbox":
1444
- if (this._inboxDataSet)
1445
- return this._inboxDataSet;
1446
- break;
1447
- case "archive":
1448
- if (this._archiveDataSet)
1449
- return this._archiveDataSet;
1450
- break;
1451
- }
1452
- const e = t.feedType === "inbox" ? await ((i = v.shared.client) == null ? void 0 : i.inbox.getMessages()) : await ((s = v.shared.client) == null ? void 0 : s.inbox.getArchivedMessages());
1453
- return {
1454
- messages: ((n = (o = e == null ? void 0 : e.data) == null ? void 0 : o.messages) == null ? void 0 : n.nodes) ?? [],
1455
- canPaginate: ((l = (d = (c = e == null ? void 0 : e.data) == null ? void 0 : c.messages) == null ? void 0 : d.pageInfo) == null ? void 0 : l.hasNextPage) ?? !1,
1456
- paginationCursor: ((g = (m = (p = e == null ? void 0 : e.data) == null ? void 0 : p.messages) == null ? void 0 : m.pageInfo) == null ? void 0 : g.startCursor) ?? null
1457
- };
1458
- }
1459
- async fetchUnreadCount(t) {
1460
- var i;
1461
- return t.canUseCache && this._unreadCount !== void 0 ? this._unreadCount : await ((i = v.shared.client) == null ? void 0 : i.inbox.getUnreadMessageCount()) ?? 0;
1462
- }
1463
- async load(t) {
1464
- var e, i, s;
1465
- try {
1466
- if (!((e = v.shared.client) != null && e.options.userId))
1467
- throw new Error("User is not signed in");
1468
- const o = t ?? { feedType: "inbox", canUseCache: !0 }, [n, c] = await Promise.all([
1469
- this.fetchDataSet(o),
1470
- this.fetchUnreadCount(o)
1471
- ]);
1472
- switch (o.feedType) {
1473
- case "inbox":
1474
- this._inboxDataSet = n;
1475
- break;
1476
- case "archive":
1477
- this._archiveDataSet = n;
1478
- break;
1479
- }
1480
- this._unreadCount = c, this._dataStoreListeners.forEach((d) => {
1481
- var l, p, m, g;
1482
- (p = (l = d.events).onDataSetChange) == null || p.call(l, n, o.feedType), (g = (m = d.events).onUnreadCountChange) == null || g.call(m, this._unreadCount ?? 0);
1483
- }), await this.connectSocket();
1484
- } catch (o) {
1485
- (s = (i = v.shared.client) == null ? void 0 : i.options.logger) == null || s.error("Error loading inbox:", o), this._dataStoreListeners.forEach((n) => {
1486
- var c, d;
1487
- (d = (c = n.events).onError) == null || d.call(c, o);
1488
- });
1489
- }
1490
- }
1491
- async connectSocket() {
1492
- var e, i, s, o, n, c, d, l, p, m, g, f;
1493
- const t = (e = v.shared.client) == null ? void 0 : e.inbox.socket;
1494
- try {
1495
- if (!t) {
1496
- (s = (i = v.shared.client) == null ? void 0 : i.options.logger) == null || s.info("CourierInbox socket not available");
1497
- return;
1498
- }
1499
- if ((c = (o = v.shared.client) == null ? void 0 : o.options.logger) == null || c.info("CourierInbox socket connectionId:", (n = v.shared.client) == null ? void 0 : n.options.connectionId), t.isConnected) {
1500
- (l = (d = v.shared.client) == null ? void 0 : d.options.logger) == null || l.info("CourierInbox socket already connected. Socket will not attempt reconnection.");
1501
- return;
1502
- }
1503
- t.receivedMessage = (_) => {
1504
- this.addMessage(_, 0, "inbox");
1505
- }, t.receivedMessageEvent = (_) => {
1506
- let b;
1507
- switch (_.messageId && (b = this.getMessage({ messageId: _.messageId })), _.event) {
1508
- case "mark-all-read":
1509
- this.readAllMessages({ canCallApi: !1 });
1510
- break;
1511
- case "read":
1512
- b && this.readMessage({ message: b, canCallApi: !1 });
1513
- break;
1514
- case "unread":
1515
- b && this.unreadMessage({ message: b, canCallApi: !1 });
1516
- break;
1517
- case "opened":
1518
- b && this.openMessage({ message: b, canCallApi: !1 });
1519
- break;
1520
- case "archive":
1521
- b && this.archiveMessage({ message: b, canCallApi: !1 });
1522
- break;
1523
- case "archive-read":
1524
- this.archiveReadMessages({ canCallApi: !1 });
1525
- break;
1526
- case "click":
1527
- b && this.clickMessage({ message: b, canCallApi: !1 });
1528
- break;
1529
- case "unopened":
1530
- case "unarchive":
1531
- break;
1532
- }
1533
- }, await t.connect(), await t.sendSubscribe(), t.keepAlive(), (m = (p = v.shared.client) == null ? void 0 : p.options.logger) == null || m.info("CourierInbox socket connected");
1534
- } catch (_) {
1535
- (f = (g = v.shared.client) == null ? void 0 : g.options.logger) == null || f.error("Failed to connect socket:", _);
1536
- }
1537
- }
1538
- getMessage(t) {
1539
- var e, i;
1540
- return ((e = this._inboxDataSet) == null ? void 0 : e.messages.find((s) => s.messageId === t.messageId)) ?? ((i = this._archiveDataSet) == null ? void 0 : i.messages.find((s) => s.messageId === t.messageId));
1541
- }
1542
- async fetchNextPageOfMessages(t) {
1543
- var e, i, s, o, n, c, d, l, p, m, g, f, _, b, C, k, w, S, I, E, M, L, R, D;
1544
- switch (t.feedType) {
1545
- case "inbox":
1546
- if (this.isPaginatingInbox)
1547
- return null;
1548
- if ((e = this._inboxDataSet) != null && e.canPaginate && this._inboxDataSet.paginationCursor)
1549
- try {
1550
- this.isPaginatingInbox = !0;
1551
- const y = await ((i = v.shared.client) == null ? void 0 : i.inbox.getMessages({
1552
- paginationLimit: v.shared.paginationLimit,
1553
- startCursor: this._inboxDataSet.paginationCursor
1554
- })), A = {
1555
- messages: ((o = (s = y == null ? void 0 : y.data) == null ? void 0 : s.messages) == null ? void 0 : o.nodes) ?? [],
1556
- canPaginate: ((d = (c = (n = y == null ? void 0 : y.data) == null ? void 0 : n.messages) == null ? void 0 : c.pageInfo) == null ? void 0 : d.hasNextPage) ?? !1,
1557
- paginationCursor: ((m = (p = (l = y == null ? void 0 : y.data) == null ? void 0 : l.messages) == null ? void 0 : p.pageInfo) == null ? void 0 : m.startCursor) ?? null
1558
- };
1559
- return this.addPage(A, "inbox"), A;
1560
- } catch (y) {
1561
- return (f = (g = v.shared.client) == null ? void 0 : g.options.logger) == null || f.error("Error fetching next page of inbox messages:", y), null;
1562
- } finally {
1563
- this.isPaginatingInbox = !1;
1564
- }
1565
- break;
1566
- case "archive":
1567
- if (this.isPaginatingArchive)
1568
- return null;
1569
- if ((_ = this._archiveDataSet) != null && _.canPaginate && this._archiveDataSet.paginationCursor)
1570
- try {
1571
- this.isPaginatingArchive = !0;
1572
- const y = await ((b = v.shared.client) == null ? void 0 : b.inbox.getArchivedMessages({
1573
- paginationLimit: v.shared.paginationLimit,
1574
- startCursor: this._archiveDataSet.paginationCursor
1575
- })), A = {
1576
- messages: ((k = (C = y == null ? void 0 : y.data) == null ? void 0 : C.messages) == null ? void 0 : k.nodes) ?? [],
1577
- canPaginate: ((I = (S = (w = y == null ? void 0 : y.data) == null ? void 0 : w.messages) == null ? void 0 : S.pageInfo) == null ? void 0 : I.hasNextPage) ?? !1,
1578
- paginationCursor: ((L = (M = (E = y == null ? void 0 : y.data) == null ? void 0 : E.messages) == null ? void 0 : M.pageInfo) == null ? void 0 : L.startCursor) ?? null
1579
- };
1580
- return this.addPage(A, "archive"), A;
1581
- } catch (y) {
1582
- return (D = (R = v.shared.client) == null ? void 0 : R.options.logger) == null || D.error("Error fetching next page of archived messages:", y), null;
1583
- } finally {
1584
- this.isPaginatingArchive = !1;
1585
- }
1586
- break;
1587
- }
1588
- return null;
1589
- }
1590
- applyLocalMessageChange(t, e) {
1591
- for (const [i, s] of Object.entries(e))
1592
- s !== void 0 && this.updateMessage(t, s, i);
1593
- }
1594
- async readMessage({ message: t, canCallApi: e = !0 }) {
1595
- var o, n, c, d;
1596
- if (!v.shared.client)
1597
- return;
1598
- const i = t;
1599
- if (i.read)
1600
- return;
1601
- const s = {
1602
- inbox: (o = this._inboxDataSet) == null ? void 0 : o.messages.findIndex((l) => l.messageId === t.messageId),
1603
- archive: (n = this._archiveDataSet) == null ? void 0 : n.messages.findIndex((l) => l.messageId === t.messageId)
1604
- };
1605
- try {
1606
- t.read = (/* @__PURE__ */ new Date()).toISOString(), this.applyLocalMessageChange(t, s), e && await v.shared.client.inbox.read({ messageId: t.messageId });
1607
- } catch (l) {
1608
- this.applyLocalMessageChange(i, s), (d = (c = v.shared.client) == null ? void 0 : c.options.logger) == null || d.error("Error reading message:", l);
1609
- }
1610
- }
1611
- async unreadMessage({ message: t, canCallApi: e = !0 }) {
1612
- var o, n, c, d;
1613
- if (!v.shared.client)
1614
- return;
1615
- const i = t;
1616
- if (!i.read)
1617
- return;
1618
- const s = {
1619
- inbox: (o = this._inboxDataSet) == null ? void 0 : o.messages.findIndex((l) => l.messageId === t.messageId),
1620
- archive: (n = this._archiveDataSet) == null ? void 0 : n.messages.findIndex((l) => l.messageId === t.messageId)
1621
- };
1622
- try {
1623
- t.read = void 0, this.applyLocalMessageChange(t, s), e && await v.shared.client.inbox.unread({ messageId: t.messageId });
1624
- } catch (l) {
1625
- this.applyLocalMessageChange(i, s), (d = (c = v.shared.client) == null ? void 0 : c.options.logger) == null || d.error("Error unreading message:", l);
1626
- }
1627
- }
1628
- async openMessage({ message: t, canCallApi: e = !0 }) {
1629
- var o, n, c, d;
1630
- if (!v.shared.client)
1631
- return;
1632
- const i = t, s = {
1633
- inbox: (o = this._inboxDataSet) == null ? void 0 : o.messages.findIndex((l) => l.messageId === t.messageId),
1634
- archive: (n = this._archiveDataSet) == null ? void 0 : n.messages.findIndex((l) => l.messageId === t.messageId)
1635
- };
1636
- if (!(!s.inbox && !s.archive) && !i.opened)
1637
- try {
1638
- t.opened = (/* @__PURE__ */ new Date()).toISOString(), this.applyLocalMessageChange(t, s), e && await v.shared.client.inbox.open({ messageId: t.messageId });
1639
- } catch (l) {
1640
- this.applyLocalMessageChange(i, s), (d = (c = v.shared.client) == null ? void 0 : c.options.logger) == null || d.error("Error opening message:", l);
1641
- }
1642
- }
1643
- async clickMessage({ message: t, canCallApi: e = !0 }) {
1644
- var i, s, o, n;
1645
- if (v.shared.client)
1646
- try {
1647
- (i = t.trackingIds) != null && i.clickTrackingId && e && await v.shared.client.inbox.click({
1648
- messageId: t.messageId,
1649
- trackingId: (s = t.trackingIds) == null ? void 0 : s.clickTrackingId
1650
- });
1651
- } catch (c) {
1652
- (n = (o = v.shared.client) == null ? void 0 : o.options.logger) == null || n.error("Error clicking message:", c);
1653
- }
1654
- }
1655
- async archiveMessage({ message: t, canCallApi: e = !0 }) {
1656
- var o, n;
1657
- if (!v.shared.client)
1658
- return;
1659
- const i = t, s = (o = this._inboxDataSet) == null ? void 0 : o.messages.findIndex((c) => c.messageId === t.messageId);
1660
- if (s !== void 0)
1661
- try {
1662
- if (this.removeMessage(t, s, "inbox"), (n = this._archiveDataSet) != null && n.messages) {
1663
- const c = this.findInsertIndex(t, this._archiveDataSet.messages);
1664
- t.archived = (/* @__PURE__ */ new Date()).toISOString(), this.addMessage(t, c, "archive");
1665
- }
1666
- e && await v.shared.client.inbox.archive({ messageId: t.messageId });
1667
- } catch {
1668
- this.addMessage(i, s, "inbox"), t.archived = void 0, this.removeMessage(t, s, "archive");
1669
- }
1670
- }
1671
- async archiveReadMessages({ canCallApi: t = !0 } = {}) {
1672
- var s;
1673
- if (!v.shared.client)
1674
- return;
1675
- const e = this._inboxDataSet, i = this._archiveDataSet;
1676
- try {
1677
- (s = this._inboxDataSet) == null || s.messages.forEach((o) => {
1678
- var c, d;
1679
- if (!o.read)
1680
- return;
1681
- const n = (c = this._inboxDataSet) == null ? void 0 : c.messages.findIndex((l) => l.messageId === o.messageId);
1682
- if (n !== void 0 && (this.removeMessage(o, n, "inbox"), (d = this._archiveDataSet) != null && d.messages)) {
1683
- const l = this.findInsertIndex(o, this._archiveDataSet.messages);
1684
- o.archived = (/* @__PURE__ */ new Date()).toISOString(), this.addMessage(o, l, "archive");
1685
- }
1686
- }), this._dataStoreListeners.forEach((o) => {
1687
- var n, c, d, l;
1688
- this._inboxDataSet && ((c = (n = o.events).onDataSetChange) == null || c.call(n, this._inboxDataSet, "inbox")), this._archiveDataSet && ((l = (d = o.events).onDataSetChange) == null || l.call(d, this._archiveDataSet, "archive"));
1689
- }), t && await v.shared.client.inbox.archiveRead();
1690
- } catch (o) {
1691
- console.error("Error archiving read messages:", o), this._inboxDataSet && e && (this._inboxDataSet.messages = e.messages), this._archiveDataSet && i && (this._archiveDataSet.messages = i.messages), this._dataStoreListeners.forEach((n) => {
1692
- var c, d, l, p;
1693
- this._inboxDataSet && ((d = (c = n.events).onDataSetChange) == null || d.call(c, this._inboxDataSet, "inbox")), this._archiveDataSet && ((p = (l = n.events).onDataSetChange) == null || p.call(l, this._archiveDataSet, "archive"));
1694
- });
1695
- }
1696
- }
1697
- async readAllMessages({ canCallApi: t = !0 } = {}) {
1698
- var o, n, c, d;
1699
- if (!v.shared.client)
1700
- return;
1701
- const e = this._inboxDataSet, i = this._archiveDataSet, s = this._unreadCount;
1702
- try {
1703
- (o = this._inboxDataSet) == null || o.messages.forEach((l) => {
1704
- l.read || (l.read = (/* @__PURE__ */ new Date()).toISOString());
1705
- }), (n = this._archiveDataSet) == null || n.messages.forEach((l) => {
1706
- l.read || (l.read = (/* @__PURE__ */ new Date()).toISOString());
1707
- }), this._unreadCount = 0, this._dataStoreListeners.forEach((l) => {
1708
- var p, m, g, f, _, b;
1709
- this._inboxDataSet && ((m = (p = l.events).onDataSetChange) == null || m.call(p, this._inboxDataSet, "inbox")), this._archiveDataSet && ((f = (g = l.events).onDataSetChange) == null || f.call(g, this._archiveDataSet, "archive")), (b = (_ = l.events).onUnreadCountChange) == null || b.call(_, this._unreadCount);
1710
- }), t && await v.shared.client.inbox.readAll();
1711
- } catch (l) {
1712
- (d = (c = v.shared.client) == null ? void 0 : c.options.logger) == null || d.error("Error reading all messages:", l), this._inboxDataSet && e && (this._inboxDataSet.messages = e.messages), this._archiveDataSet && i && (this._archiveDataSet.messages = i.messages), this._unreadCount = s, this._dataStoreListeners.forEach((p) => {
1713
- var m, g, f, _, b, C;
1714
- this._inboxDataSet && ((g = (m = p.events).onDataSetChange) == null || g.call(m, this._inboxDataSet, "inbox")), this._archiveDataSet && ((_ = (f = p.events).onDataSetChange) == null || _.call(f, this._archiveDataSet, "archive")), (C = (b = p.events).onUnreadCountChange) == null || C.call(b, this._unreadCount);
1715
- });
1716
- }
1717
- }
1718
- findInsertIndex(t, e) {
1719
- const i = [...e];
1720
- i.push(t), i.sort((o, n) => {
1721
- const c = new Date(o.created ?? Date.now()).getTime();
1722
- return new Date(n.created ?? Date.now()).getTime() - c;
1723
- });
1724
- const s = i.findIndex((o) => o.messageId === t.messageId);
1725
- return Math.max(s - 1, 0);
1726
- }
1727
- addPage(t, e) {
1728
- switch (e) {
1729
- case "inbox":
1730
- this._inboxDataSet && (this._inboxDataSet.canPaginate = t.canPaginate, this._inboxDataSet.paginationCursor = t.paginationCursor, this._inboxDataSet.messages = [...this._inboxDataSet.messages, ...t.messages]);
1731
- break;
1732
- case "archive":
1733
- this._archiveDataSet && (this._archiveDataSet.canPaginate = t.canPaginate, this._archiveDataSet.paginationCursor = t.paginationCursor, this._archiveDataSet.messages = [...this._archiveDataSet.messages, ...t.messages]);
1734
- break;
1735
- }
1736
- this._dataStoreListeners.forEach(
1737
- (i) => {
1738
- var s, o;
1739
- return (o = (s = i.events).onPageAdded) == null ? void 0 : o.call(s, t, e);
1740
- }
1741
- );
1742
- }
1743
- addMessage(t, e, i) {
1744
- var s, o;
1745
- switch (i) {
1746
- case "inbox":
1747
- !t.read && this._unreadCount !== void 0 && (this._unreadCount = this._unreadCount + 1), (s = this._inboxDataSet) == null || s.messages.splice(e, 0, t);
1748
- break;
1749
- case "archive":
1750
- (o = this._archiveDataSet) == null || o.messages.splice(e, 0, t);
1751
- break;
1752
- }
1753
- this._dataStoreListeners.forEach((n) => {
1754
- var c, d, l, p;
1755
- (d = (c = n.events).onMessageAdd) == null || d.call(c, t, e, i), (p = (l = n.events).onUnreadCountChange) == null || p.call(l, this._unreadCount ?? 0);
1756
- });
1757
- }
1758
- removeMessage(t, e, i) {
1759
- var s, o;
1760
- switch (i) {
1761
- case "inbox":
1762
- !t.read && this._unreadCount !== void 0 && (this._unreadCount = this._unreadCount - 1), (s = this._inboxDataSet) == null || s.messages.splice(e, 1);
1763
- break;
1764
- case "archive":
1765
- (o = this._archiveDataSet) == null || o.messages.splice(e, 1);
1766
- break;
1767
- }
1768
- this._dataStoreListeners.forEach((n) => {
1769
- var c, d, l, p;
1770
- (d = (c = n.events).onMessageRemove) == null || d.call(c, t, e, i), (p = (l = n.events).onUnreadCountChange) == null || p.call(l, this._unreadCount ?? 0);
1771
- });
1772
- }
1773
- updateMessage(t, e, i) {
1774
- switch (i) {
1775
- case "inbox":
1776
- this._unreadCount !== void 0 && !t.archived && (t.read && (this._unreadCount = Math.max(0, this._unreadCount - 1)), t.read || (this._unreadCount = this._unreadCount + 1)), this._inboxDataSet && (this._inboxDataSet.messages[e] = t);
1777
- break;
1778
- case "archive":
1779
- this._archiveDataSet && (this._archiveDataSet.messages[e] = t);
1780
- break;
1781
- }
1782
- this._dataStoreListeners.forEach((s) => {
1783
- var o, n, c, d;
1784
- (n = (o = s.events).onMessageUpdate) == null || n.call(o, t, e, i), (d = (c = s.events).onUnreadCountChange) == null || d.call(c, this._unreadCount ?? 0);
1785
- });
1786
- }
1787
- };
1788
- a(oe, "instance");
1789
- let P = oe;
1790
- function gn(h) {
1791
- return P.shared.readMessage({ message: h });
1792
- }
1793
- function mn(h) {
1794
- return P.shared.unreadMessage({ message: h });
1795
- }
1796
- function bn(h) {
1797
- return P.shared.clickMessage({ message: h });
1798
- }
1799
- function _n(h) {
1800
- return P.shared.archiveMessage({ message: h });
1801
- }
1802
- function fn(h) {
1803
- return P.shared.openMessage({ message: h });
1804
- }
1805
- function ln(h) {
1806
- if (!h.created) return "Now";
1807
- const t = /* @__PURE__ */ new Date(), e = new Date(h.created), i = Math.floor((t.getTime() - e.getTime()) / 1e3);
1808
- return i < 60 ? `${i}s` : i < 3600 ? `${Math.floor(i / 60)}m` : i < 86400 ? `${Math.floor(i / 3600)}h` : i < 604800 ? `${Math.floor(i / 86400)}d` : i < 31536e3 ? `${Math.floor(i / 604800)}w` : `${Math.floor(i / 31536e3)}y`;
1809
- }
1810
- class Lo extends HTMLElement {
1811
- constructor(e) {
1812
- super();
1813
- // State
1814
- a(this, "_theme");
1815
- a(this, "_options", []);
1816
- // Components
1817
- a(this, "_style");
1818
- this._theme = e;
1819
- const i = this.attachShadow({ mode: "open" });
1820
- this._style = document.createElement("style"), this._style.textContent = this.getStyles(), i.appendChild(this._style);
1821
- const s = document.createElement("ul");
1822
- s.className = "menu", i.appendChild(s);
1823
- }
1824
- getStyles() {
1825
- var i, s, o;
1826
- const e = (o = (s = (i = this._theme.inbox) == null ? void 0 : i.list) == null ? void 0 : s.item) == null ? void 0 : o.menu;
1827
- return `
1828
- :host {
1829
- display: block;
1830
- position: absolute;
1831
- background: ${(e == null ? void 0 : e.backgroundColor) ?? "red"};
1832
- border: ${(e == null ? void 0 : e.border) ?? "1px solid red"};
1833
- border-radius: ${(e == null ? void 0 : e.borderRadius) ?? "0px"};
1834
- box-shadow: ${(e == null ? void 0 : e.shadow) ?? "0 2px 8px red"};
1835
- user-select: none;
1836
- opacity: 0;
1837
- pointer-events: none;
1838
- transition: opacity 0.15s;
1839
- overflow: hidden;
1840
- }
1841
-
1842
- :host(.visible) {
1843
- opacity: 1;
1844
- pointer-events: auto;
1845
- }
1846
-
1847
- ul.menu {
1848
- list-style: none;
1849
- margin: 0;
1850
- padding: 0;
1851
- display: flex;
1852
- flex-direction: row;
1853
- }
1854
-
1855
- li.menu-item {
1856
- display: flex;
1857
- align-items: center;
1858
- justify-content: center;
1859
- cursor: pointer;
1860
- border-bottom: none;
1861
- background: transparent;
1862
- }
1863
- `;
1864
- }
1865
- setOptions(e) {
1866
- this._options = e, this.renderMenu();
1867
- }
1868
- renderMenu() {
1869
- var o, n, c, d;
1870
- const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("ul.menu");
1871
- if (!e) return;
1872
- e.innerHTML = "";
1873
- const i = (d = (c = (n = this._theme.inbox) == null ? void 0 : n.list) == null ? void 0 : c.item) == null ? void 0 : d.menu, s = (l) => {
1874
- l.stopPropagation(), l.preventDefault();
1875
- };
1876
- this._options.forEach((l) => {
1877
- var g, f, _;
1878
- const p = new $e(l.icon.svg, l.icon.color, i == null ? void 0 : i.backgroundColor, (g = i == null ? void 0 : i.item) == null ? void 0 : g.hoverBackgroundColor, (f = i == null ? void 0 : i.item) == null ? void 0 : f.activeBackgroundColor, (_ = i == null ? void 0 : i.item) == null ? void 0 : _.borderRadius), m = (b) => {
1879
- s(b), l.onClick();
1880
- };
1881
- p.addEventListener("click", m), p.addEventListener("touchstart", s), p.addEventListener("touchend", m), p.addEventListener("touchmove", s), p.addEventListener("mousedown", s), p.addEventListener("mouseup", s), e.appendChild(p);
1882
- });
1883
- }
1884
- show() {
1885
- this.classList.add("visible");
1886
- }
1887
- hide() {
1888
- this.classList.remove("visible");
1889
- }
1890
- }
1891
- customElements.get("courier-list-item-menu") || customElements.define("courier-list-item-menu", Lo);
1892
- class Ao extends HTMLElement {
1893
- constructor(e) {
1894
- super();
1895
- // State
1896
- a(this, "_theme");
1897
- a(this, "_message", null);
1898
- a(this, "_feedType", "inbox");
1899
- a(this, "_isMobile", !1);
1900
- // Elements
1901
- a(this, "_titleElement");
1902
- a(this, "_subtitleElement");
1903
- a(this, "_timeElement");
1904
- a(this, "_style");
1905
- a(this, "_menu");
1906
- a(this, "_unreadIndicator");
1907
- a(this, "_actionsContainer");
1908
- // Touch gestures
1909
- a(this, "_longPressTimeout", null);
1910
- a(this, "_isLongPress", !1);
1911
- // Callbacks
1912
- a(this, "onItemClick", null);
1913
- a(this, "onItemLongPress", null);
1914
- a(this, "onItemActionClick", null);
1915
- this._theme = e, this._isMobile = "ontouchstart" in window;
1916
- const i = this.attachShadow({ mode: "open" }), s = document.createElement("div");
1917
- s.className = "content-container", this._titleElement = document.createElement("p"), this._titleElement.setAttribute("part", "title"), this._subtitleElement = document.createElement("p"), this._subtitleElement.setAttribute("part", "subtitle"), this._actionsContainer = document.createElement("div"), this._actionsContainer.className = "actions-container", s.appendChild(this._titleElement), s.appendChild(this._subtitleElement), s.appendChild(this._actionsContainer), this._timeElement = document.createElement("p"), this._timeElement.setAttribute("part", "time"), this._unreadIndicator = document.createElement("div"), this._unreadIndicator.className = "unread-indicator", this._style = document.createElement("style"), this._refreshStyles(), this._menu = new Lo(this._theme), this._menu.setOptions(this._getMenuOptions()), i.append(this._style, this._unreadIndicator, s, this._timeElement, this._menu);
1918
- const o = (n) => {
1919
- n.stopPropagation(), n.preventDefault();
1920
- };
1921
- this._menu.addEventListener("mousedown", o), this._menu.addEventListener("pointerdown", o), this._menu.addEventListener("click", o), this.addEventListener("click", (n) => {
1922
- this._menu.contains(n.target) || n.composedPath().includes(this._menu) || this._message && this.onItemClick && !(n.target instanceof ne) && !this._isLongPress && this.onItemClick(this._message);
1923
- }), this._setupHoverBehavior(), this._setupLongPressBehavior();
1924
- }
1925
- _setupHoverBehavior() {
1926
- this._isMobile || (this.addEventListener("mouseenter", () => {
1927
- this._isLongPress = !1, this._showMenu();
1928
- }), this.addEventListener("mouseleave", () => this._hideMenu()));
1929
- }
1930
- _setupLongPressBehavior() {
1931
- var s, o, n;
1932
- const e = (n = (o = (s = this._theme.inbox) == null ? void 0 : s.list) == null ? void 0 : o.item) == null ? void 0 : n.menu;
1933
- if (!(e != null && e.enabled))
1934
- return;
1935
- const i = e.longPress;
1936
- this.addEventListener(
1937
- "touchstart",
1938
- () => {
1939
- this._longPressTimeout = window.setTimeout(() => {
1940
- this._isLongPress = !0, this._showMenu(), this._message && this.onItemLongPress && (this.onItemLongPress(this._message), navigator.vibrate && navigator.vibrate((i == null ? void 0 : i.vibrationDuration) ?? 50)), setTimeout(() => {
1941
- this._hideMenu(), this._isLongPress = !1;
1942
- }, (i == null ? void 0 : i.displayDuration) ?? 2e3);
1943
- }, 650);
1944
- },
1945
- { passive: !0 }
1946
- ), this.addEventListener("touchend", () => {
1947
- this._longPressTimeout && (window.clearTimeout(this._longPressTimeout), this._longPressTimeout = null);
1948
- });
1949
- }
1950
- setOnLongPress(e) {
1951
- this.onItemLongPress = e;
1952
- }
1953
- // Helpers
1954
- _getMenuOptions() {
1955
- var s, o, n, c, d, l, p, m, g, f, _, b, C, k, w, S, I, E, M;
1956
- const e = (c = (n = (o = (s = this._theme.inbox) == null ? void 0 : s.list) == null ? void 0 : o.item) == null ? void 0 : n.menu) == null ? void 0 : c.item;
1957
- let i = [];
1958
- return (d = this._message) != null && d.archived || i.push({
1959
- id: (l = this._message) != null && l.read ? "unread" : "read",
1960
- icon: {
1961
- svg: (p = this._message) != null && p.read ? (m = e == null ? void 0 : e.unread) == null ? void 0 : m.svg : (g = e == null ? void 0 : e.read) == null ? void 0 : g.svg,
1962
- color: (f = this._message) != null && f.read ? (_ = e == null ? void 0 : e.unread) == null ? void 0 : _.color : ((b = e == null ? void 0 : e.read) == null ? void 0 : b.color) ?? "red"
1963
- },
1964
- onClick: () => {
1965
- this._message && (this._message.read ? P.shared.unreadMessage({ message: this._message }) : P.shared.readMessage({ message: this._message }));
1966
- }
1967
- }), i.push({
1968
- id: (C = this._message) != null && C.archived ? "unarchive" : "archive",
1969
- icon: {
1970
- svg: (k = this._message) != null && k.archived ? (w = e == null ? void 0 : e.unarchive) == null ? void 0 : w.svg : (S = e == null ? void 0 : e.archive) == null ? void 0 : S.svg,
1971
- color: (I = this._message) != null && I.archived ? (E = e == null ? void 0 : e.unarchive) == null ? void 0 : E.color : ((M = e == null ? void 0 : e.archive) == null ? void 0 : M.color) ?? "red"
1972
- },
1973
- onClick: () => {
1974
- this._message && (this._message.archived ? alert("unarchive") : P.shared.archiveMessage({ message: this._message }));
1975
- }
1976
- }), i;
1977
- }
1978
- // Menu visibility helpers
1979
- _showMenu() {
1980
- var i, s, o;
1981
- const e = (o = (s = (i = this._theme.inbox) == null ? void 0 : i.list) == null ? void 0 : s.item) == null ? void 0 : o.menu;
1982
- e && e.enabled && (this._menu.setOptions(this._getMenuOptions()), this._menu.style.display = "block", this._menu.show(), this._timeElement.style.opacity = "0");
1983
- }
1984
- _hideMenu() {
1985
- var i, s, o;
1986
- const e = (o = (s = (i = this._theme.inbox) == null ? void 0 : i.list) == null ? void 0 : s.item) == null ? void 0 : o.menu;
1987
- e && e.enabled && (this._menu.hide(), this._menu.style.display = "none", this._timeElement.style.opacity = "1");
1988
- }
1989
- _getStyles() {
1990
- var i, s, o, n, c, d, l, p, m, g, f;
1991
- const e = (s = (i = this._theme.inbox) == null ? void 0 : i.list) == null ? void 0 : s.item;
1992
- return `
1993
- :host {
1994
- display: flex;
1995
- flex-direction: row;
1996
- align-items: flex-start;
1997
- justify-content: space-between;
1998
- border-bottom: ${(e == null ? void 0 : e.divider) ?? "1px solid red"};
1999
- font-family: inherit;
2000
- cursor: pointer;
2001
- transition: background-color 0.2s ease;
2002
- margin: 0;
2003
- width: 100%;
2004
- box-sizing: border-box;
2005
- padding: 12px 20px;
2006
- position: relative;
2007
- background-color: ${(e == null ? void 0 : e.backgroundColor) ?? "transparent"};
2008
- user-select: none;
2009
- -webkit-user-select: none;
2010
- -moz-user-select: none;
2011
- -ms-user-select: none;
2012
- touch-action: manipulation;
2013
- }
2014
-
2015
- /* ───────────────────────── Base hover / active ────────────────── */
2016
- @media (hover: hover) {
2017
- :host(:hover) {
2018
- background-color: ${(e == null ? void 0 : e.hoverBackgroundColor) ?? "red"};
2019
- }
2020
- }
2021
- :host(:active) {
2022
- background-color: ${(e == null ? void 0 : e.activeBackgroundColor) ?? "red"};
2023
- }
2024
-
2025
- /* ───────────────────────── Menu hover / active ────────────────── */
2026
- @media (hover: hover) {
2027
- :host(:hover):has(courier-list-item-menu:hover, courier-list-item-menu *:hover, courier-button:hover, courier-button *:hover) {
2028
- background-color: ${(e == null ? void 0 : e.backgroundColor) ?? "transparent"};
2029
- }
2030
- }
2031
- :host(:active):has(courier-list-item-menu:active, courier-list-item-menu *:active, courier-button:active, courier-button *:active) {
2032
- background-color: ${(e == null ? void 0 : e.backgroundColor) ?? "transparent"};
2033
- }
2034
-
2035
- :host(:last-child) {
2036
- border-bottom: none;
2037
- }
2038
-
2039
- .unread-indicator {
2040
- position: absolute;
2041
- top: 28px;
2042
- left: 6px;
2043
- width: 8px;
2044
- height: 8px;
2045
- border-radius: 50%;
2046
- background-color: ${(e == null ? void 0 : e.unreadIndicatorColor) ?? "red"};
2047
- display: none;
2048
- }
2049
-
2050
- :host(.unread) .unread-indicator {
2051
- display: block;
2052
- }
2053
-
2054
- .content-container {
2055
- flex: 1;
2056
- display: flex;
2057
- flex-direction: column;
2058
- margin-right: 12px;
2059
- }
2060
-
2061
- p {
2062
- margin: 0;
2063
- overflow-wrap: break-word;
2064
- word-break: break-word;
2065
- hyphens: auto;
2066
- line-height: 1.4;
2067
- user-select: none;
2068
- -webkit-user-select: none;
2069
- -moz-user-select: none;
2070
- -ms-user-select: none;
2071
- text-align: left;
2072
- }
2073
-
2074
- p[part='title'] {
2075
- font-family: ${((o = e == null ? void 0 : e.title) == null ? void 0 : o.family) ?? "inherit"};
2076
- font-size: ${((n = e == null ? void 0 : e.title) == null ? void 0 : n.size) ?? "14px"};
2077
- color: ${((c = e == null ? void 0 : e.title) == null ? void 0 : c.color) ?? "red"};
2078
- margin-bottom: 4px;
2079
- }
2080
-
2081
- p[part='subtitle'] {
2082
- font-family: ${((d = e == null ? void 0 : e.subtitle) == null ? void 0 : d.family) ?? "inherit"};
2083
- font-size: ${((l = e == null ? void 0 : e.subtitle) == null ? void 0 : l.size) ?? "14px"};
2084
- color: ${((p = e == null ? void 0 : e.subtitle) == null ? void 0 : p.color) ?? "red"};
2085
- }
2086
-
2087
- p[part='time'] {
2088
- font-family: ${((m = e == null ? void 0 : e.time) == null ? void 0 : m.family) ?? "inherit"};
2089
- font-size: ${((g = e == null ? void 0 : e.time) == null ? void 0 : g.size) ?? "14px"};
2090
- color: ${((f = e == null ? void 0 : e.time) == null ? void 0 : f.color) ?? "red"};
2091
- text-align: right;
2092
- white-space: nowrap;
2093
- }
2094
-
2095
- courier-list-item-menu {
2096
- z-index: 1;
2097
- position: absolute;
2098
- top: 8px;
2099
- right: 8px;
2100
- display: none; /* becomes block while visible */
2101
- }
2102
-
2103
- .actions-container {
2104
- display: flex;
2105
- margin-top: 10px;
2106
- flex-wrap: wrap;
2107
- flex-direction: row;
2108
- align-items: center;
2109
- gap: 8px;
2110
- display: none;
2111
- }
2112
-
2113
- `;
2114
- }
2115
- _refreshStyles() {
2116
- this._style.textContent = this._getStyles();
2117
- }
2118
- // Lifecycle hooks
2119
- connectedCallback() {
2120
- var s, o;
2121
- const e = this.getAttribute("message"), i = this.getAttribute("feed-type");
2122
- if (i && (this._feedType = i), e)
2123
- try {
2124
- this._message = JSON.parse(e), this._updateContent();
2125
- } catch (n) {
2126
- (o = (s = v.shared.client) == null ? void 0 : s.options.logger) == null || o.error("CourierListItem – failed to parse message:", n);
2127
- }
2128
- }
2129
- // Public API
2130
- setMessage(e, i) {
2131
- this._message = e, this._feedType = i, this._updateContent();
2132
- }
2133
- setOnItemClick(e) {
2134
- this.onItemClick = e;
2135
- }
2136
- setOnItemActionClick(e) {
2137
- this.onItemActionClick = e;
2138
- }
2139
- setOnItemLongPress(e) {
2140
- this.onItemLongPress = e;
2141
- }
2142
- // Content rendering
2143
- _updateContent() {
2144
- var s, o, n, c, d, l;
2145
- if (!this._message) {
2146
- this._titleElement.textContent = "", this._subtitleElement.textContent = "";
2147
- return;
2148
- }
2149
- this.classList.toggle("unread", !this._message.read && this._feedType !== "archive"), this._titleElement.textContent = this._message.title || "Untitled Message", this._subtitleElement.textContent = this._message.preview || this._message.body || "", this._timeElement.textContent = ln(this._message), this._menu.setOptions(this._getMenuOptions());
2150
- const e = ((s = this._message) == null ? void 0 : s.actions) && this._message.actions.length > 0;
2151
- this._actionsContainer.style.display = e ? "flex" : "none";
2152
- const i = (c = (n = (o = this._theme.inbox) == null ? void 0 : o.list) == null ? void 0 : n.item) == null ? void 0 : c.actions;
2153
- (l = (d = this._message) == null ? void 0 : d.actions) == null || l.forEach((p) => {
2154
- var g, f, _, b;
2155
- const m = new Re({
2156
- text: p.content,
2157
- variant: "secondary",
2158
- backgroundColor: i == null ? void 0 : i.backgroundColor,
2159
- hoverBackgroundColor: i == null ? void 0 : i.hoverBackgroundColor,
2160
- activeBackgroundColor: i == null ? void 0 : i.activeBackgroundColor,
2161
- border: i == null ? void 0 : i.border,
2162
- borderRadius: i == null ? void 0 : i.borderRadius,
2163
- shadow: i == null ? void 0 : i.shadow,
2164
- fontFamily: (g = i == null ? void 0 : i.font) == null ? void 0 : g.family,
2165
- fontSize: (f = i == null ? void 0 : i.font) == null ? void 0 : f.size,
2166
- fontWeight: (_ = i == null ? void 0 : i.font) == null ? void 0 : _.weight,
2167
- textColor: (b = i == null ? void 0 : i.font) == null ? void 0 : b.color,
2168
- onClick: () => {
2169
- this._message && this.onItemActionClick && this.onItemActionClick(this._message, p);
2170
- }
2171
- });
2172
- this._actionsContainer.appendChild(m);
2173
- });
2174
- }
2175
- }
2176
- customElements.get("courier-list-item") || customElements.define("courier-list-item", Ao);
2177
- class Po extends HTMLElement {
2178
- constructor(e, i) {
2179
- super();
2180
- // Shadow root
2181
- a(this, "_shadow");
2182
- this._shadow = this.attachShadow({ mode: "open" });
2183
- const s = document.createElement("style");
2184
- s.textContent = this.getStyles(i), this._shadow.appendChild(s);
2185
- const o = new Le(e, 35), n = new Le(e, 100), c = new Le(e, 82);
2186
- this._shadow.appendChild(o), this._shadow.appendChild(n), this._shadow.appendChild(c);
2187
- }
2188
- getStyles(e) {
2189
- return `
2190
- :host {
2191
- display: flex;
2192
- flex-direction: column;
2193
- gap: 12px;
2194
- padding: 12px;
2195
- width: 100%;
2196
- box-sizing: border-box;
2197
- opacity: ${e};
2198
- }
2199
- `;
2200
- }
2201
- }
2202
- customElements.get("courier-inbox-skeleton-list-item") || customElements.define("courier-inbox-skeleton-list-item", Po);
2203
- class Le extends HTMLElement {
2204
- constructor(e, i) {
2205
- super();
2206
- a(this, "_shadow");
2207
- this._shadow = this.attachShadow({ mode: "open" });
2208
- const s = document.createElement("style");
2209
- s.textContent = this.getStyles(e, i), this._shadow.appendChild(s);
2210
- const o = document.createElement("div");
2211
- o.className = "skeleton-item", this._shadow.appendChild(o);
2212
- }
2213
- getStyles(e, i) {
2214
- var m, g, f, _, b, C, k, w, S, I, E, M;
2215
- const s = ((f = (g = (m = e.inbox) == null ? void 0 : m.loading) == null ? void 0 : g.animation) == null ? void 0 : f.barColor) ?? "#000", o = s.length === 4 ? `#${s[1]}${s[1]}${s[2]}${s[2]}${s[3]}${s[3]}` : s, n = parseInt(o.slice(1, 3), 16), c = parseInt(o.slice(3, 5), 16), d = parseInt(o.slice(5, 7), 16), l = `rgba(${n}, ${c}, ${d}, 0.8)`, p = `rgba(${n}, ${c}, ${d}, 0.4)`;
2216
- return `
2217
- :host {
2218
- display: flex;
2219
- height: 100%;
2220
- width: ${i}%;
2221
- align-items: flex-start;
2222
- justify-content: flex-start;
2223
- }
2224
-
2225
- .skeleton-item {
2226
- height: ${((C = (b = (_ = e.inbox) == null ? void 0 : _.loading) == null ? void 0 : b.animation) == null ? void 0 : C.barHeight) ?? "14px"};
2227
- width: 100%;
2228
- background: linear-gradient(
2229
- 90deg,
2230
- ${l} 25%,
2231
- ${p} 50%,
2232
- ${l} 75%
2233
- );
2234
- background-size: 200% 100%;
2235
- animation: shimmer ${((S = (w = (k = e.inbox) == null ? void 0 : k.loading) == null ? void 0 : w.animation) == null ? void 0 : S.duration) ?? "2s"} ease-in-out infinite;
2236
- border-radius: ${((M = (E = (I = e.inbox) == null ? void 0 : I.loading) == null ? void 0 : E.animation) == null ? void 0 : M.barBorderRadius) ?? "14px"};
2237
- }
2238
-
2239
- @keyframes shimmer {
2240
- 0% {
2241
- background-position: 200% 0;
2242
- }
2243
- 100% {
2244
- background-position: -200% 0;
2245
- }
2246
- }
2247
- `;
2248
- }
2249
- }
2250
- customElements.get("courier-skeleton-animated-row") || customElements.define("courier-skeleton-animated-row", Le);
2251
- class Ne extends De {
2252
- constructor(e) {
2253
- super();
2254
- a(this, "_theme");
2255
- this._theme = e;
2256
- }
2257
- defaultElement() {
2258
- const e = document.createElement("div");
2259
- e.className = "list";
2260
- const i = document.createElement("style");
2261
- i.textContent = this.getStyles(), e.appendChild(i);
2262
- for (let s = 0; s < 3; s++) {
2263
- const o = new Po(this._theme, 1 / (s + 1));
2264
- e.appendChild(o);
2265
- }
2266
- return this.shadow.appendChild(e), e;
2267
- }
2268
- getStyles() {
2269
- var e, i;
2270
- return `
2271
- :host {
2272
- display: flex;
2273
- height: 100%;
2274
- width: 100%;
2275
- align-items: flex-start;
2276
- justify-content: flex-start;
2277
- overflow: hidden;
2278
- }
2279
-
2280
- .list {
2281
- display: flex;
2282
- flex-direction: column;
2283
- gap: 8px;
2284
- width: 100%;
2285
- overflow: hidden;
2286
- }
2287
-
2288
- .list > * {
2289
- border-bottom: ${((i = (e = this._theme.inbox) == null ? void 0 : e.loading) == null ? void 0 : i.divider) ?? "1px solid red"};
2290
- }
2291
-
2292
- .list > *:last-child {
2293
- border-bottom: none;
2294
- }
2295
- `;
2296
- }
2297
- }
2298
- customElements.get("courier-inbox-skeleton-list") || customElements.define("courier-inbox-skeleton-list", Ne);
2299
- class Bo extends HTMLElement {
2300
- constructor(e) {
2301
- super();
2302
- // Components
2303
- a(this, "skeletonLoadingList");
2304
- a(this, "observer");
2305
- a(this, "customItem");
2306
- // Handlers
2307
- a(this, "onPaginationTrigger");
2308
- this.onPaginationTrigger = e.onPaginationTrigger, this.customItem = e.customItem;
2309
- const i = this.attachShadow({ mode: "open" }), s = document.createElement("style");
2310
- if (s.textContent = this.getStyles(), i.appendChild(s), this.customItem)
2311
- i.appendChild(this.customItem);
2312
- else {
2313
- const o = document.createElement("div");
2314
- o.className = "skeleton-container", this.skeletonLoadingList = new Ne(e.theme), this.skeletonLoadingList.build(void 0), o.appendChild(this.skeletonLoadingList), i.appendChild(o);
2315
- }
2316
- this.observer = new IntersectionObserver((o) => {
2317
- o.forEach((n) => {
2318
- n.isIntersecting && this.onPaginationTrigger();
2319
- });
2320
- }), this.observer.observe(this);
2321
- }
2322
- getStyles() {
2323
- return `
2324
- :host {
2325
- padding: 0;
2326
- margin: 0;
2327
- box-sizing: border-box;
2328
- }
2329
-
2330
- .skeleton-container {
2331
- height: 150%;
2332
- }
2333
- `;
2334
- }
2335
- disconnectedCallback() {
2336
- this.observer.disconnect();
2337
- }
2338
- }
2339
- customElements.get("courier-inbox-pagination-list-item") || customElements.define("courier-inbox-pagination-list-item", Bo);
2340
- class Ro extends HTMLElement {
2341
- constructor(e) {
2342
- super();
2343
- // Theme
2344
- a(this, "_themeSubscription");
2345
- // State
2346
- a(this, "_messages", []);
2347
- a(this, "_feedType", "inbox");
2348
- a(this, "_isLoading", !0);
2349
- a(this, "_error", null);
2350
- a(this, "_canPaginate", !1);
2351
- // Callbacks
2352
- a(this, "_onMessageClick", null);
2353
- a(this, "_onMessageActionClick", null);
2354
- a(this, "_onMessageLongPress", null);
2355
- a(this, "_onRefresh");
2356
- // Factories
2357
- a(this, "_onPaginationTrigger");
2358
- a(this, "_listItemFactory");
2359
- a(this, "_paginationItemFactory");
2360
- a(this, "_loadingStateFactory");
2361
- a(this, "_emptyStateFactory");
2362
- a(this, "_errorStateFactory");
2363
- this._themeSubscription = e.themeManager.subscribe((o) => {
2364
- this.refreshTheme();
2365
- }), this._onRefresh = e.onRefresh, this._onPaginationTrigger = e.onPaginationTrigger, this._onMessageClick = e.onMessageClick, this._onMessageActionClick = e.onMessageActionClick, this._onMessageLongPress = e.onMessageLongPress;
2366
- const i = this.attachShadow({ mode: "open" }), s = document.createElement("style");
2367
- s.textContent = this.getStyles(), i.appendChild(s);
2368
- }
2369
- // Getters
2370
- get messages() {
2371
- return this._messages;
2372
- }
2373
- getStyles() {
2374
- var i;
2375
- const e = (i = this._themeSubscription.manager.getTheme().inbox) == null ? void 0 : i.list;
2376
- return `
2377
- :host {
2378
- flex: 1;
2379
- width: 100%;
2380
- background-color: ${(e == null ? void 0 : e.backgroundColor) ?? r.white[500]};
2381
- }
2382
-
2383
- ul {
2384
- list-style: none;
2385
- padding: 0;
2386
- margin: 0;
2387
- height: 100%;
2388
- }
2389
- `;
2390
- }
2391
- reset() {
2392
- var i, s;
2393
- for (; (i = this.shadowRoot) != null && i.firstChild; )
2394
- this.shadowRoot.removeChild(this.shadowRoot.firstChild);
2395
- const e = document.createElement("style");
2396
- e.textContent = this.getStyles(), (s = this.shadowRoot) == null || s.appendChild(e);
2397
- }
2398
- setDataSet(e) {
2399
- this._messages = [...e.messages], this._canPaginate = !!e.canPaginate, this._error = null, this._isLoading = !1, this.render();
2400
- }
2401
- addPage(e) {
2402
- this._messages = [...this._messages, ...e.messages], this._canPaginate = !!e.canPaginate, this._error = null, this._isLoading = !1, this.render();
2403
- }
2404
- addMessage(e, i = 0) {
2405
- this._messages.splice(i, 0, e), this.render();
2406
- }
2407
- removeMessage(e = 0) {
2408
- this._messages.splice(e, 1), this.render();
2409
- }
2410
- updateMessage(e, i = 0) {
2411
- this._messages[i] = e, this.render();
2412
- }
2413
- setFeedType(e) {
2414
- this._feedType = e, this._error = null, this._isLoading = !0, this.render();
2415
- }
2416
- setLoading(e) {
2417
- this._error = null, this._isLoading = e, this.render();
2418
- }
2419
- setError(e) {
2420
- this._error = e, this._isLoading = !1, this._messages = [], this.render();
2421
- }
2422
- setErrorNoClient() {
2423
- this.setError(new Error("No user signed in"));
2424
- }
2425
- handleRetry() {
2426
- this._onRefresh();
2427
- }
2428
- handleRefresh() {
2429
- this._onRefresh();
2430
- }
2431
- render() {
2432
- var s, o, n, c, d, l, p, m, g, f, _, b, C, k, w, S, I, E, M, L, R, D, y, A, F, H, O, z, U, N, q, V, j, X, Q, Y, ee, G, ae, he, ce, le, de, ue, pe, ge, me, be, _e, fe, xe, ve, Ce, ye, ke, we, Se, Ie;
2433
- this.reset();
2434
- const e = this._themeSubscription.manager.getTheme();
2435
- if (this._error) {
2436
- const u = (s = e.inbox) == null ? void 0 : s.error, B = new Be({
2437
- title: {
2438
- text: ((o = u == null ? void 0 : u.title) == null ? void 0 : o.text) ?? this._error.message,
2439
- textColor: (c = (n = u == null ? void 0 : u.title) == null ? void 0 : n.font) == null ? void 0 : c.color,
2440
- fontFamily: (l = (d = u == null ? void 0 : u.title) == null ? void 0 : d.font) == null ? void 0 : l.family,
2441
- fontSize: (m = (p = u == null ? void 0 : u.title) == null ? void 0 : p.font) == null ? void 0 : m.size,
2442
- fontWeight: (f = (g = u == null ? void 0 : u.title) == null ? void 0 : g.font) == null ? void 0 : f.weight
2443
- },
2444
- button: {
2445
- text: (_ = u == null ? void 0 : u.button) == null ? void 0 : _.text,
2446
- backgroundColor: (b = u == null ? void 0 : u.button) == null ? void 0 : b.backgroundColor,
2447
- hoverBackgroundColor: (C = u == null ? void 0 : u.button) == null ? void 0 : C.hoverBackgroundColor,
2448
- activeBackgroundColor: (k = u == null ? void 0 : u.button) == null ? void 0 : k.activeBackgroundColor,
2449
- textColor: (S = (w = u == null ? void 0 : u.button) == null ? void 0 : w.font) == null ? void 0 : S.color,
2450
- fontFamily: (E = (I = u == null ? void 0 : u.button) == null ? void 0 : I.font) == null ? void 0 : E.family,
2451
- fontSize: (L = (M = u == null ? void 0 : u.button) == null ? void 0 : M.font) == null ? void 0 : L.size,
2452
- fontWeight: (D = (R = u == null ? void 0 : u.button) == null ? void 0 : R.font) == null ? void 0 : D.weight,
2453
- shadow: (y = u == null ? void 0 : u.button) == null ? void 0 : y.shadow,
2454
- border: (A = u == null ? void 0 : u.button) == null ? void 0 : A.border,
2455
- borderRadius: (F = u == null ? void 0 : u.button) == null ? void 0 : F.borderRadius
2456
- }
2457
- });
2458
- B.build((H = this._errorStateFactory) == null ? void 0 : H.call(this, { feedType: this._feedType, error: this._error })), B.setButtonClickCallback(() => this.handleRetry()), (O = this.shadowRoot) == null || O.appendChild(B);
2459
- return;
2460
- }
2461
- if (this._isLoading) {
2462
- const u = new Ne(e);
2463
- u.build((z = this._loadingStateFactory) == null ? void 0 : z.call(this, { feedType: this._feedType })), (U = this.shadowRoot) == null || U.appendChild(u);
2464
- return;
2465
- }
2466
- if (this._messages.length === 0) {
2467
- const u = (N = e.inbox) == null ? void 0 : N.empty, B = new Be({
2468
- title: {
2469
- text: ((q = u == null ? void 0 : u.title) == null ? void 0 : q.text) ?? `No ${this._feedType} messages yet`,
2470
- textColor: (j = (V = u == null ? void 0 : u.title) == null ? void 0 : V.font) == null ? void 0 : j.color,
2471
- fontFamily: (Q = (X = u == null ? void 0 : u.title) == null ? void 0 : X.font) == null ? void 0 : Q.family,
2472
- fontSize: (ee = (Y = u == null ? void 0 : u.title) == null ? void 0 : Y.font) == null ? void 0 : ee.size,
2473
- fontWeight: (ae = (G = u == null ? void 0 : u.title) == null ? void 0 : G.font) == null ? void 0 : ae.weight
2474
- },
2475
- button: {
2476
- text: (he = u == null ? void 0 : u.button) == null ? void 0 : he.text,
2477
- backgroundColor: (ce = u == null ? void 0 : u.button) == null ? void 0 : ce.backgroundColor,
2478
- hoverBackgroundColor: (le = u == null ? void 0 : u.button) == null ? void 0 : le.hoverBackgroundColor,
2479
- activeBackgroundColor: (de = u == null ? void 0 : u.button) == null ? void 0 : de.activeBackgroundColor,
2480
- textColor: (pe = (ue = u == null ? void 0 : u.button) == null ? void 0 : ue.font) == null ? void 0 : pe.color,
2481
- fontFamily: (me = (ge = u == null ? void 0 : u.button) == null ? void 0 : ge.font) == null ? void 0 : me.family,
2482
- fontSize: (_e = (be = u == null ? void 0 : u.button) == null ? void 0 : be.font) == null ? void 0 : _e.size,
2483
- fontWeight: (xe = (fe = u == null ? void 0 : u.button) == null ? void 0 : fe.font) == null ? void 0 : xe.weight,
2484
- shadow: (ve = u == null ? void 0 : u.button) == null ? void 0 : ve.shadow,
2485
- border: (Ce = u == null ? void 0 : u.button) == null ? void 0 : Ce.border,
2486
- borderRadius: (ye = u == null ? void 0 : u.button) == null ? void 0 : ye.borderRadius
2487
- }
2488
- });
2489
- B.build((ke = this._emptyStateFactory) == null ? void 0 : ke.call(this, { feedType: this._feedType })), B.setButtonClickCallback(() => this.handleRefresh()), (we = this.shadowRoot) == null || we.appendChild(B);
2490
- return;
2491
- }
2492
- const i = document.createElement("ul");
2493
- if ((Se = this.shadowRoot) == null || Se.appendChild(i), this._messages.forEach((u, B) => {
2494
- if (this._listItemFactory) {
2495
- i.appendChild(this._listItemFactory({ message: u, index: B }));
2496
- return;
2497
- }
2498
- const te = new Ao(e);
2499
- te.setMessage(u, this._feedType), te.setOnItemClick((ie) => {
2500
- var J;
2501
- return (J = this._onMessageClick) == null ? void 0 : J.call(this, ie, B);
2502
- }), te.setOnItemActionClick((ie, J) => {
2503
- var Ee;
2504
- return (Ee = this._onMessageActionClick) == null ? void 0 : Ee.call(this, ie, J, B);
2505
- }), te.setOnItemLongPress((ie) => {
2506
- var J;
2507
- return (J = this._onMessageLongPress) == null ? void 0 : J.call(this, ie, B);
2508
- }), i.appendChild(te);
2509
- }), this._canPaginate) {
2510
- const u = new Bo({
2511
- theme: e,
2512
- customItem: (Ie = this._paginationItemFactory) == null ? void 0 : Ie.call(this, { feedType: this._feedType }),
2513
- onPaginationTrigger: () => {
2514
- var B;
2515
- return (B = this._onPaginationTrigger) == null ? void 0 : B.call(this, this._feedType);
2516
- }
2517
- });
2518
- i.appendChild(u);
2519
- }
2520
- }
2521
- // Factories
2522
- setLoadingStateFactory(e) {
2523
- this._loadingStateFactory = e, this.render();
2524
- }
2525
- setEmptyStateFactory(e) {
2526
- this._emptyStateFactory = e, this.render();
2527
- }
2528
- setErrorStateFactory(e) {
2529
- this._errorStateFactory = e, this.render();
2530
- }
2531
- setListItemFactory(e) {
2532
- this._listItemFactory = e, this.render();
2533
- }
2534
- setPaginationItemFactory(e) {
2535
- this._paginationItemFactory = e, this.render();
2536
- }
2537
- refreshTheme() {
2538
- this.render();
2539
- }
2540
- // Disconnect the theme subscription
2541
- disconnectedCallback() {
2542
- this._themeSubscription.unsubscribe();
2543
- }
2544
- }
2545
- customElements.get("courier-inbox-list") || customElements.define("courier-inbox-list", Ro);
2546
- class Do extends HTMLElement {
2547
- constructor(e) {
2548
- super();
2549
- // State
2550
- a(this, "_option");
2551
- a(this, "_isSelected");
2552
- // Components
2553
- a(this, "_content");
2554
- a(this, "_itemIcon");
2555
- a(this, "_title");
2556
- a(this, "_selectionIcon");
2557
- a(this, "_style");
2558
- // Theme
2559
- a(this, "_themeManager");
2560
- this._option = e.option, this._isSelected = e.isSelected, this._themeManager = e.themeManager;
2561
- const i = this.attachShadow({ mode: "open" });
2562
- this._style = document.createElement("style"), this._content = document.createElement("div"), this._content.className = "menu-item", this._itemIcon = new ne(this._option.icon.svg ?? x.inbox), this._itemIcon.setAttribute("size", "16"), this._title = document.createElement("p"), this._title.textContent = this._option.text;
2563
- const s = document.createElement("div");
2564
- s.className = "spacer", this._selectionIcon = new ne(x.check), this._content.appendChild(this._itemIcon), this._content.appendChild(this._title), this._content.appendChild(s), e.selectable && this._content.appendChild(this._selectionIcon), i.appendChild(this._style), i.appendChild(this._content), this._selectionIcon.style.display = this._isSelected ? "block" : "none", this.refreshTheme();
2565
- }
2566
- getStyles() {
2567
- var i, s, o, n, c, d, l, p, m, g, f, _, b, C, k, w, S, I, E, M, L, R, D, y, A, F, H, O, z, U, N, q, V, j;
2568
- const e = this._themeManager.getTheme();
2569
- return `
2570
- :host {
2571
- display: flex;
2572
- flex-direction: row;
2573
- padding: 6px 12px;
2574
- cursor: pointer;
2575
- }
2576
-
2577
- :host(:hover) {
2578
- background-color: ${((c = (n = (o = (s = (i = e.inbox) == null ? void 0 : i.header) == null ? void 0 : s.menus) == null ? void 0 : o.popup) == null ? void 0 : n.list) == null ? void 0 : c.hoverBackgroundColor) ?? "red"};
2579
- }
2580
-
2581
- :host(:active) {
2582
- background-color: ${((g = (m = (p = (l = (d = e.inbox) == null ? void 0 : d.header) == null ? void 0 : l.menus) == null ? void 0 : p.popup) == null ? void 0 : m.list) == null ? void 0 : g.activeBackgroundColor) ?? "red"};
2583
- }
2584
-
2585
- .menu-item {
2586
- display: flex;
2587
- align-items: center;
2588
- width: 100%;
2589
- gap: 12px;
2590
- }
2591
-
2592
- .spacer {
2593
- flex: 1;
2594
- }
2595
-
2596
- p {
2597
- margin: 0;
2598
- font-family: ${((w = (k = (C = (b = (_ = (f = e.inbox) == null ? void 0 : f.header) == null ? void 0 : _.menus) == null ? void 0 : b.popup) == null ? void 0 : C.list) == null ? void 0 : k.font) == null ? void 0 : w.family) ?? "inherit"};
2599
- font-weight: ${((R = (L = (M = (E = (I = (S = e.inbox) == null ? void 0 : S.header) == null ? void 0 : I.menus) == null ? void 0 : E.popup) == null ? void 0 : M.list) == null ? void 0 : L.font) == null ? void 0 : R.weight) ?? "inherit"};
2600
- font-size: ${((O = (H = (F = (A = (y = (D = e.inbox) == null ? void 0 : D.header) == null ? void 0 : y.menus) == null ? void 0 : A.popup) == null ? void 0 : F.list) == null ? void 0 : H.font) == null ? void 0 : O.size) ?? "14px"};
2601
- color: ${((j = (V = (q = (N = (U = (z = e.inbox) == null ? void 0 : z.header) == null ? void 0 : U.menus) == null ? void 0 : N.popup) == null ? void 0 : q.list) == null ? void 0 : V.font) == null ? void 0 : j.color) ?? "red"};
2602
- white-space: nowrap;
2603
- }
2604
-
2605
- .check-icon {
2606
- display: none;
2607
- }
2608
- `;
2609
- }
2610
- refreshTheme() {
2611
- var e, i, s, o;
2612
- this._style.textContent = this.getStyles(), this._selectionIcon.updateColor(((e = this._option.selectionIcon) == null ? void 0 : e.color) ?? "red"), this._selectionIcon.updateSVG(((i = this._option.selectionIcon) == null ? void 0 : i.svg) ?? x.check), this._title.textContent = this._option.text ?? "Missing Text", this._itemIcon.updateColor(((s = this._option.icon) == null ? void 0 : s.color) ?? "red"), this._itemIcon.updateSVG(((o = this._option.icon) == null ? void 0 : o.svg) ?? x.inbox);
2613
- }
2614
- }
2615
- customElements.get("courier-inbox-filter-menu-item") || customElements.define("courier-inbox-filter-menu-item", Do);
2616
- class He extends HTMLElement {
2617
- constructor(e, i, s, o, n) {
2618
- super();
2619
- // Theme
2620
- a(this, "_themeSubscription");
2621
- // State
2622
- a(this, "_type");
2623
- a(this, "_selectedIndex", 0);
2624
- a(this, "_options");
2625
- a(this, "_selectable");
2626
- a(this, "_onMenuOpen");
2627
- // Components
2628
- a(this, "_menuButton");
2629
- a(this, "_menu");
2630
- a(this, "_style");
2631
- this._type = i, this._selectable = s, this._options = o, this._selectedIndex = 0, this._onMenuOpen = n;
2632
- const c = this.attachShadow({ mode: "open" });
2633
- this._menuButton = new $e(i === "filters" ? x.filter : x.overflow), this._menu = document.createElement("div"), this._menu.className = `menu ${i}`, this._style = document.createElement("style"), c.appendChild(this._style), c.appendChild(this._menuButton), c.appendChild(this._menu), this._menuButton.addEventListener("click", this.toggleMenu.bind(this)), document.addEventListener("click", this.handleOutsideClick.bind(this)), this._themeSubscription = e.subscribe((d) => {
2634
- this.refreshTheme();
2635
- }), this.refreshTheme();
2636
- }
2637
- getStyles() {
2638
- var i, s, o, n, c, d, l, p, m, g, f, _, b, C, k, w, S, I, E, M, L;
2639
- const e = this._themeSubscription.manager.getTheme();
2640
- return `
2641
- :host {
2642
- position: relative;
2643
- display: inline-block;
2644
- }
2645
-
2646
- .menu {
2647
- display: none;
2648
- position: absolute;
2649
- top: 42px;
2650
- right: -6px;
2651
- border-radius: ${((n = (o = (s = (i = e.inbox) == null ? void 0 : i.header) == null ? void 0 : s.menus) == null ? void 0 : o.popup) == null ? void 0 : n.borderRadius) ?? "6px"};
2652
- border: ${((p = (l = (d = (c = e.inbox) == null ? void 0 : c.header) == null ? void 0 : d.menus) == null ? void 0 : l.popup) == null ? void 0 : p.border) ?? "1px solid red"};
2653
- background: ${((_ = (f = (g = (m = e.inbox) == null ? void 0 : m.header) == null ? void 0 : g.menus) == null ? void 0 : f.popup) == null ? void 0 : _.backgroundColor) ?? "red"};
2654
- box-shadow: ${((w = (k = (C = (b = e.inbox) == null ? void 0 : b.header) == null ? void 0 : C.menus) == null ? void 0 : k.popup) == null ? void 0 : w.shadow) ?? "0 4px 12px 0 red"};
2655
- z-index: 1000;
2656
- min-width: 200px;
2657
- overflow: hidden;
2658
- padding: 4px 0;
2659
- }
2660
-
2661
- courier-inbox-filter-menu-item {
2662
- border-bottom: ${((L = (M = (E = (I = (S = e.inbox) == null ? void 0 : S.header) == null ? void 0 : I.menus) == null ? void 0 : E.popup) == null ? void 0 : M.list) == null ? void 0 : L.divider) ?? "none"};
2663
- }
2664
-
2665
- courier-inbox-filter-menu-item:last-child {
2666
- border-bottom: none;
2667
- }
2668
- `;
2669
- }
2670
- refreshTheme() {
2671
- var c, d, l, p, m, g;
2672
- this._style.textContent = this.getStyles();
2673
- const i = (d = (c = this._themeSubscription.manager.getTheme().inbox) == null ? void 0 : c.header) == null ? void 0 : d.menus, s = this._type === "filters", o = s ? (l = i == null ? void 0 : i.filters) == null ? void 0 : l.button : (p = i == null ? void 0 : i.actions) == null ? void 0 : p.button, n = s ? x.filter : x.overflow;
2674
- this._menuButton.updateIconSVG(((m = o == null ? void 0 : o.icon) == null ? void 0 : m.svg) ?? n), this._menuButton.updateIconColor(((g = o == null ? void 0 : o.icon) == null ? void 0 : g.color) ?? "red"), this._menuButton.updateBackgroundColor((o == null ? void 0 : o.backgroundColor) ?? "transparent"), this._menuButton.updateHoverBackgroundColor((o == null ? void 0 : o.hoverBackgroundColor) ?? "red"), this._menuButton.updateActiveBackgroundColor((o == null ? void 0 : o.activeBackgroundColor) ?? "red"), this.refreshMenuItems();
2675
- }
2676
- setOptions(e) {
2677
- this._options = e, this.refreshMenuItems();
2678
- }
2679
- refreshMenuItems() {
2680
- this._menu.innerHTML = "", this._options.forEach((e, i) => {
2681
- const s = new Do({
2682
- option: e,
2683
- selectable: this._selectable,
2684
- isSelected: this._selectedIndex === i,
2685
- themeManager: this._themeSubscription.manager
2686
- });
2687
- s.addEventListener("click", () => {
2688
- this._selectedIndex = i, e.onClick(e), this.refreshMenuItems(), this.closeMenu();
2689
- }), this._menu.appendChild(s);
2690
- });
2691
- }
2692
- toggleMenu(e) {
2693
- e.stopPropagation();
2694
- const i = this._menu.style.display !== "block";
2695
- this._menu.style.display = i ? "block" : "none", i && this._onMenuOpen();
2696
- }
2697
- handleOutsideClick(e) {
2698
- this.contains(e.target) || this.closeMenu();
2699
- }
2700
- closeMenu() {
2701
- this._menu.style.display = "none";
2702
- }
2703
- selectOption(e) {
2704
- this._selectedIndex = this._options.findIndex((i) => i.id === e.id), this.refreshMenuItems();
2705
- }
2706
- disconnectedCallback() {
2707
- this._themeSubscription.unsubscribe();
2708
- }
2709
- }
2710
- customElements.get("courier-inbox-option-menu") || customElements.define("courier-inbox-option-menu", He);
2711
- class qe extends HTMLElement {
2712
- constructor(e) {
2713
- super();
2714
- // Theme
2715
- a(this, "_themeSubscription");
2716
- // State
2717
- a(this, "_location");
2718
- a(this, "_count", 0);
2719
- // Elements
2720
- a(this, "_badge");
2721
- a(this, "_style");
2722
- this._location = e.location, this._themeSubscription = e.themeBus.subscribe((s) => {
2723
- this.refreshTheme(this._location);
2724
- });
2725
- const i = this.attachShadow({ mode: "open" });
2726
- this._badge = document.createElement("span"), this._badge.className = "unread-badge", this._style = document.createElement("style"), this._style.textContent = this.getStyles(this._location), i.appendChild(this._style), i.appendChild(this._badge);
2727
- }
2728
- getStyles(e) {
2729
- var l, p, m, g, f, _, b;
2730
- const i = this._themeSubscription.manager.getTheme(), s = e === "button" ? (p = (l = i.popup) == null ? void 0 : l.button) == null ? void 0 : p.unreadIndicator : (f = (g = (m = i.inbox) == null ? void 0 : m.header) == null ? void 0 : g.filters) == null ? void 0 : f.unreadIndicator, o = s == null ? void 0 : s.backgroundColor, n = s == null ? void 0 : s.borderRadius, c = (_ = s == null ? void 0 : s.font) == null ? void 0 : _.color, d = (b = s == null ? void 0 : s.font) == null ? void 0 : b.size;
2731
- return `
2732
- :host {
2733
- display: inline-block;
2734
- }
2735
-
2736
- .unread-badge {
2737
- background-color: ${o};
2738
- color: ${c};
2739
- border-radius: ${n};
2740
- padding: 4px 8px;
2741
- font-size: ${d};
2742
- text-align: center;
2743
- display: none;
2744
- pointer-events: none;
2745
- }
2746
- `;
2747
- }
2748
- setCount(e) {
2749
- this._count = e, this.updateBadge();
2750
- }
2751
- refreshTheme(e) {
2752
- this._location = e, this.updateBadge();
2753
- }
2754
- updateBadge() {
2755
- this._style.textContent = this.getStyles(this._location), this._count > 0 ? (this._badge.textContent = this._count.toString(), this._badge.style.display = "block") : this._badge.style.display = "none";
2756
- }
2757
- disconnectedCallback() {
2758
- this._themeSubscription.unsubscribe();
2759
- }
2760
- }
2761
- customElements.get("courier-unread-count-badge") || customElements.define("courier-unread-count-badge", qe);
2762
- class Fo extends HTMLElement {
2763
- constructor(e, i) {
2764
- super();
2765
- // Theme
2766
- a(this, "_themeSubscription");
2767
- // State
2768
- a(this, "_option");
2769
- a(this, "_feedType");
2770
- // Components
2771
- a(this, "_titleElement");
2772
- a(this, "_iconElement");
2773
- a(this, "_unreadBadge");
2774
- a(this, "_container");
2775
- a(this, "_style");
2776
- this._option = i;
2777
- const s = this.attachShadow({ mode: "open" });
2778
- this._style = document.createElement("style"), this._container = document.createElement("div"), this._container.className = "title-section", this._iconElement = new ne(void 0, this._option.icon.svg), this._titleElement = document.createElement("h2"), this._unreadBadge = new qe({
2779
- themeBus: e,
2780
- location: "header"
2781
- }), this._container.appendChild(this._iconElement), this._container.appendChild(this._titleElement), this._container.appendChild(this._unreadBadge), s.appendChild(this._style), s.appendChild(this._container), this._themeSubscription = e.subscribe((o) => {
2782
- this.refreshTheme(this._feedType ?? "inbox");
2783
- }), this.refreshTheme(this._feedType ?? "inbox");
2784
- }
2785
- getStyles() {
2786
- var i, s, o, n, c, d, l, p, m, g, f, _, b, C, k, w;
2787
- const e = this._themeSubscription.manager.getTheme();
2788
- return `
2789
- .title-section {
2790
- display: flex;
2791
- align-items: center;
2792
- gap: 8px;
2793
- position: relative;
2794
- }
2795
-
2796
- courier-icon {
2797
- display: flex;
2798
- align-items: center;
2799
- }
2800
-
2801
- h2 {
2802
- margin: 0;
2803
- font-family: ${((n = (o = (s = (i = e.inbox) == null ? void 0 : i.header) == null ? void 0 : s.filters) == null ? void 0 : o.font) == null ? void 0 : n.family) ?? "inherit"};
2804
- font-size: ${((p = (l = (d = (c = e.inbox) == null ? void 0 : c.header) == null ? void 0 : d.filters) == null ? void 0 : l.font) == null ? void 0 : p.size) ?? "18px"};
2805
- font-weight: ${((_ = (f = (g = (m = e.inbox) == null ? void 0 : m.header) == null ? void 0 : g.filters) == null ? void 0 : f.font) == null ? void 0 : _.weight) ?? "500"};
2806
- color: ${((w = (k = (C = (b = e.inbox) == null ? void 0 : b.header) == null ? void 0 : C.filters) == null ? void 0 : k.font) == null ? void 0 : w.color) ?? "red"};
2807
- }
2808
-
2809
- courier-unread-count-badge {
2810
- margin-left: 4px;
2811
- }
2812
- `;
2813
- }
2814
- refreshTheme(e) {
2815
- this._feedType = e, this._style.textContent = this.getStyles(), this._unreadBadge.refreshTheme("header"), this.updateFilter();
2816
- }
2817
- updateSelectedOption(e, i, s) {
2818
- this._option = e, this._feedType = i, this._unreadBadge.setCount(s), this.updateFilter();
2819
- }
2820
- updateFilter() {
2821
- var i, s, o, n, c, d, l, p, m, g, f, _, b, C, k, w, S, I, E, M, L, R, D, y, A, F, H, O;
2822
- const e = this._themeSubscription.manager.getTheme();
2823
- switch (this._feedType) {
2824
- case "inbox":
2825
- this._titleElement.textContent = ((n = (o = (s = (i = e.inbox) == null ? void 0 : i.header) == null ? void 0 : s.filters) == null ? void 0 : o.inbox) == null ? void 0 : n.text) ?? "Inbox", this._iconElement.updateSVG(((m = (p = (l = (d = (c = e.inbox) == null ? void 0 : c.header) == null ? void 0 : d.filters) == null ? void 0 : l.inbox) == null ? void 0 : p.icon) == null ? void 0 : m.svg) ?? x.inbox), this._iconElement.updateColor(((C = (b = (_ = (f = (g = e.inbox) == null ? void 0 : g.header) == null ? void 0 : f.filters) == null ? void 0 : _.inbox) == null ? void 0 : b.icon) == null ? void 0 : C.color) ?? "red");
2826
- break;
2827
- case "archive":
2828
- this._titleElement.textContent = ((I = (S = (w = (k = e.inbox) == null ? void 0 : k.header) == null ? void 0 : w.filters) == null ? void 0 : S.archive) == null ? void 0 : I.text) ?? "Archive", this._iconElement.updateSVG(((D = (R = (L = (M = (E = e.inbox) == null ? void 0 : E.header) == null ? void 0 : M.filters) == null ? void 0 : L.archive) == null ? void 0 : R.icon) == null ? void 0 : D.svg) ?? x.archive), this._iconElement.updateColor(((O = (H = (F = (A = (y = e.inbox) == null ? void 0 : y.header) == null ? void 0 : A.filters) == null ? void 0 : F.archive) == null ? void 0 : H.icon) == null ? void 0 : O.color) ?? "red");
2829
- break;
2830
- }
2831
- }
2832
- // Disconnect the theme subscription
2833
- disconnectedCallback() {
2834
- this._themeSubscription.unsubscribe();
2835
- }
2836
- }
2837
- customElements.get("courier-inbox-header-title") || customElements.define("courier-inbox-header-title", Fo);
2838
- class Ho extends De {
2839
- constructor(e) {
2840
- super();
2841
- // Theme
2842
- a(this, "_themeSubscription");
2843
- // State
2844
- a(this, "_feedType", "inbox");
2845
- a(this, "_unreadCount", 0);
2846
- // Components
2847
- a(this, "_titleSection");
2848
- a(this, "_filterMenu");
2849
- a(this, "_actionMenu");
2850
- a(this, "_style");
2851
- // Callbacks
2852
- a(this, "_onFeedTypeChange");
2853
- this._themeSubscription = e.themeManager.subscribe((i) => {
2854
- this.refreshTheme();
2855
- }), this._onFeedTypeChange = e.onFeedTypeChange;
2856
- }
2857
- // Menu options
2858
- getFilterOptions() {
2859
- var s, o, n, c, d, l, p, m, g, f, _, b, C, k, w, S, I, E, M, L, R, D, y, A, F, H, O, z, U, N, q, V, j, X, Q, Y, ee;
2860
- const e = this._themeSubscription.manager.getTheme(), i = (n = (o = (s = e.inbox) == null ? void 0 : s.header) == null ? void 0 : o.menus) == null ? void 0 : n.filters;
2861
- return [
2862
- {
2863
- id: "inbox",
2864
- text: ((c = i == null ? void 0 : i.inbox) == null ? void 0 : c.text) ?? "Inbox",
2865
- icon: {
2866
- color: ((l = (d = i == null ? void 0 : i.inbox) == null ? void 0 : d.icon) == null ? void 0 : l.color) ?? "red",
2867
- svg: ((m = (p = i == null ? void 0 : i.inbox) == null ? void 0 : p.icon) == null ? void 0 : m.svg) ?? x.inbox
2868
- },
2869
- selectionIcon: {
2870
- color: ((k = (C = (b = (_ = (f = (g = e.inbox) == null ? void 0 : g.header) == null ? void 0 : f.menus) == null ? void 0 : _.popup) == null ? void 0 : b.list) == null ? void 0 : C.selectionIcon) == null ? void 0 : k.color) ?? "red",
2871
- svg: ((L = (M = (E = (I = (S = (w = e.inbox) == null ? void 0 : w.header) == null ? void 0 : S.menus) == null ? void 0 : I.popup) == null ? void 0 : E.list) == null ? void 0 : M.selectionIcon) == null ? void 0 : L.svg) ?? x.check
2872
- },
2873
- onClick: (G) => {
2874
- this.handleOptionMenuItemClick("inbox", G);
2875
- }
2876
- },
2877
- {
2878
- id: "archive",
2879
- text: ((R = i == null ? void 0 : i.archive) == null ? void 0 : R.text) ?? "Archive",
2880
- icon: {
2881
- color: ((y = (D = i == null ? void 0 : i.archive) == null ? void 0 : D.icon) == null ? void 0 : y.color) ?? "red",
2882
- svg: ((F = (A = i == null ? void 0 : i.archive) == null ? void 0 : A.icon) == null ? void 0 : F.svg) ?? x.archive
2883
- },
2884
- selectionIcon: {
2885
- color: ((q = (N = (U = (z = (O = (H = e.inbox) == null ? void 0 : H.header) == null ? void 0 : O.menus) == null ? void 0 : z.popup) == null ? void 0 : U.list) == null ? void 0 : N.selectionIcon) == null ? void 0 : q.color) ?? "red",
2886
- svg: ((ee = (Y = (Q = (X = (j = (V = e.inbox) == null ? void 0 : V.header) == null ? void 0 : j.menus) == null ? void 0 : X.popup) == null ? void 0 : Q.list) == null ? void 0 : Y.selectionIcon) == null ? void 0 : ee.svg) ?? x.check
2887
- },
2888
- onClick: (G) => {
2889
- this.handleOptionMenuItemClick("archive", G);
2890
- }
2891
- }
2892
- ];
2893
- }
2894
- getActionOptions() {
2895
- var s, o, n, c, d, l, p, m, g, f, _, b, C, k, w, S, I, E;
2896
- const i = (n = (o = (s = this._themeSubscription.manager.getTheme().inbox) == null ? void 0 : s.header) == null ? void 0 : o.menus) == null ? void 0 : n.actions;
2897
- return [
2898
- {
2899
- id: "markAllRead",
2900
- text: ((c = i == null ? void 0 : i.markAllRead) == null ? void 0 : c.text) ?? "Mark All as Read",
2901
- icon: {
2902
- color: ((l = (d = i == null ? void 0 : i.markAllRead) == null ? void 0 : d.icon) == null ? void 0 : l.color) ?? "red",
2903
- svg: ((m = (p = i == null ? void 0 : i.markAllRead) == null ? void 0 : p.icon) == null ? void 0 : m.svg) ?? x.inbox
2904
- },
2905
- selectionIcon: null,
2906
- onClick: (M) => {
2907
- P.shared.readAllMessages({ canCallApi: !0 });
2908
- }
2909
- },
2910
- {
2911
- id: "archiveAll",
2912
- text: ((g = i == null ? void 0 : i.archiveAll) == null ? void 0 : g.text) ?? "Archive All",
2913
- icon: {
2914
- color: ((_ = (f = i == null ? void 0 : i.archiveAll) == null ? void 0 : f.icon) == null ? void 0 : _.color) ?? "red",
2915
- svg: ((C = (b = i == null ? void 0 : i.archiveAll) == null ? void 0 : b.icon) == null ? void 0 : C.svg) ?? x.archive
2916
- },
2917
- selectionIcon: null,
2918
- onClick: (M) => {
2919
- var L;
2920
- alert(JSON.stringify((L = v.shared.client) == null ? void 0 : L.options));
2921
- }
2922
- },
2923
- {
2924
- id: "archiveRead",
2925
- text: ((k = i == null ? void 0 : i.archiveRead) == null ? void 0 : k.text) ?? "Archive Read",
2926
- icon: {
2927
- color: ((S = (w = i == null ? void 0 : i.archiveRead) == null ? void 0 : w.icon) == null ? void 0 : S.color) ?? "red",
2928
- svg: ((E = (I = i == null ? void 0 : i.archiveRead) == null ? void 0 : I.icon) == null ? void 0 : E.svg) ?? x.archive
2929
- },
2930
- selectionIcon: null,
2931
- onClick: (M) => {
2932
- P.shared.archiveReadMessages({ canCallApi: !0 });
2933
- }
2934
- }
2935
- ];
2936
- }
2937
- static get observedAttributes() {
2938
- return ["icon", "title", "feed-type"];
2939
- }
2940
- refreshTheme() {
2941
- var s, o, n, c, d, l, p;
2942
- const e = this._themeSubscription.manager.getTheme(), i = (s = this.shadow) == null ? void 0 : s.querySelector(".courier-inbox-header");
2943
- i && (i.style.backgroundColor = ((n = (o = e.inbox) == null ? void 0 : o.header) == null ? void 0 : n.backgroundColor) ?? r.white[500], i.style.boxShadow = ((d = (c = e.inbox) == null ? void 0 : c.header) == null ? void 0 : d.shadow) ?? `0px 1px 0px 0px ${r.gray[500]}`), (l = this._filterMenu) == null || l.setOptions(this.getFilterOptions()), (p = this._actionMenu) == null || p.setOptions(this.getActionOptions());
2944
- }
2945
- handleOptionMenuItemClick(e, i) {
2946
- this._feedType = e, this._titleSection && this._titleSection.updateSelectedOption(i, this._feedType, this._feedType === "inbox" ? this._unreadCount : 0), this._onFeedTypeChange(e);
2947
- }
2948
- render(e) {
2949
- this._feedType = e.feedType, this._unreadCount = e.unreadCount, this.refreshTitleSection();
2950
- }
2951
- refreshTitleSection() {
2952
- var i, s;
2953
- const e = this.getFilterOptions().find((o) => ["inbox", "archive"].includes(o.id) && o.id === this._feedType);
2954
- e && ((i = this._titleSection) == null || i.updateSelectedOption(e, this._feedType, this._feedType === "inbox" ? this._unreadCount : 0), (s = this._filterMenu) == null || s.selectOption(e));
2955
- }
2956
- build(e) {
2957
- var i;
2958
- super.build(e), this._style = document.createElement("style"), this._style.textContent = this.getStyles(), (i = this.shadow) == null || i.appendChild(this._style), this.refreshTheme();
2959
- }
2960
- defaultElement() {
2961
- const e = this.getFilterOptions();
2962
- this._titleSection = new Fo(this._themeSubscription.manager, e[0]), this._filterMenu = new He(this._themeSubscription.manager, "filters", !0, e, () => {
2963
- var n;
2964
- (n = this._actionMenu) == null || n.closeMenu();
2965
- }), this._actionMenu = new He(this._themeSubscription.manager, "actions", !1, this.getActionOptions(), () => {
2966
- var n;
2967
- (n = this._filterMenu) == null || n.closeMenu();
2968
- }), this._filterMenu.selectOption(e[0]);
2969
- const i = document.createElement("div");
2970
- i.className = "spacer";
2971
- const s = document.createElement("div");
2972
- s.className = "actions", s.appendChild(this._filterMenu), s.appendChild(this._actionMenu);
2973
- const o = document.createElement("div");
2974
- return o.className = "courier-inbox-header", o.appendChild(this._titleSection), o.appendChild(i), o.appendChild(s), o;
2975
- }
2976
- getStyles() {
2977
- return `
2978
- :host {
2979
- z-index: 100;
2980
- }
2981
-
2982
- .courier-inbox-header {
2983
- display: flex;
2984
- align-items: center;
2985
- justify-content: space-between;
2986
- padding: 10px 10px 10px 16px;
2987
- background-color: ${r.white[500]};
2988
- box-shadow: 0px 1px 0px 0px ${r.gray[500]};
2989
- }
2990
-
2991
- .header-content {
2992
- display: flex;
2993
- align-items: center;
2994
- flex: 1;
2995
- }
2996
-
2997
- .spacer {
2998
- flex: 1;
2999
- }
3000
-
3001
- .actions {
3002
- display: flex;
3003
- align-items: center;
3004
- gap: 4px;
3005
- }
3006
- `;
3007
- }
3008
- // Disconnect the theme subscription
3009
- disconnectedCallback() {
3010
- this._themeSubscription.unsubscribe();
3011
- }
3012
- }
3013
- customElements.get("courier-inbox-header") || customElements.define("courier-inbox-header", Ho);
3014
- class Oo {
3015
- constructor(t) {
3016
- a(this, "events");
3017
- this.events = t;
3018
- }
3019
- remove() {
3020
- P.shared.removeDataStoreListener(this);
3021
- }
3022
- }
3023
- const Te = {
3024
- popup: {
3025
- button: {
3026
- icon: {
3027
- color: r.black[500],
3028
- svg: x.inbox
3029
- },
3030
- backgroundColor: "transparent",
3031
- hoverBackgroundColor: r.black[50010],
3032
- activeBackgroundColor: r.black[50020],
3033
- unreadIndicator: {
3034
- font: {
3035
- color: r.white[500],
3036
- size: "14px",
3037
- family: void 0,
3038
- weight: void 0
3039
- },
3040
- backgroundColor: r.blue[500],
3041
- borderRadius: "12px"
3042
- }
3043
- },
3044
- window: {
3045
- backgroundColor: r.white[500],
3046
- borderRadius: "8px",
3047
- border: `1px solid ${r.gray[500]}`,
3048
- shadow: `0px 8px 16px -4px ${r.gray[500]}`
3049
- }
3050
- },
3051
- inbox: {
3052
- header: {
3053
- backgroundColor: r.white[500],
3054
- shadow: `0px 1px 0px 0px ${r.gray[500]}`,
3055
- filters: {
3056
- font: {
3057
- color: r.black[500],
3058
- family: void 0,
3059
- size: "18px"
3060
- },
3061
- inbox: {
3062
- icon: {
3063
- color: r.black[500],
3064
- svg: x.inbox
3065
- },
3066
- text: "Inbox"
3067
- },
3068
- archive: {
3069
- icon: {
3070
- color: r.black[500],
3071
- svg: x.archive
3072
- },
3073
- text: "Archive"
3074
- },
3075
- unreadIndicator: {
3076
- font: {
3077
- color: r.white[500],
3078
- family: void 0,
3079
- size: "14px"
3080
- },
3081
- backgroundColor: r.blue[500],
3082
- borderRadius: "12px"
3083
- }
3084
- },
3085
- menus: {
3086
- popup: {
3087
- backgroundColor: r.white[500],
3088
- border: `1px solid ${r.gray[500]}`,
3089
- borderRadius: "4px",
3090
- shadow: `0px 4px 8px -2px ${r.gray[500]}`,
3091
- list: {
3092
- hoverBackgroundColor: r.gray[200],
3093
- activeBackgroundColor: r.gray[500],
3094
- divider: "none",
3095
- font: {
3096
- color: r.black[500],
3097
- family: void 0,
3098
- size: "14px"
3099
- },
3100
- selectionIcon: {
3101
- color: r.black[500],
3102
- svg: x.check
3103
- }
3104
- }
3105
- },
3106
- filters: {
3107
- button: {
3108
- icon: {
3109
- color: r.black[500],
3110
- svg: x.filter
3111
- },
3112
- backgroundColor: "transparent",
3113
- hoverBackgroundColor: r.black[50010],
3114
- activeBackgroundColor: r.black[50020]
3115
- },
3116
- inbox: {
3117
- icon: {
3118
- color: r.black[500],
3119
- svg: x.inbox
3120
- },
3121
- text: "Inbox"
3122
- },
3123
- archive: {
3124
- icon: {
3125
- color: r.black[500],
3126
- svg: x.archive
3127
- },
3128
- text: "Archive"
3129
- }
3130
- },
3131
- actions: {
3132
- button: {
3133
- icon: {
3134
- color: r.black[500],
3135
- svg: x.overflow
3136
- },
3137
- backgroundColor: "transparent",
3138
- hoverBackgroundColor: r.black[50010],
3139
- activeBackgroundColor: r.black[50020]
3140
- },
3141
- markAllRead: {
3142
- icon: {
3143
- color: r.black[500],
3144
- svg: x.read
3145
- },
3146
- text: "Mark All as Read"
3147
- },
3148
- archiveAll: {
3149
- icon: {
3150
- color: r.black[500],
3151
- svg: x.archive
3152
- },
3153
- text: "Archive All"
3154
- },
3155
- archiveRead: {
3156
- icon: {
3157
- color: r.black[500],
3158
- svg: x.archiveRead
3159
- },
3160
- text: "Archive Read"
3161
- }
3162
- }
3163
- }
3164
- },
3165
- list: {
3166
- backgroundColor: r.white[500],
3167
- item: {
3168
- backgroundColor: "transparent",
3169
- unreadIndicatorColor: r.blue[500],
3170
- hoverBackgroundColor: r.gray[200],
3171
- activeBackgroundColor: r.gray[500],
3172
- actions: {
3173
- backgroundColor: "transparent",
3174
- hoverBackgroundColor: r.gray[200],
3175
- activeBackgroundColor: r.gray[500],
3176
- border: `1px solid ${r.gray[500]}`,
3177
- borderRadius: "4px",
3178
- shadow: "0px 1px 2px 0px rgba(0, 0, 0, 0.06)",
3179
- font: {
3180
- color: r.black[500],
3181
- family: void 0,
3182
- size: "14px"
3183
- }
3184
- },
3185
- title: {
3186
- color: r.black[500],
3187
- family: void 0,
3188
- size: "14px"
3189
- },
3190
- subtitle: {
3191
- color: r.gray[600],
3192
- family: void 0,
3193
- size: "14px"
3194
- },
3195
- time: {
3196
- color: r.gray[600],
3197
- family: void 0,
3198
- size: "14px"
3199
- },
3200
- divider: `1px solid ${r.gray[200]}`,
3201
- menu: {
3202
- enabled: !0,
3203
- backgroundColor: r.white[500],
3204
- border: `1px solid ${r.gray[500]}`,
3205
- borderRadius: "4px",
3206
- shadow: `0px 2px 4px -2px ${r.gray[500]}`,
3207
- longPress: {
3208
- displayDuration: 4e3,
3209
- vibrationDuration: 50
3210
- },
3211
- item: {
3212
- hoverBackgroundColor: r.gray[200],
3213
- activeBackgroundColor: r.gray[500],
3214
- borderRadius: "0px",
3215
- read: {
3216
- color: r.black[500],
3217
- svg: x.read
3218
- },
3219
- unread: {
3220
- color: r.black[500],
3221
- svg: x.unread
3222
- },
3223
- archive: {
3224
- color: r.black[500],
3225
- svg: x.archive
3226
- },
3227
- unarchive: {
3228
- color: r.black[500],
3229
- svg: x.unarchive
3230
- }
3231
- }
3232
- }
3233
- }
3234
- },
3235
- loading: {
3236
- animation: {
3237
- barColor: r.gray[500],
3238
- barHeight: "14px",
3239
- barBorderRadius: "14px",
3240
- duration: "2s"
3241
- },
3242
- divider: `1px solid ${r.gray[200]}`
3243
- },
3244
- empty: {
3245
- title: {
3246
- font: {
3247
- size: "16px",
3248
- weight: "500",
3249
- color: r.black[500]
3250
- }
3251
- },
3252
- button: {
3253
- text: "Refresh"
3254
- }
3255
- },
3256
- error: {
3257
- title: {
3258
- font: {
3259
- size: "16px",
3260
- weight: "500",
3261
- color: r.black[500]
3262
- }
3263
- },
3264
- button: {
3265
- text: "Retry"
3266
- }
3267
- }
3268
- }
3269
- }, Oe = {
3270
- popup: {
3271
- button: {
3272
- icon: {
3273
- color: r.white[500],
3274
- svg: x.inbox
3275
- },
3276
- backgroundColor: "transparent",
3277
- hoverBackgroundColor: r.white[50010],
3278
- activeBackgroundColor: r.white[50020],
3279
- unreadIndicator: {
3280
- font: {
3281
- color: r.white[500],
3282
- size: "14px",
3283
- family: void 0,
3284
- weight: void 0
3285
- },
3286
- backgroundColor: r.blue[500],
3287
- borderRadius: "12px"
3288
- }
3289
- },
3290
- window: {
3291
- backgroundColor: r.black[500],
3292
- borderRadius: "8px",
3293
- border: `1px solid ${r.gray[400]}`,
3294
- shadow: `0px 4px 8px -2px ${r.white[50020]}`
3295
- }
3296
- },
3297
- inbox: {
3298
- header: {
3299
- backgroundColor: r.black[500],
3300
- shadow: `0px 1px 0px 0px ${r.gray[400]}`,
3301
- filters: {
3302
- font: {
3303
- color: r.white[500],
3304
- family: void 0,
3305
- size: "18px"
3306
- },
3307
- inbox: {
3308
- icon: {
3309
- color: r.white[500],
3310
- svg: x.inbox
3311
- },
3312
- text: "Inbox"
3313
- },
3314
- archive: {
3315
- icon: {
3316
- color: r.white[500],
3317
- svg: x.archive
3318
- },
3319
- text: "Archive"
3320
- },
3321
- unreadIndicator: {
3322
- font: {
3323
- color: r.white[500],
3324
- family: void 0,
3325
- size: "14px"
3326
- },
3327
- backgroundColor: r.blue[500],
3328
- borderRadius: "12px"
3329
- }
3330
- },
3331
- menus: {
3332
- popup: {
3333
- backgroundColor: r.black[500],
3334
- border: `1px solid ${r.gray[400]}`,
3335
- borderRadius: "4px",
3336
- shadow: `0px 4px 8px -2px ${r.white[50020]}`,
3337
- list: {
3338
- hoverBackgroundColor: r.white[50010],
3339
- activeBackgroundColor: r.white[50020],
3340
- divider: "none",
3341
- font: {
3342
- color: r.white[500],
3343
- family: void 0,
3344
- size: "14px"
3345
- },
3346
- selectionIcon: {
3347
- color: r.white[500],
3348
- svg: x.check
3349
- }
3350
- }
3351
- },
3352
- filters: {
3353
- button: {
3354
- icon: {
3355
- color: r.white[500],
3356
- svg: x.filter
3357
- },
3358
- backgroundColor: "transparent",
3359
- hoverBackgroundColor: r.white[50010],
3360
- activeBackgroundColor: r.white[50020]
3361
- },
3362
- inbox: {
3363
- icon: {
3364
- color: r.white[500],
3365
- svg: x.inbox
3366
- },
3367
- text: "Inbox"
3368
- },
3369
- archive: {
3370
- icon: {
3371
- color: r.white[500],
3372
- svg: x.archive
3373
- },
3374
- text: "Archive"
3375
- }
3376
- },
3377
- actions: {
3378
- button: {
3379
- icon: {
3380
- color: r.white[500],
3381
- svg: x.overflow
3382
- },
3383
- backgroundColor: "transparent",
3384
- hoverBackgroundColor: r.white[50010],
3385
- activeBackgroundColor: r.white[50020]
3386
- },
3387
- markAllRead: {
3388
- icon: {
3389
- color: r.white[500],
3390
- svg: x.read
3391
- },
3392
- text: "Mark All as Read"
3393
- },
3394
- archiveAll: {
3395
- icon: {
3396
- color: r.white[500],
3397
- svg: x.archive
3398
- },
3399
- text: "Archive All"
3400
- },
3401
- archiveRead: {
3402
- icon: {
3403
- color: r.white[500],
3404
- svg: x.archiveRead
3405
- },
3406
- text: "Archive Read"
3407
- }
3408
- }
3409
- }
3410
- },
3411
- list: {
3412
- backgroundColor: r.black[500],
3413
- item: {
3414
- backgroundColor: "transparent",
3415
- unreadIndicatorColor: r.blue[500],
3416
- hoverBackgroundColor: r.white[50010],
3417
- activeBackgroundColor: r.white[50020],
3418
- actions: {
3419
- backgroundColor: "transparent",
3420
- hoverBackgroundColor: r.white[50010],
3421
- activeBackgroundColor: r.white[50020],
3422
- border: `1px solid ${r.gray[400]}`,
3423
- borderRadius: "4px",
3424
- shadow: `0px 1px 2px 0px ${r.white[50010]}`,
3425
- font: {
3426
- color: r.white[500],
3427
- family: void 0,
3428
- size: "14px"
3429
- }
3430
- },
3431
- title: {
3432
- color: r.white[500],
3433
- family: void 0,
3434
- size: "14px"
3435
- },
3436
- subtitle: {
3437
- color: r.gray[500],
3438
- family: void 0,
3439
- size: "14px"
3440
- },
3441
- time: {
3442
- color: r.gray[500],
3443
- family: void 0,
3444
- size: "12px"
3445
- },
3446
- divider: `1px solid ${r.gray[400]}`,
3447
- menu: {
3448
- enabled: !0,
3449
- backgroundColor: r.black[500],
3450
- border: `1px solid ${r.gray[400]}`,
3451
- borderRadius: "4px",
3452
- shadow: `0px 2px 4px -2px ${r.white[50020]}`,
3453
- longPress: {
3454
- displayDuration: 4e3,
3455
- vibrationDuration: 50
3456
- },
3457
- item: {
3458
- hoverBackgroundColor: r.white[50010],
3459
- activeBackgroundColor: r.white[50020],
3460
- borderRadius: "0px",
3461
- read: {
3462
- color: r.white[500],
3463
- svg: x.read
3464
- },
3465
- unread: {
3466
- color: r.white[500],
3467
- svg: x.unread
3468
- },
3469
- archive: {
3470
- color: r.white[500],
3471
- svg: x.archive
3472
- },
3473
- unarchive: {
3474
- color: r.white[500],
3475
- svg: x.unarchive
3476
- }
3477
- }
3478
- }
3479
- }
3480
- },
3481
- loading: {
3482
- animation: {
3483
- barColor: r.white[500],
3484
- barHeight: "14px",
3485
- barBorderRadius: "14px",
3486
- duration: "2s"
3487
- },
3488
- divider: `1px solid ${r.gray[400]}`
3489
- },
3490
- empty: {
3491
- title: {
3492
- font: {
3493
- size: "16px",
3494
- weight: "500",
3495
- color: r.white[500]
3496
- }
3497
- },
3498
- button: {
3499
- text: "Refresh"
3500
- }
3501
- },
3502
- error: {
3503
- title: {
3504
- font: {
3505
- size: "16px",
3506
- weight: "500",
3507
- color: r.white[500]
3508
- }
3509
- },
3510
- button: {
3511
- text: "Retry"
3512
- }
3513
- }
3514
- }
3515
- }, dn = (h, t) => {
3516
- var i, s, o, n, c, d, l, p, m, g, f, _, b, C, k, w, S, I, E, M, L, R, D, y, A, F, H, O, z, U, N, q, V, j, X, Q, Y, ee, G, ae, he, ce, le, de, ue, pe, ge, me, be, _e, fe, xe, ve, Ce, ye, ke, we, Se, Ie, u, B, te, ie, J, Ee, Ve, je, Ze, Je, Ge, We, Ke, Xe, Qe, Ye, et, tt, it, st, ot, nt, rt, at, ht, ct, lt, dt, ut, pt, gt, mt, bt, _t, ft, xt, vt, Ct, yt, kt, wt, St, It, Et, Mt, Tt, $t, Lt, At, Pt, Bt, Rt, Dt, Ft, Ht, Ot, zt, Ut, Nt, qt, Vt, jt, Zt, Jt, Gt, Wt, Kt, Xt, Qt, Yt, ei, ti, ii, si, oi, ni, ri, ai, hi, ci, li, di, ui, pi, gi, mi, bi, _i, fi, xi, vi, Ci, yi, ki, wi, Si, Ii, Ei, Mi, Ti, $i, Li, Ai, Pi, Bi, Ri, Di, Fi, Hi, Oi, zi, Ui, Ni, qi, Vi, ji, Zi, Ji, Gi, Wi, Ki, Xi, Qi, Yi, es, ts, is, ss, os, ns, rs, as, hs, cs, ls, ds, us, ps, gs, ms, bs, _s, fs, xs, vs, Cs, ys, ks, ws, Ss, Is, Es, Ms, Ts, $s, Ls, As, Ps, Bs, Rs, Ds, Fs, Hs, Os, zs, Us, Ns, qs, Vs, js, Zs, Js, Gs, Ws, Ks, Xs, Qs, Ys, eo, to, io, so, oo, no, ro, ao, ho, co, lo, uo, po, go, mo, bo, _o, fo, xo, vo, Co;
3517
- const e = h === "light" ? Te : Oe;
3518
- return {
3519
- popup: {
3520
- button: {
3521
- ...(i = e.popup) == null ? void 0 : i.button,
3522
- ...(s = t.popup) == null ? void 0 : s.button,
3523
- icon: {
3524
- ...(n = (o = e.popup) == null ? void 0 : o.button) == null ? void 0 : n.icon,
3525
- ...(d = (c = t.popup) == null ? void 0 : c.button) == null ? void 0 : d.icon
3526
- },
3527
- unreadIndicator: {
3528
- ...(p = (l = e.popup) == null ? void 0 : l.button) == null ? void 0 : p.unreadIndicator,
3529
- ...(g = (m = t.popup) == null ? void 0 : m.button) == null ? void 0 : g.unreadIndicator
3530
- }
3531
- },
3532
- window: {
3533
- ...(f = e.popup) == null ? void 0 : f.window,
3534
- ...(_ = t.popup) == null ? void 0 : _.window
3535
- }
3536
- },
3537
- inbox: {
3538
- header: {
3539
- ...(b = e.inbox) == null ? void 0 : b.header,
3540
- ...(C = t.inbox) == null ? void 0 : C.header,
3541
- filters: {
3542
- ...(w = (k = e.inbox) == null ? void 0 : k.header) == null ? void 0 : w.filters,
3543
- ...(I = (S = t.inbox) == null ? void 0 : S.header) == null ? void 0 : I.filters,
3544
- inbox: {
3545
- ...(L = (M = (E = e.inbox) == null ? void 0 : E.header) == null ? void 0 : M.filters) == null ? void 0 : L.inbox,
3546
- ...(y = (D = (R = t.inbox) == null ? void 0 : R.header) == null ? void 0 : D.filters) == null ? void 0 : y.inbox,
3547
- icon: {
3548
- ...(O = (H = (F = (A = e.inbox) == null ? void 0 : A.header) == null ? void 0 : F.filters) == null ? void 0 : H.inbox) == null ? void 0 : O.icon,
3549
- ...(q = (N = (U = (z = t.inbox) == null ? void 0 : z.header) == null ? void 0 : U.filters) == null ? void 0 : N.inbox) == null ? void 0 : q.icon
3550
- }
3551
- },
3552
- archive: {
3553
- ...(X = (j = (V = e.inbox) == null ? void 0 : V.header) == null ? void 0 : j.filters) == null ? void 0 : X.archive,
3554
- ...(ee = (Y = (Q = t.inbox) == null ? void 0 : Q.header) == null ? void 0 : Y.filters) == null ? void 0 : ee.archive,
3555
- icon: {
3556
- ...(ce = (he = (ae = (G = e.inbox) == null ? void 0 : G.header) == null ? void 0 : ae.filters) == null ? void 0 : he.archive) == null ? void 0 : ce.icon,
3557
- ...(pe = (ue = (de = (le = t.inbox) == null ? void 0 : le.header) == null ? void 0 : de.filters) == null ? void 0 : ue.archive) == null ? void 0 : pe.icon
3558
- }
3559
- },
3560
- unreadIndicator: {
3561
- ...(be = (me = (ge = e.inbox) == null ? void 0 : ge.header) == null ? void 0 : me.filters) == null ? void 0 : be.unreadIndicator,
3562
- ...(xe = (fe = (_e = t.inbox) == null ? void 0 : _e.header) == null ? void 0 : fe.filters) == null ? void 0 : xe.unreadIndicator
3563
- }
3564
- },
3565
- menus: {
3566
- ...(Ce = (ve = e.inbox) == null ? void 0 : ve.header) == null ? void 0 : Ce.menus,
3567
- ...(ke = (ye = t.inbox) == null ? void 0 : ye.header) == null ? void 0 : ke.menus,
3568
- popup: {
3569
- ...(Ie = (Se = (we = e.inbox) == null ? void 0 : we.header) == null ? void 0 : Se.menus) == null ? void 0 : Ie.popup,
3570
- ...(te = (B = (u = t.inbox) == null ? void 0 : u.header) == null ? void 0 : B.menus) == null ? void 0 : te.popup,
3571
- list: {
3572
- ...(Ve = (Ee = (J = (ie = e.inbox) == null ? void 0 : ie.header) == null ? void 0 : J.menus) == null ? void 0 : Ee.popup) == null ? void 0 : Ve.list,
3573
- ...(Ge = (Je = (Ze = (je = t.inbox) == null ? void 0 : je.header) == null ? void 0 : Ze.menus) == null ? void 0 : Je.popup) == null ? void 0 : Ge.list,
3574
- font: {
3575
- ...(Ye = (Qe = (Xe = (Ke = (We = e.inbox) == null ? void 0 : We.header) == null ? void 0 : Ke.menus) == null ? void 0 : Xe.popup) == null ? void 0 : Qe.list) == null ? void 0 : Ye.font,
3576
- ...(ot = (st = (it = (tt = (et = t.inbox) == null ? void 0 : et.header) == null ? void 0 : tt.menus) == null ? void 0 : it.popup) == null ? void 0 : st.list) == null ? void 0 : ot.font
3577
- },
3578
- selectionIcon: {
3579
- ...(ct = (ht = (at = (rt = (nt = e.inbox) == null ? void 0 : nt.header) == null ? void 0 : rt.menus) == null ? void 0 : at.popup) == null ? void 0 : ht.list) == null ? void 0 : ct.selectionIcon,
3580
- ...(gt = (pt = (ut = (dt = (lt = t.inbox) == null ? void 0 : lt.header) == null ? void 0 : dt.menus) == null ? void 0 : ut.popup) == null ? void 0 : pt.list) == null ? void 0 : gt.selectionIcon
3581
- }
3582
- }
3583
- },
3584
- filters: {
3585
- ...(_t = (bt = (mt = e.inbox) == null ? void 0 : mt.header) == null ? void 0 : bt.menus) == null ? void 0 : _t.filters,
3586
- ...(vt = (xt = (ft = t.inbox) == null ? void 0 : ft.header) == null ? void 0 : xt.menus) == null ? void 0 : vt.filters,
3587
- inbox: {
3588
- ...(wt = (kt = (yt = (Ct = e.inbox) == null ? void 0 : Ct.header) == null ? void 0 : yt.menus) == null ? void 0 : kt.filters) == null ? void 0 : wt.inbox,
3589
- ...(Mt = (Et = (It = (St = t.inbox) == null ? void 0 : St.header) == null ? void 0 : It.menus) == null ? void 0 : Et.filters) == null ? void 0 : Mt.inbox,
3590
- icon: {
3591
- ...(Pt = (At = (Lt = ($t = (Tt = e.inbox) == null ? void 0 : Tt.header) == null ? void 0 : $t.menus) == null ? void 0 : Lt.filters) == null ? void 0 : At.inbox) == null ? void 0 : Pt.icon,
3592
- ...(Ht = (Ft = (Dt = (Rt = (Bt = t.inbox) == null ? void 0 : Bt.header) == null ? void 0 : Rt.menus) == null ? void 0 : Dt.filters) == null ? void 0 : Ft.inbox) == null ? void 0 : Ht.icon
3593
- }
3594
- },
3595
- archive: {
3596
- ...(Nt = (Ut = (zt = (Ot = e.inbox) == null ? void 0 : Ot.header) == null ? void 0 : zt.menus) == null ? void 0 : Ut.filters) == null ? void 0 : Nt.archive,
3597
- ...(Zt = (jt = (Vt = (qt = t.inbox) == null ? void 0 : qt.header) == null ? void 0 : Vt.menus) == null ? void 0 : jt.filters) == null ? void 0 : Zt.archive,
3598
- icon: {
3599
- ...(Xt = (Kt = (Wt = (Gt = (Jt = e.inbox) == null ? void 0 : Jt.header) == null ? void 0 : Gt.menus) == null ? void 0 : Wt.filters) == null ? void 0 : Kt.archive) == null ? void 0 : Xt.icon,
3600
- ...(ii = (ti = (ei = (Yt = (Qt = t.inbox) == null ? void 0 : Qt.header) == null ? void 0 : Yt.menus) == null ? void 0 : ei.filters) == null ? void 0 : ti.archive) == null ? void 0 : ii.icon
3601
- }
3602
- }
3603
- },
3604
- actions: {
3605
- ...(ni = (oi = (si = e.inbox) == null ? void 0 : si.header) == null ? void 0 : oi.menus) == null ? void 0 : ni.actions,
3606
- ...(hi = (ai = (ri = t.inbox) == null ? void 0 : ri.header) == null ? void 0 : ai.menus) == null ? void 0 : hi.actions,
3607
- markAllRead: {
3608
- ...(ui = (di = (li = (ci = e.inbox) == null ? void 0 : ci.header) == null ? void 0 : li.menus) == null ? void 0 : di.actions) == null ? void 0 : ui.markAllRead,
3609
- ...(bi = (mi = (gi = (pi = t.inbox) == null ? void 0 : pi.header) == null ? void 0 : gi.menus) == null ? void 0 : mi.actions) == null ? void 0 : bi.markAllRead,
3610
- icon: {
3611
- ...(Ci = (vi = (xi = (fi = (_i = e.inbox) == null ? void 0 : _i.header) == null ? void 0 : fi.menus) == null ? void 0 : xi.actions) == null ? void 0 : vi.markAllRead) == null ? void 0 : Ci.icon,
3612
- ...(Ii = (Si = (wi = (ki = (yi = t.inbox) == null ? void 0 : yi.header) == null ? void 0 : ki.menus) == null ? void 0 : wi.actions) == null ? void 0 : Si.markAllRead) == null ? void 0 : Ii.icon
3613
- }
3614
- },
3615
- archiveAll: {
3616
- ...($i = (Ti = (Mi = (Ei = e.inbox) == null ? void 0 : Ei.header) == null ? void 0 : Mi.menus) == null ? void 0 : Ti.actions) == null ? void 0 : $i.archiveAll,
3617
- ...(Bi = (Pi = (Ai = (Li = t.inbox) == null ? void 0 : Li.header) == null ? void 0 : Ai.menus) == null ? void 0 : Pi.actions) == null ? void 0 : Bi.archiveAll,
3618
- icon: {
3619
- ...(Oi = (Hi = (Fi = (Di = (Ri = e.inbox) == null ? void 0 : Ri.header) == null ? void 0 : Di.menus) == null ? void 0 : Fi.actions) == null ? void 0 : Hi.archiveAll) == null ? void 0 : Oi.icon,
3620
- ...(Vi = (qi = (Ni = (Ui = (zi = t.inbox) == null ? void 0 : zi.header) == null ? void 0 : Ui.menus) == null ? void 0 : Ni.actions) == null ? void 0 : qi.archiveAll) == null ? void 0 : Vi.icon
3621
- }
3622
- },
3623
- archiveRead: {
3624
- ...(Gi = (Ji = (Zi = (ji = e.inbox) == null ? void 0 : ji.header) == null ? void 0 : Zi.menus) == null ? void 0 : Ji.actions) == null ? void 0 : Gi.archiveRead,
3625
- ...(Qi = (Xi = (Ki = (Wi = t.inbox) == null ? void 0 : Wi.header) == null ? void 0 : Ki.menus) == null ? void 0 : Xi.actions) == null ? void 0 : Qi.archiveRead,
3626
- icon: {
3627
- ...(ss = (is = (ts = (es = (Yi = e.inbox) == null ? void 0 : Yi.header) == null ? void 0 : es.menus) == null ? void 0 : ts.actions) == null ? void 0 : is.archiveRead) == null ? void 0 : ss.icon,
3628
- ...(hs = (as = (rs = (ns = (os = t.inbox) == null ? void 0 : os.header) == null ? void 0 : ns.menus) == null ? void 0 : rs.actions) == null ? void 0 : as.archiveRead) == null ? void 0 : hs.icon
3629
- }
3630
- }
3631
- }
3632
- }
3633
- },
3634
- list: {
3635
- ...(cs = e.inbox) == null ? void 0 : cs.list,
3636
- ...(ls = t.inbox) == null ? void 0 : ls.list,
3637
- item: {
3638
- ...(us = (ds = e.inbox) == null ? void 0 : ds.list) == null ? void 0 : us.item,
3639
- ...(gs = (ps = t.inbox) == null ? void 0 : ps.list) == null ? void 0 : gs.item,
3640
- menu: {
3641
- ...(_s = (bs = (ms = e.inbox) == null ? void 0 : ms.list) == null ? void 0 : bs.item) == null ? void 0 : _s.menu,
3642
- ...(vs = (xs = (fs = t.inbox) == null ? void 0 : fs.list) == null ? void 0 : xs.item) == null ? void 0 : vs.menu,
3643
- item: {
3644
- ...(ws = (ks = (ys = (Cs = e.inbox) == null ? void 0 : Cs.list) == null ? void 0 : ys.item) == null ? void 0 : ks.menu) == null ? void 0 : ws.item,
3645
- ...(Ms = (Es = (Is = (Ss = t.inbox) == null ? void 0 : Ss.list) == null ? void 0 : Is.item) == null ? void 0 : Es.menu) == null ? void 0 : Ms.item,
3646
- read: {
3647
- ...(Ps = (As = (Ls = ($s = (Ts = e.inbox) == null ? void 0 : Ts.list) == null ? void 0 : $s.item) == null ? void 0 : Ls.menu) == null ? void 0 : As.item) == null ? void 0 : Ps.read,
3648
- ...(Hs = (Fs = (Ds = (Rs = (Bs = t.inbox) == null ? void 0 : Bs.list) == null ? void 0 : Rs.item) == null ? void 0 : Ds.menu) == null ? void 0 : Fs.item) == null ? void 0 : Hs.read
3649
- },
3650
- unread: {
3651
- ...(qs = (Ns = (Us = (zs = (Os = e.inbox) == null ? void 0 : Os.list) == null ? void 0 : zs.item) == null ? void 0 : Us.menu) == null ? void 0 : Ns.item) == null ? void 0 : qs.unread,
3652
- ...(Gs = (Js = (Zs = (js = (Vs = t.inbox) == null ? void 0 : Vs.list) == null ? void 0 : js.item) == null ? void 0 : Zs.menu) == null ? void 0 : Js.item) == null ? void 0 : Gs.unread
3653
- },
3654
- archive: {
3655
- ...(Ys = (Qs = (Xs = (Ks = (Ws = e.inbox) == null ? void 0 : Ws.list) == null ? void 0 : Ks.item) == null ? void 0 : Xs.menu) == null ? void 0 : Qs.item) == null ? void 0 : Ys.archive,
3656
- ...(oo = (so = (io = (to = (eo = t.inbox) == null ? void 0 : eo.list) == null ? void 0 : to.item) == null ? void 0 : io.menu) == null ? void 0 : so.item) == null ? void 0 : oo.archive
3657
- },
3658
- unarchive: {
3659
- ...(co = (ho = (ao = (ro = (no = e.inbox) == null ? void 0 : no.list) == null ? void 0 : ro.item) == null ? void 0 : ao.menu) == null ? void 0 : ho.item) == null ? void 0 : co.unarchive,
3660
- ...(mo = (go = (po = (uo = (lo = t.inbox) == null ? void 0 : lo.list) == null ? void 0 : uo.item) == null ? void 0 : po.menu) == null ? void 0 : go.item) == null ? void 0 : mo.unarchive
3661
- }
3662
- }
3663
- }
3664
- }
3665
- },
3666
- loading: {
3667
- ...(bo = e.inbox) == null ? void 0 : bo.loading,
3668
- ...(_o = t.inbox) == null ? void 0 : _o.loading
3669
- },
3670
- empty: {
3671
- ...(fo = e.inbox) == null ? void 0 : fo.empty,
3672
- ...(xo = t.inbox) == null ? void 0 : xo.empty
3673
- },
3674
- error: {
3675
- ...(vo = e.inbox) == null ? void 0 : vo.error,
3676
- ...(Co = t.inbox) == null ? void 0 : Co.error
3677
- }
3678
- }
3679
- };
3680
- };
3681
- class zo {
3682
- constructor(t) {
3683
- // Event IDs
3684
- a(this, "THEME_CHANGE_EVENT", "courier_inbox_theme_change");
3685
- // State
3686
- a(this, "_theme");
3687
- a(this, "_lightTheme", Te);
3688
- a(this, "_darkTheme", Oe);
3689
- a(this, "_target");
3690
- a(this, "_subscriptions", []);
3691
- // System theme
3692
- a(this, "_userMode");
3693
- a(this, "_systemMode");
3694
- a(this, "_systemThemeCleanup");
3695
- this._theme = t, this._target = new EventTarget(), this._userMode = "system", this._systemMode = Mo(), this.setLightTheme(Te), this.setDarkTheme(Oe), this._systemThemeCleanup = To((e) => {
3696
- this._systemMode = e, this.updateTheme();
3697
- });
3698
- }
3699
- setLightTheme(t) {
3700
- this._lightTheme = t, this._systemMode === "light" && this.updateTheme();
3701
- }
3702
- setDarkTheme(t) {
3703
- this._darkTheme = t, this._systemMode === "dark" && this.updateTheme();
3704
- }
3705
- /**
3706
- * Get the current system theme
3707
- */
3708
- get currentSystemTheme() {
3709
- return this._systemMode;
3710
- }
3711
- /**
3712
- * Get the current theme
3713
- */
3714
- getTheme() {
3715
- return this._theme;
3716
- }
3717
- /**
3718
- * Update the theme
3719
- */
3720
- updateTheme() {
3721
- const t = this._userMode === "system" ? this._systemMode : this._userMode, e = t === "light" ? this._lightTheme : this._darkTheme, i = dn(t, e);
3722
- this.setTheme(i);
3723
- }
3724
- /**
3725
- * Set the theme and notify all listeners
3726
- */
3727
- setTheme(t) {
3728
- t !== this._theme && (this._theme = t, this._target.dispatchEvent(new CustomEvent(this.THEME_CHANGE_EVENT, {
3729
- detail: { theme: t }
3730
- })));
3731
- }
3732
- /**
3733
- * Set the mode and notify all listeners
3734
- */
3735
- setMode(t) {
3736
- this._userMode = t, this.updateTheme();
3737
- }
3738
- /**
3739
- * Subscribe to theme changes
3740
- * @param {Function} callback - Function to run when the theme changes
3741
- * @returns {CourierInboxThemeSubscription} - Object with remove method to stop listening
3742
- */
3743
- subscribe(t) {
3744
- const e = new AbortController();
3745
- this._target.addEventListener(this.THEME_CHANGE_EVENT, (s) => {
3746
- t(s.detail.theme);
3747
- }, { signal: e.signal });
3748
- const i = {
3749
- manager: this,
3750
- unsubscribe: () => {
3751
- e.abort();
3752
- const s = this._subscriptions.indexOf(i);
3753
- s > -1 && this._subscriptions.splice(s, 1);
3754
- }
3755
- };
3756
- return this._subscriptions.push(i), i;
3757
- }
3758
- /**
3759
- * Clean up event listeners
3760
- */
3761
- cleanup() {
3762
- this._systemThemeCleanup && this._systemThemeCleanup(), this._subscriptions.forEach((t) => t.unsubscribe()), this._subscriptions = [];
3763
- }
3764
- }
3765
- class Uo extends HTMLElement {
3766
- constructor(e) {
3767
- var i;
3768
- super();
3769
- // State
3770
- a(this, "_currentFeed", "inbox");
3771
- // Theming
3772
- a(this, "_themeManager");
3773
- // Components
3774
- a(this, "_shadow");
3775
- a(this, "_list");
3776
- a(this, "_datastoreListener");
3777
- a(this, "_authListener");
3778
- a(this, "_style");
3779
- // Header
3780
- a(this, "_header");
3781
- a(this, "_headerFactory");
3782
- // List
3783
- a(this, "_onMessageClick");
3784
- a(this, "_onMessageActionClick");
3785
- a(this, "_onMessageLongPress");
3786
- // Default props
3787
- a(this, "_defaultProps", {
3788
- title: "Inbox",
3789
- icon: x.inbox,
3790
- feedType: this._currentFeed,
3791
- height: "768px"
3792
- });
3793
- this._shadow = this.attachShadow({ mode: "open" }), this._themeManager = e ?? new zo(Te), this._header = new Ho({
3794
- themeManager: this._themeManager,
3795
- onFeedTypeChange: (s) => {
3796
- this.setFeedType(s);
3797
- }
3798
- }), this._header.build(void 0), this._shadow.appendChild(this._header), this._list = new Ro({
3799
- themeManager: this._themeManager,
3800
- onRefresh: () => {
3801
- this.refresh();
3802
- },
3803
- onPaginationTrigger: async (s) => {
3804
- var o, n;
3805
- try {
3806
- await P.shared.fetchNextPageOfMessages({
3807
- feedType: s
3808
- });
3809
- } catch (c) {
3810
- (n = (o = v.shared.client) == null ? void 0 : o.options.logger) == null || n.error("Failed to fetch next page of messages:", c);
3811
- }
3812
- },
3813
- onMessageClick: (s, o) => {
3814
- var n;
3815
- P.shared.clickMessage({ message: s }), this.dispatchEvent(new CustomEvent("message-click", {
3816
- detail: { message: s, index: o },
3817
- bubbles: !0,
3818
- composed: !0
3819
- })), (n = this._onMessageClick) == null || n.call(this, { message: s, index: o });
3820
- },
3821
- onMessageActionClick: (s, o, n) => {
3822
- var c;
3823
- this.dispatchEvent(new CustomEvent("message-action-click", {
3824
- detail: { message: s, action: o, index: n },
3825
- bubbles: !0,
3826
- composed: !0
3827
- })), (c = this._onMessageActionClick) == null || c.call(this, { message: s, action: o, index: n });
3828
- },
3829
- onMessageLongPress: (s, o) => {
3830
- var n;
3831
- this.dispatchEvent(new CustomEvent("message-long-press", {
3832
- detail: { message: s, index: o },
3833
- bubbles: !0,
3834
- composed: !0
3835
- })), (n = this._onMessageLongPress) == null || n.call(this, { message: s, index: o });
3836
- }
3837
- }), this._style = document.createElement("style"), this.refreshTheme(), this._shadow.appendChild(this._style), this._shadow.appendChild(this._list), this._datastoreListener = new Oo({
3838
- onError: (s) => {
3839
- this._list.setError(s);
3840
- },
3841
- onDataSetChange: (s, o) => {
3842
- this._currentFeed === o && (this._list.setDataSet(s), this.updateHeader());
3843
- },
3844
- onPageAdded: (s, o) => {
3845
- this._currentFeed === o && (this._list.addPage(s), this.updateHeader());
3846
- },
3847
- onMessageAdd: (s, o, n) => {
3848
- this._currentFeed === n && (this._list.addMessage(s, o), this.updateHeader());
3849
- },
3850
- onMessageRemove: (s, o, n) => {
3851
- this._currentFeed === n && (this._list.removeMessage(o), this.updateHeader());
3852
- },
3853
- onMessageUpdate: (s, o, n) => {
3854
- this._currentFeed === n && (this._list.updateMessage(s, o), this.updateHeader());
3855
- },
3856
- onUnreadCountChange: (s) => {
3857
- this.updateHeader();
3858
- }
3859
- }), P.shared.addDataStoreListener(this._datastoreListener), this._themeManager.subscribe((s) => {
3860
- this.refreshTheme();
3861
- }), this._authListener = v.shared.addAuthenticationListener((s) => {
3862
- this.refresh();
3863
- }), (i = v.shared.client) != null && i.options.userId && this.refresh();
3864
- }
3865
- get theme() {
3866
- return this._themeManager.getTheme();
3867
- }
3868
- setLightTheme(e) {
3869
- this._themeManager.setLightTheme(e);
3870
- }
3871
- setDarkTheme(e) {
3872
- this._themeManager.setDarkTheme(e);
3873
- }
3874
- static get observedAttributes() {
3875
- return ["height", "light-theme", "dark-theme", "mode", "message-click", "message-action-click", "message-long-press"];
3876
- }
3877
- refreshTheme() {
3878
- this._style.textContent = this.getStyles();
3879
- }
3880
- getStyles() {
3881
- return `
3882
- :host {
3883
- display: flex;
3884
- flex-direction: column;
3885
- width: 100%;
3886
- height: ${this._defaultProps.height};
3887
- }
3888
-
3889
- courier-inbox-header {
3890
- flex-shrink: 0;
3891
- }
3892
-
3893
- courier-inbox-list {
3894
- flex: 1;
3895
- overflow-y: auto;
3896
- overflow-x: hidden;
3897
- }
3898
- `;
3899
- }
3900
- setHeader(e) {
3901
- this._headerFactory = e, this.updateHeader();
3902
- }
3903
- removeHeader() {
3904
- this._headerFactory = null, this.updateHeader();
3905
- }
3906
- setLoadingState(e) {
3907
- this._list.setLoadingStateFactory(e);
3908
- }
3909
- setEmptyState(e) {
3910
- this._list.setEmptyStateFactory(e);
3911
- }
3912
- setErrorState(e) {
3913
- this._list.setErrorStateFactory(e);
3914
- }
3915
- setListItem(e) {
3916
- this._list.setListItemFactory(e);
3917
- }
3918
- setPaginationItem(e) {
3919
- this._list.setPaginationItemFactory(e);
3920
- }
3921
- onMessageClick(e) {
3922
- this._onMessageClick = e;
3923
- }
3924
- onMessageActionClick(e) {
3925
- this._onMessageActionClick = e;
3926
- }
3927
- onMessageLongPress(e) {
3928
- this._onMessageLongPress = e;
3929
- }
3930
- setFeedType(e) {
3931
- this._currentFeed = e, this._list.setFeedType(e), this.updateHeader(), this.load({
3932
- feedType: this._currentFeed,
3933
- canUseCache: !0
3934
- });
3935
- }
3936
- updateHeader() {
3937
- const e = {
3938
- feedType: this._currentFeed,
3939
- unreadCount: P.shared.unreadCount,
3940
- messageCount: this._list.messages.length
3941
- };
3942
- switch (this._headerFactory) {
3943
- case void 0:
3944
- this._header.render(e);
3945
- break;
3946
- case null:
3947
- this._header.build(null);
3948
- break;
3949
- default:
3950
- const i = this._headerFactory(e);
3951
- this._header.build(i);
3952
- break;
3953
- }
3954
- }
3955
- async load(e) {
3956
- await P.shared.load(e);
3957
- }
3958
- refresh() {
3959
- this.load({
3960
- feedType: this._currentFeed,
3961
- canUseCache: !1
3962
- });
3963
- }
3964
- connectedCallback() {
3965
- this.refresh();
3966
- }
3967
- disconnectedCallback() {
3968
- var e, i;
3969
- this._themeManager.cleanup(), (e = this._datastoreListener) == null || e.remove(), (i = this._authListener) == null || i.remove();
3970
- }
3971
- attributeChangedCallback(e, i, s) {
3972
- var o, n, c, d, l, p;
3973
- if (i !== s)
3974
- switch (e) {
3975
- case "height":
3976
- const m = s || this._defaultProps.height;
3977
- this.style.height = m;
3978
- break;
3979
- case "message-click":
3980
- if (s)
3981
- try {
3982
- this._onMessageClick = new Function("props", s);
3983
- } catch (g) {
3984
- (n = (o = v.shared.client) == null ? void 0 : o.options.logger) == null || n.error("Failed to parse message-click handler:", g);
3985
- }
3986
- else
3987
- this._onMessageClick = void 0;
3988
- break;
3989
- case "message-action-click":
3990
- if (s)
3991
- try {
3992
- this._onMessageActionClick = new Function("props", s);
3993
- } catch (g) {
3994
- (d = (c = v.shared.client) == null ? void 0 : c.options.logger) == null || d.error("Failed to parse message-action-click handler:", g);
3995
- }
3996
- else
3997
- this._onMessageActionClick = void 0;
3998
- break;
3999
- case "message-long-press":
4000
- if (s)
4001
- try {
4002
- this._onMessageLongPress = new Function("props", s);
4003
- } catch (g) {
4004
- (p = (l = v.shared.client) == null ? void 0 : l.options.logger) == null || p.error("Failed to parse message-long-press handler:", g);
4005
- }
4006
- else
4007
- this._onMessageLongPress = void 0;
4008
- break;
4009
- case "light-theme":
4010
- s && this.setLightTheme(JSON.parse(s));
4011
- break;
4012
- case "dark-theme":
4013
- s && this.setDarkTheme(JSON.parse(s));
4014
- break;
4015
- case "mode":
4016
- this._themeManager.setMode(s);
4017
- break;
4018
- }
4019
- }
4020
- }
4021
- customElements.get("courier-inbox") || customElements.define("courier-inbox", Uo);
4022
- class No extends De {
4023
- constructor(e) {
4024
- super();
4025
- // Theme
4026
- a(this, "_themeSubscription");
4027
- // Components
4028
- a(this, "_container");
4029
- a(this, "_triggerButton");
4030
- a(this, "_unreadCountBadge");
4031
- this._themeSubscription = e.subscribe((i) => {
4032
- this.updateTheme();
4033
- });
4034
- }
4035
- defaultElement() {
4036
- this._container = document.createElement("div"), this._container.className = "menu-button-container", this._triggerButton = new $e(x.inbox), this._unreadCountBadge = new qe({
4037
- themeBus: this._themeSubscription.manager,
4038
- location: "button"
4039
- }), this._unreadCountBadge.id = "unread-badge";
4040
- const e = document.createElement("style");
4041
- return e.textContent = this.getStyles(), this._container.appendChild(e), this._container.appendChild(this._triggerButton), this._container.appendChild(this._unreadCountBadge), this.shadow.appendChild(this._container), this.updateTheme(), this._container;
4042
- }
4043
- getStyles() {
4044
- return `
4045
- .menu-button-container {
4046
- position: relative;
4047
- display: inline-block;
4048
- }
4049
-
4050
- #unread-badge {
4051
- position: absolute;
4052
- top: -8px;
4053
- left: 50%;
4054
- pointer-events: none;
4055
- }
4056
- `;
4057
- }
4058
- onUnreadCountChange(e) {
4059
- var i;
4060
- (i = this._unreadCountBadge) == null || i.setCount(e), this.updateTheme();
4061
- }
4062
- updateTheme() {
4063
- var i, s, o, n, c, d, l, p, m, g, f, _, b, C, k, w, S, I;
4064
- const e = this._themeSubscription.manager.getTheme();
4065
- (n = this._triggerButton) == null || n.updateIconColor(((o = (s = (i = e == null ? void 0 : e.popup) == null ? void 0 : i.button) == null ? void 0 : s.icon) == null ? void 0 : o.color) ?? r.black[500]), (p = this._triggerButton) == null || p.updateIconSVG(((l = (d = (c = e == null ? void 0 : e.popup) == null ? void 0 : c.button) == null ? void 0 : d.icon) == null ? void 0 : l.svg) ?? x.inbox), (f = this._triggerButton) == null || f.updateBackgroundColor(((g = (m = e == null ? void 0 : e.popup) == null ? void 0 : m.button) == null ? void 0 : g.backgroundColor) ?? "transparent"), (C = this._triggerButton) == null || C.updateHoverBackgroundColor(((b = (_ = e == null ? void 0 : e.popup) == null ? void 0 : _.button) == null ? void 0 : b.hoverBackgroundColor) ?? r.black[50010]), (S = this._triggerButton) == null || S.updateActiveBackgroundColor(((w = (k = e == null ? void 0 : e.popup) == null ? void 0 : k.button) == null ? void 0 : w.activeBackgroundColor) ?? r.black[50020]), (I = this._unreadCountBadge) == null || I.refreshTheme("button");
4066
- }
4067
- disconnectedCallback() {
4068
- this._themeSubscription.unsubscribe();
4069
- }
4070
- }
4071
- customElements.get("courier-inbox-menu-button") || customElements.define("courier-inbox-menu-button", No);
4072
- class un extends HTMLElement {
4073
- constructor() {
4074
- super();
4075
- // State
4076
- a(this, "_width", "440px");
4077
- a(this, "_height", "440px");
4078
- a(this, "_popupAlignment", "top-right");
4079
- a(this, "_top", "40px");
4080
- a(this, "_right", "0");
4081
- a(this, "_bottom", "40px");
4082
- a(this, "_left", "0");
4083
- // Theming
4084
- a(this, "_themeManager", new zo(Te));
4085
- // Components
4086
- a(this, "_triggerButton");
4087
- a(this, "_popup");
4088
- a(this, "_inbox");
4089
- a(this, "_style");
4090
- // Listeners
4091
- a(this, "_datastoreListener");
4092
- // Factories
4093
- a(this, "_popupMenuButtonFactory");
4094
- const e = this.attachShadow({ mode: "open" });
4095
- this._triggerButton = new No(this._themeManager), this._triggerButton.build(void 0), this._popup = document.createElement("div"), this._popup.className = "popup", this._inbox = new Uo(this._themeManager), this._inbox.setAttribute("height", "100%"), this._style = document.createElement("style"), this.refreshTheme(), e.appendChild(this._style), e.appendChild(this._triggerButton), e.appendChild(this._popup), this._popup.appendChild(this._inbox), this._triggerButton.addEventListener("click", this.togglePopup.bind(this)), document.addEventListener("click", this.handleOutsideClick.bind(this)), this.updatePopupPosition(), this._datastoreListener = new Oo(this), P.shared.addDataStoreListener(this._datastoreListener), this._themeManager.subscribe((i) => {
4096
- this.refreshTheme();
4097
- });
4098
- }
4099
- get theme() {
4100
- return this._themeManager.getTheme();
4101
- }
4102
- setLightTheme(e) {
4103
- this._themeManager.setLightTheme(e);
4104
- }
4105
- setDarkTheme(e) {
4106
- this._themeManager.setDarkTheme(e);
4107
- }
4108
- static get observedAttributes() {
4109
- return ["popup-alignment", "message-click", "message-action-click", "message-long-press", "popup-width", "popup-height", "top", "right", "bottom", "left", "light-theme", "dark-theme", "mode"];
4110
- }
4111
- refreshTheme() {
4112
- this._style.textContent = this.getStyles();
4113
- }
4114
- getStyles() {
4115
- var e, i, s, o, n, c, d, l;
4116
- return `
4117
- :host {
4118
- display: inline-block;
4119
- position: relative;
4120
- }
4121
-
4122
- .menu-button-container {
4123
- position: relative;
4124
- display: inline-block;
4125
- }
4126
-
4127
- .popup {
4128
- display: none;
4129
- position: absolute;
4130
- background: ${((i = (e = this.theme.popup) == null ? void 0 : e.window) == null ? void 0 : i.backgroundColor) ?? "red"};
4131
- border-radius: ${((o = (s = this.theme.popup) == null ? void 0 : s.window) == null ? void 0 : o.borderRadius) ?? "8px"};
4132
- border: ${((c = (n = this.theme.popup) == null ? void 0 : n.window) == null ? void 0 : c.border) ?? "1px solid red"};
4133
- box-shadow: ${((l = (d = this.theme.popup) == null ? void 0 : d.window) == null ? void 0 : l.shadow) ?? "0px 8px 16px -4px red"};
4134
- z-index: 1000;
4135
- width: ${this._width};
4136
- height: ${this._height};
4137
- overflow: hidden;
4138
- transform: translateZ(0);
4139
- will-change: transform;
4140
- }
4141
-
4142
- #unread-badge {
4143
- position: absolute;
4144
- top: -8px;
4145
- left: 50%;
4146
- pointer-events: none;
4147
- }
4148
-
4149
- courier-inbox {
4150
- height: 100%;
4151
- }
4152
- `;
4153
- }
4154
- attributeChangedCallback(e, i, s) {
4155
- switch (e) {
4156
- case "popup-alignment":
4157
- this.isValidPosition(s) && (this._popupAlignment = s, this.updatePopupPosition());
4158
- break;
4159
- case "popup-width":
4160
- this._width = s, this.setSize(s, this._height);
4161
- break;
4162
- case "popup-height":
4163
- this._height = s, this.setSize(this._width, s);
4164
- break;
4165
- case "top":
4166
- this._top = s, this.updatePopupPosition();
4167
- break;
4168
- case "right":
4169
- this._right = s, this.updatePopupPosition();
4170
- break;
4171
- case "bottom":
4172
- this._bottom = s, this.updatePopupPosition();
4173
- break;
4174
- case "left":
4175
- this._left = s, this.updatePopupPosition();
4176
- break;
4177
- case "light-theme":
4178
- s && this.setLightTheme(JSON.parse(s));
4179
- break;
4180
- case "dark-theme":
4181
- s && this.setDarkTheme(JSON.parse(s));
4182
- break;
4183
- case "mode":
4184
- this._themeManager.setMode(s);
4185
- break;
4186
- }
4187
- }
4188
- onUnreadCountChange(e) {
4189
- this.render();
4190
- }
4191
- onMessageClick(e) {
4192
- this._inbox.onMessageClick(e);
4193
- }
4194
- onMessageActionClick(e) {
4195
- this._inbox.onMessageActionClick(e);
4196
- }
4197
- onMessageLongPress(e) {
4198
- this._inbox.onMessageLongPress(e);
4199
- }
4200
- isValidPosition(e) {
4201
- return [
4202
- "top-right",
4203
- "top-left",
4204
- "top-center",
4205
- "bottom-right",
4206
- "bottom-left",
4207
- "bottom-center",
4208
- "center-right",
4209
- "center-left",
4210
- "center-center"
4211
- ].includes(e);
4212
- }
4213
- updatePopupPosition() {
4214
- switch (this._popup.style.top = "", this._popup.style.bottom = "", this._popup.style.left = "", this._popup.style.right = "", this._popup.style.margin = "", this._popup.style.transform = "", this._popupAlignment) {
4215
- case "top-right":
4216
- this._popup.style.top = this._top, this._popup.style.right = this._right;
4217
- break;
4218
- case "top-left":
4219
- this._popup.style.top = this._top, this._popup.style.left = this._left;
4220
- break;
4221
- case "top-center":
4222
- this._popup.style.top = this._top, this._popup.style.left = "50%", this._popup.style.transform = "translateX(-50%)";
4223
- break;
4224
- case "bottom-right":
4225
- this._popup.style.bottom = this._bottom, this._popup.style.right = this._right;
4226
- break;
4227
- case "bottom-left":
4228
- this._popup.style.bottom = this._bottom, this._popup.style.left = this._left;
4229
- break;
4230
- case "bottom-center":
4231
- this._popup.style.bottom = this._bottom, this._popup.style.left = "50%", this._popup.style.transform = "translateX(-50%)";
4232
- break;
4233
- case "center-right":
4234
- this._popup.style.top = "50%", this._popup.style.right = this._right, this._popup.style.transform = "translateY(-50%)";
4235
- break;
4236
- case "center-left":
4237
- this._popup.style.top = "50%", this._popup.style.left = this._left, this._popup.style.transform = "translateY(-50%)";
4238
- break;
4239
- case "center-center":
4240
- this._popup.style.top = "50%", this._popup.style.left = "50%", this._popup.style.transform = "translate(-50%, -50%)";
4241
- break;
4242
- }
4243
- }
4244
- togglePopup(e) {
4245
- e.stopPropagation(), this._popup.style.display === "block" ? this._popup.style.display = "none" : this._popup.style.display = "block";
4246
- }
4247
- handleOutsideClick(e) {
4248
- this.contains(e.target) || (this._popup.style.display = "none");
4249
- }
4250
- setContent(e) {
4251
- this._inbox.innerHTML = "", this._inbox.appendChild(e);
4252
- }
4253
- setSize(e, i) {
4254
- this._width = e, this._height = i, this._popup.style.width = e, this._popup.style.height = i;
4255
- }
4256
- setPosition(e) {
4257
- var i, s;
4258
- this.isValidPosition(e) ? (this._popupAlignment = e, this.updatePopupPosition()) : (s = (i = v.shared.client) == null ? void 0 : i.options.logger) == null || s.error(`Invalid position: ${e}`);
4259
- }
4260
- setFeedType(e) {
4261
- this._inbox.setFeedType(e);
4262
- }
4263
- // Factory methods
4264
- setPopupHeader(e) {
4265
- this._inbox.setHeader(e);
4266
- }
4267
- removePopupHeader() {
4268
- this._inbox.removeHeader();
4269
- }
4270
- setPopupLoadingState(e) {
4271
- this._inbox.setLoadingState(e);
4272
- }
4273
- setPopupEmptyState(e) {
4274
- this._inbox.setEmptyState(e);
4275
- }
4276
- setPopupErrorState(e) {
4277
- this._inbox.setErrorState(e);
4278
- }
4279
- setPopupListItem(e) {
4280
- this._inbox.setListItem(e);
4281
- }
4282
- setPopupPaginationItem(e) {
4283
- this._inbox.setPaginationItem(e);
4284
- }
4285
- setPopupMenuButton(e) {
4286
- this._popupMenuButtonFactory = e, this.render();
4287
- }
4288
- render() {
4289
- const e = P.shared.unreadCount;
4290
- switch (this._popupMenuButtonFactory) {
4291
- case void 0:
4292
- case null:
4293
- this._triggerButton.build(void 0), this._triggerButton.onUnreadCountChange(e);
4294
- break;
4295
- default:
4296
- const i = this._popupMenuButtonFactory({ unreadCount: e });
4297
- this._triggerButton.build(i);
4298
- break;
4299
- }
4300
- }
4301
- disconnectedCallback() {
4302
- var e;
4303
- (e = this._datastoreListener) == null || e.remove(), this._themeManager.cleanup();
4304
- }
4305
- }
4306
- customElements.get("courier-inbox-menu") || customElements.define("courier-inbox-menu", un);
4307
- class xn {
4308
- onDataSetChange(t, e) {
4309
- }
4310
- onPageAdded(t, e) {
4311
- }
4312
- onUnreadCountChange(t) {
4313
- }
4314
- onMessageAdd(t, e, i) {
4315
- }
4316
- onMessageRemove(t, e, i) {
4317
- }
4318
- onMessageUpdate(t, e, i) {
4319
- }
4320
- onError(t) {
4321
- }
4322
- }
4323
- export {
4324
- Uo as CourierInbox,
4325
- Oo as CourierInboxDataStoreListener,
4326
- P as CourierInboxDatastore,
4327
- xn as CourierInboxDatastoreEvents,
4328
- Ho as CourierInboxHeader,
4329
- un as CourierInboxMenu,
4330
- zo as CourierInboxThemeManager,
4331
- Ao as CourierListItem,
4332
- _n as archiveMessage,
4333
- bn as clickMessage,
4334
- Oe as defaultDarkTheme,
4335
- Te as defaultLightTheme,
4336
- ln as getMessageTime,
4337
- gn as markAsRead,
4338
- mn as markAsUnread,
4339
- dn as mergeTheme,
4340
- fn as openMessage
4341
- };