@sapudex/web-components 2.10.0 → 2.12.0

package/src/PromoTile.ts

@@ -0,0 +1,290 @@
+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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
+import PromoTileTemplate from "./PromoTileTemplate.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { PROMO_TILE, PROMO_TILE_ICON } from "./generated/i18n/i18n-defaults.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
+import type UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import { UDExPromoTileColorSheme, UDExPromoTileMode } from "./types/PromoTile.js";
+
+// Styles
+import PromoTileCss from "./generated/themes/PromoTile.css.js";
+
+export enum UDExOrientation {
+  Vertical = "Vertical",
+  Horizontal = "Horizontal",
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-promo-tile</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/PromoTile.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-promo-tile
+ * @public
+ */
+@customElement({
+  tag: "udex-promo-tile",
+  renderer: jsxRenderer,
+  styles: PromoTileCss,
+  template: PromoTileTemplate,
+})
+
+/**
+ * Triggered when the user clicks on the CTA button
+ *
+ * @public
+ */
+@event("button-click", { cancelable: true, bubbles: true })
+
+class UDExPromoTile extends UI5Element {
+  eventDetails!: {
+    "button-click": void,
+  };
+
+  /**
+   * Defines the text content of the Promo Tile.
+   *
+   * @slot content
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true })
+    content!: Array<HTMLElement>;
+
+  /**
+   * Defines the orientation of the Promo Tile component.
+   *
+   * @type {string}
+   * @defaultvalue "Vertical"
+   * @public
+   */
+  @property({ type: String })
+    orientation: `${UDExOrientation}` = UDExOrientation.Vertical;
+
+  /**
+   * Defines the UI5 icon name in the pictogram section.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    icon?: string;
+
+  /**
+   * Defines the image aria label and alt in the pictogram section.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    imageLabel?: string;
+
+  /**
+   * Defines the logo URL in the pictogram section.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    logoUrl?: string;
+
+  /**
+   * Defines the header text of the promo tile.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    header?: string;
+
+  /**
+   * Defines the eyebrow text of the promo tile.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    eyebrow?: string;
+
+  /**
+   * Defines the CTA button label
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    button?: string;
+
+  /**
+   * Defines the CTA button design
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    buttonDesign?: UDExButtonDesign;
+
+  /**
+   * Defines the color scheme of the Promo Tile.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    colorScheme?: UDExPromoTileColorSheme;
+
+  /**
+   * Defines the accessible name of the component.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    accessibleName?: string;
+
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
+  _handleResizeBound: ResizeObserverCallback;
+  _button: UDExButton | undefined;
+  _colorMode: UDExPromoTileMode = UDExPromoTileMode.light;
+  _lightModeColors: Array<number> = [1, 2];
+  _darkModeColors: Array<number> = [7, 8, 9, 10];
+
+  constructor() {
+    super();
+    this._handleResizeBound = this._handleResize.bind(this);
+  }
+
+  onEnterDOM(): void {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
+  onAfterRendering() {
+    this._button = this.getButton();
+    this.applyColorScheme();
+  }
+
+  _handleResize(): void {
+    if (this._button) {
+      this._button.size = this.isMobile ? UDExButtonSize.Medium : UDExButtonSize.Large;
+    }
+  }
+
+  getButton(): UDExButton | undefined {
+    return this.shadowRoot!.querySelector<UDExButton>(
+      "[udex-button]",
+    )!;
+  }
+
+  applyColorScheme(): void {
+    if (!this.colorScheme) {
+      return;
+    }
+
+    this._colorMode = this.checkColorMode(this.colorScheme);
+    const eyebrowColor = this.checkEyebrowColor(this.colorScheme);
+
+    if (this._colorMode === UDExPromoTileMode.dark) {
+      if (this._button) {
+        this._button.design = this.buttonDesign || UDExButtonDesign.Secondary;
+      }
+      this.style.setProperty("--udex-promo-tile-icon-fill-color", `var(--udexCoreTextLight)`);
+    }
+    this.style.setProperty("--udex-promo-tile-background", `var(--udexColor${this.colorScheme})`);
+    this.style.setProperty("--udex-promo-tile-eyebrow-color", `var(--udexColor${eyebrowColor})`);
+  }
+
+  getColorNumber(colorScheme: string): number {
+    const match = colorScheme.match(/\d+/);
+    return match ? parseInt(match[0]) : 0;
+  }
+
+  checkColorMode(colorScheme: string): UDExPromoTileMode {
+    const number = this.getColorNumber(colorScheme);
+
+    if (number && this._darkModeColors.includes(number)) {
+      return UDExPromoTileMode.dark;
+    }
+    return UDExPromoTileMode.light;
+  }
+
+  checkEyebrowColor(colorScheme: string): string {
+    const number = this.getColorNumber(colorScheme);
+    let color: string = UDExPromoTileColorSheme.Blue8;
+
+    if (number === 7) {
+      color = "NeutralWhite";
+    } else if (this._darkModeColors.includes(number)) {
+      color = colorScheme.replace(`${number}`, `${number - 7}`);
+    } else if (this._lightModeColors.includes(number)) {
+      color = colorScheme.replace(`${number}`, `${number + 7}`);
+    }
+    return color;
+  }
+
+  get isMobile(): boolean {
+    return BreakpointUtils.isAtMost("S");
+  }
+
+  get promoTileContainerText(): string {
+    return this.accessibleName || this.header || UDExPromoTile.i18nBundle.getText(PROMO_TILE);
+  }
+
+  get _showPictogram(): boolean {
+    return !!this.icon || !!this.logoUrl;
+  }
+
+  get _showLogo(): boolean {
+    return !this.icon && !!this.logoUrl;
+  }
+
+  get _imageLabel(): string {
+    return this.imageLabel || UDExPromoTile.i18nBundle.getText(PROMO_TILE_ICON);
+  }
+
+  handleCTAButtonClick(e: Event) {
+    e.preventDefault();
+    this.fireDecoratorEvent("button-click");
+  }
+}
+
+UDExPromoTile.define();
+
+export default UDExPromoTile;

package/src/PromoTileTemplate.tsx

@@ -0,0 +1,68 @@
+import type UDExPromoTile from "./PromoTile.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
+
+export default function PromoTileTemplate(this: UDExPromoTile) {
+  const rootClass = "udex-promo-tile";
+
+  return (
+    <div
+      role="region"
+      class={`${rootClass}__container ${rootClass}--${this.orientation?.toLowerCase()} ${rootClass}--${this._colorMode}`}
+      aria-label={this.promoTileContainerText}>
+      {this._showPictogram &&
+        <div
+          part="image"
+          class={{
+            "udex-promo-tile__pictogram": true,
+            "udex-promo-tile__pictogram--logo": this.logoUrl
+          }}
+          title={this._imageLabel}>
+          {this.icon &&
+            <UI5Icon
+              class={`${rootClass}__icon`}
+              name={this.icon?.toLowerCase()}
+              mode={IconMode.Decorative}
+              accessibleName={this._imageLabel}>
+            </UI5Icon>}
+          {this._showLogo &&
+            <img
+              src={this.logoUrl}
+              class={`${rootClass}__icon`}
+              aria-label={this._imageLabel}
+              alt={this._imageLabel} />}
+        </div>
+      }
+      <div part="content" class={`${rootClass}__content`}>
+        <div class={`${rootClass}__text`}>
+          {this.eyebrow &&
+            <div class={`${rootClass}__eyebrow eyebrow--l`}>{this.eyebrow}</div>
+          }
+          {this.header &&
+            <div part="header" class={`${rootClass}__header`}>{this.header}</div>
+          }
+          <slot></slot>
+        </div>
+        {!!this.button && footerSection.call(this, rootClass)}
+      </div>
+    </div>
+  );
+}
+function footerSection(this: UDExPromoTile, rootClass: string) {
+  return (
+    <>
+      <div part="footer" class={`${rootClass}__footer`}>
+        <UDExButton class={`${rootClass}__btn`}
+          size={UDExButtonSize.Large}
+          design={this.buttonDesign}
+          onClick={this.handleCTAButtonClick}
+          accessibleRole={UDExButtonAccessibleRole.Button}>
+          {this.button}
+        </UDExButton>
+      </div>
+    </>
+  );
+}

package/src/Quote.ts

@@ -20,6 +20,11 @@ export enum UDExMaskType {
   rectangle = "rectangle"
 }
 
+export enum UDExImagePlacement {
+  left = "left",
+  right = "right"
+}
+
 /**
  * @class
  *
@@ -82,7 +87,7 @@ class UDExQuote extends UI5Element {
     * @default "large"
   */
   @property()
-    imageSize: `${UDExSizeType}` = "large";
+    imageSize: `${UDExSizeType}` = UDExSizeType.large;
 
   /**
     * Defines text size
@@ -91,7 +96,7 @@ class UDExQuote extends UI5Element {
     * @default "large"
   */
   @property()
-    textSize: `${UDExSizeType}` = "large";
+    textSize: `${UDExSizeType}` = UDExSizeType.large;
 
   /**
     * Defines image mask
@@ -100,7 +105,16 @@ class UDExQuote extends UI5Element {
     * @default "avatar"
   */
   @property()
-    mask: `${UDExMaskType}` = "avatar";
+    mask: `${UDExMaskType}` = UDExMaskType.avatar;
+
+  /**
+   * Defines image placement
+   *
+   * @public
+   * @default "left"
+   */
+  @property()
+    imagePlacement: `${UDExImagePlacement}` = UDExImagePlacement.left;
 }
 
 UDExQuote.define();

package/src/Search.ts

@@ -801,6 +801,7 @@ class UDExSearch extends UI5Element {
   }
 
   handleSubmitValue(): void {
+    this.handleDebounce.cancel();
     this.onClosePopover();
     this.fireDecoratorEvent("submit-search-value", { value: this.value });
   }

package/src/SearchableListBase.hbs

@@ -30,6 +30,7 @@
         role="{{roleForGroupList}}"
         accessible-role="{{accessibleRoleForList}}"
         class="udex-filter-menu__list"
+        ?tab-navigation-enabled="{{tabNavigationEnabled}}"
         ?controlled="{{isControlled}}"
         mode="{{mode}}">
         {{#each _filteredItems}}
@@ -43,7 +44,9 @@
                         supporting-text="{{this.item.supportingText}}"
                         ?disabled="{{this.item.disabled}}"
                         ?selected="{{this.item.selected}}"
-                        ?indeterminate="{{this.item.indeterminate}}">
+                        ?indeterminate="{{this.item.indeterminate}}"
+                        @ui5-first-icon-click="{{../fireFirstIconClickEvent}}"
+                        @ui5-second-icon-click="{{../fireSecondIconClickEvent}}">
                         {{#each this.groupItems}}
                             <udex-list-item
                                 role="{{../listItemRole}}"
@@ -51,7 +54,11 @@
                                 data-token-id="{{this._id}}"
                                 ?controlled="{{this.controlled}}"
                                 mode="{{this.mode}}"
+                                @ui5-first-icon-click="{{../fireFirstIconClickEvent}}"
+                                @ui5-second-icon-click="{{../fireSecondIconClickEvent}}"
                                 supporting-text="{{this.supportingText}}"
+                                additional-text="{{this.additionalText}}"
+                                additional-text-state="{{this.additionalTextState}}"
                                 ?divider="{{this.divider}}"
                                 ?disabled="{{this.disabled}}"
                                 ?selected="{{this.selected}}"
@@ -72,6 +79,8 @@
                         ?controlled="{{this.item.controlled}}"
                         ?disabled="{{this.item.disabled}}"
                         ?selected="{{this.item.selected}}"
+                        @ui5-first-icon-click="{{../fireFirstIconClickEvent}}"
+                        @ui5-second-icon-click="{{../fireSecondIconClickEvent}}"
                         ?indeterminate="{{this.item.indeterminate}}">
                         {{#each this.groupItems}}
                             <udex-list-item
@@ -80,6 +89,10 @@
                                 ?controlled="{{this.controlled}}"
                                 mode="{{this.mode}}"
                                 supporting-text="{{this.supportingText}}"
+                                additional-text="{{this.additionalText}}"
+                                additional-text-state="{{this.additionalTextState}}"
+                                @ui5-first-icon-click="{{../fireFirstIconClickEvent}}"
+                                @ui5-second-icon-click="{{../fireSecondIconClickEvent}}"
                                 ?divider="{{this.divider}}"
                                 ?disabled="{{this.disabled}}"
                                 ?selected="{{this.selected}}"
@@ -92,8 +105,12 @@
             {{else}}
                 <udex-list-item
                     role="none"
+                    @ui5-first-icon-click="{{../fireFirstIconClickEvent}}"
+                    @ui5-second-icon-click="{{../fireSecondIconClickEvent}}"
                     data-token-id="{{this.item._id}}"
                     supporting-text="{{this.item.supportingText}}"
+                    additional-text="{{this.item.additionalText}}"
+                    additional-text-state="{{this.item.additionalTextState}}"
                     ?disabled="{{this.item.disabled}}"
                     ?controlled="{{this.controlled}}"
                     ?divider="{{this.divider}}"

package/src/SearchableListBase.ts

@@ -36,6 +36,13 @@ export type UDExSearchableListBaseEvents = {
   "submit-search": UDExSearchableListBaseSubmitSearchEventDetail,
   "reset-search": void,
   "change-search": UDExSearchableListBaseChangeSearchEventDetail,
+  "first-icon-click": UDExSelectBoxIconClickEventDetail,
+  "second-icon-click": UDExSelectBoxIconClickEventDetail,
+}
+
+type UDExSelectBoxIconClickEventDetail = {
+  originalEvent: PointerEvent,
+  item: UDExItemFromList,
 }
 
 /**
@@ -85,8 +92,31 @@ export type UDExSearchableListBaseEvents = {
  */
 @event("change-search", { bubbles: true })
 
+/**
+ * Fired event when the user clicks on the first icon.
+ *
+ * @public
+ */
+@event("first-icon-click", { bubbles: true })
+
+/**
+ * Fired event when the user clicks on the second icon.
+ *
+ * @public
+ */
+@event("second-icon-click", { bubbles: true })
+
 class UDExSearchableListBase extends UI5Element {
   eventDetails!: UDExSearchableListBaseEvents;
+  /**
+   * Enables tab navigation for the list.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: Boolean })
+    tabNavigationEnabled?: boolean;
+
   /**
    * Allows control over the height.
    * @public
@@ -215,7 +245,7 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   onItemPress(e:CustomEvent) {
-    const dropdownItemId: string = e.detail.item.getAttribute("data-token-id");
+    const dropdownItemId: string = this.getDataTokenId(e);
     this.handleDropdownItemPress(dropdownItemId);
     this.fireSelectionChange(dropdownItemId);
   }
@@ -458,6 +488,22 @@ class UDExSearchableListBase extends UI5Element {
     }
   }
 
+  fireFirstIconClickEvent(e: CustomEvent): void {
+    this._fireIconClickEvent("first-icon-click", e);
+  }
+
+  fireSecondIconClickEvent(e: CustomEvent): void {
+    this._fireIconClickEvent("second-icon-click", e);
+  }
+
+  private _fireIconClickEvent(eventName: "first-icon-click" | "second-icon-click", e: CustomEvent): void {
+    const id = this.getDataTokenId(e);
+    this.fireDecoratorEvent(eventName, {
+      originalEvent: e.detail.originalEvent,
+      item: this.getItemFromList(id),
+    });
+  }
+
   getFlattenItemsArray(array: Array<UDExProcessedItem>): (UDExProcessedItem | UDExListItemBase)[] {
     return array.flatMap(item => {
       if (item.isGroup) {

package/src/SelectBox.ts

@@ -123,6 +123,13 @@ type UDExSelectBoxRemoveEventDetail = {
  */
 @event("show-more", { bubbles: true })
 
+/**
+ * Fired before the dropdown pane is opened.
+ *
+ * @public
+ */
+@event("before-open", { bubbles: true })
+
 class UDExSelectBox extends UDExSearchableListBase {
   eventDetails!: {
     "remove": UDExSelectBoxRemoveEventDetail,
@@ -480,6 +487,10 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleKeyDownDropdown(e: KeyboardEvent) {
+    if (this.tabNavigationEnabled) {
+      return;
+    }
+
     const isTabPrevPress = isTabPrevious(e) && !this._search;
     const isTabNextPress = isTabNext(e);
     const isEscapePress = isEscape(e);

package/src/SelectBoxItem.ts

@@ -2,6 +2,9 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import UDExListItemBase from "./ListItemBase.js";
+import property from "@ui5/webcomponents-base/decorators/property.js";
+import { UDExAdditionalTextState } from "./types/List.js";
+import UDExButton from "./Button.js";
 
 /**
  * @class
@@ -25,9 +28,45 @@ import UDExListItemBase from "./ListItemBase.js";
 @customElement({
   tag: "udex-select-box-item",
   renderer: litRender,
+  dependencies: [UDExButton],
 })
 
 class UDExSelectBoxItem extends UDExListItemBase {
+  /**
+   * Defines the additionalText, displayed at the end of the list item.
+   *
+   * @public
+   */
+  @property({ type: String })
+    additionalText?: string;
+
+  /**
+   * Defines the state of the additionalText.
+   *
+   * @default "None"
+   * @public
+   */
+  @property()
+    additionalTextState: `${UDExAdditionalTextState}` = UDExAdditionalTextState.None;
+
+  /**
+   * Slot for first icon.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: UDExButton })
+    firstIcon!: Array<UDExButton>;
+
+  /**
+   * Slot for second icon.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: UDExButton })
+    secondIcon!: Array<UDExButton>;
+
   /**
    * Slot for item content.
    *

package/src/StatusBadge.ts

@@ -10,6 +10,7 @@ import "@ui5/webcomponents-icons/dist/edit.js";
 import "@ui5/webcomponents-icons/dist/information.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import UDExStatusBadgeValueState from "./types/StatusBadgeValueState.js";
 import {
   STATUS_BADGE_TEXT,
   STATUS_BADGE_EDIT_TITLE,
@@ -40,14 +41,6 @@ export enum BadgeSize {
   XL = "XL",
 }
 
-export enum UDExStatusBadgeValueState {
-  Warning = "Warning",
-  Error = "Error",
-  Success = "Success",
-  Information = "Information",
-  Edit = "Edit"
-}
-
 /**
  * @class
  *

package/src/StepInputTemplate.tsx

@@ -56,6 +56,6 @@ export default function StepInputTemplate(this: UDExStepInput) {
         ></UDExControlButton>
       </>)
     }
-
+    <div class="hidden" aria-live="polite">{this._valuePrecisioned}</div>
   </div>);
 }