@ui5/webcomponents 0.0.0-2c7615fe9 → 0.0.0-3236d56be

package/dist/CheckBox.js

@@ -1,9 +1,10 @@
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 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 ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
 import Icon from "./Icon.js";
@@ -21,6 +22,9 @@ import CheckBoxTemplate from "./generated/templates/CheckBoxTemplate.lit.js";
 // Styles
 import checkboxCss from "./generated/themes/CheckBox.css.js";
 
+let isGlobalHandlerAttached = false;
+let activeCb = null;
+
 /**
  * @public
  */
@@ -29,6 +33,30 @@ const metadata = {
 	languageAware: true,
 	properties: /** @lends sap.ui.webcomponents.main.CheckBox.prototype */ {
 
+		/**
+		 * Receives id(or many ids) of the elements that label the component
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.1.0
+		 */
+		accessibleNameRef: {
+			type: String,
+			defaultValue: "",
+		},
+
+		/**
+		 * Defines the accessible aria name of the component.
+		 *
+		 * @type {string}
+		 * @public
+		 * @defaultvalue ""
+		 * @since 1.1.0
+		 */
+		accessibleName: {
+			type: String,
+		},
+
 		/**
 		 * Defines whether the component is disabled.
 		 * <br><br>
@@ -56,6 +84,18 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines whether the component is required.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.3.0
+		 */
+		required: {
+			type: Boolean,
+		},
+
 		/**
 		* Defines whether the component is displayed as partially checked.
 		* <br><br>
@@ -163,6 +203,14 @@ const metadata = {
 		name: {
 			type: String,
 		},
+
+		/**
+		 * Defines the active state (pressed or not) of the component.
+		 * @private
+		 */
+		active: {
+			type: Boolean,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.CheckBox.prototype */ {
 
@@ -254,7 +302,16 @@ class CheckBox extends UI5Element {
 	constructor() {
 		super();
 
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+		this._deactivate = () => {
+			if (activeCb) {
+				activeCb.active = false;
+			}
+		};
+
+		if (!isGlobalHandlerAttached) {
+			document.addEventListener("mouseup", this._deactivate);
+			isGlobalHandlerAttached = true;
+		}
 	}
 
 	onBeforeRendering() {
@@ -277,13 +334,32 @@ class CheckBox extends UI5Element {
 		this.toggle();
 	}
 
+	_onmousedown() {
+		if (this.readonly || this.disabled) {
+			return;
+		}
+
+		this.active = true;
+		activeCb = this; // eslint-disable-line
+	}
+
+	_onmouseup() {
+		this.active = false;
+	}
+
+	_onfocusout() {
+		this.active = false;
+	}
+
 	_onkeydown(event) {
 		if (isSpace(event)) {
 			event.preventDefault();
+			this.active = true;
 		}
 
 		if (isEnter(event)) {
 			this.toggle();
+			this.active = true;
 		}
 	}
 
@@ -291,6 +367,8 @@ class CheckBox extends UI5Element {
 		if (isSpace(event)) {
 			this.toggle();
 		}
+
+		this.active = false;
 	}
 
 	toggle() {
@@ -314,15 +392,17 @@ class CheckBox extends UI5Element {
 	}
 
 	valueStateTextMappings() {
-		const i18nBundle = this.i18nBundle;
-
 		return {
-			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
-			"Success": i18nBundle.getText(VALUE_STATE_SUCCESS),
+			"Error": CheckBox.i18nBundle.getText(VALUE_STATE_ERROR),
+			"Warning": CheckBox.i18nBundle.getText(VALUE_STATE_WARNING),
+			"Success": CheckBox.i18nBundle.getText(VALUE_STATE_SUCCESS),
 		};
 	}
 
+	get ariaLabelText() {
+		return getEffectiveAriaLabelText(this);
+	}
+
 	get classes() {
 		return {
 			main: {
@@ -344,7 +424,11 @@ class CheckBox extends UI5Element {
 	}
 
 	get ariaLabelledBy() {
-		return this.text ? `${this._id}-label` : undefined;
+		if (!this.ariaLabelText) {
+			return this.text ? `${this._id}-label` : undefined;
+		}
+
+		return undefined;
 	}
 
 	get ariaDescribedBy() {
@@ -376,7 +460,7 @@ class CheckBox extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		CheckBox.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/dist/ColorPalette.js

@@ -1,6 +1,6 @@
 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";
@@ -16,6 +16,7 @@ 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,
@@ -96,7 +97,7 @@ const metadata = {
 	},
 	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
@@ -115,7 +116,7 @@ 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: {
@@ -131,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>
@@ -178,16 +179,20 @@ 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: this.rowSize,
@@ -248,20 +253,20 @@ 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) && event.target.localName === "ui5-color-palette-item") {
+		if (isSpace(event) && event.target.hasAttribute("ui5-color-palette-item")) {
 			event.preventDefault();
 			this.selectColor(event.target);
 		}
 	}
 
 	_onkeydown(event) {
-		if (isEnter(event) && event.target.localName === "ui5-color-palette-item") {
+		if (isEnter(event) && event.target.hasAttribute("ui5-color-palette-item")) {
 			this.selectColor(event.target);
 		}
 	}
@@ -404,11 +409,11 @@ class ColorPalette extends UI5Element {
 	}
 
 	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() {

package/dist/ColorPaletteItem.js

@@ -1,6 +1,6 @@
 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";
@@ -43,7 +43,7 @@ const metadata = {
 		/**
 		 * Defines the index of the item inside of the ColorPalette.
 		 * @private
-		 * @type {String}
+		 * @type {string}
 		 */
 		index: {
 			type: String,
@@ -52,7 +52,7 @@ const metadata = {
 		/**
 		 * Defines if the ColorPalette is on phone mode.
 		 * @private
-		 * @type {Boolean}
+		 * @type {boolean}
 		 */
 		phone: {
 			type: Boolean,
@@ -107,12 +107,11 @@ 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() {
@@ -121,7 +120,15 @@ class ColorPaletteItem extends UI5Element {
 	}
 
 	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

@@ -1,6 +1,6 @@
 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 ColorPalettePopoverTemplate from "./generated/templates/ColorPalettePopoverTemplate.lit.js";
 
@@ -13,6 +13,7 @@ import {
 } 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";
 
@@ -58,7 +59,6 @@ const metadata = {
 		 * Defines the default color of the component.
 		 * <b>Note:</b> The default color should be a part of the ColorPalette colors</code>
 		 * @type {CSSColor}
-		 * @defaultValue ""
 		 * @public
 		 */
 		defaultColor: {
@@ -68,8 +68,8 @@ const metadata = {
 	slots: /** @lends sap.ui.webcomponents.main.ColorPalettePopover.prototype */ {
 		/**
 		 * Defines the content of the component.
-		 * @type {HTMLElement[]}
-		 * @slot
+		 * @type {sap.ui.webcomponents.main.IColorPaletteItem[]}
+		 * @slot colors
 		 * @public
 		 */
 		"default": {
@@ -84,7 +84,7 @@ const metadata = {
 		 *
 		 * @event sap.ui.webcomponents.main.ColorPalettePopover#item-click
 		 * @public
-		 * @param {String} color the selected color
+		 * @param {string} color the selected color
 		 */
 		"item-click": {
 			details: {
@@ -146,17 +146,17 @@ class ColorPalettePopover extends UI5Element {
 		return [
 			ResponsivePopover,
 			Button,
+			Title,
 			ColorPalette,
 		];
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		ColorPalettePopover.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	_respPopover() {
@@ -169,11 +169,30 @@ class ColorPalettePopover extends UI5Element {
 		return this.responsivePopover.content[0].querySelector("[ui5-color-palette]");
 	}
 
-	closePopover() {
-		this.responsivePopover.close();
+	/**
+	 * 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);
@@ -185,9 +204,26 @@ class ColorPalettePopover extends UI5Element {
 		}
 	}
 
+	closePopover() {
+		this.responsivePopover.close();
+	}
+
 	onSelectedColor(event) {
 		this.closePopover();
-		this.fireEvent("item-click", event);
+		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() {
@@ -195,11 +231,11 @@ class ColorPalettePopover extends UI5Element {
 	}
 
 	get _colorPaletteTitle() {
-		return this.i18nBundle.getText(COLORPALETTE_POPOVER_TITLE);
+		return ColorPalettePopover.i18nBundle.getText(COLORPALETTE_POPOVER_TITLE);
 	}
 
 	get _cancelButtonLabel() {
-		return this.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);
+		return ColorPalettePopover.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);
 	}
 }