feat(ui5-color-palette): initial implementation (#2731)

Implementation of new component called color palette. The control presents a set of colors that you define, from which the user can select.

docs/Public Module Imports.md

@@ -30,6 +30,8 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
 | Card                     | `ui5-card`           | `import "@ui5/webcomponents/dist/Card.js";`                |
 | Carousel                 | `ui5-carousel`       | `import "@ui5/webcomponents/dist/Carousel.js";`            |
 | Checkbox                 | `ui5-checkbox`       | `import "@ui5/webcomponents/dist/CheckBox.js";`            |
+| Color Palette            | `ui5-color-palette`  | `import "@ui5/webcomponents/dist/ColorPalette.js";`        |
+| Color Palette Item       | `ui5-color-palette-item`  | comes with `ui5-color-palette`                        |
 | ComboBox                 | `ui5-combobox`       | `import "@ui5/webcomponents/dist/ComboBox.js";`            |
 | ComboBox Item            | `ui5-cb-item`        | comes with `ui5-combobox`                                  |
 | Date Picker              | `ui5-date-picker`     | `import "@ui5/webcomponents/dist/DatePicker.js";`         |

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 ColorPaletteItem from "./dist/ColorPaletteItem.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,13 @@
+<div class="ui5-cp-item-container" 
+	role="region"
+	aria-label="{{colorContainerLabel}}"
+	@click={{_onclick}}
+	@keyup={{_onkeyup}}
+	@keydown={{_onkeydown}}>
+	{{#each this.displayedColors}}
+		<slot
+			name="{{this._individualSlot}}"
+		>
+		</slot>
+	{{/each}}
+</div>

packages/main/src/ColorPalette.js

@@ -0,0 +1,175 @@
+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 ColorPaletteItem from "./ColorPaletteItem.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 */ {
+		/**
+		 *
+		 * The selected color.
+		 * @type {CSSColor}
+		 * @public
+		 */
+		value: {
+			type: CSSColor,
+		 },
+	},
+	slots: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
+		/**
+		 * Defines the <code>ui5-color-palette-item</code> items.
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @public
+		 */
+		"default": {
+			propertyName: "colors",
+			type: HTMLElement,
+			invalidateOnChildChange: true,
+			individualSlots: true,
+		},
+	},
+	events: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
+		/**
+		 * Fired when the user selects a color.
+		 *
+		 * @event
+		 * @public
+		 * @param {String} color the selected color
+		 */
+		change: {
+			details: {
+				color: {
+					type: "String",
+				},
+			},
+		 },
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The ColorPalette provides the users with a range of predefined colors.
+ * You can set them by using the ColorPaletteItem items as slots.
+ *
+ * <h3>Usage</h3>
+ * The palette is intended for users, who don't want to check and remember the different values of the colors .
+ *
+ * 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 ColorPaletteItem
+ * @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 [ColorPaletteItem];
+	}
+
+	static async onDefine() {
+		await fetchI18nBundle("@ui5/webcomponents");
+	}
+
+	constructor() {
+		super();
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+		this._itemNavigation = new ItemNavigation(this, {
+			getItemsCallback: () => this.displayedColors,
+			rowSize: 5,
+			behavior: ItemNavigationBehavior.Cyclic,
+		});
+	}
+
+	onBeforeRendering() {
+		this.displayedColors.forEach((item, index) => {
+			item.index = index + 1;
+		});
+	}
+
+	selectColor(item) {
+		item.focus();
+		this._itemNavigation.update(item);
+
+		this.value = item.value;
+
+		this.fireEvent("change", {
+			color: this.value,
+		});
+	}
+
+	_onclick(event) {
+		if (event.target.localName === "ui5-color-palette-item") {
+			this.selectColor(event.target);
+		}
+	}
+
+	_onkeyup(event) {
+		if (isSpace(event)) {
+			event.preventDefault();
+			this.selectColor(event.target);
+		}
+	}
+
+	_onkeydown(event) {
+		if (isEnter(event)) {
+			this.selectColor(event.target);
+		}
+	}
+
+	get displayedColors() {
+		return this.colors.filter(item => item.value).slice(0, 15);
+	}
+
+	get colorContainerLabel() {
+		return this.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL);
+	}
+}
+
+ColorPalette.define();
+
+export default ColorPalette;

packages/main/src/ColorPaletteItem.hbs

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

packages/main/src/ColorPaletteItem.js

@@ -0,0 +1,110 @@
+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 ColorPaletteItemTemplate from "./generated/templates/ColorPaletteItemTemplate.lit.js";
+import {
+	COLORPALETTE_COLOR_LABEL,
+} from "./generated/i18n/i18n-defaults.js";
+
+// Styles
+import ColorPaletteItemCss from "./generated/themes/ColorPaletteItem.css.js";
+
+/**
+* @public
+*/
+const metadata = {
+	tag: "ui5-color-palette-item",
+	managedSlots: true,
+	properties: /** @lends  sap.ui.webcomponents.main.ColorPaletteItem.prototype */ {
+		/**
+		 * Defines the value of the <code>ui5-color-palette-item</code> color.
+		 * <br><br>
+		 * <b>Note:</b> The value should be a valid CSS color.
+		 *
+		 * @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,
+		},
+		/**
+		 * Defines the index of the item inside of the ColorPalette.
+		 * @private
+		 * @type {String}
+		 */
+		index: {
+			type: String,
+		},
+	},
+	slots: {
+	},
+	events: /** @lends sap.ui.webcomponents.main.ColorPaletteItem.prototype */ {},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-color-palette-item</code> component represents a color in the the <code>ui5-color-palette</code>.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.ColorPaletteItem
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-color-palette-item
+ * @since 1.0.0-rc.12
+ * @public
+ */
+class ColorPaletteItem extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return ColorPaletteItemCss;
+	}
+
+	static get template() {
+		return ColorPaletteItemTemplate;
+	}
+
+	static async onDefine() {
+		await fetchI18nBundle("@ui5/webcomponents");
+	}
+
+	constructor() {
+		super();
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+	}
+
+	get colorLabel() {
+		return this.i18nBundle.getText(COLORPALETTE_COLOR_LABEL);
+	}
+}
+
+ColorPaletteItem.define();
+
+export default ColorPaletteItem;

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 colors
+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,11 @@
+:host(:not([hidden])) {
+	display: inline-block;
+}
+
+.ui5-cp-item-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/ColorPaletteItem.css

@@ -0,0 +1,29 @@
+.ui5-cp-item {
+	height: var(--_ui5_color-palette-item-height);
+	width: var(--_ui5_color-palette-item-height);
+	border: 1px solid var(--sapContent_ForegroundBorderColor);
+	border-radius: 0.25rem;
+	display: inline-block;
+	margin: var(--_ui5_color-palette-item-margin);
+}
+
+.ui5-cp-item:focus:before {
+	content: "";
+	width: var(--_ui5_color-palette-item-focus-height);
+	height: var(--_ui5_color-palette-item-focus-height);
+	margin: 2px;
+	position: absolute;
+	outline: rgb(0, 0, 0) dotted 0.0625rem;
+}
+
+.ui5-cp-item:focus {
+	pointer-events: none;
+	outline: white solid 0.0625rem;
+	outline-offset: -3px;
+}
+
+.ui5-cp-item:hover {
+	height: var(--_ui5_color-palette-item-hover-height);
+	width: var(--_ui5_color-palette-item-hover-height);
+	margin: var(--_ui5_color-palette-item-hover-margin);
+}