@ui5/webcomponents 0.0.0-e7dd012d7 → 0.0.0-e818f286e

package/src/ToggleButton.js

@@ -1,3 +1,5 @@
+import { isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isSafari } from "@ui5/webcomponents-base/dist/Device.js";
 import Button from "./Button.js";
 import ToggleButtonTemplate from "./generated/templates/ToggleButtonTemplate.lit.js";
 
@@ -8,10 +10,11 @@ import toggleBtnCss from "./generated/themes/ToggleButton.css.js";
  * @public
  */
 const metadata = {
-	tag: "ui5-togglebutton",
-	properties: /** @lends  sap.ui.webcomponents.main.ToggleButton.prototype */ {
+	tag: "ui5-toggle-button",
+	altTag: "ui5-togglebutton",
+	properties: /** @lends sap.ui.webcomponents.main.ToggleButton.prototype */ {
 		/**
-		 * Determines whether the <code>ui5-togglebutton</code> is displayed as pressed.
+		 * Determines whether the component is displayed as pressed.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -26,16 +29,16 @@ const metadata = {
 /**
  * @class
  *
- *<h3 class="comment-api-title">Overview</h3>
+ * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>ui5-togglebutton</code> component is an enhanced <code>ui5-button</code>
+ * The <code>ui5-toggle-button</code> component is an enhanced <code>ui5-button</code>
  * that can be toggled between pressed and normal states.
- * Users can use the <code>ui5-togglebutton</code> as a switch to turn a setting on or off.
+ * Users can use the <code>ui5-toggle-button</code> as a switch to turn a setting on or off.
  * It can also be used to represent an independent choice similar to a check box.
  * <br><br>
- * Clicking or tapping on a <code>ui5-togglebutton</code> changes its state to <code>pressed</code>. The button returns to
+ * Clicking or tapping on a <code>ui5-toggle-button</code> changes its state to <code>pressed</code>. The button returns to
  * its initial state when the user clicks or taps on it again.
- * By applying additional custom CSS-styling classes, apps can give a different style to any <code>ui5-togglebutton</code>.
+ * By applying additional custom CSS-styling classes, apps can give a different style to any <code>ui5-toggle-button</code>.
  *
  * <h3>ES6 Module Import</h3>
  *
@@ -45,7 +48,7 @@ const metadata = {
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ToggleButton
  * @extends Button
- * @tagname ui5-togglebutton
+ * @tagname ui5-toggle-button
  * @public
  */
 class ToggleButton extends Button {
@@ -63,6 +66,19 @@ class ToggleButton extends Button {
 
 	_onclick() {
 		this.pressed = !this.pressed;
+
+		if (isSafari()) {
+			this.getDomRef().focus();
+		}
+	}
+
+	_onkeyup(event) {
+		if (isSpaceShift(event)) {
+			event.preventDefault();
+			return;
+		}
+
+		super._onkeyup(event);
 	}
 }
 

package/src/Token.hbs

@@ -1,9 +1,10 @@
 <div
 	tabindex="{{_tabIndex}}"
 	@click="{{_handleSelect}}"
+	@focusin="{{_focusin}}"
+	@focusout="{{_focusout}}"
 	@keydown="{{_keydown}}"
 	class="ui5-token--wrapper"
-	dir="{{effectiveDir}}"
 	role="option"
 	aria-selected="{{selected}}"
 >

package/src/Token.js

@@ -5,10 +5,11 @@ import {
 	isBackSpace,
 	isSpace,
 	isDelete,
+	isSpaceCtrl,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/sys-cancel.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { TOKEN_ARIA_DELETABLE } from "./generated/i18n/i18n-defaults.js";
 
 import Icon from "./Icon.js";
@@ -36,9 +37,9 @@ const metadata = {
 		text: { type: String },
 
 		/**
-		 * Defines whether the <code>ui5-token</code> is read-only.
+		 * Defines whether the component is read-only.
 		 * <br><br>
-		 * <b>Note:</b> A read-only <code>ui5-token</code> can not be deleted or selected,
+		 * <b>Note:</b> A read-only component can not be deleted or selected,
 		 * but still provides visual feedback upon user interaction.
 		 *
 		 * @type {boolean}
@@ -53,13 +54,22 @@ const metadata = {
 		 */
 		overflows: { type: Boolean },
 
-		/** Defines whether the <code>ui5-token</code> is selected or not.
+		/**
+		 * Defines whether the component is selected or not.
 		 *
 		 * @type {boolean}
 		 * @public
 		 */
 		selected: { type: Boolean },
 
+		/**
+		 * Defines whether the component is focused or not.
+		 *
+		 * @type {boolean}
+		 * @private
+		 */
+		focused: { type: Boolean },
+
 		/**
 		 * Defines the tabIndex of the component.
 		 * @type {string}
@@ -68,13 +78,13 @@ const metadata = {
 		_tabIndex: { type: String, defaultValue: "-1", noAttribute: true },
 	},
 
-	slots: /** @lends  sap.ui.webcomponents.main.Token.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.Token.prototype */ {
 
 		/**
 		 * Defines the close icon for the token. If nothing is provided to this slot, the default close icon will be used.
-		 * Accepts <code>ui5-icon</code>
+		 * Accepts <code>ui5-icon</code>.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {sap.ui.webcomponents.main.IIcon}
 		 * @slot
 		 * @public
 		 * @since 1.0.0-rc.9
@@ -102,7 +112,7 @@ const metadata = {
 		},
 
 		/**
-		 * Fired when the a <code>ui5-token</code> is selected by user interaction with mouse or clicking space.
+		 * Fired when the the component is selected by user interaction with mouse or by clicking space.
 		 *
 		 * @event
 		 * @public
@@ -127,6 +137,7 @@ const metadata = {
  * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-token
  * @since 1.0.0-rc.9
+ * @implements sap.ui.webcomponents.main.IToken
  * @public
  */
 class Token extends UI5Element {
@@ -146,17 +157,19 @@ class Token extends UI5Element {
 		return styles;
 	}
 
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
 	_handleSelect() {
 		this.selected = !this.selected;
 		this.fireEvent("select");
 	}
 
+	_focusin() {
+		this.focused = true;
+	}
+
+	_focusout() {
+		this.focused = !this.focused;
+	}
+
 	 _delete() {
 		this.fireEvent("delete");
 	 }
@@ -174,7 +187,7 @@ class Token extends UI5Element {
 			});
 		}
 
-		if (isSpace(event)) {
+		if (isSpace(event) || isSpaceCtrl(event)) {
 			event.preventDefault();
 
 			this._handleSelect();
@@ -182,11 +195,15 @@ class Token extends UI5Element {
 	}
 
 	get tokenDeletableText() {
-		return this.i18nBundle.getText(TOKEN_ARIA_DELETABLE);
+		return Token.i18nBundle.getText(TOKEN_ARIA_DELETABLE);
 	}
 
 	get iconURI() {
-		return getTheme() === "sap_fiori_3" ? "decline" : "sys-cancel";
+		if (getTheme().includes("sap_belize")) {
+			return "sys-cancel";
+		}
+
+		return "decline";
 	}
 
 	static get dependencies() {
@@ -194,7 +211,7 @@ class Token extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Token.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/Tokenizer.hbs

@@ -1,11 +1,9 @@
-<div
-	class="{{classes.wrapper}}"
->
+<div class="{{classes.wrapper}}">
 	<span id="{{_id}}-hiddenText" class="ui5-hidden-text">{{tokenizerLabel}}</span>
 
 	<div
 		class="{{classes.content}}"
-		@ui5-delete="{{_tokenDelete}}"
+		@ui5-delete="{{_delete}}"
 		@click="{{_click}}"
 		@mousedown="{{_onmousedown}}"
 		@keydown="{{_onkeydown}}"
@@ -21,6 +19,7 @@
 		<span
 			@click="{{_openOverflowPopover}}"
 			class="ui5-tokenizer-more-text"
+			part="n-more-text"
 		>{{_nMoreText}}</span>
 	{{/if}}
-</div>
+</div>