@digital-realty/ix-notifications 1.0.31 → 1.0.33-alpha.0

package/dist/IxNotifications.js

@@ -1,171 +1,171 @@
-import { __decorate } from "tslib";
-import { html, nothing } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import { MobxLitElement } from '@adobe/lit-mobx';
-import { differenceInDays, differenceInHours } from 'date-fns';
-import { plannedMaintenance, viewList, dcim, sortCheck, } from './assets/iconset.js';
-import { TWStyles } from './tw.js';
-import '@digital-realty/ix-button/ix-button.js';
-import '@digital-realty/ix-drawer/ix-drawer.js';
-import '@digital-realty/ix-icon';
-import '@material/web/icon/icon.js';
-import { NotificationsState } from './state/NotificationState.js';
-import { ApiCallState, NotificationGroups, NotificationStatus, } from './constants/notifications.js';
-import './components/notifications/notification-item.js';
-import './components/notifications/grouped-item.js';
-import './components/notifications/group-filters.js';
-import './components/notifications/date-filters.js';
-import './components/notifications/confirmation-dialog.js';
-import { NotificationsStyle } from './styles/notifications-style.js';
-import './components/notifications/notification-tooltip.js';
-export class IxNotifications extends MobxLitElement {
-    constructor() {
-        super(...arguments);
-        this.showGroupedView = false;
-        this.showFilters = false;
-        this.showDateFilters = false;
-        this.showMarkAllReadConfirmation = false;
-        this.baseApiUrl = '';
-        this.localStorageKey = '';
-    }
-    async firstUpdated() {
-        // Construct ApiClient form baseApiUrl and localStorageKey
-        NotificationsState.baseApiUrl = this.baseApiUrl;
-        NotificationsState.localStorageKey = this.localStorageKey;
-        NotificationsState.ConstructApiClient();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        window.addEventListener('account-switched', NotificationsState.NewApiClient);
-        window.addEventListener('beforeunload', this.handleOnbeforeunload);
-    }
-    disconnectedCallback() {
-        window.removeEventListener('account-switched', NotificationsState.NewApiClient);
-        window.removeEventListener('beforeunload', this.handleOnbeforeunload);
-        super.disconnectedCallback();
-    }
-    // Handle browser refresh event
-    // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars
-    handleOnbeforeunload(event) {
-        NotificationsState.clearStoredNotificationsData();
-    }
-    toggleDrawer() {
-        NotificationsState.showDrawer = !NotificationsState.showDrawer;
-        if (!NotificationsState.showDrawer) {
-            this.showFilters = false;
-            this.showDateFilters = false;
-        }
-    }
-    /* eslint-disable-next-line */
-    renderUnReadCountText() {
-        if (NotificationsState.unreadNotificationCount <= 0) {
-            return html `${nothing}`;
-        }
-        let unreadCountText = '';
-        if (NotificationsState.unreadNotificationCount > 99) {
-            unreadCountText = '99+';
-        }
-        else {
-            unreadCountText = NotificationsState.unreadNotificationCount.toString();
-        }
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { MobxLitElement } from '@adobe/lit-mobx';
+import { differenceInDays, differenceInHours } from 'date-fns';
+import { plannedMaintenance, viewList, dcim, sortCheck, } from './assets/iconset.js';
+import { TWStyles } from './tw.js';
+import '@digital-realty/ix-button/ix-button.js';
+import '@digital-realty/ix-drawer/ix-drawer.js';
+import '@digital-realty/ix-icon';
+import '@material/web/icon/icon.js';
+import { NotificationsState } from './state/NotificationState.js';
+import { ApiCallState, NotificationGroups, NotificationStatus, } from './constants/notifications.js';
+import './components/notifications/notification-item.js';
+import './components/notifications/grouped-item.js';
+import './components/notifications/group-filters.js';
+import './components/notifications/date-filters.js';
+import './components/notifications/confirmation-dialog.js';
+import { NotificationsStyle } from './styles/notifications-style.js';
+import './components/notifications/notification-tooltip.js';
+export class IxNotifications extends MobxLitElement {
+    constructor() {
+        super(...arguments);
+        this.showGroupedView = false;
+        this.showFilters = false;
+        this.showDateFilters = false;
+        this.showMarkAllReadConfirmation = false;
+        this.baseApiUrl = '';
+        this.localStorageKey = '';
+    }
+    async firstUpdated() {
+        // Construct ApiClient form baseApiUrl and localStorageKey
+        NotificationsState.baseApiUrl = this.baseApiUrl;
+        NotificationsState.localStorageKey = this.localStorageKey;
+        NotificationsState.ConstructApiClient();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('account-switched', NotificationsState.NewApiClient);
+        window.addEventListener('beforeunload', this.handleOnbeforeunload);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('account-switched', NotificationsState.NewApiClient);
+        window.removeEventListener('beforeunload', this.handleOnbeforeunload);
+        super.disconnectedCallback();
+    }
+    // Handle browser refresh event
+    // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars
+    handleOnbeforeunload(event) {
+        NotificationsState.clearStoredNotificationsData();
+    }
+    toggleDrawer() {
+        NotificationsState.showDrawer = !NotificationsState.showDrawer;
+        if (!NotificationsState.showDrawer) {
+            this.showFilters = false;
+            this.showDateFilters = false;
+        }
+    }
+    /* eslint-disable-next-line */
+    renderUnReadCountText() {
+        if (NotificationsState.unreadNotificationCount <= 0) {
+            return html `${nothing}`;
+        }
+        let unreadCountText = '';
+        if (NotificationsState.unreadNotificationCount > 99) {
+            unreadCountText = '99+';
+        }
+        else {
+            unreadCountText = NotificationsState.unreadNotificationCount.toString();
+        }
         return html ` <div
       class="unread rounded-full text-center text-white text-sm absolute icon-position -start-0"
     >
       ${unreadCountText}
-    </div>`;
-    }
-    markAllread() {
-        if (NotificationsState.unreadNotificationCount > 0) {
-            this.showMarkAllReadConfirmation = true;
-        }
-    }
-    confirmedMarkAllRead(e) {
-        // Mark All read if Confirmed True
-        if (e.detail.returnValue) {
-            const filterNotification = this.applyNotificationFilters();
-            const unreadItems = filterNotification === null || filterNotification === void 0 ? void 0 : filterNotification.filter(item => item.status === NotificationStatus.UNREAD);
-            if (unreadItems.length > 0) {
-                let allResultSuccesful = true;
-                filterNotification === null || filterNotification === void 0 ? void 0 : filterNotification.forEach(item => {
-                    NotificationsState.setNotificationReadStatus(item.id).then((result) => {
-                        if (allResultSuccesful)
-                            allResultSuccesful = result;
-                    });
-                });
-                const apiResult = {
-                    State: allResultSuccesful === true
-                        ? ApiCallState.SUCCESS
-                        : ApiCallState.ERROR,
-                    Message: allResultSuccesful === true
-                        ? 'Successfully marked all the notificaions as read'
-                        : 'Error while marking the notifications read, Please try again',
-                };
-                this.showResultMessage(apiResult, unreadItems[0].id);
-                this.renderUnReadCountText();
-                this.requestUpdate();
-            }
-        }
-        this.showMarkAllReadConfirmation = false;
-    }
-    // eslint-disable-next-line class-methods-use-this
-    showResultMessage(result, id) {
-        window.dispatchEvent(new CustomEvent('add-toast', {
-            detail: {
-                id,
+    </div>`;
+    }
+    markAllread() {
+        if (NotificationsState.unreadNotificationCount > 0) {
+            this.showMarkAllReadConfirmation = true;
+        }
+    }
+    confirmedMarkAllRead(e) {
+        // Mark All read if Confirmed True
+        if (e.detail.returnValue) {
+            const filterNotification = this.applyNotificationFilters();
+            const unreadItems = filterNotification === null || filterNotification === void 0 ? void 0 : filterNotification.filter(item => item.status === NotificationStatus.UNREAD);
+            if (unreadItems.length > 0) {
+                let allResultSuccesful = true;
+                filterNotification === null || filterNotification === void 0 ? void 0 : filterNotification.forEach(item => {
+                    NotificationsState.setNotificationReadStatus(item.id).then((result) => {
+                        if (allResultSuccesful)
+                            allResultSuccesful = result;
+                    });
+                });
+                const apiResult = {
+                    State: allResultSuccesful === true
+                        ? ApiCallState.SUCCESS
+                        : ApiCallState.ERROR,
+                    Message: allResultSuccesful === true
+                        ? 'Successfully marked all the notificaions as read'
+                        : 'Error while marking the notifications read, Please try again',
+                };
+                this.showResultMessage(apiResult, unreadItems[0].id);
+                this.renderUnReadCountText();
+                this.requestUpdate();
+            }
+        }
+        this.showMarkAllReadConfirmation = false;
+    }
+    // eslint-disable-next-line class-methods-use-this
+    showResultMessage(result, id) {
+        window.dispatchEvent(new CustomEvent('add-toast', {
+            detail: {
+                id,
                 content: html ` <ix-message-toast
             toastId=${id}
             .TMessageToast=${result.State.toLowerCase()}
             forceClose
           >
             ${result.Message}
-          </ix-message-toast>`,
-                autoClose: 3000,
-                durationOut: 3000,
-                vertical: 'bottom',
-                horizontal: 'center',
-                animated: true,
-                above: false,
-            },
-        }));
-    }
-    toggleGroupView() {
-        this.showGroupedView = !this.showGroupedView;
-    }
-    displayFilters() {
-        this.showFilters = !this.showFilters;
-    }
-    /* eslint-disable-next-line */
-    applyNotificationFilters() {
-        var _a;
-        const filteredNotifications = (_a = NotificationsState.notifications) === null || _a === void 0 ? void 0 : _a.filter((notification) => (notification.resourceType === NotificationGroups.PLANNED_MAINTENANCE &&
-            NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE ===
-                true) ||
-            (notification.resourceType === NotificationGroups.SERVICE_TICKETS &&
-                NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS ===
-                    true) ||
-            (notification.resourceType === NotificationGroups.DCIM_ALERTS &&
-                NotificationsState.notificationFilters.SHOW_DCIM_ALERTS === true) ||
-            notification.resourceType === NotificationGroups.INCIDENTS); // Always display incidents
-        // both dates are defined, search within the window
-        if (NotificationsState.dateFilters.FROM_DATE !== undefined &&
-            NotificationsState.dateFilters.TO_DATE !== undefined)
-            return filteredNotifications.filter(notification => differenceInHours(new Date(notification.createdAt), NotificationsState.dateFilters.FROM_DATE) >= 0 &&
-                differenceInDays(new Date(notification.createdAt), NotificationsState.dateFilters.TO_DATE) <= 0);
-        // FROM_DATE is defined, TO_DATE is undefined, return notifications after FROM_DATE
-        if (NotificationsState.dateFilters.FROM_DATE !== undefined &&
-            NotificationsState.dateFilters.TO_DATE === undefined)
-            return filteredNotifications.filter(notification => differenceInHours(new Date(notification.createdAt), NotificationsState.dateFilters.FROM_DATE) >= 0);
-        // TO_DATE is defined, FROM_DATE is undefined, return notifications before TO_DATE
-        if (NotificationsState.dateFilters.FROM_DATE === undefined &&
-            NotificationsState.dateFilters.TO_DATE !== undefined)
-            return filteredNotifications.filter(notification => differenceInDays(new Date(notification.createdAt), NotificationsState.dateFilters.TO_DATE) <= 0);
-        return filteredNotifications;
-    }
-    displayDateFilters() {
-        this.showDateFilters = !this.showDateFilters;
-    }
-    renderGroupedView() {
-        const filteredNotifications = this.applyNotificationFilters();
+          </ix-message-toast>`,
+                autoClose: 3000,
+                durationOut: 3000,
+                vertical: 'bottom',
+                horizontal: 'center',
+                animated: true,
+                above: false,
+            },
+        }));
+    }
+    toggleGroupView() {
+        this.showGroupedView = !this.showGroupedView;
+    }
+    displayFilters() {
+        this.showFilters = !this.showFilters;
+    }
+    /* eslint-disable-next-line */
+    applyNotificationFilters() {
+        var _a;
+        const filteredNotifications = (_a = NotificationsState.notifications) === null || _a === void 0 ? void 0 : _a.filter((notification) => (notification.resourceType === NotificationGroups.PLANNED_MAINTENANCE &&
+            NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE ===
+                true) ||
+            (notification.resourceType === NotificationGroups.SERVICE_TICKETS &&
+                NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS ===
+                    true) ||
+            (notification.resourceType === NotificationGroups.DCIM_ALERTS &&
+                NotificationsState.notificationFilters.SHOW_DCIM_ALERTS === true) ||
+            notification.resourceType === NotificationGroups.INCIDENTS); // Always display incidents
+        // both dates are defined, search within the window
+        if (NotificationsState.dateFilters.FROM_DATE !== undefined &&
+            NotificationsState.dateFilters.TO_DATE !== undefined)
+            return filteredNotifications.filter(notification => differenceInHours(new Date(notification.createdAt), NotificationsState.dateFilters.FROM_DATE) >= 0 &&
+                differenceInDays(new Date(notification.createdAt), NotificationsState.dateFilters.TO_DATE) <= 0);
+        // FROM_DATE is defined, TO_DATE is undefined, return notifications after FROM_DATE
+        if (NotificationsState.dateFilters.FROM_DATE !== undefined &&
+            NotificationsState.dateFilters.TO_DATE === undefined)
+            return filteredNotifications.filter(notification => differenceInHours(new Date(notification.createdAt), NotificationsState.dateFilters.FROM_DATE) >= 0);
+        // TO_DATE is defined, FROM_DATE is undefined, return notifications before TO_DATE
+        if (NotificationsState.dateFilters.FROM_DATE === undefined &&
+            NotificationsState.dateFilters.TO_DATE !== undefined)
+            return filteredNotifications.filter(notification => differenceInDays(new Date(notification.createdAt), NotificationsState.dateFilters.TO_DATE) <= 0);
+        return filteredNotifications;
+    }
+    displayDateFilters() {
+        this.showDateFilters = !this.showDateFilters;
+    }
+    renderGroupedView() {
+        const filteredNotifications = this.applyNotificationFilters();
         return html `<div style="margin:0px">
       <grouped-item
         groupTitle="Planned Site Maintenance"
@@ -187,69 +187,69 @@ export class IxNotifications extends MobxLitElement {
         groupIcon="${dcim.strings[0]}"
         .childItems=${filteredNotifications === null || filteredNotifications === void 0 ? void 0 : filteredNotifications.filter(item => item.resourceType === NotificationGroups.DCIM_ALERTS)}
       ></grouped-item>
-    </div>`;
-    }
-    renderDefaultView() {
-        const filterNotification = this.applyNotificationFilters();
-        const filterTodayItems = filterNotification.filter(notification => differenceInDays(notification.createdAt, new Date()) === 0);
-        const filterEarlierItems = filterNotification.filter(notification => differenceInDays(notification.createdAt, new Date()) !== 0);
-        if ((filterNotification === null || filterNotification === void 0 ? void 0 : filterNotification.length) > 0) {
+    </div>`;
+    }
+    renderDefaultView() {
+        const filterNotification = this.applyNotificationFilters();
+        const filterTodayItems = filterNotification.filter(notification => differenceInDays(notification.createdAt, new Date()) === 0);
+        const filterEarlierItems = filterNotification.filter(notification => differenceInDays(notification.createdAt, new Date()) !== 0);
+        if ((filterNotification === null || filterNotification === void 0 ? void 0 : filterNotification.length) > 0) {
             return html ` <h3 class="grow">Today</h3>
         <div class="m-0 p-0">
-          ${filterTodayItems.length > 0
+          ${filterTodayItems.length > 0
                 ? filterTodayItems === null || filterTodayItems === void 0 ? void 0 : filterTodayItems.map(item => html `<notification-item
                   .notification=${item}
-                  ?disabled=${item.resourceType ===
+                  ?disabled=${item.resourceType ===
                     NotificationGroups.INCIDENTS}
                 >
-                </notification-item> `)
+                </notification-item> `)
                 : this.renderNoResult()}
         </div>
         <h3 class="grow">Earlier</h3>
         <div>
-          ${filterEarlierItems.length > 0
+          ${filterEarlierItems.length > 0
                 ? filterEarlierItems === null || filterEarlierItems === void 0 ? void 0 : filterEarlierItems.map(item => html `<notification-item
                   .notification=${item}
-                  ?disabled=${item.resourceType ===
+                  ?disabled=${item.resourceType ===
                     NotificationGroups.INCIDENTS}
                 >
-                </notification-item> `)
+                </notification-item> `)
                 : this.renderNoResult()}
-        </div>`;
-        }
-        return html `<p class="empty"><strong>No notifications yet.</strong></p>`;
-    }
-    /* eslint-disable-next-line */
-    renderNoResult() {
-        return html `<p class="empty"><strong>No notifications yet.</strong></p>`;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    handleCloseClick(_e) {
-        this.showDateFilters = false;
-        this.showFilters = false;
-    }
-    // eslint-disable-next-line
-    handleContentScroll(e) {
-        // when scrollbar at the end, retrieve next page
-        if (e !== null &&
-            e.detail.scrollTop + e.detail.clientHeight >= e.detail.scrollHeight) {
-            NotificationsState.getNotifications();
-        }
-    }
-    manageFilterVisibility(e) {
-        const path = e.composedPath();
-        if (this.showFilters &&
-            !path.includes(this.groupFilters) &&
-            !path.includes(this.groupFiltersButton)) {
-            this.showFilters = false;
-        }
-        if (this.showDateFilters &&
-            !path.includes(this.dateFilters) &&
-            !path.includes(this.dateFiltersButton)) {
-            this.showDateFilters = false;
-        }
-    }
-    render() {
+        </div>`;
+        }
+        return html `<p class="empty"><strong>No notifications yet.</strong></p>`;
+    }
+    /* eslint-disable-next-line */
+    renderNoResult() {
+        return html `<p class="empty"><strong>No notifications yet.</strong></p>`;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    handleCloseClick(_e) {
+        this.showDateFilters = false;
+        this.showFilters = false;
+    }
+    // eslint-disable-next-line
+    handleContentScroll(e) {
+        // when scrollbar at the end, retrieve next page
+        if (e !== null &&
+            e.detail.scrollTop + e.detail.clientHeight >= e.detail.scrollHeight) {
+            NotificationsState.getNotifications();
+        }
+    }
+    manageFilterVisibility(e) {
+        const path = e.composedPath();
+        if (this.showFilters &&
+            !path.includes(this.groupFilters) &&
+            !path.includes(this.groupFiltersButton)) {
+            this.showFilters = false;
+        }
+        if (this.showDateFilters &&
+            !path.includes(this.dateFilters) &&
+            !path.includes(this.dateFiltersButton)) {
+            this.showDateFilters = false;
+        }
+    }
+    render() {
         return html `
       <notification-tooltip> </notification-tooltip>
       <div class="relative">
@@ -260,8 +260,8 @@ export class IxNotifications extends MobxLitElement {
       </div>
       <confirmation-dialog
         ?open=${this.showMarkAllReadConfirmation}
-        @confirm-dialog-closed=${() => {
-            this.showMarkAllReadConfirmation = false;
+        @confirm-dialog-closed=${() => {
+            this.showMarkAllReadConfirmation = false;
         }}
         @on-confirm-selection=${this.confirmedMarkAllRead}
         textMessage="Are you sure you want to mark all notifications as read?"
@@ -280,28 +280,28 @@ export class IxNotifications extends MobxLitElement {
           <div class="flex flex-row justify-end grow items-center options">
             <ix-icon-button
               @click=${this.markAllread}
-              @mouseover=${(e) => {
-            // only show the tooltip if the button is active
-            if (NotificationsState.unreadNotificationCount > 0) {
-                window.dispatchEvent(new CustomEvent('show-notification-tooltip', {
-                    detail: { label: 'Mark All Read', target: e.target },
-                }));
-            }
+              @mouseover=${(e) => {
+            // only show the tooltip if the button is active
+            if (NotificationsState.unreadNotificationCount > 0) {
+                window.dispatchEvent(new CustomEvent('show-notification-tooltip', {
+                    detail: { label: 'Mark All Read', target: e.target },
+                }));
+            }
         }}
               @mouseout=${() => window.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}
               icon="markunread_mailbox"
-              class="${NotificationsState.unreadNotificationCount <= 0
-            ? 'inactive-icon'
+              class="${NotificationsState.unreadNotificationCount <= 0
+            ? 'inactive-icon'
             : 'active-icon'}"
               .disabled="${NotificationsState.unreadNotificationCount <= 0}"
               filledIcon="true"
             ></ix-icon-button>
             <ix-icon-button
               @click=${this.toggleGroupView}
-              @mouseover=${(e) => {
-            window.dispatchEvent(new CustomEvent('show-notification-tooltip', {
-                detail: { label: 'Sort by Type', target: e.target },
-            }));
+              @mouseover=${(e) => {
+            window.dispatchEvent(new CustomEvent('show-notification-tooltip', {
+                detail: { label: 'Sort by Type', target: e.target },
+            }));
         }}
               @mouseout=${() => window.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}
               class="active-icon"
@@ -313,10 +313,10 @@ export class IxNotifications extends MobxLitElement {
             </ix-icon-button>
             <ix-icon-button
               @click=${this.displayFilters}
-              @mouseover=${(e) => {
-            window.dispatchEvent(new CustomEvent('show-notification-tooltip', {
-                detail: { label: 'Filter by Type', target: e.target },
-            }));
+              @mouseover=${(e) => {
+            window.dispatchEvent(new CustomEvent('show-notification-tooltip', {
+                detail: { label: 'Filter by Type', target: e.target },
+            }));
         }}
               @mouseout=${() => window.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}
               class="active-icon"
@@ -326,18 +326,18 @@ export class IxNotifications extends MobxLitElement {
               <ix-icon slot="default"> ${viewList} </ix-icon>
             </ix-icon-button>
             <div
-              class="filter-dropdown-content  ${this.showFilters
-            ? 'active z-50'
+              class="filter-dropdown-content  ${this.showFilters
+            ? 'active z-50'
             : ''}"
             >
               <group-filters></group-filters>
             </div>
             <ix-icon-button
               @click=${this.displayDateFilters}
-              @mouseover=${(e) => {
-            window.dispatchEvent(new CustomEvent('show-notification-tooltip', {
-                detail: { label: 'Filter by Date', target: e.target },
-            }));
+              @mouseover=${(e) => {
+            window.dispatchEvent(new CustomEvent('show-notification-tooltip', {
+                detail: { label: 'Filter by Date', target: e.target },
+            }));
         }}
               @mouseout=${() => window.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}
               icon="date_range"
@@ -347,8 +347,8 @@ export class IxNotifications extends MobxLitElement {
               label="Filter by Date"
             ></ix-icon-button>
             <div
-              class="datefilter-dropdown-content ${this.showDateFilters
-            ? 'active z-50'
+              class="datefilter-dropdown-content ${this.showDateFilters
+            ? 'active z-50'
             : ''}"
               @on-selection=${this.handleCloseClick}
             >
@@ -357,43 +357,43 @@ export class IxNotifications extends MobxLitElement {
           </div>
         </div>
         <div slot="content">
-          ${this.showGroupedView
-            ? this.renderGroupedView()
+          ${this.showGroupedView
+            ? this.renderGroupedView()
             : this.renderDefaultView()}
         </div>
       </ix-drawer>
-    `;
-    }
-}
-IxNotifications.styles = [TWStyles, NotificationsStyle];
-__decorate([
-    query('group-filters')
-], IxNotifications.prototype, "groupFilters", void 0);
-__decorate([
-    query('ix-icon-button#group-filter-button')
-], IxNotifications.prototype, "groupFiltersButton", void 0);
-__decorate([
-    query('date-filters')
-], IxNotifications.prototype, "dateFilters", void 0);
-__decorate([
-    query('ix-icon-button#date-filters-button')
-], IxNotifications.prototype, "dateFiltersButton", void 0);
-__decorate([
-    state()
-], IxNotifications.prototype, "showGroupedView", void 0);
-__decorate([
-    state()
-], IxNotifications.prototype, "showFilters", void 0);
-__decorate([
-    state()
-], IxNotifications.prototype, "showDateFilters", void 0);
-__decorate([
-    state()
-], IxNotifications.prototype, "showMarkAllReadConfirmation", void 0);
-__decorate([
-    property({ type: String })
-], IxNotifications.prototype, "baseApiUrl", void 0);
-__decorate([
-    property({ type: String })
-], IxNotifications.prototype, "localStorageKey", void 0);
+    `;
+    }
+}
+IxNotifications.styles = [TWStyles, NotificationsStyle];
+__decorate([
+    query('group-filters')
+], IxNotifications.prototype, "groupFilters", void 0);
+__decorate([
+    query('ix-icon-button#group-filter-button')
+], IxNotifications.prototype, "groupFiltersButton", void 0);
+__decorate([
+    query('date-filters')
+], IxNotifications.prototype, "dateFilters", void 0);
+__decorate([
+    query('ix-icon-button#date-filters-button')
+], IxNotifications.prototype, "dateFiltersButton", void 0);
+__decorate([
+    state()
+], IxNotifications.prototype, "showGroupedView", void 0);
+__decorate([
+    state()
+], IxNotifications.prototype, "showFilters", void 0);
+__decorate([
+    state()
+], IxNotifications.prototype, "showDateFilters", void 0);
+__decorate([
+    state()
+], IxNotifications.prototype, "showMarkAllReadConfirmation", void 0);
+__decorate([
+    property({ type: String })
+], IxNotifications.prototype, "baseApiUrl", void 0);
+__decorate([
+    property({ type: String })
+], IxNotifications.prototype, "localStorageKey", void 0);
 //# sourceMappingURL=IxNotifications.js.map