q2-tecton-elements 1.38.0 → 1.38.1

package/dist/cjs/q2-input.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2597758.js');
-const index$1 = require('./index-5d70039b.js');
+const index$1 = require('./index-09c712ea.js');
 
 function formatNumber(val = '', options = {
   prefix: '',
@@ -2939,6 +2939,8 @@ const Q2Input = class {
     };
     this.onInputInput = (event) => {
       event.stopPropagation();
+      if (this.type === 'currency')
+        this.handleCurrencyDeletion(event);
       const newFormattedValue = this.getFormattedValue(event.target.value, false);
       this.handleDataInput(newFormattedValue);
     };
@@ -2962,9 +2964,19 @@ const Q2Input = class {
       }
       this.setCursorPosition(cursorPosition);
     };
+    // Sets textSelectedForDeletion to true if the user has selected text for deletion
+    // This is used to prevent other logic from running when text is deleted
+    this.handleCurrencyKeydown = (event) => {
+      if (event.key !== 'Backspace' && event.key !== 'Delete')
+        return;
+      const inputElement = this.inputField;
+      this.textSelectedForDeletion = inputElement.selectionStart !== inputElement.selectionEnd;
+    };
     this.onInputKeydown = (event) => {
       const keysThatMoveCursor = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'];
       const { key } = event;
+      if (this.type === 'currency')
+        this.handleCurrencyKeydown(event);
       if (this.shouldCursorStayAtEnd && keysThatMoveCursor.includes(key))
         event.preventDefault();
       if (key === 'Enter' && this.valueOnFocus !== this.formattedValueObject.value) {
@@ -3317,6 +3329,60 @@ const Q2Input = class {
       this.value = event.detail.value;
     }
   }
+  handleCurrencyDeletion(event) {
+    // Don't do anything if text was selected for deletion
+    if (this.textSelectedForDeletion) {
+      this.textSelectedForDeletion = false;
+      return;
+    }
+    // We only care about "Backspace" and "Delete" events
+    if (event.inputType !== 'deleteContentBackward' && event.inputType !== 'deleteContentForward')
+      return;
+    const input = event.target;
+    const cursorPosition = input.selectionStart;
+    const { formattedValue } = this.formattedValueObject;
+    if (cursorPosition === null)
+      return;
+    let cursorMap;
+    switch (event.inputType) {
+      case 'deleteContentBackward':
+        const valueBeforeCursor = formattedValue.substring(0, cursorPosition + 1);
+        const isPrevCharAlphaNum = /[a-zA-Z0-9]$/.test(valueBeforeCursor);
+        cursorMap = {
+          leftIndex: isPrevCharAlphaNum ? cursorPosition : cursorPosition - 1,
+          rightIndex: isPrevCharAlphaNum ? cursorPosition + 1 : cursorPosition,
+          afterCursorOffset: 0,
+          newCursorOffset: 1,
+        };
+        break;
+      case 'deleteContentForward':
+        const valueAfterCursor = formattedValue.substring(cursorPosition);
+        const isNextCharAlphaNum = /^[a-zA-Z0-9]/.test(valueAfterCursor);
+        cursorMap = {
+          leftIndex: isNextCharAlphaNum ? cursorPosition : cursorPosition + 1,
+          rightIndex: isNextCharAlphaNum ? cursorPosition + 1 : cursorPosition + 2,
+          afterCursorOffset: 1,
+          newCursorOffset: 0,
+        };
+        break;
+      default:
+        return;
+    }
+    // Ensure the cursor doesn't move with a newly formatted value
+    const newValue = [
+      formattedValue.substring(0, cursorMap.leftIndex),
+      formattedValue.substring(cursorMap.rightIndex),
+    ].join('');
+    const charactersAfterCursor = formattedValue.length - cursorPosition - cursorMap.afterCursorOffset;
+    const newFormattedValue = this.getFormattedValue(newValue, false).formattedValue;
+    const newCursorPosition = Math.max(newFormattedValue.length - charactersAfterCursor + cursorMap.newCursorOffset, 0);
+    input.value = newFormattedValue;
+    input.setSelectionRange(newCursorPosition, newCursorPosition);
+    // This handles a runtime issue when a character is deleted from the beginning of the input
+    if (newCursorPosition === 0) {
+      index$1.nextPaint(() => input.setSelectionRange(newCursorPosition, newCursorPosition));
+    }
+  }
   handleDataInput(newFormattedValue) {
     if (this.maxlength === undefined ||
       newFormattedValue.unformattedValue.length <= this.maxlength ||
@@ -3390,10 +3456,16 @@ const Q2Input = class {
     if (this.canSetSelection && !cursorData.hasSelection) {
       const input = this.inputField;
       const { valueLength, previousValueLength, startingPosition } = cursorData;
-      if (startingPosition === valueLength && valueLength >= previousValueLength && this.type === 'currency') {
-        input.setSelectionRange(valueLength, valueLength);
+      if (this.type === 'currency') {
+        if (previousValueLength - valueLength === 1) {
+          input.setSelectionRange(startingPosition - 1, startingPosition - 1);
+        }
+        else {
+          const difference = previousValueLength - valueLength;
+          input.setSelectionRange(startingPosition - difference, startingPosition - difference);
+        }
       }
-      else {
+      if (this.type !== 'currency') {
         const difference = valueLength - previousValueLength;
         // Never allow the cursor to move in reverse
         const newPosition = startingPosition + (difference > 0 ? difference : 0);