@ui5/webcomponents 0.0.0-deac3098a → 0.0.0-e0658a650

package/dist/SliderBase.js

@@ -4,11 +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/source-code.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";
@@ -21,7 +20,7 @@ const metadata = {
 		/**
 		 * Defines the minimum value of the slider.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -32,7 +31,7 @@ const metadata = {
 		/**
 		 * Defines the maximum value of the slider.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 100
 		 * @public
 		 */
@@ -45,7 +44,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 1
 		 * @public
 		 */
@@ -60,7 +59,7 @@ const metadata = {
 		 * Example - if the step value is set to 2 and the label interval is also specified to 2 - then every second
 		 * tickmark will be labelled, which means every 4th value number.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -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"];
 	}
@@ -587,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 => {
@@ -614,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
@@ -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/dist/SplitButton.js

@@ -12,6 +12,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import SplitButtonTemplate from "./generated/templates/SplitButtonTemplate.lit.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 import Button from "./Button.js";
@@ -37,7 +38,7 @@ const metadata = {
 		 * <br><br>
 		 * Example:
 		 *
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -73,7 +74,7 @@ const metadata = {
 		 * <li><code>Attention</code></li>
 		 * </ul>
 		 *
-		 * @type {ButtonDesign}
+		 * @type {sap.ui.webcomponents.main.types.ButtonDesign}
 		 * @defaultvalue "Default"
 		 * @public
 		 */
@@ -96,7 +97,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: ""
@@ -120,7 +121,7 @@ const metadata = {
 		/**
 		 * Accessibility-related properties for inner elements of the Split Button
 		 *
-		 * @type {Object}
+		 * @type {object}
 		 * @private
 		 */
 		_splitButtonAccInfo: {
@@ -272,7 +273,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.SplitButton
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-split-button
  * @public
  * @since 1.1.0
@@ -305,12 +306,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/dist/StandardListItem.js

@@ -2,6 +2,7 @@ import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import ListItem from "./ListItem.js";
 import Icon from "./Icon.js";
 import Avatar from "./Avatar.js";
+import WrappingType from "./types/WrappingType.js";
 import StandardListItemTemplate from "./generated/templates/StandardListItemTemplate.lit.js";
 
 /**
@@ -27,7 +28,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b>
 		 * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
-		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}
 		 * @public
@@ -74,8 +75,8 @@ const metadata = {
 		/**
 		 * Defines the state of the <code>additionalText</code>.
 		 * <br>
-		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Erorr"</code>.
-		 * @type {ValueState}
+		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -98,6 +99,21 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines if the text of the component should wrap, they truncate by default.
+		 *
+		 * <br><br>
+		 * <b>Note:</b> this property takes affect only if text node is provided to default slot of the component
+		 * @type {sap.ui.webcomponents.main.types.WrappingType}
+		 * @defaultvalue "None"
+		 * @private
+		 * @since 1.5.0
+		 */
+		wrappingType: {
+			type: WrappingType,
+			defaultValue: WrappingType.None,
+		},
+
 		/**
 		 * Indicates if the list item has text content.
 		 * @type {boolean}
@@ -146,7 +162,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.StandardListItem
- * @extends ListItem
+ * @extends sap.ui.webcomponents.main.ListItem
  * @tagname ui5-li
  * @implements sap.ui.webcomponents.main.IListItem
  * @public

package/dist/StepInput.js

@@ -42,7 +42,7 @@ const metadata = {
 		/**
 		 * Defines a value of the component.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -54,7 +54,7 @@ const metadata = {
 		/**
 		 * Defines a minimum value of the component.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @public
 		 */
 		min: {
@@ -64,7 +64,7 @@ const metadata = {
 		/**
 		 * Defines a maximum value of the component.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @public
 		 */
 		max: {
@@ -74,7 +74,7 @@ const metadata = {
 		/**
 		 * Defines a step of increasing/decreasing the value of the component.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 1
 		 * @public
 		 */
@@ -95,7 +95,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -177,7 +177,7 @@ const metadata = {
 		/**
 		 * Determines the number of digits after the decimal point of the component.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -187,7 +187,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @public
@@ -356,7 +356,7 @@ const INITIAL_SPEED = 120; // milliseconds
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.StepInput
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-step-input
  * @since 1.0.0-rc.13
  * @public

package/dist/SuggestionGroupItem.js

@@ -6,7 +6,7 @@ import GroupHeaderListItem from "./GroupHeaderListItem.js";
  */
 const metadata = {
 	tag: "ui5-suggestion-group-item",
-	properties: /** @lends  sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
 		/**
 		 * Defines the text of the <code>ui5-suggestion-group-item</code>.
 		 *
@@ -18,9 +18,9 @@ const metadata = {
 			type: String,
 		},
 	},
-	slots: /** @lends  sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
 	},
-	events: /** @lends  sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
 	},
 };
 
@@ -32,7 +32,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.SuggestionGroupItem
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-suggestion-group-item
  * @implements sap.ui.webcomponents.main.IInputSuggestionItem
  * @public

package/dist/SuggestionItem.js

@@ -9,7 +9,7 @@ import ListItemType from "./types/ListItemType.js";
  */
 const metadata = {
 	tag: "ui5-suggestion-item",
-	properties: /** @lends  sap.ui.webcomponents.main.SuggestionItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.SuggestionItem.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 *
@@ -28,7 +28,7 @@ const metadata = {
 		 * <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press and hover,
 		 * while when <code>Inactive</code> or <code>Detail</code> - will not.
 		 *
-		 * @type {ListItemType}
+		 * @type {sap.ui.webcomponents.main.types.ListItemType}
 		 * @defaultvalue "Active"
 		 * @public
 		 * @since 1.0.0-rc.8
@@ -53,7 +53,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b>
 		 * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
-		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}
 		 * @public
@@ -100,8 +100,8 @@ const metadata = {
 		/**
 		 * Defines the state of the <code>additionalText</code>.
 		 * <br><br>
-		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Information"</code>, <code>"Warning"</code> and <code>"Erorr"</code>.
-		 * @type {ValueState}
+		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Information"</code>, <code>"Warning"</code> and <code>"Error"</code>.
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @since 1.0.0-rc.15
 		 * @public
@@ -111,9 +111,9 @@ const metadata = {
 			defaultValue: ValueState.None,
 		},
 	},
-	slots: /** @lends  sap.ui.webcomponents.main.SuggestionItem.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.SuggestionItem.prototype */ {
 	},
-	events: /** @lends  sap.ui.webcomponents.main.SuggestionItem.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.SuggestionItem.prototype */ {
 	},
 };
 
@@ -124,7 +124,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.SuggestionItem
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-suggestion-item
  * @implements sap.ui.webcomponents.main.IInputSuggestionItem
  * @public

package/dist/SuggestionListItem.js

@@ -45,7 +45,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.SuggestionListItem
- * @extends StandardListItem
+ * @extends sap.ui.webcomponents.main.StandardListItem
  * @tagname ui5-li-suggestion-item
  */
 class SuggestionListItem extends StandardListItem {

package/dist/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";
 
@@ -36,7 +31,7 @@ const metadata = {
 		 * positive and negative icons will replace the <code>textOn</code> and <code>textOff</code>.
 		 *
 		 * @public
-		 * @type {SwitchDesign}
+		 * @type {sap.ui.webcomponents.main.types.SwitchDesign}
 		 * @defaultValue "Textual"
 		 */
 		design: {
@@ -51,6 +46,8 @@ const metadata = {
 		 * either by cliking the component, or by pressing the <code>Enter</code> or <code>Space</code> key.
 		 * @type {boolean}
 		 * @defaultvalue false
+		 * @formEvents change
+		 * @formProperty
 		 * @public
 		 */
 		checked: {
@@ -98,8 +95,10 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * 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 +111,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
@@ -121,6 +122,19 @@ const metadata = {
 			type: String,
 			defaultValue: "",
 		},
+
+		/**
+		 * Defines the tooltip of the component.
+		 * <br>
+		 * <b>Note:</b> If applicable an external label reference should always be the preferred option to provide context to the <code>ui5-switch</code> component over a tooltip.
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.9.0
+		 */
+		 tooltip: {
+			type: String,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Switch.prototype */ {
 
@@ -263,11 +277,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 +289,7 @@ class Switch extends UI5Element {
 	}
 
 	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
+		return [getEffectiveAriaLabelText(this), this.hiddenText].join(" ").trim();
 	}
 
 	static get dependencies() {