@digital-realty/ix-notifications 1.0.9 → 1.0.11

package/dist/IxNotifications.d.ts

@@ -12,13 +12,17 @@ import './components/notifications/date-filters.js';
 import './components/notifications/confirmation-dialog.js';
 export declare class IxNotifications extends MobxLitElement {
     static styles: import("lit").CSSResult[];
+    groupFilters: HTMLElement;
+    groupFiltersButton: HTMLElement;
+    dateFilters: HTMLElement;
+    dateFiltersButton: HTMLElement;
     private showDrawer;
     private showGroupedView;
     private showFilters;
     private showDateFilters;
     private showMarkAllReadConfirmation;
     baseApiUrl: string;
-    userAccessToken: string;
+    localStorageKey: string;
     firstUpdated(): Promise<void>;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -35,5 +39,6 @@ export declare class IxNotifications extends MobxLitElement {
     renderNoResult(): import("lit").TemplateResult<1>;
     handleCloseClick(_e: CustomEvent<FilterDialogEventDetail>): void;
     handleContentScroll(e: CustomEvent): void;
+    manageFilterVisibility(e: Event): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/IxNotifications.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { MobxLitElement } from '@adobe/lit-mobx';
 import { differenceInDays, differenceInHours } from 'date-fns';
 import { TWStyles } from './tw.js';
@@ -25,12 +25,12 @@ export class IxNotifications extends MobxLitElement {
         this.showDateFilters = false;
         this.showMarkAllReadConfirmation = false;
         this.baseApiUrl = '';
-        this.userAccessToken = '';
+        this.localStorageKey = '';
     }
     async firstUpdated() {
-        // Construct ApiClient form baseApiUrl and AccessToken
+        // Construct ApiClient form baseApiUrl and localStorageKey
         NotificationsState.baseApiUrl = this.baseApiUrl;
-        NotificationsState.userAccessToken = this.userAccessToken;
+        NotificationsState.localStorageKey = this.localStorageKey;
         NotificationsState.ConstructApiClient();
     }
     connectedCallback() {
@@ -180,6 +180,19 @@ export class IxNotifications extends MobxLitElement {
             NotificationsState.getNotifications();
         }
     }
+    manageFilterVisibility(e) {
+        const path = e.composedPath();
+        if (this.showFilters &&
+            !path.includes(this.groupFilters) &&
+            !path.includes(this.groupFiltersButton)) {
+            this.showFilters = false;
+        }
+        if (this.showDateFilters &&
+            !path.includes(this.dateFilters) &&
+            !path.includes(this.dateFiltersButton)) {
+            this.showDateFilters = false;
+        }
+    }
     render() {
         return html `
       <div class="relative">
@@ -206,6 +219,7 @@ export class IxNotifications extends MobxLitElement {
         animate-vertical
         hide-close
         @on-content-scroll=${this.handleContentScroll}
+        @click=${this.manageFilterVisibility}
       >
         <div class="flex flex-row justify-between grow py-2" slot="header">
           <h2 class="grow items-center notification-header">Notifications</h2>
@@ -224,6 +238,7 @@ export class IxNotifications extends MobxLitElement {
               @click=${this.displayFilters}
               icon="list"
               class="blue-icon"
+              id="group-filter-button"
             ></ix-icon-button>
             <div
               class="filter-dropdown-content  ${this.showFilters
@@ -236,9 +251,10 @@ export class IxNotifications extends MobxLitElement {
               @click=${this.displayDateFilters}
               icon="calendar_month"
               class="blue-icon"
+              id="date-filters-button"
             ></ix-icon-button>
             <div
-              class="datefilter-dropdown-content  ${this.showDateFilters
+              class="datefilter-dropdown-content ${this.showDateFilters
             ? 'active z-50'
             : ''}"
               @on-selection=${this.handleCloseClick}
@@ -257,6 +273,18 @@ export class IxNotifications extends MobxLitElement {
     }
 }
 IxNotifications.styles = [TWStyles, NotificationsStyle];
+__decorate([
+    query('group-filters')
+], IxNotifications.prototype, "groupFilters", void 0);
+__decorate([
+    query('ix-icon-button#group-filter-button')
+], IxNotifications.prototype, "groupFiltersButton", void 0);
+__decorate([
+    query('date-filters')
+], IxNotifications.prototype, "dateFilters", void 0);
+__decorate([
+    query('ix-icon-button#date-filters-button')
+], IxNotifications.prototype, "dateFiltersButton", void 0);
 __decorate([
     state()
 ], IxNotifications.prototype, "showDrawer", void 0);
@@ -277,5 +305,5 @@ __decorate([
 ], IxNotifications.prototype, "baseApiUrl", void 0);
 __decorate([
     property({ type: String })
-], IxNotifications.prototype, "userAccessToken", void 0);
+], IxNotifications.prototype, "localStorageKey", void 0);
 //# sourceMappingURL=IxNotifications.js.map

package/dist/IxNotifications.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxNotifications.js","sourceRoot":"","sources":["../src/IxNotifications.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { differenceInDays, differenceInHours } from 'date-fns';\nimport { TWStyles } from './tw.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport '@digital-realty/ix-drawer/ix-drawer.js';\nimport '@digital-realty/ix-icon';\nimport '@material/web/icon/icon.js';\nimport { NotificationsState } from './state/NotificationState.js';\nimport { Notification } from './models/notification.js';\nimport {\n  ConfirmationDialogEventDetail,\n  FilterDialogEventDetail,\n} from './constants/notification-types.js';\nimport {\n  NotificationGroups,\n  NotificationStatus,\n} from './constants/notifications.js';\nimport './components/notifications/notification-item.js';\nimport './components/notifications/grouped-item.js';\nimport './components/notifications/group-filters.js';\nimport './components/notifications/date-filters.js';\nimport './components/notifications/confirmation-dialog.js';\nimport { NotificationsStyle } from './styles/notifications-style.js';\n\nexport class IxNotifications extends MobxLitElement {\n  static styles = [TWStyles, NotificationsStyle];\n\n  @state() private showDrawer = false;\n\n  @state() private showGroupedView = false;\n\n  @state() private showFilters = false;\n\n  @state() private showDateFilters = false;\n\n  @state() private showMarkAllReadConfirmation = false;\n\n  @property({ type: String }) baseApiUrl = '';\n\n  @property({ type: String }) userAccessToken = '';\n\n  async firstUpdated() {\n    // Construct ApiClient form baseApiUrl and AccessToken\n    NotificationsState.baseApiUrl = this.baseApiUrl;\n    NotificationsState.userAccessToken = this.userAccessToken;\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"]}
+{"version":3,"file":"IxNotifications.js","sourceRoot":"","sources":["../src/IxNotifications.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { differenceInDays, differenceInHours } from 'date-fns';\nimport { TWStyles } from './tw.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport '@digital-realty/ix-drawer/ix-drawer.js';\nimport '@digital-realty/ix-icon';\nimport '@material/web/icon/icon.js';\nimport { NotificationsState } from './state/NotificationState.js';\nimport { 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  @query('group-filters') groupFilters!: HTMLElement;\n\n  @query('ix-icon-button#group-filter-button') groupFiltersButton!: HTMLElement;\n\n  @query('date-filters') dateFilters!: HTMLElement;\n\n  @query('ix-icon-button#date-filters-button') dateFiltersButton!: HTMLElement;\n\n  @state() private showDrawer = false;\n\n  @state() private showGroupedView = false;\n\n  @state() private showFilters = false;\n\n  @state() private showDateFilters = false;\n\n  @state() private showMarkAllReadConfirmation = false;\n\n  @property({ type: String }) baseApiUrl = '';\n\n  @property({ type: String }) localStorageKey = '';\n\n  async firstUpdated() {\n    // Construct ApiClient form baseApiUrl and localStorageKey\n    NotificationsState.baseApiUrl = this.baseApiUrl;\n    NotificationsState.localStorageKey = this.localStorageKey;\n    NotificationsState.ConstructApiClient();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener(\n      'account-switched',\n      NotificationsState.NewApiClient\n    );\n  }\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  manageFilterVisibility(e: Event) {\n    const path = e.composedPath();\n    if (\n      this.showFilters &&\n      !path.includes(this.groupFilters) &&\n      !path.includes(this.groupFiltersButton)\n    ) {\n      this.showFilters = false;\n    }\n    if (\n      this.showDateFilters &&\n      !path.includes(this.dateFilters) &&\n      !path.includes(this.dateFiltersButton)\n    ) {\n      this.showDateFilters = false;\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"relative\">\n        <ix-icon-button\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        @click=${this.manageFilterVisibility}\n      >\n        <div class=\"flex flex-row justify-between grow py-2\" slot=\"header\">\n          <h2 class=\"grow items-center notification-header\">Notifications</h2>\n          <div class=\"flex flex-row justify-end grow items-center options\">\n            <ix-icon-button\n              @click=${this.markAllread}\n              icon=\"markunread_mailbox\"\n              class=\"blue-icon\"\n            ></ix-icon-button>\n            <ix-icon-button\n              @click=${this.toggleGroupView}\n              icon=\"sort\"\n              class=\"blue-icon\"\n            ></ix-icon-button>\n            <ix-icon-button\n              @click=${this.displayFilters}\n              icon=\"list\"\n              class=\"blue-icon\"\n              id=\"group-filter-button\"\n            ></ix-icon-button>\n            <div\n              class=\"filter-dropdown-content  ${this.showFilters\n                ? 'active z-50'\n                : ''}\"\n            >\n              <group-filters></group-filters>\n            </div>\n            <ix-icon-button\n              @click=${this.displayDateFilters}\n              icon=\"calendar_month\"\n              class=\"blue-icon\"\n              id=\"date-filters-button\"\n            ></ix-icon-button>\n            <div\n              class=\"datefilter-dropdown-content ${this.showDateFilters\n                ? 'active z-50'\n                : ''}\"\n              @on-selection=${this.handleCloseClick}\n            >\n              <date-filters></date-filters>\n            </div>\n          </div>\n        </div>\n        <div slot=\"content\">\n          ${this.showGroupedView\n            ? this.renderGroupedView()\n            : this.renderDefaultView()}\n        </div>\n      </ix-drawer>\n    `;\n  }\n}\n"]}

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"@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 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 r of this.middleware)r.pre&&(e=await r.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 a of this.middleware)a.onError&&(o=await a.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 r="function"==typeof i?i:async()=>i,a={method:t.method,headers:o,body:t.body,credentials:this.configuration.credentials},r={...a,...await r({init:a,context:t})};let n;n=!(isFormData(r.body)||r.body instanceof URLSearchParams||isBlob(r.body))&&this.isJsonMime(o["Content-Type"])?JSON.stringify(r.body):r.body;a={...r,body:n};return{url:e,init:a}}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,r=e+(e.length?`[${t}]`:t);return i instanceof Array?(o=i.map(t=>encodeURIComponent(String(t))).join(`&${encodeURIComponent(r)}=`),encodeURIComponent(r)+"="+o):i instanceof Set?querystringSingleKey(t,Array.from(i),e):i instanceof Date?encodeURIComponent(r)+"="+encodeURIComponent(i.toISOString()):i instanceof Object?querystring(i,r):encodeURIComponent(r)+"="+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)};class NotificationState{constructor(){this.apiClient={noInit:!0},this.baseApiUrl="",this.userAccessToken="",this.NewApiClient=()=>{this.apiClient=new ApiClient({NotificationApiUrl:this.baseApiUrl,getAuthorizationFn:()=>this.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})}getUserAuthorization(){return"Bearer "+this.userAccessToken}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)}.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-read,.notification-item-unread{position:relative;display:flex;flex-direction:row;flex-grow:1;padding:.5rem .75rem 1rem 1rem;background-color:#fff;font-weight:700;cursor:pointer;align-items:center}.notification-item-unread{border-left:2px solid var(--ix-button-confirm-color);padding-left:14px}.notification-item-read:hover,.notification-item-unread: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-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"><h2>${null==(t=this.notificaiton)?void 0:t.resourceType}</h2></div><div class="grow text-xs"><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="",this.userAccessToken=""}async firstUpdated(){NotificationsState.baseApiUrl=this.baseApiUrl,NotificationsState.userAccessToken=this.userAccessToken,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),__decorate([property({type:String})],IxNotifications.prototype,"userAccessToken",void 0),window.customElements.define("ix-notifications",IxNotifications);
+import{__decorate}from"tslib";import{css,html,nothing}from"lit";import{property,customElement,state,query}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 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 r of this.middleware)r.pre&&(e=await r.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 a of this.middleware)a.onError&&(o=await a.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 r="function"==typeof i?i:async()=>i,a={method:t.method,headers:o,body:t.body,credentials:this.configuration.credentials},r={...a,...await r({init:a,context:t})};let n;n=!(isFormData(r.body)||r.body instanceof URLSearchParams||isBlob(r.body))&&this.isJsonMime(o["Content-Type"])?JSON.stringify(r.body):r.body;a={...r,body:n};return{url:e,init:a}}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,r=e+(e.length?`[${t}]`:t);return i instanceof Array?(o=i.map(t=>encodeURIComponent(String(t))).join(`&${encodeURIComponent(r)}=`),encodeURIComponent(r)+"="+o):i instanceof Set?querystringSingleKey(t,Array.from(i),e):i instanceof Date?encodeURIComponent(r)+"="+encodeURIComponent(i.toISOString()):i instanceof Object?querystring(i,r):encodeURIComponent(r)+"="+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=t=>{t=localStorage.getItem(t);return t?JSON.parse(t):null},getUserAuthorization=t=>{return"Bearer "+(null==(t=getLocalStorageUser(t))?void 0:t.access_token)};class NotificationState{constructor(){this.apiClient={noInit:!0},this.baseApiUrl="",this.localStorageKey="",this.NewApiClient=()=>{this.apiClient=new ApiClient({NotificationApiUrl:this.baseApiUrl,getAuthorizationFn:()=>getUserAuthorization(this.localStorageKey)}),this.getNotifications()},this.nextPageCursor="",this.notifications=[],this.unreadNotificationCount=0,this.notificationFilters={SHOW_PLANNED_MAINTENANCE:!0,SHOW_SERVICE_TICKETS:!0,SHOW_DCIM_ALERTS:!0},this.selectedNotification={id:"",resourceType:NotificationGroups.PLANNED_MAINTENANCE,subGroup:"",subject:"",resourceId:"",locations:[],createdAt:"",accountNumber:"",createdBy:"",status:NotificationStatus.READ},this.dateFilters={FROM_DATE:subDays(new Date,DefaultDisplayDays),TO_DATE:new Date},makeAutoObservable(this),makePersistable(this,{name:"notification-state",properties:["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)}.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-read,.notification-item-unread{position:relative;display:flex;flex-direction:row;flex-grow:1;padding:.5rem .75rem 1rem 1rem;background-color:#fff;font-weight:700;cursor:pointer;align-items:center}.notification-item-unread{border-left:2px solid var(--ix-button-confirm-color);padding-left:14px}.notification-item-read:hover,.notification-item-unread: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;display:flex;column-gap:.75rem;align-items:center}ix-switch{--md-switch-selected-handle-color:var(--ix-sys-primary);--md-switch-selected-pressed-handle-color:var(--ix-sys-primary);--md-switch-selected-hover-handle-color:var(--ix-sys-primary);--md-switch-selected-focus-handle-color:var(--ix-sys-primary);--md-switch-selected-track-color:#7ba0ee;--md-switch-selected-pressed-track-color:#7ba0ee;--md-switch-selected-hover-track-color:#7ba0ee;--md-switch-selected-focus-track-color:#7ba0ee;--md-switch-track-height:14px;--md-switch-track-width:36px;--md-switch-track-outline-width:0;--md-switch-handle-color:white;--md-switch-pressed-handle-color:white;--md-switch-hover-handle-color:white;--md-switch-focus-handle-color:white;--md-switch-handle-width:20px;--md-switch-handle-height:20px;display:flex}.datefilter-dropdown-content,.filter-dropdown-content{display:none;position:absolute;right:5%;top:3rem;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:3;transition:box-shadow .3s cubic-bezier(.4,0,.2,1) 0s;border-radius:3px;box-shadow:rgba(0,0,0,.2) 0 5px 5px -3px,rgba(0,0,0,.14) 0 8px 10px 1px,rgba(0,0,0,.12) 0 3px 14px 2px;background-color:#fff}.filter-dropdown-content.active{display:inline}.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;position:relative}`;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-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"><h2>${null==(t=this.notificaiton)?void 0:t.resourceType}</h2></div><div class="grow text-xs"><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="",this.localStorageKey=""}async firstUpdated(){NotificationsState.baseApiUrl=this.baseApiUrl,NotificationsState.localStorageKey=this.localStorageKey,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()}manageFilterVisibility(t){t=t.composedPath();!this.showFilters||t.includes(this.groupFilters)||t.includes(this.groupFiltersButton)||(this.showFilters=!1),!this.showDateFilters||t.includes(this.dateFilters)||t.includes(this.dateFiltersButton)||(this.showDateFilters=!1)}render(){return html`<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}" @click="${this.manageFilterVisibility}"><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" id="group-filter-button"></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" id="date-filters-button"></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([query("group-filters")],IxNotifications.prototype,"groupFilters",void 0),__decorate([query("ix-icon-button#group-filter-button")],IxNotifications.prototype,"groupFiltersButton",void 0),__decorate([query("date-filters")],IxNotifications.prototype,"dateFilters",void 0),__decorate([query("ix-icon-button#date-filters-button")],IxNotifications.prototype,"dateFiltersButton",void 0),__decorate([state()],IxNotifications.prototype,"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),__decorate([property({type:String})],IxNotifications.prototype,"localStorageKey",void 0),window.customElements.define("ix-notifications",IxNotifications);

package/dist/services/app-service.d.ts

@@ -0,0 +1 @@
+export declare const getUserAuthorization: (userLocalStorageKey: string) => string;

package/dist/services/app-service.js

@@ -0,0 +1,6 @@
+const getLocalStorageUser = (userLocalStorageKey) => {
+    const user = localStorage.getItem(userLocalStorageKey);
+    return user ? JSON.parse(user) : null;
+};
+export const getUserAuthorization = (userLocalStorageKey) => { var _a; return `Bearer ${(_a = getLocalStorageUser(userLocalStorageKey)) === null || _a === void 0 ? void 0 : _a.access_token}`; };
+//# sourceMappingURL=app-service.js.map

package/dist/services/app-service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-service.js","sourceRoot":"","sources":["../../src/services/app-service.ts"],"names":[],"mappings":"AAAA,MAAM,mBAAmB,GAAG,CAAC,mBAA4B,EAAE,EAAE;IAC3D,MAAM,IAAI,GAAG,YAAY,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;IACvD,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AACxC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,mBAA4B,EAAE,EAAE,WACnE,OAAA,UAAU,MAAA,mBAAmB,CAAC,mBAAmB,CAAC,0CAAE,YAAY,EAAE,CAAA,EAAA,CAAC","sourcesContent":["const getLocalStorageUser = (userLocalStorageKey : string) => {\n  const user = localStorage.getItem(userLocalStorageKey);\n  return user ? JSON.parse(user) : null;\n};\n\nexport const getUserAuthorization = (userLocalStorageKey : string) =>\n  `Bearer ${getLocalStorageUser(userLocalStorageKey)?.access_token}`;"]}

package/dist/state/NotificationState.d.ts

@@ -5,9 +5,8 @@ declare class NotificationState {
     constructor();
     apiClient: ApiClient;
     baseApiUrl: string;
-    userAccessToken: string;
+    localStorageKey: string;
     NewApiClient: () => void;
-    private getUserAuthorization;
     ConstructApiClient(): void | ApiClient;
     nextPageCursor: string | undefined;
     submissionResult?: any;

package/dist/state/NotificationState.js

@@ -5,15 +5,16 @@ import { NotificationGroups, NotificationStatus, DefaultDateFormat, DefaultDispl
 import { ApiClient } from '../services/api-client.js';
 import { mapNotificationDataToNotification, mapNotificationResponseToNotifications, mapParametersToPatchNotificationRequest, mapParametersToNotificationRequest, mapParametersToDeleteNotificationRequest, getNextPageCursorfromQueryParam, } from '../services/notifications-service.js';
 import { handleError } from '../helper/errors.js';
+import { getUserAuthorization } from '../services/app-service.js';
 class NotificationState {
     constructor() {
         this.apiClient = { noInit: true };
         this.baseApiUrl = '';
-        this.userAccessToken = '';
+        this.localStorageKey = '';
         this.NewApiClient = () => {
             this.apiClient = new ApiClient({
                 NotificationApiUrl: this.baseApiUrl,
-                getAuthorizationFn: () => this.getUserAuthorization(),
+                getAuthorizationFn: () => getUserAuthorization(this.localStorageKey),
             });
             this.getNotifications();
         };
@@ -54,9 +55,6 @@ class NotificationState {
             storage: window.localStorage,
         });
     }
-    getUserAuthorization() {
-        return `Bearer ${this.userAccessToken}`;
-    }
     ConstructApiClient() {
         return this.apiClient.noInit ? this.NewApiClient() : this.apiClient;
     }

package/dist/state/NotificationState.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationState.js","sourceRoot":"","sources":["../../src/state/NotificationState.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeAutoObservable } from 'mobx';\nimport { makePersistable } from 'mobx-persist-store';\nimport { parse, subDays } from 'date-fns';\nimport { Notification } from '../models/notification.js';\nimport {\n  NotificationFilters,\n  NotificationDateFilters,\n} from '../constants/notification-types.js';\nimport {\n  NotificationGroups,\n  NotificationStatus,\n  DefaultDateFormat,\n  DefaultDisplayDays,\n} from '../constants/notifications.js';\nimport { ApiClient } from '../services/api-client.js';\nimport {\n  mapNotificationDataToNotification,\n  mapNotificationResponseToNotifications,\n  mapParametersToPatchNotificationRequest,\n  mapParametersToNotificationRequest,\n  mapParametersToDeleteNotificationRequest,\n  getNextPageCursorfromQueryParam,\n} from '../services/notifications-service.js';\nimport { handleError } from '../helper/errors.js';\n\nclass NotificationState {\n  constructor() {\n    makeAutoObservable(this);\n    makePersistable(this, {\n      name: 'notification-state',\n      properties: [\n        'notifications',\n        'unreadNotificationCount',\n        'notificationFilters',\n        'dateFilters',\n        'nextPageCursor',\n      ],\n      storage: window.localStorage,\n    });\n  }\n\n  apiClient: ApiClient = { noInit: true } as ApiClient;\n\n  baseApiUrl: string = '';\n\n  userAccessToken: string = '';\n\n  public NewApiClient = () => {\n    this.apiClient = new ApiClient({\n      NotificationApiUrl: this.baseApiUrl,\n      getAuthorizationFn: () => this.getUserAuthorization(),\n    });\n\n    this.getNotifications();\n  };\n\n  private getUserAuthorization() {\n    return `Bearer ${this.userAccessToken}`;\n  }\n\n  public ConstructApiClient() {\n    return this.apiClient.noInit ? this.NewApiClient() : this.apiClient;\n  }\n\n  nextPageCursor: string | undefined = '';\n\n  submissionResult?: any;\n\n  notifications: Notification[] = [] as Notification[];\n\n  unreadNotificationCount: number = 0;\n\n  notificationFilters: NotificationFilters = {\n    SHOW_PLANNED_MAINTENANCE: true,\n    SHOW_SERVICE_TICKETS: true,\n    SHOW_DCIM_ALERTS: true,\n  } as NotificationFilters;\n\n  selectedNotification: Notification = {\n    id: '',\n    resourceType: NotificationGroups.PLANNED_MAINTENANCE,\n    subGroup: '',\n    subject: '',\n    resourceId: '',\n    locations: [],\n    createdAt: '',\n    accountNumber: '',\n    createdBy: '',\n    status: NotificationStatus.READ,\n  } as Notification;\n\n  dateFilters: NotificationDateFilters = {\n    FROM_DATE: subDays(new Date(), DefaultDisplayDays),\n    TO_DATE: new Date(),\n  } as NotificationDateFilters;\n\n  public async setNotificationReadStatus(Id: String) {\n    const itemIndex = this.notifications.findIndex(item => item.id === Id);\n    this.notifications[itemIndex].status = NotificationStatus.READ;\n    this.selectedNotification = this.notifications[itemIndex];\n\n    await this.setNotificationAsRead(Id.toString());\n\n    this.RefreshUnreadNotificationCount();\n  }\n\n  public async setNotificationDeleted(Id: String) {\n    const result = await this.DeleteNotification(Id.toString());\n    if (result === true) {\n      const itemIndex = this.notifications.findIndex(item => item.id === Id);\n      this.notifications.splice(itemIndex, 1);\n    }\n    this.RefreshUnreadNotificationCount();\n  }\n\n  public setNotificationDateFilter(fromDate?: string, toDate?: string) {\n    if (fromDate !== undefined && toDate !== undefined) {\n      this.dateFilters.FROM_DATE = parse(\n        fromDate,\n        DefaultDateFormat,\n        new Date()\n      );\n      this.dateFilters.TO_DATE = parse(toDate, DefaultDateFormat, new Date());\n    } else {\n      this.dateFilters.FROM_DATE = undefined;\n      this.dateFilters.TO_DATE = undefined;\n    }\n  }\n\n  public setNotificationFilter(Id: String | undefined, value: Boolean) {\n    switch (Id) {\n      case NotificationGroups.PLANNED_MAINTENANCE:\n        this.notificationFilters.SHOW_PLANNED_MAINTENANCE = value;\n        break;\n      case NotificationGroups.SERVICE_TICKETS:\n        this.notificationFilters.SHOW_SERVICE_TICKETS = value;\n        break;\n      case NotificationGroups.DCIM_ALERTS:\n        this.notificationFilters.SHOW_DCIM_ALERTS = value;\n        break;\n      default:\n    }\n  }\n\n  public async getNotifications() {\n    let result;\n    // this.nextPageCursor === undefined means Next page not available\n    if (this.nextPageCursor !== undefined) {\n      result = await this.apiClient?.notificationsApi\n        .getNotifications(\n          mapParametersToNotificationRequest(\n            getNextPageCursorfromQueryParam(this.nextPageCursor)\n          )\n        )\n        .catch((e: any) => {\n          handleError(e, false);\n          return undefined;\n        });\n      if (result) {\n        // this.nextPageCursor === \"\" means first page\n        this.notifications =\n          this.nextPageCursor === ''\n            ? mapNotificationResponseToNotifications(result.items)\n            : this.notifications.concat(\n                mapNotificationResponseToNotifications(result.items)\n              );\n\n        this.nextPageCursor =\n          result.next !== undefined ? result.next : undefined;\n\n        this.RefreshUnreadNotificationCount();\n      }\n    }\n  }\n\n  public async getNotificationsById(id?: string) {\n    let result;\n    if (id) {\n      result = await this.apiClient?.notificationsApi\n        .getNotificationsById({ id })\n        .catch((e: any) => {\n          handleError(e, false);\n          return undefined;\n        });\n    }\n    if (result) {\n      this.selectedNotification = mapNotificationDataToNotification(result);\n    }\n  }\n\n  private async setNotificationAsRead(id?: string) {\n    if (id) {\n      await this.apiClient?.notificationsApi\n        .patchNotificationsById(\n          mapParametersToPatchNotificationRequest(id, 'read')\n        )\n        .catch((e: any) => {\n          handleError(e, false);\n          return undefined;\n        });\n    }\n  }\n\n  private async DeleteNotification(id?: string): Promise<boolean> {\n    if (id) {\n      await this.apiClient?.notificationsApi\n        .deleteNotificationsById(mapParametersToDeleteNotificationRequest(id))\n        .catch((e: any) => {\n          handleError(e, false);\n          return false;\n        });\n\n      return true;\n    }\n    return false;\n  }\n\n  private RefreshUnreadNotificationCount() {\n    this.unreadNotificationCount = this.notifications.filter(\n      x => x.status === NotificationStatus.UNREAD\n    ).length;\n  }\n}\n\nconst NotificationsState = new NotificationState();\n\nexport { NotificationsState };\n"]}
+{"version":3,"file":"NotificationState.js","sourceRoot":"","sources":["../../src/state/NotificationState.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeAutoObservable } from 'mobx';\nimport { makePersistable } from 'mobx-persist-store';\nimport { parse, subDays } from 'date-fns';\nimport { Notification } from '../models/notification.js';\nimport {\n  NotificationFilters,\n  NotificationDateFilters,\n} from '../constants/notification-types.js';\nimport {\n  NotificationGroups,\n  NotificationStatus,\n  DefaultDateFormat,\n  DefaultDisplayDays,\n} from '../constants/notifications.js';\nimport { ApiClient } from '../services/api-client.js';\nimport {\n  mapNotificationDataToNotification,\n  mapNotificationResponseToNotifications,\n  mapParametersToPatchNotificationRequest,\n  mapParametersToNotificationRequest,\n  mapParametersToDeleteNotificationRequest,\n  getNextPageCursorfromQueryParam,\n} from '../services/notifications-service.js';\nimport { handleError } from '../helper/errors.js';\nimport { getUserAuthorization } from '../services/app-service.js';\n\n\nclass NotificationState {\n  constructor() {\n    makeAutoObservable(this);\n    makePersistable(this, {\n      name: 'notification-state',\n      properties: [\n        'notifications',\n        'unreadNotificationCount',\n        'notificationFilters',\n        'dateFilters',\n        'nextPageCursor',\n      ],\n      storage: window.localStorage,\n    });\n  }\n\n  apiClient: ApiClient = { noInit: true } as ApiClient;\n\n  baseApiUrl: string = '';\n\n  localStorageKey: string = '';\n\n  public NewApiClient = () => {\n    this.apiClient = new ApiClient({\n      NotificationApiUrl: this.baseApiUrl,\n      getAuthorizationFn: () => getUserAuthorization(this.localStorageKey),\n    });\n\n    this.getNotifications();\n  };\n\n  public ConstructApiClient() {\n    return this.apiClient.noInit ? this.NewApiClient() : this.apiClient;\n  }\n\n  nextPageCursor: string | undefined = '';\n\n  submissionResult?: any;\n\n  notifications: Notification[] = [] as Notification[];\n\n  unreadNotificationCount: number = 0;\n\n  notificationFilters: NotificationFilters = {\n    SHOW_PLANNED_MAINTENANCE: true,\n    SHOW_SERVICE_TICKETS: true,\n    SHOW_DCIM_ALERTS: true,\n  } as NotificationFilters;\n\n  selectedNotification: Notification = {\n    id: '',\n    resourceType: NotificationGroups.PLANNED_MAINTENANCE,\n    subGroup: '',\n    subject: '',\n    resourceId: '',\n    locations: [],\n    createdAt: '',\n    accountNumber: '',\n    createdBy: '',\n    status: NotificationStatus.READ,\n  } as Notification;\n\n  dateFilters: NotificationDateFilters = {\n    FROM_DATE: subDays(new Date(), DefaultDisplayDays),\n    TO_DATE: new Date(),\n  } as NotificationDateFilters;\n\n  public async setNotificationReadStatus(Id: String) {\n    const itemIndex = this.notifications.findIndex(item => item.id === Id);\n    this.notifications[itemIndex].status = NotificationStatus.READ;\n    this.selectedNotification = this.notifications[itemIndex];\n\n    await this.setNotificationAsRead(Id.toString());\n\n    this.RefreshUnreadNotificationCount();\n  }\n\n  public async setNotificationDeleted(Id: String) {\n    const result = await this.DeleteNotification(Id.toString());\n    if (result === true) {\n      const itemIndex = this.notifications.findIndex(item => item.id === Id);\n      this.notifications.splice(itemIndex, 1);\n    }\n    this.RefreshUnreadNotificationCount();\n  }\n\n  public setNotificationDateFilter(fromDate?: string, toDate?: string) {\n    if (fromDate !== undefined && toDate !== undefined) {\n      this.dateFilters.FROM_DATE = parse(\n        fromDate,\n        DefaultDateFormat,\n        new Date()\n      );\n      this.dateFilters.TO_DATE = parse(toDate, DefaultDateFormat, new Date());\n    } else {\n      this.dateFilters.FROM_DATE = undefined;\n      this.dateFilters.TO_DATE = undefined;\n    }\n  }\n\n  public setNotificationFilter(Id: String | undefined, value: Boolean) {\n    switch (Id) {\n      case NotificationGroups.PLANNED_MAINTENANCE:\n        this.notificationFilters.SHOW_PLANNED_MAINTENANCE = value;\n        break;\n      case NotificationGroups.SERVICE_TICKETS:\n        this.notificationFilters.SHOW_SERVICE_TICKETS = value;\n        break;\n      case NotificationGroups.DCIM_ALERTS:\n        this.notificationFilters.SHOW_DCIM_ALERTS = value;\n        break;\n      default:\n    }\n  }\n\n  public async getNotifications() {\n    let result;\n    // this.nextPageCursor === undefined means Next page not available\n    if (this.nextPageCursor !== undefined) {\n      result = await this.apiClient?.notificationsApi\n        .getNotifications(\n          mapParametersToNotificationRequest(\n            getNextPageCursorfromQueryParam(this.nextPageCursor)\n          )\n        )\n        .catch((e: any) => {\n          handleError(e, false);\n          return undefined;\n        });\n      if (result) {\n        // this.nextPageCursor === \"\" means first page\n        this.notifications =\n          this.nextPageCursor === ''\n            ? mapNotificationResponseToNotifications(result.items)\n            : this.notifications.concat(\n                mapNotificationResponseToNotifications(result.items)\n              );\n\n        this.nextPageCursor =\n          result.next !== undefined ? result.next : undefined;\n\n        this.RefreshUnreadNotificationCount();\n      }\n    }\n  }\n\n  public async getNotificationsById(id?: string) {\n    let result;\n    if (id) {\n      result = await this.apiClient?.notificationsApi\n        .getNotificationsById({ id })\n        .catch((e: any) => {\n          handleError(e, false);\n          return undefined;\n        });\n    }\n    if (result) {\n      this.selectedNotification = mapNotificationDataToNotification(result);\n    }\n  }\n\n  private async setNotificationAsRead(id?: string) {\n    if (id) {\n      await this.apiClient?.notificationsApi\n        .patchNotificationsById(\n          mapParametersToPatchNotificationRequest(id, 'read')\n        )\n        .catch((e: any) => {\n          handleError(e, false);\n          return undefined;\n        });\n    }\n  }\n\n  private async DeleteNotification(id?: string): Promise<boolean> {\n    if (id) {\n      await this.apiClient?.notificationsApi\n        .deleteNotificationsById(mapParametersToDeleteNotificationRequest(id))\n        .catch((e: any) => {\n          handleError(e, false);\n          return false;\n        });\n\n      return true;\n    }\n    return false;\n  }\n\n  private RefreshUnreadNotificationCount() {\n    this.unreadNotificationCount = this.notifications.filter(\n      x => x.status === NotificationStatus.UNREAD\n    ).length;\n  }\n}\n\nconst NotificationsState = new NotificationState();\n\nexport { NotificationsState };\n"]}

package/dist/styles/notifications-style.js

@@ -78,39 +78,46 @@ export const NotificationsStyle = css `
 .ix-switch-wrapper {
   margin: 4px;
   padding: 4px;
-  vertical-align: middle;
+  display: flex;
+  column-gap: 0.75rem;
   align-items: center;
 }
-.ix-switch {
-  --ix-switch-size: 'small';
+ix-switch {
+  --md-switch-selected-handle-color: var(--ix-sys-primary);
+  --md-switch-selected-pressed-handle-color: var(--ix-sys-primary);
+  --md-switch-selected-hover-handle-color: var(--ix-sys-primary);
+  --md-switch-selected-focus-handle-color: var(--ix-sys-primary);
+  --md-switch-selected-track-color: #7ba0ee;
+  --md-switch-selected-pressed-track-color: #7ba0ee;
+  --md-switch-selected-hover-track-color: #7ba0ee;
+  --md-switch-selected-focus-track-color: #7ba0ee;
+  --md-switch-track-height: 14px;
+  --md-switch-track-width: 36px;
+  --md-switch-track-outline-width: 0;
+  --md-switch-handle-color: white;
+  --md-switch-pressed-handle-color: white;
+  --md-switch-hover-handle-color: white;
+  --md-switch-focus-handle-color: white;
+  --md-switch-handle-width: 20px;
+  --md-switch-handle-height: 20px;
+  display: flex;
 }
-.filter-dropdown-content {
+.filter-dropdown-content,
+.datefilter-dropdown-content {
   display: none;
   position: absolute;
   right: 5%;
-  top: 7%;
+  top: 3rem;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 3;
   transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  border-radius: 8px;
+  border-radius: 3px;
   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;
   background-color: #ffffff;
 }
 .filter-dropdown-content.active {
   display: inline;
 }
-.datefilter-dropdown-content {
-  display: none;
-  position: absolute;
-  right: 1%;
-  top: 7%;
-  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  z-index: 3;
-  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  border-radius: 8px;
-  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;
-  background-color: #ffffff;
-}
 .datefilter-dropdown-content.active {
   display: inline;
 }
@@ -159,6 +166,7 @@ h3 {
 }
 .options {
   padding-right: 1rem;
+  position: relative;
 }
 `;
 //# 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiKpC,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}\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.notification-item-read {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-grow: 1;\n  padding: 0.5rem 0.75rem 1rem 1rem;\n  background-color: white;\n  font-weight: bold;\n  cursor: pointer;\n  align-items: center;\n}\n.notification-item-unread {\n  border-left: 2px solid var(--ix-button-confirm-color);\n  padding-left: 14px;\n}\n.notification-item-unread:hover,\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`;"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyKpC,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}\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.notification-item-read {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-grow: 1;\n  padding: 0.5rem 0.75rem 1rem 1rem;\n  background-color: white;\n  font-weight: bold;\n  cursor: pointer;\n  align-items: center;\n}\n.notification-item-unread {\n  border-left: 2px solid var(--ix-button-confirm-color);\n  padding-left: 14px;\n}\n.notification-item-unread:hover,\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  display: flex;\n  column-gap: 0.75rem;\n  align-items: center;\n}\nix-switch {\n  --md-switch-selected-handle-color: var(--ix-sys-primary);\n  --md-switch-selected-pressed-handle-color: var(--ix-sys-primary);\n  --md-switch-selected-hover-handle-color: var(--ix-sys-primary);\n  --md-switch-selected-focus-handle-color: var(--ix-sys-primary);\n  --md-switch-selected-track-color: #7ba0ee;\n  --md-switch-selected-pressed-track-color: #7ba0ee;\n  --md-switch-selected-hover-track-color: #7ba0ee;\n  --md-switch-selected-focus-track-color: #7ba0ee;\n  --md-switch-track-height: 14px;\n  --md-switch-track-width: 36px;\n  --md-switch-track-outline-width: 0;\n  --md-switch-handle-color: white;\n  --md-switch-pressed-handle-color: white;\n  --md-switch-hover-handle-color: white;\n  --md-switch-focus-handle-color: white;\n  --md-switch-handle-width: 20px;\n  --md-switch-handle-height: 20px;\n  display: flex;\n}\n.filter-dropdown-content,\n.datefilter-dropdown-content {\n  display: none;\n  position: absolute;\n  right: 5%;\n  top: 3rem;\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: 3px;\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.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  position: relative;\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.9",
+  "version": "1.0.11",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -39,14 +39,14 @@
   "dependencies": {
     "@adobe/lit-mobx": "^2.2.2",
     "@digital-realty/ix-button": "^3.2.31",
-    "@digital-realty/ix-date": "^1.0.27",
+    "@digital-realty/ix-date": "^1.0.28",
     "@digital-realty/ix-dialog": "^1.0.23",
     "@digital-realty/ix-divider": "^1.0.8",
-    "@digital-realty/ix-drawer": "^1.0.32",
+    "@digital-realty/ix-drawer": "^1.0.33",
     "@digital-realty/ix-icon": "^1.0.35",
-    "@digital-realty/ix-icon-button": "^1.0.38",
+    "@digital-realty/ix-icon-button": "^1.0.39",
     "@digital-realty/ix-switch": "^2.1.9",
-    "@digital-realty/theme": "^1.0.28",
+    "@digital-realty/theme": "^1.0.29",
     "@material/web": "1.2.0",
     "@rollup/plugin-typescript": "^11.1.6",
     "date-fns": "^3.6.0",
@@ -135,5 +135,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "49305f98dab34c5ad8c217083bdb88752039800c"
+  "gitHead": "93b748837a1a2222e475507c244f99adcf3a31d6"
 }