@genesislcap/pbc-notify-ui 1.0.1 → 1.0.3

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

@@ -1,6 +1,6 @@
 import { sync } from '@genesislcap/foundation-utils';
 import { html, ref, repeat, when } from '@microsoft/fast-element';
-import { getIcon, getSeverityColor, getStatus } from './inbox.utils';
+import { getFormattedDate, getIcon, getSeverityColor, getStatus } from './inbox.utils';
 export var InboxTab;
 (function (InboxTab) {
     InboxTab[InboxTab["AlertLog"] = 0] = "AlertLog";
@@ -12,179 +12,174 @@ export var InboxTab;
  */
 export const FoundationInboxTemplate = html `
   <zero-flyout ${ref('flyout')} position="right" @closed=${(x) => (x.flyoutClosed = true)} :closed=${(x) => x.flyoutClosed} displayHeader=${false}>
-    <div class="inbox">
-      <div class="inbox-header">
-        <div class="inbox-header-title">
-          Alerts
-        </div>
-        <zero-button
-          class="inbox-header-close"
-          appearance="primary-gradient"
-          @click=${x => x.close()}
-        >
-          <zero-icon part="icon" name="xmark" size="xl"></zero-icon>
-        </zero-button>
-      </div>
+  <div class="inbox-header">
+    <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>
 
-      <div class="inbox-content">
-        <zero-tabs
-          ${(ref('tabs'))}
-          appearance="secondary"
-          activeid=${x => InboxTab.AlertLog}
-        >
-          <zero-tab
-            slot="alert-log-tab"
-            id=${x => InboxTab.AlertLog}
-            @click=${x => x.inboxTabChanged(InboxTab.AlertLog)}
-            appearance="secondary"
-          >
-            Alert Log
-          </zero-tab>
-          <zero-tab
-            slot="my-alerts-tab"
-            id=${x => InboxTab.MyAlerts}
-            @click=${x => x.inboxTabChanged(InboxTab.MyAlerts)}
-            appearance="secondary"
+  <div class="inbox-content">
+    <zero-tabs
+      ${(ref('tabs'))}
+      appearance="secondary"
+      activeid=${x => InboxTab.AlertLog}
+    >
+      <zero-tab
+        slot="alert-log-tab"
+        id=${x => InboxTab.AlertLog}
+        @click=${x => x.inboxTabChanged(InboxTab.AlertLog)}
+        appearance="secondary"
+      >
+        Alert Log
+      </zero-tab>
+      <zero-tab
+        slot="my-alerts-tab"
+        id=${x => InboxTab.MyAlerts}
+        @click=${x => x.inboxTabChanged(InboxTab.MyAlerts)}
+        appearance="secondary"
+      >
+        My Alerts
+      </zero-tab>
+      <zero-tab
+        slot="subscribe-tab"
+        id=${x => InboxTab.Subscribe}
+        @click=${x => x.inboxTabChanged(InboxTab.Subscribe)}
+        appearance="secondary"
+      >
+        Subscribe
+      </zero-tab>
+      
+      <zero-tab-panel
+        slot="alert-log-tab"
+        class="alert-log-tab-panel"
+        id=${x => 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"
           >
-            My Alerts
-          </zero-tab>
-          <zero-tab
-            slot="subscribe-tab"
-            id=${x => InboxTab.Subscribe}
-            @click=${x => x.inboxTabChanged(InboxTab.Subscribe)}
-            appearance="secondary"
-          >
-            Subscribe
-          </zero-tab>
-          
-          <zero-tab-panel
-            slot="alert-log-tab"
-            class="alert-log-tab-panel"
-            id=${x => 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) => x.CREATED_AT}</span>
-                      </div>
-                    </div>
-                    <div class="toast-delete" @click=${(x, c) => c.parent.deleteNotifyAlert(x.ALERT_ID)}>
-                      <zero-icon name="xmark" variant="solid" size="lg"><zero-icon>
-                    </div>
+          </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>
-          </zero-tab-panel>
+                </div>
+                <div class="toast-delete" @click=${(x, c) => c.parent.deleteNotifyAlert(x.ALERT_ID)}>
+                  <zero-icon name="xmark" variant="solid" size="lg"><zero-icon>
+                </div>
+              </div>
+            `)}
+        </div>
+      </zero-tab-panel>
 
-          <zero-tab-panel
-            slot="my-alerts-tab"
-            class="my-alerts-tab-panel"
-            id=${x => 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-status-date-actions">
-                      <div class="rule-status ${x => getStatus(x.RULE_STATUS).toLowerCase()}">
-                        ${(x, c) => getStatus(x.RULE_STATUS)}
-                      </div>
-                      <!-- <div class="rule-datetime">${(x, c) => c.parent.getFormattedDate(x.TIMESTAMP)}</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>
-                        <span class="rule-action-delete" @click=${(x, c) => c.parent.deleteAlert(x)}>
-                          <zero-icon name="trash"></zero-icon>
-                        </span>
-                      </div>
-                    </div>
+      <zero-tab-panel
+        slot="my-alerts-tab"
+        class="my-alerts-tab-panel"
+        id=${x => 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-datetime">${(x, c) => getFormattedDate(x.DATETIME)}</div>
+                <div class="rule-status-actions">
+                  <div class="rule-status ${x => getStatus(x.RULE_STATUS).toLowerCase()}">
+                    ${(x, c) => getStatus(x.RULE_STATUS)}
                   </div>
-                `)}
-            </div>
-          </zero-tab-panel>
+                  <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>
+                    <span class="rule-action-delete" @click=${(x, c) => c.parent.deleteAlert(x)}>
+                      <zero-icon name="trash"></zero-icon>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            `)}
+        </div>
+      </zero-tab-panel>
 
-          <zero-tab-panel
-            slot="subscribe-tab"
-            class="subscribe-tab-panel"
-            id=${x => InboxTab.Subscribe}
-            style=${x => x.checkActiveTab(InboxTab.Subscribe)}
+      <zero-tab-panel
+        slot="subscribe-tab"
+        class="subscribe-tab-panel"
+        id=${x => InboxTab.Subscribe}
+        style=${x => x.checkActiveTab(InboxTab.Subscribe)}
+      >
+        <div class="search">
+          <zero-text-field
+            class="search-input"
+            :value=${sync(x => x.searchSubscribe)}
+            placeholder="Search Templates..."
+            autocomplete="off"
           >
-            <div class="search">
-              <zero-text-field
-                class="search-input"
-                :value=${sync(x => x.searchSubscribe)}
-                placeholder="Search Templates..."
-                autocomplete="off"
+          </zero-text-field>
+        </div>
+        <div
+          class="subscribe-tab-content"
+        >
+          ${repeat((x) => x.templatesFilter, html `
+              <div
+                class="rule-template"
+                @click=${(x, c) => c.parent.openAlertSubscription(x)}
+                id=${(x) => x.ID}
               >
-              </zero-text-field>
-            </div>
-            <div
-              class="subscribe-tab-content"
-            >
-              ${repeat((x) => x.templatesFilter, html `
-                  <div
-                    class="rule-template"
-                    @click=${(x, c) => c.parent.openAlertSubscription(x)}
-                    id=${(x) => x.ID}
-                  >
-                    <div class="rule-template-name">${x => x.NAME}</div>
-                    <div class="rule-template-description">${x => x.DESCRIPTION}</div>
-                    <!--
-                    <div class="rule-template-datetime">${(x, c) => c.parent.getFormattedDate(x.TIMESTAMP)}</div>
-                    -->
+                <div class="rule-template-name">${x => x.NAME}</div>
+                <div class="rule-template-description">${x => x.DESCRIPTION}</div>
+                <div class="rule-template-datetime">${(x, c) => getFormattedDate(x.DATETIME)}</div>
+              </div>
+            `)}
+        </div>
+        ${when(x => x.ruleTemplateSelected, html `
+            <div class="subscribe-to-alert">
+              <div class="subscribe-to-alert-header">
+                Subscribe to <span style="font-weight: bold;">${x => { var _a; return (_a = x.templates.filter(template => template.ID === x.ruleTemplateSelected.DYNAMIC_RULE_ID)[0]) === null || _a === void 0 ? void 0 : _a.NAME; }}</span>
+              </div>
+              ${when(x => Object.values(x.ruleTemplateSelected.PARAMETERS).length === 0, html `
+                  <p style="padding-left: 10px;">The selected template doesn't have parameters.</p>
+                `)}
+              ${when(x => Object.values(x.ruleTemplateSelected.PARAMETERS).length > 0, html `
+                  <div class="subscribe-to-alert-content">
+                    ${x => x.subscribeToAlertComponent}
                   </div>
                 `)}
+              <div class="subscribe-to-alert-footer">
+                <zero-button
+                  class="subscribe"
+                  @click=${x => x.subscribeAlert()}
+                  ?disabled=${x => x.subscribeDisabled}
+                >
+                  Subscribe
+                </zero-button>
+              </div>
             </div>
-            ${when(x => x.ruleTemplateSelected, html `
-                <div class="subscribe-to-alert">
-                  <div class="subscribe-to-alert-header">
-                    Subscribe to <span style="font-weight: bold;">${x => { var _a; return (_a = x.templates.filter(template => template.ID === x.ruleTemplateSelected.DYNAMIC_RULE_ID)[0]) === null || _a === void 0 ? void 0 : _a.NAME; }}</span>
-                  </div>
-                  ${when(x => Object.values(x.ruleTemplateSelected.PARAMETERS).length === 0, html `
-                      <p style="padding-left: 10px;">The selected template doesn't have parameters.</p>
-                    `)}
-                  ${when(x => Object.values(x.ruleTemplateSelected.PARAMETERS).length > 0, html `
-                      <div class="subscribe-to-alert-content">
-                        ${x => x.subscribeToAlertComponent}
-                      </div>
-                    `)}
-                  <div class="subscribe-to-alert-footer">
-                    <zero-button
-                      class="subscribe"
-                      @click=${x => x.subscribeAlert()}
-                      appearance="primary-gradient"
-                    >
-                      Subscribe
-                    </zero-button>
-                  </div>
-                </div>
-              `)}
-          </zero-tab-panel>
-        </zero-tabs>
-      </div>
-    </div>
+          `)}
+      </zero-tab-panel>
+    </zero-tabs>
+  </div>
   </zero-flyout>
 `;

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

@@ -1,7 +1,3 @@
-export var NotifyResourceNames;
-(function (NotifyResourceNames) {
-    NotifyResourceNames["ALL_RECORDS"] = "ALL_NOTIFY_ALERT_RECORDS";
-})(NotifyResourceNames || (NotifyResourceNames = {}));
 export var RuleStatus;
 (function (RuleStatus) {
     RuleStatus["ENABLED"] = "ENABLED";

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

@@ -1,20 +1,24 @@
 import { html, repeat, when } from "@microsoft/fast-element";
 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 { RuleStatus } from "./inbox.types";
+import { SEVERITY_CRITICAL, SEVERITY_INFORMATION, SEVERITY_SERIOUS, SEVERITY_WARNING } from "../foundation-notification-dashboard/types/severity";
+import { EXPRESSION_TYPE_PLACEHOLDER } from "../foundation-notification-dashboard/types/expression-type";
+import { chartPinkWebRGBA, primaryBlueWebRGBA, secondaryOrangeWebRGBA, warningYellowWebRGBA } from "@genesislcap/foundation-zero";
 export const EMPTY_HTML = html ``;
-const getFindIndexCondition = (parameters, parameter) => Object.values(parameters)
-    .findIndex(p => p.PARAM_NAME === parameter.PARAM_NAME) === 0;
-export const createSubscribeComponent = (parameters) => html `
+const isFirstElement = (parameters, parameter) => Object.values(parameters).findIndex(p => p.PARAM_NAME === parameter.PARAM_NAME) === 0;
+export const createSubscribeComponent = (parameters, parametersOperatorsMap) => html `
   ${repeat(x => Object.values(parameters), html `
       <div class="control">
-        <label>${x => x.PARAM_LABEL}</label>
+        <label>
+          <span style="font-weight: bold;">${x => x.PARAM_LABEL} </span>
+          <span>${x => humanize(parametersOperatorsMap[x.PARAM_NAME]).toLowerCase()}</span>
+        </label>
         
         <!-- USER_TEXT -->
         ${when(x => x.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_USER_TEXT, html `                            
             ${when(x => x.PARAM_TYPE === PARAM_TYPE_STRING, html `
                 <zero-text-field
-                  autofocus=${x => getFindIndexCondition(parameters, x)}
+                  autofocus=${x => isFirstElement(parameters, x)}
                   class="input-field"
                   @input=${(x, c) => c.parent.parameterEdit(x, c.event.target.value)}
                 >
@@ -24,7 +28,7 @@ export const createSubscribeComponent = (parameters) => html `
             ${when(x => x.PARAM_TYPE === PARAM_TYPE_NUMBER, html `
                 <zero-number-field
                   hide-step
-                  autofocus=${x => getFindIndexCondition(parameters, x)}
+                  autofocus=${x => isFirstElement(parameters, x)}
                   class="input-field"
                   @input=${(x, c) => c.parent.parameterEdit(x, c.event.target.value)}
                 >
@@ -33,7 +37,7 @@ export const createSubscribeComponent = (parameters) => html `
 
             ${when(x => x.PARAM_TYPE === PARAM_TYPE_BOOLEAN, html `
                 <zero-select
-                  autofocus=${x => getFindIndexCondition(parameters, x)}
+                  autofocus=${x => isFirstElement(parameters, x)}
                   class="input-field"
                   @change=${(x, c) => console.log(x)}
                 >
@@ -46,7 +50,7 @@ export const createSubscribeComponent = (parameters) => html `
         <!-- DEFINED_GROUP -->
         ${when(x => x.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_DEFINED_GROUP, html `
             <zero-select
-              autofocus=${x => getFindIndexCondition(parameters, x)}
+              autofocus=${x => isFirstElement(parameters, x)}
               class="input-field"
               position="below"
               @change=${(x, c) => c.parent.parameterEdit(x, c.event.target.value)}
@@ -60,7 +64,7 @@ export const createSubscribeComponent = (parameters) => html `
         <!-- TODO: REQ_REP -->
         ${when(x => x.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_REQ_REP, html `
             <zero-select
-              autofocus=${x => getFindIndexCondition(parameters, x)}
+              autofocus=${x => isFirstElement(parameters, x)}
               @change=${(x, c) => console.log(x)}
             >
             </zero-select>
@@ -68,32 +72,46 @@ export const createSubscribeComponent = (parameters) => html `
       </div>
     `)}
 `;
-export const getStatus = (ruleStatus) => ruleStatus == RuleStatus.ENABLED
+export const humanize = (s) => {
+    if (!s) {
+        return '';
+    }
+    let i, frags = s.split('_');
+    for (i = 0; i < frags.length; i++) {
+        frags[i] = frags[i].charAt(0).toUpperCase() + frags[i].slice(1).toLowerCase();
+    }
+    return frags.join(' ');
+};
+export const getStatus = (ruleStatus) => ruleStatus == 'ENABLED'
     ? 'Active'
     : 'Paused';
-export const getIcon = (ruleStatus) => ruleStatus === RuleStatus.ENABLED
+export const getIcon = (ruleStatus) => ruleStatus === 'ENABLED'
     ? 'pause'
     : 'play';
-export const getFormattedDate = (dateTime) => new Intl.DateTimeFormat('en-UK', {
-    year: 'numeric',
-    month: 'numeric',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-    second: 'numeric'
-}).format(dateTime);
+export const getFormattedDate = (dateTimeInMills) => {
+    const dateTime = new Date(dateTimeInMills);
+    return `${dateTime.toLocaleDateString()} ${dateTime.toLocaleTimeString()}`;
+};
 export function getSeverityColor(severity) {
-    switch (severity.toLowerCase()) {
-        case 'information':
-            return '#01C9FF'; // Blue
-        case 'warning':
-            return '#fff989'; // Yellow
-        case 'serious':
-            return '#E7700D'; // Orange
-        case 'critical':
-            return '#F9644D'; // Red
+    switch (severity.toUpperCase()) {
+        case SEVERITY_INFORMATION:
+            return primaryBlueWebRGBA(1);
+        case SEVERITY_CRITICAL:
+            return warningYellowWebRGBA(1);
+        case SEVERITY_SERIOUS:
+            return secondaryOrangeWebRGBA(1);
+        case SEVERITY_WARNING:
+            return chartPinkWebRGBA(1);
         default:
             console.error('Unexpected severity:', severity);
             return '#FF';
     }
 }
+export function createParametersOperatorMap(conditions) {
+    return conditions.reduce((acc, condition) => {
+        if (condition.RIGHT.TYPE == EXPRESSION_TYPE_PLACEHOLDER) {
+            acc[condition.RIGHT.KEY] = condition.OPERATION;
+        }
+        return acc;
+    }, {});
+}

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

@@ -21,7 +21,6 @@ let ConditionBuilder = class ConditionBuilder extends FASTElement {
             _super.connectedCallback.call(this);
             if (this.resource) {
                 this.leftValueItems = yield this.systemService.getFields(this.resource);
-                // this.leftValue = JSON.stringify(this.leftValueItems[0]);
             }
             this.rightValueItems = this.parameters;
             this.createRightValueItems();
@@ -50,7 +49,6 @@ let ConditionBuilder = class ConditionBuilder extends FASTElement {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.resource) {
                 this.leftValueItems = yield this.systemService.getFields(this.resource);
-                // this.leftValue = JSON.stringify(this.leftValueItems[0]);
             }
         });
     }
@@ -64,7 +62,6 @@ let ConditionBuilder = class ConditionBuilder extends FASTElement {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.resource) {
                 this.leftValueItems = yield this.systemService.getFields(this.resource);
-                // this.leftValue = JSON.stringify(this.leftValueItems[0]);
             }
             this.assignLeftValue();
             this.logicalOperator = this.condition.LOGICAL_OPERATOR;

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

@@ -2,8 +2,8 @@ import { css } from '@microsoft/fast-element';
 export const ConditionBuilderStyles = css `
   .condition-builder {
     display: flex;
-    gap: 8px;
-    margin-bottom: 8px;
+    gap: calc(var(--design-unit) * 2px);
+    margin-bottom: calc(var(--design-unit) * 2px);
   }
 
   zero-button {
@@ -12,11 +12,11 @@ export const ConditionBuilderStyles = css `
 
   .delete {
     margin: 0px;
-    background-color: rgba(242, 242, 242, 0.05);
+    background-color: var(--neutral-layer-1);
   }
 
   .delete:hover {
-    background-color: rgba(255, 255, 255, 0.11);
+    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 89%);
   }
 
   zero-text-field {

package/dist/esm/components/foundation-notification-dashboard/components/parameter-builder/parameter-builder.styles.js

@@ -3,8 +3,8 @@ const PARAM_SOURCE_WIDTH = '200';
 export const ParameterBuilderStyles = css `
   .parameter-builder {
     display: flex;
-    gap: 8px;
-    margin-bottom: 8px;
+    gap: calc(var(--design-unit) * 2px);
+    margin-bottom: calc(var(--design-unit) * 2px);
   }
   
   zero-button {
@@ -13,11 +13,11 @@ export const ParameterBuilderStyles = css `
   
   .delete {
     margin: 0px;
-    background-color: rgba(242, 242, 242, 0.05);
+    background-color: var(--neutral-layer-1);
   }
 
   .delete:hover {
-    background-color: rgba(255, 255, 255, 0.11);
+    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 89%);
   }
 
   zero-text-field {

package/dist/esm/components/foundation-notification-dashboard/components/parameter-builder/parameter-builder.template.js

@@ -22,6 +22,7 @@ export const ParameterBuilderTemplate = html `
       id="param-source-type"
       :value=${sync(x => x.sourceType)}
       class="param-source-type"
+      position="below"
     >
       ${repeat(x => ALL_PARAM_SOURCE_TYPES, html `
           <zero-option value=${x => x}>${x => x}</zero-option>
@@ -64,6 +65,7 @@ export const ParameterBuilderTemplate = html `
       id="param-type"
       :value=${sync(x => x.type)}
       class="param-type"
+      position="below"
     >
       ${repeat(x => ALL_PARAM_TYPES, html `
           <zero-option value=${x => x}>${x => x}</zero-option>