@ui5/webcomponents 2.0.0-rc.3 → 2.0.0-rc.4

package/dist/FormGroup.js

@@ -0,0 +1,86 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.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 FormItemSpacing from "./types/FormItemSpacing.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The FormGroup (ui5-form-group) represents a group inside the Form (ui5-form) component
+ * and it consists of FormItem (ui5-form-item) components.
+ *
+ * The layout of the FormGroup is mostly defined and controlled by the overarching Form (ui5-form) component.
+ * Still, one can influence the layout via the FormGroup's `columnSpan` property,
+ * that defines how many columns the group should expand to.
+ *
+ * ### Usage
+ *
+ * Тhe FormGroup (ui5-form-group) allows to split a Form into groups,
+ * e.g to group FormItems that logically belong together.
+ *
+ * ### ES6 Module Import
+ *
+ * - import @ui5/webcomponents/dist/FormGroup.js";
+ *
+ * @public
+ * @since 2.0.0
+ */
+let FormGroup = class FormGroup extends UI5Element {
+    onBeforeRendering() {
+        this.processFormItems();
+    }
+    processFormItems() {
+        this.items.forEach((item) => {
+            item.labelSpan = this.labelSpan;
+            item.itemSpacing = this.itemSpacing;
+        });
+    }
+    get isGroup() {
+        return true;
+    }
+};
+__decorate([
+    property()
+], FormGroup.prototype, "headerText", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: undefined })
+], FormGroup.prototype, "columnSpan", void 0);
+__decorate([
+    slot({
+        type: HTMLElement,
+        "default": true,
+    })
+], FormGroup.prototype, "items", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 1 })
+], FormGroup.prototype, "colsS", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 1 })
+], FormGroup.prototype, "colsM", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 1 })
+], FormGroup.prototype, "colsL", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 1 })
+], FormGroup.prototype, "colsXl", void 0);
+__decorate([
+    property({ type: FormItemSpacing, defaultValue: FormItemSpacing.Normal })
+], FormGroup.prototype, "itemSpacing", void 0);
+__decorate([
+    property({ type: String, defaultValue: "S12 M4 L4 XL4" })
+], FormGroup.prototype, "labelSpan", void 0);
+FormGroup = __decorate([
+    customElement("ui5-form-group")
+], FormGroup);
+FormGroup.define();
+export default FormGroup;
+//# sourceMappingURL=FormGroup.js.map

package/dist/FormGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.js","sourceRoot":"","sources":["../src/FormGroup.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,OAAO,MAAM,+CAA+C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAInE,OAAO,eAAe,MAAM,4BAA4B,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAmDjC,iBAAiB;QAChB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACzB,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAc,EAAE,EAAE;YACrC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YAChC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,IAAI,OAAO;QACV,OAAO,IAAI,CAAC;IACb,CAAC;CACD,CAAA;AAzDA;IADC,QAAQ,EAAE;6CACS;AAUpB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;6CACtC;AAUpB;IAJC,IAAI,CAAC;QACL,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,IAAI;KACf,CAAC;wCACsB;AAMxB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC;wCACnC;AAGf;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC;wCACnC;AAGf;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC;wCACnC;AAGf;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC;yCAClC;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,eAAe,CAAC,MAAM,EAAE,CAAC;8CACvC;AAGnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC;4CACvC;AAjDd,SAAS;IADd,aAAa,CAAC,gBAAgB,CAAC;GAC1B,SAAS,CAiEd;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\n\nimport type FormItem from \"./FormItem.js\";\nimport type { IFormItem } from \"./Form.js\";\nimport FormItemSpacing from \"./types/FormItemSpacing.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The FormGroup (ui5-form-group) represents a group inside the Form (ui5-form) component\n * and it consists of FormItem (ui5-form-item) components.\n *\n * The layout of the FormGroup is mostly defined and controlled by the overarching Form (ui5-form) component.\n * Still, one can influence the layout via the FormGroup's `columnSpan` property,\n * that defines how many columns the group should expand to.\n *\n * ### Usage\n *\n * Тhe FormGroup (ui5-form-group) allows to split a Form into groups,\n * e.g to group FormItems that logically belong together.\n *\n * ### ES6 Module Import\n *\n * - import @ui5/webcomponents/dist/FormGroup.js\";\n *\n * @public\n * @since 2.0.0\n */\n@customElement(\"ui5-form-group\")\nclass FormGroup extends UI5Element implements IFormItem {\n\t/**\n\t * Defines header text of the component.\n\t *\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\theaderText!: string;\n\n\t/**\n\t * Defines column span of the component,\n\t * e.g how many columns the group should span to.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ validator: Integer, defaultValue: undefined })\n\tcolumnSpan?: number;\n\n\t/**\n\t * Defines the items of the component.\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\t\"default\": true,\n\t})\n\titems!: Array<FormItem>;\n\n\t/**\n\t * @private\n\t */\n\t@property({ validator: Integer, defaultValue: 1 })\n\tcolsS!: number;\n\n\t@property({ validator: Integer, defaultValue: 1 })\n\tcolsM!: number;\n\n\t@property({ validator: Integer, defaultValue: 1 })\n\tcolsL!: number;\n\n\t@property({ validator: Integer, defaultValue: 1 })\n\tcolsXl!: number;\n\n\t@property({ type: FormItemSpacing, defaultValue: FormItemSpacing.Normal })\n\titemSpacing!: `${FormItemSpacing}`;\n\n\t@property({ type: String, defaultValue: \"S12 M4 L4 XL4\" })\n\tlabelSpan!: string;\n\n\tonBeforeRendering() {\n\t\tthis.processFormItems();\n\t}\n\n\tprocessFormItems() {\n\t\tthis.items.forEach((item: FormItem) => {\n\t\t\titem.labelSpan = this.labelSpan;\n\t\t\titem.itemSpacing = this.itemSpacing;\n\t\t});\n\t}\n\n\tget isGroup() {\n\t\treturn true;\n\t}\n}\n\nFormGroup.define();\n\nexport default FormGroup;\n"]}

package/dist/FormItem.d.ts

@@ -0,0 +1,62 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { IFormItem } from "./Form.js";
+import FormItemSpacing from "./types/FormItemSpacing.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The FormItem (ui5-form-item) represents pair of a label and
+ * one or more components (text or text fields), associated to it.
+ *
+ * ### Usage
+ *
+ * The FormItem is being used in FormGroup (ui5-form-group) or directly in Form (ui5-form).
+ *
+ * ### ES6 Module Import
+ *
+ * - import @ui5/webcomponents/dist/FormItem.js";
+ *
+ * @csspart layout - Used to style the parent element of the label and content parts.
+ * @csspart label - Used to style the label part of the form item.
+ * @csspart content - Used to style the content part of the form item.
+ *
+ * @constructor
+ * @public
+ * @since 2.0.0
+ */
+declare class FormItem extends UI5Element implements IFormItem {
+    /**
+     * Defines the column span of the component,
+     * e.g how many columns the component should span to.
+     *
+     * **Note:** The column span should be a number between 1 and the available columns of the FormGroup (when items are placed in a group)
+     * or the Form. The available columns can be affected by the FormGroup#columnSpan and/or the Form#layout.
+     * A number bigger than the available columns won't take effect.
+     *
+     * @default undefined
+     * @public
+     */
+    columnSpan?: number;
+    /**
+     * Defines the label of the component.
+     * @public
+     */
+    labelContent: Array<HTMLElement>;
+    /**
+     * Defines the content of the component,
+     * associated to `labelContent`.
+     * @public
+     */
+    content: Array<HTMLElement>;
+    /**
+     * @private
+     */
+    labelSpan: string;
+    /**
+     * @private
+     */
+    itemSpacing: `${FormItemSpacing}`;
+    get isGroup(): boolean;
+}
+export default FormItem;

package/dist/FormItem.js

@@ -0,0 +1,76 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+// Template
+import FormItemTemplate from "./generated/templates/FormItemTemplate.lit.js";
+// Styles
+import FormItemCss from "./generated/themes/FormItem.css.js";
+import FormItemSpacing from "./types/FormItemSpacing.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The FormItem (ui5-form-item) represents pair of a label and
+ * one or more components (text or text fields), associated to it.
+ *
+ * ### Usage
+ *
+ * The FormItem is being used in FormGroup (ui5-form-group) or directly in Form (ui5-form).
+ *
+ * ### ES6 Module Import
+ *
+ * - import @ui5/webcomponents/dist/FormItem.js";
+ *
+ * @csspart layout - Used to style the parent element of the label and content parts.
+ * @csspart label - Used to style the label part of the form item.
+ * @csspart content - Used to style the content part of the form item.
+ *
+ * @constructor
+ * @public
+ * @since 2.0.0
+ */
+let FormItem = class FormItem extends UI5Element {
+    get isGroup() {
+        return false;
+    }
+};
+__decorate([
+    property({ validator: Integer, defaultValue: undefined })
+], FormItem.prototype, "columnSpan", void 0);
+__decorate([
+    slot()
+], FormItem.prototype, "labelContent", void 0);
+__decorate([
+    slot({
+        type: HTMLElement,
+        "default": true,
+        individualSlots: true,
+    })
+], FormItem.prototype, "content", void 0);
+__decorate([
+    property({ type: String, defaultValue: "S12 M4 L4 XL4" })
+], FormItem.prototype, "labelSpan", void 0);
+__decorate([
+    property({ type: FormItemSpacing, defaultValue: FormItemSpacing.Normal })
+], FormItem.prototype, "itemSpacing", void 0);
+FormItem = __decorate([
+    customElement({
+        tag: "ui5-form-item",
+        renderer: litRender,
+        styles: FormItemCss,
+        template: FormItemTemplate,
+    })
+], FormItem);
+FormItem.define();
+export default FormItem;
+//# sourceMappingURL=FormItem.js.map

package/dist/FormItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormItem.js","sourceRoot":"","sources":["../src/FormItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,OAAO,MAAM,+CAA+C,CAAC;AAEpE,WAAW;AACX,OAAO,gBAAgB,MAAM,+CAA+C,CAAC;AAE7E,SAAS;AACT,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAG7D,OAAO,eAAe,MAAM,4BAA4B,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAOH,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IA8ChC,IAAI,OAAO;QACV,OAAO,KAAK,CAAC;IACd,CAAC;CACD,CAAA;AApCA;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;4CACtC;AAOpB;IADC,IAAI,EAAE;8CAC2B;AAYlC;IALC,IAAI,CAAC;QACL,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,IAAI;QACf,eAAe,EAAE,IAAI;KACrB,CAAC;yCAC2B;AAM7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC;2CACvC;AAMnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,eAAe,CAAC,MAAM,EAAE,CAAC;6CACvC;AA5C9B,QAAQ;IANb,aAAa,CAAC;QACd,GAAG,EAAE,eAAe;QACpB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,WAAW;QACnB,QAAQ,EAAE,gBAAgB;KAC1B,CAAC;GACI,QAAQ,CAiDb;AAED,QAAQ,CAAC,MAAM,EAAE,CAAC;AAElB,eAAe,QAAQ,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\n\n// Template\nimport FormItemTemplate from \"./generated/templates/FormItemTemplate.lit.js\";\n\n// Styles\nimport FormItemCss from \"./generated/themes/FormItem.css.js\";\n\nimport type { IFormItem } from \"./Form.js\";\nimport FormItemSpacing from \"./types/FormItemSpacing.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The FormItem (ui5-form-item) represents pair of a label and\n * one or more components (text or text fields), associated to it.\n *\n * ### Usage\n *\n * The FormItem is being used in FormGroup (ui5-form-group) or directly in Form (ui5-form).\n *\n * ### ES6 Module Import\n *\n * - import @ui5/webcomponents/dist/FormItem.js\";\n *\n * @csspart layout - Used to style the parent element of the label and content parts.\n * @csspart label - Used to style the label part of the form item.\n * @csspart content - Used to style the content part of the form item.\n *\n * @constructor\n * @public\n * @since 2.0.0\n */\n@customElement({\n\ttag: \"ui5-form-item\",\n\trenderer: litRender,\n\tstyles: FormItemCss,\n\ttemplate: FormItemTemplate,\n})\nclass FormItem extends UI5Element implements IFormItem {\n\t/**\n\t * Defines the column span of the component,\n\t * e.g how many columns the component should span to.\n\t *\n\t * **Note:** The column span should be a number between 1 and the available columns of the FormGroup (when items are placed in a group)\n\t * or the Form. The available columns can be affected by the FormGroup#columnSpan and/or the Form#layout.\n\t * A number bigger than the available columns won't take effect.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ validator: Integer, defaultValue: undefined })\n\tcolumnSpan?: number;\n\n\t/**\n\t * Defines the label of the component.\n\t * @public\n\t */\n\t@slot()\n\tlabelContent!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the content of the component,\n\t * associated to `labelContent`.\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\t\"default\": true,\n\t\tindividualSlots: true,\n\t})\n\tcontent!: Array<HTMLElement>;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: String, defaultValue: \"S12 M4 L4 XL4\" })\n\tlabelSpan!: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: FormItemSpacing, defaultValue: FormItemSpacing.Normal })\n\titemSpacing!: `${FormItemSpacing}`;\n\n\tget isGroup() {\n\t\treturn false;\n\t}\n}\n\nFormItem.define();\n\nexport default FormItem;\n"]}

package/dist/Input.d.ts

@@ -3,6 +3,7 @@ import type { 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";
@@ -12,8 +13,6 @@ import "@ui5/webcomponents-icons/dist/information.js";
 import type SuggestionItem from "./SuggestionItem.js";
 import type { InputSuggestion, SuggestionComponent } from "./features/InputSuggestions.js";
 import type InputSuggestions from "./features/InputSuggestions.js";
-import type FormSupportT from "./features/InputElementsFormSupport.js";
-import type { IFormElement } from "./features/InputElementsFormSupport.js";
 import type SuggestionListItem from "./SuggestionListItem.js";
 import type { PopupScrollEventDetail } from "./Popup.js";
 import InputType from "./types/InputType.js";
@@ -108,7 +107,7 @@ type InputSuggestionScrollEventDetail = {
  * @extends UI5Element
  * @public
  */
-declare class Input extends UI5Element implements SuggestionComponent, IFormElement {
+declare class Input extends UI5Element implements SuggestionComponent, IFormInputElement {
     /**
      * Defines whether the component is in disabled state.
      *
@@ -195,14 +194,9 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormElem
      */
     valueState: `${ValueState}`;
     /**
-     * Determines the name with which the component will be submitted in an HTML form.
+     * Determines the name by which the component will be identified upon submission 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";`
-     *
-     * **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.
+     * **Note:** This property is only applicable within the context of an HTML Form element.
      * @default ""
      * @public
      */
@@ -246,6 +240,15 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormElem
      * @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 whether the clear icon is visible.
      * @default false
@@ -257,14 +260,7 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormElem
      * @private
      */
     focused: boolean;
-    openOnMobile: boolean;
-    open: boolean;
     valueStateOpen: boolean;
-    /**
-     * Determines whether to manually show the suggestions popover
-     * @private
-     */
-    _forceOpen: boolean;
     /**
      * Indicates whether the visual focus is on the value state header
      * @private
@@ -306,12 +302,6 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormElem
      * @public
      */
     icon: Array<IIcon>;
-    /**
-     * The slot is used for native `input` HTML element to enable form submit,
-     * when `name` property is set.
-     * @private
-     */
-    formSupport: Array<HTMLElement>;
     /**
      * 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.
@@ -342,13 +332,16 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormElem
     _keyDown?: boolean;
     _isKeyNavigation?: boolean;
     Suggestions?: InputSuggestions;
-    FormSupport?: typeof FormSupportT;
     _selectedText?: string;
     _clearIconClicked?: boolean;
     _focusedAfterClear: boolean;
     _performTextSelection?: boolean;
     _isLatestValueFromSuggestions: boolean;
     static i18nBundle: I18nBundle;
+    get formValidityMessage(): string;
+    get formValidity(): ValidityStateFlags;
+    formElementAnchor(): Promise<HTMLElement | undefined>;
+    get formFormattedValue(): FormData | string | null;
     constructor();
     onEnterDOM(): void;
     onExitDOM(): void;
@@ -398,12 +391,6 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormElem
     closeValueStatePopover(): void;
     _handleValueStatePopoverAfterClose(): void;
     _getValueStatePopover(): Popover;
-    /**
-     * Manually opens the suggestions popover, assuming suggestions are enabled. Items must be preloaded for it to open.
-     * @public
-     * @since 1.3.0
-     */
-    openPicker(): void;
     enableSuggestions(): void;
     acceptSuggestion(item: IInputSuggestionItem, keyboardUsed: boolean): void;
     /**

package/dist/Input.js

@@ -19,6 +19,7 @@ import { getFeature } 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 Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import { getAssociatedLabelForTexts, getAllAccessibleNameRefTexts, registerUI5Element, deregisterUI5Element, } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getCaretPosition, setCaretPosition } from "@ui5/webcomponents-base/dist/util/Caret.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
@@ -35,7 +36,7 @@ import "./types/PopoverHorizontalAlign.js";
 // Templates
 import InputTemplate from "./generated/templates/InputTemplate.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, INPUT_CLEAR_ICON_ACC_NAME, } 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, FORM_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import inputStyles from "./generated/themes/Input.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
@@ -97,6 +98,18 @@ var INPUT_ACTIONS;
  * @public
  */
 let Input = Input_1 = class Input extends UI5Element {
+    get formValidityMessage() {
+        return Input_1.i18nBundle.getText(FORM_TEXTFIELD_REQUIRED);
+    }
+    get formValidity() {
+        return { valueMissing: this.required && !this.value };
+    }
+    async formElementAnchor() {
+        return this.getFocusDomRefAsync();
+    }
+    get formFormattedValue() {
+        return this.value;
+    }
     constructor() {
         super();
         // Indicates if there is selected suggestionItem.
@@ -146,7 +159,6 @@ let Input = Input_1 = class Input extends UI5Element {
         }
         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;
         const isFocused = this.shadowRoot.querySelector("input") === getActiveElement();
@@ -156,20 +168,12 @@ let Input = Input_1 = class Input extends UI5Element {
         else {
             this.closeValueStatePopover();
         }
-        if (this._isPhone) {
-            this.open = this.openOnMobile;
-        }
-        else if (this._forceOpen) {
-            this.open = true;
-        }
-        else {
-            this.open = hasValue && hasItems && isFocused && this.isTyping;
+        const preventOpenPicker = this.disabled || this.readonly;
+        if (preventOpenPicker) {
+            this.open = false;
         }
-        if (this.FormSupport) {
-            this.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
+        else if (!this._isPhone) {
+            this.open = hasItems && (this.open || (hasValue && isFocused && this.isTyping));
         }
         const value = this.value;
         const innerInput = this.getInputDOMRefSync();
@@ -294,8 +298,8 @@ let Input = Input_1 = class Input extends UI5Element {
         }
         if (!suggestionItemPressed) {
             this.lastConfirmedValue = this.value;
-            if (this.FormSupport) {
-                this.FormSupport.triggerFormSubmit(this);
+            if (this._internals?.form) {
+                submitForm(this);
             }
             return;
         }
@@ -383,7 +387,6 @@ let Input = Input_1 = class Input extends UI5Element {
         }
         this.lastConfirmedValue = "";
         this.isTyping = false;
-        this._forceOpen = false;
     }
     _clearPopoverFocusAndSelection() {
         if (!this.showSuggestions || !this.Suggestions) {
@@ -397,7 +400,7 @@ let Input = Input_1 = class Input extends UI5Element {
     _click() {
         if (isPhone() && !this.readonly && this.Suggestions) {
             this.blur();
-            this.openOnMobile = true;
+            this.open = true;
         }
     }
     _handleChange() {
@@ -523,7 +526,6 @@ let Input = Input_1 = class Input extends UI5Element {
     }
     _closePicker() {
         this.open = false;
-        this.openOnMobile = false;
     }
     _afterOpenPicker() {
         // Set initial focus to the native input
@@ -539,10 +541,8 @@ let Input = Input_1 = class Input extends UI5Element {
             this.blur();
             this.focused = false;
         }
-        this.openOnMobile = false;
         this.open = false;
         this.isTyping = false;
-        this._forceOpen = false;
         if (this.hasSuggestionItemSelected) {
             this.focus();
         }
@@ -562,9 +562,11 @@ let Input = Input_1 = class Input extends UI5Element {
     }
     _handlePickerAfterOpen() {
         this.Suggestions?._onOpen();
+        this.fireEvent("open", null, false, false);
     }
     _handlePickerAfterClose() {
         this.Suggestions?._onClose();
+        this.fireEvent("close", null, false, false);
     }
     openValueStatePopover() {
         this.valueStateOpen = true;
@@ -578,17 +580,6 @@ let Input = Input_1 = class Input extends UI5Element {
     _getValueStatePopover() {
         return this.shadowRoot.querySelector("[ui5-popover]");
     }
-    /**
-     * Manually opens the suggestions popover, assuming suggestions are enabled. Items must be preloaded for it to open.
-     * @public
-     * @since 1.3.0
-     */
-    openPicker() {
-        if (!this.suggestionItems.length || this.disabled || this.readonly) {
-            return;
-        }
-        this._forceOpen = true;
-    }
     enableSuggestions() {
         if (this.Suggestions) {
             return;
@@ -622,8 +613,7 @@ let Input = Input_1 = class Input extends UI5Element {
         }
         this.valueBeforeSelectionStart = "";
         this.isTyping = false;
-        this.openOnMobile = false;
-        this._forceOpen = false;
+        this.open = false;
     }
     /**
      * Updates the input value on item select.
@@ -747,7 +737,9 @@ let Input = Input_1 = class Input extends UI5Element {
     }
     announceSelectedItem() {
         const invisibleText = this.shadowRoot.querySelector(`#selectionText`);
-        invisibleText.textContent = this.itemSelectionAnnounce;
+        if (invisibleText) {
+            invisibleText.textContent = this.itemSelectionAnnounce;
+        }
     }
     fireSelectionChange(item, targetRef, isValueFromSuggestions) {
         if (this.Suggestions) {
@@ -1035,22 +1027,16 @@ __decorate([
 ], Input.prototype, "showClearIcon", void 0);
 __decorate([
     property({ type: Boolean })
-], Input.prototype, "_effectiveShowClearIcon", void 0);
-__decorate([
-    property({ type: Boolean })
-], Input.prototype, "focused", void 0);
+], Input.prototype, "open", void 0);
 __decorate([
     property({ type: Boolean })
-], Input.prototype, "openOnMobile", void 0);
+], Input.prototype, "_effectiveShowClearIcon", void 0);
 __decorate([
     property({ type: Boolean })
-], Input.prototype, "open", void 0);
+], Input.prototype, "focused", void 0);
 __decorate([
     property({ type: Boolean })
 ], Input.prototype, "valueStateOpen", void 0);
-__decorate([
-    property({ type: Boolean })
-], Input.prototype, "_forceOpen", void 0);
 __decorate([
     property({ type: Boolean })
 ], Input.prototype, "_isValueStateFocused", void 0);
@@ -1081,9 +1067,6 @@ __decorate([
 __decorate([
     slot()
 ], Input.prototype, "icon", void 0);
-__decorate([
-    slot()
-], Input.prototype, "formSupport", void 0);
 __decorate([
     slot({
         type: HTMLElement,
@@ -1094,6 +1077,7 @@ Input = Input_1 = __decorate([
     customElement({
         tag: "ui5-input",
         languageAware: true,
+        formAssociated: true,
         renderer: litRender,
         template: InputTemplate,
         styles: [
@@ -1161,6 +1145,20 @@ Input = Input_1 = __decorate([
             scrollContainer: { type: HTMLElement },
         },
     })
+    /**
+     * Fired when the suggestions picker is open.
+     * @public
+     * @since 2.0.0
+     */
+    ,
+    event("open")
+    /**
+     * Fired when the suggestions picker is closed.
+     * @public
+     * @since 2.0.0
+     */
+    ,
+    event("close")
 ], Input);
 Input.define();
 export default Input;