@digital-realty/ix-notifications 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ix-notifications
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,62 @@
+# \<ix-notifications>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i @digital-realty/ix-notifications
+```
+
+## Usage
+
+```html
+<script type="module">
+  import '@digital-realty/ix-notifications/ix-notifications.js';
+</script>
+
+<ix-notifications></ix-notifications>
+```
+
+## Linting and formatting
+
+To scan the project for linting and formatting errors, run
+
+```bash
+npm run lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+npm run format
+```
+
+## Demoing with Storybook
+
+To run a local instance of Storybook for your component, run
+
+```bash
+npm run storybook
+```
+
+To build a production version of Storybook, run
+
+```bash
+npm run storybook:build
+```
+
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/dist/IxNotifications.d.ts

@@ -0,0 +1,37 @@
+import { MobxLitElement } from '@adobe/lit-mobx';
+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 { Notification } from './models/notification.js';
+import { FilterDialogEventDetail } from './constants/notification-types.js';
+import './components/notifications/notification-item.js';
+import './components/notifications/grouped-item.js';
+import './components/notifications/group-filters.js';
+import './components/notifications/date-filters.js';
+import './components/notifications/confirmation-dialog.js';
+export declare class IxNotifications extends MobxLitElement {
+    static styles: import("lit").CSSResult[];
+    private showDrawer;
+    private showGroupedView;
+    private showFilters;
+    private showDateFilters;
+    private showMarkAllReadConfirmation;
+    baseApiUrl: string;
+    firstUpdated(): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    toggleDrawer(): void;
+    renderUnReadCountText(): import("lit").TemplateResult<1>;
+    markAllread(): void;
+    private confirmedMarkAllRead;
+    toggleGroupView(): void;
+    displayFilters(): void;
+    applyNotificationFilters(): Notification[];
+    displayDateFilters(): void;
+    renderGroupedView(): import("lit").TemplateResult<1>;
+    renderDefaultView(): import("lit").TemplateResult<1>;
+    renderNoResult(): import("lit").TemplateResult<1>;
+    handleCloseClick(_e: CustomEvent<FilterDialogEventDetail>): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/IxNotifications.js

@@ -0,0 +1,278 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { MobxLitElement } from '@adobe/lit-mobx';
+import { differenceInDays, differenceInHours } from 'date-fns';
+import { TWStyles } from './tw.js';
+import '@digital-realty/ix-button/ix-button.js';
+import '@digital-realty/ix-drawer/ix-drawer.js';
+import '@digital-realty/ix-icon';
+import '@material/web/icon/icon.js';
+import { NotificationsState } from './state/NotificationState.js';
+import { NotificationGroups, NotificationStatus, } from './constants/notifications.js';
+import './components/notifications/notification-item.js';
+import './components/notifications/grouped-item.js';
+import './components/notifications/group-filters.js';
+import './components/notifications/date-filters.js';
+import './components/notifications/confirmation-dialog.js';
+import { NotificationsStyle } from './styles/notifications-style.js';
+export class IxNotifications extends MobxLitElement {
+    constructor() {
+        super(...arguments);
+        this.showDrawer = false;
+        this.showGroupedView = false;
+        this.showFilters = false;
+        this.showDateFilters = false;
+        this.showMarkAllReadConfirmation = false;
+        this.baseApiUrl = '';
+    }
+    async firstUpdated() {
+        // Construct ApiClient form baseApiUrl Prop
+        NotificationsState.baseApiUrl = this.baseApiUrl;
+        NotificationsState.ConstructApiClient();
+        // Load the notifications
+        await NotificationsState.getNotifications();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('account-switched', NotificationsState.NewApiClient);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('account-switched', NotificationsState.NewApiClient);
+    }
+    toggleDrawer() {
+        this.showDrawer = !this.showDrawer;
+        if (!this.showDrawer) {
+            this.showFilters = false;
+            this.showDateFilters = false;
+        }
+    }
+    /* eslint-disable-next-line */
+    renderUnReadCountText() {
+        if (NotificationsState.unreadNotificationCount <= 0) {
+            return html `${nothing}`;
+        }
+        let unreadCountText = '';
+        if (NotificationsState.unreadNotificationCount > 99) {
+            unreadCountText = '99+';
+        }
+        else {
+            unreadCountText = NotificationsState.unreadNotificationCount.toString();
+        }
+        return html ` <div
+      class="px-1 bg-red-500 rounded-full text-center text-white text-sm absolute icon-position -start-0"
+      style="top:0.05rem ;left: 1.5rem;"
+    >
+      ${unreadCountText}
+    </div>`;
+    }
+    markAllread() {
+        this.showMarkAllReadConfirmation = true;
+    }
+    confirmedMarkAllRead(e) {
+        // Mark All read if Confirmed True
+        if (e.detail.returnValue) {
+            const filterNotification = this.applyNotificationFilters();
+            filterNotification === null || filterNotification === void 0 ? void 0 : filterNotification.forEach(item => {
+                if (item.status === NotificationStatus.UNREAD)
+                    NotificationsState.setNotificationReadStatus(item.id);
+            });
+            this.renderUnReadCountText();
+        }
+        this.showMarkAllReadConfirmation = false;
+    }
+    toggleGroupView() {
+        this.showGroupedView = !this.showGroupedView;
+    }
+    displayFilters() {
+        this.showFilters = !this.showFilters;
+    }
+    /* eslint-disable-next-line */
+    applyNotificationFilters() {
+        var _a;
+        const filterredNotifications = (_a = NotificationsState.notifications) === null || _a === void 0 ? void 0 : _a.filter((x) => (x.resourceType === NotificationGroups.PLANNED_MAINTENANCE &&
+            NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE ===
+                true) ||
+            (x.resourceType === NotificationGroups.SERVICE_TICKETS &&
+                NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS ===
+                    true) ||
+            (x.resourceType === NotificationGroups.DCIM_ALERTS &&
+                NotificationsState.notificationFilters.SHOW_DCIM_ALERTS === true) ||
+            x.resourceType === NotificationGroups.INCIDENTS); // Always display incidents
+        if (NotificationsState.dateFilters.FROM_DATE === undefined ||
+            NotificationsState.dateFilters.TO_DATE === undefined)
+            return filterredNotifications;
+        return filterredNotifications.filter(x => differenceInHours(new Date(x.createdAt), NotificationsState.dateFilters.FROM_DATE) >= 0 &&
+            differenceInDays(new Date(x.createdAt), NotificationsState.dateFilters.TO_DATE) <= 0);
+    }
+    displayDateFilters() {
+        this.showDateFilters = !this.showDateFilters;
+    }
+    renderGroupedView() {
+        const filteredNotifications = this.applyNotificationFilters();
+        return html `<div>
+      <grouped-item
+        groupTitle=${NotificationGroups.PLANNED_MAINTENANCE}
+        iconName="lab_profile"
+        .childItems=${filteredNotifications === null || filteredNotifications === void 0 ? void 0 : filteredNotifications.filter(item => item.resourceType === NotificationGroups.PLANNED_MAINTENANCE)}
+      ></grouped-item>
+      <grouped-item
+        groupTitle=${NotificationGroups.INCIDENTS}
+        iconName="emergency_home"
+        .childItems=${filteredNotifications === null || filteredNotifications === void 0 ? void 0 : filteredNotifications.filter(item => item.resourceType === NotificationGroups.INCIDENTS)}
+      ></grouped-item>
+      <grouped-item
+        groupTitle=${NotificationGroups.SERVICE_TICKETS}
+        iconName="dvr"
+        .childItems=${filteredNotifications === null || filteredNotifications === void 0 ? void 0 : filteredNotifications.filter(item => item.resourceType === NotificationGroups.SERVICE_TICKETS)}
+      ></grouped-item>
+      <grouped-item
+        groupTitle=${NotificationGroups.DCIM_ALERTS}
+        iconName="public"
+        .childItems=${filteredNotifications === null || filteredNotifications === void 0 ? void 0 : filteredNotifications.filter(item => item.resourceType === NotificationGroups.DCIM_ALERTS)}
+      ></grouped-item>
+    </div>`;
+    }
+    renderDefaultView() {
+        const filterNotification = this.applyNotificationFilters();
+        const filterTodayItems = filterNotification.filter(x => differenceInDays(x.createdAt, new Date()) === 0);
+        const filterEarlierItems = filterNotification.filter(x => differenceInDays(x.createdAt, new Date()) !== 0);
+        if ((filterNotification === null || filterNotification === void 0 ? void 0 : filterNotification.length) > 0) {
+            return html ` <div class="grow text-sm font-bold py-4 pl-2 align-top">
+          Latest
+        </div>
+        <div class="m-0 p-0">
+          ${filterTodayItems.length > 0
+                ? filterTodayItems === null || filterTodayItems === void 0 ? void 0 : filterTodayItems.map(item => html `<notification-item
+                  .notificaiton=${item}
+                  ?disabled=${item.resourceType ===
+                    NotificationGroups.INCIDENTS}
+                >
+                </notification-item> `)
+                : this.renderNoResult()}
+        </div>
+        <div class="grow text-sm font-bold py-4 pl-2 align-top">Earlier</div>
+        <div>
+          ${filterEarlierItems.length > 0
+                ? filterEarlierItems === null || filterEarlierItems === void 0 ? void 0 : filterEarlierItems.map(item => html `<notification-item
+                  .notificaiton=${item}
+                  ?disabled=${item.resourceType ===
+                    NotificationGroups.INCIDENTS}
+                >
+                </notification-item> `)
+                : this.renderNoResult()}
+        </div>`;
+        }
+        return html `<p class="m-0 pl-4 font-bold mr-4">
+      <small style="padding-left: 16px">No notifications yet.</small>
+    </p>`;
+    }
+    /* eslint-disable-next-line */
+    renderNoResult() {
+        return html `<p class="m-0 pl-4 font-bold mr-4">
+      <small style="padding-left: 16px">No notifications yet.</small>
+    </p>`;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    handleCloseClick(_e) {
+        this.showDateFilters = false;
+        this.showFilters = false;
+    }
+    render() {
+        return html `
+      <div class="relative">
+        <ix-icon-button
+          icon="circle_notifications"
+          class="blue-icon"
+          @click=${() => this.toggleDrawer()}
+        >
+        </ix-icon-button>
+        ${this.renderUnReadCountText()}
+      </div>
+      <confirmation-dialog
+        ?open=${this.showMarkAllReadConfirmation}
+        @confirm-dialog-closed=${() => {
+            this.showMarkAllReadConfirmation = false;
+        }}
+        @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
+      >
+        <div class="flex flex-row justify-between grow py-2" slot="header">
+          <div class="grow text-xl items-center  font-bold py-4 pl-2 align-top">
+            Notifications
+          </div>
+          <div class="flex flex-row justify-end grow items-center ">
+            <ix-icon-button
+              @click=${this.markAllread}
+              icon="fact_check"
+              class="blue-icon"
+            ></ix-icon-button>
+            <ix-icon-button
+              @click=${this.toggleGroupView}
+              icon="sort"
+              class="blue-icon"
+            ></ix-icon-button>
+            <ix-icon-button
+              @click=${this.displayFilters}
+              icon="menu"
+              class="blue-icon"
+            ></ix-icon-button>
+            <div
+              class="filter-dropdown-content  ${this.showFilters
+            ? 'active z-50'
+            : ''}"
+            >
+              <group-filters></group-filters>
+            </div>
+            <ix-icon-button
+              @click=${this.displayDateFilters}
+              icon="calendar_month"
+              class="blue-icon"
+            ></ix-icon-button>
+            <div
+              class="datefilter-dropdown-content  ${this.showDateFilters
+            ? 'active z-50'
+            : ''}"
+              @on-selection=${this.handleCloseClick}
+            >
+              <date-filters></date-filters>
+            </div>
+          </div>
+        </div>
+        <div slot="content">
+          ${this.showGroupedView
+            ? this.renderGroupedView()
+            : this.renderDefaultView()}
+        </div>
+      </ix-drawer>
+    `;
+    }
+}
+IxNotifications.styles = [TWStyles, NotificationsStyle];
+__decorate([
+    state()
+], IxNotifications.prototype, "showDrawer", void 0);
+__decorate([
+    state()
+], IxNotifications.prototype, "showGroupedView", void 0);
+__decorate([
+    state()
+], IxNotifications.prototype, "showFilters", void 0);
+__decorate([
+    state()
+], IxNotifications.prototype, "showDateFilters", void 0);
+__decorate([
+    state()
+], IxNotifications.prototype, "showMarkAllReadConfirmation", void 0);
+__decorate([
+    property({ type: String })
+], IxNotifications.prototype, "baseApiUrl", void 0);
+//# sourceMappingURL=IxNotifications.js.map

package/dist/IxNotifications.js.map

@@ -0,0 +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    // Load the notifications\n    await NotificationsState.getNotifications();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener(\n      'account-switched',\n      NotificationsState.NewApiClient\n    );\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener(\n      'account-switched',\n      NotificationsState.NewApiClient\n    );\n  }\n\n  toggleDrawer() {\n    this.showDrawer = !this.showDrawer;\n    if (!this.showDrawer) {\n      this.showFilters = false;\n      this.showDateFilters = false;\n    }\n  }\n\n  /* eslint-disable-next-line */\n  renderUnReadCountText() {\n    if (NotificationsState.unreadNotificationCount <= 0) {\n      return html`${nothing}`;\n    }\n\n    let unreadCountText = '';\n    if (NotificationsState.unreadNotificationCount > 99) {\n      unreadCountText = '99+';\n    } else {\n      unreadCountText = NotificationsState.unreadNotificationCount.toString();\n    }\n\n    return html` <div\n      class=\"px-1 bg-red-500 rounded-full text-center text-white text-sm absolute icon-position -start-0\"\n      style=\"top:0.05rem ;left: 1.5rem;\"\n    >\n      ${unreadCountText}\n    </div>`;\n  }\n\n  markAllread() {\n    this.showMarkAllReadConfirmation = true;\n  }\n\n  private confirmedMarkAllRead(e: CustomEvent<ConfirmationDialogEventDetail>) {\n    // Mark All read if Confirmed True\n    if (e.detail.returnValue) {\n      const filterNotification = this.applyNotificationFilters();\n\n      filterNotification?.forEach(item => {\n        if (item.status === NotificationStatus.UNREAD)\n          NotificationsState.setNotificationReadStatus(item.id);\n      });\n\n      this.renderUnReadCountText();\n    }\n\n    this.showMarkAllReadConfirmation = false;\n  }\n\n  toggleGroupView() {\n    this.showGroupedView = !this.showGroupedView;\n  }\n\n  displayFilters() {\n    this.showFilters = !this.showFilters;\n  }\n\n  /* eslint-disable-next-line */\n  applyNotificationFilters() {\n    const filterredNotifications = NotificationsState.notifications?.filter(\n      (x: Notification) =>\n        (x.resourceType === NotificationGroups.PLANNED_MAINTENANCE &&\n          NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE ===\n            true) ||\n        (x.resourceType === NotificationGroups.SERVICE_TICKETS &&\n          NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS ===\n            true) ||\n        (x.resourceType === NotificationGroups.DCIM_ALERTS &&\n          NotificationsState.notificationFilters.SHOW_DCIM_ALERTS === true) ||\n        x.resourceType === NotificationGroups.INCIDENTS\n    ); // Always display incidents\n\n    if (\n      NotificationsState.dateFilters.FROM_DATE === undefined ||\n      NotificationsState.dateFilters.TO_DATE === undefined\n    )\n      return filterredNotifications;\n\n    return filterredNotifications.filter(\n      x =>\n        differenceInHours(\n          new Date(x.createdAt),\n          NotificationsState.dateFilters.FROM_DATE!\n        ) >= 0 &&\n        differenceInDays(\n          new Date(x.createdAt),\n          NotificationsState.dateFilters.TO_DATE!\n        ) <= 0\n    );\n  }\n\n  displayDateFilters() {\n    this.showDateFilters = !this.showDateFilters;\n  }\n\n  renderGroupedView() {\n    const filteredNotifications = this.applyNotificationFilters();\n\n    return html`<div>\n      <grouped-item\n        groupTitle=${NotificationGroups.PLANNED_MAINTENANCE}\n        iconName=\"lab_profile\"\n        .childItems=${filteredNotifications?.filter(\n          item => item.resourceType === NotificationGroups.PLANNED_MAINTENANCE\n        )}\n      ></grouped-item>\n      <grouped-item\n        groupTitle=${NotificationGroups.INCIDENTS}\n        iconName=\"emergency_home\"\n        .childItems=${filteredNotifications?.filter(\n          item => item.resourceType === NotificationGroups.INCIDENTS\n        )}\n      ></grouped-item>\n      <grouped-item\n        groupTitle=${NotificationGroups.SERVICE_TICKETS}\n        iconName=\"dvr\"\n        .childItems=${filteredNotifications?.filter(\n          item => item.resourceType === NotificationGroups.SERVICE_TICKETS\n        )}\n      ></grouped-item>\n      <grouped-item\n        groupTitle=${NotificationGroups.DCIM_ALERTS}\n        iconName=\"public\"\n        .childItems=${filteredNotifications?.filter(\n          item => item.resourceType === NotificationGroups.DCIM_ALERTS\n        )}\n      ></grouped-item>\n    </div>`;\n  }\n\n  renderDefaultView() {\n    const filterNotification = this.applyNotificationFilters();\n    const filterTodayItems = filterNotification.filter(\n      x => differenceInDays(x.createdAt, new Date()) === 0\n    );\n    const filterEarlierItems = filterNotification.filter(\n      x => differenceInDays(x.createdAt, new Date()) !== 0\n    );\n\n    if (filterNotification?.length! > 0) {\n      return html` <div class=\"grow text-sm font-bold py-4 pl-2 align-top\">\n          Latest\n        </div>\n        <div class=\"m-0 p-0\">\n          ${filterTodayItems.length > 0\n            ? filterTodayItems?.map(\n                item => html`<notification-item\n                  .notificaiton=${item}\n                  ?disabled=${item.resourceType ===\n                  NotificationGroups.INCIDENTS}\n                >\n                </notification-item> `\n              )\n            : this.renderNoResult()}\n        </div>\n        <div class=\"grow text-sm font-bold py-4 pl-2 align-top\">Earlier</div>\n        <div>\n          ${filterEarlierItems.length > 0\n            ? filterEarlierItems?.map(\n                item => html`<notification-item\n                  .notificaiton=${item}\n                  ?disabled=${item.resourceType ===\n                  NotificationGroups.INCIDENTS}\n                >\n                </notification-item> `\n              )\n            : this.renderNoResult()}\n        </div>`;\n    }\n\n    return html`<p class=\"m-0 pl-4 font-bold mr-4\">\n      <small style=\"padding-left: 16px\">No notifications yet.</small>\n    </p>`;\n  }\n\n  /* eslint-disable-next-line */\n  renderNoResult() {\n    return html`<p class=\"m-0 pl-4 font-bold mr-4\">\n      <small style=\"padding-left: 16px\">No notifications yet.</small>\n    </p>`;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  handleCloseClick(_e: CustomEvent<FilterDialogEventDetail>) {\n    this.showDateFilters = false;\n    this.showFilters = false;\n  }\n\n  render() {\n    return html`\n      <div class=\"relative\">\n        <ix-icon-button\n          icon=\"circle_notifications\"\n          class=\"blue-icon\"\n          @click=${() => this.toggleDrawer()}\n        >\n        </ix-icon-button>\n        ${this.renderUnReadCountText()}\n      </div>\n      <confirmation-dialog\n        ?open=${this.showMarkAllReadConfirmation}\n        @confirm-dialog-closed=${() => {\n          this.showMarkAllReadConfirmation = false;\n        }}\n        @on-confirm-selection=${this.confirmedMarkAllRead}\n        textMessage=\"Are you sure you want to mark all notifications as read?\"\n      >\n      </confirmation-dialog>\n      <ix-drawer\n        ?isVisible=${this.showDrawer}\n        .onClosed=${() => this.toggleDrawer()}\n        animate-vertical\n        hide-close\n      >\n        <div class=\"flex flex-row justify-between grow py-2\" slot=\"header\">\n          <div class=\"grow text-xl items-center  font-bold py-4 pl-2 align-top\">\n            Notifications\n          </div>\n          <div class=\"flex flex-row justify-end grow items-center \">\n            <ix-icon-button\n              @click=${this.markAllread}\n              icon=\"fact_check\"\n              class=\"blue-icon\"\n            ></ix-icon-button>\n            <ix-icon-button\n              @click=${this.toggleGroupView}\n              icon=\"sort\"\n              class=\"blue-icon\"\n            ></ix-icon-button>\n            <ix-icon-button\n              @click=${this.displayFilters}\n              icon=\"menu\"\n              class=\"blue-icon\"\n            ></ix-icon-button>\n            <div\n              class=\"filter-dropdown-content  ${this.showFilters\n                ? 'active z-50'\n                : ''}\"\n            >\n              <group-filters></group-filters>\n            </div>\n            <ix-icon-button\n              @click=${this.displayDateFilters}\n              icon=\"calendar_month\"\n              class=\"blue-icon\"\n            ></ix-icon-button>\n            <div\n              class=\"datefilter-dropdown-content  ${this.showDateFilters\n                ? 'active z-50'\n                : ''}\"\n              @on-selection=${this.handleCloseClick}\n            >\n              <date-filters></date-filters>\n            </div>\n          </div>\n        </div>\n        <div slot=\"content\">\n          ${this.showGroupedView\n            ? this.renderGroupedView()\n            : this.renderDefaultView()}\n        </div>\n      </ix-drawer>\n    `;\n  }\n}\n"]}

package/dist/api/notifications-api/apis/NotificationsApi.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Notifications API
+ * An API to create and read notifications
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: DevTeamProduct@digitalrealty.com
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+import * as runtime from '../runtime';
+import type { GetNotifications200Response, Notification, NotificationDelete, NotificationPatch, NotificationRequest, Status } from '../models/index';
+export interface CreateNotificationRequest {
+    notificationRequest?: NotificationRequest;
+}
+export interface DeleteNotificationsByIdRequest {
+    id: string;
+}
+export interface GetNotificationsRequest {
+    sort?: string;
+    cursor?: string;
+    resourceType?: string;
+    accountNumber?: string;
+    createdAfter?: Date;
+    createdBefore?: Date;
+    locationId?: string;
+    subGroup?: string;
+    status?: Status;
+    prefer?: Array<string>;
+}
+export interface GetNotificationsByIdRequest {
+    id: string;
+}
+export interface PatchNotificationsByIdRequest {
+    id: string;
+    notificationPatch?: NotificationPatch;
+}
+/**
+ *
+ */
+export declare class NotificationsApi extends runtime.BaseAPI {
+    /**
+     * Submit notification to be sent to user
+     */
+    createNotificationRaw(requestParameters: CreateNotificationRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<Notification>>;
+    /**
+     * Submit notification to be sent to user
+     */
+    createNotification(requestParameters?: CreateNotificationRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<Notification>;
+    /**
+     * Delete a notification by id
+     */
+    deleteNotificationsByIdRaw(requestParameters: DeleteNotificationsByIdRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<NotificationDelete>>;
+    /**
+     * Delete a notification by id
+     */
+    deleteNotificationsById(requestParameters: DeleteNotificationsByIdRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<NotificationDelete>;
+    /**
+     * Get all notifications
+     */
+    getNotificationsRaw(requestParameters: GetNotificationsRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<GetNotifications200Response>>;
+    /**
+     * Get all notifications
+     */
+    getNotifications(requestParameters?: GetNotificationsRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<GetNotifications200Response>;
+    /**
+     * Get an notification by id
+     */
+    getNotificationsByIdRaw(requestParameters: GetNotificationsByIdRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<Notification>>;
+    /**
+     * Get an notification by id
+     */
+    getNotificationsById(requestParameters: GetNotificationsByIdRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<Notification>;
+    /**
+     * Update specific fields on a notification by id
+     */
+    patchNotificationsByIdRaw(requestParameters: PatchNotificationsByIdRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<NotificationPatch>>;
+    /**
+     * Update specific fields on a notification by id
+     */
+    patchNotificationsById(requestParameters: PatchNotificationsByIdRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<NotificationPatch>;
+}