@genesislcap/pbc-notify-ui 1.0.23 → 1.0.25

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

@@ -5,17 +5,17 @@ const LOG_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,
     },
 ];
 let LogRouteManagement = class LogRouteManagement extends FASTElement {
@@ -25,15 +25,14 @@ LogRouteManagement = __decorate([
         name: 'log-route-management',
         template: html `
     <div class="grid">
-    <entity-management
-      resourceName="ALL_LOG_ROUTES"
-      createEvent="EVENT_LOG_ROUTE_CREATE"
-      updateEvent="EVENT_LOG_ROUTE_UPDATE"
-      deleteEvent="EVENT_LOG_ROUTE_DELETE"
-      :columns=${() => [...LOG_ROUTE_MANAGEMENT_COLUMNS]}
-    >
-    </entity-management>
-  </div>
+      <entity-management
+        resourceName="ALL_LOG_ROUTES"
+        createEvent="EVENT_LOG_ROUTE_CREATE"
+        updateEvent="EVENT_LOG_ROUTE_UPDATE"
+        deleteEvent="EVENT_LOG_ROUTE_DELETE"
+        :columns=${() => [...LOG_ROUTE_MANAGEMENT_COLUMNS]}
+      ></entity-management>
+    </div>
   `,
         styles: managementGridStyles,
     })

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

@@ -5,22 +5,22 @@ const MS_TEAMS_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: 'URL',
         headerName: 'Url',
-        flex: 1
+        flex: 1,
     },
 ];
 let MSTeamsRouteManagement = class MSTeamsRouteManagement extends FASTElement {
@@ -30,15 +30,14 @@ MSTeamsRouteManagement = __decorate([
         name: 'ms-teams-route-management',
         template: html `
     <div class="grid">
-    <entity-management
-      resourceName="ALL_MS_TEAMS_ROUTES"
-      createEvent="EVENT_MS_TEAMS_ROUTE_CREATE"
-      updateEvent="EVENT_MS_TEAMS_ROUTE_UPDATE"
-      deleteEvent="EVENT_MS_TEAMS_ROUTE_DELETE"
-      :columns=${() => [...MS_TEAMS_ROUTE_MANAGEMENT_COLUMNS]}
-    >
-    </entity-management>
-  </div>
+      <entity-management
+        resourceName="ALL_MS_TEAMS_ROUTES"
+        createEvent="EVENT_MS_TEAMS_ROUTE_CREATE"
+        updateEvent="EVENT_MS_TEAMS_ROUTE_UPDATE"
+        deleteEvent="EVENT_MS_TEAMS_ROUTE_DELETE"
+        :columns=${() => [...MS_TEAMS_ROUTE_MANAGEMENT_COLUMNS]}
+      ></entity-management>
+    </div>
   `,
         styles: managementGridStyles,
     })

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

@@ -5,32 +5,32 @@ const SCREEN_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: 'ENTITY_ID',
         headerName: 'Entity Id',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'ENTITY_ID_TYPE',
         headerName: 'Entity Id Type',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'EXCLUDE_SENDER',
         headerName: 'Exclude Sender',
-        flex: 1
+        flex: 1,
     },
 ];
 const SCREEN_ROUTE_MANAGEMENT_UI_SCHEMA = {
@@ -49,18 +49,17 @@ ScreenRouteManagement = __decorate([
     customElement({
         name: 'screen-route-management',
         template: html `
-  <div class="grid">
-    <entity-management
-      resourceName="ALL_SCREEN_ROUTES"
-      createEvent="EVENT_SCREEN_NOTIFY_ROUTE_CREATE"
-      updateEvent="EVENT_SCREEN_NOTIFY_ROUTE_UPDATE"
-      deleteEvent="EVENT_SCREEN_NOTIFY_ROUTE_DELETE"
-      :columns=${() => [...SCREEN_ROUTE_MANAGEMENT_COLUMNS]}
-      :createFormUiSchema=${(x) => SCREEN_ROUTE_MANAGEMENT_UI_SCHEMA}
-      :updateFormUiSchema=${(x) => SCREEN_ROUTE_MANAGEMENT_UI_SCHEMA}
-    >
-    </entity-management>
-  </div>
+    <div class="grid">
+      <entity-management
+        resourceName="ALL_SCREEN_ROUTES"
+        createEvent="EVENT_SCREEN_NOTIFY_ROUTE_CREATE"
+        updateEvent="EVENT_SCREEN_NOTIFY_ROUTE_UPDATE"
+        deleteEvent="EVENT_SCREEN_NOTIFY_ROUTE_DELETE"
+        :columns=${() => [...SCREEN_ROUTE_MANAGEMENT_COLUMNS]}
+        :createFormUiSchema=${(x) => SCREEN_ROUTE_MANAGEMENT_UI_SCHEMA}
+        :updateFormUiSchema=${(x) => SCREEN_ROUTE_MANAGEMENT_UI_SCHEMA}
+      ></entity-management>
+    </div>
   `,
         styles: managementGridStyles,
     })

package/dist/esm/components/foundation-notification-dashboard/components/rules/columns.js

@@ -1,40 +1,40 @@
-import { buttonCellRenderer } from "@genesislcap/foundation-entity-management";
-import { deleteIcon, editIcon } from "../../../../utils";
+import { buttonCellRenderer } from '@genesislcap/foundation-entity-management';
+import { deleteIcon, editIcon } from '../../../../utils';
 export const RULE_MANAGEMENT_COLUMNS = (context) => [
     {
         field: 'NAME',
         headerName: 'Name',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'DESCRIPTION',
         headerName: 'Description',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'USER_NAME',
         headerName: 'Username',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'RULE_TABLE',
         headerName: 'Table',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'RULE_STATUS',
         headerName: 'Status',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'RULE_EXPRESSION',
         headerName: 'Expression',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'RESULT_EXPRESSION',
         headerName: 'Result',
-        flex: 1
+        flex: 1,
     },
     {
         field: 'RULE_EXECUTION_STRATEGY',
@@ -42,5 +42,5 @@ export const RULE_MANAGEMENT_COLUMNS = (context) => [
         flex: 1,
     },
     buttonCellRenderer('Edit', (e) => context.editRule(e), editIcon),
-    buttonCellRenderer('Delete', (e) => context.deleteRule(e), deleteIcon)
+    buttonCellRenderer('Delete', (e) => context.deleteRule(e), deleteIcon),
 ];

package/dist/esm/components/foundation-notification-dashboard/components/rules/rule-dialog/rule-condition-builder/rule-condition-builder.js

@@ -3,7 +3,7 @@ import { customElement, FASTElement, observable } from '@microsoft/fast-element'
 import { SystemService } from '../../../../../../services/system.service';
 import { ConditionBuilderStyles as styles } from './rule-condition-builder.styles';
 import { ConditionBuilderTemplate as template } from './rule-condition-builder.template';
-import { RIGHT_CRITERIA } from './rule-condition-builder.types';
+import { RIGHT_CRITERIA, } from './rule-condition-builder.types';
 const name = 'rule-condition-builder';
 let RuleConditionBuilder = class RuleConditionBuilder extends FASTElement {
     constructor() {
@@ -29,7 +29,7 @@ let RuleConditionBuilder = class RuleConditionBuilder extends FASTElement {
         return __awaiter(this, void 0, void 0, function* () {
             this.leftValue = this.condition.LEFT_VALUE
                 ? typeof this.condition.LEFT_VALUE === 'string'
-                    ? JSON.stringify(this.resourceFields.find(item => item.FIELD_NAME === this.condition.LEFT_VALUE)) // Edit
+                    ? JSON.stringify(this.resourceFields.find((item) => item.FIELD_NAME === this.condition.LEFT_VALUE)) // Edit
                     : JSON.stringify(this.condition.LEFT_VALUE)
                 : JSON.stringify(this.resourceFields[0]);
             this.$emit('edit', this.condition);

package/dist/esm/components/foundation-notification-dashboard/components/rules/rule-dialog/rule-condition-builder/rule-condition-builder.styles.js

@@ -7,11 +7,11 @@ export const ConditionBuilderStyles = css `
   }
 
   zero-button {
-    margin: 0px;
+    margin: 0;
   }
 
   .delete {
-    margin: 0px;
+    margin: 0;
     background-color: var(--neutral-layer-1);
   }
 

package/dist/esm/components/foundation-notification-dashboard/components/rules/rule-dialog/rule-condition-builder/rule-condition-builder.template.js

@@ -1,60 +1,49 @@
 import { sync } from '@genesislcap/foundation-utils';
-import { html, repeat } from "@microsoft/fast-element";
+import { html, repeat } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';
-import { RIGHT_CRITERIA } from './rule-condition-builder.types';
 import { ALL_LOGICAL_OPERATORS } from '../../../../types/logical-operator';
+import { RIGHT_CRITERIA } from './rule-condition-builder.types';
 export const ConditionBuilderTemplate = html `
   <div class="condition-builder">
     <zero-select
-      :value=${sync(x => x.leftValue)}
-      :initialValue=${sync(x => x.leftValue)}
+      :value=${sync((x) => x.leftValue)}
+      :initialValue=${sync((x) => x.leftValue)}
       class="left-value"
     >
-      ${repeat(x => x.resourceFields, html `
-          <zero-option value=${x => JSON.stringify(x)}>${x => x.FIELD_NAME}</zero-option>
+      ${repeat((x) => x.resourceFields, html `
+          <zero-option value=${(x) => JSON.stringify(x)}>${(x) => x.FIELD_NAME}</zero-option>
         `)}
     </zero-select>
 
-    <zero-select
-      class="logical-operator"
-      :value=${sync(x => x.logicalOperator)}
-    >
-      ${repeat(x => ALL_LOGICAL_OPERATORS, html `
-          <zero-option value=${x => x}>${x => x}</zero-option>
+    <zero-select class="logical-operator" :value=${sync((x) => x.logicalOperator)}>
+      ${repeat((x) => ALL_LOGICAL_OPERATORS, html `
+          <zero-option value=${(x) => x}>${(x) => x}</zero-option>
         `)}
     </zero-select>
 
-    <zero-select
-      class="right-criteria"
-      :value=${sync(x => x.rightCriteria)}
-    >
-      ${repeat(x => Object.values(RIGHT_CRITERIA), html `
-          <zero-option value=${x => x}>${x => x}</zero-option>
+    <zero-select class="right-criteria" :value=${sync((x) => x.rightCriteria)}>
+      ${repeat((x) => Object.values(RIGHT_CRITERIA), html `
+          <zero-option value=${(x) => x}>${(x) => x}</zero-option>
         `)}
     </zero-select>
 
     <zero-text-field
-      class="right-criteria-value ${x => classNames(['display-none', x.rightCriteria !== RIGHT_CRITERIA.VALUE])}"
-      :value=${sync(x => x.rightValueText)}
+      class="right-criteria-value ${(x) => classNames(['display-none', x.rightCriteria !== RIGHT_CRITERIA.VALUE])}"
+      :value=${sync((x) => x.rightValueText)}
       placeholder="Value"
       autocomplete="off"
-    >
-    </zero-text-field>
-    
+    ></zero-text-field>
+
     <zero-select
-      class="right-criteria-user-entry ${x => classNames(['display-none', x.rightCriteria !== RIGHT_CRITERIA.FIELD])}"
-      :value=${sync(x => x.rightValueUserEntry)}
+      class="right-criteria-user-entry ${(x) => classNames(['display-none', x.rightCriteria !== RIGHT_CRITERIA.FIELD])}"
+      :value=${sync((x) => x.rightValueUserEntry)}
     >
-      ${repeat(x => x.resourceFields, html `
-          <zero-option value=${x => x.FIELD_NAME}>${x => x.FIELD_NAME}</zero-option>
+      ${repeat((x) => x.resourceFields, html `
+          <zero-option value=${(x) => x.FIELD_NAME}>${(x) => x.FIELD_NAME}</zero-option>
         `)}
     </zero-select>
 
-    <zero-button
-      appearance="icon"
-      class="delete"
-      @click=${x => x.deleteCondition()}
-    >
+    <zero-button appearance="icon" class="delete" @click=${(x) => x.deleteCondition()}>
       <zero-icon name="trash" part="icon"></zero-icon>
     </zero-button>
   </div>

package/dist/esm/components/foundation-notification-dashboard/components/rules/rule-dialog/rule-dialog.js

@@ -8,8 +8,8 @@ import { humanize } from '../../../../../utils';
 import { EXPRESSION_TYPE_PLACEHOLDER } from '../../../types/expression-type';
 import { LOGICAL_OPERATOR_EQUALS } from '../../../types/logical-operator';
 import { SEVERITY_INFORMATION } from '../../../types/severity';
-import { createAssignment, createConditions, getAssignmentValue, UUIDGenerator } from '../../templates/template-dialog/template-dialog.utils';
-import { RIGHT_CRITERIA } from './rule-condition-builder/rule-condition-builder.types';
+import { createAssignment, createConditions, getAssignmentValue, UUIDGenerator, } from '../../templates/template-dialog/template-dialog.utils';
+import { RIGHT_CRITERIA, } from './rule-condition-builder/rule-condition-builder.types';
 import { RuleDialogStyles } from './rule-dialog.styles';
 import { RuleDialogTemplate } from './rule-dialog.template';
 import { RuleDialogMode } from './rule-dialog.types';
@@ -23,8 +23,8 @@ let RuleDialog = class RuleDialog extends FASTElement {
         this.resources = [];
     }
     openDialog(params) {
-        var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
             this.resources = yield this.systemService.getResources();
             this.topics = yield this.notifyService.getNotifyRouteTopics();
             this.ruleDialogMode = params.mode;
@@ -43,18 +43,16 @@ let RuleDialog = class RuleDialog extends FASTElement {
                     this.description = rule.RULE_DESCRIPTION;
                     this.resource = rule.RULE_TABLE;
                     // Conditions
-                    this.conditions = (_a = rule.RULE_EXPRESSION.CONDITIONS) === null || _a === void 0 ? void 0 : _a.map(condition => {
+                    this.conditions = (_a = rule.RULE_EXPRESSION.CONDITIONS) === null || _a === void 0 ? void 0 : _a.map((condition) => {
                         var _a, _b;
                         return {
                             ID: UUIDGenerator.createUuid(),
                             LEFT_VALUE: (_a = condition.LEFT.VALUE) !== null && _a !== void 0 ? _a : condition.LEFT.NAME,
                             LOGICAL_OPERATOR: condition.OPERATION,
-                            RIGHT_CRITERIA: condition.RIGHT.TYPE === 'FIELD'
-                                ? RIGHT_CRITERIA.FIELD
-                                : RIGHT_CRITERIA.VALUE,
+                            RIGHT_CRITERIA: condition.RIGHT.TYPE === 'FIELD' ? RIGHT_CRITERIA.FIELD : RIGHT_CRITERIA.VALUE,
                             RIGHT_VALUE: condition.RIGHT.TYPE === EXPRESSION_TYPE_PLACEHOLDER
                                 ? condition.RIGHT.KEY
-                                : (_b = condition.RIGHT.VALUE) !== null && _b !== void 0 ? _b : condition.RIGHT.NAME
+                                : (_b = condition.RIGHT.VALUE) !== null && _b !== void 0 ? _b : condition.RIGHT.NAME,
                         };
                     });
                     // Assignments
@@ -75,25 +73,21 @@ let RuleDialog = class RuleDialog extends FASTElement {
     }
     submit() {
         const rule = Object.assign(Object.assign({}, (this.ruleDialogMode === RuleDialogMode.EDIT && { DYNAMIC_RULE_ID: this.ruleId })), { RULE_NAME: this.name, RULE_DESCRIPTION: this.description, RULE_TABLE: this.resource, RULE_EXPRESSION: {
-                CONDITIONS: createConditions(this.conditions, null)
+                CONDITIONS: createConditions(this.conditions, null),
             }, RESULT_EXPRESSION: {
                 ASSIGNMENTS: [
                     createAssignment('TOPIC', this.topic),
                     createAssignment('HEADER', this.header),
                     createAssignment('BODY', this.message),
-                    createAssignment('NOTIFY_SEVERITY', humanize(this.severity))
-                ]
+                    createAssignment('NOTIFY_SEVERITY', humanize(this.severity)),
+                ],
             } });
         switch (this.ruleDialogMode) {
             case RuleDialogMode.CREATE:
-                this.ruleService
-                    .createRule(rule)
-                    .then(response => this.validateResponse(response));
+                this.ruleService.createRule(rule).then((response) => this.validateResponse(response));
                 break;
             case RuleDialogMode.EDIT:
-                this.ruleService
-                    .updateRule(rule)
-                    .then(response => this.validateResponse(response));
+                this.ruleService.updateRule(rule).then((response) => this.validateResponse(response));
                 break;
         }
     }
@@ -131,13 +125,12 @@ let RuleDialog = class RuleDialog extends FASTElement {
     newCondition() {
         this.conditions.push(this.createEmptyCondition());
     }
-    editCondition(editedCondition) {
-    }
+    editCondition(editedCondition) { }
     deleteCondition(deletedCondition) {
         if (this.conditions.length <= 1) {
             return;
         }
-        this.conditions = this.conditions.filter(condition => condition !== deletedCondition);
+        this.conditions = this.conditions.filter((condition) => condition !== deletedCondition);
     }
     // #endregion
     resourceChanged() {

package/dist/esm/components/foundation-notification-dashboard/components/rules/rule-dialog/rule-dialog.styles.js

@@ -4,7 +4,7 @@ const top = css `
   zero-modal::part(top) {
     padding: calc(var(--design-unit) * 4px);
     border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
-    margin: 0px;
+    margin: 0;
   }
 
   .rule-dialog-top {
@@ -15,9 +15,10 @@ const top = css `
 const bottom = css `
   zero-modal::part(bottom) {
     padding: calc(var(--design-unit) * 4px);
-    border-top: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);;
-    margin: 0px;
+    border-top: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    margin: 0;
   }
+
   .rule-dialog-bottom {
     display: flex;
   }
@@ -53,12 +54,11 @@ export const RuleDialogStyles = css `
     width: 100%;
     gap: calc(var(--design-unit) * 2px);
   }
-  
+
   .conditions {
     border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
     border-radius: calc(var(--control-corner-radius) * 1px);
     display: flex;
-    flex-direction: column;
     padding: calc(var(--design-unit) * 2px);
     flex-direction: column;
   }
@@ -66,11 +66,11 @@ export const RuleDialogStyles = css `
   .condition {
     gap: 0;
     flex-direction: column;
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
 
   zero-button {
-    margin: 0px;
+    margin: 0;
   }
 
   zero-select {
@@ -84,9 +84,11 @@ export const RuleDialogStyles = css `
   .horizontal {
     flex-direction: row;
   }
+
   .destination {
     align-self: center;
   }
+
   .topic {
     min-width: revert-layer;
   }

package/dist/esm/components/foundation-notification-dashboard/components/rules/rule-dialog/rule-dialog.template.js

@@ -1,75 +1,59 @@
 import { sync } from '@genesislcap/foundation-utils';
-import { html, ref, repeat } from "@microsoft/fast-element";
-import { ALL_SEVERITIES } from '../../../types/severity';
+import { html, ref, repeat } from '@microsoft/fast-element';
 import { eventDetail } from '../../../../../utils/eventDetail';
+import { ALL_SEVERITIES } from '../../../types/severity';
 export const RuleDialogTemplate = html `
-  <zero-modal
-    ${ref('dialog')}
-    class="rule-dialog"
-    :onCloseCallback=${(x) => () => x.close()}
-  >
-    <div slot="top" class="rule-dialog-top">
-      ${x => x.ruleDialogTitle}
-    </div>
+  <zero-modal ${ref('dialog')} class="rule-dialog" :onCloseCallback=${(x) => () => x.close()}>
+    <div slot="top" class="rule-dialog-top">${(x) => x.ruleDialogTitle}</div>
 
     <div class="rule-dialog-content">
       <div class="content-row">
         <div class="control">
           <label>Name</label>
           <zero-text-field
-            :value=${sync(x => x.name)}
+            :value=${sync((x) => x.name)}
             autofocus
             autocomplete="off"
-          >
-          </zero-text-field>
+          ></zero-text-field>
         </div>
 
         <div class="control">
           <label>Description</label>
           <zero-text-field
-            :value=${sync(x => x.description)}
+            :value=${sync((x) => x.description)}
             autocomplete="off"
-          >
-          </zero-text-field>
+          ></zero-text-field>
         </div>
       </div>
 
       <div class="content-row">
         <div class="control">
           <label>Resource</label>
-          <zero-select
-            :value=${sync(x => x.resource)}
-            position="below"
-          >
-            ${repeat(x => x.resources, html `
-                <zero-option value=${x => x}>${x => x}</zero-option>
+          <zero-select :value=${sync((x) => x.resource)} position="below">
+            ${repeat((x) => x.resources, html `
+                <zero-option value=${(x) => x}>${(x) => x}</zero-option>
               `)}
           </zero-select>
         </div>
 
         <div class="control">
           <label>Topic</label>
-          <zero-select
-            :value=${sync(x => x.topic)}
-          >
-            ${repeat(x => x.topics, html `
-                <zero-option value=${x => x}>${x => x}</zero-option>
+          <zero-select :value=${sync((x) => x.topic)}>
+            ${repeat((x) => x.topics, html `
+                <zero-option value=${(x) => x}>${(x) => x}</zero-option>
               `)}
           </zero-select>
         </div>
-        
+
         <div class="control">
           <label>Severity</label>
-          <zero-select
-            :value=${sync(x => x.severity)}
-          >
+          <zero-select :value=${sync((x) => x.severity)}>
             <options-datasource
-              value-field='value'
-              label-field='value'
-              option-element='zero-option'
-              :data=${_ => ALL_SEVERITIES.map(value => ({ value, label: value }))}
-            >
-            </options-datasource>
+              value-field="value"
+              label-field="value"
+              option-element="zero-option"
+              :data=${(_) => ALL_SEVERITIES.map((value) => ({ value, label: value }))}
+            ></options-datasource>
           </zero-select>
         </div>
       </div>
@@ -77,20 +61,12 @@ export const RuleDialogTemplate = html `
       <div class="content-row">
         <div class="control">
           <label>Header</label>
-          <zero-text-field
-            :value=${sync(x => x.header)}
-            autocomplete="off"
-          >
-          </zero-text-field>
+          <zero-text-field :value=${sync((x) => x.header)} autocomplete="off"></zero-text-field>
         </div>
-        
+
         <div class="control">
           <label>Message</label>
-          <zero-text-field
-            :value=${sync(x => x.message)}
-            autocomplete="off"
-          >
-          </zero-text-field>
+          <zero-text-field :value=${sync((x) => x.message)} autocomplete="off"></zero-text-field>
         </div>
       </div>
 
@@ -98,21 +74,18 @@ export const RuleDialogTemplate = html `
         <label>Condition(s)</label>
         <div class="conditions">
           <div class="content-row condition">
-            ${repeat(x => x.conditions, html `
+            ${repeat((x) => x.conditions, html `
                 <rule-condition-builder
                   :resource=${(x, c) => c.parent.resource}
-                  :condition=${x => x}
+                  :condition=${(x) => x}
                   @edit=${(x, c) => c.parent.editCondition(eventDetail(c))}
                   @delete=${(x, c) => c.parent.deleteCondition(eventDetail(c))}
-                >
-                </rule-condition-builder>
+                ></rule-condition-builder>
               `)}
           </div>
 
           <div class="content-row">
-            <zero-button
-              @click=${x => x.newCondition()}
-            >
+            <zero-button @click=${(x) => x.newCondition()}>
               <zero-icon name="plus"></zero-icon>
               Condition
             </zero-button>
@@ -122,12 +95,7 @@ export const RuleDialogTemplate = html `
     </div>
 
     <div slot="bottom" class="rule-dialog-bottom">
-      <zero-button
-        appearance="accent"
-        @click=${x => x.submit()}
-      >
-        Submit
-      </zero-button>
+      <zero-button appearance="accent" @click=${(x) => x.submit()}>Submit</zero-button>
     </div>
   </zero-modal>
 `;