@genesislcap/pbc-notify-ui 1.0.23 → 1.0.25

package/dist/esm/components/foundation-inbox/inbox.styles.js

@@ -10,27 +10,26 @@ export const FoundationInboxStyles = css `
     display: flex;
     flex-direction: column;
   }
-  
+
   /* Tabs */
   zero-tabs {
     display: flex;
     flex-direction: column;
     width: 100%;
   }
-  
+
   zero-tabs::part(tablist) {
     grid-template-columns: none;
     flex: 0;
   }
-  
+
   zero-tabs::part(tabpanel) {
     display: flex;
     flex-direction: column;
     flex: 1;
     min-height: 0;
   }
-  /***/
-  
+
   /* Search */
   .search {
     padding: calc(var(--design-unit) * 3px) calc(var(--design-unit) * 3px);
@@ -41,11 +40,10 @@ export const FoundationInboxStyles = css `
   .search-input {
     display: flex;
   }
-  
+
   .search-input::part(root) {
     width: 100%;
   }
-  /***/
 
   /* Inbox Header */
   .inbox-header {
@@ -66,7 +64,6 @@ export const FoundationInboxStyles = css `
 
   .inbox-header-close {
     text-align: center;
-    height: auto;
     min-width: 30px;
     height: 30px;
   }
@@ -79,7 +76,6 @@ export const FoundationInboxStyles = css `
   .inbox-header-close::part(start) {
     margin-inline-end: 0;
   }
-  /***/
 
   /* Inbox Content */
   .inbox-content {
@@ -87,8 +83,7 @@ export const FoundationInboxStyles = css `
     min-height: 0;
     display: flex;
   }
-  /***/
-  
+
   /* Alert Log */
   .alert-log-tab-panel {
     display: flex;
@@ -111,11 +106,8 @@ export const FoundationInboxStyles = css `
   .toast-severity {
     width: calc(var(--design-unit) * 1px);
     background-color: white;
-    margin:
-      calc(var(--design-unit) * 2px)
-      calc(var(--design-unit) * 0px)
-      calc(var(--design-unit) * 2px)
-      calc(var(--design-unit) * 2px);
+    margin: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 0px)
+      calc(var(--design-unit) * 2px) calc(var(--design-unit) * 2px);
   }
 
   .toast-header {
@@ -131,22 +123,18 @@ export const FoundationInboxStyles = css `
 
   .toast-content {
     display: flex;
+    position: relative;
     flex-direction: column;
     width: 100%;
-    margin:
-      calc(var(--design-unit) * 2px)
-      calc(var(--design-unit) * 0px)
-      calc(var(--design-unit) * 2px)
-      calc(var(--design-unit) * 2px);
+    margin: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 0px)
+      calc(var(--design-unit) * 2px) calc(var(--design-unit) * 2px);
   }
 
   .toast-date {
     color: var(--neutral-foreground-hint);
-    font-size: calc(var(--design-unit) * 3px)
+    font-size: calc(var(--design-unit) * 3px);
   }
 
-  /***/
-
   /* My Alerts */
   .my-alerts-tab-panel {
     display: flex;
@@ -159,8 +147,7 @@ export const FoundationInboxStyles = css `
     flex: 1;
     overflow: auto;
   }
-  /***/
-  
+
   /* Subscribe */
   .subscribe-tab-panel {
     display: flex;
@@ -173,7 +160,6 @@ export const FoundationInboxStyles = css `
     flex: 1;
     overflow: auto;
   }
-  /***/
 
   /* Rule and Template */
   .template {
@@ -191,16 +177,12 @@ export const FoundationInboxStyles = css `
     flex-direction: row;
     gap: calc(var(--design-unit) * 2px);
   }
-  
+
   .rule:hover,
   .template:hover {
     background-color: #2e3034;
   }
 
-  .rule:hover > .rule-status-actions > .rule-actions {
-    visibility: visible;
-  }
-
   .rule-actions {
     margin-left: auto;
     display: flex;
@@ -209,6 +191,10 @@ export const FoundationInboxStyles = css `
     visibility: hidden;
   }
 
+  .rule:hover > .rule-status-actions > .rule-actions {
+    visibility: visible;
+  }
+
   .active {
     color: #7acc79;
   }
@@ -227,5 +213,10 @@ export const FoundationInboxStyles = css `
   .rule-action-delete {
     cursor: pointer;
   }
-  /***/
+
+  .close-icon {
+    position: absolute;
+    right: calc(var(--design-unit) * 2px);
+    cursor: pointer;
+  }
 `;

package/dist/esm/components/foundation-inbox/inbox.template.js

@@ -1,41 +1,91 @@
 import { sync } from '@genesislcap/foundation-utils';
 import { html, ref, repeat, when } from '@microsoft/fast-element';
 import { NotifyPermission } from '../../utils/notifyPermissions';
+import { AlertStatus } from './inbox.types';
 import { getFormattedDate, getIcon, getSeverityColor, getStatus } from './inbox.utils';
 export var InboxTab;
 (function (InboxTab) {
-    InboxTab[InboxTab["AlertLog"] = 0] = "AlertLog";
-    InboxTab[InboxTab["MyAlerts"] = 1] = "MyAlerts";
-    InboxTab[InboxTab["Subscribe"] = 2] = "Subscribe";
+    InboxTab[InboxTab["AlertsNew"] = 0] = "AlertsNew";
+    InboxTab[InboxTab["AlertHistory"] = 1] = "AlertHistory";
+    InboxTab[InboxTab["MyAlerts"] = 2] = "MyAlerts";
+    InboxTab[InboxTab["Subscribe"] = 3] = "Subscribe";
 })(InboxTab || (InboxTab = {}));
+const alertsTab = (tab) => html `
+  <zero-tab-panel
+    slot="alert-log-tab"
+    class="alert-log-tab-panel"
+    id=${tab}
+    style=${(x) => x.checkActiveTab(tab)}
+  >
+    <div class="search">
+      <zero-text-field
+        class="search-input"
+        :value=${sync((x) => x.searchAlertLog)}
+        placeholder="Search Alerts..."
+        autocomplete="off"
+      ></zero-text-field>
+    </div>
+    <div class="alert-log-tab-content">
+      ${repeat((x) => x.alertsFilter, html `
+          <div class="toast" id=${(x) => x.ALERT_ID}>
+            <div
+              class="toast-severity"
+              style="background-color: ${(x) => getSeverityColor(x.NOTIFY_SEVERITY)}"
+            ></div>
+            <div class="toast-content">
+              ${when((x) => x.ALERT_STATUS === AlertStatus.NEW, html `
+                  <div class="close-icon" @click=${(x, c) => c.parent.dismissAlert(x.ALERT_ID)}>
+                    <zero-icon name="times"></zero-icon>
+                  </div>
+                `)}
+              <span class="toast-header">${(x) => x.HEADER}</span>
+              <span class="toast-message">${(x) => x.MESSAGE}</span>
+              <div class="toast-bottom" slot="bottom">
+                <span class="toast-date" slot="date">${(x) => getFormattedDate(x.CREATED_AT)}</span>
+              </div>
+            </div>
+          </div>
+        `)}
+    </div>
+  </zero-tab-panel>
+`;
 /**
  * @public
  */
 export const FoundationInboxTemplate = html `
   <div class="inbox-content">
-    <zero-tabs ${(ref('tabs'))} appearance="secondary" activeid=${x => InboxTab.AlertLog}>
-      <zero-tab slot="alert-log-tab"
-        id=${InboxTab.AlertLog}
-        @click=${x => x.inboxTabChanged(InboxTab.AlertLog)}
+    <zero-tabs ${ref('tabs')} appearance="secondary" activeid=${(x) => InboxTab.AlertsNew}>
+      <zero-tab
+        slot="alert-log-tab"
+        id=${InboxTab.AlertsNew}
+        @click=${(x) => x.inboxTabChanged(InboxTab.AlertsNew)}
+        appearance="secondary"
+      >
+        Alerts
+      </zero-tab>
+      <zero-tab
+        slot="alert-log-tab"
+        id=${InboxTab.AlertHistory}
+        @click=${(x) => x.inboxTabChanged(InboxTab.AlertHistory)}
         appearance="secondary"
       >
-        Alert Log
+        Alert History
       </zero-tab>
-      ${when((x) => x.auth.currentUser.hasPermission(NotifyPermission.NotificationRuleView), html `
+      ${when((x) => { var _a; return (_a = x.auth.currentUser) === null || _a === void 0 ? void 0 : _a.hasPermission(NotifyPermission.NotificationRuleView); }, html `
           <zero-tab
             slot="my-alerts-tab"
             id=${InboxTab.MyAlerts}
-            @click=${x => x.inboxTabChanged(InboxTab.MyAlerts)}
+            @click=${(x) => x.inboxTabChanged(InboxTab.MyAlerts)}
             appearance="secondary"
           >
-            My Alerts
+            Subscriptions
           </zero-tab>
         `)}
-      ${when((x) => x.auth.currentUser.hasPermission(NotifyPermission.NotificationRuleTemplateView), html `
+      ${when((x) => { var _a; return (_a = x.auth.currentUser) === null || _a === void 0 ? void 0 : _a.hasPermission(NotifyPermission.NotificationRuleTemplateView); }, html `
           <zero-tab
             slot="subscribe-tab"
             id=${InboxTab.Subscribe}
-            @click=${x => x.inboxTabChanged(InboxTab.Subscribe)}
+            @click=${(x) => x.inboxTabChanged(InboxTab.Subscribe)}
             appearance="secondary"
           >
             Subscribe
@@ -43,64 +93,41 @@ export const FoundationInboxTemplate = html `
         `)}
 
       <!-- Alerts -->
-      <zero-tab-panel
-        slot="alert-log-tab"
-        class="alert-log-tab-panel"
-        id=${InboxTab.AlertLog}
-        style=${x => x.checkActiveTab(InboxTab.AlertLog)}
-      >
-        <div class="search">
-          <zero-text-field
-            class="search-input"
-            :value=${sync((x) => x.searchAlertLog)}
-            placeholder="Search Alerts..."
-            autocomplete="off"
-          >
-          </zero-text-field>
-        </div>
-        <div class="alert-log-tab-content">
-          ${repeat(x => x.alertsFilter, html `
-              <div class="toast" id=${(x) => x.ALERT_ID}>
-                <div class="toast-severity" style="background-color: ${(x) => getSeverityColor(x.NOTIFY_SEVERITY)}"></div>
-                <div class="toast-content">
-                  <span class="toast-header">${(x) => x.HEADER}</span>
-                  <span class="toast-message">${(x) => x.MESSAGE}</span>
-                  <div class="toast-bottom" slot="bottom">
-                    <span class="toast-date" slot="date">${(x) => getFormattedDate(x.CREATED_AT)}</span>
-                  </div>
-                </div>
-              </div>
-            `)}
-        </div>
-      </zero-tab-panel>
-      ${when((x) => x.auth.currentUser.hasPermission(NotifyPermission.NotificationRuleView), html `
+      ${(x) => alertsTab(InboxTab.AlertsNew)} ${(x) => alertsTab(InboxTab.AlertHistory)}
+      ${when((x) => { var _a; return (_a = x.auth.currentUser) === null || _a === void 0 ? void 0 : _a.hasPermission(NotifyPermission.NotificationRuleView); }, html `
           <!-- Rules -->
           <zero-tab-panel
             slot="my-alerts-tab"
             class="my-alerts-tab-panel"
             id=${InboxTab.MyAlerts}
-            style=${x => x.checkActiveTab(InboxTab.MyAlerts)}
+            style=${(x) => x.checkActiveTab(InboxTab.MyAlerts)}
           >
             <div class="my-alerts-tab-content">
               ${repeat((x) => x.rulesFilter, html `
                   <div class="rule">
-                    <div class="rule-name">${x => x.NAME}</div>
-                    <div class="rule-expression">${x => x.RULE_EXPRESSION}</div>
+                    <div class="rule-name">${(x) => x.NAME}</div>
+                    <div class="rule-expression">${(x) => x.RULE_EXPRESSION}</div>
                     <div class="rule-datetime">${(x, c) => getFormattedDate(x.DATETIME)}</div>
                     <div class="rule-status-actions">
-                      <div class="rule-status ${x => getStatus(x.RULE_STATUS).toLowerCase()}">
+                      <div class="rule-status ${(x) => getStatus(x.RULE_STATUS).toLowerCase()}">
                         ${(x, c) => getStatus(x.RULE_STATUS)}
                       </div>
                       <div class="rule-actions">
-                      <!--
+                        <!--
                         <span class="rule-action-edit" @click=${(x, c) => c.parent.editAlert(x)}}>
                           <zero-icon name="gear"></zero-icon>
                         </span>
                       -->
-                        <span class="rule-action-enable-disable" @click=${(x, c) => c.parent.playPauseAlert(x)}>
-                          <zero-icon name=${x => getIcon(x.RULE_STATUS)}></zero-icon>
+                        <span
+                          class="rule-action-enable-disable"
+                          @click=${(x, c) => c.parent.playPauseAlert(x)}
+                        >
+                          <zero-icon name=${(x) => getIcon(x.RULE_STATUS)}></zero-icon>
                         </span>
-                        <span class="rule-action-delete" @click=${(x, c) => c.parent.deleteAlert(x)}>
+                        <span
+                          class="rule-action-delete"
+                          @click=${(x, c) => c.parent.deleteAlert(x)}
+                        >
                           <zero-icon name="trash"></zero-icon>
                         </span>
                       </div>
@@ -110,44 +137,40 @@ export const FoundationInboxTemplate = html `
             </div>
           </zero-tab-panel>
         `)}
-      ${when((x) => x.auth.currentUser.hasPermission(NotifyPermission.NotificationRuleTemplateView), html `
+      ${when((x) => { var _a; return (_a = x.auth.currentUser) === null || _a === void 0 ? void 0 : _a.hasPermission(NotifyPermission.NotificationRuleTemplateView); }, html `
           <!-- Templates -->
           <zero-tab-panel
             slot="subscribe-tab"
             class="subscribe-tab-panel"
             id=${InboxTab.Subscribe}
-            style=${x => x.checkActiveTab(InboxTab.Subscribe)}
+            style=${(x) => x.checkActiveTab(InboxTab.Subscribe)}
           >
             <div class="search">
               <zero-text-field
                 class="search-input"
-                :value=${sync(x => x.searchSubscribe)}
+                :value=${sync((x) => x.searchSubscribe)}
                 placeholder="Search Templates..."
                 autocomplete="off"
-              >
-              </zero-text-field>
+              ></zero-text-field>
             </div>
-            <div
-              class="subscribe-tab-content"
-            >
+            <div class="subscribe-tab-content">
               ${repeat((x) => x.templatesFilter, html `
                   <div
                     class="template"
                     @click=${(x, c) => c.parent.openTemplateSubscription(x)}
                     id=${(x) => x.ID}
                   >
-                    <div class="template-name">${x => x.NAME}</div>
-                    <div class="template-description">${x => x.DESCRIPTION}</div>
+                    <div class="template-name">${(x) => x.NAME}</div>
+                    <div class="template-description">${(x) => x.DESCRIPTION}</div>
                     <div class="template-datetime">${(x, c) => getFormattedDate(x.DATETIME)}</div>
                   </div>
                 `)}
             </div>
-            ${when(x => x.ruleTemplateDetails, html `
+            ${when((x) => x.ruleTemplateDetails, html `
                 <inbox-subscription
-                  :template=${x => x.ruleTemplateDetails}
-                  @templateSubscribed=${x => x.ruleTemplateDetails = null}
-                >
-                </inbox-subscription>
+                  :template=${(x) => x.ruleTemplateDetails}
+                  @templateSubscribed=${(x) => (x.ruleTemplateDetails = null)}
+                ></inbox-subscription>
               `)}
           </zero-tab-panel>
         `)}

package/dist/esm/components/foundation-inbox/inbox.types.js

@@ -1,3 +1,8 @@
+export var AlertStatus;
+(function (AlertStatus) {
+    AlertStatus["NEW"] = "NEW";
+    AlertStatus["DISMISSED"] = "DISMISSED";
+})(AlertStatus || (AlertStatus = {}));
 export var RuleStatus;
 (function (RuleStatus) {
     RuleStatus["ENABLED"] = "ENABLED";

package/dist/esm/components/foundation-inbox/inbox.utils.js

@@ -1,11 +1,7 @@
-import { SEVERITY_CRITICAL, SEVERITY_INFORMATION, SEVERITY_SERIOUS, SEVERITY_WARNING } from "../foundation-notification-dashboard/types/severity";
-import { chartPinkWebRGBA, primaryBlueWebRGBA, secondaryOrangeWebRGBA, warningYellowWebRGBA } from "@genesislcap/foundation-zero";
-export const getStatus = (ruleStatus) => ruleStatus == 'ENABLED'
-    ? 'Active'
-    : 'Paused';
-export const getIcon = (ruleStatus) => ruleStatus === 'ENABLED'
-    ? 'pause'
-    : 'play';
+import { chartPinkWebRGBA, primaryBlueWebRGBA, secondaryOrangeWebRGBA, warningYellowWebRGBA, } from '@genesislcap/foundation-zero';
+import { SEVERITY_CRITICAL, SEVERITY_INFORMATION, SEVERITY_SERIOUS, SEVERITY_WARNING, } from '../foundation-notification-dashboard/types/severity';
+export const getStatus = (ruleStatus) => (ruleStatus == 'ENABLED' ? 'Active' : 'Paused');
+export const getIcon = (ruleStatus) => (ruleStatus === 'ENABLED' ? 'pause' : 'play');
 export const getFormattedDate = (dateTimeInMills) => {
     const dateTime = new Date(dateTimeInMills);
     return `${dateTime.toLocaleDateString()} ${dateTime.toLocaleTimeString()}`;

package/dist/esm/components/foundation-notification-dashboard/components/notify-audit/notify-audit-management.js

@@ -5,37 +5,37 @@ const NOTIFY_AUDIT_MANAGEMENT_COLUMNS = [
     {
         field: 'ALERT_ID',
         headerName: 'Alert',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'MESSAGE',
         headerName: 'Message',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'HEADER',
         headerName: 'Header',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'USER_NAME',
         headerName: 'User Name',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'EXPIRY',
         headerName: 'Expiry',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'NOTIFY_SEVERITY',
         headerName: 'Notify Serverity',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'CREATED_AT',
         headerName: 'Created At',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'TABLE_ENTITY_ID',
@@ -83,8 +83,7 @@ NotifyAuditManagement = __decorate([
       <entity-management
         resourceName="ALL_NOTIFY_AUDIT"
         :columns=${() => [...NOTIFY_AUDIT_MANAGEMENT_COLUMNS]}
-      >
-      </entity-management>
+      ></entity-management>
     </div>
   `,
         styles: css `
@@ -93,7 +92,7 @@ NotifyAuditManagement = __decorate([
     entity-management::part(header) {
       display: none;
     }
-  `
+  `,
     })
 ], NotifyAuditManagement);
 export { NotifyAuditManagement };

package/dist/esm/components/foundation-notification-dashboard/components/routes/route-management.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { FASTElement, css, customElement, html } from "@microsoft/fast-element";
+import { FASTElement, css, customElement, html } from '@microsoft/fast-element';
 let RouteManagement = class RouteManagement extends FASTElement {
 };
 RouteManagement = __decorate([
@@ -12,7 +12,7 @@ RouteManagement = __decorate([
       <zero-tab appearance="secondary">Email User Routes</zero-tab>
       <zero-tab appearance="secondary">Log Routes</zero-tab>
       <zero-tab appearance="secondary">MS Teams Routes</zero-tab>
-      
+
       <zero-tab-panel>
         <screen-route-management></screen-route-management>
       </zero-tab-panel>
@@ -36,12 +36,12 @@ RouteManagement = __decorate([
       flex-direction: column;
       width: 100%;
     }
-    
+
     zero-tabs::part(tablist) {
       grid-template-columns: none;
       flex: 0;
     }
-    
+
     zero-tabs::part(tabpanel) {
       display: flex;
       flex-direction: column;

package/dist/esm/components/foundation-notification-dashboard/components/routes/tabs/email-distribution-route-management.js

@@ -5,32 +5,32 @@ const EMAIL_DISTRIBUTION_ROUTE_MANAGEMENT_COLUMNS = [
     {
         field: 'NOTIFY_ROUTE_ID',
         headerName: 'Notify Route Id',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'TOPIC_MATCH',
         headerName: 'Topic Match',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'GATEWAY_ID',
         headerName: 'Gateway Id',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'EMAIL_TO',
         headerName: 'Email To',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'EMAIL_CC',
         headerName: 'Email Cc',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'EMAIL_BCC',
         headerName: 'Email Bcc',
-        flex: 1
+        flex: 1,
     },
 ];
 let EmailDistributionRouteManagement = class EmailDistributionRouteManagement extends FASTElement {
@@ -46,11 +46,10 @@ EmailDistributionRouteManagement = __decorate([
         updateEvent="EVENT_DYNAMIC_RULE_NOTIFY_UPDATE"
         deleteEvent="EVENT_DYNAMIC_RULE_NOTIFY_DELETE"
         :columns=${() => [...EMAIL_DISTRIBUTION_ROUTE_MANAGEMENT_COLUMNS]}
-      >
-      </entity-management>
+      ></entity-management>
     </div>
   `,
-        styles: managementGridStyles
+        styles: managementGridStyles,
     })
 ], EmailDistributionRouteManagement);
 export { EmailDistributionRouteManagement };

package/dist/esm/components/foundation-notification-dashboard/components/routes/tabs/email-user-route-management.js

@@ -5,37 +5,37 @@ const EMAIL_USER_ROUTE_COLUMNS = [
     {
         field: 'NOTIFY_ROUTE_ID',
         headerName: 'Notify Route Id',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'TOPIC_MATCH',
         headerName: 'Topic Match',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'GATEWAY_ID',
         headerName: 'Gateway Id',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'ENTITY_ID',
         headerName: 'Entity Id',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'ENTITY_ID_TYPE',
         headerName: 'Entity Id Type',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'RIGHT_CODE',
         headerName: 'Right Code',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'AUTH_CACHE_NAME',
         headerName: 'Auth Cache Name',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'EXCLUDE_SENDER',
@@ -56,8 +56,7 @@ EmailUserRouteManagement = __decorate([
         updateEvent="EVENT_EMAIL_USER_ROUTE_UPDATE"
         deleteEvent="EVENT_EMAIL_USER_ROUTE_DELETE"
         :columns=${() => [...EMAIL_USER_ROUTE_COLUMNS]}
-      >
-      </entity-management>
+      ></entity-management>
     </div>
   `,
         styles: managementGridStyles,