From bc035bbc10b2ca2055d5c8698cc3054da12bf794 Mon Sep 17 00:00:00 2001
From: Tsanislav Gatev <tsanislav.gatev@sap.com>
Date: Fri, 19 Jan 2024 09:02:10 +0200
Subject: [PATCH] fix(ui5-date-time-picker): align calculations with density
 change (#8090)

fixes: #7992
---
 packages/main/src/DateTimePicker.ts         | 5 +++++
 packages/main/src/DateTimePickerPopover.hbs | 1 +
 packages/main/src/TimeSelection.hbs         | 4 ++++
 packages/main/src/TimeSelection.ts          | 3 +++
 packages/main/src/WheelSlider.hbs           | 1 +
 packages/main/src/WheelSlider.ts            | 6 ++++--
 6 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/DateTimePicker.ts b/packages/main/src/DateTimePicker.ts
index e547953a05ff..d75aa4d4ee94 100644
--- a/packages/main/src/DateTimePicker.ts
+++ b/packages/main/src/DateTimePicker.ts
@@ -4,6 +4,7 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import getEffectiveContentDensity from "@ui5/webcomponents-base/dist/util/getEffectiveContentDensity.js";
 import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import "@ui5/webcomponents-icons/dist/date-time.js";
@@ -349,6 +350,10 @@ class DateTimePicker extends DatePicker {
 		return !this._calendarSelectedDates || !this._calendarSelectedDates.length;
 	}
 
+	get _density() {
+		return getEffectiveContentDensity(this);
+	}
+
 	/**
 	 * Handles clicking on the <code>submit</code> button, within the picker`s footer.
 	 */
diff --git a/packages/main/src/DateTimePickerPopover.hbs b/packages/main/src/DateTimePickerPopover.hbs
index 167acca73993..d5ddb60ac1b6 100644
--- a/packages/main/src/DateTimePickerPopover.hbs
+++ b/packages/main/src/DateTimePickerPopover.hbs
@@ -49,6 +49,7 @@
 					._calendarType="{{_primaryCalendarType}}"
 					@ui5-change="{{onTimeSelectionChange}}"
 					@ui5-slider-change="{{onTimeSliderChange}}"
+					._density="{{_density}}"
 			></ui5-time-selection>
 		{{/if}}
 	</div>
diff --git a/packages/main/src/TimeSelection.hbs b/packages/main/src/TimeSelection.hbs
index 3d3328d6125a..c1edcc8275ba 100644
--- a/packages/main/src/TimeSelection.hbs
+++ b/packages/main/src/TimeSelection.hbs
@@ -9,6 +9,7 @@
 		<ui5-wheelslider
 				label = "{{hoursSliderTitle}}"
 				._items="{{hoursArray}}"
+				._density="{{_density}}"
 				data-sap-focus-ref
 				?expanded="{{_hoursSliderFocused}}"
 				value="{{_hours}}"
@@ -23,6 +24,7 @@
 		<ui5-wheelslider
 				label = "{{minutesSliderTitle}}"
 				._items="{{minutesArray}}"
+				._density="{{_density}}"
 				?expanded="{{_minutesSliderFocused}}"
 				value="{{_minutes}}"
 				@ui5-select="{{onMinutesChange}}"
@@ -36,6 +38,7 @@
 		<ui5-wheelslider
 				label = "{{secondsSliderTitle}}"
 				._items="{{secondsArray}}"
+				._density="{{_density}}"
 				?expanded="{{_secondsSliderFocused}}"
 				value="{{_seconds}}"
 				@ui5-select="{{onSecondsChange}}"
@@ -49,6 +52,7 @@
 		<ui5-wheelslider
 				label = "{{periodSliderTitle}}"
 				._items="{{periodsArray}}"
+				._density="{{_density}}"
 				?expanded="{{_periodSliderFocused}}"
 				value="{{_period}}"
 				@ui5-select="{{onPeriodChange}}"
diff --git a/packages/main/src/TimeSelection.ts b/packages/main/src/TimeSelection.ts
index 30793762e057..91493cec3cf8 100644
--- a/packages/main/src/TimeSelection.ts
+++ b/packages/main/src/TimeSelection.ts
@@ -176,6 +176,9 @@ class TimeSelection extends UI5Element {
 	@property({ type: CalendarType })
 	_calendarType!: CalendarType;
 
+	@property()
+	_density!: string;
+
 	static i18nBundle: I18nBundle;
 
 	static async onDefine() {
diff --git a/packages/main/src/WheelSlider.hbs b/packages/main/src/WheelSlider.hbs
index 5bd17eff2bb8..d5c3e077c2f0 100644
--- a/packages/main/src/WheelSlider.hbs
+++ b/packages/main/src/WheelSlider.hbs
@@ -9,6 +9,7 @@
 	data-sap-focus-ref
 	tabindex="0"
 	@wheel="{{_handleWheel}}"
+	._density="{{_density}}"
 >
 	<div class="ui5-wheelslider-header-block">
 		<div id="{{this._id}}--label" class="ui5-wheelslider-label">{{label}}</div>
diff --git a/packages/main/src/WheelSlider.ts b/packages/main/src/WheelSlider.ts
index 2e0be898145b..11e7cf9866d8 100644
--- a/packages/main/src/WheelSlider.ts
+++ b/packages/main/src/WheelSlider.ts
@@ -11,7 +11,6 @@ import {
 	isPageUp,
 	isPageDown,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import getEffectiveContentDensity from "@ui5/webcomponents-base/dist/util/getEffectiveContentDensity.js";
 import "@ui5/webcomponents-icons/dist/navigation-up-arrow.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
@@ -134,6 +133,9 @@ class WheelSlider extends UI5Element {
 	_scroller: ScrollEnablement;
 	_prevWheelTimestamp?: number;
 
+	@property()
+	_density!: string;
+
 	constructor() {
 		super();
 		this._currentElementIndex = 0;
@@ -200,7 +202,7 @@ class WheelSlider extends UI5Element {
 	}
 
 	get _itemCellHeight() {
-		const defaultSize = getEffectiveContentDensity(document.body) === "compact" ? CELL_SIZE_COMPACT : CELL_SIZE_COZY;
+		const defaultSize = this._density === "compact" ? CELL_SIZE_COMPACT : CELL_SIZE_COZY;
 
 		if (this.shadowRoot!.querySelectorAll(".ui5-wheelslider-item").length) {
 			const itemComputedStyle = getComputedStyle(this.shadowRoot!.querySelector(".ui5-wheelslider-item")!);