@ui5/webcomponents 2.13.0-rc.0 → 2.13.0-rc.2

package/src/themes/FileUploader.css

@@ -1,66 +1,183 @@
 @import "./FormComponents.css";
+@import "./Input.css";
+@import "./InputIcon.css";
+@import "./ValueStateVariables.css";
 
 :host {
 	display: inline-block;
 }
 
-.ui5-file-uploader-root {
-	position: relative;
+:host([hide-input]) {
+	width: max-content;
+	height: max-content;
 }
 
-.ui5-file-uploader-root input[type=file] {
-	opacity: 0;
+:host([hide-input]) .ui5-file-uploader-form {
 	position: absolute;
 	top: 0;
 	left: 0;
-	height: 100%;
 	width: 100%;
-	font-size: 0;
+	height: 100%;
+	display: block;
 }
 
-.ui5-file-uploader-root input[type=file]:not([disabled]) {
-	cursor: pointer;
+.ui5-file-uploader-root,
+.ui5-file-uploader-form {
+	position: relative;
+	width: inherit;
+	height: inherit;
+}
+
+.ui5-file-uploader-root .ui5-file-uploader-native-input {
+	position: relative;
+	display: block;
+	width: inherit;
+	height: inherit;
+	opacity: 0;
+	font-size: 0;
 }
 
-.ui5-file-uploader-mask {
+.ui5-file-uploader-display-container {
+	position: absolute;
+	top: 0;
+	inset-inline-start: 0;
+	width: inherit;
+	height: inherit;
 	display: flex;
+	column-gap: 0.5rem;
 	align-items: center;
 }
 
-.ui5-file-uploader-mask [ui5-input] {
-	margin-right: 0.25rem;
+.ui5-file-uploader-display-elements {
+	height: inherit;
+	flex: 1;
+	display: flex;
+	position: relative;
+	box-sizing: border-box;
 }
 
-:host([value-state="None"]:not([disabled]):hover) [ui5-input],
-:host(:not([value-state]):not([disabled]):hover) [ui5-input] {
-	border: var(--_ui5_file_uploader_hover_border);
-	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--sapField_Hover_Shadow);
+.ui5-file-uploader-tokenizer,
+.ui5-file-uploader-display-input {
+	position: absolute;
+	top: 0;
+	inset-inline-start: 0;
+	height: 100%;
+	border: none;
+	outline: none;
+	cursor: pointer;
 }
 
-:host([value-state="Negative"]:not([disabled]):hover) [ui5-input] {
-	background-color: var(--_ui5_file_uploader_value_state_error_hover_background_color);
-	box-shadow: var(--sapField_Hover_InvalidShadow);
+.ui5-file-uploader-clear-icon,
+.ui5-file-uploader-value-help-icon {
+	position: absolute;
+	cursor: pointer;
 }
 
-:host([value-state="Critical"]:not([disabled]):hover) [ui5-input] {
-	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--sapField_Hover_WarningShadow);
+.ui5-file-uploader-tokenizer {
+	max-width: var(--_ui5_file_uploader_tokenizer_width);
+}
+
+.ui5-file-uploader-display-input {
+	width: var(--_ui5_file_uploader_display_input_width);
+}
+
+.ui5-file-uploader-clear-icon {
+	inset-inline-end: var(--_ui5_input_icon_width);
+}
+
+.ui5-file-uploader-value-help-icon {
+	inset-inline-end: 0rem;
+}
+
+/* Input styles overrides */
+:host(:not([readonly])),
+:host([readonly][disabled]),
+:host([focused]:not([opened])),
+:host([value-state="None"]:not([readonly]):hover),
+:host([value-state="Negative"][focused]:not([opened]):not([readonly])),
+:host([value-state="Negative"]:not([readonly]):not([disabled])),
+:host([value-state="Negative"]:not([readonly])[focused][opened]:hover),
+:host([value-state="Negative"]:not([readonly]):not([focused]):hover),
+:host([value-state="Critical"][focused]:not([opened]):not([readonly])),
+:host([value-state="Critical"]:not([readonly]):not([disabled])),
+:host([value-state="Critical"]:not([readonly])[focused][opened]:hover),
+:host([value-state="Critical"]:not([readonly]):not([focused]):hover),
+:host([value-state="Positive"][focused]:not([opened]):not([readonly])),
+:host([value-state="Positive"]:not([readonly]):not([disabled])),
+:host([value-state="Positive"]:not([readonly])[focused][opened]:hover),
+:host([value-state="Positive"]:not([readonly]):not([focused]):hover),
+:host([value-state="Information"][focused]:not([opened]):not([readonly])),
+:host([value-state="Information"]:not([readonly]):not([disabled])),
+:host([value-state="Information"]:not([readonly])[focused][opened]:hover),
+:host([value-state="Information"]:not([readonly]):not([focused]):hover),
+:host(:not([value-state]):not([readonly]):hover) {
+	box-shadow: none;
+	background: none;
+	border: none;
 }
 
-:host([value-state="Positive"]:not([disabled]):hover) [ui5-input] {
+:host(:not([readonly])) .ui5-file-uploader-display-elements,
+:host([readonly][disabled]) .ui5-file-uploader-display-elements {
+	box-shadow: var(--sapField_Shadow);
+	border: var(--_ui5-input-border);
+	border-radius: var(--_ui5_input_border_radius);
+	background: var(--sapField_BackgroundStyle);
+	background-color: var(--_ui5_input_background_color);
+}
+
+/* Value state styles */
+:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-file-uploader-display-elements,
+:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-file-uploader-display-elements,
+:host([value-state="Positive"]:not([readonly]):not([disabled])) .ui5-file-uploader-display-elements,
+:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-file-uploader-display-elements {
+	box-shadow: var(--ui5_value_state-box-shadow);
+	background: var(--ui5_value_state-background);
+	background-color: var(--ui5_value_state-background-color);
+}
+
+/* Value state hover styles */
+:host([value-state="None"]:not([readonly]):hover) .ui5-file-uploader-display-elements,
+:host(:not([value-state]):not([readonly]):hover) .ui5-file-uploader-display-elements {
+	box-shadow: var(--sapField_Hover_Shadow);
+	background: var(--sapField_Hover_BackgroundStyle);
 	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--sapField_Hover_SuccessShadow);
 }
 
-:host([value-state="Information"]:not([disabled]):hover) [ui5-input] {
+:host([value-state="Negative"]:not([readonly]):not([focused]):hover) .ui5-file-uploader-display-elements,
+:host([value-state="Negative"]:not([readonly])[focused][opened]:hover) .ui5-file-uploader-display-elements {
+	background-color: var(--_ui5_input_value_state_error_hover_background);
+	box-shadow: var(--sapField_Hover_InvalidShadow);
+}
+
+:host([value-state="Negative"][focused]:not([opened]):not([readonly])) .ui5-file-uploader-display-elements,
+:host([value-state="Positive"]:not([readonly]):not([focused]):hover) .ui5-file-uploader-display-elements,
+:host([value-state="Positive"]:not([readonly])[focused][opened]:hover) .ui5-file-uploader-display-elements,
+:host([value-state="Positive"][focused]:not([opened]):not([readonly])) .ui5-file-uploader-display-elements,
+:host([value-state="Critical"]:not([readonly]):not([focused]):hover) .ui5-file-uploader-display-elements,
+:host([value-state="Critical"]:not([readonly])[focused][opened]:hover) .ui5-file-uploader-display-elements,
+:host([value-state="Critical"][focused]:not([opened]):not([readonly])) .ui5-file-uploader-display-elements,
+:host([value-state="Information"]:not([readonly]):not([focused]):hover) .ui5-file-uploader-display-elements,
+:host([value-state="Information"]:not([readonly])[focused][opened]:hover) .ui5-file-uploader-display-elements,
+:host([value-state="Information"][focused]:not([opened]):not([readonly])) .ui5-file-uploader-display-elements{
 	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--sapField_Hover_InformationShadow);
 }
 
-: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;
+/* Value state focus styles */
+:host([focused][hide-input]) .ui5-file-uploader-root:has(.ui5-file-uploader-native-input:focus)::after,
+:host([focused]) .ui5-file-uploader-root:has(.ui5-file-uploader-native-input:focus) .ui5-file-uploader-display-elements::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);
+}
+
+:host([focused]:not([opened]):not([readonly]):not([hide-input]))
+	.ui5-file-uploader-root:has(.ui5-file-uploader-native-input:focus) .ui5-file-uploader-display-elements::after {
+	border-color: var(--ui5_value_state-focus-outline, var(--_ui5_input_focus_outline_color));
 }

package/src/themes/MenuItem.css

@@ -49,10 +49,6 @@
 	background-color: var(--sapList_Hover_Background);
 }
 
-:host(:not([is-phone]))::part(native-li) {
-	padding: var(--_ui5_menu_item_padding);
-}
-
 :host::part(additional-text) {
 	margin: unset;
 	margin-inline-start: 1rem;
@@ -84,6 +80,7 @@
 }
 
 :host(:not([is-phone]))::part(native-li) {
+	user-select: none;
 	padding: var(--_ui5_menu_item_padding);
 }
 

package/src/themes/Table.css

@@ -17,8 +17,6 @@
 :host([overflow-mode="Scroll"]) #table {
 	overflow-x: auto;
 	height: 100%;
-	height: -webkit-fill-available;
-	height: fill-available;
 }
 
 #rows, #spacer {

package/src/themes/ToolbarButton.css

@@ -0,0 +1,7 @@
+.ui5-tb-popover-item.ui5-tb-button::part(button) {
+	justify-content: start;
+}
+
+.ui5-tb-popover-item.ui5-tb-button[icon-only]::part(button) {
+	padding: 0 var(--_ui5_button_base_padding);
+}

package/src/themes/ValueStateMessage.css

@@ -74,7 +74,7 @@
 	background: var(--sapInformationBackground);
 }
 
-.ui5-responsive-popover-header.ui5-responsive-popover-header--focused, .ui5-responsive-popover-header:focus {
+.ui5-responsive-popover-header:focus {
 	outline-offset: var(--_ui5_value_state_header_offset);
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }

package/src/themes/ValueStateVariables.css

@@ -0,0 +1,27 @@
+:host([value-state="Negative"]:not([readonly]):not([disabled])) {
+	--ui5_value_state-background: var(--sapField_InvalidBackgroundStyle);
+	--ui5_value_state-background-color: var(--sapField_InvalidBackground);
+	--ui5_value_state-box-shadow: var(--sapField_InvalidShadow);
+	--ui5_value_state-focus-outline: var(--_ui5_input_focused_value_state_error_focus_outline_color);
+}
+
+:host([value-state="Critical"]:not([readonly]):not([disabled])) {
+	--ui5_value_state-background: var(--sapField_WarningBackgroundStyle);
+	--ui5_value_state-background-color: var(--sapField_WarningBackground);
+	--ui5_value_state-box-shadow: var(--sapField_WarningShadow);
+	--ui5_value_state-focus-outline: var(--_ui5_input_focused_value_state_warning_focus_outline_color);
+}
+
+:host([value-state="Positive"]:not([readonly]):not([disabled])) {
+	--ui5_value_state-background: var(--sapField_SuccessBackgroundStyle);
+	--ui5_value_state-background-color: var(--sapField_SuccessBackground);
+	--ui5_value_state-box-shadow: var(--sapField_SuccessShadow);
+	--ui5_value_state-focus-outline: var(--_ui5_input_focused_value_state_success_focus_outline_color);
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled])) {
+	--ui5_value_state-background: var(--sapField_InformationBackgroundStyle);
+	--ui5_value_state-background-color: var(--sapField_InformationBackground);
+	--ui5_value_state-box-shadow: var(--sapField_InformationShadow);
+	--ui5_value_state-focus-outline: var(--_ui5_input_focused_value_state_information_focus_outline_color);
+}

package/src/themes/base/FileUploader-parameters.css

@@ -1,4 +1,4 @@
 :root {
-	--_ui5_file_uploader_hover_border: 1px solid var(--sapField_Hover_BorderColor);
-	--_ui5_file_uploader_value_state_error_hover_background_color: var(--sapField_Hover_Background);
+	--_ui5_file_uploader_display_input_width: calc(100% - var(--_ui5_input_icon_width));
+	--_ui5_file_uploader_tokenizer_width: calc(100% - 2 * var(--_ui5_input_icon_width) - var(--_ui5_input_inner_space_to_tokenizer));
 }

package/src/themes/sap_horizon/FileUploader-parameters.css

@@ -1,5 +1 @@
 @import "../base/FileUploader-parameters.css";
-
-:root {
-	--_ui5_file_uploader_hover_border: none;
-}

package/src/themes/sap_horizon_dark/FileUploader-parameters.css

@@ -1,5 +1 @@
 @import "../base/FileUploader-parameters.css";
-
-:root {
-	--_ui5_file_uploader_hover_border: none;
-}

package/src/themes/sap_horizon_hcb/FileUploader-parameters.css

@@ -1,6 +1 @@
-@import "../base/FileUploader-parameters.css";
-
-:root {
-	--_ui5_file_uploader_hover_border: 2px solid var(--sapField_Hover_BorderColor);
-	--_ui5_file_uploader_value_state_error_hover_background_color: var(--sapField_InvalidBackground);
-}
+@import "../base/FileUploader-parameters.css";

package/src/themes/sap_horizon_hcw/FileUploader-parameters.css

@@ -1,6 +1 @@
-@import "../base/FileUploader-parameters.css";
-
-:root {
-	--_ui5_file_uploader_hover_border: 2px solid var(--sapField_Hover_BorderColor);
-	--_ui5_file_uploader_value_state_error_hover_background_color: var(--sapField_InvalidBackground);
-}
+@import "../base/FileUploader-parameters.css";

package/dist/css/themes/ToolbarButtonPopover.css

@@ -1 +0,0 @@
-:not([icon-only]).ui5-tb-popover-button::part(button){justify-content:start}

package/dist/generated/themes/ToolbarButtonPopover.css.d.ts

@@ -1,2 +0,0 @@
-declare const _default: ":not([icon-only]).ui5-tb-popover-button::part(button){justify-content:start}\n";
-export default _default;

package/dist/generated/themes/ToolbarButtonPopover.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolbarButtonPopover.css.js","sourceRoot":"","sources":["../../../src/generated/themes/ToolbarButtonPopover.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,4BAA4B,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACzG,6BAA6B,CAAC,oBAAoB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAC7F,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@ui5/webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@ui5/webcomponents\", \"sap_horizon\", async () => defaultTheme);\nexport default `:not([icon-only]).ui5-tb-popover-button::part(button){justify-content:start}\n`"]}

package/src/themes/ToolbarButtonPopover.css

@@ -1,3 +0,0 @@
-:not([icon-only]).ui5-tb-popover-button::part(button) {
-	justify-content: start;
-}