feat(ui5-switch) add new web component (#102)

packages/main/bundle.esm.js

@@ -27,6 +27,7 @@ import RadioButton from "./src/RadioButton";
 import Select from "./src/Select";
 import ShellBar from "./src/ShellBar";
 import ShellBarItem from "./src/ShellBarItem";
+import Switch from "./src/Switch";
 import TabContainer from "./src/TabContainer";
 import Tab from "./src/Tab";
 import TabSeparator from "./src/TabSeparator";

packages/main/src/Switch.hbs

@@ -0,0 +1,16 @@
+<div {{> controlData}}
+	class="{{classes.main}}"
+	role="checkbox"
+	aria-checked="{{ctr.checked}}"
+	tabindex="{{tabIndex}}">
+	<div class="ui5-switch-inner">
+		<div class="ui5-switch-track">
+			<div class="ui5-switch-slider">
+				<span class="ui5-switch-text ui5-switch-text--on">{{textOn}}</span>
+				<span class="ui5-switch-text ui5-switch-text--off">{{textOff}}</span>
+				<span class="ui5-switch-handle"></span>
+			</div>
+		</div>
+	</div>
+	<input type='checkbox' ?checked="{{ctr.checked}}" class="ui5-switch-input" data-sap-no-tab-ref/>
+</div>

packages/main/src/Switch.js

@@ -0,0 +1,184 @@
+import WebComponent from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/WebComponent";
+import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes";
+import Bootstrap from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/Bootstrap";
+
+// Template
+import ShadowDOM from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/compatibility/ShadowDOM";
+import SwitchRenderer from "./build/compiled/SwitchRenderer.lit";
+import SwitchTemplateContext from "./SwitchTemplateContext";
+import SwitchType from "./types/SwitchType";
+
+// Styles
+import belize from "./themes/sap_belize/Switch.less";
+import belizeHcb from "./themes/sap_belize_hcb/Switch.less";
+import fiori3 from "./themes/sap_fiori_3/Switch.less";
+
+ShadowDOM.registerStyle("sap_belize", "Switch.css", belize);
+ShadowDOM.registerStyle("sap_belize_hcb", "Switch.css", belizeHcb);
+ShadowDOM.registerStyle("sap_fiori_3", "Switch.css", fiori3);
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-switch",
+	styleUrl: ["Switch.css"],
+	properties: /** @lends sap.ui.webcomponents.main.Switch.prototype */ {
+
+		/**
+		 * Defines if the <code>ui5-switch</code> is checked.
+		 * <br><br>
+		 * <b>Note:</b> The property can be changed with user interaction,
+		 * either by cliking/tapping on the <code>ui5-switch</code>, or by
+		 * pressing the <code>Enter</code> or <code>Space</code> key.
+		 *
+		 * @type {boolean}
+		 * @default false
+		 * @public
+		 */
+		checked: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines whether the <code>ui5-switch</code> is disabled.
+		 * <br><br>
+		 * <b>Note:</b> A disabled <code>ui5-switch</code> is noninteractive.
+		 *
+		 * @type {boolean}
+		 * @default false
+		 * @public
+		 */
+		disabled: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines the text of the <code>ui5-switch</code> when switched on.
+		 *
+		 * <br><br>
+		 * <b>Note:</b> We recommend using short texts (up to 3 letters, because larger texts might be cut off.
+		 * @type {string}
+		 * @public
+		 */
+		textOn: {
+			type: String,
+			defaultValue: "",
+		},
+
+		/**
+		 * Defines the text of the <code>ui5-switch</code> when switched off.
+		 *
+		 * <br><br>
+		 * <b>Note:</b> We recommend using short texts (up to 3 letters, because larger texts might be cut off.
+		 * @type {string}
+		 * @public
+		 */
+		textOff: {
+			type: String,
+			defaultValue: "",
+		},
+
+		/**
+		 * Defines the <code>ui5-switch</code> type.
+		 * <br>
+		 * Available options are <code>Textual</code> and <code>Graphical</code>.
+		 *
+		 * <br><br>
+		 * <b>Note:</b> If <code>Graphical</code> type is set,
+		 * positive and negative icons will replace the <code>textOn</code> and <code>textOff</code>.
+		 * @type {string}
+		 * @default Standard
+		 * @public
+		 */
+		type: {
+			type: String,
+			defaultValue: SwitchType.Textual,
+		},
+	},
+	events: /** @lends sap.ui.webcomponents.main.Switch.prototype */ {
+
+		/**
+		 * Fired when the <code>ui5-switch</code> checked state changes.
+		 *
+		 * @public
+		 * @event
+		 */
+		change: {},
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-switch</code> component is used for changing between binary states.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Switch";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.Switch
+ * @extends sap.ui.webcomponents.base.WebComponent
+ * @tagname ui5-switch
+ * @public
+ */
+class Switch extends WebComponent {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get renderer() {
+		return SwitchRenderer;
+	}
+
+	constructor(state) {
+		super(state);
+	}
+
+	ontap(event) {
+		if (this._tapAllowed(event.ui5target)) {
+			this.toggle();
+		}
+	}
+
+	onkeydown(event) {
+		if (event.keyCode === KeyCodes.SPACE) {
+			event.preventDefault();
+		}
+
+		if (event.keyCode === KeyCodes.ENTER) {
+			this.toggle();
+		}
+	}
+
+	onkeyup(event) {
+		if (event.keyCode === KeyCodes.SPACE) {
+			this.toggle();
+		}
+	}
+
+	toggle() {
+		if (!this.disabled) {
+			this.checked = !this.checked;
+			this.fireEvent("change");
+		}
+	}
+
+	_tapAllowed(target) {
+		return target !== this;
+	}
+
+	static get calculateTemplateContext() {
+		return SwitchTemplateContext.calculate;
+	}
+}
+
+Bootstrap.boot().then(_ => {
+	Switch.define();
+});
+
+
+export default Switch;

packages/main/src/SwitchTemplateContext.js

@@ -0,0 +1,31 @@
+import SwitchType from "./types/SwitchType";
+
+class SwitchTemplateContext {
+	static calculate(state) {
+		const semantic = state.type === SwitchType.Semantic;
+		const textOn = semantic ? "" : state.textOn;
+		const textOff = semantic ? "" : state.textOff;
+		const mainClasses = SwitchTemplateContext.getMainClasses(state);
+
+		const context = {
+			ctr: state,
+			textOn,
+			textOff,
+			tabIndex: state.disabled ? undefined : "0",
+			classes: { main: mainClasses },
+		};
+
+		return context;
+	}
+
+	static getMainClasses(state) {
+		return {
+			"ui5-switch": true,
+			"ui5-switch--disabled": state.disabled,
+			"ui5-switch--checked": state.checked,
+			"ui5-switch--semantic": state.type === SwitchType.Semantic,
+		};
+	}
+}
+
+export default SwitchTemplateContext;