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

package/dist/MultiComboBox.d.ts

@@ -11,6 +11,7 @@ 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 { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import MultiComboBoxItem from "./MultiComboBoxItem.js";
 import Tokenizer from "./Tokenizer.js";
 import type { TokenizerTokenDeleteEventDetail } from "./Tokenizer.js";
@@ -20,7 +21,6 @@ import ResponsivePopover from "./ResponsivePopover.js";
 import List from "./List.js";
 import type { ListSelectionChangeEventDetail } from "./List.js";
 import ComboBoxFilter from "./types/ComboBoxFilter.js";
-import type FormSupportT from "./features/InputElementsFormSupport.js";
 import type ListItemBase from "./ListItemBase.js";
 import { InputEventDetail } from "./Input.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
@@ -85,7 +85,7 @@ type MultiComboboxItemWithSelection = {
  * @since 0.11.0
  * @csspart token-\{index\} - Used to style each token(where `token-0` corresponds to the first item)
  */
-declare class MultiComboBox extends UI5Element {
+declare class MultiComboBox extends UI5Element implements IFormInputElement {
     /**
      * Defines the value of the component.
      *
@@ -96,6 +96,17 @@ declare class MultiComboBox extends UI5Element {
      * @public
      */
     value: string;
+    /**
+     * 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.
+     * **Note:** When the component is used inside a form element,
+     * the value is sent as the first element in the form data, even if it's empty.
+     * @default ""
+     * @public
+     * @since 2.0.0
+     */
+    name: string;
     /**
      * Defines whether the value will be autcompleted to match an item
      * @default false
@@ -246,8 +257,11 @@ declare class MultiComboBox extends UI5Element {
     _itemToFocus?: IMultiComboBoxItem;
     _itemsBeforeOpen: Array<MultiComboboxItemWithSelection>;
     selectedItems: Array<IMultiComboBoxItem>;
-    FormSupport?: typeof FormSupportT;
     static i18nBundle: I18nBundle;
+    get formValidityMessage(): string;
+    get formValidity(): ValidityStateFlags;
+    formElementAnchor(): Promise<HTMLElement | undefined>;
+    get formFormattedValue(): FormData | string | null;
     constructor();
     onEnterDOM(): void;
     onExitDOM(): void;

package/dist/MultiComboBox.js

@@ -26,13 +26,13 @@ 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 { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
+import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import MultiComboBoxItem, { isInstanceOfMultiComboBoxItem } from "./MultiComboBoxItem.js";
 import MultiComboBoxGroupItem from "./MultiComboBoxGroupItem.js";
 import ListItemGroupHeader from "./ListItemGroupHeader.js";
-import Tokenizer from "./Tokenizer.js";
+import Tokenizer, { getTokensCountText } from "./Tokenizer.js";
 import Token from "./Token.js";
 import Icon from "./Icon.js";
 import Popover from "./Popover.js";
@@ -42,7 +42,7 @@ import StandardListItem from "./StandardListItem.js";
 import ToggleButton from "./ToggleButton.js";
 import * as Filters from "./Filters.js";
 import Button from "./Button.js";
-import { VALUE_STATE_SUCCESS, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_INFORMATION, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS_TITLE, SELECT_OPTIONS, SHOW_SELECTED_BUTTON, MULTICOMBOBOX_DIALOG_OK_BUTTON, VALUE_STATE_ERROR_ALREADY_SELECTED, MCB_SELECTED_ITEMS, INPUT_CLEAR_ICON_ACC_NAME, } from "./generated/i18n/i18n-defaults.js";
+import { VALUE_STATE_SUCCESS, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_INFORMATION, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS_TITLE, SELECT_OPTIONS, SHOW_SELECTED_BUTTON, MULTICOMBOBOX_DIALOG_OK_BUTTON, VALUE_STATE_ERROR_ALREADY_SELECTED, MCB_SELECTED_ITEMS, INPUT_CLEAR_ICON_ACC_NAME, FORM_MIXED_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
 // Templates
 import MultiComboBoxTemplate from "./generated/templates/MultiComboBoxTemplate.lit.js";
 // Styles
@@ -53,8 +53,9 @@ import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 import MultiComboBoxPopover from "./generated/themes/MultiComboBoxPopover.css.js";
 import ComboBoxFilter from "./types/ComboBoxFilter.js";
 import CheckBox from "./CheckBox.js";
-import "./Input.js";
+import Input from "./Input.js";
 import "./types/PopoverHorizontalAlign.js";
+import SuggestionItem from "./SuggestionItem.js";
 /**
  * @class
  *
@@ -98,6 +99,28 @@ import "./types/PopoverHorizontalAlign.js";
  * @csspart token-\{index\} - Used to style each token(where `token-0` corresponds to the first item)
  */
 let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
+    get formValidityMessage() {
+        return MultiComboBox_1.i18nBundle.getText(FORM_MIXED_TEXTFIELD_REQUIRED);
+    }
+    get formValidity() {
+        const selectedItems = (this.items || []).filter(item => item.selected);
+        return { valueMissing: this.required && !this.value && !selectedItems.length };
+    }
+    async formElementAnchor() {
+        return this.getFocusDomRefAsync();
+    }
+    get formFormattedValue() {
+        const selectedItems = (this.items || []).filter(item => item.selected);
+        if (selectedItems.length) {
+            const formData = new FormData();
+            formData.append(this.name, this.value);
+            for (let i = 0; i < selectedItems.length; i++) {
+                formData.append(this.name, selectedItems[i].text);
+            }
+            return formData;
+        }
+        return this.value;
+    }
     constructor() {
         super();
         this._filteredItems = [];
@@ -112,7 +135,6 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this.valueBeforeAutoComplete = "";
         this._lastValue = this.getAttribute("value") || "";
         this.currentItemIdx = -1;
-        this.FormSupport = undefined;
     }
     onEnterDOM() {
         ResizeHandler.register(this, this._handleResizeBound);
@@ -157,7 +179,8 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         const changePrevented = this.fireSelectionChange();
         if (!changePrevented) {
             matchingItem.selected = !initiallySelected;
-            this._getResponsivePopover().close();
+            this._getResponsivePopover().preventFocusRestore = false;
+            this._getResponsivePopover().open = false;
             this.value = "";
         }
     }
@@ -228,19 +251,22 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._filteredItems = filteredItems;
         if (!isPhone()) {
             if (filteredItems.length === 0) {
-                this._getRespPopover().close();
+                this._getRespPopover().open = false;
             }
             else {
-                this._getRespPopover().showAt(this);
+                this._getRespPopover().opener = this;
+                this._getRespPopover().open = true;
             }
         }
         this.fireEvent("input");
     }
     _tokenDelete(e) {
         this._previouslySelectedItems = this._getSelectedItems();
-        const token = e.detail.ref;
-        const deletingItem = this.items.find(item => item._id === token.getAttribute("data-ui5-id"));
-        deletingItem.selected = false;
+        const token = e.detail.tokens;
+        const deletingItems = this.items.filter(item => token.some(t => t.getAttribute("data-ui5-id") === item._id));
+        deletingItems.forEach(item => {
+            item.selected = false;
+        });
         this._deleting = true;
         this._preventTokenizerToggle = true;
         this.focus();
@@ -288,7 +314,6 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     _tokenizerFocusIn() {
         this._tokenizerFocused = true;
         this.focused = false;
-        this._tokenizer.scrollToEnd();
     }
     _onkeydown(e) {
         const isArrowDownCtrl = isDownCtrl(e);
@@ -446,7 +471,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
     }
     _handleTab() {
-        this._getRespPopover().close();
+        this._getRespPopover().open = false;
     }
     _handleSelectAll() {
         const filteredItems = this._filteredItems;
@@ -567,7 +592,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     _onItemTab() {
         this._inputDom.focus();
-        this._getRespPopover().close();
+        this._getRespPopover().open = false;
     }
     _handleArrowNavigation(e, isDownControl) {
         const isArrowDown = isDownControl || isDown(e);
@@ -684,8 +709,8 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         const matchingItem = this.items.find(item => (item.text.toLowerCase() === lowerCaseValue && !item.isGroupItem));
         const oldValueState = this.valueState;
         const innerInput = this._innerInput;
-        if (this.FormSupport) {
-            this.FormSupport.triggerFormSubmit(this);
+        if (this._internals?.form) {
+            submitForm(this);
         }
         if (matchingItem) {
             if (matchingItem.selected) {
@@ -708,7 +733,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
                 }
             }
             innerInput.setSelectionRange(matchingItem.text.length, matchingItem.text.length);
-            this._getRespPopover().close();
+            this._getRespPopover().open = false;
         }
     }
     _resetValueState(valueState, callback) {
@@ -807,7 +832,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this.filterSelected = false;
         }
         if (!e.detail.selectionComponentPressed && !isSpace(castedEvent) && !isSpaceCtrl(castedEvent)) {
-            this._getRespPopover().close();
+            this._getRespPopover().open = false;
             this.value = "";
             // if the item (not checkbox) is clicked, call the selection change
             if (isPhone()) {
@@ -848,7 +873,8 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     _click() {
         if (isPhone() && !this.readonly && !this._showMorePressed && !this._deleting) {
-            this._getRespPopover().showAt(this);
+            this._getRespPopover().opener = this;
+            this._getRespPopover().open = true;
         }
         this._showMorePressed = false;
     }
@@ -856,8 +882,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         const tokens = this._tokenizer.tokens;
         const hasTruncatedToken = tokens.length === 1 && tokens[0].isTruncatable;
         const popover = this._getResponsivePopover();
-        if (hasTruncatedToken) {
-            popover?.close(false, false, true);
+        if (hasTruncatedToken && popover) {
+            popover.preventFocusRestore = true;
+            popover.open = false;
         }
     }
     _afterClosePicker() {
@@ -927,7 +954,6 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             });
         }
         this._effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
-        this.FormSupport = getFeature("FormSupport");
         this._inputLastValue = value;
         if (input && !input.value) {
             this.valueBeforeAutoComplete = "";
@@ -1024,7 +1050,11 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._togglePopover();
     }
     openPopover() {
-        this._getPopover()?.showAt(this);
+        const popover = this._getPopover();
+        if (popover) {
+            popover.opener = this;
+            popover.open = true;
+        }
     }
     _forwardFocusToInner() {
         this._innerInput.focus();
@@ -1037,7 +1067,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         return this;
     }
     closePopover() {
-        this._getPopover()?.close();
+        if (this._getPopover()) {
+            this._getPopover().open = false;
+        }
     }
     _getPopover() {
         return this.shadowRoot.querySelector("[ui5-popover]");
@@ -1156,7 +1188,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (!this._tokenizer) {
             return;
         }
-        return this._tokenizer._tokensCountText();
+        return getTokensCountText(this._tokenizer.tokens.length);
     }
     get _tokensCountTextId() {
         return "ui5-multi-combobox-hiddenText-nMore";
@@ -1278,6 +1310,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
 __decorate([
     property()
 ], MultiComboBox.prototype, "value", void 0);
+__decorate([
+    property()
+], MultiComboBox.prototype, "name", void 0);
 __decorate([
     property({ type: Boolean })
 ], MultiComboBox.prototype, "noTypeahead", void 0);
@@ -1375,6 +1410,7 @@ MultiComboBox = MultiComboBox_1 = __decorate([
     customElement({
         tag: "ui5-multi-combobox",
         languageAware: true,
+        formAssociated: true,
         renderer: litRender,
         template: MultiComboBoxTemplate,
         styles: [
@@ -1390,6 +1426,7 @@ MultiComboBox = MultiComboBox_1 = __decorate([
             Tokenizer,
             Token,
             Icon,
+            Input,
             ResponsivePopover,
             Popover,
             List,
@@ -1398,6 +1435,7 @@ MultiComboBox = MultiComboBox_1 = __decorate([
             ToggleButton,
             Button,
             CheckBox,
+            SuggestionItem,
         ],
     })
     /**