@ui5/webcomponents 1.2.6 → 1.4.0

package/dist/i18n/messagebundle_zh_CN.properties

@@ -21,6 +21,8 @@ AVATAR_GROUP_MOVE=按箭头键进行移动。
 
 BADGE_DESCRIPTION=徽章
 
+BREADCRUMB_ITEM_POS={0} / {1}
+
 BREADCRUMBS_ARIA_LABEL=位置指示节点跟踪
 
 BREADCRUMBS_OVERFLOW_ARIA_LABEL=更多
@@ -57,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=更改颜色
 
 COLOR_PALETTE_MORE_COLORS_TEXT=更多颜色...
 
+COLORPICKER_ALPHA_SLIDER=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=打开选取器
 
 DATEPICKER_DATE_DESCRIPTION=日期输入
@@ -73,6 +89,8 @@ FILEUPLOADER_TITLE=上载文件
 
 GROUP_HEADER_TEXT=组抬头
 
+SELECT_ROLE_DESCRIPTION=选择组合框
+
 SELECT_OPTIONS=选择选项
 
 INPUT_SUGGESTIONS=有可用建议
@@ -147,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=分段式按钮
 
 SLIDER_ARIA_DESCRIPTION=滑块手柄
 
-SWITCH_ON=开
-
-SWITCH_OFF=关
-
 LOAD_MORE_TEXT=更多
 
 TABLE_HEADER_ROW_TEXT=抬头行
@@ -171,6 +185,8 @@ TABCONTAINER_OVERFLOW_MENU_TITLE=溢出菜单
 
 TABCONTAINER_END_OVERFLOW=更多
 
+TABCONTAINER_POPOVER_CANCEL_BUTTON=取消
+
 TEXTAREA_CHARACTERS_LEFT=剩余 {0} 个字符
 
 TEXTAREA_CHARACTERS_EXCEEDED=超过限制 {0} 个字符
@@ -239,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=拆分按钮
 
 SPLIT_BUTTON_KEYBOARD_HINT=按空格键或 Enter 触发缺省操作，按 Alt + 向下箭头或 F4 触发箭头操作
 
+MENU_BACK_BUTTON_ARIA_LABEL=返回
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=拒绝

package/dist/i18n/messagebundle_zh_TW.properties

@@ -21,6 +21,8 @@ AVATAR_GROUP_MOVE=按箭頭鍵以移動。
 
 BADGE_DESCRIPTION=徽章
 
+BREADCRUMB_ITEM_POS={0}/{1}
+
 BREADCRUMBS_ARIA_LABEL=路徑指引追蹤
 
 BREADCRUMBS_OVERFLOW_ARIA_LABEL=更多
@@ -57,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=更改色彩
 
 COLOR_PALETTE_MORE_COLORS_TEXT=更多色彩...
 
+COLORPICKER_ALPHA_SLIDER=Alpha control
+
+COLORPICKER_HUE_SLIDER=Hue control
+
+COLORPICKER_HEX=Hexadecimal
+
+COLORPICKER_RED=Red
+
+COLORPICKER_GREEN=Green
+
+COLORPICKER_BLUE=Blue
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=開啟選擇器
 
 DATEPICKER_DATE_DESCRIPTION=日期輸入
@@ -73,6 +89,8 @@ FILEUPLOADER_TITLE=上傳檔案
 
 GROUP_HEADER_TEXT=群組表頭
 
+SELECT_ROLE_DESCRIPTION=選擇下拉式清單方塊
+
 SELECT_OPTIONS=選擇選項
 
 INPUT_SUGGESTIONS=可用建議
@@ -147,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=區段按鈕
 
 SLIDER_ARIA_DESCRIPTION=滑桿控點
 
-SWITCH_ON=開啟
-
-SWITCH_OFF=關閉
-
 LOAD_MORE_TEXT=較多
 
 TABLE_HEADER_ROW_TEXT=表頭列
@@ -171,6 +185,8 @@ TABCONTAINER_OVERFLOW_MENU_TITLE=溢位功能表
 
 TABCONTAINER_END_OVERFLOW=更多
 
+TABCONTAINER_POPOVER_CANCEL_BUTTON=取消
+
 TEXTAREA_CHARACTERS_LEFT=剩下 {0} 個字元
 
 TEXTAREA_CHARACTERS_EXCEEDED=超過 {0} 個字元
@@ -239,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=分割按鈕
 
 SPLIT_BUTTON_KEYBOARD_HINT=按下空格鍵或 Enter 以驅動預設動作，以及 Alt + 向下箭頭或 F4 以驅動箭頭動作
 
+MENU_BACK_BUTTON_ARIA_LABEL=返回
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=拒絕

package/dist/types/ListGrowingMode.js

@@ -1,15 +1,48 @@
-import GrowingMode from "./GrowingMode.js";
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * @lends sap.ui.webcomponents.main.types.ListGrowingMode.prototype
+ * @public
+ */
+const ListGrowingModes = {
+	/**
+	 * Component's <code>load-more</code> is fired upon pressing a "More" button.
+	 * at the bottom.
+	 * @public
+	 * @type {Button}
+	 */
+	Button: "Button",
+
+	/**
+	 * Component's <code>load-more</code> is fired upon scroll.
+	 * @public
+	 * @type {Scroll}
+	 */
+	Scroll: "Scroll",
+
+	/**
+	 * Component's growing is not enabled.
+	 * @public
+	 * @type {None}
+	 */
+	None: "None",
+};
 
 /**
  * @class
- * Defines the growing mode, used in the <code>ui5-List</code>.
+ * Defines the growing mode, used in the <code>ui5-list</code>.
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.types.ListGrowingMode
  * @public
  * @enum {string}
  */
-class ListGrowingMode extends GrowingMode {
+class ListGrowingMode extends DataType {
+	static isValid(value) {
+		return !!ListGrowingModes[value];
+	}
 }
 
+ListGrowingMode.generateTypeAccessors(ListGrowingModes);
+
 export default ListGrowingMode;

package/dist/types/TableGrowingMode.js

@@ -1,4 +1,32 @@
-import GrowingMode from "./GrowingMode.js";
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * @lends sap.ui.webcomponents.main.types.TableGrowingMode.prototype
+ * @public
+ */
+const TableGrowingModes = {
+	/**
+	 * Component's <code>load-more</code> is fired upon pressing a "More" button.
+	 * at the bottom.
+	 * @public
+	 * @type {Button}
+	 */
+	Button: "Button",
+
+	/**
+	 * Component's <code>load-more</code> is fired upon scroll.
+	 * @public
+	 * @type {Scroll}
+	 */
+	Scroll: "Scroll",
+
+	/**
+	 * Component's growing is not enabled.
+	 * @public
+	 * @type {None}
+	 */
+	None: "None",
+};
 
 /**
  * @class
@@ -9,7 +37,12 @@ import GrowingMode from "./GrowingMode.js";
  * @public
  * @enum {string}
  */
-class TableGrowingMode extends GrowingMode {
+class TableGrowingMode extends DataType {
+	static isValid(value) {
+		return !!TableGrowingModes[value];
+	}
 }
 
+TableGrowingMode.generateTypeAccessors(TableGrowingModes);
+
 export default TableGrowingMode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "1.2.6",
+  "version": "1.4.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -30,10 +30,8 @@
     "./dist/*": "./dist/*",
     "./package.json": "./package.json",
     "./bundle.esm.js": "./bundle.esm.js",
-    "./bundle.es5.js": "./bundle.es5.js",
     "./bundle.common.js": "./bundle.common.js",
     "./bundle.scoped.esm.js": "./bundle.scoped.esm.js",
-    "./bundle.scoped.es5.js": "./bundle.scoped.es5.js",
     "./*": "./dist/*"
   },
   "repository": {
@@ -42,14 +40,13 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.2.6",
-    "@ui5/webcomponents-icons": "1.2.6",
-    "@ui5/webcomponents-ie11": "1.2.6",
-    "@ui5/webcomponents-localization": "1.2.6",
-    "@ui5/webcomponents-theming": "1.2.6"
+    "@ui5/webcomponents-base": "1.4.0",
+    "@ui5/webcomponents-icons": "1.4.0",
+    "@ui5/webcomponents-localization": "1.4.0",
+    "@ui5/webcomponents-theming": "1.4.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.2.6",
-    "chromedriver": "99.0.0"
+    "@ui5/webcomponents-tools": "1.4.0",
+    "chromedriver": "101.0.0"
   }
 }

package/src/Badge.hbs

@@ -1,9 +1,4 @@
-<div
-	class="ui5-badge-root"
-	dir="{{effectiveDir}}"
-	@mousedown="{{_onmousedown}}"
-	@mouseup="{{_onmouseup}}"
->
+<div class="ui5-badge-root">
 	<slot name="icon"></slot>
 
 	{{#if hasText}}

package/src/Badge.js

@@ -48,13 +48,6 @@ const metadata = {
 		_iconOnly: {
 			type: Boolean,
 		},
-
-		/**
-		 * Defines whether the component is pressed.
-		 */
-		active: {
-			type: Boolean,
-		},
 	},
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.Badge.prototype */ {
@@ -135,14 +128,6 @@ class Badge extends UI5Element {
 		this._iconOnly = this.iconOnly;
 	}
 
-	_onmousedown() {
-		this.active = true;
-	}
-
-	_onmouseup() {
-		this.active = false;
-	}
-
 	get hasText() {
 		return !!this.textContent.trim().length;
 	}

package/src/Breadcrumbs.hbs

@@ -16,13 +16,15 @@
         </li>
 
         {{#each _linksData}}
-            <li class="ui5-breadcrumbs-link-wrapper" id="{{this._id}}-link-wrapper">
+            <li class="ui5-breadcrumbs-link-wrapper" 
+                id="{{this._id}}-link-wrapper">
+                
                 <ui5-link
                     @click="{{../_onLinkPress}}"
                     href="{{this.href}}"
                     target="{{this.target}}"
                     id="{{this._id}}-link"
-                    aria-label="{{this.accessibleName}}"
+                    accessible-name="{{this._accessibleNameText}}"
                     data-ui5-stable="{{this.stableDomRef}}">
                     {{this.innerText}}
                 </ui5-link>
@@ -31,9 +33,8 @@
 
         {{#if _endsWithCurrentLocationLabel}}
         <li class="ui5-breadcrumbs-current-location" @click="{{../_onLabelPress}}">
-            <span id={{this._id}}-labelWrapper>
-                <ui5-label
-                    aria-current="page">
+            <span aria-current="page" aria-label="{{_currentLocationAccName}}" role="link" id="{{this._id}}-labelWrapper">
+                <ui5-label>
                     {{_currentLocationText}}
                 </ui5-label>
             </span>

package/src/Breadcrumbs.js

@@ -14,6 +14,7 @@ import BreadcrumbsDesign from "./types/BreadcrumbsDesign.js";
 import BreadcrumbsSeparatorStyle from "./types/BreadcrumbsSeparatorStyle.js";
 import BreadcrumbsItem from "./BreadcrumbsItem.js";
 import {
+	BREADCRUMB_ITEM_POS,
 	BREADCRUMBS_ARIA_LABEL,
 	BREADCRUMBS_OVERFLOW_ARIA_LABEL,
 	BREADCRUMBS_CANCEL_BUTTON,
@@ -452,10 +453,34 @@ class Breadcrumbs extends UI5Element {
 		});
 	}
 
+	_getItemPositionText(position, size) {
+		return Breadcrumbs.i18nBundle.getText(BREADCRUMB_ITEM_POS, position, size);
+	}
+
+	_getItemAccessibleName(item, position, size) {
+		const positionText = this._getItemPositionText(position, size);
+
+		// innerText is needed as it is no longer read out when label is set
+		let text = "";
+		if (item.accessibleName) {
+			text = `${item.textContent.trim()} ${item.accessibleName} ${positionText}`;
+		} else {
+			text = `${item.textContent.trim()} ${positionText}`;
+		}
+
+		return text;
+	}
+
 	getCurrentLocationLabelWrapper() {
 		return this.shadowRoot.querySelector(".ui5-breadcrumbs-current-location > span");
 	}
 
+	get _visibleItems() {
+		return this.getSlottedNodes("items")
+			.slice(this._overflowSize)
+			.filter(i => this._isItemVisible(i));
+	}
+
 	get _endsWithCurrentLocationLabel() {
 		return this.design === BreadcrumbsDesign.Standard;
 	}
@@ -516,13 +541,38 @@ class Breadcrumbs extends UI5Element {
 	 * Getter for the list of abstract breadcrumb items to be rendered as links outside the overflow
 	 */
 	get _linksData() {
-		const items = this.getSlottedNodes("items").slice(this._overflowSize);
+		const items = this._visibleItems;
+		const itemsCount = items.length; // get size before removing of current location
 
 		if (this._endsWithCurrentLocationLabel) {
 			items.pop();
 		}
 
-		return items.filter(item => this._isItemVisible(item));
+		return items
+			.map((item, index) => {
+				item._accessibleNameText = this._getItemAccessibleName(item, index + 1, itemsCount);
+				return item;
+			});
+	}
+
+	/**
+	 * Getter for accessible name of the current location. Includes the position of the current location and the size of the breadcrumbs
+	 */
+	get _currentLocationAccName() {
+		const items = this._visibleItems;
+
+		const positionText = this._getItemPositionText(items.length, items.length);
+		const lastItem = items[items.length - 1];
+
+		if (!lastItem) {
+			return positionText;
+		}
+
+		if (lastItem.accessibleName) {
+			return `${lastItem.textContent.trim()} ${lastItem.accessibleName} ${positionText}`;
+		}
+
+		return `${lastItem.textContent.trim()} ${positionText}`;
 	}
 
 	/**

package/src/BreadcrumbsPopover.hbs

@@ -1,4 +1,5 @@
 <ui5-responsive-popover
+	class="ui5-breadcrumbs-popover"
 	hide-arrow
 	content-only-on-desktop
 	placement-type="Bottom"

package/src/Button.hbs

@@ -4,7 +4,6 @@
 	?disabled="{{disabled}}"
 	data-sap-focus-ref
 	{{> ariaPressed}}
-	dir="{{effectiveDir}}"
 	@focusout={{_onfocusout}}
 	@focusin={{_onfocusin}}
 	@click={{_onclick}}

package/src/Button.js

@@ -356,6 +356,20 @@ class Button extends UI5Element {
 
 			isGlobalHandlerAttached = true;
 		}
+
+		const handleTouchStartEvent = event => {
+			event.isMarked = "button";
+			if (this.nonInteractive) {
+				return;
+			}
+
+			this.active = true;
+		};
+
+		this._ontouchstart = {
+			handleEvent: handleTouchStartEvent,
+			passive: true,
+		};
 	}
 
 	onEnterDOM() {
@@ -378,7 +392,7 @@ class Button extends UI5Element {
 		}
 		event.isMarked = "button";
 		const FormSupport = getFeature("FormSupport");
-		if (FormSupport) {
+		if (FormSupport && this.submits) {
 			FormSupport.triggerFormSubmit(this);
 		}
 
@@ -397,15 +411,6 @@ class Button extends UI5Element {
 		activeButton = this; // eslint-disable-line
 	}
 
-	_ontouchstart(event) {
-		event.isMarked = "button";
-		if (this.nonInteractive) {
-			return;
-		}
-
-		this.active = true;
-	}
-
 	_ontouchend(event) {
 		this.active = false;
 

package/src/CalendarHeader.hbs

@@ -1,7 +1,4 @@
-<div
-	class="ui5-calheader-root"
-	dir="{{effectiveDir}}"
->
+<div class="ui5-calheader-root">
 	<div
 		data-ui5-cal-header-btn-prev
 		class="{{classes.prevButton}}"

package/src/Card.hbs

@@ -1,6 +1,5 @@
 <div
 	class="{{classes}}"
-	dir="{{effectiveDir}}"
 	role="region"
 	aria-label="{{_getAriaLabel}}">
 	{{#if _hasHeader}}

package/src/CardHeader.hbs

@@ -1,6 +1,5 @@
 <div
 	class="{{classes}}"
-	dir="{{effectiveDir}}"
 	@click="{{_headerClick}}"
 	@keydown="{{_headerKeydown}}"
 	@keyup="{{_headerKeyup}}"
@@ -18,25 +17,29 @@
 	{{/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>
 		{{/if}}
 	</div>
 
-	<div class="ui5-card-header-action">
-		{{#if hasAction}}
+	{{#if hasAction}}
+		<div class="ui5-card-header-action">
 			<slot name="action"></slot>
-		{{else}}
-			<span
-				id="{{_id}}-status"
-				part="status"
-				class="ui5-card-header-status"
-				dir="auto"
-			>{{status}}</span>
-		{{/if}}
+		</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

package/src/CheckBox.hbs

@@ -7,6 +7,7 @@
 	aria-label="{{ariaLabelText}}"
 	aria-labelledby="{{ariaLabelledBy}}"
 	aria-describedby="{{ariaDescribedBy}}"
+	aria-required="{{required}}"
 	tabindex="{{tabIndex}}"
 	@mousedown="{{_onmousedown}}"
 	@mouseup="{{_onmouseup}}"
@@ -14,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

@@ -84,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>

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/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>
@@ -47,6 +49,7 @@
                 class="ui5-color-picker-hex-input"
                 value="{{hex}}"
                 @keydown="{{_onkeydown}}"
+                accessible-name="{{hexInputLabel}}"
                 @ui5-change="{{_handleHEXChange}}"
                 value-state="{{hexInputErrorState}}"
             ></ui5-input>
@@ -62,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>
@@ -71,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>
@@ -80,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>
@@ -90,6 +96,7 @@
                 disabled="{{inputsDisabled}}"
                 class="ui5-color-picker-rgb-input"
                 value="{{_alpha}}"
+                accessible-name="{{alphaInputLabel}}"
                 @ui5-input="{{_handleAlphaInput}}"
                 @ui5-change="{{_handleAlphaChange}}"
             ></ui5-input>