@ui5/webcomponents 0.0.0-4e88b8243 → 0.0.0-50f1454ef

package/dist/Input.js

@@ -17,11 +17,10 @@ import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsSco
 import encodeXML from "@ui5/webcomponents-base/dist/sap/base/security/encodeXML.js";
 import { isPhone, isAndroid, } from "@ui5/webcomponents-base/dist/Device.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { getComponentFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { isUp, isDown, isSpace, isEnter, isBackSpace, isDelete, isEscape, isTabNext, isPageUp, isPageDown, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
-import { getAssociatedLabelForTexts, getAllAccessibleNameRefTexts, registerUI5Element, deregisterUI5Element, } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
+import { getAssociatedLabelForTexts, getAllAccessibleNameRefTexts, registerUI5Element, deregisterUI5Element, getEffectiveAriaDescriptionText, getAllAccessibleDescriptionRefTexts, } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import { getCaretPosition, setCaretPosition } from "@ui5/webcomponents-base/dist/util/Caret.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import InputType from "./types/InputType.js";
@@ -62,11 +61,6 @@ var INPUT_ACTIONS;
  * When the user makes changes to the text, the change event is fired,
  * which enables you to react on any text change.
  *
- * **Note:** If you are using the `ui5-input` as a single npm module,
- * don't forget to import the `InputSuggestions` module from
- * "@ui5/webcomponents/dist/features/InputSuggestions.js"
- * to enable the suggestions functionality.
- *
  * ### Keyboard Handling
  * The `ui5-input` provides the following keyboard shortcuts:
  *
@@ -83,8 +77,6 @@ var INPUT_ACTIONS;
  *
  * `import "@ui5/webcomponents/dist/Input.js";`
  *
- * `import "@ui5/webcomponents/dist/features/InputSuggestions.js";` (optional - for input suggestions support)
- *
  * @constructor
  * @extends UI5Element
  * @public
@@ -191,8 +183,6 @@ let Input = Input_1 = class Input extends UI5Element {
         /**
          * Defines whether the component should show suggestions, if such are present.
          *
-         * **Note:** You need to import the `InputSuggestions` module
-         * from `"@ui5/webcomponents/dist/features/InputSuggestions.js"` to enable this functionality.
          * @default false
          * @public
          */
@@ -257,6 +247,7 @@ let Input = Input_1 = class Input extends UI5Element {
         // Indicates whether the value of the input is comming from a suggestion item
         this._isLatestValueFromSuggestions = false;
         this._isChangeTriggeredBySuggestion = false;
+        this._indexOfSelectedItem = -1;
         this._handleResizeBound = this._handleResize.bind(this);
         this._keepInnerValue = false;
         this._focusedAfterClear = false;
@@ -322,6 +313,7 @@ let Input = Input_1 = class Input extends UI5Element {
             const item = this._getFirstMatchingItem(value);
             if (item) {
                 this._handleTypeAhead(item);
+                this._selectMatchingItem(item);
             }
         }
     }
@@ -361,6 +353,11 @@ let Input = Input_1 = class Input extends UI5Element {
             return this._handleTab();
         }
         if (isEnter(e)) {
+            const isValueUnchanged = this.previousValue === this.getInputDOMRefSync().value;
+            this._enterKeyDown = true;
+            if (isValueUnchanged && this._internals.form) {
+                submitForm(this);
+            }
             return this._handleEnter(e);
         }
         if (isPageUp(e)) {
@@ -381,7 +378,6 @@ let Input = Input_1 = class Input extends UI5Element {
         if (this.showSuggestions) {
             this._clearPopoverFocusAndSelection();
         }
-        this._keyDown = true;
         this._isKeyNavigation = false;
     }
     _onkeyup(e) {
@@ -390,16 +386,22 @@ let Input = Input_1 = class Input extends UI5Element {
         if (isDelete(e)) {
             this.value = e.target.value;
         }
-        this._keyDown = false;
+        this._enterKeyDown = false;
+    }
+    get currentItemIndex() {
+        const allItems = this.Suggestions?._getItems();
+        const currentItem = allItems.find(item => { return item.selected || item.focused; });
+        const indexOfCurrentItem = currentItem ? allItems.indexOf(currentItem) : -1;
+        return indexOfCurrentItem;
     }
     _handleUp(e) {
         if (this.Suggestions?.isOpened()) {
-            this.Suggestions.onUp(e);
+            this.Suggestions.onUp(e, this.currentItemIndex);
         }
     }
     _handleDown(e) {
         if (this.Suggestions?.isOpened()) {
-            this.Suggestions.onDown(e);
+            this.Suggestions.onDown(e, this.currentItemIndex);
         }
     }
     _handleSpace(e) {
@@ -433,9 +435,6 @@ let Input = Input_1 = class Input extends UI5Element {
         }
         if (!suggestionItemPressed) {
             this.lastConfirmedValue = this.value;
-            if (this._internals.form) {
-                submitForm(this);
-            }
             return;
         }
         this.focused = true;
@@ -472,6 +471,11 @@ let Input = Input_1 = class Input extends UI5Element {
         const innerInput = this.getInputDOMRefSync();
         const isAutoCompleted = innerInput.selectionEnd - innerInput.selectionStart > 0;
         this.isTyping = false;
+        if (this.value !== this.previousValue && this.value !== this.lastConfirmedValue && !this.open) {
+            this.value = this.lastConfirmedValue ? this.lastConfirmedValue : this.previousValue;
+            this.fireDecoratorEvent(INPUT_EVENTS.INPUT, { inputType: "" });
+            return;
+        }
         if (!isOpen) {
             this.value = this.lastConfirmedValue ? this.lastConfirmedValue : this.previousValue;
             return;
@@ -523,6 +527,9 @@ let Input = Input_1 = class Input extends UI5Element {
         }
         this.lastConfirmedValue = "";
         this.isTyping = false;
+        if ((this.value !== this.previousValue) && this.showClearIcon) {
+            this._clearIconClicked = false;
+        }
     }
     _clearPopoverFocusAndSelection() {
         if (!this.showSuggestions || !this.Suggestions) {
@@ -559,6 +566,9 @@ let Input = Input_1 = class Input extends UI5Element {
             }
             else {
                 fireChange();
+                if (this._enterKeyDown && this._internals.form) {
+                    submitForm(this);
+                }
             }
         }
     }
@@ -673,6 +683,9 @@ let Input = Input_1 = class Input extends UI5Element {
     _handleSelectionChange(e) {
         this.Suggestions?.onItemPress(e);
     }
+    _selectMatchingItem(item) {
+        item.selected = true;
+    }
     _handleTypeAhead(item) {
         const value = item.text ? item.text : "";
         this._innerValue = value;
@@ -686,6 +699,7 @@ let Input = Input_1 = class Input extends UI5Element {
     _updateAssociatedLabelsTexts() {
         this._associatedLabelsTexts = getAssociatedLabelForTexts(this);
         this._accessibleLabelsRefTexts = getAllAccessibleNameRefTexts(this);
+        this._associatedDescriptionRefTexts = getAllAccessibleDescriptionRefTexts(this);
     }
     _closePicker() {
         this.open = false;
@@ -704,10 +718,14 @@ let Input = Input_1 = class Input extends UI5Element {
             this.blur();
             this.focused = false;
         }
-        if (this._changeToBeFired) {
+        if (this._changeToBeFired && !this._isChangeTriggeredBySuggestion) {
+            this.previousValue = this.value;
             this.fireDecoratorEvent(INPUT_EVENTS.CHANGE);
-            this._changeToBeFired = false;
         }
+        else {
+            this._isChangeTriggeredBySuggestion = false;
+        }
+        this._changeToBeFired = false;
         this.open = false;
         this.isTyping = false;
         if (this.hasSuggestionItemSelected) {
@@ -716,7 +734,6 @@ let Input = Input_1 = class Input extends UI5Element {
         this._handlePickerAfterClose();
     }
     _handlePickerAfterOpen() {
-        this.Suggestions?._onOpen();
         this.fireDecoratorEvent("open");
     }
     _handlePickerAfterClose() {
@@ -739,10 +756,19 @@ let Input = Input_1 = class Input extends UI5Element {
         if (this.Suggestions) {
             return;
         }
-        const Suggestions = getComponentFeature("InputSuggestions");
-        if (Suggestions) {
+        const setup = (Suggestions) => {
             Suggestions.i18nBundle = Input_1.i18nBundle;
             this.Suggestions = new Suggestions(this, "suggestionItems", true, false);
+        };
+        // If the feature is preloaded (the user manually imported InputSuggestions.js), it is already available on the constructor
+        if (Input_1.SuggestionsClass) {
+            setup(Input_1.SuggestionsClass);
+            // If feature is not preloaded, load it dynamically
+        }
+        else {
+            import("./features/InputSuggestions.js").then(SuggestionsModule => {
+                setup(SuggestionsModule.default);
+            });
         }
     }
     acceptSuggestion(item, keyboardUsed) {
@@ -902,6 +928,7 @@ let Input = Input_1 = class Input extends UI5Element {
     fireResetSelectionChange() {
         if (this._isLatestValueFromSuggestions) {
             this.fireSelectionChange(null, false);
+            this.valueBeforeItemSelection = this.value;
         }
     }
     get _readonly() {
@@ -931,20 +958,42 @@ let Input = Input_1 = class Input extends UI5Element {
     get valueStateTextId() {
         return this.hasValueState ? `valueStateDesc` : "";
     }
+    get _accInfoAriaDescription() {
+        return (this._inputAccInfo && this._inputAccInfo.ariaDescription) || "";
+    }
+    get _accInfoAriaDescriptionId() {
+        const hasAriaDescription = this._accInfoAriaDescription !== "";
+        return hasAriaDescription ? "descr" : "";
+    }
+    get ariaDescriptionText() {
+        return this._associatedDescriptionRefTexts || getEffectiveAriaDescriptionText(this);
+    }
+    get ariaDescriptionTextId() {
+        return this.ariaDescriptionText ? "accessibleDescription" : "";
+    }
+    get ariaDescribedByIds() {
+        return [
+            this.suggestionsTextId,
+            this.valueStateTextId,
+            this._inputAccInfo.ariaDescribedBy,
+            this._accInfoAriaDescriptionId,
+            this.ariaDescriptionTextId,
+        ].filter(Boolean).join(" ");
+    }
     get accInfo() {
         const ariaHasPopupDefault = this.showSuggestions ? "dialog" : undefined;
         const ariaAutoCompleteDefault = this.showSuggestions ? "list" : undefined;
-        const ariaDescribedBy = this._inputAccInfo.ariaDescribedBy ? `${this.suggestionsTextId} ${this.valueStateTextId} ${this._inputAccInfo.ariaDescribedBy}`.trim() : `${this.suggestionsTextId} ${this.valueStateTextId}`.trim();
         return {
             "ariaRoledescription": this._inputAccInfo && (this._inputAccInfo.ariaRoledescription || undefined),
-            "ariaDescribedBy": ariaDescribedBy || undefined,
+            "ariaDescribedBy": this.ariaDescribedByIds || undefined,
             "ariaInvalid": this.valueState === ValueState.Negative ? true : undefined,
             "ariaHasPopup": this._inputAccInfo.ariaHasPopup ? this._inputAccInfo.ariaHasPopup : ariaHasPopupDefault,
             "ariaAutoComplete": this._inputAccInfo.ariaAutoComplete ? this._inputAccInfo.ariaAutoComplete : ariaAutoCompleteDefault,
             "role": this._inputAccInfo && this._inputAccInfo.role,
             "ariaControls": this._inputAccInfo && this._inputAccInfo.ariaControls,
             "ariaExpanded": this._inputAccInfo && this._inputAccInfo.ariaExpanded,
-            "ariaDescription": this._inputAccInfo && this._inputAccInfo.ariaDescription,
+            "ariaDescription": this._accInfoAriaDescription,
+            "accessibleDescription": this.ariaDescriptionText,
             "ariaLabel": (this._inputAccInfo && this._inputAccInfo.ariaLabel) || this._accessibleLabelsRefTexts || this.accessibleName || this._associatedLabelsTexts || undefined,
         };
     }
@@ -1170,6 +1219,12 @@ __decorate([
 __decorate([
     property()
 ], Input.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property()
+], Input.prototype, "accessibleDescription", void 0);
+__decorate([
+    property()
+], Input.prototype, "accessibleDescriptionRef", void 0);
 __decorate([
     property({ type: Boolean })
 ], Input.prototype, "showClearIcon", void 0);
@@ -1182,6 +1237,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Input.prototype, "focused", void 0);
+__decorate([
+    property()
+], Input.prototype, "hint", void 0);
 __decorate([
     property({ type: Boolean })
 ], Input.prototype, "valueStateOpen", void 0);
@@ -1209,6 +1267,12 @@ __decorate([
 __decorate([
     property({ noAttribute: true })
 ], Input.prototype, "_accessibleLabelsRefTexts", void 0);
+__decorate([
+    property({ noAttribute: true })
+], Input.prototype, "_associatedDescriptionRefTexts", void 0);
+__decorate([
+    property({ type: Object })
+], Input.prototype, "Suggestions", void 0);
 __decorate([
     slot({ type: HTMLElement, "default": true })
 ], Input.prototype, "suggestionItems", void 0);
@@ -1237,7 +1301,6 @@ Input = Input_1 = __decorate([
             ValueStateMessageCss,
             SuggestionsCss,
         ],
-        features: ["InputSuggestions"],
     })
     /**
      * Fired when the input operation has finished by pressing Enter or on focusout.
@@ -1313,18 +1376,8 @@ Input = Input_1 = __decorate([
      * @since 2.0.0
      */
     ,
-    event("close", {
-        bubbles: true,
-    })
+    event("close")
 ], Input);
-// declare module "@ui5/webcomponents-base/jsx-runtime" {
-// 	// eslint-disable-next-line @typescript-eslint/no-namespace
-// 	namespace JSX {
-// 		interface IntrinsicElements {
-// 			"ui5-input": Input["_jsxProps"];
-// 		}
-// 	}
-// }
 Input.define();
 export default Input;
 //# sourceMappingURL=Input.js.map