@sapudex/web-components 2.10.0 → 2.11.0

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

@@ -14,6 +14,11 @@
           "name": "headline",
           "description": "Defines the headline text of the accordion component.",
           "values": []
+        },
+        {
+          "name": "headline-level",
+          "description": "Defines the semantic level of the headline.",
+          "values": [{ "name": "UDExAccordionHeadlineLevel" }]
         }
       ],
       "references": []
@@ -32,6 +37,16 @@
           "description": "Defines the label of the accordion item component.",
           "values": []
         },
+        {
+          "name": "label-size",
+          "description": "Defines the size of label.",
+          "values": [{ "name": "UDExAccordionItemTitleSize" }]
+        },
+        {
+          "name": "label-icon",
+          "description": "Defines icon name to be display with title.",
+          "values": []
+        },
         {
           "name": "expanded",
           "description": "Defines if the accordion item is expanded by default",
@@ -1044,6 +1059,31 @@
           "description": "Defines the optional component href link for the logo.",
           "values": []
         },
+        {
+          "name": "tagline-alt",
+          "description": "Defines the tagline alt text.",
+          "values": []
+        },
+        {
+          "name": "tagline-url",
+          "description": "Defines the tagline url.",
+          "values": []
+        },
+        {
+          "name": "chinese-tagline-url",
+          "description": "Defines the chinese tagline url.",
+          "values": []
+        },
+        {
+          "name": "chinese-logo-url",
+          "description": "Defines the chinese logo url",
+          "values": []
+        },
+        {
+          "name": "chinese-logo-link",
+          "description": "Defines the optional component href link for the chinese logo.",
+          "values": []
+        },
         {
           "name": "quick-links",
           "description": "List of the Quick links",
@@ -2380,6 +2420,63 @@
       ],
       "references": []
     },
+    {
+      "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\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.",
+      "attributes": [
+        {
+          "name": "orientation",
+          "description": "Defines the orientation of the Promo Tile component.",
+          "values": [{ "name": "Vertical" }, { "name": "Horizontal" }]
+        },
+        {
+          "name": "icon",
+          "description": "Defines the UI5 icon name in the pictogram section.",
+          "values": []
+        },
+        {
+          "name": "image-label",
+          "description": "Defines the image aria label and alt in the pictogram section.",
+          "values": []
+        },
+        {
+          "name": "logo-url",
+          "description": "Defines the logo URL in the pictogram section.",
+          "values": []
+        },
+        {
+          "name": "header",
+          "description": "Defines the header text of the promo tile.",
+          "values": []
+        },
+        {
+          "name": "eyebrow",
+          "description": "Defines the eyebrow text of the promo tile.",
+          "values": []
+        },
+        {
+          "name": "button",
+          "description": "Defines the CTA button label",
+          "values": []
+        },
+        {
+          "name": "button-design",
+          "description": "Defines the CTA button design",
+          "values": [{ "name": "UDExButtonDesign" }]
+        },
+        {
+          "name": "color-scheme",
+          "description": "Defines the color scheme of the Promo Tile.",
+          "values": [{ "name": "UDExPromoTileColorSheme" }]
+        },
+        {
+          "name": "accessible-name",
+          "description": "Defines the accessible name of the component.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "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\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",
@@ -2398,6 +2495,11 @@
           "name": "mask",
           "description": "Defines image mask",
           "values": [{ "name": "avatar" }, { "name": "rectangle" }]
+        },
+        {
+          "name": "image-placement",
+          "description": "Defines image placement",
+          "values": [{ "name": "left" }, { "name": "right" }]
         }
       ],
       "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.10.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",
@@ -5072,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",
@@ -5100,6 +5315,11 @@
                 "type": "\"avatar\" | \"rectangle\"",
                 "default": "\"avatar\""
               }
+            },
+            {
+              "name": "image-placement",
+              "description": "Defines image placement",
+              "value": { "type": "\"left\" | \"right\"", "default": "\"left\"" }
             }
           ],
           "slots": [
@@ -5131,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": []

package/package.json

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

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");
   }
 

package/src/AccordionItemTemplate.tsx

@@ -4,30 +4,35 @@ import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
 import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import { UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTypeBadgeDesign } from "./types/BadgeDesign.js";
 import UDExBadge from "./Badge.js";
+import UDExDivider from "./Divider.js";
 
 export default function AccordionItemTemplate(this: AccordionItem) {
   const ariaControlsId = `udex-accordion-item__${this._id}-content`;
   const ariaLabelledbyId = `udex-accordion-item__${this._id}`;
   const rootClass = "udex-accordion-item";
+  const titleClass = this.labelIcon ? `${rootClass}--with-title` : "";
+  const headlineClass = `${rootClass}__header ${rootClass}__header--${this.labelSize.toLowerCase()}`;
 
   return (
     <>
       <button
         id={ariaLabelledbyId}
         aria-controls={ariaControlsId}
-        className={`${rootClass}__header`}
+        className={`${headlineClass}`}
         onFocusIn={this.focusHandler}
         onClick={this.itemClickHandler}
         onKeyDown={this.keydownHandler}
         aria-expanded={this.expanded}
         type="button">
-        <div className={`${rootClass}__icon-wrapper`}>
-          <UI5Icon
-            class={`${rootClass}__icon`}
-            mode={IconMode.Decorative}
-            name={slimArrowRight}>
-          </UI5Icon>
-        </div>
+        {this.labelIcon ?
+          <div className={`${rootClass}__icon-wrapper ${rootClass}__label-icon-wrapper`}>
+            <UI5Icon
+              class={`${rootClass}__icon ${rootClass}__label-icon`}
+              mode={IconMode.Decorative}
+              name={this.labelIcon}>
+            </UI5Icon>
+          </div>
+          : ""}
         <span className={`${rootClass}__title`}>
           {this.label}
           {this.numberBadge &&
@@ -40,15 +45,25 @@ export default function AccordionItemTemplate(this: AccordionItem) {
             </UDExBadge>
           }
         </span>
+        <div className={`${rootClass}__icon-wrapper`}>
+          <UI5Icon
+            class={`${rootClass}__icon`}
+            mode={IconMode.Decorative}
+            name={slimArrowRight}>
+          </UI5Icon>
+        </div>
       </button>
       <div
         id={ariaControlsId}
         aria-labelledby={ariaLabelledbyId}
-        className={`${rootClass}__content`}
+        className={`${rootClass}__content ${titleClass}`}
         onKeyDown={this.contentKeydown}
         role="region">
-        <slot></slot>
+        <div className={`${rootClass}__content-inner`}>
+          <slot></slot>
+        </div>
       </div>
+      <UDExDivider></UDExDivider>
     </>
   );
 }

package/src/AccordionTemplate.tsx

@@ -2,6 +2,7 @@ import type Accordion from "./Accordion.js";
 import UDExButton from "./Button.js";
 import UDExButtonSize from "./types/ButtonSize.js";
 import UDExButtonDesign from "./types/ButtonDesign.js";
+import { UDExAccordionHeadlineLevel } from "./Accordion.js";
 
 export default function AccordionTemplate(this: Accordion) {
   const rootClass = "udex-accordion";
@@ -14,7 +15,7 @@ export default function AccordionTemplate(this: Accordion) {
       onui5-accordion-item-focus={this.itemFocusHandler}>
       <div className={`${rootClass}__head`} part="head">
         {this.headline &&
-          <h3 className={`${rootClass}__headline`}>{this.headline}</h3>
+          headline.call(this, rootClass)
         }
         {!this.hideExpandButton &&
           <UDExButton class={`${rootClass}__btn`}
@@ -35,3 +36,23 @@ export default function AccordionTemplate(this: Accordion) {
     </div>
   );
 }
+
+function headline(this: Accordion, rootClass: string) {
+  const { headline: title, headlineLevel } = this;
+  switch (headlineLevel) {
+  case UDExAccordionHeadlineLevel.H1:
+    return <h1 className={`${rootClass}__headline`}>{title}</h1>;
+  case UDExAccordionHeadlineLevel.H2:
+    return <h2 className={`${rootClass}__headline`}>{title}</h2>;
+  case UDExAccordionHeadlineLevel.H3:
+    return <h3 className={`${rootClass}__headline`}>{title}</h3>;
+  case UDExAccordionHeadlineLevel.H4:
+    return <h4 className={`${rootClass}__headline`}>{title}</h4>;
+  case UDExAccordionHeadlineLevel.H5:
+    return <h5 className={`${rootClass}__headline`}>{title}</h5>;
+  case UDExAccordionHeadlineLevel.H6:
+    return <h6 className={`${rootClass}__headline`}>{title}</h6>;
+  default:
+    return <h3 className={`${rootClass}__headline`}>{title}</h3>;
+  }
+}