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

package/src/UploadCollection.ts

@@ -0,0 +1,381 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import languageAware from "@ui5/webcomponents-base/dist/decorators/languageAware.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Label from "@ui5/webcomponents/dist/Label.js";
+// @ts-ignore: ignore will no longer be required, when List is migrated to TS
+import List from "@ui5/webcomponents/dist/List.js";
+import ListMode from "@ui5/webcomponents/dist/types/ListMode.js";
+import Title from "@ui5/webcomponents/dist/Title.js";
+import "@ui5/webcomponents-icons/dist/upload-to-cloud.js";
+import "@ui5/webcomponents-icons/dist/document.js";
+import {
+	UPLOADCOLLECTION_NO_DATA_TEXT,
+	UPLOADCOLLECTION_NO_DATA_DESCRIPTION,
+	UPLOADCOLLECTION_DRAG_FILE_INDICATOR,
+	UPLOADCOLLECTION_DROP_FILE_INDICATOR,
+	UPLOADCOLLECTION_ARIA_ROLE_DESCRIPTION,
+// @ts-ignore
+} from "./generated/i18n/i18n-defaults.js";
+import {
+	attachBodyDnDHandler,
+	detachBodyDnDHandler,
+	draggingFiles,
+} from "./upload-utils/UploadCollectionBodyDnD.js";
+import type { DnDEventListener, DnDEventListenerParam } from "./upload-utils/UploadCollectionBodyDnD.js";
+import UploadCollectionDnDOverlayMode from "./types/UploadCollectionDnDMode.js";
+
+// Template
+import UploadCollectionTemplate from "./generated/templates/UploadCollectionTemplate.lit.js";
+
+// Styles
+import UploadCollectionCss from "./generated/themes/UploadCollection.css.js";
+
+type SelectionChangeEventDetail = {
+	selectedItems: Array<HTMLElement>, // Note: HTMLElement can be replaced with UploadCollectionItem (when migrated to TS) to be even more presice.
+};
+
+type ItemDeleteEventDetail = {
+	item: HTMLElement, // Note: HTMLElement can be replaced with UploadCollectionItem (when migrated to TS) to be even more presice.
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * This component allows you to represent files before uploading them to a server, with the help of <code>ui5-upload-collection-item</code>.
+ * It also allows you to show already uploaded files.
+ *
+ * <h3>ES6 Module Import</h3>
+ * <code>import "@ui5/webcomponents-fiori/dist/UploadCollection.js";</code>
+ * <br>
+ * <code>import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";</code> (for <code>ui5-upload-collection-item</code>)
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.fiori.UploadCollection
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-upload-collection
+ * @appenddocs UploadCollectionItem
+ * @public
+ * @since 1.0.0-rc.7
+ */
+@customElement("ui5-upload-collection")
+@languageAware
+/**
+ * Fired when an element is dropped inside the drag and drop overlay.
+ * <br><br>
+ * <b>Note:</b> The <code>drop</code> event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the <code>ui5-upload-collection</code>.
+ *
+ * @event sap.ui.webc.fiori.UploadCollection#drop
+ * @readonly
+ * @param {DataTransfer} dataTransfer The <code>drop</code> event operation data.
+ * @public
+ * @native
+ */
+@event("drop")
+
+/**
+ * Fired when the Delete button of any item is pressed.
+ * <br><br>
+ * <b>Note:</b> A Delete button is displayed on each item,
+ * when the <code>ui5-upload-collection</code> <code>mode</code> property is set to <code>Delete</code>.
+ * @event sap.ui.webc.fiori.UploadCollection#item-delete
+ * @param {HTMLElement} item The <code>ui5-upload-collection-item</code> which was renamed.
+ * @public
+ */
+@event("item-delete", {
+	detail: {
+		item: { type: HTMLElement },
+	},
+})
+
+/**
+ * Fired when selection is changed by user interaction
+ * in <code>SingleSelect</code> and <code>MultiSelect</code> modes.
+ *
+ * @event sap.ui.webc.fiori.UploadCollection#selection-change
+ * @param {Array} selectedItems An array of the selected items.
+ * @public
+ */
+@event("selection-change", {
+	detail: {
+		selectedItems: { type: Array },
+	},
+})
+class UploadCollection extends UI5Element {
+	/**
+	 * Defines the mode of the <code>ui5-upload-collection</code>.
+	 *
+	 * <br><br>
+	 * <b>Note:</b>
+	 * <ul>
+	 * <li><code>None</code></li>
+	 * <li><code>SingleSelect</code></li>
+	 * <li><code>MultiSelect</code></li>
+	 * <li><code>Delete</code></li>
+	 * </ul>
+	 *
+	 * @type {sap.ui.webc.main.types.ListMode}
+	 * @name sap.ui.webc.fiori.UploadCollection.prototype.mode
+	 * @defaultvalue "None"
+	 * @public
+	 */
+	@property({ type: ListMode, defaultValue: ListMode.None })
+	mode!: ListMode;
+
+	/**
+	 * Allows you to set your own text for the 'No data' description.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.fiori.UploadCollection.prototype.noDataDescription
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	noDataDescription!: string;
+
+	/**
+	 * Allows you to set your own text for the 'No data' text.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.fiori.UploadCollection.prototype.noDataText
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	noDataText!: string;
+
+	/**
+	 * By default there will be drag and drop overlay shown over the <code>ui5-upload-collection</code> when files
+	 * are dragged. If you don't intend to use drag and drop, set this property.
+	 * <br><br>
+	 * <b>Note:</b> It is up to the application developer to add handler for <code>drop</code> event and handle it.
+	 * <code>ui5-upload-collection</code> only displays an overlay.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.fiori.UploadCollection.prototype.hideDragOverlay
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	hideDragOverlay!: boolean;
+
+	/**
+	 * Defines the accessible ARIA name of the component.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.fiori.UploadCollection.prototype.accessibleName
+	 * @defaultvalue ""
+	 * @public
+	 * @since 1.0.0-rc.16
+	 */
+	 @property()
+	 accessibleName!: string;
+
+	/**
+	 * Indicates what overlay to show when files are being dragged.
+	 *
+	 * @type {sap.ui.webc.fiori.types.UploadCollectionDnDOverlayMode}
+	 * @defaultvalue "None"
+	 * @private
+	 */
+	@property({ type: UploadCollectionDnDOverlayMode, defaultValue: UploadCollectionDnDOverlayMode.None })
+	_dndOverlayMode!: UploadCollectionDnDOverlayMode;
+
+	/**
+	 * Defines the items of the <code>ui5-upload-collection</code>.
+	 * <br><b>Note:</b> Use <code>ui5-upload-collection-item</code> for the intended design.
+	 *
+	 * @type {sap.ui.webc.fiori.IUploadCollectionItem[]}
+	 * @name sap.ui.webc.fiori.UploadCollection.prototype.default
+	 * @slot items
+	 * @public
+	 */
+	@slot({ type: HTMLElement, "default": true })
+	items!: Array<HTMLElement>;
+
+	/**
+	 * Defines the <code>ui5-upload-collection</code> header.
+	 * <br><br>
+	 * <b>Note:</b> If <code>header</code> slot is provided,
+	 * the labelling of the <code>UploadCollection</code> is a responsibility of the application developer.
+	 * <code>accessibleName</code> should be used.
+	 *
+	 * @type {HTMLElement[]}
+	 * @name sap.ui.webc.fiori.UploadCollection.prototype.header
+	 * @slot
+	 * @public
+	 */
+	@slot({ type: HTMLElement })
+	header!: Array<HTMLElement>;
+
+	_bodyDnDHandler: DnDEventListener;
+
+	static i18nBundle: I18nBundle;
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return UploadCollectionCss;
+	}
+
+	static get template() {
+		return UploadCollectionTemplate;
+	}
+
+	static get dependencies() {
+		return [
+			Icon,
+			Label,
+			List,
+			Title,
+		] as Array<typeof UI5Element>; // Note: casting will no longer be required, when List is migrated to TS
+	}
+
+	static async onDefine() {
+		UploadCollection.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
+	}
+
+	constructor() {
+		super();
+		this._bodyDnDHandler = this.bodyDnDHandler.bind(this);
+	}
+
+	bodyDnDHandler(e: DnDEventListenerParam) {
+		if (this._dndOverlayMode !== UploadCollectionDnDOverlayMode.Drop) {
+			this._dndOverlayMode = e.mode;
+		}
+	}
+
+	onEnterDOM() {
+		if (this.hideDragOverlay) {
+			return;
+		}
+
+		attachBodyDnDHandler(this._bodyDnDHandler);
+	}
+
+	onExitDOM() {
+		if (this.hideDragOverlay) {
+			return;
+		}
+
+		detachBodyDnDHandler(this._bodyDnDHandler);
+	}
+
+	_ondragenter(e: DragEvent) {
+		if (this.hideDragOverlay) {
+			return;
+		}
+
+		if (!draggingFiles(e)) {
+			return;
+		}
+
+		this._dndOverlayMode = UploadCollectionDnDOverlayMode.Drop;
+	}
+
+	_ondrop(e: DragEvent) {
+		if (this.hideDragOverlay) {
+			return;
+		}
+
+		if (e.target !== this.shadowRoot!.querySelector(".uc-dnd-overlay")) {
+			e.stopPropagation();
+		}
+
+		this._dndOverlayMode = UploadCollectionDnDOverlayMode.None;
+	}
+
+	_ondragover(e: DragEvent) {
+		if (this.hideDragOverlay) {
+			return;
+		}
+
+		e.preventDefault();
+	}
+
+	_ondragleave() {
+		if (this.hideDragOverlay) {
+			return;
+		}
+
+		this._dndOverlayMode = UploadCollectionDnDOverlayMode.Drag;
+	}
+
+	_onItemDelete(e: CustomEvent<ItemDeleteEventDetail>) {
+		this.fireEvent("item-delete", { item: e.detail.item });
+	}
+
+	_onSelectionChange(e: CustomEvent<SelectionChangeEventDetail>) {
+		this.fireEvent("selection-change", { selectedItems: e.detail.selectedItems });
+	}
+
+	get classes() {
+		return {
+			content: {
+				"ui5-uc-content": true,
+				"ui5-uc-content-no-data": this.items.length === 0,
+			},
+			dndOverlay: {
+				"uc-dnd-overlay": true,
+				"uc-drag-overlay": this._dndOverlayMode === UploadCollectionDnDOverlayMode.Drag,
+				"uc-drop-overlay": this._dndOverlayMode === UploadCollectionDnDOverlayMode.Drop,
+			},
+			noFiles: {
+				"uc-no-files": true,
+				"uc-no-files-dnd-overlay": this._showDndOverlay,
+			},
+		};
+	}
+
+	get _root() {
+		return this.shadowRoot!.querySelector(".ui5-uc-root");
+	}
+
+	get _dndOverlay() {
+		return this._root?.querySelector(".uc-dnd-overlay");
+	}
+
+	get _showDndOverlay() {
+		return this._dndOverlayMode !== UploadCollectionDnDOverlayMode.None;
+	}
+
+	get _showNoData() {
+		return this.items.length === 0;
+	}
+
+	get _noDataText() {
+		return this.noDataText || UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_NO_DATA_TEXT as I18nText);
+	}
+
+	get _noDataDescription() {
+		return this.noDataDescription || UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_NO_DATA_DESCRIPTION as I18nText);
+	}
+
+	get _roleDescription() {
+		return UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_ARIA_ROLE_DESCRIPTION as I18nText);
+	}
+
+	get _dndOverlayText() {
+		if (this._dndOverlayMode === UploadCollectionDnDOverlayMode.Drag) {
+			return UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_DRAG_FILE_INDICATOR as I18nText);
+		}
+
+		return UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_DROP_FILE_INDICATOR as I18nText);
+	}
+}
+
+UploadCollection.define();
+
+export default UploadCollection;

package/src/UploadCollectionItem.hbs

@@ -22,7 +22,7 @@
 					</div>
 				{{else }}
 					{{#if fileNameClickable}}
-						<ui5-link class="ui5-uci-file-name" @click="{{_onFileNameClick}}">{{fileName}}</ui5-link>
+						<ui5-link class="ui5-uci-file-name" @ui5-click="{{_onFileNameClick}}">{{fileName}}</ui5-link>
 					{{else}}
 						<span class="ui5-uci-file-name ui5-uci-file-name-text">{{fileName}}</span>
 					{{/if}}

package/src/UploadCollectionItem.js

@@ -37,7 +37,7 @@ import UploadCollectionItemCss from "./generated/themes/UploadCollectionItem.css
 const metadata = {
 	tag: "ui5-upload-collection-item",
 	languageAware: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.UploadCollectionItem.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.UploadCollectionItem.prototype */ {
 		/**
 		 * Holds an instance of <code>File</code> associated with this item.
 		 *
@@ -121,7 +121,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> Expected values are in the interval [0, 100].
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -135,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.webc.fiori.types.UploadState}
 		 * @defaultvalue "Ready"
 		 * @public
 		 */
@@ -155,7 +155,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.fiori.UploadCollectionItem.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.UploadCollectionItem.prototype */ {
 		/**
 		 * Hold the description of the <code>ui5-upload-collection-item</code>. Will be shown below the file name.
 		 *
@@ -180,13 +180,13 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.fiori.UploadCollectionItem.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.UploadCollectionItem.prototype */ {
 		/**
 		 * Fired when the file name is clicked.
 		 * <br><br>
 		 * <b>Note:</b> This event is only available when <code>fileNameClickable</code> property is <code>true</code>.
 		 *
-		 * @event sap.ui.webcomponents.fiori.UploadCollectionItem#file-name-click
+		 * @event sap.ui.webc.fiori.UploadCollectionItem#file-name-click
 		 * @public
 		 */
 		"file-name-click": { },
@@ -242,11 +242,11 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.UploadCollectionItem
- * @extends ListItem
+ * @alias sap.ui.webc.fiori.UploadCollectionItem
+ * @extends sap.ui.webc.main.ListItem
  * @tagname ui5-upload-collection-item
  * @public
- * @implements sap.ui.webcomponents.fiori.IUploadCollectionItem
+ * @implements sap.ui.webc.fiori.IUploadCollectionItem
  * @since 1.0.0-rc.7
  */
 class UploadCollectionItem extends ListItem {