feat(ui5-color-palette): initial implementation

packages/main/bundle.esm.js

@@ -48,6 +48,7 @@ import Button from "./dist/Button.js";
 import Card from "./dist/Card.js";
 import Carousel from "./dist/Carousel.js";
 import CheckBox from "./dist/CheckBox.js";
+import ColorPalette from "./dist/ColorPalette.js";
 import ComboBox from "./dist/ComboBox.js";
 import DatePicker from "./dist/DatePicker.js";
 import DateRangePicker from "./dist/DateRangePicker.js";

packages/main/src/ColorPalette.hbs

@@ -0,0 +1,23 @@
+<div class="ui5-cp-swatch-container" 
+	@click={{_onclick}}
+	@keyup={{_onkeyup}}
+	role="region"
+	aria-label="{{colorContainerLabel}}">
+	{{#each colorsArray}}
+		<div class="ui5-cp-swatch-row">
+			{{#each this}}
+				<div
+					id="color-swatch-{{this.id}}"
+					class="ui5-cp-swatch"
+					style="background-color: {{this.value}}"
+					value="{{this.value}}"
+					tabindex="0"
+					role="button"
+					aria-label="Color {{this.id}}: {{this.value}}"
+					title="Color {{this.id}}: {{this.value}}"
+				>
+				</div>
+			{{/each}}
+		</div>
+	{{/each}}
+</div>

packages/main/src/ColorPalette.js

@@ -0,0 +1,204 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import ColorPaletteTemplate from "./generated/templates/ColorPaletteTemplate.lit.js";
+import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import ColorPaletteEntry from "./ColorPaletteEntry.js";
+import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
+import ItemNavigationBehavior from "@ui5/webcomponents-base/dist/types/ItemNavigationBehavior.js";
+import {
+	isSpace,
+	isEnter,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+
+// Styles
+import ColorPaletteCss from "./generated/themes/ColorPalette.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-color-palette",
+	managedSlots: true,
+	properties: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
+		/**
+		 * @type {CSSColor}
+		 * @public
+		 */
+		value: {
+			type: CSSColor
+		 }
+	},
+	slots: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
+		/**
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @public
+		 */
+		"default": {
+			propertyName: "colors",
+			type: HTMLElement,
+			invalidateOnChildChange: true,
+		},
+	},	
+	events: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
+		change: {
+			details: {
+			   color: {
+				   type: "String"
+				}
+			}
+		 }
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>ui5-color-palette</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents/dist/ColorPalette.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.ColorPalette
+ * @extends UI5Element
+ * @tagname ui5-color-palette
+ * @public
+ */
+class ColorPalette extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return ColorPaletteCss;
+	}
+
+	static get template() {
+		return ColorPaletteTemplate;
+	}
+
+	static get dependencies() {
+		return [ColorPaletteEntry];
+	}
+
+	static async onDefine() {
+
+	}
+
+	constructor() {
+		super();
+	}
+
+	onBeforeRendering() {
+		this._colorsArray = this.colors;
+	}
+
+	onAfterRendering() {
+		this._itemNavigation = new ItemNavigation(this, {
+			getItemsCallback: () => Array.from(this.getDomRef().getElementsByClassName("ui5-cp-swatch")),
+			rowSize: 5,
+			behavior: ItemNavigationBehavior.Cyclic,
+		});
+
+		this._itemNavigation.onOverflowBottomEdge = this.onOverflowBottomEdge;
+		this._itemNavigation.onOverflowTopEdge = this.onOverflowTopEdge;
+	}
+
+	selectColor(target) {
+		target.focus();
+		this._itemNavigation.update(target);
+
+		this.value = target.getAttribute("value");
+
+		this.fireEvent("change", {
+			color: this.value,
+		});
+	}
+
+	onOverflowBottomEdge(event) {
+		const newIndex = this.currentIndex % this.rowSize;
+		this.currentIndex = newIndex + 1 >= this.rowSize ? 0 : newIndex + 1;
+
+		return;
+	}
+
+	onOverflowTopEdge(event) {
+		const items = this._getItems();
+		const firstIndex = -5;
+		let rowsMultiplier;
+
+		if(this.currentIndex === firstIndex) {
+			rowsMultiplier = Math.floor((items.length + (this.rowSize + 2)) / this.rowSize);
+		} else {
+			rowsMultiplier = Math.floor((items.length + (this.rowSize + this.currentIndex + 2)) / this.rowSize);
+		}
+
+		const newIndex = this.currentIndex + rowsMultiplier * this.rowSize;
+
+		this.currentIndex = newIndex - 1;
+
+		return;
+	}
+
+	_onclick(event) {
+		const target = event.target;
+		event.preventDefault();
+		event.stopPropagation();
+
+		if (target.classList.contains("ui5-cp-swatch")){
+			this.selectColor(target);
+		}
+	}
+
+	_onkeyup(event) {
+		const target = event.target;
+		event.preventDefault();
+		event.stopPropagation();
+
+		if (isEnter(event) || isSpace(event)) {
+			this.selectColor(target);
+		}
+	}
+
+
+	get colorsArray() {
+		const elementsPerRow = 5;
+		const maxAllowedColors = 15;
+		const rowsArray = this._colorsArray.slice(0, maxAllowedColors).reduce((resultArray, item, index) => { 
+			const chunkIndex = Math.floor(index / elementsPerRow);
+
+			if(!resultArray[chunkIndex]) {
+			  resultArray[chunkIndex] = [];
+			}
+
+			resultArray[chunkIndex].push({ value: item.value, id: index });
+
+			return resultArray;
+		}, []);
+
+		return rowsArray;
+	}
+
+	get colorContainerLabel() {
+		return "labelinho";
+	}
+
+	get colorLabel() {
+		return "color";
+	}
+}
+
+ColorPalette.define();
+
+export default ColorPalette;

packages/main/src/ColorPaletteEntry.js

@@ -0,0 +1,60 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
+
+/**
+* @public
+*/
+const metadata = {
+	tag: "ui5-color-palette-entry",
+	managedSlots: true,
+	properties: /** @lends  sap.ui.webcomponents.main.ColorPaletteEntry.prototype */ {
+		/**
+		 * Defines the value of the <code>ui5-color-palette</code> inside an HTML Form element when this <code>ui5-color-palette-entry</code> is presented.
+		 *
+		 * @type {CSSColor}
+		 * @public
+		 */
+		value: {
+			type: CSSColor,
+		},
+
+		/**
+		 * Defines the stable selector that you can use via getStableDomRef method.
+		 * @public
+		 * @since 1.0.0-rc.29
+		 */
+		stableDomRef: {
+			type: String,
+		},
+	},
+	slots: {
+		"default": {
+			type: Node,
+		},
+	},
+	events: /** @lends sap.ui.webcomponents.main.ColorPaletteEntry.prototype */ {},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-color-palette</code> component defines the content of an color in the <code>ui5-color-palette</code>.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.ColorPaletteEntry
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-color-palette
+ * @public
+ */
+class ColorPaletteEntry extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+}
+
+ColorPaletteEntry.define();
+
+export default ColorPaletteEntry;

packages/main/src/themes/ColorPalette.css

@@ -0,0 +1,25 @@
+.ui5-cp-swatch {
+	height: var(--_ui5_color-palette-swatch-height);
+	width: var(--_ui5_color-palette-swatch-height);
+	border: 1px solid var(--sapContent_ForegroundBorderColor);
+	border-radius: 0.25rem;
+	display: inline-block;
+	margin: var(--_ui5_color-palette-swatch-margin);
+}
+
+.ui5-cp-swatch:hover {
+	height: var(--_ui5_color-palette-swatch-hover-height);
+	width: var(--_ui5_color-palette-swatch-hover-height);
+	margin: var(--_ui5_color-palette-swatch-hover-margin);
+}
+
+.ui5-cp-swatch-row {
+	display: flex;
+	padding: 0.3125rem 0.6875rem;
+	justify-content: flex-start;
+}
+
+.ui5-cp-swatch-container {
+	display: flex;
+	flex-flow: column wrap;
+}

packages/main/src/themes/base/ColorPalette-parameters.css

@@ -0,0 +1,7 @@
+:root {
+	--_ui5_color-palette-swatch-height: 1.75rem;
+	--_ui5_color-palette-swatch-container-padding: 0.3125rem 0.6875rem;
+	--_ui5_color-palette-swatch-hover-height: 2.25rem;
+	--_ui5_color-palette-swatch-margin: calc(var(--_ui5_color-palette-swatch-hover-height) - var(--_ui5_color-palette-swatch-height));
+	--_ui5_color-palette-swatch-hover-margin: calc(var(--_ui5_color-palette-swatch-margin) / 2);
+}

packages/main/src/themes/base/sizes-parameters.css

@@ -117,6 +117,10 @@
 	--_ui5_checkbox_inner_width_height: var(--_ui5_checkbox_compact_inner_size);
 	--_ui5_checkbox_icon_size: .75rem;
 
+	/* ColorPalette */
+	--_ui5_color-palette-swatch-height: 1.25rem;
+	--_ui5_color-palette-swatch-container-padding: 0.1875rem 0.8125rem;
+	--_ui5_color-palette-swatch-hover-height: 1.65rem;
 
 	/* Custom List Item */
 	--_ui5_custom_list_item_height: 2rem;

packages/main/src/themes/sap_belize/parameters-bundle.css

@@ -9,6 +9,7 @@
 @import "./Carousel-parameters.css";
 @import "../base/Card-parameters.css";
 @import "../base/CheckBox-parameters.css";
+@import "../base/ColorPalette-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "./InputIcon-parameters.css";

packages/main/src/themes/sap_belize_hcb/parameters-bundle.css

@@ -6,6 +6,7 @@
 @import "./Carousel-parameters.css";
 @import "./Card-parameters.css";
 @import "./CheckBox-parameters.css";
+@import "../base/ColorPalette-parameters.css";
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "./Dialog-parameters.css";

packages/main/src/themes/sap_belize_hcw/parameters-bundle.css

@@ -6,6 +6,7 @@
 @import "./Carousel-parameters.css";
 @import "./Card-parameters.css";
 @import "./CheckBox-parameters.css";
+@import "../base/ColorPalette-parameters.css";
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "./Dialog-parameters.css";

packages/main/src/themes/sap_fiori_3/parameters-bundle.css

@@ -5,6 +5,7 @@
 @import "../base/Card-parameters.css";
 @import "../base/Carousel-parameters.css";
 @import "./CheckBox-parameters.css";
+@import "../base/ColorPalette-parameters.css";
 @import "../base/DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "../base/Dialog-parameters.css";

packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css

@@ -5,6 +5,7 @@
 @import "../base/Card-parameters.css";
 @import "../base/Carousel-parameters.css";
 @import "./CheckBox-parameters.css";
+@import "../base/ColorPalette-parameters.css";
 @import "../base/DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "../base/Dialog-parameters.css";