@sapudex/web-components 0.127.6 → 0.138.0

package/src/Search.ts

@@ -16,7 +16,9 @@ import {
   isUp,
   isDown,
   isEscape,
+  isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import List from "./List.js";
 import ListItemBase from "./ListItemBase.js";
 import "@ui5/webcomponents/dist/Icon.js";
@@ -97,7 +99,7 @@ export enum Mode {
  * For the <code>udex-search</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Search.js";</code>
+ * <code>import "@udex/web-components/dist/Search.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -481,6 +483,21 @@ class UDExSearch extends UI5Element {
   @property({ type: Boolean, noAttribute: true })
     _prefixDropdownExpanded!: boolean;
 
+  /**
+   * Defines the active (focus)
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    active!: boolean;
+  /**
+   * Defines is it the touch of the input field (only for mobile devices).
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _isTouched!: boolean;
+
   constructor() {
     super();
     this._handleResizeBound = this._handleResize.bind(this);
@@ -742,6 +759,9 @@ class UDExSearch extends UI5Element {
   }
 
   handleInputClick(): void {
+    if (!isDesktop()) {
+      this._isTouched = true;
+    }
     if (this.showPopoverWhenClickedIntoInput) {
       this.onOpenPopover();
     }
@@ -759,7 +779,7 @@ class UDExSearch extends UI5Element {
 
   handleAriaExpanded() {
     const value = this.open.toString();
-    this.shadowRoot?.querySelector("[udex-id='search-input']")?.setAttribute("aria-expanded", value);
+    this.getSearchInput()?.setAttribute("aria-expanded", value);
   }
 
   onOpenPopover(): void {
@@ -882,6 +902,7 @@ class UDExSearch extends UI5Element {
   }
 
   handleBlur(): void {
+    this._isTouched = false;
     if (this.value) {
       this.labelActiveClass = this._labelActiveClassName;
     } else {
@@ -977,6 +998,7 @@ class UDExSearch extends UI5Element {
   }
 
   handleFocus(): void {
+    this.active = true;
     this.isFocusedOnTextfield = true;
     this.focusClasses = this._focusActiveClassName;
     this.labelActiveClass = (this.value || !this.labelAnimationDisabled) ? this._labelActiveClassName : "";
@@ -984,24 +1006,39 @@ class UDExSearch extends UI5Element {
   }
 
   handleFocusout(): void {
+    this.active = false;
     this.isFocusedOnTextfield = false;
     this.focusClasses = "";
   }
 
   onReset(e: MouseEvent): void {
     e.stopPropagation();
+    this.handleReset();
+  }
+
+  handleReset(): void {
     this.value = "";
     this.showResetButton = false;
     this.onClosePopover();
-    this.handleBlur();
     this.fireEvent("handle-value-reset");
     this.Suggestion?.resetFocusState();
+    this.focus();
   }
 
   handleKeyDownReset(e: KeyboardEvent) {
     if (isTabPrevious(e) && this.open) {
       this.Suggestion?.handlePrevTabReset(e);
     }
+    if (isEnter(e) || isSpace(e)) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.handleReset();
+      this.getSearchInput()?.focus();
+    }
+  }
+
+  private getSearchInput(): HTMLInputElement {
+    return this.shadowRoot?.querySelector("[id='search-input']") as HTMLInputElement;
   }
 
   onVoice(e: MouseEvent): void {
@@ -1025,7 +1062,7 @@ class UDExSearch extends UI5Element {
   onSpeechStart(): void {
     this.speechRecognition.onstart = () => {
       this.voiceActiveClass = this._voiceActiveClassName;
-      (this.shadowRoot?.querySelector("[id='search-input']") as HTMLInputElement)?.focus();
+      this.getSearchInput()?.focus();
     };
   }
 

package/src/SecondaryNavigation.hbs

@@ -5,13 +5,15 @@
         </div>
     {{/if}}
     <div class="udex-secondary-navigation__holder">
-        <div class="udex-secondary-navigation__heading">
-            {{#if titleHref.length}}
-                <a class="udex-secondary-navigation__title" href="{{titleHref}}">{{title}}</a>
-            {{else}}
-                <span class="udex-secondary-navigation__title">{{title}}</span>
-            {{/if}}
-        </div>
+        {{#if title.length}}
+            <div class="udex-secondary-navigation__heading">
+                {{#if titleHref.length}}
+                    <a class="udex-secondary-navigation__title" href="{{titleHref}}">{{title}}</a>
+                {{else}}
+                    <span class="udex-secondary-navigation__title">{{title}}</span>
+                {{/if}}
+            </div>
+        {{/if}}
         <div class="udex-secondary-navigation__wrap">
             <ul
                 role="menubar"

package/src/SecondaryNavigation.ts

@@ -193,7 +193,7 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   reflowItems(): void {
-    const availableWidth = this.rootHolder.offsetWidth - this.heading?.offsetWidth - (this.optionalButtons?.offsetWidth || 0);
+    const availableWidth = this.rootHolder.offsetWidth - (this.heading?.offsetWidth || 0) - (this.optionalButtons?.offsetWidth || 0);
     const moreButtonWidth = this.getMoreButtonWidth();
     const itemsGap = 20;
     const widths = this.parsedItems.map(item => this.getItemWidth(item));
@@ -359,18 +359,20 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   handleOutsideClick(): void {
-    document.addEventListener("click", (e: MouseEvent) => {
-      if (this.isMobileScreen && e.target !== this) {
-        this.closeMobileDropdown();
-        return;
-      }
-
-      if (this.isDesktopScreen) {
-        this.handleDesktopDropdown(e);
-      }
-    });
+    document.addEventListener("mousedown", this.outsideClickListener);
   }
 
+  outsideClickListener = (e: MouseEvent): void => {
+    if (this.isMobileScreen && e.target !== this) {
+      this.closeMobileDropdown();
+      return;
+    }
+
+    if (this.isDesktopScreen) {
+      this.handleDesktopDropdown(e);
+    }
+  };
+
   closeMobileDropdown(): void {
     this.mobileNav?.closeDropdown();
   }

package/src/SecondaryNavigationItem.ts

@@ -338,7 +338,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   get subActiveItemTitle(): string | undefined {
     if (this.subActiveItem) {
       const { title, mobileLinkTitle } = this.subActiveItem;
-      return this._isMobileView ? mobileLinkTitle : title;
+      return this._isMobileView ? (mobileLinkTitle || title) : title;
     }
   }
 

package/src/SecondaryNavigationItemBase.ts

@@ -142,7 +142,7 @@ class UDExSecondaryNavigationItemBase extends UI5Element {
   }
 
   get itemLabel(): string {
-    return this._isMobileView ? this.mobileLinkTitle : this.label;
+    return this._isMobileView ? (this.mobileLinkTitle || this.label) : this.label;
   }
 
   get isMobile(): boolean {

package/src/SelectBox.hbs

@@ -66,6 +66,7 @@
                 {{/if}}
                 {{#if showTrigger}}
                     <udex-control-button
+                        tabindex="{{triggerTabIndex}}"
                         class="udex-text-field__trigger"
                         role="combobox"
                         size="Large"
@@ -89,10 +90,11 @@
             </udex-status-message>
         {{/if}}
     </div>
-    <udex-dropdown
+    <ui5-popover
+        hide-arrow
         id="udex-select-box__dropdown"
         class="udex-select-box__dropdown"
-        ?disable-target-overlap="{{disableTargetOverlap}}"
+        ?allow-target-overlap="{{allowTargetOverlap}}"
         @keydown="{{handleKeyDownDropdown}}"
         @ui5-select-all="{{handleSelectAll}}"
         @ui5-item-press="{{handleItemPress}}"
@@ -100,11 +102,11 @@
         @ui5-submit-search-value="{{handleSubmitSearch}}"
         @ui5-handle-value-search="{{handleValueSearch}}"
         @ui5-handle-value-reset="{{handleResetSearch}}"
-        @before-open="{{handleDropdownBeforeOpen}}"
-        @after-close="{{handleDropdownAfterClose}}"
+        @ui5-before-open="{{handleDropdownBeforeOpen}}"
+        @ui5-after-close="{{handleDropdownAfterClose}}"
         @search-keydown="{{handleKeyDownSearch}}"
-        height="{{height}}"
-        horizontal-align="Left">
+        horizontal-align="Left"
+        placement-type="Bottom">
         {{#if _showTagsDropdownContent}}
             <div class="udex-truncatable-tag-content">
                 <span class="udex-truncatable-tag-content__label">{{truncatableTagLabel}}</span>
@@ -117,7 +119,7 @@
         {{else}}
             {{searchableList}}
         {{/if}}
-    </udex-dropdown>
+    </ui5-popover>
     {{#if displayonly}}
         <udex-tooltip
             placement="{{tooltipPlacement}}">

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._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 {