@ui5/webcomponents 2.18.1 → 2.19.0-rc.1

package/src/i18n/messagebundle_zh_TW.properties

@@ -9,6 +9,10 @@ ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER=互動式卡片表頭
 
 AVATAR_TOOLTIP=虛擬個人頭像
 
+AVATAR_TYPE_BUTTON=按鈕
+
+AVATAR_TYPE_IMAGE=圖像
+
 AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL=已顯示 {0}、已隱藏 {1}。
 
 AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL=針對完整清單而啟用。
@@ -55,6 +59,10 @@ BUTTON_BADGE_ONE_ITEM={0} 個項目
 
 BUTTON_BADGE_MANY_ITEMS={0} 個項目
 
+BUTTON_ROLE_DESCRIPTION=按鈕
+
+LINK_ROLE_DESCRIPTION=連結
+
 CAL_LEGEND_TODAY_TEXT=今天
 
 CAL_LEGEND_SELECTED_TEXT=選取的日期
@@ -75,6 +83,8 @@ CAROUSEL_NEXT_ARROW_TEXT=下一頁
 
 CAROUSEL_ARIA_ROLE_DESCRIPTION=自動轉盤
 
+CAROUSEL_ARIA_LIST_LABEL=項目容器
+
 COLORPALETTE_CONTAINER_LABEL=調色盤 - 預先定義的色彩
 
 COLORPALETTE_POPOVER_TITLE=調色盤
@@ -91,9 +101,13 @@ COLOR_PALETTE_MORE_COLORS_TEXT=更多色彩...
 
 COLOR_PALETTE_DEFAULT_COLOR_TEXT=預設色彩
 
-COLORPICKER_ALPHA_SLIDER=Alpha 控制
+COLORPICKER_LABEL=色彩選擇器
+
+COLORPICKER_SLIDER_GROUP=色彩滑桿
+
+COLORPICKER_ALPHA_SLIDER=Alpha 滑桿
 
-COLORPICKER_HUE_SLIDER=色調控制
+COLORPICKER_HUE_SLIDER=色調滑桿
 
 COLORPICKER_HEX=十六進位
 
@@ -113,8 +127,14 @@ COLORPICKER_TOGGLE_MODE_TOOLTIP=更改色彩模式
 
 COLORPICKER_ALPHA=Alpha
 
+COLORPICKER_PERCENTAGE=%
+
+COLORPICKER_COLOR_MODE_CHANGED=色彩模式已更改為 {0}，目前值：{1}。
+
 DATEPICKER_OPEN_ICON_TITLE=開啟選擇器
 
+DATEPICKER_OPEN_ICON_TITLE_OPENED=關閉選擇器
+
 DATEPICKER_DATE_DESCRIPTION=日期輸入
 
 DATEPICKER_VALUE_MISSING=使用下列格式輸入日期：{0}。
@@ -280,6 +300,8 @@ MULTIINPUT_VALUE_HELP_LABEL=顯示輸入輔助說明
 
 MULTIINPUT_VALUE_HELP=有可用的輸入輔助說明
 
+MULTIINPUT_FILTER_BUTTON_LABEL=顯示所選權杖
+
 PANEL_ICON=展開/收縮
 
 RANGE_SLIDER_ARIA_DESCRIPTION=範圍
@@ -344,6 +366,8 @@ TEXTAREA_CHARACTERS_LEFT=剩下 {0} 個字元
 
 TEXTAREA_CHARACTERS_EXCEEDED=超過 {0} 個字元
 
+TEXTAREA_EXCEEDS_MAXLENGTH=值長度超過 {0} 個字元。
+
 TIMEPICKER_HOURS_LABEL=小時
 
 TIMEPICKER_MINUTES_LABEL=分
@@ -366,6 +390,10 @@ TIMEPICKER_INPUTS_ENTER_MINUTES=請輸入分鐘
 
 TIMEPICKER_INPUTS_ENTER_SECONDS=請輸入秒數
 
+TIMEPICKER_OPEN_ICON_TITLE=開啟選擇器
+
+TIMEPICKER_OPEN_ICON_TITLE_OPENED=關閉選擇器
+
 TIMEPICKER_VALUE_MISSING=使用下列格式輸入時間：{0}。
 
 TIMEPICKER_PATTERN_MISSMATCH=此格式不受支援，請使用下列格式輸入時間：{0}。
@@ -442,6 +470,22 @@ CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT=Shift + F4
 
 CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT=Shift + F4
 
+CALENDAR_HEADER_MONTH_NEXT_BUTTON_TITLE=下個月
+
+CALENDAR_HEADER_YEAR_NEXT_BUTTON_TITLE=下年度
+
+CALENDAR_HEADER_YEAR_RANGE_NEXT_BUTTON_TITLE=下年度範圍
+
+CALENDAR_HEADER_MONTH_NEXT_BUTTON_SHORTCUT=上一頁
+
+CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_TITLE=上個月
+
+CALENDAR_HEADER_YEAR_PREVIOUS_BUTTON_TITLE=上年度
+
+CALENDAR_HEADER_YEAR_RANGE_PREVIOUS_BUTTON_TITLE=上年度範圍
+
+CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_SHORTCUT=下一頁
+
 DAY_PICKER_SELECTED_RANGE_START={0} 第一個日期範圍
 
 DAY_PICKER_SELECTED_RANGE_BETWEEN=所選範圍中的 {0}
@@ -602,6 +646,12 @@ DYNAMIC_DATE_RANGE_LAST_YEARS_TEXT=過去 X 年
 
 DYNAMIC_DATE_RANGE_NEXT_YEARS_TEXT=未來 X 年
 
+CHECKBOX_CHECKED=已勾選
+
+CHECKBOX_NOT_CHECKED=未勾選
+
+CHECKBOX_ARIA_TYPE=核取方塊
+
 DYNAMIC_DATE_RANGE_VALUE_LABEL_TEXT=X 值
 
 DYNAMIC_DATE_RANGE_UNIT_OF_TIME_LABEL_TEXT=時間單位
@@ -621,3 +671,7 @@ DYNAMIC_DATE_RANGE_LAST_COMBINED_TEXT=過去 X {0} (已包含)
 DYNAMIC_DATE_RANGE_NEXT_COMBINED_TEXT=未來 X {0} (已包含)
 
 DYNAMIC_DATE_RANGE_INCLUDED_TEXT=(已包含)
+
+ICON_ARIA_TYPE_IMAGE=圖像
+
+ICON_ARIA_TYPE_INTERACTIVE=按鈕

package/src/themes/Button.css

@@ -385,6 +385,7 @@ bdi {
 	justify-content: center;
 }
 
-:host([has-end-icon]:not([icon])) .ui5-button-end-icon {
-	margin-left: auto;
+:host([has-end-icon]:not([icon]):not(:empty)) .ui5-button-end-icon {
+	padding-inline-start: var(--_ui5_button_base_icon_margin);
+	margin-inline-start: auto;
 }

package/src/themes/Dialog.css

@@ -139,22 +139,6 @@
 	color: var(--sapButton_Lite_TextColor);
 }
 
-::slotted([slot="footer"]) {
-	height: var(--_ui5_dialog_footer_height);
-}
-
-::slotted([slot="footer"][ui5-bar][design="Footer"]) {
-	border-top: none;
-}
-
-::slotted([slot="header"][ui5-bar]) {
-	box-shadow: none;
-}
-
-::slotted([slot="footer"][ui5-toolbar]) {
-	border: 0;
-}
-
 :host::backdrop {
 	background-color: var(--_ui5_popup_block_layer_background);
 	opacity: var(--_ui5_popup_block_layer_opacity);

package/src/themes/Form.css

@@ -3,6 +3,7 @@
 
 :host {
 	display: block;
+	container-type: inline-size;
 }
 
 .ui5-form-root {
@@ -10,7 +11,6 @@
 	flex-direction: column;
 	background-color: var(--sapGroup_ContentBackground);
     border-radius: 0.75rem;
-	container-type: inline-size;
 }
 
 .ui5-form-header {

package/src/themes/FormItem.css

@@ -28,7 +28,6 @@
 }
 
 .ui5-form-item-root {
-	container-type: inline-size;
 	background-color: inherit;
 	color: inherit;
 }

package/src/themes/FormItemSpan.css

@@ -1,5 +1,5 @@
-/* 
-* By default, 
+/*
+* By default:
 * - in M, L ans XL sizes the Form's labels take 4 cells out 12 of the whole width, e.g 4:8:0
 * - in S size, it  the Form's labels take the whole width 12/12 cells, e.g the label and the input are displayed vertically.
 *

package/src/themes/List.css

@@ -17,7 +17,8 @@
 }
 
 .ui5-list-root,
-.ui5-list-busy-indicator {
+.ui5-list-busy-indicator,
+.ui5-list-container {
 	width: 100%;
 	height: 100%;
 	position: relative;
@@ -111,4 +112,11 @@
 :host([growing="Scroll"]) .ui5-list-end-marker {
 	/* Ensure the list-end-marker has a block property to always be stretched and "visible" on the screen */
 	display: inline-block;
+}
+
+:host([sticky-header]) ::slotted([slot="header"]),
+:host([sticky-header]) .ui5-list-header {
+	position: sticky;
+    top: 0;
+    z-index: 100;
 }

package/src/themes/Menu.css

@@ -53,3 +53,12 @@
 .ui5-menu-back-button {
 	margin-right: 1rem;
 }
+
+.ui5-menu-dialog-footer {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 0 1rem;
+	width: 100%;
+	border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
+}

package/src/themes/MenuItem.css

@@ -58,6 +58,7 @@
 	white-space: nowrap;
 	pointer-events: none;
 	display: inline-block;
+	font-size: var(--sapFontSize);
 }
 
 .ui5-menu-item-dummy-icon {

package/src/themes/Popover.css

@@ -90,3 +90,80 @@
 :host([modal]) .ui5-block-layer {
 	display: block;
 }
+
+/* resize handle */
+
+.ui5-popover-resize-handle {
+	position: absolute;
+	width: 1.5rem;
+	height: 1.5rem;
+	border-radius: 50%;
+	z-index: 1;
+}
+
+.ui5-popover-resize-handle [ui5-icon] {
+	position: absolute;
+	width: 1rem;
+	height: 1rem;
+	cursor: inherit;
+	color: var(--sapButton_Lite_TextColor);
+	--rotAngle: 0;
+	--scaleX: 1;
+	transform: rotate(var(--rotAngle)) scaleX(var(--scaleX));
+}
+
+.ui5-popover-rtl .ui5-popover-resize-handle [ui5-icon] {
+	--scaleX: -1;
+}
+
+.ui5-popover-resize-handle-top-right .ui5-popover-resize-handle {
+	top: -0.5rem;
+	right: -0.5rem;
+	cursor: ne-resize;
+}
+
+.ui5-popover-resize-handle-top-right .ui5-popover-resize-handle [ui5-icon] {
+	bottom: 0;
+	left: 0;
+	--rotAngle: 270deg;
+}
+
+.ui5-popover-resize-handle-top-left .ui5-popover-resize-handle {
+	top: -0.5rem;
+	left: -0.5rem;
+	cursor: nw-resize;
+}
+
+.ui5-popover-resize-handle-top-left .ui5-popover-resize-handle [ui5-icon] {
+	bottom: 0;
+	right: 0;
+	--rotAngle: 180deg;
+}
+
+.ui5-popover-resize-handle-bottom-left .ui5-popover-resize-handle {
+	bottom: -0.5rem;
+	left: -0.5rem;
+	cursor: ne-resize;
+}
+
+.ui5-popover-resize-handle-bottom-left .ui5-popover-resize-handle [ui5-icon] {
+	top: 0;
+	right: 0;
+	--rotAngle: 90deg;
+}
+
+.ui5-popover-resize-handle-bottom-right .ui5-popover-resize-handle {
+	bottom: -0.5rem;
+	right: -0.5rem;
+	cursor: nw-resize;
+}
+
+.ui5-popover-resize-handle-bottom-right .ui5-popover-resize-handle [ui5-icon] {
+	top: 0;
+	left: 0;
+}
+
+.ui5-popover-resizing,
+.ui5-popover-resizing * {
+	user-select: none !important;
+}

package/src/themes/PopupsCommon.css

@@ -127,3 +127,19 @@
 	padding-left: var(--_ui5_popup_header_footer_padding_xl);
 	padding-right: var(--_ui5_popup_header_footer_padding_xl);
 }
+
+::slotted([slot="footer"]) {
+	height: var(--_ui5_popup_footer_height);
+}
+
+::slotted([slot="footer"][ui5-bar][design="Footer"]) {
+	border-top: none;
+}
+
+::slotted([slot="header"][ui5-bar]) {
+	box-shadow: none;
+}
+
+::slotted([slot="footer"][ui5-toolbar]) {
+	border: 0;
+}

package/src/themes/base/sizes-parameters.css

@@ -64,9 +64,11 @@
 	--_ui5_datetime_timeview_phonemode_clocks_width: 24.5rem;
 	--_ui5_datetime_dateview_phonemode_margin_bottom: 0;
 
+	/* Popup */
+	--_ui5_popup_footer_height: 2.75rem;
+
 	/* Dialog */
 	--_ui5_dialog_content_min_height: 2.75rem;
-	--_ui5_dialog_footer_height: 2.75rem;
 
 	--_ui5_input_inner_padding: 0 0.625rem;
 	--_ui5_input_inner_padding_with_icon: 0 0.25rem 0 0.625rem;
@@ -265,9 +267,11 @@
 	--_ui5_datetime_timeview_phonemode_clocks_width: 21.125rem;
 	--_ui5_datetime_dateview_phonemode_margin_bottom: 3.125rem;
 
+	/* Popup */
+	--_ui5_popup_footer_height: 2.5rem;
+
 	/* Dialog */
 	--_ui5_dialog_content_min_height: 2.5rem;
-	--_ui5_dialog_footer_height: 2.5rem;
 
 	/* Form */
 	--_ui5_form_item_min_height: 2rem;