@ui5/webcomponents 0.0.0-fca1107e7 → 0.0.0-fd426fe8a

package/dist/StepInput.d.ts

@@ -1,11 +1,12 @@
 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 { Timeout } from "@ui5/webcomponents-base/dist/types.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 type Input from "./Input.js";
+import type { InputAccInfo, InputEventDetail } from "./Input.js";
 import InputType from "./types/InputType.js";
 type StepInputValueStateChangeEventDetail = {
     valueState: `${ValueState}`;
@@ -52,7 +53,12 @@ type StepInputValueStateChangeEventDetail = {
  * @since 1.0.0-rc.13
  * @public
  */
-declare class StepInput extends UI5Element implements IFormElement {
+declare class StepInput extends UI5Element implements IFormInputElement {
+    eventDetails: {
+        change: void;
+        input: InputEventDetail;
+        "value-state-change": StepInputValueStateChangeEventDetail;
+    };
     /**
      * Defines a value of the component.
      * @default 0
@@ -112,18 +118,13 @@ declare class StepInput extends UI5Element implements IFormElement {
      */
     placeholder?: string;
     /**
-     * Determines the name with which the component will be submitted in an HTML form.
-     *
-     * **Important:** For the `name` property to have effect, you must add the following import to your project:
-     * `import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`
+     * Determines the name by which the component will be identified upon submission in an HTML form.
      *
-     * **Note:** When set, a native `input` 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.
-     * @default ""
+     * **Note:** This property is only applicable within the context of an HTML Form element.
+     * @default undefined
      * @public
      */
-    name: string;
+    name?: string;
     /**
      * Determines the number of digits after the decimal point of the component.
      * @default 0
@@ -132,27 +133,27 @@ declare class StepInput extends UI5Element implements IFormElement {
     valuePrecision: number;
     /**
      * Defines the accessible ARIA name of the component.
-     * @default ""
+     * @default undefined
      * @public
      * @since 1.0.0-rc.15
      */
-    accessibleName: string;
+    accessibleName?: string;
     /**
      * Receives id(or many ids) of the elements that label the component.
-     * @default ""
+     * @default undefined
      * @public
      * @since 1.0.0-rc.15
      */
-    accessibleNameRef: string;
+    accessibleNameRef?: string;
     _decIconDisabled: boolean;
     _incIconDisabled: boolean;
     focused: boolean;
     _inputFocused: boolean;
-    _previousValue: number;
+    _previousValue: number | undefined;
     _waitTimeout: number;
     _speed: number;
-    _btnDown: boolean;
-    _spinTimeoutId: Timeout;
+    _btnDown?: boolean;
+    _spinTimeoutId?: Timeout;
     _spinStarted: boolean;
     /**
      * Defines the value state message that will be displayed as pop up under the component.
@@ -160,32 +161,22 @@ declare class StepInput extends UI5Element implements IFormElement {
      * **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.
+     * when the component is in `Information`, `Critical` or `Negative` value state.
      * @public
      */
     valueStateMessage: Array<HTMLElement>;
-    /**
-     * The slot is used to render native `input` HTML element within Light DOM to enable form submit,
-     * when `name` property is set.
-     * @private
-     */
-    formSupport: Array<HTMLElement>;
     _initialValueState?: `${ValueState}`;
     static i18nBundle: I18nBundle;
-    static onDefine(): Promise<void>;
+    formElementAnchor(): Promise<HTMLElement | undefined>;
+    get formFormattedValue(): FormData | string | null;
     get type(): InputType;
     get decIconTitle(): string;
-    get decIconName(): string;
     get incIconTitle(): string;
-    get incIconName(): string;
     get _decIconClickable(): boolean;
     get _incIconClickable(): boolean;
     get _isFocused(): boolean;
     get _displayValue(): string;
-    get accInfo(): {
-        ariaRequired: boolean;
-        ariaLabel: string | undefined;
-    };
+    get accInfo(): InputAccInfo;
     get inputAttributes(): {
         min: number | undefined;
         max: number | undefined;
@@ -196,6 +187,7 @@ declare class StepInput extends UI5Element implements IFormElement {
     get innerInput(): HTMLInputElement;
     get inputOuter(): Element;
     _onButtonFocusOut(): void;
+    _onInput(e: CustomEvent<InputEventDetail>): void;
     _onInputFocusIn(): void;
     _onInputFocusOut(): void;
     _setButtonState(): void;
@@ -211,8 +203,8 @@ declare class StepInput extends UI5Element implements IFormElement {
      * @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;
+    _incValue(): void;
+    _decValue(): void;
     get _isValueWithCorrectPrecision(): boolean;
     _onInputChange(): void;
     _setDefaultInputValueIfNeeded(): void;

package/dist/StepInput.js

@@ -9,22 +9,16 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import { isUp, isDown, isUpCtrl, isDownCtrl, isUpShift, isDownShift, isUpShiftCtrl, isDownShiftCtrl, isPageUpShift, isPageDownShift, isEscape, isEnter, } from "@ui5/webcomponents-base/dist/Keys.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.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";
-import "@ui5/webcomponents-base/dist/types.js";
-import StepInputTemplate from "./generated/templates/StepInputTemplate.lit.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
+import StepInputTemplate from "./StepInputTemplate.js";
 import { STEPINPUT_DEC_ICON_TITLE, STEPINPUT_INC_ICON_TITLE } from "./generated/i18n/i18n-defaults.js";
 import "@ui5/webcomponents-icons/dist/less.js";
 import "@ui5/webcomponents-icons/dist/add.js";
-import Icon from "./Icon.js";
-import Input from "./Input.js";
 import InputType from "./types/InputType.js";
 // Styles
 import StepInputCss from "./generated/themes/StepInput.css.js";
@@ -75,8 +69,63 @@ const INITIAL_SPEED = 120; // milliseconds
  * @public
  */
 let StepInput = StepInput_1 = class StepInput extends UI5Element {
-    static async onDefine() {
-        StepInput_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines a value of the component.
+         * @default 0
+         * @public
+         */
+        this.value = 0;
+        /**
+         * Defines a step of increasing/decreasing the value of the component.
+         * @default 1
+         * @public
+         */
+        this.step = 1;
+        /**
+         * Defines the value state of the component.
+         * @default "None"
+         * @public
+         */
+        this.valueState = "None";
+        /**
+         * Defines whether the component is required.
+         * @default false
+         * @public
+         */
+        this.required = false;
+        /**
+         * Determines whether the component is displayed as disabled.
+         * @default false
+         * @public
+         */
+        this.disabled = false;
+        /**
+         * Determines whether the component is displayed as read-only.
+         * @default false
+         * @public
+         */
+        this.readonly = false;
+        /**
+         * Determines the number of digits after the decimal point of the component.
+         * @default 0
+         * @public
+         */
+        this.valuePrecision = 0;
+        this._decIconDisabled = false;
+        this._incIconDisabled = false;
+        this.focused = false;
+        this._inputFocused = false;
+        this._waitTimeout = INITIAL_WAIT_TIMEOUT;
+        this._speed = INITIAL_SPEED;
+        this._spinStarted = false;
+    }
+    async formElementAnchor() {
+        return (await this.getFocusDomRefAsync())?.getFocusDomRefAsync();
+    }
+    get formFormattedValue() {
+        return this.value.toString();
     }
     get type() {
         return InputType.Number;
@@ -85,15 +134,9 @@ let StepInput = StepInput_1 = class StepInput extends UI5Element {
     get decIconTitle() {
         return StepInput_1.i18nBundle.getText(STEPINPUT_DEC_ICON_TITLE);
     }
-    get decIconName() {
-        return "less";
-    }
     get incIconTitle() {
         return StepInput_1.i18nBundle.getText(STEPINPUT_INC_ICON_TITLE);
     }
-    get incIconName() {
-        return "add";
-    }
     get _decIconClickable() {
         return !this._decIconDisabled && !this.readonly && !this.disabled;
     }
@@ -107,7 +150,7 @@ let StepInput = StepInput_1 = class StepInput extends UI5Element {
         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.
+        if (this.input && 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();
@@ -127,16 +170,6 @@ let StepInput = StepInput_1 = class StepInput extends UI5Element {
     }
     onBeforeRendering() {
         this._setButtonState();
-        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]");
@@ -154,11 +187,14 @@ let StepInput = StepInput_1 = class StepInput extends UI5Element {
             }
         }, 0);
     }
+    _onInput(e) {
+        const prevented = !this.fireDecoratorEvent("input", { inputType: e.detail.inputType });
+        if (prevented) {
+            e.preventDefault();
+        }
+    }
     _onInputFocusIn() {
         this._inputFocused = true;
-        if (this.value !== this._previousValue) {
-            this._previousValue = this.value;
-        }
     }
     _onInputFocusOut() {
         this._inputFocused = false;
@@ -180,11 +216,11 @@ let StepInput = StepInput_1 = class StepInput extends UI5Element {
         const isValueWithCorrectPrecision = this._isValueWithCorrectPrecision;
         const previousValueState = this.valueState;
         const isValid = isWithinRange && isValueWithCorrectPrecision;
-        this.valueState = isValid ? ValueState.None : ValueState.Error;
-        const eventPrevented = !this.fireEvent("value-state-change", {
+        this.valueState = isValid ? ValueState.None : ValueState.Negative;
+        const eventPrevented = !this.fireDecoratorEvent("value-state-change", {
             valueState: this.valueState,
             valid: isValid,
-        }, true);
+        });
         if (eventPrevented) {
             this.valueState = previousValueState;
         }
@@ -196,7 +232,7 @@ let StepInput = StepInput_1 = class StepInput extends UI5Element {
     _fireChangeEvent() {
         if (this._previousValue !== this.value) {
             this._previousValue = this.value;
-            this.fireEvent("change", { value: this.value });
+            this.fireDecoratorEvent("change");
         }
     }
     /**
@@ -231,14 +267,14 @@ let StepInput = StepInput_1 = class StepInput extends UI5Element {
             }
         }
     }
-    _incValue(e) {
-        if (this._incIconClickable && e.isTrusted && !this.disabled && !this.readonly) {
+    _incValue() {
+        if (this._incIconClickable && !this.disabled && !this.readonly) {
             this._modifyValue(this.step, true);
             this._previousValue = this.value;
         }
     }
-    _decValue(e) {
-        if (this._decIconClickable && e.isTrusted && !this.disabled && !this.readonly) {
+    _decValue() {
+        if (this._decIconClickable && !this.disabled && !this.readonly) {
             this._modifyValue(-this.step, true);
             this._previousValue = this.value;
         }
@@ -268,7 +304,7 @@ let StepInput = StepInput_1 = class StepInput extends UI5Element {
         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.Error;
+        const isPrecisionCorrectButValueStateError = isValueWithCorrectPrecision && this.valueState === ValueState.Negative;
         return this.value !== this._previousValue
             || this.value !== inputValue
             || inputValue === 0
@@ -283,9 +319,11 @@ let StepInput = StepInput_1 = class StepInput extends UI5Element {
     }
     _onfocusin() {
         this.focused = true;
+        this._previousValue = this.value;
     }
     _onfocusout() {
         this.focused = false;
+        this._previousValue = undefined;
     }
     _onkeydown(e) {
         let preventDefault = true;
@@ -306,6 +344,9 @@ let StepInput = StepInput_1 = class StepInput extends UI5Element {
         }
         else if (isEscape(e)) {
             // return previous value
+            if (this._previousValue === undefined) {
+                this._previousValue = this.value;
+            }
             this.value = this._previousValue;
             this.input.value = this.value.toFixed(this.valuePrecision);
         }
@@ -388,19 +429,19 @@ let StepInput = StepInput_1 = class StepInput extends UI5Element {
     }
 };
 __decorate([
-    property({ validator: Float, defaultValue: 0 })
+    property({ type: Number })
 ], StepInput.prototype, "value", void 0);
 __decorate([
-    property({ validator: Float })
+    property({ type: Number })
 ], StepInput.prototype, "min", void 0);
 __decorate([
-    property({ validator: Float })
+    property({ type: Number })
 ], StepInput.prototype, "max", void 0);
 __decorate([
-    property({ validator: Float, defaultValue: 1 })
+    property({ type: Number })
 ], StepInput.prototype, "step", void 0);
 __decorate([
-    property({ type: ValueState, defaultValue: ValueState.None })
+    property()
 ], StepInput.prototype, "valueState", void 0);
 __decorate([
     property({ type: Boolean })
@@ -412,78 +453,86 @@ __decorate([
     property({ type: Boolean })
 ], StepInput.prototype, "readonly", void 0);
 __decorate([
-    property({ defaultValue: undefined })
+    property()
 ], StepInput.prototype, "placeholder", void 0);
 __decorate([
     property()
 ], StepInput.prototype, "name", void 0);
 __decorate([
-    property({ validator: Integer, defaultValue: 0 })
+    property({ type: Number })
 ], StepInput.prototype, "valuePrecision", void 0);
 __decorate([
     property()
 ], StepInput.prototype, "accessibleName", void 0);
 __decorate([
-    property({ defaultValue: "" })
+    property()
 ], StepInput.prototype, "accessibleNameRef", void 0);
 __decorate([
-    property({ type: Boolean, noAttribute: true })
+    property({ noAttribute: true })
 ], StepInput.prototype, "_decIconDisabled", void 0);
 __decorate([
-    property({ type: Boolean, noAttribute: true })
+    property({ noAttribute: true })
 ], StepInput.prototype, "_incIconDisabled", void 0);
 __decorate([
     property({ type: Boolean })
 ], StepInput.prototype, "focused", void 0);
 __decorate([
-    property({ type: Boolean, noAttribute: true })
+    property({ noAttribute: true })
 ], StepInput.prototype, "_inputFocused", void 0);
 __decorate([
-    property({ validator: Float, noAttribute: true })
+    property({ noAttribute: true })
 ], StepInput.prototype, "_previousValue", void 0);
 __decorate([
-    property({ validator: Float, noAttribute: true })
+    property({ noAttribute: true })
 ], StepInput.prototype, "_waitTimeout", void 0);
 __decorate([
-    property({ validator: Float, noAttribute: true })
+    property({ noAttribute: true })
 ], StepInput.prototype, "_speed", void 0);
 __decorate([
-    property({ type: Boolean, noAttribute: true })
+    property({ noAttribute: true })
 ], StepInput.prototype, "_btnDown", void 0);
 __decorate([
-    property({ validator: Integer, noAttribute: true })
+    property({ noAttribute: true })
 ], StepInput.prototype, "_spinTimeoutId", void 0);
 __decorate([
-    property({ type: Boolean, noAttribute: true })
+    property({ noAttribute: true })
 ], StepInput.prototype, "_spinStarted", void 0);
 __decorate([
     slot()
 ], StepInput.prototype, "valueStateMessage", void 0);
 __decorate([
-    slot()
-], StepInput.prototype, "formSupport", void 0);
+    i18n("@ui5/webcomponents")
+], StepInput, "i18nBundle", void 0);
 StepInput = StepInput_1 = __decorate([
     customElement({
         tag: "ui5-step-input",
-        renderer: litRender,
+        formAssociated: true,
+        renderer: jsxRenderer,
         styles: StepInputCss,
         template: StepInputTemplate,
-        dependencies: [
-            Icon,
-            Input,
-        ],
     })
     /**
      * Fired when the input operation has finished by pressing Enter or on focusout.
      * @public
      */
     ,
-    event("change")
+    event("change", {
+        bubbles: true,
+    })
+    /**
+     * Fired when the value of the component changes at each keystroke.
+     * @public
+     * @since 2.6.0
+     */
+    ,
+    event("input", {
+        cancelable: true,
+        bubbles: true,
+    })
     /**
      * 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.
@@ -491,20 +540,8 @@ StepInput = StepInput_1 = __decorate([
      */
     ,
     event("value-state-change", {
-        detail: {
-            /**
-             * @public
-             */
-            valueState: {
-                type: String,
-            },
-            /**
-             * @public
-             */
-            valid: {
-                type: Boolean,
-            },
-        },
+        bubbles: true,
+        cancelable: true,
     })
 ], StepInput);
 StepInput.define();