@sapudex/web-components 2.3.0 → 2.4.1

package/dist/vscode.html-custom-data.json

@@ -5,6 +5,11 @@
       "name": "udex-accordion",
       "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-accordion</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Accordion.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **toggle-items** - Triggered when the user clicks on the Expand/Collapse All button..\n\n### **Slots:**\n - **default** - Slot for accordion items.",
       "attributes": [
+        {
+          "name": "hide-expand-button",
+          "description": "Defines if expandAll button should be displayed.",
+          "values": []
+        },
         {
           "name": "headline",
           "description": "Defines the headline text of the accordion component.",
@@ -264,6 +269,84 @@
       ],
       "references": []
     },
+    {
+      "name": "udex-contact",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-contact</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Contact.js\";</code>\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Slot for list items.",
+      "attributes": [
+        {
+          "name": "button-text",
+          "description": "Defines the <code>text</code> for the contact button.",
+          "values": []
+        },
+        {
+          "name": "contact-numbers",
+          "description": "List of the contact numbers",
+          "values": []
+        },
+        {
+          "name": "local-country-numbers-link",
+          "description": "Defines the local country numbers link's href",
+          "values": []
+        },
+        {
+          "name": "prevent-initial-focus",
+          "description": "Defines if the initial focus should be prevented.",
+          "values": []
+        },
+        {
+          "name": "prevent-focus-restore",
+          "description": "Defines if the focus should be returned to the previously focused element.",
+          "values": []
+        },
+        {
+          "name": "accessible-name",
+          "description": "Defines the accessible name of the component.",
+          "values": []
+        },
+        {
+          "name": "accessible-name-ref",
+          "description": "Defines the IDs of the elements that label the component.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "udex-contact-item",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-contact-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ContactItem.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **item-click** - Fires when item is clicked\n\n### **Slots:**\n - **default** - Slot for the item content.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "Defines the label for the item.",
+          "values": []
+        },
+        {
+          "name": "href",
+          "description": "Defines the href for the item.",
+          "values": []
+        },
+        {
+          "name": "icon",
+          "description": "Defines the icon name for the item.",
+          "values": [
+            { "name": "Email" },
+            { "name": "Headset" },
+            { "name": "Discussion-2" }
+          ]
+        },
+        {
+          "name": "target",
+          "description": "Defines target for the item",
+          "values": [
+            { "name": "_blank" },
+            { "name": "_parent" },
+            { "name": "_self" },
+            { "name": "_top" }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "udex-control-button",
       "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-control-button</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ControlButton.js\";</code>\n\n\n---\n\n\n",
@@ -549,26 +632,7 @@
         {
           "name": "background-color-scheme",
           "description": "Defines the solid background color.",
-          "values": [
-            { "name": "Mango1" },
-            { "name": "Mango2" },
-            { "name": "Mango3" },
-            { "name": "Mango4" },
-            { "name": "Red1" },
-            { "name": "Red2" },
-            { "name": "Red3" },
-            { "name": "Red4" },
-            { "name": "Raspberry1" },
-            { "name": "Raspberry2" },
-            { "name": "Raspberry3" },
-            { "name": "Raspberry4" },
-            { "name": "Pink1" },
-            { "name": "Pink2" },
-            { "name": "Pink3" },
-            { "name": "Pink4" },
-            { "name": "... 19 more ..." },
-            { "name": "Grey4" }
-          ]
+          "values": [{ "name": "UDExEventRibbonColorSheme" }]
         },
         {
           "name": "background-image",
@@ -1120,7 +1184,7 @@
     },
     {
       "name": "udex-list",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\\e\n\n<h3>Usage</h3>\n\nFor the <code>udex-list</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/List.js\";</code>\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Slot for list items.",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-list</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/List.js\";</code>\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Slot for list items.",
       "attributes": [
         {
           "name": "accessible-role",
@@ -1633,11 +1697,6 @@
           "description": "Defines a title for sub menu items",
           "values": []
         },
-        {
-          "name": "text",
-          "description": "Defines the text of item.",
-          "values": []
-        },
         {
           "name": "selected",
           "description": "Defines the selected item.",
@@ -1692,6 +1751,11 @@
           "name": "hide-active-border",
           "description": "Hide active border for item",
           "values": []
+        },
+        {
+          "name": "label",
+          "description": "Defines the label for analytics",
+          "values": []
         }
       ],
       "references": []

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.3.0",
+  "version": "2.4.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -11,6 +11,11 @@
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-accordion</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Accordion.js\";</code>\n---\n\n\n### **Events:**\n - **toggle-items** - Triggered when the user clicks on the Expand/Collapse All button..\n\n### **Slots:**\n - **default** - Slot for accordion items.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "hide-expand-button",
+              "description": "Defines if expandAll button should be displayed.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "headline",
               "description": "Defines the headline text of the accordion component.",
@@ -28,6 +33,11 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "hide-expand-button",
+                "description": "Defines if expandAll button should be displayed.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "headline",
                 "description": "Defines the headline text of the accordion component.",
@@ -557,6 +567,166 @@
             "events": []
           }
         },
+        {
+          "name": "udex-contact",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-contact</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Contact.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Slot for list items.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "button-text",
+              "description": "Defines the <code>text</code> for the contact button.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "contact-numbers",
+              "description": "List of the contact numbers",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "local-country-numbers-link",
+              "description": "Defines the local country numbers link's href",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "prevent-initial-focus",
+              "description": "Defines if the initial focus should be prevented.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "prevent-focus-restore",
+              "description": "Defines if the focus should be returned to the previously focused element.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible name of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-name-ref",
+              "description": "Defines the IDs of the elements that label the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
+          "slots": [
+            { "name": "default", "description": "Slot for list items." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "button-text",
+                "description": "Defines the <code>text</code> for the contact button.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "contact-numbers",
+                "description": "List of the contact numbers",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "local-country-numbers-link",
+                "description": "Defines the local country numbers link's href",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "prevent-initial-focus",
+                "description": "Defines if the initial focus should be prevented.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "prevent-focus-restore",
+                "description": "Defines if the focus should be returned to the previously focused element.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible name of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-name-ref",
+                "description": "Defines the IDs of the elements that label the component.",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "udex-contact-item",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-contact-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ContactItem.js\";</code>\n---\n\n\n### **Events:**\n - **item-click** - Fires when item is clicked\n\n### **Slots:**\n - **default** - Slot for the item content.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "Defines the label for the item.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "href",
+              "description": "Defines the href for the item.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "icon",
+              "description": "Defines the icon name for the item.",
+              "value": {
+                "type": "\"Email\" | \"Headset\" | \"Discussion-2\" | undefined"
+              }
+            },
+            {
+              "name": "target",
+              "description": "Defines target for the item",
+              "value": {
+                "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
+              }
+            }
+          ],
+          "slots": [
+            { "name": "default", "description": "Slot for the item content." }
+          ],
+          "events": [
+            {
+              "name": "item-click",
+              "description": "Fires when item is clicked"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "Defines the label for the item.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "href",
+                "description": "Defines the href for the item.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "icon",
+                "description": "Defines the icon name for the item.",
+                "value": {
+                  "type": "\"Email\" | \"Headset\" | \"Discussion-2\" | undefined"
+                }
+              },
+              {
+                "name": "target",
+                "description": "Defines target for the item",
+                "value": {
+                  "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
+                }
+              }
+            ],
+            "events": [
+              {
+                "name": "item-click",
+                "description": "Fires when item is clicked"
+              }
+            ]
+          }
+        },
         {
           "name": "udex-control-button",
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-control-button</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ControlButton.js\";</code>\n---\n",
@@ -1156,7 +1326,7 @@
               "name": "background-color-scheme",
               "description": "Defines the solid background color.",
               "value": {
-                "type": "\"Mango1\" | \"Mango2\" | \"Mango3\" | \"Mango4\" | \"Red1\" | \"Red2\" | \"Red3\" | \"Red4\" | \"Raspberry1\" | \"Raspberry2\" | \"Raspberry3\" | \"Raspberry4\" | \"Pink1\" | \"Pink2\" | \"Pink3\" | \"Pink4\" | ... 19 more ... | \"Grey4\"",
+                "type": "UDExEventRibbonColorSheme",
                 "default": "\"Blue\""
               }
             },
@@ -1199,9 +1369,7 @@
               {
                 "name": "background-color-scheme",
                 "description": "Defines the solid background color.",
-                "value": {
-                  "type": "\"Mango1\" | \"Mango2\" | \"Mango3\" | \"Mango4\" | \"Red1\" | \"Red2\" | \"Red3\" | \"Red4\" | \"Raspberry1\" | \"Raspberry2\" | \"Raspberry3\" | \"Raspberry4\" | \"Pink1\" | \"Pink2\" | \"Pink3\" | \"Pink4\" | ... 19 more ... | \"Grey4\""
-                }
+                "value": { "type": "UDExEventRibbonColorSheme" }
               },
               {
                 "name": "background-image",
@@ -2458,7 +2626,7 @@
         },
         {
           "name": "udex-list",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\\e\n\n<h3>Usage</h3>\n\nFor the <code>udex-list</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/List.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Slot for list items.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-list</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/List.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Slot for list items.",
           "doc-url": "",
           "attributes": [
             {
@@ -3210,11 +3378,6 @@
               "description": "Defines a title for sub menu items",
               "value": { "type": "string", "default": "\"\"" }
             },
-            {
-              "name": "text",
-              "description": "Defines the text of item.",
-              "value": { "type": "string", "default": "\"\"" }
-            },
             {
               "name": "selected",
               "description": "Defines the selected item.",
@@ -3269,6 +3432,11 @@
               "name": "hide-active-border",
               "description": "Hide active border for item",
               "value": { "type": "boolean", "default": "\"\"" }
+            },
+            {
+              "name": "label",
+              "description": "Defines the label for analytics",
+              "value": { "type": "string" }
             }
           ],
           "slots": [
@@ -3301,11 +3469,6 @@
                 "description": "Defines a title for sub menu items",
                 "value": { "type": "string" }
               },
-              {
-                "name": "text",
-                "description": "Defines the text of item.",
-                "value": { "type": "string" }
-              },
               {
                 "name": "selected",
                 "description": "Defines the selected item.",
@@ -3360,6 +3523,11 @@
                 "name": "hide-active-border",
                 "description": "Hide active border for item",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "label",
+                "description": "Defines the label for analytics",
+                "value": { "type": "string" }
               }
             ],
             "events": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -43,7 +43,6 @@
     "@ui5/webcomponents-icons": "2.12.0",
     "@ui5/webcomponents-theming": "2.12.0",
     "@vimeo/player": "^2.24.0",
-    "cypress-real-events": "^1.14.0",
     "video.js": "8.22.0"
   },
   "devDependencies": {
@@ -53,6 +52,7 @@
     "chromedriver": "138.0.1",
     "cross-env": "^7.0.3",
     "cypress": "^14.3.3",
+    "cypress-real-events": "^1.14.0",
     "typescript": "^5.6.2",
     "wdio-chromedriver-service": "^8.1.1",
     "webdriverio": "^8.16.12"

package/src/Accordion.hbs

@@ -3,15 +3,19 @@
     @keydown="{{keydownHandler}}"
     @ui5-accordion-item-focus="{{itemFocusHandler}}">
     <div class="udex-accordion__head" part="head">
-        <h3 class="udex-accordion__headline">{{headlineText}}</h3>
-        <udex-button class="udex-accordion__btn"
-            size="Large"
-            design="Tertiary"
-            @click="{{toggleAllHandler}}"
-            @keydown="{{toggleKeyAllHandler}}"
-            accessible-name="{{toggleAllText}}">
-            {{toggleAllText}}
-        </udex-button>
+        {{#if headline}}
+          <h3 class="udex-accordion__headline">{{headline}}</h3>
+        {{/if}}
+        {{#unless hideExpandButton}}
+          <udex-button class="udex-accordion__btn"
+              size="Large"
+              design="Tertiary"
+              @click="{{toggleAllHandler}}"
+              @keydown="{{toggleKeyAllHandler}}"
+              accessible-name="{{toggleAllText}}">
+              {{toggleAllText}}
+          </udex-button>
+        {{/unless}}
     </div>
     <div class="udex-accordion__content">
         {{#each items}}

package/src/Accordion.ts

@@ -65,6 +65,13 @@ class UDExAccordion extends UI5Element {
    * @private
    */
   @property({ type: Boolean, noAttribute: true }) _allExpanded!: boolean;
+  /**
+   * Defines if expandAll button should be displayed.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean }) hideExpandButton!: boolean;
 
   /**
    * Defines direction of the accordion component.
@@ -118,10 +125,6 @@ class UDExAccordion extends UI5Element {
     });
   }
 
-  get headlineText(): string {
-    return this.headline ? this.headline : "Default headline";
-  }
-
   toggleAllHandler(e: Event) {
     e.preventDefault();
     this._allExpanded = !this._allExpanded;

package/src/Assets.ts

@@ -10,3 +10,32 @@ import variablesOverwrite from "./AssetsVariables.js";
 const customThemeLoader = () => Promise.resolve(variablesOverwrite);
 
 registerCustomThemePropertiesLoader("@ui5/webcomponents", "sap_glow", customThemeLoader);
+
+(function checkThemeCSSLink() {
+  if (typeof document === "undefined") { return; }
+
+  const runCheck = () => {
+    const cssLoaded = Array.from(document.styleSheets).some(sheet => {
+      try {
+        if (sheet.href && sheet.href.includes("css_variables.css")) { return true; }
+        return Array.from(sheet.cssRules || []).some(rule => rule.cssText.includes(".sapThemeMetaData-Base-baseLib"));
+      } catch {
+        return false;
+      }
+    });
+
+    if (!cssLoaded) {
+      const msg = `Required theme CSS not found.
+Please add:
+<link rel="stylesheet" href="path/to/@sapudex/design-tokens/dist/themes/sap_glow/css_variables.css">
+or import '@sapudex/design-tokens/dist/themes/sap_glow/css_variables.css'`;
+      console.warn(msg);
+    }
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", runCheck);
+  } else {
+    runCheck();
+  }
+})();

package/src/AssetsVariables.ts

@@ -25,8 +25,13 @@ const variablesOverwrite = `:root {
   ${getScopedVarName("--_ui5_calendar_header_padding")}: 0;
   ${getScopedVarName("--_ui5_calendar_left_right_padding")}: 0;
   ${getScopedVarName("--_ui5_calendar_top_bottom_padding")}: 0;
+  
+  /* Avatar */
+  [udex-avatar].dark {
+    ${getScopedVarName("--_ui5_avatar_outline")}: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle)  var(--udexColorNeutralWhite, #FFFFFF);
+  }
 
-  udex-search {
+  [udex-search] {
     ${getScopedVarName("--_ui5_button_pressed_focused_border_color")}: transparent;
   }