@valtimo/components 13.50.1 → 13.51.0

package/fesm2022/valtimo-components.mjs

@@ -53,7 +53,7 @@ import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$6 from '@angular/cdk/overlay';
 import { OverlayModule, Overlay } from '@angular/cdk/overlay';
-import Currency from '@tadashi/currency';
+import AutoNumeric from 'autonumeric';
 import flatpickr from 'flatpickr';
 import { Dutch } from 'flatpickr/dist/l10n/nl';
 import createDOMPurify from 'dompurify';
@@ -12878,108 +12878,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+const DEFAULT_LOCALE = 'nl-NL';
+const DEFAULT_CURRENCY = 'EUR';
+const RAW_VALUE_MODIFIED_EVENT = 'autoNumeric:rawValueModified';
 /**
  * Custom formio component for currency number.
  */
 class FormIoCurrencyComponent {
     constructor() {
-        this.currencyForm = new FormGroup({
-            currencyValue: new FormControl(''),
-        });
         this._value = null;
         this.valueChange = new EventEmitter();
-        this._subscriptions = new Subscription();
+        this._disabled = false;
+        this._autoNumeric = null;
+        this._rendering = false;
+        this._rawValueModifiedListener = () => this.onRawValueModified();
     }
     get value() {
         return this._value;
     }
     set value(value) {
-        this._value = value;
-        // Rendering only — emitting here would write the rendered value back over the one form.io
-        // is about to hand a freshly redrawn component.
-        this.currencyForm.setValue({
-            currencyValue: Currency.masking(value, this.maskOpts),
-        }, { emitEvent: false });
+        this._value = typeof value === 'number' ? value : null;
+        this.renderValue();
+    }
+    get disabled() {
+        return this._disabled;
     }
     set disabled(value) {
-        if (value) {
-            this.currencyForm.disable({ emitEvent: false });
+        this._disabled = !!value;
+    }
+    ngAfterViewInit() {
+        const element = this.currencyElement.nativeElement;
+        this._autoNumeric = new AutoNumeric(element, this.autoNumericOptions);
+        element.addEventListener(RAW_VALUE_MODIFIED_EVENT, this._rawValueModifiedListener);
+        this.renderValue();
+    }
+    ngOnChanges(changes) {
+        if (this._autoNumeric &&
+            (changes.currencyLocale || changes.currencyCurrency || changes.allowEmptyValue)) {
+            this.withoutEmitting(() => this._autoNumeric.update(this.autoNumericOptions));
+            this.renderValue();
         }
-        else {
-            this.currencyForm.enable({ emitEvent: false });
+    }
+    ngOnDestroy() {
+        if (!this._autoNumeric) {
+            return;
         }
+        this.currencyElement.nativeElement.removeEventListener(RAW_VALUE_MODIFIED_EVENT, this._rawValueModifiedListener);
+        this._autoNumeric.remove();
+        this._autoNumeric = null;
     }
-    // A fresh object every call: Currency's constructor sets viaInput on the options it is handed.
-    get maskOpts() {
+    /**
+     * Derives the AutoNumeric formatting from the Intl formatting of the configured locale and
+     * currency, so the input renders amounts exactly as that locale writes them.
+     */
+    get autoNumericOptions() {
+        const formatter = new Intl.NumberFormat(this.currencyLocale || DEFAULT_LOCALE, {
+            style: 'currency',
+            currency: this.currencyCurrency || DEFAULT_CURRENCY,
+        });
+        const parts = formatter.formatToParts(-1234567.89);
+        const partValue = (type) => parts.find(part => part.type === type)?.value ?? '';
+        const indexOf = (type) => parts.findIndex(part => part.type === type);
+        const currencyIndex = indexOf('currency');
+        const firstIntegerIndex = indexOf('integer');
+        const minusSignIndex = indexOf('minusSign');
+        const currencyIsPrefix = currencyIndex < firstIntegerIndex;
+        const spacing = parts[currencyIsPrefix ? currencyIndex + 1 : currencyIndex - 1];
+        const literal = spacing?.type === 'literal' ? spacing.value : '';
+        const currencySymbol = currencyIsPrefix
+            ? `${partValue('currency')}${literal}`
+            : `${literal}${partValue('currency')}`;
+        const negativePositiveSignPlacement = currencyIsPrefix
+            ? minusSignIndex < currencyIndex
+                ? 'l'
+                : 'r'
+            : minusSignIndex < firstIntegerIndex
+                ? 'p'
+                : minusSignIndex < currencyIndex
+                    ? 'l'
+                    : 's';
         return {
-            empty: this.allowEmptyValue || false,
-            locales: this.currencyLocale || 'nl-NL',
-            digits: 2,
-            options: {
-                style: 'currency',
-                currency: this.currencyCurrency || 'EUR',
-            },
+            currencySymbol,
+            currencySymbolPlacement: currencyIsPrefix ? 'p' : 's',
+            negativePositiveSignPlacement,
+            digitGroupSeparator: partValue('group'),
+            decimalCharacter: partValue('decimal') || '.',
+            decimalPlaces: formatter.resolvedOptions().maximumFractionDigits,
+            emptyInputBehavior: 'always',
+            modifyValueOnWheel: false,
         };
     }
-    ngOnInit() {
-        this._subscriptions.add(this.currencyForm.valueChanges.subscribe(() => {
-            // No mask yet: the value is being rendered, not typed, so there is nothing to write back.
-            if (!this._currencyInstance) {
-                return;
-            }
-            const unmasked = this._currencyInstance.getUnmasked(this.currencyForm.value.currencyValue);
-            if (unmasked === 0 && this.allowEmptyValue) {
-                this._value = null;
-                this.valueChange.emit(null);
+    onRawValueModified() {
+        if (this._rendering || !this._autoNumeric) {
+            return;
+        }
+        const numericString = this._autoNumeric.getNumericString();
+        const isEmpty = numericString === null || numericString === '';
+        const value = isEmpty ? (this.allowEmptyValue ? null : 0) : Number(numericString);
+        this._value = value;
+        this.valueChange.emit(value);
+    }
+    renderValue() {
+        if (!this._autoNumeric) {
+            return;
+        }
+        this.withoutEmitting(() => {
+            if (typeof this._value === 'number') {
+                this._autoNumeric.set(this._value);
             }
             else {
-                this._value = unmasked;
-                this.valueChange.emit(unmasked);
+                this._autoNumeric.clear();
             }
-        }));
-    }
-    ngOnDestroy() {
-        this._subscriptions.unsubscribe();
-    }
-    ngAfterViewInit() {
-        this._currencyInstance = new Currency(this.currencyElement.nativeElement, {
-            maskOpts: this.maskOpts,
         });
-        // A value can arrive before the view exists, so its render is redone here with the mask in
-        // place.
-        if (typeof this._value === 'number') {
-            this.renderValue();
-        }
     }
-    ngOnChanges(changes) {
-        if (changes.currencyLocale || changes.currencyCurrency || changes.allowEmptyValue) {
-            // ngOnChanges runs before ngAfterViewInit, which is where the mask is created from the
-            // current inputs, so there is nothing to update yet on the first run.
-            if (this._currencyInstance) {
-                if (typeof this.currencyLocale === 'string') {
-                    this._currencyInstance.opts.maskOpts.locales = this.currencyLocale;
-                }
-                if (typeof this.currencyCurrency === 'string') {
-                    this._currencyInstance.opts.maskOpts.options.currency = this.currencyCurrency;
-                }
-                if (typeof this.allowEmptyValue === 'boolean') {
-                    this._currencyInstance.opts.maskOpts.empty = this.allowEmptyValue;
-                }
-            }
-            this.renderValue();
+    withoutEmitting(action) {
+        this._rendering = true;
+        try {
+            action();
+        }
+        finally {
+            this._rendering = false;
         }
-    }
-    renderValue() {
-        this.currencyForm.setValue({
-            currencyValue: typeof this._value === 'number' ? Currency.masking(this._value, this.maskOpts) : '',
-        }, { emitEvent: false });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormIoCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormIoCurrencyComponent, isStandalone: false, selector: "valtimo-currency", inputs: { value: "value", disabled: "disabled", currencyLocale: "currencyLocale", currencyCurrency: "currencyCurrency", allowEmptyValue: "allowEmptyValue" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "currencyElement", first: true, predicate: ["currencyElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"currencyForm-container\" [formGroup]=\"currencyForm\">\n  <div class=\"input-group\">\n    <input #currencyElement id=\"currency\" formControlName=\"currencyValue\" class=\"form-control\" />\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FormIoCurrencyComponent, isStandalone: false, selector: "valtimo-currency", inputs: { value: "value", disabled: "disabled", currencyLocale: "currencyLocale", currencyCurrency: "currencyCurrency", allowEmptyValue: "allowEmptyValue" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "currencyElement", first: true, predicate: ["currencyElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"currencyForm-container\">\n  <div class=\"input-group\">\n    <input\n      #currencyElement\n      id=\"currency\"\n      class=\"form-control\"\n      inputmode=\"decimal\"\n      [disabled]=\"disabled\"\n    />\n  </div>\n</div>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormIoCurrencyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-currency', standalone: false, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"currencyForm-container\" [formGroup]=\"currencyForm\">\n  <div class=\"input-group\">\n    <input #currencyElement id=\"currency\" formControlName=\"currencyValue\" class=\"form-control\" />\n  </div>\n</div>\n" }]
+            args: [{ selector: 'valtimo-currency', standalone: false, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"currencyForm-container\">\n  <div class=\"input-group\">\n    <input\n      #currencyElement\n      id=\"currency\"\n      class=\"form-control\"\n      inputmode=\"decimal\"\n      [disabled]=\"disabled\"\n    />\n  </div>\n</div>\n" }]
         }], propDecorators: { currencyElement: [{
                 type: ViewChild,
                 args: ['currencyElement']