@ui5/webcomponents 0.0.0-e7dd012d7 → 0.0.0-e818f286e

package/src/i18n/messagebundle_zh_TW.properties

@@ -9,191 +9,175 @@ ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER=互動式卡片表頭
 
 AVATAR_TOOLTIP=虛擬個人頭像
 
-BADGE_DESCRIPTION=徽章
-
-BUSY_INDICATOR_TITLE=請稍候
-
-BUTTON_ARIA_TYPE_ACCEPT=正向作業
-
-BUTTON_ARIA_TYPE_REJECT=負向作業
-
-BUTTON_ARIA_TYPE_EMPHASIZED=強調
-
-DATEPICKER_DATE_ACC_TEXT=日期
+AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL=已顯示 {0}、已隱藏 {1}。
 
-CAROUSEL_OF_TEXT=/
-
-CAROUSEL_DOT_TEXT=已顯示項目 {0}/{1}
-
-DATEPICKER_OPEN_ICON_TITLE=開啟選擇器
+AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL=針對完整清單而啟用。
 
-DELETE=刪除
+AVATAR_GROUP_ARIA_LABEL_INDIVIDUAL=個別虛擬個人頭像。
 
-FILEUPLOAD_BROWSE=瀏覽...
+AVATAR_GROUP_ARIA_LABEL_GROUP=結合虛擬個人頭像。
 
-FILEUPLOADER_TITLE=上傳檔案
-
-GROUP_HEADER_TEXT=群組表頭
+AVATAR_GROUP_MOVE=按箭頭鍵以移動。
 
-ICON_ACTION_SETTINGS=設定
+BADGE_DESCRIPTION=徽章
 
-ICON_ACTIVATE=啟用
+BREADCRUMB_ITEM_POS={0}/{1}
 
-ICON_ADD=新增
+BREADCRUMBS_ARIA_LABEL=路徑指引追蹤
 
-ICON_ADD_CONTACT=新增聯絡人
+BREADCRUMBS_OVERFLOW_ARIA_LABEL=更多
 
-ICON_ADD_FILTER=新增篩選器
+BREADCRUMBS_CANCEL_BUTTON=取消
 
-ICON_ADD_PHOTO=新增相片
+BUSY_INDICATOR_TITLE=請稍候
 
-ICON_BACK_TO_TOP=回到最上方
+BUTTON_ARIA_TYPE_ACCEPT=正向作業
 
-ICON_COLLAPSE=收縮
+BUTTON_ARIA_TYPE_REJECT=負向作業
 
-ICON_COLLAPSE_GROUP=收縮群組
+BUTTON_ARIA_TYPE_EMPHASIZED=強調
 
-ICON_CROP=裁剪
+CAROUSEL_OF_TEXT=/
 
-ICON_DECLINE=拒絕
+CAROUSEL_DOT_TEXT=已顯示項目 {0}/{1}
 
-ICON_DELETE=刪除
+CAROUSEL_PREVIOUS_ARROW_TEXT=上一頁
 
-ICON_DISPLAY=顯示
+CAROUSEL_NEXT_ARROW_TEXT=下一頁
 
-ICON_DOWN=向下
+COLORPALETTE_CONTAINER_LABEL=調色盤 - 預先定義的色彩
 
-ICON_DOWNLOAD=下載
+COLORPALETTE_POPOVER_TITLE=調色盤
 
-ICON_DRILL_DOWN=向下展開
+COLORPALETTE_COLOR_LABEL=色彩
 
-ICON_DRILL_UP=向上展開
+COLOR_PALETTE_DIALOG_CANCEL_BUTTON=取消
 
-ICON_ERROR=錯誤
+COLOR_PALETTE_DIALOG_OK_BUTTON=確定
 
-ICON_EXIT_FULL_SCREEN=跳出全螢幕
+COLOR_PALETTE_DIALOG_TITLE=更改色彩
 
-ICON_EXPAND=展開
+COLOR_PALETTE_MORE_COLORS_TEXT=更多色彩...
 
-ICON_EXPAND_GROUP=展開群組
+COLORPICKER_ALPHA_SLIDER=Alpha 控制
 
-ICON_FILTER=篩選
+COLORPICKER_HUE_SLIDER=色調控制
 
-ICON_FLAG=旗標
+COLORPICKER_HEX=十六進位
 
-ICON_FORWARD=向前
+COLORPICKER_RED=紅色
 
-ICON_FULL_SCREEN=進入全螢幕
+COLORPICKER_GREEN=綠色
 
-ICON_GENERATE_SHORTCUT=建立捷徑
+COLORPICKER_BLUE=藍色
 
-ICON_GROUP_2=群組
+COLORPICKER_ALPHA=Alpha
 
-ICON_HIDE=隱藏
+DATEPICKER_OPEN_ICON_TITLE=開啟選擇器
 
-ICON_IPAD=平板電腦
+DATEPICKER_DATE_DESCRIPTION=日期輸入
 
-ICON_IPAD_2=平板電腦
+DATETIME_DESCRIPTION=日期時間輸入
 
-ICON_IPHONE=電話
+DATERANGE_DESCRIPTION=日期範圍輸入
 
-ICON_IPHONE_2=電話
+DELETE=刪除
 
-ICON_LAPTOP=筆記型電腦
+FILEUPLOAD_BROWSE=瀏覽...
 
-ICON_MESSAGE_ERROR=錯誤
+FILEUPLOADER_TITLE=上傳檔案
 
-ICON_MESSAGE_INFORMATION=資訊
+GROUP_HEADER_TEXT=群組表頭
 
-ICON_MESSAGE_SUCCESS=成功
+SELECT_ROLE_DESCRIPTION=選擇下拉式清單方塊
 
-ICON_MESSAGE_WARNING=警告
+SELECT_OPTIONS=選擇選項
 
-ICON_MOVE=移動
+INPUT_SUGGESTIONS=可用建議
 
-ICON_MULTI_SELECT=多重選擇
+INPUT_SUGGESTIONS_TITLE=選擇
 
-ICON_NAV_BACK=瀏覽返回
+INPUT_SUGGESTIONS_ONE_HIT=1 個可用的結果
 
-ICON_OVERFLOW=其他
+INPUT_SUGGESTIONS_MORE_HITS={0} 個可用的結果
 
-ICON_REDO=重做
+INPUT_SUGGESTIONS_NO_HIT=沒有結果
 
-ICON_REFRESH=重新整理
+LINK_SUBTLE=輕微
 
-ICON_RESIZE=調整大小
+LINK_EMPHASIZED=強調
 
-ICON_RESIZE_HORIZONTAL=水平調整大小
+LIST_ITEM_POSITION=清單項目 {0} / {1}
 
-ICON_RESIZE_VERTICAL=垂直調整大小
+LIST_ITEM_SELECTED=已勾選
 
-ICON_RESPONSE=回覆
+LIST_ITEM_NOT_SELECTED=未選擇
 
-ICON_SAVE=儲存
+LIST_ITEM_GROUP_HEADER=群組表頭
 
-ICON_SEARCH=搜尋
+ARIA_LABEL_LIST_ITEM_CHECKBOX=多重選擇模式
 
-ICON_SETTINGS=設定
+ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=項目選擇。
 
-ICON_SHOW=顯示
+ARIA_LABEL_LIST_SELECTABLE=包含可選擇的項目
 
-ICON_SORT=排序
+ARIA_LABEL_LIST_MULTISELECTABLE=包含可多重選擇的項目
 
-ICON_SORT_ASCENDING=升冪排序
+ARIA_LABEL_LIST_DELETABLE=包含可刪除的項目
 
-ICON_SORT_DESCENDING=降冪排序
+MESSAGE_STRIP_CLOSE_BUTTON=訊息列關閉
 
-ICON_SYNCHRONIZE=同步化
+MESSAGE_STRIP_CLOSABLE=可關閉
 
-ICON_UNDO=復原
+MESSAGE_STRIP_ERROR=錯誤資訊列
 
-ICON_UP=向上
+MESSAGE_STRIP_WARNING=警告資訊列
 
-ICON_UPLOAD=上傳
+MESSAGE_STRIP_SUCCESS=成功資訊列
 
-ICON_ZOOM_IN=放大
+MESSAGE_STRIP_INFORMATION=資訊列
 
-ICON_ZOOM_OUT=縮小
+MULTICOMBOBOX_DIALOG_OK_BUTTON=確定
 
-ICON_ACCESSIBLE_NAME=選擇選項
+VALUE_STATE_ERROR_ALREADY_SELECTED=已選擇此值。
 
-INPUT_SUGGESTIONS=可用建議
+MULTIINPUT_ROLEDESCRIPTION_TEXT=多重值輸入
 
-INPUT_SUGGESTIONS_TITLE=選擇
+MULTIINPUT_SHOW_MORE_TOKENS=超過 {0} 個
 
-INPUT_SUGGESTIONS_ONE_HIT=1 個可用的結果
+PANEL_ICON=展開/收縮
 
-INPUT_SUGGESTIONS_MORE_HITS={0} 個可用的結果
+RANGE_SLIDER_ARIA_DESCRIPTION=範圍
 
-INPUT_SUGGESTIONS_NO_HIT=沒有結果
+RANGE_SLIDER_START_HANDLE_DESCRIPTION=左側控點
 
-LINK_SUBTLE=輕微
+RANGE_SLIDER_END_HANDLE_DESCRIPTION=右側控點
 
-LINK_EMPHASIZED=強調
+RATING_INDICATOR_TOOLTIP_TEXT=分級
 
-LIST_ITEM_POSITION=清單項目 {0} / {1}
+RATING_INDICATOR_TEXT=分級指示碼
 
-LIST_ITEM_SELECTED=已選擇
+RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON=拒絕
 
-ARIA_LABEL_LIST_ITEM_CHECKBOX=多重選擇模式
+SEGMENTEDBUTTON_ARIA_DESCRIPTION=區段按鈕群組
 
-MESSAGE_STRIP_CLOSE_BUTTON=訊息列關閉
+SEGMENTEDBUTTON_ARIA_DESCRIBEDBY=按下 SPACE 或 ENTER 以選擇項目
 
-MULTICOMBOBOX_DIALOG_OK_BUTTON=確定
+SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=區段按鈕
 
-MULTIINPUT_SHOW_MORE_TOKENS=超過 {0} 個
+SLIDER_ARIA_DESCRIPTION=滑桿控點
 
-PANEL_ICON=展開/收縮
+LOAD_MORE_TEXT=較多
 
-RATING_INDICATOR_TOOLTIP_TEXT=分級
+TABLE_HEADER_ROW_TEXT=表頭列
 
-RATING_INDICATOR_TEXT=分級指示碼
+TABLE_ROW_POSITION={0}/{1}
 
-SEGMENTEDBUTTON_ARIA_DESCRIPTION=區段按鈕
+TABLE_GROUP_ROW_ARIA_LABEL=群組表頭列
 
-SWITCH_ON=開啟
+ARIA_LABEL_ROW_SELECTION=項目選擇
 
-SWITCH_OFF=關閉
+ARIA_LABEL_SELECT_ALL_CHECKBOX=選擇所有列
 
 TABCONTAINER_NEXT_ICON_ACC_NAME=下一步
 
@@ -201,6 +185,10 @@ TABCONTAINER_PREVIOUS_ICON_ACC_NAME=上一步
 
 TABCONTAINER_OVERFLOW_MENU_TITLE=溢位功能表
 
+TABCONTAINER_END_OVERFLOW=更多
+
+TABCONTAINER_POPOVER_CANCEL_BUTTON=取消
+
 TEXTAREA_CHARACTERS_LEFT=剩下 {0} 個字元
 
 TEXTAREA_CHARACTERS_EXCEEDED=超過 {0} 個字元
@@ -217,13 +205,17 @@ TIMEPICKER_SUBMIT_BUTTON=成功
 
 TIMEPICKER_CANCEL_BUTTON=取消
 
+TIMEPICKER_INPUT_DESCRIPTION=時間輸入
+
+DURATION_INPUT_DESCRIPTION=持續期輸入
+
 DATETIME_PICKER_DATE_BUTTON=日期
 
 DATETIME_PICKER_TIME_BUTTON=時間
 
 TOKEN_ARIA_DELETABLE=可刪除
 
-TOKENIZER_ARIA_CONTAIN_TOKEN=可包含記號
+TOKENIZER_ARIA_CONTAIN_TOKEN=無記號
 
 TOKENIZER_ARIA_CONTAIN_ONE_TOKEN=包含 1 個記號
 
@@ -233,6 +225,20 @@ TOKENIZER_ARIA_LABEL=表徵參數量化器
 
 TOKENIZER_POPOVER_REMOVE=移除
 
+TREE_ITEM_ARIA_LABEL=樹狀結構項目
+
+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=已發出警告
@@ -248,3 +254,17 @@ CALENDAR_HEADER_PREVIOUS_BUTTON=上一步
 DAY_PICKER_WEEK_NUMBER_TEXT=週數
 
 DAY_PICKER_NON_WORKING_DAY=非工作日
+
+DAY_PICKER_TODAY=今天
+
+STEPINPUT_DEC_ICON_TITLE=減少
+
+STEPINPUT_INC_ICON_TITLE=增加
+
+SPLIT_BUTTON_DESCRIPTION=分割按鈕
+
+SPLIT_BUTTON_KEYBOARD_HINT=按下空格鍵或 Enter 以驅動預設動作，以及 Alt + 向下箭頭或 F4 以驅動箭頭動作
+
+MENU_BACK_BUTTON_ARIA_LABEL=返回
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=拒絕

package/src/popup-utils/OpenedPopupsRegistry.js

@@ -35,7 +35,7 @@ const _keydownListener = event => {
 	}
 
 	if (isEscape(event)) {
-		openedRegistry.pop().instance.close(true);
+		openedRegistry[openedRegistry.length - 1].instance.close(true);
 	}
 };
 

package/src/popup-utils/PopoverRegistry.js

@@ -1,7 +1,6 @@
-import { isClickInRect } from "./PopupUtils.js";
+import { isClickInRect } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import { getOpenedPopups, addOpenedPopup, removeOpenedPopup } from "./OpenedPopupsRegistry.js";
 
-
 let updateInterval = null;
 const intervalTimeout = 300;
 const openedRegistry = [];
@@ -40,7 +39,7 @@ const detachGlobalClickHandler = () => {
 
 const clickHandler = event => {
 	const openedPopups = getOpenedPopups();
-	const isTopPopupPopover = openedPopups[openedPopups.length - 1].instance.openBy;
+	const isTopPopupPopover = openedPopups[openedPopups.length - 1].instance.showAt;
 
 	if (openedPopups.length === 0 || !isTopPopupPopover) {
 		return;
@@ -106,7 +105,6 @@ const removeOpenedPopover = instance => {
 				indexOfItemToRemove = j;
 			}
 
-
 			if (indexOfItemToRemove >= 0) {
 				removeOpenedPopup(openedRegistry[indexOfItemToRemove].instance);
 				detachScrollHandler(openedRegistry[indexOfItemToRemove].instance);

package/src/themes/Avatar.css

@@ -0,0 +1,264 @@
+:host(:not([hidden])) {
+	display: inline-block;
+	box-sizing: border-box;
+	position: relative;
+}
+
+/*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
+:host(:not([hidden]).ui5_hovered) {
+	opacity: .7;
+}
+
+:host([focused]) {
+	outline: var(--_ui5_avatar_outline);
+	outline-offset: var(--_ui5_avatar_focus_offset);
+}
+
+:host([interactive]) {
+	cursor: pointer;
+}
+
+:host {
+	height: 3rem;
+	width: 3rem;
+	border-radius: 50%;
+	border: var(--ui5-avatar-initials-border);
+	outline: none;
+	color: var(--ui5-avatar-initials-color);
+}
+
+.ui5-avatar-root {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	outline: none;
+	height: 100%;
+	width: 100%;
+}
+
+/* Sizes */
+
+:host([_size="XS"]),
+:host([size="XS"]) {
+	height: 2rem;
+	width: 2rem;
+	min-height: 2rem;
+	min-width: 2rem;
+	font-size: var(--_ui5_avatar_fontsize_XS);
+}
+
+:host([_size="S"]),
+:host([size="S"]) {
+	min-height: 3rem;
+	min-width: 3rem;
+	font-size: var(--_ui5_avatar_fontsize_S);
+}
+
+:host([_size="M"]),
+:host([size="M"]) {
+	min-height: 4rem;
+	min-width: 4rem;
+	font-size: var(--_ui5_avatar_fontsize_M);
+}
+
+:host([_size="L"]),
+:host([size="L"]) {
+	min-height: 5rem;
+	min-width: 5rem;
+	font-size: var(--_ui5_avatar_fontsize_L);
+}
+
+:host([_size="XL"]),
+:host([size="XL"]) {
+	min-height: 7rem;
+	min-width: 7rem;
+	font-size: var(--_ui5_avatar_fontsize_XL);
+}
+
+/* Icon */
+:host .ui5-avatar-icon {
+	height: var(--_ui5_avatar_fontsize_S);
+	width: var(--_ui5_avatar_fontsize_S);
+	color: inherit;
+}
+
+:host([_size="XS"]) .ui5-avatar-icon,
+:host([size="XS"]) .ui5-avatar-icon {
+	height: var(--_ui5_avatar_icon_XS);
+	width: var(--_ui5_avatar_icon_XS);
+}
+
+:host([_size="S"]) .ui5-avatar-icon,
+:host([size="S"]) .ui5-avatar-icon {
+	height: var(--_ui5_avatar_icon_S);
+	width: var(--_ui5_avatar_icon_S);
+}
+
+:host([_size="M"]) .ui5-avatar-icon,
+:host([size="M"]) .ui5-avatar-icon {
+	height: var(--_ui5_avatar_icon_M);
+	width: var(--_ui5_avatar_icon_M);
+}
+
+:host([_size="L"]) .ui5-avatar-icon,
+:host([size="L"]) .ui5-avatar-icon {
+	height: var(--_ui5_avatar_icon_L);
+	width: var(--_ui5_avatar_icon_L);
+}
+
+:host([_size="XL"]) .ui5-avatar-icon,
+:host([size="XL"]) .ui5-avatar-icon {
+	height: var(--_ui5_avatar_icon_XL);
+	width: var(--_ui5_avatar_icon_XL);
+}
+
+::slotted(*) {
+	border-radius: 50%;
+    width: 100%;
+    height: 100%;
+	pointer-events: none;
+}
+
+/* Shapes */
+:host([shape="Square"]),
+:host([shape="Square"]) ::slotted(*) {
+	border-radius: var(--ui5-avatar-border-radius);
+}
+
+:host(:not([color-scheme])),
+:host(:not([_has-image])),
+:host([_color-scheme="Accent6"]),
+:host([color-scheme="Accent6"]) {
+	background-color: var(--ui5-avatar-accent6);
+	color: var(--ui5-avatar-accent6-color);
+	border-color: var(--ui5-avatar-accent6-border-color);
+}
+
+:host([_color-scheme="Accent1"]),
+:host([color-scheme="Accent1"]) {
+	background-color: var(--ui5-avatar-accent1);
+	color: var(--ui5-avatar-accent1-color);
+	border-color: var(--ui5-avatar-accent1-border-color);
+}
+
+:host([_color-scheme="Accent2"]),
+:host([color-scheme="Accent2"]) {
+	background-color: var(--ui5-avatar-accent2);
+	color: var(--ui5-avatar-accent2-color);
+	border-color: var(--ui5-avatar-accent2-border-color);
+}
+
+:host([_color-scheme="Accent3"]),
+:host([color-scheme="Accent3"]) {
+	background-color: var(--ui5-avatar-accent3);
+	color: var(--ui5-avatar-accent3-color);
+	border-color: var(--ui5-avatar-accent3-border-color);
+}
+
+:host([_color-scheme="Accent4"]),
+:host([color-scheme="Accent4"]) {
+	background-color: var(--ui5-avatar-accent4);
+	color: var(--ui5-avatar-accent4-color);
+	border-color: var(--ui5-avatar-accent4-border-color);
+}
+
+:host([_color-scheme="Accent5"]),
+:host([color-scheme="Accent5"]) {
+	background-color: var(--ui5-avatar-accent5);
+	color: var(--ui5-avatar-accent5-color);
+	border-color: var(--ui5-avatar-accent5-border-color);
+}
+
+:host([_color-scheme="Accent7"]),
+:host([color-scheme="Accent7"]) {
+	background-color: var(--ui5-avatar-accent7);
+	color: var(--ui5-avatar-accent7-color);
+	border-color: var(--ui5-avatar-accent7-border-color);
+}
+
+:host([_color-scheme="Accent8"]),
+:host([color-scheme="Accent8"]) {
+	background-color: var(--ui5-avatar-accent8);
+	color: var(--ui5-avatar-accent8-color);
+	border-color: var(--ui5-avatar-accent8-border-color);
+}
+
+:host([_color-scheme="Accent9"]),
+:host([color-scheme="Accent9"]) {
+	background-color: var(--ui5-avatar-accent9);
+	color: var(--ui5-avatar-accent9-color);
+	border-color: var(--ui5-avatar-accent9-border-color);
+}
+
+:host([_color-scheme="Accent10"]),
+:host([color-scheme="Accent10"]) {
+	background-color: var(--ui5-avatar-accent10);
+	color: var(--ui5-avatar-accent10-color);
+	border-color: var(--ui5-avatar-accent10-border-color);
+}
+
+:host([_color-scheme="Placeholder"]),
+:host([color-scheme="Placeholder"]) {
+	background-color: var(--ui5-avatar-placeholder);
+	color: var(--ui5-avatar-placeholder-color);
+	border-color: var(--ui5-avatar-placeholder-border-color);
+}
+
+:host([_has-image]) {
+	background-color: transparent;
+	vertical-align: middle;
+}
+
+.ui5-avatar-initials {
+	color: inherit;
+}
+
+/* Slotted Badge */
+::slotted([slot="badge"]) {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	width: 1.125rem;
+	height: 1.125rem;
+	background: var(--sapButton_Emphasized_Background);
+	border: var(--sapButton_Emphasized_Background);
+	border-radius: 1rem;
+	color: var(--sapContent_BadgeTextColor);
+	justify-content: center;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSmallSize);
+}
+
+::slotted([ui5-badge][slot="badge"]) {
+	padding: 0.1875rem;
+}
+
+:host([_size="L"]) ::slotted([slot="badge"]),
+:host([size="L"]) ::slotted([slot="badge"]) {
+	width: 1.25rem;
+	height: 1.25rem;
+}
+
+:host([_size="XL"]) ::slotted([slot="badge"]),
+:host([size="XL"]) ::slotted([slot="badge"]) {
+	padding: 0.375rem;
+	width: 1.75rem;
+	height: 1.75rem;
+}
+
+:host([shape="Square"]) ::slotted([slot="badge"]) {
+	bottom: -0.125rem;
+	right: -0.125rem;
+}
+
+:host([_size="L"][shape="Square"]) ::slotted([slot="badge"]),
+:host([size="L"][shape="Square"]) ::slotted([slot="badge"]) {
+	bottom: -0.1875rem;
+	right: -0.1875rem;
+}
+
+:host([_size="XL"][shape="Square"]) ::slotted([slot="badge"]),
+:host([size="XL"][shape="Square"]) ::slotted([slot="badge"]) {
+	bottom: -0.25rem;
+	right: -0.25rem;
+}