@digital-realty/ix-notifications 1.2.16 → 1.2.18

package/dist/src/IxNotifications.js

@@ -193,7 +193,7 @@ export class IxNotifications extends MobxLitElement {
                 : this.renderNoResult()}
         <h3>Earlier</h3>
         ${filterEarlierItems.length > 0
-                ? html `<div class="-mx-4">
+                ? html `<div class="-mx-4" data-testid="earlier-notifications">
               ${filterEarlierItems === null || filterEarlierItems === void 0 ? void 0 : filterEarlierItems.map(item => html `<notification-item
                   ?read=${item.status !== NotificationStatus.UNREAD}
                   data-testclass="earlier-notification"

package/dist/src/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';\nimport { NotificationBulkPatchResult } from './api/notifications-api/index.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    super.disconnectedCallback();\n    this.handleOnbeforeunload();\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  }\n\n  // Handle browser refresh event\n  // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars\n  handleOnbeforeunload() {\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 async confirmedMarkAllRead(\n    e: CustomEvent<ConfirmationDialogEventDetail>\n  ) {\n    // Mark All read if Confirmed True\n    if (e.detail.returnValue) {\n      try {\n        const result = await NotificationsState.setAllNotificationAsRead();\n        this.showResultMessage(\n          {\n            State: ApiCallState.SUCCESS,\n            Message: `Successfully marked ${\n              (result as NotificationBulkPatchResult).updatedCount\n            } notifications as read`,\n          },\n          'all-read'\n        );\n      } catch {\n        this.showResultMessage(\n          {\n            State: ApiCallState.ERROR,\n            Message:\n              'Error while marking the notifications read, Please try again',\n          },\n          'all-read'\n        );\n      }\n      this.requestUpdate();\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            data-testid=\"notification-read-all-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        data-testid=\"planned-maintenance-group\"\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        data-testid=\"emergency-repairs-group\"\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        data-testid=\"service-ticket-updates-group\"\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        data-testid=\"dcim-alerts-group\"\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                  ?read=${item.status !== NotificationStatus.UNREAD}\n                  data-testclass=\"today-notification\"\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                  ?read=${item.status !== NotificationStatus.UNREAD}\n                  data-testclass=\"earlier-notification\"\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 - 2\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 data-testid=\"notifications-tooltip\">\n      </notification-tooltip>\n      <confirmation-dialog\n        data-testid=\"notifications-confirm-read-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        data-testid=\"notifications-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\n              data-testid=\"notifications-heading\"\n              class=\"grow items-center dlr-text-heading\"\n            >\n              Notifications\n            </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                data-testid=\"notifications-cta-all-read\"\n                data-testclass=\"notifications-cta\"\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                data-testid=\"notifications-cta-sort-type\"\n                data-testclass=\"notifications-cta\"\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                data-testid=\"notifications-cta-filter-type\"\n                data-testclass=\"notifications-cta\"\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                data-testid=\"notifications-filter-dropdown\"\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                data-testid=\"notifications-cta-filter-date\"\n                data-testclass=\"notifications-cta\"\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                data-testid=\"notifications-date-filter-dropdown\"\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"]}
+{"version":3,"file":"IxNotifications.js","sourceRoot":"","sources":["../../src/IxNotifications.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,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,oDAAoD,CAAC;AAG5D,MAAM,OAAO,eAAgB,SAAQ,cAAc;IAAnD;;QAWmB,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;IAsdnD,CAAC;IApdC,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,CACrB,gCAAgC,EAChC,IAAI,CAAC,YAAY,CAClB,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IACrE,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,MAAM,CAAC,mBAAmB,CACxB,kBAAkB,EAClB,kBAAkB,CAAC,YAAY,CAChC,CAAC;QACF,MAAM,CAAC,mBAAmB,CACxB,gCAAgC,EAChC,IAAI,CAAC,YAAY,CAClB,CAAC;QACF,MAAM,CAAC,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IACxE,CAAC;IAED,+BAA+B;IAC/B,qFAAqF;IACrF,oBAAoB;QAClB,kBAAkB,CAAC,4BAA4B,EAAE,CAAC;IACpD,CAAC;IAED,YAAY;QACV,kBAAkB,CAAC,UAAU,GAAG,CAAC,kBAAkB,CAAC,UAAU,CAAC;QAC/D,IAAI,CAAC,kBAAkB,CAAC,UAAU,EAAE,CAAC;YACnC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YACzB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,WAAW;QACT,IAAI,kBAAkB,CAAC,uBAAuB,GAAG,CAAC,EAAE,CAAC;YACnD,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;QAC1C,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,oBAAoB,CAChC,CAA6C;QAE7C,kCAAkC;QAClC,IAAI,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;YACzB,IAAI,CAAC;gBACH,MAAM,MAAM,GAAG,MAAM,kBAAkB,CAAC,wBAAwB,EAAE,CAAC;gBACnE,IAAI,CAAC,iBAAiB,CACpB;oBACE,KAAK,EAAE,YAAY,CAAC,OAAO;oBAC3B,OAAO,EAAE,uBACN,MAAsC,CAAC,YAC1C,wBAAwB;iBACzB,EACD,UAAU,CACX,CAAC;YACJ,CAAC;YAAC,WAAM,CAAC;gBACP,IAAI,CAAC,iBAAiB,CACpB;oBACE,KAAK,EAAE,YAAY,CAAC,KAAK;oBACzB,OAAO,EACL,8DAA8D;iBACjE,EACD,UAAU,CACX,CAAC;YACJ,CAAC;YACD,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;QACD,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;;sBAED,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;;;;qBAIM,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;;;;;;sBAMa,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,MAAM,CACzC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,KAAK,kBAAkB,CAAC,SAAS,CAC3D;;;;;;sBAMa,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,MAAM,CACzC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,KAAK,kBAAkB,CAAC,eAAe,CACjE;;;;qBAIY,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,CACb,gBAAgB,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,IAAI,IAAI,EAAE,CAAC,KAAK,CAAC,CACvE,CAAC;QAEF,MAAM,kBAAkB,GAAG,kBAAkB,CAAC,MAAM,CAClD,YAAY,CAAC,EAAE,CACb,gBAAgB,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,IAAI,IAAI,EAAE,CAAC,KAAK,CAAC,CACvE,CAAC;QAEF,IAAI,CAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,MAAO,IAAG,CAAC,EAAE,CAAC;YACpC,OAAO,IAAI,CAAA;;UAEP,gBAAgB,CAAC,MAAM,GAAG,CAAC;gBAC3B,CAAC,CAAC,IAAI,CAAA;gBACA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,GAAG,CACrB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;0BACF,IAAI,CAAC,MAAM,KAAK,kBAAkB,CAAC,MAAM;;kCAEjC,IAAI;8BACR,IAAI,CAAC,YAAY;oBAC7B,kBAAkB,CAAC,SAAS;;sCAER,CACvB;mBACI;gBACT,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE;;UAEvB,kBAAkB,CAAC,MAAM,GAAG,CAAC;gBAC7B,CAAC,CAAC,IAAI,CAAA;gBACA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,GAAG,CACvB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;0BACF,IAAI,CAAC,MAAM,KAAK,kBAAkB,CAAC,MAAM;;kCAEjC,IAAI;8BACR,IAAI,CAAC,YAAY;oBAC7B,kBAAkB,CAAC,SAAS;;sCAER,CACvB;mBACI;gBACT,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE;OAC1B,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC;IAC9B,CAAC;IAED,8BAA8B;IAC9B,cAAc;QACZ,OAAO,IAAI,CAAA;;SAEN,CAAC;IACR,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,GAAG,CAAC,EACvE,CAAC;YACD,kBAAkB,CAAC,gBAAgB,EAAE,CAAC;QACxC,CAAC;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,CAAC;YACD,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QAC3B,CAAC;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,CAAC;YACD,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;gBAKC,IAAI,CAAC,2BAA2B;iCACf,GAAG,EAAE;YAC5B,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;QAC3C,CAAC;gCACuB,IAAI,CAAC,oBAAoB;;;;;;qBAMpC,kBAAkB,CAAC,UAAU;oBAC9B,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;;;6BAGhB,IAAI,CAAC,mBAAmB;iBACpC,IAAI,CAAC,sBAAsB;;;;;;;;;;;;;;;;;;;;yBAoBnB,IAAI,CAAC,WAAW;6BACZ,CAAC,CAAM,EAAE,EAAE;YACtB,gDAAgD;YAChD,IAAI,kBAAkB,CAAC,uBAAuB,GAAG,CAAC,EAAE,CAAC;gBACnD,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,2BAA2B,EAAE;oBAC3C,MAAM,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE;iBACrD,CAAC,CACH,CAAC;YACJ,CAAC;QACH,CAAC;4BACW,GAAG,EAAE,CACf,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,2BAA2B,CAAC,CAC7C;;yBAEM,kBAAkB,CAAC,uBAAuB,IAAI,CAAC;YACtD,CAAC,CAAC,eAAe;YACjB,CAAC,CAAC,aAAa;6BACJ,kBAAkB,CAAC,uBAAuB,IAAI,CAAC;;;;;;yBAMnD,IAAI,CAAC,eAAe;6BAChB,CAAC,CAAM,EAAE,EAAE;YACtB,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,2BAA2B,EAAE;gBAC3C,MAAM,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE;aACpD,CAAC,CACH,CAAC;QACJ,CAAC;4BACW,GAAG,EAAE,CACf,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,2BAA2B,CAAC,CAC7C;;;;;qBAKE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;;;;;;yBAMrC,IAAI,CAAC,cAAc;6BACf,CAAC,CAAM,EAAE,EAAE;YACtB,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,2BAA2B,EAAE;gBAC3C,MAAM,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE;aACtD,CAAC,CACH,CAAC;QACJ,CAAC;4BACW,GAAG,EAAE,CACf,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,2BAA2B,CAAC,CAC7C;;;;;2CAKwB,QAAQ;;;;kDAID,IAAI,CAAC,WAAW;YAChD,CAAC,CAAC,aAAa;YACf,CAAC,CAAC,QAAQ;;;;;;;yBAOH,IAAI,CAAC,kBAAkB;6BACnB,CAAC,CAAM,EAAE,EAAE;YACtB,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,2BAA2B,EAAE;gBAC3C,MAAM,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE;aACtD,CAAC,CACH,CAAC;QACJ,CAAC;4BACW,GAAG,EAAE,CACf,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,2BAA2B,CAAC,CAC7C;;;;;;;;;qDASkC,IAAI,CAAC,eAAe;YACvD,CAAC,CAAC,aAAa;YACf,CAAC,CAAC,QAAQ;gCACI,IAAI,CAAC,gBAAgB;;;;;;YAMzC,IAAI,CAAC,eAAe;YACpB,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC1B,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE;;;KAGjC,CAAC;IACJ,CAAC;;AAzeM,sBAAM,GAAG,CAAC,QAAQ,EAAE,kBAAkB,CAAC,AAAjC,CAAkC;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;AAE5D;IAAhB,KAAK,EAAE;wDAAiC;AAExB;IAAhB,KAAK,EAAE;oDAA6B;AAEpB;IAAhB,KAAK,EAAE;wDAAiC;AAExB;IAAhB,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 } 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';\nimport { NotificationBulkPatchResult } from './api/notifications-api/index.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    super.disconnectedCallback();\n    this.handleOnbeforeunload();\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  }\n\n  // Handle browser refresh event\n  // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars\n  handleOnbeforeunload() {\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 async confirmedMarkAllRead(\n    e: CustomEvent<ConfirmationDialogEventDetail>\n  ) {\n    // Mark All read if Confirmed True\n    if (e.detail.returnValue) {\n      try {\n        const result = await NotificationsState.setAllNotificationAsRead();\n        this.showResultMessage(\n          {\n            State: ApiCallState.SUCCESS,\n            Message: `Successfully marked ${\n              (result as NotificationBulkPatchResult).updatedCount\n            } notifications as read`,\n          },\n          'all-read'\n        );\n      } catch {\n        this.showResultMessage(\n          {\n            State: ApiCallState.ERROR,\n            Message:\n              'Error while marking the notifications read, Please try again',\n          },\n          'all-read'\n        );\n      }\n      this.requestUpdate();\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            data-testid=\"notification-read-all-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        data-testid=\"planned-maintenance-group\"\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        data-testid=\"emergency-repairs-group\"\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        data-testid=\"service-ticket-updates-group\"\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        data-testid=\"dcim-alerts-group\"\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                  ?read=${item.status !== NotificationStatus.UNREAD}\n                  data-testclass=\"today-notification\"\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\" data-testid=\"earlier-notifications\">\n              ${filterEarlierItems?.map(\n                item => html`<notification-item\n                  ?read=${item.status !== NotificationStatus.UNREAD}\n                  data-testclass=\"earlier-notification\"\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 - 2\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 data-testid=\"notifications-tooltip\">\n      </notification-tooltip>\n      <confirmation-dialog\n        data-testid=\"notifications-confirm-read-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        data-testid=\"notifications-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\n              data-testid=\"notifications-heading\"\n              class=\"grow items-center dlr-text-heading\"\n            >\n              Notifications\n            </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                data-testid=\"notifications-cta-all-read\"\n                data-testclass=\"notifications-cta\"\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                data-testid=\"notifications-cta-sort-type\"\n                data-testclass=\"notifications-cta\"\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                data-testid=\"notifications-cta-filter-type\"\n                data-testclass=\"notifications-cta\"\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                data-testid=\"notifications-filter-dropdown\"\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                data-testid=\"notifications-cta-filter-date\"\n                data-testclass=\"notifications-cta\"\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                data-testid=\"notifications-date-filter-dropdown\"\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/src/components/notifications/grouped-item.js

@@ -31,11 +31,15 @@ let GroupedItem = class GroupedItem extends MobxLitElement {
           ${(_c = this.childItems) === null || _c === void 0 ? void 0 : _c.map(item => html `<notification-item
               .notification=${item}
               ?disabled=${item.resourceType === NotificationGroups.INCIDENTS}
+              data-testclass="notification-item"
             >
             </notification-item>`)}
         </div>`;
             }
-            return html `<p class="dlr-text-caption ml-14 font-bold mr-4">
+            return html `<p
+        class="dlr-text-caption ml-14 font-bold mr-4"
+        data-testid="msg-no-notifications"
+      >
         No notifications yet.
       </p>`;
         }

package/dist/src/components/notifications/grouped-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"grouped-item.js","sourceRoot":"","sources":["../../../../src/components/notifications/grouped-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,kDAAkD,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAEtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAG/D,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,cAAc;IAAxC;;QACwC,eAAU,GAAG,SAAS,CAAC;QAEvB,cAAS,GAAG,QAAQ,CAAC;QAEtB,eAAU,GACpD,kBAAkB,CAAC,aAAa,CAAC;QAElB,WAAM,GAAG,KAAK,CAAC;QAEhC,YAAO,GAAG,GAAG,EAAE;YACb,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC,CAAC;IAoDJ,CAAC;IAlDC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;IACxC,CAAC;IAED,uBAAuB;;QACrB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IACE,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,MAAK,SAAS;gBACrC,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,IAAG,CAAC,EAC3B,CAAC;gBACD,OAAO,IAAI,CAAA;YACP,MAAA,IAAI,CAAC,UAAU,0CAAE,GAAG,CACpB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;8BACM,IAAI;0BACR,IAAI,CAAC,YAAY,KAAK,kBAAkB,CAAC,SAAS;;iCAE3C,CACtB;eACI,CAAC;YACV,CAAC;YACD,OAAO,IAAI,CAAA;;WAEN,CAAC;QACR,CAAC;QAED,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;;QACJ,OAAO,IAAI,CAAA;;;;mBAII,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,aAAa;sBAC5C,IAAI,CAAC,OAAO;;;;;eAKnB,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;;qDAEa,IAAI,CAAC,UAAU;;cAEtD,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;;;;QAIzD,IAAI,CAAC,uBAAuB,EAAE;WAC3B,CAAC;IACV,CAAC;CACF,CAAA;AA/D8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;+CAAwB;AAEvB;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;8CAAsB;AAEtB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;+CACR;AAElB;IAAhB,KAAK,EAAE;2CAAwB;AARrB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAgEvB","sourcesContent":["import { html, nothing } from 'lit';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { Notification } from '../../models/notification.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport { NotificationGroups } from '../../constants/notifications.js';\n\n@customElement('grouped-item')\nexport class GroupedItem extends MobxLitElement {\n  @property({ type: String, attribute: true }) groupTitle = 'Group 1';\n\n  @property({ type: String, attribute: true }) groupIcon = 'public';\n\n  @property({ type: Array, attribute: true }) childItems?: Notification[] =\n    NotificationsState.notifications;\n\n  @state() private isOpen = false;\n\n  onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  static get styles() {\n    return [TWStyles, NotificationsStyle];\n  }\n\n  renderNotificationItems() {\n    if (this.isOpen) {\n      if (\n        this.childItems?.length !== undefined &&\n        this.childItems?.length > 0\n      ) {\n        return html`<div>\n          ${this.childItems?.map(\n            item => html`<notification-item\n              .notification=${item}\n              ?disabled=${item.resourceType === NotificationGroups.INCIDENTS}\n            >\n            </notification-item>`\n          )}\n        </div>`;\n      }\n      return html`<p class=\"dlr-text-caption ml-14 font-bold mr-4\">\n        No notifications yet.\n      </p>`;\n    }\n\n    return html`${nothing}`;\n  }\n\n  render() {\n    return html`<div class=\"group-container-row border-b border-outline py-3\">\n      <div class=\"flex items-center justify-between\">\n        <div class=\"flex items-center align-middle\">\n          <ix-icon-button\n            icon=${this.isOpen ? 'arrow_drop_down' : 'arrow_right'}\n            @click=\"${this.onClick}\"\n            data-testclass=\"grouped-item-toggle-expand\"\n          >\n          </ix-icon-button>\n          <ix-icon slot=\"default\" class=\"ix-icon-groups\"\n            >${unsafeSVG(this.groupIcon)}</ix-icon\n          >\n          <p class=\"m-0 group-name font-bold pl-1\">${this.groupTitle}</p>\n          <p class=\"m-0 pl-4\">\n            ${this.childItems?.length.toString().padStart(2, '0')}\n          </p>\n        </div>\n      </div>\n      ${this.renderNotificationItems()}\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"grouped-item.js","sourceRoot":"","sources":["../../../../src/components/notifications/grouped-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,kDAAkD,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAEtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAG/D,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,cAAc;IAAxC;;QACwC,eAAU,GAAG,SAAS,CAAC;QAEvB,cAAS,GAAG,QAAQ,CAAC;QAEtB,eAAU,GACpD,kBAAkB,CAAC,aAAa,CAAC;QAElB,WAAM,GAAG,KAAK,CAAC;QAEhC,YAAO,GAAG,GAAG,EAAE;YACb,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC,CAAC;IAwDJ,CAAC;IAtDC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;IACxC,CAAC;IAED,uBAAuB;;QACrB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IACE,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,MAAK,SAAS;gBACrC,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,IAAG,CAAC,EAC3B,CAAC;gBACD,OAAO,IAAI,CAAA;YACP,MAAA,IAAI,CAAC,UAAU,0CAAE,GAAG,CACpB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;8BACM,IAAI;0BACR,IAAI,CAAC,YAAY,KAAK,kBAAkB,CAAC,SAAS;;;iCAG3C,CACtB;eACI,CAAC;YACV,CAAC;YACD,OAAO,IAAI,CAAA;;;;;WAKN,CAAC;QACR,CAAC;QAED,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;;QACJ,OAAO,IAAI,CAAA;;;;mBAII,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,aAAa;sBAC5C,IAAI,CAAC,OAAO;;;;;eAKnB,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;;qDAEa,IAAI,CAAC,UAAU;;cAEtD,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;;;;QAIzD,IAAI,CAAC,uBAAuB,EAAE;WAC3B,CAAC;IACV,CAAC;CACF,CAAA;AAnE8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;+CAAwB;AAEvB;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;8CAAsB;AAEtB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;+CACR;AAElB;IAAhB,KAAK,EAAE;2CAAwB;AARrB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAoEvB","sourcesContent":["import { html, nothing } from 'lit';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { Notification } from '../../models/notification.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport { NotificationGroups } from '../../constants/notifications.js';\n\n@customElement('grouped-item')\nexport class GroupedItem extends MobxLitElement {\n  @property({ type: String, attribute: true }) groupTitle = 'Group 1';\n\n  @property({ type: String, attribute: true }) groupIcon = 'public';\n\n  @property({ type: Array, attribute: true }) childItems?: Notification[] =\n    NotificationsState.notifications;\n\n  @state() private isOpen = false;\n\n  onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  static get styles() {\n    return [TWStyles, NotificationsStyle];\n  }\n\n  renderNotificationItems() {\n    if (this.isOpen) {\n      if (\n        this.childItems?.length !== undefined &&\n        this.childItems?.length > 0\n      ) {\n        return html`<div>\n          ${this.childItems?.map(\n            item => html`<notification-item\n              .notification=${item}\n              ?disabled=${item.resourceType === NotificationGroups.INCIDENTS}\n              data-testclass=\"notification-item\"\n            >\n            </notification-item>`\n          )}\n        </div>`;\n      }\n      return html`<p\n        class=\"dlr-text-caption ml-14 font-bold mr-4\"\n        data-testid=\"msg-no-notifications\"\n      >\n        No notifications yet.\n      </p>`;\n    }\n\n    return html`${nothing}`;\n  }\n\n  render() {\n    return html`<div class=\"group-container-row border-b border-outline py-3\">\n      <div class=\"flex items-center justify-between\">\n        <div class=\"flex items-center align-middle\">\n          <ix-icon-button\n            icon=${this.isOpen ? 'arrow_drop_down' : 'arrow_right'}\n            @click=\"${this.onClick}\"\n            data-testclass=\"grouped-item-toggle-expand\"\n          >\n          </ix-icon-button>\n          <ix-icon slot=\"default\" class=\"ix-icon-groups\"\n            >${unsafeSVG(this.groupIcon)}</ix-icon\n          >\n          <p class=\"m-0 group-name font-bold pl-1\">${this.groupTitle}</p>\n          <p class=\"m-0 pl-4\">\n            ${this.childItems?.length.toString().padStart(2, '0')}\n          </p>\n        </div>\n      </div>\n      ${this.renderNotificationItems()}\n    </div>`;\n  }\n}\n"]}

package/dist/src/components/notifications/view-item-dialog.js

@@ -102,6 +102,7 @@ let ViewItemDialog = class ViewItemDialog extends MobxLitElement {
           </div>
           <div
             class="notification-modal-subtitle pt-4 pb-0 font-bold text-balance"
+            data-testid="notification-view-item-ticket-type"
           >
             ${this.getSubGroupDisplayName()}
           </div>
@@ -118,7 +119,10 @@ let ViewItemDialog = class ViewItemDialog extends MobxLitElement {
         >
           Subject
         </div>
-        <div class="notification-modal-subject-text font-normal text-wrap">
+        <div
+          class="notification-modal-subject-text font-normal text-wrap"
+          data-testid="notification-view-item-subject"
+        >
           ${this.notification.subject}
         </div>
         <div
@@ -126,7 +130,10 @@ let ViewItemDialog = class ViewItemDialog extends MobxLitElement {
         >
           Create Date
         </div>
-        <div class="notification-modal-created-date-text font-normal text-wrap">
+        <div
+          class="notification-modal-created-date-text font-normal text-wrap"
+          data-testid="notification-view-item-date"
+        >
           ${format(new Date(this.notification.createdAt), 'dd/MM/yyyy HH:mm:ss')}
         </div>
         <div
@@ -134,20 +141,23 @@ let ViewItemDialog = class ViewItemDialog extends MobxLitElement {
         >
           Site
         </div>
-        <div class="notification-modal-site-text font-normal text-wrap">
+        <div
+          class="notification-modal-site-text font-normal text-wrap"
+          data-testid="notification-view-item-site-text"
+        >
           ${this.getLocation()}
         </div>
       </form>
       <div slot="actions" class="flex flex-row flex-end">
         <ix-button
-          data-testclass="close-item-modal"
+          data-testid="notification-view-item-close"
           form="form-id"
           appearance="text"
         >
           Close
         </ix-button>
         <ix-button
-          data-testclass="view-record"
+          data-testid="notification-view-item-view-record"
           href="${this.getUrl()}"
           @click="${this.viewRecord}"
           appearance="text"

package/dist/src/components/notifications/view-item-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"view-item-dialog.js","sourceRoot":"","sources":["../../../../src/components/notifications/view-item-dialog.ts"],"names":[],"mappings":"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","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 '@digital-realty/ix-button/ix-button.js';\nimport { format } from 'date-fns/format.js';\nimport { TWStyles } from '../../tw.js';\nimport { Notification } from '../../models/notification.js';\nimport {\n  NotificationGroups,\n  SubGroups,\n} from '../../constants/notifications.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\n\n@customElement('view-item-dialog')\nexport class ViewItemDialog extends MobxLitElement {\n  static get styles() {\n    return [TWStyles, NotificationsStyle];\n  }\n\n  @property({ type: Object, attribute: false }) notification =\n    {} as Notification;\n\n  @property({ type: Boolean, attribute: true }) open = false;\n\n  getUrl(): string {\n    const ticketId = this.notification.resourceId;\n\n    switch (this.notification.resourceType) {\n      case NotificationGroups.PLANNED_MAINTENANCE:\n        return `/service-management/reports?ticketId=${ticketId}`;\n      case NotificationGroups.SERVICE_TICKETS:\n        switch (this.notification.subGroup) {\n          case SubGroups.Remote_Hands:\n            return `/service-management/service-tickets/remote-hands/${ticketId}`;\n          case SubGroups.Customer_Care:\n            return `/service-management/service-tickets/customer-care/${ticketId}`;\n          case SubGroups.Deliveries:\n            return `/service-management/service-tickets/${SubGroups.Deliveries}/${ticketId}`;\n          case SubGroups.Facility_Access:\n            return `/service-management/service-tickets/facility-access/${ticketId}`;\n          case SubGroups.Removals:\n            return `/service-management/service-tickets/removals/${ticketId}`;\n          case SubGroups.Trouble_Ticket:\n            return `/service-management/service-tickets/trouble-tickets/${ticketId}`;\n          case SubGroups.FacilityAccessVisitorAccess:\n            return `/service-management/service-tickets/facility-access/visitor-access/${ticketId}`;\n          case SubGroups.FacilityAccessPermanentBadge:\n            return `/service-management/service-tickets/facility-access/permanent-badge/${ticketId}`;\n          case SubGroups.FacilityAccessOspAccess:\n            return `/service-management/service-tickets/facility-access/osp-access/${ticketId}`;\n          case SubGroups.FacilityAccessPopPoeAccess:\n            return `/service-management/service-tickets/facility-access/pop-poe-access/${ticketId}`;\n          default:\n            return '';\n        }\n      case NotificationGroups.INCIDENTS:\n        return `/service-management/reports?ticketId=${ticketId}`;\n      case NotificationGroups.DCIM_ALERTS:\n        return `/dcim/${ticketId}`;\n      default:\n        return '';\n    }\n  }\n\n  getLocation() {\n    if (\n      this.notification.locations === undefined ||\n      this.notification.locations.length < 1\n    ) {\n      return '';\n    }\n    if (this.notification.locations.length > 1) {\n      return 'Multiple Sites';\n    }\n    return this.notification.locations[0];\n  }\n\n  dialogClosed = () => {\n    this.dispatchEvent(new CustomEvent('view-item-dialog-closed'));\n  };\n\n  viewRecord = () => {\n    this.dialogClosed();\n    NotificationsState.showDrawer = false;\n  };\n\n  getSubGroupDisplayName() {\n    switch (this.notification.subGroup) {\n      case SubGroups.FacilityAccessVisitorAccess:\n      case SubGroups.FacilityAccessPermanentBadge:\n      case SubGroups.FacilityAccessOspAccess:\n      case SubGroups.FacilityAccessPopPoeAccess:\n        return 'Facility Access';\n      case 'Incidents (GSN)':\n        return 'Incidents';\n      case 'Emergency Repairs (InSite 1.0)':\n        return 'Emergency Repairs';\n      default:\n        return this.notification.subGroup;\n    }\n  }\n\n  render() {\n    return html` <ix-dialog\n      ?open=${this.open}\n      @closed=${this.dialogClosed}\n      class=\"notification-modal\"\n      data-testclass=\"notification-modal\"\n    >\n      <div slot=\"headline\" class=\"w-[560px]\">\n        <div class=\"flex flex-col flex-start\">\n          <div class=\"notification-modal-title text-2xl font-bold text-balance\">\n            ${this.notification.resourceType}\n          </div>\n          <div\n            class=\"notification-modal-subtitle pt-4 pb-0 font-bold text-balance\"\n          >\n            ${this.getSubGroupDisplayName()}\n          </div>\n        </div>\n      </div>\n      <form\n        class=\"notification-modal-content\"\n        slot=\"content\"\n        id=\"form-id\"\n        method=\"dialog\"\n      >\n        <div\n          class=\"notification-modal-content-title notification-modal-subject-title\"\n        >\n          Subject\n        </div>\n        <div class=\"notification-modal-subject-text font-normal text-wrap\">\n          ${this.notification.subject}\n        </div>\n        <div\n          class=\"notification-modal-content-title notification-modal-created-date-title\"\n        >\n          Create Date\n        </div>\n        <div class=\"notification-modal-created-date-text font-normal text-wrap\">\n          ${format(\n            new Date(this.notification.createdAt),\n            'dd/MM/yyyy HH:mm:ss'\n          )}\n        </div>\n        <div\n          class=\"notification-modal-content-title notification-modal-site-title\"\n        >\n          Site\n        </div>\n        <div class=\"notification-modal-site-text font-normal text-wrap\">\n          ${this.getLocation()}\n        </div>\n      </form>\n      <div slot=\"actions\" class=\"flex flex-row flex-end\">\n        <ix-button\n          data-testclass=\"close-item-modal\"\n          form=\"form-id\"\n          appearance=\"text\"\n        >\n          Close\n        </ix-button>\n        <ix-button\n          data-testclass=\"view-record\"\n          href=\"${this.getUrl()}\"\n          @click=\"${this.viewRecord}\"\n          appearance=\"text\"\n          >View Record</ix-button\n        >\n      </div>\n    </ix-dialog>`;\n  }\n}\n"]}
+{"version":3,"file":"view-item-dialog.js","sourceRoot":"","sources":["../../../../src/components/notifications/view-item-dialog.ts"],"names":[],"mappings":"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","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 '@digital-realty/ix-button/ix-button.js';\nimport { format } from 'date-fns/format.js';\nimport { TWStyles } from '../../tw.js';\nimport { Notification } from '../../models/notification.js';\nimport {\n  NotificationGroups,\n  SubGroups,\n} from '../../constants/notifications.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\n\n@customElement('view-item-dialog')\nexport class ViewItemDialog extends MobxLitElement {\n  static get styles() {\n    return [TWStyles, NotificationsStyle];\n  }\n\n  @property({ type: Object, attribute: false }) notification =\n    {} as Notification;\n\n  @property({ type: Boolean, attribute: true }) open = false;\n\n  getUrl(): string {\n    const ticketId = this.notification.resourceId;\n\n    switch (this.notification.resourceType) {\n      case NotificationGroups.PLANNED_MAINTENANCE:\n        return `/service-management/reports?ticketId=${ticketId}`;\n      case NotificationGroups.SERVICE_TICKETS:\n        switch (this.notification.subGroup) {\n          case SubGroups.Remote_Hands:\n            return `/service-management/service-tickets/remote-hands/${ticketId}`;\n          case SubGroups.Customer_Care:\n            return `/service-management/service-tickets/customer-care/${ticketId}`;\n          case SubGroups.Deliveries:\n            return `/service-management/service-tickets/${SubGroups.Deliveries}/${ticketId}`;\n          case SubGroups.Facility_Access:\n            return `/service-management/service-tickets/facility-access/${ticketId}`;\n          case SubGroups.Removals:\n            return `/service-management/service-tickets/removals/${ticketId}`;\n          case SubGroups.Trouble_Ticket:\n            return `/service-management/service-tickets/trouble-tickets/${ticketId}`;\n          case SubGroups.FacilityAccessVisitorAccess:\n            return `/service-management/service-tickets/facility-access/visitor-access/${ticketId}`;\n          case SubGroups.FacilityAccessPermanentBadge:\n            return `/service-management/service-tickets/facility-access/permanent-badge/${ticketId}`;\n          case SubGroups.FacilityAccessOspAccess:\n            return `/service-management/service-tickets/facility-access/osp-access/${ticketId}`;\n          case SubGroups.FacilityAccessPopPoeAccess:\n            return `/service-management/service-tickets/facility-access/pop-poe-access/${ticketId}`;\n          default:\n            return '';\n        }\n      case NotificationGroups.INCIDENTS:\n        return `/service-management/reports?ticketId=${ticketId}`;\n      case NotificationGroups.DCIM_ALERTS:\n        return `/dcim/${ticketId}`;\n      default:\n        return '';\n    }\n  }\n\n  getLocation() {\n    if (\n      this.notification.locations === undefined ||\n      this.notification.locations.length < 1\n    ) {\n      return '';\n    }\n    if (this.notification.locations.length > 1) {\n      return 'Multiple Sites';\n    }\n    return this.notification.locations[0];\n  }\n\n  dialogClosed = () => {\n    this.dispatchEvent(new CustomEvent('view-item-dialog-closed'));\n  };\n\n  viewRecord = () => {\n    this.dialogClosed();\n    NotificationsState.showDrawer = false;\n  };\n\n  getSubGroupDisplayName() {\n    switch (this.notification.subGroup) {\n      case SubGroups.FacilityAccessVisitorAccess:\n      case SubGroups.FacilityAccessPermanentBadge:\n      case SubGroups.FacilityAccessOspAccess:\n      case SubGroups.FacilityAccessPopPoeAccess:\n        return 'Facility Access';\n      case 'Incidents (GSN)':\n        return 'Incidents';\n      case 'Emergency Repairs (InSite 1.0)':\n        return 'Emergency Repairs';\n      default:\n        return this.notification.subGroup;\n    }\n  }\n\n  render() {\n    return html` <ix-dialog\n      ?open=${this.open}\n      @closed=${this.dialogClosed}\n      class=\"notification-modal\"\n      data-testclass=\"notification-modal\"\n    >\n      <div slot=\"headline\" class=\"w-[560px]\">\n        <div class=\"flex flex-col flex-start\">\n          <div class=\"notification-modal-title text-2xl font-bold text-balance\">\n            ${this.notification.resourceType}\n          </div>\n          <div\n            class=\"notification-modal-subtitle pt-4 pb-0 font-bold text-balance\"\n            data-testid=\"notification-view-item-ticket-type\"\n          >\n            ${this.getSubGroupDisplayName()}\n          </div>\n        </div>\n      </div>\n      <form\n        class=\"notification-modal-content\"\n        slot=\"content\"\n        id=\"form-id\"\n        method=\"dialog\"\n      >\n        <div\n          class=\"notification-modal-content-title notification-modal-subject-title\"\n        >\n          Subject\n        </div>\n        <div\n          class=\"notification-modal-subject-text font-normal text-wrap\"\n          data-testid=\"notification-view-item-subject\"\n        >\n          ${this.notification.subject}\n        </div>\n        <div\n          class=\"notification-modal-content-title notification-modal-created-date-title\"\n        >\n          Create Date\n        </div>\n        <div\n          class=\"notification-modal-created-date-text font-normal text-wrap\"\n          data-testid=\"notification-view-item-date\"\n        >\n          ${format(\n            new Date(this.notification.createdAt),\n            'dd/MM/yyyy HH:mm:ss'\n          )}\n        </div>\n        <div\n          class=\"notification-modal-content-title notification-modal-site-title\"\n        >\n          Site\n        </div>\n        <div\n          class=\"notification-modal-site-text font-normal text-wrap\"\n          data-testid=\"notification-view-item-site-text\"\n        >\n          ${this.getLocation()}\n        </div>\n      </form>\n      <div slot=\"actions\" class=\"flex flex-row flex-end\">\n        <ix-button\n          data-testid=\"notification-view-item-close\"\n          form=\"form-id\"\n          appearance=\"text\"\n        >\n          Close\n        </ix-button>\n        <ix-button\n          data-testid=\"notification-view-item-view-record\"\n          href=\"${this.getUrl()}\"\n          @click=\"${this.viewRecord}\"\n          appearance=\"text\"\n          >View Record</ix-button\n        >\n      </div>\n    </ix-dialog>`;\n  }\n}\n"]}

package/dist/src/ix-notifications.min.js

@@ -1 +1 @@
-import{__decorate}from"tslib";import{svg,css,html,nothing}from"lit";import{property,customElement,state,query}from"lit/decorators.js";import{MobxLitElement}from"@adobe/lit-mobx";import{differenceInDays}from"date-fns/differenceInDays.js";import{differenceInHours}from"date-fns/differenceInHours.js";import"@digital-realty/ix-button/ix-button.js";import"@digital-realty/ix-drawer/ix-drawer.js";import"@digital-realty/ix-icon";import"@material/web/icon/icon.js";import{makeAutoObservable}from"mobx";import{makePersistable,isHydrated,hydrateStore,clearPersistedStore,getPersistedStore}from"mobx-persist-store";import{parse}from"date-fns/parse.js";import{subDays}from"date-fns/subDays.js";import{format}from"date-fns/format.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-icon/ix-icon.js";import{formatDistance}from"date-fns/formatDistance.js";import"@digital-realty/ix-toast/ix-message-toast.js";import{unsafeSVG}from"lit/directives/unsafe-svg.js";import"@digital-realty/ix-switch/ix-switch.js";import"@digital-realty/ix-date/ix-date.js";import"@digital-realty/ix-divider/ix-divider.js";import{computePosition}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";let viewList=svg`<svg viewBox="0 0 24 24"><path d="M3 9H7V5H3V9ZM7 14H3V10H7V14ZM7 19H3V15H7V19ZM20 14H8V10H20V14ZM8 19H20V15H8V19ZM8 9V5H20V9H8Z"/></svg>`,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>`,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>`,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>`,sortCheck=(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>`,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:#fff"/></svg>`),TWStyles=css`*,::after,::before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.dlr-text-default,:host,:host :root,:root,html{font-family:var(--root-primary-font);font-size:var(--text-default-size);line-height:var(--text-default-line-height);letter-spacing:var(--text-default-letter-spacing);font-weight:var(--text-default-weight);-webkit-text-decoration:var(--text-default-decoration);text-decoration:var(--text-default-decoration);text-transform:var(--text-default-transform)}.dlr-text-heading{font-family:var(--root-secondary-font);font-size:var(--text-heading-size);line-height:var(--text-heading-line-height);letter-spacing:var(--text-heading-letter-spacing);font-weight:var(--text-heading-weight);-webkit-text-decoration:var(--text-heading-decoration);text-decoration:var(--text-heading-decoration);text-transform:var(--text-heading-transform)}.dlr-text-caption{font-family:var(--root-primary-font);font-size:var(--text-caption-size);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing);font-weight:var(--text-caption-weight);-webkit-text-decoration:var(--text-caption-decoration);text-decoration:var(--text-caption-decoration);text-transform:var(--text-caption-transform)}.static{position:static}.absolute{position:absolute}.relative{position:relative}.-start-0{inset-inline-start:0}.z-50{z-index:50}.z-\\[9999\\]{z-index:9999}.m-0{margin:0}.m-4{margin:1rem}.-mx-4{margin-left:-1rem;margin-right:-1rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-4{margin-top:1rem;margin-bottom:1rem}.-mt-2{margin-top:-.5rem}.mb-4{margin-bottom:1rem}.ml-14{margin-left:3.5rem}.mr-4{margin-right:1rem}.flex{display:flex}.hidden{display:none}.w-\\[560px\\]{width:560px}.w-\\[580px\\]{width:580px}.grow{flex-grow:1}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.whitespace-nowrap{white-space:nowrap}.text-wrap{text-wrap:wrap}.text-balance{text-wrap:balance}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.border-b{border-bottom-width:1px}.border-l-3{border-left-width:3px}.border-outline{border-color:var(--cp-neutral-blue-12p)}.border-success{border-color:var(--cp-success-50)}.border-transparent{border-color:transparent}.fill-primary{fill:var(--cp-dlr-blue-50)}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pb-0{padding-bottom:0}.pl-1{padding-left:.25rem}.pl-3\\.5{padding-left:.875rem}.pl-4{padding-left:1rem}.pr-1{padding-right:.25rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-normal{font-weight:400}.text-on-surface-disabled{color:var(--cp-neutral-blue-50p)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity,1))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}.hover\\:bg-\\[rgba\\(0\\2c 0\\2c 0\\2c 0\\.04\\)\\]:hover{background-color:rgba(0,0,0,.04)}.hover\\:bg-primary-subtle:hover{background-color:var(--cp-dlr-blue-10p)}@media (min-width:600px){.sm\\:flex-col{flex-direction:column}.md\\:flex-col{flex-direction:column}}@media (min-width:1200px){.lg\\:flex-col{flex-direction:column}.xl\\:flex-row{flex-direction:row}}`;var NotificationStatus,NotificationGroups,SubGroups,ApiCallState;(t=>{t.READ="read",t.UNREAD="unread"})(NotificationStatus=NotificationStatus||{}),(t=>{t.PLANNED_MAINTENANCE="Planned Maintenance",t.INCIDENTS="Incidents",t.DCIM_ALERTS="DCIM Alerts",t.SERVICE_TICKETS="Service Tickets"})(NotificationGroups=NotificationGroups||{}),(t=>{t.Remote_Hands="Remote Hands",t.Deliveries="Deliveries",t.Removals="Removals",t.Facility_Access="Facility Access",t.Trouble_Ticket="Trouble Ticket",t.Customer_Care="Customer Care",t.FacilityAccessVisitorAccess="FacilityAccessVisitorAccess",t.FacilityAccessPermanentBadge="FacilityAccessPermanentBadge",t.FacilityAccessOspAccess="FacilityAccessOspAccess",t.FacilityAccessPopPoeAccess="FacilityAccessPopPoeAccess"})(SubGroups=SubGroups||{}),(t=>{t.LOADING="Loading",t.ERROR="Error",t.SUCCESS="Success"})(ApiCallState=ApiCallState||{});let DefaultDateFormat="yyyy-MM-dd",DefaultDisplayDays=30,DefaultDateTimeFormat="yyyy-MM-dd HH:mm:ss",BASE_PATH="http://api.digitalrealty.com/notifications".replace(/\/+$/,"");class Configuration{constructor(t={}){this.configuration=t}set config(t){this.configuration=t}get basePath(){return null!=this.configuration.basePath?this.configuration.basePath:BASE_PATH}get fetchApi(){return this.configuration.fetchApi}get middleware(){return this.configuration.middleware||[]}get queryParamsStringify(){return this.configuration.queryParamsStringify||querystring}get username(){return this.configuration.username}get password(){return this.configuration.password}get apiKey(){let t=this.configuration.apiKey;if(t)return"function"==typeof t?t:()=>t}get accessToken(){let t=this.configuration.accessToken;if(t)return"function"==typeof t?t:async()=>t}get headers(){return this.configuration.headers}get credentials(){return this.configuration.credentials}}let DefaultConfig=new Configuration;class BaseAPI{constructor(t=DefaultConfig){this.configuration=t,this.fetchApi=async(t,i)=>{let e={url:t,init:i};for(var o of this.middleware)o.pre&&(e=await o.pre({fetch:this.fetchApi,...e})||e);let a=void 0;try{a=await(this.configuration.fetchApi||fetch)(e.url,e.init)}catch(t){for(var r of this.middleware)r.onError&&(a=await r.onError({fetch:this.fetchApi,url:e.url,init:e.init,error:t,response:a?a.clone():void 0})||a);if(void 0===a)throw t instanceof Error?new FetchError(t,"The request failed and the interceptors did not return an alternative response"):t}for(var n of this.middleware)n.post&&(a=await n.post({fetch:this.fetchApi,url:e.url,init:e.init,response:a.clone()})||a);return a},this.middleware=t.middleware}withMiddleware(...t){var i=this.clone();return i.middleware=i.middleware.concat(...t),i}withPreMiddleware(...t){t=t.map(t=>({pre:t}));return this.withMiddleware(...t)}withPostMiddleware(...t){t=t.map(t=>({post:t}));return this.withMiddleware(...t)}isJsonMime(t){return!!t&&BaseAPI.jsonRegex.test(t)}async request(t,i){var{url:t,init:i}=await this.createFetchParams(t,i),t=await this.fetchApi(t,i);if(t&&200<=t.status&&t.status<300)return t;throw new ResponseError(t,"Response returned an error code")}async createFetchParams(t,i){let e=this.configuration.basePath+t.path,o=(void 0!==t.query&&0!==Object.keys(t.query).length&&(e+="?"+this.configuration.queryParamsStringify(t.query)),Object.assign({},this.configuration.headers,t.headers));Object.keys(o).forEach(t=>void 0===o[t]?delete o[t]:{});var a="function"==typeof i?i:async()=>i,r={method:t.method,headers:o,body:t.body,credentials:this.configuration.credentials},a={...r,...await a({init:r,context:t})};let n;n=!(isFormData(a.body)||a.body instanceof URLSearchParams||isBlob(a.body))&&this.isJsonMime(o["Content-Type"])?JSON.stringify(a.body):a.body;r={...a,body:n};return{url:e,init:r}}clone(){var t=new this.constructor(this.configuration);return t.middleware=this.middleware.slice(),t}}function isBlob(t){return"undefined"!=typeof Blob&&t instanceof Blob}function isFormData(t){return"undefined"!=typeof FormData&&t instanceof FormData}BaseAPI.jsonRegex=new RegExp("^(:?application/json|[^;/ \t]+/[^;/ \t]+[+]json)[ \t]*(:?;.*)?$","i");class ResponseError extends Error{constructor(t,i){super(i),this.response=t,this.name="ResponseError"}}class FetchError extends Error{constructor(t,i){super(i),this.cause=t,this.name="FetchError"}}class RequiredError extends Error{constructor(t,i){super(i),this.field=t,this.name="RequiredError"}}let COLLECTION_FORMATS={csv:","};function exists(t,i){t=t[i];return null!=t}function querystring(i,e=""){return Object.keys(i).map(t=>querystringSingleKey(t,i[t],e)).filter(t=>0<t.length).join("&")}function querystringSingleKey(t,i,e=""){var o,a=e+(e.length?`[${t}]`:t);return i instanceof Array?(o=i.map(t=>encodeURIComponent(String(t))).join(`&${encodeURIComponent(a)}=`),encodeURIComponent(a)+"="+o):i instanceof Set?querystringSingleKey(t,Array.from(i),e):i instanceof Date?encodeURIComponent(a)+"="+encodeURIComponent(i.toISOString()):i instanceof Object?querystring(i,a):encodeURIComponent(a)+"="+encodeURIComponent(String(i))}class JSONApiResponse{constructor(t,i=t=>t){this.raw=t,this.transformer=i}async value(){return this.transformer(await this.raw.json())}}function StatusFromJSON(t){return StatusFromJSONTyped(t)}function StatusFromJSONTyped(t,i){return t}function StatusToJSON(t){return t}function NotificationFromJSON(t){return NotificationFromJSONTyped(t)}function NotificationFromJSONTyped(t,i){return null==t?t:{id:exists(t,"id")?t.id:void 0,resourceType:exists(t,"resource_type")?t.resource_type:void 0,subGroup:exists(t,"sub_group")?t.sub_group:void 0,createdAt:exists(t,"created_at")?null===t.created_at?null:new Date(t.created_at):void 0,createdBy:exists(t,"created_by")?t.created_by:void 0,subject:exists(t,"subject")?t.subject:void 0,locations:exists(t,"locations")?t.locations:void 0,resourceId:exists(t,"resource_id")?t.resource_id:void 0,status:exists(t,"status")?StatusFromJSON(t.status):void 0,accountNumber:exists(t,"account_number")?t.account_number:void 0}}function GetNotifications200ResponseFromJSON(t){return GetNotifications200ResponseFromJSONTyped(t)}function GetNotifications200ResponseFromJSONTyped(t,i){return null==t?t:{self:exists(t,"self")?t.self:void 0,first:exists(t,"first")?t.first:void 0,prev:exists(t,"prev")?t.prev:void 0,next:exists(t,"next")?t.next:void 0,last:exists(t,"last")?t.last:void 0,items:t.items.map(NotificationFromJSON)}}function NotificationBulkPatchToJSON(t){if(void 0!==t)return null===t?null:{status:StatusToJSON(t.status)}}function NotificationBulkPatchResultFromJSON(t){return NotificationBulkPatchResultFromJSONTyped(t)}function NotificationBulkPatchResultFromJSONTyped(t,i){return null==t?t:{updatedCount:exists(t,"updated_count")?t.updated_count:void 0}}function NotificationDeleteFromJSON(t){return NotificationDeleteFromJSONTyped(t)}function NotificationDeleteFromJSONTyped(t,i){return null==t?t:{success:exists(t,"success")?t.success:void 0}}function NotificationPatchFromJSON(t){return NotificationPatchFromJSONTyped(t)}function NotificationPatchFromJSONTyped(t,i){return null==t?t:{status:StatusFromJSON(t.status)}}function NotificationPatchToJSON(t){if(void 0!==t)return null===t?null:{status:StatusToJSON(t.status)}}function NotificationRequestToJSON(t){if(void 0!==t)return null===t?null:{resource_type:t.resourceType,sub_group:t.subGroup,recipients:t.recipients,account_number:t.accountNumber,locations:t.locations,resource_id:t.resourceId,subject:t.subject,created_at:void 0===t.createdAt?void 0:null===t.createdAt?null:t.createdAt.toISOString()}}class NotificationsApi extends BaseAPI{async createNotificationRaw(t,i){var e={"Content-Type":"application/json"},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(e.Authorization="Bearer "+o),await this.request({path:"/notifications",method:"POST",headers:e,query:{},body:NotificationRequestToJSON(t.notificationRequest)},i));return new JSONApiResponse(o,t=>NotificationFromJSON(t))}async createNotification(t={},i){return(await this.createNotificationRaw(t,i)).value()}async deleteNotificationsByIdRaw(t,i){if(null==t.id)throw new RequiredError("id","Required parameter requestParameters.id was null or undefined when calling deleteNotificationsById.");var e={},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(e.Authorization="Bearer "+o),await this.request({path:"/notifications/{id}".replace("{id}",encodeURIComponent(String(t.id))),method:"DELETE",headers:e,query:{}},i));return new JSONApiResponse(o,t=>NotificationDeleteFromJSON(t))}async deleteNotificationsById(t,i){return(await this.deleteNotificationsByIdRaw(t,i)).value()}async getNotificationsRaw(t,i){var e={},o=(void 0!==t.sort&&(e.sort=t.sort),void 0!==t.cursor&&(e.cursor=t.cursor),void 0!==t.resourceType&&(e.resource_type=t.resourceType),void 0!==t.accountNumber&&(e.account_number=t.accountNumber),void 0!==t.createdAfter&&(e.created_after=t.createdAfter.toISOString()),void 0!==t.createdBefore&&(e.created_before=t.createdBefore.toISOString()),void 0!==t.locationId&&(e.location_id=t.locationId),void 0!==t.subGroup&&(e.sub_group=t.subGroup),void 0!==t.status&&(e.status=t.status),{}),t=(t.prefer&&(o.Prefer=t.prefer.join(COLLECTION_FORMATS.csv)),this.configuration&&this.configuration.accessToken&&(t=await(0,this.configuration.accessToken)("bearerToken",[]))&&(o.Authorization="Bearer "+t),await this.request({path:"/notifications",method:"GET",headers:o,query:e},i));return new JSONApiResponse(t,t=>GetNotifications200ResponseFromJSON(t))}async getNotifications(t={},i){return(await this.getNotificationsRaw(t,i)).value()}async getNotificationsByIdRaw(t,i){if(null==t.id)throw new RequiredError("id","Required parameter requestParameters.id was null or undefined when calling getNotificationsById.");var e={},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(e.Authorization="Bearer "+o),await this.request({path:"/notifications/{id}".replace("{id}",encodeURIComponent(String(t.id))),method:"GET",headers:e,query:{}},i));return new JSONApiResponse(o,t=>NotificationFromJSON(t))}async getNotificationsById(t,i){return(await this.getNotificationsByIdRaw(t,i)).value()}async patchNotificationsRaw(t,i){if(null==t.notificationBulkPatch)throw new RequiredError("notificationBulkPatch","Required parameter requestParameters.notificationBulkPatch was null or undefined when calling patchNotifications.");var e={"Content-Type":"application/json"},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(e.Authorization="Bearer "+o),await this.request({path:"/notifications",method:"PATCH",headers:e,query:{},body:NotificationBulkPatchToJSON(t.notificationBulkPatch)},i));return new JSONApiResponse(o,t=>NotificationBulkPatchResultFromJSON(t))}async patchNotifications(t,i){return(await this.patchNotificationsRaw(t,i)).value()}async patchNotificationsByIdRaw(t,i){if(null==t.id)throw new RequiredError("id","Required parameter requestParameters.id was null or undefined when calling patchNotificationsById.");var e={"Content-Type":"application/json"},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(e.Authorization="Bearer "+o),await this.request({path:"/notifications/{id}".replace("{id}",encodeURIComponent(String(t.id))),method:"PATCH",headers:e,query:{},body:NotificationPatchToJSON(t.notificationPatch)},i));return new JSONApiResponse(o,t=>NotificationPatchFromJSON(t))}async patchNotificationsById(t,i){return(await this.patchNotificationsByIdRaw(t,i)).value()}}let APIEndpointPrefixes={Notifications:"notifications"};class ApiClient{constructor(t){this.noInit=!1,this.configuration=t}get notificationsApi(){return new NotificationsApi(new Configuration({basePath:this.configuration.NotificationApiUrl+"/"+APIEndpointPrefixes.Notifications,headers:{Authorization:this.getAuthorization()}}))}getAuthorization(){return this.configuration.getAuthorizationFn?this.configuration.getAuthorizationFn():""}}let isNullOrUndefinedOrEmpty=t=>null==t||""===t,mapResourceTypeToNotificationGroups=t=>{switch(t.toLowerCase()){case"planned maintenance":return NotificationGroups.PLANNED_MAINTENANCE;case"incidents":return NotificationGroups.INCIDENTS;case"dcim alerts":return NotificationGroups.DCIM_ALERTS;case"service tickets":return NotificationGroups.SERVICE_TICKETS;default:return NotificationGroups.PLANNED_MAINTENANCE}},mapStringToNotificationStatus=t=>{switch(t.toLowerCase()){case"unread":return NotificationStatus.UNREAD;case"read":return NotificationStatus.READ;default:return NotificationStatus.UNREAD}},mapParametersToNotificationRequest=t=>({sort:"-created_at",cursor:t,prefer:[""]}),mapParametersToPatchNotificationRequest=(t,i)=>({id:t,notificationPatch:{status:i}}),mapParametersToDeleteNotificationRequest=t=>({id:t}),mapNotificationDataToNotification=t=>{var i;return{subject:null!=(i=t.subject)?i:"",id:t.id,accountNumber:null!=(i=t.accountNumber)?i:"",resourceType:mapResourceTypeToNotificationGroups(null!=(i=t.resourceType)?i:""),subGroup:null!=(i=t.subGroup)?i:"",resourceId:null!=(i=t.resourceId)?i:"",status:mapStringToNotificationStatus(null!=(i=t.status)?i:""),createdAt:isNullOrUndefinedOrEmpty(t.createdAt)?format(new Date,DefaultDateTimeFormat):format(t.createdAt,DefaultDateTimeFormat),createdBy:null!=(i=t.createdBy)?i:"",locations:null!=(i=t.locations)?i:[]}},mapNotificationResponseToNotifications=t=>t.map(t=>mapNotificationDataToNotification(t)),getNextPageCursorfromQueryParam=t=>{t=new URLSearchParams(t),t=t.has("cursor")?t.get("cursor"):"";return null!==t?t:""},handleError=async(i,t=!0)=>{if(i instanceof ResponseError&&400===i.response.status)try{var e=(await i.response.json()).detail;t&&console.error(e)}catch(t){console.error(i)}else console.error(i)},getLocalStorageUser=t=>{t=localStorage.getItem(t);return t?JSON.parse(t):null},getUserAuthorization=t=>"Bearer "+(null==(t=getLocalStorageUser(t))?void 0:t.access_token);class NotificationState{constructor(){this.showDrawer=!1,this.apiClient={noInit:!0},this.baseApiUrl="",this.localStorageKey="",this.NewApiClient=()=>{this.apiClient=new ApiClient({NotificationApiUrl:this.baseApiUrl,getAuthorizationFn:()=>getUserAuthorization(this.localStorageKey)}),this.getNotifications()},this.nextPageCursor="",this.notifications=[],this.unreadNotificationCount=0,this.notificationFilters={SHOW_PLANNED_MAINTENANCE:!0,SHOW_SERVICE_TICKETS:!0,SHOW_DCIM_ALERTS:!0},this.selectedNotification={id:"",resourceType:NotificationGroups.PLANNED_MAINTENANCE,subGroup:"",subject:"",resourceId:"",locations:[],createdAt:"",accountNumber:"",createdBy:"",status:NotificationStatus.READ},this.dateFilters={FROM_DATE:subDays(new Date,DefaultDisplayDays),TO_DATE:new Date},makeAutoObservable(this),makePersistable(this,{name:"notification-state",properties:["notificationFilters","nextPageCursor"],storage:window.localStorage})}get isHydrated(){return isHydrated(this)}async hydrateStore(){await hydrateStore(this)}async clearStoredData(){await clearPersistedStore(this)}async getStoredData(){return getPersistedStore(this)}ConstructApiClient(){return this.apiClient.noInit?this.NewApiClient():this.apiClient}async clearStoredNotificationsData(){this.notifications=[],this.unreadNotificationCount=0,this.nextPageCursor="",this.apiClient={noInit:!0}}async setNotificationReadStatus(i){var t,e=await this.setNotificationAsRead(i.toString());return!0===await e&&(this.ReduceUnreadNotificationCount(),t=this.notifications.findIndex(t=>t.id===i),this.notifications[t].status=NotificationStatus.READ,this.selectedNotification=this.notifications[t]),e}async setNotificationDeleted(i){var t,e=await this.DeleteNotification(i.toString());return!0===e&&("unread"===(null==(t=this.notifications.find(t=>t.id===i))?void 0:t.status)&&this.ReduceUnreadNotificationCount(),t=this.notifications.findIndex(t=>t.id===i),this.notifications.splice(t,1)),{State:!0===e?ApiCallState.SUCCESS:ApiCallState.ERROR,Message:!0===e?"Successfully deleted the notification":"Error while deleting the notification"}}setNotificationDateFilter(t,i){this.dateFilters.FROM_DATE=void 0!==t?parse(t,DefaultDateFormat,new Date):void 0,this.dateFilters.TO_DATE=void 0!==i?parse(i,DefaultDateFormat,new Date):void 0}setNotificationFilter(t,i){switch(t){case NotificationGroups.PLANNED_MAINTENANCE:this.notificationFilters.SHOW_PLANNED_MAINTENANCE=i;break;case NotificationGroups.SERVICE_TICKETS:this.notificationFilters.SHOW_SERVICE_TICKETS=i;break;case NotificationGroups.DCIM_ALERTS:this.notificationFilters.SHOW_DCIM_ALERTS=i}}async getNotifications(){var t,i;void 0!==this.nextPageCursor&&(i=await(null==(i=this.apiClient)?void 0:i.notificationsApi.getNotificationsRaw(mapParametersToNotificationRequest(getNextPageCursorfromQueryParam(this.nextPageCursor))).catch(t=>{handleError(t,!1)})))&&(t=await(null==i?void 0:i.value()),this.notifications=""===this.nextPageCursor?mapNotificationResponseToNotifications(null==t?void 0:t.items):this.notifications.concat(mapNotificationResponseToNotifications(null==t?void 0:t.items)),this.nextPageCursor=void 0===(null==t?void 0:t.next)||null==t?void 0:t.next,this.unreadNotificationCount=null!==i.raw.headers.get("x-total-unread-count")&&void 0!==i.raw.headers.get("x-total-unread-count")?i.raw.headers.get("x-total-unread-count"):0)}async getNotificationsById(t){let i,e;(e=t?await(null==(i=this.apiClient)?void 0:i.notificationsApi.getNotificationsById({id:t}).catch(t=>{handleError(t,!1)})):e)&&(this.selectedNotification=mapNotificationDataToNotification(e))}async setNotificationAsRead(t){var i;return!!t&&(await(null==(i=this.apiClient)?void 0:i.notificationsApi.patchNotificationsById(mapParametersToPatchNotificationRequest(t,"read")).catch(t=>(handleError(t,!1),!1))),!0)}async setAllNotificationAsRead(){var t=await(null==(t=this.apiClient)?void 0:t.notificationsApi.patchNotifications({notificationBulkPatch:{status:NotificationStatus.READ}}).catch(t=>(handleError(t,!1),!1)));return this.notifications=this.notifications.map(t=>({...t,status:NotificationStatus.READ})),this.unreadNotificationCount=0,t}async DeleteNotification(t){let i,e=!1;return t&&await(null==(i=this.apiClient)?void 0:i.notificationsApi.deleteNotificationsById(mapParametersToDeleteNotificationRequest(t)).catch(t=>{handleError(t,!1),e=!1}).then(()=>{e=!0})),e}ReduceUnreadNotificationCount(){0<this.unreadNotificationCount&&--this.unreadNotificationCount}}let NotificationsState=new NotificationState,NotificationsStyle=css`:host{--ix-drawer-border-radius:0;--ix-drawer-padding:0;--ix-drawer-width-sm:320px;--ix-drawer-width-md:320px;--ix-drawer-width-lg:400px}.destructive-icon{color:var(--clr-critical,#db0028);--md-icon-button-icon-color:var(--clr-critical, #DB0028);--md-sys-color-on-surface-variant:var(--clr-critical, #DB0028)}.destructive-icon path{fill:var(--clr-critical,#db0028)}.active-icon{color:var(--clr-primary,#1456e0);--md-icon-button-icon-color:var(--clr-primary, #1456E0);--md-sys-color-on-surface-variant:var(--clr-primary, #1456E0)}.active-icon path{fill:var(--clr-primary,#1456e0)}.inactive-icon{color:var(--clr-on-surface,#092241);--md-icon-button-icon-color:var(--clr-on-surface, #092241);--md-sys-color-on-surface-variant:var(--clr-on-surface, #092241);cursor:default;opacity:.6}.inactive-icon path{fill:var(--clr-on-surface,#092241);opacity:.6}ix-icon-button.sharp{--md-icon-font:'Material Symbols Sharp'!important}.ix-icon-groups{--ix-icon-font-size:32px;--ix-icon-line-height:32px}.ix-icon-groups ix-icon{color:var(--clr-on-surface,#092241);opacity:.6}.ix-icon-groups ix-icon path{fill:var(--clr-on-surface,#092241)}.datefilter-dropdown-content,.filter-dropdown-content{position:absolute;right:5%;top:3rem;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:3;transition:box-shadow .3s cubic-bezier(.4,0,.2,1) 0s;border-radius:3px;box-shadow:rgba(0,0,0,.2) 0 5px 5px -3px,rgba(0,0,0,.14) 0 8px 10px 1px,rgba(0,0,0,.12) 0 3px 14px 2px;background-color:var(--clr-surface-container-lowest,#fff)}.unread{font-family:var(--root-primary-font, 'sans-serif');padding:0 5px;font-size:var(--text-caption-size,.75rem);line-height:var(--text-caption-line-height,1.33333333em);left:22px;top:0;background:var(--clr-critical,#db0028);letter-spacing:var(--text-caption-letter-spacing,.03333333em)}.notification-tooltip{background-color:var(--cp-neutral-blue-4,#040d19);white-space:nowrap;font-size:var(--text-caption-size,.75rem);z-index:9999;color:var(--clr-on-secondary,#fff)}.notification-modal-subtitle,.notification-modal-title{color:var(--clr-on-surface,#092241);font-family:var(--root-secondary-font, 'sans-serif')}.notification-modal-subtitle{font-size:var(--text-heading-size,1.25rem);line-height:var(--text-heading-line-height,1.2em)}.notification-modal-content{display:inline-grid;grid-template-columns:fit-content(183px) 1fr;grid-template-rows:auto auto;grid-column-gap:24px;grid-row-gap:8px;font-family:var(--root-primary-font, 'sans-serif');font-size:var(--text-default-size,16px);line-height:28px;width:560px;padding-bottom:16px;color:var(--clr-on-surface,#092241)}.notification-modal-content-title{width:183px;color:var(--clr-on-surface-variant,#092241B3)}.notification-modal-subject-title{grid-area:1/1/2/2}.notification-modal-subject-text{grid-area:1/2/2/3}.notification-modal-created-date-title{grid-area:2/1/3/2}.notification-modal-created-date-text{grid-area:2/2/3/3}.notification-modal-site-title{grid-area:3/1/4/2}.notification-modal-site-text{grid-area:3/2/4/3}`,ConfirmationDialog=class extends MobxLitElement{constructor(){super(...arguments),this.textMessage="Are you sure?",this.open=!1,this.dialogClosed=()=>{this.dispatchEvent(new CustomEvent("confirm-dialog-closed")),this.onClick(!1)}}static get styles(){return[TWStyles,NotificationsStyle]}onClick(t){t=new CustomEvent("on-confirm-selection",{detail:{returnValue:t},bubbles:!0,composed:!0});this.dispatchEvent(t)}render(){return html`<ix-dialog ?open="${this.open}" class="w-[580px]" @closed="${this.dialogClosed}"><div slot="headline">${this.textMessage}</div><div slot="actions"><div class="flex flex-row justify-end p-1"><ix-button name="cancel" appearance="text" @click="${()=>this.onClick(!1)}">DISMISS</ix-button><ix-button name="confirm" appearance="text" @click="${()=>this.onClick(!0)}">YES</ix-button></div></div></ix-dialog>`}},ViewItemDialog=(__decorate([property({type:String,attribute:!0})],ConfirmationDialog.prototype,"textMessage",void 0),__decorate([property({type:Boolean,attribute:!0})],ConfirmationDialog.prototype,"open",void 0),ConfirmationDialog=__decorate([customElement("confirmation-dialog")],ConfirmationDialog),class extends MobxLitElement{constructor(){super(...arguments),this.notification={},this.open=!1,this.dialogClosed=()=>{this.dispatchEvent(new CustomEvent("view-item-dialog-closed"))},this.viewRecord=()=>{this.dialogClosed(),NotificationsState.showDrawer=!1}}static get styles(){return[TWStyles,NotificationsStyle]}getUrl(){var t=this.notification.resourceId;switch(this.notification.resourceType){case NotificationGroups.PLANNED_MAINTENANCE:return"/service-management/reports?ticketId="+t;case NotificationGroups.SERVICE_TICKETS:switch(this.notification.subGroup){case SubGroups.Remote_Hands:return"/service-management/service-tickets/remote-hands/"+t;case SubGroups.Customer_Care:return"/service-management/service-tickets/customer-care/"+t;case SubGroups.Deliveries:return`/service-management/service-tickets/${SubGroups.Deliveries}/`+t;case SubGroups.Facility_Access:return"/service-management/service-tickets/facility-access/"+t;case SubGroups.Removals:return"/service-management/service-tickets/removals/"+t;case SubGroups.Trouble_Ticket:return"/service-management/service-tickets/trouble-tickets/"+t;case SubGroups.FacilityAccessVisitorAccess:return"/service-management/service-tickets/facility-access/visitor-access/"+t;case SubGroups.FacilityAccessPermanentBadge:return"/service-management/service-tickets/facility-access/permanent-badge/"+t;case SubGroups.FacilityAccessOspAccess:return"/service-management/service-tickets/facility-access/osp-access/"+t;case SubGroups.FacilityAccessPopPoeAccess:return"/service-management/service-tickets/facility-access/pop-poe-access/"+t;default:return""}case NotificationGroups.INCIDENTS:return"/service-management/reports?ticketId="+t;case NotificationGroups.DCIM_ALERTS:return"/dcim/"+t;default:return""}}getLocation(){return void 0===this.notification.locations||this.notification.locations.length<1?"":1<this.notification.locations.length?"Multiple Sites":this.notification.locations[0]}getSubGroupDisplayName(){switch(this.notification.subGroup){case SubGroups.FacilityAccessVisitorAccess:case SubGroups.FacilityAccessPermanentBadge:case SubGroups.FacilityAccessOspAccess:case SubGroups.FacilityAccessPopPoeAccess:return"Facility Access";case"Incidents (GSN)":return"Incidents";case"Emergency Repairs (InSite 1.0)":return"Emergency Repairs";default:return this.notification.subGroup}}render(){return html`<ix-dialog ?open="${this.open}" @closed="${this.dialogClosed}" class="notification-modal" data-testclass="notification-modal"><div slot="headline" class="w-[560px]"><div class="flex flex-col flex-start"><div class="notification-modal-title text-2xl font-bold text-balance">${this.notification.resourceType}</div><div class="notification-modal-subtitle pt-4 pb-0 font-bold text-balance">${this.getSubGroupDisplayName()}</div></div></div><form class="notification-modal-content" slot="content" id="form-id" method="dialog"><div class="notification-modal-content-title notification-modal-subject-title">Subject</div><div class="notification-modal-subject-text font-normal text-wrap">${this.notification.subject}</div><div class="notification-modal-content-title notification-modal-created-date-title">Create Date</div><div class="notification-modal-created-date-text font-normal text-wrap">${format(new Date(this.notification.createdAt),"dd/MM/yyyy HH:mm:ss")}</div><div class="notification-modal-content-title notification-modal-site-title">Site</div><div class="notification-modal-site-text font-normal text-wrap">${this.getLocation()}</div></form><div slot="actions" class="flex flex-row flex-end"><ix-button data-testclass="close-item-modal" form="form-id" appearance="text">Close</ix-button><ix-button data-testclass="view-record" href="${this.getUrl()}" @click="${this.viewRecord}" appearance="text">View Record</ix-button></div></ix-dialog>`}}),NotificationItem=(__decorate([property({type:Object,attribute:!1})],ViewItemDialog.prototype,"notification",void 0),__decorate([property({type:Boolean,attribute:!0})],ViewItemDialog.prototype,"open",void 0),ViewItemDialog=__decorate([customElement("view-item-dialog")],ViewItemDialog),class extends MobxLitElement{constructor(){super(...arguments),this.disabled=!1,this.read=!1,this.notification={},this.showModal=!1,this.showDeleteConfirmation=!1}static get styles(){return[TWStyles,NotificationsStyle]}displayItem(){this.notification.status===NotificationStatus.UNREAD&&(NotificationsState.setNotificationReadStatus(this.notification.id),this.read=!0),this.showModal=!0}deleteItem(){this.disabled||(this.showDeleteConfirmation=!0)}confirmedDelete(t){t.detail.returnValue&&NotificationsState.setNotificationDeleted(this.notification.id).then(t=>{this.showDeleteResultMessage(t,this.notification.id)}),this.showDeleteConfirmation=!1}showDeleteResultMessage(t,i){window.dispatchEvent(new CustomEvent("add-toast",{detail:{id:i,content:html`<ix-message-toast data-testid="notification-delete-toast" toastId="${i}" .TMessageToast="${t.State.toLowerCase()}" forceClose>${t.Message}</ix-message-toast>`,autoClose:2e3,durationOut:2e3,vertical:"bottom",horizontal:"center",animated:!0,above:!1}}))}calculateDuration(){return void 0!==this.notification.createdAt?differenceInHours(new Date,new Date(this.notification.createdAt))<24?formatDistance(new Date(this.notification.createdAt),new Date,{addSuffix:!0}):html`<ix-date type="static" variant="date-time" .value="${this.notification.createdAt}"></ix-date>`:"N/A"}getNotificationIcon(){switch(this.notification.resourceType){case NotificationGroups.PLANNED_MAINTENANCE:return plannedMaintenance;case NotificationGroups.SERVICE_TICKETS:return"sync_saved_locally";case NotificationGroups.INCIDENTS:return"report";case NotificationGroups.DCIM_ALERTS:return dcim;default:return"sync_saved_locally"}}getNotificationTitle(){switch(this.notification.resourceType){case NotificationGroups.PLANNED_MAINTENANCE:return"Planned Maintenance";case NotificationGroups.SERVICE_TICKETS:return this.getServiceTicketSubGroup()+" Service Ticket Update";case NotificationGroups.INCIDENTS:return"Emergency Repair";case NotificationGroups.DCIM_ALERTS:return"DCIM Alert";default:return"sync_saved_locally"}}getServiceTicketSubGroup(){var t,i;switch(null==(t=this.notification)?void 0:t.subGroup){case SubGroups.FacilityAccessVisitorAccess:case SubGroups.FacilityAccessPermanentBadge:case SubGroups.FacilityAccessOspAccess:case SubGroups.FacilityAccessPopPoeAccess:return"Facility Access";default:return null==(i=this.notification)?void 0:i.subGroup}}render(){return html`<div data-testid="notification-item" class="relative notification-item"><div class="hover:bg-[rgba(0,0,0,0.04)] p-2 pl-3.5 flex gap-3 relative cursor-pointer items-center font-bold ${this.read?"notification-item-read border-l-3 border-transparent":"notification-item-unread border-l-3 border-success"}"><ix-icon style="--ix-icon-font-size:24px;--ix-icon-line-height:24px" icon="${this.getNotificationIcon()}" class="${this.read?"inactive-icon":"active-icon"}" @click="${this.displayItem}">${this.getNotificationIcon()}</ix-icon><div class="flex flex-col grow" @click="${this.displayItem}"><div class="grow text-base"><h2 class="dlr-text-caption">${this.getNotificationTitle()}</h2></div><div class="grow text-xs"><h3 class="dlr-text-caption text-on-surface-disabled">${this.calculateDuration()}</h3></div></div><div><view-item-dialog ?open="${this.showModal}" .notification="${this.notification}" @view-item-dialog-closed="${()=>{this.showModal=!1}}"></view-item-dialog><confirmation-dialog ?open="${this.showDeleteConfirmation}" @on-confirm-selection="${this.confirmedDelete}" @confirm-dialog-closed="${()=>{this.showModal=!1}}" textMessage="Are you sure you want to delete this notification?" data-testclass="notification-delete-confirmation"></confirmation-dialog></div><ix-icon-button style="--md-icon-button-icon-size:24px" data-testclass="delete-notification" @click="${this.deleteItem}" @mouseover="${t=>{this.dispatchEvent(new CustomEvent("show-notification-tooltip",{detail:{label:this.disabled?"Emergency Repair Notification cannot be removed":"Remove Notification",target:t.target}}))}}" @mouseout="${()=>this.dispatchEvent(new CustomEvent("hide-notification-tooltip"))}" ?disabled="${this.disabled}"><ix-icon slot="default" class="${this.disabled?"inactive-icon":"destructive-icon"}">${trash}</ix-icon></ix-icon-button></div></div>`}}),GroupedItem=(__decorate([property({type:Boolean})],NotificationItem.prototype,"disabled",void 0),__decorate([property({type:Boolean})],NotificationItem.prototype,"read",void 0),__decorate([property({type:Object,attribute:!1})],NotificationItem.prototype,"notification",void 0),__decorate([state()],NotificationItem.prototype,"showModal",void 0),__decorate([state()],NotificationItem.prototype,"showDeleteConfirmation",void 0),NotificationItem=__decorate([customElement("notification-item")],NotificationItem),class extends MobxLitElement{constructor(){super(...arguments),this.groupTitle="Group 1",this.groupIcon="public",this.childItems=NotificationsState.notifications,this.isOpen=!1,this.onClick=()=>{this.isOpen=!this.isOpen}}static get styles(){return[TWStyles,NotificationsStyle]}renderNotificationItems(){var t;return this.isOpen?void 0!==(null==(t=this.childItems)?void 0:t.length)&&0<(null==(t=this.childItems)?void 0:t.length)?html`<div>${null==(t=this.childItems)?void 0:t.map(t=>html`<notification-item .notification="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}"></notification-item>`)}</div>`:html`<p class="dlr-text-caption ml-14 font-bold mr-4">No notifications yet.</p>`:html`${nothing}`}render(){var t;return html`<div class="group-container-row border-b border-outline py-3"><div class="flex items-center justify-between"><div class="flex items-center align-middle"><ix-icon-button icon="${this.isOpen?"arrow_drop_down":"arrow_right"}" @click="${this.onClick}" data-testclass="grouped-item-toggle-expand"></ix-icon-button><ix-icon slot="default" class="ix-icon-groups">${unsafeSVG(this.groupIcon)}</ix-icon><p class="m-0 group-name font-bold pl-1">${this.groupTitle}</p><p class="m-0 pl-4">${null==(t=this.childItems)?void 0:t.length.toString().padStart(2,"0")}</p></div></div>${this.renderNotificationItems()}</div>`}}),GroupFilters=(__decorate([property({type:String,attribute:!0})],GroupedItem.prototype,"groupTitle",void 0),__decorate([property({type:String,attribute:!0})],GroupedItem.prototype,"groupIcon",void 0),__decorate([property({type:Array,attribute:!0})],GroupedItem.prototype,"childItems",void 0),__decorate([state()],GroupedItem.prototype,"isOpen",void 0),GroupedItem=__decorate([customElement("grouped-item")],GroupedItem),class extends MobxLitElement{static get styles(){return[TWStyles,NotificationsStyle]}onSwitchChange(t){var t=t.target,i=null==(i=t.attributes.getNamedItem("name"))?void 0:i.value;NotificationsState.setNotificationFilter(i,t.selected),this.requestUpdate()}render(){return html`<div class="flex flex-col"><label class="whitespace-nowrap p-2 flex gap-3 items-center hover:bg-primary-subtle"><ix-switch data-testid="planned-maintenance-switch" class="flex" name="${NotificationGroups.PLANNED_MAINTENANCE}" selected="${NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE}" @change="${this.onSwitchChange}"></ix-switch><span>Planned Maintenance</span></label> <label class="whitespace-nowrap p-2 flex gap-3 items-center hover:bg-primary-subtle"><ix-switch data-testid="service-tickets-switch" class="flex" name="${NotificationGroups.SERVICE_TICKETS}" selected="${NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS}" @change="${this.onSwitchChange}"></ix-switch><span>Service Ticket Updates</span></label> <label class="whitespace-nowrap p-2 flex gap-3 items-center hover:bg-primary-subtle"><ix-switch data-testid="dcim-alerts-switch" class="flex" name="${NotificationGroups.DCIM_ALERTS}" selected="${NotificationsState.notificationFilters.SHOW_DCIM_ALERTS}" @change="${this.onSwitchChange}"></ix-switch><span>${NotificationGroups.DCIM_ALERTS}</span></label></div>`}}),DateFilters=(GroupFilters=__decorate([customElement("group-filters")],GroupFilters),class extends MobxLitElement{constructor(){super(...arguments),this.fromDate=isNullOrUndefinedOrEmpty(NotificationsState.dateFilters.FROM_DATE)?void 0:format(NotificationsState.dateFilters.FROM_DATE,DefaultDateFormat),this.toDate=isNullOrUndefinedOrEmpty(NotificationsState.dateFilters.TO_DATE)?void 0:format(NotificationsState.dateFilters.TO_DATE,DefaultDateFormat),this.maxDate=format(new Date,DefaultDateFormat),this.fromDateErrorText="",this.toDateErrorText=""}static get styles(){return[TWStyles,NotificationsStyle]}onFromDateChange(t){null===t||""===t?this.fromDate=void 0:(this.fromDate=t,void 0!==this.fromDate&&(this.fromDateErrorText=void 0))}onToDateChange(t){null===t||""===t?this.toDate=void 0:(this.toDate=t,void 0!==this.toDate&&(this.toDateErrorText=void 0))}onApplyDateFilter(t){if(t){if(void 0===this.toDate&&void 0!==this.fromDate)return void(this.toDateErrorText="Please select to date");if(void 0===this.fromDate&&void 0!==this.toDate)return void(this.fromDateErrorText="Please select from date");if(this.fromDate>this.toDate)return this.fromDateErrorText="From date cannot be later than To date.",void(this.fromDate=void 0);if(this.fromDateErrorText=void 0,this.toDate<this.fromDate)return this.toDateErrorText="To date cannot be earlier than From date.",void(this.toDate=void 0);this.toDateErrorText=void 0}t=t&&void 0===this.toDateErrorText&&void 0===this.fromDateErrorText,t&&(NotificationsState.setNotificationDateFilter(this.fromDate,this.toDate),this.requestUpdate()),t=new CustomEvent("on-selection",{detail:{returnValue:t},bubbles:!0,composed:!0});this.dispatchEvent(t)}clearDateFilters(){this.fromDate=void 0,this.toDate=void 0,this.fromDateErrorText=void 0,this.toDateErrorText=void 0}render(){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 data-testid="notifications-clear-date-filter" small appearance="default" icon="domain_verification_off" class="active-icon"></ix-icon-button></div></div><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 my-4"><div class="flex gap-2"><ix-date data-testid="notifications-from-date" .value="${this.fromDate}" max="${this.maxDate}" label="From" name="FromDate" .errorText="${this.fromDateErrorText}" .onChanged="${t=>this.onFromDateChange(t)}"></ix-date><ix-date data-testid="notifications-to-date" .value="${this.toDate}" max="${this.maxDate}" label="To" name="ToDate" .errorText="${this.toDateErrorText}" .onChanged="${t=>this.onToDateChange(t)}"></ix-date></div></div><div class="flex flex-row justify-between"><ix-button data-testid="notifications-cancel-date-filter" type="" target="" appearance="text" @click="${()=>this.onApplyDateFilter(!1)}">Cancel</ix-button><ix-button data-testid="notifications-activate-date-filter" type="" target="" appearance="text" @click="${()=>this.onApplyDateFilter(!0)}">Filter List</ix-button></div></div>`}}),NotificationTooltip=(__decorate([state()],DateFilters.prototype,"fromDate",void 0),__decorate([state()],DateFilters.prototype,"toDate",void 0),__decorate([state()],DateFilters.prototype,"maxDate",void 0),__decorate([state()],DateFilters.prototype,"fromDateErrorText",void 0),__decorate([state()],DateFilters.prototype,"toDateErrorText",void 0),DateFilters=__decorate([customElement("date-filters")],DateFilters),class extends MobxLitElement{constructor(){super(...arguments),this.isVisible=!1,this.label="",this.hoveredElement=void 0,this.configureNotificationTooltip=t=>{var{label:t,target:i}=t.detail;this.hoveredElement=i,this.label=t,this.isVisible=!0},this.hideNotificationTooltip=()=>{this.isVisible=!1,this.hoveredElement=void 0,this.label=""}}static get styles(){return[TWStyles,NotificationsStyle]}connectedCallback(){super.connectedCallback(),window.addEventListener("show-notification-tooltip",this.configureNotificationTooltip),window.addEventListener("hide-notification-tooltip",this.hideNotificationTooltip)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("show-notification-tooltip",this.configureNotificationTooltip),window.removeEventListener("hide-notification-tooltip",this.hideNotificationTooltip)}updated(t){t.has("hoveredElement")&&this.isVisible&&this.hoveredElement&&computePosition(this.hoveredElement,this.notificationTooltip,{placement:"bottom-end"}).then(({x:t,y:i})=>{this.notificationTooltip.style.left=t+"px",this.notificationTooltip.style.top=i+12+"px"})}render(){var t={hidden:!this.isVisible};return html`<div class="notification-tooltip z-[9999] rounded absolute p-2 white-text ${classMap(t)}">${this.label}</div><slot></slot>`}});__decorate([query(".notification-tooltip")],NotificationTooltip.prototype,"notificationTooltip",void 0),__decorate([property({type:Boolean,reflect:!0})],NotificationTooltip.prototype,"isVisible",void 0),__decorate([property({type:String,reflect:!0})],NotificationTooltip.prototype,"label",void 0),__decorate([state()],NotificationTooltip.prototype,"hoveredElement",void 0),NotificationTooltip=__decorate([customElement("notification-tooltip")],NotificationTooltip);class IxNotifications extends MobxLitElement{constructor(){super(...arguments),this.showGroupedView=!1,this.showFilters=!1,this.showDateFilters=!1,this.showMarkAllReadConfirmation=!1,this.baseApiUrl="",this.localStorageKey=""}async firstUpdated(){NotificationsState.baseApiUrl=this.baseApiUrl,NotificationsState.localStorageKey=this.localStorageKey,NotificationsState.ConstructApiClient()}connectedCallback(){super.connectedCallback(),window.addEventListener("account-switched",NotificationsState.NewApiClient),window.addEventListener("ix-notifications-toggle-drawer",this.toggleDrawer),window.addEventListener("beforeunload",this.handleOnbeforeunload)}disconnectedCallback(){super.disconnectedCallback(),this.handleOnbeforeunload(),window.removeEventListener("account-switched",NotificationsState.NewApiClient),window.removeEventListener("ix-notifications-toggle-drawer",this.toggleDrawer),window.removeEventListener("beforeunload",this.handleOnbeforeunload)}handleOnbeforeunload(){NotificationsState.clearStoredNotificationsData()}toggleDrawer(){NotificationsState.showDrawer=!NotificationsState.showDrawer,NotificationsState.showDrawer||(this.showFilters=!1,this.showDateFilters=!1)}markAllread(){0<NotificationsState.unreadNotificationCount&&(this.showMarkAllReadConfirmation=!0)}async confirmedMarkAllRead(t){if(t.detail.returnValue){try{var i=await NotificationsState.setAllNotificationAsRead();this.showResultMessage({State:ApiCallState.SUCCESS,Message:`Successfully marked ${i.updatedCount} notifications as read`},"all-read")}catch(t){this.showResultMessage({State:ApiCallState.ERROR,Message:"Error while marking the notifications read, Please try again"},"all-read")}this.requestUpdate()}this.showMarkAllReadConfirmation=!1}showResultMessage(t,i){window.dispatchEvent(new CustomEvent("add-toast",{detail:{id:i,content:html`<ix-message-toast data-testid="notification-read-all-toast" toastId="${i}" .TMessageToast="${t.State.toLowerCase()}" forceClose>${t.Message}</ix-message-toast>`,autoClose:3e3,durationOut:3e3,vertical:"bottom",horizontal:"center",animated:!0,above:!1}}))}toggleGroupView(){this.showGroupedView=!this.showGroupedView}displayFilters(){this.showFilters=!this.showFilters}applyNotificationFilters(){var t=null==(t=NotificationsState.notifications)?void 0:t.filter(t=>t.resourceType===NotificationGroups.PLANNED_MAINTENANCE&&!0===NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE||t.resourceType===NotificationGroups.SERVICE_TICKETS&&!0===NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS||t.resourceType===NotificationGroups.DCIM_ALERTS&&!0===NotificationsState.notificationFilters.SHOW_DCIM_ALERTS||t.resourceType===NotificationGroups.INCIDENTS);return void 0!==NotificationsState.dateFilters.FROM_DATE&&void 0!==NotificationsState.dateFilters.TO_DATE?t.filter(t=>0<=differenceInHours(new Date(t.createdAt),NotificationsState.dateFilters.FROM_DATE)&&differenceInDays(new Date(t.createdAt),NotificationsState.dateFilters.TO_DATE)<=0):void 0!==NotificationsState.dateFilters.FROM_DATE&&void 0===NotificationsState.dateFilters.TO_DATE?t.filter(t=>0<=differenceInHours(new Date(t.createdAt),NotificationsState.dateFilters.FROM_DATE)):void 0===NotificationsState.dateFilters.FROM_DATE&&void 0!==NotificationsState.dateFilters.TO_DATE?t.filter(t=>differenceInDays(new Date(t.createdAt),NotificationsState.dateFilters.TO_DATE)<=0):t}displayDateFilters(){this.showDateFilters=!this.showDateFilters}renderGroupedView(){var t=this.applyNotificationFilters();return html`<div class="-mx-4 -mt-2"><grouped-item data-testid="planned-maintenance-group" groupTitle="Planned Maintenance" groupIcon="${plannedMaintenance.strings[0]}" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.PLANNED_MAINTENANCE)}"></grouped-item><grouped-item data-testid="emergency-repairs-group" groupTitle="Emergency Repairs" groupIcon="report" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.INCIDENTS)}"></grouped-item><grouped-item data-testid="service-ticket-updates-group" groupTitle="Service Ticket Updates" groupIcon="sync_saved_locally" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.SERVICE_TICKETS)}"></grouped-item><grouped-item data-testid="dcim-alerts-group" groupTitle="${NotificationGroups.DCIM_ALERTS}" groupIcon="${dcim.strings[0]}" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.DCIM_ALERTS)}"></grouped-item></div>`}renderDefaultView(){var t=this.applyNotificationFilters(),i=t.filter(t=>0===differenceInDays(new Date(t.createdAt),new Date)),e=t.filter(t=>0!==differenceInDays(new Date(t.createdAt),new Date));return 0<(null==t?void 0:t.length)?html`<h3>Today</h3>${0<i.length?html`<div class="-mx-4">${null==i?void 0:i.map(t=>html`<notification-item ?read="${t.status!==NotificationStatus.UNREAD}" data-testclass="today-notification" .notification="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}"></notification-item>`)}</div>`:this.renderNoResult()}<h3>Earlier</h3>${0<e.length?html`<div class="-mx-4">${null==e?void 0:e.map(t=>html`<notification-item ?read="${t.status!==NotificationStatus.UNREAD}" data-testclass="earlier-notification" .notification="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}"></notification-item>`)}</div>`:this.renderNoResult()}`:html`<h3>Today</h3>${this.renderNoResult()}`}renderNoResult(){return html`<p class="dlr-text-caption my-4"><strong>No notifications yet.</strong></p>`}handleCloseClick(t){this.showDateFilters=!1,this.showFilters=!1}handleContentScroll(t){null!==t&&t.detail.scrollTop+t.detail.clientHeight>=t.detail.scrollHeight-2&&NotificationsState.getNotifications()}manageFilterVisibility(t){t=t.composedPath();!this.showFilters||t.includes(this.groupFilters)||t.includes(this.groupFiltersButton)||(this.showFilters=!1),!this.showDateFilters||t.includes(this.dateFilters)||t.includes(this.dateFiltersButton)||(this.showDateFilters=!1)}render(){return html`<notification-tooltip data-testid="notifications-tooltip"></notification-tooltip><confirmation-dialog data-testid="notifications-confirm-read-dialog" ?open="${this.showMarkAllReadConfirmation}" @confirm-dialog-closed="${()=>{this.showMarkAllReadConfirmation=!1}}" @on-confirm-selection="${this.confirmedMarkAllRead}" textMessage="Are you sure you want to mark all notifications as read?"></confirmation-dialog><ix-drawer data-testid="notifications-drawer" ?isVisible="${NotificationsState.showDrawer}" .onClosed="${()=>this.toggleDrawer()}" animate-vertical hide-close @on-content-scroll="${this.handleContentScroll}" @click="${this.manageFilterVisibility}" compact="compact"><div slot="content" class="m-4"><div class="flex flex-row justify-between grow items-center notification-header-container mb-4"><h2 data-testid="notifications-heading" 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 data-testid="notifications-cta-all-read" data-testclass="notifications-cta" @click="${this.markAllread}" @mouseover="${t=>{0<NotificationsState.unreadNotificationCount&&window.dispatchEvent(new CustomEvent("show-notification-tooltip",{detail:{label:"Mark All Read",target:t.target}}))}}" @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 data-testid="notifications-cta-sort-type" data-testclass="notifications-cta" @click="${this.toggleGroupView}" @mouseover="${t=>{window.dispatchEvent(new CustomEvent("show-notification-tooltip",{detail:{label:"Sort by Type",target:t.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></ix-icon-button><ix-icon-button data-testid="notifications-cta-filter-type" data-testclass="notifications-cta" @click="${this.displayFilters}" @mouseover="${t=>{window.dispatchEvent(new CustomEvent("show-notification-tooltip",{detail:{label:"Filter by Type",target:t.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 data-testid="notifications-filter-dropdown" class="filter-dropdown-content ${this.showFilters?"active z-50":"hidden"}"><group-filters></group-filters></div><ix-icon-button data-testid="notifications-cta-filter-date" data-testclass="notifications-cta" @click="${this.displayDateFilters}" @mouseover="${t=>{window.dispatchEvent(new CustomEvent("show-notification-tooltip",{detail:{label:"Filter by Date",target:t.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 data-testid="notifications-date-filter-dropdown" class="datefilter-dropdown-content ${this.showDateFilters?"active z-50":"hidden"}" @on-selection="${this.handleCloseClick}"><date-filters></date-filters></div></div></div>${this.showGroupedView?this.renderGroupedView():this.renderDefaultView()}</div></ix-drawer>`}}IxNotifications.styles=[TWStyles,NotificationsStyle],__decorate([query("group-filters")],IxNotifications.prototype,"groupFilters",void 0),__decorate([query("ix-icon-button#group-filter-button")],IxNotifications.prototype,"groupFiltersButton",void 0),__decorate([query("date-filters")],IxNotifications.prototype,"dateFilters",void 0),__decorate([query("ix-icon-button#date-filters-button")],IxNotifications.prototype,"dateFiltersButton",void 0),__decorate([state()],IxNotifications.prototype,"showGroupedView",void 0),__decorate([state()],IxNotifications.prototype,"showFilters",void 0),__decorate([state()],IxNotifications.prototype,"showDateFilters",void 0),__decorate([state()],IxNotifications.prototype,"showMarkAllReadConfirmation",void 0),__decorate([property({type:String})],IxNotifications.prototype,"baseApiUrl",void 0),__decorate([property({type:String})],IxNotifications.prototype,"localStorageKey",void 0),window.customElements.define("ix-notifications",IxNotifications);
+import{__decorate}from"tslib";import{svg,css,html,nothing}from"lit";import{property,customElement,state,query}from"lit/decorators.js";import{MobxLitElement}from"@adobe/lit-mobx";import{differenceInDays}from"date-fns/differenceInDays.js";import{differenceInHours}from"date-fns/differenceInHours.js";import"@digital-realty/ix-button/ix-button.js";import"@digital-realty/ix-drawer/ix-drawer.js";import"@digital-realty/ix-icon";import"@material/web/icon/icon.js";import{makeAutoObservable}from"mobx";import{makePersistable,isHydrated,hydrateStore,clearPersistedStore,getPersistedStore}from"mobx-persist-store";import{parse}from"date-fns/parse.js";import{subDays}from"date-fns/subDays.js";import{format}from"date-fns/format.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-icon/ix-icon.js";import{formatDistance}from"date-fns/formatDistance.js";import"@digital-realty/ix-toast/ix-message-toast.js";import{unsafeSVG}from"lit/directives/unsafe-svg.js";import"@digital-realty/ix-switch/ix-switch.js";import"@digital-realty/ix-date/ix-date.js";import"@digital-realty/ix-divider/ix-divider.js";import{computePosition}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";let viewList=svg`<svg viewBox="0 0 24 24"><path d="M3 9H7V5H3V9ZM7 14H3V10H7V14ZM7 19H3V15H7V19ZM20 14H8V10H20V14ZM8 19H20V15H8V19ZM8 9V5H20V9H8Z"/></svg>`,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>`,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>`,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>`,sortCheck=(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>`,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:#fff"/></svg>`),TWStyles=css`*,::after,::before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.dlr-text-default,:host,:host :root,:root,html{font-family:var(--root-primary-font);font-size:var(--text-default-size);line-height:var(--text-default-line-height);letter-spacing:var(--text-default-letter-spacing);font-weight:var(--text-default-weight);-webkit-text-decoration:var(--text-default-decoration);text-decoration:var(--text-default-decoration);text-transform:var(--text-default-transform)}.dlr-text-heading{font-family:var(--root-secondary-font);font-size:var(--text-heading-size);line-height:var(--text-heading-line-height);letter-spacing:var(--text-heading-letter-spacing);font-weight:var(--text-heading-weight);-webkit-text-decoration:var(--text-heading-decoration);text-decoration:var(--text-heading-decoration);text-transform:var(--text-heading-transform)}.dlr-text-caption{font-family:var(--root-primary-font);font-size:var(--text-caption-size);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing);font-weight:var(--text-caption-weight);-webkit-text-decoration:var(--text-caption-decoration);text-decoration:var(--text-caption-decoration);text-transform:var(--text-caption-transform)}.static{position:static}.absolute{position:absolute}.relative{position:relative}.-start-0{inset-inline-start:0}.z-50{z-index:50}.z-\\[9999\\]{z-index:9999}.m-0{margin:0}.m-4{margin:1rem}.-mx-4{margin-left:-1rem;margin-right:-1rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-4{margin-top:1rem;margin-bottom:1rem}.-mt-2{margin-top:-.5rem}.mb-4{margin-bottom:1rem}.ml-14{margin-left:3.5rem}.mr-4{margin-right:1rem}.flex{display:flex}.hidden{display:none}.w-\\[560px\\]{width:560px}.w-\\[580px\\]{width:580px}.grow{flex-grow:1}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.whitespace-nowrap{white-space:nowrap}.text-wrap{text-wrap:wrap}.text-balance{text-wrap:balance}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.border-b{border-bottom-width:1px}.border-l-3{border-left-width:3px}.border-outline{border-color:var(--cp-neutral-blue-12p)}.border-success{border-color:var(--cp-success-50)}.border-transparent{border-color:transparent}.fill-primary{fill:var(--cp-dlr-blue-50)}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pb-0{padding-bottom:0}.pl-1{padding-left:.25rem}.pl-3\\.5{padding-left:.875rem}.pl-4{padding-left:1rem}.pr-1{padding-right:.25rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-normal{font-weight:400}.text-on-surface-disabled{color:var(--cp-neutral-blue-50p)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity,1))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}.hover\\:bg-\\[rgba\\(0\\2c 0\\2c 0\\2c 0\\.04\\)\\]:hover{background-color:rgba(0,0,0,.04)}.hover\\:bg-primary-subtle:hover{background-color:var(--cp-dlr-blue-10p)}@media (min-width:600px){.sm\\:flex-col{flex-direction:column}.md\\:flex-col{flex-direction:column}}@media (min-width:1200px){.lg\\:flex-col{flex-direction:column}.xl\\:flex-row{flex-direction:row}}`;var NotificationStatus,NotificationGroups,SubGroups,ApiCallState;(t=>{t.READ="read",t.UNREAD="unread"})(NotificationStatus=NotificationStatus||{}),(t=>{t.PLANNED_MAINTENANCE="Planned Maintenance",t.INCIDENTS="Incidents",t.DCIM_ALERTS="DCIM Alerts",t.SERVICE_TICKETS="Service Tickets"})(NotificationGroups=NotificationGroups||{}),(t=>{t.Remote_Hands="Remote Hands",t.Deliveries="Deliveries",t.Removals="Removals",t.Facility_Access="Facility Access",t.Trouble_Ticket="Trouble Ticket",t.Customer_Care="Customer Care",t.FacilityAccessVisitorAccess="FacilityAccessVisitorAccess",t.FacilityAccessPermanentBadge="FacilityAccessPermanentBadge",t.FacilityAccessOspAccess="FacilityAccessOspAccess",t.FacilityAccessPopPoeAccess="FacilityAccessPopPoeAccess"})(SubGroups=SubGroups||{}),(t=>{t.LOADING="Loading",t.ERROR="Error",t.SUCCESS="Success"})(ApiCallState=ApiCallState||{});let DefaultDateFormat="yyyy-MM-dd",DefaultDisplayDays=30,DefaultDateTimeFormat="yyyy-MM-dd HH:mm:ss",BASE_PATH="http://api.digitalrealty.com/notifications".replace(/\/+$/,"");class Configuration{constructor(t={}){this.configuration=t}set config(t){this.configuration=t}get basePath(){return null!=this.configuration.basePath?this.configuration.basePath:BASE_PATH}get fetchApi(){return this.configuration.fetchApi}get middleware(){return this.configuration.middleware||[]}get queryParamsStringify(){return this.configuration.queryParamsStringify||querystring}get username(){return this.configuration.username}get password(){return this.configuration.password}get apiKey(){let t=this.configuration.apiKey;if(t)return"function"==typeof t?t:()=>t}get accessToken(){let t=this.configuration.accessToken;if(t)return"function"==typeof t?t:async()=>t}get headers(){return this.configuration.headers}get credentials(){return this.configuration.credentials}}let DefaultConfig=new Configuration;class BaseAPI{constructor(t=DefaultConfig){this.configuration=t,this.fetchApi=async(t,i)=>{let e={url:t,init:i};for(var o of this.middleware)o.pre&&(e=await o.pre({fetch:this.fetchApi,...e})||e);let a=void 0;try{a=await(this.configuration.fetchApi||fetch)(e.url,e.init)}catch(t){for(var r of this.middleware)r.onError&&(a=await r.onError({fetch:this.fetchApi,url:e.url,init:e.init,error:t,response:a?a.clone():void 0})||a);if(void 0===a)throw t instanceof Error?new FetchError(t,"The request failed and the interceptors did not return an alternative response"):t}for(var n of this.middleware)n.post&&(a=await n.post({fetch:this.fetchApi,url:e.url,init:e.init,response:a.clone()})||a);return a},this.middleware=t.middleware}withMiddleware(...t){var i=this.clone();return i.middleware=i.middleware.concat(...t),i}withPreMiddleware(...t){t=t.map(t=>({pre:t}));return this.withMiddleware(...t)}withPostMiddleware(...t){t=t.map(t=>({post:t}));return this.withMiddleware(...t)}isJsonMime(t){return!!t&&BaseAPI.jsonRegex.test(t)}async request(t,i){var{url:t,init:i}=await this.createFetchParams(t,i),t=await this.fetchApi(t,i);if(t&&200<=t.status&&t.status<300)return t;throw new ResponseError(t,"Response returned an error code")}async createFetchParams(t,i){let e=this.configuration.basePath+t.path,o=(void 0!==t.query&&0!==Object.keys(t.query).length&&(e+="?"+this.configuration.queryParamsStringify(t.query)),Object.assign({},this.configuration.headers,t.headers));Object.keys(o).forEach(t=>void 0===o[t]?delete o[t]:{});var a="function"==typeof i?i:async()=>i,r={method:t.method,headers:o,body:t.body,credentials:this.configuration.credentials},a={...r,...await a({init:r,context:t})};let n;n=!(isFormData(a.body)||a.body instanceof URLSearchParams||isBlob(a.body))&&this.isJsonMime(o["Content-Type"])?JSON.stringify(a.body):a.body;r={...a,body:n};return{url:e,init:r}}clone(){var t=new this.constructor(this.configuration);return t.middleware=this.middleware.slice(),t}}function isBlob(t){return"undefined"!=typeof Blob&&t instanceof Blob}function isFormData(t){return"undefined"!=typeof FormData&&t instanceof FormData}BaseAPI.jsonRegex=new RegExp("^(:?application/json|[^;/ \t]+/[^;/ \t]+[+]json)[ \t]*(:?;.*)?$","i");class ResponseError extends Error{constructor(t,i){super(i),this.response=t,this.name="ResponseError"}}class FetchError extends Error{constructor(t,i){super(i),this.cause=t,this.name="FetchError"}}class RequiredError extends Error{constructor(t,i){super(i),this.field=t,this.name="RequiredError"}}let COLLECTION_FORMATS={csv:","};function exists(t,i){t=t[i];return null!=t}function querystring(i,e=""){return Object.keys(i).map(t=>querystringSingleKey(t,i[t],e)).filter(t=>0<t.length).join("&")}function querystringSingleKey(t,i,e=""){var o,a=e+(e.length?`[${t}]`:t);return i instanceof Array?(o=i.map(t=>encodeURIComponent(String(t))).join(`&${encodeURIComponent(a)}=`),encodeURIComponent(a)+"="+o):i instanceof Set?querystringSingleKey(t,Array.from(i),e):i instanceof Date?encodeURIComponent(a)+"="+encodeURIComponent(i.toISOString()):i instanceof Object?querystring(i,a):encodeURIComponent(a)+"="+encodeURIComponent(String(i))}class JSONApiResponse{constructor(t,i=t=>t){this.raw=t,this.transformer=i}async value(){return this.transformer(await this.raw.json())}}function StatusFromJSON(t){return StatusFromJSONTyped(t)}function StatusFromJSONTyped(t,i){return t}function StatusToJSON(t){return t}function NotificationFromJSON(t){return NotificationFromJSONTyped(t)}function NotificationFromJSONTyped(t,i){return null==t?t:{id:exists(t,"id")?t.id:void 0,resourceType:exists(t,"resource_type")?t.resource_type:void 0,subGroup:exists(t,"sub_group")?t.sub_group:void 0,createdAt:exists(t,"created_at")?null===t.created_at?null:new Date(t.created_at):void 0,createdBy:exists(t,"created_by")?t.created_by:void 0,subject:exists(t,"subject")?t.subject:void 0,locations:exists(t,"locations")?t.locations:void 0,resourceId:exists(t,"resource_id")?t.resource_id:void 0,status:exists(t,"status")?StatusFromJSON(t.status):void 0,accountNumber:exists(t,"account_number")?t.account_number:void 0}}function GetNotifications200ResponseFromJSON(t){return GetNotifications200ResponseFromJSONTyped(t)}function GetNotifications200ResponseFromJSONTyped(t,i){return null==t?t:{self:exists(t,"self")?t.self:void 0,first:exists(t,"first")?t.first:void 0,prev:exists(t,"prev")?t.prev:void 0,next:exists(t,"next")?t.next:void 0,last:exists(t,"last")?t.last:void 0,items:t.items.map(NotificationFromJSON)}}function NotificationBulkPatchToJSON(t){if(void 0!==t)return null===t?null:{status:StatusToJSON(t.status)}}function NotificationBulkPatchResultFromJSON(t){return NotificationBulkPatchResultFromJSONTyped(t)}function NotificationBulkPatchResultFromJSONTyped(t,i){return null==t?t:{updatedCount:exists(t,"updated_count")?t.updated_count:void 0}}function NotificationDeleteFromJSON(t){return NotificationDeleteFromJSONTyped(t)}function NotificationDeleteFromJSONTyped(t,i){return null==t?t:{success:exists(t,"success")?t.success:void 0}}function NotificationPatchFromJSON(t){return NotificationPatchFromJSONTyped(t)}function NotificationPatchFromJSONTyped(t,i){return null==t?t:{status:StatusFromJSON(t.status)}}function NotificationPatchToJSON(t){if(void 0!==t)return null===t?null:{status:StatusToJSON(t.status)}}function NotificationRequestToJSON(t){if(void 0!==t)return null===t?null:{resource_type:t.resourceType,sub_group:t.subGroup,recipients:t.recipients,account_number:t.accountNumber,locations:t.locations,resource_id:t.resourceId,subject:t.subject,created_at:void 0===t.createdAt?void 0:null===t.createdAt?null:t.createdAt.toISOString()}}class NotificationsApi extends BaseAPI{async createNotificationRaw(t,i){var e={"Content-Type":"application/json"},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(e.Authorization="Bearer "+o),await this.request({path:"/notifications",method:"POST",headers:e,query:{},body:NotificationRequestToJSON(t.notificationRequest)},i));return new JSONApiResponse(o,t=>NotificationFromJSON(t))}async createNotification(t={},i){return(await this.createNotificationRaw(t,i)).value()}async deleteNotificationsByIdRaw(t,i){if(null==t.id)throw new RequiredError("id","Required parameter requestParameters.id was null or undefined when calling deleteNotificationsById.");var e={},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(e.Authorization="Bearer "+o),await this.request({path:"/notifications/{id}".replace("{id}",encodeURIComponent(String(t.id))),method:"DELETE",headers:e,query:{}},i));return new JSONApiResponse(o,t=>NotificationDeleteFromJSON(t))}async deleteNotificationsById(t,i){return(await this.deleteNotificationsByIdRaw(t,i)).value()}async getNotificationsRaw(t,i){var e={},o=(void 0!==t.sort&&(e.sort=t.sort),void 0!==t.cursor&&(e.cursor=t.cursor),void 0!==t.resourceType&&(e.resource_type=t.resourceType),void 0!==t.accountNumber&&(e.account_number=t.accountNumber),void 0!==t.createdAfter&&(e.created_after=t.createdAfter.toISOString()),void 0!==t.createdBefore&&(e.created_before=t.createdBefore.toISOString()),void 0!==t.locationId&&(e.location_id=t.locationId),void 0!==t.subGroup&&(e.sub_group=t.subGroup),void 0!==t.status&&(e.status=t.status),{}),t=(t.prefer&&(o.Prefer=t.prefer.join(COLLECTION_FORMATS.csv)),this.configuration&&this.configuration.accessToken&&(t=await(0,this.configuration.accessToken)("bearerToken",[]))&&(o.Authorization="Bearer "+t),await this.request({path:"/notifications",method:"GET",headers:o,query:e},i));return new JSONApiResponse(t,t=>GetNotifications200ResponseFromJSON(t))}async getNotifications(t={},i){return(await this.getNotificationsRaw(t,i)).value()}async getNotificationsByIdRaw(t,i){if(null==t.id)throw new RequiredError("id","Required parameter requestParameters.id was null or undefined when calling getNotificationsById.");var e={},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(e.Authorization="Bearer "+o),await this.request({path:"/notifications/{id}".replace("{id}",encodeURIComponent(String(t.id))),method:"GET",headers:e,query:{}},i));return new JSONApiResponse(o,t=>NotificationFromJSON(t))}async getNotificationsById(t,i){return(await this.getNotificationsByIdRaw(t,i)).value()}async patchNotificationsRaw(t,i){if(null==t.notificationBulkPatch)throw new RequiredError("notificationBulkPatch","Required parameter requestParameters.notificationBulkPatch was null or undefined when calling patchNotifications.");var e={"Content-Type":"application/json"},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(e.Authorization="Bearer "+o),await this.request({path:"/notifications",method:"PATCH",headers:e,query:{},body:NotificationBulkPatchToJSON(t.notificationBulkPatch)},i));return new JSONApiResponse(o,t=>NotificationBulkPatchResultFromJSON(t))}async patchNotifications(t,i){return(await this.patchNotificationsRaw(t,i)).value()}async patchNotificationsByIdRaw(t,i){if(null==t.id)throw new RequiredError("id","Required parameter requestParameters.id was null or undefined when calling patchNotificationsById.");var e={"Content-Type":"application/json"},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(e.Authorization="Bearer "+o),await this.request({path:"/notifications/{id}".replace("{id}",encodeURIComponent(String(t.id))),method:"PATCH",headers:e,query:{},body:NotificationPatchToJSON(t.notificationPatch)},i));return new JSONApiResponse(o,t=>NotificationPatchFromJSON(t))}async patchNotificationsById(t,i){return(await this.patchNotificationsByIdRaw(t,i)).value()}}let APIEndpointPrefixes={Notifications:"notifications"};class ApiClient{constructor(t){this.noInit=!1,this.configuration=t}get notificationsApi(){return new NotificationsApi(new Configuration({basePath:this.configuration.NotificationApiUrl+"/"+APIEndpointPrefixes.Notifications,headers:{Authorization:this.getAuthorization()}}))}getAuthorization(){return this.configuration.getAuthorizationFn?this.configuration.getAuthorizationFn():""}}let isNullOrUndefinedOrEmpty=t=>null==t||""===t,mapResourceTypeToNotificationGroups=t=>{switch(t.toLowerCase()){case"planned maintenance":return NotificationGroups.PLANNED_MAINTENANCE;case"incidents":return NotificationGroups.INCIDENTS;case"dcim alerts":return NotificationGroups.DCIM_ALERTS;case"service tickets":return NotificationGroups.SERVICE_TICKETS;default:return NotificationGroups.PLANNED_MAINTENANCE}},mapStringToNotificationStatus=t=>{switch(t.toLowerCase()){case"unread":return NotificationStatus.UNREAD;case"read":return NotificationStatus.READ;default:return NotificationStatus.UNREAD}},mapParametersToNotificationRequest=t=>({sort:"-created_at",cursor:t,prefer:[""]}),mapParametersToPatchNotificationRequest=(t,i)=>({id:t,notificationPatch:{status:i}}),mapParametersToDeleteNotificationRequest=t=>({id:t}),mapNotificationDataToNotification=t=>{var i;return{subject:null!=(i=t.subject)?i:"",id:t.id,accountNumber:null!=(i=t.accountNumber)?i:"",resourceType:mapResourceTypeToNotificationGroups(null!=(i=t.resourceType)?i:""),subGroup:null!=(i=t.subGroup)?i:"",resourceId:null!=(i=t.resourceId)?i:"",status:mapStringToNotificationStatus(null!=(i=t.status)?i:""),createdAt:isNullOrUndefinedOrEmpty(t.createdAt)?format(new Date,DefaultDateTimeFormat):format(t.createdAt,DefaultDateTimeFormat),createdBy:null!=(i=t.createdBy)?i:"",locations:null!=(i=t.locations)?i:[]}},mapNotificationResponseToNotifications=t=>t.map(t=>mapNotificationDataToNotification(t)),getNextPageCursorfromQueryParam=t=>{t=new URLSearchParams(t),t=t.has("cursor")?t.get("cursor"):"";return null!==t?t:""},handleError=async(i,t=!0)=>{if(i instanceof ResponseError&&400===i.response.status)try{var e=(await i.response.json()).detail;t&&console.error(e)}catch(t){console.error(i)}else console.error(i)},getLocalStorageUser=t=>{t=localStorage.getItem(t);return t?JSON.parse(t):null},getUserAuthorization=t=>"Bearer "+(null==(t=getLocalStorageUser(t))?void 0:t.access_token);class NotificationState{constructor(){this.showDrawer=!1,this.apiClient={noInit:!0},this.baseApiUrl="",this.localStorageKey="",this.NewApiClient=()=>{this.apiClient=new ApiClient({NotificationApiUrl:this.baseApiUrl,getAuthorizationFn:()=>getUserAuthorization(this.localStorageKey)}),this.getNotifications()},this.nextPageCursor="",this.notifications=[],this.unreadNotificationCount=0,this.notificationFilters={SHOW_PLANNED_MAINTENANCE:!0,SHOW_SERVICE_TICKETS:!0,SHOW_DCIM_ALERTS:!0},this.selectedNotification={id:"",resourceType:NotificationGroups.PLANNED_MAINTENANCE,subGroup:"",subject:"",resourceId:"",locations:[],createdAt:"",accountNumber:"",createdBy:"",status:NotificationStatus.READ},this.dateFilters={FROM_DATE:subDays(new Date,DefaultDisplayDays),TO_DATE:new Date},makeAutoObservable(this),makePersistable(this,{name:"notification-state",properties:["notificationFilters","nextPageCursor"],storage:window.localStorage})}get isHydrated(){return isHydrated(this)}async hydrateStore(){await hydrateStore(this)}async clearStoredData(){await clearPersistedStore(this)}async getStoredData(){return getPersistedStore(this)}ConstructApiClient(){return this.apiClient.noInit?this.NewApiClient():this.apiClient}async clearStoredNotificationsData(){this.notifications=[],this.unreadNotificationCount=0,this.nextPageCursor="",this.apiClient={noInit:!0}}async setNotificationReadStatus(i){var t,e=await this.setNotificationAsRead(i.toString());return!0===await e&&(this.ReduceUnreadNotificationCount(),t=this.notifications.findIndex(t=>t.id===i),this.notifications[t].status=NotificationStatus.READ,this.selectedNotification=this.notifications[t]),e}async setNotificationDeleted(i){var t,e=await this.DeleteNotification(i.toString());return!0===e&&("unread"===(null==(t=this.notifications.find(t=>t.id===i))?void 0:t.status)&&this.ReduceUnreadNotificationCount(),t=this.notifications.findIndex(t=>t.id===i),this.notifications.splice(t,1)),{State:!0===e?ApiCallState.SUCCESS:ApiCallState.ERROR,Message:!0===e?"Successfully deleted the notification":"Error while deleting the notification"}}setNotificationDateFilter(t,i){this.dateFilters.FROM_DATE=void 0!==t?parse(t,DefaultDateFormat,new Date):void 0,this.dateFilters.TO_DATE=void 0!==i?parse(i,DefaultDateFormat,new Date):void 0}setNotificationFilter(t,i){switch(t){case NotificationGroups.PLANNED_MAINTENANCE:this.notificationFilters.SHOW_PLANNED_MAINTENANCE=i;break;case NotificationGroups.SERVICE_TICKETS:this.notificationFilters.SHOW_SERVICE_TICKETS=i;break;case NotificationGroups.DCIM_ALERTS:this.notificationFilters.SHOW_DCIM_ALERTS=i}}async getNotifications(){var t,i;void 0!==this.nextPageCursor&&(i=await(null==(i=this.apiClient)?void 0:i.notificationsApi.getNotificationsRaw(mapParametersToNotificationRequest(getNextPageCursorfromQueryParam(this.nextPageCursor))).catch(t=>{handleError(t,!1)})))&&(t=await(null==i?void 0:i.value()),this.notifications=""===this.nextPageCursor?mapNotificationResponseToNotifications(null==t?void 0:t.items):this.notifications.concat(mapNotificationResponseToNotifications(null==t?void 0:t.items)),this.nextPageCursor=void 0===(null==t?void 0:t.next)||null==t?void 0:t.next,this.unreadNotificationCount=null!==i.raw.headers.get("x-total-unread-count")&&void 0!==i.raw.headers.get("x-total-unread-count")?i.raw.headers.get("x-total-unread-count"):0)}async getNotificationsById(t){let i,e;(e=t?await(null==(i=this.apiClient)?void 0:i.notificationsApi.getNotificationsById({id:t}).catch(t=>{handleError(t,!1)})):e)&&(this.selectedNotification=mapNotificationDataToNotification(e))}async setNotificationAsRead(t){var i;return!!t&&(await(null==(i=this.apiClient)?void 0:i.notificationsApi.patchNotificationsById(mapParametersToPatchNotificationRequest(t,"read")).catch(t=>(handleError(t,!1),!1))),!0)}async setAllNotificationAsRead(){var t=await(null==(t=this.apiClient)?void 0:t.notificationsApi.patchNotifications({notificationBulkPatch:{status:NotificationStatus.READ}}).catch(t=>(handleError(t,!1),!1)));return this.notifications=this.notifications.map(t=>({...t,status:NotificationStatus.READ})),this.unreadNotificationCount=0,t}async DeleteNotification(t){let i,e=!1;return t&&await(null==(i=this.apiClient)?void 0:i.notificationsApi.deleteNotificationsById(mapParametersToDeleteNotificationRequest(t)).catch(t=>{handleError(t,!1),e=!1}).then(()=>{e=!0})),e}ReduceUnreadNotificationCount(){0<this.unreadNotificationCount&&--this.unreadNotificationCount}}let NotificationsState=new NotificationState,NotificationsStyle=css`:host{--ix-drawer-border-radius:0;--ix-drawer-padding:0;--ix-drawer-width-sm:320px;--ix-drawer-width-md:320px;--ix-drawer-width-lg:400px}.destructive-icon{color:var(--clr-critical,#db0028);--md-icon-button-icon-color:var(--clr-critical, #DB0028);--md-sys-color-on-surface-variant:var(--clr-critical, #DB0028)}.destructive-icon path{fill:var(--clr-critical,#db0028)}.active-icon{color:var(--clr-primary,#1456e0);--md-icon-button-icon-color:var(--clr-primary, #1456E0);--md-sys-color-on-surface-variant:var(--clr-primary, #1456E0)}.active-icon path{fill:var(--clr-primary,#1456e0)}.inactive-icon{color:var(--clr-on-surface,#092241);--md-icon-button-icon-color:var(--clr-on-surface, #092241);--md-sys-color-on-surface-variant:var(--clr-on-surface, #092241);cursor:default;opacity:.6}.inactive-icon path{fill:var(--clr-on-surface,#092241);opacity:.6}ix-icon-button.sharp{--md-icon-font:'Material Symbols Sharp'!important}.ix-icon-groups{--ix-icon-font-size:32px;--ix-icon-line-height:32px}.ix-icon-groups ix-icon{color:var(--clr-on-surface,#092241);opacity:.6}.ix-icon-groups ix-icon path{fill:var(--clr-on-surface,#092241)}.datefilter-dropdown-content,.filter-dropdown-content{position:absolute;right:5%;top:3rem;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:3;transition:box-shadow .3s cubic-bezier(.4,0,.2,1) 0s;border-radius:3px;box-shadow:rgba(0,0,0,.2) 0 5px 5px -3px,rgba(0,0,0,.14) 0 8px 10px 1px,rgba(0,0,0,.12) 0 3px 14px 2px;background-color:var(--clr-surface-container-lowest,#fff)}.unread{font-family:var(--root-primary-font, 'sans-serif');padding:0 5px;font-size:var(--text-caption-size,.75rem);line-height:var(--text-caption-line-height,1.33333333em);left:22px;top:0;background:var(--clr-critical,#db0028);letter-spacing:var(--text-caption-letter-spacing,.03333333em)}.notification-tooltip{background-color:var(--cp-neutral-blue-4,#040d19);white-space:nowrap;font-size:var(--text-caption-size,.75rem);z-index:9999;color:var(--clr-on-secondary,#fff)}.notification-modal-subtitle,.notification-modal-title{color:var(--clr-on-surface,#092241);font-family:var(--root-secondary-font, 'sans-serif')}.notification-modal-subtitle{font-size:var(--text-heading-size,1.25rem);line-height:var(--text-heading-line-height,1.2em)}.notification-modal-content{display:inline-grid;grid-template-columns:fit-content(183px) 1fr;grid-template-rows:auto auto;grid-column-gap:24px;grid-row-gap:8px;font-family:var(--root-primary-font, 'sans-serif');font-size:var(--text-default-size,16px);line-height:28px;width:560px;padding-bottom:16px;color:var(--clr-on-surface,#092241)}.notification-modal-content-title{width:183px;color:var(--clr-on-surface-variant,#092241B3)}.notification-modal-subject-title{grid-area:1/1/2/2}.notification-modal-subject-text{grid-area:1/2/2/3}.notification-modal-created-date-title{grid-area:2/1/3/2}.notification-modal-created-date-text{grid-area:2/2/3/3}.notification-modal-site-title{grid-area:3/1/4/2}.notification-modal-site-text{grid-area:3/2/4/3}`,ConfirmationDialog=class extends MobxLitElement{constructor(){super(...arguments),this.textMessage="Are you sure?",this.open=!1,this.dialogClosed=()=>{this.dispatchEvent(new CustomEvent("confirm-dialog-closed")),this.onClick(!1)}}static get styles(){return[TWStyles,NotificationsStyle]}onClick(t){t=new CustomEvent("on-confirm-selection",{detail:{returnValue:t},bubbles:!0,composed:!0});this.dispatchEvent(t)}render(){return html`<ix-dialog ?open="${this.open}" class="w-[580px]" @closed="${this.dialogClosed}"><div slot="headline">${this.textMessage}</div><div slot="actions"><div class="flex flex-row justify-end p-1"><ix-button name="cancel" appearance="text" @click="${()=>this.onClick(!1)}">DISMISS</ix-button><ix-button name="confirm" appearance="text" @click="${()=>this.onClick(!0)}">YES</ix-button></div></div></ix-dialog>`}},ViewItemDialog=(__decorate([property({type:String,attribute:!0})],ConfirmationDialog.prototype,"textMessage",void 0),__decorate([property({type:Boolean,attribute:!0})],ConfirmationDialog.prototype,"open",void 0),ConfirmationDialog=__decorate([customElement("confirmation-dialog")],ConfirmationDialog),class extends MobxLitElement{constructor(){super(...arguments),this.notification={},this.open=!1,this.dialogClosed=()=>{this.dispatchEvent(new CustomEvent("view-item-dialog-closed"))},this.viewRecord=()=>{this.dialogClosed(),NotificationsState.showDrawer=!1}}static get styles(){return[TWStyles,NotificationsStyle]}getUrl(){var t=this.notification.resourceId;switch(this.notification.resourceType){case NotificationGroups.PLANNED_MAINTENANCE:return"/service-management/reports?ticketId="+t;case NotificationGroups.SERVICE_TICKETS:switch(this.notification.subGroup){case SubGroups.Remote_Hands:return"/service-management/service-tickets/remote-hands/"+t;case SubGroups.Customer_Care:return"/service-management/service-tickets/customer-care/"+t;case SubGroups.Deliveries:return`/service-management/service-tickets/${SubGroups.Deliveries}/`+t;case SubGroups.Facility_Access:return"/service-management/service-tickets/facility-access/"+t;case SubGroups.Removals:return"/service-management/service-tickets/removals/"+t;case SubGroups.Trouble_Ticket:return"/service-management/service-tickets/trouble-tickets/"+t;case SubGroups.FacilityAccessVisitorAccess:return"/service-management/service-tickets/facility-access/visitor-access/"+t;case SubGroups.FacilityAccessPermanentBadge:return"/service-management/service-tickets/facility-access/permanent-badge/"+t;case SubGroups.FacilityAccessOspAccess:return"/service-management/service-tickets/facility-access/osp-access/"+t;case SubGroups.FacilityAccessPopPoeAccess:return"/service-management/service-tickets/facility-access/pop-poe-access/"+t;default:return""}case NotificationGroups.INCIDENTS:return"/service-management/reports?ticketId="+t;case NotificationGroups.DCIM_ALERTS:return"/dcim/"+t;default:return""}}getLocation(){return void 0===this.notification.locations||this.notification.locations.length<1?"":1<this.notification.locations.length?"Multiple Sites":this.notification.locations[0]}getSubGroupDisplayName(){switch(this.notification.subGroup){case SubGroups.FacilityAccessVisitorAccess:case SubGroups.FacilityAccessPermanentBadge:case SubGroups.FacilityAccessOspAccess:case SubGroups.FacilityAccessPopPoeAccess:return"Facility Access";case"Incidents (GSN)":return"Incidents";case"Emergency Repairs (InSite 1.0)":return"Emergency Repairs";default:return this.notification.subGroup}}render(){return html`<ix-dialog ?open="${this.open}" @closed="${this.dialogClosed}" class="notification-modal" data-testclass="notification-modal"><div slot="headline" class="w-[560px]"><div class="flex flex-col flex-start"><div class="notification-modal-title text-2xl font-bold text-balance">${this.notification.resourceType}</div><div class="notification-modal-subtitle pt-4 pb-0 font-bold text-balance" data-testid="notification-view-item-ticket-type">${this.getSubGroupDisplayName()}</div></div></div><form class="notification-modal-content" slot="content" id="form-id" method="dialog"><div class="notification-modal-content-title notification-modal-subject-title">Subject</div><div class="notification-modal-subject-text font-normal text-wrap" data-testid="notification-view-item-subject">${this.notification.subject}</div><div class="notification-modal-content-title notification-modal-created-date-title">Create Date</div><div class="notification-modal-created-date-text font-normal text-wrap" data-testid="notification-view-item-date">${format(new Date(this.notification.createdAt),"dd/MM/yyyy HH:mm:ss")}</div><div class="notification-modal-content-title notification-modal-site-title">Site</div><div class="notification-modal-site-text font-normal text-wrap" data-testid="notification-view-item-site-text">${this.getLocation()}</div></form><div slot="actions" class="flex flex-row flex-end"><ix-button data-testid="notification-view-item-close" form="form-id" appearance="text">Close</ix-button><ix-button data-testid="notification-view-item-view-record" href="${this.getUrl()}" @click="${this.viewRecord}" appearance="text">View Record</ix-button></div></ix-dialog>`}}),NotificationItem=(__decorate([property({type:Object,attribute:!1})],ViewItemDialog.prototype,"notification",void 0),__decorate([property({type:Boolean,attribute:!0})],ViewItemDialog.prototype,"open",void 0),ViewItemDialog=__decorate([customElement("view-item-dialog")],ViewItemDialog),class extends MobxLitElement{constructor(){super(...arguments),this.disabled=!1,this.read=!1,this.notification={},this.showModal=!1,this.showDeleteConfirmation=!1}static get styles(){return[TWStyles,NotificationsStyle]}displayItem(){this.notification.status===NotificationStatus.UNREAD&&(NotificationsState.setNotificationReadStatus(this.notification.id),this.read=!0),this.showModal=!0}deleteItem(){this.disabled||(this.showDeleteConfirmation=!0)}confirmedDelete(t){t.detail.returnValue&&NotificationsState.setNotificationDeleted(this.notification.id).then(t=>{this.showDeleteResultMessage(t,this.notification.id)}),this.showDeleteConfirmation=!1}showDeleteResultMessage(t,i){window.dispatchEvent(new CustomEvent("add-toast",{detail:{id:i,content:html`<ix-message-toast data-testid="notification-delete-toast" toastId="${i}" .TMessageToast="${t.State.toLowerCase()}" forceClose>${t.Message}</ix-message-toast>`,autoClose:2e3,durationOut:2e3,vertical:"bottom",horizontal:"center",animated:!0,above:!1}}))}calculateDuration(){return void 0!==this.notification.createdAt?differenceInHours(new Date,new Date(this.notification.createdAt))<24?formatDistance(new Date(this.notification.createdAt),new Date,{addSuffix:!0}):html`<ix-date type="static" variant="date-time" .value="${this.notification.createdAt}"></ix-date>`:"N/A"}getNotificationIcon(){switch(this.notification.resourceType){case NotificationGroups.PLANNED_MAINTENANCE:return plannedMaintenance;case NotificationGroups.SERVICE_TICKETS:return"sync_saved_locally";case NotificationGroups.INCIDENTS:return"report";case NotificationGroups.DCIM_ALERTS:return dcim;default:return"sync_saved_locally"}}getNotificationTitle(){switch(this.notification.resourceType){case NotificationGroups.PLANNED_MAINTENANCE:return"Planned Maintenance";case NotificationGroups.SERVICE_TICKETS:return this.getServiceTicketSubGroup()+" Service Ticket Update";case NotificationGroups.INCIDENTS:return"Emergency Repair";case NotificationGroups.DCIM_ALERTS:return"DCIM Alert";default:return"sync_saved_locally"}}getServiceTicketSubGroup(){var t,i;switch(null==(t=this.notification)?void 0:t.subGroup){case SubGroups.FacilityAccessVisitorAccess:case SubGroups.FacilityAccessPermanentBadge:case SubGroups.FacilityAccessOspAccess:case SubGroups.FacilityAccessPopPoeAccess:return"Facility Access";default:return null==(i=this.notification)?void 0:i.subGroup}}render(){return html`<div data-testid="notification-item" class="relative notification-item"><div class="hover:bg-[rgba(0,0,0,0.04)] p-2 pl-3.5 flex gap-3 relative cursor-pointer items-center font-bold ${this.read?"notification-item-read border-l-3 border-transparent":"notification-item-unread border-l-3 border-success"}"><ix-icon style="--ix-icon-font-size:24px;--ix-icon-line-height:24px" icon="${this.getNotificationIcon()}" class="${this.read?"inactive-icon":"active-icon"}" @click="${this.displayItem}">${this.getNotificationIcon()}</ix-icon><div class="flex flex-col grow" @click="${this.displayItem}"><div class="grow text-base"><h2 class="dlr-text-caption">${this.getNotificationTitle()}</h2></div><div class="grow text-xs"><h3 class="dlr-text-caption text-on-surface-disabled">${this.calculateDuration()}</h3></div></div><div><view-item-dialog ?open="${this.showModal}" .notification="${this.notification}" @view-item-dialog-closed="${()=>{this.showModal=!1}}"></view-item-dialog><confirmation-dialog ?open="${this.showDeleteConfirmation}" @on-confirm-selection="${this.confirmedDelete}" @confirm-dialog-closed="${()=>{this.showModal=!1}}" textMessage="Are you sure you want to delete this notification?" data-testclass="notification-delete-confirmation"></confirmation-dialog></div><ix-icon-button style="--md-icon-button-icon-size:24px" data-testclass="delete-notification" @click="${this.deleteItem}" @mouseover="${t=>{this.dispatchEvent(new CustomEvent("show-notification-tooltip",{detail:{label:this.disabled?"Emergency Repair Notification cannot be removed":"Remove Notification",target:t.target}}))}}" @mouseout="${()=>this.dispatchEvent(new CustomEvent("hide-notification-tooltip"))}" ?disabled="${this.disabled}"><ix-icon slot="default" class="${this.disabled?"inactive-icon":"destructive-icon"}">${trash}</ix-icon></ix-icon-button></div></div>`}}),GroupedItem=(__decorate([property({type:Boolean})],NotificationItem.prototype,"disabled",void 0),__decorate([property({type:Boolean})],NotificationItem.prototype,"read",void 0),__decorate([property({type:Object,attribute:!1})],NotificationItem.prototype,"notification",void 0),__decorate([state()],NotificationItem.prototype,"showModal",void 0),__decorate([state()],NotificationItem.prototype,"showDeleteConfirmation",void 0),NotificationItem=__decorate([customElement("notification-item")],NotificationItem),class extends MobxLitElement{constructor(){super(...arguments),this.groupTitle="Group 1",this.groupIcon="public",this.childItems=NotificationsState.notifications,this.isOpen=!1,this.onClick=()=>{this.isOpen=!this.isOpen}}static get styles(){return[TWStyles,NotificationsStyle]}renderNotificationItems(){var t;return this.isOpen?void 0!==(null==(t=this.childItems)?void 0:t.length)&&0<(null==(t=this.childItems)?void 0:t.length)?html`<div>${null==(t=this.childItems)?void 0:t.map(t=>html`<notification-item .notification="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}" data-testclass="notification-item"></notification-item>`)}</div>`:html`<p class="dlr-text-caption ml-14 font-bold mr-4" data-testid="msg-no-notifications">No notifications yet.</p>`:html`${nothing}`}render(){var t;return html`<div class="group-container-row border-b border-outline py-3"><div class="flex items-center justify-between"><div class="flex items-center align-middle"><ix-icon-button icon="${this.isOpen?"arrow_drop_down":"arrow_right"}" @click="${this.onClick}" data-testclass="grouped-item-toggle-expand"></ix-icon-button><ix-icon slot="default" class="ix-icon-groups">${unsafeSVG(this.groupIcon)}</ix-icon><p class="m-0 group-name font-bold pl-1">${this.groupTitle}</p><p class="m-0 pl-4">${null==(t=this.childItems)?void 0:t.length.toString().padStart(2,"0")}</p></div></div>${this.renderNotificationItems()}</div>`}}),GroupFilters=(__decorate([property({type:String,attribute:!0})],GroupedItem.prototype,"groupTitle",void 0),__decorate([property({type:String,attribute:!0})],GroupedItem.prototype,"groupIcon",void 0),__decorate([property({type:Array,attribute:!0})],GroupedItem.prototype,"childItems",void 0),__decorate([state()],GroupedItem.prototype,"isOpen",void 0),GroupedItem=__decorate([customElement("grouped-item")],GroupedItem),class extends MobxLitElement{static get styles(){return[TWStyles,NotificationsStyle]}onSwitchChange(t){var t=t.target,i=null==(i=t.attributes.getNamedItem("name"))?void 0:i.value;NotificationsState.setNotificationFilter(i,t.selected),this.requestUpdate()}render(){return html`<div class="flex flex-col"><label class="whitespace-nowrap p-2 flex gap-3 items-center hover:bg-primary-subtle"><ix-switch data-testid="planned-maintenance-switch" class="flex" name="${NotificationGroups.PLANNED_MAINTENANCE}" selected="${NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE}" @change="${this.onSwitchChange}"></ix-switch><span>Planned Maintenance</span></label> <label class="whitespace-nowrap p-2 flex gap-3 items-center hover:bg-primary-subtle"><ix-switch data-testid="service-tickets-switch" class="flex" name="${NotificationGroups.SERVICE_TICKETS}" selected="${NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS}" @change="${this.onSwitchChange}"></ix-switch><span>Service Ticket Updates</span></label> <label class="whitespace-nowrap p-2 flex gap-3 items-center hover:bg-primary-subtle"><ix-switch data-testid="dcim-alerts-switch" class="flex" name="${NotificationGroups.DCIM_ALERTS}" selected="${NotificationsState.notificationFilters.SHOW_DCIM_ALERTS}" @change="${this.onSwitchChange}"></ix-switch><span>${NotificationGroups.DCIM_ALERTS}</span></label></div>`}}),DateFilters=(GroupFilters=__decorate([customElement("group-filters")],GroupFilters),class extends MobxLitElement{constructor(){super(...arguments),this.fromDate=isNullOrUndefinedOrEmpty(NotificationsState.dateFilters.FROM_DATE)?void 0:format(NotificationsState.dateFilters.FROM_DATE,DefaultDateFormat),this.toDate=isNullOrUndefinedOrEmpty(NotificationsState.dateFilters.TO_DATE)?void 0:format(NotificationsState.dateFilters.TO_DATE,DefaultDateFormat),this.maxDate=format(new Date,DefaultDateFormat),this.fromDateErrorText="",this.toDateErrorText=""}static get styles(){return[TWStyles,NotificationsStyle]}onFromDateChange(t){null===t||""===t?this.fromDate=void 0:(this.fromDate=t,void 0!==this.fromDate&&(this.fromDateErrorText=void 0))}onToDateChange(t){null===t||""===t?this.toDate=void 0:(this.toDate=t,void 0!==this.toDate&&(this.toDateErrorText=void 0))}onApplyDateFilter(t){if(t){if(void 0===this.toDate&&void 0!==this.fromDate)return void(this.toDateErrorText="Please select to date");if(void 0===this.fromDate&&void 0!==this.toDate)return void(this.fromDateErrorText="Please select from date");if(this.fromDate>this.toDate)return this.fromDateErrorText="From date cannot be later than To date.",void(this.fromDate=void 0);if(this.fromDateErrorText=void 0,this.toDate<this.fromDate)return this.toDateErrorText="To date cannot be earlier than From date.",void(this.toDate=void 0);this.toDateErrorText=void 0}t=t&&void 0===this.toDateErrorText&&void 0===this.fromDateErrorText,t&&(NotificationsState.setNotificationDateFilter(this.fromDate,this.toDate),this.requestUpdate()),t=new CustomEvent("on-selection",{detail:{returnValue:t},bubbles:!0,composed:!0});this.dispatchEvent(t)}clearDateFilters(){this.fromDate=void 0,this.toDate=void 0,this.fromDateErrorText=void 0,this.toDateErrorText=void 0}render(){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 data-testid="notifications-clear-date-filter" small appearance="default" icon="domain_verification_off" class="active-icon"></ix-icon-button></div></div><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 my-4"><div class="flex gap-2"><ix-date data-testid="notifications-from-date" .value="${this.fromDate}" max="${this.maxDate}" label="From" name="FromDate" .errorText="${this.fromDateErrorText}" .onChanged="${t=>this.onFromDateChange(t)}"></ix-date><ix-date data-testid="notifications-to-date" .value="${this.toDate}" max="${this.maxDate}" label="To" name="ToDate" .errorText="${this.toDateErrorText}" .onChanged="${t=>this.onToDateChange(t)}"></ix-date></div></div><div class="flex flex-row justify-between"><ix-button data-testid="notifications-cancel-date-filter" type="" target="" appearance="text" @click="${()=>this.onApplyDateFilter(!1)}">Cancel</ix-button><ix-button data-testid="notifications-activate-date-filter" type="" target="" appearance="text" @click="${()=>this.onApplyDateFilter(!0)}">Filter List</ix-button></div></div>`}}),NotificationTooltip=(__decorate([state()],DateFilters.prototype,"fromDate",void 0),__decorate([state()],DateFilters.prototype,"toDate",void 0),__decorate([state()],DateFilters.prototype,"maxDate",void 0),__decorate([state()],DateFilters.prototype,"fromDateErrorText",void 0),__decorate([state()],DateFilters.prototype,"toDateErrorText",void 0),DateFilters=__decorate([customElement("date-filters")],DateFilters),class extends MobxLitElement{constructor(){super(...arguments),this.isVisible=!1,this.label="",this.hoveredElement=void 0,this.configureNotificationTooltip=t=>{var{label:t,target:i}=t.detail;this.hoveredElement=i,this.label=t,this.isVisible=!0},this.hideNotificationTooltip=()=>{this.isVisible=!1,this.hoveredElement=void 0,this.label=""}}static get styles(){return[TWStyles,NotificationsStyle]}connectedCallback(){super.connectedCallback(),window.addEventListener("show-notification-tooltip",this.configureNotificationTooltip),window.addEventListener("hide-notification-tooltip",this.hideNotificationTooltip)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("show-notification-tooltip",this.configureNotificationTooltip),window.removeEventListener("hide-notification-tooltip",this.hideNotificationTooltip)}updated(t){t.has("hoveredElement")&&this.isVisible&&this.hoveredElement&&computePosition(this.hoveredElement,this.notificationTooltip,{placement:"bottom-end"}).then(({x:t,y:i})=>{this.notificationTooltip.style.left=t+"px",this.notificationTooltip.style.top=i+12+"px"})}render(){var t={hidden:!this.isVisible};return html`<div class="notification-tooltip z-[9999] rounded absolute p-2 white-text ${classMap(t)}">${this.label}</div><slot></slot>`}});__decorate([query(".notification-tooltip")],NotificationTooltip.prototype,"notificationTooltip",void 0),__decorate([property({type:Boolean,reflect:!0})],NotificationTooltip.prototype,"isVisible",void 0),__decorate([property({type:String,reflect:!0})],NotificationTooltip.prototype,"label",void 0),__decorate([state()],NotificationTooltip.prototype,"hoveredElement",void 0),NotificationTooltip=__decorate([customElement("notification-tooltip")],NotificationTooltip);class IxNotifications extends MobxLitElement{constructor(){super(...arguments),this.showGroupedView=!1,this.showFilters=!1,this.showDateFilters=!1,this.showMarkAllReadConfirmation=!1,this.baseApiUrl="",this.localStorageKey=""}async firstUpdated(){NotificationsState.baseApiUrl=this.baseApiUrl,NotificationsState.localStorageKey=this.localStorageKey,NotificationsState.ConstructApiClient()}connectedCallback(){super.connectedCallback(),window.addEventListener("account-switched",NotificationsState.NewApiClient),window.addEventListener("ix-notifications-toggle-drawer",this.toggleDrawer),window.addEventListener("beforeunload",this.handleOnbeforeunload)}disconnectedCallback(){super.disconnectedCallback(),this.handleOnbeforeunload(),window.removeEventListener("account-switched",NotificationsState.NewApiClient),window.removeEventListener("ix-notifications-toggle-drawer",this.toggleDrawer),window.removeEventListener("beforeunload",this.handleOnbeforeunload)}handleOnbeforeunload(){NotificationsState.clearStoredNotificationsData()}toggleDrawer(){NotificationsState.showDrawer=!NotificationsState.showDrawer,NotificationsState.showDrawer||(this.showFilters=!1,this.showDateFilters=!1)}markAllread(){0<NotificationsState.unreadNotificationCount&&(this.showMarkAllReadConfirmation=!0)}async confirmedMarkAllRead(t){if(t.detail.returnValue){try{var i=await NotificationsState.setAllNotificationAsRead();this.showResultMessage({State:ApiCallState.SUCCESS,Message:`Successfully marked ${i.updatedCount} notifications as read`},"all-read")}catch(t){this.showResultMessage({State:ApiCallState.ERROR,Message:"Error while marking the notifications read, Please try again"},"all-read")}this.requestUpdate()}this.showMarkAllReadConfirmation=!1}showResultMessage(t,i){window.dispatchEvent(new CustomEvent("add-toast",{detail:{id:i,content:html`<ix-message-toast data-testid="notification-read-all-toast" toastId="${i}" .TMessageToast="${t.State.toLowerCase()}" forceClose>${t.Message}</ix-message-toast>`,autoClose:3e3,durationOut:3e3,vertical:"bottom",horizontal:"center",animated:!0,above:!1}}))}toggleGroupView(){this.showGroupedView=!this.showGroupedView}displayFilters(){this.showFilters=!this.showFilters}applyNotificationFilters(){var t=null==(t=NotificationsState.notifications)?void 0:t.filter(t=>t.resourceType===NotificationGroups.PLANNED_MAINTENANCE&&!0===NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE||t.resourceType===NotificationGroups.SERVICE_TICKETS&&!0===NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS||t.resourceType===NotificationGroups.DCIM_ALERTS&&!0===NotificationsState.notificationFilters.SHOW_DCIM_ALERTS||t.resourceType===NotificationGroups.INCIDENTS);return void 0!==NotificationsState.dateFilters.FROM_DATE&&void 0!==NotificationsState.dateFilters.TO_DATE?t.filter(t=>0<=differenceInHours(new Date(t.createdAt),NotificationsState.dateFilters.FROM_DATE)&&differenceInDays(new Date(t.createdAt),NotificationsState.dateFilters.TO_DATE)<=0):void 0!==NotificationsState.dateFilters.FROM_DATE&&void 0===NotificationsState.dateFilters.TO_DATE?t.filter(t=>0<=differenceInHours(new Date(t.createdAt),NotificationsState.dateFilters.FROM_DATE)):void 0===NotificationsState.dateFilters.FROM_DATE&&void 0!==NotificationsState.dateFilters.TO_DATE?t.filter(t=>differenceInDays(new Date(t.createdAt),NotificationsState.dateFilters.TO_DATE)<=0):t}displayDateFilters(){this.showDateFilters=!this.showDateFilters}renderGroupedView(){var t=this.applyNotificationFilters();return html`<div class="-mx-4 -mt-2"><grouped-item data-testid="planned-maintenance-group" groupTitle="Planned Maintenance" groupIcon="${plannedMaintenance.strings[0]}" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.PLANNED_MAINTENANCE)}"></grouped-item><grouped-item data-testid="emergency-repairs-group" groupTitle="Emergency Repairs" groupIcon="report" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.INCIDENTS)}"></grouped-item><grouped-item data-testid="service-ticket-updates-group" groupTitle="Service Ticket Updates" groupIcon="sync_saved_locally" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.SERVICE_TICKETS)}"></grouped-item><grouped-item data-testid="dcim-alerts-group" groupTitle="${NotificationGroups.DCIM_ALERTS}" groupIcon="${dcim.strings[0]}" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.DCIM_ALERTS)}"></grouped-item></div>`}renderDefaultView(){var t=this.applyNotificationFilters(),i=t.filter(t=>0===differenceInDays(new Date(t.createdAt),new Date)),e=t.filter(t=>0!==differenceInDays(new Date(t.createdAt),new Date));return 0<(null==t?void 0:t.length)?html`<h3>Today</h3>${0<i.length?html`<div class="-mx-4">${null==i?void 0:i.map(t=>html`<notification-item ?read="${t.status!==NotificationStatus.UNREAD}" data-testclass="today-notification" .notification="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}"></notification-item>`)}</div>`:this.renderNoResult()}<h3>Earlier</h3>${0<e.length?html`<div class="-mx-4" data-testid="earlier-notifications">${null==e?void 0:e.map(t=>html`<notification-item ?read="${t.status!==NotificationStatus.UNREAD}" data-testclass="earlier-notification" .notification="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}"></notification-item>`)}</div>`:this.renderNoResult()}`:html`<h3>Today</h3>${this.renderNoResult()}`}renderNoResult(){return html`<p class="dlr-text-caption my-4"><strong>No notifications yet.</strong></p>`}handleCloseClick(t){this.showDateFilters=!1,this.showFilters=!1}handleContentScroll(t){null!==t&&t.detail.scrollTop+t.detail.clientHeight>=t.detail.scrollHeight-2&&NotificationsState.getNotifications()}manageFilterVisibility(t){t=t.composedPath();!this.showFilters||t.includes(this.groupFilters)||t.includes(this.groupFiltersButton)||(this.showFilters=!1),!this.showDateFilters||t.includes(this.dateFilters)||t.includes(this.dateFiltersButton)||(this.showDateFilters=!1)}render(){return html`<notification-tooltip data-testid="notifications-tooltip"></notification-tooltip><confirmation-dialog data-testid="notifications-confirm-read-dialog" ?open="${this.showMarkAllReadConfirmation}" @confirm-dialog-closed="${()=>{this.showMarkAllReadConfirmation=!1}}" @on-confirm-selection="${this.confirmedMarkAllRead}" textMessage="Are you sure you want to mark all notifications as read?"></confirmation-dialog><ix-drawer data-testid="notifications-drawer" ?isVisible="${NotificationsState.showDrawer}" .onClosed="${()=>this.toggleDrawer()}" animate-vertical hide-close @on-content-scroll="${this.handleContentScroll}" @click="${this.manageFilterVisibility}" compact="compact"><div slot="content" class="m-4"><div class="flex flex-row justify-between grow items-center notification-header-container mb-4"><h2 data-testid="notifications-heading" 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 data-testid="notifications-cta-all-read" data-testclass="notifications-cta" @click="${this.markAllread}" @mouseover="${t=>{0<NotificationsState.unreadNotificationCount&&window.dispatchEvent(new CustomEvent("show-notification-tooltip",{detail:{label:"Mark All Read",target:t.target}}))}}" @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 data-testid="notifications-cta-sort-type" data-testclass="notifications-cta" @click="${this.toggleGroupView}" @mouseover="${t=>{window.dispatchEvent(new CustomEvent("show-notification-tooltip",{detail:{label:"Sort by Type",target:t.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></ix-icon-button><ix-icon-button data-testid="notifications-cta-filter-type" data-testclass="notifications-cta" @click="${this.displayFilters}" @mouseover="${t=>{window.dispatchEvent(new CustomEvent("show-notification-tooltip",{detail:{label:"Filter by Type",target:t.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 data-testid="notifications-filter-dropdown" class="filter-dropdown-content ${this.showFilters?"active z-50":"hidden"}"><group-filters></group-filters></div><ix-icon-button data-testid="notifications-cta-filter-date" data-testclass="notifications-cta" @click="${this.displayDateFilters}" @mouseover="${t=>{window.dispatchEvent(new CustomEvent("show-notification-tooltip",{detail:{label:"Filter by Date",target:t.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 data-testid="notifications-date-filter-dropdown" class="datefilter-dropdown-content ${this.showDateFilters?"active z-50":"hidden"}" @on-selection="${this.handleCloseClick}"><date-filters></date-filters></div></div></div>${this.showGroupedView?this.renderGroupedView():this.renderDefaultView()}</div></ix-drawer>`}}IxNotifications.styles=[TWStyles,NotificationsStyle],__decorate([query("group-filters")],IxNotifications.prototype,"groupFilters",void 0),__decorate([query("ix-icon-button#group-filter-button")],IxNotifications.prototype,"groupFiltersButton",void 0),__decorate([query("date-filters")],IxNotifications.prototype,"dateFilters",void 0),__decorate([query("ix-icon-button#date-filters-button")],IxNotifications.prototype,"dateFiltersButton",void 0),__decorate([state()],IxNotifications.prototype,"showGroupedView",void 0),__decorate([state()],IxNotifications.prototype,"showFilters",void 0),__decorate([state()],IxNotifications.prototype,"showDateFilters",void 0),__decorate([state()],IxNotifications.prototype,"showMarkAllReadConfirmation",void 0),__decorate([property({type:String})],IxNotifications.prototype,"baseApiUrl",void 0),__decorate([property({type:String})],IxNotifications.prototype,"localStorageKey",void 0),window.customElements.define("ix-notifications",IxNotifications);

package/dist/test/view-item.test.js

@@ -39,7 +39,7 @@ describe('notification item', () => {
         });
         expect(readItemsInfo.length).to.equal(readItemsCount + 1);
         await executeServerCommand('mouseFocusInfo', {
-            selector: '[data-testclass="notification-modal"][open] [data-testclass="close-item-modal"]',
+            selector: '[data-testclass="notification-modal"][open] [data-testid="notification-view-item-close"]',
         });
         await sendKeys({
             press: 'Space',

package/dist/test/view-item.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"view-item.test.js","sourceRoot":"","sources":["../../test/view-item.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, aTimeout } from '@open-wc/testing';\nimport {\n  executeServerCommand,\n  sendKeys,\n  sendMouse,\n} from '@web/test-runner-commands';\nimport '../src/testHarness.js';\nimport {\n  mockDataMeta,\n  fixtureBeforeEach,\n  fixtureBefore,\n  fixtureAfterEach,\n  TelemInfo,\n  screenshotAndCompare,\n} from './utils/helpers.js';\n\ndescribe('notification item', () => {\n  before(async () => {\n    await fixtureBefore();\n  });\n\n  beforeEach(async () => {\n    await fixtureBeforeEach();\n  });\n\n  afterEach(async () => {\n    fixtureAfterEach();\n  });\n\n  it('should mark item as read and open, close and re-open a popover when the item is clicked', async () => {\n    let readItemsInfo: TelemInfo[] = await executeServerCommand(\n      'mouseFocusInfo',\n      {\n        selector: '[data-testclass=\"earlier-notification\"][read]',\n        action: 'info',\n      }\n    );\n\n    const readItemsCount = readItemsInfo.length;\n\n    expect(readItemsCount).to.equal(mockDataMeta.readCount);\n\n    const lastItemPosition: [number, number] = await executeServerCommand(\n      'mouseFocusInfo',\n      {\n        selector: '[data-testclass=\"earlier-notification\"]:not([read])',\n        action: 'mouse',\n      }\n    );\n\n    await sendMouse({\n      type: 'click',\n      position: lastItemPosition,\n    });\n\n    let modalInfo: TelemInfo[] = await executeServerCommand('mouseFocusInfo', {\n      selector: '[data-testclass=\"notification-modal\"][open]',\n      action: 'info',\n    });\n\n    expect(modalInfo.length).to.equal(1);\n\n    await screenshotAndCompare('item-modal');\n\n    readItemsInfo = await executeServerCommand('mouseFocusInfo', {\n      selector: '[data-testclass=\"earlier-notification\"][read]',\n      action: 'info',\n    });\n\n    expect(readItemsInfo.length).to.equal(readItemsCount + 1);\n\n    await executeServerCommand('mouseFocusInfo', {\n      selector:\n        '[data-testclass=\"notification-modal\"][open] [data-testclass=\"close-item-modal\"]',\n    });\n\n    await sendKeys({\n      press: 'Space',\n    });\n\n    await screenshotAndCompare('after-read-item-modal');\n\n    modalInfo = await executeServerCommand('mouseFocusInfo', {\n      selector: '[data-testclass=\"notification-modal\"][open]',\n      action: 'info',\n    });\n\n    expect(modalInfo.length).to.equal(0);\n\n    await sendMouse({\n      type: 'click',\n      position: lastItemPosition,\n    });\n\n    modalInfo = await executeServerCommand('mouseFocusInfo', {\n      selector: '[data-testclass=\"notification-modal\"][open]',\n      action: 'info',\n    });\n\n    expect(modalInfo.length).to.equal(1);\n\n    // test toggling the modal off of the background to make sure it it re-opens\n    await sendMouse({\n      type: 'click',\n      position: [100, 100],\n    });\n\n    await aTimeout(300);\n\n    modalInfo = await executeServerCommand('mouseFocusInfo', {\n      selector: '[data-testclass=\"notification-modal\"][open]',\n      action: 'info',\n    });\n\n    expect(modalInfo.length).to.equal(0);\n\n    await sendMouse({\n      type: 'click',\n      position: lastItemPosition,\n    });\n\n    modalInfo = await executeServerCommand('mouseFocusInfo', {\n      selector: '[data-testclass=\"notification-modal\"][open]',\n      action: 'info',\n    });\n\n    expect(modalInfo.length).to.equal(1);\n  });\n});\n"]}
+{"version":3,"file":"view-item.test.js","sourceRoot":"","sources":["../../test/view-item.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, aTimeout } from '@open-wc/testing';\nimport {\n  executeServerCommand,\n  sendKeys,\n  sendMouse,\n} from '@web/test-runner-commands';\nimport '../src/testHarness.js';\nimport {\n  mockDataMeta,\n  fixtureBeforeEach,\n  fixtureBefore,\n  fixtureAfterEach,\n  TelemInfo,\n  screenshotAndCompare,\n} from './utils/helpers.js';\n\ndescribe('notification item', () => {\n  before(async () => {\n    await fixtureBefore();\n  });\n\n  beforeEach(async () => {\n    await fixtureBeforeEach();\n  });\n\n  afterEach(async () => {\n    fixtureAfterEach();\n  });\n\n  it('should mark item as read and open, close and re-open a popover when the item is clicked', async () => {\n    let readItemsInfo: TelemInfo[] = await executeServerCommand(\n      'mouseFocusInfo',\n      {\n        selector: '[data-testclass=\"earlier-notification\"][read]',\n        action: 'info',\n      }\n    );\n\n    const readItemsCount = readItemsInfo.length;\n\n    expect(readItemsCount).to.equal(mockDataMeta.readCount);\n\n    const lastItemPosition: [number, number] = await executeServerCommand(\n      'mouseFocusInfo',\n      {\n        selector: '[data-testclass=\"earlier-notification\"]:not([read])',\n        action: 'mouse',\n      }\n    );\n\n    await sendMouse({\n      type: 'click',\n      position: lastItemPosition,\n    });\n\n    let modalInfo: TelemInfo[] = await executeServerCommand('mouseFocusInfo', {\n      selector: '[data-testclass=\"notification-modal\"][open]',\n      action: 'info',\n    });\n\n    expect(modalInfo.length).to.equal(1);\n\n    await screenshotAndCompare('item-modal');\n\n    readItemsInfo = await executeServerCommand('mouseFocusInfo', {\n      selector: '[data-testclass=\"earlier-notification\"][read]',\n      action: 'info',\n    });\n\n    expect(readItemsInfo.length).to.equal(readItemsCount + 1);\n\n    await executeServerCommand('mouseFocusInfo', {\n      selector:\n        '[data-testclass=\"notification-modal\"][open] [data-testid=\"notification-view-item-close\"]',\n    });\n\n    await sendKeys({\n      press: 'Space',\n    });\n\n    await screenshotAndCompare('after-read-item-modal');\n\n    modalInfo = await executeServerCommand('mouseFocusInfo', {\n      selector: '[data-testclass=\"notification-modal\"][open]',\n      action: 'info',\n    });\n\n    expect(modalInfo.length).to.equal(0);\n\n    await sendMouse({\n      type: 'click',\n      position: lastItemPosition,\n    });\n\n    modalInfo = await executeServerCommand('mouseFocusInfo', {\n      selector: '[data-testclass=\"notification-modal\"][open]',\n      action: 'info',\n    });\n\n    expect(modalInfo.length).to.equal(1);\n\n    // test toggling the modal off of the background to make sure it it re-opens\n    await sendMouse({\n      type: 'click',\n      position: [100, 100],\n    });\n\n    await aTimeout(300);\n\n    modalInfo = await executeServerCommand('mouseFocusInfo', {\n      selector: '[data-testclass=\"notification-modal\"][open]',\n      action: 'info',\n    });\n\n    expect(modalInfo.length).to.equal(0);\n\n    await sendMouse({\n      type: 'click',\n      position: lastItemPosition,\n    });\n\n    modalInfo = await executeServerCommand('mouseFocusInfo', {\n      selector: '[data-testclass=\"notification-modal\"][open]',\n      action: 'info',\n    });\n\n    expect(modalInfo.length).to.equal(1);\n  });\n});\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-notifications following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.2.16",
+  "version": "1.2.18",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -41,16 +41,16 @@
   },
   "dependencies": {
     "@adobe/lit-mobx": "^2.2.2",
-    "@digital-realty/ix-app-logic": "^1.2.13",
-    "@digital-realty/ix-button": "^3.4.1",
-    "@digital-realty/ix-date": "^1.2.1",
-    "@digital-realty/ix-dialog": "^1.2.4",
+    "@digital-realty/ix-app-logic": "^1.2.15",
+    "@digital-realty/ix-button": "^3.4.2",
+    "@digital-realty/ix-date": "^1.2.2",
+    "@digital-realty/ix-dialog": "^1.2.5",
     "@digital-realty/ix-divider": "^1.2.1",
-    "@digital-realty/ix-drawer": "^1.2.4",
-    "@digital-realty/ix-icon": "^1.2.1",
-    "@digital-realty/ix-icon-button": "^1.2.1",
-    "@digital-realty/ix-switch": "^2.3.1",
-    "@digital-realty/ix-toast": "^1.2.1",
+    "@digital-realty/ix-drawer": "^1.2.5",
+    "@digital-realty/ix-icon": "^1.2.2",
+    "@digital-realty/ix-icon-button": "^1.2.2",
+    "@digital-realty/ix-switch": "^2.3.2",
+    "@digital-realty/ix-toast": "^1.2.2",
     "@digital-realty/ix-twlit": "1.0.1",
     "@floating-ui/dom": "^1.6.8",
     "@material/web": "1.2.0",
@@ -151,5 +151,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "de016c330e208cf23bc15b495e5a5920ac60304a"
+  "gitHead": "d8a6e101af3defd638191947278f0757c4dab00b"
 }