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

package/src/BarcodeScannerDialogTemplate.tsx

@@ -0,0 +1,38 @@
+import Dialog from "@ui5/webcomponents/dist/Dialog.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import type BarcodeScannerDialog from "./BarcodeScannerDialog.js";
+
+export default function BarcodeScannerDialogTemplate(this: BarcodeScannerDialog) {
+	return (<>
+		<Dialog
+			stretch={true}
+			class="ui5-barcode-scanner-dialog-root"
+			open={this._open}
+			onClose={this._closeDialog}
+		>
+			<slot name="header"></slot>
+			<div class="ui5-barcode-scanner-dialog-video-wrapper">
+				<video
+					autoplay={true}
+					playsinline={true}
+					muted={true}
+					class="ui5-barcode-scanner-dialog-video"
+				></video>
+				<canvas class="ui5-barcode-scanner-dialog-overlay"></canvas>
+			</div>
+			<slot name="footer" class="ui5-barcode-scanner-dialog-footer">
+				<Button
+					design="Transparent"
+					onClick={this._closeDialog}
+				>{this._cancelButtonText}</Button>
+			</slot>
+		</Dialog>
+		<BusyIndicator
+			class="ui5-barcode-scanner-dialog-busy"
+			active={this.loading}
+			size="L"
+			text={this._busyIndicatorText}
+		/>
+	</>);
+}

package/src/DynamicPageHeaderActionsTemplate.tsx

@@ -0,0 +1,33 @@
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
+import type DynamicPageHeaderActions from "./DynamicPageHeaderActions.js";
+
+export default function DynamicPageHeaderActionsTemplate(this: DynamicPageHeaderActions) {
+	return (
+		<div class="ui5-dynamic-page-header-actions-root">
+			<div class="ui5-dynamic-page-header-actions--wrapper">
+				<Button
+					class="ui5-dynamic-page-header-action ui5-dynamic-page-header-action-expand"
+					onClick={this.onExpandClick}
+					icon={this.arrowButtonIcon}
+					accessibleName={this.expandLabel}
+					accessibilityAttributes={this.accessibilityAttributes}
+					tooltip={this.expandLabel}
+					onMouseOver={this.onExpandHoverIn}
+					onMouseOut={this.onExpandHoverOut}
+				/>
+				{this.showPinButton &&
+					<ToggleButton
+						class="ui5-dynamic-page-header-action ui5-dynamic-page-header-action-pin"
+						onClick={this.onPinClick}
+						icon={this.pinButtonIcon}
+						pressed={this.pinned}
+						accessibilityAttributes={this.accessibilityAttributes}
+						accessibleName={this.pinLabel}
+						tooltip={this.pinLabel}
+					/>
+				}
+			</div>
+		</div>
+	);
+}

package/src/DynamicPageHeaderTemplate.tsx

@@ -0,0 +1,9 @@
+import type DynamicPageHeader from "./DynamicPageHeader.js";
+
+export default function DynamicPageHeaderTemplate(this: DynamicPageHeader) {
+	return (
+		<div class="ui5-dynamic-page-header-root" role="region">
+			<slot></slot>
+		</div>
+	);
+}

package/src/DynamicPageTemplate.tsx

@@ -0,0 +1,69 @@
+import type DynamicPage from "./DynamicPage.js";
+import DynamicPageHeaderActions from "./DynamicPageHeaderActions.js";
+
+export default function DynamicPageTemplate(this: DynamicPage) {
+	return (
+		<div class="ui5-dynamic-page-root">
+			<div class="ui5-dynamic-page-scroll-container"
+				onScroll={this.snapOnScroll}
+			>
+				<header
+					class="ui5-dynamic-page-title-header-wrapper"
+					id={`${this._id}-header`}
+					aria-label={this._headerLabel}
+					aria-expanded={this._headerExpanded}
+					onui5-toggle-title={this.onToggleTitle}
+				>
+					<slot name="titleArea"></slot>
+					{this.headerInTitle &&
+						<slot tabIndex={this.headerTabIndex}
+							aria-hidden={this.headerAriaHidden}
+							name="headerArea"
+						></slot>
+					}
+
+					{this.actionsInTitle && headerActions.call(this)}
+				</header>
+
+				{this.headerInContent &&
+					<slot tabIndex={this.headerTabIndex}
+						aria-hidden={this.headerAriaHidden}
+						name="headerArea"
+					></slot>
+				}
+
+				{!this.actionsInTitle && headerActions.call(this)}
+
+				<div class="ui5-dynamic-page-content" part="content">
+					<div class="ui5-dynamic-page-fit-content" part="fit-content">
+						<slot></slot>
+						{this.showFooter &&
+							<div class="ui5-dynamic-page-spacer"></div>
+						}
+					</div>
+				</div>
+			</div>
+
+			<div class="ui5-dynamic-page-footer" part="footer">
+				<slot name="footerArea"></slot>
+			</div>
+		</div>
+	);
+}
+
+function headerActions(this: DynamicPage) {
+	if (!this.hasSnappedTitleOnMobile && this.hasHeading) {
+		return (
+			<DynamicPageHeaderActions
+				snapped={this.headerSnapped}
+				pinned={this.headerPinned}
+				hidePinButton={this.hidePinButton}
+				accessibilityAttributes={this._accAttributesForHeaderActions}
+				onui5-expand-button-click={this.onExpandClick}
+				onui5-pin-button-click={this.onPinClick}
+				onui5-expand-button-hover-in={this.onExpandHoverIn}
+				onui5-expand-button-hover-out={this.onExpandHoverOut}
+			/>
+		);
+	}
+}

package/src/DynamicPageTitleTemplate.tsx

@@ -0,0 +1,75 @@
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import type DynamicPageTitle from "./DynamicPageTitle.js";
+import slimArrowDownIcon from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+
+export default function DynamicPageTitleTemplate(this: DynamicPageTitle) {
+	return (
+		<div class="ui5-dynamic-page-title-root">
+			<span class="ui5-dynamic-page-title-focus-area"
+				data-sap-focus-ref
+				tabIndex={this._tabIndex}
+				onKeyDown={this._onkeydown}
+				onClick={this.onTitleClick}
+				role="button"
+				aria-expanded={this._headerExpanded}
+				aria-labelledby={this._ariaLabelledBy}
+				aria-describedby={`${this._id}-toggle-description`}
+			></span>
+
+			{this.hasSnappedTitleOnMobile ?
+				<div id={`${this._id}-heading`}
+					 class="ui5-dynamic-page--snapped-title-on-mobile"
+				>
+					<slot name="snappedTitleOnMobile"></slot>
+					<Icon name={slimArrowDownIcon} mode="Decorative" />
+				</div>
+				: <>
+					<div class="ui5-dynamic-page-title--top-area">
+						<slot name="breadcrumbs"></slot>
+
+						{this.mobileNavigationActions &&
+						<slot name="navigationBar"></slot>
+						}
+					</div>
+					<div class="ui5-dynamic-page-title--wrapper"
+						onui5-_min-content-width-change={this.onMinContentWidthChange}
+					>
+						<div id={`${this._id}-heading`}
+						 class="ui5-dynamic-page-title--heading"
+						>
+							<slot name={this.headingSlotName}></slot>
+						</div>
+
+						{this.hasContent &&
+						<div class="ui5-dynamic-page-title--content"
+							style={{
+								"min-width": this.minContentWidth ? `${this.minContentWidth || 0}px` : undefined,
+							}}
+						>
+							<slot></slot>
+						</div>
+						}
+
+						<div class="ui5-dynamic-page-title--actions"
+							style={{
+								"min-width": this.minActionsWidth ? `${this.minActionsWidth || 0}px` : undefined,
+							}}
+						>
+							<slot name="actionsBar"></slot>
+							{!this.mobileNavigationActions && <>
+								{this._needsSeparator &&
+								<div class="ui5-dynamic-page-title--actions-separator"></div>
+								}
+								<slot name="navigationBar"></slot>
+							</>}
+						</div>
+					</div>
+					<slot name={this.subheadingSlotName}></slot>
+				</>}
+
+			<span id={`${this._id}-toggle-description`}
+				class="ui5-hidden-text"
+			>{this._ariaDescribedbyText}</span>
+		</div>
+	);
+}

package/src/DynamicSideContentTemplate.tsx

@@ -0,0 +1,46 @@
+import type DynamicSideContent from "./DynamicSideContent.js";
+
+export default function DynamicSideContentTemplate(this: DynamicSideContent) {
+	return (
+		<div
+			class="ui5-dsc-root"
+			style={this.styles.root}
+		>
+			{this._isSideContentFirst ?
+				<>
+					{ sideContent.call(this) }
+					{ mainContent.call(this) }
+				</>
+				:
+				<>
+					{ mainContent.call(this) }
+					{ sideContent.call(this) }
+				</>
+			}
+		</div>
+	);
+}
+
+function mainContent(this: DynamicSideContent) {
+	return (
+		<div
+			class={this.classes.main}
+			style={this.styles.main}
+		>
+			<slot></slot>
+		</div>
+	);
+}
+
+function sideContent(this: DynamicSideContent) {
+	return (
+		<aside
+			role="complementary"
+			aria-label={this.accInfo.label}
+			class={this.classes.side}
+			style={this.styles.side}
+		>
+			<slot name="sideContent"></slot>
+		</aside>
+	);
+}

package/src/FlexibleColumnLayoutTemplate.tsx

@@ -0,0 +1,103 @@
+import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
+import { getAnimationMode } from "@ui5/webcomponents-base/dist/InitialConfiguration.js";
+import verticalGrip from "@ui5/webcomponents-icons/dist/vertical-grip.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import type FlexibleColumnLayout from "./FlexibleColumnLayout.js";
+
+export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout) {
+	const hasAnimation = getAnimationMode() !== AnimationMode.None;
+
+	return (
+		<div class="ui5-fcl-root">
+			<div
+				role={this._accAttributes.columns.start.role}
+				class={{
+					"ui5-fcl-column": true,
+					"ui5-fcl-column-animation": hasAnimation,
+					"ui5-fcl-column--start": true,
+				}}
+				aria-hidden={this._accAttributes.columns.start.ariaHidden}
+				aria-labelledby={`${this._id}-startColumnText`}
+			>
+				<span id={`${this._id}-startColumnText`} class="ui5-hidden-text">{this.accStartColumnText}</span>
+				<slot name="startColumn" aria-hidden={this._accAttributes.columns.middle.ariaHidden}></slot>
+			</div>
+
+			<div
+				role={this.accStartSeparatorRole}
+				title={this.accStartSeparatorText}
+				class="ui5-fcl-separator ui5-fcl-separator-start"
+				style={{ display: this.showStartSeparator ? "flex" : "none" }}
+				tabindex={this.startSeparatorTabIndex}
+				onMouseDown={this.onSeparatorPress}
+				onTouchStart={this.onSeparatorPress}
+				onKeyDown={this._onkeydown}
+				onKeyUp={this._onkeyup}
+			>
+				{ gripStart.call(this) }
+			</div>
+
+			<div
+				role={this._accAttributes.columns.middle.role}
+				class={{
+					"ui5-fcl-column": true,
+					"ui5-fcl-column-animation": hasAnimation,
+					"ui5-fcl-column--middle": true,
+				}}
+				aria-hidden={this._accAttributes.columns.middle.ariaHidden}
+				aria-labelledby={`${this._id}-midColumnText`}
+			>
+				<span id={`${this._id}-midColumnText`} class="ui5-hidden-text">{this.accMiddleColumnText}</span>
+				<slot name="midColumn" aria-hidden={this._accAttributes.columns.middle.ariaHidden}></slot>
+			</div>
+
+			<div
+				role={this.accEndSeparatorRole}
+				title={this.accEndSeparatorText}
+				class="ui5-fcl-separator ui5-fcl-separator-end"
+				style={{ display: this.showEndSeparator ? "flex" : "none" }}
+				tabindex={this.endSeparatorTabIndex}
+				onMouseDown={this.onSeparatorPress}
+				onTouchStart={this.onSeparatorPress}
+				onKeyDown={this._onkeydown}
+				onKeyUp={this._onkeyup}
+			>
+				{ gripEnd.call(this) }
+			</div>
+
+			<div
+				role={this._accAttributes.columns.end.role}
+				class={{
+					"ui5-fcl-column": true,
+					"ui5-fcl-column-animation": hasAnimation,
+					"ui5-fcl-column--end": true,
+				}}
+				aria-hidden={this._accAttributes.columns.end.ariaHidden}
+				aria-labelledby={`${this._id}-endColumnText`}
+			>
+				<span id={`${this._id}-endColumnText`} class="ui5-hidden-text">{this.accEndColumnText}</span>
+				<slot name="endColumn" aria-hidden={this._accAttributes.columns.middle.ariaHidden}></slot>
+			</div>
+		</div>
+	);
+}
+
+function gripStart(this: FlexibleColumnLayout) {
+	return (
+		<Icon
+			name={verticalGrip}
+			class="ui5-fcl-grip ui5-fcl-grip--start"
+			style={{ display: this.showStartSeparatorGrip ? "inline-block" : "none" }}
+		/>
+	);
+}
+
+function gripEnd(this: FlexibleColumnLayout) {
+	return (
+		<Icon
+			name={verticalGrip}
+			class="ui5-fcl-grip ui5-fcl-grip--end"
+			style={{ display: this.showEndSeparatorGrip ? "inline-block" : "none" }}
+		/>
+	);
+}

package/src/IllustratedMessageTemplate.tsx

@@ -0,0 +1,71 @@
+import Title from "@ui5/webcomponents/dist/Title.js";
+import type IllustratedMessage from "./IllustratedMessage.js";
+
+export default function IllustratedMessageTemplate(this: IllustratedMessage) {
+	return (
+		<div class="ui5-illustrated-message-root">
+			<div class="ui5-illustrated-message-inner">
+				<div class="ui5-illustrated-message-illustration" dangerouslySetInnerHTML={{ __html: this.effectiveIllustration || "" }}></div>
+				<div class="ui5-illustrated-message-text-and-actions-container">
+					{this.hasTitle &&
+						<div part="title" class="ui5-illustrated-message-title">
+							{this.hasFormattedTitle ?
+								<slot name="title"></slot>
+								:
+								<Title>{this.effectiveTitleText}</Title>
+							}
+						</div>
+					}
+
+					{this.hasSubtitle &&
+						<div part="subtitle" class="ui5-illustrated-message-subtitle">
+							{this.hasFormattedSubtitle ?
+								<slot name="subtitle"></slot>
+								:
+								<>{this.effectiveSubitleText}</>
+							}
+						</div>
+					}
+					{this.hasActions &&
+						<div class="ui5-illustrated-message-actions">
+							<slot></slot>
+						</div>
+					}
+				</div>
+			</div>
+
+			<svg xmlns="http://www.w3.org/2000/svg" class="ui5-illustrated-message-util">
+				<defs>
+					<pattern id="sapIllus_PatternShadow" data-name="sapIllus_PatternShadow" width="3" height="5.5"
+						patternUnits="userSpaceOnUse" viewBox="0 0 3 5.5">
+						<rect class="sapIllus_NoColor sapIllus_NoColor_Fill" width="3" height="5.5" />
+						<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cx="3"
+							cy="5.5001" r="0.5" />
+						<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cy="5.5001"
+							r="0.5" />
+						<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cx="1.5"
+							cy="2.7501" r="0.5" />
+						<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cx="3"
+							cy="0.0001" r="0.5" />
+						<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cy="0.0001"
+							r="0.5" />
+					</pattern>
+					<pattern id="sapIllus_PatternHighlight" data-name="sapIllus_PatternHighlight" width="3" height="5.5"
+						patternTransform="translate(35.9059 309.6208)" patternUnits="userSpaceOnUse" viewBox="0 0 3 5.5">
+						<rect class="sapIllus_NoColor sapIllus_NoColor_Fill" width="3" height="5.5" />
+						<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="3.0001"
+							cy="5.5001" r="0.5" />
+						<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="0.0001"
+							cy="5.5001" r="0.5" />
+						<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="1.5001"
+							cy="2.7501" r="0.5" />
+						<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="3.0001"
+							cy="0.0001" r="0.5" />
+						<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="0.0001"
+							cy="0.0001" r="0.5" />
+					</pattern>
+				</defs>
+			</svg>
+		</div>
+	);
+}

package/src/NavigationLayoutTemplate.tsx

@@ -0,0 +1,19 @@
+import type NavigationLayout from "./NavigationLayout.js";
+
+export default function NavigationLayoutTemplate(this: NavigationLayout) {
+	return (
+		<div class="ui5-nl-root">
+			<header class="ui5-nl-header">
+				<slot name="header"></slot>
+			</header>
+			<section class="ui5-nl-section">
+				<aside class="ui5-nl-aside">
+					<slot name="sideContent"></slot>
+				</aside>
+				<div class="ui5-nl-content">
+					<slot></slot>
+				</div>
+			</section>
+		</div>
+	);
+}

package/src/NotificationListTemplate.tsx

@@ -0,0 +1,17 @@
+import type NotificationList from "./NotificationList.js";
+import NotificationListInternal from "./NotificationListInternal.js";
+
+export default function NotificationListTemplate(this: NotificationList) {
+	return (
+		<NotificationListInternal
+			accessibleName={this._accessibleName}
+			noDataText={this.noDataText}
+			onItemClick={this._onItemClick}
+			onItemClose={this._onItemClose}
+			onItemToggle={this._onItemToggle}
+			onLoadMore={this._onLoadMore}
+		>
+			<slot></slot>
+		</NotificationListInternal>
+	);
+}

package/src/PageTemplate.tsx

@@ -0,0 +1,29 @@
+import type Page from "./Page.js";
+
+export default function PageTemplate(this: Page) {
+	return (
+		<div class="ui5-page-root">
+			<header
+				id="ui5-page-header"
+				class="ui5-page-header-root"
+			>
+				<slot name="header"></slot>
+			</header>
+
+			<section
+				part="content"
+				class="ui5-page-content-root" style={{
+					"padding-bottom": this.footer.length && this._contentPaddingBottom,
+					"scroll-padding-bottom": this.footer.length && this._contentPaddingBottom,
+					"bottom": this.footer.length && this._contentBottom,
+					"top": this._contentTop,
+				}}>
+				<slot></slot>
+			</section>
+
+			<footer class="ui5-page-footer-root">
+				<slot name="footer"></slot>
+			</footer>
+		</div>
+	);
+}

package/src/ProductSwitchItemTemplate.tsx

@@ -0,0 +1,60 @@
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import type ProductSwitchItem from "./ProductSwitchItem.js";
+
+export default function ProductSwitchItemTemplate(this: ProductSwitchItem) {
+	return (
+		<>
+			{this.targetSrc ?
+				<a
+					data-sap-focus-ref
+					class="ui5-product-switch-item-root"
+					onFocusOut={this._onfocusout}
+					onFocusIn={this._onfocusin}
+					onMouseDown={this._onmousedown}
+					onKeyDown={this._onkeydown}
+					onKeyUp={this._onkeyup}
+					tabindex={this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined}
+					href={this.targetSrc}
+					target={this._effectiveTarget}>
+					{ item.call(this) }
+				</a>
+				:
+				<div
+					role="listitem"
+					class="ui5-product-switch-item-root"
+					data-sap-focus-ref
+					onFocusOut={this._onfocusout}
+					onFocusIn={this._onfocusin}
+					onMouseDown={this._onmousedown}
+					onKeyDown={this._onkeydown}
+					onKeyUp={this._onkeyup}
+					tabindex={this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined}
+				>
+					{ item.call(this) }
+				</div>
+			}
+		</>
+	);
+}
+
+function item(this: ProductSwitchItem) {
+	return (
+		<>
+			{this.icon &&
+				<Icon
+					class="ui5-product-switch-item-icon"
+					name={this.icon}
+				/>
+			}
+
+			<span class="ui5-product-switch-item-text-content">
+				{this.titleText &&
+					<span class="ui5-product-switch-item-title">{this.titleText}</span>
+				}
+				{this.subtitleText &&
+					<span class="ui5-product-switch-item-subtitle">{this.subtitleText}</span>
+				}
+			</span>
+		</>
+	);
+}

package/src/ProductSwitchTemplate.tsx

@@ -0,0 +1,16 @@
+import type ProductSwitch from "./ProductSwitch.js";
+
+export default function ProductSwitchTemplate(this: ProductSwitch) {
+	return (
+		<div
+			role="list"
+			class="ui5-product-switch-root"
+			aria-label={this._ariaLabelText}
+			onFocusIn={this._onfocusin}
+			onKeyDown={this._onkeydown}
+			onClick={this.handleProductSwitchItemClick}
+		>
+			<slot></slot>
+		</div>
+	);
+}

package/src/SideNavigationGroupTemplate.tsx

@@ -0,0 +1,55 @@
+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 type SideNavigationGroup from "./SideNavigationGroup.js";
+
+export default function SideNavigationGroupTemplate(this: SideNavigationGroup) {
+	if (this.sideNavCollapsed) {
+		return (<>
+			<div class={`ui5-sn-item-separator ${this.belowGroupClassName}`}></div>
+			<slot></slot>
+			<div class="ui5-sn-item-separator"></div>
+		</>);
+	}
+
+	return TreeItemTemplate.call(this);
+}
+
+function TreeItemTemplate(this: SideNavigationGroup) {
+	return (
+		<li id={this._id}
+			class={`ui5-sn-list-li ${this.belowGroupClassName}`}
+			role="none"
+		>
+			<div class="ui5-sn-item-separator"></div>
+			<div class={`ui5-sn-item ui5-sn-item-group ${this._classes}`}
+				role="treeitem"
+				data-sap-focus-ref
+				onKeyDown={this._onkeydown}
+				onClick={this._onclick}
+				onFocusIn={this._onfocusin}
+				tabIndex={this.effectiveTabIndex ? parseInt(this.effectiveTabIndex) : undefined}
+				aria-expanded={this._expanded}
+				aria-description={this.accDescription}
+				title={this._tooltip}
+				aria-owns={this._groupId}
+			>
+				<div class="ui5-sn-item-text">{this.text}</div>
+				{!!this.items.length &&
+					<Icon class="ui5-sn-item-toggle-icon"
+						name={this.expanded ? navDownArrow : navRightArrow}
+					/>
+				}
+			</div>
+			{!!this.items.length &&
+				<ul id={this._groupId}
+					class="ui5-sn-item-ul"
+					role="group"
+				>
+					<slot></slot>
+				</ul>
+			}
+			<div class="ui5-sn-item-separator"></div>
+		</li>
+	);
+}