@sapudex/web-components 2.18.0 → 2.19.0

package/dist/generated/themes/Slider.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.css.js","sourceRoot":"","sources":["../../../src/generated/themes/Slider.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAChN,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"s\" + \"a\" + \"p\" + \"u\" + \"d\" + \"e\" + \"x\" + \"/\" + \"w\" + \"e\" + \"b\" + \"-\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme);\nexport default `:host{--udex-slider-color-track-start-point: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-track-active: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-handle-focus-range: var(--sapSlider_Selected_BorderColor, #0070f2);--udex-slider-color-handle-active-background: var(--sapSlider_Active_HandleBackground, #ffffff);--udex-slider-color-handle-default-icon: var(--sapContent_Selected_ForegroundColor, #0040b0);--udex-slider-radius-range-size: var(--udexRadiusM, 8px);--udex-slider-handle-width: 2.75rem;--udex-slider-handle-top: -.875rem;--udex-slider-handle-height: var(--udexSpacer32, 2rem);--udex-slider-start-end-point-left: -.875rem;--udex-slider-start-end-point-right: -.875rem;--udex-slider-progress-after-background: var(--sapContent_MeasureIndicatorColor,#5b738b);--udex-slider-handle-icon-size: var(--udexSpacer20, 1.25rem);--udex-slider-tooltip-bottom: 2.5rem;--udex-slider-tooltip-border: 1px solid var(--sapField_BorderColor, #5B738B);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize,14px);--udex-slider-tooltip-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-tooltip-height: var(--udexSpacer32, 2rem);--udex-slider-tooltip-min-width: 2.75rem;--udex-slider-tickmark-in-range-bg: var(--sapSlider_Selected_BorderColor,#0070f2);--udex-slider-tickmark-bg: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-label-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-focus-border: 2px solid var(--sapSlider_Active_HandleBorderColor);--udex-slider-progress-focus-top: -1.18rem;--udex-slider-progress-focus-left:calc(-1.375rem - 5px);--udex-slider-progress-focus-height: 42px;--udex-slider-progress-focus-width:calc(100% + 2.75rem + 10px)}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size);top:var(--udex-slider-progress-focus-top);height:var(--udex-slider-progress-focus-height);width:var(--udex-slider-progress-focus-width);left:var(--udex-slider-progress-focus-left)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v2-18-0_range_slider_handle_background_focus)}:host .ui5-slider-inner .ui5-slider-labels{top:34px}:host .ui5-slider-inner .ui5-slider-labels li{height:1.375rem;font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px)}[slider-icon]{color:var(--udex-slider-color-handle-default-icon)}.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle,.ui5-slider-handle:focus{border:var(--udex-slider-handle-focus-border)}.ui5-slider-labels li{color:var(--udex-slider-label-color)}.ui5-slider-tickmarks li{border-inline-start:1px solid var(--udex-slider-tickmark-bg)}.ui5-slider-tickmarks li.ui5-slider-tickmark-in-range{border-inline-start:1px solid var(--udex-slider-tickmark-in-range-bg)}:host(:not([hidden])) .ui5-slider-handle-container .ui5-slider-tooltip{bottom:var(--udex-slider-tooltip-bottom);border:var(--udex-slider-tooltip-border);border-radius:var(--udex-slider-tooltip-border-radius);font-size:var(--udex-slider-tooltip-font-size);color:var(--udex-slider-tooltip-color);height:var(--udex-slider-tooltip-height);min-width:var(--udex-slider-tooltip-min-width)}[slider-icon]{width:var(--udex-slider-handle-icon-size);height:var(--udex-slider-handle-icon-size)}.ui5-slider-progress-container:after{background-color:var(--udex-slider-progress-after-background)}.ui5-slider-progress-container:before{inset-inline-start:var(--udex-slider-start-end-point-left)}.ui5-slider-progress-container:after{inset-inline-end:var(--udex-slider-start-end-point-right)}.ui5-slider-handle-container{margin-inline-start:calc(-1 * var(--udex-slider-handle-width) / 2);top:var(--udex-slider-handle-top)}.ui5-slider-handle{height:var(--udex-slider-handle-height);width:var(--udex-slider-handle-width)}\n`"]}
+{"version":3,"file":"Slider.css.js","sourceRoot":"","sources":["../../../src/generated/themes/Slider.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAChN,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"s\" + \"a\" + \"p\" + \"u\" + \"d\" + \"e\" + \"x\" + \"/\" + \"w\" + \"e\" + \"b\" + \"-\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme);\nexport default `:host{--udex-slider-color-track-start-point: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-track-active: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-handle-focus-range: var(--sapSlider_Selected_BorderColor, #0070f2);--udex-slider-color-handle-active-background: var(--sapSlider_Active_HandleBackground, #ffffff);--udex-slider-color-handle-default-icon: var(--sapContent_Selected_ForegroundColor, #0040b0);--udex-slider-radius-range-size: var(--udexRadiusM, 8px);--udex-slider-handle-width: 2.75rem;--udex-slider-handle-top: -.875rem;--udex-slider-handle-height: var(--udexSpacer32, 2rem);--udex-slider-start-end-point-left: -.875rem;--udex-slider-start-end-point-right: -.875rem;--udex-slider-progress-after-background: var(--sapContent_MeasureIndicatorColor,#5b738b);--udex-slider-handle-icon-size: var(--udexSpacer20, 1.25rem);--udex-slider-tooltip-bottom: 2.5rem;--udex-slider-tooltip-border: 1px solid var(--sapField_BorderColor, #5B738B);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize,14px);--udex-slider-tooltip-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-tooltip-height: var(--udexSpacer32, 2rem);--udex-slider-tooltip-min-width: 2.75rem;--udex-slider-tickmark-in-range-bg: var(--sapSlider_Selected_BorderColor,#0070f2);--udex-slider-tickmark-bg: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-label-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-focus-border: 2px solid var(--sapSlider_Active_HandleBorderColor);--udex-slider-progress-focus-top: -1.18rem;--udex-slider-progress-focus-left:calc(-1.375rem - 5px);--udex-slider-progress-focus-height: 42px;--udex-slider-progress-focus-width:calc(100% + 2.75rem + 10px)}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size);top:var(--udex-slider-progress-focus-top);height:var(--udex-slider-progress-focus-height);width:var(--udex-slider-progress-focus-width);left:var(--udex-slider-progress-focus-left)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v2-19-0_range_slider_handle_background_focus)}:host .ui5-slider-inner .ui5-slider-labels{top:34px}:host .ui5-slider-inner .ui5-slider-labels li{height:1.375rem;font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px)}[slider-icon]{color:var(--udex-slider-color-handle-default-icon)}.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle,.ui5-slider-handle:focus{border:var(--udex-slider-handle-focus-border)}.ui5-slider-labels li{color:var(--udex-slider-label-color)}.ui5-slider-tickmarks li{border-inline-start:1px solid var(--udex-slider-tickmark-bg)}.ui5-slider-tickmarks li.ui5-slider-tickmark-in-range{border-inline-start:1px solid var(--udex-slider-tickmark-in-range-bg)}:host(:not([hidden])) .ui5-slider-handle-container .ui5-slider-tooltip{bottom:var(--udex-slider-tooltip-bottom);border:var(--udex-slider-tooltip-border);border-radius:var(--udex-slider-tooltip-border-radius);font-size:var(--udex-slider-tooltip-font-size);color:var(--udex-slider-tooltip-color);height:var(--udex-slider-tooltip-height);min-width:var(--udex-slider-tooltip-min-width)}[slider-icon]{width:var(--udex-slider-handle-icon-size);height:var(--udex-slider-handle-icon-size)}.ui5-slider-progress-container:after{background-color:var(--udex-slider-progress-after-background)}.ui5-slider-progress-container:before{inset-inline-start:var(--udex-slider-start-end-point-left)}.ui5-slider-progress-container:after{inset-inline-end:var(--udex-slider-start-end-point-right)}.ui5-slider-handle-container{margin-inline-start:calc(-1 * var(--udex-slider-handle-width) / 2);top:var(--udex-slider-handle-top)}.ui5-slider-handle{height:var(--udex-slider-handle-height);width:var(--udex-slider-handle-width)}\n`"]}

package/dist/messagebundle.properties

@@ -258,3 +258,7 @@ PROMO_TILE=Promo Tile
 
 #Promo Tile Icon aria label
 PROMO_TILE_ICON=Promo Tile Icon
+
+#Image Grid Tracker
+PLAY_BUTTON_ACCESSIBLE_NAME=Start button to begin customer logos rotation
+PAUSE_BUTTON_ACCESSIBLE_NAME=Pause button to stop customer logos rotation

package/dist/messagebundle_en.properties

@@ -125,3 +125,5 @@ SOCIAL_MEDIA_BUTTON=Social Media Button
 PROMO_TILE=Promo Tile
 PROMO_TILE_ICON=Promo Tile Icon
 BACK_TO_TOP=Back to top
+PLAY_BUTTON_ACCESSIBLE_NAME=Start button to begin customer logos rotation
+PAUSE_BUTTON_ACCESSIBLE_NAME=Pause button to stop customer logos rotation

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

@@ -218,6 +218,12 @@
       ],
       "references": []
     },
+    {
+      "name": "udex-busy-indicator",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-busy-indicator</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/BusyIndicator.js\";</code>\n\n\n---\n\n\n",
+      "attributes": [],
+      "references": []
+    },
     {
       "name": "udex-button",
       "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-button</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Button.js\";</code>\n\n\n---\n\n\n",
@@ -1067,7 +1073,7 @@
     },
     {
       "name": "udex-footer",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-footer</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Footer.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **logo-click** - Triggered on click interaction with logo in footer\n- **back-to-top-click** - Triggered on click interaction with \"Back to Top\" button\n- **contact-phone-click** - Triggered on click interaction with phone number link in footer\n- **contact-phone-local-numbers-click** - Triggered on click interaction with local country numbers list link\n- **contact-email-click** - Triggered on click interaction with \"Contact us by email\" link\n- **contact-chat-click** - Triggered on click interaction with \"Contact us by chat\" link\n- **quick-links-click** - Triggered on click interaction with a link within \"Quick Links\" category\n- **trending-click** - Triggered on click interaction with a link within \"Trending\" category\n- **about-sap-click** - Triggered on click interaction with a link within \"About SAP\" category\n- **site-information-click** - Triggered on click interaction with a link within \"Site Information\" category\n- **social-media-link-click** - Triggered on click interaction with any of the social media links within footer\n- **accordion-item-click** - Triggered when the user clicks on an accordion item.",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-footer</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Footer.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **logo-click** - Triggered on click interaction with logo in footer\n- **back-to-top-click** - Triggered on click interaction with \"Back to Top\" button\n- **contact-phone-click** - Triggered on click interaction with phone number link in footer\n- **contact-phone-local-numbers-click** - Triggered on click interaction with local country numbers list link\n- **contact-email-click** - Triggered on click interaction with \"Contact us by email\" link\n- **contact-chat-click** - Triggered on click interaction with \"Contact us by chat\" link\n- **quick-links-click** - Triggered on click interaction with a link within \"Quick Links\" category\n- **trending-click** - Triggered on click interaction with a link within \"Trending\" category\n- **about-sap-click** - Triggered on click interaction with a link within \"About SAP\" category\n- **site-information-click** - Triggered on click interaction with a link within \"Site Information\" category\n- **social-media-link-click** - Triggered on click interaction with any of the social media links within footer\n- **accordion-item-click** - Triggered when the user clicks on an accordion item.\n\n### **Slots:**\n - **customSocialLinks** - Defines the slot for custom Social Links.",
       "attributes": [
         {
           "name": "logo-title",
@@ -1230,6 +1236,41 @@
       ],
       "references": []
     },
+    {
+      "name": "udex-image-grid-ticker",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-image-grid-ticker</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ImageGridTicker.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **play-button-click** - Fired event when the user click on a play/paused button.\n\n### **Slots:**\n - **default** - Slot for image grid ticker items.",
+      "attributes": [
+        {
+          "name": "grayscale",
+          "description": "Grayscale mode enhances visual harmony and can be used for minimal,\nprofessional layouts or to de-emphasize logos.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "udex-image-grid-ticker-item",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-image-grid-ticker-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ImageGridTickerItem.js\";</code>\n\n\n---\n\n\n",
+      "attributes": [
+        {
+          "name": "src",
+          "description": "Defines the source URL",
+          "values": []
+        },
+        {
+          "name": "alt",
+          "description": "Defines image alt text",
+          "values": []
+        },
+        {
+          "name": "tooltip",
+          "description": "Defines tooltip on hover",
+          "values": []
+        },
+        { "name": "href", "description": "Defines link URL", "values": [] }
+      ],
+      "references": []
+    },
     {
       "name": "udex-input-group",
       "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-input-group</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/InputGroup.js\";</code>\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Slot for input elements items.",

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.18.0",
+  "version": "2.19.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -482,6 +482,14 @@
             "events": []
           }
         },
+        {
+          "name": "udex-busy-indicator",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-busy-indicator</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/BusyIndicator.js\";</code>\n---\n",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "udex-button",
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-button</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Button.js\";</code>\n---\n",
@@ -2366,7 +2374,7 @@
         },
         {
           "name": "udex-footer",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-footer</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Footer.js\";</code>\n---\n\n\n### **Events:**\n - **logo-click** - Triggered on click interaction with logo in footer\n- **back-to-top-click** - Triggered on click interaction with \"Back to Top\" button\n- **contact-phone-click** - Triggered on click interaction with phone number link in footer\n- **contact-phone-local-numbers-click** - Triggered on click interaction with local country numbers list link\n- **contact-email-click** - Triggered on click interaction with \"Contact us by email\" link\n- **contact-chat-click** - Triggered on click interaction with \"Contact us by chat\" link\n- **quick-links-click** - Triggered on click interaction with a link within \"Quick Links\" category\n- **trending-click** - Triggered on click interaction with a link within \"Trending\" category\n- **about-sap-click** - Triggered on click interaction with a link within \"About SAP\" category\n- **site-information-click** - Triggered on click interaction with a link within \"Site Information\" category\n- **social-media-link-click** - Triggered on click interaction with any of the social media links within footer\n- **accordion-item-click** - Triggered when the user clicks on an accordion item.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-footer</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Footer.js\";</code>\n---\n\n\n### **Events:**\n - **logo-click** - Triggered on click interaction with logo in footer\n- **back-to-top-click** - Triggered on click interaction with \"Back to Top\" button\n- **contact-phone-click** - Triggered on click interaction with phone number link in footer\n- **contact-phone-local-numbers-click** - Triggered on click interaction with local country numbers list link\n- **contact-email-click** - Triggered on click interaction with \"Contact us by email\" link\n- **contact-chat-click** - Triggered on click interaction with \"Contact us by chat\" link\n- **quick-links-click** - Triggered on click interaction with a link within \"Quick Links\" category\n- **trending-click** - Triggered on click interaction with a link within \"Trending\" category\n- **about-sap-click** - Triggered on click interaction with a link within \"About SAP\" category\n- **site-information-click** - Triggered on click interaction with a link within \"Site Information\" category\n- **social-media-link-click** - Triggered on click interaction with any of the social media links within footer\n- **accordion-item-click** - Triggered when the user clicks on an accordion item.\n\n### **Slots:**\n - **customSocialLinks** - Defines the slot for custom Social Links.",
           "doc-url": "",
           "attributes": [
             {
@@ -2490,6 +2498,12 @@
               "value": { "type": "string", "default": "chineseICPDefaultLink" }
             }
           ],
+          "slots": [
+            {
+              "name": "customSocialLinks",
+              "description": "Defines the slot for custom Social Links."
+            }
+          ],
           "events": [
             {
               "name": "logo-click",
@@ -2813,6 +2827,98 @@
             "events": []
           }
         },
+        {
+          "name": "udex-image-grid-ticker",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-image-grid-ticker</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ImageGridTicker.js\";</code>\n---\n\n\n### **Events:**\n - **play-button-click** - Fired event when the user click on a play/paused button.\n\n### **Slots:**\n - **default** - Slot for image grid ticker items.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "grayscale",
+              "description": "Grayscale mode enhances visual harmony and can be used for minimal,\nprofessional layouts or to de-emphasize logos.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Slot for image grid ticker items."
+            }
+          ],
+          "events": [
+            {
+              "name": "play-button-click",
+              "description": "Fired event when the user click on a play/paused button."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "grayscale",
+                "description": "Grayscale mode enhances visual harmony and can be used for minimal,\nprofessional layouts or to de-emphasize logos.",
+                "value": { "type": "boolean" }
+              }
+            ],
+            "events": [
+              {
+                "name": "play-button-click",
+                "description": "Fired event when the user click on a play/paused button."
+              }
+            ]
+          }
+        },
+        {
+          "name": "udex-image-grid-ticker-item",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-image-grid-ticker-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/ImageGridTickerItem.js\";</code>\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "src",
+              "description": "Defines the source URL",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "alt",
+              "description": "Defines image alt text",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "tooltip",
+              "description": "Defines tooltip on hover",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "href",
+              "description": "Defines link URL",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "src",
+                "description": "Defines the source URL",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "alt",
+                "description": "Defines image alt text",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "tooltip",
+                "description": "Defines tooltip on hover",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "href",
+                "description": "Defines link URL",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "udex-input-group",
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-input-group</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/InputGroup.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Slot for input elements items.",

package/package.json

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

package/src/AssetsVariables.ts

@@ -51,6 +51,12 @@ const variablesOverwrite = `
   [udex-search] {
     ${getScopedVarName("--_ui5_button_pressed_focused_border_color")}: transparent;
   }
+  
+  [udex-upload] {
+    ${getScopedVarName("--_ui5_input_focus_offset")}: 2px;
+    ${getScopedVarName("--_ui5_input_focus_border_radius")}: 0.375rem;
+    ${getScopedVarName("--_ui5_input_focus_outline_color")}: var(--sapContent_FocusColor);
+  }
 
   .sapUiSizeCompact,
   .ui5-content-density-compact,

package/src/BusyIndicator.ts

@@ -0,0 +1,33 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import UI5BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-busy-indicator</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/BusyIndicator.js";</code>
+ *
+ * @constructor
+ * @extends UI5BusyIndicator
+ * @tagname udex-busy-indicator
+ * @public
+ */
+@customElement({
+  tag: "udex-busy-indicator",
+  renderer: jsxRenderer,
+  styles: [UI5BusyIndicator.styles],
+})
+
+class UDExBusyIndicator extends UI5BusyIndicator {}
+
+UDExBusyIndicator.define();
+
+export default UDExBusyIndicator;

package/src/FilterMenu.ts

@@ -9,7 +9,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
-import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import UDExBusyIndicator from "./BusyIndicator.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
@@ -79,7 +79,7 @@ type UDExFilterMenuResetClickEventDetail = {
   dependencies: [
     Popover,
     Icon,
-    BusyIndicator,
+    UDExBusyIndicator,
     UDExFilterMenuItem,
     UDExFilterMenuGroupHeader,
     UDExFilterMenuSelectAll,

package/src/Footer.ts

@@ -3,6 +3,7 @@ import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
@@ -49,6 +50,7 @@ export type FooterLink = {
   title: string;
   url: string;
   target: UDExTarget;
+  role?: string;
 };
 
 export type FooterSocialLink = {
@@ -194,6 +196,16 @@ class UDExFooter extends UI5Element {
     "social-media-link-click": UDExFooterDetailedClickEventDetail,
     "accordion-item-click": UDExAccordionItemClickEventDetail,
   };
+
+  /**
+   * Defines the slot for custom Social Links.
+   *
+   * @slot content
+   * @public
+   */
+  @slot({ type: HTMLElement, individualSlots: true })
+    customSocialLinks!: Array<UDExSocialMediaButton>;
+
   /**
    * Defines the Logo default title
    *
@@ -574,6 +586,10 @@ class UDExFooter extends UI5Element {
     return UDExFooter.i18nBundle.getText(BACK_TO_TOP);
   }
 
+  get hasSocialLinksSlot(): boolean {
+    return !!this.customSocialLinks.length;
+  }
+
   _onLogoClick(e: MouseEvent): void {
     this.fireFooterBaseEvent(e, "logo-click");
   }

package/src/FooterTemplate.tsx

@@ -16,6 +16,7 @@ import UDExAccordionItem from "./AccordionItem.js";
 import UDExButton from "./Button.js";
 import UDExButtonDesign from "./types/ButtonDesign.js";
 import UDExButtonSize from "./types/ButtonSize.js";
+import type { AriaRole } from "@ui5/webcomponents-base";
 
 export default function FooterTemplate(this: Footer) {
   const rootClass = "udex-footer";
@@ -178,7 +179,7 @@ export default function FooterTemplate(this: Footer) {
           <span className={`${rootClass}__copyright-text`}>{this.copyrightText}</span>
         </div>
 
-        {this.socialLinksArray.length > 0 && (
+        {(this.socialLinksArray.length > 0 || this.hasSocialLinksSlot) && (
           <ul className={`${rootClass}__social-container`}>
             {this.socialLinksArray.map((social, index) => (
               <UDExSocialMediaButton
@@ -193,6 +194,13 @@ export default function FooterTemplate(this: Footer) {
                 onui5-click={this._onSocialMediaLinkClick}>
               </UDExSocialMediaButton>
             ))}
+            {this.hasSocialLinksSlot && (
+              <>
+                {this.customSocialLinks.map(link =>
+                  <slot name={link._individualSlot}></slot>
+                )}
+              </>
+            )}
           </ul>
         )}
       </div>
@@ -203,8 +211,7 @@ export default function FooterTemplate(this: Footer) {
         onClick={this.onBackToTopClick}
         design={UDExButtonDesign.Tertiary}
         size={UDExButtonSize.Large}
-        tooltip={this.backToTopTitle}
-        accessibleName={this.backToTopTitle}>
+        tooltip={this.backToTopTitle}>
       </UDExButton>
     </footer>
   );
@@ -224,7 +231,8 @@ function mobileNavigation(this: Footer, rootClass: string) {
                     aria-describedby={`${rootClass}__quick-links`}
                     href={link.url}
                     data-id={link.id}
-                    onClick={this._onQuickLinksClick}>
+                    onClick={this._onQuickLinksClick}
+                    {...(link.role ? { "role": link.role as AriaRole } : {})}>
                     {link.title}
                   </a>
                 </li>
@@ -248,7 +256,8 @@ function mobileNavigation(this: Footer, rootClass: string) {
                     aria-describedby={`${rootClass}__footer__trending`}
                     href={link.url}
                     data-id={link.id}
-                    onClick={this._onTrendingClick}>
+                    onClick={this._onTrendingClick}
+                    {...(link.role ? { "role": link.role as AriaRole } : {})}>
                     {link.title}
                   </a>
                 </li>
@@ -272,7 +281,8 @@ function mobileNavigation(this: Footer, rootClass: string) {
                     aria-describedby={`${rootClass}__about`}
                     href={link.url}
                     data-id={link.id}
-                    onClick={this._onAboutSapClick}>
+                    onClick={this._onAboutSapClick}
+                    {...(link.role ? { "role": link.role as AriaRole } : {})}>
                     {link.title}
                   </a>
                 </li>
@@ -296,7 +306,8 @@ function mobileNavigation(this: Footer, rootClass: string) {
                     aria-describedby={`${rootClass}__site-information`}
                     href={link.url}
                     data-id={link.id}
-                    onClick={this._onSiteInformationClick}>
+                    onClick={this._onSiteInformationClick}
+                    {...(link.role ? { "role": link.role as AriaRole } : {})}>
                     {link.title}
                   </a>
                 </li>
@@ -329,7 +340,8 @@ function desktopNavigation(this: Footer, rootClass: string) {
                     aria-describedby={`${rootClass}__quick-links`}
                     data-id={link.id}
                     href={link.url}
-                    onClick={this._onQuickLinksClick}>
+                    onClick={this._onQuickLinksClick}
+                    {...(link.role ? { "role": link.role as AriaRole } : {})}>
                     {link.title}
                   </a>
                 </li>
@@ -352,7 +364,8 @@ function desktopNavigation(this: Footer, rootClass: string) {
                     aria-describedby={`${rootClass}__footer__trending`}
                     data-id={link.id}
                     href={link.url}
-                    onClick={this._onTrendingClick}>
+                    onClick={this._onTrendingClick}
+                    {...(link.role ? { "role": link.role as AriaRole } : {})}>
                     {link.title}
                   </a>
                 </li>
@@ -375,7 +388,8 @@ function desktopNavigation(this: Footer, rootClass: string) {
                     aria-describedby={`${rootClass}__about`}
                     data-id={link.id}
                     href={link.url}
-                    onClick={this._onAboutSapClick}>
+                    onClick={this._onAboutSapClick}
+                    {...(link.role ? { "role": link.role as AriaRole } : {})}>
                     {link.title}
                   </a>
                 </li>
@@ -398,7 +412,8 @@ function desktopNavigation(this: Footer, rootClass: string) {
                     aria-describedby={`${rootClass}__site-information`}
                     data-id={link.id}
                     href={link.url}
-                    onClick={this._onSiteInformationClick}>
+                    onClick={this._onSiteInformationClick}
+                    {...(link.role ? { "role": link.role as AriaRole } : {})}>
                     {link.title}
                   </a>
                 </li>