@sapudex/web-components 2.9.0 → 2.11.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.9.0",
+  "version": "2.11.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -20,6 +20,14 @@
               "name": "headline",
               "description": "Defines the headline text of the accordion component.",
               "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "headline-level",
+              "description": "Defines the semantic level of the headline.",
+              "value": {
+                "type": "UDExAccordionHeadlineLevel",
+                "default": "UDExAccordionHeadlineLevel.h3"
+              }
             }
           ],
           "slots": [
@@ -42,6 +50,11 @@
                 "name": "headline",
                 "description": "Defines the headline text of the accordion component.",
                 "value": { "type": "string" }
+              },
+              {
+                "name": "headline-level",
+                "description": "Defines the semantic level of the headline.",
+                "value": { "type": "UDExAccordionHeadlineLevel" }
               }
             ],
             "events": [
@@ -67,6 +80,19 @@
               "description": "Defines the label of the accordion item component.",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "label-size",
+              "description": "Defines the size of label.",
+              "value": {
+                "type": "UDExAccordionItemTitleSize",
+                "default": "UDExAccordionItemTitleSize.Standard"
+              }
+            },
+            {
+              "name": "label-icon",
+              "description": "Defines icon name to be display with title.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "expanded",
               "description": "Defines if the accordion item is expanded by default",
@@ -106,6 +132,16 @@
                 "description": "Defines the label of the accordion item component.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "label-size",
+                "description": "Defines the size of label.",
+                "value": { "type": "UDExAccordionItemTitleSize" }
+              },
+              {
+                "name": "label-icon",
+                "description": "Defines icon name to be display with title.",
+                "value": { "type": "string" }
+              },
               {
                 "name": "expanded",
                 "description": "Defines if the accordion item is expanded by default",
@@ -2220,18 +2256,43 @@
             {
               "name": "logo-title",
               "description": "Defines the Logo default title",
-              "value": { "type": "string", "default": "\"\"" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "logo-url",
               "description": "Defines the Logo URL",
-              "value": { "type": "string", "default": "\"\"" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "logo-link",
               "description": "Defines the optional component href link for the logo.",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "tagline-alt",
+              "description": "Defines the tagline alt text.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
+            {
+              "name": "tagline-url",
+              "description": "Defines the tagline url.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
+            {
+              "name": "chinese-tagline-url",
+              "description": "Defines the chinese tagline url.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
+            {
+              "name": "chinese-logo-url",
+              "description": "Defines the chinese logo url",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
+            {
+              "name": "chinese-logo-link",
+              "description": "Defines the optional component href link for the chinese logo.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
             {
               "name": "quick-links",
               "description": "List of the Quick links",
@@ -2364,18 +2425,43 @@
               {
                 "name": "logo-title",
                 "description": "Defines the Logo default title",
-                "value": { "type": "string" }
+                "value": { "type": "string | undefined" }
               },
               {
                 "name": "logo-url",
                 "description": "Defines the Logo URL",
-                "value": { "type": "string" }
+                "value": { "type": "string | undefined" }
               },
               {
                 "name": "logo-link",
                 "description": "Defines the optional component href link for the logo.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "tagline-alt",
+                "description": "Defines the tagline alt text.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "tagline-url",
+                "description": "Defines the tagline url.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "chinese-tagline-url",
+                "description": "Defines the chinese tagline url.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "chinese-logo-url",
+                "description": "Defines the chinese logo url",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "chinese-logo-link",
+                "description": "Defines the optional component href link for the chinese logo.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "quick-links",
                 "description": "List of the Quick links",
@@ -3899,17 +3985,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",
@@ -3966,6 +4052,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",
@@ -4132,6 +4223,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",
@@ -5062,6 +5158,135 @@
             "events": []
           }
         },
+        {
+          "name": "udex-promo-tile",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-promo-tile</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/PromoTile.js\";</code>\n---\n\n\n### **Events:**\n - **button-click** - Triggered when the user clicks on the CTA button\n\n### **Slots:**\n - **default** - Defines the text content of the Promo Tile.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "orientation",
+              "description": "Defines the orientation of the Promo Tile component.",
+              "value": { "type": "\"Vertical\" | \"Horizontal\"" }
+            },
+            {
+              "name": "icon",
+              "description": "Defines the UI5 icon name in the pictogram section.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "image-label",
+              "description": "Defines the image aria label and alt in the pictogram section.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "logo-url",
+              "description": "Defines the logo URL in the pictogram section.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "header",
+              "description": "Defines the header text of the promo tile.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "eyebrow",
+              "description": "Defines the eyebrow text of the promo tile.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "button",
+              "description": "Defines the CTA button label",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "button-design",
+              "description": "Defines the CTA button design",
+              "value": { "type": "UDExButtonDesign | undefined" }
+            },
+            {
+              "name": "color-scheme",
+              "description": "Defines the color scheme of the Promo Tile.",
+              "value": { "type": "UDExPromoTileColorSheme | undefined" }
+            },
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible name of the component.",
+              "value": { "type": "string | undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Defines the text content of the Promo Tile."
+            }
+          ],
+          "events": [
+            {
+              "name": "button-click",
+              "description": "Triggered when the user clicks on the CTA button"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "orientation",
+                "description": "Defines the orientation of the Promo Tile component.",
+                "value": { "type": "\"Vertical\" | \"Horizontal\"" }
+              },
+              {
+                "name": "icon",
+                "description": "Defines the UI5 icon name in the pictogram section.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "image-label",
+                "description": "Defines the image aria label and alt in the pictogram section.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "logo-url",
+                "description": "Defines the logo URL in the pictogram section.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "header",
+                "description": "Defines the header text of the promo tile.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "eyebrow",
+                "description": "Defines the eyebrow text of the promo tile.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "button",
+                "description": "Defines the CTA button label",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "button-design",
+                "description": "Defines the CTA button design",
+                "value": { "type": "UDExButtonDesign | undefined" }
+              },
+              {
+                "name": "color-scheme",
+                "description": "Defines the color scheme of the Promo Tile.",
+                "value": { "type": "UDExPromoTileColorSheme | undefined" }
+              },
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible name of the component.",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": [
+              {
+                "name": "button-click",
+                "description": "Triggered when the user clicks on the CTA button"
+              }
+            ]
+          }
+        },
         {
           "name": "udex-quote",
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>udex-quote</code> component is a demo component that displays some text.\n---\n\n\n### **Slots:**\n - **default** - Defines the text content of the Quote.\n- **link** - Defines the link in the Quote\n- **author** - Defines author's name and company\n- **image** - Defines image near quote text",
@@ -5090,6 +5315,11 @@
                 "type": "\"avatar\" | \"rectangle\"",
                 "default": "\"avatar\""
               }
+            },
+            {
+              "name": "image-placement",
+              "description": "Defines image placement",
+              "value": { "type": "\"left\" | \"right\"", "default": "\"left\"" }
             }
           ],
           "slots": [
@@ -5121,6 +5351,11 @@
                 "name": "mask",
                 "description": "Defines image mask",
                 "value": { "type": "\"avatar\" | \"rectangle\"" }
+              },
+              {
+                "name": "image-placement",
+                "description": "Defines image placement",
+                "value": { "type": "\"left\" | \"right\"" }
               }
             ],
             "events": []
@@ -6644,6 +6879,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",
@@ -7506,6 +7816,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": [
@@ -7521,6 +7836,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": []
@@ -7778,7 +8098,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": [
             {
@@ -7852,7 +8172,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": [
               {
@@ -7926,7 +8251,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.9.0",
+  "version": "2.11.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/Accordion.ts

@@ -18,6 +18,16 @@ import AccordionCss from "./generated/themes/Accordion.css.js";
 type UDExAccordionToggleItemsEventDetail = {
   isOpen: boolean
 }
+
+export enum UDExAccordionHeadlineLevel {
+  H1 = "H1",
+  H2 = "H2",
+  H3 = "H3",
+  H4 = "H4",
+  H5 = "H5",
+  H6 = "H6"
+}
+
 /**
  * @class
  *
@@ -90,6 +100,15 @@ class UDExAccordion extends UI5Element {
   @property({ type: String })
     headline!: string;
 
+  /**
+   * Defines the semantic level of the headline.
+   *
+   * @default UDExAccordionHeadlineLevel.h3
+   * @public
+   */
+  @property()
+    headlineLevel: UDExAccordionHeadlineLevel = UDExAccordionHeadlineLevel.H3;
+
   /**
    * Slot for accordion items.
    *

package/src/AccordionItem.ts

@@ -11,6 +11,10 @@ import AccordionItemTemplate from "./AccordionItemTemplate.js";
 // Styles
 import AccordionItemCss from "./generated/themes/AccordionItem.css.js";
 
+export enum UDExAccordionItemTitleSize {
+  Standard = "Standard",
+  Large = "Large"
+}
 /**
  * @class
  *
@@ -72,6 +76,24 @@ class UDExAccordionItem extends UI5Element {
   @property()
     label!: string;
 
+  /**
+   * Defines the size of label.
+   *
+   * @default UDExAccordionItemTitleSize.Standard
+   * @public
+   */
+  @property()
+    labelSize: UDExAccordionItemTitleSize = UDExAccordionItemTitleSize.Standard;
+
+  /**
+   * Defines icon name to be display with title.
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    labelIcon!: string;
+
   /**
    * Defines if the accordion item is expanded by default
    *
@@ -113,6 +135,7 @@ class UDExAccordionItem extends UI5Element {
 
   onAfterRendering() {
     this.handleDirection();
+    this.setContentHeight();
   }
 
   onEnterDOM(): void {
@@ -121,6 +144,10 @@ class UDExAccordionItem extends UI5Element {
     }
   }
 
+  setContentHeight() {
+    this.style.setProperty("--udex-accordion-item-content-max-height", `${this.shadowRoot?.querySelector(".udex-accordion-item__content")?.scrollHeight}px`);
+  }
+
   contentKeydown(e: KeyboardEvent) {
     e.stopPropagation();
   }
@@ -128,6 +155,7 @@ class UDExAccordionItem extends UI5Element {
   itemClickHandler(e: Event) {
     e.preventDefault();
     this.expanded = !this.expanded;
+    this.setContentHeight();
     this.fireDecoratorEvent("accordion-item-click");
   }