@ui5/webcomponents 0.0.0-8db0ce01a → 0.0.0-a3eca7ade

package/src/themes/Dialog.css

@@ -0,0 +1,66 @@
+:host {
+	min-width: 20rem;
+	min-height: 6rem;
+	max-height: 94%;
+	max-width: 90%;
+	flex-direction: column;
+	box-shadow: var(--sapContent_Shadow3);
+}
+
+:host([stretch]) {
+	width: 90%;
+	height: 94%;
+}
+
+:host([stretch][on-phone]) {
+	width: 100%;
+	height: 100%;
+	max-height: 100%;
+	max-width: 100%;
+	border-radius: 0;
+}
+
+:host([draggable]) .ui5-popup-header-root,
+:host([draggable]) ::slotted([slot="header"]) {
+	cursor: move;
+}
+
+:host([draggable]) .ui5-popup-header-root * {
+	cursor: auto;
+}
+
+.ui5-popup-header-root:focus {
+	outline: var(--_ui5_dialog_outline);
+	border-radius: var(--_ui5_dialog_header_border_radius);
+	outline-offset: var(--_ui5_dialog_header_focus_offset);
+}
+
+.ui5-popup-root {
+	display: flex;
+	flex-direction: column;
+	max-width: 100vw;
+}
+
+:host([stretch]) .ui5-popup-content {
+	width: 100%;
+	height: 100%;
+}
+
+.ui5-popup-content {
+	min-height: var(--_ui5_dialog_content_min_height);
+	flex: 1 1 auto;
+}
+
+.ui5-popup-resize-handle {
+	position: absolute;
+	bottom: var(--_ui5_dialog_resize_handle_bottom);
+	right: var(--_ui5_dialog_resize_handle_right);
+	cursor: se-resize;
+	color: var(--_ui5_dialog_resize_handle_color);
+}
+
+.ui5-popup-resize-handle[dir=rtl] {
+	left: -0.25rem;
+	right: unset;
+	cursor: sw-resize;
+}

package/src/themes/FileUploader.css

@@ -0,0 +1,40 @@
+:host {
+	display: inline-block;
+}
+
+.ui5-file-uploader-root {
+	position: relative;
+}
+
+.ui5-file-uploader-root input[type=file] {
+	opacity: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+}
+
+.ui5-file-uploader-root input[type=file]:not([disabled]) {
+	cursor: pointer;
+}
+
+.ui5-file-uploader-mask {
+	display: flex;
+}
+
+.ui5-file-uploader-mask [ui5-input] {
+	margin-right: 0.25rem;
+}
+
+:host(:not([value-state]):not([disabled]):hover) [ui5-input] {
+	background-color: var(--sapField_Hover_Background);
+	border: 1px solid var(--sapField_Hover_BorderColor);
+}
+
+:host(:not([disabled]):active) [ui5-button] {
+	background-color: var(--sapButton_Active_Background);
+	border-color: var(--sapButton_Active_BorderColor);
+	color: var(--sapButton_Active_TextColor);
+	text-shadow: none;
+}

package/src/themes/GroupHeaderListItem.css

@@ -0,0 +1,24 @@
+@import "./InvisibleTextStyles.css";
+
+:host {
+	height: var(--_ui5_group_header_list_item_height);
+	background: var(--ui5-group-header-listitem-background-color);
+	border-bottom: 1px solid var(--sapList_TableGroupHeaderBorderColor);
+	color: var(--sapList_TableGroupHeaderTextColor);
+}
+
+.ui5-li-root.ui5-ghli-root {
+	padding-top: 0.5rem;
+	color: currentColor;
+	font-size: var(--sapFontHeader6Size);
+	font-weight: normal;
+	line-height: 2rem;
+}
+
+.ui5-ghli-title {
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-weight: bold;
+}

package/src/themes/GrowingButton.css

@@ -0,0 +1,67 @@
+[growing-button] {
+	display: flex;
+	align-items: center;
+	padding: var(--_ui5_load_more_padding);
+	border-top: 1px solid var(--sapList_BorderColor);
+	box-sizing: border-box;
+	cursor: pointer;
+	outline: none;
+}
+
+[growing-button-inner] {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	min-height: var(--_ui5_load_more_text_height);
+	width: 100%;
+	color: var(--sapButton_TextColor);
+	background-color: var(--sapList_Background);
+	border: var(--_ui5_load_more_border);
+	border-radius: var(--_ui5_load_more_border_radius);
+	box-sizing: border-box;
+}
+
+[growing-button-inner]:focus {
+	outline: var(--_ui5_load_more_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: -0.125rem;
+	border-color: transparent;
+}
+
+[growing-button-inner]:hover {
+	background-color: var(--sapList_Hover_Background);
+}
+
+[growing-button-inner]:active,
+[growing-button-inner][active] {
+	background-color: var(--sapList_Active_Background);
+	border-color: var(--sapList_Active_Background);
+}
+
+[growing-button-inner]:active > *,
+[growing-button-inner][active] > * {
+	color: var(--sapList_Active_TextColor);
+}
+
+[growing-button-text],
+[growing-button-subtext] {
+	width: 100%;
+	text-align: center;
+	font-family: "72override", var(--sapFontFamily);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	box-sizing: border-box;
+}
+
+[growing-button-text] {
+	height: var(--_ui5_load_more_text_height);
+	padding: 0.875rem 1rem 0 1rem;
+	font-size: var(--_ui5_load_more_text_font_size);
+	font-weight: bold;
+}
+
+[growing-button-subtext] {
+	font-size: var(--sapFontSize);
+	padding: var(--_ui5_load_more_desc_padding);
+}

package/src/themes/Icon.css

@@ -0,0 +1,38 @@
+@import "./TapHighlightColor.css";
+
+:host([hidden]) {
+	display: none;
+}
+
+:host([invalid]) {
+	display:none;
+}
+
+/*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
+:host(:not([hidden]).ui5_hovered) {
+	opacity: .7;
+}
+
+:host {
+	display: inline-block;
+	width: 1rem;
+	height: 1rem;
+	color: var(--sapContent_NonInteractiveIconColor);
+	fill: currentColor;
+	outline: none;
+}
+
+:host([interactive][focused]) .ui5-icon-root {
+	outline: 1px dotted var(--sapContent_FocusColor);
+}
+
+.ui5-icon-root {
+	display:flex;
+	outline: none;
+	vertical-align: top;
+}
+
+:host(:not([dir="ltr"])) .ui5-icon-root[dir=rtl] {
+	transform: scale(-1, 1);
+	transform-origin: center;
+}

package/src/themes/Input.css

@@ -0,0 +1,407 @@
+@import "./InvisibleTextStyles.css";
+@import "./InputIcon.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+}
+
+:host {
+	width: var(--_ui5_input_width);
+	min-width: var(--_ui5_input_width);
+	height: var(--_ui5_input_height);
+	color: var(--sapField_TextColor);
+	font-size: var(--sapFontSize);
+	font-family: "72override", var(--sapFontFamily);
+	font-style: normal;
+	background-color: var(--_ui5-input-background-color);
+	border: var(--_ui5-input-border);
+	border-radius: var(--_ui5-input-border-radius);
+	box-sizing: border-box;
+	line-height: normal;
+	letter-spacing: normal;
+	word-spacing: normal;
+	text-align: start;
+	transition: var(--_ui5-input-transition);
+	background-image: var(--_ui5-input-background-image);
+	background-size: 100% var(--sapField_BorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+}
+
+:host([focused]) {
+	border-color: var(--_ui5-input-focused-border-color);
+	background-color: var(--sapField_Focus_Background);
+	outline: var(--_ui5-input-focus-outline);
+	outline-offset: var(--_ui5-input-focus-outline-offset);
+	box-shadow: var(--_ui5-input-focus-box-shadow);
+}
+
+.ui5-input-root::before {
+	content: "";
+    position: absolute;
+    width: calc(100% - 2px);
+    left: 1px;
+    bottom: -2px;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+    height: var(--_ui5-input-bottom-border-height);
+    transition: var(--_ui5-input-transition);
+    background-color: var(--_ui5-input-bottom-border-color);
+}
+
+:host([value-state]:not([value-state="None"])[focused]) {
+	outline: var(--_ui5-input-value-state-outline);
+	outline-offset: var(--_ui5-input-value-state-outline-offset);
+}
+
+.ui5-input-root {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	background: transparent;
+	display: inline-block;
+	outline: none;
+	box-sizing: border-box;
+	color: inherit;
+	transition: border-color .2s ease-in-out;
+}
+
+:host([disabled]) {
+	opacity: var(--_ui5_input_disabled_opacity);
+	cursor: default;
+	pointer-events: none;
+	background-color: var(--_ui5-input-disabled-background);
+	border-color: var(--_ui5_input_disabled_border_color);
+}
+
+:host([disabled]) .ui5-input-root::before,
+:host([readonly]) .ui5-input-root::before {
+	content: none;
+}
+
+[inner-input] {
+	background: transparent;
+	color: inherit;
+	border: none;
+	font-style: inherit;
+	-webkit-appearance: none;
+	-moz-appearance: textfield;
+	padding: var(--_ui5_input_inner_padding);
+	box-sizing: border-box;
+	min-width: inherit;
+	width: 100%;
+	text-align: inherit;
+	text-overflow: ellipsis;
+	flex: 1;
+	outline: none;
+	font-size: inherit;
+	font-family: inherit;
+	line-height: inherit;
+	letter-spacing: inherit;
+	word-spacing: inherit;
+	text-align: inherit;
+}
+
+[inner-input][inner-input-with-icon] {
+	padding: var(--_ui5_input_inner_padding_with_icon);
+}
+
+.ui5-input-readonly-icon {
+	display: var(--_ui5_input_readonly_icon_display);
+	padding: var(--_ui5_input_icon_padding);
+	margin-right: 0.125rem;
+	align-self: center;
+}
+
+.ui5-input-value-state-icon {
+	height: 100%;
+	display: var(--_ui5-input-value-state-icon-display);
+    align-items: center;
+}
+
+.ui5-input-value-state-icon > svg {
+	margin-right: 8px;
+}
+
+[inner-input]::selection {
+	background: var(--sapSelectedColor);
+	color: var(--sapContent_ContrastTextColor);
+}
+
+/* Input placeholder */
+:host([disabled]) [inner-input]::-webkit-input-placeholder {
+	visibility: hidden;
+}
+:host([readonly]) [inner-input]::-webkit-input-placeholder {
+	visibility: hidden;
+}
+[inner-input]::-webkit-input-placeholder {
+	font-weight: normal;
+	font-style: var(--_ui5-input-placeholder-style);
+	color: var(--_ui5-input-placeholder-color);
+	padding-right: 0.125rem;
+}
+
+:host([disabled]) [inner-input]::-moz-placeholder {
+	visibility: hidden;
+}
+:host([readonly]) [inner-input]::-moz-placeholder {
+	visibility: hidden;
+}
+[inner-input]::-moz-placeholder {
+	font-weight: normal;
+	font-style: var(--_ui5-input-placeholder-style);
+	color: var(--sapField_PlaceholderTextColor);
+	padding-right: 0.125rem;
+}
+
+:host([disabled]) [inner-input]:-ms-input-placeholder {
+	visibility: hidden;
+}
+:host([readonly]) [inner-input]:-ms-input-placeholder {
+	visibility: hidden;
+}
+[inner-input]:-ms-input-placeholder {
+	font-weight: normal;
+	font-style: italic;
+	color: var(--sapField_PlaceholderTextColor);
+	padding-right: 0.125rem;
+}
+
+:host([value-state="Error"]) [inner-input]::-webkit-input-placeholder {
+	color: var(--_ui5-input-value-state-error-border-botom-color);
+}
+
+:host([value-state="Error"]) [inner-input]::-moz-placeholder {
+	color: var(--_ui5-input-value-state-error-border-botom-color);
+}
+
+:host([value-state="Warning"]) [inner-input]::-webkit-input-placeholder {
+	color: var(--_ui5-input-value-state-warning-border-botom-color);
+}
+
+:host([value-state="Warning"]) [inner-input]::-moz-placeholder {
+	color: var(--_ui5-input-value-state-warning-border-botom-color);
+}
+
+:host([value-state="Success"]) [inner-input]::-webkit-input-placeholder {
+	color: var(--_ui5-input-value-state-success-border-botom-color);
+}
+
+:host([value-state="Success"]) [inner-input]::-moz-placeholder {
+	color: var(--_ui5-input-value-state-success-border-botom-color);
+}
+
+:host([value-state="Information"]) [inner-input]::-webkit-input-placeholder {
+	color: var(--_ui5-input-value-success-information-border-botom-color);
+}
+
+:host([value-state="Information"]) [inner-input]::-moz-placeholder {
+	color: var(--_ui5-input-value-success-information-border-botom-color);
+}
+
+.ui5-input-content {
+	height: 100%;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+	overflow: hidden;
+	outline: none;
+	background: transparent;
+	color: inherit;
+}
+
+:host([readonly]) {
+	border-color: var(--_ui5_input_readonly_border_color);
+	background: var(--_ui5-input-readonly-background);
+}
+
+:host(:not([value-state]):not([readonly]):hover) {
+	background-color: var(--sapField_Hover_Background);
+	border: var(--_ui5-input-hover-border);
+	box-shadow: var(--_ui5-input-hover-box-shadow);
+	background-image: var(--_ui5-input-background-image);
+	background-size: 100% var(--sapField_BorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+}
+
+:host(:not([value-state]):not([readonly])[focused]:hover),
+:host([value-state="None"]:not([readonly])[focused]:hover) {
+	border-color: var(--_ui5-input-focused-border-color);
+	box-shadow: var(--_ui5-input-focus-box-shadow);
+}
+
+:host(:not([value-state]):not([readonly]):hover) {
+	border: var(--_ui5-input-hover-border);
+}
+
+:host([focused]) .ui5-input-root::before {
+	content: none;
+}
+
+:host([value-state="None"]:not([readonly]):hover) {
+	background-color: var(--sapField_Hover_Background);
+	border: var(--_ui5-input-hover-border);
+	box-shadow: var(--_ui5-input-hover-box-shadow);
+}
+
+:host([value-state]:not([value-state="None"])) {
+	border-width: var(--_ui5_input_state_border_width);
+}
+
+:host([value-state="Error"]) [inner-input],
+:host([value-state="Warning"]) [inner-input] {
+	font-style: var(--_ui5_input_error_warning_font_style);
+	text-indent: var(--_ui5_input_error_warning_text_indent);
+}
+
+:host([value-state="Error"]) [inner-input] {
+	font-weight: var(--_ui5_input_error_font_weight);
+}
+
+:host([value-state="Warning"]) [inner-input] {
+	font-weight: var(--_ui5_input_warning_font_weight);
+}
+
+:host([value-state="Information"]) [inner-input] {
+	font-style: var(--_ui5_input_information_font_style);
+	font-weight: var(--_ui5_input_information_font_weight);
+	text-indent: var(--_ui5_input_information_text_indent);
+}
+
+:host([value-state="Error"]:not([readonly])) {
+	background-color: var(--sapField_InvalidBackground);
+	border-color: var(--_ui5-input-value-state-error-border-color);
+	background-image: var(--_ui5-input-error-background-image);
+	background-size: 100% var(--sapField_InvalidBorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+}
+
+:host([value-state="Error"][focused]:not([readonly])) {
+	background-color: var(--_ui5-input-focused-value-state-error-background);
+	border-color: var(--_ui5-input-focused-value-state-error-border-color);
+	box-shadow: var(--_ui5-input-value-state-error-focus-box-shadow);
+}
+
+:host([value-state="Error"]:not([readonly])) .ui5-input-root::before{
+	background-color: var(--_ui5-input-value-state-error-border-botom-color);
+}
+
+:host([value-state="Error"]:not([readonly]):not([focused]):hover) {
+	background-color: var(--sapField_Hover_Background);
+	box-shadow: var(--_ui5-input-value-state-error-hover-box-shadow);
+}
+
+:host([value-state="Error"]:not([readonly]):not([disabled])),
+:host([value-state="Warning"]:not([readonly]):not([disabled])),
+:host([value-state="Information"]:not([readonly]):not([disabled])) {
+	border-style: var(--_ui5_input_error_warning_border_style);
+}
+
+:host([value-state="Warning"]:not([readonly])) {
+	background-color: var(--sapField_WarningBackground);
+	border-color: var(--_ui5-input-value-state-warning-border-color);
+	background-image: var(--_ui5-input-warning-background-image);
+	background-size: 100% var(--sapField_WarningBorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+}
+
+:host([value-state="Warning"][focused]:not([readonly])) {
+	background-color: var(--_ui5-input-focused-value-state-warning-background);
+	border-color: var(--_ui5-input-focused-value-state-warning-border-color);
+	box-shadow: var(--_ui5-input-value-state-warning-focus-box-shadow);
+}
+
+:host([value-state="Warning"]:not([readonly])) .ui5-input-root::before{
+	background-color: var(--_ui5-input-value-state-warning-border-botom-color);
+}
+
+:host([value-state="Warning"]:not([readonly]):not([focused]):hover) {
+	background-color: var(--sapField_Hover_Background);
+	box-shadow: var(--_ui5-input-value-state-warning-hover-box-shadow);
+}
+
+:host([value-state="Success"]:not([readonly])) {
+	background-color: var(--sapField_SuccessBackground);
+	border-color: var(--_ui5-input-value-state-success-border-color);
+	border-width: var(--_ui5-input-value-state-success-border-width);
+	background-image: var(--_ui5-input-success-background-image);
+	background-size: 100% var(--sapField_SuccessBorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+}
+
+:host([value-state="Success"][focused]:not([readonly])) {
+	background-color: var(--_ui5-input-focused-value-state-success-background);
+	border-color: var(--_ui5-input-focused-value-state-success-border-color);
+	box-shadow: var(--_ui5-input-value-state-success-focus-box-shadow);
+}
+
+:host([value-state="Success"]:not([readonly])) .ui5-input-root::before{
+	background-color: var(--_ui5-input-value-state-success-border-botom-color);
+}
+
+:host([value-state="Success"]:not([readonly]):not([focused]):hover) {
+	background-color: var(--sapField_Hover_Background);
+	box-shadow: var(--_ui5-input-value-state-success-hover-box-shadow);
+}
+
+:host([value-state="Information"]:not([readonly])) {
+	background-color: var(--sapField_InformationBackground);
+	border-color: var(--_ui5-input-value-state-information-border-color);
+	border-width: var(--_ui5-input-information_border_width);
+	background-image: var(--_ui5-input-information-background-image);
+	background-size: 100% var(--sapField_InformationBorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+}
+
+:host([value-state="Information"][focused]:not([readonly])) {
+	background-color: var(--_ui5-input-focused-value-state-information-background);
+	border-color: var(--_ui5-input-focused-value-state-information-border-color);
+	box-shadow: var(--_ui5-input-focus-box-shadow);
+}
+
+:host([value-state="Information"]:not([readonly])) .ui5-input-root::before{
+	background-color: var(--_ui5-input-value-success-information-border-botom-color);
+}
+
+:host([value-state="Information"]:not([readonly]):not([focused]):hover) {
+	background-color: var(--sapField_Hover_Background);
+	box-shadow: var(--_ui5-input-value-state-information-hover-box-shadow);
+}
+
+/* Remove IE's defaut clear button */
+[inner-input]::-ms-clear {
+	height: 0;
+	width: 0;
+}
+
+/* Input Icon */
+
+.ui5-input-icon-root {
+	min-width: var(--_ui5_input_icon_min_width);
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+/* TODO: Remove this after parser is fixed
+	-	this statement is transformed to [ui5-multi-combobox] [ui5-icon] which
+	affects all icons in the combobox incuding these in the list items
+*/
+::slotted([ui5-icon][slot="icon"]) {
+	padding: var(--_ui5_input_icon_padding);
+}
+
+/* Chrome, Safari, Edge, Opera */
+[inner-input]::-webkit-outer-spin-button,
+[inner-input]::-webkit-inner-spin-button {
+  -webkit-appearance: inherit;
+  margin: inherit;
+}

package/src/themes/InputIcon.css

@@ -0,0 +1,53 @@
+/*
+	This CSS file enables visual alignment of all icons within input elements.
+	API:
+	- add input-icon attribute to an icon
+	- [Optional] pressed attribute set to the icon will enable additional styling (check MultiComboBox, Select, etc.)
+*/
+
+[input-icon] {
+	color: var(--_ui5_input_icon_color);
+	cursor: pointer;
+	outline: none;
+	padding: var(--_ui5_input_icon_padding);
+	margin-right: var(--_ui5_input_icon_margin);
+	border-left: var(--_ui5_input_icon_border);
+	min-width: 1rem;
+	min-height: 1rem;
+	border-radius: var(--_ui5_input_icon_border_radius);
+	align-self: center;
+}
+
+[input-icon][pressed] {
+	background: var(--_ui5_input_icon_pressed_bg);
+	box-shadow: var(--_ui5_input_icon_box_shadow);
+	color: var(--_ui5_input_icon_pressed_color);
+}
+
+[input-icon]:active {
+	background-color: var(--sapButton_Active_Background);
+	box-shadow: var(--_ui5_input_icon_box_shadow);
+	color: var(--_ui5_input_icon_pressed_color);
+}
+
+[input-icon]:not([pressed]):not(:active):hover {
+	background: var(--_ui5_input_icon_hover_bg);
+	box-shadow: var(--_ui5_input_icon_box_shadow);
+}
+
+[input-icon]:hover {
+	border-left: var(--_ui5_select_hover_icon_left_border);
+	box-shadow: var(--_ui5_input_icon_box_shadow);
+}
+
+[input-icon][dir="rtl"]:hover {
+	border-left: none;
+	border-right: var(--_ui5_select_hover_icon_left_border);
+}
+
+[input-icon][dir="rtl"] {
+	border-left: none;
+	margin-right: 0;
+	margin-left: var(--_ui5_input_icon_margin);
+	border-right: var(--_ui5_input_icon_border);
+}

package/src/themes/InvisibleTextStyles.css

@@ -0,0 +1,9 @@
+.ui5-hidden-text {
+	position: absolute;
+	clip: rect(1px,1px,1px,1px);
+	user-select: none;
+	left: -1000px; /* ensure the invisible texts are never part of the viewport */
+	top: -1000px;
+	pointer-events: none;
+	font-size: 0;
+}