@ui5/webcomponents 1.10.0 → 1.10.2

package/dist/generated/templates/CarouselTemplate.lit.js

@@ -1,10 +1,10 @@
 /* eslint no-unused-vars: 0 */
 import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 
-const block0 = (context, tags, suffix) => html`<section class="ui5-carousel-root" tabindex="0" role="listbox" aria-activedescendant="${ifDefined(context.ariaActiveDescendant)}" @focusin="${context._onfocusin}" @keydown=${context._onkeydown} @mouseout="${context._onmouseout}" @mouseover="${context._onmouseover}"><div class="${classMap(context.classes.viewport)}" part="content"><div class="${classMap(context.classes.content)}" style="${styleMap(context.styles.content)}">${ repeat(context.items, (item, index) => item._id || index, (item, index) => block1(item, index, context, tags, suffix)) }</div></div>${ context.arrows.content ? block2(context, tags, suffix) : undefined }${ context.renderNavigation ? block3(context, tags, suffix) : undefined }</div></section> `;
+const block0 = (context, tags, suffix) => html`<section class="ui5-carousel-root" tabindex="0" role="listbox" aria-activedescendant="${ifDefined(context.ariaActiveDescendant)}" @focusin="${context._onfocusin}" @keydown=${context._onkeydown} @mouseout="${context._onmouseout}" @mouseover="${context._onmouseover}"><div class="${classMap(context.classes.viewport)}" part="content"><div class="${classMap(context.classes.content)}" style="${styleMap(context.styles.content)}">${ repeat(context.items, (item, index) => item._id || index, (item, index) => block1(item, index, context, tags, suffix)) }</div></div>${ context.showArrows.content ? block2(context, tags, suffix) : undefined }${ context.renderNavigation ? block3(context, tags, suffix) : undefined }</div></section> `;
 const block1 = (item, index, context, tags, suffix) => html`<div id="${ifDefined(item.id)}" class="ui5-carousel-item ${ifDefined(item.classes)}" style="${styleMap(item.styles)}" role="option" aria-posinset="${ifDefined(item.posinset)}" aria-setsize="${ifDefined(item.setsize)}" part="item"><slot name="${ifDefined(item.item._individualSlot)}" tabindex="${ifDefined(item.tabIndex)}"></slot></div>`;
 const block2 = (context, tags, suffix) => suffix ? html`<div class="ui5-carousel-navigation-arrows"><${scopeTag("ui5-button", tags, suffix)} arrow-back tooltip="${ifDefined(context.previousPageText)}" class="ui5-carousel-navigation-button ${classMap(context.classes.navPrevButton)}" icon="slim-arrow-left" tabindex="-1" @click=${context._navButtonClick}></${scopeTag("ui5-button", tags, suffix)}><${scopeTag("ui5-button", tags, suffix)} arrow-forward tooltip="${ifDefined(context.nextPageText)}" class="ui5-carousel-navigation-button ${classMap(context.classes.navNextButton)}" icon="slim-arrow-right" tabindex="-1" @click=${context._navButtonClick}></${scopeTag("ui5-button", tags, suffix)}></div>` : html`<div class="ui5-carousel-navigation-arrows"><ui5-button arrow-back tooltip="${ifDefined(context.previousPageText)}" class="ui5-carousel-navigation-button ${classMap(context.classes.navPrevButton)}" icon="slim-arrow-left" tabindex="-1" @click=${context._navButtonClick}></ui5-button><ui5-button arrow-forward tooltip="${ifDefined(context.nextPageText)}" class="ui5-carousel-navigation-button ${classMap(context.classes.navNextButton)}" icon="slim-arrow-right" tabindex="-1" @click=${context._navButtonClick}></ui5-button></div>`;
-const block3 = (context, tags, suffix) => html`<div class="${classMap(context.classes.navigation)}">${ context.arrows.navigation ? block4(context, tags, suffix) : undefined }<div class="ui5-carousel-navigation">${ !context.hidePageIndicator ? block5(context, tags, suffix) : undefined }</div>${ context.arrows.navigation ? block9(context, tags, suffix) : undefined }</div>`;
+const block3 = (context, tags, suffix) => html`<div class="${classMap(context.classes.navigation)}">${ context.showArrows.navigation ? block4(context, tags, suffix) : undefined }<div class="ui5-carousel-navigation">${ !context.hidePageIndicator ? block5(context, tags, suffix) : undefined }</div>${ context.showArrows.navigation ? block9(context, tags, suffix) : undefined }</div>`;
 const block4 = (context, tags, suffix) => suffix ? html`<${scopeTag("ui5-button", tags, suffix)} arrow-back tooltip="${ifDefined(context.previousPageText)}" class="ui5-carousel-navigation-button ${classMap(context.classes.navPrevButton)}" icon="slim-arrow-left" tabindex="-1" @click=${context._navButtonClick}></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button arrow-back tooltip="${ifDefined(context.previousPageText)}" class="ui5-carousel-navigation-button ${classMap(context.classes.navPrevButton)}" icon="slim-arrow-left" tabindex="-1" @click=${context._navButtonClick}></ui5-button>`;
 const block5 = (context, tags, suffix) => html`${ context.isPageTypeDots ? block6(context, tags, suffix) : block8(context, tags, suffix) }`;
 const block6 = (context, tags, suffix) => html`${ repeat(context.dots, (item, index) => item._id || index, (item, index) => block7(item, index, context, tags, suffix)) }`;

package/global.d.ts

@@ -1,6 +1,6 @@
 // eslint-disable-next-line
-import "@ui5/webcomponents-base/global";
-import { TemplateFunction } from "@ui5/webcomponents-base/src/renderer/executeTemplate.js";
+import "@ui5/webcomponents-base/dist/global";
+import { TemplateFunction } from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 
 export {};
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "1.10.0",
+  "version": "1.10.2",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -42,13 +42,13 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.10.0",
-    "@ui5/webcomponents-icons": "1.10.0",
-    "@ui5/webcomponents-localization": "1.10.0",
-    "@ui5/webcomponents-theming": "1.10.0"
+    "@ui5/webcomponents-base": "1.10.2",
+    "@ui5/webcomponents-icons": "1.10.2",
+    "@ui5/webcomponents-localization": "1.10.2",
+    "@ui5/webcomponents-theming": "1.10.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.10.0",
-    "chromedriver": "108.0.0"
+    "@ui5/webcomponents-tools": "1.10.2",
+    "chromedriver": "109.0.0"
   }
 }

package/src/Badge.ts

@@ -90,7 +90,7 @@ class Badge extends UI5Element {
 	/**
 	 * Defines the icon to be displayed in the component.
 	 *
-	 * @type {sap.ui.webc.main.IIcon}
+	 * @type {sap.ui.webc.main.IIcon[]}
 	 * @name sap.ui.webc.main.Badge.prototype.icon
 	 * @slot
 	 * @public

package/src/Breadcrumbs.ts

@@ -91,7 +91,7 @@ type FocusAdaptor = ITabbable & {
  * @alias sap.ui.webc.main.Breadcrumbs
  * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-breadcrumbs
- * @appenddocs BreadcrumbsItem
+ * @appenddocs sap.ui.webc.main.BreadcrumbsItem
  * @public
  * @since 1.0.0-rc.15
  */

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

@@ -1,105 +1,26 @@
 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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
 import BusyIndicatorSize from "./types/BusyIndicatorSize.js";
 import Label from "./Label.js";
 
 // Template
 import BusyIndicatorTemplate from "./generated/templates/BusyIndicatorTemplate.lit.js";
 
+// @ts-ignore
 import { BUSY_INDICATOR_TITLE } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import busyIndicatorCss from "./generated/themes/BusyIndicator.css.js";
 
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-busy-indicator",
-	languageAware: true,
-	slots: /** @lends sap.ui.webc.main.BusyIndicator.prototype */ {
-
-		/**
-		 * Determines the content over which the component will appear.
-		 *
-		 * @type {Node[]}
-		 * @slot
-		 * @public
-		 */
-		"default": {
-			type: Node,
-		},
-	},
-	properties: /** @lends sap.ui.webc.main.BusyIndicator.prototype */ {
-
-		/**
-		 * Defines text to be displayed below the component. It can be used to inform the user of the current operation.
-		 * @type {string}
-		 * @public
-		 * @defaultvalue ""
-		 * @since 1.0.0-rc.7
-		 */
-		text: {
-			type: String,
-		},
-
-		/**
-		 * Defines the size of the component.
-		 *
-		 * <br><br>
-		 * <b>Note:</b>
-		 *
-		 * <ul>
-		 * <li><code>Small</code></li>
-		 * <li><code>Medium</code></li>
-		 * <li><code>Large</code></li>
-		 * </ul>
-		 *
-		 * @type {sap.ui.webc.main.types.BusyIndicatorSize}
-		 * @defaultvalue "Medium"
-		 * @public
-		 */
-		size: {
-			type: BusyIndicatorSize,
-			defaultValue: BusyIndicatorSize.Medium,
-		},
-
-		/**
-		 * Defines if the busy indicator is visible on the screen. By default it is not.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		active: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the delay in milliseconds, after which the busy indicator will be visible on the screen.
-		 *
-		 * @type {sap.ui.webc.base.types.Integer}
-		 * @defaultValue 1000
-		 * @public
-		 */
-		delay: {
-			type: Integer,
-			defaultValue: 1000,
-		},
-
-		/**
-		 * Defines if the component is currently in busy state.
-		 * @private
-		 */
-		_isBusy: {
-			type: Boolean,
-		},
-	},
-};
-
 /**
  * @class
  *
@@ -143,7 +64,85 @@ const metadata = {
  * @public
  * @since 0.12.0
  */
+@customElement("ui5-busy-indicator")
+@languageAware
 class BusyIndicator extends UI5Element {
+	/**
+	 * Defines text to be displayed below the component. It can be used to inform the user of the current operation.
+	 * @type {string}
+	 * @name sap.ui.webc.main.BusyIndicator.prototype.text
+	 * @public
+	 * @defaultvalue ""
+	 * @since 1.0.0-rc.7
+	 */
+	@property()
+	text!: string;
+
+	/**
+	 * Defines the size of the component.
+	 *
+	 * <br><br>
+	 * <b>Note:</b>
+	 *
+	 * <ul>
+	 * <li><code>Small</code></li>
+	 * <li><code>Medium</code></li>
+	 * <li><code>Large</code></li>
+	 * </ul>
+	 *
+	 * @type {sap.ui.webc.main.types.BusyIndicatorSize}
+	 * @name sap.ui.webc.main.BusyIndicator.prototype.size
+	 * @defaultvalue "Medium"
+	 * @public
+	 */
+	@property({ type: BusyIndicatorSize, defaultValue: BusyIndicatorSize.Medium })
+	size!: BusyIndicatorSize;
+
+	/**
+	 * Defines if the busy indicator is visible on the screen. By default it is not.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.BusyIndicator.prototype.active
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	active!: boolean;
+
+	/**
+	 * Defines the delay in milliseconds, after which the busy indicator will be visible on the screen.
+	 *
+	 * @type {sap.ui.webc.base.types.Integer}
+	 * @name sap.ui.webc.main.BusyIndicator.prototype.delay
+	 * @defaultValue 1000
+	 * @public
+	 */
+	@property({ validator: Integer, defaultValue: 1000 })
+	delay!: number;
+
+	/**
+	 * Defines if the component is currently in busy state.
+	 * @private
+	 */
+	@property({ type: Boolean })
+	_isBusy!: boolean;
+
+	/**
+	 * Determines the content over which the component will appear.
+	 *
+	 * @type {Node[]}
+	 * @name sap.ui.webc.main.BusyIndicator.prototype.default
+	 * @slot
+	 * @public
+	 */
+
+	_keydownHandler: (e: KeyboardEvent) => void;
+	_preventEventHandler: (e: KeyboardEvent) => void;
+	_busyTimeoutId?: Timeout;
+	focusForward?: boolean;
+
+	static i18nBundle: I18nBundle;
+
 	constructor() {
 		super();
 		this._keydownHandler = this._handleKeydown.bind(this);
@@ -169,10 +168,6 @@ class BusyIndicator extends UI5Element {
 		this.removeEventListener("keyup", this._preventEventHandler, true);
 	}
 
-	static get metadata() {
-		return metadata;
-	}
-
 	static get styles() {
 		return busyIndicatorCss;
 	}
@@ -194,7 +189,7 @@ class BusyIndicator extends UI5Element {
 	}
 
 	get ariaTitle() {
-		return BusyIndicator.i18nBundle.getText(BUSY_INDICATOR_TITLE);
+		return BusyIndicator.i18nBundle.getText(BUSY_INDICATOR_TITLE as I18nText);
 	}
 
 	get labelId() {
@@ -226,37 +221,37 @@ class BusyIndicator extends UI5Element {
 		}
 	}
 
-	_handleKeydown(event) {
+	_handleKeydown(e: KeyboardEvent) {
 		if (!this._isBusy) {
 			return;
 		}
 
-		event.stopImmediatePropagation();
+		e.stopImmediatePropagation();
 
 		// move the focus to the last element in this DOM and let TAB continue to the next focusable element
-		if (isTabNext(event)) {
+		if (isTabNext(e)) {
 			this.focusForward = true;
-			this.shadowRoot.querySelector("[data-ui5-focus-redirect]").focus();
+			this.shadowRoot!.querySelector<HTMLElement>("[data-ui5-focus-redirect]")!.focus();
 			this.focusForward = false;
 		}
 	}
 
-	_preventEvent(event) {
+	_preventEvent(e: KeyboardEvent) {
 		if (this._isBusy) {
-			event.stopImmediatePropagation();
+			e.stopImmediatePropagation();
 		}
 	}
 
 	/**
 	 * Moves the focus to busy area when coming with SHIFT + TAB
 	 */
-	_redirectFocus(event) {
+	_redirectFocus(e: FocusEvent) {
 		if (this.focusForward) {
 			return;
 		}
 
-		event.preventDefault();
-		this.shadowRoot.querySelector(".ui5-busy-indicator-busy-area").focus();
+		e.preventDefault();
+		this.shadowRoot!.querySelector<HTMLElement>(".ui5-busy-indicator-busy-area")!.focus();
 	}
 }
 

package/src/Calendar.ts

@@ -161,7 +161,7 @@ type CalendarChangeEventDetail = {
  * @alias sap.ui.webc.main.Calendar
  * @extends sap.ui.webc.main.CalendarPart
  * @tagname ui5-calendar
- * @appenddocs CalendarDate
+ * @appenddocs sap.ui.webc.main.CalendarDate
  * @public
  * @since 1.0.0-rc.11
  */

package/src/Card.ts

@@ -47,7 +47,7 @@ import cardCss from "./generated/themes/Card.css.js";
  * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-card
  * @public
- * @appenddocs CardHeader
+ * @appenddocs sap.ui.webc.main.CardHeader
  */
 @customElement("ui5-card")
 @languageAware

package/src/Carousel.hbs

@@ -25,7 +25,7 @@
 			</div>
 		</div>
 
-		{{#if arrows.content}}
+		{{#if showArrows.content}}
 			<div class="ui5-carousel-navigation-arrows">
 				{{> arrow-back}}
 				{{> arrow-forward}}
@@ -34,7 +34,7 @@
 
 		{{#if renderNavigation}}
 			<div class="{{classes.navigation}}">
-				{{#if arrows.navigation}}
+				{{#if showArrows.navigation}}
 					{{> arrow-back}}
 				{{/if}}
 
@@ -55,7 +55,7 @@
 					{{/unless}}
 				</div>
 
-				{{#if arrows.navigation}}
+				{{#if showArrows.navigation}}
 					{{> arrow-forward}}
 				{{/if}}
 			</div>