@ui5/webcomponents 0.0.0-a3eca7ade → 0.0.0-a8a75c830

package/dist/ColorPicker.js

@@ -1,562 +1,582 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ColorPicker_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
-import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import Float from "@ui5/webcomponents-base/dist/types/Float.js";
-import {
-	getRGBColor,
-	HSLToRGB,
-	HEXToRGB,
-	RGBToHSL,
-} from "@ui5/webcomponents-base/dist/util/ColorConversion.js";
-import ColorPickerTemplate from "./generated/templates/ColorPickerTemplate.lit.js";
-import Input from "./Input.js";
-import Slider from "./Slider.js";
-import Label from "./Label.js";
-
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
+import { getRGBColor, getAlpha, } from "@ui5/webcomponents-base/dist/util/ColorConversion.js";
+import "@ui5/webcomponents-icons/dist/expand.js";
+import ColorValue from "./colorpicker-utils/ColorValue.js";
+import ColorPickerTemplate from "./ColorPickerTemplate.js";
+import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
+import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
+import { COLORPICKER_LABEL, COLORPICKER_SLIDER_GROUP, COLORPICKER_ALPHA_SLIDER, COLORPICKER_HUE_SLIDER, COLORPICKER_HEX, COLORPICKER_RED, COLORPICKER_GREEN, COLORPICKER_BLUE, COLORPICKER_ALPHA, COLORPICKER_SATURATION, COLORPICKER_LIGHT, COLORPICKER_HUE, COLORPICKER_TOGGLE_MODE_TOOLTIP, COLORPICKER_PERCENTAGE, COLORPICKER_COLOR_MODE_CHANGED, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import ColorPickerCss from "./generated/themes/ColorPicker.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-color-picker",
-	properties: /** @lends sap.ui.webcomponents.main.ColorPicker.prototype */ {
-
-		/**
-		 * Defines the currently selected color of the component.
-		 * <br><br>
-		 * <b>Note</b>: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.
-		 * @type {CSSColor}
-		 * @public
-		 */
-		color: {
-			type: CSSColor,
-			defaultValue: "rgba(255, 255, 255, 1)",
-		},
-
-		/**
-		 * Defines the HEX code of the currently selected color
-		 * *Note*: If Alpha(transperancy) is set it is not included in this property. Use <code>color</code> property.
-		 * @type {string}
-		 * @private
-		 */
-		hex: {
-			type: String,
-			defaultValue: "ffffff",
-			noAttribute: true,
-		},
-
-		/**
-		 * Defines the current main color which is selected via the hue slider and is shown in the main color square.
-		 * @type {string}
-		 * @private
-		 */
-		_mainColor: {
-			type: Object,
-		},
-
-		// Defines the currenty selected color from the main color section.
-		_color: {
-			type: Object,
-		},
-
-		/**
-		 * @private
-		 */
-		_selectedCoordinates: {
-			type: Object,
-		},
-
-		/**
-		 * @private
-		 */
-		_alpha: {
-			type: Float,
-			defaultValue: 1,
-		},
-
-		/**
-		 * @private
-		 */
-		_hue: {
-			type: Integer,
-			defaultValue: 0,
-		},
-
-		/**
-		 * @private
-		 */
-		_isSelectedColorChanged: {
-			type: Boolean,
-		},
-
-		/**
-		 * @private
-		 */
-		 _isHueValueChanged: {
-			type: Boolean,
-		},
-
-		/**
-		 * @private
-		 */
-		_wrongHEX: {
-			type: Boolean,
-		},
-	},
-	slots: /** @lends sap.ui.webcomponents.main.ColorPicker.prototype */ {
-		//
-	},
-	events: /** @lends sap.ui.webcomponents.main.ColorPicker.prototype */ {
-		/**
-		 * Fired when the the selected color is changed
-		 *
-		 * @event
-		 * @public
-		 */
-		change: {},
-	},
-};
-
+const PICKER_POINTER_WIDTH = 6.5;
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-color-picker</code> allows users to choose any color and provides different input options for selecting colors.
+ * ### Overview
+ * The `ui5-color-picker` allows users to choose any color and provides different input options for selecting colors.
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
- * <h4>When to use:</h4
+ * #### When to use
  * Use the color picker if:
- * <ul>
- * <li> users need to select any color freely.</li>
- * </ul>
  *
- * <h4>When not to use:</h4>
- * <ul>
- * <li> Users need to select one color from a predefined set of colors. Use the ColorPalette component instead.</li>
- * </ul>
+ * -  users need to select any color freely.
+ *
+ * #### When not to use
  *
- * <h3>ES6 Module Import</h3>
+ * -  Users need to select one color from a predefined set of colors. Use the ColorPalette component instead.
  *
- * <code>import "@ui5/webcomponents/dist/ColorPicker.js";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/ColorPicker.js";`
  * @constructor
- * @author SAP SE
  * @since 1.0.0-rc.12
- * @alias sap.ui.webcomponents.main.ColorPicker
  * @extends UI5Element
- * @tagname ui5-color-picker
  * @public
  */
-class ColorPicker extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return ColorPickerCss;
-	}
-
-	static get template() {
-		return ColorPickerTemplate;
-	}
-
-	static get dependencies() {
-		return [
-			Input,
-			Slider,
-			Label,
-		];
-	}
-
-	constructor() {
-		super();
-
-		// Bottom Right corner
-		this._selectedCoordinates = {
-			x: 256 - 6.5,
-			y: 256 - 6.5,
-		};
-
-		// Default main color is red
-		this._mainColor = {
-			r: 255,
-			g: 0,
-			b: 0,
-		};
-
-		this.selectedHue = 0;
-
-		this.mouseDown = false;
-	}
-
-	onBeforeRendering() {
-		// we have the color & _mainColor properties here
-		this._color = 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", tempColor);
-	}
-
-	async onAfterRendering() {
-		if (isIE()) {
-			await renderFinished();
-			this._applySliderStyles();
-		}
-	}
-
-	_applySliderStyles() {
-		const hueSlider = this.getDomRef().querySelector(".ui5-color-picker-hue-slider").shadowRoot,
-			alphaSlider = this.getDomRef().querySelector(".ui5-color-picker-alpha-slider").shadowRoot;
-
-		if (hueSlider.children.length === 0 || alphaSlider.children.length === 0) {
-			return;
-		}
-
-		const hueProgressSlider = hueSlider.querySelector(".ui5-slider-progress-container"),
-			hueHandle = hueSlider.querySelector(".ui5-slider-handle"),
-			alphaProgressSlider = alphaSlider.querySelector(".ui5-slider-progress-container"),
-			alphaHandle = alphaSlider.querySelector(".ui5-slider-handle");
-
-		// ui5-slider::part(slider-handle)
-		hueHandle.style.width = "11px";
-		hueHandle.style.height = "1.25rem";
-		hueHandle.style.background = "transparent";
-		hueHandle.style.marginLeft = "-2px";
-		hueHandle.style.marginTop = "1px";
-
-		alphaHandle.style.width = "11px";
-		alphaHandle.style.height = "1.25rem";
-		alphaHandle.style.background = "transparent";
-		alphaHandle.style.marginLeft = "-2px";
-		alphaHandle.style.marginTop = "1px";
-
-		// ui5-slider::part(slider-handle)::after
-		// Skipped because it is pseudo element
-
-		// ui5-slider::part(progress-container)
-		hueProgressSlider.style.width = "calc(100% + 11px)";
-		hueProgressSlider.style.height = "18px";
-		hueProgressSlider.style.position = "absolute";
-		hueProgressSlider.style.marginTop = "-10px";
-		hueProgressSlider.style.borderRadius = "0";
-		hueProgressSlider.style.border = "1px solid #89919a";
-
-		alphaProgressSlider.style.width = "calc(100% + 11px)";
-		alphaProgressSlider.style.height = "18px";
-		alphaProgressSlider.style.position = "absolute";
-		alphaProgressSlider.style.marginTop = "-10px";
-		alphaProgressSlider.style.borderRadius = "0";
-		alphaProgressSlider.style.border = "1px solid #89919a";
-
-		// ui5-slider.ui5-color-picker-hue-slider::part(progress-container)
-		hueProgressSlider.style.backgroundSize = "100%";
-		hueProgressSlider.style.backgroundImage = "-webkit-linear-gradient(left, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)";
-		hueProgressSlider.style.backgroundImage = "-moz-linear-gradient(left, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)";
-		hueProgressSlider.style.backgroundImage = "-ms-linear-gradient(left, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)";
-		hueProgressSlider.style.backgroundImage = "linear-gradient(left, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)";
-		hueProgressSlider.style.backgroundColor = "none";
-
-		// ui5-slider.ui5-color-picker-alpha-slider::part(progress-container)
-		alphaProgressSlider.style.backgroundImage = "-webkit-linear-gradient(left, #fff, #979797)";
-		alphaProgressSlider.style.backgroundImage = "-moz-linear-gradient(left, #fff, #979797)";
-		alphaProgressSlider.style.backgroundImage = "-ms-linear-gradient(left, #fff, #979797)";
-		alphaProgressSlider.style.backgroundImage = "linear-gradient(left, #fff, #979797)";
-		alphaProgressSlider.style.backgroundColor = "none";
-
-		// ui5-slider::part(slider-progress)
-		hueSlider.querySelector(".ui5-slider-progress").style.background = "Transparent";
-		alphaSlider.querySelector(".ui5-slider-progress").style.background = "Transparent";
-	}
-
-	_handleMouseDown(event) {
-		this.mouseDown = true;
-		this.mouseIn = true;
-		this._changeSelectedColor(event.offsetX, event.offsetY);
-	}
-
-	_handleMouseUp() {
-		this.mouseDown = false;
-	}
-
-	_handleMouseOut(event) {
-		if (!this.mouseIn || !this.mouseDown) {
-			return;
-		}
-
-		const isLeft = event.offsetX <= 0;
-		const isUp = event.offsetY <= 0;
-		const isDown = event.offsetY >= event.target.offsetHeight;
-		const isRight = event.offsetX >= event.target.offsetWidth;
-
-		let x,
-			y;
-
-		if (isLeft) {
-			x = 0;
-		} else if (isRight) {
-			x = event.offsetWidth;
-		} else {
-			x = event.offsetX;
-		}
-
-		if (isUp) {
-			y = 0;
-		} else if (isDown) {
-			y = event.offsetHeight;
-		} else {
-			y = event.offsetY;
-		}
-
-		this._changeSelectedColor(x, y);
-		this.mouseIn = false;
-		this.mouseDown = false;
-	}
-
-	_handleMouseMove(event) {
-		if (!this.mouseDown || !this.mouseIn) {
-			return;
-		}
-
-		this._changeSelectedColor(event.offsetX, event.offsetY);
-	}
-
-	_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);
-		// Idication that changes to the hue value triggered as a result of user pressing over the hue slider.
-		this._isHueValueChanged = true;
-
-		const tempColor = this._calculateColorFromCoordinates(this._selectedCoordinates.x + 6.5, this._selectedCoordinates.y + 6.5);
-
-		if (tempColor) {
-			this._setColor(HSLToRGB(tempColor));
-		}
-	}
-
-	_handleHEXChange(event) {
-		let newValue = event.target.value.toLowerCase();
-		const hexRegex = new RegExp("^[<0-9 abcdef]+$");
-
-		// Shorthand Syntax
-		if (newValue.length === 3) {
-			newValue = `${newValue[0]}${newValue[0]}${newValue[1]}${newValue[1]}${newValue[2]}${newValue[2]}`;
-		}
-
-		if (newValue === this.hex) {
-			return;
-		}
-
-		this.hex = newValue;
-		if (newValue.length !== 6 || !hexRegex.test(newValue)) {
-			this._wrongHEX = true;
-		} else {
-			this._wrongHEX = false;
-			this._setColor(HEXToRGB(this.hex));
-		}
-	}
-
-	_handleRGBInputsChange(event) {
-		const targetValue = parseInt(event.target.value) || 0;
-		let tempColor;
-		switch (event.target.id) {
-		case "red":
-			tempColor = { ...this._color, r: targetValue };
-			break;
-
-		case "green":
-			tempColor = { ...this._color, g: targetValue };
-			break;
-
-		case "blue":
-			tempColor = { ...this._color, b: targetValue };
-			break;
-		default:
-			tempColor = { ...this._color };
-		}
-
-		this._setColor(tempColor);
-	}
-
-	_setMainColor(hueValue) {
-		if (hueValue <= 255) {
-			this._mainColor = {
-				r: 255,
-				g: hueValue,
-				b: 0,
-			};
-		} else if (hueValue <= 510) {
-			this._mainColor = {
-				r: 255 - (hueValue - 255),
-				g: 255,
-				b: 0,
-			};
-		} else if (hueValue <= 765) {
-			this._mainColor = {
-				r: 0,
-				g: 255,
-				b: hueValue - 510,
-			};
-		} else if (hueValue <= 1020) {
-			this._mainColor = {
-				r: 0,
-				g: 765 - (hueValue - 255),
-				b: 255,
-			};
-		} else if (hueValue <= 1275) {
-			this._mainColor = {
-				r: hueValue - 1020,
-				g: 0,
-				b: 255,
-			};
-		} else {
-			this._mainColor = {
-				r: 255,
-				g: 0,
-				b: 1275 - (hueValue - 255),
-			};
-		}
-	}
-
-	_handleAlphaChange(event) {
-		this._alpha = this._alpha < 0 ? 0 : this._alpha;
-		this._alpha = this._alpha > 1 ? 1 : this._alpha;
-	}
-
-	_changeSelectedColor(x, y) {
-		this._selectedCoordinates = {
-			x: x - 6.5, // Center the coordinates, because of the width of the circle
-			y: y - 6.5, // Center the coordinates, because of the height of the circle
-		};
-
-		// Idication that changes to the color settings are triggered as a result of user pressing over the main color section.
-		this._isSelectedColorChanged = true;
-
-		const tempColor = this._calculateColorFromCoordinates(x, y);
-		if (tempColor) {
-			this._setColor(HSLToRGB(tempColor));
-		}
-	}
-
-	_onkeydown(event) {
-		if (isEnter(event)) {
-			this._handleHEXChange(event);
-		}
-	}
-
-	_calculateColorFromCoordinates(x, y) {
-		// By using the selected coordinates(x = Lightness, y = Saturation) and hue(selected from the hue slider)
-		// and HSL format, the color will be parsed to RGB
-
-		const h = this._hue / 4.25, // 0 ≤ H < 360
-			// 0 ≤ S ≤ 1
-			s = 1 - +(Math.round((y / 256) + "e+2") + "e-2"), // eslint-disable-line
-			// 0 ≤ V ≤ 1
-			l = +(Math.round((x / 256) + "e+2") + "e-2"); // eslint-disable-line
-
-		if (!s || !l) {
-			// The event is finished out of the main color section
-			return;
-		}
-
-		return {
-			h,
-			s,
-			l,
-		};
-	}
-
-	_setColor(color = {
-		r: undefined,
-		g: undefined,
-		b: undefined,
-	}) {
-		this.color = `rgba(${color.r}, ${color.g}, ${color.b}, ${this._alpha})`;
-
-		this.fireEvent("change");
-	}
-
-	_setHex() {
-		let red = this._color.r.toString(16),
-			green = this._color.g.toString(16),
-			blue = this._color.b.toString(16);
-
-		if (red.length === 1) {
-			red = `0${red}`;
-		}
-		if (green.length === 1) {
-			green = `0${green}`;
-		}
-		if (blue.length === 1) {
-			blue = `0${blue}`;
-		}
-
-		this.hex = red + green + blue;
-	}
-
-	_setValues() {
-		const hslColours = RGBToHSL(this._color);
-		this._selectedCoordinates = {
-			x: ((Math.round(hslColours.l * 100) * 2.56)) - 6.5, // Center the coordinates, because of the width of the circle
-			y: (256 - (Math.round(hslColours.s * 100) * 2.56)) - 6.5, // Center the coordinates, because of the height of the circle
-		};
-
-		if (this._isSelectedColorChanged) { // We shouldn't update the hue value when user presses over the main color section.
-			this._isSelectedColorChanged = false;
-		} else if (this._isHueValueChanged) { // We shouldn't recalculate the hue value when user changes the hue slider.
-			this._isHueValueChanged = false;
-			this._hue = this.selectedHue ? this.selectedHue : this._hue;
-		} else {
-			this._hue = Math.round(hslColours.h * 4.25);
-		}
-
-		this._setMainColor(this._hue);
-	}
-
-	get inputsDisabled() {
-		return this._wrongHEX ? true : undefined;
-	}
-
-	get hexInputErrorState() {
-		return this._wrongHEX ? "Error" : undefined;
-	}
-
-	get styles() {
-		return {
-			mainColor: {
-				"background-color": `rgb(${this._mainColor.r}, ${this._mainColor.g}, ${this._mainColor.b})`,
-			},
-			circle: {
-				left: `${this._selectedCoordinates.x}px`,
-				top: `${this._selectedCoordinates.y}px`,
-			},
-			progressContainer: {
-				"background-image": `-webkit-linear-gradient(left, rgba(65, 120, 13, 0), ${this._mainColor}, url('data:image/png;base64,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')`,
-			},
-			colorSpan: {
-				"background-color": `rgba(${this._color.r}, ${this._color.g}, ${this._color.b}, ${this._alpha})`,
-			},
-		};
-	}
-}
-
+let ColorPicker = ColorPicker_1 = class ColorPicker extends UI5Element {
+    async formElementAnchor() {
+        return this.getFocusDomRefAsync();
+    }
+    get formFormattedValue() {
+        return this.value;
+    }
+    constructor() {
+        super();
+        /**
+         * Defines the currently selected color of the component.
+         *
+         * **Note**: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.
+         * @default "rgba(255,255,255,1)"
+         * @public
+         */
+        this.value = "rgba(255,255,255,1)";
+        /**
+         * When set to `true`, the alpha slider and inputs for RGB values will not be displayed.
+         * @default false
+         * @public
+         * @since 2.5.0
+         */
+        this.simplified = false;
+        /**
+         * @private
+         */
+        this._alpha = 1;
+        /**
+         * @private
+         */
+        this._hue = 0;
+        /**
+         * @private
+         */
+        this._isSelectedColorChanged = false;
+        /**
+         * @private
+         */
+        this._isHueValueChanged = false;
+        /**
+         * @private
+         */
+        this._wrongHEX = false;
+        /**
+         * @private
+         */
+        this._displayHSL = false;
+        this._colorValue = new ColorValue();
+        // Bottom Right corner
+        this._selectedCoordinates = {
+            x: 256 - PICKER_POINTER_WIDTH,
+            y: 256 - PICKER_POINTER_WIDTH,
+        };
+        // Default main color is red
+        this._mainValue = {
+            r: 255,
+            g: 0,
+            b: 0,
+        };
+        this.selectedHue = 0;
+        this.mouseDown = false;
+        this.mouseIn = false;
+    }
+    onBeforeRendering() {
+        const valueAsRGB = getRGBColor(this.value);
+        if (!this._isColorValueEqual(valueAsRGB)) {
+            this._colorValue.RGB = valueAsRGB;
+        }
+        const alpha = getAlpha(this.value);
+        if (alpha !== this._colorValue.Alpha) {
+            this._colorValue.Alpha = alpha;
+            this._alpha = this._colorValue.Alpha;
+        }
+        const tempColor = this._colorValue.toRGBString();
+        this._updateColorGrid();
+        this.style.setProperty("--ui5_Color_Picker_Progress_Container_Color", tempColor);
+    }
+    _handleMouseDown(e) {
+        this.mouseDown = true;
+        this.mouseIn = true;
+        this._changeSelectedColor(e.offsetX, e.offsetY);
+    }
+    _handleMouseUp() {
+        this.mouseDown = false;
+    }
+    _handleMouseOut(e) {
+        if (!this.mouseIn || !this.mouseDown) {
+            return;
+        }
+        const target = e.target;
+        const offsetHeight = target.offsetHeight;
+        const offsetWidth = target.offsetWidth;
+        const isLeft = e.offsetX <= 0;
+        const isUp = e.offsetY <= 0;
+        const isDown = e.offsetY >= target.offsetHeight;
+        const isRight = e.offsetX >= target.offsetWidth;
+        let x, y;
+        if (isLeft) {
+            x = 0;
+        }
+        else if (isRight) {
+            // Note: - e.offsetWidth has been changed to e.target.offsetWidth as offsetWidth does not exist on the event object
+            x = offsetWidth;
+        }
+        else {
+            x = e.offsetX;
+        }
+        if (isUp) {
+            y = 0;
+        }
+        else if (isDown) {
+            // Note: - e.offsetWidth has been changed to e.target.offsetWidth as offsetWidth does not exist on the event object
+            y = offsetHeight;
+        }
+        else {
+            y = e.offsetY;
+        }
+        this._changeSelectedColor(x, y);
+        this.mouseIn = false;
+        this.mouseDown = false;
+    }
+    _handleMouseMove(e) {
+        if (!this.mouseDown || !this.mouseIn) {
+            return;
+        }
+        this._changeSelectedColor(e.offsetX, e.offsetY);
+    }
+    _handleAlphaInput(e) {
+        const aphaInputValue = String(e.currentTarget.value);
+        this._alphaTemp = aphaInputValue;
+        this._alpha = parseFloat(aphaInputValue);
+        if (Number.isNaN(this._alpha)) {
+            this._alpha = 1;
+        }
+        this._colorValue.Alpha = this._alpha;
+        this._isHueValueChanged = true;
+        const color = this._colorValue.toRGBString();
+        this._setValue(color);
+    }
+    _handleHueInput(e) {
+        this.selectedHue = e.target.value;
+        this._hue = this.selectedHue;
+        this._setMainColor(this._hue);
+        // Idication that changes to the hue value triggered as a result of user pressing over the hue slider.
+        this._isHueValueChanged = true;
+        this._colorValue.H = this._hue;
+        const color = this._colorValue.toRGBString();
+        this._setValue(color);
+    }
+    _handleHEXChange(e) {
+        const input = e.target;
+        let inputValueLowerCase = input.value.toLowerCase();
+        if (inputValueLowerCase.startsWith("#")) {
+            inputValueLowerCase = inputValueLowerCase.slice(1);
+        }
+        // Shorthand Syntax
+        if (inputValueLowerCase.length === 3) {
+            inputValueLowerCase = `${inputValueLowerCase[0]}${inputValueLowerCase[0]}${inputValueLowerCase[1]}${inputValueLowerCase[1]}${inputValueLowerCase[2]}${inputValueLowerCase[2]}`;
+        }
+        this._colorValue.HEX = inputValueLowerCase;
+        const isValidColor = this._colorValue.isColorValueValid();
+        if (isValidColor && input.value !== inputValueLowerCase) {
+            this._wrongHEX = false;
+            input.value = inputValueLowerCase;
+        }
+        if (!isValidColor) {
+            this._wrongHEX = true;
+        }
+        else {
+            this._wrongHEX = false;
+            const color = this._colorValue.toRGBString();
+            this._setValue(color);
+        }
+    }
+    _togglePickerMode() {
+        this._displayHSL = !this._displayHSL;
+        // Announce a message to screen readers
+        announce(this.colorFieldsAnnouncementText, InvisibleMessageMode.Polite);
+    }
+    _handleColorInputChange(e) {
+        const target = e.target;
+        const targetValue = parseInt(target.value) || 0;
+        let normalizedValue = targetValue;
+        switch (target.id) {
+            case "red":
+                this._colorValue.R = targetValue;
+                normalizedValue = this._colorValue.R;
+                break;
+            case "green":
+                this._colorValue.G = targetValue;
+                normalizedValue = this._colorValue.G;
+                break;
+            case "blue":
+                this._colorValue.B = targetValue;
+                normalizedValue = this._colorValue.B;
+                break;
+            case "hue":
+                this._colorValue.H = targetValue;
+                normalizedValue = this._colorValue.H;
+                break;
+            case "saturation":
+                this._colorValue.S = targetValue;
+                normalizedValue = this._colorValue.S;
+                break;
+            case "light":
+                this._colorValue.L = targetValue;
+                normalizedValue = this._colorValue.L;
+                break;
+        }
+        target.value = String(normalizedValue);
+        const color = this._colorValue.toRGBString();
+        this._setValue(color);
+        this._updateColorGrid();
+    }
+    _setMainColor(hueValue) {
+        const hueValueMod = hueValue * 4.251;
+        if (hueValueMod <= 255) {
+            this._mainValue = {
+                r: 255,
+                g: hueValueMod,
+                b: 0,
+            };
+        }
+        else if (hueValueMod <= 510) {
+            this._mainValue = {
+                r: 255 - (hueValueMod - 255),
+                g: 255,
+                b: 0,
+            };
+        }
+        else if (hueValueMod <= 765) {
+            this._mainValue = {
+                r: 0,
+                g: 255,
+                b: hueValueMod - 510,
+            };
+        }
+        else if (hueValueMod <= 1020) {
+            this._mainValue = {
+                r: 0,
+                g: 765 - (hueValueMod - 255),
+                b: 255,
+            };
+        }
+        else if (hueValueMod <= 1275) {
+            this._mainValue = {
+                r: hueValueMod - 1020,
+                g: 0,
+                b: 255,
+            };
+        }
+        else {
+            this._mainValue = {
+                r: 255,
+                g: 0,
+                b: 1275 - (hueValueMod - 255),
+            };
+        }
+    }
+    _handleAlphaChange() {
+        // parse the input value if valid or fallback to default
+        this._alpha = this._alphaTemp ? parseFloat(this._alphaTemp) : 1;
+        if (Number.isNaN(this._alpha)) {
+            this._alpha = 1;
+        }
+        // reset input value so _alpha is rendered
+        this._alphaTemp = undefined;
+        // normalize range
+        this._alpha = this._alpha < 0 ? 0 : this._alpha;
+        this._alpha = this._alpha > 1 ? 1 : this._alpha;
+        this._colorValue.Alpha = this._alpha;
+    }
+    _changeSelectedColor(x, y) {
+        this._selectedCoordinates = {
+            x: x - PICKER_POINTER_WIDTH, // Center the coordinates, because of the width of the circle
+            y: y - PICKER_POINTER_WIDTH, // Center the coordinates, because of the height of the circle
+        };
+        // Idication that changes to the color settings are triggered as a result of user pressing over the main color section.
+        this._isSelectedColorChanged = true;
+        const tempColor = this._calculateColorFromCoordinates(x, y);
+        if (tempColor) {
+            this._colorValue.HSL = tempColor;
+            const color = this._colorValue.toRGBString();
+            this._setValue(color);
+        }
+    }
+    _onkeydown(e) {
+        if (isEnter(e)) {
+            this._handleHEXChange(e);
+        }
+    }
+    _calculateColorFromCoordinates(x, y) {
+        // By using the selected coordinates(x = Lightness, y = Saturation) and hue(selected from the hue slider)
+        // and HSL format, the color will be parsed to RGB
+        // 0 ≤ H < 360
+        // 4.251 because with 4.25 we get out of the colors range.
+        const h = this._hue;
+        let s = +(1 - (y / 256)).toFixed(2);
+        let l = +(x / 256).toFixed(2);
+        if (Number.isNaN(s) || Number.isNaN(l)) {
+            // The event is finished out of the main color section
+            return;
+        }
+        // Normalize values to be between 0 and 1 in case of rounding issues
+        s = Math.max(0, Math.min(1, s));
+        l = Math.max(0, Math.min(1, l));
+        return {
+            h: Math.round(h),
+            s: Math.round(s * 100),
+            l: Math.round(l * 100),
+        };
+    }
+    _setValue(color) {
+        this.value = color;
+        this._wrongHEX = !this._colorValue.isColorValueValid();
+        this.fireDecoratorEvent("change");
+    }
+    _updateColorGrid() {
+        const hslColours = this._colorValue.HSL;
+        this._selectedCoordinates = {
+            x: ((hslColours.l * 2.56)) - PICKER_POINTER_WIDTH, // Center the coordinates, because of the width of the circle
+            y: (256 - (hslColours.s * 2.56)) - PICKER_POINTER_WIDTH, // Center the coordinates, because of the height of the circle
+        };
+        if (this._isSelectedColorChanged) { // We shouldn't update the hue value when user presses over the main color section.
+            this._isSelectedColorChanged = false;
+        }
+        else if (this._isHueValueChanged) { // We shouldn't recalculate the hue value when user changes the hue slider.
+            this._isHueValueChanged = false;
+            this._hue = this.selectedHue ? this.selectedHue : this._hue;
+        }
+        else {
+            this._hue = hslColours.h;
+        }
+        this._setMainColor(this._hue);
+    }
+    _isColorValueEqual(value) {
+        return this._colorValue.R === value.r
+            && this._colorValue.G === value.g
+            && this._colorValue.B === value.b;
+    }
+    get colorPickerLabel() {
+        const effectiveLabel = getEffectiveAriaLabelText(this);
+        return effectiveLabel
+            ? `${ColorPicker_1.i18nBundle.getText(COLORPICKER_LABEL)} ${effectiveLabel}`
+            : ColorPicker_1.i18nBundle.getText(COLORPICKER_LABEL);
+    }
+    get sliderGroupLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_SLIDER_GROUP);
+    }
+    get hueSliderLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_HUE_SLIDER);
+    }
+    get alphaSliderLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_ALPHA_SLIDER);
+    }
+    get hexInputLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_HEX);
+    }
+    get redInputLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_RED);
+    }
+    get greenInputLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_GREEN);
+    }
+    get blueInputLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_BLUE);
+    }
+    get hueInputLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_HUE);
+    }
+    get saturationInputLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_SATURATION);
+    }
+    get lightInputLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_LIGHT);
+    }
+    get alphaInputLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_ALPHA);
+    }
+    get percentageLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_PERCENTAGE);
+    }
+    get colorFieldsAnnouncementText() {
+        const mode = this._displayHSL ? "HSL" : "RGB";
+        let text = "";
+        if (mode === "RGB") {
+            text = `${this.redInputLabel} ${this._colorValue.R}, `
+                + `${this.greenInputLabel} ${this._colorValue.G}, `
+                + `${this.blueInputLabel} ${this._colorValue.B}, `
+                + `${this.alphaInputLabel} ${this._colorValue.Alpha}`;
+        }
+        else {
+            text = `${this.hueInputLabel} ${this._colorValue.H}, `
+                + `${this.saturationInputLabel} ${this._colorValue.S} ${this.percentageLabel}, `
+                + `${this.lightInputLabel} ${this._colorValue.L} ${this.percentageLabel}, `
+                + `${this.alphaInputLabel} ${this._colorValue.Alpha}`;
+        }
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_COLOR_MODE_CHANGED, mode, text);
+    }
+    get toggleModeTooltip() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_TOGGLE_MODE_TOOLTIP);
+    }
+    get inputsDisabled() {
+        return this._wrongHEX ? true : undefined;
+    }
+    get hexInputErrorState() {
+        return this._wrongHEX ? "Negative" : "None";
+    }
+    get rgbInputs() {
+        const redInput = {
+            id: "red",
+            value: this._colorValue.R,
+            label: "R",
+            accessibleName: this.redInputLabel,
+        };
+        const greenInput = {
+            id: "green",
+            value: this._colorValue.G,
+            label: "G",
+            accessibleName: this.greenInputLabel,
+        };
+        const blueInput = {
+            id: "blue",
+            value: this._colorValue.B,
+            label: "B",
+            accessibleName: this.blueInputLabel,
+        };
+        return [redInput, greenInput, blueInput];
+    }
+    get hslInputs() {
+        const hueInput = {
+            id: "hue",
+            value: this._colorValue.H,
+            label: "H",
+            accessibleName: this.hueInputLabel,
+        };
+        const saturationInput = {
+            id: "saturation",
+            value: this._colorValue.S,
+            label: "S",
+            accessibleName: this.saturationInputLabel,
+            showPercentSymbol: true,
+        };
+        const lightInput = {
+            id: "light",
+            value: this._colorValue.L,
+            label: "L",
+            accessibleName: this.lightInputLabel,
+            showPercentSymbol: true,
+        };
+        return [hueInput, saturationInput, lightInput];
+    }
+    get HEX() {
+        return this._colorValue.HEX;
+    }
+    get colorChannelInputs() {
+        return this._displayHSL ? this.hslInputs : this.rgbInputs;
+    }
+    get _isDefaultPickerMode() {
+        return !this.simplified;
+    }
+};
+__decorate([
+    property()
+], ColorPicker.prototype, "value", void 0);
+__decorate([
+    property()
+], ColorPicker.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPicker.prototype, "simplified", void 0);
+__decorate([
+    property()
+], ColorPicker.prototype, "accessibleName", void 0);
+__decorate([
+    property()
+], ColorPicker.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property({ type: Object })
+], ColorPicker.prototype, "_mainValue", void 0);
+__decorate([
+    property({ type: Object })
+], ColorPicker.prototype, "_colorValue", void 0);
+__decorate([
+    property({ type: Object })
+], ColorPicker.prototype, "_selectedCoordinates", void 0);
+__decorate([
+    property({ type: Number })
+], ColorPicker.prototype, "_alpha", void 0);
+__decorate([
+    property()
+], ColorPicker.prototype, "_alphaTemp", void 0);
+__decorate([
+    property({ type: Number })
+], ColorPicker.prototype, "_hue", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPicker.prototype, "_isSelectedColorChanged", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPicker.prototype, "_isHueValueChanged", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPicker.prototype, "_wrongHEX", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPicker.prototype, "_displayHSL", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], ColorPicker, "i18nBundle", void 0);
+ColorPicker = ColorPicker_1 = __decorate([
+    customElement({
+        tag: "ui5-color-picker",
+        renderer: jsxRenderer,
+        formAssociated: true,
+        styles: ColorPickerCss,
+        template: ColorPickerTemplate,
+        shadowRootOptions: { delegatesFocus: true },
+    })
+    /**
+     * Fired when the the selected color is changed
+     * @public
+     */
+    ,
+    event("change", {
+        bubbles: true,
+    })
+], ColorPicker);
 ColorPicker.define();
-
 export default ColorPicker;
+//# sourceMappingURL=ColorPicker.js.map