@ui5/webcomponents 2.20.0-rc.0 → 2.20.0-rc.2

package/dist/Slider.js

@@ -12,6 +12,7 @@ import { isEscape, isF2 } from "@ui5/webcomponents-base/dist/Keys.js";
 import SliderBase from "./SliderBase.js";
 // Template
 import SliderTemplate from "./SliderTemplate.js";
+import styles from "./generated/themes/Slider.css.js";
 // Texts
 import { SLIDER_ARIA_DESCRIPTION, SLIDER_TOOLTIP_INPUT_DESCRIPTION, SLIDER_TOOLTIP_INPUT_LABEL, } from "./generated/i18n/i18n-defaults.js";
 /**
@@ -82,60 +83,36 @@ let Slider = Slider_1 = class Slider extends SliderBase {
          * @public
          */
         this.value = 0;
+        /**
+         * Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).
+         *
+         * **Note:** If set to 0 the slider handle movement is disabled.
+         * @default 1
+         * @public
+         */
+        this.step = 1;
         this.tooltipValueState = "None";
         this.tooltipValue = "";
         this._progressPercentage = 0;
         this._handlePositionFromStart = 0;
-        this._stateStorage.value = undefined;
         this._lastValidInputValue = this.min.toString();
     }
     /**
-     *
-     * Check if the previously saved state is outdated. That would mean
-     * either it is the initial rendering or that a property has been changed
-     * programmatically - because the previous state is always updated in
-     * the interaction handlers.
-     *
-     * Normalize current properties, update the previously stored state.
-     * Update the visual UI representation of the Slider.
-     *
+     * The value is visually clamped to min/max but the property is not modified.
+     * @private
      */
     onBeforeRendering() {
-        if (!this.isCurrentStateOutdated()) {
-            return;
-        }
-        this.notResized = true;
-        this.syncUIAndState();
-        this._updateHandleAndProgress(this.value);
+        // Clamp value visually without modifying the actual value property
+        const ctor = this.constructor;
+        const clampedValue = ctor.clipValue(this.value, this.min, this.max);
+        this._updateHandleAndProgress(clampedValue);
     }
     onAfterRendering() {
         super.onAfterRendering();
         this.tooltip?.repositionTooltip();
     }
-    syncUIAndState() {
-        // Validate step and update the stored state for the step property.
-        if (this.isPropertyUpdated("step")) {
-            this._validateStep(this.step);
-            this.storePropertyState("step");
-        }
-        // Recalculate the tickmarks and labels and update the stored state.
-        if (this.isPropertyUpdated("min", "max", "value")) {
-            this.storePropertyState("min", "max");
-            // Here the value props are changed programmatically (not by user interaction)
-            // and it won't be "stepified" (rounded to the nearest step). 'Clip' them within
-            // min and max bounderies and update the previous state reference.
-            this.value = SliderBase.clipValue(this.value, this._effectiveMin, this._effectiveMax);
-            this.updateStateStorageAndFireInputEvent("value");
-            this.storePropertyState("value");
-        }
-        // Labels must be updated if any of the min/max/step/labelInterval props are changed
-        if (this.labelInterval && this.showTickmarks) {
-            this._createLabels();
-        }
-        // Update the stored state for the labelInterval, if changed
-        if (this.isPropertyUpdated("labelInterval")) {
-            this.storePropertyState("labelInterval");
-        }
+    _handleResize() {
+        // TODO: Remove after refactoring Base and RangeSlider
     }
     /**
      * Called when the user starts interacting with the slider
@@ -157,8 +134,10 @@ let Slider = Slider_1 = class Slider extends SliderBase {
         // Do not yet update the Slider if press is over a handle. It will be updated if the user drags the mouse.
         const ctor = this.constructor;
         if (!this._isHandlePressed(ctor.getPageXValueFromEvent(e))) {
+            const stepPrecision = ctor._getDecimalPrecisionOfNumber(this.step);
             this._updateHandleAndProgress(newValue);
             this.value = newValue;
+            this.tooltipValue = newValue.toFixed(stepPrecision);
             this.updateStateStorageAndFireInputEvent("value");
         }
     }
@@ -188,18 +167,19 @@ let Slider = Slider_1 = class Slider extends SliderBase {
     }
     _onTooltipChange(e) {
         const value = parseFloat(e.detail.value);
-        const isInvalid = value < this._effectiveMin || value > this._effectiveMax;
+        const isInvalid = (value < this.min || value > this.max) || Number.isNaN(value);
         if (isInvalid) {
             this.tooltipValueState = "Negative";
             this.tooltipValue = `${value}`;
             return;
         }
+        this.tooltipValueState = "None";
         this.value = value;
         this.fireDecoratorEvent("change");
     }
     _onTooltipFocusChange() {
         const value = parseFloat(this.tooltipValue);
-        const isInvalid = value < this._effectiveMin || value > this._effectiveMax;
+        const isInvalid = (value < this.min || value > this.max) || Number.isNaN(value);
         if (isInvalid) {
             this.tooltipValueState = "None";
             this.tooltipValue = this.value.toString();
@@ -213,7 +193,7 @@ let Slider = Slider_1 = class Slider extends SliderBase {
     }
     _onTooltipOpen() {
         const ctor = this.constructor;
-        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
+        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this.step);
         this.tooltipValue = this.value.toFixed(stepPrecision);
     }
     _onTooltipInput(e) {
@@ -225,16 +205,12 @@ let Slider = Slider_1 = class Slider extends SliderBase {
      */
     _handleMove(e) {
         e.preventDefault();
-        // If step is 0 no interaction is available because there is no constant
-        // (equal for all user environments) quantitative representation of the value
-        if (this.disabled || this._effectiveStep === 0) {
-            return;
-        }
         const ctor = this.constructor;
-        const newValue = ctor.getValueFromInteraction(e, this._effectiveStep, this._effectiveMin, this._effectiveMax, this.getBoundingClientRect(), this.directionStart);
+        const newValue = ctor.getValueFromInteraction(e, this.step, this.min, this.max, this.getBoundingClientRect(), this.directionStart);
+        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this.step);
         this._updateHandleAndProgress(newValue);
         this.value = newValue;
-        this.tooltipValue = newValue.toString();
+        this.tooltipValue = newValue.toFixed(stepPrecision);
         this.updateStateStorageAndFireInputEvent("value");
     }
     /** Called when the user finish interacting with the slider
@@ -266,23 +242,24 @@ let Slider = Slider_1 = class Slider extends SliderBase {
      * @private
      */
     _updateHandleAndProgress(newValue) {
-        const max = this._effectiveMax;
-        const min = this._effectiveMin;
+        const max = this.max;
+        const min = this.min;
         // The progress (completed) percentage of the slider.
         this._progressPercentage = (newValue - min) / (max - min);
         // How many pixels from the left end of the slider will be the placed the affected  by the user action handle
         this._handlePositionFromStart = this._progressPercentage * 100;
     }
     _handleActionKeyPress(e) {
-        const min = this._effectiveMin;
-        const max = this._effectiveMax;
+        const min = this.min;
+        const max = this.max;
         const currentValue = this.value;
         const ctor = this.constructor;
         const newValue = isEscape(e) ? this._valueInitial : ctor.clipValue(this._handleActionKeyPressBase(e, "value") + currentValue, min, max);
         if (newValue !== currentValue) {
+            const stepPrecision = ctor._getDecimalPrecisionOfNumber(this.step);
             this._updateHandleAndProgress(newValue);
             this.value = newValue;
-            this.tooltipValue = this.value.toString();
+            this.tooltipValue = this.value.toFixed(stepPrecision);
             this.updateStateStorageAndFireInputEvent("value");
         }
     }
@@ -296,19 +273,8 @@ let Slider = Slider_1 = class Slider extends SliderBase {
     get tooltip() {
         return this.getDomRef()?.querySelector("[ui5-slider-tooltip]");
     }
-    get styles() {
-        return {
-            progress: {
-                "width": `${this._handlePositionFromStart}%`,
-                "border": this._handlePositionFromStart === 0 ? "none" : "",
-            },
-            handle: {
-                [this.directionStart]: `${this._handlePositionFromStart}%`,
-            },
-        };
-    }
     get _sliderHandle() {
-        return this.shadowRoot.querySelector(".ui5-slider-handle");
+        return this.shadowRoot.querySelector("[ui5-slider-handle]");
     }
     get _ariaDisabled() {
         return this.disabled || undefined;
@@ -322,21 +288,28 @@ let Slider = Slider_1 = class Slider extends SliderBase {
     get _ariaLabelledByInputText() {
         return Slider_1.i18nBundle.getText(SLIDER_TOOLTIP_INPUT_LABEL);
     }
+    // TODO: Refactor these methods after RangeSlider is refactored
     get tickmarksObject() {
-        const count = this._tickmarksCount;
-        const arr = [];
-        if (this._hiddenTickmarks) {
-            return [true, false];
+        return [];
+    }
+    _onkeydown(e) {
+        const target = e.target;
+        if (isF2(e) && target.hasAttribute("ui5-slider-handle")) {
+            target.parentNode.querySelector("[ui5-slider-tooltip]").focus();
         }
-        for (let i = 0; i <= count; i++) {
-            arr.push(this._effectiveMin + (i * this.step) <= this.value);
+        if (SliderBase._isActionKey(e) && target && !target.hasAttribute("ui5-slider-tooltip")) {
+            e.preventDefault();
+            this._isUserInteraction = true;
+            this._handleActionKeyPress(e);
         }
-        return arr;
     }
 };
 __decorate([
     property({ type: Number })
 ], Slider.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "step", void 0);
 __decorate([
     property()
 ], Slider.prototype, "tooltipValueState", void 0);
@@ -351,6 +324,7 @@ Slider = Slider_1 = __decorate([
         tag: "ui5-slider",
         languageAware: true,
         formAssociated: true,
+        styles: [styles],
         template: SliderTemplate,
     })
 ], Slider);

package/dist/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../src/Slider.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isEscape, isF2 } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport type ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport SliderBase from \"./SliderBase.js\";\nimport type SliderTooltip from \"./SliderTooltip.js\";\n\n// Template\nimport SliderTemplate from \"./SliderTemplate.js\";\nimport type { SliderTooltipChangeEventDetails } from \"./SliderTooltip.js\";\n\n// Texts\nimport {\n\tSLIDER_ARIA_DESCRIPTION,\n\tSLIDER_TOOLTIP_INPUT_DESCRIPTION,\n\tSLIDER_TOOLTIP_INPUT_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n *\n * ### Overview\n * The Slider component represents a numerical range and a handle (grip).\n * The purpose of the component is to enable visual selection of a value in\n * a continuous numerical range by moving an adjustable handle.\n *\n * ### Structure\n * The most important properties of the Slider are:\n *\n * - min - The minimum value of the slider range.\n * - max - The maximum value of the slider range.\n * - value - The current value of the slider range.\n * - step - Determines the increments in which the slider will move.\n * - showTooltip - Determines if a tooltip should be displayed above the handle.\n * - showTickmarks - Displays a visual divider between the step values.\n * - labelInterval - Labels some or all of the tickmarks with their values.\n *\n * ### Usage\n * The most common use case is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).\n *\n * ### Responsive Behavior\n * The `ui5-slider` component adjusts to the size of its parent container by recalculating and\n * resizing the width of the control. You can move the slider handle in several different ways:\n *\n * - Drag and drop the handle to the desired value.\n * - Click/tap on the range bar to move the handle to that location.\n *\n * ### Keyboard Handling\n *\n * - `Left or Down Arrow` - Moves the handle one step to the left, effectively decreasing the component's value by `step` amount;\n * - `Right or Up Arrow` - Moves the handle one step to the right, effectively increasing the component's value by `step` amount;\n * - `Left or Down Arrow + Ctrl/Cmd` - Moves the handle to the left with step equal to 1/10th of the entire range, effectively decreasing the component's value by 1/10th of the range;\n * - `Right or Up Arrow + Ctrl/Cmd` - Moves the handle to the right with step equal to 1/10th of the entire range, effectively increasing the component's value by 1/10th of the range;\n * - `Plus` - Same as `Right or Up Arrow`;\n * - `Minus` - Same as `Left or Down Arrow`;\n * - `Home` - Moves the handle to the beginning of the range;\n * - `End` - Moves the handle to the end of the range;\n * - `Page Up` - Same as `Right or Up + Ctrl/Cmd`;\n * - `Page Down` - Same as `Left or Down + Ctrl/Cmd`;\n * - `Escape` - Resets the value property after interaction, to the position prior the component's focusing;\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Slider.js\";`\n * @constructor\n * @extends SliderBase\n * @since 1.0.0-rc.11\n * @public\n * @csspart progress-container - Used to style the progress container, the horizontal bar that visually represents the range between the minimum and maximum values, of the `ui5-slider`.\n * @csspart progress-bar - Used to style the progress bar, which shows the progress of the `ui5-slider`.\n * @csspart handle - Used to style the handle of the `ui5-slider`.\n */\n@customElement({\n\ttag: \"ui5-slider\",\n\tlanguageAware: true,\n\tformAssociated: true,\n\ttemplate: SliderTemplate,\n})\nclass Slider extends SliderBase implements IFormInputElement {\n\t/**\n\t * Current value of the slider\n\t * @default 0\n\t * @formEvents change input\n\t * @formProperty\n\t * @public\n\t */\n\t@property({ type: Number })\n\tvalue = 0;\n\n\t@property()\n\ttooltipValueState: `${ValueState}` = \"None\";\n\n\t@property()\n\ttooltipValue = \"\";\n\n\t_valueInitial?: number;\n\t_valueOnInteractionStart?: number;\n\t_progressPercentage = 0;\n\t_handlePositionFromStart = 0;\n\t_lastValidInputValue: string;\n\n\tget formFormattedValue() {\n\t\treturn this.value.toString();\n\t}\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._stateStorage.value = undefined;\n\t\tthis._lastValidInputValue = this.min.toString();\n\t}\n\n\t/**\n\t *\n\t * Check if the previously saved state is outdated. That would mean\n\t * either it is the initial rendering or that a property has been changed\n\t * programmatically - because the previous state is always updated in\n\t * the interaction handlers.\n\t *\n\t * Normalize current properties, update the previously stored state.\n\t * Update the visual UI representation of the Slider.\n\t *\n\t */\n\tonBeforeRendering() {\n\t\tif (!this.isCurrentStateOutdated()) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.notResized = true;\n\t\tthis.syncUIAndState();\n\t\tthis._updateHandleAndProgress(this.value);\n\t}\n\n\tonAfterRendering(): void {\n\t\tsuper.onAfterRendering();\n\n\t\tthis.tooltip?.repositionTooltip();\n\t}\n\n\tsyncUIAndState() {\n\t\t// Validate step and update the stored state for the step property.\n\t\tif (this.isPropertyUpdated(\"step\")) {\n\t\t\tthis._validateStep(this.step);\n\t\t\tthis.storePropertyState(\"step\");\n\t\t}\n\n\t\t// Recalculate the tickmarks and labels and update the stored state.\n\t\tif (this.isPropertyUpdated(\"min\", \"max\", \"value\")) {\n\t\t\tthis.storePropertyState(\"min\", \"max\");\n\n\t\t\t// Here the value props are changed programmatically (not by user interaction)\n\t\t\t// and it won't be \"stepified\" (rounded to the nearest step). 'Clip' them within\n\t\t\t// min and max bounderies and update the previous state reference.\n\t\t\tthis.value = SliderBase.clipValue(this.value, this._effectiveMin, this._effectiveMax);\n\t\t\tthis.updateStateStorageAndFireInputEvent(\"value\");\n\t\t\tthis.storePropertyState(\"value\");\n\t\t}\n\n\t\t// Labels must be updated if any of the min/max/step/labelInterval props are changed\n\t\tif (this.labelInterval && this.showTickmarks) {\n\t\t\tthis._createLabels();\n\t\t}\n\n\t\t// Update the stored state for the labelInterval, if changed\n\t\tif (this.isPropertyUpdated(\"labelInterval\")) {\n\t\t\tthis.storePropertyState(\"labelInterval\");\n\t\t}\n\t}\n\n\t/**\n\t * Called when the user starts interacting with the slider\n\t * @private\n\t */\n\t_onmousedown(e: TouchEvent | MouseEvent) {\n\t\t// If step is 0 no interaction is available because there is no constant\n\t\t// (equal for all user environments) quantitative representation of the value\n\t\tif (this.disabled || this.step === 0 || (e.target as HTMLElement).hasAttribute(\"ui5-slider-tooltip\")) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst newValue = this.handleDownBase(e);\n\t\tthis._valueOnInteractionStart = this.value;\n\n\t\t// Set initial value if one is not set previously on focus in.\n\t\t// It will be restored if ESC key is pressed.\n\t\tif (this._valueInitial === undefined) {\n\t\t\tthis._valueInitial = this.value;\n\t\t}\n\n\t\t// Do not yet update the Slider if press is over a handle. It will be updated if the user drags the mouse.\n\t\tconst ctor = this.constructor as typeof Slider;\n\t\tif (!this._isHandlePressed(ctor.getPageXValueFromEvent(e))) {\n\t\t\tthis._updateHandleAndProgress(newValue);\n\t\t\tthis.value = newValue;\n\t\t\tthis.updateStateStorageAndFireInputEvent(\"value\");\n\t\t}\n\t}\n\n\t_onfocusin() {\n\t\t// Set initial value if one is not set previously on focus in.\n\t\t// It will be restored if ESC key is pressed.\n\t\tif (this._valueInitial === undefined) {\n\t\t\tthis._valueInitial = this.value;\n\t\t}\n\n\t\tif (this.showTooltip) {\n\t\t\tthis._tooltipsOpen = true;\n\t\t}\n\t}\n\n\t_onfocusout(e: FocusEvent) {\n\t\t// Prevent focusout when the focus is getting set within the slider internal\n\t\t// element (on the handle), before the Slider' customElement itself is finished focusing\n\t\tif (this._isFocusing()) {\n\t\t\tthis._preventFocusOut();\n\t\t\treturn;\n\t\t}\n\n\t\t// Reset focus state and the stored Slider's initial\n\t\t// value that was saved when it was first focused in\n\t\tthis._valueInitial = undefined;\n\n\t\tif (this.showTooltip && !(e.relatedTarget as HTMLElement)?.hasAttribute(\"ui5-slider-tooltip\")) {\n\t\t\tthis._tooltipsOpen = false;\n\t\t}\n\t}\n\n\t_onTooltipChange(e: CustomEvent<SliderTooltipChangeEventDetails>) {\n\t\tconst value = parseFloat(e.detail.value);\n\t\tconst isInvalid = value < this._effectiveMin || value > this._effectiveMax;\n\n\t\tif (isInvalid) {\n\t\t\tthis.tooltipValueState = \"Negative\";\n\t\t\tthis.tooltipValue = `${value}`;\n\t\t\treturn;\n\t\t}\n\n\t\tthis.value = value;\n\t\tthis.fireDecoratorEvent(\"change\");\n\t}\n\n\t_onTooltipFocusChange() {\n\t\tconst value = parseFloat(this.tooltipValue);\n\t\tconst isInvalid = value < this._effectiveMin || value > this._effectiveMax;\n\n\t\tif (isInvalid) {\n\t\t\tthis.tooltipValueState = \"None\";\n\t\t\tthis.tooltipValue = this.value.toString();\n\t\t}\n\t}\n\n\t_onTooltipKeydown(e: KeyboardEvent) {\n\t\tif (isF2(e)) {\n\t\t\te.preventDefault();\n\t\t\tthis._sliderHandle.focus();\n\t\t}\n\t}\n\n\t_onTooltipOpen() {\n\t\tconst ctor = this.constructor as typeof Slider;\n\t\tconst stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);\n\t\tthis.tooltipValue = this.value.toFixed(stepPrecision);\n\t}\n\n\t_onTooltipInput(e: CustomEvent) {\n\t\tthis.tooltipValue = e.detail.value;\n\t}\n\n\t/**\n\t * Called when the user moves the slider\n\t * @private\n\t */\n\t_handleMove(e: TouchEvent | MouseEvent) {\n\t\te.preventDefault();\n\n\t\t// If step is 0 no interaction is available because there is no constant\n\t\t// (equal for all user environments) quantitative representation of the value\n\t\tif (this.disabled || this._effectiveStep === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst ctor = this.constructor as typeof Slider;\n\t\tconst newValue = ctor.getValueFromInteraction(e, this._effectiveStep, this._effectiveMin, this._effectiveMax, this.getBoundingClientRect(), this.directionStart);\n\n\t\tthis._updateHandleAndProgress(newValue);\n\t\tthis.value = newValue;\n\t\tthis.tooltipValue = newValue.toString();\n\t\tthis.updateStateStorageAndFireInputEvent(\"value\");\n\t}\n\n\t/** Called when the user finish interacting with the slider\n\t * @private\n\t */\n\t_handleUp() {\n\t\tif (this._valueOnInteractionStart !== this.value) {\n\t\t\tthis.fireDecoratorEvent(\"change\");\n\t\t}\n\n\t\tthis.handleUpBase();\n\t\tthis._valueOnInteractionStart = undefined;\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tconst isActionKey = SliderBase._isActionKey(e);\n\n\t\tthis._onKeyupBase();\n\n\t\tif (isActionKey && this._valueOnInteractionStart !== this.value) {\n\t\t\tthis.fireDecoratorEvent(\"change\");\n\t\t}\n\n\t\tthis._valueOnInteractionStart = this.value;\n\t}\n\n\t/** Determines if the press is over the handle\n\t * @private\n\t */\n\t_isHandlePressed(clientX: number) {\n\t\tconst sliderHandleDomRect = this._sliderHandle.getBoundingClientRect();\n\t\treturn clientX >= sliderHandleDomRect.left && clientX <= sliderHandleDomRect.right;\n\t}\n\n\t/** Updates the UI representation of the progress bar and handle position\n\t * @private\n\t */\n\t_updateHandleAndProgress(newValue: number) {\n\t\tconst max = this._effectiveMax;\n\t\tconst min = this._effectiveMin;\n\n\t\t// The progress (completed) percentage of the slider.\n\t\tthis._progressPercentage = (newValue - min) / (max - min);\n\t\t// How many pixels from the left end of the slider will be the placed the affected  by the user action handle\n\t\tthis._handlePositionFromStart = this._progressPercentage * 100;\n\t}\n\n\t_handleActionKeyPress(e: KeyboardEvent) {\n\t\tconst min = this._effectiveMin;\n\t\tconst max = this._effectiveMax;\n\t\tconst currentValue = this.value;\n\t\tconst ctor = this.constructor as typeof Slider;\n\t\tconst newValue = isEscape(e) ? this._valueInitial : ctor.clipValue(this._handleActionKeyPressBase(e, \"value\") + currentValue, min, max);\n\n\t\tif (newValue !== currentValue) {\n\t\t\tthis._updateHandleAndProgress(newValue!);\n\t\t\tthis.value = newValue!;\n\t\t\tthis.tooltipValue = this.value.toString();\n\t\t\tthis.updateStateStorageAndFireInputEvent(\"value\");\n\t\t}\n\t}\n\n\t_onTooltopForwardFocus(e: CustomEvent) {\n\t\tconst tooltip = e.target as SliderTooltip;\n\n\t\ttooltip.followRef?.focus();\n\t}\n\n\tget inputValue() {\n\t\treturn this.value.toString();\n\t}\n\n\tget tooltip() {\n\t\treturn this.getDomRef()?.querySelector<SliderTooltip>(\"[ui5-slider-tooltip]\");\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\tprogress: {\n\t\t\t\t\"width\": `${this._handlePositionFromStart}%`,\n\t\t\t\t\"border\": this._handlePositionFromStart === 0 ? \"none\" : \"\",\n\t\t\t},\n\t\t\thandle: {\n\t\t\t\t[this.directionStart]: `${this._handlePositionFromStart}%`,\n\t\t\t},\n\t\t};\n\t}\n\n\tget _sliderHandle() : HTMLElement {\n\t\treturn this.shadowRoot!.querySelector(\".ui5-slider-handle\")!;\n\t}\n\n\tget _ariaDisabled() {\n\t\treturn this.disabled || undefined;\n\t}\n\n\tget _ariaLabelledByText() {\n\t\treturn Slider.i18nBundle.getText(SLIDER_ARIA_DESCRIPTION);\n\t}\n\n\tget _ariaDescribedByInputText() {\n\t\treturn Slider.i18nBundle.getText(SLIDER_TOOLTIP_INPUT_DESCRIPTION);\n\t}\n\n\tget _ariaLabelledByInputText() {\n\t\treturn Slider.i18nBundle.getText(SLIDER_TOOLTIP_INPUT_LABEL);\n\t}\n\n\tget tickmarksObject() {\n\t\tconst count = this._tickmarksCount;\n\t\tconst arr = [];\n\n\t\tif (this._hiddenTickmarks) {\n\t\t\treturn [true, false];\n\t\t}\n\n\t\tfor (let i = 0; i <= count; i++) {\n\t\t\tarr.push(this._effectiveMin + (i * this.step) <= this.value);\n\t\t}\n\n\t\treturn arr;\n\t}\n}\n\nSlider.define();\n\nexport default Slider;\n"]}
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../src/Slider.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isEscape, isF2 } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport type ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport SliderBase from \"./SliderBase.js\";\nimport type SliderTooltip from \"./SliderTooltip.js\";\n\n// Template\nimport SliderTemplate from \"./SliderTemplate.js\";\nimport type { SliderTooltipChangeEventDetails } from \"./SliderTooltip.js\";\nimport styles from \"./generated/themes/Slider.css.js\";\n\n// Texts\nimport {\n\tSLIDER_ARIA_DESCRIPTION,\n\tSLIDER_TOOLTIP_INPUT_DESCRIPTION,\n\tSLIDER_TOOLTIP_INPUT_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n *\n * ### Overview\n * The Slider component represents a numerical range and a handle (grip).\n * The purpose of the component is to enable visual selection of a value in\n * a continuous numerical range by moving an adjustable handle.\n *\n * ### Structure\n * The most important properties of the Slider are:\n *\n * - min - The minimum value of the slider range.\n * - max - The maximum value of the slider range.\n * - value - The current value of the slider range.\n * - step - Determines the increments in which the slider will move.\n * - showTooltip - Determines if a tooltip should be displayed above the handle.\n * - showTickmarks - Displays a visual divider between the step values.\n * - labelInterval - Labels some or all of the tickmarks with their values.\n *\n * ### Usage\n * The most common use case is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).\n *\n * ### Responsive Behavior\n * The `ui5-slider` component adjusts to the size of its parent container by recalculating and\n * resizing the width of the control. You can move the slider handle in several different ways:\n *\n * - Drag and drop the handle to the desired value.\n * - Click/tap on the range bar to move the handle to that location.\n *\n * ### Keyboard Handling\n *\n * - `Left or Down Arrow` - Moves the handle one step to the left, effectively decreasing the component's value by `step` amount;\n * - `Right or Up Arrow` - Moves the handle one step to the right, effectively increasing the component's value by `step` amount;\n * - `Left or Down Arrow + Ctrl/Cmd` - Moves the handle to the left with step equal to 1/10th of the entire range, effectively decreasing the component's value by 1/10th of the range;\n * - `Right or Up Arrow + Ctrl/Cmd` - Moves the handle to the right with step equal to 1/10th of the entire range, effectively increasing the component's value by 1/10th of the range;\n * - `Plus` - Same as `Right or Up Arrow`;\n * - `Minus` - Same as `Left or Down Arrow`;\n * - `Home` - Moves the handle to the beginning of the range;\n * - `End` - Moves the handle to the end of the range;\n * - `Page Up` - Same as `Right or Up + Ctrl/Cmd`;\n * - `Page Down` - Same as `Left or Down + Ctrl/Cmd`;\n * - `Escape` - Resets the value property after interaction, to the position prior the component's focusing;\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Slider.js\";`\n * @constructor\n * @extends SliderBase\n * @since 1.0.0-rc.11\n * @public\n * @csspart progress-container - Used to style the progress container, the horizontal bar that visually represents the range between the minimum and maximum values, of the `ui5-slider`.\n * @csspart progress-bar - Used to style the progress bar, which shows the progress of the `ui5-slider`.\n * @csspart handle - Used to style the handle of the `ui5-slider`.\n */\n@customElement({\n\ttag: \"ui5-slider\",\n\tlanguageAware: true,\n\tformAssociated: true,\n\tstyles: [styles],\n\ttemplate: SliderTemplate,\n})\nclass Slider extends SliderBase implements IFormInputElement {\n\t/**\n\t * Current value of the slider\n\t * @default 0\n\t * @formEvents change input\n\t * @formProperty\n\t * @public\n\t */\n\t@property({ type: Number })\n\tvalue = 0;\n\n\t/**\n\t * Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\t *\n\t * **Note:** If set to 0 the slider handle movement is disabled.\n\t * @default 1\n\t * @public\n\t */\n\t@property({ type: Number })\n\tstep = 1;\n\n\t@property()\n\ttooltipValueState: `${ValueState}` = \"None\";\n\n\t@property()\n\ttooltipValue = \"\";\n\n\t_valueInitial?: number;\n\t_valueOnInteractionStart?: number;\n\t_progressPercentage = 0;\n\t_handlePositionFromStart = 0;\n\t_lastValidInputValue: string;\n\n\tget formFormattedValue() {\n\t\treturn this.value.toString();\n\t}\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._lastValidInputValue = this.min.toString();\n\t}\n\n\t/**\n\t * The value is visually clamped to min/max but the property is not modified.\n\t * @private\n\t */\n\tonBeforeRendering() {\n\t\t// Clamp value visually without modifying the actual value property\n\t\tconst ctor = this.constructor as typeof Slider;\n\t\tconst clampedValue = ctor.clipValue(this.value, this.min, this.max);\n\t\tthis._updateHandleAndProgress(clampedValue);\n\t}\n\n\tonAfterRendering(): void {\n\t\tsuper.onAfterRendering();\n\n\t\tthis.tooltip?.repositionTooltip();\n\t}\n\n\t_handleResize() {\n\t\t// TODO: Remove after refactoring Base and RangeSlider\n\t}\n\n\t/**\n\t * Called when the user starts interacting with the slider\n\t * @private\n\t */\n\t_onmousedown(e: TouchEvent | MouseEvent) {\n\t\t// If step is 0 no interaction is available because there is no constant\n\t\t// (equal for all user environments) quantitative representation of the value\n\t\tif (this.disabled || this.step === 0 || (e.target as HTMLElement).hasAttribute(\"ui5-slider-tooltip\")) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst newValue = this.handleDownBase(e);\n\t\tthis._valueOnInteractionStart = this.value;\n\n\t\t// Set initial value if one is not set previously on focus in.\n\t\t// It will be restored if ESC key is pressed.\n\t\tif (this._valueInitial === undefined) {\n\t\t\tthis._valueInitial = this.value;\n\t\t}\n\n\t\t// Do not yet update the Slider if press is over a handle. It will be updated if the user drags the mouse.\n\t\tconst ctor = this.constructor as typeof Slider;\n\t\tif (!this._isHandlePressed(ctor.getPageXValueFromEvent(e))) {\n\t\t\tconst stepPrecision = ctor._getDecimalPrecisionOfNumber(this.step);\n\t\t\tthis._updateHandleAndProgress(newValue);\n\t\t\tthis.value = newValue;\n\t\t\tthis.tooltipValue = newValue.toFixed(stepPrecision);\n\t\t\tthis.updateStateStorageAndFireInputEvent(\"value\");\n\t\t}\n\t}\n\n\t_onfocusin() {\n\t\t// Set initial value if one is not set previously on focus in.\n\t\t// It will be restored if ESC key is pressed.\n\t\tif (this._valueInitial === undefined) {\n\t\t\tthis._valueInitial = this.value;\n\t\t}\n\n\t\tif (this.showTooltip) {\n\t\t\tthis._tooltipsOpen = true;\n\t\t}\n\t}\n\n\t_onfocusout(e: FocusEvent) {\n\t\t// Prevent focusout when the focus is getting set within the slider internal\n\t\t// element (on the handle), before the Slider' customElement itself is finished focusing\n\t\tif (this._isFocusing()) {\n\t\t\tthis._preventFocusOut();\n\t\t\treturn;\n\t\t}\n\n\t\t// Reset focus state and the stored Slider's initial\n\t\t// value that was saved when it was first focused in\n\t\tthis._valueInitial = undefined;\n\n\t\tif (this.showTooltip && !(e.relatedTarget as HTMLElement)?.hasAttribute(\"ui5-slider-tooltip\")) {\n\t\t\tthis._tooltipsOpen = false;\n\t\t}\n\t}\n\n\t_onTooltipChange(e: CustomEvent<SliderTooltipChangeEventDetails>) {\n\t\tconst value = parseFloat(e.detail.value);\n\t\tconst isInvalid = (value < this.min || value > this.max) || Number.isNaN(value);\n\n\t\tif (isInvalid) {\n\t\t\tthis.tooltipValueState = \"Negative\";\n\t\t\tthis.tooltipValue = `${value}`;\n\t\t\treturn;\n\t\t}\n\n\t\tthis.tooltipValueState = \"None\";\n\t\tthis.value = value;\n\t\tthis.fireDecoratorEvent(\"change\");\n\t}\n\n\t_onTooltipFocusChange() {\n\t\tconst value = parseFloat(this.tooltipValue);\n\t\tconst isInvalid = (value < this.min || value > this.max) || Number.isNaN(value);\n\n\t\tif (isInvalid) {\n\t\t\tthis.tooltipValueState = \"None\";\n\t\t\tthis.tooltipValue = this.value.toString();\n\t\t}\n\t}\n\n\t_onTooltipKeydown(e: KeyboardEvent) {\n\t\tif (isF2(e)) {\n\t\t\te.preventDefault();\n\t\t\tthis._sliderHandle.focus();\n\t\t}\n\t}\n\n\t_onTooltipOpen() {\n\t\tconst ctor = this.constructor as typeof Slider;\n\t\tconst stepPrecision = ctor._getDecimalPrecisionOfNumber(this.step);\n\t\tthis.tooltipValue = this.value.toFixed(stepPrecision);\n\t}\n\n\t_onTooltipInput(e: CustomEvent) {\n\t\tthis.tooltipValue = e.detail.value;\n\t}\n\n\t/**\n\t * Called when the user moves the slider\n\t * @private\n\t */\n\t_handleMove(e: TouchEvent | MouseEvent) {\n\t\te.preventDefault();\n\n\t\tconst ctor = this.constructor as typeof Slider;\n\t\tconst newValue = ctor.getValueFromInteraction(e, this.step, this.min, this.max, this.getBoundingClientRect(), this.directionStart);\n\t\tconst stepPrecision = ctor._getDecimalPrecisionOfNumber(this.step);\n\n\t\tthis._updateHandleAndProgress(newValue);\n\t\tthis.value = newValue;\n\t\tthis.tooltipValue = newValue.toFixed(stepPrecision);\n\t\tthis.updateStateStorageAndFireInputEvent(\"value\");\n\t}\n\n\t/** Called when the user finish interacting with the slider\n\t * @private\n\t */\n\t_handleUp() {\n\t\tif (this._valueOnInteractionStart !== this.value) {\n\t\t\tthis.fireDecoratorEvent(\"change\");\n\t\t}\n\n\t\tthis.handleUpBase();\n\t\tthis._valueOnInteractionStart = undefined;\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tconst isActionKey = SliderBase._isActionKey(e);\n\n\t\tthis._onKeyupBase();\n\n\t\tif (isActionKey && this._valueOnInteractionStart !== this.value) {\n\t\t\tthis.fireDecoratorEvent(\"change\");\n\t\t}\n\n\t\tthis._valueOnInteractionStart = this.value;\n\t}\n\n\t/** Determines if the press is over the handle\n\t * @private\n\t */\n\t_isHandlePressed(clientX: number) {\n\t\tconst sliderHandleDomRect = this._sliderHandle.getBoundingClientRect();\n\t\treturn clientX >= sliderHandleDomRect.left && clientX <= sliderHandleDomRect.right;\n\t}\n\n\t/** Updates the UI representation of the progress bar and handle position\n\t * @private\n\t */\n\t_updateHandleAndProgress(newValue: number) {\n\t\tconst max = this.max;\n\t\tconst min = this.min;\n\n\t\t// The progress (completed) percentage of the slider.\n\t\tthis._progressPercentage = (newValue - min) / (max - min);\n\t\t// How many pixels from the left end of the slider will be the placed the affected  by the user action handle\n\t\tthis._handlePositionFromStart = this._progressPercentage * 100;\n\t}\n\n\t_handleActionKeyPress(e: KeyboardEvent) {\n\t\tconst min = this.min;\n\t\tconst max = this.max;\n\t\tconst currentValue = this.value;\n\t\tconst ctor = this.constructor as typeof Slider;\n\t\tconst newValue = isEscape(e) ? this._valueInitial : ctor.clipValue(this._handleActionKeyPressBase(e, \"value\") + currentValue, min, max);\n\n\t\tif (newValue !== currentValue) {\n\t\t\tconst stepPrecision = ctor._getDecimalPrecisionOfNumber(this.step);\n\t\t\tthis._updateHandleAndProgress(newValue!);\n\t\t\tthis.value = newValue!;\n\t\t\tthis.tooltipValue = this.value.toFixed(stepPrecision);\n\t\t\tthis.updateStateStorageAndFireInputEvent(\"value\");\n\t\t}\n\t}\n\n\t_onTooltopForwardFocus(e: CustomEvent) {\n\t\tconst tooltip = e.target as SliderTooltip;\n\n\t\ttooltip.followRef?.focus();\n\t}\n\n\tget inputValue() {\n\t\treturn this.value.toString();\n\t}\n\n\tget tooltip() {\n\t\treturn this.getDomRef()?.querySelector<SliderTooltip>(\"[ui5-slider-tooltip]\");\n\t}\n\n\tget _sliderHandle() : HTMLElement {\n\t\treturn this.shadowRoot!.querySelector(\"[ui5-slider-handle]\")!;\n\t}\n\n\tget _ariaDisabled() {\n\t\treturn this.disabled || undefined;\n\t}\n\n\tget _ariaLabelledByText() {\n\t\treturn Slider.i18nBundle.getText(SLIDER_ARIA_DESCRIPTION);\n\t}\n\n\tget _ariaDescribedByInputText() {\n\t\treturn Slider.i18nBundle.getText(SLIDER_TOOLTIP_INPUT_DESCRIPTION);\n\t}\n\n\tget _ariaLabelledByInputText() {\n\t\treturn Slider.i18nBundle.getText(SLIDER_TOOLTIP_INPUT_LABEL);\n\t}\n\n\t// TODO: Refactor these methods after RangeSlider is refactored\n\tget tickmarksObject() {\n\t\treturn [];\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tconst target = e.target as HTMLElement;\n\n\t\tif (isF2(e) && target.hasAttribute(\"ui5-slider-handle\")) {\n\t\t\t(target.parentNode!.querySelector(\"[ui5-slider-tooltip]\") as HTMLElement).focus();\n\t\t}\n\n\t\tif (SliderBase._isActionKey(e) && target && !target.hasAttribute(\"ui5-slider-tooltip\")) {\n\t\t\te.preventDefault();\n\n\t\t\tthis._isUserInteraction = true;\n\t\t\tthis._handleActionKeyPress(e);\n\t\t}\n\t}\n}\n\nSlider.define();\n\nexport default Slider;\n"]}

package/dist/SliderHandle.d.ts

@@ -0,0 +1,61 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { SliderScaleOrientation } from "./SliderScale.js";
+/**
+ * @class
+ * The <code>ui5-slider-handle</code> component represents the handle of the <code>ui5-slider</code> component.
+ *
+ * @constructor
+ * @extends UI5Element
+ * @since 2.19.0
+ * @private
+ */
+declare class SliderHandle extends UI5Element {
+    /**
+     * Defines the value of the slider handle.
+     * <br><br>
+     * <b>Note:</b> The value should be between the <code>min</code> and <code>max</code> properties of the parent <code>ui5-slider</code>.
+     * @since 2.19.0
+     * @public
+     */
+    value: number;
+    /**
+     * Defines the minimum value of the slider handle.
+     * <br><br>
+     * <b>Note:</b> The value should be less than the <code>max</code> property of the parent <code>ui5-slider</code>.
+     * @since 2.19.0
+     * @public
+     */
+    min: number;
+    /**
+     * Defines the maximum value of the slider handle.
+     * <br><br>
+     * <b>Note:</b> The value should be greater than the <code>min</code> property of the parent <code>ui5-slider</code>.
+     * @since 2.19.0
+     * @public
+     */
+    max: number;
+    /**
+     * Defines whether the slider handle is disabled.
+     * <br><br>
+     * <b>Note:</b> A disabled slider handle cannot be interacted with.
+     * @since 2.19.0
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * Defines whether the slider handle is active.
+     * <br><br>
+     * <b>Note:</b> An active slider handle is currently being interacted with.
+     * @since 2.19.0
+     * @public
+     */
+    active: boolean;
+    /**
+     * Defines the orientation of the slider handle.
+     *
+     * @private
+     */
+    orientation: `${SliderScaleOrientation}`;
+    getFocusDomRef(): HTMLElement | undefined;
+}
+export default SliderHandle;

package/dist/SliderHandle.js

@@ -0,0 +1,104 @@
+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;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.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 SliderHandleTemplate from "./SliderHandleTemplate.js";
+import styles from "./generated/themes/SliderHandle.css.js";
+/**
+ * @class
+ * The <code>ui5-slider-handle</code> component represents the handle of the <code>ui5-slider</code> component.
+ *
+ * @constructor
+ * @extends UI5Element
+ * @since 2.19.0
+ * @private
+ */
+let SliderHandle = class SliderHandle extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the value of the slider handle.
+         * <br><br>
+         * <b>Note:</b> The value should be between the <code>min</code> and <code>max</code> properties of the parent <code>ui5-slider</code>.
+         * @since 2.19.0
+         * @public
+         */
+        this.value = 0;
+        /**
+         * Defines the minimum value of the slider handle.
+         * <br><br>
+         * <b>Note:</b> The value should be less than the <code>max</code> property of the parent <code>ui5-slider</code>.
+         * @since 2.19.0
+         * @public
+         */
+        this.min = 0;
+        /**
+         * Defines the maximum value of the slider handle.
+         * <br><br>
+         * <b>Note:</b> The value should be greater than the <code>min</code> property of the parent <code>ui5-slider</code>.
+         * @since 2.19.0
+         * @public
+         */
+        this.max = 100;
+        /**
+         * Defines whether the slider handle is disabled.
+         * <br><br>
+         * <b>Note:</b> A disabled slider handle cannot be interacted with.
+         * @since 2.19.0
+         * @public
+         */
+        this.disabled = false;
+        /**
+         * Defines whether the slider handle is active.
+         * <br><br>
+         * <b>Note:</b> An active slider handle is currently being interacted with.
+         * @since 2.19.0
+         * @public
+         */
+        this.active = false;
+        /**
+         * Defines the orientation of the slider handle.
+         *
+         * @private
+         */
+        this.orientation = "Horizontal";
+    }
+    getFocusDomRef() {
+        return this;
+    }
+};
+__decorate([
+    property({ type: Number })
+], SliderHandle.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], SliderHandle.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], SliderHandle.prototype, "max", void 0);
+__decorate([
+    property({ type: Boolean })
+], SliderHandle.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], SliderHandle.prototype, "active", void 0);
+__decorate([
+    property()
+], SliderHandle.prototype, "orientation", void 0);
+SliderHandle = __decorate([
+    customElement({
+        tag: "ui5-slider-handle",
+        renderer: jsxRenderer,
+        template: SliderHandleTemplate,
+        styles,
+    })
+], SliderHandle);
+SliderHandle.define();
+export default SliderHandle;
+//# sourceMappingURL=SliderHandle.js.map

package/dist/SliderHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderHandle.js","sourceRoot":"","sources":["../src/SliderHandle.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAC7D,OAAO,MAAM,MAAM,wCAAwC,CAAC;AAG5D;;;;;;;;GAQG;AAOH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QACC;;;;;;WAMG;QAEH,UAAK,GAAG,CAAC,CAAC;QAEV;;;;;;WAMG;QAEH,QAAG,GAAG,CAAC,CAAC;QAER;;;;;;WAMG;QAEH,QAAG,GAAG,GAAG,CAAC;QAEV;;;;;;WAMG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;;;;;WAMG;QAEH,WAAM,GAAG,KAAK,CAAC;QAEf;;;;WAIG;QAEH,gBAAW,GAAgC,YAAY,CAAC;IAKzD,CAAC;IAHA,cAAc;QACb,OAAO,IAAI,CAAC;IACb,CAAC;CACD,CAAA;AArDA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACjB;AAUV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACnB;AAUR;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACjB;AAUV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACX;AAUjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACb;AAQf;IADC,QAAQ,EAAE;iDAC6C;AAzDnD,YAAY;IANjB,aAAa,CAAC;QACd,GAAG,EAAE,mBAAmB;QACxB,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,oBAAoB;QAC9B,MAAM;KACN,CAAC;GACI,YAAY,CA8DjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.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 SliderHandleTemplate from \"./SliderHandleTemplate.js\";\nimport styles from \"./generated/themes/SliderHandle.css.js\";\nimport type { SliderScaleOrientation } from \"./SliderScale.js\";\n\n/**\n * @class\n * The <code>ui5-slider-handle</code> component represents the handle of the <code>ui5-slider</code> component.\n *\n * @constructor\n * @extends UI5Element\n * @since 2.19.0\n * @private\n */\n@customElement({\n\ttag: \"ui5-slider-handle\",\n\trenderer: jsxRenderer,\n\ttemplate: SliderHandleTemplate,\n\tstyles,\n})\nclass SliderHandle extends UI5Element {\n\t/**\n\t * Defines the value of the slider handle.\n\t * <br><br>\n\t * <b>Note:</b> The value should be between the <code>min</code> and <code>max</code> properties of the parent <code>ui5-slider</code>.\n\t * @since 2.19.0\n\t * @public\n\t */\n\t@property({ type: Number })\n\tvalue = 0;\n\n\t/**\n\t * Defines the minimum value of the slider handle.\n\t * <br><br>\n\t * <b>Note:</b> The value should be less than the <code>max</code> property of the parent <code>ui5-slider</code>.\n\t * @since 2.19.0\n\t * @public\n\t */\n\t@property({ type: Number })\n\tmin = 0;\n\n\t/**\n\t * Defines the maximum value of the slider handle.\n\t * <br><br>\n\t * <b>Note:</b> The value should be greater than the <code>min</code> property of the parent <code>ui5-slider</code>.\n\t * @since 2.19.0\n\t * @public\n\t */\n\t@property({ type: Number })\n\tmax = 100;\n\n\t/**\n\t * Defines whether the slider handle is disabled.\n\t * <br><br>\n\t * <b>Note:</b> A disabled slider handle cannot be interacted with.\n\t * @since 2.19.0\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines whether the slider handle is active.\n\t * <br><br>\n\t * <b>Note:</b> An active slider handle is currently being interacted with.\n\t * @since 2.19.0\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tactive = false;\n\n\t/**\n\t * Defines the orientation of the slider handle.\n\t *\n\t * @private\n\t */\n\t@property()\n\torientation: `${SliderScaleOrientation}` = \"Horizontal\";\n\n\tgetFocusDomRef(): HTMLElement | undefined {\n\t\treturn this;\n\t}\n}\n\nSliderHandle.define();\n\nexport default SliderHandle;\n"]}

package/dist/SliderHandleTemplate.d.ts

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

package/dist/SliderHandleTemplate.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+import directionArrows from "@ui5/webcomponents-icons/dist/direction-arrows.js";
+import Icon from "./Icon.js";
+export default function SliderHandleTemplate() {
+    return (_jsx("div", { class: "ui5-slider-handle-container", children: _jsx(Icon, { name: directionArrows, mode: "Decorative", part: "icon", "slider-icon": true }) }));
+}
+//# sourceMappingURL=SliderHandleTemplate.js.map

package/dist/SliderHandleTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderHandleTemplate.js","sourceRoot":"","sources":["../src/SliderHandleTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,MAAM,mDAAmD,CAAC;AAChF,OAAO,IAAI,MAAM,WAAW,CAAC;AAG7B,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC3C,OAAO,CACN,cAAK,KAAK,EAAC,6BAA6B,YACvC,KAAC,IAAI,IAAC,IAAI,EAAE,eAAe,EAC1B,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,MAAM,wBAEJ,GACH,CACN,CAAC;AACH,CAAC","sourcesContent":["import directionArrows from \"@ui5/webcomponents-icons/dist/direction-arrows.js\";\nimport Icon from \"./Icon.js\";\nimport type SliderHandle from \"./SliderHandle.js\";\n\nexport default function SliderHandleTemplate(this: SliderHandle) {\n\treturn (\n\t\t<div class=\"ui5-slider-handle-container\">\n\t\t\t<Icon name={directionArrows}\n\t\t\t\tmode=\"Decorative\"\n\t\t\t\tpart=\"icon\"\n\t\t\t\tslider-icon\n\t\t\t></Icon>\n\t\t</div>\n\t);\n}\n"]}