@ui5/webcomponents 1.0.0 → 1.1.1

package/src/themes/TextArea.css

@@ -0,0 +1,309 @@
+@import "./InvisibleTextStyles.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+}
+
+:host {
+	width: 100%;
+	color: var(--sapField_TextColor);
+	font-size: var(--sapFontSize);
+	font-family: "72override", var(--sapFontFamily);
+	font-style: normal;
+	border-color: var(--sapField_BorderColor);
+	border-radius: var(--sapField_BorderCornerRadius);
+	box-sizing: border-box;
+	line-height: 1.4;
+	letter-spacing: normal;
+	word-spacing: normal;
+}
+
+:host([disabled]) {
+	opacity: var(--_ui5_input_disabled_opacity);
+	cursor: default;
+	pointer-events: none;
+	border-color: var(--sapField_ReadOnly_BorderColor);
+	-webkit-text-fill-color: var(--sapContent_DisabledTextColor);
+	color: var(--sapContent_DisabledTextColor);
+}
+
+:host([disabled]) .ui5-textarea-inner {
+	background: var(--sapField_ReadOnly_Background);
+}
+
+:host([focused]) .ui5-textarea-inner {
+	outline: var(--_ui5_textarea_focus_outline);
+	outline-offset: -3px;
+}
+
+:host([focused]:not([exceeding])) .ui5-textarea-inner {
+	background-color: var(--sapField_Focus_Background);
+	background-image: none;
+	box-shadow: var(--_ui5_textarea_focus_box_shadow);
+}
+
+:host(:not([value-state]):not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
+	box-shadow: var(--_ui5_textarea_hover_box_shadow);
+	background-image: var(--_ui5_textarea_background_image);
+	background-size: 100% var(--sapField_BorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+}
+
+:host([value-state]:not([value-state="None"])[focused]) .ui5-textarea-inner,
+:host([exceeding]) .ui5-textarea-inner {
+	outline: var(--_ui5_textarea_value_state_focus_outline);
+	outline-offset: -4px;
+}
+
+
+.ui5-textarea-root {
+	height: 100%;
+	min-height: var(--_ui5_input_height);
+	display: inline-flex;
+	vertical-align: top;
+	outline: none;
+	box-sizing: border-box;
+	border-radius: inherit;
+	border-color: inherit;
+}
+
+.ui5-textarea-inner {
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: var(--_ui5_textarea_padding);
+	box-sizing: border-box;
+	color: inherit;
+	font-size: inherit;
+	font-family: inherit;
+	font-style: inherit;
+	-webkit-appearance: none;
+	-moz-appearance: textfield;
+	overflow: auto;
+	resize: none;
+	border-color: inherit;
+	border-radius: inherit;
+	background-color: var(--sapField_Background);
+	border-width: var(--_ui5_textarea_inner_border_width);
+	border-style: solid;
+	line-height: inherit;
+	letter-spacing: inherit;
+	word-spacing: inherit;
+	background-image: var(--_ui5_textarea_background_image);
+	background-size: 100% var(--sapField_BorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+}
+
+:host([growing]) .ui5-textarea-root {
+	position: relative;
+}
+
+:host([growing]) .ui5-textarea-inner {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.ui5-textarea-mirror {
+	line-height: 1.4;
+	visibility: hidden;
+	width: 100%;
+	word-break: break-all;
+	padding: var(--_ui5_textarea_padding);
+	font-size: var(--sapFontSize);
+	font-family: "72override", var(--sapFontFamily);
+	white-space: pre-wrap;
+	box-sizing: border-box;
+}
+
+:host([readonly]) {
+	border-color: var(--sapField_ReadOnly_BorderColor);
+}
+
+:host([readonly]) .ui5-textarea-root .ui5-textarea-inner {
+	background: var(--sapField_ReadOnly_Background);
+}
+
+
+:host([show-exceeded-text]) .ui5-textarea-root {
+	flex-direction: column;
+}
+
+.ui5-textarea-inner::-webkit-input-placeholder {
+	/* Chrome/Opera/Safari */
+	font-weight: normal;
+	font-style: var(--_ui5_textarea_placeholder_font_style);
+	color: var(--sapField_PlaceholderTextColor);
+}
+
+.ui5-textarea-inner::-moz-placeholder {
+	/* Firefox 19+ */
+	font-weight: normal;
+	font-style: var(--_ui5_textarea_placeholder_font_style);
+	color: var(--sapField_PlaceholderTextColor);
+}
+
+.ui5-textarea-inner:-ms-input-placeholder {
+	/* IE 10+ */
+	font-weight: normal;
+	font-style: var(--_ui5_textarea_placeholder_font_style);
+	color: var(--sapField_PlaceholderTextColor);
+}
+
+.ui5-textarea-inner:-moz-placeholder {
+	/* Firefox 18- */
+	font-weight: normal;
+	font-style: var(--_ui5_textarea_placeholder_font_style);
+	color: var(--sapField_PlaceholderTextColor);
+}
+
+:host(:not([value-state]):not([exceeding]):not([readonly]):hover) {
+	border-color: var(--sapField_Hover_BorderColor);
+}
+
+:host(:not([value-state]):not([exceeding]):not([readonly]):hover) .ui5-textarea-inner {
+	background-color: var(--sapField_Hover_Background);
+}
+
+:host([value-state]:not([value-state="None"])) .ui5-textarea-inner,
+:host([exceeding]) .ui5-textarea-inner {
+	border-width: var(--_ui5_textarea_state_border_width);
+}
+
+:host([value-state="Error"]) .ui5-textarea-inner,
+:host([value-state="Warning"]) .ui5-textarea-inner {
+	font-style: var(--_ui5_input_error_warning_font_style);
+}
+
+:host([value-state="Warning"]) .ui5-textarea-inner {
+	font-weight: var(--_ui5_input_warning_font_weight);
+}
+
+:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner,
+:host([exceeding]) .ui5-textarea-inner {
+	background-image: var(--_ui5_textarea_warning_background_image);
+	background-size: 100% var(--sapField_WarningBorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+}
+
+:host([value-state="Warning"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner,
+:host([exceeding]:not([focused]):hover) .ui5-textarea-inner {
+	box-shadow: var(--sapContent_Critical_Shadow);
+	background-color: var(--sapField_Hover_Background);
+}
+
+:host([value-state="Warning"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner,
+:host([exceeding][focused]) .ui5-textarea-inner {
+	background-image: none;
+	box-shadow: var(--_ui5_textarea_value_state_warning_focus_box_shadow);
+	background-color: var(--sapField_Hover_Background);
+}
+
+:host([value-state="Error"]:not([readonly])) .ui5-textarea-inner {
+	font-weight: var(--_ui5_input_error_font_weight);
+	background-image: var(--_ui5_textarea_error_background_image);
+	background-size: 100% var(--sapField_InvalidBorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+}
+
+:host([value-state="Error"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
+	box-shadow: var(--sapContent_Negative_Shadow);
+	background-color: var(--sapField_Hover_Background);
+}
+
+:host([value-state="Error"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
+	background-image: none;
+	box-shadow: var(--_ui5_textarea_value_state_error_focus_box_shadow);
+	background-color: var(--sapField_Hover_Background);
+}
+
+:host([value-state="Information"]:not([readonly])) .ui5-textarea-inner {
+	background-image: var(--_ui5_textarea_information_background_image);
+	background-size: 100% var(--sapField_InformationBorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+}
+
+:host([value-state="Information"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
+	box-shadow: var(--sapContent_Informative_Shadow);
+	background-color: var(--sapField_Hover_Background);
+}
+
+:host([value-state="Information"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
+	background-image: none;
+	box-shadow: var(--_ui5_textarea_focus_box_shadow);
+	background-color: var(--sapField_Hover_Background);
+}
+
+:host([value-state="Success"]:not([readonly])) .ui5-textarea-inner {
+	background-image: var(--_ui_textarea_success_background_image);
+	background-size: 100% var(--sapField_SuccessBorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+}
+
+:host([value-state="Success"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
+	box-shadow: var(--sapContent_Positive_Shadow);
+	background-color: var(--sapField_Hover_Background);
+}
+
+:host([value-state="Success"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
+	background-image: none;
+	box-shadow: var(--_ui5_textarea_value_state_success_focus_box_shadow);
+	background-color: var(--sapField_Hover_Background);
+}
+
+:host([value-state="Error"]:not([readonly])) {
+	border-color: var(--sapField_InvalidColor);
+}
+
+:host([value-state="Error"]:not([readonly])) .ui5-textarea-inner {
+	background-color: var(--sapField_InvalidBackground);
+}
+
+:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
+:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
+:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-textarea-inner {
+	border-style: var(--_ui5_input_error_warning_border_style);
+}
+
+:host([value-state="Warning"]:not([readonly])),
+:host([exceeding]) {
+	border-color: var(--sapField_WarningColor);
+}
+
+:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner,
+:host([exceeding]) .ui5-textarea-inner {
+	background-color: var(--sapField_WarningBackground);
+}
+
+:host([value-state="Success"]:not([readonly]):not([exceeding])) {
+	border-color: var(--sapField_SuccessColor);
+}
+
+:host([value-state="Success"]:not([readonly]):not([exceeding])) .ui5-textarea-inner {
+	background-color: var(--sapField_SuccessBackground);
+	border-width: var(--_ui5_textarea_success_border_width);
+}
+
+:host([value-state="Information"]:not([readonly]):not([exceeding])) {
+	border-color: var(--sapField_InformationColor);
+}
+
+:host([value-state="Information"]:not([readonly]):not([exceeding])) .ui5-textarea-inner {
+	background-color: var(--sapField_InformationBackground);
+	border-width: var(--_ui5_textarea_state_border_width);
+}
+
+.ui5-textarea-exceeded-text {
+	overflow: hidden;
+	align-self: flex-end;
+	padding: 0.125rem 0.125rem 0.5rem;
+	color: var(--sapContent_LabelColor);
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSmallSize);
+}

package/src/themes/TimePicker.css

@@ -0,0 +1,50 @@
+@import "./InvisibleTextStyles.css";
+@import "./InputIcon.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+}
+
+:host {
+	color: var(--sapField_TextColor);
+	background-color: var(--sapField_Background);
+	border-radius: var(--_ui5-time_picker_border_radius);
+}
+
+:host([value-state="Error"]) {
+	background-color: var(--sapField_InvalidBackground);
+}
+
+:host(:not([disabled]):hover) {
+	background: var(--sapField_Hover_Background);
+}
+
+:host .ui5-time-picker-input {
+	width: 100%;
+	color: inherit;
+	background-color: inherit;
+}
+
+.ui5-time-picker-input-icon-button {
+	border-left: 0.0625rem solid transparent;
+}
+
+.ui5-time-picker-input-icon-button {
+	border-left: 0.0625rem solid transparent;
+}
+
+.ui5-time-picker-input-icon-button:hover {
+	cursor: pointer;
+	border-left: var(--_ui5_time_picker_border);
+	background: var(--sapButton_Hover_Background);
+}
+
+.ui5-time-picker-input-icon-button:active {
+	background-color: var(--sapButton_Active_Background);
+	color: var(--sapButton_Active_TextColor);
+}
+
+.ui5-time-picker-input-icon-button[pressed] {
+	background-color: var(--sapButton_Active_Background);
+	color: var(--sapButton_Active_TextColor);
+}

package/src/themes/TimePickerPopover.css

@@ -0,0 +1,11 @@
+.ui5-time-picker-footer {
+	height: fit-content;
+	display: flex;
+	justify-content: flex-end;
+	width: 100%;
+}
+
+.ui5-time-picker-footer > [ui5-button] {
+	margin: 1%;
+	min-width: 20%;
+}

package/src/themes/TimeSelection.css

@@ -0,0 +1,27 @@
+:host(:not([hidden])) {
+    display: inline-block;
+    min-width: 18rem;
+}
+
+.ui5-time-selection-root {
+    width: 100%;
+    height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: stretch;
+	direction: ltr;
+	box-sizing: border-box;
+}
+
+.ui5-time-selection-root.ui5-phone{
+	height: 90vh;
+}
+
+:host(.ui5-dt-time.ui5-dt-cal--hidden) .ui5-time-selection-root.ui5-phone {
+	height: 80vh;
+}
+
+[ui5-wheelslider] {
+	padding-left: 0.25rem;
+	padding-right: 0.25rem;
+}

package/src/themes/Title.css

@@ -0,0 +1,65 @@
+:host(:not([hidden])) {
+	display: block;
+	cursor: text;
+}
+
+:host {
+	max-width: 100%;
+	color: var(--sapGroup_TitleTextColor);
+	font-size: var(--ui5_title_level_2Size);
+	font-family: "72override", var(--sapFontFamily);
+	text-shadow: var(--sapContent_TextShadow);
+}
+
+.ui5-title-root {
+	display: inline-block;
+	position: relative;
+	font-weight: normal;
+	font-size: inherit;
+	box-sizing: border-box;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 100%;
+	vertical-align: bottom;
+	-webkit-margin-before: 0;
+	-webkit-margin-after: 0;
+	-webkit-margin-start: 0;
+	-webkit-margin-end: 0;
+	margin: 0;
+	cursor: inherit;
+}
+
+:host([wrapping-type="Normal"]) .ui5-title-root {
+	white-space: pre-line;
+}
+
+/* Level H1 */
+:host([level="H1"]) {
+	font-size: var(--ui5_title_level_1Size);
+}
+
+/* Level H2 */
+:host([level="H2"]) {
+	font-size: var(--ui5_title_level_2Size);
+}
+
+/* Level H3 */
+:host([level="H3"]) {
+	font-size: var(--ui5_title_level_3Size);
+}
+
+/* Level H4 */
+:host([level="H4"]) {
+	font-size: var(--ui5_title_level_4Size);
+}
+
+/* Level H5 */
+:host([level="H5"]) {
+	font-size: var(--ui5_title_level_5Size);
+}
+
+/* Level H6 */
+:host([level="H6"]) {
+	font-size: var(--ui5_title_level_6Size);
+}

package/src/themes/Toast.css

@@ -0,0 +1,93 @@
+:host {
+	font-family: "72override", var(--sapFontFamily);
+	color: var(--sapTextColor);
+	font-size: var(--sapFontSize);
+}
+
+:host([open]) .ui5-toast-root {
+	display: block;
+}
+
+.ui5-toast-root {
+	position: fixed;
+	display: none;
+	box-sizing: border-box;
+	max-width: 15rem;
+	overflow: hidden;
+	padding: 1rem;
+	background: var(--_ui5_toast_background);
+	box-shadow: var(--_ui5_toast_shadow);
+	border-radius: var(--sapElement_BorderCornerRadius);
+	transition-property: opacity;
+	opacity: 1;
+	font-family: inherit;
+	color: inherit;
+	font-weight: inherit;
+	font-size: inherit;
+	word-wrap: break-word;
+	text-align: center;
+	text-overflow: ellipsis;
+	white-space: pre-line;
+}
+
+@media screen and (-ms-high-contrast: active) {
+    .ui5-toast-root {
+        border: 1px solid var(--sapPageFooter_BorderColor);
+    }
+}
+
+:host(:not([placement])) .ui5-toast-root {
+	bottom: var(--_ui5_toast_vertical_offset);
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+:host([placement="TopStart"]) .ui5-toast-root {
+	top: var(--_ui5_toast_vertical_offset);
+	left: var(--_ui5_toast_horizontal_offset);
+}
+
+:host([placement="MiddleStart"]) .ui5-toast-root {
+	left: var(--_ui5_toast_horizontal_offset);
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+:host([placement="BottomStart"]) .ui5-toast-root {
+	left: var(--_ui5_toast_horizontal_offset);
+	bottom: var(--_ui5_toast_vertical_offset);
+}
+
+ :host([placement="TopCenter"]) .ui5-toast-root {
+	top: var(--_ui5_toast_vertical_offset);
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+:host([placement="MiddleCenter"]) .ui5-toast-root {
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+}
+
+:host([placement="BottomCenter"]) .ui5-toast-root {
+	bottom: var(--_ui5_toast_vertical_offset);
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+:host([placement="TopEnd"]) .ui5-toast-root {
+	right: var(--_ui5_toast_horizontal_offset);
+	top: var(--_ui5_toast_vertical_offset);
+}
+
+:host([placement="MiddleEnd"]) .ui5-toast-root {
+	right: var(--_ui5_toast_horizontal_offset);
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+:host([placement="BottomEnd"]) .ui5-toast-root {
+	right: var(--_ui5_toast_horizontal_offset);
+	bottom: var(--_ui5_toast_vertical_offset);
+}

package/src/themes/ToggleButton.css

@@ -0,0 +1,88 @@
+:host(:not([hidden])) {
+	display: inline-block;
+}
+
+/* this line is also included from the Button.css, but keep it here in case we start using it for automatic IE11 compilation */
+:host([disabled]) {
+	pointer-events: none;
+}
+
+:host([design="Positive"][focused][active]),
+:host([design="Negative"][focused][active]),
+:host([design="Transparent"][focused][active]),
+:host([design="Default"][focused][active]) {
+	outline-color: var(--_ui5_button_positive_border_focus_hover_color);
+}
+
+:host([design="Default"][focused]),
+:host([design="Default"][focused][focused]),
+:host([design="Default"][focused][focused][active]),
+:host([design="Default"][focused]:hover) {
+	outline-color: var(--_ui5_toggle_button_pressed_focussed_hovered_outline_color);
+}
+
+:host([design="Positive"][pressed]),
+:host([design="Positive"][pressed][focused]),
+:host([design="Positive"][pressed][focused][active]),
+:host([design="Positive"][pressed]:hover) {
+	background: var(--sapButton_Accept_Active_Background);
+	border-color: var(--sapButton_Accept_Active_BorderColor);
+	color: var(--_ui5_toggle_button_selected_positive_text_color);
+	outline-color: var(--_ui5_toggle_button_pressed_focussed_hovered_outline_color);
+}
+
+:host([design="Positive"][pressed][active]),
+:host([design="Positive"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
+	background: var(--sapButton_Accept_Selected_Hover_Background);
+}
+
+:host([design="Negative"][pressed]),
+:host([design="Negative"][pressed][focused]),
+:host([design="Negative"][pressed]:hover) {
+	background: var(--sapButton_Reject_Active_Background);
+	border-color: var(--sapButton_Reject_Active_BorderColor);
+	color: var(--_ui5_toggle_button_selected_negative_text_color);
+	outline-color: var(--_ui5_toggle_button_pressed_focussed_hovered_outline_color);
+}
+
+:host([design="Negative"][pressed][active]),
+:host([design="Negative"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
+	background: var(--sapButton_Reject_Selected_Hover_Background);
+}
+
+
+:host([pressed]),
+:host([pressed]:hover),
+:host([pressed][focused]),
+:host([design="Transparent"][pressed]),
+:host([design="Transparent"][pressed]:hover){
+	background: var(--sapButton_Selected_Background);
+	border-color: var(--sapButton_Selected_BorderColor);
+	color: var(--sapButton_Selected_TextColor);
+	outline-color: var(--_ui5_toggle_button_pressed_focussed_hovered_outline_color);
+}
+:host([design="Emphasized"][pressed]),
+:host([design="Emphasized"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover){
+outline-color: var(--_ui5_toggle_button_emphasized_pressed_focussed_hovered);
+}
+
+:host([design="Transparent"]:hover) {
+	border-color: var(--sapButton_Lite_Hover_BorderColor);
+}
+
+:host([pressed][active]),
+:host([pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
+	background: var(--sapButton_Selected_Hover_Background);
+}
+
+:host([design="Emphasized"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
+	box-shadow: var(--sapContent_Informative_Shadow);
+}
+
+:host([design="Positive"][pressed]:hover){
+	box-shadow: var(--sapContent_Positive_Shadow);
+}
+
+:host([design="Negative"][pressed]:hover){
+	box-shadow: var(--sapContent_Negative_Shadow);
+}

package/src/themes/ToggleButton.ie11.css

@@ -0,0 +1,48 @@
+[ui5-toggle-button][focused] {
+    outline: none;
+}
+
+[ui5-toggle-button][focused] .ui5-button-root {
+    position: relative;
+}
+
+[ui5-toggle-button][focused] .ui5-button-root::after {
+    content: "";
+    position: absolute;
+    border-width: 1px;
+    border-style: dotted;
+    border-color: var(--_ui5_button_focus_color);
+    top: var(--_ui5_button_focus_offset);
+    bottom: var(--_ui5_button_focus_offset);
+    left: var(--_ui5_button_focus_offset);
+    right: var(--_ui5_button_focus_offset);
+}
+
+[ui5-toggle-button][active] .ui5-button-root::after {
+    border-color: var(--sapContent_ContrastFocusColor);
+}
+
+[ui5-toggle-button][design="Positive"][focused] .ui5-button-root::after {
+    border-color: var(--_ui5_button_positive_border_focus_hover_color);
+}
+
+[ui5-toggle-button][design="Positive"][active][focused] .ui5-button-root::after {
+    border-color: var(--sapContent_ContrastFocusColor);
+}
+
+[ui5-toggle-button][design="Negative"][focused] .ui5-button-root::after {
+    border-color: var(--_ui5_button_positive_border_focus_hover_color);
+}
+
+[ui5-toggle-button][design="Negative"][active][focused] .ui5-button-root::after {
+    border-color: var(--sapContent_ContrastFocusColor);
+}
+
+[ui5-toggle-button][design="Emphasized"][focused] .ui5-button-root::after {
+    border-color: var(--sapContent_ContrastFocusColor);
+}
+
+[ui5-toggle-button] [ui5-icon].ui5-button-icon {
+    height: var(--_ui5_button_icon_font_size); /* Center vertically all icons*/
+    top: 0;
+}