@ui5/webcomponents 0.0.0-dff5837d7 → 0.0.0-e03cd01f3

package/src/ListItem.hbs

@@ -1,88 +0,0 @@
-<li
-	tabindex="{{_tabIndex}}"
-	class="{{classes.main}}"
-	dir="{{effectiveDir}}"
-	@focusin="{{_onfocusin}}"
-	@focusout="{{_onfocusout}}"
-	@keyup="{{_onkeyup}}"
-	@keydown="{{_onkeydown}}"
-	@mouseup="{{_onmouseup}}"
-	@mousedown="{{_onmousedown}}"
-	@touchstart="{{_ontouchstart}}"
-	@touchend="{{_ontouchend}}"
-	@click="{{_onclick}}"
-	aria-selected="{{ariaSelected}}"
-	role="{{_accInfo.role}}"
-	aria-expanded="{{_accInfo.ariaExpanded}}"
-	aria-level="{{_accInfo.ariaLevel}}"
->
-		{{> listItemPreContent}}
-
-		{{#if placeSelectionElementBefore}}
-			{{> selectionElement}}
-		{{/if}}
-
-		<div id="{{_id}}-content" class="ui5-li-content">
-			{{> imageBegin}}
-			{{> iconBegin}}
-			{{> listItemContent}}
-		</div>
-
-		{{> iconEnd}}
-		{{#if typeDetail}}
-			<div class="ui5-li-detailbtn">
-				<ui5-button
-					design="Transparent"
-					icon="edit"
-					@click="{{onDetailClick}}"
-				></ui5-button>
-			</div>
-		{{/if}}
-
-		{{#if placeSelectionElementAfter}}
-			{{> selectionElement}}
-		{{/if}}
-</li>
-
-{{#*inline "listItemPreContent"}}{{/inline}}
-{{#*inline "listItemContent"}}{{/inline}}
-{{#*inline "imageBegin"}}{{/inline}}
-{{#*inline "iconBegin"}}{{/inline}}
-{{#*inline "iconEnd"}}{{/inline}}
-
-{{#*inline "selectionElement"}}
-	{{#if modeSingleSelect}}
-		<ui5-radiobutton
-				?disabled="{{isInactive}}"
-				tabindex="-1"
-				id="{{_id}}-singleSelectionElement"
-				class="ui5-li-singlesel-radiobtn"
-				?selected="{{selected}}"
-				@click="{{onSingleSelectionComponentPress}}">
-		</ui5-radiobutton>
-	{{/if}}
-
-	{{#if modeMultiSelect}}
-		<ui5-checkbox
-				?disabled="{{isInactive}}"
-				tabindex="-1"
-				id="{{_id}}-multiSelectionElement"
-				class="ui5-li-multisel-cb"
-				?checked="{{selected}}"
-				aria-label="{{_accInfo.ariaLabel}}"
-				@click="{{onMultiSelectionComponentPress}}">
-		</ui5-checkbox>
-	{{/if}}
-
-	{{#if modeDelete}}
-		<div class="ui5-li-deletebtn">
-			<ui5-button
-				id="{{_id}}-deleteSelectionElement"
-				design="Transparent"
-				icon="decline"
-				@click="{{onDelete}}"
-				title="{{deleteText}}"
-			></ui5-button>
-		</div>
-	{{/if}}
-{{/inline}}

package/src/ListItem.js

@@ -1,303 +0,0 @@
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import "@ui5/webcomponents-icons/dist/icons/decline.js";
-import "@ui5/webcomponents-icons/dist/icons/edit.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import ListItemType from "./types/ListItemType.js";
-import ListMode from "./types/ListMode.js";
-import ListItemBase from "./ListItemBase.js";
-import "./RadioButton.js";
-import "./CheckBox.js";
-import "./Button.js";
-import { DELETE, ARIA_LABEL_LIST_ITEM_CHECKBOX } from "./generated/i18n/i18n-defaults.js";
-
-// Styles
-import styles from "./generated/themes/ListItem.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	languageAware: true,
-	properties: /** @lends  sap.ui.webcomponents.main.ListItem.prototype */ {
-
-		/**
-		 * Defines the visual indication and behavior of the list items.
-		 * Available options are <code>Active</code> (by default), <code>Inactive</code> and <code>Detail</code>.
-		 * <br><br>
-		 * <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press and hover,
-		 * while with type <code>Inactive</code> and <code>Detail</code> - will not.
-		 *
-		 * @type {ListItemType}
-		 * @defaultvalue "Active"
-		 * @public
-		*/
-		type: {
-			type: ListItemType,
-			defaultValue: ListItemType.Active,
-		},
-
-		/**
-		 * Indicates if the list item is active, e.g pressed down with the mouse or the keyboard keys.
-		 *
-		 * @type {boolean}
-		 * @private
-		*/
-		active: {
-			type: Boolean,
-		},
-
-		/**
-		 * Indicates if the list item is actionable, e.g has hover and pressed effects.
-		 *
-		 * @type {boolean}
-		 * @private
-		*/
-		actionable: {
-			type: Boolean,
-		},
-
-		_mode: {
-			type: ListMode,
-			defaultValue: ListMode.None,
-			noAttribute: true,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.main.ListItem.prototype */ {
-		/**
-		 * Fired when the user clicks on the detail button when type is <code>Detail</code>.
-		 *
-		 * @event sap.ui.webcomponents.main.ListItem#detail-click
-		 * @public
-		 */
-		"detail-click": {},
-		_press: {},
-		_focused: {},
-		"_selection-requested": {},
-	},
-};
-
-/**
- * @class
- * A class to serve as a base
- * for the <code>StandardListItem</code> and <code>CustomListItem</code> classes.
- *
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.ListItem
- * @extends ListItemBase
- * @public
- */
-class ListItem extends ListItemBase {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get styles() {
-		return [ListItemBase.styles, styles];
-	}
-
-	constructor() {
-		super();
-
-		this.deactivateByKey = event => {
-			if (isEnter(event)) {
-				this.deactivate();
-			}
-		};
-
-		this.deactivate = () => {
-			if (this.active) {
-				this.active = false;
-			}
-		};
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
-	onBeforeRendering(...params) {
-		this.actionable = (this.type === ListItemType.Active) && (this._mode !== ListMode.Delete);
-	}
-
-	onEnterDOM() {
-		document.addEventListener("mouseup", this.deactivate);
-		document.addEventListener("touchend", this.deactivate);
-		document.addEventListener("keyup", this.deactivateByKey);
-	}
-
-	onExitDOM() {
-		document.removeEventListener("mouseup", this.deactivate);
-		document.removeEventListener("keyup", this.deactivateByKey);
-		document.removeEventListener("touchend", this.deactivate);
-	}
-
-	_onkeydown(event) {
-		super._onkeydown(event);
-
-		const itemActive = this.type === ListItemType.Active;
-
-		if (isSpace(event)) {
-			event.preventDefault();
-		}
-
-		if ((isSpace(event) || isEnter(event)) && itemActive) {
-			this.activate();
-		}
-
-		if (isEnter(event)) {
-			this.fireItemPress(event);
-		}
-	}
-
-	_onkeyup(event) {
-		if (isSpace(event) || isEnter(event)) {
-			this.deactivate();
-		}
-
-		if (isSpace(event)) {
-			this.fireItemPress(event);
-		}
-	}
-
-	_onmousedown(event) {
-		if (event.isMarked === "button") {
-			return;
-		}
-		this.activate();
-	}
-
-	_onmouseup(event) {
-		if (event.isMarked === "button") {
-			return;
-		}
-		this.deactivate();
-	}
-
-	_ontouchstart(event) {
-		this._onmousedown(event);
-	}
-
-	_ontouchend(event) {
-		this._onmouseup(event);
-	}
-
-	_onfocusout() {
-		super._onfocusout();
-		this.deactivate();
-	}
-
-	_onclick(event) {
-		if (event.isMarked === "button") {
-			return;
-		}
-		this.fireItemPress(event);
-	}
-
-	/*
-	 * Called when selection components in Single (ui5-radiobutton)
-	 * and Multi (ui5-checkbox) selection modes are used.
-	 */
-	onMultiSelectionComponentPress(event) {
-		if (this.isInactive) {
-			return;
-		}
-
-		this.fireEvent("_selection-requested", { item: this, selected: event.target.checked, selectionComponentPressed: true });
-	}
-
-	onSingleSelectionComponentPress(event) {
-		if (this.isInactive) {
-			return;
-		}
-
-		this.fireEvent("_selection-requested", { item: this, selected: !event.target.selected, selectionComponentPressed: true });
-	}
-
-	activate() {
-		if (this.type === ListItemType.Active) {
-			this.active = true;
-		}
-	}
-
-	onDelete(event) {
-		this.fireEvent("_selection-requested", { item: this, selectionComponentPressed: false });
-	}
-
-	onDetailClick(event) {
-		this.fireEvent("detail-click", { item: this, selected: this.selected });
-	}
-
-	fireItemPress(event) {
-		if (this.isInactive) {
-			return;
-		}
-
-		this.fireEvent("_press", { item: this, selected: this.selected, key: event.key });
-	}
-
-	get isInactive() {
-		return this.type === ListItemType.Inactive || this.type === ListItemType.Detail;
-	}
-
-	get placeSelectionElementBefore() {
-		return this._mode === ListMode.MultiSelect
-			|| this._mode === ListMode.SingleSelectBegin;
-	}
-
-	get placeSelectionElementAfter() {
-		return !this.placeSelectionElementBefore
-			&& (this._mode === ListMode.SingleSelectEnd || this._mode === ListMode.Delete);
-	}
-
-	get modeSingleSelect() {
-		return [
-			ListMode.SingleSelectBegin,
-			ListMode.SingleSelectEnd,
-			ListMode.SingleSelect,
-		].includes(this._mode);
-	}
-
-	get modeMultiSelect() {
-		return this._mode === ListMode.MultiSelect;
-	}
-
-	get modeDelete() {
-		return this._mode === ListMode.Delete;
-	}
-
-	get typeDetail() {
-		return this.type === ListItemType.Detail;
-	}
-
-	get typeActive() {
-		return this.type === ListItemType.Active;
-	}
-
-	get ariaSelected() {
-		if (this.modeMultiSelect) {
-			return this.selected;
-		}
-
-		return undefined;
-	}
-
-	get deleteText() {
-		return this.i18nBundle.getText(DELETE);
-	}
-
-	get _accInfo() {
-		return {
-			role: "option",
-			ariaExpanded: undefined,
-			ariaLevel: undefined,
-			ariaLabel: this.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),
-		};
-	}
-
-	static async onDefine() {
-		await Promise.all([
-			fetchI18nBundle("@ui5/webcomponents"),
-		]);
-	}
-}
-
-export default ListItem;

package/src/ListItemBase.js

@@ -1,152 +0,0 @@
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
-import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
-
-// Styles
-import styles from "./generated/themes/ListItemBase.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	properties: /** @lends  sap.ui.webcomponents.main.ListItemBase.prototype */  {
-
-		/**
-		 * Defines the selected state of the <code>ListItem</code>.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		selected: {
-			type: Boolean,
-		},
-
-		/**
-		* Defines if the list item should display its bottom border.
-		* @private
-		*/
-		hasBorder: {
-			type: Boolean,
-		},
-
-		_tabIndex: {
-			type: String,
-			defaultValue: "-1",
-			noAttribute: true,
-		},
-
-		/**
-		 * Indicates if the element is on focus
-		 * @private
-		 */
-		focused: {
-			type: Boolean,
-		},
-	},
-	events: {
-		_focused: {},
-		"_forward-after": {},
-		"_forward-before": {},
-	},
-};
-
-/**
- * A class to serve as a foundation
- * for the <code>ListItem</code> and <code>GroupHeaderListItem</code> classes.
- *
- * @abstract
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.ListItemBase
- * @extends UI5Element
- * @public
- */
-class ListItemBase extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return styles;
-	}
-
-	_onfocusin(event) {
-		if (event.isMarked === "button" || event.isMarked === "link") {
-			return;
-		}
-
-		this.focused = true;
-		this.fireEvent("_focused", event);
-	}
-
-	_onfocusout(_event) {
-		this.focused = false;
-	}
-
-	_onkeydown(event) {
-		if (isTabNext(event)) {
-			return this._handleTabNext(event);
-		}
-
-		if (isTabPrevious(event)) {
-			return this._handleTabPrevious(event);
-		}
-	}
-
-	_onkeyup() {}
-
-	_handleTabNext(event) {
-		const target = event.target;
-
-		if (this.shouldForwardTabAfter(target)) {
-			this.fireEvent("_forward-after", { item: target });
-		}
-	}
-
-	_handleTabPrevious(event) {
-		const target = event.target;
-
-		if (this.shouldForwardTabBefore(target)) {
-			const eventData = event;
-			eventData.item = target;
-			this.fireEvent("_forward-before", eventData);
-		}
-	}
-
-	/*
-	* Determines if th current list item either has no tabbable content or
-	* [TAB] is performed onto the last tabbale content item.
-	*/
-	shouldForwardTabAfter(target) {
-		const aContent = getTabbableElements(this.getDomRef());
-
-		if (target.getFocusDomRef) {
-			target = target.getFocusDomRef();
-		}
-
-		return !aContent.length || (aContent[aContent.length - 1] === target);
-	}
-
-	/*
-	* Determines if the current list item is target of [SHIFT+TAB].
-	*/
-	shouldForwardTabBefore(target) {
-		return this.getDomRef() === target;
-	}
-
-	get classes() {
-		return {
-			main: {
-				"ui5-li-root": true,
-				"ui5-li--focusable": true,
-			},
-		};
-	}
-}
-
-export default ListItemBase;

package/src/MessageStrip.hbs

@@ -1,34 +0,0 @@
-<div class="{{classes.main}}"
-	id="{{_id}}"
-	role="alert"
-	dir="{{effectiveDir}}"
-	aria-live="assertive"
-	aria-labelledby="{{_id}}">
-
-	{{#unless noIcon}}
-		<div class="ui5-messagestrip-icon-wrapper">
-			{{#if iconProvided}}
-				<slot name="icon"></slot>
-			{{else}}
-				<ui5-icon name="{{standardIconName}}" class="ui5-messagestrip-icon"></ui5-icon>
-			{{/if}}
-		</div>
-	{{/unless}}
-
-	<span class="ui5-hidden-text">{{hiddenText}}</span>
-	<span class="{{classes.label}}"><slot></slot></span>
-
-	{{#unless noCloseButton}}
-		<button
-			class="ui5-messagestrip-close-icon-wrapper"
-			title="{{_closeButtonText}}"
-			@click={{_closeClick}}
-		>
-			<ui5-icon
-				class="ui5-messagestrip-close-icon"
-				name="decline"
-			>
-			</ui5-icon>
-		</button>
-	{{/unless}}
-</div>