@genesislcap/pbc-notify-ui 1.0.23 → 1.0.24

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';
@@ -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>
 `;

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

@@ -1,10 +1,10 @@
 import { __awaiter, __decorate } from "tslib";
-import { css, customElement, FASTElement, html, ref, repeat } from '@microsoft/fast-element';
 import { showNotificationDialog } from '@genesislcap/foundation-notifications';
-import { RuleDialogMode } from './rule-dialog/rule-dialog.types';
+import { css, customElement, FASTElement, html, ref, repeat } from '@microsoft/fast-element';
+import { RuleService } from '../../../../services/rule.service';
 import { rulesAndTemplatesStyles } from '../../styles/rules-and-templates.styles';
 import { RULE_MANAGEMENT_COLUMNS } from './columns';
-import { RuleService } from '../../../../services/rule.service';
+import { RuleDialogMode } from './rule-dialog/rule-dialog.types';
 let RuleManagement = class RuleManagement extends FASTElement {
     openRuleDialog() {
         this.ruleDialog.openDialog({ mode: RuleDialogMode.CREATE });
@@ -22,12 +22,14 @@ let RuleManagement = class RuleManagement extends FASTElement {
             dialog: {
                 dismissingAction: {
                     label: 'Dismiss',
-                    action: () => null
+                    action: () => null,
                 },
-                confirmingActions: [{
+                confirmingActions: [
+                    {
                         label: 'Confirm',
-                        action: () => this.ruleService.deleteRule(rule.ID)
-                    }],
+                        action: () => this.ruleService.deleteRule(rule.ID),
+                    },
+                ],
             },
         }, 'zero');
     }
@@ -41,30 +43,24 @@ RuleManagement = __decorate([
         template: html `
     <div class="container">
       <div class="header">
-        <zero-button 
-          class="add"
-          @click=${x => x.openRuleDialog()}
-        >
+        <zero-button class="add" @click=${(x) => x.openRuleDialog()}>
           <zero-icon name="plus" size="lg" variant="solid"></zero-icon>
           Add
         </zero-button>
       </div>
-      
+
       <div class="grid">
         <zero-grid-pro only-template-col-defs>
           <grid-pro-genesis-datasource resource-name="ALL_DYNAMIC_NOTIFY_RULES">
-            ${repeat(x => RULE_MANAGEMENT_COLUMNS(x), html `
-                <grid-pro-column :definition=${x => x} />
+            ${repeat((x) => RULE_MANAGEMENT_COLUMNS(x), html `
+                <grid-pro-column :definition=${(x) => x} />
               `)}
-          </grid-pro-genesis-datasource> 
+          </grid-pro-genesis-datasource>
         </zero-grid-pro>
       </div>
     </div>
 
-    <rule-dialog
-      ${ref('ruleDialog')}
-    >
-    </rule-dialog>
+    <rule-dialog ${ref('ruleDialog')}></rule-dialog>
   `,
         styles: css `
     ${rulesAndTemplatesStyles}

package/dist/esm/components/foundation-notification-dashboard/components/templates/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 TEMPLATE_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 TEMPLATE_MANAGEMENT_COLUMNS = (context) => [
         flex: 1,
     },
     buttonCellRenderer('Edit', (e) => context.editTemplate(e), editIcon),
-    buttonCellRenderer('Delete', (e) => context.deleteTemplate(e), deleteIcon)
+    buttonCellRenderer('Delete', (e) => context.deleteTemplate(e), deleteIcon),
 ];

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

@@ -39,7 +39,7 @@ let ConditionBuilder = class ConditionBuilder extends FASTElement {
     }
     createRightValueItems() {
         let optionsInHTML = '';
-        this.rightValueItems.forEach(item => {
+        this.rightValueItems.forEach((item) => {
             var _a, _b;
             optionsInHTML += `<zero-option value="${(_a = item.UUID) !== null && _a !== void 0 ? _a : ''}">${(_b = item.PARAM_NAME) !== null && _b !== void 0 ? _b : ''}</zero-option>`;
         });
@@ -76,7 +76,7 @@ let ConditionBuilder = class ConditionBuilder extends FASTElement {
     assignLeftValue() {
         this.leftValue = this.condition.LEFT_VALUE
             ? typeof this.condition.LEFT_VALUE === 'string'
-                ? JSON.stringify(this.leftValueItems.find(item => item.FIELD_NAME === this.condition.LEFT_VALUE)) // Edit
+                ? JSON.stringify(this.leftValueItems.find((item) => item.FIELD_NAME === this.condition.LEFT_VALUE)) // Edit
                 : JSON.stringify(this.condition.LEFT_VALUE)
             : JSON.stringify(this.leftValueItems[0]);
         this.$emit('edit', this.condition);
@@ -87,9 +87,7 @@ let ConditionBuilder = class ConditionBuilder extends FASTElement {
             this.rightValueText = this.condition.RIGHT_VALUE;
         }
         else {
-            this.rightValueUserEntry = ((_a = this.parameters) === null || _a === void 0 ? void 0 : _a.length) > 0
-                ? this.condition.RIGHT_VALUE
-                : null;
+            this.rightValueUserEntry = ((_a = this.parameters) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.condition.RIGHT_VALUE : null;
         }
         this.$emit('edit', this.condition);
     }
@@ -113,9 +111,7 @@ let ConditionBuilder = class ConditionBuilder extends FASTElement {
                 this.rightValueText = '';
             }
             else {
-                this.rightValueUserEntry = ((_a = this.parameters) === null || _a === void 0 ? void 0 : _a.length) > 0
-                    ? this.parameters[0].UUID
-                    : null;
+                this.rightValueUserEntry = ((_a = this.parameters) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.parameters[0].UUID : null;
                 this.condition.RIGHT_VALUE = this.rightValueUserEntry;
             }
             this.$emit('edit', this.condition);

package/dist/esm/components/foundation-notification-dashboard/components/templates/template-dialog/condition-builder/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/templates/template-dialog/condition-builder/condition-builder.template.js

@@ -1,59 +1,41 @@
 import { sync } from '@genesislcap/foundation-utils';
-import { html, repeat, when } from "@microsoft/fast-element";
+import { html, repeat, when } from '@microsoft/fast-element';
 import { ALL_LOGICAL_OPERATORS } from '../../../../types/logical-operator';
-import { ALL_RIGHT_CRITERIAS, RIGHT_CRITERIA_USER_ENTRY, RIGHT_CRITERIA_VALUE } from '../../../../types/right-criteria';
+import { ALL_RIGHT_CRITERIAS, RIGHT_CRITERIA_USER_ENTRY, RIGHT_CRITERIA_VALUE, } from '../../../../types/right-criteria';
 export const ConditionBuilderTemplate = html `
   <div class="condition-builder">
-    <zero-select
-      :value=${sync(x => x.leftValue)}
-      class="left-value"
-    >
-      ${repeat(x => x.leftValueItems, html `
-          <zero-option value=${x => JSON.stringify(x)}>${x => x.FIELD_NAME}</zero-option>
+    <zero-select :value=${sync((x) => x.leftValue)} class="left-value">
+      ${repeat((x) => x.leftValueItems, 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 => ALL_RIGHT_CRITERIAS, html `
-          <zero-option value=${x => x}>${x => x}</zero-option>
+
+    <zero-select class="right-criteria" :value=${sync((x) => x.rightCriteria)}>
+      ${repeat((x) => ALL_RIGHT_CRITERIAS, html `
+          <zero-option value=${(x) => x}>${(x) => x}</zero-option>
         `)}
     </zero-select>
 
-    ${when(x => x.rightCriteria === RIGHT_CRITERIA_VALUE, html `
-      <zero-text-field
-        class="right-criteria-value"
-        :value=${sync(x => x.rightValueText)}
-        placeholder="Value"
-      >
-      </zero-text-field>
-    `)}
-    
-    ${when(x => x.rightCriteria === RIGHT_CRITERIA_USER_ENTRY, html `
-      <zero-select
-        class="right-criteria-user-entry"
-        :value=${sync(x => x.rightValueUserEntry)}
-      >
-        ${x => x.rightValueItemsProperty}
-      </zero-select>
-    `)}
+    ${when((x) => x.rightCriteria === RIGHT_CRITERIA_VALUE, html `
+        <zero-text-field
+          class="right-criteria-value"
+          :value=${sync((x) => x.rightValueText)}
+          placeholder="Value"
+        ></zero-text-field>
+      `)}
+    ${when((x) => x.rightCriteria === RIGHT_CRITERIA_USER_ENTRY, html `
+        <zero-select class="right-criteria-user-entry" :value=${sync((x) => x.rightValueUserEntry)}>
+          ${(x) => x.rightValueItemsProperty}
+        </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>