@ui5/webcomponents 0.0.0-dcd8e5389 → 0.0.0-ddc5fe31b

package/dist/Input.js

@@ -12,6 +12,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import { isPhone, isAndroid, } from "@ui5/webcomponents-base/dist/Device.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
@@ -34,7 +35,7 @@ import Icon from "./Icon.js";
 import InputTemplate from "./generated/templates/InputTemplate.lit.js";
 import InputPopoverTemplate from "./generated/templates/InputPopoverTemplate.lit.js";
 import { StartsWith } from "./Filters.js";
-import { VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS, INPUT_SUGGESTIONS_TITLE, INPUT_SUGGESTIONS_ONE_HIT, INPUT_SUGGESTIONS_MORE_HITS, INPUT_SUGGESTIONS_NO_HIT, } from "./generated/i18n/i18n-defaults.js";
+import { VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS, INPUT_SUGGESTIONS_TITLE, INPUT_SUGGESTIONS_ONE_HIT, INPUT_SUGGESTIONS_MORE_HITS, INPUT_SUGGESTIONS_NO_HIT, INPUT_CLEAR_ICON_ACC_NAME, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import inputStyles from "./generated/themes/Input.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
@@ -95,12 +96,8 @@ var INPUT_ACTIONS;
  * <code>import "@ui5/webcomponents/dist/features/InputSuggestions.js";</code> (optional - for input suggestions support)
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Input
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-input
- * @appenddocs sap.ui.webc.main.SuggestionItem sap.ui.webc.main.SuggestionGroupItem
- * @implements sap.ui.webc.main.IInput
+ * @extends UI5Element
+ * @implements {IInput}
  * @public
  */
 let Input = Input_1 = class Input extends UI5Element {
@@ -118,7 +115,7 @@ let Input = Input_1 = class Input extends UI5Element {
         // Note: Used to cancel selection upon [ESC].
         this.valueBeforeItemPreview = "";
         // Indicates if the user selection has been canceled with [ESC].
-        this.suggestionSelectionCanceled = false;
+        this.suggestionSelectionCancelled = false;
         // tracks the value between focus in and focus out to detect that change event should be fired.
         this.previousValue = "";
         // Indicates, if the component is rendering for first time.
@@ -130,7 +127,7 @@ let Input = Input_1 = class Input extends UI5Element {
         // Indicates, if the user is typing. Gets reset once popup is closed
         this.isTyping = false;
         // Suggestions array initialization
-        this.suggestionsTexts = [];
+        this.suggestionObjects = [];
         this._handleResizeBound = this._handleResize.bind(this);
         this._keepInnerValue = false;
         this._focusedAfterClear = false;
@@ -149,10 +146,10 @@ let Input = Input_1 = class Input extends UI5Element {
         }
         if (this.showSuggestions) {
             this.enableSuggestions();
-            this.suggestionsTexts = this.Suggestions.defaultSlotProperties(this.typedInValue);
+            this.suggestionObjects = this.Suggestions.defaultSlotProperties(this.typedInValue);
         }
-        this.effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
-        this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`);
+        this._effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
+        this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
         this.FormSupport = getFeature("FormSupport");
         const hasItems = !!this.suggestionItems.length;
         const hasValue = !!this.value;
@@ -281,7 +278,7 @@ let Input = Input_1 = class Input extends UI5Element {
         }
     }
     _handleEnter(e) {
-        const itemPressed = !!(this.Suggestions && this.Suggestions.onEnter(e));
+        const suggestionItemPressed = !!(this.Suggestions && this.Suggestions.onEnter(e));
         const innerInput = this.getInputDOMRefSync();
         // Check for autocompleted item
         const matchingItem = this.suggestionItems.find(item => {
@@ -290,7 +287,7 @@ let Input = Input_1 = class Input extends UI5Element {
         if (matchingItem) {
             const itemText = matchingItem.text ? matchingItem.text : (matchingItem.textContent || "");
             innerInput.setSelectionRange(itemText.length, itemText.length);
-            if (!itemPressed) {
+            if (!suggestionItemPressed) {
                 this.selectSuggestion(matchingItem, true);
                 this.open = false;
             }
@@ -298,7 +295,7 @@ let Input = Input_1 = class Input extends UI5Element {
         if (this._isPhone && !this.suggestionItems.length && !this.isTypeNumber) {
             innerInput.setSelectionRange(this.value.length, this.value.length);
         }
-        if (!itemPressed) {
+        if (!suggestionItemPressed) {
             this.lastConfirmedValue = this.value;
             if (this.FormSupport) {
                 this.FormSupport.triggerFormSubmit(this);
@@ -346,9 +343,9 @@ let Input = Input_1 = class Input extends UI5Element {
         if (isOpen && this.Suggestions._isItemOnTarget()) {
             // Restore the value.
             this.value = this.typedInValue || this.valueBeforeItemPreview;
-            // Mark that the selection has been canceled, so the popover can close
+            // Mark that the selection has been cancelled, so the popover can close
             // and not reopen, due to receiving focus.
-            this.suggestionSelectionCanceled = true;
+            this.suggestionSelectionCancelled = true;
             this.focused = true;
             return;
         }
@@ -380,7 +377,7 @@ let Input = Input_1 = class Input extends UI5Element {
         const focusedOutToSuggestions = this.Suggestions && toBeFocused && toBeFocused.shadowRoot && toBeFocused.shadowRoot.contains(this.Suggestions.responsivePopover);
         const focusedOutToValueStateMessage = toBeFocused && toBeFocused.shadowRoot && toBeFocused.shadowRoot.querySelector(".ui5-valuestatemessage-root");
         this._keepInnerValue = false;
-        if (this.showClearIcon && !this.effectiveShowClearIcon) {
+        if (this.showClearIcon && !this._effectiveShowClearIcon) {
             this._clearIconClicked = false;
             this._handleChange();
         }
@@ -450,7 +447,7 @@ let Input = Input_1 = class Input extends UI5Element {
         const inputDomRef = this.getInputDOMRefSync();
         const emptyValueFiredOnNumberInput = this.value && this.isTypeNumber && !inputDomRef.value;
         const eventType = e.inputType
-            || (e.detail && e.detail.inputType)
+            || e.detail.inputType
             || "";
         this._keepInnerValue = false;
         const allowedEventTypes = [
@@ -469,7 +466,7 @@ let Input = Input_1 = class Input extends UI5Element {
             "historyUndo",
         ];
         this._shouldAutocomplete = !allowedEventTypes.includes(eventType) && !this.noTypeahead;
-        this.suggestionSelectionCanceled = false;
+        this.suggestionSelectionCancelled = false;
         if (e instanceof InputEvent) {
             // ---- Special cases of numeric Input ----
             // ---------------- Start -----------------
@@ -564,7 +561,6 @@ let Input = Input_1 = class Input extends UI5Element {
     }
     /**
      * Checks if the value state popover is open.
-     * @returns {boolean} true if the value state popover is open, false otherwise
      */
     isValueStateOpened() {
         return !!this._isPopoverOpen;
@@ -587,9 +583,6 @@ let Input = Input_1 = class Input extends UI5Element {
     /**
      * Manually opens the suggestions popover, assuming suggestions are enabled. Items must be preloaded for it to open.
      * @public
-     * @method
-     * @name sap.ui.webc.main.Input#openPicker
-     * @return {void}
      * @since 1.3.0
      */
     openPicker() {
@@ -619,13 +612,17 @@ let Input = Input_1 = class Input extends UI5Element {
         const fireInput = keyboardUsed
             ? this.valueBeforeItemSelection !== itemText : value !== itemText;
         this.hasSuggestionItemSelected = true;
+        const valueOriginal = this.value;
+        const valueBeforeItemSelectionOriginal = this.valueBeforeItemSelection;
+        const lastConfirmedValueOriginal = this.lastConfirmedValue;
+        const performTextSelectionOriginal = this._performTextSelection;
+        const typedInValueOriginal = this.typedInValue;
+        const previousValueOriginal = this.previousValue;
         if (fireInput) {
             this.value = itemText;
             this.valueBeforeItemSelection = itemText;
             this.lastConfirmedValue = itemText;
             this._performTextSelection = true;
-            this.hasSuggestionItemSelected = true;
-            this.value = itemText;
             this.fireEvent(INPUT_EVENTS.CHANGE);
             if (isPhone()) {
                 this.fireEvent(INPUT_EVENTS.INPUT);
@@ -635,8 +632,26 @@ let Input = Input_1 = class Input extends UI5Element {
             this.previousValue = this.value;
         }
         this.valueBeforeItemPreview = "";
-        this.suggestionSelectionCanceled = false;
-        this.fireEvent(INPUT_EVENTS.SUGGESTION_ITEM_SELECT, { item });
+        this.suggestionSelectionCancelled = false;
+        // Fire suggestion-item-select event after input change events for backward compatibility, but revert all input properties set before suggestion was prevented.
+        // For v2.0 this code will be reworked.
+        const isCancelledByUser = !this.fireEvent(INPUT_EVENTS.SUGGESTION_ITEM_SELECT, { item }, true);
+        if (isCancelledByUser) {
+            this.Suggestions?._clearSelectedSuggestionAndAccInfo();
+            this.hasSuggestionItemSelected = false;
+            this.suggestionSelectionCancelled = true;
+            if (fireInput) {
+                // revert properties set during fireInput
+                if (itemText === this.value) { // If no chnages were made to the input value after suggestion-item-select was prevented - revert value to the original text
+                    this.value = valueOriginal;
+                }
+                this.valueBeforeItemSelection = valueBeforeItemSelectionOriginal;
+                this.lastConfirmedValue = lastConfirmedValueOriginal;
+                this._performTextSelection = performTextSelectionOriginal;
+                this.typedInValue = typedInValueOriginal;
+                this.previousValue = previousValueOriginal;
+            }
+        }
         this.isTyping = false;
         this.openOnMobile = false;
         this._forceOpen = false;
@@ -649,7 +664,7 @@ let Input = Input_1 = class Input extends UI5Element {
     }
     /**
      * Updates the input value on item preview.
-     * @param {Object} item The item that is on preview
+     * @param item The item that is on preview
      */
     updateValueOnPreview(item) {
         const noPreview = item.type === "Inactive" || item.groupItem;
@@ -659,9 +674,7 @@ let Input = Input_1 = class Input extends UI5Element {
     }
     /**
      * The suggestion item on preview.
-     * @type {sap.ui.webc.main.IInputSuggestionItem | null}
-     * @name sap.ui.webc.main.Input.prototype.previewItem
-     * @readonly
+     * @default null
      * @public
      */
     get previewItem() {
@@ -727,7 +740,6 @@ let Input = Input_1 = class Input extends UI5Element {
      * Returns if the suggestions popover is scrollable.
      * The method returns <code>Promise</code> that resolves to true,
      * if the popup is scrollable and false otherwise.
-     * @returns {Promise}
      */
     isSuggestionsScrollable() {
         if (!this.Suggestions) {
@@ -785,13 +797,8 @@ let Input = Input_1 = class Input extends UI5Element {
         };
     }
     announceSelectedItem() {
-        const invisibleText = this.shadowRoot.querySelector(`#${this._id}-selectionText`);
-        if (this.Suggestions && this.Suggestions._isItemOnTarget()) {
-            invisibleText.textContent = this.itemSelectionAnnounce;
-        }
-        else {
-            invisibleText.textContent = "";
-        }
+        const invisibleText = this.shadowRoot.querySelector(`[id="${this._id}-selectionText"]`);
+        invisibleText.textContent = this.itemSelectionAnnounce;
     }
     get _readonly() {
         return this.readonly && !this.disabled;
@@ -799,6 +806,9 @@ let Input = Input_1 = class Input extends UI5Element {
     get _headerTitleText() {
         return Input_1.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
     }
+    get clearIconAccessibleName() {
+        return Input_1.i18nBundle.getText(INPUT_CLEAR_ICON_ACC_NAME);
+    }
     get inputType() {
         return this.type.toLowerCase();
     }
@@ -853,14 +863,15 @@ let Input = Input_1 = class Input extends UI5Element {
     }
     get iconsCount() {
         const slottedIconsCount = this.icon ? this.icon.length : 0;
-        const clearIconCount = Number(this.effectiveShowClearIcon) ?? 0;
+        const clearIconCount = Number(this._effectiveShowClearIcon) ?? 0;
         return slottedIconsCount + clearIconCount;
     }
     get classes() {
         return {
             popover: {
-                "ui5-suggestions-popover": !this._isPhone && this.showSuggestions,
-                "ui5-suggestions-popover-with-value-state-header": !this._isPhone && this.showSuggestions && this.hasValueStateMessage,
+                "ui5-suggestions-popover": this.showSuggestions,
+                "ui5-popover-with-value-state-header-phone": this._isPhone && this.showSuggestions && this.hasValueStateMessage,
+                "ui5-popover-with-value-state-header": !this._isPhone && this.showSuggestions && this.hasValueStateMessage,
             },
             popoverValueState: {
                 "ui5-valuestatemessage-root": true,
@@ -920,13 +931,14 @@ let Input = Input_1 = class Input extends UI5Element {
     }
     get availableSuggestionsCount() {
         if (this.showSuggestions && (this.value || this.Suggestions.isOpened())) {
-            switch (this.suggestionsTexts.length) {
+            const nonGroupItems = this.suggestionObjects.filter(item => !item.groupItem);
+            switch (nonGroupItems.length) {
                 case 0:
                     return Input_1.i18nBundle.getText(INPUT_SUGGESTIONS_NO_HIT);
                 case 1:
                     return Input_1.i18nBundle.getText(INPUT_SUGGESTIONS_ONE_HIT);
                 default:
-                    return Input_1.i18nBundle.getText(INPUT_SUGGESTIONS_MORE_HITS, this.suggestionsTexts.length);
+                    return Input_1.i18nBundle.getText(INPUT_SUGGESTIONS_MORE_HITS, nonGroupItems.length);
             }
         }
         return undefined;
@@ -991,14 +1003,13 @@ let Input = Input_1 = class Input extends UI5Element {
     /**
      * Sets the caret to a certain position inside the native input
      * @protected
-     * @param pos
      */
     setCaretPosition(pos) {
         setCaretPosition(this.nativeInput, pos);
     }
     /**
      * Removes the fractional part of floating-point number.
-     * @param {string} value the numeric value of Input of type "Number"
+     * @param value the numeric value of Input of type "Number"
      */
     removeFractionalPart(value) {
         if (value.includes(".")) {
@@ -1067,7 +1078,7 @@ __decorate([
 ], Input.prototype, "showClearIcon", void 0);
 __decorate([
     property({ type: Boolean })
-], Input.prototype, "effectiveShowClearIcon", void 0);
+], Input.prototype, "_effectiveShowClearIcon", void 0);
 __decorate([
     property({ type: Boolean })
 ], Input.prototype, "focused", void 0);
@@ -1117,7 +1128,11 @@ __decorate([
     slot()
 ], Input.prototype, "formSupport", void 0);
 __decorate([
-    slot()
+    slot({
+        type: HTMLElement,
+        invalidateOnChildChange: true,
+        cloned: true,
+    })
 ], Input.prototype, "valueStateMessage", void 0);
 Input = Input_1 = __decorate([
     customElement({
@@ -1136,7 +1151,6 @@ Input = Input_1 = __decorate([
     /**
      * Fired when the input operation has finished by pressing Enter or on focusout.
      *
-     * @event sap.ui.webc.main.Input#change
      * @public
      */
     ,
@@ -1145,7 +1159,6 @@ Input = Input_1 = __decorate([
      * Fired when the value of the component changes at each keystroke,
      * and when a suggestion item has been selected.
      *
-     * @event sap.ui.webc.main.Input#input
      * @public
      */
     ,
@@ -1153,13 +1166,16 @@ Input = Input_1 = __decorate([
     /**
      * Fired when a suggestion item, that is displayed in the suggestion popup, is selected.
      *
-     * @event sap.ui.webc.main.Input#suggestion-item-select
      * @param {HTMLElement} item The selected item.
      * @public
+     * @allowPreventDefault
      */
     ,
     event("suggestion-item-select", {
         detail: {
+            /**
+            * @public
+            */
             item: { type: HTMLElement },
         },
     })
@@ -1167,7 +1183,6 @@ Input = Input_1 = __decorate([
      * Fired when the user navigates to a suggestion item via the ARROW keys,
      * as a preview, before the final selection.
      *
-     * @event sap.ui.webc.main.Input#suggestion-item-preview
      * @param {HTMLElement} item The previewed suggestion item.
      * @param {HTMLElement} targetRef The DOM ref of the suggestion item.
      * @public
@@ -1176,14 +1191,19 @@ Input = Input_1 = __decorate([
     ,
     event("suggestion-item-preview", {
         detail: {
+            /**
+            * @public
+            */
             item: { type: HTMLElement },
+            /**
+            * @public
+            */
             targetRef: { type: HTMLElement },
         },
     })
     /**
      * Fired when the user scrolls the suggestion popover.
      *
-     * @event sap.ui.webc.main.Input#suggestion-scroll
      * @param {Integer} scrollTop The current scroll position.
      * @param {HTMLElement} scrollContainer The scroll container.
      * @protected
@@ -1192,7 +1212,13 @@ Input = Input_1 = __decorate([
     ,
     event("suggestion-scroll", {
         detail: {
+            /**
+            * @public
+            */
             scrollTop: { type: Integer },
+            /**
+            * @public
+            */
             scrollContainer: { type: HTMLElement },
         },
     })