@sapudex/web-components 2.8.0 → 2.10.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.8.0",
+  "version": "2.10.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1306,9 +1306,19 @@
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-event-ribbon</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/EventRibbon.js\";</code>\n---\n",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "custom-event-logo",
+              "description": "Defines the custom event logo image.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
+            {
+              "name": "custom-event-logo-alt-text",
+              "description": "Defines the alt text of the custom event logo image.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
             {
               "name": "event-logo",
-              "description": "Defines the text of the event logo.",
+              "description": "Defines the event logo image.",
               "value": {
                 "type": "\"sapphire\" | \"sapphire-stacked\" | \"connect\" | \"connect-stacked\" | \"teched\" | \"teched-stacked\" | \"now\"",
                 "default": "\"\""
@@ -1357,9 +1367,19 @@
           "events": [],
           "js": {
             "properties": [
+              {
+                "name": "custom-event-logo",
+                "description": "Defines the custom event logo image.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "custom-event-logo-alt-text",
+                "description": "Defines the alt text of the custom event logo image.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "event-logo",
-                "description": "Defines the text of the event logo.",
+                "description": "Defines the event logo image.",
                 "value": {
                   "type": "\"sapphire\" | \"sapphire-stacked\" | \"connect\" | \"connect-stacked\" | \"teched\" | \"teched-stacked\" | \"now\""
                 }
@@ -3879,17 +3899,17 @@
             {
               "name": "body-overflow",
               "description": "Defines overflow style for the body after clicking mobile menu opener button",
-              "value": { "type": "boolean", "default": "\"\"" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "show-search-by-default",
               "description": "Defines the visibility of the Search by default.",
-              "value": { "type": "boolean", "default": "\"\"" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "sticky-position",
               "description": "Defines sticky position for component",
-              "value": { "type": "boolean", "default": "\"\"" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "co-brand-image",
@@ -3946,6 +3966,11 @@
               "description": "Defines an accessible name for close icon for the search bar",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "mobile-close-button-accessible-name",
+              "description": "Defines an accessible name for the close mobile menu button",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "homepage-aria-label",
               "description": "Defines an aria label for the homepage link",
@@ -4112,6 +4137,11 @@
                 "description": "Defines an accessible name for close icon for the search bar",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "mobile-close-button-accessible-name",
+                "description": "Defines an accessible name for the close mobile menu button",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "homepage-aria-label",
                 "description": "Defines an aria label for the homepage link",
@@ -6624,6 +6654,81 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
+        {
+          "name": "udex-social-media-button",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-social-media-button</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SocialMediaButton.js\";</code>\n---\n\n\n### **Events:**\n - **click** - Triggered when the user clicks on an item.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "type",
+              "description": "Defines the type of Social Media Button.\n<br><br>\nAvailable options are:\n<ul>\n<li><code>facebook</code> - the button with Facebook icon</li>\n<li><code>instagram</code> - the button with Instagram icon</li>\n<li><code>linkedin</code> - the button with LinkedIn icon</li>\n<li><code>youtube</code> - the button with YouTube icon</li>\n<li><code>x</code> - the button with X icon</li>\n<li><code>mail</code> - the button with Instagram mail icon (default)</li>\n</ul>",
+              "value": {
+                "type": "\"facebook\" | \"instagram\" | \"linkedin\" | \"email\" | \"youtube\" | \"x\""
+              }
+            },
+            {
+              "name": "url",
+              "description": "Defines the URL address for Social Media platform profile.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
+            {
+              "name": "target",
+              "description": "Define the target of the Social Media Button link\n<b>Note:</b> Standard hyperlink behavior is supported.",
+              "value": {
+                "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                "default": "\"_blank\""
+              }
+            },
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible ARIA name of the component.",
+              "value": {
+                "type": "string | undefined",
+                "default": "\"Social Media Button\""
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "click",
+              "description": "Triggered when the user clicks on an item."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "type",
+                "description": "Defines the type of Social Media Button.\n<br><br>\nAvailable options are:\n<ul>\n<li><code>facebook</code> - the button with Facebook icon</li>\n<li><code>instagram</code> - the button with Instagram icon</li>\n<li><code>linkedin</code> - the button with LinkedIn icon</li>\n<li><code>youtube</code> - the button with YouTube icon</li>\n<li><code>x</code> - the button with X icon</li>\n<li><code>mail</code> - the button with Instagram mail icon (default)</li>\n</ul>",
+                "value": {
+                  "type": "\"facebook\" | \"instagram\" | \"linkedin\" | \"email\" | \"youtube\" | \"x\""
+                }
+              },
+              {
+                "name": "url",
+                "description": "Defines the URL address for Social Media platform profile.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "target",
+                "description": "Define the target of the Social Media Button link\n<b>Note:</b> Standard hyperlink behavior is supported.",
+                "value": {
+                  "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
+                }
+              },
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible ARIA name of the component.",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": [
+              {
+                "name": "click",
+                "description": "Triggered when the user clicks on an item."
+              }
+            ]
+          }
+        },
         {
           "name": "udex-status-badge",
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-status-badge</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/StatusBadge.js\";</code>\n---\n",
@@ -7486,6 +7591,11 @@
               "name": "interactive",
               "description": "Defines the interactive state of the row.",
               "value": { "type": "boolean | undefined", "default": "false" }
+            },
+            {
+              "name": "highlighted",
+              "description": "Defines highlighted the row.",
+              "value": { "type": "boolean | undefined", "default": "false" }
             }
           ],
           "slots": [
@@ -7501,6 +7611,11 @@
                 "name": "interactive",
                 "description": "Defines the interactive state of the row.",
                 "value": { "type": "boolean | undefined" }
+              },
+              {
+                "name": "highlighted",
+                "description": "Defines highlighted the row.",
+                "value": { "type": "boolean | undefined" }
               }
             ],
             "events": []
@@ -7758,7 +7873,7 @@
         },
         {
           "name": "udex-textarea",
-          "description": "\n---\n",
+          "description": "\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the textarea changes and the textarea loses focus.",
           "doc-url": "",
           "attributes": [
             {
@@ -7832,7 +7947,12 @@
               "value": { "type": "string", "default": "\"\"" }
             }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "change",
+              "description": "Fires when the value of the textarea changes and the textarea loses focus."
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -7906,7 +8026,12 @@
                 "value": { "type": "string" }
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "change",
+                "description": "Fires when the value of the textarea changes and the textarea loses focus."
+              }
+            ]
           }
         },
         {

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.8.0",
+  "version": "2.10.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -41,6 +41,7 @@
     "@ui5/webcomponents-base": "2.14.0",
     "@ui5/webcomponents-fiori": "2.14.0",
     "@ui5/webcomponents-icons": "2.14.0",
+    "@ui5/webcomponents-localization": "2.14.0",
     "@ui5/webcomponents-theming": "2.14.0",
     "@vimeo/player": "^2.24.0",
     "video.js": "8.22.0"

package/src/Assets.ts

@@ -1,4 +1,5 @@
 import "@ui5/webcomponents-theming/dist/Assets.js"; // Theming
+import "@ui5/webcomponents-localization/dist/Assets.js";
 
 // own web-components package assets
 import "./generated/json-imports/Themes.js";

package/src/CountrySelector.hbs

@@ -17,13 +17,6 @@
         @keydown="{{handleKeyDownDropdown}}">
         {{searchableList}}
     </udex-dropdown>
-    {{#if supportingText}}
-        <udex-status-message
-            ?disabled="{{disabled}}"
-            supporting-text="{{supportingText}}"
-            value-state="{{valueState}}">
-        </udex-status-message>
-    {{/if}}
 </div>
 
 {{#*inline "trigger"}}
@@ -45,12 +38,12 @@
             class="udex-country-selector__text"
             value="{{selectedCountryName}}"
             value-state="{{valueState}}"
+            supporting-text="{{supportingText}}"
             direction="left"
             aria-label="{{effectiveAriaLabel}}"
             accessible-name="{{supportingText}}"
             accessible-name-ref="{{accessibleNameRef}}"
             aria-controls="{{ariaControls}}"
-            role="combobox"
             aria-haspopup="true"
             aria-expanded="{{_open}}"
             ?required="{{required}}"
@@ -61,7 +54,8 @@
             @mousedown="{{handleInputMouseDown}}"
             icon="{{triggerIcon}}"
             accessible-icon-name="{{effectiveAriaLabel}}"
-            maxlength="0">
+            maxlength="0"
+            _is-combobox-role>
         </udex-text-field>
     </div>
 {{/inline}}

package/src/CountrySelector.ts

@@ -348,7 +348,7 @@ class UDExCountrySelector extends UDExSearchableListBase {
   }
 
   handleCloseSearch() {
-    this.getInput()?.shadowRoot!.querySelector<Button>("[udex-control-button]")?.focus();
+    this.getTextField()?.shadowRoot!.querySelector<Button>("[udex-control-button]")?.focus();
   }
 
   handleItemPress(e: CustomEvent) {
@@ -373,6 +373,7 @@ class UDExCountrySelector extends UDExSearchableListBase {
 
   handleTriggerClick() {
     if (!this.isOpenerDisabled) {
+      this._dropdown.opener = this.getTextField()._inputHolder;
       this._dropdown.open = !this._dropdown.open;
     }
   }
@@ -456,8 +457,10 @@ class UDExCountrySelector extends UDExSearchableListBase {
     return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName) || "None";
   }
 
-  get triggerIcon(): string {
-    return this._open ? "navigation-up-arrow" : "navigation-down-arrow";
+  get triggerIcon(): string | undefined {
+    if (!this.displayonly) {
+      return this._open ? "navigation-up-arrow" : "navigation-down-arrow";
+    }
   }
 
   get countrySelectorClasses(): string {
@@ -504,7 +507,7 @@ class UDExCountrySelector extends UDExSearchableListBase {
     return this.shadowRoot!.querySelector<UDExDropdown>("[udex-dropdown]")!;
   }
 
-  getInput(): UDExTextField {
+  getTextField(): UDExTextField {
     return this.shadowRoot!.querySelector<UDExTextField>("[udex-text-field]")!;
   }
 

package/src/DatePicker.hbs

@@ -1,28 +1,19 @@
-<div
-    class="udex-date-picker__container">
-    <udex-text-field
-        class="udex-date-picker__input"
-        _aria-has-popup="grid"
-        icon="appointment-2"
-        value="{{value}}"
-        label="{{label}}"
-        accessible-name="{{dateAccessibleName}}"
-        accessible-name-ref="{{accessibleNameRef}}"
-        accessible-icon-name="{{accessibleIconName}}"
-        ?disabled="{{disabled}}"
-        ?required="{{required}}"
-        ?readonly="{{readonly}}"
-        @ui5-click-icon="{{handleInputClick}}"
-        @ui5-change="{{_onInputChange}}"
-        value-state="{{valueState}}">
-    </udex-text-field>
-    {{#if supportingText}}
-        <udex-status-message
-            ?disabled="{{disabled}}"
-            supporting-text="{{supportingText}}"
-            value-state="{{valueState}}">
-        </udex-status-message>
-    {{/if}}
-</div>
+<udex-text-field
+    class="udex-date-picker__input"
+    _aria-has-popup="grid"
+    icon="appointment-2"
+    value="{{value}}"
+    label="{{label}}"
+    accessible-name="{{dateAccessibleName}}"
+    accessible-name-ref="{{accessibleNameRef}}"
+    accessible-icon-name="{{accessibleIconName}}"
+    ?disabled="{{disabled}}"
+    ?required="{{required}}"
+    ?readonly="{{readonly}}"
+    @ui5-click-icon="{{handleInputClick}}"
+    @ui5-change="{{_onInputChange}}"
+    value-state="{{valueState}}"
+    supporting-text="{{supportingText}}">
+</udex-text-field>
 
 {{>include "./DatePickerPopover.hbs"}}

package/src/DatePicker.ts

@@ -225,7 +225,7 @@ class UDExDatePicker extends DateComponentBase {
    * @private
    */
   get _dropdownTrigger(): UDExTextField {
-    return this.shadowRoot!.querySelector<UDExTextField>(".udex-date-picker__input")!;
+    return this.shadowRoot!.querySelector<UDExTextField>("[udex-text-field]")!;
   }
 
   _afterDropdownClose(): void {
@@ -248,7 +248,7 @@ class UDExDatePicker extends DateComponentBase {
   _openRespPopover(): void {
     this._dropdownTrigger.active = true;
     this.responsivePopover = this._getResponsePopover();
-    this.responsivePopover.opener = this._dropdownTrigger;
+    this.responsivePopover.opener = this._dropdownTrigger._inputHolder;
     this.responsivePopover.open = true;
   }
 

package/src/EventRibbon.ts

@@ -40,7 +40,25 @@ import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 
 class UDExEventRibbon extends UI5Element {
   /**
-   * Defines the text of the event logo.
+   * Defines the custom event logo image.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    customEventLogo?: string;
+
+  /**
+   * Defines the alt text of the custom event logo image.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    customEventLogoAltText?: string;
+
+  /**
+   * Defines the event logo image.
    *
    * @default ""
    * @public
@@ -118,8 +136,9 @@ class UDExEventRibbon extends UI5Element {
 
     this.style.setProperty("--udex-event-ribbon-background-color", backgroundColor);
     this.style.setProperty("--udex-event-ribbon-hover-background-color", backgroundColorHover);
-
-    this.style.setProperty("--udex-event-ribbon-background-image", `url("${this.backgroundImage}")`);
+    if (this.backgroundImage) {
+      this.style.setProperty("--udex-event-ribbon-background-image", `url("${this.backgroundImage}")`);
+    }
   }
 
   handleKeyDown(e: KeyboardEvent): void {
@@ -130,11 +149,11 @@ class UDExEventRibbon extends UI5Element {
   }
 
   get eventLogoAlt(): string {
-    return eventLogoText[this.eventLogo];
+    return this.customEventLogoAltText || eventLogoText[this.eventLogo];
   }
 
   get eventLogoPath(): string {
-    return `https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/event-ribbon-logo-${this.eventLogo}.svg`;
+    return this.customEventLogo || `https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/event-ribbon-logo-${this.eventLogo}.svg`;
   }
 }
 

package/src/EventRibbonTemplate.tsx

@@ -2,16 +2,27 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import type UDExEventRibbon from "./EventRibbon.js";
 
 export default function EventRibbonTemplate(this: UDExEventRibbon) {
+  const rootClass = "udex-event-ribbon";
   const { text, target, url } = this._eventLink;
   return (
-    <a onKeyDown={this.handleKeyDown} role="banner" aria-label={this.eventText} class= {{ "udex-event-ribbon__container": true, "udex-event-ribbon__container-with-background-image": this.backgroundImage }} target={target} href={url} title={text}>
-      <div class="udex-event-ribbon__logo">
-        <img src={this.eventLogoPath} alt={this.eventLogoAlt}/>
+    <a
+      onKeyDown={this.handleKeyDown}
+      role="banner"
+      aria-label={this.eventText}
+      class={{
+        [`${rootClass}__container`]: true,
+        [`${rootClass}__container-with-background-image`]: this.backgroundImage
+      }}
+      target={target}
+      href={url}
+      title={text}>
+      <div class={`${rootClass}__logo`}>
+        <img class={`${rootClass}__logo-img`} src={this.eventLogoPath} alt={this.eventLogoAlt}/>
       </div>
-      {this.eventText && <p class="udex-event-ribbon__text">{this.eventText}</p>}
-      <div class="udex-event-ribbon__link-container">
+      {this.eventText && <p class={`${rootClass}__text`}>{this.eventText}</p>}
+      <div class={`${rootClass}__link-container`}>
         {this.eventLinkIcon && <Icon name={this.eventLinkIcon}></Icon>}
-        <span>{text}</span>
+        <span class={`${rootClass}__link-text`}>{text}</span>
       </div>
     </a>
   );

package/src/FilterMenu.hbs

@@ -1,39 +1,39 @@
 <div>
     <button
-    id="filterMenuTrigger"
-    @click="{{handleTriggerClick}}"
-    @keydown="{{handleTriggerKeydown}}"
-    aria-label="{{triggerButtonAccessibleName}}"
-    aria-labelledby="{{accessibleNameRef}}"
-    aria-expanded="{{_open}}"
-    aria-haspopup="true"
-    role="{{triggerAccessibleRole}}"
-    aria-controls="{{this._id}}_udex-filter-menu-dropdown"
-    ?disabled="{{disabled}}"
-    class="udex-filter-menu__trigger"
-    tabindex="0">
-    {{#if hasFilterNamePrefix}}
-        <span class="udex-filter-menu__trigger-prefix">{{filterNamePrefix}}</span>
-    {{/if}}
-    <span class="udex-filter-menu__trigger-wrap" ?disabled="{{disabled}}">
-        <span class="udex-filter-menu__trigger-name">{{filterName}}</span>
-        {{#if badgeValue}}
-            <udex-badge
-                class="udex-filter-menu__badge"
-                type="Number"
-                design="Info"
-                size="Small">
-                {{badgeValue}}
-            </udex-badge>
+        id="filterMenuTrigger"
+        @click="{{handleTriggerClick}}"
+        @keydown="{{handleTriggerKeydown}}"
+        aria-label="{{triggerButtonAccessibleName}}"
+        aria-labelledby="{{accessibleNameRef}}"
+        aria-expanded="{{_open}}"
+        aria-haspopup="true"
+        role="{{triggerAccessibleRole}}"
+        aria-controls="{{this._id}}_udex-filter-menu-dropdown"
+        ?disabled="{{disabled}}"
+        class="udex-filter-menu__trigger"
+        tabindex="0">
+        {{#if hasFilterNamePrefix}}
+            <span class="udex-filter-menu__trigger-prefix">{{filterNamePrefix}}</span>
         {{/if}}
-        <ui5-icon
-            class="udex-filter-menu__trigger-icon"
-            name="navigation-down-arrow"
-            mode="Decorative"
-            accessible-name="{{_iconAccessibleNameText}}">
-        </ui5-icon>
-    </span>
-</button>
+        <span class="udex-filter-menu__trigger-wrap" ?disabled="{{disabled}}">
+            <span class="udex-filter-menu__trigger-name">{{filterName}}</span>
+            {{#if badgeValue}}
+                <udex-badge
+                    class="udex-filter-menu__badge"
+                    type="Number"
+                    design="Info"
+                    size="Small">
+                    {{badgeValue}}
+                </udex-badge>
+            {{/if}}
+            <ui5-icon
+                class="udex-filter-menu__trigger-icon"
+                name="navigation-down-arrow"
+                mode="Decorative"
+                accessible-name="{{_iconAccessibleNameText}}">
+            </ui5-icon>
+        </span>
+    </button>
     <ui5-popover
         id="{{this._id}}_udex-filter-menu-dropdown"
         hide-arrow
@@ -60,8 +60,6 @@
     </ui5-popover>
 </div>
 
-
-
 {{#*inline "buttons"}}
     {{#unless hideActionBar}}
         <div class="udex-filter-menu__footer" slot="footer" name="footer">
@@ -70,7 +68,6 @@
                     class="udex-filter-menu__result-btn"
                     size="Medium"
                     design="Primary"
-                    ?disabled="{{disabledButtons}}"
                     @keydown="{{handleKeyDownResultBtn}}"
                     @click="{{handleResult}}">
                     {{getResultLabelText}}
@@ -82,7 +79,6 @@
                     size="Medium"
                     design="Tertiary"
                     @keydown="{{handleKeyDownResetBtn}}"
-                    ?disabled="{{disabledButtons}}"
                     @click="{{handleReset}}">
                     {{getResetLabelText}}
                 </udex-button>