@ui5/webcomponents 1.0.0 → 1.1.1

package/src/themes/Token.css

@@ -0,0 +1,117 @@
+:host {
+	display: inline-block;
+	background: var(--_ui5_token_background);
+	border-width: 1px;
+	border-style: solid;
+	border-color: var(--sapButton_TokenBorderColor);
+	border-radius: var(--_ui5_token_border_radius);
+	color: var(--_ui5_token_text_color);
+	height: var(--_ui5_token_height);
+	box-sizing: border-box;
+	margin-top: var(--_ui5_token_top_margin);
+	margin-bottom: var(--_ui5_token_bottom_margin);
+}
+
+:host([overflows]) {
+	display: none;
+}
+
+:host(:not([readonly]):hover) {
+	background: var(--_ui5_token_hover_background);
+	border-color: var(--_ui5_token_hover_border_color);
+	box-shadow: var(--sapContent_Interaction_Shadow);
+}
+
+:host([selected]:not([readonly]):not([focused])) {
+	color: var(--sapButton_Selected_TextColor);
+	background: var(--sapButton_Selected_Background);
+	border: 1px solid var(--sapButton_Selected_BorderColor);
+	box-shadow: var(--_ui5_token_selected_box_shadow);
+}
+
+:host([selected]:not([readonly]):hover) {
+	background: var(--_ui5_token_selected_hover_background);
+	border-color: var(--_ui5_token_selected_hover_border_color);
+	box-shadow: var(--sapContent_Selected_Shadow);
+}
+
+:host([readonly]) {
+	background: var(--_ui5_token_readonly_background);
+	color: var(--sapContent_ForegroundTextColor);
+}
+
+:host([readonly]) .ui5-token--wrapper {
+	padding-right: 0.3125rem;
+}
+
+:host([focused]:not([selected]):not([readonly]):not(:hover)) {
+	border: var(--_ui5_token_focused_border);
+}
+
+:host([focused][selected]:not([readonly]):hover) {
+	box-shadow: var(--sapContent_Selected_Shadow);
+	border: var(--_ui5_token_focused_selected_border);
+}
+
+:host([focused]:not([selected]):not([readonly]):hover) {
+	box-shadow: var(--sapContent_Interaction_Shadow);
+	border: var(--_ui5_token_focused_selected_border);
+}
+
+:host([selected]) .ui5-token--wrapper:focus {
+	outline: var(--_ui5_token_selected_focus_outline);
+}
+
+:host([focused][selected]:not([readonly])) {
+	background: var(--sapButton_Selected_Background);
+	color: var(--sapButton_Selected_TextColor);
+	border: var(--_ui5_token_focused_selected_border);
+}
+
+.ui5-token--wrapper {
+	display: flex;
+	align-items: center;
+	height: 100%;
+	width: 100%;
+	cursor: default;
+	padding: 0.25rem 0;
+	padding-left: 0.3125rem;
+	box-sizing: border-box;
+	font-size: var(--sapFontSize);
+	font-family: "72override", var(--sapFontFamily);
+	user-select: none;
+}
+
+.ui5-token--wrapper:focus {
+	outline-offset: -2px;
+	outline: var(--_ui5_token_focus_outline);
+}
+
+.ui5-token--text {
+	white-space: nowrap;
+}
+
+.ui5-token--icon {
+	display: flex;
+}
+
+:host([selected]) .ui5-token--icon > [ui5-icon],
+:host([selected]) ::slotted([ui5-icon]) {
+	color: var(--sapButton_Selected_TextColor);
+}
+
+.ui5-token--icon > [ui5-icon],
+::slotted([ui5-icon]) {
+	color: inherit;
+	cursor: pointer;
+	width: var(--_ui5_token_icon_size);
+	height: var(--_ui5_token_icon_size);
+	padding: var(--_ui5_token_icon_padding);
+	color: var(--_ui5_token_icon_color);
+}
+
+/* RTL */
+:host(:not([readonly])) .ui5-token--wrapper[dir="rtl"] {
+	padding-right: var(--_ui5_token_wrapper_right_padding);
+	padding-left: var(--_ui5_token_wrapper_left_padding);
+}

package/src/themes/Tokenizer.css

@@ -0,0 +1,84 @@
+:host {
+	display: inline-block;
+	box-sizing: border-box;
+	border: 1px solid black;
+	height: 2.25rem;
+}
+
+.ui5-hidden-text {
+	width: 1px;
+	overflow: hidden;
+	color: transparent;
+}
+
+.ui5-tokenizer-root {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	padding: var(--_ui5_tokenizer_root_padding);
+	overflow-x: scroll;
+	box-sizing: border-box;
+	font-family: "72override", var(--sapFontFamily);
+}
+
+.ui5-tokenizer-no-padding {
+	padding: 0;
+}
+
+.ui5-tokenizer-root.ui5-tokenizer-nmore--wrapper {
+	overflow-x: hidden;
+}
+
+.ui5-tokenizer--token--wrapper {
+	display: inline-flex;
+	align-items: center;
+	box-sizing: border-box;
+	height: 100%;
+}
+
+:host([expanded]) .ui5-tokenizer--content {
+	display: inline-block;
+	white-space: nowrap;
+}
+
+.ui5-tokenizer--content {
+	display: flex;
+	flex-wrap: nowrap;
+	align-items: center;
+	overflow: auto;
+}
+
+.ui5-tokenizer--content.ui5-tokenizer-nmore--content {
+	overflow: hidden;
+}
+
+.ui5-tokenizer-more-text {
+	display: inline-block;
+	margin-left: .25rem;
+	cursor: pointer;
+	white-space: nowrap;
+	font-size: var(--sapFontSize);
+	font-weight: var(--_ui5_tokenizer_n_more_indicator_font_weight);
+	color: var(--_ui5_tokenizer_n_more_indicator_color);
+}
+
+:host([expanded]) .ui5-tokenizer--content {
+	overflow: hidden;
+	justify-content: flex-end;
+}
+
+::slotted([ui5-token]) {
+	margin-left: .25rem;
+}
+
+/* RTL */
+
+[dir="rtl"] .ui5-tokenizer-more-text {
+	margin-right: .25rem;
+	margin-left: 0;
+}
+
+[dir=rtl] ::slotted([ui5-token]) {
+	margin-right: .25rem;
+	margin-left: 0;
+}

package/src/themes/Tree.css

@@ -0,0 +1,11 @@
+@import "./InvisibleTextStyles.css";
+
+:host(:not([hidden])) {
+	display: block;
+	width: 100%;
+}
+
+.ui5-tree-root {
+	height: 100%;
+	width: 100%;
+}

package/src/themes/TreeListItem.css

@@ -0,0 +1,107 @@
+@import "./InvisibleTextStyles.css";
+:host(:not([hidden])) {
+	display: block;
+	position: relative;
+}
+
+:host([_minimal]) .ui5-li-tree-toggle-box {
+	width: 0;
+	min-width: 0;
+}
+
+:host([_minimal]) .ui5-li-icon {
+	padding: 0;
+}
+
+:host([_minimal]) .ui5-li-content {
+	justify-content: center;
+}
+
+:host([_minimal]) .ui5-li-root-tree {
+	padding: 0;
+}
+
+:host([_minimal][show-toggle-button])::after {
+	content: "";
+	width: 0;
+	height: 0;
+	border-left: 0.375rem solid transparent;
+	border-bottom: .375rem solid var(--sapContent_IconColor);
+	position: absolute;
+	right: 0.1875rem;
+	bottom: 0.125rem;
+}
+
+:host([_minimal]) .ui5-li-tree-text-wrapper {
+	display: none;
+}
+
+.ui5-li-root-tree {
+	padding-left: 0;
+}
+
+:host(:not([level="1"])) {
+	border-color: var(--sapList_AlternatingBackground);
+}
+
+:host([_toggle-button-end][selected]:not([level="1"])) {
+	border-bottom: var(--ui5-listitem-selected-border-bottom);
+}
+
+:host([_toggle-button-end]:not([selected])) .ui5-li-root-tree:hover, :host([_mode]:not([_mode="None"]):not([_mode="Delete"]):not([selected])) .ui5-li-root-tree:hover {
+	background: var(--sapList_Hover_Background);
+	cursor: pointer;
+}
+
+:host(:not([level="1"]):not([selected])) .ui5-li-root-tree {
+	background: var(--sapList_AlternatingBackground);
+}
+
+:host([_toggle-button-end]:not([level="1"])) .ui5-li-root-tree {
+	background: var(--ui5-listitem-background-color);
+}
+
+:host([_toggle-button-end][selected]:not([level="1"])) .ui5-li-root-tree {
+	background: var(--sapList_SelectionBackgroundColor);
+}
+
+:host([_mode]:not([_mode="None"]):not([_mode="Delete"])[selected]) .ui5-li-root-tree:hover {
+	background-color: var(--sapList_Hover_SelectionBackground);
+	cursor: pointer;
+}
+
+.ui5-li-tree-toggle-box {
+	min-width: var(--_ui5-tree-toggle-box-width);
+	min-height: var(--_ui5-tree-toggle-box-height);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+
+.ui5-li-tree-toggle-icon {
+	width: var(--_ui5-tree-toggle-icon-size);
+	height: var(--_ui5-tree-toggle-icon-size);
+	color: var(--sapContent_IconColor);
+	cursor: pointer;
+}
+
+:host([actionable]) .ui5-li-tree-toggle-icon {
+	color: var(--sapButton_TextColor);
+}
+
+:host([active][actionable]) .ui5-li-tree-toggle-icon {
+	color: var(--sapList_Active_TextColor);
+}
+
+.ui5-li-tree-text-wrapper {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+}
+
+/* RTL */
+.ui5-li-root-tree[dir="rtl"] {
+	padding-left: 1rem;
+	padding-right: 0;
+}

package/src/themes/ValueStateMessage.css

@@ -0,0 +1,76 @@
+.ui5-valuestatemessage-popover {
+	box-shadow: none;
+}
+
+.ui5-input-value-state-message-icon {
+	width: .875rem;
+	height: .875rem;
+	display: var(--_ui5_input_value_state_icon_display);
+	position: absolute;
+	padding-right: 0.5rem;
+}
+
+.ui5-valuestatemessage-root .ui5-input-value-state-message-icon {
+	left: 0.5rem;
+}
+
+[ui5-responsive-popover] .ui5-valuestatemessage-header .ui5-input-value-state-message-icon {
+	left: 1rem;
+}
+
+.ui5-input-value-state-message-icon[name="error"] {
+	color: var(--sapNegativeElementColor);
+}
+
+.ui5-input-value-state-message-icon[name="alert"] {
+	color: var(--sapCriticalElementColor);
+}
+
+.ui5-input-value-state-message-icon[name="success"] {
+	color: var(--sapPositiveElementColor);
+}
+
+.ui5-input-value-state-message-icon[name="information"] {
+	color: var(--sapInformativeElementColor);
+}
+
+.ui5-valuestatemessage-root {
+	box-sizing: border-box;
+	display: inline-block;
+	color: var(--sapTextColor);
+	font-size: var(--sapFontSmallSize);
+	font-family: "72override", var(--sapFontFamily);
+	height: auto;
+	padding: var(--_ui5_value_state_message_padding);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	min-width: 6.25rem;
+	border: var(--_ui5_value_state_message_border);
+}
+
+[ui5-responsive-popover] .ui5-valuestatemessage-header {
+	min-height: 2rem;
+	padding: var(--_ui5_value_state_header_padding);
+}
+
+.ui5-valuestatemessage--success {
+	background: var(--sapSuccessBackground);
+}
+
+.ui5-valuestatemessage--warning {
+	background: var(--sapWarningBackground);
+}
+
+.ui5-valuestatemessage--error {
+	background: var(--sapErrorBackground);
+}
+
+.ui5-valuestatemessage--information {
+	background: var(--sapInformationBackground);
+}
+
+.ui5-responsive-popover-header[focused], .ui5-responsive-popover-header:focus {
+	outline-offset: -0.125rem;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	border-radius: var(--_ui5_value_state_message_focus_border_radius);
+}

package/src/themes/WheelSlider.css

@@ -0,0 +1,203 @@
+.ui5-wheelslider-root {
+	overflow: hidden;
+	height: 100%;
+	vertical-align: middle;
+	text-align: center;
+	box-sizing: border-box;
+	font-family: "72override", var(--sapFontFamily);
+	justify-content: space-between;
+	flex-direction: column;
+	display: inline-flex;
+	width: var(--_ui5_wheelslider_item_width);
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-label {
+	box-sizing: border-box;
+	height: 2rem;
+	line-height: 2rem;
+	width: var(--_ui5_wheelslider_item_width);
+	font-size: var(--sapFontSmallSize);
+	color: var(--_ui5_wheelslider_label_text_color);
+	text-align: center;
+	vertical-align: middle;
+	visibility: hidden;
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-arrow {
+	visibility: hidden;
+	box-sizing: border-box;
+	height: 1.5rem;
+	user-select: none;
+	outline: none
+}
+
+:host([expanded]) .ui5-wheelslider-arrow {
+	visibility: var(--_ui5_wheelslider_arrows_visibility);
+	box-sizing: border-box;
+	border-color: transparent;
+	cursor: pointer;
+}
+
+:host([expanded]) .ui5-wheelslider-arrow:hover {
+	visibility: var(--_ui5_wheelslider_arrows_visibility);
+	box-sizing: border-box;
+	border-color: inherit;
+	cursor: pointer;
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-inner {
+	position: relative;
+	overflow: hidden;
+	height: 100%;
+	box-sizing: border-box;
+	user-select: none;
+	list-style: none;
+	margin-top: 0rem;
+}
+
+:host([expanded]) .ui5-wheelslider-inner {
+	margin-top: 0;
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-inner .ui5-wheelslider-item {
+	height: var(--_ui5_wheelslider_item_height);
+	line-height: var(--_ui5_wheelslider_item_height);
+	width: var(--_ui5_wheelslider_item_width);
+	box-sizing: border-box;
+	background: var(--_ui5_wheelslider_selected_item_background_color);
+	border: 0.625px solid var(--_ui5_wheelslider_item_border_color);
+	font-size: var(--_ui5_wheelslider_item_text_size);
+	color: var(--_ui5_wheelslider_collapsed_item_text_color);
+	text-align: center;
+	border-radius: var(--_ui_wheelslider_item_border_radius);
+	cursor: pointer;
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-inner .ui5-wheelslider-item:hover {
+	background: var(--_ui_wheelslider_item_hover_color);
+	border-color: var(--_ui5_wheelslider_item_hovered_border_color);
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-inner .ui5-wheelslider-item:focus {
+	outline: 1px dotted black;
+	outline-offset: -3px;
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-inner .ui5-wheelslider-selection-frame {
+	width: var(--_ui5_wheelslider_item_width);
+	height: var(--_ui5_wheelslider_item_height);
+	position: absolute;
+	box-sizing: border-box;
+	visibility: hidden;
+	z-index: 1;
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-inner .ui5-wheelslider-wrapper > ul {
+	transition: all 400ms;
+	margin: 0;
+	padding: 0;
+	position: absolute;
+	top: var(--_ui5_wheelslider_selection_frame_margin_top);
+	height: 3000px;
+	cursor: pointer;
+	list-style-type: none;
+}
+
+.ui5-wheelslider-root.ui5-phone .ui5-wheelslider-inner .ui5-wheelslider-wrapper > ul {
+	top: var(--_ui5_wheelslider_mobile_selection_frame_margin_top);
+}
+
+:host([expanded]) .ui5-wheelslider-inner .ui5-wheelslider-wrapper > ul {
+	list-style-type: none;
+	top: 0;
+	padding-top: calc(var(--_ui5_wheelslider_item_height) * 2);
+}
+
+:host([expanded]) .ui5-wheelslider-root.ui5-phone .ui5-wheelslider-inner .ui5-wheelslider-wrapper > ul {
+	list-style-type: none;
+	top: 0;
+	padding-top: calc(var(--_ui5_wheelslider_item_height) * 4);
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-inner .ui5-wheelslider-wrapper {
+	height: var(--_ui5_wheelslider_height);
+	position: relative;
+	overflow: hidden;
+	outline: none;
+}
+
+.ui5-wheelslider-root.ui5-phone .ui5-wheelslider-inner .ui5-wheelslider-wrapper {
+	height: var(--_ui5_wheelslider_mobile_height);
+}
+
+:host([expanded]) {
+	height: 100%;
+	cursor: default;
+	margin: 0;
+	justify-content: space-between;
+	flex-direction: column;
+	display: inline-flex;
+}
+
+:host([expanded]) .ui5-wheelslider-label {
+	display: block;
+	visibility: visible;
+}
+
+.ui5-wheelslider-root .ui5-wheelslider-inner {
+	max-height: 100%;
+	height: var(--_ui5_wheelslider_height);
+}
+
+.ui5-wheelslider-root.ui5-phone .ui5-wheelslider-inner {
+	height: var(--_ui5_wheelslider_mobile_height);
+}
+
+:host([expanded]) .ui5-wheelslider-inner .ui5-wheelslider-item {
+	background: var(--_ui5_wheelslider_item_background_color);
+	color: var(--_ui5_wheelslider_item_text_color);
+	border: 1px solid var(--_ui5_wheelslider_item_expanded_border_color);
+	border-radius: var(--_ui_wheelslider_item_border_radius);
+	offset-position: auto;
+	cursor: auto;
+}
+
+:host([expanded]) .ui5-wheelslider-inner .ui5-wheelslider-item:hover {
+	background: var(--_ui_wheelslider_item_expanded_hover_color);
+	border-color: var(--_ui5_wheelslider_item_hovered_border_color);
+}
+
+:host([expanded]) .ui5-wheelslider-inner .ui5-wheelslider-item:active {
+	background: var(--_ui5_wheelslider_active_item_background_color);
+	color: var(--_ui5_wheelslider_active_item_text_color);
+}
+
+:host([expanded]) .ui5-wheelslider-inner .ui5-wheelslider-item:focus {
+	outline: 1px dotted black;
+	outline-offset: -3px;
+}
+
+:host([expanded]) .ui5-wheelslider-inner .ui5-wheelslider-selection-frame {
+	visibility: visible;
+	-webkit-box-shadow: inset 0px 0px 0px 2px var(--_ui5_wheelslider_selection_frame_color);
+	-moz-box-shadow: inset 0px 0px 0px 2px var(--_ui5_wheelslider_selection_frame_color);
+	box-shadow: inset 0px 0px 0px 2px var(--_ui5_wheelslider_selection_frame_color);
+	border-radius: var(--_ui_wheelslider_item_border_radius);
+	margin-top: var(--_ui5_wheelslider_selection_frame_margin_top);
+}
+
+:host([expanded]) .ui5-wheelslider-root.ui5-phone .ui5-wheelslider-inner .ui5-wheelslider-selection-frame {
+	margin-top: var(--_ui5_wheelslider_mobile_selection_frame_margin_top);
+}
+
+:host([expanded]) .ui5-wheelslider-inner .ui5-wheelslider-selection-frame:hover + .ui5-wheelslider-wrapper ul > li.ui5-wheelslider-item[aria-selected="true"] {
+	background: var(--_ui_wheelslider_item_expanded_hover_color);
+}
+
+:host([expanded]) .ui5-wheelslider-inner .ui5-wheelslider-selection-frame:active + ul > li.ui5-wheelslider-item[aria-selected="true"] {
+	background: var(--_ui5_wheelslider_selected_item_background_color);
+	color: lightgray;
+}
+.ui5-wheelslider-root:focus {
+	outline: none;
+}

package/src/themes/YearPicker.css

@@ -0,0 +1,86 @@
+:host(:not([hidden])) {
+	display: block;
+}
+
+:host {
+	width: 100%;
+	height: 100%;
+}
+
+.ui5-yp-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-yp-interval-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+}
+
+.ui5-yp-item {
+	display: flex;
+	margin: var(--_ui5_yearpicker_item_margin);
+	width: calc(25% - 0.125rem);
+	height: var(--_ui5_year_picker_item_height);
+	color: var(--sapTextColor);
+	background-color: var(--sapLegend_WorkingBackground);
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	cursor: default;
+	outline: none;
+	position: relative;
+	border: var(--_ui5_yearpicker_item_border);
+	border-radius: var(--_ui5_yearpicker_item_border_radius);
+}
+
+.ui5-yp-item:hover {
+	background-color: var(--sapList_Hover_Background);
+}
+
+.ui5-yp-item.ui5-yp-item--selected {
+	background-color: var(--_ui5_yearpicker_item_selected_background_color);
+	color: var(--_ui5_yearpicker_item_selected_text_color);
+	box-shadow: var(--_ui5_yearpicker_item_selected_box_shadow);
+	font-weight: bold;
+}
+
+.ui5-yp-item.ui5-yp-item--disabled {
+	pointer-events: none;
+	opacity: 0.5;
+}
+
+.ui5-yp-item.ui5-yp-item--selected:focus {
+	background-color: var(--_ui5_yearpicker_item_selected_focus);
+}
+
+.ui5-yp-item.ui5-yp-item--selected:focus::after {
+	border-color: var(--sapContent_ContrastFocusColor);
+}
+
+.ui5-yp-item.ui5-yp-item--selected:hover {
+	background-color: var(--_ui5_yearpicker_item_selected_hover_color);
+}
+
+.ui5-yp-item:focus::after {
+	content: "";
+	position: absolute;
+	width: var(--_ui5_yearpicker_item_focus_after_width);
+	height: var(--_ui5_yearpicker_item_focus_after_height);
+	border: var(--_ui5_yearpicker_item_focus_after_border);
+	top: var(--_ui5_yearpicker_item_focus_after_offset);
+	left: var(--_ui5_yearpicker_item_focus_after_offset);
+	border-radius: var(--_ui5_yearpicker_item_focus_after_border_radius);
+	outline: var(--_ui5_yearpicker_item_focus_after_outline);
+}