@trycourier/courier-ui-inbox 1.0.8-beta → 1.0.11-beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +374 -0
- package/dist/components/courier-inbox-list-item.d.ts +3 -1
- package/dist/components/courier-inbox-list.d.ts +5 -0
- package/dist/components/courier-inbox-popup-menu.d.ts +14 -9
- package/dist/components/courier-inbox.d.ts +2 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +175 -115
- package/dist/index.mjs.map +1 -1
- package/dist/types/courier-inbox-theme-manager.d.ts +1 -0
- package/package.json +4 -3
package/README.md
ADDED
|
@@ -0,0 +1,374 @@
|
|
|
1
|
+
<img width="1040" alt="courier-ui-inbox" src="https://github.com/user-attachments/assets/6227249b-d008-4719-bddc-874f34432376" />
|
|
2
|
+
|
|
3
|
+
## 1. Install
|
|
4
|
+
|
|
5
|
+
```sh
|
|
6
|
+
npm i @trycourier/courier-ui-inbox@1.0.11-beta
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
> **Using React?** We suggest you use [@trycourier/courier-react](../courier-react/README.md) package instead.
|
|
10
|
+
|
|
11
|
+
## 2. Authenticate
|
|
12
|
+
|
|
13
|
+
To use the SDK, you need to generate a JWT (JSON Web Token) for your user. **This JWT should always be generated by your backend server, never in client-side code.**
|
|
14
|
+
|
|
15
|
+
**How it works:**
|
|
16
|
+
|
|
17
|
+
1. **Your frontend calls your backend:**
|
|
18
|
+
- When your app needs to authenticate a user, your frontend should make a request to your own backend (e.g., `/api/generate-courier-jwt`).
|
|
19
|
+
|
|
20
|
+
2. **Your backend calls Courier to issue a JWT:**
|
|
21
|
+
- In your backend endpoint, use your [Courier API Key](https://app.courier.com/settings/api-keys) to call the [Courier JWT Token Endpoint](https://www.courier.com/docs/reference/auth/issue-token) and generate a JWT for the user.
|
|
22
|
+
- Your backend then returns the JWT to your frontend.
|
|
23
|
+
|
|
24
|
+
To quickly test JWT generation (for development only), you can use the following cURL command to call Courier's API directly. **Do not use this in production or from client-side code.**
|
|
25
|
+
|
|
26
|
+
```sh
|
|
27
|
+
curl --request POST \
|
|
28
|
+
--url https://api.courier.com/auth/issue-token \
|
|
29
|
+
--header 'Accept: application/json' \
|
|
30
|
+
--header 'Authorization: Bearer $YOUR_API_KEY' \
|
|
31
|
+
--header 'Content-Type: application/json' \
|
|
32
|
+
--data \
|
|
33
|
+
'{
|
|
34
|
+
"scope": "user_id:$YOUR_USER_ID write:user-tokens inbox:read:messages inbox:write:events read:preferences write:preferences read:brands",
|
|
35
|
+
"expires_in": "$YOUR_NUMBER days"
|
|
36
|
+
}'
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## 3. Add Inbox Component
|
|
40
|
+
|
|
41
|
+
### `courier-inbox`
|
|
42
|
+
|
|
43
|
+
<img width="688" alt="Screenshot 2025-06-25 at 2 32 30 PM" src="https://github.com/user-attachments/assets/93246c34-3c5a-475e-8e83-7df6acf9bdf3" />
|
|
44
|
+
|
|
45
|
+
```html
|
|
46
|
+
<body>
|
|
47
|
+
|
|
48
|
+
<courier-inbox id="inbox"></courier-inbox>
|
|
49
|
+
|
|
50
|
+
<script type="module">
|
|
51
|
+
import { Courier } from '@trycourier/courier-ui-inbox';
|
|
52
|
+
|
|
53
|
+
// Generate a JWT for your user (do this on your backend server)
|
|
54
|
+
const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT
|
|
55
|
+
|
|
56
|
+
// Authenticate the user with the inbox
|
|
57
|
+
Courier.shared.signIn({
|
|
58
|
+
userId: $YOUR_USER_ID,
|
|
59
|
+
jwt: jwt
|
|
60
|
+
});
|
|
61
|
+
</script>
|
|
62
|
+
|
|
63
|
+
</body>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### `courier-inbox-popup-menu`
|
|
67
|
+
|
|
68
|
+
<img width="602" alt="Screenshot 2025-06-25 at 2 33 17 PM" src="https://github.com/user-attachments/assets/c3b7f4cc-26c1-4be6-9ed5-a3fc3c0b335b" />
|
|
69
|
+
|
|
70
|
+
```html
|
|
71
|
+
<body>
|
|
72
|
+
|
|
73
|
+
<div style="padding: 24px;">
|
|
74
|
+
<courier-inbox-popup-menu id="inbox"></courier-inbox-popup-menu>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<script type="module">
|
|
78
|
+
import { Courier } from '@trycourier/courier-ui-inbox';
|
|
79
|
+
|
|
80
|
+
// Generate a JWT for your user (do this on your backend server)
|
|
81
|
+
const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT
|
|
82
|
+
|
|
83
|
+
// Authenticate the user with the inbox
|
|
84
|
+
Courier.shared.signIn({
|
|
85
|
+
userId: $YOUR_USER_ID,
|
|
86
|
+
jwt: jwt
|
|
87
|
+
});
|
|
88
|
+
</script>
|
|
89
|
+
|
|
90
|
+
</body>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## Handle Clicks and Presses
|
|
94
|
+
|
|
95
|
+
```html
|
|
96
|
+
<body>
|
|
97
|
+
|
|
98
|
+
<courier-inbox id="inbox"></courier-inbox> <!-- or use courier-inbox-popup-menu -->
|
|
99
|
+
|
|
100
|
+
<script type="module">
|
|
101
|
+
import { Courier } from '@trycourier/courier-ui-inbox';
|
|
102
|
+
|
|
103
|
+
// Generate a JWT for your user (do this on your backend server)
|
|
104
|
+
const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // Replace with actual JWT
|
|
105
|
+
|
|
106
|
+
// Authenticate the user with the inbox
|
|
107
|
+
Courier.shared.signIn({
|
|
108
|
+
userId: $YOUR_USER_ID,
|
|
109
|
+
jwt: jwt
|
|
110
|
+
});
|
|
111
|
+
|
|
112
|
+
// Reference the element
|
|
113
|
+
const inbox = document.getElementById('inbox');
|
|
114
|
+
|
|
115
|
+
// Handle message clicks
|
|
116
|
+
inbox.onMessageClick(({ message, index }) => {
|
|
117
|
+
alert("Message clicked at index " + index + ":\n" + JSON.stringify(message, null, 2));
|
|
118
|
+
});
|
|
119
|
+
|
|
120
|
+
// Handle message action clicks (These are buttons on individial messages)
|
|
121
|
+
inbox.onMessageActionClick(({ message, action, index }) => {
|
|
122
|
+
alert(
|
|
123
|
+
"Message action clicked at index " + index + ":\n" +
|
|
124
|
+
"Action: " + JSON.stringify(action, null, 2) + "\n" +
|
|
125
|
+
"Message: " + JSON.stringify(message, null, 2)
|
|
126
|
+
);
|
|
127
|
+
});
|
|
128
|
+
|
|
129
|
+
// Handle message long presses. **Only works on devices that support javascript's touch events. This will not work with a mouse cursor.**
|
|
130
|
+
inbox.onMessageLongPress(({ message, index }) => {
|
|
131
|
+
alert("Message long pressed at index " + index + ":\n" + JSON.stringify(message, null, 2));
|
|
132
|
+
});
|
|
133
|
+
</script>
|
|
134
|
+
|
|
135
|
+
</body>
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
## Styles and Theming
|
|
139
|
+
|
|
140
|
+
### Light & Dark Themes
|
|
141
|
+
|
|
142
|
+
The fastest way to style the Inbox to match your app. This example shows unread indicator styling, but you can customize fonts, icons, text, and more.
|
|
143
|
+
|
|
144
|
+
> **🎨 Theme Reference:** [All available theme values](./docs/theme.md)
|
|
145
|
+
|
|
146
|
+
<img width="688" alt="Screenshot 2025-06-25 at 2 36 20 PM" src="https://github.com/user-attachments/assets/982164fe-fe0d-4e66-82d1-b5a6571f1aa4" />
|
|
147
|
+
|
|
148
|
+
```html
|
|
149
|
+
<body>
|
|
150
|
+
|
|
151
|
+
<courier-inbox id="inbox"></courier-inbox> <!-- or use courier-inbox-popup-menu -->
|
|
152
|
+
|
|
153
|
+
<script type="module">
|
|
154
|
+
...
|
|
155
|
+
|
|
156
|
+
// Reference the element
|
|
157
|
+
const inbox = document.getElementById('inbox');
|
|
158
|
+
|
|
159
|
+
const theme = {
|
|
160
|
+
inbox: {
|
|
161
|
+
header: {
|
|
162
|
+
filters: {
|
|
163
|
+
unreadIndicator: {
|
|
164
|
+
backgroundColor: "#8B5CF6"
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
},
|
|
168
|
+
list: {
|
|
169
|
+
item: {
|
|
170
|
+
unreadIndicatorColor: "#8B5CF6"
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
// Set the theme
|
|
177
|
+
inbox.setLightTheme(theme);
|
|
178
|
+
inbox.setDarkTheme(theme);
|
|
179
|
+
|
|
180
|
+
// Set the mode
|
|
181
|
+
// This will force light, dark or system theme mode
|
|
182
|
+
inbox.setMode('light');
|
|
183
|
+
|
|
184
|
+
</script>
|
|
185
|
+
|
|
186
|
+
</body>
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
### Popup Alignment, Positioning, and Dimensions
|
|
190
|
+
|
|
191
|
+
```html
|
|
192
|
+
<body>
|
|
193
|
+
|
|
194
|
+
<div style="display: flex; justify-content: center; align-items: center; padding: 100px;">
|
|
195
|
+
<!-- Available alignments: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center' | 'center-right' | 'center-left' | 'center-center' -->
|
|
196
|
+
<courier-inbox-popup-menu
|
|
197
|
+
popup-alignment="top-right"
|
|
198
|
+
top="44px"
|
|
199
|
+
right="44px"
|
|
200
|
+
popup-width="340px"
|
|
201
|
+
popup-height="400px">
|
|
202
|
+
</courier-inbox-popup-menu>
|
|
203
|
+
</div>
|
|
204
|
+
|
|
205
|
+
...
|
|
206
|
+
</body>
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
### Custom height `courier-inbox`
|
|
210
|
+
|
|
211
|
+
> **Important:** The default `courier-inbox` height is auto. It will set it's height based on it's children.
|
|
212
|
+
|
|
213
|
+
```html
|
|
214
|
+
<body>
|
|
215
|
+
|
|
216
|
+
<courier-inbox height="50vh"></courier-inbox>
|
|
217
|
+
|
|
218
|
+
...
|
|
219
|
+
|
|
220
|
+
</body>
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
## Custom Elements
|
|
224
|
+
|
|
225
|
+
Customize the inbox UI with any element you want.
|
|
226
|
+
|
|
227
|
+
### List Items
|
|
228
|
+
|
|
229
|
+
<img width="688" alt="Screenshot 2025-06-25 at 2 37 29 PM" src="https://github.com/user-attachments/assets/53da26d1-ed9a-461d-ad92-2e74ee3e91bf" />
|
|
230
|
+
|
|
231
|
+
```html
|
|
232
|
+
<body>
|
|
233
|
+
|
|
234
|
+
<courier-inbox id="inbox"></courier-inbox> <!-- or use courier-inbox-popup-menu -->
|
|
235
|
+
|
|
236
|
+
<script type="module">
|
|
237
|
+
...
|
|
238
|
+
|
|
239
|
+
// Reference the courier-inbox element
|
|
240
|
+
const inbox = document.getElementById('inbox');
|
|
241
|
+
|
|
242
|
+
// Set a custom list item
|
|
243
|
+
inbox.setListItem(({ message, index }) => {
|
|
244
|
+
const pre = document.createElement('pre');
|
|
245
|
+
pre.style.padding = '24px';
|
|
246
|
+
pre.style.borderBottom = '1px solid #e0e0e0';
|
|
247
|
+
pre.style.margin = '0';
|
|
248
|
+
pre.textContent = JSON.stringify(({ message, index }), null, 2);
|
|
249
|
+
return pre;
|
|
250
|
+
});
|
|
251
|
+
</script>
|
|
252
|
+
|
|
253
|
+
</body>
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
### Header
|
|
257
|
+
|
|
258
|
+
<img width="688" alt="Screenshot 2025-06-25 at 2 38 45 PM" src="https://github.com/user-attachments/assets/d393f77d-695e-4fed-a60a-7f7b59909772" />
|
|
259
|
+
|
|
260
|
+
```html
|
|
261
|
+
<body>
|
|
262
|
+
|
|
263
|
+
<courier-inbox id="inbox"></courier-inbox> <!-- or use courier-inbox-popup-menu -->
|
|
264
|
+
|
|
265
|
+
<script type="module">
|
|
266
|
+
...
|
|
267
|
+
|
|
268
|
+
// Reference the courier-inbox element
|
|
269
|
+
const inbox = document.getElementById('inbox');
|
|
270
|
+
|
|
271
|
+
// Remove the header
|
|
272
|
+
inbox.removeHeader();
|
|
273
|
+
|
|
274
|
+
// Set a custom header
|
|
275
|
+
inbox.setHeader(({ feedType, unreadCount, messageCount }) => {
|
|
276
|
+
const headerDiv = document.createElement('div');
|
|
277
|
+
headerDiv.style.background = 'red';
|
|
278
|
+
headerDiv.style.fontSize = '24px';
|
|
279
|
+
headerDiv.style.padding = '24px';
|
|
280
|
+
headerDiv.style.width = '100%';
|
|
281
|
+
headerDiv.textContent = feedType;
|
|
282
|
+
return headerDiv;
|
|
283
|
+
});
|
|
284
|
+
|
|
285
|
+
// Change the feed type
|
|
286
|
+
// "inbox" and "archive" are available
|
|
287
|
+
inbox.setFeedType('archive');
|
|
288
|
+
</script>
|
|
289
|
+
|
|
290
|
+
</body>
|
|
291
|
+
```
|
|
292
|
+
|
|
293
|
+
### Popup Menu Button
|
|
294
|
+
|
|
295
|
+
<img width="688" alt="Screenshot 2025-06-25 at 2 39 49 PM" src="https://github.com/user-attachments/assets/5eeb32ae-13ff-4622-b6ea-b302f04509f3" />
|
|
296
|
+
|
|
297
|
+
```html
|
|
298
|
+
<body>
|
|
299
|
+
|
|
300
|
+
<div style="display: flex; justify-content: center; align-items: center; padding: 100px;">
|
|
301
|
+
<courier-inbox-popup-menu id="inbox"></courier-inbox-popup-menu>
|
|
302
|
+
</div>
|
|
303
|
+
|
|
304
|
+
<script type="module">
|
|
305
|
+
...
|
|
306
|
+
|
|
307
|
+
// Reference the courier-inbox element
|
|
308
|
+
const inbox = document.getElementById('inbox');
|
|
309
|
+
|
|
310
|
+
// Set a custom menu button
|
|
311
|
+
inbox.setMenuButton(({ unreadCount }) => {
|
|
312
|
+
const button = document.createElement('button');
|
|
313
|
+
button.textContent = `Open the Inbox Popup. Unread message count: ${unreadCount}`;
|
|
314
|
+
return button;
|
|
315
|
+
});
|
|
316
|
+
</script>
|
|
317
|
+
|
|
318
|
+
</body>
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
### Loading, Empty, Error & Pagination
|
|
322
|
+
|
|
323
|
+
```html
|
|
324
|
+
<body>
|
|
325
|
+
|
|
326
|
+
<courier-inbox id="inbox"></courier-inbox> <!-- or use courier-inbox-popup-menu -->
|
|
327
|
+
|
|
328
|
+
<script type="module">
|
|
329
|
+
...
|
|
330
|
+
|
|
331
|
+
// Reference the courier-inbox element
|
|
332
|
+
const inbox = document.getElementById('inbox');
|
|
333
|
+
|
|
334
|
+
// Set a custom loading state
|
|
335
|
+
inbox.setLoadingState(props => {
|
|
336
|
+
const loading = document.createElement('div');
|
|
337
|
+
loading.style.padding = '24px';
|
|
338
|
+
loading.style.background = 'red';
|
|
339
|
+
loading.textContent = 'Custom Loading State';
|
|
340
|
+
return loading;
|
|
341
|
+
});
|
|
342
|
+
|
|
343
|
+
// Set a custom empty state
|
|
344
|
+
inbox.setEmptyState(props => {
|
|
345
|
+
const empty = document.createElement('div');
|
|
346
|
+
empty.style.padding = '24px';
|
|
347
|
+
empty.style.background = 'green';
|
|
348
|
+
empty.textContent = 'Custom Empty State';
|
|
349
|
+
return empty;
|
|
350
|
+
});
|
|
351
|
+
|
|
352
|
+
// Set a custom error state
|
|
353
|
+
inbox.setErrorState(props => {
|
|
354
|
+
const error = document.createElement('div');
|
|
355
|
+
error.style.padding = '24px';
|
|
356
|
+
error.style.background = 'blue';
|
|
357
|
+
error.textContent = 'Custom Error State';
|
|
358
|
+
return error;
|
|
359
|
+
});
|
|
360
|
+
|
|
361
|
+
// Set a custom pagination state
|
|
362
|
+
inbox.setPaginationItem(props => {
|
|
363
|
+
const pagination = document.createElement('div');
|
|
364
|
+
pagination.style.padding = '24px';
|
|
365
|
+
pagination.style.background = 'yellow';
|
|
366
|
+
pagination.textContent = 'Custom Pagination Item';
|
|
367
|
+
return pagination;
|
|
368
|
+
});
|
|
369
|
+
</script>
|
|
370
|
+
|
|
371
|
+
</body>
|
|
372
|
+
```
|
|
373
|
+
|
|
374
|
+
> **Using React?** We suggest you use [@trycourier/courier-react](../courier-react/README.md) package instead.
|
|
@@ -2,8 +2,10 @@ import { InboxAction, InboxMessage } from '@trycourier/courier-js';
|
|
|
2
2
|
import { CourierBaseElement } from '@trycourier/courier-ui-core';
|
|
3
3
|
import { CourierInboxFeedType } from '../types/feed-type';
|
|
4
4
|
import { CourierInboxTheme } from '../types/courier-inbox-theme';
|
|
5
|
+
import { CourierInboxThemeManager } from '../types/courier-inbox-theme-manager';
|
|
5
6
|
export declare class CourierInboxListItem extends CourierBaseElement {
|
|
6
7
|
static get id(): string;
|
|
8
|
+
private _themeManager;
|
|
7
9
|
private _theme;
|
|
8
10
|
private _message;
|
|
9
11
|
private _feedType;
|
|
@@ -19,7 +21,7 @@ export declare class CourierInboxListItem extends CourierBaseElement {
|
|
|
19
21
|
private onItemClick;
|
|
20
22
|
private onItemLongPress;
|
|
21
23
|
private onItemActionClick;
|
|
22
|
-
constructor(
|
|
24
|
+
constructor(themeManager: CourierInboxThemeManager);
|
|
23
25
|
private render;
|
|
24
26
|
static getStyles(theme: CourierInboxTheme): string;
|
|
25
27
|
private _setupHoverBehavior;
|
|
@@ -28,6 +28,8 @@ export declare class CourierInboxList extends CourierBaseElement {
|
|
|
28
28
|
private _listStyles?;
|
|
29
29
|
private _listItemStyles?;
|
|
30
30
|
private _listItemMenuStyles?;
|
|
31
|
+
private _errorContainer?;
|
|
32
|
+
private _emptyContainer?;
|
|
31
33
|
constructor(props: {
|
|
32
34
|
themeManager: CourierInboxThemeManager;
|
|
33
35
|
onRefresh: () => void;
|
|
@@ -50,6 +52,9 @@ export declare class CourierInboxList extends CourierBaseElement {
|
|
|
50
52
|
setErrorNoClient(): void;
|
|
51
53
|
private handleRetry;
|
|
52
54
|
private handleRefresh;
|
|
55
|
+
refreshInfoStateThemes(): void;
|
|
56
|
+
get errorProps(): any;
|
|
57
|
+
get emptyProps(): any;
|
|
53
58
|
private render;
|
|
54
59
|
setLoadingStateFactory(factory: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => HTMLElement): void;
|
|
55
60
|
setEmptyStateFactory(factory: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => HTMLElement): void;
|
|
@@ -2,7 +2,7 @@ import { CourierInboxDatastoreEvents } from '../datastore/datatore-events';
|
|
|
2
2
|
import { CourierInboxHeaderFactoryProps, CourierInboxListItemActionFactoryProps, CourierInboxListItemFactoryProps, CourierInboxMenuButtonFactoryProps, CourierInboxPaginationItemFactoryProps, CourierInboxStateEmptyFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxStateLoadingFactoryProps } from '../types/factories';
|
|
3
3
|
import { CourierInboxFeedType } from '../types/feed-type';
|
|
4
4
|
import { CourierInboxTheme } from '../types/courier-inbox-theme';
|
|
5
|
-
import { CourierBaseElement } from '@trycourier/courier-ui-core';
|
|
5
|
+
import { CourierComponentThemeMode, CourierBaseElement } from '@trycourier/courier-ui-core';
|
|
6
6
|
export type CourierInboxPopupAlignment = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center' | 'center-right' | 'center-left' | 'center-center';
|
|
7
7
|
export declare class CourierInboxPopupMenu extends CourierBaseElement implements CourierInboxDatastoreEvents {
|
|
8
8
|
static get id(): string;
|
|
@@ -17,10 +17,14 @@ export declare class CourierInboxPopupMenu extends CourierBaseElement implements
|
|
|
17
17
|
get theme(): CourierInboxTheme;
|
|
18
18
|
setLightTheme(theme: CourierInboxTheme): void;
|
|
19
19
|
setDarkTheme(theme: CourierInboxTheme): void;
|
|
20
|
+
setMode(mode: CourierComponentThemeMode): void;
|
|
20
21
|
private _triggerButton?;
|
|
21
22
|
private _popup?;
|
|
22
23
|
private _inbox?;
|
|
23
24
|
private _style?;
|
|
25
|
+
private _onMessageClick?;
|
|
26
|
+
private _onMessageActionClick?;
|
|
27
|
+
private _onMessageLongPress?;
|
|
24
28
|
private _datastoreListener?;
|
|
25
29
|
private _popupMenuButtonFactory?;
|
|
26
30
|
static get observedAttributes(): string[];
|
|
@@ -37,18 +41,19 @@ export declare class CourierInboxPopupMenu extends CourierBaseElement implements
|
|
|
37
41
|
private isValidPosition;
|
|
38
42
|
private updatePopupPosition;
|
|
39
43
|
private togglePopup;
|
|
44
|
+
closePopup(): void;
|
|
40
45
|
private handleOutsideClick;
|
|
41
46
|
setContent(element: HTMLElement): void;
|
|
42
47
|
setSize(width: string, height: string): void;
|
|
43
48
|
setPosition(position: CourierInboxPopupAlignment): void;
|
|
44
49
|
setFeedType(feedType: CourierInboxFeedType): void;
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
50
|
+
setHeader(factory: (props: CourierInboxHeaderFactoryProps | undefined | null) => HTMLElement): void;
|
|
51
|
+
removeHeader(): void;
|
|
52
|
+
setLoadingState(factory: (props: CourierInboxStateLoadingFactoryProps | undefined | null) => HTMLElement): void;
|
|
53
|
+
setEmptyState(factory: (props: CourierInboxStateEmptyFactoryProps | undefined | null) => HTMLElement): void;
|
|
54
|
+
setErrorState(factory: (props: CourierInboxStateErrorFactoryProps | undefined | null) => HTMLElement): void;
|
|
55
|
+
setListItem(factory: (props: CourierInboxListItemFactoryProps | undefined | null) => HTMLElement): void;
|
|
56
|
+
setPaginationItem(factory: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => HTMLElement): void;
|
|
57
|
+
setMenuButton(factory: (props: CourierInboxMenuButtonFactoryProps | undefined | null) => HTMLElement): void;
|
|
53
58
|
private render;
|
|
54
59
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CourierBaseElement } from '@trycourier/courier-ui-core';
|
|
1
|
+
import { CourierBaseElement, CourierComponentThemeMode } from '@trycourier/courier-ui-core';
|
|
2
2
|
import { CourierInboxFeedType } from '../types/feed-type';
|
|
3
3
|
import { CourierInboxHeaderFactoryProps, CourierInboxListItemActionFactoryProps, CourierInboxListItemFactoryProps, CourierInboxPaginationItemFactoryProps, CourierInboxStateEmptyFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxStateLoadingFactoryProps } from '../types/factories';
|
|
4
4
|
import { CourierInboxTheme } from '../types/courier-inbox-theme';
|
|
@@ -10,6 +10,7 @@ export declare class CourierInbox extends CourierBaseElement {
|
|
|
10
10
|
get theme(): CourierInboxTheme;
|
|
11
11
|
setLightTheme(theme: CourierInboxTheme): void;
|
|
12
12
|
setDarkTheme(theme: CourierInboxTheme): void;
|
|
13
|
+
setMode(mode: CourierComponentThemeMode): void;
|
|
13
14
|
private _inboxStyle?;
|
|
14
15
|
private _unreadIndicatorStyle?;
|
|
15
16
|
private _list?;
|
package/dist/index.d.ts
CHANGED
|
@@ -11,3 +11,6 @@ export * from './types/inbox-data-set';
|
|
|
11
11
|
export * from './datastore/datastore';
|
|
12
12
|
export * from './datastore/datastore-listener';
|
|
13
13
|
export * from './datastore/datatore-events';
|
|
14
|
+
export { Courier } from '@trycourier/courier-js';
|
|
15
|
+
export type { CourierProps, CourierClientOptions, CourierBrand, CourierApiUrls, CourierUserPreferences, CourierUserPreferencesStatus, CourierUserPreferencesChannel, CourierUserPreferencesPaging, CourierUserPreferencesTopic, CourierUserPreferencesTopicResponse, CourierDevice, CourierToken, CourierGetInboxMessageResponse, CourierGetInboxMessagesResponse, InboxMessage, InboxAction, InboxMessageEventEnvelope, } from '@trycourier/courier-js';
|
|
16
|
+
export type { CourierComponentThemeMode } from '@trycourier/courier-ui-core';
|