@digital-realty/ix-notifications 1.1.21 → 1.1.23

package/dist/components/notifications/confirmation-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirmation-dialog.js","sourceRoot":"","sources":["../../../src/components/notifications/confirmation-dialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,kDAAkD,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAGlE,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,cAAc;IAA/C;;QAKwC,gBAAW,GAAG,eAAe,CAAC;QAE7B,SAAI,GAAG,KAAK,CAAC;QAc3D,iBAAY,GAAG,GAAG,EAAE;YAClB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,uBAAuB,CAAC,CAAC,CAAC;QAC/D,CAAC,CAAC;IA2BJ,CAAC;IAjDC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;IACxC,CAAC;IAMD,OAAO,CAAC,aAAsB;QAC5B,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,sBAAsB,EACtB;YACE,MAAM,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE;YACtC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CACF,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;cACD,IAAI,CAAC,IAAI;;gBAEP,IAAI,CAAC,YAAY;;6BAEJ,IAAI,CAAC,WAAW;;;;;;sBAMvB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;;;;;;sBAMzB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;;;;;iBAK7B,CAAC;IAChB,CAAC;CACF,CAAA;AA7C8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;uDAA+B;AAE7B;IAA7C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;gDAAc;AAPhD,kBAAkB;IAD9B,aAAa,CAAC,qBAAqB,CAAC;GACxB,kBAAkB,CAkD9B;SAlDY,kBAAkB","sourcesContent":["import { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { TWStyles } from '../../tw.js';\nimport { ConfirmationDialogEventDetail } from '../../constants/notification-types.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\n\n@customElement('confirmation-dialog')\nexport class ConfirmationDialog extends MobxLitElement {\n  static get styles() {\n    return [TWStyles, NotificationsStyle];\n  }\n\n  @property({ type: String, attribute: true }) textMessage = 'Are you sure?';\n\n  @property({ type: Boolean, attribute: true }) open = false;\n\n  onClick(selectedvalue: Boolean) {\n    const event = new CustomEvent<ConfirmationDialogEventDetail>(\n      'on-confirm-selection',\n      {\n        detail: { returnValue: selectedvalue },\n        bubbles: true,\n        composed: true,\n      }\n    );\n    this.dispatchEvent(event);\n  }\n\n  dialogClosed = () => {\n    this.dispatchEvent(new CustomEvent('confirm-dialog-closed'));\n  };\n\n  render() {\n    return html` <ix-dialog\n      ?open=${this.open}\n      class=\"w-[580px]\"\n      @closed=${this.dialogClosed}\n    >\n      <div slot=\"headline\">${this.textMessage}</div>\n      <div slot=\"actions\">\n        <div class=\"flex flex-row justify-end p-1\">\n          <ix-button\n            name=\"cancel\"\n            appearance=\"text\"\n            @click=\"${() => this.onClick(false)}\"\n            >DISMISS</ix-button\n          >\n          <ix-button\n            name=\"confirm\"\n            appearance=\"text\"\n            @click=\"${() => this.onClick(true)}\"\n            >YES</ix-button\n          >\n        </div>\n      </div>\n    </ix-dialog>`;\n  }\n}\n"]}
+{"version":3,"file":"confirmation-dialog.js","sourceRoot":"","sources":["../../../src/components/notifications/confirmation-dialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,kDAAkD,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAGlE,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,cAAc;IAA/C;;QAKwC,gBAAW,GAAG,eAAe,CAAC;QAE7B,SAAI,GAAG,KAAK,CAAC;QAc3D,iBAAY,GAAG,GAAG,EAAE;YAClB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,uBAAuB,CAAC,CAAC,CAAC;QAC/D,CAAC,CAAC;IA2BJ,CAAC;IAjDC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;IACxC,CAAC;IAMD,OAAO,CAAC,aAAsB;QAC5B,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,sBAAsB,EACtB;YACE,MAAM,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE;YACtC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CACF,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;cACD,IAAI,CAAC,IAAI;;gBAEP,IAAI,CAAC,YAAY;;6BAEJ,IAAI,CAAC,WAAW;;;;;;sBAMvB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;;;;;;sBAMzB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;;;;;iBAK7B,CAAC;IAChB,CAAC;CACF,CAAA;AA7C8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;uDAA+B;AAE7B;IAA7C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;gDAAc;AAPhD,kBAAkB;IAD9B,aAAa,CAAC,qBAAqB,CAAC;GACxB,kBAAkB,CAkD9B","sourcesContent":["import { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { TWStyles } from '../../tw.js';\nimport { ConfirmationDialogEventDetail } from '../../constants/notification-types.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\n\n@customElement('confirmation-dialog')\nexport class ConfirmationDialog extends MobxLitElement {\n  static get styles() {\n    return [TWStyles, NotificationsStyle];\n  }\n\n  @property({ type: String, attribute: true }) textMessage = 'Are you sure?';\n\n  @property({ type: Boolean, attribute: true }) open = false;\n\n  onClick(selectedvalue: Boolean) {\n    const event = new CustomEvent<ConfirmationDialogEventDetail>(\n      'on-confirm-selection',\n      {\n        detail: { returnValue: selectedvalue },\n        bubbles: true,\n        composed: true,\n      }\n    );\n    this.dispatchEvent(event);\n  }\n\n  dialogClosed = () => {\n    this.dispatchEvent(new CustomEvent('confirm-dialog-closed'));\n  };\n\n  render() {\n    return html` <ix-dialog\n      ?open=${this.open}\n      class=\"w-[580px]\"\n      @closed=${this.dialogClosed}\n    >\n      <div slot=\"headline\">${this.textMessage}</div>\n      <div slot=\"actions\">\n        <div class=\"flex flex-row justify-end p-1\">\n          <ix-button\n            name=\"cancel\"\n            appearance=\"text\"\n            @click=\"${() => this.onClick(false)}\"\n            >DISMISS</ix-button\n          >\n          <ix-button\n            name=\"confirm\"\n            appearance=\"text\"\n            @click=\"${() => this.onClick(true)}\"\n            >YES</ix-button\n          >\n        </div>\n      </div>\n    </ix-dialog>`;\n  }\n}\n"]}

package/dist/components/notifications/date-filters.d.ts

@@ -15,5 +15,5 @@ export declare class DateFilters extends MobxLitElement {
     onToDateChange(toDate: string): void;
     onApplyDateFilter(selectedvalue: Boolean): void;
     clearDateFilters(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"date-filters.js","sourceRoot":"","sources":["../../../src/components/notifications/date-filters.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-date/ix-date.js';\nimport '@digital-realty/ix-divider/ix-divider.js';\nimport '@digital-realty/ix-icon';\nimport '@material/web/icon/icon.js';\nimport { format } from 'date-fns/format.js';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport { DefaultDateFormat } from '../../constants/notifications.js';\nimport { FilterDialogEventDetail } from '../../constants/notification-types.js';\nimport { isNullOrUndefinedOrEmpty } from '../../helper/common.js';\n\n@customElement('date-filters')\nexport class DateFilters extends MobxLitElement {\n  static get styles() {\n    return [TWStyles, NotificationsStyle];\n  }\n\n  @state() private fromDate? = !isNullOrUndefinedOrEmpty(\n    NotificationsState.dateFilters.FROM_DATE\n  )\n    ? format(NotificationsState.dateFilters.FROM_DATE!, DefaultDateFormat)\n    : undefined;\n\n  @state() private toDate? = !isNullOrUndefinedOrEmpty(\n    NotificationsState.dateFilters.TO_DATE\n  )\n    ? format(NotificationsState.dateFilters.TO_DATE!, DefaultDateFormat)\n    : undefined;\n\n  @state() private maxDate = format(new Date(), DefaultDateFormat);\n\n  @state() private fromDateErrorText? = '';\n\n  @state() private toDateErrorText? = '';\n\n  onFromDateChange(fromDate: string) {\n    // handling of clear date event of calendar\n    if (fromDate === null || fromDate === '') this.fromDate = undefined;\n    else {\n      this.fromDate = fromDate;\n      // clear error message\n      if (this.fromDate !== undefined) this.fromDateErrorText = undefined;\n    }\n  }\n\n  onToDateChange(toDate: string) {\n    // handling of clear date event of calendar\n    if (toDate === null || toDate === '') this.toDate = undefined;\n    else {\n      this.toDate = toDate;\n      // clear error message\n      if (this.toDate !== undefined) this.toDateErrorText = undefined;\n    }\n  }\n\n  onApplyDateFilter(selectedvalue: Boolean) {\n    if (selectedvalue) {\n      if (this.toDate === undefined && this.fromDate !== undefined) {\n        this.toDateErrorText = 'Please select to date';\n        return;\n      }\n\n      if (this.fromDate === undefined && this.toDate !== undefined) {\n        this.fromDateErrorText = 'Please select from date';\n        return;\n      }\n\n      if (this.fromDate! > this.toDate!) {\n        this.fromDateErrorText = 'From date cannot be later than To date.';\n        this.fromDate = undefined;\n        return;\n      }\n\n      this.fromDateErrorText = undefined;\n\n      if (this.toDate! < this.fromDate!) {\n        this.toDateErrorText = 'To date cannot be earlier than From date.';\n        this.toDate = undefined;\n        return;\n      }\n\n      this.toDateErrorText = undefined;\n    }\n\n    const datesChanged =\n      selectedvalue &&\n      this.toDateErrorText === undefined &&\n      this.fromDateErrorText === undefined;\n\n    if (datesChanged) {\n      NotificationsState.setNotificationDateFilter(this.fromDate, this.toDate);\n      this.requestUpdate();\n    }\n\n    const event = new CustomEvent<FilterDialogEventDetail>('on-selection', {\n      detail: { returnValue: datesChanged },\n      bubbles: true,\n      composed: true,\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  clearDateFilters() {\n    this.fromDate = undefined;\n    this.toDate = undefined;\n    this.fromDateErrorText = undefined;\n    this.toDateErrorText = undefined;\n  }\n\n  /* eslint-disable lit-a11y/click-events-have-key-events */\n  render() {\n    return html` <div class=\"flex flex-col p-4\">\n      <div class=\"flex flex-row items-center\">\n        <div class=\"grow items-center text-xl font-bold\">Filter by Date</div>\n        <div class=\"flex flex-row items-center\" @click=${this.clearDateFilters}>\n          <label class=\"grow text-sm text-right pr-1 cursor-pointer\"\n            >Clear Filter</label\n          >\n          <ix-icon-button\n            small\n            appearance=\"default\"\n            icon=\"domain_verification_off\"\n            class=\"active-icon\"\n          ></ix-icon-button>\n        </div>\n      </div>\n      <ix-divider class=\"my-2\"></ix-divider>\n      <div\n        class=\"flex xl:flex-row lg:flex-col md:flex-col sm:flex-col justify-between item-center my-4\"\n      >\n        <div class=\"flex gap-2\">\n          <ix-date\n            .value=${this.fromDate}\n            max=${this.maxDate}\n            label=\"From\"\n            name=\"FromDate\"\n            .errorText=${this.fromDateErrorText}\n            .onChanged=${(e: any) => this.onFromDateChange(e)}\n          >\n          </ix-date>\n          <ix-date\n            .value=${this.toDate}\n            max=${this.maxDate}\n            label=\"To\"\n            name=\"ToDate\"\n            .errorText=${this.toDateErrorText}\n            .onChanged=${(e: any) => this.onToDateChange(e)}\n          ></ix-date>\n        </div>\n      </div>\n      <div class=\"flex flex-row justify-between\">\n        <ix-button\n          type=\"\"\n          target=\"\"\n          appearance=\"text\"\n          @click=\"${() => this.onApplyDateFilter(false)}\"\n          >Cancel</ix-button\n        >\n        <ix-button\n          type=\"\"\n          target=\"\"\n          appearance=\"text\"\n          @click=\"${() => this.onApplyDateFilter(true)}\"\n          >Filter List</ix-button\n        >\n      </div>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"date-filters.js","sourceRoot":"","sources":["../../../src/components/notifications/date-filters.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-date/ix-date.js';\nimport '@digital-realty/ix-divider/ix-divider.js';\nimport '@digital-realty/ix-icon';\nimport '@material/web/icon/icon.js';\nimport { format } from 'date-fns/format.js';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport { DefaultDateFormat } from '../../constants/notifications.js';\nimport { FilterDialogEventDetail } from '../../constants/notification-types.js';\nimport { isNullOrUndefinedOrEmpty } from '../../helper/common.js';\n\n@customElement('date-filters')\nexport class DateFilters extends MobxLitElement {\n  static get styles() {\n    return [TWStyles, NotificationsStyle];\n  }\n\n  @state() private fromDate? = !isNullOrUndefinedOrEmpty(\n    NotificationsState.dateFilters.FROM_DATE\n  )\n    ? format(NotificationsState.dateFilters.FROM_DATE!, DefaultDateFormat)\n    : undefined;\n\n  @state() private toDate? = !isNullOrUndefinedOrEmpty(\n    NotificationsState.dateFilters.TO_DATE\n  )\n    ? format(NotificationsState.dateFilters.TO_DATE!, DefaultDateFormat)\n    : undefined;\n\n  @state() private maxDate = format(new Date(), DefaultDateFormat);\n\n  @state() private fromDateErrorText? = '';\n\n  @state() private toDateErrorText? = '';\n\n  onFromDateChange(fromDate: string) {\n    // handling of clear date event of calendar\n    if (fromDate === null || fromDate === '') this.fromDate = undefined;\n    else {\n      this.fromDate = fromDate;\n      // clear error message\n      if (this.fromDate !== undefined) this.fromDateErrorText = undefined;\n    }\n  }\n\n  onToDateChange(toDate: string) {\n    // handling of clear date event of calendar\n    if (toDate === null || toDate === '') this.toDate = undefined;\n    else {\n      this.toDate = toDate;\n      // clear error message\n      if (this.toDate !== undefined) this.toDateErrorText = undefined;\n    }\n  }\n\n  onApplyDateFilter(selectedvalue: Boolean) {\n    if (selectedvalue) {\n      if (this.toDate === undefined && this.fromDate !== undefined) {\n        this.toDateErrorText = 'Please select to date';\n        return;\n      }\n\n      if (this.fromDate === undefined && this.toDate !== undefined) {\n        this.fromDateErrorText = 'Please select from date';\n        return;\n      }\n\n      if (this.fromDate! > this.toDate!) {\n        this.fromDateErrorText = 'From date cannot be later than To date.';\n        this.fromDate = undefined;\n        return;\n      }\n\n      this.fromDateErrorText = undefined;\n\n      if (this.toDate! < this.fromDate!) {\n        this.toDateErrorText = 'To date cannot be earlier than From date.';\n        this.toDate = undefined;\n        return;\n      }\n\n      this.toDateErrorText = undefined;\n    }\n\n    const datesChanged =\n      selectedvalue &&\n      this.toDateErrorText === undefined &&\n      this.fromDateErrorText === undefined;\n\n    if (datesChanged) {\n      NotificationsState.setNotificationDateFilter(this.fromDate, this.toDate);\n      this.requestUpdate();\n    }\n\n    const event = new CustomEvent<FilterDialogEventDetail>('on-selection', {\n      detail: { returnValue: datesChanged },\n      bubbles: true,\n      composed: true,\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  clearDateFilters() {\n    this.fromDate = undefined;\n    this.toDate = undefined;\n    this.fromDateErrorText = undefined;\n    this.toDateErrorText = undefined;\n  }\n\n  /* eslint-disable lit-a11y/click-events-have-key-events */\n  render() {\n    return html` <div class=\"flex flex-col p-4\">\n      <div class=\"flex flex-row items-center\">\n        <div class=\"grow items-center text-xl font-bold\">Filter by Date</div>\n        <div class=\"flex flex-row items-center\" @click=${this.clearDateFilters}>\n          <label class=\"grow text-sm text-right pr-1 cursor-pointer\"\n            >Clear Filter</label\n          >\n          <ix-icon-button\n            small\n            appearance=\"default\"\n            icon=\"domain_verification_off\"\n            class=\"active-icon\"\n          ></ix-icon-button>\n        </div>\n      </div>\n      <ix-divider class=\"my-2\"></ix-divider>\n      <div\n        class=\"flex xl:flex-row lg:flex-col md:flex-col sm:flex-col justify-between item-center my-4\"\n      >\n        <div class=\"flex gap-2\">\n          <ix-date\n            .value=${this.fromDate}\n            max=${this.maxDate}\n            label=\"From\"\n            name=\"FromDate\"\n            .errorText=${this.fromDateErrorText}\n            .onChanged=${(e: any) => this.onFromDateChange(e)}\n          >\n          </ix-date>\n          <ix-date\n            .value=${this.toDate}\n            max=${this.maxDate}\n            label=\"To\"\n            name=\"ToDate\"\n            .errorText=${this.toDateErrorText}\n            .onChanged=${(e: any) => this.onToDateChange(e)}\n          ></ix-date>\n        </div>\n      </div>\n      <div class=\"flex flex-row justify-between\">\n        <ix-button\n          type=\"\"\n          target=\"\"\n          appearance=\"text\"\n          @click=\"${() => this.onApplyDateFilter(false)}\"\n          >Cancel</ix-button\n        >\n        <ix-button\n          type=\"\"\n          target=\"\"\n          appearance=\"text\"\n          @click=\"${() => this.onApplyDateFilter(true)}\"\n          >Filter List</ix-button\n        >\n      </div>\n    </div>`;\n  }\n}\n"]}

package/dist/components/notifications/group-filters.d.ts

@@ -4,5 +4,5 @@ import '@digital-realty/ix-switch/ix-switch.js';
 export declare class GroupFilters extends MobxLitElement {
     static get styles(): import("lit").CSSResult[];
     onSwitchChange(e: Event): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

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,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,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,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;IACxC,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;;;;;;iBAME,kBAAkB,CAAC,mBAAmB;qBAClC,kBAAkB,CAAC,mBAAmB;aAC9C,wBAAwB;oBACjB,IAAI,CAAC,cAAc;;;;;;;;;iBAStB,kBAAkB,CAAC,eAAe;qBAC9B,kBAAkB,CAAC,mBAAmB;aAC9C,oBAAoB;oBACb,IAAI,CAAC,cAAc;;;;;;;;;iBAStB,kBAAkB,CAAC,WAAW;qBAC1B,kBAAkB,CAAC,mBAAmB,CAAC,gBAAgB;oBACxD,IAAI,CAAC,cAAc;;gBAEvB,kBAAkB,CAAC,WAAW;;WAEnC,CAAC;IACV,CAAC;CACF,CAAA;AApDY,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAoDxB;SApDY,YAAY","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 '@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 [TWStyles, NotificationsStyle];\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\">\n      <label\n        class=\"whitespace-nowrap p-2 flex gap-3 items-center hover:bg-primary-subtle\"\n      >\n        <ix-switch\n          class=\"flex\"\n          name=${NotificationGroups.PLANNED_MAINTENANCE}\n          selected=${NotificationsState.notificationFilters\n            .SHOW_PLANNED_MAINTENANCE}\n          @change=${this.onSwitchChange}\n        ></ix-switch>\n        <span>Planned Maintenance</span></label\n      >\n      <label\n        class=\"whitespace-nowrap p-2 flex gap-3 items-center hover:bg-primary-subtle\"\n      >\n        <ix-switch\n          class=\"flex\"\n          name=${NotificationGroups.SERVICE_TICKETS}\n          selected=${NotificationsState.notificationFilters\n            .SHOW_SERVICE_TICKETS}\n          @change=${this.onSwitchChange}\n        ></ix-switch>\n        <span>Service Ticket Updates</span></label\n      >\n      <label\n        class=\"whitespace-nowrap p-2 flex gap-3 items-center hover:bg-primary-subtle\"\n      >\n        <ix-switch\n          class=\"flex\"\n          name=${NotificationGroups.DCIM_ALERTS}\n          selected=${NotificationsState.notificationFilters.SHOW_DCIM_ALERTS}\n          @change=${this.onSwitchChange}\n        ></ix-switch>\n        <span>${NotificationGroups.DCIM_ALERTS}</span></label\n      >\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,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,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,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;IACxC,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;;;;;;iBAME,kBAAkB,CAAC,mBAAmB;qBAClC,kBAAkB,CAAC,mBAAmB;aAC9C,wBAAwB;oBACjB,IAAI,CAAC,cAAc;;;;;;;;;iBAStB,kBAAkB,CAAC,eAAe;qBAC9B,kBAAkB,CAAC,mBAAmB;aAC9C,oBAAoB;oBACb,IAAI,CAAC,cAAc;;;;;;;;;iBAStB,kBAAkB,CAAC,WAAW;qBAC1B,kBAAkB,CAAC,mBAAmB,CAAC,gBAAgB;oBACxD,IAAI,CAAC,cAAc;;gBAEvB,kBAAkB,CAAC,WAAW;;WAEnC,CAAC;IACV,CAAC;CACF,CAAA;AApDY,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAoDxB","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 '@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 [TWStyles, NotificationsStyle];\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\">\n      <label\n        class=\"whitespace-nowrap p-2 flex gap-3 items-center hover:bg-primary-subtle\"\n      >\n        <ix-switch\n          class=\"flex\"\n          name=${NotificationGroups.PLANNED_MAINTENANCE}\n          selected=${NotificationsState.notificationFilters\n            .SHOW_PLANNED_MAINTENANCE}\n          @change=${this.onSwitchChange}\n        ></ix-switch>\n        <span>Planned Maintenance</span></label\n      >\n      <label\n        class=\"whitespace-nowrap p-2 flex gap-3 items-center hover:bg-primary-subtle\"\n      >\n        <ix-switch\n          class=\"flex\"\n          name=${NotificationGroups.SERVICE_TICKETS}\n          selected=${NotificationsState.notificationFilters\n            .SHOW_SERVICE_TICKETS}\n          @change=${this.onSwitchChange}\n        ></ix-switch>\n        <span>Service Ticket Updates</span></label\n      >\n      <label\n        class=\"whitespace-nowrap p-2 flex gap-3 items-center hover:bg-primary-subtle\"\n      >\n        <ix-switch\n          class=\"flex\"\n          name=${NotificationGroups.DCIM_ALERTS}\n          selected=${NotificationsState.notificationFilters.SHOW_DCIM_ALERTS}\n          @change=${this.onSwitchChange}\n        ></ix-switch>\n        <span>${NotificationGroups.DCIM_ALERTS}</span></label\n      >\n    </div>`;\n  }\n}\n"]}

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

@@ -8,6 +8,6 @@ export declare class GroupedItem extends MobxLitElement {
     private isOpen;
     onClick: () => void;
     static get styles(): import("lit").CSSResult[];
-    renderNotificationItems(): import("lit").TemplateResult<1>;
-    render(): import("lit").TemplateResult<1>;
+    renderNotificationItems(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

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,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,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;IAmDJ,CAAC;IAjDC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;IACxC,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;;;;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;AA9D8C;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,CA+DvB;SA/DY,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 { 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 [TWStyles, NotificationsStyle];\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>\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=\"dlr-text-caption ml-14 font-bold mr-4\">\n        No notifications yet.\n      </p>`;\n    }\n\n    return html`${nothing}`;\n  }\n\n  render() {\n    return html`<div class=\"group-container-row border-b border-outline py-3\">\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"]}
+{"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,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;IAmDJ,CAAC;IAjDC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;IACxC,CAAC;IAED,uBAAuB;;QACrB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IACE,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,MAAK,SAAS;gBACrC,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,IAAG,CAAC,EAC3B,CAAC;gBACD,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;YACV,CAAC;YACD,OAAO,IAAI,CAAA;;WAEN,CAAC;QACR,CAAC;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;AA9D8C;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;AAElB;IAAhB,KAAK,EAAE;2CAAwB;AARrB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA+DvB","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 { 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 [TWStyles, NotificationsStyle];\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>\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=\"dlr-text-caption ml-14 font-bold mr-4\">\n        No notifications yet.\n      </p>`;\n    }\n\n    return html`${nothing}`;\n  }\n\n  render() {\n    return html`<div class=\"group-container-row border-b border-outline py-3\">\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

@@ -15,8 +15,8 @@ export declare class NotificationItem extends MobxLitElement {
     deleteItem(): void;
     private confirmedDelete;
     private showDeleteResultMessage;
-    calculateDuration(): string;
-    getNotificationIcon(): import("lit").TemplateResult<2> | "sync_saved_locally" | "report";
+    calculateDuration(): string | import("lit-html").TemplateResult<1>;
+    getNotificationIcon(): import("lit-html").TemplateResult<2> | "sync_saved_locally" | "report";
     getNotificationTitle(): string;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -4,12 +4,11 @@ import { MobxLitElement } from '@adobe/lit-mobx';
 import { customElement, property, state } from 'lit/decorators.js';
 import '@digital-realty/ix-icon-button/ix-icon-button.js';
 import '@digital-realty/ix-icon/ix-icon.js';
-import { format } from 'date-fns/format.js';
 import { formatDistance } from 'date-fns/formatDistance.js';
 import { differenceInHours } from 'date-fns/differenceInHours.js';
 import { TWStyles } from '../../tw.js';
 import { NotificationsState } from '../../state/NotificationState.js';
-import { NotificationStatus, DefaultDateTimeFormat, NotificationGroups, } from '../../constants/notifications.js';
+import { NotificationStatus, NotificationGroups, } from '../../constants/notifications.js';
 import { NotificationsStyle } from '../../styles/notifications-style.js';
 import './confirmation-dialog.js';
 import './view-item-dialog.js';
@@ -74,7 +73,11 @@ let NotificationItem = class NotificationItem extends MobxLitElement {
                 return formatDistance(new Date(this.notification.createdAt), new Date(), {
                     addSuffix: true,
                 });
-            return format(new Date(this.notification.createdAt), DefaultDateTimeFormat);
+            return html `<ix-date
+        type="static"
+        variant="date-time"
+        .value=${this.notification.createdAt}
+      ></ix-date>`;
         }
         return 'N/A';
     }

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

@@ -1 +1 @@
-{"version":3,"file":"notification-item.js","sourceRoot":"","sources":["../../../src/components/notifications/notification-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,kDAAkD,CAAC;AAC1D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,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;AAC/B,OAAO,8CAA8C,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGnE,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;IAwLlD,CAAC;IAtLC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;IACxC,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,EAAE;YACxB,kBAAkB,CAAC,sBAAsB,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,CAClE,CAAC,MAAqB,EAAE,EAAE;gBACxB,IAAI,CAAC,uBAAuB,CAAC,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;YAC7D,CAAC,CACF,CAAC;SACH;QACD,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;IACtC,CAAC;IAED,kDAAkD;IAC1C,uBAAuB,CAAC,MAAqB,EAAE,EAAU;QAC/D,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,WAAW,EAAE;YAC3B,MAAM,EAAE;gBACN,EAAE;gBACF,OAAO,EAAE,IAAI,CAAA;sBACD,EAAE;6BACK,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE;;;cAGzC,MAAM,CAAC,OAAO;8BACE;gBACpB,SAAS,EAAE,IAAI;gBACf,WAAW,EAAE,IAAI;gBACjB,QAAQ,EAAE,QAAQ;gBAClB,UAAU,EAAE,QAAQ;gBACpB,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,KAAK;aACb;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,KAAK,SAAS,EAAE;YAC7C,IACE,iBAAiB,CAAC,IAAI,IAAI,EAAE,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;gBACpE,EAAE;gBAEF,OAAO,cAAc,CACnB,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EACrC,IAAI,IAAI,EAAE,EACV;oBACE,SAAS,EAAE,IAAI;iBAChB,CACF,CAAC;YACJ,OAAO,MAAM,CACX,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EACrC,qBAAqB,CACtB,CAAC;SACH;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,mBAAmB;QACjB,QAAQ,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE;YACtC,KAAK,kBAAkB,CAAC,mBAAmB;gBACzC,OAAO,kBAAkB,CAAC;YAC5B,KAAK,kBAAkB,CAAC,eAAe;gBACrC,OAAO,oBAAoB,CAAC;YAC9B,KAAK,kBAAkB,CAAC,SAAS;gBAC/B,OAAO,QAAQ,CAAC;YAClB,KAAK,kBAAkB,CAAC,WAAW;gBACjC,OAAO,IAAI,CAAC;YACd;gBACE,OAAO,oBAAoB,CAAC;SAC/B;IACH,CAAC;IAED,oBAAoB;;QAClB,QAAQ,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE;YACtC,KAAK,kBAAkB,CAAC,mBAAmB;gBACzC,OAAO,qBAAqB,CAAC;YAC/B,KAAK,kBAAkB,CAAC,eAAe;gBACrC,OAAO,GAAG,MAAA,IAAI,CAAC,YAAY,0CAAE,QAAQ,wBAAwB,CAAC;YAChE,KAAK,kBAAkB,CAAC,SAAS;gBAC/B,OAAO,kBAAkB,CAAC;YAC5B,KAAK,kBAAkB,CAAC,WAAW;gBACjC,OAAO,YAAY,CAAC;YACtB;gBACE,OAAO,oBAAoB,CAAC;SAC/B;IACH,CAAC;IAED,0DAA0D;IAC1D,MAAM;;QACJ,OAAO,IAAI,CAAA;;;oHAGqG,CAAA,MAAA,IAAI;aAC3G,YAAY,0CAAE,MAAM,MAAK,QAAQ;YAClC,CAAC,CAAC,oDAAoD;YACtD,CAAC,CAAC,sDAAsD;;;;mBAIjD,IAAI,CAAC,mBAAmB,EAAE;oBACzB,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,MAAK,QAAQ;YAC5C,CAAC,CAAC,aAAa;YACf,CAAC,CAAC,eAAe;qBACV,IAAI,CAAC,WAAW;eACtB,IAAI,CAAC,mBAAmB,EAAE;;mDAEU,IAAI,CAAC,WAAW;;6CAEtB,IAAI,CAAC,oBAAoB,EAAE;;;;kBAItD,IAAI,CAAC,iBAAiB,EAAE;;;;;;sBAMpB,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;;;;;;;qBAOM,IAAI,CAAC,UAAU;yBACX,CAAC,CAAM,EAAE,EAAE;YACtB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,2BAA2B,EAAE;gBAC3C,MAAM,EAAE;oBACN,KAAK,EAAE,IAAI,CAAC,QAAQ;wBAClB,CAAC,CAAC,iDAAiD;wBACnD,CAAC,CAAC,qBAAqB;oBACzB,MAAM,EAAE,CAAC,CAAC,MAAM;iBACjB;aACF,CAAC,CACH,CAAC;QACJ,CAAC;wBACW,GAAG,EAAE,CACf,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,2BAA2B,CAAC,CAAC;wBACtD,IAAI,CAAC,QAAQ;;;;uBAId,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB;;gBAE3D,KAAK;;;;;KAKhB,CAAC;IACJ,CAAC;CACF,CAAA;AA/L8B;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,CAgM5B;SAhMY,gBAAgB","sourcesContent":["import { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport { format } from 'date-fns/format.js';\nimport { formatDistance } from 'date-fns/formatDistance.js';\nimport { differenceInHours } from 'date-fns/differenceInHours.js';\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';\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 [TWStyles, NotificationsStyle];\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 (\n        differenceInHours(new Date(), new Date(this.notification.createdAt)) <\n        24\n      )\n        return formatDistance(\n          new Date(this.notification.createdAt),\n          new Date(),\n          {\n            addSuffix: true,\n          }\n        );\n      return format(\n        new Date(this.notification.createdAt),\n        DefaultDateTimeFormat\n      );\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 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 notification-item\">\n        <div\n          class=\"hover:bg-[rgba(0,0,0,0.04)] p-2 pl-3.5 flex gap-3 relative cursor-pointer items-center font-bold ${this\n            .notification?.status === 'unread'\n            ? 'notification-item-unread border-l-3 border-success'\n            : 'notification-item-read border-l-3 border-transparent'}\"\n        >\n          <ix-icon\n            style=\"--ix-icon-font-size: 24px;--ix-icon-line-height: 24px;\"\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 class=\"dlr-text-caption\">${this.getNotificationTitle()}</h2>\n            </div>\n            <div class=\"grow text-xs\">\n              <h3 class=\"dlr-text-caption text-on-surface-disabled\">\n                ${this.calculateDuration()}\n              </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            style=\"--md-icon-button-icon-size:24px;\"\n            @click=${this.deleteItem}\n            @mouseover=${(e: any) => {\n              this.dispatchEvent(\n                new CustomEvent('show-notification-tooltip', {\n                  detail: {\n                    label: this.disabled\n                      ? 'Emergency Repair Notification cannot be removed'\n                      : 'Remove Notification',\n                    target: e.target,\n                  },\n                })\n              );\n            }}\n            @mouseout=${() =>\n              this.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}\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"]}
+{"version":3,"file":"notification-item.js","sourceRoot":"","sources":["../../../src/components/notifications/notification-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport { formatDistance } from 'date-fns/formatDistance.js';\nimport { differenceInHours } from 'date-fns/differenceInHours.js';\nimport { TWStyles } from '../../tw.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\nimport { ApiCallResult, Notification } from '../../models/notification.js';\nimport {\n  NotificationStatus,\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';\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 [TWStyles, NotificationsStyle];\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 (\n        differenceInHours(new Date(), new Date(this.notification.createdAt)) <\n        24\n      )\n        return formatDistance(\n          new Date(this.notification.createdAt),\n          new Date(),\n          {\n            addSuffix: true,\n          }\n        );\n      return html`<ix-date\n        type=\"static\"\n        variant=\"date-time\"\n        .value=${this.notification.createdAt}\n      ></ix-date>`;\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 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 notification-item\">\n        <div\n          class=\"hover:bg-[rgba(0,0,0,0.04)] p-2 pl-3.5 flex gap-3 relative cursor-pointer items-center font-bold ${this\n            .notification?.status === 'unread'\n            ? 'notification-item-unread border-l-3 border-success'\n            : 'notification-item-read border-l-3 border-transparent'}\"\n        >\n          <ix-icon\n            style=\"--ix-icon-font-size: 24px;--ix-icon-line-height: 24px;\"\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 class=\"dlr-text-caption\">${this.getNotificationTitle()}</h2>\n            </div>\n            <div class=\"grow text-xs\">\n              <h3 class=\"dlr-text-caption text-on-surface-disabled\">\n                ${this.calculateDuration()}\n              </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            style=\"--md-icon-button-icon-size:24px;\"\n            @click=${this.deleteItem}\n            @mouseover=${(e: any) => {\n              this.dispatchEvent(\n                new CustomEvent('show-notification-tooltip', {\n                  detail: {\n                    label: this.disabled\n                      ? 'Emergency Repair Notification cannot be removed'\n                      : 'Remove Notification',\n                    target: e.target,\n                  },\n                })\n              );\n            }}\n            @mouseout=${() =>\n              this.dispatchEvent(new CustomEvent('hide-notification-tooltip'))}\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

@@ -11,5 +11,5 @@ export declare class NotificationTooltip extends MobxLitElement {
     configureNotificationTooltip: (e: any) => void;
     hideNotificationTooltip: () => void;
     updated(changedProperties: Map<string, any>): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"notification-tooltip.js","sourceRoot":"","sources":["../../../src/components/notifications/notification-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable wc/guard-super-call */\nimport { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { query, customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { computePosition } from '@floating-ui/dom';\nimport { classMap } from 'lit/directives/class-map.js';\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 [TWStyles, NotificationsStyle];\n  }\n\n  @query('.notification-tooltip') notificationTooltip!: HTMLDivElement;\n\n  @property({ type: Boolean, reflect: true }) isVisible: boolean = false;\n\n  @property({ type: String, reflect: true }) label: string = '';\n\n  @state() hoveredElement: HTMLElement | undefined = undefined;\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener(\n      'show-notification-tooltip',\n      this.configureNotificationTooltip\n    );\n    window.addEventListener(\n      'hide-notification-tooltip',\n      this.hideNotificationTooltip\n    );\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener(\n      'show-notification-tooltip',\n      this.configureNotificationTooltip\n    );\n    window.removeEventListener(\n      'hide-notification-tooltip',\n      this.hideNotificationTooltip\n    );\n  }\n\n  configureNotificationTooltip = (e: any) => {\n    const { label, target } = e.detail;\n    this.hoveredElement = target as HTMLElement;\n    this.label = label;\n    this.isVisible = true;\n  };\n\n  hideNotificationTooltip = () => {\n    this.isVisible = false;\n    this.hoveredElement = undefined;\n    this.label = '';\n  };\n\n  updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('hoveredElement') && this.isVisible) {\n      if (this.hoveredElement) {\n        computePosition(this.hoveredElement, this.notificationTooltip, {\n          placement: 'bottom-end',\n        }).then(({ x, y }) => {\n          this.notificationTooltip.style.left = `${x}px`;\n          this.notificationTooltip.style.top = `${y + 12}px`;\n        });\n      }\n    }\n  }\n\n  render() {\n    const classes = {\n      hidden: !this.isVisible,\n    };\n\n    return html`<div\n        class=\"notification-tooltip z-[9999] rounded absolute p-2 white-text ${classMap(\n          classes\n        )}\"\n      >\n        ${this.label}\n      </div>\n      <slot></slot>`;\n  }\n}\n"]}
+{"version":3,"file":"notification-tooltip.js","sourceRoot":"","sources":["../../../src/components/notifications/notification-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable wc/guard-super-call */\nimport { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { query, customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { computePosition } from '@floating-ui/dom';\nimport { classMap } from 'lit/directives/class-map.js';\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 [TWStyles, NotificationsStyle];\n  }\n\n  @query('.notification-tooltip') notificationTooltip!: HTMLDivElement;\n\n  @property({ type: Boolean, reflect: true }) isVisible: boolean = false;\n\n  @property({ type: String, reflect: true }) label: string = '';\n\n  @state() hoveredElement: HTMLElement | undefined = undefined;\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener(\n      'show-notification-tooltip',\n      this.configureNotificationTooltip\n    );\n    window.addEventListener(\n      'hide-notification-tooltip',\n      this.hideNotificationTooltip\n    );\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener(\n      'show-notification-tooltip',\n      this.configureNotificationTooltip\n    );\n    window.removeEventListener(\n      'hide-notification-tooltip',\n      this.hideNotificationTooltip\n    );\n  }\n\n  configureNotificationTooltip = (e: any) => {\n    const { label, target } = e.detail;\n    this.hoveredElement = target as HTMLElement;\n    this.label = label;\n    this.isVisible = true;\n  };\n\n  hideNotificationTooltip = () => {\n    this.isVisible = false;\n    this.hoveredElement = undefined;\n    this.label = '';\n  };\n\n  updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('hoveredElement') && this.isVisible) {\n      if (this.hoveredElement) {\n        computePosition(this.hoveredElement, this.notificationTooltip, {\n          placement: 'bottom-end',\n        }).then(({ x, y }) => {\n          this.notificationTooltip.style.left = `${x}px`;\n          this.notificationTooltip.style.top = `${y + 12}px`;\n        });\n      }\n    }\n  }\n\n  render() {\n    const classes = {\n      hidden: !this.isVisible,\n    };\n\n    return html`<div\n        class=\"notification-tooltip z-[9999] rounded absolute p-2 white-text ${classMap(\n          classes\n        )}\"\n      >\n        ${this.label}\n      </div>\n      <slot></slot>`;\n  }\n}\n"]}

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

@@ -10,5 +10,5 @@ export declare class ViewItemDialog extends MobxLitElement {
     getLocation(): string;
     dialogClosed: () => void;
     viewRecord: () => void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/notifications/view-item-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"view-item-dialog.js","sourceRoot":"","sources":["../../../src/components/notifications/view-item-dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport { format } from 'date-fns/format.js';\nimport { TWStyles } from '../../tw.js';\nimport { Notification } from '../../models/notification.js';\nimport {\n  NotificationGroups,\n  SubGroups,\n} from '../../constants/notifications.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\n\n@customElement('view-item-dialog')\nexport class ViewItemDialog extends MobxLitElement {\n  static get styles() {\n    return [TWStyles, NotificationsStyle];\n  }\n\n  @property({ type: Object, attribute: false }) notification =\n    {} as Notification;\n\n  @property({ type: Boolean, attribute: true }) open = false;\n\n  getUrl(): string {\n    const ticketId = this.notification.resourceId;\n\n    switch (this.notification.resourceType) {\n      case NotificationGroups.PLANNED_MAINTENANCE:\n        return `/service-management/reports?ticketId=${ticketId}`;\n      case NotificationGroups.SERVICE_TICKETS:\n        switch (this.notification.subGroup) {\n          case SubGroups.Remote_Hands:\n            return `/service-management/service-tickets/remote-hands/${ticketId}`;\n          case SubGroups.Customer_Care:\n            return `/service-management/service-tickets/customer-care/${ticketId}`;\n          case SubGroups.Deliveries:\n            return `/service-management/service-tickets/${SubGroups.Deliveries}/${ticketId}`;\n          case SubGroups.Facility_Access:\n            return `/service-management/service-tickets/facility-access/${ticketId}`;\n          case SubGroups.Removals:\n            return `/service-management/service-tickets/removals/${ticketId}`;\n          case SubGroups.Trouble_Ticket:\n            return `/service-management/service-tickets/trouble-tickets/${ticketId}`;\n\n          default:\n            return '';\n        }\n      case NotificationGroups.INCIDENTS:\n        return `/service-management/incidents/${ticketId}`;\n      case NotificationGroups.DCIM_ALERTS:\n        return `/dcim/${ticketId}`;\n      default:\n        return '';\n    }\n  }\n\n  getLocation() {\n    if (\n      this.notification.locations === undefined ||\n      this.notification.locations.length < 1\n    ) {\n      return '';\n    }\n    if (this.notification.locations.length > 1) {\n      return 'Multiple Sites';\n    }\n    return this.notification.locations[0];\n  }\n\n  dialogClosed = () => {\n    this.dispatchEvent(new CustomEvent('view-item-dialog-closed'));\n  };\n\n  viewRecord = () => {\n    this.dialogClosed();\n    NotificationsState.showDrawer = false;\n  };\n\n  render() {\n    return html` <ix-dialog\n      ?open=${this.open}\n      @closed=${this.dialogClosed}\n      class=\"notification-modal\"\n    >\n      <div slot=\"headline\" class=\"w-[560px]\">\n        <div class=\"flex flex-col flex-start\">\n          <div class=\"notification-modal-title text-2xl font-bold text-balance\">\n            ${this.notification.resourceType}\n          </div>\n          <div\n            class=\"notification-modal-subtitle pt-4 pb-0 font-bold text-balance\"\n          >\n            ${this.notification.subGroup}\n          </div>\n        </div>\n      </div>\n      <form\n        class=\"notification-modal-content\"\n        slot=\"content\"\n        id=\"form-id\"\n        method=\"dialog\"\n      >\n        <div\n          class=\"notification-modal-content-title notification-modal-subject-title\"\n        >\n          Subject\n        </div>\n        <div class=\"notification-modal-subject-text font-normal text-wrap\">\n          ${this.notification.subject}\n        </div>\n        <div\n          class=\"notification-modal-content-title notification-modal-created-date-title\"\n        >\n          Create Date\n        </div>\n        <div class=\"notification-modal-created-date-text font-normal text-wrap\">\n          ${format(\n            new Date(this.notification.createdAt),\n            'dd/MM/yyyy HH:mm:ss'\n          )}\n        </div>\n        <div\n          class=\"notification-modal-content-title notification-modal-site-title\"\n        >\n          Site\n        </div>\n        <div class=\"notification-modal-site-text font-normal text-wrap\">\n          ${this.getLocation()}\n        </div>\n      </form>\n      <div slot=\"actions\" class=\"flex flex-row flex-end\">\n        <ix-button form=\"form-id\" appearance=\"text\"> Close </ix-button>\n        <ix-button\n          href=\"${this.getUrl()}\"\n          @click=\"${this.viewRecord}\"\n          appearance=\"text\"\n          >View Record</ix-button\n        >\n      </div>\n    </ix-dialog>`;\n  }\n}\n"]}
+{"version":3,"file":"view-item-dialog.js","sourceRoot":"","sources":["../../../src/components/notifications/view-item-dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport { format } from 'date-fns/format.js';\nimport { TWStyles } from '../../tw.js';\nimport { Notification } from '../../models/notification.js';\nimport {\n  NotificationGroups,\n  SubGroups,\n} from '../../constants/notifications.js';\nimport { NotificationsStyle } from '../../styles/notifications-style.js';\nimport { NotificationsState } from '../../state/NotificationState.js';\n\n@customElement('view-item-dialog')\nexport class ViewItemDialog extends MobxLitElement {\n  static get styles() {\n    return [TWStyles, NotificationsStyle];\n  }\n\n  @property({ type: Object, attribute: false }) notification =\n    {} as Notification;\n\n  @property({ type: Boolean, attribute: true }) open = false;\n\n  getUrl(): string {\n    const ticketId = this.notification.resourceId;\n\n    switch (this.notification.resourceType) {\n      case NotificationGroups.PLANNED_MAINTENANCE:\n        return `/service-management/reports?ticketId=${ticketId}`;\n      case NotificationGroups.SERVICE_TICKETS:\n        switch (this.notification.subGroup) {\n          case SubGroups.Remote_Hands:\n            return `/service-management/service-tickets/remote-hands/${ticketId}`;\n          case SubGroups.Customer_Care:\n            return `/service-management/service-tickets/customer-care/${ticketId}`;\n          case SubGroups.Deliveries:\n            return `/service-management/service-tickets/${SubGroups.Deliveries}/${ticketId}`;\n          case SubGroups.Facility_Access:\n            return `/service-management/service-tickets/facility-access/${ticketId}`;\n          case SubGroups.Removals:\n            return `/service-management/service-tickets/removals/${ticketId}`;\n          case SubGroups.Trouble_Ticket:\n            return `/service-management/service-tickets/trouble-tickets/${ticketId}`;\n\n          default:\n            return '';\n        }\n      case NotificationGroups.INCIDENTS:\n        return `/service-management/incidents/${ticketId}`;\n      case NotificationGroups.DCIM_ALERTS:\n        return `/dcim/${ticketId}`;\n      default:\n        return '';\n    }\n  }\n\n  getLocation() {\n    if (\n      this.notification.locations === undefined ||\n      this.notification.locations.length < 1\n    ) {\n      return '';\n    }\n    if (this.notification.locations.length > 1) {\n      return 'Multiple Sites';\n    }\n    return this.notification.locations[0];\n  }\n\n  dialogClosed = () => {\n    this.dispatchEvent(new CustomEvent('view-item-dialog-closed'));\n  };\n\n  viewRecord = () => {\n    this.dialogClosed();\n    NotificationsState.showDrawer = false;\n  };\n\n  render() {\n    return html` <ix-dialog\n      ?open=${this.open}\n      @closed=${this.dialogClosed}\n      class=\"notification-modal\"\n    >\n      <div slot=\"headline\" class=\"w-[560px]\">\n        <div class=\"flex flex-col flex-start\">\n          <div class=\"notification-modal-title text-2xl font-bold text-balance\">\n            ${this.notification.resourceType}\n          </div>\n          <div\n            class=\"notification-modal-subtitle pt-4 pb-0 font-bold text-balance\"\n          >\n            ${this.notification.subGroup}\n          </div>\n        </div>\n      </div>\n      <form\n        class=\"notification-modal-content\"\n        slot=\"content\"\n        id=\"form-id\"\n        method=\"dialog\"\n      >\n        <div\n          class=\"notification-modal-content-title notification-modal-subject-title\"\n        >\n          Subject\n        </div>\n        <div class=\"notification-modal-subject-text font-normal text-wrap\">\n          ${this.notification.subject}\n        </div>\n        <div\n          class=\"notification-modal-content-title notification-modal-created-date-title\"\n        >\n          Create Date\n        </div>\n        <div class=\"notification-modal-created-date-text font-normal text-wrap\">\n          ${format(\n            new Date(this.notification.createdAt),\n            'dd/MM/yyyy HH:mm:ss'\n          )}\n        </div>\n        <div\n          class=\"notification-modal-content-title notification-modal-site-title\"\n        >\n          Site\n        </div>\n        <div class=\"notification-modal-site-text font-normal text-wrap\">\n          ${this.getLocation()}\n        </div>\n      </form>\n      <div slot=\"actions\" class=\"flex flex-row flex-end\">\n        <ix-button form=\"form-id\" appearance=\"text\"> Close </ix-button>\n        <ix-button\n          href=\"${this.getUrl()}\"\n          @click=\"${this.viewRecord}\"\n          appearance=\"text\"\n          >View Record</ix-button\n        >\n      </div>\n    </ix-dialog>`;\n  }\n}\n"]}

package/dist/helper/errors.js.map

@@ -1 +1 @@
-{"version":3,"file":"errors.js","sourceRoot":"","sources":["../../src/helper/errors.ts"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAElE,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,EAAE,CAAM,EAAE,cAAuB,IAAI,EAAE,EAAE;IACvE,IAAI,OAAO,GAAG,mBAAmB,CAAC;IAElC,IAAI,CAAC,YAAY,aAAa,IAAI,CAAC,CAAC,QAAQ,CAAC,MAAM,KAAK,GAAG,EAAE;QAC3D,IAAI;YACF,MAAM,EAAE,MAAM,EAAE,GAAG,MAAO,CAAmB,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;YAC9D,OAAO,GAAG,MAAM,CAAC;YACjB,IAAI,WAAW;gBAAE,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SACzC;QAAC,OAAO,EAAO,EAAE;YAChB,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;SAClB;KACF;SAAM;QACL,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;KAClB;AACH,CAAC,CAAC","sourcesContent":["/* eslint-disable no-console */\nimport { ResponseError } from '../api/notifications-api/index.js';\n\nexport const handleError = async (e: any, raiseDialog: boolean = true) => {\n  let message = 'An error occurred';\n\n  if (e instanceof ResponseError && e.response.status === 400) {\n    try {\n      const { detail } = await (e as ResponseError).response.json();\n      message = detail;\n      if (raiseDialog) console.error(message);\n    } catch (e2: any) {\n      console.error(e);\n    }\n  } else {\n    console.error(e);\n  }\n};\n"]}
+{"version":3,"file":"errors.js","sourceRoot":"","sources":["../../src/helper/errors.ts"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAElE,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,EAAE,CAAM,EAAE,cAAuB,IAAI,EAAE,EAAE;IACvE,IAAI,OAAO,GAAG,mBAAmB,CAAC;IAElC,IAAI,CAAC,YAAY,aAAa,IAAI,CAAC,CAAC,QAAQ,CAAC,MAAM,KAAK,GAAG,EAAE,CAAC;QAC5D,IAAI,CAAC;YACH,MAAM,EAAE,MAAM,EAAE,GAAG,MAAO,CAAmB,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;YAC9D,OAAO,GAAG,MAAM,CAAC;YACjB,IAAI,WAAW;gBAAE,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC1C,CAAC;QAAC,OAAO,EAAO,EAAE,CAAC;YACjB,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC;IACH,CAAC;SAAM,CAAC;QACN,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC;AACH,CAAC,CAAC","sourcesContent":["/* eslint-disable no-console */\nimport { ResponseError } from '../api/notifications-api/index.js';\n\nexport const handleError = async (e: any, raiseDialog: boolean = true) => {\n  let message = 'An error occurred';\n\n  if (e instanceof ResponseError && e.response.status === 400) {\n    try {\n      const { detail } = await (e as ResponseError).response.json();\n      message = detail;\n      if (raiseDialog) console.error(message);\n    } catch (e2: any) {\n      console.error(e);\n    }\n  } else {\n    console.error(e);\n  }\n};\n"]}