@ui5/webcomponents 1.3.1 → 1.6.0

package/dist/i18n/messagebundle_vi.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=Thay đổi màu
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Nhiều màu hơn...
 
+COLORPICKER_ALPHA_SLIDER=Kiểm soát Alpha
+
+COLORPICKER_HUE_SLIDER=Kiểm soát sắc độ màu
+
+COLORPICKER_HEX=Thập lục phân
+
+COLORPICKER_RED=Đỏ
+
+COLORPICKER_GREEN=Xanh lá cây
+
+COLORPICKER_BLUE=Xanh da trời
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=Mở trình chọn
 
 DATEPICKER_DATE_DESCRIPTION=Nhập ngày
@@ -99,6 +113,8 @@ LIST_ITEM_SELECTED=Được chọn
 
 LIST_ITEM_NOT_SELECTED=Không được chọn
 
+LIST_ITEM_GROUP_HEADER=Tiêu đề nhóm
+
 ARIA_LABEL_LIST_ITEM_CHECKBOX=Chế độ đa lựa chọn
 
 ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=Lựa chọn mục.
@@ -151,10 +167,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Nút được phân đoạn
 
 SLIDER_ARIA_DESCRIPTION=Điều khiển thanh trượt
 
-SWITCH_ON=Bật
-
-SWITCH_OFF=Tắt
-
 LOAD_MORE_TEXT=Thêm
 
 TABLE_HEADER_ROW_TEXT=Hàng tiêu đề
@@ -219,6 +231,14 @@ TREE_ITEM_EXPAND_NODE=Mở rộng nút
 
 TREE_ITEM_COLLAPSE_NODE=Thu gọn nút
 
+VALUE_STATE_TYPE_ERROR=Value State Error
+
+VALUE_STATE_TYPE_WARNING=Value State Warning
+
+VALUE_STATE_TYPE_SUCCESS=Value State Success
+
+VALUE_STATE_TYPE_INFORMATION=Value State Information
+
 VALUE_STATE_ERROR=Mục nhập không hợp lệ
 
 VALUE_STATE_WARNING=Cảnh báo được phát hành
@@ -245,3 +265,6 @@ SPLIT_BUTTON_DESCRIPTION=Nút phân chia
 
 SPLIT_BUTTON_KEYBOARD_HINT=Nhấn Phím cách hoặc Enter để kích hoạt thao tác mặc định và Alt + Mũi tên xuống hoặc F4 để kích hoạt thao tác mũi tên
 
+MENU_BACK_BUTTON_ARIA_LABEL=Quay lại
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=Từ chối

package/dist/i18n/messagebundle_zh_CN.properties

@@ -59,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=日期输入
@@ -99,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=项目选择。
@@ -151,10 +167,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=分段式按钮
 
 SLIDER_ARIA_DESCRIPTION=滑块手柄
 
-SWITCH_ON=开
-
-SWITCH_OFF=关
-
 LOAD_MORE_TEXT=更多
 
 TABLE_HEADER_ROW_TEXT=抬头行
@@ -219,6 +231,14 @@ TREE_ITEM_EXPAND_NODE=展开节点
 
 TREE_ITEM_COLLAPSE_NODE=折叠节点
 
+VALUE_STATE_TYPE_ERROR=Value State Error
+
+VALUE_STATE_TYPE_WARNING=Value State Warning
+
+VALUE_STATE_TYPE_SUCCESS=Value State Success
+
+VALUE_STATE_TYPE_INFORMATION=Value State Information
+
 VALUE_STATE_ERROR=无效输入
 
 VALUE_STATE_WARNING=已发出警告
@@ -245,3 +265,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

@@ -59,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=日期輸入
@@ -99,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=項目選擇。
@@ -151,10 +167,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=區段按鈕
 
 SLIDER_ARIA_DESCRIPTION=滑桿控點
 
-SWITCH_ON=開啟
-
-SWITCH_OFF=關閉
-
 LOAD_MORE_TEXT=較多
 
 TABLE_HEADER_ROW_TEXT=表頭列
@@ -219,6 +231,14 @@ TREE_ITEM_EXPAND_NODE=展開節點
 
 TREE_ITEM_COLLAPSE_NODE=收縮節點
 
+VALUE_STATE_TYPE_ERROR=Value State Error
+
+VALUE_STATE_TYPE_WARNING=Value State Warning
+
+VALUE_STATE_TYPE_SUCCESS=Value State Success
+
+VALUE_STATE_TYPE_INFORMATION=Value State Information
+
 VALUE_STATE_ERROR=無效輸入項
 
 VALUE_STATE_WARNING=已發出警告
@@ -245,3 +265,6 @@ SPLIT_BUTTON_DESCRIPTION=分割按鈕
 
 SPLIT_BUTTON_KEYBOARD_HINT=按下空格鍵或 Enter 以驅動預設動作，以及 Alt + 向下箭頭或 F4 以驅動箭頭動作
 
+MENU_BACK_BUTTON_ARIA_LABEL=返回
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=拒絕

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "1.3.1",
+  "version": "1.6.0",
   "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"
   },
@@ -40,13 +41,13 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.3.1",
-    "@ui5/webcomponents-icons": "1.3.1",
-    "@ui5/webcomponents-localization": "1.3.1",
-    "@ui5/webcomponents-theming": "1.3.1"
+    "@ui5/webcomponents-base": "1.6.0",
+    "@ui5/webcomponents-icons": "1.6.0",
+    "@ui5/webcomponents-localization": "1.6.0",
+    "@ui5/webcomponents-theming": "1.6.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.3.1",
-    "chromedriver": "100.0.0"
+    "@ui5/webcomponents-tools": "1.6.0",
+    "chromedriver": "102.0.0"
   }
 }

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>
@@ -226,7 +226,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.js

@@ -382,7 +382,7 @@ class AvatarGroup extends UI5Element {
 				item = button;
 			}
 
-			return this.effectiveDir === "rtl" ? this._getWidthToItem(item) : item.offsetLeft;
+			return this.effectiveDir === "rtl" ? this._getWidthToItem(item) : item.offsetLeft - this.offsetLeft;
 		}
 
 		return button.offsetWidth;
@@ -526,7 +526,7 @@ class AvatarGroup extends UI5Element {
 		}
 
 		// in LTR the width is equal to item.offsetLeft
-		return item.offsetLeft;
+		return item.offsetLeft - this.offsetLeft;
 	}
 
 	/**

package/src/Badge.hbs

@@ -1,8 +1,4 @@
-<div
-	class="ui5-badge-root"
-	@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

@@ -20,7 +20,7 @@
                 id="{{this._id}}-link-wrapper">
                 
                 <ui5-link
-                    @click="{{../_onLinkPress}}"
+                    @ui5-click="{{../_onLinkPress}}"
                     href="{{this.href}}"
                     target="{{this.target}}"
                     id="{{this._id}}-link"
@@ -33,9 +33,8 @@
 
         {{#if _endsWithCurrentLocationLabel}}
         <li class="ui5-breadcrumbs-current-location" @click="{{../_onLabelPress}}">
-            <span aria-label="{{_currentLocationAccName}}" role="link" 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

@@ -60,7 +60,7 @@ const metadata = {
 		},
 
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.Breadcrumbs.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.Breadcrumbs.prototype */ {
 
 		/**
 		 * Defines the visual indication and behavior of the breadcrumbs.
@@ -115,7 +115,7 @@ const metadata = {
 		},
 
 	},
-	events: /** @lends  sap.ui.webcomponents.main.Breadcrumbs.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.Breadcrumbs.prototype */ {
 
 		/**
 		 * Fires when a <code>BreadcrumbsItem</code> is clicked.
@@ -124,11 +124,19 @@ const metadata = {
 		 * @event sap.ui.webcomponents.main.Breadcrumbs#item-click
 		 * @allowPreventDefault
 		 * @param {HTMLElement} item The clicked item.
+		 * @param {Boolean} altKey Returns whether the "ALT" key was pressed when the event was triggered.
+		 * @param {Boolean} ctrlKey Returns whether the "CTRL" key was pressed when the event was triggered.
+		 * @param {Boolean} metaKey Returns whether the "META" key was pressed when the event was triggered.
+		 * @param {Boolean} shiftKey Returns whether the "SHIFT" key was pressed when the event was triggered.
 		 * @public
 		 */
 		"item-click": {
 			detail: {
 				item: { type: HTMLElement },
+				altKey: { type: Boolean	},
+				ctrlKey: { type: Boolean },
+				metaKey: { type: Boolean },
+				shiftKey: { type: Boolean },
 			},
 		},
 	},
@@ -391,15 +399,17 @@ class Breadcrumbs extends UI5Element {
 		const link = event.target,
 			items = this.getSlottedNodes("items"),
 			item = items.find(x => `${x._id}-link` === link.id);
-		if (!this.fireEvent("item-click", { item }, true)) {
+
+		if (!this.fireEvent("item-click", { item, ...event.detail }, true)) {
 			event.preventDefault();
 		}
 	}
 
-	_onLabelPress() {
+	_onLabelPress(event) {
 		const items = this.getSlottedNodes("items"),
 			item = items[items.length - 1];
-		this.fireEvent("item-click", { item });
+
+		this.fireEvent("item-click", { item, ...event.detail });
 	}
 
 	_onOverflowListItemSelect(event) {

package/src/BreadcrumbsItem.js

@@ -6,7 +6,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 const metadata = {
 	tag: "ui5-breadcrumbs-item",
 	managedSlots: true,
-	properties: /** @lends  sap.ui.webcomponents.main.BreadcrumbsItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.BreadcrumbsItem.prototype */ {
 
 		/**
 		 * Defines the link href.
@@ -45,7 +45,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the item.
+		 * Defines the accessible ARIA name of the item.
 		 *
 		 * @type {string}
 		 * @defaultvalue undefined

package/src/BusyIndicator.js

@@ -1,6 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
@@ -123,7 +122,7 @@ const metadata = {
  * <h4>When to use:</h4>
  * <ul>
  * <li>The user needs to be able to cancel the operation.</li>
- * <li>Only part of the application or a particular control is affected.</li>
+ * <li>Only part of the application or a particular component is affected.</li>
  * </ul>
  *
  * <h4>When not to use:</h4>
@@ -207,7 +206,6 @@ class BusyIndicator extends UI5Element {
 		return {
 			root: {
 				"ui5-busy-indicator-root": true,
-				"ui5-busy-indicator-root--ie": isIE(),
 			},
 		};
 	}

package/src/Button.hbs

@@ -25,6 +25,7 @@
 		<ui5-icon
 			class="ui5-button-icon"
 			name="{{icon}}"
+			accessible-role="{{iconRole}}"
 			part="icon"
 			?show-tooltip={{showIconTooltip}}
 		></ui5-icon>

package/src/Button.js

@@ -4,7 +4,6 @@ import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js";
 import {
 	isPhone,
 	isTablet,
@@ -12,6 +11,7 @@ import {
 	isDesktop,
 	isSafari,
 } from "@ui5/webcomponents-base/dist/Device.js";
+import isDefaultSlotProvided from "@ui5/webcomponents-base/dist/util/isDefaultSlotProvided.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 import ButtonTemplate from "./generated/templates/ButtonTemplate.lit.js";
 import Icon from "./Icon.js";
@@ -20,7 +20,6 @@ import { BUTTON_ARIA_TYPE_ACCEPT, BUTTON_ARIA_TYPE_REJECT, BUTTON_ARIA_TYPE_EMPH
 
 // Styles
 import buttonCss from "./generated/themes/Button.css.js";
-import buttonIECss from "./generated/themes/Button.ie11.css.js";
 
 let isGlobalHandlerAttached = false;
 let activeButton = null;
@@ -71,12 +70,12 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the icon to be displayed as graphical element within the component.
+		 * Defines the icon, displayed as graphical element within the component.
 		 * The SAP-icons font provides numerous options.
 		 * <br><br>
 		 * Example:
 		 *
-		 * 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 within 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>.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -99,7 +98,7 @@ const metadata = {
 
 		/**
 		 * When set to <code>true</code>, the component will
-		 * automatically submit the nearest form element upon <code>press</code>.
+		 * automatically submit the nearest HTML form element on <code>press</code>.
 		 * <br><br>
 		 * <b>Note:</b> For the <code>submits</code> property to have effect, you must add the following import to your project:
 		 * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
@@ -158,7 +157,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: ""
@@ -327,7 +326,7 @@ class Button extends UI5Element {
 	}
 
 	static get styles() {
-		return [buttonCss, isLegacyBrowser() && buttonIECss];
+		return buttonCss;
 	}
 
 	static get render() {
@@ -357,15 +356,17 @@ class Button extends UI5Element {
 			isGlobalHandlerAttached = true;
 		}
 
+		const handleTouchStartEvent = event => {
+			event.isMarked = "button";
+			if (this.nonInteractive) {
+				return;
+			}
+
+			this.active = true;
+		};
+
 		this._ontouchstart = {
-			handleEvent(event) {
-				event.isMarked = "button";
-				if (this.nonInteractive) {
-					return;
-				}
-
-				this.active = true;
-			},
+			handleEvent: handleTouchStartEvent,
 			passive: true,
 		};
 	}
@@ -460,11 +461,16 @@ class Button extends UI5Element {
 		return this.design !== ButtonDesign.Default && this.design !== ButtonDesign.Transparent;
 	}
 
+	get iconRole() {
+		if (!this.icon) {
+			return "";
+		}
+
+		return this.isIconOnly ? "img" : "presentation";
+	}
+
 	get isIconOnly() {
-		return !Array.from(this.childNodes).filter(node => {
-			return node.nodeType !== Node.COMMENT_NODE
-			&& (node.nodeType !== Node.TEXT_NODE || node.nodeValue.trim().length !== 0);
-		}).length;
+		return !isDefaultSlotProvided(this);
 	}
 
 	static typeTextMappings() {

package/src/Calendar.hbs

@@ -27,6 +27,7 @@
 			.selectedDates="{{_selectedDatesTimestamps}}"
 			._hidden="{{_isMonthPickerHidden}}"
 			.primaryCalendarType="{{_primaryCalendarType}}"
+			.secondaryCalendarType="{{secondaryCalendarType}}"
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
 			timestamp="{{_timestamp}}"
@@ -41,6 +42,7 @@
 			.selectedDates="{{_selectedDatesTimestamps}}"
 			._hidden="{{_isYearPickerHidden}}"
 			.primaryCalendarType="{{_primaryCalendarType}}"
+			.secondaryCalendarType="{{secondaryCalendarType}}"
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
 			timestamp="{{_timestamp}}"
@@ -61,6 +63,7 @@
 			.isMonthButtonHidden="{{_isHeaderMonthButtonHidden}}"
 			._monthButtonText="{{_headerMonthButtonText}}"
 			._yearButtonText="{{_headerYearButtonText}}"
+			._yearButtonTextSecType="{{_headerYearButtonTextSecType}}"
 			@ui5-previous-press="{{onHeaderPreviousPress}}"
 			@ui5-next-press="{{onHeaderNextPress}}"
 			@ui5-show-month-press="{{onHeaderShowMonthPress}}"