@ui5/webcomponents 1.7.0 → 1.7.2

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.7.1](https://github.com/SAP/ui5-webcomponents/compare/v1.7.0...v1.7.1) (2022-09-08)
+
+
+### Bug Fixes
+
+* **ui5-tabcontainer:** fixed error when no tabs ([#5793](https://github.com/SAP/ui5-webcomponents/issues/5793)) ([4aefe17](https://github.com/SAP/ui5-webcomponents/commit/4aefe176bfed5a6ba963418413aa167955b40418))
+
+
+
+
+
 # [1.7.0](https://github.com/SAP/ui5-webcomponents/compare/v1.6.0...v1.7.0) (2022-09-02)
 
 

package/dist/Avatar.js

@@ -344,9 +344,11 @@ class Avatar extends UI5Element {
 	}
 
 	get validInitials() {
-		const validInitials = /^[a-zA-Z]{1,2}$/;
+		// initials should consist of only 1,2 or 3 latin letters
+		const validInitials = /^[a-zA-Z]{1,3}$/,
+			  areInitialsValid = this.initials && validInitials.test(this.initials);
 
-		if (this.initials && validInitials.test(this.initials)) {
+		if (areInitialsValid) {
 			return this.initials;
 		}
 
@@ -370,6 +372,35 @@ class Avatar extends UI5Element {
 		this._onclick = this.interactive ? this._onClickHandler.bind(this) : undefined;
 	}
 
+	onEnterDOM() {
+		this._checkInitialsWidth();
+
+		if (!this.validInitials) {
+			// if initials are not valid,an icon should be shown inside the avatar
+			this._setFallbackIcon();
+		}
+	}
+
+	_setFallbackIcon() {
+		// the default icon shown inside the avatar,
+		// when the initials are not valid
+		this.icon = "employee";
+		return this.icon;
+	}
+
+	_checkInitialsWidth() {
+		// if initials` width is bigger than the avatar,
+		// an icon should be shown inside the avatar
+		const avatar = this.getDomRef(),
+			avatarInitials = avatar.querySelector(".ui5-avatar-initials");
+		if (this.initials && this.initials.length === 3) {
+			if (avatarInitials.scrollWidth >= avatar.scrollWidth) {
+				this.icon = "employee";
+			}
+		}
+		return this.icon;
+	}
+
 	_onClickHandler(event) {
 		// prevent the native event and fire custom event to ensure the noConfict "ui5-click" is fired
 		event.stopPropagation();

package/dist/Dialog.js

@@ -98,6 +98,10 @@ const metadata = {
 		 * If this property is set to true, the Dialog will be draggable by its header.
 		 * <br><br>
 		 * <b>Note:</b> The component can be draggable only in desktop mode.
+		 * <br><br>
+		 * <b>Note:</b> This property overrides the default HTML "draggable" attribute native behavior.
+		 * When "draggable" is set to true, the native browser "draggable"
+		 * behavior is prevented and only the Dialog custom logic ("draggable by its header") works.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @since 1.0.0-rc.9
@@ -217,6 +221,8 @@ class Dialog extends Popup {
 
 		this._resizeMouseMoveHandler = this._onResizeMouseMove.bind(this);
 		this._resizeMouseUpHandler = this._onResizeMouseUp.bind(this);
+
+		this._dragStartHandler = this._handleDragStart.bind(this);
 	}
 
 	static get metadata() {
@@ -348,11 +354,15 @@ class Dialog extends Popup {
 	onEnterDOM() {
 		super.onEnterDOM();
 		this._attachScreenResizeHandler();
+
+		this.addEventListener("dragstart", this._dragStartHandler);
 	}
 
 	onExitDOM() {
 		super.onExitDOM();
 		this._detachScreenResizeHandler();
+
+		this.removeEventListener("dragstart", this._dragStartHandler);
 	}
 
 	/**
@@ -648,6 +658,12 @@ class Dialog extends Popup {
 		this._detachMouseResizeHandlers();
 	}
 
+	_handleDragStart(event) {
+		if (this.draggable) {
+			event.preventDefault();
+		}
+	}
+
 	_attachMouseResizeHandlers() {
 		this._detachScreenResizeHandler();
 

package/dist/TabContainer.js

@@ -378,17 +378,20 @@ class TabContainer extends UI5Element {
 	}
 
 	onBeforeRendering() {
-		// update selected tab
 		this._allItemsAndSubItems = this._getAllSubItems(this.items);
-		if (this._allItemsAndSubItems.length) {
-			const selectedTabs = this._allItemsAndSubItems.filter(tab => tab.selected);
-			if (selectedTabs.length) {
-				this._selectedTab = selectedTabs[0];
-			} else {
-				this._selectedTab = this._allItemsAndSubItems[0];
-				this._selectedTab._selected = true;
-			}
+		if (!this._allItemsAndSubItems.length) {
+			return;
+		}
+
+		// update selected tab
+		const selectedTabs = this._allItemsAndSubItems.filter(tab => tab.selected);
+		if (selectedTabs.length) {
+			this._selectedTab = selectedTabs[0];
+		} else {
+			this._selectedTab = this._allItemsAndSubItems[0];
+			this._selectedTab._selected = true;
 		}
+
 		this._setItemsPrivateProperties(this.items);
 
 		if (!this._animationRunning) {
@@ -401,6 +404,10 @@ class TabContainer extends UI5Element {
 	}
 
 	onAfterRendering() {
+		if (!this.items.length) {
+			return;
+		}
+
 		this._setItemsForStrip();
 
 		if (!this.shadowRoot.contains(document.activeElement)) {
@@ -619,6 +626,7 @@ class TabContainer extends UI5Element {
 	 * Calling <code>allItems</code> on this TabContainer will return the instances in the following order:
 	 * <code>[ ui5-tab#First, ui5-tab#Nested, ui5-tab#Second, ui5-tab-separator#sep, ui5-tab#Third ]</code>
 	 * @public
+	 * @readonly
 	 *
 	 * @returns {sap.ui.webcomponents.main.ITab[]}
 	 */