feat(ui5-color-palette): initial implementation

packages/main/bundle.esm.js

@@ -47,6 +47,8 @@ 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 ColorPaletteEntry from "./dist/ColorPaletteEntry.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,12 @@
+<div class="ui5-cp-swatch-container" 
+	role="region"
+	aria-label="{{colorContainerLabel}}">
+	{{#each entries}}
+		<slot
+			name="{{this.item._individualSlot}}"
+			@click={{../_onclick}}
+			@keyup={{../_onkeyup}}
+			index="{{index}}">
+		</slot>
+	{{/each}}
+</div>

packages/main/src/ColorPalette.js

@@ -0,0 +1,161 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.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";
+import ColorPaletteTemplate from "./generated/templates/ColorPaletteTemplate.lit.js";
+import ColorPaletteEntry from "./ColorPaletteEntry.js";
+import {
+	COLORPALETTE_CONTAINER_LABEL,
+} from "./generated/i18n/i18n-defaults.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,
+		 },
+
+		 entries: {
+			type: Object,
+			multiple: true,
+		 },
+	},
+	slots: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
+		/**
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @public
+		 */
+		"default": {
+			propertyName: "colors",
+			type: HTMLElement,
+			invalidateOnChildChange: true,
+			individualSlots: true,
+		},
+	},
+	events: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
+		change: {
+			details: {
+				color: {
+					type: "CSSColor",
+				},
+			},
+		 },
+	},
+};
+
+/**
+ * @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
+ * @since 1.0.0-rc.12
+ * @appenddocs ColorPaletteEntry
+ * @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() {
+		await fetchI18nBundle("@ui5/webcomponents");
+	}
+
+	constructor() {
+		super();
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+		this._itemNavigation = new ItemNavigation(this, {
+			getItemsCallback: () => this.colors.slice(0, 15),
+			rowSize: 5,
+			behavior: ItemNavigationBehavior.Cyclic,
+		});
+	}
+
+	onBeforeRendering() {
+		this.colors.forEach((item, index) => {
+			item.index = index + 1;
+			this.entries.push({ item, index });
+		});
+	}
+
+	selectColor(target) {
+		target.getDomRef().focus();
+		this._itemNavigation.update(target);
+
+		this.value = target.value;
+
+		this.fireEvent("change", {
+			color: this.value,
+		});
+	}
+
+	_onclick(event) {
+		this.selectColor(event.target);
+	}
+
+	_onkeyup(event) {
+		const target = event.target;
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		if (isEnter(event) || isSpace(event)) {
+			this.selectColor(target);
+		}
+	}
+
+	get colorContainerLabel() {
+		return this.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL);
+	}
+}
+
+ColorPalette.define();
+
+export default ColorPalette;

packages/main/src/ColorPaletteEntry.hbs

@@ -0,0 +1,12 @@
+<div
+	id="color-swatch-{{index}}"
+	class="ui5-cp-swatch"
+	style="background-color: {{value}}"
+	value="{{value}}"
+	tabindex="{{_tabIndex}}"
+	role="button"
+	index="{{index}}"
+	aria-label="{{colorLabel}} {{index}}: {{this.value}}"
+	title="{{colorLabel}} {{index}}: {{this.value}}"
+>
+</div>

packages/main/src/ColorPaletteEntry.js

@@ -0,0 +1,107 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
+import ColorPaletteEntryTemplate from "./generated/templates/ColorPaletteEntryTemplate.lit.js";
+import {
+	COLORPALETTE_COLOR_LABEL,
+} from "./generated/i18n/i18n-defaults.js";
+
+// Styles
+import ColorPaletteEntryCss from "./generated/themes/ColorPaletteEntry.css.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
+		 */
+		stableDomRef: {
+			type: String,
+		},
+		/**
+		 * Defines the tab-index of the element, helper information for the ItemNavigation.
+		 * @private
+		 */
+		_tabIndex: {
+			type: String,
+			defaultValue: "-1",
+			noAttribute: true,
+		},
+
+		index: {
+			type: String,
+		},
+	},
+	slots: {
+	},
+	events: /** @lends sap.ui.webcomponents.main.ColorPaletteEntry.prototype */ {},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-color-palette-entry</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-entry
+ * @since 1.0.0-rc.12
+ * @public
+ */
+class ColorPaletteEntry extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return ColorPaletteEntryCss;
+	}
+
+	static get template() {
+		return ColorPaletteEntryTemplate;
+	}
+
+	static async onDefine() {
+		await fetchI18nBundle("@ui5/webcomponents");
+	}
+
+	constructor() {
+		super();
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+	}
+
+	onBeforeRendering() {
+	}
+
+	get colorLabel() {
+		return this.i18nBundle.getText(COLORPALETTE_COLOR_LABEL);
+	}
+}
+
+ColorPaletteEntry.define();
+
+export default ColorPaletteEntry;

packages/main/src/i18n/messagebundle.properties

@@ -43,6 +43,12 @@ CAROUSEL_PREVIOUS_ARROW_TEXT=Previous Page
 # Carousel Next Page text
 CAROUSEL_NEXT_ARROW_TEXT=Next Page
 
+#XFLD: Label of the container holding the color swatches
+COLORPALETTE_CONTAINER_LABEL=Color palette - Predefined colors
+
+#XFLD: Label of the color box
+COLORPALETTE_COLOR_LABEL=Color
+
 #XACT: DatePicker 'Open Picker' icon title
 DATEPICKER_OPEN_ICON_TITLE=Open Picker
 

packages/main/src/themes/ColorPalette.css

@@ -0,0 +1,7 @@
+.ui5-cp-swatch-container {
+	display: flex;
+	max-width: var(--_ui5_color-palette-row-width);
+	flex-flow: wrap;
+	max-height: var(--_ui5_color-palette-row-height);
+	overflow: hidden;
+}

packages/main/src/themes/ColorPaletteEntry.css

@@ -0,0 +1,29 @@
+.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:focus:before {
+	content: "";
+	width: var(--_ui5_color-palette-swatch-focus-height);
+	height: var(--_ui5_color-palette-swatch-focus-height);
+	margin: 2px;
+	position: fixed;
+	outline: rgb(0, 0, 0) dotted 0.0625rem;
+}
+
+.ui5-cp-swatch:focus {
+	pointer-events: none;
+	outline: white solid 0.0625rem;
+	outline-offset: -3px;
+}
+
+.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);
+}

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

@@ -0,0 +1,12 @@
+:root {
+	--_ui5_color-palette-swatch-height: 1.75rem;
+	--_ui5_color-palette-swatch-container-sides-padding: 0.3125rem;
+	--_ui5_color-palette-swatch-container-rows-padding: 0.6875rem;
+	--_ui5_color-palette-swatch-focus-height: 1.5rem;
+	--_ui5_color-palette-swatch-container-padding: var(--_ui5_color-palette-swatch-container-sides-padding) var(--_ui5_color-palette-swatch-container-rows-padding);
+	--_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);
+	--_ui5_color-palette-row-width: 14.375rem;
+	--_ui5_color-palette-row-height: 9.5rem;
+}

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

@@ -117,6 +117,15 @@
 	--_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-focus-height: 1rem;
+	--_ui5_color-palette-swatch-container-sides-padding: 0.1875rem;
+	--_ui5_color-palette-swatch-container-rows-padding: 0.8125rem;
+	--_ui5_color-palette-swatch-hover-height: 1.65rem;
+	--_ui5_color-palette-swatch-hover-margin: 0.3125rem;
+	--_ui5_color-palette-row-width: 12rem;
+	--_ui5_color-palette-row-height: 7.25rem;
 
 	/* Custom List Item */
 	--_ui5_custom_list_item_height: 2rem;