@ui5/webcomponents 1.0.0-rc.9 → 1.0.0

package/dist/TabContainer.js

@@ -8,11 +8,12 @@ import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import "@ui5/webcomponents-icons/dist/icons/slim-arrow-up.js";
-import "@ui5/webcomponents-icons/dist/icons/slim-arrow-down.js";
-import "@ui5/webcomponents-icons/dist/icons/slim-arrow-left.js";
-import "@ui5/webcomponents-icons/dist/icons/slim-arrow-right.js";
+import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import { TABCONTAINER_PREVIOUS_ICON_ACC_NAME, TABCONTAINER_NEXT_ICON_ACC_NAME, TABCONTAINER_OVERFLOW_MENU_TITLE } from "./generated/i18n/i18n-defaults.js";
 import Button from "./Button.js";
 import Icon from "./Icon.js";
@@ -47,21 +48,24 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> Use <code>ui5-tab</code> and <code>ui5-tab-separator</code> for the intended design.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {sap.ui.webcomponents.main.ITab[]}
 		 * @public
-		 * @slot
+		 * @slot items
 		 */
 		"default": {
 			propertyName: "items",
 			type: HTMLElement,
 			individualSlots: true,
-			listenFor: { include: ["*"] },
+			invalidateOnChildChange: {
+				properties: true,
+				slots: false,
+			},
 		},
 
 		/**
 		 * Defines the button which will open the overflow menu. If nothing is provided to this slot, the default button will be used.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {sap.ui.webcomponents.main.IButton}
 		 * @public
 		 * @slot
 		 * @since 1.0.0-rc.9
@@ -98,13 +102,20 @@ const metadata = {
 		 * Defines the placement of the tab strip (tab buttons area) relative to the actual tabs' content.
 		 * <br><br>
 		 * <b>Note:</b> By default the tab strip is displayed above the tabs' content area and this is the recommended
-		 * layout for most scenarios. Set to <code>Bottom</code> only when the <code>ui5-tabcontainer</code> is at the
+		 * layout for most scenarios. Set to <code>Bottom</code> only when the component is at the
 		 * bottom of the page and you want the tab strip to act as a menu.
 		 *
+		 * <br><br>
+		 * Available options are:
+		 * <ul>
+		 * <li><code>Top</code></li>
+		 * <li><code>Bottom</code></li>
+		 * </ul>
+		 *
 		 * @type {TabContainerTabsPlacement}
 		 * @defaultvalue "Top"
 		 * @since 1.0.0-rc.7
-		 * @public
+		 * @private
 		 */
 		tabsPlacement: {
 			type: TabContainerTabsPlacement,
@@ -126,11 +137,11 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the alignment of the <code>main text</code> and the <code>additionalText</code> of a tab.
+		 * Defines the alignment of the content and the <code>additionalText</code> of a tab.
 		 *
 		 * <br><br>
 		 * <b>Note:</b>
-		 * The <code>main text</code> and the <code>additionalText</code> would be displayed vertically by defualt,
+		 * The content and the <code>additionalText</code> would be displayed vertically by defualt,
 		 * but when set to <code>Inline</code>, they would be displayed horizontally.
 		 *
 		 * <br><br>
@@ -138,7 +149,7 @@ const metadata = {
 		 * <ul>
 		 * <li><code>Standard</code></li>
 		 * <li><code>Inline</code></li>
-		 * <ul>
+		 * </ul>
 		 *
 		 * @type {TabLayout}
 		 * @defaultvalue "Standard"
@@ -149,6 +160,16 @@ const metadata = {
 			defaultValue: TabLayout.Standard,
 		},
 
+		/**
+		 * Defines the current media query size.
+		 *
+		 * @type {string}
+		 * @private
+		 */
+		mediaRange: {
+			type: String,
+		},
+
 		_selectedTab: {
 			type: Object,
 		},
@@ -185,12 +206,14 @@ const metadata = {
 		 *
 		 * @event sap.ui.webcomponents.main.TabContainer#tab-select
 		 * @param {HTMLElement} tab The selected <code>tab</code>.
-		 * @param {Number} tabIndex The selected <code>tab</code> index.
+		 * @param {Integer} tabIndex The selected <code>tab</code> index.
 		 * @public
 		 */
 		"tab-select": {
-			tab: { type: HTMLElement },
-			tabIndex: { type: Number },
+			detail: {
+				tab: { type: HTMLElement },
+				tabIndex: { type: Number },
+			},
 		},
 	},
 };
@@ -212,7 +235,7 @@ const metadata = {
  * <li><code>ui5-tab-separator</code> - used to separate tabs with a vertical line</li>
  * </ul>
  *
- * <h3>ES6 import</h3>
+ * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/TabContainer";</code>
  * <br>
@@ -264,16 +287,16 @@ class TabContainer extends UI5Element {
 	constructor() {
 		super();
 
-		this._handleHeaderResize = this._handleHeaderResize.bind(this);
+		this._handleResize = this._handleResize.bind(this);
 
 		// Init ScrollEnablement
 		this._scrollEnablement = new ScrollEnablement(this);
 		this._scrollEnablement.attachEvent("scroll", this._updateScrolling.bind(this));
 
 		// Init ItemNavigation
-		this._initItemNavigation();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+		this._itemNavigation = new ItemNavigation(this, {
+			getItemsCallback: () => this._getTabs(),
+		});
 	}
 
 	onBeforeRendering() {
@@ -287,6 +310,7 @@ class TabContainer extends UI5Element {
 				return this.getDomRef().querySelector(`#${item._id}`);
 			};
 			item._itemSelectCallback = this._onItemSelect.bind(this);
+			item._getRealDomRef = () => this.getDomRef().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
 		});
 
 		if (!this._animationRunning) {
@@ -297,14 +321,38 @@ class TabContainer extends UI5Element {
 	onAfterRendering() {
 		this._scrollEnablement.scrollContainer = this._getHeaderScrollContainer();
 		this._updateScrolling();
+
+		this.items.forEach(item => {
+			item._getTabInStripDomRef = this.getDomRef().querySelector(`*[data-ui5-stable="${item.stableDomRef}"]`);
+		});
 	}
 
 	onEnterDOM() {
-		ResizeHandler.register(this._getHeader(), this._handleHeaderResize);
+		ResizeHandler.register(this._getHeader(), this._handleResize);
 	}
 
 	onExitDOM() {
-		ResizeHandler.deregister(this._getHeader(), this._handleHeaderResize);
+		ResizeHandler.deregister(this._getHeader(), this._handleResize);
+	}
+
+	_onTablistFocusin(event) {
+		const target = event.target;
+
+		if (!this._scrollable || !target.classList.contains("ui5-tab-strip-item")) {
+			return;
+		}
+
+		const headerScrollContainer = this._getHeaderScrollContainer();
+		const leftArrowWidth = this.shadowRoot.querySelector(".ui5-tc__headerArrowLeft").offsetWidth;
+		const rightArrowWidth = this.shadowRoot.querySelector(".ui5-tc__headerArrowRight").offsetWidth;
+
+		if (this._scrollableBack && (target.offsetLeft - leftArrowWidth < headerScrollContainer.scrollLeft)) {
+			this._scrollEnablement.move(target.offsetLeft - leftArrowWidth - headerScrollContainer.scrollLeft, 0, true);
+			this._updateScrolling();
+		} else if (this._scrollableForward && (target.offsetLeft + target.offsetWidth > headerScrollContainer.scrollLeft + headerScrollContainer.offsetWidth - rightArrowWidth)) {
+			this._scrollEnablement.move(target.offsetLeft + target.offsetWidth - headerScrollContainer.scrollLeft - headerScrollContainer.offsetWidth + rightArrowWidth, 0, true);
+			this._updateScrolling();
+		}
 	}
 
 	_onHeaderClick(event) {
@@ -343,11 +391,6 @@ class TabContainer extends UI5Element {
 		}
 	}
 
-	_initItemNavigation() {
-		this._itemNavigation = new ItemNavigation(this);
-		this._itemNavigation.getItemsCallback = () => this._getTabs();
-	}
-
 	_onHeaderItemSelect(tab) {
 		if (!tab.hasAttribute("disabled")) {
 			this._onItemSelect(tab);
@@ -372,7 +415,7 @@ class TabContainer extends UI5Element {
 				item.selected = selected;
 
 				if (selected) {
-					this._itemNavigation.current = selectedTabIndex;
+					this._itemNavigation.setCurrentItem(item);
 				}
 			}
 		}, this);
@@ -439,18 +482,17 @@ class TabContainer extends UI5Element {
 	}
 
 	async _onOverflowButtonClick(event) {
-		const button = this.overflowButton[0] || this.getDomRef().querySelector(".ui-tc__overflowButton > ui5-button");
+		const button = this.overflowButton[0] || this.getDomRef().querySelector(".ui-tc__overflowButton > [ui5-button]");
 
 		if (event.target !== button) {
 			return;
 		}
 
 		this.responsivePopover = await this._respPopover();
-		this.updateStaticAreaItemContentDensity();
 		if (this.responsivePopover.opened) {
 			this.responsivePopover.close();
 		} else {
-			this.responsivePopover.open(button);
+			this.responsivePopover.showAt(button);
 		}
 	}
 
@@ -464,8 +506,9 @@ class TabContainer extends UI5Element {
 			.then(_ => this._updateScrolling());
 	}
 
-	_handleHeaderResize() {
+	_handleResize() {
 		this._updateScrolling();
+		this._updateMediaRange();
 	}
 
 	async _closeRespPopover() {
@@ -485,6 +528,10 @@ class TabContainer extends UI5Element {
 		}
 	}
 
+	_updateMediaRange() {
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
+	}
+
 	_getHeader() {
 		return this.shadowRoot.querySelector(`#${this._id}-header`);
 	}
@@ -511,11 +558,16 @@ class TabContainer extends UI5Element {
 			root: {
 				"ui5-tc-root": true,
 				"ui5-tc--textOnly": this.textOnly,
+				"ui5-tc--withAdditonalText": this.withAdditonalText,
+				"ui5-tc--standardTabLayout": this.standardTabLayout,
 			},
 			header: {
 				"ui5-tc__header": true,
 				"ui5-tc__header--scrollable": this._scrollable,
 			},
+			headerInnerContainer: {
+				"ui5-tc__headerInnerContainer": true,
+			},
 			headerScrollContainer: {
 				"ui-tc__headerScrollContainer": true,
 			},
@@ -550,16 +602,24 @@ class TabContainer extends UI5Element {
 		return this.items.every(item => !item.icon);
 	}
 
+	get withAdditonalText() {
+		return this.items.some(item => !!item.additionalText);
+	}
+
+	get standardTabLayout() {
+		return this.tabLayout === TabLayout.Standard;
+	}
+
 	get previousIconACCName() {
-		return this.i18nBundle.getText(TABCONTAINER_PREVIOUS_ICON_ACC_NAME);
+		return TabContainer.i18nBundle.getText(TABCONTAINER_PREVIOUS_ICON_ACC_NAME);
 	}
 
 	get nextIconACCName() {
-		return this.i18nBundle.getText(TABCONTAINER_NEXT_ICON_ACC_NAME);
+		return TabContainer.i18nBundle.getText(TABCONTAINER_NEXT_ICON_ACC_NAME);
 	}
 
 	get overflowMenuTitle() {
-		return this.i18nBundle.getText(TABCONTAINER_OVERFLOW_MENU_TITLE);
+		return TabContainer.i18nBundle.getText(TABCONTAINER_OVERFLOW_MENU_TITLE);
 	}
 
 	get tabsAtTheBottom() {
@@ -584,7 +644,7 @@ class TabContainer extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		TabContainer.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/dist/TabSeparator.js

@@ -18,6 +18,7 @@ const metadata = {
  * @alias sap.ui.webcomponents.main.TabSeparator
  * @extends UI5Element
  * @tagname ui5-tab-separator
+ * @implements sap.ui.webcomponents.main.ITab
  * @public
  */
 class TabSeparator extends UI5Element {