@sapudex/web-components 0.117.1 → 0.138.0

package/src/SecondaryNavigationItem.ts

@@ -4,6 +4,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import {
   isLeft,
   isRight,
@@ -61,6 +62,7 @@ export const menuItemRole: string = "menuitem";
 @event("nav-item-click", {
   detail: {
     item: { type: HTMLElement },
+    index: { type: Integer },
   },
 })
 
@@ -72,7 +74,8 @@ export const menuItemRole: string = "menuitem";
  */
 @event("sub-item-click", {
   detail: {
-    item: { type: Array },
+    item: { type: Object },
+    index: { type: Integer },
   },
 })
 
@@ -150,7 +153,10 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
       this.toggleDropdown();
     }
 
-    this.fireEvent("nav-item-click", { item: this });
+    this.fireEvent("nav-item-click", {
+      item: this,
+      index: this.index,
+    });
   }
 
   onSubItemClick(e: Event): void {
@@ -164,6 +170,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
 
     this.fireEvent("sub-item-click", {
       item: clickedItem,
+      index,
     });
   }
 
@@ -289,9 +296,9 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._processedItems = this._dropdownHistory.pop()!;
   }
 
-  setNestedItems({ title, items } : NavItem): void {
+  setNestedItems({ title, items, mobileLinkTitle } : NavItem): void {
     if (items) {
-      this._processedItems = [{ title, isBack: true }, ...items];
+      this._processedItems = [{ title, mobileLinkTitle, isBack: true }, ...items];
     }
   }
 
@@ -329,7 +336,10 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   }
 
   get subActiveItemTitle(): string | undefined {
-    return this.subActiveItem?.title;
+    if (this.subActiveItem) {
+      const { title, mobileLinkTitle } = this.subActiveItem;
+      return this._isMobileView ? (mobileLinkTitle || title) : title;
+    }
   }
 
   get subActiveItem(): NavItem | undefined {

package/src/SecondaryNavigationItemBase.ts

@@ -4,6 +4,8 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { breakpointSizeS } from "./SecondaryNavigation.js";
 
 export enum Target {
   _blank = "_blank",
@@ -14,7 +16,7 @@ export enum Target {
 
 export type NavItem = {
   path?: string;
-  mobileLinkTitle?: string;
+  mobileLinkTitle: string;
   target?: Target;
   title: string;
   active?: boolean;
@@ -39,6 +41,14 @@ export type NavItem = {
 })
 
 class UDExSecondaryNavigationItemBase extends UI5Element {
+  /**
+   * Defines an aria label for item
+   *
+   * @public
+   */
+  @property({ type: String })
+    mobileLinkTitle!: string;
+
   /**
    * Defines active state for the item
    *
@@ -60,8 +70,8 @@ class UDExSecondaryNavigationItemBase extends UI5Element {
    *
    * @public
    */
-  @property({ type: String })
-    target!: string;
+  @property({ type: Target, defaultValue: Target._self })
+    target!: Target;
 
   /**
    * Defines subTitle for the item
@@ -87,10 +97,30 @@ class UDExSecondaryNavigationItemBase extends UI5Element {
   @property({ validator: Integer })
     index!: number;
 
+  @property({ type: Boolean })
+    _isMobileView!: boolean;
+
+  _handleResizeBound: ResizeObserverCallback;
+
+  constructor() {
+    super();
+    this._isMobileView = this.isMobile;
+    this._handleResizeBound = this._handleResize.bind(this);
+  }
+
+  _handleResize(): void {
+    this._isMobileView = this.isMobile;
+  }
+
   onEnterDOM(): void {
     if (isDesktop()) {
       this.setAttribute("desktop", "");
     }
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
   }
 
   getActiveSubItem(data: Array<NavItem>): NavItem | undefined {
@@ -110,6 +140,14 @@ class UDExSecondaryNavigationItemBase extends UI5Element {
     findActiveItem(data);
     return activeItem;
   }
+
+  get itemLabel(): string {
+    return this._isMobileView ? (this.mobileLinkTitle || this.label) : this.label;
+  }
+
+  get isMobile(): boolean {
+    return window.innerWidth <= breakpointSizeS;
+  }
 }
 
 export default UDExSecondaryNavigationItemBase;

package/src/SecondaryNavigationSubItem.hbs

@@ -2,7 +2,7 @@
     <button
         @click="{{onBackItemClick}}"
         role="menuitem"
-        aria-label="{{backButtonLabel}}"
+        aria-label="{{backButtonAriaLabel}}"
         aria-haspopup="true"
         is-back
         class="udex-secondary-navigation__dropdown-item">
@@ -10,22 +10,25 @@
             class="udex-secondary-navigation__dropdown-icon udex-secondary-navigation__dropdown-icon_back"
             name="slim-arrow-left">
         </ui5-icon>
-        {{label}}
+        {{itemLabel}}
     </button>
 {{else}}
-    {{#if hasItems}}
+    {{#if isButton}}
         <button
             @click="{{onItemClick}}"
             role="menuitem"
-            aria-haspopup="true"
+            aria-haspopup="{{hasItems}}"
             ?sub-active="{{isSubItemActive}}"
             aria-label="{{label}}"
+            ?active="{{isActive}}"
             class="udex-secondary-navigation__dropdown-item">
-            {{label}}
-            <ui5-icon
-                class="udex-secondary-navigation__dropdown-icon"
-                name="slim-arrow-right">
-            </ui5-icon>
+            {{itemLabel}}
+            {{#if hasItems}}
+                <ui5-icon
+                    class="udex-secondary-navigation__dropdown-icon"
+                    name="slim-arrow-right">
+                </ui5-icon>
+            {{/if}}
         </button>
     {{else}}
         <a
@@ -35,7 +38,7 @@
             target="{{target}}"
             ?active="{{isActive}}"
             class="udex-secondary-navigation__dropdown-item">
-            {{label}}
+            {{itemLabel}}
         </a>
     {{/if}}
 {{/if}}

package/src/SecondaryNavigationSubItem.ts

@@ -108,13 +108,17 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
     return !!this.nestedItems.length;
   }
 
+  get isButton(): boolean {
+    return this.hasItems || !this.path;
+  }
+
   get isSubItemActive(): boolean {
     return !!this.getActiveSubItem(this.nestedItems)?.active;
   }
 
-  get backButtonLabel(): string {
+  get backButtonAriaLabel(): string {
     const label = UDExSecondaryNavigationSubItem.i18nBundle.getText(BACK_BUTTON_LABEL) as string;
-    return `${label} ${this.label}`;
+    return `${label} ${this.itemLabel}`;
   }
 }
 

package/src/SelectBox.hbs

@@ -1,85 +1,86 @@
 <div class="udex-select-box__root">
     <div class="udex-text-field__container">
-        <div
-            @click="{{getHandleSingleSelectOpen}}"
-            class="udex-text-field__input"
-            @ui5-iconClick="{{handleRemoveTag}}"
-            @keydown="{{handleKeyDownTrigger}}"
-            ?open="{{_open}}"
-            tabindex="{{effectiveTabIndex}}"
-            @focusin="{{handleFocusIn}}"
-            @focusout="{{handleFocusOut}}"
-            ?disabled="{{disabled}}"
-            ?displayonly="{{displayonly}}"
-            ?readonly="{{readonly}}"
-            role="combobox"
-            aria-label="{{accInfo.ariaLabel}}"
-            aria-labelledby="{{accInfo.ariaLabelledBy}}"
-            aria-readonly="{{isReadOrDisplayOnly}}"
-            aria-disabled="{{disabled}}"
-            aria-haspopup="listbox"
-            aria-controls="udex-select-box__dropdown"
-            aria-expanded="{{tokenizerExpanded}}"
-            aria-activedescendant>
-            {{#if label}}
-                <span class="{{labelClass}}">
+        <div class="udex-text-field__wrap">
+            <div
+                @click="{{getHandleSingleSelectOpen}}"
+                class="udex-text-field__input"
+                @ui5-iconClick="{{handleRemoveTag}}"
+                @keydown="{{handleKeyDownTrigger}}"
+                ?open="{{_open}}"
+                tabindex="{{effectiveTabIndex}}"
+                @focusin="{{handleFocusIn}}"
+                @focusout="{{handleFocusOut}}"
+                ?disabled="{{disabled}}"
+                ?displayonly="{{displayonly}}"
+                ?readonly="{{readonly}}"
+                role="combobox"
+                aria-label="{{accInfo.ariaLabel}}"
+                aria-labelledby="{{accInfo.ariaLabelledBy}}"
+                aria-readonly="{{isReadOrDisplayOnly}}"
+                aria-disabled="{{disabled}}"
+                aria-haspopup="listbox"
+                aria-controls="udex-select-box__dropdown"
+                aria-expanded="{{tokenizerExpanded}}"
+                aria-activedescendant>
+                {{#if label}}
+                    <span class="{{labelClass}}">
                     {{label}}
-                    {{#if required}}
-                        *
-                    {{/if}}
+                        {{#if required}}
+                            *
+                        {{/if}}
                 </span>
-            {{/if}}
-            {{#if showSingleSelectedOption}}
-                <div class="udex-text-field__text-holder">
+                {{/if}}
+                {{#if showSingleSelectedOption}}
+                    <div class="udex-text-field__text-holder">
                     <span class="udex-text-field__single-label">
                         {{{_singleSelectedOption}}}
                     </span>
-                </div>
-            {{/if}}
-            {{#if showMultiSelectedOptions}}
-                <ui5-tokenizer
-                    part="tokenizer"
-                    show-more
-                    @ui5-selectionChange="{{handleTagPress}}"
-                    @keydown="{{handleKeydownTokenizer}}"
-                    prevent-popover-open
-                    class="{{tokenizerClass}}"
-                    ?disabled="{{disabled}}"
-                    @ui5-show-more-items-press="{{getHandlerShowMoreItems}}"
-                    ?expanded="{{tokenizerExpanded}}">
-                    {{#each selectedItems}}
-                        {{#unless this.isGroup}}
-                            <udex-tag
-                                accessible-role="option"
-                                class="udex-text-field__token"
-                                @keydown="{{../handleKeyDownTag}}"
-                                ?read-only="{{../isReadOrDisplayOnly}}"
-                                data-id="{{this._id}}"
-                                part="token-{{@index}}"
-                                text="{{this.label}}"
-                                icon="decline">
-                            </udex-tag>
-                        {{/unless}}
-                    {{/each}}
-                </ui5-tokenizer>
-            {{/if}}
-            {{#if showTrigger}}
-                <div
-                    class="udex-text-field__trigger"
-                    role="combobox"
-                    aria-label="{{iconAccessibleNameText}}"
-                    aria-haspopup="listbox"
-                    aria-expanded="{{_open}}"
-                    aria-controls="{{accInfo.ariaControls}}"
-                    @click="{{getHandleMultiSelectOpen}}"
-                    aria-activedescendant>
-                    <ui5-icon
-                        class="udex-text-field__icon"
-                        name="navigation-down-arrow"
-                        accessible-name="{{iconAccessibleNameText}}">
-                    </ui5-icon>
-                </div>
-            {{/if}}
+                    </div>
+                {{/if}}
+                {{#if showMultiSelectedOptions}}
+                    <ui5-tokenizer
+                            part="tokenizer"
+                            show-more
+                            @ui5-selectionChange="{{handleTagPress}}"
+                            @keydown="{{handleKeydownTokenizer}}"
+                            prevent-popover-open
+                            class="{{tokenizerClass}}"
+                            ?disabled="{{disabled}}"
+                            @ui5-show-more-items-press="{{getHandlerShowMoreItems}}"
+                            ?expanded="{{tokenizerExpanded}}">
+                        {{#each selectedItems}}
+                            {{#unless this.isGroup}}
+                                <udex-tag
+                                        accessible-role="option"
+                                        class="udex-text-field__token"
+                                        @keydown="{{../handleKeyDownTag}}"
+                                        ?read-only="{{../isReadOrDisplayOnly}}"
+                                        data-id="{{this._id}}"
+                                        part="token-{{@index}}"
+                                        text="{{this.label}}"
+                                        icon="decline">
+                                </udex-tag>
+                            {{/unless}}
+                        {{/each}}
+                    </ui5-tokenizer>
+                {{/if}}
+                {{#if showTrigger}}
+                    <udex-control-button
+                        tabindex="{{triggerTabIndex}}"
+                        class="udex-text-field__trigger"
+                        role="combobox"
+                        size="Large"
+                        icon="navigation-down-arrow"
+                        accessible-name="{{iconAccessibleNameText}}"
+                        aria-label="{{iconAccessibleNameText}}"
+                        aria-haspopup="listbox"
+                        aria-expanded="{{_open}}"
+                        aria-controls="{{accInfo.ariaControls}}"
+                        @click="{{getHandleMultiSelectOpen}}"
+                        aria-activedescendant>
+                    </udex-control-button>
+                {{/if}}
+            </div>
         </div>
         {{#if supportingText}}
             <udex-status-message
@@ -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,12 +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}}"
-        accessible-role="Dialog"
-        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>
@@ -118,7 +119,7 @@
         {{else}}
             {{searchableList}}
         {{/if}}
-    </udex-dropdown>
+    </ui5-popover>
     {{#if displayonly}}
         <udex-tooltip
             placement="{{tooltipPlacement}}">