@ui5/webcomponents 1.0.0-rc.8 → 1.0.2

package/src/ToggleButton.js

@@ -1,17 +1,21 @@
+import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js";
+import { isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js";
 import Button from "./Button.js";
 import ToggleButtonTemplate from "./generated/templates/ToggleButtonTemplate.lit.js";
 
 // Styles
 import toggleBtnCss from "./generated/themes/ToggleButton.css.js";
+import toggleBtnIECss from "./generated/themes/ToggleButton.ie11.css.js";
 
 /**
  * @public
  */
 const metadata = {
-	tag: "ui5-togglebutton",
+	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
@@ -28,14 +32,14 @@ const metadata = {
  *
  *<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 +49,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 {
@@ -58,12 +62,21 @@ class ToggleButton extends Button {
 	}
 
 	static get styles() {
-		return [Button.styles, toggleBtnCss];
+		return [Button.styles, toggleBtnCss, isLegacyBrowser() && toggleBtnIECss];
 	}
 
 	_onclick() {
 		this.pressed = !this.pressed;
 	}
+
+	_onkeyup(event) {
+		if (isSpaceShift(event)) {
+			event.preventDefault();
+			return;
+		}
+
+		super._onkeyup(event);
+	}
 }
 
 ToggleButton.define();

package/src/Token.hbs

@@ -1,21 +1,30 @@
 <div
 	tabindex="{{_tabIndex}}"
-	@click="{{_select}}"
+	@click="{{_handleSelect}}"
+	@focusin="{{_focusin}}"
+	@focusout="{{_focusout}}"
 	@keydown="{{_keydown}}"
 	class="ui5-token--wrapper"
 	dir="{{effectiveDir}}"
 	role="option"
 	aria-selected="{{selected}}"
 >
-	<span class="ui5-token--text"><slot></slot></span>
+	<span class="ui5-token--text">{{this.text}}</span>
 
 	{{#unless readonly}}
-		<ui5-icon
-			@click="{{_delete}}"
-			name="{{iconURI}}"
-			accessible-name="{{tokenDeletableText}}"
-			show-tooltip
+		<div
 			class="ui5-token--icon"
-		></ui5-icon>
+			@click="{{_delete}}"
+		>
+			{{#if closeIcon.length}}
+				<slot name="closeIcon"></slot>
+			{{else}}
+				<ui5-icon
+					name="{{iconURI}}"
+					accessible-name="{{tokenDeletableText}}"
+					show-tooltip
+				></ui5-icon>
+			{{/if}}
+		</div>
 	{{/unless}}
 </div>

package/src/Token.js

@@ -3,13 +3,12 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
 import {
 	isBackSpace,
-	isEnter,
 	isSpace,
 	isDelete,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import "@ui5/webcomponents-icons/dist/icons/decline.js";
-import "@ui5/webcomponents-icons/dist/icons/sys-cancel.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/sys-cancel.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";
@@ -24,24 +23,38 @@ import styles from "./generated/themes/Token.css.js";
 const metadata = {
 	tag: "ui5-token",
 	languageAware: true,
-	slots: /** @lends sap.ui.webcomponents.main.Token.prototype */ {
+	managedSlots: true,
+	properties: /** @lends sap.ui.webcomponents.main.Token.prototype */ {
+
+		/**
+		 * Defines the text of the token.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		text: { type: String },
+
 		/**
-		 * Defines the text of the <code>ui5-token</code>.
+		 * Defines whether the component is read-only.
 		 * <br><br>
-		 * <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+		 * <b>Note:</b> A read-only component can not be deleted or selected,
+		 * but still provides visual feedback upon user interaction.
 		 *
-		 * @type {Node[]}
-		 * @slot
+		 * @type {boolean}
 		 * @public
 		 */
-		"default": {
-			type: Node,
-		},
-	},
-	properties: /** @lends sap.ui.webcomponents.main.Token.prototype */ {
+		readonly: { type: Boolean },
+
+		/**
+		 * Set by the tokenizer when a token is in the "more" area (overflowing)
+		 * @type {boolean}
+		 * @private
+		 */
+		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
@@ -49,19 +62,35 @@ const metadata = {
 		selected: { type: Boolean },
 
 		/**
-		 * Defines whether the <code>ui5-token</code> is read-only.
-		 * <br><br>
-		 * <b>Note:</b> A read-only <code>ui5-token</code> can not be deleted or selected,
-		 * but still provides visual feedback upon user interaction.
+		 * Defines whether the component is focused or not.
 		 *
 		 * @type {boolean}
-		 * @public
+		 * @private
 		 */
-		readonly: { type: Boolean },
+		focused: { type: Boolean },
 
+		/**
+		 * Defines the tabIndex of the component.
+		 * @type {string}
+		 * @private
+		 */
 		_tabIndex: { type: String, defaultValue: "-1", noAttribute: true },
+	},
 
-		overflows: { type: Boolean },
+	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>.
+		 *
+		 * @type {sap.ui.webcomponents.main.IIcon}
+		 * @slot
+		 * @public
+		 * @since 1.0.0-rc.9
+		 */
+		closeIcon: {
+			type: HTMLElement,
+		},
 	},
 
 	events: /** @lends sap.ui.webcomponents.main.Token.prototype */ {
@@ -72,7 +101,7 @@ const metadata = {
 		 * @event
 		 * @param {boolean} backSpace indicates whether token is deleted by backspace key
 		 * @param {boolean} delete indicates whether token is deleted by delete key
-		 * @public
+		 * @private
 		 */
 		"delete": {
 			detail: {
@@ -82,7 +111,7 @@ const metadata = {
 		},
 
 		/**
-		 * Fired when the a token is selected by user interaction with mouse, clicking space or enter
+		 * Fired when the the component is selected by user interaction with mouse or by clicking space.
 		 *
 		 * @event
 		 * @public
@@ -98,13 +127,17 @@ const metadata = {
  *
  * Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.
  *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Token.js";</code>
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Token
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-token
- * @usestextcontent
- * @private
+ * @since 1.0.0-rc.9
+ * @implements sap.ui.webcomponents.main.IToken
+ * @public
  */
 class Token extends UI5Element {
 	static get metadata() {
@@ -123,16 +156,18 @@ class Token extends UI5Element {
 		return styles;
 	}
 
-	constructor() {
-		super();
+	_handleSelect() {
+		this.selected = !this.selected;
+		this.fireEvent("select");
+	}
 
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+	_focusin() {
+		this.focused = true;
 	}
 
-	_select() {
-		this.fireEvent("select");
-		this.selected = true;
-	 }
+	_focusout() {
+		this.focused = !this.focused;
+	}
 
 	 _delete() {
 		this.fireEvent("delete");
@@ -151,25 +186,31 @@ class Token extends UI5Element {
 			});
 		}
 
-		if (isEnter(event) || isSpace(event)) {
-			this.fireEvent("select", {});
-			this.selected = true;
+		if (isSpace(event)) {
+			event.preventDefault();
+
+			this._handleSelect();
 		}
 	}
 
 	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() {
+		return [Icon];
 	}
 
 	static async onDefine() {
-		await Promise.all([
-			Icon.define(),
-			fetchI18nBundle("@ui5/webcomponents"),
-		]);
+		Token.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/Tokenizer.hbs

@@ -1,11 +1,15 @@
 <div
+	dir="{{effectiveDir}}"
 	class="{{classes.wrapper}}"
 >
 	<span id="{{_id}}-hiddenText" class="ui5-hidden-text">{{tokenizerLabel}}</span>
-	
+
 	<div
 		class="{{classes.content}}"
 		@ui5-delete="{{_tokenDelete}}"
+		@click="{{_click}}"
+		@mousedown="{{_onmousedown}}"
+		@keydown="{{_onkeydown}}"
 		role="listbox"
 		aria-labelledby="{{_id}}-hiddenText"
 	>