@ui5/webcomponents 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/dist/MultiComboBox.d.ts

@@ -11,17 +11,29 @@ 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";
-import type { IIcon, IMultiComboBoxItem } from "./Interfaces.js";
+import type { IIcon } from "./Icon.js";
 import Popover from "./Popover.js";
 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";
+/**
+ * Interface for components that may be slotted inside a `ui5-multi-combobox` as items
+ * @public
+ */
+interface IMultiComboBoxItem extends UI5Element {
+    text: string;
+    selected: boolean;
+    isGroupItem?: boolean;
+    stableDomRef: string;
+}
 type ValueStateAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;
 type ValueStateTypeAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;
 type MultiComboBoxSelectionChangeEventDetail = {
@@ -34,55 +46,50 @@ type MultiComboboxItemWithSelection = {
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-multi-combobox</code> component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.
+ * The `ui5-multi-combobox` component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.
  *
  * The drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options.
  * The options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.
- * <h3>Structure</h3>
- * The <code>ui5-multi-combobox</code> consists of the following elements:
- * <ul>
- * <li> Tokenizer - a list of tokens with selected options.</li>
- * <li> Input field - displays the selected option/s as token/s. Users can type to filter the list.</li>
- * <li> Drop-down arrow - expands\collapses the option list.</li>
- * <li> Option list - the list of available options.</li>
- * </ul>
- * <h3>Keyboard Handling</h3>
+ * ### Structure
+ * The `ui5-multi-combobox` consists of the following elements:
  *
- * The <code>ui5-multi-combobox</code> provides advanced keyboard handling.
+ * -  Tokenizer - a list of tokens with selected options.
+ * -  Input field - displays the selected option/s as token/s. Users can type to filter the list.
+ * -  Drop-down arrow - expands\collapses the option list.
+ * -  Option list - the list of available options.
  *
- * <h4>Picker</h4>
- * If the <code>ui5-multi-combobox</code> is focused,
- * you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys.
- * Once the drop-down is opened, you can use the <code>UP</code> and <code>DOWN</code> arrow keys
- * to navigate through the available options and select one by pressing the <code>Space</code> or <code>Enter</code> keys.
- * <br>
+ * ### Keyboard Handling
  *
- * <h4>Tokens</h4>
- * <ul>
- * <li> Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available). </li>
- * <li> Delete -  deletes the token and focuses the previous token. </li>
- * <li> Backspace -  deletes the token and focus the next token. </li>
- * </ul>
+ * The `ui5-multi-combobox` provides advanced keyboard handling.
  *
- * <h3>ES6 Module Import</h3>
+ * #### Picker
+ * If the `ui5-multi-combobox` is focused,
+ * you can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.
+ * Once the drop-down is opened, you can use the `UP` and `DOWN` arrow keys
+ * to navigate through the available options and select one by pressing the `Space` or `Enter` keys.
  *
- * <code>import "@ui5/webcomponents/dist/MultiComboBox";</code>
+ * #### Tokens
  *
+ * -  Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available).
+ * -  Delete -  deletes the token and focuses the previous token.
+ * -  Backspace -  deletes the token and focus the next token.
  *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/MultiComboBox.js";`
  * @constructor
  * @extends UI5Element
  * @public
  * @since 0.11.0
- * @csspart token-{index} - Used to style each token(where <code>token-0</code> corresponds to the first item)
+ * @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.
-     * <br><br>
-     * <b>Note:</b> The property is updated upon typing.
      *
+     * **Note:** The property is updated upon typing.
      * @default ""
      * @formEvents change input
      * @formProperty
@@ -90,8 +97,18 @@ declare class MultiComboBox extends UI5Element {
      */
     value: string;
     /**
-     * Defines whether the value will be autcompleted to match an item
+     * 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
      * @public
      * @since 1.4.0
@@ -100,49 +117,41 @@ declare class MultiComboBox extends UI5Element {
     /**
      * Defines a short hint intended to aid the user with data entry when the
      * component has no value.
-     *
      * @default ""
      * @public
      */
     placeholder: string;
     /**
      * Defines if the user input will be prevented, if no matching item has been found
-     *
      * @default false
      * @public
      */
-    allowCustomValues: boolean;
+    noValidation: boolean;
     /**
      * Defines whether the component is in disabled state.
-     * <br><br>
-     * <b>Note:</b> A disabled component is completely noninteractive.
      *
+     * **Note:** A disabled component is completely noninteractive.
      * @default false
      * @public
      */
     disabled: boolean;
     /**
      * Defines the value state of the component.
-     * <br><br>
-     * Available options are:
-     *
      * @default "None"
      * @public
      */
     valueState: `${ValueState}`;
     /**
      * Defines whether the component is read-only.
-     * <br><br>
-     * <b>Note:</b> A read-only component is not editable,
-     * but still provides visual feedback upon user interaction.
      *
+     * **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.5
@@ -150,15 +159,19 @@ declare class MultiComboBox extends UI5Element {
     required: boolean;
     /**
      * Defines the filter type of the component.
-     * Available options are: <code>StartsWithPerTerm</code>, <code>StartsWith</code>, <code>Contains</code> and <code>None</code>.
-     *
      * @default "StartsWithPerTerm"
      * @public
      */
     filter: `${ComboBoxFilter}`;
+    /**
+     * Defines whether the clear icon of the multi-combobox will be shown.
+     * @default false
+     * @public
+     * @since 1.20.1
+     */
+    showClearIcon: boolean;
     /**
      * Defines the accessible ARIA name of the component.
-     *
      * @default ""
      * @public
      * @since 1.4.0
@@ -166,20 +179,25 @@ declare class MultiComboBox extends UI5Element {
     accessibleName: string;
     /**
      * Receives id(or many ids) of the elements that label the component.
-     *
      * @default ""
      * @public
      * @since 1.4.0
      */
     accessibleNameRef: string;
+    /**
+     * Determines if the select all checkbox is visible on top of suggestions.
+     * @default false
+     * @public
+     */
+    showSelectAll: boolean;
     _effectiveValueState: `${ValueState}`;
     /**
      * Indicates whether the dropdown is open. True if the dropdown is open, false otherwise.
-     *
      * @default false
      * @private
      */
     _open: boolean;
+    _valueBeforeOpen: string;
     _filteredItems: Array<IMultiComboBoxItem>;
     _previouslySelectedItems: Array<IMultiComboBoxItem>;
     filterSelected: boolean;
@@ -189,6 +207,9 @@ declare class MultiComboBox extends UI5Element {
     _inputWidth: number;
     _listWidth: number;
     _performingSelectionTwice: boolean;
+    _allSelected: boolean;
+    _effectiveShowClearIcon: boolean;
+    _dialogInputValueState: `${ValueState}`;
     /**
      * Indicates whether the tokenizer has tokens
      * @private
@@ -196,33 +217,29 @@ declare class MultiComboBox extends UI5Element {
     tokenizerAvailable: boolean;
     /**
      * Defines the component items.
-     *
      * @public
      */
     items: Array<IMultiComboBoxItem>;
     /**
     * Defines the icon to be displayed in the component.
-    *
     * @public
     * @since 1.0.0-rc.9
     */
     icon: Array<IIcon>;
     /**
      * Defines the value state message that will be displayed as pop up under the component.
-     * <br><br>
+     * The value state message slot should contain only one root element.
      *
-     * <b>Note:</b> If not specified, a default text (in the respective language) will be displayed.
-     * <br>
-     * <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
-     * when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
+     * **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`, `Warning` or `Error` value state.
      * @since 1.0.0-rc.9
      * @public
      */
     valueStateMessage: Array<HTMLElement>;
     selectedValues: Array<IMultiComboBoxItem>;
     _inputLastValue: string;
-    _valueBeforeOpen: string;
     _deleting: boolean;
     _validationTimeout: Timeout | null;
     _handleResizeBound: ResizeObserverCallback;
@@ -231,7 +248,7 @@ declare class MultiComboBox extends UI5Element {
     _lastValue: string;
     _shouldFilterItems?: boolean;
     _showMorePressed?: boolean;
-    allItemsPopover?: ResponsivePopover;
+    _clearingValue?: boolean;
     valueStateHeader?: HTMLElement;
     list?: List;
     _shouldAutocomplete?: boolean;
@@ -239,21 +256,25 @@ declare class MultiComboBox extends UI5Element {
     _isOpenedByKeyboard?: boolean;
     _itemToFocus?: IMultiComboBoxItem;
     _itemsBeforeOpen: Array<MultiComboboxItemWithSelection>;
-    selectedItems?: Array<IMultiComboBoxItem>;
-    FormSupport?: typeof FormSupportT;
+    selectedItems: Array<IMultiComboBoxItem>;
     static i18nBundle: I18nBundle;
+    get formValidityMessage(): string;
+    get formValidity(): ValidityStateFlags;
+    formElementAnchor(): Promise<HTMLElement | undefined>;
+    get formFormattedValue(): FormData | string | null;
     constructor();
     onEnterDOM(): void;
     onExitDOM(): void;
     _handleResize(): void;
+    _handleMobileInput(e: CustomEvent<InputEventDetail>): void;
     _inputChange(): void;
-    togglePopover(): void;
+    _mobileInputChange(e: CustomEvent): void;
+    _togglePopover(): void;
     togglePopoverByDropdownIcon(): void;
     _showFilteredItems(): void;
     filterSelectedItems(e: MouseEvent): void;
     /**
      * Indicates whether the dropdown is open. True if the dropdown is open, false otherwise.
-     *
      * @default false
      * @public
      */
@@ -267,9 +288,10 @@ declare class MultiComboBox extends UI5Element {
     _tokenizerFocusOut(e: FocusEvent): void;
     _tokenizerFocusIn(): void;
     _onkeydown(e: KeyboardEvent): void;
+    _selectItems(matchingItems: IMultiComboBoxItem[]): void;
     _handlePaste(e: ClipboardEvent): void;
-    _handleInsertPaste(): Promise<void>;
-    _createTokenFromText(pastedText: string): void;
+    _handleTokenCreationUponPaste(pastedText: string, e: KeyboardEvent | ClipboardEvent): void;
+    _handleInsertPaste(e: KeyboardEvent): Promise<void>;
     _handleShow(e: KeyboardEvent): void;
     _handlePageUp(e: KeyboardEvent): void;
     _handlePageDown(e: KeyboardEvent): void;
@@ -279,12 +301,13 @@ declare class MultiComboBox extends UI5Element {
     _handleEnd(e: KeyboardEvent): void;
     _handleTab(): void;
     _handleSelectAll(): void;
-    _onValueStateKeydown(e: KeyboardEvent): void;
-    _onItemKeydown(e: KeyboardEvent): Promise<void>;
+    _onListHeaderKeydown(e: KeyboardEvent): Promise<void>;
+    _handleSelectAllCheckboxClick(e: CustomEvent): void;
+    _onItemKeydown(e: KeyboardEvent): void;
     _handleArrowCtrl(e: KeyboardEvent): void;
     _onItemTab(): void;
-    _handleArrowNavigation(e: KeyboardEvent, isDownControl: boolean): Promise<void>;
-    _handleArrowDown(): void;
+    _handleArrowNavigation(e: KeyboardEvent, isDownControl: boolean): void;
+    _handleArrowDown(): Promise<void>;
     _handleItemRangeSelection(e: KeyboardEvent): void;
     _navigateToNextItem(): void;
     _navigateToPrevItem(): void;
@@ -294,7 +317,6 @@ declare class MultiComboBox extends UI5Element {
     _filterItems(str: string): IMultiComboBoxItem[];
     /**
      * Returns true if the group header should be shown (if there is a filtered suggestion item for this group item)
-     *
      * @private
      */
     static _groupItemFilter(item: IMultiComboBoxItem, idx: number, allItems: Array<IMultiComboBoxItem>, filteredItems: Array<IMultiComboBoxItem>): boolean | undefined;
@@ -304,10 +326,10 @@ declare class MultiComboBox extends UI5Element {
     _listSelectionChange(e: CustomEvent<ListSelectionChangeEventDetail>): void;
     syncItems(listItems: Array<ListItemBase>): void;
     fireSelectionChange(): boolean;
-    _getRespPopover(): Promise<void>;
+    _getRespPopover(): ResponsivePopover;
     _getList(): Promise<List>;
     _click(): void;
-    handleBeforeTokenizerPopoverOpen(): Promise<void>;
+    handleBeforeTokenizerPopoverOpen(): void;
     _afterClosePicker(): void;
     _beforeOpen(): void;
     _handleTypeAhead(item: IMultiComboBoxItem, filterValue: string): void;
@@ -318,23 +340,25 @@ declare class MultiComboBox extends UI5Element {
     onAfterRendering(): Promise<void>;
     get _isPhone(): boolean;
     _onIconMousedown(): void;
+    _clear(): void;
+    _iconMouseDown(): void;
     storeResponsivePopoverWidth(): void;
     toggle(isToggled: boolean): void;
     handleCancel(): void;
     handleOK(): void;
-    openPopover(): Promise<void>;
+    openPopover(): void;
     _forwardFocusToInner(): void;
     get morePopoverOpener(): HTMLElement;
-    closePopover(): Promise<void>;
-    _getPopover(): Promise<Popover>;
-    _getResponsivePopover(): Promise<ResponsivePopover>;
-    _setValueStateHeader(): Promise<void>;
+    closePopover(): void;
+    _getPopover(): Popover;
+    _getResponsivePopover(): ResponsivePopover;
+    _setValueStateHeader(): void;
     get _tokenizer(): Tokenizer;
     inputFocusIn(e: FocusEvent): void;
     inputFocusOut(e: FocusEvent): void;
     get editable(): boolean;
     get _isFocusInside(): boolean;
-    get selectedItemsListMode(): "None" | "MultiSelect";
+    get selectedItemsListMode(): "None" | "Multiple";
     get _listItemsType(): "Inactive" | "Active";
     get hasValueState(): boolean;
     get hasValueStateMessage(): boolean;
@@ -358,10 +382,13 @@ declare class MultiComboBox extends UI5Element {
     get _innerInput(): HTMLInputElement;
     get _headerTitleText(): string;
     get _iconAccessibleNameText(): string;
+    get _showSelectedButtonAccessibleNameText(): string;
     get _dialogOkButton(): string;
     get _tokenizerExpanded(): boolean;
-    get _valueStatePopoverHorizontalAlign(): "Left" | "Right";
+    get _valueStatePopoverHorizontalAlign(): `${PopoverHorizontalAlign}`;
     get iconsCount(): number;
+    get clearIconAccessibleName(): string;
+    get selectAllCheckboxLabel(): string;
     get classes(): ClassMap;
     get styles(): {
         popoverValueStateMessage: {