@sapudex/web-components 0.127.6 → 0.143.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";
@@ -76,7 +77,6 @@ import UDExControlButton from "./ControlButton.js";
     UDExListSelectAll,
     UDExSelectBoxItem,
     UDExList,
-    UDExDropdown,
     UDExTooltip,
     UDExSearch,
     UDExButton,
@@ -86,6 +86,7 @@ import UDExControlButton from "./ControlButton.js";
     Icon,
     UDExStatusMessage,
     UDExControlButton,
+    ResponsivePopover,
   ],
 })
 
@@ -222,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;
 
@@ -246,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();
     }
   }
 
@@ -274,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) {
@@ -324,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() {
@@ -366,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() {
@@ -383,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);
@@ -399,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)) {
@@ -435,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);
     }
   }
 
@@ -473,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();
     }
   }
 
@@ -498,7 +550,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleOpenMultiSelect() {
-    if (this._dropdown.open) {
+    if (this._popover.open) {
       this.closeDropdown();
     } else {
       this._showTagsDropdownContent = false;
@@ -507,7 +559,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleOpenSingleSelect() {
-    if (this._dropdown.open) {
+    if (this._popover.open) {
       this.closeDropdown();
     } else {
       this.openDropdown();
@@ -526,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)
@@ -538,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.isDisabled) ? this._activeTabIndex : this._inactiveTabIndex; });
+  }
+
+  get allowTargetOverlap(): boolean {
+    return !this.disableTargetOverlap;
+  }
+
   get isDisabled(): boolean {
     return this.readonly || this.displayonly || this.disabled;
   }
@@ -558,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;
@@ -594,6 +666,11 @@ class UDExSelectBox extends UDExSearchableListBase {
     if (this._showTagsDropdownContent && this._truncatableTag) {
       return false;
     }
+
+    if (this._tokenizer) {
+      return this._tokenizer.expanded;
+    }
+
     return this._open;
   }
 
@@ -607,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

@@ -94,7 +94,7 @@ class UDExStatusBadge extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExStatusBadge.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExStatusBadge.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   get iconFieldName(): string {

package/src/StepInput.ts

@@ -263,7 +263,7 @@ class UDExStepInput extends UI5Element {
   _keyDownHandlerBound: (e: KeyboardEvent) => void;
 
   static async onDefine() {
-    UDExStepInput.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    UDExStepInput.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   constructor() {

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.
  *

package/src/Tab.ts

@@ -67,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
@@ -215,7 +215,7 @@ class UDExTab extends UI5Element implements ITab {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExTab.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExTab.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   get isOnSelectedTab(): boolean {

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,7 +19,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}}
     </button>
 {{else}}
@@ -26,9 +32,12 @@
         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>
@@ -39,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

@@ -37,13 +37,21 @@
         id="udex-{{__id}}-content"
         part="tab-navigation-content">
         {{#each items}}
-            <div
-                class="udex-tab-navigation__content-item"
-                id="{{_contentId}}"
-                aria-labelledby="{{_id}}"
-                tabindex="{{_contentTabIndex}}">
-                <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>

package/src/TabNavigation.ts

@@ -59,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
@@ -169,7 +169,7 @@ class UDExTabNavigation extends UI5Element {
   }
 
   static async onDefine(): Promise<void> {
-    UDExTabNavigation.i18nBundle = await getI18nBundle("udex-tab-navigation");
+    UDExTabNavigation.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onEnterDOM(): void {

package/src/Table.ts

@@ -175,7 +175,7 @@ class UDExTable extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExTable.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExTable.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onAfterRendering() {

package/src/Tag.hbs

@@ -2,30 +2,46 @@
     <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}}">
+                    class="udex-tag__btn-icon"
+                    @click="{{iconClickHandler}}"
+                    role="{{accessibleRole}}"
+                    aria-label="{{iconAccessibleName}}">
                 <ui5-icon
-                    class="udex-tag__icon udex-tag__icon--start"
-                    name="{{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}}">
+                    class="udex-tag__btn-icon"
+                    @click="{{iconClickHandler}}"
+                    role="{{accessibleRole}}"
+                    aria-label="{{iconAccessibleName}}">
                 <ui5-icon
-                    class="udex-tag__icon udex-tag__icon--end"
-                    name="{{icon}}">
+                        class="udex-tag__icon udex-tag__icon--end"
+                        name="{{icon}}">
                 </ui5-icon>
             </button>
         {{/if}}