@digital-realty/ix-notifications 1.0.5 → 1.0.6

package/dist/IxNotifications.js

@@ -59,8 +59,7 @@ export class IxNotifications extends MobxLitElement {
             unreadCountText = NotificationsState.unreadNotificationCount.toString();
         }
         return html ` <div
-      class="px-1 bg-red-500 rounded-full text-center text-white text-sm absolute icon-position -start-0"
-      style="top:0.05rem ;left: 1.5rem;"
+      class="unread rounded-full text-center text-white text-sm absolute icon-position -start-0"
     >
       ${unreadCountText}
     </div>`;
@@ -137,9 +136,7 @@ export class IxNotifications extends MobxLitElement {
         const filterTodayItems = filterNotification.filter(x => differenceInDays(x.createdAt, new Date()) === 0);
         const filterEarlierItems = filterNotification.filter(x => differenceInDays(x.createdAt, new Date()) !== 0);
         if ((filterNotification === null || filterNotification === void 0 ? void 0 : filterNotification.length) > 0) {
-            return html ` <div class="grow text-sm font-bold py-4 pl-2 align-top">
-          Latest
-        </div>
+            return html ` <h3 class="grow">Latest</h3>
         <div class="m-0 p-0">
           ${filterTodayItems.length > 0
                 ? filterTodayItems === null || filterTodayItems === void 0 ? void 0 : filterTodayItems.map(item => html `<notification-item
@@ -150,7 +147,7 @@ export class IxNotifications extends MobxLitElement {
                 </notification-item> `)
                 : this.renderNoResult()}
         </div>
-        <div class="grow text-sm font-bold py-4 pl-2 align-top">Earlier</div>
+        <h3 class="grow">Earlier</h3>
         <div>
           ${filterEarlierItems.length > 0
                 ? filterEarlierItems === null || filterEarlierItems === void 0 ? void 0 : filterEarlierItems.map(item => html `<notification-item
@@ -162,15 +159,11 @@ export class IxNotifications extends MobxLitElement {
                 : this.renderNoResult()}
         </div>`;
         }
-        return html `<p class="m-0 pl-4 font-bold mr-4">
-      <small style="padding-left: 16px">No notifications yet.</small>
-    </p>`;
+        return html `<p class="empty">No notifications yet.</p>`;
     }
     /* eslint-disable-next-line */
     renderNoResult() {
-        return html `<p class="m-0 pl-4 font-bold mr-4">
-      <small style="padding-left: 16px">No notifications yet.</small>
-    </p>`;
+        return html `<p class="empty">No notifications yet.</p>`;
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     handleCloseClick(_e) {
@@ -189,7 +182,7 @@ export class IxNotifications extends MobxLitElement {
         return html `
       <div class="relative">
         <ix-icon-button
-          icon="circle_notifications"
+          icon="notifications"
           class="blue-icon"
           @click=${() => this.toggleDrawer()}
         >
@@ -213,13 +206,11 @@ export class IxNotifications extends MobxLitElement {
         @on-content-scroll=${this.handleContentScroll}
       >
         <div class="flex flex-row justify-between grow py-2" slot="header">
-          <div class="grow text-xl items-center  font-bold py-4 pl-2 align-top">
-            Notifications
-          </div>
-          <div class="flex flex-row justify-end grow items-center ">
+          <h2 class="grow items-center notification-header">Notifications</h2>
+          <div class="flex flex-row justify-end grow items-center options">
             <ix-icon-button
               @click=${this.markAllread}
-              icon="fact_check"
+              icon="markunread_mailbox"
               class="blue-icon"
             ></ix-icon-button>
             <ix-icon-button
@@ -229,7 +220,7 @@ export class IxNotifications extends MobxLitElement {
             ></ix-icon-button>
             <ix-icon-button
               @click=${this.displayFilters}
-              icon="menu"
+              icon="list"
               class="blue-icon"
             ></ix-icon-button>
             <div

package/dist/IxNotifications.js.map

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

package/dist/components/notifications/notification-item.d.ts

@@ -1,5 +1,6 @@
 import { MobxLitElement } from '@adobe/lit-mobx';
 import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-icon/ix-icon.js';
 import { Notification } from '../../models/notification.js';
 import './confirmation-dialog.js';
 import './view-item-dialog.js';

package/dist/components/notifications/notification-item.js

@@ -1,8 +1,9 @@
 import { __decorate } from "tslib";
-import { html } from 'lit';
+import { html, css } from 'lit';
 import { MobxLitElement } from '@adobe/lit-mobx';
 import { customElement, property, state } from 'lit/decorators.js';
 import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-icon/ix-icon.js';
 import { elementTheme } from '@digital-realty/theme';
 import { format, formatDistance, differenceInHours } from 'date-fns';
 import { TWStyles } from '../../tw.js';
@@ -20,7 +21,41 @@ let NotificationItem = class NotificationItem extends MobxLitElement {
         this.showDeleteConfirmation = false;
     }
     static get styles() {
-        return [NotificationsStyle, elementTheme, TWStyles];
+        return [
+            NotificationsStyle,
+            elementTheme,
+            TWStyles,
+            css `
+        h2 {
+          font-family: 'Open Sans', sans-serif;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 16px;
+          letter-spacing: 0.4px;
+          text-align: left;
+        }
+        h3 {
+          font-family: 'Open Sans', sans-serif;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 16px;
+          letter-spacing: 0.4px;
+          text-align: left;
+          color: rgba(9, 34, 65, 0.6);
+          padding: 0;
+        }
+        ix-icon {
+          --ix-icon-font-size: 24px;
+          --ix-icon-line-height: 24px;
+          color: var(--md-sys-text-color-primary);
+        }
+        .notification-item ix-icon {
+          margin-top: 6px;
+          margin-right: 12px;
+          color: rgb(20, 86, 224);
+        }
+      `,
+        ];
     }
     displayItem() {
         if (this.notificaiton.status === NotificationStatus.UNREAD) {
@@ -67,26 +102,26 @@ let NotificationItem = class NotificationItem extends MobxLitElement {
     render() {
         var _a, _b, _c;
         return html `
-      <div class="relative bg-white-gp ">
+      <div class="relative bg-white-gp notification-item">
         <div
           class=${((_a = this.notificaiton) === null || _a === void 0 ? void 0 : _a.status) === 'unread'
             ? 'notification-item-unread'
             : 'notification-item-read'}
         >
-          <ix-icon-button
+          <ix-icon
             icon=${this.GetNotificationIcon()}
             class=${((_b = this.notificaiton) === null || _b === void 0 ? void 0 : _b.status) === 'unread'
             ? 'blue-icon'
             : 'grey-icon'}
             @click=${this.displayItem}
-          >
-          </ix-icon-button>
+            >${this.GetNotificationIcon()}
+          </ix-icon>
           <div class="flex flex-col grow" @click=${this.displayItem}>
-            <div class="grow text-base py-1">
-              <h1>${(_c = this.notificaiton) === null || _c === void 0 ? void 0 : _c.resourceType}</h1>
+            <div class="grow text-base pt-1">
+              <h2>${(_c = this.notificaiton) === null || _c === void 0 ? void 0 : _c.resourceType}</h2>
             </div>
             <div class="grow text-xs pb-2">
-              <h1>${this.calculateDuration()}</h1>
+              <h3>${this.calculateDuration()}</h3>
             </div>
           </div>
           <div>

package/dist/components/notifications/notification-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-item.js","sourceRoot":"","sources":["../../../src/components/notifications/notification-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,kDAAkD,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAEtE,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,0BAA0B,CAAC;AAClC,OAAO,uBAAuB,CAAC;AAGxB,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;IAA7C;;QACwB,aAAQ,GAAG,KAAK,CAAC;QAEA,iBAAY,GACxD,EAAkB,CAAC;QAEJ,cAAS,GAAG,KAAK,CAAC;QAElB,2BAAsB,GAAG,KAAK,CAAC;IA0GlD,CAAC;IAxGC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,kBAAkB,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC;IACtD,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,kBAAkB,CAAC,MAAM,EAAE;YAC1D,kBAAkB,CAAC,yBAAyB,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;SACpE;QACD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;SACpC;IACH,CAAC;IAEO,eAAe,CAAC,CAA6C;QACnE,2BAA2B;QAC3B,IAAI,CAAC,CAAC,MAAM,CAAC,WAAW;YACtB,kBAAkB,CAAC,sBAAsB,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;QAElE,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;IACtC,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,KAAK,SAAS,EAAE;YAC7C,IAAI,iBAAiB,CAAC,IAAI,IAAI,EAAE,EAAE,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,EAAE;gBACjE,OAAO,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,IAAI,EAAE,EAAE;oBAC7D,SAAS,EAAE,IAAI;iBAChB,CAAC,CAAC;YACL,OAAO,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,qBAAqB,CAAC,CAAC;SACnE;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,mBAAmB;QACjB,QAAQ,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE;YACtC,KAAK,kBAAkB,CAAC,mBAAmB;gBACzC,OAAO,aAAa,CAAC;YACvB,KAAK,kBAAkB,CAAC,eAAe;gBACrC,OAAO,KAAK,CAAC;YACf,KAAK,kBAAkB,CAAC,SAAS;gBAC/B,OAAO,gBAAgB,CAAC;YAC1B,KAAK,kBAAkB,CAAC,WAAW;gBACjC,OAAO,QAAQ,CAAC;YAClB;gBACE,OAAO,oBAAoB,CAAC;SAC/B;IACH,CAAC;IAED,0DAA0D;IAC1D,MAAM;;QACJ,OAAO,IAAI,CAAA;;;kBAGG,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,MAAK,QAAQ;YAC5C,CAAC,CAAC,0BAA0B;YAC5B,CAAC,CAAC,wBAAwB;;;mBAGnB,IAAI,CAAC,mBAAmB,EAAE;oBACzB,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,MAAK,QAAQ;YAC5C,CAAC,CAAC,WAAW;YACb,CAAC,CAAC,WAAW;qBACN,IAAI,CAAC,WAAW;;;mDAGc,IAAI,CAAC,WAAW;;oBAE/C,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY;;;oBAG/B,IAAI,CAAC,iBAAiB,EAAE;;;;;sBAKtB,IAAI,CAAC,SAAS;8BACN,IAAI,CAAC,YAAY;yCACN,GAAG,EAAE;YAC9B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;;;;sBAIO,IAAI,CAAC,sBAAsB;sCACX,IAAI,CAAC,eAAe;uCACnB,GAAG,EAAE;YAC5B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;;;;;;qBAMM,IAAI,CAAC,UAAU;;oBAEhB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW;;;;KAIxD,CAAC;IACJ,CAAC;CACF,CAAA;AAjH8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAkB;AAEA;IAA7C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;sDACxB;AAEZ;IAAR,KAAK,EAAE;mDAA2B;AAE1B;IAAR,KAAK,EAAE;gEAAwC;AARrC,gBAAgB;IAD5B,aAAa,CAAC,mBAAmB,CAAC;GACtB,gBAAgB,CAkH5B;SAlHY,gBAAgB","sourcesContent":["import { html } from 'lit';\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 { elementTheme } from '@digital-realty/theme';\nimport { format, formatDistance, differenceInHours } from 'date-fns';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { Notification } from '../../models/notification.js';\nimport {\n  NotificationStatus,\n  DefaultDateTimeFormat,\n  NotificationGroups,\n} from '../../constants/notifications.js';\nimport { ConfirmationDialogEventDetail } from '../../constants/notification-types.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport './confirmation-dialog.js';\nimport './view-item-dialog.js';\n\n@customElement('notification-item')\nexport class NotificationItem extends MobxLitElement {\n  @property({ type: Boolean }) disabled = false;\n\n  @property({ type: Object, attribute: false }) notificaiton =\n    {} as Notification;\n\n  @state() private showModal = false;\n\n  @state() private showDeleteConfirmation = false;\n\n  static get styles() {\n    return [NotificationsStyle, elementTheme, TWStyles];\n  }\n\n  displayItem() {\n    if (this.notificaiton.status === NotificationStatus.UNREAD) {\n      NotificationsState.setNotificationReadStatus(this.notificaiton.id);\n    }\n    this.showModal = true;\n  }\n\n  deleteItem() {\n    if (!this.disabled) {\n      this.showDeleteConfirmation = true;\n    }\n  }\n\n  private confirmedDelete(e: CustomEvent<ConfirmationDialogEventDetail>) {\n    // DELETE IF CONFIRMED TRUE\n    if (e.detail.returnValue)\n      NotificationsState.setNotificationDeleted(this.notificaiton.id);\n\n    this.showDeleteConfirmation = false;\n  }\n\n  calculateDuration() {\n    if (this.notificaiton.createdAt !== undefined) {\n      if (differenceInHours(new Date(), this.notificaiton.createdAt) < 24)\n        return formatDistance(this.notificaiton.createdAt, new Date(), {\n          addSuffix: true,\n        });\n      return format(this.notificaiton.createdAt, DefaultDateTimeFormat);\n    }\n    return 'NA';\n  }\n\n  GetNotificationIcon() {\n    switch (this.notificaiton.resourceType) {\n      case NotificationGroups.PLANNED_MAINTENANCE:\n        return 'lab_profile';\n      case NotificationGroups.SERVICE_TICKETS:\n        return 'dvr';\n      case NotificationGroups.INCIDENTS:\n        return 'emergency_home';\n      case NotificationGroups.DCIM_ALERTS:\n        return 'public';\n      default:\n        return 'sync_saved_locally';\n    }\n  }\n\n  /* eslint-disable lit-a11y/click-events-have-key-events */\n  render() {\n    return html`\n      <div class=\"relative bg-white-gp \">\n        <div\n          class=${this.notificaiton?.status === 'unread'\n            ? 'notification-item-unread'\n            : 'notification-item-read'}\n        >\n          <ix-icon-button\n            icon=${this.GetNotificationIcon()}\n            class=${this.notificaiton?.status === 'unread'\n              ? 'blue-icon'\n              : 'grey-icon'}\n            @click=${this.displayItem}\n          >\n          </ix-icon-button>\n          <div class=\"flex flex-col grow\" @click=${this.displayItem}>\n            <div class=\"grow text-base py-1\">\n              <h1>${this.notificaiton?.resourceType}</h1>\n            </div>\n            <div class=\"grow text-xs pb-2\">\n              <h1>${this.calculateDuration()}</h1>\n            </div>\n          </div>\n          <div>\n            <view-item-dialog\n              ?open=${this.showModal}\n              .notificaiton=${this.notificaiton}\n              @view-item-dialog-closed=${() => {\n                this.showModal = false;\n              }}\n            >\n            </view-item-dialog>\n            <confirmation-dialog\n              ?open=${this.showDeleteConfirmation}\n              @on-confirm-selection=${this.confirmedDelete}\n              @confirm-dialog-closed=${() => {\n                this.showModal = false;\n              }}\n              textMessage=\"Are you sure you want to delete this notification?\"\n            >\n            </confirmation-dialog>\n          </div>\n          <ix-icon-button\n            @click=${this.deleteItem}\n            icon=\"delete\"\n            class=${!this.disabled ? 'red-icon' : 'grey-icon'}\n          ></ix-icon-button>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"notification-item.js","sourceRoot":"","sources":["../../../src/components/notifications/notification-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css } from 'lit';\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 '@digital-realty/ix-icon/ix-icon.js';\nimport { elementTheme } from '@digital-realty/theme';\nimport { format, formatDistance, differenceInHours } from 'date-fns';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { Notification } from '../../models/notification.js';\nimport {\n  NotificationStatus,\n  DefaultDateTimeFormat,\n  NotificationGroups,\n} from '../../constants/notifications.js';\nimport { ConfirmationDialogEventDetail } from '../../constants/notification-types.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport './confirmation-dialog.js';\nimport './view-item-dialog.js';\n\n@customElement('notification-item')\nexport class NotificationItem extends MobxLitElement {\n  @property({ type: Boolean }) disabled = false;\n\n  @property({ type: Object, attribute: false }) notificaiton =\n    {} as Notification;\n\n  @state() private showModal = false;\n\n  @state() private showDeleteConfirmation = false;\n\n  static get styles() {\n    return [\n      NotificationsStyle,\n      elementTheme,\n      TWStyles,\n      css`\n        h2 {\n          font-family: 'Open Sans', sans-serif;\n          font-size: 12px;\n          font-weight: 400;\n          line-height: 16px;\n          letter-spacing: 0.4px;\n          text-align: left;\n        }\n        h3 {\n          font-family: 'Open Sans', sans-serif;\n          font-size: 12px;\n          font-weight: 400;\n          line-height: 16px;\n          letter-spacing: 0.4px;\n          text-align: left;\n          color: rgba(9, 34, 65, 0.6);\n          padding: 0;\n        }\n        ix-icon {\n          --ix-icon-font-size: 24px;\n          --ix-icon-line-height: 24px;\n          color: var(--md-sys-text-color-primary);\n        }\n        .notification-item ix-icon {\n          margin-top: 6px;\n          margin-right: 12px;\n          color: rgb(20, 86, 224);\n        }\n      `,\n    ];\n  }\n\n  displayItem() {\n    if (this.notificaiton.status === NotificationStatus.UNREAD) {\n      NotificationsState.setNotificationReadStatus(this.notificaiton.id);\n    }\n    this.showModal = true;\n  }\n\n  deleteItem() {\n    if (!this.disabled) {\n      this.showDeleteConfirmation = true;\n    }\n  }\n\n  private confirmedDelete(e: CustomEvent<ConfirmationDialogEventDetail>) {\n    // DELETE IF CONFIRMED TRUE\n    if (e.detail.returnValue)\n      NotificationsState.setNotificationDeleted(this.notificaiton.id);\n\n    this.showDeleteConfirmation = false;\n  }\n\n  calculateDuration() {\n    if (this.notificaiton.createdAt !== undefined) {\n      if (differenceInHours(new Date(), this.notificaiton.createdAt) < 24)\n        return formatDistance(this.notificaiton.createdAt, new Date(), {\n          addSuffix: true,\n        });\n      return format(this.notificaiton.createdAt, DefaultDateTimeFormat);\n    }\n    return 'NA';\n  }\n\n  GetNotificationIcon() {\n    switch (this.notificaiton.resourceType) {\n      case NotificationGroups.PLANNED_MAINTENANCE:\n        return 'lab_profile';\n      case NotificationGroups.SERVICE_TICKETS:\n        return 'dvr';\n      case NotificationGroups.INCIDENTS:\n        return 'emergency_home';\n      case NotificationGroups.DCIM_ALERTS:\n        return 'public';\n      default:\n        return 'sync_saved_locally';\n    }\n  }\n\n  /* eslint-disable lit-a11y/click-events-have-key-events */\n  render() {\n    return html`\n      <div class=\"relative bg-white-gp notification-item\">\n        <div\n          class=${this.notificaiton?.status === 'unread'\n            ? 'notification-item-unread'\n            : 'notification-item-read'}\n        >\n          <ix-icon\n            icon=${this.GetNotificationIcon()}\n            class=${this.notificaiton?.status === 'unread'\n              ? 'blue-icon'\n              : 'grey-icon'}\n            @click=${this.displayItem}\n            >${this.GetNotificationIcon()}\n          </ix-icon>\n          <div class=\"flex flex-col grow\" @click=${this.displayItem}>\n            <div class=\"grow text-base pt-1\">\n              <h2>${this.notificaiton?.resourceType}</h2>\n            </div>\n            <div class=\"grow text-xs pb-2\">\n              <h3>${this.calculateDuration()}</h3>\n            </div>\n          </div>\n          <div>\n            <view-item-dialog\n              ?open=${this.showModal}\n              .notificaiton=${this.notificaiton}\n              @view-item-dialog-closed=${() => {\n                this.showModal = false;\n              }}\n            >\n            </view-item-dialog>\n            <confirmation-dialog\n              ?open=${this.showDeleteConfirmation}\n              @on-confirm-selection=${this.confirmedDelete}\n              @confirm-dialog-closed=${() => {\n                this.showModal = false;\n              }}\n              textMessage=\"Are you sure you want to delete this notification?\"\n            >\n            </confirmation-dialog>\n          </div>\n          <ix-icon-button\n            @click=${this.deleteItem}\n            icon=\"delete\"\n            class=${!this.disabled ? 'red-icon' : 'grey-icon'}\n          ></ix-icon-button>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/ix-notifications.min.js

@@ -1 +1 @@
-import{__decorate}from"tslib";import{css,html,nothing}from"lit";import{property,customElement,state}from"lit/decorators.js";import{MobxLitElement}from"@adobe/lit-mobx";import{format,subDays,parse,differenceInHours,formatDistance,formatDate,differenceInDays}from"date-fns";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}from"mobx-persist-store";import"@digital-realty/ix-icon-button/ix-icon-button.js";import{elementTheme,baseTheme}from"@digital-realty/theme";import"@digital-realty/ix-switch/ix-switch.js";import"@digital-realty/ix-date/ix-date.js";import"@digital-realty/ix-divider/ix-divider.js";const TWStyles=css`*,::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:Open Sans,sans-serif;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]{display:none}*,::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}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.absolute{position:absolute}.relative{position:relative}.-start-0{inset-inline-start:0}.z-50{z-index:50}.m-0{margin:0}.mr-4{margin-right:1rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.w-\\[100px\\]{width:100px}.w-\\[480px\\]{width:480px}.w-\\[580px\\]{width:580px}.flex-grow{flex-grow:1}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.rounded-full{border-radius:9999px}.border{border-width:1px}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-16{padding-left:4rem;padding-right:4rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-2{padding-bottom:.5rem}.pl-1{padding-left:.25rem}.pl-11{padding-left:2.75rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pl-8{padding-left:2rem}.pr-1{padding-right:.25rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.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-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.underline{text-decoration-line:underline}.outline{outline-style:solid}.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}@media (min-width:640px){.sm\\:flex-col{flex-direction:column}}@media (min-width:768px){.md\\:flex-col{flex-direction:column}}@media (min-width:1024px){.lg\\:flex-col{flex-direction:column}}@media (min-width:1280px){.xl\\:flex-row{flex-direction:row}}`;var NotificationStatus,NotificationGroups;!function(t){t.READ="read",t.UNREAD="unread"}(NotificationStatus=NotificationStatus||{}),function(t){t.PLANNED_MAINTENANCE="Planned Maintenance",t.INCIDENTS="Incidents",t.DCIM_ALERTS="DCIM Alerts",t.SERVICE_TICKETS="Service Tickets"}(NotificationGroups=NotificationGroups||{});const userLocalStorageKey="x-auth",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(){const t=this.configuration.apiKey;if(t)return"function"==typeof t?t:()=>t}get accessToken(){const 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}}const DefaultConfig=new Configuration;class BaseAPI{constructor(t=DefaultConfig){this.configuration=t,this.fetchApi=async(t,i)=>{let e={url:t,init:i};for(const a of this.middleware)a.pre&&(e=await a.pre({fetch:this.fetchApi,...e})||e);let o=void 0;try{o=await(this.configuration.fetchApi||fetch)(e.url,e.init)}catch(t){for(const r of this.middleware)r.onError&&(o=await r.onError({fetch:this.fetchApi,url:e.url,init:e.init,error:t,response:o?o.clone():void 0})||o);if(void 0===o)throw t instanceof Error?new FetchError(t,"The request failed and the interceptors did not return an alternative response"):t}for(const n of this.middleware)n.post&&(o=await n.post({fetch:this.fetchApi,url:e.url,init:e.init,response:o.clone()})||o);return o},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;void 0!==t.query&&0!==Object.keys(t.query).length&&(e+="?"+this.configuration.queryParamsStringify(t.query));const o=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"}}const COLLECTION_FORMATS={csv:",",ssv:" ",tsv:"\t",pipes:"|"};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 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||void 0===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||void 0===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 patchNotificationsByIdRaw(t,i){if(null===t.id||void 0===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()}}const 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():""}}const 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}),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:null!==t.createdAt&&void 0!==t.createdAt?format(t.createdAt,DefaultDateTimeFormat):format(new Date,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=()=>{var t=localStorage.getItem(userLocalStorageKey);return t?JSON.parse(t):null},getUserAuthorization=()=>{var t;return"Bearer "+(null==(t=getLocalStorageUser())?void 0:t.access_token)};class NotificationState{constructor(){this.apiClient={noInit:!0},this.baseApiUrl="",this.NewApiClient=()=>{this.apiClient=new ApiClient({NotificationApiUrl:this.baseApiUrl,getAuthorizationFn:()=>getUserAuthorization()}),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:["notifications","unreadNotificationCount","notificationFilters","dateFilters","nextPageCursor"],storage:window.localStorage})}ConstructApiClient(){return this.apiClient.noInit?this.NewApiClient():this.apiClient}async setNotificationReadStatus(i){var t=this.notifications.findIndex(t=>t.id===i);this.notifications[t].status=NotificationStatus.READ,this.selectedNotification=this.notifications[t],await this.setNotificationAsRead(i.toString()),this.RefreshUnreadNotificationCount()}async setNotificationDeleted(i){var t;!0===await this.DeleteNotification(i.toString())&&(t=this.notifications.findIndex(t=>t.id===i),this.notifications.splice(t,1)),this.RefreshUnreadNotificationCount()}setNotificationDateFilter(t,i){void 0!==t&&void 0!==i?(this.dateFilters.FROM_DATE=parse(t,DefaultDateFormat,new Date),this.dateFilters.TO_DATE=parse(i,DefaultDateFormat,new Date)):(this.dateFilters.FROM_DATE=void 0,this.dateFilters.TO_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;void 0!==this.nextPageCursor&&(t=await(null==(t=this.apiClient)?void 0:t.notificationsApi.getNotifications(mapParametersToNotificationRequest(getNextPageCursorfromQueryParam(this.nextPageCursor))).catch(t=>{handleError(t,!1)})))&&(this.notifications=""===this.nextPageCursor?mapNotificationResponseToNotifications(t.items):this.notifications.concat(mapNotificationResponseToNotifications(t.items)),this.nextPageCursor=void 0!==t.next?t.next:void 0,this.RefreshUnreadNotificationCount())}async getNotificationsById(t){var i;let 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;t&&await(null==(i=this.apiClient)?void 0:i.notificationsApi.patchNotificationsById(mapParametersToPatchNotificationRequest(t,"read")).catch(t=>{handleError(t,!1)}))}async DeleteNotification(t){var i;return!!t&&(await(null==(i=this.apiClient)?void 0:i.notificationsApi.deleteNotificationsById(mapParametersToDeleteNotificationRequest(t)).catch(t=>(handleError(t,!1),!1))),!0)}RefreshUnreadNotificationCount(){this.unreadNotificationCount=this.notifications.filter(t=>t.status===NotificationStatus.UNREAD).length}}const NotificationsState=new NotificationState,NotificationsStyle=css`.red-icon{--md-icon-button-icon-color:red;--md-sys-color-on-surface-variant:red}.blue-icon{--md-icon-button-icon-color:#1456e0;--md-sys-color-on-surface-variant:#1456e0}.grey-icon{--md-icon-button-icon-color:grey;--md-sys-color-on-surface-variant:grey;cursor:default}.notification-item-unread{position:relative;display:flex;flex-direction:row;flex-grow:1;padding-left:.5rem;padding-top:.5rem;padding-bottom:.5rem;width:100%;height:100%;background-color:#fff;border-left:2px solid green;font-weight:700;cursor:pointer;align-items:center}.notification-item-unread:hover{cursor:pointer;background-color:rgba(0,0,0,.04)}.notification-item-read{cursor:default;position:relative;display:flex;direction:flex-row;flex-grow:1;padding-left:.5rem;padding-top:.5rem;padding-bottom:.5rem;width:100%;height:100%;background-color:#fff;font-weight:400;align-items:center}.notification-item-read:hover{cursor:pointer;background-color:rgba(0,0,0,.04)}.group-container-row{display:block;font-size:12px;padding:12px 0 12px 0;margin-top:0;margin-bottom:0;border-bottom:#e1e4e8 inset 1px;color:#000;font-weight:400;font-size:15px;line-height:20px;letter-spacing:.15px}.group-name{line-height:24px;color:#000}.group-item-name{display:grid;grid-template-columns:1fr 20%;gap:16px;-webkit-box-align:center;align-items:center;-webkit-box-flex:1;flex-grow:1;padding-top:5px}.notification-items-container{padding:0}.ix-icon-groups{--ix-icon-font-size:32px;--ix-icon-line-height:32px;color:#000}:host{--ix-drawer-border-radius:0;--ix-drawer-padding:0;--ix-draw-width-sm:50vw;--ix-draw-width-lg:30vw}.ix-switch-wrapper{margin:4px;padding:4px;vertical-align:middle;align-items:center}.ix-switch{--ix-switch-size:"small"}.filter-dropdown-content{display:none;position:absolute;right:5%;top:7%;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:8px;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:#fff}.filter-dropdown-content.active{display:inline}.datefilter-dropdown-content{display:none;position:absolute;right:1%;top:7%;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:8px;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:#fff}.datefilter-dropdown-content.active{display:inline}.modal-text-blue{color:#1456e0;padding-left:1.8rem;font-weight:700}`;let ConfirmationDialog=class extends MobxLitElement{constructor(){super(...arguments),this.textMessage="Are you sure?",this.open=!1,this.dialogClosed=()=>{this.dispatchEvent(new CustomEvent("confirm-dialog-closed"))}}static get styles(){return[NotificationsStyle,elementTheme,baseTheme,TWStyles]}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"><div class="p-4 text-xl font-bold">${this.textMessage}</div></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.notificaiton={},this.open=!1,this.dialogClosed=()=>{this.dispatchEvent(new CustomEvent("view-item-dialog-closed"))}}static get styles(){return[NotificationsStyle,elementTheme,TWStyles]}getUrl(){var t=this.notificaiton.id;switch(this.notificaiton.resourceType){case NotificationGroups.PLANNED_MAINTENANCE:return"/service-management/planned-maintenance/"+t;case NotificationGroups.SERVICE_TICKETS:return"/service-management/service-tickets/"+t;case NotificationGroups.INCIDENTS:return"/service-management/incidents/"+t;case NotificationGroups.DCIM_ALERTS:return"/dcim/"+t;default:return""}}getLocation(){return void 0===this.notificaiton.locations||this.notificaiton.locations.length<1?"":1<this.notificaiton.locations.length?"Multiple Locations":this.notificaiton.locations[0]}render(){return html`<ix-dialog ?open="${this.open}" class="w-[480px]" @closed="${this.dialogClosed}"><div class="flex flex-col px-16" slot="headline"><label class="text-xl font-bold w-[480px] py-2">${this.notificaiton.resourceType}</label> <label class="text-sm font-bold w-[480px] py-2">${this.notificaiton.subGroup}</label></div><form class="w-[480px] px-16" slot="content" id="form-id" method="dialog"><div class="flex flex-row py-1"><div class="py-1 w-[100px]">Subject</div><div class="grow py-1 pl-11 font-semibold">${this.notificaiton.subject}</div></div><div class="flex flex-row py-1"><div class="py-1 w-[100px]">Create Date</div><div class="grow py-1 pl-11 font-semibold">${format(this.notificaiton.createdAt,"dd/MM/yyyy HH:mm:ss")}</div></div><div class="flex flex-row py-1"><div class="py-1 w-[100px]">Site</div><div class="grow py-1 pl-11 font-semibold">${this.getLocation()}</div></div></form><div slot="actions" class="flex flex-row flex-end px-16 py-8"><button form="form-id" class="modal-text-blue">CLOSE</button> <a href="${this.getUrl()}" class="modal-text-blue">VIEW RECORD</a></div></ix-dialog>`}}),NotificationItem=(__decorate([property({type:Object,attribute:!1})],ViewItemDialog.prototype,"notificaiton",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.notificaiton={},this.showModal=!1,this.showDeleteConfirmation=!1}static get styles(){return[NotificationsStyle,elementTheme,TWStyles]}displayItem(){this.notificaiton.status===NotificationStatus.UNREAD&&NotificationsState.setNotificationReadStatus(this.notificaiton.id),this.showModal=!0}deleteItem(){this.disabled||(this.showDeleteConfirmation=!0)}confirmedDelete(t){t.detail.returnValue&&NotificationsState.setNotificationDeleted(this.notificaiton.id),this.showDeleteConfirmation=!1}calculateDuration(){return void 0!==this.notificaiton.createdAt?differenceInHours(new Date,this.notificaiton.createdAt)<24?formatDistance(this.notificaiton.createdAt,new Date,{addSuffix:!0}):format(this.notificaiton.createdAt,DefaultDateTimeFormat):"NA"}GetNotificationIcon(){switch(this.notificaiton.resourceType){case NotificationGroups.PLANNED_MAINTENANCE:return"lab_profile";case NotificationGroups.SERVICE_TICKETS:return"dvr";case NotificationGroups.INCIDENTS:return"emergency_home";case NotificationGroups.DCIM_ALERTS:return"public";default:return"sync_saved_locally"}}render(){var t;return html`<div class="relative bg-white-gp"><div class="${"unread"===(null==(t=this.notificaiton)?void 0:t.status)?"notification-item-unread":"notification-item-read"}"><ix-icon-button icon="${this.GetNotificationIcon()}" class="${"unread"===(null==(t=this.notificaiton)?void 0:t.status)?"blue-icon":"grey-icon"}" @click="${this.displayItem}"></ix-icon-button><div class="flex flex-col grow" @click="${this.displayItem}"><div class="grow text-base py-1"><h1>${null==(t=this.notificaiton)?void 0:t.resourceType}</h1></div><div class="grow text-xs pb-2"><h1>${this.calculateDuration()}</h1></div></div><div><view-item-dialog ?open="${this.showModal}" .notificaiton="${this.notificaiton}" @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?"></confirmation-dialog></div><ix-icon-button @click="${this.deleteItem}" icon="delete" class="${this.disabled?"grey-icon":"red-icon"}"></ix-icon-button></div></div>`}}),GroupedItem=(__decorate([property({type:Boolean})],NotificationItem.prototype,"disabled",void 0),__decorate([property({type:Object,attribute:!1})],NotificationItem.prototype,"notificaiton",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.iconName="public",this.childItems=NotificationsState.notifications,this.isOpen=!1,this.onClick=()=>{this.isOpen=!this.isOpen}}static get styles(){return[NotificationsStyle,baseTheme,TWStyles]}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 class="notification-items-container">${null==(t=this.childItems)?void 0:t.map(t=>html`<notification-item .notificaiton="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}"></notification-item>`)}</div>`:html`<p class="m-0 pl-8 font-bold mr-4"><small style="padding-left:16px">No notifications yet.</small></p>`:html`${nothing}`}render(){var t;return html`<div class="group-container-row"><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}"></ix-icon-button><ix-icon class="ix-icon-groups">${this.iconName}</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,"iconName",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[NotificationsStyle,TWStyles,css`:host{--md-switch-state-layer-size:1rem;--md-switch-hover-handle-width:1rem;--md-switch-hover-handle-height:1rem;--md-switch-pressed-handle-width:1rem;--md-switch-pressed-handle-height:1rem;--md-switch-selected-handle-width:1.3rem;--md-switch-selected-handle-height:1.3rem;--md-switch-handle-width:0.5rem;--md-switch-handle-height:0.5rem;--md-switch-track-width:2.5rem;--md-switch-track-height:1rem}`]}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 items-start p-2"><div class="ix-switch-wrapper"><ix-switch name="${NotificationGroups.PLANNED_MAINTENANCE}" selected="${NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE}" @change="${this.onSwitchChange}"></ix-switch><label class="pl-1">${NotificationGroups.PLANNED_MAINTENANCE}</label></div><div class="ix-switch-wrapper"><ix-switch name="${NotificationGroups.SERVICE_TICKETS}" selected="${NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS}" @change="${this.onSwitchChange}"></ix-switch><label class="pl-1">${NotificationGroups.SERVICE_TICKETS}</label></div><div class="ix-switch-wrapper"><ix-switch name="${NotificationGroups.DCIM_ALERTS}" selected="${NotificationsState.notificationFilters.SHOW_DCIM_ALERTS}" @change="${this.onSwitchChange}"></ix-switch><label class="pl-1">${NotificationGroups.DCIM_ALERTS}</label></div></div>`}}),DateFilters=(GroupFilters=__decorate([customElement("group-filters")],GroupFilters),class extends MobxLitElement{constructor(){super(...arguments),this.fromDate=formatDate(NotificationsState.dateFilters.FROM_DATE,DefaultDateFormat)||void 0,this.toDate=formatDate(NotificationsState.dateFilters.TO_DATE,DefaultDateFormat)||void 0,this.maxDate=formatDate(new Date,DefaultDateFormat),this.fromDateErrorText="",this.toDateErrorText=""}static get styles(){return[NotificationsStyle,baseTheme,elementTheme,TWStyles]}onFromDateChange(t){this.fromDate=t,this.fromDate>this.toDate?(this.fromDateErrorText="From date cannot be later than To date.",this.fromDate=void 0):this.fromDateErrorText=void 0}onToDateChange(t){this.toDate=t,this.toDate<this.fromDate?(this.toDateErrorText="To date cannot be earlier than From date.",this.toDate=void 0):this.toDateErrorText=void 0}onApplyDateFilter(t){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.requestUpdate()}render(){return html`<div class="flex flex-col p-2"><div class="flex flex-row text-justify"><div class="grow items-center text-xl font-bold text-left p-2">Filter by Date</div><div class="flex flex-row items-center p-2" @click="${this.clearDateFilters}"><label class="grow text-sm text-right pr-1 cursor-pointer">Cleare Filter</label><ix-icon-button appearance="default" icon="domain_verification_off" class="blue-icon"></ix-icon-button></div></div><ix-divider class="px-2"></ix-divider><div class="flex xl:flex-row lg:flex-col md:flex-col sm:flex-col justify-between item-center p-2"><div class="p-2"><ix-date .value="${this.fromDate}" max="${this.maxDate}" label="From" name="FromDate" .errorText="${this.fromDateErrorText}" .onChanged="${t=>this.onFromDateChange(t)}"></ix-date></div><div class="p-2"><ix-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 p-2"><ix-button type="" target="" appearance="text" @click="${()=>this.onApplyDateFilter(!1)}">Cancel</ix-button><ix-button type="" target="" appearance="text" @click="${()=>this.onApplyDateFilter(!0)}">Filter List</ix-button></div></div>`}});__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 IxNotifications extends MobxLitElement{constructor(){super(...arguments),this.showDrawer=!1,this.showGroupedView=!1,this.showFilters=!1,this.showDateFilters=!1,this.showMarkAllReadConfirmation=!1,this.baseApiUrl=""}async firstUpdated(){NotificationsState.baseApiUrl=this.baseApiUrl,NotificationsState.ConstructApiClient()}connectedCallback(){super.connectedCallback(),window.addEventListener("account-switched",NotificationsState.NewApiClient)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("account-switched",NotificationsState.NewApiClient)}toggleDrawer(){this.showDrawer=!this.showDrawer,this.showDrawer||(this.showFilters=!1,this.showDateFilters=!1)}renderUnReadCountText(){if(NotificationsState.unreadNotificationCount<=0)return html`${nothing}`;let t="";return t=99<NotificationsState.unreadNotificationCount?"99+":NotificationsState.unreadNotificationCount.toString(),html`<div class="px-1 bg-red-500 rounded-full text-center text-white text-sm absolute icon-position -start-0" style="top:.05rem;left:1.5rem">${t}</div>`}markAllread(){this.showMarkAllReadConfirmation=!0}confirmedMarkAllRead(t){t.detail.returnValue&&(null!=(t=this.applyNotificationFilters())&&t.forEach(t=>{t.status===NotificationStatus.UNREAD&&NotificationsState.setNotificationReadStatus(t.id)}),this.renderUnReadCountText()),this.showMarkAllReadConfirmation=!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:t.filter(t=>0<=differenceInHours(new Date(t.createdAt),NotificationsState.dateFilters.FROM_DATE)&&differenceInDays(new Date(t.createdAt),NotificationsState.dateFilters.TO_DATE)<=0)}displayDateFilters(){this.showDateFilters=!this.showDateFilters}renderGroupedView(){var t=this.applyNotificationFilters();return html`<div><grouped-item groupTitle="${NotificationGroups.PLANNED_MAINTENANCE}" iconName="lab_profile" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.PLANNED_MAINTENANCE)}"></grouped-item><grouped-item groupTitle="${NotificationGroups.INCIDENTS}" iconName="emergency_home" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.INCIDENTS)}"></grouped-item><grouped-item groupTitle="${NotificationGroups.SERVICE_TICKETS}" iconName="dvr" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.SERVICE_TICKETS)}"></grouped-item><grouped-item groupTitle="${NotificationGroups.DCIM_ALERTS}" iconName="public" .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(t.createdAt,new Date)),e=t.filter(t=>0!==differenceInDays(t.createdAt,new Date));return 0<(null==t?void 0:t.length)?html`<div class="grow text-sm font-bold py-4 pl-2 align-top">Latest</div><div class="m-0 p-0">${0<i.length?null==i?void 0:i.map(t=>html`<notification-item .notificaiton="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}"></notification-item>`):this.renderNoResult()}</div><div class="grow text-sm font-bold py-4 pl-2 align-top">Earlier</div><div>${0<e.length?null==e?void 0:e.map(t=>html`<notification-item .notificaiton="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}"></notification-item>`):this.renderNoResult()}</div>`:html`<p class="m-0 pl-4 font-bold mr-4"><small style="padding-left:16px">No notifications yet.</small></p>`}renderNoResult(){return html`<p class="m-0 pl-4 font-bold mr-4"><small style="padding-left:16px">No notifications yet.</small></p>`}handleCloseClick(t){this.showDateFilters=!1,this.showFilters=!1}handleContentScroll(t){null!==t&&t.detail.scrollTop+t.detail.clientHeight>=t.detail.scrollHeight&&NotificationsState.getNotifications()}render(){return html`<div class="relative"><ix-icon-button icon="circle_notifications" class="blue-icon" @click="${()=>this.toggleDrawer()}"></ix-icon-button>${this.renderUnReadCountText()}</div><confirmation-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 ?isVisible="${this.showDrawer}" .onClosed="${()=>this.toggleDrawer()}" animate-vertical hide-close @on-content-scroll="${this.handleContentScroll}"><div class="flex flex-row justify-between grow py-2" slot="header"><div class="grow text-xl items-center font-bold py-4 pl-2 align-top">Notifications</div><div class="flex flex-row justify-end grow items-center"><ix-icon-button @click="${this.markAllread}" icon="fact_check" class="blue-icon"></ix-icon-button><ix-icon-button @click="${this.toggleGroupView}" icon="sort" class="blue-icon"></ix-icon-button><ix-icon-button @click="${this.displayFilters}" icon="menu" class="blue-icon"></ix-icon-button><div class="filter-dropdown-content ${this.showFilters?"active z-50":""}"><group-filters></group-filters></div><ix-icon-button @click="${this.displayDateFilters}" icon="calendar_month" class="blue-icon"></ix-icon-button><div class="datefilter-dropdown-content ${this.showDateFilters?"active z-50":""}" @on-selection="${this.handleCloseClick}"><date-filters></date-filters></div></div></div><div slot="content">${this.showGroupedView?this.renderGroupedView():this.renderDefaultView()}</div></ix-drawer>`}}IxNotifications.styles=[TWStyles,NotificationsStyle],__decorate([state()],IxNotifications.prototype,"showDrawer",void 0),__decorate([state()],IxNotifications.prototype,"showGroupedView",void 0),__decorate([state()],IxNotifications.prototype,"showFilters",void 0),__decorate([state()],IxNotifications.prototype,"showDateFilters",void 0),__decorate([state()],IxNotifications.prototype,"showMarkAllReadConfirmation",void 0),__decorate([property({type:String})],IxNotifications.prototype,"baseApiUrl",void 0),window.customElements.define("ix-notifications",IxNotifications);
+import{__decorate}from"tslib";import{css,html,nothing}from"lit";import{property,customElement,state}from"lit/decorators.js";import{MobxLitElement}from"@adobe/lit-mobx";import{format,subDays,parse,differenceInHours,formatDistance,formatDate,differenceInDays}from"date-fns";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}from"mobx-persist-store";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-icon/ix-icon.js";import{elementTheme,baseTheme}from"@digital-realty/theme";import"@digital-realty/ix-switch/ix-switch.js";import"@digital-realty/ix-date/ix-date.js";import"@digital-realty/ix-divider/ix-divider.js";const TWStyles=css`*,::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:Open Sans,sans-serif;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]{display:none}*,::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}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.absolute{position:absolute}.relative{position:relative}.-start-0{inset-inline-start:0}.z-50{z-index:50}.m-0{margin:0}.mr-4{margin-right:1rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.w-\\[100px\\]{width:100px}.w-\\[480px\\]{width:480px}.w-\\[580px\\]{width:580px}.flex-grow{flex-grow:1}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.rounded-full{border-radius:9999px}.border{border-width:1px}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-16{padding-left:4rem;padding-right:4rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-2{padding-bottom:.5rem}.pl-1{padding-left:.25rem}.pl-11{padding-left:2.75rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pl-8{padding-left:2rem}.pr-1{padding-right:.25rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.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-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.underline{text-decoration-line:underline}.outline{outline-style:solid}.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}@media (min-width:640px){.sm\\:flex-col{flex-direction:column}}@media (min-width:768px){.md\\:flex-col{flex-direction:column}}@media (min-width:1024px){.lg\\:flex-col{flex-direction:column}}@media (min-width:1280px){.xl\\:flex-row{flex-direction:row}}`;var NotificationStatus,NotificationGroups;!function(t){t.READ="read",t.UNREAD="unread"}(NotificationStatus=NotificationStatus||{}),function(t){t.PLANNED_MAINTENANCE="Planned Maintenance",t.INCIDENTS="Incidents",t.DCIM_ALERTS="DCIM Alerts",t.SERVICE_TICKETS="Service Tickets"}(NotificationGroups=NotificationGroups||{});const userLocalStorageKey="x-auth",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(){const t=this.configuration.apiKey;if(t)return"function"==typeof t?t:()=>t}get accessToken(){const 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}}const DefaultConfig=new Configuration;class BaseAPI{constructor(t=DefaultConfig){this.configuration=t,this.fetchApi=async(t,i)=>{let e={url:t,init:i};for(const a of this.middleware)a.pre&&(e=await a.pre({fetch:this.fetchApi,...e})||e);let o=void 0;try{o=await(this.configuration.fetchApi||fetch)(e.url,e.init)}catch(t){for(const r of this.middleware)r.onError&&(o=await r.onError({fetch:this.fetchApi,url:e.url,init:e.init,error:t,response:o?o.clone():void 0})||o);if(void 0===o)throw t instanceof Error?new FetchError(t,"The request failed and the interceptors did not return an alternative response"):t}for(const n of this.middleware)n.post&&(o=await n.post({fetch:this.fetchApi,url:e.url,init:e.init,response:o.clone()})||o);return o},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;void 0!==t.query&&0!==Object.keys(t.query).length&&(e+="?"+this.configuration.queryParamsStringify(t.query));const o=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"}}const COLLECTION_FORMATS={csv:",",ssv:" ",tsv:"\t",pipes:"|"};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 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||void 0===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||void 0===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 patchNotificationsByIdRaw(t,i){if(null===t.id||void 0===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()}}const 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():""}}const 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}),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:null!==t.createdAt&&void 0!==t.createdAt?format(t.createdAt,DefaultDateTimeFormat):format(new Date,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=()=>{var t=localStorage.getItem(userLocalStorageKey);return t?JSON.parse(t):null},getUserAuthorization=()=>{var t;return"Bearer "+(null==(t=getLocalStorageUser())?void 0:t.access_token)};class NotificationState{constructor(){this.apiClient={noInit:!0},this.baseApiUrl="",this.NewApiClient=()=>{this.apiClient=new ApiClient({NotificationApiUrl:this.baseApiUrl,getAuthorizationFn:()=>getUserAuthorization()}),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:["notifications","unreadNotificationCount","notificationFilters","dateFilters","nextPageCursor"],storage:window.localStorage})}ConstructApiClient(){return this.apiClient.noInit?this.NewApiClient():this.apiClient}async setNotificationReadStatus(i){var t=this.notifications.findIndex(t=>t.id===i);this.notifications[t].status=NotificationStatus.READ,this.selectedNotification=this.notifications[t],await this.setNotificationAsRead(i.toString()),this.RefreshUnreadNotificationCount()}async setNotificationDeleted(i){var t;!0===await this.DeleteNotification(i.toString())&&(t=this.notifications.findIndex(t=>t.id===i),this.notifications.splice(t,1)),this.RefreshUnreadNotificationCount()}setNotificationDateFilter(t,i){void 0!==t&&void 0!==i?(this.dateFilters.FROM_DATE=parse(t,DefaultDateFormat,new Date),this.dateFilters.TO_DATE=parse(i,DefaultDateFormat,new Date)):(this.dateFilters.FROM_DATE=void 0,this.dateFilters.TO_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;void 0!==this.nextPageCursor&&(t=await(null==(t=this.apiClient)?void 0:t.notificationsApi.getNotifications(mapParametersToNotificationRequest(getNextPageCursorfromQueryParam(this.nextPageCursor))).catch(t=>{handleError(t,!1)})))&&(this.notifications=""===this.nextPageCursor?mapNotificationResponseToNotifications(t.items):this.notifications.concat(mapNotificationResponseToNotifications(t.items)),this.nextPageCursor=void 0!==t.next?t.next:void 0,this.RefreshUnreadNotificationCount())}async getNotificationsById(t){var i;let 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;t&&await(null==(i=this.apiClient)?void 0:i.notificationsApi.patchNotificationsById(mapParametersToPatchNotificationRequest(t,"read")).catch(t=>{handleError(t,!1)}))}async DeleteNotification(t){var i;return!!t&&(await(null==(i=this.apiClient)?void 0:i.notificationsApi.deleteNotificationsById(mapParametersToDeleteNotificationRequest(t)).catch(t=>(handleError(t,!1),!1))),!0)}RefreshUnreadNotificationCount(){this.unreadNotificationCount=this.notifications.filter(t=>t.status===NotificationStatus.UNREAD).length}}const NotificationsState=new NotificationState,NotificationsStyle=css`.red-icon{--md-icon-button-icon-color:var(--md-sys-color-error);--md-sys-color-on-surface-variant:var(--md-sys-color-error);padding:12px}.blue-icon{--md-icon-button-icon-color:var(--ix-sys-primary);--md-sys-color-on-surface-variant:var(--ix-sys-primary)}.grey-icon{--md-icon-button-icon-color:var(--md-sys-color-tertiary);--md-sys-color-on-surface-variant:var(--md-sys-color-tertiary);cursor:default}.notification-item-unread{position:relative;display:flex;flex-direction:row;flex-grow:1;padding-left:1rem;padding-top:.5rem;padding-bottom:1rem;background-color:#fff;border-left:2px solid var(--ix-button-confirm-color);font-weight:700;cursor:pointer;align-items:flex-start}.notification-item-unread:hover{cursor:pointer;background-color:rgba(0,0,0,.04)}.notification-item-read{cursor:default;position:relative;display:flex;direction:flex-row;flex-grow:1;padding-left:.5rem;padding-top:.5rem;padding-bottom:.5rem;width:100%;height:100%;background-color:#fff;font-weight:400;align-items:center}.notification-item-read:hover{cursor:pointer;background-color:rgba(0,0,0,.04)}.group-container-row{display:block;font-size:12px;padding:12px 0 12px 0;margin-top:0;margin-bottom:0;border-bottom:#e1e4e8 inset 1px;color:var(--md-sys-text-color-primary);font-weight:400;font-size:15px;line-height:20px;letter-spacing:.15px}.group-name{line-height:24px;color:var(--md-sys-text-color-primary)}.group-item-name{display:grid;grid-template-columns:1fr 20%;gap:16px;-webkit-box-align:center;align-items:center;-webkit-box-flex:1;flex-grow:1;padding-top:5px}.notification-items-container{padding:0}.ix-icon-groups{--ix-icon-font-size:32px;--ix-icon-line-height:32px;color:var(--md-sys-text-color-primary)}:host{--ix-drawer-border-radius:0;--ix-drawer-padding:0;--ix-draw-width-sm:50vw;--ix-draw-width-lg:30vw}.ix-switch-wrapper{margin:4px;padding:4px;vertical-align:middle;align-items:center}.ix-switch{--ix-switch-size:'small'}.filter-dropdown-content{display:none;position:absolute;right:5%;top:7%;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:8px;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:#fff}.filter-dropdown-content.active{display:inline}.datefilter-dropdown-content{display:none;position:absolute;right:1%;top:7%;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:8px;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:#fff}.datefilter-dropdown-content.active{display:inline}.modal-text-blue{color:var(--ix-sys-primary);padding-left:1.8rem;font-weight:700}.unread{font-family:'Open Sans',sans-serif;padding:0 5px;font-size:12px;line-height:16px;left:22px;top:0;background:var(--ix-button-cancel-color,#db0028)}.notification-header{font-family:'Red Hat Display',sans-serif;padding:20px 16px;font-weight:770;font-size:20px;line-height:24px}h3{font-family:'Open Sans',sans-serif;font-size:16px;font-weight:400;line-height:20px;letter-spacing:.15px;text-align:left;padding:8px 16px}.empty{margin:8px 0 8px 16px;font-family:"Open Sans",sans-serif;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px;color:#092241;font-weight:400}.notifification-item ix-icon-button{padding:12px}.options{padding-right:1rem}`;let ConfirmationDialog=class extends MobxLitElement{constructor(){super(...arguments),this.textMessage="Are you sure?",this.open=!1,this.dialogClosed=()=>{this.dispatchEvent(new CustomEvent("confirm-dialog-closed"))}}static get styles(){return[NotificationsStyle,elementTheme,baseTheme,TWStyles]}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"><div class="p-4 text-xl font-bold">${this.textMessage}</div></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.notificaiton={},this.open=!1,this.dialogClosed=()=>{this.dispatchEvent(new CustomEvent("view-item-dialog-closed"))}}static get styles(){return[NotificationsStyle,elementTheme,TWStyles]}getUrl(){var t=this.notificaiton.id;switch(this.notificaiton.resourceType){case NotificationGroups.PLANNED_MAINTENANCE:return"/service-management/planned-maintenance/"+t;case NotificationGroups.SERVICE_TICKETS:return"/service-management/service-tickets/"+t;case NotificationGroups.INCIDENTS:return"/service-management/incidents/"+t;case NotificationGroups.DCIM_ALERTS:return"/dcim/"+t;default:return""}}getLocation(){return void 0===this.notificaiton.locations||this.notificaiton.locations.length<1?"":1<this.notificaiton.locations.length?"Multiple Locations":this.notificaiton.locations[0]}render(){return html`<ix-dialog ?open="${this.open}" class="w-[480px]" @closed="${this.dialogClosed}"><div class="flex flex-col px-16" slot="headline"><label class="text-xl font-bold w-[480px] py-2">${this.notificaiton.resourceType}</label> <label class="text-sm font-bold w-[480px] py-2">${this.notificaiton.subGroup}</label></div><form class="w-[480px] px-16" slot="content" id="form-id" method="dialog"><div class="flex flex-row py-1"><div class="py-1 w-[100px]">Subject</div><div class="grow py-1 pl-11 font-semibold">${this.notificaiton.subject}</div></div><div class="flex flex-row py-1"><div class="py-1 w-[100px]">Create Date</div><div class="grow py-1 pl-11 font-semibold">${format(this.notificaiton.createdAt,"dd/MM/yyyy HH:mm:ss")}</div></div><div class="flex flex-row py-1"><div class="py-1 w-[100px]">Site</div><div class="grow py-1 pl-11 font-semibold">${this.getLocation()}</div></div></form><div slot="actions" class="flex flex-row flex-end px-16 py-8"><button form="form-id" class="modal-text-blue">CLOSE</button> <a href="${this.getUrl()}" class="modal-text-blue">VIEW RECORD</a></div></ix-dialog>`}}),NotificationItem=(__decorate([property({type:Object,attribute:!1})],ViewItemDialog.prototype,"notificaiton",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.notificaiton={},this.showModal=!1,this.showDeleteConfirmation=!1}static get styles(){return[NotificationsStyle,elementTheme,TWStyles,css`h2{font-family:'Open Sans',sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:.4px;text-align:left}h3{font-family:'Open Sans',sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:.4px;text-align:left;color:rgba(9,34,65,.6);padding:0}ix-icon{--ix-icon-font-size:24px;--ix-icon-line-height:24px;color:var(--md-sys-text-color-primary)}.notification-item ix-icon{margin-top:6px;margin-right:12px;color:#1456e0}`]}displayItem(){this.notificaiton.status===NotificationStatus.UNREAD&&NotificationsState.setNotificationReadStatus(this.notificaiton.id),this.showModal=!0}deleteItem(){this.disabled||(this.showDeleteConfirmation=!0)}confirmedDelete(t){t.detail.returnValue&&NotificationsState.setNotificationDeleted(this.notificaiton.id),this.showDeleteConfirmation=!1}calculateDuration(){return void 0!==this.notificaiton.createdAt?differenceInHours(new Date,this.notificaiton.createdAt)<24?formatDistance(this.notificaiton.createdAt,new Date,{addSuffix:!0}):format(this.notificaiton.createdAt,DefaultDateTimeFormat):"NA"}GetNotificationIcon(){switch(this.notificaiton.resourceType){case NotificationGroups.PLANNED_MAINTENANCE:return"lab_profile";case NotificationGroups.SERVICE_TICKETS:return"dvr";case NotificationGroups.INCIDENTS:return"emergency_home";case NotificationGroups.DCIM_ALERTS:return"public";default:return"sync_saved_locally"}}render(){var t;return html`<div class="relative bg-white-gp notification-item"><div class="${"unread"===(null==(t=this.notificaiton)?void 0:t.status)?"notification-item-unread":"notification-item-read"}"><ix-icon icon="${this.GetNotificationIcon()}" class="${"unread"===(null==(t=this.notificaiton)?void 0:t.status)?"blue-icon":"grey-icon"}" @click="${this.displayItem}">${this.GetNotificationIcon()}</ix-icon><div class="flex flex-col grow" @click="${this.displayItem}"><div class="grow text-base pt-1"><h2>${null==(t=this.notificaiton)?void 0:t.resourceType}</h2></div><div class="grow text-xs pb-2"><h3>${this.calculateDuration()}</h3></div></div><div><view-item-dialog ?open="${this.showModal}" .notificaiton="${this.notificaiton}" @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?"></confirmation-dialog></div><ix-icon-button @click="${this.deleteItem}" icon="delete" class="${this.disabled?"grey-icon":"red-icon"}"></ix-icon-button></div></div>`}}),GroupedItem=(__decorate([property({type:Boolean})],NotificationItem.prototype,"disabled",void 0),__decorate([property({type:Object,attribute:!1})],NotificationItem.prototype,"notificaiton",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.iconName="public",this.childItems=NotificationsState.notifications,this.isOpen=!1,this.onClick=()=>{this.isOpen=!this.isOpen}}static get styles(){return[NotificationsStyle,baseTheme,TWStyles]}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 class="notification-items-container">${null==(t=this.childItems)?void 0:t.map(t=>html`<notification-item .notificaiton="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}"></notification-item>`)}</div>`:html`<p class="m-0 pl-8 font-bold mr-4"><small style="padding-left:16px">No notifications yet.</small></p>`:html`${nothing}`}render(){var t;return html`<div class="group-container-row"><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}"></ix-icon-button><ix-icon class="ix-icon-groups">${this.iconName}</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,"iconName",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[NotificationsStyle,TWStyles,css`:host{--md-switch-state-layer-size:1rem;--md-switch-hover-handle-width:1rem;--md-switch-hover-handle-height:1rem;--md-switch-pressed-handle-width:1rem;--md-switch-pressed-handle-height:1rem;--md-switch-selected-handle-width:1.3rem;--md-switch-selected-handle-height:1.3rem;--md-switch-handle-width:0.5rem;--md-switch-handle-height:0.5rem;--md-switch-track-width:2.5rem;--md-switch-track-height:1rem}`]}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 items-start p-2"><div class="ix-switch-wrapper"><ix-switch name="${NotificationGroups.PLANNED_MAINTENANCE}" selected="${NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE}" @change="${this.onSwitchChange}"></ix-switch><label class="pl-1">${NotificationGroups.PLANNED_MAINTENANCE}</label></div><div class="ix-switch-wrapper"><ix-switch name="${NotificationGroups.SERVICE_TICKETS}" selected="${NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS}" @change="${this.onSwitchChange}"></ix-switch><label class="pl-1">${NotificationGroups.SERVICE_TICKETS}</label></div><div class="ix-switch-wrapper"><ix-switch name="${NotificationGroups.DCIM_ALERTS}" selected="${NotificationsState.notificationFilters.SHOW_DCIM_ALERTS}" @change="${this.onSwitchChange}"></ix-switch><label class="pl-1">${NotificationGroups.DCIM_ALERTS}</label></div></div>`}}),DateFilters=(GroupFilters=__decorate([customElement("group-filters")],GroupFilters),class extends MobxLitElement{constructor(){super(...arguments),this.fromDate=formatDate(NotificationsState.dateFilters.FROM_DATE,DefaultDateFormat)||void 0,this.toDate=formatDate(NotificationsState.dateFilters.TO_DATE,DefaultDateFormat)||void 0,this.maxDate=formatDate(new Date,DefaultDateFormat),this.fromDateErrorText="",this.toDateErrorText=""}static get styles(){return[NotificationsStyle,baseTheme,elementTheme,TWStyles]}onFromDateChange(t){this.fromDate=t,this.fromDate>this.toDate?(this.fromDateErrorText="From date cannot be later than To date.",this.fromDate=void 0):this.fromDateErrorText=void 0}onToDateChange(t){this.toDate=t,this.toDate<this.fromDate?(this.toDateErrorText="To date cannot be earlier than From date.",this.toDate=void 0):this.toDateErrorText=void 0}onApplyDateFilter(t){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.requestUpdate()}render(){return html`<div class="flex flex-col p-2"><div class="flex flex-row text-justify"><div class="grow items-center text-xl font-bold text-left p-2">Filter by Date</div><div class="flex flex-row items-center p-2" @click="${this.clearDateFilters}"><label class="grow text-sm text-right pr-1 cursor-pointer">Cleare Filter</label><ix-icon-button appearance="default" icon="domain_verification_off" class="blue-icon"></ix-icon-button></div></div><ix-divider class="px-2"></ix-divider><div class="flex xl:flex-row lg:flex-col md:flex-col sm:flex-col justify-between item-center p-2"><div class="p-2"><ix-date .value="${this.fromDate}" max="${this.maxDate}" label="From" name="FromDate" .errorText="${this.fromDateErrorText}" .onChanged="${t=>this.onFromDateChange(t)}"></ix-date></div><div class="p-2"><ix-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 p-2"><ix-button type="" target="" appearance="text" @click="${()=>this.onApplyDateFilter(!1)}">Cancel</ix-button><ix-button type="" target="" appearance="text" @click="${()=>this.onApplyDateFilter(!0)}">Filter List</ix-button></div></div>`}});__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 IxNotifications extends MobxLitElement{constructor(){super(...arguments),this.showDrawer=!1,this.showGroupedView=!1,this.showFilters=!1,this.showDateFilters=!1,this.showMarkAllReadConfirmation=!1,this.baseApiUrl=""}async firstUpdated(){NotificationsState.baseApiUrl=this.baseApiUrl,NotificationsState.ConstructApiClient()}connectedCallback(){super.connectedCallback(),window.addEventListener("account-switched",NotificationsState.NewApiClient)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("account-switched",NotificationsState.NewApiClient)}toggleDrawer(){this.showDrawer=!this.showDrawer,this.showDrawer||(this.showFilters=!1,this.showDateFilters=!1)}renderUnReadCountText(){if(NotificationsState.unreadNotificationCount<=0)return html`${nothing}`;let t="";return t=99<NotificationsState.unreadNotificationCount?"99+":NotificationsState.unreadNotificationCount.toString(),html`<div class="unread rounded-full text-center text-white text-sm absolute icon-position -start-0">${t}</div>`}markAllread(){this.showMarkAllReadConfirmation=!0}confirmedMarkAllRead(t){t.detail.returnValue&&(null!=(t=this.applyNotificationFilters())&&t.forEach(t=>{t.status===NotificationStatus.UNREAD&&NotificationsState.setNotificationReadStatus(t.id)}),this.renderUnReadCountText()),this.showMarkAllReadConfirmation=!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:t.filter(t=>0<=differenceInHours(new Date(t.createdAt),NotificationsState.dateFilters.FROM_DATE)&&differenceInDays(new Date(t.createdAt),NotificationsState.dateFilters.TO_DATE)<=0)}displayDateFilters(){this.showDateFilters=!this.showDateFilters}renderGroupedView(){var t=this.applyNotificationFilters();return html`<div><grouped-item groupTitle="${NotificationGroups.PLANNED_MAINTENANCE}" iconName="lab_profile" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.PLANNED_MAINTENANCE)}"></grouped-item><grouped-item groupTitle="${NotificationGroups.INCIDENTS}" iconName="emergency_home" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.INCIDENTS)}"></grouped-item><grouped-item groupTitle="${NotificationGroups.SERVICE_TICKETS}" iconName="dvr" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.SERVICE_TICKETS)}"></grouped-item><grouped-item groupTitle="${NotificationGroups.DCIM_ALERTS}" iconName="public" .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(t.createdAt,new Date)),e=t.filter(t=>0!==differenceInDays(t.createdAt,new Date));return 0<(null==t?void 0:t.length)?html`<h3 class="grow">Latest</h3><div class="m-0 p-0">${0<i.length?null==i?void 0:i.map(t=>html`<notification-item .notificaiton="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}"></notification-item>`):this.renderNoResult()}</div><h3 class="grow">Earlier</h3><div>${0<e.length?null==e?void 0:e.map(t=>html`<notification-item .notificaiton="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}"></notification-item>`):this.renderNoResult()}</div>`:html`<p class="empty">No notifications yet.</p>`}renderNoResult(){return html`<p class="empty">No notifications yet.</p>`}handleCloseClick(t){this.showDateFilters=!1,this.showFilters=!1}handleContentScroll(t){null!==t&&t.detail.scrollTop+t.detail.clientHeight>=t.detail.scrollHeight&&NotificationsState.getNotifications()}render(){return html`<div class="relative"><ix-icon-button icon="notifications" class="blue-icon" @click="${()=>this.toggleDrawer()}"></ix-icon-button>${this.renderUnReadCountText()}</div><confirmation-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 ?isVisible="${this.showDrawer}" .onClosed="${()=>this.toggleDrawer()}" animate-vertical hide-close @on-content-scroll="${this.handleContentScroll}"><div class="flex flex-row justify-between grow py-2" slot="header"><h2 class="grow items-center notification-header">Notifications</h2><div class="flex flex-row justify-end grow items-center options"><ix-icon-button @click="${this.markAllread}" icon="markunread_mailbox" class="blue-icon"></ix-icon-button><ix-icon-button @click="${this.toggleGroupView}" icon="sort" class="blue-icon"></ix-icon-button><ix-icon-button @click="${this.displayFilters}" icon="list" class="blue-icon"></ix-icon-button><div class="filter-dropdown-content ${this.showFilters?"active z-50":""}"><group-filters></group-filters></div><ix-icon-button @click="${this.displayDateFilters}" icon="calendar_month" class="blue-icon"></ix-icon-button><div class="datefilter-dropdown-content ${this.showDateFilters?"active z-50":""}" @on-selection="${this.handleCloseClick}"><date-filters></date-filters></div></div></div><div slot="content">${this.showGroupedView?this.renderGroupedView():this.renderDefaultView()}</div></ix-drawer>`}}IxNotifications.styles=[TWStyles,NotificationsStyle],__decorate([state()],IxNotifications.prototype,"showDrawer",void 0),__decorate([state()],IxNotifications.prototype,"showGroupedView",void 0),__decorate([state()],IxNotifications.prototype,"showFilters",void 0),__decorate([state()],IxNotifications.prototype,"showDateFilters",void 0),__decorate([state()],IxNotifications.prototype,"showMarkAllReadConfirmation",void 0),__decorate([property({type:String})],IxNotifications.prototype,"baseApiUrl",void 0),window.customElements.define("ix-notifications",IxNotifications);

package/dist/styles/notifications-style.js

@@ -1,16 +1,17 @@
 import { css } from 'lit';
 export const NotificationsStyle = css `
 .red-icon {
-  --md-icon-button-icon-color: red;
-  --md-sys-color-on-surface-variant: red;
+  --md-icon-button-icon-color: var(--md-sys-color-error);
+  --md-sys-color-on-surface-variant: var(--md-sys-color-error);
+  padding: 12px;
 }
 .blue-icon {
-  --md-icon-button-icon-color: #1456e0;
-  --md-sys-color-on-surface-variant: #1456e0;
+  --md-icon-button-icon-color: var(--ix-sys-primary);
+  --md-sys-color-on-surface-variant: var(--ix-sys-primary);
 }
 .grey-icon {
-  --md-icon-button-icon-color: grey;
-  --md-sys-color-on-surface-variant: grey;
+  --md-icon-button-icon-color: var(--md-sys-color-tertiary);
+  --md-sys-color-on-surface-variant: var(--md-sys-color-tertiary);
   cursor: default;
 }
 .notification-item-unread {
@@ -18,16 +19,14 @@ export const NotificationsStyle = css `
   display: flex;
   flex-direction: row;
   flex-grow: 1;
-  padding-left: 0.5rem;
+  padding-left: 1rem;
   padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  width: 100%;
-  height: 100%;
+  padding-bottom: 1rem;
   background-color: white;
-  border-left: 2px solid green;
+  border-left: 2px solid var(--ix-button-confirm-color);
   font-weight: bold;
   cursor: pointer;
-  align-items: center;
+  align-items: flex-start;
 }
 .notification-item-unread:hover {
   cursor: pointer;
@@ -59,7 +58,7 @@ export const NotificationsStyle = css `
   margin-top: 0px;
   margin-bottom: 0px;
   border-bottom: #e1e4e8 inset 1px;
-  color: black;
+  color: var(--md-sys-text-color-primary);
   font-weight: 400;
   font-size: 15px;
   line-height: 20px;
@@ -67,7 +66,7 @@ export const NotificationsStyle = css `
 }
 .group-name {
   line-height: 24px;
-  color: black;
+  color: var(--md-sys-text-color-primary);
 }
 .group-item-name {
   display: grid;
@@ -85,7 +84,7 @@ export const NotificationsStyle = css `
 .ix-icon-groups {
   --ix-icon-font-size: 32px;
   --ix-icon-line-height: 32px;
-  color: black;
+  color: var(--md-sys-text-color-primary);
 }
 :host {
   --ix-drawer-border-radius: 0;
@@ -100,7 +99,7 @@ export const NotificationsStyle = css `
   align-items: center;
 }
 .ix-switch {
-  --ix-switch-size: "small";
+  --ix-switch-size: 'small';
 }
 .filter-dropdown-content {
   display: none;
@@ -133,9 +132,50 @@ export const NotificationsStyle = css `
   display: inline;
 }
 .modal-text-blue {
-  color: #1456e0;
+  color: var(--ix-sys-primary);
   padding-left: 1.8rem;
   font-weight: bold;
 }
+.unread {
+  font-family: 'Open Sans', sans-serif;
+  padding: 0 5px;
+  font-size: 12px;
+  line-height: 16px;
+  left: 22px;
+  top: 0;
+  background: var(--ix-button-cancel-color, #db0028);
+}
+.notification-header {
+  font-family: 'Red Hat Display', sans-serif;
+  padding: 20px 16px;
+  font-weight: 770;
+  font-size: 20px;
+  line-height: 24px;
+}
+h3 {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.15px;
+  text-align: left;
+  padding: 8px 16px;
+}
+.empty {
+  margin: 8px 0px 8px 16px;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.4px;
+  color: #092241;
+  font-weight: 400;
+}
+.notifification-item ix-icon-button {
+  padding: 12px;
+}
+.options {
+  padding-right: 1rem;
+}
 `;
 //# sourceMappingURL=notifications-style.js.map

package/dist/styles/notifications-style.js.map

@@ -1 +1 @@
-{"version":3,"file":"notifications-style.js","sourceRoot":"","sources":["../../src/styles/notifications-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0IpC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const NotificationsStyle = css`\n.red-icon {\n  --md-icon-button-icon-color: red;\n  --md-sys-color-on-surface-variant: red;\n}\n.blue-icon {\n  --md-icon-button-icon-color: #1456e0;\n  --md-sys-color-on-surface-variant: #1456e0;\n}\n.grey-icon {\n  --md-icon-button-icon-color: grey;\n  --md-sys-color-on-surface-variant: grey;\n  cursor: default;\n}\n.notification-item-unread {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-grow: 1;\n  padding-left: 0.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  width: 100%;\n  height: 100%;\n  background-color: white;\n  border-left: 2px solid green;\n  font-weight: bold;\n  cursor: pointer;\n  align-items: center;\n}\n.notification-item-unread:hover {\n  cursor: pointer;\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.notification-item-read {\n  cursor: default;\n  position: relative;\n  display: flex;\n  direction: flex-row;\n  flex-grow: 1;\n  padding-left: 0.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  width: 100%;\n  height: 100%;\n  background-color: white;\n  font-weight: normal;\n  align-items: center;\n}\n.notification-item-read:hover {\n  cursor: pointer;\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.group-container-row {\n  display: block;\n  font-size: 12px;\n  padding: 12px 0px 12px 0px;\n  margin-top: 0px;\n  margin-bottom: 0px;\n  border-bottom: #e1e4e8 inset 1px;\n  color: black;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: 0.15px;\n}\n.group-name {\n  line-height: 24px;\n  color: black;\n}\n.group-item-name {\n  display: grid;\n  grid-template-columns: 1fr 20%;\n  gap: 16px;\n  -webkit-box-align: center;\n  align-items: center;\n  -webkit-box-flex: 1;\n  flex-grow: 1;\n  padding-top: 5px;\n}\n.notification-items-container {\n  padding: 0px;\n}\n.ix-icon-groups {\n  --ix-icon-font-size: 32px;\n  --ix-icon-line-height: 32px;\n  color: black;\n}\n:host {\n  --ix-drawer-border-radius: 0;\n  --ix-drawer-padding: 0;\n  --ix-draw-width-sm: 50vw;\n  --ix-draw-width-lg: 30vw;\n}\n.ix-switch-wrapper {\n  margin: 4px;\n  padding: 4px;\n  vertical-align: middle;\n  align-items: center;\n}\n.ix-switch {\n  --ix-switch-size: \"small\";\n}\n.filter-dropdown-content {\n  display: none;\n  position: absolute;\n  right: 5%;\n  top: 7%;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 3;\n  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  border-radius: 8px;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;\n  background-color: #ffffff;\n}\n.filter-dropdown-content.active {\n  display: inline;\n}\n.datefilter-dropdown-content {\n  display: none;\n  position: absolute;\n  right: 1%;\n  top: 7%;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 3;\n  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  border-radius: 8px;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;\n  background-color: #ffffff;\n}\n.datefilter-dropdown-content.active {\n  display: inline;\n}\n.modal-text-blue {\n  color: #1456e0;\n  padding-left: 1.8rem;\n  font-weight: bold;\n}\n`;"]}
+{"version":3,"file":"notifications-style.js","sourceRoot":"","sources":["../../src/styles/notifications-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkLpC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const NotificationsStyle = css`\n.red-icon {\n  --md-icon-button-icon-color: var(--md-sys-color-error);\n  --md-sys-color-on-surface-variant: var(--md-sys-color-error);\n  padding: 12px;\n}\n.blue-icon {\n  --md-icon-button-icon-color: var(--ix-sys-primary);\n  --md-sys-color-on-surface-variant: var(--ix-sys-primary);\n}\n.grey-icon {\n  --md-icon-button-icon-color: var(--md-sys-color-tertiary);\n  --md-sys-color-on-surface-variant: var(--md-sys-color-tertiary);\n  cursor: default;\n}\n.notification-item-unread {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-grow: 1;\n  padding-left: 1rem;\n  padding-top: 0.5rem;\n  padding-bottom: 1rem;\n  background-color: white;\n  border-left: 2px solid var(--ix-button-confirm-color);\n  font-weight: bold;\n  cursor: pointer;\n  align-items: flex-start;\n}\n.notification-item-unread:hover {\n  cursor: pointer;\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.notification-item-read {\n  cursor: default;\n  position: relative;\n  display: flex;\n  direction: flex-row;\n  flex-grow: 1;\n  padding-left: 0.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  width: 100%;\n  height: 100%;\n  background-color: white;\n  font-weight: normal;\n  align-items: center;\n}\n.notification-item-read:hover {\n  cursor: pointer;\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.group-container-row {\n  display: block;\n  font-size: 12px;\n  padding: 12px 0px 12px 0px;\n  margin-top: 0px;\n  margin-bottom: 0px;\n  border-bottom: #e1e4e8 inset 1px;\n  color: var(--md-sys-text-color-primary);\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: 0.15px;\n}\n.group-name {\n  line-height: 24px;\n  color: var(--md-sys-text-color-primary);\n}\n.group-item-name {\n  display: grid;\n  grid-template-columns: 1fr 20%;\n  gap: 16px;\n  -webkit-box-align: center;\n  align-items: center;\n  -webkit-box-flex: 1;\n  flex-grow: 1;\n  padding-top: 5px;\n}\n.notification-items-container {\n  padding: 0px;\n}\n.ix-icon-groups {\n  --ix-icon-font-size: 32px;\n  --ix-icon-line-height: 32px;\n  color: var(--md-sys-text-color-primary);\n}\n:host {\n  --ix-drawer-border-radius: 0;\n  --ix-drawer-padding: 0;\n  --ix-draw-width-sm: 50vw;\n  --ix-draw-width-lg: 30vw;\n}\n.ix-switch-wrapper {\n  margin: 4px;\n  padding: 4px;\n  vertical-align: middle;\n  align-items: center;\n}\n.ix-switch {\n  --ix-switch-size: 'small';\n}\n.filter-dropdown-content {\n  display: none;\n  position: absolute;\n  right: 5%;\n  top: 7%;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 3;\n  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  border-radius: 8px;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;\n  background-color: #ffffff;\n}\n.filter-dropdown-content.active {\n  display: inline;\n}\n.datefilter-dropdown-content {\n  display: none;\n  position: absolute;\n  right: 1%;\n  top: 7%;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 3;\n  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  border-radius: 8px;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;\n  background-color: #ffffff;\n}\n.datefilter-dropdown-content.active {\n  display: inline;\n}\n.modal-text-blue {\n  color: var(--ix-sys-primary);\n  padding-left: 1.8rem;\n  font-weight: bold;\n}\n.unread {\n  font-family: 'Open Sans', sans-serif;\n  padding: 0 5px;\n  font-size: 12px;\n  line-height: 16px;\n  left: 22px;\n  top: 0;\n  background: var(--ix-button-cancel-color, #db0028);\n}\n.notification-header {\n  font-family: 'Red Hat Display', sans-serif;\n  padding: 20px 16px;\n  font-weight: 770;\n  font-size: 20px;\n  line-height: 24px;\n}\nh3 {\n  font-family: 'Open Sans', sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 20px;\n  letter-spacing: 0.15px;\n  text-align: left;\n  padding: 8px 16px;\n}\n.empty {\n  margin: 8px 0px 8px 16px;\n  font-family: \"Open Sans\", sans-serif;\n  font-style: normal;\n  font-size: 12px;\n  line-height: 16px;\n  letter-spacing: 0.4px;\n  color: #092241;\n  font-weight: 400;\n}\n.notifification-item ix-icon-button {\n  padding: 12px;\n}\n.options {\n  padding-right: 1rem;\n}\n`;"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-notifications following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -135,5 +135,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "a99264b5f1d7cdd356a016f6dbae9c02c719db99"
+  "gitHead": "3d6e67dd2b94b8c027564c1b338cbee29225c1e7"
 }