@ui5/webcomponents 0.0.0-8db0ce01a → 0.0.0-a3eca7ade

package/src/ColorPalette.js

@@ -1,17 +1,22 @@
 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 { 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 { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import {
 	isSpace,
 	isEnter,
+	isDown,
+	isUp,
+	isTabNext,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import ColorPaletteTemplate from "./generated/templates/ColorPaletteTemplate.lit.js";
 import ColorPaletteDialogTemplate from "./generated/templates/ColorPaletteDialogTemplate.lit.js";
 import ColorPaletteItem from "./ColorPaletteItem.js";
+import Button from "./Button.js";
 import {
 	COLORPALETTE_CONTAINER_LABEL,
 	COLOR_PALETTE_MORE_COLORS_TEXT,
@@ -30,9 +35,9 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
 
 		/**
-		 * Defines whether the user can see the last used colors in the bottom of the <code>ui5-color-palette</code>
+		 * Defines whether the user can see the last used colors in the bottom of the component
 		 * @type {boolean}
-		 * @public
+		 * @private
 		 * @since 1.0.0-rc.15
 		 */
 		showRecentColors: {
@@ -43,26 +48,56 @@ const metadata = {
 		 * Defines whether the user can choose a custom color from a color picker
 		 * <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}
-		 * @public
-		 * @since 1.0.0-rc.12
+		 * @private
+		 * @since 1.0.0-rc.15
 		 */
-		moreColors: {
+		showMoreColors: {
 			type: Boolean,
 		},
 
 		/**
-		 *
-		 * The selected color.
+		 * Defines whether the user can choose the default color from a button.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @private
+		 * @since 1.0.0-rc.16
+		 */
+		showDefaultColor: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines the default color of the color palette
+		 * <b>Note:</b> The default color should be a part of the ColorPalette colors</code>
 		 * @type {CSSColor}
-		 * @public
+		 * @private
+		 * @since 1.0.0-rc.16
 		 */
-		value: {
+		defaultColor: {
 			type: CSSColor,
 		},
+
+		/**
+		 * Defines the selected color.
+		 * @type {CSSColor}
+		 * @private
+		 */
+		_selectedColor: {
+			type: CSSColor,
+		},
+
+		/**
+		 * Defines if the palette is in Popup or Embeded mode.
+		 * @type {CSSColor}
+		 * @private
+		 */
+		popupMode: {
+			type: Boolean,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
 		/**
-		 * Defines the <code>ui5-color-palette-item</code> items.
+		 * Defines the <code>ui5-color-palette-item</code> elements.
 		 * @type {sap.ui.webcomponents.main.IColorPaletteItem[]}
 		 * @slot colors
 		 * @public
@@ -78,11 +113,12 @@ const metadata = {
 		/**
 		 * Fired when the user selects a color.
 		 *
-		 * @event
+		 * @event sap.ui.webcomponents.main.ColorPalette#item-click
 		 * @public
-		 * @param {String} color the selected color
+		 * @since 1.0.0-rc.15
+		 * @param {string} color the selected color
 		 */
-		change: {
+		"item-click": {
 			details: {
 				color: {
 					type: String,
@@ -96,13 +132,12 @@ const metadata = {
  * @class
  *
  * <h3 class="comment-api-title">Overview</h3>
- * The ColorPalette provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.
- * You can set them by using the ColorPaletteItem items as slots.
+ * The <code>ui5-color-palette</code> provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.
  *
  * <h3>Usage</h3>
- * The Colorpalette is intended for users that needs to select a color from a predefined set of colors.
- * To allow users select any color from a color picker, enable the <code>more-colors</code> property.
- * And, to display the most recent color selection, enable the <code>show-recent-colors</code> property.
+ *
+ * The <code>ui5-color-palette</code> is meant for users that need to select a color from a predefined set.
+ * To define the colors, use the <code>ui5-color-palette-item</code> component inside the default slot of the <code>ui5-color-palette</code>.
  *
  * <h3>ES6 Module Import</h3>
  *
@@ -144,22 +179,32 @@ class ColorPalette extends UI5Element {
 
 	static get dependencies() {
 		const ColorPaletteMoreColors = getFeature("ColorPaletteMoreColors");
-		return [ColorPaletteItem].concat(ColorPaletteMoreColors ? ColorPaletteMoreColors.dependencies : []);
+		return [ColorPaletteItem, Button].concat(ColorPaletteMoreColors ? ColorPaletteMoreColors.dependencies : []);
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		const ColorPaletteMoreColors = getFeature("ColorPaletteMoreColors");
+
+		[ColorPalette.i18nBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents"),
+			ColorPaletteMoreColors ? ColorPaletteMoreColors.init() : Promise.resolve(),
+		]);
 	}
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 		this._itemNavigation = new ItemNavigation(this, {
 			getItemsCallback: () => this.displayedColors,
-			rowSize: 5,
+			rowSize: this.rowSize,
 			behavior: ItemNavigationBehavior.Cyclic,
 		});
 
+		this._itemNavigationRecentColors = new ItemNavigation(this, {
+			getItemsCallback: () => this.recentColorsElements,
+			rowSize: this.rowSize,
+			behavior: ItemNavigationBehavior.Static,
+		});
+
 		this._recentColors = [];
 	}
 
@@ -168,7 +213,7 @@ class ColorPalette extends UI5Element {
 			item.index = index + 1;
 		});
 
-		if (this.moreColors) {
+		if (this.showMoreColors) {
 			const ColorPaletteMoreColors = getFeature("ColorPaletteMoreColors");
 			if (ColorPaletteMoreColors) {
 				this.moreColorsFeature = new ColorPaletteMoreColors();
@@ -179,40 +224,155 @@ class ColorPalette extends UI5Element {
 	}
 
 	selectColor(item) {
+		if (!item.value) {
+			return;
+		}
+
 		item.focus();
-		this._itemNavigation.setCurrentItem(item);
+
+		if (this.displayedColors.includes(item)) {
+			this._itemNavigation.setCurrentItem(item);
+		}
 
 		this._setColor(item.value);
 	}
 
 	_setColor(color) {
-		this.value = color;
-		if (this._recentColors[0] !== this.value) {
-			this._recentColors.unshift(this.value);
+		this._selectedColor = color;
+		if (this._recentColors[0] !== this._selectedColor) {
+			if (this._recentColors.includes(this._selectedColor)) {
+				this._recentColors.unshift(this._recentColors.splice(this._recentColors.indexOf(this._selectedColor), 1)[0]);
+			} else {
+				this._recentColors.unshift(this._selectedColor);
+			}
 		}
 
-		this.fireEvent("change", {
-			color: this.value,
+		this.fireEvent("item-click", {
+			color: this._selectedColor,
 		});
 	}
 
 	_onclick(event) {
-		if (event.target.localName === "ui5-color-palette-item") {
+		if (event.target.hasAttribute("ui5-color-palette-item")) {
 			this.selectColor(event.target);
 		}
 	}
 
 	_onkeyup(event) {
-		if (isSpace(event)) {
+		if (isSpace(event) && event.target.hasAttribute("ui5-color-palette-item")) {
 			event.preventDefault();
 			this.selectColor(event.target);
 		}
 	}
 
 	_onkeydown(event) {
-		if (isEnter(event)) {
+		if (isEnter(event) && event.target.hasAttribute("ui5-color-palette-item")) {
+			this.selectColor(event.target);
+		}
+	}
+
+	_onDefaultColorKeyDown(event) {
+		if (isTabNext(event) && this.popupMode) {
+			event.preventDefault();
+			this._onDefaultColorClick();
+		}
+
+		if (isDown(event)) {
+			event.stopPropagation();
+
+			this.focusColorElement(this.colorPaletteNavigationElements[1], this._itemNavigation);
+		} else if (isUp(event)) {
+			event.stopPropagation();
+			const lastElementInNavigation = this.colorPaletteNavigationElements[this.colorPaletteNavigationElements.length - 1];
+
+			if (this.hasRecentColors) {
+				this.focusColorElement(lastElementInNavigation, this._itemNavigationRecentColors);
+			} else if (this.showMoreColors) {
+				lastElementInNavigation.focus();
+			} else {
+				const colorPaletteFocusIndex = (this.displayedColors.length % this.rowSize) * this.rowSize;
+
+				this.focusColorElement(this.displayedColors[colorPaletteFocusIndex], this._itemNavigation);
+			}
+		}
+	}
+
+	_onMoreColorsKeyDown(event) {
+		const index = this.colorPaletteNavigationElements.indexOf(event.target);
+		const colorPaletteFocusIndex = (this.displayedColors.length % this.rowSize) * this.rowSize;
+
+		if (isUp(event)) {
+			event.stopPropagation();
+
+			this.focusColorElement(this.displayedColors[colorPaletteFocusIndex], this._itemNavigation);
+		} else if (isDown(event)) {
+			event.stopPropagation();
+
+			if (this.hasRecentColors) {
+				this.focusColorElement(this.colorPaletteNavigationElements[index + 1], this._itemNavigationRecentColors);
+			} else if (this.showDefaultColor) {
+				this.colorPaletteNavigationElements[0].focus();
+			} else {
+				this.focusColorElement(this.displayedColors[0], this._itemNavigation);
+			}
+		}
+	}
+
+	_onColorContainerKeyDown(event) {
+		const lastElementInNavigation = this.colorPaletteNavigationElements[this.colorPaletteNavigationElements.length - 1];
+		if (isTabNext(event) && this.popupMode) {
+			event.preventDefault();
 			this.selectColor(event.target);
 		}
+
+		if (isUp(event) && event.target === this.displayedColors[0] && this.colorPaletteNavigationElements.length > 1) {
+			event.stopPropagation();
+			if (this.showDefaultColor) {
+				this.colorPaletteNavigationElements[0].focus();
+			} else if (!this.showDefaultColor && this.hasRecentColors) {
+				this.focusColorElement(lastElementInNavigation, this._itemNavigationRecentColors);
+			} else if (!this.showDefaultColor && this.showMoreColors) {
+				lastElementInNavigation.focus();
+			}
+		} else if (isDown(event) && event.target === this.displayedColors[this.displayedColors.length - 1] && this.colorPaletteNavigationElements.length > 1) {
+			event.stopPropagation();
+			const isRecentColorsNextElement = (this.showDefaultColor && !this.showMoreColors && this.hasRecentColors) || (!this.showDefaultColor && !this.showMoreColors && this.hasRecentColors);
+
+			if (this.showDefaultColor && this.showMoreColors) {
+				this.colorPaletteNavigationElements[2].focus();
+			} else if (this.showDefaultColor && !this.showMoreColors && (!this.showRecentColors || !this.recentColors[0])) {
+				this.colorPaletteNavigationElements[0].focus();
+			} else if (isRecentColorsNextElement) {
+				this.focusColorElement(lastElementInNavigation, this._itemNavigationRecentColors);
+			} else if (!this.showDefaultColor && this.showMoreColors) {
+				this.colorPaletteNavigationElements[1].focus();
+			}
+		}
+	}
+
+	_onRecentColorsContainerKeyDown(event) {
+		if (isUp(event)) {
+			if (this.showMoreColors) {
+				this.colorPaletteNavigationElements[1 + this.showDefaultColor].focus();
+			} else if (!this.showMoreColors && this.colorPaletteNavigationElements.length > 1) {
+				const colorPaletteFocusIndex = (this.displayedColors.length % this.rowSize) * this.rowSize;
+				event.stopPropagation();
+
+				this.focusColorElement(this.displayedColors[colorPaletteFocusIndex], this._itemNavigation);
+			}
+		} else if (isDown(event)) {
+			if (this.showDefaultColor) {
+				this.colorPaletteNavigationElements[0].focus();
+			} else {
+				event.stopPropagation();
+				this.focusColorElement(this.displayedColors[0], this._itemNavigation);
+			}
+		}
+	}
+
+	focusColorElement(element, itemNavigation) {
+		itemNavigation.setCurrentItem(element);
+		itemNavigation._focusCurrentItem();
 	}
 
 	async _chooseCustomColor() {
@@ -228,37 +388,96 @@ class ColorPalette extends UI5Element {
 
 	async _openMoreColorsDialog() {
 		const dialog = await this._getDialog();
-		dialog.open();
+		dialog.show();
+	}
+
+	_onDefaultColorClick() {
+		if (this.defaultColor) {
+			this._setColor(this.defaultColor);
+		}
+	}
+
+	/**
+	 * Returns the selected color.
+	 */
+	get selectedColor() {
+		return this._selectedColor;
 	}
 
 	get displayedColors() {
-		return this.colors.filter(item => item.value).slice(0, 15);
+		return this.getSlottedNodes("colors").filter(item => item.value).slice(0, 15);
 	}
 
 	get colorContainerLabel() {
-		return this.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL);
+		return ColorPalette.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL);
 	}
 
 	get colorPaleteMoreColorsText() {
-		return this.i18nBundle.getText(COLOR_PALETTE_MORE_COLORS_TEXT);
+		return ColorPalette.i18nBundle.getText(COLOR_PALETTE_MORE_COLORS_TEXT);
+	}
+
+	get _showMoreColors() {
+		return this.showMoreColors && this.moreColorsFeature;
+	}
+
+	get rowSize() {
+		return 5;
 	}
 
-	get showMoreColors() {
-		return this.moreColors && this.moreColorsFeature;
+	get hasRecentColors() {
+		return this.showRecentColors && this.recentColors[0];
 	}
 
 	get recentColors() {
-		if (this._recentColors.length > 5) {
-			this._recentColors = this._recentColors.slice(0, 5);
+		if (this._recentColors.length > this.rowSize) {
+			this._recentColors = this._recentColors.slice(0, this.rowSize);
 		}
 
-		while (this._recentColors.length < 5) {
+		while (this._recentColors.length < this.rowSize) {
 			this._recentColors.push("");
 		}
 
 		return this._recentColors;
 	}
 
+	get recentColorsElements() {
+		if (this.getDomRef()) {
+			return Array.from(this.getDomRef().querySelectorAll(".ui5-cp-recent-colors-wrapper [ui5-color-palette-item]")).filter(x => x.value !== "");
+		}
+
+		return [];
+	}
+
+	get colorPaletteNavigationElements() {
+		const navigationElements = [];
+		const rootElement = this.shadowRoot.querySelector(".ui5-cp-root");
+
+		if (this.showDefaultColor) {
+			navigationElements.push(rootElement.querySelector(".ui5-cp-default-color-button"));
+		}
+
+		navigationElements.push(this.displayedColors[0]);
+
+		if (this.showMoreColors) {
+			navigationElements.push(rootElement.querySelector(".ui5-cp-more-colors"));
+		}
+
+		if (this.showRecentColors && !!this.recentColorsElements.length) {
+			navigationElements.push(this.recentColorsElements[0]);
+		}
+
+		return navigationElements;
+	}
+
+	get classes() {
+		return {
+			colorPaletteRoot: {
+				"ui5-cp-root": true,
+				"ui5-cp-root-phone": isPhone(),
+			},
+		};
+	}
+
 	async _getDialog() {
 		const staticAreaItem = await this.getStaticAreaItemDomRef();
 		return staticAreaItem.querySelector("[ui5-dialog]");

package/src/ColorPaletteItem.hbs

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

package/src/ColorPaletteItem.js

@@ -1,7 +1,8 @@
 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 { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import ColorPaletteItemTemplate from "./generated/templates/ColorPaletteItemTemplate.lit.js";
 import {
 	COLORPALETTE_COLOR_LABEL,
@@ -18,7 +19,7 @@ const metadata = {
 	managedSlots: true,
 	properties: /** @lends  sap.ui.webcomponents.main.ColorPaletteItem.prototype */ {
 		/**
-		 * Defines the value of the <code>ui5-color-palette-item</code> color.
+		 * Defines the colour of the component.
 		 * <br><br>
 		 * <b>Note:</b> The value should be a valid CSS color.
 		 *
@@ -29,14 +30,6 @@ const metadata = {
 			type: CSSColor,
 		},
 
-		/**
-		 * Defines the stable selector that you can use via getStableDomRef method.
-		 * @type {String}
-		 * @public
-		 */
-		stableDomRef: {
-			type: String,
-		},
 		/**
 		 * Defines the tab-index of the element, helper information for the ItemNavigation.
 		 * @private
@@ -46,14 +39,33 @@ const metadata = {
 			defaultValue: "-1",
 			noAttribute: true,
 		},
+
 		/**
 		 * Defines the index of the item inside of the ColorPalette.
 		 * @private
-		 * @type {String}
+		 * @type {string}
 		 */
 		index: {
 			type: String,
 		},
+
+		/**
+		 * Defines if the ColorPalette is on phone mode.
+		 * @private
+		 * @type {boolean}
+		 */
+		phone: {
+			type: Boolean,
+		},
+
+		/**
+		 * @private
+		 * @type {boolean}
+		 * @since 1.0.0-rc.15
+		 */
+		_disabled: {
+			type: Boolean,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.main.ColorPaletteItem.prototype */ {
 	},
@@ -95,16 +107,28 @@ class ColorPaletteItem extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		ColorPaletteItem.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+	}
+
+	onBeforeRendering() {
+		this._disabled = !this.value;
+		this.phone = isPhone();
 	}
 
 	get colorLabel() {
-		return this.i18nBundle.getText(COLORPALETTE_COLOR_LABEL);
+		return ColorPaletteItem.i18nBundle.getText(COLORPALETTE_COLOR_LABEL);
+	}
+
+	get styles() {
+		return {
+			root: {
+				"background-color": this.value,
+			},
+		};
 	}
 }
 

package/src/ColorPalettePopover.hbs

@@ -0,0 +1,31 @@
+<ui5-responsive-popover
+	hide-arrow
+	content-only-on-desktop
+	placement-type="Bottom"
+>
+	<div slot="header" class="ui5-cp-header">
+		<ui5-title
+			class="ui5-cp-title"
+		>{{_colorPaletteTitle}}</ui5-title>
+	</div>
+	<div>
+		<ui5-color-palette
+			?show-more-colors="{{this.showMoreColors}}"
+			?show-recent-colors="{{this.showRecentColors}}"
+			?show-default-color="{{this.showDefaultColor}}"
+			default-color="{{this.defaultColor}}"
+			popup-mode
+			@ui5-item-click="{{onSelectedColor}}"
+		>
+			{{#each colorPaletteColors}}
+				<slot name="{{this._individualSlot}}"></slot>
+			{{/each}}
+		</ui5-color-palette>
+	</div>
+	<div slot="footer" class="ui5-cp-footer">
+		<ui5-button
+			design="Transparent"
+			@click="{{closePopover}}"
+		>{{_cancelButtonLabel}}</ui5-button>
+	</div>
+</ui5-responsive-popover>