@ui5/webcomponents 2.5.0 → 2.6.0-rc.0

package/src/TimeSelectionInputsTemplate.tsx

@@ -0,0 +1,49 @@
+import type TimeSelectionInputs from "./TimeSelectionInputs.js";
+import Input from "./Input.js";
+import SegmentedButton from "./SegmentedButton.js";
+import SegmentedButtonItem from "./SegmentedButtonItem.js";
+
+export default function TimeSelectionInputsTemplate(this: TimeSelectionInputs) {
+	return (
+		<div
+			class="ui5-time-selection-inputs"
+			onKeyDown={this._onkeydown}
+		>
+
+			{this._entities.map(entity => (
+
+				<>
+					{
+						entity.hasSeparator && <span class="ui5-time-selection-separator">:</span>
+					}
+
+					<Input
+						id={`${this._id}_input_${entity.entity}`}
+						class="ui5-time-selection-numeric-input"
+						type={this._numberType}
+						maxlength={2}
+						autocomplete="off"
+						pattern="[0-9]*"
+						inputmode="numeric"
+						value={entity.stringValue}
+						accessibleName={entity.label}
+						_nativeInputAttributes={entity.attributes}
+						onFocusIn={this._onfocusin}
+						onFocusOut={this._onfocusout}
+						onInput={this._oninput}
+					/>
+				</>
+			))}
+
+			{this._periods.length > 0 &&
+			<>
+				<span class="ui5-time-selection-separator"></span>
+				<SegmentedButton id={`${this._id}_AmPm`} onClick={this._periodChange}>
+					{this._periods.map(period =>
+						<SegmentedButtonItem selected={period.selected}>{period.label}</SegmentedButtonItem>
+					)}
+				</SegmentedButton>
+			</>
+			}
+		</div>);
+}

package/src/TitleTemplate.tsx

@@ -0,0 +1,66 @@
+import type Title from "./Title.js";
+
+export default function TitleTemplate(this: Title) {
+	return (
+		<>
+			{
+				title.call(this, this.level)
+			}
+		</>
+	);
+}
+
+function title(this: Title, titleLevel: string) {
+	switch (titleLevel) {
+	case "H1":
+		return (
+			<h1 class="ui5-title-root">
+				{ titleInner.call(this) }
+			</h1>
+		);
+	case "H2":
+		return (
+			<h2 class="ui5-title-root">
+				{ titleInner.call(this) }
+			</h2>
+		);
+	case "H3":
+		return (
+			<h3 class="ui5-title-root">
+				{ titleInner.call(this) }
+			</h3>
+		);
+	case "H4":
+		return (
+			<h4 class="ui5-title-root">
+				{ titleInner.call(this) }
+			</h4>
+		);
+	case "H5":
+		return (
+			<h5 class="ui5-title-root">
+				{ titleInner.call(this) }
+			</h5>
+		);
+	case "H6":
+		return (
+			<h6 id={`${this._id}-inner`} class="ui5-title-root">
+				{ titleInner.call(this) }
+			</h6>
+		);
+	default:
+		return (
+			<h2 class="ui5-title-root">
+				{ titleInner.call(this) }
+			</h2>
+		);
+	}
+}
+
+function titleInner(this: Title) {
+	return (
+		<span id={`${this._id}-inner`}>
+			<slot></slot>
+		</span>
+	);
+}

package/src/ToastTemplate.tsx

@@ -0,0 +1,10 @@
+import type Toast from "./Toast.js";
+
+export default function ToastTemplate(this: Toast) {
+	return <>
+		this.open &&
+		<div class="ui5-toast-root" role="alert" tabindex={this._tabindex}>
+			<bdi><slot></slot></bdi>
+		</div>
+	</>;
+}

package/src/ToggleButtonTemplate.tsx

@@ -0,0 +1,8 @@
+import buttonTemplate from "./ButtonTemplate.js";
+import type ToggleButton from "./ToggleButton.js";
+
+export default function ToggleButtonTemplate(this: ToggleButton) {
+	return (<>
+		{ buttonTemplate.call(this, { ariaPressed: this.pressed }) }
+	</>);
+}

package/src/ToggleSpinButtonTemplate.tsx

@@ -0,0 +1,14 @@
+import type ToggleSpinButton from "./ToggleSpinButton.js";
+import buttonTemplate from "./ButtonTemplate.js";
+
+export default function ToggleSpinButtonTemplate(this: ToggleSpinButton) {
+	return (<>
+		{ buttonTemplate.call(this, {
+			ariaPressed: this.pressed,
+			ariaValueMax: this.valueMax,
+			ariaValueMin: this.valueMin,
+			ariaValueNow: this.valueNow,
+			ariaValueText: this.valueText,
+		})}
+	</>);
+}

package/src/TokenTemplate.tsx

@@ -0,0 +1,37 @@
+import type Token from "./Token.js";
+import Icon from "./Icon.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+
+export default function TokenTemplate(this: Token) {
+	return (
+		<div
+			role="option"
+			tabindex={this.forcedTabIndex ? parseInt(this.forcedTabIndex) : -1}
+			class="ui5-token--wrapper"
+			aria-description={this.ariaDescription}
+			aria-selected={this.selected}
+			onClick={this._handleSelect}
+			onFocusIn={this._focusin}
+			onFocusOut={this._focusout}
+			onKeyDown={this._keydown}
+		>
+			<span class="ui5-token--text">{this.text}</span>
+
+			{!this.readonly &&
+				<div class="ui5-token--icon">
+					{this.closeIcon.length > 0 ?
+						<slot name="closeIcon" onClick={this._delete}></slot>
+						:
+						<Icon
+							name={decline}
+							mode="Decorative"
+							accessibleName={this.tokenDeletableText}
+							showTooltip={true}
+							onClick={this._delete}
+						/>
+					}
+				</div>
+			}
+		</div>
+	);
+}

package/src/TokenizerPopoverTemplate.tsx

@@ -0,0 +1,64 @@
+import Button from "./Button.js";
+import List from "./List.js";
+import ListItemStandard from "./ListItemStandard.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import Title from "./Title.js";
+import type Tokenizer from "./Tokenizer.js";
+
+export default function TokenizerPopoverTemplate(this: Tokenizer) {
+	return (
+		<ResponsivePopover
+			tokenizer-popover="true"
+			open={this.open}
+			opener={this.morePopoverOpener}
+			style={{ "min-width": this.popoverMinWidth ? `${this.popoverMinWidth}px` : `${this.getBoundingClientRect().width}px` }}
+			contentOnlyOnDesktop={true}
+			preventFocusRestore={true}
+			hideArrow={this.hidePopoverArrow}
+			placement="Bottom"
+			horizontalAlign="Start"
+			onClose={this.handleAfterClose}
+			onBeforeClose={this.handleBeforeClose}
+			onBeforeOpen={this.handleBeforeOpen}
+		>
+			{this._isPhone &&
+			<div slot="header" class="ui5-responsive-popover-header">
+				<div class="row">
+					<Title
+						level="H1"
+						wrappingType="None"
+						class="ui5-responsive-popover-header-text"
+					>
+						{this.morePopoverTitle}
+					</Title>
+				</div>
+			</div>
+			}
+			<List
+				class="ui5-tokenizer-list"
+				selectionMode={this._nMoreListMode}
+				separators="None"
+				onKeyDown={this._onPopoverListKeydown}
+				onItemDelete={this.itemDelete}
+			>
+				{this._tokens
+					.filter(token => token._isVisible)
+					.map(token => <ListItemStandard key={String(token._id)} data-ui5-token-ref-id={token._id} wrappingType="Normal">{token.text}</ListItemStandard>)}
+			</List>
+
+			{this._isPhone &&
+			<div slot="footer" class="ui5-responsive-popover-footer">
+				<Button
+					design="Emphasized"
+					data-ui5-tokenizer-dialog-ok-button
+					onClick={this.handleDialogButtonPress}
+				>OK</Button>
+				<Button
+					design="Transparent"
+					onClick={this.handleDialogButtonPress}
+				>Cancel</Button>
+			</div>
+			}
+		</ResponsivePopover>
+	);
+}

package/src/TokenizerTemplate.tsx

@@ -0,0 +1,51 @@
+import type Tokenizer from "./Tokenizer.js";
+import TokenizerPopoverTemplate from "./TokenizerPopoverTemplate.js";
+
+export default function TokenizerTemplate(this: Tokenizer) {
+	return (
+		<>
+			<div class="ui5-tokenizer-root">
+				<div
+					class="ui5-tokenizer--content"
+					onClick={this._click}
+					onMouseDown={this._onmousedown}
+					onKeyDown={this._onkeydown}
+					onFocusOut={this._onfocusout}
+					onFocusIn={this._onfocusin}
+					onui5-delete={this._delete}
+					onui5-select={this.onTokenSelect}
+				>
+					<div class="ui5-tokenizer--list"
+						role="listbox"
+						aria-label={this.tokenizerLabel}
+						aria-description={this.tokenizerAriaDescription}
+						aria-disabled={this._ariaDisabled}
+						aria-readonly={this._ariaReadonly}
+					>
+						{ this.tokens.map(token => <slot name={token._individualSlot}></slot>)}
+					</div>
+
+					{this.showEffectiveClearAll &&
+					<span
+						role="button"
+						class="ui5-tokenizer--clear-all"
+						onClick={this.handleClearAll}
+					>{this._clearAllText}</span>
+					}
+				</div>
+
+				{this.showNMore &&
+					<span
+						role="button"
+						aria-haspopup="dialog"
+						class="ui5-tokenizer-more-text"
+						part="n-more-text"
+						onClick={this._handleNMoreClick}
+					>{this._nMoreText}</span>
+				}
+			</div>
+
+			{ TokenizerPopoverTemplate.call(this) }
+		</>
+	);
+}

package/src/ToolbarButtonTemplate.tsx

@@ -0,0 +1,28 @@
+import type ToolbarButton from "./ToolbarButton.js";
+import Button from "./Button.js";
+
+export default function ToolbarButtonTemplate(this: ToolbarButton) {
+	return (
+		<Button
+			class="ui5-tb-button ui5-tb-item"
+			id={this.id}
+			style={{
+				width: this.width,
+				display: this.hidden ? "none" : "inline-block",
+			}}
+			icon={this.icon}
+			endIcon={this.endIcon}
+			tooltip={this.tooltip}
+			accessibleName={this.accessibleName}
+			accessibleNameRef={this.accessibleNameRef}
+			accessibilityAttributes={this.accessibilityAttributes}
+			design={this.design}
+			disabled={this.disabled}
+			hidden={this.hidden}
+			data-ui5-external-action-item-id={this._id}
+			data-ui5-stable={this.stableDomRef}
+		>
+			{this.text}
+		</Button>
+	);
+}

package/src/ToolbarPopoverButtonTemplate.tsx

@@ -0,0 +1,23 @@
+import type ToolbarButton from "./ToolbarButton.js";
+import Button from "./Button.js";
+
+export default function ToolbarPopoverButtonTemplate(this: ToolbarButton) {
+	return (
+		<Button
+			icon={this.icon}
+			endIcon={this.endIcon}
+			accessibleName={this.accessibleName}
+			accessibleNameRef={this.accessibleNameRef}
+			accessibilityAttributes={this.accessibilityAttributes}
+			tooltip={this.tooltip}
+			design={this.design}
+			disabled={this.disabled}
+			hidden={this.hidden}
+			class="ui5-tb-popover-button ui5-tb-popover-item"
+			data-ui5-external-action-item-id={this._id}
+			data-ui5-stable={this.stableDomRef}
+		>
+			{this.text}
+		</Button>
+	);
+}

package/src/ToolbarPopoverSelectTemplate.tsx

@@ -0,0 +1,25 @@
+import type ToolbarSelect from "./ToolbarSelect.js";
+import Select from "./Select.js";
+import Option from "./Option.js";
+
+export default function ToolbarPopoverSelectTemplate(this: ToolbarSelect) {
+	return (
+		<Select
+			class="ui5-tb-popover-item"
+			data-ui5-external-action-item-id={this._id}
+			valueState={this.valueState}
+			disabled={this.disabled}
+			accessibleName={this.accessibleName}
+			accessibleNameRef={this.accessibleNameRef}
+		>
+			{this.options.map((option, index) => (
+				<Option
+					selected={option.selected}
+					data-ui5-external-action-item-index={index}
+				>
+					{option.textContent}
+				</Option>
+			))}
+		</Select>
+	);
+}

package/src/ToolbarPopoverSeparatorTemplate.tsx

@@ -0,0 +1,10 @@
+import type ToolbarSeparator from "./ToolbarSeparator.js";
+
+export default function ToolbarPopoverSeparator(this: ToolbarSeparator) {
+	return (
+		<div
+			class="ui5-tb-separator-in-overflow ui5-tb-popover-item"
+			data-ui5-external-action-item-id={this._id}
+		></div>
+	);
+}

package/src/ToolbarPopoverTemplate.tsx

@@ -0,0 +1,24 @@
+import type Toolbar from "./Toolbar.js";
+import Popover from "./Popover.js";
+
+export default function ToolbarPopoverTemplate(this: Toolbar) {
+	return (
+		<Popover
+			class="ui5-overflow-popover"
+			placement="Bottom"
+			horizontalAlign="End"
+			onClose={this.onOverflowPopoverClosed}
+			onOpen={this.onOverflowPopoverOpened}
+			hideArrow={true}
+		>
+			<div class={{
+				"ui5-overflow-list": true,
+				"ui5-overflow-list--alignleft": this.hasItemWithText,
+			}}>
+				{ this.overflowItems.map(item => (
+					item.toolbarPopoverTemplate.call(item.context)
+				))}
+			</div>
+		</Popover>
+	);
+}

package/src/ToolbarSelectTemplate.tsx

@@ -0,0 +1,26 @@
+import type ToolbarSelect from "./ToolbarSelect.js";
+import Select from "./Select.js";
+import Option from "./Option.js";
+
+export default function ToolbarSelectTemplate(this: ToolbarSelect) {
+	return (
+		<Select
+			class="ui5-tb-item"
+			style={this.styles}
+			data-ui5-external-action-item-id={this._id}
+			valueState={this.valueState}
+			disabled={this.disabled}
+			accessibleName={this.accessibleName}
+			accessibleNameRef={this.accessibleNameRef}
+		>
+			{this.options.map((option, index) => (
+				<Option
+					selected={option.selected}
+					data-ui5-external-action-item-index={index}
+				>
+					{option.textContent}
+				</Option>
+			))}
+		</Select>
+	);
+}

package/src/ToolbarSeparatorTemplate.tsx

@@ -0,0 +1,10 @@
+import type ToolbarSeparator from "./ToolbarSeparator.js";
+
+export default function ToolbarSeparatorTemplate(this: ToolbarSeparator) {
+	return (
+		<div
+			class="ui5-tb-separator ui5-tb-item"
+			data-ui5-external-action-item-id={this._id}
+		></div>
+	);
+}

package/src/ToolbarSpacerTemplate.tsx

@@ -0,0 +1,12 @@
+import type ToolbarSpacer from "./ToolbarSpacer.js";
+
+export default function ToolbarSpacerTemplate(this: ToolbarSpacer) {
+	return (
+		<div
+			class="ui5-tb-spacer ui5-tb-item"
+			style={this.styles}
+			role="separator"
+			data-ui5-external-action-item-id={this._id}
+		></div>
+	);
+}

package/src/ToolbarTemplate.tsx

@@ -0,0 +1,37 @@
+import Button from "./Button.js";
+import type Toolbar from "./Toolbar.js";
+import toolbarPopoverTemplate from "./ToolbarPopoverTemplate.js";
+import overflowIcon from "@ui5/webcomponents-icons/dist/overflow.js";
+
+export default function ToolbarTemplate(this: Toolbar) {
+	return (<>
+		<div
+			class={{
+				"ui5-tb-items": true,
+				"ui5-tb-items-full-width": this.hasFlexibleSpacers,
+			}}
+			role={this.accInfo.root.role}
+			aria-label={this.accInfo.root.accessibleName}
+		>
+			{this.standardItems.map(item => (
+				item.toolbarTemplate.call(item.context)
+			))}
+
+			<Button
+				aria-hidden={this.hideOverflowButton}
+				icon={overflowIcon}
+				design="Transparent"
+				class={{
+					"ui5-tb-item": true,
+					"ui5-tb-overflow-btn": true,
+					"ui5-tb-overflow-btn-hidden": this.hideOverflowButton,
+				}}
+				tooltip={this.accInfo.overflowButton.tooltip}
+				accessibleName={this.accInfo.overflowButton.accessibleName}
+				accessibilityAttributes={this.accInfo.overflowButton.accessibilityAttributes}
+			/>
+		</div>
+
+		{toolbarPopoverTemplate.call(this)}
+	</>);
+}

package/src/TreeItemBaseTemplate.tsx

@@ -0,0 +1,60 @@
+import type TreeItemBase from "./TreeItemBase.js";
+import ListItemTemplate from "./ListItemTemplate.js";
+import Icon from "./Icon.js";
+import navigationDownArrow from "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import navigatioRightArrow from "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+import type { ListItemHooks } from "./ListItemTemplate.js";
+
+const predefinedHooks: Partial<ListItemHooks> = {
+	listItemPreContent,
+	listItemContent,
+	imageBegin,
+	iconBegin,
+};
+
+export default function TreeItemBaseTemplate(this: TreeItemBase, hooks?: Partial<ListItemHooks>) {
+	const currentHooks = { ...predefinedHooks, ...hooks };
+
+	return <div>
+		{
+			ListItemTemplate.call(this, currentHooks)
+		}
+
+		{listItemPostContent.call(this)}
+	</div>;
+}
+
+function listItemPreContent(this: TreeItemBase) {
+	return (
+		<div class="ui5-li-tree-toggle-box" style={this.styles.preContent}>
+			{this.showToggleButton &&
+				<Icon
+					part="toggle-icon"
+					class="ui5-li-tree-toggle-icon"
+					name={this.expanded ? navigationDownArrow : navigatioRightArrow}
+					showTooltip={true}
+					accessibleName={this.iconAccessibleName}
+					// @ts-expect-error
+					onClick={this._toggleClick}
+				/>
+			}
+		</div >);
+}
+
+function listItemPostContent(this: TreeItemBase) {
+	if (this.expanded) {
+		return (
+			<ul
+				role="group"
+				id={`${this._id}-subtree`}
+				class="ui5-tree-li-subtree">
+				<slot></slot>
+			</ul>);
+	}
+}
+
+function listItemContent() { }
+function imageBegin() { }
+function iconBegin(this: TreeItemBase) {
+	return this.icon ? <Icon part="icon" name={this.icon} class="ui5-li-icon" /> : <></>;
+}

package/src/TreeItemCustomTemplate.tsx

@@ -0,0 +1,21 @@
+import type TreeItemCustom from "./TreeItemCustom.js";
+import TreeItemBaseTemplate from "./TreeItemBaseTemplate.js";
+import type { ListItemHooks } from "./ListItemTemplate.js";
+
+const predefinedHooks: Partial<ListItemHooks> = {
+	listItemContent,
+};
+
+export default function TreeItemCustomTemplate(this: TreeItemCustom, hooks?: Partial<ListItemHooks>) {
+	const currentHooks = { ...predefinedHooks, ...hooks };
+
+	return TreeItemBaseTemplate.call(this, currentHooks);
+}
+
+function listItemContent(this: TreeItemCustom) {
+	return (
+		<div class="ui5-li-tree-text-wrapper">
+			<slot name="content" slot="content"></slot>
+		</div>
+	);
+}

package/src/TreeItemTemplate.tsx

@@ -0,0 +1,28 @@
+import type TreeItem from "./TreeItem.js";
+import TreeItemBaseTemplate from "./TreeItemBaseTemplate.js";
+import type { ListItemHooks } from "./ListItemTemplate.js";
+
+const predefinedHooks: Partial<ListItemHooks> = {
+	listItemContent,
+};
+
+export default function TreeItemTemplate(this: TreeItem, hooks?: Partial<ListItemHooks>) {
+	const currentHooks = { ...predefinedHooks, ...hooks };
+
+	return TreeItemBaseTemplate.call(this, currentHooks);
+}
+
+function listItemContent(this: TreeItem) {
+	return <>
+		<div class="ui5-li-text-wrapper">
+			{this._showTitle &&
+				<div part="title" class="ui5-li-title"> {this.text}</div>
+			}
+		</div>
+		{this.additionalText &&
+			<span part="additional-text" class="ui5-li-additional-text">
+				{this.additionalText}
+			</span>
+		}
+	</>;
+}

package/src/TreeTemplate.tsx

@@ -0,0 +1,40 @@
+import DropIndicator from "./DropIndicator.js";
+import type Tree from "./Tree.js";
+import TreeList from "./TreeList.js";
+
+export default function TreeTemplate(this: Tree) {
+	return (
+		<TreeList
+			class="ui5-tree-root"
+			selectionMode={this.selectionMode}
+			headerText={this.headerText}
+			footerText={this.footerText}
+			noDataText={this.noDataText}
+			accessibleRole={this._role}
+			accessibleName={this.accessibleName}
+			accessibleNameRef={this.accessibleNameRef}
+			accessibleDescription={this.accessibleDescription}
+			accessibleDescriptionRef={this.accessibleDescriptionRef}
+			onDragEnter={this._ondragenter}
+			onDragOver={this._ondragover}
+			onDrop={this._ondrop}
+			onDragLeave={this._ondragleave}
+			onItemClick={this._onListItemClick}
+			onItemDelete={this._onListItemDelete}
+			onItemFocused={this._onListItemFocus}
+			onSelectionChange={this._onListSelectionChange}
+			onMouseOver={this._onListItemMouseOver}
+			onMouseOut={this._onListItemMouseOut}
+			// events bubbling from slotted items
+			onui5-toggle={this._onListItemToggle}
+			onui5-step-in={this._onListItemStepIn}
+			onui5-step-out={this._onListItemStepOut}
+		>
+			{this._hasHeader && <slot name="header" slot="header"></slot>}
+
+			<slot></slot>
+
+			<DropIndicator orientation="Horizontal" ownerReference={this} />
+		</TreeList>
+	);
+}