@ui5/webcomponents 0.0.0-35e2c9666 → 0.0.0-38861c872

package/dist/Slider.js

@@ -1,39 +1,21 @@
+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 Slider_1;
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import SliderBase from "./SliderBase.js";
 import Icon from "./Icon.js";
-
 // Template
 import SliderTemplate from "./generated/templates/SliderTemplate.lit.js";
-
 // Texts
-import {
-	SLIDER_ARIA_DESCRIPTION,
-} from "./generated/i18n/i18n-defaults.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-slider",
-	languageAware: true,
-	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.Slider.prototype */  {
-		/**
-		 * Current value of the slider
-		 *
-		 * @type {Float}
-		 * @defaultvalue 0
-		 * @public
-		 */
-		value: {
-			type: Float,
-			defaultValue: 0,
-		},
-	},
-};
-
+import { SLIDER_ARIA_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js";
 /**
  * @class
  *
@@ -65,17 +47,6 @@ const metadata = {
  * <li>Click/tap on the range bar to move the handle to that location.</li>
  * </ul>
  *
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-slider</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>progress-container - Used to style the progress container(the horizontal bar which visually represents the range between the minimum and maximum value) of the <code>ui5-slider</code>.</li>
- * <li>progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-slider</code>.</li>
- * <li>handle - Used to style the handle of the <code>ui5-slider</code>.</li>
- * </ul>
- *
  * <h3>Keyboard Handling</h3>
  *
  * <ul>
@@ -97,229 +68,236 @@ const metadata = {
  * <code>import "@ui5/webcomponents/dist/Slider";</code>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.Slider
  * @extends SliderBase
- * @tagname ui5-slider
  * @since 1.0.0-rc.11
  * @public
+ * @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 <code>ui5-slider</code>.
+ * @csspart progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-slider</code>.
+ * @csspart handle - Used to style the handle of the <code>ui5-slider</code>.
  */
-class Slider extends SliderBase {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get template() {
-		return SliderTemplate;
-	}
-
-	constructor() {
-		super();
-		this._stateStorage.value = null;
-		this._setInitialValue("value", null);
-	}
-
-	static get dependencies() {
-		return [Icon];
-	}
-
-	/**
-	 *
-	 * Check if the previously saved state is outdated. That would mean
-	 * either it is the initial rendering or that a property has been changed
-	 * programatically - 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.
-	 *
-	 */
-	onBeforeRendering() {
-		if (!this.isCurrentStateOutdated()) {
-			return;
-		}
-
-		this.notResized = true;
-		this.syncUIAndState("value");
-		this._updateHandleAndProgress(this.value);
-	}
-
-	/**
-	 * Called when the user starts interacting with the slider
-	 *
-	 * @private
-	 */
-	_onmousedown(event) {
-		// 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.step === 0) {
-			return;
-		}
-
-		const newValue = this.handleDownBase(event);
-		this._valueOnInteractionStart = this.value;
-
-		// Set initial value if one is not set previously on focus in.
-		// It will be restored if ESC key is pressed.
-		if (this._getInitialValue("value") === null) {
-			this._setInitialValue("value", this.value);
-		}
-
-		// Do not yet update the Slider if press is over a handle. It will be updated if the user drags the mouse.
-		if (!this._isHandlePressed(this.constructor.getPageXValueFromEvent(event))) {
-			this._updateHandleAndProgress(newValue);
-			this.updateValue("value", newValue);
-		}
-	}
-
-	_onfocusin(event) {
-		// Set initial value if one is not set previously on focus in.
-		// It will be restored if ESC key is pressed.
-		if (this._getInitialValue("value") === null) {
-			this._setInitialValue("value", this.value);
-		}
-
-		if (this.showTooltip) {
-			this._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.VISIBLE;
-		}
-	}
-
-	_onfocusout(event) {
-		// Prevent focusout when the focus is getting set within the slider internal
-		// element (on the handle), before the Slider' customElement itself is finished focusing
-		if (this._isFocusing()) {
-			this._preventFocusOut();
-			return;
-		}
-
-		// Reset focus state and the stored Slider's initial
-		// value that was saved when it was first focused in
-		this._setInitialValue("value", null);
-
-		if (this.showTooltip) {
-			this._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.HIDDEN;
-		}
-	}
-
-	/**
-	 * Called when the user moves the slider
-	 *
-	 * @private
-	 */
-	_handleMove(event) {
-		event.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 newValue = this.constructor.getValueFromInteraction(event, this._effectiveStep, this._effectiveMin, this._effectiveMax, this.getBoundingClientRect(), this.directionStart);
-
-		this._updateHandleAndProgress(newValue);
-		this.updateValue("value", newValue);
-	}
-
-	/** Called when the user finish interacting with the slider
-	 *
-	 * @private
-	 */
-	_handleUp(event) {
-		if (this._valueOnInteractionStart !== this.value) {
-			this.fireEvent("change");
-		}
-
-		this.handleUpBase();
-		this._valueOnInteractionStart = null;
-	}
-
-	/** Determines if the press is over the handle
-	 *
-	 * @private
-	 */
-	_isHandlePressed(clientX) {
-		const sliderHandleDomRect = this._sliderHandle.getBoundingClientRect();
-		return clientX >= sliderHandleDomRect.left && clientX <= sliderHandleDomRect.right;
-	}
-
-	/** Updates the UI representation of the progress bar and handle position
-	 *
-	 * @private
-	 */
-	_updateHandleAndProgress(newValue) {
-		const max = this._effectiveMax;
-		const min = this._effectiveMin;
-
-		// 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(event) {
-		const min = this._effectiveMin;
-		const max = this._effectiveMax;
-		const currentValue = this.value;
-		const newValue = isEscape(event) ? this._getInitialValue("value") : this.constructor.clipValue(this._handleActionKeyPressBase(event, "value") + currentValue, min, max);
-
-		if (newValue !== currentValue) {
-			this._updateHandleAndProgress(newValue);
-			this.updateValue("value", newValue);
-		}
-	}
-
-	get styles() {
-		return {
-			progress: {
-				"transform": `scaleX(${this._progressPercentage})`,
-				"transform-origin": `${this.directionStart} top`,
-			},
-			handle: {
-				[this.directionStart]: `${this._handlePositionFromStart}%`,
-			},
-			tickmarks: {
-				"background": `${this._tickmarks}`,
-			},
-			label: {
-				"width": `${this._labelWidth}%`,
-			},
-			labelContainer: {
-				"width": `100%`,
-				[this.directionStart]: `-${this._labelWidth / 2}%`,
-			},
-			tooltip: {
-				"visibility": `${this._tooltipVisibility}`,
-			},
-		};
-	}
-
-	get _sliderHandle() {
-		return this.shadowRoot.querySelector(".ui5-slider-handle");
-	}
-
-	get labelItems() {
-		return this._labelItems;
-	}
-
-	get tooltipValue() {
-		const stepPrecision = this.constructor._getDecimalPrecisionOfNumber(this._effectiveStep);
-		return this.value.toFixed(stepPrecision);
-	}
-
-	get _ariaDisabled() {
-		return this.disabled || undefined;
-	}
-
-	get _ariaLabelledByText() {
-		return Slider.i18nBundle.getText(SLIDER_ARIA_DESCRIPTION);
-	}
-
-	static async onDefine() {
-		Slider.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-	}
-}
-
+let Slider = Slider_1 = class Slider extends SliderBase {
+    constructor() {
+        super();
+        this._progressPercentage = 0;
+        this._handlePositionFromStart = 0;
+        this._stateStorage.value = undefined;
+    }
+    /**
+     *
+     * 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.
+     *
+     */
+    onBeforeRendering() {
+        if (!this.isCurrentStateOutdated()) {
+            return;
+        }
+        this.notResized = true;
+        this.syncUIAndState();
+        this._updateHandleAndProgress(this.value);
+    }
+    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");
+        }
+    }
+    /**
+     * Called when the user starts interacting with the slider
+     *
+     * @private
+     */
+    _onmousedown(e) {
+        // 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.step === 0) {
+            return;
+        }
+        const newValue = this.handleDownBase(e);
+        this._valueOnInteractionStart = this.value;
+        // Set initial value if one is not set previously on focus in.
+        // It will be restored if ESC key is pressed.
+        if (this._valueInitial === undefined) {
+            this._valueInitial = this.value;
+        }
+        // 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))) {
+            this._updateHandleAndProgress(newValue);
+            this.value = newValue;
+            this.updateStateStorageAndFireInputEvent("value");
+        }
+    }
+    _onfocusin() {
+        // Set initial value if one is not set previously on focus in.
+        // It will be restored if ESC key is pressed.
+        if (this._valueInitial === undefined) {
+            this._valueInitial = this.value;
+        }
+        if (this.showTooltip) {
+            this._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.VISIBLE;
+        }
+    }
+    _onfocusout() {
+        // Prevent focusout when the focus is getting set within the slider internal
+        // element (on the handle), before the Slider' customElement itself is finished focusing
+        if (this._isFocusing()) {
+            this._preventFocusOut();
+            return;
+        }
+        // Reset focus state and the stored Slider's initial
+        // value that was saved when it was first focused in
+        this._valueInitial = undefined;
+        if (this.showTooltip) {
+            this._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.HIDDEN;
+        }
+    }
+    /**
+     * Called when the user moves the slider
+     *
+     * @private
+     */
+    _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);
+        this._updateHandleAndProgress(newValue);
+        this.value = newValue;
+        this.updateStateStorageAndFireInputEvent("value");
+    }
+    /** Called when the user finish interacting with the slider
+     *
+     * @private
+     */
+    _handleUp() {
+        if (this._valueOnInteractionStart !== this.value) {
+            this.fireEvent("change");
+        }
+        this.handleUpBase();
+        this._valueOnInteractionStart = undefined;
+    }
+    /** Determines if the press is over the handle
+     *
+     * @private
+     */
+    _isHandlePressed(clientX) {
+        const sliderHandleDomRect = this._sliderHandle.getBoundingClientRect();
+        return clientX >= sliderHandleDomRect.left && clientX <= sliderHandleDomRect.right;
+    }
+    /** Updates the UI representation of the progress bar and handle position
+     *
+     * @private
+     */
+    _updateHandleAndProgress(newValue) {
+        const max = this._effectiveMax;
+        const min = this._effectiveMin;
+        // 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 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) {
+            this._updateHandleAndProgress(newValue);
+            this.value = newValue;
+            this.updateStateStorageAndFireInputEvent("value");
+        }
+    }
+    get styles() {
+        return {
+            progress: {
+                "transform": `scaleX(${this._progressPercentage})`,
+                "transform-origin": `${this.directionStart} top`,
+            },
+            handle: {
+                [this.directionStart]: `${this._handlePositionFromStart}%`,
+            },
+            label: {
+                "width": `${this._labelWidth}%`,
+            },
+            labelContainer: {
+                "width": `100%`,
+                [this.directionStart]: `-${this._labelWidth / 2}%`,
+            },
+            tooltip: {
+                "visibility": `${this._tooltipVisibility}`,
+            },
+        };
+    }
+    get _sliderHandle() {
+        return this.shadowRoot.querySelector(".ui5-slider-handle");
+    }
+    get tooltipValue() {
+        const ctor = this.constructor;
+        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
+        return this.value.toFixed(stepPrecision);
+    }
+    get _ariaDisabled() {
+        return this.disabled || undefined;
+    }
+    get _ariaLabelledByText() {
+        return Slider_1.i18nBundle.getText(SLIDER_ARIA_DESCRIPTION);
+    }
+    static async onDefine() {
+        Slider_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+    get tickmarksObject() {
+        const count = this._tickmarksCount;
+        const arr = [];
+        if (this._hiddenTickmarks) {
+            return [true, false];
+        }
+        for (let i = 0; i <= count; i++) {
+            arr.push(this._effectiveMin + (i * this.step) <= this.value);
+        }
+        return arr;
+    }
+};
+__decorate([
+    property({ validator: Float, defaultValue: 0 })
+], Slider.prototype, "value", void 0);
+Slider = Slider_1 = __decorate([
+    customElement({
+        tag: "ui5-slider",
+        languageAware: true,
+        template: SliderTemplate,
+        dependencies: [Icon],
+    })
+], Slider);
 Slider.define();
-
 export default Slider;
+//# sourceMappingURL=Slider.js.map

package/dist/Slider.js.map

@@ -0,0 +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 Float from \"@ui5/webcomponents-base/dist/types/Float.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isEscape } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport SliderBase from \"./SliderBase.js\";\nimport Icon from \"./Icon.js\";\n\n// Template\nimport SliderTemplate from \"./generated/templates/SliderTemplate.lit.js\";\n\n// Texts\nimport {\n\tSLIDER_ARIA_DESCRIPTION,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\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 * <h3>Structure</h3>\n * The most important properties of the Slider are:\n * <ul>\n * <li>min - The minimum value of the slider range.</li>\n * <li>max - The maximum value of the slider range.</li>\n * <li>value - The current value of the slider range.</li>\n * <li>step - Determines the increments in which the slider will move.</li>\n * <li>showTooltip - Determines if a tooltip should be displayed above the handle.</li>\n * <li>showTickmarks - Displays a visual divider between the step values.</li>\n * <li>labelInterval - Labels some or all of the tickmarks with their values.</li>\n * </ul>\n *\n * <h3>Usage</h3>\n * The most common use case is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).\n *\n * <h3>Responsive Behavior</h3>\n * The <code>ui5-slider</code> 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 * <ul>\n * <li>Drag and drop the handle to the desired value.</li>\n * <li>Click/tap on the range bar to move the handle to that location.</li>\n * </ul>\n *\n * <h3>Keyboard Handling</h3>\n *\n * <ul>\n * <li><code>Left or Down Arrow</code> - Moves the handle one step to the left, effectively decreasing the component's value by <code>step</code> amount;</li>\n * <li><code>Right or Up Arrow</code> - Moves the handle one step to the right, effectively increasing the component's value by <code>step</code> amount;</li>\n * <li><code>Left or Down Arrow + Ctrl/Cmd</code> - 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;</li>\n * <li><code>Right or Up Arrow + Ctrl/Cmd</code> - 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;</li>\n * <li><code>Plus</code> - Same as <code>Right or Up Arrow</code>;</li>\n * <li><code>Minus</code> - Same as <code>Left or Down Arrow</code>;</li>\n * <li><code>Home</code> - Moves the handle to the beginning of the range;</li>\n * <li><code>End</code> - Moves the handle to the end of the range;</li>\n * <li><code>Page Up</code> - Same as <code>Right or Up + Ctrl/Cmd</code>;</li>\n * <li><code>Page Down</code> - Same as <code>Left or Down + Ctrl/Cmd</code>;</li>\n * <li><code>Escape</code> - Resets the value property after interaction, to the position prior the component's focusing;</li>\n * </ul>\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/Slider\";</code>\n *\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 <code>ui5-slider</code>.\n * @csspart progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-slider</code>.\n * @csspart handle - Used to style the handle of the <code>ui5-slider</code>.\n */\n@customElement({\n\ttag: \"ui5-slider\",\n\tlanguageAware: true,\n\ttemplate: SliderTemplate,\n\tdependencies: [Icon],\n})\nclass Slider extends SliderBase {\n\t/**\n\t * Current value of the slider\n\t *\n\t * @default 0\n\t * @formEvents change input\n\t * @formProperty\n\t * @public\n\t */\n\t@property({ validator: Float, defaultValue: 0 })\n\tvalue!: number;\n\n\t_valueInitial?: number;\n\t_valueOnInteractionStart?: number;\n\t_progressPercentage = 0;\n\t_handlePositionFromStart = 0;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._stateStorage.value = undefined;\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\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 *\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) {\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._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.VISIBLE;\n\t\t}\n\t}\n\n\t_onfocusout() {\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) {\n\t\t\tthis._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.HIDDEN;\n\t\t}\n\t}\n\n\t/**\n\t * Called when the user moves the slider\n\t *\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.updateStateStorageAndFireInputEvent(\"value\");\n\t}\n\n\t/** Called when the user finish interacting with the slider\n\t *\n\t * @private\n\t */\n\t_handleUp() {\n\t\tif (this._valueOnInteractionStart !== this.value) {\n\t\t\tthis.fireEvent(\"change\");\n\t\t}\n\n\t\tthis.handleUpBase();\n\t\tthis._valueOnInteractionStart = undefined;\n\t}\n\n\t/** Determines if the press is over the handle\n\t *\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 *\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.updateStateStorageAndFireInputEvent(\"value\");\n\t\t}\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\tprogress: {\n\t\t\t\t\"transform\": `scaleX(${this._progressPercentage})`,\n\t\t\t\t\"transform-origin\": `${this.directionStart} top`,\n\t\t\t},\n\t\t\thandle: {\n\t\t\t\t[this.directionStart]: `${this._handlePositionFromStart}%`,\n\t\t\t},\n\t\t\tlabel: {\n\t\t\t\t\"width\": `${this._labelWidth}%`,\n\t\t\t},\n\t\t\tlabelContainer: {\n\t\t\t\t\"width\": `100%`,\n\t\t\t\t[this.directionStart]: `-${this._labelWidth / 2}%`,\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\t\"visibility\": `${this._tooltipVisibility}`,\n\t\t\t},\n\t\t};\n\t}\n\n\tget _sliderHandle() {\n\t\treturn this.shadowRoot!.querySelector(\".ui5-slider-handle\")!;\n\t}\n\n\tget tooltipValue() {\n\t\tconst ctor = this.constructor as typeof Slider;\n\t\tconst stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);\n\t\treturn this.value.toFixed(stepPrecision);\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\tstatic async onDefine() {\n\t\tSlider.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\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"]}