@ui5/webcomponents 0.0.0-701b14e36 → 0.0.0-760fbb471

package/dist/ColorPalettePopover.js

@@ -1,101 +1,27 @@
+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 ColorPalettePopover_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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
 import ColorPalettePopoverTemplate from "./generated/templates/ColorPalettePopoverTemplate.lit.js";
-
 // Styles
 import ColorPalettePopoverCss from "./generated/themes/ColorPalettePopover.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
-import {
-	COLORPALETTE_POPOVER_TITLE,
-	COLOR_PALETTE_DIALOG_CANCEL_BUTTON,
-} from "./generated/i18n/i18n-defaults.js";
-
+import { COLORPALETTE_POPOVER_TITLE, COLOR_PALETTE_DIALOG_CANCEL_BUTTON, } from "./generated/i18n/i18n-defaults.js";
 import Button from "./Button.js";
 import Title from "./Title.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import ColorPalette from "./ColorPalette.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-color-palette-popover",
-	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.ColorPalettePopover.prototype */ {
-		/**
-		 * Defines whether the user can see the last used colors in the bottom of the component
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		showRecentColors: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether the user can choose a custom color from a component.
-		 * <b>Note:</b> In order to use this property you need to import the following module: <code>"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"</code>
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		showMoreColors: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether the user can choose the default color from a button.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		showDefaultColor: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the default color of the component.
-		 * <b>Note:</b> The default color should be a part of the ColorPalette colors</code>
-		 * @type {CSSColor}
-		 * @public
-		 */
-		defaultColor: {
-			type: CSSColor,
-		},
-	},
-	slots: /** @lends sap.ui.webcomponents.main.ColorPalettePopover.prototype */ {
-		/**
-		 * Defines the content of the component.
-		 * @type {sap.ui.webcomponents.main.IColorPaletteItem[]}
-		 * @slot colors
-		 * @public
-		 */
-		"default": {
-			type: HTMLElement,
-			propertyName: "colors",
-			individualSlots: true,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.main.ColorPalettePopover.prototype */ {
-		/**
-		 * Fired when the user selects a color.
-		 *
-		 * @event sap.ui.webcomponents.main.ColorPalettePopover#item-click
-		 * @public
-		 * @param {string} color the selected color
-		 */
-		"item-click": {
-			details: {
-				color: {
-					type: String,
-				},
-			},
-		 },
-	},
-};
-
 /**
  * @class
  *
@@ -119,126 +45,133 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.ColorPalettePopover
- * @extends UI5Element
+ * @alias sap.ui.webc.main.ColorPalettePopover
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-color-palette-popover
  * @public
  * @since 1.0.0-rc.16
  */
-class ColorPalettePopover extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return [ResponsivePopoverCommonCss, ColorPalettePopoverCss];
-	}
-
-	static get template() {
-		return ColorPalettePopoverTemplate;
-	}
-
-	static get dependencies() {
-		return [
-			ResponsivePopover,
-			Button,
-			Title,
-			ColorPalette,
-		];
-	}
-
-	static async onDefine() {
-		ColorPalettePopover.i18nBundle = await 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]");
-	}
-
-	/**
-	 * Shows the ColorPalettePopover.
-	 * @param {HTMLElement} opener the element that the popover is shown at
-	 * @public
-	 * @since 1.1.1
-	 */
-	showAt(opener) {
-		this._openPopover(opener);
-	}
-
-	/**
-	 * Shows the ColorPalettePopover.
-	 * <b>Note:</b> The method is deprecated and will be removed in future, use <code>showAt</code> instead.
-	 * @param {HTMLElement} opener the element that the popover is shown at
-	 * @public
-	 * @since 1.0.0-rc.16
-	 * @deprecated The method is deprecated in favour of <code>showAt</code>.
-	 */
-	openPopover(opener) {
-		console.warn("The method 'openPopover' is deprecated and will be removed in future, use 'showAt' instead."); // eslint-disable-line
-		this._openPopover(opener);
-	}
-
-	_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);
-		}
-	}
-
-	closePopover() {
-		this.responsivePopover.close();
-	}
-
-	onSelectedColor(event) {
-		this.closePopover();
-		this.fireEvent("item-click", event.detail);
-	}
-
-	/**
-	 * Returns if the component is opened.
-	 *
-	 * @protected
-	 * @since 1.0.0-rc.16
-	 * @returns {boolean}
-	 */
-	isOpen() {
-		this._respPopover();
-
-		return this.responsivePopover.opened;
-	}
-
-	get colorPaletteColors() {
-		return this.getSlottedNodes("colors");
-	}
-
-	get _colorPaletteTitle() {
-		return ColorPalettePopover.i18nBundle.getText(COLORPALETTE_POPOVER_TITLE);
-	}
-
-	get _cancelButtonLabel() {
-		return ColorPalettePopover.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);
-	}
-}
-
+let ColorPalettePopover = ColorPalettePopover_1 = class ColorPalettePopover extends UI5Element {
+    static async onDefine() {
+        ColorPalettePopover_1.i18nBundle = await 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]");
+    }
+    /**
+     * Shows the ColorPalettePopover.
+     * @param {HTMLElement} opener the element that the popover is shown at
+     * @public
+     * @method
+     * @name sap.ui.webc.main.ColorPalettePopover#showAt
+     * @since 1.1.1
+     */
+    showAt(opener) {
+        this._openPopover(opener);
+    }
+    /**
+     * Shows the ColorPalettePopover.
+     * <b>Note:</b> The method is deprecated and will be removed in future, use <code>showAt</code> instead.
+     * @param {HTMLElement} opener the element that the popover is shown at
+     * @public
+     * @method
+     * @name sap.ui.webc.main.ColorPalettePopover#openPopover
+     * @since 1.0.0-rc.16
+     * @deprecated The method is deprecated in favour of <code>showAt</code>.
+     */
+    openPopover(opener) {
+        console.warn("The method 'openPopover' is deprecated and will be removed in future, use 'showAt' instead."); // eslint-disable-line
+        this._openPopover(opener);
+    }
+    _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);
+        }
+    }
+    closePopover() {
+        this.responsivePopover.close();
+    }
+    onSelectedColor(e) {
+        this.closePopover();
+        this.fireEvent("item-click", e.detail);
+    }
+    /**
+     * Returns if the component is opened.
+     *
+     * @protected
+     * @since 1.0.0-rc.16
+     * @returns {boolean}
+     */
+    isOpen() {
+        this._respPopover();
+        return this.responsivePopover.opened;
+    }
+    get colorPaletteColors() {
+        return this.getSlottedNodes("colors");
+    }
+    get _colorPaletteTitle() {
+        return ColorPalettePopover_1.i18nBundle.getText(COLORPALETTE_POPOVER_TITLE);
+    }
+    get _cancelButtonLabel() {
+        return ColorPalettePopover_1.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], ColorPalettePopover.prototype, "showRecentColors", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPalettePopover.prototype, "showMoreColors", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPalettePopover.prototype, "showDefaultColor", void 0);
+__decorate([
+    property({ validator: CSSColor })
+], ColorPalettePopover.prototype, "defaultColor", void 0);
+__decorate([
+    slot({ "default": true, type: HTMLElement, individualSlots: true })
+], ColorPalettePopover.prototype, "colors", void 0);
+ColorPalettePopover = ColorPalettePopover_1 = __decorate([
+    customElement({
+        tag: "ui5-color-palette-popover",
+        renderer: litRender,
+        styles: [ResponsivePopoverCommonCss, ColorPalettePopoverCss],
+        template: ColorPalettePopoverTemplate,
+        dependencies: [
+            ResponsivePopover,
+            Button,
+            Title,
+            ColorPalette,
+        ],
+    })
+    /**
+     * Fired when the user selects a color.
+     *
+     * @event sap.ui.webc.main.ColorPalettePopover#item-click
+     * @public
+     * @param {string} color the selected color
+     */
+    ,
+    event("item-click", {
+        detail: {
+            color: {
+                type: String,
+            },
+        },
+    })
+], ColorPalettePopover);
 ColorPalettePopover.define();
-
 export default ColorPalettePopover;
+//# sourceMappingURL=ColorPalettePopover.js.map

package/dist/ColorPalettePopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPalettePopover.js","sourceRoot":"","sources":["../src/ColorPalettePopover.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 property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport CSSColor from \"@ui5/webcomponents-base/dist/types/CSSColor.js\";\nimport ColorPalettePopoverTemplate from \"./generated/templates/ColorPalettePopoverTemplate.lit.js\";\n\n// Styles\nimport ColorPalettePopoverCss from \"./generated/themes/ColorPalettePopover.css.js\";\nimport ResponsivePopoverCommonCss from \"./generated/themes/ResponsivePopoverCommon.css.js\";\nimport {\n\tCOLORPALETTE_POPOVER_TITLE,\n\tCOLOR_PALETTE_DIALOG_CANCEL_BUTTON,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport Button from \"./Button.js\";\nimport Title from \"./Title.js\";\nimport ResponsivePopover from \"./ResponsivePopover.js\";\nimport ColorPalette from \"./ColorPalette.js\";\nimport type { ColorPaletteItemClickEventDetail } from \"./ColorPalette.js\";\nimport type ColorPaletteItem from \"./ColorPaletteItem.js\";\n\ntype ColorPalettePopoverItemClickEventDetail = ColorPaletteItemClickEventDetail;\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n * Represents a predefined range of colors for easier selection.\n *\n * Overview\n * The ColorPalettePopover provides the users with a slot to predefine colors.\n *\n * You can customize them with the use of the colors property. You can specify a defaultColor and display a \"Default color\" button for the user to choose directly.\n * You can display a \"More colors...\" button that opens an additional color picker for the user to choose specific colors that are not present in the predefined range.\n *\n * <h3>Usage</h3>\n *\n * The palette is intended for users, who don't want to check and remember the different values of the colors and spend large amount of time to configure the right color through the color picker.\n *\n * For the <code>ui5-color-palette-popover</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import @ui5/webcomponents/dist/ColorPalettePopover.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.ColorPalettePopover\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-color-palette-popover\n * @public\n * @since 1.0.0-rc.16\n */\n@customElement({\n\ttag: \"ui5-color-palette-popover\",\n\trenderer: litRender,\n\tstyles: [ResponsivePopoverCommonCss, ColorPalettePopoverCss],\n\ttemplate: ColorPalettePopoverTemplate,\n\tdependencies: [\n\t\tResponsivePopover,\n\t\tButton,\n\t\tTitle,\n\t\tColorPalette,\n\t],\n})\n\n/**\n * Fired when the user selects a color.\n *\n * @event sap.ui.webc.main.ColorPalettePopover#item-click\n * @public\n * @param {string} color the selected color\n */\n@event(\"item-click\", {\n\tdetail: {\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t},\n\t},\n})\nclass ColorPalettePopover extends UI5Element {\n\t/**\n\t * Defines whether the user can see the last used colors in the bottom of the component\n\t * @type {boolean}\n\t * @name sap.ui.webc.main.ColorPalettePopover.prototype.showRecentColors\n\t * @defaultvalue false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowRecentColors!: boolean;\n\n\t/**\n\t * Defines whether the user can choose a custom color from a component.\n\t * <b>Note:</b> In order to use this property you need to import the following module: <code>\"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js\"</code>\n\t * @type {boolean}\n\t * @name sap.ui.webc.main.ColorPalettePopover.prototype.showMoreColors\n\t * @defaultvalue false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowMoreColors!: boolean;\n\n\t/**\n\t * Defines whether the user can choose the default color from a button.\n\t * @type {boolean}\n\t * @name sap.ui.webc.main.ColorPalettePopover.prototype.showDefaultColor\n\t * @defaultvalue false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowDefaultColor!: boolean;\n\n\t/**\n\t * Defines the default color of the component.\n\t * <b>Note:</b> The default color should be a part of the ColorPalette colors</code>\n\t * @type {sap.ui.webc.base.types.CSSColor}\n\t * @name sap.ui.webc.main.ColorPalettePopover.prototype.defaultColor\n\t * @public\n\t */\n\t@property({ validator: CSSColor })\n\tdefaultColor?: string;\n\n\t/**\n\t * Defines the content of the component.\n\t * @type {sap.ui.webc.main.IColorPaletteItem[]}\n\t * @name sap.ui.webc.main.ColorPalettePopover.prototype.default\n\t * @slot colors\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement, individualSlots: true })\n\tcolors!: Array<ColorPaletteItem>;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tresponsivePopover?: ResponsivePopover;\n\n\tstatic async onDefine() {\n\t\tColorPalettePopover.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\t_respPopover() {\n\t\tthis.responsivePopover = this.shadowRoot!.querySelector<ResponsivePopover>(\"[ui5-responsive-popover]\")!;\n\t\treturn this.responsivePopover;\n\t}\n\n\t_colorPalette() {\n\t\treturn this.responsivePopover!.content[0].querySelector<ColorPalette>(\"[ui5-color-palette]\")!;\n\t}\n\n\t/**\n\t * Shows the ColorPalettePopover.\n\t * @param {HTMLElement} opener the element that the popover is shown at\n\t * @public\n\t * @method\n\t * @name sap.ui.webc.main.ColorPalettePopover#showAt\n\t * @since 1.1.1\n\t */\n\tshowAt(opener: HTMLElement) {\n\t\tthis._openPopover(opener);\n\t}\n\n\t/**\n\t * Shows the ColorPalettePopover.\n\t * <b>Note:</b> The method is deprecated and will be removed in future, use <code>showAt</code> instead.\n\t * @param {HTMLElement} opener the element that the popover is shown at\n\t * @public\n\t * @method\n\t * @name sap.ui.webc.main.ColorPalettePopover#openPopover\n\t * @since 1.0.0-rc.16\n\t * @deprecated The method is deprecated in favour of <code>showAt</code>.\n\t */\n\topenPopover(opener: HTMLElement) {\n\t\tconsole.warn(\"The method 'openPopover' is deprecated and will be removed in future, use 'showAt' instead.\"); // eslint-disable-line\n\t\tthis._openPopover(opener);\n\t}\n\n\t_openPopover(opener: HTMLElement) {\n\t\tthis._respPopover();\n\n\t\tthis.responsivePopover!.showAt(opener, true);\n\n\t\tif (this.showDefaultColor) {\n\t\t\tthis._colorPalette().colorPaletteNavigationElements[0].focus();\n\t\t} else {\n\t\t\tthis._colorPalette().focusColorElement(this._colorPalette().colorPaletteNavigationElements[0], this._colorPalette()._itemNavigation);\n\t\t}\n\t}\n\n\tclosePopover() {\n\t\tthis.responsivePopover!.close();\n\t}\n\n\tonSelectedColor(e: CustomEvent<ColorPaletteItemClickEventDetail>) {\n\t\tthis.closePopover();\n\t\tthis.fireEvent<ColorPalettePopoverItemClickEventDetail>(\"item-click\", e.detail);\n\t}\n\n\t/**\n\t * Returns if the component is opened.\n\t *\n\t * @protected\n\t * @since 1.0.0-rc.16\n\t * @returns {boolean}\n\t */\n\tisOpen() {\n\t\tthis._respPopover();\n\t\treturn this.responsivePopover!.opened;\n\t}\n\n\tget colorPaletteColors() {\n\t\treturn this.getSlottedNodes<ColorPaletteItem>(\"colors\");\n\t}\n\n\tget _colorPaletteTitle() {\n\t\treturn ColorPalettePopover.i18nBundle.getText(COLORPALETTE_POPOVER_TITLE);\n\t}\n\n\tget _cancelButtonLabel() {\n\t\treturn ColorPalettePopover.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);\n\t}\n}\n\nColorPalettePopover.define();\n\nexport default ColorPalettePopover;\nexport type { ColorPalettePopoverItemClickEventDetail };\n"]}

package/dist/ColorPicker.d.ts

@@ -0,0 +1,140 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { ColorRGB } from "@ui5/webcomponents-base/dist/util/ColorConversion.js";
+type ColorCoordinates = {
+    x: number;
+    y: number;
+};
+/**
+ * @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.
+ *
+ * <h3>Usage</h3>
+ *
+ * <h4>When to use:</h4
+ * 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>
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/ColorPicker.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @since 1.0.0-rc.12
+ * @alias sap.ui.webc.main.ColorPicker
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-color-picker
+ * @public
+ */
+declare class ColorPicker extends UI5Element {
+    /**
+     * 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 {sap.ui.webc.base.types.CSSColor}
+     * @name sap.ui.webc.main.ColorPicker.prototype.color
+     * @public
+     */
+    color: string;
+    /**
+     * 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: string;
+    /**
+     * Defines the current main color which is selected via the hue slider and is shown in the main color square.
+     * @type {string}
+     * @private
+     */
+    _mainColor: ColorRGB;
+    /**
+     * Defines the currenty selected color from the main color section.
+     * @private
+     */
+    _color: ColorRGB;
+    /**
+     * @private
+     */
+    _selectedCoordinates: ColorCoordinates;
+    /**
+     * @private
+     */
+    _alpha: number;
+    /**
+     * @private
+     */
+    _hue: number;
+    /**
+     * @private
+     */
+    _isSelectedColorChanged: boolean;
+    /**
+     * @private
+     */
+    _isHueValueChanged: boolean;
+    /**
+     * @private
+     */
+    _wrongHEX: boolean;
+    selectedHue: number;
+    mouseDown: boolean;
+    mouseIn: boolean;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    constructor();
+    onBeforeRendering(): void;
+    _handleMouseDown(e: MouseEvent): void;
+    _handleMouseUp(): void;
+    _handleMouseOut(e: MouseEvent): void;
+    _handleMouseMove(e: MouseEvent): void;
+    _handleAlphaInput(e: CustomEvent): void;
+    _handleHueInput(e: CustomEvent): void;
+    _handleHEXChange(e: CustomEvent | KeyboardEvent): void;
+    _handleRGBInputsChange(e: CustomEvent): void;
+    _setMainColor(hueValue: number): void;
+    _handleAlphaChange(): void;
+    _changeSelectedColor(x: number, y: number): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _calculateColorFromCoordinates(x: number, y: number): {
+        h: number;
+        s: number;
+        l: number;
+    } | undefined;
+    _setColor(color?: ColorRGB): void;
+    _setHex(): void;
+    _setValues(): void;
+    get hueSliderLabel(): string;
+    get alphaSliderLabel(): string;
+    get hexInputLabel(): string;
+    get redInputLabel(): string;
+    get greenInputLabel(): string;
+    get blueInputLabel(): string;
+    get alphaInputLabel(): string;
+    get inputsDisabled(): true | undefined;
+    get hexInputErrorState(): "Error" | undefined;
+    get styles(): {
+        mainColor: {
+            "background-color": string;
+        };
+        circle: {
+            left: string;
+            top: string;
+        };
+        colorSpan: {
+            "background-color": string;
+        };
+    };
+}
+export default ColorPicker;