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

package/src/{Timeline.js → Timeline.ts}

@@ -1,9 +1,17 @@
 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 property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { I18nText } 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 NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
+import { getEventMark } from "@ui5/webcomponents-base/dist/MarkedEvents.js";
+// @ts-ignore
 import { TIMELINE_ARIA_LABEL } from "./generated/i18n/i18n-defaults.js";
 import TimelineTemplate from "./generated/templates/TimelineTemplate.lit.js";
 import TimelineItem from "./TimelineItem.js";
@@ -15,64 +23,6 @@ import TimelineLayout from "./types/TimelineLayout.js";
 const SHORT_LINE_WIDTH = "ShortLineWidth";
 const LARGE_LINE_WIDTH = "LargeLineWidth";
 
-/**
- * @public
- */
-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 {sap.ui.webcomponents.fiori.types.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 {sap.ui.webcomponents.fiori.ITimelineItem[]}
-		 * @slot items
-		 * @public
-		 */
-		"default": {
-			propertyName: "items",
-			type: HTMLElement,
-			individualSlots: true,
-		},
-	},
-
-};
-
 /**
  * @class
  *
@@ -86,17 +36,58 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.Timeline
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.fiori.Timeline
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-timeline
  * @appenddocs TimelineItem
  * @public
  * @since 0.8.0
  */
+@customElement("ui5-timeline")
+@languageAware
 class Timeline extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
+	/**
+	 * 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 {sap.ui.webc.fiori.types.TimelineLayout}
+	 * @name sap.ui.webc.fiori.Timeline.prototype.layout
+	 * @defaultvalue "Vertical"
+	 * @since 1.0.0-rc.15
+	 * @public
+	 */
+	@property({ type: TimelineLayout, defaultValue: TimelineLayout.Vertical })
+	layout!: TimelineLayout;
+
+	/**
+	 * Defines the accessible ARIA name of the component.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.fiori.Timeline.prototype.accessibleName
+	 * @defaultvalue: ""
+	 * @public
+	 * @since 1.2.0
+	 */
+	@property()
+	accessibleName!: string;
+
+	/**
+	 * Determines the content of the <code>ui5-timeline</code>.
+	 *
+	 * @type {sap.ui.webc.fiori.ITimelineItem[]}
+	 * @name sap.ui.webc.fiori.Timeline.prototype.default
+	 * @slot items
+	 * @public
+	 */
+	@slot({ type: HTMLElement, individualSlots: true, "default": true })
+	items!: Array<TimelineItem>;
 
 	static get styles() {
 		return styles;
@@ -110,6 +101,10 @@ class Timeline extends UI5Element {
 		return TimelineTemplate;
 	}
 
+	static i18nBundle: I18nBundle;
+
+	_itemNavigation: ItemNavigation;
+
 	constructor() {
 		super();
 
@@ -128,18 +123,18 @@ class Timeline extends UI5Element {
 
 	get ariaLabel() {
 		return this.accessibleName
-			? `${Timeline.i18nBundle.getText(TIMELINE_ARIA_LABEL)} ${this.accessibleName}`
-			: Timeline.i18nBundle.getText(TIMELINE_ARIA_LABEL);
+			? `${Timeline.i18nBundle.getText(TIMELINE_ARIA_LABEL as I18nText)} ${this.accessibleName}`
+			: Timeline.i18nBundle.getText(TIMELINE_ARIA_LABEL as I18nText);
 	}
 
-	_onfocusin(event) {
-		const target = event.target;
+	_onfocusin(e: FocusEvent) {
+		const target = e.target as TimelineItem;
 
 		this._itemNavigation.setCurrentItem(target);
 	}
 
 	onBeforeRendering() {
-		this._itemNavigation.navigationMode = this.layout === TimelineLayout.Horizontal ? NavigationMode.Horizontal : NavigationMode.Vertical;
+		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;
@@ -151,28 +146,31 @@ class Timeline extends UI5Element {
 		}
 	}
 
-	_onkeydown(event) {
-		if (isTabNext(event)) {
-			if (!event.target.nameClickable || event.isMarked === "link") {
-				this._handleTabNextOrPrevious(event, isTabNext(event));
+	_onkeydown(e: KeyboardEvent) {
+		const target = e.target as TimelineItem;
+
+		if (isTabNext(e)) {
+			if (!target.nameClickable || getEventMark(e) === "link") {
+				this._handleTabNextOrPrevious(e, isTabNext(e));
 			}
-		} else if (isTabPrevious(event)) {
-			this._handleTabNextOrPrevious(event);
+		} else if (isTabPrevious(e)) {
+			this._handleTabNextOrPrevious(e);
 		}
 	}
 
-	_handleTabNextOrPrevious(event, isNext) {
-		const nextTargetIndex = isNext ? this.items.indexOf(event.target) + 1 : this.items.indexOf(event.target) - 1;
+	_handleTabNextOrPrevious(e: KeyboardEvent, isNext?: boolean) {
+		const target = e.target as TimelineItem;
+		const nextTargetIndex = isNext ? this.items.indexOf(target) + 1 : this.items.indexOf(target) - 1;
 		const nextTarget = this.items[nextTargetIndex];
 		if (!nextTarget) {
 			return;
 		}
 		if (nextTarget.nameClickable && !isNext) {
-			event.preventDefault();
-			nextTarget.shadowRoot.querySelector("[ui5-link]").focus();
+			e.preventDefault();
+			nextTarget.focusLink();
 			return;
 		}
-		event.preventDefault();
+		e.preventDefault();
 		nextTarget.focus();
 		this._itemNavigation.setCurrentItem(nextTarget);
 	}

package/src/TimelineItem.ts

@@ -0,0 +1,187 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.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";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * An entry posted on the timeline.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.fiori.TimelineItem
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-timeline-item
+ * @implements sap.ui.webc.fiori.ITimelineItem
+ * @public
+ */
+@customElement("ui5-timeline-item")
+/**
+ * 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>name-clickable</code>
+ * attribute is not set.
+ *
+ * @event sap.ui.webc.fiori.TimelineItem#name-click
+ * @public
+ */
+@event("name-click")
+class TimelineItem extends UI5Element implements ITabbable {
+	/**
+	 * Defines the icon to be displayed as graphical element within the <code>ui5-timeline-item</code>.
+	 * SAP-icons font provides numerous options.
+	 * <br><br>
+	 *
+	 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.fiori.TimelineItem.prototype.icon
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	icon!: string;
+
+	/**
+	 * Defines the name of the item, displayed before the <code>title-text</code>.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.fiori.TimelineItem.prototype.name
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	name!: string;
+
+	/**
+	 * Defines if the <code>name</code> is clickable.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.fiori.TimelineItem.prototype.nameClickable
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	nameClickable!: boolean;
+
+	/**
+	 * Defines the title text of the component.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.fiori.TimelineItem.prototype.titleText
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	titleText!: string;
+
+	/**
+	 * Defines the subtitle text of the component.
+	 * @type {string}
+	 * @name sap.ui.webc.fiori.TimelineItem.prototype.subtitleText
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	subtitleText!: string;
+
+	@property({ defaultValue: "-1", noAttribute: true })
+	_tabIndex!: string;
+
+	/**
+	 * Defines the items orientation.
+	 *
+	 * @type {sap.ui.webc.fiori.types.TimelineLayout}
+	 * @defaultvalue "Vertical"
+	 * @private
+	 */
+	@property({ type: TimelineLayout, defaultValue: TimelineLayout.Vertical })
+	layout!: TimelineLayout;
+
+	/**
+	 * Defines the indicator line width.
+	 *
+	 * @type {string}
+	 * @private
+	 */
+	@property()
+	_lineWidth!: string;
+
+	/**
+	 * Determines the description of the <code>ui5-timeline-item</code>.
+	 *
+	 * @type {Node[]}
+	 * @name sap.ui.webc.fiori.TimelineItem.prototype.default
+	 * @slot
+	 * @public
+	 */
+
+	static get render() {
+		return litRender;
+	}
+
+	static get template() {
+		return TimelineItemTemplate;
+	}
+
+	static get styles() {
+		return styles;
+	}
+
+	constructor() {
+		super();
+	}
+
+	onNamePress() {
+		this.fireEvent("name-click", {});
+	}
+
+	static get dependencies() {
+		return [
+			Icon,
+			Link,
+		];
+	}
+
+	/**
+	 * Focus the internal link.
+	 * @protected
+	 */
+	focusLink() {
+		this.shadowRoot!.querySelector<Link>("[ui5-link]")?.focus();
+	}
+
+	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();
+
+export default TimelineItem;