@sapudex/web-components 2.14.0 → 2.15.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-14-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-15-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-14-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-15-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/utils/sanitizeString.d.ts

@@ -0,0 +1,2 @@
+declare const sanitizeString: (str: string) => string;
+export default sanitizeString;

package/dist/utils/sanitizeString.js

@@ -0,0 +1,12 @@
+const sanitizeString = (str) => {
+    const sanitized = str
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+    return sanitized.replace(/&lt;b&gt;/g, "<b>")
+        .replace(/&lt;\/b&gt;/g, "</b>");
+};
+export default sanitizeString;
+//# sourceMappingURL=sanitizeString.js.map

package/dist/utils/sanitizeString.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitizeString.js","sourceRoot":"","sources":["../../src/utils/sanitizeString.ts"],"names":[],"mappings":"AAAA,MAAM,cAAc,GAAG,CAAC,GAAW,EAAE,EAAE;IACrC,MAAM,SAAS,GAAG,GAAG;SAClB,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;SACtB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC;SACvB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAE3B,OAAO,SAAS,CAAC,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC;SAC1C,OAAO,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AACrC,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["const sanitizeString = (str: string) => {\n  const sanitized = str\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#039;\");\n\n  return sanitized.replace(/&lt;b&gt;/g, \"<b>\")\n    .replace(/&lt;\\/b&gt;/g, \"</b>\");\n};\n\nexport default sanitizeString;\n"]}

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.14.0",
+  "version": "2.15.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -467,7 +467,7 @@
             {
               "name": "icon",
               "description": "Defines item icon to be displayed before the item name.",
-              "value": { "type": "string | undefined", "default": "\"\"" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [],

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -50,7 +50,7 @@
     "@cypress/code-coverage": "^3.14.5",
     "@ui5/cypress-ct-ui5-webc": "^0.0.4",
     "@ui5/webcomponents-tools": "2.14.0",
-    "chromedriver": "138.0.1",
+    "chromedriver": "142.0.0",
     "cross-env": "^7.0.3",
     "cypress": "^14.3.3",
     "cypress-real-events": "^1.14.0",

package/src/Breadcrumbs.ts

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
@@ -14,7 +14,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UI5BreadcrumbsCss from "@ui5/webcomponents/dist/generated/themes/Breadcrumbs.css.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/home.js";
-import BreadcrumbsTemplate from "./generated/templates/BreadcrumbsTemplate.lit.js";
+import BreadcrumbsTemplate from "./BreadcrumbsTemplate.js";
 import UDExBreadcrumbsItem from "./BreadcrumbsItem.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExLink from "./Link.js";
@@ -24,8 +24,6 @@ import { BREADCRUMBS_ARIA_LABEL, BREADCRUMBS_OVERFLOW_ARIA_LABEL } from "./gener
 import BreadcrumbsCss from "./generated/themes/Breadcrumbs.css.js";
 import BreadcrumbsPopoverCss from "./generated/themes/BreadcrumbsPopover.css.js";
 
-const triggerActiveClass = "udex-breadcrumbs__trigger--opened";
-
 type UDExBreadcrumbsItemClickEventDetail = {
   item: UDExBreadcrumbsItem;
   altKey?: boolean;
@@ -53,7 +51,7 @@ type UDExBreadcrumbsItemClickEventDetail = {
  */
 @customElement({
   tag: "udex-breadcrumbs",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [UI5BreadcrumbsCss, BreadcrumbsCss, BreadcrumbsPopoverCss],
   template: BreadcrumbsTemplate,
   dependencies: [UDExBreadcrumbsItem, UDExLink, UDExDropdown, UI5Icon],
@@ -116,6 +114,12 @@ class UDExBreadcrumbs extends UI5Element {
   _responsivePopover?: UDExDropdown;
   _itemNavigation?: ItemNavigation;
   _shouldFocusFirstVisibleItem!: boolean;
+  _rootClass: string;
+
+  constructor() {
+    super();
+    this._rootClass = "udex-breadcrumbs";
+  }
 
   onBeforeRendering(): void {
     this._preprocessItems();
@@ -232,7 +236,7 @@ class UDExBreadcrumbs extends UI5Element {
   }
 
   _handleKeydown(e: KeyboardEvent): void {
-    const itemIndex = (e.target as HTMLElement).getAttribute("index");
+    const itemIndex = (e.target as HTMLElement).getAttribute("data-index");
     const isLastItem = itemIndex === (this.items.length - 2).toString();
     const isFirstItem = itemIndex === "0";
 
@@ -304,7 +308,8 @@ class UDExBreadcrumbs extends UI5Element {
   }
 
   get _triggerClass(): string {
-    return this._dropdownOpened ? triggerActiveClass : "";
+    const rootClass = "udex-breadcrumbs";
+    return this._dropdownOpened ? `${rootClass} ${rootClass}__trigger--opened` : rootClass;
   }
 
   get _accessibleNameText(): string {

package/src/BreadcrumbsItem.ts

@@ -24,11 +24,11 @@ import BreadcrumbsItem from "@ui5/webcomponents/dist/BreadcrumbsItem.js";
   tag: "udex-breadcrumbs-item",
   renderer: jsxRenderer,
 })
+
 class UDExBreadcrumbsItem extends BreadcrumbsItem {
   /**
    * Defines item icon to be displayed before the item name.
-   *
-   * @default ""
+   * @default undefined
    * @public
    */
   @property()

package/src/BreadcrumbsPopoverTemplate.tsx

@@ -0,0 +1,60 @@
+import type Breadcrumbs from "./Breadcrumbs.js";
+import UDExDropdown from "./Dropdown.js";
+import UDExLink from "./Link.js";
+import { Placement, HorizontalAlign } from "./types/Dropdown.js";
+
+export default function BreadcrumbsPopoverTemplate(this: Breadcrumbs) {
+  return (
+    <UDExDropdown
+      id={`udex-${this._id}-breadcrumbs__popover`}
+      opener={`udex-${this._id}-breadcrumbs__opener`}
+      class={`${this._rootClass}__popover ui5-breadcrumbs-popover`}
+      placement={Placement.Bottom}
+      horizontalAlign={HorizontalAlign.Start}
+      onKeyDown={this._handleKeydown}
+      onClose={this._afterDropdownClose}
+      onOpen={this._afterDropdownOpen}>
+      <div className={`${this._rootClass}__popover-content`}>
+        {this._dropdownItems.map((item, index) => (
+          item.icon ? (
+            <UDExLink
+              key={index}
+              data-index={index}
+              id={`${item._id}-li`}
+              onClick={this._onDropdownLinkPress}
+              href={item.href}
+              target={item.target}
+              class={`${this._rootClass}__item ${this._rootClass}__item--with-icon ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}
+              icon={item.icon}
+              accessibleName={item.textContent ?? undefined}
+              data-ui5-stable={item.stableDomRef}>
+              {item.textContent}
+            </UDExLink>
+          ) : item._isCurrentPageItem ? (
+            <span
+              key={index}
+              id={`${item._id}-li`}
+              className={`${this._rootClass}__item ${this._rootClass}__item--current ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}
+              accessible-name={item.accessibleName}
+              data-ui5-stable={item.stableDomRef}>
+              {item.textContent}
+            </span>
+          ) : (
+            <UDExLink
+              key={index}
+              data-index={index}
+              id={`${item._id}-li`}
+              onClick={this._onDropdownLinkPress}
+              href={item.href}
+              target={item.target}
+              class={`${this._rootClass}__item ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}
+              accessibleName={item.accessibleName}
+              data-ui5-stable={item.stableDomRef}>
+              {item.textContent}
+            </UDExLink>
+          )
+        ))}
+      </div>
+    </UDExDropdown>
+  );
+}

package/src/BreadcrumbsTemplate.tsx

@@ -0,0 +1,53 @@
+import type Breadcrumbs from "./Breadcrumbs.js";
+import UDExLink from "./Link.js";
+import UDExButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import BreadcrumbsPopoverTemplate from "./BreadcrumbsPopoverTemplate.js";
+
+export default function BreadcrumbsTemplate(this: Breadcrumbs) {
+  const rootClass = "udex-breadcrumbs";
+
+  return (
+    <>
+      <nav
+        class={`${this._rootClass} ui5-breadcrumbs-root`}
+        aria-label={this._accessibleNameText}>
+        <ol onFocusIn={this._onfocusin}>
+          <li class={`${this._rootClass}__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper`}>
+            <UDExLink
+              id={`udex-${this._id}-breadcrumbs__opener`}
+              class={`${this._rootClass}__trigger ${this._triggerClass}`}
+              onClick={this._toggleDropdown}
+              aria-label={this._dropdownArrowAccessibleNameText}
+              accessibleRole={UDExButtonAccessibleRole.Button}
+              icon={slimArrowDown}
+              aria-haspopup="true">
+            </UDExLink>
+          </li>
+          {this._linksData.map(linkData =>
+            <li
+              class={`${this._rootClass}__link-wrapper ui5-breadcrumbs-link-wrapper`}
+              id={`${linkData._id}-link-wrapper`}>
+              {!linkData._isCurrentPageItem && (
+                <>
+                  <span className={`${this._rootClass}__separator`} aria-hidden="true"></span>
+                  <UDExLink
+                    onClick={this._onLinkPress}
+                    id={`${linkData._id}-link`}
+                    class={`${rootClass}__item ${this._rootClass}__item--visible`}
+                    href={linkData.href}
+                    target={linkData.target}
+                    accessibleName={linkData._accessibleNameText}
+                    data-ui5-stable={linkData.stableDomRef}>
+                    {linkData.innerText}
+                  </UDExLink>
+                </>
+              )}
+            </li>
+          )}
+        </ol>
+      </nav>
+      {BreadcrumbsPopoverTemplate.call(this)}
+    </>
+  );
+}

package/src/FilterMenu.ts

@@ -332,8 +332,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   handleSelectAll(e:CustomEvent): void {
-    this.onFilterSelectAllHeaderPress(e);
-    this.fireDecoratorEvent("select-all");
+    this.onSelectAllHeaderPress(e);
   }
 
   handleItemPress(e:CustomEvent): void {

package/src/FilterMenuSelectAll.ts

@@ -28,10 +28,6 @@ class UDExFilterMenuSelectAll extends UDExListGroupHeaderBase {
   get isSelectAllHeader() {
     return true;
   }
-
-  get isFilterMenuSelectAllHeader() {
-    return true;
-  }
 }
 
 UDExFilterMenuSelectAll.define();

package/src/InputGroup.ts

@@ -1,13 +1,13 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import type UDExCheckbox from "./Checkbox.js";
 import type UDExRadioButton from "./RadioButton.js";
 import UDExStatusMessage from "./StatusMessage.js";
-import InputGroupTemplate from "./generated/templates/InputGroupTemplate.lit.js";
+import InputGroupTemplate from "./InputGroupTemplate.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
@@ -49,7 +49,7 @@ export enum UDExOrientation {
 
 @customElement({
   tag: "udex-input-group",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: InputGroupCss,
   template: InputGroupTemplate,
   dependencies: [Icon, UDExStatusMessage],
@@ -119,10 +119,6 @@ class UDExInputGroup extends UI5Element {
     };
   }
 
-  get hasValueState(): boolean {
-    return this.valueState !== "Standard";
-  }
-
   get valueStateText(): string | undefined {
     return this.supportingText || this.valueStateTypeMappings[this.valueState];
   }

package/src/InputGroupTemplate.tsx

@@ -0,0 +1,31 @@
+import type UDExInputGroup from "./InputGroup.js";
+import UDExStatusMessage from "./StatusMessage.js";
+
+export default function InputGroupTemplate(this: UDExInputGroup) {
+  const rootClass = "udex-input-group";
+
+  return (
+    <>
+      <div id={`${this._id}-input-group`}
+        class={`${rootClass}__container`}
+        role="group"
+        aria-describedby={`${this._id}-valueStateDesc`}>
+        <div class={`${rootClass}__content`}>
+          {this._items.map((itemInfo, index) => (
+            <div key={index} class={`${rootClass}__item`}>
+              <slot name={`${itemInfo.item._individualSlot}`}></slot>
+            </div>
+          ))}
+        </div>
+        {this.valueStateText && (
+          <>
+            <UDExStatusMessage supporting-text={this.valueStateText} value-state={this.valueState}></UDExStatusMessage>
+            <span id={`${this._id}-valueStateDesc`} class="hidden-text">
+              {this.valueStateText}
+            </span>
+          </>
+        )}
+      </div>
+    </>
+  );
+}

package/src/MastheadMobileMenu.ts

@@ -532,7 +532,7 @@ class UDExMastheadMobileMenu extends UI5Element {
       }
     }
 
-    if (isExploreMode) {
+    if (isExploreMode && this.hasExploreBtnSlot) {
       analyticsPath.unshift(this.exploreItem.label);
     }
 

package/src/Search.ts

@@ -39,6 +39,7 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 import type SearchInputSuggestion from "./features/SearchSuggestionsPopover.js";
 import retryUntilSuccessful from "./utils/retryUntilSuccessful.js";
+import sanitizeString from "./utils/sanitizeString.js";
 import UDExButton from "./Button.js";
 
 import SearchTemplate from "./generated/templates/SearchTemplate.lit.js";
@@ -690,12 +691,12 @@ class UDExSearch extends UI5Element {
       const label = itemWithCustomIcon ? item.label : item;
       return {
         handleSelectItem: this.handleSelectItem(label, idName),
-        text: this.getTextWithSuggestion(label),
-        title: label,
+        text: sanitizeString(this.getTextWithSuggestion(label)),
+        title: sanitizeString(label),
         icon: itemWithCustomIcon ? item.icon : SearchIcon,
         hasCustomIcon: itemWithCustomIcon,
         id: `${idName}-${index}`,
-        suggestionDescription: `${label}, ${idName} ${index + 1} ${UDExSearch.i18nBundle.getText(OF)} ${suggestedList.length}`,
+        suggestionDescription: sanitizeString(`${label}, ${idName} ${index + 1} ${UDExSearch.i18nBundle.getText(OF)} ${suggestedList.length}`),
       };
     });
   }
@@ -718,7 +719,7 @@ class UDExSearch extends UI5Element {
   };
 
   fireDropdownItemClick(value: string, categoryName: string) {
-    this.fireDecoratorEvent("dropdown-item-click", { value, categoryName });
+    this.fireDecoratorEvent("dropdown-item-click", { value: sanitizeString(value), categoryName });
   }
 
   handleDropdownClick() {

package/src/SearchableListBase.ts

@@ -250,18 +250,6 @@ class UDExSearchableListBase extends UI5Element {
     this.fireSelectionChange(dropdownItemId);
   }
 
-  onFilterSelectAllHeaderPress(e:CustomEvent) {
-    const dropdownHeaderItemId = this.getDataTokenId(e);
-    this.getProcessedItems().forEach(({ item }) => {
-      if (item._id === dropdownHeaderItemId) {
-        this.activateHeaderAndSetAllItems(item as UDExListGroupHeaderBase);
-      }
-    });
-
-    this.syncFilteredItems();
-    this.fireSelectionChange(dropdownHeaderItemId);
-  }
-
   activateHeaderAndSetAllItems(item: UDExListGroupHeaderBase) {
     item.activateHeader();
     item.setAllItems(false);
@@ -298,28 +286,29 @@ class UDExSearchableListBase extends UI5Element {
 
   handleGroupHeaderState(groupHeader: UDExListGroupHeaderBase) {
     if (this.modeMultiSelect) {
-      if (groupHeader.isFilterMenuSelectAllHeader) {
-        groupHeader.deactivateHeader();
-
-        if (groupHeader.isAllDeselected()) {
-          groupHeader.activateHeader();
-        }
-      } else {
-        groupHeader.handleHeaderState();
-      }
+      groupHeader.handleHeaderState();
     }
   }
 
   onHeaderPress(e:CustomEvent) {
-    const dropdownHeaderItemId = this.getDataTokenId(e);
+    this.handleGroupHeaderSelection(e);
+    this.syncFilteredItems();
+    this.fireSelectionChange(this.getDataTokenId(e));
+  }
+
+  onSelectAllHeaderPress(e:CustomEvent) {
+    this.handleGroupHeaderSelection(e);
+    this.syncFilteredItems();
+    this.fireDecoratorEvent("select-all");
+  }
+
+  handleGroupHeaderSelection(e: CustomEvent): void {
+    const headerItemId = this.getDataTokenId(e);
     this.getProcessedItems().forEach(({ item }) => {
-      if (item._id === dropdownHeaderItemId) {
+      if (item._id === headerItemId) {
         (item as UDExListGroupHeaderBase).handleSelectionGroupState();
       }
     });
-
-    this.syncFilteredItems();
-    this.fireSelectionChange(dropdownHeaderItemId);
   }
 
   onSearch(e:CustomEvent) {

package/src/SelectBox.ts

@@ -326,8 +326,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleSelectAll(e:CustomEvent) {
-    this.onHeaderPress(e);
-    this.fireDecoratorEvent("select-all");
+    this.onSelectAllHeaderPress(e);
   }
 
   handleHeaderPress(e:CustomEvent) {

package/src/TruncatedText.ts

@@ -1,17 +1,15 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { READ_LESS, READ_MORE } from "./generated/i18n/i18n-defaults.js";
-
-// Template
-import TruncatedTextTemplate from "./generated/templates/TruncatedTextTemplate.lit.js";
+import UDExButton from "./Button.js";
+import TruncatedTextTemplate from "./TruncatedTextTemplate.js";
 
 // Styles
 import TruncatedTextCss from "./generated/themes/TruncatedText.css.js";
-import UDExButton from "./Button.js";
 
 export enum ErrorVariableName {
   charLimit = "char-limit"
@@ -34,7 +32,7 @@ const lineEndRegExp = new RegExp(/($)|([,.]+)$|([,.]+)?\s+(\S*)$/);
  */
 @customElement({
   tag: "udex-truncated-text",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: TruncatedTextCss,
   template: TruncatedTextTemplate,
   dependencies: [UDExButton],
@@ -77,25 +75,21 @@ class UDExTruncatedText extends UI5Element {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  constructor() {
-    super();
-  }
-
-  get visibleText() {
+  get visibleText(): string {
     return this.initiallyExpanded ? `${this.text} ` : this.truncatedText;
   }
 
-  get truncatedText() {
+  get truncatedText(): string {
     return this.text.substring(0, this.cropAfter()).replace(lineEndRegExp, ellipsisSymbols);
   }
 
-  get buttonLabel() {
+  get buttonLabel(): string {
     return this.initiallyExpanded
       ? UDExTruncatedText.i18nBundle.getText(READ_LESS)
       : UDExTruncatedText.i18nBundle.getText(READ_MORE);
   }
 
-  get validatedCharLimit() {
+  get validatedCharLimit(): number {
     return (Number(this.charLimit) < 0) ? 0 : this.charLimit;
   }
 

package/src/TruncatedTextTemplate.tsx

@@ -0,0 +1,21 @@
+import type TruncatedText from "./TruncatedText.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import UDExButton from "./Button.js";
+
+export default function TruncatedTextTemplate(this: TruncatedText) {
+  const rootClass = "udex-truncated-text";
+  return (
+    <p className={rootClass}>
+      <span className={`${rootClass}__visible-text`}>{this.visibleText}</span>
+      <UDExButton
+        id="toggleButton"
+        class={`${rootClass}__toggle-button`}
+        design={UDExButtonDesign.Tertiary}
+        size={UDExButtonSize.Small}
+        onClick={this.onToggleClick}>
+        {this.buttonLabel}
+      </UDExButton>
+    </p>
+  );
+}