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

package/dist/TimelineItem.js

@@ -3,10 +3,13 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Link from "@ui5/webcomponents/dist/Link.js";
 import TimelineItemTemplate from "./generated/templates/TimelineItemTemplate.lit.js";
-
+import TimelineLayout from "./types/TimelineLayout.js";
 // Styles
 import styles from "./generated/themes/TimelineItem.css.js";
 
+const SHORT_LINE_WIDTH = "ShortLineWidth";
+const LARGE_LINE_WIDTH = "LargeLineWidth";
+
 /**
  * @public
  */
@@ -41,24 +44,24 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the name of the item.
+		 * Defines the name of the item, displayed before the <code>title-text</code>.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 */
-		itemName: {
+		name: {
 			type: String,
 		},
 
 		/**
-		 * Defines whether the <code>itemName</code> is clickable.
+		 * Defines if the <code>name</code> is clickable.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
 		 */
-		itemNameClickable: {
+		nameClickable: {
 			type: Boolean,
 		},
 
@@ -88,19 +91,41 @@ const metadata = {
 			defaultValue: "-1",
 			noAttribute: true,
 		},
+
+		/**
+		 * Defines the items orientation.
+		 *
+		 * @type {TimelineLayout}
+		 * @defaultvalue "Vertical"
+		 * @private
+		 */
+		layout: {
+			type: TimelineLayout,
+			defaultvalue: TimelineLayout.Vertical,
+		},
+
+		/**
+		 * Defines the indicator line width.
+		 *
+		 * @type {string}
+		 * @private
+		 */
+		_lineWidth: {
+			type: String,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.fiori.TimelineItem.prototype */ {
 		/**
 		 * Fired when the item name is pressed either with a
 		 * click/tap or by using the Enter or Space key.
 		 * <br><br>
-		 * <b>Note:</b> The event will not be fired if the <code>item-name-clickable</code>
+		 * <b>Note:</b> The event will not be fired if the <code>name-clickable</code>
 		 * attribute is not set.
 		 *
-		 * @event sap.ui.webcomponents.fiori.TimelineItem#item-name-click
+		 * @event sap.ui.webcomponents.fiori.TimelineItem#name-click
 		 * @public
 		 */
-		"item-name-click": {},
+		"name-click": {},
 	},
 };
 
@@ -116,6 +141,7 @@ const metadata = {
  * @alias sap.ui.webcomponents.fiori.TimelineItem
  * @extends UI5Element
  * @tagname ui5-timeline-item
+ * @implements sap.ui.webcomponents.fiori.ITimelineItem
  * @public
  */
 class TimelineItem extends UI5Element {
@@ -139,8 +165,8 @@ class TimelineItem extends UI5Element {
 		super();
 	}
 
-	onItemNamePress() {
-		this.fireEvent("item-name-click", {});
+	onNamePress() {
+		this.fireEvent("name-click", {});
 	}
 
 	static get dependencies() {
@@ -149,6 +175,21 @@ class TimelineItem extends UI5Element {
 			Link,
 		];
 	}
+
+	get classes() {
+		return {
+			indicator: {
+				"ui5-tli-indicator": true,
+				"ui5-tli-indicator-short-line": this._lineWidth === SHORT_LINE_WIDTH,
+				"ui5-tli-indicator-large-line": this._lineWidth === LARGE_LINE_WIDTH,
+			},
+			bubbleArrowPosition: {
+				"ui5-tli-bubble-arrow": true,
+				"ui5-tli-bubble-arrow--left": this.layout === TimelineLayout.Vertical,
+				"ui5-tli-bubble-arrow--top": this.layout === TimelineLayout.Horizontal,
+			},
+		};
+	}
 }
 
 TimelineItem.define();

package/dist/UploadCollection.js

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getI18nBundle, fetchI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Label from "@ui5/webcomponents/dist/Label.js";
 import List from "@ui5/webcomponents/dist/List.js";
@@ -13,6 +13,7 @@ import {
 	UPLOADCOLLECTION_NO_DATA_DESCRIPTION,
 	UPLOADCOLLECTION_DRAG_FILE_INDICATOR,
 	UPLOADCOLLECTION_DROP_FILE_INDICATOR,
+	UPLOADCOLLECTION_ARIA_ROLE_DESCRIPTION,
 } from "./generated/i18n/i18n-defaults.js";
 import {
 	attachBodyDnDHandler,
@@ -36,9 +37,15 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.fiori.UploadCollection.prototype */ {
 		/**
 		 * Defines the mode of the <code>ui5-upload-collection</code>.
+		 *
 		 * <br><br>
-		 * <b>Note:</b> Available options are <code>None</code>, <code>SingleSelect</code>,
-		 * <code>MultiSelect</code>, and <code>Delete</code>.
+		 * <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 {ListMode}
 		 * @defaultvalue "None"
@@ -73,16 +80,16 @@ const metadata = {
 
 		/**
 		 * 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 to <code>true</code>
+		 * 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 shows an overlay.
+		 * <code>ui5-upload-collection</code> only displays an overlay.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
 		 */
-		noDnd: {
+		hideDragOverlay: {
 			type: Boolean,
 		},
 
@@ -97,6 +104,18 @@ const metadata = {
 			type: String,
 			defaultValue: UploadCollectionDnDOverlayMode.None,
 		},
+
+		/**
+		 * Defines the accessible aria name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.0.0-rc.16
+		 */
+		accessibleName: {
+			type: String,
+		},
 	},
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.fiori.UploadCollection.prototype */ {
@@ -104,8 +123,8 @@ const metadata = {
 		 * 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 {HTMLElement[]}
-		 * @slot
+		 * @type {sap.ui.webcomponents.fiori.IUploadCollectionItem[]}
+		 * @slot items
 		 * @public
 		 */
 		"default": {
@@ -115,6 +134,10 @@ const metadata = {
 
 		/**
 		 * 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[]}
 		 * @slot
@@ -125,16 +148,29 @@ const metadata = {
 		},
 	},
 	events: /** @lends sap.ui.webcomponents.fiori.UploadCollection.prototype */ {
+		/**
+		 * 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.webcomponents.fiori.UploadCollection#drop
+		 * @readonly
+		 * @param {DataTransfer} dataTransfer The <code>drop</code> event operation data.
+		 * @public
+		 * @native
+		 */
+		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.webcomponents.fiori.UploadCollection#file-deleted
+		 * @event sap.ui.webcomponents.fiori.UploadCollection#item-delete
 		 * @param {HTMLElement} item The <code>ui5-upload-collection-item</code> which was renamed.
 		 * @public
 		 */
-		"file-deleted": {
+		"item-delete": {
 			detail: {
 				item: { type: HTMLElement },
 			},
@@ -164,7 +200,7 @@ const metadata = {
  * It also allows you to show already uploaded files.
  *
  * <h3>ES6 Module Import</h3>
- * <code>import @ui5/webcomponents-fiori/dist/UploadCollection.js";</code>
+ * <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>)
  *
@@ -204,12 +240,11 @@ class UploadCollection extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents-fiori");
+		UploadCollection.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
 	}
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents-fiori");
 		this._bodyDnDHandler = event => {
 			if (this._dndOverlayMode !== UploadCollectionDnDOverlayMode.Drop) {
 				this._dndOverlayMode = event.mode;
@@ -218,7 +253,7 @@ class UploadCollection extends UI5Element {
 	}
 
 	onEnterDOM() {
-		if (this.noDnd) {
+		if (this.hideDragOverlay) {
 			return;
 		}
 
@@ -226,7 +261,7 @@ class UploadCollection extends UI5Element {
 	}
 
 	onExitDOM() {
-		if (this.noDnd) {
+		if (this.hideDragOverlay) {
 			return;
 		}
 
@@ -234,7 +269,7 @@ class UploadCollection extends UI5Element {
 	}
 
 	_ondragenter(event) {
-		if (this.noDnd) {
+		if (this.hideDragOverlay) {
 			return;
 		}
 
@@ -246,23 +281,27 @@ class UploadCollection extends UI5Element {
 	}
 
 	_ondrop(event) {
-		if (this.noDnd) {
+		if (this.hideDragOverlay) {
 			return;
 		}
 
+		if (event.target !== this.shadowRoot.querySelector(".uc-dnd-overlay")) {
+			event.stopPropagation();
+		}
+
 		this._dndOverlayMode = UploadCollectionDnDOverlayMode.None;
 	}
 
 	_ondragover(event) {
-		if (this.noDnd) {
+		if (this.hideDragOverlay) {
 			return;
 		}
 
 		event.preventDefault();
 	}
 
-	_ondragleave(event) {
-		if (this.noDnd) {
+	_ondragleave() {
+		if (this.hideDragOverlay) {
 			return;
 		}
 
@@ -270,7 +309,7 @@ class UploadCollection extends UI5Element {
 	}
 
 	_onItemDelete(event) {
-		this.fireEvent("file-deleted", { item: event.detail.item });
+		this.fireEvent("item-delete", { item: event.detail.item });
 	}
 
 	_onSelectionChange(event) {
@@ -288,6 +327,10 @@ class UploadCollection extends UI5Element {
 				"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,
+			},
 		};
 	}
 
@@ -304,23 +347,27 @@ class UploadCollection extends UI5Element {
 	}
 
 	get _showNoData() {
-		return this.items.length === 0 && !this._showDndOverlay;
+		return this.items.length === 0;
 	}
 
 	get _noDataText() {
-		return this.noDataText || this.i18nBundle.getText(UPLOADCOLLECTION_NO_DATA_TEXT);
+		return this.noDataText || UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_NO_DATA_TEXT);
 	}
 
 	get _noDataDescription() {
-		return this.noDataDescription || this.i18nBundle.getText(UPLOADCOLLECTION_NO_DATA_DESCRIPTION);
+		return this.noDataDescription || UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_NO_DATA_DESCRIPTION);
+	}
+
+	get _roleDescription() {
+		return UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_ARIA_ROLE_DESCRIPTION);
 	}
 
 	get _dndOverlayText() {
 		if (this._dndOverlayMode === UploadCollectionDnDOverlayMode.Drag) {
-			return this.i18nBundle.getText(UPLOADCOLLECTION_DRAG_FILE_INDICATOR);
+			return UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_DRAG_FILE_INDICATOR);
 		}
 
-		return this.i18nBundle.getText(UPLOADCOLLECTION_DROP_FILE_INDICATOR);
+		return UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_DROP_FILE_INDICATOR);
 	}
 }