@sapudex/web-components 2.54.0 → 2.55.0

package/src/ListGroupHeaderTemplate.tsx

@@ -0,0 +1,228 @@
+import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
+import type UDExListGroupHeader from "./ListGroupHeader.js";
+import UDExListItem from "./ListItem.js";
+import UDExButton from "./Button.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+
+function SingleGroupHeader(this: UDExListGroupHeader) {
+  return (
+    <div class={`udex-list__group-content udex-list__group-header-wrap ${this.sizeClass}`} part="group-item">
+      {this.typeNumber && <span class="udex-list__number">{this.numberOfItem}.</span>}
+      {this.typeCircle && <span class="udex-list__circle">&#x2022;</span>}
+      {this.typeIcon && (
+        <Icon
+          class="udex-list__icon"
+          accessible-role="presentation"
+          aria-hidden="true"
+          part="icon"
+          name={this._icon}
+        />
+      )}
+      <div class="udex-list__header">
+        <span
+          id="group-heading"
+          class="udex-list__header-title"
+          {...({ innerHTML: this.label } as object)}>
+        </span>
+        {this.supportingText && (
+          <span class={`udex-list__supporting-text ${this.sizeClass}`}>{this.supportingText}</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function SingleGroupHeaderCollapsible(this: UDExListGroupHeader) {
+  return (
+    <div
+      class={`udex-list__group-content udex-list__group-header-wrap ${this.sizeClass}`}
+      part="group-item"
+      id={`${this._id}_group-content__focusable`}
+      role={this.singleCollapsibleHeaderRole as AriaRole}
+      tabIndex={0}
+      onKeyDown={this.handleKeyDown}
+      aria-expanded={this.expanded}
+      aria-controls={this.ariaControlsId}
+      _tab-index={Number(this._effectiveTabIndex)}>
+      {this.typeNumber && <span class="udex-list__number">{this.numberOfItem}.</span>}
+      {this.typeCircle && <span class="udex-list__circle">&#x2022;</span>}
+      {this.typeIcon && (
+        <Icon
+          name={this._icon}
+          class="udex-list__icon"
+          accessible-role="presentation"
+          aria-hidden="true"
+          part="icon"
+        />
+      )}
+      <div class="udex-list__header">
+        <span
+          id="group-heading"
+          class="udex-list__header-title"
+          {...({ innerHTML: this.label } as object)}>
+        </span>
+        {this.supportingText && (
+          <span class={`udex-list__supporting-text ${this.sizeClass}`}>{this.supportingText}</span>
+        )}
+      </div>
+      <div class="udex-list__group-heading__icon-wrapper">
+        <UDExButton
+          size="Small"
+          design="Tertiary"
+          class="udex-list__group-heading__icon"
+          onClick={this.handleCollapseIconClick as unknown as EventListener}
+          tabindex={-1}
+          accessible-name={this.expandButtonAccessibleName}
+          icon={slimArrowRight}
+          {...({ "mode": "Interactive" } as object)}
+        />
+      </div>
+    </div>
+  );
+}
+
+function MultiOrRadioGroupHeader(this: UDExListGroupHeader) {
+  if (this.isNonActiveHeader) {
+    return (
+      <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" {...({ innerHTML: this.label } as object)}></span>
+          {this.supportingText && (
+            <span class="udex-list__supporting-text">{this.supportingText}</span>
+          )}
+        </div>
+      </header>
+    );
+  }
+  return (
+    <UDExListItem
+      id="group-heading"
+      part="group-item"
+      role="none"
+      selected={this.selected}
+      indeterminate={this.indeterminate}
+      class={this.className}
+      mode={this.mode}
+      controlled={this.controlled}
+      onClick={this.handleHeaderPress}
+      onKeyDown={this.handleKeyDownPress}
+      type={this.type}
+      label={this.label}
+      size={this.size}
+      supportingText={this.supportingText}
+      accessible-role={this.nonCollapsibleHeaderAccessibleRole}
+      _additional-class-name={this._additionalClassName}
+      _tab-index={Number(this._effectiveTabIndex)}
+      _icon={this._icon}
+      _filtered={this._filtered}
+    />
+  );
+}
+
+function MultiOrRadioGroupHeaderCollapsible(this: UDExListGroupHeader) {
+  if (this.isNonActiveHeader) {
+    return (
+      <header
+        role="button"
+        id="group-heading"
+        class="udex-list__inactive-header udex-list__group-header-wrap"
+        tabIndex={Number(this._effectiveTabIndex)}
+        aria-expanded={this.expanded}
+        aria-controls={this.ariaControlsId}>
+        <div class="udex-list__inactive-header-content">
+          <span class="udex-list__header-title" {...({ innerHTML: this.label } as object)}></span>
+          {this.supportingText && (
+            <span class="udex-list__supporting-text">{this.supportingText}</span>
+          )}
+        </div>
+        <div class="udex-list__group-heading__icon-wrapper">
+          <UDExButton
+            class="udex-list__group-heading__icon"
+            size={UDExButtonSize.Small}
+            design={UDExButtonDesign.Tertiary}
+            tabindex={-1}
+            icon={slimArrowRight}
+            onClick={this.handleCollapseIconClick as EventListener}
+            accessible-name={this.expandButtonAccessibleName}
+            {...({ "mode": "Interactive" } as object)}
+          />
+        </div>
+      </header>
+    );
+  }
+  return (
+    <UDExListItem
+      id="group-heading"
+      part="group-item"
+      role="none"
+      aria-expanded={this.expanded}
+      aria-controls={this.ariaControlsId}
+      selected={this.selected}
+      indeterminate={this.indeterminate}
+      collapsible={this.collapsible}
+      collapsed={this.collapsed}
+      class={this.className}
+      mode={this.mode}
+      controlled={this.controlled}
+      onClick={this.handleHeaderPress}
+      onKeyDown={this.handleKeyDownPress}
+      type={this.type}
+      label={this.label}
+      size={this.size}
+      supportingText={this.supportingText}
+      accessible-role={this.collapsibleHeaderAccessibleRole}
+      onAccordionIconClick={this.handleCollapseIconClick as EventListener}
+      _additional-class-name={this._additionalClassName}
+      _tab-index={Number(this._effectiveTabIndex)}
+      _icon={this._icon}
+      _filtered={this._filtered}
+    />
+  );
+}
+
+export default function ListGroupHeaderTemplate(this: UDExListGroupHeader) {
+  return (
+    <div
+      part="item"
+      class="udex-list__group"
+      role={this.groupWrapperRole as AriaRole}
+      aria-labelledby={!this.isTreeAccessibleRole ? "group-heading" : undefined}>
+      {this.collapsible ? (
+        <div
+          class="udex-list__group-list"
+          onui5-item-press={this.getHandleGroupItemsClick}
+          {...({ name: "group" } as object)}>
+          {this.useListItemHeader
+            ? MultiOrRadioGroupHeaderCollapsible.call(this)
+            : SingleGroupHeaderCollapsible.call(this)
+          }
+          <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class="udex-list__group-list__content">
+            {this.isTreeAccessibleRole ? (
+              <slot></slot>
+            ) : (
+              <div role="listbox" aria-label="group">
+                <slot></slot>
+              </div>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div
+          role={this.nonCollapsibleContainerRole as AriaRole}
+          class="udex-list__group-list"
+          aria-label="group"
+          onui5-item-press={this.getHandleGroupItemsClick}
+          {...({ name: "group" } as object)}>
+          {this.modeMultiSelectOrRadioGroup
+            ? MultiOrRadioGroupHeader.call(this)
+            : SingleGroupHeader.call(this)
+          }
+          <slot></slot>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ListItem.ts

@@ -1,8 +1,9 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
+import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.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 Icon from "@ui5/webcomponents/dist/Icon.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
@@ -24,11 +25,10 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 import translate from "./utils/translate.js";
 
-import ListItemTemplate from "./generated/templates/ListItemTemplate.lit.js";
+import ListItemTemplate from "./ListItemTemplate.js";
 
 // Styles
 import ListItemCss from "./generated/themes/ListItem.css.js";
-import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 
 const listItemClass: string = "udex-list__item";
 const listItemRole: string = "option";
@@ -64,7 +64,8 @@ type UDExListItemItemPressEventDetail = {
 
 @customElement({
   tag: "udex-list-item",
-  renderer: litRender,
+  languageAware: true,
+  renderer: jsxRenderer,
   styles: ListItemCss,
   template: ListItemTemplate,
   dependencies: [

package/src/ListItemBase.ts

@@ -2,7 +2,7 @@ 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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.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";
@@ -37,7 +37,7 @@ type UDExListItemBaseAccordionClickEventDetail = {
  * @public
  */
 @customElement({
-  renderer: litRender,
+  renderer: jsxRenderer,
 })
 
 /**
@@ -261,17 +261,22 @@ class UDExListItemBase extends UI5Element {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  onEnterDOM() {
+  onAfterRendering() {
     if (!this.collapsible) {
       return;
     }
     this.contentElement = this.shadowRoot?.querySelector<HTMLElement>(".udex-list__group-list__content");
     if (this.contentElement) {
-      ResizeHandler.register(this.contentElement, this._resizeHandler);
       this.setContentHeight();
     }
   }
 
+  onEnterDOM() {
+    if (this.contentElement && this.collapsible) {
+      ResizeHandler.register(this.contentElement, this._resizeHandler);
+    }
+  }
+
   onExitDOM(): void {
     if (this.contentElement && this.collapsible) {
       ResizeHandler.deregister(this.contentElement, this._resizeHandler);

package/src/ListItemTemplate.tsx

@@ -0,0 +1,193 @@
+import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
+import type UDExListItem from "./ListItem.js";
+import UDExCheckbox from "./Checkbox.js";
+import UDExRadioButton from "./RadioButton.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import UDExAvatar from "./Avatar.js";
+import UDExStatusBadge from "./StatusBadge.js";
+import UDExRatingIndicator from "./RatingIndicator.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+
+function ContentList(this: UDExListItem) {
+  return (
+    <div
+      class="udex-list__content-wrap"
+      {...({ "_id": this._id } as object)}
+      aria-labelledby={`${this._id}-invisibleText`}
+      aria-label={this.accessibleListItemName}>
+      {this.flag && (
+        <div class="udex-list__flag-wrap">
+          <span class="udex-list__flag" style={{ backgroundPosition: this.flagPosition }}></span>
+        </div>
+      )}
+      {this.typeNumber && <span class="udex-list__number">{this.numberOfItem}.</span>}
+      {this.typeCircle && <span class="udex-list__circle">&#x2022;</span>}
+      {this.typeIcon && (
+        <Icon
+          name={this._icon}
+          class="udex-list__icon"
+          accessible-role="presentation"
+          aria-hidden="true"
+          part="icon"
+        />
+      )}
+      {this.image && (
+        <UDExAvatar
+          class="udex-list__avatar"
+          part="avatar"
+          shape={this.imageShape}
+          size={this.imageSize}>
+          {this.imageBadgeState && (
+            <UDExStatusBadge
+              slot="badge"
+              value-state={this.imageBadgeState}
+              size={this.imageSize}
+            />
+          )}
+          <img src={this.image} alt={this.imageAlt} />
+        </UDExAvatar>
+      )}
+      <div class="udex-list__content" part="content">
+        {this.label ? (
+          <>
+            <div class="udex-list__text-holder">
+              <span part="title" {...({ innerHTML: this.label } as object)}></span>
+              {this.supportingText && (
+                <span class="udex-list__supporting-text" part="supporting">{this.supportingText}</span>
+              )}
+              <slot part="content"></slot>
+              {this.hasRating && (
+                <UDExRatingIndicator
+                  aria-label={this.ratingAriaLabel}
+                  value={this.rating !== undefined ? Number(this.rating) : undefined}
+                  rating-count={this.ratingCount}
+                  total-count={this.totalCount}
+                  max={this.ratingMax}
+                  display={this._displayRating}
+                  disabled
+                  readonly
+                />
+              )}
+            </div>
+            {this.additionalText && (
+              <div class="udex-list__add-text" part="additional-text">{this.additionalText}</div>
+            )}
+            <div class="udex-list__btn-wrap">
+              {this.hasFirstIcon && <slot name="firstIcon" onClick={this._fireIconClickEvent as EventListener}></slot>}
+              {this.hasSecondIcon && <slot name="secondIcon" onClick={this._fireIconClickEvent as EventListener}></slot>}
+            </div>
+          </>
+        ) : (
+          <>
+            <div class="udex-list__text-holder">
+              <slot part="content"></slot>
+              {this.supportingText && (
+                <span class="udex-list__supporting-text" part="supporting">{this.supportingText}</span>
+              )}
+              {this.hasRating && (
+                <UDExRatingIndicator
+                  aria-label={this.ratingAriaLabel}
+                  value={this.rating !== undefined ? Number(this.rating) : undefined}
+                  rating-count={this.ratingCount}
+                  total-count={this.totalCount}
+                  max={this.ratingMax}
+                  display={this._displayRating}
+                  disabled
+                  readonly
+                />
+              )}
+            </div>
+            {this.additionalText && (
+              <div class="udex-list__add-text" part="additional-text">{this.additionalText}</div>
+            )}
+            <div class="udex-list__btn-wrap">
+              {this.hasFirstIcon && <slot name="firstIcon" onClick={this._fireIconClickEvent as EventListener}></slot>}
+              {this.hasSecondIcon && <slot name="secondIcon" onClick={this._fireIconClickEvent as EventListener}></slot>}
+            </div>
+          </>
+        )}
+        {this.collapsible && (
+          <div class="udex-list__group-heading__icon-wrapper">
+            <UDExButton
+              class="udex-list__group-heading__icon"
+              size={UDExButtonSize.Small}
+              design={UDExButtonDesign.Tertiary}
+              onMouseDown={this.handleCollapseIconMouseDown}
+              onClick={this.handleCollapseIconClick as EventListener}
+              tabindex={-1}
+              accessible-name={this.expandButtonAccessibleName}
+              {...({ "mode": "Interactive" } as object)}
+              icon={slimArrowRight}
+            />
+          </div>
+        )}
+      </div>
+      <div class="hidden" id={`${this._id}-invisibleText`}>{this.accessibleListItemName}</div>
+      <div class="hidden" id={`${this._id}-invisibleText-describedby`}>{this.itemState}</div>
+    </div>
+  );
+}
+
+export default function ListItemTemplate(this: UDExListItem) {
+  return (
+    <>
+      {this.modeSelected && (
+        <div
+          part="item"
+          tabIndex={Number(this._effectiveTabIndex)}
+          aria-disabled={this._ariaDisabled}
+          class={this.className}
+          role={this.roleItem as AriaRole}
+          aria-checked={this.ariaCheckedValue}
+          aria-selected={this.ariaSelectedValue}
+          aria-expanded={this.ariaExpandedValue}
+          onFocusIn={this.handleFocusIn}
+          onFocusOut={this.handleFocusOut}
+          onClick={this.handleItemClick}
+          onMouseDown={this.handleMouseDown}
+          onMouseUp={this.handleMouseUp}
+          onKeyUp={this.handleKeyUp}
+          onKeyDown={this.handleKeyDown}
+          {...({ divider: this.divider, "_id": this._id } as object)}
+          data-selected={this.selected}
+          aria-describedby={this.itemDescribedBy}>
+          {this.modeMultiSelect && (
+            <UDExCheckbox
+              class="udex-list__checkbox"
+              part="checkbox"
+              tabindex={-1}
+              indeterminate={this.indeterminate}
+              accessible-name={`checkbox ${this.stateAccessibleName}`}
+              checked={this.selected}
+              disabled={this.disabled}
+              aria-hidden={this.checkboxAriaHidden ? "true" : undefined}
+            />
+          )}
+          {this.modeRadioGroup && (
+            <UDExRadioButton
+              class="udex-list__radio"
+              part="radio"
+              tabindex={-1}
+              accessible-name={`radio ${this.stateAccessibleName}`}
+              checked={this.selected}
+              disabled={this.disabled}
+            />
+          )}
+          {ContentList.call(this)}
+        </div>
+      )}
+      {this.modeSingleContent && (
+        <div
+          part="item"
+          role={this.roleItem as AriaRole}
+          aria-selected={this.selected}
+          class={this.className}>
+          {ContentList.call(this)}
+        </div>
+      )}
+    </>
+  );
+}

package/src/ListSelectAll.ts

@@ -1,14 +1,13 @@
 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 jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import { UDExListMode } from "./types/List.js";
 import { SELECT_ALL } from "./generated/i18n/i18n-defaults.js";
-import ListSelectAllTemplate from "./generated/templates/ListSelectAllTemplate.lit.js";
-import UDExListItem from "./ListItem.js";
+import ListSelectAllTemplate from "./ListSelectAllTemplate.js";
 import type { UDExListItemBaseEvents } from "./ListItemBase.js";
 import translate from "./utils/translate.js";
 
@@ -41,10 +40,10 @@ type UDExListSelectAllSelectAllEventDetail = {
  */
 @customElement({
   tag: "udex-list-select-all",
-  renderer: litRender,
+  renderer: jsxRenderer,
+  languageAware: true,
   styles: ListGroupHeaderCss,
   template: ListSelectAllTemplate,
-  dependencies: [UDExListItem],
 })
 /**
    * Fired when the user clicks on the Select All header.

package/src/ListSelectAllTemplate.tsx

@@ -0,0 +1,38 @@
+import type UDExListSelectAll from "./ListSelectAll.js";
+import UDExListItem from "./ListItem.js";
+
+export default function ListSelectAllTemplate(this: UDExListSelectAll) {
+  return (
+    <div
+      part="item"
+      class="udex-list__group"
+      role="group"
+      aria-labelledby="group-select-all">
+      <div
+        role="listbox"
+        aria-label="select-all-group"
+        class={this.groupListClassName}
+        onui5-item-press={this.handleSelectAllGroupItemsPress}>
+        <UDExListItem
+          role="group"
+          part="group-item"
+          accessible-role="option"
+          mode={this.multiselectMode}
+          onClick={this.handleSelectAllPress}
+          class={this.className}
+          selected={this.selected}
+          aria-current={this.selected}
+          indeterminate={this.indeterminate}
+          controlled={this.controlled}
+          onKeyDown={this.handleKeyDownPress}
+          _tab-index={Number(this._effectiveTabIndex)}
+          _additional-class-name={this.additionalClassName}
+          supportingText={this.supportingText}
+          divider>
+          {this.selectAllLabel}
+        </UDExListItem>
+        <slot></slot>
+      </div>
+    </div>
+  );
+}

package/src/ListTemplate.tsx

@@ -0,0 +1,60 @@
+import type UDExList from "./List.js";
+import type { AriaRole } from "@ui5/webcomponents-base/types.js";
+
+export default function ListTemplate(this: UDExList) {
+  return (
+    <>
+      {this.modeSelected && (
+        <div
+          class="udex-list-root"
+          onKeyDown={this.handleKeyDown}
+          style={{ height: this.holderHeight }}
+          onui5-item-press={this.handleItemPress}
+          onui5-header-press={this.handleItemPress}>
+          <div class="udex-list__scroll-container">
+            {HeaderText.call(this)}
+            <span id={`${this._id}-mode-label`} class="udex-list__hidden-text">
+              {this.ariaLabelModeText}
+            </span>
+            <div
+              id="udex-list"
+              class="udex-list"
+              role={this.effectiveAccessibleRole as AriaRole}
+              aria-labelledby={this.ariaLabelledBy}
+              aria-multiselectable={this._listAriaMultiSelectable as "true" | undefined}
+              aria-busy={(this.ariaBusy ?? undefined) as "true" | "false" | undefined}>
+              <slot></slot>
+            </div>
+          </div>
+        </div>
+      )}
+      {this.modeSingleContent && (
+        <>
+          {HeaderText.call(this)}
+          <div
+            id="udex-list"
+            class="udex-list"
+            role={this.accessibleRole as AriaRole}
+            aria-label={this.singleContentAriaLabel}
+            aria-busy={(this.ariaBusy ?? undefined) as "true" | "false" | undefined}>
+            <slot></slot>
+          </div>
+        </>
+      )}
+    </>
+  );
+}
+
+function HeaderText(this: UDExList) {
+  if (!this.headerText) {
+    return null;
+  }
+  return (
+    <header
+      id={`${this._id}-mode-label`}
+      class="udex-list__header-text"
+      part="header">
+      {this.headerText}
+    </header>
+  );
+}

package/src/MediaPlayer.ts

@@ -371,6 +371,9 @@ class UDExMediaPlayer extends UI5Element {
     });
 
     player.on("ended", () => {
+      this.video25 = false;
+      this.video50 = false;
+      this.video75 = false;
       this.fireDecoratorEvent("videoComplete");
     });
 
@@ -621,6 +624,9 @@ class UDExMediaPlayer extends UI5Element {
 
   handleEmbedVideoEnded() {
     this._embedVideoStartFired = false;
+    this.video25 = false;
+    this.video50 = false;
+    this.video75 = false;
     this.fireDecoratorEvent("videoComplete");
   }