@ui5/webcomponents 2.5.0 → 2.6.0-rc.0

package/dist/Input.d.ts

@@ -1,24 +1,19 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
+import { type UI5CustomEvent } from "@ui5/webcomponents-base";
+import type { AriaAutoComplete, AriaRole, AriaHasPopup, ClassMap } from "@ui5/webcomponents-base/dist/types.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
-import "@ui5/webcomponents-icons/dist/decline.js";
-import "@ui5/webcomponents-icons/dist/not-editable.js";
-import "@ui5/webcomponents-icons/dist/error.js";
-import "@ui5/webcomponents-icons/dist/alert.js";
-import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
-import "@ui5/webcomponents-icons/dist/information.js";
 import type SuggestionItem from "./SuggestionItem.js";
 import type { SuggestionComponent } from "./features/InputSuggestions.js";
 import type InputSuggestions from "./features/InputSuggestions.js";
-import type { PopupScrollEventDetail } from "./Popup.js";
 import InputType from "./types/InputType.js";
 import Popover from "./Popover.js";
 import type { IIcon } from "./Icon.js";
 import type PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import type { ListItemClickEventDetail, ListSelectionChangeEventDetail } from "./List.js";
+import ResponsivePopover from "./ResponsivePopover.js";
 /**
  * Interface for components that represent a suggestion item, usable in `ui5-input`
  * @public
@@ -37,16 +32,18 @@ type NativeInputAttributes = {
     max?: number;
     step?: number;
 };
-type AccInfo = {
+type InputAccInfo = {
     ariaRoledescription?: string;
     ariaDescribedBy?: string;
-    ariaHasPopup?: string;
-    ariaAutoComplete?: string;
-    role?: string;
+    ariaHasPopup?: AriaHasPopup;
+    ariaAutoComplete?: AriaAutoComplete;
+    role?: AriaRole;
     ariaControls?: string;
-    ariaExpanded?: string;
+    ariaRequired?: boolean;
+    ariaExpanded?: boolean;
     ariaDescription?: string;
     ariaLabel?: string;
+    ariaInvalid?: boolean;
 };
 declare enum INPUT_ACTIONS {
     ACTION_ENTER = "enter",
@@ -276,7 +273,7 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormInpu
      * @private
      */
     _isValueStateFocused: boolean;
-    _inputAccInfo: AccInfo;
+    _inputAccInfo: InputAccInfo;
     _nativeInputAttributes: NativeInputAttributes;
     _inputWidth?: number;
     _listWidth?: number;
@@ -384,9 +381,11 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormInpu
     _handleChange(): void;
     _clear(): void;
     _iconMouseDown(): void;
-    _scroll(e: CustomEvent<PopupScrollEventDetail>): void;
+    _scroll(e: UI5CustomEvent<ResponsivePopover, "scroll">): void;
     _handleSelect(): void;
-    _handleInput(e: InputEvent | CustomEvent<InputEventDetail>): void;
+    _handleInput(e: CustomEvent<InputEventDetail>): void;
+    _handleNativeInput(e: InputEvent): void;
+    _input(e: CustomEvent<InputEventDetail> | InputEvent, eventType: string): void;
     _startsWithMatchingItems(str: string): Array<IInputSuggestionItemSelectable>;
     _getFirstMatchingItem(current: string): IInputSuggestionItemSelectable | undefined;
     _handleSelectionChange(e: CustomEvent<ListSelectionChangeEventDetail>): void;
@@ -450,23 +449,22 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormInpu
     get _headerTitleText(): string;
     get clearIconAccessibleName(): string;
     get _popupLabel(): string;
-    get inputType(): string;
+    get inputType(): `${InputType}`;
+    get inputNativeType(): Lowercase<`${InputType}`>;
     get isTypeNumber(): boolean;
     get suggestionsTextId(): "" | "suggestionsText";
     get valueStateTextId(): "" | "valueStateDesc";
     get accInfo(): {
-        input: {
-            ariaRoledescription: string | undefined;
-            ariaDescribedBy: string | undefined;
-            ariaInvalid: string | undefined;
-            ariaHasPopup: string | undefined;
-            ariaAutoComplete: string | undefined;
-            role: string | undefined;
-            ariaControls: string | undefined;
-            ariaExpanded: string | undefined;
-            ariaDescription: string | undefined;
-            ariaLabel: string | undefined;
-        };
+        ariaRoledescription: string | undefined;
+        ariaDescribedBy: string | undefined;
+        ariaInvalid: boolean | undefined;
+        ariaHasPopup: AriaHasPopup | undefined;
+        ariaAutoComplete: "list" | "none" | "inline" | "both" | undefined;
+        role: import("@ui5/webcomponents-base/dist/thirdparty/preact/jsx.js").JSXInternal.AriaRole | undefined;
+        ariaControls: string | undefined;
+        ariaExpanded: boolean | undefined;
+        ariaDescription: string | undefined;
+        ariaLabel: string | undefined;
     };
     get nativeInputAttributes(): {
         min: number | undefined;
@@ -493,7 +491,7 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormInpu
             padding: string;
         };
     };
-    get suggestionSeparators(): string;
+    get suggestionSeparators(): "None";
     get shouldDisplayOnlyValueStateMessage(): boolean;
     get shouldDisplayDefaultValueStateMessage(): boolean;
     get hasValueState(): boolean;
@@ -535,4 +533,4 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormInpu
     removeFractionalPart(value: string): string;
 }
 export default Input;
-export type { IInputSuggestionItem, IInputSuggestionItemSelectable, InputSuggestionScrollEventDetail, InputSelectionChangeEventDetail, InputEventDetail, };
+export type { InputAccInfo, IInputSuggestionItem, IInputSuggestionItemSelectable, InputSuggestionScrollEventDetail, InputSelectionChangeEventDetail, InputEventDetail, };

package/dist/Input.js

@@ -6,14 +6,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var Input_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import {} from "@ui5/webcomponents-base";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
-// @ts-ignore
+// @ts-expect-error
 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";
@@ -24,17 +25,11 @@ import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsF
 import { getAssociatedLabelForTexts, getAllAccessibleNameRefTexts, registerUI5Element, deregisterUI5Element, } 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 "@ui5/webcomponents-icons/dist/decline.js";
-import "@ui5/webcomponents-icons/dist/not-editable.js";
-import "@ui5/webcomponents-icons/dist/error.js";
-import "@ui5/webcomponents-icons/dist/alert.js";
-import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
-import "@ui5/webcomponents-icons/dist/information.js";
 import InputType from "./types/InputType.js";
 import Popover from "./Popover.js";
 import Icon from "./Icon.js";
 // Templates
-import InputTemplate from "./generated/templates/InputTemplate.lit.js";
+import InputTemplate from "./InputTemplate.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, INPUT_CLEAR_ICON_ACC_NAME, INPUT_AVALIABLE_VALUES, FORM_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
 // Styles
@@ -337,6 +332,8 @@ let Input = Input_1 = class Input extends UI5Element {
         const innerInput = this.getInputDOMRefSync();
         if (this.showSuggestions && this.Suggestions?._getPicker()) {
             this._listWidth = this.Suggestions._getListWidth();
+            // disabled ItemNavigation from the list since we are not using it
+            this.Suggestions._getList()._itemNavigation._getItems = () => [];
         }
         if (this._performTextSelection) {
             // this is required to syncronize lit-html input's value and user's input
@@ -591,11 +588,16 @@ let Input = Input_1 = class Input extends UI5Element {
         this.fireDecoratorEvent("select");
     }
     _handleInput(e) {
+        const eventType = (e.detail && e.detail.inputType) || "";
+        this._input(e, eventType);
+    }
+    _handleNativeInput(e) {
+        const eventType = e.inputType || "";
+        this._input(e, eventType);
+    }
+    _input(e, eventType) {
         const inputDomRef = this.getInputDOMRefSync();
         const emptyValueFiredOnNumberInput = this.value && this.isTypeNumber && !inputDomRef.value;
-        const eventType = e.inputType
-            || (e.detail && e.detail.inputType)
-            || "";
         this._keepInnerValue = false;
         const allowedEventTypes = [
             "deleteWordBackward",
@@ -913,6 +915,9 @@ let Input = Input_1 = class Input extends UI5Element {
         return Input_1.i18nBundle.getText(INPUT_AVALIABLE_VALUES);
     }
     get inputType() {
+        return this.type;
+    }
+    get inputNativeType() {
         return this.type.toLowerCase();
     }
     get isTypeNumber() {
@@ -928,21 +933,18 @@ let Input = Input_1 = class Input extends UI5Element {
         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();
-        const info = {
-            "input": {
-                "ariaRoledescription": this._inputAccInfo && (this._inputAccInfo.ariaRoledescription || undefined),
-                "ariaDescribedBy": ariaDescribedBy || 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,
-                "ariaLabel": (this._inputAccInfo && this._inputAccInfo.ariaLabel) || this._accessibleLabelsRefTexts || this.accessibleName || this._associatedLabelsTexts || undefined,
-            },
+        return {
+            "ariaRoledescription": this._inputAccInfo && (this._inputAccInfo.ariaRoledescription || undefined),
+            "ariaDescribedBy": ariaDescribedBy || 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,
+            "ariaLabel": (this._inputAccInfo && this._inputAccInfo.ariaLabel) || this._accessibleLabelsRefTexts || this.accessibleName || this._associatedLabelsTexts || undefined,
         };
-        return info;
     }
     get nativeInputAttributes() {
         return {
@@ -1225,7 +1227,7 @@ Input = Input_1 = __decorate([
         tag: "ui5-input",
         languageAware: true,
         formAssociated: true,
-        renderer: litRender,
+        renderer: jsxRenderer,
         template: InputTemplate,
         styles: [
             inputStyles,
@@ -1317,6 +1319,14 @@ Input = Input_1 = __decorate([
         bubbles: true,
     })
 ], 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