@ui5/webcomponents 0.0.0-306572ffa → 0.0.0-3236d56be

package/src/ToggleButton.js

@@ -1,17 +1,22 @@
+import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js";
+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";
 
 // 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 +33,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 +50,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,11 +63,24 @@ class ToggleButton extends Button {
 	}
 
 	static get styles() {
-		return [Button.styles, toggleBtnCss];
+		return [Button.styles, toggleBtnCss, isLegacyBrowser() && toggleBtnIECss];
 	}
 
 	_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,21 +1,29 @@
 <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">{{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,13 @@ 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,
+	isSpaceCtrl,
 } 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,6 +24,7 @@ import styles from "./generated/themes/Token.css.js";
 const metadata = {
 	tag: "ui5-token",
 	languageAware: true,
+	managedSlots: true,
 	properties: /** @lends sap.ui.webcomponents.main.Token.prototype */ {
 
 		/**
@@ -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}
@@ -52,6 +53,45 @@ const metadata = {
 		 * @private
 		 */
 		overflows: { type: Boolean },
+
+		/**
+		 * 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}
+		 * @private
+		 */
+		_tabIndex: { type: String, defaultValue: "-1", noAttribute: true },
+	},
+
+	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 */ {
@@ -70,6 +110,14 @@ const metadata = {
 				"delete": { type: Boolean },
 			},
 		},
+
+		/**
+		 * Fired when the the component is selected by user interaction with mouse or by clicking space.
+		 *
+		 * @event
+		 * @public
+		 */
+		select: {},
 	},
 };
 
@@ -89,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 {
@@ -108,16 +157,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");
@@ -136,18 +187,23 @@ class Token extends UI5Element {
 			});
 		}
 
-		if (isEnter(event) || isSpace(event)) {
-			this.fireEvent("select", {});
-			this.selected = true;
+		if (isSpace(event) || isSpaceCtrl(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() {
@@ -155,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,12 @@
-<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}}"
 		role="listbox"
 		aria-labelledby="{{_id}}-hiddenText"
 	>
@@ -18,6 +19,7 @@
 		<span
 			@click="{{_openOverflowPopover}}"
 			class="ui5-tokenizer-more-text"
+			part="n-more-text"
 		>{{_nMoreText}}</span>
 	{{/if}}
-</div>
+</div>