@ui5/webcomponents 0.0.0-97cba4b0b → 0.0.0-99b763015

package/src/Toast.ts

@@ -1,226 +0,0 @@
-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 customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.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;
-
-/**
- * @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.webc.main.Toast
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-toast
- * @public
- * @since 1.0.0-rc.6
- */
-@customElement({
-	tag: "ui5-toast",
-	renderer: litRender,
-	styles: ToastCss,
-	template: ToastTemplate,
-})
-class Toast extends UI5Element {
-	/**
-	 * 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 {sap.ui.webc.base.types.Integer}
-	 * @name sap.ui.webc.main.Toast.prototype.duration
-	 * @defaultvalue 3000
-	 * @public
-	 */
-	@property({ validator: Integer, defaultValue: 3000 })
-	duration!: number;
-
-	/**
-	 * 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 {sap.ui.webc.main.types.ToastPlacement}
-	 * @name sap.ui.webc.main.Toast.prototype.placement
-	 * @defaultvalue "BottomCenter"
-	 * @public
-	 */
-	@property({ type: ToastPlacement, defaultValue: ToastPlacement.BottomCenter })
-	placement!: ToastPlacement;
-
-	/**
-	 * Indicates whether the component is open (visible).
-	 * @type {boolean}
-	 * @private
-	 */
-	@property({ type: Boolean })
-	open!: boolean;
-
-	/**
-	 * Indicates whether the component is hovered.
-	 * @type {boolean}
-	 * @private
-	 */
-	@property({ type: Boolean })
-	hover!: boolean;
-
-	/**
-	 * Indicates whether the component DOM is rendered.
-	 * @type {boolean}
-	 * @private
-	 */
-	@property({ type: Boolean })
-	domRendered!: boolean;
-
-	/**
-	 * 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
-	 * @name sap.ui.webc.main.Toast.prototype.default
-	 */
-
-	_reopen: boolean;
-
-	constructor() {
-		super();
-
-		this._reopen = false;
-	}
-
-	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.ts

@@ -1,74 +0,0 @@
-import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.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";
-
-/**
- * @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.webc.main.ToggleButton
- * @extends sap.ui.webc.main.Button
- * @tagname ui5-toggle-button
- * @public
- */
-@customElement({
-	tag: "ui5-toggle-button",
-	template: ToggleButtonTemplate,
-	styles: [Button.styles, toggleBtnCss],
-})
-class ToggleButton extends Button {
-	/**
-	 * Determines whether the component is displayed as pressed.
-	 *
-	 * @type {boolean}
-	 * @defaultvalue false
-	 * @name sap.ui.webc.main.ToggleButton.prototype.pressed
-	 * @public
-	 */
-	@property({ type: Boolean })
-	pressed!: boolean;
-
-	_onclick() {
-		this.pressed = !this.pressed;
-
-		if (isSafari()) {
-			this.getDomRef()!.focus();
-		}
-	}
-
-	_onkeyup(e: KeyboardEvent) {
-		if (isSpaceShift(e)) {
-			e.preventDefault();
-			return;
-		}
-
-		super._onkeyup(e);
-	}
-}
-
-ToggleButton.define();
-
-export default ToggleButton;

package/src/Token.ts

@@ -1,237 +0,0 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
-import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
-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 type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import type I18nBundle 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";
-import TokenTemplate from "./generated/templates/TokenTemplate.lit.js";
-
-// Styles
-import tokenStyles from "./generated/themes/Token.css.js";
-
-type TokenDeleteEventDetail = {
-	backSpace: boolean;
-	delete: boolean;
-}
-
-/**
- * @class
- *
- * <h3 class="comment-api-title">Overview</h3>
- *
- * 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.webc.main.Token
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-token
- * @since 1.0.0-rc.9
- * @implements sap.ui.webc.main.IToken
- * @public
- */
-@customElement({
-	tag: "ui5-token",
-	languageAware: true,
-	renderer: litRender,
-	template: TokenTemplate,
-	styles: tokenStyles,
-	dependencies: [Icon],
-})
-/**
- * Fired when the the component is selected by user interaction with mouse or by clicking space.
- *
- * @event sap.ui.webc.main.Token#select
- * @public
- */
-@event("select")
-
-/**
- * Fired when the backspace, delete or close icon of the token is pressed
- *
- * @event
- * @param {Boolean} backSpace Indicates whether token is deleted by backspace key.
- * @param {Boolean} delete Indicates whether token is deleted by delete key.
- * @private
- */
-@event("delete", {
-	detail: {
-		"backSpace": { type: Boolean },
-		"delete": { type: Boolean },
-	},
-})
-
-class Token extends UI5Element implements ITabbable {
-	/**
-	 * Defines the text of the token.
-	 *
-	 * @type {string}
-	 * @name sap.ui.webc.main.Token.prototype.text
-	 * @defaultvalue ""
-	 * @public
-	 */
-	@property()
-	text!: string;
-
-	/**
-	 * Defines whether the component is read-only.
-	 * <br><br>
-	 * <b>Note:</b> A read-only component can not be deleted or selected,
-	 * but still provides visual feedback upon user interaction.
-	 *
-	 * @type {boolean}
-	 * @name sap.ui.webc.main.Token.prototype.readonly
-	 * @defaultvalue false
-	 * @public
-	 */
-	@property({ type: Boolean })
-	readonly!: boolean;
-
-	/**
-	 * Defines whether the component is selected or not.
-	 *
-	 * @type {boolean}
-	 * @name sap.ui.webc.main.Token.prototype.selected
-	 * @defaultvalue false
-	 * @public
-	 */
-	@property({ type: Boolean })
-	selected!: boolean;
-
-	/**
-	 * Set by the tokenizer when a token is in the "more" area (overflowing)
-	 * @type {boolean}
-	 * @defaultvalue false
-	 * @private
-	 */
-	@property({ type: Boolean })
-	overflows!: boolean;
-
-	/**
-	 * Defines whether the component is focused or not.
-	 *
-	 * @type {boolean}
-	 * @defaultvalue false
-	 * @private
-	 */
-	@property({ type: Boolean })
-	focused!: boolean;
-
-	/**
-	 * Defines whether the token is being deleted
-	 * This flag is used in the ui5-multi-combobox
-	 *
-	 * @type {boolean}
-	 * @defaultvalue false
-	 * @private
-	 */
-	@property({ type: Boolean })
-	toBeDeleted!: boolean;
-
-	/**
-	 * Defines the tabIndex of the component.
-	 * @type {string}
-	 * @private
-	 */
-	@property({ defaultValue: "-1", noAttribute: true })
-	_tabIndex!: string;
-
-	/**
-	 * 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.webc.main.IIcon[]}
-	 * @name sap.ui.webc.main.Token.prototype.closeIcon
-	 * @slot closeIcon
-	 * @public
-	 * @since 1.0.0-rc.9
-	 */
-	@slot()
-	closeIcon!: Array<HTMLElement>;
-
-	static i18nBundle: I18nBundle;
-
-	_handleSelect() {
-		this.selected = !this.selected;
-		this.fireEvent("select");
-	}
-
-	_focusin() {
-		this.focused = true;
-	}
-
-	_focusout() {
-		this.focused = !this.focused;
-	}
-
-	_mousedown() {
-		this.toBeDeleted = true;
-	}
-
-	_delete() {
-		this.fireEvent("delete");
-	}
-
-	_keydown(e: KeyboardEvent) {
-		const isBackSpacePressed = isBackSpace(e);
-		const isDeletePressed = isDelete(e);
-
-		if (!this.readonly && (isBackSpacePressed || isDeletePressed)) {
-			e.preventDefault();
-
-			this.fireEvent<TokenDeleteEventDetail>("delete", {
-				backSpace: isBackSpacePressed,
-				"delete": isDeletePressed,
-			});
-		}
-
-		if (isSpace(e) || isSpaceCtrl(e)) {
-			e.preventDefault();
-
-			this._handleSelect();
-		}
-	}
-
-	onBeforeRendering() {
-		this.toBeDeleted = false;
-	}
-
-	get tokenDeletableText() {
-		return Token.i18nBundle.getText(TOKEN_ARIA_DELETABLE);
-	}
-
-	get iconURI() {
-		if (getTheme().includes("sap_belize")) {
-			return "sys-cancel";
-		}
-
-		return "decline";
-	}
-
-	static async onDefine() {
-		Token.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-	}
-}
-
-Token.define();
-
-export default Token;
-export type { TokenDeleteEventDetail };