@ui5/webcomponents 0.0.0-4180fe799 → 0.0.0-453158269

package/src/CardHeader.hbs

@@ -1,6 +1,5 @@
 <div
 	class="{{classes}}"
-	dir="{{effectiveDir}}"
 	@click="{{_headerClick}}"
 	@keydown="{{_headerKeydown}}"
 	@keyup="{{_headerKeyup}}"
@@ -18,9 +17,18 @@
 	{{/if}}
 
 	<div class="ui5-card-header-text">
-		{{#if titleText}}
-			<div id="{{_id}}-title" class="ui5-card-header-title" part="title">{{titleText}}</div>
-		{{/if}}
+		<div class="ui5-card-header-first-line">
+			{{#if titleText}}
+				<div id="{{_id}}-title" class="ui5-card-header-title" part="title">{{titleText}}</div>
+			{{/if}}
+
+			{{#if status}}
+				<div class="ui5-card-header-status">
+					<span id="{{_id}}-status" part="status" dir="auto">{{status}}</span>
+				</div>
+			{{/if}}
+
+		</div>
 
 		{{#if subtitleText}}
 			<div id="{{_id}}-subtitle" class="ui5-card-header-subtitle" part="subtitle">{{subtitleText}}</div>
@@ -28,8 +36,10 @@
 	</div>
 
 	{{#if hasAction}}
-		<slot name="action"></slot>
-	{{else}}
-		<span id="{{_id}}-status" part="status" class="ui5-card-header-status" dir="auto">{{status}}</span>
+		<div class="ui5-card-header-action">
+			<slot name="action"></slot>
+		</div>
 	{{/if}}
-</div>
+
+	</div>
+</div>

package/src/CardHeader.js

@@ -36,9 +36,6 @@ const metadata = {
 
 		/**
 		 * Defines an action, displayed in the right most part of the header.
-		 * <br><br>
-		 * <b>Note:</b> If set, the <code>status</code> text will not be displayed,
-		 * you can either have <code>action</code>, or <code>status</code>.
 		 * @type {HTMLElement[]}
 		 * @slot
 		 * @public
@@ -71,9 +68,6 @@ const metadata = {
 
 		/**
 		 * Defines the status text.
-		 * <br><br>
-		 * <b>Note:</b> If the <code>action</code> slot is set, the <code>status</code> will not be displayed,
-		 * you can either have <code>action</code>, or <code>status</code>.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -241,15 +235,16 @@ class CardHeader extends UI5Element {
 	}
 
 	_headerClick(event) {
-		event.stopImmediatePropagation(); // prevents the native browser "click" event from firing
+		// prevents the native browser "click" event from firing
+		event.stopImmediatePropagation();
 
-		if (this.interactive) {
+		if (this.interactive && event.target === event.currentTarget) {
 			this.fireEvent("click");
 		}
 	}
 
 	_headerKeydown(event) {
-		if (!this.interactive) {
+		if (!this.interactive || event.target !== event.currentTarget) {
 			return;
 		}
 
@@ -269,7 +264,7 @@ class CardHeader extends UI5Element {
 	}
 
 	_headerKeyup(event) {
-		if (!this.interactive) {
+		if (!this.interactive || event.target !== event.currentTarget) {
 			return;
 		}
 

package/src/Carousel.hbs

@@ -17,6 +17,7 @@
                     role="option"
                     aria-posinset="{{posinset}}"
                     aria-setsize="{{setsize}}"
+                    part="item"
                 >
                     <slot name="{{this.item._individualSlot}}" tabindex="{{this.tabIndex}}"></slot>
                 </div>
@@ -65,7 +66,7 @@
 {{#*inline "arrow-back"}}
 	<ui5-button
         arrow-back
-        title="{{previousPageText}}"
+        tooltip="{{previousPageText}}"
         class="ui5-carousel-navigation-button {{classes.navPrevButton}}"
         icon="slim-arrow-left"
         tabindex="-1"
@@ -76,7 +77,7 @@
 {{#*inline "arrow-forward"}}
     <ui5-button
         arrow-forward
-        title="{{nextPageText}}"
+        tooltip="{{nextPageText}}"
         class="ui5-carousel-navigation-button {{classes.navNextButton}}"
         icon="slim-arrow-right"
         tabindex="-1"

package/src/Carousel.js

@@ -38,6 +38,7 @@ import CarouselCss from "./generated/themes/Carousel.css.js";
 const metadata = {
 	tag: "ui5-carousel",
 	languageAware: true,
+	fastNavigation: true,
 	properties: /** @lends sap.ui.webcomponents.main.Carousel.prototype */ {
 		/**
 		 * Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.
@@ -231,10 +232,18 @@ const metadata = {
  * </ul>
  *
  * <h3>Keyboard Handling</h3>
+ *
+ * <h4>Basic Navigation</h4>
  * When the <code>ui5-carousel</code> is focused the user can navigate between the items
  * with the following keyboard shortcuts:
  * <br>
  *
+ * * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
  * <ul>
  * <li>[UP/DOWN] - Navigates to previous and next item</li>
  * <li>[LEFT/RIGHT] - Navigates to previous and next item</li>

package/src/CheckBox.hbs

@@ -4,8 +4,10 @@
 	aria-checked="{{ariaChecked}}"
 	aria-readonly="{{ariaReadonly}}"
 	aria-disabled="{{ariaDisabled}}"
+	aria-label="{{ariaLabelText}}"
 	aria-labelledby="{{ariaLabelledBy}}"
 	aria-describedby="{{ariaDescribedBy}}"
+	aria-required="{{required}}"
 	tabindex="{{tabIndex}}"
 	@mousedown="{{_onmousedown}}"
 	@mouseup="{{_onmouseup}}"
@@ -13,7 +15,6 @@
 	@keyup="{{_onkeyup}}"
 	@click="{{_onclick}}"
 	@focusout="{{_onfocusout}}"
-	dir="{{effectiveDir}}"
 >
 		<div id="{{_id}}-CbBg" class="ui5-checkbox-inner">
 			{{#if isCompletelyChecked}}

package/src/CheckBox.js

@@ -4,6 +4,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.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";
@@ -32,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>
@@ -59,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>
@@ -362,6 +399,10 @@ class CheckBox extends UI5Element {
 		};
 	}
 
+	get ariaLabelText() {
+		return getEffectiveAriaLabelText(this);
+	}
+
 	get classes() {
 		return {
 			main: {
@@ -383,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() {

package/src/ColorPalette.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,
@@ -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: {
@@ -178,7 +179,7 @@ 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() {
@@ -252,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);
 		}
 	}

package/src/ColorPaletteDialog.hbs

@@ -7,7 +7,7 @@
 
     <div slot="footer" class="ui5-cp-dialog-footer">
         <ui5-button
-            design="Transparent"
+            design="Emphasized"
             @click="{{_chooseCustomColor}}"
         >{{moreColorsFeature.colorPaletteDialogOKButton}}</ui5-button>
         <ui5-button

package/src/ColorPaletteItem.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,

package/src/ColorPalettePopover.hbs

@@ -2,19 +2,21 @@
 	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>
+			class="ui5-cp-title"
+		>{{_colorPaletteTitle}}</ui5-title>
 	</div>
 	<div>
-		<ui5-color-palette 
+		<ui5-color-palette
 			?show-more-colors="{{this.showMoreColors}}"
 			?show-recent-colors="{{this.showRecentColors}}"
-			?show-default-color="{{this.defaultColor}}"
+			?show-default-color="{{this.showDefaultColor}}"
 			default-color="{{this.defaultColor}}"
 			popup-mode
-			@item-click="{{onSelectedColor}}">
+			@ui5-item-click="{{onSelectedColor}}"
+		>
 			{{#each colorPaletteColors}}
 				<slot name="{{this._individualSlot}}"></slot>
 			{{/each}}
@@ -26,4 +28,4 @@
 			@click="{{closePopover}}"
 		>{{_cancelButtonLabel}}</ui5-button>
 	</div>
-</ui5-responsive-popover>
+</ui5-responsive-popover>

package/src/ColorPalettePopover.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";
 
@@ -67,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": {
@@ -83,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: {
@@ -145,6 +146,7 @@ class ColorPalettePopover extends UI5Element {
 		return [
 			ResponsivePopover,
 			Button,
+			Title,
 			ColorPalette,
 		];
 	}
@@ -167,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);
@@ -183,6 +204,10 @@ class ColorPalettePopover extends UI5Element {
 		}
 	}
 
+	closePopover() {
+		this.responsivePopover.close();
+	}
+
 	onSelectedColor(event) {
 		this.closePopover();
 		this.fireEvent("item-click", event.detail);

package/src/ColorPicker.hbs

@@ -1,4 +1,4 @@
-<section class="ui5-color-picker-root">
+<section dir="{{effectiveDir}}" class="ui5-color-picker-root"  >
     <div
         class="ui5-color-picker-main-color"
         style="{{styles.mainColor}}"
@@ -9,7 +9,7 @@
     >
         <div
             class="ui5-color-picker-circle"
-            style="{{styles.circle}}"    
+            style="{{styles.circle}}"
         ></div>
     </div>
 
@@ -20,6 +20,7 @@
             min="0"
             max="1530"
             value="{{_hue}}"
+            accessible-name="{{hueSliderLabel}}"
             @ui5-input="{{_handleHueInput}}"
         ></ui5-slider>
         <ui5-slider
@@ -29,6 +30,7 @@
             max="1"
             step="0.01"
             value="{{_alpha}}"
+            accessible-name="{{alphaSliderLabel}}"
             @ui5-input="{{_handleAlphaInput}}"
         ></ui5-slider>
     </div>
@@ -46,6 +48,8 @@
             <ui5-input
                 class="ui5-color-picker-hex-input"
                 value="{{hex}}"
+                @keydown="{{_onkeydown}}"
+                accessible-name="{{hexInputLabel}}"
                 @ui5-change="{{_handleHEXChange}}"
                 value-state="{{hexInputErrorState}}"
             ></ui5-input>
@@ -61,6 +65,7 @@
                 id="red"
                 class="ui5-color-picker-rgb-input"
                 disabled="{{inputsDisabled}}"
+                accessible-name="{{redInputLabel}}"
                 value="{{_color.r}}"
             ></ui5-input>
             <ui5-label>R</ui5-label>
@@ -70,6 +75,7 @@
                 id="green"
                 class="ui5-color-picker-rgb-input"
                 disabled="{{inputsDisabled}}"
+                accessible-name="{{greenInputLabel}}"
                 value="{{_color.g}}"
             ></ui5-input>
             <ui5-label>G</ui5-label>
@@ -79,6 +85,7 @@
                 id="blue"
                 class="ui5-color-picker-rgb-input"
                 disabled="{{inputsDisabled}}"
+                accessible-name="{{blueInputLabel}}"
                 value="{{_color.b}}"
             ></ui5-input>
             <ui5-label>B</ui5-label>
@@ -89,6 +96,7 @@
                 disabled="{{inputsDisabled}}"
                 class="ui5-color-picker-rgb-input"
                 value="{{_alpha}}"
+                accessible-name="{{alphaInputLabel}}"
                 @ui5-input="{{_handleAlphaInput}}"
                 @ui5-change="{{_handleAlphaChange}}"
             ></ui5-input>