@sapudex/web-components 0.117.1 → 0.138.0

package/src/SelectBox.ts

@@ -15,13 +15,14 @@ import {
   isUp,
   isEscape,
   isBackSpace,
+  isShift,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import Tokenizer from "@ui5/webcomponents/dist/Tokenizer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Token from "@ui5/webcomponents/dist/Token.js";
 import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import UDExDropdown from "./Dropdown.js";
+import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
 import UDExListGroupHeader from "./ListGroupHeader.js";
@@ -44,6 +45,7 @@ import SelectBoxCss from "./generated/themes/SelectBox.css.js";
 import TextFieldCss from "./generated/themes/TextField.css.js";
 import SearchableListCss from "./generated/themes/SearchableList.css.js";
 import UDExStatusMessage from "./StatusMessage.js";
+import UDExControlButton from "./ControlButton.js";
 
 /**
  * @class
@@ -75,7 +77,6 @@ import UDExStatusMessage from "./StatusMessage.js";
     UDExListSelectAll,
     UDExSelectBoxItem,
     UDExList,
-    UDExDropdown,
     UDExTooltip,
     UDExSearch,
     UDExButton,
@@ -84,6 +85,8 @@ import UDExStatusMessage from "./StatusMessage.js";
     Token,
     Icon,
     UDExStatusMessage,
+    UDExControlButton,
+    ResponsivePopover,
   ],
 })
 
@@ -220,20 +223,37 @@ class UDExSelectBox extends UDExSearchableListBase {
   @property({ type: String, noAttribute: true })
     _direction?: string;
 
+  /**
+   * @default false
+   * @private
+   */
   @property({ type: Boolean })
     _focused!: boolean;
 
+  /**
+   * @default false
+   * @private
+   */
   @property({ type: Boolean })
-    _open?: boolean = false;
+    _open!: boolean;
 
+  /**
+   * @default false
+   * @private
+   */
   @property({ type: Boolean })
-    _showTagsDropdownContent: boolean = false;
+    _showTagsDropdownContent!: boolean;
 
-  _dropdown!: UDExDropdown;
+  _trigger!: HTMLElement;
+  _popover!: ResponsivePopover;
   _tokenizer!: Tokenizer;
   _search!: UDExSearch;
   _singleSelectedOption!: string;
   _truncatableTag!: UDExTag;
+  _tags!: Array<UDExTag>;
+  _inactiveTabIndex: number = -1;
+  _activeTabIndex: number = 0;
+  _openedByTrigger: boolean = true;
 
   _handleResizeBound: ResizeObserverCallback;
 
@@ -244,22 +264,24 @@ class UDExSelectBox extends UDExSearchableListBase {
     this._filteredItems = [];
   }
 
-  onEnterDOM(): void {
+  onEnterDOM() {
     ResizeHandler.register(this, this._handleResizeBound);
   }
 
-  onExitDOM(): void {
+  onExitDOM() {
     ResizeHandler.deregister(this, this._handleResizeBound);
   }
 
   onAfterRendering() {
-    this._tokenizer = this.tokenizer;
-    this._dropdown = this.dropdown;
-    this._search = this.search;
+    this._tokenizer = this.getTokenizer();
+    this._popover = this.getPopover();
+    this._search = this.getSearch();
+    this._trigger = this.getTrigger();
+    this._tags = this.getTags();
     this.handleDirection();
-
     if (this._tokenizer?.tokens.length > 0) {
       this.handleOutsideClick();
+      this.resetTagsTabIndexes();
     }
   }
 
@@ -272,7 +294,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   _handleResize() {
-    this._dropdown.style.setProperty("--udex-dropdown-pane-width", `${this.offsetWidth}px`);
+    this._popover.style.setProperty("--udex-dropdown-pane-width", `${this.offsetWidth}px`);
   }
 
   handleItemPress(e:CustomEvent) {
@@ -322,7 +344,11 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleDropdownBeforeOpen() {
-    this._open = true;
+    if (this.height) {
+      const content = this._popover.shadowRoot!.querySelector("[part=content]") as HTMLElement;
+      content.style.maxHeight = this.height;
+    }
+    this.fireEvent("before-open");
   }
 
   handleDropdownAfterClose() {
@@ -364,13 +390,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   handleTagPress(e: CustomEvent) {
     const tag = e.target as UDExTag;
     tag.selected = false;
-
-    if (tag.isTruncatable && !this._tokenizer.expanded) {
-      this._truncatableTag = tag;
-      this._truncatableTag.selected = true;
-      this._showTagsDropdownContent = true;
-      this.openDropdown();
-    }
+    this.toggleTruncatedPopover(tag);
   }
 
   handleUnselectTruncatableTag() {
@@ -381,11 +401,13 @@ class UDExSelectBox extends UDExSearchableListBase {
 
   handleKeydownTokenizer(e: KeyboardEvent) {
     e.stopPropagation();
+    this.getTagContent(this._tags[0]).tabIndex = this._inactiveTabIndex;
+
     const target = e.target as Token;
     const activeIndex = this._tokenizer.tokens?.indexOf(target);
     const tagsCount = this._tokenizer._tokensCount;
-    const isTabPreviousFirstTag = isTabPrevious(e) && activeIndex === 0;
-    const isTabNextLastTag = isTabNext(e) && this._tokenizer._tokensCount === activeIndex + 1;
+    const shouldNavigateTags = (isLeft(e) || isRight(e) || isBackSpace(e) || isDelete(e)) && tagsCount > 0;
+    this._tokenizer.expanded = shouldNavigateTags;
 
     if (isLeft(e) && activeIndex !== 0) {
       this.focusTag(activeIndex - 1);
@@ -397,35 +419,33 @@ class UDExSelectBox extends UDExSearchableListBase {
       this.scrollToTag(activeIndex + 1);
     }
 
-    if (isTabNextLastTag || isTabPreviousFirstTag) {
-      this._tokenizer.expanded = false;
-    }
-
-    if (isDown(e) || isUp(e)) {
+    if ((isDown(e) || isUp(e))) {
+      this._openedByTrigger = false;
       this.openDropdown();
     }
   }
 
   handleKeyDownTrigger(e: KeyboardEvent) {
-    if (isSpace(e)) {
-      e.preventDefault();
-    }
-
     if (isSpace(e) || isEnter(e)) {
+      e.preventDefault();
+      e.stopPropagation();
+      this._showTagsDropdownContent = false;
+      this._openedByTrigger = true;
       this.openDropdown();
     }
-
-    if (isTabNext(e) && this._tokenizer?._tokensCount > 0) {
-      this._tokenizer.expanded = true;
-      setTimeout(() => {
-        this.focusTag(this._tokenizer._tokensCount - 1);
-      });
-    }
   }
 
   handleKeyDownTag(e: KeyboardEvent) {
-    if (isSpace(e)) {
+    const tag = e.target as UDExTag;
+    if (isSpace(e) || isShift(e) || isEnter(e)) {
       e.preventDefault();
+      e.stopPropagation();
+    }
+
+    if (tag.isTruncatable && this.validTruncatableKey(e)) {
+      this.toggleTruncatedPopover(tag);
+    } else {
+      this._showTagsDropdownContent = false;
     }
 
     if (isDelete(e) || isBackSpace(e)) {
@@ -433,32 +453,37 @@ class UDExSelectBox extends UDExSearchableListBase {
       const target = e.target as Token;
       const tags = this._tokenizer.tokens;
       const deletedTagIndex = tags.indexOf(target);
-      const nextTokenIndex = deletedTagIndex === tags.length - 1 ? deletedTagIndex - 1 : deletedTagIndex + 1;
+      let nextTokenIndex = deletedTagIndex + 1;
       if (this._tokenizer.tokens.length !== 1) {
-        this.focusTag(nextTokenIndex);
+        if (deletedTagIndex === tags.length - 1) {
+          nextTokenIndex = deletedTagIndex - 1;
+          this.focusTag(nextTokenIndex);
+        } else {
+          this.focusTag(nextTokenIndex);
+        }
         this.scrollToTag(nextTokenIndex);
       } else {
-        this.trigger.focus();
+        this._trigger.focus();
       }
     }
   }
 
   handleKeyDownDropdown(e: KeyboardEvent) {
     const isTabPrevPress = isTabPrevious(e) && !this._search;
+    const isTabNextPress = isTabNext(e);
+    const isEscapePress = isEscape(e);
+    const isSearchResetTrigger = e.target === this._search;
 
-    if (isEscape(e)) {
-      this.trigger.focus();
-    }
-
-    if (isTabNext(e) || isTabPrevPress) {
-      this.closeDropdown();
+    if ((isTabNextPress && (!isSearchResetTrigger || this.isListEmpty)) || isTabPrevPress || isEscapePress) {
+      this.closeDropdown(e);
     }
   }
 
   handleKeyDownSearch(e: CustomEvent) {
     const keyEvent = e.detail as KeyboardEvent;
+
     if (isTabPrevious(keyEvent) || isEscape(keyEvent)) {
-      this.closeDropdown();
+      this.closeDropdown(keyEvent);
     }
   }
 
@@ -471,12 +496,41 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   openDropdown() {
-    this._dropdown.onOpen(this.trigger);
+    this._popover.showAt(this._trigger);
+    this._open = true;
+    if (this.showMultiSelectedOptions) {
+      this._tokenizer.expanded = true;
+    }
   }
 
-  closeDropdown() {
-    if (this._dropdown.open) {
-      this._dropdown.onClose();
+  closeDropdown(e?: KeyboardEvent) {
+    if (this._popover.open) {
+      if (this._tokenizer) {
+        this._tokenizer.expanded = false;
+      }
+
+      if (e && (isEscape(e) || isTabPrevious(e))) {
+        e.preventDefault();
+        if (this._openedByTrigger) {
+          this._trigger.focus();
+        } else {
+          this.focusTag(0);
+        }
+      }
+      this._popover.close();
+    }
+  }
+
+  toggleTruncatedPopover(tag: UDExTag) {
+    if (!tag.isTruncatable) {
+      this._showTagsDropdownContent = false;
+    }
+
+    if (tag.isTruncatable && !this._open) {
+      this._truncatableTag = tag;
+      this._truncatableTag.selected = true;
+      this._showTagsDropdownContent = true;
+      this.openDropdown();
     }
   }
 
@@ -496,7 +550,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleOpenMultiSelect() {
-    if (this._dropdown.open) {
+    if (this._popover.open) {
       this.closeDropdown();
     } else {
       this._showTagsDropdownContent = false;
@@ -505,7 +559,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleOpenSingleSelect() {
-    if (this._dropdown.open) {
+    if (this._popover.open) {
       this.closeDropdown();
     } else {
       this.openDropdown();
@@ -524,6 +578,30 @@ class UDExSelectBox extends UDExSearchableListBase {
     return this.displayonly ? this.showMoreReadOnlyItems() : this.showMoreItems();
   }
 
+  getPopover(): ResponsivePopover {
+    return this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-popover]")!;
+  }
+
+  getSearch(): UDExSearch {
+    return this.shadowRoot!.querySelector<UDExSearch>("udex-search")!;
+  }
+
+  getTrigger(): HTMLElement {
+    return this.shadowRoot!.querySelector(".udex-text-field__input")!;
+  }
+
+  getTokenizer(): Tokenizer {
+    return this.shadowRoot!.querySelector<Tokenizer>("[ui5-tokenizer]")!;
+  }
+
+  getTags(): Array<UDExTag> {
+    return Array.from(this.shadowRoot!.querySelectorAll<UDExTag>("udex-tag"));
+  }
+
+  getTagContent(tag: UDExTag): HTMLElement {
+    return tag.shadowRoot!.querySelector(".udex-tag")!;
+  }
+
   handleDirection() {
     const directionStyles: string = window
       .getComputedStyle(this)
@@ -536,6 +614,18 @@ class UDExSelectBox extends UDExSearchableListBase {
     }
   }
 
+  validTruncatableKey(e: KeyboardEvent): boolean {
+    return isSpace(e) || isEnter(e);
+  }
+
+  resetTagsTabIndexes() {
+    this._tags.forEach((tag, i) => { this.getTagContent(tag).tabIndex = i === 0 ? this._activeTabIndex : this._inactiveTabIndex; });
+  }
+
+  get allowTargetOverlap(): boolean {
+    return !this.disableTargetOverlap;
+  }
+
   get isDisabled(): boolean {
     return this.readonly || this.displayonly || this.disabled;
   }
@@ -556,22 +646,6 @@ class UDExSelectBox extends UDExSearchableListBase {
     return this.hasSelectedItems && this.modeMultiSelect;
   }
 
-  get dropdown(): UDExDropdown {
-    return this.shadowRoot!.querySelector<UDExDropdown>("udex-dropdown")!;
-  }
-
-  get search(): UDExSearch {
-    return this.shadowRoot!.querySelector<UDExSearch>("udex-search")!;
-  }
-
-  get trigger(): UDExDropdown {
-    return this.shadowRoot!.querySelector(".udex-text-field__input")!;
-  }
-
-  get tokenizer(): Tokenizer {
-    return this.shadowRoot!.querySelector<Tokenizer>("[ui5-tokenizer]")!;
-  }
-
   get labelClass(): string {
     const baseClass = "udex-text-field__label";
     const isActive = this._open || this._singleSelectedOption || this.hasSelectedItems;
@@ -592,6 +666,11 @@ class UDExSelectBox extends UDExSearchableListBase {
     if (this._showTagsDropdownContent && this._truncatableTag) {
       return false;
     }
+
+    if (this._tokenizer) {
+      return this._tokenizer.expanded;
+    }
+
     return this._open;
   }
 
@@ -605,7 +684,11 @@ class UDExSelectBox extends UDExSearchableListBase {
 
   get effectiveTabIndex(): string {
     const tabindex = this.getAttribute("tabindex");
-    return this.disabled ? "-1" : tabindex || "0";
+    return this.disabled ? `${this._inactiveTabIndex}` : tabindex || `${this._inactiveTabIndex}`;
+  }
+
+  get triggerTabIndex(): string {
+    return this.disabled || this.readonly ? `${this._inactiveTabIndex}` : "";
   }
 
   get iconAccessibleNameText(): string {

package/src/StatusBadge.ts

@@ -82,13 +82,13 @@ class UDExStatusBadge extends UI5Element {
   @property({ type: BadgeSize, defaultValue: BadgeSize.S })
     size!: `${BadgeSize}`;
 
-    /**
+  /**
    * Defines the text alternative of the component.
    *
    * @default ""
    * @public
    */
-    @property({ type: String, defaultValue: "" })
+  @property({ type: String, defaultValue: "" })
     accessibleName!: string;
 
   static i18nBundle: I18nBundle;

package/src/Switch.hbs

@@ -1,12 +1,12 @@
 <div class="udex-switch">
     {{#if label}}
-        <label for="udex-switch__input" class="udex-switch__label">{{label}}</label>
+        <label id="{{this._id}}-switch__label" for="{{this._id}}-switch__input" class="udex-switch__label" part="label">{{label}}</label>
     {{/if}}
     <div
         class="udex-switch__container"
         role="switch"
         aria-label="{{accessibleName}}"
-        aria-labelledby="{{accessibleNameRef}}"
+        aria-labelledby="{{ariaLabeledBy}}"
         aria-checked="{{checked}}"
         aria-disabled="{{disabled}}"
         tabindex="{{switchTabIndex}}"
@@ -32,6 +32,6 @@
             </div>
         </div>
 
-        <input id="udex-switch__input" type="checkbox" ?checked="{{checked}}" class="udex-switch__input" />
+        <input id="{{this._id}}-switch__input" type="checkbox" ?checked="{{checked}}" class="udex-switch__input" />
     </div>
 </div>

package/src/Switch.ts

@@ -22,6 +22,26 @@ export enum SwitchColor {
   Semantic = "Semantic",
 }
 
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-switch</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/Switch.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UI5Element
+ * @tagname udex-switch
+ * @public
+ */
+
 @customElement({
   tag: "udex-switch",
   renderer: litRender,
@@ -29,6 +49,7 @@ export enum SwitchColor {
   template: SwitchTemplate,
   dependencies: [Icon],
 })
+
 /**
  * Fired when the component checked state changes.
  *
@@ -131,6 +152,10 @@ class UDExSwitch extends UI5Element {
   get isSemanticColor(): boolean {
     return this.color === SwitchColor.Semantic;
   }
+
+  get ariaLabeledBy(): string {
+    return this.accessibleNameRef || this.label ? `${this._id}-switch__label` : "";
+  }
 }
 
 UDExSwitch.define();

package/src/Tab.ts

@@ -46,6 +46,7 @@ interface ITab extends UI5Element {
   _slotName: string;
   _selected?: boolean;
   _tabIndex: string;
+  _contentTabIndex: string;
   _iconWithoutBackground: boolean;
   _posinset?: number;
   _setsize?: number;
@@ -66,7 +67,7 @@ interface ITab extends UI5Element {
  * For the <code>udex-tab</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Tab.js";</code>
+ * <code>import "@udex/web-components/dist/Tab.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -173,6 +174,15 @@ class UDExTab extends UI5Element implements ITab {
   @property({ type: String })
     _tabIndex!: string;
 
+  /**
+   * Defines the tabindex of the tab content.
+   *
+   * @private
+   * @default -1
+   */
+  @property({ type: String })
+    _contentTabIndex!: string;
+
   /**
    * Defines the background color of the component.
    *

package/src/TabHeader.hbs

@@ -33,7 +33,9 @@
 
 {{#*inline "tab-content"}}
     {{#if hasIcon}}
-        <span class="udex-tab-navigation__button-icon-outer">
+        <span class="udex-tab-navigation__button-icon-outer"
+            role="presentation"
+            aria-hidden="true">
             <ui5-icon
                 class="udex-tab-navigation__button-icon"
                 name="{{icon}}"

package/src/TabInOverflow.hbs

@@ -3,9 +3,12 @@
         id="{{this._id}}"
         class="udex-tab-overflow__button"
         role="tab"
-    >
+        aria-selected="{{this.effectiveSelected}}"
+        tabindex="{{_tabIndex}}">
         {{#if hasIcon}}
-            <span class="udex-tab-overflow__button-icon">
+            <span class="udex-tab-overflow__button-icon"
+                role="presentation"
+                aria-hidden="true">
                 <ui5-icon
                     name="{{icon}}"
                 ></ui5-icon>
@@ -16,18 +19,25 @@
         {{/if}}
         {{text}}
         {{#if hasNotIcon}}
-            <span class="udex-tab-overflow__button-badge"></span>
+            <span class="udex-tab-overflow__button-badge"
+                role="presentation"
+                aria-hidden="true">
+            </span>
         {{/if}}
     </button>
 {{else}}
     <a
+        id="{{this._id}}"
         href="{{href}}"
         target="{{this.target}}"
         class="udex-tab-overflow__button"
         role="tab"
-    >
+        aria-selected="{{this.effectiveSelected}}"
+        tabindex="{{_tabIndex}}">
         {{#if hasIcon}}
-            <span class="udex-tab-overflow__button-icon">
+            <span class="udex-tab-overflow__button-icon"
+                role="presentation"
+                aria-hidden="true">
                 <ui5-icon
                     name="{{icon}}"
                 ></ui5-icon>
@@ -38,7 +48,10 @@
         {{/if}}
         {{text}}
         {{#if hasNotIcon}}
-            <span class="udex-tab-overflow__button-badge"></span>
+            <span class="udex-tab-overflow__button-badge"
+                role="presentation"
+                aria-hidden="true">
+            </span>
         {{/if}}
     </a>
 {{/if}}

package/src/TabNavigation.hbs

@@ -3,15 +3,14 @@
         id="{{_id}}-header"
         class="udex-tab-navigation__header"
         part="tab-navigation-header"
-        @keydown="{{handleKeyDown}}"
-    >
+        @keydown="{{handleKeyDown}}">
         <div
             id="{{_id}}-header-tabs"
             class="udex-tab-navigation__header-tabs"
             role="tablist"
+            aria-labelledby="tablist-{{_id}}"
             part="tab-navigation-header-tabs"
-            @click="{{onTabClick}}"
-        >
+            @click="{{onTabClick}}">
             {{#each items}}
                 {{this.tabNavigation}}
             {{/each}}
@@ -20,28 +19,39 @@
             class="udex-tab-navigation__button-more"
             @click="{{handleMoreButton}}"
             @keydown="{{handleFocusMoreButton}}"
-            tabindex="-1"
+            tabindex="0"
             aria-haspopup="menu"
             aria-expanded="{{_isExpanded}}"
             tooltip="{{moreButtonText}}"
-            hidden
-        >
+            hidden>
             {{moreButtonText}}
             <ui5-icon
                 class="udex-tab-navigation__button-more-icon"
                 name="navigation-down-arrow"
             ></ui5-icon>
         </button>
+        {{tabNavigationPopover}}
     </div>
     <div
         class="udex-tab-navigation__content"
         id="udex-{{__id}}-content"
-        part="tab-navigation-content"
-    >
+        part="tab-navigation-content">
         {{#each items}}
-            <div class="udex-tab-navigation__content-item">
-                <slot name="{{this._slotName}}"></slot>
-            </div>
+            {{#if this.selected}}
+                <div
+                    class="udex-tab-navigation__content-item"
+                    id="{{_contentId}}"
+                    aria-labelledby="{{_id}}"
+                    tabindex="{{_contentTabIndex}}">
+                    <slot name="{{this._slotName}}"></slot>
+                </div>
+            {{else}}
+                <div
+                    class="udex-tab-navigation__content-item"
+                    id="{{_contentId}}">
+                    <slot name="{{this._slotName}}"></slot>
+                </div>
+            {{/if}}
         {{/each}}
     </div>
 </div>