Conditionals fixes and tweaks

- Fixes multiple items in #2772;
- Fix missing wrapping markup, convert empty span to template;
- Add INPUT_TYPES object to allow proper setting of 'text' input type;
- Fix padding on <selects> for better inline alignment with other input
types;

src/plugins/condition/components/Condition.vue

@@ -82,6 +82,7 @@
 
         <span class="c-cdef__label">Output</span>
         <span class="c-cdef__controls">
+            <span class="c-cdef__control">
                 <select v-model="selectedOutputSelection"
                         @change="setOutputValue"
                 >
@@ -93,6 +94,8 @@
                         {{ initCap(option) }}
                     </option>
                 </select>
+            </span>
+            <span class="c-cdef__control">
                 <input v-if="selectedOutputSelection === outputOptions[2]"
                        v-model="condition.configuration.output"
                        class="t-condition-name-input"
@@ -100,6 +103,7 @@
                        @blur="persist"
                 >
             </span>
+        </span>
 
         <div v-if="!condition.isDefault"
              class="c-cdef__match-and-criteria"

src/plugins/condition/components/Criterion.vue

@@ -45,7 +45,7 @@
                     {{ option.text }}
                 </option>
             </select>
-            <span v-if="!enumerations.length">
+            <template v-if="!enumerations.length">
                 <span v-for="(item, inputIndex) in inputCount"
                       :key="inputIndex"
                       class="c-cdef__control__inputs"
@@ -57,7 +57,7 @@
                     >
                     <span v-if="inputIndex < inputCount-1">and</span>
                 </span>
-            </span>
+            </template>
             <span v-else>
                 <span v-if="inputCount && criterion.operation"
                       class="c-cdef__control"
@@ -79,6 +79,7 @@
 
 <script>
 import { OPERATIONS } from '../utils/operations';
+import { INPUT_TYPES } from '../utils/operations';
 
 export default {
     inject: ['openmct'],
@@ -109,7 +110,8 @@ export default {
             inputCount: 0,
             rowLabel: '',
             operationFormat: '',
-            enumerations: []
+            enumerations: [],
+            inputTypes: INPUT_TYPES
         }
     },
     computed: {
@@ -125,9 +127,9 @@ export default {
             for (let i = 0; i < this.filteredOps.length; i++) {
                 if (this.criterion.operation === this.filteredOps[i].name) {
                     if (this.filteredOps[i].appliesTo.length === 1) {
-                        type = this.filteredOps[i].appliesTo[0];
+                        type = this.inputTypes[this.filteredOps[i].appliesTo[0]];
                     } else {
-                        type = 'string'
+                        type = 'text'
                     }
                     break;
                 }

src/plugins/condition/utils/operations.js

@@ -204,3 +204,8 @@ export const OPERATIONS = [
         }
     }
 ];
+
+export const INPUT_TYPES = {
+    'string': 'text',
+    'number': 'number'
+};

src/styles/_controls.scss

@@ -359,7 +359,7 @@ select {
     background-position: right .4em top 80%, 0 0;
     border: none;
     border-radius: $controlCr;
-    padding: 1px 20px 1px $interiorMargin;
+    padding: 2px 20px 2px $interiorMargin;
 
     *,
     option {