@ui5/webcomponents 1.11.0-rc.3 → 1.11.0

package/src/Title.ts

@@ -1,7 +1,7 @@
 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 property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import TitleLevel from "./types/TitleLevel.js";
 import WrappingType from "./types/WrappingType.js";
 
@@ -30,7 +30,12 @@ import titleCss from "./generated/themes/Title.css.js";
  * @tagname ui5-title
  * @public
  */
-@customElement("ui5-title")
+@customElement({
+	tag: "ui5-title",
+	renderer: litRender,
+	template: TitleTemplate,
+	styles: titleCss,
+})
 class Title extends UI5Element {
 	/**
 	 * Defines how the text of a component will be displayed when there is not enough space.
@@ -71,18 +76,6 @@ class Title extends UI5Element {
 	 * @public
 	 */
 
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return TitleTemplate;
-	}
-
-	static get styles() {
-		return titleCss;
-	}
-
 	get normalizedLevel() {
 		return this.level.toLowerCase();
 	}

package/src/Toast.ts

@@ -53,8 +53,12 @@ const MAX_DURATION = 1000;
  * @public
  * @since 1.0.0-rc.6
  */
-
-@customElement("ui5-toast")
+@customElement({
+	tag: "ui5-toast",
+	renderer: litRender,
+	styles: ToastCss,
+	template: ToastTemplate,
+})
 class Toast extends UI5Element {
 	/**
 	 * Defines the duration in milliseconds for which component
@@ -132,18 +136,6 @@ class Toast extends UI5Element {
 
 	_reopen: boolean;
 
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return ToastCss;
-	}
-
-	static get template() {
-		return ToastTemplate;
-	}
-
 	constructor() {
 		super();
 

package/src/ToggleButton.ts

@@ -3,7 +3,6 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 
 import { isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isSafari } from "@ui5/webcomponents-base/dist/Device.js";
-import type { ComponentStylesData } from "@ui5/webcomponents-base/dist/types.js";
 import Button from "./Button.js";
 import ToggleButtonTemplate from "./generated/templates/ToggleButtonTemplate.lit.js";
 
@@ -35,7 +34,11 @@ import toggleBtnCss from "./generated/themes/ToggleButton.css.js";
  * @tagname ui5-toggle-button
  * @public
  */
-@customElement("ui5-toggle-button")
+@customElement({
+	tag: "ui5-toggle-button",
+	template: ToggleButtonTemplate,
+	styles: [Button.styles, toggleBtnCss],
+})
 class ToggleButton extends Button {
 	/**
 	 * Determines whether the component is displayed as pressed.
@@ -48,14 +51,6 @@ class ToggleButton extends Button {
 	@property({ type: Boolean })
 	pressed!: boolean;
 
-	static get template() {
-		return ToggleButtonTemplate;
-	}
-
-	static get styles(): ComponentStylesData {
-		return [Button.styles, toggleBtnCss];
-	}
-
 	_onclick() {
 		this.pressed = !this.pressed;
 

package/src/Token.ts

@@ -3,7 +3,6 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import languageAware from "@ui5/webcomponents-base/dist/decorators/languageAware.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
 import {
@@ -23,7 +22,7 @@ import Icon from "./Icon.js";
 import TokenTemplate from "./generated/templates/TokenTemplate.lit.js";
 
 // Styles
-import styles from "./generated/themes/Token.css.js";
+import tokenStyles from "./generated/themes/Token.css.js";
 
 type TokenDeleteEventDetail = {
 	backSpace: boolean;
@@ -49,9 +48,14 @@ type TokenDeleteEventDetail = {
  * @implements sap.ui.webc.main.IToken
  * @public
  */
-@customElement("ui5-token")
-@languageAware
-
+@customElement({
+	tag: "ui5-token",
+	languageAware: true,
+	renderer: litRender,
+	template: TokenTemplate,
+	styles: tokenStyles,
+	dependencies: [Icon],
+})
 /**
  * Fired when the the component is selected by user interaction with mouse or by clicking space.
  *
@@ -165,18 +169,6 @@ class Token extends UI5Element implements ITabbable {
 
 	static i18nBundle: I18nBundle;
 
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return TokenTemplate;
-	}
-
-	static get styles() {
-		return styles;
-	}
-
 	_handleSelect() {
 		this.selected = !this.selected;
 		this.fireEvent("select");
@@ -234,10 +226,6 @@ class Token extends UI5Element implements ITabbable {
 		return "decline";
 	}
 
-	static get dependencies() {
-		return [Icon];
-	}
-
 	static async onDefine() {
 		Token.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}

package/src/Tokenizer.ts

@@ -3,7 +3,6 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import languageAware from "@ui5/webcomponents-base/dist/decorators/languageAware.js";
 import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -59,7 +58,7 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
-import styles from "./generated/themes/Tokenizer.css.js";
+import TokenizerCss from "./generated/themes/Tokenizer.css.js";
 import TokenizerPopoverCss from "./generated/themes/TokenizerPopover.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
@@ -90,8 +89,27 @@ enum ClipboardDataOperation {
  * @usestextcontent
  * @private
  */
-@customElement("ui5-tokenizer")
-@languageAware
+@customElement({
+	tag: "ui5-tokenizer",
+	languageAware: true,
+	renderer: litRender,
+	template: TokenizerTemplate,
+	styles: TokenizerCss,
+	staticAreaStyles: [
+		ResponsivePopoverCommonCss,
+		ValueStateMessageCss,
+		SuggestionsCss,
+		TokenizerPopoverCss,
+	],
+	staticAreaTemplate: TokenizerPopoverTemplate,
+	dependencies: [
+		ResponsivePopover,
+		List,
+		StandardListItem,
+		Title,
+		Button,
+	],
+})
 
 @event("token-delete", {
 	detail: {
@@ -104,7 +122,6 @@ enum ClipboardDataOperation {
 		ref: { type: HTMLElement },
 	},
 })
-
 class Tokenizer extends UI5Element {
 	@property({ type: Boolean })
 	showMore!: boolean;
@@ -151,26 +168,6 @@ class Tokenizer extends UI5Element {
 	_scrollEnablement: ScrollEnablement;
 	_expandedScrollWidth?: number;
 
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return TokenizerTemplate;
-	}
-
-	static get styles() {
-		return styles;
-	}
-
-	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss, TokenizerPopoverCss];
-	}
-
-	static get staticAreaTemplate() {
-		return TokenizerPopoverTemplate;
-	}
-
 	_handleResize() {
 		this._nMoreCount = this.overflownTokens.length;
 	}
@@ -211,11 +208,11 @@ class Tokenizer extends UI5Element {
 	}
 
 	_getTokens() {
-		return this.getSlottedNodes("tokens") as Array<Token>;
+		return this.getSlottedNodes<Token>("tokens");
 	}
 
 	get _tokens() {
-		return this.getSlottedNodes("tokens") as Array<Token>;
+		return this.getSlottedNodes<Token>("tokens");
 	}
 
 	get showPopover() {
@@ -258,9 +255,9 @@ class Tokenizer extends UI5Element {
 		}
 
 		if (this._selectedTokens.length) {
-			this._selectedTokens.forEach(token => this._tokenKeyboardDelete(e, token));
+			this._selectedTokens.forEach(token => this.deleteToken(token, e.detail.backSpace));
 		} else {
-			this._tokenKeyboardDelete(e, target);
+			this.deleteToken(target, e.detail.backSpace);
 		}
 	}
 
@@ -286,24 +283,31 @@ class Tokenizer extends UI5Element {
 		}
 	}
 
-	_tokenKeyboardDelete(e: CustomEvent<TokenDeleteEventDetail>, token: Token) {
-		let nextTokenIndex; // The index of the next token that needs to be focused next due to the deletion
-		const target = e.target as Token;
+	/**
+	 * Removes a token from the Tokenizer.
+	 * This method should only be used by ui5-multi-combobox and ui5-multi-input
+	 *
+	 * @protected
+	 * @param token Token to be focused.
+	 * @param forwardFocusToPrevious Indicates whether the focus will be forwarded to previous or next token after deletion.
+	 */
+	deleteToken(token: Token, forwardFocusToPrevious?: boolean) {
 		const tokens = this._getVisibleTokens();
-		const deletedTokenIndex = token ? tokens.indexOf(token) : tokens.indexOf(target); // The index of the token that just got deleted
+		const deletedTokenIndex = tokens.indexOf(token);
+		let nextTokenIndex = (deletedTokenIndex === tokens.length - 1) ? deletedTokenIndex - 1 : deletedTokenIndex + 1;
 		const notSelectedTokens = tokens.filter(t => !t.selected);
 
-		if (e.detail && e.detail.backSpace) { // on backspace key select the previous item (unless deleting the first)
+		if (forwardFocusToPrevious) { // on backspace key select the previous item (unless deleting the first)
 			nextTokenIndex = deletedTokenIndex === 0 ? deletedTokenIndex + 1 : deletedTokenIndex - 1;
 		} else { // on delete key or mouse click on the "x" select the next item (unless deleting the last)
 			nextTokenIndex = deletedTokenIndex === tokens.length - 1 ? deletedTokenIndex - 1 : deletedTokenIndex + 1;
 		}
 
-		let nextToken = tokens[nextTokenIndex]; // if the last item was deleted this will be undefined
+		let nextToken = tokens[nextTokenIndex];
 
 		if (notSelectedTokens.length > 1) {
 			while (nextToken && nextToken.selected) {
-				nextToken = e.detail.backSpace ? tokens[--nextTokenIndex] : tokens[++nextTokenIndex];
+				nextToken = forwardFocusToPrevious ? tokens[--nextTokenIndex] : tokens[++nextTokenIndex];
 			}
 		} else {
 			nextToken = notSelectedTokens[0];
@@ -311,13 +315,13 @@ class Tokenizer extends UI5Element {
 
 		this._handleCurrentItemAfterDeletion(nextToken);
 
-		this.fireEvent("token-delete", { ref: token || e.target });
+		this.fireEvent<TokenizerTokenDeleteEventDetail>("token-delete", { ref: token });
 	}
 
 	itemDelete(e: CustomEvent) {
 		const token = e.detail.item.tokenRef;
 
-		this.fireEvent("token-delete", { ref: token });
+		this.fireEvent<TokenizerTokenDeleteEventDetail>("token-delete", { ref: token });
 	}
 
 	_onkeydown(e: KeyboardEvent) {
@@ -716,16 +720,6 @@ class Tokenizer extends UI5Element {
 		this._itemNav.setCurrentItem(lastToken);
 	}
 
-	static get dependencies() {
-		return [
-			ResponsivePopover,
-			List,
-			StandardListItem,
-			Title,
-			Button,
-		];
-	}
-
 	static async onDefine() {
 		Tokenizer.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
@@ -739,4 +733,5 @@ class Tokenizer extends UI5Element {
 Tokenizer.define();
 
 export default Tokenizer;
+export { ClipboardDataOperation };
 export type { TokenizerTokenDeleteEventDetail };

package/src/Tree.hbs

@@ -16,7 +16,9 @@
     @mouseout="{{_onListItemMouseOut}}"
     class="ui5-tree-root"
 >
-    <slot name="header" slot="header"></slot>
+	{{#if _hasHeader}}
+        <slot name="header" slot="header"></slot>
+	{{/if}}
 
     <slot></slot>
 </ui5-tree-list>

package/src/Tree.ts

@@ -95,8 +95,17 @@ type WalkCallback = (item: TreeItemBase, level: number, index: number) => void;
  * @public
  * @since 1.0.0-rc.8
  */
-@customElement("ui5-tree")
-
+@customElement({
+	tag: "ui5-tree",
+	renderer: litRender,
+	styles: TreeCss,
+	template: TreeTemplate,
+	dependencies: [
+		TreeList,
+		TreeItem,
+		TreeItemCustom,
+	],
+})
 /**
  * Fired when a tree item is expanded or collapsed.
  * <i>Note:</i> You can call <code>preventDefault()</code> on the event object to suppress the event, if needed.
@@ -324,26 +333,6 @@ class Tree extends UI5Element {
 	@slot()
 	header!: Array<HTMLElement>;
 
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return TreeCss;
-	}
-
-	static get template() {
-		return TreeTemplate;
-	}
-
-	static get dependencies() {
-		return [
-			TreeList,
-			TreeItem,
-			TreeItemCustom,
-		];
-	}
-
 	onBeforeRendering() {
 		this._prepareTreeItems();
 	}
@@ -360,6 +349,10 @@ class Tree extends UI5Element {
 		return getEffectiveAriaLabelText(this);
 	}
 
+	get _hasHeader() {
+		return !!this.header.length;
+	}
+
 	_onListItemStepIn(e: CustomEvent<TreeItemBaseStepInEventDetail>) {
 		const treeItem = e.detail.item;
 		if (treeItem.items.length > 0) {

package/src/TreeItem.ts

@@ -39,7 +39,11 @@ import treeItemCss from "./generated/themes/TreeItem.css.js";
  * @implements sap.ui.webc.main.ITreeItem
  * @since 1.0.0-rc.8
  */
-@customElement("ui5-tree-item")
+@customElement({
+	tag: "ui5-tree-item",
+	template: TreeItemTemplate,
+	styles: [TreeItemBase.styles, treeItemCss],
+})
 class TreeItem extends TreeItemBase {
 	/**
 	 * Defines the text of the tree item.
@@ -76,14 +80,6 @@ class TreeItem extends TreeItemBase {
 	@property({ type: ValueState, defaultValue: ValueState.None })
 	additionalTextState!: ValueState;
 
-	static get template() {
-		return TreeItemTemplate;
-	}
-
-	static get styles() {
-		return [super.styles, treeItemCss];
-	}
-
 	get _showTitle() {
 		return this.text.length && !this._minimal;
 	}

package/src/TreeItemBase.hbs

@@ -8,6 +8,7 @@
 	<div
 		class="ui5-li-tree-toggle-box"
 		style="{{styles.preContent}}"
+		@click="{{_toggleClick}}"
 	>
 		{{#if _showToggleButtonBeginning}}
 			<ui5-icon
@@ -16,7 +17,6 @@
 				name="{{_toggleIconName}}"
 				show-tooltip
 				accessible-name="{{iconAccessibleName}}"
-				@click="{{_toggleClick}}"
 			></ui5-icon>
 		{{/if}}
 	</div>
@@ -35,12 +35,13 @@
 
 {{#*inline "iconEnd"}}
 	{{#if _showToggleButtonEnd}}
+	<div @click="{{_toggleClick}}">
 		<ui5-icon
 			part="toggle-icon"
 			class="ui5-li-tree-toggle-icon"
 			name="{{_toggleIconName}}"
-			@click="{{_toggleClick}}"
 		></ui5-icon>
+	</div>
 	{{/if}}
 {{/inline}}
 

package/src/TreeItemBase.ts

@@ -1,9 +1,9 @@
-import languageAware from "@ui5/webcomponents-base/dist/decorators/languageAware.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import type { ClassMap, ComponentStylesData } from "@ui5/webcomponents-base/dist/types.js";
+import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
 import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
@@ -43,7 +43,18 @@ type TreeItemBaseStepOutEventDetail = TreeItemBaseEventDetail;
  * @extends sap.ui.webc.main.ListItem
  * @public
  */
-@languageAware
+@customElement({
+	languageAware: true,
+	template: TreeItemBaseTemplate,
+	styles: [
+		ListItem.styles,
+		treeItemCss,
+	],
+	dependencies: [
+		...ListItem.dependencies,
+		Icon,
+	],
+})
 /**
  * Fired when the user interacts with the expand/collapse button of the tree list item.
  * @event
@@ -81,7 +92,6 @@ type TreeItemBaseStepOutEventDetail = TreeItemBaseEventDetail;
 		item: { type: HTMLElement },
 	},
 })
-
 class TreeItemBase extends ListItem {
 	/**
 	 * Defines the indentation of the tree list item. Use level 1 for tree list items, representing top-level tree nodes.
@@ -265,21 +275,6 @@ class TreeItemBase extends ListItem {
 	@slot({ type: HTMLElement, "default": true })
 	items!: Array<TreeItemBase>;
 
-	static get template() {
-		return TreeItemBaseTemplate;
-	}
-
-	static get styles(): ComponentStylesData {
-		return [super.styles, treeItemCss];
-	}
-
-	static get dependencies() {
-		return [
-			...super.dependencies,
-			Icon,
-		];
-	}
-
 	onBeforeRendering() {
 		this.actionable = false;
 		this.showToggleButton = this.requiresToggleButton;
@@ -363,6 +358,8 @@ class TreeItemBase extends ListItem {
 	/**
 	 * Call this method to manually switch the <code>expanded</code> state of a tree item.
 	 * @public
+	 * @method
+	 * @name sap.ui.webc.main.TreeItemBase#toggle
 	 */
 	toggle() {
 		this.expanded = !this.expanded;

package/src/TreeItemCustom.ts

@@ -41,7 +41,11 @@ import treeItemCustomCss from "./generated/themes/TreeItem.css.js";
  * @implements sap.ui.webc.main.ITreeItem
  * @since 1.0.0-rc.8
  */
-@customElement("ui5-tree-item-custom")
+@customElement({
+	tag: "ui5-tree-item-custom",
+	template: TreeItemCustomTemplate,
+	styles: [TreeItemBase.styles, treeItemCustomCss],
+})
 class TreeItemCustom extends TreeItemBase {
 	/**
 	 * Defines whether the tree list item should display the selection element.
@@ -63,15 +67,7 @@ class TreeItemCustom extends TreeItemBase {
 	 * @public
 	 */
 	@slot()
-	content!: Array<HTMLElement>
-
-	static get template() {
-		return TreeItemCustomTemplate;
-	}
-
-	static get styles() {
-		return [super.styles, treeItemCustomCss];
-	}
+	content!: Array<HTMLElement>;
 
 	/**
 	 * @override

package/src/TreeList.ts

@@ -9,7 +9,7 @@ class TreeList extends List {
 	 * @override
 	 */
 	getItems(includeCollapsed = false): Array<TreeItemBase> {
-		const slottedItems = this.getSlottedNodes("items") as Array<TreeItemBase>;
+		const slottedItems = this.getSlottedNodes<TreeItemBase>("items");
 		const flatItems: Array<TreeItemBase> = [];
 
 		flattenTree(slottedItems, flatItems, includeCollapsed);
@@ -34,7 +34,7 @@ const flattenTree = (items: Array<TreeItemBase>, result: Array<TreeItemBase>, in
 		result.push(item);
 
 		if ((item.expanded || includeCollapsed) && item.items) {
-			flattenTree(item.items, result);
+			flattenTree(item.items, result, includeCollapsed);
 		}
 	});
 };

package/src/WheelSlider.ts

@@ -23,7 +23,7 @@ import WheelSliderCss from "./generated/themes/WheelSlider.css.js";
 const CELL_SIZE_COMPACT = 32;
 const CELL_SIZE_COZY = 46;
 
-type WheelSliderSelectEventDetail = { value: string }
+type WheelSliderSelectEventDetail = { value: string };
 
 /**
  * @class
@@ -44,10 +44,16 @@ type WheelSliderSelectEventDetail = { value: string }
  * @public
  * @since 1.0.0-rc.6
  */
-@customElement("ui5-wheelslider")
-
+@customElement({
+	tag: "ui5-wheelslider",
+	renderer: litRender,
+	styles: WheelSliderCss,
+	template: WheelSliderTemplate,
+	dependencies: [Button],
+})
 /**
- *  Fires when new value is selected.
+ * Fires when new value is selected.
+ * @event sap.ui.webc.main.WheelSlider#select
  */
 @event("select", {
 	detail: {
@@ -59,11 +65,13 @@ type WheelSliderSelectEventDetail = { value: string }
 
 /**
  * Fires when the wheel slider is expanded.
+ * @event sap.ui.webc.main.WheelSlider#expand
  */
 @event("expand")
 
 /**
  * Fires when the wheel slider is collapsed.
+ * @event sap.ui.webc.main.WheelSlider#collapse
  */
 @event("collapse")
 class WheelSlider extends UI5Element {
@@ -134,18 +142,6 @@ class WheelSlider extends UI5Element {
 	_scroller: ScrollEnablement;
 	_prevWheelTimestamp?: number;
 
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return WheelSliderCss;
-	}
-
-	static get template() {
-		return WheelSliderTemplate;
-	}
-
 	constructor() {
 		super();
 		this._currentElementIndex = 0;
@@ -169,10 +165,6 @@ class WheelSlider extends UI5Element {
 		this._buildItemsToShow();
 	}
 
-	static get dependencies() {
-		return [Button];
-	}
-
 	onAfterRendering() {
 		if (!this._scroller.scrollContainer) {
 			this._scroller.scrollContainer = this.shadowRoot!.querySelector(`#${this._id}--wrapper`)!;
@@ -289,7 +281,7 @@ class WheelSlider extends UI5Element {
 			this._scroller.scrollTo(0, scrollBy, 5, 100); // sometimes the container isn't painted yet so retry 5 times (although it succeeds on the 1st)
 			this._currentElementIndex = index;
 			this.value = this._items[index - (this._getCurrentRepetition() * this._items.length)];
-			this.fireEvent("select", { value: this.value });
+			this.fireEvent<WheelSliderSelectEventDetail>("select", { value: this.value });
 		}
 	}
 
@@ -375,7 +367,7 @@ class WheelSlider extends UI5Element {
 		if (this.expanded) {
 			this.value = target.textContent || "";
 			this._selectElement(target);
-			this.fireEvent("select", { value: this.value });
+			this.fireEvent<WheelSliderSelectEventDetail>("select", { value: this.value });
 		} else {
 			this.expanded = true;
 		}