@ui5/webcomponents 0.0.0-e7dd012d7 → 0.0.0-ec448881d

package/src/themes/Input.css

@@ -0,0 +1,450 @@
+@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;
+	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: var(--sapField_BackgroundStyle);
+	background-color: var(--_ui5_input_background_color);
+}
+
+:host([focused]) {
+	border-color: var(--_ui5_input_focused_border_color);
+	background-color: var(--sapField_Focus_Background);
+}
+
+.ui5-input-focusable-element {
+	position: relative;
+}
+
+:host([focused]) .ui5-input-focusable-element::after {
+	content: var(--ui5_input_focus_pseudo_element_content);
+	position: absolute;
+	pointer-events: none;
+	z-index: 2;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_input_focus_outline_color);
+	border-radius: var(--_ui5_input_focus_border_radius);
+	top: var(--_ui5_input_focus_offset);
+	bottom: var(--_ui5_input_focus_offset);
+	left: var(--_ui5_input_focus_offset);
+	right: var(--_ui5_input_focus_offset);
+}
+
+.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);
+}
+
+.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;
+	border-radius: var(--_ui5_input_border_radius);
+	overflow: hidden;
+}
+
+: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-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;
+}
+
+:host([disabled]) [inner-input]::-moz-placeholder {
+	visibility: hidden;
+}
+
+:host([readonly]) [inner-input]::-moz-placeholder {
+	visibility: hidden;
+}
+
+:host([disabled]) [inner-input]:-ms-input-placeholder {
+	visibility: hidden;
+}
+
+:host([readonly]) [inner-input]:-ms-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;
+}
+
+[inner-input]::-moz-placeholder {
+	font-weight: normal;
+	font-style: var(--_ui5_input_placeholder_style);
+	color: var(--_ui5_input_placeholder_color);
+	padding-right: 0.125rem;
+}
+
+[inner-input]:-ms-input-placeholder {
+	font-weight: normal;
+	font-style: italic;
+	color: var(--_ui5_input_placeholder_color);
+	padding-right: 0.125rem;
+}
+
+:host([value-state="Error"]) [inner-input]::-webkit-input-placeholder {
+	color: var(--_ui5-input_error_placeholder_color);
+	font-weight: var(--_ui5_input_value_state_error_placeholder_font_weight);
+}
+
+:host([value-state="Error"]) [inner-input]::-moz-placeholder {
+	color: var(--_ui5-input_error_placeholder_color);
+	font-weight: var(--_ui5_input_value_state_error_placeholder_font_weight);
+}
+
+: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;
+	border-radius: var(--_ui5_input_border_radius);
+}
+
+:host([readonly]) {
+	border-color: var(--_ui5_input_readonly_border_color);
+	background: var(--sapField_ReadOnly_BackgroundStyle);
+	background-color: var(--_ui5_input_readonly_background);
+}
+
+:host([value-state="None"]:not([readonly]):hover),
+:host(:not([value-state]):not([readonly]):hover) {
+	border: var(--_ui5_input_hover_border);
+	border-color: var(--_ui5_input_focused_border_color);
+	box-shadow: var(--_ui5_input_hover_box_shadow);
+	background: var(--sapField_Hover_BackgroundStyle);
+	background-color: var(--sapField_Hover_Background);
+}
+:host(:not([value-state]):not([readonly])[focused]:hover),
+:host([value-state="None"]:not([readonly])[focused]:hover) {
+	box-shadow: none;
+}
+
+:host([focused]) .ui5-input-root::before {
+	content: none;
+}
+
+:host(:not([readonly]):not([disabled])[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="Error"]:not([readonly]):not([disabled])) {
+	background: var(--sapField_InvalidBackgroundStyle);
+	background-color: var(--sapField_InvalidBackground);
+	border-color: var(--_ui5_input_value_state_error_border_color);
+}
+
+: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);
+}
+
+:host([value-state="Error"][focused]:not([readonly])) .ui5-input-focusable-element:after {
+	border-color: var(--_ui5_input_focused_value_state_error_focus_outline_color);
+}
+
+: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(--_ui5_input_value_state_error_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]):not([disabled])) {
+	background: var(--sapField_WarningBackgroundStyle);
+	background-color: var(--sapField_WarningBackground);
+	border-color: var(--_ui5_input_value_state_warning_border_color);
+}
+
+: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);
+}
+
+:host([value-state="Warning"][focused]:not([readonly])) .ui5-input-focusable-element:after {
+	border-color: var(--_ui5_input_focused_value_state_warning_focus_outline_color);
+}
+
+: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]):not([disabled])) {
+	background: var(--sapField_SuccessBackgroundStyle);
+	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);
+}
+
+: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);
+}
+
+:host([value-state="Success"][focused]:not([readonly])) .ui5-input-focusable-element:after {
+	border-color: var(--_ui5_input_focused_value_state_success_focus_outline_color);
+}
+
+: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]):not([disabled])) {
+	background: var(--sapField_InformationBackgroundStyle);
+	background-color: var(--sapField_InformationBackground);
+	border-color: var(--_ui5_input_value_state_information_border_color);
+	border-width: var(--_ui5_input_information_border_width);
+}
+
+: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);
+}
+
+: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"]) {
+	align-self: start;
+	padding: var(--_ui5_input_custom_icon_padding);
+}
+
+:host([value-state="Error"]) [input-icon],
+:host([value-state="Warning"]) [input-icon]{
+	padding: var(--_ui5_input_error_warning_icon_padding);
+}
+
+:host([value-state="Information"]) [input-icon] {
+	padding: var(--_ui5_input_information_icon_padding);
+}
+
+:host([value-state="Error"]) ::slotted([input-icon][ui5-icon]),
+:host([value-state="Error"]) ::slotted([ui5-icon][slot="icon"]),
+:host([value-state="Warning"]) ::slotted([ui5-icon][slot="icon"]) {
+	padding: var(--_ui5_input_error_warning_custom_icon_padding);
+}
+
+:host([value-state="Information"]) ::slotted([ui5-icon][slot="icon"]) {
+	padding: var(--_ui5_input_information_custom_icon_padding);
+}
+
+:host([value-state="Error"]) [input-icon]:active,
+:host([value-state="Error"]) [input-icon][pressed] {
+	box-shadow: var(--_ui5_input_error_icon_box_shadow);
+	color: var(--_ui5_input_icon_error_pressed_color);
+}
+
+:host([value-state="Error"]) [input-icon]:not([pressed]):not(:active):hover {
+	box-shadow: var(--_ui5_input_error_icon_box_shadow);
+}
+
+:host([value-state="Warning"]) [input-icon]:active,
+:host([value-state="Warning"]) [input-icon][pressed] {
+	box-shadow: var(--_ui5_input_warning_icon_box_shadow);
+	color: var(--_ui5_input_icon_warning_pressed_color);
+}
+
+:host([value-state="Warning"]) [input-icon]:not([pressed]):not(:active):hover {
+	box-shadow: var(--_ui5_input_warning_icon_box_shadow);
+}
+
+:host([value-state="Information"]) [input-icon]:active,
+:host([value-state="Information"]) [input-icon][pressed] {
+	box-shadow: var(--_ui5_input_information_icon_box_shadow);
+	color: var(--_ui5_input_icon_information_pressed_color);
+}
+
+:host([value-state="Information"]) [input-icon]:not([pressed]):not(:active):hover {
+	box-shadow: var(--_ui5_input_information_icon_box_shadow);
+}
+
+:host([value-state="Success"]) [input-icon]:active,
+:host([value-state="Success"]) [input-icon][pressed] {
+	box-shadow: var(--_ui5_input_success_icon_box_shadow);
+	color: var(--_ui5_input_icon_success_pressed_color);
+}
+
+:host([value-state="Success"]) [input-icon]:not([pressed]):not(:active):hover {
+	box-shadow: var(--_ui5_input_success_icon_box_shadow);
+}
+
+
+
+
+/* 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,41 @@
+/*
+	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);
+	border-inline-start: var(--_ui5_input_icon_border);
+	min-width: 1rem;
+	min-height: 1rem;
+	border-radius: var(--_ui5_input_icon_border_radius);
+}
+
+[input-icon][pressed] {
+	background: var(--_ui5_input_icon_pressed_bg);
+	box-shadow: var(--_ui5_input_icon_box_shadow);
+	border-inline-start: var(--_ui5_select_hover_icon_left_border);
+	color: var(--_ui5_input_icon_pressed_color);
+}
+
+[input-icon]:active {
+	background-color: var(--sapButton_Active_Background);
+	box-shadow: var(--_ui5_input_icon_box_shadow);
+	border-inline-start: var(--_ui5_select_hover_icon_left_border);
+	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-inline-start: var(--_ui5_select_hover_icon_left_border);
+	box-shadow: var(--_ui5_input_icon_box_shadow);
+}

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;
+}

package/src/themes/Label.css

@@ -0,0 +1,79 @@
+:host(:not([hidden])) {
+	display: inline-flex;
+}
+
+:host {
+	max-width: 100%;
+	color: var(--sapContent_LabelColor);
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	font-weight: normal;
+	cursor: text;
+}
+
+.ui5-label-root {
+	width: 100%;
+	cursor: inherit;
+}
+
+:host([wrapping-type="Normal"]) .ui5-label-root {
+	white-space: normal;
+}
+
+:host(:not([wrapping-type="Normal"])) .ui5-label-root {
+	display: inline-block;
+	white-space: nowrap;
+}
+
+bdi {
+	content: "";
+	padding-right: 0.075rem; /*1.2px - fix for last letter clipping issue when style is italic*/
+}
+
+:host(:not([wrapping-type="Normal"])) .ui5-label-text-wrapper {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	display: inline-block;
+	vertical-align: top;
+	max-width: 100%;
+}
+
+:host(:not([wrapping-type="Normal"])[required][show-colon]) .ui5-label-text-wrapper,
+:host(:not([wrapping-type="Normal"])[required][show-colon]) .ui5-label-text-wrapper.ui5-label-text-wrapper-safari {
+	max-width: calc(100% - .8rem);
+}
+
+:host(:not([wrapping-type="Normal"])[required]) .ui5-label-text-wrapper {
+	max-width: calc(100% - .475rem);
+}
+
+:host(:not([wrapping-type="Normal"])[required]) .ui5-label-text-wrapper.ui5-label-text-wrapper-safari {
+	max-width: calc(100% - .425rem);
+}
+
+:host(:not([wrapping-type="Normal"])[show-colon]) .ui5-label-text-wrapper {
+	max-width: calc(100% - 0.125rem);
+}
+
+:host([show-colon]) .ui5-label-required-colon {
+	margin-left: -0.05rem; /*0.8px - fix for last letter clipping issue when style is italic*/
+}
+
+:host([show-colon]) .ui5-label-required-colon:before {
+	content: ":";
+}
+
+:host([required]) .ui5-label-required-colon:after {
+	content:"*";
+	color: var(--sapField_RequiredColor);
+	font-size: 1.25rem;
+	font-weight: bold;
+	position: relative;
+	font-style: normal;
+	vertical-align: middle;
+	line-height: 0;
+}
+
+:host([required][show-colon]) .ui5-label-required-colon:after {
+	margin-inline-start: .125rem;
+}

package/src/themes/Link.css

@@ -0,0 +1,94 @@
+@import "./InvisibleTextStyles.css";
+
+:host(:not([hidden])) {
+	display: inline-flex;
+}
+
+:host {
+	max-width: 100%;
+	color: var(--sapLinkColor);
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	cursor: pointer;
+	outline: none;
+	text-decoration: var(--_ui5_link_text_decoration);
+	text-shadow: var(--sapContent_TextShadow);
+}
+
+:host([disabled]) {
+	pointer-events: none;
+}
+
+:host([disabled]) .ui5-link-root {
+	text-shadow: none;
+	outline: none;
+	cursor: default;
+	pointer-events: none;
+	opacity: var(--sapContent_DisabledOpacity);
+}
+
+:host([design="Emphasized"]) .ui5-link-root {
+	font-family: var(--sapFontBoldFamily);
+}
+
+:host([design="Subtle"]) .ui5-link-root {
+	color: var(--sapLink_SubtleColor);
+	text-decoration: var(--_ui5_link_subtle_text_decoration);
+}
+
+:host([design="Subtle"]) .ui5-link-root:focus {
+	color: var(--sapLinkColor);
+}
+
+:host([wrapping-type="Normal"]) .ui5-link-root {
+	white-space: normal;
+	word-wrap: break-word;
+}
+
+.ui5-link-root {
+	width: 100%;
+	display: inline-block;
+	position: relative;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	word-wrap: normal;
+	outline: none;
+	text-decoration: inherit;
+}
+
+:host(:active) .ui5-link-root {
+	color: var(--sapLink_Active_Color);
+	text-decoration: var(--_ui5_link_active_text_decoration);
+}
+
+.ui5-link-root:visited {
+	color: var(--sapLink_Visited_Color);
+}
+
+:host .ui5-link-root {
+	border: var(--_ui5_link_border);
+	border-radius: var(--_ui5_link_focus_border-radius);
+}
+
+:host([focused]) .ui5-link-root,
+:host([design="Subtle"][focused]) .ui5-link-root {
+	background-color: var(--_ui5_link_focus_background_color);
+	color:  var(--_ui5_link_focus_color);
+	border: var(--_ui5_link_border_focus);
+	border-radius: var(--_ui5_link_focus_border-radius);
+	text-decoration: var(--_ui5_link_focus_text_decoration);
+	text-shadow: none;
+}
+
+:host(:hover),
+:host(:hover) .ui5-link-root {
+	color: var(--sapLink_Hover_Color);
+	text-decoration: var(--_ui5_link_hover_text_decoration);
+}
+
+:host([focused]:hover),
+:host([focused]:hover) .ui5-link-root {
+	color: var(--_ui5_link_focused_hover_text_color);
+	text-decoration: var(--_ui5_link_focused_hover_text_decoration);
+}