@digital-realty/ix-notifications 1.0.21 → 1.0.22

package/dist/IxNotifications.js

@@ -3,6 +3,7 @@ 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';
@@ -16,6 +17,7 @@ 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 { handleMouseOver, handleMouseOut, } from './components/notifications/notification-tooltip.js';
 export class IxNotifications extends MobxLitElement {
     constructor() {
         super(...arguments);
@@ -43,7 +45,8 @@ export class IxNotifications extends MobxLitElement {
         window.removeEventListener('beforeunload', this.handleOnbeforeunload);
         super.disconnectedCallback();
     }
-    //Handle browser refresh event
+    // Handle browser refresh event
+    // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars
     handleOnbeforeunload(event) {
         NotificationsState.clearStoredNotificationsData();
     }
@@ -73,7 +76,9 @@ export class IxNotifications extends MobxLitElement {
     </div>`;
     }
     markAllread() {
-        this.showMarkAllReadConfirmation = true;
+        if (NotificationsState.unreadNotificationCount > 0) {
+            this.showMarkAllReadConfirmation = true;
+        }
     }
     confirmedMarkAllRead(e) {
         // Mark All read if Confirmed True
@@ -88,8 +93,13 @@ export class IxNotifications extends MobxLitElement {
                             allResultSuccesful = result;
                     });
                 });
-                const apiResult = { State: allResultSuccesful === true ? ApiCallState.SUCCESS : ApiCallState.ERROR,
-                    Message: allResultSuccesful === true ? "Successfully marked all the notifications as read" : "Error occurred while marking the notifications as read, Please try again"
+                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();
@@ -98,20 +108,26 @@ export class IxNotifications extends MobxLitElement {
         }
         this.showMarkAllReadConfirmation = false;
     }
+    // eslint-disable-next-line class-methods-use-this
     showResultMessage(result, id) {
-        window.dispatchEvent(new CustomEvent("add-toast", { detail: {
+        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>`,
+                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;
@@ -122,24 +138,29 @@ export class IxNotifications extends MobxLitElement {
     /* 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 &&
+        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) ||
-            (x.resourceType === NotificationGroups.SERVICE_TICKETS &&
+            (notification.resourceType === NotificationGroups.SERVICE_TICKETS &&
                 NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS ===
                     true) ||
-            (x.resourceType === NotificationGroups.DCIM_ALERTS &&
+            (notification.resourceType === NotificationGroups.DCIM_ALERTS &&
                 NotificationsState.notificationFilters.SHOW_DCIM_ALERTS === true) ||
-            x.resourceType === NotificationGroups.INCIDENTS); // Always display incidents
-        if (NotificationsState.dateFilters.FROM_DATE === undefined &&
+            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 filterredNotifications;
-        if (NotificationsState.dateFilters.FROM_DATE === undefined)
-            return filterredNotifications.filter(x => differenceInDays(new Date(x.createdAt), NotificationsState.dateFilters.TO_DATE) <= 0);
-        if (NotificationsState.dateFilters.TO_DATE === undefined)
-            return filterredNotifications.filter(x => differenceInHours(new Date(x.createdAt), NotificationsState.dateFilters.FROM_DATE) >= 0);
-        return filterredNotifications.filter(x => differenceInHours(new Date(x.createdAt), NotificationsState.dateFilters.FROM_DATE) >= 0 &&
-            differenceInDays(new Date(x.createdAt), NotificationsState.dateFilters.TO_DATE) <= 0);
+            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;
@@ -148,37 +169,37 @@ export class IxNotifications extends MobxLitElement {
         const filteredNotifications = this.applyNotificationFilters();
         return html `<div style="margin:0px">
       <grouped-item
-        groupTitle=${NotificationGroups.PLANNED_MAINTENANCE}
-        iconName="lab_profile"
+        groupTitle="Planned Site Maintenance"
+        groupIcon="${plannedMaintenance.strings[0]}"
         .childItems=${filteredNotifications === null || filteredNotifications === void 0 ? void 0 : filteredNotifications.filter(item => item.resourceType === NotificationGroups.PLANNED_MAINTENANCE)}
       ></grouped-item>
       <grouped-item
-        groupTitle=${NotificationGroups.INCIDENTS}
-        iconName="emergency_home"
+        groupTitle="Emergency Repairs"
+        groupIcon="report"
         .childItems=${filteredNotifications === null || filteredNotifications === void 0 ? void 0 : filteredNotifications.filter(item => item.resourceType === NotificationGroups.INCIDENTS)}
       ></grouped-item>
       <grouped-item
-        groupTitle=${NotificationGroups.SERVICE_TICKETS}
-        iconName="dvr"
+        groupTitle="Service Ticket Updates"
+        groupIcon="sync_saved_locally"
         .childItems=${filteredNotifications === null || filteredNotifications === void 0 ? void 0 : filteredNotifications.filter(item => item.resourceType === NotificationGroups.SERVICE_TICKETS)}
       ></grouped-item>
       <grouped-item
         groupTitle=${NotificationGroups.DCIM_ALERTS}
-        iconName="public"
+        groupIcon="${dcim.strings[0]}"
         .childItems=${filteredNotifications === null || filteredNotifications === void 0 ? void 0 : filteredNotifications.filter(item => item.resourceType === NotificationGroups.DCIM_ALERTS)}
-      ></grouped-item>      
+      ></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);
+        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">Latest</h3>
+            return html ` <h3 class="grow">Today</h3>
         <div class="m-0 p-0">
           ${filterTodayItems.length > 0
                 ? filterTodayItems === null || filterTodayItems === void 0 ? void 0 : filterTodayItems.map(item => html `<notification-item
-                  .notificaiton=${item}
+                  .notification=${item}
                   ?disabled=${item.resourceType ===
                     NotificationGroups.INCIDENTS}
                 >
@@ -189,7 +210,7 @@ export class IxNotifications extends MobxLitElement {
         <div>
           ${filterEarlierItems.length > 0
                 ? filterEarlierItems === null || filterEarlierItems === void 0 ? void 0 : filterEarlierItems.map(item => html `<notification-item
-                  .notificaiton=${item}
+                  .notification=${item}
                   ?disabled=${item.resourceType ===
                     NotificationGroups.INCIDENTS}
                 >
@@ -197,11 +218,11 @@ export class IxNotifications extends MobxLitElement {
                 : this.renderNoResult()}
         </div>`;
         }
-        return html `<p class="empty">No notifications yet.</p>`;
+        return html `<p class="empty"><strong>No notifications yet.</strong></p>`;
     }
     /* eslint-disable-next-line */
     renderNoResult() {
-        return html `<p class="empty">No notifications yet.</p>`;
+        return html `<p class="empty"><strong>No notifications yet.</strong></p>`;
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     handleCloseClick(_e) {
@@ -231,8 +252,9 @@ export class IxNotifications extends MobxLitElement {
     }
     render() {
         return html `
+      <notification-tooltip></notification-tooltip>
       <div class="relative">
-        <ix-icon-button class="blue-icon" @click=${() => this.toggleDrawer()}>
+        <ix-icon-button class="active-icon" @click=${() => this.toggleDrawer()}>
           <slot name="icon" slot="default"></slot>
         </ix-icon-button>
         ${this.renderUnReadCountText()}
@@ -259,20 +281,36 @@ export class IxNotifications extends MobxLitElement {
           <div class="flex flex-row justify-end grow items-center options">
             <ix-icon-button
               @click=${this.markAllread}
+              @mouseover=${(e) => handleMouseOver(e, 'Mark All Read')}
+              @mouseout=${handleMouseOut}
               icon="markunread_mailbox"
-              class="blue-icon"
+              class="${NotificationsState.unreadNotificationCount <= 0
+            ? 'inactive-icon'
+            : 'active-icon'}"
+              .disabled="${NotificationsState.unreadNotificationCount <= 0}"
+              filledIcon="true"
             ></ix-icon-button>
             <ix-icon-button
               @click=${this.toggleGroupView}
-              icon="sort"
-              class="blue-icon"
-            ></ix-icon-button>
+              @mouseover=${(e) => handleMouseOver(e, 'Sort by Type')}
+              @mouseout=${handleMouseOut}
+              class="active-icon"
+              label="Sort by Type"
+            >
+              <ix-icon slot="default"
+                >${this.showGroupedView ? sortCheck : 'sort'}</ix-icon
+              >
+            </ix-icon-button>
             <ix-icon-button
               @click=${this.displayFilters}
-              icon="list"
-              class="blue-icon"
+              @mouseover=${(e) => handleMouseOver(e, 'Filter by Type')}
+              @mouseout=${handleMouseOut}
+              class="active-icon"
               id="group-filter-button"
-            ></ix-icon-button>
+              label="Filter by Type"
+            >
+              <ix-icon slot="default"> ${viewList} </ix-icon>
+            </ix-icon-button>
             <div
               class="filter-dropdown-content  ${this.showFilters
             ? 'active z-50'
@@ -282,9 +320,13 @@ export class IxNotifications extends MobxLitElement {
             </div>
             <ix-icon-button
               @click=${this.displayDateFilters}
-              icon="calendar_month"
-              class="blue-icon"
+              @mouseover=${(e) => handleMouseOver(e, 'Filter by Date')}
+              @mouseout=${handleMouseOut}
+              icon="date_range"
+              class="active-icon"
+              filledIcon="true"
               id="date-filters-button"
+              label="Filter by Date"
             ></ix-icon-button>
             <div
               class="datefilter-dropdown-content ${this.showDateFilters
@@ -300,7 +342,7 @@ export class IxNotifications extends MobxLitElement {
           ${this.showGroupedView
             ? this.renderGroupedView()
             : this.renderDefaultView()}
-        </div>        
+        </div>
       </ix-drawer>
     `;
     }

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, query, 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 { ApiCallResult, Notification } from './models/notification.js';\nimport {\n  ConfirmationDialogEventDetail,\n  FilterDialogEventDetail,\n} from './constants/notification-types.js';\nimport {\n  ApiCallState,\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  @query('group-filters') groupFilters!: HTMLElement;\n\n  @query('ix-icon-button#group-filter-button') groupFiltersButton!: HTMLElement;\n\n  @query('date-filters') dateFilters!: HTMLElement;\n\n  @query('ix-icon-button#date-filters-button') dateFiltersButton!: HTMLElement;\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  @property({ type: String }) localStorageKey = '';\n\n  async firstUpdated() {       \n    // Construct ApiClient form baseApiUrl and localStorageKey\n    NotificationsState.baseApiUrl = this.baseApiUrl;\n    NotificationsState.localStorageKey = this.localStorageKey;\n    NotificationsState.ConstructApiClient();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener(\n      'account-switched',\n      NotificationsState.NewApiClient\n    );\n    window.addEventListener('beforeunload', this.handleOnbeforeunload);\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener(\n      'account-switched',\n      NotificationsState.NewApiClient\n    );\n    window.removeEventListener('beforeunload', this.handleOnbeforeunload);\n    super.disconnectedCallback();\n  }\n\n  //Handle browser refresh event\n  handleOnbeforeunload(event : any){    \n    NotificationsState.clearStoredNotificationsData();\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=\"unread rounded-full text-center text-white text-sm absolute icon-position -start-0\"\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      const unreadItems = filterNotification?.filter(item => item.status === NotificationStatus.UNREAD);\n\n      if(unreadItems.length > 0) {\n        let allResultSuccesful = true;\n\n        filterNotification?.forEach(item => {\n            NotificationsState.setNotificationReadStatus(item.id).then((result : any) => \n            { \n              if(allResultSuccesful)\n                allResultSuccesful = result;\n            });\n        });\n\n        const apiResult = { State : allResultSuccesful === true? ApiCallState.SUCCESS : ApiCallState.ERROR,\n          Message : allResultSuccesful === true? \"Successfully marked all the notifications as read\" : \"Error occurred while marking the notifications as read, Please try again\"\n        } as ApiCallResult;\n\n        this.showResultMessage(apiResult,unreadItems[0].id);\n\n        this.renderUnReadCountText();\n\n        this.requestUpdate();\n      }\n    }\n\n    this.showMarkAllReadConfirmation = false;\n  }\n\n  private showResultMessage(result: ApiCallResult, id: string )\n  {    \n    window.dispatchEvent(\n      new CustomEvent(\"add-toast\", { detail: {\n                id,\n                content: html`\n                  <ix-message-toast toastId=${id} .TMessageToast=${result.State.toLowerCase()} forceClose>                      \n                      ${result.Message}\n                  </ix-message-toast>`,\n                autoClose: 3000,\n                durationOut: 3000,\n                vertical: 'bottom',\n                horizontal: 'center',\n                animated: true,                \n                above: false,\n            } })\n    );\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    if ( NotificationsState.dateFilters.FROM_DATE === undefined)\n      return filterredNotifications.filter(\n        x => differenceInDays(\n            new Date(x.createdAt),\n            NotificationsState.dateFilters.TO_DATE!\n          ) <= 0\n      );\n    \n    if ( NotificationsState.dateFilters.TO_DATE === undefined)\n        return filterredNotifications.filter(\n          x =>\n            differenceInHours(\n              new Date(x.createdAt),\n              NotificationsState.dateFilters.FROM_DATE!\n            ) >= 0);  \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 style=\"margin:0px\">\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` <h3 class=\"grow\">Latest</h3>\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        <h3 class=\"grow\">Earlier</h3>\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=\"empty\">No notifications yet.</p>`;\n  }\n\n  /* eslint-disable-next-line */\n  renderNoResult() {\n    return html`<p class=\"empty\">No notifications yet.</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  // eslint-disable-next-line\n  handleContentScroll(e: CustomEvent) {\n    // when scrollbar at the end, retrieve next page\n    if (\n      e !== null &&\n      e.detail.scrollTop + e.detail.clientHeight >= e.detail.scrollHeight\n    ) {\n      NotificationsState.getNotifications();\n    }\n  }\n\n  manageFilterVisibility(e: Event) {\n    const path = e.composedPath();\n    if (\n      this.showFilters &&\n      !path.includes(this.groupFilters) &&\n      !path.includes(this.groupFiltersButton)\n    ) {\n      this.showFilters = false;\n    }\n    if (\n      this.showDateFilters &&\n      !path.includes(this.dateFilters) &&\n      !path.includes(this.dateFiltersButton)\n    ) {\n      this.showDateFilters = false;\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"relative\">\n        <ix-icon-button class=\"blue-icon\" @click=${() => this.toggleDrawer()}>\n          <slot name=\"icon\" slot=\"default\"></slot>\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        @on-content-scroll=${this.handleContentScroll}\n        @click=${this.manageFilterVisibility}\n      >\n        <div class=\"flex flex-row justify-between grow py-2\" slot=\"header\">\n          <h2 class=\"grow items-center notification-header\">Notifications</h2>\n          <div class=\"flex flex-row justify-end grow items-center options\">\n            <ix-icon-button\n              @click=${this.markAllread}\n              icon=\"markunread_mailbox\"\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=\"list\"\n              class=\"blue-icon\"\n              id=\"group-filter-button\"\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              id=\"date-filters-button\"\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":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC/D,OAAO,EACL,kBAAkB,EAClB,QAAQ,EACR,IAAI,EACJ,SAAS,GACV,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,wCAAwC,CAAC;AAChD,OAAO,wCAAwC,CAAC;AAChD,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAMlE,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,8BAA8B,CAAC;AACtC,OAAO,iDAAiD,CAAC;AACzD,OAAO,4CAA4C,CAAC;AACpD,OAAO,6CAA6C,CAAC;AACrD,OAAO,4CAA4C,CAAC;AACpD,OAAO,mDAAmD,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EACL,eAAe,EACf,cAAc,GACf,MAAM,oDAAoD,CAAC;AAE5D,MAAM,OAAO,eAAgB,SAAQ,cAAc;IAAnD;;QAWmB,eAAU,GAAG,KAAK,CAAC;QAEnB,oBAAe,GAAG,KAAK,CAAC;QAExB,gBAAW,GAAG,KAAK,CAAC;QAEpB,oBAAe,GAAG,KAAK,CAAC;QAExB,gCAA2B,GAAG,KAAK,CAAC;QAEzB,eAAU,GAAG,EAAE,CAAC;QAEhB,oBAAe,GAAG,EAAE,CAAC;IAkanD,CAAC;IAhaC,KAAK,CAAC,YAAY;QAChB,0DAA0D;QAC1D,kBAAkB,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QAChD,kBAAkB,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;QAC1D,kBAAkB,CAAC,kBAAkB,EAAE,CAAC;IAC1C,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,MAAM,CAAC,gBAAgB,CACrB,kBAAkB,EAClB,kBAAkB,CAAC,YAAY,CAChC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IACrE,CAAC;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CACxB,kBAAkB,EAClB,kBAAkB,CAAC,YAAY,CAChC,CAAC;QACF,MAAM,CAAC,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACtE,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAED,+BAA+B;IAC/B,qFAAqF;IACrF,oBAAoB,CAAC,KAAU;QAC7B,kBAAkB,CAAC,4BAA4B,EAAE,CAAC;IACpD,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;QACnC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YACzB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;SAC9B;IACH,CAAC;IAED,8BAA8B;IAC9B,qBAAqB;QACnB,IAAI,kBAAkB,CAAC,uBAAuB,IAAI,CAAC,EAAE;YACnD,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;SACzB;QAED,IAAI,eAAe,GAAG,EAAE,CAAC;QACzB,IAAI,kBAAkB,CAAC,uBAAuB,GAAG,EAAE,EAAE;YACnD,eAAe,GAAG,KAAK,CAAC;SACzB;aAAM;YACL,eAAe,GAAG,kBAAkB,CAAC,uBAAuB,CAAC,QAAQ,EAAE,CAAC;SACzE;QAED,OAAO,IAAI,CAAA;;;QAGP,eAAe;WACZ,CAAC;IACV,CAAC;IAED,WAAW;QACT,IAAI,kBAAkB,CAAC,uBAAuB,GAAG,CAAC,EAAE;YAClD,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;SACzC;IACH,CAAC;IAEO,oBAAoB,CAAC,CAA6C;QACxE,kCAAkC;QAClC,IAAI,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE;YACxB,MAAM,kBAAkB,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAC3D,MAAM,WAAW,GAAG,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,MAAM,CAC5C,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,KAAK,kBAAkB,CAAC,MAAM,CAClD,CAAC;YAEF,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC1B,IAAI,kBAAkB,GAAG,IAAI,CAAC;gBAE9B,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,OAAO,CAAC,IAAI,CAAC,EAAE;oBACjC,kBAAkB,CAAC,yBAAyB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CACxD,CAAC,MAAW,EAAE,EAAE;wBACd,IAAI,kBAAkB;4BAAE,kBAAkB,GAAG,MAAM,CAAC;oBACtD,CAAC,CACF,CAAC;gBACJ,CAAC,CAAC,CAAC;gBAEH,MAAM,SAAS,GAAG;oBAChB,KAAK,EACH,kBAAkB,KAAK,IAAI;wBACzB,CAAC,CAAC,YAAY,CAAC,OAAO;wBACtB,CAAC,CAAC,YAAY,CAAC,KAAK;oBACxB,OAAO,EACL,kBAAkB,KAAK,IAAI;wBACzB,CAAC,CAAC,kDAAkD;wBACpD,CAAC,CAAC,8DAA8D;iBACpD,CAAC;gBAEnB,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;gBAErD,IAAI,CAAC,qBAAqB,EAAE,CAAC;gBAE7B,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;SACF;QAED,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;IAC3C,CAAC;IAED,kDAAkD;IAC1C,iBAAiB,CAAC,MAAqB,EAAE,EAAU;QACzD,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,WAAW,EAAE;YAC3B,MAAM,EAAE;gBACN,EAAE;gBACF,OAAO,EAAE,IAAI,CAAA;sBACD,EAAE;6BACK,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE;;;cAGzC,MAAM,CAAC,OAAO;8BACE;gBACpB,SAAS,EAAE,IAAI;gBACf,WAAW,EAAE,IAAI;gBACjB,QAAQ,EAAE,QAAQ;gBAClB,UAAU,EAAE,QAAQ;gBACpB,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,KAAK;aACb;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,eAAe;QACb,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;IAC/C,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;IACvC,CAAC;IAED,8BAA8B;IAC9B,wBAAwB;;QACtB,MAAM,qBAAqB,GAAG,MAAA,kBAAkB,CAAC,aAAa,0CAAE,MAAM,CACpE,CAAC,YAA0B,EAAE,EAAE,CAC7B,CAAC,YAAY,CAAC,YAAY,KAAK,kBAAkB,CAAC,mBAAmB;YACnE,kBAAkB,CAAC,mBAAmB,CAAC,wBAAwB;gBAC7D,IAAI,CAAC;YACT,CAAC,YAAY,CAAC,YAAY,KAAK,kBAAkB,CAAC,eAAe;gBAC/D,kBAAkB,CAAC,mBAAmB,CAAC,oBAAoB;oBACzD,IAAI,CAAC;YACT,CAAC,YAAY,CAAC,YAAY,KAAK,kBAAkB,CAAC,WAAW;gBAC3D,kBAAkB,CAAC,mBAAmB,CAAC,gBAAgB,KAAK,IAAI,CAAC;YACnE,YAAY,CAAC,YAAY,KAAK,kBAAkB,CAAC,SAAS,CAC7D,CAAC,CAAC,2BAA2B;QAE9B,mDAAmD;QACnD,IACE,kBAAkB,CAAC,WAAW,CAAC,SAAS,KAAK,SAAS;YACtD,kBAAkB,CAAC,WAAW,CAAC,OAAO,KAAK,SAAS;YAEpD,OAAO,qBAAqB,CAAC,MAAM,CACjC,YAAY,CAAC,EAAE,CACb,iBAAiB,CACf,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAChC,kBAAkB,CAAC,WAAW,CAAC,SAAU,CAC1C,IAAI,CAAC;gBACN,gBAAgB,CACd,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAChC,kBAAkB,CAAC,WAAW,CAAC,OAAQ,CACxC,IAAI,CAAC,CACT,CAAC;QAEJ,mFAAmF;QACnF,IACE,kBAAkB,CAAC,WAAW,CAAC,SAAS,KAAK,SAAS;YACtD,kBAAkB,CAAC,WAAW,CAAC,OAAO,KAAK,SAAS;YAEpD,OAAO,qBAAqB,CAAC,MAAM,CACjC,YAAY,CAAC,EAAE,CACb,iBAAiB,CACf,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAChC,kBAAkB,CAAC,WAAW,CAAC,SAAU,CAC1C,IAAI,CAAC,CACT,CAAC;QAEJ,kFAAkF;QAClF,IACE,kBAAkB,CAAC,WAAW,CAAC,SAAS,KAAK,SAAS;YACtD,kBAAkB,CAAC,WAAW,CAAC,OAAO,KAAK,SAAS;YAEpD,OAAO,qBAAqB,CAAC,MAAM,CACjC,YAAY,CAAC,EAAE,CACb,gBAAgB,CACd,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAChC,kBAAkB,CAAC,WAAW,CAAC,OAAQ,CACxC,IAAI,CAAC,CACT,CAAC;QAEJ,OAAO,qBAAqB,CAAC;IAC/B,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;IAC/C,CAAC;IAED,iBAAiB;QACf,MAAM,qBAAqB,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAC9D,OAAO,IAAI,CAAA;;;qBAGM,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC;sBAC5B,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,MAAM,CACzC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,KAAK,kBAAkB,CAAC,mBAAmB,CACrE;;;;;sBAKa,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,MAAM,CACzC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,KAAK,kBAAkB,CAAC,SAAS,CAC3D;;;;;sBAKa,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,MAAM,CACzC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,KAAK,kBAAkB,CAAC,eAAe,CACjE;;;qBAGY,kBAAkB,CAAC,WAAW;qBAC9B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;sBACd,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,MAAM,CACzC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,KAAK,kBAAkB,CAAC,WAAW,CAC7D;;WAEE,CAAC;IACV,CAAC;IAED,iBAAiB;QACf,MAAM,kBAAkB,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAE3D,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,MAAM,CAChD,YAAY,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,KAAK,CAAC,CAC3E,CAAC;QAEF,MAAM,kBAAkB,GAAG,kBAAkB,CAAC,MAAM,CAClD,YAAY,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,KAAK,CAAC,CAC3E,CAAC;QAEF,IAAI,CAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,MAAO,IAAG,CAAC,EAAE;YACnC,OAAO,IAAI,CAAA;;YAEL,gBAAgB,CAAC,MAAM,GAAG,CAAC;gBAC3B,CAAC,CAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,GAAG,CACnB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;kCACM,IAAI;8BACR,IAAI,CAAC,YAAY;oBAC7B,kBAAkB,CAAC,SAAS;;sCAER,CACvB;gBACH,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE;;;;YAIvB,kBAAkB,CAAC,MAAM,GAAG,CAAC;gBAC7B,CAAC,CAAC,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,GAAG,CACrB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;kCACM,IAAI;8BACR,IAAI,CAAC,YAAY;oBAC7B,kBAAkB,CAAC,SAAS;;sCAER,CACvB;gBACH,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE;eACpB,CAAC;SACX;QAED,OAAO,IAAI,CAAA,6DAA6D,CAAC;IAC3E,CAAC;IAED,8BAA8B;IAC9B,cAAc;QACZ,OAAO,IAAI,CAAA,6DAA6D,CAAC;IAC3E,CAAC;IAED,6DAA6D;IAC7D,gBAAgB,CAAC,EAAwC;QACvD,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,2BAA2B;IAC3B,mBAAmB,CAAC,CAAc;QAChC,gDAAgD;QAChD,IACE,CAAC,KAAK,IAAI;YACV,CAAC,CAAC,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,YAAY,IAAI,CAAC,CAAC,MAAM,CAAC,YAAY,EACnE;YACA,kBAAkB,CAAC,gBAAgB,EAAE,CAAC;SACvC;IACH,CAAC;IAED,sBAAsB,CAAC,CAAQ;QAC7B,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC;QAC9B,IACE,IAAI,CAAC,WAAW;YAChB,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC;YACjC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,kBAAkB,CAAC,EACvC;YACA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;SAC1B;QACD,IACE,IAAI,CAAC,eAAe;YACpB,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;YAChC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC,EACtC;YACA,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;SAC9B;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;qDAGsC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;;;UAGpE,IAAI,CAAC,qBAAqB,EAAE;;;gBAGtB,IAAI,CAAC,2BAA2B;iCACf,GAAG,EAAE;YAC5B,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;QAC3C,CAAC;gCACuB,IAAI,CAAC,oBAAoB;;;;;qBAKpC,IAAI,CAAC,UAAU;oBAChB,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;;;6BAGhB,IAAI,CAAC,mBAAmB;iBACpC,IAAI,CAAC,sBAAsB;;;;;;uBAMrB,IAAI,CAAC,WAAW;2BACZ,CAAC,CAAM,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,EAAE,eAAe,CAAC;0BAChD,cAAc;;uBAEjB,kBAAkB,CAAC,uBAAuB,IAAI,CAAC;YACtD,CAAC,CAAC,eAAe;YACjB,CAAC,CAAC,aAAa;2BACJ,kBAAkB,CAAC,uBAAuB,IAAI,CAAC;;;;uBAInD,IAAI,CAAC,eAAe;2BAChB,CAAC,CAAM,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,EAAE,cAAc,CAAC;0BAC/C,cAAc;;;;;mBAKrB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;;;;uBAIrC,IAAI,CAAC,cAAc;2BACf,CAAC,CAAM,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,EAAE,gBAAgB,CAAC;0BACjD,cAAc;;;;;yCAKC,QAAQ;;;gDAGD,IAAI,CAAC,WAAW;YAChD,CAAC,CAAC,aAAa;YACf,CAAC,CAAC,EAAE;;;;;uBAKG,IAAI,CAAC,kBAAkB;2BACnB,CAAC,CAAM,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,EAAE,gBAAgB,CAAC;0BACjD,cAAc;;;;;;;;mDAQW,IAAI,CAAC,eAAe;YACvD,CAAC,CAAC,aAAa;YACf,CAAC,CAAC,EAAE;8BACU,IAAI,CAAC,gBAAgB;;;;;;;YAOvC,IAAI,CAAC,eAAe;YACpB,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC1B,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE;;;KAGjC,CAAC;IACJ,CAAC;;AAvbM,sBAAM,GAAG,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;AAEvB;IAAvB,KAAK,CAAC,eAAe,CAAC;qDAA4B;AAEN;IAA5C,KAAK,CAAC,oCAAoC,CAAC;2DAAkC;AAEvD;IAAtB,KAAK,CAAC,cAAc,CAAC;oDAA2B;AAEJ;IAA5C,KAAK,CAAC,oCAAoC,CAAC;0DAAiC;AAEpE;IAAR,KAAK,EAAE;mDAA4B;AAE3B;IAAR,KAAK,EAAE;wDAAiC;AAEhC;IAAR,KAAK,EAAE;oDAA6B;AAE5B;IAAR,KAAK,EAAE;wDAAiC;AAEhC;IAAR,KAAK,EAAE;oEAA6C;AAEzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAiB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAsB","sourcesContent":["import { html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { differenceInDays, differenceInHours } from 'date-fns';\nimport {\n  plannedMaintenance,\n  viewList,\n  dcim,\n  sortCheck,\n} from './assets/iconset.js';\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 { ApiCallResult, Notification } from './models/notification.js';\nimport {\n  ConfirmationDialogEventDetail,\n  FilterDialogEventDetail,\n} from './constants/notification-types.js';\nimport {\n  ApiCallState,\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';\nimport {\n  handleMouseOver,\n  handleMouseOut,\n} from './components/notifications/notification-tooltip.js';\n\nexport class IxNotifications extends MobxLitElement {\n  static styles = [TWStyles, NotificationsStyle];\n\n  @query('group-filters') groupFilters!: HTMLElement;\n\n  @query('ix-icon-button#group-filter-button') groupFiltersButton!: HTMLElement;\n\n  @query('date-filters') dateFilters!: HTMLElement;\n\n  @query('ix-icon-button#date-filters-button') dateFiltersButton!: HTMLElement;\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  @property({ type: String }) localStorageKey = '';\n\n  async firstUpdated() {\n    // Construct ApiClient form baseApiUrl and localStorageKey\n    NotificationsState.baseApiUrl = this.baseApiUrl;\n    NotificationsState.localStorageKey = this.localStorageKey;\n    NotificationsState.ConstructApiClient();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener(\n      'account-switched',\n      NotificationsState.NewApiClient\n    );\n    window.addEventListener('beforeunload', this.handleOnbeforeunload);\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener(\n      'account-switched',\n      NotificationsState.NewApiClient\n    );\n    window.removeEventListener('beforeunload', this.handleOnbeforeunload);\n    super.disconnectedCallback();\n  }\n\n  // Handle browser refresh event\n  // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars\n  handleOnbeforeunload(event: any) {\n    NotificationsState.clearStoredNotificationsData();\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=\"unread rounded-full text-center text-white text-sm absolute icon-position -start-0\"\n    >\n      ${unreadCountText}\n    </div>`;\n  }\n\n  markAllread() {\n    if (NotificationsState.unreadNotificationCount > 0) {\n      this.showMarkAllReadConfirmation = true;\n    }\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      const unreadItems = filterNotification?.filter(\n        item => item.status === NotificationStatus.UNREAD\n      );\n\n      if (unreadItems.length > 0) {\n        let allResultSuccesful = true;\n\n        filterNotification?.forEach(item => {\n          NotificationsState.setNotificationReadStatus(item.id).then(\n            (result: any) => {\n              if (allResultSuccesful) allResultSuccesful = result;\n            }\n          );\n        });\n\n        const apiResult = {\n          State:\n            allResultSuccesful === true\n              ? ApiCallState.SUCCESS\n              : ApiCallState.ERROR,\n          Message:\n            allResultSuccesful === true\n              ? 'Successfully marked all the notificaions as read'\n              : 'Error while marking the notifications read, Please try again',\n        } as ApiCallResult;\n\n        this.showResultMessage(apiResult, unreadItems[0].id);\n\n        this.renderUnReadCountText();\n\n        this.requestUpdate();\n      }\n    }\n\n    this.showMarkAllReadConfirmation = false;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  private showResultMessage(result: ApiCallResult, id: string) {\n    window.dispatchEvent(\n      new CustomEvent('add-toast', {\n        detail: {\n          id,\n          content: html` <ix-message-toast\n            toastId=${id}\n            .TMessageToast=${result.State.toLowerCase()}\n            forceClose\n          >\n            ${result.Message}\n          </ix-message-toast>`,\n          autoClose: 3000,\n          durationOut: 3000,\n          vertical: 'bottom',\n          horizontal: 'center',\n          animated: true,\n          above: false,\n        },\n      })\n    );\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 filteredNotifications = NotificationsState.notifications?.filter(\n      (notification: Notification) =>\n        (notification.resourceType === NotificationGroups.PLANNED_MAINTENANCE &&\n          NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE ===\n            true) ||\n        (notification.resourceType === NotificationGroups.SERVICE_TICKETS &&\n          NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS ===\n            true) ||\n        (notification.resourceType === NotificationGroups.DCIM_ALERTS &&\n          NotificationsState.notificationFilters.SHOW_DCIM_ALERTS === true) ||\n        notification.resourceType === NotificationGroups.INCIDENTS\n    ); // Always display incidents\n\n    // both dates are defined, search within the window\n    if (\n      NotificationsState.dateFilters.FROM_DATE !== undefined &&\n      NotificationsState.dateFilters.TO_DATE !== undefined\n    )\n      return filteredNotifications.filter(\n        notification =>\n          differenceInHours(\n            new Date(notification.createdAt),\n            NotificationsState.dateFilters.FROM_DATE!\n          ) >= 0 &&\n          differenceInDays(\n            new Date(notification.createdAt),\n            NotificationsState.dateFilters.TO_DATE!\n          ) <= 0\n      );\n\n    // FROM_DATE is defined, TO_DATE is undefined, return notifications after FROM_DATE\n    if (\n      NotificationsState.dateFilters.FROM_DATE !== undefined &&\n      NotificationsState.dateFilters.TO_DATE === undefined\n    )\n      return filteredNotifications.filter(\n        notification =>\n          differenceInHours(\n            new Date(notification.createdAt),\n            NotificationsState.dateFilters.FROM_DATE!\n          ) >= 0\n      );\n\n    // TO_DATE is defined, FROM_DATE is undefined, return notifications before TO_DATE\n    if (\n      NotificationsState.dateFilters.FROM_DATE === undefined &&\n      NotificationsState.dateFilters.TO_DATE !== undefined\n    )\n      return filteredNotifications.filter(\n        notification =>\n          differenceInDays(\n            new Date(notification.createdAt),\n            NotificationsState.dateFilters.TO_DATE!\n          ) <= 0\n      );\n\n    return filteredNotifications;\n  }\n\n  displayDateFilters() {\n    this.showDateFilters = !this.showDateFilters;\n  }\n\n  renderGroupedView() {\n    const filteredNotifications = this.applyNotificationFilters();\n    return html`<div style=\"margin:0px\">\n      <grouped-item\n        groupTitle=\"Planned Site Maintenance\"\n        groupIcon=\"${plannedMaintenance.strings[0]}\"\n        .childItems=${filteredNotifications?.filter(\n          item => item.resourceType === NotificationGroups.PLANNED_MAINTENANCE\n        )}\n      ></grouped-item>\n      <grouped-item\n        groupTitle=\"Emergency Repairs\"\n        groupIcon=\"report\"\n        .childItems=${filteredNotifications?.filter(\n          item => item.resourceType === NotificationGroups.INCIDENTS\n        )}\n      ></grouped-item>\n      <grouped-item\n        groupTitle=\"Service Ticket Updates\"\n        groupIcon=\"sync_saved_locally\"\n        .childItems=${filteredNotifications?.filter(\n          item => item.resourceType === NotificationGroups.SERVICE_TICKETS\n        )}\n      ></grouped-item>\n      <grouped-item\n        groupTitle=${NotificationGroups.DCIM_ALERTS}\n        groupIcon=\"${dcim.strings[0]}\"\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\n    const filterTodayItems = filterNotification.filter(\n      notification => differenceInDays(notification.createdAt, new Date()) === 0\n    );\n\n    const filterEarlierItems = filterNotification.filter(\n      notification => differenceInDays(notification.createdAt, new Date()) !== 0\n    );\n\n    if (filterNotification?.length! > 0) {\n      return html` <h3 class=\"grow\">Today</h3>\n        <div class=\"m-0 p-0\">\n          ${filterTodayItems.length > 0\n            ? filterTodayItems?.map(\n                item => html`<notification-item\n                  .notification=${item}\n                  ?disabled=${item.resourceType ===\n                  NotificationGroups.INCIDENTS}\n                >\n                </notification-item> `\n              )\n            : this.renderNoResult()}\n        </div>\n        <h3 class=\"grow\">Earlier</h3>\n        <div>\n          ${filterEarlierItems.length > 0\n            ? filterEarlierItems?.map(\n                item => html`<notification-item\n                  .notification=${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=\"empty\"><strong>No notifications yet.</strong></p>`;\n  }\n\n  /* eslint-disable-next-line */\n  renderNoResult() {\n    return html`<p class=\"empty\"><strong>No notifications yet.</strong></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  // eslint-disable-next-line\n  handleContentScroll(e: CustomEvent) {\n    // when scrollbar at the end, retrieve next page\n    if (\n      e !== null &&\n      e.detail.scrollTop + e.detail.clientHeight >= e.detail.scrollHeight\n    ) {\n      NotificationsState.getNotifications();\n    }\n  }\n\n  manageFilterVisibility(e: Event) {\n    const path = e.composedPath();\n    if (\n      this.showFilters &&\n      !path.includes(this.groupFilters) &&\n      !path.includes(this.groupFiltersButton)\n    ) {\n      this.showFilters = false;\n    }\n    if (\n      this.showDateFilters &&\n      !path.includes(this.dateFilters) &&\n      !path.includes(this.dateFiltersButton)\n    ) {\n      this.showDateFilters = false;\n    }\n  }\n\n  render() {\n    return html`\n      <notification-tooltip></notification-tooltip>\n      <div class=\"relative\">\n        <ix-icon-button class=\"active-icon\" @click=${() => this.toggleDrawer()}>\n          <slot name=\"icon\" slot=\"default\"></slot>\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        @on-content-scroll=${this.handleContentScroll}\n        @click=${this.manageFilterVisibility}\n      >\n        <div class=\"flex flex-row justify-between grow py-2\" slot=\"header\">\n          <h2 class=\"grow items-center notification-header\">Notifications</h2>\n          <div class=\"flex flex-row justify-end grow items-center options\">\n            <ix-icon-button\n              @click=${this.markAllread}\n              @mouseover=${(e: any) => handleMouseOver(e, 'Mark All Read')}\n              @mouseout=${handleMouseOut}\n              icon=\"markunread_mailbox\"\n              class=\"${NotificationsState.unreadNotificationCount <= 0\n                ? 'inactive-icon'\n                : 'active-icon'}\"\n              .disabled=\"${NotificationsState.unreadNotificationCount <= 0}\"\n              filledIcon=\"true\"\n            ></ix-icon-button>\n            <ix-icon-button\n              @click=${this.toggleGroupView}\n              @mouseover=${(e: any) => handleMouseOver(e, 'Sort by Type')}\n              @mouseout=${handleMouseOut}\n              class=\"active-icon\"\n              label=\"Sort by Type\"\n            >\n              <ix-icon slot=\"default\"\n                >${this.showGroupedView ? sortCheck : 'sort'}</ix-icon\n              >\n            </ix-icon-button>\n            <ix-icon-button\n              @click=${this.displayFilters}\n              @mouseover=${(e: any) => handleMouseOver(e, 'Filter by Type')}\n              @mouseout=${handleMouseOut}\n              class=\"active-icon\"\n              id=\"group-filter-button\"\n              label=\"Filter by Type\"\n            >\n              <ix-icon slot=\"default\"> ${viewList} </ix-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              @mouseover=${(e: any) => handleMouseOver(e, 'Filter by Date')}\n              @mouseout=${handleMouseOut}\n              icon=\"date_range\"\n              class=\"active-icon\"\n              filledIcon=\"true\"\n              id=\"date-filters-button\"\n              label=\"Filter by Date\"\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"]}

package/dist/assets/iconset.d.ts

@@ -0,0 +1,6 @@
+export declare const viewList: import("lit").TemplateResult<2>;
+export declare const dcim: import("lit").TemplateResult<2>;
+export declare const plannedMaintenance: import("lit").TemplateResult<2>;
+export declare const trash: import("lit").TemplateResult<2>;
+export declare const crossConnect: import("lit").TemplateResult<2>;
+export declare const sortCheck: import("lit").TemplateResult<2>;

package/dist/assets/iconset.js

@@ -0,0 +1,8 @@
+import { svg } from 'lit';
+export const viewList = svg `<svg viewBox="0 0 24 24"><path d="M3 9H7V5H3V9ZM7 14H3V10H7V14ZM7 19H3V15H7V19ZM20 14H8V10H20V14ZM8 19H20V15H8V19ZM8 9V5H20V9H8Z"/></svg>`;
+export const dcim = svg `<svg viewBox="0 0 24 24"><path d="M20 0C17.791 0 16 1.791 16 4C16 6.857 20 11 20 11C20 11 24 6.857 24 4C24 1.791 22.209 0 20 0ZM12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 11.93 21.9912 11.862 21.9902 11.793C21.7532 12.059 21.5575 12.2677 21.4395 12.3887L19.6504 14.3047C19.4484 14.9657 19.1695 15.5919 18.8145 16.1699C18.4985 15.4819 17.806 15 17 15H16V13C16 12.447 15.552 12 15 12H9V10H10C10.552 10 11 9.553 11 9V7.02344L13.0156 7.00781C13.5986 7.00381 14.1175 6.74289 14.4805 6.33789C14.3145 5.89389 14.1875 5.445 14.1035 5L9.99219 5.03125C9.44319 5.03525 9 5.48225 9 6.03125V8H8C7.448 8 7 8.447 7 9V10.1855L4.98047 8.16797C6.34047 5.68697 8.977 4 12 4H14C14 3.397 14.0908 2.81658 14.2578 2.26758C13.5308 2.09858 12.777 2 12 2ZM20 2.57031C20.789 2.57031 21.4297 3.211 21.4297 4C21.4297 4.789 20.789 5.42969 20 5.42969C19.211 5.42969 18.5703 4.789 18.5703 4C18.5703 3.211 19.211 2.57031 20 2.57031ZM4.20703 10.2207L9 15.0137V16C9 17.103 9.897 18 11 18V19.9316C7.06 19.4366 4 16.072 4 12C4 11.388 4.07603 10.7947 4.20703 10.2207ZM10.7793 14H14V16C14 16.553 14.448 17 15 17H17V18.2344C15.875 19.1384 14.502 19.7417 13 19.9297V17C13 16.447 12.552 16 12 16H11V14.5996C11 14.3776 10.9123 14.174 10.7793 14Z"/></svg>`;
+export const plannedMaintenance = svg `<svg viewBox="0 0 24 24"><path d="M6 2C4.90575 2 4 2.90575 4 4V20C4 21.0943 4.90575 22 6 22H11V20H6V4H13V9H18V13H20V8L14 2H6ZM12 11V14H15C15 12.343 13.641 11.031 12 11ZM11 12C9.343 12 8 13.343 8 15C8 16.657 9.343 18 11 18C12.657 18 13.969 16.641 14 15H11V12ZM16 15V21H13C13 22.654 14.346 24 16 24H21C22.645 24 24 22.645 24 21V15H16ZM18 17H22V21C22 21.565 21.565 22 21 22C20.449 22 20 21.552 20 21H18V17Z"/></svg>`;
+export const trash = svg `<svg viewBox="0 0 24 24"><path d="M15.5 4H19V6H5V4H8.5L9.5 3H14.5L15.5 4ZM8 21C6.9 21 6 20.1 6 19V7H18V19C18 20.1 17.1 21 16 21H8Z" /></svg>`;
+export const crossConnect = svg `<svg viewBox="0 0 24 24"><path d="M11 12C13.21 12 15 10.21 15 8C15 5.79 13.21 4 11 4C8.79 4 7 5.79 7 8C7 10.21 8.79 12 11 12ZM9 17L12 14.06C11.61 14.02 11.32 14 11 14C8.33 14 3 15.34 3 18V20H12L9 17ZM12 17L15.47 20.5L22 13.91L20.6 12.5L15.47 17.67L13.4 15.59L12 17Z"/></svg>`;
+export const sortCheck = svg `<svg viewbox="0 0 24 24"><path d="M 3,6 V 8 H 21 V 6 Z M 3,18 H 9 V 16 H 3 Z M 15,13 H 3 v -2 h 12 z" /><rect x="8" y="0.5" width="16" height="16" rx="8" /><path d="M 14.5,10.585 12.415,8.50001 11.705,9.20501 14.5,12 l 6,-5.99999 -0.705,-0.705 z" style="fill:#ffffff" /></svg>`;
+//# sourceMappingURL=iconset.js.map

package/dist/assets/iconset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconset.js","sourceRoot":"","sources":["../../src/assets/iconset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAA,2IAA2I,CAAC;AAEvK,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAA,iuCAAiuC,CAAC;AAEzvC,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA,8ZAA8Z,CAAC;AAEpc,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,8IAA8I,CAAC;AAEvK,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA,oRAAoR,CAAC;AAEpT,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA,sRAAsR,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const viewList = svg`<svg viewBox=\"0 0 24 24\"><path d=\"M3 9H7V5H3V9ZM7 14H3V10H7V14ZM7 19H3V15H7V19ZM20 14H8V10H20V14ZM8 19H20V15H8V19ZM8 9V5H20V9H8Z\"/></svg>`;\n\nexport const dcim = svg`<svg viewBox=\"0 0 24 24\"><path d=\"M20 0C17.791 0 16 1.791 16 4C16 6.857 20 11 20 11C20 11 24 6.857 24 4C24 1.791 22.209 0 20 0ZM12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 11.93 21.9912 11.862 21.9902 11.793C21.7532 12.059 21.5575 12.2677 21.4395 12.3887L19.6504 14.3047C19.4484 14.9657 19.1695 15.5919 18.8145 16.1699C18.4985 15.4819 17.806 15 17 15H16V13C16 12.447 15.552 12 15 12H9V10H10C10.552 10 11 9.553 11 9V7.02344L13.0156 7.00781C13.5986 7.00381 14.1175 6.74289 14.4805 6.33789C14.3145 5.89389 14.1875 5.445 14.1035 5L9.99219 5.03125C9.44319 5.03525 9 5.48225 9 6.03125V8H8C7.448 8 7 8.447 7 9V10.1855L4.98047 8.16797C6.34047 5.68697 8.977 4 12 4H14C14 3.397 14.0908 2.81658 14.2578 2.26758C13.5308 2.09858 12.777 2 12 2ZM20 2.57031C20.789 2.57031 21.4297 3.211 21.4297 4C21.4297 4.789 20.789 5.42969 20 5.42969C19.211 5.42969 18.5703 4.789 18.5703 4C18.5703 3.211 19.211 2.57031 20 2.57031ZM4.20703 10.2207L9 15.0137V16C9 17.103 9.897 18 11 18V19.9316C7.06 19.4366 4 16.072 4 12C4 11.388 4.07603 10.7947 4.20703 10.2207ZM10.7793 14H14V16C14 16.553 14.448 17 15 17H17V18.2344C15.875 19.1384 14.502 19.7417 13 19.9297V17C13 16.447 12.552 16 12 16H11V14.5996C11 14.3776 10.9123 14.174 10.7793 14Z\"/></svg>`;\n\nexport const plannedMaintenance = svg`<svg viewBox=\"0 0 24 24\"><path d=\"M6 2C4.90575 2 4 2.90575 4 4V20C4 21.0943 4.90575 22 6 22H11V20H6V4H13V9H18V13H20V8L14 2H6ZM12 11V14H15C15 12.343 13.641 11.031 12 11ZM11 12C9.343 12 8 13.343 8 15C8 16.657 9.343 18 11 18C12.657 18 13.969 16.641 14 15H11V12ZM16 15V21H13C13 22.654 14.346 24 16 24H21C22.645 24 24 22.645 24 21V15H16ZM18 17H22V21C22 21.565 21.565 22 21 22C20.449 22 20 21.552 20 21H18V17Z\"/></svg>`;\n\nexport const trash = svg`<svg viewBox=\"0 0 24 24\"><path d=\"M15.5 4H19V6H5V4H8.5L9.5 3H14.5L15.5 4ZM8 21C6.9 21 6 20.1 6 19V7H18V19C18 20.1 17.1 21 16 21H8Z\" /></svg>`;\n\nexport const crossConnect = svg`<svg viewBox=\"0 0 24 24\"><path d=\"M11 12C13.21 12 15 10.21 15 8C15 5.79 13.21 4 11 4C8.79 4 7 5.79 7 8C7 10.21 8.79 12 11 12ZM9 17L12 14.06C11.61 14.02 11.32 14 11 14C8.33 14 3 15.34 3 18V20H12L9 17ZM12 17L15.47 20.5L22 13.91L20.6 12.5L15.47 17.67L13.4 15.59L12 17Z\"/></svg>`;\n\nexport const sortCheck = svg`<svg viewbox=\"0 0 24 24\"><path d=\"M 3,6 V 8 H 21 V 6 Z M 3,18 H 9 V 16 H 3 Z M 15,13 H 3 v -2 h 12 z\" /><rect x=\"8\" y=\"0.5\" width=\"16\" height=\"16\" rx=\"8\" /><path d=\"M 14.5,10.585 12.415,8.50001 11.705,9.20501 14.5,12 l 6,-5.99999 -0.705,-0.705 z\" style=\"fill:#ffffff\" /></svg>`;\n"]}

package/dist/components/notifications/date-filters.js

@@ -17,10 +17,12 @@ import { isNullOrUndefinedOrEmpty } from '../../helper/common.js';
 let DateFilters = class DateFilters extends MobxLitElement {
     constructor() {
         super(...arguments);
-        this.fromDate = !isNullOrUndefinedOrEmpty(NotificationsState.dateFilters.FROM_DATE) ?
-            format(NotificationsState.dateFilters.FROM_DATE, DefaultDateFormat) : undefined;
-        this.toDate = !isNullOrUndefinedOrEmpty(NotificationsState.dateFilters.TO_DATE) ?
-            format(NotificationsState.dateFilters.TO_DATE, DefaultDateFormat) : undefined;
+        this.fromDate = !isNullOrUndefinedOrEmpty(NotificationsState.dateFilters.FROM_DATE)
+            ? format(NotificationsState.dateFilters.FROM_DATE, DefaultDateFormat)
+            : undefined;
+        this.toDate = !isNullOrUndefinedOrEmpty(NotificationsState.dateFilters.TO_DATE)
+            ? format(NotificationsState.dateFilters.TO_DATE, DefaultDateFormat)
+            : undefined;
         this.maxDate = format(new Date(), DefaultDateFormat);
         this.fromDateErrorText = '';
         this.toDateErrorText = '';
@@ -29,23 +31,23 @@ let DateFilters = class DateFilters extends MobxLitElement {
         return [NotificationsStyle, baseTheme, elementTheme, TWStyles];
     }
     onFromDateChange(fromDate) {
-        //handling of clear date event of calender
-        if (fromDate === null || fromDate === "")
+        // handling of clear date event of calendar
+        if (fromDate === null || fromDate === '')
             this.fromDate = undefined;
         else {
             this.fromDate = fromDate;
-            //clear error message 
+            // clear error message
             if (this.fromDate !== undefined)
                 this.fromDateErrorText = undefined;
         }
     }
     onToDateChange(toDate) {
-        //handling of clear date event of calender
-        if (toDate === null || toDate === "")
+        // handling of clear date event of calendar
+        if (toDate === null || toDate === '')
             this.toDate = undefined;
         else {
             this.toDate = toDate;
-            //clear error message 
+            // clear error message
             if (this.toDate !== undefined)
                 this.toDateErrorText = undefined;
         }
@@ -53,11 +55,11 @@ let DateFilters = class DateFilters extends MobxLitElement {
     onApplyDateFilter(selectedvalue) {
         if (selectedvalue) {
             if (this.toDate === undefined && this.fromDate !== undefined) {
-                this.toDateErrorText = "Please select to date";
+                this.toDateErrorText = 'Please select to date';
                 return;
             }
             if (this.fromDate === undefined && this.toDate !== undefined) {
-                this.fromDateErrorText = "Please select from date";
+                this.fromDateErrorText = 'Please select from date';
                 return;
             }
             if (this.fromDate > this.toDate) {
@@ -65,19 +67,17 @@ let DateFilters = class DateFilters extends MobxLitElement {
                 this.fromDate = undefined;
                 return;
             }
-            else {
-                this.fromDateErrorText = undefined;
-            }
+            this.fromDateErrorText = undefined;
             if (this.toDate < this.fromDate) {
                 this.toDateErrorText = 'To date cannot be earlier than From date.';
                 this.toDate = undefined;
                 return;
             }
-            else {
-                this.toDateErrorText = undefined;
-            }
+            this.toDateErrorText = undefined;
         }
-        const datesChanged = selectedvalue && this.toDateErrorText === undefined && this.fromDateErrorText === undefined;
+        const datesChanged = selectedvalue &&
+            this.toDateErrorText === undefined &&
+            this.fromDateErrorText === undefined;
         if (datesChanged) {
             NotificationsState.setNotificationDateFilter(this.fromDate, this.toDate);
             this.requestUpdate();
@@ -112,7 +112,7 @@ let DateFilters = class DateFilters extends MobxLitElement {
           <ix-icon-button
             appearance="default"
             icon="domain_verification_off"
-            class="blue-icon"
+            class="active-icon"
           ></ix-icon-button>
         </div>
       </div>

package/dist/components/notifications/date-filters.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-filters.js","sourceRoot":"","sources":["../../../src/components/notifications/date-filters.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, state } from 'lit/decorators.js';\nimport { baseTheme, elementTheme } from '@digital-realty/theme';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-date/ix-date.js';\nimport '@digital-realty/ix-divider/ix-divider.js';\nimport '@digital-realty/ix-icon';\nimport '@material/web/icon/icon.js';\nimport { format } from 'date-fns';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport { DefaultDateFormat } from '../../constants/notifications.js';\nimport { FilterDialogEventDetail } from '../../constants/notification-types.js';\nimport { isNullOrUndefinedOrEmpty } from '../../helper/common.js';\n\n@customElement('date-filters')\nexport class DateFilters extends MobxLitElement {\n  static get styles() {\n    return [NotificationsStyle, baseTheme, elementTheme, TWStyles];\n  }\n\n  @state() private fromDate? = !isNullOrUndefinedOrEmpty(NotificationsState.dateFilters.FROM_DATE) ?\n    format(NotificationsState.dateFilters.FROM_DATE!, DefaultDateFormat) :undefined;\n\n  @state() private toDate? = !isNullOrUndefinedOrEmpty(NotificationsState.dateFilters.TO_DATE) ?\n    format(NotificationsState.dateFilters.TO_DATE!, DefaultDateFormat) :undefined;\n\n  @state() private maxDate = format(new Date(), DefaultDateFormat);\n\n  @state() private fromDateErrorText? = '';\n\n  @state() private toDateErrorText? = '';\n\n  onFromDateChange(fromDate: string) {\n    \n    //handling of clear date event of calender\n    if(fromDate === null || fromDate === \"\")\n      this.fromDate = undefined;\n    else\n    {\n      this.fromDate = fromDate;        \n      //clear error message \n      if(this.fromDate !== undefined)\n        this.fromDateErrorText = undefined;\n    }\n    \n  }\n\n  onToDateChange(toDate: string) {\n    \n    //handling of clear date event of calender\n    if(toDate === null || toDate === \"\")\n      this.toDate = undefined;\n    else\n    {\n      this.toDate = toDate;\n      //clear error message \n      if(this.toDate !== undefined)\n        this.toDateErrorText = undefined;\n    }\n  }\n\n  onApplyDateFilter(selectedvalue: Boolean) {    \n    if(selectedvalue)\n    {\n      if (this.toDate === undefined && this.fromDate !== undefined) {\n        this.toDateErrorText = \"Please select to date\";\n        return;\n      }\n\n      if (this.fromDate === undefined && this.toDate !== undefined) {\n          this.fromDateErrorText = \"Please select from date\";\n          return;\n      }\n\n      if (this.fromDate! > this.toDate!) {\n        this.fromDateErrorText = 'From date cannot be later than To date.';\n        this.fromDate = undefined;\n        return;\n      } else {\n        this.fromDateErrorText = undefined;\n      }\n      \n      if (this.toDate! < this.fromDate!) {\n        this.toDateErrorText = 'To date cannot be earlier than From date.';\n        this.toDate = undefined;\n        return;\n      } else {\n        this.toDateErrorText = undefined;\n      }\n    }\n\n    const datesChanged = selectedvalue && this.toDateErrorText === undefined && this.fromDateErrorText === undefined;    \n    if (datesChanged) {\n      NotificationsState.setNotificationDateFilter(this.fromDate, this.toDate);\n      this.requestUpdate();\n    }\n\n    const event = new CustomEvent<FilterDialogEventDetail>('on-selection', {\n      detail: { returnValue: datesChanged },\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(event);\n  }\n\n  clearDateFilters() {\n    this.fromDate = undefined;\n    this.toDate = undefined;\n    this.fromDateErrorText = undefined;\n    this.toDateErrorText = undefined;\n  }\n\n  /* eslint-disable lit-a11y/click-events-have-key-events */\n  render() {\n    return html` <div class=\"flex flex-col p-2\">\n      <div class=\"flex flex-row text-justify\">\n        <div class=\"grow items-center text-xl font-bold text-left p-2\">\n          Filter by Date\n        </div>\n        <div\n          class=\"flex flex-row items-center p-2\"\n          @click=${this.clearDateFilters}\n        >\n          <label class=\"grow text-sm text-right pr-1 cursor-pointer\"\n            >Clear Filter</label\n          >\n          <ix-icon-button\n            appearance=\"default\"\n            icon=\"domain_verification_off\"\n            class=\"blue-icon\"\n          ></ix-icon-button>\n        </div>\n      </div>\n      <ix-divider class=\"px-2\"></ix-divider>\n      <div\n        class=\"flex xl:flex-row lg:flex-col md:flex-col sm:flex-col justify-between item-center p-2\"\n      >\n        <div class=\"p-2\">\n          <ix-date\n            .value=${this.fromDate}\n            max=${this.maxDate}\n            label=\"From\"\n            name=\"FromDate\"\n            .errorText=${this.fromDateErrorText}\n            .onChanged=${(e: any) => this.onFromDateChange(e)}\n          >\n          </ix-date>\n        </div>\n        <div class=\"p-2\">\n          <ix-date\n            .value=${this.toDate}\n            max=${this.maxDate}\n            label=\"To\"\n            name=\"ToDate\"\n            .errorText=${this.toDateErrorText}\n            .onChanged=${(e: any) => this.onToDateChange(e)}\n          ></ix-date>\n        </div>\n      </div>\n      <div class=\"flex flex-row justify-between  p-2\">\n        <ix-button\n          type=\"\"\n          target=\"\"\n          appearance=\"text\"\n          @click=\"${() => this.onApplyDateFilter(false)}\"\n          >Cancel</ix-button\n        >\n        <ix-button\n          type=\"\"\n          target=\"\"\n          appearance=\"text\"\n          @click=\"${() => this.onApplyDateFilter(true)}\"\n          >Filter List</ix-button\n        >\n      </div>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"date-filters.js","sourceRoot":"","sources":["../../../src/components/notifications/date-filters.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,kDAAkD,CAAC;AAC1D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,0CAA0C,CAAC;AAClD,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAErE,OAAO,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAG3D,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,cAAc;IAAxC;;QAKY,aAAQ,GAAI,CAAC,wBAAwB,CACpD,kBAAkB,CAAC,WAAW,CAAC,SAAS,CACzC;YACC,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,WAAW,CAAC,SAAU,EAAE,iBAAiB,CAAC;YACtE,CAAC,CAAC,SAAS,CAAC;QAEG,WAAM,GAAI,CAAC,wBAAwB,CAClD,kBAAkB,CAAC,WAAW,CAAC,OAAO,CACvC;YACC,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,WAAW,CAAC,OAAQ,EAAE,iBAAiB,CAAC;YACpE,CAAC,CAAC,SAAS,CAAC;QAEG,YAAO,GAAG,MAAM,CAAC,IAAI,IAAI,EAAE,EAAE,iBAAiB,CAAC,CAAC;QAEhD,sBAAiB,GAAI,EAAE,CAAC;QAExB,oBAAe,GAAI,EAAE,CAAC;IA8IzC,CAAC;IAlKC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,kBAAkB,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC;IACjE,CAAC;IAoBD,gBAAgB,CAAC,QAAgB;QAC/B,2CAA2C;QAC3C,IAAI,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,EAAE;YAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;aAC/D;YACH,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACzB,sBAAsB;YACtB,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS;gBAAE,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;SACrE;IACH,CAAC;IAED,cAAc,CAAC,MAAc;QAC3B,2CAA2C;QAC3C,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,EAAE;YAAE,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;aACzD;YACH,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;YACrB,sBAAsB;YACtB,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS;gBAAE,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;SACjE;IACH,CAAC;IAED,iBAAiB,CAAC,aAAsB;QACtC,IAAI,aAAa,EAAE;YACjB,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;gBAC5D,IAAI,CAAC,eAAe,GAAG,uBAAuB,CAAC;gBAC/C,OAAO;aACR;YAED,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE;gBAC5D,IAAI,CAAC,iBAAiB,GAAG,yBAAyB,CAAC;gBACnD,OAAO;aACR;YAED,IAAI,IAAI,CAAC,QAAS,GAAG,IAAI,CAAC,MAAO,EAAE;gBACjC,IAAI,CAAC,iBAAiB,GAAG,yCAAyC,CAAC;gBACnE,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;gBAC1B,OAAO;aACR;YAED,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;YAEnC,IAAI,IAAI,CAAC,MAAO,GAAG,IAAI,CAAC,QAAS,EAAE;gBACjC,IAAI,CAAC,eAAe,GAAG,2CAA2C,CAAC;gBACnE,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;gBACxB,OAAO;aACR;YAED,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;SAClC;QAED,MAAM,YAAY,GAChB,aAAa;YACb,IAAI,CAAC,eAAe,KAAK,SAAS;YAClC,IAAI,CAAC,iBAAiB,KAAK,SAAS,CAAC;QAEvC,IAAI,YAAY,EAAE;YAChB,kBAAkB,CAAC,yBAAyB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YACzE,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;QAED,MAAM,KAAK,GAAG,IAAI,WAAW,CAA0B,cAAc,EAAE;YACrE,MAAM,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE;YACrC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC1B,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;QACxB,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;QACnC,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;IACnC,CAAC;IAED,0DAA0D;IAC1D,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;mBAOI,IAAI,CAAC,gBAAgB;;;;;;;;;;;;;;;;;;qBAkBnB,IAAI,CAAC,QAAQ;kBAChB,IAAI,CAAC,OAAO;;;yBAGL,IAAI,CAAC,iBAAiB;yBACtB,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;;;;;;qBAMxC,IAAI,CAAC,MAAM;kBACd,IAAI,CAAC,OAAO;;;yBAGL,IAAI,CAAC,eAAe;yBACpB,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;;;;;;;;;oBASvC,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;;;;;;;oBAOnC,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;;;;WAI3C,CAAC;IACV,CAAC;CACF,CAAA;AA9JU;IAAR,KAAK,EAAE;6CAIM;AAEL;IAAR,KAAK,EAAE;2CAIM;AAEL;IAAR,KAAK,EAAE;4CAAyD;AAExD;IAAR,KAAK,EAAE;sDAAiC;AAEhC;IAAR,KAAK,EAAE;oDAA+B;AArB5B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAmKvB;SAnKY,WAAW","sourcesContent":["import { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, state } from 'lit/decorators.js';\nimport { baseTheme, elementTheme } from '@digital-realty/theme';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-date/ix-date.js';\nimport '@digital-realty/ix-divider/ix-divider.js';\nimport '@digital-realty/ix-icon';\nimport '@material/web/icon/icon.js';\nimport { format } from 'date-fns';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport { DefaultDateFormat } from '../../constants/notifications.js';\nimport { FilterDialogEventDetail } from '../../constants/notification-types.js';\nimport { isNullOrUndefinedOrEmpty } from '../../helper/common.js';\n\n@customElement('date-filters')\nexport class DateFilters extends MobxLitElement {\n  static get styles() {\n    return [NotificationsStyle, baseTheme, elementTheme, TWStyles];\n  }\n\n  @state() private fromDate? = !isNullOrUndefinedOrEmpty(\n    NotificationsState.dateFilters.FROM_DATE\n  )\n    ? format(NotificationsState.dateFilters.FROM_DATE!, DefaultDateFormat)\n    : undefined;\n\n  @state() private toDate? = !isNullOrUndefinedOrEmpty(\n    NotificationsState.dateFilters.TO_DATE\n  )\n    ? format(NotificationsState.dateFilters.TO_DATE!, DefaultDateFormat)\n    : undefined;\n\n  @state() private maxDate = format(new Date(), DefaultDateFormat);\n\n  @state() private fromDateErrorText? = '';\n\n  @state() private toDateErrorText? = '';\n\n  onFromDateChange(fromDate: string) {\n    // handling of clear date event of calendar\n    if (fromDate === null || fromDate === '') this.fromDate = undefined;\n    else {\n      this.fromDate = fromDate;\n      // clear error message\n      if (this.fromDate !== undefined) this.fromDateErrorText = undefined;\n    }\n  }\n\n  onToDateChange(toDate: string) {\n    // handling of clear date event of calendar\n    if (toDate === null || toDate === '') this.toDate = undefined;\n    else {\n      this.toDate = toDate;\n      // clear error message\n      if (this.toDate !== undefined) this.toDateErrorText = undefined;\n    }\n  }\n\n  onApplyDateFilter(selectedvalue: Boolean) {\n    if (selectedvalue) {\n      if (this.toDate === undefined && this.fromDate !== undefined) {\n        this.toDateErrorText = 'Please select to date';\n        return;\n      }\n\n      if (this.fromDate === undefined && this.toDate !== undefined) {\n        this.fromDateErrorText = 'Please select from date';\n        return;\n      }\n\n      if (this.fromDate! > this.toDate!) {\n        this.fromDateErrorText = 'From date cannot be later than To date.';\n        this.fromDate = undefined;\n        return;\n      }\n\n      this.fromDateErrorText = undefined;\n\n      if (this.toDate! < this.fromDate!) {\n        this.toDateErrorText = 'To date cannot be earlier than From date.';\n        this.toDate = undefined;\n        return;\n      }\n\n      this.toDateErrorText = undefined;\n    }\n\n    const datesChanged =\n      selectedvalue &&\n      this.toDateErrorText === undefined &&\n      this.fromDateErrorText === undefined;\n\n    if (datesChanged) {\n      NotificationsState.setNotificationDateFilter(this.fromDate, this.toDate);\n      this.requestUpdate();\n    }\n\n    const event = new CustomEvent<FilterDialogEventDetail>('on-selection', {\n      detail: { returnValue: datesChanged },\n      bubbles: true,\n      composed: true,\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  clearDateFilters() {\n    this.fromDate = undefined;\n    this.toDate = undefined;\n    this.fromDateErrorText = undefined;\n    this.toDateErrorText = undefined;\n  }\n\n  /* eslint-disable lit-a11y/click-events-have-key-events */\n  render() {\n    return html` <div class=\"flex flex-col p-2\">\n      <div class=\"flex flex-row text-justify\">\n        <div class=\"grow items-center text-xl font-bold text-left p-2\">\n          Filter by Date\n        </div>\n        <div\n          class=\"flex flex-row items-center p-2\"\n          @click=${this.clearDateFilters}\n        >\n          <label class=\"grow text-sm text-right pr-1 cursor-pointer\"\n            >Clear Filter</label\n          >\n          <ix-icon-button\n            appearance=\"default\"\n            icon=\"domain_verification_off\"\n            class=\"active-icon\"\n          ></ix-icon-button>\n        </div>\n      </div>\n      <ix-divider class=\"px-2\"></ix-divider>\n      <div\n        class=\"flex xl:flex-row lg:flex-col md:flex-col sm:flex-col justify-between item-center p-2\"\n      >\n        <div class=\"p-2\">\n          <ix-date\n            .value=${this.fromDate}\n            max=${this.maxDate}\n            label=\"From\"\n            name=\"FromDate\"\n            .errorText=${this.fromDateErrorText}\n            .onChanged=${(e: any) => this.onFromDateChange(e)}\n          >\n          </ix-date>\n        </div>\n        <div class=\"p-2\">\n          <ix-date\n            .value=${this.toDate}\n            max=${this.maxDate}\n            label=\"To\"\n            name=\"ToDate\"\n            .errorText=${this.toDateErrorText}\n            .onChanged=${(e: any) => this.onToDateChange(e)}\n          ></ix-date>\n        </div>\n      </div>\n      <div class=\"flex flex-row justify-between  p-2\">\n        <ix-button\n          type=\"\"\n          target=\"\"\n          appearance=\"text\"\n          @click=\"${() => this.onApplyDateFilter(false)}\"\n          >Cancel</ix-button\n        >\n        <ix-button\n          type=\"\"\n          target=\"\"\n          appearance=\"text\"\n          @click=\"${() => this.onApplyDateFilter(true)}\"\n          >Filter List</ix-button\n        >\n      </div>\n    </div>`;\n  }\n}\n"]}