DEV: Create wizard-field-checkboxes component (#9333)

app/assets/javascripts/wizard/components/wizard-field-checkboxes.js

@@ -0,0 +1,33 @@
+import Component from "@ember/component";
+import { set } from "@ember/object";
+
+export default Component.extend({
+  init(...args) {
+    this._super(...args);
+    this.set("field.value", this.field.value || []);
+
+    for (let choice of this.field.choices) {
+      if (this.field.value.includes(choice.id)) {
+        set(choice, "checked", true);
+      }
+    }
+  },
+  actions: {
+    changed(checkbox) {
+      let newFieldValue = this.field.value;
+      const checkboxValue = checkbox.parentElement
+        .getAttribute("value")
+        .toLowerCase();
+
+      if (checkbox.checked) {
+        newFieldValue.push(checkboxValue);
+      } else {
+        const index = newFieldValue.indexOf(checkboxValue);
+        if (index > -1) {
+          newFieldValue.splice(index, 1);
+        }
+      }
+      this.set("field.value", newFieldValue);
+    }
+  }
+});

app/assets/javascripts/wizard/templates/components/wizard-field-checkboxes.hbs

@@ -0,0 +1,11 @@
+{{#each field.choices as |c|}}
+  <div class="checkbox-field-choice {{fieldClass}}">
+    <label id={{c.id}} value={{c.label}}>
+      {{input type="checkbox"
+            class="wizard-checkbox"
+            click=(action "changed" value="target")
+            checked=c.checked}}
+      {{c.label}}
+    </label>
+  </div>
+{{/each}}