@sapudex/web-components 2.29.0 → 2.30.0

package/src/FilterMenu.ts

@@ -44,6 +44,8 @@ export type initialItemState = {
   id: string,
   selected: boolean,
   indeterminate?: boolean,
+  collapsed?: boolean,
+  _filtered?: boolean,
 }
 
 type UDExFilterMenuResultClickEventDetail = {
@@ -483,6 +485,8 @@ class UDExFilterMenu extends UDExSearchableListBase {
           id: item._id,
           selected: item.selected,
           indeterminate: item.indeterminate,
+          collapsed: item.collapsed,
+          _filtered: item._filtered,
         };
         const subItemsState = (item as UDExListGroupHeaderBase).getItems().map(subItem => ({
           id: subItem._id,

package/src/ImageGridTickerTemplate.tsx

@@ -2,6 +2,7 @@ import type ImageGridTicker from "./ImageGridTicker.js";
 import ImageGridTickerItem from "./ImageGridTickerItem.js";
 import UDExButton from "./Button.js";
 import UDExButtonDesign from "./types/ButtonDesign.js";
+import UDExButtonSize from "./types/ButtonSize.js";
 import playIcon from "@ui5/webcomponents-icons/dist/play.js";
 import pauseIcon from "@ui5/webcomponents-icons/dist/pause.js";
 
@@ -17,7 +18,8 @@ export default function ImageGridTickerTemplate(this: ImageGridTicker) {
           <UDExButton
             class={`${rootClass}__play-button`}
             icon={btnIcon}
-            design={UDExButtonDesign.Invisible}
+            size={UDExButtonSize.Large}
+            design={UDExButtonDesign.Tertiary}
             onClick={this._onPlayButtonClick}
             tooltip={this.playBtnTooltipText}>
           </UDExButton>

package/src/List.ts

@@ -5,7 +5,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import {
-  isUp, isDown, isHome, isEnd,
+  isUp, isDown, isHome, isEnd, isRight, isLeft,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import type UDExListItem from "./ListItem.js";
 import type { UDExScrollIntoViewOptions } from "./types/List.js";
@@ -180,7 +180,7 @@ class UDExList extends UI5Element {
   onBeforeRendering(): void {
     this.prepareListItemsMode();
     this._focusHandler.resetMatchingItems();
-    this._focusHandler._focusableListItems = this.getItemsWithoutHeader();
+    this._focusHandler._focusableListItems = this.getKeyboardNavigationItems();
   }
 
   handleItemPress(e: CustomEvent): void {
@@ -192,6 +192,15 @@ class UDExList extends UI5Element {
     if (this.tabNavigationEnabled) {
       return;
     }
+
+    if (isRight(e)) {
+      this.handleArrowRight(e);
+    }
+
+    if (isLeft(e)) {
+      this.handleArrowLeft(e);
+    }
+
     if (isUp(e)) {
       this.handleUpArrow(e);
     }
@@ -209,6 +218,22 @@ class UDExList extends UI5Element {
     }
   }
 
+  handleArrowRight(e: KeyboardEvent): void {
+    const target = e.target as UDExListItemBase;
+    if ((target.tagName === "UDEX-LIST-GROUP-HEADER" || target.tagName === "UDEX-LIST-ITEM") && target.hasAttribute("collapsible")) {
+      target.collapsed = false;
+      this.setCollapsedItems(false, target);
+    }
+  }
+
+  handleArrowLeft(e: KeyboardEvent): void {
+    const target = e.target as UDExListItemBase;
+    if ((target.tagName === "UDEX-LIST-GROUP-HEADER" || target.tagName === "UDEX-LIST-ITEM") && target.hasAttribute("collapsible")) {
+      target.collapsed = true;
+      this.setCollapsedItems(true, target);
+    }
+  }
+
   handleUpArrow(e: KeyboardEvent): void {
     e.preventDefault();
     const items = this.getKeyboardNavigationItems();
@@ -401,7 +426,7 @@ class UDExList extends UI5Element {
   }
 
   focusHeader(item: UDExListItemBase): void {
-    const header = item.shadowRoot?.querySelector(".udex-list__group-header") as HTMLElement;
+    const header = item.shadowRoot?.querySelector(".udex-list__group-header-wrap") as HTMLElement;
     header.focus();
   }
 
@@ -425,17 +450,17 @@ class UDExList extends UI5Element {
     return this.getItemsFromList().filter(item => item.selected);
   }
 
-  getCurrentIndex(items: Array<UDExListItemBase>, item: UDExListItemBase): number {
+  getCurrentIndex(items: Array<UDExListItemBase | HTMLElement>, item: UDExListItemBase | HTMLElement): number {
     return items.indexOf(item);
   }
 
-  getItemsWithoutHeader(): Array<UDExListItemBase> {
-    return this.getItemsFromList().filter(item => !item.isGroup);
-  }
-
   getKeyboardNavigationItems(): Array<UDExListItemBase> {
-    const items = this.modeMultiSelect ? this.getItemsFromList() : this.getItemsWithoutHeader();
-    return items.filter(item => !item.disabled);
+    return this.getItemsFromList().filter(item => {
+      const parent = item.parentElement as UDExListItemBase;
+      return !item.disabled
+        && (!item.isGroup || item.modeMultiSelect || item.collapsible)
+        && !(parent?.isGroup && parent.collapsed);
+    });
   }
 
   getItemsFromList(): Array<UDExListItemBase> {
@@ -473,8 +498,9 @@ class UDExList extends UI5Element {
     const isFirstHeaderMultiMode = isFirstHeader && this.modeMultiSelect && !item.nonInteractive;
     const isFirstItemGroupSingleOrRadioMode = isFirstItemInGroupList && modeSingleOrRadio;
     const isFirstItemGroupMultiMode = isFirstItemInGroupList && this.modeMultiSelect && listGroupHeader?.nonInteractive;
+    const isCollapsibleHeader = item.isGroup && item.collapsible;
 
-    if (isFirstHeaderMultiMode || isFirstItemGroupSingleOrRadioMode || isFirstItemGroupMultiMode || isFirstItem) {
+    if (isFirstHeaderMultiMode || isFirstItemGroupSingleOrRadioMode || isFirstItemGroupMultiMode || isFirstItem || isCollapsibleHeader) {
       return "0";
     }
 
@@ -487,6 +513,17 @@ class UDExList extends UI5Element {
     });
   }
 
+  setCollapsedItems(collapsed: boolean, target: UDExListItemBase): void {
+    const items = target.getSlottedNodes<UDExListItemBase>("items");
+    items.forEach(item => {
+      if (collapsed) {
+        item.setAttribute("collapsed", "");
+      } else {
+        item.removeAttribute("collapsed");
+      }
+    });
+  }
+
   get isGroupList(): boolean {
     return this.getItemsFromList().some(item => item.isGroup);
   }

package/src/ListGroupHeader.hbs

@@ -3,36 +3,109 @@
     class="udex-list__group"
     role="group"
     aria-labelledby="group-heading">
-    <div
-        role="listbox"
-        class="udex-list__group-list"
-        name="group"
-        aria-label="group"
-        @ui5-item-press="{{getHandleGroupItemsClick}}">
-        {{#if modeMultiSelectOrRadioGroup}}
-            {{> multi-or-radio-group-header}}
-        {{else}}
-            {{> single-group-header}}
-        {{/if}}
-        <slot></slot>
-    </div>
+    {{#if collapsible}}
+      <div
+          class="udex-list__group-list"
+          name="group"
+          @ui5-item-press="{{getHandleGroupItemsClick}}">
+          {{#if modeMultiSelectOrRadioGroup}}
+              {{> multi-or-radio-group-header-collapsible}}
+          {{else}}
+              {{> single-group-header-collapsible}}
+          {{/if}}
+          <div id="{{ariaControlsId}}" role="region" class="udex-list__group-list__content">
+            <div role="listbox" aria-label="group">
+              <slot></slot>
+            </div>
+          </div>
+      </div>
+    {{else}}
+      <div
+          role="listbox"
+          class="udex-list__group-list"
+          name="group"
+          aria-label="group"
+          @ui5-item-press="{{getHandleGroupItemsClick}}">
+          {{#if modeMultiSelectOrRadioGroup}}
+              {{> multi-or-radio-group-header}}
+          {{else}}
+              {{> single-group-header}}
+          {{/if}}
+          <slot></slot>
+      </div>
+    {{/if}}
 </div>
 
 {{#*inline "multi-or-radio-group-header"}}
     {{#if isNonActiveHeader}}
-        <header id="group-heading" class="udex-list__inactive-header">
+        <header id="group-heading" class="udex-list__inactive-header udex-list__group-header-wrap">
+          <div class="udex-list__inactive-header-content">
+            <span class="udex-list__header-title">{{label}}</span>
+            {{#if supportingText}}
+                <span class="udex-list__supporting-text">{{supportingText}}</span>
+            {{/if}}
+          </div>
+        </header>
+    {{else}}
+        <udex-list-item
+            id="group-heading"
+            _additional-class-name="{{_additionalClassName}}"
+            ?selected="{{selected}}"
+            _tab-index="{{_effectiveTabIndex}}"
+            ?indeterminate="{{indeterminate}}"
+            ?_filtered="{{_filtered}}"
+            part="group-item"
+            role="none"
+            class="{{className}}"
+            mode="{{mode}}"
+            ?controlled="{{controlled}}"
+            supporting-text="{{supportingText}}"
+            @click="{{handleHeaderPress}}"
+            @keydown="{{handleKeyDownPress}}"
+            type="{{type}}"
+            label="{{label}}"
+            _icon="{{_icon}}"
+            size="{{size}}">
+        </udex-list-item>
+    {{/if}}
+{{/inline}}
+
+{{#*inline "multi-or-radio-group-header-collapsible"}}
+    {{#if isNonActiveHeader}}
+        <header role="button" id="group-heading" class="udex-list__inactive-header udex-list__group-header-wrap " tabindex="{{_effectiveTabIndex}}"
+        aria-expanded="{{expanded}}" aria-controls="{{ariaControlsId}}">
+          <div class="udex-list__inactive-header-content" >
             <span class="udex-list__header-title">{{label}}</span>
             {{#if supportingText}}
                 <span class="udex-list__supporting-text ">{{supportingText}}</span>
             {{/if}}
+          </div>
+          <div class="udex-list__group-heading__icon-wrapper">
+              <udex-button
+                size="Small"
+                design="Tertiary"
+                class="udex-list__group-heading__icon"
+                @click="{{handleCollapseIconClick}}"
+                tabindex="-1"
+                accessible-name="{{expandButtonAccessibleName}}"
+                mode="Interactive"
+                icon="slim-arrow-right">
+              </udex-button>
+          </div>
         </header>
     {{else}}
         <udex-list-item
             id="group-heading"
+            aria-expanded="{{expanded}}"
+            aria-controls="{{ariaControlsId}}"
+            accessible-role="button"
             _additional-class-name="{{_additionalClassName}}"
             ?selected="{{selected}}"
             _tab-index="{{_effectiveTabIndex}}"
             ?indeterminate="{{indeterminate}}"
+            collapsible={{collapsible}}
+            ?collapsed={{collapsed}}
+            ?_filtered="{{_filtered}}"
             part="group-item"
             role="none"
             class="{{className}}"
@@ -41,6 +114,7 @@
             supporting-text="{{supportingText}}"
             @click="{{handleHeaderPress}}"
             @keydown="{{handleKeyDownPress}}"
+            @accordion-icon-click="{{handleCollapseIconClick}}"
             type="{{type}}"
             label="{{label}}"
             _icon="{{_icon}}"
@@ -50,7 +124,36 @@
 {{/inline}}
 
 {{#*inline "single-group-header"}}
-    <div class="udex-list__group-content {{sizeClass}}" part="group-item">
+    <div class="udex-list__group-content udex-list__group-header-wrap {{sizeClass}}" part="group-item">
+        {{#if typeNumber}}<span class="udex-list__number">{{numberOfItem}}.</span>{{/if}}
+        {{#if typeCircle}}<span class="udex-list__circle">&#x2022;</span>{{/if}}
+        {{#if typeIcon}}
+            <ui5-icon
+                class="udex-list__icon"
+                name="{{_icon}}"
+                accessible-role="presentation"
+                aria-hidden="true"
+                part="icon">
+            </ui5-icon>
+        {{/if}}
+        <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}}
+        </div>
+    </div>
+{{/inline}}
+
+{{#*inline "single-group-header-collapsible"}}
+    <div class="udex-list__group-content udex-list__group-header-wrap {{sizeClass}}" part="group-item"
+    id="{{this._id}}_group-content__focusable"
+    role="button"
+    tabindex="0"
+    @keydown="{{handleKeyDown}}"
+    _tab-index="{{_effectiveTabIndex}}"
+    aria-expanded="{{expanded}}"
+    aria-controls="{{ariaControlsId}}">
         {{#if typeNumber}}<span class="udex-list__number">{{numberOfItem}}.</span>{{/if}}
         {{#if typeCircle}}<span class="udex-list__circle">&#x2022;</span>{{/if}}
         {{#if typeIcon}}
@@ -68,5 +171,17 @@
                 <span class="udex-list__supporting-text {{sizeClass}}">{{supportingText}}</span>
             {{/if}}
         </div>
+        <div class="udex-list__group-heading__icon-wrapper">
+            <udex-button
+              size="Small"
+              design="Tertiary"
+              class="udex-list__group-heading__icon"
+              @click="{{handleCollapseIconClick}}"
+              tabindex="-1"
+              accessible-name="{{expandButtonAccessibleName}}"
+              mode="Interactive"
+              icon="slim-arrow-right">
+            </udex-button>
+        </div>
     </div>
 {{/inline}}

package/src/ListGroupHeader.ts

@@ -1,12 +1,16 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+  isEnter, isLeft, isRight, isSpace,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import ListGroupHeaderTemplate from "./generated/templates/ListGroupHeaderTemplate.lit.js";
 import { UDExListItemSize } from "./types/List.js";
 import type { UDExListItemBaseEvents } from "./ListItemBase.js";
+import type UDExListItemBase from "./ListItemBase.js";
 
 // Styles
 import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css.js";
@@ -73,6 +77,12 @@ class UDExListGroupHeader extends UDExListGroupHeaderBase {
     }
   }
 
+  handleKeyDown(e: KeyboardEvent) {
+    if (isRight(e) || isLeft(e)) {
+      this.handleCollapseIconClick(e);
+    }
+  }
+
   fireHeaderPress() {
     this.fireDecoratorEvent("header-press", {
       item: this,
@@ -84,6 +94,26 @@ class UDExListGroupHeader extends UDExListGroupHeaderBase {
     return hasHandle ? this.handleHeaderState() : undefined;
   }
 
+  setCollapsedItems(): void {
+    const items = this.getSlottedNodes<UDExListItemBase>("items");
+    items.forEach(item => {
+      if (this.collapsed) {
+        item.setAttribute("collapsed", "");
+      } else {
+        item.removeAttribute("collapsed");
+      }
+    });
+  }
+
+  handleCollapseIconClick(e: MouseEvent | KeyboardEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.setContentHeight();
+    this.collapsed = !this.collapsed;
+    this.setCollapsedItems();
+    this.fireDecoratorEvent("accordion-icon-click", { collapsed: this.collapsed });
+  }
+
   get sizeClass(): string {
     return this.size === UDExListItemSize.Large ? listGroupLargeClass : "";
   }

package/src/ListGroupHeaderBase.ts

@@ -187,7 +187,7 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
 
   get className(): string {
     const controlledClassName = this.controlled ? `${listGroupHeaderClass}_controlled` : "";
-    return `${listGroupHeaderClass} ${this._additionalClassName} ${controlledClassName}`;
+    return `${listGroupHeaderClass} ${this._additionalClassName} ${controlledClassName} ${listGroupHeaderClass}-wrap`;
   }
 
   get listItem(): UDExListItemBase {

package/src/ListItem.hbs

@@ -112,6 +112,21 @@
                     <slot name="secondIcon" @click={{_fireIconClickEvent}}></slot>
                 {{/if}}
             {{/if}}
+            {{#if collapsible}}
+              <div class="udex-list__group-heading__icon-wrapper">
+                  <udex-button
+                    size="Small"
+                    design="Tertiary"
+                    @mousedown="{{handleCollapseIconMouseDown}}"
+                    @click="{{handleCollapseIconClick}}"
+                    mode="Interactive"
+                    tabindex="-1"
+                    accessible-name="{{expandButtonAccessibleName}}"
+                    class="udex-list__group-heading__icon"
+                    icon="slim-arrow-right">
+                  </udex-button>
+              </div>
+            {{/if}}
         </div>
       <div class="hidden" id="{{this._id}}-invisibleText">{{accessibleListItemName}}</div>
       <div class="hidden" id="{{this._id}}-invisibleText-describedby">{{itemState}}</div>

package/src/ListItem.ts

@@ -277,7 +277,7 @@ class UDExListItem extends UDExListItemBase {
   }
 
   handleKeyDown(e: KeyboardEvent) {
-    if (this.firstIconElement === e.target || this.secondIconElement === e.target) {
+    if (this.firstIconElement === e.target || this.secondIconElement === e.target || (e.target as HTMLElement).classList.contains("udex-list__group-heading__icon")) {
       return;
     }
 

package/src/ListItemBase.ts

@@ -4,10 +4,16 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { UDExListItemSize, UDExListMode, UDExListStyleType } from "./types/List.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import translate from "./utils/translate.js";
+import { COLLAPSE, EXPAND } from "./generated/i18n/i18n-defaults.js";
 
 export type UDExListItemBaseEvents = {
   "first-icon-click": UDExListItemBaseEventDetail,
   "second-icon-click": UDExListItemBaseEventDetail,
+  "accordion-icon-click": UDExListItemBaseAccordionClickEventDetail,
 }
 
 type UDExListItemBaseEventDetail = {
@@ -15,6 +21,10 @@ type UDExListItemBaseEventDetail = {
   item: HTMLElement,
 }
 
+type UDExListItemBaseAccordionClickEventDetail = {
+  collapsed: boolean;
+}
+
 /**
  * @class
  *
@@ -49,6 +59,14 @@ type UDExListItemBaseEventDetail = {
  */
 @event("second-icon-click", { bubbles: true })
 
+/**
+ * Triggered when the user clicks on an accordion item.
+ * @public
+ * @param { string } name
+ * @param { boolean } expanded
+ */
+@event("accordion-icon-click", { bubbles: true })
+
 class UDExListItemBase extends UI5Element {
   eventDetails!: UDExListItemBaseEvents;
 
@@ -148,6 +166,33 @@ class UDExListItemBase extends UI5Element {
   @property({ type: String })
     _icon: string = "";
 
+  /**
+   * Defines if grouping header can collapse/expand child elements.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    collapsible!: boolean;
+
+  /**
+   * Defines if collapsible grouping header is collapsed or expanded
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: Boolean })
+    collapsed!: boolean;
+
+  /**
+   * Defines if item is part of filtered list
+   *
+   * @default undefined
+   * @private
+   */
+  @property({ type: Boolean })
+    _filtered!: boolean;
+
   /**
    * Defines the tab index of the component.
    *
@@ -157,6 +202,45 @@ class UDExListItemBase extends UI5Element {
   @property({ type: String })
     _tabIndex: string = "";
 
+  _resizeHandler: () => void;
+  contentElement: HTMLElement | null | undefined;
+
+  constructor() {
+    super();
+    this._resizeHandler = this._onResize.bind(this);
+    this.contentElement = null;
+  }
+
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
+  onEnterDOM() {
+    if (!this.collapsible) {
+      return;
+    }
+    this.contentElement = this.shadowRoot?.querySelector(".udex-list__group-list__content") || this.nextElementSibling as HTMLElement;
+    if (this.contentElement) {
+      ResizeHandler.register(this.contentElement, this._resizeHandler);
+      this.setContentHeight();
+    }
+  }
+
+  onExitDOM(): void {
+    if (this.contentElement && this.collapsible) {
+      ResizeHandler.deregister(this.contentElement, this._resizeHandler);
+    }
+  }
+
+  setContentHeight() {
+    this.style.setProperty("--udex-list-content-max-height", `${this.contentElement?.scrollHeight || 0}px`);
+  }
+
+  _onResize(): void {
+    if (this.contentElement && this.collapsible) {
+      this.setContentHeight();
+    }
+  }
+
   _fireIconClickEvent(e: PointerEvent): void {
     const target = e.target as HTMLElement;
     const slot = target.getAttribute("slot");
@@ -173,6 +257,16 @@ class UDExListItemBase extends UI5Element {
     }
   }
 
+  handleCollapseIconMouseDown(e: MouseEvent) {
+    e.stopPropagation();
+  }
+
+  handleCollapseIconClick(e: MouseEvent | KeyboardEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.fireDecoratorEvent("accordion-icon-click", { collapsed: this.collapsed });
+  }
+
   get _effectiveTabIndex(): string {
     if (this.disabled) {
       return "-1";
@@ -215,7 +309,19 @@ class UDExListItemBase extends UI5Element {
   get typeIcon(): boolean {
     return this.type === UDExListStyleType.Icon;
   }
+
+  get ariaControlsId(): string {
+    return `udex-list-${this._id}__group-content`;
+  }
+
+  get expandButtonAccessibleName(): string {
+    return this.collapsed ? translate(UDExListItemBase, EXPAND) : translate(UDExListItemBase, COLLAPSE);
+  }
+
+  get expanded(): boolean {
+    return !this.collapsed;
+  }
 }
 
 export default UDExListItemBase;
-export type { UDExListItemBaseEventDetail };
+export type { UDExListItemBaseEventDetail, UDExListItemBaseAccordionClickEventDetail };

package/src/MastheadCountrySelector.hbs

@@ -56,7 +56,7 @@
                         @click="{{../handleRegionClick}}"
                         index="{{@index}}"
                         class="udex-masthead-country-selector__item udex-masthead-country-selector__item_region"
-                        aria-has-popup="true"
+                        aria-haspopup="true"
                         type="Button"
                         part="menu-item"
                         is-nav-item