@projectcaluma/ember-form-builder 11.0.0-beta.2 → 11.0.0-beta.24

package/CHANGELOG.md

@@ -1,3 +1,157 @@
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.16](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.15...@projectcaluma/ember-form-builder-v11.0.0-beta.16) (2022-08-05)
+
+
+* feat!: add multi file upload (#2040) ([c4fd004](https://github.com/projectcaluma/ember-caluma/commit/c4fd0049654b2d2e5ea62e5909a45d89cb888b40)), closes [#2040](https://github.com/projectcaluma/ember-caluma/issues/2040)
+
+
+### BREAKING CHANGES
+
+* This requires the caluma backend version v8.0.0-beta.12
+or later.
+
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.15](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.14...@projectcaluma/ember-form-builder-v11.0.0-beta.15) (2022-08-02)
+
+
+### Features
+
+* **analytics:** adds analytics module for caluma ([#1655](https://github.com/projectcaluma/ember-caluma/issues/1655)) ([9573abe](https://github.com/projectcaluma/ember-caluma/commit/9573abe95cd39cb1467113026f2ab7773c3c9143))
+
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.14](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.13...@projectcaluma/ember-form-builder-v11.0.0-beta.14) (2022-06-09)
+
+
+### Features
+
+* **caluma:** use new filter syntax of caluma ([7a00c03](https://github.com/projectcaluma/ember-caluma/commit/7a00c03a103933d9e48dd88adb7382441a298742))
+
+
+### BREAKING CHANGES
+
+* **caluma:** `ember-caluma` now requires Caluma version >=
+8.0.0-beta.6
+
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.13](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.12...@projectcaluma/ember-form-builder-v11.0.0-beta.13) (2022-05-09)
+
+
+### Bug Fixes
+
+* **deps:** update ember-engines ([5aa5300](https://github.com/projectcaluma/ember-caluma/commit/5aa530074ea7dc08267d8ccc411eb1538537a1b5))
+* **resources:** fix deprecations of ember-resources ([7a84c5c](https://github.com/projectcaluma/ember-caluma/commit/7a84c5c78d5b28f7b5393c64722907728dd5f42b))
+
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.12](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.11...@projectcaluma/ember-form-builder-v11.0.0-beta.12) (2022-04-07)
+
+
+### Bug Fixes
+
+* **form-builder:** replace prismjs with highlight.js ([b92732c](https://github.com/projectcaluma/ember-caluma/commit/b92732c4586b2978dda80ad3643b6bd58c9605cb))
+
+
+### Features
+
+* **cf-field:** add optional hints for form fields ([d847fbf](https://github.com/projectcaluma/ember-caluma/commit/d847fbffa376ea60971fb9e91aff8bf54ce77d50))
+
+
+### BREAKING CHANGES
+
+* **cf-field:** Question hints requires Caluma >= v7.15.0
+
+Add option to create hints for certain question types. These
+are displayed below the input field and can be used to provide
+short, informative messages. Hints are available for all question
+types except for form, static and action button questions.
+
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.11](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.10...@projectcaluma/ember-form-builder-v11.0.0-beta.11) (2022-03-23)
+
+
+### Bug Fixes
+
+* **embroider:** add missing dependency on @ember/string ([3a6e6bb](https://github.com/projectcaluma/ember-caluma/commit/3a6e6bb39a8c1a40a2ae00b3d4ea00606a755e25))
+
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.10](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.9...@projectcaluma/ember-form-builder-v11.0.0-beta.10) (2022-03-11)
+
+
+### Bug Fixes
+
+* **form-builder:** fix typo in class for code editor ([b00014c](https://github.com/projectcaluma/ember-caluma/commit/b00014c9c7fd737f15fe3592daf85ba2ab89ab23))
+
+
+### Features
+
+* **form-builder:** add field for editing meta ([9176862](https://github.com/projectcaluma/ember-caluma/commit/91768623f98cfa438ee9f758a951e01da72ceb5d))
+* **form-builder:** add new categories published and unpublished ([52c1c1d](https://github.com/projectcaluma/ember-caluma/commit/52c1c1deaf15991e595e042f643889be64b425a0))
+* **form:** support passing component override classes ([9409c7c](https://github.com/projectcaluma/ember-caluma/commit/9409c7cb5901dcdffec1c0294046da64b74b9922))
+
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.9](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.8...@projectcaluma/ember-form-builder-v11.0.0-beta.9) (2022-02-23)
+
+
+### Features
+
+* **form-builder:** autoresize textareas and code editor ([edf0871](https://github.com/projectcaluma/ember-caluma/commit/edf08710ebe0c7d372efa0d37bd0f3589c188dba))
+
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.8](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.7...@projectcaluma/ember-form-builder-v11.0.0-beta.8) (2022-02-16)
+
+
+### Bug Fixes
+
+* **pikaday:** add pikaday modifier reexport in engines ([c13d302](https://github.com/projectcaluma/ember-caluma/commit/c13d3021bb8fe82e1245a60182af01287c507697))
+
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.7](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.6...@projectcaluma/ember-form-builder-v11.0.0-beta.7) (2022-02-07)
+
+
+### Bug Fixes
+
+* **deps:** remove moment altogether and update ember-pikday ([b2f7fa2](https://github.com/projectcaluma/ember-caluma/commit/b2f7fa28fa076897addd36e5964c926c671508ff))
+
+
+### BREAKING CHANGES
+
+* **deps:** The host app now needs to opt-in to use the default
+pikaday styles: https://github.com/adopted-ember-addons/ember-pikaday#styles
+
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.6](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.5...@projectcaluma/ember-form-builder-v11.0.0-beta.6) (2022-02-03)
+
+
+### Bug Fixes
+
+* **validation:** sync format validator validation with backend ([ee66968](https://github.com/projectcaluma/ember-caluma/commit/ee66968230b9f0e4c5a4df8bdb3f8e58b44b5b82))
+
+
+### BREAKING CHANGES
+
+* **validation:** Use the `formatValidators` property of the backend to store and read
+format validators instead of the `meta.formatValidators` so the backend
+validates as well. For more information on how to migrate check the
+migration guide to v11.
+
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.5](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.4...@projectcaluma/ember-form-builder-v11.0.0-beta.5) (2022-02-02)
+
+
+### Bug Fixes
+
+* **form-builder:** fix active filter in form list ([87a1016](https://github.com/projectcaluma/ember-caluma/commit/87a1016eb646436f04f7e6e891502f329fd8e8a0))
+
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.4](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.3...@projectcaluma/ember-form-builder-v11.0.0-beta.4) (2022-02-01)
+
+
+### Bug Fixes
+
+* **form-builder:** omit isRequired property when saving action buttons ([27fb4ff](https://github.com/projectcaluma/ember-caluma/commit/27fb4ff9e394a4c9491c33374f1b088fd09274d3))
+
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.3](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.2...@projectcaluma/ember-form-builder-v11.0.0-beta.3) (2022-01-24)
+
+
+### chore
+
+* **deps:** update ember-uikit to v5 beta ([6568d39](https://github.com/projectcaluma/ember-caluma/commit/6568d398216d33b44da5b659830ca3c200dd7012))
+* **form-builder:** rename actions from dasherized to camelized ([6a79484](https://github.com/projectcaluma/ember-caluma/commit/6a7948435f1e38e1f8b9cca82d1e091742afcc08))
+
+
+### BREAKING CHANGES
+
+* **form-builder:** All previously dasherized expected actions are now
+camelized. E.g `@on-add-question` becomes `@onAddQuestion`.
+* **deps:** All `@projectcaluma/ember-*` packages now require
+`ember-uikit` v5+.
+
 # [@projectcaluma/ember-form-builder-v11.0.0-beta.2](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.1...@projectcaluma/ember-form-builder-v11.0.0-beta.2) (2022-01-18)
 
 

package/addon/components/cfb-code-editor.hbs

@@ -2,9 +2,10 @@
 
 <div
   name={{@name}}
-  class={{concat "uk-textarea cfb-code-editor language-" @language}}
+  class="uk-textarea cfb-code-editor {{concat 'language-' @language}}"
   {{did-insert this.didInsertNode}}
   {{will-destroy this.willDestroyNode}}
+  {{autoresize mode="height"}}
 ></div>
 
 {{component @hintComponent}}

package/addon/components/cfb-code-editor.js

@@ -1,25 +1,73 @@
 import { action } from "@ember/object";
+import { addObserver } from "@ember/object/observers";
 import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
 import { CodeJar } from "codejar";
-import Prism from "prismjs";
-import "prismjs/components/prism-jexl.js";
-import "prismjs/components/prism-markdown.js";
+import hljs from "highlight.js/lib/core";
+import json from "highlight.js/lib/languages/json";
+import markdown from "highlight.js/lib/languages/markdown";
+import jexl from "highlightjs-jexl/src/languages/jexl";
+
+hljs.registerLanguage("json", json);
+hljs.registerLanguage("markdown", markdown);
+hljs.registerLanguage("jexl", jexl);
 
 export default class CfbCodeEditorComponent extends Component {
-  editor;
-  @tracked show = false;
+  _editor = null;
+  _cursor = null;
+  _lastValue = null;
+
+  get value() {
+    const value = this.args.value;
+
+    if (this.args.language === "json" && typeof value === "object") {
+      return JSON.stringify(value?.unwrap?.() ?? value, null, 2);
+    }
+
+    return this.args.value;
+  }
+
+  @action
+  onUpdate(value) {
+    if (this._lastValue === value) return;
+
+    this._cursor = this._editor.save();
+
+    if (this.args.language === "json") {
+      try {
+        value = JSON.parse(value);
+      } catch {
+        // update value directly
+      }
+    }
+
+    this._lastValue = value;
+    this.args.update(value);
+    this.args.setDirty();
+  }
+
+  @action
+  updateCode() {
+    this._editor.updateCode(this.value);
+
+    if (this._cursor) {
+      this._editor.restore(this._cursor);
+      this._cursor = null;
+    }
+  }
 
   @action
   didInsertNode(element) {
-    const highlight = (editor) => Prism.highlightElement(editor);
-    this.editor = CodeJar(element, highlight);
-    this.editor.updateCode(this.args.value);
-    this.editor.onUpdate(this.args.update);
+    this._editor = CodeJar(element, (editor) => hljs.highlightElement(editor));
+    this._editor.onUpdate(this.onUpdate);
+
+    this.updateCode();
+
+    // eslint-disable-next-line ember/no-observers
+    addObserver(this.args, "value", this, "updateCode");
   }
 
   @action
   willDestroyNode() {
-    this.editor.destroy();
+    this._editor.destroy();
   }
 }

package/addon/components/cfb-form-editor/general.hbs

@@ -55,11 +55,10 @@
       @name="description"
       @type="textarea"
       @label={{t "caluma.form-builder.form.description"}}
-      @rows="4"
+      {{autoresize mode="height"}}
     />
 
     <f.input
-      class="uk-flex uk-flex-between uk-flex-column"
       @name="isArchived"
       @label={{t "caluma.form-builder.form.isArchived"}}
       @required={{true}}
@@ -67,7 +66,6 @@
     />
 
     <f.input
-      class="uk-flex uk-flex-between uk-flex-column"
       @name="isPublished"
       @label={{t "caluma.form-builder.form.isPublished"}}
       @required={{true}}
@@ -85,7 +83,7 @@
   <div
     class="uk-text-center uk-text-muted uk-padding uk-padding-remove-horizontal"
   >
-    {{uk-icon "bolt" ratio=5}}
+    <UkIcon @icon="bolt" @ratio={{5}} />
     <p>{{t "caluma.form-builder.form.not-found" slug=@slug}}</p>
   </div>
 {{/if}}

package/addon/components/cfb-form-editor/general.js

@@ -1,11 +1,10 @@
-import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
+import { macroCondition, isTesting } from "@embroider/macros";
 import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
-import { optional } from "ember-composable-helpers/helpers/optional";
 import { timeout, restartableTask, dropTask } from "ember-concurrency";
-import { useTask } from "ember-resources";
+import { trackedTask } from "ember-resources/util/ember-concurrency";
 
 import FormValidations from "../../validations/form";
 
@@ -26,7 +25,7 @@ export default class CfbFormEditorGeneral extends Component {
     return this._data.value?.[0]?.node;
   }
 
-  _data = useTask(this, this.fetchData, () => [this.args.slug]);
+  _data = trackedTask(this, this.fetchData, () => [this.args.slug]);
 
   @restartableTask
   *fetchData() {
@@ -89,7 +88,7 @@ export default class CfbFormEditorGeneral extends Component {
         )
       );
 
-      optional([this.args["on-after-submit"]])(form);
+      this.args.onAfterSubmit?.(form);
     } catch (e) {
       this.notification.danger(
         this.intl.t(
@@ -104,10 +103,9 @@ export default class CfbFormEditorGeneral extends Component {
   @restartableTask
   *validateSlug(slug, changeset) {
     /* istanbul ignore next */
-    if (
-      getOwner(this).resolveRegistration("config:environment").environment !==
-      "test"
-    ) {
+    if (macroCondition(isTesting())) {
+      // no timeout
+    } else {
       yield timeout(500);
     }
 

package/addon/components/cfb-form-editor/question/options.hbs

@@ -3,7 +3,7 @@
 
   <UkSortable
     @handle=".uk-sortable-handle"
-    @on-moved={{this._handleMoved}}
+    @onMoved={{this._handleMoved}}
     @tagName="ul"
     class="uk-list uk-list-divider uk-margin-remove-bottom uk-margin-small-top"
   >

package/addon/components/cfb-form-editor/question/validation.hbs

@@ -1,9 +1,9 @@
-<div class="uk-margin" {{did-insert (perform this.availableFormatValidators)}}>
+<div class="uk-margin">
   {{component @labelComponent}}
 
   <PowerSelectMultiple
     @selected={{this.selected}}
-    @placeholder={{this.placeholder}}
+    @placeholder={{@placeholder}}
     @options={{this.validators}}
     @onChange={{this.updateValidators}}
     @renderInPlace={{true}}

package/addon/components/cfb-form-editor/question/validation.js

@@ -2,34 +2,38 @@ import { action } from "@ember/object";
 import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
 import { dropTask } from "ember-concurrency";
+import { trackedTask } from "ember-resources/util/ember-concurrency";
 
-import allFormatValidatorsQuery from "@projectcaluma/ember-core/gql/queries/all-format-validators.graphql";
+import allFormatValidatorsQuery from "@projectcaluma/ember-form-builder/gql/queries/all-format-validators.graphql";
 
 export default class CfbFormEditorQuestionValidation extends Component {
   @queryManager apollo;
 
-  @dropTask
-  *availableFormatValidators() {
-    const formatValidators = yield this.apollo.watchQuery(
-      { query: allFormatValidatorsQuery, fetchPolicy: "cache-and-network" },
-      "allFormatValidators.edges"
-    );
-    return formatValidators.map((edge) => edge.node);
-  }
-
   get validators() {
-    return this.availableFormatValidators?.lastSuccessful?.value || [];
+    return this._validators.value?.map((edge) => edge.node) ?? [];
   }
 
   get selected() {
     return this.validators.filter((validator) =>
-      (this.args.value || []).includes(validator.slug)
+      (this.args.value?.edges.map((edge) => edge.node.slug) || []).includes(
+        validator.slug
+      )
+    );
+  }
+
+  _validators = trackedTask(this, this.fetchFormatValidators, () => []);
+
+  @dropTask
+  *fetchFormatValidators() {
+    return yield this.apollo.watchQuery(
+      { query: allFormatValidatorsQuery, fetchPolicy: "cache-and-network" },
+      "allFormatValidators.edges"
     );
   }
 
   @action
   updateValidators(value) {
-    this.args.update(value.map((validator) => validator.slug));
+    this.args.update({ edges: value.map(({ slug }) => ({ node: { slug } })) });
     this.args.setDirty();
   }
 }

package/addon/components/cfb-form-editor/question-list/item.hbs

@@ -4,8 +4,8 @@
     @question.isArchived
     "cfb-form-editor__question-list__item__archived"
   }}
-  {{did-insert (fn (optional @on-register) this.elementId @question.slug)}}
-  {{will-destroy (fn (optional @on-unregister) this.elementId @question.slug)}}
+  {{did-insert (fn (optional @onRegister) this.elementId @question.slug)}}
+  {{will-destroy (fn (optional @onUnregister) this.elementId @question.slug)}}
   ...attributes
 >
   <div class="uk-flex uk-flex-middle">
@@ -24,7 +24,7 @@
           data-test-remove-item
           uk-icon="minus"
           class="cfb-pointer uk-text-danger"
-          {{on "click" (fn (optional @on-remove-question) @question)}}
+          {{on "click" (fn (optional @onRemoveQuestion) @question)}}
         >
         </i>
       {{else if (eq @mode "add")}}
@@ -33,7 +33,7 @@
           data-test-add-item
           uk-icon="plus"
           class="cfb-pointer uk-text-success"
-          {{on "click" (fn (optional @on-add-question) @question)}}
+          {{on "click" (fn (optional @onAddQuestion) @question)}}
         >
         </i>
       {{/if}}

package/addon/components/cfb-form-editor/question-list/item.js

@@ -51,12 +51,12 @@ export default class CfbFormEditorQuestionListItem extends Component {
   @action
   editQuestion(question, e) {
     e.preventDefault();
-    this.args["on-edit-question"]?.(question);
+    this.args.onEditQuestion?.(question);
   }
 
   @action
   clickForm(form, e) {
     e.preventDefault();
-    this.args["on-click-form"]?.(form);
+    this.args.onClickForm?.(form);
   }
 }

package/addon/components/cfb-form-editor/question-list.hbs

@@ -76,12 +76,12 @@
           data-test-question-list-item={{item.node.slug}}
           @mode={{this.mode}}
           @question={{item.node}}
-          @on-edit-question={{@on-edit-question}}
-          @on-remove-question={{perform this.removeQuestion}}
-          @on-add-question={{perform this.addQuestion}}
-          @on-click-form={{@on-click-form}}
-          @on-register={{this.registerChild}}
-          @on-unregister={{this.unregisterChild}}
+          @onEditQuestion={{@onEditQuestion}}
+          @onRemoveQuestion={{perform this.removeQuestion}}
+          @onAddQuestion={{perform this.addQuestion}}
+          @onClickForm={{@onClickForm}}
+          @onRegister={{this.registerChild}}
+          @onUnregister={{this.unregisterChild}}
         />
       {{else}}
         <li

package/addon/components/cfb-form-editor/question-list.js

@@ -1,10 +1,10 @@
 import { action } from "@ember/object";
 import { run } from "@ember/runloop";
 import { inject as service } from "@ember/service";
+import { macroCondition, isTesting } from "@embroider/macros";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { queryManager } from "ember-apollo-client";
-import { optional } from "ember-composable-helpers/helpers/optional";
 import {
   timeout,
   enqueueTask,
@@ -35,7 +35,7 @@ export default class ComponentsCfbFormEditorQuestionList extends Component {
   get questions() {
     return this.mode === "add"
       ? this.questionTaskValue
-      : this.questionTaskValue.firstObject?.node.questions.edges;
+      : this.questionTaskValue[0]?.node.questions.edges;
   }
 
   // Use built in input component when it works instead of this getter and setter
@@ -56,8 +56,13 @@ export default class ComponentsCfbFormEditorQuestionList extends Component {
     const mode = this.mode;
     const search = mode !== "reorder" ? this.search : "";
 
-    if (search) {
-      yield timeout(500);
+    /* istanbul ignore next */
+    if (macroCondition(isTesting())) {
+      // no timeout
+    } else {
+      if (search) {
+        yield timeout(500);
+      }
     }
 
     if (mode === "add" && this.hasNextPage) {
@@ -148,7 +153,7 @@ export default class ComponentsCfbFormEditorQuestionList extends Component {
 
       this.questionTask.perform();
 
-      optional([this.args["on-after-add-question"]])(question);
+      this.args.onAfterAddQuestion?.(question);
     } catch (e) {
       this.notification.danger(
         this.intl.t("caluma.form-builder.notification.form.add-question.error")
@@ -176,7 +181,7 @@ export default class ComponentsCfbFormEditorQuestionList extends Component {
         )
       );
 
-      optional([this.args["on-after-remove-question"]])(question);
+      this.args.onAfterRemoveQuestion?.(question);
     } catch (e) {
       this.notification.danger(
         this.intl.t(
@@ -238,7 +243,7 @@ export default class ComponentsCfbFormEditorQuestionList extends Component {
   createNewQuestion(e) {
     e.preventDefault();
 
-    this.args["on-create-question"]?.();
+    this.args.onCreateQuestion?.();
     this.setMode("reorder");
   }
 }

package/addon/components/cfb-form-editor/question.hbs

@@ -140,6 +140,7 @@
           @label={{t "caluma.form-builder.question.confirmationText"}}
           @name="infoText"
           @type="textarea"
+          {{autoresize mode="height"}}
         />
       {{else}}
         <div class="uk-margin">
@@ -163,6 +164,13 @@
         </div>
       {{/if}}
 
+      {{#if (not (has-question-type f.model "action-button" "static" "form"))}}
+        <f.input
+          @name="hintText"
+          @label={{t "caluma.form-builder.question.hintText"}}
+        />
+      {{/if}}
+
       {{#if (has-question-type f.model "text" "textarea" "integer" "float")}}
         <f.input
           @name="placeholder"
@@ -207,13 +215,13 @@
         />
 
         <f.input
-          @name="meta.formatValidators"
+          @name="formatValidators"
           @label={{t "caluma.form-builder.question.formatValidators"}}
-          @placeholder={{t "caluma.form-builder.question.choose"}}
+          @placeholder={{t "caluma.form-builder.question.no-selection"}}
           @required={{false}}
           @renderComponent={{component "cfb-form-editor/question/validation"}}
-          @on-update={{changeset-set f.model "meta.formatValidators"}}
-          @value={{changeset-get f.model "meta.formatValidators"}}
+          @on-update={{changeset-set f.model "formatValidators"}}
+          @value={{changeset-get f.model "formatValidators"}}
         />
       {{/if}}
 
@@ -295,10 +303,10 @@
           @type="select"
           @required={{true}}
           @label={{t "caluma.form-builder.question.dataSource"}}
-          @options={{or this.availableDataSources.lastSuccessful.value array}}
+          @options={{or this.availableDataSources.lastSuccessful.value (array)}}
           @optionTargetPath="name"
           @optionLabelPath="info"
-          @includeBlank={{t "caluma.form-builder.question.choose"}}
+          @prompt={{t "caluma.form-builder.question.no-selection"}}
         />
       {{/if}}
 
@@ -328,9 +336,9 @@
             as |fi|
           >
             <PowerSelect
-              @options={{or this.availableForms.lastSuccessful.value array}}
+              @options={{or this.availableForms.lastSuccessful.value (array)}}
               @selected={{fi.value}}
-              @placeholder={{t "caluma.form-builder.question.choose"}}
+              @placeholder={{t "caluma.form-builder.question.no-selection"}}
               @onBlur={{fi.setDirty}}
               @onChange={{fi.update}}
               @searchField="slug"
@@ -366,7 +374,7 @@
             >
               {{#each this.model.rowForm.questions.edges as |rowEdge|}}
                 {{#let rowEdge.node as |row|}}
-                  <label class="cf-checkbox_label">
+                  <label>
                     <input
                       type="checkbox"
                       value={{row.slug}}
@@ -403,9 +411,9 @@
           as |fi|
         >
           <PowerSelect
-            @options={{or this.availableForms.lastSuccessful.value array}}
+            @options={{or this.availableForms.lastSuccessful.value (array)}}
             @selected={{fi.value}}
-            @placeholder={{t "caluma.form-builder.question.choose"}}
+            @placeholder={{t "caluma.form-builder.question.no-selection"}}
             @onBlur={{fi.setDirty}}
             @onChange={{fi.update}}
             @searchField="slug"
@@ -437,7 +445,7 @@
         @optionTargetPath="component"
         @optionLabelPath="label"
         @options={{this.availableOverrides}}
-        class="uk-flex uk-flex-between uk-flex-column"
+        @prompt={{t "caluma.form-builder.question.no-selection"}}
       />
 
       <f.input
@@ -445,12 +453,11 @@
         @label={{t "caluma.form-builder.question.isArchived"}}
         @required={{true}}
         @renderComponent={{component "cfb-toggle-switch" size="small"}}
-        class="uk-flex uk-flex-between uk-flex-column"
       />
 
       <UkButton
         @color="link"
-        @on-click={{toggle-action "showAdvanced" this}}
+        @onClick={{toggle-action "showAdvanced" this}}
         class="uk-flex uk-flex-middle uk-margin"
       >
         {{#if this.showAdvanced}}
@@ -468,7 +475,6 @@
             @required={{true}}
             @label={{t "caluma.form-builder.question.validateOnEnter"}}
             @renderComponent={{component "cfb-toggle-switch" size="small"}}
-            class="uk-flex uk-flex-between uk-flex-column"
           />
         {{/if}}
 
@@ -495,6 +501,14 @@
             />
           </div>
         {{/if}}
+
+        <div class="uk-margin">
+          <f.input
+            @label={{t "caluma.form-builder.question.meta"}}
+            @name="meta"
+            @renderComponent={{component "cfb-code-editor" language="json"}}
+          />
+        </div>
       {{/if}}
 
       <div class="uk-text-right">