@ui5/webcomponents 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/dist/StepInput.d.ts

@@ -2,108 +2,101 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { Timeout } from "@ui5/webcomponents-base/dist/types.js";
-import type { IFormElement } from "./features/InputElementsFormSupport.js";
+import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import "@ui5/webcomponents-icons/dist/less.js";
 import "@ui5/webcomponents-icons/dist/add.js";
 import Input from "./Input.js";
 import InputType from "./types/InputType.js";
+type StepInputValueStateChangeEventDetail = {
+    valueState: `${ValueState}`;
+    valid: boolean;
+};
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-step-input</code> consists of an input field and buttons with icons to increase/decrease the value
+ * The `ui5-step-input` consists of an input field and buttons with icons to increase/decrease the value
  * with the predefined step.
- * <br><br>
+ *
  * The user can change the value of the component by pressing the increase/decrease buttons,
  * by typing a number directly, by using the keyboard up/down and page up/down,
  * or by using the mouse scroll wheel. Decimal values are supported.
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
  * The default step is 1 but the app developer can set a different one.
  *
- * App developers can set a maximum and minimum value for the <code>StepInput</code>.
+ * App developers can set a maximum and minimum value for the `StepInput`.
  * The increase/decrease button and the up/down keyboard navigation become disabled when
  * the value reaches the max/min or a new value is entered from the input which is greater/less than the max/min.
- * <br><br>
- * <h4>When to use:</h4>
- * <ul>
- * <li>To adjust amounts, quantities, or other values quickly.</li>
- * <li>To adjust values for a specific step.</li>
- * </ul>
  *
- * <h4>When not to use:</h4>
- * <ul>
- * <li>To enter a static number (for example, postal code, phone number, or ID). In this case,
- * use the regular <code>ui5-input</code> instead.</li>
- * <li>To display a value that rarely needs to be adjusted and does not pertain to a particular step.
- * In this case, use the regular <code>ui5-input</code> instead.</li>
- * <li>To enter dates and times. In this case, use date/time related components instead.</li>
- * </ul>
+ * #### When to use:
+ *
+ * - To adjust amounts, quantities, or other values quickly.
+ * - To adjust values for a specific step.
  *
- * <h3>ES6 Module Import</h3>
+ * #### When not to use:
  *
- * <code>import "@ui5/webcomponents/dist/StepInput.js";</code>
+ * - To enter a static number (for example, postal code, phone number, or ID). In this case,
+ * use the regular `ui5-input` instead.
+ * - To display a value that rarely needs to be adjusted and does not pertain to a particular step.
+ * In this case, use the regular `ui5-input` instead.
+ * - To enter dates and times. In this case, use date/time related components instead.
  *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/StepInput.js";`
  * @constructor
  * @extends UI5Element
  * @since 1.0.0-rc.13
  * @public
  */
-declare class StepInput extends UI5Element implements IFormElement {
+declare class StepInput extends UI5Element implements IFormInputElement {
     /**
      * Defines a value of the component.
-     *
      * @default 0
      * @public
      */
     value: number;
     /**
      * Defines a minimum value of the component.
-     *
      * @default undefined
      * @public
      */
     min?: number;
     /**
      * Defines a maximum value of the component.
-     *
      * @default undefined
      * @public
      */
     max?: number;
     /**
      * Defines a step of increasing/decreasing the value of the component.
-     *
      * @default 1
      * @public
      */
     step: number;
     /**
      * Defines the value state of the component.
-     *
      * @default "None"
      * @public
      */
     valueState: `${ValueState}`;
     /**
      * Defines whether the component is required.
-     *
      * @default false
      * @public
      */
     required: boolean;
     /**
      * Determines whether the component is displayed as disabled.
-     *
      * @default false
      * @public
      */
     disabled: boolean;
     /**
      * Determines whether the component is displayed as read-only.
-     *
      * @default false
      * @public
      */
@@ -112,40 +105,28 @@ declare class StepInput extends UI5Element implements IFormElement {
      * Defines a short hint, intended to aid the user with data entry when the
      * component has no value.
      *
-     * <br><br>
-     * <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder.
+     * **Note:** When no placeholder is set, the format pattern is displayed as a placeholder.
      * Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.
-     *
      * @default undefined
      * @public
      */
     placeholder?: string;
     /**
-     * Determines the name with which the component will be submitted in an HTML form.
-     *
-     * <br><br>
-     * <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:
-     * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
-     *
-     * <br><br>
-     * <b>Note:</b> When set, a native <code>input</code> HTML element
-     * will be created inside the component so that it can be submitted as
-     * part of an HTML form. Do not use this property unless you need to submit a form.
+     * Determines the name by which the component will be identified upon submission in an HTML form.
      *
+     * **Note:** This property is only applicable within the context of an HTML Form element.
      * @default ""
      * @public
      */
     name: string;
     /**
      * Determines the number of digits after the decimal point of the component.
-     *
      * @default 0
      * @public
      */
     valuePrecision: number;
     /**
      * Defines the accessible ARIA name of the component.
-     *
      * @default ""
      * @public
      * @since 1.0.0-rc.15
@@ -153,7 +134,6 @@ declare class StepInput extends UI5Element implements IFormElement {
     accessibleName: string;
     /**
      * Receives id(or many ids) of the elements that label the component.
-     *
      * @default ""
      * @public
      * @since 1.0.0-rc.15
@@ -171,24 +151,18 @@ declare class StepInput extends UI5Element implements IFormElement {
     _spinStarted: boolean;
     /**
      * Defines the value state message that will be displayed as pop up under the component.
-     * <br><br>
      *
-     * <b>Note:</b> If not specified, a default text (in the respective language) will be displayed.
-     * <br>
-     * <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
-     * when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
+     * **Note:** If not specified, a default text (in the respective language) will be displayed.
+     *
+     * **Note:** The `valueStateMessage` would be displayed,
+     * when the component is in `Information`, `Warning` or `Error` value state.
      * @public
      */
     valueStateMessage: Array<HTMLElement>;
-    /**
-     * The slot is used to render native <code>input</code> HTML element within Light DOM to enable form submit,
-     * when <code>name</code> property is set.
-     *
-     * @private
-     */
-    formSupport: Array<HTMLElement>;
     _initialValueState?: `${ValueState}`;
     static i18nBundle: I18nBundle;
+    formElementAnchor(): Promise<HTMLElement | undefined>;
+    get formFormattedValue(): FormData | string | null;
     static onDefine(): Promise<void>;
     get type(): InputType;
     get decIconTitle(): string;
@@ -198,7 +172,7 @@ declare class StepInput extends UI5Element implements IFormElement {
     get _decIconClickable(): boolean;
     get _incIconClickable(): boolean;
     get _isFocused(): boolean;
-    get _valuePrecisioned(): string;
+    get _displayValue(): string;
     get accInfo(): {
         ariaRequired: boolean;
         ariaLabel: string | undefined;
@@ -210,26 +184,31 @@ declare class StepInput extends UI5Element implements IFormElement {
     };
     onBeforeRendering(): void;
     get input(): Input;
+    get innerInput(): HTMLInputElement;
     get inputOuter(): Element;
     _onButtonFocusOut(): void;
     _onInputFocusIn(): void;
     _onInputFocusOut(): void;
     _setButtonState(): void;
     _validate(): void;
+    _updateValueState(): void;
     _preciseValue(value: number): number;
     _fireChangeEvent(): void;
     /**
      * Value modifier - modifies the value of the component, validates the new value and enables/disables increment and
-     * decrement buttons according to the value and min/max values (if set). Fires <code>change</code> event when requested
-     *
+     * decrement buttons according to the value and min/max values (if set). Fires `change` event when requested
      * @private
      * @param modifier modifies the value of the component with the given modifier (positive or negative)
-     * @param fireChangeEvent if <code>true</code>, fires <code>change</code> event when the value is changed
+     * @param fireChangeEvent if `true`, fires `change` event when the value is changed
      */
     _modifyValue(modifier: number, fireChangeEvent?: boolean): void;
     _incValue(e: CustomEvent): void;
     _decValue(e: CustomEvent): void;
+    get _isValueWithCorrectPrecision(): boolean;
     _onInputChange(): void;
+    _setDefaultInputValueIfNeeded(): void;
+    _isValueChanged(inputValue: number): boolean;
+    _updateValueAndValidate(inputValue: number): void;
     _onfocusin(): void;
     _onfocusout(): void;
     _onkeydown(e: KeyboardEvent): void;
@@ -256,3 +235,4 @@ declare class StepInput extends UI5Element implements IFormElement {
     _resetSpinOut(): void;
 }
 export default StepInput;
+export type { StepInputValueStateChangeEventDetail, };

package/dist/StepInput.js

@@ -14,7 +14,6 @@ import { isUp, isDown, isUpCtrl, isDownCtrl, isUpShift, isDownShift, isUpShiftCt
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
-import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
@@ -36,48 +35,51 @@ const INITIAL_SPEED = 120; // milliseconds
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-step-input</code> consists of an input field and buttons with icons to increase/decrease the value
+ * The `ui5-step-input` consists of an input field and buttons with icons to increase/decrease the value
  * with the predefined step.
- * <br><br>
+ *
  * The user can change the value of the component by pressing the increase/decrease buttons,
  * by typing a number directly, by using the keyboard up/down and page up/down,
  * or by using the mouse scroll wheel. Decimal values are supported.
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
  * The default step is 1 but the app developer can set a different one.
  *
- * App developers can set a maximum and minimum value for the <code>StepInput</code>.
+ * App developers can set a maximum and minimum value for the `StepInput`.
  * The increase/decrease button and the up/down keyboard navigation become disabled when
  * the value reaches the max/min or a new value is entered from the input which is greater/less than the max/min.
- * <br><br>
- * <h4>When to use:</h4>
- * <ul>
- * <li>To adjust amounts, quantities, or other values quickly.</li>
- * <li>To adjust values for a specific step.</li>
- * </ul>
  *
- * <h4>When not to use:</h4>
- * <ul>
- * <li>To enter a static number (for example, postal code, phone number, or ID). In this case,
- * use the regular <code>ui5-input</code> instead.</li>
- * <li>To display a value that rarely needs to be adjusted and does not pertain to a particular step.
- * In this case, use the regular <code>ui5-input</code> instead.</li>
- * <li>To enter dates and times. In this case, use date/time related components instead.</li>
- * </ul>
+ * #### When to use:
+ *
+ * - To adjust amounts, quantities, or other values quickly.
+ * - To adjust values for a specific step.
  *
- * <h3>ES6 Module Import</h3>
+ * #### When not to use:
  *
- * <code>import "@ui5/webcomponents/dist/StepInput.js";</code>
+ * - To enter a static number (for example, postal code, phone number, or ID). In this case,
+ * use the regular `ui5-input` instead.
+ * - To display a value that rarely needs to be adjusted and does not pertain to a particular step.
+ * In this case, use the regular `ui5-input` instead.
+ * - To enter dates and times. In this case, use date/time related components instead.
  *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/StepInput.js";`
  * @constructor
  * @extends UI5Element
  * @since 1.0.0-rc.13
  * @public
  */
 let StepInput = StepInput_1 = class StepInput extends UI5Element {
+    async formElementAnchor() {
+        return (await this.getFocusDomRefAsync())?.getFocusDomRefAsync();
+    }
+    get formFormattedValue() {
+        return this.value.toString();
+    }
     static async onDefine() {
         StepInput_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
     }
@@ -106,8 +108,14 @@ let StepInput = StepInput_1 = class StepInput extends UI5Element {
     get _isFocused() {
         return this.focused;
     }
-    get _valuePrecisioned() {
-        return this.value.toFixed(this.valuePrecision);
+    get _displayValue() {
+        if ((this.value === 0) || (Number.isInteger(this.value))) {
+            return this.value.toFixed(this.valuePrecision);
+        }
+        if (this.value === Number(this.input.value)) { // For the cases where the number is fractional and is ending with 0s.
+            return this.input.value;
+        }
+        return this.value.toString();
     }
     get accInfo() {
         return {
@@ -127,17 +135,13 @@ let StepInput = StepInput_1 = class StepInput extends UI5Element {
         if (this._previousValue === undefined) {
             this._previousValue = this.value;
         }
-        const formSupport = getFeature("FormSupport");
-        if (formSupport) {
-            formSupport.syncNativeHiddenInput(this);
-        }
-        else if (this.name) {
-            console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
-        }
     }
     get input() {
         return this.shadowRoot.querySelector("[ui5-input]");
     }
+    get innerInput() {
+        return this.input.shadowRoot.querySelector("input");
+    }
     get inputOuter() {
         return this.shadowRoot.querySelector(".ui5-step-input-input");
     }
@@ -166,9 +170,22 @@ let StepInput = StepInput_1 = class StepInput extends UI5Element {
         if (this._initialValueState === undefined) {
             this._initialValueState = this.valueState;
         }
-        this.valueState = ((this.min !== undefined && this.value < this.min)
-            || (this.max !== undefined && this.value > this.max))
-            ? ValueState.Error : this._initialValueState;
+        this._updateValueState();
+    }
+    _updateValueState() {
+        const isWithinRange = (this.min === undefined || Number(this.input.value) >= this.min)
+            && (this.max === undefined || Number(this.input.value) <= this.max);
+        const isValueWithCorrectPrecision = this._isValueWithCorrectPrecision;
+        const previousValueState = this.valueState;
+        const isValid = isWithinRange && isValueWithCorrectPrecision;
+        this.valueState = isValid ? ValueState.None : ValueState.Negative;
+        const eventPrevented = !this.fireEvent("value-state-change", {
+            valueState: this.valueState,
+            valid: isValid,
+        }, true);
+        if (eventPrevented) {
+            this.valueState = previousValueState;
+        }
     }
     _preciseValue(value) {
         const pow = 10 ** this.valuePrecision;
@@ -182,15 +199,13 @@ let StepInput = StepInput_1 = class StepInput extends UI5Element {
     }
     /**
      * Value modifier - modifies the value of the component, validates the new value and enables/disables increment and
-     * decrement buttons according to the value and min/max values (if set). Fires <code>change</code> event when requested
-     *
+     * decrement buttons according to the value and min/max values (if set). Fires `change` event when requested
      * @private
      * @param modifier modifies the value of the component with the given modifier (positive or negative)
-     * @param fireChangeEvent if <code>true</code>, fires <code>change</code> event when the value is changed
+     * @param fireChangeEvent if `true`, fires `change` event when the value is changed
      */
     _modifyValue(modifier, fireChangeEvent = false) {
         let value;
-        this.value = this._preciseValue(parseFloat(this.input.value));
         value = this.value + modifier;
         if (this.min !== undefined && value < this.min) {
             value = this.min;
@@ -201,6 +216,7 @@ let StepInput = StepInput_1 = class StepInput extends UI5Element {
         value = this._preciseValue(value);
         if (value !== this.value) {
             this.value = value;
+            this.input.value = value.toFixed(this.valuePrecision);
             this._validate();
             this._setButtonState();
             this.focused = true;
@@ -225,18 +241,44 @@ let StepInput = StepInput_1 = class StepInput extends UI5Element {
             this._previousValue = this.value;
         }
     }
+    get _isValueWithCorrectPrecision() {
+        // gets either "." or "," as delimiter which is based on locale, and splits the number by it
+        const delimiter = this.input.value.includes(".") ? "." : ",";
+        const numberParts = this.input.value.split(delimiter);
+        const decimalPartLength = numberParts.length > 1 ? numberParts[1].length : 0;
+        return decimalPartLength === this.valuePrecision;
+    }
     _onInputChange() {
-        if (this.input.value === "") {
-            this.input.value = (this.min || 0);
+        this._setDefaultInputValueIfNeeded();
+        const inputValue = Number(this.input.value);
+        if (this._isValueChanged(inputValue)) {
+            this._updateValueAndValidate(inputValue);
         }
-        const inputValue = this._preciseValue(parseFloat(this.input.value));
-        if (this.value !== this._previousValue || this.value !== inputValue) {
-            this.value = inputValue;
-            this._validate();
-            this._setButtonState();
-            this._fireChangeEvent();
+    }
+    _setDefaultInputValueIfNeeded() {
+        if (this.input.value === "") {
+            const defaultValue = (this.min || 0).toFixed(this.valuePrecision);
+            this.input.value = defaultValue;
+            this.innerInput.value = defaultValue; // we need to update inner input value as well, to avoid empty input scenario
         }
     }
+    _isValueChanged(inputValue) {
+        const isValueWithCorrectPrecision = this._isValueWithCorrectPrecision;
+        // Treat values as distinct when modified to match a specific precision (e.g., from 3.4000 to 3.40),
+        // even if JavaScript sees them as equal, to correctly update valueState based on expected valuePrecision.
+        const isPrecisionCorrectButValueStateError = isValueWithCorrectPrecision && this.valueState === ValueState.Negative;
+        return this.value !== this._previousValue
+            || this.value !== inputValue
+            || inputValue === 0
+            || !isValueWithCorrectPrecision
+            || isPrecisionCorrectButValueStateError;
+    }
+    _updateValueAndValidate(inputValue) {
+        this.value = inputValue;
+        this._validate();
+        this._setButtonState();
+        this._fireChangeEvent();
+    }
     _onfocusin() {
         this.focused = true;
     }
@@ -415,12 +457,10 @@ __decorate([
 __decorate([
     slot()
 ], StepInput.prototype, "valueStateMessage", void 0);
-__decorate([
-    slot()
-], StepInput.prototype, "formSupport", void 0);
 StepInput = StepInput_1 = __decorate([
     customElement({
         tag: "ui5-step-input",
+        formAssociated: true,
         renderer: litRender,
         styles: StepInputCss,
         template: StepInputTemplate,
@@ -431,11 +471,37 @@ StepInput = StepInput_1 = __decorate([
     })
     /**
      * Fired when the input operation has finished by pressing Enter or on focusout.
-     *
      * @public
      */
     ,
     event("change")
+    /**
+     * Fired before the value state of the component is updated internally.
+     * The event is preventable, meaning that if it's default action is
+     * prevented, the component will not update the value state.
+     * @allowPreventDefault
+     * @since 1.23.0
+     * @public
+     * @param {string} valueState The new `valueState` that will be set.
+     * @param {boolean} valid Indicator if the value is in between the min and max value.
+     */
+    ,
+    event("value-state-change", {
+        detail: {
+            /**
+             * @public
+             */
+            valueState: {
+                type: String,
+            },
+            /**
+             * @public
+             */
+            valid: {
+                type: Boolean,
+            },
+        },
+    })
 ], StepInput);
 StepInput.define();
 export default StepInput;