@ui5/webcomponents 0.0.0-cc312800a → 0.0.0-cf50976ce

package/dist/Slider.js

@@ -1,7 +1,8 @@
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.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";
@@ -44,24 +45,51 @@ const metadata = {
  * <h3>Structure</h3>
  * The most important properties of the Slider are:
  * <ul>
- * <li>min - The minimum value of the slider range</li>
- * <li>max - The maximum value of the slider range</li>
- * <li>value - The current value of the slider</li>
- * <li>step - Determines the increments in which the slider will move</li>
- * <li>showTooltip - Determines if a tooltip should be displayed above the handle</li>
- * <li>showTickmarks - Displays a visual divider between the step values</li>
+ * <li>min - The minimum value of the slider range.</li>
+ * <li>max - The maximum value of the slider range.</li>
+ * <li>value - The current value of the slider range.</li>
+ * <li>step - Determines the increments in which the slider will move.</li>
+ * <li>showTooltip - Determines if a tooltip should be displayed above the handle.</li>
+ * <li>showTickmarks - Displays a visual divider between the step values.</li>
  * <li>labelInterval - Labels some or all of the tickmarks with their values.</li>
  * </ul>
  *
  * <h3>Usage</h3>
- * The most common usecase is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).
+ * The most common use case is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).
  *
  * <h3>Responsive Behavior</h3>
  * The <code>ui5-slider</code> component adjusts to the size of its parent container by recalculating and
  * resizing the width of the control. You can move the slider handle in several different ways:
  * <ul>
- * <li>Drag and drop to the desired value</li>
- * <li>Click/tap on the range bar to move the handle to that location</li>
+ * <li>Drag and drop the handle to the desired value.</li>
+ * <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>
+ * <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>
+ * <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>
+ * <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>
+ * <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>
+ * <li><code>Plus</code> - Same as <code>Right or Up Arrow</code>;</li>
+ * <li><code>Minus</code> - Same as <code>Left or Down Arrow</code>;</li>
+ * <li><code>Home</code> - Moves the handle to the beginning of the range;</li>
+ * <li><code>End</code> - Moves the handle to the end of the range;</li>
+ * <li><code>Page Up</code> - Same as <code>Right or Up + Ctrl/Cmd</code>;</li>
+ * <li><code>Page Down</code> - Same as <code>Left or Down + Ctrl/Cmd</code>;</li>
+ * <li><code>Escape</code> - Resets the value property after interaction, to the position prior the component's focusing;</li>
  * </ul>
  *
  * <h3>ES6 Module Import</h3>
@@ -89,18 +117,21 @@ class Slider extends SliderBase {
 		super();
 		this._stateStorage.value = null;
 		this._setInitialValue("value", null);
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+	}
+
+	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
+	 * 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
+	 * Update the visual UI representation of the Slider.
 	 *
 	 */
 	onBeforeRendering() {
@@ -147,6 +178,10 @@ class Slider extends SliderBase {
 		if (this._getInitialValue("value") === null) {
 			this._setInitialValue("value", this.value);
 		}
+
+		if (this.showTooltip) {
+			this._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.VISIBLE;
+		}
 	}
 
 	_onfocusout(event) {
@@ -160,6 +195,10 @@ class Slider extends SliderBase {
 		// 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;
+		}
 	}
 
 	/**
@@ -239,9 +278,6 @@ class Slider extends SliderBase {
 			handle: {
 				[this.directionStart]: `${this._handlePositionFromStart}%`,
 			},
-			tickmarks: {
-				"background": `${this._tickmarks}`,
-			},
 			label: {
 				"width": `${this._labelWidth}%`,
 			},
@@ -273,11 +309,26 @@ class Slider extends SliderBase {
 	}
 
 	get _ariaLabelledByText() {
-		return this.i18nBundle.getText(SLIDER_ARIA_DESCRIPTION);
+		return Slider.i18nBundle.getText(SLIDER_ARIA_DESCRIPTION);
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Slider.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;
 	}
 }
 

package/dist/SliderBase.js

@@ -4,10 +4,10 @@ import Float from "@ui5/webcomponents-base/dist/types/Float.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import "@ui5/webcomponents-icons/dist/direction-arrows.js";
 import {
 	isEscape, isHome, isEnd, isUp, isDown, isRight, isLeft, isUpCtrl, isDownCtrl, isRightCtrl, isLeftCtrl, isPlus, isMinus, isPageUp, isPageDown,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import { getTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
 
 // Styles
 import styles from "./generated/themes/SliderBase.css.js";
@@ -18,7 +18,7 @@ import styles from "./generated/themes/SliderBase.css.js";
 const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.SliderBase.prototype */  {
 		/**
-		 * Defines the minimum value of the slider
+		 * Defines the minimum value of the slider.
 		 *
 		 * @type {Float}
 		 * @defaultvalue 0
@@ -29,7 +29,7 @@ const metadata = {
 			defaultValue: 0,
 		},
 		/**
-		 * Defines the maximum value of the slider
+		 * Defines the maximum value of the slider.
 		 *
 		 * @type {Float}
 		 * @defaultvalue 100
@@ -68,7 +68,7 @@ const metadata = {
 			defaultValue: 0,
 		},
 		/**
-		 * Enables tick marks visualization for each step.
+		 * Enables tickmarks visualization for each step.
 		 * <br><br>
 		 * <b>Note:</b> The step must be a positive number.
 		 *
@@ -100,6 +100,18 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the accessible ARIA name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.4.0
+		 */
+		 accessibleName: {
+			type: String,
+		},
+
 		/**
 		 * @private
 		 */
@@ -158,6 +170,15 @@ class SliderBase extends UI5Element {
 			max: null,
 			labelInterval: null,
 		};
+
+		const handleTouchStartEvent = event => {
+			this._onmousedown(event);
+		};
+
+		this._ontouchstart = {
+			handleEvent: handleTouchStartEvent,
+			passive: true,
+		};
 	}
 
 	static get metadata() {
@@ -172,18 +193,6 @@ class SliderBase extends UI5Element {
 		return styles;
 	}
 
-	static get TICKMARK_COLOR_MAP() {
-		return {
-			sap_fiori_3: "#89919a",
-			sap_fiori_3_dark: "#89919a",
-			sap_fiori_3_hcw: "#000000",
-			sap_fiori_3_hcb: "#ffffff",
-			sap_belize: "#bfbfbf",
-			sap_belize_hcw: "#000000",
-			sap_belize_hcb: "#ffffff",
-		};
-	}
-
 	static get UP_EVENTS() {
 		return ["mouseup", "touchend"];
 	}
@@ -219,8 +228,18 @@ class SliderBase extends UI5Element {
 		return 8;
 	}
 
+	static get TOOLTIP_VISIBILITY() {
+		return {
+			VISIBLE: "visible",
+			HIDDEN: "hidden",
+		};
+	}
+
 	get classes() {
 		return {
+			root: {
+				"ui5-slider-root-phone": isPhone(),
+			},
 			labelContainer: {
 				"ui5-slider-hidden-labels": this._labelsOverlapping,
 			},
@@ -243,17 +262,13 @@ class SliderBase extends UI5Element {
 		}
 	}
 
-	_ontouchstart(event) {
-		this._onmousedown(event);
-	}
-
 	/** Shows the tooltip(s) if the <code>showTooltip</code> property is set to true
 	 *
 	 * @private
 	 */
 	_onmouseover(event) {
 		if (this.showTooltip) {
-			this._tooltipVisibility = "visible";
+			this._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.VISIBLE;
 		}
 	}
 
@@ -263,8 +278,8 @@ class SliderBase extends UI5Element {
 	 * @private
 	 */
 	_onmouseout(event) {
-		if (this.showTooltip) {
-			this._tooltipVisibility = "hidden";
+		if (this.showTooltip && !this.shadowRoot.activeElement) {
+			this._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.HIDDEN;
 		}
 	}
 
@@ -408,10 +423,6 @@ class SliderBase extends UI5Element {
 		const step = this._effectiveStep;
 		const newValue = SliderBase.getValueFromInteraction(event, step, min, max, domRect, directionStart);
 
-		if (isPhone() && this.showTooltip) {
-			this._tooltipVisibility = "visible";
-		}
-
 		// Mark start of a user interaction
 		this._isUserInteraction = true;
 		// Only allow one type of move event to be listened to (the first one registered after the down event)
@@ -445,10 +456,6 @@ class SliderBase extends UI5Element {
 	 * @protected
 	 */
 	handleUpBase(valueType) {
-		if (isPhone() && this.showTooltip) {
-			this._tooltipVisibility = "hidden";
-		}
-
 		SliderBase.UP_EVENTS.forEach(upEventType => window.removeEventListener(upEventType, this._upHandler));
 		window.removeEventListener(this._moveEventType, this._moveHandler);
 
@@ -580,7 +587,7 @@ class SliderBase extends UI5Element {
 		if (this.isPropertyUpdated("min", "max", ...values)) {
 			this.storePropertyState("min", "max");
 
-			// Here the value props are changed programatically (not by user interaction)
+			// 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.
 			values.forEach(valueType => {
@@ -607,7 +614,7 @@ class SliderBase extends UI5Element {
 	 * current state is changed due to a user action.
 	 *
 	 * Check if the previously saved state is outdated. That would mean
-	 * a property has been changed programatically because the previous state
+	 * a property has been changed programmatically because the previous state
 	 * is always updated in the interaction handlers.
 	 *
 	 * Will return true if any of the properties is not equal to its previously
@@ -656,45 +663,6 @@ class SliderBase extends UI5Element {
 		return this.effectiveDir === "rtl" ? "right" : "left";
 	}
 
-	/**
-	 * Calculates and draws the tickmarks with a CSS gradient style
-	 *
-	 * @private
-	 */
-	get _tickmarks() {
-		if (!this.showTickmarks || !this._effectiveStep) {
-			return;
-		}
-
-		if (this._hiddenTickmarks) {
-			return `linear-gradient(to right, currentColor 1px, transparent 0) 0 center / calc(100% - 1px) 100% repeat-x`;
-		}
-
-		// Convert number values to strings to let the CSS do calculations better
-		// rounding/subpixel behavior" and the most precise tickmarks distribution
-		const maxStr = String(this._effectiveMax);
-		const minStr = String(this._effectiveMin);
-		const stepStr = String(this._effectiveStep);
-		const tickmarkWidth = "1px";
-
-		// There is a CSS bug with the 'currentcolor' value of a CSS gradient that does not
-		// respect the variable for more than one theme. It has to be set here for now.
-		const currentTheme = getTheme();
-		const currentColor = SliderBase.TICKMARK_COLOR_MAP[currentTheme];
-
-		this._tickmarksAmount = `${maxStr - minStr} / ${stepStr}`;
-		this._hiddenTickmarks = false;
-
-		// Transparent CSS gradient background
-		const tickmarksGradientBase = `linear-gradient(to right, ${currentColor} ${tickmarkWidth}, transparent 0) `;
-
-		// Draw the tickmarks as a patern over the gradient background
-		const tickmarksGradientdPattern = `0 center / calc((100% - ${tickmarkWidth}) / (${this._tickmarksAmount})) 100% repeat-x`;
-
-		// Combine to get the complete CSS background gradient property value
-		return `${tickmarksGradientBase + tickmarksGradientdPattern}`;
-	}
-
 	/**
 	 * Calculates the labels amout, width and text and creates them
 	 *
@@ -740,9 +708,12 @@ class SliderBase extends UI5Element {
 		const min = this._effectiveMin;
 		const max = this._effectiveMax;
 
+		// We need to take into consideration the effective direction of the slider - rtl or ltr.
+		// While in ltr, the left arrow key decreases the value, in rtl it should actually increase it.
+		let step = this.effectiveDir === "rtl" ? -this._effectiveStep : this._effectiveStep;
+
 		// If the action key corresponds to a long step and the slider has more than 10 normal steps,
 		// make a jump of 1/10th of the Slider's length, otherwise just use the normal step property.
-		let step = this._effectiveStep;
 		step = isBigStep && ((max - min) / step > 10) ? (max - min) / 10 : step;
 
 		if (isEnd(event)) {
@@ -768,16 +739,17 @@ class SliderBase extends UI5Element {
 		return isDownCtrl(event) || isUpCtrl(event) || isLeftCtrl(event) || isRightCtrl(event) || isPageUp(event) || isPageDown(event);
 	}
 
+	get _tickmarksCount() {
+		return (this._effectiveMax - this._effectiveMin) / this._effectiveStep;
+	}
+
 	/**
 	 * Calculates space between tickmarks
 	 *
 	 * @private
 	 */
 	_spaceBetweenTickmarks() {
-		const tickmarksAmountStrCalc = this._tickmarksAmount.split("/");
-		const tickmarksAmount = tickmarksAmountStrCalc[0] / tickmarksAmountStrCalc[1];
-
-		return this.getBoundingClientRect().width / tickmarksAmount;
+		return this.getBoundingClientRect().width / this._tickmarksCount;
 	}
 
 	/**
@@ -834,6 +806,10 @@ class SliderBase extends UI5Element {
 	get tabIndex() {
 		return this.disabled ? "-1" : "0";
 	}
+
+	get _ariaLabelledByHandleRefs() {
+		return [`${this._id}-accName`, `${this._id}-sliderDesc`].join(" ").trim();
+	}
 }
 
 export default SliderBase;