@ui5/webcomponents 2.5.0 → 2.6.0-rc.0

package/src/InputPopoverTemplate.tsx

@@ -0,0 +1,158 @@
+import Input from "./Input.js";
+import Icon from "./Icon.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import error from "@ui5/webcomponents-icons/dist/error.js";
+import alert from "@ui5/webcomponents-icons/dist/alert.js";
+import sysEnter2 from "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import information from "@ui5/webcomponents-icons/dist/information.js";
+
+import Popover from "./Popover.js";
+import List from "./List.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import Button from "./Button.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+
+export default function InputPopoverTemplate(this: Input) {
+	return (
+		<>
+			{this._effectiveShowSuggestions &&
+			<ResponsivePopover
+				class={this.classes.popover}
+				hideArrow={true}
+				preventFocusRestore={true}
+				preventInitialFocus={true}
+				placement="Bottom"
+				horizontalAlign="Start"
+				tabindex={-1}
+				style={this.styles.suggestionsPopover}
+				onOpen={this._afterOpenPicker}
+				onClose={this._afterClosePicker}
+				onScroll={this._scroll}
+				open={this.open}
+				opener={this}
+				accessibleName={this._popupLabel}
+			>
+				{this._isPhone &&
+					<>
+						<div slot="header" class="ui5-responsive-popover-header">
+							<div class="row">
+								<span>{this._headerTitleText}</span>
+								<Button
+									class="ui5-responsive-popover-close-btn"
+									icon={decline}
+									design="Transparent"
+									onClick={this._closePicker}
+								>
+								</Button>
+							</div>
+							<div class="row">
+								<div class="input-root-phone native-input-wrapper">
+									<Input
+										class="ui5-input-inner-phone"
+										type={this.inputType}
+										value={this.value}
+										showClearIcon={this.showClearIcon}
+										placeholder={this.placeholder}
+										onInput={this._handleInput}
+										onChange={this._handleChange}
+									/>
+								</div>
+							</div>
+						</div>
+
+						{this.hasValueStateMessage &&
+						<div class={this.classes.popoverValueState} style={this.styles.suggestionPopoverHeader}>
+							<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)} />
+							{ this.open && valueStateMessage.call(this) }
+						</div>
+						}
+					</>
+				}
+
+				{!this._isPhone && this.hasValueStateMessage &&
+						<div
+							slot="header"
+							class={{
+								"ui5-responsive-popover-header": true,
+								"ui5-responsive-popover-header--focused": this._isValueStateFocused,
+								...this.classes.popoverValueState,
+							}}
+							style={this.styles.suggestionPopoverHeader}
+						>
+							<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)} />
+							{ this.open && valueStateMessage.call(this) }
+						</div>
+				}
+
+				{ suggestionsList.call(this) }
+
+				{this._isPhone &&
+					<div slot="footer" class="ui5-responsive-popover-footer">
+						<Button
+							design="Transparent"
+							onClick={this._closePicker}
+						>
+							OK
+						</Button>
+					</div>
+				}
+			</ResponsivePopover>
+			}
+
+			{this.hasValueStateMessage &&
+				<Popover
+					preventInitialFocus={true}
+					preventFocusRestore={true}
+					hideArrow={true}
+					class="ui5-valuestatemessage-popover"
+					placement="Bottom"
+					tabindex={-1}
+					horizontalAlign={this._valueStatePopoverHorizontalAlign}
+					opener={this}
+					open={this.valueStateOpen}
+					onClose={this._handleValueStatePopoverAfterClose}
+				>
+					<div slot="header" class={this.classes.popoverValueState} style={this.styles.popoverHeader}>
+						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)} />
+						{ this.valueStateOpen && valueStateMessage.call(this) }
+					</div>
+				</Popover>
+			}
+		</>
+	);
+}
+
+function valueStateMessage(this: Input) {
+	return (
+		<>
+			{
+				this.shouldDisplayDefaultValueStateMessage ? <>{this.valueStateText}</> : <slot name="valueStateMessage"></slot>
+			}
+		</>
+	);
+}
+
+function suggestionsList(this: Input) {
+	return (
+		<List
+			separators={this.suggestionSeparators}
+			selectionMode="Single"
+			onMouseDown={this.onItemMouseDown}
+			onItemClick={this._handleSuggestionItemPress}
+			onSelectionChange={this._handleSelectionChange}
+		>
+			<slot></slot>
+		</List>
+	);
+}
+
+function valueStateMessageInputIcon(this: Input) {
+	const iconPerValueState = {
+		Negative: error,
+		Critical: alert,
+		Positive: sysEnter2,
+		Information: information,
+	};
+
+	return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+}

package/src/InputTemplate.tsx

@@ -0,0 +1,114 @@
+import type Input from "./Input.js";
+import Icon from "./Icon.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import InputPopoverTemplate from "./InputPopoverTemplate.js";
+
+type TemplateHook = () => void;
+
+export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook }) {
+	const preContent = hooks?.preContent || defaultPreContent;
+	const postContent = hooks?.postContent || defaultPostContent;
+
+	return (
+		<>
+			<div
+				class="ui5-input-root ui5-input-focusable-element"
+				part="root"
+				onFocusIn={this._onfocusin}
+				onFocusOut={this._onfocusout}
+			>
+				<div class="ui5-input-content">
+					{ preContent.call(this) }
+
+					<input
+						id="inner"
+						part="input"
+						class="ui5-input-inner"
+						style={this.styles.innerInput}
+						type={this.inputNativeType}
+						inner-input
+						inner-input-with-icon={this.icon.length}
+						disabled={this.disabled}
+						readonly={this._readonly}
+						value={this._innerValue}
+						placeholder={this._placeholder}
+						maxlength={this.maxlength}
+						role={this.accInfo.role}
+						aria-controls={this.accInfo.ariaControls}
+						aria-invalid={this.accInfo.ariaInvalid}
+						aria-haspopup={this.accInfo.ariaHasPopup}
+						aria-describedby={this.accInfo.ariaDescribedBy}
+						aria-roledescription={this.accInfo.ariaRoledescription}
+						aria-autocomplete={this.accInfo.ariaAutoComplete}
+						aria-expanded={this.accInfo.ariaExpanded}
+						aria-label={this.accInfo.ariaLabel}
+						aria-required={this.required}
+						autocomplete="off"
+						data-sap-focus-ref
+						step={this.nativeInputAttributes.step}
+						min={this.nativeInputAttributes.min}
+						max={this.nativeInputAttributes.max}
+						onInput={this._handleNativeInput}
+						onChange={this._handleChange}
+						onSelect={this._handleSelect}
+						onKeyDown={this._onkeydown}
+						onKeyUp={this._onkeyup}
+						onClick={this._click}
+						onFocusIn={this.innerFocusIn}
+					/>
+
+					{this._effectiveShowClearIcon &&
+						<div
+							tabindex={-1}
+							class="ui5-input-clear-icon-wrapper inputIcon"
+							onClick={this._clear}
+							onMouseDown={this._iconMouseDown}
+						>
+							<Icon
+								part="clear-icon"
+								class="ui5-input-clear-icon"
+								name={decline}
+								tabindex={-1}
+								accessibleName={this.clearIconAccessibleName}>
+							</Icon>
+						</div>
+					}
+
+					{this.icon.length > 0 &&
+						<div class="ui5-input-icon-root">
+							<slot name="icon"></slot>
+						</div>
+					}
+
+					<div class="ui5-input-value-state-icon">
+						{this._valueStateInputIcon}
+					</div>
+
+					{ postContent.call(this) }
+
+					{this._effectiveShowSuggestions &&
+						<>
+							<span id="suggestionsText" class="ui5-hidden-text">{this.suggestionsText}</span>
+							<span id="selectionText" class="ui5-hidden-text" aria-live="polite" role="status"></span>
+							<span id="suggestionsCount" class="ui5-hidden-text" aria-live="polite">{this.availableSuggestionsCount}</span>
+						</>
+					}
+
+					{this.accInfo.ariaDescription &&
+						<span id="descr" class="ui5-hidden-text">{this.accInfo.ariaDescription}</span>
+					}
+
+					{this.hasValueState &&
+						<span id="valueStateDesc" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
+					}
+				</div>
+			</div>
+
+			{ InputPopoverTemplate.call(this) }
+		</>
+	);
+}
+
+function defaultPreContent() {}
+
+function defaultPostContent() {}

package/src/LabelTemplate.tsx

@@ -0,0 +1,20 @@
+import type Label from "./Label.js";
+
+export default function LabelTemplate(this: Label) {
+	return (
+		<label
+			class="ui5-label-root"
+			onClick={this._onclick}
+		>
+			<span class="ui5-label-text-wrapper">
+				<slot></slot>
+			</span>
+			<span
+				aria-hidden="true"
+				class="ui5-label-required-colon"
+				data-ui5-colon={this._colonSymbol}
+			>
+			</span>
+		</label>
+	);
+}

package/src/LinkTemplate.tsx

@@ -0,0 +1,51 @@
+import type Link from "./Link.js";
+import Icon from "./Icon.js";
+
+export default function LinkTemplate(this: Link) {
+	return (
+		<a
+			part="root"
+			class="ui5-link-root"
+			role={this.effectiveAccRole}
+			href={this.parsedRef}
+			target={this.target}
+			rel={this._rel}
+			tabindex={this.effectiveTabIndex}
+			title={this.tooltip}
+			aria-disabled={this.disabled}
+			aria-label={this.ariaLabelText}
+			aria-haspopup={this._hasPopup}
+			aria-expanded={this.accessibilityAttributes.expanded}
+			aria-current={this.accessibilityAttributes.current}
+			aria-description={this.ariaDescriptionText}
+			onClick={this._onclick}
+			onKeyDown={this._onkeydown}
+			onKeyUp={this._onkeyup}
+		>
+			{this.icon &&
+			<Icon
+				class="ui5-link-icon"
+				name={this.icon}
+				mode="Decorative"
+				part="icon">
+			</Icon>
+			}
+
+			<span class="ui5-link-text">
+				<slot></slot>
+			</span>
+
+			{ this.hasLinkType &&
+			<span class="ui5-hidden-text">{this.linkTypeText}</span>
+			}
+
+			{this.endIcon &&
+			<Icon
+				class="ui5-link-end-icon"
+				name={this.endIcon}
+				mode="Decorative"
+				part="endIcon"
+			/>
+			}
+		</a>);
+}

package/src/ListItemBaseTemplate.tsx

@@ -0,0 +1,35 @@
+import type ListItemBase from "./ListItemBase.js";
+import type { AriaRole } from "@ui5/webcomponents-base/";
+
+export default function ListItemBaseTemplate(this: ListItemBase, hooks?: { listItemContent: () => void }, injectedProps?: {
+	role?: AriaRole,
+	title?: string,
+}) {
+	const listItemContent = hooks?.listItemContent || defaultListItemContent;
+
+	return (
+		<li
+			part="native-li"
+			data-sap-focus-ref
+			tabindex={this._effectiveTabIndex}
+			class={this.classes.main}
+			draggable={this.movable}
+			role={injectedProps?.role}
+			title={injectedProps?.title}
+			onFocusIn={this._onfocusin}
+			onKeyUp={this._onkeyup}
+			onKeyDown={this._onkeydown}
+			onClick={this._onclick}
+		>
+			{ listItemContent.call(this) }
+		</li>
+	);
+}
+
+function defaultListItemContent(this: ListItemBase) {
+	return <div part="content" id={`${this._id}-content`} class="ui5-li-content">
+		<div class="ui5-li-text-wrapper">
+			<span part="title" class="ui5-li-title"><slot></slot></span>
+		</div>
+	</div>;
+}

package/src/ListItemCustomTemplate.tsx

@@ -0,0 +1,17 @@
+import type ListItemCustom from "./ListItemCustom.js";
+import ListItemTemplate from "./ListItemTemplate.js";
+import type { ListItemHooks } from "./ListItemTemplate.js";
+
+const predefinedHooks: Partial<ListItemHooks> = {
+	listItemContent,
+};
+
+export default function ListItemCustomTemplate(this: ListItemCustom, hooks?: Partial<ListItemHooks>) {
+	const currentHooks = { ...predefinedHooks, ...hooks };
+
+	return ListItemTemplate.call(this, currentHooks);
+}
+
+function listItemContent(this: ListItemCustom) {
+	return <slot></slot>;
+}

package/src/ListItemGroupHeaderTemplate.tsx

@@ -0,0 +1,23 @@
+import type ListItemGroupHeader from "./ListItemGroupHeader.js";
+
+export default function ListItemGroupHeaderTemplate(this: ListItemGroupHeader) {
+	return (
+		<ul
+			role="group"
+			part="native-li"
+			tabindex={this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined}
+			class={{
+				"ui5-ghli-root": true,
+				...this.classes.main,
+			}}
+			aria-label={this.ariaLabelText}
+			aria-roledescription={this.groupHeaderText}
+			onFocusIn={this._onfocusin}
+			onKeyDown={this._onkeydown}
+		>
+			<div id={`${this._id}-content`} class="ui5-li-content">
+				<span class="ui5-ghli-title"><slot></slot></span>
+			</div>
+		</ul>
+	);
+}

package/src/ListItemGroupTemplate.tsx

@@ -0,0 +1,32 @@
+import type ListItemGroup from "./ListItemGroup.js";
+import ListItemGroupHeader from "./ListItemGroupHeader.js";
+import DropIndicator from "./DropIndicator.js";
+
+export default function ListItemGroupTemplate(this: ListItemGroup, hooks?: { items: () => void }) {
+	const items = hooks?.items || defaultItems;
+
+	return (
+		<ul
+			role="group"
+			class="ui5-group-li-root"
+			onDragEnter={this._ondragenter}
+			onDragOver={this._ondragover}
+			onDrop={this._ondrop}
+			onDragLeave={this._ondragleave}
+		>
+			{this.hasHeader &&
+				<ListItemGroupHeader focused={this.focused} part="header">
+					{ this.hasFormattedHeader ? <slot name="header"></slot> : this.headerText }
+				</ListItemGroupHeader>
+			}
+
+			{ items.call(this) }
+
+			<DropIndicator orientation="Horizontal" ownerReference={this}/>
+		</ul>
+	);
+}
+
+function defaultItems(this: ListItemGroup) {
+	return <slot></slot>;
+}

package/src/ListItemStandardTemplate.tsx

@@ -0,0 +1,71 @@
+import Icon from "./Icon.js";
+import type ListItemStandard from "./ListItemStandard.js";
+import ListItemTemplate from "./ListItemTemplate.js";
+import type { ListItemHooks } from "./ListItemTemplate.js";
+
+const predefinedHooks: Partial<ListItemHooks> = {
+	imageBegin,
+	iconBegin,
+	iconEnd,
+	listItemContent
+};
+
+export default function ListItemStandardTemplate(this: ListItemStandard, hooks?: Partial<ListItemHooks>) {
+	const currentHooks = { ...predefinedHooks, ...hooks };
+
+	return ListItemTemplate.call(this, currentHooks);
+}
+
+function listItemContent(this: ListItemStandard) {
+	return <>
+		<div class="ui5-li-text-wrapper">
+			<span part="title" class="ui5-li-title">
+				<slot></slot>
+			</span>
+			{this.description && (
+				<div class="ui5-li-description-info-wrapper">
+					<span part="description" class="ui5-li-desc">{this.description}</span>
+					{
+						this.additionalText && (
+							<span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span>
+						)
+					}
+				</div>
+			)}
+
+			{!this.typeActive && <span class="ui5-hidden-text">{this.type}</span>}
+		</div>
+
+		{!this.description && this.additionalText && (
+			<span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span>
+		)}
+	</>;
+}
+
+function imageBegin(this: ListItemStandard) {
+	if (this.hasImage) {
+		return <div class="ui5-li-image">
+			<slot name="image"></slot>
+		</div>;
+	}
+}
+
+function iconBegin(this: ListItemStandard) {
+	if (this.displayIconBegin) {
+		return <Icon
+			part="icon"
+			name={this.icon}
+			class="ui5-li-icon"
+			mode="Decorative" />;
+	}
+}
+
+function iconEnd(this: ListItemStandard) {
+	if (this.displayIconEnd) {
+		return <Icon
+			part="icon"
+			name={this.icon}
+			class="ui5-li-icon"
+			mode="Decorative" />;
+	}
+}

package/src/ListItemTemplate.tsx

@@ -0,0 +1,172 @@
+import type { JsxTemplate } from "@ui5/webcomponents-base/dist/index.js";
+import type ListItem from "./ListItem.js";
+import Button from "./Button.js";
+import Icon from "./Icon.js";
+import editIcon from "@ui5/webcomponents-icons/dist/edit.js";
+import slimArrowRightIcon from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
+import RadioButton from "./RadioButton.js";
+import CheckBox from "./CheckBox.js";
+
+export type ListItemHooks = {
+	listItemPreContent: JsxTemplate
+	listItemContent: JsxTemplate
+	imageBegin: JsxTemplate
+	iconBegin: JsxTemplate
+	iconEnd: JsxTemplate
+	selectionElement: JsxTemplate
+}
+
+const predefinedHooks: ListItemHooks = {
+	listItemPreContent,
+	listItemContent,
+	imageBegin,
+	iconBegin,
+	iconEnd,
+	selectionElement,
+};
+
+export default function ListItemTemplate(this: ListItem, hooks?: Partial<ListItemHooks>) {
+	const currentHooks = { ...predefinedHooks, ...hooks };
+
+	return <li
+		part="native-li"
+		data-sap-focus-ref
+		tabindex={this._effectiveTabIndex}
+		class={this.classes.main}
+		onFocusIn={this._onfocusin}
+		onFocusOut={this._onfocusout}
+		onKeyUp={this._onkeyup}
+		onKeyDown={this._onkeydown}
+		onMouseUp={this._onmouseup}
+		onMouseDown={this._onmousedown}
+		onTouchStart={this._onmousedown}
+		onTouchEnd={this._ontouchend}
+		onClick={this._onclick}
+		draggable={this.movable}
+		onDragStart={this._ondragstart}
+		onDragEnd={this._ondragend}
+		role={this._accInfo.role}
+		title={this._accInfo.tooltip}
+		aria-expanded={this._accInfo.ariaExpanded}
+		aria-level={this._accInfo.ariaLevel}
+		aria-haspopup={this._accInfo.ariaHaspopup}
+		aria-posinset={this._accInfo.posinset}
+		aria-setsize={this._accInfo.setsize}
+		aria-describedby={`${this._id}-invisibleText-describedby`}
+		aria-labelledby={this._accessibleNameRef}
+		aria-disabled={this._ariaDisabled}
+		aria-selected={this._accInfo.ariaSelected}
+		aria-checked={this._accInfo.ariaChecked}
+		aria-owns={this._accInfo.ariaOwns}
+		aria-keyshortcuts={this._accInfo.ariaKeyShortcuts}
+	>
+		{currentHooks.listItemPreContent.call(this)}
+
+		{this.placeSelectionElementBefore && selectionElement.call(this)}
+
+		{this._hasHighlightColor && <div class="ui5-li-highlight"></div>}
+
+		<div part="content" id={`${this._id}-content`} class="ui5-li-content">
+			{currentHooks.imageBegin.call(this)}
+			{currentHooks.iconBegin.call(this)}
+			{currentHooks.listItemContent.call(this)}
+		</div>
+
+		{currentHooks.iconEnd.call(this)}
+
+		{this.typeDetail && (
+			<div class="ui5-li-detailbtn">
+				<Button
+					part="detail-button"
+					design="Transparent"
+					onClick={this.onDetailClick}
+					icon={editIcon}
+				/>
+			</div>
+		)}
+
+		{this.typeNavigation && (
+			<Icon name={slimArrowRightIcon} />
+		)}
+
+		{this.navigated && (
+			<div class="ui5-li-navigated"></div>
+		)}
+
+		{this.placeSelectionElementAfter && (currentHooks.selectionElement.call(this))}
+
+		<span
+			id={`${this._id}-invisibleText`}
+			class="ui5-hidden-text">
+			{this._accInfo.listItemAriaLabel}
+			{this.accessibleName}
+		</span>
+		<span
+			id={`${this._id}-invisibleText-describedby`}
+			class="ui5-hidden-text">
+			{this._accInfo.ariaSelectedText}
+		</span>
+
+	</li >;
+}
+
+function listItemPreContent(this: ListItem) { }
+function listItemContent(this: ListItem) { }
+function imageBegin(this: ListItem) { }
+function iconBegin(this: ListItem) { }
+function iconEnd(this: ListItem) { }
+function selectionElement(this: ListItem) {
+	switch (true) {
+	case this.modeSingleSelect:
+		return (
+			<RadioButton
+				part="radio"
+				disabled={this.isInactive}
+				accessibleName={this._accInfo.ariaLabelRadioButton}
+				tabindex={-1}
+				id={`${this._id}-singleSelectionElement`}
+				class="ui5-li-singlesel-radiobtn"
+				checked={this.selected}
+				onChange={this.onSingleSelectionComponentPress}
+			/>
+		);
+	case this.modeMultiple:
+		return (
+			<CheckBox
+				part="checkbox"
+				disabled={this.isInactive}
+				indeterminate={this.indeterminate}
+				tabindex={-1}
+				id={`${this._id}-multiSelectionElement`}
+				class="ui5-li-multisel-cb"
+				checked={this.selected}
+				accessibleName={this._accInfo.ariaLabel}
+				onChange={this.onMultiSelectionComponentPress}
+			/>
+		);
+	case this.renderDeleteButton:
+		return (
+			<div class="ui5-li-deletebtn">
+				{
+					this.hasDeleteButtonSlot ?
+						(
+							<slot name="deleteButton"></slot>
+						) : (
+							<Button
+								part="delete-button"
+								tabindex={-1}
+								data-sap-no-tab-ref
+								id={`${this._id}-deleteSelectionElement`}
+								design="Transparent"
+								icon={declineIcon}
+								disabled={this.disableDeleteButton}
+								onClick={this.onDelete}
+								tooltip={this.deleteText}
+							/>
+						)
+				}
+			</div >
+		);
+	}
+}