diff --git a/client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue b/client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue
new file mode 100644
index 00000000000..195d777edc3
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue
@@ -0,0 +1,138 @@
+<template>
+    <div class="rule-column-selector" v-if="!multiple || !ordered">
+        <label class="d-flex justify-content-end align-items-center">
+            <span class="mr-auto" v-b-tooltip.hover :title="help">{{ label }}</span>
+            <div class="mr-1" v-b-tooltip.hover :title="title">
+                <select2 :value="target" @input="handleInput" :multiple="multiple">
+                    <option v-for="(col, index) in colHeaders" :value="index" :key="col">{{ col }}</option>
+                </select2>
+            </div>
+            <slot></slot>
+        </label>
+    </div>
+    <div class="rule-column-selector" v-else>
+        <span>{{ label }}</span>
+        <slot></slot>
+        <ol>
+            <li v-for="(targetEl, index) in target" :index="index" :key="targetEl" class="rule-column-selector-target">
+                {{ colHeaders[targetEl] }}
+                <span class="fa fa-times rule-column-selector-target-remove" @click="handleRemove(index)"></span>
+                <span class="fa fa-arrow-up rule-column-selector-up" v-if="index !== 0" @click="moveUp(index)"></span>
+                <span
+                    class="fa fa-arrow-down rule-column-selector-down"
+                    v-if="index < target.length - 1"
+                    @click="moveUp(index + 1)"
+                ></span>
+            </li>
+            <li v-if="this.target.length < this.colHeaders.length">
+                <span class="rule-column-selector-target-add" v-if="!orderedEdit">
+                    <i @click="$emit('update:orderedEdit', true)">... {{ l("Assign Another Column") }}</i>
+                </span>
+                <span class="rule-column-selector-target-select" v-else>
+                    <select2 @input="handleAdd" placeholder="Select a column">
+                        <option /><!-- empty option selection for placeholder -->
+                        <option v-for="(col, index) in remainingHeaders" :value="index" :key="col">{{ col }}</option>
+                    </select2>
+                </span>
+            </li>
+        </ol>
+    </div>
+</template>
+
+<script>
+import Vue from "vue";
+import _l from "utils/localization";
+import Select2 from "components/Select2";
+export default {
+    components: {
+        Select2,
+    },
+    data: function () {
+        return {
+            l: _l,
+        };
+    },
+    props: {
+        target: {
+            required: true,
+        },
+        label: {
+            required: false,
+            type: String,
+            default: _l("From Column"),
+        },
+        help: {
+            required: false,
+        },
+        colHeaders: {
+            type: Array,
+            required: true,
+        },
+        multiple: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+        ordered: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+        valueAsList: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+        orderedEdit: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    },
+    computed: {
+        remainingHeaders() {
+            const colHeaders = this.colHeaders;
+            if (!this.multiple) {
+                return colHeaders;
+            }
+            const remaining = {};
+            for (const key in colHeaders) {
+                if (this.target.indexOf(parseInt(key)) === -1) {
+                    remaining[key] = colHeaders[key];
+                }
+            }
+            return remaining;
+        },
+        title() {
+            return _l("Select a column");
+        },
+    },
+    methods: {
+        handleInput(value) {
+            if (this.multiple) {
+                // https://stackoverflow.com/questions/262427/why-does-parseint-yield-nan-with-arraymap
+                const val = value.map((idx) => parseInt(idx));
+                this.$emit("update:target", val);
+            } else {
+                let val = parseInt(value);
+                if (this.valueAsList) {
+                    val = [val];
+                }
+                this.$emit("update:target", val);
+            }
+        },
+        handleAdd(value) {
+            this.target.push(parseInt(value));
+            this.$emit("update:orderedEdit", false);
+        },
+        handleRemove(index) {
+            this.target.splice(index, 1);
+        },
+        moveUp(value) {
+            const swapVal = this.target[value - 1];
+            Vue.set(this.target, value - 1, this.target[value]);
+            Vue.set(this.target, value, swapVal);
+        },
+    },
+};
+</script>
diff --git a/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue b/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue
new file mode 100644
index 00000000000..54f1ce1ca4b
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue
@@ -0,0 +1,54 @@
+<template>
+    <li class="rule">
+        <span v-b-tooltip.hover :title="help">Set {{ columnsLabel }} as {{ typeDisplay }}</span>
+        <span v-b-tooltip.hover :title="titleEdit" class="fa fa-edit" @click="edit"></span>
+        <span v-b-tooltip.hover :title="titleRemove" class="fa fa-times" @click="remove"></span>
+    </li>
+</template>
+
+<script>
+import _l from "utils/localization";
+import RuleDefs from "mvc/rules/rule-definitions";
+const MAPPING_TARGETS = RuleDefs.MAPPING_TARGETS;
+
+export default {
+    props: {
+        type: {
+            type: String,
+            required: true,
+        },
+        columns: {
+            required: true,
+        },
+        colHeaders: {
+            type: Array,
+            required: true,
+        },
+    },
+    methods: {
+        remove() {
+            this.$emit("remove");
+        },
+        edit() {
+            this.$emit("edit");
+        },
+    },
+    computed: {
+        typeDisplay() {
+            return MAPPING_TARGETS[this.type].label;
+        },
+        help() {
+            return MAPPING_TARGETS[this.type].help || "";
+        },
+        titleEdit() {
+            return _l("Edit column definition");
+        },
+        titleRemove() {
+            return _l("Remove this column definition");
+        },
+        columnsLabel() {
+            return RuleDefs.columnDisplay(this.columns, this.colHeaders);
+        },
+    },
+};
+</script>
diff --git a/client/galaxy/scripts/components/RuleBuilder/RegularExpressionInput.vue b/client/galaxy/scripts/components/RuleBuilder/RegularExpressionInput.vue
new file mode 100644
index 00000000000..36f65600040
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/RegularExpressionInput.vue
@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <label for="regular_expression" v-b-tooltip.hover :title="title">{{ label }}</label>
+        <span v-b-popover.html="popoverContent" :title="popoverTitle" class="fa fa-question"></span>
+        <input
+            v-b-tooltip.hover.left
+            :title="title"
+            name="regular_expression"
+            class="rule-regular-expression"
+            type="text"
+            :value="target"
+            @input="$emit('update:target', $event.target.value)"
+        />
+    </div>
+</template>
+
+<script>
+import _l from "utils/localization";
+
+export default {
+    props: {
+        target: {
+            required: true,
+        },
+    },
+    computed: {
+        label() {
+            return _l("Regular Expression");
+        },
+        title() {
+            return _l("Enter a regular expression.");
+        },
+        popoverTitle() {
+            return _l("Regular Expressions");
+        },
+        popoverContent() {
+            return _l(
+                `Regular expressions are patterns used to match character combinations in strings. This input accepts Python-style regular expressions, find more information about these in <a href="https://pythonforbiologists.com/regular-expressions/">this Python for Biologists tutorial</a>.`
+            );
+        },
+    },
+};
+</script>
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleComponent.vue b/client/galaxy/scripts/components/RuleBuilder/RuleComponent.vue
new file mode 100644
index 00000000000..474e6cbc4a4
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleComponent.vue
@@ -0,0 +1,48 @@
+<template>
+    <div v-if="ruleType == displayRuleType" class="rule-editor" :class="typeToClass">
+        <slot></slot>
+        <div class="buttons rule-edit-buttons d-flex justify-content-end">
+            <button type="button" class="btn rule-editor-cancel mr-1" @click="cancel">{{ cancelLabel }}</button>
+            <button type="button" class="btn btn-primary rule-editor-ok" @click="okay">{{ applyLabel }}</button>
+        </div>
+    </div>
+</template>
+
+<script>
+import _l from "utils/localization";
+
+export default {
+    data: function () {
+        return {
+            applyLabel: _l("Apply"),
+            cancelLabel: _l("Cancel"),
+        };
+    },
+    props: {
+        ruleType: {
+            type: String,
+            required: true,
+        },
+        displayRuleType: {
+            required: true,
+        },
+        builder: {
+            required: true,
+        },
+    },
+    methods: {
+        cancel() {
+            this.builder.displayRuleType = null;
+        },
+        okay() {
+            this.builder.handleRuleSave(this.ruleType);
+            this.cancel();
+        },
+    },
+    computed: {
+        typeToClass() {
+            return "rule-edit-" + this.ruleType.replace(/_/g, "-");
+        },
+    },
+};
+</script>
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue b/client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue
new file mode 100644
index 00000000000..1d52daf8011
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue
@@ -0,0 +1,54 @@
+<template>
+    <li class="rule">
+        <span class="rule-display">
+            <span class="mr-1">{{ title }}</span>
+            <span v-b-tooltip.hover :title="editTitle" class="fa fa-edit mr-1" @click="edit"></span>
+            <span v-b-tooltip.hover :title="removeTitle" class="fa fa-times map" @click="remove"></span>
+        </span>
+        <span class="rule-warning" v-if="rule.warn">
+            {{ rule.warn }}
+        </span>
+        <span class="rule-error" v-if="rule.error">
+            <span class="alert-message">{{ rule.error }}</span>
+        </span>
+    </li>
+</template>
+
+<script>
+import _l from "utils/localization";
+import RuleDefs from "mvc/rules/rule-definitions";
+const RULES = RuleDefs.RULES;
+
+export default {
+    props: {
+        rule: {
+            required: true,
+            type: Object,
+        },
+        colHeaders: {
+            type: Array,
+            required: true,
+        },
+    },
+    computed: {
+        title() {
+            const ruleType = this.rule.type;
+            return RULES[ruleType].display(this.rule, this.colHeaders);
+        },
+        editTitle() {
+            return _l("Edit this rule.");
+        },
+        removeTitle() {
+            return _l("Remove this rule.");
+        },
+    },
+    methods: {
+        edit() {
+            this.$emit("edit");
+        },
+        remove() {
+            this.$emit("remove");
+        },
+    },
+};
+</script>
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleModalFooter.vue b/client/galaxy/scripts/components/RuleBuilder/RuleModalFooter.vue
new file mode 100644
index 00000000000..fc2a3bfe739
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleModalFooter.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class="rule-footer footer flex-row no-flex">
+        <slot name="inputs"></slot>
+        <div class="actions clear vertically-spaced">
+            <div class="main-options float-right">
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleModalHeader.vue b/client/galaxy/scripts/components/RuleBuilder/RuleModalHeader.vue
new file mode 100644
index 00000000000..9ea12aefa61
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleModalHeader.vue
@@ -0,0 +1,3 @@
+<template>
+    <div class="header flex-row no-flex"><slot></slot></div>
+</template>
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleModalMiddle.vue b/client/galaxy/scripts/components/RuleBuilder/RuleModalMiddle.vue
new file mode 100644
index 00000000000..35fca19d00a
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleModalMiddle.vue
@@ -0,0 +1,3 @@
+<template>
+    <div class="middle flex-row flex-row-container"><slot></slot></div>
+</template>
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue b/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue
new file mode 100644
index 00000000000..aeb4d07d1df
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue
@@ -0,0 +1,34 @@
+<template>
+    <a
+        class="rule-link dropdown-item"
+        href="javascript:void(0)"
+        :class="linkClassName"
+        @click="builder.addNewRule(ruleType)"
+        >{{ title }}</a
+    >
+</template>
+
+<script>
+import RuleDefs from "mvc/rules/rule-definitions";
+const RULES = RuleDefs.RULES;
+
+export default {
+    props: {
+        ruleType: {
+            type: String,
+            required: true,
+        },
+        builder: {
+            required: true,
+        },
+    },
+    computed: {
+        linkClassName() {
+            return "rule-link-" + this.ruleType.replace(/_/g, "-");
+        },
+        title() {
+            return RULES[this.ruleType].title;
+        },
+    },
+};
+</script>
diff --git a/client/galaxy/scripts/components/RuleBuilder/StateDiv.vue b/client/galaxy/scripts/components/RuleBuilder/StateDiv.vue
new file mode 100644
index 00000000000..2f06d8daf7f
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/StateDiv.vue
@@ -0,0 +1,5 @@
+<template>
+    <div class="rule-collection-creator collection-creator flex-row-container">
+        <slot></slot>
+    </div>
+</template>
diff --git a/client/galaxy/scripts/components/RuleCollectionBuilder.vue b/client/galaxy/scripts/components/RuleCollectionBuilder.vue
index d27dd94ccad..185ae53f7eb 100644
--- a/client/galaxy/scripts/components/RuleCollectionBuilder.vue
+++ b/client/galaxy/scripts/components/RuleCollectionBuilder.vue
@@ -576,360 +576,22 @@ import RuleDefs from "mvc/rules/rule-definitions";
 import Vue from "vue";
 import BootstrapVue from "bootstrap-vue";
 import Select2 from "components/Select2";
+import ColumnSelector from "components/RuleBuilder/ColumnSelector";
+import RegularExpressionInput from "components/RuleBuilder/RegularExpressionInput";
+import RuleDisplay from "components/RuleBuilder/RuleDisplay";
+import IdentifierDisplay from "components/RuleBuilder/IdentifierDisplay";
+import RuleTargetComponent from "components/RuleBuilder/RuleTargetComponent";
+import RuleComponent from "components/RuleBuilder/RuleComponent";
+import RuleModalHeader from "components/RuleBuilder/RuleModalHeader";
+import RuleModalMiddle from "components/RuleBuilder/RuleModalMiddle";
+import RuleModalFooter from "components/RuleBuilder/RuleModalFooter";
+import StateDiv from "components/RuleBuilder/StateDiv";
 
 Vue.use(BootstrapVue);
 
 const RULES = RuleDefs.RULES;
 const MAPPING_TARGETS = RuleDefs.MAPPING_TARGETS;
 
-const ColumnSelector = {
-    template: `
-        <div class="rule-column-selector" v-if="!multiple || !ordered">
-            <label class="d-flex justify-content-end align-items-center">
-                <span class="mr-auto" v-b-tooltip.hover :title="help">{{ label }}</span>
-                <div class="mr-1" v-b-tooltip.hover :title="title"><select2 :value="target" @input="handleInput" :multiple="multiple">
-                    <option v-for="(col, index) in colHeaders" :value="index">{{ col }}</option>
-                </select2></div>
-                <slot></slot>
-            </label>
-        </div>
-        <div class="rule-column-selector" v-else>
-            <span>{{ label }}</span>
-            <slot></slot>
-            <ol>
-                <li v-for="(targetEl, index) in target"
-                    v-bind:index="index"
-                    v-bind:key="targetEl"
-                    class="rule-column-selector-target">
-                    {{ colHeaders[targetEl] }}
-                    <span class="fa fa-times rule-column-selector-target-remove" @click="handleRemove(index)"></span>
-                    <span class="fa fa-arrow-up rule-column-selector-up" v-if="index !== 0" @click="moveUp(index)"></span>
-                    <span class="fa fa-arrow-down rule-column-selector-down" v-if="index < target.length - 1" @click="moveUp(index + 1)"></span>
-                </li>
-                <li v-if="this.target.length < this.colHeaders.length">
-                    <span class="rule-column-selector-target-add" v-if="!orderedEdit">
-                        <i @click="$emit('update:orderedEdit', true)">... {{ l("Assign Another Column") }}</i>
-                    </span>
-                    <span class="rule-column-selector-target-select" v-else>
-                        <select2 @input="handleAdd" placeholder="Select a column">
-                            <option /><!-- empty option selection for placeholder -->
-                            <option v-for="(col, index) in remainingHeaders" :value="index">{{ col }}</option>
-                        </select2>
-                    </span>
-                </li>
-            </ol>
-        </div>
-    `,
-    data: function () {
-        return {
-            l: _l,
-        };
-    },
-    props: {
-        target: {
-            required: true,
-        },
-        label: {
-            required: false,
-            type: String,
-            default: _l("From Column"),
-        },
-        help: {
-            required: false,
-        },
-        colHeaders: {
-            type: Array,
-            required: true,
-        },
-        multiple: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
-        ordered: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
-        valueAsList: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
-        orderedEdit: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
-    },
-    computed: {
-        remainingHeaders() {
-            const colHeaders = this.colHeaders;
-            if (!this.multiple) {
-                return colHeaders;
-            }
-            const remaining = {};
-            for (const key in colHeaders) {
-                if (this.target.indexOf(parseInt(key)) === -1) {
-                    remaining[key] = colHeaders[key];
-                }
-            }
-            return remaining;
-        },
-        title() {
-            return _l("Select a column");
-        },
-    },
-    methods: {
-        handleInput(value) {
-            if (this.multiple) {
-                // https://stackoverflow.com/questions/262427/why-does-parseint-yield-nan-with-arraymap
-                const val = value.map((idx) => parseInt(idx));
-                this.$emit("update:target", val);
-            } else {
-                let val = parseInt(value);
-                if (this.valueAsList) {
-                    val = [val];
-                }
-                this.$emit("update:target", val);
-            }
-        },
-        handleAdd(value) {
-            this.target.push(parseInt(value));
-            this.$emit("update:orderedEdit", false);
-        },
-        handleRemove(index) {
-            this.target.splice(index, 1);
-        },
-        moveUp(value) {
-            const swapVal = this.target[value - 1];
-            Vue.set(this.target, value - 1, this.target[value]);
-            Vue.set(this.target, value, swapVal);
-        },
-    },
-    components: {
-        Select2,
-    },
-};
-
-const RegularExpressionInput = {
-    template: `
-        <div>
-            <label for="regular_expression" v-b-tooltip.hover :title="title">{{ label }}</label>
-            <span v-b-popover.html="popoverContent" :title="popoverTitle" class="fa fa-question"></span>
-            <input v-b-tooltip.hover.left :title="title" name="regular_expression" class="rule-regular-expression" type="text" :value="target" @input="$emit('update:target', $event.target.value)" />
-        </div>
-    `,
-    props: {
-        target: {
-            required: true,
-        },
-    },
-    computed: {
-        label() {
-            return _l("Regular Expression");
-        },
-        title() {
-            return _l("Enter a regular expression.");
-        },
-        popoverTitle() {
-            return _l("Regular Expressions");
-        },
-        popoverContent() {
-            return _l(
-                `Regular expressions are patterns used to match character combinations in strings. This input accepts Python-style regular expressions, find more information about these in <a href="https://pythonforbiologists.com/regular-expressions/">this Python for Biologists tutorial</a>.`
-            );
-        },
-    },
-};
-
-const RuleDisplay = {
-    template: `
-        <li class="rule">
-            <span class="rule-display">
-                <span class="mr-1">{{ title }}</span>
-                <span v-b-tooltip.hover :title="editTitle" class="fa fa-edit mr-1" @click="edit"></span>
-                <span v-b-tooltip.hover :title="removeTitle" class="fa fa-times map" @click="remove"></span>
-            </span>
-            <span class="rule-warning" v-if="rule.warn">
-                {{ rule.warn }}
-            </span>
-            <span class="rule-error" v-if="rule.error">
-                <span class="alert-message">{{ rule.error }}</span>
-            </span>
-        </li>
-    `,
-    props: {
-        rule: {
-            required: true,
-            type: Object,
-        },
-        colHeaders: {
-            type: Array,
-            required: true,
-        },
-    },
-    computed: {
-        title() {
-            const ruleType = this.rule.type;
-            return RULES[ruleType].display(this.rule, this.colHeaders);
-        },
-        editTitle() {
-            return _l("Edit this rule.");
-        },
-        removeTitle() {
-            return _l("Remove this rule.");
-        },
-    },
-    methods: {
-        edit() {
-            this.$emit("edit");
-        },
-        remove() {
-            this.$emit("remove");
-        },
-    },
-};
-
-const IdentifierDisplay = {
-    template: `
-      <li class="rule">
-        <span v-b-tooltip.hover :title="help">Set {{ columnsLabel }} as {{ typeDisplay }}</span>
-        <span v-b-tooltip.hover :title="titleEdit" class="fa fa-edit" @click="edit"></span>
-        <span v-b-tooltip.hover :title="titleRemove" class="fa fa-times" @click="remove"></span>
-      </li>
-    `,
-    props: {
-        type: {
-            type: String,
-            required: true,
-        },
-        columns: {
-            required: true,
-        },
-        colHeaders: {
-            type: Array,
-            required: true,
-        },
-    },
-    methods: {
-        remove() {
-            this.$emit("remove");
-        },
-        edit() {
-            this.$emit("edit");
-        },
-    },
-    computed: {
-        typeDisplay() {
-            return MAPPING_TARGETS[this.type].label;
-        },
-        help() {
-            return MAPPING_TARGETS[this.type].help || "";
-        },
-        titleEdit() {
-            return _l("Edit column definition");
-        },
-        titleRemove() {
-            return _l("Remove this column definition");
-        },
-        columnsLabel() {
-            return RuleDefs.columnDisplay(this.columns, this.colHeaders);
-        },
-    },
-};
-
-const RuleTargetComponent = {
-    template: `<a class="rule-link dropdown-item" href="javascript:void(0)" :class="linkClassName" @click="builder.addNewRule(ruleType)">{{title}}</a>`,
-    props: {
-        ruleType: {
-            type: String,
-            required: true,
-        },
-        builder: {
-            required: true,
-        },
-    },
-    computed: {
-        linkClassName() {
-            return "rule-link-" + this.ruleType.replace(/_/g, "-");
-        },
-        title() {
-            return RULES[this.ruleType].title;
-        },
-    },
-};
-
-const RuleComponent = {
-    template: `
-    <div v-if="ruleType == displayRuleType" class="rule-editor" :class="typeToClass">
-        <slot></slot>
-        <div class="buttons rule-edit-buttons d-flex justify-content-end">
-           <button type="button" class="btn rule-editor-cancel mr-1" @click="cancel">{{ cancelLabel }}</button>
-           <button type="button" class="btn btn-primary rule-editor-ok" @click="okay">{{ applyLabel }}</button>
-        </div>
-    </div>`,
-    data: function () {
-        return {
-            applyLabel: _l("Apply"),
-            cancelLabel: _l("Cancel"),
-        };
-    },
-    props: {
-        ruleType: {
-            type: String,
-            required: true,
-        },
-        displayRuleType: {
-            required: true,
-        },
-        builder: {
-            required: true,
-        },
-    },
-    methods: {
-        cancel() {
-            this.builder.displayRuleType = null;
-        },
-        okay() {
-            this.builder.handleRuleSave(this.ruleType);
-            this.cancel();
-        },
-    },
-    computed: {
-        typeToClass() {
-            return "rule-edit-" + this.ruleType.replace(/_/g, "-");
-        },
-    },
-};
-
-const StateDiv = {
-    template: `
-        <div class="rule-collection-creator collection-creator flex-row-container">
-            <slot></slot>
-        </div>`,
-};
-
-const RuleModalHeader = {
-    template: `<div class="header flex-row no-flex"><slot></slot></div>`,
-};
-
-const RuleModalMiddle = {
-    template: `<div class="middle flex-row flex-row-container"><slot></slot></div>`,
-};
-
-const RuleModalFooter = {
-    template: `
-        <div class="rule-footer footer flex-row no-flex">
-            <slot name="inputs"></slot>
-            <div class="actions clear vertically-spaced">
-                <div class="main-options float-right">
-                    <slot></slot>
-                </div>
-            </div>
-        </div>`,
-};
-
 export default {
     data: function () {
         let orientation = "vertical";