@sapudex/web-components 2.55.0 → 2.57.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.55.0",
+  "version": "2.57.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -789,7 +789,7 @@
               "name": "page-indicator-type",
               "description": "Defines the style of the page indicator.\nAvailable options are:\n\n- `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)\n- `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)",
               "value": {
-                "type": "\"Default\" | \"Numeric\"",
+                "type": "\"Default\" | \"None\" | \"Numeric\"",
                 "default": "\"Default\""
               }
             }
@@ -845,7 +845,7 @@
               {
                 "name": "page-indicator-type",
                 "description": "Defines the style of the page indicator.\nAvailable options are:\n\n- `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)\n- `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)",
-                "value": { "type": "\"Default\" | \"Numeric\"" }
+                "value": { "type": "\"Default\" | \"None\" | \"Numeric\"" }
               }
             ],
             "events": [
@@ -7386,7 +7386,7 @@
         },
         {
           "name": "udex-search",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-search</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Search.js\";</code>\n---\n\n\n### **Events:**\n - **dropdown-item-click** - Fired event when the user clicks on the item inside the popover.\n- **handle-value-reset** - Fired event when the user clicks on the reset button.\n- **handle-value-search** - Fired event when the user typed to search field.\n- **prefix-item-click** - Fired event when the user clicks on the intem inside the prefix dropdown.\n- **search-keydown** - Fired event when the user clicks on the intem inside the prefix dropdown.\n- **submit-search-value** - Fired event when the user submitted the value.\n\n### **Slots:**\n - **default** - Defines the prefix dropdown of the Search component.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-search</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Search.js\";</code>\n---\n\n\n### **Events:**\n - **dropdown-item-click** - Fired event when the user clicks on the item inside the popover.\n- **handle-value-reset** - Fired event when the user clicks on the reset button.\n- **handle-value-search** - Fired event when the user typed to search field.\n- **prefix-item-click** - Fired event when the user clicks on the intem inside the prefix dropdown.\n- **search-keydown** - Fired event when the user clicks on the intem inside the prefix dropdown.\n- **submit-search-value** - Fired event when the user submitted the value.\n- **suggestion-popover-closed** - Fired when the suggestions popover closes.\n- **suggestion-popover-opened** - Fired when the suggestions popover opens.\n\n### **Slots:**\n - **default** - Defines the prefix dropdown of the Search component.",
           "doc-url": "",
           "attributes": [
             {
@@ -7520,6 +7520,14 @@
             {
               "name": "submit-search-value",
               "description": "Fired event when the user submitted the value."
+            },
+            {
+              "name": "suggestion-popover-closed",
+              "description": "Fired when the suggestions popover closes."
+            },
+            {
+              "name": "suggestion-popover-opened",
+              "description": "Fired when the suggestions popover opens."
             }
           ],
           "js": {
@@ -7649,6 +7657,14 @@
               {
                 "name": "submit-search-value",
                 "description": "Fired event when the user submitted the value."
+              },
+              {
+                "name": "suggestion-popover-closed",
+                "description": "Fired when the suggestions popover closes."
+              },
+              {
+                "name": "suggestion-popover-opened",
+                "description": "Fired when the suggestions popover opens."
               }
             ]
           }
@@ -9321,7 +9337,7 @@
             {
               "name": "disabled",
               "description": "Defines if component should have disabled styles.",
-              "value": { "type": "string", "default": "\"\"" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "supporting-text",
@@ -9348,7 +9364,7 @@
               {
                 "name": "disabled",
                 "description": "Defines if component should have disabled styles.",
-                "value": { "type": "string" }
+                "value": { "type": "boolean" }
               },
               {
                 "name": "supporting-text",
@@ -9830,8 +9846,8 @@
               "name": "size-more-button",
               "description": "Defines the size of the \"More\" button.",
               "value": {
-                "type": "\"Medium\" | \"Small\"",
-                "default": "\"Small\""
+                "type": "\"Medium\" | \"Small\" | \"Large\"",
+                "default": "\"Medium\""
               }
             },
             {
@@ -9900,7 +9916,7 @@
               {
                 "name": "size-more-button",
                 "description": "Defines the size of the \"More\" button.",
-                "value": { "type": "\"Medium\" | \"Small\"" }
+                "value": { "type": "\"Medium\" | \"Small\" | \"Large\"" }
               },
               {
                 "name": "vertical-alignment",
@@ -11480,9 +11496,57 @@
         },
         {
           "name": "udex-upload-item",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-upload-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UploadItem.js\";</code>\n---\n\n\n### **Events:**\n - **request-delete** - Triggered when the upload item is deleted.\n\n### **Slots:**\n - **default** - Slot for information about the uploaded file.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-upload-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UploadItem.js\";</code>\n---\n\n\n### **Events:**\n - **accordion-icon-click** - Triggered when the user clicks on an accordion item.\n- **first-icon-click** - Fired event when the user click on a first icon.\n- **item-focus** - Fired event when the user focuses on a list item.\n- **item-press** - Fired event when the user click on a list item.\n- **request-delete** - Triggered when the upload item is deleted.\n- **second-icon-click** - Fired event when the user click on a second icon.\n\n### **Slots:**\n - **default** - Slot for information about the uploaded file.\n- **firstIcon** - Slot for first icon.\n- **secondIcon** - Slot for second icon.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible name of the item.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "accessible-role",
+              "description": "Defines the role attribute of component",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "additional-text",
+              "description": "Defines the additionalText, displayed at the end of the list item.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "additional-text-state",
+              "description": "Defines the state of the additionalText.",
+              "value": {
+                "type": "\"Information\" | \"Warning\" | \"None\" | \"Success\" | \"Error\"",
+                "default": "\"None\""
+              }
+            },
+            {
+              "name": "collapsed",
+              "description": "Defines if collapsible grouping header is collapsed or expanded",
+              "value": { "type": "boolean", "default": "undefined" }
+            },
+            {
+              "name": "collapsible",
+              "description": "Defines if grouping header can collapse/expand child elements.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "controlled",
+              "description": "Defines the controlled state of the item.",
+              "value": { "type": "boolean | undefined", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "Defines whether <code> list item</code> is in disabled state.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "divider",
+              "description": "Defines whether a visual separator should be rendered after the item.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "file-link",
               "description": "Defines the link of the uploaded file.",
@@ -11500,6 +11564,114 @@
                 "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
               }
             },
+            {
+              "name": "flag",
+              "description": "Defines the image, displayed at the start of the item.",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "flag-position",
+              "description": "Defines the position for flag image.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "image",
+              "description": "Allows control over the image source.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "image-alt",
+              "description": "Allows control over the alternative text of the image.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "image-badge-state",
+              "description": "Defines the image badge state of the component.",
+              "value": {
+                "type": "\"Information\" | \"Warning\" | \"Success\" | \"Error\" | \"Edit\" | undefined",
+                "default": "\"\""
+              }
+            },
+            {
+              "name": "image-shape",
+              "description": "Defines the shape of the image.",
+              "value": {
+                "type": "\"Circle\" | \"Square\"",
+                "default": "\"Circle\""
+              }
+            },
+            {
+              "name": "image-size",
+              "description": "Allows control over the size of the image.",
+              "value": {
+                "type": "\"XS\" | \"S\" | \"M\" | \"L\" | \"XL\"",
+                "default": "\"S\""
+              }
+            },
+            {
+              "name": "indeterminate",
+              "description": "Defines whether the selection of a  list is displayed as partially selected.",
+              "value": { "type": "boolean | undefined", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "Defines the <code>label</code> for the item.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "mode",
+              "description": "Defines the mode of the item.",
+              "value": {
+                "type": "\"SingleSelect\" | \"MultiSelect\" | \"SingleContent\" | \"RadioGroup\"",
+                "default": "\"SingleSelect\""
+              }
+            },
+            {
+              "name": "rating",
+              "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "rating-count",
+              "description": "Defines the number of the rating.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "rating-max",
+              "description": "Defines the number of displayed rating symbols.",
+              "value": { "type": "number", "default": "5" }
+            },
+            {
+              "name": "selected",
+              "description": "Defines the selected state of the item.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "size",
+              "description": "Defines the size of the item.",
+              "value": {
+                "type": "\"Large\" | \"Standard\"",
+                "default": "\"Standard\""
+              }
+            },
+            {
+              "name": "supporting-text",
+              "description": "Defines the supportingText, displayed in the end of the item.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "total-count",
+              "description": "The number of total votes.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "type",
+              "description": "Defines the type of the item.",
+              "value": {
+                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
+                "default": "\"None\""
+              }
+            },
             {
               "name": "upload-percentage",
               "description": "Defines the percentage of the upload.",
@@ -11518,16 +11690,85 @@
             {
               "name": "default",
               "description": "Slot for information about the uploaded file."
-            }
+            },
+            { "name": "firstIcon", "description": "Slot for first icon." },
+            { "name": "secondIcon", "description": "Slot for second icon." }
           ],
           "events": [
+            {
+              "name": "accordion-icon-click",
+              "description": "Triggered when the user clicks on an accordion item."
+            },
+            {
+              "name": "first-icon-click",
+              "description": "Fired event when the user click on a first icon."
+            },
+            {
+              "name": "item-focus",
+              "description": "Fired event when the user focuses on a list item."
+            },
+            {
+              "name": "item-press",
+              "description": "Fired event when the user click on a list item."
+            },
             {
               "name": "request-delete",
               "description": "Triggered when the upload item is deleted."
+            },
+            {
+              "name": "second-icon-click",
+              "description": "Fired event when the user click on a second icon."
             }
           ],
           "js": {
             "properties": [
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible name of the item.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "accessible-role",
+                "description": "Defines the role attribute of component",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "additional-text",
+                "description": "Defines the additionalText, displayed at the end of the list item.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "additional-text-state",
+                "description": "Defines the state of the additionalText.",
+                "value": {
+                  "type": "\"Information\" | \"Warning\" | \"None\" | \"Success\" | \"Error\""
+                }
+              },
+              {
+                "name": "collapsed",
+                "description": "Defines if collapsible grouping header is collapsed or expanded",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "collapsible",
+                "description": "Defines if grouping header can collapse/expand child elements.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "controlled",
+                "description": "Defines the controlled state of the item.",
+                "value": { "type": "boolean | undefined" }
+              },
+              {
+                "name": "disabled",
+                "description": "Defines whether <code> list item</code> is in disabled state.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "divider",
+                "description": "Defines whether a visual separator should be rendered after the item.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "file-link",
                 "description": "Defines the link of the uploaded file.",
@@ -11545,6 +11786,102 @@
                   "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
                 }
               },
+              {
+                "name": "flag",
+                "description": "Defines the image, displayed at the start of the item.",
+                "value": { "type": "boolean | undefined" }
+              },
+              {
+                "name": "flag-position",
+                "description": "Defines the position for flag image.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "image",
+                "description": "Allows control over the image source.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "image-alt",
+                "description": "Allows control over the alternative text of the image.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "image-badge-state",
+                "description": "Defines the image badge state of the component.",
+                "value": {
+                  "type": "\"Information\" | \"Warning\" | \"Success\" | \"Error\" | \"Edit\" | undefined"
+                }
+              },
+              {
+                "name": "image-shape",
+                "description": "Defines the shape of the image.",
+                "value": { "type": "\"Circle\" | \"Square\"" }
+              },
+              {
+                "name": "image-size",
+                "description": "Allows control over the size of the image.",
+                "value": { "type": "\"XS\" | \"S\" | \"M\" | \"L\" | \"XL\"" }
+              },
+              {
+                "name": "indeterminate",
+                "description": "Defines whether the selection of a  list is displayed as partially selected.",
+                "value": { "type": "boolean | undefined" }
+              },
+              {
+                "name": "label",
+                "description": "Defines the <code>label</code> for the item.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "mode",
+                "description": "Defines the mode of the item.",
+                "value": {
+                  "type": "\"SingleSelect\" | \"MultiSelect\" | \"SingleContent\" | \"RadioGroup\""
+                }
+              },
+              {
+                "name": "rating",
+                "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "rating-count",
+                "description": "Defines the number of the rating.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "rating-max",
+                "description": "Defines the number of displayed rating symbols.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "selected",
+                "description": "Defines the selected state of the item.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "size",
+                "description": "Defines the size of the item.",
+                "value": { "type": "\"Large\" | \"Standard\"" }
+              },
+              {
+                "name": "supporting-text",
+                "description": "Defines the supportingText, displayed in the end of the item.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "total-count",
+                "description": "The number of total votes.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "type",
+                "description": "Defines the type of the item.",
+                "value": {
+                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
+                }
+              },
               {
                 "name": "upload-percentage",
                 "description": "Defines the percentage of the upload.",
@@ -11557,9 +11894,29 @@
               }
             ],
             "events": [
+              {
+                "name": "accordion-icon-click",
+                "description": "Triggered when the user clicks on an accordion item."
+              },
+              {
+                "name": "first-icon-click",
+                "description": "Fired event when the user click on a first icon."
+              },
+              {
+                "name": "item-focus",
+                "description": "Fired event when the user focuses on a list item."
+              },
+              {
+                "name": "item-press",
+                "description": "Fired event when the user click on a list item."
+              },
               {
                 "name": "request-delete",
                 "description": "Triggered when the upload item is deleted."
+              },
+              {
+                "name": "second-icon-click",
+                "description": "Fired event when the user click on a second icon."
               }
             ]
           }

package/package.json

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

package/src/Carousel.ts

@@ -21,6 +21,7 @@ import {
 import redirectAttributes from "./utils/redirectAttributes.js";
 import type UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
 import type { CarouselNavigateEventDetail } from "@ui5/webcomponents/dist/Carousel.js";
+import type CarouselPageIndicatorType from "@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js";
 import type { UI5CustomEvent } from "@ui5/webcomponents-base";
 import translate from "./utils/translate.js";
 
@@ -28,13 +29,18 @@ import CarouselTemplate from "./CarouselTemplate.js";
 
 // Styles
 import CarouselCss from "./generated/themes/Carousel.css.js";
-import type CarouselPageIndicatorType from "@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js";
 
 export enum UDExCarouselNavigationPosition {
   top = "top",
   bottom = "bottom",
 }
 
+export enum UDExCarouselPageIndicatorType {
+    Default = "Default",
+    Numeric = "Numeric",
+    None = "None"
+}
+
 export enum UDExCarouselButtonDesign {
   Secondary = "Secondary",
   Tertiary = "Tertiary",
@@ -167,7 +173,7 @@ class UDExCarousel extends UI5Element {
    * @public
    */
   @property()
-    pageIndicatorType: `${CarouselPageIndicatorType}` = "Default";
+    pageIndicatorType: `${UDExCarouselPageIndicatorType}` = "Default";
 
   /**
    * Defines the prev button is disabled
@@ -347,7 +353,7 @@ class UDExCarousel extends UI5Element {
       return;
     }
 
-    this._carousel.navigateLeft();
+    this._carousel.navigateArrowLeft();
     this._calculateDisabledButtonsState();
   }
 
@@ -356,7 +362,7 @@ class UDExCarousel extends UI5Element {
       return;
     }
 
-    this._carousel.navigateRight();
+    this._carousel.navigateArrowRight();
     this._calculateDisabledButtonsState();
   }
 
@@ -381,9 +387,18 @@ class UDExCarousel extends UI5Element {
   }
 
   get carouselClass(): string {
-    const classes = "udex-carousel";
+    let classes = "udex-carousel";
 
-    return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;
+    classes += ` udex-carousel__navigation--${this.navigationPlacement}`;
+
+    if (
+      this.navigationPlacement === UDExCarouselNavigationPosition.bottom
+      && this.pageIndicatorType === UDExCarouselPageIndicatorType.None
+    ) {
+      classes += " udex-carousel__navigation--bottom-buttons-only";
+    }
+
+    return classes;
   }
 
   get navigationWrapperClass(): string {
@@ -407,6 +422,13 @@ class UDExCarousel extends UI5Element {
   }
 
   get buttonDesign(): UDExCarouselButtonDesign {
+    if (
+      this.navigationPlacement === UDExCarouselNavigationPosition.bottom
+      && this.pageIndicatorType === UDExCarouselPageIndicatorType.None
+    ) {
+      return UDExCarouselButtonDesign.Secondary;
+    }
+
     return this.navigationPlacement === UDExCarouselNavigationPosition.top
       ? UDExCarouselButtonDesign.Secondary
       : UDExCarouselButtonDesign.Tertiary;
@@ -420,6 +442,13 @@ class UDExCarousel extends UI5Element {
   }
 
   get _hidePageIndicator(): boolean {
+    if (
+      this.navigationPlacement === UDExCarouselNavigationPosition.bottom
+      && this.pageIndicatorType === UDExCarouselPageIndicatorType.None
+    ) {
+      return true;
+    }
+
     return this.navigationPlacement === UDExCarouselNavigationPosition.top;
   }
 
@@ -427,8 +456,14 @@ class UDExCarousel extends UI5Element {
     return this.shadowRoot!.querySelector<UI5Carousel>("[ui5-carousel]");
   }
 
-  get _isBottomNavigation(): boolean {
-    return this.navigationPlacement === UDExCarouselNavigationPosition.bottom;
+  get _isBottomDotNavigation(): boolean {
+    if (
+      this.navigationPlacement === UDExCarouselNavigationPosition.bottom
+      && this.pageIndicatorType !== UDExCarouselPageIndicatorType.None
+    ) {
+      return true;
+    }
+    return false;
   }
 
   get autoplayToggleButtonTooltipText(): string {
@@ -436,6 +471,14 @@ class UDExCarousel extends UI5Element {
       ? translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_START)
       : translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_STOP);
   }
+
+  get sanitizedPageIndicatorType(): `${CarouselPageIndicatorType}` {
+    if (this.pageIndicatorType === UDExCarouselPageIndicatorType.None) {
+      return UDExCarouselPageIndicatorType.Default;
+    }
+
+    return this.pageIndicatorType;
+  }
 }
 
 UDExCarousel.define();