@projectcaluma/ember-form 11.0.0-beta.9 → 11.0.1

package/CHANGELOG.md

@@ -1,3 +1,150 @@
+# [@projectcaluma/ember-form-v11.0.0-beta.23](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.22...@projectcaluma/ember-form-v11.0.0-beta.23) (2022-08-15)
+
+
+### Bug Fixes
+
+* **files:** disable delete button when field is disabled ([#2086](https://github.com/projectcaluma/ember-caluma/issues/2086)) ([2055c53](https://github.com/projectcaluma/ember-caluma/commit/2055c53cbcfe07fbdcfa46e6042a763b4b643d65))
+* **form:** allow deselecting disabled multiple choice options ([0dd663e](https://github.com/projectcaluma/ember-caluma/commit/0dd663e467b66f0f8742d667630c28255e03e161))
+
+# [@projectcaluma/ember-form-v11.0.0-beta.22](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.21...@projectcaluma/ember-form-v11.0.0-beta.22) (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-v11.0.0-beta.21](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.20...@projectcaluma/ember-form-v11.0.0-beta.21) (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-v11.0.0-beta.20](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.19...@projectcaluma/ember-form-v11.0.0-beta.20) (2022-06-09)
+
+
+### Bug Fixes
+
+* **form:** improve validation of choice and multiple choice fields ([e828fad](https://github.com/projectcaluma/ember-caluma/commit/e828fad9557fd521ca9eec63af74f8cee12e3910))
+* **form:** pass context to table row form ([af1031a](https://github.com/projectcaluma/ember-caluma/commit/af1031ae9e8138a404cd043199709025092da882))
+
+
+### Features
+
+* **form:** add option to bypass the timeout when saving a field ([a2ba306](https://github.com/projectcaluma/ember-caluma/commit/a2ba306306f90a2d2279b34550507241f0987961))
+
+# [@projectcaluma/ember-form-v11.0.0-beta.19](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.18...@projectcaluma/ember-form-v11.0.0-beta.19) (2022-05-09)
+
+
+### Bug Fixes
+
+* **resources:** fix deprecations of ember-resources ([7a84c5c](https://github.com/projectcaluma/ember-caluma/commit/7a84c5c78d5b28f7b5393c64722907728dd5f42b))
+
+# [@projectcaluma/ember-form-v11.0.0-beta.18](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.17...@projectcaluma/ember-form-v11.0.0-beta.18) (2022-04-13)
+
+
+### Bug Fixes
+
+* **form:** fix error formatting for older browsers ([9e34876](https://github.com/projectcaluma/ember-caluma/commit/9e3487625ccb73918b32fdf787054bab9114162f))
+
+# [@projectcaluma/ember-form-v11.0.0-beta.17](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.16...@projectcaluma/ember-form-v11.0.0-beta.17) (2022-04-07)
+
+
+### Bug Fixes
+
+* **form:** fix error status indicator for backend errors ([03fc27e](https://github.com/projectcaluma/ember-caluma/commit/03fc27e0626edf3a6f774c41d25485158ee6a99d)), closes [#1877](https://github.com/projectcaluma/ember-caluma/issues/1877)
+
+
+### Features
+
+* **cf-field:** add optional hints for form fields ([d847fbf](https://github.com/projectcaluma/ember-caluma/commit/d847fbffa376ea60971fb9e91aff8bf54ce77d50))
+* **form:** show technical details of backend errors in UI ([c34cda6](https://github.com/projectcaluma/ember-caluma/commit/c34cda691f78623f41da1f9d75a39efce7e0ff0f))
+
+
+### 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-v11.0.0-beta.16](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.15...@projectcaluma/ember-form-v11.0.0-beta.16) (2022-03-23)
+
+
+### Bug Fixes
+
+* **embroider:** add missing dependency on @ember/string ([3a6e6bb](https://github.com/projectcaluma/ember-caluma/commit/3a6e6bb39a8c1a40a2ae00b3d4ea00606a755e25))
+* **embroider:** fix dynamic component usage ([1cf0f6e](https://github.com/projectcaluma/ember-caluma/commit/1cf0f6e2914651bbb0ec70d1f7485fd9db90c9b5))
+* **embroider:** remove obsolete export for getWidget helper function ([94fb461](https://github.com/projectcaluma/ember-caluma/commit/94fb461aaa7cac6af9f5612b8f34ad047a2b67bb))
+
+# [@projectcaluma/ember-form-v11.0.0-beta.15](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.14...@projectcaluma/ember-form-v11.0.0-beta.15) (2022-03-16)
+
+
+### Bug Fixes
+
+* **form:** make sure dynamic options are loaded before validating ([2713b37](https://github.com/projectcaluma/ember-caluma/commit/2713b3718b64f9111ca3e7bec2a6c60fafcb183a))
+
+# [@projectcaluma/ember-form-v11.0.0-beta.14](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.13...@projectcaluma/ember-form-v11.0.0-beta.14) (2022-03-11)
+
+
+### Bug Fixes
+
+* **form:** make sure table controls are always visible ([8cd97d2](https://github.com/projectcaluma/ember-caluma/commit/8cd97d204539f2e84b9baf9841591460bddf145a))
+
+# [@projectcaluma/ember-form-v11.0.0-beta.13](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.12...@projectcaluma/ember-form-v11.0.0-beta.13) (2022-03-11)
+
+
+### Bug Fixes
+
+* **form:** don't refetch dynamic options on validation ([27061c6](https://github.com/projectcaluma/ember-caluma/commit/27061c67f0562508f558305247cb51d615fa36b0))
+* **form:** fix input in date fields ([cf54bf5](https://github.com/projectcaluma/ember-caluma/commit/cf54bf5542e35fd7dbe293a9e22288afae6a517a))
+* **navigation:** exclude static questions from visible fields ([6ebd085](https://github.com/projectcaluma/ember-caluma/commit/6ebd085098df71fab693dec5282ea4b81d5b9836))
+* **workflow:** return case status on complete / skip work-item mutation ([524453c](https://github.com/projectcaluma/ember-caluma/commit/524453c1189b4375ca792fca7d35056b916696f8))
+
+
+### Features
+
+* **form:** support passing component override classes ([9409c7c](https://github.com/projectcaluma/ember-caluma/commit/9409c7cb5901dcdffec1c0294046da64b74b9922))
+
+# [@projectcaluma/ember-form-v11.0.0-beta.12](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.11...@projectcaluma/ember-form-v11.0.0-beta.12) (2022-02-23)
+
+
+### Bug Fixes
+
+* **form:** fix textarea size in tables ([efba737](https://github.com/projectcaluma/ember-caluma/commit/efba737f0a6314225a851ee0c57c2c506403bc06))
+
+# [@projectcaluma/ember-form-v11.0.0-beta.11](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.10...@projectcaluma/ember-form-v11.0.0-beta.11) (2022-02-16)
+
+
+### Bug Fixes
+
+* **form:** always use monday as first day of the week in datepicker ([7008a90](https://github.com/projectcaluma/ember-caluma/commit/7008a90d737d2dca714f4799f846f4c4086ecd4d))
+* **form:** use action button type "button" ([3e9795f](https://github.com/projectcaluma/ember-caluma/commit/3e9795f28b73dcf376ec9ecabcd4c1b6a8085beb))
+
+
+### Features
+
+* **form:** add notfound named block in cf-content if no document found ([f1861c1](https://github.com/projectcaluma/ember-caluma/commit/f1861c1f3b2da9843771aa1b12956190c98799a6))
+
+# [@projectcaluma/ember-form-v11.0.0-beta.10](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.9...@projectcaluma/ember-form-v11.0.0-beta.10) (2022-02-09)
+
+
+### Bug Fixes
+
+* **form:** always trigger data fetching in cf-content ([3fab675](https://github.com/projectcaluma/ember-caluma/commit/3fab675fca0559cd4164d4d62b44b9d9b74e4a5c))
+
 # [@projectcaluma/ember-form-v11.0.0-beta.9](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.8...@projectcaluma/ember-form-v11.0.0-beta.9) (2022-02-07)
 
 

package/addon/components/cf-content.hbs

@@ -1,41 +1,42 @@
-{{#if @documentId}}
-  {{#if this.loading}}
-    <div class="uk-text-center"><UkSpinner @ratio={{2}} /></div>
-  {{else if this.document}}
-    {{#let
-      (hash
+{{#if this.loading}}
+  <div class="uk-text-center"><UkSpinner @ratio={{2}} /></div>
+{{else if this.document}}
+  {{#let
+    (hash
+      document=this.document
+      navigation=(component
+        "cf-navigation"
+        navigation=this.navigation
+        useAsHeading=(or @useAsHeading false)
+        headingBaseLevel=(or @headingBaseLevel 1)
+      )
+      pagination=(component "cf-pagination" navigation=this.navigation)
+      form=(component
+        "cf-form-wrapper"
         document=this.document
-        navigation=(component
-          "cf-navigation"
-          navigation=this.navigation
-          useAsHeading=(or @useAsHeading false)
-          headingBaseLevel=(or @headingBaseLevel 1)
-        )
-        pagination=(component "cf-pagination" navigation=this.navigation)
-        form=(component
-          "cf-form-wrapper"
-          document=this.document
-          fieldset=this.fieldset
-          context=@context
-          disabled=@disabled
-        )
+        fieldset=this.fieldset
+        context=@context
+        disabled=@disabled
+        onSave=@onSave
       )
-      as |content|
-    }}
-      {{#if (has-block)}}
-        {{yield content}}
-      {{else if (gt this.document.fieldsets.length 1)}}
-        <div uk-grid>
-          <div class="uk-width-1-1 uk-width-1-3@m"><content.navigation /></div>
-          <div class="uk-width-1-1 uk-width-2-3@m">
-            <content.form />
-            <hr />
-            <content.pagination />
-          </div>
+    )
+    as |content|
+  }}
+    {{#if (has-block)}}
+      {{yield content}}
+    {{else if (gt this.document.fieldsets.length 1)}}
+      <div uk-grid>
+        <div class="uk-width-1-1 uk-width-1-3@m"><content.navigation /></div>
+        <div class="uk-width-1-1 uk-width-2-3@m">
+          <content.form />
+          <hr />
+          <content.pagination />
         </div>
-      {{else}}
-        <content.form />
-      {{/if}}
-    {{/let}}
-  {{/if}}
+      </div>
+    {{else}}
+      <content.form />
+    {{/if}}
+  {{/let}}
+{{else}}
+  {{yield to="notfound"}}
 {{/if}}

package/addon/components/cf-content.js

@@ -4,7 +4,7 @@ import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
 import { dropTask } from "ember-concurrency";
-import { useTask } from "ember-resources";
+import { trackedTask } from "ember-resources/util/ember-concurrency";
 
 import getDocumentAnswersQuery from "@projectcaluma/ember-form/gql/queries/document-answers.graphql";
 import getDocumentFormsQuery from "@projectcaluma/ember-form/gql/queries/document-forms.graphql";
@@ -125,7 +125,7 @@ export default class CfContentComponent extends Component {
     );
   }
 
-  data = useTask(this, this.fetchData, () => [this.args.documentId]);
+  data = trackedTask(this, this.fetchData, () => [this.args.documentId]);
 
   @dropTask
   *fetchData() {
@@ -158,7 +158,11 @@ export default class CfContentComponent extends Component {
 
     const raw = parseDocument({ ...answerDocument, form });
 
-    const document = new Document({ raw, owner });
+    const document = new Document({
+      raw,
+      owner,
+      dataSourceContext: this.args.context,
+    });
     const navigation = new Navigation({ document, owner });
 
     registerDestructor(this, () => {

package/addon/components/cf-field/hint.hbs

@@ -0,0 +1,5 @@
+<div data-test-field-hint={{@field.pk}}>
+  <span class="uk-text-small uk-text-muted" ...attributes>
+    {{@field.question.raw.hintText}}
+  </span>
+</div>

package/addon/components/cf-field/input/action-button.hbs

@@ -1,18 +1,23 @@
-<DocumentValidity
-  @document={{@field.document}}
-  @validateOnEnter={{this.validateOnEnter}}
-  as |isValid validate|
->
-  <WorkItemButton
-    @workItemId={{this.workItem}}
-    @mutation={{this.action}}
-    @label={{@field.question.raw.label}}
-    @disabled={{or (and (not-eq isValid null) (not isValid)) @disabled}}
-    @color={{this.color}}
-    @beforeMutate={{fn this.beforeMutate validate}}
-    @onSuccess={{this.onSuccess}}
-    @onError={{this.onError}}
-    @type={{this.type}}
-    class={{if @disabled "uk-hidden"}}
-  />
-</DocumentValidity>
+{{#if
+  (macroCondition
+    (macroDependencySatisfies "@projectcaluma/ember-workflow" "*")
+  )
+}}
+  <DocumentValidity
+    @document={{@field.document}}
+    @validateOnEnter={{this.validateOnEnter}}
+    as |isValid validate|
+  >
+    <WorkItemButton
+      @workItemId={{this.workItem}}
+      @mutation={{this.action}}
+      @label={{@field.question.raw.label}}
+      @disabled={{or (and (not-eq isValid null) (not isValid)) @disabled}}
+      @color={{this.color}}
+      @beforeMutate={{fn this.beforeMutate validate}}
+      @onSuccess={{this.onSuccess}}
+      @onError={{this.onError}}
+      class={{if @disabled "uk-hidden"}}
+    />
+  </DocumentValidity>
+{{/if}}

package/addon/components/cf-field/input/action-button.js

@@ -1,77 +1,78 @@
 import { assert } from "@ember/debug";
 import { action } from "@ember/object";
+import { dependencySatisfies, macroCondition } from "@embroider/macros";
 import Component from "@glimmer/component";
-import UIkit from "uikit";
+import { confirm } from "ember-uikit";
 
-async function confirm(text) {
-  try {
-    await UIkit.modal.confirm(text);
+let CfFieldInputActionButtonComponent;
 
-    return true;
-  } catch (error) {
-    return false;
-  }
-}
+if (macroCondition(dependencySatisfies("@projectcaluma/ember-workflow", ""))) {
+  CfFieldInputActionButtonComponent = class extends Component {
+    constructor(...args) {
+      super(...args);
 
-export default class CfFieldInputActionButtonComponent extends Component {
-  constructor(...args) {
-    super(...args);
+      assert(
+        "The document must have a `workItemUuid` for `<CfField::Input::ActionButton />` to work.",
+        this.args.field.document.workItemUuid
+      );
+    }
 
-    assert(
-      "The document must have a `workItemUuid` for `<CfField::Input::ActionButton />` to work.",
-      this.args.field.document.workItemUuid
-    );
-  }
+    get workItem() {
+      return (
+        this.args.context?.actionButtonWorkItemId ||
+        this.args.field.document.workItemUuid
+      );
+    }
 
-  get workItem() {
-    return (
-      this.args.context?.actionButtonWorkItemId ||
-      this.args.field.document.workItemUuid
-    );
-  }
+    get action() {
+      return this.args.field.question.raw.action.toLowerCase();
+    }
 
-  get action() {
-    return this.args.field.question.raw.action.toLowerCase();
-  }
+    get color() {
+      return this.args.field.question.raw.color.toLowerCase();
+    }
 
-  get color() {
-    return this.args.field.question.raw.color.toLowerCase();
-  }
+    get validateOnEnter() {
+      return (
+        this.args.field.question.raw.action === "COMPLETE" &&
+        this.args.field.question.raw.validateOnEnter
+      );
+    }
 
-  get type() {
-    return this.args.field.question.raw.action === "COMPLETE"
-      ? "submit"
-      : "button";
-  }
+    @action
+    async beforeMutate(validateFn) {
+      if (
+        this.args.field.question.raw.action === "COMPLETE" &&
+        !(await validateFn())
+      ) {
+        return false;
+      }
 
-  get validateOnEnter() {
-    return (
-      this.args.field.question.raw.action === "COMPLETE" &&
-      this.args.field.question.raw.validateOnEnter
-    );
-  }
+      const confirmText = this.args.field.question.raw.infoText;
 
-  @action
-  async beforeMutate(validateFn) {
-    if (
-      this.args.field.question.raw.action === "COMPLETE" &&
-      !(await validateFn())
-    ) {
-      return false;
+      return !confirmText || confirm(confirmText);
     }
 
-    const confirmText = this.args.field.question.raw.infoText;
-
-    return !confirmText || confirm(confirmText);
-  }
+    @action
+    onSuccess() {
+      return this.args.context?.actionButtonOnSuccess?.();
+    }
 
-  @action
-  onSuccess() {
-    return this.args.context?.actionButtonOnSuccess?.();
-  }
+    @action
+    onError(error) {
+      return this.args.context?.actionButtonOnError?.(error);
+    }
+  };
+} else {
+  CfFieldInputActionButtonComponent = class extends Component {
+    constructor(...args) {
+      super(...args);
 
-  @action
-  onError(error) {
-    return this.args.context?.actionButtonOnError?.(error);
-  }
+      assert(
+        "@projectcaluma/ember-workflow must be installed to enable the usage of the action button questions"
+      );
+    }
+  };
 }
+
+export default CfFieldInputActionButtonComponent;

package/addon/components/cf-field/input/checkbox.hbs

@@ -1,8 +1,7 @@
 {{#each @field.options as |option i|}}
-  {{#if (gt i 0)}}<br />{{/if}}
+  {{#if (and (gt i 0) (not @field.raw.question.meta.vertical))}}<br />{{/if}}
   <label
-    class="cf-checkbox_label
-      {{if @field.isInvalid 'uk-form-danger'}}
+    class="{{if @field.isInvalid 'uk-form-danger'}}
       {{if @field.raw.question.meta.vertical 'uk-margin-large-right'}}"
   >
     <input

package/addon/components/cf-field/input/date.hbs

@@ -1,28 +1,25 @@
-{{#if @disabled}}
-  <input
-    class="uk-input uk-disabled"
-    type="text"
-    name={{@field.pk}}
+<div class="uk-inline uk-width-1-1">
+  <a
+    class="uk-form-icon uk-form-icon-flip"
+    uk-tooltip={{t "caluma.form.delete"}}
+    href="#"
+    {{on "click" this.clearCalendar}}
+  >
+    <UkIcon @icon="close" />
+  </a>
+  <EmberFlatpickr
     id={{@field.pk}}
-    value={{format-date
-      @field.answer.value
-      day="2-digit"
-      month="2-digit"
-      year="numeric"
-    }}
-    readonly
-  />
-{{else}}
-  <input
-    class="uk-input"
-    type="text"
     name={{@field.pk}}
-    id={{@field.pk}}
-    {{pikaday
-      toString=this.formatDate
-      i18n=this.pikadayTranslations
-      value=@field.answer.value
-      onSelect=this.onChange
-    }}
+    class="uk-input {{if @disabled 'uk-disabled'}}"
+    readonly={{@disabled}}
+    @disabled={{@disabled}}
+    @locale={{this.locale}}
+    @date={{or @field.answer.value null}}
+    @altFormat={{this.dateFormat}}
+    @altInput={{true}}
+    @allowInput={{true}}
+    @onChange={{this.onChange}}
+    @onReady={{this.onReady}}
+    @onClose={{this.onClose}}
   />
-{{/if}}
+</div>

package/addon/components/cf-field/input/date.js

@@ -1,37 +1,52 @@
+import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
-import { DateTime, Info } from "luxon";
-import { cached } from "tracked-toolbox";
+import { tracked } from "@glimmer/tracking";
+import { DateTime } from "luxon";
 
 export default class CfFieldInputDateComponent extends Component {
   @service intl;
 
+  @tracked flatpickrRef = null;
+
+  get locale() {
+    return this.intl.primaryLocale.split("-")[0];
+  }
+
+  get config() {
+    return getOwner(this).resolveRegistration("config:environment");
+  }
+
+  get dateFormat() {
+    const {
+      FLATPICKR_DATE_FORMAT = {},
+      FLATPICKR_DATE_FORMAT_DEFAULT = "m/d/Y",
+    } = this.config["ember-caluma"] || {};
+
+    return FLATPICKR_DATE_FORMAT[this.locale] ?? FLATPICKR_DATE_FORMAT_DEFAULT;
+  }
+
   @action
-  onChange(date) {
-    // Change Javascript date to ISO string if not null.
-    this.args.onSave(date ? DateTime.fromJSDate(date).toISODate() : null);
+  onReady(_selectedDates, _dateStr, flatpickrRef) {
+    this.flatpickrRef = flatpickrRef;
+  }
+
+  @action
+  clearCalendar(e) {
+    e.stopPropagation();
+    this.flatpickrRef.clear();
   }
 
   @action
-  formatDate(date) {
-    return this.intl.formatDate(date, {
-      day: "2-digit",
-      month: "2-digit",
-      year: "numeric",
-    });
+  onChange([date]) {
+    // Change Javascript date to ISO string if not null.
+    this.args.onSave(date ? DateTime.fromJSDate(date).toISODate() : null);
   }
 
-  @cached
-  get pikadayTranslations() {
-    const locale = this.intl.primaryLocale;
-
-    return {
-      previousMonth: this.intl.t("caluma.form.pikaday.month-previous"),
-      nextMonth: this.intl.t("caluma.form.pikaday.month-next"),
-      months: Info.months("long", { locale }),
-      weekdays: Info.weekdays("long", { locale }),
-      weekdaysShort: Info.weekdays("short", { locale }),
-    };
+  // flatpickr doesnt call onChange after manual input and clicking outside.
+  @action
+  onClose(dates) {
+    this.onChange(dates);
   }
 }

package/addon/components/cf-field/input/files.hbs

@@ -0,0 +1,38 @@
+<div class="uk-flex-middle uk-grid-divider uk-grid-column-small" uk-grid>
+  <div uk-form-custom="target: true">
+
+    <input
+      type="file"
+      name={{@field.pk}}
+      id={{@field.pk}}
+      disabled={{@disabled}}
+      multiple
+      {{on "change" this.save}}
+    />
+    <UkButton disabled={{@disabled}}>
+      {{t "caluma.form.selectFile"}}
+    </UkButton>
+  </div>
+  <ul class="uk-list uk-list-collapse" data-test-file-list={{@field.pk}}>
+    {{#each this.files as |file|}}
+      <li class="uk-text-justify uk-text-middle">
+        <UkButton
+          data-test-download-link={{file.id}}
+          @color="link"
+          @onClick={{fn this.download file.id}}
+        >
+          {{file.name}}
+        </UkButton>
+        {{#unless @disabled}}
+          <UkIcon
+            data-test-delete={{file.id}}
+            class="uk-icon-button uk-margin-small-left"
+            role="button"
+            @icon="trash"
+            {{on "click" (fn this.delete file.id)}}
+          />
+        {{/unless}}
+      </li>
+    {{/each}}
+  </ul>
+</div>