@ui5/webcomponents 0.0.0-e7dd012d7 → 0.0.0-e818f286e

package/src/themes/List.css

@@ -0,0 +1,117 @@
+@import "./InvisibleTextStyles.css";
+@import "./GrowingButton.css";
+
+:host(:not([hidden])) {
+	display: block;
+	max-width: 100%;
+	width: 100%;
+	-webkit-tap-highlight-color: transparent;
+}
+
+:host([indent]) .ui5-list-root {
+	padding: 2rem;
+}
+
+:host([separators="None"]) .ui5-list-nodata {
+	border-bottom: 0;
+}
+
+:host([busy]) {
+	opacity: 0.72;
+}
+
+:host([busy]) .ui5-list-busy-row {
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	top: 0;
+	outline: none;
+}
+
+:host([busy]) .ui5-list-busy-ind {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 1;
+}
+
+.ui5-list-root {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-sizing: border-box;
+}
+
+.ui5-list-scroll-container {
+	overflow: auto;
+	height: 100%;
+}
+
+.ui5-list-ul {
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
+}
+
+.ui5-list-ul:focus {
+	outline: none;
+}
+
+.ui5-list-focusarea {
+	position: fixed; /* keep it in the visible viewport, so that IE does not scroll on focus */
+}
+
+.ui5-list-header {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	box-sizing: border-box;
+	font-size: var(--sapFontHeader4Size); 
+	font-family: "72override", var(--sapFontFamily);
+	color: var(--sapGroup_TitleTextColor);
+	height: 3rem;
+	line-height: 3rem;
+	padding: 0 1rem;
+	background-color: var(--sapGroup_TitleBackground);
+	border-bottom: 1px solid var(--sapGroup_TitleBorderColor);
+}
+
+.ui5-list-footer {
+	height: 2rem;
+	box-sizing: border-box;
+	-webkit-text-size-adjust: none;	/* To improve readability Mobile Safari automatically increases the size of small text so let's disable this */
+	font-size: var(--sapFontSize);
+	font-family: "72override", var(--sapFontFamily);
+	line-height: 2rem;
+	background-color: var(--sapList_FooterBackground);
+	color: var(--ui5_list_footer_text_color);
+	padding: 0 1rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.ui5-list-nodata {
+	list-style-type: none;
+	display: -webkit-box;
+	display: flex;
+	-webkit-box-align: center;
+	align-items: center;
+	-webkit-box-pack: center;
+	justify-content: center;
+	color: var(--sapTextColor);
+	background-color: var(--sapList_Background);
+	border-bottom: 1px solid var(--sapList_BorderColor);
+	padding: 0 1rem !important;
+	height: var(--_ui5_list_no_data_height);
+	font-size: var(--_ui5_list_no_data_font_size);
+	font-family: "72override", var(--sapFontFamily);
+}
+
+.ui5-list-nodata-text {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

package/src/themes/ListItem.css

@@ -0,0 +1,207 @@
+@import "./InvisibleTextStyles.css";
+
+/* actionable (type="Active" + desktop) */
+:host([actionable]:not([disabled])) {
+	cursor: pointer;
+}
+
+/* selected and hovered */
+:host([selected][actionable]:not([active]):hover) {
+	background : var(--sapList_Hover_SelectionBackground);
+}
+
+/* selected and active */
+:host([active][actionable]),
+:host([selected][active][actionable]) {
+	background: var(--sapList_Active_Background);
+}
+
+/* hovered */
+:host([actionable]:not([active]):not([selected]):hover) {
+	background : var(--sapList_Hover_Background);
+}
+
+/* focused */
+:host([active][actionable]) .ui5-li-root.ui5-li--focusable:focus,
+:host([active][actionable]) .ui5-li-root.ui5-li--focusable .ui5-li-content:focus {
+	outline-color: var(--sapContent_ContrastFocusColor);
+}
+
+/* active */
+:host([active][actionable]) .ui5-li-root .ui5-li-icon {
+	color: var(--sapList_Active_TextColor);
+}
+
+/* [ui5-li]: title, description, additionalTextState */
+:host([active][actionable]) .ui5-li-title,
+:host([active][actionable]) .ui5-li-desc,
+:host([active][actionable]) .ui5-li-additional-text {
+	color: var(--sapList_Active_TextColor);
+}
+
+/* [ui5-li]: additionalTextState */
+:host([additional-text-state="Warning"]) .ui5-li-additional-text {
+	color: var(--sapCriticalTextColor);
+}
+
+:host([additional-text-state="Success"]) .ui5-li-additional-text {
+	color: var(--sapPositiveTextColor);
+}
+
+:host([additional-text-state="Error"]) .ui5-li-additional-text {
+	color: var(--sapNegativeTextColor);
+}
+
+:host([additional-text-state="Information"]) .ui5-li-additional-text {
+	color: var(--sapInformativeTextColor);
+}
+
+/* [ui5-li]: item with title and description */
+:host([has-title][description]) {
+	height: 5rem;
+}
+
+:host([has-title][image]) {
+	height: 5rem;
+}
+
+:host([image]) .ui5-li-content {
+	height: 3rem;
+}
+
+:host([description]) .ui5-li-root {
+	padding: 1rem;
+}
+
+:host([description]) .ui5-li-content {
+	height: 3rem;
+}
+
+:host([has-title][description]) .ui5-li-title {
+	padding-bottom: 0.375rem;
+}
+
+.ui5-li-text-wrapper {
+	display: flex;
+	flex-direction: column;
+	flex: auto;
+	min-width: 1px;
+	line-height: normal;
+}
+
+:host([description]) .ui5-li-text-wrapper {
+	height: 100%;
+	justify-content: space-between;
+	padding: 0.125rem 0;
+}
+
+.ui5-li-description-info-wrapper {
+	display: flex;
+	justify-content: space-between;
+}
+
+.ui5-li-title {
+	color: var(--sapTextColor);
+	font-size: var(--_ui5_list_item_title_size);
+}
+
+.ui5-li-additional-text,
+:host(:not([wrapping-type="Normal"])) .ui5-li-title,
+.ui5-li-desc {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+:host([wrapping-type="Normal"]) {
+	height: auto;
+}
+
+:host([wrapping-type="Normal"]) .ui5-li-content {
+	margin: var(--_ui5_list_item_content_vertical_offset) 0;
+}
+
+.ui5-li-desc {
+	color: var(--sapContent_LabelColor);
+	font-size: var(--sapFontSize);
+}
+
+.ui5-li-additional-text {
+	margin: 0 0.25rem;
+	color: var(--sapNeutralTextColor);
+	font-size: 0.875rem;
+	min-width: 3.75rem;
+	text-align: end;
+	max-width: 40%;
+}
+
+:host([description]) .ui5-li-additional-text {
+	align-self: flex-end;
+}
+
+.ui5-li-img {
+	width: var(--_ui5_list_item_img_size);
+	min-width: var(--_ui5_list_item_img_size);
+	height: var(--_ui5_list_item_img_size);
+	min-height: var(--_ui5_list_item_img_size);
+	margin-top: var(--_ui5_list_item_img_top_margin);
+	margin-bottom: var(--_ui5_list_item_img_bottom_margin);
+	margin-inline-end: var(--_ui5_list_item_img_hn_margin);
+	border-radius: 0.25rem;
+}
+
+.ui5-li-img-inner {
+	object-fit: contain;
+}
+
+.ui5-li-icon {
+	min-width: var(--_ui5_list_item_icon_size);
+	min-height: var(--_ui5_list_item_icon_size);
+	color: var(--sapContent_NonInteractiveIconColor);
+	padding-inline-end: var(--_ui5_list_item_icon_padding-inline-end);
+}
+
+.ui5-li-content {
+	display: flex;
+	align-items: center;
+	flex: auto;
+	overflow: hidden;
+}
+
+.ui5-li-detailbtn,
+.ui5-li-deletebtn {
+	display: flex;
+	align-items: center;
+	margin-left: var(--_ui5_list_buttons_left_space);
+}
+
+.ui5-li-multisel-cb,
+.ui5-li-singlesel-radiobtn {
+	flex-shrink: 0;
+}
+
+:host([description]) .ui5-li-singlesel-radiobtn {
+	align-self: flex-start;
+	margin-top: var(--_ui5_list_item_selection_btn_margin_top);
+}
+
+:host([description]) .ui5-li-multisel-cb {
+	align-self: flex-start;
+	margin-top: var(--_ui5_list_item_selection_btn_margin_top);
+}
+
+:host([_mode="SingleSelectBegin"]) .ui5-li-root {
+	padding-inline: 0 1rem;
+}
+
+:host([_mode="MultiSelect"]) .ui5-li-root {
+	padding-inline: 0 1rem;
+}
+
+:host([_mode="SingleSelectEnd"]) .ui5-li-root {
+	padding-inline: 1rem 0;
+}
+
+:host [ui5-checkbox].ui5-li-singlesel-radiobtn {
+	margin-right: var(--_ui5_list_item_cb_margin_right);
+}

package/src/themes/ListItemBase.css

@@ -0,0 +1,84 @@
+:host(:not([hidden])) {
+	display: block;
+}
+
+:host {
+	height: var(--_ui5_list_item_base_height);
+	background: var(--ui5-listitem-background-color);
+	box-sizing: border-box;
+	border-bottom: 1px solid transparent;
+}
+
+/* selected */
+:host([selected]) {
+	background: var(--sapList_SelectionBackgroundColor);
+}
+
+:host([has-border]) {
+	border-bottom: var(--ui5-listitem-border-bottom);
+}
+
+:host([selected]) {
+	border-bottom: var(--ui5-listitem-selected-border-bottom);
+}
+
+:host(:not([focused])[selected][has-border]) {
+	border-bottom: var(--ui5-listitem-selected-border-bottom);
+}
+
+/* focused & selected */
+:host([focused][selected]) {
+	border-bottom: var(--ui5-listitem-focused-selected-border-bottom);
+}
+
+.ui5-li-root {
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	padding: 0 1rem 0 1rem;
+	box-sizing: border-box;
+}
+
+/* focused */
+:host([focused]) .ui5-li-root.ui5-li--focusable {
+	outline: none;
+}
+
+:host([focused]) .ui5-li-root.ui5-li--focusable:after {
+	content: "";
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	position: absolute;
+	top: 0.125rem;
+	right: 0.125rem;
+	bottom: 0.125rem;
+	left: 0.125rem;
+	pointer-events: none;
+}
+
+:host([focused]) .ui5-li-content:focus:after {
+	content: "";
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	pointer-events: none;
+}
+
+:host([active][focused]) .ui5-li-root.ui5-li--focusable:after {
+	border-color: var(--ui5-listitem-active-border-color);
+}
+
+:host([disabled]) {
+    opacity: var(--_ui5-listitembase_disabled_opacity);
+    pointer-events: none;
+}
+
+.ui5-li-content {
+	max-width: 100%;
+	font-family: "72override", var(--sapFontFamily);
+	color: var(--sapList_TextColor);
+}

package/src/themes/Menu.css

@@ -0,0 +1,88 @@
+
+.ui5-menu-rp[ui5-responsive-popover]::part(header),
+.ui5-menu-rp[ui5-responsive-popover]::part(content),
+.ui5-menu-rp[ui5-responsive-popover]::part(footer) {
+	padding: 0;
+}
+
+.ui5-menu-rp[ui5-responsive-popover] {
+	box-shadow: var(--sapContent_Shadow1);
+	border-radius: var(--_ui5_menu_popover_border_radius);
+	max-width: 20rem;
+}
+
+.ui5-menu-item-icon-end {
+	display: inline-block;
+	vertical-align: middle;
+	padding-inline-start: 0.5rem;
+	float: var(--_ui5-menu_item_icon_float); /* TODO: refactor icon positioning as float and inline-block are incompatible */
+}
+
+.ui5-menu-item-no-icon-end {
+	min-width: var(--_ui5_list_item_icon_size);
+	min-height: var(--_ui5_list_item_icon_size);
+	display: inline-block;
+	vertical-align: middle;
+	padding-inline-start: 0.5rem;
+	float: var(--_ui5-menu_item_icon_float); /* TODO: refactor icon positioning a float and inline-block are incompatible */
+}
+
+.ui5-menu-item-dummy-icon {
+	min-width: var(--_ui5_list_item_icon_size);
+	min-height: var(--_ui5_list_item_icon_size);
+	display: inline-block;
+	vertical-align: middle;
+	padding-inline-end: 0.5rem;
+}
+
+.ui5-menu-dialog-header {
+	display: flex;
+	height: var(--_ui5-responsive_popover_header_height);
+	align-items: center;
+	justify-content: space-between;
+	padding: 0px 1rem;
+	width: 100%;
+	overflow: hidden;
+}
+
+.ui5-menu-dialog-title {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	width: calc(100% - 6.5rem);
+	padding-right: 1rem;
+}
+
+.ui5-menu-dialog-title > div {
+	display: inline-block;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.ui5-menu-back-button {
+	margin-right: 1rem;
+}
+
+.ui5-menu-item:not([is-phone])::part(native-li) {
+	padding: var(--_ui5_menu_item_padding);
+}
+
+.ui5-menu-item[starts-section] {
+	border-top: 1px solid var(--sapGroup_ContentBorderColor);
+}
+
+.ui5-menu-item[active] .ui5-menu-item-icon-end {
+	color: var(--sapList_Active_TextColor);
+}
+
+.ui5-menu-item[focused]:not([active]) {
+	background-color: var(--sapList_Hover_Background);
+}
+
+.ui5-menu-rp[sub-menu] {
+	margin-top: 0.25rem;
+	margin-inline: var(--_ui5_menu_submenu_margin_offset);
+}

package/src/themes/MessageStrip.css

@@ -0,0 +1,93 @@
+@import "./InvisibleTextStyles.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+	width: 100%;
+}
+
+/** Root classes **/
+.ui5-message-strip-root {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	border-radius: var(--sapPopover_BorderCornerRadius);
+	padding: var(--_ui5_message_strip_padding);
+	border-width: var(--_ui5_message_strip_border_width);
+	border-style: solid;
+	box-sizing: border-box;
+	position: relative;
+}
+
+.ui5-message-strip-root-hide-icon {
+	padding-inline: var(--_ui5_message_strip_padding_inline_no_icon);
+	padding-block: var(--_ui5_message_strip_padding_block_no_icon);
+}
+
+.ui5-message-strip-root-hide-close-button {
+	padding-inline-end: 1rem;
+}
+
+.ui5-message-strip-root--info {
+	background-color: var(--sapInformationBackground);
+	border-color: var(--sapMessage_InformationBorderColor);
+	color: var(--sapTextColor);
+}
+
+.ui5-message-strip-root--info .ui5-message-strip-icon {
+	color: var(--sapInformativeElementColor);
+}
+
+.ui5-message-strip-root--positive {
+	background-color: var(--sapSuccessBackground);
+	border-color: var(--sapMessage_SuccessBorderColor);
+}
+
+.ui5-message-strip-root--positive .ui5-message-strip-icon {
+	color: var(--sapPositiveElementColor);
+}
+
+.ui5-message-strip-root--negative {
+	background-color: var(--sapErrorBackground);
+	border-color: var(--sapMessage_ErrorBorderColor);
+}
+
+.ui5-message-strip-root--negative .ui5-message-strip-icon {
+	color: var(--sapNegativeElementColor);
+}
+
+.ui5-message-strip-root--warning {
+	background-color: var(--sapWarningBackground);
+	border-color: var(--sapMessage_WarningBorderColor);
+}
+
+.ui5-message-strip-root--warning .ui5-message-strip-icon {
+	color: var(--sapCriticalElementColor);
+}
+
+/** Icon wrapper **/
+.ui5-message-strip-icon-wrapper {
+	position: absolute;
+	top: var(--_ui5_message_strip_icon_top);
+	inset-inline-start: 0.75rem;
+	box-sizing: border-box;
+}
+
+/** Text **/
+.ui5-message-strip-text {
+	width: 100%;
+	color: var(--sapTextColor);
+	line-height: 1.2;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+}
+
+/** Close button - always in compact mode **/
+.ui5-message-strip-close-button {
+	width: 2rem;
+	min-width: 2rem;
+	height: 1.65rem;
+	min-height: 1.65rem;
+	position: absolute;
+	top: var(--_ui5_message_strip_close_button_top);
+	inset-inline-end: var(--_ui5_message_strip_close_button_right);
+}

package/src/themes/MonthPicker.css

@@ -0,0 +1,88 @@
+:host(:not([hidden])) {
+	display: block;
+}
+
+:host {
+	width: 100%;
+	height: 100%;
+}
+
+.ui5-mp-root {
+	padding: 2rem 0 1rem 0;
+	display: flex;
+	flex-direction: column;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	justify-content: center;
+	align-items: center;
+}
+
+.ui5-mp-item {
+	display: flex;
+	flex-direction: column;
+	width: calc(33.333% - 0.125rem);
+	height: var(--_ui5_month_picker_item_height);
+	color: var(--sapButton_Lite_TextColor);
+	background-color: var(--sapLegend_WorkingBackground);
+	align-items: center;
+	justify-content: center;
+	margin: var(--_ui5_monthpicker_item_margin);
+	box-sizing: border-box;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	cursor: default;
+	outline: none;
+	position: relative;
+	border: var(--_ui5_monthpicker_item_border);
+	border-radius: var(--_ui5_monthpicker_item_border_radius);
+}
+
+.ui5-dp-monthsectext {
+	font-size: 0.75rem;
+	color: var(--sapNeutralElementColor);
+}
+
+.ui5-mp-item:hover {
+	background-color: var(--sapList_Hover_Background);
+}
+
+.ui5-mp-item.ui5-mp-item--selected,
+.ui5-mp-item.ui5-mp-item--selected .ui5-dp-monthsectext {
+	box-shadow: var(--_ui5_monthpicker_item_selected_box_shadow);
+	font-weight: var(--_ui5_monthpicker_item_selected_font_wieght);
+	background-color: var(--_ui5_monthpicker_item_selected_background_color);
+	color: var(--_ui5_monthpicker_item_selected_text_color);
+}
+
+.ui5-mp-item.ui5-mp-item--disabled {
+	pointer-events: none;
+	opacity: 0.5;
+}
+
+.ui5-mp-item.ui5-mp-item--selected:focus {
+	background-color: var(--sapContent_Selected_Background);
+}
+
+.ui5-mp-item.ui5-mp-item--selected:focus::after {
+	border-color: var(--sapContent_ContrastFocusColor);
+}
+
+.ui5-mp-item.ui5-mp-item--selected:hover {
+	background-color: var(--_ui5_monthpicker_item_selected_hover_color);
+}
+
+.ui5-mp-item:focus::after {
+	content: "";
+	position: absolute;
+	border: var(--_ui5_button_focused_border);
+	inset: 0;
+	border-radius: var(--_ui5_monthpicker_item_focus_after_border_radius);
+}
+
+.ui5-mp-quarter {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+}

package/src/themes/MultiComboBox.css

@@ -0,0 +1,27 @@
+@import "./Input.css";
+@import "./InputIcon.css";
+@import "./InvisibleTextStyles.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+}
+
+.ui5-multi-combobox-root {
+	display: flex;
+	overflow: hidden;
+	width: 100%;
+	height: 100%;
+	border-radius: var(--_ui5_input_border_radius);
+}
+
+.ui5-multi-combobox-tokenizer {
+	max-width: calc(100% - 3rem - var(--_ui5_input_icon_min_width));
+	border: none;
+	width: auto;
+	min-width: 0px;
+	height: 100%;
+}
+
+:host([readonly]) .ui5-multi-combobox-tokenizer::part(n-more-text) {
+	color: var(--sapLinkColor);
+}

package/src/themes/MultiComboBoxPopover.css

@@ -0,0 +1,3 @@
+.ui5-suggestions-popover .ui5-multi-combobox-all-items-list {
+	--_ui5_checkbox_width_height: var(--_ui5_list_item_dropdown_base_height);
+}