@projectcaluma/ember-form 14.10.2 → 14.10.3

package/addon/components/cf-field/input/number-separator.hbs

@@ -14,6 +14,7 @@
     value={{this.displayValue}}
     placeholder={{@field.question.raw.placeholder}}
     readonly={{this.disabled}}
+    {{on "keydown" this.checkInput}}
     {{on "input" this.input}}
   />
 {{/if}}

package/addon/components/cf-field/input/number-separator.js

@@ -5,6 +5,10 @@ import { cached } from "tracked-toolbox";
 
 export default class CfFieldInputNumberSeparatorComponent extends Component {
   @service intl;
+  @service notification;
+
+  blockCount = 0;
+  blockNotified = false;
 
   get disabled() {
     return this.args.disabled || this.args.field?.question.isCalculated;
@@ -38,11 +42,57 @@ export default class CfFieldInputNumberSeparatorComponent extends Component {
     return this.intl.formatNumber(1.1).replace(/\p{Number}/gu, "");
   }
 
+  @cached
+  get allowedRegex() {
+    // Returns a regex for allowed input characters: digits and thousands
+    // separators for integers, plus decimal separators for floats.
+    const mil = RegExp.escape(this.thousandSeparator);
+    const dec = RegExp.escape(this.decimalSeparator);
+
+    if (this.args.field.questionType === "IntegerQuestion") {
+      return new RegExp(`(\\d|${mil})`);
+    }
+    return new RegExp(`(\\d|${mil}|${dec})`);
+  }
+
+  @action
+  checkInput(event) {
+    // allow keys like backspace, tab and arrows
+    if (event.key.length > 1 || event.ctrlKey || event.metaKey) {
+      return;
+    }
+
+    if (!this.allowedRegex.test(event.key)) {
+      event.preventDefault();
+      this.blockCount += 1;
+    }
+
+    // After the sixth attempt to enter a invalid character, the user will
+    // see a warning listing the characters that are allowed.
+    if (this.blockCount > 5 && !this.blockNotified) {
+      const allowedChars = ["0-9", this.thousandSeparator];
+
+      if (this.args.field.questionType === "FloatQuestion") {
+        allowedChars.push(this.decimalSeparator);
+      }
+
+      this.notification.warning(
+        this.intl.t(`caluma.form.validation.blockNotification`, {
+          allowedChars: allowedChars.join(" "),
+        }),
+      );
+
+      this.blockCount = 0;
+      this.blockNotified = true;
+    }
+  }
+
   @action
   input({ target: { value } }) {
     // We need to remove the thousand separator and replace the decimal
     // separator with a dot in order to parse it into a number. Which character
     // those are is determined per locale in the getters above.
+
     const serialized = parseFloat(
       value
         .replace(new RegExp(`\\${this.thousandSeparator}`, "g"), "")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "14.10.2",
+  "version": "14.10.3",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -39,7 +39,7 @@
     "luxon": "^3.5.0",
     "reactiveweb": "^1.3.0",
     "tracked-toolbox": "^2.0.0",
-    "@projectcaluma/ember-core": "^14.10.2"
+    "@projectcaluma/ember-core": "^14.10.3"
   },
   "devDependencies": {
     "@ember/optional-features": "2.3.0",
@@ -74,12 +74,12 @@
     "uikit": "3.25.6",
     "uuid": "13.0.0",
     "webpack": "5.104.1",
-    "@projectcaluma/ember-testing": "14.10.2",
-    "@projectcaluma/ember-workflow": "14.10.2"
+    "@projectcaluma/ember-testing": "14.10.3",
+    "@projectcaluma/ember-workflow": "14.10.3"
   },
   "peerDependencies": {
     "ember-source": ">= 4.0.0",
-    "@projectcaluma/ember-workflow": "^14.10.2"
+    "@projectcaluma/ember-workflow": "^14.10.3"
   },
   "dependenciesMeta": {
     "@projectcaluma/ember-core": {

package/translations/de.yaml

@@ -57,6 +57,7 @@ caluma:
       format: "{errorMsg}"
       table: "Mindestens eine Zeile der Tabelle wurde nicht korrekt ausgefüllt"
       error: "Folgende Fragen sind noch nicht korrekt ausgefüllt:"
+      blockNotification: "In diesem Feld sind nur folgende Zeichen erlaubt: {allowedChars}"
 
     compare:
       note: "Geändert von {username} am {date}"

package/translations/en.yaml

@@ -57,6 +57,7 @@ caluma:
       format: "{errorMsg}"
       table: "At least one row of the table was not filled in correctly"
       error: "The following questions have not yet been filled in correctly:"
+      blockNotification: "Only the following characters are allowed in this field: {allowedChars}"
 
     compare:
       note: "Changed by {username} on {date}"

package/translations/fr.yaml

@@ -57,6 +57,7 @@ caluma:
       format: "{errorMsg}"
       table: "Au moins une ligne du tableau n'a pas été remplie correctement"
       error: "Les questions suivantes n'ont pas encore été correctement remplies :"
+      blockNotification: "Seuls les caractères suivants sont autorisés dans ce champ : {allowedChars}"
 
     compare:
       note: "Modifié par {username} le {date}"

package/translations/it.yaml

@@ -57,6 +57,7 @@ caluma:
       format: "{errorMsg}"
       table: "Almeno una riga della tabella non è stata compilata correttamente."
       error: "Le domande seguenti non sono state compilate in modo corretto:"
+      blockNotification: "In questo campo sono consentiti solo i seguenti caratteri: {allowedChars}"
 
     compare:
       note: "Modificato da {username} il {date}"