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

package/src/themes/FileUploader.css

@@ -1,66 +1,174 @@
 @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;
 }
 
-: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: inherit;
+	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);
 }
 
-:host([value-state="Positive"]:not([disabled]):hover) [ui5-input] {
-	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--sapField_Hover_SuccessShadow);
+.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([value-state="None"]:not([readonly]):hover),
+: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"]: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"]: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"]: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;
+}
+
+: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);
 }
 
-:host([value-state="Information"]:not([disabled]):hover) [ui5-input] {
+/* 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);
+}
+
+: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/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,6 @@
 :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));
 }