@ui5/webcomponents 0.0.0-dcd8e5389 → 0.0.0-ddc5fe31b

package/dist/Select.js

@@ -11,7 +11,9 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import connectToComponent from "@ui5/webcomponents-base/dist/connectToComponent.js";
 import { isSpace, isUp, isDown, isEnter, isEscape, isHome, isEnd, isShow, isTabNext, isTabPrevious, } from "@ui5/webcomponents-base/dist/Keys.js";
+import DOMReference from "@ui5/webcomponents-base/dist/types/DOMReference.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
@@ -26,6 +28,7 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import List from "./List.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_TITLE, LIST_ITEM_POSITION, SELECT_ROLE_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js";
 import Option from "./Option.js";
@@ -43,12 +46,33 @@ import selectCss from "./generated/themes/Select.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
 import SelectPopoverCss from "./generated/themes/SelectPopover.css.js";
+import "./Interfaces.js";
 /**
  * @class
  *
  * <h3 class="comment-api-title">Overview</h3>
+ *
  * The <code>ui5-select</code> component is used to create a drop-down list.
- * The items inside the <code>ui5-select</code> define the available options by using the <code>ui5-option</code> component.
+ *
+ * <h3>Usage</h3>
+ *
+ * There are two main usages of the <code>ui5-select></code>.
+ *
+ * 1. With Option (<code>ui5-option</code>) web component:
+ * <br>
+ * The available options of the Select are defined by using the Option component.
+ * The Option comes with predefined design and layout, including <code>icon</code>, <code>text</code> and <code>additional-text</code>.
+ * <br><br>
+ *
+ * 2. With SelectMenu (<code>ui5-select-menu</code>) and SelectMenuOption (<code>ui5-select-menu-option</code>) web components:
+ * <br>
+ * The SelectMenu can be used as alternative to define the Select's dropdown
+ * and can be used via the <code>menu</code> property of the Select to reference SelectMenu by its ID.
+ * The component gives the possibility to customize the Select's dropdown
+ * by slotting entirely custom options (via the SelectMenuOption component) and adding custom styles.
+ *
+ * <b>Note:</b> SelectMenu is a popover and placing it top-level in the HTML page is recommended,
+ * because some page styles (for example transitions) can misplace the SelectMenu.
  *
  * <h3>Keyboard Handling</h3>
  * The <code>ui5-select</code> provides advanced keyboard handling.
@@ -68,11 +92,7 @@ import SelectPopoverCss from "./generated/themes/SelectPopover.css.js";
  * <br>
  * <code>import "@ui5/webcomponents/dist/Option";</code> (comes with <code>ui5-select</code>)
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Select
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-select
- * @appenddocs sap.ui.webc.main.Option
+ * @extends UI5Element
  * @public
  * @since 0.8.0
  */
@@ -80,16 +100,32 @@ let Select = Select_1 = class Select extends UI5Element {
     constructor() {
         super();
         this._syncedOptions = [];
-        this._selectedIndex = -1;
         this._selectedIndexBeforeOpen = -1;
         this._escapePressed = false;
         this._lastSelectedOption = null;
         this._typedChars = "";
+        this._onMenuClick = this.onMenuClick.bind(this);
+        this._onMenuClose = this.onMenuClose.bind(this);
+        this._onMenuOpen = this.onMenuOpen.bind(this);
+        this._onMenuBeforeOpen = this.onMenuBeforeOpen.bind(this);
+        this._onMenuChange = this.onMenuChange.bind(this);
+        this._attachMenuListeners = this.attachMenuListeners.bind(this);
+        this._detachMenuListeners = this.detachMenuListeners.bind(this);
+        this._upgradeProperty("value");
     }
     onBeforeRendering() {
-        this._syncSelection();
+        const menu = this._getSelectMenu();
+        if (menu) {
+            menu.value = this.value;
+            // To cause invalidation when the menu is used for another Select that could have the same value as the previous.
+            // Otherwise, the menu won't re-render.
+            menu.selectId = this.__id;
+        }
+        else {
+            this._syncSelection();
+        }
         this._enableFormSupport();
-        this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`);
+        this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
     }
     onAfterRendering() {
         this.toggleValueStatePopover(this.shouldOpenValueStateMessagePopover);
@@ -107,28 +143,96 @@ let Select = Select_1 = class Select extends UI5Element {
         this.focused = false;
     }
     get _isPickerOpen() {
+        const menu = this._getSelectMenu();
+        if (menu) {
+            return menu.open;
+        }
         return !!this.responsivePopover && this.responsivePopover.opened;
     }
     async _respPopover() {
         const staticAreaItem = await this.getStaticAreaItemDomRef();
         return staticAreaItem.querySelector("[ui5-responsive-popover]");
     }
+    /**
+     * Defines the value of the component:
+     * <br>
+     * - when get - returns the value of the component, e.g. the <code>value</code> property of the selected option or its text content.
+     * <br>
+     * - when set - selects the option with matching <code>value</code> property or text content.
+     * <br><br>
+     * <b>Note:</b> If the given value does not match any existing option,
+     * the first option will get selected.
+     *
+     * @public
+     * @default ""
+     * @since 1.20.0
+     * @formProperty
+     * @formEvents change liveChange
+     */
+    set value(newValue) {
+        const menu = this._getSelectMenu();
+        const selectOptions = Array.from(menu ? menu.children : this.children).filter(option => !option.getAttribute("disabled"));
+        selectOptions.forEach(option => {
+            option.selected = !!((option.getAttribute("value") || option.textContent) === newValue);
+        });
+    }
+    get value() {
+        return this.selectedOption?.value || this.selectedOption?.textContent || "";
+    }
     /**
      * Currently selected <code>ui5-option</code> element.
-     * @readonly
-     * @type {sap.ui.webc.main.ISelectOption}
-     * @name sap.ui.webc.main.Select.prototype.selectedOption
      * @public
+     * @default undefined
      */
     get selectedOption() {
-        return this._filteredItems.find(option => option.selected);
+        return this.selectOptions.find(option => option.selected);
+    }
+    onMenuClick(e) {
+        const optionIndex = e.detail.optionIndex;
+        this._handleSelectionChange(optionIndex);
+    }
+    onMenuBeforeOpen() {
+        this._beforeOpen();
+    }
+    onMenuOpen() {
+        this._afterOpen();
+    }
+    onMenuClose() {
+        this._afterClose();
+    }
+    onMenuChange(e) {
+        this._text = e.detail.text;
+        this._selectedIndex = e.detail.selectedIndex;
+    }
+    _toggleSelectMenu() {
+        const menu = this._getSelectMenu();
+        if (!menu) {
+            return;
+        }
+        if (menu.open) {
+            menu.close();
+        }
+        else {
+            menu.showAt(this, this.offsetWidth);
+        }
+    }
+    onExitDOM() {
+        const menu = this._getSelectMenu();
+        if (menu) {
+            this._detachMenuListeners(menu);
+        }
     }
     async _toggleRespPopover() {
+        if (this.disabled || this.readonly) {
+            return;
+        }
         this._iconPressed = true;
-        this.responsivePopover = await this._respPopover();
-        if (this.disabled) {
+        const menu = this._getSelectMenu();
+        if (menu) {
+            this._toggleSelectMenu();
             return;
         }
+        this.responsivePopover = await this._respPopover();
         if (this._isPickerOpen) {
             this.responsivePopover.close();
         }
@@ -146,8 +250,7 @@ let Select = Select_1 = class Select extends UI5Element {
         let lastSelectedOptionIndex = -1, firstEnabledOptionIndex = -1;
         const options = this._filteredItems;
         const syncOpts = options.map((opt, index) => {
-            if (opt.selected || opt.textContent === this.value) {
-                // The second condition in the IF statement is added because of Angular Reactive Forms Support(Two way data binding)
+            if (opt.selected) {
                 lastSelectedOptionIndex = index;
             }
             if (firstEnabledOptionIndex === -1) {
@@ -189,13 +292,39 @@ let Select = Select_1 = class Select extends UI5Element {
         }
         this._syncedOptions = syncOpts;
     }
+    _getSelectMenu() {
+        return connectToComponent({
+            host: this,
+            propName: "menu",
+            onConnect: this._attachMenuListeners,
+            onDisconnect: this._detachMenuListeners,
+        });
+    }
+    attachMenuListeners(menu) {
+        menu.addEventListener("ui5-after-close", this._onMenuClose);
+        menu.addEventListener("ui5-after-open", this._onMenuOpen);
+        menu.addEventListener("ui5-before-open", this._onMenuBeforeOpen);
+        // @ts-ignore
+        menu.addEventListener("ui5-option-click", this._onMenuClick);
+        // @ts-ignore
+        menu.addEventListener("ui5-menu-change", this._onMenuChange);
+    }
+    detachMenuListeners(menu) {
+        menu.removeEventListener("ui5-after-close", this._onMenuClose);
+        menu.removeEventListener("ui5-after-open", this._onMenuOpen);
+        menu.removeEventListener("ui5-before-open", this._onMenuBeforeOpen);
+        // @ts-ignore
+        menu.removeEventListener("ui5-option-click", this._onMenuClick);
+        // @ts-ignore
+        menu.removeEventListener("ui5-menu-change", this._onMenuChange);
+    }
     _enableFormSupport() {
         const formSupport = getFeature("FormSupport");
         if (formSupport) {
             formSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
                 const selectElement = element;
                 nativeInput.disabled = !!element.disabled;
-                nativeInput.value = selectElement._currentlySelectedOption ? selectElement._currentlySelectedOption.value : "";
+                nativeInput.value = selectElement.value;
             });
         }
         else if (this.name) {
@@ -204,10 +333,16 @@ let Select = Select_1 = class Select extends UI5Element {
     }
     _onkeydown(e) {
         const isTab = (isTabNext(e) || isTabPrevious(e));
-        if (isTab && this.responsivePopover && this.responsivePopover.opened) {
-            this.responsivePopover.close();
+        if (isTab && this._isPickerOpen) {
+            const menu = this._getSelectMenu();
+            if (menu) {
+                menu.close(false, false, true /* preventFocusRestore */);
+            }
+            else {
+                this.responsivePopover.close();
+            }
         }
-        if (isShow(e)) {
+        else if (isShow(e)) {
             e.preventDefault();
             this._toggleRespPopover();
         }
@@ -231,7 +366,7 @@ let Select = Select_1 = class Select extends UI5Element {
         }
     }
     _handleKeyboardNavigation(e) {
-        if (isEnter(e)) {
+        if (isEnter(e) || this.readonly) {
             return;
         }
         const typedCharacter = e.key.toLowerCase();
@@ -251,7 +386,7 @@ let Select = Select_1 = class Select extends UI5Element {
         const currentIndex = this._selectedIndex;
         const itemToSelect = this._searchNextItemByText(text);
         if (itemToSelect) {
-            const nextIndex = this._filteredItems.indexOf(itemToSelect);
+            const nextIndex = this.selectOptions.indexOf(itemToSelect);
             this._changeSelectedItem(this._selectedIndex, nextIndex);
             if (currentIndex !== this._selectedIndex) {
                 this.itemSelectionAnnounce();
@@ -259,19 +394,25 @@ let Select = Select_1 = class Select extends UI5Element {
         }
     }
     _searchNextItemByText(text) {
-        let orderedOptions = this._filteredItems.slice(0);
+        let orderedOptions = this.selectOptions.slice(0);
         const optionsAfterSelected = orderedOptions.splice(this._selectedIndex + 1, orderedOptions.length - this._selectedIndex);
         const optionsBeforeSelected = orderedOptions.splice(0, orderedOptions.length - 1);
         orderedOptions = optionsAfterSelected.concat(optionsBeforeSelected);
-        return orderedOptions.find(option => (option.textContent || "").toLowerCase().startsWith(text));
+        return orderedOptions.find(option => (option.displayText || option.textContent || "").toLowerCase().startsWith(text));
     }
     _handleHomeKey(e) {
         e.preventDefault();
+        if (this.readonly) {
+            return;
+        }
         this._changeSelectedItem(this._selectedIndex, 0);
     }
     _handleEndKey(e) {
-        const lastIndex = this._filteredItems.length - 1;
         e.preventDefault();
+        if (this.readonly) {
+            return;
+        }
+        const lastIndex = this.selectOptions.length - 1;
         this._changeSelectedItem(this._selectedIndex, lastIndex);
     }
     _onkeyup(e) {
@@ -285,12 +426,15 @@ let Select = Select_1 = class Select extends UI5Element {
         }
     }
     _getSelectedItemIndex(item) {
-        return this._filteredItems.findIndex(option => `${option._id}-li` === item.id);
+        return this.selectOptions.findIndex(option => `${option._id}-li` === item.id);
     }
     _select(index) {
-        this._filteredItems[this._selectedIndex].selected = false;
+        this.selectOptions[this._selectedIndex].selected = false;
+        if (this._selectedIndex !== index) {
+            this.fireEvent("live-change", { selectedOption: this.selectOptions[index] });
+        }
         this._selectedIndex = index;
-        this._filteredItems[index].selected = true;
+        this.selectOptions[index].selected = true;
     }
     /**
      * The user clicked on an item from the list
@@ -317,11 +461,26 @@ let Select = Select_1 = class Select extends UI5Element {
         this._select(index);
         this._toggleRespPopover();
     }
+    _scrollSelectedItem() {
+        if (this._isPickerOpen) {
+            const itemRef = this._currentlySelectedOption?.getDomRef();
+            if (itemRef) {
+                itemRef.scrollIntoView({
+                    behavior: "auto",
+                    block: "nearest",
+                    inline: "nearest",
+                });
+            }
+        }
+    }
     _handleArrowNavigation(e) {
+        e.preventDefault();
+        if (this.readonly) {
+            return;
+        }
         let nextIndex = -1;
         const currentIndex = this._selectedIndex;
         const isDownKey = isDown(e);
-        e.preventDefault();
         if (isDownKey) {
             nextIndex = this._getNextOptionIndex();
         }
@@ -334,21 +493,31 @@ let Select = Select_1 = class Select extends UI5Element {
             // The aria-activedescendents attribute can't be used,
             // because listitem elements are in different shadow dom
             this.itemSelectionAnnounce();
+            this._scrollSelectedItem();
         }
     }
     _changeSelectedItem(oldIndex, newIndex) {
-        const options = this._filteredItems;
-        options[oldIndex].selected = false;
-        options[oldIndex]._focused = false;
-        options[newIndex].selected = true;
-        options[newIndex]._focused = true;
+        const options = this.selectOptions;
+        const previousOption = options[oldIndex];
+        previousOption.selected = false;
+        previousOption._focused = false;
+        previousOption.focused = false;
+        const nextOption = options[newIndex];
+        nextOption.selected = true;
+        nextOption._focused = true;
+        nextOption.focused = true;
         this._selectedIndex = newIndex;
+        this.fireEvent("live-change", { selectedOption: nextOption });
         if (!this._isPickerOpen) {
             // arrow pressed on closed picker - do selection change
-            this._fireChangeEvent(options[newIndex]);
+            this._fireChangeEvent(nextOption);
         }
     }
     _getNextOptionIndex() {
+        const menu = this._getSelectMenu();
+        if (menu) {
+            return this._selectedIndex === (menu.options.length - 1) ? this._selectedIndex : (this._selectedIndex + 1);
+        }
         return this._selectedIndex === (this.options.length - 1) ? this._selectedIndex : (this._selectedIndex + 1);
     }
     _getPreviousOptionIndex() {
@@ -356,12 +525,13 @@ let Select = Select_1 = class Select extends UI5Element {
     }
     _beforeOpen() {
         this._selectedIndexBeforeOpen = this._selectedIndex;
-        this._lastSelectedOption = this._filteredItems[this._selectedIndex];
+        this._lastSelectedOption = this.selectOptions[this._selectedIndex];
     }
     _afterOpen() {
         this.opened = true;
         this.fireEvent("open");
         this.itemSelectionAnnounce();
+        this._scrollSelectedItem();
     }
     _afterClose() {
         this.opened = false;
@@ -371,17 +541,31 @@ let Select = Select_1 = class Select extends UI5Element {
             this._select(this._selectedIndexBeforeOpen);
             this._escapePressed = false;
         }
-        else if (this._lastSelectedOption !== this._filteredItems[this._selectedIndex]) {
-            this._fireChangeEvent(this._filteredItems[this._selectedIndex]);
-            this._lastSelectedOption = this._filteredItems[this._selectedIndex];
+        else if (this._lastSelectedOption !== this.selectOptions[this._selectedIndex]) {
+            this._fireChangeEvent(this.selectOptions[this._selectedIndex]);
+            this._lastSelectedOption = this.selectOptions[this._selectedIndex];
         }
         this.fireEvent("close");
     }
+    get selectOptions() {
+        const menu = this._getSelectMenu();
+        if (menu) {
+            return menu.options;
+        }
+        return this._filteredItems;
+    }
+    get hasCustomLabel() {
+        return !!this.label.length;
+    }
     _fireChangeEvent(selectedOption) {
-        this.fireEvent("change", { selectedOption });
+        const changePrevented = !this.fireEvent("change", { selectedOption }, true);
         //  Angular two way data binding
         this.selectedItem = selectedOption.textContent;
         this.fireEvent("selected-item-changed");
+        if (changePrevented) {
+            this.selectedItem = this._lastSelectedOption.textContent;
+            this._select(this._selectedIndexBeforeOpen);
+        }
     }
     get valueStateTextMappings() {
         return {
@@ -428,7 +612,7 @@ let Select = Select_1 = class Select extends UI5Element {
         return Select_1.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
     }
     get _currentlySelectedOption() {
-        return this._filteredItems[this._selectedIndex];
+        return this.selectOptions[this._selectedIndex];
     }
     get _effectiveTabIndex() {
         return this.disabled
@@ -505,7 +689,7 @@ let Select = Select_1 = class Select extends UI5Element {
     }
     itemSelectionAnnounce() {
         let text;
-        const optionsCount = this._filteredItems.length;
+        const optionsCount = this.selectOptions.length;
         const itemPositionText = Select_1.i18nBundle.getText(LIST_ITEM_POSITION, this._selectedIndex + 1, optionsCount);
         if (this.focused && this._currentlySelectedOption) {
             text = `${this._currentlySelectedOption.textContent} ${this._isPickerOpen ? itemPositionText : ""}`;
@@ -513,13 +697,13 @@ let Select = Select_1 = class Select extends UI5Element {
         }
     }
     async openValueStatePopover() {
-        this.popover = await this._getPopover();
-        if (this.popover) {
-            this.popover.showAt(this);
+        this.valueStatePopover = await this._getPopover();
+        if (this.valueStatePopover) {
+            this.valueStatePopover.showAt(this);
         }
     }
     closeValueStatePopover() {
-        this.popover && this.popover.close();
+        this.valueStatePopover && this.valueStatePopover.close();
     }
     toggleValueStatePopover(open) {
         if (open) {
@@ -540,6 +724,9 @@ let Select = Select_1 = class Select extends UI5Element {
         Select_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
     }
 };
+__decorate([
+    property({ validator: DOMReference })
+], Select.prototype, "menu", void 0);
 __decorate([
     property({ type: Boolean })
 ], Select.prototype, "disabled", void 0);
@@ -552,6 +739,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Select.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], Select.prototype, "readonly", void 0);
 __decorate([
     property()
 ], Select.prototype, "accessibleName", void 0);
@@ -573,6 +763,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Select.prototype, "focused", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: -1, noAttribute: true })
+], Select.prototype, "_selectedIndex", void 0);
 __decorate([
     slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
 ], Select.prototype, "options", void 0);
@@ -582,6 +775,9 @@ __decorate([
 __decorate([
     slot()
 ], Select.prototype, "valueStateMessage", void 0);
+__decorate([
+    slot()
+], Select.prototype, "label", void 0);
 Select = Select_1 = __decorate([
     customElement({
         tag: "ui5-select",
@@ -609,20 +805,39 @@ Select = Select_1 = __decorate([
     /**
      * Fired when the selected option changes.
      *
-     * @event sap.ui.webc.main.Select#change
-     * @param {HTMLElement} selectedOption the selected option.
+     * @allowPreventDefault
+     * @param {IOption} selectedOption the selected option.
      * @public
      */
     ,
     event("change", {
         detail: {
+            /**
+            * @public
+            */
+            selectedOption: { type: HTMLElement },
+        },
+    })
+    /**
+     * Fired when the user navigates through the options, but the selection is not finalized,
+     * or when pressing the ESC key to revert the current selection.
+     *
+     * @param {IOption} selectedOption the selected option.
+     * @public
+     * @since 1.17.0
+     */
+    ,
+    event("live-change", {
+        detail: {
+            /**
+            * @public
+            */
             selectedOption: { type: HTMLElement },
         },
     })
     /**
      * Fired after the component's dropdown menu opens.
      *
-     * @event sap.ui.webc.main.Select#open
      * @public
      */
     ,
@@ -630,7 +845,6 @@ Select = Select_1 = __decorate([
     /**
      * Fired after the component's dropdown menu closes.
      *
-     * @event sap.ui.webc.main.Select#close
      * @public
      */
     ,