@sapudex/web-components 2.9.0 → 2.11.0

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

@@ -16,7 +16,7 @@
     </span>
 {{/if}}
 {{#if isListEmpty}}
-    <div class="udex-no-result"><span>{{getNoResultText}}&lrm;</span></div>
+    <div class="udex-no-result"><span>{{getNoResultText}}</span></div>
 {{else if busy}}
     <ui5-busy-indicator
         class="udex-busy-indicator"

package/src/SelectBox.hbs

@@ -15,7 +15,6 @@
                 ?displayonly="{{displayonly}}"
                 ?readonly="{{readonly}}"
                 aria-label="{{accInfo.ariaLabel}}"
-                aria-labelledby="{{accInfo.ariaLabelledBy}}"
                 aria-readonly="{{isReadOrDisplayOnly}}"
                 aria-disabled="{{disabled}}"
                 aria-haspopup="{{listboxRole}}"
@@ -23,16 +22,18 @@
                 aria-expanded="{{tokenizerExpanded}}"
                 aria-activedescendant>
                 {{#if label}}
-                    <span id="{{this._id}}-single-label" class="{{labelClass}}">
-                    {{label}}
-                    {{#if required}}
-                        *
-                    {{/if}}
-                </span>
+                    <span class="{{labelClass}}">
+                        {{label}}
+                        {{#if required}}
+                          *
+                        {{/if}}
+                        </span>
+                        <span class="hidden" id="{{this._id}}-single-label">{{accInfo.ariaLabel}}</span>
+                    </span>
                 {{/if}}
                 {{#if showSingleSelectedOption}}
                     <div class="udex-text-field__text-holder">
-                        <span class="udex-text-field__single-label">
+                        <span class="udex-text-field__single-label" aria-hidden="true">
                             {{{_singleSelectedOption}}}
                         </span>
                     </div>
@@ -66,15 +67,12 @@
                         aria-expanded="{{accessibilityAttributes.expanded}}"
                         aria-controls="{{accessibilityAttributes.controls}}"
                         aria-haspopup="{{accessibilityAttributes.hasPopup}}"
-                        aria-label="{{accessibilityAttributes.ariaLabel}}"
                         class="udex-text-field__trigger"
                         tabindex="{{triggerTabIndex}}"
                         @keydown="{{handleKeyDownTrigger}}"
                         @click="{{getHandleMultiSelectOpen}}">
-                            <ui5-icon
-                                name="navigation-down-arrow"
-                                accessible-name="{{iconAccessibleNameText}}">
-                            </ui5-icon>
+                        <ui5-icon name="navigation-down-arrow"></ui5-icon>
+                        <span class="hidden">{{accessibilityAttributes.ariaLabel}}</span>
                     </button>
                 {{/if}}
             </div>

package/src/SelectBox.ts

@@ -23,6 +23,7 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Token from "@ui5/webcomponents/dist/Token.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { getAllAccessibleNameRefTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
@@ -713,8 +714,7 @@ class UDExSelectBox extends UDExSearchableListBase {
 
   get accInfo() {
     return {
-      "ariaLabel": this.accessibleName || this.label || undefined,
-      "ariaLabelledBy": this.accessibleNameRef || undefined,
+      "ariaLabel": getAllAccessibleNameRefTexts(this) || this.accessibleName || this.label || undefined,
     };
   }
 

package/src/SocialMediaButton.ts

@@ -0,0 +1,152 @@
+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 jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
+import SocialMediaButtonTemplate from "./SocialMediaButtonTemplate.js";
+import UDExSocialMediaButtonType from "./types/SocialMediaButtonType.js";
+import type { LinkClickEventDetail } from "@ui5/webcomponents/dist/Link.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { SOCIAL_MEDIA_BUTTON } from "./generated/i18n/i18n-defaults.js";
+import { UDExTarget } from "./types/common.js";
+
+// Styles
+import SocialMediaButtonCss from "./generated/themes/SocialMediaButton.css.js";
+
+const baseIconsURL = "https://cdn.udex.services.sap.com/dds/design-tokens/assets/icons/";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-social-media-button</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/SocialMediaButton.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-social-media-button
+ * @public
+ */
+@customElement({
+  tag: "udex-social-media-button",
+  renderer: jsxRenderer,
+  styles: SocialMediaButtonCss,
+  template: SocialMediaButtonTemplate,
+})
+
+/**
+ * Triggered when the user clicks on an item.
+ * @public
+ */
+@event("click", { cancelable: true, bubbles: true })
+
+class UDExSocialMediaButton extends UI5Element {
+  eventDetails!: {
+    "click": LinkClickEventDetail,
+  };
+
+  /**
+   * Defines the type of Social Media Button.
+   * <br><br>
+   * Available options are:
+   * <ul>
+   * <li><code>facebook</code> - the button with Facebook icon</li>
+   * <li><code>instagram</code> - the button with Instagram icon</li>
+   * <li><code>linkedin</code> - the button with LinkedIn icon</li>
+   * <li><code>youtube</code> - the button with YouTube icon</li>
+   * <li><code>x</code> - the button with X icon</li>
+   * <li><code>mail</code> - the button with Instagram mail icon (default)</li>
+   * </ul>
+   *
+   * @public
+   */
+  @property()
+    type: `${UDExSocialMediaButtonType}` = UDExSocialMediaButtonType.email;
+
+  /**
+   * Defines the URL address for Social Media platform profile.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    url?: string;
+
+  /**
+   * Define the target of the Social Media Button link
+   * <b>Note:</b> Standard hyperlink behavior is supported.
+   * @public
+   * @default "_blank"
+   */
+  @property({ type: String })
+    target: `${UDExTarget}` = UDExTarget._blank;
+
+  /**
+   * Defines the accessible ARIA name of the component.
+   *
+   * @default "Social Media Button"
+   * @public
+   */
+  @property({ type: String })
+    accessibleName?: string;
+
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
+  private svgLoaded: boolean = false;
+
+  fireLinkClickEvent(e: CustomEvent<LinkClickEventDetail>): void {
+    const executeEvent = this.fireDecoratorEvent("click", e.detail);
+
+    if (!executeEvent) {
+      e.preventDefault();
+    }
+  }
+
+  onAfterRendering(): void {
+    this.fetchIconSvg();
+  }
+
+  async fetchIconSvg() {
+    if (this.svgLoaded) {
+      return;
+    }
+
+    try {
+      const response = await fetch(`${baseIconsURL}${this.type}.svg`);
+
+      if (!response.ok) {
+        console.warn("Failed to fetch SVG", response.statusText);
+        return;
+      }
+
+      const svgContent: string = await response.text();
+      this.updateSvgContent(svgContent);
+    } catch (error) {
+      console.warn("Failed to fetch SVG", error);
+    }
+  }
+
+  private updateSvgContent(svgContent: string): void {
+    const socialBtnEl = this.shadowRoot?.querySelector(".udex-social-media-button");
+    if (socialBtnEl) {
+      socialBtnEl.innerHTML = svgContent;
+      this.svgLoaded = true;
+    }
+  }
+
+  get buttonAccessibleName(): string {
+    return this.accessibleName || UDExSocialMediaButton.i18nBundle.getText(SOCIAL_MEDIA_BUTTON);
+  }
+}
+
+UDExSocialMediaButton.define();
+
+export default UDExSocialMediaButton;

package/src/SocialMediaButtonTemplate.tsx

@@ -0,0 +1,18 @@
+import type UDExSocialMediaButton from "./SocialMediaButton.js";
+import UDExLink from "./Link.js";
+
+export default function SocialMediaButtonTemplate(this: UDExSocialMediaButton) {
+  return (
+    <div
+      class="udex-social-media-button-wrapper">
+      <UDExLink
+        href={this.url}
+        target={this.target}
+        accessible-name={this.buttonAccessibleName}
+        onClick={this.fireLinkClickEvent}>
+        <div class={`udex-social-media-button udex-social-media-button-${this.type}`} title={this.buttonAccessibleName}></div>
+        <div class="hidden">{this.buttonAccessibleName}</div>
+      </UDExLink>
+    </div>
+  );
+}

package/src/StepInput.ts

@@ -20,6 +20,7 @@ import {
   isUpShift,
   isUpShiftCtrl,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getAllAccessibleNameRefTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { STEPINPUT_DEC_ICON_TITLE, STEPINPUT_INC_ICON_TITLE } from "./generated/i18n/i18n-defaults.js";
@@ -29,7 +30,7 @@ import StepInputTemplate from "./StepInputTemplate.js";
 // Styles
 import StepInputCss from "./generated/themes/StepInput.css.js";
 import type UDExControlButtonDesign from "./types/ControlButtonDesign.js";
-import type { UDExTextFieldKeydownEventDetail } from "./TextField.js";
+import type { AccInfo, UDExTextFieldKeydownEventDetail } from "./TextField.js";
 
 // Spin variables
 const INITIAL_WAIT_TIMEOUT = 500; // milliseconds
@@ -255,6 +256,12 @@ class UDExStepInput extends UI5Element {
     super();
   }
 
+  get accInfo(): AccInfo {
+    return {
+      "ariaLabel": getAllAccessibleNameRefTexts(this) || this.accessibleName || undefined,
+    };
+  }
+
   get controlButtonDesign(): UDExControlButtonDesign {
     return valueStateToControlButtonDesign[this.valueState];
   }

package/src/StepInputTemplate.tsx

@@ -9,8 +9,7 @@ export default function StepInputTemplate(this: UDExStepInput) {
       label={this.label}
       supporting-text={this.supportingText}
       value={this._valuePrecisioned}
-      aria-label={this.accessibleName}
-      aria-labelledby={this.accessibleNameRef}
+      aria-label={this.accInfo.ariaLabel}
       onFocusIn={this._onInputFocusIn}
       onFocusOut={this._onInputFocusOut}
       onKeydown={this._onkeydown}

package/src/TableRow.ts

@@ -2,6 +2,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import UDExTableRowBase from "./TableRowBase.js";
+import type UDExTableCell from "./TableCell.js";
 import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js";
 
 /**
@@ -39,9 +40,34 @@ class UDExTableRow extends UDExTableRowBase {
   @property({ type: Boolean })
     interactive?: boolean;
 
-  get isGroup() {
+  /**
+   * Defines highlighted the row.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    highlighted?: boolean;
+
+  onBeforeRendering(): void {
+    if (this.highlighted) {
+      this._setHighlightToCells();
+    }
+  }
+
+  _setHighlightToCells(): void {
+    this.cellsInRow.forEach(cell => {
+      cell._highlighted = true;
+    });
+  }
+
+  get isGroup(): boolean {
     return false;
   }
+
+  get cellsInRow(): Array<UDExTableCell> {
+    return this.getSlottedNodes<UDExTableCell>("cells");
+  }
 }
 
 UDExTableRow.define();

package/src/TextArea.ts

@@ -4,6 +4,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   READ_ONLY,
@@ -44,6 +45,12 @@ import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
   dependencies: [UDExStatusMessage],
 })
 
+/**
+ * Fires when the value of the textarea changes and the textarea loses focus.
+ * @public
+ */
+@event("change", { bubbles: true })
+
 class UDExTextArea extends UI5Element {
   eventDetails!: {
     "change": void,
@@ -236,10 +243,6 @@ class UDExTextArea extends UI5Element {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  getInputDomRef() {
-    return this.getDomRef()!.querySelector<HTMLTextAreaElement>("textarea")!;
-  }
-
   onBeforeRendering() {
     if (this.value && this.labelActiveClass === "") {
       this.labelActiveClass = this._labelActiveClassName;
@@ -254,8 +257,8 @@ class UDExTextArea extends UI5Element {
     this.handleGrowing();
   }
 
-  handleInput = (event: InputEvent) => {
-    this.value = (event.target as HTMLInputElement)?.value;
+  handleInput = (inputEvent: InputEvent) => {
+    this.value = (inputEvent.target as HTMLInputElement)?.value;
   };
 
   handleChange = () => {
@@ -313,6 +316,10 @@ class UDExTextArea extends UI5Element {
     this.active = false;
   };
 
+  getInputDomRef(): HTMLTextAreaElement {
+    return this.getDomRef()!.querySelector<HTMLTextAreaElement>("textarea")!;
+  }
+
   get ariaInvalid(): string | null {
     return this.valueState === UDExValueState.Error ? "true" : null;
   }
@@ -321,7 +328,7 @@ class UDExTextArea extends UI5Element {
     return this.valueState === UDExValueState.Error || this.valueState === UDExValueState.Warning || this.valueState === UDExValueState.Success;
   }
 
-  get valueStateTypeMappings() {
+  get valueStateTypeMappings(): Record<UDExValueState, string> {
     return {
       [UDExValueState.Success]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
       [UDExValueState.Standard]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_STANDARD),

package/src/TextField.hbs

@@ -31,28 +31,28 @@
          aria-describedby="{{accInfo.ariaDescribedBy}}"
          aria-haspopup="{{accInfo.ariaHasPopup}}"
          aria-label="{{accInfo.ariaLabel}}"
-         aria-labelledby="{{accInfo.ariaLabelledBy}}"
          part="textfield-input"
          min="{{min}}"
          max="{{max}}"
          step="{{step}}"
       />
-
       {{#if icon}}
         <udex-control-button
-          accessible-name="{{accessibleIconName}}"
+          accessible-name="{{buttonAccessibleName}}"
+          accessible-description="{{buttonAccessibleDescription}}"
           tooltip="{{showButtonTooltip}}"
           ?active="{{active}}"
           ?disabled="{{disabled}}"
           ?readonly="{{readonly}}"
+          ?_is-combobox-role="{{_isComboboxRole}}"
           ?non-interactive="{{readonly}}"
           design="{{valueState}}"
           icon="{{icon}}"
           @click="{{handleIconClick}}"
           part="textfield-control-btn"
           size="Large"
-          class="udex-text-field_icon-container"
-        ></udex-control-button>
+          class="udex-text-field_icon-container">
+        </udex-control-button>
       {{/if}}
   </div>