@ui5/webcomponents 0.0.0-934b4df24 → 0.0.0-a3eca7ade

package/src/Title.js

@@ -0,0 +1,132 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import TitleLevel from "./types/TitleLevel.js";
+import WrappingType from "./types/WrappingType.js";
+
+// Template
+import TitleTemplate from "./generated/templates/TitleTemplate.lit.js";
+
+// Styles
+import titleCss from "./generated/themes/Title.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-title",
+	properties: /** @lends sap.ui.webcomponents.main.Title.prototype */ {
+
+		/**
+		 * Defines how the text of a component will be displayed when there is not enough space.
+		 * Available options are:
+		 * <ul>
+		 * <li><code>None</code> - The text will be truncated with an ellipsis.</li>
+		 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
+		 * </ul>
+		 *
+		 * @type {WrappingType}
+		 * @defaultvalue "None"
+		 * @public
+		 */
+		wrappingType: {
+			type: WrappingType,
+			defaultValue: WrappingType.None,
+		},
+
+		/**
+		 * Defines the component level.
+		 * Available options are: <code>"H6"</code> to <code>"H1"</code>.
+		 *
+		 * @type {TitleLevel}
+		 * @defaultvalue "H2"
+		 * @public
+		*/
+		level: {
+			type: TitleLevel,
+			defaultValue: TitleLevel.H2,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.main.Title.prototype */ {
+		/**
+		 * Defines the text of the component.
+		 * <br><br>
+		 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+		 *
+		 * @type {Node[]}
+		 * @slot
+		 * @public
+		 */
+		"default": {
+			type: Node,
+		},
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-title</code> component is used to display titles inside a page.
+ * It is a simple, large-sized text with explicit header/title semantics.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Title";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.Title
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-title
+ * @public
+ */
+class Title extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get template() {
+		return TitleTemplate;
+	}
+
+	static get styles() {
+		return titleCss;
+	}
+
+	get normalizedLevel() {
+		return this.level.toLowerCase();
+	}
+
+	get h1() {
+		return this.normalizedLevel === "h1";
+	}
+
+	get h2() {
+		return this.normalizedLevel === "h2";
+	}
+
+	get h3() {
+		return this.normalizedLevel === "h3";
+	}
+
+	get h4() {
+		return this.normalizedLevel === "h4";
+	}
+
+	get h5() {
+		return this.normalizedLevel === "h5";
+	}
+
+	get h6() {
+		return this.normalizedLevel === "h6";
+	}
+}
+
+Title.define();
+
+export default Title;

package/src/Toast.hbs

@@ -0,0 +1,13 @@
+{{#if domRendered}}
+	<div class="ui5-toast-root"
+		role="alert"
+		style="{{styles.root}}"
+		dir="{{effectiveDir}}"
+		@mouseover="{{_onmouseover}}"
+		@mouseleave="{{_onmouseleave}}"
+		@transitionend="{{_ontransitionend}}">
+		<bdi>
+			<slot></slot>
+		</bdi>
+	</div>
+{{/if}}

package/src/Toast.js

@@ -0,0 +1,243 @@
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getNextZIndex } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
+import ToastPlacement from "./types/ToastPlacement.js";
+
+// Template
+import ToastTemplate from "./generated/templates/ToastTemplate.lit.js";
+
+// Styles
+import ToastCss from "./generated/themes/Toast.css.js";
+
+// Constants
+const MIN_DURATION = 500;
+const MAX_DURATION = 1000;
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-toast",
+	properties: /** @lends sap.ui.webcomponents.main.Toast.prototype */ {
+
+		/**
+		 * Defines the duration in milliseconds for which component
+		 * remains on the screen before it's automatically closed.
+		 * <br><br>
+		 * <b>Note:</b> The minimum supported value is <code>500</code> ms
+		 * and even if a lower value is set, the duration would remain <code>500</code> ms.
+		 *
+		 * @type {Integer}
+		 * @defaultvalue 3000
+		 * @public
+		 */
+		duration: {
+			type: Integer,
+			defaultValue: 3000,
+		},
+
+		/**
+		 * Defines the placement of the component.
+		 * <br><br>
+		 * Available options are:
+		 * <ul>
+		 * <li><code>TopStart</code></li>
+		 * <li><code>TopCenter</code></li>
+		 * <li><code>TopEnd</code></li>
+		 * <li><code>MiddleStart</code></li>
+		 * <li><code>MiddleCenter</code></li>
+		 * <li><code>MiddleEnd</code></li>
+		 * <li><code>BottomStart</code></li>
+		 * <li><code>BottomCenter</code></li>
+		 * <li><code>BottomEnd</code></li>
+		 * </ul>
+		 *
+		 * @type {ToastPlacement}
+		 * @defaultvalue "BottomCenter"
+		 * @public
+		 */
+		placement: {
+			type: ToastPlacement,
+			defaultValue: ToastPlacement.BottomCenter,
+		},
+
+		/**
+		 * Indicates whether the component is open (visible).
+		 * @type {boolean}
+		 * @private
+		 */
+		open: {
+			type: Boolean,
+		},
+
+		/**
+		 * Indicates whether the component is hovered.
+		 * @type {boolean}
+		 * @private
+		 */
+		hover: {
+			type: Boolean,
+		},
+
+		/**
+		 * Indicates whether the component DOM is rendered.
+		 * @type {boolean}
+		 * @private
+		 */
+		domRendered: {
+			type: Boolean,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.main.Toast.prototype */ {
+		/**
+		 * Defines the text of the component.
+		 * <br><br>
+		 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+		 *
+		 * @type {Node[]}
+		 * @slot
+		 * @public
+		 */
+		"default": {
+			type: Node,
+		},
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-toast</code> is a small, non-disruptive popup for success or information messages that
+ * disappears automatically after a few seconds.
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * <h4>When to use:</h4>
+ * <ul>
+ * <li>You want to display a short success or information message.</li>
+ * <li>You do not want to interrupt users while they are performing an action.</li>
+ * <li>You want to confirm a successful action.</li>
+ * </ul>
+ * <h4>When not to use:</h4>
+ * <ul>
+ * <li>You want to display error or warning message.</li>
+ * <li>You want to interrupt users while they are performing an action.</li>
+ * <li>You want to make sure that users read the message before they leave the page.</li>
+ * <li>You want users to be able to copy some part of the message text.</li>
+ * </ul>
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Toast";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.Toast
+ * @extends UI5Element
+ * @tagname ui5-toast
+ * @public
+ * @since 1.0.0-rc.6
+ */
+class Toast extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return ToastCss;
+	}
+
+	static get template() {
+		return ToastTemplate;
+	}
+
+	onAfterRendering() {
+		if (this._reopen) {
+			this._reopen = false;
+			this._initiateOpening();
+		}
+	}
+
+	/**
+	 * Shows the component.
+	 * @public
+	 */
+	show() {
+		if (this.open) {
+			// If the Toast is already opened, we set the _reopen flag to true, in
+			// order to trigger re-rendering after an animation frame
+			// in the onAfterRendering hook.
+			// This is needed for properly resetting the opacity transition.
+			this._reopen = true;
+			this.open = false;
+		} else {
+			this._initiateOpening();
+		}
+	}
+
+	/**
+	 * If the minimum duration is lower than 500ms, we force
+	 * it to be 500ms, as described in the documentation.
+	 * @private
+	 * @returns {*}
+	 */
+	get effectiveDuration() {
+		return this.duration < MIN_DURATION ? MIN_DURATION : this.duration;
+	}
+
+	get styles() {
+		// Transition duration (animation) should be a third of the duration
+		// property, but not bigger than the maximum allowed (1000ms).
+		const transitionDuration = Math.min(this.effectiveDuration / 3, MAX_DURATION);
+
+		return {
+			root: {
+				"transition-duration": this.open ? `${transitionDuration}ms` : "",
+
+				// Transition delay is the duration property minus the
+				// transition duration (animation).
+				"transition-delay": this.open ? `${this.effectiveDuration - transitionDuration}ms` : "",
+
+				// We alter the opacity property, in order to trigger transition
+				"opacity": this.open && !this.hover ? "0" : "",
+
+				"z-index": getNextZIndex(),
+			},
+		};
+	}
+
+	_initiateOpening() {
+		this.domRendered = true;
+		requestAnimationFrame(_ => {
+			this.open = true;
+		});
+	}
+
+	_ontransitionend() {
+		if (this.hover) {
+			return;
+		}
+		this.domRendered = false;
+		this.open = false;
+	}
+
+	_onmouseover() {
+		this.hover = true;
+	}
+
+	_onmouseleave() {
+		this.hover = false;
+	}
+}
+
+Toast.define();
+
+export default Toast;

package/src/ToggleButton.hbs

@@ -0,0 +1,5 @@
+{{>include "./Button.hbs"}}
+
+{{#*inline "ariaPressed"}}
+	aria-pressed="{{pressed}}"
+{{/inline}}

package/src/ToggleButton.js

@@ -0,0 +1,89 @@
+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-toggle-button",
+	altTag: "ui5-togglebutton",
+	properties: /** @lends  sap.ui.webcomponents.main.ToggleButton.prototype */ {
+		/**
+		 * Determines whether the component is displayed as pressed.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		pressed: {
+			type: Boolean,
+		},
+	},
+};
+
+/**
+ * @class
+ *
+ *<h3 class="comment-api-title">Overview</h3>
+ *
+ * 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-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-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-toggle-button</code>.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/ToggleButton";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.ToggleButton
+ * @extends Button
+ * @tagname ui5-toggle-button
+ * @public
+ */
+class ToggleButton extends Button {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get template() {
+		return ToggleButtonTemplate;
+	}
+
+	static get styles() {
+		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);
+	}
+}
+
+ToggleButton.define();
+
+export default ToggleButton;

package/src/Token.hbs

@@ -0,0 +1,30 @@
+<div
+	tabindex="{{_tabIndex}}"
+	@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}}
+		<div
+			class="ui5-token--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>