@sapudex/web-components 2.0.0 → 2.1.1

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.0.0",
+  "version": "2.1.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -530,6 +530,14 @@
                 "type": "\"None\" | \"Success\" | \"Error\"",
                 "default": "\"None\""
               }
+            },
+            {
+              "name": "wrapping-type",
+              "description": "Defines whether the component text wraps when there is not enough space..",
+              "value": {
+                "type": "\"None\" | \"Normal\"",
+                "default": "\"None\""
+              }
             }
           ],
           "events": [],
@@ -539,6 +547,11 @@
                 "name": "value-state",
                 "description": "Defines the value state of the component.",
                 "value": { "type": "\"None\" | \"Success\" | \"Error\"" }
+              },
+              {
+                "name": "wrapping-type",
+                "description": "Defines whether the component text wraps when there is not enough space..",
+                "value": { "type": "\"None\" | \"Normal\"" }
               }
             ],
             "events": []
@@ -1177,6 +1190,11 @@
               "description": "Defines the accessible ARIA name of the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "accessible-name-ref",
+              "description": "Defines id (or many ids) of the elements that contain the ARIA name of the component.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "accessible-role",
               "description": "Allows setting a custom role.",
@@ -1348,6 +1366,11 @@
                 "description": "Defines the accessible ARIA name of the component.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "accessible-name-ref",
+                "description": "Defines id (or many ids) of the elements that contain the ARIA name of the component.",
+                "value": { "type": "string" }
+              },
               {
                 "name": "accessible-role",
                 "description": "Allows setting a custom role.",
@@ -3055,7 +3078,7 @@
         },
         {
           "name": "udex-masthead-item",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-masthead-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MastheadItem.js\";</code>\n---\n\n\n### **Events:**\n - **item-click** - Fires when item is clicked\n\n### **Slots:**\n - **dropdown** - Slot for the dropdown\n- **default** - Slot for any content",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-masthead-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MastheadItem.js\";</code>\n---\n\n\n### **Events:**\n - **item-click** - Fires when item is clicked\n- **dropdown-closed** - Fires when dropdown is closed\n- **dropdown-opened** - Fires when dropdown is opened\n\n### **Slots:**\n - **dropdown** - Slot for the dropdown\n- **default** - Slot for any content",
           "doc-url": "",
           "attributes": [
             {
@@ -3137,6 +3160,14 @@
             {
               "name": "item-click",
               "description": "Fires when item is clicked"
+            },
+            {
+              "name": "dropdown-closed",
+              "description": "Fires when dropdown is closed"
+            },
+            {
+              "name": "dropdown-opened",
+              "description": "Fires when dropdown is opened"
             }
           ],
           "js": {
@@ -3216,6 +3247,14 @@
               {
                 "name": "item-click",
                 "description": "Fires when item is clicked"
+              },
+              {
+                "name": "dropdown-closed",
+                "description": "Fires when dropdown is closed"
+              },
+              {
+                "name": "dropdown-opened",
+                "description": "Fires when dropdown is opened"
               }
             ]
           }
@@ -3369,7 +3408,7 @@
         },
         {
           "name": "udex-masthead-shell",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-masthead-shell</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MastheadShell.js\";</code>\n---\n\n\n### **Events:**\n - **mobile-menu-open** - Fired event when the user clicks the mobile menu button opener.\n- **mobile-menu-close** - Fired event when the user clicks the mobile menu button closer.\n- **search-click** - Fired event when the user clicks the search button trigger.\n- **cart-click** - Fired event when the user clicks the cart button trigger.\n- **profile-click** - Fired event when the user clicks the profile button trigger.\n- **country-selector-click** - Fired event when the user clicks the country selector button trigger.\n- **logo-click** - Fired event when the user clicks the logo.\n- **site-label-click** - Fired event when the user clicks the site label.\n\n### **Methods:**\n - **closeSearch(): _void_** - Close the search panel.\n- **openSearch(): _void_** - Open the search panel.\n- **openMobileMenu(): _void_** - Open the mobile menu panel.\n- **closeMobileMenu(): _void_** - Close the mobile menu panel.\n\n### **Slots:**\n - **countrySelector** - Slot for country selector item.\n- **mobileMenu** - Slot for mobile menu\n- **default** - Slot for main menu items.\n- **search** - Slot for search component - will be visible on search icon click.\nNote: search component should be hidden by default.\nNote: search icon won't be visible if this slot would be empty\n- **exploreSAP** - Slot for 'Explore SAP' menu\n- **cart** - Slot for cart menu\n- **profile** - Slot for avatar",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-masthead-shell</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MastheadShell.js\";</code>\n---\n\n\n### **Events:**\n - **mobile-menu-open** - Fired event when the user clicks the mobile menu button opener.\n- **mobile-menu-close** - Fired event when the user clicks the mobile menu button closer.\n- **search-click** - Fired event when the user clicks the search button trigger.\n- **search-close-click** - Fired event when the user clicks the search close button.\n- **search-opened** - Fired event when the search panel is opened.\n- **search-closed** - Fired event when the search panel is closed.\n- **cart-click** - Fired event when the user clicks the cart button trigger.\n- **support-click** - Fired event when the user clicks the support button trigger.\n- **profile-click** - Fired event when the user clicks the profile button trigger.\n- **country-selector-click** - Fired event when the user clicks the country selector button trigger.\n- **logo-click** - Fired event when the user clicks the logo.\n- **site-label-click** - Fired event when the user clicks the site label.\n\n### **Methods:**\n - **closeSearch(): _void_** - Close the search panel.\n- **openSearch(): _void_** - Open the search panel.\n- **openMobileMenu(): _void_** - Open the mobile menu panel.\n- **closeMobileMenu(): _void_** - Close the mobile menu panel.\n\n### **Slots:**\n - **countrySelector** - Slot for country selector item.\n- **mobileMenu** - Slot for mobile menu\n- **default** - Slot for main menu items.\n- **search** - Slot for search component - will be visible on search icon click.\nNote: search component should be hidden by default.\nNote: search icon won't be visible if this slot would be empty\n- **exploreSAP** - Slot for 'Explore SAP' menu\n- **cart** - Slot for cart menu\n- **profile** - Slot for avatar\n- **support** - Slot for support",
           "doc-url": "",
           "attributes": [
             {
@@ -3449,7 +3488,8 @@
               "description": "Slot for 'Explore SAP' menu"
             },
             { "name": "cart", "description": "Slot for cart menu" },
-            { "name": "profile", "description": "Slot for avatar" }
+            { "name": "profile", "description": "Slot for avatar" },
+            { "name": "support", "description": "Slot for support" }
           ],
           "events": [
             {
@@ -3464,10 +3504,26 @@
               "name": "search-click",
               "description": "Fired event when the user clicks the search button trigger."
             },
+            {
+              "name": "search-close-click",
+              "description": "Fired event when the user clicks the search close button."
+            },
+            {
+              "name": "search-opened",
+              "description": "Fired event when the search panel is opened."
+            },
+            {
+              "name": "search-closed",
+              "description": "Fired event when the search panel is closed."
+            },
             {
               "name": "cart-click",
               "description": "Fired event when the user clicks the cart button trigger."
             },
+            {
+              "name": "support-click",
+              "description": "Fired event when the user clicks the support button trigger."
+            },
             {
               "name": "profile-click",
               "description": "Fired event when the user clicks the profile button trigger."
@@ -3561,10 +3617,26 @@
                 "name": "search-click",
                 "description": "Fired event when the user clicks the search button trigger."
               },
+              {
+                "name": "search-close-click",
+                "description": "Fired event when the user clicks the search close button."
+              },
+              {
+                "name": "search-opened",
+                "description": "Fired event when the search panel is opened."
+              },
+              {
+                "name": "search-closed",
+                "description": "Fired event when the search panel is closed."
+              },
               {
                 "name": "cart-click",
                 "description": "Fired event when the user clicks the cart button trigger."
               },
+              {
+                "name": "support-click",
+                "description": "Fired event when the user clicks the support button trigger."
+              },
               {
                 "name": "profile-click",
                 "description": "Fired event when the user clicks the profile button trigger."
@@ -4117,6 +4189,11 @@
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-password-field</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExPasswordField.js\";</code>\n---\n",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "autocomplete",
+              "description": "Defines the behaviour of autocomplete.",
+              "value": { "type": "\"on\" | \"off\"", "default": "\"off\"" }
+            },
             {
               "name": "disabled",
               "description": "Defines whether the component is in disabled state.\n<br><br>\n<b>Note:</b> A disabled component is completely noninteractive.",
@@ -4186,6 +4263,11 @@
           "events": [],
           "js": {
             "properties": [
+              {
+                "name": "autocomplete",
+                "description": "Defines the behaviour of autocomplete.",
+                "value": { "type": "\"on\" | \"off\"" }
+              },
               {
                 "name": "disabled",
                 "description": "Defines whether the component is in disabled state.\n<br><br>\n<b>Note:</b> A disabled component is completely noninteractive.",
@@ -6574,7 +6656,7 @@
             {
               "name": "loading",
               "description": "Defines if the loading indicator should be shown.",
-              "value": { "type": "string", "default": "false" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "loading-delay",
@@ -6645,7 +6727,7 @@
               {
                 "name": "loading",
                 "description": "Defines if the loading indicator should be shown.",
-                "value": { "type": "string" }
+                "value": { "type": "boolean" }
               },
               {
                 "name": "loading-delay",
@@ -7357,6 +7439,11 @@
               "description": "Defines if the text-field is active",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "autocomplete",
+              "description": "Defines the behaviour of autocomplete.",
+              "value": { "type": "string", "default": "\"off\"" }
+            },
             {
               "name": "direction",
               "description": "Defines direction of the input.",
@@ -7452,6 +7539,11 @@
                 "description": "Defines if the text-field is active",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "autocomplete",
+                "description": "Defines the behaviour of autocomplete.",
+                "value": { "type": "string" }
+              },
               {
                 "name": "direction",
                 "description": "Defines direction of the input.",
@@ -7803,14 +7895,19 @@
               "value": { "type": "string" }
             },
             {
-              "name": "error-text",
-              "description": "Defines the error message shown when more than one file is uploaded with multiple set to false.",
+              "name": "supporting-text",
+              "description": "Defines an optional upporting message shown in 2 cases, both in single uplaod mode.\n1) When more than one file is uploaded and the button for uploading is clicked.\n2) When the button for uploading is disabled and a file has already been uploaded.",
               "value": { "type": "string" }
             },
             {
               "name": "required",
               "description": "Defines if uploader is required.",
-              "value": { "type": "boolean" }
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "Defines if the button for uploading is disabled.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "multiple",
@@ -7871,8 +7968,8 @@
                 "value": { "type": "string" }
               },
               {
-                "name": "error-text",
-                "description": "Defines the error message shown when more than one file is uploaded with multiple set to false.",
+                "name": "supporting-text",
+                "description": "Defines an optional upporting message shown in 2 cases, both in single uplaod mode.\n1) When more than one file is uploaded and the button for uploading is clicked.\n2) When the button for uploading is disabled and a file has already been uploaded.",
                 "value": { "type": "string" }
               },
               {
@@ -7880,6 +7977,11 @@
                 "description": "Defines if uploader is required.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "disabled",
+                "description": "Defines if the button for uploading is disabled.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "multiple",
                 "description": "Defines if uploading multiple files is allowed.",

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/AssetsVariables.ts

@@ -2,7 +2,7 @@ import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsSco
 
 const variablesOverwrite = `:root {
   /* Browser Scrollbar */
-  ${getScopedVarName("browser_scrollbar_border_radius")}: var(--udexRadiusM, 8px);
+  ${getScopedVarName("--browser_scrollbar_border_radius")}: var(--udexRadiusM, 8px);
 
   /* Tooltip */
   ${getScopedVarName("--_ui5_popover_box_shadow")}: 0px 0px 0px 1px var(--udexColorGrey4);

package/src/Checkbox.ts

@@ -6,10 +6,15 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { VALUE_STATE_ERROR, VALUE_STATE_SUCCESS } from "./generated/i18n/i18n-defaults.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UDExCheckboxValueState from "./types/Checkbox.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 
 // Styles
 import CheckboxCss from "./generated/themes/Checkbox.css.js";
+import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
+import type Label from "@ui5/webcomponents/dist/Label.js";
 
+const LABEL_TEXT_HEIGHT = 18.5;
 /**
  * @class
  *
@@ -46,9 +51,33 @@ class UDExCheckbox extends CheckBox {
   /** @ts-expect-error */
     valueState: `${UDExCheckboxValueState}` = UDExCheckboxValueState.None;
 
+  /**
+   * Defines whether the component text wraps when there is not enough space..
+   *
+   * @default "None"
+   * @public
+   */
+  @property()
+    wrappingType: `${WrappingType}` = WrappingType.None;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
+  _handleResizeBound: ResizeObserverCallback;
+
+  constructor() {
+    super();
+    this._handleResizeBound = this._handleResize.bind(this);
+  }
+
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
   valueStateMappings(): Record<string, string> {
     return {
       [UDExCheckboxValueState.Error]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_ERROR),
@@ -56,11 +85,29 @@ class UDExCheckbox extends CheckBox {
     };
   }
 
+  _handleResize(): void {
+    const labelOverflows = this.labelHeight > LABEL_TEXT_HEIGHT;
+
+    if (labelOverflows && this.wrappingType === WrappingType.Normal) {
+      this.label?.classList.add("udex-checkbox__label-multiline");
+    } else {
+      this.label?.classList.remove("udex-checkbox__label-multiline");
+    }
+  }
+
   get valueStateText(): string | undefined {
     if (this.valueState !== UDExCheckboxValueState.None) {
       return this.valueStateMappings()[this.valueState];
     }
   }
+
+  get label(): Label | null {
+    return this.shadowRoot!.querySelector<Label>("[ui5-label]");
+  }
+
+  get labelHeight(): number {
+    return this.label?.getBoundingClientRect().height || 0;
+  }
 }
 
 UDExCheckbox.define();

package/src/FilterMenu.hbs

@@ -4,6 +4,7 @@
     @click="{{handleTriggerClick}}"
     @keydown="{{handleTriggerKeydown}}"
     aria-label="{{triggerButtonAccessibleName}}"
+    aria-labelledby="{{accessibleNameRef}}"
     aria-expanded="{{_open}}"
     aria-haspopup="true"
     role="{{triggerAccessibleRole}}"
@@ -37,6 +38,7 @@
         id="{{this._id}}_udex-filter-menu-dropdown"
         hide-arrow
         ?allow-target-overlap="{{disableAllowTargetOverlap}}"
+        accessible-role="{{accessibleRole}}"
         placement="{{placement}}"
         horizontal-align="{{horizontalAlign}}"
         @ui5-item-press="{{handleItemPress}}"

package/src/FilterMenu.ts

@@ -277,6 +277,14 @@ class UDExFilterMenu extends UDExSearchableListBase {
   @property()
     accessibleName?: string;
 
+  /**
+   * Defines id (or many ids) of the elements that contain the ARIA name of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    accessibleNameRef!: string;
   /**
    * Allows setting a custom role.
    * @default "None"

package/src/Link.ts

@@ -1,6 +1,6 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import UI5Link from "@ui5/webcomponents/dist/Link.js";
+import Link from "@ui5/webcomponents/dist/Link.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 
 // Styles
@@ -25,18 +25,17 @@ export type AttributeValuePair = {
  * <code>import "@sapudex/web-components/dist/Link.js";</code>
  *
  * @constructor
- * @author SAP SE
- * @extends UI5Link
+ * @extends Link
  * @tagname udex-link
  * @public
  */
 @customElement({
   tag: "udex-link",
   renderer: jsxRenderer,
-  styles: [UI5Link.styles, LinkCss],
+  styles: [Link.styles, LinkCss],
 })
 
-class UDExLink extends UI5Link {
+class UDExLink extends Link {
   onEnterDOM(): void {
     if (isDesktop()) {
       this.setAttribute("desktop", "");

package/src/MastheadItem.hbs

@@ -31,7 +31,7 @@
         @click="{{handleItemClick}}">
         {{> content}}
     </span>
-    {{#if showDropdown}}
+    {{#if isDropdownOpened}}
         {{> dropdown}}
     {{/if}}
 {{else}}
@@ -48,7 +48,7 @@
         @click="{{handleItemClick}}">
         {{> content}}
     </button>
-    {{#if showDropdown}}
+    {{#if isDropdownOpened}}
         {{> dropdown}}
     {{/if}}
 {{/if}}