@ui5/webcomponents 2.18.0-rc.0 → 2.18.0-rc.2

package/dist/MultiComboBoxPopoverTemplate.js

@@ -11,7 +11,7 @@ import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import Popover from "./Popover.js";
 import CheckBox from "./CheckBox.js";
 export default function MultiComboBoxPopoverTemplate() {
-    return (_jsxs(_Fragment, { children: [_jsxs(ResponsivePopover, { placement: "Bottom", horizontalAlign: "Start", class: this.classes.popover, id: this.responsivePopoverId, hideArrow: true, preventInitialFocus: true, style: this.styles.suggestionsPopover, "onui5-selection-change": this._listSelectionChange, onClose: this._afterClose, onBeforeOpen: this._beforeOpen, onBeforeClose: this._beforeClose, onOpen: this._afterOpen, onFocusOut: this._onPopoverFocusOut, accessibleName: this._popupLabel, open: this.open, opener: this, children: [this._isPhone && _jsxs(_Fragment, { children: [_jsxs("div", { slot: "header", class: "ui5-responsive-popover-header", style: this.styles.popoverHeader, children: [_jsx("div", { class: "row", children: _jsx("span", { children: this._headerTitleText }) }), _jsxs("div", { class: "row", children: [_jsx(Input, { onInput: this._handleMobileInput, onKeyDown: this._onMobileInputKeydown, placeholder: this.placeholder, valueState: this._dialogInputValueState, showClearIcon: this.showClearIcon, noTypeahead: this.noTypeahead, children: this._filteredItems.map(item => (_jsx(SuggestionItem, { text: item.text, additionalText: item.additionalText }))) }), _jsx(ToggleButton, { slot: "header", class: "ui5-multi-combobox-toggle-button", icon: multiSelectAll, design: "Transparent", pressed: this._showAllItemsButtonPressed, onClick: this.filterSelectedItems, accessibleName: this._showSelectedButtonAccessibleNameText })] })] }), "\t\t\t\t", this.hasValueStateMessage &&
+    return (_jsxs(_Fragment, { children: [_jsxs(ResponsivePopover, { placement: "Bottom", horizontalAlign: "Start", class: this.classes.popover, id: this.responsivePopoverId, hideArrow: true, preventInitialFocus: true, style: this.styles.suggestionsPopover, "onui5-selection-change": this._listSelectionChange, onClose: this._afterClose, onBeforeOpen: this._beforeOpen, onBeforeClose: this._beforeClose, onOpen: this._afterOpen, onFocusOut: this._onPopoverFocusOut, accessibleName: this._popupLabel, open: this.open, opener: this, children: [this._isPhone && _jsxs(_Fragment, { children: [_jsxs("div", { slot: "header", class: "ui5-responsive-popover-header", style: this.styles.popoverHeader, children: [_jsx("div", { class: "row", children: _jsx("span", { children: this._headerTitleText }) }), _jsxs("div", { class: "row", children: [_jsx(Input, { onInput: this._handleMobileInput, onKeyDown: this._onMobileInputKeydown, placeholder: this.placeholder, valueState: this._dialogInputValueState, showClearIcon: this.showClearIcon, noTypeahead: this.noTypeahead, children: this._filteredItems.map(item => (_jsx(SuggestionItem, { text: item.text, additionalText: item.additionalText }))) }), _jsx(ToggleButton, { slot: "header", class: "ui5-multi-combobox-toggle-button", icon: multiSelectAll, design: "Transparent", pressed: this._showAllItemsButtonPressed, disabled: this._getSelectedItems().length === 0, onClick: this.filterSelectedItems, accessibleName: this._showSelectedButtonAccessibleNameText })] })] }), "\t\t\t\t", this.hasValueStateMessage &&
                                 _jsxs("div", { class: this.classes.popoverValueState, style: this.styles.popoverValueStateMessage, children: [_jsx(Icon, { class: "ui5-input-value-state-message-icon", name: this._valueStateMessageIcon }), this.open && valueStateMessage.call(this)] }), selectAllWrapper.call(this)] }), !this._isPhone && _jsxs(_Fragment, { children: [this.hasValueStateMessage &&
                                 _jsxs("div", { slot: "header", onKeyDown: this._onListHeaderKeydown, class: this.classes.responsivePopoverHeaderValueState, style: this.styles.popoverValueStateMessage, children: [_jsx(Icon, { class: "ui5-input-value-state-message-icon", name: this._valueStateMessageIcon }), this.open && valueStateMessage.call(this)] }), selectAllWrapper.call(this)] }), this.filterSelected ?
                         _jsx(List, { separators: "None", selectionMode: "Multiple", class: "ui5-multi-combobox-all-items-list", accessibleRole: "ListBox", children: this.selectedItems.map(item => _jsx("slot", { name: item._individualSlot })) })

package/dist/MultiComboBoxPopoverTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiComboBoxPopoverTemplate.js","sourceRoot":"","sources":["../src/MultiComboBoxPopoverTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import multiSelectAll from \"@ui5/webcomponents-icons/dist/multiselect-all.js\";\nimport type MultiComboBox from \"./MultiComboBox.js\";\nimport ResponsivePopover from \"./ResponsivePopover.js\";\nimport Button from \"./Button.js\";\nimport Input from \"./Input.js\";\nimport ToggleButton from \"./ToggleButton.js\";\nimport SuggestionItem from \"./SuggestionItem.js\";\nimport Icon from \"./Icon.js\";\nimport List from \"./List.js\";\nimport PopoverHorizontalAlign from \"./types/PopoverHorizontalAlign.js\";\nimport Popover from \"./Popover.js\";\nimport CheckBox from \"./CheckBox.js\";\n\nexport default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {\n\treturn (<>\n\t\t<ResponsivePopover\n\t\t\tplacement=\"Bottom\"\n\t\t\thorizontalAlign=\"Start\"\n\t\t\tclass={this.classes.popover}\n\t\t\tid={this.responsivePopoverId}\n\t\t\thideArrow={true}\n\t\t\tpreventInitialFocus={true}\n\t\t\tstyle={this.styles.suggestionsPopover}\n\t\t\tonui5-selection-change={this._listSelectionChange}\n\t\t\tonClose={this._afterClose}\n\t\t\tonBeforeOpen={this._beforeOpen}\n\t\t\tonBeforeClose={this._beforeClose}\n\t\t\tonOpen={this._afterOpen}\n\t\t\tonFocusOut={this._onPopoverFocusOut}\n\t\t\taccessibleName={this._popupLabel}\n\t\t\topen={this.open}\n\t\t\topener={this}\n\t\t>\n\t\t\t{this._isPhone && <>\n\t\t\t\t<div slot=\"header\" class=\"ui5-responsive-popover-header\" style={this.styles.popoverHeader}>\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t<span>{this._headerTitleText}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tonInput={this._handleMobileInput}\n\t\t\t\t\t\t\tonKeyDown={this._onMobileInputKeydown}\n\t\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\t\tvalueState={this._dialogInputValueState}\n\t\t\t\t\t\t\tshowClearIcon={this.showClearIcon}\n\t\t\t\t\t\t\tnoTypeahead={this.noTypeahead}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this._filteredItems.map(item => (\n\t\t\t\t\t\t\t\t<SuggestionItem text={item.text} additionalText={item.additionalText}></SuggestionItem>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</Input>\n\t\t\t\t\t\t<ToggleButton\n\t\t\t\t\t\t\tslot=\"header\"\n\t\t\t\t\t\t\tclass=\"ui5-multi-combobox-toggle-button\"\n\t\t\t\t\t\t\ticon={multiSelectAll}\n\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\tpressed={this._showAllItemsButtonPressed}\n\t\t\t\t\t\t\tonClick={this.filterSelectedItems}\n\t\t\t\t\t\t\taccessibleName={this._showSelectedButtonAccessibleNameText}\n\t\t\t\t\t\t></ToggleButton>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\t\t\t\t{this.hasValueStateMessage &&\n\t\t\t\t\t<div class={this.classes.popoverValueState} style={this.styles.popoverValueStateMessage}>\n\t\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}></Icon>\n\t\t\t\t\t\t{this.open && valueStateMessage.call(this)}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t{selectAllWrapper.call(this)}\n\t\t\t</>}\n\n\t\t\t{!this._isPhone && <>\n\t\t\t\t{this.hasValueStateMessage &&\n\t\t\t\t\t<div slot=\"header\" onKeyDown={this._onListHeaderKeydown} class={this.classes.responsivePopoverHeaderValueState} style={this.styles.popoverValueStateMessage}>\n\t\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}></Icon>\n\t\t\t\t\t\t{this.open && valueStateMessage.call(this)}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t{selectAllWrapper.call(this)}\n\t\t\t</>}\n\n\t\t\t{this.filterSelected ?\n\t\t\t\t<List separators=\"None\" selectionMode=\"Multiple\" class=\"ui5-multi-combobox-all-items-list\" accessibleRole=\"ListBox\">\n\t\t\t\t\t{this.selectedItems.map(item => <slot name={item._individualSlot}></slot>)}\n\t\t\t\t</List>\n\t\t\t\t:\n\t\t\t\t<List separators=\"None\" selectionMode=\"Multiple\" class=\"ui5-multi-combobox-all-items-list\" accessibleRole=\"ListBox\" onKeyDown={this._onItemKeydown}>\n\t\t\t\t\t{this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}\n\t\t\t\t</List>\n\t\t\t}\n\n\t\t\t{this._isPhone &&\n\t\t\t\t<div slot=\"footer\" class=\"ui5-responsive-popover-footer\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdesign=\"Emphasized\"\n\t\t\t\t\t\tonClick={this.handleOK}\n\t\t\t\t\t>{this._dialogOkButton}</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclass=\"ui5-responsive-popover-close-btn\"\n\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\tonClick={this.handleCancel}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this._dialogCancelButton}\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ResponsivePopover>\n\n\t\t{this.hasValueStateMessage &&\n\t\t\t<Popover\n\t\t\t\t// skipRegistryUpdate={true}\n\t\t\t\tpreventInitialFocus={true}\n\t\t\t\tpreventFocusRestore={true}\n\t\t\t\thideArrow={true}\n\t\t\t\tclass=\"ui5-valuestatemessage-popover\"\n\t\t\t\tplacement=\"Bottom\"\n\t\t\t\thorizontalAlign={PopoverHorizontalAlign.Start}\n\t\t\t\ttabIndex={-1}\n\t\t\t\topen={this.valueStateOpen}\n\t\t\t\topener={this}\n\t\t\t>\n\t\t\t\t<div slot=\"header\" class={this.classes.popoverValueState} style={this.styles.popoverHeader}>\n\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}></Icon>\n\t\t\t\t\t{this.valueStateOpen && valueStateMessage.call(this)}\n\t\t\t\t</div>\n\t\t\t</Popover>\n\t\t}\n\t</>);\n}\n\nfunction valueStateMessage(this: MultiComboBox) {\n\treturn this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name=\"valueStateMessage\"></slot>;\n}\n\nfunction selectAllWrapper(this: MultiComboBox) {\n\tif (this.showSelectAll) {\n\t\treturn (\n\t\t\t<div class=\"ui5-mcb-select-all-header\" onKeyDown={this._onListHeaderKeydown} tabIndex={0}>\n\t\t\t\t<CheckBox\n\t\t\t\t\tdisabled={this.readonly}\n\t\t\t\t\tchecked={this._allSelected}\n\t\t\t\t\tclass=\"ui5-mcb-select-all-checkbox\"\n\t\t\t\t\ttext={this.selectAllCheckboxLabel}\n\t\t\t\t\tonChange={this._handleSelectAllCheckboxClick}\n\t\t\t\t></CheckBox>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"MultiComboBoxPopoverTemplate.js","sourceRoot":"","sources":["../src/MultiComboBoxPopoverTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import multiSelectAll from \"@ui5/webcomponents-icons/dist/multiselect-all.js\";\nimport type MultiComboBox from \"./MultiComboBox.js\";\nimport ResponsivePopover from \"./ResponsivePopover.js\";\nimport Button from \"./Button.js\";\nimport Input from \"./Input.js\";\nimport ToggleButton from \"./ToggleButton.js\";\nimport SuggestionItem from \"./SuggestionItem.js\";\nimport Icon from \"./Icon.js\";\nimport List from \"./List.js\";\nimport PopoverHorizontalAlign from \"./types/PopoverHorizontalAlign.js\";\nimport Popover from \"./Popover.js\";\nimport CheckBox from \"./CheckBox.js\";\n\nexport default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {\n\treturn (<>\n\t\t<ResponsivePopover\n\t\t\tplacement=\"Bottom\"\n\t\t\thorizontalAlign=\"Start\"\n\t\t\tclass={this.classes.popover}\n\t\t\tid={this.responsivePopoverId}\n\t\t\thideArrow={true}\n\t\t\tpreventInitialFocus={true}\n\t\t\tstyle={this.styles.suggestionsPopover}\n\t\t\tonui5-selection-change={this._listSelectionChange}\n\t\t\tonClose={this._afterClose}\n\t\t\tonBeforeOpen={this._beforeOpen}\n\t\t\tonBeforeClose={this._beforeClose}\n\t\t\tonOpen={this._afterOpen}\n\t\t\tonFocusOut={this._onPopoverFocusOut}\n\t\t\taccessibleName={this._popupLabel}\n\t\t\topen={this.open}\n\t\t\topener={this}\n\t\t>\n\t\t\t{this._isPhone && <>\n\t\t\t\t<div slot=\"header\" class=\"ui5-responsive-popover-header\" style={this.styles.popoverHeader}>\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t<span>{this._headerTitleText}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tonInput={this._handleMobileInput}\n\t\t\t\t\t\t\tonKeyDown={this._onMobileInputKeydown}\n\t\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\t\tvalueState={this._dialogInputValueState}\n\t\t\t\t\t\t\tshowClearIcon={this.showClearIcon}\n\t\t\t\t\t\t\tnoTypeahead={this.noTypeahead}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this._filteredItems.map(item => (\n\t\t\t\t\t\t\t\t<SuggestionItem text={item.text} additionalText={item.additionalText}></SuggestionItem>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</Input>\n\t\t\t\t\t\t<ToggleButton\n\t\t\t\t\t\t\tslot=\"header\"\n\t\t\t\t\t\t\tclass=\"ui5-multi-combobox-toggle-button\"\n\t\t\t\t\t\t\ticon={multiSelectAll}\n\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\tpressed={this._showAllItemsButtonPressed}\n\t\t\t\t\t\t\tdisabled={this._getSelectedItems().length === 0}\n\t\t\t\t\t\t\tonClick={this.filterSelectedItems}\n\t\t\t\t\t\t\taccessibleName={this._showSelectedButtonAccessibleNameText}\n\t\t\t\t\t\t></ToggleButton>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\t\t\t\t{this.hasValueStateMessage &&\n\t\t\t\t\t<div class={this.classes.popoverValueState} style={this.styles.popoverValueStateMessage}>\n\t\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}></Icon>\n\t\t\t\t\t\t{this.open && valueStateMessage.call(this)}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t{selectAllWrapper.call(this)}\n\t\t\t</>}\n\n\t\t\t{!this._isPhone && <>\n\t\t\t\t{this.hasValueStateMessage &&\n\t\t\t\t\t<div slot=\"header\" onKeyDown={this._onListHeaderKeydown} class={this.classes.responsivePopoverHeaderValueState} style={this.styles.popoverValueStateMessage}>\n\t\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}></Icon>\n\t\t\t\t\t\t{this.open && valueStateMessage.call(this)}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t{selectAllWrapper.call(this)}\n\t\t\t</>}\n\n\t\t\t{this.filterSelected ?\n\t\t\t\t<List separators=\"None\" selectionMode=\"Multiple\" class=\"ui5-multi-combobox-all-items-list\" accessibleRole=\"ListBox\">\n\t\t\t\t\t{this.selectedItems.map(item => <slot name={item._individualSlot}></slot>)}\n\t\t\t\t</List>\n\t\t\t\t:\n\t\t\t\t<List separators=\"None\" selectionMode=\"Multiple\" class=\"ui5-multi-combobox-all-items-list\" accessibleRole=\"ListBox\" onKeyDown={this._onItemKeydown}>\n\t\t\t\t\t{this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}\n\t\t\t\t</List>\n\t\t\t}\n\n\t\t\t{this._isPhone &&\n\t\t\t\t<div slot=\"footer\" class=\"ui5-responsive-popover-footer\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdesign=\"Emphasized\"\n\t\t\t\t\t\tonClick={this.handleOK}\n\t\t\t\t\t>{this._dialogOkButton}</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclass=\"ui5-responsive-popover-close-btn\"\n\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\tonClick={this.handleCancel}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this._dialogCancelButton}\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ResponsivePopover>\n\n\t\t{this.hasValueStateMessage &&\n\t\t\t<Popover\n\t\t\t\t// skipRegistryUpdate={true}\n\t\t\t\tpreventInitialFocus={true}\n\t\t\t\tpreventFocusRestore={true}\n\t\t\t\thideArrow={true}\n\t\t\t\tclass=\"ui5-valuestatemessage-popover\"\n\t\t\t\tplacement=\"Bottom\"\n\t\t\t\thorizontalAlign={PopoverHorizontalAlign.Start}\n\t\t\t\ttabIndex={-1}\n\t\t\t\topen={this.valueStateOpen}\n\t\t\t\topener={this}\n\t\t\t>\n\t\t\t\t<div slot=\"header\" class={this.classes.popoverValueState} style={this.styles.popoverHeader}>\n\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}></Icon>\n\t\t\t\t\t{this.valueStateOpen && valueStateMessage.call(this)}\n\t\t\t\t</div>\n\t\t\t</Popover>\n\t\t}\n\t</>);\n}\n\nfunction valueStateMessage(this: MultiComboBox) {\n\treturn this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name=\"valueStateMessage\"></slot>;\n}\n\nfunction selectAllWrapper(this: MultiComboBox) {\n\tif (this.showSelectAll) {\n\t\treturn (\n\t\t\t<div class=\"ui5-mcb-select-all-header\" onKeyDown={this._onListHeaderKeydown} tabIndex={0}>\n\t\t\t\t<CheckBox\n\t\t\t\t\tdisabled={this.readonly}\n\t\t\t\t\tchecked={this._allSelected}\n\t\t\t\t\tclass=\"ui5-mcb-select-all-checkbox\"\n\t\t\t\t\ttext={this.selectAllCheckboxLabel}\n\t\t\t\t\tonChange={this._handleSelectAllCheckboxClick}\n\t\t\t\t></CheckBox>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

package/dist/Panel.d.ts

@@ -139,6 +139,7 @@ declare class Panel extends UI5Element {
     _hasHeader: boolean;
     _contentExpanded: boolean;
     _animationRunning: boolean;
+    _pendingToggle: boolean;
     /**
      * Defines the component header area.
      *

package/dist/Panel.js

@@ -13,7 +13,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import slideDown from "@ui5/webcomponents-base/dist/animations/slideDown.js";
 import slideUp from "@ui5/webcomponents-base/dist/animations/slideUp.js";
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isSpace, isEnter, isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
@@ -139,6 +139,7 @@ let Panel = Panel_1 = class Panel extends UI5Element {
         this._hasHeader = false;
         this._contentExpanded = false;
         this._animationRunning = false;
+        this._pendingToggle = false;
     }
     onBeforeRendering() {
         // If the animation is running, it will set the content expanded state at the end
@@ -173,10 +174,16 @@ let Panel = Panel_1 = class Panel extends UI5Element {
             return;
         }
         if (isEnter(e)) {
-            e.preventDefault();
+            this._toggleOpen();
         }
         if (isSpace(e)) {
             e.preventDefault();
+            this._pendingToggle = true;
+        }
+        // Cancel toggle if Escape is pressed
+        if (isEscape(e) && this._pendingToggle) {
+            e.preventDefault();
+            this._pendingToggle = false;
         }
     }
     _headerKeyUp(e) {
@@ -184,10 +191,14 @@ let Panel = Panel_1 = class Panel extends UI5Element {
             return;
         }
         if (isEnter(e)) {
-            this._toggleOpen();
+            e.preventDefault();
         }
         if (isSpace(e)) {
-            this._toggleOpen();
+            // Only toggle if space was pressed and escape wasn't pressed to cancel
+            if (this._pendingToggle) {
+                this._toggleOpen();
+            }
+            this._pendingToggle = false;
         }
     }
     _toggleOpen() {
@@ -310,6 +321,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], Panel.prototype, "_animationRunning", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], Panel.prototype, "_pendingToggle", void 0);
 __decorate([
     slot()
 ], Panel.prototype, "header", void 0);

package/dist/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../src/Panel.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport slideDown from \"@ui5/webcomponents-base/dist/animations/slideDown.js\";\nimport slideUp from \"@ui5/webcomponents-base/dist/animations/slideUp.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AnimationMode from \"@ui5/webcomponents-base/dist/types/AnimationMode.js\";\nimport { getAnimationMode } from \"@ui5/webcomponents-base/dist/config/AnimationMode.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base\";\nimport type TitleLevel from \"./types/TitleLevel.js\";\nimport type Button from \"./Button.js\";\nimport type PanelAccessibleRole from \"./types/PanelAccessibleRole.js\";\nimport PanelTemplate from \"./PanelTemplate.js\";\nimport { PANEL_ICON } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport panelCss from \"./generated/themes/Panel.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-panel` component is a container which has a header and a\n * content area and is used\n * for grouping and displaying information. It can be collapsed to save space on the screen.\n *\n * ### Guidelines:\n *\n * - Nesting two or more panels is not recommended.\n * - Do not stack too many panels on one page.\n *\n * ### Structure\n * The panel's header area consists of a title bar with a header text or custom header.\n *\n * The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state.\n *\n * The custom header can be set through the `header` slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.\n *\n * The content area can contain an arbitrary set of controls.\n *\n * **Note:** The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.\n *\n * ### Responsive Behavior\n *\n * - If the width of the panel is set to 100% (default), the panel and its children are\n * resized responsively,\n * depending on its parent container.\n * - If the panel has a fixed height, it will take up the space even if the panel is\n * collapsed.\n * - When the panel is expandable (the `fixed` property is set to `false`),\n * an arrow icon (pointing to the right) appears in front of the header.\n * - When the animation is activated, expand/collapse uses a smooth animation to open or\n * close the content area.\n * - When the panel expands/collapses, the arrow icon rotates 90 degrees\n * clockwise/counter-clockwise.\n *\n * ### Keyboard Handling\n *\n * #### Fast Navigation\n * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\n * In order to use this functionality, you need to import the following module:\n * `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Panel.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @slot {Array<Node>} default - Defines the content of the component. The content is visible only when the component is expanded.\n * @csspart header - Used to style the wrapper of the header.\n * @csspart content - Used to style the wrapper of the content.\n */\n@customElement({\n\ttag: \"ui5-panel\",\n\tfastNavigation: true,\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: PanelTemplate,\n\tstyles: panelCss,\n})\n/**\n * Fired when the component is expanded/collapsed by user interaction.\n * @public\n */\n@event(\"toggle\", {\n\tbubbles: true,\n})\nclass Panel extends UI5Element {\n\teventDetails!: {\n\t\ttoggle: void,\n\t}\n\t/**\n\t * This property is used to set the header text of the component.\n\t * The text is visible in both expanded and collapsed states.\n\t *\n\t * **Note:** This property is overridden by the `header` slot.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\theaderText?: string;\n\n\t/**\n\t * Determines whether the component is in a fixed state that is not\n\t * expandable/collapsible by user interaction.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tfixed = false;\n\n\t/**\n\t * Indicates whether the component is collapsed and only the header is displayed.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tcollapsed = false;\n\n\t/**\n\t * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.\n\t * @default false\n\t * @public\n\t * @since 1.0.0-rc.16\n\t */\n\t@property({ type: Boolean })\n\tnoAnimation = false;\n\n\t/**\n\t * Sets the accessible ARIA role of the component.\n\t * Depending on the usage, you can change the role from the default `Form`\n\t * to `Region` or `Complementary`.\n\t * @default \"Form\"\n\t * @public\n\t */\n\t@property()\n\taccessibleRole: `${PanelAccessibleRole}` = \"Form\";\n\n\t/**\n\t * Defines the \"aria-level\" of component heading,\n\t * set by the `headerText`.\n\t * @default \"H2\"\n\t * @public\n\t*/\n\t@property()\n\theaderLevel: `${TitleLevel}` = \"H2\";\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Indicates whether the Panel header is sticky or not.\n\t * If stickyHeader is set to true, then whenever you scroll the content or\n\t * the application, the header of the panel will be always visible and\n\t * a solid color will be used for its design.\n\t * @default false\n\t * @public\n\t * @since 1.16.0-rc.1\n\t */\n\t @property({ type: Boolean })\n\t stickyHeader = false;\n\n\t/**\n\t * When set to `true`, the `accessibleName` property will be\n\t * applied not only on the panel root itself, but on its toggle button too.\n\t * **Note:** This property only has effect if `accessibleName` is set and a header slot is provided.\n\t * @default false\n\t * @private\n\t  */\n\t@property({ type: Boolean })\n\tuseAccessibleNameForToggleButton = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_hasHeader = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_contentExpanded = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_animationRunning = false;\n\n\t/**\n\t * Defines the component header area.\n\t *\n\t * **Note:** When a header is provided, the `headerText` property is ignored.\n\t * @public\n\t */\n\t@slot()\n\theader!: Array<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\t// If the animation is running, it will set the content expanded state at the end\n\t\tif (!this._animationRunning) {\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t}\n\n\t\tthis._hasHeader = !!this.header.length;\n\t}\n\n\tshouldToggle(element: HTMLElement): boolean {\n\t\tconst customContent = this.header.length;\n\t\tif (customContent) {\n\t\t\treturn element.classList.contains(\"ui5-panel-header-button\");\n\t\t}\n\t\treturn true;\n\t}\n\n\tget shouldNotAnimate() {\n\t\treturn this.noAnimation || getAnimationMode() === AnimationMode.None;\n\t}\n\n\t_headerClick(e: MouseEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._toggleOpen();\n\t}\n\n\t_toggleButtonClick(e: UI5CustomEvent<Button, \"click\">) {\n\t\tif (e.detail.originalEvent.x === 0 && e.detail.originalEvent.y === 0) {\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\t}\n\n\t_headerKeyDown(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_headerKeyUp(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._toggleOpen();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\tthis._toggleOpen();\n\t\t}\n\t}\n\n\t_toggleOpen() {\n\t\tif (this.fixed) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.collapsed = !this.collapsed;\n\n\t\tif (this.shouldNotAnimate) {\n\t\t\tthis.fireDecoratorEvent(\"toggle\");\n\t\t\treturn;\n\t\t}\n\n\t\tthis._animationRunning = true;\n\n\t\tconst elements = this.getDomRef()!.querySelectorAll(\".ui5-panel-content\");\n\t\tconst animations: Array<Promise<void | Error>> = [];\n\n\t\t[].forEach.call(elements, oElement => {\n\t\t\tif (this.collapsed) {\n\t\t\t\tanimations.push(slideUp(oElement).promise());\n\t\t\t} else {\n\t\t\t\tanimations.push(slideDown(oElement).promise());\n\t\t\t}\n\t\t});\n\n\t\tPromise.all(animations).then(() => {\n\t\t\tthis._animationRunning = false;\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t\tthis.fireDecoratorEvent(\"toggle\");\n\t\t});\n\t}\n\n\t_headerOnTarget(target: HTMLElement) {\n\t\treturn target.classList.contains(\"sapMPanelWrappingDiv\");\n\t}\n\n\tget toggleButtonTitle() {\n\t\treturn Panel.i18nBundle.getText(PANEL_ICON);\n\t}\n\n\tget expanded() {\n\t\treturn !this.collapsed;\n\t}\n\n\tget accRole() {\n\t\treturn this.accessibleRole.toLowerCase() as Lowercase<PanelAccessibleRole>;\n\t}\n\n\tget effectiveAccessibleName() {\n\t\treturn typeof this.accessibleName === \"string\" && this.accessibleName.length ? this.accessibleName : undefined;\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"button\": {\n\t\t\t\t\"accessibilityAttributes\": {\n\t\t\t\t\t\"expanded\": this.expanded,\n\t\t\t\t},\n\t\t\t\t\"title\": this.toggleButtonTitle,\n\t\t\t\t\"ariaLabelButton\": !this.nonFocusableButton && this.useAccessibleNameForToggleButton ? this.effectiveAccessibleName : undefined,\n\t\t\t},\n\t\t\t\"ariaExpanded\": this.nonFixedInternalHeader ? this.expanded : undefined,\n\t\t\t\"ariaControls\": this.nonFixedInternalHeader ? `${this._id}-content` : undefined,\n\t\t\t\"ariaLabelledby\": this.nonFocusableButton ? this.ariaLabelledbyReference : undefined,\n\t\t\t\"role\": this.nonFixedInternalHeader ? \"button\" : undefined as \"button\" | undefined,\n\t\t};\n\t}\n\n\tget ariaLabelledbyReference() {\n\t\treturn (this.nonFocusableButton && this.headerText && !this.fixed) ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget fixedPanelAriaLabelledbyReference() {\n\t\treturn this.fixed && !this.effectiveAccessibleName ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget headerAriaLevel() {\n\t\treturn Number.parseInt(this.headerLevel.slice(1));\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this.header.length || this.fixed) ? -1 : 0;\n\t}\n\n\tget headingWrapperAriaLevel() {\n\t\treturn !this._hasHeader ? this.headerAriaLevel : undefined;\n\t}\n\n\tget headingWrapperRole() {\n\t\treturn !this._hasHeader ? \"heading\" : undefined;\n\t}\n\n\tget nonFixedInternalHeader() {\n\t\treturn !this._hasHeader && !this.fixed;\n\t}\n\n\tget hasHeaderOrHeaderText() {\n\t\treturn this._hasHeader || this.headerText;\n\t}\n\n\tget nonFocusableButton() {\n\t\treturn !this.header.length;\n\t}\n}\n\nPanel.define();\n\nexport default Panel;\n"]}
+{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../src/Panel.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport slideDown from \"@ui5/webcomponents-base/dist/animations/slideDown.js\";\nimport slideUp from \"@ui5/webcomponents-base/dist/animations/slideUp.js\";\nimport { isSpace, isEnter, isEscape } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AnimationMode from \"@ui5/webcomponents-base/dist/types/AnimationMode.js\";\nimport { getAnimationMode } from \"@ui5/webcomponents-base/dist/config/AnimationMode.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base\";\nimport type TitleLevel from \"./types/TitleLevel.js\";\nimport type Button from \"./Button.js\";\nimport type PanelAccessibleRole from \"./types/PanelAccessibleRole.js\";\nimport PanelTemplate from \"./PanelTemplate.js\";\nimport { PANEL_ICON } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport panelCss from \"./generated/themes/Panel.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-panel` component is a container which has a header and a\n * content area and is used\n * for grouping and displaying information. It can be collapsed to save space on the screen.\n *\n * ### Guidelines:\n *\n * - Nesting two or more panels is not recommended.\n * - Do not stack too many panels on one page.\n *\n * ### Structure\n * The panel's header area consists of a title bar with a header text or custom header.\n *\n * The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state.\n *\n * The custom header can be set through the `header` slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.\n *\n * The content area can contain an arbitrary set of controls.\n *\n * **Note:** The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.\n *\n * ### Responsive Behavior\n *\n * - If the width of the panel is set to 100% (default), the panel and its children are\n * resized responsively,\n * depending on its parent container.\n * - If the panel has a fixed height, it will take up the space even if the panel is\n * collapsed.\n * - When the panel is expandable (the `fixed` property is set to `false`),\n * an arrow icon (pointing to the right) appears in front of the header.\n * - When the animation is activated, expand/collapse uses a smooth animation to open or\n * close the content area.\n * - When the panel expands/collapses, the arrow icon rotates 90 degrees\n * clockwise/counter-clockwise.\n *\n * ### Keyboard Handling\n *\n * #### Fast Navigation\n * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\n * In order to use this functionality, you need to import the following module:\n * `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Panel.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @slot {Array<Node>} default - Defines the content of the component. The content is visible only when the component is expanded.\n * @csspart header - Used to style the wrapper of the header.\n * @csspart content - Used to style the wrapper of the content.\n */\n@customElement({\n\ttag: \"ui5-panel\",\n\tfastNavigation: true,\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: PanelTemplate,\n\tstyles: panelCss,\n})\n/**\n * Fired when the component is expanded/collapsed by user interaction.\n * @public\n */\n@event(\"toggle\", {\n\tbubbles: true,\n})\nclass Panel extends UI5Element {\n\teventDetails!: {\n\t\ttoggle: void,\n\t}\n\t/**\n\t * This property is used to set the header text of the component.\n\t * The text is visible in both expanded and collapsed states.\n\t *\n\t * **Note:** This property is overridden by the `header` slot.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\theaderText?: string;\n\n\t/**\n\t * Determines whether the component is in a fixed state that is not\n\t * expandable/collapsible by user interaction.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tfixed = false;\n\n\t/**\n\t * Indicates whether the component is collapsed and only the header is displayed.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tcollapsed = false;\n\n\t/**\n\t * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.\n\t * @default false\n\t * @public\n\t * @since 1.0.0-rc.16\n\t */\n\t@property({ type: Boolean })\n\tnoAnimation = false;\n\n\t/**\n\t * Sets the accessible ARIA role of the component.\n\t * Depending on the usage, you can change the role from the default `Form`\n\t * to `Region` or `Complementary`.\n\t * @default \"Form\"\n\t * @public\n\t */\n\t@property()\n\taccessibleRole: `${PanelAccessibleRole}` = \"Form\";\n\n\t/**\n\t * Defines the \"aria-level\" of component heading,\n\t * set by the `headerText`.\n\t * @default \"H2\"\n\t * @public\n\t*/\n\t@property()\n\theaderLevel: `${TitleLevel}` = \"H2\";\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Indicates whether the Panel header is sticky or not.\n\t * If stickyHeader is set to true, then whenever you scroll the content or\n\t * the application, the header of the panel will be always visible and\n\t * a solid color will be used for its design.\n\t * @default false\n\t * @public\n\t * @since 1.16.0-rc.1\n\t */\n\t@property({ type: Boolean })\n\tstickyHeader = false;\n\n\t/**\n\t * When set to `true`, the `accessibleName` property will be\n\t * applied not only on the panel root itself, but on its toggle button too.\n\t * **Note:** This property only has effect if `accessibleName` is set and a header slot is provided.\n\t * @default false\n\t * @private\n\t  */\n\t@property({ type: Boolean })\n\tuseAccessibleNameForToggleButton = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_hasHeader = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_contentExpanded = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_animationRunning = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_pendingToggle = false;\n\n\t/**\n\t * Defines the component header area.\n\t *\n\t * **Note:** When a header is provided, the `headerText` property is ignored.\n\t * @public\n\t */\n\t@slot()\n\theader!: Array<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\t// If the animation is running, it will set the content expanded state at the end\n\t\tif (!this._animationRunning) {\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t}\n\n\t\tthis._hasHeader = !!this.header.length;\n\t}\n\n\tshouldToggle(element: HTMLElement): boolean {\n\t\tconst customContent = this.header.length;\n\t\tif (customContent) {\n\t\t\treturn element.classList.contains(\"ui5-panel-header-button\");\n\t\t}\n\t\treturn true;\n\t}\n\n\tget shouldNotAnimate() {\n\t\treturn this.noAnimation || getAnimationMode() === AnimationMode.None;\n\t}\n\n\t_headerClick(e: MouseEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._toggleOpen();\n\t}\n\n\t_toggleButtonClick(e: UI5CustomEvent<Button, \"click\">) {\n\t\tif (e.detail.originalEvent.x === 0 && e.detail.originalEvent.y === 0) {\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\t}\n\n\t_headerKeyDown(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._toggleOpen();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t\tthis._pendingToggle = true;\n\t\t}\n\n\t\t// Cancel toggle if Escape is pressed\n\t\tif (isEscape(e) && this._pendingToggle) {\n\t\t\te.preventDefault();\n\t\t\tthis._pendingToggle = false;\n\t\t}\n\t}\n\n\t_headerKeyUp(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\t// Only toggle if space was pressed and escape wasn't pressed to cancel\n\t\t\tif (this._pendingToggle) {\n\t\t\t\tthis._toggleOpen();\n\t\t\t}\n\t\t\tthis._pendingToggle = false;\n\t\t}\n\t}\n\n\t_toggleOpen() {\n\t\tif (this.fixed) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.collapsed = !this.collapsed;\n\n\t\tif (this.shouldNotAnimate) {\n\t\t\tthis.fireDecoratorEvent(\"toggle\");\n\t\t\treturn;\n\t\t}\n\n\t\tthis._animationRunning = true;\n\n\t\tconst elements = this.getDomRef()!.querySelectorAll(\".ui5-panel-content\");\n\t\tconst animations: Array<Promise<void | Error>> = [];\n\n\t\t[].forEach.call(elements, oElement => {\n\t\t\tif (this.collapsed) {\n\t\t\t\tanimations.push(slideUp(oElement).promise());\n\t\t\t} else {\n\t\t\t\tanimations.push(slideDown(oElement).promise());\n\t\t\t}\n\t\t});\n\n\t\tPromise.all(animations).then(() => {\n\t\t\tthis._animationRunning = false;\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t\tthis.fireDecoratorEvent(\"toggle\");\n\t\t});\n\t}\n\n\t_headerOnTarget(target: HTMLElement) {\n\t\treturn target.classList.contains(\"sapMPanelWrappingDiv\");\n\t}\n\n\tget toggleButtonTitle() {\n\t\treturn Panel.i18nBundle.getText(PANEL_ICON);\n\t}\n\n\tget expanded() {\n\t\treturn !this.collapsed;\n\t}\n\n\tget accRole() {\n\t\treturn this.accessibleRole.toLowerCase() as Lowercase<PanelAccessibleRole>;\n\t}\n\n\tget effectiveAccessibleName() {\n\t\treturn typeof this.accessibleName === \"string\" && this.accessibleName.length ? this.accessibleName : undefined;\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"button\": {\n\t\t\t\t\"accessibilityAttributes\": {\n\t\t\t\t\t\"expanded\": this.expanded,\n\t\t\t\t},\n\t\t\t\t\"title\": this.toggleButtonTitle,\n\t\t\t\t\"ariaLabelButton\": !this.nonFocusableButton && this.useAccessibleNameForToggleButton ? this.effectiveAccessibleName : undefined,\n\t\t\t},\n\t\t\t\"ariaExpanded\": this.nonFixedInternalHeader ? this.expanded : undefined,\n\t\t\t\"ariaControls\": this.nonFixedInternalHeader ? `${this._id}-content` : undefined,\n\t\t\t\"ariaLabelledby\": this.nonFocusableButton ? this.ariaLabelledbyReference : undefined,\n\t\t\t\"role\": this.nonFixedInternalHeader ? \"button\" : undefined as \"button\" | undefined,\n\t\t};\n\t}\n\n\tget ariaLabelledbyReference() {\n\t\treturn (this.nonFocusableButton && this.headerText && !this.fixed) ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget fixedPanelAriaLabelledbyReference() {\n\t\treturn this.fixed && !this.effectiveAccessibleName ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget headerAriaLevel() {\n\t\treturn Number.parseInt(this.headerLevel.slice(1));\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this.header.length || this.fixed) ? -1 : 0;\n\t}\n\n\tget headingWrapperAriaLevel() {\n\t\treturn !this._hasHeader ? this.headerAriaLevel : undefined;\n\t}\n\n\tget headingWrapperRole() {\n\t\treturn !this._hasHeader ? \"heading\" : undefined;\n\t}\n\n\tget nonFixedInternalHeader() {\n\t\treturn !this._hasHeader && !this.fixed;\n\t}\n\n\tget hasHeaderOrHeaderText() {\n\t\treturn this._hasHeader || this.headerText;\n\t}\n\n\tget nonFocusableButton() {\n\t\treturn !this.header.length;\n\t}\n}\n\nPanel.define();\n\nexport default Panel;\n"]}

package/dist/RangeSlider.d.ts

@@ -1,5 +1,6 @@
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import SliderBase from "./SliderBase.js";
 type AriaHandlesText = {
     startHandleText?: string;
@@ -68,7 +69,8 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
      * @formProperty
      * @public
      */
-    startValue: number;
+    set startValue(value: number);
+    get startValue(): number;
     /**
      * Defines end point of a selection - position of a second handle on the slider.
      * @default 100
@@ -76,10 +78,17 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
      * @formProperty
      * @public
      */
-    endValue: number;
+    set endValue(value: number);
+    get endValue(): number;
+    tooltipStartValue: string;
+    tooltipEndValue: string;
+    tooltipStartValueState: `${ValueState}`;
+    tooltipEndValueState: `${ValueState}`;
     rangePressed: boolean;
     _isStartValueValid: boolean;
     _isEndValueValid: boolean;
+    _startValue: number;
+    _endValue: number;
     _startValueInitial?: number;
     _endValueInitial?: number;
     _valueAffected?: AffectedValue;
@@ -99,8 +108,6 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
     static i18nBundle: I18nBundle;
     get formFormattedValue(): FormData;
     constructor();
-    get tooltipStartValue(): string;
-    get tooltipEndValue(): string;
     get _ariaDisabled(): true | undefined;
     get _ariaLabelledByText(): string;
     get _ariaHandlesText(): AriaHandlesText;
@@ -116,6 +123,7 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
      *
      */
     onBeforeRendering(): void;
+    onAfterRendering(): void;
     syncUIAndState(): void;
     _onfocusin(): void;
     /**
@@ -269,6 +277,10 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
     bringToFrontTooltip(handle: "start" | "end"): void;
     _onTooltopForwardFocus(e: CustomEvent): void;
     _onTooltipChange(e: CustomEvent): void;
+    _onTooltipFocusChange(e: CustomEvent): void;
+    _onTooltipOpen(): void;
+    _onTooltipInput(e: CustomEvent): void;
+    _onTooltipKeydown(e: KeyboardEvent): void;
     _getFormattedValue(value: string): string;
     /**
      * Swaps the start and end values of the handles if one came accros the other:

package/dist/RangeSlider.js

@@ -8,7 +8,8 @@ var RangeSlider_1;
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import { isEscape, isEnter, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import { isEscape, isEnter, isHome, isEnd, isF2, } from "@ui5/webcomponents-base/dist/Keys.js";
 import SliderBase from "./SliderBase.js";
 import RangeSliderTemplate from "./RangeSliderTemplate.js";
 // Texts
@@ -70,6 +71,34 @@ import rangeSliderStyles from "./generated/themes/RangeSlider.css.js";
  * @csspart handle - Used to style the handles of the `ui5-range-slider`.
  */
 let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
+    /**
+     * Defines start point of a selection - position of a first handle on the slider.
+     * @default 0
+     * @formEvents change input
+     * @formProperty
+     * @public
+     */
+    set startValue(value) {
+        this._startValue = value;
+        this.tooltipStartValue = value.toString();
+    }
+    get startValue() {
+        return this._startValue;
+    }
+    /**
+     * Defines end point of a selection - position of a second handle on the slider.
+     * @default 100
+     * @formEvents change input
+     * @formProperty
+     * @public
+     */
+    set endValue(value) {
+        this._endValue = value;
+        this.tooltipEndValue = value.toString();
+    }
+    get endValue() {
+        return this._endValue;
+    }
     get formFormattedValue() {
         const formData = new FormData();
         if (!this.name) {
@@ -81,25 +110,15 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
     }
     constructor() {
         super();
-        /**
-         * Defines start point of a selection - position of a first handle on the slider.
-         * @default 0
-         * @formEvents change input
-         * @formProperty
-         * @public
-         */
-        this.startValue = 0;
-        /**
-         * Defines end point of a selection - position of a second handle on the slider.
-         * @default 100
-         * @formEvents change input
-         * @formProperty
-         * @public
-         */
-        this.endValue = 100;
+        this.tooltipStartValue = "";
+        this.tooltipEndValue = "";
+        this.tooltipStartValueState = "None";
+        this.tooltipEndValueState = "None";
         this.rangePressed = false;
         this._isStartValueValid = false;
         this._isEndValueValid = false;
+        this._startValue = 0;
+        this._endValue = 100;
         this._isPressInCurrentRange = false;
         this._handeIsPressed = false;
         this._reversedValues = false;
@@ -109,16 +128,6 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         this._lastValidStartValue = this.min.toString();
         this._lastValidEndValue = this.max.toString();
     }
-    get tooltipStartValue() {
-        const ctor = this.constructor;
-        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
-        return this.startValue.toFixed(stepPrecision);
-    }
-    get tooltipEndValue() {
-        const ctor = this.constructor;
-        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
-        return this.endValue.toFixed(stepPrecision);
-    }
     get _ariaDisabled() {
         return this.disabled || undefined;
     }
@@ -167,6 +176,12 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         this._updateHandlesAndRange(0);
         this.update(this._valueAffected, this.startValue, this.endValue);
     }
+    onAfterRendering() {
+        super.onAfterRendering();
+        [...this.getDomRef().querySelectorAll("[ui5-slider-tooltip]")].forEach(tooltip => {
+            tooltip.repositionTooltip();
+        });
+    }
     syncUIAndState() {
         // Validate step and update the stored state for the step property.
         if (this.isPropertyUpdated("step")) {
@@ -283,6 +298,8 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
             const newEndValue = ctor.clipValue(newValueOffset + this.endValue, min, max);
             this.update(affectedValue, newStartValue, newEndValue);
         }
+        this.tooltipStartValue = this.startValue.toString();
+        this.tooltipEndValue = this.endValue.toString();
     }
     /**
      * Determines affected value (start/end) depending on the currently
@@ -405,6 +422,8 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         }
         // Updates UI and state when dragging of the whole selected range
         this._updateValueOnRangeDrag(e);
+        this.tooltipStartValue = this.startValue.toString();
+        this.tooltipEndValue = this.endValue.toString();
     }
     /**
      * Updates UI and state when dragging a single Range Slider handle
@@ -636,7 +655,11 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
             : "[data-sap-ui-end-value]";
         const tooltip = this.shadowRoot.querySelector(tooltipSelector);
         if (tooltip?.hidePopover && tooltip?.showPopover) {
-            requestAnimationFrame(() => {
+            const frame = requestAnimationFrame(() => {
+                if (tooltip.getDomRef()?.offsetParent === null) {
+                    cancelAnimationFrame(frame);
+                    return;
+                }
                 tooltip.hidePopover();
                 tooltip.showPopover();
             });
@@ -650,6 +673,18 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         const tooltip = e.target;
         const isStart = tooltip.hasAttribute("data-sap-ui-start-value");
         const inputValue = parseFloat(e.detail.value);
+        const isInvalid = inputValue > this._effectiveMax || inputValue < this._effectiveMin;
+        if (isInvalid) {
+            if (isStart) {
+                this.tooltipStartValueState = ValueState.Negative;
+                this.tooltipStartValue = e.detail.value;
+            }
+            else {
+                this.tooltipEndValueState = ValueState.Negative;
+                this.tooltipEndValue = e.detail.value;
+            }
+            return;
+        }
         const clampedValue = Math.min(this.max, Math.max(this.min, inputValue));
         if (isStart) {
             this.startValue = clampedValue;
@@ -677,6 +712,44 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         this.update("value", this.startValue, this.endValue);
         this.fireDecoratorEvent("change");
     }
+    _onTooltipFocusChange(e) {
+        const tooltip = e.target;
+        const isStart = tooltip.hasAttribute("data-sap-ui-start-value");
+        const value = isStart ? this.tooltipStartValue : this.tooltipEndValue;
+        const isInvalid = parseFloat(value) > this._effectiveMax || parseFloat(value) < this._effectiveMin;
+        if (isInvalid) {
+            if (isStart) {
+                this.tooltipStartValueState = ValueState.None;
+                this.tooltipStartValue = this.startValue.toString();
+            }
+            else {
+                this.tooltipEndValueState = ValueState.None;
+                this.tooltipEndValue = this.endValue.toString();
+            }
+        }
+    }
+    _onTooltipOpen() {
+        const ctor = this.constructor;
+        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
+        this.tooltipStartValue = this.startValue.toFixed(stepPrecision);
+        this.tooltipEndValue = this.endValue.toFixed(stepPrecision);
+    }
+    _onTooltipInput(e) {
+        const tooltip = e.target;
+        const isStart = tooltip.hasAttribute("data-sap-ui-start-value");
+        if (isStart) {
+            this.tooltipStartValue = e.detail.value;
+        }
+        else {
+            this.tooltipEndValue = e.detail.value;
+        }
+    }
+    _onTooltipKeydown(e) {
+        if (isF2(e)) {
+            e.preventDefault();
+            e.target.followRef?.focus();
+        }
+    }
     _getFormattedValue(value) {
         const valueNumber = parseFloat(value);
         const ctor = this.constructor;
@@ -782,10 +855,22 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
 };
 __decorate([
     property({ type: Number })
-], RangeSlider.prototype, "startValue", void 0);
+], RangeSlider.prototype, "startValue", null);
 __decorate([
     property({ type: Number })
-], RangeSlider.prototype, "endValue", void 0);
+], RangeSlider.prototype, "endValue", null);
+__decorate([
+    property()
+], RangeSlider.prototype, "tooltipStartValue", void 0);
+__decorate([
+    property()
+], RangeSlider.prototype, "tooltipEndValue", void 0);
+__decorate([
+    property()
+], RangeSlider.prototype, "tooltipStartValueState", void 0);
+__decorate([
+    property()
+], RangeSlider.prototype, "tooltipEndValueState", void 0);
 __decorate([
     property({ type: Boolean })
 ], RangeSlider.prototype, "rangePressed", void 0);