@ui5/webcomponents 0.0.0-a3eca7ade → 0.0.0-a8a75c830

package/dist/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../src/Icon.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport jsxRender from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport type { AriaRole } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type { IconData, UnsafeIconData } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\nimport { getIconData, getIconDataSync } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport executeTemplate from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport IconTemplate from \"./IconTemplate.js\";\nimport type IconDesign from \"./types/IconDesign.js\";\nimport IconMode from \"./types/IconMode.js\";\n\nimport { ICON_ARIA_TYPE_IMAGE, ICON_ARIA_TYPE_INTERACTIVE } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport iconCss from \"./generated/themes/Icon.css.js\";\n\n/**\n * Interface for components that represent an icon, usable in numerous higher-order components\n * @public\n */\ninterface IIcon extends HTMLElement { }\n\nconst ICON_NOT_FOUND = \"ICON_NOT_FOUND\";\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-icon` component represents an SVG icon.\n * There are two main scenarios how the `ui5-icon` component is used:\n * as a purely decorative element,\n * or as an interactive element that can be focused and clicked.\n *\n * ### Usage\n *\n * 1. **Get familiar with the icons collections.**\n *\n * Before displaying an icon, you need to explore the icons collections to find and import the desired icon.\n *\n * Currently there are 3 icons collection, available as 3 npm packages:\n *\n * - [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n * - [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n * - [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n * [icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n *\n * 2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n *\n * `npm i @ui5/webcomponents-icons`\n * `npm i @ui5/webcomponents-icons-tnt`\n * `npm i @ui5/webcomponents-icons-business-suite`\n *\n * 3. **Then, import the desired icon**.\n *\n * `import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n *\n * **For Example**:\n *\n * For the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n *\n * `import \"@ui5/webcomponents-icons/dist/employee.js\";`\n *\n * For the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n *\n * `import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n *\n * For the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n *\n * `import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n *\n * 4. **Display the icon using the `ui5-icon` web component.**\n * Set the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\n * and the icon name to the `name` property.\n *\n * `<ui5-icon name=\"employee\"></ui5-icon>`\n * `<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n * `<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n *\n * ### Keyboard Handling\n *\n * - [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n * - [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Icon.js\";`\n * @csspart root - Used to style the outermost wrapper of the `ui5-icon`.\n * @constructor\n * @extends UI5Element\n * @implements {IIcon}\n * @public\n */\n@customElement({\n\ttag: \"ui5-icon\",\n\tlanguageAware: true,\n\tthemeAware: true,\n\trenderer: jsxRender,\n\ttemplate: IconTemplate,\n\tstyles: iconCss,\n})\n/**\n * Fired on mouseup, `SPACE` and `ENTER`.\n * - on mouse click, the icon fires native `click` event\n * - on `SPACE` and `ENTER`, the icon fires custom `click` event\n * @public\n * @since 2.11.0\n */\n@event(\"click\", {\n\tbubbles: true,\n})\nclass Icon extends UI5Element implements IIcon {\n\teventDetails!: {\n\t\tclick: void\n\t}\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\t/**\n\t * Defines the component semantic design.\n\t * @default \"Default\"\n\t * @public\n\t * @since 1.9.2\n\t */\n\t@property()\n\tdesign: `${IconDesign}` = \"Default\";\n\n\t/**\n\t * Defines the unique identifier (icon name) of the component.\n\t *\n\t * To browse all available icons, see the\n\t * [SAP Icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html),\n\t * [SAP Fiori Tools](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT) and\n\t * [SAP Business Suite](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html)\n\t *\n\t * Example:\n\t * `name='add'`, `name='delete'`, `name='employee'`.\n\t *\n\t * **Note:** To use the SAP Fiori Tools icons,\n\t * you need to set the `tnt` prefix in front of the icon's name.\n\t *\n\t * Example:\n\t * `name='tnt/antenna'`, `name='tnt/actor'`, `name='tnt/api'`.\n\t *\n\t * **Note:** To use the SAP Business Suite icons,\n\t * you need to set the `business-suite` prefix in front of the icon's name.\n\t *\n\t * Example:\n\t * `name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tname?: string;\n\n\t/**\n\t * Defines the text alternative of the component.\n\t * If not provided a default text alternative will be set, if present.\n\t *\n\t * **Note:** Every icon should have a text alternative in order to\n\t * calculate its accessible name.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Defines whether the component should have a tooltip.\n\t *\n\t * **Note:** The tooltip text should be provided via the `accessible-name` property.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowTooltip = false;\n\n\t/**\n\t * Defines the mode of the component.\n\t * @default \"Decorative\"\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property()\n\tmode: `${IconMode}` = \"Decorative\";\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Array })\n\tpathData: Array<string> = [];\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Object, noAttribute: true })\n\taccData?: I18nText;\n\n\t/**\n\t* @private\n\t*/\n\t@property({ type: Boolean })\n\tinvalid = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\teffectiveAccessibleName?: string;\n\n\tltr?: boolean;\n\tpackageName?: string;\n\tviewBox?: string;\n\tcustomTemplate?: object;\n\tcustomTemplateAsString?: string;\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (this.mode !== IconMode.Interactive) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis.fireDecoratorEvent(\"click\");\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault(); // prevent scrolling\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (this.mode === IconMode.Interactive && isSpace(e)) {\n\t\t\tthis.fireDecoratorEvent(\"click\");\n\t\t}\n\t}\n\n\t/**\n\t* Enforce \"ltr\" direction, based on the icons collection metadata.\n\t*/\n\tget _dir() {\n\t\treturn this.ltr ? \"ltr\" : undefined;\n\t}\n\n\tget effectiveAriaHidden() {\n\t\treturn this.mode === IconMode.Decorative ? \"true\" : undefined;\n\t}\n\n\tget _tabIndex() {\n\t\treturn this.mode === IconMode.Interactive ? 0 : undefined;\n\t}\n\n\tget effectiveAccessibleRole() {\n\t\tswitch (this.mode) {\n\t\tcase IconMode.Interactive:\n\t\t\treturn \"button\";\n\t\tcase IconMode.Decorative:\n\t\t\treturn \"presentation\";\n\t\tdefault:\n\t\t\treturn \"img\";\n\t\t}\n\t}\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\tasync onBeforeRendering() {\n\t\tconst name = this.name;\n\t\tif (!name) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet iconData: typeof ICON_NOT_FOUND | IconData | UnsafeIconData | undefined = getIconDataSync(name);\n\t\tif (!iconData) {\n\t\t\ticonData = await getIconData(name);\n\t\t}\n\n\t\tif (!iconData) {\n\t\t\tthis.invalid = true;\n\t\t\t/* eslint-disable-next-line */\n\t\t\treturn console.warn(`Required icon is not registered. Invalid icon name: ${this.name}`);\n\t\t}\n\n\t\tif (iconData === ICON_NOT_FOUND) {\n\t\t\tthis.invalid = true;\n\t\t\t/* eslint-disable-next-line */\n\t\t\treturn console.warn(`Required icon is not registered. You can either import the icon as a module in order to use it e.g. \"@ui5/webcomponents-icons/dist/${name.replace(\"sap-icon://\", \"\")}.js\", or setup a JSON build step and import \"@ui5/webcomponents-icons/dist/AllIcons.js\".`);\n\t\t}\n\n\t\tthis.viewBox = iconData.viewBox || \"0 0 512 512\";\n\n\t\tif (\"customTemplate\" in iconData && iconData.customTemplate) {\n\t\t\tthis.customTemplate = executeTemplate(iconData.customTemplate, this);\n\t\t}\n\n\t\tif (\"customTemplateAsString\" in iconData) {\n\t\t\tthis.customTemplateAsString = iconData.customTemplateAsString;\n\t\t}\n\n\t\t// in case a new valid name is set, show the icon\n\t\tthis.invalid = false;\n\t\tif (\"pathData\" in iconData && iconData.pathData) {\n\t\t\tthis.pathData = Array.isArray(iconData.pathData) ? iconData.pathData : [iconData.pathData];\n\t\t}\n\n\t\tthis.accData = iconData.accData;\n\t\tthis.ltr = iconData.ltr;\n\t\tthis.packageName = iconData.packageName;\n\n\t\tif (this.accessibleName) {\n\t\t\tthis.effectiveAccessibleName = this.accessibleName;\n\t\t} else if (this.accData) {\n\t\t\tif (this.packageName) {\n\t\t\t\tconst i18nBundle = await getI18nBundle(this.packageName);\n\t\t\t\tthis.effectiveAccessibleName = i18nBundle.getText(this.accData) || undefined;\n\t\t\t} else {\n\t\t\t\tthis.effectiveAccessibleName = this.accData?.defaultText || undefined;\n\t\t\t}\n\t\t} else {\n\t\t\tthis.effectiveAccessibleName = undefined;\n\t\t}\n\t}\n\n\tget hasIconTooltip() {\n\t\treturn this.showTooltip && this.effectiveAccessibleName;\n\t}\n\n\t_getAriaTypeDescription() {\n\t\tswitch (this.mode) {\n\t\tcase IconMode.Interactive:\n\t\t\treturn Icon.i18nBundle.getText(ICON_ARIA_TYPE_INTERACTIVE);\n\t\tcase IconMode.Image:\n\t\t\treturn Icon.i18nBundle.getText(ICON_ARIA_TYPE_IMAGE);\n\t\tdefault:\n\t\t\treturn \"\";\n\t\t}\n\t}\n\n\tget accessibilityInfo() {\n\t\tif (this.mode === IconMode.Decorative) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn {\n\t\t\trole: this.effectiveAccessibleRole as AriaRole,\n\t\t\ttype: this._getAriaTypeDescription(),\n\t\t\tdescription: this.effectiveAccessibleName,\n\t\t};\n\t}\n}\n\nIcon.define();\n\nexport default Icon;\nexport type {\n\tIIcon,\n};\n"]}

package/dist/IconTemplate.d.ts

@@ -0,0 +1,2 @@
+import type Icon from "./Icon.js";
+export default function IconTemplate(this: Icon): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/IconTemplate.js

@@ -0,0 +1,15 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+export default function IconTemplate() {
+    return (_jsxs("svg", { class: "ui5-icon-root", part: "root", tabindex: this._tabIndex, dir: this._dir, viewBox: this.viewBox, role: this.effectiveAccessibleRole, focusable: "false", preserveAspectRatio: "xMidYMid meet", "aria-label": this.effectiveAccessibleName, "aria-hidden": this.effectiveAriaHidden, xmlns: "http://www.w3.org/2000/svg", onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, children: [this.hasIconTooltip &&
+                _jsxs("title", { id: `${this._id}-tooltip`, children: [" ", this.effectiveAccessibleName, " "] }), _jsx("g", { role: "presentation", children: content.call(this) })] }));
+}
+function content() {
+    if (this.customTemplate) {
+        return this.customTemplate;
+    }
+    if (this.customTemplateAsString) {
+        return _jsx("g", { dangerouslySetInnerHTML: { __html: this.customTemplateAsString } });
+    }
+    return this.pathData.map(path => (_jsx("path", { d: path })));
+}
+//# sourceMappingURL=IconTemplate.js.map

package/dist/IconTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconTemplate.js","sourceRoot":"","sources":["../src/IconTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,YAAY;IACnC,OAAO,CACN,eACC,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,uBAAuB,EAClC,SAAS,EAAC,OAAO,EACjB,mBAAmB,EAAC,eAAe,gBACvB,IAAI,CAAC,uBAAuB,iBAC3B,IAAI,CAAC,mBAAmB,EACrC,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,aAEpB,IAAI,CAAC,cAAc;gBACR,iBAAO,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,kBAAK,IAAI,CAAC,uBAAuB,SAAU,EAGxF,YAAG,IAAI,EAAC,cAAc,YACnB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GACjB,IACC,CACN,CAAC;AACH,CAAC;AAED,SAAS,OAAO;IACf,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED,IAAI,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACjC,OAAO,YAAG,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,sBAAsB,EAAE,GAAM,CAAC;IAClF,CAAC;IAED,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAChC,eAAM,CAAC,EAAE,IAAI,GAAS,CACtB,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import type Icon from \"./Icon.js\";\n\nexport default function IconTemplate(this: Icon) {\n\treturn (\n\t\t<svg\n\t\t\tclass=\"ui5-icon-root\"\n\t\t\tpart=\"root\"\n\t\t\ttabindex={this._tabIndex}\n\t\t\tdir={this._dir}\n\t\t\tviewBox={this.viewBox}\n\t\t\trole={this.effectiveAccessibleRole}\n\t\t\tfocusable=\"false\"\n\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\taria-label={this.effectiveAccessibleName}\n\t\t\taria-hidden={this.effectiveAriaHidden}\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t>\n\t\t\t{ this.hasIconTooltip &&\n                <title id={`${this._id}-tooltip`} > {this.effectiveAccessibleName} </title>\n\t\t\t}\n\n\t\t\t<g role=\"presentation\">\n\t\t\t\t{ content.call(this) }\n\t\t\t</g>\n\t\t</svg>\n\t);\n}\n\nfunction content(this: Icon) {\n\tif (this.customTemplate) {\n\t\treturn this.customTemplate;\n\t}\n\n\tif (this.customTemplateAsString) {\n\t\treturn <g dangerouslySetInnerHTML={{ __html: this.customTemplateAsString }}></g>;\n\t}\n\n\treturn this.pathData.map(path => (\n\t\t<path d={path}></path>\n\t));\n}\n"]}

package/dist/Input.d.ts

@@ -0,0 +1,597 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.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 type SuggestionItem from "./SuggestionItem.js";
+import type { SuggestionComponent } from "./features/InputSuggestions.js";
+import type InputSuggestions from "./features/InputSuggestions.js";
+import InputType from "./types/InputType.js";
+import type Popover from "./Popover.js";
+import type { IIcon } from "./Icon.js";
+import type { ListItemClickEventDetail, ListSelectionChangeEventDetail } from "./List.js";
+import type ResponsivePopover from "./ResponsivePopover.js";
+import type InputKeyHint from "./types/InputKeyHint.js";
+import type InputComposition from "./features/InputComposition.js";
+import InputSuggestionsFilter from "./types/InputSuggestionsFilter.js";
+/**
+ * Interface for components that represent a suggestion item, usable in `ui5-input`
+ * @public
+ */
+interface IInputSuggestionItem extends UI5Element {
+    focused: boolean;
+    additionalText?: string;
+    items?: IInputSuggestionItem[];
+}
+interface IInputSuggestionItemSelectable extends IInputSuggestionItem {
+    text?: string;
+    selected: boolean;
+}
+type NativeInputAttributes = {
+    min?: number;
+    max?: number;
+    step?: number;
+};
+type InputAccInfo = {
+    ariaRoledescription?: string;
+    ariaDescribedBy?: string;
+    ariaHasPopup?: AriaHasPopup;
+    ariaAutoComplete?: AriaAutoComplete;
+    role?: AriaRole;
+    ariaControls?: string;
+    ariaRequired?: boolean;
+    ariaExpanded?: boolean;
+    ariaDescription?: string;
+    ariaLabel?: string;
+    ariaInvalid?: boolean;
+};
+declare enum INPUT_ACTIONS {
+    ACTION_ENTER = "enter",
+    ACTION_USER_INPUT = "input"
+}
+type InputEventDetail = {
+    inputType: string;
+};
+type InputSelectionChangeEventDetail = {
+    item: IInputSuggestionItem | null;
+};
+type InputSuggestionScrollEventDetail = {
+    scrollTop: number;
+    scrollContainer: HTMLElement;
+};
+/**
+ * @class
+ * ### Overview
+ *
+ * The `ui5-input` component allows the user to enter and edit text or numeric values in one line.
+ *
+ * Additionally, you can provide `suggestionItems`,
+ * that are displayed in a popover right under the input.
+ *
+ * The text field can be editable or read-only (`readonly` property),
+ * and it can be enabled or disabled (`disabled` property).
+ * To visualize semantic states, such as "Negative" or "Critical", the `valueState` property is provided.
+ * When the user makes changes to the text, the change event is fired,
+ * which enables you to react on any text change.
+ *
+ * ### Keyboard Handling
+ * The `ui5-input` provides the following keyboard shortcuts:
+ *
+ * - [Escape] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.
+ * - [Enter] or [Return] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.
+ * - [Down] - Focuses the next matching item in the suggestion list. Selection-change event is fired.
+ * - [Up] - Focuses the previous matching item in the suggestion list. Selection-change event is fired.
+ * - [Home] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.
+ * - [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.
+ * - [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.
+ * - [Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.
+ * - [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/Input.js";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @csspart root - Used to style the root DOM element of the Input component
+ * @csspart input - Used to style the native input element
+ * @csspart clear-icon - Used to style the clear icon, which can be pressed to clear user input text
+ */
+declare class Input extends UI5Element implements SuggestionComponent, IFormInputElement {
+    eventDetails: {
+        "change": InputEventDetail;
+        "input": InputEventDetail;
+        "select": void;
+        "_request-submit": void;
+        "selection-change": InputSelectionChangeEventDetail;
+        "type-ahead": void;
+        "suggestion-scroll": InputSuggestionScrollEventDetail;
+        "open": void;
+        "close": void;
+    };
+    /**
+     * Defines whether the component is in disabled state.
+     *
+     * **Note:** A disabled component is completely noninteractive.
+     * @default false
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * Defines if characters within the suggestions are to be highlighted
+     * in case the input value matches parts of the suggestions text.
+     *
+     * **Note:** takes effect when `showSuggestions` is set to `true`
+     * @default false
+     * @private
+     * @since 1.0.0-rc.8
+     */
+    highlight: boolean;
+    /**
+     * Defines a short hint intended to aid the user with data entry when the
+     * component has no value.
+     * @default undefined
+     * @public
+     */
+    placeholder?: string;
+    /**
+     * Defines whether the component is read-only.
+     *
+     * **Note:** A read-only component is not editable,
+     * but still provides visual feedback upon user interaction.
+     * @default false
+     * @public
+     */
+    readonly: boolean;
+    /**
+     * Defines whether the component is required.
+     * @default false
+     * @public
+     * @since 1.0.0-rc.3
+     */
+    required: boolean;
+    /**
+     * Defines whether the value will be autcompleted to match an item
+     * @default false
+     * @public
+     * @since 1.4.0
+     */
+    noTypeahead: boolean;
+    /**
+     * Defines the HTML type of the component.
+     *
+     * **Notes:**
+     *
+     * - The particular effect of this property differs depending on the browser
+     * and the current language settings, especially for type `Number`.
+     * - The property is mostly intended to be used with touch devices
+     * that use different soft keyboard layouts depending on the given input type.
+     * @default "Text"
+     * @public
+     */
+    type: `${InputType}`;
+    /**
+     * Defines the value of the component.
+     *
+     * **Note:** The property is updated upon typing.
+     * @default ""
+     * @formEvents change input
+     * @formProperty
+     * @public
+     */
+    value: string;
+    /**
+     * Defines the value state of the component.
+     * @default "None"
+     * @public
+     */
+    valueState: `${ValueState}`;
+    /**
+     * 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 undefined
+     * @public
+     */
+    name?: string;
+    /**
+     * Defines whether the component should show suggestions, if such are present.
+     *
+     * @default false
+     * @public
+     */
+    showSuggestions: boolean;
+    /**
+     * Sets the maximum number of characters available in the input field.
+     *
+     * **Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.
+     * @default undefined
+     * @since 1.0.0-rc.5
+     * @public
+     */
+    maxlength?: number;
+    /**
+     * Defines the accessible ARIA name of the component.
+     * @default undefined
+     * @public
+     * @since 1.0.0-rc.15
+     */
+    accessibleName?: string;
+    /**
+     * Receives id(or many ids) of the elements that label the input.
+     * @default undefined
+     * @public
+     * @since 1.0.0-rc.15
+     */
+    accessibleNameRef?: string;
+    /**
+     * Defines the accessible description of the component.
+     * @default undefined
+     * @public
+     * @since 2.9.0
+     */
+    accessibleDescription?: string;
+    /**
+     * Receives id(or many ids) of the elements that describe the input.
+     * @default undefined
+     * @public
+     * @since 2.9.0
+     */
+    accessibleDescriptionRef?: string;
+    /**
+     * Defines whether the clear icon of the input will be shown.
+     * @default false
+     * @public
+     * @since 1.2.0
+     */
+    showClearIcon: boolean;
+    /**
+     * Defines whether the suggestions picker is open.
+     * The picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.
+     * The picker will close automatically and `close` event will be fired if the input is not in the viewport.
+     * @default false
+     * @public
+     * @since 2.0.0
+     */
+    open: boolean;
+    /**
+     * Defines the filter type of the component.
+     * @default "None"
+     * @public
+     * @since 2.19.0
+     */
+    filter: `${InputSuggestionsFilter}`;
+    /**
+     * Defines whether the clear icon is visible.
+     * @default false
+     * @private
+     * @since 1.2.0
+     */
+    _effectiveShowClearIcon: boolean;
+    /**
+     * @private
+     */
+    focused: boolean;
+    /**
+     * Used to define enterkeyhint of the inner input.
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint
+     *
+     * @private
+     */
+    hint?: `${InputKeyHint}`;
+    valueStateOpen: boolean;
+    _inputAccInfo: InputAccInfo;
+    _nativeInputAttributes: NativeInputAttributes;
+    _inputWidth?: number;
+    _listWidth?: number;
+    _inputIconFocused: boolean;
+    /**
+     * Constantly updated value of texts collected from the associated labels
+     * @private
+     */
+    _associatedLabelsTexts?: string;
+    /**
+     * Constantly updated value of texts collected from the accessibleNameRef elements
+     * @private
+     */
+    _accessibleLabelsRefTexts?: string;
+    /**
+     * Constantly updated value of texts collected from the associated labels
+     * @private
+     */
+    _associatedDescriptionRefTexts?: string;
+    /**
+     * @private
+     */
+    Suggestions?: InputSuggestions;
+    /**
+     * @private
+     */
+    _linksListenersArray: Array<(args: any) => void>;
+    /**
+     * Indicates whether IME composition is currently active
+     * @default false
+     * @private
+     */
+    _isComposing: boolean;
+    /**
+     * Defines the suggestion items.
+     *
+     * **Note:** The suggestions would be displayed only if the `showSuggestions`
+     * property is set to `true`.
+     *
+     * **Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.
+     *
+     * @public
+     */
+    suggestionItems: DefaultSlot<IInputSuggestionItem>;
+    /**
+     * Defines the icon to be displayed in the component.
+     * @public
+     */
+    icon: Slot<IIcon>;
+    /**
+     * Defines the value state message that will be displayed as pop up under the component.
+     * The value state message slot should contain only one root element.
+     *
+     * **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`, `Critical` or `Negative` value state.
+     *
+     * **Note:** If the component has `suggestionItems`,
+     * the `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.
+     * @since 1.0.0-rc.6
+     * @public
+     */
+    valueStateMessage: Slot<HTMLElement>;
+    hasSuggestionItemSelected: boolean;
+    valueBeforeItemSelection: string;
+    valueBeforeSelectionStart: string;
+    previousValue: string;
+    firstRendering: boolean;
+    typedInValue: string;
+    lastConfirmedValue: string;
+    isTyping: boolean;
+    _handleResizeBound: ResizeObserverCallback;
+    _shouldAutocomplete?: boolean;
+    _enterKeyDown?: boolean;
+    _isKeyNavigation?: boolean;
+    _indexOfSelectedItem: number;
+    _selectedText?: string;
+    _clearIconClicked?: boolean;
+    _focusedAfterClear: boolean;
+    _changeToBeFired?: boolean;
+    _performTextSelection?: boolean;
+    _isLatestValueFromSuggestions: boolean;
+    _isChangeTriggeredBySuggestion: boolean;
+    _valueStateLinks: Array<HTMLElement>;
+    _composition?: InputComposition;
+    static i18nBundle: I18nBundle;
+    static composition: typeof InputComposition;
+    /**
+     * Indicates whether link navigation is being handled.
+     * @default false
+     * @private
+     * @since 2.11.0
+     */
+    _handleLinkNavigation: boolean;
+    get formValidityMessage(): string | undefined;
+    get _effectiveShowSuggestions(): boolean;
+    get formValidity(): ValidityStateFlags;
+    formElementAnchor(): Promise<HTMLElement | undefined>;
+    get formFormattedValue(): FormData | string | null;
+    constructor();
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    _highlightSuggestionItem(item: SuggestionItem): void;
+    _isGroupItem(item: IInputSuggestionItem): boolean;
+    onBeforeRendering(): void;
+    onAfterRendering(): void;
+    _adjustContainsSelectionRange(): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _onkeyup(e: KeyboardEvent): void;
+    get currentItemIndex(): number;
+    _handleUp(e: KeyboardEvent): void;
+    _handleDown(e: KeyboardEvent): void;
+    _handleSpace(e: KeyboardEvent): void;
+    _handleTab(): void;
+    _handleCtrlAltF8(): void;
+    _addLinksEventListeners(): void;
+    _removeLinksEventListeners(): void;
+    _handleEnter(e: KeyboardEvent): void;
+    _handlePageUp(e: KeyboardEvent): void;
+    _handlePageDown(e: KeyboardEvent): void;
+    _handleHome(e: KeyboardEvent): void;
+    _handleEnd(e: KeyboardEvent): void;
+    _handleEscape(): void;
+    _onfocusin(e: FocusEvent): void;
+    /**
+     * Called on "focusin" of the native input HTML Element.
+     * **Note:** implemented in MultiInput, but used in the Input template.
+     */
+    innerFocusIn(): void | undefined;
+    _onfocusout(e: FocusEvent): void;
+    _clearPopoverFocusAndSelection(): void;
+    _click(): void;
+    _handleChange(): void;
+    _clear(): void;
+    _iconMouseDown(): void;
+    _scroll(e: UI5CustomEvent<ResponsivePopover, "scroll">): void;
+    _handleSelect(): 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;
+    _selectMatchingItem(item: IInputSuggestionItemSelectable): void;
+    _filterItems(value: string): void;
+    _filterGroups(filterType: `${InputSuggestionsFilter}`, groupItems: IInputSuggestionItem[]): IInputSuggestionItem[];
+    _resetItemVisibility(): void;
+    _handleTypeAhead(item: IInputSuggestionItemSelectable): void;
+    _handleResize(): void;
+    _updateAssociatedLabelsTexts(): void;
+    _closePicker(): void;
+    _confirmMobileValue(): void;
+    _cancelMobileValue(): void;
+    _afterOpenPicker(): void;
+    _afterClosePicker(): void;
+    _handlePickerAfterOpen(): void;
+    _handlePickerAfterClose(): void;
+    openValueStatePopover(): void;
+    closeValueStatePopover(): void;
+    _handleValueStatePopoverAfterClose(): void;
+    _getValueStatePopover(): Popover;
+    enableSuggestions(): void;
+    /**
+     * Enables IME composition handling.
+     * Dynamically loads the InputComposition feature and sets up event listeners.
+     * @private
+     */
+    _enableComposition(): void;
+    acceptSuggestion(item: IInputSuggestionItemSelectable, keyboardUsed: boolean): void;
+    /**
+     * Updates the input value on item select.
+     * @param item The item that is on select
+     */
+    updateValueOnSelect(item: IInputSuggestionItem): void;
+    fireEventByAction(action: INPUT_ACTIONS, e: InputEvent): void;
+    getInputValue(): string;
+    getInputDOMRef(): HTMLInputElement | Input | null;
+    getInputDOMRefSync(): HTMLInputElement | null;
+    /**
+     * Returns a reference to the native input element
+     * @protected
+     */
+    get nativeInput(): HTMLInputElement | null;
+    get nativeInputWidth(): number;
+    /**
+     * Returns if the suggestions popover is scrollable.
+     * The method returns `Promise` that resolves to true,
+     * if the popup is scrollable and false otherwise.
+     */
+    isSuggestionsScrollable(): boolean | Promise<boolean>;
+    onItemMouseDown(e: MouseEvent): void;
+    onItemSelected(suggestionItem: IInputSuggestionItemSelectable, keyboardUsed: boolean): void;
+    _handleSuggestionItemPress(e: CustomEvent<ListItemClickEventDetail>): void;
+    onItemSelect(item: IInputSuggestionItem): void;
+    get _flattenItems(): Array<IInputSuggestionItem>;
+    get _selectableItems(): Array<IInputSuggestionItemSelectable>;
+    get valueStateTypeMappings(): {
+        Positive: string;
+        Information: string;
+        Negative: string;
+        Critical: string;
+    };
+    valueStateTextMappings(): {
+        Positive: string;
+        Information: string;
+        Negative: string;
+        Critical: string;
+    };
+    announceSelectedItem(): void;
+    fireSelectionChange(item: IInputSuggestionItem | null, isValueFromSuggestions: boolean): void;
+    fireResetSelectionChange(): void;
+    get _readonly(): boolean;
+    get _headerTitleText(): string;
+    get _suggestionsOkButtonText(): string;
+    get _suggestionsCancelButtonText(): string;
+    get clearIconAccessibleName(): string;
+    get _popupLabel(): string;
+    get inputType(): `${InputType}`;
+    get inputNativeType(): Lowercase<`${InputType}`>;
+    get isTypeNumber(): boolean;
+    get suggestionsTextId(): "" | "suggestionsText";
+    get valueStateTextId(): "" | "valueStateDesc";
+    get _accInfoAriaDescription(): string;
+    get _accInfoAriaDescriptionId(): "" | "descr";
+    get ariaDescriptionText(): string | undefined;
+    get ariaDescriptionTextId(): "" | "accessibleDescription";
+    get ariaDescribedByIds(): string;
+    get accInfo(): {
+        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;
+        accessibleDescription: string | undefined;
+        ariaLabel: string | undefined;
+    };
+    get nativeInputAttributes(): {
+        min: number | undefined;
+        max: number | undefined;
+        step: string | number | undefined;
+    };
+    get ariaValueStateHiddenText(): string | undefined;
+    get itemSelectionAnnounce(): string;
+    get linksInAriaValueStateHiddenText(): HTMLElement[];
+    get valueStateLinksShortcutsTextAcc(): string;
+    get _valueStateLinksShortcutsTextAccId(): "" | "hiddenText-value-state-link-shortcut";
+    get iconsCount(): number;
+    get classes(): ClassMap;
+    get styles(): {
+        suggestionPopoverHeader: {
+            display: string;
+            width: string;
+            "max-width": string;
+        };
+        suggestionsPopover: {
+            "min-width": string;
+            "max-width": string;
+        };
+        innerInput: {
+            padding: string;
+        };
+    };
+    get suggestionSeparators(): "None";
+    get shouldDisplayOnlyValueStateMessage(): boolean;
+    get shouldDisplayDefaultValueStateMessage(): boolean;
+    get hasValueState(): boolean;
+    get hasValueStateMessage(): boolean;
+    get valueStateText(): string | undefined;
+    get suggestionsText(): string;
+    get availableSuggestionsCount(): string | undefined;
+    get step(): "any" | undefined;
+    get _isPhone(): boolean;
+    get _isSuggestionsFocused(): boolean | undefined;
+    /**
+     * Returns the placeholder value.
+     * @protected
+     */
+    get _placeholder(): string | undefined;
+    /**
+     * This method is relevant for sap_horizon theme only
+     */
+    get _valueStateInputIcon(): string;
+    /**
+     * This method is relevant for sap_horizon theme only
+     */
+    get _valueStateMessageInputIcon(): string;
+    /**
+     * Returns the caret position inside the native input
+     * @protected
+     */
+    getCaretPosition(): number | null;
+    /**
+     * Sets the caret to a certain position inside the native input
+     * @protected
+     */
+    setCaretPosition(pos: number | null): void;
+    /**
+     * Removes the fractional part of floating-point number.
+     * @param value the numeric value of Input of type "Number"
+     */
+    removeFractionalPart(value: string): string;
+    static SuggestionsClass?: typeof InputSuggestions;
+}
+export default Input;
+export type { InputAccInfo, IInputSuggestionItem, IInputSuggestionItemSelectable, InputSuggestionScrollEventDetail, InputSelectionChangeEventDetail, InputEventDetail, };