@digital-realty/ix-notifications 1.0.21 → 1.0.23

package/dist/components/notifications/group-filters.js

@@ -38,32 +38,38 @@ let GroupFilters = class GroupFilters extends MobxLitElement {
         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
+        return html ` <div class="flex flex-col items-start py-2">
+      <div class="ix-switch-hover">
+        <div class="ix-switch-wrapper p-2">
+          <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>
+            @change=${this.onSwitchChange}
+          ></ix-switch>
+          <label class="pl-1">${NotificationGroups.PLANNED_MAINTENANCE}</label>
+        </div>
       </div>
-      <div class="ix-switch-wrapper">
-        <ix-switch
-          name=${NotificationGroups.SERVICE_TICKETS}
-          .selected=${NotificationsState.notificationFilters
+      <div class="ix-switch-hover">
+        <div class="ix-switch-wrapper p-2">
+          <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>
+            @change=${this.onSwitchChange}
+          ></ix-switch>
+          <label class="pl-1">${NotificationGroups.SERVICE_TICKETS}</label>
+        </div>
       </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 class="ix-switch-hover">
+        <div class="ix-switch-wrapper p-2">
+          <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>
     </div>`;
     }

package/dist/components/notifications/group-filters.js.map

@@ -1 +1 @@
-{"version":3,"file":"group-filters.js","sourceRoot":"","sources":["../../../src/components/notifications/group-filters.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,MAAM,mBAAmB,CAAC;AAClD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,wCAAwC,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAGlE,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,cAAc;IAC9C,MAAM,KAAK,MAAM;QACf,OAAO;YACL,kBAAkB;YAClB,QAAQ;YACR,GAAG,CAAA;;;;;;;;;;;;;;OAcF;SACF,CAAC;IACJ,CAAC;IAED,cAAc,CAAC,CAAQ;;QACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAa,CAAC;QAC/B,MAAM,SAAS,GAAG,MAAA,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,0CAAE,KAAK,CAAC;QAEhE,kBAAkB,CAAC,qBAAqB,CAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;QACrE,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,kBAAkB,CAAC,mBAAmB;sBACjC,kBAAkB,CAAC,mBAAmB;aAC/C,wBAAwB;oBACjB,IAAI,CAAC,cAAc;;8BAET,kBAAkB,CAAC,mBAAmB;;;;iBAInD,kBAAkB,CAAC,eAAe;sBAC7B,kBAAkB,CAAC,mBAAmB;aAC/C,oBAAoB;oBACb,IAAI,CAAC,cAAc;;8BAET,kBAAkB,CAAC,eAAe;;;;iBAI/C,kBAAkB,CAAC,WAAW;sBACzB,kBAAkB,CAAC,mBAAmB,CAAC,gBAAgB;oBACzD,IAAI,CAAC,cAAc;;8BAET,kBAAkB,CAAC,WAAW;;WAEjD,CAAC;IACV,CAAC;CACF,CAAA;AA7DY,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CA6DxB;SA7DY,YAAY","sourcesContent":["import { html, css } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-switch/ix-switch.js';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { NotificationGroups } from '../../constants/notifications.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\n\n@customElement('group-filters')\nexport class GroupFilters extends MobxLitElement {\n  static get styles() {\n    return [\n      NotificationsStyle,\n      TWStyles,\n      css`\n        :host {\n          --md-switch-state-layer-size: 1rem;\n          --md-switch-hover-handle-width: 1rem;\n          --md-switch-hover-handle-height: 1rem;\n          --md-switch-pressed-handle-width: 1rem;\n          --md-switch-pressed-handle-height: 1rem;\n          --md-switch-selected-handle-width: 1.3rem;\n          --md-switch-selected-handle-height: 1.3rem;\n          --md-switch-handle-width: 0.5rem;\n          --md-switch-handle-height: 0.5rem;\n          --md-switch-track-width: 2.5rem;\n          --md-switch-track-height: 1rem;\n        }\n      `,\n    ];\n  }\n\n  onSwitchChange(e: Event) {\n    const target = e.target as any;\n    const groupName = target.attributes.getNamedItem('name')?.value;\n\n    NotificationsState.setNotificationFilter(groupName, target.selected);\n    this.requestUpdate();\n  }\n\n  render() {\n    return html` <div class=\"flex flex-col items-start p-2\">\n      <div class=\"ix-switch-wrapper\">\n        <ix-switch\n          name=${NotificationGroups.PLANNED_MAINTENANCE}\n          .selected=${NotificationsState.notificationFilters\n            .SHOW_PLANNED_MAINTENANCE}\n          @change=${this.onSwitchChange}\n        ></ix-switch>\n        <label class=\"pl-1\">${NotificationGroups.PLANNED_MAINTENANCE}</label>\n      </div>\n      <div class=\"ix-switch-wrapper\">\n        <ix-switch\n          name=${NotificationGroups.SERVICE_TICKETS}\n          .selected=${NotificationsState.notificationFilters\n            .SHOW_SERVICE_TICKETS}\n          @change=${this.onSwitchChange}\n        ></ix-switch>\n        <label class=\"pl-1\">${NotificationGroups.SERVICE_TICKETS}</label>\n      </div>\n      <div class=\"ix-switch-wrapper\">\n        <ix-switch\n          name=${NotificationGroups.DCIM_ALERTS}\n          .selected=${NotificationsState.notificationFilters.SHOW_DCIM_ALERTS}\n          @change=${this.onSwitchChange}\n        ></ix-switch>\n        <label class=\"pl-1\">${NotificationGroups.DCIM_ALERTS}</label>\n      </div>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"group-filters.js","sourceRoot":"","sources":["../../../src/components/notifications/group-filters.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,MAAM,mBAAmB,CAAC;AAClD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,wCAAwC,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAGlE,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,cAAc;IAC9C,MAAM,KAAK,MAAM;QACf,OAAO;YACL,kBAAkB;YAClB,QAAQ;YACR,GAAG,CAAA;;;;;;;;;;;;;;OAcF;SACF,CAAC;IACJ,CAAC;IAED,cAAc,CAAC,CAAQ;;QACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAa,CAAC;QAC/B,MAAM,SAAS,GAAG,MAAA,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,0CAAE,KAAK,CAAC;QAEhE,kBAAkB,CAAC,qBAAqB,CAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;QACrE,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;mBAII,kBAAkB,CAAC,mBAAmB;uBAClC,kBAAkB,CAAC,mBAAmB;aAC9C,wBAAwB;sBACjB,IAAI,CAAC,cAAc;;gCAET,kBAAkB,CAAC,mBAAmB;;;;;;mBAMnD,kBAAkB,CAAC,eAAe;uBAC9B,kBAAkB,CAAC,mBAAmB;aAC9C,oBAAoB;sBACb,IAAI,CAAC,cAAc;;gCAET,kBAAkB,CAAC,eAAe;;;;;;mBAM/C,kBAAkB,CAAC,WAAW;uBAC1B,kBAAkB,CAAC,mBAAmB,CAAC,gBAAgB;sBACxD,IAAI,CAAC,cAAc;;gCAET,kBAAkB,CAAC,WAAW;;;WAGnD,CAAC;IACV,CAAC;CACF,CAAA;AAnEY,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAmExB;SAnEY,YAAY","sourcesContent":["import { html, css } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-switch/ix-switch.js';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { NotificationGroups } from '../../constants/notifications.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\n\n@customElement('group-filters')\nexport class GroupFilters extends MobxLitElement {\n  static get styles() {\n    return [\n      NotificationsStyle,\n      TWStyles,\n      css`\n        :host {\n          --md-switch-state-layer-size: 1rem;\n          --md-switch-hover-handle-width: 1rem;\n          --md-switch-hover-handle-height: 1rem;\n          --md-switch-pressed-handle-width: 1rem;\n          --md-switch-pressed-handle-height: 1rem;\n          --md-switch-selected-handle-width: 1.3rem;\n          --md-switch-selected-handle-height: 1.3rem;\n          --md-switch-handle-width: 0.5rem;\n          --md-switch-handle-height: 0.5rem;\n          --md-switch-track-width: 2.5rem;\n          --md-switch-track-height: 1rem;\n        }\n      `,\n    ];\n  }\n\n  onSwitchChange(e: Event) {\n    const target = e.target as any;\n    const groupName = target.attributes.getNamedItem('name')?.value;\n\n    NotificationsState.setNotificationFilter(groupName, target.selected);\n    this.requestUpdate();\n  }\n\n  render() {\n    return html` <div class=\"flex flex-col items-start py-2\">\n      <div class=\"ix-switch-hover\">\n        <div class=\"ix-switch-wrapper p-2\">\n          <ix-switch\n            name=${NotificationGroups.PLANNED_MAINTENANCE}\n            selected=${NotificationsState.notificationFilters\n              .SHOW_PLANNED_MAINTENANCE}\n            @change=${this.onSwitchChange}\n          ></ix-switch>\n          <label class=\"pl-1\">${NotificationGroups.PLANNED_MAINTENANCE}</label>\n        </div>\n      </div>\n      <div class=\"ix-switch-hover\">\n        <div class=\"ix-switch-wrapper p-2\">\n          <ix-switch\n            name=${NotificationGroups.SERVICE_TICKETS}\n            selected=${NotificationsState.notificationFilters\n              .SHOW_SERVICE_TICKETS}\n            @change=${this.onSwitchChange}\n          ></ix-switch>\n          <label class=\"pl-1\">${NotificationGroups.SERVICE_TICKETS}</label>\n        </div>\n      </div>\n      <div class=\"ix-switch-hover\">\n        <div class=\"ix-switch-wrapper p-2\">\n          <ix-switch\n            name=${NotificationGroups.DCIM_ALERTS}\n            selected=${NotificationsState.notificationFilters.SHOW_DCIM_ALERTS}\n            @change=${this.onSwitchChange}\n          ></ix-switch>\n          <label class=\"pl-1\">${NotificationGroups.DCIM_ALERTS}</label>\n        </div>\n      </div>\n    </div>`;\n  }\n}\n"]}

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

@@ -3,7 +3,7 @@ import '@digital-realty/ix-icon-button/ix-icon-button.js';
 import { Notification } from '../../models/notification.js';
 export declare class GroupedItem extends MobxLitElement {
     groupTitle: string;
-    iconName: string;
+    groupIcon: string;
     childItems?: Notification[];
     private isOpen;
     onClick: () => void;

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

@@ -1,5 +1,6 @@
 import { __decorate } from "tslib";
 import { html, nothing } from 'lit';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { MobxLitElement } from '@adobe/lit-mobx';
 import { customElement, property, state } from 'lit/decorators.js';
 import '@digital-realty/ix-icon-button/ix-icon-button.js';
@@ -12,7 +13,7 @@ let GroupedItem = class GroupedItem extends MobxLitElement {
     constructor() {
         super(...arguments);
         this.groupTitle = 'Group 1';
-        this.iconName = 'public';
+        this.groupIcon = 'public';
         this.childItems = NotificationsState.notifications;
         this.isOpen = false;
         this.onClick = () => {
@@ -29,14 +30,16 @@ let GroupedItem = class GroupedItem extends MobxLitElement {
                 ((_b = this.childItems) === null || _b === void 0 ? void 0 : _b.length) > 0) {
                 return html `<div class="notification-items-container">
           ${(_c = this.childItems) === null || _c === void 0 ? void 0 : _c.map(item => html `<notification-item
-              .notificaiton=${item}
+              .notification=${item}
               ?disabled=${item.resourceType === NotificationGroups.INCIDENTS}
             >
             </notification-item>`)}
         </div>`;
             }
             return html `<p class="m-0 pl-8 font-bold mr-4">
-        <small style="padding-left: 16px">No notifications yet.</small>
+        <small style="padding-left: 16px"
+          ><strong>No notifications yet.</strong></small
+        >
       </p>`;
         }
         return html `${nothing}`;
@@ -51,7 +54,9 @@ let GroupedItem = class GroupedItem extends MobxLitElement {
             @click="${this.onClick}"
           >
           </ix-icon-button>
-          <ix-icon class="ix-icon-groups">${this.iconName}</ix-icon>
+          <ix-icon slot="default" class="ix-icon-groups"
+            >${unsafeSVG(this.groupIcon)}</ix-icon
+          >
           <p class="m-0 group-name font-bold pl-1">${this.groupTitle}</p>
           <p class="m-0 pl-4">
             ${(_a = this.childItems) === null || _a === void 0 ? void 0 : _a.length.toString().padStart(2, '0')}
@@ -67,7 +72,7 @@ __decorate([
 ], GroupedItem.prototype, "groupTitle", void 0);
 __decorate([
     property({ type: String, attribute: true })
-], GroupedItem.prototype, "iconName", void 0);
+], GroupedItem.prototype, "groupIcon", void 0);
 __decorate([
     property({ type: Array, attribute: true })
 ], GroupedItem.prototype, "childItems", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"grouped-item.js","sourceRoot":"","sources":["../../../src/components/notifications/grouped-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,kDAAkD,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAEtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAG/D,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,cAAc;IAAxC;;QACwC,eAAU,GAAG,SAAS,CAAC;QAEvB,aAAQ,GAAG,QAAQ,CAAC;QAErB,eAAU,GACpD,kBAAkB,CAAC,aAAa,CAAC;QAElB,WAAM,GAAG,KAAK,CAAC;QAEhC,YAAO,GAAG,GAAG,EAAE;YACb,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC,CAAC;IAiDJ,CAAC;IA/CC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;IACnD,CAAC;IAED,uBAAuB;;QACrB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IACE,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,MAAK,SAAS;gBACrC,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,IAAG,CAAC,EAC3B;gBACA,OAAO,IAAI,CAAA;YACP,MAAA,IAAI,CAAC,UAAU,0CAAE,GAAG,CACpB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;8BACM,IAAI;0BACR,IAAI,CAAC,YAAY,KAAK,kBAAkB,CAAC,SAAS;;iCAE3C,CACtB;eACI,CAAC;aACT;YACD,OAAO,IAAI,CAAA;;WAEN,CAAC;SACP;QAED,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;;QACJ,OAAO,IAAI,CAAA;;;;mBAII,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,aAAa;sBAC5C,IAAI,CAAC,OAAO;;;4CAGU,IAAI,CAAC,QAAQ;qDACJ,IAAI,CAAC,UAAU;;cAEtD,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;;;;QAIzD,IAAI,CAAC,uBAAuB,EAAE;WAC3B,CAAC;IACV,CAAC;CACF,CAAA;AA5D8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;+CAAwB;AAEvB;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;6CAAqB;AAErB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;+CACR;AAE1B;IAAR,KAAK,EAAE;2CAAwB;AARrB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA6DvB;SA7DY,WAAW","sourcesContent":["import { html, nothing } 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 { baseTheme } from '@digital-realty/theme';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { Notification } from '../../models/notification.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport { NotificationGroups } from '../../constants/notifications.js';\n\n@customElement('grouped-item')\nexport class GroupedItem extends MobxLitElement {\n  @property({ type: String, attribute: true }) groupTitle = 'Group 1';\n\n  @property({ type: String, attribute: true }) iconName = 'public';\n\n  @property({ type: Array, attribute: true }) childItems?: Notification[] =\n    NotificationsState.notifications;\n\n  @state() private isOpen = false;\n\n  onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  static get styles() {\n    return [NotificationsStyle, baseTheme, TWStyles];\n  }\n\n  renderNotificationItems() {\n    if (this.isOpen) {\n      if (\n        this.childItems?.length !== undefined &&\n        this.childItems?.length > 0\n      ) {\n        return html`<div class=\"notification-items-container\">\n          ${this.childItems?.map(\n            item => html`<notification-item\n              .notificaiton=${item}\n              ?disabled=${item.resourceType === NotificationGroups.INCIDENTS}\n            >\n            </notification-item>`\n          )}\n        </div>`;\n      }\n      return html`<p class=\"m-0 pl-8 font-bold mr-4\">\n        <small style=\"padding-left: 16px\">No notifications yet.</small>\n      </p>`;\n    }\n\n    return html`${nothing}`;\n  }\n\n  render() {\n    return html`<div class=\"group-container-row\">\n      <div class=\"flex items-center justify-between\">\n        <div class=\"flex items-center align-middle\">\n          <ix-icon-button\n            icon=${this.isOpen ? 'arrow_drop_down' : 'arrow_right'}\n            @click=\"${this.onClick}\"\n          >\n          </ix-icon-button>\n          <ix-icon class=\"ix-icon-groups\">${this.iconName}</ix-icon>\n          <p class=\"m-0 group-name font-bold pl-1\">${this.groupTitle}</p>\n          <p class=\"m-0 pl-4\">\n            ${this.childItems?.length.toString().padStart(2, '0')}\n          </p>\n        </div>\n      </div>\n      ${this.renderNotificationItems()}\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"grouped-item.js","sourceRoot":"","sources":["../../../src/components/notifications/grouped-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,kDAAkD,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAEtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAG/D,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,cAAc;IAAxC;;QACwC,eAAU,GAAG,SAAS,CAAC;QAEvB,cAAS,GAAG,QAAQ,CAAC;QAEtB,eAAU,GACpD,kBAAkB,CAAC,aAAa,CAAC;QAElB,WAAM,GAAG,KAAK,CAAC;QAEhC,YAAO,GAAG,GAAG,EAAE;YACb,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC,CAAC;IAqDJ,CAAC;IAnDC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;IACnD,CAAC;IAED,uBAAuB;;QACrB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IACE,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,MAAK,SAAS;gBACrC,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,IAAG,CAAC,EAC3B;gBACA,OAAO,IAAI,CAAA;YACP,MAAA,IAAI,CAAC,UAAU,0CAAE,GAAG,CACpB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;8BACM,IAAI;0BACR,IAAI,CAAC,YAAY,KAAK,kBAAkB,CAAC,SAAS;;iCAE3C,CACtB;eACI,CAAC;aACT;YACD,OAAO,IAAI,CAAA;;;;WAIN,CAAC;SACP;QAED,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;;QACJ,OAAO,IAAI,CAAA;;;;mBAII,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,aAAa;sBAC5C,IAAI,CAAC,OAAO;;;;eAInB,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;;qDAEa,IAAI,CAAC,UAAU;;cAEtD,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;;;;QAIzD,IAAI,CAAC,uBAAuB,EAAE;WAC3B,CAAC;IACV,CAAC;CACF,CAAA;AAhE8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;+CAAwB;AAEvB;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;8CAAsB;AAEtB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;+CACR;AAE1B;IAAR,KAAK,EAAE;2CAAwB;AARrB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAiEvB;SAjEY,WAAW","sourcesContent":["import { html, nothing } from 'lit';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { baseTheme } from '@digital-realty/theme';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { Notification } from '../../models/notification.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport { NotificationGroups } from '../../constants/notifications.js';\n\n@customElement('grouped-item')\nexport class GroupedItem extends MobxLitElement {\n  @property({ type: String, attribute: true }) groupTitle = 'Group 1';\n\n  @property({ type: String, attribute: true }) groupIcon = 'public';\n\n  @property({ type: Array, attribute: true }) childItems?: Notification[] =\n    NotificationsState.notifications;\n\n  @state() private isOpen = false;\n\n  onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  static get styles() {\n    return [NotificationsStyle, baseTheme, TWStyles];\n  }\n\n  renderNotificationItems() {\n    if (this.isOpen) {\n      if (\n        this.childItems?.length !== undefined &&\n        this.childItems?.length > 0\n      ) {\n        return html`<div class=\"notification-items-container\">\n          ${this.childItems?.map(\n            item => html`<notification-item\n              .notification=${item}\n              ?disabled=${item.resourceType === NotificationGroups.INCIDENTS}\n            >\n            </notification-item>`\n          )}\n        </div>`;\n      }\n      return html`<p class=\"m-0 pl-8 font-bold mr-4\">\n        <small style=\"padding-left: 16px\"\n          ><strong>No notifications yet.</strong></small\n        >\n      </p>`;\n    }\n\n    return html`${nothing}`;\n  }\n\n  render() {\n    return html`<div class=\"group-container-row\">\n      <div class=\"flex items-center justify-between\">\n        <div class=\"flex items-center align-middle\">\n          <ix-icon-button\n            icon=${this.isOpen ? 'arrow_drop_down' : 'arrow_right'}\n            @click=\"${this.onClick}\"\n          >\n          </ix-icon-button>\n          <ix-icon slot=\"default\" class=\"ix-icon-groups\"\n            >${unsafeSVG(this.groupIcon)}</ix-icon\n          >\n          <p class=\"m-0 group-name font-bold pl-1\">${this.groupTitle}</p>\n          <p class=\"m-0 pl-4\">\n            ${this.childItems?.length.toString().padStart(2, '0')}\n          </p>\n        </div>\n      </div>\n      ${this.renderNotificationItems()}\n    </div>`;\n  }\n}\n"]}

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

@@ -7,7 +7,7 @@ import './view-item-dialog.js';
 import '@digital-realty/ix-toast/ix-message-toast.js';
 export declare class NotificationItem extends MobxLitElement {
     disabled: boolean;
-    notificaiton: Notification;
+    notification: Notification;
     private showModal;
     private showDeleteConfirmation;
     static get styles(): import("lit").CSSResult[];
@@ -16,6 +16,7 @@ export declare class NotificationItem extends MobxLitElement {
     private confirmedDelete;
     private showDeleteResultMessage;
     calculateDuration(): string;
-    GetNotificationIcon(): "lab_profile" | "dvr" | "emergency_home" | "public" | "sync_saved_locally";
+    getNotificationIcon(): import("lit").TemplateResult<2> | "sync_saved_locally" | "report";
+    getNotificationTitle(): string;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -13,11 +13,13 @@ import { NotificationsStyle } from '../../styles/notifications-style.js';
 import './confirmation-dialog.js';
 import './view-item-dialog.js';
 import '@digital-realty/ix-toast/ix-message-toast.js';
+import { dcim, plannedMaintenance, trash } from '../../assets/iconset.js';
+import { handleMouseOver, handleMouseOut } from './notification-tooltip.js';
 let NotificationItem = class NotificationItem extends MobxLitElement {
     constructor() {
         super(...arguments);
         this.disabled = false;
-        this.notificaiton = {};
+        this.notification = {};
         this.showModal = false;
         this.showDeleteConfirmation = false;
     }
@@ -35,6 +37,7 @@ let NotificationItem = class NotificationItem extends MobxLitElement {
           letter-spacing: 0.4px;
           text-align: left;
         }
+
         .notification-item-unread h2 {
           font-family: 'Open Sans', sans-serif;
           font-size: 12px;
@@ -43,6 +46,7 @@ let NotificationItem = class NotificationItem extends MobxLitElement {
           letter-spacing: 0.4px;
           text-align: left;
         }
+
         h3 {
           font-family: 'Open Sans', sans-serif;
           font-size: 12px;
@@ -53,26 +57,23 @@ let NotificationItem = class NotificationItem extends MobxLitElement {
           color: rgba(9, 34, 65, 0.6);
           padding: 0;
         }
+
         ix-icon {
           --ix-icon-font-size: 24px;
           --ix-icon-line-height: 24px;
           color: var(--md-sys-text-color-primary);
         }
-        .notification-item-read ix-icon {
-          margin-right: 12px;
-          color: rgba(9, 34, 65);
-        }
 
-        .notification-item-unread ix-icon {
+        .notification-item-read > ix-icon:first-child,
+        .notification-item-unread > ix-icon:first-child {
           margin-right: 12px;
-          color: rgb(20, 86, 224);
         }
       `,
         ];
     }
     displayItem() {
-        if (this.notificaiton.status === NotificationStatus.UNREAD) {
-            NotificationsState.setNotificationReadStatus(this.notificaiton.id);
+        if (this.notification.status === NotificationStatus.UNREAD) {
+            NotificationsState.setNotificationReadStatus(this.notification.id);
         }
         this.showModal = true;
     }
@@ -84,72 +85,93 @@ let NotificationItem = class NotificationItem extends MobxLitElement {
     confirmedDelete(e) {
         // DELETE IF CONFIRMED TRUE
         if (e.detail.returnValue) {
-            NotificationsState.setNotificationDeleted(this.notificaiton.id).then((result) => {
-                this.showDeleteResultMessage(result, this.notificaiton.id);
+            NotificationsState.setNotificationDeleted(this.notification.id).then((result) => {
+                this.showDeleteResultMessage(result, this.notification.id);
             });
         }
         this.showDeleteConfirmation = false;
     }
+    // eslint-disable-next-line class-methods-use-this
     showDeleteResultMessage(result, id) {
-        window.dispatchEvent(new CustomEvent("add-toast", { detail: {
+        window.dispatchEvent(new CustomEvent('add-toast', {
+            detail: {
                 id,
-                content: html `
-                  <ix-message-toast toastId=${id} .TMessageToast=${result.State.toLowerCase()} forceClose>                      
-                      ${result.Message}
-                  </ix-message-toast>`,
+                content: html ` <ix-message-toast
+            toastId=${id}
+            .TMessageToast=${result.State.toLowerCase()}
+            forceClose
+          >
+            ${result.Message}
+          </ix-message-toast>`,
                 autoClose: 2000,
                 durationOut: 2000,
                 vertical: 'bottom',
                 horizontal: 'center',
                 animated: true,
                 above: false,
-            } }));
+            },
+        }));
     }
     calculateDuration() {
-        if (this.notificaiton.createdAt !== undefined) {
-            if (differenceInHours(new Date(), this.notificaiton.createdAt) < 24)
-                return formatDistance(this.notificaiton.createdAt, new Date(), {
+        if (this.notification.createdAt !== undefined) {
+            if (differenceInHours(new Date(), this.notification.createdAt) < 24)
+                return formatDistance(this.notification.createdAt, new Date(), {
                     addSuffix: true,
                 });
-            return format(this.notificaiton.createdAt, DefaultDateTimeFormat);
+            return format(this.notification.createdAt, DefaultDateTimeFormat);
         }
-        return 'NA';
+        return 'N/A';
     }
-    GetNotificationIcon() {
-        switch (this.notificaiton.resourceType) {
+    getNotificationIcon() {
+        switch (this.notification.resourceType) {
             case NotificationGroups.PLANNED_MAINTENANCE:
-                return 'lab_profile';
+                return plannedMaintenance;
             case NotificationGroups.SERVICE_TICKETS:
-                return 'dvr';
+                return 'sync_saved_locally';
             case NotificationGroups.INCIDENTS:
-                return 'emergency_home';
+                return 'report';
             case NotificationGroups.DCIM_ALERTS:
-                return 'public';
+                return dcim;
+            default:
+                return 'sync_saved_locally';
+        }
+    }
+    getNotificationTitle() {
+        var _a;
+        switch (this.notification.resourceType) {
+            case NotificationGroups.PLANNED_MAINTENANCE:
+                return 'Planned Site Maintenance';
+            case NotificationGroups.SERVICE_TICKETS:
+                return `${(_a = this.notification) === null || _a === void 0 ? void 0 : _a.subGroup} Service Ticket Update`;
+            case NotificationGroups.INCIDENTS:
+                return 'Emergency Repair';
+            case NotificationGroups.DCIM_ALERTS:
+                return 'DCIM Alert';
             default:
                 return 'sync_saved_locally';
         }
     }
     /* eslint-disable lit-a11y/click-events-have-key-events */
     render() {
-        var _a, _b, _c;
-        return html `    
+        var _a, _b;
+        return html `
       <div class="relative bg-white-gp notification-item">
         <div
-          class=${((_a = this.notificaiton) === null || _a === void 0 ? void 0 : _a.status) === 'unread'
+          class=${((_a = this.notification) === null || _a === void 0 ? void 0 : _a.status) === 'unread'
             ? 'notification-item-unread'
             : 'notification-item-read'}
         >
           <ix-icon
-            icon=${this.GetNotificationIcon()}
-            class=${((_b = this.notificaiton) === null || _b === void 0 ? void 0 : _b.status) === 'unread'
-            ? 'blue-icon'
-            : 'grey-icon'}
+            icon=${this.getNotificationIcon()}
+            class=${((_b = this.notification) === null || _b === void 0 ? void 0 : _b.status) === 'unread'
+            ? 'active-icon'
+            : 'inactive-icon'}
             @click=${this.displayItem}
-            >${this.GetNotificationIcon()}
+            >${this.getNotificationIcon()}
           </ix-icon>
           <div class="flex flex-col grow" @click=${this.displayItem}>
             <div class="grow text-base">
-              <h2>${(_c = this.notificaiton) === null || _c === void 0 ? void 0 : _c.resourceType}</h2>
+              <h2>${this.getNotificationTitle()}</h2>
             </div>
             <div class="grow text-xs">
               <h3>${this.calculateDuration()}</h3>
@@ -158,7 +180,7 @@ let NotificationItem = class NotificationItem extends MobxLitElement {
           <div>
             <view-item-dialog
               ?open=${this.showModal}
-              .notificaiton=${this.notificaiton}
+              .notification=${this.notification}
               @view-item-dialog-closed=${() => {
             this.showModal = false;
         }}
@@ -176,9 +198,19 @@ let NotificationItem = class NotificationItem extends MobxLitElement {
           </div>
           <ix-icon-button
             @click=${this.deleteItem}
-            icon="delete"
-            class=${!this.disabled ? 'red-icon' : 'grey-icon'}
-          ></ix-icon-button>
+            @mouseover=${(e) => handleMouseOver(e, this.disabled
+            ? 'Emergency Repair Notification cannot be removed'
+            : 'Remove Notification')}
+            @mouseout=${handleMouseOut}
+            ?disabled=${this.disabled}
+          >
+            <ix-icon
+              slot="default"
+              class="${this.disabled ? 'inactive-icon' : 'destructive-icon'}"
+            >
+              ${trash}
+            </ix-icon>
+          </ix-icon-button>
         </div>
       </div>
     `;
@@ -189,7 +221,7 @@ __decorate([
 ], NotificationItem.prototype, "disabled", void 0);
 __decorate([
     property({ type: Object, attribute: false })
-], NotificationItem.prototype, "notificaiton", void 0);
+], NotificationItem.prototype, "notification", void 0);
 __decorate([
     state()
 ], NotificationItem.prototype, "showModal", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"notification-item.js","sourceRoot":"","sources":["../../../src/components/notifications/notification-item.ts"],"names":[],"mappings":"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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 { ApiCallResult, 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';\nimport '@digital-realty/ix-toast/ix-message-toast.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        .notification-item-read 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        .notification-item-unread h2 {\n          font-family: 'Open Sans', sans-serif;\n          font-size: 12px;\n          font-weight: 700;\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-read ix-icon {\n          margin-right: 12px;\n          color: rgba(9, 34, 65);\n        }\n\n        .notification-item-unread 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    {\n      NotificationsState.setNotificationDeleted(this.notificaiton.id).then((result: ApiCallResult) => {        \n        this.showDeleteResultMessage(result,this.notificaiton.id);\n      });\n    }\n    this.showDeleteConfirmation = false;\n  }\n\n  private showDeleteResultMessage(result: ApiCallResult, id: string )\n  {\n    \n    window.dispatchEvent(\n      new CustomEvent(\"add-toast\", { detail: {\n                id,\n                content: html`\n                  <ix-message-toast toastId=${id} .TMessageToast=${result.State.toLowerCase()} forceClose>                      \n                      ${result.Message}\n                  </ix-message-toast>`,\n                autoClose: 2000,\n                durationOut: 2000,\n                vertical: 'bottom',\n                horizontal: 'center',\n                animated: true,                \n                above: false,\n            } })\n    );\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"]}
+{"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 { ApiCallResult, 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';\nimport '@digital-realty/ix-toast/ix-message-toast.js';\nimport { dcim, plannedMaintenance, trash } from '../../assets/iconset.js';\nimport { handleMouseOver, handleMouseOut } from './notification-tooltip.js';\n\n@customElement('notification-item')\nexport class NotificationItem extends MobxLitElement {\n  @property({ type: Boolean }) disabled = false;\n\n  @property({ type: Object, attribute: false }) notification =\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        .notification-item-read 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\n        .notification-item-unread h2 {\n          font-family: 'Open Sans', sans-serif;\n          font-size: 12px;\n          font-weight: 700;\n          line-height: 16px;\n          letter-spacing: 0.4px;\n          text-align: left;\n        }\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\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\n        .notification-item-read > ix-icon:first-child,\n        .notification-item-unread > ix-icon:first-child {\n          margin-right: 12px;\n        }\n      `,\n    ];\n  }\n\n  displayItem() {\n    if (this.notification.status === NotificationStatus.UNREAD) {\n      NotificationsState.setNotificationReadStatus(this.notification.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.notification.id).then(\n        (result: ApiCallResult) => {\n          this.showDeleteResultMessage(result, this.notification.id);\n        }\n      );\n    }\n    this.showDeleteConfirmation = false;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  private showDeleteResultMessage(result: ApiCallResult, id: string) {\n    window.dispatchEvent(\n      new CustomEvent('add-toast', {\n        detail: {\n          id,\n          content: html` <ix-message-toast\n            toastId=${id}\n            .TMessageToast=${result.State.toLowerCase()}\n            forceClose\n          >\n            ${result.Message}\n          </ix-message-toast>`,\n          autoClose: 2000,\n          durationOut: 2000,\n          vertical: 'bottom',\n          horizontal: 'center',\n          animated: true,\n          above: false,\n        },\n      })\n    );\n  }\n\n  calculateDuration() {\n    if (this.notification.createdAt !== undefined) {\n      if (differenceInHours(new Date(), this.notification.createdAt) < 24)\n        return formatDistance(this.notification.createdAt, new Date(), {\n          addSuffix: true,\n        });\n      return format(this.notification.createdAt, DefaultDateTimeFormat);\n    }\n    return 'N/A';\n  }\n\n  getNotificationIcon() {\n    switch (this.notification.resourceType) {\n      case NotificationGroups.PLANNED_MAINTENANCE:\n        return plannedMaintenance;\n      case NotificationGroups.SERVICE_TICKETS:\n        return 'sync_saved_locally';\n      case NotificationGroups.INCIDENTS:\n        return 'report';\n      case NotificationGroups.DCIM_ALERTS:\n        return dcim;\n      default:\n        return 'sync_saved_locally';\n    }\n  }\n\n  getNotificationTitle() {\n    switch (this.notification.resourceType) {\n      case NotificationGroups.PLANNED_MAINTENANCE:\n        return 'Planned Site Maintenance';\n      case NotificationGroups.SERVICE_TICKETS:\n        return `${this.notification?.subGroup} Service Ticket Update`;\n      case NotificationGroups.INCIDENTS:\n        return 'Emergency Repair';\n      case NotificationGroups.DCIM_ALERTS:\n        return 'DCIM Alert';\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.notification?.status === 'unread'\n            ? 'notification-item-unread'\n            : 'notification-item-read'}\n        >\n          <ix-icon\n            icon=${this.getNotificationIcon()}\n            class=${this.notification?.status === 'unread'\n              ? 'active-icon'\n              : 'inactive-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.getNotificationTitle()}</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              .notification=${this.notification}\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            @mouseover=${(e: any) =>\n              handleMouseOver(\n                e,\n                this.disabled\n                  ? 'Emergency Repair Notification cannot be removed'\n                  : 'Remove Notification'\n              )}\n            @mouseout=${handleMouseOut}\n            ?disabled=${this.disabled}\n          >\n            <ix-icon\n              slot=\"default\"\n              class=\"${this.disabled ? 'inactive-icon' : 'destructive-icon'}\"\n            >\n              ${trash}\n            </ix-icon>\n          </ix-icon-button>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,9 @@
+import { MobxLitElement } from '@adobe/lit-mobx';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+export declare class NotificationTooltip extends MobxLitElement {
+    static get styles(): import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare function handleMouseOut(): void;
+declare function handleMouseOver(event: any, label: string): void;
+export { handleMouseOut, handleMouseOver };

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

@@ -0,0 +1,53 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { MobxLitElement } from '@adobe/lit-mobx';
+import { customElement } from 'lit/decorators.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import { baseTheme } from '@digital-realty/theme';
+import { computePosition } from '@floating-ui/dom';
+import { TWStyles } from '../../tw.js';
+import { NotificationsStyle } from '../../styles/notifications-style.js';
+// Tooltip code, to be replaced with a generic component
+let NotificationTooltip = class NotificationTooltip extends MobxLitElement {
+    static get styles() {
+        return [NotificationsStyle, baseTheme, TWStyles];
+    }
+    render() {
+        return html ` <div
+      class="notification-tooltip z-[999] hidden rounded absolute p-2 white-text"
+    ></div>`;
+    }
+};
+NotificationTooltip = __decorate([
+    customElement('notification-tooltip')
+], NotificationTooltip);
+export { NotificationTooltip };
+function getNotificationTooltip() {
+    var _a, _b, _c, _d;
+    return (_d = (_c = (_b = (_a = document
+        .querySelector('ix-notifications')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('notification-tooltip')) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.notification-tooltip');
+}
+function handleMouseOut() {
+    const notificationTooltip = getNotificationTooltip();
+    if (notificationTooltip) {
+        notificationTooltip.style.display = 'none';
+        notificationTooltip.innerHTML = '';
+    }
+}
+function handleMouseOver(event, label) {
+    const notificationTooltip = getNotificationTooltip();
+    if (notificationTooltip) {
+        const element = event.currentTarget;
+        // Compute the position of the tooltip
+        computePosition(element, notificationTooltip, {
+            placement: 'bottom-end',
+        }).then(({ x, y }) => {
+            notificationTooltip.innerHTML = label;
+            notificationTooltip.style.display = 'block';
+            notificationTooltip.style.left = `${x}px`;
+            notificationTooltip.style.top = `${y + 12}px`;
+        });
+    }
+}
+export { handleMouseOut, handleMouseOver };
+//# sourceMappingURL=notification-tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"notification-tooltip.js","sourceRoot":"","sources":["../../../src/components/notifications/notification-tooltip.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAEzE,wDAAwD;AAEjD,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,cAAc;IACrD,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;IACnD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;YAEH,CAAC;IACX,CAAC;CACF,CAAA;AAVY,mBAAmB;IAD/B,aAAa,CAAC,sBAAsB,CAAC;GACzB,mBAAmB,CAU/B;SAVY,mBAAmB;AAYhC,SAAS,sBAAsB;;IAC7B,OAAO,MAAA,MAAA,MAAA,MAAA,QAAQ;SACZ,aAAa,CAAC,kBAAkB,CAAC,0CAChC,UAAU,0CAAE,aAAa,CAAC,sBAAsB,CAAC,0CACjD,UAAU,0CAAE,aAAa,CAAC,uBAAuB,CAAgB,CAAC;AACxE,CAAC;AAED,SAAS,cAAc;IACrB,MAAM,mBAAmB,GAAG,sBAAsB,EAAE,CAAC;IACrD,IAAI,mBAAmB,EAAE;QACvB,mBAAmB,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC3C,mBAAmB,CAAC,SAAS,GAAG,EAAE,CAAC;KACpC;AACH,CAAC;AAED,SAAS,eAAe,CAAC,KAAU,EAAE,KAAa;IAChD,MAAM,mBAAmB,GAAG,sBAAsB,EAAE,CAAC;IACrD,IAAI,mBAAmB,EAAE;QACvB,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC;QACpC,sCAAsC;QACtC,eAAe,CAAC,OAAO,EAAE,mBAAmB,EAAE;YAC5C,SAAS,EAAE,YAAY;SACxB,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE;YACnB,mBAAmB,CAAC,SAAS,GAAG,KAAK,CAAC;YACtC,mBAAmB,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;YAC5C,mBAAmB,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;YAC1C,mBAAmB,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC;QAChD,CAAC,CAAC,CAAC;KACJ;AACH,CAAC;AAED,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC","sourcesContent":["import { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { baseTheme } from '@digital-realty/theme';\nimport { computePosition } from '@floating-ui/dom';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\n\n// Tooltip code, to be replaced with a generic component\n@customElement('notification-tooltip')\nexport class NotificationTooltip extends MobxLitElement {\n  static get styles() {\n    return [NotificationsStyle, baseTheme, TWStyles];\n  }\n\n  render() {\n    return html` <div\n      class=\"notification-tooltip z-[999] hidden rounded absolute p-2 white-text\"\n    ></div>`;\n  }\n}\n\nfunction getNotificationTooltip() {\n  return document\n    .querySelector('ix-notifications')\n    ?.shadowRoot?.querySelector('notification-tooltip')\n    ?.shadowRoot?.querySelector('.notification-tooltip') as HTMLElement;\n}\n\nfunction handleMouseOut() {\n  const notificationTooltip = getNotificationTooltip();\n  if (notificationTooltip) {\n    notificationTooltip.style.display = 'none';\n    notificationTooltip.innerHTML = '';\n  }\n}\n\nfunction handleMouseOver(event: any, label: string) {\n  const notificationTooltip = getNotificationTooltip();\n  if (notificationTooltip) {\n    const element = event.currentTarget;\n    // Compute the position of the tooltip\n    computePosition(element, notificationTooltip, {\n      placement: 'bottom-end',\n    }).then(({ x, y }) => {\n      notificationTooltip.innerHTML = label;\n      notificationTooltip.style.display = 'block';\n      notificationTooltip.style.left = `${x}px`;\n      notificationTooltip.style.top = `${y + 12}px`;\n    });\n  }\n}\n\nexport { handleMouseOut, handleMouseOver };\n"]}

package/dist/components/notifications/view-item-dialog.d.ts

@@ -3,7 +3,7 @@ import '@digital-realty/ix-icon-button/ix-icon-button.js';
 import { Notification } from '../../models/notification.js';
 export declare class ViewItemDialog extends MobxLitElement {
     static get styles(): import("lit").CSSResult[];
-    notificaiton: Notification;
+    notification: Notification;
     open: boolean;
     getUrl(): string;
     getLocation(): string;