@ui5/webcomponents 1.3.1 → 1.4.0

package/src/RangeSlider.js

@@ -16,6 +16,9 @@ import {
 	RANGE_SLIDER_END_HANDLE_DESCRIPTION,
 } from "./generated/i18n/i18n-defaults.js";
 
+// Styles
+import rangeSliderStyles from "./generated/themes/RangeSlider.css.js";
+
 /**
  * @public
  */
@@ -48,6 +51,10 @@ const metadata = {
 			type: Float,
 			defaultValue: 100,
 		},
+
+		rangePressed: {
+			type: Boolean,
+		},
 	},
 };
 
@@ -129,6 +136,10 @@ class RangeSlider extends SliderBase {
 		return [Icon];
 	}
 
+	static get styles() {
+		return [SliderBase.styles, rangeSliderStyles];
+	}
+
 	constructor() {
 		super();
 		this._stateStorage.startValue = null;
@@ -356,6 +367,8 @@ class RangeSlider extends SliderBase {
 		// Determine the rest of the needed details from the start of the interaction.
 		this._saveInteractionStartData(event, newValue);
 
+		this.rangePressed = this._isPressInCurrentRange;
+
 		// Do not yet update the RangeSlider if press is in range or over a handle.
 		if (this._isPressInCurrentRange || this._handeIsPressed) {
 			this._handeIsPressed = false;
@@ -455,6 +468,8 @@ class RangeSlider extends SliderBase {
 		this._setIsPressInCurrentRange(false);
 
 		this.handleUpBase();
+
+		this.rangePressed = false;
 	}
 
 	/**
@@ -723,6 +738,24 @@ class RangeSlider extends SliderBase {
 		return this._reversedValues;
 	}
 
+	get tickmarksObject() {
+		const count = this._tickmarksCount;
+		const arr = [];
+
+		if (this._hiddenTickmarks) {
+			return [false, false];
+		}
+
+		for (let i = 0; i <= count; i++) {
+			const isBiggerThanStartValue = this._effectiveMin + (i * this.step) >= this.startValue;
+			const isBiggerThanEndValue = this._effectiveMin + (i * this.step) <= this.endValue;
+
+			arr.push(isBiggerThanStartValue && isBiggerThanEndValue);
+		}
+
+		return arr;
+	}
+
 	get _startHandle() {
 		return this.shadowRoot.querySelector(".ui5-slider-handle--start");
 	}
@@ -735,6 +768,18 @@ class RangeSlider extends SliderBase {
 		return this.shadowRoot.querySelector(".ui5-slider-progress");
 	}
 
+	get _ariaLabelledByStartHandleRefs() {
+		return [`${this._id}-accName`, `${this._id}-startHandleDesc`].join(" ").trim();
+	}
+
+	get _ariaLabelledByEndHandleRefs() {
+		return [`${this._id}-accName`, `${this._id}-endHandleDesc`].join(" ").trim();
+	}
+
+	get _ariaLabelledByProgressBarRefs() {
+		return [`${this._id}-accName`, `${this._id}-sliderDesc`].join(" ").trim();
+	}
+
 	get styles() {
 		return {
 			progress: {

package/src/RatingIndicator.hbs

@@ -16,20 +16,34 @@
 	title="{{tooltip}}"
 	aria-label="{{accessibleName}}"
 >
-	<div
-		class="ui5-rating-indicator-stars-wrapper"
+	<ul class="ui5-rating-indicator-list"
 		aria-hidden="true"
-	>
+		>
 		{{#each _stars}}
 			{{#if this.selected}}
-				<div class="ui5-rating-indicator-icon ui5-rating-indicator-active-icon" data-value="{{this.index}}">&#9733;</div>
+				<li data-ui5-value="{{this.index}}" class="ui5-rating-indicator-item ui5-rating-indicator-item-sel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
+				</li>
 			{{else if this.halfStar}}
-				<div class="ui5-rating-indicator-icon ui5-rating-indicator-half-icon" data-value="{{this.index}}">&#9734;</div>
+				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-half">
+					<ui5-icon data-ui5-value="{{this.index}}" name="unfavorite"></ui5-icon>
+					<div class="ui5-rating-indicator-half-icon-wrapper">
+						<ui5-icon data-ui5-value="{{this.index}}" name="favorite" class="ui5-rating-indicator-half-icon"></ui5-icon>
+					</div>
+				</li>
 			{{else if ../readonly}}
-				<div class="ui5-rating-indicator-icon ui5-rating-indicator-readonly-unselected-icon" data-value="{{this.index}}">&#9733;</div>
+				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
+				</li>
+			{{else if ../disabled}}
+				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
+				</li>
 			{{else}}
-				<div class="ui5-rating-indicator-icon" data-value="{{this.index}}">&#9734;</div>
+				<li data-ui5-value="{{this.index}}" class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="unfavorite"></ui5-icon>
+				</li>
 			{{/if}}
 		{{/each}}
-	</div>
+	</ul>
 </div>

package/src/RatingIndicator.js

@@ -18,6 +18,8 @@ import {
 	RATING_INDICATOR_TOOLTIP_TEXT,
 } from "./generated/i18n/i18n-defaults.js";
 import RatingIndicatorTemplate from "./generated/templates/RatingIndicatorTemplate.lit.js";
+import "@ui5/webcomponents-icons/dist/favorite.js";
+import "@ui5/webcomponents-icons/dist/unfavorite.js";
 
 // Styles
 import RatingIndicatorCss from "./generated/themes/RatingIndicator.css.js";
@@ -231,7 +233,7 @@ class RatingIndicator extends UI5Element {
 			return;
 		}
 
-		this.value = parseInt(event.target.getAttribute("data-value"));
+		this.value = parseInt(event.target.getAttribute("data-ui5-value"));
 
 		if (this.value === 1 && this._liveValue === 1) {
 			this.value = 0;

package/src/SegmentedButton.hbs

@@ -5,7 +5,6 @@
 	@focusin="{{_onfocusin}}"
 	class="ui5-segmented-button-root"
 	role="listbox"
-	dir="{{effectiveDir}}"
 	aria-multiselectable="true"
 	aria-describedby="{{_id}}-invisibleText"
 	aria-roledescription={{ariaDescription}}

package/src/SegmentedButtonItem.hbs

@@ -8,7 +8,6 @@
 		aria-disabled="{{disabled}}"
 		data-sap-focus-ref
 	{{> ariaPressed}}
-		dir="{{effectiveDir}}"
 		@focusout={{_onfocusout}}
 		@focusin={{_onfocusin}}
 		@click={{_onclick}}

package/src/Select.hbs

@@ -1,6 +1,5 @@
 <div
 	class="ui5-select-root ui5-input-focusable-element"
-	dir="{{effectiveDir}}"
 	id="{{_id}}-select"
 	@click="{{_onclick}}"
 >
@@ -9,7 +8,6 @@
 			aria-hidden="true"
 			class="ui5-select-option-icon"
 			name="{{selectedOptionIcon}}"
-			dir="{{effectiveDir}}"
 		></ui5-icon>
 	{{/if}}
 	<div class="ui5-select-label-root"
@@ -36,7 +34,6 @@
 		name="slim-arrow-down"
 		input-icon
 		?pressed="{{_iconPressed}}"
-		dir="{{effectiveDir}}"
 	></ui5-icon>
 
 	{{#if hasValueState}}

package/src/Select.js

@@ -504,7 +504,7 @@ class Select extends UI5Element {
 		const itemToSelect = this._searchNextItemByText(text);
 
 		if (itemToSelect) {
-			const nextIndex = this._getSelectedItemIndex(itemToSelect);
+			const nextIndex = this._filteredItems.indexOf(itemToSelect);
 
 			this._changeSelectedItem(this._selectedIndex, nextIndex);
 
@@ -547,7 +547,7 @@ class Select extends UI5Element {
 	}
 
 	_getSelectedItemIndex(item) {
-		return [].indexOf.call(item.parentElement.children, item);
+		return this._filteredItems.findIndex(option => `${option._id}-li` === item.id);
 	}
 
 	_select(index) {
@@ -748,6 +748,9 @@ class Select extends UI5Element {
 				"display": this._filteredItems.length && this._listWidth === 0 ? "none" : "inline-block",
 				"width": `${this._filteredItems.length ? this._listWidth : this.offsetWidth}px`,
 			},
+			responsivePopover: {
+				"min-width": `${this.offsetWidth}px`,
+			},
 		};
 	}
 

package/src/SelectPopover.hbs

@@ -4,11 +4,12 @@
 		_disable-initial-focus
 		placement-type="Bottom"
 		class="ui5-select-popover {{classes.popover}}"
-		horizontal-align="Stretch"
+		horizontal-align="Left"
 		@ui5-after-open="{{_afterOpen}}"
 		@ui5-before-open="{{_beforeOpen}}"
 		@ui5-after-close="{{_afterClose}}"
 		@keydown="{{_onkeydown}}"
+		style={{styles.responsivePopover}}
 	>
 		{{#if _isPhone}}
 			<div slot="header" class="ui5-responsive-popover-header">

package/src/Slider.hbs

@@ -27,12 +27,12 @@
 		aria-valuemin="{{min}}"
 		aria-valuemax="{{max}}"
 		aria-valuenow="{{value}}"
-		aria-labelledby="{{_id}}-sliderDesc"
+		aria-labelledby="{{_ariaLabelledByHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 		data-sap-focus-ref
 		part="handle"
 	>
-	<ui5-icon name="source-code" part="icon-slider" slider-icon></ui5-icon>
+			<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>

package/src/Slider.js

@@ -278,9 +278,6 @@ class Slider extends SliderBase {
 			handle: {
 				[this.directionStart]: `${this._handlePositionFromStart}%`,
 			},
-			tickmarks: {
-				"background": `${this._tickmarks}`,
-			},
 			label: {
 				"width": `${this._labelWidth}%`,
 			},
@@ -318,6 +315,21 @@ class Slider extends SliderBase {
 	static async onDefine() {
 		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;
+	}
 }
 
 Slider.define();

package/src/SliderBase.hbs

@@ -6,14 +6,21 @@
 	@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>
+				<ul class="ui5-slider-tickmarks">
+					{{#each tickmarksObject}}
+						{{#if this}}
+							<li class="ui5-slider-tickmark ui5-slider-tickmark-in-range"></li>
+						{{else}}
+							<li class="ui5-slider-tickmark"></li>
+						{{/if}}
+					{{/each}}
+				</ul>
 				{{#if labelInterval}}
 					<ul class="ui5-slider-labels {{classes.labelContainer}}" style="{{styles.labelContainer}}">
 						{{#each _labels}}
@@ -29,6 +36,7 @@
 		{{> handles}}
 	</div>
 
+	<span id="{{_id}}-accName" class="ui5-hidden-text">{{accessibleName}}</span>
 	<span id="{{_id}}-sliderDesc" class="ui5-hidden-text">{{_ariaLabelledByText}}</span>
 </div>
 

package/src/SliderBase.js

@@ -8,7 +8,6 @@ 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";
-import { getTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
 
 // Styles
 import styles from "./generated/themes/SliderBase.css.js";
@@ -101,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
 		 */
@@ -160,10 +171,12 @@ class SliderBase extends UI5Element {
 			labelInterval: null,
 		};
 
+		const handleTouchStartEvent = event => {
+			this._onmousedown(event);
+		};
+
 		this._ontouchstart = {
-			handleEvent(event) {
-				this._onmousedown(event);
-			},
+			handleEvent: handleTouchStartEvent,
 			passive: true,
 		};
 	}
@@ -180,19 +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",
-			sap_horizon: "#89919a",
-		};
-	}
-
 	static get UP_EVENTS() {
 		return ["mouseup", "touchend"];
 	}
@@ -663,46 +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() {
-		const currentTheme = getTheme();
-		const currentColor = SliderBase.TICKMARK_COLOR_MAP[currentTheme];
-
-		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);
-
-		// 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 tickmarkWidth = "1px";
-
-		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
 	 *
@@ -779,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;
 	}
 
 	/**
@@ -845,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;

package/src/SplitButton.js

@@ -305,12 +305,14 @@ class SplitButton extends UI5Element {
 	constructor() {
 		super();
 
+		const handleTouchStartEvent = event => {
+			this._textButtonActive = true;
+			this.focused = false;
+			this._setTabIndexValue();
+		};
+
 		this._textButtonPress = {
-			handleEvent(event) {
-				this._textButtonActive = true;
-				this.focused = false;
-				this._setTabIndexValue();
-			},
+			handleEvent: handleTouchStartEvent,
 			passive: true,
 		};
 	}

package/src/Switch.hbs

@@ -4,7 +4,6 @@
 	aria-label="{{ariaLabelText}}"
 	aria-checked="{{checked}}"
 	aria-disabled="{{ariaDisabled}}"
-	aria-labelledby="{{_id}}-hiddenText"
 	@click="{{_onclick}}"
 	@keyup="{{_onkeyup}}"
 	@keydown="{{_onkeydown}}"
@@ -47,5 +46,4 @@
 	</div>
 
 	<input type='checkbox' ?checked="{{checked}}" class="ui5-switch-input" data-sap-no-tab-ref/>
-	<span id="{{_id}}-hiddenText" class="ui5-hidden-text">{{hiddenText}}</span>
 </div>

package/src/Switch.js

@@ -10,11 +10,6 @@ import "@ui5/webcomponents-icons/dist/less.js";
 import Icon from "./Icon.js";
 import SwitchDesign from "./types/SwitchDesign.js";
 
-import {
-	SWITCH_ON,
-	SWITCH_OFF,
-} from "./generated/i18n/i18n-defaults.js";
-
 // Template
 import SwitchTemplate from "./generated/templates/SwitchTemplate.lit.js";
 
@@ -100,6 +95,8 @@ const metadata = {
 		/**
 		 * Sets the accessible aria name of the component.
 		 *
+		 * <b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>.
+		 * Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set.
 		 * @type {string}
 		 * @defaultvalue: ""
 		 * @public
@@ -112,6 +109,8 @@ const metadata = {
 		/**
 		 * Receives id(or many ids) of the elements that label the component.
 		 *
+		 * <b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>.
+		 * Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -263,11 +262,11 @@ class Switch extends UI5Element {
 	}
 
 	get accessibilityOnText() {
-		return this._textOn || Switch.i18nBundle.getText(SWITCH_ON);
+		return this._textOn;
 	}
 
 	get accessibilityOffText() {
-		return this._textOff || Switch.i18nBundle.getText(SWITCH_OFF);
+		return this._textOff;
 	}
 
 	get hiddenText() {
@@ -275,7 +274,7 @@ class Switch extends UI5Element {
 	}
 
 	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
+		return [getEffectiveAriaLabelText(this), this.hiddenText].join(" ").trim();
 	}
 
 	static get dependencies() {

package/src/Tab.js

@@ -1,7 +1,11 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import SemanticColor from "./types/SemanticColor.js";
+import ListItemType from "./types/ListItemType.js";
 import TabContainer from "./TabContainer.js";
 import Icon from "./Icon.js";
 import Button from "./Button.js";
@@ -248,7 +252,7 @@ class Tab extends UI5Element {
 	}
 
 	get _effectiveSlotName() {
-		return this.isOnSelectedTabPath ? this._individualSlot : "disabled-slot";
+		return this.isOnSelectedTabPath ? this._individualSlot : `disabled-${this._individualSlot}`;
 	}
 
 	get _defaultSlotName() {
@@ -269,7 +273,7 @@ class Tab extends UI5Element {
 	 * @since 1.0.0-rc.16
 	 */
 	getTabInStripDomRef() {
-		return this._getTabInStripDomRef;
+		return this._tabInStripDomRef;
 	}
 
 	getFocusDomRef() {
@@ -371,11 +375,24 @@ class Tab extends UI5Element {
 		return classes.join(" ");
 	}
 
-	get headerSemanticIconClasses() {
-		const classes = ["ui5-tab-strip-item-semanticIcon"];
+	get semanticIconName() {
+		switch (this.design) {
+		case SemanticColor.Positive:
+			return "sys-enter-2";
+		case SemanticColor.Negative:
+			return "error";
+		case SemanticColor.Critical:
+			return "alert";
+		default:
+			return null;
+		}
+	}
 
-		if (this.design !== SemanticColor.Default) {
-			classes.push(`ui5-tab-strip-item-semanticIcon--${this.design.toLowerCase()}`);
+	get semanticIconClasses() {
+		const classes = ["ui5-tab-semantic-icon"];
+
+		if (this.design !== SemanticColor.Default && this.design !== SemanticColor.Neutral) {
+			classes.push(`ui5-tab-semantic-icon--${this.design.toLowerCase()}`);
 		}
 
 		return classes.join(" ");
@@ -384,7 +401,7 @@ class Tab extends UI5Element {
 	get overflowClasses() {
 		const classes = ["ui5-tab-overflow-item"];
 
-		if (this.design !== SemanticColor.Default) {
+		if (this.design !== SemanticColor.Default && this.design !== SemanticColor.Neutral) {
 			classes.push(`ui5-tab-overflow-item--${this.design.toLowerCase()}`);
 		}
 
@@ -400,7 +417,7 @@ class Tab extends UI5Element {
 	}
 
 	get overflowState() {
-		return (this.disabled || this.isSingleClickArea) ? "Inactive" : "Active";
+		return (this.disabled || this.isSingleClickArea) ? ListItemType.Inactive : ListItemType.Active;
 	}
 }
 

package/src/TabContainer.hbs

@@ -1,7 +1,4 @@
-<div
-	class="{{classes.root}}"
-	dir="{{effectiveDir}}"
->
+<div class="{{classes.root}}">
 	{{#if tabsAtTheBottom}}
 		{{> contentArea}}
 	{{/if}}