@ui5/webcomponents 0.0.0-6ef02a35f → 0.0.0-7e7d9ea6f

package/dist/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,
@@ -50,6 +55,28 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * 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}
+		 * @private
+		 * @since 1.0.0-rc.16
+		 */
+		defaultColor: {
+			type: CSSColor,
+		},
+
 		/**
 		 * Defines the selected color.
 		 * @type {CSSColor}
@@ -58,10 +85,19 @@ const metadata = {
 		_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
@@ -80,10 +116,10 @@ const metadata = {
 		 * @event sap.ui.webcomponents.main.ColorPalette#item-click
 		 * @public
 		 * @since 1.0.0-rc.15
-		 * @param {String} color the selected color
+		 * @param {string} color the selected color
 		 */
 		"item-click": {
-			details: {
+			detail: {
 				color: {
 					type: String,
 				},
@@ -96,11 +132,11 @@ 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.
+ * 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 meant for users that needs to select a color from a predefined set.
+ * 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>
@@ -143,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 = [];
 	}
 
@@ -178,6 +224,10 @@ class ColorPalette extends UI5Element {
 	}
 
 	selectColor(item) {
+		if (!item.value) {
+			return;
+		}
+
 		item.focus();
 
 		if (this.displayedColors.includes(item)) {
@@ -203,24 +253,128 @@ class ColorPalette extends UI5Element {
 	}
 
 	_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() {
 		const colorPicker = await this.getColorPicker();
 		this._setColor(colorPicker.color);
@@ -237,6 +391,12 @@ class ColorPalette extends UI5Element {
 		dialog.show();
 	}
 
+	_onDefaultColorClick() {
+		if (this.defaultColor) {
+			this._setColor(this.defaultColor);
+		}
+	}
+
 	/**
 	 * Returns the selected color.
 	 */
@@ -245,33 +405,79 @@ class ColorPalette extends UI5Element {
 	}
 
 	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 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/dist/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,
@@ -16,7 +17,7 @@ import ColorPaletteItemCss from "./generated/themes/ColorPaletteItem.css.js";
 const metadata = {
 	tag: "ui5-color-palette-item",
 	managedSlots: true,
-	properties: /** @lends  sap.ui.webcomponents.main.ColorPaletteItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.ColorPaletteItem.prototype */ {
 		/**
 		 * Defines the colour of the component.
 		 * <br><br>
@@ -42,12 +43,21 @@ const metadata = {
 		/**
 		 * 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}
@@ -97,20 +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/dist/ColorPalettePopover.js

@@ -0,0 +1,244 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.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 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": {
+			detail: {
+				color: {
+					type: String,
+				},
+			},
+		 },
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * Represents a predefined range of colors for easier selection.
+ *
+ * Overview
+ * The ColorPalettePopover provides the users with a slot to predefine colors.
+ *
+ * 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.
+ * 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.
+ *
+ * <h3>Usage</h3>
+ *
+ * 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.
+ *
+ * For the <code>ui5-color-palette-popover</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents/dist/ColorPalettePopover.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.ColorPalettePopover
+ * @extends 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);
+	}
+}
+
+ColorPalettePopover.define();
+
+export default ColorPalettePopover;