@digital-realty/ix-notifications 1.0.13 → 1.0.14

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

@@ -8,7 +8,7 @@ import '@digital-realty/ix-date/ix-date.js';
 import '@digital-realty/ix-divider/ix-divider.js';
 import '@digital-realty/ix-icon';
 import '@material/web/icon/icon.js';
-import { formatDate } from 'date-fns';
+import { format } from 'date-fns';
 import { TWStyles } from '../../tw.js';
 import { NotificationsState } from '../../state/NotificationState.js';
 import { NotificationsStyle } from '../../styles/notifications-style.js';
@@ -16,11 +16,11 @@ import { DefaultDateFormat } from '../../constants/notifications.js';
 let DateFilters = class DateFilters extends MobxLitElement {
     constructor() {
         super(...arguments);
-        this.fromDate = formatDate(NotificationsState.dateFilters.FROM_DATE, DefaultDateFormat) ||
+        this.fromDate = format(NotificationsState.dateFilters.FROM_DATE, DefaultDateFormat) ||
             undefined;
-        this.toDate = formatDate(NotificationsState.dateFilters.TO_DATE, DefaultDateFormat) ||
+        this.toDate = format(NotificationsState.dateFilters.TO_DATE, DefaultDateFormat) ||
             undefined;
-        this.maxDate = formatDate(new Date(), DefaultDateFormat);
+        this.maxDate = format(new Date(), DefaultDateFormat);
         this.fromDateErrorText = '';
         this.toDateErrorText = '';
     }
@@ -28,40 +28,54 @@ let DateFilters = class DateFilters extends MobxLitElement {
         return [NotificationsStyle, baseTheme, elementTheme, TWStyles];
     }
     onFromDateChange(fromDate) {
-        this.fromDate = fromDate;
-        if (this.fromDate > this.toDate) {
-            this.fromDateErrorText = 'From date cannot be later than To date.';
+        //handling of clear date event of calender
+        if (fromDate === null || fromDate === "")
             this.fromDate = undefined;
-        }
-        else {
-            this.fromDateErrorText = undefined;
-        }
-        if (this.toDate < this.fromDate) {
-            this.toDateErrorText = 'To date cannot be earlier than From date.';
-            this.toDate = undefined;
-        }
         else {
-            this.toDateErrorText = undefined;
+            this.fromDate = fromDate;
+            //clear error message 
+            if (this.fromDate !== undefined)
+                this.fromDateErrorText = undefined;
         }
     }
     onToDateChange(toDate) {
-        this.toDate = toDate;
-        if (this.toDate < this.fromDate) {
-            this.toDateErrorText = 'To date cannot be earlier than From date.';
+        //handling of clear date event of calender
+        if (toDate === null || toDate === "")
             this.toDate = undefined;
-        }
         else {
-            this.toDateErrorText = undefined;
-        }
-        if (this.fromDate > this.toDate) {
-            this.fromDateErrorText = 'From date cannot be later than To date.';
-            this.fromDate = undefined;
-        }
-        else {
-            this.fromDateErrorText = undefined;
+            this.toDate = toDate;
+            //clear error message 
+            if (this.toDate !== undefined)
+                this.toDateErrorText = undefined;
         }
     }
     onApplyDateFilter(selectedvalue) {
+        if (selectedvalue) {
+            if (this.toDate === undefined && this.fromDate !== undefined) {
+                this.toDateErrorText = "Please select to date";
+                return;
+            }
+            if (this.fromDate === undefined && this.toDate !== undefined) {
+                this.fromDateErrorText = "Please select from date";
+                return;
+            }
+            if (this.fromDate > this.toDate) {
+                this.fromDateErrorText = 'From date cannot be later than To date.';
+                this.fromDate = undefined;
+                return;
+            }
+            else {
+                this.fromDateErrorText = undefined;
+            }
+            if (this.toDate < this.fromDate) {
+                this.toDateErrorText = 'To date cannot be earlier than From date.';
+                this.toDate = undefined;
+                return;
+            }
+            else {
+                this.toDateErrorText = undefined;
+            }
+        }
         const datesChanged = selectedvalue && this.toDateErrorText === undefined && this.fromDateErrorText === undefined;
         if (datesChanged) {
             NotificationsState.setNotificationDateFilter(this.fromDate, this.toDate);

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 { baseTheme, elementTheme } from '@digital-realty/theme';\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 { formatDate } from 'date-fns';\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';\n\n@customElement('date-filters')\nexport class DateFilters extends MobxLitElement {\n  static get styles() {\n    return [NotificationsStyle, baseTheme, elementTheme, TWStyles];\n  }\n\n  @state() private fromDate? =\n    formatDate(NotificationsState.dateFilters.FROM_DATE!, DefaultDateFormat) ||\n    undefined;\n\n  @state() private toDate? =\n    formatDate(NotificationsState.dateFilters.TO_DATE!, DefaultDateFormat) ||\n    undefined;\n\n  @state() private maxDate = formatDate(new Date(), DefaultDateFormat);\n\n  @state() private fromDateErrorText? = '';\n\n  @state() private toDateErrorText? = '';\n\n  onFromDateChange(fromDate: string) {\n    this.fromDate = fromDate;\n    \n    if (this.fromDate! > this.toDate!) {\n      this.fromDateErrorText = 'From date cannot be later than To date.';\n      this.fromDate = undefined;\n    } else {\n      this.fromDateErrorText = undefined;\n    }\n    \n    if (this.toDate! < this.fromDate!) {\n      this.toDateErrorText = 'To date cannot be earlier than From date.';\n      this.toDate = undefined;\n    } else {\n      this.toDateErrorText = undefined;\n    }\n  }\n\n  onToDateChange(toDate: string) {\n    this.toDate = toDate;\n   \n    if (this.toDate! < this.fromDate!) {\n      this.toDateErrorText = 'To date cannot be earlier than From date.';\n      this.toDate = undefined;\n    } else {\n      this.toDateErrorText = undefined;\n    }\n\n    if (this.fromDate! > this.toDate!) {\n      this.fromDateErrorText = 'From date cannot be later than To date.';\n      this.fromDate = undefined;\n    } else {\n      this.fromDateErrorText = undefined;\n    }\n  }\n\n  onApplyDateFilter(selectedvalue: Boolean) {\n    const datesChanged = selectedvalue && this.toDateErrorText === undefined && this.fromDateErrorText === undefined;\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    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-2\">\n      <div class=\"flex flex-row text-justify\">\n        <div class=\"grow items-center text-xl font-bold text-left p-2\">\n          Filter by Date\n        </div>\n        <div\n          class=\"flex flex-row items-center p-2\"\n          @click=${this.clearDateFilters}\n        >\n          <label class=\"grow text-sm text-right pr-1 cursor-pointer\"\n            >Cleare Filter</label\n          >\n          <ix-icon-button\n            appearance=\"default\"\n            icon=\"domain_verification_off\"\n            class=\"blue-icon\"\n          ></ix-icon-button>\n        </div>\n      </div>\n      <ix-divider class=\"px-2\"></ix-divider>\n      <div\n        class=\"flex xl:flex-row lg:flex-col md:flex-col sm:flex-col justify-between item-center p-2\"\n      >\n        <div class=\"p-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        </div>\n        <div class=\"p-2\">\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  p-2\">\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 { baseTheme, elementTheme } from '@digital-realty/theme';\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';\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';\n\n@customElement('date-filters')\nexport class DateFilters extends MobxLitElement {\n  static get styles() {\n    return [NotificationsStyle, baseTheme, elementTheme, TWStyles];\n  }\n\n  @state() private fromDate? =\n    format(NotificationsState.dateFilters.FROM_DATE!, DefaultDateFormat) ||\n    undefined;\n\n  @state() private toDate? =\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    \n    //handling of clear date event of calender\n    if(fromDate === null || fromDate === \"\")\n      this.fromDate = undefined;\n    else\n    {\n      this.fromDate = fromDate;        \n      //clear error message \n      if(this.fromDate !== undefined)\n        this.fromDateErrorText = undefined;\n    }\n    \n  }\n\n  onToDateChange(toDate: string) {\n    \n    //handling of clear date event of calender\n    if(toDate === null || toDate === \"\")\n      this.toDate = undefined;\n    else\n    {\n      this.toDate = toDate;\n      //clear error message \n      if(this.toDate !== undefined)\n        this.toDateErrorText = undefined;\n    }\n  }\n\n  onApplyDateFilter(selectedvalue: Boolean) {    \n    if(selectedvalue)\n    {\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      } else {\n        this.fromDateErrorText = undefined;\n      }\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      } else {\n        this.toDateErrorText = undefined;\n      }\n    }\n\n    const datesChanged = selectedvalue && this.toDateErrorText === undefined && this.fromDateErrorText === undefined;    \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    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-2\">\n      <div class=\"flex flex-row text-justify\">\n        <div class=\"grow items-center text-xl font-bold text-left p-2\">\n          Filter by Date\n        </div>\n        <div\n          class=\"flex flex-row items-center p-2\"\n          @click=${this.clearDateFilters}\n        >\n          <label class=\"grow text-sm text-right pr-1 cursor-pointer\"\n            >Cleare Filter</label\n          >\n          <ix-icon-button\n            appearance=\"default\"\n            icon=\"domain_verification_off\"\n            class=\"blue-icon\"\n          ></ix-icon-button>\n        </div>\n      </div>\n      <ix-divider class=\"px-2\"></ix-divider>\n      <div\n        class=\"flex xl:flex-row lg:flex-col md:flex-col sm:flex-col justify-between item-center p-2\"\n      >\n        <div class=\"p-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        </div>\n        <div class=\"p-2\">\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  p-2\">\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/ix-notifications.min.js

@@ -1 +1 @@
-import{__decorate}from"tslib";import{css,html,nothing}from"lit";import{property,customElement,state,query}from"lit/decorators.js";import{MobxLitElement}from"@adobe/lit-mobx";import{format,subDays,parse,differenceInHours,formatDistance,formatDate,differenceInDays}from"date-fns";import"@digital-realty/ix-button/ix-button.js";import"@digital-realty/ix-drawer/ix-drawer.js";import"@digital-realty/ix-icon";import"@material/web/icon/icon.js";import{makeAutoObservable}from"mobx";import{makePersistable,isHydrated,hydrateStore,clearPersistedStore,getPersistedStore}from"mobx-persist-store";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-icon/ix-icon.js";import{elementTheme,baseTheme}from"@digital-realty/theme";import"@digital-realty/ix-toast/ix-message-toast.js";import"@digital-realty/ix-switch/ix-switch.js";import"@digital-realty/ix-date/ix-date.js";import"@digital-realty/ix-divider/ix-divider.js";const TWStyles=css`*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Open Sans,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::after,::before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.absolute{position:absolute}.relative{position:relative}.-start-0{inset-inline-start:0}.z-50{z-index:50}.m-0{margin:0}.mr-4{margin-right:1rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.w-\\[100px\\]{width:100px}.w-\\[480px\\]{width:480px}.w-\\[580px\\]{width:580px}.flex-grow{flex-grow:1}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.rounded-full{border-radius:9999px}.border{border-width:1px}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-16{padding-left:4rem;padding-right:4rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-2{padding-bottom:.5rem}.pl-1{padding-left:.25rem}.pl-11{padding-left:2.75rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pl-8{padding-left:2rem}.pr-1{padding-right:.25rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.underline{text-decoration-line:underline}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}@media (min-width:640px){.sm\\:flex-col{flex-direction:column}}@media (min-width:768px){.md\\:flex-col{flex-direction:column}}@media (min-width:1024px){.lg\\:flex-col{flex-direction:column}}@media (min-width:1280px){.xl\\:flex-row{flex-direction:row}}`;var NotificationStatus,NotificationGroups,ApiCallState;!function(t){t.READ="read",t.UNREAD="unread"}(NotificationStatus=NotificationStatus||{}),function(t){t.PLANNED_MAINTENANCE="Planned Maintenance",t.INCIDENTS="Incidents",t.DCIM_ALERTS="DCIM Alerts",t.SERVICE_TICKETS="Service Tickets"}(NotificationGroups=NotificationGroups||{}),function(t){t.LOADING="Loading",t.ERROR="Error",t.SUCCESS="Success"}(ApiCallState=ApiCallState||{});const DefaultDateFormat="yyyy-MM-dd",DefaultDisplayDays=30,DefaultDateTimeFormat="yyyy-MM-dd HH:mm:ss",BASE_PATH="http://api.digitalrealty.com/notifications".replace(/\/+$/,"");class Configuration{constructor(t={}){this.configuration=t}set config(t){this.configuration=t}get basePath(){return null!=this.configuration.basePath?this.configuration.basePath:BASE_PATH}get fetchApi(){return this.configuration.fetchApi}get middleware(){return this.configuration.middleware||[]}get queryParamsStringify(){return this.configuration.queryParamsStringify||querystring}get username(){return this.configuration.username}get password(){return this.configuration.password}get apiKey(){const t=this.configuration.apiKey;if(t)return"function"==typeof t?t:()=>t}get accessToken(){const t=this.configuration.accessToken;if(t)return"function"==typeof t?t:async()=>t}get headers(){return this.configuration.headers}get credentials(){return this.configuration.credentials}}const DefaultConfig=new Configuration;class BaseAPI{constructor(t=DefaultConfig){this.configuration=t,this.fetchApi=async(t,e)=>{let i={url:t,init:e};for(const a of this.middleware)a.pre&&(i=await a.pre({fetch:this.fetchApi,...i})||i);let o=void 0;try{o=await(this.configuration.fetchApi||fetch)(i.url,i.init)}catch(t){for(const r of this.middleware)r.onError&&(o=await r.onError({fetch:this.fetchApi,url:i.url,init:i.init,error:t,response:o?o.clone():void 0})||o);if(void 0===o)throw t instanceof Error?new FetchError(t,"The request failed and the interceptors did not return an alternative response"):t}for(const n of this.middleware)n.post&&(o=await n.post({fetch:this.fetchApi,url:i.url,init:i.init,response:o.clone()})||o);return o},this.middleware=t.middleware}withMiddleware(...t){var e=this.clone();return e.middleware=e.middleware.concat(...t),e}withPreMiddleware(...t){t=t.map(t=>({pre:t}));return this.withMiddleware(...t)}withPostMiddleware(...t){t=t.map(t=>({post:t}));return this.withMiddleware(...t)}isJsonMime(t){return!!t&&BaseAPI.jsonRegex.test(t)}async request(t,e){var{url:t,init:e}=await this.createFetchParams(t,e),t=await this.fetchApi(t,e);if(t&&200<=t.status&&t.status<300)return t;throw new ResponseError(t,"Response returned an error code")}async createFetchParams(t,e){let i=this.configuration.basePath+t.path;void 0!==t.query&&0!==Object.keys(t.query).length&&(i+="?"+this.configuration.queryParamsStringify(t.query));const o=Object.assign({},this.configuration.headers,t.headers);Object.keys(o).forEach(t=>void 0===o[t]?delete o[t]:{});var a="function"==typeof e?e:async()=>e,r={method:t.method,headers:o,body:t.body,credentials:this.configuration.credentials},a={...r,...await a({init:r,context:t})};let n;n=!(isFormData(a.body)||a.body instanceof URLSearchParams||isBlob(a.body))&&this.isJsonMime(o["Content-Type"])?JSON.stringify(a.body):a.body;r={...a,body:n};return{url:i,init:r}}clone(){var t=new this.constructor(this.configuration);return t.middleware=this.middleware.slice(),t}}function isBlob(t){return"undefined"!=typeof Blob&&t instanceof Blob}function isFormData(t){return"undefined"!=typeof FormData&&t instanceof FormData}BaseAPI.jsonRegex=new RegExp("^(:?application/json|[^;/ \t]+/[^;/ \t]+[+]json)[ \t]*(:?;.*)?$","i");class ResponseError extends Error{constructor(t,e){super(e),this.response=t,this.name="ResponseError"}}class FetchError extends Error{constructor(t,e){super(e),this.cause=t,this.name="FetchError"}}class RequiredError extends Error{constructor(t,e){super(e),this.field=t,this.name="RequiredError"}}const COLLECTION_FORMATS={csv:",",ssv:" ",tsv:"\t",pipes:"|"};function exists(t,e){t=t[e];return null!=t}function querystring(e,i=""){return Object.keys(e).map(t=>querystringSingleKey(t,e[t],i)).filter(t=>0<t.length).join("&")}function querystringSingleKey(t,e,i=""){var o,a=i+(i.length?`[${t}]`:t);return e instanceof Array?(o=e.map(t=>encodeURIComponent(String(t))).join(`&${encodeURIComponent(a)}=`),encodeURIComponent(a)+"="+o):e instanceof Set?querystringSingleKey(t,Array.from(e),i):e instanceof Date?encodeURIComponent(a)+"="+encodeURIComponent(e.toISOString()):e instanceof Object?querystring(e,a):encodeURIComponent(a)+"="+encodeURIComponent(String(e))}class JSONApiResponse{constructor(t,e=t=>t){this.raw=t,this.transformer=e}async value(){return this.transformer(await this.raw.json())}}class VoidApiResponse{constructor(t){this.raw=t}async value(){}}function StatusFromJSON(t){return StatusFromJSONTyped(t)}function StatusFromJSONTyped(t,e){return t}function StatusToJSON(t){return t}function NotificationFromJSON(t){return NotificationFromJSONTyped(t)}function NotificationFromJSONTyped(t,e){return null==t?t:{id:exists(t,"id")?t.id:void 0,resourceType:exists(t,"resource_type")?t.resource_type:void 0,subGroup:exists(t,"sub_group")?t.sub_group:void 0,createdAt:exists(t,"created_at")?null===t.created_at?null:new Date(t.created_at):void 0,createdBy:exists(t,"created_by")?t.created_by:void 0,subject:exists(t,"subject")?t.subject:void 0,locations:exists(t,"locations")?t.locations:void 0,resourceId:exists(t,"resource_id")?t.resource_id:void 0,status:exists(t,"status")?StatusFromJSON(t.status):void 0,accountNumber:exists(t,"account_number")?t.account_number:void 0}}function GetNotifications200ResponseFromJSON(t){return GetNotifications200ResponseFromJSONTyped(t)}function GetNotifications200ResponseFromJSONTyped(t,e){return null==t?t:{self:exists(t,"self")?t.self:void 0,first:exists(t,"first")?t.first:void 0,prev:exists(t,"prev")?t.prev:void 0,next:exists(t,"next")?t.next:void 0,last:exists(t,"last")?t.last:void 0,items:t.items.map(NotificationFromJSON)}}function NotificationPatchFromJSON(t){return NotificationPatchFromJSONTyped(t)}function NotificationPatchFromJSONTyped(t,e){return null==t?t:{status:StatusFromJSON(t.status)}}function NotificationPatchToJSON(t){if(void 0!==t)return null===t?null:{status:StatusToJSON(t.status)}}function NotificationRequestToJSON(t){if(void 0!==t)return null===t?null:{resource_type:t.resourceType,sub_group:t.subGroup,recipients:t.recipients,account_number:t.accountNumber,locations:t.locations,resource_id:t.resourceId,subject:t.subject,created_at:void 0===t.createdAt?void 0:null===t.createdAt?null:t.createdAt.toISOString()}}class NotificationsApi extends BaseAPI{async createNotificationRaw(t,e){var i={"Content-Type":"application/json"},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(i.Authorization="Bearer "+o),await this.request({path:"/notifications",method:"POST",headers:i,query:{},body:NotificationRequestToJSON(t.notificationRequest)},e));return new JSONApiResponse(o,t=>NotificationFromJSON(t))}async createNotification(t={},e){return(await this.createNotificationRaw(t,e)).value()}async deleteNotificationsByIdRaw(t,e){if(null===t.id||void 0===t.id)throw new RequiredError("id","Required parameter requestParameters.id was null or undefined when calling deleteNotificationsById.");var i={},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(i.Authorization="Bearer "+o),await this.request({path:"/notifications/{id}".replace("{id}",encodeURIComponent(String(t.id))),method:"DELETE",headers:i,query:{}},e));return new VoidApiResponse(o)}async deleteNotificationsById(t,e){await this.deleteNotificationsByIdRaw(t,e)}async getNotificationsRaw(t,e){var i={},o=(void 0!==t.sort&&(i.sort=t.sort),void 0!==t.cursor&&(i.cursor=t.cursor),void 0!==t.resourceType&&(i.resource_type=t.resourceType),void 0!==t.accountNumber&&(i.account_number=t.accountNumber),void 0!==t.createdAfter&&(i.created_after=t.createdAfter.toISOString()),void 0!==t.createdBefore&&(i.created_before=t.createdBefore.toISOString()),void 0!==t.locationId&&(i.location_id=t.locationId),void 0!==t.subGroup&&(i.sub_group=t.subGroup),void 0!==t.status&&(i.status=t.status),{}),t=(t.prefer&&(o.Prefer=t.prefer.join(COLLECTION_FORMATS.csv)),this.configuration&&this.configuration.accessToken&&(t=await(0,this.configuration.accessToken)("bearerToken",[]))&&(o.Authorization="Bearer "+t),await this.request({path:"/notifications",method:"GET",headers:o,query:i},e));return new JSONApiResponse(t,t=>GetNotifications200ResponseFromJSON(t))}async getNotifications(t={},e){return(await this.getNotificationsRaw(t,e)).value()}async getNotificationsByIdRaw(t,e){if(null===t.id||void 0===t.id)throw new RequiredError("id","Required parameter requestParameters.id was null or undefined when calling getNotificationsById.");var i={},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(i.Authorization="Bearer "+o),await this.request({path:"/notifications/{id}".replace("{id}",encodeURIComponent(String(t.id))),method:"GET",headers:i,query:{}},e));return new JSONApiResponse(o,t=>NotificationFromJSON(t))}async getNotificationsById(t,e){return(await this.getNotificationsByIdRaw(t,e)).value()}async patchNotificationsByIdRaw(t,e){if(null===t.id||void 0===t.id)throw new RequiredError("id","Required parameter requestParameters.id was null or undefined when calling patchNotificationsById.");var i={"Content-Type":"application/json"},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(i.Authorization="Bearer "+o),await this.request({path:"/notifications/{id}".replace("{id}",encodeURIComponent(String(t.id))),method:"PATCH",headers:i,query:{},body:NotificationPatchToJSON(t.notificationPatch)},e));return new JSONApiResponse(o,t=>NotificationPatchFromJSON(t))}async patchNotificationsById(t,e){return(await this.patchNotificationsByIdRaw(t,e)).value()}}const APIEndpointPrefixes={Notifications:"notifications"};class ApiClient{constructor(t){this.noInit=!1,this.configuration=t}get notificationsApi(){return new NotificationsApi(new Configuration({basePath:this.configuration.NotificationApiUrl+"/"+APIEndpointPrefixes.Notifications,headers:{Authorization:this.getAuthorization()}}))}getAuthorization(){return this.configuration.getAuthorizationFn?this.configuration.getAuthorizationFn():""}}const mapResourceTypeToNotificationGroups=t=>{switch(t.toLowerCase()){case"planned maintenance":return NotificationGroups.PLANNED_MAINTENANCE;case"incidents":return NotificationGroups.INCIDENTS;case"dcim alerts":return NotificationGroups.DCIM_ALERTS;case"service tickets":return NotificationGroups.SERVICE_TICKETS;default:return NotificationGroups.PLANNED_MAINTENANCE}},mapStringToNotificationStatus=t=>{switch(t.toLowerCase()){case"unread":return NotificationStatus.UNREAD;case"read":return NotificationStatus.READ;default:return NotificationStatus.UNREAD}},mapParametersToNotificationRequest=t=>({sort:"-created_at",cursor:t,prefer:[""]}),mapParametersToPatchNotificationRequest=(t,e)=>({id:t,notificationPatch:{status:e}}),mapParametersToDeleteNotificationRequest=t=>({id:t}),mapNotificationDataToNotification=t=>{var e;return{subject:null!=(e=t.subject)?e:"",id:t.id,accountNumber:null!=(e=t.accountNumber)?e:"",resourceType:mapResourceTypeToNotificationGroups(null!=(e=t.resourceType)?e:""),subGroup:null!=(e=t.subGroup)?e:"",resourceId:null!=(e=t.resourceId)?e:"",status:mapStringToNotificationStatus(null!=(e=t.status)?e:""),createdAt:null!==t.createdAt&&void 0!==t.createdAt?format(t.createdAt,DefaultDateTimeFormat):format(new Date,DefaultDateTimeFormat),createdBy:null!=(e=t.createdBy)?e:"",locations:null!=(e=t.locations)?e:[]}},mapNotificationResponseToNotifications=t=>t.map(t=>mapNotificationDataToNotification(t)),getNextPageCursorfromQueryParam=t=>{t=new URLSearchParams(t),t=t.has("cursor")?t.get("cursor"):"";return null!==t?t:""},handleError=async(e,t=!0)=>{if(e instanceof ResponseError&&400===e.response.status)try{var i=(await e.response.json())["detail"];t&&console.error(i)}catch(t){console.error(e)}else console.error(e)},getLocalStorageUser=t=>{t=localStorage.getItem(t);return t?JSON.parse(t):null},getUserAuthorization=t=>{return"Bearer "+(null==(t=getLocalStorageUser(t))?void 0:t.access_token)};class NotificationState{constructor(){this.apiClient={noInit:!0},this.baseApiUrl="",this.localStorageKey="",this.NewApiClient=()=>{this.apiClient=new ApiClient({NotificationApiUrl:this.baseApiUrl,getAuthorizationFn:()=>getUserAuthorization(this.localStorageKey)}),this.getNotifications()},this.nextPageCursor="",this.notifications=[],this.unreadNotificationCount=0,this.notificationFilters={SHOW_PLANNED_MAINTENANCE:!0,SHOW_SERVICE_TICKETS:!0,SHOW_DCIM_ALERTS:!0},this.selectedNotification={id:"",resourceType:NotificationGroups.PLANNED_MAINTENANCE,subGroup:"",subject:"",resourceId:"",locations:[],createdAt:"",accountNumber:"",createdBy:"",status:NotificationStatus.READ},this.dateFilters={FROM_DATE:subDays(new Date,DefaultDisplayDays),TO_DATE:new Date},makeAutoObservable(this),makePersistable(this,{name:"notification-state",properties:["notifications","unreadNotificationCount","notificationFilters","dateFilters","nextPageCursor"],storage:window.localStorage})}get isHydrated(){return isHydrated(this)}async hydrateStore(){await hydrateStore(this)}async clearStoredData(){await clearPersistedStore(this)}async getStoredData(){return getPersistedStore(this)}ConstructApiClient(){return this.apiClient.noInit?this.NewApiClient():this.apiClient}async setNotificationReadStatus(e){var t,i=await this.setNotificationAsRead(e.toString());return!0===await i&&(this.ReduceUnreadNotificationCount(),t=this.notifications.findIndex(t=>t.id===e),this.notifications[t].status=NotificationStatus.READ,this.selectedNotification=this.notifications[t]),i}async setNotificationDeleted(e){var t,i=await this.DeleteNotification(e.toString());return!0===i&&("unread"==(null==(t=this.notifications.find(t=>t.id===e))?void 0:t.status)&&this.ReduceUnreadNotificationCount(),t=this.notifications.findIndex(t=>t.id===e),this.notifications.splice(t,1)),{State:!0===i?ApiCallState.SUCCESS:ApiCallState.ERROR,Message:!0===i?"Successfully deleted the notificaion":"Error while deleting the notification"}}setNotificationDateFilter(t,e){this.dateFilters.FROM_DATE=void 0!==t?parse(t,DefaultDateFormat,new Date):void 0,this.dateFilters.TO_DATE=void 0!==e?parse(e,DefaultDateFormat,new Date):void 0}setNotificationFilter(t,e){switch(t){case NotificationGroups.PLANNED_MAINTENANCE:this.notificationFilters.SHOW_PLANNED_MAINTENANCE=e;break;case NotificationGroups.SERVICE_TICKETS:this.notificationFilters.SHOW_SERVICE_TICKETS=e;break;case NotificationGroups.DCIM_ALERTS:this.notificationFilters.SHOW_DCIM_ALERTS=e}}async getNotifications(){var t,e;void 0!==this.nextPageCursor&&(e=await(null==(e=this.apiClient)?void 0:e.notificationsApi.getNotificationsRaw(mapParametersToNotificationRequest(getNextPageCursorfromQueryParam(this.nextPageCursor))).catch(t=>{handleError(t,!1)})))&&(this.unreadNotificationCount=Number(null!=(t=e.raw.headers.get("x-total-unread-count"))?t:"0"),t=await(null==e?void 0:e.value()),this.notifications=""===this.nextPageCursor?mapNotificationResponseToNotifications(null==t?void 0:t.items):this.notifications.concat(mapNotificationResponseToNotifications(null==t?void 0:t.items)),this.nextPageCursor=void 0===(null==t?void 0:t.next)||null==t?void 0:t.next)}async getNotificationsById(t){var e;let i;(i=t?await(null==(e=this.apiClient)?void 0:e.notificationsApi.getNotificationsById({id:t}).catch(t=>{handleError(t,!1)})):i)&&(this.selectedNotification=mapNotificationDataToNotification(i))}async setNotificationAsRead(t){var e;return!!t&&(await(null==(e=this.apiClient)?void 0:e.notificationsApi.patchNotificationsById(mapParametersToPatchNotificationRequest(t,"read")).catch(t=>(handleError(t,!1),!1))),!0)}async DeleteNotification(t){var e;let i=!1;return t&&await(null==(e=this.apiClient)?void 0:e.notificationsApi.deleteNotificationsById(mapParametersToDeleteNotificationRequest(t)).catch(t=>{handleError(t,!1),i=!1}).then(t=>{i=!0})),i}ReduceUnreadNotificationCount(){0<this.unreadNotificationCount&&(this.unreadNotificationCount=this.unreadNotificationCount-1)}}const NotificationsState=new NotificationState,NotificationsStyle=css`.red-icon{--md-icon-button-icon-color:var(--md-sys-color-error);--md-sys-color-on-surface-variant:var(--md-sys-color-error)}.blue-icon{--md-icon-button-icon-color:var(--ix-sys-primary);--md-sys-color-on-surface-variant:var(--ix-sys-primary)}.grey-icon{--md-icon-button-icon-color:var(--md-sys-color-tertiary);--md-sys-color-on-surface-variant:var(--md-sys-color-tertiary);cursor:default}.notification-item-read,.notification-item-unread{position:relative;display:flex;flex-direction:row;flex-grow:1;padding:.5rem .75rem 1rem 1rem;background-color:#fff;font-weight:700;cursor:pointer;align-items:center}.notification-item-unread{border-left:3px solid var(--ix-button-confirm-color);padding-left:14px}.notification-item-read:hover,.notification-item-unread:hover{cursor:pointer;background-color:rgba(0,0,0,.04)}.group-container-row{display:block;font-size:12px;padding:12px 0 12px 0;margin-top:0;margin-bottom:0;border-bottom:#e1e4e8 inset 1px;color:var(--md-sys-text-color-primary);font-weight:400;font-size:15px;line-height:20px;letter-spacing:.15px}.group-name{line-height:24px;color:var(--md-sys-text-color-primary)}.group-item-name{display:grid;grid-template-columns:1fr 20%;gap:16px;-webkit-box-align:center;align-items:center;-webkit-box-flex:1;flex-grow:1;padding-top:5px}.notification-items-container{padding:0}.ix-icon-groups{--ix-icon-font-size:32px;--ix-icon-line-height:32px;color:var(--md-sys-text-color-primary)}:host{--ix-drawer-border-radius:0;--ix-drawer-padding:0;--ix-draw-width-sm:50vw;--ix-draw-width-lg:30vw}.ix-switch-wrapper{margin:4px;padding:4px;display:flex;column-gap:.75rem;align-items:center}ix-switch{--md-switch-selected-handle-color:var(--ix-sys-primary);--md-switch-selected-pressed-handle-color:var(--ix-sys-primary);--md-switch-selected-hover-handle-color:var(--ix-sys-primary);--md-switch-selected-focus-handle-color:var(--ix-sys-primary);--md-switch-selected-track-color:#7ba0ee;--md-switch-selected-pressed-track-color:#7ba0ee;--md-switch-selected-hover-track-color:#7ba0ee;--md-switch-selected-focus-track-color:#7ba0ee;--md-switch-track-height:14px;--md-switch-track-width:36px;--md-switch-track-outline-width:0;--md-switch-handle-color:white;--md-switch-pressed-handle-color:white;--md-switch-hover-handle-color:white;--md-switch-focus-handle-color:white;--md-switch-handle-width:20px;--md-switch-handle-height:20px;display:flex}.datefilter-dropdown-content,.filter-dropdown-content{display:none;position:absolute;right:5%;top:3rem;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:3;transition:box-shadow .3s cubic-bezier(.4,0,.2,1) 0s;border-radius:3px;box-shadow:rgba(0,0,0,.2) 0 5px 5px -3px,rgba(0,0,0,.14) 0 8px 10px 1px,rgba(0,0,0,.12) 0 3px 14px 2px;background-color:#fff}.filter-dropdown-content.active{display:inline}.datefilter-dropdown-content.active{display:inline}.modal-text-blue{color:var(--ix-sys-primary);padding-left:1.8rem;font-weight:700}.unread{font-family:'Open Sans',sans-serif;padding:0 5px;font-size:12px;line-height:16px;left:22px;top:0;background:var(--ix-button-cancel-color,#db0028)}.notification-header{font-family:'Red Hat Display',sans-serif;padding:20px 16px;font-weight:770;font-size:20px;line-height:24px}h3{font-family:'Open Sans',sans-serif;font-size:16px;font-weight:400;line-height:20px;letter-spacing:.15px;text-align:left;padding:8px 16px}.empty{margin:8px 0 8px 16px;font-family:"Open Sans",sans-serif;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px;color:#092241;font-weight:400}.notifification-item ix-icon-button{padding:12px}.options{padding-right:1rem;position:relative}`;let ConfirmationDialog=class extends MobxLitElement{constructor(){super(...arguments),this.textMessage="Are you sure?",this.open=!1,this.dialogClosed=()=>{this.dispatchEvent(new CustomEvent("confirm-dialog-closed"))}}static get styles(){return[NotificationsStyle,elementTheme,baseTheme,TWStyles]}onClick(t){t=new CustomEvent("on-confirm-selection",{detail:{returnValue:t},bubbles:!0,composed:!0});this.dispatchEvent(t)}render(){return html`<ix-dialog ?open="${this.open}" class="w-[580px]" @closed="${this.dialogClosed}"><div slot="headline"><div class="p-4 text-xl font-bold">${this.textMessage}</div></div><div slot="actions"><div class="flex flex-row justify-end p-1"><ix-button name="cancel" appearance="text" @click="${()=>this.onClick(!1)}">DISMISS</ix-button><ix-button name="confirm" appearance="text" @click="${()=>this.onClick(!0)}">YES</ix-button></div></div></ix-dialog>`}},ViewItemDialog=(__decorate([property({type:String,attribute:!0})],ConfirmationDialog.prototype,"textMessage",void 0),__decorate([property({type:Boolean,attribute:!0})],ConfirmationDialog.prototype,"open",void 0),ConfirmationDialog=__decorate([customElement("confirmation-dialog")],ConfirmationDialog),class extends MobxLitElement{constructor(){super(...arguments),this.notificaiton={},this.open=!1,this.dialogClosed=()=>{this.dispatchEvent(new CustomEvent("view-item-dialog-closed"))}}static get styles(){return[NotificationsStyle,elementTheme,TWStyles]}getUrl(){var t=this.notificaiton.id;switch(this.notificaiton.resourceType){case NotificationGroups.PLANNED_MAINTENANCE:return"/service-management/planned-maintenance/"+t;case NotificationGroups.SERVICE_TICKETS:return"/service-management/service-tickets/"+t;case NotificationGroups.INCIDENTS:return"/service-management/incidents/"+t;case NotificationGroups.DCIM_ALERTS:return"/dcim/"+t;default:return""}}getLocation(){return void 0===this.notificaiton.locations||this.notificaiton.locations.length<1?"":1<this.notificaiton.locations.length?"Multiple Locations":this.notificaiton.locations[0]}render(){return html`<ix-dialog ?open="${this.open}" class="w-[480px]" @closed="${this.dialogClosed}"><div class="flex flex-col px-16" slot="headline"><label class="text-xl font-bold w-[480px] py-2">${this.notificaiton.resourceType}</label> <label class="text-sm font-bold w-[480px] py-2">${this.notificaiton.subGroup}</label></div><form class="w-[480px] px-16" slot="content" id="form-id" method="dialog"><div class="flex flex-row py-1"><div class="py-1 w-[100px]">Subject</div><div class="grow py-1 pl-11 font-semibold">${this.notificaiton.subject}</div></div><div class="flex flex-row py-1"><div class="py-1 w-[100px]">Create Date</div><div class="grow py-1 pl-11 font-semibold">${format(this.notificaiton.createdAt,"dd/MM/yyyy HH:mm:ss")}</div></div><div class="flex flex-row py-1"><div class="py-1 w-[100px]">Site</div><div class="grow py-1 pl-11 font-semibold">${this.getLocation()}</div></div></form><div slot="actions" class="flex flex-row flex-end px-16 py-8"><button form="form-id" class="modal-text-blue">CLOSE</button> <a href="${this.getUrl()}" class="modal-text-blue">VIEW RECORD</a></div></ix-dialog>`}}),NotificationItem=(__decorate([property({type:Object,attribute:!1})],ViewItemDialog.prototype,"notificaiton",void 0),__decorate([property({type:Boolean,attribute:!0})],ViewItemDialog.prototype,"open",void 0),ViewItemDialog=__decorate([customElement("view-item-dialog")],ViewItemDialog),class extends MobxLitElement{constructor(){super(...arguments),this.disabled=!1,this.notificaiton={},this.showModal=!1,this.showDeleteConfirmation=!1}static get styles(){return[NotificationsStyle,elementTheme,TWStyles,css`.notification-item-read h2{font-family:'Open Sans',sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:.4px;text-align:left}.notification-item-unread h2{font-family:'Open Sans',sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:.4px;text-align:left}h3{font-family:'Open Sans',sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:.4px;text-align:left;color:rgba(9,34,65,.6);padding:0}ix-icon{--ix-icon-font-size:24px;--ix-icon-line-height:24px;color:var(--md-sys-text-color-primary)}.notification-item-read ix-icon{margin-right:12px;color:rgba(9,34,65)}.notification-item-unread ix-icon{margin-right:12px;color:#1456e0}`]}displayItem(){this.notificaiton.status===NotificationStatus.UNREAD&&NotificationsState.setNotificationReadStatus(this.notificaiton.id),this.showModal=!0}deleteItem(){this.disabled||(this.showDeleteConfirmation=!0)}confirmedDelete(t){t.detail.returnValue&&NotificationsState.setNotificationDeleted(this.notificaiton.id).then(t=>{this.showDeleteResultMessage(t,this.notificaiton.id)}),this.showDeleteConfirmation=!1}showDeleteResultMessage(t,e){window.dispatchEvent(new CustomEvent("add-toast",{detail:{id:e,content:html`<ix-message-toast toastId="${e}" .TMessageToast="${t.State.toLowerCase()}" forceClose>${t.Message}</ix-message-toast>`,autoClose:2e3,durationOut:2e3,vertical:"bottom",horizontal:"center",animated:!0,above:!1}}))}calculateDuration(){return void 0!==this.notificaiton.createdAt?differenceInHours(new Date,this.notificaiton.createdAt)<24?formatDistance(this.notificaiton.createdAt,new Date,{addSuffix:!0}):format(this.notificaiton.createdAt,DefaultDateTimeFormat):"NA"}GetNotificationIcon(){switch(this.notificaiton.resourceType){case NotificationGroups.PLANNED_MAINTENANCE:return"lab_profile";case NotificationGroups.SERVICE_TICKETS:return"dvr";case NotificationGroups.INCIDENTS:return"emergency_home";case NotificationGroups.DCIM_ALERTS:return"public";default:return"sync_saved_locally"}}render(){var t;return html`<div class="relative bg-white-gp notification-item"><div class="${"unread"===(null==(t=this.notificaiton)?void 0:t.status)?"notification-item-unread":"notification-item-read"}"><ix-icon icon="${this.GetNotificationIcon()}" class="${"unread"===(null==(t=this.notificaiton)?void 0:t.status)?"blue-icon":"grey-icon"}" @click="${this.displayItem}">${this.GetNotificationIcon()}</ix-icon><div class="flex flex-col grow" @click="${this.displayItem}"><div class="grow text-base"><h2>${null==(t=this.notificaiton)?void 0:t.resourceType}</h2></div><div class="grow text-xs"><h3>${this.calculateDuration()}</h3></div></div><div><view-item-dialog ?open="${this.showModal}" .notificaiton="${this.notificaiton}" @view-item-dialog-closed="${()=>{this.showModal=!1}}"></view-item-dialog><confirmation-dialog ?open="${this.showDeleteConfirmation}" @on-confirm-selection="${this.confirmedDelete}" @confirm-dialog-closed="${()=>{this.showModal=!1}}" textMessage="Are you sure you want to delete this notification?"></confirmation-dialog></div><ix-icon-button @click="${this.deleteItem}" icon="delete" class="${this.disabled?"grey-icon":"red-icon"}"></ix-icon-button></div></div>`}}),GroupedItem=(__decorate([property({type:Boolean})],NotificationItem.prototype,"disabled",void 0),__decorate([property({type:Object,attribute:!1})],NotificationItem.prototype,"notificaiton",void 0),__decorate([state()],NotificationItem.prototype,"showModal",void 0),__decorate([state()],NotificationItem.prototype,"showDeleteConfirmation",void 0),NotificationItem=__decorate([customElement("notification-item")],NotificationItem),class extends MobxLitElement{constructor(){super(...arguments),this.groupTitle="Group 1",this.iconName="public",this.childItems=NotificationsState.notifications,this.isOpen=!1,this.onClick=()=>{this.isOpen=!this.isOpen}}static get styles(){return[NotificationsStyle,baseTheme,TWStyles]}renderNotificationItems(){var t;return this.isOpen?void 0!==(null==(t=this.childItems)?void 0:t.length)&&0<(null==(t=this.childItems)?void 0:t.length)?html`<div class="notification-items-container">${null==(t=this.childItems)?void 0:t.map(t=>html`<notification-item .notificaiton="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}"></notification-item>`)}</div>`:html`<p class="m-0 pl-8 font-bold mr-4"><small style="padding-left:16px">No notifications yet.</small></p>`:html`${nothing}`}render(){var t;return html`<div class="group-container-row"><div class="flex items-center justify-between"><div class="flex items-center align-middle"><ix-icon-button icon="${this.isOpen?"arrow_drop_down":"arrow_right"}" @click="${this.onClick}"></ix-icon-button><ix-icon class="ix-icon-groups">${this.iconName}</ix-icon><p class="m-0 group-name font-bold pl-1">${this.groupTitle}</p><p class="m-0 pl-4">${null==(t=this.childItems)?void 0:t.length.toString().padStart(2,"0")}</p></div></div>${this.renderNotificationItems()}</div>`}}),GroupFilters=(__decorate([property({type:String,attribute:!0})],GroupedItem.prototype,"groupTitle",void 0),__decorate([property({type:String,attribute:!0})],GroupedItem.prototype,"iconName",void 0),__decorate([property({type:Array,attribute:!0})],GroupedItem.prototype,"childItems",void 0),__decorate([state()],GroupedItem.prototype,"isOpen",void 0),GroupedItem=__decorate([customElement("grouped-item")],GroupedItem),class extends MobxLitElement{static get styles(){return[NotificationsStyle,TWStyles,css`:host{--md-switch-state-layer-size:1rem;--md-switch-hover-handle-width:1rem;--md-switch-hover-handle-height:1rem;--md-switch-pressed-handle-width:1rem;--md-switch-pressed-handle-height:1rem;--md-switch-selected-handle-width:1.3rem;--md-switch-selected-handle-height:1.3rem;--md-switch-handle-width:0.5rem;--md-switch-handle-height:0.5rem;--md-switch-track-width:2.5rem;--md-switch-track-height:1rem}`]}onSwitchChange(t){var t=t.target,e=null==(e=t.attributes.getNamedItem("name"))?void 0:e.value;NotificationsState.setNotificationFilter(e,t.selected),this.requestUpdate()}render(){return html`<div class="flex flex-col items-start p-2"><div class="ix-switch-wrapper"><ix-switch name="${NotificationGroups.PLANNED_MAINTENANCE}" selected="${NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE}" @change="${this.onSwitchChange}"></ix-switch><label class="pl-1">${NotificationGroups.PLANNED_MAINTENANCE}</label></div><div class="ix-switch-wrapper"><ix-switch name="${NotificationGroups.SERVICE_TICKETS}" selected="${NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS}" @change="${this.onSwitchChange}"></ix-switch><label class="pl-1">${NotificationGroups.SERVICE_TICKETS}</label></div><div class="ix-switch-wrapper"><ix-switch name="${NotificationGroups.DCIM_ALERTS}" selected="${NotificationsState.notificationFilters.SHOW_DCIM_ALERTS}" @change="${this.onSwitchChange}"></ix-switch><label class="pl-1">${NotificationGroups.DCIM_ALERTS}</label></div></div>`}}),DateFilters=(GroupFilters=__decorate([customElement("group-filters")],GroupFilters),class extends MobxLitElement{constructor(){super(...arguments),this.fromDate=formatDate(NotificationsState.dateFilters.FROM_DATE,DefaultDateFormat)||void 0,this.toDate=formatDate(NotificationsState.dateFilters.TO_DATE,DefaultDateFormat)||void 0,this.maxDate=formatDate(new Date,DefaultDateFormat),this.fromDateErrorText="",this.toDateErrorText=""}static get styles(){return[NotificationsStyle,baseTheme,elementTheme,TWStyles]}onFromDateChange(t){this.fromDate=t,this.fromDate>this.toDate?(this.fromDateErrorText="From date cannot be later than To date.",this.fromDate=void 0):this.fromDateErrorText=void 0,this.toDate<this.fromDate?(this.toDateErrorText="To date cannot be earlier than From date.",this.toDate=void 0):this.toDateErrorText=void 0}onToDateChange(t){this.toDate=t,this.toDate<this.fromDate?(this.toDateErrorText="To date cannot be earlier than From date.",this.toDate=void 0):this.toDateErrorText=void 0,this.fromDate>this.toDate?(this.fromDateErrorText="From date cannot be later than To date.",this.fromDate=void 0):this.fromDateErrorText=void 0}onApplyDateFilter(t){t=t&&void 0===this.toDateErrorText&&void 0===this.fromDateErrorText,t&&(NotificationsState.setNotificationDateFilter(this.fromDate,this.toDate),this.requestUpdate()),t=new CustomEvent("on-selection",{detail:{returnValue:t},bubbles:!0,composed:!0});this.dispatchEvent(t)}clearDateFilters(){this.fromDate=void 0,this.toDate=void 0,this.fromDateErrorText=void 0,this.toDateErrorText=void 0}render(){return html`<div class="flex flex-col p-2"><div class="flex flex-row text-justify"><div class="grow items-center text-xl font-bold text-left p-2">Filter by Date</div><div class="flex flex-row items-center p-2" @click="${this.clearDateFilters}"><label class="grow text-sm text-right pr-1 cursor-pointer">Cleare Filter</label><ix-icon-button appearance="default" icon="domain_verification_off" class="blue-icon"></ix-icon-button></div></div><ix-divider class="px-2"></ix-divider><div class="flex xl:flex-row lg:flex-col md:flex-col sm:flex-col justify-between item-center p-2"><div class="p-2"><ix-date .value="${this.fromDate}" max="${this.maxDate}" label="From" name="FromDate" .errorText="${this.fromDateErrorText}" .onChanged="${t=>this.onFromDateChange(t)}"></ix-date></div><div class="p-2"><ix-date .value="${this.toDate}" max="${this.maxDate}" label="To" name="ToDate" .errorText="${this.toDateErrorText}" .onChanged="${t=>this.onToDateChange(t)}"></ix-date></div></div><div class="flex flex-row justify-between p-2"><ix-button type="" target="" appearance="text" @click="${()=>this.onApplyDateFilter(!1)}">Cancel</ix-button><ix-button type="" target="" appearance="text" @click="${()=>this.onApplyDateFilter(!0)}">Filter List</ix-button></div></div>`}});__decorate([state()],DateFilters.prototype,"fromDate",void 0),__decorate([state()],DateFilters.prototype,"toDate",void 0),__decorate([state()],DateFilters.prototype,"maxDate",void 0),__decorate([state()],DateFilters.prototype,"fromDateErrorText",void 0),__decorate([state()],DateFilters.prototype,"toDateErrorText",void 0),DateFilters=__decorate([customElement("date-filters")],DateFilters);class IxNotifications extends MobxLitElement{constructor(){super(...arguments),this.showDrawer=!1,this.showGroupedView=!1,this.showFilters=!1,this.showDateFilters=!1,this.showMarkAllReadConfirmation=!1,this.baseApiUrl="",this.localStorageKey=""}async firstUpdated(){NotificationsState.baseApiUrl=this.baseApiUrl,NotificationsState.localStorageKey=this.localStorageKey,NotificationsState.ConstructApiClient()}connectedCallback(){super.connectedCallback(),window.addEventListener("account-switched",NotificationsState.NewApiClient)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("account-switched",NotificationsState.NewApiClient)}toggleDrawer(){this.showDrawer=!this.showDrawer,this.showDrawer||(this.showFilters=!1,this.showDateFilters=!1)}renderUnReadCountText(){if(NotificationsState.unreadNotificationCount<=0)return html`${nothing}`;let t="";return t=99<NotificationsState.unreadNotificationCount?"99+":NotificationsState.unreadNotificationCount.toString(),html`<div class="unread rounded-full text-center text-white text-sm absolute icon-position -start-0">${t}</div>`}markAllread(){this.showMarkAllReadConfirmation=!0}confirmedMarkAllRead(t){if(t.detail.returnValue){var t=this.applyNotificationFilters(),i=null==t?void 0:t.filter(t=>t.status===NotificationStatus.UNREAD);if(0<i.length){let e=!0;null!=t&&t.forEach(t=>{NotificationsState.setNotificationReadStatus(t.id).then(t=>{e=e&&t})});t={State:!0===e?ApiCallState.SUCCESS:ApiCallState.ERROR,Message:!0===e?"Successfully marked all the notificaions as read":"Error while marking the notifications read, Please try again"};this.showResultMessage(t,i[0].id),this.renderUnReadCountText(),this.requestUpdate()}}this.showMarkAllReadConfirmation=!1}showResultMessage(t,e){window.dispatchEvent(new CustomEvent("add-toast",{detail:{id:e,content:html`<ix-message-toast toastId="${e}" .TMessageToast="${t.State.toLowerCase()}" forceClose>${t.Message}</ix-message-toast>`,autoClose:3e3,durationOut:3e3,vertical:"bottom",horizontal:"center",animated:!0,above:!1}}))}toggleGroupView(){this.showGroupedView=!this.showGroupedView}displayFilters(){this.showFilters=!this.showFilters}applyNotificationFilters(){var t=null==(t=NotificationsState.notifications)?void 0:t.filter(t=>t.resourceType===NotificationGroups.PLANNED_MAINTENANCE&&!0===NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE||t.resourceType===NotificationGroups.SERVICE_TICKETS&&!0===NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS||t.resourceType===NotificationGroups.DCIM_ALERTS&&!0===NotificationsState.notificationFilters.SHOW_DCIM_ALERTS||t.resourceType===NotificationGroups.INCIDENTS);return void 0===NotificationsState.dateFilters.FROM_DATE&&void 0===NotificationsState.dateFilters.TO_DATE?t:void 0===NotificationsState.dateFilters.FROM_DATE?t.filter(t=>differenceInDays(new Date(t.createdAt),NotificationsState.dateFilters.TO_DATE)<=0):void 0===NotificationsState.dateFilters.TO_DATE?t.filter(t=>0<=differenceInHours(new Date(t.createdAt),NotificationsState.dateFilters.FROM_DATE)):t.filter(t=>0<=differenceInHours(new Date(t.createdAt),NotificationsState.dateFilters.FROM_DATE)&&differenceInDays(new Date(t.createdAt),NotificationsState.dateFilters.TO_DATE)<=0)}displayDateFilters(){this.showDateFilters=!this.showDateFilters}renderGroupedView(){var t=this.applyNotificationFilters();return html`<div style="margin:0"><grouped-item groupTitle="${NotificationGroups.PLANNED_MAINTENANCE}" iconName="lab_profile" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.PLANNED_MAINTENANCE)}"></grouped-item><grouped-item groupTitle="${NotificationGroups.INCIDENTS}" iconName="emergency_home" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.INCIDENTS)}"></grouped-item><grouped-item groupTitle="${NotificationGroups.SERVICE_TICKETS}" iconName="dvr" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.SERVICE_TICKETS)}"></grouped-item><grouped-item groupTitle="${NotificationGroups.DCIM_ALERTS}" iconName="public" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.DCIM_ALERTS)}"></grouped-item></div>`}renderDefaultView(){var t=this.applyNotificationFilters(),e=t.filter(t=>0===differenceInDays(t.createdAt,new Date)),i=t.filter(t=>0!==differenceInDays(t.createdAt,new Date));return 0<(null==t?void 0:t.length)?html`<h3 class="grow">Latest</h3><div class="m-0 p-0">${0<e.length?null==e?void 0:e.map(t=>html`<notification-item .notificaiton="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}"></notification-item>`):this.renderNoResult()}</div><h3 class="grow">Earlier</h3><div>${0<i.length?null==i?void 0:i.map(t=>html`<notification-item .notificaiton="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}"></notification-item>`):this.renderNoResult()}</div>`:html`<p class="empty">No notifications yet.</p>`}renderNoResult(){return html`<p class="empty">No notifications yet.</p>`}handleCloseClick(t){this.showDateFilters=!1,this.showFilters=!1}handleContentScroll(t){null!==t&&t.detail.scrollTop+t.detail.clientHeight>=t.detail.scrollHeight&&NotificationsState.getNotifications()}manageFilterVisibility(t){t=t.composedPath();!this.showFilters||t.includes(this.groupFilters)||t.includes(this.groupFiltersButton)||(this.showFilters=!1),!this.showDateFilters||t.includes(this.dateFilters)||t.includes(this.dateFiltersButton)||(this.showDateFilters=!1)}render(){return html`<div class="relative"><ix-icon-button class="blue-icon" @click="${()=>this.toggleDrawer()}"><slot name="icon" slot="default"></slot></ix-icon-button>${this.renderUnReadCountText()}</div><confirmation-dialog ?open="${this.showMarkAllReadConfirmation}" @confirm-dialog-closed="${()=>{this.showMarkAllReadConfirmation=!1}}" @on-confirm-selection="${this.confirmedMarkAllRead}" textMessage="Are you sure you want to mark all notifications as read?"></confirmation-dialog><ix-drawer ?isVisible="${this.showDrawer}" .onClosed="${()=>this.toggleDrawer()}" animate-vertical hide-close @on-content-scroll="${this.handleContentScroll}" @click="${this.manageFilterVisibility}"><div class="flex flex-row justify-between grow py-2" slot="header"><h2 class="grow items-center notification-header">Notifications</h2><div class="flex flex-row justify-end grow items-center options"><ix-icon-button @click="${this.markAllread}" icon="markunread_mailbox" class="blue-icon"></ix-icon-button><ix-icon-button @click="${this.toggleGroupView}" icon="sort" class="blue-icon"></ix-icon-button><ix-icon-button @click="${this.displayFilters}" icon="list" class="blue-icon" id="group-filter-button"></ix-icon-button><div class="filter-dropdown-content ${this.showFilters?"active z-50":""}"><group-filters></group-filters></div><ix-icon-button @click="${this.displayDateFilters}" icon="calendar_month" class="blue-icon" id="date-filters-button"></ix-icon-button><div class="datefilter-dropdown-content ${this.showDateFilters?"active z-50":""}" @on-selection="${this.handleCloseClick}"><date-filters></date-filters></div></div></div><div slot="content">${this.showGroupedView?this.renderGroupedView():this.renderDefaultView()}</div></ix-drawer>`}}IxNotifications.styles=[TWStyles,NotificationsStyle],__decorate([query("group-filters")],IxNotifications.prototype,"groupFilters",void 0),__decorate([query("ix-icon-button#group-filter-button")],IxNotifications.prototype,"groupFiltersButton",void 0),__decorate([query("date-filters")],IxNotifications.prototype,"dateFilters",void 0),__decorate([query("ix-icon-button#date-filters-button")],IxNotifications.prototype,"dateFiltersButton",void 0),__decorate([state()],IxNotifications.prototype,"showDrawer",void 0),__decorate([state()],IxNotifications.prototype,"showGroupedView",void 0),__decorate([state()],IxNotifications.prototype,"showFilters",void 0),__decorate([state()],IxNotifications.prototype,"showDateFilters",void 0),__decorate([state()],IxNotifications.prototype,"showMarkAllReadConfirmation",void 0),__decorate([property({type:String})],IxNotifications.prototype,"baseApiUrl",void 0),__decorate([property({type:String})],IxNotifications.prototype,"localStorageKey",void 0),window.customElements.define("ix-notifications",IxNotifications);
+import{__decorate}from"tslib";import{css,html,nothing}from"lit";import{property,customElement,state,query}from"lit/decorators.js";import{MobxLitElement}from"@adobe/lit-mobx";import{format,subDays,parse,differenceInHours,formatDistance,differenceInDays}from"date-fns";import"@digital-realty/ix-button/ix-button.js";import"@digital-realty/ix-drawer/ix-drawer.js";import"@digital-realty/ix-icon";import"@material/web/icon/icon.js";import{makeAutoObservable}from"mobx";import{makePersistable,isHydrated,hydrateStore,clearPersistedStore,getPersistedStore}from"mobx-persist-store";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-icon/ix-icon.js";import{elementTheme,baseTheme}from"@digital-realty/theme";import"@digital-realty/ix-toast/ix-message-toast.js";import"@digital-realty/ix-switch/ix-switch.js";import"@digital-realty/ix-date/ix-date.js";import"@digital-realty/ix-divider/ix-divider.js";const TWStyles=css`*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Open Sans,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::after,::before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.absolute{position:absolute}.relative{position:relative}.-start-0{inset-inline-start:0}.z-50{z-index:50}.m-0{margin:0}.mr-4{margin-right:1rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.w-\\[100px\\]{width:100px}.w-\\[480px\\]{width:480px}.w-\\[580px\\]{width:580px}.flex-grow{flex-grow:1}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.rounded-full{border-radius:9999px}.border{border-width:1px}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-16{padding-left:4rem;padding-right:4rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-2{padding-bottom:.5rem}.pl-1{padding-left:.25rem}.pl-11{padding-left:2.75rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pl-8{padding-left:2rem}.pr-1{padding-right:.25rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.underline{text-decoration-line:underline}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}@media (min-width:640px){.sm\\:flex-col{flex-direction:column}}@media (min-width:768px){.md\\:flex-col{flex-direction:column}}@media (min-width:1024px){.lg\\:flex-col{flex-direction:column}}@media (min-width:1280px){.xl\\:flex-row{flex-direction:row}}`;var NotificationStatus,NotificationGroups,ApiCallState;!function(t){t.READ="read",t.UNREAD="unread"}(NotificationStatus=NotificationStatus||{}),function(t){t.PLANNED_MAINTENANCE="Planned Maintenance",t.INCIDENTS="Incidents",t.DCIM_ALERTS="DCIM Alerts",t.SERVICE_TICKETS="Service Tickets"}(NotificationGroups=NotificationGroups||{}),function(t){t.LOADING="Loading",t.ERROR="Error",t.SUCCESS="Success"}(ApiCallState=ApiCallState||{});const DefaultDateFormat="yyyy-MM-dd",DefaultDisplayDays=30,DefaultDateTimeFormat="yyyy-MM-dd HH:mm:ss",BASE_PATH="http://api.digitalrealty.com/notifications".replace(/\/+$/,"");class Configuration{constructor(t={}){this.configuration=t}set config(t){this.configuration=t}get basePath(){return null!=this.configuration.basePath?this.configuration.basePath:BASE_PATH}get fetchApi(){return this.configuration.fetchApi}get middleware(){return this.configuration.middleware||[]}get queryParamsStringify(){return this.configuration.queryParamsStringify||querystring}get username(){return this.configuration.username}get password(){return this.configuration.password}get apiKey(){const t=this.configuration.apiKey;if(t)return"function"==typeof t?t:()=>t}get accessToken(){const t=this.configuration.accessToken;if(t)return"function"==typeof t?t:async()=>t}get headers(){return this.configuration.headers}get credentials(){return this.configuration.credentials}}const DefaultConfig=new Configuration;class BaseAPI{constructor(t=DefaultConfig){this.configuration=t,this.fetchApi=async(t,i)=>{let e={url:t,init:i};for(const a of this.middleware)a.pre&&(e=await a.pre({fetch:this.fetchApi,...e})||e);let o=void 0;try{o=await(this.configuration.fetchApi||fetch)(e.url,e.init)}catch(t){for(const r of this.middleware)r.onError&&(o=await r.onError({fetch:this.fetchApi,url:e.url,init:e.init,error:t,response:o?o.clone():void 0})||o);if(void 0===o)throw t instanceof Error?new FetchError(t,"The request failed and the interceptors did not return an alternative response"):t}for(const n of this.middleware)n.post&&(o=await n.post({fetch:this.fetchApi,url:e.url,init:e.init,response:o.clone()})||o);return o},this.middleware=t.middleware}withMiddleware(...t){var i=this.clone();return i.middleware=i.middleware.concat(...t),i}withPreMiddleware(...t){t=t.map(t=>({pre:t}));return this.withMiddleware(...t)}withPostMiddleware(...t){t=t.map(t=>({post:t}));return this.withMiddleware(...t)}isJsonMime(t){return!!t&&BaseAPI.jsonRegex.test(t)}async request(t,i){var{url:t,init:i}=await this.createFetchParams(t,i),t=await this.fetchApi(t,i);if(t&&200<=t.status&&t.status<300)return t;throw new ResponseError(t,"Response returned an error code")}async createFetchParams(t,i){let e=this.configuration.basePath+t.path;void 0!==t.query&&0!==Object.keys(t.query).length&&(e+="?"+this.configuration.queryParamsStringify(t.query));const o=Object.assign({},this.configuration.headers,t.headers);Object.keys(o).forEach(t=>void 0===o[t]?delete o[t]:{});var a="function"==typeof i?i:async()=>i,r={method:t.method,headers:o,body:t.body,credentials:this.configuration.credentials},a={...r,...await a({init:r,context:t})};let n;n=!(isFormData(a.body)||a.body instanceof URLSearchParams||isBlob(a.body))&&this.isJsonMime(o["Content-Type"])?JSON.stringify(a.body):a.body;r={...a,body:n};return{url:e,init:r}}clone(){var t=new this.constructor(this.configuration);return t.middleware=this.middleware.slice(),t}}function isBlob(t){return"undefined"!=typeof Blob&&t instanceof Blob}function isFormData(t){return"undefined"!=typeof FormData&&t instanceof FormData}BaseAPI.jsonRegex=new RegExp("^(:?application/json|[^;/ \t]+/[^;/ \t]+[+]json)[ \t]*(:?;.*)?$","i");class ResponseError extends Error{constructor(t,i){super(i),this.response=t,this.name="ResponseError"}}class FetchError extends Error{constructor(t,i){super(i),this.cause=t,this.name="FetchError"}}class RequiredError extends Error{constructor(t,i){super(i),this.field=t,this.name="RequiredError"}}const COLLECTION_FORMATS={csv:",",ssv:" ",tsv:"\t",pipes:"|"};function exists(t,i){t=t[i];return null!=t}function querystring(i,e=""){return Object.keys(i).map(t=>querystringSingleKey(t,i[t],e)).filter(t=>0<t.length).join("&")}function querystringSingleKey(t,i,e=""){var o,a=e+(e.length?`[${t}]`:t);return i instanceof Array?(o=i.map(t=>encodeURIComponent(String(t))).join(`&${encodeURIComponent(a)}=`),encodeURIComponent(a)+"="+o):i instanceof Set?querystringSingleKey(t,Array.from(i),e):i instanceof Date?encodeURIComponent(a)+"="+encodeURIComponent(i.toISOString()):i instanceof Object?querystring(i,a):encodeURIComponent(a)+"="+encodeURIComponent(String(i))}class JSONApiResponse{constructor(t,i=t=>t){this.raw=t,this.transformer=i}async value(){return this.transformer(await this.raw.json())}}class VoidApiResponse{constructor(t){this.raw=t}async value(){}}function StatusFromJSON(t){return StatusFromJSONTyped(t)}function StatusFromJSONTyped(t,i){return t}function StatusToJSON(t){return t}function NotificationFromJSON(t){return NotificationFromJSONTyped(t)}function NotificationFromJSONTyped(t,i){return null==t?t:{id:exists(t,"id")?t.id:void 0,resourceType:exists(t,"resource_type")?t.resource_type:void 0,subGroup:exists(t,"sub_group")?t.sub_group:void 0,createdAt:exists(t,"created_at")?null===t.created_at?null:new Date(t.created_at):void 0,createdBy:exists(t,"created_by")?t.created_by:void 0,subject:exists(t,"subject")?t.subject:void 0,locations:exists(t,"locations")?t.locations:void 0,resourceId:exists(t,"resource_id")?t.resource_id:void 0,status:exists(t,"status")?StatusFromJSON(t.status):void 0,accountNumber:exists(t,"account_number")?t.account_number:void 0}}function GetNotifications200ResponseFromJSON(t){return GetNotifications200ResponseFromJSONTyped(t)}function GetNotifications200ResponseFromJSONTyped(t,i){return null==t?t:{self:exists(t,"self")?t.self:void 0,first:exists(t,"first")?t.first:void 0,prev:exists(t,"prev")?t.prev:void 0,next:exists(t,"next")?t.next:void 0,last:exists(t,"last")?t.last:void 0,items:t.items.map(NotificationFromJSON)}}function NotificationPatchFromJSON(t){return NotificationPatchFromJSONTyped(t)}function NotificationPatchFromJSONTyped(t,i){return null==t?t:{status:StatusFromJSON(t.status)}}function NotificationPatchToJSON(t){if(void 0!==t)return null===t?null:{status:StatusToJSON(t.status)}}function NotificationRequestToJSON(t){if(void 0!==t)return null===t?null:{resource_type:t.resourceType,sub_group:t.subGroup,recipients:t.recipients,account_number:t.accountNumber,locations:t.locations,resource_id:t.resourceId,subject:t.subject,created_at:void 0===t.createdAt?void 0:null===t.createdAt?null:t.createdAt.toISOString()}}class NotificationsApi extends BaseAPI{async createNotificationRaw(t,i){var e={"Content-Type":"application/json"},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(e.Authorization="Bearer "+o),await this.request({path:"/notifications",method:"POST",headers:e,query:{},body:NotificationRequestToJSON(t.notificationRequest)},i));return new JSONApiResponse(o,t=>NotificationFromJSON(t))}async createNotification(t={},i){return(await this.createNotificationRaw(t,i)).value()}async deleteNotificationsByIdRaw(t,i){if(null===t.id||void 0===t.id)throw new RequiredError("id","Required parameter requestParameters.id was null or undefined when calling deleteNotificationsById.");var e={},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(e.Authorization="Bearer "+o),await this.request({path:"/notifications/{id}".replace("{id}",encodeURIComponent(String(t.id))),method:"DELETE",headers:e,query:{}},i));return new VoidApiResponse(o)}async deleteNotificationsById(t,i){await this.deleteNotificationsByIdRaw(t,i)}async getNotificationsRaw(t,i){var e={},o=(void 0!==t.sort&&(e.sort=t.sort),void 0!==t.cursor&&(e.cursor=t.cursor),void 0!==t.resourceType&&(e.resource_type=t.resourceType),void 0!==t.accountNumber&&(e.account_number=t.accountNumber),void 0!==t.createdAfter&&(e.created_after=t.createdAfter.toISOString()),void 0!==t.createdBefore&&(e.created_before=t.createdBefore.toISOString()),void 0!==t.locationId&&(e.location_id=t.locationId),void 0!==t.subGroup&&(e.sub_group=t.subGroup),void 0!==t.status&&(e.status=t.status),{}),t=(t.prefer&&(o.Prefer=t.prefer.join(COLLECTION_FORMATS.csv)),this.configuration&&this.configuration.accessToken&&(t=await(0,this.configuration.accessToken)("bearerToken",[]))&&(o.Authorization="Bearer "+t),await this.request({path:"/notifications",method:"GET",headers:o,query:e},i));return new JSONApiResponse(t,t=>GetNotifications200ResponseFromJSON(t))}async getNotifications(t={},i){return(await this.getNotificationsRaw(t,i)).value()}async getNotificationsByIdRaw(t,i){if(null===t.id||void 0===t.id)throw new RequiredError("id","Required parameter requestParameters.id was null or undefined when calling getNotificationsById.");var e={},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(e.Authorization="Bearer "+o),await this.request({path:"/notifications/{id}".replace("{id}",encodeURIComponent(String(t.id))),method:"GET",headers:e,query:{}},i));return new JSONApiResponse(o,t=>NotificationFromJSON(t))}async getNotificationsById(t,i){return(await this.getNotificationsByIdRaw(t,i)).value()}async patchNotificationsByIdRaw(t,i){if(null===t.id||void 0===t.id)throw new RequiredError("id","Required parameter requestParameters.id was null or undefined when calling patchNotificationsById.");var e={"Content-Type":"application/json"},o=(this.configuration&&this.configuration.accessToken&&(o=await(0,this.configuration.accessToken)("bearerToken",[]))&&(e.Authorization="Bearer "+o),await this.request({path:"/notifications/{id}".replace("{id}",encodeURIComponent(String(t.id))),method:"PATCH",headers:e,query:{},body:NotificationPatchToJSON(t.notificationPatch)},i));return new JSONApiResponse(o,t=>NotificationPatchFromJSON(t))}async patchNotificationsById(t,i){return(await this.patchNotificationsByIdRaw(t,i)).value()}}const APIEndpointPrefixes={Notifications:"notifications"};class ApiClient{constructor(t){this.noInit=!1,this.configuration=t}get notificationsApi(){return new NotificationsApi(new Configuration({basePath:this.configuration.NotificationApiUrl+"/"+APIEndpointPrefixes.Notifications,headers:{Authorization:this.getAuthorization()}}))}getAuthorization(){return this.configuration.getAuthorizationFn?this.configuration.getAuthorizationFn():""}}const mapResourceTypeToNotificationGroups=t=>{switch(t.toLowerCase()){case"planned maintenance":return NotificationGroups.PLANNED_MAINTENANCE;case"incidents":return NotificationGroups.INCIDENTS;case"dcim alerts":return NotificationGroups.DCIM_ALERTS;case"service tickets":return NotificationGroups.SERVICE_TICKETS;default:return NotificationGroups.PLANNED_MAINTENANCE}},mapStringToNotificationStatus=t=>{switch(t.toLowerCase()){case"unread":return NotificationStatus.UNREAD;case"read":return NotificationStatus.READ;default:return NotificationStatus.UNREAD}},mapParametersToNotificationRequest=t=>({sort:"-created_at",cursor:t,prefer:[""]}),mapParametersToPatchNotificationRequest=(t,i)=>({id:t,notificationPatch:{status:i}}),mapParametersToDeleteNotificationRequest=t=>({id:t}),mapNotificationDataToNotification=t=>{var i;return{subject:null!=(i=t.subject)?i:"",id:t.id,accountNumber:null!=(i=t.accountNumber)?i:"",resourceType:mapResourceTypeToNotificationGroups(null!=(i=t.resourceType)?i:""),subGroup:null!=(i=t.subGroup)?i:"",resourceId:null!=(i=t.resourceId)?i:"",status:mapStringToNotificationStatus(null!=(i=t.status)?i:""),createdAt:null!==t.createdAt&&void 0!==t.createdAt?format(t.createdAt,DefaultDateTimeFormat):format(new Date,DefaultDateTimeFormat),createdBy:null!=(i=t.createdBy)?i:"",locations:null!=(i=t.locations)?i:[]}},mapNotificationResponseToNotifications=t=>t.map(t=>mapNotificationDataToNotification(t)),getNextPageCursorfromQueryParam=t=>{t=new URLSearchParams(t),t=t.has("cursor")?t.get("cursor"):"";return null!==t?t:""},handleError=async(i,t=!0)=>{if(i instanceof ResponseError&&400===i.response.status)try{var e=(await i.response.json())["detail"];t&&console.error(e)}catch(t){console.error(i)}else console.error(i)},getLocalStorageUser=t=>{t=localStorage.getItem(t);return t?JSON.parse(t):null},getUserAuthorization=t=>{return"Bearer "+(null==(t=getLocalStorageUser(t))?void 0:t.access_token)};class NotificationState{constructor(){this.apiClient={noInit:!0},this.baseApiUrl="",this.localStorageKey="",this.NewApiClient=()=>{this.apiClient=new ApiClient({NotificationApiUrl:this.baseApiUrl,getAuthorizationFn:()=>getUserAuthorization(this.localStorageKey)}),this.getNotifications()},this.nextPageCursor="",this.notifications=[],this.unreadNotificationCount=0,this.notificationFilters={SHOW_PLANNED_MAINTENANCE:!0,SHOW_SERVICE_TICKETS:!0,SHOW_DCIM_ALERTS:!0},this.selectedNotification={id:"",resourceType:NotificationGroups.PLANNED_MAINTENANCE,subGroup:"",subject:"",resourceId:"",locations:[],createdAt:"",accountNumber:"",createdBy:"",status:NotificationStatus.READ},this.dateFilters={FROM_DATE:subDays(new Date,DefaultDisplayDays),TO_DATE:new Date},makeAutoObservable(this),makePersistable(this,{name:"notification-state",properties:["notifications","unreadNotificationCount","notificationFilters","dateFilters","nextPageCursor"],storage:window.localStorage})}get isHydrated(){return isHydrated(this)}async hydrateStore(){await hydrateStore(this)}async clearStoredData(){await clearPersistedStore(this)}async getStoredData(){return getPersistedStore(this)}ConstructApiClient(){return this.apiClient.noInit?this.NewApiClient():this.apiClient}async setNotificationReadStatus(i){var t,e=await this.setNotificationAsRead(i.toString());return!0===await e&&(this.ReduceUnreadNotificationCount(),t=this.notifications.findIndex(t=>t.id===i),this.notifications[t].status=NotificationStatus.READ,this.selectedNotification=this.notifications[t]),e}async setNotificationDeleted(i){var t,e=await this.DeleteNotification(i.toString());return!0===e&&("unread"==(null==(t=this.notifications.find(t=>t.id===i))?void 0:t.status)&&this.ReduceUnreadNotificationCount(),t=this.notifications.findIndex(t=>t.id===i),this.notifications.splice(t,1)),{State:!0===e?ApiCallState.SUCCESS:ApiCallState.ERROR,Message:!0===e?"Successfully deleted the notificaion":"Error while deleting the notification"}}setNotificationDateFilter(t,i){this.dateFilters.FROM_DATE=void 0!==t?parse(t,DefaultDateFormat,new Date):void 0,this.dateFilters.TO_DATE=void 0!==i?parse(i,DefaultDateFormat,new Date):void 0}setNotificationFilter(t,i){switch(t){case NotificationGroups.PLANNED_MAINTENANCE:this.notificationFilters.SHOW_PLANNED_MAINTENANCE=i;break;case NotificationGroups.SERVICE_TICKETS:this.notificationFilters.SHOW_SERVICE_TICKETS=i;break;case NotificationGroups.DCIM_ALERTS:this.notificationFilters.SHOW_DCIM_ALERTS=i}}async getNotifications(){var t,i;void 0!==this.nextPageCursor&&(i=await(null==(i=this.apiClient)?void 0:i.notificationsApi.getNotificationsRaw(mapParametersToNotificationRequest(getNextPageCursorfromQueryParam(this.nextPageCursor))).catch(t=>{handleError(t,!1)})))&&(this.unreadNotificationCount=Number(null!=(t=i.raw.headers.get("x-total-unread-count"))?t:"0"),t=await(null==i?void 0:i.value()),this.notifications=""===this.nextPageCursor?mapNotificationResponseToNotifications(null==t?void 0:t.items):this.notifications.concat(mapNotificationResponseToNotifications(null==t?void 0:t.items)),this.nextPageCursor=void 0===(null==t?void 0:t.next)||null==t?void 0:t.next)}async getNotificationsById(t){var i;let e;(e=t?await(null==(i=this.apiClient)?void 0:i.notificationsApi.getNotificationsById({id:t}).catch(t=>{handleError(t,!1)})):e)&&(this.selectedNotification=mapNotificationDataToNotification(e))}async setNotificationAsRead(t){var i;return!!t&&(await(null==(i=this.apiClient)?void 0:i.notificationsApi.patchNotificationsById(mapParametersToPatchNotificationRequest(t,"read")).catch(t=>(handleError(t,!1),!1))),!0)}async DeleteNotification(t){var i;let e=!1;return t&&await(null==(i=this.apiClient)?void 0:i.notificationsApi.deleteNotificationsById(mapParametersToDeleteNotificationRequest(t)).catch(t=>{handleError(t,!1),e=!1}).then(t=>{e=!0})),e}ReduceUnreadNotificationCount(){0<this.unreadNotificationCount&&(this.unreadNotificationCount=this.unreadNotificationCount-1)}}const NotificationsState=new NotificationState,NotificationsStyle=css`.red-icon{--md-icon-button-icon-color:var(--md-sys-color-error);--md-sys-color-on-surface-variant:var(--md-sys-color-error)}.blue-icon{--md-icon-button-icon-color:var(--ix-sys-primary);--md-sys-color-on-surface-variant:var(--ix-sys-primary)}.grey-icon{--md-icon-button-icon-color:var(--md-sys-color-tertiary);--md-sys-color-on-surface-variant:var(--md-sys-color-tertiary);cursor:default}.notification-item-read,.notification-item-unread{position:relative;display:flex;flex-direction:row;flex-grow:1;padding:.5rem .75rem 1rem 1rem;background-color:#fff;font-weight:700;cursor:pointer;align-items:center}.notification-item-unread{border-left:3px solid var(--ix-button-confirm-color);padding-left:14px}.notification-item-read:hover,.notification-item-unread:hover{cursor:pointer;background-color:rgba(0,0,0,.04)}.group-container-row{display:block;font-size:12px;padding:12px 0 12px 0;margin-top:0;margin-bottom:0;border-bottom:#e1e4e8 inset 1px;color:var(--md-sys-text-color-primary);font-weight:400;font-size:15px;line-height:20px;letter-spacing:.15px}.group-name{line-height:24px;color:var(--md-sys-text-color-primary)}.group-item-name{display:grid;grid-template-columns:1fr 20%;gap:16px;-webkit-box-align:center;align-items:center;-webkit-box-flex:1;flex-grow:1;padding-top:5px}.notification-items-container{padding:0}.ix-icon-groups{--ix-icon-font-size:32px;--ix-icon-line-height:32px;color:var(--md-sys-text-color-primary)}:host{--ix-drawer-border-radius:0;--ix-drawer-padding:0;--ix-draw-width-sm:50vw;--ix-draw-width-lg:30vw}.ix-switch-wrapper{margin:4px;padding:4px;display:flex;column-gap:.75rem;align-items:center}ix-switch{--md-switch-selected-handle-color:var(--ix-sys-primary);--md-switch-selected-pressed-handle-color:var(--ix-sys-primary);--md-switch-selected-hover-handle-color:var(--ix-sys-primary);--md-switch-selected-focus-handle-color:var(--ix-sys-primary);--md-switch-selected-track-color:#7ba0ee;--md-switch-selected-pressed-track-color:#7ba0ee;--md-switch-selected-hover-track-color:#7ba0ee;--md-switch-selected-focus-track-color:#7ba0ee;--md-switch-track-height:14px;--md-switch-track-width:36px;--md-switch-track-outline-width:0;--md-switch-handle-color:white;--md-switch-pressed-handle-color:white;--md-switch-hover-handle-color:white;--md-switch-focus-handle-color:white;--md-switch-handle-width:20px;--md-switch-handle-height:20px;display:flex}.datefilter-dropdown-content,.filter-dropdown-content{display:none;position:absolute;right:5%;top:3rem;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:3;transition:box-shadow .3s cubic-bezier(.4,0,.2,1) 0s;border-radius:3px;box-shadow:rgba(0,0,0,.2) 0 5px 5px -3px,rgba(0,0,0,.14) 0 8px 10px 1px,rgba(0,0,0,.12) 0 3px 14px 2px;background-color:#fff}.filter-dropdown-content.active{display:inline}.datefilter-dropdown-content.active{display:inline}.modal-text-blue{color:var(--ix-sys-primary);padding-left:1.8rem;font-weight:700}.unread{font-family:'Open Sans',sans-serif;padding:0 5px;font-size:12px;line-height:16px;left:22px;top:0;background:var(--ix-button-cancel-color,#db0028)}.notification-header{font-family:'Red Hat Display',sans-serif;padding:20px 16px;font-weight:770;font-size:20px;line-height:24px}h3{font-family:'Open Sans',sans-serif;font-size:16px;font-weight:400;line-height:20px;letter-spacing:.15px;text-align:left;padding:8px 16px}.empty{margin:8px 0 8px 16px;font-family:"Open Sans",sans-serif;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px;color:#092241;font-weight:400}.notifification-item ix-icon-button{padding:12px}.options{padding-right:1rem;position:relative}`;let ConfirmationDialog=class extends MobxLitElement{constructor(){super(...arguments),this.textMessage="Are you sure?",this.open=!1,this.dialogClosed=()=>{this.dispatchEvent(new CustomEvent("confirm-dialog-closed"))}}static get styles(){return[NotificationsStyle,elementTheme,baseTheme,TWStyles]}onClick(t){t=new CustomEvent("on-confirm-selection",{detail:{returnValue:t},bubbles:!0,composed:!0});this.dispatchEvent(t)}render(){return html`<ix-dialog ?open="${this.open}" class="w-[580px]" @closed="${this.dialogClosed}"><div slot="headline"><div class="p-4 text-xl font-bold">${this.textMessage}</div></div><div slot="actions"><div class="flex flex-row justify-end p-1"><ix-button name="cancel" appearance="text" @click="${()=>this.onClick(!1)}">DISMISS</ix-button><ix-button name="confirm" appearance="text" @click="${()=>this.onClick(!0)}">YES</ix-button></div></div></ix-dialog>`}},ViewItemDialog=(__decorate([property({type:String,attribute:!0})],ConfirmationDialog.prototype,"textMessage",void 0),__decorate([property({type:Boolean,attribute:!0})],ConfirmationDialog.prototype,"open",void 0),ConfirmationDialog=__decorate([customElement("confirmation-dialog")],ConfirmationDialog),class extends MobxLitElement{constructor(){super(...arguments),this.notificaiton={},this.open=!1,this.dialogClosed=()=>{this.dispatchEvent(new CustomEvent("view-item-dialog-closed"))}}static get styles(){return[NotificationsStyle,elementTheme,TWStyles]}getUrl(){var t=this.notificaiton.id;switch(this.notificaiton.resourceType){case NotificationGroups.PLANNED_MAINTENANCE:return"/service-management/planned-maintenance/"+t;case NotificationGroups.SERVICE_TICKETS:return"/service-management/service-tickets/"+t;case NotificationGroups.INCIDENTS:return"/service-management/incidents/"+t;case NotificationGroups.DCIM_ALERTS:return"/dcim/"+t;default:return""}}getLocation(){return void 0===this.notificaiton.locations||this.notificaiton.locations.length<1?"":1<this.notificaiton.locations.length?"Multiple Locations":this.notificaiton.locations[0]}render(){return html`<ix-dialog ?open="${this.open}" class="w-[480px]" @closed="${this.dialogClosed}"><div class="flex flex-col px-16" slot="headline"><label class="text-xl font-bold w-[480px] py-2">${this.notificaiton.resourceType}</label> <label class="text-sm font-bold w-[480px] py-2">${this.notificaiton.subGroup}</label></div><form class="w-[480px] px-16" slot="content" id="form-id" method="dialog"><div class="flex flex-row py-1"><div class="py-1 w-[100px]">Subject</div><div class="grow py-1 pl-11 font-semibold">${this.notificaiton.subject}</div></div><div class="flex flex-row py-1"><div class="py-1 w-[100px]">Create Date</div><div class="grow py-1 pl-11 font-semibold">${format(this.notificaiton.createdAt,"dd/MM/yyyy HH:mm:ss")}</div></div><div class="flex flex-row py-1"><div class="py-1 w-[100px]">Site</div><div class="grow py-1 pl-11 font-semibold">${this.getLocation()}</div></div></form><div slot="actions" class="flex flex-row flex-end px-16 py-8"><button form="form-id" class="modal-text-blue">CLOSE</button> <a href="${this.getUrl()}" class="modal-text-blue">VIEW RECORD</a></div></ix-dialog>`}}),NotificationItem=(__decorate([property({type:Object,attribute:!1})],ViewItemDialog.prototype,"notificaiton",void 0),__decorate([property({type:Boolean,attribute:!0})],ViewItemDialog.prototype,"open",void 0),ViewItemDialog=__decorate([customElement("view-item-dialog")],ViewItemDialog),class extends MobxLitElement{constructor(){super(...arguments),this.disabled=!1,this.notificaiton={},this.showModal=!1,this.showDeleteConfirmation=!1}static get styles(){return[NotificationsStyle,elementTheme,TWStyles,css`.notification-item-read h2{font-family:'Open Sans',sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:.4px;text-align:left}.notification-item-unread h2{font-family:'Open Sans',sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:.4px;text-align:left}h3{font-family:'Open Sans',sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:.4px;text-align:left;color:rgba(9,34,65,.6);padding:0}ix-icon{--ix-icon-font-size:24px;--ix-icon-line-height:24px;color:var(--md-sys-text-color-primary)}.notification-item-read ix-icon{margin-right:12px;color:rgba(9,34,65)}.notification-item-unread ix-icon{margin-right:12px;color:#1456e0}`]}displayItem(){this.notificaiton.status===NotificationStatus.UNREAD&&NotificationsState.setNotificationReadStatus(this.notificaiton.id),this.showModal=!0}deleteItem(){this.disabled||(this.showDeleteConfirmation=!0)}confirmedDelete(t){t.detail.returnValue&&NotificationsState.setNotificationDeleted(this.notificaiton.id).then(t=>{this.showDeleteResultMessage(t,this.notificaiton.id)}),this.showDeleteConfirmation=!1}showDeleteResultMessage(t,i){window.dispatchEvent(new CustomEvent("add-toast",{detail:{id:i,content:html`<ix-message-toast toastId="${i}" .TMessageToast="${t.State.toLowerCase()}" forceClose>${t.Message}</ix-message-toast>`,autoClose:2e3,durationOut:2e3,vertical:"bottom",horizontal:"center",animated:!0,above:!1}}))}calculateDuration(){return void 0!==this.notificaiton.createdAt?differenceInHours(new Date,this.notificaiton.createdAt)<24?formatDistance(this.notificaiton.createdAt,new Date,{addSuffix:!0}):format(this.notificaiton.createdAt,DefaultDateTimeFormat):"NA"}GetNotificationIcon(){switch(this.notificaiton.resourceType){case NotificationGroups.PLANNED_MAINTENANCE:return"lab_profile";case NotificationGroups.SERVICE_TICKETS:return"dvr";case NotificationGroups.INCIDENTS:return"emergency_home";case NotificationGroups.DCIM_ALERTS:return"public";default:return"sync_saved_locally"}}render(){var t;return html`<div class="relative bg-white-gp notification-item"><div class="${"unread"===(null==(t=this.notificaiton)?void 0:t.status)?"notification-item-unread":"notification-item-read"}"><ix-icon icon="${this.GetNotificationIcon()}" class="${"unread"===(null==(t=this.notificaiton)?void 0:t.status)?"blue-icon":"grey-icon"}" @click="${this.displayItem}">${this.GetNotificationIcon()}</ix-icon><div class="flex flex-col grow" @click="${this.displayItem}"><div class="grow text-base"><h2>${null==(t=this.notificaiton)?void 0:t.resourceType}</h2></div><div class="grow text-xs"><h3>${this.calculateDuration()}</h3></div></div><div><view-item-dialog ?open="${this.showModal}" .notificaiton="${this.notificaiton}" @view-item-dialog-closed="${()=>{this.showModal=!1}}"></view-item-dialog><confirmation-dialog ?open="${this.showDeleteConfirmation}" @on-confirm-selection="${this.confirmedDelete}" @confirm-dialog-closed="${()=>{this.showModal=!1}}" textMessage="Are you sure you want to delete this notification?"></confirmation-dialog></div><ix-icon-button @click="${this.deleteItem}" icon="delete" class="${this.disabled?"grey-icon":"red-icon"}"></ix-icon-button></div></div>`}}),GroupedItem=(__decorate([property({type:Boolean})],NotificationItem.prototype,"disabled",void 0),__decorate([property({type:Object,attribute:!1})],NotificationItem.prototype,"notificaiton",void 0),__decorate([state()],NotificationItem.prototype,"showModal",void 0),__decorate([state()],NotificationItem.prototype,"showDeleteConfirmation",void 0),NotificationItem=__decorate([customElement("notification-item")],NotificationItem),class extends MobxLitElement{constructor(){super(...arguments),this.groupTitle="Group 1",this.iconName="public",this.childItems=NotificationsState.notifications,this.isOpen=!1,this.onClick=()=>{this.isOpen=!this.isOpen}}static get styles(){return[NotificationsStyle,baseTheme,TWStyles]}renderNotificationItems(){var t;return this.isOpen?void 0!==(null==(t=this.childItems)?void 0:t.length)&&0<(null==(t=this.childItems)?void 0:t.length)?html`<div class="notification-items-container">${null==(t=this.childItems)?void 0:t.map(t=>html`<notification-item .notificaiton="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}"></notification-item>`)}</div>`:html`<p class="m-0 pl-8 font-bold mr-4"><small style="padding-left:16px">No notifications yet.</small></p>`:html`${nothing}`}render(){var t;return html`<div class="group-container-row"><div class="flex items-center justify-between"><div class="flex items-center align-middle"><ix-icon-button icon="${this.isOpen?"arrow_drop_down":"arrow_right"}" @click="${this.onClick}"></ix-icon-button><ix-icon class="ix-icon-groups">${this.iconName}</ix-icon><p class="m-0 group-name font-bold pl-1">${this.groupTitle}</p><p class="m-0 pl-4">${null==(t=this.childItems)?void 0:t.length.toString().padStart(2,"0")}</p></div></div>${this.renderNotificationItems()}</div>`}}),GroupFilters=(__decorate([property({type:String,attribute:!0})],GroupedItem.prototype,"groupTitle",void 0),__decorate([property({type:String,attribute:!0})],GroupedItem.prototype,"iconName",void 0),__decorate([property({type:Array,attribute:!0})],GroupedItem.prototype,"childItems",void 0),__decorate([state()],GroupedItem.prototype,"isOpen",void 0),GroupedItem=__decorate([customElement("grouped-item")],GroupedItem),class extends MobxLitElement{static get styles(){return[NotificationsStyle,TWStyles,css`:host{--md-switch-state-layer-size:1rem;--md-switch-hover-handle-width:1rem;--md-switch-hover-handle-height:1rem;--md-switch-pressed-handle-width:1rem;--md-switch-pressed-handle-height:1rem;--md-switch-selected-handle-width:1.3rem;--md-switch-selected-handle-height:1.3rem;--md-switch-handle-width:0.5rem;--md-switch-handle-height:0.5rem;--md-switch-track-width:2.5rem;--md-switch-track-height:1rem}`]}onSwitchChange(t){var t=t.target,i=null==(i=t.attributes.getNamedItem("name"))?void 0:i.value;NotificationsState.setNotificationFilter(i,t.selected),this.requestUpdate()}render(){return html`<div class="flex flex-col items-start p-2"><div class="ix-switch-wrapper"><ix-switch name="${NotificationGroups.PLANNED_MAINTENANCE}" selected="${NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE}" @change="${this.onSwitchChange}"></ix-switch><label class="pl-1">${NotificationGroups.PLANNED_MAINTENANCE}</label></div><div class="ix-switch-wrapper"><ix-switch name="${NotificationGroups.SERVICE_TICKETS}" selected="${NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS}" @change="${this.onSwitchChange}"></ix-switch><label class="pl-1">${NotificationGroups.SERVICE_TICKETS}</label></div><div class="ix-switch-wrapper"><ix-switch name="${NotificationGroups.DCIM_ALERTS}" selected="${NotificationsState.notificationFilters.SHOW_DCIM_ALERTS}" @change="${this.onSwitchChange}"></ix-switch><label class="pl-1">${NotificationGroups.DCIM_ALERTS}</label></div></div>`}}),DateFilters=(GroupFilters=__decorate([customElement("group-filters")],GroupFilters),class extends MobxLitElement{constructor(){super(...arguments),this.fromDate=format(NotificationsState.dateFilters.FROM_DATE,DefaultDateFormat)||void 0,this.toDate=format(NotificationsState.dateFilters.TO_DATE,DefaultDateFormat)||void 0,this.maxDate=format(new Date,DefaultDateFormat),this.fromDateErrorText="",this.toDateErrorText=""}static get styles(){return[NotificationsStyle,baseTheme,elementTheme,TWStyles]}onFromDateChange(t){null===t||""===t?this.fromDate=void 0:(this.fromDate=t,void 0!==this.fromDate&&(this.fromDateErrorText=void 0))}onToDateChange(t){null===t||""===t?this.toDate=void 0:(this.toDate=t,void 0!==this.toDate&&(this.toDateErrorText=void 0))}onApplyDateFilter(t){if(t){if(void 0===this.toDate&&void 0!==this.fromDate)return void(this.toDateErrorText="Please select to date");if(void 0===this.fromDate&&void 0!==this.toDate)return void(this.fromDateErrorText="Please select from date");if(this.fromDate>this.toDate)return this.fromDateErrorText="From date cannot be later than To date.",void(this.fromDate=void 0);if(this.fromDateErrorText=void 0,this.toDate<this.fromDate)return this.toDateErrorText="To date cannot be earlier than From date.",void(this.toDate=void 0);this.toDateErrorText=void 0}t=t&&void 0===this.toDateErrorText&&void 0===this.fromDateErrorText,t&&(NotificationsState.setNotificationDateFilter(this.fromDate,this.toDate),this.requestUpdate()),t=new CustomEvent("on-selection",{detail:{returnValue:t},bubbles:!0,composed:!0});this.dispatchEvent(t)}clearDateFilters(){this.fromDate=void 0,this.toDate=void 0,this.fromDateErrorText=void 0,this.toDateErrorText=void 0}render(){return html`<div class="flex flex-col p-2"><div class="flex flex-row text-justify"><div class="grow items-center text-xl font-bold text-left p-2">Filter by Date</div><div class="flex flex-row items-center p-2" @click="${this.clearDateFilters}"><label class="grow text-sm text-right pr-1 cursor-pointer">Cleare Filter</label><ix-icon-button appearance="default" icon="domain_verification_off" class="blue-icon"></ix-icon-button></div></div><ix-divider class="px-2"></ix-divider><div class="flex xl:flex-row lg:flex-col md:flex-col sm:flex-col justify-between item-center p-2"><div class="p-2"><ix-date .value="${this.fromDate}" max="${this.maxDate}" label="From" name="FromDate" .errorText="${this.fromDateErrorText}" .onChanged="${t=>this.onFromDateChange(t)}"></ix-date></div><div class="p-2"><ix-date .value="${this.toDate}" max="${this.maxDate}" label="To" name="ToDate" .errorText="${this.toDateErrorText}" .onChanged="${t=>this.onToDateChange(t)}"></ix-date></div></div><div class="flex flex-row justify-between p-2"><ix-button type="" target="" appearance="text" @click="${()=>this.onApplyDateFilter(!1)}">Cancel</ix-button><ix-button type="" target="" appearance="text" @click="${()=>this.onApplyDateFilter(!0)}">Filter List</ix-button></div></div>`}});__decorate([state()],DateFilters.prototype,"fromDate",void 0),__decorate([state()],DateFilters.prototype,"toDate",void 0),__decorate([state()],DateFilters.prototype,"maxDate",void 0),__decorate([state()],DateFilters.prototype,"fromDateErrorText",void 0),__decorate([state()],DateFilters.prototype,"toDateErrorText",void 0),DateFilters=__decorate([customElement("date-filters")],DateFilters);class IxNotifications extends MobxLitElement{constructor(){super(...arguments),this.showDrawer=!1,this.showGroupedView=!1,this.showFilters=!1,this.showDateFilters=!1,this.showMarkAllReadConfirmation=!1,this.baseApiUrl="",this.localStorageKey=""}async firstUpdated(){NotificationsState.baseApiUrl=this.baseApiUrl,NotificationsState.localStorageKey=this.localStorageKey,NotificationsState.ConstructApiClient()}connectedCallback(){super.connectedCallback(),window.addEventListener("account-switched",NotificationsState.NewApiClient)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("account-switched",NotificationsState.NewApiClient)}toggleDrawer(){this.showDrawer=!this.showDrawer,this.showDrawer||(this.showFilters=!1,this.showDateFilters=!1)}renderUnReadCountText(){if(NotificationsState.unreadNotificationCount<=0)return html`${nothing}`;let t="";return t=99<NotificationsState.unreadNotificationCount?"99+":NotificationsState.unreadNotificationCount.toString(),html`<div class="unread rounded-full text-center text-white text-sm absolute icon-position -start-0">${t}</div>`}markAllread(){this.showMarkAllReadConfirmation=!0}confirmedMarkAllRead(t){if(t.detail.returnValue){var t=this.applyNotificationFilters(),e=null==t?void 0:t.filter(t=>t.status===NotificationStatus.UNREAD);if(0<e.length){let i=!0;null!=t&&t.forEach(t=>{NotificationsState.setNotificationReadStatus(t.id).then(t=>{i=i&&t})});t={State:!0===i?ApiCallState.SUCCESS:ApiCallState.ERROR,Message:!0===i?"Successfully marked all the notificaions as read":"Error while marking the notifications read, Please try again"};this.showResultMessage(t,e[0].id),this.renderUnReadCountText(),this.requestUpdate()}}this.showMarkAllReadConfirmation=!1}showResultMessage(t,i){window.dispatchEvent(new CustomEvent("add-toast",{detail:{id:i,content:html`<ix-message-toast toastId="${i}" .TMessageToast="${t.State.toLowerCase()}" forceClose>${t.Message}</ix-message-toast>`,autoClose:3e3,durationOut:3e3,vertical:"bottom",horizontal:"center",animated:!0,above:!1}}))}toggleGroupView(){this.showGroupedView=!this.showGroupedView}displayFilters(){this.showFilters=!this.showFilters}applyNotificationFilters(){var t=null==(t=NotificationsState.notifications)?void 0:t.filter(t=>t.resourceType===NotificationGroups.PLANNED_MAINTENANCE&&!0===NotificationsState.notificationFilters.SHOW_PLANNED_MAINTENANCE||t.resourceType===NotificationGroups.SERVICE_TICKETS&&!0===NotificationsState.notificationFilters.SHOW_SERVICE_TICKETS||t.resourceType===NotificationGroups.DCIM_ALERTS&&!0===NotificationsState.notificationFilters.SHOW_DCIM_ALERTS||t.resourceType===NotificationGroups.INCIDENTS);return void 0===NotificationsState.dateFilters.FROM_DATE&&void 0===NotificationsState.dateFilters.TO_DATE?t:void 0===NotificationsState.dateFilters.FROM_DATE?t.filter(t=>differenceInDays(new Date(t.createdAt),NotificationsState.dateFilters.TO_DATE)<=0):void 0===NotificationsState.dateFilters.TO_DATE?t.filter(t=>0<=differenceInHours(new Date(t.createdAt),NotificationsState.dateFilters.FROM_DATE)):t.filter(t=>0<=differenceInHours(new Date(t.createdAt),NotificationsState.dateFilters.FROM_DATE)&&differenceInDays(new Date(t.createdAt),NotificationsState.dateFilters.TO_DATE)<=0)}displayDateFilters(){this.showDateFilters=!this.showDateFilters}renderGroupedView(){var t=this.applyNotificationFilters();return html`<div style="margin:0"><grouped-item groupTitle="${NotificationGroups.PLANNED_MAINTENANCE}" iconName="lab_profile" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.PLANNED_MAINTENANCE)}"></grouped-item><grouped-item groupTitle="${NotificationGroups.INCIDENTS}" iconName="emergency_home" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.INCIDENTS)}"></grouped-item><grouped-item groupTitle="${NotificationGroups.SERVICE_TICKETS}" iconName="dvr" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.SERVICE_TICKETS)}"></grouped-item><grouped-item groupTitle="${NotificationGroups.DCIM_ALERTS}" iconName="public" .childItems="${null==t?void 0:t.filter(t=>t.resourceType===NotificationGroups.DCIM_ALERTS)}"></grouped-item></div>`}renderDefaultView(){var t=this.applyNotificationFilters(),i=t.filter(t=>0===differenceInDays(t.createdAt,new Date)),e=t.filter(t=>0!==differenceInDays(t.createdAt,new Date));return 0<(null==t?void 0:t.length)?html`<h3 class="grow">Latest</h3><div class="m-0 p-0">${0<i.length?null==i?void 0:i.map(t=>html`<notification-item .notificaiton="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}"></notification-item>`):this.renderNoResult()}</div><h3 class="grow">Earlier</h3><div>${0<e.length?null==e?void 0:e.map(t=>html`<notification-item .notificaiton="${t}" ?disabled="${t.resourceType===NotificationGroups.INCIDENTS}"></notification-item>`):this.renderNoResult()}</div>`:html`<p class="empty">No notifications yet.</p>`}renderNoResult(){return html`<p class="empty">No notifications yet.</p>`}handleCloseClick(t){this.showDateFilters=!1,this.showFilters=!1}handleContentScroll(t){null!==t&&t.detail.scrollTop+t.detail.clientHeight>=t.detail.scrollHeight&&NotificationsState.getNotifications()}manageFilterVisibility(t){t=t.composedPath();!this.showFilters||t.includes(this.groupFilters)||t.includes(this.groupFiltersButton)||(this.showFilters=!1),!this.showDateFilters||t.includes(this.dateFilters)||t.includes(this.dateFiltersButton)||(this.showDateFilters=!1)}render(){return html`<div class="relative"><ix-icon-button class="blue-icon" @click="${()=>this.toggleDrawer()}"><slot name="icon" slot="default"></slot></ix-icon-button>${this.renderUnReadCountText()}</div><confirmation-dialog ?open="${this.showMarkAllReadConfirmation}" @confirm-dialog-closed="${()=>{this.showMarkAllReadConfirmation=!1}}" @on-confirm-selection="${this.confirmedMarkAllRead}" textMessage="Are you sure you want to mark all notifications as read?"></confirmation-dialog><ix-drawer ?isVisible="${this.showDrawer}" .onClosed="${()=>this.toggleDrawer()}" animate-vertical hide-close @on-content-scroll="${this.handleContentScroll}" @click="${this.manageFilterVisibility}"><div class="flex flex-row justify-between grow py-2" slot="header"><h2 class="grow items-center notification-header">Notifications</h2><div class="flex flex-row justify-end grow items-center options"><ix-icon-button @click="${this.markAllread}" icon="markunread_mailbox" class="blue-icon"></ix-icon-button><ix-icon-button @click="${this.toggleGroupView}" icon="sort" class="blue-icon"></ix-icon-button><ix-icon-button @click="${this.displayFilters}" icon="list" class="blue-icon" id="group-filter-button"></ix-icon-button><div class="filter-dropdown-content ${this.showFilters?"active z-50":""}"><group-filters></group-filters></div><ix-icon-button @click="${this.displayDateFilters}" icon="calendar_month" class="blue-icon" id="date-filters-button"></ix-icon-button><div class="datefilter-dropdown-content ${this.showDateFilters?"active z-50":""}" @on-selection="${this.handleCloseClick}"><date-filters></date-filters></div></div></div><div slot="content">${this.showGroupedView?this.renderGroupedView():this.renderDefaultView()}</div></ix-drawer>`}}IxNotifications.styles=[TWStyles,NotificationsStyle],__decorate([query("group-filters")],IxNotifications.prototype,"groupFilters",void 0),__decorate([query("ix-icon-button#group-filter-button")],IxNotifications.prototype,"groupFiltersButton",void 0),__decorate([query("date-filters")],IxNotifications.prototype,"dateFilters",void 0),__decorate([query("ix-icon-button#date-filters-button")],IxNotifications.prototype,"dateFiltersButton",void 0),__decorate([state()],IxNotifications.prototype,"showDrawer",void 0),__decorate([state()],IxNotifications.prototype,"showGroupedView",void 0),__decorate([state()],IxNotifications.prototype,"showFilters",void 0),__decorate([state()],IxNotifications.prototype,"showDateFilters",void 0),__decorate([state()],IxNotifications.prototype,"showMarkAllReadConfirmation",void 0),__decorate([property({type:String})],IxNotifications.prototype,"baseApiUrl",void 0),__decorate([property({type:String})],IxNotifications.prototype,"localStorageKey",void 0),window.customElements.define("ix-notifications",IxNotifications);

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-notifications following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -136,5 +136,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "bb2bded6b11aff56d00efd8bb786a81520b27ecf"
+  "gitHead": "7f2daed9abd72f66dce6266332c52aef33cf22ad"
 }