@ui5/webcomponents 0.0.0-8db0ce01a → 0.0.0-a3eca7ade

package/src/Dialog.js

@@ -1,6 +1,10 @@
 import { isPhone, isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import {
+	isUp, isDown, isLeft, isRight,
+	isUpShift, isDownShift, isLeftShift, isRightShift,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import Popup from "./Popup.js";
 import "@ui5/webcomponents-icons/dist/resize-corner.js";
 import Icon from "./Icon.js";
@@ -12,6 +16,11 @@ import browserScrollbarCSS from "./generated/themes/BrowserScrollbar.css.js";
 import PopupsCommonCss from "./generated/themes/PopupsCommon.css.js";
 import dialogCSS from "./generated/themes/Dialog.css.js";
 
+/**
+ * Defines the step size at which this component would change by when being dragged or resized with the keyboard.
+ */
+const STEP_SIZE = 16;
+
 /**
  * @public
  */
@@ -20,6 +29,9 @@ const metadata = {
 	slots: /** @lends  sap.ui.webcomponents.main.Dialog.prototype */ {
 		/**
 		 * Defines the header HTML Element.
+		 * <br><br>
+		 * <b>Note:</b> If <code>header</code> slot is provided, the labelling of the dialog is a responsibility of the application developer.
+		 * <code>accessibleName</code> should be used.
 		 *
 		 * @type {HTMLElement[]}
 		 * @slot
@@ -55,9 +67,9 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the <code>ui5-dialog</code> should be stretched to fullscreen.
+		 * Determines whether the component should be stretched to fullscreen.
 		 * <br><br>
-		 * <b>Note:</b> The <code>ui5-dialog</code> will be stretched to approximately
+		 * <b>Note:</b> The component will be stretched to approximately
 		 * 90% of the viewport.
 		 *
 		 * @type {boolean}
@@ -69,10 +81,10 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the <code>ui5-dialog</code> is draggable.
+		 * Determines whether the component is draggable.
 		 * If this property is set to true, the Dialog will be draggable by its header.
 		 * <br><br>
-		 * <b>Note:</b> The <code>ui5-dialog</code> can be draggable only in desktop mode.
+		 * <b>Note:</b> The component can be draggable only in desktop mode.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @since 1.0.0-rc.9
@@ -83,11 +95,11 @@ const metadata = {
 		},
 
 		/**
-		 * Configures the <code>ui5-dialog</code> to be resizable.
+		 * Configures the component to be resizable.
 		 * If this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.
 		 * In RTL languages, the resize handle will be placed in the bottom left corner.
 		 * <br><br>
-		 * <b>Note:</b> The <code>ui5-dialog</code> can be resizable only in desktop mode.
+		 * <b>Note:</b> The component can be resizable only in desktop mode.
 		 * <br>
 		 * <b>Note:</b> Upon resizing, externally defined height and width styling will be ignored.
 		 * @type {boolean}
@@ -139,6 +151,17 @@ const metadata = {
  * The <code>stretch</code> property can be used to stretch the
  * <code>ui5-dialog</code> on full screen.
  *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-dialog</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>header - Used to style the header of the component</li>
+ * <li>content - Used to style the content of the component</li>
+ * <li>footer - Used to style the footer of the component</li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Dialog";</code>
@@ -146,6 +169,9 @@ const metadata = {
  * <b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>) inside <code>ui5-dialog</code>.
  * Ideally you should create all popups on the same level inside your HTML page and just open them from one another, rather than nesting them.
  *
+ * <b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>) inside other components containing z-index.
+ * This might break z-index management.
+ *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Dialog
@@ -184,16 +210,20 @@ class Dialog extends Popup {
 		return [browserScrollbarCSS, PopupsCommonCss, dialogCSS];
 	}
 
+	static _isHeader(element) {
+		return element.classList.contains("ui5-popup-header-root") || element.getAttribute("slot") === "header";
+	}
+
 	/**
-	 * Opens the dialog
+	 * Shows the dialog.
 	 *
 	 * @param {boolean} preventInitialFocus Prevents applying the focus inside the popup
 	 * @async
 	 * @returns {Promise} Resolves when the dialog is open
 	 * @public
 	 */
-	async open(preventInitialFocus) {
-		await super.open(preventInitialFocus);
+	async show(preventInitialFocus = false) {
+		await super._open(preventInitialFocus);
 	}
 
 	get isModal() { // Required by Popup.js
@@ -205,7 +235,13 @@ class Dialog extends Popup {
 	}
 
 	get _ariaLabelledBy() { // Required by Popup.js
-		return (this.ariaLabel || this.header.length) ? undefined : "ui5-popup-header-text";
+		let ariaLabelledById;
+
+		if (this.headerText !== "" && !this._ariaLabel) {
+			ariaLabelledById = "ui5-popup-header-text";
+		}
+
+		return ariaLabelledById;
 	}
 
 	get _ariaModal() { // Required by Popup.js
@@ -216,12 +252,27 @@ class Dialog extends Popup {
 		return "flex";
 	}
 
+	/**
+	 * Determines if the header of the dialog should be shown.
+	 */
 	get _displayHeader() {
-		return this.header.length || this.headerText;
+		return this.header.length || this.headerText || this.draggable || this.resizable;
+	}
+
+	get _movable() {
+		return !this.stretch && this.onDesktop && (this.draggable || this.resizable);
+	}
+
+	get _headerTabIndex() {
+		return this._movable ? "0" : undefined;
+	}
+
+	get _showResizeHandle() {
+		return this.resizable && this.onDesktop;
 	}
 
-	show() {
-		super.show();
+	_show() {
+		super._show();
 		this._center();
 	}
 
@@ -231,18 +282,47 @@ class Dialog extends Popup {
 		this.onDesktop = isDesktop();
 	}
 
+	onAfterRendering() {
+		if (!this.isOpen() && this.open) {
+			this.show();
+		} else if (this.isOpen() && !this.open) {
+			this.close();
+		}
+	}
+
 	onEnterDOM() {
 		super.onEnterDOM();
-
-		ResizeHandler.register(this, this._screenResizeHandler);
-		ResizeHandler.register(document.body, this._screenResizeHandler);
+		this._attachResizeHandlers();
 	}
 
 	onExitDOM() {
 		super.onExitDOM();
+		this._detachResizeHandlers();
+	}
+
+	/**
+	 * @override
+	 */
+	_resize() {
+		super._resize();
 
-		ResizeHandler.deregister(this, this._screenResizeHandler);
-		ResizeHandler.deregister(document.body, this._screenResizeHandler);
+		if (this._resizeHandlersAttached) {
+			this._center();
+		}
+	}
+
+	_attachResizeHandlers() {
+		if (!this._resizeHandlersAttached) {
+			ResizeHandler.register(document.body, this._screenResizeHandler);
+			this._resizeHandlersAttached = true;
+		}
+	}
+
+	_detachResizeHandlers() {
+		if (this._resizeHandlersAttached) {
+			ResizeHandler.deregister(document.body, this._screenResizeHandler);
+			this._resizeHandlersAttached = false;
+		}
 	}
 
 	_center() {
@@ -269,13 +349,8 @@ class Dialog extends Popup {
 	 * Event handlers
 	 */
 	_onDragMouseDown(event) {
-		if (!(this.draggable && this.onDesktop)) {
-			return;
-		}
-
-		// only allow dragging on the header's whitespace
-		if (!event.target.classList.contains("ui5-popup-header-root")
-			&& event.target.getAttribute("slot") !== "header") {
+		// allow dragging only on the header
+		if (!this._movable || !this.draggable || !Dialog._isHeader(event.target)) {
 			return;
 		}
 
@@ -300,7 +375,7 @@ class Dialog extends Popup {
 		this._x = event.clientX;
 		this._y = event.clientY;
 
-		this._attachDragHandlers();
+		this._attachMouseDragHandlers();
 	}
 
 	_onDragMouseMove(event) {
@@ -326,24 +401,115 @@ class Dialog extends Popup {
 		this._x = null;
 		this._y = null;
 
-		this._detachDragHandlers();
+		this._detachMouseDragHandlers();
+	}
+
+	_onDragOrResizeKeyDown(event) {
+		if (!this._movable || !Dialog._isHeader(event.target)) {
+			return;
+		}
+
+		if (this.draggable && [isUp, isDown, isLeft, isRight].some(key => key(event))) {
+			this._dragWithEvent(event);
+			return;
+		}
+
+		if (this.resizable && [isUpShift, isDownShift, isLeftShift, isRightShift].some(key => key(event))) {
+			this._resizeWithEvent(event);
+		}
+	}
+
+	_dragWithEvent(event) {
+		const {
+			top,
+			left,
+			width,
+			height,
+		} = this.getBoundingClientRect();
+
+		let newPos,
+			posDirection;
+
+		switch (true) {
+		case isUp(event):
+			newPos = top - STEP_SIZE;
+			posDirection = "top";
+			break;
+		case isDown(event):
+			newPos = top + STEP_SIZE;
+			posDirection = "top";
+			break;
+		case isLeft(event):
+			newPos = left - STEP_SIZE;
+			posDirection = "left";
+			break;
+		case isRight(event):
+			newPos = left + STEP_SIZE;
+			posDirection = "left";
+			break;
+		}
+
+		newPos = clamp(
+			newPos,
+			0,
+			posDirection === "left" ? window.innerWidth - width : window.innerHeight - height,
+		);
+
+		this.style[posDirection] = `${newPos}px`;
+	}
+
+	_resizeWithEvent(event) {
+		this._detachResizeHandlers();
+		this.addEventListener("ui5-before-close", this._revertSize);
+
+		const { top, left } = this.getBoundingClientRect(),
+			style = window.getComputedStyle(this),
+			minWidth = Number.parseFloat(style.minWidth),
+			minHeight = Number.parseFloat(style.minHeight),
+			maxWidth = window.innerWidth - left,
+			maxHeight = window.innerHeight - top;
+
+		let width = Number.parseFloat(style.width),
+			height = Number.parseFloat(style.height);
+
+		switch (true) {
+		case isUpShift(event):
+			height -= STEP_SIZE;
+			break;
+		case isDownShift(event):
+			height += STEP_SIZE;
+			break;
+		case isLeftShift(event):
+			width -= STEP_SIZE;
+			break;
+		case isRightShift(event):
+			width += STEP_SIZE;
+			break;
+		}
+
+		width = clamp(width, minWidth, maxWidth);
+		height = clamp(height, minHeight, maxHeight);
+
+		Object.assign(this.style, {
+			width: `${width}px`,
+			height: `${height}px`,
+		});
 	}
 
-	_attachDragHandlers() {
-		ResizeHandler.deregister(this, this._screenResizeHandler);
-		ResizeHandler.deregister(document.body, this._screenResizeHandler);
+	_attachMouseDragHandlers() {
+		this._detachResizeHandlers();
 
 		window.addEventListener("mousemove", this._dragMouseMoveHandler);
 		window.addEventListener("mouseup", this._dragMouseUpHandler);
 	}
 
-	_detachDragHandlers() {
+	_detachMouseDragHandlers() {
 		window.removeEventListener("mousemove", this._dragMouseMoveHandler);
 		window.removeEventListener("mouseup", this._dragMouseUpHandler);
 	}
 
 	_onResizeMouseDown(event) {
-		if (!(this.resizable && this.onDesktop)) {
+		if (!this._movable || !this.resizable) {
 			return;
 		}
 
@@ -374,14 +540,14 @@ class Dialog extends Popup {
 			left: `${left}px`,
 		});
 
-		this._attachResizeHandlers();
+		this._attachMouseResizeHandlers();
 	}
 
 	_onResizeMouseMove(event) {
 		const { clientX, clientY } = event;
 
-		let newWidth;
-		let newLeft;
+		let newWidth,
+			newLeft;
 
 		if (this._isRTL) {
 			newWidth = clamp(
@@ -426,19 +592,18 @@ class Dialog extends Popup {
 		this._minWidth = null;
 		this._minHeight = null;
 
-		this._detachResizeHandlers();
+		this._detachMouseResizeHandlers();
 	}
 
-	_attachResizeHandlers() {
-		ResizeHandler.deregister(this, this._screenResizeHandler);
-		ResizeHandler.deregister(document.body, this._screenResizeHandler);
+	_attachMouseResizeHandlers() {
+		this._detachResizeHandlers();
 
 		window.addEventListener("mousemove", this._resizeMouseMoveHandler);
 		window.addEventListener("mouseup", this._resizeMouseUpHandler);
 		this.addEventListener("ui5-before-close", this._revertSize);
 	}
 
-	_detachResizeHandlers() {
+	_detachMouseResizeHandlers() {
 		window.removeEventListener("mousemove", this._resizeMouseMoveHandler);
 		window.removeEventListener("mouseup", this._resizeMouseUpHandler);
 	}

package/src/DurationPicker.js

@@ -2,8 +2,12 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import "@ui5/webcomponents-icons/dist/fob-watch.js";
 import TimePickerBase from "./TimePickerBase.js";
 
+import {
+	DURATION_INPUT_DESCRIPTION,
+} from "./generated/i18n/i18n-defaults.js";
+
 /**
- * @public
+ * @private
  */
 const metadata = {
 	tag: "ui5-duration-picker",
@@ -108,7 +112,7 @@ const pad = number => {
  * @class
  *
  * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-duration-picker</code> component provides an input field with assigned sliders which opens on user action.
+ * The <code>ui5-duration-picker</code> component provides an input field with assigned sliders which are opened on user action.
  * The <code>ui5-duration-picker</code> allows users to select a time duration.
  * It consists of two parts: the time input field and the sliders.
  *
@@ -160,7 +164,7 @@ const pad = number => {
  * @alias sap.ui.webcomponents.main.DurationPicker
  * @extends TimePickerBase
  * @tagname ui5-duration-picker
- * @public
+ * @private
  */
 class DurationPicker extends TimePickerBase {
 	static get metadata() {
@@ -286,6 +290,21 @@ class DurationPicker extends TimePickerBase {
 	get maxSeconds() {
 		return parseInt(this.maxValue.split(":")[2]);
 	}
+
+	get dateAriaDescription() {
+		return DurationPicker.i18nBundle.getText(DURATION_INPUT_DESCRIPTION);
+	}
+
+	get accInfo() {
+		return {
+			"ariaRoledescription": this.dateAriaDescription,
+			"ariaHasPopup": "dialog",
+			"ariaAutoComplete": "none",
+			"role": "combobox",
+			"ariaControls": `${this._id}-responsive-popover`,
+			"ariaExpanded": this.isOpen(),
+		};
+	}
 }
 
 DurationPicker.define();

package/src/FileUploader.hbs

@@ -6,6 +6,7 @@
 	@focusout="{{_onfocusout}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
+	@click="{{_onclick}}"
 >
 	<div class="ui5-file-uploader-mask">
 		{{#unless hideInput}}

package/src/FileUploader.js

@@ -2,10 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import {
-	fetchI18nBundle,
-	getI18nBundle,
-} from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import {
 	FILEUPLOAD_BROWSE,
@@ -18,6 +15,7 @@ import {
 
 import Input from "./Input.js";
 import Popover from "./Popover.js";
+import Icon from "./Icon.js";
 
 // Template
 import FileUploaderTemplate from "./generated/templates/FileUploaderTemplate.lit.js";
@@ -36,7 +34,7 @@ const metadata = {
 	languageAware: true,
 	properties: /** @lends sap.ui.webcomponents.main.FileUploader.prototype */ {
 		/**
-		 * Comma-separated list of file types that the <code>ui5-file-uploader</code> should accept.
+		 * Comma-separated list of file types that the component should accept.
 		 * <br><br>
 		 * <b>Note:</b> Please make sure you are adding the <code>.</code> in front on the file type, e.g. <code>.png</code> in case you want to accept png's only.
 		 * @type {string}
@@ -48,7 +46,7 @@ const metadata = {
 		},
 
 		/**
-		 * If set to "true", the input field of <code>ui5-file-uploader</code> will not be rendered. Only the default slot that is passed will be rendered.
+		 * If set to "true", the input field of component will not be rendered. Only the default slot that is passed will be rendered.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
@@ -58,9 +56,9 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether <code>ui5-file-uploader</code> is in disabled state.
+		 * Defines whether the component is in disabled state.
 		 * <br><br>
-		 * <b>Note:</b> A disabled <code>ui5-file-uploader</code> is completely noninteractive.
+		 * <b>Note:</b> A disabled component is completely noninteractive.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -81,7 +79,7 @@ const metadata = {
 		},
 
 		/**
-		 * Determines the name with which the <code>ui5-file-uploader</code> will be submitted in an HTML form.
+		 * Determines the name with which the component will be submitted in an HTML form.
 		 *
 		 * <br><br>
 		 * <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:
@@ -89,7 +87,7 @@ const metadata = {
 		 *
 		 * <br><br>
 		 * <b>Note:</b> When set, a native <code>input</code> HTML element
-		 * will be created inside the <code>ui5-file-uploader</code> so that it can be submitted as
+		 * will be created inside the component so that it can be submitted as
 		 * part of an HTML form. Do not use this property unless you need to submit a form.
 		 *
 		 * @type {string}
@@ -101,7 +99,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines a short hint intended to aid the user with data entry when the <code>ui5-file-uploader</code> has no value.
+		 * Defines a short hint intended to aid the user with data entry when the component has no value.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -121,7 +119,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the value state of the <code>ui5-file-uploader</code>.
+		 * Defines the value state of the component.
 		 * <br><br>
 		 * Available options are:
 		 * <ul>
@@ -151,7 +149,7 @@ const metadata = {
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.FileUploader.prototype */ {
 		/**
-		 * By default the <code>ui5-file-uploader</code> contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.
+		 * By default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.
 		 *
 		 * @type {HTMLElement[]}
 		 * @slot content
@@ -163,13 +161,13 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the value state message that will be displayed as pop up under the <code>ui5-file-uploader</code>.
+		 * Defines the value state message that will be displayed as pop up under the component.
 		 * <br><br>
 		 *
 		 * <b>Note:</b> If not specified, a default text (in the respective language) will be displayed.
 		 * <br>
 		 * <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
-		 * when the <code>ui5-file-uploader</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
+		 * when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
 		 * @type {HTMLElement[]}
 		 * @since 1.0.0-rc.9
 		 * @slot
@@ -266,11 +264,7 @@ class FileUploader extends UI5Element {
 
 	constructor() {
 		super();
-		if (this._canUseNativeFormSupport) {
-			this._internals = this.attachInternals();
-		}
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+		this._internals = this.attachInternals && this.attachInternals();
 	}
 
 	_onmouseover() {
@@ -285,15 +279,23 @@ class FileUploader extends UI5Element {
 		});
 	}
 
+	_onclick(event) {
+		if (event.isMarked === "button") {
+			this._input.click(event);
+		}
+	}
+
 	_onkeydown(event) {
 		if (isEnter(event)) {
 			this._input.click(event);
+			event.preventDefault();
 		}
 	}
 
 	_onkeyup(event) {
 		if (isSpace(event)) {
 			this._input.click(event);
+			event.preventDefault();
 		}
 	}
 
@@ -386,7 +388,7 @@ class FileUploader extends UI5Element {
 		const popover = await this._getPopover();
 
 		if (popover) {
-			popover.openBy(this);
+			popover.showAt(this);
 		}
 	}
 
@@ -404,7 +406,7 @@ class FileUploader extends UI5Element {
 	}
 
 	/**
-	 * in case when ui5-file-uploader is not placed in the DOM, return empty FileList, like native input would do
+	 * in case when the component is not placed in the DOM, return empty FileList, like native input would do
 	 * @private
 	 */
 	static get _emptyFilesList() {
@@ -416,15 +418,15 @@ class FileUploader extends UI5Element {
 	}
 
 	get browseText() {
-		return this.i18nBundle.getText(FILEUPLOAD_BROWSE);
+		return FileUploader.i18nBundle.getText(FILEUPLOAD_BROWSE);
 	}
 
 	get titleText() {
-		return this.i18nBundle.getText(FILEUPLOADER_TITLE);
+		return FileUploader.i18nBundle.getText(FILEUPLOADER_TITLE);
 	}
 
 	get _canUseNativeFormSupport() {
-		return !!this.attachInternals;
+		return this._internals && this._internals.setFormValue;
 	}
 
 	get _keepInputInShadowDOM() {
@@ -445,13 +447,11 @@ class FileUploader extends UI5Element {
 	}
 
 	get valueStateTextMappings() {
-		const i18nBundle = this.i18nBundle;
-
 		return {
-			"Success": i18nBundle.getText(VALUE_STATE_SUCCESS),
-			"Information": i18nBundle.getText(VALUE_STATE_INFORMATION),
-			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
+			"Success": FileUploader.i18nBundle.getText(VALUE_STATE_SUCCESS),
+			"Information": FileUploader.i18nBundle.getText(VALUE_STATE_INFORMATION),
+			"Error": FileUploader.i18nBundle.getText(VALUE_STATE_ERROR),
+			"Warning": FileUploader.i18nBundle.getText(VALUE_STATE_WARNING),
 		};
 	}
 
@@ -479,6 +479,20 @@ class FileUploader extends UI5Element {
 		return this.focused && this.hasValueStateText && !this.hideInput;
 	}
 
+	/**
+	 * This method is relevant for sap_horizon theme only
+	 */
+	get _valueStateMessageInputIcon() {
+		const iconPerValueState = {
+			Error: "error",
+			Warning: "alert",
+			Success: "sys-enter-2",
+			Information: "information",
+		};
+
+		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+	}
+
 	get classes() {
 		return {
 			popoverValueState: {
@@ -504,11 +518,11 @@ class FileUploader extends UI5Element {
 	}
 
 	static get dependencies() {
-		return [Input, Popover];
+		return [Input, Popover, Icon];
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		FileUploader.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }