@ui5/webcomponents 1.0.0 → 1.0.1

package/src/themes/Input.css

@@ -0,0 +1,392 @@
+@import "./InvisibleTextStyles.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-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-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-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);
+}
+
+:host([value-state="Error"]) [inner-input] {
+	font-weight: var(--_ui5_input_error_font_weight);
+}
+
+: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;
+}

package/src/themes/Label.css

@@ -0,0 +1,85 @@
+: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-right: 0;
+	margin-left: .125rem;
+}
+
+:host([required][show-colon]) [dir="rtl"] .ui5-label-required-colon:after {
+	margin-right: .125rem;
+	margin-left: 0;
+}

package/src/themes/Link.css

@@ -0,0 +1,77 @@
+@import "./InvisibleTextStyles.css";
+
+:host(:not([hidden])) {
+	display: inline-flex;
+}
+
+:host {
+	max-width: 100%;
+	color: var(--sapLinkColor);
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	cursor: pointer;
+	outline: none;
+	text-decoration: var(--_ui5_link_text_decoration);
+}
+
+:host(:hover) {
+	text-decoration: var(--_ui5_link_hover_text_decoration);
+}
+
+:host([disabled]) {
+	pointer-events: none;
+}
+
+:host([disabled]) .ui5-link-root {
+	text-shadow: none;
+	outline: none;
+	cursor: default;
+	pointer-events: none;
+	opacity: var(--_ui5_link_opacity);
+}
+
+:host([design="Emphasized"]) .ui5-link-root {
+	font-weight: bold;
+}
+
+:host([design="Subtle"]) .ui5-link-root,
+:host([design="Subtle"]) .ui5-link-root:visited {
+	color: var(--sapLink_SubtleColor);
+}
+
+: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;
+}
+
+.ui5-link-root,
+.ui5-link-root:visited,
+.ui5-link-root:active {
+	color: currentColor;
+}
+
+:host .ui5-link-root {
+	border: var(--_ui5_link_border);
+	border-radius: var(--_ui5_link_focus_border-radius);
+}
+
+:host([focused]) .ui5-link-root {
+	border: var(--_ui5_link_border_focus);
+	text-decoration: underline;
+}