@projectcaluma/ember-form 11.0.0 → 11.0.2

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

@@ -1,12 +1,25 @@
-<EmberFlatpickr
-  id={{@field.pk}}
-  name={{@field.pk}}
-  class="uk-input {{if @disabled 'uk-disabled'}}"
-  readonly={{@disabled}}
-  @disabled={{@disabled}}
-  @locale={{this.locale}}
-  @date={{or @field.answer.value null}}
-  @formatDate={{this.formatDate}}
-  @allowInput={{true}}
-  @onChange={{this.onChange}}
-/>
+<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}}
+    name={{@field.pk}}
+    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}}
+  />
+</div>

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

@@ -1,27 +1,56 @@
+import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
+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 = {
+        de: "d.m.Y",
+        fr: "d.m.Y",
+        en: "m/d/Y",
+      },
+      FLATPICKR_DATE_FORMAT_DEFAULT = "m/d/Y",
+    } = this.config["ember-caluma"] || {};
+
+    return FLATPICKR_DATE_FORMAT[this.locale] ?? FLATPICKR_DATE_FORMAT_DEFAULT;
+  }
+
+  @action
+  onReady(_selectedDates, _dateStr, flatpickrRef) {
+    this.flatpickrRef = flatpickrRef;
+  }
+
+  @action
+  clearCalendar(e) {
+    e.stopPropagation();
+    this.flatpickrRef.clear();
+  }
+
   @action
   onChange([date]) {
     // Change Javascript date to ISO string if not null.
     this.args.onSave(date ? DateTime.fromJSDate(date).toISODate() : null);
   }
 
+  // flatpickr doesnt call onChange after manual input and clicking outside.
   @action
-  formatDate(date) {
-    return this.intl.formatDate(date, {
-      day: "2-digit",
-      month: "2-digit",
-      year: "numeric",
-    });
+  onClose(dates) {
+    this.onChange(dates);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "11.0.0",
+  "version": "11.0.2",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -16,10 +16,10 @@
   "dependencies": {
     "@ember/string": "^3.0.1",
     "@embroider/macros": "^1.10.0",
-    "@embroider/util": "^1.9.0",
+    "@embroider/util": "^1.10.0",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@projectcaluma/ember-core": "^11.0.0",
+    "@projectcaluma/ember-core": "^11.0.2",
     "ember-apollo-client": "~4.0.2",
     "ember-auto-import": "^2.6.0",
     "ember-autoresize-modifier": "^0.7.0",
@@ -48,8 +48,8 @@
     "@ember/test-helpers": "2.7.0",
     "@embroider/test-setup": "2.1.1",
     "@faker-js/faker": "7.6.0",
-    "@projectcaluma/ember-testing": "11.0.0",
-    "@projectcaluma/ember-workflow": "^11.0.0",
+    "@projectcaluma/ember-testing": "11.0.2",
+    "@projectcaluma/ember-workflow": "^11.0.2",
     "broccoli-asset-rev": "3.0.0",
     "concurrently": "7.6.0",
     "ember-cli": "4.9.2",
@@ -73,7 +73,7 @@
     "webpack": "5.75.0"
   },
   "peerDependencies": {
-    "@projectcaluma/ember-workflow": "^11.0.0",
+    "@projectcaluma/ember-workflow": "^11.0.2",
     "ember-source": "^3.28.0 || ^4.0.0"
   },
   "peerDependenciesMeta": {