@ui5/webcomponents - npm Package Compare versions

Comparing version 0.10.0 to 0.10.1

CHANGELOG.md

@@ -6,2 +6,29 @@ # Change Log
 
+## [0.10.1](https://github.com/SAP/ui5-webcomponents/compare/v0.10.0...v0.10.1) (2019-04-24)
+
+
+### Bug Fixes
+
+* **ui5-li:** fix styles import extension ([#351](https://github.com/SAP/ui5-webcomponents/issues/351)) ([4fae1ff](https://github.com/SAP/ui5-webcomponents/commit/4fae1ff))
+* **ui5-messagestrip:** fix layout in ie ([#353](https://github.com/SAP/ui5-webcomponents/issues/353)) ([ca5f62c](https://github.com/SAP/ui5-webcomponents/commit/ca5f62c))
+* switch theme for single imported components ([#356](https://github.com/SAP/ui5-webcomponents/issues/356)) ([dcd64a9](https://github.com/SAP/ui5-webcomponents/commit/dcd64a9))
+* **ui5-radiobutton:** fix single selection within group ([#355](https://github.com/SAP/ui5-webcomponents/issues/355)) ([371fb88](https://github.com/SAP/ui5-webcomponents/commit/371fb88))
+* **ui5-select:** preselect first item if none is selected ([#358](https://github.com/SAP/ui5-webcomponents/issues/358)) ([3d18420](https://github.com/SAP/ui5-webcomponents/commit/3d18420))
+* **ui5-togglebutton:** add base styles ([#352](https://github.com/SAP/ui5-webcomponents/issues/352)) ([f4dee1c](https://github.com/SAP/ui5-webcomponents/commit/f4dee1c))
+
+
+### Code Refactoring
+
+* **ui5-radiobutton:** improve group handling ([#348](https://github.com/SAP/ui5-webcomponents/issues/348)) ([4d7d9c3](https://github.com/SAP/ui5-webcomponents/commit/4d7d9c3))
+* **ui5-radiobutton:** enable radio button form support ([#357](https://github.com/SAP/ui5-webcomponents/issues/357)) ([96a0517](https://github.com/SAP/ui5-webcomponents/commit/96a0517))
+
+
+### BREAKING CHANGES
+
+* **ui5-radiobutton:** the property "group" is replaced by the "name" property.
+
+
+
+
+
 # [0.10.0](https://github.com/SAP/ui5-webcomponents/compare/v0.9.0...v0.10.0) (2019-04-22)
@@ -8,0 +35,0 @@

dist/build/compiled/RadioButtonRenderer.lit.js

@@ -6,3 +6,3 @@
 const RadioButtonLitRenderer = {};
-const block0 = (context) => { return html`<div 	id="${ifTruthy(context.ctr._id)}"	data-sap-ui="${ifTruthy(context.ctr._id)}"	aria-hidden="${ifTruthy(context.ariaHidden)}"	class="${ifTruthy(context.classes.main)}"	style="${ifTruthy(context.styles.main)}"	role="radio"	aria-checked="${ifTruthy(context.ctr.selected)}"	aria-readonly="${ifTruthy(context.readOnly)}"	tabindex="${ifTruthy(context.tabIndex)}"><div class='${ifTruthy(context.classes.inner)}'><svg class="sapMRbSvg" focusable="false"><circle class="sapMRbSvgOuter" cx="${ifTruthy(context.circle.x)}" cy="${ifTruthy(context.circle.y)}" r="${ifTruthy(context.circle.rOuter)}" stroke-width="2" fill="none" /><circle class="sapMRbSvgInner" cx="${ifTruthy(context.circle.x)}" cy="${ifTruthy(context.circle.y)}" r="${ifTruthy(context.circle.rInner)}" stroke-width="10" /></svg><input type='radio' ?checked="${ifTruthy(context.ctr.selected)}" ?readonly="${ifTruthy(context.ctr.readOnly)}" ?disabled="${ifTruthy(context.ctr.readOnly)}" name="${ifTruthy(context.ctr.group)}" data-sap-no-tab-ref/></div>	${ context.ctr._label.text ? block1(context) : undefined }</div>`; };
+const block0 = (context) => { return html`<div 	id="${ifTruthy(context.ctr._id)}"	data-sap-ui="${ifTruthy(context.ctr._id)}"	aria-hidden="${ifTruthy(context.ariaHidden)}"	class="${ifTruthy(context.classes.main)}"	style="${ifTruthy(context.styles.main)}"	role="radio"	aria-checked="${ifTruthy(context.ctr.selected)}"	aria-readonly="${ifTruthy(context.readOnly)}"	tabindex="${ifTruthy(context.tabIndex)}"><div class='${ifTruthy(context.classes.inner)}'><svg class="sapMRbSvg" focusable="false"><circle class="sapMRbSvgOuter" cx="${ifTruthy(context.circle.x)}" cy="${ifTruthy(context.circle.y)}" r="${ifTruthy(context.circle.rOuter)}" stroke-width="2" fill="none" /><circle class="sapMRbSvgInner" cx="${ifTruthy(context.circle.x)}" cy="${ifTruthy(context.circle.y)}" r="${ifTruthy(context.circle.rInner)}" stroke-width="10" /></svg><input type='radio' ?checked="${ifTruthy(context.ctr.selected)}" ?readonly="${ifTruthy(context.ctr.readOnly)}" ?disabled="${ifTruthy(context.ctr.readOnly)}" name="${ifTruthy(context.ctr.name)}" data-sap-no-tab-ref/></div>	${ context.ctr._label.text ? block1(context) : undefined }</div>`; };
 const block1 = (context) => { return html`<ui5-label class="labelInRadioButton">${ifTruthy(context.ctr._label.text)}</ui5-label>	`; };
@@ -9,0 +9,0 @@ const renderMe = block0;

dist/Button.js

@@ -14,2 +14,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -16,0 +19,0 @@ * @public

dist/Calendar.js

@@ -27,2 +27,5 @@ import "@ui5/webcomponents-base/src/shims/jquery-shim.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -29,0 +32,0 @@ * @public

dist/CalendarHeader.js

@@ -12,2 +12,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 const metadata = {
@@ -14,0 +17,0 @@ tag: "ui5-calendar-header",

dist/Card.js

@@ -13,2 +13,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -15,0 +18,0 @@ * @public

dist/CheckBox.js

@@ -13,2 +13,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -187,2 +190,13 @@ * @public
 
+		this._enableFormSupport();
+	}
+
+	syncLabel() {
+		this._label = Object.assign({}, this._label);
+		this._label.text = this.text;
+		this._label.wrap = this.wrap;
+		this._label.textDirection = this.textDirection;
+	}
+
+	_enableFormSupport() {
 		if (CheckBox.FormSupport) {
@@ -198,9 +212,2 @@ CheckBox.FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
 
-	syncLabel() {
-		this._label = Object.assign({}, this._label);
-		this._label.text = this.text;
-		this._label.wrap = this.wrap;
-		this._label.textDirection = this.textDirection;
-	}
-
 	onclick() {
@@ -207,0 +214,0 @@ this.toggle();

dist/CustomListItem.js

@@ -9,2 +9,5 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -11,0 +14,0 @@ * @public

dist/DatePicker.js

@@ -31,2 +31,5 @@ import "@ui5/webcomponents-base/src/shims/jquery-shim.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -33,0 +36,0 @@ * @public

dist/DayPicker.js

@@ -19,2 +19,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -21,0 +24,0 @@ * @public

dist/Dialog.js

@@ -11,2 +11,5 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -13,0 +16,0 @@ * @public

dist/GroupHeaderListItem.js

@@ -11,2 +11,4 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
 
@@ -13,0 +15,0 @@ /**

dist/Icon.js

@@ -11,2 +11,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -13,0 +16,0 @@ * @public

dist/Input.js

@@ -21,2 +21,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -23,0 +26,0 @@ * @public

dist/InputElementsFormSupport.js

@@ -5,2 +5,3 @@ import Input from "./Input.js";
 import CheckBox from "./CheckBox.js";
+import RadioButton from "./RadioButton.js";
 import Button from "./Button.js";
@@ -14,4 +15,5 @@
 CheckBox.FormSupport = FormSupport;
+RadioButton.FormSupport = FormSupport;
 Button.FormSupport = FormSupport;
 
 export default {};

dist/Label.js

@@ -11,2 +11,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -13,0 +16,0 @@ * @public

dist/Link.js

@@ -14,2 +14,5 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -16,0 +19,0 @@ * @public

dist/List.js

@@ -19,2 +19,5 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -21,0 +24,0 @@ * @public

dist/ListItem.js

@@ -11,3 +11,3 @@ import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
 // Styles
-import styles from "./themes/ListItem.css";
+import styles from "./themes/ListItem.css.js";
 
@@ -14,0 +14,0 @@ /**

dist/ListItemBase.js

@@ -7,3 +7,3 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 // Styles
-import styles from "./themes/ListItemBase.css";
+import styles from "./themes/ListItemBase.css.js";
 
@@ -10,0 +10,0 @@

dist/MessageStrip.js

@@ -12,2 +12,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -14,0 +17,0 @@ * @public

dist/MessageStripTemplateContext.js

@@ -11,3 +11,3 @@ class MessageStripTemplateContext {
 				main: {
-					"ui5-messagestrip": true,
+					"ui5-messagestrip-root": true,
 					"ui5-messagestrip-icon--hidden": state.hideIcon,
@@ -14,0 +14,0 @@ "ui5-messagestrip-close-icon--hidden": state.hideCloseButton,

dist/MonthPicker.js

@@ -18,2 +18,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -20,0 +23,0 @@ * @public

dist/Panel.js

@@ -16,2 +16,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -18,0 +21,0 @@ * @public

dist/Popover.js

@@ -18,2 +18,5 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -20,0 +23,0 @@ * @public

dist/Popup.js

@@ -9,2 +9,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -11,0 +14,0 @@ * @public

dist/RadioButton.js

@@ -21,2 +21,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -96,8 +99,20 @@ * @public
 		/**
-		 * Defines the group to which the <code>ui5-radiobutton</code> belongs.
+		 * Defines the name of the <code>ui5-radiobutton</code>.
+		 * Radio buttons with the same <code>name</code> will form a radio button group.
+		 * <br/><b>Note:</b>
+		 * The selection can be changed with <code>ARROW_UP/DOWN</code> and <code>ARROW_LEFT/RIGHT</code> keys between radios in same group.
+		 * <br/><b>Note:</b>
+		 * Only one radio button can be selected per group.
 		 *
+		 * <b>Important:</b> For the <code>name</code> property to have effect when submitting forms, you must add the following import to your project:
+		 * <code>import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";</code>
+		 *
+		 * <b>Note:</b> When set, a native <code>input</code> HTML element
+		 * will be created inside the <code>ui5-radiobutton</code> so that it can be submitted as
+		 * part of an HTML form.
+		 *
 		 * @type {string}
 		 * @public
 		 */
-		group: {
+		name: {
 			defaultValue: "",
@@ -107,2 +122,18 @@ type: String,
 
+		/**
+		 * Defines the form value of the <code>ui5-radiobutton</code>.
+		 * When a form with a radio button group is submitted, the group's value
+		 * will be the value of the currently selected radio button.
+		 *
+		 * <b>Important:</b> For the <code>value</code> property to have effect, you must add the following import to your project:
+		 * <code>import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";</code>
+		 *
+		 * @type {string}
+		 * @public
+		 */
+		value: {
+			type: String,
+			defaultValue: "",
+		},
+
 		_label: {
@@ -133,5 +164,5 @@ type: Object,
  * When a <code>ui5-radiobutton</code> that is within a group is selected, the one
- * that was previously selected gets
- * automatically deselected.
+ * that was previously selected gets automatically deselected. You can group radio buttons by using the <code>name</code> property.
  *
+ *
  * <h3>ES6 Module Import</h3>
@@ -169,2 +200,4 @@ *
 		this.syncGroup();
+
+		this._enableFormSupport();
 	}
@@ -178,20 +211,31 @@
 	syncGroup() {
-		const oldGroup = this._group;
-		const currentGroup = this.group;
+		const oldGroup = this._name;
+		const currentGroup = this.name;
 
-		if (currentGroup === oldGroup) {
-			return;
-		}
+		if (currentGroup !== oldGroup) {
+			if (oldGroup) {
+				// remove the control from the previous group
+				RadioButtonGroup.removeFromGroup(this, oldGroup);
+			}
 
-		if (oldGroup) {
-			// remove the control from the previous group
-			RadioButtonGroup.removeFromGroup(this, oldGroup);
+			if (currentGroup) {
+				// add the control to the existing group
+				RadioButtonGroup.addToGroup(this, currentGroup);
+			}
+		} else if (currentGroup) {
+			RadioButtonGroup.enforceSingleSelection(this, currentGroup);
 		}
 
-		if (currentGroup) {
-			// add the control to the existing group
-			RadioButtonGroup.addToGroup(this, currentGroup);
+		this._name = this.name;
+	}
+
+	_enableFormSupport() {
+		if (RadioButton.FormSupport) {
+			RadioButton.FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
+				nativeInput.disabled = element.disabled || !element.selected;
+				nativeInput.value = element.selected ? element.value : "";
+			});
+		} else if (this.value) {
+			console.warn(`In order for the "value" property to have effect, you should also: import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";`); // eslint-disable-line
 		}
-
-		this._group = this.group;
 	}
@@ -204,3 +248,3 @@
 	_handleDown(event) {
-		const currentGroup = this.group;
+		const currentGroup = this.name;
 
@@ -216,3 +260,3 @@ if (!currentGroup) {
 	_handleUp(event) {
-		const currentGroup = this.group;
+		const currentGroup = this.name;
 
@@ -256,3 +300,3 @@ if (!currentGroup) {
 
-		if (!this.group) {
+		if (!this.name) {
 			this.selected = !this.selected;
@@ -263,3 +307,3 @@ this.fireEvent("select");
 
-		RadioButtonGroup.selectItem(this, this.group);
+		RadioButtonGroup.selectItem(this, this.name);
 		return this;
@@ -266,0 +310,0 @@ }

dist/RadioButtonGroup.js

@@ -10,15 +10,21 @@ class RadioButtonGroup {
 
+	static getSelectedRadioFromGroup(groupName) {
+		return this.selectedRadios.get(groupName);
+	}
+
 	static removeGroup(groupName) {
+		this.selectedRadios.delete(groupName);
 		return this.groups.delete(groupName);
 	}
 
-	static addToGroup(control, groupName) {
+	static addToGroup(radioBtn, groupName) {
 		if (this.hasGroup(groupName)) {
-			this.getGroup(groupName).push(control);
+			this.enforceSingleSelection(radioBtn, groupName);
+			this.getGroup(groupName).push(radioBtn);
 		} else {
-			this.createGroup(control, groupName);
+			this.createGroup(radioBtn, groupName);
 		}
 	}
 
-	static removeFromGroup(control, groupName) {
+	static removeFromGroup(radioBtn, groupName) {
 		if (!this.hasGroup(groupName)) {
@@ -29,6 +35,7 @@ return;
 		const group = this.getGroup(groupName);
+		const selectedRadio = this.getSelectedRadioFromGroup(groupName);
 
-		// Remove the control from the given group
-		group.forEach((_control, idx, arr) => {
-			if (control._id === _control._id) {
+		// Remove the radio button from the given group
+		group.forEach((_radioBtn, idx, arr) => {
+			if (radioBtn._id === _radioBtn._id) {
 				return arr.splice(idx, 1);
@@ -38,2 +45,6 @@ }
 
+		if (selectedRadio === radioBtn) {
+			this.selectedRadios.set(groupName, null);
+		}
+
 		// Remove the group if it is empty
@@ -45,6 +56,8 @@ if (!group.length) {
 
-	static createGroup(control, groupName) {
-		if (!this.hasGroup(groupName)) {
-			this.groups.set(groupName, [control]);
+	static createGroup(radioBtn, groupName) {
+		if (radioBtn.selected) {
+			this.selectedRadios.set(groupName, radioBtn);
 		}
+
+		this.groups.set(groupName, [radioBtn]);
 	}
@@ -63,12 +76,3 @@
 
-		// de-select all the rest
-		group.forEach(radio => {
-			if (radio._id !== nextItemToSelect._id) {
-				radio.selected = false;
-				radio.fireEvent("select", { selected: radio.selected });
-			}
-		});
-
-		// select the next item
-		this._selectItem(nextItemToSelect);
+		this.updateSelectionInGroup(nextItemToSelect, groupName);
 	}
@@ -87,39 +91,30 @@
 
-		// de-select all the rest
-		group.forEach(radio => {
-			if (radio._id !== previousItemToSelect._id) {
-				radio.selected = false;
-				radio.fireEvent("select", { selected: radio.selected });
-			}
-		});
-
-		// select the next item
-		this._selectItem(previousItemToSelect);
+		this.updateSelectionInGroup(previousItemToSelect, groupName);
 	}
 
 	static selectItem(item, groupName) {
-		const group = this.getGroup(groupName);
+		this.updateSelectionInGroup(item, groupName);
+	}
 
-		// de-select all the rest
-		group.forEach(radio => {
-			if (radio._id !== item._id) {
-				radio.selected = false;
-				radio.fireEvent("select", { selected: radio.selected });
-			}
-		});
+	static updateSelectionInGroup(radioBtnToSelect, groupName) {
+		const selectedRadio = this.getSelectedRadioFromGroup(groupName);
 
-		this._selectItem(item);
+		this._deselectRadio(selectedRadio);
+		this._selectRadio(radioBtnToSelect);
+		this.selectedRadios.set(groupName, radioBtnToSelect);
 	}
 
-	static get groups() {
-		if (!this._groups) {
-			this._groups = new Map();
+	static _deselectRadio(radioBtn) {
+		if (radioBtn) {
+			radioBtn.selected = false;
 		}
-		return this._groups;
 	}
 
-	static _selectItem(item) {
-		item.focus();
-		item.selected = true;
-		item.fireEvent("select", { selected: item.selected });
+	static _selectRadio(radioBtn) {
+		if (radioBtn) {
+			radioBtn.focus();
+			radioBtn.selected = true;
+			radioBtn._selected = true;
+			radioBtn.fireEvent("select");
+		}
 	}
@@ -129,7 +124,7 @@
 		const groupLength = group.length;
-		let nextItemToSelect = null;
+		let nextRadioToSelect = null;
 
 		if (pos === groupLength - 1) {
 			if (!group[0].disabled) {
-				nextItemToSelect = group[0];
+				nextRadioToSelect = group[0];
 			} else {
@@ -139,3 +134,3 @@ return this._nextSelectable(0, group);
 		} else if (!group[++pos].disabled) {
-			nextItemToSelect = group[pos];
+			nextRadioToSelect = group[pos];
 		} else {
@@ -145,3 +140,3 @@ return this._nextSelectable(pos, group);
 
-		return nextItemToSelect;
+		return nextRadioToSelect;
 	}
@@ -151,7 +146,7 @@
 		const groupLength = group.length;
-		let previousSelectable = null;
+		let previousRadioToSelect = null;
 
 		if (pos === 0) {
 			if (!group[groupLength - 1].disabled) {
-				previousSelectable = group[groupLength - 1];
+				previousRadioToSelect = group[groupLength - 1];
 			} else {
@@ -161,3 +156,3 @@ return this._previousSelectable(groupLength - 1, group);
 		} else if (!group[--pos].disabled) {
-			previousSelectable = group[pos];
+			previousRadioToSelect = group[pos];
 		} else {
@@ -167,6 +162,35 @@ return this._previousSelectable(pos, group);
 
-		return previousSelectable;
+		return previousRadioToSelect;
 	}
+
+	static enforceSingleSelection(radioBtn, groupName) {
+		const selectedRadio = this.getSelectedRadioFromGroup(groupName);
+
+		if (radioBtn.selected) {
+			if (!selectedRadio) {
+				this.selectedRadios.set(groupName, radioBtn);
+			} else if (radioBtn !== selectedRadio) {
+				this._deselectRadio(selectedRadio);
+				this.selectedRadios.set(groupName, radioBtn);
+			}
+		} else if (radioBtn === selectedRadio) {
+			this.selectedRadios.set(groupName, null);
+		}
+	}
+
+	static get groups() {
+		if (!this._groups) {
+			this._groups = new Map();
+		}
+		return this._groups;
+	}
+
+	static get selectedRadios() {
+		if (!this._selectedRadios) {
+			this._selectedRadios = new Map();
+		}
+		return this._selectedRadios;
+	}
 }
 
 export default RadioButtonGroup;

dist/RadioButtonTemplateContext.js

@@ -28,3 +28,3 @@ import { isDesktop } from "@ui5/webcomponents-core/dist/sap/ui/Device.js";
 				readOnly: state.disabled || state.readOnly,
-				tabIndex: state.disabled || (!state.selected && state.group) ? "-1" : "0",
+				tabIndex: state.disabled || (!state.selected && state.name) ? "-1" : "0",
 				circle: compact ? SVGConfig.compact : SVGConfig.default,
@@ -31,0 +31,0 @@ classes: { main: mainClasses, inner: innerClasses },

dist/Select.js

@@ -8,2 +8,3 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 	isEnter,
+	isEscape,
 } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
@@ -22,2 +23,5 @@ import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -156,2 +160,6 @@ * @public
 		this._closing = false; // Flag for handling open/close on space
+		this._selectedItemBeforeOpen = null; // Stores the selected item before opening the picker
+		this._escapePressed = false; // Identifies if the escape is pressed when picker is open
+
+
 		this._setSelectedItem(null);
@@ -204,2 +212,11 @@ this._setPreviewedItem(null);
 
+		if (isEscape(event) && this._opened && this._selectedItemBeforeOpen) {
+			this.items.forEach(item => {
+				item.selected = false;
+			});
+
+			this._select(this._selectedItemBeforeOpen, this.items.indexOf(this._selectedItemBeforeOpen));
+			this._escapePressed = true;
+		}
+
 		const key = event.which;
@@ -236,3 +253,2 @@
 		this._select(item);
-		this._fireChange(item);
 	}
@@ -246,12 +262,21 @@
 	onOpen() {
-		this._opened = true;// invalidating property
+		this._opened = true; // invalidating property
+
+		const selectedItem = this._getSelectedItem();
+
+		if (selectedItem) {
+			this._selectedItemBeforeOpen = selectedItem;
+			selectedItem.focus();
+		}
 	}
 
 	onClose() {
-		this._opened = false;// invalidating property
+		this._opened = false; // invalidating property
 
-		if (this._isSelectionChanged()) {
-			const previewedItem = this._getPreviewedItem();
+		if ((this._getSelectedItem() !== this._selectedItemBeforeOpen) && !this._escapePressed) {
+			const previewedItem = this._getSelectedItem();
 			this._fireChange(previewedItem);
 		}
+
+		this._escapePressed = false;
 	}
@@ -261,3 +286,3 @@
 	_validateSelection() {
-		if (this._isOpened()) {
+		if (this._isOpened() || !this.items.length) {
 			return;
@@ -279,2 +304,7 @@ }
 
+		if (!selectedItem) {
+			selectedItem = this.items[0];
+			selectedItemPos = 0;
+		}
+
 		if (this._getSelectedItem() !== selectedItem) {
@@ -281,0 +311,0 @@ this._select(selectedItem, selectedItemPos);

dist/ShellBar.js

@@ -21,2 +21,5 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -23,0 +26,0 @@ * @public

dist/ShellBarItem.js

@@ -8,2 +8,5 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -10,0 +13,0 @@ * @public

dist/StandardListItem.js

@@ -10,2 +10,5 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -12,0 +15,0 @@ * @public

dist/Switch.js

@@ -13,2 +13,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -15,0 +18,0 @@ * @public

dist/Tab.js

@@ -10,2 +10,5 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -12,0 +15,0 @@ * @public

dist/TabContainer.js

@@ -17,4 +17,7 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 // Styles
-import buttonCss from "./themes/TabContainer.css.js";
+import tabContainerCss from "./themes/TabContainer.css.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 const SCROLL_STEP = 128;
@@ -166,3 +169,3 @@
 	static get styles() {
-		return buttonCss;
+		return tabContainerCss;
 	}
@@ -169,0 +172,0 @@

dist/Table.js

@@ -12,2 +12,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -14,0 +17,0 @@ * @public

dist/TableCell.js

@@ -8,2 +8,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -10,0 +13,0 @@ * @public

dist/TableColumn.js

@@ -10,2 +10,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 const metadata = {
@@ -12,0 +15,0 @@ tag: "ui5-table-column",

dist/TableRow.js

@@ -9,2 +9,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -11,0 +14,0 @@ * @public

dist/TabSeparator.js

@@ -6,2 +6,5 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -8,0 +11,0 @@ * @public

dist/TextArea.js

@@ -12,2 +12,5 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -14,0 +17,0 @@ * @public

dist/themes/MessageStrip.css.js

@@ -1,1 +0,1 @@
-export default ":host(ui5-messagestrip){display:inline-block;width:100%;height:100%}ui5-messagestrip{display:inline-block;width:100%;height:100%}span[data-sap-ui-wc-root]{display:flex}.ui5-messagestrip{width:100%;height:100%;display:flex;border-radius:var(--_ui5_messagestrip_border_radius,.1875rem);padding:var(--_ui5_messagestrip_padding,.125rem .125rem);border-width:var(--_ui5_messagestrip_border_width,1px);border-style:solid;box-sizing:border-box;padding:.4375rem 2rem .4375rem 2.5rem;position:relative}.ui5-messagestrip .ui5-messagestrip-icon{width:var(--_ui5_messagestrip_icon_width,2.5rem);box-sizing:border-box;position:absolute;top:var(--_ui5_messagestrip_icon_top,.4375rem);left:0}.ui5-messagestrip .ui5-messagestrip-text{width:100%;color:var(--sapTextColor,var(--sapPrimary6,#32363a));line-height:1.2}.ui5-messagestrip ui5-button{height:var(--_ui5_messagestrip_button_height,1.625rem);border-width:var(--_ui5_messagestrip_button_border_width,0);border-style:var(--_ui5_messagestrip_button_border_style,none);border-color:var(--_ui5_messagestrip_button_border_color,transparent);border-radius:var(--_ui5_messagestrip_button_border_radius,0)}.ui5-messagestrip-icon--hidden{padding:.4375rem 2rem .4375rem 1rem}.ui5-messagestrip-close-icon--hidden{padding-right:1rem}.ui5-messagestrip-text{font-family:var(--sapUiFontFamily,var(--sapFontFamily,\"72\",\"72full\",Arial,Helvetica,sans-serif));font-size:var(--sapMFontMediumSize,.875rem)}.ui5-messagestrip--info{background-color:var(--sapUiNeutralBG,var(--sapNeutralBackground,#f4f4f4));border-color:var(--sapUiNeutralBorder,var(--sapNeutralColor,#6a6d70));color:var(--sapUiBaseText,var(--sapTextColor,var(--sapPrimary6,#32363a)))}.ui5-messagestrip--info .ui5-messagestrip-icon{color:var(--sapUiNeutralElement,var(--sapNeutralElementColor,var(--sapNeutralColor,#6a6d70)))}.ui5-messagestrip--positive{background-color:var(--sapUiSuccessBG,var(--sapSuccessBackground,#f1fdf6));border-color:var(--sapUiSuccessBorder,var(--sapSuccessBorderColor,var(--sapPositiveColor,#107e3e)))}.ui5-messagestrip--positive .ui5-messagestrip-icon{color:var(--sapUiPositiveElement,var(--sapPositiveElementColor,var(--sapPositiveColor,#107e3e)))}.ui5-messagestrip--negative{background-color:var(--sapUiErrorBG,var(--sapErrorBackground,#ffebeb));border-color:var(--sapUiErrorBorder,var(--sapErrorBorderColor,var(--sapNegativeColor,#b00)))}.ui5-messagestrip--negative .ui5-messagestrip-icon{color:var(--sapUiNegativeElement,var(--sapNegativeElementColor,var(--sapNegativeColor,#b00)))}.ui5-messagestrip--warning{background-color:var(--sapUiWarningBG,var(--sapWarningBackground,#fef7f1));border-color:var(--sapUiWarningBorder,var(--sapWarningBorderColor,var(--sapCriticalColor,#e9730c)))}.ui5-messagestrip--warning .ui5-messagestrip-icon{color:var(--sapUiCriticalElement,var(--sapCriticalElementColor,var(--sapCriticalColor,#e9730c)))}.ui5-messagestrip-close-icon{width:var(--_ui5_messagestrip_close_button_size,1.625rem);height:var(--_ui5_messagestrip_close_button_size,1.625rem);border-radius:.2rem;font-size:.75rem;background:transparent;color:var(--sapUiBaseText,var(--sapTextColor,var(--sapPrimary6,#32363a)));outline:0;cursor:pointer;position:absolute;right:.125rem;top:.125rem;border:var(--_ui5_messagestrip_close_button_border,none);-webkit-user-select:none;-ms-user-select:none;user-select:none}.ui5-messagestrip-close-icon:hover{background-color:var(--sapUiButtonLiteHoverBackground,var(--sapUiButtonHoverBackground,var(--sapButton_Hover_Background,#ebf5fe)))}.ui5-messagestrip-close-icon:active{background-color:var(--sapUiButtonLiteActiveBackground,var(--sapUiButtonActiveBackground,var(--sapUiActive,var(--sapActiveColor,var(--sapHighlightColor,#0854a0)))));color:var(--sapUiButtonActiveTextColor,#fff)}.ui5-messagestrip-close-icon:focus:after{content:\"\";position:absolute;top:1px;bottom:1px;left:1px;right:1px;border:var(--_ui5_messagestrip_focus_width,1px) dotted var(--sapUiContentFocusColor,var(--sapContent_FocusColor,#000));pointer-events:none}.ui5-messagestrip-close-icon:active:focus:after{border:var(--_ui5_messagestrip_focus_width,1px) dotted var(--sapUiContentContrastFocusColor,var(--sapContent_ContrastFocusColor,#fff))}"
+export default ":host(ui5-messagestrip){display:inline-block;width:100%;height:100%}ui5-messagestrip{display:inline-block;width:100%;height:100%}span[data-sap-ui-wc-root]{display:flex}.ui5-messagestrip-root{width:100%;height:100%;display:flex;border-radius:var(--_ui5_messagestrip_border_radius,.1875rem);padding:var(--_ui5_messagestrip_padding,.125rem .125rem);border-width:var(--_ui5_messagestrip_border_width,1px);border-style:solid;box-sizing:border-box;padding:.4375rem 2rem .4375rem 2.5rem;position:relative}.ui5-messagestrip-root .ui5-messagestrip-icon{width:var(--_ui5_messagestrip_icon_width,2.5rem);box-sizing:border-box;position:absolute;top:var(--_ui5_messagestrip_icon_top,.4375rem);left:0}.ui5-messagestrip -root.ui5-messagestrip-text{width:100%;color:var(--sapTextColor,var(--sapPrimary6,#32363a));line-height:1.2}.ui5-messagestrip-root ui5-button{height:var(--_ui5_messagestrip_button_height,1.625rem);border-width:var(--_ui5_messagestrip_button_border_width,0);border-style:var(--_ui5_messagestrip_button_border_style,none);border-color:var(--_ui5_messagestrip_button_border_color,transparent);border-radius:var(--_ui5_messagestrip_button_border_radius,0)}.ui5-messagestrip-icon--hidden{padding:.4375rem 2rem .4375rem 1rem}.ui5-messagestrip-close-icon--hidden{padding-right:1rem}.ui5-messagestrip-text{font-family:var(--sapUiFontFamily,var(--sapFontFamily,\"72\",\"72full\",Arial,Helvetica,sans-serif));font-size:var(--sapMFontMediumSize,.875rem)}.ui5-messagestrip--info{background-color:var(--sapUiNeutralBG,var(--sapNeutralBackground,#f4f4f4));border-color:var(--sapUiNeutralBorder,var(--sapNeutralColor,#6a6d70));color:var(--sapUiBaseText,var(--sapTextColor,var(--sapPrimary6,#32363a)))}.ui5-messagestrip--info .ui5-messagestrip-icon{color:var(--sapUiNeutralElement,var(--sapNeutralElementColor,var(--sapNeutralColor,#6a6d70)))}.ui5-messagestrip--positive{background-color:var(--sapUiSuccessBG,var(--sapSuccessBackground,#f1fdf6));border-color:var(--sapUiSuccessBorder,var(--sapSuccessBorderColor,var(--sapPositiveColor,#107e3e)))}.ui5-messagestrip--positive .ui5-messagestrip-icon{color:var(--sapUiPositiveElement,var(--sapPositiveElementColor,var(--sapPositiveColor,#107e3e)))}.ui5-messagestrip--negative{background-color:var(--sapUiErrorBG,var(--sapErrorBackground,#ffebeb));border-color:var(--sapUiErrorBorder,var(--sapErrorBorderColor,var(--sapNegativeColor,#b00)))}.ui5-messagestrip--negative .ui5-messagestrip-icon{color:var(--sapUiNegativeElement,var(--sapNegativeElementColor,var(--sapNegativeColor,#b00)))}.ui5-messagestrip--warning{background-color:var(--sapUiWarningBG,var(--sapWarningBackground,#fef7f1));border-color:var(--sapUiWarningBorder,var(--sapWarningBorderColor,var(--sapCriticalColor,#e9730c)))}.ui5-messagestrip--warning .ui5-messagestrip-icon{color:var(--sapUiCriticalElement,var(--sapCriticalElementColor,var(--sapCriticalColor,#e9730c)))}.ui5-messagestrip-close-icon{width:var(--_ui5_messagestrip_close_button_size,1.625rem);height:var(--_ui5_messagestrip_close_button_size,1.625rem);border-radius:.2rem;font-size:.75rem;background:transparent;color:var(--sapUiBaseText,var(--sapTextColor,var(--sapPrimary6,#32363a)));outline:0;cursor:pointer;position:absolute;right:.125rem;top:.125rem;border:var(--_ui5_messagestrip_close_button_border,none);-webkit-user-select:none;-ms-user-select:none;user-select:none}.ui5-messagestrip-close-icon:hover{background-color:var(--sapUiButtonLiteHoverBackground,var(--sapUiButtonHoverBackground,var(--sapButton_Hover_Background,#ebf5fe)))}.ui5-messagestrip-close-icon:active{background-color:var(--sapUiButtonLiteActiveBackground,var(--sapUiButtonActiveBackground,var(--sapUiActive,var(--sapActiveColor,var(--sapHighlightColor,#0854a0)))));color:var(--sapUiButtonActiveTextColor,#fff)}.ui5-messagestrip-close-icon:focus:after{content:\"\";position:absolute;top:1px;bottom:1px;left:1px;right:1px;border:var(--_ui5_messagestrip_focus_width,1px) dotted var(--sapUiContentFocusColor,var(--sapContent_FocusColor,#000));pointer-events:none}.ui5-messagestrip-close-icon:active:focus:after{border:var(--_ui5_messagestrip_focus_width,1px) dotted var(--sapUiContentContrastFocusColor,var(--sapContent_ContrastFocusColor,#fff))}"

dist/Timeline.js

@@ -11,2 +11,5 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -13,0 +16,0 @@ * @public

dist/TimelineItem.js

@@ -15,2 +15,5 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -17,0 +20,0 @@ * @public

dist/Title.js

@@ -10,2 +10,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -12,0 +15,0 @@ * @public

dist/ToggleButton.js

@@ -9,2 +9,5 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -65,3 +68,3 @@ * @public
 	static get styles() {
-		return [Button.style, toggleBtnCss];
+		return [Button.styles, toggleBtnCss];
 	}
@@ -68,0 +71,0 @@

dist/YearPicker.js

@@ -19,2 +19,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 
+// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
+import "./ThemePropertiesProvider.js";
+
 /**
@@ -21,0 +24,0 @@ * @public

package.json

 {
   "name": "@ui5/webcomponents",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "UI5 Web Components: webcomponents.main",
@@ -90,4 +90,4 @@ "author": "SAP SE (https://www.sap.com)",
   "dependencies": {
-    "@ui5/webcomponents-base": "0.10.0",
-    "@ui5/webcomponents-core": "0.10.0"
+    "@ui5/webcomponents-base": "0.10.1",
+    "@ui5/webcomponents-core": "0.10.1"
   },
@@ -94,0 +94,0 @@ "devDependencies": {

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3560139

increased by0.28%

Lines of code

14360

increased by1.13%

Worsened metrics

Number of package files

252

decreased by-0.4%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@ui5/webcomponents-base@0.10.1(transitive)

• + Added@ui5/webcomponents-core@0.10.1(transitive)

• - Removed@ui5/webcomponents-base@0.10.0(transitive)

• - Removed@ui5/webcomponents-core@0.10.0(transitive)

• Updated@ui5/webcomponents-base@0.10.1

• Updated@ui5/webcomponents-core@0.10.1