@ui5/webcomponents 0.0.0-aeb93167c → 0.0.0-b053ad005

package/src/SelectPopover.hbs

@@ -1,38 +1,38 @@
 {{#if options}}
 	<ui5-responsive-popover
-		no-arrow
+		hide-arrow
 		_disable-initial-focus
-		content-only-on-desktop
 		placement-type="Bottom"
-		horizontal-align="Left"
-		@ui5-after-open="{{_applyFocusAfterOpen}}"
+		class="ui5-select-popover {{classes.popover}}"
+		horizontal-align="Stretch"
+		@ui5-after-open="{{_afterOpen}}"
 		@ui5-before-open="{{_beforeOpen}}"
 		@ui5-after-close="{{_afterClose}}"
 		@keydown="{{_onkeydown}}"
 	>
-		<div slot="header" class="ui5-responsive-popover-header">
-			<div class="row">
-				<span>{{_headerTitleText}}</span>
-				<ui5-button
-					class="ui5-responsive-popover-close-btn"
-					icon="decline"
-					design="Transparent"
-					@click="{{_toggleRespPopover}}"
-				>
-				</ui5-button>
-			</div>
-			{{#if _isPhone}}
+		{{#if _isPhone}}
+			<div slot="header" class="ui5-responsive-popover-header">
+				<div class="row">
+					<span>{{_headerTitleText}}</span>
+					<ui5-button
+						class="ui5-responsive-popover-close-btn"
+						icon="decline"
+						design="Transparent"
+						@click="{{_toggleRespPopover}}"
+					>
+					</ui5-button>
+				</div>
 				{{#if hasValueStateText}}
 					<div class="{{classes.popoverValueState}} row ui5-select-value-state-dialog-header">
 						{{> valueStateMessage}}
 					</div>
 				{{/if}}
-			{{/if}}
-		</div>
-
+			</div>
+		{{/if}}
 		{{#unless _isPhone}}
 			{{#if hasValueStateText}}
-				<div class="{{classes.popoverValueState}} ui5-select-value-state-popover-padding" style="{{styles.responsivePopoverHeader}}">
+				<div slot="header" class="{{classes.popoverValueState}}" style={{styles.responsivePopoverHeader}}>
+					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 					{{> valueStateMessage}}
 				</div>
 			{{/if}}
@@ -41,8 +41,7 @@
 		<ui5-list
 			mode="SingleSelectAuto"
 			separators="None"
-			@keydown="{{_handlePickerKeydown}}"
-			@ui5-selection-change="{{_handleSelectionChange}}"
+			@mousedown="{{_itemMousedown}}"
 			@ui5-item-press="{{_handleItemPress}}"
 		>
 			{{#each _syncedOptions}}
@@ -50,7 +49,9 @@
 					id="{{this.id}}-li"
 					icon="{{this.icon}}"
 					?selected="{{this.selected}}"
+					?focused="{{this._focused}}"
 					?aria-selected="{{this.selected}}"
+					data-ui5-stable="{{this.stableDomRef}}"
 				>
 					{{this.textContent}}
 				</ui5-li>
@@ -65,11 +66,13 @@
 		_disable-initial-focus
 		prevent-focus-restore
 		no-padding
-		no-arrow
+		hide-arrow
 		class="ui5-valuestatemessage-popover"
 		placement-type="Bottom"
+		horizontal-align="Left"
 	>
-		<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 			{{> valueStateMessage}}
 		</div>
 	</ui5-popover>

package/src/Slider.hbs

@@ -0,0 +1,42 @@
+{{>include "./SliderBase.hbs"}}
+
+{{#*inline "progressBar"}}
+	<div
+		class="ui5-slider-progress-container"
+		aria-hidden="true"
+		part="progress-container"
+	>
+		<div class="ui5-slider-progress"
+			style="{{styles.progress}}"
+			@focusout="{{_onfocusout}}"
+			@focusin="{{_onfocusin}}"
+			tabindex="-1"
+			part="progress-bar"
+		></div>
+	</div>
+{{/inline}}
+
+{{#*inline "handles"}}
+	<div class="ui5-slider-handle"
+		style="{{styles.handle}}"
+		@focusout="{{_onfocusout}}"
+		@focusin="{{_onfocusin}}"
+		role="slider"
+		tabindex="{{tabIndex}}"
+		aria-orientation="horizontal"
+		aria-valuemin="{{min}}"
+		aria-valuemax="{{max}}"
+		aria-valuenow="{{value}}"
+		aria-labelledby="{{_id}}-sliderDesc"
+		aria-disabled="{{_ariaDisabled}}"
+		data-sap-focus-ref
+		part="handle"
+	>
+	<ui5-icon name="source-code" part="icon-slider" slider-icon></ui5-icon>
+		{{#if showTooltip}}
+			<div class="ui5-slider-tooltip" style="{{styles.tooltip}}">
+				<span class="ui5-slider-tooltip-value">{{tooltipValue}}</span>
+			</div>
+		{{/if}}
+	</div>
+{{/inline}}

package/src/Slider.js

@@ -0,0 +1,320 @@
+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";
+
+// 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,
+		},
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The Slider component represents a numerical range and a handle (grip).
+ * The purpose of the component is to enable visual selection of a value in
+ * a continuous numerical range by moving an adjustable handle.
+ *
+ * <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 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 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 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>
+ *
+ * <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
+ */
+class Slider extends SliderBase {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get template() {
+		return SliderTemplate;
+	}
+
+	constructor() {
+		super();
+		this._stateStorage.value = null;
+		this._setInitialValue("value", null);
+	}
+
+	/**
+	 *
+	 * 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");
+	}
+}
+
+Slider.define();
+
+export default Slider;

package/src/SliderBase.hbs

@@ -0,0 +1,38 @@
+<div
+	class="ui5-slider-root"
+	@mousedown="{{_onmousedown}}"
+	@touchstart="{{_ontouchstart}}"
+	@mouseover="{{_onmouseover}}"
+	@mouseout="{{_onmouseout}}"
+	@keydown="{{_onkeydown}}"
+	@keyup="{{_onkeyup}}"
+	dir="{{effectiveDir}}"
+>
+	{{> handlesAriaText}}
+
+	<div class="ui5-slider-inner">
+		{{#if step}}
+			{{#if showTickmarks}}
+				<div class="ui5-slider-tickmarks" style="{{styles.tickmarks}}"></div>
+				{{#if labelInterval}}
+					<ul class="ui5-slider-labels {{classes.labelContainer}}" style="{{styles.labelContainer}}">
+						{{#each _labels}}
+							<li style="{{../styles.label}}">{{this}}</li>
+						{{/each}}
+					</ul>
+				{{/if}}
+			{{/if}}
+		{{/if}}
+
+		{{> progressBar}}
+
+		{{> handles}}
+	</div>
+
+	<span id="{{_id}}-sliderDesc" class="ui5-hidden-text">{{_ariaLabelledByText}}</span>
+</div>
+
+
+{{#*inline "handlesAriaText"}}{{/inline}}
+{{#*inline "progressBar"}}{{/inline}}
+{{#*inline "handles"}}{{/inline}}