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

package/src/RangeSliderTemplate.tsx

@@ -0,0 +1,134 @@
+import directionArrows from "@ui5/webcomponents-icons/dist/direction-arrows.js";
+import type RangeSlider from "./RangeSlider.js";
+import Icon from "./Icon.js";
+import Input from "./Input.js";
+import SliderBaseTemplate from "./SliderBaseTemplate.js";
+
+export default function RangeSliderTemplate(this: RangeSlider) {
+	return SliderBaseTemplate.call(this, {
+		handlesAriaText,
+		progressBar,
+		handles,
+	});
+}
+
+export function handlesAriaText(this: RangeSlider) {
+	return (<>
+		<span id="ui5-slider-startHandleDesc" class="ui5-hidden-text">{this._ariaHandlesText.startHandleText}</span>
+		<span id="ui5-slider-endHandleDesc" class="ui5-hidden-text">{this._ariaHandlesText.endHandleText}</span>
+	</>);
+}
+
+export function progressBar(this: RangeSlider) {
+	return (
+		<div
+			class="ui5-slider-progress-container"
+			part="progress-container"
+		>
+			<div class="ui5-slider-progress"
+				part="progress-bar"
+				style={this.styles.progress}
+				onFocusIn={this._onfocusin}
+				onFocusOut={this._onfocusout}
+				role="slider"
+				tabIndex={this._tabIndex}
+				aria-orientation="horizontal"
+				aria-valuemin={this.min}
+				aria-valuemax={this.max}
+				aria-valuenow={this._ariaValueNow}
+				aria-valuetext={`From ${this.startValue} to ${this.endValue}`}
+				aria-labelledby="ui5-slider-sliderDesc"
+				aria-disabled={this._ariaDisabled}
+			></div>
+		</div>
+	);
+}
+
+export function handles(this: RangeSlider) {
+	return (<>
+		<div class="ui5-slider-handle-container" style={this.styles.startHandle} part="handle-container">
+			<div class="ui5-slider-handle ui5-slider-handle--start"
+				part="handle"
+				onFocusIn={this._onfocusin}
+				onFocusOut={this._onfocusout}
+				role="slider"
+				tabindex={this._tabIndex}
+				aria-orientation="horizontal"
+				aria-valuemin={this.min}
+				aria-valuemax={this.max}
+				aria-valuenow={this.startValue}
+				aria-labelledby={this._ariaLabelledByStartHandleText}
+				aria-disabled={this._ariaDisabled}
+				aria-describedby={this._ariaDescribedByHandleText}
+				aria-keyshortcuts="F2"
+			>
+				<Icon name={directionArrows}
+					mode="Decorative"
+					slider-icon
+				></Icon>
+			</div>
+
+			{this.showTooltip &&
+				<div class="ui5-slider-tooltip ui5-slider-tooltip--start" style={this.styles.tooltip}>
+					{this.editableTooltip ?
+						<Input
+							type="Number"
+							value={this.startValue.toString()}
+							accessibleNameRef="ui5-slider-InputLabel"
+							onFocusOut={this._onInputFocusOut}
+							onKeyDown={this._onInputKeydown}
+							onChange={this._onInputChange}
+							onInput={this._onInputInput}
+							data-sap-ui-start-value
+							tabIndex={-1}
+						></Input>
+						:
+						<span class="ui5-slider-tooltip-value">{this.tooltipStartValue}</span>
+					}
+				</div>
+			}
+		</div>
+		<div class="ui5-slider-handle-container" style={this.styles.endHandle} part="handle-container">
+			<div class="ui5-slider-handle ui5-slider-handle--end"
+				part="handle"
+				onFocusIn={this._onfocusin}
+				onFocusOut={this._onfocusout}
+				role="slider"
+				tabIndex={this._tabIndex}
+				aria-orientation="horizontal"
+				aria-valuemin={this.min}
+				aria-valuemax={this.max}
+				aria-valuenow={this.endValue}
+				aria-labelledby={this._ariaLabelledByEndHandleText}
+				aria-describedby={this._ariaDescribedByHandleText}
+				aria-disabled={this._ariaDisabled}
+				aria-keyshortcuts="F2"
+			>
+				<Icon name={directionArrows}
+					mode="Decorative"
+					slider-icon
+				></Icon>
+			</div>
+
+			{this.showTooltip &&
+				<div class="ui5-slider-tooltip ui5-slider-tooltip--end" style={this.styles.tooltip}>
+					{this.editableTooltip ?
+						<Input
+							type="Number"
+							value={this.endValue.toString()}
+							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.tooltipEndValue}</span>
+					}
+				</div>
+			}
+		</div>
+	</>);
+}

package/src/RatingIndicatorTemplate.tsx

@@ -0,0 +1,74 @@
+import type RatingIndicator from "./RatingIndicator.js";
+import type { Star } from "./RatingIndicator.js";
+import Icon from "./Icon.js";
+import favorite from "@ui5/webcomponents-icons/dist/favorite.js";
+import unfavorite from "@ui5/webcomponents-icons/dist/unfavorite.js";
+
+export default function RatingIndicatorTemplate(this: RatingIndicator) {
+	return (
+		<div
+			class="ui5-rating-indicator-root"
+			role="slider"
+			aria-roledescription={this._ariaRoleDescription}
+			aria-valuemin={0}
+			aria-valuenow={this.value}
+			aria-valuemax={this.max}
+			aria-valuetext={`${this.value} of ${this.max}`}
+			aria-orientation="horizontal"
+			aria-disabled={this._ariaDisabled}
+			aria-readonly={this.ariaReadonly}
+			aria-description={this._ariaDescription}
+			tabindex={this.effectiveTabIndex}
+			onFocusIn={this._onfocusin}
+			onFocusOut={this._onfocusout}
+			onClick={this._onclick}
+			onKeyDown={this._onkeydown}
+			title={this.ratingTooltip}
+			aria-label={this._ariaLabel}
+		>
+			<ul class="ui5-rating-indicator-list" aria-hidden="true">
+				{ this._stars.map(star => starLi.call(this, star))}
+			</ul>
+		</div>
+	);
+}
+
+function starLi(this: RatingIndicator, star: Star) {
+	if (star.selected) {
+		return (
+			<li data-ui5-value={star.index} class="ui5-rating-indicator-item ui5-rating-indicator-item-sel">
+				<Icon data-ui5-value={star.index} name={favorite} />
+			</li>
+		);
+	} if (star.halfStar) {
+		return (
+			<li class="ui5-rating-indicator-item ui5-rating-indicator-item-half">
+				<Icon data-ui5-value={star.index} name={halfStarIconName.call(this)} />
+				<div class="ui5-rating-indicator-half-icon-wrapper">
+					<Icon data-ui5-value={star.index} name={favorite} class="ui5-rating-indicator-half-icon" />
+				</div>
+			</li>
+		);
+	} if (this.readonly) {
+		return (
+			<li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+				<Icon data-ui5-value={star.index} name={favorite} />
+			</li>
+		);
+	} if (this.disabled) {
+		return (
+			<li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+				<Icon data-ui5-value={star.index} name={favorite} />
+			</li>
+		);
+	}
+	return (
+		<li data-ui5-value={star.index} class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+			<Icon data-ui5-value={star.index} name={unfavorite}/>
+		</li>
+	);
+}
+
+function halfStarIconName(this: RatingIndicator) {
+	return this.disabled || this.readonly ? favorite : unfavorite;
+}

package/src/ResponsivePopoverTemplate.tsx

@@ -0,0 +1,60 @@
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import PopoverTemplate from "./PopoverTemplate.js";
+import type ResponsivePopover from "./ResponsivePopover.js";
+import Dialog from "./Dialog.js";
+import Title from "./Title.js";
+import Button from "./Button.js";
+
+export default function ResponsivePopoverTemplate(this: ResponsivePopover) {
+	if (!this._isPhone) {
+		return PopoverTemplate.call(this);
+	}
+
+	return (
+		<Dialog
+			root-element
+			accessibleName={this.accessibleName}
+			accessibleNameRef={this.accessibleNameRef}
+			accessibleRole={this.accessibleRole}
+			stretch={true}
+			preventInitialFocus={this.preventInitialFocus}
+			initialFocus={this.initialFocus}
+			onBeforeOpen={this._beforeDialogOpen}
+			onOpen={this._afterDialogOpen}
+			onBeforeClose={this._beforeDialogClose}
+			onClose={this._afterDialogClose}
+			exportparts="content, header, footer"
+			open={this.open}
+		>
+			{!this._hideHeader && <>
+				{this.header.length ?
+					<slot slot="header" name="header"></slot>
+					:
+					<div class={this.classes.header} slot="header">
+						{this.headerText &&
+							<Title
+								level="H1"
+								wrappingType="None"
+								class="ui5-popup-header-text ui5-responsive-popover-header-text"
+							>
+								{this.headerText}
+							</Title>
+						}
+						{!this._hideCloseButton &&
+							<Button
+								icon={decline}
+								design="Transparent"
+								accessibleName={this._closeDialogAriaLabel}
+								onClick={this._dialogCloseButtonClick}
+							></Button>
+						}
+					</div>
+				}
+			</>}
+
+			<slot></slot>
+
+			<slot slot="footer" name="footer"></slot>
+		</Dialog>
+	);
+}

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