@digital-realty/ix-notifications 1.0.1 → 1.0.4

package/dist/IxNotifications.d.ts

@@ -1,37 +1,37 @@
-import { MobxLitElement } from '@adobe/lit-mobx';
-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 { Notification } from './models/notification.js';
-import { FilterDialogEventDetail } from './constants/notification-types.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';
-export declare class IxNotifications extends MobxLitElement {
-    static styles: import("lit").CSSResult[];
-    private showDrawer;
-    private showGroupedView;
-    private showFilters;
-    private showDateFilters;
-    private showMarkAllReadConfirmation;
-    baseApiUrl: string;
-    firstUpdated(): Promise<void>;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    toggleDrawer(): void;
-    renderUnReadCountText(): import("lit").TemplateResult<1>;
-    markAllread(): void;
-    private confirmedMarkAllRead;
-    toggleGroupView(): void;
-    displayFilters(): void;
-    applyNotificationFilters(): Notification[];
-    displayDateFilters(): void;
-    renderGroupedView(): import("lit").TemplateResult<1>;
-    renderDefaultView(): import("lit").TemplateResult<1>;
-    renderNoResult(): import("lit").TemplateResult<1>;
-    handleCloseClick(_e: CustomEvent<FilterDialogEventDetail>): void;
-    render(): import("lit").TemplateResult<1>;
-}
+import { MobxLitElement } from '@adobe/lit-mobx';
+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 { Notification } from './models/notification.js';
+import { FilterDialogEventDetail } from './constants/notification-types.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';
+export declare class IxNotifications extends MobxLitElement {
+    static styles: import("lit").CSSResult[];
+    private showDrawer;
+    private showGroupedView;
+    private showFilters;
+    private showDateFilters;
+    private showMarkAllReadConfirmation;
+    baseApiUrl: string;
+    firstUpdated(): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    toggleDrawer(): void;
+    renderUnReadCountText(): import("lit").TemplateResult<1>;
+    markAllread(): void;
+    private confirmedMarkAllRead;
+    toggleGroupView(): void;
+    displayFilters(): void;
+    applyNotificationFilters(): Notification[];
+    displayDateFilters(): void;
+    renderGroupedView(): import("lit").TemplateResult<1>;
+    renderDefaultView(): import("lit").TemplateResult<1>;
+    renderNoResult(): import("lit").TemplateResult<1>;
+    handleCloseClick(_e: CustomEvent<FilterDialogEventDetail>): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/IxNotifications.js

@@ -1,116 +1,114 @@
-import { __decorate } from "tslib";
-import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { MobxLitElement } from '@adobe/lit-mobx';
-import { differenceInDays, differenceInHours } from 'date-fns';
-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 { 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';
-export class IxNotifications extends MobxLitElement {
-    constructor() {
-        super(...arguments);
-        this.showDrawer = false;
-        this.showGroupedView = false;
-        this.showFilters = false;
-        this.showDateFilters = false;
-        this.showMarkAllReadConfirmation = false;
-        this.baseApiUrl = '';
-    }
-    async firstUpdated() {
-        // Construct ApiClient form baseApiUrl Prop
-        NotificationsState.baseApiUrl = this.baseApiUrl;
-        NotificationsState.ConstructApiClient();
-        // Load the notifications
-        await NotificationsState.getNotifications();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        window.addEventListener('account-switched', NotificationsState.NewApiClient);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        window.removeEventListener('account-switched', NotificationsState.NewApiClient);
-    }
-    toggleDrawer() {
-        this.showDrawer = !this.showDrawer;
-        if (!this.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, state } from 'lit/decorators.js';
+import { MobxLitElement } from '@adobe/lit-mobx';
+import { differenceInDays, differenceInHours } from 'date-fns';
+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 { 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';
+export class IxNotifications extends MobxLitElement {
+    constructor() {
+        super(...arguments);
+        this.showDrawer = false;
+        this.showGroupedView = false;
+        this.showFilters = false;
+        this.showDateFilters = false;
+        this.showMarkAllReadConfirmation = false;
+        this.baseApiUrl = '';
+    }
+    async firstUpdated() {
+        // Construct ApiClient form baseApiUrl Prop
+        NotificationsState.baseApiUrl = this.baseApiUrl;
+        NotificationsState.ConstructApiClient();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('account-switched', NotificationsState.NewApiClient);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('account-switched', NotificationsState.NewApiClient);
+    }
+    toggleDrawer() {
+        this.showDrawer = !this.showDrawer;
+        if (!this.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="px-1 bg-red-500 rounded-full text-center text-white text-sm absolute icon-position -start-0"
       style="top:0.05rem ;left: 1.5rem;"
     >
       ${unreadCountText}
-    </div>`;
-    }
-    markAllread() {
-        this.showMarkAllReadConfirmation = true;
-    }
-    confirmedMarkAllRead(e) {
-        // Mark All read if Confirmed True
-        if (e.detail.returnValue) {
-            const filterNotification = this.applyNotificationFilters();
-            filterNotification === null || filterNotification === void 0 ? void 0 : filterNotification.forEach(item => {
-                if (item.status === NotificationStatus.UNREAD)
-                    NotificationsState.setNotificationReadStatus(item.id);
-            });
-            this.renderUnReadCountText();
-        }
-        this.showMarkAllReadConfirmation = false;
-    }
-    toggleGroupView() {
-        this.showGroupedView = !this.showGroupedView;
-    }
-    displayFilters() {
-        this.showFilters = !this.showFilters;
-    }
-    /* eslint-disable-next-line */
-    applyNotificationFilters() {
-        var _a;
-        const filterredNotifications = (_a = NotificationsState.notifications) === null || _a === void 0 ? void 0 : _a.filter((x) => (x.resourceType === NotificationGroups.PLANNED_MAINTENANCE &&
-            NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE ===
-                true) ||
-            (x.resourceType === NotificationGroups.SERVICE_TICKETS &&
-                NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS ===
-                    true) ||
-            (x.resourceType === NotificationGroups.DCIM_ALERTS &&
-                NotificationsState.notificationFilters.SHOW_DCIM_ALERTS === true) ||
-            x.resourceType === NotificationGroups.INCIDENTS); // Always display incidents
-        if (NotificationsState.dateFilters.FROM_DATE === undefined ||
-            NotificationsState.dateFilters.TO_DATE === undefined)
-            return filterredNotifications;
-        return filterredNotifications.filter(x => differenceInHours(new Date(x.createdAt), NotificationsState.dateFilters.FROM_DATE) >= 0 &&
-            differenceInDays(new Date(x.createdAt), NotificationsState.dateFilters.TO_DATE) <= 0);
-    }
-    displayDateFilters() {
-        this.showDateFilters = !this.showDateFilters;
-    }
-    renderGroupedView() {
-        const filteredNotifications = this.applyNotificationFilters();
+    </div>`;
+    }
+    markAllread() {
+        this.showMarkAllReadConfirmation = true;
+    }
+    confirmedMarkAllRead(e) {
+        // Mark All read if Confirmed True
+        if (e.detail.returnValue) {
+            const filterNotification = this.applyNotificationFilters();
+            filterNotification === null || filterNotification === void 0 ? void 0 : filterNotification.forEach(item => {
+                if (item.status === NotificationStatus.UNREAD)
+                    NotificationsState.setNotificationReadStatus(item.id);
+            });
+            this.renderUnReadCountText();
+        }
+        this.showMarkAllReadConfirmation = false;
+    }
+    toggleGroupView() {
+        this.showGroupedView = !this.showGroupedView;
+    }
+    displayFilters() {
+        this.showFilters = !this.showFilters;
+    }
+    /* eslint-disable-next-line */
+    applyNotificationFilters() {
+        var _a;
+        const filterredNotifications = (_a = NotificationsState.notifications) === null || _a === void 0 ? void 0 : _a.filter((x) => (x.resourceType === NotificationGroups.PLANNED_MAINTENANCE &&
+            NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE ===
+                true) ||
+            (x.resourceType === NotificationGroups.SERVICE_TICKETS &&
+                NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS ===
+                    true) ||
+            (x.resourceType === NotificationGroups.DCIM_ALERTS &&
+                NotificationsState.notificationFilters.SHOW_DCIM_ALERTS === true) ||
+            x.resourceType === NotificationGroups.INCIDENTS); // Always display incidents
+        if (NotificationsState.dateFilters.FROM_DATE === undefined ||
+            NotificationsState.dateFilters.TO_DATE === undefined)
+            return filterredNotifications;
+        return filterredNotifications.filter(x => differenceInHours(new Date(x.createdAt), NotificationsState.dateFilters.FROM_DATE) >= 0 &&
+            differenceInDays(new Date(x.createdAt), NotificationsState.dateFilters.TO_DATE) <= 0);
+    }
+    displayDateFilters() {
+        this.showDateFilters = !this.showDateFilters;
+    }
+    renderGroupedView() {
+        const filteredNotifications = this.applyNotificationFilters();
         return html `<div>
       <grouped-item
         groupTitle=${NotificationGroups.PLANNED_MAINTENANCE}
@@ -132,54 +130,54 @@ export class IxNotifications extends MobxLitElement {
         iconName="public"
         .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(x => differenceInDays(x.createdAt, new Date()) === 0);
-        const filterEarlierItems = filterNotification.filter(x => differenceInDays(x.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(x => differenceInDays(x.createdAt, new Date()) === 0);
+        const filterEarlierItems = filterNotification.filter(x => differenceInDays(x.createdAt, new Date()) !== 0);
+        if ((filterNotification === null || filterNotification === void 0 ? void 0 : filterNotification.length) > 0) {
             return html ` <div class="grow text-sm font-bold py-4 pl-2 align-top">
           Latest
         </div>
         <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
                   .notificaiton=${item}
-                  ?disabled=${item.resourceType ===
+                  ?disabled=${item.resourceType ===
                     NotificationGroups.INCIDENTS}
                 >
-                </notification-item> `)
+                </notification-item> `)
                 : this.renderNoResult()}
         </div>
         <div class="grow text-sm font-bold py-4 pl-2 align-top">Earlier</div>
         <div>
-          ${filterEarlierItems.length > 0
+          ${filterEarlierItems.length > 0
                 ? filterEarlierItems === null || filterEarlierItems === void 0 ? void 0 : filterEarlierItems.map(item => html `<notification-item
                   .notificaiton=${item}
-                  ?disabled=${item.resourceType ===
+                  ?disabled=${item.resourceType ===
                     NotificationGroups.INCIDENTS}
                 >
-                </notification-item> `)
+                </notification-item> `)
                 : this.renderNoResult()}
-        </div>`;
-        }
+        </div>`;
+        }
         return html `<p class="m-0 pl-4 font-bold mr-4">
       <small style="padding-left: 16px">No notifications yet.</small>
-    </p>`;
-    }
-    /* eslint-disable-next-line */
-    renderNoResult() {
+    </p>`;
+    }
+    /* eslint-disable-next-line */
+    renderNoResult() {
         return html `<p class="m-0 pl-4 font-bold mr-4">
       <small style="padding-left: 16px">No notifications yet.</small>
-    </p>`;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    handleCloseClick(_e) {
-        this.showDateFilters = false;
-        this.showFilters = false;
-    }
-    render() {
+    </p>`;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    handleCloseClick(_e) {
+        this.showDateFilters = false;
+        this.showFilters = false;
+    }
+    render() {
         return html `
       <div class="relative">
         <ix-icon-button
@@ -192,8 +190,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?"
@@ -226,8 +224,8 @@ export class IxNotifications extends MobxLitElement {
               class="blue-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>
@@ -238,8 +236,8 @@ export class IxNotifications extends MobxLitElement {
               class="blue-icon"
             ></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}
             >
@@ -248,31 +246,31 @@ 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([
-    state()
-], IxNotifications.prototype, "showDrawer", 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);
+    `;
+    }
+}
+IxNotifications.styles = [TWStyles, NotificationsStyle];
+__decorate([
+    state()
+], IxNotifications.prototype, "showDrawer", 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);
 //# sourceMappingURL=IxNotifications.js.map

package/dist/IxNotifications.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxNotifications.js","sourceRoot":"","sources":["../src/IxNotifications.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { differenceInDays, differenceInHours } from 'date-fns';\nimport { TWStyles } from './tw.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport '@digital-realty/ix-drawer/ix-drawer.js';\nimport '@digital-realty/ix-icon';\nimport '@material/web/icon/icon.js';\nimport { NotificationsState } from './state/NotificationState.js';\nimport { Notification } from './models/notification.js';\nimport {\n  ConfirmationDialogEventDetail,\n  FilterDialogEventDetail,\n} from './constants/notification-types.js';\nimport {\n  NotificationGroups,\n  NotificationStatus,\n} from './constants/notifications.js';\nimport './components/notifications/notification-item.js';\nimport './components/notifications/grouped-item.js';\nimport './components/notifications/group-filters.js';\nimport './components/notifications/date-filters.js';\nimport './components/notifications/confirmation-dialog.js';\nimport { NotificationsStyle } from './styles/notifications-style.js';\n\nexport class IxNotifications extends MobxLitElement {\n  static styles = [TWStyles, NotificationsStyle];\n\n  @state() private showDrawer = false;\n\n  @state() private showGroupedView = false;\n\n  @state() private showFilters = false;\n\n  @state() private showDateFilters = false;\n\n  @state() private showMarkAllReadConfirmation = false;\n\n  @property({ type: String }) baseApiUrl = '';\n\n  async firstUpdated() {\n    // Construct ApiClient form baseApiUrl Prop\n    NotificationsState.baseApiUrl = this.baseApiUrl;\n    NotificationsState.ConstructApiClient();\n\n    // Load the notifications\n    await NotificationsState.getNotifications();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener(\n      'account-switched',\n      NotificationsState.NewApiClient\n    );\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener(\n      'account-switched',\n      NotificationsState.NewApiClient\n    );\n  }\n\n  toggleDrawer() {\n    this.showDrawer = !this.showDrawer;\n    if (!this.showDrawer) {\n      this.showFilters = false;\n      this.showDateFilters = false;\n    }\n  }\n\n  /* eslint-disable-next-line */\n  renderUnReadCountText() {\n    if (NotificationsState.unreadNotificationCount <= 0) {\n      return html`${nothing}`;\n    }\n\n    let unreadCountText = '';\n    if (NotificationsState.unreadNotificationCount > 99) {\n      unreadCountText = '99+';\n    } else {\n      unreadCountText = NotificationsState.unreadNotificationCount.toString();\n    }\n\n    return html` <div\n      class=\"px-1 bg-red-500 rounded-full text-center text-white text-sm absolute icon-position -start-0\"\n      style=\"top:0.05rem ;left: 1.5rem;\"\n    >\n      ${unreadCountText}\n    </div>`;\n  }\n\n  markAllread() {\n    this.showMarkAllReadConfirmation = true;\n  }\n\n  private confirmedMarkAllRead(e: CustomEvent<ConfirmationDialogEventDetail>) {\n    // Mark All read if Confirmed True\n    if (e.detail.returnValue) {\n      const filterNotification = this.applyNotificationFilters();\n\n      filterNotification?.forEach(item => {\n        if (item.status === NotificationStatus.UNREAD)\n          NotificationsState.setNotificationReadStatus(item.id);\n      });\n\n      this.renderUnReadCountText();\n    }\n\n    this.showMarkAllReadConfirmation = false;\n  }\n\n  toggleGroupView() {\n    this.showGroupedView = !this.showGroupedView;\n  }\n\n  displayFilters() {\n    this.showFilters = !this.showFilters;\n  }\n\n  /* eslint-disable-next-line */\n  applyNotificationFilters() {\n    const filterredNotifications = NotificationsState.notifications?.filter(\n      (x: Notification) =>\n        (x.resourceType === NotificationGroups.PLANNED_MAINTENANCE &&\n          NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE ===\n            true) ||\n        (x.resourceType === NotificationGroups.SERVICE_TICKETS &&\n          NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS ===\n            true) ||\n        (x.resourceType === NotificationGroups.DCIM_ALERTS &&\n          NotificationsState.notificationFilters.SHOW_DCIM_ALERTS === true) ||\n        x.resourceType === NotificationGroups.INCIDENTS\n    ); // Always display incidents\n\n    if (\n      NotificationsState.dateFilters.FROM_DATE === undefined ||\n      NotificationsState.dateFilters.TO_DATE === undefined\n    )\n      return filterredNotifications;\n\n    return filterredNotifications.filter(\n      x =>\n        differenceInHours(\n          new Date(x.createdAt),\n          NotificationsState.dateFilters.FROM_DATE!\n        ) >= 0 &&\n        differenceInDays(\n          new Date(x.createdAt),\n          NotificationsState.dateFilters.TO_DATE!\n        ) <= 0\n    );\n  }\n\n  displayDateFilters() {\n    this.showDateFilters = !this.showDateFilters;\n  }\n\n  renderGroupedView() {\n    const filteredNotifications = this.applyNotificationFilters();\n\n    return html`<div>\n      <grouped-item\n        groupTitle=${NotificationGroups.PLANNED_MAINTENANCE}\n        iconName=\"lab_profile\"\n        .childItems=${filteredNotifications?.filter(\n          item => item.resourceType === NotificationGroups.PLANNED_MAINTENANCE\n        )}\n      ></grouped-item>\n      <grouped-item\n        groupTitle=${NotificationGroups.INCIDENTS}\n        iconName=\"emergency_home\"\n        .childItems=${filteredNotifications?.filter(\n          item => item.resourceType === NotificationGroups.INCIDENTS\n        )}\n      ></grouped-item>\n      <grouped-item\n        groupTitle=${NotificationGroups.SERVICE_TICKETS}\n        iconName=\"dvr\"\n        .childItems=${filteredNotifications?.filter(\n          item => item.resourceType === NotificationGroups.SERVICE_TICKETS\n        )}\n      ></grouped-item>\n      <grouped-item\n        groupTitle=${NotificationGroups.DCIM_ALERTS}\n        iconName=\"public\"\n        .childItems=${filteredNotifications?.filter(\n          item => item.resourceType === NotificationGroups.DCIM_ALERTS\n        )}\n      ></grouped-item>\n    </div>`;\n  }\n\n  renderDefaultView() {\n    const filterNotification = this.applyNotificationFilters();\n    const filterTodayItems = filterNotification.filter(\n      x => differenceInDays(x.createdAt, new Date()) === 0\n    );\n    const filterEarlierItems = filterNotification.filter(\n      x => differenceInDays(x.createdAt, new Date()) !== 0\n    );\n\n    if (filterNotification?.length! > 0) {\n      return html` <div class=\"grow text-sm font-bold py-4 pl-2 align-top\">\n          Latest\n        </div>\n        <div class=\"m-0 p-0\">\n          ${filterTodayItems.length > 0\n            ? filterTodayItems?.map(\n                item => html`<notification-item\n                  .notificaiton=${item}\n                  ?disabled=${item.resourceType ===\n                  NotificationGroups.INCIDENTS}\n                >\n                </notification-item> `\n              )\n            : this.renderNoResult()}\n        </div>\n        <div class=\"grow text-sm font-bold py-4 pl-2 align-top\">Earlier</div>\n        <div>\n          ${filterEarlierItems.length > 0\n            ? filterEarlierItems?.map(\n                item => html`<notification-item\n                  .notificaiton=${item}\n                  ?disabled=${item.resourceType ===\n                  NotificationGroups.INCIDENTS}\n                >\n                </notification-item> `\n              )\n            : this.renderNoResult()}\n        </div>`;\n    }\n\n    return html`<p class=\"m-0 pl-4 font-bold mr-4\">\n      <small style=\"padding-left: 16px\">No notifications yet.</small>\n    </p>`;\n  }\n\n  /* eslint-disable-next-line */\n  renderNoResult() {\n    return html`<p class=\"m-0 pl-4 font-bold mr-4\">\n      <small style=\"padding-left: 16px\">No notifications yet.</small>\n    </p>`;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  handleCloseClick(_e: CustomEvent<FilterDialogEventDetail>) {\n    this.showDateFilters = false;\n    this.showFilters = false;\n  }\n\n  render() {\n    return html`\n      <div class=\"relative\">\n        <ix-icon-button\n          icon=\"circle_notifications\"\n          class=\"blue-icon\"\n          @click=${() => this.toggleDrawer()}\n        >\n        </ix-icon-button>\n        ${this.renderUnReadCountText()}\n      </div>\n      <confirmation-dialog\n        ?open=${this.showMarkAllReadConfirmation}\n        @confirm-dialog-closed=${() => {\n          this.showMarkAllReadConfirmation = false;\n        }}\n        @on-confirm-selection=${this.confirmedMarkAllRead}\n        textMessage=\"Are you sure you want to mark all notifications as read?\"\n      >\n      </confirmation-dialog>\n      <ix-drawer\n        ?isVisible=${this.showDrawer}\n        .onClosed=${() => this.toggleDrawer()}\n        animate-vertical\n        hide-close\n      >\n        <div class=\"flex flex-row justify-between grow py-2\" slot=\"header\">\n          <div class=\"grow text-xl items-center  font-bold py-4 pl-2 align-top\">\n            Notifications\n          </div>\n          <div class=\"flex flex-row justify-end grow items-center \">\n            <ix-icon-button\n              @click=${this.markAllread}\n              icon=\"fact_check\"\n              class=\"blue-icon\"\n            ></ix-icon-button>\n            <ix-icon-button\n              @click=${this.toggleGroupView}\n              icon=\"sort\"\n              class=\"blue-icon\"\n            ></ix-icon-button>\n            <ix-icon-button\n              @click=${this.displayFilters}\n              icon=\"menu\"\n              class=\"blue-icon\"\n            ></ix-icon-button>\n            <div\n              class=\"filter-dropdown-content  ${this.showFilters\n                ? 'active z-50'\n                : ''}\"\n            >\n              <group-filters></group-filters>\n            </div>\n            <ix-icon-button\n              @click=${this.displayDateFilters}\n              icon=\"calendar_month\"\n              class=\"blue-icon\"\n            ></ix-icon-button>\n            <div\n              class=\"datefilter-dropdown-content  ${this.showDateFilters\n                ? 'active z-50'\n                : ''}\"\n              @on-selection=${this.handleCloseClick}\n            >\n              <date-filters></date-filters>\n            </div>\n          </div>\n        </div>\n        <div slot=\"content\">\n          ${this.showGroupedView\n            ? this.renderGroupedView()\n            : this.renderDefaultView()}\n        </div>\n      </ix-drawer>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"IxNotifications.js","sourceRoot":"","sources":["../src/IxNotifications.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { differenceInDays, differenceInHours } from 'date-fns';\nimport { TWStyles } from './tw.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport '@digital-realty/ix-drawer/ix-drawer.js';\nimport '@digital-realty/ix-icon';\nimport '@material/web/icon/icon.js';\nimport { NotificationsState } from './state/NotificationState.js';\nimport { Notification } from './models/notification.js';\nimport {\n  ConfirmationDialogEventDetail,\n  FilterDialogEventDetail,\n} from './constants/notification-types.js';\nimport {\n  NotificationGroups,\n  NotificationStatus,\n} from './constants/notifications.js';\nimport './components/notifications/notification-item.js';\nimport './components/notifications/grouped-item.js';\nimport './components/notifications/group-filters.js';\nimport './components/notifications/date-filters.js';\nimport './components/notifications/confirmation-dialog.js';\nimport { NotificationsStyle } from './styles/notifications-style.js';\n\nexport class IxNotifications extends MobxLitElement {\n  static styles = [TWStyles, NotificationsStyle];\n\n  @state() private showDrawer = false;\n\n  @state() private showGroupedView = false;\n\n  @state() private showFilters = false;\n\n  @state() private showDateFilters = false;\n\n  @state() private showMarkAllReadConfirmation = false;\n\n  @property({ type: String }) baseApiUrl = '';\n\n  async firstUpdated() {\n    // Construct ApiClient form baseApiUrl Prop\n    NotificationsState.baseApiUrl = this.baseApiUrl;\n    NotificationsState.ConstructApiClient();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener(\n      'account-switched',\n      NotificationsState.NewApiClient\n    );\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener(\n      'account-switched',\n      NotificationsState.NewApiClient\n    );\n  }\n\n  toggleDrawer() {\n    this.showDrawer = !this.showDrawer;\n    if (!this.showDrawer) {\n      this.showFilters = false;\n      this.showDateFilters = false;\n    }\n  }\n\n  /* eslint-disable-next-line */\n  renderUnReadCountText() {\n    if (NotificationsState.unreadNotificationCount <= 0) {\n      return html`${nothing}`;\n    }\n\n    let unreadCountText = '';\n    if (NotificationsState.unreadNotificationCount > 99) {\n      unreadCountText = '99+';\n    } else {\n      unreadCountText = NotificationsState.unreadNotificationCount.toString();\n    }\n\n    return html` <div\n      class=\"px-1 bg-red-500 rounded-full text-center text-white text-sm absolute icon-position -start-0\"\n      style=\"top:0.05rem ;left: 1.5rem;\"\n    >\n      ${unreadCountText}\n    </div>`;\n  }\n\n  markAllread() {\n    this.showMarkAllReadConfirmation = true;\n  }\n\n  private confirmedMarkAllRead(e: CustomEvent<ConfirmationDialogEventDetail>) {\n    // Mark All read if Confirmed True\n    if (e.detail.returnValue) {\n      const filterNotification = this.applyNotificationFilters();\n\n      filterNotification?.forEach(item => {\n        if (item.status === NotificationStatus.UNREAD)\n          NotificationsState.setNotificationReadStatus(item.id);\n      });\n\n      this.renderUnReadCountText();\n    }\n\n    this.showMarkAllReadConfirmation = false;\n  }\n\n  toggleGroupView() {\n    this.showGroupedView = !this.showGroupedView;\n  }\n\n  displayFilters() {\n    this.showFilters = !this.showFilters;\n  }\n\n  /* eslint-disable-next-line */\n  applyNotificationFilters() {\n    const filterredNotifications = NotificationsState.notifications?.filter(\n      (x: Notification) =>\n        (x.resourceType === NotificationGroups.PLANNED_MAINTENANCE &&\n          NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE ===\n            true) ||\n        (x.resourceType === NotificationGroups.SERVICE_TICKETS &&\n          NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS ===\n            true) ||\n        (x.resourceType === NotificationGroups.DCIM_ALERTS &&\n          NotificationsState.notificationFilters.SHOW_DCIM_ALERTS === true) ||\n        x.resourceType === NotificationGroups.INCIDENTS\n    ); // Always display incidents\n\n    if (\n      NotificationsState.dateFilters.FROM_DATE === undefined ||\n      NotificationsState.dateFilters.TO_DATE === undefined\n    )\n      return filterredNotifications;\n\n    return filterredNotifications.filter(\n      x =>\n        differenceInHours(\n          new Date(x.createdAt),\n          NotificationsState.dateFilters.FROM_DATE!\n        ) >= 0 &&\n        differenceInDays(\n          new Date(x.createdAt),\n          NotificationsState.dateFilters.TO_DATE!\n        ) <= 0\n    );\n  }\n\n  displayDateFilters() {\n    this.showDateFilters = !this.showDateFilters;\n  }\n\n  renderGroupedView() {\n    const filteredNotifications = this.applyNotificationFilters();\n\n    return html`<div>\n      <grouped-item\n        groupTitle=${NotificationGroups.PLANNED_MAINTENANCE}\n        iconName=\"lab_profile\"\n        .childItems=${filteredNotifications?.filter(\n          item => item.resourceType === NotificationGroups.PLANNED_MAINTENANCE\n        )}\n      ></grouped-item>\n      <grouped-item\n        groupTitle=${NotificationGroups.INCIDENTS}\n        iconName=\"emergency_home\"\n        .childItems=${filteredNotifications?.filter(\n          item => item.resourceType === NotificationGroups.INCIDENTS\n        )}\n      ></grouped-item>\n      <grouped-item\n        groupTitle=${NotificationGroups.SERVICE_TICKETS}\n        iconName=\"dvr\"\n        .childItems=${filteredNotifications?.filter(\n          item => item.resourceType === NotificationGroups.SERVICE_TICKETS\n        )}\n      ></grouped-item>\n      <grouped-item\n        groupTitle=${NotificationGroups.DCIM_ALERTS}\n        iconName=\"public\"\n        .childItems=${filteredNotifications?.filter(\n          item => item.resourceType === NotificationGroups.DCIM_ALERTS\n        )}\n      ></grouped-item>\n    </div>`;\n  }\n\n  renderDefaultView() {\n    const filterNotification = this.applyNotificationFilters();\n    const filterTodayItems = filterNotification.filter(\n      x => differenceInDays(x.createdAt, new Date()) === 0\n    );\n    const filterEarlierItems = filterNotification.filter(\n      x => differenceInDays(x.createdAt, new Date()) !== 0\n    );\n\n    if (filterNotification?.length! > 0) {\n      return html` <div class=\"grow text-sm font-bold py-4 pl-2 align-top\">\n          Latest\n        </div>\n        <div class=\"m-0 p-0\">\n          ${filterTodayItems.length > 0\n            ? filterTodayItems?.map(\n                item => html`<notification-item\n                  .notificaiton=${item}\n                  ?disabled=${item.resourceType ===\n                  NotificationGroups.INCIDENTS}\n                >\n                </notification-item> `\n              )\n            : this.renderNoResult()}\n        </div>\n        <div class=\"grow text-sm font-bold py-4 pl-2 align-top\">Earlier</div>\n        <div>\n          ${filterEarlierItems.length > 0\n            ? filterEarlierItems?.map(\n                item => html`<notification-item\n                  .notificaiton=${item}\n                  ?disabled=${item.resourceType ===\n                  NotificationGroups.INCIDENTS}\n                >\n                </notification-item> `\n              )\n            : this.renderNoResult()}\n        </div>`;\n    }\n\n    return html`<p class=\"m-0 pl-4 font-bold mr-4\">\n      <small style=\"padding-left: 16px\">No notifications yet.</small>\n    </p>`;\n  }\n\n  /* eslint-disable-next-line */\n  renderNoResult() {\n    return html`<p class=\"m-0 pl-4 font-bold mr-4\">\n      <small style=\"padding-left: 16px\">No notifications yet.</small>\n    </p>`;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  handleCloseClick(_e: CustomEvent<FilterDialogEventDetail>) {\n    this.showDateFilters = false;\n    this.showFilters = false;\n  }\n\n  render() {\n    return html`\n      <div class=\"relative\">\n        <ix-icon-button\n          icon=\"circle_notifications\"\n          class=\"blue-icon\"\n          @click=${() => this.toggleDrawer()}\n        >\n        </ix-icon-button>\n        ${this.renderUnReadCountText()}\n      </div>\n      <confirmation-dialog\n        ?open=${this.showMarkAllReadConfirmation}\n        @confirm-dialog-closed=${() => {\n          this.showMarkAllReadConfirmation = false;\n        }}\n        @on-confirm-selection=${this.confirmedMarkAllRead}\n        textMessage=\"Are you sure you want to mark all notifications as read?\"\n      >\n      </confirmation-dialog>\n      <ix-drawer\n        ?isVisible=${this.showDrawer}\n        .onClosed=${() => this.toggleDrawer()}\n        animate-vertical\n        hide-close\n      >\n        <div class=\"flex flex-row justify-between grow py-2\" slot=\"header\">\n          <div class=\"grow text-xl items-center  font-bold py-4 pl-2 align-top\">\n            Notifications\n          </div>\n          <div class=\"flex flex-row justify-end grow items-center \">\n            <ix-icon-button\n              @click=${this.markAllread}\n              icon=\"fact_check\"\n              class=\"blue-icon\"\n            ></ix-icon-button>\n            <ix-icon-button\n              @click=${this.toggleGroupView}\n              icon=\"sort\"\n              class=\"blue-icon\"\n            ></ix-icon-button>\n            <ix-icon-button\n              @click=${this.displayFilters}\n              icon=\"menu\"\n              class=\"blue-icon\"\n            ></ix-icon-button>\n            <div\n              class=\"filter-dropdown-content  ${this.showFilters\n                ? 'active z-50'\n                : ''}\"\n            >\n              <group-filters></group-filters>\n            </div>\n            <ix-icon-button\n              @click=${this.displayDateFilters}\n              icon=\"calendar_month\"\n              class=\"blue-icon\"\n            ></ix-icon-button>\n            <div\n              class=\"datefilter-dropdown-content  ${this.showDateFilters\n                ? 'active z-50'\n                : ''}\"\n              @on-selection=${this.handleCloseClick}\n            >\n              <date-filters></date-filters>\n            </div>\n          </div>\n        </div>\n        <div slot=\"content\">\n          ${this.showGroupedView\n            ? this.renderGroupedView()\n            : this.renderDefaultView()}\n        </div>\n      </ix-drawer>\n    `;\n  }\n}\n"]}