@sapudex/web-components 0.111.0 → 0.117.1

package/src/InputGroup.ts

@@ -0,0 +1,137 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import UDExCheckbox from "./Checkbox.js";
+import UDExRadioButton from "./RadioButton.js";
+import UDExStatusMessage from "./StatusMessage.js";
+import InputGroupTemplate from "./generated/templates/InputGroupTemplate.lit.js";
+import {
+  VALUE_STATE_ERROR,
+  VALUE_STATE_SUCCESS,
+} from "./generated/i18n/i18n-defaults.js";
+
+// Styles
+import InputGroupCss from "./generated/themes/InputGroup.css.js";
+
+export enum GroupValueState {
+  Standard = "Standard",
+  Error = "Error",
+  Success = "Success",
+}
+
+export enum Orientation {
+  Vertical = "Vertical",
+  Horizontal = "Horizontal",
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-input-group</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/InputGroup.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+
+@customElement({
+  tag: "udex-input-group",
+  renderer: litRender,
+  styles: InputGroupCss,
+  template: InputGroupTemplate,
+  dependencies: [Icon, UDExStatusMessage],
+})
+
+class UDExInputGroup extends UI5Element {
+  /**
+   * Defines the group name of the component.
+   *
+   * @public
+   */
+  @property({ type: String })
+    groupName?: string;
+
+  /**
+   * Defines the orientation of the component.
+   *
+   * @default "Vertical"
+   * @public
+   */
+  @property({ type: Orientation, defaultValue: Orientation.Vertical })
+    orientation!: `${Orientation}`;
+
+  /**
+   * Defines the value state of the component.
+   *
+   * @default "Standard"
+   * @public
+   */
+  @property({ type: GroupValueState, defaultValue: GroupValueState.Standard })
+    valueState!: `${GroupValueState}`;
+
+  /**
+   * Defines supporting text under the Input Group.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    supportingText!: string;
+
+  /**
+   * Slot for input elements items.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true, individualSlots: true })
+    items!: Array<UDExCheckbox | UDExRadioButton>;
+
+  static i18nBundle: I18nBundle;
+
+  static async onDefine() {
+    UDExInputGroup.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+  }
+
+  get _items() {
+    return this.items.map(el => {
+      if (this.groupName) { el.name = this.groupName; }
+      return {
+        item: el,
+      };
+    });
+  }
+
+  get valueStateTypeMappings(): Record<string, string> {
+    return {
+      "Success": UDExInputGroup.i18nBundle.getText(VALUE_STATE_SUCCESS),
+      "Error": UDExInputGroup.i18nBundle.getText(VALUE_STATE_ERROR),
+    };
+  }
+
+  get hasValueState(): boolean {
+    return this.valueState !== GroupValueState.Standard;
+  }
+
+  get valueStateText(): string | undefined {
+    return this.supportingText || this.valueStateTypeMappings[this.valueState];
+  }
+}
+
+UDExInputGroup.define();
+
+export default UDExInputGroup;

package/src/List.ts

@@ -9,6 +9,8 @@ import {
   isDown,
   isHome,
   isEnd,
+  isEnter,
+  isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -154,25 +156,7 @@ class UDExList extends UI5Element {
 
   handleItemPress(e: CustomEvent) {
     const clickedItem: UDExListItemBase = e.detail.item;
-
-    if (this.modeSingleSelect && !this.controlled) {
-      this.revertSelectedItems(this.getSelectedItems());
-      clickedItem.selected = true;
-    }
-
-    if (this.modeRadioGroup && !this.controlled) {
-      const groupHeader = clickedItem.parentElement as UDExListGroupHeaderBase;
-      const groupItems = groupHeader.getItems() as Array<UDExListItemBase>;
-      this.revertSelectedItems(groupItems);
-
-      clickedItem.selected = true;
-    }
-
-    this.fireEvent("selection-change", {
-      listItems: this.getItemsFromList(),
-      selectedItems: this.getSelectedItems(),
-      item: clickedItem,
-    });
+    this.onItemPress(clickedItem);
   }
 
   handleKeyDown(e: KeyboardEvent) {
@@ -180,6 +164,15 @@ class UDExList extends UI5Element {
     this.handleDownArrow(e);
     this.handleHomeKey(e);
     this.handleEndKey(e);
+    this.handleEnterOrSpace(e);
+  }
+
+  handleEnterOrSpace(e: KeyboardEvent) {
+    if (isEnter(e) || isSpace(e)) {
+      e.preventDefault();
+      const clickedItem = e.target as UDExListItemBase;
+      this.onItemPress(clickedItem);
+    }
   }
 
   handleUpArrow(e: KeyboardEvent) {
@@ -193,20 +186,28 @@ class UDExList extends UI5Element {
       const nonInteractiveHeader = items[previousSelectIndex].nonInteractive;
 
       if (nonInteractiveHeader && previousSelectIndex === 0) {
+        this.unsetTabIndexByIndex(items, currentSelectedIndex);
+        this.setTabIndexByIndex(items, lastItemIndex);
         items[lastItemIndex].focus();
         return;
       }
 
       if (nonInteractiveHeader) {
+        this.unsetTabIndexByIndex(items, currentSelectedIndex);
+        this.setTabIndexByIndex(items, previousSelectIndex - 1);
         items[previousSelectIndex - 1].focus();
         return;
       }
 
       if (isHeaderItem) {
+        this.unsetTabIndexByIndex(items, currentSelectedIndex);
+        this.setTabIndexByIndex(items, previousSelectIndex);
         this.focusHeader(items[previousSelectIndex]);
         return;
       }
 
+      this.unsetTabIndexByIndex(items, currentSelectedIndex);
+      this.setTabIndexByIndex(items, previousSelectIndex);
       items[previousSelectIndex].focus();
     }
   }
@@ -221,15 +222,21 @@ class UDExList extends UI5Element {
       const nonInteractiveHeader = items[nextSelectIndex].nonInteractive;
 
       if (nonInteractiveHeader) {
+        this.unsetTabIndexByIndex(items, currentSelectedIndex);
+        this.setTabIndexByIndex(items, nextSelectIndex + 1);
         items[nextSelectIndex + 1].focus();
         return;
       }
 
       if (isHeaderItem) {
+        this.unsetTabIndexByIndex(items, currentSelectedIndex);
+        this.setTabIndexByIndex(items, nextSelectIndex);
         this.focusHeader(items[nextSelectIndex]);
         return;
       }
 
+      this.unsetTabIndexByIndex(items, currentSelectedIndex);
+      this.setTabIndexByIndex(items, nextSelectIndex);
       items[nextSelectIndex].focus();
     }
   }
@@ -238,20 +245,27 @@ class UDExList extends UI5Element {
     if (isHome(e)) {
       e.preventDefault();
       const items = this.getKeyboardNavigationItems();
+      const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);
       const firstItem = items[0];
       const isHeaderItem = firstItem.isGroup;
       const nonInteractiveItem = firstItem.nonInteractive;
 
       if (nonInteractiveItem) {
+        this.unsetTabIndexByIndex(items, currentSelectedIndex);
+        this.setTabIndexByIndex(items, 1);
         items[1].focus();
         return;
       }
 
       if (isHeaderItem) {
+        this.unsetTabIndexByIndex(items, currentSelectedIndex);
+        this.setTabIndexByIndex(items, 0);
         this.focusHeader(items[0]);
         return;
       }
 
+      this.unsetTabIndexByIndex(items, currentSelectedIndex);
+      this.setTabIndexByIndex(items, 0);
       items[0].focus();
     }
   }
@@ -260,10 +274,37 @@ class UDExList extends UI5Element {
     if (isEnd(e)) {
       e.preventDefault();
       const items = this.getKeyboardNavigationItems();
+      const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);
+
+      this.unsetTabIndexByIndex(items, currentSelectedIndex);
+      this.setTabIndexByIndex(items, items.length - 1);
       items[items.length - 1].focus();
     }
   }
 
+  onItemPress(clickedItem :UDExListItemBase) {
+    if (this.modeSingleSelect && !this.controlled) {
+      this.revertSelectedItems(this.getSelectedItems());
+      clickedItem.selected = true;
+    }
+
+    if (this.modeRadioGroup && !this.controlled) {
+      const groupHeader = clickedItem.parentElement as UDExListGroupHeaderBase;
+      const groupItems = groupHeader.getItems() as Array<UDExListItemBase>;
+      this.revertSelectedItems(groupItems);
+      clickedItem.selected = true;
+    }
+
+    this.resetTabIndexes();
+    clickedItem._tabIndex = "0";
+
+    this.fireEvent("selection-change", {
+      listItems: this.getItemsFromList(),
+      selectedItems: this.getSelectedItems(),
+      item: clickedItem,
+    });
+  }
+
   revertSelectedItems(items: Array<UDExListItemBase>) {
     items.forEach((item: UDExListItemBase) => {
       if (!item.disabled) {
@@ -277,6 +318,14 @@ class UDExList extends UI5Element {
     header.focus();
   }
 
+  unsetTabIndexByIndex(items: UDExListItemBase[], index: number) {
+    items[index]._tabIndex = "-1";
+  }
+
+  setTabIndexByIndex(items: UDExListItemBase[], index: number) {
+    items[index]._tabIndex = "0";
+  }
+
   getItems(): Array<UDExListItemBase> {
     return this.getSlottedNodes<UDExListItemBase>("items");
   }
@@ -311,15 +360,37 @@ class UDExList extends UI5Element {
   }
 
   prepareListItemsMode() {
-    const slottedItems = this.getItemsFromList();
-    slottedItems.forEach(item => {
+    this.getItemsFromList().forEach((item, index) => {
       item.mode = this.mode;
       item.controlled = this.controlled;
       item.type = this.type;
       item._icon = this.itemIcon;
+      item._tabIndex = this.getTabIndex(index, item);
     });
   }
 
+  getTabIndex(index: number, item: UDExListItemBase): string {
+    if ((item.modeSingleSelect || this.modeRadioGroup) && this.isGroupList && index === 1) {
+      return "0";
+    }
+
+    if (this.modeSelected && index === 0) {
+      return "0";
+    }
+
+    return "-1";
+  }
+
+  resetTabIndexes() {
+    this.getItemsFromList().forEach(item => {
+      item._tabIndex = "-1";
+    });
+  }
+
+  get isGroupList(): boolean {
+    return this.getItemsFromList().some(item => item.isGroup);
+  }
+
   get ariaLabelModeText(): string {
     if (this.modeSingleSelect || this.modeRadioGroup) {
       return UDExList.i18nBundle.getText(ARIA_LABEL_LIST_SELECTABLE);

package/src/ListGroupHeader.hbs

@@ -1,6 +1,8 @@
 <li
     part="item"
-    class="udex-list__group">
+    class="udex-list__group"
+    role="group"
+    aria-labelledby="group-heading">
     <ul
         class="udex-list__group-list"
         @ui5-item-press="{{getHandleGroupItemsClick}}">
@@ -15,7 +17,7 @@
 
 {{#*inline "multi-or-radio-group-header"}}
     {{#if isNonActiveHeader}}
-        <header class="udex-list__inactive-header" role="presentation">
+        <header id="group-heading" class="udex-list__inactive-header">
             <span class="udex-list__header-title">{{label}}</span>
             {{#if supportingText}}
                 <span class="udex-list__supporting-text ">{{supportingText}}</span>
@@ -23,11 +25,13 @@
         </header>
     {{else}}
         <udex-list-item
+            id="group-heading"
             _additional-class-name="{{_additionalClassName}}"
             ?selected="{{selected}}"
+            _tab-index="{{_effectiveTabIndex}}"
             ?indeterminate="{{indeterminate}}"
             part="group-item"
-            role="listitem"
+            role="none"
             class="{{className}}"
             mode="{{mode}}"
             ?controlled="{{controlled}}"
@@ -55,8 +59,8 @@
                 part="icon">
             </ui5-icon>
         {{/if}}
-        <div class="udex-list__header" role="presentation">
-            <span class="udex-list__header-title">{{label}}</span>
+        <div class="udex-list__header">
+            <span id="group-heading" class="udex-list__header-title">{{label}}</span>
             {{#if supportingText}}
                 <span class="udex-list__supporting-text {{sizeClass}}">{{supportingText}}</span>
             {{/if}}

package/src/ListItem.hbs

@@ -2,7 +2,7 @@
     <li
         part="item"
         role="{{roleItem}}"
-        tabindex="{{_tabIndex}}"
+        tabindex="{{_effectiveTabIndex}}"
         aria-disabled="{{_ariaDisabled}}"
         aria-labelledby="{{_accessibleNameRef}}"
         class="{{className}}"
@@ -14,6 +14,7 @@
         @focusin="{{handleFocusIn}}"
         @focusout="{{handleFocusOut}}"
         aria-selected="{{selected}}"
+        aria-current="{{selected}}"
         ?divider="{{divider}}"
         _id="{{this._id}}">
         {{#if modeMultiSelect}}

package/src/ListItem.ts

@@ -371,13 +371,6 @@ class UDExListItem extends UDExListItemBase {
     return this.disabled ? true : undefined;
   }
 
-  get _tabIndex() {
-    if (this.disabled) {
-      return -1;
-    }
-    return 0;
-  }
-
   get modeSingleContent() {
     return this.mode === ListMode.SingleContent;
   }

package/src/ListItemBase.ts

@@ -111,6 +111,16 @@ class UDExListItemBase extends UI5Element {
   @property({ type: String, defaultValue: "" })
     _icon?: string;
 
+  @property({ type: String })
+    _tabIndex!: number | string;
+
+  get _effectiveTabIndex() {
+    if (this.disabled) {
+      return -1;
+    }
+    return this._tabIndex;
+  }
+
   get numberOfItem() {
     return [...this.parentNode!.children].indexOf(this) + 1;
   }
@@ -127,6 +137,10 @@ class UDExListItemBase extends UI5Element {
     return this.mode === ListMode.MultiSelect;
   }
 
+  get modeSingleSelect() {
+    return this.mode === ListMode.SingleSelect;
+  }
+
   get modeMultiSelectOrRadioGroup() {
     return this.modeMultiSelect || this.modeRadioGroup;
   }

package/src/ListSelectAll.hbs

@@ -6,6 +6,7 @@
           class="{{groupListClassName}}"
           @ui5-item-press="{{handleSelectAllGroupItemsPress}}">
           <udex-list-item
+              _tab-index="{{_effectiveTabIndex}}"
               role="list"
               _additional-class-name="{{additionalClassName}}"
               class="{{className}}"

package/src/MastheadMobileMenu.hbs

@@ -1,8 +1,10 @@
 <nav class="udex-masthead-mobile-menu" @keydown="{{handleKeyDown}}">
     <div class="udex-masthead-mobile-menu__nav-holder">
-        <div class="udex-masthead-mobile-menu__list-search">
-            <slot name="search"></slot>
-        </div>
+        {{#if hasSearchSlot}}
+            <div class="udex-masthead-mobile-menu__list-search">
+                <slot name="search"></slot>
+            </div>
+        {{/if}}
         <ul class="udex-masthead-mobile-menu__list" role="menu">
             {{#if showNavigation}}
                 {{>nav-items}}
@@ -33,15 +35,6 @@
                         back-to-categories>
                     </udex-masthead-menu-item>
                 </li>
-                {{#if _category.url}}
-                    <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
-                        <udex-masthead-menu-item
-                            url="{{this._category.url}}"
-                            label="{{categoryLinkText}}"
-                            has-border>
-                        </udex-masthead-menu-item>
-                    </li>
-                {{/if}}
                 {{>category-items}}
             {{/if}}
         </ul>
@@ -64,13 +57,7 @@
 {{#*inline "nav-items"}}
     {{#each items}}
         <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
-            {{#if this.href}}
-                <udex-masthead-menu-item
-                    url="{{this.href}}"
-                    label="{{this.innerText}}"
-                    has-border>
-                </udex-masthead-menu-item>
-            {{else}}
+            {{#if this.subItems}}
                 <udex-masthead-menu-item
                     @click="{{../handleMenuItemClick}}"
                     label="{{this.innerText}}"
@@ -80,29 +67,65 @@
                     icon-end
                     first-level>
                 </udex-masthead-menu-item>
+            {{else}}
+                <udex-masthead-menu-item
+                    url="{{this.href}}"
+                    label="{{this.innerText}}"
+                    has-border>
+                </udex-masthead-menu-item>
             {{/if}}
         </li>
     {{/each}}
 {{/inline}}
 
 {{#*inline "categories"}}
-    {{#each _categories}}
+    {{#if _clickedItem.href}}
         <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
             <udex-masthead-menu-item
-                @click="{{../handleMenuCategoryClick}}"
-                url="{{this.url}}"
-                id="{{@index}}"
-                label="{{this.category}}"
-                type="Button"
-                second-level
-                has-border
-                icon-end>
+                url="{{_clickedItem.href}}"
+                label="{{overviewLinkText}}"
+                has-border>
             </udex-masthead-menu-item>
         </li>
+    {{/if}}
+    {{#each _categories}}
+        {{#if this.category}}
+            <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+                <udex-masthead-menu-item
+                    @click="{{../handleMenuCategoryClick}}"
+                    url="{{this.url}}"
+                    id="{{@index}}"
+                    label="{{this.category}}"
+                    type="Button"
+                    second-level
+                    has-border
+                    icon-end>
+                </udex-masthead-menu-item>
+            </li>
+        {{else}}
+            {{#each this.items}}
+                <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+                    <udex-masthead-menu-item
+                        url="{{this.url}}"
+                        label="{{this.title}}"
+                        has-border>
+                    </udex-masthead-menu-item>
+                </li>
+            {{/each}}
+        {{/if}}
     {{/each}}
 {{/inline}}
 
 {{#*inline "category-items"}}
+    {{#if _category.url}}
+        <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+            <udex-masthead-menu-item
+                url="{{this._category.url}}"
+                label="{{overviewLinkText}}"
+                has-border>
+            </udex-masthead-menu-item>
+        </li>
+    {{/if}}
     {{#each _category.items}}
         <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
             <udex-masthead-menu-item

package/src/MastheadMobileMenu.ts

@@ -230,13 +230,13 @@ class UDExMastheadMobileMenu extends UI5Element {
     const item = this.getItemByList(e.target as UDExMastheadItem);
     this._clickedItem = item;
     this._categories = this.getCategories(item.getSubItems());
+    this.setCategoryByItem(item);
     this._showCategories = true;
   }
 
   openCategoryItems(e: Event) {
     const item = e.target as UDExMastheadMenuItem;
-    const index = Number(item.getAttribute("id"));
-    this._category = this._categories[index];
+    this.setCategoryByItem(item);
     this._showCategories = false;
     this._showCategoryItems = true;
   }
@@ -252,6 +252,11 @@ class UDExMastheadMobileMenu extends UI5Element {
     this._showCategoryItems = false;
   }
 
+  setCategoryByItem(item: UDExMastheadMenuItem | UDExMastheadItem) {
+    const index = Number(item.getAttribute("id"));
+    this._category = this._categories[index];
+  }
+
   getItemByList(el: UDExMastheadItem): UDExMastheadItem {
     const items = [
       ...this.items,
@@ -291,7 +296,7 @@ class UDExMastheadMobileMenu extends UI5Element {
     return !this._showCategories && !this._showCategoryItems;
   }
 
-  get categoryLinkText(): string {
+  get overviewLinkText(): string {
     return UDExMastheadMobileMenu.i18nBundle.getText(OVERVIEW);
   }
 
@@ -306,6 +311,10 @@ class UDExMastheadMobileMenu extends UI5Element {
   get hasExploreBtnSlot(): boolean {
     return !!this.getSlottedNodes("exploreSapMobileButton").length;
   }
+
+  get hasSearchSlot(): boolean {
+    return !!this.search.length;
+  }
 }
 
 UDExMastheadMobileMenu.define();

package/src/MastheadProfileMenu.hbs

@@ -24,7 +24,7 @@
     {{#if logoutLink}}
         <div class="udex-masthead-profile-menu__actions" @click={{userLogout}}>
             <udex-masthead-menu-item
-                url="#"
+                url="{{logoutUrl}}"
                 label="{{logoutText}}">
             </udex-masthead-menu-item>
         </div>