@ui5/webcomponents-fiori 2.5.0-rc.3 → 2.6.0-rc.0

package/src/SideNavigationItemTemplate.tsx

@@ -0,0 +1,167 @@
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import navRightArrow from "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+import navDownArrow from "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import circleTask from "@ui5/webcomponents-icons/dist/circle-task-2.js";
+import arrowRight from "@ui5/webcomponents-icons/dist/arrow-right.js";
+import type SideNavigationItem from "./SideNavigationItem.js";
+
+export default function SideNavigationItemTemplate(this: SideNavigationItem) {
+	if (this.sideNavCollapsed) {
+		return MenuItemTemplate.call(this);
+	}
+	return TreeItemTemplate.call(this);
+}
+
+function MenuItemTemplate(this: SideNavigationItem) {
+	return (<>
+		{this._href ?
+			<a id={this._id}
+				class={`ui5-sn-item ui5-sn-item-level1 ${this._classes}`}
+				role={this.ariaRole}
+				data-sap-focus-ref
+				onKeyDown={this._onkeydown}
+				onKeyUp={this._onkeyup}
+				onClick={this._onclick}
+				onFocusIn={this._onfocusin}
+				onFocusOut={this._onfocusout}
+				onMouseEnter={this._onmouseenter}
+				onMouseLeave={this._onmouseleave}
+				tabIndex={this.effectiveTabIndex !== undefined ? parseInt(this.effectiveTabIndex) : undefined}
+				aria-haspopup={this._ariaHasPopup}
+				aria-checked={this._ariaChecked}
+				title={this._tooltip}
+				href={this._href}
+				target={this._target}
+			>
+				<Icon class="ui5-sn-item-icon" name={this.icon}/>
+				<div class="ui5-sn-item-text">{this.text}</div>
+				{!!this.items.length &&
+					<Icon class="ui5-sn-item-toggle-icon"
+						name={navRightArrow}
+					/>
+				}
+				{this.isExternalLink &&
+					<Icon class="ui5-sn-item-external-link-icon"
+						name={arrowRight}
+					/>
+				}
+			</a>
+			:
+			<div id={this._id}
+				class={`ui5-sn-item ui5-sn-item-level1 ${this._classes}`}
+				role={this.ariaRole}
+				data-sap-focus-ref
+				onKeyDown={this._onkeydown}
+				onKeyUp={this._onkeyup}
+				onClick={this._onclick}
+				onFocusIn={this._onfocusin}
+				onFocusOut={this._onfocusout}
+				onMouseEnter={this._onmouseenter}
+				onMouseLeave={this._onmouseleave}
+				tabIndex={this.effectiveTabIndex !== undefined ? parseInt(this.effectiveTabIndex) : undefined}
+				aria-haspopup={this._ariaHasPopup}
+				aria-checked={this._ariaChecked}
+				title={this._tooltip}
+			>
+				<Icon class="ui5-sn-item-icon" name={this.icon}/>
+				<div class="ui5-sn-item-text">{this.text}</div>
+				{!!this.items.length &&
+					<Icon class="ui5-sn-item-toggle-icon"
+						name={navRightArrow}
+					/>
+				}
+				{this.isExternalLink &&
+					<Icon class="ui5-sn-item-external-link-icon"
+						name={arrowRight}
+					/>
+				}
+			</div>
+		}
+	</>);
+}
+
+function TreeItemTemplate(this: SideNavigationItem) {
+	return (
+		<li id={this._id} class="ui5-sn-list-li" role="none">
+			{this._href ?
+				<a class={`ui5-sn-item ui5-sn-item-level1 ${this._classes}`}
+					role={this.ariaRole}
+					data-sap-focus-ref
+					onKeyDown={this._onkeydown}
+					onKeyUp={this._onkeyup}
+					onClick={this._onclick}
+					onFocusIn={this._onfocusin}
+					tabIndex={this.effectiveTabIndex !== undefined ? parseInt(this.effectiveTabIndex) : undefined}
+					aria-expanded={this._expanded}
+					aria-current={this._ariaCurrent}
+					aria-selected={this.selected}
+					title={this._tooltip}
+					aria-owns={this._groupId}
+					href={this._href}
+					target={this._target}
+				>
+					{this.icon &&
+					<Icon class="ui5-sn-item-icon" name={this.icon}/>
+					}
+					<div class="ui5-sn-item-text">{this.text}</div>
+					<Icon class="ui5-sn-item-selection-icon"
+						name={circleTask}
+					/>
+					{this.isExternalLink &&
+					<Icon class="ui5-sn-item-external-link-icon"
+						name={arrowRight}
+					/>
+					}
+					{!!this.items.length &&
+					<Icon class="ui5-sn-item-toggle-icon"
+						name={this.expanded ? navDownArrow : navRightArrow}
+						onui5-click={this._onToggleClick}
+					/>
+					}
+				</a>
+				:
+				<div class={`ui5-sn-item ui5-sn-item-level1 ${this._classes}`}
+					role={this.ariaRole}
+					data-sap-focus-ref
+					onKeyDown={this._onkeydown}
+					onKeyUp={this._onkeyup}
+					onClick={this._onclick}
+					onFocusIn={this._onfocusin}
+					tabIndex={this.effectiveTabIndex !== undefined ? parseInt(this.effectiveTabIndex) : undefined}
+					aria-expanded={this._expanded}
+					aria-current={this._ariaCurrent}
+					aria-selected={this.selected}
+					title={this._tooltip}
+					aria-owns={this._groupId}
+				>
+					{this.icon &&
+					<Icon class="ui5-sn-item-icon" name={this.icon}/>
+					}
+					<div class="ui5-sn-item-text">{this.text}</div>
+					<Icon class="ui5-sn-item-selection-icon"
+						name={circleTask}
+					/>
+					{this.isExternalLink &&
+					<Icon class="ui5-sn-item-external-link-icon"
+						name={arrowRight}
+					/>
+					}
+					{!!this.items.length &&
+					<Icon class="ui5-sn-item-toggle-icon"
+						name={this.expanded ? navDownArrow : navRightArrow}
+						onui5-click={this._onToggleClick}
+					/>
+					}
+				</div>
+			}
+			{!!this.items.length &&
+			<ul id={this._groupId}
+				class="ui5-sn-item-ul"
+				role="group"
+			>
+				<slot></slot>
+			</ul>
+			}
+		</li>
+	);
+}

package/src/SideNavigationPopoverTemplate.tsx

@@ -0,0 +1,88 @@
+import NavigationMenu from "@ui5/webcomponents/dist/NavigationMenu.js";
+import NavigationMenuItem from "@ui5/webcomponents/dist/NavigationMenuItem.js";
+import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import SideNavigation from "./SideNavigation.js";
+import SideNavigationItem from "./SideNavigationItem.js";
+import SideNavigationSubItem from "./SideNavigationSubItem.js";
+
+export default function SideNavigationTemplate(this: SideNavigation) {
+	return (<>
+		<NavigationMenu
+			id={`${this._id}-side-navigation-overflow-menu`}
+			onBeforeOpen={this._onBeforeMenuOpen}
+			onBeforeClose={this._onBeforeMenuClose}
+			onui5-item-click={this.handleOverflowItemClick} // TOFIX
+			class="ui5-side-navigation-popover ui5-side-navigation-overflow-menu"
+		>
+			{this._menuPopoverItems.map(item =>
+				<NavigationMenuItem
+					text={item.text}
+					icon={item.icon}
+					disabled={item.disabled}
+					// expanded={true}
+					href={item.href}
+					target={item.target}
+					title={item.title}
+					ref={this.captureRef.bind(item)}
+				>
+					{item.items.map(subItem =>
+						<NavigationMenuItem
+							text={subItem.text}
+							icon={subItem.icon}
+							disabled={subItem.disabled}
+							ref={this.captureRef.bind(subItem)}
+							// expanded={true}
+							href={subItem.href}
+							target={subItem.target}
+							title={subItem.title}
+						/>
+					)}
+				</NavigationMenuItem>
+			)}
+		</NavigationMenu>
+		<ResponsivePopover
+			verticalAlign="Top"
+			class="ui5-side-navigation-popover"
+			accessibleNameRef={`${this._id}-sideNavigationPopoverText`}
+			onOpen={this._onAfterPopoverOpen}
+			onBeforeOpen={this._onBeforePopoverOpen}
+			onBeforeClose={this._onBeforePopoverClose}
+		>
+			{this._popoverContents && <>
+				<span id={`${this._id}-sideNavigationPopoverText`}
+					class="ui5-hidden-text"
+				>{this.accSideNavigationPopoverHiddenText}</span>
+				<SideNavigation
+					inPopover={true}
+					class="ui5-side-navigation-in-popover"
+				>
+					<SideNavigationItem
+						text={this._popoverContents.item.text}
+						tooltip={this._popoverContents.item._tooltip}
+						href={this._popoverContents.item._href}
+						target={this._popoverContents.item._target}
+						disabled={this._popoverContents.item.disabled}
+						// expanded={true}
+						_fixed={true}
+						selected={this._popoverContents.item.selected}
+						onui5-click={this.handlePopupItemClick}
+						ref={this.captureRef.bind(this._popoverContents.item)}
+					>
+						{this._popoverContents.subItems.map(item =>
+							<SideNavigationSubItem
+								text={item.text}
+								tooltip={item._tooltip}
+								href={item._href}
+								target={item._target}
+								disabled={item.disabled}
+								selected={item.selected}
+								onui5-click={this.handlePopupItemClick}
+								ref={this.captureRef.bind(item)}
+							/>
+						)}
+					</SideNavigationItem>
+				</SideNavigation>
+			</>}
+		</ResponsivePopover>
+	</>);
+}

package/src/SideNavigationSubItemTemplate.tsx

@@ -0,0 +1,70 @@
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import circleTask from "@ui5/webcomponents-icons/dist/circle-task-2.js";
+import arrowRight from "@ui5/webcomponents-icons/dist/arrow-right.js";
+import type SideNavigationSubItem from "./SideNavigationSubItem.js";
+
+export default function SideNavigationSubItemTemplate(this: SideNavigationSubItem) {
+	if (this.sideNavCollapsed) {
+		return <></>;
+	}
+
+	return (
+		<li id={this._id} class="ui5-sn-list-li" role="none">
+			{this._href ?
+				<a class={`ui5-sn-item ui5-sn-item-level2 ${this._classes}`}
+					role="treeitem"
+					data-sap-focus-ref
+					onKeyDown={this._onkeydown}
+					onKeyUp={this._onkeyup}
+					onClick={this._onclick}
+					onFocusIn={this._onfocusin}
+					tabIndex={this.effectiveTabIndex ? parseInt(this.effectiveTabIndex) : undefined}
+					aria-current={this._ariaCurrent}
+					aria-selected={this.selected}
+					title={this._tooltip}
+					href={this._href}
+					target={this._target}
+				>
+					{this.icon &&
+						<Icon class="ui5-sn-item-icon" name={this.icon}/>
+					}
+					<div class="ui5-sn-item-text">{this.text}</div>
+					<Icon class="ui5-sn-item-selection-icon"
+						name={circleTask}
+					/>
+					{this.isExternalLink &&
+						<Icon class="ui5-sn-item-external-link-icon"
+							name={arrowRight}
+						/>
+					}
+				</a>
+				:
+				<div class={`ui5-sn-item ui5-sn-item-level2 ${this._classes}`}
+					role="treeitem"
+					data-sap-focus-ref
+					onKeyDown={this._onkeydown}
+					onKeyUp={this._onkeyup}
+					onClick={this._onclick}
+					onFocusIn={this._onfocusin}
+					tabIndex={this.effectiveTabIndex ? parseInt(this.effectiveTabIndex) : undefined}
+					aria-current={this._ariaCurrent}
+					aria-selected={this.selected}
+					title={this._tooltip}
+				>
+					{this.icon &&
+						<Icon class="ui5-sn-item-icon" name={this.icon}/>
+					}
+					<div class="ui5-sn-item-text">{this.text}</div>
+					<Icon class="ui5-sn-item-selection-icon"
+						name={circleTask}
+					/>
+					{this.isExternalLink &&
+						<Icon class="ui5-sn-item-external-link-icon"
+							name={arrowRight}
+						/>
+					}
+				</div>
+			}
+		</li>
+	);
+}

package/src/SideNavigationTemplate.tsx

@@ -0,0 +1,70 @@
+import overflow from "@ui5/webcomponents-icons/dist/overflow.js";
+import type SideNavigation from "./SideNavigation.js";
+import SideNavigationItem from "./SideNavigationItem.js";
+import SideNavigationPopoverTemplate from "./SideNavigationPopoverTemplate.js";
+
+export default function SideNavigationTemplate(this: SideNavigation) {
+	return (<>
+		<nav class={{
+			"ui5-sn-root": true,
+			"ui5-sn-collapsed": this.collapsed,
+		}}
+		role={this._rootRole}
+		>
+			{header.call(this)}
+
+			{this.collapsed ?
+				<div role="menubar"
+					class="ui5-sn-list ui5-sn-flexible"
+					aria-orientation="vertical"
+					aria-roledescription={this.ariaRoleDescNavigationList}
+				>
+					<slot></slot>
+					<SideNavigationItem
+						isOverflow={true}
+						id={`${this._id}-sn-overflow-item`}
+						text={this.overflowAccessibleName}
+						onClick={this._handleOverflowClick}
+						class="ui5-sn-item-overflow"
+						sideNavCollapsed={true}
+						icon={overflow}
+					/>
+				</div>
+				:
+				<ul role="tree"
+					class="ui5-sn-list ui5-sn-flexible"
+					aria-roledescription={this.ariaRoleDescNavigationList}
+				>
+					<slot></slot>
+				</ul>
+			}
+
+			{this.hasFixedItems && <>
+				<div role="separator" class="ui5-sn-spacer"></div>
+				{this.collapsed ?
+					<div role="menubar"
+						class="ui5-sn-list ui5-sn-fixed"
+						aria-orientation="vertical"
+						aria-roledescription={this.ariaRoleDescNavigationList}
+					>
+						<slot name="fixedItems"></slot>
+					</div>
+					:
+					<ul role="tree"
+						class="ui5-sn-list ui5-sn-fixed"
+						aria-roledescription={this.ariaRoleDescNavigationList}
+					>
+						<slot name="fixedItems"></slot>
+					</ul>
+				}
+			</>}
+		</nav>
+		{SideNavigationPopoverTemplate.call(this)}
+	</>);
+}
+
+function header(this: SideNavigation) {
+	return this.showHeader ? (
+		<slot name="header"></slot>
+	) : undefined;
+}

package/src/TimelineGroupItemTemplate.tsx

@@ -0,0 +1,34 @@
+import type TimelineGroupItem from "./TimelineGroupItem.js";
+import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
+
+export default function TimelineGroupItemTemplate(this: TimelineGroupItem) {
+	return (
+		<div class="ui5-tlgi-root">
+			<div class="ui5-tlgi-btn-root">
+				<div class="ui5-tlgi-icon-placeholder">
+					<div class="ui5-tlgi-icon-dot"></div>
+				</div>
+
+				<div class="ui5-tlgi-line-placeholder">
+					<div class="ui5-tlgi-line"></div>
+				</div>
+
+				<ToggleButton
+					class="ui5-tlgi-btn"
+					icon={this._groupItemIcon}
+					pressed={this.collapsed}
+					onClick={this.onGroupItemClick}
+				>
+					{this.groupName}
+				</ToggleButton>
+			</div>
+			<ul class="ui5-tl-group-item">
+				{this.items.map(item =>
+					<li class="ui5-timeline-group-list-item">
+						<slot name={item._individualSlot}></slot>
+					</li>
+				)}
+			</ul>
+		</div>
+	);
+}

package/src/TimelineItemTemplate.tsx

@@ -0,0 +1,71 @@
+import type TimelineItem from "./TimelineItem.js";
+import Link from "@ui5/webcomponents/dist/Link.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import TimelineLayout from "./types/TimelineLayout.js";
+
+export default function TimelineItemTemplate(this: TimelineItem) {
+	return (
+		<div class="ui5-tli-root">
+			<div
+				class={{
+					"ui5-tli-indicator": true,
+					"ui5-tli-indicator-short-line": this.forcedLineWidth === "ShortLineWidth",
+					"ui5-tli-indicator-large-line": this.forcedLineWidth === "LargeLineWidth",
+				}}
+			>
+				<div class="ui5-tli-icon-outer">
+					{
+						this.icon ?
+							<Icon class="ui5-tli-icon" name={this.icon}/>
+							:
+							<div class="ui5-tli-dummy-icon-container"></div>
+					}
+				</div>
+			</div>
+
+			{!this.hideBubble &&
+				<div
+					data-sap-focus-ref
+					class="ui5-tli-bubble"
+					tabindex={parseInt(this.forcedTabIndex)}
+				>
+					<div class="ui5-tli-title">
+						{ this.name && name.call(this) }
+						<span>{this.titleText}</span>
+					</div>
+
+					<div class="ui5-tli-subtitle">{this.subtitleText}</div>
+
+					{this.content &&
+						<div class="ui5-tli-desc">
+							<slot></slot>
+						</div>
+					}
+					<span class={{
+						"ui5-tli-bubble-arrow": true,
+						"ui5-tli-bubble-arrow--left": this.layout === TimelineLayout.Vertical,
+						"ui5-tli-bubble-arrow--top": this.layout === TimelineLayout.Horizontal,
+					}}></span>
+				</div>
+			}
+		</div>
+	);
+}
+
+function name(this: TimelineItem) {
+	return (
+		<>
+			{this.nameClickable ?
+				<Link
+					class="ui5-tli-title-name-clickable"
+					wrappingType="None"
+					onClick={this.onNamePress}
+				>
+					{this.name}&nbsp;
+				</Link>
+				:
+				<span class="ui5-tli-title-name">{this.name}&nbsp;</span>
+			}
+		</>
+	);
+}

package/src/TimelineTemplate.tsx

@@ -0,0 +1,20 @@
+import type Timeline from "./Timeline.js";
+
+export default function TimelineTemplate(this: Timeline) {
+	return (
+		<div class="ui5-timeline-root"
+			onFocusIn={this._onfocusin}
+			onKeyDown={this._onkeydown}>
+
+			<div class="ui5-timeline-scroll-container">
+				<ul class="ui5-timeline-list" aria-live="polite" aria-label={this.ariaLabel}>
+					{this.items.map(item =>
+						<li class="ui5-timeline-list-item">
+							<slot name={item._individualSlot}></slot>
+						</li>
+					)}
+				</ul>
+			</div>
+		</div>
+	);
+}

package/src/UploadCollectionItemTemplate.tsx

@@ -0,0 +1,142 @@
+import Input from "@ui5/webcomponents/dist/Input.js";
+import type UploadCollectionItem from "./UploadCollectionItem.js";
+import type { ListItemHooks } from "@ui5/webcomponents/dist/ListItemTemplate.js";
+import ListItemTemplate from "@ui5/webcomponents/dist/ListItemTemplate.js";
+import Link from "@ui5/webcomponents/dist/Link.js";
+import ProgressIndicator from "@ui5/webcomponents/dist/ProgressIndicator.js";
+import Label from "@ui5/webcomponents/dist/Label.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import refreshIcon from "@ui5/webcomponents-icons/dist/refresh.js";
+import stopIcon from "@ui5/webcomponents-icons/dist/stop.js";
+import editIcon from "@ui5/webcomponents-icons/dist/edit.js";
+import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
+
+const predefinedHooks: Partial<ListItemHooks> = {
+	listItemContent,
+};
+
+export default function UploadCollectionItemTemplate(this: UploadCollectionItem, hooks?: Partial<ListItemHooks>) {
+	const currentHooks = { ...predefinedHooks, ...hooks };
+
+	return ListItemTemplate.call(this, currentHooks);
+}
+
+function listItemContent(this: UploadCollectionItem) {
+	return <>
+		<div class="ui5-uci-thumbnail-and-content-container">
+			<div class="ui5-uci-thumbnail">
+				<slot name="thumbnail"></slot>
+			</div>
+			<div class="ui5-uci-content-and-progress">
+				<div class="ui5-uci-content">
+
+					{this._editing ? (
+						<div class="ui5-uci-edit-container">
+							<Input
+								id="ui5-uci-edit-input"
+								data-sap-focus-ref
+								onFocusIn={this._onInputFocusin}
+								onKeyDown={this._onInputKeyDown}
+							/>
+							<span class="ui5-uci-file-extension">{this._fileExtension}</span>
+						</div>
+					) : (
+
+						this.fileNameClickable ? (
+							<Link
+								class="ui5-uci-file-name"
+								onClick={this._onFileNameClick}
+								wrappingType="None"
+							>{this.fileName}</Link>
+						) : (
+							<span class="ui5-uci-file-name ui5-uci-file-name-text">{this.fileName}</span>
+						)
+					)}
+					<div class="ui5-uci-description">
+						<slot></slot>
+					</div>
+				</div >
+				{this._showProgressIndicator && (
+					<div class="ui5-uci-progress-box">
+						<ProgressIndicator
+							class="ui5-uci-progress-indicator"
+							hideValue={true}
+							value={this.progress}
+							valueState={this.valueStateName}
+						/>
+						<div class="ui5-uci-progress-labels">
+							<Label showColon wrappingType="None">{this._progressText}</Label>
+							<Label>{this.progress}%</Label>
+						</div>
+					</div>
+				)}
+			</div >
+		</div >
+
+		<div class="ui5-uci-buttons">
+			{this._editing ? (
+				<>
+					<Button
+						design="Transparent"
+						class="ui5-uci-edit-rename-btn"
+						onClick={this._onRename}
+						onKeyUp={this._onRenameKeyup}
+					>
+						{this._renameBtnText}
+					</Button>
+					<Button
+						design="Transparent"
+						id="ui5-uci-edit-cancel"
+						onClick={this._onRenameCancel}
+						onKeyUp={this._onRenameCancelKeyup}
+					>
+						{this._cancelRenameBtnText}
+					</Button>
+				</>
+			) : (
+				<>
+					{this._showRetry && (
+						<Button
+							icon={refreshIcon}
+							design="Transparent"
+							tooltip={this._retryButtonTooltip}
+							onClick={this._onRetry}
+							onKeyUp={this._onRetryKeyup}
+						/>
+					)}
+					{this._showTerminate && (
+						<Button
+							icon={stopIcon}
+							design="Transparent"
+							tooltip={this._terminateButtonTooltip}
+							onClick={this._onTerminate}
+							onKeyUp={this._onTerminateKeyup}
+						/>
+					)}
+					{this.showEditButton && (
+						<Button
+							id={`${this._id}-editing-button`}
+							design="Transparent"
+							tooltip={this._editButtonTooltip}
+							icon={editIcon}
+							onClick={this.onDetailClick}
+							onKeyUp={this._onDetailKeyup}
+							class="ui5-li-detailbtn ui5-uci-edit"
+						/>
+					)}
+					{!this.hideDeleteButton && (
+						<Button
+							class="ui5-upload-collection-deletebtn"
+							id={`${this._id}-deleteSelectionElement`}
+							design="Transparent"
+							icon={declineIcon}
+							disabled={this.disableDeleteButton}
+							onClick={this._onDelete}
+							tooltip={this.deleteText}
+						/>
+					)}
+				</>
+			)}
+		</div>
+	</>;
+}