@digital-realty/ix-notifications 1.1.19 → 1.1.21

package/dist/IxNotifications.js

@@ -150,7 +150,7 @@ export class IxNotifications extends MobxLitElement {
     }
     renderGroupedView() {
         const filteredNotifications = this.applyNotificationFilters();
-        return html `<div style="margin:0px">
+        return html `<div class="-mx-4 -mt-2">
       <grouped-item
         groupTitle="Planned Maintenance"
         groupIcon="${plannedMaintenance.strings[0]}"
@@ -178,35 +178,39 @@ export class IxNotifications extends MobxLitElement {
         const filterTodayItems = filterNotification.filter(notification => differenceInDays(new Date(notification.createdAt), new Date()) === 0);
         const filterEarlierItems = filterNotification.filter(notification => differenceInDays(new Date(notification.createdAt), new Date()) !== 0);
         if ((filterNotification === null || filterNotification === void 0 ? void 0 : filterNotification.length) > 0) {
-            return html ` <h3 class="grow">Today</h3>
-        <div class="m-0 p-0">
-          ${filterTodayItems.length > 0
-                ? filterTodayItems === null || filterTodayItems === void 0 ? void 0 : filterTodayItems.map(item => html `<notification-item
+            return html `
+        <h3>Today</h3>
+        ${filterTodayItems.length > 0
+                ? html `<div class="-mx-4">
+              ${filterTodayItems === null || filterTodayItems === void 0 ? void 0 : filterTodayItems.map(item => html `<notification-item
                   .notification=${item}
                   ?disabled=${item.resourceType ===
                     NotificationGroups.INCIDENTS}
                 >
-                </notification-item> `)
+                </notification-item> `)}
+            </div>`
                 : this.renderNoResult()}
-        </div>
-        <h3 class="grow">Earlier</h3>
-        <div>
-          ${filterEarlierItems.length > 0
-                ? filterEarlierItems === null || filterEarlierItems === void 0 ? void 0 : filterEarlierItems.map(item => html `<notification-item
+        <h3>Earlier</h3>
+        ${filterEarlierItems.length > 0
+                ? html `<div class="-mx-4">
+              ${filterEarlierItems === null || filterEarlierItems === void 0 ? void 0 : filterEarlierItems.map(item => html `<notification-item
                   .notification=${item}
                   ?disabled=${item.resourceType ===
                     NotificationGroups.INCIDENTS}
                 >
-                </notification-item> `)
+                </notification-item> `)}
+            </div>`
                 : this.renderNoResult()}
-        </div>`;
+      `;
         }
-        return html `<h3 class="grow">Today</h3>
-      <p class="empty"><strong>No notifications yet.</strong></p>`;
+        return html `<h3>Today</h3>
+      ${this.renderNoResult()}`;
     }
     /* eslint-disable-next-line */
     renderNoResult() {
-        return html `<p class="empty"><strong>No notifications yet.</strong></p>`;
+        return html `<p class="dlr-text-caption my-4">
+      <strong>No notifications yet.</strong>
+    </p>`;
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     handleCloseClick(_e) {
@@ -255,15 +259,18 @@ export class IxNotifications extends MobxLitElement {
         @click=${this.manageFilterVisibility}
         compact
       >
-        <div
-          class="flex flex-row justify-between grow items-center notification-header-container"
-          slot="header"
-        >
-          <h2 class="grow items-center notification-header">Notifications</h2>
-          <div class="flex flex-row justify-end grow items-center options">
-            <ix-icon-button
-              @click=${this.markAllread}
-              @mouseover=${(e) => {
+        <div slot="content" class="m-4">
+          <div
+            class="flex flex-row justify-between grow items-center notification-header-container mb-4"
+          >
+            <h2 class="grow items-center dlr-text-heading">Notifications</h2>
+            <div
+              class="flex flex-row justify-end grow items-center options"
+              style="--md-icon-button-icon-size: 24px;"
+            >
+              <ix-icon-button
+                @click=${this.markAllread}
+                @mouseover=${(e) => {
             // only show the tooltip if the button is active
             if (NotificationsState.unreadNotificationCount > 0) {
                 window.dispatchEvent(new CustomEvent('show-notification-tooltip', {
@@ -271,75 +278,74 @@ export class IxNotifications extends MobxLitElement {
                 }));
             }
         }}
-              @mouseout=${() => window.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}
-              icon="markunread_mailbox"
-              class="${NotificationsState.unreadNotificationCount <= 0
+                @mouseout=${() => window.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}
+                icon="markunread_mailbox"
+                class="${NotificationsState.unreadNotificationCount <= 0
             ? 'inactive-icon'
             : 'active-icon'}"
-              .disabled="${NotificationsState.unreadNotificationCount <= 0}"
-              filledIcon="true"
-            ></ix-icon-button>
-            <ix-icon-button
-              @click=${this.toggleGroupView}
-              @mouseover=${(e) => {
+                .disabled="${NotificationsState.unreadNotificationCount <= 0}"
+                filledIcon="true"
+              ></ix-icon-button>
+              <ix-icon-button
+                @click=${this.toggleGroupView}
+                @mouseover=${(e) => {
             window.dispatchEvent(new CustomEvent('show-notification-tooltip', {
                 detail: { label: 'Sort by Type', target: e.target },
             }));
         }}
-              @mouseout=${() => window.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}
-              class="active-icon"
-              label="Sort by Type"
-            >
-              <ix-icon slot="default"
-                >${this.showGroupedView ? sortCheck : 'sort'}</ix-icon
+                @mouseout=${() => window.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}
+                class="active-icon"
+                label="Sort by Type"
               >
-            </ix-icon-button>
-            <ix-icon-button
-              @click=${this.displayFilters}
-              @mouseover=${(e) => {
+                <ix-icon slot="default"
+                  >${this.showGroupedView ? sortCheck : 'sort'}</ix-icon
+                >
+              </ix-icon-button>
+              <ix-icon-button
+                @click=${this.displayFilters}
+                @mouseover=${(e) => {
             window.dispatchEvent(new CustomEvent('show-notification-tooltip', {
                 detail: { label: 'Filter by Type', target: e.target },
             }));
         }}
-              @mouseout=${() => window.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}
-              class="active-icon"
-              id="group-filter-button"
-              label="Filter by Type"
-            >
-              <ix-icon slot="default"> ${viewList} </ix-icon>
-            </ix-icon-button>
-            <div
-              class="filter-dropdown-content  ${this.showFilters
+                @mouseout=${() => window.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}
+                class="active-icon"
+                id="group-filter-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'
-            : ''}"
-            >
-              <group-filters></group-filters>
-            </div>
-            <ix-icon-button
-              @click=${this.displayDateFilters}
-              @mouseover=${(e) => {
+            : 'hidden'}"
+              >
+                <group-filters></group-filters>
+              </div>
+              <ix-icon-button
+                @click=${this.displayDateFilters}
+                @mouseover=${(e) => {
             window.dispatchEvent(new CustomEvent('show-notification-tooltip', {
                 detail: { label: 'Filter by Date', target: e.target },
             }));
         }}
-              @mouseout=${() => window.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}
-              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
+                @mouseout=${() => window.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}
+                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
             ? 'active z-50'
-            : ''}"
-              @on-selection=${this.handleCloseClick}
-            >
-              <date-filters></date-filters>
+            : 'hidden'}"
+                @on-selection=${this.handleCloseClick}
+              >
+                <date-filters></date-filters>
+              </div>
             </div>
           </div>
-        </div>
-        <div slot="content">
           ${this.showGroupedView
             ? this.renderGroupedView()
             : this.renderDefaultView()}

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 } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { differenceInDays } from 'date-fns/differenceInDays.js';\nimport { differenceInHours } from 'date-fns/differenceInHours.js';\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 './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 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(\n      'ix-notifications-toggle-drawer',\n      this.toggleDrawer\n    );\n    window.addEventListener('beforeunload', this.handleOnbeforeunload);\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener(\n      'account-switched',\n      NotificationsState.NewApiClient\n    );\n    window.removeEventListener(\n      'ix-notifications-toggle-drawer',\n      this.toggleDrawer\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    NotificationsState.showDrawer = !NotificationsState.showDrawer;\n    if (!NotificationsState.showDrawer) {\n      this.showFilters = false;\n      this.showDateFilters = false;\n    }\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 notifications 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.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 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 =>\n        differenceInDays(new Date(notification.createdAt), new Date()) === 0\n    );\n\n    const filterEarlierItems = filterNotification.filter(\n      notification =>\n        differenceInDays(new Date(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`<h3 class=\"grow\">Today</h3>\n      <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      <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=${NotificationsState.showDrawer}\n        .onClosed=${() => this.toggleDrawer()}\n        animate-vertical\n        hide-close\n        @on-content-scroll=${this.handleContentScroll}\n        @click=${this.manageFilterVisibility}\n        compact\n      >\n        <div\n          class=\"flex flex-row justify-between grow items-center notification-header-container\"\n          slot=\"header\"\n        >\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) => {\n                // only show the tooltip if the button is active\n                if (NotificationsState.unreadNotificationCount > 0) {\n                  window.dispatchEvent(\n                    new CustomEvent('show-notification-tooltip', {\n                      detail: { label: 'Mark All Read', target: e.target },\n                    })\n                  );\n                }\n              }}\n              @mouseout=${() =>\n                window.dispatchEvent(\n                  new CustomEvent('hide-notification-tooltip')\n                )}\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) => {\n                window.dispatchEvent(\n                  new CustomEvent('show-notification-tooltip', {\n                    detail: { label: 'Sort by Type', target: e.target },\n                  })\n                );\n              }}\n              @mouseout=${() =>\n                window.dispatchEvent(\n                  new CustomEvent('hide-notification-tooltip')\n                )}\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) => {\n                window.dispatchEvent(\n                  new CustomEvent('show-notification-tooltip', {\n                    detail: { label: 'Filter by Type', target: e.target },\n                  })\n                );\n              }}\n              @mouseout=${() =>\n                window.dispatchEvent(\n                  new CustomEvent('hide-notification-tooltip')\n                )}\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) => {\n                window.dispatchEvent(\n                  new CustomEvent('show-notification-tooltip', {\n                    detail: { label: 'Filter by Date', target: e.target },\n                  })\n                );\n              }}\n              @mouseout=${() =>\n                window.dispatchEvent(\n                  new CustomEvent('hide-notification-tooltip')\n                )}\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"]}
+{"version":3,"file":"IxNotifications.js","sourceRoot":"","sources":["../src/IxNotifications.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { differenceInDays } from 'date-fns/differenceInDays.js';\nimport { differenceInHours } from 'date-fns/differenceInHours.js';\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 './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 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(\n      'ix-notifications-toggle-drawer',\n      this.toggleDrawer\n    );\n    window.addEventListener('beforeunload', this.handleOnbeforeunload);\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener(\n      'account-switched',\n      NotificationsState.NewApiClient\n    );\n    window.removeEventListener(\n      'ix-notifications-toggle-drawer',\n      this.toggleDrawer\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    NotificationsState.showDrawer = !NotificationsState.showDrawer;\n    if (!NotificationsState.showDrawer) {\n      this.showFilters = false;\n      this.showDateFilters = false;\n    }\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 notifications 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.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 class=\"-mx-4 -mt-2\">\n      <grouped-item\n        groupTitle=\"Planned 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 =>\n        differenceInDays(new Date(notification.createdAt), new Date()) === 0\n    );\n\n    const filterEarlierItems = filterNotification.filter(\n      notification =>\n        differenceInDays(new Date(notification.createdAt), new Date()) !== 0\n    );\n\n    if (filterNotification?.length! > 0) {\n      return html`\n        <h3>Today</h3>\n        ${filterTodayItems.length > 0\n          ? html`<div class=\"-mx-4\">\n              ${filterTodayItems?.map(\n                item => html`<notification-item\n                  .notification=${item}\n                  ?disabled=${item.resourceType ===\n                  NotificationGroups.INCIDENTS}\n                >\n                </notification-item> `\n              )}\n            </div>`\n          : this.renderNoResult()}\n        <h3>Earlier</h3>\n        ${filterEarlierItems.length > 0\n          ? html`<div class=\"-mx-4\">\n              ${filterEarlierItems?.map(\n                item => html`<notification-item\n                  .notification=${item}\n                  ?disabled=${item.resourceType ===\n                  NotificationGroups.INCIDENTS}\n                >\n                </notification-item> `\n              )}\n            </div>`\n          : this.renderNoResult()}\n      `;\n    }\n\n    return html`<h3>Today</h3>\n      ${this.renderNoResult()}`;\n  }\n\n  /* eslint-disable-next-line */\n  renderNoResult() {\n    return html`<p class=\"dlr-text-caption my-4\">\n      <strong>No notifications yet.</strong>\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  // 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      <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=${NotificationsState.showDrawer}\n        .onClosed=${() => this.toggleDrawer()}\n        animate-vertical\n        hide-close\n        @on-content-scroll=${this.handleContentScroll}\n        @click=${this.manageFilterVisibility}\n        compact\n      >\n        <div slot=\"content\" class=\"m-4\">\n          <div\n            class=\"flex flex-row justify-between grow items-center notification-header-container mb-4\"\n          >\n            <h2 class=\"grow items-center dlr-text-heading\">Notifications</h2>\n            <div\n              class=\"flex flex-row justify-end grow items-center options\"\n              style=\"--md-icon-button-icon-size: 24px;\"\n            >\n              <ix-icon-button\n                @click=${this.markAllread}\n                @mouseover=${(e: any) => {\n                  // only show the tooltip if the button is active\n                  if (NotificationsState.unreadNotificationCount > 0) {\n                    window.dispatchEvent(\n                      new CustomEvent('show-notification-tooltip', {\n                        detail: { label: 'Mark All Read', target: e.target },\n                      })\n                    );\n                  }\n                }}\n                @mouseout=${() =>\n                  window.dispatchEvent(\n                    new CustomEvent('hide-notification-tooltip')\n                  )}\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) => {\n                  window.dispatchEvent(\n                    new CustomEvent('show-notification-tooltip', {\n                      detail: { label: 'Sort by Type', target: e.target },\n                    })\n                  );\n                }}\n                @mouseout=${() =>\n                  window.dispatchEvent(\n                    new CustomEvent('hide-notification-tooltip')\n                  )}\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) => {\n                  window.dispatchEvent(\n                    new CustomEvent('show-notification-tooltip', {\n                      detail: { label: 'Filter by Type', target: e.target },\n                    })\n                  );\n                }}\n                @mouseout=${() =>\n                  window.dispatchEvent(\n                    new CustomEvent('hide-notification-tooltip')\n                  )}\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                  : 'hidden'}\"\n              >\n                <group-filters></group-filters>\n              </div>\n              <ix-icon-button\n                @click=${this.displayDateFilters}\n                @mouseover=${(e: any) => {\n                  window.dispatchEvent(\n                    new CustomEvent('show-notification-tooltip', {\n                      detail: { label: 'Filter by Date', target: e.target },\n                    })\n                  );\n                }}\n                @mouseout=${() =>\n                  window.dispatchEvent(\n                    new CustomEvent('hide-notification-tooltip')\n                  )}\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                  : 'hidden'}\"\n                @on-selection=${this.handleCloseClick}\n              >\n                <date-filters></date-filters>\n              </div>\n            </div>\n          </div>\n          ${this.showGroupedView\n            ? this.renderGroupedView()\n            : this.renderDefaultView()}\n        </div>\n      </ix-drawer>\n    `;\n  }\n}\n"]}

package/dist/components/notifications/confirmation-dialog.js

@@ -2,7 +2,6 @@ import { __decorate } from "tslib";
 import { html } from 'lit';
 import { MobxLitElement } from '@adobe/lit-mobx';
 import { customElement, property } from 'lit/decorators.js';
-import { baseTheme, elementTheme } from '@digital-realty/theme';
 import '@digital-realty/ix-icon-button/ix-icon-button.js';
 import { TWStyles } from '../../tw.js';
 import { NotificationsStyle } from '../../styles/notifications-style.js';
@@ -16,7 +15,7 @@ let ConfirmationDialog = class ConfirmationDialog extends MobxLitElement {
         };
     }
     static get styles() {
-        return [NotificationsStyle, elementTheme, baseTheme, TWStyles];
+        return [TWStyles, NotificationsStyle];
     }
     onClick(selectedvalue) {
         const event = new CustomEvent('on-confirm-selection', {
@@ -32,9 +31,7 @@ let ConfirmationDialog = class ConfirmationDialog extends MobxLitElement {
       class="w-[580px]"
       @closed=${this.dialogClosed}
     >
-      <div slot="headline">
-        <div class="p-4 text-xl font-bold">${this.textMessage}</div>
-      </div>
+      <div slot="headline">${this.textMessage}</div>
       <div slot="actions">
         <div class="flex flex-row justify-end p-1">
           <ix-button

package/dist/components/notifications/confirmation-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirmation-dialog.js","sourceRoot":"","sources":["../../../src/components/notifications/confirmation-dialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,kDAAkD,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAGlE,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,cAAc;IAA/C;;QAKwC,gBAAW,GAAG,eAAe,CAAC;QAE7B,SAAI,GAAG,KAAK,CAAC;QAc3D,iBAAY,GAAG,GAAG,EAAE;YAClB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,uBAAuB,CAAC,CAAC,CAAC;QAC/D,CAAC,CAAC;IA6BJ,CAAC;IAnDC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,kBAAkB,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;IACjE,CAAC;IAMD,OAAO,CAAC,aAAsB;QAC5B,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,sBAAsB,EACtB;YACE,MAAM,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE;YACtC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CACF,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;cACD,IAAI,CAAC,IAAI;;gBAEP,IAAI,CAAC,YAAY;;;6CAGY,IAAI,CAAC,WAAW;;;;;;;sBAOvC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;;;;;;sBAMzB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;;;;;iBAK7B,CAAC;IAChB,CAAC;CACF,CAAA;AA/C8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;uDAA+B;AAE7B;IAA7C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;gDAAc;AAPhD,kBAAkB;IAD9B,aAAa,CAAC,qBAAqB,CAAC;GACxB,kBAAkB,CAoD9B;SApDY,kBAAkB","sourcesContent":["import { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, property } from 'lit/decorators.js';\nimport { baseTheme, elementTheme } from '@digital-realty/theme';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { TWStyles } from '../../tw.js';\nimport { ConfirmationDialogEventDetail } from '../../constants/notification-types.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\n\n@customElement('confirmation-dialog')\nexport class ConfirmationDialog extends MobxLitElement {\n  static get styles() {\n    return [NotificationsStyle, elementTheme, baseTheme, TWStyles];\n  }\n\n  @property({ type: String, attribute: true }) textMessage = 'Are you sure?';\n\n  @property({ type: Boolean, attribute: true }) open = false;\n\n  onClick(selectedvalue: Boolean) {\n    const event = new CustomEvent<ConfirmationDialogEventDetail>(\n      'on-confirm-selection',\n      {\n        detail: { returnValue: selectedvalue },\n        bubbles: true,\n        composed: true,\n      }\n    );\n    this.dispatchEvent(event);\n  }\n\n  dialogClosed = () => {\n    this.dispatchEvent(new CustomEvent('confirm-dialog-closed'));\n  };\n\n  render() {\n    return html` <ix-dialog\n      ?open=${this.open}\n      class=\"w-[580px]\"\n      @closed=${this.dialogClosed}\n    >\n      <div slot=\"headline\">\n        <div class=\"p-4 text-xl font-bold\">${this.textMessage}</div>\n      </div>\n      <div slot=\"actions\">\n        <div class=\"flex flex-row justify-end p-1\">\n          <ix-button\n            name=\"cancel\"\n            appearance=\"text\"\n            @click=\"${() => this.onClick(false)}\"\n            >DISMISS</ix-button\n          >\n          <ix-button\n            name=\"confirm\"\n            appearance=\"text\"\n            @click=\"${() => this.onClick(true)}\"\n            >YES</ix-button\n          >\n        </div>\n      </div>\n    </ix-dialog>`;\n  }\n}\n"]}
+{"version":3,"file":"confirmation-dialog.js","sourceRoot":"","sources":["../../../src/components/notifications/confirmation-dialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,kDAAkD,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAGlE,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,cAAc;IAA/C;;QAKwC,gBAAW,GAAG,eAAe,CAAC;QAE7B,SAAI,GAAG,KAAK,CAAC;QAc3D,iBAAY,GAAG,GAAG,EAAE;YAClB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,uBAAuB,CAAC,CAAC,CAAC;QAC/D,CAAC,CAAC;IA2BJ,CAAC;IAjDC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;IACxC,CAAC;IAMD,OAAO,CAAC,aAAsB;QAC5B,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,sBAAsB,EACtB;YACE,MAAM,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE;YACtC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CACF,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;cACD,IAAI,CAAC,IAAI;;gBAEP,IAAI,CAAC,YAAY;;6BAEJ,IAAI,CAAC,WAAW;;;;;;sBAMvB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;;;;;;sBAMzB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;;;;;iBAK7B,CAAC;IAChB,CAAC;CACF,CAAA;AA7C8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;uDAA+B;AAE7B;IAA7C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;gDAAc;AAPhD,kBAAkB;IAD9B,aAAa,CAAC,qBAAqB,CAAC;GACxB,kBAAkB,CAkD9B;SAlDY,kBAAkB","sourcesContent":["import { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { TWStyles } from '../../tw.js';\nimport { ConfirmationDialogEventDetail } from '../../constants/notification-types.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\n\n@customElement('confirmation-dialog')\nexport class ConfirmationDialog extends MobxLitElement {\n  static get styles() {\n    return [TWStyles, NotificationsStyle];\n  }\n\n  @property({ type: String, attribute: true }) textMessage = 'Are you sure?';\n\n  @property({ type: Boolean, attribute: true }) open = false;\n\n  onClick(selectedvalue: Boolean) {\n    const event = new CustomEvent<ConfirmationDialogEventDetail>(\n      'on-confirm-selection',\n      {\n        detail: { returnValue: selectedvalue },\n        bubbles: true,\n        composed: true,\n      }\n    );\n    this.dispatchEvent(event);\n  }\n\n  dialogClosed = () => {\n    this.dispatchEvent(new CustomEvent('confirm-dialog-closed'));\n  };\n\n  render() {\n    return html` <ix-dialog\n      ?open=${this.open}\n      class=\"w-[580px]\"\n      @closed=${this.dialogClosed}\n    >\n      <div slot=\"headline\">${this.textMessage}</div>\n      <div slot=\"actions\">\n        <div class=\"flex flex-row justify-end p-1\">\n          <ix-button\n            name=\"cancel\"\n            appearance=\"text\"\n            @click=\"${() => this.onClick(false)}\"\n            >DISMISS</ix-button\n          >\n          <ix-button\n            name=\"confirm\"\n            appearance=\"text\"\n            @click=\"${() => this.onClick(true)}\"\n            >YES</ix-button\n          >\n        </div>\n      </div>\n    </ix-dialog>`;\n  }\n}\n"]}

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

@@ -2,7 +2,6 @@ import { __decorate } from "tslib";
 import { html } from 'lit';
 import { MobxLitElement } from '@adobe/lit-mobx';
 import { customElement, state } from 'lit/decorators.js';
-import { baseTheme, elementTheme } from '@digital-realty/theme';
 import '@digital-realty/ix-icon-button/ix-icon-button.js';
 import '@digital-realty/ix-date/ix-date.js';
 import '@digital-realty/ix-divider/ix-divider.js';
@@ -28,7 +27,7 @@ let DateFilters = class DateFilters extends MobxLitElement {
         this.toDateErrorText = '';
     }
     static get styles() {
-        return [NotificationsStyle, baseTheme, elementTheme, TWStyles];
+        return [TWStyles, NotificationsStyle];
     }
     onFromDateChange(fromDate) {
         // handling of clear date event of calendar
@@ -97,30 +96,26 @@ let DateFilters = class DateFilters extends MobxLitElement {
     }
     /* eslint-disable lit-a11y/click-events-have-key-events */
     render() {
-        return html ` <div class="flex flex-col p-2">
-      <div class="flex flex-row text-justify">
-        <div class="grow items-center text-xl font-bold text-left p-2">
-          Filter by Date
-        </div>
-        <div
-          class="flex flex-row items-center p-2"
-          @click=${this.clearDateFilters}
-        >
+        return html ` <div class="flex flex-col p-4">
+      <div class="flex flex-row items-center">
+        <div class="grow items-center text-xl font-bold">Filter by Date</div>
+        <div class="flex flex-row items-center" @click=${this.clearDateFilters}>
           <label class="grow text-sm text-right pr-1 cursor-pointer"
             >Clear Filter</label
           >
           <ix-icon-button
+            small
             appearance="default"
             icon="domain_verification_off"
             class="active-icon"
           ></ix-icon-button>
         </div>
       </div>
-      <ix-divider class="px-2"></ix-divider>
+      <ix-divider class="my-2"></ix-divider>
       <div
-        class="flex xl:flex-row lg:flex-col md:flex-col sm:flex-col justify-between item-center p-2"
+        class="flex xl:flex-row lg:flex-col md:flex-col sm:flex-col justify-between item-center my-4"
       >
-        <div class="p-2">
+        <div class="flex gap-2">
           <ix-date
             .value=${this.fromDate}
             max=${this.maxDate}
@@ -130,8 +125,6 @@ let DateFilters = class DateFilters extends MobxLitElement {
             .onChanged=${(e) => this.onFromDateChange(e)}
           >
           </ix-date>
-        </div>
-        <div class="p-2">
           <ix-date
             .value=${this.toDate}
             max=${this.maxDate}
@@ -142,7 +135,7 @@ let DateFilters = class DateFilters extends MobxLitElement {
           ></ix-date>
         </div>
       </div>
-      <div class="flex flex-row justify-between  p-2">
+      <div class="flex flex-row justify-between">
         <ix-button
           type=""
           target=""

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":";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,oBAAoB,CAAC;AAC5C,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/format.js';\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"]}
+{"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 '@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/format.js';\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 [TWStyles, NotificationsStyle];\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-4\">\n      <div class=\"flex flex-row items-center\">\n        <div class=\"grow items-center text-xl font-bold\">Filter by Date</div>\n        <div class=\"flex flex-row items-center\" @click=${this.clearDateFilters}>\n          <label class=\"grow text-sm text-right pr-1 cursor-pointer\"\n            >Clear Filter</label\n          >\n          <ix-icon-button\n            small\n            appearance=\"default\"\n            icon=\"domain_verification_off\"\n            class=\"active-icon\"\n          ></ix-icon-button>\n        </div>\n      </div>\n      <ix-divider class=\"my-2\"></ix-divider>\n      <div\n        class=\"flex xl:flex-row lg:flex-col md:flex-col sm:flex-col justify-between item-center my-4\"\n      >\n        <div class=\"flex gap-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          <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\">\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"]}