@ui5/webcomponents-fiori 0.0.0-dff5837d7 → 0.0.0-e0658a650

package/dist/UploadCollectionItem.js

@@ -1,18 +1,19 @@
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ListItemType from "@ui5/webcomponents/dist/types/ListItemType.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import Input from "@ui5/webcomponents/dist/Input.js";
 import Label from "@ui5/webcomponents/dist/Label.js";
 import Link from "@ui5/webcomponents/dist/Link.js";
+import ProgressIndicator from "@ui5/webcomponents/dist/ProgressIndicator.js";
 import ListItem from "@ui5/webcomponents/dist/ListItem.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import getFileExtension from "@ui5/webcomponents-base/dist/util/getFileExtension.js";
-import RenderScheduler from "@ui5/webcomponents-base/dist/RenderScheduler.js";
-import { isEnter, isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+import { isEnter, isEscape, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import UploadState from "./types/UploadState.js";
-import "@ui5/webcomponents-icons/dist/icons/refresh.js";
-import "@ui5/webcomponents-icons/dist/icons/stop.js";
-import "@ui5/webcomponents-icons/dist/icons/edit.js";
+import "@ui5/webcomponents-icons/dist/refresh.js";
+import "@ui5/webcomponents-icons/dist/stop.js";
+import "@ui5/webcomponents-icons/dist/edit.js";
 import {
 	UPLOADCOLLECTIONITEM_CANCELBUTTON_TEXT,
 	UPLOADCOLLECTIONITEM_RENAMEBUTTON_TEXT,
@@ -21,6 +22,7 @@ import {
 	UPLOADCOLLECTIONITEM_READY_STATE,
 	UPLOADCOLLECTIONITEM_RETRY_BUTTON_TEXT,
 	UPLOADCOLLECTIONITEM_TERMINATE_BUTTON_TEXT,
+	UPLOADCOLLECTIONITEM_EDIT_BUTTON_TEXT,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Template
@@ -37,7 +39,7 @@ const metadata = {
 	languageAware: true,
 	properties: /** @lends sap.ui.webcomponents.fiori.UploadCollectionItem.prototype */ {
 		/**
-		 * Holds <code>File</code>, associated with this item.
+		 * Holds an instance of <code>File</code> associated with this item.
 		 *
 		 * @type {File}
 		 * @defaultvalue null
@@ -71,13 +73,24 @@ const metadata = {
 		},
 
 		/**
-		 * Removes delete option from <code>ui5-upload-collection</code> with <code>mode</code> <code>Delete</code> for this item.
+		 * Disables the delete button.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
 		 */
-		noDelete: {
+		disableDeleteButton: {
+			type: Boolean,
+		},
+
+		/**
+		 * By default, the Delete button will always be shown, regardless of the <code>ui5-upload-collection</code>'s property <code>mode</code>.
+		 * Setting this property to <code>true</code> will hide the delete button.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 */
+		hideDeleteButton: {
 			type: Boolean,
 		},
 
@@ -88,7 +101,7 @@ const metadata = {
 		 * @defaultvalue false
 		 * @public
 		 */
-		noRetry: {
+		hideRetryButton: {
 			type: Boolean,
 		},
 
@@ -99,7 +112,7 @@ const metadata = {
 		 * @defaultvalue false
 		 * @public
 		 */
-		noTerminate: {
+		hideTerminateButton: {
 			type: Boolean,
 		},
 
@@ -108,7 +121,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> Expected values are in the interval [0, 100].
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -122,7 +135,7 @@ const metadata = {
 		 * Also if set to <code>Error</code>, a refresh button is shown. When this icon is pressed <code>retry</code> event is fired.
 		 * If set to <code>Uploading</code>, a terminate button is shown. When this icon is pressed <code>terminate</code> event is fired.
 		 *
-		 * @type {UploadState}
+		 * @type {sap.ui.webcomponents.fiori.types.UploadState}
 		 * @defaultvalue "Ready"
 		 * @public
 		 */
@@ -225,14 +238,15 @@ const metadata = {
  *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents-fiori/dist/UploadCollectionItem.js";</code>
+ * <code>import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";</code>
  *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.fiori.UploadCollectionItem
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.main.ListItem
  * @tagname ui5-upload-collection-item
  * @public
+ * @implements sap.ui.webcomponents.fiori.IUploadCollectionItem
  * @since 1.0.0-rc.7
  */
 class UploadCollectionItem extends ListItem {
@@ -241,132 +255,113 @@ class UploadCollectionItem extends ListItem {
 	}
 
 	static get styles() {
-		return [...ListItem.styles, UploadCollectionItemCss];
+		return [ListItem.styles, UploadCollectionItemCss];
 	}
 
 	static get template() {
 		return UploadCollectionItemTemplate;
 	}
 
-	static async onDefine() {
-		await Promise.all([
-			Button.define(),
-			Input.define(),
-			Link.define(),
-			Label.define(),
-			fetchI18nBundle("@ui5/webcomponents-fiori"),
-		]);
+	static get dependencies() {
+		return [
+			...ListItem.dependencies,
+			Button,
+			Input,
+			Link,
+			Label,
+			ProgressIndicator,
+		];
 	}
 
-	constructor() {
-		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents-fiori");
-
-		this._editPressed = false; // indicates if the edit btn has been pressed
-		this.doNotCloseInput = false; // Indicates whether the input should be closed when using keybord for navigation
-		this.isEnter = false;
+	static async onDefine() {
+		[UploadCollectionItem.i18nFioriBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents-fiori"),
+			super.onDefine(),
+		]);
 	}
 
-	onAfterRendering() {
-		if (this._editPressed) {
-			this._editing = true;
-			this._editPressed = false;
-			this.focusAndSelectText();
-		}
+	onBeforeRendering() {
+		// In the base class the item can become "actionable",
+		// that's why we are overriding this method.
 	}
 
-	async focusAndSelectText() {
-		await this.focus();
+	async _initInputField() {
+		await renderFinished();
 
 		const inp = this.shadowRoot.getElementById("ui5-uci-edit-input");
+		inp.value = this._fileNameWithoutExtension;
+
+		await renderFinished();
 
-		await RenderScheduler.whenDOMUpdated();
-		if (inp.getFocusDomRef()) {
-			inp.getFocusDomRef().setSelectionRange(0, this._fileNameWithoutExtension.length);
+		const inpFocusDomRef = inp.getFocusDomRef();
+
+		if (inpFocusDomRef) {
+			inpFocusDomRef.focus();
+			inpFocusDomRef.setSelectionRange(0, this._fileNameWithoutExtension.length);
 		}
 	}
 
 	/**
 	 * @override
 	 */
-	onDetailClick(event) {
+	async onDetailClick(event) {
 		super.onDetailClick(event);
 		this._editing = true;
-	}
 
-	/**
-	 * @override
-	 */
-	_onfocusout(event) {
-		super._onfocusout(event);
-
-		const path = event.path || (event.composedPath && event.composedPath());
-
-		this._editPressed = this.isDetailPressed(event);
+		await this._initInputField();
+	}
 
-		if (!this._editPressed && path.indexOf(this) > -1) {
-			this._editing = false;
+	_onDetailKeyup(event) {
+		if (isSpace(event)) {
+			this.onDetailClick(event);
 		}
 	}
 
-	_onInputKeydown(event) {
-		this.isEnter = isEnter(event);
-		this.isEscape = isEscape(event);
+	_onInputFocusin(event) {
+		// prevent focusing the whole upload collection item.
+		event.stopPropagation();
 	}
 
-	_onInputKeyUp(event) {
-		this.doNotCloseInput = true;
-		this.tempValue = event.target.value + this._fileExtension;
-
-		if (this.isEscape) {
-			[this.fileName, this.tempValue] = [this.tempValue, this.fileName];
-			return this._onRenameCancel();
+	_onInputKeyDown(event) {
+		if (isEscape(event)) {
+			this._onRenameCancel(event);
+		} else if (isEnter(event)) {
+			this._onRename();
+		} else if (isSpace(event)) {
+			event.stopImmediatePropagation();
 		}
 	}
 
-	isDetailPressed(event) {
-		const path = event.path || (event.composedPath && event.composedPath());
+	_onRename(event) {
+		const inp = this.shadowRoot.getElementById("ui5-uci-edit-input");
+		this.fileName = inp.value + this._fileExtension;
+		this.fireEvent("rename");
 
-		return path.some(e => {
-			return e.classList && e.classList.contains("ui5-uci-edit");
-		});
+		this._editing = false;
+		this._focus();
 	}
 
-	_onInputChange(event) {
-		if (this.shadowRoot.getElementById("ui5-uci-edit-cancel").active) {
-			return;
-		}
-
-		if ((!this.isEnter && this.doNotCloseInput) || this.isEscape) {
-			[this.fileName, this.tempValue] = [this.tempValue, this.fileName];
-			this.isEscape = false;
-			return;
+	_onRenameKeyup(event) {
+		if (isSpace(event)) {
+			this._onRename(event);
 		}
+	}
 
+	async _onRenameCancel(event) {
 		this._editing = false;
-		this.fileName = event.target.value + this._fileExtension;
-		this.fireEvent("rename");
 
-		if (this.isEnter) {
+		if (isEscape(event)) {
+			await renderFinished();
+			this.shadowRoot.getElementById(`${this._id}-editing-button`).focus();
+		} else {
 			this._focus();
 		}
 	}
 
-	_onRename(event) {
-		this.doNotCloseInput = false;
-		this._editing = false;
-		this._focus();
-	}
-
-	_onRenameCancel(event) {
-		if (!this.isEscape) {
-			[this.fileName, this.tempValue] = [this.tempValue, this.fileName];
+	_onRenameCancelKeyup(event) {
+		if (isSpace(event)) {
+			this._onRenameCancel(event);
 		}
-
-		this._editing = false;
-		this.doNotCloseInput = false;
-
-		this._focus();
 	}
 
 	_focus() {
@@ -381,10 +376,26 @@ class UploadCollectionItem extends ListItem {
 		this.fireEvent("retry");
 	}
 
+	_onRetryKeyup(event) {
+		if (isSpace(event)) {
+			this._onRetry(event);
+		}
+	}
+
 	_onTerminate(event) {
 		this.fireEvent("terminate");
 	}
 
+	_onTerminateKeyup(event) {
+		if (isSpace(event)) {
+			this._onTerminate(event);
+		}
+	}
+
+	getFocusDomRef() {
+		return this.getDomRef();
+	}
+
 	get list() {
 		return this.assignedSlot.parentElement;
 	}
@@ -402,30 +413,28 @@ class UploadCollectionItem extends ListItem {
 				"ui5-uci-root-editing": this._editing,
 				"ui5-uci-root-uploading": this.uploadState === UploadState.Uploading,
 			},
-			progressIndicator: {
-				"ui5-uci-progress-indicator": true,
-				"error": this.uploadState === UploadState.Error,
-			},
 		};
 	}
 
-	get styles() {
-		return {
-			progressBar: {
-				"flex-basis": `${this.progress}%`,
-			},
-			progressBarRemaining: {
-				"border-left": this.progress !== 0 ? "none" : "",
-				"border-radius": this.progress === 0 ? "0.5rem" : "0 0.5rem 0.5rem 0",
-			},
-		};
+	/**
+	 * @override
+	 */
+	get renderDeleteButton() {
+		return !this.hideDeleteButton;
 	}
 
 	/**
 	 * @override
 	 */
-	get modeDelete() {
-		return !this.noDelete && super.modeDelete;
+	get placeSelectionElementAfter() {
+		return true;
+	}
+
+	/**
+	 * @override
+	 */
+	get placeSelectionElementBefore() {
+		return false;
 	}
 
 	get _fileNameWithoutExtension() {
@@ -437,11 +446,11 @@ class UploadCollectionItem extends ListItem {
 	}
 
 	get _renameBtnText() {
-		return this.i18nBundle.getText(UPLOADCOLLECTIONITEM_RENAMEBUTTON_TEXT);
+		return UploadCollectionItem.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_RENAMEBUTTON_TEXT);
 	}
 
 	get _cancelRenameBtnText() {
-		return this.i18nBundle.getText(UPLOADCOLLECTIONITEM_CANCELBUTTON_TEXT);
+		return UploadCollectionItem.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_CANCELBUTTON_TEXT);
 	}
 
 	get _showProgressIndicator() {
@@ -450,30 +459,46 @@ class UploadCollectionItem extends ListItem {
 
 	get _progressText() {
 		if (this.uploadState === UploadState.Uploading) {
-			return this.i18nBundle.getText(UPLOADCOLLECTIONITEM_UPLOADING_STATE);
+			return UploadCollectionItem.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_UPLOADING_STATE);
 		}
 
 		if (this.uploadState === UploadState.Error) {
-			return this.i18nBundle.getText(UPLOADCOLLECTIONITEM_ERROR_STATE);
+			return UploadCollectionItem.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_ERROR_STATE);
 		}
 
-		return this.i18nBundle.getText(UPLOADCOLLECTIONITEM_READY_STATE);
+		return UploadCollectionItem.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_READY_STATE);
 	}
 
 	get _showRetry() {
-		return !this.noRetry && this.uploadState === UploadState.Error;
+		return !this.hideRetryButton && this.uploadState === UploadState.Error;
 	}
 
 	get _showTerminate() {
-		return !this.noTerminate && this.uploadState === UploadState.Uploading;
+		return !this.hideTerminateButton && this.uploadState === UploadState.Uploading;
 	}
 
 	get _retryButtonTooltip() {
-		return this.i18nBundle.getText(UPLOADCOLLECTIONITEM_RETRY_BUTTON_TEXT);
+		return UploadCollectionItem.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_RETRY_BUTTON_TEXT);
 	}
 
 	get _terminateButtonTooltip() {
-		return this.i18nBundle.getText(UPLOADCOLLECTIONITEM_TERMINATE_BUTTON_TEXT);
+		return UploadCollectionItem.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_TERMINATE_BUTTON_TEXT);
+	}
+
+	get _editButtonTooltip() {
+		return UploadCollectionItem.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_EDIT_BUTTON_TEXT);
+	}
+
+	get valueStateName() {
+		if (this.uploadState === UploadState.Error) {
+			return "Error";
+		}
+
+		if (this.uploadState === UploadState.Ready || this.uploadState === UploadState.Uploading) {
+			return "Information";
+		}
+
+		return undefined;
 	}
 
 	/**