@ui5/webcomponents 0.0.0-e7dd012d7 → 0.0.0-ec448881d

package/dist/SliderBase.js

@@ -4,8 +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 { getTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
+import "@ui5/webcomponents-icons/dist/source-code.js";
+import {
+	isEscape, isHome, isEnd, isUp, isDown, isRight, isLeft, isUpCtrl, isDownCtrl, isRightCtrl, isLeftCtrl, isPlus, isMinus, isPageUp, isPageDown,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 
 // Styles
 import styles from "./generated/themes/SliderBase.css.js";
@@ -16,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
@@ -27,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
@@ -66,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.
 		 *
@@ -97,6 +99,19 @@ const metadata = {
 		disabled: {
 			type: Boolean,
 		},
+
+		/**
+		 * Defines the accessible aria name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.4.0
+		 */
+		 accessibleName: {
+			type: String,
+		},
+
 		/**
 		 * @private
 		 */
@@ -111,19 +126,6 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.SliderBase.prototype */ {
-		/**
-		 * Defines the text of the <code>slider</code>.
-		 * <br><b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
-		 *
-		 * @type {Node[]}
-		 * @slot
-		 * @public
-		 */
-		"default": {
-			type: Node,
-		},
-	},
 	events: /** @lends sap.ui.webcomponents.main.SliderBase.prototype */ {
 		/**
 		 * Fired when the value changes and the user has finished interacting with the slider.
@@ -168,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() {
@@ -182,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"];
 	}
@@ -205,12 +204,42 @@ class SliderBase extends UI5Element {
 		};
 	}
 
+	static get ACTION_KEYS() {
+		return [
+			isLeft,
+			isRight,
+			isUp,
+			isDown,
+			isLeftCtrl,
+			isRightCtrl,
+			isUpCtrl,
+			isDownCtrl,
+			isPlus,
+			isMinus,
+			isHome,
+			isEnd,
+			isPageUp,
+			isPageDown,
+			isEscape,
+		];
+	}
+
 	static get MIN_SPACE_BETWEEN_TICKMARKS() {
 		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,
 			},
@@ -233,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;
 		}
 	}
 
@@ -253,9 +278,98 @@ 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;
+		}
+	}
+
+	/**
+	 * Sets initial value when the component is focused in, can be restored with ESC key
+	 *
+	 * @private
+	 */
+	_setInitialValue(valueType, value) {
+		this[`_${valueType}Initial`] = value;
+	}
+
+	_getInitialValue(valueType) {
+		return this[`_${valueType}Initial`];
+	}
+
+	_onkeydown(event) {
+		if (this.disabled || this._effectiveStep === 0) {
+			return;
 		}
+
+		if (SliderBase._isActionKey(event)) {
+			event.preventDefault();
+
+			this._isUserInteraction = true;
+			this._handleActionKeyPress(event);
+		}
+	}
+
+	_onkeyup(event) {
+		if (this.disabled) {
+			return;
+		}
+
+		this._isUserInteraction = false;
+	}
+
+	/**
+	 * Flags if an inner element is currently being focused
+	 *
+	 * @private
+	 */
+	_preserveFocus(isFocusing) {
+		this._isInnerElementFocusing = isFocusing;
+	}
+
+	/**
+	 * Return if an inside element within the component is currently being focused
+	 *
+	 * @private
+	 */
+	_isFocusing() {
+		return this._isInnerElementFocusing;
+	}
+
+	/**
+	 * Prevent focus out when inner element within the component is currently being in process of focusing in.
+	 * In theory this can be achieved either if the shadow root is focusable and 'delegatesFocus' attribute of
+	 * the .attachShadow() customElement method is set to true, or if we forward it manually.
+
+	 * As we use lit-element as base of our core UI5 element class that 'delegatesFocus' property is not set to 'true' and
+	 * we have to manage the focus here. If at some point in the future this changes, the focus delegating logic could be
+	 * removed as it will become redundant.
+	 *
+	 * When we manually set the focus on mouseDown to the first focusable element inside the shadowDom,
+	 * that inner focus (shadowRoot.activeElement) is set a moment before the global document.activeElement
+	 * is set to the customElement (ui5-slider) causing a 'race condition'.
+	 *
+	 * In order for a element within the shadowRoot to be focused, the global document.activeElement MUST be the parent
+	 * customElement of the shadow root, in our case the ui5-slider component. Because of that after our focusin of the handle,
+	 * a focusout event fired by the browser immidiatly after, resetting the focus. Focus out must be manually prevented
+	 * in both initial focusing and switching the focus between inner elements of the component cases.
+
+	 * Note: If we set the focus to the handle with a timeout or a bit later in time, on a mouseup or click event it will
+	 * work fine and we will avoid the described race condition as our host customElement will be already finished focusing.
+	 * However, that does not work for us as we need the focus to be set to the handle exactly on mousedown,
+	 * because of the nature of the component and its available drag interactions.
+	 *
+	 * @private
+	 */
+	_preventFocusOut() {
+		this.focusInnerElement();
+	}
+
+	/**
+	 * Manages the focus between the component's inner elements
+	 * @protected
+	 */
+	focusInnerElement() {
+		this.focus();
 	}
 
 	/**
@@ -288,7 +402,6 @@ class SliderBase extends UI5Element {
 			return;
 		}
 
-
 		// Check if there are any overlapping labels.
 		// If so - only the first and the last one should be visible
 		const labelItems = this.shadowRoot.querySelectorAll(".ui5-slider-labels li");
@@ -310,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)
@@ -322,9 +431,24 @@ class SliderBase extends UI5Element {
 		SliderBase.UP_EVENTS.forEach(upEventType => window.addEventListener(upEventType, this._upHandler));
 		window.addEventListener(this._moveEventType, this._moveHandler);
 
+		this._handleFocusOnMouseDown(event);
 		return newValue;
 	}
 
+	/**
+	 * Forward the focus to an inner inner part within the component on press
+	 *
+	 * @private
+	 */
+	_handleFocusOnMouseDown(event) {
+		const focusedElement = this.shadowRoot.activeElement;
+
+		if (!focusedElement || focusedElement !== event.target) {
+			this._preserveFocus(true);
+			this.focusInnerElement();
+		}
+	}
+
 	/**
 	 * Called when the user finish interacting with the slider
 	 * Fires an <code>change</code> event indicating a final value change, after user interaction is finished.
@@ -332,15 +456,12 @@ 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);
 
 		this._moveEventType = null;
 		this._isUserInteraction = false;
+		this._preserveFocus(false);
 	}
 
 	/**
@@ -357,6 +478,15 @@ class SliderBase extends UI5Element {
 		}
 	}
 
+	/**
+	 * Goes through the key shortcuts available for the component and returns 'true' if the event is triggered by one.
+	 *
+	 * @private
+	 */
+	static _isActionKey(event) {
+		return this.ACTION_KEYS.some(actionKey => actionKey(event));
+	}
+
 	/**
 	 * Locks the given value between min and max boundaries based on slider properties
 	 *
@@ -533,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
 	 *
@@ -609,8 +700,47 @@ class SliderBase extends UI5Element {
 		}
 	}
 
-	get _labels() {
-		return this._labelValues || [];
+	_handleActionKeyPressBase(event, affectedValue) {
+		const isUpAction = SliderBase._isIncreaseValueAction(event);
+		const isBigStep = SliderBase._isBigStepAction(event);
+
+		const currentValue = this[affectedValue];
+		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.
+		step = isBigStep && ((max - min) / step > 10) ? (max - min) / 10 : step;
+
+		if (isEnd(event)) {
+			return max - currentValue;
+		}
+
+		if (isHome(event)) {
+			return (currentValue - min) * -1;
+		}
+
+		return isUpAction ? step : step * -1;
+	}
+
+	static _isDecreaseValueAction(event) {
+		return isDown(event) || isDownCtrl(event) || isLeft(event) || isLeftCtrl(event) || isMinus(event) || isPageDown(event);
+	}
+
+	static _isIncreaseValueAction(event) {
+		return isUp(event) || isUpCtrl(event) || isRight(event) || isRightCtrl(event) || isPlus(event) || isPageUp(event);
+	}
+
+	static _isBigStepAction(event) {
+		return isDownCtrl(event) || isUpCtrl(event) || isLeftCtrl(event) || isRightCtrl(event) || isPageUp(event) || isPageDown(event);
+	}
+
+	get _tickmarksCount() {
+		return (this._effectiveMax - this._effectiveMin) / this._effectiveStep;
 	}
 
 	/**
@@ -619,10 +749,7 @@ class SliderBase extends UI5Element {
 	 * @private
 	 */
 	_spaceBetweenTickmarks() {
-		const tickmarksAmountStrCalc = this._tickmarksAmount.split("/");
-		const tickmarksAmount = tickmarksAmountStrCalc[0] / tickmarksAmountStrCalc[1];
-
-		return this.getBoundingClientRect().width / tickmarksAmount;
+		return this.getBoundingClientRect().width / this._tickmarksCount;
 	}
 
 	/**
@@ -644,6 +771,10 @@ class SliderBase extends UI5Element {
 		}
 	}
 
+	get _labels() {
+		return this._labelValues || [];
+	}
+
 	/**
 	 * Normalizes a new <code>step</code> property value.
 	 * If tickmarks are enabled recreates them according to it.
@@ -671,6 +802,14 @@ class SliderBase extends UI5Element {
 	get _effectiveMax() {
 		return Math.max(this.min, this.max);
 	}
+
+	get tabIndex() {
+		return this.disabled ? "-1" : "0";
+	}
+
+	get _ariaLabelledByHandleRefs() {
+		return [`${this._id}-accName`, `${this._id}-sliderDesc`].join(" ").trim();
+	}
 }
 
 export default SliderBase;