@trycourier/courier-react 8.0.14-beta → 8.0.15-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.
Files changed (5) hide show
  1. package/dist/index.js +2 -2
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +574 -299
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -4,92 +4,259 @@ import { flushSync } from "react-dom";
4
4
  var __defProp$1 = Object.defineProperty;
5
5
  var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
6
6
  var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
7
+ const CLOSE_CODE_NORMAL_CLOSURE = 1e3;
8
+ const IPW_VERSION = "v1";
7
9
  const _CourierSocket = class _CourierSocket2 {
8
- constructor(url, options) {
10
+ constructor(options) {
9
11
  __publicField$1(this, "webSocket", null);
10
- __publicField$1(this, "pingInterval", null);
11
- __publicField$1(this, "onOpen");
12
- __publicField$1(this, "onMessageReceived");
13
- __publicField$1(this, "onClose");
14
- __publicField$1(this, "onError");
12
+ __publicField$1(this, "retryAttempt", 0);
13
+ __publicField$1(this, "retryTimeoutId", null);
15
14
  __publicField$1(this, "url");
16
15
  __publicField$1(this, "options");
17
- this.url = url;
16
+ this.url = options.apiUrls.inbox.webSocket;
18
17
  this.options = options;
19
18
  }
20
19
  /**
21
- * Dynamically checks if the WebSocket is connected
20
+ * Connects to the Courier WebSocket server.
21
+ *
22
+ * If the connection is already established, this is a no-op.
23
+ *
24
+ * @returns A promise that resolves when the connection is established or rejects if the connection could not be established.
22
25
  */
23
- get isConnected() {
24
- return this.webSocket !== null;
25
- }
26
26
  async connect() {
27
- this.disconnect();
27
+ var _a;
28
+ this.clearRetryTimeout();
29
+ if (this.isConnecting || this.isOpen) {
30
+ (_a = this.options.logger) == null ? void 0 : _a.info("Attempted to open a WebSocket connection, but one already exists.");
31
+ return Promise.reject(new Error("WebSocket connection already exists"));
32
+ }
28
33
  return new Promise((resolve, reject) => {
29
- try {
30
- this.webSocket = new WebSocket(this.url);
31
- this.webSocket.onopen = () => {
32
- var _a;
33
- (_a = this.onOpen) == null ? void 0 : _a.call(this);
34
- resolve();
35
- };
36
- this.webSocket.onmessage = (event) => {
37
- var _a;
38
- (_a = this.onMessageReceived) == null ? void 0 : _a.call(this, event.data);
39
- };
40
- this.webSocket.onclose = (event) => {
41
- var _a;
42
- this.webSocket = null;
43
- (_a = this.onClose) == null ? void 0 : _a.call(this, event.code, event.reason);
44
- };
45
- this.webSocket.onerror = (event) => {
46
- var _a;
47
- this.webSocket = null;
48
- const error = new Error("Courier Socket connection failed");
49
- error.originalEvent = event;
50
- (_a = this.onError) == null ? void 0 : _a.call(this, error);
51
- reject(error);
52
- };
53
- } catch (error) {
54
- this.webSocket = null;
55
- reject(error);
56
- }
34
+ this.webSocket = new WebSocket(this.getWebSocketUrl());
35
+ this.webSocket.addEventListener("open", (event) => {
36
+ this.retryAttempt = 0;
37
+ this.onOpen(event);
38
+ resolve();
39
+ });
40
+ this.webSocket.addEventListener("message", async (event) => {
41
+ var _a2;
42
+ try {
43
+ const json = JSON.parse(event.data);
44
+ if ("event" in json && json.event === "reconnect") {
45
+ this.close(CLOSE_CODE_NORMAL_CLOSURE);
46
+ await this.retryConnection(json.retryAfter * 1e3);
47
+ return;
48
+ }
49
+ this.onMessageReceived(json);
50
+ } catch (error) {
51
+ (_a2 = this.options.logger) == null ? void 0 : _a2.error("Error parsing socket message", error);
52
+ }
53
+ });
54
+ this.webSocket.addEventListener("close", (event) => {
55
+ if (event.code !== CLOSE_CODE_NORMAL_CLOSURE) {
56
+ const courierCloseEvent = _CourierSocket2.parseCloseEvent(event);
57
+ if (courierCloseEvent.retryAfterSeconds) {
58
+ this.retryConnection(courierCloseEvent.retryAfterSeconds * 1e3);
59
+ } else {
60
+ this.retryConnection();
61
+ }
62
+ }
63
+ this.onClose(event);
64
+ });
65
+ this.webSocket.addEventListener("error", (event) => {
66
+ this.retryConnection();
67
+ this.onError(event);
68
+ reject(event);
69
+ });
57
70
  });
58
71
  }
59
- disconnect() {
60
- this.stopPing();
61
- if (this.webSocket) {
62
- this.webSocket.close(_CourierSocket2.NORMAL_CLOSURE_STATUS);
63
- this.webSocket = null;
72
+ /**
73
+ * Closes the WebSocket connection.
74
+ *
75
+ * See {@link https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/close} for more details.
76
+ *
77
+ * @param code The WebSocket close code. Defaults to {@link CLOSE_CODE_NORMAL_CLOSURE}.
78
+ * @param reason The WebSocket close reason.
79
+ */
80
+ close(code = CLOSE_CODE_NORMAL_CLOSURE, reason) {
81
+ if (this.webSocket === null) {
82
+ return;
64
83
  }
84
+ this.webSocket.close(code, reason);
85
+ this.webSocket = null;
65
86
  }
66
- async send(message) {
67
- if (!this.webSocket) {
68
- return false;
87
+ /**
88
+ * Sends a message to the Courier WebSocket server.
89
+ *
90
+ * @param message The message to send. The message will be serialized to a JSON string.
91
+ */
92
+ send(message) {
93
+ var _a;
94
+ if (this.webSocket === null || this.isConnecting) {
95
+ (_a = this.options.logger) == null ? void 0 : _a.info("Attempted to send a message, but the WebSocket is not yet open.");
96
+ return;
69
97
  }
70
98
  const json = JSON.stringify(message);
71
- return this.webSocket.send(json) !== void 0;
99
+ this.webSocket.send(json);
72
100
  }
73
- keepAlive(props) {
74
- this.stopPing();
75
- this.pingInterval = setInterval(async () => {
76
- var _a;
101
+ get userId() {
102
+ return this.options.userId;
103
+ }
104
+ get logger() {
105
+ return this.options.logger;
106
+ }
107
+ /**
108
+ * Whether the WebSocket connection is currently being established.
109
+ */
110
+ get isConnecting() {
111
+ return this.webSocket !== null && this.webSocket.readyState === WebSocket.CONNECTING;
112
+ }
113
+ /**
114
+ * Whether the WebSocket connection is currently open.
115
+ */
116
+ get isOpen() {
117
+ return this.webSocket !== null && this.webSocket.readyState === WebSocket.OPEN;
118
+ }
119
+ /**
120
+ * Constructs the WebSocket URL for the Courier WebSocket server using context
121
+ * from the {@link CourierClientOptions} passed to the constructor.
122
+ *
123
+ * @returns The WebSocket URL
124
+ */
125
+ getWebSocketUrl() {
126
+ const accessToken = this.options.accessToken;
127
+ const connectionId = this.options.connectionId;
128
+ const userId = this.userId;
129
+ return `${this.url}?auth=${accessToken}&cid=${connectionId}&iwpv=${IPW_VERSION}&userId=${userId}`;
130
+ }
131
+ /**
132
+ * Parses the Retry-After time from the WebSocket close event reason,
133
+ * and returns a new {@link CourierCloseEvent} with the retry after time in seconds
134
+ * if present.
135
+ *
136
+ * The Courier WebSocket server may send the close event reason in the following format:
137
+ *
138
+ * ```json
139
+ * {
140
+ * "Retry-After": "10" // The retry after time in seconds
141
+ * }
142
+ * ```
143
+ *
144
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent/reason
145
+ *
146
+ * @param closeEvent The WebSocket close event.
147
+ * @returns The WebSocket close event with the retry after time in seconds.
148
+ */
149
+ static parseCloseEvent(closeEvent) {
150
+ if (closeEvent.reason === null || closeEvent.reason === "") {
151
+ return closeEvent;
152
+ }
153
+ try {
154
+ const jsonReason = JSON.parse(closeEvent.reason);
155
+ if (!jsonReason[_CourierSocket2.RETRY_AFTER_KEY]) {
156
+ return closeEvent;
157
+ }
158
+ const retryAfterSeconds = parseInt(jsonReason[_CourierSocket2.RETRY_AFTER_KEY]);
159
+ if (Number.isNaN(retryAfterSeconds) || retryAfterSeconds < 0) {
160
+ return closeEvent;
161
+ }
162
+ return {
163
+ ...closeEvent,
164
+ retryAfterSeconds
165
+ };
166
+ } catch (error) {
167
+ return closeEvent;
168
+ }
169
+ }
170
+ /**
171
+ * Calculates the retry backoff time in milliseconds based on the current retry attempt.
172
+ */
173
+ getBackoffTimeInMillis() {
174
+ const backoffIntervalInMillis = _CourierSocket2.BACKOFF_INTERVALS_IN_MILLIS[this.retryAttempt];
175
+ const lowerBound = backoffIntervalInMillis - backoffIntervalInMillis * _CourierSocket2.BACKOFF_JITTER_FACTOR;
176
+ const upperBound = backoffIntervalInMillis + backoffIntervalInMillis * _CourierSocket2.BACKOFF_JITTER_FACTOR;
177
+ return Math.floor(Math.random() * (upperBound - lowerBound) + lowerBound);
178
+ }
179
+ /**
180
+ * Retries the connection to the Courier WebSocket server after
181
+ * either {@param suggestedBackoffTimeInMillis} or a random backoff time
182
+ * calculated using {@link getBackoffTimeInMillis}.
183
+ *
184
+ * @param suggestedBackoffTimeInMillis The suggested backoff time in milliseconds.
185
+ * @returns A promise that resolves when the connection is established or rejects if the connection could not be established.
186
+ */
187
+ async retryConnection(suggestedBackoffTimeInMillis) {
188
+ var _a, _b, _c;
189
+ if (this.retryTimeoutId !== null) {
190
+ (_a = this.logger) == null ? void 0 : _a.debug("Skipping retry attempt because a previous retry is already scheduled.");
191
+ return;
192
+ }
193
+ if (this.retryAttempt >= _CourierSocket2.MAX_RETRY_ATTEMPTS) {
194
+ (_b = this.logger) == null ? void 0 : _b.error(`Max retry attempts (${_CourierSocket2.MAX_RETRY_ATTEMPTS}) reached.`);
195
+ return;
196
+ }
197
+ const backoffTimeInMillis = suggestedBackoffTimeInMillis != null ? suggestedBackoffTimeInMillis : this.getBackoffTimeInMillis();
198
+ this.retryTimeoutId = window.setTimeout(async () => {
77
199
  try {
78
- await this.send({ action: "keepAlive" });
200
+ await this.connect();
79
201
  } catch (error) {
80
- (_a = this.options.logger) == null ? void 0 : _a.error("Error occurred on Keep Alive:", error);
81
202
  }
82
- }, (props == null ? void 0 : props.intervalInMillis) ?? 3e5);
203
+ }, backoffTimeInMillis);
204
+ (_c = this.logger) == null ? void 0 : _c.debug(`Retrying connection in ${Math.floor(backoffTimeInMillis / 1e3)}s. Retry attempt ${this.retryAttempt + 1} of ${_CourierSocket2.MAX_RETRY_ATTEMPTS}.`);
205
+ this.retryAttempt++;
83
206
  }
84
- stopPing() {
85
- if (this.pingInterval) {
86
- clearInterval(this.pingInterval);
87
- this.pingInterval = null;
207
+ /**
208
+ * Clears the retry timeout if it exists.
209
+ */
210
+ clearRetryTimeout() {
211
+ if (this.retryTimeoutId !== null) {
212
+ window.clearTimeout(this.retryTimeoutId);
213
+ this.retryTimeoutId = null;
88
214
  }
89
215
  }
90
216
  };
91
- __publicField$1(_CourierSocket, "NORMAL_CLOSURE_STATUS", 1e3);
217
+ __publicField$1(_CourierSocket, "BACKOFF_JITTER_FACTOR", 0.5);
218
+ __publicField$1(_CourierSocket, "MAX_RETRY_ATTEMPTS", 5);
219
+ __publicField$1(_CourierSocket, "BACKOFF_INTERVALS_IN_MILLIS", [
220
+ 3e4,
221
+ // 30 seconds
222
+ 6e4,
223
+ // 1 minute
224
+ 12e4,
225
+ // 2 minutes
226
+ 24e4,
227
+ // 4 minutes
228
+ 48e4
229
+ // 8 minutes
230
+ ]);
231
+ __publicField$1(_CourierSocket, "RETRY_AFTER_KEY", "Retry-After");
92
232
  let CourierSocket = _CourierSocket;
233
+ var ClientAction = /* @__PURE__ */ ((ClientAction2) => {
234
+ ClientAction2["Subscribe"] = "subscribe";
235
+ ClientAction2["Unsubscribe"] = "unsubscribe";
236
+ ClientAction2["Pong"] = "pong";
237
+ ClientAction2["Ping"] = "ping";
238
+ return ClientAction2;
239
+ })(ClientAction || {});
240
+ var ServerAction = /* @__PURE__ */ ((ServerAction2) => {
241
+ ServerAction2["Ack"] = "ack";
242
+ ServerAction2["Ping"] = "ping";
243
+ ServerAction2["Pong"] = "pong";
244
+ return ServerAction2;
245
+ })(ServerAction || {});
246
+ var MessageEvent = /* @__PURE__ */ ((MessageEvent2) => {
247
+ MessageEvent2["NewMessage"] = "message";
248
+ MessageEvent2["Archive"] = "archive";
249
+ MessageEvent2["ArchiveAll"] = "archive-all";
250
+ MessageEvent2["ArchiveRead"] = "archive-read";
251
+ MessageEvent2["Clicked"] = "clicked";
252
+ MessageEvent2["MarkAllRead"] = "mark-all-read";
253
+ MessageEvent2["Opened"] = "opened";
254
+ MessageEvent2["Read"] = "read";
255
+ MessageEvent2["Unarchive"] = "unarchive";
256
+ MessageEvent2["Unopened"] = "unopened";
257
+ MessageEvent2["Unread"] = "unread";
258
+ return MessageEvent2;
259
+ })(MessageEvent || {});
93
260
  const getCourierApiUrls = (urls) => ({
94
261
  courier: {
95
262
  rest: (urls == null ? void 0 : urls.courier.rest) || "https://api.courier.com",
@@ -131,12 +298,27 @@ class Logger {
131
298
  }
132
299
  }
133
300
  }
134
- class UUID {
135
- static generate(prefix) {
136
- const id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
137
- return prefix ? prefix + id : id;
301
+ const _UUID = class _UUID2 {
302
+ /**
303
+ * nanoid
304
+ * Copyright 2017 Andrey Sitnik <andrey@sitnik.ru>
305
+ *
306
+ * https://github.com/ai/nanoid/blob/main/LICENSE
307
+ *
308
+ * @param size - The size of the UUID to generate.
309
+ * @returns A string representing the UUID.
310
+ */
311
+ static nanoid(size = 21) {
312
+ let id = "";
313
+ let bytes = crypto.getRandomValues(new Uint8Array(size |= 0));
314
+ while (size--) {
315
+ id += _UUID2.ALPHABET[bytes[size] & 63];
316
+ }
317
+ return id;
138
318
  }
139
- }
319
+ };
320
+ __publicField$1(_UUID, "ALPHABET", "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict");
321
+ let UUID = _UUID;
140
322
  class CourierRequestError extends Error {
141
323
  constructor(code, message, type) {
142
324
  super(message);
@@ -164,8 +346,9 @@ Response JSON: ${JSON.stringify(data.response, null, 2)}
164
346
  `);
165
347
  }
166
348
  async function http(props) {
167
- const validCodes = props.validCodes ?? [200];
168
- const uid = props.options.showLogs ? UUID.generate() : void 0;
349
+ var _a;
350
+ const validCodes = (_a = props.validCodes) != null ? _a : [200];
351
+ const uid = props.options.showLogs ? UUID.nanoid() : void 0;
169
352
  const request = new Request(props.url, {
170
353
  method: props.method,
171
354
  headers: {
@@ -215,7 +398,7 @@ async function http(props) {
215
398
  return data;
216
399
  }
217
400
  async function graphql(props) {
218
- const uid = props.options.showLogs ? UUID.generate() : void 0;
401
+ const uid = props.options.showLogs ? UUID.nanoid() : void 0;
219
402
  if (uid) {
220
403
  logRequest(props.options.logger, uid, "GraphQL", {
221
404
  url: props.url,
@@ -304,70 +487,120 @@ class BrandClient extends Client {
304
487
  return json.data.brand;
305
488
  }
306
489
  }
307
- class InboxSocket extends CourierSocket {
490
+ const _CourierInboxSocket = class _CourierInboxSocket2 extends CourierSocket {
308
491
  constructor(options) {
309
- const url = InboxSocket.buildUrl(options);
310
- super(url, options);
311
- __publicField$1(this, "receivedMessage");
312
- __publicField$1(this, "receivedMessageEvent");
313
- this.onMessageReceived = (data) => this.convertToType(data);
492
+ super(options);
493
+ __publicField$1(this, "pingIntervalId", null);
494
+ __publicField$1(this, "messageEventListeners", []);
314
495
  }
315
- convertToType(data) {
316
- var _a, _b, _c, _d;
317
- try {
318
- const payload = JSON.parse(data);
319
- switch (payload.type) {
320
- case "event":
321
- const messageEvent = JSON.parse(data);
322
- (_a = this.receivedMessageEvent) == null ? void 0 : _a.call(this, messageEvent);
323
- break;
324
- case "message":
325
- const message = JSON.parse(data);
326
- (_b = this.receivedMessage) == null ? void 0 : _b.call(this, message);
327
- break;
328
- }
329
- } catch (error) {
330
- (_c = this.options.logger) == null ? void 0 : _c.error("Error parsing socket message", error);
331
- if (error instanceof Error) {
332
- (_d = this.onError) == null ? void 0 : _d.call(this, error);
496
+ onOpen(_) {
497
+ this.restartPingInterval();
498
+ return Promise.resolve();
499
+ }
500
+ onMessageReceived(data) {
501
+ if ("action" in data && data.action === ServerAction.Ping) {
502
+ const envelope = data;
503
+ this.sendPong(envelope);
504
+ }
505
+ if ("event" in data) {
506
+ for (const listener of this.messageEventListeners) {
507
+ listener(data);
333
508
  }
334
509
  }
510
+ this.restartPingInterval();
511
+ return Promise.resolve();
335
512
  }
336
- async sendSubscribe(props) {
337
- var _a;
338
- const subscription = {
339
- action: "subscribe",
513
+ onClose(_) {
514
+ return Promise.resolve();
515
+ }
516
+ onError(_) {
517
+ return Promise.resolve();
518
+ }
519
+ /**
520
+ * Sends a subscribe message to the server.
521
+ *
522
+ * Subscribes to all events for the user.
523
+ */
524
+ sendSubscribe() {
525
+ const envelope = {
526
+ tid: UUID.nanoid(),
527
+ action: ClientAction.Subscribe,
340
528
  data: {
341
- userAgent: "courier-js",
342
- // TODO: Equivalent to Courier.agent.value()
343
- channel: this.options.userId,
344
- event: "*",
345
- version: (props == null ? void 0 : props.version) ?? 5
529
+ channel: this.userId,
530
+ event: "*"
346
531
  }
347
532
  };
348
- if (this.options.connectionId) {
349
- subscription.data.clientSourceId = this.options.connectionId;
350
- }
351
- if (this.options.tenantId) {
352
- subscription.data.accountId = this.options.tenantId;
353
- }
354
- (_a = this.options.logger) == null ? void 0 : _a.debug("Sending subscribe request", subscription);
355
- await this.send(subscription);
533
+ this.send(envelope);
356
534
  }
357
- static buildUrl(options) {
358
- var _a;
359
- let url = ((_a = options.apiUrls) == null ? void 0 : _a.inbox.webSocket) ?? "";
360
- if (options.accessToken) {
361
- url += `/?auth=${options.accessToken}`;
535
+ /**
536
+ * Sends an unsubscribe message to the server.
537
+ *
538
+ * Unsubscribes from all events for the user.
539
+ */
540
+ sendUnsubscribe() {
541
+ const envelope = {
542
+ tid: UUID.nanoid(),
543
+ action: ClientAction.Unsubscribe,
544
+ data: {
545
+ channel: this.userId
546
+ }
547
+ };
548
+ this.send(envelope);
549
+ }
550
+ /**
551
+ * Adds a message event listener, called when a message event is received
552
+ * from the Courier WebSocket server.
553
+ *
554
+ * @param listener The listener function
555
+ */
556
+ addMessageEventListener(listener) {
557
+ this.messageEventListeners.push(listener);
558
+ }
559
+ /**
560
+ * Send a ping message to the server.
561
+ *
562
+ * ping/pong is implemented at the application layer since the browser's
563
+ * WebSocket implementation does not support control-level ping/pong.
564
+ */
565
+ sendPing() {
566
+ const envelope = {
567
+ tid: UUID.nanoid(),
568
+ action: ClientAction.Ping
569
+ };
570
+ this.send(envelope);
571
+ }
572
+ /**
573
+ * Send a pong response to the server.
574
+ *
575
+ * ping/pong is implemented at the application layer since the browser's
576
+ * WebSocket implementation does not support control-level ping/pong.
577
+ */
578
+ sendPong(incomingMessage) {
579
+ const response = {
580
+ tid: incomingMessage.tid,
581
+ action: ClientAction.Pong
582
+ };
583
+ this.send(response);
584
+ }
585
+ /**
586
+ * Restart the ping interval, clearing the previous interval if it exists.
587
+ */
588
+ restartPingInterval() {
589
+ if (this.pingIntervalId) {
590
+ window.clearInterval(this.pingIntervalId);
362
591
  }
363
- return url;
592
+ this.pingIntervalId = window.setInterval(() => {
593
+ this.sendPing();
594
+ }, _CourierInboxSocket2.PING_INTERVAL_MILLIS);
364
595
  }
365
- }
596
+ };
597
+ __publicField$1(_CourierInboxSocket, "PING_INTERVAL_MILLIS", 6e4);
598
+ let CourierInboxSocket = _CourierInboxSocket;
366
599
  class InboxClient extends Client {
367
600
  constructor(options) {
368
601
  super(options);
369
602
  __publicField$1(this, "socket");
370
- this.socket = new InboxSocket(options);
603
+ this.socket = new CourierInboxSocket(options);
371
604
  }
372
605
  /**
373
606
  * Get paginated messages
@@ -376,10 +609,11 @@ class InboxClient extends Client {
376
609
  * @returns Promise resolving to paginated messages response
377
610
  */
378
611
  async getMessages(props) {
612
+ var _a;
379
613
  const query = `
380
614
  query GetInboxMessages(
381
615
  $params: FilterParamsInput = { ${this.options.tenantId ? `accountId: "${this.options.tenantId}"` : ""} }
382
- $limit: Int = ${(props == null ? void 0 : props.paginationLimit) ?? 24}
616
+ $limit: Int = ${(_a = props == null ? void 0 : props.paginationLimit) != null ? _a : 24}
383
617
  $after: String ${(props == null ? void 0 : props.startCursor) ? `= "${props.startCursor}"` : ""}
384
618
  ) {
385
619
  count(params: $params)
@@ -428,10 +662,11 @@ class InboxClient extends Client {
428
662
  * @returns Promise resolving to paginated archived messages response
429
663
  */
430
664
  async getArchivedMessages(props) {
665
+ var _a;
431
666
  const query = `
432
667
  query GetInboxMessages(
433
668
  $params: FilterParamsInput = { ${this.options.tenantId ? `accountId: "${this.options.tenantId}"` : ""}, archived: true }
434
- $limit: Int = ${(props == null ? void 0 : props.paginationLimit) ?? 24}
669
+ $limit: Int = ${(_a = props == null ? void 0 : props.paginationLimit) != null ? _a : 24}
435
670
  $after: String ${(props == null ? void 0 : props.startCursor) ? `= "${props.startCursor}"` : ""}
436
671
  ) {
437
672
  count(params: $params)
@@ -478,6 +713,7 @@ class InboxClient extends Client {
478
713
  * @returns Promise resolving to number of unread messages
479
714
  */
480
715
  async getUnreadMessageCount() {
716
+ var _a2;
481
717
  var _a;
482
718
  const query = `
483
719
  query GetMessages {
@@ -493,7 +729,7 @@ class InboxClient extends Client {
493
729
  },
494
730
  url: this.options.apiUrls.inbox.graphql
495
731
  });
496
- return ((_a = response.data) == null ? void 0 : _a.count) ?? 0;
732
+ return (_a2 = (_a = response.data) == null ? void 0 : _a.count) != null ? _a2 : 0;
497
733
  }
498
734
  /**
499
735
  * Track a click event
@@ -976,13 +1212,14 @@ class TrackingClient extends Client {
976
1212
  }
977
1213
  class CourierClient extends Client {
978
1214
  constructor(props) {
1215
+ var _a2;
979
1216
  var _a, _b;
980
1217
  const showLogs = props.showLogs !== void 0 ? props.showLogs : process.env.NODE_ENV === "development";
981
1218
  const baseOptions = {
982
1219
  ...props,
983
1220
  showLogs,
984
1221
  apiUrls: props.apiUrls || getCourierApiUrls(),
985
- accessToken: props.jwt ?? props.publicApiKey
1222
+ accessToken: (_a2 = props.jwt) != null ? _a2 : props.publicApiKey
986
1223
  };
987
1224
  super({
988
1225
  ...baseOptions,
@@ -1027,7 +1264,7 @@ class AuthenticationListener {
1027
1264
  }
1028
1265
  const _Courier = class _Courier2 {
1029
1266
  constructor() {
1030
- __publicField$1(this, "id", UUID.generate());
1267
+ __publicField$1(this, "id", UUID.nanoid());
1031
1268
  __publicField$1(this, "instanceClient");
1032
1269
  __publicField$1(this, "_paginationLimit", 24);
1033
1270
  __publicField$1(this, "authenticationListeners", []);
@@ -1060,7 +1297,8 @@ const _Courier = class _Courier2 {
1060
1297
  * @param options - The options for the Courier client
1061
1298
  */
1062
1299
  signIn(props) {
1063
- const connectionId = props.connectionId ?? UUID.generate();
1300
+ var _a;
1301
+ const connectionId = (_a = props.connectionId) != null ? _a : UUID.nanoid();
1064
1302
  this.instanceClient = new CourierClient({ ...props, connectionId });
1065
1303
  this.notifyAuthenticationListeners({ userId: props.userId });
1066
1304
  }
@@ -1257,6 +1495,7 @@ class CourierButton extends CourierSystemThemeElement {
1257
1495
  });
1258
1496
  }
1259
1497
  getStyles(props) {
1498
+ var _a, _b, _c, _d, _e, _f, _g, _h;
1260
1499
  const defaultTextColor = () => {
1261
1500
  const secondary = CourierButtonVariants.secondary(this.currentSystemTheme);
1262
1501
  return secondary.textColor;
@@ -1292,18 +1531,18 @@ class CourierButton extends CourierSystemThemeElement {
1292
1531
 
1293
1532
  button {
1294
1533
  border: none;
1295
- border-radius: ${props.borderRadius ?? defaultBorderRadius()};
1296
- font-weight: ${props.fontWeight ?? defaultFontWeight()};
1297
- font-family: ${props.fontFamily ?? "inherit"};
1298
- font-size: ${props.fontSize ?? defaultFontSize()};
1534
+ border-radius: ${(_a = props.borderRadius) != null ? _a : defaultBorderRadius()};
1535
+ font-weight: ${(_b = props.fontWeight) != null ? _b : defaultFontWeight()};
1536
+ font-family: ${(_c = props.fontFamily) != null ? _c : "inherit"};
1537
+ font-size: ${(_d = props.fontSize) != null ? _d : defaultFontSize()};
1299
1538
  padding: 6px 10px;
1300
1539
  cursor: pointer;
1301
1540
  width: 100%;
1302
1541
  height: 100%;
1303
- background-color: ${props.backgroundColor ?? defaultBackgroundColor()};
1304
- color: ${props.textColor ?? defaultTextColor()};
1305
- border: ${props.border ?? defaultBorder()};
1306
- box-shadow: ${props.shadow ?? defaultShadow()};
1542
+ background-color: ${(_e = props.backgroundColor) != null ? _e : defaultBackgroundColor()};
1543
+ color: ${(_f = props.textColor) != null ? _f : defaultTextColor()};
1544
+ border: ${(_g = props.border) != null ? _g : defaultBorder()};
1545
+ box-shadow: ${(_h = props.shadow) != null ? _h : defaultShadow()};
1307
1546
  touch-action: manipulation;
1308
1547
  }
1309
1548
 
@@ -1364,7 +1603,7 @@ class CourierIcon extends BaseElement {
1364
1603
  __publicField2(this, "_svg");
1365
1604
  __publicField2(this, "_iconContainer");
1366
1605
  __publicField2(this, "_style");
1367
- this._color = color ?? CourierColors.black[500];
1606
+ this._color = color != null ? color : CourierColors.black[500];
1368
1607
  this._svg = svg;
1369
1608
  const shadow = this.attachShadow({ mode: "open" });
1370
1609
  this._iconContainer = document.createElement("div");
@@ -1582,7 +1821,7 @@ class CourierElement extends CourierSystemThemeElement {
1582
1821
  this.shadow.replaceChildren();
1583
1822
  return;
1584
1823
  }
1585
- const element = newElement ?? this.defaultElement();
1824
+ const element = newElement != null ? newElement : this.defaultElement();
1586
1825
  this.shadow.replaceChildren(element);
1587
1826
  }
1588
1827
  // Default element to be used if no factory is provided
@@ -1608,13 +1847,14 @@ class CourierInfoState extends CourierElement {
1608
1847
  this._props = props;
1609
1848
  }
1610
1849
  defaultElement() {
1850
+ var _a2;
1611
1851
  var _a, _b;
1612
1852
  const container = document.createElement("div");
1613
1853
  this._title = document.createElement("h2");
1614
1854
  if ((_a = this._props.title) == null ? void 0 : _a.text) {
1615
1855
  this._title.textContent = this._props.title.text;
1616
1856
  }
1617
- this._button = new CourierButton(this._props.button ?? CourierButtonVariants.secondary(this.currentSystemTheme));
1857
+ this._button = new CourierButton((_a2 = this._props.button) != null ? _a2 : CourierButtonVariants.secondary(this.currentSystemTheme));
1618
1858
  this._style = document.createElement("style");
1619
1859
  this._style.textContent = this.getStyles(this._props);
1620
1860
  container.className = "container";
@@ -1633,6 +1873,7 @@ class CourierInfoState extends CourierElement {
1633
1873
  this.updateStyles(this._props);
1634
1874
  }
1635
1875
  getStyles(props) {
1876
+ var _a2, _b2, _c2, _d2;
1636
1877
  var _a, _b, _c, _d;
1637
1878
  return `
1638
1879
  :host {
@@ -1655,10 +1896,10 @@ class CourierInfoState extends CourierElement {
1655
1896
 
1656
1897
  .container h2 {
1657
1898
  margin: 0;
1658
- color: ${((_a = props.title) == null ? void 0 : _a.textColor) ?? "red"};
1659
- font-size: ${((_b = props.title) == null ? void 0 : _b.fontSize) ?? "16px"};
1660
- font-weight: ${((_c = props.title) == null ? void 0 : _c.fontWeight) ?? "500"};
1661
- font-family: ${((_d = props.title) == null ? void 0 : _d.fontFamily) ?? "inherit"};
1899
+ color: ${(_a2 = (_a = props.title) == null ? void 0 : _a.textColor) != null ? _a2 : "red"};
1900
+ font-size: ${(_b2 = (_b = props.title) == null ? void 0 : _b.fontSize) != null ? _b2 : "16px"};
1901
+ font-weight: ${(_c2 = (_c = props.title) == null ? void 0 : _c.fontWeight) != null ? _c2 : "500"};
1902
+ font-family: ${(_d2 = (_d = props.title) == null ? void 0 : _d.fontFamily) != null ? _d2 : "inherit"};
1662
1903
  }
1663
1904
  `;
1664
1905
  }
@@ -1707,32 +1948,33 @@ class CourierIconButton extends BaseElement {
1707
1948
  this._style.textContent = this.getStyles();
1708
1949
  }
1709
1950
  getStyles() {
1951
+ var _a, _b, _c, _d, _e, _f, _g;
1710
1952
  return `
1711
1953
  :host {
1712
1954
  display: inline-block;
1713
- border-radius: ${this._borderRadius ?? "50%"};
1955
+ border-radius: ${(_a = this._borderRadius) != null ? _a : "50%"};
1714
1956
  }
1715
1957
 
1716
1958
  button {
1717
1959
  border: none;
1718
- border-radius: ${this._borderRadius ?? "50%"};
1960
+ border-radius: ${(_b = this._borderRadius) != null ? _b : "50%"};
1719
1961
  cursor: pointer;
1720
- width: ${this._width ?? "36px"};
1721
- height: ${this._height ?? "36px"};
1962
+ width: ${(_c = this._width) != null ? _c : "36px"};
1963
+ height: ${(_d = this._height) != null ? _d : "36px"};
1722
1964
  display: flex;
1723
1965
  align-items: center;
1724
1966
  justify-content: center;
1725
- background: ${this._backgroundColor ?? "transparent"};
1967
+ background: ${(_e = this._backgroundColor) != null ? _e : "transparent"};
1726
1968
  transition: background-color 0.2s ease;
1727
1969
  touch-action: manipulation;
1728
1970
  }
1729
1971
 
1730
1972
  button:hover {
1731
- background-color: ${this._hoverBackgroundColor ?? "red"};
1973
+ background-color: ${(_f = this._hoverBackgroundColor) != null ? _f : "red"};
1732
1974
  }
1733
1975
 
1734
1976
  button:active {
1735
- background-color: ${this._activeBackgroundColor ?? "red"};
1977
+ background-color: ${(_g = this._activeBackgroundColor) != null ? _g : "red"};
1736
1978
  }
1737
1979
 
1738
1980
  button:disabled {
@@ -1843,16 +2085,17 @@ class CourierInboxListItemMenu extends BaseElement {
1843
2085
  shadow.appendChild(menu);
1844
2086
  }
1845
2087
  getStyles() {
2088
+ var _a2, _b2, _c2, _d;
1846
2089
  var _a, _b, _c;
1847
2090
  const menu = (_c = (_b = (_a = this._theme.inbox) == null ? void 0 : _a.list) == null ? void 0 : _b.item) == null ? void 0 : _c.menu;
1848
2091
  return `
1849
2092
  :host {
1850
2093
  display: block;
1851
2094
  position: absolute;
1852
- background: ${(menu == null ? void 0 : menu.backgroundColor) ?? "red"};
1853
- border: ${(menu == null ? void 0 : menu.border) ?? "1px solid red"};
1854
- border-radius: ${(menu == null ? void 0 : menu.borderRadius) ?? "0px"};
1855
- box-shadow: ${(menu == null ? void 0 : menu.shadow) ?? "0 2px 8px red"};
2095
+ background: ${(_a2 = menu == null ? void 0 : menu.backgroundColor) != null ? _a2 : "red"};
2096
+ border: ${(_b2 = menu == null ? void 0 : menu.border) != null ? _b2 : "1px solid red"};
2097
+ border-radius: ${(_c2 = menu == null ? void 0 : menu.borderRadius) != null ? _c2 : "0px"};
2098
+ box-shadow: ${(_d = menu == null ? void 0 : menu.shadow) != null ? _d : "0 2px 8px red"};
1856
2099
  user-select: none;
1857
2100
  opacity: 0;
1858
2101
  pointer-events: none;
@@ -1937,13 +2180,16 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
1937
2180
  return _CourierInboxDatastore2.instance;
1938
2181
  }
1939
2182
  get unreadCount() {
1940
- return this._unreadCount ?? 0;
2183
+ var _a;
2184
+ return (_a = this._unreadCount) != null ? _a : 0;
1941
2185
  }
1942
2186
  get inboxDataSet() {
1943
- return this._inboxDataSet ?? { feedType: "inbox", messages: [], canPaginate: false, paginationCursor: null };
2187
+ var _a;
2188
+ return (_a = this._inboxDataSet) != null ? _a : { feedType: "inbox", messages: [], canPaginate: false, paginationCursor: null };
1944
2189
  }
1945
2190
  get archiveDataSet() {
1946
- return this._archiveDataSet ?? { feedType: "archive", messages: [], canPaginate: false, paginationCursor: null };
2191
+ var _a;
2192
+ return (_a = this._archiveDataSet) != null ? _a : { feedType: "archive", messages: [], canPaginate: false, paginationCursor: null };
1947
2193
  }
1948
2194
  addDataStoreListener(listener) {
1949
2195
  this._dataStoreListeners.push(listener);
@@ -1952,6 +2198,7 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
1952
2198
  this._dataStoreListeners = this._dataStoreListeners.filter((l) => l !== listener);
1953
2199
  }
1954
2200
  async fetchDataSet(props) {
2201
+ var _a2, _b2, _c2;
1955
2202
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
1956
2203
  if (props.canUseCache) {
1957
2204
  switch (props.feedType) {
@@ -1970,9 +2217,9 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
1970
2217
  const response = props.feedType === "inbox" ? await ((_a = Courier.shared.client) == null ? void 0 : _a.inbox.getMessages()) : await ((_b = Courier.shared.client) == null ? void 0 : _b.inbox.getArchivedMessages());
1971
2218
  return {
1972
2219
  feedType: props.feedType,
1973
- messages: ((_d = (_c = response == null ? void 0 : response.data) == null ? void 0 : _c.messages) == null ? void 0 : _d.nodes) ?? [],
1974
- canPaginate: ((_g = (_f = (_e = response == null ? void 0 : response.data) == null ? void 0 : _e.messages) == null ? void 0 : _f.pageInfo) == null ? void 0 : _g.hasNextPage) ?? false,
1975
- paginationCursor: ((_j = (_i = (_h = response == null ? void 0 : response.data) == null ? void 0 : _h.messages) == null ? void 0 : _i.pageInfo) == null ? void 0 : _j.startCursor) ?? null
2220
+ messages: (_a2 = (_d = (_c = response == null ? void 0 : response.data) == null ? void 0 : _c.messages) == null ? void 0 : _d.nodes) != null ? _a2 : [],
2221
+ canPaginate: (_b2 = (_g = (_f = (_e = response == null ? void 0 : response.data) == null ? void 0 : _e.messages) == null ? void 0 : _f.pageInfo) == null ? void 0 : _g.hasNextPage) != null ? _b2 : false,
2222
+ paginationCursor: (_c2 = (_j = (_i = (_h = response == null ? void 0 : response.data) == null ? void 0 : _h.messages) == null ? void 0 : _i.pageInfo) == null ? void 0 : _j.startCursor) != null ? _c2 : null
1976
2223
  };
1977
2224
  }
1978
2225
  async fetchUnreadCount(props) {
@@ -1981,7 +2228,7 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
1981
2228
  return this._unreadCount;
1982
2229
  }
1983
2230
  const unreadCount = await ((_a = Courier.shared.client) == null ? void 0 : _a.inbox.getUnreadMessageCount());
1984
- return unreadCount ?? 0;
2231
+ return unreadCount != null ? unreadCount : 0;
1985
2232
  }
1986
2233
  async load(props) {
1987
2234
  var _a, _b, _c;
@@ -1989,7 +2236,7 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
1989
2236
  if (!((_a = Courier.shared.client) == null ? void 0 : _a.options.userId)) {
1990
2237
  throw new Error("User is not signed in");
1991
2238
  }
1992
- const properties = props ?? { feedType: "inbox", canUseCache: true };
2239
+ const properties = props != null ? props : { feedType: "inbox", canUseCache: true };
1993
2240
  const [dataSet, unreadCount] = await Promise.all([
1994
2241
  this.fetchDataSet(properties),
1995
2242
  this.fetchUnreadCount(properties)
@@ -2004,9 +2251,10 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
2004
2251
  }
2005
2252
  this._unreadCount = unreadCount;
2006
2253
  this._dataStoreListeners.forEach((listener) => {
2254
+ var _a3;
2007
2255
  var _a2, _b2, _c2, _d;
2008
2256
  (_b2 = (_a2 = listener.events).onDataSetChange) == null ? void 0 : _b2.call(_a2, dataSet, properties.feedType);
2009
- (_d = (_c2 = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c2, this._unreadCount ?? 0);
2257
+ (_d = (_c2 = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c2, (_a3 = this._unreadCount) != null ? _a3 : 0);
2010
2258
  });
2011
2259
  } catch (error) {
2012
2260
  (_c = (_b = Courier.shared.client) == null ? void 0 : _b.options.logger) == null ? void 0 : _c.error("Error loading inbox:", error);
@@ -2042,73 +2290,70 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
2042
2290
  await Promise.all(dataSetPromises);
2043
2291
  }
2044
2292
  async connectSocket() {
2045
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
2293
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
2046
2294
  const socket = (_a = Courier.shared.client) == null ? void 0 : _a.inbox.socket;
2047
2295
  try {
2048
2296
  if (!socket) {
2049
2297
  (_c = (_b = Courier.shared.client) == null ? void 0 : _b.options.logger) == null ? void 0 : _c.info("CourierInbox socket not available");
2050
2298
  return;
2051
2299
  }
2052
- (_f = (_d = Courier.shared.client) == null ? void 0 : _d.options.logger) == null ? void 0 : _f.info("CourierInbox socket connectionId:", (_e = Courier.shared.client) == null ? void 0 : _e.options.connectionId);
2053
- if (socket.isConnected) {
2054
- (_h = (_g = Courier.shared.client) == null ? void 0 : _g.options.logger) == null ? void 0 : _h.info("CourierInbox socket already connected. Socket will not attempt reconnection.");
2300
+ if (socket.isConnecting || socket.isOpen) {
2301
+ (_f = (_d = Courier.shared.client) == null ? void 0 : _d.options.logger) == null ? void 0 : _f.info(`Inbox socket already connecting or open for client ID: [${(_e = Courier.shared.client) == null ? void 0 : _e.options.connectionId}]`);
2055
2302
  return;
2056
2303
  }
2057
- socket.receivedMessage = (message) => {
2058
- this.addMessage(message, 0, "inbox");
2059
- };
2060
- socket.receivedMessageEvent = (event) => {
2061
- let message;
2062
- if (event.messageId) {
2063
- message = this.getMessage({ messageId: event.messageId });
2304
+ socket.addMessageEventListener((event) => {
2305
+ if (event.event === MessageEvent.NewMessage) {
2306
+ const message2 = event.data;
2307
+ this.addMessage(message2, 0, "inbox");
2308
+ return;
2064
2309
  }
2310
+ const message = this.getMessage({ messageId: event.messageId });
2065
2311
  switch (event.event) {
2066
- case "mark-all-read":
2312
+ case MessageEvent.MarkAllRead:
2067
2313
  this.readAllMessages({ canCallApi: false });
2068
2314
  break;
2069
- case "read":
2315
+ case MessageEvent.Read:
2070
2316
  if (message) {
2071
2317
  this.readMessage({ message, canCallApi: false });
2072
2318
  }
2073
2319
  break;
2074
- case "unread":
2320
+ case MessageEvent.Unread:
2075
2321
  if (message) {
2076
2322
  this.unreadMessage({ message, canCallApi: false });
2077
2323
  }
2078
2324
  break;
2079
- case "opened":
2325
+ case MessageEvent.Opened:
2080
2326
  if (message) {
2081
2327
  this.openMessage({ message, canCallApi: false });
2082
2328
  }
2083
2329
  break;
2084
- case "archive":
2330
+ case MessageEvent.Archive:
2085
2331
  if (message) {
2086
2332
  this.archiveMessage({ message, canCallApi: false });
2087
2333
  }
2088
2334
  break;
2089
- case "archive-read":
2335
+ case MessageEvent.ArchiveRead:
2090
2336
  this.archiveReadMessages({ canCallApi: false });
2091
2337
  break;
2092
- case "click":
2338
+ case MessageEvent.Clicked:
2093
2339
  if (message) {
2094
2340
  this.clickMessage({ message, canCallApi: false });
2095
2341
  }
2096
2342
  break;
2097
- case "unarchive":
2343
+ case MessageEvent.Unarchive:
2098
2344
  if (message) {
2099
2345
  this.unarchiveMessage({ message, canCallApi: false });
2100
2346
  }
2101
2347
  break;
2102
- case "unopened":
2348
+ case MessageEvent.Unopened:
2103
2349
  break;
2104
2350
  }
2105
- };
2351
+ });
2106
2352
  await socket.connect();
2107
2353
  await socket.sendSubscribe();
2108
- socket.keepAlive();
2109
- (_j = (_i = Courier.shared.client) == null ? void 0 : _i.options.logger) == null ? void 0 : _j.info("CourierInbox socket connected");
2354
+ (_i = (_g = Courier.shared.client) == null ? void 0 : _g.options.logger) == null ? void 0 : _i.info(`Inbox socket connected for client ID: [${(_h = Courier.shared.client) == null ? void 0 : _h.options.connectionId}]`);
2110
2355
  } catch (error) {
2111
- (_l = (_k = Courier.shared.client) == null ? void 0 : _k.options.logger) == null ? void 0 : _l.error("Failed to connect socket:", error);
2356
+ (_k = (_j = Courier.shared.client) == null ? void 0 : _j.options.logger) == null ? void 0 : _k.error("Failed to connect socket:", error);
2112
2357
  }
2113
2358
  }
2114
2359
  /**
@@ -2117,8 +2362,12 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
2117
2362
  * @returns The message or undefined if it is not found
2118
2363
  */
2119
2364
  getMessage(props) {
2365
+ var _a2;
2120
2366
  var _a, _b;
2121
- return ((_a = this._inboxDataSet) == null ? void 0 : _a.messages.find((m) => m.messageId === props.messageId)) ?? ((_b = this._archiveDataSet) == null ? void 0 : _b.messages.find((m) => m.messageId === props.messageId));
2367
+ if (!props.messageId) {
2368
+ return void 0;
2369
+ }
2370
+ return (_a2 = (_a = this._inboxDataSet) == null ? void 0 : _a.messages.find((m) => m.messageId === props.messageId)) != null ? _a2 : (_b = this._archiveDataSet) == null ? void 0 : _b.messages.find((m) => m.messageId === props.messageId);
2122
2371
  }
2123
2372
  /**
2124
2373
  * Fetch the next page of messages
@@ -2126,6 +2375,7 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
2126
2375
  * @returns The next page of messages or null if there is no next page
2127
2376
  */
2128
2377
  async fetchNextPageOfMessages(props) {
2378
+ var _a2, _b2, _c2, _d2, _e2, _f2;
2129
2379
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
2130
2380
  switch (props.feedType) {
2131
2381
  case "inbox":
@@ -2141,9 +2391,9 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
2141
2391
  }));
2142
2392
  const dataSet = {
2143
2393
  feedType: "inbox",
2144
- messages: ((_d = (_c = response == null ? void 0 : response.data) == null ? void 0 : _c.messages) == null ? void 0 : _d.nodes) ?? [],
2145
- canPaginate: ((_g = (_f = (_e = response == null ? void 0 : response.data) == null ? void 0 : _e.messages) == null ? void 0 : _f.pageInfo) == null ? void 0 : _g.hasNextPage) ?? false,
2146
- paginationCursor: ((_j = (_i = (_h = response == null ? void 0 : response.data) == null ? void 0 : _h.messages) == null ? void 0 : _i.pageInfo) == null ? void 0 : _j.startCursor) ?? null
2394
+ messages: (_a2 = (_d = (_c = response == null ? void 0 : response.data) == null ? void 0 : _c.messages) == null ? void 0 : _d.nodes) != null ? _a2 : [],
2395
+ canPaginate: (_b2 = (_g = (_f = (_e = response == null ? void 0 : response.data) == null ? void 0 : _e.messages) == null ? void 0 : _f.pageInfo) == null ? void 0 : _g.hasNextPage) != null ? _b2 : false,
2396
+ paginationCursor: (_c2 = (_j = (_i = (_h = response == null ? void 0 : response.data) == null ? void 0 : _h.messages) == null ? void 0 : _i.pageInfo) == null ? void 0 : _j.startCursor) != null ? _c2 : null
2147
2397
  };
2148
2398
  this.addPage(dataSet);
2149
2399
  return dataSet;
@@ -2168,9 +2418,9 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
2168
2418
  }));
2169
2419
  const dataSet = {
2170
2420
  feedType: "archive",
2171
- messages: ((_p = (_o = response == null ? void 0 : response.data) == null ? void 0 : _o.messages) == null ? void 0 : _p.nodes) ?? [],
2172
- canPaginate: ((_s = (_r = (_q = response == null ? void 0 : response.data) == null ? void 0 : _q.messages) == null ? void 0 : _r.pageInfo) == null ? void 0 : _s.hasNextPage) ?? false,
2173
- paginationCursor: ((_v = (_u = (_t = response == null ? void 0 : response.data) == null ? void 0 : _t.messages) == null ? void 0 : _u.pageInfo) == null ? void 0 : _v.startCursor) ?? null
2421
+ messages: (_d2 = (_p = (_o = response == null ? void 0 : response.data) == null ? void 0 : _o.messages) == null ? void 0 : _p.nodes) != null ? _d2 : [],
2422
+ canPaginate: (_e2 = (_s = (_r = (_q = response == null ? void 0 : response.data) == null ? void 0 : _q.messages) == null ? void 0 : _r.pageInfo) == null ? void 0 : _s.hasNextPage) != null ? _e2 : false,
2423
+ paginationCursor: (_f2 = (_v = (_u = (_t = response == null ? void 0 : response.data) == null ? void 0 : _t.messages) == null ? void 0 : _u.pageInfo) == null ? void 0 : _v.startCursor) != null ? _f2 : null
2174
2424
  };
2175
2425
  this.addPage(dataSet);
2176
2426
  return dataSet;
@@ -2334,6 +2584,7 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
2334
2584
  }
2335
2585
  }
2336
2586
  async archiveReadMessages({ canCallApi = true } = {}) {
2587
+ var _a2;
2337
2588
  var _a, _b, _c, _d;
2338
2589
  if (!this.canMutate()) {
2339
2590
  return;
@@ -2341,11 +2592,11 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
2341
2592
  const datastoreSnapshot = this.getDatastoreSnapshot(this.unreadCount, this._inboxDataSet, this._archiveDataSet);
2342
2593
  try {
2343
2594
  const timestamp = (/* @__PURE__ */ new Date()).toISOString();
2344
- const messagesToArchive = ((_a = this._inboxDataSet) == null ? void 0 : _a.messages.filter((message) => message.read)) ?? [];
2595
+ const messagesToArchive = (_a2 = (_a = this._inboxDataSet) == null ? void 0 : _a.messages.filter((message) => message.read)) != null ? _a2 : [];
2345
2596
  messagesToArchive.forEach((message) => {
2346
- var _a2, _b2, _c2;
2597
+ var _a22, _b2, _c2;
2347
2598
  message.archived = timestamp;
2348
- const inboxIndex = (_a2 = this._inboxDataSet) == null ? void 0 : _a2.messages.findIndex((m) => m.messageId === message.messageId);
2599
+ const inboxIndex = (_a22 = this._inboxDataSet) == null ? void 0 : _a22.messages.findIndex((m) => m.messageId === message.messageId);
2349
2600
  if (inboxIndex !== void 0 && inboxIndex !== -1) {
2350
2601
  (_b2 = this._inboxDataSet) == null ? void 0 : _b2.messages.splice(inboxIndex, 1);
2351
2602
  }
@@ -2355,9 +2606,9 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
2355
2606
  }
2356
2607
  });
2357
2608
  this._dataStoreListeners.forEach((listener) => {
2358
- var _a2, _b2, _c2, _d2;
2609
+ var _a22, _b2, _c2, _d2;
2359
2610
  if (this._inboxDataSet) {
2360
- (_b2 = (_a2 = listener.events).onDataSetChange) == null ? void 0 : _b2.call(_a2, this._inboxDataSet, "inbox");
2611
+ (_b2 = (_a22 = listener.events).onDataSetChange) == null ? void 0 : _b2.call(_a22, this._inboxDataSet, "inbox");
2361
2612
  }
2362
2613
  if (this._archiveDataSet) {
2363
2614
  (_d2 = (_c2 = listener.events).onDataSetChange) == null ? void 0 : _d2.call(_c2, this._archiveDataSet, "archive");
@@ -2503,9 +2754,10 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
2503
2754
  break;
2504
2755
  }
2505
2756
  this._dataStoreListeners.forEach((listener) => {
2757
+ var _a3;
2506
2758
  var _a2, _b2, _c, _d;
2507
2759
  (_b2 = (_a2 = listener.events).onMessageAdd) == null ? void 0 : _b2.call(_a2, message, index, feedType);
2508
- (_d = (_c = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c, this._unreadCount ?? 0);
2760
+ (_d = (_c = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c, (_a3 = this._unreadCount) != null ? _a3 : 0);
2509
2761
  });
2510
2762
  }
2511
2763
  removeMessage(message, index, feedType) {
@@ -2522,9 +2774,10 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
2522
2774
  break;
2523
2775
  }
2524
2776
  this._dataStoreListeners.forEach((listener) => {
2777
+ var _a3;
2525
2778
  var _a2, _b2, _c, _d;
2526
2779
  (_b2 = (_a2 = listener.events).onMessageRemove) == null ? void 0 : _b2.call(_a2, message, index, feedType);
2527
- (_d = (_c = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c, this._unreadCount ?? 0);
2780
+ (_d = (_c = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c, (_a3 = this._unreadCount) != null ? _a3 : 0);
2528
2781
  });
2529
2782
  }
2530
2783
  /**
@@ -2578,9 +2831,10 @@ const _CourierInboxDatastore = class _CourierInboxDatastore2 {
2578
2831
  break;
2579
2832
  }
2580
2833
  this._dataStoreListeners.forEach((listener) => {
2834
+ var _a2;
2581
2835
  var _a, _b, _c, _d;
2582
2836
  (_b = (_a = listener.events).onMessageUpdate) == null ? void 0 : _b.call(_a, message, index, feedType);
2583
- (_d = (_c = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c, this._unreadCount ?? 0);
2837
+ (_d = (_c = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c, (_a2 = this._unreadCount) != null ? _a2 : 0);
2584
2838
  });
2585
2839
  }
2586
2840
  /**
@@ -2692,18 +2946,19 @@ class CourierListItem extends BaseElement {
2692
2946
  "touchstart",
2693
2947
  () => {
2694
2948
  this._longPressTimeout = window.setTimeout(() => {
2949
+ var _a2, _b2;
2695
2950
  this._isLongPress = true;
2696
2951
  this._showMenu();
2697
2952
  if (this._message && this.onItemLongPress) {
2698
2953
  this.onItemLongPress(this._message);
2699
2954
  if (navigator.vibrate) {
2700
- navigator.vibrate((longPress == null ? void 0 : longPress.vibrationDuration) ?? 50);
2955
+ navigator.vibrate((_a2 = longPress == null ? void 0 : longPress.vibrationDuration) != null ? _a2 : 50);
2701
2956
  }
2702
2957
  }
2703
2958
  setTimeout(() => {
2704
2959
  this._hideMenu();
2705
2960
  this._isLongPress = false;
2706
- }, (longPress == null ? void 0 : longPress.displayDuration) ?? 2e3);
2961
+ }, (_b2 = longPress == null ? void 0 : longPress.displayDuration) != null ? _b2 : 2e3);
2707
2962
  }, 650);
2708
2963
  },
2709
2964
  { passive: true }
@@ -2720,6 +2975,7 @@ class CourierListItem extends BaseElement {
2720
2975
  }
2721
2976
  // Helpers
2722
2977
  _getMenuOptions() {
2978
+ var _a2, _b2;
2723
2979
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
2724
2980
  const menuTheme = (_d = (_c = (_b = (_a = this._theme.inbox) == null ? void 0 : _a.list) == null ? void 0 : _b.item) == null ? void 0 : _c.menu) == null ? void 0 : _d.item;
2725
2981
  let options = [];
@@ -2729,7 +2985,7 @@ class CourierListItem extends BaseElement {
2729
2985
  id: ((_e = this._message) == null ? void 0 : _e.read) ? "unread" : "read",
2730
2986
  icon: {
2731
2987
  svg: ((_f = this._message) == null ? void 0 : _f.read) ? (_g = menuTheme == null ? void 0 : menuTheme.unread) == null ? void 0 : _g.svg : (_h = menuTheme == null ? void 0 : menuTheme.read) == null ? void 0 : _h.svg,
2732
- color: ((_i = this._message) == null ? void 0 : _i.read) ? (_j = menuTheme == null ? void 0 : menuTheme.unread) == null ? void 0 : _j.color : ((_k = menuTheme == null ? void 0 : menuTheme.read) == null ? void 0 : _k.color) ?? "red"
2988
+ color: ((_i = this._message) == null ? void 0 : _i.read) ? (_j = menuTheme == null ? void 0 : menuTheme.unread) == null ? void 0 : _j.color : (_a2 = (_k = menuTheme == null ? void 0 : menuTheme.read) == null ? void 0 : _k.color) != null ? _a2 : "red"
2733
2989
  },
2734
2990
  onClick: () => {
2735
2991
  if (this._message) {
@@ -2746,7 +3002,7 @@ class CourierListItem extends BaseElement {
2746
3002
  id: isArchiveFeed ? "unarchive" : "archive",
2747
3003
  icon: {
2748
3004
  svg: isArchiveFeed ? (_l = menuTheme == null ? void 0 : menuTheme.unarchive) == null ? void 0 : _l.svg : (_m = menuTheme == null ? void 0 : menuTheme.archive) == null ? void 0 : _m.svg,
2749
- color: isArchiveFeed ? (_n = menuTheme == null ? void 0 : menuTheme.unarchive) == null ? void 0 : _n.color : ((_o = menuTheme == null ? void 0 : menuTheme.archive) == null ? void 0 : _o.color) ?? "red"
3005
+ color: isArchiveFeed ? (_n = menuTheme == null ? void 0 : menuTheme.unarchive) == null ? void 0 : _n.color : (_b2 = (_o = menuTheme == null ? void 0 : menuTheme.archive) == null ? void 0 : _o.color) != null ? _b2 : "red"
2750
3006
  },
2751
3007
  onClick: () => {
2752
3008
  if (this._message) {
@@ -2781,6 +3037,7 @@ class CourierListItem extends BaseElement {
2781
3037
  }
2782
3038
  }
2783
3039
  _getStyles() {
3040
+ var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l, _m, _n, _o, _p;
2784
3041
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
2785
3042
  const listItem = (_b = (_a = this._theme.inbox) == null ? void 0 : _a.list) == null ? void 0 : _b.item;
2786
3043
  return `
@@ -2789,7 +3046,7 @@ class CourierListItem extends BaseElement {
2789
3046
  flex-direction: row;
2790
3047
  align-items: flex-start;
2791
3048
  justify-content: space-between;
2792
- border-bottom: ${(listItem == null ? void 0 : listItem.divider) ?? "1px solid red"};
3049
+ border-bottom: ${(_a2 = listItem == null ? void 0 : listItem.divider) != null ? _a2 : "1px solid red"};
2793
3050
  font-family: inherit;
2794
3051
  cursor: pointer;
2795
3052
  transition: background-color 0.2s ease;
@@ -2798,7 +3055,7 @@ class CourierListItem extends BaseElement {
2798
3055
  box-sizing: border-box;
2799
3056
  padding: 12px 20px;
2800
3057
  position: relative;
2801
- background-color: ${(listItem == null ? void 0 : listItem.backgroundColor) ?? "transparent"};
3058
+ background-color: ${(_b2 = listItem == null ? void 0 : listItem.backgroundColor) != null ? _b2 : "transparent"};
2802
3059
  user-select: none;
2803
3060
  -webkit-user-select: none;
2804
3061
  -moz-user-select: none;
@@ -2809,21 +3066,21 @@ class CourierListItem extends BaseElement {
2809
3066
  /* ───────────────────────── Base hover / active ────────────────── */
2810
3067
  @media (hover: hover) {
2811
3068
  :host(:hover) {
2812
- background-color: ${(listItem == null ? void 0 : listItem.hoverBackgroundColor) ?? "red"};
3069
+ background-color: ${(_c2 = listItem == null ? void 0 : listItem.hoverBackgroundColor) != null ? _c2 : "red"};
2813
3070
  }
2814
3071
  }
2815
3072
  :host(:active) {
2816
- background-color: ${(listItem == null ? void 0 : listItem.activeBackgroundColor) ?? "red"};
3073
+ background-color: ${(_d2 = listItem == null ? void 0 : listItem.activeBackgroundColor) != null ? _d2 : "red"};
2817
3074
  }
2818
3075
 
2819
3076
  /* ───────────────────────── Menu hover / active ────────────────── */
2820
3077
  @media (hover: hover) {
2821
3078
  :host(:hover):has(courier-inbox-list-item-menu:hover, courier-inbox-list-item-menu *:hover, courier-button:hover, courier-button *:hover) {
2822
- background-color: ${(listItem == null ? void 0 : listItem.backgroundColor) ?? "transparent"};
3079
+ background-color: ${(_e2 = listItem == null ? void 0 : listItem.backgroundColor) != null ? _e2 : "transparent"};
2823
3080
  }
2824
3081
  }
2825
3082
  :host(:active):has(courier-inbox-list-item-menu:active, courier-inbox-list-item-menu *:active, courier-button:active, courier-button *:active) {
2826
- background-color: ${(listItem == null ? void 0 : listItem.backgroundColor) ?? "transparent"};
3083
+ background-color: ${(_f2 = listItem == null ? void 0 : listItem.backgroundColor) != null ? _f2 : "transparent"};
2827
3084
  }
2828
3085
 
2829
3086
  :host(:last-child) {
@@ -2837,7 +3094,7 @@ class CourierListItem extends BaseElement {
2837
3094
  width: 8px;
2838
3095
  height: 8px;
2839
3096
  border-radius: 50%;
2840
- background-color: ${(listItem == null ? void 0 : listItem.unreadIndicatorColor) ?? "red"};
3097
+ background-color: ${(_g2 = listItem == null ? void 0 : listItem.unreadIndicatorColor) != null ? _g2 : "red"};
2841
3098
  display: none;
2842
3099
  }
2843
3100
 
@@ -2866,22 +3123,22 @@ class CourierListItem extends BaseElement {
2866
3123
  }
2867
3124
 
2868
3125
  p[part='title'] {
2869
- font-family: ${((_c = listItem == null ? void 0 : listItem.title) == null ? void 0 : _c.family) ?? "inherit"};
2870
- font-size: ${((_d = listItem == null ? void 0 : listItem.title) == null ? void 0 : _d.size) ?? "14px"};
2871
- color: ${((_e = listItem == null ? void 0 : listItem.title) == null ? void 0 : _e.color) ?? "red"};
3126
+ font-family: ${(_h2 = (_c = listItem == null ? void 0 : listItem.title) == null ? void 0 : _c.family) != null ? _h2 : "inherit"};
3127
+ font-size: ${(_i2 = (_d = listItem == null ? void 0 : listItem.title) == null ? void 0 : _d.size) != null ? _i2 : "14px"};
3128
+ color: ${(_j2 = (_e = listItem == null ? void 0 : listItem.title) == null ? void 0 : _e.color) != null ? _j2 : "red"};
2872
3129
  margin-bottom: 4px;
2873
3130
  }
2874
3131
 
2875
3132
  p[part='subtitle'] {
2876
- font-family: ${((_f = listItem == null ? void 0 : listItem.subtitle) == null ? void 0 : _f.family) ?? "inherit"};
2877
- font-size: ${((_g = listItem == null ? void 0 : listItem.subtitle) == null ? void 0 : _g.size) ?? "14px"};
2878
- color: ${((_h = listItem == null ? void 0 : listItem.subtitle) == null ? void 0 : _h.color) ?? "red"};
3133
+ font-family: ${(_k2 = (_f = listItem == null ? void 0 : listItem.subtitle) == null ? void 0 : _f.family) != null ? _k2 : "inherit"};
3134
+ font-size: ${(_l = (_g = listItem == null ? void 0 : listItem.subtitle) == null ? void 0 : _g.size) != null ? _l : "14px"};
3135
+ color: ${(_m = (_h = listItem == null ? void 0 : listItem.subtitle) == null ? void 0 : _h.color) != null ? _m : "red"};
2879
3136
  }
2880
3137
 
2881
3138
  p[part='time'] {
2882
- font-family: ${((_i = listItem == null ? void 0 : listItem.time) == null ? void 0 : _i.family) ?? "inherit"};
2883
- font-size: ${((_j = listItem == null ? void 0 : listItem.time) == null ? void 0 : _j.size) ?? "14px"};
2884
- color: ${((_k = listItem == null ? void 0 : listItem.time) == null ? void 0 : _k.color) ?? "red"};
3139
+ font-family: ${(_n = (_i = listItem == null ? void 0 : listItem.time) == null ? void 0 : _i.family) != null ? _n : "inherit"};
3140
+ font-size: ${(_o = (_j = listItem == null ? void 0 : listItem.time) == null ? void 0 : _j.size) != null ? _o : "14px"};
3141
+ color: ${(_p = (_k = listItem == null ? void 0 : listItem.time) == null ? void 0 : _k.color) != null ? _p : "red"};
2885
3142
  text-align: right;
2886
3143
  white-space: nowrap;
2887
3144
  }
@@ -3026,8 +3283,9 @@ class CourierSkeletonAnimatedRow extends BaseElement {
3026
3283
  this._shadow.appendChild(skeletonItem);
3027
3284
  }
3028
3285
  getStyles(theme2, widthPercent) {
3286
+ var _a2, _b2, _c2, _d2;
3029
3287
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
3030
- const color = ((_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.animation) == null ? void 0 : _c.barColor) ?? "#000";
3288
+ const color = (_a2 = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.animation) == null ? void 0 : _c.barColor) != null ? _a2 : "#000";
3031
3289
  const hexColor = color.length === 4 ? `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}` : color;
3032
3290
  const r = parseInt(hexColor.slice(1, 3), 16);
3033
3291
  const g = parseInt(hexColor.slice(3, 5), 16);
@@ -3044,7 +3302,7 @@ class CourierSkeletonAnimatedRow extends BaseElement {
3044
3302
  }
3045
3303
 
3046
3304
  .skeleton-item {
3047
- height: ${((_f = (_e = (_d = theme2.inbox) == null ? void 0 : _d.loading) == null ? void 0 : _e.animation) == null ? void 0 : _f.barHeight) ?? "14px"};
3305
+ height: ${(_b2 = (_f = (_e = (_d = theme2.inbox) == null ? void 0 : _d.loading) == null ? void 0 : _e.animation) == null ? void 0 : _f.barHeight) != null ? _b2 : "14px"};
3048
3306
  width: 100%;
3049
3307
  background: linear-gradient(
3050
3308
  90deg,
@@ -3053,8 +3311,8 @@ class CourierSkeletonAnimatedRow extends BaseElement {
3053
3311
  ${colorWithAlpha80} 75%
3054
3312
  );
3055
3313
  background-size: 200% 100%;
3056
- animation: shimmer ${((_i = (_h = (_g = theme2.inbox) == null ? void 0 : _g.loading) == null ? void 0 : _h.animation) == null ? void 0 : _i.duration) ?? "2s"} ease-in-out infinite;
3057
- border-radius: ${((_l = (_k = (_j = theme2.inbox) == null ? void 0 : _j.loading) == null ? void 0 : _k.animation) == null ? void 0 : _l.barBorderRadius) ?? "14px"};
3314
+ animation: shimmer ${(_c2 = (_i = (_h = (_g = theme2.inbox) == null ? void 0 : _g.loading) == null ? void 0 : _h.animation) == null ? void 0 : _i.duration) != null ? _c2 : "2s"} ease-in-out infinite;
3315
+ border-radius: ${(_d2 = (_l = (_k = (_j = theme2.inbox) == null ? void 0 : _j.loading) == null ? void 0 : _k.animation) == null ? void 0 : _l.barBorderRadius) != null ? _d2 : "14px"};
3058
3316
  }
3059
3317
 
3060
3318
  @keyframes shimmer {
@@ -3089,6 +3347,7 @@ class CourierInboxSkeletonList extends CourierElement {
3089
3347
  return list;
3090
3348
  }
3091
3349
  getStyles() {
3350
+ var _a2;
3092
3351
  var _a, _b;
3093
3352
  return `
3094
3353
  :host {
@@ -3109,7 +3368,7 @@ class CourierInboxSkeletonList extends CourierElement {
3109
3368
  }
3110
3369
 
3111
3370
  .list > * {
3112
- border-bottom: ${((_b = (_a = this._theme.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.divider) ?? "1px solid red"};
3371
+ border-bottom: ${(_a2 = (_b = (_a = this._theme.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.divider) != null ? _a2 : "1px solid red"};
3113
3372
  }
3114
3373
 
3115
3374
  .list > *:last-child {
@@ -3206,13 +3465,14 @@ class CourierInboxList extends BaseElement {
3206
3465
  return this._messages;
3207
3466
  }
3208
3467
  getStyles() {
3468
+ var _a2;
3209
3469
  var _a;
3210
3470
  const list = (_a = this._themeSubscription.manager.getTheme().inbox) == null ? void 0 : _a.list;
3211
3471
  return `
3212
3472
  :host {
3213
3473
  flex: 1;
3214
3474
  width: 100%;
3215
- background-color: ${(list == null ? void 0 : list.backgroundColor) ?? CourierColors.white[500]};
3475
+ background-color: ${(_a2 = list == null ? void 0 : list.backgroundColor) != null ? _a2 : CourierColors.white[500]};
3216
3476
  }
3217
3477
 
3218
3478
  ul {
@@ -3285,6 +3545,7 @@ class CourierInboxList extends BaseElement {
3285
3545
  this._onRefresh();
3286
3546
  }
3287
3547
  render() {
3548
+ var _a2, _b2;
3288
3549
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da;
3289
3550
  this.reset();
3290
3551
  const theme2 = this._themeSubscription.manager.getTheme();
@@ -3292,7 +3553,7 @@ class CourierInboxList extends BaseElement {
3292
3553
  const error = (_a = theme2.inbox) == null ? void 0 : _a.error;
3293
3554
  const errorElement = new CourierInfoState({
3294
3555
  title: {
3295
- text: ((_b = error == null ? void 0 : error.title) == null ? void 0 : _b.text) ?? this._error.message,
3556
+ text: (_a2 = (_b = error == null ? void 0 : error.title) == null ? void 0 : _b.text) != null ? _a2 : this._error.message,
3296
3557
  textColor: (_d = (_c = error == null ? void 0 : error.title) == null ? void 0 : _c.font) == null ? void 0 : _d.color,
3297
3558
  fontFamily: (_f = (_e = error == null ? void 0 : error.title) == null ? void 0 : _e.font) == null ? void 0 : _f.family,
3298
3559
  fontSize: (_h = (_g = error == null ? void 0 : error.title) == null ? void 0 : _g.font) == null ? void 0 : _h.size,
@@ -3327,7 +3588,7 @@ class CourierInboxList extends BaseElement {
3327
3588
  const empty = (_D = theme2.inbox) == null ? void 0 : _D.empty;
3328
3589
  const emptyElement = new CourierInfoState({
3329
3590
  title: {
3330
- text: ((_E = empty == null ? void 0 : empty.title) == null ? void 0 : _E.text) ?? `No ${this._feedType} messages yet`,
3591
+ text: (_b2 = (_E = empty == null ? void 0 : empty.title) == null ? void 0 : _E.text) != null ? _b2 : `No ${this._feedType} messages yet`,
3331
3592
  textColor: (_G = (_F = empty == null ? void 0 : empty.title) == null ? void 0 : _F.font) == null ? void 0 : _G.color,
3332
3593
  fontFamily: (_I = (_H = empty == null ? void 0 : empty.title) == null ? void 0 : _H.font) == null ? void 0 : _I.family,
3333
3594
  fontSize: (_K = (_J = empty == null ? void 0 : empty.title) == null ? void 0 : _J.font) == null ? void 0 : _K.size,
@@ -3362,16 +3623,16 @@ class CourierInboxList extends BaseElement {
3362
3623
  const listItem = new CourierListItem(theme2);
3363
3624
  listItem.setMessage(message, this._feedType);
3364
3625
  listItem.setOnItemClick((message2) => {
3365
- var _a2;
3366
- return (_a2 = this._onMessageClick) == null ? void 0 : _a2.call(this, message2, index);
3626
+ var _a22;
3627
+ return (_a22 = this._onMessageClick) == null ? void 0 : _a22.call(this, message2, index);
3367
3628
  });
3368
3629
  listItem.setOnItemActionClick((message2, action) => {
3369
- var _a2;
3370
- return (_a2 = this._onMessageActionClick) == null ? void 0 : _a2.call(this, message2, action, index);
3630
+ var _a22;
3631
+ return (_a22 = this._onMessageActionClick) == null ? void 0 : _a22.call(this, message2, action, index);
3371
3632
  });
3372
3633
  listItem.setOnItemLongPress((message2) => {
3373
- var _a2;
3374
- return (_a2 = this._onMessageLongPress) == null ? void 0 : _a2.call(this, message2, index);
3634
+ var _a22;
3635
+ return (_a22 = this._onMessageLongPress) == null ? void 0 : _a22.call(this, message2, index);
3375
3636
  });
3376
3637
  list.appendChild(listItem);
3377
3638
  });
@@ -3380,8 +3641,8 @@ class CourierInboxList extends BaseElement {
3380
3641
  theme: theme2,
3381
3642
  customItem: (_da = this._paginationItemFactory) == null ? void 0 : _da.call(this, { feedType: this._feedType }),
3382
3643
  onPaginationTrigger: () => {
3383
- var _a2;
3384
- return (_a2 = this._onPaginationTrigger) == null ? void 0 : _a2.call(this, this._feedType);
3644
+ var _a22;
3645
+ return (_a22 = this._onPaginationTrigger) == null ? void 0 : _a22.call(this, this._feedType);
3385
3646
  }
3386
3647
  });
3387
3648
  list.appendChild(paginationItem);
@@ -3419,6 +3680,7 @@ class CourierInboxList extends BaseElement {
3419
3680
  registerElement("courier-inbox-list", CourierInboxList);
3420
3681
  class CourierInboxOptionMenuItem extends BaseElement {
3421
3682
  constructor(props) {
3683
+ var _a;
3422
3684
  super();
3423
3685
  __publicField(this, "_option");
3424
3686
  __publicField(this, "_isSelected");
@@ -3435,7 +3697,7 @@ class CourierInboxOptionMenuItem extends BaseElement {
3435
3697
  this._style = document.createElement("style");
3436
3698
  this._content = document.createElement("div");
3437
3699
  this._content.className = "menu-item";
3438
- this._itemIcon = new CourierIcon(this._option.icon.svg ?? CourierIconSVGs.inbox);
3700
+ this._itemIcon = new CourierIcon((_a = this._option.icon.svg) != null ? _a : CourierIconSVGs.inbox);
3439
3701
  this._itemIcon.setAttribute("size", "16");
3440
3702
  this._title = document.createElement("p");
3441
3703
  this._title.textContent = this._option.text;
@@ -3454,6 +3716,7 @@ class CourierInboxOptionMenuItem extends BaseElement {
3454
3716
  this.refreshTheme();
3455
3717
  }
3456
3718
  getStyles() {
3719
+ var _a2, _b2, _c2, _d2, _e2, _f2;
3457
3720
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H;
3458
3721
  const theme2 = this._themeManager.getTheme();
3459
3722
  return `
@@ -3465,11 +3728,11 @@ class CourierInboxOptionMenuItem extends BaseElement {
3465
3728
  }
3466
3729
 
3467
3730
  :host(:hover) {
3468
- background-color: ${((_e = (_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.popup) == null ? void 0 : _d.list) == null ? void 0 : _e.hoverBackgroundColor) ?? "red"};
3731
+ background-color: ${(_a2 = (_e = (_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.popup) == null ? void 0 : _d.list) == null ? void 0 : _e.hoverBackgroundColor) != null ? _a2 : "red"};
3469
3732
  }
3470
3733
 
3471
3734
  :host(:active) {
3472
- background-color: ${((_j = (_i = (_h = (_g = (_f = theme2.inbox) == null ? void 0 : _f.header) == null ? void 0 : _g.menus) == null ? void 0 : _h.popup) == null ? void 0 : _i.list) == null ? void 0 : _j.activeBackgroundColor) ?? "red"};
3735
+ background-color: ${(_b2 = (_j = (_i = (_h = (_g = (_f = theme2.inbox) == null ? void 0 : _f.header) == null ? void 0 : _g.menus) == null ? void 0 : _h.popup) == null ? void 0 : _i.list) == null ? void 0 : _j.activeBackgroundColor) != null ? _b2 : "red"};
3473
3736
  }
3474
3737
 
3475
3738
  .menu-item {
@@ -3485,10 +3748,10 @@ class CourierInboxOptionMenuItem extends BaseElement {
3485
3748
 
3486
3749
  p {
3487
3750
  margin: 0;
3488
- font-family: ${((_p = (_o = (_n = (_m = (_l = (_k = theme2.inbox) == null ? void 0 : _k.header) == null ? void 0 : _l.menus) == null ? void 0 : _m.popup) == null ? void 0 : _n.list) == null ? void 0 : _o.font) == null ? void 0 : _p.family) ?? "inherit"};
3489
- font-weight: ${((_v = (_u = (_t = (_s = (_r = (_q = theme2.inbox) == null ? void 0 : _q.header) == null ? void 0 : _r.menus) == null ? void 0 : _s.popup) == null ? void 0 : _t.list) == null ? void 0 : _u.font) == null ? void 0 : _v.weight) ?? "inherit"};
3490
- font-size: ${((_B = (_A = (_z = (_y = (_x = (_w = theme2.inbox) == null ? void 0 : _w.header) == null ? void 0 : _x.menus) == null ? void 0 : _y.popup) == null ? void 0 : _z.list) == null ? void 0 : _A.font) == null ? void 0 : _B.size) ?? "14px"};
3491
- color: ${((_H = (_G = (_F = (_E = (_D = (_C = theme2.inbox) == null ? void 0 : _C.header) == null ? void 0 : _D.menus) == null ? void 0 : _E.popup) == null ? void 0 : _F.list) == null ? void 0 : _G.font) == null ? void 0 : _H.color) ?? "red"};
3751
+ font-family: ${(_c2 = (_p = (_o = (_n = (_m = (_l = (_k = theme2.inbox) == null ? void 0 : _k.header) == null ? void 0 : _l.menus) == null ? void 0 : _m.popup) == null ? void 0 : _n.list) == null ? void 0 : _o.font) == null ? void 0 : _p.family) != null ? _c2 : "inherit"};
3752
+ font-weight: ${(_d2 = (_v = (_u = (_t = (_s = (_r = (_q = theme2.inbox) == null ? void 0 : _q.header) == null ? void 0 : _r.menus) == null ? void 0 : _s.popup) == null ? void 0 : _t.list) == null ? void 0 : _u.font) == null ? void 0 : _v.weight) != null ? _d2 : "inherit"};
3753
+ font-size: ${(_e2 = (_B = (_A = (_z = (_y = (_x = (_w = theme2.inbox) == null ? void 0 : _w.header) == null ? void 0 : _x.menus) == null ? void 0 : _y.popup) == null ? void 0 : _z.list) == null ? void 0 : _A.font) == null ? void 0 : _B.size) != null ? _e2 : "14px"};
3754
+ color: ${(_f2 = (_H = (_G = (_F = (_E = (_D = (_C = theme2.inbox) == null ? void 0 : _C.header) == null ? void 0 : _D.menus) == null ? void 0 : _E.popup) == null ? void 0 : _F.list) == null ? void 0 : _G.font) == null ? void 0 : _H.color) != null ? _f2 : "red"};
3492
3755
  white-space: nowrap;
3493
3756
  }
3494
3757
 
@@ -3498,13 +3761,14 @@ class CourierInboxOptionMenuItem extends BaseElement {
3498
3761
  `;
3499
3762
  }
3500
3763
  refreshTheme() {
3764
+ var _a2, _b2, _c2, _d2, _e;
3501
3765
  var _a, _b, _c, _d;
3502
3766
  this._style.textContent = this.getStyles();
3503
- this._selectionIcon.updateColor(((_a = this._option.selectionIcon) == null ? void 0 : _a.color) ?? "red");
3504
- this._selectionIcon.updateSVG(((_b = this._option.selectionIcon) == null ? void 0 : _b.svg) ?? CourierIconSVGs.check);
3505
- this._title.textContent = this._option.text ?? "Missing Text";
3506
- this._itemIcon.updateColor(((_c = this._option.icon) == null ? void 0 : _c.color) ?? "red");
3507
- this._itemIcon.updateSVG(((_d = this._option.icon) == null ? void 0 : _d.svg) ?? CourierIconSVGs.inbox);
3767
+ this._selectionIcon.updateColor((_a2 = (_a = this._option.selectionIcon) == null ? void 0 : _a.color) != null ? _a2 : "red");
3768
+ this._selectionIcon.updateSVG((_b2 = (_b = this._option.selectionIcon) == null ? void 0 : _b.svg) != null ? _b2 : CourierIconSVGs.check);
3769
+ this._title.textContent = (_c2 = this._option.text) != null ? _c2 : "Missing Text";
3770
+ this._itemIcon.updateColor((_d2 = (_c = this._option.icon) == null ? void 0 : _c.color) != null ? _d2 : "red");
3771
+ this._itemIcon.updateSVG((_e = (_d = this._option.icon) == null ? void 0 : _d.svg) != null ? _e : CourierIconSVGs.inbox);
3508
3772
  }
3509
3773
  }
3510
3774
  registerElement("courier-inbox-filter-menu-item", CourierInboxOptionMenuItem);
@@ -3541,6 +3805,7 @@ class CourierInboxOptionMenu extends BaseElement {
3541
3805
  this.refreshTheme();
3542
3806
  }
3543
3807
  getStyles() {
3808
+ var _a2, _b2, _c2, _d2, _e2;
3544
3809
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
3545
3810
  const theme2 = this._themeSubscription.manager.getTheme();
3546
3811
  return `
@@ -3554,10 +3819,10 @@ class CourierInboxOptionMenu extends BaseElement {
3554
3819
  position: absolute;
3555
3820
  top: 42px;
3556
3821
  right: -6px;
3557
- border-radius: ${((_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.popup) == null ? void 0 : _d.borderRadius) ?? "6px"};
3558
- border: ${((_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.menus) == null ? void 0 : _g.popup) == null ? void 0 : _h.border) ?? "1px solid red"};
3559
- background: ${((_l = (_k = (_j = (_i = theme2.inbox) == null ? void 0 : _i.header) == null ? void 0 : _j.menus) == null ? void 0 : _k.popup) == null ? void 0 : _l.backgroundColor) ?? "red"};
3560
- box-shadow: ${((_p = (_o = (_n = (_m = theme2.inbox) == null ? void 0 : _m.header) == null ? void 0 : _n.menus) == null ? void 0 : _o.popup) == null ? void 0 : _p.shadow) ?? "0 4px 12px 0 red"};
3822
+ border-radius: ${(_a2 = (_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.popup) == null ? void 0 : _d.borderRadius) != null ? _a2 : "6px"};
3823
+ border: ${(_b2 = (_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.menus) == null ? void 0 : _g.popup) == null ? void 0 : _h.border) != null ? _b2 : "1px solid red"};
3824
+ background: ${(_c2 = (_l = (_k = (_j = (_i = theme2.inbox) == null ? void 0 : _i.header) == null ? void 0 : _j.menus) == null ? void 0 : _k.popup) == null ? void 0 : _l.backgroundColor) != null ? _c2 : "red"};
3825
+ box-shadow: ${(_d2 = (_p = (_o = (_n = (_m = theme2.inbox) == null ? void 0 : _m.header) == null ? void 0 : _n.menus) == null ? void 0 : _o.popup) == null ? void 0 : _p.shadow) != null ? _d2 : "0 4px 12px 0 red"};
3561
3826
  z-index: 1000;
3562
3827
  min-width: 200px;
3563
3828
  overflow: hidden;
@@ -3565,7 +3830,7 @@ class CourierInboxOptionMenu extends BaseElement {
3565
3830
  }
3566
3831
 
3567
3832
  courier-inbox-filter-menu-item {
3568
- border-bottom: ${((_u = (_t = (_s = (_r = (_q = theme2.inbox) == null ? void 0 : _q.header) == null ? void 0 : _r.menus) == null ? void 0 : _s.popup) == null ? void 0 : _t.list) == null ? void 0 : _u.divider) ?? "none"};
3833
+ border-bottom: ${(_e2 = (_u = (_t = (_s = (_r = (_q = theme2.inbox) == null ? void 0 : _q.header) == null ? void 0 : _r.menus) == null ? void 0 : _s.popup) == null ? void 0 : _t.list) == null ? void 0 : _u.divider) != null ? _e2 : "none"};
3569
3834
  }
3570
3835
 
3571
3836
  courier-inbox-filter-menu-item:last-child {
@@ -3574,6 +3839,7 @@ class CourierInboxOptionMenu extends BaseElement {
3574
3839
  `;
3575
3840
  }
3576
3841
  refreshTheme() {
3842
+ var _a2, _b2, _c2, _d2, _e2;
3577
3843
  var _a, _b, _c, _d, _e, _f;
3578
3844
  this._style.textContent = this.getStyles();
3579
3845
  const theme2 = this._themeSubscription.manager.getTheme();
@@ -3581,11 +3847,11 @@ class CourierInboxOptionMenu extends BaseElement {
3581
3847
  const isFilter = this._type === "filters";
3582
3848
  const buttonConfig = isFilter ? (_c = menu == null ? void 0 : menu.filters) == null ? void 0 : _c.button : (_d = menu == null ? void 0 : menu.actions) == null ? void 0 : _d.button;
3583
3849
  const defaultIcon = isFilter ? CourierIconSVGs.filter : CourierIconSVGs.overflow;
3584
- this._menuButton.updateIconSVG(((_e = buttonConfig == null ? void 0 : buttonConfig.icon) == null ? void 0 : _e.svg) ?? defaultIcon);
3585
- this._menuButton.updateIconColor(((_f = buttonConfig == null ? void 0 : buttonConfig.icon) == null ? void 0 : _f.color) ?? "red");
3586
- this._menuButton.updateBackgroundColor((buttonConfig == null ? void 0 : buttonConfig.backgroundColor) ?? "transparent");
3587
- this._menuButton.updateHoverBackgroundColor((buttonConfig == null ? void 0 : buttonConfig.hoverBackgroundColor) ?? "red");
3588
- this._menuButton.updateActiveBackgroundColor((buttonConfig == null ? void 0 : buttonConfig.activeBackgroundColor) ?? "red");
3850
+ this._menuButton.updateIconSVG((_a2 = (_e = buttonConfig == null ? void 0 : buttonConfig.icon) == null ? void 0 : _e.svg) != null ? _a2 : defaultIcon);
3851
+ this._menuButton.updateIconColor((_b2 = (_f = buttonConfig == null ? void 0 : buttonConfig.icon) == null ? void 0 : _f.color) != null ? _b2 : "red");
3852
+ this._menuButton.updateBackgroundColor((_c2 = buttonConfig == null ? void 0 : buttonConfig.backgroundColor) != null ? _c2 : "transparent");
3853
+ this._menuButton.updateHoverBackgroundColor((_d2 = buttonConfig == null ? void 0 : buttonConfig.hoverBackgroundColor) != null ? _d2 : "red");
3854
+ this._menuButton.updateActiveBackgroundColor((_e2 = buttonConfig == null ? void 0 : buttonConfig.activeBackgroundColor) != null ? _e2 : "red");
3589
3855
  this.refreshMenuItems();
3590
3856
  }
3591
3857
  setOptions(options) {
@@ -3704,6 +3970,7 @@ class CourierUnreadCountBadge extends BaseElement {
3704
3970
  registerElement("courier-unread-count-badge", CourierUnreadCountBadge);
3705
3971
  class CourierInboxHeaderTitle extends BaseElement {
3706
3972
  constructor(themeManager, option) {
3973
+ var _a;
3707
3974
  super();
3708
3975
  __publicField(this, "_themeSubscription");
3709
3976
  __publicField(this, "_option");
@@ -3730,11 +3997,13 @@ class CourierInboxHeaderTitle extends BaseElement {
3730
3997
  shadow.appendChild(this._style);
3731
3998
  shadow.appendChild(this._container);
3732
3999
  this._themeSubscription = themeManager.subscribe((_) => {
3733
- this.refreshTheme(this._feedType ?? "inbox");
4000
+ var _a2;
4001
+ this.refreshTheme((_a2 = this._feedType) != null ? _a2 : "inbox");
3734
4002
  });
3735
- this.refreshTheme(this._feedType ?? "inbox");
4003
+ this.refreshTheme((_a = this._feedType) != null ? _a : "inbox");
3736
4004
  }
3737
4005
  getStyles() {
4006
+ var _a2, _b2, _c2, _d2;
3738
4007
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
3739
4008
  const theme2 = this._themeSubscription.manager.getTheme();
3740
4009
  return `
@@ -3752,10 +4021,10 @@ class CourierInboxHeaderTitle extends BaseElement {
3752
4021
 
3753
4022
  h2 {
3754
4023
  margin: 0;
3755
- font-family: ${((_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.filters) == null ? void 0 : _c.font) == null ? void 0 : _d.family) ?? "inherit"};
3756
- font-size: ${((_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.filters) == null ? void 0 : _g.font) == null ? void 0 : _h.size) ?? "18px"};
3757
- font-weight: ${((_l = (_k = (_j = (_i = theme2.inbox) == null ? void 0 : _i.header) == null ? void 0 : _j.filters) == null ? void 0 : _k.font) == null ? void 0 : _l.weight) ?? "500"};
3758
- color: ${((_p = (_o = (_n = (_m = theme2.inbox) == null ? void 0 : _m.header) == null ? void 0 : _n.filters) == null ? void 0 : _o.font) == null ? void 0 : _p.color) ?? "red"};
4024
+ font-family: ${(_a2 = (_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.filters) == null ? void 0 : _c.font) == null ? void 0 : _d.family) != null ? _a2 : "inherit"};
4025
+ font-size: ${(_b2 = (_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.filters) == null ? void 0 : _g.font) == null ? void 0 : _h.size) != null ? _b2 : "18px"};
4026
+ font-weight: ${(_c2 = (_l = (_k = (_j = (_i = theme2.inbox) == null ? void 0 : _i.header) == null ? void 0 : _j.filters) == null ? void 0 : _k.font) == null ? void 0 : _l.weight) != null ? _c2 : "500"};
4027
+ color: ${(_d2 = (_p = (_o = (_n = (_m = theme2.inbox) == null ? void 0 : _m.header) == null ? void 0 : _n.filters) == null ? void 0 : _o.font) == null ? void 0 : _p.color) != null ? _d2 : "red"};
3759
4028
  }
3760
4029
 
3761
4030
  courier-unread-count-badge {
@@ -3776,18 +4045,19 @@ class CourierInboxHeaderTitle extends BaseElement {
3776
4045
  this.updateFilter();
3777
4046
  }
3778
4047
  updateFilter() {
4048
+ var _a2, _b2, _c2, _d2, _e2, _f2;
3779
4049
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B;
3780
4050
  const theme2 = this._themeSubscription.manager.getTheme();
3781
4051
  switch (this._feedType) {
3782
4052
  case "inbox":
3783
- this._titleElement.textContent = ((_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.filters) == null ? void 0 : _c.inbox) == null ? void 0 : _d.text) ?? "Inbox";
3784
- this._iconElement.updateSVG(((_i = (_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.filters) == null ? void 0 : _g.inbox) == null ? void 0 : _h.icon) == null ? void 0 : _i.svg) ?? CourierIconSVGs.inbox);
3785
- this._iconElement.updateColor(((_n = (_m = (_l = (_k = (_j = theme2.inbox) == null ? void 0 : _j.header) == null ? void 0 : _k.filters) == null ? void 0 : _l.inbox) == null ? void 0 : _m.icon) == null ? void 0 : _n.color) ?? "red");
4053
+ this._titleElement.textContent = (_a2 = (_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.filters) == null ? void 0 : _c.inbox) == null ? void 0 : _d.text) != null ? _a2 : "Inbox";
4054
+ this._iconElement.updateSVG((_b2 = (_i = (_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.filters) == null ? void 0 : _g.inbox) == null ? void 0 : _h.icon) == null ? void 0 : _i.svg) != null ? _b2 : CourierIconSVGs.inbox);
4055
+ this._iconElement.updateColor((_c2 = (_n = (_m = (_l = (_k = (_j = theme2.inbox) == null ? void 0 : _j.header) == null ? void 0 : _k.filters) == null ? void 0 : _l.inbox) == null ? void 0 : _m.icon) == null ? void 0 : _n.color) != null ? _c2 : "red");
3786
4056
  break;
3787
4057
  case "archive":
3788
- this._titleElement.textContent = ((_r = (_q = (_p = (_o = theme2.inbox) == null ? void 0 : _o.header) == null ? void 0 : _p.filters) == null ? void 0 : _q.archive) == null ? void 0 : _r.text) ?? "Archive";
3789
- this._iconElement.updateSVG(((_w = (_v = (_u = (_t = (_s = theme2.inbox) == null ? void 0 : _s.header) == null ? void 0 : _t.filters) == null ? void 0 : _u.archive) == null ? void 0 : _v.icon) == null ? void 0 : _w.svg) ?? CourierIconSVGs.archive);
3790
- this._iconElement.updateColor(((_B = (_A = (_z = (_y = (_x = theme2.inbox) == null ? void 0 : _x.header) == null ? void 0 : _y.filters) == null ? void 0 : _z.archive) == null ? void 0 : _A.icon) == null ? void 0 : _B.color) ?? "red");
4058
+ this._titleElement.textContent = (_d2 = (_r = (_q = (_p = (_o = theme2.inbox) == null ? void 0 : _o.header) == null ? void 0 : _p.filters) == null ? void 0 : _q.archive) == null ? void 0 : _r.text) != null ? _d2 : "Archive";
4059
+ this._iconElement.updateSVG((_e2 = (_w = (_v = (_u = (_t = (_s = theme2.inbox) == null ? void 0 : _s.header) == null ? void 0 : _t.filters) == null ? void 0 : _u.archive) == null ? void 0 : _v.icon) == null ? void 0 : _w.svg) != null ? _e2 : CourierIconSVGs.archive);
4060
+ this._iconElement.updateColor((_f2 = (_B = (_A = (_z = (_y = (_x = theme2.inbox) == null ? void 0 : _x.header) == null ? void 0 : _y.filters) == null ? void 0 : _z.archive) == null ? void 0 : _A.icon) == null ? void 0 : _B.color) != null ? _f2 : "red");
3791
4061
  break;
3792
4062
  }
3793
4063
  }
@@ -3815,20 +4085,21 @@ class CourierInboxHeader extends CourierElement {
3815
4085
  }
3816
4086
  // Menu options
3817
4087
  getFilterOptions() {
4088
+ var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2;
3818
4089
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K;
3819
4090
  const theme2 = this._themeSubscription.manager.getTheme();
3820
4091
  const filterMenu = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.filters;
3821
4092
  return [
3822
4093
  {
3823
4094
  id: "inbox",
3824
- text: ((_d = filterMenu == null ? void 0 : filterMenu.inbox) == null ? void 0 : _d.text) ?? "Inbox",
4095
+ text: (_a2 = (_d = filterMenu == null ? void 0 : filterMenu.inbox) == null ? void 0 : _d.text) != null ? _a2 : "Inbox",
3825
4096
  icon: {
3826
- color: ((_f = (_e = filterMenu == null ? void 0 : filterMenu.inbox) == null ? void 0 : _e.icon) == null ? void 0 : _f.color) ?? "red",
3827
- svg: ((_h = (_g = filterMenu == null ? void 0 : filterMenu.inbox) == null ? void 0 : _g.icon) == null ? void 0 : _h.svg) ?? CourierIconSVGs.inbox
4097
+ color: (_b2 = (_f = (_e = filterMenu == null ? void 0 : filterMenu.inbox) == null ? void 0 : _e.icon) == null ? void 0 : _f.color) != null ? _b2 : "red",
4098
+ svg: (_c2 = (_h = (_g = filterMenu == null ? void 0 : filterMenu.inbox) == null ? void 0 : _g.icon) == null ? void 0 : _h.svg) != null ? _c2 : CourierIconSVGs.inbox
3828
4099
  },
3829
4100
  selectionIcon: {
3830
- color: ((_n = (_m = (_l = (_k = (_j = (_i = theme2.inbox) == null ? void 0 : _i.header) == null ? void 0 : _j.menus) == null ? void 0 : _k.popup) == null ? void 0 : _l.list) == null ? void 0 : _m.selectionIcon) == null ? void 0 : _n.color) ?? "red",
3831
- svg: ((_t = (_s = (_r = (_q = (_p = (_o = theme2.inbox) == null ? void 0 : _o.header) == null ? void 0 : _p.menus) == null ? void 0 : _q.popup) == null ? void 0 : _r.list) == null ? void 0 : _s.selectionIcon) == null ? void 0 : _t.svg) ?? CourierIconSVGs.check
4101
+ color: (_d2 = (_n = (_m = (_l = (_k = (_j = (_i = theme2.inbox) == null ? void 0 : _i.header) == null ? void 0 : _j.menus) == null ? void 0 : _k.popup) == null ? void 0 : _l.list) == null ? void 0 : _m.selectionIcon) == null ? void 0 : _n.color) != null ? _d2 : "red",
4102
+ svg: (_e2 = (_t = (_s = (_r = (_q = (_p = (_o = theme2.inbox) == null ? void 0 : _o.header) == null ? void 0 : _p.menus) == null ? void 0 : _q.popup) == null ? void 0 : _r.list) == null ? void 0 : _s.selectionIcon) == null ? void 0 : _t.svg) != null ? _e2 : CourierIconSVGs.check
3832
4103
  },
3833
4104
  onClick: (option) => {
3834
4105
  this.handleOptionMenuItemClick("inbox", option);
@@ -3836,14 +4107,14 @@ class CourierInboxHeader extends CourierElement {
3836
4107
  },
3837
4108
  {
3838
4109
  id: "archive",
3839
- text: ((_u = filterMenu == null ? void 0 : filterMenu.archive) == null ? void 0 : _u.text) ?? "Archive",
4110
+ text: (_f2 = (_u = filterMenu == null ? void 0 : filterMenu.archive) == null ? void 0 : _u.text) != null ? _f2 : "Archive",
3840
4111
  icon: {
3841
- color: ((_w = (_v = filterMenu == null ? void 0 : filterMenu.archive) == null ? void 0 : _v.icon) == null ? void 0 : _w.color) ?? "red",
3842
- svg: ((_y = (_x = filterMenu == null ? void 0 : filterMenu.archive) == null ? void 0 : _x.icon) == null ? void 0 : _y.svg) ?? CourierIconSVGs.archive
4112
+ color: (_g2 = (_w = (_v = filterMenu == null ? void 0 : filterMenu.archive) == null ? void 0 : _v.icon) == null ? void 0 : _w.color) != null ? _g2 : "red",
4113
+ svg: (_h2 = (_y = (_x = filterMenu == null ? void 0 : filterMenu.archive) == null ? void 0 : _x.icon) == null ? void 0 : _y.svg) != null ? _h2 : CourierIconSVGs.archive
3843
4114
  },
3844
4115
  selectionIcon: {
3845
- color: ((_E = (_D = (_C = (_B = (_A = (_z = theme2.inbox) == null ? void 0 : _z.header) == null ? void 0 : _A.menus) == null ? void 0 : _B.popup) == null ? void 0 : _C.list) == null ? void 0 : _D.selectionIcon) == null ? void 0 : _E.color) ?? "red",
3846
- svg: ((_K = (_J = (_I = (_H = (_G = (_F = theme2.inbox) == null ? void 0 : _F.header) == null ? void 0 : _G.menus) == null ? void 0 : _H.popup) == null ? void 0 : _I.list) == null ? void 0 : _J.selectionIcon) == null ? void 0 : _K.svg) ?? CourierIconSVGs.check
4116
+ color: (_i2 = (_E = (_D = (_C = (_B = (_A = (_z = theme2.inbox) == null ? void 0 : _z.header) == null ? void 0 : _A.menus) == null ? void 0 : _B.popup) == null ? void 0 : _C.list) == null ? void 0 : _D.selectionIcon) == null ? void 0 : _E.color) != null ? _i2 : "red",
4117
+ svg: (_j2 = (_K = (_J = (_I = (_H = (_G = (_F = theme2.inbox) == null ? void 0 : _F.header) == null ? void 0 : _G.menus) == null ? void 0 : _H.popup) == null ? void 0 : _I.list) == null ? void 0 : _J.selectionIcon) == null ? void 0 : _K.svg) != null ? _j2 : CourierIconSVGs.check
3847
4118
  },
3848
4119
  onClick: (option) => {
3849
4120
  this.handleOptionMenuItemClick("archive", option);
@@ -3852,16 +4123,17 @@ class CourierInboxHeader extends CourierElement {
3852
4123
  ];
3853
4124
  }
3854
4125
  getActionOptions() {
4126
+ var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
3855
4127
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
3856
4128
  const theme2 = this._themeSubscription.manager.getTheme();
3857
4129
  const actionMenu = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.actions;
3858
4130
  return [
3859
4131
  {
3860
4132
  id: "markAllRead",
3861
- text: ((_d = actionMenu == null ? void 0 : actionMenu.markAllRead) == null ? void 0 : _d.text) ?? "Mark All as Read",
4133
+ text: (_a2 = (_d = actionMenu == null ? void 0 : actionMenu.markAllRead) == null ? void 0 : _d.text) != null ? _a2 : "Mark All as Read",
3862
4134
  icon: {
3863
- color: ((_f = (_e = actionMenu == null ? void 0 : actionMenu.markAllRead) == null ? void 0 : _e.icon) == null ? void 0 : _f.color) ?? "red",
3864
- svg: ((_h = (_g = actionMenu == null ? void 0 : actionMenu.markAllRead) == null ? void 0 : _g.icon) == null ? void 0 : _h.svg) ?? CourierIconSVGs.inbox
4135
+ color: (_b2 = (_f = (_e = actionMenu == null ? void 0 : actionMenu.markAllRead) == null ? void 0 : _e.icon) == null ? void 0 : _f.color) != null ? _b2 : "red",
4136
+ svg: (_c2 = (_h = (_g = actionMenu == null ? void 0 : actionMenu.markAllRead) == null ? void 0 : _g.icon) == null ? void 0 : _h.svg) != null ? _c2 : CourierIconSVGs.inbox
3865
4137
  },
3866
4138
  selectionIcon: null,
3867
4139
  onClick: (_) => {
@@ -3870,10 +4142,10 @@ class CourierInboxHeader extends CourierElement {
3870
4142
  },
3871
4143
  {
3872
4144
  id: "archiveAll",
3873
- text: ((_i = actionMenu == null ? void 0 : actionMenu.archiveAll) == null ? void 0 : _i.text) ?? "Archive All",
4145
+ text: (_d2 = (_i = actionMenu == null ? void 0 : actionMenu.archiveAll) == null ? void 0 : _i.text) != null ? _d2 : "Archive All",
3874
4146
  icon: {
3875
- color: ((_k = (_j = actionMenu == null ? void 0 : actionMenu.archiveAll) == null ? void 0 : _j.icon) == null ? void 0 : _k.color) ?? "red",
3876
- svg: ((_m = (_l = actionMenu == null ? void 0 : actionMenu.archiveAll) == null ? void 0 : _l.icon) == null ? void 0 : _m.svg) ?? CourierIconSVGs.archive
4147
+ color: (_e2 = (_k = (_j = actionMenu == null ? void 0 : actionMenu.archiveAll) == null ? void 0 : _j.icon) == null ? void 0 : _k.color) != null ? _e2 : "red",
4148
+ svg: (_f2 = (_m = (_l = actionMenu == null ? void 0 : actionMenu.archiveAll) == null ? void 0 : _l.icon) == null ? void 0 : _m.svg) != null ? _f2 : CourierIconSVGs.archive
3877
4149
  },
3878
4150
  selectionIcon: null,
3879
4151
  onClick: (_) => {
@@ -3882,10 +4154,10 @@ class CourierInboxHeader extends CourierElement {
3882
4154
  },
3883
4155
  {
3884
4156
  id: "archiveRead",
3885
- text: ((_n = actionMenu == null ? void 0 : actionMenu.archiveRead) == null ? void 0 : _n.text) ?? "Archive Read",
4157
+ text: (_g2 = (_n = actionMenu == null ? void 0 : actionMenu.archiveRead) == null ? void 0 : _n.text) != null ? _g2 : "Archive Read",
3886
4158
  icon: {
3887
- color: ((_p = (_o = actionMenu == null ? void 0 : actionMenu.archiveRead) == null ? void 0 : _o.icon) == null ? void 0 : _p.color) ?? "red",
3888
- svg: ((_r = (_q = actionMenu == null ? void 0 : actionMenu.archiveRead) == null ? void 0 : _q.icon) == null ? void 0 : _r.svg) ?? CourierIconSVGs.archive
4159
+ color: (_h2 = (_p = (_o = actionMenu == null ? void 0 : actionMenu.archiveRead) == null ? void 0 : _o.icon) == null ? void 0 : _p.color) != null ? _h2 : "red",
4160
+ svg: (_i2 = (_r = (_q = actionMenu == null ? void 0 : actionMenu.archiveRead) == null ? void 0 : _q.icon) == null ? void 0 : _r.svg) != null ? _i2 : CourierIconSVGs.archive
3889
4161
  },
3890
4162
  selectionIcon: null,
3891
4163
  onClick: (_) => {
@@ -3898,12 +4170,13 @@ class CourierInboxHeader extends CourierElement {
3898
4170
  return ["icon", "title", "feed-type"];
3899
4171
  }
3900
4172
  refreshTheme() {
4173
+ var _a2, _b2;
3901
4174
  var _a, _b, _c, _d, _e, _f, _g;
3902
4175
  const theme2 = this._themeSubscription.manager.getTheme();
3903
4176
  const header = (_a = this.shadow) == null ? void 0 : _a.querySelector(".courier-inbox-header");
3904
4177
  if (header) {
3905
- header.style.backgroundColor = ((_c = (_b = theme2.inbox) == null ? void 0 : _b.header) == null ? void 0 : _c.backgroundColor) ?? CourierColors.white[500];
3906
- header.style.boxShadow = ((_e = (_d = theme2.inbox) == null ? void 0 : _d.header) == null ? void 0 : _e.shadow) ?? `0px 1px 0px 0px ${CourierColors.gray[500]}`;
4178
+ header.style.backgroundColor = (_a2 = (_c = (_b = theme2.inbox) == null ? void 0 : _b.header) == null ? void 0 : _c.backgroundColor) != null ? _a2 : CourierColors.white[500];
4179
+ header.style.boxShadow = (_b2 = (_e = (_d = theme2.inbox) == null ? void 0 : _d.header) == null ? void 0 : _e.shadow) != null ? _b2 : `0px 1px 0px 0px ${CourierColors.gray[500]}`;
3907
4180
  }
3908
4181
  (_f = this._filterMenu) == null ? void 0 : _f.setOptions(this.getFilterOptions());
3909
4182
  (_g = this._actionMenu) == null ? void 0 : _g.setOptions(this.getActionOptions());
@@ -4797,7 +5070,7 @@ let CourierInbox$1 = class CourierInbox extends BaseElement {
4797
5070
  height: "768px"
4798
5071
  });
4799
5072
  this._shadow = this.attachShadow({ mode: "open" });
4800
- this._themeManager = themeManager ?? new CourierInboxThemeManager(defaultLightTheme);
5073
+ this._themeManager = themeManager != null ? themeManager : new CourierInboxThemeManager(defaultLightTheme);
4801
5074
  this._header = new CourierInboxHeader({
4802
5075
  themeManager: this._themeManager,
4803
5076
  onFeedTypeChange: (feedType) => {
@@ -5125,13 +5398,14 @@ class CourierInboxMenuButton extends CourierElement {
5125
5398
  this.updateTheme();
5126
5399
  }
5127
5400
  updateTheme() {
5401
+ var _a2, _b2, _c2, _d2, _e2;
5128
5402
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
5129
5403
  const theme2 = this._themeSubscription.manager.getTheme();
5130
- (_d = this._triggerButton) == null ? void 0 : _d.updateIconColor(((_c = (_b = (_a = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _a.button) == null ? void 0 : _b.icon) == null ? void 0 : _c.color) ?? CourierColors.black[500]);
5131
- (_h = this._triggerButton) == null ? void 0 : _h.updateIconSVG(((_g = (_f = (_e = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _e.button) == null ? void 0 : _f.icon) == null ? void 0 : _g.svg) ?? CourierIconSVGs.inbox);
5132
- (_k = this._triggerButton) == null ? void 0 : _k.updateBackgroundColor(((_j = (_i = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _i.button) == null ? void 0 : _j.backgroundColor) ?? "transparent");
5133
- (_n = this._triggerButton) == null ? void 0 : _n.updateHoverBackgroundColor(((_m = (_l = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _l.button) == null ? void 0 : _m.hoverBackgroundColor) ?? CourierColors.black[50010]);
5134
- (_q = this._triggerButton) == null ? void 0 : _q.updateActiveBackgroundColor(((_p = (_o = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _o.button) == null ? void 0 : _p.activeBackgroundColor) ?? CourierColors.black[50020]);
5404
+ (_d = this._triggerButton) == null ? void 0 : _d.updateIconColor((_a2 = (_c = (_b = (_a = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _a.button) == null ? void 0 : _b.icon) == null ? void 0 : _c.color) != null ? _a2 : CourierColors.black[500]);
5405
+ (_h = this._triggerButton) == null ? void 0 : _h.updateIconSVG((_b2 = (_g = (_f = (_e = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _e.button) == null ? void 0 : _f.icon) == null ? void 0 : _g.svg) != null ? _b2 : CourierIconSVGs.inbox);
5406
+ (_k = this._triggerButton) == null ? void 0 : _k.updateBackgroundColor((_c2 = (_j = (_i = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _i.button) == null ? void 0 : _j.backgroundColor) != null ? _c2 : "transparent");
5407
+ (_n = this._triggerButton) == null ? void 0 : _n.updateHoverBackgroundColor((_d2 = (_m = (_l = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _l.button) == null ? void 0 : _m.hoverBackgroundColor) != null ? _d2 : CourierColors.black[50010]);
5408
+ (_q = this._triggerButton) == null ? void 0 : _q.updateActiveBackgroundColor((_e2 = (_p = (_o = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _o.button) == null ? void 0 : _p.activeBackgroundColor) != null ? _e2 : CourierColors.black[50020]);
5135
5409
  (_r = this._unreadCountBadge) == null ? void 0 : _r.refreshTheme("button");
5136
5410
  }
5137
5411
  disconnectedCallback() {
@@ -5194,6 +5468,7 @@ let CourierInboxPopupMenu$1 = class CourierInboxPopupMenu extends BaseElement {
5194
5468
  this._style.textContent = this.getStyles();
5195
5469
  }
5196
5470
  getStyles() {
5471
+ var _a2, _b2, _c2, _d2;
5197
5472
  var _a, _b, _c, _d, _e, _f, _g, _h;
5198
5473
  return `
5199
5474
  :host {
@@ -5209,10 +5484,10 @@ let CourierInboxPopupMenu$1 = class CourierInboxPopupMenu extends BaseElement {
5209
5484
  .popup {
5210
5485
  display: none;
5211
5486
  position: absolute;
5212
- background: ${((_b = (_a = this.theme.popup) == null ? void 0 : _a.window) == null ? void 0 : _b.backgroundColor) ?? "red"};
5213
- border-radius: ${((_d = (_c = this.theme.popup) == null ? void 0 : _c.window) == null ? void 0 : _d.borderRadius) ?? "8px"};
5214
- border: ${((_f = (_e = this.theme.popup) == null ? void 0 : _e.window) == null ? void 0 : _f.border) ?? `1px solid red`};
5215
- box-shadow: ${((_h = (_g = this.theme.popup) == null ? void 0 : _g.window) == null ? void 0 : _h.shadow) ?? `0px 8px 16px -4px red`};
5487
+ background: ${(_a2 = (_b = (_a = this.theme.popup) == null ? void 0 : _a.window) == null ? void 0 : _b.backgroundColor) != null ? _a2 : "red"};
5488
+ border-radius: ${(_b2 = (_d = (_c = this.theme.popup) == null ? void 0 : _c.window) == null ? void 0 : _d.borderRadius) != null ? _b2 : "8px"};
5489
+ border: ${(_c2 = (_f = (_e = this.theme.popup) == null ? void 0 : _e.window) == null ? void 0 : _f.border) != null ? _c2 : `1px solid red`};
5490
+ box-shadow: ${(_d2 = (_h = (_g = this.theme.popup) == null ? void 0 : _g.window) == null ? void 0 : _h.shadow) != null ? _d2 : `0px 8px 16px -4px red`};
5216
5491
  z-index: 1000;
5217
5492
  width: ${this._width};
5218
5493
  height: ${this._height};