@ni/nimble-components 33.12.0 → 34.0.0

package/dist/all-components-bundle.js

@@ -11476,7 +11476,7 @@
               return;
           }
           if (this.control && !this.isUserInput) {
-              this.control.value = this.value;
+              this.syncValueToInnerControl();
           }
           super.valueChanged(previous, this.value);
           if (previous !== undefined && !this.isUserInput) {
@@ -11551,7 +11551,7 @@
           super.connectedCallback();
           this.proxy.setAttribute("type", "number");
           this.validate();
-          this.control.value = this.value;
+          this.syncValueToInnerControl();
           if (this.autofocus) {
               DOM.queueUpdate(() => {
                   this.focus();
@@ -11578,9 +11578,9 @@
        * @internal
        */
       handleTextInput() {
-          this.control.value = this.control.value.replace(/[^0-9\-+e.]/g, "");
+          this.control.value = this.sanitizeInput(this.control.value);
           this.isUserInput = true;
-          this.value = this.control.value;
+          this.syncValueFromInnerControl();
       }
       /**
        * Change event handler for inner control.
@@ -11616,6 +11616,26 @@
        * @internal
        */
       handleBlur() {
+          this.syncValueToInnerControl();
+      }
+      /**
+       * Sanitizes the text input by the user.
+       * @param inputText The user-input text to sanitize
+       * @returns The sanitized text, containing only valid characters for a number field
+       */
+      sanitizeInput(inputText) {
+          return inputText.replace(/[^0-9\-+e.]/g, "");
+      }
+      /**
+       * Synchronizes the value from the input control in the shadow DOM to the host component.
+       */
+      syncValueFromInnerControl() {
+          this.value = this.control.value;
+      }
+      /**
+       * Synchronizes the value from the host component to the input control in the shadow DOM.
+       */
+      syncValueToInnerControl() {
           this.control.value = this.value;
       }
   };
@@ -16257,7 +16277,7 @@
       const end = getColorForTheme(element, hexToRgbaCssColor(Black15, 0), hexToRgbaCssColor(Black82, 0), hexToRgbaCssColor(ForestGreen, 0));
       return `linear-gradient(${start}, ${end})`;
   });
-  DesignToken.create(styleNameFromTokenName(tokenNames.dividerBackgroundColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Black91, 0.2), hexToRgbaCssColor(Black15, 0.2), hexToRgbaCssColor(White, 0.2)));
+  DesignToken.create(styleNameFromTokenName(tokenNames.dividerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
   const fillSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.2));
   const fillSelectedRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillSelectedColorForTheme(element)));
   const fillHoverSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.15));
@@ -26807,7 +26827,7 @@ so this becomes the fallback color for the slot */ ''}
                 ?required="${x => x.required}"
                 size="${x => x.size}"
                 type="text"
-                inputmode="numeric"
+                inputmode="text"
                 min="${x => x.min}"
                 max="${x => x.max}"
                 step="${x => x.step}"
@@ -26869,11 +26889,53 @@ so this becomes the fallback color for the slot */ ''}
           this.appearance = NumberFieldAppearance.underline;
           this.fullBleed = false;
           this.appearanceReadOnly = false;
+          this.decimalSeparator = '.';
+          this.inputFilterRegExp = this.buildFilterRegExp(this.decimalSeparator);
+          this.langSubscriber = {
+              handleChange: () => this.updateDecimalSeparatorAndInputFilter()
+          };
       }
       connectedCallback() {
           super.connectedCallback();
           // This is a workaround for FAST issue: https://github.com/microsoft/fast/issues/6148
           this.control.setAttribute('role', 'spinbutton');
+          this.updateDecimalSeparatorAndInputFilter();
+          lang.subscribe(this.langSubscriber, this);
+      }
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          lang.unsubscribe(this.langSubscriber, this);
+      }
+      sanitizeInput(inputText) {
+          return inputText.replace(this.inputFilterRegExp, '');
+      }
+      // this.value <-- this.control.value
+      syncValueFromInnerControl() {
+          this.value = this.decimalSeparator !== '.'
+              ? this.control.value.replace(this.decimalSeparator, '.')
+              : this.control.value;
+      }
+      // this.value --> this.control.value
+      syncValueToInnerControl() {
+          this.control.value = this.decimalSeparator !== '.'
+              ? this.value.replace('.', this.decimalSeparator)
+              : this.value;
+      }
+      updateDecimalSeparatorAndInputFilter() {
+          const previousSeparator = this.decimalSeparator;
+          this.decimalSeparator = this.getSeparatorForLanguange(lang.getValueFor(this));
+          if (this.decimalSeparator !== previousSeparator) {
+              this.inputFilterRegExp = this.buildFilterRegExp(this.decimalSeparator);
+              this.control.value = this.control.value.replace(previousSeparator, this.decimalSeparator);
+          }
+      }
+      getSeparatorForLanguange(language) {
+          return Intl.NumberFormat(language)
+              .formatToParts(1.1)
+              .find(x => x.type === 'decimal').value;
+      }
+      buildFilterRegExp(decimalSeparator) {
+          return new RegExp(`[^0-9\\-+e${decimalSeparator}]`, 'g');
       }
   }
   __decorate([