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

package/src/SuggestionListItemTemplate.tsx

@@ -0,0 +1,50 @@
+import type SuggestionListItem from "./SuggestionListItem.js";
+import ListItemStandardTemplate from "./ListItemStandardTemplate.js";
+import type { ListItemHooks } from "./ListItemTemplate.js";
+
+const predefinedHooks: Partial<ListItemHooks> = {
+	listItemContent,
+};
+
+export default function SuggestionListItemTemplate(this: SuggestionListItem, hooks?: Partial<ListItemHooks>) {
+	const currentHooks = { ...predefinedHooks, ...hooks };
+
+	return ListItemStandardTemplate.call(this, currentHooks);
+}
+
+function listItemContent(this: SuggestionListItem) {
+	return <>
+		<div class="ui5-li-text-wrapper">
+			{this.hasTitle && (
+				<span part="title" class="ui5-li-title">
+					<slot></slot>
+				</span>
+			)}
+
+			{this.hasDescription && (
+				<div class="ui5-li-description-info-wrapper">
+					<span part="description" class="ui5-li-desc">
+						{
+							this.richDescription.length ? (
+								<slot name="richDescription"></slot>
+							) : (
+								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>
+		)}
+	</>;
+}

package/src/SwitchTemplate.tsx

@@ -0,0 +1,74 @@
+import Icon from "./Icon.js";
+import { isDesktop, isSafari } from "@ui5/webcomponents-base/dist/Device.js";
+import type Switch from "./Switch.js";
+import acceptIcon from "@ui5/webcomponents-icons/dist/accept.js";
+import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
+
+export default function SwitchTemplate(this: Switch) {
+	return (
+		<div
+			class={{
+				"ui5-switch-root": true,
+				"ui5-switch--desktop": isDesktop(),
+				"ui5-switch--disabled": this.disabled,
+				"ui5-switch--checked": this.checked,
+				"ui5-switch--semantic": this.graphical,
+				"ui5-switch--no-label": !(this.graphical || this.textOn || this.textOff),
+				"ui5-switch--safari": isSafari(),
+			}}
+			role="switch"
+			aria-label={this.ariaLabelText}
+			aria-checked={this.checked}
+			aria-disabled={this.effectiveAriaDisabled}
+			aria-required={this.required}
+			onClick={this._onclick}
+			onKeyUp={this._onkeyup}
+			onKeyDown={this._onkeydown}
+			tabindex={this.effectiveTabIndex}
+			title={this.tooltip}
+		>
+			<div class="ui5-switch-inner">
+				<div class="ui5-switch-track" part="slider">
+					<div class="ui5-switch-slider">
+						{this.graphical ?
+							<>
+								<span class="ui5-switch-text ui5-switch-text--on">
+									<Icon name={acceptIcon} class="ui5-switch-icon-on"/>
+								</span>
+								<span class="ui5-switch-text ui5-switch-text--off">
+									<Icon name={declineIcon} class="ui5-switch-icon-off"/>
+								</span>
+							</>
+							:
+							<>
+								{this.hasNoLabel ?
+									<>
+										<span class="ui5-switch-text ui5-switch-text--on ui5-switch-no-label-icon" part="text-on">
+											<Icon name={this.sapNextIcon} class="ui5-switch-no-label-icon-on" />
+										</span>
+										<span class="ui5-switch-text ui5-switch-text--off ui5-switch-no-label-icon" part="text-off">
+											<Icon name={this.sapNextIcon} class="ui5-switch-no-label-icon-off" />
+										</span>
+									</>
+									:
+									<>
+										<span class="ui5-switch-text ui5-switch-text--on" part="text-on">{this._textOn}</span>
+										<span class="ui5-switch-text ui5-switch-text--off" part="text-off">{this._textOff}</span>
+									</>
+								}
+							</>
+						}
+
+						<span class="ui5-switch-handle" part="handle">
+							{/*  this icon is used in the sap_horizon_exp theme */}
+							<Icon
+								name={this.sapNextIcon}
+								class="ui5-switch-handle-icon"
+							/>
+						</span>
+					</div>
+				</div>
+			</div>
+			<input type='checkbox' checked={this.checked} class="ui5-switch-input" data-sap-no-tab-ref/>
+		</div>);
+}

package/src/TabContainerPopoverTemplate.tsx

@@ -0,0 +1,38 @@
+import type TabContainer from "./TabContainer.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import List from "./List.js";
+import Button from "./Button.js";
+import type Tab from "./Tab.js";
+
+export default function TabContainerPopoverTemplate(this: TabContainer) {
+	return (
+		<ResponsivePopover
+			id={`${this._id}-overflowMenu`}
+			horizontalAlign="End"
+			placement="Bottom"
+			contentOnlyOnDesktop={true}
+			hideArrow
+			_hideHeader={true}
+			class="ui5-tab-container-responsive-popover"
+			onDragStart={this._onDragStart}
+		>
+			<List
+				selectionMode="Single"
+				separators="None"
+				onItemClick={this._onOverflowListItemClick}
+				onMoveOver={this._onPopoverListMoveOver}
+				onMove={this._onPopoverListMove}
+				onKeyDown={this._onPopoverListKeyDown}
+			>
+				{this._popoverItemsFlat.map(item =>
+					(item as Tab).overflowPresentation
+				)}
+			</List>
+			<div slot="footer" class="ui5-responsive-popover-footer">
+				<Button design="Transparent" onClick={this._closePopover}>
+					{this.popoverCancelButtonText}
+				</Button>
+			</div>
+		</ResponsivePopover>
+	);
+}

package/src/TabContainerTemplate.tsx

@@ -0,0 +1,132 @@
+import type TabContainer from "./TabContainer.js";
+import DropIndicator from "./DropIndicator.js";
+import Button from "./Button.js";
+import TabContainerPopoverTemplate from "./TabContainerPopoverTemplate.js";
+import type Tab from "./Tab.js";
+
+function contentArea(this: TabContainer) {
+	return (
+		<div
+			class={{
+				"ui5-tc__content": true,
+				"ui5-tc__content--collapsed": this._contentCollapsed,
+			}}
+			part="content"
+		>
+			<div
+				class="ui5-tc__contentItem"
+				id="ui5-tc-content"
+				hidden={this._selectedTab?.effectiveHidden}
+				role="tabpanel"
+				aria-labelledby={this._selectedTab?._id}
+			>
+				{this.items.map(item =>
+					<slot name={(item as Tab)._effectiveSlotName}></slot>
+				)}
+			</div>
+		</div>
+	);
+}
+
+const defaultPartials = {
+	contentArea,
+};
+
+export default function TabContainerTemplate(this: TabContainer, injectedPartials?: Partial<typeof defaultPartials>) {
+	const partials = {
+		...defaultPartials,
+		...injectedPartials,
+	};
+
+	return (<>
+		<div
+			class={{
+				"ui5-tc-root": true,
+				"ui5-tc--textOnly": this.textOnly,
+				"ui5-tc--withAdditionalText": this.withAdditionalText,
+				"ui5-tc--standardTabLayout": this.standardTabLayout,
+			}}
+		>
+			{this.tabsAtTheBottom && partials.contentArea.call(this)}
+
+			<div
+				class="ui5-tc__header"
+				id={`${this._id}-header`}
+				onFocusIn={this._onHeaderFocusin}
+				onDragStart={this._onDragStart}
+				onDragEnter={this._onHeaderDragEnter}
+				onDragOver={this._onHeaderDragOver}
+				onDrop={this._onHeaderDrop}
+				onDragLeave={this._onHeaderDragLeave}
+				part="tabstrip"
+			>
+				<div
+					class="ui5-tc__overflow ui5-tc__overflow--start"
+					onClick={this._onOverflowClick}
+					onKeyDown={this._onOverflowKeyDown}
+					hidden
+				>
+					{this.startOverflowButton.length ?
+						<slot name="startOverflowButton"></slot>
+						: // else
+						<Button
+							endIcon={this.overflowMenuIcon}
+							data-ui5-stable="overflow-start"
+							tabindex={ -1 }
+							tooltip={this.overflowMenuTitle}
+							accessibilityAttributes={this.overflowBtnAccessibilityAttributes}
+						>
+							{this._startOverflowText}
+						</Button>
+					}
+				</div>
+
+				<div
+					id={ `${this._id}-tabStrip` }
+					class="ui5-tc__tabStrip"
+					role="tablist"
+					aria-describedby={this.tablistAriaDescribedById}
+					onClick={this._onTabStripClick}
+					onKeyDown={this._onTabStripKeyDown}
+					onKeyUp={this._onTabStripKeyUp}
+				>
+					{this.items.map(item =>
+						(item as Tab).stripPresentation
+					)}
+				</div>
+
+				<div
+					class="ui5-tc__overflow ui5-tc__overflow--end"
+					onClick={this._onOverflowClick}
+					onKeyDown={this._onOverflowKeyDown}
+					hidden
+				>
+					{this.overflowButton.length ?
+						<slot name="overflowButton"></slot>
+						:
+						<Button
+							endIcon={this.overflowMenuIcon}
+							data-ui5-stable="overflow-end"
+							tabindex={ -1 }
+							tooltip={this.overflowMenuTitle}
+							accessibilityAttributes={this.overflowBtnAccessibilityAttributes}
+						>
+							{this._endOverflowText}
+						</Button>
+					}
+				</div>
+
+				<DropIndicator orientation="Vertical" ownerReference={this}/>
+			</div>
+
+			{!this.tabsAtTheBottom && partials.contentArea.call(this)}
+
+			{this.hasItems &&
+				<span id={ `${this._id}-invisibleText` } class="ui5-hidden-text">{this.accInvisibleText}</span>
+			}
+
+		</div>
+
+		{ TabContainerPopoverTemplate.call(this) }
+	</>);
+}

package/src/TabInOverflowTemplate.tsx

@@ -0,0 +1,41 @@
+import type Tab from "./Tab.js";
+import Icon from "./Icon.js";
+import ListItemCustom from "./ListItemCustom.js";
+
+export default function TabInOverflowTemplate(this: Tab) {
+	return (
+		<ListItemCustom
+			id={`${this._id}-li`}
+			class={this.overflowClasses}
+			style={this._forcedStyleInOverflow}
+			type={this.overflowState}
+			disabled={this.effectiveDisabled}
+			selected={this.selected}
+			movable={this.movable}
+			ref={this.captureRef.bind(this)}
+		>
+			<div class="ui5-tab-overflow-itemContent-wrapper">
+				<div class="ui5-tab-overflow-itemContent">
+					{this.semanticIconName && (
+						<Icon
+							class={this.semanticIconClasses}
+							name={this.semanticIconName}
+						/>
+					)}
+					{this.icon && (
+						<Icon name={this.icon}/>
+					)}
+					{this.text}
+					{this.additionalText && (<>
+						&nbsp;({this.additionalText})
+					</>)}
+					{this._designDescription && (
+						<div id={`${this._id}-designDescription`} class="ui5-hidden-text">
+							{this._designDescription}
+						</div>
+					)}
+				</div>
+			</div>
+		</ListItemCustom>
+	);
+}

package/src/TabInStripTemplate.tsx

@@ -0,0 +1,94 @@
+import type Tab from "./Tab.js";
+import Button from "./Button.js";
+import Icon from "./Icon.js";
+import slimArrowDownIcon from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+
+function additionalText(this: Tab) {
+	return (
+		<span class={this.stripClasses.additionalTextClasses} id={ `${this._id}-additionalText` }>
+			{this.additionalText}
+		</span>
+	);
+}
+
+export default function TabInStripTemplate(this: Tab) {
+	return (
+		<div id={this._id}
+			class={this.stripClasses.itemClasses}
+			tabindex={ -1 }
+			role="tab"
+			aria-roledescription={this._roleDescription}
+			aria-haspopup={this._ariaHasPopup}
+			aria-posinset={this._forcedPosinset}
+			aria-setsize={this._forcedSetsize}
+			aria-controls="ui5-tc-content"
+			aria-selected={this.effectiveSelected}
+			aria-disabled={this.effectiveDisabled}
+			aria-labelledby={this.ariaLabelledBy}
+			draggable={this.movable}
+			onDragStart={this._ondragstart}
+			onDragEnd={this._ondragend}
+			ref={this.captureRef.bind(this)}
+		>
+			{this.icon &&
+				<div class="ui5-tab-strip-item-icon-outer">
+					<Icon
+						id={ `${this._id}-icon` }
+						name={this.icon}
+						class="ui5-tab-strip-item-icon"
+					/>
+				</div>
+			}
+
+			{this._designDescription &&
+				<div id={ `${this._id}-designDescription` }
+					 class="ui5-tab-strip-design-description"
+				>
+					{this._designDescription}
+				</div>
+			}
+
+			<div class="ui5-tab-strip-itemContent">
+				{!this._isInline &&
+					additionalText.call(this)
+				}
+
+				{this.text &&
+					<span
+						class="ui5-tab-strip-itemText"
+						id={ `${this._id}-text` }
+					>
+						{this.semanticIconName && (
+							<Icon class={this.semanticIconClasses} name={this.semanticIconName}/>
+						)}
+						{this.displayText}
+						{this.isSingleClickArea &&
+							<span class="ui5-tab-single-click-icon">
+								<Icon name={slimArrowDownIcon}/>
+							</span>
+						}
+					</span>
+				}
+			</div>
+
+			{this.requiresExpandButton &&
+				<>
+					<div class="ui5-tab-expand-button-separator"></div>
+					<div
+						class="ui5-tab-expand-button"
+					>
+						<Button
+							ref={this.captureButtonRef.bind(this)}
+							icon={slimArrowDownIcon}
+							design="Transparent"
+							tabindex={ -1 }
+							disabled={this.disabled}
+							tooltip={this.expandButtonTitle}
+							accessibilityAttributes={this.expandBtnAccessibilityAttributes}
+						/>
+					</div>
+				</>
+			}
+		</div>
+	);
+}

package/src/TabSeparatorInOverflowTemplate.tsx

@@ -0,0 +1,16 @@
+import type TabSeparator from "./TabSeparator.js";
+import ListItemCustom from "./ListItemCustom.js";
+
+export default function TabSeparatorInOverflowTemplate(this: TabSeparator) {
+	return (
+		<ListItemCustom
+			id={this._id}
+			// role="separator"
+			class="ui5-tc__separator"
+			disabled={true}
+			style={this._forcedStyleInOverflow}
+			ref={this.captureRef.bind(this)}
+		>
+		</ListItemCustom>
+	);
+}

package/src/TabSeparatorInStripTemplate.tsx

@@ -0,0 +1,12 @@
+import type TabSeparator from "./TabSeparator.js";
+
+export default function TabSeparatorInStripTemplate(this: TabSeparator) {
+	return (
+		<div
+			id={this._id}
+			role="separator"
+			class="ui5-tc__separator"
+			ref={this.captureRef.bind(this)}
+		></div>
+	);
+}

package/src/TabTemplate.tsx

@@ -0,0 +1,16 @@
+import type Tab from "./Tab.ts";
+
+export default function TabTemplate(this: Tab) {
+	return (
+		<div
+			id={this._id}
+			class="ui5-tab-root"
+			data-ui5-stable={this.stableDomRef}
+		>
+			<slot name={this._defaultSlotName}></slot>
+			{this.tabs.map(tab =>
+				<slot name={tab._effectiveSlotName}></slot>
+			)}
+		</div>
+	);
+}

package/src/Table.hbs

@@ -14,7 +14,7 @@
     </div>
     {{#unless rows.length}}
         <ui5-table-row id="nodata-row">
-            <ui5-table-cell id="nodata-cell" excluded-from-navigation>
+            <ui5-table-cell id="nodata-cell" excluded-from-navigation horizontal-align="center">
             {{#if nodata.length}}
                 <slot name="nodata"></slot>
             {{else}}
@@ -30,6 +30,11 @@
         </div>
     {{/if}}
 
+    <ui5-drop-indicator
+		orientation="Horizontal"
+		.ownerReference="{{this}}"
+	></ui5-drop-indicator>
+
     {{> tableEndRow}}
 </div>
 

package/src/TagTemplate.tsx

@@ -0,0 +1,40 @@
+import Icon from "./Icon.js";
+import type Tag from "./Tag.js";
+
+export default function TagTemplate(this: Tag) {
+	return (
+		<>
+			{
+				this.interactive ?
+					<button
+						class="ui5-tag-root"
+						title={this._title}
+						aria-roledescription={this._roleDescription}
+						aria-description={this._valueState}
+						onClick={this._onclick}
+					>
+						{ content.call(this) }
+					</button>
+					:
+					<div class="ui5-tag-root" title={this._title}>
+						{ content.call(this) }
+					</div>
+			}
+		</>
+	);
+}
+
+function content(this: Tag) {
+	return (
+		<>
+			<slot name="icon"></slot>
+			{this._semanticIconName &&
+				<Icon class="ui5-tag-semantic-icon" name={this._semanticIconName} />
+			}
+			<span class="ui5-hidden-text">{this.tagDescription}</span>
+			{this.hasText &&
+				<span class="ui5-tag-text"><slot></slot></span>
+			}
+		</>
+	);
+}

package/src/TextAreaPopoverTemplate.tsx

@@ -0,0 +1,49 @@
+import Icon from "./Icon.js";
+import Popover from "./Popover.js";
+import type TextArea from "./TextArea.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 ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+
+const IconPerValueState = {
+	Negative: error,
+	Critical: alert,
+	Positive: sysEnter2,
+	Information: information,
+};
+
+export default function TextAreaPopoverTemplate(this: TextArea) {
+	return (
+		<>
+			{this.displayValueStateMessagePopover &&
+			<Popover
+				preventFocusRestore={true}
+				hideArrow={true}
+				preventInitialFocus={true}
+				class="ui5-valuestatemessage-popover"
+				style={{ "max-width": `${this._width!}px` }}
+				placement="Bottom"
+				horizontalAlign={this._valueStatePopoverHorizontalAlign}
+			>
+				<div slot="header" class={{
+					"ui5-valuestatemessage-root": true,
+					...this.classes.valueStateMsg,
+				}}>
+					<Icon class="ui5-input-value-state-message-icon" name={valueStateIcon.call(this)} />
+					{valueStateMessage.call(this)}
+				</div>
+			</Popover>
+			}
+		</>
+	);
+}
+
+function valueStateMessage(this: TextArea) {
+	return this.hasCustomValueState ? <slot name="valueStateMessage"></slot> : this.valueStateDefaultText;
+}
+
+function valueStateIcon(this: TextArea) {
+	return this.valueState !== ValueState.None ? IconPerValueState[this.valueState] : "";
+}

package/src/TextAreaTemplate.tsx

@@ -0,0 +1,64 @@
+import type TextArea from "./TextArea.js";
+import TextAreaPopoverTemplate from "./TextAreaPopoverTemplate.js";
+
+export default function TextAreaTemplate(this: TextArea) {
+	return (
+		<>
+			<div
+				class={this.classes.root}
+				onFocusIn={this._onfocusin}
+				onFocusOut={this._onfocusout}
+			>
+				<div class="ui5-textarea-wrapper">
+					{this.growing &&
+					<div id={`${this._id}-mirror`} class="ui5-textarea-mirror" aria-hidden="true">
+						{this._mirrorText.map(mirrorText => {
+							return (
+								<>
+									{mirrorText.text}
+									<br />
+								</>
+							);
+						})}
+					</div>
+					}
+					<textarea
+						id={`${this._id}-inner`}
+						class="ui5-textarea-inner"
+						part="textarea"
+						placeholder={this.placeholder}
+						disabled={this.disabled}
+						readonly={this.readonly}
+						aria-label={this.ariaLabelText}
+						aria-describedby={this.ariaDescribedBy}
+						aria-invalid={this._ariaInvalid}
+						aria-required={this.required}
+						maxlength={this._exceededTextProps.calcedMaxLength}
+						value={this.value}
+						data-sap-focus-ref
+						onInput={this._oninput}
+						onChange={this._onchange}
+						onKeyUp={this._onkeyup}
+						onKeyDown={this._onkeydown}
+						onSelect={this._onselect}
+						onScroll={this._onscroll}>
+					</textarea>
+				</div>
+
+				{ afterTextarea.call(this) }
+
+				{this.showExceededText &&
+				<span class="ui5-textarea-exceeded-text">{this._exceededTextProps.exceededText}</span>
+				}
+
+				{this.hasValueState &&
+				<span id={`${this._id}-valueStateDesc`} class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
+				}
+			</div>
+
+			{TextAreaPopoverTemplate.call(this)}
+		</>
+	);
+}
+
+function afterTextarea(this: TextArea) {}

package/src/TextTemplate.tsx

@@ -0,0 +1,17 @@
+import type Text from "./Text.js";
+
+export default function TextTemplate(this: Text) {
+	return <>
+		<span>
+			<span> { this.emptyIndicatorMode } </span>
+			{ this._renderEmptyIndicator ?
+				<>
+					<span className="empty-indicator" aria-hidden="true">{ this._emptyIndicatorSymbol }</span>
+					<span className="empty-indicator-aria-label">{ this._emptyIndicatorAriaLabel }</span>
+				</>
+				:
+				<slot></slot>
+			}
+		</span>
+	</>;
+}