@ui5/webcomponents 0.0.0-11d529e8a → 0.0.0-1e08ebdef

package/dist/BusyIndicator.js

@@ -1,7 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } 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 BusyIndicatorSize from "./types/BusyIndicatorSize.js";
@@ -98,7 +98,6 @@ const metadata = {
 		 */
 		_isBusy: {
 			type: Boolean,
-			noAttribute: true,
 		},
 	},
 };
@@ -149,8 +148,6 @@ const metadata = {
 class BusyIndicator extends UI5Element {
 	constructor() {
 		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 		this._keydownHandler = this._handleKeydown.bind(this);
 		this._preventEventHandler = this._preventEvent.bind(this);
 	}
@@ -195,11 +192,11 @@ class BusyIndicator extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		BusyIndicator.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	get ariaTitle() {
-		return this.i18nBundle.getText(BUSY_INDICATOR_TITLE);
+		return BusyIndicator.i18nBundle.getText(BUSY_INDICATOR_TITLE);
 	}
 
 	get labelId() {
@@ -233,7 +230,7 @@ class BusyIndicator extends UI5Element {
 	}
 
 	_handleKeydown(event) {
-		if (!this.active) {
+		if (!this._isBusy) {
 			return;
 		}
 
@@ -248,7 +245,7 @@ class BusyIndicator extends UI5Element {
 	}
 
 	_preventEvent(event) {
-		if (this.active) {
+		if (this._isBusy) {
 			event.stopImmediatePropagation();
 		}
 	}

package/dist/Button.js

@@ -2,9 +2,14 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js";
-import { isPhone, isTablet } from "@ui5/webcomponents-base/dist/Device.js";
+import {
+	isPhone,
+	isTablet,
+	isCombi,
+	isSafari,
+} from "@ui5/webcomponents-base/dist/Device.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 import ButtonTemplate from "./generated/templates/ButtonTemplate.lit.js";
 import Icon from "./Icon.js";
@@ -318,12 +323,10 @@ class Button extends UI5Element {
 
 			isGlobalHandlerAttached = true;
 		}
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onEnterDOM() {
-		this._isTouch = isPhone() || isTablet();
+		this._isTouch = (isPhone() || isTablet()) && !isCombi();
 	}
 
 	onBeforeRendering() {
@@ -345,6 +348,10 @@ class Button extends UI5Element {
 		if (FormSupport) {
 			FormSupport.triggerFormSubmit(this);
 		}
+
+		if (isSafari()) {
+			this.getDomRef().focus();
+		}
 	}
 
 	_onmousedown(event) {
@@ -438,7 +445,7 @@ class Button extends UI5Element {
 	}
 
 	get buttonTypeText() {
-		return this.i18nBundle.getText(Button.typeTextMappings()[this.design]);
+		return Button.i18nBundle.getText(Button.typeTextMappings()[this.design]);
 	}
 
 	get tabIndexValue() {
@@ -456,7 +463,7 @@ class Button extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Button.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/dist/CalendarHeader.js

@@ -1,7 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
@@ -112,17 +112,16 @@ class CalendarHeader extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		CalendarHeader.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
-		this._prevButtonText = this.i18nBundle.getText(CALENDAR_HEADER_PREVIOUS_BUTTON);
-		this._nextButtonText = this.i18nBundle.getText(CALENDAR_HEADER_NEXT_BUTTON);
+		this._prevButtonText = CalendarHeader.i18nBundle.getText(CALENDAR_HEADER_PREVIOUS_BUTTON);
+		this._nextButtonText = CalendarHeader.i18nBundle.getText(CALENDAR_HEADER_NEXT_BUTTON);
 
 		if (this.hasSecondaryCalendarType) {
 			this._secondMonthButtonText = this.buttonTextForSecondaryCalendarType.monthButtonText;

package/dist/Card.js

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import CardTemplate from "./generated/templates/CardTemplate.lit.js";
 import Icon from "./Icon.js";
@@ -50,7 +50,8 @@ const metadata = {
 
 		/**
 		 * Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.
-		 * <b>Note:</b> <code>accessibleName</code> should be always set.
+		 * <b>Note:</b> <code>accessibleName</code> should be always set, unless <code>accessibleNameRef</code> is set.
+		 *
 		 *
 		 * @type {String}
 		 * @defaultvalue ""
@@ -60,6 +61,18 @@ const metadata = {
 		accessibleName: {
 			type: String,
 		},
+
+		/**
+		 * Defines the IDs of the elements that label the component.
+		 *
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.0.0-rc.16
+		 */
+		accessibleNameRef: {
+			type: String,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 
@@ -96,12 +109,6 @@ const metadata = {
  * @appenddocs CardHeader
  */
 class Card extends UI5Element {
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
 	static get metadata() {
 		return metadata;
 	}
@@ -132,11 +139,11 @@ class Card extends UI5Element {
 	get _getAriaLabel() {
 		const effectiveAriaLabelText = getEffectiveAriaLabelText(this),
 			effectiveAriaLabel = effectiveAriaLabelText ? ` ${effectiveAriaLabelText}` : "";
-		return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD) + effectiveAriaLabel;
+		return Card.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD) + effectiveAriaLabel;
 	}
 
 	get _ariaCardContentLabel() {
-		return this.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT);
+		return Card.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT);
 	}
 
 	static get dependencies() {
@@ -144,7 +151,7 @@ class Card extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Card.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/dist/CardHeader.js

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import CardHeaderTemplate from "./generated/templates/CardHeaderTemplate.lit.js";
@@ -158,12 +158,6 @@ const metadata = {
  * @since 1.0.0-rc.15
  */
 class CardHeader extends UI5Element {
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
 	static get metadata() {
 		return metadata;
 	}
@@ -201,11 +195,11 @@ class CardHeader extends UI5Element {
 	}
 
 	get ariaCardHeaderRoleDescription() {
-		return this.interactive ? this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
+		return this.interactive ? CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
 	}
 
 	get ariaCardAvatarLabel() {
-		return this.i18nBundle.getText(AVATAR_TOOLTIP);
+		return CardHeader.i18nBundle.getText(AVATAR_TOOLTIP);
 	}
 
 	get ariaLabelledByHeader() {
@@ -243,7 +237,7 @@ class CardHeader extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		CardHeader.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	_headerClick(event) {

package/dist/Carousel.js

@@ -8,10 +8,7 @@ import {
 	isUp,
 	isF7,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import {
-	fetchI18nBundle,
-	getI18nBundle,
-} from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
@@ -283,8 +280,6 @@ class Carousel extends UI5Element {
 		this._scrollEnablement.attachEvent("touchend", event => {
 			this._updateScrolling(event);
 		});
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 		this._onResizeBound = this._onResize.bind(this);
 		this._resizing = false; // indicates if the carousel is in process of resizing
 
@@ -499,7 +494,9 @@ class Carousel extends UI5Element {
 				tabIndex: visible ? "0" : "-1",
 				posinset: idx + 1,
 				setsize: this.content.length,
-				width: this._itemWidth,
+				styles: {
+					width: `${this._itemWidth}px`,
+				},
 				classes: visible ? "" : "ui5-carousel-item--hidden",
 			};
 		});
@@ -597,7 +594,7 @@ class Carousel extends UI5Element {
 		for (let index = 0; index < pages; index++) {
 			dots.push({
 				active: index === this._selectedIndex,
-				ariaLabel: this.i18nBundle.getText(CAROUSEL_DOT_TEXT, [index + 1], [pages]),
+				ariaLabel: Carousel.i18nBundle.getText(CAROUSEL_DOT_TEXT, index + 1, pages),
 			});
 		}
 
@@ -634,7 +631,7 @@ class Carousel extends UI5Element {
 	}
 
 	get ofText() {
-		return this.i18nBundle.getText(CAROUSEL_OF_TEXT);
+		return Carousel.i18nBundle.getText(CAROUSEL_OF_TEXT);
 	}
 
 	get ariaActiveDescendant() {
@@ -642,11 +639,11 @@ class Carousel extends UI5Element {
 	}
 
 	get nextPageText() {
-		return this.i18nBundle.getText(CAROUSEL_NEXT_ARROW_TEXT);
+		return Carousel.i18nBundle.getText(CAROUSEL_NEXT_ARROW_TEXT);
 	}
 
 	get previousPageText() {
-		return this.i18nBundle.getText(CAROUSEL_PREVIOUS_ARROW_TEXT);
+		return Carousel.i18nBundle.getText(CAROUSEL_PREVIOUS_ARROW_TEXT);
 	}
 
 	/**
@@ -675,7 +672,7 @@ class Carousel extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Carousel.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/dist/CheckBox.js

@@ -1,7 +1,7 @@
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -275,8 +275,6 @@ class CheckBox extends UI5Element {
 			document.addEventListener("mouseup", this._deactivate);
 			isGlobalHandlerAttached = true;
 		}
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -300,6 +298,10 @@ class CheckBox extends UI5Element {
 	}
 
 	_onmousedown() {
+		if (this.readonly || this.disabled) {
+			return;
+		}
+
 		this.active = true;
 		activeCb = this; // eslint-disable-line
 	}
@@ -353,12 +355,10 @@ class CheckBox extends UI5Element {
 	}
 
 	valueStateTextMappings() {
-		const i18nBundle = this.i18nBundle;
-
 		return {
-			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
-			"Success": i18nBundle.getText(VALUE_STATE_SUCCESS),
+			"Error": CheckBox.i18nBundle.getText(VALUE_STATE_ERROR),
+			"Warning": CheckBox.i18nBundle.getText(VALUE_STATE_WARNING),
+			"Success": CheckBox.i18nBundle.getText(VALUE_STATE_SUCCESS),
 		};
 	}
 
@@ -415,7 +415,7 @@ class CheckBox extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		CheckBox.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/dist/ColorPalette.js

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
 import ItemNavigationBehavior from "@ui5/webcomponents-base/dist/types/ItemNavigationBehavior.js";
@@ -182,12 +182,16 @@ class ColorPalette extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		const ColorPaletteMoreColors = getFeature("ColorPaletteMoreColors");
+
+		[ColorPalette.i18nBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents"),
+			ColorPaletteMoreColors ? ColorPaletteMoreColors.init() : Promise.resolve(),
+		]);
 	}
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 		this._itemNavigation = new ItemNavigation(this, {
 			getItemsCallback: () => this.displayedColors,
 			rowSize: this.rowSize,
@@ -404,11 +408,11 @@ class ColorPalette extends UI5Element {
 	}
 
 	get colorContainerLabel() {
-		return this.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL);
+		return ColorPalette.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL);
 	}
 
 	get colorPaleteMoreColorsText() {
-		return this.i18nBundle.getText(COLOR_PALETTE_MORE_COLORS_TEXT);
+		return ColorPalette.i18nBundle.getText(COLOR_PALETTE_MORE_COLORS_TEXT);
 	}
 
 	get _showMoreColors() {

package/dist/ColorPaletteItem.js

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import ColorPaletteItemTemplate from "./generated/templates/ColorPaletteItemTemplate.lit.js";
@@ -107,12 +107,11 @@ class ColorPaletteItem extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		ColorPaletteItem.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -121,7 +120,15 @@ class ColorPaletteItem extends UI5Element {
 	}
 
 	get colorLabel() {
-		return this.i18nBundle.getText(COLORPALETTE_COLOR_LABEL);
+		return ColorPaletteItem.i18nBundle.getText(COLORPALETTE_COLOR_LABEL);
+	}
+
+	get styles() {
+		return {
+			root: {
+				"background-color": this.value,
+			},
+		};
 	}
 }
 

package/dist/ColorPalettePopover.js

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
 import ColorPalettePopoverTemplate from "./generated/templates/ColorPalettePopoverTemplate.lit.js";
 
@@ -58,7 +58,6 @@ const metadata = {
 		 * Defines the default color of the component.
 		 * <b>Note:</b> The default color should be a part of the ColorPalette colors</code>
 		 * @type {CSSColor}
-		 * @defaultValue ""
 		 * @public
 		 */
 		defaultColor: {
@@ -151,12 +150,11 @@ class ColorPalettePopover extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		ColorPalettePopover.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	_respPopover() {
@@ -208,11 +206,11 @@ class ColorPalettePopover extends UI5Element {
 	}
 
 	get _colorPaletteTitle() {
-		return this.i18nBundle.getText(COLORPALETTE_POPOVER_TITLE);
+		return ColorPalettePopover.i18nBundle.getText(COLORPALETTE_POPOVER_TITLE);
 	}
 
 	get _cancelButtonLabel() {
-		return this.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);
+		return ColorPalettePopover.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);
 	}
 }
 

package/dist/ColorPicker.js

@@ -30,7 +30,7 @@ const metadata = {
 		 * Defines the currently selected color of the component.
 		 * <br><br>
 		 * <b>Note</b>: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.
-		 * @type {String}
+		 * @type {CSSColor}
 		 * @public
 		 */
 		color: {