@ui5/webcomponents 0.0.0-7c7170d4a → 0.0.0-7d8c57f70

package/dist/ComboBox.js

@@ -6,7 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var ComboBox_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
@@ -27,12 +26,13 @@ import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/information.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
+import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { isBackSpace, isDelete, isShow, isUp, isDown, isEnter, isEscape, isTabNext, isTabPrevious, isPageUp, isPageDown, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
 import * as Filters from "./Filters.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, LIST_ITEM_POSITION, LIST_ITEM_GROUP_HEADER, INPUT_CLEAR_ICON_ACC_NAME, FORM_TEXTFIELD_REQUIRED, } 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, LIST_ITEM_POSITION, LIST_ITEM_GROUP_HEADER, INPUT_CLEAR_ICON_ACC_NAME, } from "./generated/i18n/i18n-defaults.js";
 // Templates
 import ComboBoxTemplate from "./generated/templates/ComboBoxTemplate.lit.js";
+import ComboBoxPopoverTemplate from "./generated/templates/ComboBoxPopoverTemplate.lit.js";
 // Styles
 import ComboBoxCss from "./generated/themes/ComboBox.css.js";
 import ComboBoxPopoverCss from "./generated/themes/ComboBoxPopover.css.js";
@@ -48,7 +48,7 @@ import BusyIndicator from "./BusyIndicator.js";
 import Button from "./Button.js";
 import StandardListItem from "./StandardListItem.js";
 import ComboBoxGroupItem from "./ComboBoxGroupItem.js";
-import ListItemGroupHeader from "./ListItemGroupHeader.js";
+import GroupHeaderListItem from "./GroupHeaderListItem.js";
 import ComboBoxFilter from "./types/ComboBoxFilter.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import Input from "./Input.js";
@@ -56,9 +56,9 @@ import SuggestionItem from "./SuggestionItem.js";
 const SKIP_ITEMS_SIZE = 10;
 var ValueStateIconMapping;
 (function (ValueStateIconMapping) {
-    ValueStateIconMapping["Negative"] = "error";
-    ValueStateIconMapping["Critical"] = "alert";
-    ValueStateIconMapping["Positive"] = "sys-enter-2";
+    ValueStateIconMapping["Error"] = "error";
+    ValueStateIconMapping["Warning"] = "alert";
+    ValueStateIconMapping["Success"] = "sys-enter-2";
     ValueStateIconMapping["Information"] = "information";
 })(ValueStateIconMapping || (ValueStateIconMapping = {}));
 /**
@@ -100,18 +100,6 @@ var ValueStateIconMapping;
  * @since 1.0.0-rc.6
  */
 let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
-    get formValidityMessage() {
-        return ComboBox_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();
         this._filteredItems = [];
@@ -127,6 +115,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     }
     async onBeforeRendering() {
         const popover = this.valueStatePopover;
+        this.FormSupport = getFeature("FormSupport");
         this._effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
         if (this._initialRendering || this.filter === "None") {
             this._filteredItems = this.items;
@@ -135,8 +124,8 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             const items = this._filterItems(this.filterValue);
             this._filteredItems = items.length ? items : this.items;
         }
-        if (!this._initialRendering && document.activeElement === this && !this._filteredItems.length && popover) {
-            popover.open = false;
+        if (!this._initialRendering && document.activeElement === this && !this._filteredItems.length) {
+            popover?.close();
         }
         this._selectMatchingItem();
         this._initialRendering = false;
@@ -155,8 +144,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     async onAfterRendering() {
         const picker = await this._getPicker();
         if ((await this.shouldClosePopover()) && !isPhone()) {
-            picker.preventFocusRestore = true;
-            picker.open = false;
+            picker.close(false, false, true);
             this._clearFocus();
             this._itemFocused = false;
         }
@@ -169,7 +157,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     }
     async shouldClosePopover() {
         const popover = await this._getPicker();
-        return popover.open && !this.focused && !this._itemFocused && !this._isValueStateFocused;
+        return popover.opened && !this.focused && !this._itemFocused && !this._isValueStateFocused;
     }
     _focusin(e) {
         this.focused = true;
@@ -189,8 +177,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             e.stopImmediatePropagation();
             return;
         }
-        const popover = this.shadowRoot.querySelector("[ui5-responsive-popover]");
-        if (!(this.getDomRef().contains(toBeFocused)) && (popover !== e.relatedTarget)) {
+        if (!(this.shadowRoot.contains(toBeFocused)) && (this.staticAreaItem !== e.relatedTarget)) {
             this.focused = false;
             !isPhone() && this._closeRespPopover(e);
         }
@@ -214,7 +201,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     }
     async _toggleRespPopover() {
         const picker = await this._getPicker();
-        if (picker.open) {
+        if (picker.opened) {
             this._closeRespPopover();
         }
         else {
@@ -235,21 +222,14 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         }
     }
     async openValueStatePopover() {
-        const valueStatePopover = await this._getValueStatePopover();
-        if (valueStatePopover) {
-            valueStatePopover.opener = this;
-            valueStatePopover.open = true;
-        }
+        (await this._getValueStatePopover())?.showAt(this);
     }
     async closeValueStatePopover() {
-        const valueStatePopover = await this._getValueStatePopover();
-        if (valueStatePopover) {
-            valueStatePopover.open = false;
-        }
+        (await this._getValueStatePopover())?.close();
     }
     async _getValueStatePopover() {
-        await renderFinished();
-        const popover = this.shadowRoot.querySelector(".ui5-valuestatemessage-popover");
+        const staticAreaItem = await this.getStaticAreaItemDomRef();
+        const popover = staticAreaItem.querySelector(".ui5-valuestatemessage-popover");
         // backward compatibility
         // rework all methods to work with async getters
         this.valueStatePopover = popover;
@@ -398,6 +378,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             });
         }
         this.fireEvent("input");
+        this._fireChangeEvent();
     }
     _handleArrowDown(e, indexOfItem) {
         const isOpen = this.open;
@@ -484,13 +465,13 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
                 return item.focused;
             });
             this._fireChangeEvent();
-            if (picker?.open && !focusedItem?.isGroupItem) {
+            if (picker?.opened && !focusedItem?.isGroupItem) {
                 this._closeRespPopover();
                 this.focused = true;
                 this.inner.setSelectionRange(this.value.length, this.value.length);
             }
-            else if (this._internals?.form) {
-                submitForm(this);
+            else if (this.FormSupport) {
+                this.FormSupport.triggerFormSubmit(this);
             }
         }
         if (isEscape(e)) {
@@ -542,15 +523,10 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         }
         this._isValueStateFocused = false;
         this._clearFocus();
-        if (picker) {
-            picker.preventFocusRestore = false;
-            picker.open = false;
-        }
+        picker?.close();
     }
     async _openRespPopover() {
-        const picker = await this._getPicker();
-        picker.opener = this;
-        picker.open = true;
+        (await this._getPicker()).showAt(this, true);
     }
     _filterItems(str) {
         const itemsToFilter = this.items.filter(item => !item.isGroupItem);
@@ -700,8 +676,8 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         return isPhone() ? this.responsivePopover.querySelector("[ui5-input]").shadowRoot.querySelector("input") : this.shadowRoot.querySelector("[inner-input]");
     }
     async _getPicker() {
-        await renderFinished();
-        const picker = this.shadowRoot.querySelector("[ui5-responsive-popover]");
+        const staticAreaItem = await this.getStaticAreaItemDomRef();
+        const picker = staticAreaItem.querySelector("[ui5-responsive-popover]");
         // backward compatibility
         // rework all methods to work with async getters
         this.responsivePopover = picker;
@@ -711,7 +687,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         return this.valueState !== ValueState.None;
     }
     get hasValueStateText() {
-        return this.hasValueState && this.valueState !== ValueState.Positive;
+        return this.hasValueState && this.valueState !== ValueState.Success;
     }
     get ariaValueStateHiddenText() {
         if (!this.hasValueState) {
@@ -737,18 +713,18 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
     }
     get valueStateTextMappings() {
         return {
-            [ValueState.Positive]: ComboBox_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
-            [ValueState.Negative]: ComboBox_1.i18nBundle.getText(VALUE_STATE_ERROR),
-            [ValueState.Critical]: ComboBox_1.i18nBundle.getText(VALUE_STATE_WARNING),
+            [ValueState.Success]: ComboBox_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
+            [ValueState.Error]: ComboBox_1.i18nBundle.getText(VALUE_STATE_ERROR),
+            [ValueState.Warning]: ComboBox_1.i18nBundle.getText(VALUE_STATE_WARNING),
             [ValueState.Information]: ComboBox_1.i18nBundle.getText(VALUE_STATE_INFORMATION),
         };
     }
     get valueStateTypeMappings() {
         return {
-            [ValueState.Positive]: ComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+            [ValueState.Success]: ComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
             [ValueState.Information]: ComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
-            [ValueState.Negative]: ComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
-            [ValueState.Critical]: ComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+            [ValueState.Error]: ComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+            [ValueState.Warning]: ComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
         };
     }
     get shouldOpenValueStateMessagePopover() {
@@ -759,7 +735,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         return !this.valueStateMessage.length && this.hasValueStateText;
     }
     get _valueStatePopoverHorizontalAlign() {
-        return this.effectiveDir !== "rtl" ? PopoverHorizontalAlign.Start : PopoverHorizontalAlign.End;
+        return this.effectiveDir !== "rtl" ? PopoverHorizontalAlign.Left : PopoverHorizontalAlign.Right;
     }
     /**
      * This method is relevant for sap_horizon theme only
@@ -768,7 +744,7 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
         return this.valueState !== ValueState.None ? ValueStateIconMapping[this.valueState] : "";
     }
     get open() {
-        return this?.responsivePopover?.open || false;
+        return this?.responsivePopover?.opened || false;
     }
     get _isPhone() {
         return isPhone();
@@ -799,7 +775,6 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
                 "min-width": `${this.offsetWidth || 0}px`,
                 "max-width": (this.offsetWidth / remSizeInPx) > 40 ? `${this.offsetWidth}px` : "40rem",
             },
-            popoverValueStateMessage: {},
         };
     }
     get classes() {
@@ -812,9 +787,9 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
             popoverValueState: {
                 "ui5-valuestatemessage-header": true,
                 "ui5-valuestatemessage-root": true,
-                "ui5-valuestatemessage--success": this.valueState === ValueState.Positive,
-                "ui5-valuestatemessage--error": this.valueState === ValueState.Negative,
-                "ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
+                "ui5-valuestatemessage--success": this.valueState === ValueState.Success,
+                "ui5-valuestatemessage--error": this.valueState === ValueState.Error,
+                "ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
                 "ui5-valuestatemessage--information": this.valueState === ValueState.Information,
             },
         };
@@ -823,9 +798,6 @@ let ComboBox = ComboBox_1 = class ComboBox extends UI5Element {
 __decorate([
     property()
 ], ComboBox.prototype, "value", void 0);
-__decorate([
-    property()
-], ComboBox.prototype, "name", void 0);
 __decorate([
     property({ type: Boolean })
 ], ComboBox.prototype, "noTypeahead", void 0);
@@ -893,16 +865,16 @@ ComboBox = ComboBox_1 = __decorate([
     customElement({
         tag: "ui5-combobox",
         languageAware: true,
-        formAssociated: true,
         renderer: litRender,
-        styles: [
-            ComboBoxCss,
+        styles: ComboBoxCss,
+        staticAreaStyles: [
             ResponsivePopoverCommonCss,
             ValueStateMessageCss,
             ComboBoxPopoverCss,
             SuggestionsCss,
         ],
         template: ComboBoxTemplate,
+        staticAreaTemplate: ComboBoxPopoverTemplate,
         dependencies: [
             ComboBoxItem,
             Icon,
@@ -911,7 +883,7 @@ ComboBox = ComboBox_1 = __decorate([
             BusyIndicator,
             Button,
             StandardListItem,
-            ListItemGroupHeader,
+            GroupHeaderListItem,
             Popover,
             ComboBoxGroupItem,
             Input,