@ui5/webcomponents 2.5.0 → 2.6.0-rc.0

package/src/ListTemplate.tsx

@@ -0,0 +1,113 @@
+import BusyIndicator from "./BusyIndicator.js";
+import DropIndicator from "./DropIndicator.js";
+import type List from "./List.js";
+
+export default function ListTemplate(this: List) {
+	return (
+		<div
+			class="ui5-list-root"
+			onFocusIn={this._onfocusin}
+			onKeyDown={this._onkeydown}
+			onDragEnter={this._ondragenter}
+			onDragOver={this._ondragover}
+			onDrop={this._ondrop}
+			onDragLeave={this._ondragleave}
+			// events bubbling from slotted items
+			onui5-close={this.onItemClose}
+			onui5-toggle={this.onItemToggle}
+			onui5-request-tabindex-change={this.onItemTabIndexChange}
+			onui5-_focused={this.onItemFocused}
+			onui5-forward-after={this.onForwardAfter}
+			onui5-forward-before={this.onForwardBefore}
+			onui5-selection-requested={this.onSelectionRequested}
+			onui5-focus-requested={this.onFocusRequested}
+			onui5-_press={this.onItemPress}
+		>
+			<BusyIndicator
+				id={`${this._id}-busyIndicator`}
+				delay={this.loadingDelay}
+				active={this.showBusyIndicatorOverlay}
+				class="ui5-list-busy-indicator"
+			>
+				<div class="ui5-list-scroll-container">
+					{this.header.length > 0 && <slot name="header" />}
+
+					{this.shouldRenderH1 &&
+						<header id={this.headerID} class="ui5-list-header">
+							{this.headerText}
+						</header>
+					}
+
+					{this.hasData &&
+						<div id={`${this._id}-before`} tabindex={0} role="none" class="ui5-list-focusarea"></div>
+					}
+
+					<span id={`${this._id}-modeLabel`} class="ui5-hidden-text">{this.ariaLabelModeText}</span>
+
+					<ul id={`${this._id}-listUl`}
+						class="ui5-list-ul"
+						role={this.listAccessibleRole}
+						aria-label={this.ariaLabelTxt}
+						aria-labelledby={this.ariaLabelledBy}
+						aria-description={this.ariaDescriptionText}
+					>
+						<slot></slot>
+
+						{this.showNoDataText &&
+							<li tabindex={0} id={`${this._id}-nodata`} class="ui5-list-nodata">
+								<div id={`${this._id}-nodata-text`} class="ui5-list-nodata-text">
+									{this.noDataText}
+								</div>
+							</li>
+						}
+					</ul>
+
+					{ this.growsWithButton && moreRow.call(this) }
+
+					{this.footerText &&
+						<footer id={`${this._id}-footer`} class="ui5-list-footer">{this.footerText}</footer>
+					}
+
+					{this.hasData &&
+						<div id={`${this._id}-after`} tabindex={0} role="none" class="ui5-list-focusarea"></div>
+					}
+
+					<span tabindex={-1} aria-hidden="true" class="ui5-list-end-marker"></span>
+				</div>
+				<DropIndicator orientation="Horizontal" ownerReference={this}/>
+			</BusyIndicator>
+		</div>
+	);
+}
+
+function moreRow(this: List) {
+	return (
+		<div class="ui5-growing-button" part="growing-button">
+			<div
+				id={`${this._id}-growing-btn`}
+				role="button"
+				tabindex={0}
+				part="growing-button-inner"
+				class={{
+					"ui5-growing-button-inner": true,
+					"ui5-growing-button-inner-active": this._loadMoreActive,
+				}}
+				aria-labelledby={`${this._id}-growingButton-text`}
+				onClick={this._onLoadMoreClick}
+				onKeyDown={this._onLoadMoreKeydown}
+				onKeyUp={this._onLoadMoreKeyup}
+				onMouseDown={this._onLoadMoreMousedown}
+				onMouseUp={this._onLoadMoreMouseup}
+			>
+				{this.loading &&
+					<BusyIndicator
+						delay={this.loadingDelay}
+						class="ui5-list-growing-button-busy-indicator"
+						active>
+					</BusyIndicator>
+				}
+				<span id={`${this._id}-growingButton-text`} class="ui5-growing-button-text" growing-button-text>{this._growingButtonText}</span>
+			</div>
+		</div>
+	);
+}

package/src/MenuItemTemplate.tsx

@@ -0,0 +1,155 @@
+import type { JsxTemplate } from "@ui5/webcomponents-base";
+import type MenuItem from "./MenuItem.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import Button from "./Button.js";
+import List from "./List.js";
+import BusyIndicator from "./BusyIndicator.js";
+import navBackIcon from "@ui5/webcomponents-icons/dist/nav-back.js";
+import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import Icon from "./Icon.js";
+import ListItemTemplate from "./ListItemTemplate.js";
+import type { ListItemHooks } from "./ListItemTemplate.js";
+
+export type MenuItemHooks = ListItemHooks & {
+	listItemPostContent: JsxTemplate,
+}
+
+const predefinedHooks: Partial<MenuItemHooks> = {
+	listItemContent,
+	iconBegin,
+};
+
+export default function MenuItemTemplate(this: MenuItem, hooks?: Partial<MenuItemHooks>) {
+	const currentHooks = { ...predefinedHooks, ...hooks };
+
+	return <>
+		{ListItemTemplate.call(this, currentHooks)}
+
+		{listItemPostContent.call(this)}
+	</>;
+}
+
+function listItemContent(this: MenuItem) {
+	return (<>
+		{this.text && <div class="ui5-menu-item-text">{this.text}</div>}
+
+		{rightContent.call(this)}
+
+		{this.hasSubmenu && (
+			<div class="ui5-menu-item-submenu-icon" >
+				<Icon
+					part="subicon"
+					name={slimArrowRight}
+					class="ui5-menu-item-icon-end"
+				/>
+			</div>
+		)}
+	</>);
+}
+
+function rightContent(this: MenuItem) {
+	switch (true) {
+	case this.hasSubmenu:
+		return (
+			<div class="ui5-menu-item-submenu-icon" >
+				<Icon
+					part="subicon"
+					name={slimArrowRight}
+					class="ui5-menu-item-icon-end"
+				/>
+			</div>
+		);
+	case this.hasEndContent:
+		return <slot name="endContent"></slot>;
+	case !!this.additionalText:
+		return (
+			<span
+				part="additional-text"
+				class="ui5-li-additional-text"
+				aria-hidden={this._accInfo.ariaHidden}
+			>
+				{this.additionalText}
+			</span>
+		);
+	}
+}
+
+function iconBegin(this: MenuItem) {
+	if (this.hasIcon) {
+		return <Icon class="ui5-li-icon" name={this.icon} />;
+	}
+
+	if (this._siblingsWithIcon) {
+		return <div class="ui5-menu-item-dummy-icon"></div>;
+	}
+}
+
+function listItemPostContent(this: MenuItem) {
+	return this.hasSubmenu && <ResponsivePopover
+		id={`${this._id}-menu-rp`}
+		class="ui5-menu-rp .ui5-menu-rp-sub-menu"
+		preventInitialFocus={true}
+		preventFocusRestore={true}
+		hideArrow={true}
+		allowTargetOverlap={true}
+		placement={this.placement}
+		verticalAlign="Top"
+		accessibleName={this.acessibleNameText}
+		onBeforeOpen={this._beforePopoverOpen}
+		onOpen={this._afterPopoverOpen}
+		onBeforeClose={this._beforePopoverClose}
+		onClose={this._afterPopoverClose}
+	>
+		{
+			this.isPhone && (
+				<>
+					<div slot="header" class="ui5-menu-dialog-header" >
+						<Button
+							icon={navBackIcon}
+							class="ui5-menu-back-button"
+							design="Transparent"
+							aria-label={this.labelBack}
+							onClick={this._close}
+						/>
+						<div class="ui5-menu-dialog-title" >
+							<div>
+								{this.text}
+							</div>
+						</div>
+						<Button
+							icon={declineIcon}
+							design="Transparent"
+							aria-label={this.labelClose}
+							onClick={this._closeAll}
+						/>
+					</div >
+				</>
+			)
+		}
+
+		<div id={`${this._id}-menu-main`}>
+			{
+				this.items.length ? (
+					<List
+						id={`${this._id}-menu-list`}
+						selectionMode="None"
+						separators="None"
+						accessibleRole="Menu"
+						loading={this.loading}
+						loadingDelay={this.loadingDelay}
+						// handles event from slotted children
+						onui5-close-menu={this._close}
+					>
+						<slot></slot>
+					</List>
+				) : this.loading && <BusyIndicator
+					id={`${this._id}-menu-busy-indicator`}
+					delay={this.loadingDelay}
+					class="ui5-menu-busy-indicator"
+					active={true}
+				/>
+			}
+		</div >
+	</ResponsivePopover>;
+}

package/src/MenuSeparatorTemplate.tsx

@@ -0,0 +1,12 @@
+import type MenuSeparator from "./MenuSeparator.js";
+import ListItemCustom from "./ListItemCustom.js";
+
+export default function MenuSeparatorTemplate(this: MenuSeparator) {
+	return (
+		<ListItemCustom
+			class="ui5-menu-separator"
+			_forcedAccessibleRole="separator"
+			disabled={true}
+		/>
+	);
+}

package/src/MenuTemplate.tsx

@@ -0,0 +1,71 @@
+import type Menu from "./Menu.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import List from "./List.js";
+import BusyIndicator from "./BusyIndicator.js";
+import Button from "./Button.js";
+import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
+
+export default function MenuTemplate(this: Menu) {
+	return (
+		<ResponsivePopover
+			id={`${this._id}-menu-rp`}
+			class="ui5-menu-rp"
+			placement="Bottom"
+			verticalAlign="Bottom"
+			opener={this.opener}
+			open={this.open}
+			preventInitialFocus={true}
+			hideArrow={true}
+			allowTargetOverlap={true}
+			accessibleName={this.acessibleNameText}
+			onBeforeOpen={this._beforePopoverOpen}
+			onOpen={this._afterPopoverOpen}
+			onBeforeClose={this._beforePopoverClose}
+			onClose={this._afterPopoverClose}
+		>
+			{this.isPhone &&
+				<div slot="header" class="ui5-menu-dialog-header">
+					<div class="ui5-menu-dialog-title">
+						<h1>
+							{this.headerText}
+						</h1>
+					</div>
+					<Button
+						icon={declineIcon}
+						design="Transparent"
+						aria-label={this.labelClose}
+						onClick={this._close}
+					/>
+				</div>
+			}
+			<div
+				id={`${this._id}-menu-main`}
+			>
+				{this.items.length ?
+					(<List
+						id={`${this._id}- menu-list`}
+						selectionMode="None"
+						loading={this.loading}
+						loadingDelay={this.loadingDelay}
+						separators="None"
+						accessibleRole="Menu"
+						onItemClick={this._itemClick}
+						onMouseOver={this._itemMouseOver}
+						onKeyDown={this._itemKeyDown}
+						// handles event from slotted children
+						onui5-close-menu={this._close}
+					>
+						<slot></slot>
+					</List>)
+					: this.loading && (<BusyIndicator
+						id={`${this._id}-menu-busy-indicator`}
+						delay={this.loadingDelay}
+						class="ui5-menu-busy-indicator"
+						active={true}
+					/>
+					)
+				}
+			</div>
+		</ResponsivePopover >
+	);
+}

package/src/MessageStripTemplate.tsx

@@ -0,0 +1,64 @@
+import type MessageStrip from "./MessageStrip.js";
+import MessageStripDesign from "./types/MessageStripDesign.js";
+import Button from "./Button.js";
+import Icon from "./Icon.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import information from "@ui5/webcomponents-icons/dist/information.js";
+import sysEnter2 from "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import error from "@ui5/webcomponents-icons/dist/error.js";
+import alert from "@ui5/webcomponents-icons/dist/alert.js";
+
+export default function MessageStripTemplate(this: MessageStrip) {
+	return (
+		<div
+			id={this._id}
+			class={{
+				"ui5-message-strip-root": true,
+				"ui5-message-strip-root-hide-icon": this.shouldHideIcon,
+				"ui5-message-strip-root-hide-close-button": this.hideCloseButton,
+				[this.designClasses]: true,
+			}}
+			role="note"
+			aria-labelledby={this._id}
+		>
+
+			{!this.shouldHideIcon &&
+				<div class="ui5-message-strip-icon-wrapper" aria-hidden="true">
+					{this.iconProvided ?
+						<slot name="icon"></slot>
+						:
+						<Icon name={standardIconName.call(this)} class="ui5-message-strip-icon"/>
+					}
+				</div>
+			}
+
+			<span class="ui5-hidden-text">{this.hiddenText}</span>
+			<span class="ui5-message-strip-text"><slot></slot></span>
+
+			{!this.hideCloseButton &&
+				<Button
+					icon={decline}
+					design="Transparent"
+					class="ui5-message-strip-close-button"
+					tooltip={this._closeButtonText}
+					onClick={this._closeClick}
+				/>
+			}
+		</div>
+	);
+}
+
+function standardIconName(this: MessageStrip) {
+	switch (this.design) {
+	case MessageStripDesign.Critical:
+		return alert;
+	case MessageStripDesign.Positive:
+		return sysEnter2;
+	case MessageStripDesign.Negative:
+		return error;
+	case MessageStripDesign.Information:
+		return information;
+	default:
+		return undefined;
+	}
+}

package/src/MonthPickerTemplate.tsx

@@ -0,0 +1,44 @@
+import type MonthPicker from "./MonthPicker.js";
+
+export default function MonthPickerTemplate(this: MonthPicker) {
+	return (
+		<div
+			class="ui5-mp-root"
+			role="grid"
+			aria-roledescription={this.roleDescription}
+			aria-readonly="false"
+			aria-multiselectable="false"
+			onMouseOver={this._onmouseover}
+			onKeyDown={this._onkeydown}
+			onKeyUp={this._onkeyup}
+			onClick={this._selectMonth}
+		>
+			{this._monthsInterval.map(months =>
+				<div role="row" class="ui5-mp-quarter">
+
+					{months.map(month =>
+						<div
+							data-sap-timestamp={month.timestamp}
+							tabindex={month._tabIndex}
+							data-sap-focus-ref={month.focusRef ? "true" : undefined}
+							class={month.classes}
+							part={month.parts}
+							role="gridcell"
+							aria-selected={month.ariaSelected}
+							aria-disabled={month.ariaDisabled}
+						>
+							<span class="ui5-dp-monthtext">
+								{month.name}
+							</span>
+
+							{month.nameInSecType &&
+						<span class="ui5-dp-monthtext ui5-dp-monthsectext">
+							{month.nameInSecType}
+						</span>
+							}
+						</div>
+					)}
+				</div>
+			)}
+		</div>);
+}

package/src/MultiComboBoxItemGroupTemplate.tsx

@@ -0,0 +1,10 @@
+import ListItemGroupTemplate from "./ListItemGroupTemplate.js";
+import type MultiComboBoxItemGroup from "./MultiComboBoxItemGroup.js";
+
+export default function MultiComboBoxItemGroupTemplate(this: MultiComboBoxItemGroup) {
+	return [ListItemGroupTemplate.call(this, { items })];
+}
+
+function items(this: MultiComboBoxItemGroup) {
+	return this.items.filter(item => item._isVisible).map(item => <slot name={item._individualSlot}></slot>);
+}

package/src/MultiComboBoxItemTemplate.tsx

@@ -0,0 +1,26 @@
+import CheckBox from "./CheckBox.js";
+import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
+import type MultiComboBoxItem from "./MultiComboBoxItem.js";
+
+export default function MultiComboBoxItemTemplate(this: MultiComboBoxItem) {
+	return ListItemBaseTemplate.call(this, { listItemContent }, { role: "option" });
+}
+
+function listItemContent(this: MultiComboBoxItem) {
+	return (
+		<>
+			<CheckBox
+				disabled={this._readonly}
+				checked={this.selected}
+				tabindex={-1}
+				accessibleName={this._accessibleName}
+			/>
+			<div part="content" id="content" class="ui5-li-content">
+				<div class="ui5-li-text-wrapper">
+					{ this.text && <span part="title" className="ui5-li-title" dangerouslySetInnerHTML={{ __html: this.text }}></span> }
+					{ this.additionalText && <span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span> }
+				</div>
+			</div>
+		</>
+	);
+}

package/src/MultiInputTemplate.tsx

@@ -0,0 +1,48 @@
+import Icon from "./Icon.js";
+import InputTemplate from "./InputTemplate.js";
+import type MultiInput from "./MultiInput.js";
+import Tokenizer from "./Tokenizer.js";
+import valueHelp from "@ui5/webcomponents-icons/dist/value-help.js";
+
+export default function MultiInputTemplate(this: MultiInput) {
+	return [
+		InputTemplate.call(this, { preContent, postContent }),
+	];
+}
+
+function preContent(this: MultiInput) {
+	return (
+		<>
+			<span id="hiddenText-nMore" class="ui5-hidden-text">{this._tokensCountText}</span>
+			<Tokenizer
+				class="ui5-multi-input-tokenizer"
+				opener={this.morePopoverOpener}
+				popoverMinWidth={this._inputWidth}
+				hidePopoverArrow={true}
+				expanded={this.tokenizerExpanded}
+				onKeyDown={this._onTokenizerKeydown}
+				onTokenDelete={this.tokenDelete}
+				onFocusOut={this._tokenizerFocusOut}
+			>
+				{ this.tokens.map(token => <slot name={token._individualSlot}></slot>)}
+			</Tokenizer>
+		</>
+	);
+}
+
+function postContent(this: MultiInput) {
+	return (
+		<>
+			{this.showValueHelpIcon &&
+				<Icon
+					class="inputIcon"
+					name={valueHelp}
+					accessibleName={this.valueHelpLabel}
+					onMouseUp={this.valueHelpMouseUp}
+					onMouseDown={this.valueHelpMouseDown}
+					onClick={this.valueHelpPress}
+				/>
+			}
+		</>
+	);
+}

package/src/NavigationMenuItemTemplate.tsx

@@ -0,0 +1,142 @@
+import type NavigationMenuItem from "./NavigationMenuItem.js";
+import MenuItemTemplate from "./MenuItemTemplate.js";
+import type { MenuItemHooks } from "./MenuItemTemplate.js";
+import Icon from "./Icon.js";
+import slimArrowRightIcon from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import arrowRightIcon from "@ui5/webcomponents-icons/dist/arrow-right.js";
+import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
+import navBackIcon from "@ui5/webcomponents-icons/dist/nav-back.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import Button from "./Button.js";
+import List from "./List.js";
+import BusyIndicator from "./BusyIndicator.js";
+
+const predefinedHooks: Partial<MenuItemHooks> = {
+	listItemContent,
+	iconBegin,
+	iconEnd,
+	listItemPostContent: () => {},
+};
+
+export default function NavigationMenuItemTemplate(this: NavigationMenuItem, hooks?: Partial<MenuItemHooks>) {
+	const currentHooks = { ...predefinedHooks, ...hooks, };
+
+	return <>
+		this._href ? (
+		<a role="treeitem"
+			class="ui5-navmenu-item-link"
+			href={this.href}
+			target={this.target}
+		>
+			{MenuItemTemplate.call(this, currentHooks)}
+		</a>
+		) : MenuItemTemplate.call(this, currentHooks);
+
+		{listItemPostContent.call(this)}
+	</>;
+}
+
+function listItemContent(this: NavigationMenuItem) {
+	return <>{this.text}</>;
+}
+
+function iconBegin(this: NavigationMenuItem) {
+	if (this.hasIcon) {
+		return <Icon part="icon"
+			class="ui5-li-icon"
+			name={this.icon}
+		/>;
+	}
+
+	if (this._siblingsWithIcon) {
+		return <div class="ui5-menu-item-dummy-icon"></div>;
+	}
+}
+
+function iconEnd(this: NavigationMenuItem) {
+	if (this.hasSubmenu) {
+		return <Icon
+			part="icon"
+			name={slimArrowRightIcon}
+			class="ui5-menu-item-icon-end"
+		/>;
+	}
+
+	if (this.href) {
+		return <Icon
+			class="ui5-sn-item-external-link-icon"
+			name={arrowRightIcon}
+		/>;
+	}
+}
+
+function listItemPostContent(this: NavigationMenuItem) {
+	return this.hasSubmenu && <ResponsivePopover
+		id={`${this._id}-navigation-menu-rp`}
+		class="ui5-menu-rp ui5-navigation-menu ui5-menu-rp-sub-menu"
+		verticalAlign="Center"
+		preventInitialFocus
+		preventFocusRestore
+		accessibleNameRef={`${this._id}-navigationMenuPopoverText`}
+		onBeforeOpen={this._beforePopoverOpen}
+		onOpen={this._afterPopoverOpen}
+		onBeforeClose={this._beforePopoverClose}
+		onClose={this._afterPopoverClose}
+	>
+		<span id={`${this._id}-navigationMenuPopoverText`} class="ui5-hidden-text">{this.accSideNavigationPopoverHiddenText}</span>
+
+		{this.isPhone && (
+			<div slot="header" class="ui5-menu-dialog-header">
+				{this.isSubMenuOpen && (
+					<Button
+						icon={navBackIcon}
+						class="ui5-menu-back-button"
+						design="Transparent"
+						aria-label={this.labelBack}
+						onClick={this._close}
+					/>
+				)}
+
+				<div class="ui5-menu-dialog-title">
+					<div>
+						{this.menuHeaderTextPhone}
+					</div>
+				</div>
+
+				<Button
+					icon={declineIcon}
+					design="Transparent"
+					aria-label={this.labelClose}
+					onClick={this._closeAll}
+				/>
+			</div>
+		)}
+
+		<div id={`${this._id}-menu-main`} class="ui5-navigation-menu-main">
+			{this.items.length ? (
+				<List
+					accessibleRole="Tree"
+					id={`${this.id}-menu-list`}
+					selectionMode="None"
+					loading={this.loading}
+					loadingDelay={this.loadingDelay}
+					separators="None"
+					// handles event from slotted children
+					onui5-close-menu={this._close}
+				>
+					<slot></slot>
+				</List>
+			) : (
+				this.loading && (
+					<BusyIndicator
+						id={`${this._id}-menu-busy-indicator`}
+						delay={this.loadingDelay}
+						class="ui5-menu-busy-indicator"
+						active={true}
+					/>
+				)
+			)}
+		</div>
+
+	</ResponsivePopover >;
+}