@ui5/webcomponents 0.0.0-cf069fb29 → 0.0.0-cf50976ce

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 控制
+
+COLORPICKER_HUE_SLIDER=色調控制
+
+COLORPICKER_HEX=十六進位
+
+COLORPICKER_RED=紅色
+
+COLORPICKER_GREEN=綠色
+
+COLORPICKER_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=可用建議
@@ -95,6 +113,8 @@ LIST_ITEM_SELECTED=已勾選
 
 LIST_ITEM_NOT_SELECTED=未選擇
 
+LIST_ITEM_GROUP_HEADER=群組表頭
+
 ARIA_LABEL_LIST_ITEM_CHECKBOX=多重選擇模式
 
 ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=項目選擇。
@@ -147,13 +167,9 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=區段按鈕
 
 SLIDER_ARIA_DESCRIPTION=滑桿控點
 
-SWITCH_ON=開啟
-
-SWITCH_OFF=關閉
-
 LOAD_MORE_TEXT=較多
 
-TABLE_HEADER_ROW_TEXT=表頭列
+TABLE_HEADER_ROW_INFORMATION=Header Row 1 of {0}
 
 TABLE_ROW_POSITION={0}/{1}
 
@@ -171,6 +187,8 @@ TABCONTAINER_OVERFLOW_MENU_TITLE=溢位功能表
 
 TABCONTAINER_END_OVERFLOW=更多
 
+TABCONTAINER_POPOVER_CANCEL_BUTTON=取消
+
 TEXTAREA_CHARACTERS_LEFT=剩下 {0} 個字元
 
 TEXTAREA_CHARACTERS_EXCEEDED=超過 {0} 個字元
@@ -181,8 +199,6 @@ TIMEPICKER_MINUTES_LABEL=分
 
 TIMEPICKER_SECONDS_LABEL=秒
 
-TIMEPICKER_PERIODS_LABEL=早上/下午
-
 TIMEPICKER_SUBMIT_BUTTON=成功
 
 TIMEPICKER_CANCEL_BUTTON=取消
@@ -213,6 +229,14 @@ TREE_ITEM_EXPAND_NODE=展開節點
 
 TREE_ITEM_COLLAPSE_NODE=收縮節點
 
+VALUE_STATE_TYPE_ERROR=值狀態 (錯誤)
+
+VALUE_STATE_TYPE_WARNING=值狀態 (警告)
+
+VALUE_STATE_TYPE_SUCCESS=值狀態 (成功)
+
+VALUE_STATE_TYPE_INFORMATION=值狀態資訊
+
 VALUE_STATE_ERROR=無效輸入項
 
 VALUE_STATE_WARNING=已發出警告
@@ -235,7 +259,10 @@ STEPINPUT_DEC_ICON_TITLE=減少
 
 STEPINPUT_INC_ICON_TITLE=增加
 
-SPLIT_BUTTON_DESCRIPTION=Split Button
+SPLIT_BUTTON_DESCRIPTION=分割按鈕
+
+SPLIT_BUTTON_KEYBOARD_HINT=按下空格鍵或 Enter 以驅動預設動作，以及 Alt + 向下箭頭或 F4 以驅動箭頭動作
 
-SPLIT_BUTTON_KEYBOARD_HINT=Press Space or Enter to trigger default action and Alt + Arrow Down or F4 to trigger arrow action
+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": "0.0.0-cf069fb29",
+  "version": "0.0.0-cf50976ce",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -18,9 +18,10 @@
     "lint": "wc-dev lint",
     "start": "wc-dev start",
     "watch": "wc-dev watch",
-    "serve": "wc-dev serve",
     "build": "wc-dev build",
     "test": "wc-dev test",
+    "test:suite-1": "wc-dev test-suite-1",
+    "test:suite-2": "wc-dev test-suite-2",
     "create-ui5-element": "wc-create-ui5-element",
     "prepublishOnly": "npm run build"
   },
@@ -30,8 +31,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",
     "./*": "./dist/*"
   },
   "repository": {
@@ -40,14 +41,13 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.0.0-cf069fb29",
-    "@ui5/webcomponents-icons": "0.0.0-cf069fb29",
-    "@ui5/webcomponents-ie11": "0.0.0-cf069fb29",
-    "@ui5/webcomponents-localization": "0.0.0-cf069fb29",
-    "@ui5/webcomponents-theming": "0.0.0-cf069fb29"
+    "@ui5/webcomponents-base": "0.0.0-cf50976ce",
+    "@ui5/webcomponents-icons": "0.0.0-cf50976ce",
+    "@ui5/webcomponents-localization": "0.0.0-cf50976ce",
+    "@ui5/webcomponents-theming": "0.0.0-cf50976ce"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-cf069fb29",
-    "chromedriver": "96.0.0"
+    "@ui5/webcomponents-tools": "0.0.0-cf50976ce",
+    "chromedriver": "104.0.0"
   }
 }

package/src/Avatar.hbs

@@ -17,4 +17,6 @@
 	{{else if initials}}
 		<span class="ui5-avatar-initials">{{validInitials}}</span>
 	{{/if}}
+
+	<slot name="badge"></slot>
 </div>

package/src/Avatar.js

@@ -26,7 +26,7 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
 
 		/**
-		 * Defines if the avatar is interactive (focusable and pressable)
+		 * Defines if the avatar is interactive (focusable and pressable).
 		 * @type {boolean}
 		 * @defaultValue false
 		 * @public
@@ -44,9 +44,9 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the name of the UI5 Icon, that would be displayed.
+		 * Defines the name of the UI5 Icon, that will be displayed.
 		 * <br>
-		 * <b>Note:</b> If <code>image</code> slot is provided, the property would be ignored.
+		 * <b>Note:</b> If <code>image</code> slot is provided, the property will be ignored.
 		 * <br>
 		 * <b>Note:</b> You should import the desired icon first, then use its name as "icon".
 		 * <br><br>
@@ -54,7 +54,7 @@ const metadata = {
 		 * <br>
 		 * <pre>&lt;ui5-avatar icon="employee"></pre>
 		 *
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -200,7 +200,7 @@ const metadata = {
 		 *		} <br />
 		 * </code>
 		 * @type {HTMLElement}
-		 * @slot
+		 * @slot image
 		 * @public
 		 * @since 1.0.0-rc.15
 		 */
@@ -208,6 +208,34 @@ const metadata = {
 			propertyName: "image",
 			type: HTMLElement,
 		},
+		/**
+		 * Defines the optional badge that will be used for visual affordance.
+		 * <b>Note:</b> While the slot allows for custom badges, to achieve
+		 * the Fiori design, please use <code>ui5-badge</code> with <code>ui5-icon</code>
+		 * in the corresponding <code>icon</code> slot, without text nodes.
+		 * <br><br>
+		 * Example:
+		 * <br><br>
+		 * &lt;ui5-avatar><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-badge slot="badge"><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-icon slot="icon" name="employee">&lt;/ui5-icon><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp&lt;/ui5-badge><br>
+		 * &lt;/ui5-avatar>
+		 * <br><br>
+		 * <ui5-avatar initials="AB" color-scheme="Accent1">
+		 * <ui5-badge slot="badge">
+		 * <ui5-icon slot="icon" name="accelerated"></ui5-icon>
+		 * </ui5-badge>
+		 * </ui5-avatar>
+		 *
+		 * @type {HTMLElement}
+		 * @slot badge
+		 * @public
+		 * @since 1.7.0
+		 */
+		badge: {
+			type: HTMLElement,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
 		/**
@@ -226,7 +254,7 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * An image-like control that has different display options for representing images and icons
+ * An image-like component that has different display options for representing images and icons
  * in different shapes and sizes, depending on the use case.
  *
  * The shape can be circular or square. There are several predefined sizes, as well as an option to

package/src/AvatarGroup.hbs

@@ -17,7 +17,7 @@
 			<slot name="overflowButton"></slot>
 		{{else}}
 			<ui5-button
-				._buttonAccInfo="{{_overflowButtonAccInfo}}"
+				.accessibilityAttributes="{{_overflowButtonAccAttributes}}"
 				aria-label="{{_overflowButtonAriaLabelText}}"
 				?hidden="{{_overflowBtnHidden}}"
 				?non-interactive={{_isGroup}}

package/src/AvatarGroup.js

@@ -8,6 +8,7 @@ import {
 	isEnter,
 	isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isChrome } from "@ui5/webcomponents-base/dist/Device.js";
 
 import {
 	AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL,
@@ -329,9 +330,9 @@ class AvatarGroup extends UI5Element {
 		return this._isGroup ? this._getAriaHasPopup() : undefined;
 	}
 
-	get _overflowButtonAccInfo() {
+	get _overflowButtonAccAttributes() {
 		return {
-			ariaHaspopup: this._isGroup ? undefined : this._getAriaHasPopup(),
+			hasPopup: this._isGroup ? undefined : this._getAriaHasPopup(),
 		};
 	}
 
@@ -376,13 +377,21 @@ class AvatarGroup extends UI5Element {
 		// if in "Group" mode overflow button size is equal to the offset from second item
 		if (this._isGroup) {
 			let item = this.items[1];
+			let ltrEffectiveWidth;
 
 			// in some cases when second avatar is overflowed the offset of the button is the right one
 			if (!item || item.hidden) {
 				item = button;
 			}
 
-			return this.effectiveDir === "rtl" ? this._getWidthToItem(item) : item.offsetLeft;
+			ltrEffectiveWidth = item.offsetLeft;
+
+			if (!isChrome()) {
+				// additional subtractions required for non-Chromium browsers
+				ltrEffectiveWidth = item.offsetLeft - this.offsetLeft;
+			}
+
+			return this.effectiveDir === "rtl" ? this._getWidthToItem(item) : ltrEffectiveWidth;
 		}
 
 		return button.offsetWidth;
@@ -518,6 +527,7 @@ class AvatarGroup extends UI5Element {
 	 */
 	_getWidthToItem(item) {
 		const isRTL = this.effectiveDir === "rtl";
+		let ltrWidthToItem;
 
 		if (isRTL) {
 			// in RTL the total width is equal to difference of the parent container width and
@@ -526,7 +536,15 @@ class AvatarGroup extends UI5Element {
 		}
 
 		// in LTR the width is equal to item.offsetLeft
-		return item.offsetLeft;
+		ltrWidthToItem = item.offsetLeft;
+
+		if (!isChrome()) {
+			// for non-Chromium browsers offsetLeft may differ
+			// to normalize it, the Avatar Group's offset-left is subtracted
+			ltrWidthToItem = item.offsetLeft - this.offsetLeft;
+		}
+
+		return ltrWidthToItem;
 	}
 
 	/**

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

@@ -1,6 +1,7 @@
 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 isDefaultSlotProvided from "@ui5/webcomponents-base/dist/util/isDefaultSlotProvided.js";
 
 // Template
 import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
@@ -48,13 +49,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,16 +129,8 @@ class Badge extends UI5Element {
 		this._iconOnly = this.iconOnly;
 	}
 
-	_onmousedown() {
-		this.active = true;
-	}
-
-	_onmouseup() {
-		this.active = false;
-	}
-
 	get hasText() {
-		return !!this.textContent.trim().length;
+		return isDefaultSlotProvided(this);
 	}
 
 	get hasIcon() {

package/src/Breadcrumbs.hbs

@@ -6,7 +6,7 @@
 
         <li class="ui5-breadcrumbs-dropdown-arrow-link-wrapper" 
             ?hidden="{{_isOverflowEmpty}}">
-            <ui5-link @click="{{_openRespPopover}}"
+            <ui5-link @ui5-click="{{_openRespPopover}}"
                 accessible-role="button"
                 aria-label="{{_dropdownArrowAccessibleNameText}}"
                 aria-haspopup="{{_ariaHasPopup}}">
@@ -16,13 +16,15 @@
         </li>
 
         {{#each _linksData}}
-            <li class="ui5-breadcrumbs-link-wrapper" @click="{{../_onLinkPress}}" 
+            <li class="ui5-breadcrumbs-link-wrapper" 
                 id="{{this._id}}-link-wrapper">
+                
                 <ui5-link
+                    @ui5-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>