@ui5/webcomponents 0.0.0-6cb3eb0db → 0.0.0-701b14e36

package/src/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=更多
@@ -73,6 +75,8 @@ FILEUPLOADER_TITLE=上傳檔案
 
 GROUP_HEADER_TEXT=群組表頭
 
+SELECT_ROLE_DESCRIPTION=選擇下拉式清單方塊
+
 SELECT_OPTIONS=選擇選項
 
 INPUT_SUGGESTIONS=可用建議
@@ -99,8 +103,24 @@ ARIA_LABEL_LIST_ITEM_CHECKBOX=多重選擇模式
 
 ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=項目選擇。
 
+ARIA_LABEL_LIST_SELECTABLE=包含可選擇的項目
+
+ARIA_LABEL_LIST_MULTISELECTABLE=包含可多重選擇的項目
+
+ARIA_LABEL_LIST_DELETABLE=包含可刪除的項目
+
 MESSAGE_STRIP_CLOSE_BUTTON=訊息列關閉
 
+MESSAGE_STRIP_CLOSABLE=可關閉
+
+MESSAGE_STRIP_ERROR=錯誤資訊列
+
+MESSAGE_STRIP_WARNING=警告資訊列
+
+MESSAGE_STRIP_SUCCESS=成功資訊列
+
+MESSAGE_STRIP_INFORMATION=資訊列
+
 MULTICOMBOBOX_DIALOG_OK_BUTTON=確定
 
 VALUE_STATE_ERROR_ALREADY_SELECTED=已選擇此值。
@@ -131,10 +151,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=區段按鈕
 
 SLIDER_ARIA_DESCRIPTION=滑桿控點
 
-SWITCH_ON=開啟
-
-SWITCH_OFF=關閉
-
 LOAD_MORE_TEXT=較多
 
 TABLE_HEADER_ROW_TEXT=表頭列
@@ -153,6 +169,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} 個字元
@@ -216,3 +236,11 @@ 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/themes/Avatar.css

@@ -0,0 +1,213 @@
+:host(:not([hidden])) {
+	display: inline-block;
+	box-sizing: border-box;
+}
+
+/*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;
+}

package/src/themes/AvatarGroup.css

@@ -0,0 +1,83 @@
+@import "./TapHighlightColor.css";
+:host(:not([hidden])) {
+	display: block;
+}
+
+.ui5-avatar-group-items:focus {
+	outline: none;
+}
+
+:host([type="Group"]) .ui5-avatar-group-items:focus {
+	outline: var(--_ui5_avatar_outline);
+	outline-offset: var(--_ui5_avatar_focus_offset);
+	border-radius: var(--_ui5_avatar_group_focus_border_radius);
+}
+
+.ui5-avatar-group-root {
+	display: flex;
+}
+
+.ui5-avatar-group-items {
+	white-space: nowrap;
+	position: relative;
+	display: inline-flex;
+}
+
+:host([type="Group"]) .ui5-avatar-group-items {
+	cursor: pointer;
+}
+
+:host([type="Group"]) ::slotted([ui5-button]),
+:host([type="Group"]) ::slotted([ui5-avatar]) {
+	pointer-events: none;
+}
+
+::slotted([ui5-button]:not([hidden])),
+.ui5-avatar-group-overflow-btn:not([hidden]) {
+	--_ui5_button_base_padding: 0;
+	border-radius: 50%;
+	display: inline-flex;
+	text-overflow: initial;
+}
+
+::slotted([ui5-button][focused]),
+.ui5-avatar-group-overflow-btn[focused] {
+	outline: var(--_ui5_avatar_outline);
+	outline-offset: var(--_ui5_avatar_focus_offset);
+}
+
+.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xs {
+	height: 2rem;
+	width: 2rem;
+	min-width: 2rem;
+	font-size: .75rem;
+}
+
+::slotted([ui5-button]),
+.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-s {
+	height: 3rem;
+	width: 3rem;
+	min-width: 3rem;
+	font-size: 1.125rem;
+}
+
+.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-m {
+	height: 4rem;
+	width: 4rem;
+	min-width: 4rem;
+	font-size: 1.625rem;
+}
+
+.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-l {
+	height: 5rem;
+	width: 5rem;
+	min-width: 5rem;
+	font-size: 2rem;
+}
+
+.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xl {
+	height: 7rem;
+	width: 7rem;
+	min-width: 7rem;
+	font-size: 2.75rem;
+}

package/src/themes/Badge.css

@@ -0,0 +1,139 @@
+@import "./InvisibleTextStyles.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+	height: 1rem;
+	min-width: 1.125em;
+	max-width: 100%;
+	padding: 0 0.3125em;
+	color: var(--sapAccentColor1);
+	background: var(--sapLegendBackgroundColor1);
+	border: 0.0625em solid;
+	border-radius: 0.5rem;
+	box-sizing: border-box;
+	font-family: "72override", var(--sapFontFamily);
+	font-weight: bold;
+	text-align: center;
+	letter-spacing: 0.0125em;
+}
+
+:host([color-scheme]:hover),
+:host(:not([color-scheme]):hover) {
+	cursor: var(--_ui5-badge-cursor);
+}
+
+.ui5-badge-root {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	pointer-events: none;
+}
+
+.ui5-badge-text {
+	width: 100%;
+	overflow: hidden;
+	white-space: nowrap;
+	font-weight: inherit;
+	text-overflow: ellipsis;
+	line-height: 1;
+	text-transform: uppercase;
+	letter-spacing: inherit;
+	font-size: 0.75em; /* origin from --sapFontSmallSize (0.75rem) */
+}
+
+:host(:hover) .ui5-badge-text {
+	cursor: var(--_ui5-badge-cursor);
+}
+
+:host([_icon-only]) {
+	padding: 0 0.1875em;
+}
+
+::slotted([ui5-icon]) {
+	width: 0.75em;
+	height: 0.75em;
+	min-width: 0.75em;
+	min-height: 0.75em;
+	color: inherit;
+}
+
+/* IE 11 specific selector */
+[ui5-badge] [ui5-icon][slot="icon"] {
+	display: flex;
+}
+
+:host([_has-icon]) .ui5-badge-text {
+	padding-inline-start: 0.125rem;
+}
+
+/* Scheme 1 */
+:host([color-scheme="1"]) {
+	background-color: var(--ui5-badge-color-scheme-1-background);
+	border-color: var(--ui5-badge-color-scheme-1-border);
+	color: var(--ui5-badge-color-scheme-1-color);
+}
+
+/* Scheme 2 */
+:host([color-scheme="2"]) {
+	background-color: var(--ui5-badge-color-scheme-2-background);
+	border-color: var(--ui5-badge-color-scheme-2-border);
+	color: var(--ui5-badge-color-scheme-2-color);
+}
+
+/* Scheme 3 */
+:host([color-scheme="3"]) {
+	background-color: var(--ui5-badge-color-scheme-3-background);
+	border-color: var(--ui5-badge-color-scheme-3-border);
+	color: var(--ui5-badge-color-scheme-3-color);
+}
+
+/* Scheme 4 */
+:host([color-scheme="4"]) {
+	background-color: var(--ui5-badge-color-scheme-4-background);
+	border-color: var(--ui5-badge-color-scheme-4-border);
+	color: var(--ui5-badge-color-scheme-4-color);
+}
+
+/* Scheme 5 */
+:host([color-scheme="5"]) {
+	background-color: var(--ui5-badge-color-scheme-5-background);
+	border-color: var(--ui5-badge-color-scheme-5-border);
+	color: var(--ui5-badge-color-scheme-5-color);
+}
+
+/* Scheme 6 */
+:host([color-scheme="6"]) {
+	background-color: var(--ui5-badge-color-scheme-6-background);
+	border-color: var(--ui5-badge-color-scheme-6-border);
+	color: var(--ui5-badge-color-scheme-6-color);
+}
+
+/* Scheme 7 */
+:host([color-scheme="7"]) {
+	background-color: var(--ui5-badge-color-scheme-7-background);
+	border-color: var(--ui5-badge-color-scheme-7-border);
+	color: var(--ui5-badge-color-scheme-7-color);
+}
+
+/* Scheme 8 */
+:host([color-scheme="8"]) {
+	background-color: var(--ui5-badge-color-scheme-8-background);
+	border-color: var(--ui5-badge-color-scheme-8-border);
+	color: var(--ui5-badge-color-scheme-8-color);
+}
+
+/* Scheme 9 */
+:host([color-scheme="9"]) {
+	background-color: var(--ui5-badge-color-scheme-9-background);
+	border-color: var(--ui5-badge-color-scheme-9-border);
+	color: var(--ui5-badge-color-scheme-9-color);
+}
+
+/* Scheme 10 */
+:host([color-scheme="10"]) {
+	background-color: var(--ui5-badge-color-scheme-10-background);
+	border-color: var(--ui5-badge-color-scheme-10-border);
+	color: var(--ui5-badge-color-scheme-10-color);
+}

package/src/themes/Breadcrumbs.css

@@ -0,0 +1,104 @@
+.ui5-breadcrumbs-root {
+    white-space: nowrap;
+    outline: none;
+    margin: 0 0 0.5rem 0;
+}
+
+.ui5-breadcrumbs-root > ol {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+}
+
+.ui5-breadcrumbs-root > ol > li {
+    display: inline;
+}
+
+.ui5-breadcrumbs-current-location {
+    min-width: 1%;
+    -webkit-flex: 1;
+    -webkit-box-flex: 1;
+    flex: 1 1 auto;
+}
+
+.ui5-breadcrumbs-current-location > span:focus {
+    outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+    border-radius: var(--_ui5_breadcrumbs_current_location_focus_border_radius);
+}
+
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden] {
+    display: none
+}
+
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon] {
+    width: var(--sapFontSize);
+    height: var(--sapFontSize);
+    padding-left: .675rem;
+    vertical-align: text-top;
+    color: var(--sapLinkColor);
+}
+
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon] {
+    color: var(--_ui5_link_focus_color);
+}
+
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]::before {
+    content: "...";
+    vertical-align: middle;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+
+/* underline icon on hover */
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon]::after,
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper:hover [ui5-icon]::after {
+    content: "";
+    position: absolute;
+    border-bottom: 0.0625rem solid;
+    top: 0;
+    left: 0;
+    bottom: 1px;
+    right: 0;
+}
+
+/* links separator */
+li:not(.ui5-breadcrumbs-current-location)::after {
+    content: "/"; /* default separator is "Slash" */
+    padding: 0 .25rem;
+    cursor: auto;
+    color: var(--sapContent_LabelColor);
+    display: inline-block;
+    font-family: "72override",var(--sapFontFamily);
+    font-size: var(--sapFontSize);
+}
+
+.ui5-breadcrumbs-popover-footer {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+}
+
+/* separator styles */
+:host([separator-style="BackSlash"]) li:not(.ui5-breadcrumbs-current-location)::after {
+    content: "\\";
+}
+
+:host([separator-style="DoubleBackSlash"]) li:not(.ui5-breadcrumbs-current-location)::after {
+    content: "\\\\";
+}
+
+:host([separator-style="DoubleGreaterThan"]) li:not(.ui5-breadcrumbs-current-location)::after {
+    content: ">>";
+}
+
+:host([separator-style="DoubleSlash"]) li:not(.ui5-breadcrumbs-current-location)::after {
+    content: "//";
+}
+
+:host([separator-style="GreaterThan"]) li:not(.ui5-breadcrumbs-current-location)::after {
+    content: ">";
+}

package/src/themes/BreadcrumbsPopover.css

@@ -0,0 +1,10 @@
+.ui5-breadcrumbs-popover::part(content) {
+    padding: 0;
+}
+
+.ui5-breadcrumbs-popover-footer {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    padding-right: 0.5rem;
+}

package/src/themes/BrowserScrollbar.css

@@ -0,0 +1,25 @@
+::-webkit-scrollbar:horizontal {
+	height: var(--sapScrollBar_Dimension);
+}
+
+::-webkit-scrollbar:vertical {
+	width: var(--sapScrollBar_Dimension);
+}
+
+::-webkit-scrollbar {
+	background-color: var(--sapScrollBar_TrackColor);
+	border-left: var(--browser_scrollbar_border);
+}
+
+::-webkit-scrollbar-thumb {
+	border-radius: var(--browser_scrollbar_border_radius);
+	background-color: var(--sapScrollBar_FaceColor);
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background-color: var(--sapScrollBar_Hover_FaceColor);
+}
+
+::-webkit-scrollbar-corner {
+	background-color: var(--sapScrollBar_TrackColor);
+}