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

package/src/ComboBoxTemplate.tsx

@@ -0,0 +1,70 @@
+import type ComboBox from "./ComboBox.js";
+import Icon from "./Icon.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import ComboBoxPopoverTemplate from "./ComboBoxPopoverTemplate.js";
+
+export default function ComboBoxTemplate(this: ComboBox) {
+	return (
+		<>
+			<div class="ui5-combobox-root ui5-input-focusable-element">
+				{this.hasValueState &&
+				<span id="value-state-description" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
+				}
+
+				<input id="ui5-combobox-input"
+					value={this.value}
+					inner-input
+					placeholder={this.placeholder}
+					disabled={this.disabled}
+					readonly={this.readonly}
+					// check this value-state
+					value-state={this.valueState}
+					onKeyDown={this._keydown}
+					onInput={this._input}
+					onChange={this._inputChange}
+					onClick={this._click}
+					onKeyUp={this._keyup}
+					onFocusIn={this._focusin}
+					onFocusOut={this._focusout}
+					aria-expanded={this.open}
+					role="combobox"
+					aria-haspopup="dialog"
+					aria-autocomplete="both"
+					aria-describedby="value-state-description"
+					aria-label={this.ariaLabelText}
+					aria-required={this.required}
+					aria-controls={this.responsivePopoverId}
+					autocomplete="off"
+					data-sap-focus-ref
+				/>
+
+				{this._effectiveShowClearIcon &&
+				<div onClick={this._clear} class="ui5-input-clear-icon-wrapper inputIcon" tabindex={-1}>
+					<Icon tabindex={-1} class="ui5-input-clear-icon" name={decline} accessibleName={this.clearIconAccessibleName}/>
+				</div>
+				}
+
+				{this.icon &&
+				<slot name="icon"></slot>
+				}
+
+				{!this.readonly &&
+				<Icon
+					slot="icon"
+					name={slimArrowDown}
+					tabindex={-1}
+					class={{
+						"inputIcon": true,
+						"inputIcon--pressed": this._iconPressed,
+					}}
+					accessibleName={this._iconAccessibleNameText}
+					onClick={this._arrowClick}
+				/>
+				}
+			</div>
+
+			{ ComboBoxPopoverTemplate.call(this) }
+		</>
+	);
+}

package/src/DatePickerInputTemplate.tsx

@@ -0,0 +1,54 @@
+import type DatePicker from "./DatePicker.js";
+import Icon from "./Icon.js";
+import Input from "./Input.js";
+
+export default function DatePickerInputTemplate(this: DatePicker) {
+	return (
+		<div
+			class="ui5-date-picker-root"
+			style={{
+				width: "100%",
+			}}
+		>
+			<Input
+				data-sap-focus-ref
+				id={`${this._id}-inner`}
+				class="ui5-date-picker-input"
+				placeholder={this._placeholder}
+				type={this.type}
+				value={this.value}
+				disabled={this.disabled}
+				required={this.required}
+				readonly={this.readonly}
+				valueState={this.valueState}
+				_inputAccInfo={this.accInfo}
+				onChange={this._onInputChange}
+				onInput={this._onInputInput}
+				onSubmit={this._onInputSubmit}
+				onKeyDown={this._onkeydown}
+			>
+
+				{this.valueStateMessage.length > 0 &&
+					<slot name="valueStateMessage" slot="valueStateMessage"></slot>
+				}
+
+				{!this.readonly &&
+					<Icon
+						id={`${this._id}-value-help`}
+						slot="icon"
+						name={this.openIconName}
+						tabindex={-1}
+						accessibleName={this.openIconTitle}
+						mode={this._iconMode}
+						showTooltip={true}
+						class={{
+							"inputIcon": true,
+							"inputIcon--pressed": this.open,
+						}}
+						onClick={this._togglePicker}
+					/>
+				}
+			</Input>
+		</div>
+	);
+}

package/src/DatePickerPopoverTemplate.tsx

@@ -0,0 +1,80 @@
+import type DatePicker from "./DatePicker.js";
+import Button from "./Button.js";
+import Calendar from "./Calendar.js";
+import CalendarDate from "./CalendarDate.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+
+type TemplateHook = () => void;
+
+export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { header?: TemplateHook, content?: TemplateHook, footer?: TemplateHook }) {
+	const header = hooks?.header || defaultHeader;
+	const content = hooks?.content || defaultContent;
+	const footer = hooks?.footer || defaultFooter;
+
+	return (
+		<ResponsivePopover
+			id={`${this._id}-responsive-popover`}
+			opener={this}
+			open={this.open}
+			allowTargetOverlap
+			placement="Bottom"
+			horizontalAlign="Start"
+			accessibleName={this.pickerAccessibleName}
+			hideArrow={true}
+			_hideHeader={this._shouldHideHeader}
+			onKeyDown={this._onkeydown}
+			onClose={this.onResponsivePopoverAfterClose}
+			onOpen={this.onResponsivePopoverAfterOpen}
+			onBeforeOpen={this.onResponsivePopoverBeforeOpen}
+		>
+			{ this.showHeader && header.call(this) }
+
+			{ content.call(this) }
+
+			{ this.showFooter && footer.call(this) }
+		</ResponsivePopover>
+	);
+}
+
+function defaultHeader(this: DatePicker) {
+	return (
+		<div slot="header" class="ui5-responsive-popover-header">
+			<div class="row">
+				<span>{this._headerTitleText}</span>
+				<Button
+					class="ui5-responsive-popover-close-btn"
+					icon={decline}
+					design="Transparent"
+					onClick={this._togglePicker}
+				>
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+function defaultContent(this: DatePicker) {
+	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}
+		>
+			{ this._calendarSelectedDates.map(date => <CalendarDate value={date}/>)}
+		</Calendar>
+	);
+}
+
+function defaultFooter() {}

package/src/DatePickerTemplate.tsx

@@ -0,0 +1,11 @@
+import DatePickerInputTemplate from "./DatePickerInputTemplate.js";
+import DatePickerPopoverTemplate from "./DatePickerPopoverTemplate.js";
+
+import type DatePicker from "./DatePicker.js";
+
+export default function DatePickerTemplate(this: DatePicker) {
+	return [
+		DatePickerInputTemplate.call(this),
+		DatePickerPopoverTemplate.call(this),
+	];
+}

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