udp-stencil-component-library 26.3.0-beta.21 → 26.3.0-beta.22

package/dist/cjs/udp-fluent-number-input.cjs.entry.js

@@ -13,7 +13,6 @@ const UdpFluentNumberInput = class {
         this.valueChanged = index.createEvent(this, "valueChanged", 7);
         this.inputBlur = index.createEvent(this, "inputBlur", 7);
         this.inputFocus = index.createEvent(this, "inputFocus", 7);
-        this.liveValue = null;
         /** Whether to include error padding below the input. */
         this.includeErrorPadding = true;
         /** Whether the input is required for form submission. */
@@ -30,51 +29,75 @@ const UdpFluentNumberInput = class {
         this.appearance = 'outline';
         /** The size of the input control. */
         this.controlSize = 'medium';
+        this.handleKeyDown = (ev) => {
+            var _a, _b, _c, _d, _e;
+            const { key, ctrlKey, metaKey } = ev;
+            if (ctrlKey || metaKey)
+                return;
+            if (['Backspace', 'Delete', 'Tab', 'Enter', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(key))
+                return;
+            if (key === 'ArrowUp' || key === 'ArrowDown') {
+                this.handleStep(key === 'ArrowUp' ? 1 : -1);
+                ev.preventDefault();
+                return;
+            }
+            // Block scientific notation keys not useful in a form number input
+            if (key === 'e' || key === 'E' || key === '+') {
+                ev.preventDefault();
+                return;
+            }
+            // Block decimal point for integer-only inputs, or if one already exists
+            if (key === '.') {
+                if (this.decimals === 0) {
+                    ev.preventDefault();
+                    return;
+                }
+                const nativeInput = (_b = (_a = this.internalInput) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
+                if (nativeInput === null || nativeInput === void 0 ? void 0 : nativeInput.value.includes('.'))
+                    ev.preventDefault();
+                return;
+            }
+            // For digit keys, enforce decimal place limit
+            if (/^\d$/.test(key)) {
+                if (this.decimals != null && this.decimals > 0) {
+                    const nativeInput = (_d = (_c = this.internalInput) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('input');
+                    if (nativeInput) {
+                        const value = nativeInput.value;
+                        const dotIndex = value.indexOf('.');
+                        if (dotIndex !== -1) {
+                            const cursorAfterDot = ((_e = nativeInput.selectionEnd) !== null && _e !== void 0 ? _e : value.length) > dotIndex;
+                            const decimalsFilled = value.length - dotIndex - 1 >= this.decimals;
+                            if (cursorAfterDot && decimalsFilled)
+                                ev.preventDefault();
+                        }
+                    }
+                }
+                return;
+            }
+            // Allow minus sign for negative numbers; block everything else (letters, etc.)
+            if (key !== '-')
+                ev.preventDefault();
+        };
         this.handleInput = (ev) => {
             ev.stopPropagation();
             const target = ev.target;
-            this.liveValue = target.value;
             this.valueChanged.emit(target.value);
         };
         this.handleBlur = () => {
-            var _a, _b;
-            if (this.decimals != null && this.internalInput) {
-                const raw = parseFloat((_b = (_a = this.liveValue) !== null && _a !== void 0 ? _a : this.value) !== null && _b !== void 0 ? _b : '');
-                if (!isNaN(raw)) {
-                    const formatted = raw.toFixed(this.decimals);
-                    this.internalInput.value = formatted;
-                    this.liveValue = formatted;
-                    this.valueChanged.emit(formatted);
-                }
-            }
             this.inputBlur.emit();
         };
     }
+    // Sync controlled value updates to the inner input without going through the render
+    // cycle — avoids FAST's setter resetting cursor on unrelated re-renders (e.g. error prop).
+    onValuePropChange(newValue) {
+        if (this.internalInput) {
+            this.internalInput.value = newValue !== null && newValue !== void 0 ? newValue : '';
+        }
+    }
     componentDidLoad() {
         if (this.internalInput && this.value != null) {
             this.internalInput.value = this.value;
         }
-        this.applyNumberAttrs();
-    }
-    componentDidUpdate() {
-        this.applyNumberAttrs();
-    }
-    // fluent-text-input doesn't proxy min/max/step to its inner <input>, so we set them directly.
-    // We also set inputmode="decimal" so mobile keyboards show a numeric pad.
-    // NOTE: we do NOT forward type="number" to fluent-text-input because FAST's inputHandler
-    // reads input.value and writes it back via its setter. For type="number" in Chrome, this
-    // resets the cursor to position 0 whenever an intermediate decimal value (e.g. "3.") causes
-    // the browser's value-sanitisation to return the previous valid number ("3"), scrambling
-    // subsequent keystrokes into the wrong order (e.g. "3.14159" → "141593").
-    applyNumberAttrs() {
-        var _a, _b, _c, _d, _e;
-        const nativeInput = (_b = (_a = this.internalInput) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
-        if (!nativeInput)
-            return;
-        nativeInput.setAttribute('inputmode', 'decimal');
-        nativeInput.min = (_c = this.min) !== null && _c !== void 0 ? _c : '';
-        nativeInput.max = (_d = this.max) !== null && _d !== void 0 ? _d : '';
-        nativeInput.step = (_e = this.step) !== null && _e !== void 0 ? _e : '';
     }
     /** Selects the text in the input. */
     select() {
@@ -82,17 +105,41 @@ const UdpFluentNumberInput = class {
         (_a = this.internalInput) === null || _a === void 0 ? void 0 : _a.select();
         return Promise.resolve();
     }
+    handleStep(direction) {
+        var _a, _b, _c;
+        const nativeInput = (_b = (_a = this.internalInput) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
+        if (!nativeInput)
+            return;
+        const rawStep = this.step != null && this.step !== '' ? parseFloat(this.step) : 1;
+        const stepSize = isNaN(rawStep) ? 1 : rawStep;
+        const current = parseFloat(nativeInput.value);
+        const base = isNaN(current) ? 0 : current;
+        const next = base + direction * stepSize;
+        const stepStr = (_c = this.step) !== null && _c !== void 0 ? _c : '1';
+        const dotIdx = stepStr.indexOf('.');
+        const decimalPlaces = dotIdx !== -1 ? stepStr.length - dotIdx - 1 : 0;
+        const newValue = next.toFixed(decimalPlaces);
+        if (this.internalInput) {
+            this.internalInput.value = newValue;
+        }
+        this.valueChanged.emit(newValue);
+    }
     render() {
         const hasError = !!this.error;
         const message = this.error || this.hint;
         const noMessage = !message && !this.includeErrorPadding;
-        return (index.h(index.Host, { key: 'f87601660bf0d04ca3a617768a6178a9b83b3c39', class: { 'has-error': hasError } }, index.h("fluent-field", { key: '0a6bfa77b060b198f431cfd01dce8626d22b795c', class: { 'no-message': noMessage } }, index.h("fluent-text-input", { key: '70ee74cccec3b0223e4c36f6bec74a167dd66d8b', ref: el => (this.internalInput = el), slot: "input", class: { 'no-label': !this.label }, name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, autocomplete: this.autocomplete, spellcheck: "false", appearance: this.appearance, controlSize: this.controlSize, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: () => this.inputFocus.emit(), onInvalid: (e) => e.preventDefault() }, index.h("slot", { key: '72120dfefa9008c4283629e119887ff3e32d3894', slot: "start", name: "start" }), index.h("slot", { key: '3df3db74bd839bab72aa758468359451e0019c0b', slot: "end", name: "end" }), this.label && (index.h("fluent-label", { key: '9e4ad92775c6af795ffc5762b5f8045cd327ea6d', required: this.required, disabled: this.disabled }, this.label, this.popupHint && (index.h("udp-tooltip", { key: '97261e93f5652e11beb4c92aad11ab1e6e76c877', content: this.popupHint, positioning: "above" }, index.h("udp-fluent-icon", { key: '30894a2646b319aaccd96618aa6d5a8f5509769b', name: "info", size: "xs", class: "popup-hint-icon" })))))), index.h("udp-text", { key: '34ba101a49953809cb238f2b1c1cb4709661707a', slot: "message", variant: "caption1", class: {
+        return (index.h(index.Host, { key: '8fe6b1f30e3ae0e1fa0fcef60388fe9ac41e55ed', class: { 'has-error': hasError } }, index.h("fluent-field", { key: '62ed363518afcefd52cda47fcbee9d3182dd0f1f', class: { 'no-message': noMessage } }, index.h("fluent-text-input", { key: '13c9ddb85fa5c3ac57571cac56e71e5af7e2a6cf', ref: el => (this.internalInput = el), slot: "input", class: { 'no-label': !this.label }, name: this.name, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, autocomplete: this.autocomplete, spellcheck: "false", appearance: this.appearance, controlSize: this.controlSize, onKeyDown: this.handleKeyDown, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: () => this.inputFocus.emit(), onInvalid: (e) => e.preventDefault() }, index.h("slot", { key: '6c4c74028fb7a5abd3e996d007a882150a672046', slot: "start", name: "start" }), index.h("slot", { key: '595ecd9f02687596909ec11e47f45c52844f202e', slot: "end", name: "end" }), this.label && (index.h("fluent-label", { key: '3c6c1ae1b635700288624a6f636c07b2cce1e92f', required: this.required, disabled: this.disabled }, this.label, this.popupHint && (index.h("udp-tooltip", { key: 'fc613dd974b0bd1c5c07a4f420d81807f445351b', content: this.popupHint, positioning: "above" }, index.h("udp-fluent-icon", { key: '25b5ab4f00ab5ab26cdf83aa341280a82bc733fb', name: "info", size: "xs", class: "popup-hint-icon" })))))), index.h("udp-text", { key: 'a07ad42598cca494bdab27923967eb6d7262ea4e', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
             } }, message))));
     }
     static get delegatesFocus() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "onValuePropChange": 0
+            }]
+    }; }
 };
 UdpFluentNumberInput.style = udpFluentNumberInputCss();
 

package/dist/collection/components/fluent-ui/number-input/udp-fluent-number-input.js

@@ -3,14 +3,14 @@ import "@fluentui/web-components/text-input.js";
 import "@fluentui/web-components/field.js";
 import "@fluentui/web-components/label.js";
 /**
- * Number input component with min/max/step constraints and decimal capping.
+ * Number input component with keystroke filtering, decimal place capping, and arrow-key stepping.
+ * Min/max range constraints are handled at the form level by the consumer.
  *
  * @slot start - Content to be displayed at the start of the input.
  * @slot end - Content to be displayed at the end of the input.
  */
 export class UdpFluentNumberInput {
     constructor() {
-        this.liveValue = null;
         /** Whether to include error padding below the input. */
         this.includeErrorPadding = true;
         /** Whether the input is required for form submission. */
@@ -27,51 +27,75 @@ export class UdpFluentNumberInput {
         this.appearance = 'outline';
         /** The size of the input control. */
         this.controlSize = 'medium';
+        this.handleKeyDown = (ev) => {
+            var _a, _b, _c, _d, _e;
+            const { key, ctrlKey, metaKey } = ev;
+            if (ctrlKey || metaKey)
+                return;
+            if (['Backspace', 'Delete', 'Tab', 'Enter', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(key))
+                return;
+            if (key === 'ArrowUp' || key === 'ArrowDown') {
+                this.handleStep(key === 'ArrowUp' ? 1 : -1);
+                ev.preventDefault();
+                return;
+            }
+            // Block scientific notation keys not useful in a form number input
+            if (key === 'e' || key === 'E' || key === '+') {
+                ev.preventDefault();
+                return;
+            }
+            // Block decimal point for integer-only inputs, or if one already exists
+            if (key === '.') {
+                if (this.decimals === 0) {
+                    ev.preventDefault();
+                    return;
+                }
+                const nativeInput = (_b = (_a = this.internalInput) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
+                if (nativeInput === null || nativeInput === void 0 ? void 0 : nativeInput.value.includes('.'))
+                    ev.preventDefault();
+                return;
+            }
+            // For digit keys, enforce decimal place limit
+            if (/^\d$/.test(key)) {
+                if (this.decimals != null && this.decimals > 0) {
+                    const nativeInput = (_d = (_c = this.internalInput) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('input');
+                    if (nativeInput) {
+                        const value = nativeInput.value;
+                        const dotIndex = value.indexOf('.');
+                        if (dotIndex !== -1) {
+                            const cursorAfterDot = ((_e = nativeInput.selectionEnd) !== null && _e !== void 0 ? _e : value.length) > dotIndex;
+                            const decimalsFilled = value.length - dotIndex - 1 >= this.decimals;
+                            if (cursorAfterDot && decimalsFilled)
+                                ev.preventDefault();
+                        }
+                    }
+                }
+                return;
+            }
+            // Allow minus sign for negative numbers; block everything else (letters, etc.)
+            if (key !== '-')
+                ev.preventDefault();
+        };
         this.handleInput = (ev) => {
             ev.stopPropagation();
             const target = ev.target;
-            this.liveValue = target.value;
             this.valueChanged.emit(target.value);
         };
         this.handleBlur = () => {
-            var _a, _b;
-            if (this.decimals != null && this.internalInput) {
-                const raw = parseFloat((_b = (_a = this.liveValue) !== null && _a !== void 0 ? _a : this.value) !== null && _b !== void 0 ? _b : '');
-                if (!isNaN(raw)) {
-                    const formatted = raw.toFixed(this.decimals);
-                    this.internalInput.value = formatted;
-                    this.liveValue = formatted;
-                    this.valueChanged.emit(formatted);
-                }
-            }
             this.inputBlur.emit();
         };
     }
+    // Sync controlled value updates to the inner input without going through the render
+    // cycle — avoids FAST's setter resetting cursor on unrelated re-renders (e.g. error prop).
+    onValuePropChange(newValue) {
+        if (this.internalInput) {
+            this.internalInput.value = newValue !== null && newValue !== void 0 ? newValue : '';
+        }
+    }
     componentDidLoad() {
         if (this.internalInput && this.value != null) {
             this.internalInput.value = this.value;
         }
-        this.applyNumberAttrs();
-    }
-    componentDidUpdate() {
-        this.applyNumberAttrs();
-    }
-    // fluent-text-input doesn't proxy min/max/step to its inner <input>, so we set them directly.
-    // We also set inputmode="decimal" so mobile keyboards show a numeric pad.
-    // NOTE: we do NOT forward type="number" to fluent-text-input because FAST's inputHandler
-    // reads input.value and writes it back via its setter. For type="number" in Chrome, this
-    // resets the cursor to position 0 whenever an intermediate decimal value (e.g. "3.") causes
-    // the browser's value-sanitisation to return the previous valid number ("3"), scrambling
-    // subsequent keystrokes into the wrong order (e.g. "3.14159" → "141593").
-    applyNumberAttrs() {
-        var _a, _b, _c, _d, _e;
-        const nativeInput = (_b = (_a = this.internalInput) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
-        if (!nativeInput)
-            return;
-        nativeInput.setAttribute('inputmode', 'decimal');
-        nativeInput.min = (_c = this.min) !== null && _c !== void 0 ? _c : '';
-        nativeInput.max = (_d = this.max) !== null && _d !== void 0 ? _d : '';
-        nativeInput.step = (_e = this.step) !== null && _e !== void 0 ? _e : '';
     }
     /** Selects the text in the input. */
     select() {
@@ -79,11 +103,30 @@ export class UdpFluentNumberInput {
         (_a = this.internalInput) === null || _a === void 0 ? void 0 : _a.select();
         return Promise.resolve();
     }
+    handleStep(direction) {
+        var _a, _b, _c;
+        const nativeInput = (_b = (_a = this.internalInput) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
+        if (!nativeInput)
+            return;
+        const rawStep = this.step != null && this.step !== '' ? parseFloat(this.step) : 1;
+        const stepSize = isNaN(rawStep) ? 1 : rawStep;
+        const current = parseFloat(nativeInput.value);
+        const base = isNaN(current) ? 0 : current;
+        const next = base + direction * stepSize;
+        const stepStr = (_c = this.step) !== null && _c !== void 0 ? _c : '1';
+        const dotIdx = stepStr.indexOf('.');
+        const decimalPlaces = dotIdx !== -1 ? stepStr.length - dotIdx - 1 : 0;
+        const newValue = next.toFixed(decimalPlaces);
+        if (this.internalInput) {
+            this.internalInput.value = newValue;
+        }
+        this.valueChanged.emit(newValue);
+    }
     render() {
         const hasError = !!this.error;
         const message = this.error || this.hint;
         const noMessage = !message && !this.includeErrorPadding;
-        return (h(Host, { key: 'f87601660bf0d04ca3a617768a6178a9b83b3c39', class: { 'has-error': hasError } }, h("fluent-field", { key: '0a6bfa77b060b198f431cfd01dce8626d22b795c', class: { 'no-message': noMessage } }, h("fluent-text-input", { key: '70ee74cccec3b0223e4c36f6bec74a167dd66d8b', ref: el => (this.internalInput = el), slot: "input", class: { 'no-label': !this.label }, name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, autocomplete: this.autocomplete, spellcheck: "false", appearance: this.appearance, controlSize: this.controlSize, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: () => this.inputFocus.emit(), onInvalid: (e) => e.preventDefault() }, h("slot", { key: '72120dfefa9008c4283629e119887ff3e32d3894', slot: "start", name: "start" }), h("slot", { key: '3df3db74bd839bab72aa758468359451e0019c0b', slot: "end", name: "end" }), this.label && (h("fluent-label", { key: '9e4ad92775c6af795ffc5762b5f8045cd327ea6d', required: this.required, disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: '97261e93f5652e11beb4c92aad11ab1e6e76c877', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '30894a2646b319aaccd96618aa6d5a8f5509769b', name: "info", size: "xs", class: "popup-hint-icon" })))))), h("udp-text", { key: '34ba101a49953809cb238f2b1c1cb4709661707a', slot: "message", variant: "caption1", class: {
+        return (h(Host, { key: '8fe6b1f30e3ae0e1fa0fcef60388fe9ac41e55ed', class: { 'has-error': hasError } }, h("fluent-field", { key: '62ed363518afcefd52cda47fcbee9d3182dd0f1f', class: { 'no-message': noMessage } }, h("fluent-text-input", { key: '13c9ddb85fa5c3ac57571cac56e71e5af7e2a6cf', ref: el => (this.internalInput = el), slot: "input", class: { 'no-label': !this.label }, name: this.name, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, autocomplete: this.autocomplete, spellcheck: "false", appearance: this.appearance, controlSize: this.controlSize, onKeyDown: this.handleKeyDown, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: () => this.inputFocus.emit(), onInvalid: (e) => e.preventDefault() }, h("slot", { key: '6c4c74028fb7a5abd3e996d007a882150a672046', slot: "start", name: "start" }), h("slot", { key: '595ecd9f02687596909ec11e47f45c52844f202e', slot: "end", name: "end" }), this.label && (h("fluent-label", { key: '3c6c1ae1b635700288624a6f636c07b2cce1e92f', required: this.required, disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'fc613dd974b0bd1c5c07a4f420d81807f445351b', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '25b5ab4f00ab5ab26cdf83aa341280a82bc733fb', name: "info", size: "xs", class: "popup-hint-icon" })))))), h("udp-text", { key: 'a07ad42598cca494bdab27923967eb6d7262ea4e', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,
@@ -397,44 +440,6 @@ export class UdpFluentNumberInput {
                 "attribute": "control-size",
                 "defaultValue": "'medium'"
             },
-            "min": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Minimum allowed value. Enforced by the browser via native input constraints."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "min"
-            },
-            "max": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Maximum allowed value. Enforced by the browser via native input constraints."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max"
-            },
             "step": {
                 "type": "string",
                 "mutable": false,
@@ -447,7 +452,7 @@ export class UdpFluentNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Step increment for the spinner (e.g. \"0.5\", \"0.01\", \"1\")."
+                    "text": "Step increment for arrow-key stepping (e.g. \"0.5\", \"0.01\", \"1\"). Defaults to 1 if omitted."
                 },
                 "getter": false,
                 "setter": false,
@@ -466,7 +471,7 @@ export class UdpFluentNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Maximum number of decimal places. On blur, the value is rounded to this precision."
+                    "text": "Maximum number of decimal places allowed. Digits beyond this limit are blocked at the keystroke level."
                 },
                 "getter": false,
                 "setter": false,
@@ -544,4 +549,10 @@ export class UdpFluentNumberInput {
             }
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValuePropChange"
+            }];
+    }
 }

package/dist/components/udp-fluent-number-input.js

@@ -1,2 +1,2 @@
 import "../stencil-library/stencil-library.css";
-import{p as t,H as e,c as o,h as i,d as s,t as l}from"./index2.js";import"@fluentui/web-components/text-input.js";import"@fluentui/web-components/field.js";import"@fluentui/web-components/label.js";import{d as n}from"./udp-fluent-icon2.js";import{d as a}from"./udp-text2.js";import{d as r}from"./udp-tooltip2.js";const u=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChanged=o(this,"valueChanged",7),this.inputBlur=o(this,"inputBlur",7),this.inputFocus=o(this,"inputFocus",7),this.liveValue=null,this.includeErrorPadding=!0,this.required=!1,this.disabled=!1,this.readonly=!1,this.autofocus=!1,this.autocomplete="off",this.appearance="outline",this.controlSize="medium",this.handleInput=t=>{t.stopPropagation();const e=t.target;this.liveValue=e.value,this.valueChanged.emit(e.value)},this.handleBlur=()=>{var t,e;if(null!=this.decimals&&this.internalInput){const o=parseFloat(null!==(e=null!==(t=this.liveValue)&&void 0!==t?t:this.value)&&void 0!==e?e:"");if(!isNaN(o)){const t=o.toFixed(this.decimals);this.internalInput.value=t,this.liveValue=t,this.valueChanged.emit(t)}}this.inputBlur.emit()}}componentDidLoad(){this.internalInput&&null!=this.value&&(this.internalInput.value=this.value),this.applyNumberAttrs()}componentDidUpdate(){this.applyNumberAttrs()}applyNumberAttrs(){var t,e,o,i,s;const l=null===(e=null===(t=this.internalInput)||void 0===t?void 0:t.shadowRoot)||void 0===e?void 0:e.querySelector("input");l&&(l.setAttribute("inputmode","decimal"),l.min=null!==(o=this.min)&&void 0!==o?o:"",l.max=null!==(i=this.max)&&void 0!==i?i:"",l.step=null!==(s=this.step)&&void 0!==s?s:"")}select(){var t;return null===(t=this.internalInput)||void 0===t||t.select(),Promise.resolve()}render(){const t=!!this.error,e=this.error||this.hint;return i(s,{key:"f87601660bf0d04ca3a617768a6178a9b83b3c39",class:{"has-error":t}},i("fluent-field",{key:"0a6bfa77b060b198f431cfd01dce8626d22b795c",class:{"no-message":!e&&!this.includeErrorPadding}},i("fluent-text-input",{key:"70ee74cccec3b0223e4c36f6bec74a167dd66d8b",ref:t=>this.internalInput=t,slot:"input",class:{"no-label":!this.label},name:this.name,value:this.value,placeholder:this.placeholder,required:this.required,disabled:this.disabled,readonly:this.readonly,autofocus:this.autofocus,autocomplete:this.autocomplete,spellcheck:"false",appearance:this.appearance,controlSize:this.controlSize,onInput:this.handleInput,onBlur:this.handleBlur,onFocus:()=>this.inputFocus.emit(),onInvalid:t=>t.preventDefault()},i("slot",{key:"72120dfefa9008c4283629e119887ff3e32d3894",slot:"start",name:"start"}),i("slot",{key:"3df3db74bd839bab72aa758468359451e0019c0b",slot:"end",name:"end"}),this.label&&i("fluent-label",{key:"9e4ad92775c6af795ffc5762b5f8045cd327ea6d",required:this.required,disabled:this.disabled},this.label,this.popupHint&&i("udp-tooltip",{key:"97261e93f5652e11beb4c92aad11ab1e6e76c877",content:this.popupHint,positioning:"above"},i("udp-fluent-icon",{key:"30894a2646b319aaccd96618aa6d5a8f5509769b",name:"info",size:"xs",class:"popup-hint-icon"})))),i("udp-text",{key:"34ba101a49953809cb238f2b1c1cb4709661707a",slot:"message",variant:"caption1",class:{message:!0,error:t,includeErrorPadding:this.includeErrorPadding}},e)))}static get delegatesFocus(){return!0}static get style(){return"fluent-text-input[disabled]::part(control){color:var(--colorNeutralForegroundDisabled);-webkit-text-fill-color:var(--colorNeutralForegroundDisabled)}fluent-text-input[disabled]::part(root){background-color:var(--colorNeutralBackgroundDisabled)}fluent-label[disabled]{color:var(--colorNeutralForeground1)}fluent-text-input::part(control):-webkit-autofill,fluent-text-input::part(control):-webkit-autofill:hover,fluent-text-input::part(control):-webkit-autofill:focus,fluent-text-input::part(control):-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px var(--colorNeutralBackground1) inset !important;-webkit-text-fill-color:var(--colorNeutralForeground1) !important;transition:background-color 5000s ease-in-out 0s}:host{display:block;width:100%}fluent-field{width:100%}fluent-text-input{width:100%;max-width:100%}.message{color:var(--colorNeutralForeground3)}.message.includeErrorPadding{min-height:var(--lineHeightBase200)}.message.error{color:var(--colorPaletteRedForeground1)}.popup-hint-icon{margin-left:2px}fluent-text-input.no-label::part(label){display:none}fluent-field.no-message::part(message){display:none}:host(.has-error) fluent-text-input::part(root){border-color:var(--colorPaletteRedBorder2)}:host(.has-error:focus-within) fluent-text-input::part(root){border-color:var(--colorNeutralStroke1)}"}},[273,"udp-fluent-number-input",{value:[1],name:[1],label:[1],hint:[1],popupHint:[1,"popup-hint"],error:[1],includeErrorPadding:[4,"include-error-padding"],placeholder:[1],required:[4],disabled:[4],readonly:[4],autofocus:[4],autocomplete:[1],appearance:[1],controlSize:[1,"control-size"],min:[1],max:[1],step:[1],decimals:[2],select:[64]}]),d=u,c=function(){"undefined"!=typeof customElements&&["udp-fluent-number-input","udp-fluent-icon","udp-text","udp-tooltip"].forEach((t=>{switch(t){case"udp-fluent-number-input":customElements.get(l(t))||customElements.define(l(t),u);break;case"udp-fluent-icon":customElements.get(l(t))||n();break;case"udp-text":customElements.get(l(t))||a();break;case"udp-tooltip":customElements.get(l(t))||r()}}))};export{d as UdpFluentNumberInput,c as defineCustomElement}
+import{p as t,H as e,c as o,h as i,d as s,t as l}from"./index2.js";import"@fluentui/web-components/text-input.js";import"@fluentui/web-components/field.js";import"@fluentui/web-components/label.js";import{d as r}from"./udp-fluent-icon2.js";import{d as n}from"./udp-text2.js";import{d as a}from"./udp-tooltip2.js";const u=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChanged=o(this,"valueChanged",7),this.inputBlur=o(this,"inputBlur",7),this.inputFocus=o(this,"inputFocus",7),this.includeErrorPadding=!0,this.required=!1,this.disabled=!1,this.readonly=!1,this.autofocus=!1,this.autocomplete="off",this.appearance="outline",this.controlSize="medium",this.handleKeyDown=t=>{var e,o,i,s,l;const{key:r,ctrlKey:n,metaKey:a}=t;if(!n&&!a&&!["Backspace","Delete","Tab","Enter","ArrowLeft","ArrowRight","Home","End"].includes(r)){if("ArrowUp"===r||"ArrowDown"===r)return this.handleStep("ArrowUp"===r?1:-1),void t.preventDefault();if("e"!==r&&"E"!==r&&"+"!==r)if("."!==r)if(/^\d$/.test(r)){if(null!=this.decimals&&this.decimals>0){const e=null===(s=null===(i=this.internalInput)||void 0===i?void 0:i.shadowRoot)||void 0===s?void 0:s.querySelector("input");if(e){const o=e.value,i=o.indexOf(".");-1!==i&&(null!==(l=e.selectionEnd)&&void 0!==l?l:o.length)>i&&o.length-i-1>=this.decimals&&t.preventDefault()}}}else"-"!==r&&t.preventDefault();else{if(0===this.decimals)return void t.preventDefault();const i=null===(o=null===(e=this.internalInput)||void 0===e?void 0:e.shadowRoot)||void 0===o?void 0:o.querySelector("input");(null==i?void 0:i.value.includes("."))&&t.preventDefault()}else t.preventDefault()}},this.handleInput=t=>{t.stopPropagation(),this.valueChanged.emit(t.target.value)},this.handleBlur=()=>{this.inputBlur.emit()}}onValuePropChange(t){this.internalInput&&(this.internalInput.value=null!=t?t:"")}componentDidLoad(){this.internalInput&&null!=this.value&&(this.internalInput.value=this.value)}select(){var t;return null===(t=this.internalInput)||void 0===t||t.select(),Promise.resolve()}handleStep(t){var e,o,i;const s=null===(o=null===(e=this.internalInput)||void 0===e?void 0:e.shadowRoot)||void 0===o?void 0:o.querySelector("input");if(!s)return;const l=null!=this.step&&""!==this.step?parseFloat(this.step):1,r=isNaN(l)?1:l,n=parseFloat(s.value),a=(isNaN(n)?0:n)+t*r,u=null!==(i=this.step)&&void 0!==i?i:"1",d=u.indexOf("."),c=a.toFixed(-1!==d?u.length-d-1:0);this.internalInput&&(this.internalInput.value=c),this.valueChanged.emit(c)}render(){const t=!!this.error,e=this.error||this.hint;return i(s,{key:"8fe6b1f30e3ae0e1fa0fcef60388fe9ac41e55ed",class:{"has-error":t}},i("fluent-field",{key:"62ed363518afcefd52cda47fcbee9d3182dd0f1f",class:{"no-message":!e&&!this.includeErrorPadding}},i("fluent-text-input",{key:"13c9ddb85fa5c3ac57571cac56e71e5af7e2a6cf",ref:t=>this.internalInput=t,slot:"input",class:{"no-label":!this.label},name:this.name,placeholder:this.placeholder,required:this.required,disabled:this.disabled,readonly:this.readonly,autofocus:this.autofocus,autocomplete:this.autocomplete,spellcheck:"false",appearance:this.appearance,controlSize:this.controlSize,onKeyDown:this.handleKeyDown,onInput:this.handleInput,onBlur:this.handleBlur,onFocus:()=>this.inputFocus.emit(),onInvalid:t=>t.preventDefault()},i("slot",{key:"6c4c74028fb7a5abd3e996d007a882150a672046",slot:"start",name:"start"}),i("slot",{key:"595ecd9f02687596909ec11e47f45c52844f202e",slot:"end",name:"end"}),this.label&&i("fluent-label",{key:"3c6c1ae1b635700288624a6f636c07b2cce1e92f",required:this.required,disabled:this.disabled},this.label,this.popupHint&&i("udp-tooltip",{key:"fc613dd974b0bd1c5c07a4f420d81807f445351b",content:this.popupHint,positioning:"above"},i("udp-fluent-icon",{key:"25b5ab4f00ab5ab26cdf83aa341280a82bc733fb",name:"info",size:"xs",class:"popup-hint-icon"})))),i("udp-text",{key:"a07ad42598cca494bdab27923967eb6d7262ea4e",slot:"message",variant:"caption1",class:{message:!0,error:t,includeErrorPadding:this.includeErrorPadding}},e)))}static get delegatesFocus(){return!0}static get watchers(){return{value:[{onValuePropChange:0}]}}static get style(){return"fluent-text-input[disabled]::part(control){color:var(--colorNeutralForegroundDisabled);-webkit-text-fill-color:var(--colorNeutralForegroundDisabled)}fluent-text-input[disabled]::part(root){background-color:var(--colorNeutralBackgroundDisabled)}fluent-label[disabled]{color:var(--colorNeutralForeground1)}fluent-text-input::part(control):-webkit-autofill,fluent-text-input::part(control):-webkit-autofill:hover,fluent-text-input::part(control):-webkit-autofill:focus,fluent-text-input::part(control):-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px var(--colorNeutralBackground1) inset !important;-webkit-text-fill-color:var(--colorNeutralForeground1) !important;transition:background-color 5000s ease-in-out 0s}:host{display:block;width:100%}fluent-field{width:100%}fluent-text-input{width:100%;max-width:100%}.message{color:var(--colorNeutralForeground3)}.message.includeErrorPadding{min-height:var(--lineHeightBase200)}.message.error{color:var(--colorPaletteRedForeground1)}.popup-hint-icon{margin-left:2px}fluent-text-input.no-label::part(label){display:none}fluent-field.no-message::part(message){display:none}:host(.has-error) fluent-text-input::part(root){border-color:var(--colorPaletteRedBorder2)}:host(.has-error:focus-within) fluent-text-input::part(root){border-color:var(--colorNeutralStroke1)}"}},[273,"udp-fluent-number-input",{value:[1],name:[1],label:[1],hint:[1],popupHint:[1,"popup-hint"],error:[1],includeErrorPadding:[4,"include-error-padding"],placeholder:[1],required:[4],disabled:[4],readonly:[4],autofocus:[4],autocomplete:[1],appearance:[1],controlSize:[1,"control-size"],step:[1],decimals:[2],select:[64]},void 0,{value:[{onValuePropChange:0}]}]),d=u,c=function(){"undefined"!=typeof customElements&&["udp-fluent-number-input","udp-fluent-icon","udp-text","udp-tooltip"].forEach((t=>{switch(t){case"udp-fluent-number-input":customElements.get(l(t))||customElements.define(l(t),u);break;case"udp-fluent-icon":customElements.get(l(t))||r();break;case"udp-text":customElements.get(l(t))||n();break;case"udp-tooltip":customElements.get(l(t))||a()}}))};export{d as UdpFluentNumberInput,c as defineCustomElement}

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-09T22:54:43",
+  "timestamp": "2026-06-10T18:26:47",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.41.3",
@@ -52282,7 +52282,7 @@
       "encapsulation": "shadow",
       "tag": "udp-fluent-number-input",
       "readme": "# udp-fluent-number-input\n\n\n",
-      "docs": "Number input component with min/max/step constraints and decimal capping.",
+      "docs": "Number input component with keystroke filtering, decimal place capping, and arrow-key stepping.\nMin/max range constraints are handled at the form level by the consumer.",
       "docsTags": [
         {
           "name": "slot",
@@ -52444,7 +52444,7 @@
           "mutable": false,
           "attr": "decimals",
           "reflectToAttr": false,
-          "docs": "Maximum number of decimal places. On blur, the value is rounded to this precision.",
+          "docs": "Maximum number of decimal places allowed. Digits beyond this limit are blocked at the keystroke level.",
           "docsTags": [],
           "values": [
             {
@@ -52583,52 +52583,6 @@
           "getter": false,
           "setter": false
         },
-        {
-          "name": "max",
-          "type": "string",
-          "complexType": {
-            "original": "string",
-            "resolved": "string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "max",
-          "reflectToAttr": false,
-          "docs": "Maximum allowed value. Enforced by the browser via native input constraints.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "min",
-          "type": "string",
-          "complexType": {
-            "original": "string",
-            "resolved": "string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "min",
-          "reflectToAttr": false,
-          "docs": "Minimum allowed value. Enforced by the browser via native input constraints.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
         {
           "name": "name",
           "type": "string",
@@ -52767,7 +52721,7 @@
           "mutable": false,
           "attr": "step",
           "reflectToAttr": false,
-          "docs": "Step increment for the spinner (e.g. \"0.5\", \"0.01\", \"1\").",
+          "docs": "Step increment for arrow-key stepping (e.g. \"0.5\", \"0.01\", \"1\"). Defaults to 1 if omitted.",
           "docsTags": [],
           "values": [
             {