@ui5/webcomponents-fiori 0.0.0-e7dd012d7 → 0.0.0-e818f286e

package/src/UploadCollectionItem.hbs

@@ -1,5 +1,7 @@
 {{>include "../../main/src/ListItem.hbs"}}
 
+{{#*inline "selectionElement"}}{{/inline}}
+
 {{#*inline "listItemContent"}}
 	<div class="ui5-uci-thumbnail">
 		<slot name="thumbnail"></slot>
@@ -12,11 +14,9 @@
 					<div class="ui5-uci-edit-container">
 						<ui5-input
 							id="ui5-uci-edit-input"
-							value="{{_fileNameWithoutExtension}}"
 							data-sap-focus-ref
-							@keyup="{{_onInputKeyUp}}"
-							@keydown="{{_onInputKeydown}}"
-							@ui5-change="{{_onInputChange}}"
+							@focusin="{{_onInputFocusin}}"
+							@keydown="{{_onInputKeyDown}}"
 						></ui5-input>
 						<span class="ui5-uci-file-extension">{{_fileExtension}}</span>
 					</div>
@@ -24,7 +24,7 @@
 					{{#if fileNameClickable}}
 						<ui5-link class="ui5-uci-file-name" @click="{{_onFileNameClick}}">{{fileName}}</ui5-link>
 					{{else}}
-						<span class="ui5-uci-file-name">{{fileName}}</span>
+						<span class="ui5-uci-file-name ui5-uci-file-name-text">{{fileName}}</span>
 					{{/if}}
 				{{/if}}
 				<div class="ui5-uci-description">
@@ -50,23 +50,33 @@
 		</div>
 		<div class="ui5-uci-edit-buttons">
 			{{#if _editing}}
-				<ui5-button design="Transparent" class="ui5-uci-edit-rename-btn" @click="{{_onRename}}">{{_renameBtnText}}</ui5-button>
-				<ui5-button design="Transparent" id="ui5-uci-edit-cancel" @click="{{_onRenameCancel}}">{{_cancelRenameBtnText}}</ui5-button>
+				<ui5-button
+						design="Transparent"
+						class="ui5-uci-edit-rename-btn"
+						@click="{{_onRename}}"
+						@keyup="{{_onRenameKeyup}}">{{_renameBtnText}}</ui5-button>
+				<ui5-button
+						design="Transparent"
+						id="ui5-uci-edit-cancel"
+						@click="{{_onRenameCancel}}"
+						@keyup="{{_onRenameCancelKeyup}}">{{_cancelRenameBtnText}}</ui5-button>
 			{{else}}
 				{{#if _showRetry}}
 					<ui5-button
 						icon="refresh"
 						design="Transparent"
-						title="{{_retryButtonTooltip}}"
+						tooltip="{{_retryButtonTooltip}}"
 						@click="{{_onRetry}}"
+						@keyup="{{_onRetryKeyup}}"
 					></ui5-button>
 				{{/if}}
 				{{#if _showTerminate}}
 					<ui5-button
 						icon="stop"
 						design="Transparent"
-						title="{{_terminateButtonTooltip}}"
-						@click="{{_onTerminate}}">
+						tooltip="{{_terminateButtonTooltip}}"
+						@click="{{_onTerminate}}"
+						@keyup="{{_onTerminateKeyup}}">
 					</ui5-button>
 				{{/if}}
 
@@ -74,6 +84,7 @@
 					<ui5-button
 						id="{{_id}}-editing-button"
 						design="Transparent"
+						tooltip="{{_editButtonTooltip}}"
 						icon="edit"
 						@click="{{onDetailClick}}"
 						@keyup="{{_onDetailKeyup}}"
@@ -81,6 +92,20 @@
 					>
 					</ui5-button>
 				{{/if}}
+
+				{{#if renderDeleteButton}}
+					<ui5-button
+							class="ui5-li-deletebtn"
+							tabindex="-1"
+							data-sap-no-tab-ref
+							id="{{_id}}-deleteSelectionElement"
+							design="Transparent"
+							icon="decline"
+							?disabled="{{disableDeleteButton}}"
+							@click="{{onDelete}}"
+							tooltip="{{deleteText}}"
+					></ui5-button>
+				{{/if}}
 			{{/if}}
 		</div>
 	</div>

package/src/UploadCollectionItem.js

@@ -1,4 +1,4 @@
-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";
@@ -8,7 +8,7 @@ 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 { 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/refresh.js";
@@ -22,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
@@ -38,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
@@ -72,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,
 		},
 
@@ -89,7 +101,7 @@ const metadata = {
 		 * @defaultvalue false
 		 * @public
 		 */
-		noRetry: {
+		hideRetryButton: {
 			type: Boolean,
 		},
 
@@ -100,7 +112,7 @@ const metadata = {
 		 * @defaultvalue false
 		 * @public
 		 */
-		noTerminate: {
+		hideTerminateButton: {
 			type: Boolean,
 		},
 
@@ -226,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 ListItem
  * @tagname ui5-upload-collection-item
  * @public
+ * @implements sap.ui.webcomponents.fiori.IUploadCollectionItem
  * @since 1.0.0-rc.7
  */
 class UploadCollectionItem extends ListItem {
@@ -261,43 +274,41 @@ class UploadCollectionItem extends ListItem {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents-fiori");
+		[UploadCollectionItem.i18nFioriBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents-fiori"),
+			super.onDefine(),
+		]);
 	}
 
-	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;
+	onBeforeRendering() {
+		// In the base class the item can become "actionable",
+		// that's why we are overriding this method.
 	}
 
-	onAfterRendering() {
-		if (this._editPressed) {
-			this._editing = true;
-			this._editPressed = false;
-			this.focusAndSelectText();
-		}
-	}
-
-	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;
+
+		await this._initInputField();
 	}
 
 	_onDetailKeyup(event) {
@@ -306,79 +317,51 @@ class UploadCollectionItem extends ListItem {
 		}
 	}
 
-	/**
-	 * @override
-	 */
-	_onfocusout(event) {
-		super._onfocusout(event);
-
-		const path = event.path || (event.composedPath && event.composedPath());
-
-		this._editPressed = this.isDetailPressed(event);
-
-		if (!this._editPressed && path.indexOf(this) > -1) {
-			this._editing = false;
-		}
-	}
-
-	_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() {
@@ -393,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;
 	}
@@ -420,8 +419,22 @@ class UploadCollectionItem extends ListItem {
 	/**
 	 * @override
 	 */
-	get modeDelete() {
-		return !this.noDelete && super.modeDelete;
+	get renderDeleteButton() {
+		return !this.hideDeleteButton;
+	}
+
+	/**
+	 * @override
+	 */
+	get placeSelectionElementAfter() {
+		return true;
+	}
+
+	/**
+	 * @override
+	 */
+	get placeSelectionElementBefore() {
+		return false;
 	}
 
 	get _fileNameWithoutExtension() {
@@ -433,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() {
@@ -446,30 +459,34 @@ 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() {

package/src/ViewSettingsDialog.hbs

@@ -0,0 +1,122 @@
+<ui5-dialog
+	aria-label="{{_dialogTitle}}"
+	@ui5-after-open={{_focusRecentlyUsedControl}}
+	@ui5-before-close={{_restoreConfirmedOnEscape}}
+	?stretch={{_isPhone}}
+>
+
+	<div slot="header" class="ui5-vsd-header">
+		<div class="ui5-vsd-header-container">
+			<div class="ui5-vsd-header-start">
+				{{#if showBackButton}}
+					<ui5-button
+						design="Transparent"
+						icon="nav-back"
+						class="ui5-vsd-back-button"
+						@click="{{_navigateToFilters}}"
+					></ui5-button>
+				{{/if}}
+				<ui5-title class="ui5-vsd-title" id="{{_id}}-label">{{_title}}</ui5-title>
+			</div>
+			<div class="ui5-vsd-header-end">
+				<ui5-button
+					design="Transparent"
+					@click="{{_resetSettings}}"
+					?disabled={{_disableResetButton}}
+					>
+						{{_resetButtonLabel}}
+				</ui5-button>
+			</div>
+		</div>
+		{{#unless showBackButton}}
+			{{#if hasPagination}}
+				<div class="ui5-vsd-sub-header-container">
+					<div class="ui5-vsd-sub-header">
+						<ui5-segmented-button @ui5-selection-change="{{_handleModeChange}}">
+								<ui5-segmented-button-item
+									?pressed="{{isModeSort}}"
+									icon="sort"
+									mode="Sort"
+								></ui5-segmented-button-item>
+								<ui5-segmented-button-item
+									?pressed="{{isModeFilter}}"
+									icon="filter"
+									mode="Filter"
+								></ui5-segmented-button-item>
+						</ui5-segmented-button>
+					</div>
+				</div>
+			{{/if}}
+		{{/unless}}
+	</div>
+	<div class="ui5-vsd-content" ?expand-content="{{expandContent}}">
+		{{#if shouldBuildSort}}
+			{{#if isModeSort}}
+				<div class="ui5-vsd-sort">
+					<ui5-list
+						mode="SingleSelectBegin"
+						@ui5-item-click="{{_onSortOrderChange}}"
+						sort-order
+						accessible-name-ref="{{_id}}-label">
+						<ui5-li-groupheader>{{_sortOrderLabel}}</ui5-li-groupheader>
+						{{#each _currentSettings.sortOrder}}
+							<ui5-li
+								?selected="{{this.selected}}"
+							>{{this.text}}</ui5-li>
+						{{/each}}
+					</ui5-list>
+					<ui5-list
+						mode="SingleSelectBegin"
+						@ui5-item-click={{_onSortByChange}}
+						sort-by>
+						<ui5-li-groupheader>{{_sortByLabel}}</ui5-li-groupheader>
+						{{#each _currentSettings.sortBy}}
+							<ui5-li data-ui5-external-action-item-index="{{@index}}" ?selected="{{this.selected}}">{{this.text}}</ui5-li>
+						{{/each}}
+					</ui5-list>
+				</div>
+			{{/if}}
+		{{/if}}
+
+		{{#if shouldBuildFilter}}
+			{{#if isModeFilter}}
+				{{#if _filterStepTwo}}
+					<ui5-list
+						accessible-name-ref="{{_id}}-label"
+						mode="MultiSelect"
+						@ui5-item-click="{{_handleFilterValueItemClick}}"
+					>
+						{{#each _currentSettings.filters}}
+							{{#if this.selected}}
+								{{#each this.filterOptions}}
+									<ui5-li ?selected={{this.selected}}>{{this.text}}</ui5-li>
+								{{/each}}
+							{{/if}}
+						{{/each}}
+					</ui5-list>
+				{{else}}
+					<ui5-list @ui5-item-click="{{_changeCurrentFilter}}" accessible-name-ref="{{_id}}-label">
+						<ui5-li-groupheader>{{_filterByLabel}}</ui5-li-groupheader>
+						{{#each filterItems}}
+							<ui5-li class="ui5-vsd-filterItemList" ?selected={{this.selected}} additional-text={{this.additionalText}}>
+								{{this.text}}
+							</ui5-li>
+						{{/each}}
+					</ui5-list>
+				{{/if}}
+			{{/if}}
+		{{/if}}
+	</div>
+
+	<div slot="footer" class="ui5-vsd-footer">
+		<ui5-button
+			design="Emphasized"
+			@click="{{_confirmSettings}}"
+		>{{_okButtonLabel}}</ui5-button>
+		<ui5-button
+			design="Transparent"
+			@click="{{_cancelSettings}}"
+		>{{_cancelButtonLabel}}</ui5-button>
+	</div>
+
+</ui5-dialog>