@ui5/webcomponents 0.0.0-a3eca7ade → 0.0.0-a8a75c830

package/dist/SliderScale.js

@@ -0,0 +1,300 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var SliderScale_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import SliderBase from "./SliderBase.js";
+import SliderScaleTemplate from "./SliderScaleTemplate.js";
+import SliderScaleCss from "./generated/themes/SliderScale.css.js";
+var SliderScaleOrientation;
+(function (SliderScaleOrientation) {
+    /**
+     * Horizontal orientation
+     * @public
+     */
+    SliderScaleOrientation["Horizontal"] = "Horizontal";
+    /**
+     * Vertical orientation
+     * @private
+     */
+    SliderScaleOrientation["Vertical"] = "Vertical";
+})(SliderScaleOrientation || (SliderScaleOrientation = {}));
+let SliderScale = SliderScale_1 = class SliderScale extends UI5Element {
+    static get MIN_LABEL_DISTANCE() {
+        return 16;
+    }
+    static get MIN_SPACE_BETWEEN_TICKMARKS() {
+        return 8;
+    }
+    constructor() {
+        super();
+        /**
+         * Defines the start value of the progress bar.
+         * @default 0
+         * @private
+         */
+        this.startValue = 0;
+        /**
+         * Defines the end value of the progress bar.
+         * @default 100
+         * @private
+         */
+        this.endValue = 100;
+        /**
+         * Defines the minimum value of the scale.
+         * @default 0
+         * @private
+         */
+        this.min = 0;
+        /**
+         * Defines the maximum value of the scale.
+         * @default 100
+         * @private
+         */
+        this.max = 100;
+        /**
+         * Defines the step value for tickmarks.
+         * @default 1
+         * @private
+         */
+        this.step = 1;
+        /**
+         * Determines whether tickmarks should be displayed.
+         * @default false
+         * @private
+         */
+        this.showTickmarks = false;
+        /**
+         * Defines the orientation of the scale.
+         * @default "Horizontal"
+         * @private
+         */
+        this.orientation = "Horizontal";
+        /**
+         * Defines custom tickmarks to be displayed on the scale.
+         * @default []
+         * @private
+         */
+        this.tickmarks = [];
+        /**
+         * Defines the interval for displaying labels on tickmarks.
+         * @default 0
+         * @private
+         */
+        this.labelInterval = 0;
+        /**
+         * @private
+         */
+        this._labelInterval = 1;
+        this._labelsOverlapping = false;
+        this._hiddenTickmarks = false;
+        this._notResized = true;
+        this._resizeHandler = this._handleResize.bind(this);
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this, this._resizeHandler);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._resizeHandler);
+    }
+    onAfterRendering() {
+        if (this._notResized) {
+            this._handleResize();
+        }
+    }
+    /**
+     * Handle the responsiveness of the SliderScale's UI elements when resizing
+     * @private
+     */
+    _handleResize() {
+        if (!this.showTickmarks) {
+            this._hiddenTickmarks = false;
+            this._labelsOverlapping = false;
+            return;
+        }
+        // Mark resizing to avoid unnecessary calls to that function after rendering
+        this._notResized = false;
+        const containerSize = this.orientation === SliderScaleOrientation.Horizontal
+            ? this.getBoundingClientRect().width
+            : this.getBoundingClientRect().height;
+        const tickmarksCount = this._tickmarksCount;
+        // Check if tickmarks should be hidden due to insufficient space
+        if (tickmarksCount > 1) {
+            const spaceBetweenTickmarks = containerSize / tickmarksCount;
+            this._hiddenTickmarks = spaceBetweenTickmarks < SliderScale_1.MIN_SPACE_BETWEEN_TICKMARKS;
+        }
+        else {
+            this._hiddenTickmarks = false;
+        }
+        // Check if labels should be hidden due to insufficient space or overlapping
+        if (this.labelInterval <= 0 || this._hiddenTickmarks) {
+            this._labelsOverlapping = true;
+        }
+        else {
+            // Calculate if labels would overlap based on their estimated width
+            const visibleLabelCount = Math.ceil((tickmarksCount - 1) / this.labelInterval) + 1;
+            const estimatedLabelWidth = 32; // Estimated width in pixels for a label (2rem = ~32px)
+            const requiredWidth = visibleLabelCount * estimatedLabelWidth;
+            this._labelsOverlapping = containerSize < requiredWidth;
+        }
+    }
+    /**
+     * Calculates space between tickmarks
+     * @private
+     */
+    _spaceBetweenTickmarks() {
+        const tickmarksCount = this._tickmarksCount;
+        if (tickmarksCount <= 1) {
+            return 0;
+        }
+        const containerSize = this.orientation === SliderScaleOrientation.Horizontal
+            ? this.getBoundingClientRect().width
+            : this.getBoundingClientRect().height;
+        return containerSize / tickmarksCount;
+    }
+    get _tickmarksCount() {
+        if (this.step === 0) {
+            return 0;
+        }
+        return (this.max - this.min) / this.step;
+    }
+    get _visibleLabels() {
+        return this._tickmarks.filter(tick => tick.showLabel);
+    }
+    get _progressStyle() {
+        const range = this.max - this.min;
+        // Clamp startValue and endValue to be within min/max bounds
+        const clampedStartValue = Math.max(this.min, Math.min(this.startValue, this.max));
+        const clampedEndValue = Math.max(this.min, Math.min(this.endValue, this.max));
+        const start = ((clampedStartValue - this.min) / range) * 100;
+        const end = ((clampedEndValue - this.min) / range) * 100;
+        if (this.orientation === SliderScaleOrientation.Vertical) {
+            return {
+                top: "auto",
+                bottom: `${start}%`,
+                height: `${end - start}%`,
+            };
+        }
+        return {
+            insetInlineStart: `${start}%`,
+            width: `${end - start}%`,
+        };
+    }
+    get _allTickmarks() {
+        // If custom tickmarks are provided, use them
+        if (this.tickmarks.length > 0) {
+            return this.tickmarks;
+        }
+        // Otherwise, generate tickmarks based on step
+        if (!this.showTickmarks) {
+            return [];
+        }
+        if (this.step === 0) {
+            return [];
+        }
+        const values = [];
+        for (let value = this.min; value <= this.max; value += this.step) {
+            values.push({ value });
+        }
+        return values;
+    }
+    get _tickmarks() {
+        const allTickmarks = this._allTickmarks;
+        const stepPrecision = SliderBase._getDecimalPrecisionOfNumber(this.step);
+        const formatLabelPrecision = stepPrecision > 0 ? stepPrecision : 0;
+        if (allTickmarks.length === 0) {
+            return [];
+        }
+        return allTickmarks.map((tm, index) => {
+            const value = tm.value;
+            const isFirstOrLast = index === 0 || index === allTickmarks.length - 1;
+            const position = ((value - this.min) / (this.max - this.min)) * 100;
+            // Determine if this tickmark should be visible
+            const shouldShowTickmark = this._hiddenTickmarks ? isFirstOrLast : true;
+            // Determine if the label should be visible
+            let showLabel = false;
+            if (shouldShowTickmark && !this._labelsOverlapping) {
+                if (this.labelInterval > 0) {
+                    showLabel = index % this.labelInterval === 0;
+                }
+                else {
+                    showLabel = true;
+                }
+            }
+            else if (shouldShowTickmark && this._labelsOverlapping && this.labelInterval > 0) {
+                // When labels overlap, only show first and last
+                showLabel = isFirstOrLast;
+            }
+            return {
+                value,
+                label: tm.label || value.toFixed(formatLabelPrecision),
+                isInRange: value >= this.startValue && value <= this.endValue,
+                position,
+                showLabel,
+                visible: shouldShowTickmark,
+            };
+        }).filter(tick => tick.visible);
+    }
+};
+__decorate([
+    property({ type: Number })
+], SliderScale.prototype, "startValue", void 0);
+__decorate([
+    property({ type: Number })
+], SliderScale.prototype, "endValue", void 0);
+__decorate([
+    property({ type: Number })
+], SliderScale.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], SliderScale.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], SliderScale.prototype, "step", void 0);
+__decorate([
+    property({ type: Boolean })
+], SliderScale.prototype, "showTickmarks", void 0);
+__decorate([
+    property()
+], SliderScale.prototype, "orientation", void 0);
+__decorate([
+    property({ type: Array })
+], SliderScale.prototype, "tickmarks", void 0);
+__decorate([
+    property({ type: Number })
+], SliderScale.prototype, "labelInterval", void 0);
+__decorate([
+    property({ type: Number })
+], SliderScale.prototype, "_labelInterval", void 0);
+__decorate([
+    property({ type: Boolean })
+], SliderScale.prototype, "_labelsOverlapping", void 0);
+__decorate([
+    property({ type: Boolean })
+], SliderScale.prototype, "_hiddenTickmarks", void 0);
+__decorate([
+    slot({
+        type: HTMLElement,
+        "default": true,
+    })
+], SliderScale.prototype, "handles", void 0);
+SliderScale = SliderScale_1 = __decorate([
+    customElement({
+        tag: "ui5-slider-scale",
+        renderer: jsxRenderer,
+        styles: SliderScaleCss,
+        template: SliderScaleTemplate,
+    })
+], SliderScale);
+SliderScale.define();
+export default SliderScale;
+export { SliderScaleOrientation };
+//# sourceMappingURL=SliderScale.js.map

package/dist/SliderScale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderScale.js","sourceRoot":"","sources":["../src/SliderScale.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport SliderBase from \"./SliderBase.js\";\nimport SliderScaleTemplate from \"./SliderScaleTemplate.js\";\n\nimport SliderScaleCss from \"./generated/themes/SliderScale.css.js\";\nimport type SliderHandle from \"./SliderHandle.js\";\n\ntype Tickmark = {\n\tvalue: number;\n\tlabel?: string;\n};\n\nenum SliderScaleOrientation {\n\t/**\n\t * Horizontal orientation\n\t * @public\n\t */\n\tHorizontal = \"Horizontal\",\n\n\t/**\n\t * Vertical orientation\n\t * @private\n\t */\n\tVertical = \"Vertical\",\n}\n\n@customElement({\n\ttag: \"ui5-slider-scale\",\n\trenderer: jsxRenderer,\n\tstyles: SliderScaleCss,\n\ttemplate: SliderScaleTemplate,\n})\nclass SliderScale extends UI5Element {\n\t/**\n\t * Defines the start value of the progress bar.\n\t * @default 0\n\t * @private\n\t */\n\t@property({ type: Number })\n\tstartValue = 0;\n\n\t/**\n\t * Defines the end value of the progress bar.\n\t * @default 100\n\t * @private\n\t */\n\t@property({ type: Number })\n\tendValue = 100;\n\n\t/**\n\t * Defines the minimum value of the scale.\n\t * @default 0\n\t * @private\n\t */\n\t@property({ type: Number })\n\tmin = 0;\n\n\t/**\n\t * Defines the maximum value of the scale.\n\t * @default 100\n\t * @private\n\t */\n\t@property({ type: Number })\n\tmax = 100;\n\n\t/**\n\t * Defines the step value for tickmarks.\n\t * @default 1\n\t * @private\n\t */\n\t@property({ type: Number })\n\tstep = 1;\n\n\t/**\n\t * Determines whether tickmarks should be displayed.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tshowTickmarks = false;\n\n\t/**\n\t * Defines the orientation of the scale.\n\t * @default \"Horizontal\"\n\t * @private\n\t */\n\t@property()\n\torientation: `${SliderScaleOrientation}` = \"Horizontal\";\n\n\t/**\n\t * Defines custom tickmarks to be displayed on the scale.\n\t * @default []\n\t * @private\n\t */\n\t@property({ type: Array })\n\ttickmarks: Array<Tickmark> = [];\n\n\t/**\n\t * Defines the interval for displaying labels on tickmarks.\n\t * @default 0\n\t * @private\n\t */\n\t@property({ type: Number })\n\tlabelInterval = 0;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Number })\n\t_labelInterval = 1;\n\n\t@property({ type: Boolean })\n\t_labelsOverlapping = false;\n\n\t@property({ type: Boolean })\n\t_hiddenTickmarks = false;\n\n\t_resizeHandler: ResizeObserverCallback;\n\t_notResized = true;\n\n\t/**\n\t * Defines the component items.\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\t\"default\": true,\n\t})\n\thandles!: Array<SliderHandle>;\n\n\tstatic get MIN_LABEL_DISTANCE() {\n\t\treturn 16;\n\t}\n\n\tstatic get MIN_SPACE_BETWEEN_TICKMARKS() {\n\t\treturn 8;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._resizeHandler = this._handleResize.bind(this);\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._resizeHandler);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._resizeHandler);\n\t}\n\n\tonAfterRendering() {\n\t\tif (this._notResized) {\n\t\t\tthis._handleResize();\n\t\t}\n\t}\n\n\t/**\n\t * Handle the responsiveness of the SliderScale's UI elements when resizing\n\t * @private\n\t */\n\t_handleResize() {\n\t\tif (!this.showTickmarks) {\n\t\t\tthis._hiddenTickmarks = false;\n\t\t\tthis._labelsOverlapping = false;\n\t\t\treturn;\n\t\t}\n\n\t\t// Mark resizing to avoid unnecessary calls to that function after rendering\n\t\tthis._notResized = false;\n\n\t\tconst containerSize = this.orientation === SliderScaleOrientation.Horizontal\n\t\t\t? this.getBoundingClientRect().width\n\t\t\t: this.getBoundingClientRect().height;\n\n\t\tconst tickmarksCount = this._tickmarksCount;\n\n\t\t// Check if tickmarks should be hidden due to insufficient space\n\t\tif (tickmarksCount > 1) {\n\t\t\tconst spaceBetweenTickmarks = containerSize / tickmarksCount;\n\t\t\tthis._hiddenTickmarks = spaceBetweenTickmarks < SliderScale.MIN_SPACE_BETWEEN_TICKMARKS;\n\t\t} else {\n\t\t\tthis._hiddenTickmarks = false;\n\t\t}\n\n\t\t// Check if labels should be hidden due to insufficient space or overlapping\n\t\tif (this.labelInterval <= 0 || this._hiddenTickmarks) {\n\t\t\tthis._labelsOverlapping = true;\n\t\t} else {\n\t\t\t// Calculate if labels would overlap based on their estimated width\n\t\t\tconst visibleLabelCount = Math.ceil((tickmarksCount - 1) / this.labelInterval) + 1;\n\t\t\tconst estimatedLabelWidth = 32; // Estimated width in pixels for a label (2rem = ~32px)\n\t\t\tconst requiredWidth = visibleLabelCount * estimatedLabelWidth;\n\t\t\tthis._labelsOverlapping = containerSize < requiredWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Calculates space between tickmarks\n\t * @private\n\t */\n\t_spaceBetweenTickmarks() {\n\t\tconst tickmarksCount = this._tickmarksCount;\n\t\tif (tickmarksCount <= 1) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tconst containerSize = this.orientation === SliderScaleOrientation.Horizontal\n\t\t\t? this.getBoundingClientRect().width\n\t\t\t: this.getBoundingClientRect().height;\n\n\t\treturn containerSize / tickmarksCount;\n\t}\n\n\tget _tickmarksCount() {\n\t\tif (this.step === 0) {\n\t\t\treturn 0;\n\t\t}\n\n\t\treturn (this.max - this.min) / this.step;\n\t}\n\n\tget _visibleLabels() {\n\t\treturn this._tickmarks.filter(tick => tick.showLabel);\n\t}\n\n\tget _progressStyle() {\n\t\tconst range = this.max - this.min;\n\t\t// Clamp startValue and endValue to be within min/max bounds\n\t\tconst clampedStartValue = Math.max(this.min, Math.min(this.startValue, this.max));\n\t\tconst clampedEndValue = Math.max(this.min, Math.min(this.endValue, this.max));\n\n\t\tconst start = ((clampedStartValue - this.min) / range) * 100;\n\t\tconst end = ((clampedEndValue - this.min) / range) * 100;\n\n\t\tif (this.orientation === SliderScaleOrientation.Vertical) {\n\t\t\treturn {\n\t\t\t\ttop: \"auto\",\n\t\t\t\tbottom: `${start}%`,\n\t\t\t\theight: `${end - start}%`,\n\t\t\t};\n\t\t}\n\n\t\treturn {\n\t\t\tinsetInlineStart: `${start}%`,\n\t\t\twidth: `${end - start}%`,\n\t\t};\n\t}\n\n\tget _allTickmarks() {\n\t\t// If custom tickmarks are provided, use them\n\t\tif (this.tickmarks.length > 0) {\n\t\t\treturn this.tickmarks;\n\t\t}\n\n\t\t// Otherwise, generate tickmarks based on step\n\t\tif (!this.showTickmarks) {\n\t\t\treturn [];\n\t\t}\n\n\t\tif (this.step === 0) {\n\t\t\treturn [];\n\t\t}\n\n\t\tconst values = [];\n\t\tfor (let value = this.min; value <= this.max; value += this.step) {\n\t\t\tvalues.push({ value });\n\t\t}\n\t\treturn values;\n\t}\n\n\tget _tickmarks() {\n\t\tconst allTickmarks = this._allTickmarks;\n\t\tconst stepPrecision = SliderBase._getDecimalPrecisionOfNumber(this.step);\n\t\tconst formatLabelPrecision = stepPrecision > 0 ? stepPrecision : 0;\n\n\t\tif (allTickmarks.length === 0) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn allTickmarks.map((tm, index) => {\n\t\t\tconst value = tm.value;\n\t\t\tconst isFirstOrLast = index === 0 || index === allTickmarks.length - 1;\n\t\t\tconst position = ((value - this.min) / (this.max - this.min)) * 100;\n\n\t\t\t// Determine if this tickmark should be visible\n\t\t\tconst shouldShowTickmark = this._hiddenTickmarks ? isFirstOrLast : true;\n\n\t\t\t// Determine if the label should be visible\n\t\t\tlet showLabel = false;\n\t\t\tif (shouldShowTickmark && !this._labelsOverlapping) {\n\t\t\t\tif (this.labelInterval > 0) {\n\t\t\t\t\tshowLabel = index % this.labelInterval === 0;\n\t\t\t\t} else {\n\t\t\t\t\tshowLabel = true;\n\t\t\t\t}\n\t\t\t} else if (shouldShowTickmark && this._labelsOverlapping && this.labelInterval > 0) {\n\t\t\t\t// When labels overlap, only show first and last\n\t\t\t\tshowLabel = isFirstOrLast;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tvalue,\n\t\t\t\tlabel: tm.label || value.toFixed(formatLabelPrecision),\n\t\t\t\tisInRange: value >= this.startValue && value <= this.endValue,\n\t\t\t\tposition,\n\t\t\t\tshowLabel,\n\t\t\t\tvisible: shouldShowTickmark,\n\t\t\t};\n\t\t}).filter(tick => tick.visible);\n\t}\n}\n\nSliderScale.define();\n\nexport default SliderScale;\nexport { SliderScaleOrientation };\nexport type { Tickmark };\n"]}

package/dist/SliderScaleTemplate.d.ts

@@ -0,0 +1,2 @@
+import type SliderScale from "./SliderScale.js";
+export default function SliderScaleTemplate(this: SliderScale): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/SliderScaleTemplate.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+export default function SliderScaleTemplate() {
+    return (_jsxs("div", { class: "ui5-slider-scale-root", part: "inner", children: [this._tickmarks.length > 0 && (_jsx("div", { class: "ui5-slider-scale-tickmarks-container", children: this._tickmarks.map(tick => (_jsx("div", { class: {
+                        "ui5-slider-scale-tickmark": true,
+                        "ui5-slider-scale-tickmark-in-range": tick.isInRange,
+                    }, style: {
+                        insetInlineStart: `${this.orientation === "Horizontal" ? tick.position : "50"}%`,
+                        bottom: `${this.orientation === "Vertical" ? tick.position : "auto"}%`
+                    }, children: tick.label && tick.showLabel && (_jsx("span", { class: "ui5-slider-scale-tickmark-label", children: tick.label })) }))) })), _jsx("div", { class: "ui5-slider-scale-progress", part: "progress", style: this._progressStyle }), _jsx("slot", {})] }));
+}
+//# sourceMappingURL=SliderScaleTemplate.js.map

package/dist/SliderScaleTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderScaleTemplate.js","sourceRoot":"","sources":["../src/SliderScaleTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,eAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO,aAC7C,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,IAAI,CAC9B,cAAK,KAAK,EAAC,sCAAsC,YAC/C,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC5B,cACC,KAAK,EAAE;wBACN,2BAA2B,EAAE,IAAI;wBACjC,oCAAoC,EAAE,IAAI,CAAC,SAAS;qBACpD,EACD,KAAK,EAAE;wBACN,gBAAgB,EAAE,GAAG,IAAI,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,GAAG;wBAChF,MAAM,EAAE,GAAG,IAAI,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,GAAG;qBACtE,YAEA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,IAAI,CAChC,eAAM,KAAK,EAAC,iCAAiC,YAC3C,IAAI,CAAC,KAAK,GACL,CACP,GACI,CACN,CAAC,GACG,CACN,EACD,cAAK,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,cAAc,GAAQ,EACzF,gBAAa,IACR,CACN,CAAC;AACH,CAAC","sourcesContent":["import type SliderScale from \"./SliderScale.js\";\n\nexport default function SliderScaleTemplate(this: SliderScale) {\n\treturn (\n\t\t<div class=\"ui5-slider-scale-root\" part=\"inner\">\n\t\t\t{this._tickmarks.length > 0 && (\n\t\t\t\t<div class=\"ui5-slider-scale-tickmarks-container\">\n\t\t\t\t\t{this._tickmarks.map(tick => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\"ui5-slider-scale-tickmark\": true,\n\t\t\t\t\t\t\t\t\"ui5-slider-scale-tickmark-in-range\": tick.isInRange,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tinsetInlineStart: `${this.orientation === \"Horizontal\" ? tick.position : \"50\"}%`,\n\t\t\t\t\t\t\t\tbottom: `${this.orientation === \"Vertical\" ? tick.position : \"auto\"}%`\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{tick.label && tick.showLabel && (\n\t\t\t\t\t\t\t\t<span class=\"ui5-slider-scale-tickmark-label\">\n\t\t\t\t\t\t\t\t\t{tick.label}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div class=\"ui5-slider-scale-progress\" part=\"progress\" style={this._progressStyle}></div>\n\t\t\t<slot></slot>\n\t\t</div>\n\t);\n}\n"]}

package/dist/SliderTemplate.d.ts

@@ -0,0 +1,2 @@
+import type Slider from "./Slider.js";
+export default function SliderTemplate(this: Slider): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/SliderTemplate.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import SliderTooltip from "./SliderTooltip.js";
+import SliderHandle from "./SliderHandle.js";
+import SliderScale from "./SliderScale.js";
+const _handlePosition = (min, max, value) => {
+    const range = max - min;
+    const position = ((value - min) / range) * 100;
+    return position;
+};
+const handle = (slider) => {
+    const position = _handlePosition(slider.min, slider.max, slider.value);
+    return (_jsxs(_Fragment, { children: [_jsx(SliderHandle, { "data-sap-focus-ref": true, value: slider.value, min: slider.min, max: slider.max, tabIndex: slider.disabled ? -1 : 0, disabled: slider.disabled, "aria-orientation": "horizontal", part: "handle", exportparts: "icon: handle-icon", role: "slider", "aria-valuemin": slider.min, "aria-valuemax": slider.max, "aria-valuenow": slider.value, "aria-label": slider._ariaLabel, "aria-disabled": slider._ariaDisabled, "aria-keyshortcuts": slider._ariaKeyshortcuts, "aria-describedby": slider._ariaDescribedByHandleText, style: {
+                    "inset-inline-start": `clamp(0%, ${position}%, 100%)`,
+                } }), tooltip(slider)] }));
+};
+const tooltip = (slider) => (_jsx(SliderTooltip, { open: slider._tooltipsOpen, value: slider.tooltipValue, min: slider.min, max: slider.max, editable: slider.editableTooltip, followRef: slider.shadowRoot?.querySelector("[ui5-slider-handle]"), valueState: slider.tooltipValueState, onChange: slider._onTooltipChange, onKeyDown: slider._onTooltipKeydown, onFocusChange: slider._onTooltipFocusChange, onOpen: slider._onTooltipOpen, onInput: slider._onTooltipInput }));
+export default function SliderTemplate() {
+    return (_jsx(_Fragment, { children: _jsx("div", { class: "ui5-slider-evo-root", part: "root-container", onMouseDown: this._onmousedown, onTouchStart: this._onmousedown, onMouseOver: this._onmouseover, onMouseOut: this._onmouseout, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, children: _jsxs(SliderScale, { endValue: this.value, min: this.min, max: this.max, step: this.step, startValue: this.min, showTickmarks: this.showTickmarks, labelInterval: this.labelInterval, onFocusOut: this._onfocusout, onFocusIn: this._onfocusin, part: "scale", exportparts: "inner: scale-inner, progress: progress", children: [handle(this), this.editableTooltip && _jsx(_Fragment, { children: _jsx("span", { id: "ui5-slider-InputDesc", class: "ui5-hidden-text", children: this._ariaDescribedByInputText }) })] }) }) }));
+}
+//# sourceMappingURL=SliderTemplate.js.map

package/dist/SliderTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderTemplate.js","sourceRoot":"","sources":["../src/SliderTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type Slider from \"./Slider.js\";\nimport SliderTooltip from \"./SliderTooltip.js\";\nimport SliderHandle from \"./SliderHandle.js\";\nimport SliderScale from \"./SliderScale.js\";\n\nconst _handlePosition = (min: number, max: number, value: number) => {\n\tconst range = max - min;\n\tconst position = ((value - min) / range) * 100;\n\treturn position;\n};\n\nconst handle = (slider: Slider) => {\n\tconst position = _handlePosition(slider.min, slider.max, slider.value);\n\n\treturn (\n\t\t<>\n\t\t\t<SliderHandle\n\t\t\t\tdata-sap-focus-ref\n\t\t\t\tvalue={slider.value}\n\t\t\t\tmin={slider.min}\n\t\t\t\tmax={slider.max}\n\t\t\t\ttabIndex={slider.disabled ? -1 : 0}\n\t\t\t\tdisabled={slider.disabled}\n\t\t\t\taria-orientation=\"horizontal\"\n\t\t\t\tpart=\"handle\"\n\t\t\t\texportparts=\"icon: handle-icon\"\n\t\t\t\trole=\"slider\"\n\t\t\t\taria-valuemin={slider.min}\n\t\t\t\taria-valuemax={slider.max}\n\t\t\t\taria-valuenow={slider.value}\n\t\t\t\taria-label={slider._ariaLabel}\n\t\t\t\taria-disabled={slider._ariaDisabled}\n\t\t\t\taria-keyshortcuts={slider._ariaKeyshortcuts}\n\t\t\t\taria-describedby={slider._ariaDescribedByHandleText}\n\t\t\t\tstyle={{\n\t\t\t\t\t\"inset-inline-start\": `clamp(0%, ${position}%, 100%)`,\n\t\t\t\t}}\n\t\t\t></SliderHandle>\n\n\t\t\t{tooltip(slider)}\n\t\t</>\n\t);\n};\n\nconst tooltip = (slider: Slider) => (\n\t<SliderTooltip\n\t\topen={slider._tooltipsOpen}\n\t\tvalue={slider.tooltipValue}\n\t\tmin={slider.min}\n\t\tmax={slider.max}\n\t\teditable={slider.editableTooltip}\n\t\tfollowRef={slider.shadowRoot?.querySelector(\"[ui5-slider-handle]\") as HTMLElement}\n\t\tvalueState={slider.tooltipValueState}\n\t\tonChange={slider._onTooltipChange}\n\t\tonKeyDown={slider._onTooltipKeydown}\n\t\tonFocusChange={slider._onTooltipFocusChange}\n\t\tonOpen={slider._onTooltipOpen}\n\t\tonInput={slider._onTooltipInput}\n\t>\n\t</SliderTooltip>\n);\n\nexport default function SliderTemplate(this: Slider) {\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tclass=\"ui5-slider-evo-root\"\n\t\t\t\tpart=\"root-container\"\n\t\t\t\tonMouseDown={this._onmousedown}\n\t\t\t\tonTouchStart={this._onmousedown}\n\t\t\t\tonMouseOver={this._onmouseover}\n\t\t\t\tonMouseOut={this._onmouseout}\n\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\tonKeyUp={this._onkeyup}\n\t\t\t>\n\t\t\t\t<SliderScale\n\t\t\t\t\tendValue={this.value}\n\t\t\t\t\tmin={this.min}\n\t\t\t\t\tmax={this.max}\n\t\t\t\t\tstep={this.step}\n\t\t\t\t\tstartValue={this.min}\n\t\t\t\t\tshowTickmarks={this.showTickmarks}\n\t\t\t\t\tlabelInterval={this.labelInterval}\n\t\t\t\t\tonFocusOut={this._onfocusout}\n\t\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t\t\tpart=\"scale\"\n\t\t\t\t\texportparts=\"inner: scale-inner, progress: progress\"\n\t\t\t\t>\n\t\t\t\t\t{handle(this)}\n\n\t\t\t\t\t{this.editableTooltip && <>\n\t\t\t\t\t\t<span id=\"ui5-slider-InputDesc\" class=\"ui5-hidden-text\">{this._ariaDescribedByInputText}</span>\n\t\t\t\t\t</>}\n\t\t\t\t</SliderScale>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"]}

package/dist/SliderTooltip.d.ts

@@ -0,0 +1,51 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import type Input from "./Input.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { Interval } from "@ui5/webcomponents-base/dist/types.js";
+type SliderTooltipChangeEventDetails = {
+    value: string;
+};
+/**
+ * @class
+ *
+ * ### Overview
+ * @constructor
+ * @extends UI5Element
+ * @private
+ */
+declare class SliderTooltip extends UI5Element {
+    eventDetails: {
+        "change": SliderTooltipChangeEventDetails;
+        "focus-change": void;
+        "open": void;
+        "input": {
+            value?: string;
+        };
+    };
+    value: string;
+    open: boolean;
+    min: number;
+    max: number;
+    editable: boolean;
+    valueState: `${ValueState}`;
+    followRef?: HTMLElement;
+    _repoisitionInterval?: Interval;
+    _repositionTooltipBound: () => void;
+    static i18nBundle: I18nBundle;
+    _open: boolean;
+    constructor();
+    onBeforeRendering(): void;
+    onAfterRendering(): void;
+    repositionTooltip(): void;
+    attachGlobalScrollHandler(): void;
+    detachGlobalScrollHandler(): void;
+    _onInputFocusin(): void;
+    _onInputKeydown(e: KeyboardEvent): void;
+    _onInputInput(): void;
+    _onInputFocusOut(e: FocusEvent): void;
+    get _ariaLabelledByInputText(): string;
+    get inputRef(): Input | null | undefined;
+}
+export type { SliderTooltipChangeEventDetails, };
+export default SliderTooltip;

package/dist/SliderTooltip.js

@@ -0,0 +1,162 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var SliderTooltip_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { customElement, i18n, property } from "@ui5/webcomponents-base/dist/decorators.js";
+import SliderTooltipTemplate from "./SliderTooltipTemplate.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import SliderTooltipCss from "./generated/themes/SliderTooltip.css.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import { SLIDER_TOOLTIP_INPUT_LABEL, } from "./generated/i18n/i18n-defaults.js";
+import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+/**
+ * @class
+ *
+ * ### Overview
+ * @constructor
+ * @extends UI5Element
+ * @private
+ */
+let SliderTooltip = SliderTooltip_1 = class SliderTooltip extends UI5Element {
+    constructor() {
+        super();
+        this.value = "";
+        this.open = false;
+        this.min = 0;
+        this.max = 100;
+        this.editable = false;
+        this.valueState = "None";
+        this._open = false;
+        this._repositionTooltipBound = this.repositionTooltip.bind(this);
+    }
+    onBeforeRendering() {
+        if (this.open !== this._open) {
+            this.fireDecoratorEvent("open");
+        }
+        this._open = this.open;
+    }
+    onAfterRendering() {
+        if (!this.hasAttribute("popover")) {
+            this.setAttribute("popover", "manual");
+        }
+        if (this.isConnected) {
+            if (this.open) {
+                this.showPopover();
+                this.repositionTooltip();
+                this.attachGlobalScrollHandler();
+            }
+            else {
+                this.hidePopover();
+                this.detachGlobalScrollHandler();
+            }
+        }
+    }
+    repositionTooltip() {
+        const followRefRect = this.followRef?.getBoundingClientRect();
+        if (!followRefRect) {
+            return;
+        }
+        this.style.top = `${followRefRect.top}px`;
+        // center the tooltip's mid and opener's mid
+        const tooltipWidth = this.offsetWidth;
+        const followRefWidth = followRefRect.width;
+        const tooltipMidX = tooltipWidth / 2;
+        const followRefMidX = followRefWidth / 2;
+        this.style.left = `${followRefRect.left + followRefMidX - tooltipMidX}px`;
+        // enable RTL support
+        this.style.right = "auto";
+    }
+    attachGlobalScrollHandler() {
+        document.addEventListener("scroll", this._repositionTooltipBound, { capture: true });
+    }
+    detachGlobalScrollHandler() {
+        document.removeEventListener("scroll", this._repositionTooltipBound, { capture: true });
+    }
+    _onInputFocusin() {
+        requestAnimationFrame(() => {
+            this.hidePopover();
+            this.showPopover();
+        });
+    }
+    _onInputKeydown(e) {
+        if (isEnter(e)) {
+            this.fireDecoratorEvent("change", { value: e.target.value });
+        }
+    }
+    _onInputInput() {
+        this.fireDecoratorEvent("input", { value: this.inputRef?.value });
+    }
+    _onInputFocusOut(e) {
+        const relatedTarget = e.relatedTarget;
+        if (!this.parentElement?.contains(relatedTarget)) {
+            this.hidePopover();
+        }
+        this.fireDecoratorEvent("change", { value: e.target.value });
+        this.fireDecoratorEvent("focus-change");
+    }
+    get _ariaLabelledByInputText() {
+        return SliderTooltip_1.i18nBundle.getText(SLIDER_TOOLTIP_INPUT_LABEL);
+    }
+    get inputRef() {
+        return this.shadowRoot?.querySelector("[ui5-input]");
+    }
+};
+__decorate([
+    property()
+], SliderTooltip.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], SliderTooltip.prototype, "open", void 0);
+__decorate([
+    property({ type: Number })
+], SliderTooltip.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], SliderTooltip.prototype, "max", void 0);
+__decorate([
+    property({ type: Boolean })
+], SliderTooltip.prototype, "editable", void 0);
+__decorate([
+    property()
+], SliderTooltip.prototype, "valueState", void 0);
+__decorate([
+    property({ type: Object })
+], SliderTooltip.prototype, "followRef", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], SliderTooltip, "i18nBundle", void 0);
+SliderTooltip = SliderTooltip_1 = __decorate([
+    customElement({
+        tag: "ui5-slider-tooltip",
+        renderer: jsxRenderer,
+        template: SliderTooltipTemplate,
+        styles: SliderTooltipCss,
+    })
+    /**
+     * Fired when the value is confirmed by user interaction (Enter key or focusout)
+     */
+    ,
+    event("change")
+    /**
+     * Fired when the value is changed by user interaction
+     */
+    ,
+    event("input")
+    /**
+     * Fired when the tooltip is opened or closed
+     */
+    ,
+    event("open")
+    /**
+     * Fired when the tooltip focus changes
+     */
+    ,
+    event("focus-change")
+], SliderTooltip);
+SliderTooltip.define();
+export default SliderTooltip;
+//# sourceMappingURL=SliderTooltip.js.map

package/dist/SliderTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderTooltip.js","sourceRoot":"","sources":["../src/SliderTooltip.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAG3F,OAAO,qBAAqB,MAAM,4BAA4B,CAAC;AAC/D,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,gBAAgB,MAAM,yCAAyC,CAAC;AACvE,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAG5E,OAAO,EACN,0BAA0B,GAC1B,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAM/D;;;;;;;GAOG;AA4BH,IAAM,aAAa,qBAAnB,MAAM,aAAc,SAAQ,UAAU;IAsCrC;QACC,KAAK,EAAE,CAAC;QA5BT,UAAK,GAAG,EAAE,CAAC;QAGX,SAAI,GAAG,KAAK,CAAC;QAGb,QAAG,GAAG,CAAC,CAAC;QAGR,QAAG,GAAG,GAAG,CAAC;QAGV,aAAQ,GAAG,KAAK,CAAC;QAGjB,eAAU,GAAoB,MAAM,CAAC;QAUrC,UAAK,GAAY,KAAK,CAAC;QAKtB,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClE,CAAC;IAED,iBAAiB;QAChB,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;YAC9B,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;QACjC,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;IACxB,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACxC,CAAC;QAED,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACf,IAAI,CAAC,WAAW,EAAE,CAAC;gBACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBACzB,IAAI,CAAC,yBAAyB,EAAE,CAAC;YAClC,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,WAAW,EAAE,CAAC;gBACnB,IAAI,CAAC,yBAAyB,EAAE,CAAC;YAClC,CAAC;QACF,CAAC;IACF,CAAC;IAED,iBAAiB;QAChB,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,EAAE,qBAAqB,EAAE,CAAC;QAC9D,IAAI,CAAC,aAAa,EAAE,CAAC;YACpB,OAAO;QACR,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,aAAa,CAAC,GAAG,IAAI,CAAC;QAE1C,4CAA4C;QAC5C,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC;QACtC,MAAM,cAAc,GAAG,aAAa,CAAC,KAAK,CAAC;QAE3C,MAAM,WAAW,GAAG,YAAY,GAAG,CAAC,CAAC;QACrC,MAAM,aAAa,GAAG,cAAc,GAAG,CAAC,CAAC;QAEzC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,aAAa,CAAC,IAAI,GAAG,aAAa,GAAG,WAAW,IAAI,CAAC;QAE1E,qBAAqB;QACrB,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;IAC3B,CAAC;IAED,yBAAyB;QACxB,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACtF,CAAC;IAED,yBAAyB;QACxB,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACzF,CAAC;IAED,eAAe;QACd,qBAAqB,CAAC,GAAG,EAAE;YAC1B,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,WAAW,EAAE,CAAC;QACpB,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,eAAe,CAAC,CAAgB;QAC/B,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAChB,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAG,CAAC,CAAC,MAAgB,CAAC,KAAK,EAAE,CAAC,CAAC;QACzE,CAAC;IACF,CAAC;IAED,aAAa;QACZ,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;IACnE,CAAC;IAED,gBAAgB,CAAC,CAAa;QAC7B,MAAM,aAAa,GAAG,CAAC,CAAC,aAA4B,CAAC;QAErD,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;YAClD,IAAI,CAAC,WAAW,EAAE,CAAC;QACpB,CAAC;QAED,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAG,CAAC,CAAC,MAAgB,CAAC,KAAK,EAAE,CAAC,CAAC;QACxE,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACzC,CAAC;IAED,IAAI,wBAAwB;QAC3B,OAAO,eAAa,CAAC,UAAU,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;IACrE,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,UAAU,EAAE,aAAa,CAAQ,aAAa,CAAC,CAAC;IAC7D,CAAC;CACD,CAAA;AA1HA;IADC,QAAQ,EAAE;4CACA;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACf;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACnB;AAGR;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACX;AAGjB;IADC,QAAQ,EAAE;iDAC0B;AAGrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACH;AAMjB;IADN,IAAI,CAAC,oBAAoB,CAAC;uCACG;AAnCzB,aAAa;IA3BlB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;QACzB,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,qBAAqB;QAC/B,MAAM,EAAE,gBAAgB;KACxB,CAAC;IAEF;;OAEG;;IACF,KAAK,CAAC,QAAQ,CAAC;IAEhB;;OAEG;;IACF,KAAK,CAAC,OAAO,CAAC;IAEf;;OAEG;;IACF,KAAK,CAAC,MAAM,CAAC;IAEd;;OAEG;;IACF,KAAK,CAAC,cAAc,CAAC;GAEhB,aAAa,CAqIlB;AAED,aAAa,CAAC,MAAM,EAAE,CAAC;AAMvB,eAAe,aAAa,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport { customElement, i18n, property } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport type ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\n\nimport SliderTooltipTemplate from \"./SliderTooltipTemplate.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport SliderTooltipCss from \"./generated/themes/SliderTooltip.css.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport type Input from \"./Input.js\";\n\nimport {\n\tSLIDER_TOOLTIP_INPUT_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { Interval } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\n\ntype SliderTooltipChangeEventDetails = {\n\tvalue: string,\n};\n\n/**\n * @class\n *\n * ### Overview\n * @constructor\n * @extends UI5Element\n * @private\n */\n@customElement({\n\ttag: \"ui5-slider-tooltip\",\n\trenderer: jsxRenderer,\n\ttemplate: SliderTooltipTemplate,\n\tstyles: SliderTooltipCss,\n})\n\n/**\n * Fired when the value is confirmed by user interaction (Enter key or focusout)\n */\n@event(\"change\")\n\n/**\n * Fired when the value is changed by user interaction\n */\n@event(\"input\")\n\n/**\n * Fired when the tooltip is opened or closed\n */\n@event(\"open\")\n\n/**\n * Fired when the tooltip focus changes\n */\n@event(\"focus-change\")\n\nclass SliderTooltip extends UI5Element {\n\teventDetails!: {\n\t\t\"change\": SliderTooltipChangeEventDetails,\n\t\t\"focus-change\": void,\n\t\t\"open\": void,\n\t\t\"input\": {\n\t\t\tvalue?: string,\n\t\t},\n\t};\n\n\t@property()\n\tvalue = \"\";\n\n\t@property({ type: Boolean })\n\topen = false;\n\n\t@property({ type: Number })\n\tmin = 0;\n\n\t@property({ type: Number })\n\tmax = 100;\n\n\t@property({ type: Boolean })\n\teditable = false;\n\n\t@property()\n\tvalueState: `${ValueState}` = \"None\";\n\n\t@property({ type: Object })\n\tfollowRef?: HTMLElement;\n\n\t_repoisitionInterval?: Interval;\n\t_repositionTooltipBound: () => void;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\t_open: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._repositionTooltipBound = this.repositionTooltip.bind(this);\n\t}\n\n\tonBeforeRendering(): void {\n\t\tif (this.open !== this._open) {\n\t\t\tthis.fireDecoratorEvent(\"open\");\n\t\t}\n\n\t\tthis._open = this.open;\n\t}\n\n\tonAfterRendering(): void {\n\t\tif (!this.hasAttribute(\"popover\")) {\n\t\t\tthis.setAttribute(\"popover\", \"manual\");\n\t\t}\n\n\t\tif (this.isConnected) {\n\t\t\tif (this.open) {\n\t\t\t\tthis.showPopover();\n\t\t\t\tthis.repositionTooltip();\n\t\t\t\tthis.attachGlobalScrollHandler();\n\t\t\t} else {\n\t\t\t\tthis.hidePopover();\n\t\t\t\tthis.detachGlobalScrollHandler();\n\t\t\t}\n\t\t}\n\t}\n\n\trepositionTooltip(): void {\n\t\tconst followRefRect = this.followRef?.getBoundingClientRect();\n\t\tif (!followRefRect) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.style.top = `${followRefRect.top}px`;\n\n\t\t// center the tooltip's mid and opener's mid\n\t\tconst tooltipWidth = this.offsetWidth;\n\t\tconst followRefWidth = followRefRect.width;\n\n\t\tconst tooltipMidX = tooltipWidth / 2;\n\t\tconst followRefMidX = followRefWidth / 2;\n\n\t\tthis.style.left = `${followRefRect.left + followRefMidX - tooltipMidX}px`;\n\n\t\t// enable RTL support\n\t\tthis.style.right = \"auto\";\n\t}\n\n\tattachGlobalScrollHandler() {\n\t\tdocument.addEventListener(\"scroll\", this._repositionTooltipBound, { capture: true });\n\t}\n\n\tdetachGlobalScrollHandler() {\n\t\tdocument.removeEventListener(\"scroll\", this._repositionTooltipBound, { capture: true });\n\t}\n\n\t_onInputFocusin() {\n\t\trequestAnimationFrame(() => {\n\t\t\tthis.hidePopover();\n\t\t\tthis.showPopover();\n\t\t});\n\t}\n\n\t_onInputKeydown(e: KeyboardEvent) {\n\t\tif (isEnter(e)) {\n\t\t\tthis.fireDecoratorEvent(\"change\", { value: (e.target as Input).value });\n\t\t}\n\t}\n\n\t_onInputInput() {\n\t\tthis.fireDecoratorEvent(\"input\", { value: this.inputRef?.value });\n\t}\n\n\t_onInputFocusOut(e: FocusEvent) {\n\t\tconst relatedTarget = e.relatedTarget as HTMLElement;\n\n\t\tif (!this.parentElement?.contains(relatedTarget)) {\n\t\t\tthis.hidePopover();\n\t\t}\n\n\t\tthis.fireDecoratorEvent(\"change\", { value: (e.target as Input).value });\n\t\tthis.fireDecoratorEvent(\"focus-change\");\n\t}\n\n\tget _ariaLabelledByInputText() {\n\t\treturn SliderTooltip.i18nBundle.getText(SLIDER_TOOLTIP_INPUT_LABEL);\n\t}\n\n\tget inputRef() {\n\t\treturn this.shadowRoot?.querySelector<Input>(\"[ui5-input]\");\n\t}\n}\n\nSliderTooltip.define();\n\nexport type {\n\tSliderTooltipChangeEventDetails,\n};\n\nexport default SliderTooltip;\n"]}

package/dist/SliderTooltipTemplate.d.ts

@@ -0,0 +1,2 @@
+import type SliderTooltip from "./SliderTooltip.js";
+export default function SliderTooltipTemplate(this: SliderTooltip): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/SliderTooltipTemplate.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Input from "./Input.js";
+export default function SliderTooltipTemplate() {
+    return (_jsxs("div", { class: "ui5-slider-tooltip-root", children: [this.editable ?
+                _jsx(Input, { value: this.value, type: "Number", accessibleNameRef: "ui5-slider-InputLabel", onFocusIn: this._onInputFocusin, onFocusOut: this._onInputFocusOut, onKeyDown: this._onInputKeydown, onInput: this._onInputInput, tabIndex: -1, "data-sap-focus-ref": true, valueState: this.valueState }) :
+                _jsx("span", { class: "ui5-slider-tooltip-value", children: this.value }), this.editable && _jsx(_Fragment, { children: _jsx("span", { id: "ui5-slider-InputLabel", class: "ui5-hidden-text", children: this._ariaLabelledByInputText }) })] }));
+}
+//# sourceMappingURL=SliderTooltipTemplate.js.map

package/dist/SliderTooltipTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderTooltipTemplate.js","sourceRoot":"","sources":["../src/SliderTooltipTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAG/B,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC5C,OAAO,CACN,eAAK,KAAK,EAAC,yBAAyB,aAClC,IAAI,CAAC,QAAQ,CAAC,CAAC;gBACf,KAAC,KAAK,IACL,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAC,QAAQ,EACb,iBAAiB,EAAC,uBAAuB,EACzC,SAAS,EAAE,IAAI,CAAC,eAAe,EAC/B,UAAU,EAAE,IAAI,CAAC,gBAAgB,EACjC,SAAS,EAAE,IAAI,CAAC,eAAe,EAC/B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,CAAC,CAAC,8BAEZ,UAAU,EAAE,IAAI,CAAC,UAAU,GACnB,CAAC,CAAC;gBACX,eAAM,KAAK,EAAC,0BAA0B,YAAE,IAAI,CAAC,KAAK,GAAQ,EAG1D,IAAI,CAAC,QAAQ,IAAI,4BACjB,eAAM,EAAE,EAAC,uBAAuB,EAAC,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,wBAAwB,GAAQ,GAC7F,IACE,CACN,CAAC;AACH,CAAC","sourcesContent":["import Input from \"./Input.js\";\nimport type SliderTooltip from \"./SliderTooltip.js\";\n\nexport default function SliderTooltipTemplate(this: SliderTooltip) {\n\treturn (\n\t\t<div class=\"ui5-slider-tooltip-root\">\n\t\t\t{this.editable ?\n\t\t\t\t<Input\n\t\t\t\t\tvalue={this.value}\n\t\t\t\t\ttype=\"Number\"\n\t\t\t\t\taccessibleNameRef=\"ui5-slider-InputLabel\"\n\t\t\t\t\tonFocusIn={this._onInputFocusin}\n\t\t\t\t\tonFocusOut={this._onInputFocusOut}\n\t\t\t\t\tonKeyDown={this._onInputKeydown}\n\t\t\t\t\tonInput={this._onInputInput}\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\tdata-sap-focus-ref\n\t\t\t\t\tvalueState={this.valueState}\n\t\t\t\t></Input> :\n\t\t\t\t<span class=\"ui5-slider-tooltip-value\">{this.value}</span>\n\t\t\t}\n\n\t\t\t{this.editable && <>\n\t\t\t\t<span id=\"ui5-slider-InputLabel\" class=\"ui5-hidden-text\">{this._ariaLabelledByInputText}</span>\n\t\t\t</>}\n\t\t</div>\n\t);\n}\n"]}