@sapudex/web-components 0.117.1 → 0.138.0

package/src/TabNavigation.ts

@@ -8,6 +8,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
@@ -18,10 +19,10 @@ import {
   isEnter,
   isSpace,
   isEscape,
-  isTabNext,
-  isTabPrevious,
   isHome,
   isEnd,
+  isTabNext,
+  isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import Tab, { ITab } from "./Tab.js";
 import "@ui5/webcomponents/dist/Icon.js";
@@ -30,10 +31,11 @@ import { MORE } from "./generated/i18n/i18n-defaults.js";
 
 // Templates
 import TabNavigationTemplate from "./generated/templates/TabNavigationTemplate.lit.js";
-import TabNavigationPopover from "./generated/templates/TabNavigationPopoverTemplate.lit.js";
+import TabNavigationPopoverTemplate from "./generated/templates/TabNavigationPopoverTemplate.lit.js";
 
 // Styles
 import TabNavigationCss from "./generated/themes/TabNavigation.css.js";
+import TabInOverflowCss from "./generated/themes/TabInOverflow.css.js";
 
 const staticAreaTabStyles: Array<StyleData> = [];
 
@@ -57,7 +59,7 @@ export enum Mode {
  * For the <code>udex-tab-navigation</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/TabNavigation.js";</code>
+ * <code>import "@udex/web-components/dist/TabNavigation.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -68,10 +70,8 @@ export enum Mode {
 @customElement({
   tag: "udex-tab-navigation",
   renderer: litRender,
-  styles: TabNavigationCss,
+  styles: [TabNavigationCss, TabInOverflowCss],
   template: TabNavigationTemplate,
-  staticAreaTemplate: TabNavigationPopover,
-  staticAreaStyles: [staticAreaTabStyles],
   dependencies: [ResponsivePopover],
 })
 /**
@@ -193,6 +193,7 @@ class UDExTabNavigation extends UI5Element {
   }
 
   onBeforeRendering(): void {
+    this.updateOverflowItems();
     this.setSelectedTab();
   }
 
@@ -220,18 +221,37 @@ class UDExTabNavigation extends UI5Element {
   }
 
   setRealTabToItems() {
-    const contentId = this.__id!;
-
     this.items.forEach((tab, index, arr) => {
       tab._iconWithoutBackground = this.iconWithoutBackground;
       tab._posinset = index + 1;
       tab._setsize = arr.length;
-      tab._contentId = `udex-${contentId}-content`;
+      tab._contentId = this.getContentId(index);
       tab._realTab = this._selectedTab;
       tab._width = this.tabWidth;
+      tab._contentTabIndex = this.getContentTabIndex(tab);
     });
   }
 
+  getContentId(index: number): string {
+    return `udex-${index + 1}-content`;
+  }
+
+  getContentTabIndex(tab: ITab): string {
+    if (tab.selected) {
+      const focusableSelectors = ["a[href]", "button", "textarea", "input", "select", "details", "[tabindex]:not([tabindex='-1']"];
+      const focusableElementsUDExTag = this.getAllCustomTags(tab, "udex");
+      const focusableElementsCustomTag = this.getAllCustomTags(tab, "ui5").concat(focusableElementsUDExTag);
+      const focusableElements = Array.from(tab.querySelectorAll(focusableSelectors.join(","))).concat(focusableElementsCustomTag);
+      return focusableElements.length ? "-1" : "0";
+    }
+    return "-1";
+  }
+
+  getAllCustomTags(tab: ITab, prefix: string) {
+    const allElements = tab.querySelectorAll("*");
+    return Array.from(allElements).filter(element => element.tagName.toLowerCase().startsWith(prefix.toLowerCase()));
+  }
+
   setElementInHeader() {
     this.items.forEach(item => {
       item.getElementInHeader = () => this.getDomRef()!.querySelector(`[id="${item.__id!}"]`);
@@ -549,8 +569,8 @@ class UDExTabNavigation extends UI5Element {
     return this.shadowRoot!.querySelector<HTMLElement>(`#${this.__id!}-header`)!;
   }
 
-  async handleMoreButton() {
-    this._responsivePopover = await this.getResponsePopover();
+  handleMoreButton() {
+    this._responsivePopover = this.getResponsePopover();
     this.updateOverflowItems();
     this.handleTogglePopover();
   }
@@ -578,9 +598,9 @@ class UDExTabNavigation extends UI5Element {
     }
   }
 
-  async handleOpenPopover() {
+  handleOpenPopover() {
     if (!this._responsivePopover?.opened) {
-      await this._responsivePopover!.showAt(this.getMoreButton());
+      this._responsivePopover!.showAt(this.getMoreButton());
       this.getMoreButton().classList.add("udex-tab-navigation__button-more--toggled");
       this._isExpanded = true;
     }
@@ -589,8 +609,6 @@ class UDExTabNavigation extends UI5Element {
   handleKeyDown(e: KeyboardEvent) {
     this.handleRightArrow(e);
     this.handleLeftArrow(e);
-    this.handleTabNext(e);
-    this.handleTabPrevious(e);
     this.handleHomeKey(e);
     this.handleEndKey(e);
   }
@@ -632,47 +650,16 @@ class UDExTabNavigation extends UI5Element {
     this._visibleTabs![previousSelectIndex].focus();
   }
 
-  handleTabNext(e: KeyboardEvent) {
-    if (isTabNext(e)) {
-      const previousSelectedIndex = this.getTabIndexById((e.target as HTMLElement).id);
-      this.onTabNext(e, previousSelectedIndex);
-    }
-  }
-
-  onTabNext(e: KeyboardEvent, previousSelectedIndex: number) {
-    const isMoreButton = this._visibleTabs![this._visibleTabs!.length - 1] === this.getMoreButton();
-    const nextSelectIndex = previousSelectedIndex + 1;
-
-    if (nextSelectIndex < this._visibleTabs!.length || (isMoreButton && nextSelectIndex < this._visibleTabs!.length)) {
-      e.preventDefault();
-      this._visibleTabs![nextSelectIndex].focus();
-    }
-  }
-
-  handleTabPrevious(e: KeyboardEvent) {
-    if (isTabPrevious(e)) {
-      const previousSelectedIndex = this.getTabIndexById((e.target as HTMLElement).id);
-      this.onTabPrevious(e, previousSelectedIndex);
-    }
-  }
-
-  onTabPrevious(e: KeyboardEvent, previousSelectedIndex: number) {
-    const previousSelectIndex = previousSelectedIndex - 1;
-
-    if (previousSelectIndex >= 0) {
-      e.preventDefault();
-      this._visibleTabs![previousSelectIndex].focus();
-    }
-  }
-
   handleHomeKey(e: KeyboardEvent) {
     if (isHome(e)) {
+      e.preventDefault();
       this._visibleTabs![0].focus();
     }
   }
 
   handleEndKey(e: KeyboardEvent) {
     if (isEnd(e)) {
+      e.preventDefault();
       this.onEndKey();
     }
   }
@@ -686,43 +673,12 @@ class UDExTabNavigation extends UI5Element {
     }
   }
 
-  async handleFocusMoreButton(e: KeyboardEvent) {
-    await this.handleUpMoreButton(e);
-    await this.handleDownMoreButton(e);
-    this.handleTabPreviouMoreButton(e);
+  handleFocusMoreButton(e: KeyboardEvent) {
+    this.handleDownMoreButton(e);
     this.handleHomeKeyMoreButton(e);
     this.handleEnterKeyMoreButton(e);
   }
 
-  async handleUpMoreButton(e: KeyboardEvent) {
-    if (isUp(e)) {
-      e.preventDefault();
-      e.stopPropagation();
-      this._responsivePopover = await this.getResponsePopover();
-      await this.handleOpenPopover();
-      this.updateOverflowItems();
-      this.onFocusLastItemPopover();
-    }
-  }
-
-  async onFocusLastItemPopover() {
-    if (this._responsivePopover?.opened) {
-      const popoverItems = await this.getItemsFromPopover();
-      const lastOverflowTabIndex = popoverItems.length - 1;
-      popoverItems[lastOverflowTabIndex].focus();
-    }
-  }
-
-  handleTabPreviouMoreButton(e: KeyboardEvent) {
-    if (isTabPrevious(e)) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      const lastVisibleTab = this._visibleTabs!.length - 2;
-      this._visibleTabs![lastVisibleTab].focus();
-    }
-  }
-
   handleHomeKeyMoreButton(e: KeyboardEvent) {
     if (isHome(e)) {
       e.preventDefault();
@@ -731,34 +687,29 @@ class UDExTabNavigation extends UI5Element {
     }
   }
 
-  async handleEnterKeyMoreButton(e: KeyboardEvent) {
+  handleEnterKeyMoreButton(e: KeyboardEvent) {
     if (isEnter(e)) {
       e.preventDefault();
-      this._responsivePopover = await this.getResponsePopover();
+      this._responsivePopover = this.getResponsePopover();
       this.updateOverflowItems();
       this.handleOpenPopover();
     }
   }
 
-  onOpenPopover() {
-    if (!this._responsivePopover?.opened) {
-      this.handleMoreButton();
-    }
-  }
-
-  async handleDownMoreButton(e: KeyboardEvent) {
+  handleDownMoreButton(e: KeyboardEvent) {
     if (isDown(e) || isEnter(e)) {
-      this._responsivePopover = await this.getResponsePopover();
-      await this.handleOpenPopover();
+      this._responsivePopover = this.getResponsePopover();
+      this.handleOpenPopover();
       this.updateOverflowItems();
-      this.onFocusFirstItemPopover();
     }
   }
 
-  async onFocusFirstItemPopover() {
+  onFocusFirstItemPopover() {
     if (this._responsivePopover?.opened) {
-      const popoverItems = await this.getItemsFromPopover();
-      popoverItems[0].focus();
+      const popoverItems = this.getItemsFromPopover();
+      const firstPopoverItem = popoverItems[0];
+      firstPopoverItem.setAttribute("tabindex", "0");
+      firstPopoverItem.focus();
     }
   }
 
@@ -770,6 +721,13 @@ class UDExTabNavigation extends UI5Element {
     this.handleEscape(e);
     this.handleHome(e);
     this.handleEnd(e);
+    this.handleTab(e);
+  }
+
+  handleTab(e: KeyboardEvent): void {
+    if (isTabNext(e) || isTabPrevious(e)) {
+      this.handleClosePopover();
+    }
   }
 
   handleUp(e: KeyboardEvent) {
@@ -778,16 +736,34 @@ class UDExTabNavigation extends UI5Element {
     }
   }
 
-  async onPreviousItemInPopover(target: HTMLElement) {
-    const popoverItems = await this.getItemsFromPopover();
+  onPreviousItemInPopover(target: HTMLElement) {
+    const popoverItems = this.getItemsFromPopover();
     const currentSelectedTabIndex = this.getPopoverTabIndexById(popoverItems, target.id);
     const previousSelectIndex = currentSelectedTabIndex - 1 < 0 ? popoverItems.length - 1 : currentSelectedTabIndex - 1;
+    const prevItem = popoverItems[previousSelectIndex];
+
+    this.resetTabIndexItem(popoverItems[currentSelectedTabIndex]);
+    prevItem.setAttribute("tabIndex", "0");
+    prevItem.focus();
+  }
+
+  onNextItemInPopover(target: HTMLElement) {
+    const popoverItems = this.getItemsFromPopover();
+    const currentSelectedTabIndex = this.getPopoverTabIndexById(popoverItems, target.id);
+    const nextSelectIndex = currentSelectedTabIndex + 1 > popoverItems.length - 1 ? 0 : currentSelectedTabIndex + 1;
+    const nextItem = popoverItems[nextSelectIndex];
 
-    popoverItems[previousSelectIndex].focus();
+    this.resetTabIndexItem(popoverItems[currentSelectedTabIndex]);
+    nextItem.setAttribute("tabIndex", "0");
+    nextItem.focus();
   }
 
-  async getItemsFromPopover(): Promise<HTMLElement[]> {
-    const responsivePopover = await this.getResponsePopover();
+  resetTabIndexItem(item: HTMLElement): void {
+    item.setAttribute("tabIndex", "-1");
+  }
+
+  getItemsFromPopover(): Array<HTMLElement> {
+    const responsivePopover = this.getResponsePopover();
     const [contentFromPopover] = responsivePopover.content;
     return Array.from(contentFromPopover.children) as Array<HTMLElement>;
   }
@@ -802,14 +778,6 @@ class UDExTabNavigation extends UI5Element {
     }
   }
 
-  async onNextItemInPopover(target: HTMLElement) {
-    const popoverItems = await this.getItemsFromPopover();
-    const currentSelectedTabIndex = this.getPopoverTabIndexById(popoverItems, target.id);
-    const nextSelectIndex = currentSelectedTabIndex + 1 > popoverItems.length - 1 ? 0 : currentSelectedTabIndex + 1;
-
-    popoverItems[nextSelectIndex].focus();
-  }
-
   handleEnterOrSpace(e: KeyboardEvent) {
     if (isEnter(e) || isSpace(e)) {
       e.preventDefault();
@@ -826,25 +794,25 @@ class UDExTabNavigation extends UI5Element {
     }
   }
 
-  async handleHome(e: KeyboardEvent) {
+  handleHome(e: KeyboardEvent) {
     if (isHome(e)) {
       e.preventDefault();
-      const popoverItems = await this.getItemsFromPopover();
+      const popoverItems = this.getItemsFromPopover();
       popoverItems[0].focus();
     }
   }
 
-  async handleEnd(e: KeyboardEvent) {
+  handleEnd(e: KeyboardEvent) {
     if (isEnd(e)) {
       e.preventDefault();
-      const popoverItems = await this.getItemsFromPopover();
+      e.stopPropagation();
+      const popoverItems = this.getItemsFromPopover();
       popoverItems[popoverItems.length - 1].focus();
     }
   }
 
-  async getResponsePopover() {
-    const staticAreaItem = await this.getStaticAreaItemDomRef();
-    return staticAreaItem!.querySelector<ResponsivePopover>(`#${this.__id!}-overflow-popover`)!;
+  getResponsePopover(): ResponsivePopover {
+    return this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-popover]")!;
   }
 
   get moreButtonText(): string {
@@ -854,6 +822,14 @@ class UDExTabNavigation extends UI5Element {
   static registerStaticAreaTabStyles(styles: StyleData) {
     staticAreaTabStyles.push(styles);
   }
+
+  static get tabNavigationPopoverTemplate() {
+    return TabNavigationPopoverTemplate;
+  }
+
+  get tabNavigationPopover() {
+    return executeTemplate(UDExTabNavigation.tabNavigationPopoverTemplate, this);
+  }
 }
 
 UDExTabNavigation.define();

package/src/TabNavigationPopover.hbs

@@ -3,6 +3,7 @@
     horizontal-align="Right"
 	placement-type="Bottom"
     aria-orientation="vertical"
+    @ui5-after-open="{{onFocusFirstItemPopover}}"
     hide-arrow
     _hideHeader
 >

package/src/Tag.hbs

@@ -1,26 +1,76 @@
-<div
-    tabindex="{{_tabIndex}}"
-    class="{{tagClasses}}"
-    @click="{{tagClickHandler}}"
-    @focusin="{{_focusin}}"
-    @focusout="{{_focusout}}"
-    @keydown="{{tagKeyDown}}"
-    role="{{accessibleRole}}"
-    aria-label="{{accessibleName}}"
-    aria-pressed="{{selected}}">
-    {{#if startIcon}}
-        <ui5-icon
-            class="udex-tag__icon udex-tag__icon--start"
-            name="{{icon}}"
-            @click="{{iconClickHandler}}">
-        </ui5-icon>
-    {{/if}}
-    <span class="udex-tag__text">{{{text}}}</span>
-    {{#if endIcon}}
-        <ui5-icon
-            class="udex-tag__icon udex-tag__icon--end"
-            name="{{icon}}"
-            @click="{{iconClickHandler}}">
-        </ui5-icon>
-    {{/if}}
-</div>
+{{#if readOnly}}
+    <div class="{{tagClasses}}">
+        <span class="udex-tag__text">{{{text}}}</span>
+    </div>
+{{else if href}}
+    <a role="{{accessibleRole}}" class="{{tagClasses}}" @click="{{tagLinkClickHandler}}" href="{{href}}">
+        {{#if startIcon}}
+            <ui5-icon
+                    class="udex-tag__icon udex-tag__icon--start"
+                    name="{{icon}}">
+            </ui5-icon>
+        {{/if}}
+        <span class="udex-tag__text">{{{text}}}</span>
+        {{#if endIcon}}
+            <ui5-icon
+                    class="udex-tag__icon udex-tag__icon--end"
+                    name="{{icon}}">
+            </ui5-icon>
+        {{/if}}
+    </a>
+{{else if nonSelectable}}
+    <div class="{{tagClasses}}">
+        {{#if startIcon}}
+            <button
+                    class="udex-tag__btn-icon"
+                    @click="{{iconClickHandler}}"
+                    role="{{accessibleRole}}"
+                    aria-label="{{iconAccessibleName}}">
+                <ui5-icon
+                        class="udex-tag__icon udex-tag__icon--start"
+                        name="{{icon}}">
+                </ui5-icon>
+            </button>
+        {{/if}}
+        <span class="udex-tag__text">{{{text}}}</span>
+        {{#if endIcon}}
+            <button
+                    class="udex-tag__btn-icon"
+                    @click="{{iconClickHandler}}"
+                    role="{{accessibleRole}}"
+                    aria-label="{{iconAccessibleName}}">
+                <ui5-icon
+                        class="udex-tag__icon udex-tag__icon--end"
+                        name="{{icon}}">
+                </ui5-icon>
+            </button>
+        {{/if}}
+    </div>
+{{else}}
+    <div
+        tabindex="{{_tabIndex}}"
+        class="{{tagClasses}}"
+        @click="{{tagClickHandler}}"
+        @focusin="{{_focusin}}"
+        @focusout="{{_focusout}}"
+        @keydown="{{tagKeyDown}}"
+        role="{{accessibleRole}}"
+        aria-label="{{accessibleName}}"
+        aria-pressed="{{selected}}">
+        {{#if startIcon}}
+            <ui5-icon
+                class="udex-tag__icon udex-tag__icon--start"
+                name="{{icon}}"
+                @click="{{iconClickHandler}}">
+            </ui5-icon>
+        {{/if}}
+        <span class="udex-tag__text">{{{text}}}</span>
+        {{#if endIcon}}
+            <ui5-icon
+                class="udex-tag__icon udex-tag__icon--end"
+                name="{{icon}}"
+                @click="{{iconClickHandler}}">
+            </ui5-icon>
+        {{/if}}
+    </div>
+{{/if}}