pjc-fields 0.0.54 → 0.0.55

package/fesm2022/pjc-fields.mjs

@@ -1986,28 +1986,64 @@ class PjcMoedaFieldComponent {
     onKeyDown(event) {
         if (this.disabled || this.readonly())
             return;
+        const input = event.target;
+        const cursorPos = input.selectionStart ?? 0;
+        const displayText = input.value;
+        const digitsBeforeCursor = (displayText.substring(0, cursorPos).match(/\d/g) || []).length;
+        const displayDigits = (displayText.match(/\d/g) || []).join('');
         if (/^\d$/.test(event.key)) {
             event.preventDefault();
-            if (this.cents() < 9_999_999_999) {
-                this.cents.update(c => c * 10 + Number.parseInt(event.key, 10));
+            const digits = displayDigits.split('');
+            digits.splice(digitsBeforeCursor, 0, event.key);
+            const newCents = Number.parseInt(digits.join(''), 10) || 0;
+            if (newCents <= 9_999_999_999) {
+                this.cents.set(newCents);
                 this.emitValue();
+                this.restoreCursor(input, digitsBeforeCursor + 1);
             }
         }
         else if (event.key === 'Backspace') {
             event.preventDefault();
-            this.cents.update(c => Math.floor(c / 10));
-            this.emitValue();
+            if (digitsBeforeCursor > 0) {
+                const digits = displayDigits.split('');
+                digits.splice(digitsBeforeCursor - 1, 1);
+                this.cents.set(Number.parseInt(digits.join(''), 10) || 0);
+                this.emitValue();
+                this.restoreCursor(input, digitsBeforeCursor - 1);
+            }
         }
         else if (event.key === 'Delete') {
             event.preventDefault();
-            this.cents.set(0);
-            this.emitValue();
+            if (digitsBeforeCursor < displayDigits.length) {
+                const digits = displayDigits.split('');
+                digits.splice(digitsBeforeCursor, 1);
+                this.cents.set(Number.parseInt(digits.join(''), 10) || 0);
+                this.emitValue();
+                this.restoreCursor(input, digitsBeforeCursor);
+            }
         }
         else if (event.key.length === 1) {
             // Block all other printable characters (letters, symbols, etc.)
             event.preventDefault();
         }
     }
+    restoreCursor(input, targetDigitPos) {
+        requestAnimationFrame(() => {
+            const newValue = input.value;
+            let digitCount = 0;
+            let newPos = newValue.length;
+            for (let i = 0; i < newValue.length; i++) {
+                if (/\d/.test(newValue[i])) {
+                    digitCount++;
+                    if (digitCount === targetDigitPos) {
+                        newPos = i + 1;
+                        break;
+                    }
+                }
+            }
+            input.setSelectionRange(newPos, newPos);
+        });
+    }
     onPaste(event) {
         event.preventDefault();
     }