@ui5/webcomponents 2.5.0 → 2.6.0-rc.0

package/src/SegmentedButtonItemTemplate.tsx

@@ -0,0 +1,36 @@
+import type SegmentedButtonItem from "./SegmentedButtonItem.js";
+import Icon from "./Icon.js";
+
+export default function SegmentedButtonItemTemplate(this: SegmentedButtonItem) {
+	return (
+		<li
+			role="option"
+			class="ui5-segmented-button-item-root"
+			aria-posinset={this.posInSet}
+			aria-setsize={this.sizeOfSet}
+			aria-selected={this.selected}
+			aria-disabled={this.disabled}
+			aria-roledescription={this.ariaDescription}
+			data-sap-focus-ref
+			onClick={this._onclick}
+			onKeyUp={this._onkeyup}
+			tabindex={this.tabIndexValue ? parseInt(this.tabIndexValue) : undefined }
+			aria-label={this.ariaLabelText}
+			title={this.tooltip}
+		>
+			{this.icon &&
+				<Icon
+					part="icon"
+					class="ui5-segmented-button-item-icon"
+					name={this.icon}
+					showTooltip={this.showIconTooltip}
+				/>
+			}
+			<span id={`${this._id}-content`} class="ui5-segmented-button-item-text">
+				<bdi>
+					<slot></slot>
+				</bdi>
+			</span>
+		</li>
+	);
+}

package/src/SegmentedButtonTemplate.tsx

@@ -0,0 +1,22 @@
+import type SegmentedButton from "./SegmentedButton.js";
+
+export default function SegmentedButtonTemplate(this: SegmentedButton) {
+	return (
+		<ul
+			role="listbox"
+			class="ui5-segmented-button-root"
+			onClick={this._onclick}
+			onMouseDown={this._onmousedown}
+			onKeyDown={this._onkeydown}
+			onKeyUp={this._onkeyup}
+			onFocusIn={this._onfocusin}
+			aria-multiselectable="true"
+			aria-describedby={`${this._id}-invisibleText`}
+			aria-roledescription={this.ariaDescription}
+			aria-label={this.accessibleName}
+		>
+			<slot></slot>
+			<span id={`${this._id}-invisibleText`} class="ui5-hidden-text">{this.ariaDescribedBy}</span>
+		</ul>
+	);
+}

package/src/SliderBaseTemplate.tsx

@@ -0,0 +1,74 @@
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import type { JsxTemplate } from "@ui5/webcomponents-base";
+import type SliderBase from "./SliderBase.js";
+
+export default function SliderBaseTemplate(this: SliderBase, hooks?: {
+	handlesAriaText?: JsxTemplate
+	progressBar?: JsxTemplate
+	handles?: JsxTemplate
+}) {
+	return (
+		<div
+			class={{
+				"ui5-slider-root": true,
+				"ui5-slider-root-phone": isPhone(),
+			}}
+			onMouseDown={this._onmousedown}
+			onTouchStart={this._onmousedown}
+			onMouseOver={this._onmouseover}
+			onMouseOut={this._onmouseout}
+			onKeyDown={this._onkeydown}
+			onKeyUp={this._onKeyupBase}
+			part="root-container"
+		>
+			{(hooks?.handlesAriaText || handlesAriaText).call(this)}
+
+			<div class="ui5-slider-inner">
+				{this.step && this.showTickmarks && <>
+					<ul class="ui5-slider-tickmarks">
+						{this.tickmarksObject.map(tm => <>
+							{tm ?
+								<li class="ui5-slider-tickmark ui5-slider-tickmark-in-range"></li>
+								:
+								<li class="ui5-slider-tickmark"></li>
+							}
+						</>)}
+					</ul>
+					{this.labelInterval &&
+							<ul class={{
+								"ui5-slider-labels": true,
+								"ui5-slider-hidden-labels": this._labelsOverlapping,
+							}}
+							style={this.styles.labelContainer}
+							>
+								{this._labels.map(l =>
+									<li style={this.styles.label}>{l}</li>
+								)}
+							</ul>
+					}
+				</>}
+
+				{(hooks?.progressBar || progressBar).call(this)}
+
+				{(hooks?.handles || handles).call(this)}
+			</div>
+
+			{this.accessibleName &&
+				<span id="ui5-slider-accName" class="ui5-hidden-text">{this.accessibleName}</span>
+			}
+
+			<span id="ui5-slider-sliderDesc" class="ui5-hidden-text">{this._ariaLabelledByText}</span>
+
+			{this.editableTooltip && <>
+				<span id="ui5-slider-InputDesc" class="ui5-hidden-text">{this._ariaDescribedByInputText}</span>
+				<span id="ui5-slider-InputLabel" class="ui5-hidden-text">{this._ariaLabelledByInputText}</span>
+			</>}
+
+		</div>
+
+	);
+}
+
+export function handlesAriaText(this: SliderBase) { }
+export function progressBar(this: SliderBase) { }
+export function handles(this: SliderBase) { }

package/src/SliderTemplate.tsx

@@ -0,0 +1,79 @@
+import directionArrows from "@ui5/webcomponents-icons/dist/direction-arrows.js";
+import type Slider from "./Slider.js";
+import Icon from "./Icon.js";
+import Input from "./Input.js";
+import SliderBaseTemplate from "./SliderBaseTemplate.js";
+
+export default function SliderTemplate(this: Slider) {
+	return SliderBaseTemplate.call(this, {
+		progressBar,
+		handles,
+	});
+}
+
+export function progressBar(this: Slider) {
+	return (
+		<div
+			class="ui5-slider-progress-container"
+			aria-hidden="true"
+			part="progress-container"
+		>
+			<div class="ui5-slider-progress"
+				style={this.styles.progress}
+				onFocusOut={this._onfocusout}
+				onFocusIn={this._onfocusin}
+				tabIndex={-1}
+				part="progress-bar"
+			></div>
+		</div>
+	);
+}
+
+export function handles(this: Slider) {
+	return (
+		<div class="ui5-slider-handle-container" style={this.styles.handle} part="handle-container">
+			<div class="ui5-slider-handle"
+				onFocusOut={this._onfocusout}
+				onFocusIn={this._onfocusin}
+				role="slider"
+				tabIndex={this._tabIndex}
+				aria-orientation="horizontal"
+				aria-valuemin={this.min}
+				aria-valuemax={this.max}
+				aria-valuenow={this.value}
+				aria-labelledby={this._ariaLabelledByHandleText}
+				aria-disabled={this._ariaDisabled}
+				aria-keyshortcuts="F2"
+				aria-describedby={this._ariaDescribedByHandleText}
+				data-sap-focus-ref
+				part="handle"
+			>
+				<Icon name={directionArrows}
+					mode="Decorative"
+					part="icon-slider"
+					slider-icon
+				></Icon>
+			</div>
+			{this.showTooltip &&
+			<div class="ui5-slider-tooltip" style={this.styles.tooltip}>
+				{this.editableTooltip ?
+					<Input
+						value={this._tooltipInputValue}
+						valueState={this._tooltipInputValueState}
+						type="Number"
+						accessibleNameRef="ui5-slider-InputLabel"
+						onFocusOut={this._onInputFocusOut}
+						onKeyDown={this._onInputKeydown}
+						onChange={this._onInputChange}
+						onInput={this._onInputInput}
+						data-sap-ui-end-value
+						tabIndex={-1}
+					></Input>
+					:
+					<span class="ui5-slider-tooltip-value">{this.tooltipValue}</span>
+				}
+			</div>
+			}
+		</div>
+	);
+}

package/src/SplitButtonTemplate.tsx

@@ -0,0 +1,54 @@
+import type SplitButton from "./SplitButton.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import Button from "./Button.js";
+
+export default function SplitButtonTemplate(this: SplitButton) {
+	return (
+		<div
+			role="group"
+			class="ui5-split-button-root"
+			tabindex={this._tabIndex}
+			aria-labelledby={`${this._id}-invisibleTextDefault ${this._id}}-invisibleText`}
+			onFocusOut={this._onFocusOut}
+			onFocusIn={this._onFocusIn}
+			onKeyDown={this._onKeyDown}
+			onKeyUp={this._onKeyUp}
+		>
+			<Button
+				class="ui5-split-text-button"
+				design={this.design}
+				icon={this.icon}
+				tabindex={-1}
+				disabled={this.disabled}
+				active={this._textButtonActive}
+				onClick={this._handleMouseClick}
+				onTouchStart={this.handleTouchStart}
+				onMouseDown={this.handleTouchStart}
+				onMouseUp={this._textButtonRelease}
+				onFocusIn={this._onInnerButtonFocusIn}
+				onFocusOut={this._onFocusOut}
+			>
+				{this.isTextButton && <slot></slot> }
+			</Button>
+
+			<Button
+				class="ui5-split-arrow-button"
+				design={this.design}
+				icon={slimArrowDown}
+				tabindex={-1}
+				tooltip={this.accInfo.arrowButton.title}
+				accessibilityAttributes={this.accInfo.arrowButton.accessibilityAttributes}
+				disabled={this.disabled}
+				active={this.effectiveActiveArrowButton}
+				onClick={this._handleArrowButtonAction}
+				onMouseDown={this._arrowButtonPress}
+				onMouseUp={this._arrowButtonRelease}
+				onFocusIn={this._onInnerButtonFocusIn}
+				onActiveStateChange={this._onArrowButtonActiveStateChange}
+			>
+			</Button>
+			<span id={`${this._id}-invisibleText`} class="ui5-hidden-text">{this.accInfo.root.description} {this.accInfo.root.keyboardHint} {this.accessibleName}</span>
+			<span id={`${this._id}-invisibleTextDefault`} class="ui5-hidden-text">{this.textButtonAccText}</span>
+		</div>
+	);
+}

package/src/StepInputTemplate.tsx

@@ -0,0 +1,92 @@
+import type StepInput from "./StepInput.js";
+import Icon from "./Icon.js";
+import Input from "./Input.js";
+
+import less from "@ui5/webcomponents-icons/dist/less.js";
+import add from "@ui5/webcomponents-icons/dist/add.js";
+
+export default function StepInputTemplate(this: StepInput) {
+	return (
+		<div
+			id={`${this._id}`}
+			class="ui5-step-input-root"
+			onKeyDown={this._onkeydown}
+			onFocusIn={this._onfocusin}
+			onFocusOut={this._onfocusout}
+		>
+			{/* Decrement Icon */}
+			{!this.readonly &&
+			<div
+				class="ui5-step-icon ui5-step-dec"
+				title={this.decIconTitle}
+			>
+				<Icon
+					id={`${this._id}-dec`}
+					name={less}
+					tabindex={-1}
+					accessibleName={this.decIconTitle}
+					onClick={this._decValue}
+					onFocusOut={this._onButtonFocusOut}
+					onMouseDown={this._decSpin}
+					onMouseUp={this._resetSpin}
+					onMouseOut={this._resetSpinOut}
+					class={{
+						"inputIcon": true,
+						"ui5-step-input-icon--clickable": this._decIconClickable,
+					}}
+					showTooltip={true}
+				/>
+			</div>
+			}
+
+			{/* INPUT */}
+			<Input
+				id={`${this._id}-inner`}
+				data-sap-focus-ref
+				class="ui5-step-input-input"
+				placeholder={this.placeholder}
+				type={this.type}
+				value={this._displayValue}
+				disabled={this.disabled}
+				required={this.required}
+				readonly={this.readonly}
+				valueState={this.valueState}
+				_inputAccInfo={this.accInfo}
+				_nativeInputAttributes={this.inputAttributes}
+				onChange={this._onInputChange}
+				onFocusOut={this._onInputFocusOut}
+				onFocusIn={this._onInputFocusIn}
+				onInput={this._onInput}
+			>
+				{this.valueStateMessage.length > 0 &&
+					<slot name="valueStateMessage" slot="valueStateMessage"></slot>
+				}
+			</Input>
+
+			{/* Increment Icon */}
+			{!this.readonly &&
+				<div
+					class="ui5-step-icon ui5-step-inc"
+					title={this.incIconTitle}
+				>
+					<Icon
+						id={`${this._id}-inc`}
+						class={{
+							"inputIcon": true,
+							"ui5-step-input-icon--clickable": this._incIconClickable,
+						}}
+						name={add}
+						tabindex={-1}
+						accessibleName={this.incIconTitle}
+						onClick={this._incValue}
+						onFocusOut={this._onButtonFocusOut}
+						onMouseDown={this._incSpin}
+						onMouseUp={this._resetSpin}
+						onMouseOut={this._resetSpinOut}
+						showTooltip={true}
+					/>
+				</div>
+			}
+		</div>
+	);
+}

package/src/SuggestionItemCustomTemplate.tsx

@@ -0,0 +1,10 @@
+import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
+import type SuggestionItemCustom from "./SuggestionItemCustom.js";
+
+export default function SuggestionItemCustomTemplate(this: SuggestionItemCustom) {
+	return ListItemBaseTemplate.call(this, { listItemContent }, { role: "option" });
+}
+
+function listItemContent(this: SuggestionItemCustom) {
+	return <slot></slot>;
+}

package/src/SuggestionItemGroupTemplate.tsx

@@ -0,0 +1,6 @@
+import ListItemGroupTemplate from "./ListItemGroupTemplate.js";
+import type SuggestionItemGroup from "./SuggestionItemGroup.js";
+
+export default function SuggestionItemGroupTemplate(this: SuggestionItemGroup) {
+	return ListItemGroupTemplate.call(this);
+}

package/src/SuggestionItemTemplate.tsx

@@ -0,0 +1,17 @@
+import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
+import type SuggestionItem from "./SuggestionItem.js";
+
+export default function SuggestionItemTemplate(this: SuggestionItem) {
+	return [ListItemBaseTemplate.call(this, { listItemContent }, { role: "option" })];
+}
+
+function listItemContent(this: SuggestionItem) {
+	return <div part="content" id="content" class="ui5-li-content">
+		<div class="ui5-li-text-wrapper">
+			<span part="title" className="ui5-li-title" dangerouslySetInnerHTML={{ __html: this.markupText }}></span>
+			{this.additionalText &&
+				<span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span>
+			}
+		</div>
+	</div>;
+}

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) }
+	</>);
+}