@sapudex/web-components 2.20.0 → 2.21.0

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

@@ -3,6 +3,6 @@ import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/s
 import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
-export 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-20-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)}
+export 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-21-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)}
 `;
 //# sourceMappingURL=Slider.css.js.map

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-20-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-21-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

@@ -117,6 +117,9 @@ CAROUSEL_NEXT_ARROW_TEXT=Next Page
 SHOW_RESULTS=Show Results
 RESET=Reset
 
+# Feed location icon accessible name
+LOCATION=Location
+
 # Filter Menu icon accessible name
 SELECT_OPTIONS=Select Options
 # Filter Menu select all header name

package/dist/messagebundle_en.properties

@@ -127,3 +127,4 @@ 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
+LOCATION=Location

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

@@ -285,6 +285,16 @@
           "description": "Defines the position of the navigation.\n<br><br>\nAvailable options are:\n<ul>\n<li><code>top</code> - the navigation button are placed above the component.</li>\n<li><code>bottom</code> - the navigation button arrows are placed below the component.</li>\n</ul>",
           "values": [{ "name": "top" }, { "name": "bottom" }]
         },
+        {
+          "name": "items-per-page",
+          "description": "Defines the number of items per page depending on the carousel width.\n\n- 'S' for screens smaller than 600 pixels.\n- 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n- 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n- 'XL' for screens greater than or equal to 1440 pixels.\n\nOne item per page is shown by default.",
+          "values": []
+        },
+        {
+          "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)",
+          "values": [{ "name": "Default" }, { "name": "Numeric" }]
+        },
         {
           "name": "accessible-name",
           "description": "Defines the accessible ARIA name of the component.",
@@ -707,6 +717,100 @@
       ],
       "references": []
     },
+    {
+      "name": "udex-feed",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-feed</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Feed.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 - **items** - Slot for feed items.",
+      "attributes": [
+        {
+          "name": "icon",
+          "description": "Defines the UI5 icon name in the pictogram section.",
+          "values": []
+        },
+        {
+          "name": "image-url",
+          "description": "Defines the image URL in the pictogram section.",
+          "values": []
+        },
+        {
+          "name": "image-label",
+          "description": "Defines the image aria label and alt in the pictogram section.",
+          "values": []
+        },
+        {
+          "name": "header",
+          "description": "Defines the header text of the component.",
+          "values": []
+        },
+        {
+          "name": "button",
+          "description": "Defines the CTA button label",
+          "values": []
+        },
+        {
+          "name": "button-design",
+          "description": "Defines the CTA button design",
+          "values": [{ "name": "UDExButtonDesign" }]
+        },
+        {
+          "name": "accessible-name",
+          "description": "Defines the accessible ARIA name of the component.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "udex-feed-item",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-feed-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/FeedItem.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **item-click** - Fires when item is clicked\n\n### **Slots:**\n - **avatar** - Receives the avatar",
+      "attributes": [
+        {
+          "name": "text",
+          "description": "Defines the link text",
+          "values": []
+        },
+        {
+          "name": "href",
+          "description": "Defines the link text URL",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "Defines target for the link",
+          "values": [{ "name": "UDExTarget" }]
+        },
+        {
+          "name": "details",
+          "description": "Defines the link text details",
+          "values": []
+        },
+        {
+          "name": "accessible-name",
+          "description": "Defines the accessible ARIA name of the link.",
+          "values": []
+        },
+        {
+          "name": "date",
+          "description": "Defines the date of the event",
+          "values": []
+        },
+        {
+          "name": "location",
+          "description": "Defines the location of the event",
+          "values": []
+        },
+        {
+          "name": "icon",
+          "description": "Defines the UI5 icon name",
+          "values": []
+        },
+        {
+          "name": "icon-accessible-name",
+          "description": "Defines the UI5 icon label",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "udex-filter-menu",
       "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-filter-menu</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExFilterMenu.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **reset-click** - Fired event when the user click on a reset button on the footer.\n- **result-click** - Fired event when the user click on a result button on the footer.\n- **select-all** - Fired event when the user click on Select All header item.\n- **before-open** - Fired before the dropdown pane is opened.\n- **after-open** - Fired after the dropdown pane is opened.\n- **before-close** - Fired before the dropdown pane is closed.\n- **after-close** - Fired after the dropdown pane is closed.\n- **selection-change** - \n- **submit-search** - Fired event when the user clicks on the submitted icon in the search.\n- **reset-search** - Fired event when the user clicks on the reset button in the search.\n- **change-search** - Fired event when the user submitted the value in the search.\n- **first-icon-click** - Fired event when the user clicks on the first icon.\n- **second-icon-click** - Fired event when the user clicks on the second icon.\n\n### **Methods:**\n - **close(): _void_** - Close the dropdown.\n- **resetSearch()** - Reset the search value.\n\n### **Slots:**\n - **default** - Slot for items.",
@@ -1199,6 +1303,16 @@
           "name": "chinese-icp-number-link",
           "description": "Defines a href for the chinese ICP Number link",
           "values": []
+        },
+        {
+          "name": "chinese-icp-number",
+          "description": "Defines text for the chinese ICP Number",
+          "values": []
+        },
+        {
+          "name": "chinese-security-network-number",
+          "description": "Defines text for the chinese security network number",
+          "values": []
         }
       ],
       "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.20.0",
+  "version": "2.21.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -574,6 +574,19 @@
               "description": "Defines the position of the navigation.\n<br><br>\nAvailable options are:\n<ul>\n<li><code>top</code> - the navigation button are placed above the component.</li>\n<li><code>bottom</code> - the navigation button arrows are placed below the component.</li>\n</ul>",
               "value": { "type": "\"top\" | \"bottom\"" }
             },
+            {
+              "name": "items-per-page",
+              "description": "Defines the number of items per page depending on the carousel width.\n\n- 'S' for screens smaller than 600 pixels.\n- 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n- 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n- 'XL' for screens greater than or equal to 1440 pixels.\n\nOne item per page is shown by default.",
+              "value": { "type": "string", "default": "\"S1 M1 L1 XL1\"" }
+            },
+            {
+              "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\"",
+                "default": "\"Default\""
+              }
+            },
             {
               "name": "accessible-name",
               "description": "Defines the accessible ARIA name of the component.",
@@ -594,6 +607,16 @@
                 "description": "Defines the position of the navigation.\n<br><br>\nAvailable options are:\n<ul>\n<li><code>top</code> - the navigation button are placed above the component.</li>\n<li><code>bottom</code> - the navigation button arrows are placed below the component.</li>\n</ul>",
                 "value": { "type": "\"top\" | \"bottom\"" }
               },
+              {
+                "name": "items-per-page",
+                "description": "Defines the number of items per page depending on the carousel width.\n\n- 'S' for screens smaller than 600 pixels.\n- 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n- 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n- 'XL' for screens greater than or equal to 1440 pixels.\n\nOne item per page is shown by default.",
+                "value": { "type": "string" }
+              },
+              {
+                "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\"" }
+              },
               {
                 "name": "accessible-name",
                 "description": "Defines the accessible ARIA name of the component.",
@@ -1511,6 +1534,217 @@
             "events": []
           }
         },
+        {
+          "name": "udex-feed",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-feed</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Feed.js\";</code>\n---\n\n\n### **Events:**\n - **button-click** - Triggered when the user clicks on the CTA button\n\n### **Slots:**\n - **items** - Slot for feed items.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "icon",
+              "description": "Defines the UI5 icon name in the pictogram section.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
+            {
+              "name": "image-url",
+              "description": "Defines the image URL in the pictogram section.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
+            {
+              "name": "image-label",
+              "description": "Defines the image aria label and alt in the pictogram section.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
+            {
+              "name": "header",
+              "description": "Defines the header text of the component.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
+            {
+              "name": "button",
+              "description": "Defines the CTA button label",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
+            {
+              "name": "button-design",
+              "description": "Defines the CTA button design",
+              "value": {
+                "type": "UDExButtonDesign",
+                "default": "\"UDExButtonDesign.Secondary\""
+              }
+            },
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible ARIA name of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
+          "slots": [{ "name": "items", "description": "Slot for feed items." }],
+          "events": [
+            {
+              "name": "button-click",
+              "description": "Triggered when the user clicks on the CTA button"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "icon",
+                "description": "Defines the UI5 icon name in the pictogram section.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "image-url",
+                "description": "Defines the image URL 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": "header",
+                "description": "Defines the header text of the component.",
+                "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" }
+              },
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible ARIA name of the component.",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": [
+              {
+                "name": "button-click",
+                "description": "Triggered when the user clicks on the CTA button"
+              }
+            ]
+          }
+        },
+        {
+          "name": "udex-feed-item",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-feed-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/FeedItem.js\";</code>\n---\n\n\n### **Events:**\n - **item-click** - Fires when item is clicked\n\n### **Slots:**\n - **avatar** - Receives the avatar",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "text",
+              "description": "Defines the link text",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "href",
+              "description": "Defines the link text URL",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "target",
+              "description": "Defines target for the link",
+              "value": { "type": "UDExTarget", "default": "UDExTarget._self" }
+            },
+            {
+              "name": "details",
+              "description": "Defines the link text details",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible ARIA name of the link.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "date",
+              "description": "Defines the date of the event",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "location",
+              "description": "Defines the location of the event",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "icon",
+              "description": "Defines the UI5 icon name",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "icon-accessible-name",
+              "description": "Defines the UI5 icon label",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
+          "slots": [{ "name": "avatar", "description": "Receives the avatar" }],
+          "events": [
+            {
+              "name": "item-click",
+              "description": "Fires when item is clicked"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "text",
+                "description": "Defines the link text",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "href",
+                "description": "Defines the link text URL",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "target",
+                "description": "Defines target for the link",
+                "value": { "type": "UDExTarget" }
+              },
+              {
+                "name": "details",
+                "description": "Defines the link text details",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible ARIA name of the link.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "date",
+                "description": "Defines the date of the event",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "location",
+                "description": "Defines the location of the event",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "icon",
+                "description": "Defines the UI5 icon name",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "icon-accessible-name",
+                "description": "Defines the UI5 icon label",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": [
+              {
+                "name": "item-click",
+                "description": "Fires when item is clicked"
+              }
+            ]
+          }
+        },
         {
           "name": "udex-filter-menu",
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-filter-menu</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExFilterMenu.js\";</code>\n---\n\n\n### **Events:**\n - **reset-click** - Fired event when the user click on a reset button on the footer.\n- **result-click** - Fired event when the user click on a result button on the footer.\n- **select-all** - Fired event when the user click on Select All header item.\n- **before-open** - Fired before the dropdown pane is opened.\n- **after-open** - Fired after the dropdown pane is opened.\n- **before-close** - Fired before the dropdown pane is closed.\n- **after-close** - Fired after the dropdown pane is closed.\n- **selection-change** - \n- **submit-search** - Fired event when the user clicks on the submitted icon in the search.\n- **reset-search** - Fired event when the user clicks on the reset button in the search.\n- **change-search** - Fired event when the user submitted the value in the search.\n- **first-icon-click** - Fired event when the user clicks on the first icon.\n- **second-icon-click** - Fired event when the user clicks on the second icon.\n\n### **Methods:**\n - **close(): _void_** - Close the dropdown.\n- **resetSearch()** - Reset the search value.\n\n### **Slots:**\n - **default** - Slot for items.",
@@ -2509,6 +2743,16 @@
               "name": "chinese-icp-number-link",
               "description": "Defines a href for the chinese ICP Number link",
               "value": { "type": "string", "default": "chineseICPDefaultLink" }
+            },
+            {
+              "name": "chinese-icp-number",
+              "description": "Defines text for the chinese ICP Number",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "chinese-security-network-number",
+              "description": "Defines text for the chinese security network number",
+              "value": { "type": "string" }
             }
           ],
           "slots": [
@@ -2688,6 +2932,16 @@
                 "name": "chinese-icp-number-link",
                 "description": "Defines a href for the chinese ICP Number link",
                 "value": { "type": "string" }
+              },
+              {
+                "name": "chinese-icp-number",
+                "description": "Defines text for the chinese ICP Number",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "chinese-security-network-number",
+                "description": "Defines text for the chinese security network number",
+                "value": { "type": "string" }
               }
             ],
             "events": [

package/package.json

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

package/src/AssetsVariables.ts

@@ -58,6 +58,10 @@ const variablesOverwrite = `
     ${getScopedVarName("--_ui5_input_focus_outline_color")}: var(--sapContent_FocusColor);
   }
 
+  [udex-feed] {
+    ${getScopedVarName("--_ui5_icon_transform_scale")}: none;
+  }
+
   .sapUiSizeCompact,
   .ui5-content-density-compact,
   [data-ui5-compact-size] {

package/src/Carousel.ts

@@ -11,11 +11,15 @@ import {
 import { CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT } from "./generated/i18n/i18n-defaults.js";
 import redirectAttributes from "./utils/redirectAttributes.js";
 import type UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
+import type Icon from "@ui5/webcomponents/dist/Icon.js";
 
 import CarouselTemplate from "./CarouselTemplate.js";
 
 // Styles
 import CarouselCss from "./generated/themes/Carousel.css.js";
+import type CarouselPageIndicatorType from "@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js";
+import type UDExButton from "./Button.js";
 
 export enum UDExCarouselNavigationPosition {
   top = "top",
@@ -76,6 +80,34 @@ class UDExCarousel extends UI5Element {
   @slot({ "default": true, type: HTMLElement, individualSlots: true })
     items!: Array<HTMLElement>;
 
+  /**
+   * Defines the number of items per page depending on the carousel width.
+   *
+   * - 'S' for screens smaller than 600 pixels.
+   * - 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.
+   * - 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.
+   * - 'XL' for screens greater than or equal to 1440 pixels.
+   *
+   * One item per page is shown by default.
+   * @default "S1 M1 L1 XL1"
+   * @public
+   */
+  @property()
+    itemsPerPage = "S1 M1 L1 XL1";
+
+  /**
+   * Defines the style of the page indicator.
+   * Available options are:
+   *
+   * - `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)
+   * - `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)
+   * @since 1.10
+   * @default "Default"
+   * @public
+   */
+  @property()
+    pageIndicatorType: `${CarouselPageIndicatorType}` = "Default";
+
   /**
    * Defines the prev button is disabled
    *
@@ -150,23 +182,21 @@ class UDExCarousel extends UI5Element {
     this.isNextButtonDisabled = !this._carousel?.hasNext;
   }
 
-  _prevButtonClick() {
+  _prevButtonClick(e: UI5CustomEvent<UDExButton, "click">) {
     if (this.isPrevButtonDisabled) {
       return;
     }
 
-    this._carousel?.navigateLeft();
-    this._ui5CarouselRoot?.focus();
+    this._carousel?._navButtonClick(e as unknown as UI5CustomEvent<Icon, "click">);
     this._calculateDisabledButtonsState();
   }
 
-  _nextButtonClick() {
+  _nextButtonClick(e: UI5CustomEvent<UDExButton, "click">) {
     if (this.isNextButtonDisabled) {
       return;
     }
 
-    this._carousel?.navigateRight();
-    this._ui5CarouselRoot?.focus();
+    this._carousel?._navButtonClick(e as unknown as UI5CustomEvent<Icon, "click">);
     this._calculateDisabledButtonsState();
   }
 

package/src/CarouselTemplate.tsx

@@ -12,6 +12,8 @@ export default function CarouselTemplate(this: Carousel) {
     <div className={this.carouselClass} onKeyDown={this._onkeydown}>
       {this.showNavigationButtons.top && navigation.call(this)}
       <UI5Carousel
+        itemsPerPage={this.itemsPerPage}
+        pageIndicatorType={this.pageIndicatorType}
         id="carousel"
         hideNavigationArrows
         arrowsPlacement={CarouselArrowsPlacement.Navigation}
@@ -32,6 +34,7 @@ function navigation(this: Carousel) {
   return (
     <div class="udex-carousel__navigation-wrapper" part="navigation">
       <UDExButton
+        data-ui5-arrow-back
         size={UDExButtonSize.Large}
         disabled={this.isPrevButtonDisabled}
         class={btnClassName}
@@ -42,6 +45,7 @@ function navigation(this: Carousel) {
         part="prev-button">
       </UDExButton>
       <UDExButton
+        data-ui5-arrow-forward
         size={UDExButtonSize.Large}
         disabled={this.isNextButtonDisabled}
         class={btnClassName}