@openui5/sap.ui.webc.main 1.96.2 → 1.97.0

package/src/sap/ui/webc/main/thirdparty/CheckBox.js

@@ -6,6 +6,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
 	var ValueState__default = /*#__PURE__*/_interopDefaultLegacy(ValueState);
 
+	let isGlobalHandlerAttached = false;
+	let activeCb = null;
 	const metadata = {
 		tag: "ui5-checkbox",
 		languageAware: true,
@@ -36,6 +38,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 			name: {
 				type: String,
 			},
+			active: {
+				type: Boolean,
+			},
 		},
 		events:  {
 			change: {},
@@ -61,7 +66,15 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 		}
 		constructor() {
 			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
+			this._deactivate = () => {
+				if (activeCb) {
+					activeCb.active = false;
+				}
+			};
+			if (!isGlobalHandlerAttached) {
+				document.addEventListener("mouseup", this._deactivate);
+				isGlobalHandlerAttached = true;
+			}
 		}
 		onBeforeRendering() {
 			this._enableFormSupport();
@@ -80,18 +93,31 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 		_onclick() {
 			this.toggle();
 		}
+		_onmousedown() {
+			this.active = true;
+			activeCb = this;
+		}
+		_onmouseup() {
+			this.active = false;
+		}
+		_onfocusout() {
+			this.active = false;
+		}
 		_onkeydown(event) {
 			if (Keys.isSpace(event)) {
 				event.preventDefault();
+				this.active = true;
 			}
 			if (Keys.isEnter(event)) {
 				this.toggle();
+				this.active = true;
 			}
 		}
 		_onkeyup(event) {
 			if (Keys.isSpace(event)) {
 				this.toggle();
 			}
+			this.active = false;
 		}
 		toggle() {
 			if (this.canToggle()) {
@@ -110,11 +136,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 			return !(this.disabled || this.readonly);
 		}
 		valueStateTextMappings() {
-			const i18nBundle = this.i18nBundle;
 			return {
-				"Error": i18nBundle.getText(i18nDefaults.VALUE_STATE_ERROR),
-				"Warning": i18nBundle.getText(i18nDefaults.VALUE_STATE_WARNING),
-				"Success": i18nBundle.getText(i18nDefaults.VALUE_STATE_SUCCESS),
+				"Error": CheckBox.i18nBundle.getText(i18nDefaults.VALUE_STATE_ERROR),
+				"Warning": CheckBox.i18nBundle.getText(i18nDefaults.VALUE_STATE_WARNING),
+				"Success": CheckBox.i18nBundle.getText(i18nDefaults.VALUE_STATE_SUCCESS),
 			};
 		}
 		get classes() {
@@ -159,7 +184,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 			];
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			CheckBox.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 	}
 	CheckBox.define();

package/src/sap/ui/webc/main/thirdparty/ColorPalette.js

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sap/ui/webc/common/thirdparty/base/types/CSSColor', 'sap/ui/webc/common/thirdparty/base/types/ItemNavigationBehavior', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/FeaturesRegistry', './generated/templates/ColorPaletteTemplate.lit', './generated/templates/ColorPaletteDialogTemplate.lit', './ColorPaletteItem', './generated/i18n/i18n-defaults', './generated/themes/ColorPalette.css', './generated/themes/ColorPaletteStaticArea.css'], function (UI5Element, litRender, i18nBundle, ItemNavigation, CSSColor, ItemNavigationBehavior, Keys, FeaturesRegistry, ColorPaletteTemplate_lit, ColorPaletteDialogTemplate_lit, ColorPaletteItem, i18nDefaults, ColorPalette_css, ColorPaletteStaticArea_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sap/ui/webc/common/thirdparty/base/types/CSSColor', 'sap/ui/webc/common/thirdparty/base/types/ItemNavigationBehavior', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/FeaturesRegistry', './generated/templates/ColorPaletteTemplate.lit', './generated/templates/ColorPaletteDialogTemplate.lit', './ColorPaletteItem', './generated/i18n/i18n-defaults', './generated/themes/ColorPalette.css', './generated/themes/ColorPaletteStaticArea.css'], function (UI5Element, litRender, i18nBundle, ItemNavigation, CSSColor, ItemNavigationBehavior, Device, Keys, FeaturesRegistry, ColorPaletteTemplate_lit, ColorPaletteDialogTemplate_lit, ColorPaletteItem, i18nDefaults, ColorPalette_css, ColorPaletteStaticArea_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -18,9 +18,18 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			showMoreColors: {
 				type: Boolean,
 			},
+			showDefaultColor: {
+				type: Boolean,
+			},
+			defaultColor: {
+				type: CSSColor__default,
+			},
 			_selectedColor: {
 				type: CSSColor__default,
 			},
+			popupMode: {
+				type: Boolean,
+			},
 		},
 		slots:  {
 			"default": {
@@ -64,16 +73,24 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return [ColorPaletteItem].concat(ColorPaletteMoreColors ? ColorPaletteMoreColors.dependencies : []);
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			const ColorPaletteMoreColors = FeaturesRegistry.getFeature("ColorPaletteMoreColors");
+			[ColorPalette.i18nBundle] = await Promise.all([
+				i18nBundle.getI18nBundle("@ui5/webcomponents"),
+				ColorPaletteMoreColors ? ColorPaletteMoreColors.init() : Promise.resolve(),
+			]);
 		}
 		constructor() {
 			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 			this._itemNavigation = new ItemNavigation__default(this, {
 				getItemsCallback: () => this.displayedColors,
-				rowSize: 5,
+				rowSize: this.rowSize,
 				behavior: ItemNavigationBehavior__default.Cyclic,
 			});
+			this._itemNavigationRecentColors = new ItemNavigation__default(this, {
+				getItemsCallback: () => this.recentColorsElements,
+				rowSize: this.rowSize,
+				behavior: ItemNavigationBehavior__default.Static,
+			});
 			this._recentColors = [];
 		}
 		onBeforeRendering() {
@@ -90,6 +107,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			}
 		}
 		selectColor(item) {
+			if (!item.value) {
+				return;
+			}
 			item.focus();
 			if (this.displayedColors.includes(item)) {
 				this._itemNavigation.setCurrentItem(item);
@@ -115,16 +135,105 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			}
 		}
 		_onkeyup(event) {
-			if (Keys.isSpace(event)) {
+			if (Keys.isSpace(event) && event.target.localName === "ui5-color-palette-item") {
 				event.preventDefault();
 				this.selectColor(event.target);
 			}
 		}
 		_onkeydown(event) {
-			if (Keys.isEnter(event)) {
+			if (Keys.isEnter(event) && event.target.localName === "ui5-color-palette-item") {
 				this.selectColor(event.target);
 			}
 		}
+		_onDefaultColorKeyDown(event) {
+			if (Keys.isTabNext(event) && this.popupMode) {
+				event.preventDefault();
+				this._onDefaultColorClick();
+			}
+			if (Keys.isDown(event)) {
+				event.stopPropagation();
+				this.focusColorElement(this.colorPaletteNavigationElements[1], this._itemNavigation);
+			} else if (Keys.isUp(event)) {
+				event.stopPropagation();
+				const lastElementInNavigation = this.colorPaletteNavigationElements[this.colorPaletteNavigationElements.length - 1];
+				if (this.hasRecentColors) {
+					this.focusColorElement(lastElementInNavigation, this._itemNavigationRecentColors);
+				} else if (this.showMoreColors) {
+					lastElementInNavigation.focus();
+				} else {
+					const colorPaletteFocusIndex = (this.displayedColors.length % this.rowSize) * this.rowSize;
+					this.focusColorElement(this.displayedColors[colorPaletteFocusIndex], this._itemNavigation);
+				}
+			}
+		}
+		_onMoreColorsKeyDown(event) {
+			const index = this.colorPaletteNavigationElements.indexOf(event.target);
+			const colorPaletteFocusIndex = (this.displayedColors.length % this.rowSize) * this.rowSize;
+			if (Keys.isUp(event)) {
+				event.stopPropagation();
+				this.focusColorElement(this.displayedColors[colorPaletteFocusIndex], this._itemNavigation);
+			} else if (Keys.isDown(event)) {
+				event.stopPropagation();
+				if (this.hasRecentColors) {
+					this.focusColorElement(this.colorPaletteNavigationElements[index + 1], this._itemNavigationRecentColors);
+				} else if (this.showDefaultColor) {
+					this.colorPaletteNavigationElements[0].focus();
+				} else {
+					this.focusColorElement(this.displayedColors[0], this._itemNavigation);
+				}
+			}
+		}
+		_onColorContainerKeyDown(event) {
+			const lastElementInNavigation = this.colorPaletteNavigationElements[this.colorPaletteNavigationElements.length - 1];
+			if (Keys.isTabNext(event) && this.popupMode) {
+				event.preventDefault();
+				this.selectColor(event.target);
+			}
+			if (Keys.isUp(event) && event.target === this.displayedColors[0] && this.colorPaletteNavigationElements.length > 1) {
+				event.stopPropagation();
+				if (this.showDefaultColor) {
+					this.colorPaletteNavigationElements[0].focus();
+				} else if (!this.showDefaultColor && this.hasRecentColors) {
+					this.focusColorElement(lastElementInNavigation, this._itemNavigationRecentColors);
+				} else if (!this.showDefaultColor && this.showMoreColors) {
+					lastElementInNavigation.focus();
+				}
+			} else if (Keys.isDown(event) && event.target === this.displayedColors[this.displayedColors.length - 1] && this.colorPaletteNavigationElements.length > 1) {
+				event.stopPropagation();
+				const isRecentColorsNextElement = (this.showDefaultColor && !this.showMoreColors && this.hasRecentColors) || (!this.showDefaultColor && !this.showMoreColors && this.hasRecentColors);
+				if (this.showDefaultColor && this.showMoreColors) {
+					this.colorPaletteNavigationElements[2].focus();
+				} else if (this.showDefaultColor && !this.showMoreColors && (!this.showRecentColors || !this.recentColors[0])) {
+					this.colorPaletteNavigationElements[0].focus();
+				} else if (isRecentColorsNextElement) {
+					this.focusColorElement(lastElementInNavigation, this._itemNavigationRecentColors);
+				} else if (!this.showDefaultColor && this.showMoreColors) {
+					this.colorPaletteNavigationElements[1].focus();
+				}
+			}
+		}
+		_onRecentColorsContainerKeyDown(event) {
+			if (Keys.isUp(event)) {
+				if (this.showMoreColors) {
+					this.colorPaletteNavigationElements[1 + this.showDefaultColor].focus();
+				} else if (!this.showMoreColors && this.colorPaletteNavigationElements.length > 1) {
+					const colorPaletteFocusIndex = (this.displayedColors.length % this.rowSize) * this.rowSize;
+					event.stopPropagation();
+					this.focusColorElement(this.displayedColors[colorPaletteFocusIndex], this._itemNavigation);
+				}
+			} else if (Keys.isDown(event)) {
+				if (this.showDefaultColor) {
+					this.colorPaletteNavigationElements[0].focus();
+				} else {
+					event.stopPropagation();
+					this.focusColorElement(this.displayedColors[0], this._itemNavigation);
+				}
+			}
+		}
+		focusColorElement(element, itemNavigation) {
+			itemNavigation.setCurrentItem(element);
+			itemNavigation._focusCurrentItem();
+		}
 		async _chooseCustomColor() {
 			const colorPicker = await this.getColorPicker();
 			this._setColor(colorPicker.color);
@@ -138,30 +247,70 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			const dialog = await this._getDialog();
 			dialog.show();
 		}
+		_onDefaultColorClick() {
+			if (this.defaultColor) {
+				this._setColor(this.defaultColor);
+			}
+		}
 		get selectedColor() {
 			return this._selectedColor;
 		}
 		get displayedColors() {
-			return this.colors.filter(item => item.value).slice(0, 15);
+			return this.getSlottedNodes("colors").filter(item => item.value).slice(0, 15);
 		}
 		get colorContainerLabel() {
-			return this.i18nBundle.getText(i18nDefaults.COLORPALETTE_CONTAINER_LABEL);
+			return ColorPalette.i18nBundle.getText(i18nDefaults.COLORPALETTE_CONTAINER_LABEL);
 		}
 		get colorPaleteMoreColorsText() {
-			return this.i18nBundle.getText(i18nDefaults.COLOR_PALETTE_MORE_COLORS_TEXT);
+			return ColorPalette.i18nBundle.getText(i18nDefaults.COLOR_PALETTE_MORE_COLORS_TEXT);
 		}
 		get _showMoreColors() {
 			return this.showMoreColors && this.moreColorsFeature;
 		}
+		get rowSize() {
+			return 5;
+		}
+		get hasRecentColors() {
+			return this.showRecentColors && this.recentColors[0];
+		}
 		get recentColors() {
-			if (this._recentColors.length > 5) {
-				this._recentColors = this._recentColors.slice(0, 5);
+			if (this._recentColors.length > this.rowSize) {
+				this._recentColors = this._recentColors.slice(0, this.rowSize);
 			}
-			while (this._recentColors.length < 5) {
+			while (this._recentColors.length < this.rowSize) {
 				this._recentColors.push("");
 			}
 			return this._recentColors;
 		}
+		get recentColorsElements() {
+			if (this.getDomRef()) {
+				return Array.from(this.getDomRef().querySelectorAll(".ui5-cp-recent-colors-wrapper [ui5-color-palette-item]")).filter(x => x.value !== "");
+			}
+			return [];
+		}
+		get colorPaletteNavigationElements() {
+			const navigationElements = [];
+			const rootElement = this.shadowRoot.querySelector(".ui5-cp-root");
+			if (this.showDefaultColor) {
+				navigationElements.push(rootElement.querySelector(".ui5-cp-default-color-button"));
+			}
+			navigationElements.push(this.displayedColors[0]);
+			if (this.showMoreColors) {
+				navigationElements.push(rootElement.querySelector(".ui5-cp-more-colors"));
+			}
+			if (this.showRecentColors && !!this.recentColorsElements.length) {
+				navigationElements.push(this.recentColorsElements[0]);
+			}
+			return navigationElements;
+		}
+		get classes() {
+			return {
+				colorPaletteRoot: {
+					"ui5-cp-root": true,
+					"ui5-cp-root-phone": Device.isPhone(),
+				},
+			};
+		}
 		async _getDialog() {
 			const staticAreaItem = await this.getStaticAreaItemDomRef();
 			return staticAreaItem.querySelector("[ui5-dialog]");

package/src/sap/ui/webc/main/thirdparty/ColorPaletteItem.js

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/types/CSSColor', './generated/templates/ColorPaletteItemTemplate.lit', './generated/i18n/i18n-defaults', './generated/themes/ColorPaletteItem.css'], function (UI5Element, litRender, i18nBundle, CSSColor, ColorPaletteItemTemplate_lit, i18nDefaults, ColorPaletteItem_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/types/CSSColor', 'sap/ui/webc/common/thirdparty/base/Device', './generated/templates/ColorPaletteItemTemplate.lit', './generated/i18n/i18n-defaults', './generated/themes/ColorPaletteItem.css'], function (UI5Element, litRender, i18nBundle, CSSColor, Device, ColorPaletteItemTemplate_lit, i18nDefaults, ColorPaletteItem_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -21,6 +21,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			index: {
 				type: String,
 			},
+			phone: {
+				type: Boolean,
+			},
 			_disabled: {
 				type: Boolean,
 			},
@@ -44,17 +47,24 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return ColorPaletteItemTemplate_lit;
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			ColorPaletteItem.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		constructor() {
 			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		onBeforeRendering() {
 			this._disabled = !this.value;
+			this.phone = Device.isPhone();
 		}
 		get colorLabel() {
-			return this.i18nBundle.getText(i18nDefaults.COLORPALETTE_COLOR_LABEL);
+			return ColorPaletteItem.i18nBundle.getText(i18nDefaults.COLORPALETTE_COLOR_LABEL);
+		}
+		get styles() {
+			return {
+				root: {
+					"background-color": this.value,
+				},
+			};
 		}
 	}
 	ColorPaletteItem.define();

package/src/sap/ui/webc/main/thirdparty/ColorPalettePopover.js

@@ -0,0 +1,110 @@
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/types/CSSColor', './generated/templates/ColorPalettePopoverTemplate.lit', './generated/themes/ColorPalettePopover.css', './generated/themes/ResponsivePopoverCommon.css', './generated/i18n/i18n-defaults', './Button', './ResponsivePopover', './ColorPalette'], function (UI5Element, litRender, i18nBundle, CSSColor, ColorPalettePopoverTemplate_lit, ColorPalettePopover_css, ResponsivePopoverCommon_css, i18nDefaults, Button, ResponsivePopover, ColorPalette) { 'use strict';
+
+	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
+	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
+	var CSSColor__default = /*#__PURE__*/_interopDefaultLegacy(CSSColor);
+
+	const metadata = {
+		tag: "ui5-color-palette-popover",
+		managedSlots: true,
+		properties:  {
+			showRecentColors: {
+				type: Boolean,
+			},
+			showMoreColors: {
+				type: Boolean,
+			},
+			showDefaultColor: {
+				type: Boolean,
+			},
+			defaultColor: {
+				type: CSSColor__default,
+			},
+		},
+		slots:  {
+			"default": {
+				type: HTMLElement,
+				propertyName: "colors",
+				individualSlots: true,
+			},
+		},
+		events:  {
+			"item-click": {
+				details: {
+					color: {
+						type: String,
+					},
+				},
+			 },
+		},
+	};
+	class ColorPalettePopover extends UI5Element__default {
+		static get metadata() {
+			return metadata;
+		}
+		static get render() {
+			return litRender__default;
+		}
+		static get styles() {
+			return [ResponsivePopoverCommon_css, ColorPalettePopover_css];
+		}
+		static get template() {
+			return ColorPalettePopoverTemplate_lit;
+		}
+		static get dependencies() {
+			return [
+				ResponsivePopover,
+				Button,
+				ColorPalette,
+			];
+		}
+		static async onDefine() {
+			ColorPalettePopover.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
+		}
+		constructor() {
+			super();
+		}
+		_respPopover() {
+			this.responsivePopover = this.shadowRoot.querySelector("[ui5-responsive-popover]");
+			return this.responsivePopover;
+		}
+		_colorPalette() {
+			return this.responsivePopover.content[0].querySelector("[ui5-color-palette]");
+		}
+		closePopover() {
+			this.responsivePopover.close();
+		}
+		openPopover(opener) {
+			this._respPopover();
+			this.responsivePopover.showAt(opener, true);
+			if (this.showDefaultColor) {
+				this._colorPalette().colorPaletteNavigationElements[0].focus();
+			} else {
+				this._colorPalette().focusColorElement(this._colorPalette().colorPaletteNavigationElements[0], this._colorPalette()._itemNavigation);
+			}
+		}
+		onSelectedColor(event) {
+			this.closePopover();
+			this.fireEvent("item-click", event.detail);
+		}
+		isOpen() {
+			this._respPopover();
+			return this.responsivePopover.opened;
+		}
+		get colorPaletteColors() {
+			return this.getSlottedNodes("colors");
+		}
+		get _colorPaletteTitle() {
+			return ColorPalettePopover.i18nBundle.getText(i18nDefaults.COLORPALETTE_POPOVER_TITLE);
+		}
+		get _cancelButtonLabel() {
+			return ColorPalettePopover.i18nBundle.getText(i18nDefaults.COLOR_PALETTE_DIALOG_CANCEL_BUTTON);
+		}
+	}
+	ColorPalettePopover.define();
+
+	return ColorPalettePopover;
+
+});

package/src/sap/ui/webc/main/thirdparty/ColorPicker.js

@@ -83,9 +83,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		onBeforeRendering() {
 			this._color = ColorConversion.getRGBColor(this.color);
+			const tempColor = `rgba(${this._color.r}, ${this._color.g}, ${this._color.b}, 1)`;
 			this._setHex();
 			this._setValues();
-			this.style.setProperty("--ui5_Color_Picker_Progress_Container_Color", this.color);
+			this.style.setProperty("--ui5_Color_Picker_Progress_Container_Color", tempColor);
 		}
 		async onAfterRendering() {
 			if (Device.isIE()) {
@@ -183,10 +184,16 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		_handleAlphaInput(event) {
 			this._alpha = parseFloat(event.target.value);
+			this._setColor(this._color);
 		}
 		_handleHueInput(event) {
 			this.selectedHue = event.target.value;
+			this._hue = this.selectedHue;
 			this._setMainColor(this._hue);
+			const tempColor = this._calculateColorFromCoordinates(this._selectedCoordinates.x + 6.5, this._selectedCoordinates.y + 6.5);
+			if (tempColor) {
+				this._setColor(ColorConversion.HSLToRGB(tempColor));
+			}
 		}
 		_handleHEXChange(event) {
 			let newValue = event.target.value.toLowerCase();
@@ -215,6 +222,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			case "blue":
 				tempColor = { ...this._color, b: targetValue };
 				break;
+			default:
+				tempColor = { ...this._color };
 			}
 			this._setColor(tempColor);
 		}