@ui5/webcomponents 1.10.3 → 1.10.4

package/dist/test/pages/RangeSlider.html

@@ -21,7 +21,7 @@
 	<script>// delete Document.prototype.adoptedStyleSheets;</script>
 
 	
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/RangeSlider.html.437a9174.css">
 </head>
 
@@ -58,7 +58,14 @@
 				<span>endValue in the change event: </span>
 				<span id="change-event-endValue"></span>
 			</div>
-			
+			<div>
+				<span>startValue in the input event: </span>
+				<span id="input-event-startValue"></span>
+			</div>
+			<div>
+				<span>endValue in the input event: </span>
+				<span id="input-event-endValue"></span>
+			</div>
 			<h2>Event Testing Result Slider</h2>
 			<ui5-range-slider id="test-result-slider" start-value="1" end-value="2"></ui5-range-slider>
 		</section>
@@ -78,7 +85,11 @@
 			eventTargetSlider.addEventListener("ui5-change", (e) => {
 				document.getElementById("change-event-startValue").innerText = e.target.startValue;
 				document.getElementById("change-event-endValue").innerText = e.target.endValue;
+			});
 
+			eventTargetSlider.addEventListener("ui5-input", (e) => {
+				document.getElementById("input-event-startValue").innerText = e.target.startValue;
+				document.getElementById("input-event-endValue").innerText = e.target.endValue;
 			});
 		</script>
 	</body>

package/dist/test/pages/RatingIndicator.html

@@ -15,7 +15,7 @@
 
 
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/RatingIndicator.html.737cd73b.css">
 </head>
 

package/dist/test/pages/ResizeHandler.html

@@ -20,7 +20,7 @@
 
 	
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/ResizeHandler.html.ed7c5d20.css">
 </head>
 

package/dist/test/pages/ResponsivePopover.html

@@ -10,7 +10,7 @@
 
 
 	
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/ResponsivePopover.html.6f67ae07.css">
 </head>
 

package/dist/test/pages/SegmentedButton.html

@@ -14,7 +14,7 @@
 	<script>// delete Document.prototype.adoptedStyleSheets;</script>
 
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/SegmentedButton.html.8678479b.css">
 </head>
 

package/dist/test/pages/Select.html

@@ -14,7 +14,7 @@
 
 
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/Select.html.9c98a470.css">
 </head>
 

package/dist/test/pages/Simple.html

@@ -13,7 +13,7 @@
 
 
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/Simple.html.8f2ddb30.css">
 </head>
 

package/dist/test/pages/Slider.html

@@ -21,7 +21,7 @@
 
 
 	
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/Slider.html.8ea10965.css">
 </head>
 

package/dist/test/pages/SplitButton.html

@@ -12,7 +12,7 @@
 
 
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/SplitButton.html.5c992973.css">
 </head>
 

package/dist/test/pages/StepInput.html

@@ -23,7 +23,7 @@
 	</script>
 
 	
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/StepInput.html.f22c112d.css">
 </head>
 <body class="stepinput1auto">

package/dist/test/pages/Switch.html

@@ -11,7 +11,7 @@
 
 
 	<script>// delete Document.prototype.adoptedStyleSheets</script>
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/Switch.html.a4f3262f.css">
 </head>
 

package/dist/test/pages/TabContainer.html

@@ -14,7 +14,7 @@
 	</script>
 	
 	
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/TabContainer.html.7f2ade15.css">
 </head>
 

package/dist/test/pages/Table-perf-pure.html

@@ -20,7 +20,7 @@
 
 
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/Table-perf-pure.html.fce52e4b.css">
 </head>
 

package/dist/test/pages/Table-perf.html

@@ -20,7 +20,7 @@
 
 
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/Table-perf.html.88634378.css">
 </head>
 

package/dist/test/pages/Table.html

@@ -19,7 +19,7 @@
 	
 
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/Table.html.c43386f4.css">
 </head>
 

package/dist/test/pages/Table2.html

@@ -16,7 +16,7 @@
 
 
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/Table2.html.aca0c111.css">
 </head>
 

package/dist/test/pages/TableAllPopin.html

@@ -20,7 +20,7 @@
 
 
 	
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/TableAllPopin.html.ad586de4.css">
 </head>
 

package/dist/test/pages/TableCustomStyling.html

@@ -19,7 +19,7 @@
 	
 
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/TableCustomStyling.html.a85167d6.css">
 </head>
 

package/dist/test/pages/TableGrouping.html

@@ -16,7 +16,7 @@
 
 
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/TableGrouping.html.602ae2ad.css">
 </head>
 

package/dist/test/pages/TableGrowingWithButton.html

@@ -10,7 +10,7 @@
 	
 
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/TableGrowingWithButton.html.5a39b2bf.css">
 </head>
 

package/dist/test/pages/TableGrowingWithScroll.html

@@ -10,7 +10,7 @@
 	
 
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/TableGrowingWithScroll.html.8ef93d31.css">
 </head>
 

package/dist/test/pages/TableSelection.html

@@ -16,7 +16,7 @@
 
 
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/TableSelection.html.dba2d678.css">
 </head>
 

package/dist/test/pages/TextArea.html

@@ -23,7 +23,7 @@
 
 
 	
-		<script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+		<script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
 		<link rel="stylesheet" href="/assets/test/pages/TextArea.html.f8e10fd6.css">
 	</head>
 

package/dist/test/pages/TimePicker.html

@@ -13,7 +13,7 @@
 		
 
 
-		<script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+		<script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
 		<link rel="stylesheet" href="/assets/test/pages/TimePicker.html.9a4bb300.css">
 	</head>
 	<body class="timepicker1auto">

package/dist/test/pages/TimeSelection.html

@@ -13,7 +13,7 @@
 		
 
 
-		<script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+		<script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
 		<link rel="stylesheet" href="/assets/test/pages/TimeSelection.html.8ad57759.css">
 	</head>
 	<body class="timeselection1auto">

package/dist/test/pages/Title.html

@@ -12,7 +12,7 @@
 
 
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/Title.html.7bb51811.css">
 </head>
 

package/dist/test/pages/Toast.html

@@ -11,7 +11,7 @@
 	<script>// delete Document.prototype.adoptedStyleSheets;</script>
 
 	
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/Toast.html.47a93be2.css">
 </head>
 

package/dist/test/pages/ToggleButton.html

@@ -23,7 +23,7 @@
 
 
 	
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/ToggleButton.html.3b7dbb8c.css">
 </head>
 

package/dist/test/pages/Tree.html

@@ -21,7 +21,7 @@
 
 
 	
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/Tree.html.74fe2a1d.css">
 </head>
 

package/dist/test/pages/WheelSlider_Test_Page.html

@@ -17,7 +17,7 @@
 		integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="></script>
 
 	
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/WheelSlider_Test_Page.html.8a9a5e49.css">
 </head>
 	<body class="wheelslider_test_page1auto">

package/dist/test/pages/base/DOMObserver.html

@@ -10,7 +10,7 @@
 
     
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
 </head>
 
 <body>

package/dist/test/pages/base/InvisibleMessage.html

@@ -7,7 +7,7 @@
 	<title>InvisibleMessage</title>
 
     
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
 </head>
 
 <body style="background-color: var(--sapBackgroundColor);">

package/dist/test/pages/form.html

@@ -11,7 +11,7 @@
 
 
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/form.html.f0f82118.css">
 </head>
 

package/dist/test/pages/i18n-defaultLang.html

@@ -17,7 +17,7 @@
 	
 
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/i18n-defaultLang.html.b9d79c6b.css">
 </head>
 	<body class="i18n-defaultlang1auto">

package/dist/test/pages/i18n-demo.html

@@ -13,7 +13,7 @@
 
 	<script>// delete Document.prototype.adoptedStyleSheets;</script>
 
-  <script type="module" crossorigin src="/assets/bundle.common.04415578.js"></script>
+  <script type="module" crossorigin src="/assets/bundle.common.e67c4775.js"></script>
   <link rel="stylesheet" href="/assets/test/pages/i18n-demo.html.c6751b5c.css">
 </head>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "1.10.3",
+  "version": "1.10.4",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -42,14 +42,14 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.10.3",
-    "@ui5/webcomponents-icons": "1.10.3",
-    "@ui5/webcomponents-localization": "1.10.3",
-    "@ui5/webcomponents-theming": "1.10.3"
+    "@ui5/webcomponents-base": "1.10.4",
+    "@ui5/webcomponents-icons": "1.10.4",
+    "@ui5/webcomponents-localization": "1.10.4",
+    "@ui5/webcomponents-theming": "1.10.4"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.10.3",
+    "@ui5/webcomponents-tools": "1.10.4",
     "chromedriver": "109.0.0"
   },
-  "gitHead": "78222ac6ff90e19163d924b84ef405d39943e98d"
+  "gitHead": "b0199fba2d74d8f75ffcdd0846a848892d646732"
 }

package/src/RangeSlider.ts

@@ -217,6 +217,14 @@ class RangeSlider extends SliderBase {
 	 *
 	 */
 	onBeforeRendering() {
+		if (this.startValue > this.endValue) {
+			const affectedValue = this._valueAffected === "startValue" ? "endValue" : "startValue";
+
+			this._swapValues();
+			this._setAffectedValue(affectedValue);
+			this.update(affectedValue, this.startValue, this.endValue);
+		}
+
 		if (!this.isCurrentStateOutdated()) {
 			return;
 		}
@@ -311,12 +319,20 @@ class RangeSlider extends SliderBase {
 	*/
 	_onkeyup() {
 		super._onkeyup();
-
-		this._swapValues();
 		this._setAffectedValue(undefined);
+
+		if (this.startValue !== this._startValueAtBeginningOfAction || this.endValue !== this._endValueAtBeginningOfAction) {
+			this.fireEvent("change");
+		}
+
+		this._startValueAtBeginningOfAction = undefined;
+		this._endValueAtBeginningOfAction = undefined;
 	}
 
 	_handleActionKeyPress(e: KeyboardEvent) {
+		this._startValueAtBeginningOfAction = this.startValue;
+		this._endValueAtBeginningOfAction = this.endValue;
+
 		if (isEscape(e)) {
 			this.update(undefined, this._startValueInitial, this._endValueInitial);
 			return;
@@ -411,7 +427,7 @@ class RangeSlider extends SliderBase {
 			this.updateStateStorageAndFireInputEvent("endValue");
 			this._updateHandlesAndRange(0);
 		} else {
-			const newValue = startValue;
+			const newValue = endValue && affectedValue === "endValue" ? endValue : startValue;
 			this._updateHandlesAndRange(newValue || 0);
 
 			if (affectedValue === "startValue") {
@@ -535,21 +551,19 @@ class RangeSlider extends SliderBase {
 	}
 
 	_handleUp() {
-		this._swapValues();
 		this._setAffectedValueByFocusedElement();
 		this._setAffectedValue(undefined);
 
-		this._startValueAtBeginningOfAction = undefined;
-		this._endValueAtBeginningOfAction = undefined;
-		this._setIsPressInCurrentRange(false);
+		if (this.startValue !== this._startValueAtBeginningOfAction || this.endValue !== this._endValueAtBeginningOfAction) {
+			this.fireEvent("change");
+		}
 
+		this._setIsPressInCurrentRange(false);
 		this.handleUpBase();
 
 		this.rangePressed = false;
-
-		if (this.startValue !== this._startValueAtBeginningOfAction || this.endValue !== this._endValueAtBeginningOfAction) {
-			this.fireEvent("change");
-		}
+		this._startValueAtBeginningOfAction = undefined;
+		this._endValueAtBeginningOfAction = undefined;
 	}
 
 	/**
@@ -784,24 +798,26 @@ class RangeSlider extends SliderBase {
 	 */
 	_swapValues() {
 		const affectedValue = this._valueAffected;
+		if (!affectedValue) {
+			return;
+		}
 
 		if (affectedValue === "startValue" && this.startValue > this.endValue) {
 			const prevEndValue = this.endValue;
 			this.endValue = this.startValue;
 			this.startValue = prevEndValue;
-
-			this._setValuesAreReversed();
-			this.focusInnerElement();
 		}
 
 		if (affectedValue === "endValue" && this.endValue < this.startValue) {
 			const prevStartValue = this.startValue;
 			this.startValue = this.endValue;
 			this.endValue = prevStartValue;
-
-			this._setValuesAreReversed();
-			this.focusInnerElement();
 		}
+
+		this._setValuesAreReversed();
+		this._updateHandlesAndRange(this[affectedValue]);
+		this.focusInnerElement();
+		this.syncUIAndState();
 	}
 
 	/**

package/src/SegmentedButton.js

@@ -189,7 +189,7 @@ class SegmentedButton extends UI5Element {
 	}
 
 	_selectItem(event) {
-		const isTargetSegmentedButtonItem = event.target.tagName === "UI5-SEGMENTED-BUTTON-ITEM";
+		const isTargetSegmentedButtonItem = event.target.hasAttribute("ui5-segmented-button-item");
 
 		if (event.target.disabled || event.target === this.getDomRef() || !isTargetSegmentedButtonItem) {
 			return;
@@ -233,7 +233,7 @@ class SegmentedButton extends UI5Element {
 
 	_onmousedown(event) {
 		const eventTarget = event.target;
-		const isTargetSegmentedButtonItem = eventTarget.tagName === "UI5-SEGMENTED-BUTTON-ITEM";
+		const isTargetSegmentedButtonItem = eventTarget.hasAttribute("ui5-segmented-button-item");
 
 		if (isTargetSegmentedButtonItem) {
 			eventTarget.focus();

package/src/SliderBase.ts

@@ -331,26 +331,6 @@ class SliderBase extends UI5Element {
 
 	/**
 	 * Prevent focus out when inner element within the component is currently being in process of focusing in.
-	 * In theory this can be achieved either if the shadow root is focusable and 'delegatesFocus' attribute of
-	 * the .attachShadow() customElement method is set to true, or if we forward it manually.
-
-	 * As we use lit-element as base of our core UI5 element class that 'delegatesFocus' property is not set to 'true' and
-	 * we have to manage the focus here. If at some point in the future this changes, the focus delegating logic could be
-	 * removed as it will become redundant.
-	 *
-	 * When we manually set the focus on mouseDown to the first focusable element inside the shadowDom,
-	 * that inner focus (shadowRoot.activeElement) is set a moment before the global document.activeElement
-	 * is set to the customElement (ui5-slider) causing a 'race condition'.
-	 *
-	 * In order for a element within the shadowRoot to be focused, the global document.activeElement MUST be the parent
-	 * customElement of the shadow root, in our case the ui5-slider component. Because of that after our focusin of the handle,
-	 * a focusout event fired by the browser immidiatly after, resetting the focus. Focus out must be manually prevented
-	 * in both initial focusing and switching the focus between inner elements of the component cases.
-
-	 * Note: If we set the focus to the handle with a timeout or a bit later in time, on a mouseup or click event it will
-	 * work fine and we will avoid the described race condition as our host customElement will be already finished focusing.
-	 * However, that does not work for us as we need the focus to be set to the handle exactly on mousedown,
-	 * because of the nature of the component and its available drag interactions.
 	 *
 	 * @private
 	 */

package/src/themes/Button.css

@@ -106,6 +106,9 @@
 	/* calculating the minimum width by removing the icon size  */
 	min-width: calc(var(--_ui5_button_base_min_width) - var(--_ui5_button_base_icon_margin) - 1rem);
 }
+:host([disabled]:active) {
+		pointer-events: none;
+}
 
 :host([focused]) .ui5-button-root:after {
 	content: "";