@ui5/webcomponents 2.5.0 → 2.6.0-rc.0

package/src/DateRangePickerTemplate.tsx

@@ -0,0 +1,36 @@
+import Calendar from "./Calendar.js";
+import CalendarDateRange from "./CalendarDateRange.js";
+import type DateRangePicker from "./DateRangePicker.js";
+
+import DatePickerInputTemplate from "./DatePickerInputTemplate.js";
+import DatePickerPopoverTemplate from "./DatePickerPopoverTemplate.js";
+
+export default function DateRangePickerTemplate(this: DateRangePicker) {
+	return [
+		DatePickerInputTemplate.call(this),
+		DatePickerPopoverTemplate.call(this, { content }),
+	];
+}
+
+function content(this: DateRangePicker) {
+	return (
+		<Calendar
+			id={`${this._id}-calendar`}
+			primaryCalendarType={this._primaryCalendarType}
+			secondaryCalendarType={this.secondaryCalendarType}
+			formatPattern={this._formatPattern}
+			selectionMode={this._calendarSelectionMode}
+			minDate={this.minDate}
+			maxDate={this.maxDate}
+			calendarWeekNumbering={this.calendarWeekNumbering}
+			onSelectionChange={this.onSelectedDatesChange}
+			onShowMonthView={this.onHeaderShowMonthPress}
+			onShowYearView={this.onHeaderShowYearPress}
+			hideWeekNumbers={this.hideWeekNumbers}
+			_currentPicker={this._calendarCurrentPicker}
+			_pickersMode={this._calendarPickersMode}
+		>
+			<CalendarDateRange startValue={this.startValue} endValue={this.endValue} />
+		</Calendar>
+	);
+}

package/src/DateTimePickerTemplate.tsx

@@ -0,0 +1,112 @@
+import DatePickerInputTemplate from "./DatePickerInputTemplate.js";
+import DatePickerPopoverTemplate from "./DatePickerPopoverTemplate.js";
+
+import type DateTimePicker from "./DateTimePicker.js";
+import Button from "./Button.js";
+import Calendar from "./Calendar.js";
+import CalendarDate from "./CalendarDate.js";
+import SegmentedButton from "./SegmentedButton.js";
+import SegmentedButtonItem from "./SegmentedButtonItem.js";
+import TimeSelectionClocks from "./TimeSelectionClocks.js";
+
+export default function DateTimePickerTemplate(this: DateTimePicker) {
+	return [
+		DatePickerInputTemplate.call(this),
+		DatePickerPopoverTemplate.call(this, { header, content, footer }),
+	];
+}
+
+function header(this: DateTimePicker) {
+	return (
+		<>
+			{ this.phone &&
+				<div class="ui5-dt-picker-header">
+					<SegmentedButton class="ui5-dt-picker-toggle-button" onSelectionChange={this._dateTimeSwitchChange}>
+						<SegmentedButtonItem data-ui5-key="Date" selected={this.showDateView}>{this.btnDateLabel}</SegmentedButtonItem>
+						<SegmentedButtonItem data-ui5-key="Time" selected={this.showTimeView}>{this.btnTimeLabel}</SegmentedButtonItem>
+					</SegmentedButton>
+				</div>
+			}
+		</>
+	);
+}
+
+function content(this: DateTimePicker) {
+	return (
+		<div class={{
+			"ui5-dt-picker-content": true,
+			"ui5-dt-picker-content--phone": this.phone,
+		}}>
+			<Calendar
+				class={{
+					"ui5-dt-cal": true,
+					"ui5-dt-cal--hidden": this.phone && this.showTimeView,
+					"ui5-dt-time--hidden": this.phone && this.showDateView,
+				}}
+				id={`${this._id}-calendar`}
+				primaryCalendarType={this._primaryCalendarType}
+				secondaryCalendarType={this.secondaryCalendarType}
+				formatPattern={this._formatPattern}
+				selectionMode={this._calendarSelectionMode}
+				minDate={this.minDate}
+				maxDate={this.maxDate}
+				calendarWeekNumbering={this.calendarWeekNumbering}
+				onSelectionChange={this.onSelectedDatesChange}
+				onShowMonthView={this.onHeaderShowMonthPress}
+				onShowYearView={this.onHeaderShowYearPress}
+				hideWeekNumbers={this.hideWeekNumbers}
+				_currentPicker={this._calendarCurrentPicker}
+			>
+				{this._calendarSelectedDates.map(date =>
+					<CalendarDate value={date} />
+				)}
+			</Calendar>
+
+			{ !this.phone && <span class="ui5-dt-picker-separator"></span> }
+
+			{ this.showTimeView &&
+				<TimeSelectionClocks
+					id={`${this._id}-time-sel`}
+					class={{
+						"ui5-dt-time": true,
+						...this.classes.dateTimeView,
+					}}
+					formatPattern={this._formatPattern}
+					value={this._timeSelectionValue}
+					onChange={this.onTimeSelectionChange}
+					_calendarType={this._primaryCalendarType}
+				/>
+			}
+		</div>
+	);
+}
+
+function footer(this: DateTimePicker) {
+	return (
+		<div
+			slot="footer"
+			class={{
+				"ui5-dt-picker-footer": true,
+				"ui5-dt-picker-footer-time-hidden": (this.phone && this.showTimeView) || (this.phone && this.showDateView)
+			}}>
+			<Button
+				id="ok"
+				class="ui5-dt-picker-action"
+				design="Emphasized"
+				disabled={this._submitDisabled}
+				onClick={this._submitClick}
+			>
+				{this.btnOKLabel}
+			</Button>
+
+			<Button
+				id="cancel"
+				class="ui5-dt-picker-action"
+				design="Transparent"
+				onClick={this._cancelClick}
+			>
+				{this.btnCancelLabel}
+			</Button>
+		</div>
+	);
+}

package/src/DayPickerTemplate.tsx

@@ -0,0 +1,82 @@
+import type DayPicker from "./DayPicker.js";
+
+export default function DayPickerTemplate(this: DayPicker) {
+	return (
+		<div
+			class={{
+				"ui5-dp-root": true,
+				"ui5-dp-twocalendartypes": this.hasSecondaryCalendarType,
+			}}
+			style={{
+				"justify-content": "center",
+				display: this._hidden ? "none" : "flex",
+			}}
+			onKeyDown={this._onkeydown}
+			onKeyUp={this._onkeyup}
+			onClick={this._onclick}
+			onMouseOver={this._onmouseover}
+			onFocusIn={this._onfocusin}
+			onFocusOut={this._onfocusout}
+		>
+			<div id={`${this._id}-content`} class="ui5-dp-content" role="grid" aria-roledescription={this.ariaRoledescription}>
+				<div role="row" class="ui5-dp-days-names-container">
+					{this._dayNames.map(day =>
+						<div
+							role="columnheader"
+							aria-label={day.name}
+							class={day.classes}
+						>
+							{day.ultraShortName}
+						</div>
+					)}
+				</div>
+
+				{this._weeks.map(week => {
+					 return week.length > 0 ?
+						<div class="ui5-dp-weeks-row" role="row">
+							{week.map(day => {
+								return "timestamp" in day ?
+									<div
+										data-ui5-special-day={day.type ? day.type : undefined}
+										tabindex={day._tabIndex}
+										data-sap-focus-ref={day.focusRef ? "true" : undefined}
+										data-sap-timestamp={day.timestamp}
+										role="gridcell"
+										aria-selected={day.ariaSelected}
+										aria-label={day.ariaLabel}
+										aria-disabled={day.ariaDisabled}
+										class={day.classes}
+										part={day.parts}>
+										<span
+											class="ui5-dp-daytext"
+											data-sap-timestamp={day.timestamp}
+										>
+											{day.day}
+										</span>
+										{day._isSecondaryCalendarType &&
+													<span class="ui5-dp-daytext ui5-dp-daysectext">
+														{day.secondDay}
+													</span>
+										}
+										{day.type &&
+													<div class={`ui5-dp-specialday ${day.type}`}></div>
+										}
+									</div>
+									:
+									!day.isHidden && (
+										<div
+											className="ui5-dp-weekname-container"
+											role="rowheader"
+											aria-label={`Calendar Week ${day.weekNum}`}
+										>
+											<span className="ui5-dp-weekname">{day.weekNum}</span>
+										</div>
+									);
+							})}
+						</div>
+						:
+						<div class="ui5-dp-empty-week"></div>;
+				})}
+			</div>
+		</div>);
+}

package/src/DialogTemplate.tsx

@@ -0,0 +1,72 @@
+import resizeCorner from "@ui5/webcomponents-icons/dist/resize-corner.js";
+import type Dialog from "./Dialog.js";
+import PopupTemplate from "./PopupTemplate.js";
+import Title from "./Title.js";
+import Icon from "./Icon.js";
+
+export default function DialogTemplate(this: Dialog) {
+	return PopupTemplate.call(this, {
+		beforeContent,
+		afterContent,
+	});
+}
+
+function beforeContent(this: Dialog) {
+	return (<>
+		{this._displayHeader &&
+			<header>
+				<div
+					class="ui5-popup-header-root"
+					id="ui5-popup-header"
+					role="group"
+					aria-describedby={this.effectiveAriaDescribedBy}
+					aria-roledescription={this.ariaRoleDescriptionHeaderText}
+					tabIndex={this._headerTabIndex}
+					onKeyDown={this._onDragOrResizeKeyDown}
+					onMouseDown={this._onDragMouseDown}
+					part="header"
+					// state={this.state}
+				>
+					{this.hasValueState &&
+						<Icon class="ui5-dialog-value-state-icon" name={this._dialogStateIcon}></Icon>
+					}
+					{this.header.length ?
+						<slot name="header"></slot>
+						:
+						<Title level="H1" id="ui5-popup-header-text" class="ui5-popup-header-text">{this.headerText}</Title>
+					}
+
+					{this.resizable ? <>
+						{this.draggable ?
+							<span id={`${this._id}-descr`} aria-hidden="true" class="ui5-hidden-text">{this.ariaDescribedByHeaderTextDraggableAndResizable}</span>
+							:
+							<span id={`${this._id}-descr`} aria-hidden="true" class="ui5-hidden-text">{this.ariaDescribedByHeaderTextResizable}</span>
+						}
+					</> : <>
+						{this.draggable &&
+							<span id={`${this._id}-descr`} aria-hidden="true" class="ui5-hidden-text">{this.ariaDescribedByHeaderTextDraggable}</span>
+						}
+					</>}
+				</div>
+			</header>
+		}
+	</>);
+}
+
+function afterContent(this: Dialog) {
+	return (<>
+		{!!this.footer.length &&
+			<footer class="ui5-popup-footer-root" part="footer">
+				<slot name="footer"></slot>
+			</footer>
+		}
+		{this._showResizeHandle &&
+			<div
+				class="ui5-popup-resize-handle"
+				onMouseDown={this._onResizeMouseDown}
+			>
+				<Icon name={resizeCorner}></Icon>
+			</div>
+		}
+	</>);
+}

package/src/DropIndicatorTemplate.tsx

@@ -0,0 +1,9 @@
+import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
+import type DropIndicator from "./DropIndicator.js";
+
+export default function DropIndicatorTemplate(this: DropIndicator) {
+	return <div class={{
+		"ui5-di-rect": this.placement === MovePlacement.On,
+		"ui5-di-needle": this.placement !== MovePlacement.On,
+	}}></div>;
+}

package/src/ExpandableTextTemplate.tsx

@@ -0,0 +1,59 @@
+import type ExpandableText from "./ExpandableText.js";
+import Text from "./Text.js";
+import Link from "./Link.js";
+import Button from "./Button.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+
+export default function ExpandableTextTemplate(this: ExpandableText) {
+	return (
+		<div>
+			<Text
+				class="ui5-exp-text-text"
+				emptyIndicatorMode={this.emptyIndicatorMode}
+			>
+				{this._displayedText}
+			</Text>
+
+			{this._maxCharactersExceeded && <>
+				<span class="ui5-exp-text-ellipsis">{this._ellipsisText}</span>
+				<Link
+					id="toggle"
+					class="ui5-exp-text-toggle"
+					accessibleRole="Button"
+					accessibleName={this._accessibleNameForToggle}
+					accessibilityAttributes={this._accessibilityAttributesForToggle}
+					onClick={this._handleToggleClick}
+					onMouseDown={this._handleToggleMousedown}
+				>
+					{this._textForToggle}
+				</Link>
+
+				{this._usePopover &&
+					<ResponsivePopover
+						open={this._expanded}
+						opener="toggle"
+						accessibleNameRef="popover-text"
+						contentOnlyOnDesktop={true}
+						_hideHeader={true}
+						class="ui5-exp-text-popover"
+						onClose={this._handlePopoverClose}
+					>
+						<Text id="popover-text">{this.text}</Text>
+						<div
+							slot="footer"
+							class="ui5-exp-text-footer"
+						>
+							<Button
+								design="Transparent"
+								onClick={this._handleCloseButtonClick}
+							>
+								{this._closeButtonText}
+							</Button>
+						</div>
+					</ResponsivePopover>
+				}
+			</>
+			}
+		</div>
+	);
+}

package/src/FileUploaderPopoverTemplate.tsx

@@ -0,0 +1,52 @@
+import type FileUploader from "./FileUploader.js";
+import Icon from "./Icon.js";
+import Popover from "./Popover.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+
+export default function FileUploaderPopoverTemplate(this: FileUploader) {
+	return (
+		<Popover
+			preventInitialFocus={true}
+			preventFocusRestore={true}
+			hideArrow={true}
+			placement="Bottom"
+			horizontalAlign="Start"
+			class="ui5-valuestatemessage-popover"
+		>
+			<div slot="header"
+				class={{
+					"ui5-valuestatemessage-root": true,
+					"ui5-valuestatemessage--success": this.valueState === ValueState.Positive,
+					"ui5-valuestatemessage--error": this.valueState === ValueState.Negative,
+					"ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
+					"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
+				}}
+				style={{
+					"width": `${this.ui5Input ? this.ui5Input.offsetWidth : 0}px`,
+				}}
+			>
+				{
+					this._valueStateMessageInputIcon &&
+						<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageInputIcon}/>
+				}
+
+				{ valueStateMessage.call(this) }
+			</div>
+		</Popover>
+	);
+}
+
+function valueStateMessage(this: FileUploader) {
+	return (
+		<>
+			{
+				this.shouldDisplayDefaultValueStateMessage ?
+					<>
+						{this.valueStateText}
+					</>
+					:
+					<slot name="valueStateMessage"></slot>
+			}
+		</>
+	);
+}

package/src/FileUploaderTemplate.tsx

@@ -0,0 +1,48 @@
+import type FileUploader from "./FileUploader.js";
+import Input from "./Input.js";
+import FileUploaderPopoverTemplate from "./FileUploaderPopoverTemplate.js";
+
+export default function FileUploaderTemplate(this: FileUploader) {
+	return (
+		<>
+			<div
+				class="ui5-file-uploader-root"
+				onMouseOver={this._onmouseover}
+				onMouseOut={this._onmouseout}
+				onFocusIn={this._onfocusin}
+				onFocusOut={this._onfocusout}
+				onKeyDown={this._onkeydown}
+				onKeyUp={this._onkeyup}
+				onClick={this._onclick}
+				onDragOver={this._ondrag}
+				onDrop={this._ondrop}
+			>
+				<div class="ui5-file-uploader-mask">
+					{!this.hideInput &&
+						<Input
+							value={this.value}
+							valueState={this.valueState}
+							placeholder={this.placeholder}
+							disabled={this.disabled}
+							tabindex={-1}
+							class="ui5-file-uploader-input"
+						/>
+					}
+					<slot></slot>
+				</div>
+				<input
+					type="file"
+					tabindex={-1}
+					aria-hidden="true"
+					multiple={this.multiple}
+					accept={this.accept}
+					title={this.titleText}
+					disabled={this.disabled}
+					onChange={this._onChange}
+				/>
+			</div>
+
+			{ FileUploaderPopoverTemplate.call(this) }
+		</>
+	);
+}

package/src/FormItemTemplate.tsx

@@ -0,0 +1,21 @@
+import type FormItem from "./FormItem.js";
+import type SlottedChild from "@ui5/webcomponents-base/dist/UI5Element.js";
+
+export default function FormItemTemplate(this: FormItem) {
+	return (
+		<div class="ui5-form-item-root">
+			<div class="ui5-form-item-layout" part="layout">
+				<div class="ui5-form-item-label" part="label">
+					<slot name="labelContent"></slot>
+				</div>
+				<div class="ui5-form-item-content" part="content">
+					{this.content.map(item =>
+						<div class="ui5-form-item-content-child">
+							<slot name={(item as SlottedChild)._individualSlot}></slot>
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/FormTemplate.tsx

@@ -0,0 +1,75 @@
+import type Form from "./Form.js";
+import Title from "./Title.js";
+
+export default function FormTemplate(this: Form) {
+	return (
+		<div
+			class="ui5-form-root"
+			role={this.effectiveAccessibleRole}
+			aria-labelledby={this.effectiveАccessibleNameRef}
+		>
+			{this.hasHeader &&
+				<div class="ui5-form-header" part="header">
+					{this.hasCustomHeader ?
+						<slot name="header"></slot>
+						:
+						<Title id={`${this._id}-header-text`} level="H4">{this.headerText}</Title>
+					}
+				</div>
+			}
+
+			<div class="ui5-form-layout" part="layout">
+				{
+					this.hasGroupItems ?
+						<>
+							{
+								this.groupItemsInfo.map(groupItemInfo => {
+									const groupItem = groupItemInfo.groupItem;
+									return (
+										<div class={{
+											"ui5-form-column": true,
+											[`ui5-form-column-spanL-${groupItem.colsL}`]: true,
+											[`ui5-form-column-spanXL-${groupItem.colsXl}`]: true,
+											[`ui5-form-column-spanM-${groupItem.colsM}`]: true,
+											[`ui5-form-column-spanS-${groupItem.colsS}`]: true,
+										}}
+										part="column"
+										>
+											<div class="ui5-form-group" role="form" aria-labelledby={groupItemInfo.accessibleNameRef}>
+												{groupItem.headerText &&
+												<div class="ui5-form-group-heading">
+													<Title id={`${groupItem._id}-group-header-text`} level="H6">{groupItem.headerText}</Title>
+												</div>
+												}
+
+												<div class="ui5-form-group-layout">
+													<slot name={groupItem._individualSlot}></slot>
+												</div>
+											</div>
+										</div>
+									);
+								}
+								)}
+						</>
+						:
+						<>
+							{
+								this.itemsInfo.map(itemInfo => {
+									const item = itemInfo.item;
+									return (
+										<div class={{
+											"ui5-form-item": true,
+											[`ui5-form-item-span-${item.columnSpan}`]: item.columnSpan !== undefined,
+										}}
+										>
+											<slot name={item._individualSlot}></slot>
+										</div>
+									);
+								}
+								)}
+						</>
+				}
+			</div>
+		</div>
+	);
+}

package/src/IconTemplate.tsx

@@ -0,0 +1,35 @@
+import type Icon from "./Icon.js";
+
+export default function IconTemplate(this: Icon) {
+	return (
+		<svg
+			class="ui5-icon-root"
+			part="root"
+			tabindex={this._tabIndex}
+			dir={this._dir}
+			viewBox={this.viewBox}
+			role={this.effectiveAccessibleRole}
+			focusable="false"
+			preserveAspectRatio="xMidYMid meet"
+			aria-label={this.effectiveAccessibleName}
+			aria-hidden={this.effectiveAriaHidden}
+			xmlns="http://www.w3.org/2000/svg"
+			onKeyDown={this._onkeydown}
+			onKeyUp={this._onkeyup}
+		>
+			{ this.hasIconTooltip &&
+                <title id={`${this._id}-tooltip`} > {this.effectiveAccessibleName} </title>
+			}
+
+			<g role="presentation">
+				{this.customSvg &&
+                    <g dangerouslySetInnerHTML={{ __html: (this.customSvg as { strings?: string[] }).strings?.join("") ?? "" }}></g>
+				}
+
+				{this.pathData.map(path => (
+					<path d={path}></path>
+				))}
+			</g>
+		</svg>
+	);
+}