@sapudex/web-components 2.3.0 → 2.4.0

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",
@@ -1120,7 +1203,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",

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.0",
   "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",
@@ -2458,7 +2628,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": [
             {

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "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/Contact.ts

@@ -0,0 +1,200 @@
+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 jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import ContactTemplate from "./ContactTemplate.js";
+import type UDExContactItem from "./ContactItem.js";
+import type UI5ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import parseArrayFromString from "./utils/parseArrayFromString.js";
+import {
+  LOCAL_COUNTRY_NAMES, COMPLETE_LIST_OF, CALL_US_TODAY, CONTACT_US,
+} from "./generated/i18n/i18n-defaults.js";
+import i18n from "@ui5/webcomponents-base/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/i18nBundle.js";
+
+// Styles
+import ContactCss from "./generated/themes/Contact.css.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
+
+export type ContactNumber = {
+  number: string;
+  country: string;
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-contact</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Contact.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-contact
+ * @public
+ */
+@customElement({
+  tag: "udex-contact",
+  renderer: jsxRenderer,
+  styles: ContactCss,
+  template: ContactTemplate,
+})
+
+class UDExContact extends UI5Element {
+  /**
+   * Defines the <code>text</code> for the contact button.
+   *
+   * @public
+   */
+  @property({ type: String })
+    buttonText!: string;
+
+  /**
+   * List of the contact numbers
+   *
+   * @default "[]"
+   * @public
+   */
+  @property({ type: String })
+    contactNumbers: string = "";
+
+  /**
+   * Defines the local country numbers link's href
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    localCountryNumbersLink: string = "";
+
+  /**
+   * Defines if the initial focus should be prevented.
+   * @public
+   */
+  @property({ type: Boolean })
+    preventInitialFocus!: boolean;
+
+  /**
+   * Defines if the focus should be returned to the previously focused element.
+   * @public
+   */
+  @property({ type: Boolean })
+    preventFocusRestore!: boolean;
+
+  /**
+   * Defines the accessible name of the component.
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    accessibleName?: string;
+
+  /**
+   * Defines the IDs of the elements that label the component.
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    accessibleNameRef?: string;
+
+  /**
+   * Slot for list items.
+   *
+   * @slot items
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true })
+    items!: Array<UDExContactItem>;
+
+  /**
+   * Defines the mobile mode for component
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _isMobileMode: boolean = BreakpointUtils.isAtMost("M");
+
+  _screenResizeHandler: () => void;
+  _screenResizeHandlerAttached?: boolean;
+
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
+  constructor() {
+    super();
+    this._screenResizeHandler = this._screenResize.bind(this);
+  }
+
+  onEnterDOM() {
+    this._attachScreenResizeHandler();
+  }
+
+  onExitDOM() {
+    this._detachScreenResizeHandler();
+  }
+
+  _openPopover(): void {
+    this._responsivePopover.open = !this._responsivePopover.open;
+  }
+
+  _closePopover(): void {
+    this._responsivePopover.open = false;
+  }
+
+  _screenResize(): void {
+    this._isMobileMode = BreakpointUtils.isAtMost("M");
+  }
+
+  _attachScreenResizeHandler(): void {
+    if (!this._screenResizeHandlerAttached) {
+      window.addEventListener("resize", this._screenResizeHandler);
+      this._screenResizeHandlerAttached = true;
+    }
+  }
+
+  _detachScreenResizeHandler(): void {
+    if (this._screenResizeHandlerAttached) {
+      window.removeEventListener("resize", this._screenResizeHandler);
+      this._screenResizeHandlerAttached = false;
+    }
+  }
+
+  get _contactNumbersArray(): ContactNumber[] {
+    return parseArrayFromString<ContactNumber>(this.contactNumbers);
+  }
+
+  get _responsivePopover(): UI5ResponsivePopover {
+    return this.shadowRoot!.querySelector<UI5ResponsivePopover>(".udex-contact__popover")!;
+  }
+
+  get _completeListTitle(): string {
+    return `${UDExContact.i18nBundle.getText(COMPLETE_LIST_OF)} `;
+  }
+
+  get _localCountryTitle(): string {
+    return UDExContact.i18nBundle.getText(LOCAL_COUNTRY_NAMES);
+  }
+
+  get _numbersTitle(): string {
+    return UDExContact.i18nBundle.getText(CALL_US_TODAY);
+  }
+
+  get _contactUsTitle(): string {
+    return UDExContact.i18nBundle.getText(CONTACT_US);
+  }
+
+  get _hasNumbersList(): boolean {
+    return this._contactNumbersArray.length > 0;
+  }
+}
+
+UDExContact.define();
+
+export default UDExContact;