@ui5/webcomponents 0.0.0-323968e1b → 0.0.0-4180fe799

package/src/ListItem.hbs

@@ -0,0 +1,102 @@
+<li
+	part="native-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}}"
+	role="{{_accInfo.role}}"
+	aria-expanded="{{_accInfo.ariaExpanded}}"
+	title="{{title}}"
+	aria-level="{{_accInfo.ariaLevel}}"
+	aria-posinset="{{_accInfo.posinset}}"
+	aria-setsize="{{_accInfo.setsize}}"
+	aria-describedby="{{_id}}-invisibleText-describedby"
+	aria-labelledby="{{_id}}-invisibleText {{_id}}-content"
+	aria-disabled="{{ariaDisabled}}"
+>
+		{{> 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}}
+
+		<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{_accInfo.listItemAriaLabel}} {{accessibleName}}</span>
+		<span id="{{_id}}-invisibleText-describedby" class="ui5-hidden-text">{{_accInfo.ariaSelectedText}}</span>
+</li>
+
+{{#*inline "listItemPreContent"}}{{/inline}}
+{{#*inline "listItemContent"}}{{/inline}}
+{{#*inline "imageBegin"}}{{/inline}}
+{{#*inline "iconBegin"}}{{/inline}}
+{{#*inline "iconEnd"}}{{/inline}}
+
+{{#*inline "selectionElement"}}
+	{{#if modeSingleSelect}}
+		<ui5-radio-button
+				?disabled="{{isInactive}}"
+				accessible-name="{{_accInfo.ariaLabelRadioButton}}"
+				tabindex="-1"
+				id="{{_id}}-singleSelectionElement"
+				class="ui5-li-singlesel-radiobtn"
+				?checked="{{selected}}"
+				@click="{{onSingleSelectionComponentPress}}">
+		</ui5-radio-button>
+	{{/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 renderDeleteButton}}
+		<div class="ui5-li-deletebtn">
+			<ui5-button
+				tabindex="-1"
+				data-sap-no-tab-ref
+				id="{{_id}}-deleteSelectionElement"
+				design="Transparent"
+				icon="decline"
+				?disabled="{{disableDeleteButton}}"
+				@click="{{onDelete}}"
+				title="{{deleteText}}"
+			></ui5-button>
+		</div>
+	{{/if}}
+
+{{/inline}}

package/src/ListItem.js

@@ -0,0 +1,371 @@
+import { isSpace, isEnter, isDelete } from "@ui5/webcomponents-base/dist/Keys.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/edit.js";
+import { 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 from "./RadioButton.js";
+import CheckBox from "./CheckBox.js";
+import Button from "./Button.js";
+import {
+	DELETE,
+	ARIA_LABEL_LIST_ITEM_CHECKBOX,
+	ARIA_LABEL_LIST_ITEM_RADIO_BUTTON,
+	LIST_ITEM_SELECTED,
+	LIST_ITEM_NOT_SELECTED,
+} 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,
+		},
+
+		/**
+		 * Defines the tooltip of the component.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.15
+		 */
+		title: {
+			type: String,
+		},
+
+		/**
+		 * Indicates if the list item is actionable, e.g has hover and pressed effects.
+		 *
+		 * @type {boolean}
+		 * @private
+		*/
+		actionable: {
+			type: Boolean,
+		},
+
+		/**
+		 * Used to define the role of the list item.
+		 *
+		 * @private
+		 * @type {String}
+		 * @defaultvalue "listitem"
+		 * @since 1.0.0-rc.9
+		 *
+		 */
+		role: {
+			type: String,
+			defaultValue: "listitem",
+		},
+
+		_mode: {
+			type: ListMode,
+			defaultValue: ListMode.None,
+		},
+	},
+	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];
+	}
+
+	static get dependencies() {
+		return [
+			Button,
+			RadioButton,
+			CheckBox,
+		];
+	}
+
+	constructor() {
+		super();
+
+		this.deactivateByKey = event => {
+			if (isEnter(event)) {
+				this.deactivate();
+			}
+		};
+
+		this.deactivate = () => {
+			if (this.active) {
+				this.active = false;
+			}
+		};
+	}
+
+	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);
+		}
+
+		if (this.modeDelete && isDelete(event)) {
+			this.onDelete();
+		}
+	}
+
+	_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-radio-button)
+	 * 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;
+	}
+
+	/**
+	 * Used in UploadCollectionItem
+	 */
+	get renderDeleteButton() {
+		return this.modeDelete;
+	}
+
+	get disableDeleteButton() {
+		return false;
+	}
+	/**
+	 * End
+	 */
+
+	get typeDetail() {
+		return this.type === ListItemType.Detail;
+	}
+
+	get typeActive() {
+		return this.type === ListItemType.Active;
+	}
+
+	get ariaSelected() {
+		if (this.modeMultiSelect || this.modeSingleSelect) {
+			return this.selected;
+		}
+
+		return undefined;
+	}
+
+	get ariaSelectedText() {
+		let ariaSelectedText;
+
+		// Selected state needs to be supported separately since now the role mapping is list -> listitem[]
+		// to avoid the issue of nesting interactive elements, ex. (option -> radio/checkbox);
+		// The text is added to aria-describedby because as part of the aria-labelledby
+		// the whole content of the item is readout when the aria-labelledby value is changed.
+		if (this.ariaSelected !== undefined) {
+			ariaSelectedText = this.ariaSelected ? ListItem.i18nBundle.getText(LIST_ITEM_SELECTED) : ListItem.i18nBundle.getText(LIST_ITEM_NOT_SELECTED);
+		}
+
+		return ariaSelectedText;
+	}
+
+	get deleteText() {
+		return ListItem.i18nBundle.getText(DELETE);
+	}
+
+	get _accInfo() {
+		return {
+			role: this.role,
+			ariaExpanded: undefined,
+			ariaLevel: undefined,
+			ariaLabel: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),
+			ariaLabelRadioButton: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON),
+			ariaSelectedText: this.ariaSelectedText,
+		};
+	}
+
+	static async onDefine() {
+		ListItem.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+}
+
+export default ListItem;

package/src/ListItemBase.js

@@ -0,0 +1,179 @@
+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,
+		},
+
+		/**
+		 * Defines whether <code>ui5-li</code> is in disabled state.
+		 * <br><br>
+		 * <b>Note:</b> A disabled <code>ui5-li</code> is noninteractive.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @protected
+		 * @since 1.0.0-rc.12
+		 */
+		disabled: {
+			type: Boolean,
+		},
+
+		/**
+		 * Indicates if the element is on focus
+		 * @private
+		 */
+		focused: {
+			type: Boolean,
+		},
+	},
+	events: /** @lends  sap.ui.webcomponents.main.ListItemBase.prototype */  {
+		_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": !this.disabled,
+			},
+		};
+	}
+
+	get ariaDisabled() {
+		return this.disabled ? "true" : undefined;
+	}
+
+	get tabIndex() {
+		if (this.disabled) {
+			return -1;
+		}
+		if (this.selected) {
+			return 0;
+		}
+		return this._tabIndex;
+	}
+}
+
+export default ListItemBase;

package/src/MessageStrip.hbs

@@ -0,0 +1,34 @@
+<div class="{{classes.root}}"
+	id="{{_id}}"
+	role="note"
+	dir="{{effectiveDir}}"
+	aria-live="assertive"
+	aria-labelledby="{{_id}}"
+>
+
+	{{#unless hideIcon}}
+		<div
+		class="ui5-message-strip-icon-wrapper"
+		aria-hidden="true"
+		>
+			{{#if iconProvided}}
+				<slot name="icon"></slot>
+			{{else}}
+				<ui5-icon name="{{standardIconName}}" class="ui5-message-strip-icon"></ui5-icon>
+			{{/if}}
+		</div>
+	{{/unless}}
+
+	<span class="ui5-hidden-text">{{hiddenText}}</span>
+	<span class="ui5-message-strip-text"><slot></slot></span>
+
+	{{#unless hideCloseButton}}
+		<ui5-button
+			icon="decline"
+			design="Transparent"
+			class="ui5-message-strip-close-button"
+			title="{{_closeButtonText}}"
+			@click={{_closeClick}}
+		></ui5-button>
+	{{/unless}}
+</div>