@sapudex/web-components 0.117.1 → 0.127.6

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;
+    }
   }
 
   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;
+  }
+
+  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,85 @@
 <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
+                        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
@@ -104,7 +104,6 @@
         @after-close="{{handleDropdownAfterClose}}"
         @search-keydown="{{handleKeyDownSearch}}"
         height="{{height}}"
-        accessible-role="Dialog"
         horizontal-align="Left">
         {{#if _showTagsDropdownContent}}
             <div class="udex-truncatable-tag-content">

package/src/SelectBox.ts

@@ -44,6 +44,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
@@ -84,6 +85,7 @@ import UDExStatusMessage from "./StatusMessage.js";
     Token,
     Icon,
     UDExStatusMessage,
+    UDExControlButton,
   ],
 })
 

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

@@ -131,6 +131,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;
@@ -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/TabInOverflow.hbs

@@ -3,7 +3,7 @@
         id="{{this._id}}"
         class="udex-tab-overflow__button"
         role="tab"
-    >
+        tabindex="{{_tabIndex}}">
         {{#if hasIcon}}
             <span class="udex-tab-overflow__button-icon">
                 <ui5-icon
@@ -21,11 +21,12 @@
     </button>
 {{else}}
     <a
+        id="{{this._id}}"
         href="{{href}}"
         target="{{this.target}}"
         class="udex-tab-overflow__button"
         role="tab"
-    >
+        tabindex="{{_tabIndex}}">
         {{#if hasIcon}}
             <span class="udex-tab-overflow__button-icon">
                 <ui5-icon

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,26 +19,29 @@
             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">
+            <div
+                class="udex-tab-navigation__content-item"
+                id="{{_contentId}}"
+                aria-labelledby="{{_id}}"
+                tabindex="{{_contentTabIndex}}">
                 <slot name="{{this._slotName}}"></slot>
             </div>
         {{/each}}