@trycourier/courier-ui-inbox 1.0.7-beta → 1.0.8-beta

package/dist/components/courier-inbox-header-title.d.ts

@@ -1,20 +1,23 @@
+import { CourierBaseElement } from '@trycourier/courier-ui-core';
 import { CourierInboxMenuOption } from './courier-inbox-option-menu';
 import { CourierInboxFeedType } from '../types/feed-type';
 import { CourierInboxThemeManager } from '../types/courier-inbox-theme-manager';
-import { BaseElement } from '@trycourier/courier-ui-core';
-export declare class CourierInboxHeaderTitle extends BaseElement {
+import { CourierInboxTheme } from '../types/courier-inbox-theme';
+export declare class CourierInboxHeaderTitle extends CourierBaseElement {
+    static get id(): string;
     private _themeSubscription;
     private _option;
     private _feedType?;
-    private _titleElement;
-    private _iconElement;
-    private _unreadBadge;
-    private _container;
-    private _style;
+    private _style?;
+    private _titleElement?;
+    private _iconElement?;
+    private _unreadBadge?;
+    private get theme();
     constructor(themeManager: CourierInboxThemeManager, option: CourierInboxMenuOption);
-    private getStyles;
+    static getStyles(theme: CourierInboxTheme): string;
+    onComponentMounted(): void;
+    onComponentUnmounted(): void;
     private refreshTheme;
     updateSelectedOption(option: CourierInboxMenuOption, feedType: CourierInboxFeedType, unreadCount: number): void;
     private updateFilter;
-    disconnectedCallback(): void;
 }

package/dist/components/courier-inbox-header.d.ts

@@ -1,30 +1,33 @@
 import { CourierInboxFeedType } from '../types/feed-type';
-import { CourierElement } from '@trycourier/courier-ui-core';
+import { CourierFactoryElement } from '@trycourier/courier-ui-core';
 import { CourierInboxHeaderFactoryProps } from '../types/factories';
 import { CourierInboxThemeManager } from '../types/courier-inbox-theme-manager';
+import { CourierInboxTheme } from '../types/courier-inbox-theme';
 export type CourierInboxHeaderMenuItemId = CourierInboxFeedType | 'markAllRead' | 'archiveAll' | 'archiveRead';
-export declare class CourierInboxHeader extends CourierElement {
+export declare class CourierInboxHeader extends CourierFactoryElement {
+    static get id(): string;
     private _themeSubscription;
     private _feedType;
     private _unreadCount;
-    private getFilterOptions;
-    private getActionOptions;
     private _titleSection?;
     private _filterMenu?;
     private _actionMenu?;
     private _style?;
     private _onFeedTypeChange;
+    static get observedAttributes(): string[];
+    private get theme();
     constructor(props: {
         themeManager: CourierInboxThemeManager;
         onFeedTypeChange: (feedType: CourierInboxFeedType) => void;
     });
-    static get observedAttributes(): string[];
+    onComponentMounted(): void;
+    onComponentUmounted(): void;
+    private getFilterOptions;
+    private getActionOptions;
     private refreshTheme;
     private handleOptionMenuItemClick;
     render(props: CourierInboxHeaderFactoryProps): void;
-    private refreshTitleSection;
     build(newElement: HTMLElement | undefined | null): void;
     defaultElement(): HTMLElement;
-    private getStyles;
-    disconnectedCallback(): void;
+    static getStyles(theme: CourierInboxTheme): string;
 }

package/dist/components/courier-inbox-list-item-menu.d.ts

@@ -1,16 +1,17 @@
-import { BaseElement } from '@trycourier/courier-ui-core';
-import { CourierInboxIcon, CourierInboxTheme } from '../types/courier-inbox-theme';
+import { CourierBaseElement } from '@trycourier/courier-ui-core';
+import { CourierInboxIconTheme, CourierInboxTheme } from '../types/courier-inbox-theme';
 export type CourierInboxListItemActionMenuOption = {
     id: string;
-    icon: CourierInboxIcon;
+    icon: CourierInboxIconTheme;
     onClick: () => void;
 };
-export declare class CourierInboxListItemMenu extends BaseElement {
+export declare class CourierInboxListItemMenu extends CourierBaseElement {
+    static get id(): string;
     private _theme;
     private _options;
-    private _style;
     constructor(theme: CourierInboxTheme);
-    private getStyles;
+    onComponentMounted(): void;
+    static getStyles(theme: CourierInboxTheme): string;
     setOptions(options: CourierInboxListItemActionMenuOption[]): void;
     private renderMenu;
     show(): void;

package/dist/components/courier-inbox-list-item.d.ts

@@ -1,34 +1,33 @@
 import { InboxAction, InboxMessage } from '@trycourier/courier-js';
-import { BaseElement } from '@trycourier/courier-ui-core';
+import { CourierBaseElement } from '@trycourier/courier-ui-core';
 import { CourierInboxFeedType } from '../types/feed-type';
 import { CourierInboxTheme } from '../types/courier-inbox-theme';
-export declare class CourierListItem extends BaseElement {
+export declare class CourierInboxListItem extends CourierBaseElement {
+    static get id(): string;
     private _theme;
     private _message;
     private _feedType;
     private _isMobile;
-    private _titleElement;
-    private _subtitleElement;
-    private _timeElement;
-    private _style;
-    private _menu;
-    private _unreadIndicator;
-    private _actionsContainer;
+    private _titleElement?;
+    private _subtitleElement?;
+    private _timeElement?;
+    private _menu?;
+    private _unreadIndicator?;
+    private _actionsContainer?;
     private _longPressTimeout;
     private _isLongPress;
     private onItemClick;
     private onItemLongPress;
     private onItemActionClick;
     constructor(theme: CourierInboxTheme);
+    private render;
+    static getStyles(theme: CourierInboxTheme): string;
     private _setupHoverBehavior;
     private _setupLongPressBehavior;
     setOnLongPress(cb: (message: InboxMessage) => void): void;
     private _getMenuOptions;
     private _showMenu;
     private _hideMenu;
-    private _getStyles;
-    private _refreshStyles;
-    connectedCallback(): void;
     setMessage(message: InboxMessage, feedType: CourierInboxFeedType): void;
     setOnItemClick(cb: (message: InboxMessage) => void): void;
     setOnItemActionClick(cb: (message: InboxMessage, action: InboxAction) => void): void;

package/dist/components/courier-inbox-list.d.ts

@@ -1,10 +1,12 @@
 import { InboxAction, InboxMessage } from '@trycourier/courier-js';
-import { BaseElement } from '@trycourier/courier-ui-core';
+import { CourierBaseElement } from '@trycourier/courier-ui-core';
 import { InboxDataSet } from '../types/inbox-data-set';
 import { CourierInboxFeedType } from '../types/feed-type';
 import { CourierInboxStateErrorFactoryProps, CourierInboxStateEmptyFactoryProps, CourierInboxStateLoadingFactoryProps, CourierInboxListItemFactoryProps, CourierInboxPaginationItemFactoryProps } from '../types/factories';
+import { CourierInboxTheme } from '../types/courier-inbox-theme';
 import { CourierInboxThemeManager } from '../types/courier-inbox-theme-manager';
-export declare class CourierInboxList extends BaseElement {
+export declare class CourierInboxList extends CourierBaseElement {
+    static get id(): string;
     private _themeSubscription;
     private _messages;
     private _feedType;
@@ -22,6 +24,10 @@ export declare class CourierInboxList extends BaseElement {
     private _emptyStateFactory?;
     private _errorStateFactory?;
     get messages(): InboxMessage[];
+    private get theme();
+    private _listStyles?;
+    private _listItemStyles?;
+    private _listItemMenuStyles?;
     constructor(props: {
         themeManager: CourierInboxThemeManager;
         onRefresh: () => void;
@@ -30,8 +36,9 @@ export declare class CourierInboxList extends BaseElement {
         onMessageActionClick: (message: InboxMessage, action: InboxAction, index: number) => void;
         onMessageLongPress: (message: InboxMessage, index: number) => void;
     });
-    private getStyles;
-    private reset;
+    onComponentMounted(): void;
+    onComponentUnmounted(): void;
+    static getStyles(theme: CourierInboxTheme): string;
     setDataSet(dataSet: InboxDataSet): void;
     addPage(dataSet: InboxDataSet): void;
     addMessage(message: InboxMessage, index?: number): void;
@@ -49,6 +56,4 @@ export declare class CourierInboxList extends BaseElement {
     setErrorStateFactory(factory: (props: CourierInboxStateErrorFactoryProps | undefined | null) => HTMLElement): void;
     setListItemFactory(factory: (props: CourierInboxListItemFactoryProps | undefined | null) => HTMLElement): void;
     setPaginationItemFactory(factory: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => HTMLElement): void;
-    refreshTheme(): void;
-    disconnectedCallback(): void;
 }

package/dist/components/courier-inbox-menu-button.d.ts

@@ -1,14 +1,19 @@
-import { CourierElement } from '@trycourier/courier-ui-core';
+import { CourierFactoryElement } from '@trycourier/courier-ui-core';
+import { CourierInboxTheme } from '../types/courier-inbox-theme';
 import { CourierInboxThemeManager } from '../types/courier-inbox-theme-manager';
-export declare class CourierInboxMenuButton extends CourierElement {
+export declare class CourierInboxMenuButton extends CourierFactoryElement {
+    static get id(): string;
     private _themeSubscription;
+    private _style?;
     private _container?;
     private _triggerButton?;
     private _unreadCountBadge?;
+    get theme(): CourierInboxTheme;
     constructor(themeBus: CourierInboxThemeManager);
+    onComponentMounted(): void;
+    onComponentUnmounted(): void;
     defaultElement(): HTMLElement;
-    private getStyles;
+    static getStyles(_theme: CourierInboxTheme): string;
     onUnreadCountChange(unreadCount: number): void;
-    private updateTheme;
-    disconnectedCallback(): void;
+    private refreshTheme;
 }

package/dist/components/courier-inbox-option-menu-item.d.ts

@@ -1,21 +1,21 @@
-import { BaseElement } from '@trycourier/courier-ui-core';
+import { CourierBaseElement } from '@trycourier/courier-ui-core';
 import { CourierInboxThemeManager } from '../types/courier-inbox-theme-manager';
 import { CourierInboxMenuOption } from './courier-inbox-option-menu';
-export declare class CourierInboxOptionMenuItem extends BaseElement {
+export declare class CourierInboxOptionMenuItem extends CourierBaseElement {
+    static get id(): string;
     private _option;
+    private _isSelectedable;
     private _isSelected?;
-    private _content;
-    private _itemIcon;
-    private _title;
-    private _selectionIcon;
-    private _style;
-    private _themeManager;
+    private _content?;
+    private _itemIcon?;
+    private _title?;
+    private _selectionIcon?;
     constructor(props: {
         option: CourierInboxMenuOption;
         selectable: boolean;
         isSelected: boolean;
         themeManager: CourierInboxThemeManager;
     });
-    private getStyles;
+    onComponentMounted(): void;
     refreshTheme(): void;
 }

package/dist/components/courier-inbox-option-menu.d.ts

@@ -1,26 +1,29 @@
-import { BaseElement } from '@trycourier/courier-ui-core';
+import { CourierBaseElement } from '@trycourier/courier-ui-core';
 import { CourierInboxThemeManager } from '../types/courier-inbox-theme-manager';
 import { CourierInboxHeaderMenuItemId } from './courier-inbox-header';
-import { CourierInboxIcon } from '../types/courier-inbox-theme';
+import { CourierInboxIconTheme } from '../types/courier-inbox-theme';
 export type CourierInboxMenuOptionType = 'filters' | 'actions';
 export type CourierInboxMenuOption = {
     id: CourierInboxHeaderMenuItemId;
     text: string;
-    icon: CourierInboxIcon;
-    selectionIcon?: CourierInboxIcon | null;
+    icon: CourierInboxIconTheme;
+    selectionIcon?: CourierInboxIconTheme | null;
     onClick: (option: CourierInboxMenuOption) => void;
 };
-export declare class CourierInboxOptionMenu extends BaseElement {
+export declare class CourierInboxOptionMenu extends CourierBaseElement {
+    static get id(): string;
     private _themeSubscription;
     private _type;
     private _selectedIndex;
     private _options;
     private _selectable;
     private _onMenuOpen;
-    private _menuButton;
-    private _menu;
-    private _style;
+    private _menuButton?;
+    private _menu?;
+    private _style?;
     constructor(themeManager: CourierInboxThemeManager, type: CourierInboxMenuOptionType, selectable: boolean, options: CourierInboxMenuOption[], onMenuOpen: () => void);
+    onComponentMounted(): void;
+    onComponentUnmounted(): void;
     private getStyles;
     private refreshTheme;
     setOptions(options: CourierInboxMenuOption[]): void;
@@ -29,5 +32,4 @@ export declare class CourierInboxOptionMenu extends BaseElement {
     private handleOutsideClick;
     closeMenu(): void;
     selectOption(option: CourierInboxMenuOption): void;
-    disconnectedCallback(): void;
 }

package/dist/components/courier-inbox-pagination-list-item.d.ts

@@ -1,15 +1,19 @@
-import { BaseElement } from '@trycourier/courier-ui-core';
+import { CourierBaseElement } from '@trycourier/courier-ui-core';
 import { CourierInboxTheme } from '../types/courier-inbox-theme';
-export declare class CourierInboxPaginationListItem extends BaseElement {
-    private skeletonLoadingList?;
-    private observer;
-    private customItem?;
-    private onPaginationTrigger;
+export declare class CourierInboxPaginationListItem extends CourierBaseElement {
+    static get id(): string;
+    private _theme;
+    private _style?;
+    private _skeletonLoadingList?;
+    private _observer?;
+    private _customItem?;
+    private _onPaginationTrigger;
     constructor(props: {
         theme: CourierInboxTheme;
         customItem?: HTMLElement;
         onPaginationTrigger: () => void;
     });
-    private getStyles;
-    disconnectedCallback(): void;
+    onComponentMounted(): void;
+    onComponentUnmounted(): void;
+    static getStyles(_theme: CourierInboxTheme): string;
 }

package/dist/components/courier-inbox-popup-menu.d.ts

@@ -2,9 +2,10 @@ import { CourierInboxDatastoreEvents } from '../datastore/datatore-events';
 import { CourierInboxHeaderFactoryProps, CourierInboxListItemActionFactoryProps, CourierInboxListItemFactoryProps, CourierInboxMenuButtonFactoryProps, CourierInboxPaginationItemFactoryProps, CourierInboxStateEmptyFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxStateLoadingFactoryProps } from '../types/factories';
 import { CourierInboxFeedType } from '../types/feed-type';
 import { CourierInboxTheme } from '../types/courier-inbox-theme';
-import { BaseElement } from '@trycourier/courier-ui-core';
+import { CourierBaseElement } from '@trycourier/courier-ui-core';
 export type CourierInboxPopupAlignment = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center' | 'center-right' | 'center-left' | 'center-center';
-export declare class CourierInboxPopupMenu extends BaseElement implements CourierInboxDatastoreEvents {
+export declare class CourierInboxPopupMenu extends CourierBaseElement implements CourierInboxDatastoreEvents {
+    static get id(): string;
     private _width;
     private _height;
     private _popupAlignment;
@@ -16,16 +17,18 @@ export declare class CourierInboxPopupMenu extends BaseElement implements Courie
     get theme(): CourierInboxTheme;
     setLightTheme(theme: CourierInboxTheme): void;
     setDarkTheme(theme: CourierInboxTheme): void;
-    private _triggerButton;
-    private _popup;
-    private _inbox;
-    private _style;
+    private _triggerButton?;
+    private _popup?;
+    private _inbox?;
+    private _style?;
     private _datastoreListener?;
     private _popupMenuButtonFactory?;
     static get observedAttributes(): string[];
     constructor();
+    onComponentMounted(): void;
+    onComponentUnmounted(): void;
     private refreshTheme;
-    private getStyles;
+    static getStyles(theme: CourierInboxTheme, width: string, height: string): string;
     attributeChangedCallback(name: string, _: string, newValue: string): void;
     onUnreadCountChange(_: number): void;
     onMessageClick(handler?: (props: CourierInboxListItemFactoryProps) => void): void;
@@ -48,5 +51,4 @@ export declare class CourierInboxPopupMenu extends BaseElement implements Courie
     setPopupPaginationItem(factory: (props: CourierInboxPaginationItemFactoryProps | undefined | null) => HTMLElement): void;
     setPopupMenuButton(factory: (props: CourierInboxMenuButtonFactoryProps | undefined | null) => HTMLElement): void;
     private render;
-    disconnectedCallback(): void;
 }

package/dist/components/courier-inbox-skeleton-list-item.d.ts

@@ -1,7 +1,12 @@
-import { BaseElement } from '@trycourier/courier-ui-core';
+import { CourierBaseElement } from '@trycourier/courier-ui-core';
 import { CourierInboxTheme } from '../types/courier-inbox-theme';
-export declare class CourierInboxSkeletonListItem extends BaseElement {
-    private _shadow;
-    constructor(theme: CourierInboxTheme, opacity: number);
-    private getStyles;
+export declare class CourierInboxSkeletonListItem extends CourierBaseElement {
+    static get id(): string;
+    private _theme;
+    private _style?;
+    constructor(theme: CourierInboxTheme);
+    onComponentMounted(): void;
+    onComponentUnmounted(): void;
+    private render;
+    static getStyles(_theme: CourierInboxTheme): string;
 }

package/dist/components/courier-inbox-skeleton-list.d.ts

@@ -1,8 +1,12 @@
-import { CourierElement } from '@trycourier/courier-ui-core';
+import { CourierFactoryElement } from '@trycourier/courier-ui-core';
 import { CourierInboxTheme } from '../types/courier-inbox-theme';
-export declare class CourierInboxSkeletonList extends CourierElement {
+export declare class CourierInboxSkeletonList extends CourierFactoryElement {
+    static get id(): string;
     private _theme;
+    private _style?;
     constructor(theme: CourierInboxTheme);
+    onComponentMounted(): void;
+    onComponentUnmounted(): void;
     defaultElement(): HTMLElement;
-    private getStyles;
+    static getStyles(theme: CourierInboxTheme): string;
 }

package/dist/components/courier-inbox.d.ts

@@ -1,20 +1,21 @@
-import { BaseElement } from '@trycourier/courier-ui-core';
+import { CourierBaseElement } from '@trycourier/courier-ui-core';
 import { CourierInboxFeedType } from '../types/feed-type';
 import { CourierInboxHeaderFactoryProps, CourierInboxListItemActionFactoryProps, CourierInboxListItemFactoryProps, CourierInboxPaginationItemFactoryProps, CourierInboxStateEmptyFactoryProps, CourierInboxStateErrorFactoryProps, CourierInboxStateLoadingFactoryProps } from '../types/factories';
 import { CourierInboxTheme } from '../types/courier-inbox-theme';
 import { CourierInboxThemeManager } from '../types/courier-inbox-theme-manager';
-export declare class CourierInbox extends BaseElement {
+export declare class CourierInbox extends CourierBaseElement {
+    static get id(): string;
     private _currentFeed;
     private _themeManager;
     get theme(): CourierInboxTheme;
     setLightTheme(theme: CourierInboxTheme): void;
     setDarkTheme(theme: CourierInboxTheme): void;
-    private _shadow;
-    private _list;
+    private _inboxStyle?;
+    private _unreadIndicatorStyle?;
+    private _list?;
     private _datastoreListener;
     private _authListener;
-    private _style;
-    private _header;
+    private _header?;
     private _headerFactory;
     private _onMessageClick?;
     private _onMessageActionClick?;
@@ -22,6 +23,8 @@ export declare class CourierInbox extends BaseElement {
     private _defaultProps;
     static get observedAttributes(): string[];
     constructor(themeManager?: CourierInboxThemeManager);
+    onComponentMounted(): void;
+    onComponentUnmounted(): void;
     private refreshTheme;
     private getStyles;
     setHeader(factory: (props: CourierInboxHeaderFactoryProps | undefined | null) => HTMLElement): void;
@@ -38,7 +41,5 @@ export declare class CourierInbox extends BaseElement {
     private updateHeader;
     private load;
     refresh(): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
 }

package/dist/components/courier-unread-count-badge.d.ts

@@ -1,19 +1,23 @@
-import { BaseElement } from '@trycourier/courier-ui-core';
+import { CourierBaseElement } from '@trycourier/courier-ui-core';
+import { CourierInboxTheme } from '../types/courier-inbox-theme';
 import { CourierInboxThemeManager } from '../types/courier-inbox-theme-manager';
 export type CourierUnreadCountLocation = 'button' | 'header';
-export declare class CourierUnreadCountBadge extends BaseElement {
+export declare class CourierUnreadCountBadge extends CourierBaseElement {
+    static get id(): string;
     private _themeSubscription;
     private _location;
     private _count;
-    private _badge;
-    private _style;
+    private _badge?;
+    private _style?;
+    get theme(): CourierInboxTheme;
     constructor(props: {
         themeBus: CourierInboxThemeManager;
         location: CourierUnreadCountLocation;
     });
-    private getStyles;
+    onComponentMounted(): void;
+    onComponentUnmounted(): void;
+    static getStyles(theme: CourierInboxTheme): string;
     setCount(count: number): void;
     refreshTheme(location: CourierUnreadCountLocation): void;
     private updateBadge;
-    disconnectedCallback(): void;
 }

package/dist/datastore/datastore.d.ts

@@ -16,16 +16,12 @@ export declare class CourierInboxDatastore {
     get archiveDataSet(): InboxDataSet;
     addDataStoreListener(listener: CourierInboxDataStoreListener): void;
     removeDataStoreListener(listener: CourierInboxDataStoreListener): void;
-    private fetchDataSet;
+    private fetchCachableDataSet;
     private fetchUnreadCount;
     load(props?: {
-        feedType: CourierInboxFeedType;
         canUseCache: boolean;
     }): Promise<void>;
-    /** Listen for inbox and archive dataset updates. */
     listenForUpdates(): Promise<void>;
-    /** Fetch either/both datasets if they aren't already loaded. */
-    private ensureDataSetsLoaded;
     private connectSocket;
     /**
      * Get a message by messageId from the inbox or archive data set