@genesislcap/pbc-notify-ui 1.0.23 → 1.0.24

package/dist/esm/components/components.js

@@ -3,22 +3,22 @@ import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
 import { logger } from '../utils';
 import { FoundationInboxCounter } from './foundation-inbox/components/foundation-inbox-counter/foundation-inbox-counter';
 import { FoundationInboxFlyout } from './foundation-inbox/components/foundation-inbox-flyout/foundation-inbox-flyout';
+import { InboxSubscription } from './foundation-inbox/components/inbox-subscription/inbox-subscription';
+import { RuleParameter } from './foundation-inbox/components/inbox-subscription/rule-parameter/rule-parameter';
+import { NotifyAuditManagement } from './foundation-notification-dashboard/components/notify-audit/notify-audit-management';
+import { RouteManagement } from './foundation-notification-dashboard/components/routes/route-management';
 import { EmailDistributionRouteManagement } from './foundation-notification-dashboard/components/routes/tabs/email-distribution-route-management';
 import { EmailUserRouteManagement } from './foundation-notification-dashboard/components/routes/tabs/email-user-route-management';
 import { LogRouteManagement } from './foundation-notification-dashboard/components/routes/tabs/log-route-management';
 import { MSTeamsRouteManagement } from './foundation-notification-dashboard/components/routes/tabs/ms-teams-route-management';
-import { NotifyAuditManagement } from './foundation-notification-dashboard/components/notify-audit/notify-audit-management';
-import { RuleManagement } from './foundation-notification-dashboard/components/rules/rule-management';
-import { TemplateManagement } from './foundation-notification-dashboard/components/templates/template-management';
 import { ScreenRouteManagement } from './foundation-notification-dashboard/components/routes/tabs/screen-route-management';
-import { InboxSubscription } from './foundation-inbox/components/inbox-subscription/inbox-subscription';
-import { TemplateDialog } from './foundation-notification-dashboard/components/templates/template-dialog/template-dialog';
-import { ConditionBuilder } from './foundation-notification-dashboard/components/templates/template-dialog/condition-builder/condition-builder';
-import { RuleDialog } from './foundation-notification-dashboard/components/rules/rule-dialog/rule-dialog';
 import { RuleConditionBuilder } from './foundation-notification-dashboard/components/rules/rule-dialog/rule-condition-builder/rule-condition-builder';
+import { RuleDialog } from './foundation-notification-dashboard/components/rules/rule-dialog/rule-dialog';
+import { RuleManagement } from './foundation-notification-dashboard/components/rules/rule-management';
+import { ConditionBuilder } from './foundation-notification-dashboard/components/templates/template-dialog/condition-builder/condition-builder';
 import { ParameterBuilder } from './foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder';
-import { RuleParameter } from './foundation-inbox/components/inbox-subscription/rule-parameter/rule-parameter';
-import { RouteManagement } from './foundation-notification-dashboard/components/routes/route-management';
+import { TemplateDialog } from './foundation-notification-dashboard/components/templates/template-dialog/template-dialog';
+import { TemplateManagement } from './foundation-notification-dashboard/components/templates/template-management';
 // Components
 // #region Inbox
 FoundationInboxCounter;
@@ -58,7 +58,7 @@ function loadZeroDesignSystem() {
     return __awaiter(this, void 0, void 0, function* () {
         let type = ResourceType.REMOTE;
         try {
-            // @ts-ignore
+            // @ts-expect-error ignore zeroDesignSystem module
             return yield import('foundationZero/ZeroDesignSystem');
         }
         catch (e) {

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

@@ -1,7 +1,7 @@
 import { html } from '@microsoft/fast-element';
 const MAX_NUMBER_TO_DISPLAY = 99;
 export const FoundationInboxCounterTemplate = html `
-  <div class="${x => x.value < 1 && 'hidden'}">
+  <div class="${(x) => x.value < 1 && 'hidden'}">
     ${(x) => (x.value > MAX_NUMBER_TO_DISPLAY ? `${MAX_NUMBER_TO_DISPLAY}+` : x.value)}
   </div>
 `;

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

@@ -1,8 +1,8 @@
 import { __awaiter, __decorate } from "tslib";
 import { observable, customElement } from '@microsoft/fast-element';
+import { FoundationInboxBase } from '../../inbox-base/inbox-base';
 import { FoundationInboxFlyoutStyles } from './foundation-inbox-flyout.styles';
 import { FoundationInboxFlyoutTemplate } from './foundation-inbox-flyout.template';
-import { FoundationInboxBase } from '../../inbox-base/inbox-base';
 let FoundationInboxFlyout = class FoundationInboxFlyout extends FoundationInboxBase {
     constructor() {
         super(...arguments);

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

@@ -12,6 +12,6 @@ export const FoundationInboxFlyoutStyles = css `
     display: flex;
     flex-direction: column;
   }
-  
+
   ${FoundationInboxStyles}
 `;

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

@@ -4,22 +4,17 @@ export const FoundationInboxFlyoutTemplate = html `
   <zero-flyout
     ${ref('flyout')}
     position="right"
-    @closed=${x => x.flyoutClosed = true}
-    :closed=${x => x.flyoutClosed}
+    @closed=${(x) => (x.flyoutClosed = true)}
+    :closed=${(x) => x.flyoutClosed}
     displayHeader=${false}
   >
     <div class="inbox-header">
-      <div class="inbox-header-title">
-        Alerts
-      </div>
-      <zero-button
-        class="inbox-header-close"
-        @click=${x => x.close()}
-      >
+      <div class="inbox-header-title">Alerts</div>
+      <zero-button class="inbox-header-close" @click=${(x) => x.close()}>
         <zero-icon part="icon" name="xmark" size="xl"></zero-icon>
       </zero-button>
     </div>
-    
+
     ${FoundationInboxTemplate}
   </zero-flyout>
 `;

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

@@ -1,17 +1,17 @@
 import { __awaiter, __decorate } from "tslib";
-import { FASTElement, attr, customElement, observable } from "@microsoft/fast-element";
-import { PARAM_SOURCE_TYPE_DEFINED_GROUP } from "../../../foundation-notification-dashboard/types/param-source-type";
-import { InboxSubscriptionTemplate } from "./inbox-subscription.template";
-import { InboxSubscriptionStyles } from "./inbox-subscription.styles";
-import { EXPRESSION_TYPE_PLACEHOLDER } from "../../../foundation-notification-dashboard/types/expression-type";
-import { RuleService } from "../../../../services/rule.service";
+import { FASTElement, attr, customElement, observable } from '@microsoft/fast-element';
+import { RuleService } from '../../../../services/rule.service';
+import { EXPRESSION_TYPE_PLACEHOLDER } from '../../../foundation-notification-dashboard/types/expression-type';
+import { PARAM_SOURCE_TYPE_DEFINED_GROUP } from '../../../foundation-notification-dashboard/types/param-source-type';
+import { InboxSubscriptionStyles } from './inbox-subscription.styles';
+import { InboxSubscriptionTemplate } from './inbox-subscription.template';
 let InboxSubscription = class InboxSubscription extends FASTElement {
     constructor() {
         super(...arguments);
         this.parametersDetails = {};
         this.parametersOperators = {};
         this.subscribeDisabled = true;
-        this.isFirstElement = (parameter) => Object.values(this.template.PARAMETERS).findIndex(p => p.PARAM_NAME === parameter.PARAM_NAME) === 0;
+        this.isFirstElement = (parameter) => Object.values(this.template.PARAMETERS).findIndex((p) => p.PARAM_NAME === parameter.PARAM_NAME) === 0;
         this.createParametersOperatorMap = (conditions) => {
             this.parametersOperators = {};
             conditions.forEach((condition) => {
@@ -32,7 +32,7 @@ let InboxSubscription = class InboxSubscription extends FASTElement {
     }
     templateChanged() {
         const parameters = this.template.PARAMETERS;
-        Object.keys(parameters).forEach(key => {
+        Object.keys(parameters).forEach((key) => {
             const parameter = parameters[key];
             if (parameter.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_DEFINED_GROUP) {
                 // Attribute 1st group value for select fields
@@ -49,9 +49,7 @@ let InboxSubscription = class InboxSubscription extends FASTElement {
     }
     verifySubscribe() {
         const parameters = Object.values(this.parametersDetails);
-        this.subscribeDisabled = parameters.length > 0
-            ? !parameters.every(x => x !== '')
-            : false;
+        this.subscribeDisabled = parameters.length > 0 ? !parameters.every((x) => x !== '') : false;
     }
     subscribeTemplate() {
         return __awaiter(this, void 0, void 0, function* () {

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

@@ -1,4 +1,4 @@
-import { css } from "@microsoft/fast-element";
+import { css } from '@microsoft/fast-element';
 export const InboxSubscriptionStyles = css `
   .inbox-subscription {
     display: flex;
@@ -30,7 +30,7 @@ export const InboxSubscriptionStyles = css `
 
   zero-button.subscribe {
     display: flex;
-    margin: 0px;
+    margin: 0;
     width: 100%;
   }
 `;

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

@@ -3,37 +3,36 @@ import { eventDetail } from '../../../../utils';
 export const InboxSubscriptionTemplate = html `
   <div class="inbox-subscription">
     <div class="inbox-subscription-header">
-      Subscribe to <span style="font-weight: bold;">${x => x.template.RULE_NAME}</span>
+      Subscribe to
+      <span style="font-weight: bold;">${(x) => x.template.RULE_NAME}</span>
     </div>
-    
-    ${when(x => Object.values(x.template.PARAMETERS).length === 0, html `
+
+    ${when((x) => Object.values(x.template.PARAMETERS).length === 0, html `
         <p style="padding-left: 10px;">The selected template doesn't have parameters.</p>
       `)}
-
-    ${when(x => Object.values(x.template.PARAMETERS).length > 0, html `
+    ${when((x) => Object.values(x.template.PARAMETERS).length > 0, html `
         <div class="inbox-subscription-content">
           ${repeat(
 // @ts-ignore
-x => Object.values(x.template.PARAMETERS), html `
+(x) => Object.values(x.template.PARAMETERS), html `
               <rule-parameter
-                :parameter=${x => x}
+                :parameter=${(x) => x}
                 :isFirstElement=${(x, c) => c.parent.isFirstElement(x)}
                 :operator=${(x, c) => c.parent.parametersOperators[x.PARAM_NAME]}
                 @parameterEdited=${(x, c) => c.parent.parameterEdit(eventDetail(c))}
-              >
-              </rule-parameter>
+              ></rule-parameter>
             `)}
         </div>
       `)}
-    
+
     <div class="inbox-subscription-footer">
       <zero-button
         class="subscribe"
-        @click=${x => x.subscribeTemplate()}
-        ?disabled=${x => x.subscribeDisabled}
+        @click=${(x) => x.subscribeTemplate()}
+        ?disabled=${(x) => x.subscribeDisabled}
       >
         Subscribe
       </zero-button>
     </div>
-  </div>  
+  </div>
 `;

package/dist/esm/components/foundation-inbox/components/inbox-subscription/rule-parameter/rule-parameter.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
-import { FASTElement, attr, customElement, observable } from "@microsoft/fast-element";
-import { RuleParameterTemplate } from "./rule-parameter.template";
-import { RuleParameterStyles } from "./rule-parameter.styles";
-import { PARAM_TYPE_BOOLEAN } from "../../../../foundation-notification-dashboard/types/param-type";
-import { PARAM_SOURCE_TYPE_DEFINED_GROUP, PARAM_SOURCE_TYPE_USER_TEXT } from "../../../../foundation-notification-dashboard/types/param-source-type";
+import { FASTElement, attr, customElement, observable } from '@microsoft/fast-element';
+import { PARAM_SOURCE_TYPE_DEFINED_GROUP, PARAM_SOURCE_TYPE_USER_TEXT, } from '../../../../foundation-notification-dashboard/types/param-source-type';
+import { PARAM_TYPE_BOOLEAN } from '../../../../foundation-notification-dashboard/types/param-type';
+import { RuleParameterStyles } from './rule-parameter.styles';
+import { RuleParameterTemplate } from './rule-parameter.template';
 let RuleParameter = class RuleParameter extends FASTElement {
     constructor() {
         super(...arguments);
@@ -37,7 +37,7 @@ let RuleParameter = class RuleParameter extends FASTElement {
         this.inputValue = inputValue;
         this.$emit('parameterEdited', {
             parameter: this.parameter,
-            valueTyped: inputValue
+            valueTyped: inputValue,
         });
     }
 };

package/dist/esm/components/foundation-inbox/components/inbox-subscription/rule-parameter/rule-parameter.styles.js

@@ -1,4 +1,4 @@
-import { css } from "@microsoft/fast-element";
+import { css } from '@microsoft/fast-element';
 export const RuleParameterStyles = css `
   .control {
     display: flex;

package/dist/esm/components/foundation-inbox/components/inbox-subscription/rule-parameter/rule-parameter.template.js

@@ -1,43 +1,41 @@
-import { html, repeat, when } from "@microsoft/fast-element";
 import { sync } from '@genesislcap/foundation-utils';
-import { humanize } from "../../../../../utils";
-import { PARAM_SOURCE_TYPE_DEFINED_GROUP, PARAM_SOURCE_TYPE_REQ_REP, PARAM_SOURCE_TYPE_USER_TEXT } from "../../../../foundation-notification-dashboard/types/param-source-type";
-import { PARAM_TYPE_BOOLEAN, PARAM_TYPE_NUMBER, PARAM_TYPE_STRING } from "../../../../foundation-notification-dashboard/types/param-type";
+import { html, repeat, when } from '@microsoft/fast-element';
+import { humanize } from '../../../../../utils';
+import { PARAM_SOURCE_TYPE_DEFINED_GROUP, PARAM_SOURCE_TYPE_REQ_REP, PARAM_SOURCE_TYPE_USER_TEXT, } from '../../../../foundation-notification-dashboard/types/param-source-type';
+import { PARAM_TYPE_BOOLEAN, PARAM_TYPE_NUMBER, PARAM_TYPE_STRING, } from '../../../../foundation-notification-dashboard/types/param-type';
 export const RuleParameterTemplate = html `
   <div class="control">
     <label>
-      <span style="font-weight: bold;">${x => x.parameter.PARAM_LABEL}</span> ${(x, c) => humanize(x.operator).toLowerCase()}
+      <span style="font-weight: bold;">${(x) => x.parameter.PARAM_LABEL}</span>
+      ${(x, c) => humanize(x.operator).toLowerCase()}
     </label>
-    
+
     <!-- USER_TEXT -->
-    ${when(x => x.parameter.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_USER_TEXT, html `                            
-        ${when(x => x.parameter.PARAM_TYPE === PARAM_TYPE_STRING, html `
+    ${when((x) => x.parameter.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_USER_TEXT, html `
+        ${when((x) => x.parameter.PARAM_TYPE === PARAM_TYPE_STRING, html `
             <zero-text-field
-              autofocus=${x => x.isFirstElement}
+              autofocus=${(x) => x.isFirstElement}
               class="input-field"
-              :value=${sync(x => x.inputValue)}
+              :value=${sync((x) => x.inputValue)}
               @input=${(x, c) => x.parameterEdit(c.event.target.value)}
-            >
-            </zero-text-field>
+            ></zero-text-field>
           `)}
-
-        ${when(x => x.parameter.PARAM_TYPE === PARAM_TYPE_NUMBER, html `
+        ${when((x) => x.parameter.PARAM_TYPE === PARAM_TYPE_NUMBER, html `
             <zero-number-field
               hide-step
-              autofocus=${x => x.isFirstElement}
+              autofocus=${(x) => x.isFirstElement}
               class="input-field"
-              :value=${sync(x => x.inputValue)}
+              :value=${sync((x) => x.inputValue)}
               @input=${(x, c) => x.parameterEdit(c.event.target.value)}
-            >
-            </zero-number-field>
+            ></zero-number-field>
           `)}
 
-      <!-- TODO: Implement
-        ${when(x => x.parameter.PARAM_TYPE === PARAM_TYPE_BOOLEAN, html `
+        <!-- TODO: Implement
+        ${when((x) => x.parameter.PARAM_TYPE === PARAM_TYPE_BOOLEAN, html `
             <zero-select
-              autofocus=${x => x.isFirstElement}
+              autofocus=${(x) => x.isFirstElement}
               class="input-field"
-              :value=${sync(x => x.inputValue)}
+              :value=${sync((x) => x.inputValue)}
             >
               <zero-option value="true">true</zero-option>
               <zero-option value="false">false</zero-option>
@@ -45,26 +43,23 @@ export const RuleParameterTemplate = html `
           `)}
         -->
       `)}
-    
+
     <!-- DEFINED_GROUP -->
-    ${when(x => x.parameter.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_DEFINED_GROUP, html `
+    ${when((x) => x.parameter.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_DEFINED_GROUP, html `
         <zero-select
-          autofocus=${x => x.isFirstElement}
+          autofocus=${(x) => x.isFirstElement}
           class="input-field"
-          :value=${sync(x => x.inputValue)}
+          :value=${sync((x) => x.inputValue)}
         >
-          ${repeat(x => x.parameter.PARAM_SOURCE.split(','), html `
+          ${repeat((x) => x.parameter.PARAM_SOURCE.split(','), html `
               <zero-option value=${(x) => x}>${(x) => x}</zero-option>
             `)}
         </zero-select>
       `)}
 
     <!-- TODO: REQ_REP -->
-    ${when(x => x.parameter.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_REQ_REP, html `
-        <zero-select
-          :value=${sync(x => x.inputValue)}
-        >
-        </zero-select>
+    ${when((x) => x.parameter.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_REQ_REP, html `
+        <zero-select :value=${sync((x) => x.inputValue)}></zero-select>
       `)}
   </div>
 `;

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

@@ -1,12 +1,12 @@
 import { __awaiter, __decorate } from "tslib";
-import { Auth } from "@genesislcap/foundation-comms";
-import { FASTElement, observable } from "@microsoft/fast-element";
-import { AlertService } from "../../../services/alert.service";
-import { RuleService } from "../../../services/rule.service";
-import { TemplateService } from "../../../services/template.service";
-import { RuleStatus } from "../inbox.types";
-import { logger, updateArray } from "../../../utils";
-import { InboxTab } from "../inbox.template";
+import { Auth } from '@genesislcap/foundation-comms';
+import { FASTElement, observable } from '@microsoft/fast-element';
+import { AlertService } from '../../../services/alert.service';
+import { RuleService } from '../../../services/rule.service';
+import { TemplateService } from '../../../services/template.service';
+import { logger, updateArray } from '../../../utils';
+import { InboxTab } from '../inbox.template';
+import { RuleStatus, } from '../inbox.types';
 export class FoundationInboxBase extends FASTElement {
     constructor() {
         super(...arguments);
@@ -22,26 +22,22 @@ export class FoundationInboxBase extends FASTElement {
         this.ruleTemplateDetails = null;
         // #endregion
         // #region Changed Events
-        this.alertsChanged = () => this.alertsFilter = this.alerts;
-        this.rulesChanged = () => this.rulesFilter = this.rules;
-        this.templatesChanged = () => this.templatesFilter = this.templates;
+        this.alertsChanged = () => (this.alertsFilter = this.alerts);
+        this.rulesChanged = () => (this.rulesFilter = this.rules);
+        this.templatesChanged = () => (this.templatesFilter = this.templates);
         this.searchAlertLogChanged = () => {
             if (!this.searchAlertLog) {
                 this.alertsFilter = this.alerts;
                 return;
             }
-            this.alertsFilter = this.alerts.filter(item => item.HEADER
-                .toLowerCase()
-                .startsWith(this.searchAlertLog.toLowerCase()));
+            this.alertsFilter = this.alerts.filter((item) => item.HEADER.toLowerCase().startsWith(this.searchAlertLog.toLowerCase()));
         };
         this.searchSubscribeChanged = () => {
             if (!this.searchSubscribe) {
                 this.templatesFilter = this.templates;
                 return;
             }
-            this.templatesFilter = this.templates.filter(item => item.NAME
-                .toLowerCase()
-                .startsWith(this.searchSubscribe.toLowerCase()));
+            this.templatesFilter = this.templates.filter((item) => item.NAME.toLowerCase().startsWith(this.searchSubscribe.toLowerCase()));
         };
         // #endregion
     }
@@ -78,9 +74,7 @@ export class FoundationInboxBase extends FASTElement {
     }
     // #region Tabs
     checkActiveTab(inboxTab) {
-        return this.tabs.activeid === inboxTab.toString()
-            ? ''
-            : 'display: none;';
+        return this.tabs.activeid === inboxTab.toString() ? '' : 'display: none;';
     }
     inboxTabChanged(inboxTab) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -103,8 +97,7 @@ export class FoundationInboxBase extends FASTElement {
     // #endregion
     // #region My Alerts
     // TODO:
-    editAlert() {
-    }
+    editAlert() { }
     playPauseAlert(ruleClicked) {
         return __awaiter(this, void 0, void 0, function* () {
             switch (ruleClicked.RULE_STATUS) {

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

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
 import { customElement } from '@microsoft/fast-element';
+import { FoundationInboxBase } from './inbox-base/inbox-base';
 import { FoundationInboxStyles } from './inbox.styles';
 import { FoundationInboxTemplate } from './inbox.template';
-import { FoundationInboxBase } from './inbox-base/inbox-base';
 /**
  * Foundation inbox component for displaying notifies list.
  * Allow searching, filtering and deleting notifies

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 {
@@ -133,20 +125,15 @@ export const FoundationInboxStyles = css `
     display: flex;
     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 +146,7 @@ export const FoundationInboxStyles = css `
     flex: 1;
     overflow: auto;
   }
-  /***/
-  
+
   /* Subscribe */
   .subscribe-tab-panel {
     display: flex;
@@ -173,7 +159,6 @@ export const FoundationInboxStyles = css `
     flex: 1;
     overflow: auto;
   }
-  /***/
 
   /* Rule and Template */
   .template {
@@ -191,16 +176,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 +190,10 @@ export const FoundationInboxStyles = css `
     visibility: hidden;
   }
 
+  .rule:hover > .rule-status-actions > .rule-actions {
+    visibility: visible;
+  }
+
   .active {
     color: #7acc79;
   }
@@ -227,5 +212,4 @@ export const FoundationInboxStyles = css `
   .rule-action-delete {
     cursor: pointer;
   }
-  /***/
 `;