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

package/src/Timeline.js

@@ -1,13 +1,19 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import TimelineTemplate from "./generated/templates/TimelineTemplate.lit.js";
+import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import { TIMELINE_ARIA_LABEL } from "./generated/i18n/i18n-defaults.js";
+import TimelineTemplate from "./generated/templates/TimelineTemplate.lit.js";
 import TimelineItem from "./TimelineItem.js";
 
 // Styles
 import styles from "./generated/themes/Timeline.css.js";
+import TimelineLayout from "./types/TimelineLayout.js";
+
+const SHORT_LINE_WIDTH = "ShortLineWidth";
+const LARGE_LINE_WIDTH = "LargeLineWidth";
 
 /**
  * @public
@@ -16,12 +22,46 @@ const metadata = {
 	tag: "ui5-timeline",
 	languageAware: true,
 	managedSlots: true,
+	properties: /** @lends sap.ui.webcomponents.fiori.Timeline.prototype */ {
+		/**
+		 * Defines the items orientation.
+		 *
+		 * <br><br>
+		 * <b>Note:</b>
+		 * Available options are:
+		 * <ul>
+	 	* <li><code>Vertical</code></li>
+	 	* <li><code>Horizontal</code></li>
+		 * </ul>
+		 *
+		 * @type {TimelineLayout}
+		 * @defaultvalue "Vertical"
+		 * @since 1.0.0-rc.15
+		 * @public
+		 */
+		layout: {
+			type: TimelineLayout,
+			defaultValue: TimelineLayout.Vertical,
+		},
+
+		/**
+		 * Defines the accessible ARIA name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.2.0
+		 */
+		accessibleName: {
+			type: String,
+		},
+	},
 	slots: /** @lends sap.ui.webcomponents.fiori.Timeline.prototype */ {
 		/**
 		 * Determines the content of the <code>ui5-timeline</code>.
 		 *
-		 * @type {HTMLElement[]}
-		 * @slot
+		 * @type {sap.ui.webcomponents.fiori.ITimelineItem[]}
+		 * @slot items
 		 * @public
 		 */
 		"default": {
@@ -30,6 +70,7 @@ const metadata = {
 			individualSlots: true,
 		},
 	},
+
 };
 
 /**
@@ -72,8 +113,9 @@ class Timeline extends UI5Element {
 	constructor() {
 		super();
 
-		this.initItemNavigation();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents-fiori");
+		this._itemNavigation = new ItemNavigation(this, {
+			getItemsCallback: () => this.items,
+		});
 	}
 
 	static get dependencies() {
@@ -81,16 +123,58 @@ class Timeline extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents-fiori");
+		Timeline.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
 	}
 
-	initItemNavigation() {
-		this._itemNavigation = new ItemNavigation(this);
-		this._itemNavigation.getItemsCallback = () => this.items;
+	get ariaLabel() {
+		return this.accessibleName
+			? `${Timeline.i18nBundle.getText(TIMELINE_ARIA_LABEL)} ${this.accessibleName}`
+			: Timeline.i18nBundle.getText(TIMELINE_ARIA_LABEL);
 	}
 
-	get ariaLabel() {
-		return this.i18nBundle.getText(TIMELINE_ARIA_LABEL);
+	_onfocusin(event) {
+		const target = event.target;
+
+		this._itemNavigation.setCurrentItem(target);
+	}
+
+	onBeforeRendering() {
+		this._itemNavigation.navigationMode = this.layout === TimelineLayout.Horizontal ? NavigationMode.Horizontal : NavigationMode.Vertical;
+
+		for (let i = 0; i < this.items.length; i++) {
+			this.items[i].layout = this.layout;
+			if (this.items[i + 1] && !!this.items[i + 1].icon) {
+				this.items[i]._lineWidth = SHORT_LINE_WIDTH;
+			} else if (this.items[i].icon && this.items[i + 1] && !this.items[i + 1].icon) {
+				this.items[i]._lineWidth = LARGE_LINE_WIDTH;
+			}
+		}
+	}
+
+	_onkeydown(event) {
+		if (isTabNext(event)) {
+			if (!event.target.nameClickable || event.isMarked === "link") {
+				this._handleTabNextOrPrevious(event, isTabNext(event));
+			}
+		} else if (isTabPrevious(event)) {
+			this._handleTabNextOrPrevious(event);
+		}
+	}
+
+	_handleTabNextOrPrevious(event, isNext) {
+		const nextTargetIndex = isNext ? this.items.indexOf(event.target) + 1 : this.items.indexOf(event.target) - 1;
+		const nextTarget = this.items[nextTargetIndex];
+		if (!nextTarget) {
+			return;
+		}
+		if (nextTarget.nameClickable && !isNext) {
+			event.preventDefault();
+			nextTarget.shadowRoot.querySelector("[ui5-link]").focus();
+			return;
+		}
+		event.preventDefault();
+		nextTarget.focus();
+		this._itemNavigation.setCurrentItem(nextTarget);
 	}
 }
 

package/src/TimelineItem.hbs

@@ -2,19 +2,20 @@
 	class="ui5-tli-root"
 	dir="{{effectiveDir}}"
 >
-	<div class="ui5-tli-indicator">
-		{{#if icon}}
-			<div class="ui5-tli-icon-outer">
+	<div class="{{classes.indicator}}">
+		<div class="ui5-tli-icon-outer">
+			{{#if icon}}
 				<ui5-icon class="ui5-tli-icon" name="{{icon}}"></ui5-icon>
-			</div>
-		{{/if}}
+			{{else}}
+				<div class="ui5-tli-dummy-icon-container"></div>
+			{{/if}}
+		</div>
 	</div>
-	<div class="ui5-tli-bubble" tabindex="{{_tabIndex}}" role="option" data-sap-focus-ref>
+	<div class="ui5-tli-bubble" tabindex="{{_tabIndex}}" data-sap-focus-ref>
 		<div class="ui5-tli-title">
-			{{#if itemName}}
-				{{> itemName}}
+			{{#if name}}
+				{{> name}}
 			{{/if}}
-
 			<span>{{titleText}}</span>
 		</div>
 		<div class="ui5-tli-subtitle">{{subtitleText}}</div>
@@ -24,16 +25,14 @@
 				<slot></slot>
 			</div>
 		{{/if}}
-		<span class="ui5-tli-bubble-arrow ui5-tli-bubble-arrow--left"></span>
+		<span class="{{classes.bubbleArrowPosition}}"></span>
 	</div>
 </div>
 
-{{#*inline "itemName"}}
-	{{#if itemNameClickable}}
-		<ui5-link @click="{{onItemNamePress}}">{{itemName}}</ui5-link>
+{{#*inline "name"}}
+	{{#if nameClickable}}
+		<ui5-link @click="{{onNamePress}}" class="ui5-tli-title-name-clickable">{{name}}&nbsp;</ui5-link>
+	{{else}}
+		<span class="ui5-tli-title-name">{{name}}&nbsp;</span>
 	{{/if}}
-
-	{{#unless itemNameClickable}}
-		<span>{{itemName}}</span>
-	{{/unless}}
-{{/inline}}
+{{/inline}}

package/src/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/src/UploadCollection.hbs

@@ -1,30 +1,34 @@
-<div class="ui5-uc-root">
-	<div class="ui5-uc-header">
-		<slot name="header"></slot>
-	</div>
+<div
+	class="ui5-uc-root"
+	role="region"
+	aria-roledescription="{{_roleDescription}}"
+	@drop="{{_ondrop}}">
 	<div class="{{classes.content}}">
 		<ui5-list
+			accessible-name="{{accessibleName}}"
 			mode="{{mode}}"
 			@ui5-selection-change="{{_onSelectionChange}}"
 			@ui5-item-delete="{{_onItemDelete}}"
 		>
+			{{!-- forward slot header to inner list slot header --}}
+			<slot slot="header" name="header"></slot>
 			<slot></slot>
 		</ui5-list>
 		{{#if _showNoData}}
-			<div class="uc-no-files">
+			<div class="{{classes.noFiles}}">
 				<div class="icon-container">
 					<ui5-icon name="document"></ui5-icon>
 				</div>
-				<ui5-title level="H2">{{_noDataText}}</ui5-title>
-				<ui5-label class="subtitle">{{_noDataDescription}}</ui5-label>
+				<ui5-label class="title" wrapping-type="Normal">{{_noDataText}}</ui5-label>
+				<ui5-label class="subtitle" wrapping-type="Normal">{{_noDataDescription}}</ui5-label>
 			</div>
-		{{else if _showDndOverlay}}
+		{{/if}}
+		{{#if _showDndOverlay}}
 			<div
 				class="{{classes.dndOverlay}}"
 				@dragenter="{{_ondragenter}}"
 				@dragleave="{{_ondragleave}}"
 				@dragover="{{_ondragover}}"
-				@drop="{{_ondrop}}"
 			>
 				<ui5-icon name="upload-to-cloud"></ui5-icon>
 				<span class="dnd-overlay-text">{{_dndOverlayText}}</span>

package/src/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);
 	}
 }