@ui5/webcomponents 1.11.0-rc.3 → 1.11.0

package/src/Tab.ts

@@ -1,6 +1,5 @@
 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 type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
@@ -61,8 +60,18 @@ const DESIGN_DESCRIPTIONS = {
  * @implements sap.ui.webc.main.ITab
  * @public
  */
-@customElement("ui5-tab")
-@languageAware
+@customElement({
+	tag: "ui5-tab",
+	languageAware: true,
+	renderer: litRender,
+	template: TabTemplate,
+	styles: css,
+	dependencies: [
+		Icon,
+		Button,
+		CustomListItem,
+	],
+})
 class Tab extends UI5Element implements ITab, ITabbable {
 	/**
 	 * The text to be displayed for the item.
@@ -193,26 +202,6 @@ class Tab extends UI5Element implements ITab, ITabbable {
 	_getElementInStrip?: () => ITab | null;
 	_individualSlot!: string;
 
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return TabTemplate;
-	}
-
-	static get stripTemplate() {
-		return TabInStripTemplate;
-	}
-
-	static get overflowTemplate() {
-		return TabInOverflowTemplate;
-	}
-
-	static get styles() {
-		return css;
-	}
-
 	static i18nBundle: I18nBundle;
 
 	set _tabIndex(val: string) {
@@ -223,14 +212,6 @@ class Tab extends UI5Element implements ITab, ITabbable {
 		return this.getTabInStripDomRef()!.getAttribute("tabindex")!;
 	}
 
-	static get dependencies() {
-		return [
-			Icon,
-			Button,
-			CustomListItem,
-		];
-	}
-
 	get displayText() {
 		let text = this.text;
 
@@ -288,6 +269,7 @@ class Tab extends UI5Element implements ITab, ITabbable {
 	 *
 	 * @function
 	 * @public
+     * @name sap.ui.webc.main.Tab.prototype.getTabInStripDomRef
 	 * @since 1.0.0-rc.16
 	 */
 	getTabInStripDomRef() {
@@ -466,6 +448,14 @@ class Tab extends UI5Element implements ITab, ITabbable {
 		return (this.disabled || this.isSingleClickArea) ? ListItemType.Inactive : ListItemType.Active;
 	}
 
+	static get stripTemplate() {
+		return TabInStripTemplate;
+	}
+
+	static get overflowTemplate() {
+		return TabInOverflowTemplate;
+	}
+
 	static async onDefine() {
 		Tab.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}

package/src/TabContainer.ts

@@ -1,9 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { StyleData } from "@ui5/webcomponents-base/dist/types.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import languageAware from "@ui5/webcomponents-base/dist/decorators/languageAware.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
-import fastNavigation from "@ui5/webcomponents-base/dist/decorators/fastNavigation.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
@@ -157,9 +155,22 @@ interface TabContainerTabInOverflow extends CustomListItem {
  * @tagname ui5-tabcontainer
  * @public
  */
-@customElement("ui5-tabcontainer")
-@languageAware
-@fastNavigation
+@customElement({
+	tag: "ui5-tabcontainer",
+	languageAware: true,
+	fastNavigation: true,
+	styles: [tabStyles, tabContainerCss],
+	staticAreaStyles: [ResponsivePopoverCommonCss, staticAreaTabStyles],
+	renderer: litRender,
+	template: TabContainerTemplate,
+	staticAreaTemplate: TabContainerPopoverTemplate,
+	dependencies: [
+		Button,
+		Icon,
+		List,
+		ResponsivePopover,
+	],
+})
 /**
  * Fired when a tab is selected.
  *
@@ -392,26 +403,6 @@ class TabContainer extends UI5Element {
 	responsivePopover?: ResponsivePopover;
 	_handleResizeBound: () => void;
 
-	static get styles() {
-		return [tabStyles, tabContainerCss];
-	}
-
-	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, staticAreaTabStyles];
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return TabContainerTemplate;
-	}
-
-	static get staticAreaTemplate() {
-		return TabContainerPopoverTemplate;
-	}
-
 	static registerTabStyles(styles: StyleData) {
 		tabStyles.push(styles);
 	}
@@ -686,6 +677,7 @@ class TabContainer extends UI5Element {
 	 * <code>[ ui5-tab#First, ui5-tab#Nested, ui5-tab#Second, ui5-tab-separator#sep, ui5-tab#Third ]</code>
 	 * @public
 	 * @readonly
+     * @name sap.ui.webc.main.TabContainer.prototype.allItems
 	 * @returns {sap.ui.webc.main.ITab[]}
 	 */
 	get allItems() {
@@ -1299,15 +1291,6 @@ class TabContainer extends UI5Element {
 		return getAnimationMode() !== AnimationMode.None;
 	}
 
-	static get dependencies() {
-		return [
-			Button,
-			Icon,
-			List,
-			ResponsivePopover,
-		];
-	}
-
 	static async onDefine() {
 		TabContainer.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}

package/src/TabSeparator.ts

@@ -25,14 +25,13 @@ import overflowCss from "./generated/themes/TabSeparatorInOverflow.css.js";
  * @implements sap.ui.webc.main.ITab
  * @public
  */
-@customElement("ui5-tab-separator")
+@customElement({
+	tag: "ui5-tab-separator",
+	renderer: litRender,
+})
 class TabSeparator extends UI5Element implements ITab {
 	_getElementInStrip?: () => ITab | null;
 
-	static get render() {
-		return litRender;
-	}
-
 	static get stripTemplate() {
 		return TabSeparatorInStripTemplate;
 	}
@@ -59,6 +58,7 @@ class TabSeparator extends UI5Element implements ITab {
 	 *
 	 * @function
 	 * @public
+     * @name sap.ui.webc.main.TabSeparator.prototype.getTabInStripDomRef
 	 */
 	getTabInStripDomRef() {
 		if (this._getElementInStrip) {

package/src/Table.ts

@@ -1,6 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import fastNavigation from "@ui5/webcomponents-base/dist/decorators/fastNavigation.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
@@ -60,7 +59,7 @@ import {
 import TableTemplate from "./generated/templates/TableTemplate.lit.js";
 
 // Styles
-import styles from "./generated/themes/Table.css.js";
+import tableStyles from "./generated/themes/Table.css.js";
 
 const GROWING_WITH_SCROLL_DEBOUNCE_RATE = 250; // ms
 
@@ -178,8 +177,14 @@ enum TableFocusTargetElement {
  * @appenddocs sap.ui.webc.main.TableColumn sap.ui.webc.main.TableRow sap.ui.webc.main.TableGroupRow sap.ui.webc.main.TableCell
  * @public
  */
-@customElement("ui5-table")
-@fastNavigation
+@customElement({
+	tag: "ui5-table",
+	fastNavigation: true,
+	styles: tableStyles,
+	renderer: litRender,
+	template: TableTemplate,
+	dependencies: [BusyIndicator, CheckBox],
+})
 /** Fired when a row in <code>Active</code> mode is clicked or <code>Enter</code> key is pressed.
 *
 * @event sap.ui.webc.main.Table#row-click
@@ -490,22 +495,6 @@ class Table extends UI5Element {
 	})
 	columns!: Array<TableColumn>;
 
-	static get styles() {
-		return styles;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return TableTemplate;
-	}
-
-	static get dependencies() {
-		return [BusyIndicator, CheckBox];
-	}
-
 	static async onDefine() {
 		Table.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}

package/src/TableCell.ts

@@ -5,7 +5,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import TableCellTemplate from "./generated/templates/TableCellTemplate.lit.js";
 
 // Styles
-import styles from "./generated/themes/TableCell.css.js";
+import tableCellStyles from "./generated/themes/TableCell.css.js";
 
 /**
  * @class
@@ -31,7 +31,12 @@ import styles from "./generated/themes/TableCell.css.js";
  * @implements sap.ui.webc.main.ITableCell
  * @public
  */
-@customElement("ui5-table-cell")
+@customElement({
+	tag: "ui5-table-cell",
+	renderer: litRender,
+	template: TableCellTemplate,
+	styles: tableCellStyles,
+})
 class TableCell extends UI5Element {
 	/**
 	 * @private
@@ -59,18 +64,6 @@ class TableCell extends UI5Element {
 	 * @name sap.ui.webc.main.TableCell.prototype.default
 	 * @public
 	 */
-
-	static get styles() {
-		return styles;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return TableCellTemplate;
-	}
 }
 
 TableCell.define();

package/src/TableColumn.ts

@@ -7,7 +7,7 @@ import TableColumnTemplate from "./generated/templates/TableColumnTemplate.lit.j
 import TableColumnPopinDisplay from "./types/TableColumnPopinDisplay.js";
 
 // Styles
-import styles from "./generated/themes/TableColumn.css.js";
+import tableColumnStyles from "./generated/themes/TableColumn.css.js";
 
 /**
  * @class
@@ -34,7 +34,12 @@ import styles from "./generated/themes/TableColumn.css.js";
  * @implements sap.ui.webc.main.ITableColumn
  * @public
  */
-@customElement("ui5-table-column")
+@customElement({
+	tag: "ui5-table-column",
+	styles: tableColumnStyles,
+	renderer: litRender,
+	template: TableColumnTemplate,
+})
 class TableColumn extends UI5Element {
 	/**
 	 * Defines the minimum table width required to display this column. By default it is always displayed.
@@ -116,18 +121,6 @@ class TableColumn extends UI5Element {
 	 * @name sap.ui.webc.main.TableColumn.prototype.default
 	 * @public
 	 */
-
-	static get styles() {
-		return styles;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return TableColumnTemplate;
-	}
 }
 
 TableColumn.define();

package/src/TableGroupRow.ts

@@ -17,7 +17,7 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
-import styles from "./generated/themes/TableGroupRow.css.js";
+import tableGroupRowStyles from "./generated/themes/TableGroupRow.css.js";
 
 /**
  * @class
@@ -44,7 +44,15 @@ import styles from "./generated/themes/TableGroupRow.css.js";
  * @implements sap.ui.webc.main.ITableRow
  * @public
  */
-@customElement("ui5-table-group-row")
+@customElement({
+	tag: "ui5-table-group-row",
+	styles: tableGroupRowStyles,
+	renderer: litRender,
+	template: TableGroupRowTemplate,
+	dependencies: [
+		CheckBox,
+	],
+})
 @event("_focused")
 class TableGroupRow extends UI5Element implements ITableRow, ITabbable {
 	/**
@@ -93,24 +101,6 @@ class TableGroupRow extends UI5Element implements ITableRow, ITabbable {
 	 * @public
 	 */
 
-	static get styles() {
-		return styles;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return TableGroupRowTemplate;
-	}
-
-	static get dependencies() {
-		return [
-			CheckBox,
-		];
-	}
-
 	static i18nBundle: I18nBundle;
 
 	_colSpan?: number;

package/src/TableRow.ts

@@ -33,7 +33,7 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
-import styles from "./generated/themes/TableRow.css.js";
+import tableRowStyles from "./generated/themes/TableRow.css.js";
 
 type TableRowClickEventDetail = {
 	row: TableRow,
@@ -80,7 +80,13 @@ type TableRowF7PressEventDetail = {
  * @implements sap.ui.webc.main.ITableRow
  * @public
  */
-@customElement("ui5-table-row")
+@customElement({
+	tag: "ui5-table-row",
+	styles: tableRowStyles,
+	renderer: litRender,
+	template: TableRowTemplate,
+	dependencies: [CheckBox],
+})
 /**
  * Fired when a row in <code>Active</code> mode is clicked or <code>Enter</code> key is pressed.
  *
@@ -198,22 +204,6 @@ class TableRow extends UI5Element implements ITableRow, ITabbable {
 	@slot({ type: HTMLElement, "default": true, individualSlots: true })
 	cells!: Array<TableCell>;
 
-	static get styles() {
-		return styles;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return TableRowTemplate;
-	}
-
-	static get dependencies() {
-		return [CheckBox];
-	}
-
 	static i18nBundle: I18nBundle;
 
 	visibleCells: Array<TableCell> = [];

package/src/TextArea.ts

@@ -4,7 +4,6 @@ import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.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 ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -87,9 +86,16 @@ type ExceededText = {
  * @tagname ui5-textarea
  * @public
  */
-@customElement("ui5-textarea")
-@languageAware
-
+@customElement({
+	tag: "ui5-textarea",
+	languageAware: true,
+	styles: [browserScrollbarCSS, styles],
+	renderer: litRender,
+	template: TextAreaTemplate,
+	staticAreaTemplate: TextAreaPopoverTemplate,
+	staticAreaStyles: valueStateMessageStyles,
+	dependencies: [Popover, Icon],
+})
 /**
  * Fired when the text has changed and the focus leaves the component.
  *
@@ -213,7 +219,7 @@ class TextArea extends UI5Element implements IFormElement {
 	 * Defines the maximum number of characters that the <code>value</code> can have.
 	 *
 	 * @type {sap.ui.webc.base.types.Integer}
-	 * @name sap.ui.webc.main.TextArea.prototype.maxLength
+	 * @name sap.ui.webc.main.TextArea.prototype.maxlength
 	 * @defaultValue null
 	 * @public
 	 */
@@ -343,7 +349,7 @@ class TextArea extends UI5Element implements IFormElement {
 	 * <b>Note:</b> The <code>valueStateMessage</code> would be displayed if the component has
 	 * <code>valueState</code> of type <code>Information</code>, <code>Warning</code> or <code>Error</code>.
 	 * @type {HTMLElement[]}
-	 * @name sa.ui.webc.main.TextArea.prototype.valueStateMessage
+	 * @name sap.ui.webc.main.TextArea.prototype.valueStateMessage
 	 * @since 1.0.0-rc.7
 	 * @slot
 	 * @public
@@ -368,27 +374,7 @@ class TextArea extends UI5Element implements IFormElement {
 	_keyDown?: boolean;
 	FormSupport?: typeof FormSupportT;
 	previousValue: string;
-	popover?:Popover;
-
-	static get styles() {
-		return [browserScrollbarCSS, styles];
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return TextAreaTemplate;
-	}
-
-	static get staticAreaTemplate() {
-		return TextAreaPopoverTemplate;
-	}
-
-	static get staticAreaStyles() {
-		return valueStateMessageStyles;
-	}
+	popover?: Popover;
 
 	static i18nBundle: I18nBundle;
 
@@ -710,10 +696,6 @@ class TextArea extends UI5Element implements IFormElement {
 			"Warning": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
 		};
 	}
-
-	static get dependencies() {
-		return [Popover, Icon];
-	}
 }
 
 TextArea.define();

package/src/TimePicker.hbs

@@ -20,16 +20,16 @@
 	{{/if}}
 
 	{{#unless readonly}}
-		<ui5-icon
-			slot="icon"
-			name="{{openIconName}}"
-			tabindex="-1"
-			show-tooltip
-			@click="{{togglePicker}}"
-			input-icon
-			?pressed="{{_isPickerOpen}}"
-			class="ui5-time-picker-input-icon-button"
-		></ui5-icon>
+		<div slot="icon" @click="{{togglePicker}}">
+			<ui5-icon
+				name="{{openIconName}}"
+				tabindex="-1"
+				show-tooltip
+				input-icon
+				?pressed="{{_isPickerOpen}}"
+				class="ui5-time-picker-input-icon-button"
+			></ui5-icon>
+		</div>
 	{{/unless}}
 	</ui5-input>
 </div>

package/src/TimePickerBase.ts

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import languageAware from "@ui5/webcomponents-base/dist/decorators/languageAware.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
@@ -54,13 +54,26 @@ import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverComm
  * @public
  * @since 1.0.0-rc.6
  */
-@languageAware
-
+@customElement({
+	languageAware: true,
+	renderer: litRender,
+	template: TimePickerTemplate,
+	styles: TimePickerCss,
+	staticAreaTemplate: TimePickerPopoverTemplate,
+	staticAreaStyles: [ResponsivePopoverCommonCss, TimePickerPopoverCss],
+	dependencies: [
+		Icon,
+		ResponsivePopover,
+		TimeSelection,
+		Input,
+		Button,
+	],
+})
 /**
  * Fired when the input operation has finished by clicking the "OK" button or
  * when the text in the input field has changed and the focus leaves the input field.
- *
- * @event sap.ui.webc.main.TimePickerBase#change
+*
+* @event sap.ui.webc.main.TimePickerBase#change
  * @public
  */
 @event("change")
@@ -152,32 +165,6 @@ class TimePickerBase extends UI5Element {
 
 	static i18nBundle: I18nBundle;
 
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return TimePickerCss;
-	}
-
-	static get staticAreaTemplate() {
-		return TimePickerPopoverTemplate;
-	}
-
-	static get template() {
-		return TimePickerTemplate;
-	}
-
-	static get dependencies() {
-		return [
-			Icon,
-			ResponsivePopover,
-			TimeSelection,
-			Input,
-			Button,
-		];
-	}
-
 	static async onDefine() {
 		[TimePickerBase.i18nBundle] = await Promise.all([
 			getI18nBundle("@ui5/webcomponents"),
@@ -185,10 +172,6 @@ class TimePickerBase extends UI5Element {
 		]);
 	}
 
-	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, TimePickerPopoverCss];
-	}
-
 	constructor() {
 		super();
 	}

package/src/TimeSelection.ts

@@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
-import languageAware from "@ui5/webcomponents-base/dist/decorators/languageAware.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
@@ -60,8 +59,14 @@ type TimeSelectionSliderChangeEventDetail = {
  * @private
  * @since 1.0.0-rc.12
  */
-@customElement("ui5-time-selection")
-@languageAware
+@customElement({
+	tag: "ui5-time-selection",
+	languageAware: true,
+	renderer: litRender,
+	styles: timeSelectionCss,
+	template: timeSelectionTemplate,
+	dependencies: [WheelSlider],
+})
 
 /**
  * Fired when the value changes due to user interaction with the sliders
@@ -180,22 +185,6 @@ class TimeSelection extends UI5Element {
 
 	static i18nBundle: I18nBundle;
 
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return timeSelectionCss;
-	}
-
-	static get template() {
-		return timeSelectionTemplate;
-	}
-
-	static get dependencies() {
-		return [WheelSlider];
-	}
-
 	static async onDefine() {
 		[TimeSelection.i18nBundle] = await Promise.all([
 			getI18nBundle("@ui5/webcomponents"),