@digital-realty/ix-notifications 1.0.7 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/IxNotifications.d.ts +1 -0
  2. package/dist/IxNotifications.js +6 -1
  3. package/dist/IxNotifications.js.map +1 -1
  4. package/dist/components/notifications/notification-item.js +0 -1
  5. package/dist/components/notifications/notification-item.js.map +1 -1
  6. package/dist/constants/notifications.d.ts +0 -1
  7. package/dist/constants/notifications.js +0 -1
  8. package/dist/constants/notifications.js.map +1 -1
  9. package/dist/ix-notifications.min.js +1 -1
  10. package/dist/state/NotificationState.d.ts +2 -0
  11. package/dist/state/NotificationState.js +5 -2
  12. package/dist/state/NotificationState.js.map +1 -1
  13. package/dist/styles/notifications-style.js +1 -1
  14. package/dist/styles/notifications-style.js.map +1 -1
  15. package/package.json +6 -6
  16. package/dist/services/app-service.d.ts +0 -1
  17. package/dist/services/app-service.js +0 -7
  18. package/dist/services/app-service.js.map +0 -1
package/dist/IxNotifications.d.ts CHANGED
@@ -18,6 +18,7 @@ export declare class IxNotifications extends MobxLitElement {
18
18
  private showDateFilters;
19
19
  private showMarkAllReadConfirmation;
20
20
  baseApiUrl: string;
21
+ userAccessToken: string;
21
22
  firstUpdated(): Promise<void>;
22
23
  connectedCallback(): void;
23
24
  disconnectedCallback(): void;
package/dist/IxNotifications.js CHANGED
@@ -25,10 +25,12 @@ export class IxNotifications extends MobxLitElement {
25
25
  this.showDateFilters = false;
26
26
  this.showMarkAllReadConfirmation = false;
27
27
  this.baseApiUrl = '';
28
+ this.userAccessToken = '';
28
29
  }
29
30
  async firstUpdated() {
30
- // Construct ApiClient form baseApiUrl Prop
31
+ // Construct ApiClient form baseApiUrl and AccessToken
31
32
  NotificationsState.baseApiUrl = this.baseApiUrl;
33
+ NotificationsState.userAccessToken = this.userAccessToken;
32
34
  NotificationsState.ConstructApiClient();
33
35
  }
34
36
  connectedCallback() {
@@ -273,4 +275,7 @@ __decorate([
273
275
  __decorate([
274
276
  property({ type: String })
275
277
  ], IxNotifications.prototype, "baseApiUrl", void 0);
278
+ __decorate([
279
+ property({ type: String })
280
+ ], IxNotifications.prototype, "userAccessToken", void 0);
276
281
  //# sourceMappingURL=IxNotifications.js.map
package/dist/IxNotifications.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IxNotifications.js","sourceRoot":"","sources":["../src/IxNotifications.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { differenceInDays, differenceInHours } from 'date-fns';\nimport { TWStyles } from './tw.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport '@digital-realty/ix-drawer/ix-drawer.js';\nimport '@digital-realty/ix-icon';\nimport '@material/web/icon/icon.js';\nimport { NotificationsState } from './state/NotificationState.js';\nimport { Notification } from './models/notification.js';\nimport {\n ConfirmationDialogEventDetail,\n FilterDialogEventDetail,\n} from './constants/notification-types.js';\nimport {\n NotificationGroups,\n NotificationStatus,\n} from './constants/notifications.js';\nimport './components/notifications/notification-item.js';\nimport './components/notifications/grouped-item.js';\nimport './components/notifications/group-filters.js';\nimport './components/notifications/date-filters.js';\nimport './components/notifications/confirmation-dialog.js';\nimport { NotificationsStyle } from './styles/notifications-style.js';\n\nexport class IxNotifications extends MobxLitElement {\n static styles = [TWStyles, NotificationsStyle];\n\n @state() private showDrawer = false;\n\n @state() private showGroupedView = false;\n\n @state() private showFilters = false;\n\n @state() private showDateFilters = false;\n\n @state() private showMarkAllReadConfirmation = false;\n\n @property({ type: String }) baseApiUrl = '';\n\n async firstUpdated() {\n // Construct ApiClient form baseApiUrl Prop\n NotificationsState.baseApiUrl = this.baseApiUrl;\n NotificationsState.ConstructApiClient();\n }\n\n connectedCallback() {\n super.connectedCallback();\n window.addEventListener(\n 'account-switched',\n NotificationsState.NewApiClient\n );\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener(\n 'account-switched',\n NotificationsState.NewApiClient\n );\n }\n\n toggleDrawer() {\n this.showDrawer = !this.showDrawer;\n if (!this.showDrawer) {\n this.showFilters = false;\n this.showDateFilters = false;\n }\n }\n\n /* eslint-disable-next-line */\n renderUnReadCountText() {\n if (NotificationsState.unreadNotificationCount <= 0) {\n return html`${nothing}`;\n }\n\n let unreadCountText = '';\n if (NotificationsState.unreadNotificationCount > 99) {\n unreadCountText = '99+';\n } else {\n unreadCountText = NotificationsState.unreadNotificationCount.toString();\n }\n\n return html` <div\n class=\"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"]}
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"]}
package/dist/components/notifications/notification-item.js CHANGED
@@ -50,7 +50,6 @@ let NotificationItem = class NotificationItem extends MobxLitElement {
50
50
  color: var(--md-sys-text-color-primary);
51
51
  }
52
52
  .notification-item ix-icon {
53
- margin-top: 6px;
54
53
  margin-right: 12px;
55
54
  color: rgb(20, 86, 224);
56
55
  }
package/dist/components/notifications/notification-item.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"notification-item.js","sourceRoot":"","sources":["../../../src/components/notifications/notification-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport { elementTheme } from '@digital-realty/theme';\nimport { format, formatDistance, differenceInHours } from 'date-fns';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { Notification } from '../../models/notification.js';\nimport {\n NotificationStatus,\n DefaultDateTimeFormat,\n NotificationGroups,\n} from '../../constants/notifications.js';\nimport { ConfirmationDialogEventDetail } from '../../constants/notification-types.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport './confirmation-dialog.js';\nimport './view-item-dialog.js';\n\n@customElement('notification-item')\nexport class NotificationItem extends MobxLitElement {\n @property({ type: Boolean }) disabled = false;\n\n @property({ type: Object, attribute: false }) notificaiton =\n {} as Notification;\n\n @state() private showModal = false;\n\n @state() private showDeleteConfirmation = false;\n\n static get styles() {\n return [\n NotificationsStyle,\n elementTheme,\n TWStyles,\n css`\n h2 {\n font-family: 'Open Sans', sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.4px;\n text-align: left;\n }\n h3 {\n font-family: 'Open Sans', sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.4px;\n text-align: left;\n color: rgba(9, 34, 65, 0.6);\n padding: 0;\n }\n ix-icon {\n --ix-icon-font-size: 24px;\n --ix-icon-line-height: 24px;\n color: var(--md-sys-text-color-primary);\n }\n .notification-item ix-icon {\n margin-top: 6px;\n margin-right: 12px;\n color: rgb(20, 86, 224);\n }\n `,\n ];\n }\n\n displayItem() {\n if (this.notificaiton.status === NotificationStatus.UNREAD) {\n NotificationsState.setNotificationReadStatus(this.notificaiton.id);\n }\n this.showModal = true;\n }\n\n deleteItem() {\n if (!this.disabled) {\n this.showDeleteConfirmation = true;\n }\n }\n\n private confirmedDelete(e: CustomEvent<ConfirmationDialogEventDetail>) {\n // DELETE IF CONFIRMED TRUE\n if (e.detail.returnValue)\n NotificationsState.setNotificationDeleted(this.notificaiton.id);\n\n this.showDeleteConfirmation = false;\n }\n\n calculateDuration() {\n if (this.notificaiton.createdAt !== undefined) {\n if (differenceInHours(new Date(), this.notificaiton.createdAt) < 24)\n return formatDistance(this.notificaiton.createdAt, new Date(), {\n addSuffix: true,\n });\n return format(this.notificaiton.createdAt, DefaultDateTimeFormat);\n }\n return 'NA';\n }\n\n GetNotificationIcon() {\n switch (this.notificaiton.resourceType) {\n case NotificationGroups.PLANNED_MAINTENANCE:\n return 'lab_profile';\n case NotificationGroups.SERVICE_TICKETS:\n return 'dvr';\n case NotificationGroups.INCIDENTS:\n return 'emergency_home';\n case NotificationGroups.DCIM_ALERTS:\n return 'public';\n default:\n return 'sync_saved_locally';\n }\n }\n\n /* eslint-disable lit-a11y/click-events-have-key-events */\n render() {\n return html`\n <div class=\"relative bg-white-gp notification-item\">\n <div\n class=${this.notificaiton?.status === 'unread'\n ? 'notification-item-unread'\n : 'notification-item-read'}\n >\n <ix-icon\n icon=${this.GetNotificationIcon()}\n class=${this.notificaiton?.status === 'unread'\n ? 'blue-icon'\n : 'grey-icon'}\n @click=${this.displayItem}\n >${this.GetNotificationIcon()}\n </ix-icon>\n <div class=\"flex flex-col grow\" @click=${this.displayItem}>\n <div class=\"grow text-base\">\n <h2>${this.notificaiton?.resourceType}</h2>\n </div>\n <div class=\"grow text-xs\">\n <h3>${this.calculateDuration()}</h3>\n </div>\n </div>\n <div>\n <view-item-dialog\n ?open=${this.showModal}\n .notificaiton=${this.notificaiton}\n @view-item-dialog-closed=${() => {\n this.showModal = false;\n }}\n >\n </view-item-dialog>\n <confirmation-dialog\n ?open=${this.showDeleteConfirmation}\n @on-confirm-selection=${this.confirmedDelete}\n @confirm-dialog-closed=${() => {\n this.showModal = false;\n }}\n textMessage=\"Are you sure you want to delete this notification?\"\n >\n </confirmation-dialog>\n </div>\n <ix-icon-button\n @click=${this.deleteItem}\n icon=\"delete\"\n class=${!this.disabled ? 'red-icon' : 'grey-icon'}\n ></ix-icon-button>\n </div>\n </div>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"notification-item.js","sourceRoot":"","sources":["../../../src/components/notifications/notification-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,kDAAkD,CAAC;AAC1D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAEtE,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,0BAA0B,CAAC;AAClC,OAAO,uBAAuB,CAAC;AAGxB,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;IAA7C;;QACwB,aAAQ,GAAG,KAAK,CAAC;QAEA,iBAAY,GACxD,EAAkB,CAAC;QAEJ,cAAS,GAAG,KAAK,CAAC;QAElB,2BAAsB,GAAG,KAAK,CAAC;IA2IlD,CAAC;IAzIC,MAAM,KAAK,MAAM;QACf,OAAO;YACL,kBAAkB;YAClB,YAAY;YACZ,QAAQ;YACR,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BF;SACF,CAAC;IACJ,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,kBAAkB,CAAC,MAAM,EAAE;YAC1D,kBAAkB,CAAC,yBAAyB,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;SACpE;QACD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;SACpC;IACH,CAAC;IAEO,eAAe,CAAC,CAA6C;QACnE,2BAA2B;QAC3B,IAAI,CAAC,CAAC,MAAM,CAAC,WAAW;YACtB,kBAAkB,CAAC,sBAAsB,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;QAElE,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;IACtC,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,KAAK,SAAS,EAAE;YAC7C,IAAI,iBAAiB,CAAC,IAAI,IAAI,EAAE,EAAE,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,EAAE;gBACjE,OAAO,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,IAAI,EAAE,EAAE;oBAC7D,SAAS,EAAE,IAAI;iBAChB,CAAC,CAAC;YACL,OAAO,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,qBAAqB,CAAC,CAAC;SACnE;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,mBAAmB;QACjB,QAAQ,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE;YACtC,KAAK,kBAAkB,CAAC,mBAAmB;gBACzC,OAAO,aAAa,CAAC;YACvB,KAAK,kBAAkB,CAAC,eAAe;gBACrC,OAAO,KAAK,CAAC;YACf,KAAK,kBAAkB,CAAC,SAAS;gBAC/B,OAAO,gBAAgB,CAAC;YAC1B,KAAK,kBAAkB,CAAC,WAAW;gBACjC,OAAO,QAAQ,CAAC;YAClB;gBACE,OAAO,oBAAoB,CAAC;SAC/B;IACH,CAAC;IAED,0DAA0D;IAC1D,MAAM;;QACJ,OAAO,IAAI,CAAA;;;kBAGG,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,MAAK,QAAQ;YAC5C,CAAC,CAAC,0BAA0B;YAC5B,CAAC,CAAC,wBAAwB;;;mBAGnB,IAAI,CAAC,mBAAmB,EAAE;oBACzB,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,MAAK,QAAQ;YAC5C,CAAC,CAAC,WAAW;YACb,CAAC,CAAC,WAAW;qBACN,IAAI,CAAC,WAAW;eACtB,IAAI,CAAC,mBAAmB,EAAE;;mDAEU,IAAI,CAAC,WAAW;;oBAE/C,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY;;;oBAG/B,IAAI,CAAC,iBAAiB,EAAE;;;;;sBAKtB,IAAI,CAAC,SAAS;8BACN,IAAI,CAAC,YAAY;yCACN,GAAG,EAAE;YAC9B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;;;;sBAIO,IAAI,CAAC,sBAAsB;sCACX,IAAI,CAAC,eAAe;uCACnB,GAAG,EAAE;YAC5B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;;;;;;qBAMM,IAAI,CAAC,UAAU;;oBAEhB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW;;;;KAIxD,CAAC;IACJ,CAAC;CACF,CAAA;AAlJ8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAkB;AAEA;IAA7C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;sDACxB;AAEZ;IAAR,KAAK,EAAE;mDAA2B;AAE1B;IAAR,KAAK,EAAE;gEAAwC;AARrC,gBAAgB;IAD5B,aAAa,CAAC,mBAAmB,CAAC;GACtB,gBAAgB,CAmJ5B;SAnJY,gBAAgB","sourcesContent":["import { html, css } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport { elementTheme } from '@digital-realty/theme';\nimport { format, formatDistance, differenceInHours } from 'date-fns';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { Notification } from '../../models/notification.js';\nimport {\n NotificationStatus,\n DefaultDateTimeFormat,\n NotificationGroups,\n} from '../../constants/notifications.js';\nimport { ConfirmationDialogEventDetail } from '../../constants/notification-types.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport './confirmation-dialog.js';\nimport './view-item-dialog.js';\n\n@customElement('notification-item')\nexport class NotificationItem extends MobxLitElement {\n @property({ type: Boolean }) disabled = false;\n\n @property({ type: Object, attribute: false }) notificaiton =\n {} as Notification;\n\n @state() private showModal = false;\n\n @state() private showDeleteConfirmation = false;\n\n static get styles() {\n return [\n NotificationsStyle,\n elementTheme,\n TWStyles,\n css`\n h2 {\n font-family: 'Open Sans', sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.4px;\n text-align: left;\n }\n h3 {\n font-family: 'Open Sans', sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.4px;\n text-align: left;\n color: rgba(9, 34, 65, 0.6);\n padding: 0;\n }\n ix-icon {\n --ix-icon-font-size: 24px;\n --ix-icon-line-height: 24px;\n color: var(--md-sys-text-color-primary);\n }\n .notification-item ix-icon {\n margin-right: 12px;\n color: rgb(20, 86, 224);\n }\n `,\n ];\n }\n\n displayItem() {\n if (this.notificaiton.status === NotificationStatus.UNREAD) {\n NotificationsState.setNotificationReadStatus(this.notificaiton.id);\n }\n this.showModal = true;\n }\n\n deleteItem() {\n if (!this.disabled) {\n this.showDeleteConfirmation = true;\n }\n }\n\n private confirmedDelete(e: CustomEvent<ConfirmationDialogEventDetail>) {\n // DELETE IF CONFIRMED TRUE\n if (e.detail.returnValue)\n NotificationsState.setNotificationDeleted(this.notificaiton.id);\n\n this.showDeleteConfirmation = false;\n }\n\n calculateDuration() {\n if (this.notificaiton.createdAt !== undefined) {\n if (differenceInHours(new Date(), this.notificaiton.createdAt) < 24)\n return formatDistance(this.notificaiton.createdAt, new Date(), {\n addSuffix: true,\n });\n return format(this.notificaiton.createdAt, DefaultDateTimeFormat);\n }\n return 'NA';\n }\n\n GetNotificationIcon() {\n switch (this.notificaiton.resourceType) {\n case NotificationGroups.PLANNED_MAINTENANCE:\n return 'lab_profile';\n case NotificationGroups.SERVICE_TICKETS:\n return 'dvr';\n case NotificationGroups.INCIDENTS:\n return 'emergency_home';\n case NotificationGroups.DCIM_ALERTS:\n return 'public';\n default:\n return 'sync_saved_locally';\n }\n }\n\n /* eslint-disable lit-a11y/click-events-have-key-events */\n render() {\n return html`\n <div class=\"relative bg-white-gp notification-item\">\n <div\n class=${this.notificaiton?.status === 'unread'\n ? 'notification-item-unread'\n : 'notification-item-read'}\n >\n <ix-icon\n icon=${this.GetNotificationIcon()}\n class=${this.notificaiton?.status === 'unread'\n ? 'blue-icon'\n : 'grey-icon'}\n @click=${this.displayItem}\n >${this.GetNotificationIcon()}\n </ix-icon>\n <div class=\"flex flex-col grow\" @click=${this.displayItem}>\n <div class=\"grow text-base\">\n <h2>${this.notificaiton?.resourceType}</h2>\n </div>\n <div class=\"grow text-xs\">\n <h3>${this.calculateDuration()}</h3>\n </div>\n </div>\n <div>\n <view-item-dialog\n ?open=${this.showModal}\n .notificaiton=${this.notificaiton}\n @view-item-dialog-closed=${() => {\n this.showModal = false;\n }}\n >\n </view-item-dialog>\n <confirmation-dialog\n ?open=${this.showDeleteConfirmation}\n @on-confirm-selection=${this.confirmedDelete}\n @confirm-dialog-closed=${() => {\n this.showModal = false;\n }}\n textMessage=\"Are you sure you want to delete this notification?\"\n >\n </confirmation-dialog>\n </div>\n <ix-icon-button\n @click=${this.deleteItem}\n icon=\"delete\"\n class=${!this.disabled ? 'red-icon' : 'grey-icon'}\n ></ix-icon-button>\n </div>\n </div>\n `;\n }\n}\n"]}
package/dist/constants/notifications.d.ts CHANGED
@@ -8,7 +8,6 @@ export declare enum NotificationGroups {
8
8
  DCIM_ALERTS = "DCIM Alerts",
9
9
  SERVICE_TICKETS = "Service Tickets"
10
10
  }
11
- export declare const userLocalStorageKey = "x-auth";
12
11
  export declare const DefaultDateFormat = "yyyy-MM-dd";
13
12
  export declare const DefaultTimeFormat = "HH:mm:ss";
14
13
  export declare const DefaultDisplayDays = 30;
package/dist/constants/notifications.js CHANGED
@@ -11,7 +11,6 @@ export var NotificationGroups;
11
11
  NotificationGroups["DCIM_ALERTS"] = "DCIM Alerts";
12
12
  NotificationGroups["SERVICE_TICKETS"] = "Service Tickets";
13
13
  })(NotificationGroups || (NotificationGroups = {}));
14
- export const userLocalStorageKey = 'x-auth';
15
14
  export const DefaultDateFormat = 'yyyy-MM-dd';
16
15
  export const DefaultTimeFormat = 'HH:mm:ss';
17
16
  export const DefaultDisplayDays = 30;
package/dist/constants/notifications.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"notifications.js","sourceRoot":"","sources":["../../src/constants/notifications.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,mCAAa,CAAA;IACb,uCAAiB,CAAA;AACnB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED,MAAM,CAAN,IAAY,kBAKX;AALD,WAAY,kBAAkB;IAC5B,iEAA2C,CAAA;IAC3C,6CAAuB,CAAA;IACvB,iDAA2B,CAAA;IAC3B,yDAAmC,CAAA;AACrC,CAAC,EALW,kBAAkB,KAAlB,kBAAkB,QAK7B;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,QAAQ,CAAC;AAE5C,MAAM,CAAC,MAAM,iBAAiB,GAAG,YAAY,CAAC;AAE9C,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAErC,MAAM,CAAC,MAAM,qBAAqB,GAAG,qBAAqB,CAAC","sourcesContent":["/* eslint-disable */\nexport enum NotificationStatus {\n READ = 'read',\n UNREAD = 'unread',\n}\n\nexport enum NotificationGroups {\n PLANNED_MAINTENANCE = 'Planned Maintenance',\n INCIDENTS = 'Incidents',\n DCIM_ALERTS = 'DCIM Alerts',\n SERVICE_TICKETS = 'Service Tickets',\n}\n\nexport const userLocalStorageKey = 'x-auth';\n\nexport const DefaultDateFormat = 'yyyy-MM-dd';\n\nexport const DefaultTimeFormat = 'HH:mm:ss';\n\nexport const DefaultDisplayDays = 30;\n\nexport const DefaultDateTimeFormat = 'yyyy-MM-dd HH:mm:ss';\n"]}
1
+ {"version":3,"file":"notifications.js","sourceRoot":"","sources":["../../src/constants/notifications.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,mCAAa,CAAA;IACb,uCAAiB,CAAA;AACnB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED,MAAM,CAAN,IAAY,kBAKX;AALD,WAAY,kBAAkB;IAC5B,iEAA2C,CAAA;IAC3C,6CAAuB,CAAA;IACvB,iDAA2B,CAAA;IAC3B,yDAAmC,CAAA;AACrC,CAAC,EALW,kBAAkB,KAAlB,kBAAkB,QAK7B;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,YAAY,CAAC;AAE9C,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAErC,MAAM,CAAC,MAAM,qBAAqB,GAAG,qBAAqB,CAAC","sourcesContent":["/* eslint-disable */\nexport enum NotificationStatus {\n READ = 'read',\n UNREAD = 'unread',\n}\n\nexport enum NotificationGroups {\n PLANNED_MAINTENANCE = 'Planned Maintenance',\n INCIDENTS = 'Incidents',\n DCIM_ALERTS = 'DCIM Alerts',\n SERVICE_TICKETS = 'Service Tickets',\n}\n\nexport const DefaultDateFormat = 'yyyy-MM-dd';\n\nexport const DefaultTimeFormat = 'HH:mm:ss';\n\nexport const DefaultDisplayDays = 30;\n\nexport const DefaultDateTimeFormat = 'yyyy-MM-dd HH:mm:ss';\n"]}
package/dist/ix-notifications.min.js CHANGED
@@ -1 +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 userLocalStorageKey="x-auth",DefaultDateFormat="yyyy-MM-dd",DefaultDisplayDays=30,DefaultDateTimeFormat="yyyy-MM-dd HH:mm:ss",BASE_PATH="http://api.digitalrealty.com/notifications".replace(/\/+$/,"");class Configuration{constructor(t={}){this.configuration=t}set config(t){this.configuration=t}get basePath(){return null!=this.configuration.basePath?this.configuration.basePath:BASE_PATH}get fetchApi(){return this.configuration.fetchApi}get middleware(){return this.configuration.middleware||[]}get queryParamsStringify(){return this.configuration.queryParamsStringify||querystring}get username(){return this.configuration.username}get password(){return this.configuration.password}get apiKey(){const t=this.configuration.apiKey;if(t)return"function"==typeof t?t:()=>t}get accessToken(){const t=this.configuration.accessToken;if(t)return"function"==typeof t?t:async()=>t}get headers(){return this.configuration.headers}get credentials(){return this.configuration.credentials}}const DefaultConfig=new Configuration;class BaseAPI{constructor(t=DefaultConfig){this.configuration=t,this.fetchApi=async(t,i)=>{let e={url:t,init:i};for(const a of this.middleware)a.pre&&(e=await a.pre({fetch:this.fetchApi,...e})||e);let o=void 0;try{o=await(this.configuration.fetchApi||fetch)(e.url,e.init)}catch(t){for(const r of this.middleware)r.onError&&(o=await r.onError({fetch:this.fetchApi,url:e.url,init:e.init,error:t,response:o?o.clone():void 0})||o);if(void 0===o)throw t instanceof Error?new FetchError(t,"The request failed and the interceptors did not return an alternative response"):t}for(const n of this.middleware)n.post&&(o=await n.post({fetch:this.fetchApi,url:e.url,init:e.init,response:o.clone()})||o);return o},this.middleware=t.middleware}withMiddleware(...t){var i=this.clone();return i.middleware=i.middleware.concat(...t),i}withPreMiddleware(...t){t=t.map(t=>({pre:t}));return this.withMiddleware(...t)}withPostMiddleware(...t){t=t.map(t=>({post:t}));return this.withMiddleware(...t)}isJsonMime(t){return!!t&&BaseAPI.jsonRegex.test(t)}async request(t,i){var{url:t,init:i}=await this.createFetchParams(t,i),t=await this.fetchApi(t,i);if(t&&200<=t.status&&t.status<300)return t;throw new ResponseError(t,"Response returned an error code")}async createFetchParams(t,i){let e=this.configuration.basePath+t.path;void 0!==t.query&&0!==Object.keys(t.query).length&&(e+="?"+this.configuration.queryParamsStringify(t.query));const o=Object.assign({},this.configuration.headers,t.headers);Object.keys(o).forEach(t=>void 0===o[t]?delete o[t]:{});var a="function"==typeof i?i:async()=>i,r={method:t.method,headers:o,body:t.body,credentials:this.configuration.credentials},a={...r,...await a({init:r,context:t})};let n;n=!(isFormData(a.body)||a.body instanceof URLSearchParams||isBlob(a.body))&&this.isJsonMime(o["Content-Type"])?JSON.stringify(a.body):a.body;r={...a,body:n};return{url:e,init:r}}clone(){var t=new this.constructor(this.configuration);return t.middleware=this.middleware.slice(),t}}function isBlob(t){return"undefined"!=typeof Blob&&t instanceof Blob}function isFormData(t){return"undefined"!=typeof FormData&&t instanceof FormData}BaseAPI.jsonRegex=new RegExp("^(:?application/json|[^;/ \t]+/[^;/ \t]+[+]json)[ \t]*(:?;.*)?$","i");class ResponseError extends Error{constructor(t,i){super(i),this.response=t,this.name="ResponseError"}}class FetchError extends Error{constructor(t,i){super(i),this.cause=t,this.name="FetchError"}}class RequiredError extends Error{constructor(t,i){super(i),this.field=t,this.name="RequiredError"}}const COLLECTION_FORMATS={csv:",",ssv:" ",tsv:"\t",pipes:"|"};function exists(t,i){t=t[i];return null!=t}function querystring(i,e=""){return Object.keys(i).map(t=>querystringSingleKey(t,i[t],e)).filter(t=>0<t.length).join("&")}function querystringSingleKey(t,i,e=""){var o,a=e+(e.length?`[${t}]`:t);return i instanceof Array?(o=i.map(t=>encodeURIComponent(String(t))).join(`&${encodeURIComponent(a)}=`),encodeURIComponent(a)+"="+o):i instanceof Set?querystringSingleKey(t,Array.from(i),e):i instanceof Date?encodeURIComponent(a)+"="+encodeURIComponent(i.toISOString()):i instanceof Object?querystring(i,a):encodeURIComponent(a)+"="+encodeURIComponent(String(i))}class JSONApiResponse{constructor(t,i=t=>t){this.raw=t,this.transformer=i}async value(){return this.transformer(await this.raw.json())}}function StatusFromJSON(t){return StatusFromJSONTyped(t)}function StatusFromJSONTyped(t,i){return t}function StatusToJSON(t){return t}function NotificationFromJSON(t){return NotificationFromJSONTyped(t)}function NotificationFromJSONTyped(t,i){return null==t?t:{id:exists(t,"id")?t.id:void 0,resourceType:exists(t,"resource_type")?t.resource_type:void 0,subGroup:exists(t,"sub_group")?t.sub_group:void 0,createdAt:exists(t,"created_at")?null===t.created_at?null:new Date(t.created_at):void 0,createdBy:exists(t,"created_by")?t.created_by:void 0,subject:exists(t,"subject")?t.subject:void 0,locations:exists(t,"locations")?t.locations:void 0,resourceId:exists(t,"resource_id")?t.resource_id:void 0,status:exists(t,"status")?StatusFromJSON(t.status):void 0,accountNumber:exists(t,"account_number")?t.account_number:void 0}}function GetNotifications200ResponseFromJSON(t){return GetNotifications200ResponseFromJSONTyped(t)}function GetNotifications200ResponseFromJSONTyped(t,i){return null==t?t:{self:exists(t,"self")?t.self:void 0,first:exists(t,"first")?t.first:void 0,prev:exists(t,"prev")?t.prev:void 0,next:exists(t,"next")?t.next:void 0,last:exists(t,"last")?t.last:void 0,items:t.items.map(NotificationFromJSON)}}function NotificationDeleteFromJSON(t){return NotificationDeleteFromJSONTyped(t)}function NotificationDeleteFromJSONTyped(t,i){return null==t?t:{success:exists(t,"success")?t.success:void 0}}function NotificationPatchFromJSON(t){return NotificationPatchFromJSONTyped(t)}function NotificationPatchFromJSONTyped(t,i){return null==t?t:{status:StatusFromJSON(t.status)}}function NotificationPatchToJSON(t){if(void 0!==t)return null===t?null:{status:StatusToJSON(t.status)}}function NotificationRequestToJSON(t){if(void 0!==t)return null===t?null:{resource_type:t.resourceType,sub_group:t.subGroup,recipients:t.recipients,account_number:t.accountNumber,locations:t.locations,resource_id:t.resourceId,subject:t.subject,created_at:void 0===t.createdAt?void 0:null===t.createdAt?null:t.createdAt.toISOString()}}class NotificationsApi extends BaseAPI{async createNotificationRaw(t,i){var e={"Content-Type":"application/json"},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(e.Authorization="Bearer "+o),await this.request({path:"/notifications",method:"POST",headers:e,query:{},body:NotificationRequestToJSON(t.notificationRequest)},i));return new JSONApiResponse(o,t=>NotificationFromJSON(t))}async createNotification(t={},i){return(await this.createNotificationRaw(t,i)).value()}async deleteNotificationsByIdRaw(t,i){if(null===t.id||void 0===t.id)throw new RequiredError("id","Required parameter requestParameters.id was null or undefined when calling deleteNotificationsById.");var e={},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(e.Authorization="Bearer "+o),await this.request({path:"/notifications/{id}".replace("{id}",encodeURIComponent(String(t.id))),method:"DELETE",headers:e,query:{}},i));return new JSONApiResponse(o,t=>NotificationDeleteFromJSON(t))}async deleteNotificationsById(t,i){return(await this.deleteNotificationsByIdRaw(t,i)).value()}async getNotificationsRaw(t,i){var e={},o=(void 0!==t.sort&&(e.sort=t.sort),void 0!==t.cursor&&(e.cursor=t.cursor),void 0!==t.resourceType&&(e.resource_type=t.resourceType),void 0!==t.accountNumber&&(e.account_number=t.accountNumber),void 0!==t.createdAfter&&(e.created_after=t.createdAfter.toISOString()),void 0!==t.createdBefore&&(e.created_before=t.createdBefore.toISOString()),void 0!==t.locationId&&(e.location_id=t.locationId),void 0!==t.subGroup&&(e.sub_group=t.subGroup),void 0!==t.status&&(e.status=t.status),{}),t=(t.prefer&&(o.Prefer=t.prefer.join(COLLECTION_FORMATS.csv)),this.configuration&&this.configuration.accessToken&&(t=await(0,this.configuration.accessToken)("bearerToken",[]))&&(o.Authorization="Bearer "+t),await this.request({path:"/notifications",method:"GET",headers:o,query:e},i));return new JSONApiResponse(t,t=>GetNotifications200ResponseFromJSON(t))}async getNotifications(t={},i){return(await this.getNotificationsRaw(t,i)).value()}async getNotificationsByIdRaw(t,i){if(null===t.id||void 0===t.id)throw new RequiredError("id","Required parameter requestParameters.id was null or undefined when calling getNotificationsById.");var e={},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(e.Authorization="Bearer "+o),await this.request({path:"/notifications/{id}".replace("{id}",encodeURIComponent(String(t.id))),method:"GET",headers:e,query:{}},i));return new JSONApiResponse(o,t=>NotificationFromJSON(t))}async getNotificationsById(t,i){return(await this.getNotificationsByIdRaw(t,i)).value()}async patchNotificationsByIdRaw(t,i){if(null===t.id||void 0===t.id)throw new RequiredError("id","Required parameter requestParameters.id was null or undefined when calling patchNotificationsById.");var e={"Content-Type":"application/json"},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(e.Authorization="Bearer "+o),await this.request({path:"/notifications/{id}".replace("{id}",encodeURIComponent(String(t.id))),method:"PATCH",headers:e,query:{},body:NotificationPatchToJSON(t.notificationPatch)},i));return new JSONApiResponse(o,t=>NotificationPatchFromJSON(t))}async patchNotificationsById(t,i){return(await this.patchNotificationsByIdRaw(t,i)).value()}}const APIEndpointPrefixes={Notifications:"notifications"};class ApiClient{constructor(t){this.noInit=!1,this.configuration=t}get notificationsApi(){return new NotificationsApi(new Configuration({basePath:this.configuration.NotificationApiUrl+"/"+APIEndpointPrefixes.Notifications,headers:{Authorization:this.getAuthorization()}}))}getAuthorization(){return this.configuration.getAuthorizationFn?this.configuration.getAuthorizationFn():""}}const mapResourceTypeToNotificationGroups=t=>{switch(t.toLowerCase()){case"planned maintenance":return NotificationGroups.PLANNED_MAINTENANCE;case"incidents":return NotificationGroups.INCIDENTS;case"dcim alerts":return NotificationGroups.DCIM_ALERTS;case"service tickets":return NotificationGroups.SERVICE_TICKETS;default:return NotificationGroups.PLANNED_MAINTENANCE}},mapStringToNotificationStatus=t=>{switch(t.toLowerCase()){case"unread":return NotificationStatus.UNREAD;case"read":return NotificationStatus.READ;default:return NotificationStatus.UNREAD}},mapParametersToNotificationRequest=t=>({sort:"-created_at",cursor:t}),mapParametersToPatchNotificationRequest=(t,i)=>({id:t,notificationPatch:{status:i}}),mapParametersToDeleteNotificationRequest=t=>({id:t}),mapNotificationDataToNotification=t=>{var i;return{subject:null!=(i=t.subject)?i:"",id:t.id,accountNumber:null!=(i=t.accountNumber)?i:"",resourceType:mapResourceTypeToNotificationGroups(null!=(i=t.resourceType)?i:""),subGroup:null!=(i=t.subGroup)?i:"",resourceId:null!=(i=t.resourceId)?i:"",status:mapStringToNotificationStatus(null!=(i=t.status)?i:""),createdAt:null!==t.createdAt&&void 0!==t.createdAt?format(t.createdAt,DefaultDateTimeFormat):format(new Date,DefaultDateTimeFormat),createdBy:null!=(i=t.createdBy)?i:"",locations:null!=(i=t.locations)?i:[]}},mapNotificationResponseToNotifications=t=>t.map(t=>mapNotificationDataToNotification(t)),getNextPageCursorfromQueryParam=t=>{t=new URLSearchParams(t),t=t.has("cursor")?t.get("cursor"):"";return null!==t?t:""},handleError=async(i,t=!0)=>{if(i instanceof ResponseError&&400===i.response.status)try{var e=(await i.response.json())["detail"];t&&console.error(e)}catch(t){console.error(i)}else console.error(i)},getLocalStorageUser=()=>{var t=localStorage.getItem(userLocalStorageKey);return t?JSON.parse(t):null},getUserAuthorization=()=>{var t;return"Bearer "+(null==(t=getLocalStorageUser())?void 0:t.access_token)};class NotificationState{constructor(){this.apiClient={noInit:!0},this.baseApiUrl="",this.NewApiClient=()=>{this.apiClient=new ApiClient({NotificationApiUrl:this.baseApiUrl,getAuthorizationFn:()=>getUserAuthorization()}),this.getNotifications()},this.nextPageCursor="",this.notifications=[],this.unreadNotificationCount=0,this.notificationFilters={SHOW_PLANNED_MAINTENANCE:!0,SHOW_SERVICE_TICKETS:!0,SHOW_DCIM_ALERTS:!0},this.selectedNotification={id:"",resourceType:NotificationGroups.PLANNED_MAINTENANCE,subGroup:"",subject:"",resourceId:"",locations:[],createdAt:"",accountNumber:"",createdBy:"",status:NotificationStatus.READ},this.dateFilters={FROM_DATE:subDays(new Date,DefaultDisplayDays),TO_DATE:new Date},makeAutoObservable(this),makePersistable(this,{name:"notification-state",properties:["notifications","unreadNotificationCount","notificationFilters","dateFilters","nextPageCursor"],storage:window.localStorage})}ConstructApiClient(){return this.apiClient.noInit?this.NewApiClient():this.apiClient}async setNotificationReadStatus(i){var t=this.notifications.findIndex(t=>t.id===i);this.notifications[t].status=NotificationStatus.READ,this.selectedNotification=this.notifications[t],await this.setNotificationAsRead(i.toString()),this.RefreshUnreadNotificationCount()}async setNotificationDeleted(i){var t;!0===await this.DeleteNotification(i.toString())&&(t=this.notifications.findIndex(t=>t.id===i),this.notifications.splice(t,1)),this.RefreshUnreadNotificationCount()}setNotificationDateFilter(t,i){void 0!==t&&void 0!==i?(this.dateFilters.FROM_DATE=parse(t,DefaultDateFormat,new Date),this.dateFilters.TO_DATE=parse(i,DefaultDateFormat,new Date)):(this.dateFilters.FROM_DATE=void 0,this.dateFilters.TO_DATE=void 0)}setNotificationFilter(t,i){switch(t){case NotificationGroups.PLANNED_MAINTENANCE:this.notificationFilters.SHOW_PLANNED_MAINTENANCE=i;break;case NotificationGroups.SERVICE_TICKETS:this.notificationFilters.SHOW_SERVICE_TICKETS=i;break;case NotificationGroups.DCIM_ALERTS:this.notificationFilters.SHOW_DCIM_ALERTS=i}}async getNotifications(){var t;void 0!==this.nextPageCursor&&(t=await(null==(t=this.apiClient)?void 0:t.notificationsApi.getNotifications(mapParametersToNotificationRequest(getNextPageCursorfromQueryParam(this.nextPageCursor))).catch(t=>{handleError(t,!1)})))&&(this.notifications=""===this.nextPageCursor?mapNotificationResponseToNotifications(t.items):this.notifications.concat(mapNotificationResponseToNotifications(t.items)),this.nextPageCursor=void 0!==t.next?t.next:void 0,this.RefreshUnreadNotificationCount())}async getNotificationsById(t){var i;let e;(e=t?await(null==(i=this.apiClient)?void 0:i.notificationsApi.getNotificationsById({id:t}).catch(t=>{handleError(t,!1)})):e)&&(this.selectedNotification=mapNotificationDataToNotification(e))}async setNotificationAsRead(t){var i;t&&await(null==(i=this.apiClient)?void 0:i.notificationsApi.patchNotificationsById(mapParametersToPatchNotificationRequest(t,"read")).catch(t=>{handleError(t,!1)}))}async DeleteNotification(t){var i;return!!t&&(await(null==(i=this.apiClient)?void 0:i.notificationsApi.deleteNotificationsById(mapParametersToDeleteNotificationRequest(t)).catch(t=>(handleError(t,!1),!1))),!0)}RefreshUnreadNotificationCount(){this.unreadNotificationCount=this.notifications.filter(t=>t.status===NotificationStatus.UNREAD).length}}const NotificationsState=new NotificationState,NotificationsStyle=css`.red-icon{--md-icon-button-icon-color:var(--md-sys-color-error);--md-sys-color-on-surface-variant:var(--md-sys-color-error)}.blue-icon{--md-icon-button-icon-color:var(--ix-sys-primary);--md-sys-color-on-surface-variant:var(--ix-sys-primary)}.grey-icon{--md-icon-button-icon-color:var(--md-sys-color-tertiary);--md-sys-color-on-surface-variant:var(--md-sys-color-tertiary);cursor:default}.notification-item-unread{position:relative;display:flex;flex-direction:row;flex-grow:1;padding:.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-top:6px;margin-right:12px;color:#1456e0}`]}displayItem(){this.notificaiton.status===NotificationStatus.UNREAD&&NotificationsState.setNotificationReadStatus(this.notificaiton.id),this.showModal=!0}deleteItem(){this.disabled||(this.showDeleteConfirmation=!0)}confirmedDelete(t){t.detail.returnValue&&NotificationsState.setNotificationDeleted(this.notificaiton.id),this.showDeleteConfirmation=!1}calculateDuration(){return void 0!==this.notificaiton.createdAt?differenceInHours(new Date,this.notificaiton.createdAt)<24?formatDistance(this.notificaiton.createdAt,new Date,{addSuffix:!0}):format(this.notificaiton.createdAt,DefaultDateTimeFormat):"NA"}GetNotificationIcon(){switch(this.notificaiton.resourceType){case NotificationGroups.PLANNED_MAINTENANCE:return"lab_profile";case NotificationGroups.SERVICE_TICKETS:return"dvr";case NotificationGroups.INCIDENTS:return"emergency_home";case NotificationGroups.DCIM_ALERTS:return"public";default:return"sync_saved_locally"}}render(){var t;return html`<div class="relative bg-white-gp notification-item"><div class="${"unread"===(null==(t=this.notificaiton)?void 0:t.status)?"notification-item-unread":"notification-item-read"}"><ix-icon icon="${this.GetNotificationIcon()}" class="${"unread"===(null==(t=this.notificaiton)?void 0:t.status)?"blue-icon":"grey-icon"}" @click="${this.displayItem}">${this.GetNotificationIcon()}</ix-icon><div class="flex flex-col grow" @click="${this.displayItem}"><div class="grow text-base"><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=""}async firstUpdated(){NotificationsState.baseApiUrl=this.baseApiUrl,NotificationsState.ConstructApiClient()}connectedCallback(){super.connectedCallback(),window.addEventListener("account-switched",NotificationsState.NewApiClient)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("account-switched",NotificationsState.NewApiClient)}toggleDrawer(){this.showDrawer=!this.showDrawer,this.showDrawer||(this.showFilters=!1,this.showDateFilters=!1)}renderUnReadCountText(){if(NotificationsState.unreadNotificationCount<=0)return html`${nothing}`;let t="";return t=99<NotificationsState.unreadNotificationCount?"99+":NotificationsState.unreadNotificationCount.toString(),html`<div class="unread rounded-full text-center text-white text-sm absolute icon-position -start-0">${t}</div>`}markAllread(){this.showMarkAllReadConfirmation=!0}confirmedMarkAllRead(t){t.detail.returnValue&&(null!=(t=this.applyNotificationFilters())&&t.forEach(t=>{t.status===NotificationStatus.UNREAD&&NotificationsState.setNotificationReadStatus(t.id)}),this.renderUnReadCountText()),this.showMarkAllReadConfirmation=!1}toggleGroupView(){this.showGroupedView=!this.showGroupedView}displayFilters(){this.showFilters=!this.showFilters}applyNotificationFilters(){var t=null==(t=NotificationsState.notifications)?void 0:t.filter(t=>t.resourceType===NotificationGroups.PLANNED_MAINTENANCE&&!0===NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE||t.resourceType===NotificationGroups.SERVICE_TICKETS&&!0===NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS||t.resourceType===NotificationGroups.DCIM_ALERTS&&!0===NotificationsState.notificationFilters.SHOW_DCIM_ALERTS||t.resourceType===NotificationGroups.INCIDENTS);return void 0===NotificationsState.dateFilters.FROM_DATE||void 0===NotificationsState.dateFilters.TO_DATE?t:t.filter(t=>0<=differenceInHours(new Date(t.createdAt),NotificationsState.dateFilters.FROM_DATE)&&differenceInDays(new Date(t.createdAt),NotificationsState.dateFilters.TO_DATE)<=0)}displayDateFilters(){this.showDateFilters=!this.showDateFilters}renderGroupedView(){var t=this.applyNotificationFilters();return html`<div><grouped-item groupTitle="${NotificationGroups.PLANNED_MAINTENANCE}" iconName="lab_profile" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.PLANNED_MAINTENANCE)}"></grouped-item><grouped-item groupTitle="${NotificationGroups.INCIDENTS}" iconName="emergency_home" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.INCIDENTS)}"></grouped-item><grouped-item groupTitle="${NotificationGroups.SERVICE_TICKETS}" iconName="dvr" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.SERVICE_TICKETS)}"></grouped-item><grouped-item groupTitle="${NotificationGroups.DCIM_ALERTS}" iconName="public" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.DCIM_ALERTS)}"></grouped-item></div>`}renderDefaultView(){var t=this.applyNotificationFilters(),i=t.filter(t=>0===differenceInDays(t.createdAt,new Date)),e=t.filter(t=>0!==differenceInDays(t.createdAt,new Date));return 0<(null==t?void 0:t.length)?html`<h3 class="grow">Latest</h3><div class="m-0 p-0">${0<i.length?null==i?void 0:i.map(t=>html`<notification-item .notificaiton="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}"></notification-item>`):this.renderNoResult()}</div><h3 class="grow">Earlier</h3><div>${0<e.length?null==e?void 0:e.map(t=>html`<notification-item .notificaiton="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}"></notification-item>`):this.renderNoResult()}</div>`:html`<p class="empty">No notifications yet.</p>`}renderNoResult(){return html`<p class="empty">No notifications yet.</p>`}handleCloseClick(t){this.showDateFilters=!1,this.showFilters=!1}handleContentScroll(t){null!==t&&t.detail.scrollTop+t.detail.clientHeight>=t.detail.scrollHeight&&NotificationsState.getNotifications()}render(){return html`<div class="relative"><ix-icon-button icon="notifications" class="blue-icon" @click="${()=>this.toggleDrawer()}"></ix-icon-button>${this.renderUnReadCountText()}</div><confirmation-dialog ?open="${this.showMarkAllReadConfirmation}" @confirm-dialog-closed="${()=>{this.showMarkAllReadConfirmation=!1}}" @on-confirm-selection="${this.confirmedMarkAllRead}" textMessage="Are you sure you want to mark all notifications as read?"></confirmation-dialog><ix-drawer ?isVisible="${this.showDrawer}" .onClosed="${()=>this.toggleDrawer()}" animate-vertical hide-close @on-content-scroll="${this.handleContentScroll}"><div class="flex flex-row justify-between grow py-2" slot="header"><h2 class="grow items-center notification-header">Notifications</h2><div class="flex flex-row justify-end grow items-center options"><ix-icon-button @click="${this.markAllread}" icon="markunread_mailbox" class="blue-icon"></ix-icon-button><ix-icon-button @click="${this.toggleGroupView}" icon="sort" class="blue-icon"></ix-icon-button><ix-icon-button @click="${this.displayFilters}" icon="list" class="blue-icon"></ix-icon-button><div class="filter-dropdown-content ${this.showFilters?"active z-50":""}"><group-filters></group-filters></div><ix-icon-button @click="${this.displayDateFilters}" icon="calendar_month" class="blue-icon"></ix-icon-button><div class="datefilter-dropdown-content ${this.showDateFilters?"active z-50":""}" @on-selection="${this.handleCloseClick}"><date-filters></date-filters></div></div></div><div slot="content">${this.showGroupedView?this.renderGroupedView():this.renderDefaultView()}</div></ix-drawer>`}}IxNotifications.styles=[TWStyles,NotificationsStyle],__decorate([state()],IxNotifications.prototype,"showDrawer",void 0),__decorate([state()],IxNotifications.prototype,"showGroupedView",void 0),__decorate([state()],IxNotifications.prototype,"showFilters",void 0),__decorate([state()],IxNotifications.prototype,"showDateFilters",void 0),__decorate([state()],IxNotifications.prototype,"showMarkAllReadConfirmation",void 0),__decorate([property({type:String})],IxNotifications.prototype,"baseApiUrl",void 0),window.customElements.define("ix-notifications",IxNotifications);
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);
package/dist/state/NotificationState.d.ts CHANGED
@@ -5,7 +5,9 @@ declare class NotificationState {
5
5
  constructor();
6
6
  apiClient: ApiClient;
7
7
  baseApiUrl: string;
8
+ userAccessToken: string;
8
9
  NewApiClient: () => void;
10
+ private getUserAuthorization;
9
11
  ConstructApiClient(): void | ApiClient;
10
12
  nextPageCursor: string | undefined;
11
13
  submissionResult?: any;
package/dist/state/NotificationState.js CHANGED
@@ -5,15 +5,15 @@ import { NotificationGroups, NotificationStatus, DefaultDateFormat, DefaultDispl
5
5
  import { ApiClient } from '../services/api-client.js';
6
6
  import { mapNotificationDataToNotification, mapNotificationResponseToNotifications, mapParametersToPatchNotificationRequest, mapParametersToNotificationRequest, mapParametersToDeleteNotificationRequest, getNextPageCursorfromQueryParam, } from '../services/notifications-service.js';
7
7
  import { handleError } from '../helper/errors.js';
8
- import { getUserAuthorization } from '../services/app-service.js';
9
8
  class NotificationState {
10
9
  constructor() {
11
10
  this.apiClient = { noInit: true };
12
11
  this.baseApiUrl = '';
12
+ this.userAccessToken = '';
13
13
  this.NewApiClient = () => {
14
14
  this.apiClient = new ApiClient({
15
15
  NotificationApiUrl: this.baseApiUrl,
16
- getAuthorizationFn: () => getUserAuthorization(),
16
+ getAuthorizationFn: () => this.getUserAuthorization(),
17
17
  });
18
18
  this.getNotifications();
19
19
  };
@@ -54,6 +54,9 @@ class NotificationState {
54
54
  storage: window.localStorage,
55
55
  });
56
56
  }
57
+ getUserAuthorization() {
58
+ return `Bearer ${this.userAccessToken}`;
59
+ }
57
60
  ConstructApiClient() {
58
61
  return this.apiClient.noInit ? this.NewApiClient() : this.apiClient;
59
62
  }
package/dist/state/NotificationState.js.map CHANGED
@@ -1 +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';\nimport { getUserAuthorization } from '../services/app-service.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 public NewApiClient = () => {\n this.apiClient = new ApiClient({\n NotificationApiUrl: this.baseApiUrl,\n getAuthorizationFn: () => getUserAuthorization(),\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"]}
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"]}
package/dist/styles/notifications-style.js CHANGED
@@ -14,7 +14,7 @@ export const NotificationsStyle = css `
14
14
  cursor: default;
15
15
  }
16
16
  .notification-item-unread,
17
- .notification-item-unread {
17
+ .notification-item-read {
18
18
  position: relative;
19
19
  display: flex;
20
20
  flex-direction: row;
package/dist/styles/notifications-style.js.map CHANGED
@@ -1 +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-unread {\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`;"]}
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`;"]}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent ix-notifications following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "Digital Realty",
6
- "version": "1.0.7",
6
+ "version": "1.0.9",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -39,14 +39,14 @@
39
39
  "dependencies": {
40
40
  "@adobe/lit-mobx": "^2.2.2",
41
41
  "@digital-realty/ix-button": "^3.2.31",
42
- "@digital-realty/ix-date": "^1.0.25",
42
+ "@digital-realty/ix-date": "^1.0.27",
43
43
  "@digital-realty/ix-dialog": "^1.0.23",
44
44
  "@digital-realty/ix-divider": "^1.0.8",
45
- "@digital-realty/ix-drawer": "^1.0.31",
45
+ "@digital-realty/ix-drawer": "^1.0.32",
46
46
  "@digital-realty/ix-icon": "^1.0.35",
47
- "@digital-realty/ix-icon-button": "^1.0.20",
47
+ "@digital-realty/ix-icon-button": "^1.0.38",
48
48
  "@digital-realty/ix-switch": "^2.1.9",
49
- "@digital-realty/theme": "^1.0.27",
49
+ "@digital-realty/theme": "^1.0.28",
50
50
  "@material/web": "1.2.0",
51
51
  "@rollup/plugin-typescript": "^11.1.6",
52
52
  "date-fns": "^3.6.0",
@@ -135,5 +135,5 @@
135
135
  "README.md",
136
136
  "LICENSE"
137
137
  ],
138
- "gitHead": "9974f50d9dd88b242e918788f05b447acf77b0c3"
138
+ "gitHead": "49305f98dab34c5ad8c217083bdb88752039800c"
139
139
  }
package/dist/services/app-service.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const getUserAuthorization: () => string;
package/dist/services/app-service.js DELETED
@@ -1,7 +0,0 @@
1
- import { userLocalStorageKey } from '../constants/notifications.js';
2
- const getLocalStorageUser = () => {
3
- const user = localStorage.getItem(userLocalStorageKey);
4
- return user ? JSON.parse(user) : null;
5
- };
6
- export const getUserAuthorization = () => { var _a; return `Bearer ${(_a = getLocalStorageUser()) === null || _a === void 0 ? void 0 : _a.access_token}`; };
7
- //# sourceMappingURL=app-service.js.map
package/dist/services/app-service.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"app-service.js","sourceRoot":"","sources":["../../src/services/app-service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAEpE,MAAM,mBAAmB,GAAG,GAAG,EAAE;IAC/B,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,GAAG,EAAE,WACvC,OAAA,UAAU,MAAA,mBAAmB,EAAE,0CAAE,YAAY,EAAE,CAAA,EAAA,CAAC","sourcesContent":["import { userLocalStorageKey } from '../constants/notifications.js';\n\nconst getLocalStorageUser = () => {\n const user = localStorage.getItem(userLocalStorageKey);\n return user ? JSON.parse(user) : null;\n};\n\nexport const getUserAuthorization = () =>\n `Bearer ${getLocalStorageUser()?.access_token}`;\n"]}