@ui5/webcomponents 0.0.0-e818f286e → 0.0.0-ee3bbe46b

package/src/TimeSelection.js

@@ -28,7 +28,6 @@ import {
 	TIMEPICKER_HOURS_LABEL,
 	TIMEPICKER_MINUTES_LABEL,
 	TIMEPICKER_SECONDS_LABEL,
-	TIMEPICKER_PERIODS_LABEL,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -43,7 +42,7 @@ const metadata = {
 	tag: "ui5-time-selection",
 	languageAware: true,
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.TimeSelection.prototype */ {
+	properties: /** @lends sap.ui.webc.main.TimeSelection.prototype */ {
 		/**
 		 * Defines a formatted time value.
 		 *
@@ -142,7 +141,7 @@ const metadata = {
 			type: CalendarType,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.TimeSelection.prototype */ {
+	events: /** @lends sap.ui.webc.main.TimeSelection.prototype */ {
 		/**
 		 * Fired when the value changes due to user interaction with the sliders
 		 */
@@ -160,8 +159,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.TimeSelection
- * @extends UI5Element
+ * @alias sap.ui.webc.main.TimeSelection
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-time-selection
  * @private
  * @since 1.0.0-rc.12
@@ -237,7 +236,7 @@ class TimeSelection extends UI5Element {
 	}
 
 	get periodsArray() {
-		return this.getFormat().aDayPeriods.map(x => x.toUpperCase());
+		return this.getFormat().aDayPeriodsAbbrev.map(x => x.toUpperCase());
 	}
 
 	get _hoursSliderFocused() {
@@ -478,7 +477,7 @@ class TimeSelection extends UI5Element {
 	}
 
 	get periodSliderTitle() {
-		return TimeSelection.i18nBundle.getText(TIMEPICKER_PERIODS_LABEL);
+		return "AM/PM";
 	}
 
 	get classes() {

package/src/Title.ts

@@ -0,0 +1,117 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import TitleLevel from "./types/TitleLevel.js";
+import WrappingType from "./types/WrappingType.js";
+
+// Template
+import TitleTemplate from "./generated/templates/TitleTemplate.lit.js";
+
+// Styles
+import titleCss from "./generated/themes/Title.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-title</code> component is used to display titles inside a page.
+ * It is a simple, large-sized text with explicit header/title semantics.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Title";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.Title
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-title
+ * @public
+ */
+@customElement("ui5-title")
+class Title extends UI5Element {
+	/**
+	 * Defines how the text of a component will be displayed when there is not enough space.
+	 * Available options are:
+	 * <ul>
+	 * <li><code>None</code> - The text will be truncated with an ellipsis.</li>
+	 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
+	 * </ul>
+	 *
+	 * @name sap.ui.webc.main.Title.prototype.wrappingType
+	 * @type {sap.ui.webc.main.types.WrappingType}
+	 * @defaultvalue "None"
+	 * @public
+	 */
+	@property({ type: WrappingType, defaultValue: WrappingType.None })
+	wrappingType!: WrappingType
+
+	/**
+	 * Defines the component level.
+	 * Available options are: <code>"H6"</code> to <code>"H1"</code>.
+	 *
+	 * @name sap.ui.webc.main.Title.prototype.level
+	 * @type {sap.ui.webc.main.types.TitleLevel}
+	 * @defaultvalue "H2"
+	 * @public
+	 */
+	@property({ type: TitleLevel, defaultValue: TitleLevel.H2 })
+	level!: TitleLevel;
+
+	/**
+	 * Defines the text of the component.
+	 * <br><br>
+	 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+	 *
+	 * @type {Node[]}
+	 * @slot
+	 * @name sap.ui.webc.main.Title.prototype.default
+	 * @public
+	 */
+
+	static get render() {
+		return litRender;
+	}
+
+	static get template() {
+		return TitleTemplate;
+	}
+
+	static get styles() {
+		return titleCss;
+	}
+
+	get normalizedLevel() {
+		return this.level.toLowerCase();
+	}
+
+	get h1() {
+		return this.normalizedLevel === "h1";
+	}
+
+	get h2() {
+		return this.normalizedLevel === "h2";
+	}
+
+	get h3() {
+		return this.normalizedLevel === "h3";
+	}
+
+	get h4() {
+		return this.normalizedLevel === "h4";
+	}
+
+	get h5() {
+		return this.normalizedLevel === "h5";
+	}
+
+	get h6() {
+		return this.normalizedLevel === "h6";
+	}
+}
+
+Title.define();
+
+export default Title;

package/src/Toast.js

@@ -19,7 +19,7 @@ const MAX_DURATION = 1000;
  */
 const metadata = {
 	tag: "ui5-toast",
-	properties: /** @lends sap.ui.webcomponents.main.Toast.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Toast.prototype */ {
 
 		/**
 		 * Defines the duration in milliseconds for which component
@@ -28,7 +28,7 @@ const metadata = {
 		 * <b>Note:</b> The minimum supported value is <code>500</code> ms
 		 * and even if a lower value is set, the duration would remain <code>500</code> ms.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultvalue 3000
 		 * @public
 		 */
@@ -53,7 +53,7 @@ const metadata = {
 		 * <li><code>BottomEnd</code></li>
 		 * </ul>
 		 *
-		 * @type {ToastPlacement}
+		 * @type {sap.ui.webc.main.types.ToastPlacement}
 		 * @defaultvalue "BottomCenter"
 		 * @public
 		 */
@@ -89,7 +89,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.Toast.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Toast.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 * <br><br>
@@ -136,8 +136,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Toast
- * @extends UI5Element
+ * @alias sap.ui.webc.main.Toast
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-toast
  * @public
  * @since 1.0.0-rc.6

package/src/ToggleButton.js

@@ -11,8 +11,7 @@ import toggleBtnCss from "./generated/themes/ToggleButton.css.js";
  */
 const metadata = {
 	tag: "ui5-toggle-button",
-	altTag: "ui5-togglebutton",
-	properties: /** @lends sap.ui.webcomponents.main.ToggleButton.prototype */ {
+	properties: /** @lends sap.ui.webc.main.ToggleButton.prototype */ {
 		/**
 		 * Determines whether the component is displayed as pressed.
 		 *
@@ -46,8 +45,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.ToggleButton
- * @extends Button
+ * @alias sap.ui.webc.main.ToggleButton
+ * @extends sap.ui.webc.main.Button
  * @tagname ui5-toggle-button
  * @public
  */

package/src/Token.hbs

@@ -13,6 +13,7 @@
 	{{#unless readonly}}
 		<div
 			class="ui5-token--icon"
+			@mousedown="{{_mousedown}}"
 			@click="{{_delete}}"
 		>
 			{{#if closeIcon.length}}

package/src/Token.js

@@ -25,7 +25,7 @@ const metadata = {
 	tag: "ui5-token",
 	languageAware: true,
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.Token.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Token.prototype */ {
 
 		/**
 		 * Defines the text of the token.
@@ -70,6 +70,15 @@ const metadata = {
 		 */
 		focused: { type: Boolean },
 
+		/**
+		 * Defines whether the token is being deleted
+		 * This flag is used in the ui5-multi-combobox
+		 *
+		 * @type {boolean}
+		 * @private
+		 */
+		 toBeDeleted: { type: Boolean },
+
 		/**
 		 * Defines the tabIndex of the component.
 		 * @type {string}
@@ -78,13 +87,13 @@ const metadata = {
 		_tabIndex: { type: String, defaultValue: "-1", noAttribute: true },
 	},
 
-	slots: /** @lends sap.ui.webcomponents.main.Token.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Token.prototype */ {
 
 		/**
 		 * Defines the close icon for the token. If nothing is provided to this slot, the default close icon will be used.
 		 * Accepts <code>ui5-icon</code>.
 		 *
-		 * @type {sap.ui.webcomponents.main.IIcon}
+		 * @type {sap.ui.webc.main.IIcon}
 		 * @slot
 		 * @public
 		 * @since 1.0.0-rc.9
@@ -94,7 +103,7 @@ const metadata = {
 		},
 	},
 
-	events: /** @lends sap.ui.webcomponents.main.Token.prototype */ {
+	events: /** @lends sap.ui.webc.main.Token.prototype */ {
 
 		/**
 		 * Fired when the backspace, delete or close icon of the token is pressed
@@ -133,11 +142,11 @@ const metadata = {
  * <code>import "@ui5/webcomponents/dist/Token.js";</code>
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Token
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.Token
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-token
  * @since 1.0.0-rc.9
- * @implements sap.ui.webcomponents.main.IToken
+ * @implements sap.ui.webc.main.IToken
  * @public
  */
 class Token extends UI5Element {
@@ -170,6 +179,10 @@ class Token extends UI5Element {
 		this.focused = !this.focused;
 	}
 
+	_mousedown(event) {
+		this.toBeDeleted = true;
+	}
+
 	 _delete() {
 		this.fireEvent("delete");
 	 }
@@ -194,6 +207,10 @@ class Token extends UI5Element {
 		}
 	}
 
+	onBeforeRendering() {
+		this.toBeDeleted = false;
+	}
+
 	get tokenDeletableText() {
 		return Token.i18nBundle.getText(TOKEN_ARIA_DELETABLE);
 	}

package/src/Tokenizer.js

@@ -64,7 +64,7 @@ const metadata = {
 	tag: "ui5-tokenizer",
 	languageAware: true,
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Tokenizer.prototype */ {
 		"default": {
 			propertyName: "tokens",
 			type: HTMLElement,
@@ -75,7 +75,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Tokenizer.prototype */ {
 		showMore: { type: Boolean },
 
 		disabled: { type: Boolean },
@@ -96,7 +96,7 @@ const metadata = {
 		/**
 		 * Indicates the value state of the related input component.
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @private
 		 */
@@ -107,7 +107,7 @@ const metadata = {
 
 		_nMoreCount: { type: Integer },
 	},
-	events: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ {
+	events: /** @lends sap.ui.webc.main.Tokenizer.prototype */ {
 		"token-delete": {
 			detail: {
 				ref: { type: HTMLElement },
@@ -131,8 +131,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Tokenizer
- * @extends UI5Element
+ * @alias sap.ui.webc.main.Tokenizer
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-tokenizer
  * @usestextcontent
  * @private
@@ -242,14 +242,40 @@ class Tokenizer extends UI5Element {
 	}
 
 	_delete(event) {
+		if (!event.detail) { // if there are no details, the event is triggered by a click
+			this._tokenClickDelete(event, event.target);
+			return;
+		}
+
 		if (this._selectedTokens.length) {
-			this._selectedTokens.forEach(token => this._tokenDelete(event, token));
+			this._selectedTokens.forEach(token => this._tokenKeyboardDelete(event, token));
 		} else {
-			this._tokenDelete(event);
+			this._tokenKeyboardDelete(event);
 		}
 	}
 
-	_tokenDelete(event, token) {
+	_tokenClickDelete(event, token) {
+		const tokens = this._getVisibleTokens();
+		const deletedTokenIndex = token ? tokens.indexOf(token) : tokens.indexOf(event.target); // The index of the token that just got deleted
+		const nextTokenIndex = deletedTokenIndex === tokens.length - 1 ? deletedTokenIndex - 1 : deletedTokenIndex + 1; // The index of the next token that needs to be focused next due to the deletion
+		const nextToken = tokens[nextTokenIndex]; // if the last item was deleted this will be undefined
+
+		this._handleCurrentItemAfterDeletion(nextToken);
+
+		this.fireEvent("token-delete", { ref: token || event.target });
+	}
+
+	_handleCurrentItemAfterDeletion(nextToken) {
+		if (nextToken && !isPhone()) {
+			this._itemNav.setCurrentItem(nextToken); // update the item navigation with the new token or undefined, if the last was deleted
+
+			setTimeout(() => {
+				nextToken.focus();
+			}, 0);
+		}
+	}
+
+	_tokenKeyboardDelete(event, token) {
 		let nextTokenIndex; // The index of the next token that needs to be focused next due to the deletion
 
 		const tokens = this._getVisibleTokens();
@@ -272,13 +298,7 @@ class Tokenizer extends UI5Element {
 			nextToken = notSelectedTokens[0];
 		}
 
-		if (nextToken && !isPhone()) {
-			this._itemNav.setCurrentItem(nextToken); // update the item navigation with the new token or undefined, if the last was deleted
-
-			setTimeout(() => {
-				nextToken.focus();
-			}, 0);
-		}
+		this._handleCurrentItemAfterDeletion(nextToken);
 
 		this.fireEvent("token-delete", { ref: token || event.target });
 	}
@@ -428,8 +448,12 @@ class Tokenizer extends UI5Element {
 	}
 
 	_onmousedown(event) {
-		this._itemNav.setCurrentItem(event.target);
-		this._scrollToToken(event.target);
+		if (event.target.hasAttribute("ui5-token")) {
+			if (!event.target.toBeDeleted) {
+				this._itemNav.setCurrentItem(event.target);
+				this._scrollToToken(event.target);
+			}
+		}
 	}
 
 	_toggleTokenSelection(tokens) {

package/src/Tree.hbs

@@ -1,44 +1,22 @@
-<ui5-list
+<ui5-tree-list
     .mode="{{mode}}"
     .headerText="{{headerText}}"
     .footerText="{{footerText}}"
     .noDataText="{{noDataText}}"
     .accessibleRole="{{_role}}"
+    .accessibleName="{{_label}}"
+	.accessibleRoleDescription="{{accessibleRoleDescription}}"
     @ui5-item-click="{{_onListItemClick}}"
     @ui5-item-delete="{{_onListItemDelete}}"
     @ui5-selection-change="{{_onListSelectionChange}}"
+    @ui5-toggle="{{_onListItemToggle}}"
+    @ui5-step-in="{{_onListItemStepIn}}"
+    @ui5-step-out="{{_onListItemStepOut}}"
+    @mouseover="{{_onListItemMouseOver}}"
+    @mouseout="{{_onListItemMouseOut}}"
     class="ui5-tree-root"
 >
     <slot name="header" slot="header"></slot>
-    {{#each _listItems}}
-        <ui5-li-tree
-            type="Active"
-            level="{{this.level}}"
-            icon="{{this.treeItem.icon}}"
-            ?indeterminate="{{this.treeItem.indeterminate}}"
-            additional-text="{{this.treeItem.additionalText}}"
-            additional-text-state="{{this.treeItem.additionalTextState}}"
-            title="{{this.treeItem.title}}"
-            ?_toggle-button-end="{{ ../_toggleButtonEnd}}"
-            ?_minimal="{{../_minimal}}"
-            .treeItem="{{this.treeItem}}"
-            .expanded="{{this.treeItem.expanded}}"
-            .selected="{{this.treeItem.selected}}"
-            .showToggleButton="{{this.treeItem.requiresToggleButton}}"
-            ._posinset="{{this.posinset}}"
-            ._setsize="{{this.size}}"
-            @ui5-toggle="{{../_onListItemToggle}}"
-            @ui5-step-in="{{../_onListItemStepIn}}"
-            @ui5-step-out="{{../_onListItemStepOut}}"
-            @mouseover="{{../_onListItemMouseOver}}"
-            @mouseout="{{../_onListItemMouseOut}}"
-            exportparts="icon, toggle-icon"
-        >
-            {{> treeListItemContent}}
-        </ui5-li-tree>
-    {{/each}}
-</ui5-list>
 
-{{#*inline "treeListItemContent"}}
-	{{this.treeItem.text}}
-{{/inline}}
+    <slot></slot>
+</ui5-tree-list>